Reactのチュートリアルをやってみて各章のポイントメモ

はじめに

何度かやりかけて中途半端にしていたreactのチュートリアルをやってみました。
チュートリアルの各章のポイントとなりそうなところ？を備忘録として列挙。

そもそもreactって？という点について諸々調べて見た結果をざっくりまとめています。
これから始める方向けの内容ですので、上級者の方は生暖かく見守って頂けますと幸いです。

間違いのご指摘や詳しい解説を頂けたら嬉しいです。

reactについて

reactとは？

Facebook社が開発したJavascriptのライブラリです。
MVCでいうところのView部分(UI)を構築するための機能を提供しています。
仮想DOMが使われており、実際のDOMだけを扱うものより高速だと言われています。

reactの考え方

認識間違っているかもしれませんが・・・例えばユーザーの何らかの操作を受けて描画仕直しが発生した場合、影響がある箇所だけ描画仕直したら高速だよね。という考えです。
その考えを実現する方法として仮想DOMが使われています。

reactの特徴は？

• 差分レンダリング
  • 仮想DOMを用いて変化前と後の差分をとり、その差分だけ適用する(patchみたいなもの)
• 単方向のデータバインディング
  • データとDOMが結びついていて、データが変更されるとDOMも変更される
  • 子は親のデータを変更できない
• コンポーネント思考
  • 部品(コンポーネント)を集めてUIを作ろう
• JSXというjavascriptのシンタックス拡張
  • JSの中でHTMLタグを使用することができるようになる

reactのメリットデメリット

色々調べた結果、自分が感じたメリットデメリットはこんな感じです。

メリット

• 差分レンダリングによる高速化
• コンポーネント思考なので再利用性・保守性が高い
• JQueryからさよならできる

デメリット

• 実業務で使うようにするためには覚えることが多い(学習コストが高い)
  • JSX
  • webpack, babel
  • (redux)

tutorial

公式チュートリアル
https://facebook.github.io/react/tutorial/tutorial.html

コードシェアサービスでチュートリアルのコードがシェアされています。
コーディングと動作確認はこちらでやっていくことになります。
https://codepen.io/gaearon/pen/oWWQNa?editors=0010

チュートリアルのお題はOXゲームです。
以下は各章のポイントとなりそうだと思ったことを自分用のメモとして残しておきます。
日本語訳している方がいますので英語はちょっと・・・という方は検索してみてください。
自分は英語の練習のためキーボードぶん投げたくなる衝動を抑え何とか全部やってみました><

Passing Data Through Props

• コンポーネント間での値のやり取り →propsを使う。具体的にはthis.props.{値の識別子}

An Interactive Component

• squareをclickした時にalertを出すonClickを追加
  • allow function expressionという新しい記法を用いている
• stateを持つことができるのでその使用例
  • click時にstateをセットするという内容
  • setStateが呼び出されるとcomponentの更新がスケジュールされる
  • 渡された状態で更新され、子・孫コンポーネントも一緒に再レンダリングされる

Lifting State Up

• 実際に○xゲームを作っていく
• 9マスの状態管理をやろう
  • 各マスの状態をBoard(親)で管理
  • 状態を各子コンポーネントから親コンポーネントに移動させる
• 各マスをクリックした時の挙動制御
  • Boardが持つ状態はプライベートと見なされるのでSquareから直接更新はできない
  • BoardからSquareのonClickが押された時に実行される関数をSquareに渡す
  • SquareはonClickのイベントにBoardから渡ってくるonClickというpropをセットする
  • reactにはon*のハンドラーにはhandle*という名前をつけるという慣習がある
  • onClickであればhandleClickといったように
• クリックされた時に実行される関数を作る(↑で指定したはいいがまだ定義されていないので)

Why Immutability Is Important

• データを変更するには2つの方法がある
  • 直接データを変更する方法と元のデータを新しくコピーして変更を含んだオブジェクトで置き換える方法
• 直接変更しないことによってコンポーネントとアプリケーションの全体的なパフォーマンスを向上させることができる
• データの不変性は複雑な機能を実装するのを容易にする
• 直接データを変更してしまうと、現在のオブジェクトと前のコピーを比較してオブジェクトツリー全体を横断的に見て、各変数とその値を比較することが必要 　→それに比べ不変オブジェクトであれば、参照されるオブジェクトが以前と異なれば「変更されている」となる

Functional Components

• レンダリングメソッドのみで構成されるSquareのようなコンポーネントには、functional componentsと呼ばれる簡単な記法をサポートしている

Taking Turns

• Xしかおけない欠陥品だからXの次はO。Oの次はXといった具合にターン制を導入しよう

Declaring a Winner

• 勝者を決めるためにヘルパーメソッドを追加しよう

Storing a History

• プレイ履歴を持とう。そのためにGameというクラスを追加して、そこで状態管理をしよう。

Showing the Moves

• プレイスタートから1手毎の履歴が盤面右側に追加されていきます
• チュートリアルにも記載されていますが、警告がでます
• 次の章はそのエラーの解消についての説明です

Keys

• 前章の警告について 前章で出た警告のどこが悪かったかというと、

return (
  <li>
    <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
  </li>
);

何が原因かというと、reactは、コンポーネントが他のコンポーネントとリスト内の各要素にユニークなキーをつけることをルールとしているため。
これを解消する場合以下のコードに変更する。

return (
  <li key={move}>
    <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
  </li>
);

• keyはreactの予約語
• this.props.keyでキー参照することはできない(reactはキーを自動的に使用し、どの子を更新するか決定する)
• コンポーネントが独自のキーについて問い合わせる方法はない
• keyがセットに追加されるとコンポーネントが作成される
• keyが削除されるとコンポーネントが破棄される
• キーを変更するとコンポーネントは破棄され、新しい状態で作成される
• 動的なリストを作成するたびに適切なキーをつけることを強く進める

Implementing Time Travel

実際に1手1手の状態を見れるようにしていく
チュートリアルの通り実装すればオーケー

おわりに

何度かやりかけて中途半端になっていたチュートリアルを完遂(今更・・・)

もともとJSをメインでやってきているわけではないので、JSXについて何の抵抗もありませんでした。
むしろタグ書かなくていいのは自分にとってはすごく嬉しいですね。
(この辺は好き嫌いあると思いますのでどちらが良いとかではありません)

まだ深く調べられていませんが、仮想DOMやreduxあたりがすごく面白そうだと思いました。
覚えて実務で使えるようになったらかっちょいいんだろうなぁ。
本職の詳しい方にいろいろお話伺ってみたいです。

もちろん自分でもインプットしていきますので、
いいサイトあるよ！とか教えたるわ！って方がいたら是非コメントくださいm(__)m