長年やってきたことが、何かのキッカケによってあっという間に古くなるというのはよくあることです。
HTMLやCSS、JavaScriptやjQueryができれば仕事は安泰という考えは、残念ながら「長年やってきたこと」の例に入ってしまいそうです。いや、すでに入りつつあります。それも、みなさんよくご存知のFacebookが作ったフレームワーク「React」の登場によって・・・
というわけで今回は「React」をご紹介します。Reactとは何かに始まり、Reactまわりの案件事情までご紹介します！
目次
そもそもReactとは
Reactは2013年にFacebookにより公開され、2017年にMITライセンスへと移行しました。まだ比較的新しいフレームワーク、新しい技術です。長年の「当たり前」がくつがえる
Reactの登場によって、DOMを直接操作するのはフロントのアンチパターンになりつつある、と聞いてどう思われるでしょうか？従来はDOMツリー構造にしたがいHTMLタグを書き、スタイルはCSSで書き、演算や複雑な動きはJavaScriptまたはjQueryで、というのが一般的でした。
タグを使って書いたコードにしたがって、DOMが構築されて画面に現れます。すでにできあがったDOM要素を変更するときは、プログラマがどの要素を何にというのをJavaScriptで記述します。そのときのコマンドの代表格がgetElementByIdです。書き換えられたDOMにしたがってブラウザ上に結果が再表示されます。
ここまでは従来の手法で、読んでいてもフムフムといったところです。では、今回ご紹介するReactはどうでしょうか？
Reactは仮想DOMを使う
一方Reactでは、仮想DOMというしくみを使います。仮想DOMとはいわゆるDOMの設計図とも呼べるもので、JSXという言語を使って記述します。仮想DOMとは実際のDOMとはちがいます。JSXでHTMLを出力する・・・って、似たようなことは他の言語やフレームワークでもできるじゃんと思うかもしれませんが、Reactはそれだけではありません。一度仮想DOMを構築すると、仮想DOM内に変更を加えるやいなや、実際のDOMまで書きかわります。
仮想DOMと実際のDOMに差分が発生すると、Reactがそれを検知して勝手にHTMLを変更してくれます。プログラマが意識してgetElementByIdをする必要がなくなるのです。
Reactは高速
ところで、HTMLって変ですよね。なぜタグだけで画面描画ができるのでしょう？私たちは今まで何気にHTMLやCSS、JavaScriptでコーディングしてきました。タグをいっぱい書いてきました。でもそれってなぜタグだけ書いたら画面に表示されるのでしょう？タグといっても◯◯ピクセルから△△ピクセルまで線を引く、塗りつぶすといったようなものでもありませんよね？
実は、ブラウザの背後でレンダリングエンジン（HTMLを解釈するエンジン）が動いて、画面を描画するのです。一度描画したあとは、JavaScriptを動かすとHTML+JavaScript+CSSからブラウザ本体（多くはC++で開発）へと動作がうつり、実際のDOMが書きかわって画面に変更が反映（レンダリング）されます。ブラウザも意外と楽ではありません。
仮想DOMでは動きが少しちがいます。仮想DOM内の内容や値が書き変わると、即座に表示が変更されます。つまりDOMの構造チェックやgetElementByIdなどなど、仮想DOMが多くを引き取ってくれます。
しかも仮想DOMの構築や差分更新自体が高速なので、動作全体は当然早くなります。Reactは高速といわれるゆえんです。
Reactが求職に与える影響
ほんの5,6年前までは、フロントまわり（画面系）のコーディングはHTMLとCSS、そしてJavaScriptを押さえておけば、だいたいのことはできました。フロントエンジニアが転職活動するときも、上記の3つができていれば何とかなったものです。ところが、この状況が変わってきています。
もちろん、HTMLやCSS、JavaScriptの需要は昔と変わりませんが、特にJavaScriptまわりが華やかになっています。JavaScript関連のフレームワークがいろいろと出ているのです。その華やかなフレームワークの1つが、今回ご紹介しているReactなのです。
JavaScript系フレームワークを使わず、JavaScriptだけで地道にコーディングしていくことがむしろめずらしくなり、そのようなコードを「素（す）のJavaScript」と表現するほどになりました。
転職活動や案件探しにも、その影響がでています。
たいていの企業は募集要件に「JavaScript」とだけ表現していますが、中にはカッコ書きでフレームワーク名を付けて「JavaScript(フレームワーク名)」というように二つを併記する企業も出てきました。ReactはReact単独で表記されていることもあれば、JavaScript(React)とさまざまな書き方がされています。
ここ最近、急速にReact案件の数が多くなっています。特にベンチャー企業や最近立ち上がった企業など、フットワークの軽い企業の案件で多く見られるようになりました。
Reactエンジニアの仕事内容
React自体がフロントのコーディングをするフレームワークなので、Reactエンジニアの仕事内容も自ずとフロントまわりのコーディングが仕事になります。
Reactを使う以上、それなりに見せ方の凝った、または動きのあるWebサイトになります。というのもそれほど複雑でないWebサイトにReactを導入すれば、メリットがでないどころか学習コストや既存のコーディング規約の変更などなど、逆効果にもなりかねません。
Reactエンジニアの仕事は、単なるフロントのコーディングではなく、複雑な構造のフロントのコーディングといえるでしょう。
React案件は今後減少する？増加する？
本記事の冒頭にも触れたように、Reactは比較的新しいフレームワークです。React自体がまだまだこれから伸びざかりという状態なので、今後も需要は増加することが予想されます。各転職サイト・フリーランス支援サイトを調査すると、検索ヒット数はとても多いので、その傾向はより確実といえるでしょう。
Reactのフリーランス求人案件トレンド
フリーランス支援サイトで、検索キーワードにReactを指定して検索結果を分析してみました。
Reactのトレンドを知るためのキーワード
ヒットした案件を調査した結果、一緒に記載されることの多いキーワードがありました。モダンなフレームワーク教育コンテンツの配信会社の案件にて記載されていたフレーズです。全文は「ReactやVue.jsといったモダンなフレームワークを使った開発を経験していること」でした。
ここでVue.jsというキーワードに注目です。このVue.jsという開発フレームワークそのものも気になりますが、JavaScript系のフレームワークが一緒に記載されている案件が多くありました。あとAngularもReactと並んで記載されていることが多いです。
よく動くサイト客先常駐の案件で見かけたフレーズです。全文は「JS（React/AngularJS）を使った「よく動くサイト」の開発」でした。ReactやAngularそれぞれにいえますが、これらのフレームワークを使う案件といえば、やはりそれなりに複雑な画面をもつシステムです。
SPA (Single Page Application)SPA（シングルページアプリケーション）というのは、逐一画面を遷移するのではなく、一枚ものの大きい画面をイッキに読み込み、遷移させると見せかけてただ位置を動かしただけ、という概念です。最初に読み込むのが大変というのはありますが、そのあとは再描画しない分高速です。
SPAという考え方自体は昔からありましたが、実際にSPAで開発している現場は少ないのが実状でした。ところがSPAと相性のよいフレームワークであるReactやAngularが出てきたことによって、簡単にSPAが実装できるようになりました。
これを機に、SPAという概念を押さえておきましょう。
調査結果からわかったReact案件のトレンド
React自体が目新しいフレームワークなので当たり前といえばそうですが、やはり最新技術に精通していることが大事です。Reactだけでなく、SPAといったその他最近よく聞く技術トレンドはひととおり押さえておいたほうがよさそうです。React以外のフレームワーク、例えばすでに出てきたAngularなどなどのフレームワークも求められることがありますので、Reactを理解しても安心することなく、複数のフレームワークを学習しましょう。
これら調査結果を受けて、あとの章「React案件で年収・収入を上げるポイント」で具体的な方法を考えてみましょう。
React求人案件の単価相場は？
スクールにすら通っていないというような「完全未経験」では、残念ながら案件を獲得するのは難しいです。調査した結果、完全未経験可という案件はほとんど見られませんでした。そんな中、完全未経験の方が案件獲得するのはほぼ不可能ということになります。
ましてや、Reactエンジニアを求める案件ともなれば、HTMLやCSS、JavaScriptは理解していて当たり前という暗黙の了解があります。このような点が、未経験者へのハードルを上げている一因となっています。
以下のデータは、各求人サイトのデータをピックアップして調査した結果です。しかし企業ごとに出せる年収の額は大きく変わります。また、今までご紹介してきたとおり、Reactと同時に他の技術を求められることが普通です。Reactだけできれば必ず以下の金額が手に入るというわけではありません。
よって、以下は傾向や参考値として参照してください。
実務経験半年
350万円（週５勤務）実務経験1年間
400万円（週５勤務）実務経験2年間
450万円（週５勤務）実務経験3年間以上
600万円（週５勤務）実務経験5年間以上
800万円（週５勤務）React案件で年収・収入を上げるポイント
React案件において、年収・収入をあげるにはどうすればよいでしょうか？最新技術に貪欲になる
ただでさえ開発やインフラ技術の移り変わりが激しいIT業界です。JavaScriptまわりもそのうちの一つです。Reactが優位性を保てるのはいつまでなのか、誰にも分かりません。Reactが登場した当時は、もちろん使えるか使えないかよく分からないReactに対し、難色を示す人はいました。ところが、がんばって使ってみて「意外とかんたんだった」と言ったエンジニアがたくさんいました。
先入観を捨て興味本位で使ってみたエンジニアたちは、それだけ早く使えるようになり、そのメリットも大きかったのです。つまり、最新技術に貪欲であることは必須なのです。Reactだけができます、とアピールしても他の技術者より優位に立てるとは限りません。
今後新たに出てくる技術は、実はReactの良さを引き出したり、Reactの弱点をカバーしてくれるものかも知れません。よって、最新技術を常にチェックして、いいモノがあれば自分の武器にプラスして、Reactとの相乗効果をねらうのです。すると、自ずとあなたの単価は上がります。
Reactと開発フレームワークの組み合わせ
Reactというキーワードで案件を検索していく中で、RailsやLaravelといった開発フレームワークが一緒に記載されていることが多くあります。それもそのはずで、Reactは確かにすばらしいフレームワークではありますが、Reactだけでシステムすべてを構築できないのです。一般に公開しているようなWebシステムやWebサイトではHTMLやCSS、JavaScript、Reactだけで開発できません。データベースにデータを保存したり、ユーザー認証を行ったりなどなど、むしろフロントまわり以外の要素の方が強いのです。
それにもかかわらず、面談などで「Reactができます」ということばかりを前面に押し出したらどうなるでしょうか？これでは「フロントまわりしかできません」と言っているように聞こえてしまいます。
もちろんフロントエンジニアとして仕事をしたいという強い思いがあるのなら、それでも構いません。ただどうせだったらMVCモデルをすべて網羅しているような開発フレームワークを習得して、年収をあげていきたいですね。
React案件で週2~3日常駐はあるの？
残念ながら、見当たりませんでした。ほぼすべてが週5勤務の案件でした。ただし、大手SIerの定時出社・定時退社の週5勤務とは異なり、フレックスやスライド勤務（12〜21時）、家族会などの豊富な福利厚生が用意されている企業が多数ありました。今後、政府主導の働き方改革を導入しやすい自社開発企業や若手企業が、多様な働き方を導入し始めて、Reactエンジニアにも好影響が出ることを期待しましょう。
React案件で在宅ってあるの？
こちらも、ほぼ見当たりませんでした。ただし、前述のようにフットワークの軽い若手企業が働きやすさを追求し、インターネット環境を活用（GitHubによるソースコード管理やSkypeやGoogleハングアウトを使ったオンラインの会議など）し、在宅での案件を公開するのは決して考えられないことではありません。現在、このような案件を狙っている方は、こまめに求人をチェックするのがよいでしょう。
まとめ
本記事では、Reactを求人という側面でご紹介しました。これからReactを学習しようとしている方、すでにReactを習得して案件をお探し中の方、本記事をぜひ参考にしてくださいね！最新おすすめ
案件はこちら
もっと見る
