最近のWebアプリの開発について情報収集してみて、Reactが流行っている、に辿り着くまでの結果をまとめた。
それぞれの技術はまだチュートリアルを触った程度なので、若干誤解があるかもしれない。
モジュール管理、ビルドツール、CommonJS、ES2015
学習コストが高い割に、細かい技術は長続きしなさそう。
npmとwebpackを使えば、一番環境構築にコストをかけずに済みそうだ。
javascriptの書き方はES2015に準拠するようにしておくと、RubyやPythonのようなLLの使用感に近くなっているように思えるので少しハードルは下がるか。
このあたりのことがまとまっている記事としては:
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～
かなり新し目の記事で、現在進行形で続きが書かれている。
しかし、ES2015だとしても、サーバーサイドのブラウザと関係ないところはNode.jsじゃなくて、そもそも他の言語のほうが向いているような気がする。
参考
1年前くらいの記事。かなり混沌としている。
上記に落ち着くまでの歴史を見ておくには良さそう。
- Front-end with Node.js Tools
- npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう
- JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)
- JavaScriptでのモジュールロード方式とパッケージ管理についての勉強メモ
ReactとWebアプリ
なんとか.jsのフレームワークが乱立していたが、今はReactが流行っているらしい。
Webアプリを簡単に言うと、ブラウザ環境で動くクライアントアプリをサーバから送りつけて、サーバと通信させるものということになる。そのクライアントアプリの目的は、画面を通してWebの先にあるデータをいい感じに操作すること。
いまブラウザ環境で動く言語は(基本的には)javascriptだけで、画面に出すにはDOM APIを通してHTMLな画面を作る必要がある。
画面更新の難しさは、サーバから都度HTMLを送りつければ画面更新は簡単だがインタラクティブではない。逆に頑張って変えたい要素だけ書き換えると、フレームワークが難しくなっていく。
Reactでは仮想DOMという、DOMの反映前のjavascriptから扱いやすい状態を作り、ブラウザ上で更新差分を計算することで、簡単な更新とインタラクティブな操作を実現している。
- なぜ仮想DOMという概念が俺達の魂を震えさせるのか
- 仮想DOMで魂が震えてから一年、仮想DOMとFluxの今
- 10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。
HTMLやCSSがコンポーネントとして隠蔽できている点も使いやすい。
例えば：
ところで、Reactが流行っている理由を考えると、ブラウザという環境がかなり限界に近いのではないかという気がしてくる。
ブラウザのDOMを介した画面更新も、その生成元となるHTMLやCSSも隠蔽して、使いやすくしている。
そのときに、フロントエンドのソースコードがトランスパイルしないと動かないなら、もうHTMLやjavascriptが生成される必要性はないんじゃないだろうか。
例えば、適当なバイナリを送りつけて、それがブラウザで動けば上に書いたようなWebアプリの目的は果たせるはず。（WebAssemblyはそういう流れで出てきたのかもしれないけど、それはまた今度調べる）
この辺をちゃんと理解するには、ブラウザのこともちょっとは詳しくなったほうがいいか。