この記事を書くに至ったきっかけ
新システムを構築するにあたり、候補の一つであるReactにまずは慣れてみようと思い、自身でアプリケーションを構築しました。
かなりの試行錯誤の連続の結果、ある程度の形が出来てきたので、これまでの経緯を纏めておきたいと思います。
Table Of Contents
- Reactのアーキテクトを考える道のり - その1 (最小の構成で作る) ←ここ
- Reactのアーキテクトを考える道のり - その2(Fluxとの出会い)
- Reactのアーキテクトを考える道のり - その3(非同期通信)
- Reactのアーキテクトを考える道のり - その4(Atomic Designを知る)
- Reactのアーキテクトを考える道のり - その5(テストを書く)
これらを踏まえたボイラーテンプレート
Githubリポジトリ
[簡単な説明] (https://qiita.com/motuo/items/3bd44058c79bbcba8e6b)
現時点では、下記の構成を着地点としています。
各ライブラリを使うに至った経緯などは、後述(または別記事に記載)します。
| Name | Note | ドキュメントURL |
|---|---|---|
| React | これがなければ始まらない。 | https://reactjs.org/ |
| Typescript | 所謂、AltJS。解説は巷に溢れているが、静的な型付をすることが特徴。 | https://www.typescriptlang.org/ |
| material-ui | 簡単にそれなりの画面を作る為のコンポーネント群を提供してくれる。 | https://material-ui.com/ |
| react-redux | 非常にわかりやすい記事があるので添付 たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 |
https://redux.js.org/ https://react-redux.js.org/ |
| typescript-fsa(-reducers) | TypescriptでReduxを使うときのボイラーテンプレートです。これにより、記述を簡略化出来ます。 |
https://github.com/aikoven/typescript-fsa https://github.com/dphilipson/typescript-fsa-reducers |
| redux-saga | React Redux構成でAPI通信を行う為のMiddlewareです。 | https://redux-saga.js.org/ |
| react-router | SPAで画面遷移をさせる為のデファクトスタンダードライブラリ。これを使うことで、ブラウザの「戻る」ボタンなども使える様になる。 | https://reacttraining.com/react-router/ |
| Storybook | 作成したコンポーネントを単体で見られる様にしてくれるツール。 (このツール自体はReactには限らない。vue.jsなどでも利用可能。) |
https://storybook.js.org/ |
コンポーネントのディレクトリ構成にはAtomic Designを採用。
上記の構成に至った経緯
まずは、Reactを動かしてみるところから。
チュートリアルをするにも、手元で動く環境がなければ始まりません。
何はともあれ、create-react-appをインストールしましょう。
簡単にReactを始めることが出来ます。
# 自分自身のローカルにcreate-react-appをインストール
npm install -g create-react-app
# プロジェクトを`Typescript`で作成。
create-react-app sampleProject --typescript
本当に何てことことなかったです。
ここからmaterial-uiも取り入れつつ、チュートリアルをこなし、ちょっとしたコンポーネントを作ってみたりしました。
ここで得た感想
React
pros
- Webページの要素を小さく部品化して、再利用可能とするコンポーネント指向が、プログラマーとして非常に馴染む
- 冗長になりがちな記述をまとめることで、出来るだけDryな状態を保ちながら、統一したWebページを作れる
-
Typescript JSX記法も特に違和感なく書けそう
cons
- コンポーネントが増えてきたときの管理が大変そう。(似ているコンポーネント作っちゃいそう。)
- stateとpropsが便利だが、viewの中にビジネスロジックを入れ込んで複雑にしてしまいそう
Typescript
pros
-
Visual Studio Codeとの相性がたまらなく良い！インテリセンスが効くのでストレスなくプログラムできる - 型チェックが効いているから、子コンポーネントへのプロパティ渡し漏れや誤った型の変数を渡さずにすむ。(つまらないミスをしなくなる)
-
Nullやundefinedの可能性がある場合もコンパイルエラーになるので、Guardするなで、事前に対処できる。
cons
- 多くのサンプルが
jsで書かれているので、そのままでは動かないことが多い。(サンプルの絶対数も少ない) - 導入するライブラリによっては、typescriptの型定義ファイルがない。その場合、自作しなければいけない。(メジャーなものは、だいたいある)
Material UI
pros
- Sampleも豊富に提供されているので、特に迷うことなく実装できる。
- それなりのページがサクサクできる。
cons
- 割とありがちなデザインに落ち着きがち
１ページだけの簡単なページを作ってみると、この様な知見を得ることができました。
ただ、機能を追加するに従って、stateやpropertyに管理に辛みが。。。
次回は、この辛みを緩和してくれる、fluxやreduxについて書いていきたいと思います。