React のエコシステムはどんどん大きくなっていて、ありとあらゆるツールが React を中心に構築されている気さえする。とはいえ、そのツールの設定は前提知識が必要で、例えば Webapck や各種 Lint ツールをうまく使うためには、少し経験が必要だし、細々したツールの組み合わせでできている React の開発環境は、一見するとオーバースペックのようにも感じる。
それでも、フロントエンドを推し進めているのが JavaScript で、そのエコシステムを支えているのが Node.js で、一番 yarn add されているライブラリが React.js だとしたら、ブラウザのこちら側で汗をかく自分にとって、一番うまくフィットするはずだ。もっと React を使っていたい。
けど、React 全てのウェブ制作にとって最適だとは言えない。React は一般的にいって SPA = シングルページアプリケーションと呼ばれるタイプのアプリケーションを作ることに最適化されている。つまり、ページをリロードしたり遷移させたりせずに、データを Ajax 通信によって取得して、そのデータをもとにブラウザの中で JavaScript によってレンダリングする。
一番よく知られた SPA はおそらく Google Map だ。昔の地図アプリケーションは、見たい場所を移動させるたびに、リロードをしていたけれど、今はそうじゃない。環七通りをもっと先に進んで、そうだ、ここを曲がったところに住んでいたんだ。あの公園を見たい。地図の端の、さらに奥の、記憶の片隅にあるあの場所を見たい。そんなときも SPA のおかげで、ページは遷移しなくなった。とにかくそういうことに最近はなっている。それが SPA だ。
const mySweetMemory = ({name}) => <h2>someone call my {name} as...</h2>
でも、全てのエンジニアが Google Map を作っているわけじゃない。ぼくもそうだ。 "普通のサイト"、 つまり会社概要がまず表示されて、サイトマップリンクがあって、問い合わせ先があって、製品写真がスライドで動いている。HTML と CSS と、少しの JavaScript が必要だ。ほんとに少しの JavaScript でいい。
それなのに、こういう仕事の時に React を使うという選択肢は、ちょっと考えられないだろうと思う。どうしたんだって言われるかもしれない。HTML と CSS だけで、ブラウザが特権的に処理してくれる HTML と CSS だけで、仕事が終わるっていうのに、なぜ JavaScript をふんだんに書かないといけないんだ。JavaScript で動的に変更する要素なんてないのに。カルーセルや、ナビゲーションメニューは、jQuery のプラグインで綺麗にやれる。
ごもっとも。
それで "普通" の開発環境を作ることにした。
yarn init -y
Sass は、きっとみんなも使いたいだろう。
yarn add node-sass -D
ES2015+ で書けるようにしたっていいはずだ。ES5 をのけ者にするわけじゃない。
一緒にやれる。
yarn add babelif...
でも…待てよ。
モジュールは Browserify でまとめたほうがいいのか、それとも Webpack のほうがいいのか。Webpack の方がトータルのパフォーマンスはよくなるかもしれない。でも設定で苦労するかもしれない。Webpack は、みんながみんな使い慣れているとはまだ言えない。設定を楽にするなら、Parcel もいいとは聞いたぞ。
ここは一旦保留しよう…
テンプレートエンジンは必要だろう。ヘッダーやグローバルナビゲーションなど、共通パーツをまとめるには、テンプレートエンジンが必要だ。React ならここはコンポーネントを読み込むだけでいいけれど、テンプレートエンジンを使うなら、その設定も必要だ。Gulp を入れよう。
yarn add gulp or...
でも待てよ、Webpack を使うとしたら、そっちにやらせた方がいいのか？いや、開発サーバーは browser-sync の方を使うことにして、 Gulp で処理した方がシンプルだ。きっとそうだ。Webpac はバンドルに専念した方がいい。
けれどこのサンプルは全部 Webpack がやっているのか。ローダーも必要？...
どこまでがみんなが使える技術で、どこからがやりすぎなのかは判断するのが難しい。