はじめに
こんばんは。
今日はお世話になっている会社で
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
という本を、社内のデザイナーさんと読み始めたので、記録として残しておきます。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
- 作者: 穴井宏幸,石井直矢,柴田和祈,三宮肇
- 出版社/メーカー: 翔泳社
- 発売日: 2018/02/19
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
ReactNativeでアプリを使うための前段として、Reactをしっかりやってみたなと思い、企画しました。
今日は3時間程度しかやれてないので、ぶっちゃけReact本格的に触るところまで行ってません。
やってみた
目次
今回読み進むことが出来たのは以下。
React・Reduxとは
create-react-appで開発を始めよう
JSX
React・Reduxとは
React
見た目(HTML)と機能(JS)を一塊にした コンポーネント
をReactでは容易に作成することが出来る。
この コンポーネント
を増やしたり組み合わせたりしながらページを作っていく。
この辺はなんか、Vueもおんなじようなこといってたな。
Reactの特徴としては以下
・VirtualDOM
・JSX
VirtualDOM(仮想DOM)
React内で仮想のDOMを管理している感じ。
JqueryとかでガリガリDOM操作を行うと、毎回レンダーツリーの更新がされるらしく、その後始まるレイアウト・ペイント処理がさらに行われる。これがブラウザによってパフォーマンス低下の原因にあるとのこと。
仮想DOMは、実際のDOMのレンダリングフローとは切り離されているところにあるので、仮想DOMで諸々変化を行って、その変化の差分を算出して、その差分だけ実際DOMを変化させるとのこと。 (この辺イメージつかめてません)
多分、過程ではなく結果だけを実際のDOMに伝えるから最小限の変化だけでいいという意味なのかな・・・?
JSX
Javascriptを拡張した言語。
XMLライクに書けていけるってのが強みのようです。
だいぶ前にサンプルでやった、ReactNativeでも使われてて、うーんと慣れなかった記憶がある。
classがclassNameだったり、forがhtmlForだったりと、そもそもJSコードの中にバリバリHTML的な記述を書いてくことに対して、うん?と思ってしまう。
だけど、Reactを書くにあたって、JSXを覚えたほうが記述しやすいので覚えたほうがいい。
サンプルコードもJSXで書かれてるしね。大体。
Flux
この辺説明できるほど、理解できてないのが正直なところ。。。
ただ、ReactやるならFlux適用しようね!ってはなしではなく、Fluxはこういう作り方が出来るよっっていうデザインパターンという位置づけだということ。
一応、流れを本から引用すると
ユーザーの入力からActionを作成し、そのActionをdispatchすることでStoreにデータを保存し、Viewに反映させるいった、流れを取ります。データが一方向のフローで流れるため、複雑なアプリケーションになっても不整合が置きづらい仕組みになっています。
以前の記事でまとめてるけど、振り返ってもわからん
とりあえず読み進める。
Fluxは以下の4人の登場人物が存在する。
Action
Viewで起きたイベントや、ajax通信のリクエストなど「アプリケーションの状態の変化内容」をDispatcherを伝える役割 かな?
Dispatcher
ActionをStoreに受け渡す役割(MVCのコントローラ的な?)
Store
Dispatcherから渡されたActionを元に、アプリケーションの状態を更新させる
ビジネスロジック各場所ともいえるのかな?
View
Storeの更新にともなって、表示側を更新する?
Redux
Fluxの派生デザインパターンという立ち位置
名前的にReactと使うのがマストなんでしょ?って感じだけど違うみたい。
そもそもFlux自体使わなくてもいいって話だから、これもそういうこと。
じゃあなんでそんな紛らわしい名前つけたんだろう・・・
後読み方はどう読むの?れでゅっくす?
Redux3原則
Reduxの思想として大事な3つのお約束があるみたい。
- Single source of truth
- State in read-only
- Changes are made with pure functions
正直あんまわかんなかった。
Reduxには、Fluxの登場人物のほかにもう一人の登場人物が存在する。
Reducer
状態を変化させるための関数
DispatcherにActionが渡される前に動くのかな?
それとも「状態を変化させるため」の関数だから、Storeに渡される前なのかな?
この辺は謎。読み進めて、コード書いてけば少しは分かるかな。。。?
create-react-appで開発を始めよう
node.jsのインストールとか、最初のHello Worldなのでココはサラッと読み飛ばす
JSX
JSXでの記述方法などの説明。
メソッド埋め込めるよ!とか、変数埋め込めるよ!とか基本的なところ、ココもそこまで迷わなそう。
すこしだけ戸惑ったのは、モジュールバンドラーのwebpackの実行。
webpackとbabelのインストールと実行自体は、少し前に触ったのである程度は分かるけど、webpackの実行でwarningが出た
./node_modules/.bin/webpack --config webpack.config.js WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ f
本では特に書かれてなかったんですが、この本で紹介されているwebpackのバージョンは 3.10.0
で今落としてきたバージョンは
$ ./node_modules/.bin/webpack --version 4.8.3
という感じでメジャーバージョンがあがってるようで、このエラーが出てるみたい。
英語はちんぷんかんぷんだけど、なんとなく
「modeをdevelopmentかproductionで指定して実行しろYO」
って言ってる模様。
実行してみる。
$ ./node_modules/.bin/webpack --config webpack.config.js --mode production Hash: 2328f0123ddc3abb5e49 Version: webpack 4.8.3 Time: 2856ms Built at: 2018/05/18 4:04:53 Asset Size Chunks Chunk Names output.js 106 KiB 0 [emitted] main Entrypoint main = output.js [6] ./entry.js + 1 modules 323 bytes {0} [built] | ./entry.js 174 bytes [built] | ./Hello.js 139 bytes [built] + 14 hidden modules
WARNING消えた!よかったー。
終わりに
前回はVueのチュートリアル触って、今回はReactといろいろ触ってるのですが、何がしっくり来るかもわかってないし、そもそも取捨選択できるほど、それぞれをしっかりと知っているわけではないので、とりあえずのフェーズとして触りまくるというのはいいかもしれないなと思ってます。
自分の進め方としては、
一緒に勉強するのはReact
一人で勉強するのはVue
という感じで考えてます。
React終わったらAngularもやりたいな。とりあえず読み進めてみます。おやすみ。