背景
・最近のフロントエンドの技術に対し知見を高めようという会を実施しておりまして、私の担当として、Reactの導入の説明をすることにしました
(会のメンバーはいずれも私も含め知見はあまりない想定)
・そこでチュートリアルをやってみたのですが、人に説明するのは情報が多すぎて整理が必要..と感じたので私が説明しやすいように再整理することにしました
やること
・React.jsのチュートリアルを実施
・チュートリアルの情報を最低限のものに絞り、人に説明する際に理解しやすいように順序立ててに再整理する
・何故Reactか？
・最近のフロントエンドではReact or Vueの構図で語られることが多いんじゃないかと考えたため
参考資料
・React.jsの本家チュートリアルはこちら
https://reactjs.org/tutorial/tutorial.html
・チュートリアルは英語しかないので、苦手な方はこちらの翻訳記事が大変にオススメです。私も大いに参考にさせていただきました。ありがとうございます！
React チュートリアル 日本語翻訳
・また、本家チュートリアルの流れに忠実に翻訳されているので、チュートリアルの内容をしっかり把握したい方はむしろこちらの記事がオススメです
・尚、私がmacOSを利用しているため、以後はmac上での操作を想定しています
ゴール
・このような五目並べゲームの作成を行います
https://codepen.io/ericnakagawa/full/ALxakj
環境準備
・チュートリアルにはブラウザ上で進めるパターンと、エディタを用いて自分のローカルで進めるパターンの2種が挙げられています。
・私はエディタでチュートリアルを進めたかったので、こちらから始めました
Nodeをインストール
・まずはNodeをインストールしましょう。ここでは細かい手順は省略します。
https://nodejs.org/en/
サンプルPJの作成
・適当なローカルディレクトリにサンプルPJ用のディレクトリを作成し、移動します。
% mkdir react-sample
% cd react-sample
・ReactPJの雛形を作成するコマンド「create-react-app」をインストールします。
% npm install --save create-react-app
・reactPJの雛形を作成し、PJディレクトリ移動します。
% npx create-react-app my-app
% cd my-app
・起動
% npm start
localhostの3000ポートにアクセスすると、Reactのサンプルページを表示できます👏
五目ならべゲームの雛形の準備
次は、チュートリアルで扱うアプリケーションの準備をしていきます。
my-appの中にはこのようなディレクトリが配置されているはずです。
% ls
README.md package-lock.json public
node_modules package.json src
チュートリアルでは既存のサンプルサイトのコードは利用せず、別のコードを用いて進めていきます。
そのため、一旦既存のsrc配下のコードを削除してしまいます。
% rm -rf src/*
サンプル用のcss, jsファイルをそれぞれ配置しましょう。
% touch src/index.css src/index.js
作成したcss, jsファイルに下記サンプルコードの内容をコピーしましょう。
index.css
index.js
これで準備ができました。再びlocalhostにアクセスし、9×9のマス目が出来ていれば完了です。
※ファイル変更の際にアプリケーションは再起動されるので、npm startの再実行は不要です。
http://localhost:3000
componentについて
・Reactではコンポーネントと呼ばれる部品をJavaScriptで記述し、利用していきます。
・コンポーネントの定義の仕方として、下記のようなサンプルが挙げられています。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />
・上記の例では、ShoppingListというコンポーネントの定義を行っています。
・コンポーネントの定義には、React.Componentをextendsしたサブクラスを定義することで行うことができます。
・これを踏まえて、次にチュートリアルで利用する各部品をコンポーネントとして定義していきます。
今回利用するコンポーネント
・チュートリアルでは、下記3つのコンポーネントを定義、利用します。
・Square...9つの各マスをレンダリングするコンポーネント
・Board ...Squareコンポーネントをレンダリングするコンポーネント
・Game ...Boardコンポーネントをレンダリングするコンポーネント
.上位コンポーネントからGame → Board → Square と細かい部品になっていくイメージでいると分かりやすいかと思います。
・コンポーネントは先に用意したindex.js内にすでに定義されているので見てみましょう。
Squareコンポーネント
・button要素のレンダリングを行います
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
Boardコンポーネント
・Squareコンポーンネントの呼び出しを行っています
・コンポーネントの呼び出しは、<Square />のように行います
・ここではrenderSquareメソッドを定義し、Squareの呼び出しを再利用できるようにしています
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
Gameコンポーネント
・Boardコンポーネントの呼び出しを行っています
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
Gameコンポーネント呼び出し
・Gameコンポーネントの呼び出しはファイル最後の方で実施していました。
・ReactDOMというグローバルオブジェクトを利用するのですね(あまり深堀はしていません..)
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
一旦ここまで...
初めて記事書きましたが時間かかるものですね。
次回は実際にコードを修正しくところをまとめていこうと思います。