「大石泉すき」で始めるReact入門

この記事は 、[「大石泉すき」アドベントカレンダー](https://qiita.com/advent-calendar/2019/ohishi-izumi-suki)の7日目の記事です。

# 1. 大石泉の概要

```json
{
    "登場作品": [
        "アイドルマスターシンデレラガールズ",
        "アイドルマスター シンデレラガールズ スターライトステージ"
    ],
    "属性": "Cool",
    "血液型(ABO式)": "A",
    "身長(cm)": 157,
    "体重(kg)": 41,
    "3サイズ(cm)": {"B": 83, "W": 55, "H": 82},
    "年齢(歳)": 15,
    "誕生日": {"月": 11, "日": 11},
    "星座": "蠍座",
    "出身地": "静岡",
    "趣味": "プログラミング",
    "利き手": "右",
    "声優": "なし"
}
```

代表的な所属ユニットは、同郷の村松さくら・土屋亜子との3人による「[ニューウェーブ](https://dic.pixiv.net/a/ニューウェーブ)」。もちろん3人は仲良しで、一次創作・二次創作では、「Cute担当であるさくらを二人が可愛がる」といった展開が多い。

また、キャラ単独においても、「(その胸囲に関わらず)**胸のチャックをあまり閉めようとしない**」「**カチャカチャッターン！**」「**水着絵がセクシー**」「**デレぽで杏に挨拶botを作った**」など話題に事欠かない。「イヴいず」「マキいず」など、効果的なカップリングを探求する者もいるようだ。

趣味のプログラミングについては、公式資料では「プログラミング大会で優勝したことがある」「デレぽ用botを作った」ぐらいしかない気がする。ただ、恐らくReactの存在は知っていることだろう(既に経験済みかもしれない)。そこで、Reactに絡めた記事を書くことに思い至った。

- 参考：
  - [大石泉 (おおいしいずみ)とは【ピクシブ百科事典】](https://dic.pixiv.net/a/大石泉)
  - [大石泉とは (オオイシイズミとは) [単語記事] - ニコニコ大百科](https://dic.nicovideo.jp/id/4950178)
  - [大石泉 | アイマス シンデレラガールズ カードギャラリー](https://imas.gamedbs.jp/cg/idol/detail/123)

# 2. Reactの概要

[React](https://ja.reactjs.org)は、Facebookおよびコミュニティによって誕生し、現在も開発が進められている「ユーザインターフェース構築のための JavaScript ライブラリ」……換言すれば「**Webアプリを作成するためのフレームワーク**」です。

Reactの最大の特徴は、「仮想DOM」と呼ばれる技術を生み出したことにあるでしょう。

- 素のJavaScriptやjQuery……画面を更新する際、**DOMを直接書き換える**
- React……JavaScriptにより仮想DOM(ツリー構造のオブジェクト)を書き換え、**差分だけDOMに反映する**

これにより、職人技がなくても手軽に、**画面を高速に書き換える**ことができるようになりました。また、JSX記法を採用したことにより、小さな粒度の「パーツ」から、それらを組み合わせた大きな「ページ」の単位までをサクサク書くことができます。

そうしたことから、今のところReactは、**世界で一番流行っているWebフレームワーク**の1つとなっています。

# 3. さっそく表示してみよう

まずReact開発のための環境を入れましょう。当記事を実験していくための環境としては、主に2通りの作り方があります。

- 「[React 開発環境構築 - Qiita](https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5)」などを読んで、Node.jsとyarnをパソコンにインストールする
- CodePenのJavaScriptコードを編集する

## ※「Node.jsとyarnをパソコンにインストールする」について

詳しくは上記Qiita記事を読めばいいですが、要するに「Node.js」というアプリケーションを入れて、それを利用して「yarn」というアプリケーションを入れればいいです。真面目に説明しだすと**話が大石泉すきから大幅に逸れる**ので割愛します。その上で、App.jsxについて

```App.jsx
import React from 'react';

const App = () => {
  return (<h1>大石泉すき</h1>);
}

export default App;
```

と修正したものが、「`yarn start`」などで動くことを確認して下さい。

## ※「CodePenのJavaScriptコードを編集する」について

[公式のチュートリアルにあるサンプルコードのページ](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)を開いて下さい。「JS」と書かれたタブに、Reactのチュートリアルコードが記されていることが分かると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29802/aa79dcca-44b8-3f02-d2df-d34cc7eb570c.png)

次に、この中身を次のテキストに置き換えます。

```jsx
const App = () => {
  return (<h1>大石泉すき</h1>);
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```

すると、「大石泉すき」と表示されていることが分かると思います。以降は、「ReactDOM.render」以降は触らず、それ以外を編集していきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29802/b3b0f592-66d3-95a4-757a-b56e4a013bb6.png)

# 4. Reactで「大石泉すき」と表示させるには

3.の時点で既に「表示」はできていますが、実際にはどういった仕掛けなのかを振り返ってみましょう。

```temp.jsx
const App = () => {
  return (<h1>大石泉すき</h1>);
}
```

まずここですが、換言すれば「`<App />`という独自のタグを作成できるよ。それを展開すると`<h1>大石泉すき</h1>`になるよ」という意味です。
拡張子を「.jsx」にしたファイル内では、このような「タグのようなもの(JSX)を返す関数」を定義してよくなります。この単位を「コンポーネント」と呼びます。

```temp.jsx
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```

次にこの下りですが(※ちゃんと環境構築した人の場合`index.tsx`などに含まれています)、これは「`<div id="root"></div>`というタグに対して、`<App />`の内容で書き換えるよ」という意味です。`<App />`の中身がReactの仕組みで書き換わった場合、Reactライブラリの力により、再び描画し直されます。

さらに、JSXとは別に、`<html>`とか`<head>`とか`<body>`とか`<div id="root"></div>`とかが含まれる雛形のファイルがあり、それらが**組み合わさることで初めて、Webブラウザでも表示できるHTMLが完成**します。

# 5. React流(JSX流)の書き方について

```temp.jsx
const App = () => {
  return (<h1>大石泉すき</h1>);
}
```

が実質「`<h1>大石泉すき</h1>`」になることは納得していただけたとして話を進めます。

```temp.jsx
// 一番外側のタグが1つしかない場合はカッコを省略できる
const App = () => {
  return <h1>大石泉すき</h1>;
}

// 一番外側のタグが複数個ある場合、一番外側のタグが1つになるようにしなければならない。
// <div>などでもいいが、「<></>」という仮想的なタグを使うことが推奨されている
const App = () => {
  return (<>
    <h1>大石泉すき</h1>
    <h2>大石泉すき</h2>
  </>);
}

// 当然、他のコンポーネントを使用することもできる。
// コンポーネントに限らず、<br>のように終了タグ不要なものについては、
// XMLのように「<タグ名 />」と書く必要がある
const Suki= () => {
  return (<h1>大石泉すき</h1>);
}
const App = () => {
  return (<>
    <Suki />
    <p>土屋亜子<br/>
    村松さくら</p>
  </>);
}

// 引数を受け取れるようにできる。以下の場合、「<Suki name="大石泉" />」とすると、
// 「<h1>大石泉すき</h1>」にまで展開される。また、{}によって、JSX内に文字列や関数の戻り値
// などを埋め込むこともできる
const Suki= (props) => {
  return (<h2>{props.name}すき</h2>);
}

// 「const App = () => {」はJavaScriptにおける関数形式なので、
// 戻り値を条件によって変えたりできる。もちろん変数宣言なども可能。
// 今回説明は割愛するが、React Hooksと呼ばれる関数群を使用すると、かなり様々なことが可能になる
const App = (props) => {
  if (props.type === '大石泉') {
    return (<h2>大石泉すき</h2>);
  } else {
    return (<h2>大石泉すし</h2>);
  }
}

// JSX記法の中では、「class」属性は「className」、「for」属性は「htmlFor」と書かなければならない。
// 属性の引数の値に{}を使うこともできるので、組み合わせるとこういった風に書ける
const App = () => {
  const onClickButton = () => {
    alert('大石泉すき');
  }

  return (<form>
    <label htmlFor="suki">大石泉すき</label>
    <button type="button" className="btn button" id="suki" onClick={onClickButton}>大石泉すき</button>
  </form>);
}
```

……一番基本的なものはこれぐらいでしょうか。話が高度になりすぎるので、React Hooksに関する説明は省略します。
ここまで読んでいただきありがとうございました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29802/7edd2276-d45b-f66d-e79e-155a2f17d10c.png)