Edited at

読書記録 WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

More than 1 year has passed since last update.


この文書について

この本 (http://amzn.to/2id6xsh) に対する個人の読書メモ

対象読者 : 掲題の書籍について何が書いてあるか知りたい人

筆者の状況


  • phpの開発が長い

  • オブジェクト指向はわかっているつもり

  • jQueryはCMSの開発程度で1.xを少し触った程度

  • JSのフレームワークについては別の本を1冊読んだ



簡単なまとめ


  • 基本と応用とあるが、ほぼ基本まで

  • 下記の理解が得られる


    • ReactとJSXを使ったコードの書き方

    • Reactのコンポーネントとは何か




Reactの概要と特徴


Declarative


  • 宣言型


    • アプリの状態に対して自動でページが更新される


      • 考え方としてはhtml・CSSと同じ


        • html・CSSは属性を定義してあるだけで、ブラウザが解釈してレンダリング



      • ViewModel(JavaScriptで記載されたコンポーネント)の変化に応じてView(html)が更新される
        = MVVM的な振舞い



    • 対になる考え方は手続型


      • 通常のプログラミング言語

      • jQueryを使ったページ更新など


        • DOMを直接的に書き換える








Component-Based


  • ページはコンポーネントの集合体

  • コンポーネント自体の記述は宣言型 (= クラス定義)

  • ロジックはJavaScriptのメソッドで手続型で記載できる


React用語


コンポーネント (Component)


  • ページの要素をクラス化したもの


    • Reactを使ったページ開発 = カスタムコンポーネントを作成し、配置すること



  • renderメソッドを持つ

  • htmlの属性はすべてlowerCamelCaseでJSのプロパティにする


ステート (State)


  • いわばコンポーネントの内部変数


    • コンポーネント生成時に初期化される

    • ユーザ操作の結果などを保持することが可能



  • コンポーネント外からアクセス不可能


プロパティ (Property)


  • コンポーネントに外部から与えられるオプション。


    • LinuxなどのCLIだと、--- などで指定するアレ

    • オブジェクト指向的に考えるとコンストラクタの引数



  • ステートの初期化に使うことができる


JSX


  • JavaScript中にXMLの文法でコンポーネントを配置する

  • JSXとReactとは独立しており、使うか使わないかは自由

  • JSXを使う場合、トランスパイラは必須


仮想DOM (Virtual DOM)


  • ReactはJavaScriptのオブジェクトとして仮想DOMを持つ

  • 更新はまず仮想DOMに対して行われる

  • その後、仮想DOMと本物のDOMの差分比較して、本物のDOMの変更は差分のみ実施する


    • 差分比較をreconciliationという




コンポーネントのライフサイクル

コンポーネントには特定のタイミングで呼ばれるコールバックが用意されている。

ネイティブ系の開発者ならviewやwebviewのコールバックでおなじみ。

(iOSならviewDidLoadやviewWillUnloadなど、

AndroidならFragmentのonCreateやonDestroyが該当)

具体的には以下の通り



  • void componentWillMount()


    • コンポーネントのマウント直前に呼ばれる




  • void componentDidMount()


    • コンポーネントのマウント直後に呼ばれる




  • void componentWillReceiveProps(object nextProps)


    • プロパティを受け取る直前に呼ばれる

    • ただし、マウント時には呼ばれない




  • boolean shouldComponentUpdate(object nextProps, objectNextState)


    • コンポーネントを更新する判定の移譲


      • 戻り値が true ならプロパティとステートを更新し、 false なら更新されない






  • void componentWillUpdate(object prevProps, object prevState)`


    • コンポーネントが更新される直前に呼ばれる

    • ただし、マウント時には呼ばれない


    • shouldComponentUpdatefalse を返したときは呼ばれない

    • 引数で 更新直前のプロパティとステートがわかる




  • void componentDidUpdate(object prevProps, object prevState)


    • コンポーネントが更新された直後に呼ばれる

    • 引数で 更新直前のプロパティとステートがわかる




  • void componentWillUnmount()


    • コンポーネントがページから削除されたり、ページが閉じられる直前に呼ばれる



補足


  • マウント(Mount)


    • ページが開かれ、そこに配置されているコンポーネントが描画される




JSX


  • renderの中身をhtmlっぽく書けるようになる


  • {}で囲った中身がJavaScriptとして評価される



    • <?php ?> で html中にphpのコードを埋め込むのと同様

    • JSX中にコメント書くときは { /* */ } で囲む



  • 属性の与え方がhtmlと違う



    • style はオブジェクトとし、 属性は -区切りの代わりにlowerCamelで指定


    • class ではなく className

    • 例) style={{fontStyle: 'oblique'}} className='hoge'



  • 属性を与えるにはスプレッド属性が便利



    • ...の後にJavaScpirtの変数を置くと展開される

    • 例) <input {...myAttributes} />



      • myAttributes はJavaScriptのオブジェクト



    • 例) <h2 style={{...myStyle}}>test</h2>




Reactによるフォーム



  • inputタグのtype=textdefaultValue属性を指定すると書込み可能になる



    • value属性では、読み取り専用になってしまう



  • コンポーネントのonChangeのイベントハンドラでステートを更新させる


コンポーネントの使い方


  • コンポーネントはネストできる


    • あるコンポーネントに別のコンポーネントをプロパティとして持たせる




  • mixin機能で実装の流用ができる


    • コンポーネント内にmixins というプロパティで指定する(複数指定可能)


      • 例) `mixins: [MixinA,MixinB]

      • MixinAやMixinBはJavaScriptのオブジェクト



    • ただし、プロパティの衝突などの問題があり、現在は非推奨




アニメーション