いまさらですが、React + Redux + ant-design ではじめてみました。
普段は、フロントエンドはAngularを使って開発することが多いのですが、せっかくの年末の長期休みに普段触らないものを触ろうと思い、まだ触ったことがなかったReact, Redux, そして、最近Alibabaのant-designが良いらしいという情報を聞いたので試してみて、所感をまとめてみました。
現状での 完成版のコード になります。
(Google Map APIと、楽天トラベルAPIを使って、ロケーション情報の近くのホテルを探す検索WEBページ)
Reactを触ってみようと思った理由
-
Angular 2/4が狭量で遅すぎる理由
- Googleの開発者達が離れたこと（それぞれ独自のフレームワーク、VueとAureliaを開発）
- Angularは冗長である。
- 「Angularは大型チームに最適」という噂話。
などによるフレームワークに対する個人的な信頼性の低下と、
React Nativeの存在。一度学習すればプラットフォームを選ばずに開発可能というFacebookが打ち出した哲学に惹かれていたこともあり、Reactを年末に触ろうと。(モバイル開発をしていないと、React Native使うのはいきなり辛いと思うよと各方面から聞いたりもするが。。)
ともあれ、以上の理由でReact + Reduxを学ぼうと思った背景である。 (正直、vue.jsでもよかった。)
宗教戦争は面倒なので、すべきだみたいなことは書かないようにしたい。
Reactについて
- JavaScriptで書かれたライブラリ
- MVCで言うところのViewのみを担当
- javascriptの中で、「HTMLタグ(っぽいもの)」なる書き方が可能
以下の記事が大変参考になりました。
React Component Lifecycle
React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが可能。
React router
- ルーティングをするためのライブラリ
- 普通のSPA書くなら不要だと思うが、個人的には、ブラウザの戻るボタンが使えたり、特定のURLを打ち込むことで特定のページに直接アクセスできるようになるためルーティングのライブラリも使ってみた。
どの部分に表示させたいかなどSwitchコンポーネントを当てるだけで、対象範囲に表示させたり何かと便利そう。試してはないが、AngularのGuardみたいなものがあればそれも後ほど試してみたい。
Fluxついて
- 考え方の名前
- Viewから、state(状態)のオブジェクトを切り離し、Storeで管理。また、イベントに当たる部分は、Actionを発行していき、Storeを更新することでstate(状態)を更新。Store自体をViewがサブスクライブして自身を更新していく。要素を分割するため、大規模開発に向いた考え方。
Reduxについて
- ライブラリ
- Storeを複数作るのではなく、一つのStoreに全てを管理させる
- stateの上書きは、必ずActionを発行してから更新すること
- 変更は純粋関数を利用すること。 Reducerと呼ばれるものが、純粋関数にあたる
ActionとReducerが導入されており、明示的かつ宣言型のデータ管理モデルを通じて、状態管理が簡単になることで、アプリケーションとのスケーラビリティも向上につながると考えられている。
以下の記事が大変参考になりました。
- Redux入門【ダイジェスト版】10分で理解するReduxの基礎
- あなたはReduxを必要としないかもしれない – You Might Not Need Redux by Dan Abramov
ant-designについて
- Alibaba社から出ているUIライブラリ。
何もなければ、Material-UIを使おうと思ったが、Alibabaの勢いを最近感じるため利用。
開発者もほとんど中国の方が多そう。ドキュメントも中国語が多く、日本語はほぼなかった。
自分が実装した部分は、Ant-designのほんの一部（メニュー、検索窓、テーブル、ボタン）
自分がつくったサイト自体は、まあいけていないが、要所要所のコンポーネントは、使い勝手が良い印象。
利用したその他ツール
-
- Google Mapを利用し、入力した位置の経度、緯度を取得するために利用。APIキーを利用しなくてもある程度は利用可能。
-
- ローケション情報から、周辺の宿泊施設情報取得のため利用。APIキーが必要。
-
- npm と同一のパッケージを高速にインストール可能なパッケージマネージャ
-
- Action, State, Actionの前後のDiffの表示, Testのサンプルコードの生成などを行う開発支援ツール
開発時でのエラー
Each child in an array or iterator should have a unique "key" prop.
配列やイテレータには、キーをつけろと、Reactの仕組み上のエラー。 render()が走る度に、仮想DOMを構築（前の仮想DOMの状態を記憶しておき、前回のとの差分のみを反映させる）する。
怒られていたのは、テーブル上で、IDが振られていないと要素を消去した際などに、要素を詰める動きが発生し余計な処理がかかるため。
do not use setstate in componentdidmount
componentdidmount の後に、setStateを行うとrenderが2回呼ばれてしまう。 また、propertyやlayoutを壊す可能性があると。 rendorが非同期で走っていて、衝突する可能性があると。
仮想DOM周りでのエラーで怒られることが多かった印象。
所感
実際に書いていく中で、AngularでのComponent構文よりも、Reactはかなり短く書くことが可能なことがわかった。（JSXなどの書き方に、最初は抵抗があったが、なれるとコンポーネントを組み合わせていくと考えると便利そう。）
特に、State(状態)の扱いや、Life cycleのコンポーネントは、便利!!
新しいことを学ぶのはやっぱり楽しい！！
間違っている内容などがあれば、お手柔らかに教えていただけると幸いです m(_ _)m
参考資料
-
最短で学ぶReactとReduxの基礎から実践まで
- 以前、友人に「Udemyのブラックフライデーで、講座がめちゃくちゃ安くなっているぞ！」と言われ勢いで買ってしまって放置だったのですが、年末に思い出し今回のReact + Reduxを触るきっかけになりました。内容もわかりやすく実際にコードを書いていくため理解しやすかった。
