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

17652 ワード
チュートリアル React 大石泉すき チュートリアル テキストリンク

この記事は 、「大石泉すき」アドベントカレンダーの7日目の記事です。

1. 大石泉の概要

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

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

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

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

2. Reactの概要

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

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

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

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

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

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

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

  • 「React 開発環境構築 - Qiita」などを読んで、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コードを編集する」について

公式のチュートリアルにあるサンプルコードのページを開いて下さい。「JS」と書かれたタブに、Reactのチュートリアルコードが記されていることが分かると思います。

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

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

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

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

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に関する説明は省略します。
ここまで読んでいただきありがとうございました。