もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

React入門を読み始めた

はじめに

こんばんは。

今日はお世話になっている会社で

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

という本を、社内のデザイナーさんと読み始めたので、記録として残しておきます。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

ReactNativeでアプリを使うための前段として、Reactをしっかりやってみたなと思い、企画しました。

今日は3時間程度しかやれてないので、ぶっちゃけReact本格的に触るところまで行ってません。

やってみた

目次

今回読み進むことが出来たのは以下。

  1. React・Reduxとは

  2. create-react-appで開発を始めよう

  3. 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もやりたいな。とりあえず読み進めてみます。おやすみ。