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 がやっているのか。ローダーも必要？...

どこまでがみんなが使える技術で、どこからがやりすぎなのかは判断するのが難しい。