受託開発におけるReact導入のポイント
受託開発において、新技術を採用するタイミングは悩ましい問題です。特に規模が大きくなるにつれ、お客さまに必然性や納得性を説明することが難しく、使い慣れた技術で開発をしている現場も多いでしょう。
しかし、使いやすいユーザーインターフェースを実装するためには、そろそろ新技術を取り入れないと、お客さまの要求水準を満たせなかったり、フロントエンドエンジニアの労働時間が指数関数的に増えていくと思います。
この記事は、そんな労働時間が指数関数的に増えているフロントエンドエンジニアやそれを見かねたリーダーが、Reactというユーザーインターフェース用のライブラリの導入を進められるように、上司やお客さまを説得するためのポイント（Reactがどんな問題を解決するのか）をまとめました。
jQueryはプログラムを簡単に書くために開発されたライブラリ
今なお多くのウェブサイトがユーザーインターフェースを実装するためにjQueryというライブラリを使用していると思います。jQueryは、JavaScriptというブラウザ上で実行できるプログラムを簡単に書くために開発されました。
というのも、jQueryが生まれた2006年は、JavaScriptがブラウザ上で実行できましたが、ブラウザごとに文法や命令文が違っていて、全てのブラウザで同じ動作をさせるのは職人技でした。その職人技を誰もが使えるようにライブラリにまとめたものが、jQueryの始まりです。
ちなみに、この頃のウェブサイトというと、mixiが印象的です。日記を書いて、みんなにコメントしてもらうというブログやSNSの存在が一般的になりました。
iPhoneが発表されておらず、インターネットといえば、パソコンでmixiを見る。そんな時代に誕生したjQueryは、「簡単に書ける」ということをうりにどんどん使われるようになっていきます。
iPhone登場後、ウェブサイトのアプリケーション化が加速
jQueryの登場から2年経ち、iPhoneが発表されました。心地よく・直感的に操作できるインターフェースがユーザーの心を掴み、一気にモバイル化・アプリ化が進みました。これを受けて、ウェブサイトもアプリのようなサクサク・ヌルヌルした動きを求められるようになました。
この頃から、ボタンをクリックしたら入力フォーム画面に移動して文章を書くというウェブサイトよりも、ボタンをクリックしたら画面内に入力フォームが浮かび上がるような、画面を移動せずに画面の一部が変化するウェブサイトが増えてきました。
このように、ウェブサイトのあり方が変わってくると、JavaScriptに求められるものも「簡単で書ける」ことから「画面の変化に柔軟に対応できる」ことに変わりました。そして、その手法（フレームワーク）が数多く誕生し、消えていきました。
というのも、どの手法も一見jQueryの問題を解決できていそうなものの、何か本質的な課題を抱えたまま決めてにかけていました。
なぜ、画面の一部を変化させるのが難しいのか
「日記を書く」ボタンをクリックすると「日記フォーム」に移動するのは簡単なのに、同じ画面に日記フォームを表示するのがなぜ難しいかは、なかなかイメージしにくいと思います。ただ、ここを理解することが重要なので少し掘り下げます。
ウェブサイトにはDOMという仕組みが使われており、画面を移動する場合は、DOMを1から作り直します。反対に、画面の一部を変更する場合はJavaScriptを使ってDOMを操作します。日記フォームを表示するくらいであれば、なんとかなりますが、日記フォームの中の絵文字ボタンをクリックすると、絵文字パレット表示して、絵文字パレットでは使いたい絵文字を検索できて…など、機能が増えていくごとに爆発的に複雑さが増していきます。
もしも、ボタンをクリックする度にDOMを1から作り直すことができれば、複雑さの大部分を解決することができるのですが、毎回、画面を移動していては時間がかかってiPhoneに慣れたユーザーが離れてしまいます。
そんな中、「時間をかけずに、ボタンをクリックしたタイミングでDOMを1から作り直しことができないか」という仮説から生まれたのがVirtual DOMという考え方です。
Virtual DOMというパラダイムシフトとReact
Virtual DOMとは、名前の通り、仮想のDOMです。DOMと一対一で対応し、画面には表示されずデータとして存在している見えないDOMだと思ってください。
ボタンをクリックした時は、Virtual DOMを1から作り直します。そして、Virtual DOMと対応するDOMを比較して変更があったDOMを更新します。こうすると、DOMを1から作り直すようにウェブサイトを作りながら、実際にはDOMの一部を更新することが出来ます。
このVirtual DOMという考え方をライブラリとして誰でも使えるようにしたものがReactです。
Reactは、こうした背景の中2013年にFacebookが発表して以降、海外のスタートアップで積極的に取りれられ日本でも2014年の冬頃から採用事例が増えてきました。
Reactが必要かを判断できることが重要
今では、開発元のFacebookをはじめ、Instagramやtwitter、airbnbなど人気のあるサービスで採用されているReactですが、jQueryに比べて手間がかかる部分もあるので、メリットを理解したうえで使いどころを見定めることが重要です。
例えば、Reactの国際的なカンファレンスのウェブサイトにもReactは使われておらず、jQueryが使われています。
また先日発表のあったLINE MOBILEの申し込みフォームは、とても見やすく使いやすいですが、こちらでもReactは使われておらず、jQueryが使われています。
長くなりましたが、自分がフロントエンドエンジニアとして、ユーザーインターフェースの実装をすることになるウェブサイトのユーザーや使い方、ストーリーを理解したうえで、Reactを使うべきかどうかを判断できるようになれれば、上司やお客様にも自然と納得してもらえる説明ができると思います。
ReactやVirtual DOMの理解を深めるのにおすすめの記事・スライド
私が、ReactやVirtual DOMを理解するまでによく読んだ記事やスライドを紹介するので、もう少し知識を増やしたい方は参考にしてください。
また、もしもまだ実際に手を動かして作ったことがない方は、まず、公式チュートリアルを一度やってみるといいと思います。
