はじめに
前回の記事[1]でデプロイまでできたのですが、いまいち何をしているのか理解できませんでした。
そもそもReactは何をしているのか、どのような流れでデプロイするのかをまとめたいと思います。
Reactは何をしているのか
Reactとはjavascriptのライブラリという風に書かれていることが多いと思います。
ただ、C言語の#includeライブラリ名.hみたいにインクルードすればいいのかいうと全く違います。
個人的にはダラダラと書いていたものをコンポーネントという単位でまとめて見やすくするためのUIライブラリだと思っています。この表現は正確ではないと多くの人に言われそうですが、ライブラリだと思ってると認識のずれが生じます。たぶんライブラリとかフレームワークの定義が統一されていないからこういうことになるんでしょう。
そもそもReactは単体では動きません。
大きく分けて4つのものに構成されています[2]。
-
javascript
当然javascriptの知識は知らないとだめです。nodejsとかの区別は一旦置いといていいです。 -
JSX
これがReactの中枢を担っている気がします。
JSXはjavascriptの拡張言語です。
一番の違いはDOMを値として扱えることです。
定数などに代入したり、DOMそのものを返り値とすることが出来ます。
そこさえ押さえておけば仕組みは分かります。 -
Babel
JSXはそうすると楽だよねって勝手に作った拡張言語です。
サーバーにアップして使う際にはjavascriptでないと当然動きません。
この拡張言語をjavascriptに変換するのがBabelです。
またjavascriptの標準的な書き方がES5からES6に移行しました。
この2つは割と大きな違いがあり、かつすべてのブラウザがES6に対応しているわけではありません。
下位互換性を持たせるためにすべてのjavascriptをES5にするべきです。
このES5への変換もBabelが担っています。
イメージとしては
JSX→javascript→javascript(ES5)
みたいな流れでしょうか。
逐次的に変換しているのか、まとめて変換しているのかは分かりませんがこんな理解でいいでしょう。
要するにJSXのjavascriptへの変換、javascript(ES5)への変換をしてくれるツールです。 -
webpack
[2]より引用
webpackは、JavaScriptを依存関係を考慮してひとまとめにしてくれるツール
要するに散らかってるjavascriptをひとまとめにしてくれるというものです。
まとめたjavascriptをBabelに通します。
この4つによるプログラム生成の仕組みを前提として動いているのがReactです。
Reactを使うということはこれらの仕組みを使うということと同義です。
ライブラリとしてのReactはこれらの仕組みの上に成り立ったものです。
webエンジニアが直接触るのはJSXだけですが、ここら辺は理解しておきましょう。
デプロイまでの流れ
結局JSXプログラムを書いたらどうすればいいのでしょうか。
HTML/CSS/javascriptだったらサーバーに置いたらOKです。
Cなどのコンパイル言語ならコンパイルして実行すればいいです。
pythonなどのスクリプト言語なら書いてすぐ実行できます。
しかしJSXではjavascriptをまとめて変換しないといけません。
頭ではわかってもコマンド上はどうなるのでしょうか。
そのための環境構築コマンドとしてcreate-react-appコマンドがあります。
このコマンドによってwebpack、babel、reactライブラリなどがプロジェクトディレクトリ配下のnodemodulesディレクトリにダウンロードされます。
これらをNode.jsのアプリケーションとして動かす場合は
yarn start
とすればローカルで立ち上げることが出来ます[3]。
しかし、webサーバーにアップロードする場合は変換しなければなりません。
この変換の作業を一般的にはビルドと呼ばれています。
makefileとかでもビルドという言葉使っていた気がします。
ここでのビルドはソースコードを使える状態に変換するようなニュアンスでしょう。
コンパイルと言い換えてもあまり差し支えないように感じます。
もちろんCのコンパイルのようにコードをバイナリに変換してるわけではありません。
しかし、webサーバーで使える形式に変えているのです。
コマンド上では
yarn build
などでビルド出来ますが、実際にはjsonファイルのスクリプトが実行されています。
このファイルをwebサーバー上におけばデプロイ完了というわけです。
僕の場合は
yarn deploy
でビルドとデプロイ同時にやってくれます。
あとこのサイト[4]が割と流れを丁寧に説明してくれているので読んでおくことをお勧めします。
おわりに
React複雑すぎる。
こんなの一発で分かる訳ないでしょうと思っちゃいますね。
JSXの考え自体は好きなんですが、この仕組み自体をもう少し抽象化して欲しいです。
参考文献
[1]:GitHub Pages で最小構成のreactのhelloworldをデプロイしてみた
[2]:Reactをなんとなく理解できるようになるまでのステップ
[3]:Reactの基本的な仕組みを理解しよう (1/4)
[4]:reactの基本がnode.jsだと聞いたのですがどういうことですか？書き方が同じということですか？まだ全くの初心者なのでやさしく教えていただけると助かります。