「よくReactって最近聞くけどなんだろう?」
「本当に流行っている技術なの?」
Reactは世界中に23億人ものユーザを抱えているSNSであるFacebookが開発したJavaScriptのライブラリです。フレームワークと勘違いされることが多いですが、Webアプリケーションを開発する上で必要な機能を提供しているために、ライブラリとして認識されています。今回の記事では、使いやすさから愛用しているエンジニアも数多くいるReact.jsについて、「開発された経緯」「なぜ需要が高いのか」「今後の需要はどうなのか」をご紹介します。
Contents
Reactの登場経緯
ReactはFacebookのソフトウェアエンジニアである「Jordan Walke」によって開発されました。現在ではオープンソース化され、誰でも使用できる状態になっています。登場からオープンソース化までは下記のような経緯を踏んで来ています。
React.jsの歴史 2011年・・・Facebookのニュースフィードへの掲載で初登場 2012年・・・Facebookの傘下となったInstagramの開発現場にも採用 2013年・・・JavaScriptの公式カンファレンス「JSConf US」にてオープンソース化 |
FacebookはReact.jsに引き続き、React nativeを開発しています。これはAndroid/iOSでReactを利用したネイティブアプリ開発を可能にするものです。2015年3月から多くの企業で使われてきました。 Facebook, Instagram, Airbnbといった有名なIT企業が採用していることからも、高い評価を受けていることがわかります。しかし、2018年にはAirbnbがReact nativeの採用を取りやめたことをきっかけに、開発元のFacebook自身も改良を加えた修正版をリリースすることを発表しました。 React nativeに関してはまだまだ改善点が多くある一方、React.jsは人気が根強くあります。これはReact.jsが優れた特徴を持っているためです。
React.jsが持っている特徴
UIが作りやすい
Webアプリケーションではどんな画面が見えて、どんな機能を持っているかが重要になります。Webアプリケーションがどんな画面になっていて、どのように動作するのかを示すのがUI(ユーザーインターフェース)です。React.jsは、このUI機能を追加することに特化したライブラリで、開発を簡単にしてくれます。
機能を部品化して再利用することが可能
React.jsは「コンポーネント指向」という考え方を採用しています。これは、開発した機能を自動車部品のように細かく分けて、再利用できる形にしています。1つのWebアプリケーションで開発した機能を、再度他のWebアプリケーションでも利用できるため、手間を大きく減らすことができます。
Webアプリケーションの表示処理が早くなる
Webアプリケーションを作成する上では、ユーザが入力した情報に応じてリアルタイムに更新される機能が重要になります。データバインディングとは、「ブラウザ上で表示される内容」と「HTMLテキストに記述している内容」が自動的に紐づいて更新される仕組みのことを指している言葉です。例えば、「Hello world」とWebブラウザ上に表示されているとします。表示されるテキストの内容を変更したい場合には、
従来の方法 HTMLテキストの内容を更新して保存 ↓ クライアントがWebブラウザを更新 ↓ 表示される内容が変化 |
データバインディングの場合 HTMLテキストを更新 ↓ Webブラウザの表示がリアルタイムに更新 |
以上のように、データバインディングを用いることで更新した内容をリアルタイムに反映することができます。React.jsでは、仮想DOMといった仕組みによって、データバインディングを高速に実現することができます。
仮想DOM
React.jsが持っている特徴の中でも、仮想DOMは多くの開発者から支持されています。どういったものかを詳しく見ていきましょう。DOMとは、Document Object Modelを略したもので、クライアントがWebページを見たときに自動的に作成されるものです。Webアプリケーションの処理や表示の速度は、DOMの生成がどれくらい高速に行われれるのかによって変わってきます。
従来までのDOMでは、Webサイトを見ている人が情報を入力する度、0からDOMを作成していました。しかし、それではアプリケーションとしての処理が重くなったり、ブラウザ画面に表示されるまでにタイムラグが発生してしまう難点がありました。しかし、Reactが導入している仮想DOMであれば、内容に差分が生じた箇所のみを更新していく仕組みであるため、従来よりも高速な動作が可能になります。Reactが普及する前には、JavaScriptのviewライブラリとしてjQueryがよく使われていましたが、仮想DOMの使い勝手の良さにReactを使う開発者がどんどん増えていきました。
世界中の有名な企業で導入されているReact
Reactは世界でも有名な数多くのIT企業で導入されています。具体例を見ていきましょう。
- Netflix・・・世界中にユーザを持つ動画配信サービス
- Airbnb・・・世界最大手の民泊仲介サービス
- Yahoo・・・世界最大手の情報検索サービス
- qiita・・・エンジニア向けの情報共有サービス
上記で上げているのはほんの一例になりますが、みなさんもよくご存知の企業ではないでしょうか。Webプリケーション開発にReactを使用している企業はまだまだあります。実績が積み上がっていくことで、今後採用する企業もますます増えていくでしょう。
ここでフリーエンジニア専門の案件紹介サービス【エミリーエンジニア】に掲載されているReact活用案件をいくつか見てみましょう。
【 React活用案件例1 】
自社音楽アプリReact Native開発/フロントエンド
<案件内容>
自社アプリのフロントエンド開発・保守
新規サービスの設計、開発
<環境>
・サーバーサイド: Ruby(Ruby on Rails), Firebase, Node.js
・フロントエンド: React Native, Riot.js
・DB: MySQL, Big Query
・インフラ:AWS, heroku
・プロジェクト管理:Backlog, GitHub Project
・コミュニケーションツール:Slack
【 React活用案件例2 】
デジタルマーケティングオートメーションサービスの開発
<案件内容>
・新機能の追加・既存機能の拡充へのSDK対応
・React Native, Ionic, Flutterなどの新しい開発プラットフォームへの対応
【 React活用案件例3 】
人事系Saasシステムの開発
<案件内容>
オンプレからクラウド上でサービス提供を行うSaaSへの移行
<環境>
言語:JAVA javascript
DB:MySQL
FW:フロント:React + Redux、 バック: Spring
AR/VRアプリ開発のためのReact とは
FacebookはReactでWebアプリケーションだけでなく、多種多様な開発をできる目標を掲げています。序盤で説明したReact nativeに続き、現在ではAR/VRアプリ開発に使用できるReact VRも提供しています。
近年では、映像として体験することに価値を感じる人が多くなっています。それに応じて、映像コンテンツ制作に注目が集まっています。中でも、AR/VRコンテンツは注目度が高く、取り組み始めている企業も出てきています。しかし、Webブラウザで表示するVRアプリケーションを0から学習しなければいけないとなると、普及はまだまだ難しいと考えられていました。そこでFacebookはReact VRを開発しました。根本的な考えた方はReact.jsと同じであるため、0から学習しなくても、VRコンテンツ制作を行うことができます。React.jsと比較すると普及率はまだまだ高くない現状ですが、今後さらにVRコンテンツ需要が高まっていく可能性を考えると、期待が持てるフレームワークだと思います
Facebookと聞くと、SNSのイメージが強いと思いますが、IT技術に大きな金額を投資しており、エンジニア向けに開発を手助けするフレームワークやライブラリを開発しています。そのように、IT技術の開発にしっかりと投資している企業が作ったという面でも、React.jsは今後のさらなる発展が期待できるライブラリです。
Reactがなくなるとしたら
React.jsが使われなくなるリスクの可能性考えてみましょう。React nativeの登場に関する話でも触れた通り、ユーザが開発に使った結果として、現場のニーズと合わずに中止されるケースもあります。新規のフレームワークにはどうしてもつきまとう問題です。 React.jsは登場から何度も改修を繰り返し、今では多くの企業で使用されています。現状でも使っている開発者が多くいることを考えると、いきなり需要が0になることはないでしょう。ただ、今後さらに使いやすいフレームワークが出てくる可能性は十分にあります。
ただ自分ひとりで業界動向などをキャッチアップするのは大変、と言う方には、フリーランス専門のエージェントに登録することをおススメします。エージェントは案件紹介だけではなく、キャリアプランの相談、業界動向などの情報提供も行ってくれるので、安心です。まだ登録していない方は、一度登録してみると良いでしょう。
そういった可能性も考えると、エンジニアとして安定的に仕事を取り続けていくためには最新の情報をキャッチアップして、今後来る技術の波を捉えておくことが重要になります。その姿勢だけは無くさず、新しい技術を貪欲に学び続ける姿勢を持ちましょう。
報酬単価を知りたい、働き方の相談も大歓迎です!まずはお気軽に下記より登録下さい!