【React】フロント初心者が公式チュートリアルをやってみた

こんにちは、久しぶりの記事投稿です。
転職先でReactを使っていて、話に何もついていけずに焦ったので、何かいい勉強材料ないかなと調べていたら公式のチュートリアルがあるのを発見しました。

せっかくなので、チュートリアルをやりつつ困ったポイントなどを補足して記事にしてみました。
自分と同じくフロントはちょっと苦手・・・って方に参考にしてもらえればと思います。

公式チュートリアルページ

こちらのページが公式のチュートリアルになっています。
手っ取り早く習得したかったので、日本語版のサイトをみながら勉強しました。

翻訳した日本語独特の言い回しがたまに気になりますが、概ねストレスなく読み進められます。

環境構築

ブラウザでコードを書いてリアルタイムで表示してくれる便利なcodepen.ioを使えば環境構築をせずともチュートリアルを受けられます。
自分は環境構築も含めて勉強したかったのでわざわざ環境を構築しました。
ただ、エディタ使った方が自動補完など効くので、環境構築するのをおすすめします。

Node.jsのインストール

インストールの方法は色々ありますが、ここではnodebrewを用いた方法を紹介します(mac向けです)。

homebrewのインストール

上記サイトのInstall Homebrewにあるコマンドをターミナルにコピペします。
ターミナルを再起動して brew -vでバージョンが表示されればOKです。

nodebrewのインストール

以下打つだけでOKです。

brew install nodebrew

nodebrew -vでコマンドが返って来ればOKです。

Node.jsのインストール、有効化

バージョンへのこだわりがなければ安定板をインストールして有効化しましょう。

nodebrew setup
nodebrew install-binary stable
nodebrew use latest

環境変数設定

このままでは有効化はできましたが、ターミナルからnode -vなど打っても反応しない状態です。
なので、それを認識してあげるように環境変数を設定します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

ここでターミナルを再起動すると、node -vでバージョンが返ってくるはずです。

いよいよ、Reactの環境構築

あとは、こちらを手順通りやっていけばOKです。

ちょっと面倒な方のためにリポジトリに上げておきました。

以下コマンド打てばOKです。

git clone https://github.com/okaponta/react-tutorial.git ./react-tutorial
cd react-tutorial
npm install
npm start

いよいよ、チュートリアル

先ほど、npm startを打ったと思うのですが、
そうするとエディタから編集して保存をすると自動でコンパイルしてくれます。
コードを保存して、ブラウザで更新すれば反映されているはずです。

チュートリアルのタイトルと対応して気づいた点や詰まったポイントを書いていきます。
公式チュートリアルページと対応させながら見ていただければと思います。

公式チュートリアルの各章ごとにコミットを分けているので、見合わせながら参考にしていただければと思います。

データをProps経由で渡す

コードはこのように貼っていきます。

この章の気づきや、学びや、ぼやきなどを箇条書きで書いていきます。

• 親コンポーネントから子コンポーネントに値を渡す時はpropsって名前で渡ってくる
• ここはReactコンポーネントのお決まりで覚えるものなのかな

インタラクティブなコンポーネントを作る

• onClickのコールバック関数も一緒にjsx形式(?)で書ける。
• stateという新しい概念が出てきた。javaでいうところのpropsが引数、stateがフィールド変数みたいなイメージ。
• setStateはReactコンポーネントのメソッドでこれからよく使いそうな気がする。

State のリフトアップ

• Stateのリフトアップもほどほどにしないと親コンポーネントが全てのpropsを持つみたいな構造になりそうで怖いなぁと思った。
• 関数が定義されていないなどの場合に画面でエラーをわかりやすく表示してくれるのは好感度高い。
• onClick={() => this.props.onClick()}の部分、onClick={this.props.onClick}でも動いた。

イミュータビリティは何故重要なのか

• フロント側の言語はどこでも簡単にアクセスできて書き換え可能だったりするので、やっぱりイミュータブルにした方が壊れにくいんだよなぁと改めて実感。。
• この章をわざわざ作成した開発者の思いを感じました (自分も以前フロント開発した時にどこがどう値を更新しているか分からずなぜ動いているのか分からないみたいな状況になったこともあり・・・)。

関数コンポーネント

• render()だけを持つようなReactコンポーネントは関数コンポーネントとして簡略化して書ける。これは知ってないとはじめてみた時に混乱しそう。
• 末端のコンポーネントは基本的にはpropsを親からもらって描画するという仕組みになりそうだから簡単なやつらはこの関数コンポーネントで書けるようになりそう、だと予想。

手番の処理

• ここは、stateに値を追加するくらいだったので、特に新たなことはなかった気がする。

ゲーム勝者の判定

ヘルパー関数が最初よく分からなかったので、コメントいれて補足してみました。

function calculateWinner(squares) { // 引数は配列
  const lines = [ // 勝ってる場合の石の並び
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) { // 勝ちパターンのぶんだけループ
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      // if(squares[a])だと、aが未入力の場合にfalseになる。
      // ので、この条件はsquares[a]に値が入ってて、かつsquares[b]とsquares[c]も同じ場合にtrue
      return squares[a];  // 勝者を返す
    }
  }
  return null;  // 未決着の場合はnull
}

• 手順通りやってくだけでマルバツゲームが完成した・・・
  • TDDのBowling Game Kataみを感じた
• stateで状態を共有して勝手に描画してくれるのが構造をシンプルにしてくれてる気がする。

Stateのリフトアップ、再び

結構この章は激しく構造を変えていて、理解するのに時間かかりました。

• xIsNextはなんでリフトアップするの？
  • 履歴を管理するときに盤面と一緒に次どの手番かを記憶したいから
• handleClickももともと現在の状態に操作していたのを履歴に追加するという操作に結構変わったので、処理も少し複雑になった
• 手順と異なり最初にonClickを修正したため、しばらくコンパイルエラーで描画できない時間があった。手順通りやればとりあえず描画できる状態は続くのでリファクタの順番も大切だなと実感。きちんと手順通りやるのが大事だなと。。

過去の着手の表示

自分のjsなどの知識が足らずにここも理解に時間かかりました。以下メモです。

const moves = history.map((step, move) => { // mapの第1引数は配列要素(squares)、第2引数はインデックス
  const desc = move ? // moveが0、つまりまだ手を打っていないとき、falseになる
    'Go to move #' + move :
    'Go to game start';
  return ( //<ol>はrender()内で宣言してる
    <li>
      <button onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );
});

keyを選ぶ

• Reactのリストにはkey要素って特別な概念があって、それをもって新規リストかどうかを判別するらしい。
• 正直あんまりピンときてないので、Reactのリストのときkeyについて気をつけると覚えておく。

タイムトラベルの実装

• あれ、jumpToの中でhistoryをいじらなくていいのかな？
  • 4こめにjumpしたら5こめと6こめのhistoryが維持されちゃう
  • 後でjumpToの中でやってた。
  • 戻る手番を間違えたときのことを考えると、こっちのしようのがよさそう。
• slice(first,end)で配列の要素の切り取りができる

完走した感想

• 環境構築が簡単！！
  • つよつよエンジニアじゃなくても手軽に使えるのはやっぱり初心者には助かりますね。
  • あと、google拡張機能のやつすごい。こんなの欲しかった。
• ほどよい難易度
  • 簡単すぎず、難しすぎず。後半にいくほど行間があいてきて自分で考える必要もでてくるって感じです。
  • プログラム書くの初めてです！って方にはちょっと難易度高めな気はする。
  • 動くのでたのしい！！！
• とりあえずとっかかりとしてprops、store、renderあたりを体感できたのでOKかなって気はします。