React.jsを使ったwebアプリケーション開発について

みなさんは「React.js」をご存知でしょうか。開発業務に携わっている方であれば知っている方も多いキーワードだと思います。

JavaScriptのライブラリの1つで近年知名度が大きく上がっています。アメリカのIT業界の中でもここ数年でどんどん知名度を上げている企業といえばAirbnbやNetflixなどがあります。こういった企業は、このReact.jsを使って自社のサービスを作っています。 IT技術の開発者はアメリカ/日本問わずReact.jsに対して強い興味を持っている人が多く、今後さらに人気を得ていく技術です。

今回はこのReact.jsについて、「そもそも何をするための技術なのか」という基本的なところから、「React.jsが良く利用されているWebアプリケーションの開発」に焦点を当てて話をしていきたいと思います。 

React.jsとは 

React.jsは、後ろに.jsの記載がある通りにJavaScriptのライブラリです。JavaSciptはプログラミング言語の一種で、Webアプリケーションを開発する時によく使われます。しかし、JavaScriptでWebアプリケーションの開発を行う場合には、Webブラウザによる表示や動作の違いに注意しておく必要があります。Webブラウザには、Internet ExploreやGoogle Chromeなどいくつか種類がありますが、同じようにJavaScriptでソースコードを作ったとしても、表示のされ方や動作に微妙な違いが出てきます。その違いを吸収して、1つのソースコードでどのWebブラウザでも正常に動作するように機能を加えてくれるのがJavaScriptライブラリです。 

このJavaScriptライブラリにもたくさんの種類がありますが、React.jsはその中の1つでFacebookが開発したライブラリになります。Webアプリケーションでは、提供している機能はもちろん重要ですが、ユーザが操作する箇所（UI：User Interface）のデザインや動作も重要になります。React.jsを使用して開発することで、操作しやすく軽快に動作するアプリケーションの開発が可能になります。 

React.jsによるWebアプリケーション開発 

見やすくて、操作がしやすいWebアプリーションを具体的に見てみると、例えばTwitterでは自分がつぶやいた内容は下記の画面のようになっています。 

つぶやきを見て何かリアクションをしたいと思った時には、下部に設置されているボタンを押すだけですぐに下記の行動ができます。 

リプライ・・・投稿者に返信する 
リツイート・・・内容を自分のフォロワーに拡散する 
いいね・・・また見たい内容として保存する 
DM・・・直接やりとりする画面で交流する 

もしこのボタンが無かった場合、相手に共感を伝えにくいですよね。この共感や意見を伝えるための機能がボタンとして実装されていなかったらTwitterの人気は今より弱かったと思います。 

・どういった機能を提供しているか 
・直感的に操作できるか 

この2つの要素はWebアプリケーションを作る上で重要になります。JavaScriptはWebアプリケーション開発をする際に最もよく使われる言語として知られていますが、React.jsはこのWebアプリケーションで開発者を強力に手助けしてくれます。これはReact.jsが持っている3つの特徴があるためです。 

React.jsの特徴３つ

・1つ目がデータが変更された際に動的にwebブラウザに表示されている画面が変化してくれる点です。データがブラウザ上で何か新しくデータを入力したり、選択項目の中から１つを選択したりといったユーザの操作に応じて表示される内容が変化します。この特徴があることによって、シンプルで見やすいコードを書くことができます。 

・2つ目がwebブラウザ上に表示される画面の一部を簡単なコードで表示できるように、あらかじめ機能が準備されている点です。ボタンやアイコンなどのブラウザに表示される画面上に配置する機能を0から作らなくても簡単に実装することができます。 

・そして３つ目が最も大きな特徴になりますが、配置したタイムラインなどのコンテンツがそれぞれ別々の要素として独立していることです。コンテンツが独立していることで、続けてお話するSPAで動作することができるWebアプリケーションを実現することができます。 

Webページをリアルタイムに更新させながら表示する方法として、SNSなどのサービスにも使われているのがシングルページアプリケーション(SPA:Single Page Application)という方式です。本来であればページの一部が更新されると、表示されている内容がすべて更新し直されていました。これではWebページの動作が重くなってしまいます。それがSPAを使うことで、同じページ内で部分的に情報が更新することが可能になります。 

上記の図では青色の部分を更新した際に、どこまで更新するかの違いを示しています。従来の方式で作られたWebページであれば、どこかが更新される度にページ全体を一度更新する必要がりました。しかし、SPAではそれぞれのパーツが独立しているので一部分だけの更新だけで済ませることができます。このようにリアルタイムに情報が更新されていても、それが反映されるのはページ内の一部だけなので情報のリアルタイム性を保ちながら軽快な動作にすることができます。 

React.jsが使われているサービス例 

それでは、実際にReact.jsで開発されたWebアプリケーションを見てみましょう。やはりSNSのサービス開発によく使われているものなので、具体例としてもSNSを上げています。 

具体例①：Facebook 
当然ではありますが、開発元であるFacebookは自社のサービスの開発にReact.jsを使用しています。SNSなどのリアルタイムな情報更新と共有が発生するサービスでは、Web画面上に表示される内容が独立して更新されます。それでは実際に画面でどのように情報が更新されているかを確認してみましょう。 

上記の画面を確認していただくと、記事の下部に「いいね！」のボタンがあると思います。これを押して自分の好きな顔マークを選択すると、表示されているページの中でこのボタンの部分だけはリアルタイムに更新されます。表示が変わる箇所はここだけで他の部分は表示が変わりません。「いいね！」ボタンだけが独立して更新されていることがわかります。 

具体例②：Twitter 
Twitterを使ったことがある経験がある方であればピンと来るかと思いますが、Twitterで重要なのはタイムライン機能です。フォローしているユーザのリアルタイムなつぶやきを見ることでライブ感を楽しめるところが大きな魅力です。 

Twitterのタイムラインはリアルタイムに他のユーザのつぶやきが反映されるのでこの仕組みを実感しやすいと思います。このサービス開発にもReact.jsが使われています。 

Reactの体系化された仕組み 

React.jsはPCのWebアプリケーション開発のために使われるJavaScriptライブラリですが、スマートフォンのアプリケーション開発用に作られたライブラリもあります。それがReact nativeです。近年ではスマートフォンが普及してきたことにより、Webサイトをスマートフォンで見る人の割合が急増しています。そのため、Webアプリケーションを作成する際にはスマートフォンでのアプリ開発も視野に入れる必要があります。PCではWebブラウザの違いで動作が変わるように、スマートフォンではiOSとAndroidでアプリを分けて作成する必要があります。しかし、React nativeはこの動作の違いを吸収してくれる役割を持っているため、1つアプリケーションを作成すればそれでiOS、Androidともに使用できる状態にすることができます。 

ただ、React nativeに関してはまだまだ課題が多いことも事実です。Airbnbがスマートフォンアプリの開発にReact Nativeからネイティブアプリ（※1）に変更することを2018年に発表しています。Airbnbでは2年間に渡ってReact Nativeでの開発を進めた結果、iOSやAndroidと比較してまだまだ未成熟な技術であることを原因だとしてネイティブアプリを使った開発にシフトしました。こういった経緯はあるものの、これからFacebookでも技術の成熟に向けて開発を進めていくでしょうし、何よりiOSとAndroidの差分を吸収してくれる利点は大きいですね。今後の開発に注目したいです。 ※1　iOS、Androidそれぞれの専用開発環境 

React.jsを学ぶメリット 

React.jsをエンジニアとして学んでいくことに大きなメリットがある技術です。SNSの登場により、人々がインターネットを通じて他の人とコミュニケーションを取る場面がすごく多くなりました。今後もネット上のコミュニケーションを通してやりとりをするサービスは増えていくと思います。実際にReact.jsやVue.jsといったJavaScriptのフレームワークを使って、Webサービスの見える部分にあたるフロントエンドを作成する企業はどんどん増えています。

フロントエンドを作るときに重要となるのが、ユーザが使ってみた時の見やすさと使いやすさです。今後は、Webサービスのデザインをする職種を求める企業が増えてくれると思います、そのデザインを自分で考えたり実際にWebサービスとして形にすることができるエンジニアは重宝されます。そのReact.jsを学んでおくことは自分をフロントエンジニアとしてアピールする際の大きなポイントになります。 

まとめ 

React.jsは多数の利用者を抱えるFacebookやTwitterの開発に使われているだけあって、使いやすいWebサービス開発に適しています。
今後はインターネットでのリアルタイム性が重視される時代が来る中で押さえておくべき技術の1つでしょう。エンジニアとして自分の箔をつけるためにもスキルとして習得してみてください。