swchrm logs

妄想技術録

React.jsの理解促進のために、問に答える形でここまでの理解を書き出してみる。

はじめに

アウトプットによる理解度の確認を目的としてます。 情報の正確性を保証するものではないです。

問) Reactとはなにか。またそれにまつわる技術は。書けるだけ書け。

React.jsはUIを簡単に構築するためのFacebook製のUIフレームワーク。と思っていたが早速違うようで、React.jsはフレームワークではなくライブラリ。公式にも「A JavaScript library for building user interfaces」との記載がある。

基礎概念・キーワードは下記の通り

また実用に伴って関係が出てくる要素は下記の通り

  • TypeScript
  • Jest
  • React Native
  • Webpack

リアクティブとは…よくわからない。

コンポーネントとは、SPA(Single Page Application)を制作する際に重要になってくる概念。SPAとは旧来のWebサイトで主流だったページ遷移を行わない。ページ遷移を行わないというよりかは複数のHTMLファイルを利用しないといったほうがいいのか。そのかわりに、表示されている要素(ブロック、ヘッダーやコンテンツなどなど)を細かく部品として捉え、その部品化された各要素をなんらかのアクションによって入れ替えてアプリの状態・表示を変更する。このときの部品をコンポーネントという。大抵はこのコンポーネントごとにファイルを作成する。例えばヘッダーだったら「Header.tsx」のようになる。またコンポーネントの中にもコンポーネントは存在できる。ヘッダー内にログインコンポーネント、メニューコンポーネントなど…(実際のコンポーネント分割)

Reactを使う際にはReactのコアライブラリとReactDomをインポートする必要がある。なぜ別れているのかは現時点では不明。Reactはコアライブラリなので必須なのはわかる。ReactDOMが必須かどうかは不明。Reduxは必須ではない。ただし大規模アプリでは入れたほうがいいっぽい。 Reduxは何かという話だが、これは状態管理に特化したライブラリという認識。必須ではないといったのは、ReactのコアライブラリだけでコンポーネントないにState項目を設けて、そこに状態を保持できるから。どのくらいの規模ならReduxが必要になってくるのかは不明。恐らく傾向があるだけでこれと行った正解はないはず。 ReduxはFluxから影響をうけて作成されている。Fluxと何が違うかはよくわかっていない。

「状態」の概念が重要になってくる。ここでいうところの状態とは、例えばユーザー(ユーザーオブジェクト)がログインしている/していないことや

Jestはフロントエンドのテストツールであり、公式ドキュメントのチュートリアルでも使われているテストツール(テストフレームワーク?)。テストしたいDOM要素を選択し、入力と予想結果を決められた形で書く。チュートリアルのデフォルトだとhoge.test.tsxのようにテストしたいファイル名の拡張子の直前に.testを入れるとファイル保存時にテストが走るようになる。コケるとコンソールにエラーが出る。実際はEnzymeと一緒に使う。詳しくは下記記事参照。

mae.chab.in

TypeScriptについてはJavaScriptで書くかTypeScriptで書くかという話で、自分はTypeScriptを選択している。理由としては保守フェーズで型の恩恵が得られるということ。ソフトウェアには開発だけでなく保守がつきものだと思っているので、よっぽど開発速度を争うような自体でなければ、開発規模にもよるが多少開発速度が落ちても運用・保守・拡張をしやすいほうがいいといえる。実際にTypeScriptのほうが良いのかという話は、見聞きした中でとりあえず採用して実感してみるという段階なので正直不明。

不明点メモ(順不同)

  1. リアクティブ
    そういえばリアクティブがよくわかっていない。恐らくわかっていなくても雑には書けそうだが、基礎概念を理解することでより理解度を上げたい。

  2. コンポーネントを分割する単位、分割の基準
    コンポーネントを分割する単位がよくわからない。例えばヘッダーはヘッダーで別れた後、メニューコンポーネント、ログインボタンコンポーネント…という具合に分かれるのか?この辺は「React コンポーネント設計」とかで検索すれば出てきそう。

  3. Reduxが必要/不必要の基準
    Reduxは必須ではない。だがどのようなときに必要で、どのようなときにいらないのかが分からない。また何を基準にするのかが分からず、その閾値も不明。 予想ではアプリのの規模、特にStateやコンポーネントの複雑性が高くなってくると必要になりそう。

  4. StateとPropの違い
    Stateは状態で、ログインしてるかなどの情報を管理する概念だということはなんとなく把握できている。ではPropは?一般的にデータモデルはこのPropで管理され、ここに値をセット/ゲットしていくことで表示を変えたりDBに値を書き込んだりするのか?

  5. Reduxの使い方
    これは実際にどうコードとして書いていくかみたいなところ。 マッピー氏の記事にいいのがありそう。

不明点解消…?に向けて

  1. リアクティブ
    下記を参照にした。 www.reactivemanifesto.org が、抽象的でまだわからないのでこれは保留。

  2. コンポーネントを分割する単位、分割の基準
    下記が参考になった。コードもあって具体的。ヘッダー、ボディ、とDOMのブロックごとにComponentを分けている。これが個人的には分かりやすい。 medium.com
    ただし、下記3.の記事に

「Reactを少し使ってみれば、Reactのデータフローが親コンポーネントから子コンポーネントにpropsを渡す作業であることがわかります。」

とあるので分けまくると実装がだるいことになりそう。

  1. Reduxが必要/不必要の基準
    下記で解決。分かりやすい。

techracho.bpsinc.jp

特に必要となる原因は

「Reactでは(他のフレームワークでも同様ですが)、親子関係にないコンポーネント同士でのやりとりがスムーズにできません。Reactでは、それが必要な場合にはFluxのパターンに従ってグローバルなイベントシステムを構築せよとアドバイスしています。そしてここがReduxの出番なのです。」

そして解決法は

「Reduxを使うと、アプリの全ステートを保持する「ストア」が使えるようになります。コンポーネントAでステートが変更されるとそのことがストアに伝わります。コンポーネントAのステート変更を監視する必要のあるコンポーネントBやCはストアにサブスクライブすることで、ステートの変更がストアから中継されます。」

と明快に示されている。原文には図があってさらにわかりやすくなっている。 4. StateとPropの違い
基本的には下記記事を参考にした。 qiita.com 上記記事ではStateはComponentを持つが、 また5.で掲載した記事でも触れているが、StateはPropに紐付けられるものであるので不可分ではない。
5. Reduxの使い方
下記がとてもわかり易かった。一度では把握しきれないと思うので何回か見直そうと思う。 qiita.com

Steteの分け方はここに推奨方法の記述があった。ひとまずはこれに習おうと思う。

DomainState、 AppState、 UIState という3つのStateに分割することが提案されています。

www.enigmo.co.jp

あとがき

なんかオーダーリストで引用を挟むと順番がリセットされるけど、対処してません。