とある会議でReactお兄さんとフロントエンド宗教戦争(大袈裟)をしてしまいました。

会議の内容

• お兄さんはPoC向けに簡単にフロントエンドのテンプレートを使える仕組みを作ろうとしている
• 出来上がったテンプレートはReactベースで作られている
• これをPoCでぜひ使ってほしいがいかがだろうか

PoCとは

POC 【 Proof Of Concept 】 概念実証
http://e-words.jp/w/POC.html
POCとは、新しい概念や理論、原理などが実現可能であることを示すための簡易な試行。一通り全体を作り上げる試作(プロトタイプ)の前段階で、要となる新しいアイデアなどの実現可能性のみを示すために行われる、不完全あるいは部分的なデモンストレーションなどを意味する。

簡単にいうとProttとかSketchのようなペーパープロトと比べて実際に操作でき、でも本開発するほどの力の入れ方ではないというなんとも微妙なプロトを作ります。

Why React?

フロントエンド界の動向は少しだけですがおさえているつもりです。なので私もReactワカラナイというわけではないです。
確かにReactは導入実績も多いし、コミュニティや開発自体も非常に活発、わからないことはFAQサイトとかにもたくさん載っているでしょう。

でも話を聞いて思ったのが「どうしてReactなんだろうか」という点でした。
さらに作られたテンプレートを見て、これはどうなんだろうか？と思いました。

package.jsonを見ると、Reactに始まりflux、babelにwebpackにmaterial-uiとなんともフル装備な感じでした。

普通にReactで開発する分には大変開発効率を上げてくれる良いヤツらだと思うのですが、
改めて最初に戻ると、 これほど重装備(主観)なものをPoCのテンプレートとして使うことを考えられた構成なのか？ ということです。

実際に使う人って誰？

このテンプレを実際に使うのはReactに詳しい人だけではないという点が非常に重要です。ReactどころかjQueryまでしか使ったことがないという人もいるでしょう。

そんな人に拡張子jsxのファイルを渡して、JavaScriptかと思いきやHTMLもあるという構造を見たらどう思うでしょうか。
さらにはコンポーネントをビルドするためにwebpackを使っており、もちろんテンプレートの中にはさも当然のように webpack.config.js が存在します。断言します。必ずこのセリフを言う人が現れます。 これはなんだ と。

PoCを開発する人は、ただ 部分的なデモンストレーション が作れるのであればそれで良いのですよ。

みんなが使っているライブラリだったから

彼はそう説明しました。Reactはほぼデファクトであり、三大フロントエンドの一つであり、Reactは世界中で使われていると。確かに正しいです。

彼の中では「みんな」とは世界中の人のことであり、一方私の考える「みんな」とは実際にPoCでこのテンプレを使う人のことを指していました。ここが私があれ？と思った部分だったということです。

では何ならOKなのか

ならjQueryなら良いのか？という話ではありません。大事なのは「何をテンプレートとして提供するか」です。あまりにも抽象的すぎるとほぼテンプレとしての役割は失われ、しかし目的別のように固めすぎると自由度が下がり使えないテンプレ扱いされてしまいます。

私がテンプレートを作るとするならば、それはページと画面遷移を提供するテンプレート、そしてUIパーツの3つです。
例えばMaster->Detail形式。例えばハンバーガー方式、例えばタブ方式といった「各ページ」と、それらをつなぐ「ナビゲーション」をテンプレートとして提供する形です。
その各ページに目的別でパーツ化されたUIを当てはめていくという感じです。

PoCではこれまでにないアイデアが本当にいいものなのかを検証するものなので、基本的には何かのサービスとUIが同じになることはありません。しかし、とはいってもナビゲーションやダイアログといったある程度これはお約束というものはいくつか存在します。それらをテンプレートに任せるというのが私の考え方です。

そういった使い方としてReactというのであれば納得もいきますし。

分かり手になりたい

確かに技術者としてReactとか使いたいのは非常にわかる。もうjQueryにdom操作するロジック書きたくないよね。わかる。es3つらいよね。わかる。というかフロント界がカオスすぎんだよ。

なのでどうすればもっとみんなが幸せになれるのか。ここはまだ詰め切れてないので私も考えていきたいところです。

ちなみに私はAngular派です。