なぜモダンフロントエンドを使いたいのか 宣言的な制御編

こんにちは。FEチームリーダーの辻です。

食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。

この記事はその社内ブログで投稿したものです。
エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。

-----------------------

はじめに

食べログでは、 モダンフロントエンド（React）へのリプレースプロジェクトが進行中です。

2014年頃以降、React,Angular,Vue.jsなどのフレームワークやライブラリが流行し、いまも続いています。これらフレームワークやライブラリとその周辺技術をモダンフロントエンドと呼んでいます。
この記事では、そもそもモダンフロントエンドとはなんなのか、なぜ私達はReact(モダンフロントエンド)に乗り換えたいのかを、実装方法に着目して説明します。

３行で

読むのがめんどくさい人はこれだけ抑えて帰ってください。

・モダンフロントエンドとは宣言的な制御を可能にする技術
・宣言的な制御は、従来の命令的な制御に比べて、書き方がシンプルで実装が早くてバグりにくい
・食べログも早くそうなりたくてFEチームが頑張ってるよ＞＜

モダンフロントエンドとは何か

「React,Angular,Vue.js,またはそれらみたいなやつ」なんですが、
これを満たしていればモダンフロントエンドだ！という定義は結構曖昧で、人によって解釈が少し違います。

この記事の中では、モダンフロントエンドとは
『仮想DOMという概念を採用し 宣言的な制御を可能にした技術やフレームワーク』
とします。
仮想DOMはスルーでOK。気になる人はググってね。

宣言的な制御とは

「宣言的な制御」の対比として「命令的な制御」というものがあります。
宣言的な制御とは、状態を定義し今どの状態であるのかを指定する書き方
命令的な制御とは、状態の前後関係の辻褄を合わせていく書き方
です。

ざっくり言うと、Reactが宣言的な制御を、jQueryが命令的な制御をするライブラリです。
食べログはまだ大部分がjQueryで実装されており、命令的制御が多いです。

まだピンと来ないと思います！具体例のが分かりやすいです。
具体的に考えてみましょう

具体例で考える

タブ切り替えUIを作りましょう

トトロのタブにはトトロの画像、ハウルのタブにはハウルの画像、ポニョのタブにはポニョの画像が表示されます。
これを宣言的、命令的に作るとどうなるでしょうか。

■宣言的に作る
・トトロタブが選択された時の表示を作る
・ハウルタブが選択された時の表示を作る
・ポニョタブが選択された時の表示を作る
・クリックしたタブによって、どの表示にするかを指定する
■命令的に作る
・初期表示であるトトロタブの表示を作る
　　・トトロタブからハウルタブへ移動する時の制御を作る
　　・トトロタブの文字色を黒にする
　　・トトロタブのボーダーの上と左右を消して、下のボーダーを描く
　　・ハウルタブの文字色をピンクにする
　　・ハウルタブの下のボーダーを消して、上と左右のボーダーを描く
　　・トトロの画像を消す
　　・ハウルの画像を表示する
・トトロタブからポニョタブへ移動する時の制御
（略）
・ハウルタブからトトロタブへ移動する時の制御
（略）
・ハウルタブからポニョタブへ移動する時の制御
（略）
・ポニョタブからトトロタブへ移動する時の制御
（略）
・ポニョタブからハウルタブへ移動する時の制御
（略）

どうですか？
宣言的な制御とは、状態を定義し今どの状態であるのかを指定する書き方、
命令的な制御とは、状態の前後関係の辻褄を合わせていく書き方です。
この意味がなんとなーく分かってきたのではないでしょうか。

宣言的な制御に比べて、命令的な制御は手数が多いです。
手数が多いとはつまり、実装に時間がかかり、かつテストすべき動作が多いということです。
宣言的な制御では、前後関係の辻褄はモダンフロントエンドライブラリ（React）がよしなにしてくれます。

さらに仕様変更時のことを考えてみましょう。
アリエッティが増えたらどうなるでしょう。
宣言的な方はアリエッティタブが選択された時の表示を作るだけ、
命令的な方はそれぞれのタブから移動してきた時の制御を作る必要があります。大変ですね！ （※実際にはjQueryであっても、宣言的な書き方を混ぜてもう少しマシな書き方になります）

話を整理しておきましょう。

「宣言的」制御

状態を定義する書き方
実装がシンプル（変更容易性の向上）
実装がシンプルだとテストもシンプル（障害発生率の低下）
変更に強い（開発生産性の向上）

「命令的」制御

動作の手順（状態の前後関係）を指定する書き方
手数が多くて実装が大変（開発生産性の低下）
手数が多くて実装が大変だとテストも大変 （障害発生率の上昇）
変更が大変（変更容易性の低下）
細かな挙動まで指定できるので、命令的制御の方が柔軟性はあるものの、
昨今のWebアプリケーションではその柔軟性が複雑さとして現れてしまいます。

まとめ

世間ではモダンフロントエンドが流行ってます。
モダンフロントエンドとは、宣言的な制御を可能にする技術です。
宣言的な制御だとシンプルでバグりにくい実装が可能になります。
早く食べログもモダンフロントエンドになりたい！！！！

-----------------------

さいごに

現在、食べログではフロントエンドに関わるポジションとして以下の２つを募集しています。

気になった方は是非チェックしてみてください！

・フロントエンド統括チームに所属するフロントエンドエンジニア
・フロントエンドをメインにサービス開発を担当していくWEBエンジニア

・難しい課題にチーム一丸となって取り組みたい
・React/TypeScriptでバリバリ開発したい
・レガシーなシステムのリファクタリングがしたい
・アーキテクチャについて探求したい
・食べログというプロダクトに貢献したい
・大規模なシステムの開発に携わりたい
・柔軟に働ける環境で自分のスキルを活かしたい

どれかに当てはまった方は以下のリンクも是非御覧ください！