Reactを独学で習得してから初契約に至るまで、案件候補探しから交渉まで手探りな部分が多かったので、共有させて頂きます。
※正社員としてではなく、主に業務委託を想定しています。
※2021/1/5 「ポートフォリオ例」を追記しました(Udemyアドベントカレンダーの仕様のため)
こんな人向け
- エンジニアとしてキャリアアップしたい
- 独学でハイレベルなエンジニアに転職したい
- Reactに興味があり、学ぼうとしている
なぜReactを習得しようと思ったか
エンジニアとしての技術と市場価値をあげたかったからです。
私はエンジニア未経験というわけではなく、ビジネスサイドから転職して約１年ほどフロントエンドエンジニアとして仕事をしていました。
技術としてはNuxt.jsを主に使用していました。
しかし、1 社目にはエンジニア未経験で転職したのですが、課題が二つ浮き彫りになりました。
まず、給与基準が著しく下がったこと。私はビジネスサイド時代中々高給でした。ビジネスサイド時代終盤の給与基準は時給 6000 円、月給で 80~90 万円程度です(ストックオプションは別途)。20 代前半でこの数値は平均以上と思います。
が、**「自分でサービスを作れるようになりたい」**という思いが強くなりました。そこで、給与条件等は度外視で、一から技術力をつけることができる会社を探し、エンジニアとして転職しました。時給は学生のバイト並と一気に下がりました。
給与はさておき、プログラミングについてのあらゆる知識をゼロから吸収したのでとても楽しかったです。
が、フロントエンドの担当がメインだったこともあり、ある程度で当時の会社での業務から得られる成長が頭打ちになりました。
また、やはり給与が見劣りします。
並行して Web 制作等の案件はこなし始めていましたが、単価は平均で 10 万円、せいぜい 30 万円程度でした。
エンジニアとしての技術力がなければ相応の報酬しか期待できません。
技術力を引き上げる必要があります。
そこで注目したのがReactです。
Reactは使用者に「開発者」であることを求めるので、自ずと技術力がつくと考えました(実際に飛躍的に上昇しました)。
また、Reactさえ学んでおけば、ReactNativeの習得も容易です。モバイルアプリ開発を、SwiftやKotlin等ネイティブ言語を学ばずにReactだけで行えるようになるのは大きな魅力でした。
余談ですが、特にAndroidエンジニアの採用は常に需要に対する供給が最も不足している分野です。つまり、希少価値が高く、単価が上がりやすいです。
実際に、サイバーエージェントやメルカリ,DeNA でさえ Android エンジニア獲得に苦戦しています。
渋谷) 『メルカリ』は、ネイティブアプリのサービスなので、iOS や Android の開発を担うフロントエンドエンジニアとバックエンドエンジニアの採用が中心です。とりわけ採用に力を入れているのは、Android エンジニアですね。国内では iOS エンジニアの数に比べると、Android エンジニアの数が少なく、採用にはいつも苦労しています。
佐藤) よく分かります。Android エンジニアは、当社でもコンスタントに採用するのが難しい職種の一つです。サイバーエージェントでは、クライアント側の開発に力を入れているため、一人でも多く採用したい気持ちです。
(出典: 採用強者３社も獲得に苦戦！？人事が明かす「今すぐ欲しい」エンジニアの実態【メルカリ ×DeNA× サイバーエージェント座談会】)
Reactの習得
合わせて半年間以上はReactの学習に費やしました。うち四ヶ月間は新規案件を受けることを止めていたので、React の学習に専念しました。
具体的に何をしたかの詳細は別途記事にまとめますが、相当の量のインプットとアウトプットを繰り返しました。
特にUdemyとYoutubeがラーニングカーブを越える上で助けになりました。
注意点
Reactの古い書き方ではなく、最新の書き方を習得してください。
具体的にはクラスコンポーネント(Class Component)はもはや主流ではないですし、Reduxの書き方も大きく変遷しています。
クラスコンポーネントの代わりに、関数コンポーネント(Functional Component)×HOOKsというスタイルで書くことを意識しましょう。
Reduxについても、reducksパターンやHOOKsを用いた書き方にキャッチアップしましょう。
また、これらの方が古い書き方より直感的で学習コストも低いです。
一般書籍はどうしても情報の更新が追いつかないのであくまで雰囲気を掴む程度に留めるのが良いです。
代わりに**Udemy等の動画形式を中心にしながら、公式ドキュメントで確認すること**をお勧めします。
Udemy を勧める理由
Udemyはオンライン教材なので一度公開されてからも随時最新の情報を反映してアップデートされます。
プログラミング技術は移り変わりが激しく、すぐに情報の鮮度が落ちます。
特にReactはアップデートが速いです。例えば、今やデファクトスタンダードになっているHOOKsもReact本体に正式に採用されたのは 2020 年 2 月です。
及び、双方向的な学習スタイルだからコンテンツの更新が追いつかない場合も対人の質疑応答でカバーしてくれます。
似たような「動画+双方向的な質疑応答」なプラットフォームはいくつかありますが、結局Udemyが一番コスパが良いです。
ちなみに、日本語の講座だけでなく英語の講座も積極的に利用しています(むしろ日本語より受講数が多いかも)。
英語は日本語と違って抑揚が豊富なので、聞いていて楽しいんですよね。
Udemyの講座は世界中のユーザーが受講することを想定しているので、使用されている英語もそれを見越したものになっています。語彙がシンプルで、発音も丁寧で聞き取りやすいです。字幕(英語)もついているので、Udemyの英語講座に要求される英語力はそれほど高くないです。コードは万国共通言語ですしね。
ポートフォリオ例
私は後述のUdemy講座や公式ドキュメントを参照に、以下のような物を作成しました。
次章を参考に学習して頂けると、誰でもこの程度は作れるようになるかと思います。
お勧めの学習プラン
全体的な流れとしては、以下のようなイメージが良いでしょう。
- 【入門編】 React の初歩(JSX,コンポーネント間のPropsの受け渡し等)を通してES6以降のJavaScript(const,アロー関数,mapメソッド,関数型プログラミング等)に慣れる。
- 【初級編】 バニラReactでSPAを作りながら、関数コンポーネントとHOOKs,Contextを利用した状態管理を覚える。
- 【中級編】 Reduxを導入した開発
- 【上級編】 TypeScriptを導入した開発
これでReactについては問題ないでしょう。
実務では、バニラReactではなくReactベースのフレームワークを利用した現場が多いと思います。
Web開発ならNext.js、モバイル開発ならReact Nativeに進みましょう。
- 【実践編(i)】 Next.js で SSR アプリを作る
- 【実践編(ii)】 React Native でアプリを作る(最初は expo で iOS に絞ると無理がない)
【入門編】 React の初歩(JSX, コンポーネント, Props 等)を通して ES6 以降のJavaScript(const, アロー関数, map メソッド, 関数型プログラミング等)に慣れる。
Progate React コース
クラスコンポーネントしか扱っていない等全体的に情報が古いですが、React の初歩を通して ES6 以降の JavaScript にストレスなく慣れることができます。
まずスライドのみ通して読んで全体像を把握してから、実際に手を動かしながらレッスンを解くと良いです。
ただし、React公式チュートリアルがとても良くできているのでProgateは飛ばしてもOKです。
環境構築(VSCode のカスタマイズを含む)
ローカル環境に移って React を書いていきましょう。特に VS Code の設定が重要です。詳しくはReact 開発効率を 3 倍にする VS Code 拡張機能&環境設定を参考にしてください。
React 公式チュートリアル
これ以上なく良く出来ている名チュートリアルです。ローカル環境で行うことを推奨します。
React 公式ドキュメントを読む
上記の公式チュートリアルで手を動かしたら、公式ドキュメントを読み込んで知識を補強しましょう。
PCやタブレット上でも良いですが、紙に印刷するのがお勧めです。コーディングした後で目が疲れている時でも読めるし、電子スクリーンより紙の方が頭に入りやすいという実証結果が発表されています。
また、スマホのブラウザでリーディングリストに追加して、ちょっとした隙間時間で読み返せるようにするのもお勧めです。
ドキュメントは繰り返し読みましょう。
バニラReactでSPAを作りながら、関数コンポーネントとHOOKs,Contextを利用した状態管理を覚える
The Complete React Developer Course (w/ Hooks and Redux)【Udemy】
Andreaw Meadは Udemy 講師陣の中でトップの人気講師です。とにかく説明が丁寧。「コードを写経してなんとなく分かった気になる」ようなことはなく、それぞれコードの意味を理解しながら重要な基礎事項を定着できます。
話している英語も教科書のようなアメリカ英語で聞き取りやすいです。最低限の英語力さえあれば難なく受講可能です。最後の Redux の章はいったん飛ばして OK です。
【中級編】 Redux を導入した開発
The Complete React Developer Course (w/ Hooks and Redux)【Udemy】
先ほど飛ばした Redux の章に着手しましょう。これで完了です。
日本一わかりやすい React-Redux 入門(Torahack)【Youtube】
Youtube無料公開とは思えないほどハイクオリティな動画です。
Reduxの概念や使い方、記法を解説しつつ、実際にReduxを使用したReactアプリを開発します。
トラハックさんのYoutubeはどれもお勧めです。
Redux 公式ドキュメント
上記で紹介したような教材で実際に手を動かしたら、公式ドキュメントを読んで知識を補強しましょう。
【上級編】 TypeScriptを導入した開発
実際の業務において殆どのケースでTypeScriptが導入されています。
Reactチーム開発においてTypeScriptは必須と言っても過言ではないでしょう。
React自体に自信がついたら、次はTypeScriptを習得しましょう。
例えば、JavaScriptで作ったプロジェクトTypeScriptに置き換えると良い訓練になります。
超TypeScript入門 完全パック(2020)【Udemy】【Youtube】
Udemyの有料講座ですが、かなりの部分が無料公開されています。
非常にクオリティが高いです。
React Typescript Tutorial【Youtube】
Ben Awadさんのチュートリアル動画も分かりやすいです。自分自身でコードを書きながら見ることをお勧めします。
仕事ですぐに使える TypeScript
Webで無料公開されている資料です。こちらも名作。
プログラミング TypeScript ―スケールする JavaScript アプリケーション開発【書籍】
以前から原著が好評でしたが、2020 年に待望の邦訳が出版されました。オライリーの名著です。
【実践編(i)】 Next.jsでSSRアプリを作る
Next.js 公式チュートリアル
名チュートリアルです。まずはこれから。
Universal React with Next.js - The Ultimate Guide
バニラReactで実践的に何かを作る形式の資料は良くありますが、Next.jsだと一気に稀有になります。
様々なプラットフォームで(日本語は最初から諦めて)英語を中心に探して、唯一要求水準を満たすのがこちらでした。
見つけるのに苦労したのですが、「これだけで良い」というレベルのものと出会う事が出来て満足しています。Udemyはすごい。
Next.js 公式ドキュメント
上記で紹介したような教材で実際に手を動かしたら、公式ドキュメントを読んで知識を補強しましょう。
日本一分かりやすいNext.js入門
Next公式チュートリアルを元にした解説動画です。
まず自力でやるべきですが、トラハックさんの解説を聞くとより理解が深まります。
【実践編(ii)】 React Nativeでアプリを作る(最初はexpoでiOS版に絞ると無理がない)
スタートアップを除けば、実際の現場ではほとんどexpoではなくReact Native CLIが採用されているでしょう。
が、まずはexpoでiOSに絞って開発を行い、概要を掴む方が効率的です。
一旦expoでアプリを通して作り上げたら、大体の肌感覚が掴めているはずです。
React Native公式チュートリアル
ごく初歩的な内容ですが、肩慣らしに丁度良いでしょう。
React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応2020年版【Udemy】
日本語英語含めて、React Nativeの講座ではトップクラスに良いです。
講師のTakahiko Wadaさんも DeNA、スタートアップ CTO、東工大 MTO と実績・経歴共に間違い無いです。
動画では JavaScript版について解説していますが、TypeScript版のGithubレポジトリもついてくるのが素晴らしいです。
実践編：React Native と Firebase で作る iOS/Android アプリ：お店レビューアプリ開発編【Udemy】
上記の続編です。
React Native×FirebaseでCRUD操作を一通りさらえます。
個人開発で思いつく範囲のアプリなら、この講座を完了したらスムーズに作れるようになります。
案件獲得まで
媒体
案件探しには以下を利用しました。
MidWorks
フリーランス向けの案件に絞ったメディアなので圧倒的に使いやすかった。
「フルリモート」「週3~」等エンジニア側のよくあるニーズに沿った案件が探しやすくて嬉しい。
また、近年上場したことで有名なBranding Engineerが運営しているので安心感があります（マイナーな運営元だと地雷な担当者もちょくちょくいるので...）。
フリーランススタート
言語だけでなくフレームワーク毎の案件数を一目で分かるのがGOOD。
例えばReactは1579、React Nativeは87件ある。
使用技術毎に報酬相場（平均値、中央値、最低値等）がグラフで分かるのも親切。
レバテックキャリア
スタートアップ(全ラウンド)から大手まで。
案件数、質共に悪くない印象。
Qiita Jobs
主にスタートアップ(シリーズ B 以降)だがサイバーエージェントのような大手も。
まだ新しいサービスなので案件数は少ないですが、質は良い印象。
コミュニケーションのスピードも早いです。個人的には一番使いやすかった。
ほぼスタートアップ(シード~シリーズ B 以前)の案件のみ。
応募から面接まで最もスピード感があります。
ユニークな案件も多い気がします。
Wantedly
ほぼスタートアップ(シード~シリーズ B)。
案件数はそこそこですが、あまり質は良くない印象。
あくまでSNSという建前上、給与や具体的な条件について非公開なのもマイナス。
案件数
今回の場合このような形でした。
比較検討した数: 10社
応募した数: 5社
実際に働く会社: 1社
React エンジニアの相場
平均相場を知っておきましょう。
Reactエンジニアの平均時給は 5000~円です。
が、最初は、3000円程度に下げても良いと思います(流石に3000円未満は安い)。
実際のプロジェクトに参加する中で得られる経験値は貴重なので。徐々にステップアップしていきましょう。
自己アピールの資料
自身の技術力やポートフォリオ、経歴についてまとめておきます。
詳細な履歴書とは別に、先方の負荷が軽い簡易版も用意しておくと親切でしょう。
ちなみに、エンジニアは自身のポートフォリオサイトを作成しがちですが、あまり役に立った記憶がありません。技術ブログなどもわざわざ自作するより Qiita や Medium,Note 等を利用した方がコスパが良いです。
面接までの準備
会社、サービスについてなるべく調べておきましょう。
例えば自社開発の会社の場合はサービスを実際に触ってみて、長所（「こういう点に惹かれました」）と、改善案(「自分ならこういう機能を追加したいです」)等は話せるようにしておきましょう。
面接当日
緊張せず、自然体で話しましょう。
そして大事なのが、できないことはできないとはっきり言うことです。
例えば私はFirebaseは使い慣れていますが、Railsは全く触ったことがありません。
ある案件候補ではReactをフロントに、Railsでのバックエンドという環境でしたが、「Railsはできない」とはっきり答えました。
「ReactだけでなくRailsの経験がないと厳しい」ということでその案件は不合格となったのですが、仮に採用されてもおそらくこなせかったはずです。「合格・不合格」という言葉が悪いですが、面接とは互いの相性を確認する場でもあります。また、今回縁がなくても将来何かにつながるかもしれません。
給与交渉の工夫
相手の会社の規模やフェーズを確認して、適切な条件を提示することを心がけました。
例えばスタートアップなら、充実した福利厚生を望むのは場違いでしょう。
一方、大企業でフルリモートやフレックスのような柔軟な働き方は難しいかもしれません。
また余談ですが、スタートアップの場合は資金調達のタイミングも重要です。バーンレートがそのまま総合的に支払うことができる額の上限となるので、フルタイムではなく週3程度がありがたいかもしれません。前回の資金調達がいつかはプレスリリースで確認できますし、次の資金調達予定については面接で尋ねると教えてくれることが多いです。
相手のニーズを察することで、双方にとって理想的な落とし所を探しましょう。
契約書について
業務契約書は必ず交わしましょう。エンジニアが案件を受ける際の鉄則です。
特にスタートアップだときちんと用意しない会社も多いです。先方が用意していない場合はこちらで作成するくらいの気持ちが良いでしょう。
今はCloud Signで誰でも簡単に契約書を作成できます。Cloud Sign のテンプレートをほぼ踏襲しつつ、適時修正しましょう。
また Cloud Sign はデフォルトで電子署名対応なので、完全にリモートで双方の署名・捺印が完了します。
5 件までなら無料で使用できるので、是非使ってみてください。
契約内容についての注意点ですが、フリーランスの場合はなるべく準委任契約にしましょう。
請負契約の場合は瑕疵担保責任の期間について明記してください(ここら辺はエンジニアの先輩に教えて頂きました)。
業務開始まで
具体的な開発環境について事前に確認しておきましょう。例えば「どのようなライブラリを使っているか」「状態管理はどのライブラリで、どのようなパターンで行っているか」「スタイリングやCSSフレームワークは何を用いているか」等。
また、業務開始までに環境構築や必要なツールのセットアップもなるべく済ませておくと、余裕を保ってスタートできます。
おまけ:こんな案件も良いかも
また自身のスキルが足りないと思って見送ったり、これから応募しようと思っていた案件です。
私の場合、メディア系と医療領域に関心がありました。Ubieは医療系スタートアップで個人的に一押しです。
また講談社テックは従来保守的だった大手出版社の意欲的な挑戦として非常に面白そうなんですが、正直私の実力ではまた足りないかなと。十分な力をつけてから挑みます。
-
ABEMAやAWAなどの自社アプリ開発を担うWebフロントエンドエンジニア募集！【サイバーエージェント】
参考
Udemy
The Complete React Developer Course (w/ Hooks and Redux)
[Andreaw Mead](https://click.linksynergy.com/fs-bin/click?id=Zn0gMaqkRnw&offerid=1138543.12&type=3&subid=0
超 TypeScript 入門 完全パック(2020)
Universal React with Next.js - The Ultimate Guide
React Native 入門：ニュースアプリを作りながら覚えよう/Hooks 対応 2020 年版
実践編：React Native と Firebase で作る iOS/Android アプリ：お店レビューアプリ開発編
Takahiko Wada
書籍
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
React.js & Next.js 超入門
プログラミング TypeScript ―スケールする JavaScript アプリケーション開発
[
Next.js+ヘッドレスCMSではじめる! かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた](https://amzn.to/4ef9iT6)
Qiita
国内のReact Nativeで作られてるアプリをピックアップ
Firebase+React+Reduxで多機能チャットを実装しよう【リアルタイムチャット~React編~】
お前らのReactは遅い
ReactとVueのどちらを選ぶか
コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった
5歳娘「パパ、型はドキュメントだよ？」
React 開発効率を 3 倍にする VS Code 拡張機能&環境設定
Web
レバテックキャリア
Qiita Jobs
採用強者３社も獲得に苦戦！？人事が明かす「今すぐ欲しい」エンジニアの実態【メルカリ ×DeNA× サイバーエージェント座談会】)
Redux 公式ドキュメント
React 公式ドキュメント
Next.js 公式ドキュメント
React Native公式ドキュメント
仕事ですぐに使える TypeScript