Reactとは？Reactエンジニアを多数輩出するメンバーズが解説！

読み込み速度を始めとするユーザビリティの向上はSEO観点でも非常に重要になっていますが、ユーザビリティ向上を目指す上でも期待されているのがSPA(Single Page Application)という技術です。一般的なページとSPAの違いは以下の通りです。

そんなSPAを作る際に使われるのが今回ご紹介するReactというライブラリです。
今回は、
「ユーザビリティ改善のためSPAを導入したい」
「Reactを使ってみたいが、使える人が周りにいない」
という方のために、そもそもReactとはどんな技術でどんな特徴があるのか、そしてなぜReactをかけるエンジニアがまだ少ないのかについて、Reactエンジニアを多数輩出するメンバーズが解説します。

お問い合わせ

Reactとは
Reactを使うメリット
トレンド
Reactエンジニアの採用・育成は難しい！？
メンバーズがReactエンジニアを多数輩出できる理由
Reactエンジニアのスキルセットと経験値
まとめ

Reactとは

Reactとは、Facebookが開発したUI(ユーザーインターフェイス)を作るためのJavaScriptのライブラリです。Reactの特徴としては以下が挙げられます。

UI開発を容易にする

UIとはユーザーと製品・サービスのインターフェイス（接点）を意味します。ゲームを例に取るとキャラクターの移動や攻撃を行うボタンにあたりますが、ReactはこれらのUI開発に適しています。

コンポーネントベース

コンポーネントとは「構成要素」や「部品」という意味ですが、ReactではUI要素をコンポーネントとして分けて管理します。
それぞれを個別で管理することで各コンポーネントが担当するUIが明確になるため、機能拡張や改修時に他コンポーネントに影響を与える可能性が低く拡張性、保守性に優れます。

ページ表示速度が高速

Webページの読み込み、更新の際に画面上の必要な箇所だけを書き換えるという処理が行われるため、高速にページの表示を切り替えることが可能です。

Reactを使うメリット

続いてReactを使うメリットについて見ていきたいと思います。

SPAの構築が容易

SPA（Single Page Application）とは前述の通り、従来のようにページ遷移時に画面全ての表示を書き換えるのではなく、単一ページでコンテンツのみの切り替えを行うWebアプリケーションの設計構造です。

SPAにもメリット・デメリットと議論される点がありますが、一般的にページ表示速度が高速化すると言われており、ユーザビリティ向上を目指すうえでは期待される技術となっています。

パフォーマンスが高い

Reactでは仮想DOMという技術が採用されているためWebサイトの描画が高速です。仮想DOMでは表示中のページ内で変更が生じた際、変更箇所を検出し差分のみを更新するのでページ表示が高速です。

モバイルアプリケーションも作れる

ReactにはReact Nativeという拡張言語が存在します。React Nativeを使用すればモバイルアプリケーションの開発も可能であるため、拡張性の高いフレームワークとなります。

SEO対策

通常のWebページの場合はサーバーで生成される、もしくは完成されたWebページが格納されており、それを取得しブラウザに表示する仕組みになっています。
そのためWebページの情報を収集するためにWeb上を巡回しているクローラーが随時そのページの情報を読み取る事が可能です。

一方でSPAの場合、Webページを構成するためのデータは細かな部品の単位でサーバー側に格納されており、それらを都度取得しブラウザ側で統合してWebページとして表示させる仕組みになっています。
そのためクローラーにとっては「完成されたWebページ」として認識できず、結果としてSEO的に不利になってしまうというデメリットがあるのですが、Reactの場合はNext.jsやGatsbyなどのフレームワークを使用することでそのデメリットも解消することが可能です。

トレンド

ここまではReact自体の特徴とメリットについて見てきましたが、ここからは将来性=トレンドについて見ていきたいと思います。

Reactの将来性（トレンド）

以下はJavaScriptの三大フレームワーク（React、Vue、Angular）を比較した表です。

	React	Vue	Angular
開発元	Facebook	個人（Evan You氏）	Google
開発規模	中～大規模	小～中規模	大規模
学習ハードル	中	小	大
特徴	TypeScriptとの親和性が高く厳格なルールでの記述が可能。一定の品質を担保できるため保守性が高い。 JavaScriptから大きく逸脱することがないので身に付けた知識を他に生かせる。	コードの記述方法がシンプルであり学習コストが低い。開発に必要な追加のライブラリも公式で推奨しているものが多く選択に困らない。	TypeScriptを主要言語としており、前提技術として必要となる。大規模アプリケーションに採用されることが多く、各種機能が揃っているため、プロジェクト初期段階から有識者がいると良い。

ReactはFacebookが開発元であるため、サポートが続く限り、今後も安心して開発・運用を続けられるフレームワークです。個人によって開発されたVueに比べて、バックアップ体制が整えられているのは特徴的ですね。
ちなみにReactを使用しているサービスとしては以下のようなものがあります。

PayPal
Twitter
Dropbox
Netflix
Instagram

ReactはSPAを採用した多くのサービスで導入されているため、JavaScriptのフレームワークで悩んでいる場合はReactの導入をご検討ください。

Reactエンジニアの採用・育成は難しい！？

実はReactをかけるエンジニアの採用や育成は難しいと言われています。
その背景としては以下があります。

高機能を優先させていて習熟ハードルが比較的高い

Reactは「初学者への間口の広さ」よりも「先進性」に優れた技術です。そのため高機能ではあるものの習得のためのハードルが高くなっていて、そもそものReactをかける人数が増えない要因になっています。

日本語の情報リソース拡充が遅かった

ReactはVueと比較して、日本語の情報リソースの拡充が出遅れましたが、日本語の情報リソースがなかったことも学習ハードルをあげる理由の1つになっていました。

中・大規模アプリで利用される

上記の比較表「開発規模」にも記載しましたが、Reactは中～大規模アプリにおける保守性・機能拡張性・動作パフォーマンスを優先した設計思想のもと開発された技術です。

ある程度の規模のあるアプリケーションを提供する会社においてしか経験が詰めないという点もプレイヤーが増えていない理由になっています。

メンバーズがReactエンジニアを多数輩出できる理由

Reactをかけるエンジニアの採用・育成が難しいと言われている中で、メンバーズでは多数のReactエンジニアを輩出しています。
なぜそれだけ輩出できるのかというと、メンバーズPGT事業では一般的なスキル研修だけでなくスキルフェロー（技術顧問）制度を導入しているためです。
新卒で入社したエンジニアもHTML/CSS/JavaScriptの基礎スキルを高めつつ並行してReactについて学び、研修のようなインプットだけでなく技術顧問によるきめ細かく頻度の高いレビューを繰り返し、アウトプットする場を設けています。
そのためReactのアウトプットの場が少ない現状でも、実務レベルで対応できるエンジニアの育成に繋がっています。

Reactエンジニアのスキルセットと経験値

前述の通りReactはまだまだプレイヤーが少ないですが、比較的経験のあるエンジニアが求められる傾向にあるようです。
プレイヤーの母数がそもそも少ない中で「経験の豊富さ」を求めることになるので、業務要件に対して単価が上がってしまうことも多いですね。
現場・業務内容によっては経験が豊富な人でなくてもいい場合もあるので、作業要件に見合ったスキルセットのエンジニアを採用・募集するようにしましょう。
参考までに、これまでのご支援実績を踏まえてエンジニアのスキルセット・経験値のイメージをまとめてみましたのでご活用ください。

経験	エンジニアのスキルセット	Reactに特化したスキルセット
初級	以下の経験、知見を持つ・セマンティックなHTMLマークアップ・CSS設計に準じた記述・CSSプリプロセッサ・JavaScript ・バージョン管理システム	以下の経験、知見を持つ・JavaScriptでのDOM操作・ES2015以降・非同期処理の理解・Fetch API ・JSXの理解・React Hooks ・カスタムフックの作成・Redux ・Storeの操作・React Routerによるルーティングの追加・Reactでのスタイリング・CSS Modules ・styled-component ・Tailwind CSS ・既存のコードを読み、コンポーネントの作成、保守が可能
中級	初級エンジニアのスキルセットに加え以下の経験、知見を持つ・CSS設計・JavaScriptフレームワーク・Javascriptユニットテスト・Webセキュリティ・チーム内での技術的サポートが可能	初級エンジニアのスキルセットに加え以下の経験、知見を持つ・TypeScriptの理解・TSXの理解・Redux ・Storeの定義・Redux Toolkitの理解（導入）・React Routerによるルーティング管理・UI componentライブラリの導入・Material-UI ・reactstrap ・既存のプロジェクトのカスタマイズ、メンテナンスが可能・Next.js ・Gatsby ・GraphQLの理解・パフォーマンスを意識した開発・リファクタリング
上級	中級エンジニアのスキルセットに加え以下の経験、知見を持つ・DevOps ・CI/CD設計・プロジェクトの技術選定・バックエンド、インフラ技術	中級エンジニアのスキルセットに加え以下の経験、知見を持つ・新規プロジェクトの構築が可能・ライブラリ選定・Next.js ・Gatsby ・GraphQL

まとめ

Reactの特徴と、Reactエンジニアの採用・育成が難しい理由、メンバーズがReactエンジニアを多数輩出できる理由について解説しました。
Reactエンジニアの採用を検討されている方・Reactを今後採用する可能性のある方はぜひお問い合わせください。適切なスキルセットのエンジニアをご提案させて頂きます。