JavaScriptライブラリReactを学んでいて難しすぎると思ったことはないでしょうか。
そんな中で悩むことは、
・Reactが難しすぎてなにから手を付けていいかわからない
・Reactの公式チュートリアルやガイドブックを見ても意味がわからない
ですよね。
今回はそんなお悩みを解決する
についてまとめます！
もくじ
Reactは確かに難しい。どの点が難しかったか考察
Reactは確かに難しかったです。Progateやればできるようになるとおもって挑んだものの「なにこれ」状態でした。
今は実務で使えるレベルになっていましたが、学び始めた当初どの点が難しかったか考察したいと思います。
JavaScriptの知識が必要であった
ReactはJavaScriptライブラリであり、JavaScriptの基本的な知識がないとReactを理解することは絶対に不可能です。
ですので、いきなりReactから学習をはじめるのは無謀だといえます。
また、ちょっと昔にJavaScriptを触ったことがある程度では全然だめです。
JavaScriptの基本的な文法やオブジェクト指向プログラミングなどの概念を学ぶ必要があります。
コンポーネントの概念がわからない
Reactの最も重要な機能の1つはコンポーネントです。
初心者にとって、コンポーネントとは何か、どのように構成するのかその概念について理解することが非常に難しいと感じました。
また他のコンポーネントと組み合わせて作ることが多く、なにがベストな組み合わせかも悩むことがありました。
JSXの使い方がよくわからない
Reactでは、JSXと呼ばれるJavaScriptの拡張構文を使用して、UIコンポーネントを記述します。
初めてJSXを使用する場合は、HTMLとの類似性がある一方で、JavaScriptの文法に従う必要があるため、初心者にとってはやや難解であるなと感じました。
非同期処理の理解が難しい
Reactでは、非同期処理が頻繁に使用されます。
初心者にとっては、非同期処理についての理解が必要です。
その基礎はやはりJavascriptにあるので、先にその概念についても学ぶ必要があります。
開発環境の構築が複雑
Reactを使用するためには、Node.jsやnpmのインストール、Webpackなどのツールの設定、Babelなどのトランスパイラの設定が必要となります。
初心者にとっては、これらの環境設定を行うことが難しと感じることがあるでしょう。
実際にNode.jsをPCに導入するときにいろいろなパッケージをインストールしてどれだけ入れたかわからなくなりました。
初心者でも最短でJavaScriptライブラリReactを習得できる方法
では本題の初心者でも最短でJavaScriptライブラリReactを習得できる方法について説明をします。
React習得のロードマップを設定する
やはりReactは学ぶことが多く、やみくもに手を出しても学習するどころか混乱を招いてしまう恐れがあります。
そこでまずはReact習得のロードマップを設定していきましょう。
だだ、どうロードマップを引いたらよいかわからないと思います。
タカヒロも全くわからなかったので、現役のフロントエンドエンジニアに頼みました。
利用したサービスはメンタというところです。
https://menta.work/
Reactで絞ったページです。
https://menta.work/plan/category/28/tag/551?tag_551_from_card=1
評価が100個以上ついているメンターに声掛けして学習ロードマップを設定してもらいます。
ただし当然ながら、お金がかかります。
独学で悩みながらやるか、お金を支払い、作ってもらったロードマップに沿ってやるかの選択になります。
タカヒロの場合はあれこれ悩む時間がもったいなかったですし、転職前提でしたので、初期投資だとおもいメンターに1000円払い、3カ月で実務レベルになれるロードマップを作成してもらいました。
ちなみに、React関連の学習項目は50個以上あります。
フロントエンドエンジニアの転職レベルとなるとさらに増え200個以上になります。
それをみて独学では絶対にわからないなと思いました。
学習を終え、転職を果たしたあとも、見返して利用しており、かなり重宝しています。
目標を決める
Reactを学ぶ動機として、フロントエンドエンジニアへキャリアチェンジしたり、アプリ開発を副業として請け負うことを考えている方が多いのではないでしょうか。
タカヒロもフロントエンドエンジニアになり転職をすることがReactを学ぶ目的であったので、それを目標としました。
その上でメンターに相談し、いつまでにそれを実現したいか、転職活動前までにどこまでなにをすればよいか決めていきました。
この目標によって学ぶ内容が変わってきますし、そもそもはっきりしないと、ロードマップが引けないのでかならず設定するようにしましょう。
VS Codeの使い方を知る
開発ツールであるVS Codeの使い方を学習しましょう。
参考にした動画は以下の通りです。
ざっとみてハンズオンに沿ってやってみましょう。
あとショートカットも覚えていきましょう。
https://qiita.com/TakahiRoyte/items/cdab6fca64da386a690b
JavaScriptの基本を学ぶ
やはりJavaScriptは外せません。
ReactはJavaScriptライブラリであり、JavaScriptの基本的な概念について理解することが必要です。
JavaScriptの文法、データ型、制御構文、関数、クラスなどについて学んでいきましょう。
また、ES6の機能に沿って学習することがよいです。
ES6に沿ったJavascriptの学習プランはProgateで用意されています。
コードを模写しながら学んでいくとよいでしょう。
https://prog-8.com/lessons/es6/study/1
Git/GitHubを覚える
ReactのコードをGitHub上で管理、共有していくために、Git/GitHubを覚えておきましょう。
現場に配属されるとわかりますが、コードはGitHub上で管理されていることが多いです。
特にチーム開発でGitHubを使用する場合は前もって知っていないと参加が難しいです。
そのためにもまずはGit/GitHubがどういうものか以下の動画で把握しておくとよいでしょう。
フロントエンド開発のためのGit/GitHub入門
なお有料コンテンツのUdemyですが、この動画は無料で公開されています。
本サイトでもGit/GitHubの記事を扱っていますのでご参考ください。
Reactの基礎を動画で把握する
はい、ここからようやくReactの話になります。
いきなり本を買ったり、チュートリアルを見ても意味が分からないと思いますので、
まずはカンタンにまとめてある動画をみてざっと把握します。
参考になった動画は以下です。
Reactの概要の他に環境構築もあるので参考にして構築してみましょう。
ある程度理解ができたらUdemyの教材を購入し、ハンズオンに沿って実行してみましょう。
ゼロから学ぶReact.js
Javascriptがちょっと不安という方はこちらもよいでしょう。
モダンJavaSciptの基礎から始める挫折しないためのReact入門
JSXを使う上でHTMLの基礎を学習する
Reactでは、JSXと呼ばれるJavaScriptの拡張構文を使用して、UIコンポーネントを記述します。
JSXはHTMLとの類似性があるので、記述する上でHTMLの知識が必要となります。
HTMLの基礎は実際にコーディングして画面に表示しながら覚えていくとよいでしょう。
HTML基礎をざっと学べるサイトはドットインストールとなります。
https://dotinstall.com/lessons/basic_html_tags_v3
無料利用枠で一度試してみるとよいでしょう。
React Hooksを理解する
次にReact Hooksを理解していきましょう。
React Hooksは、Reactの関数コンポーネントで状態管理やライフサイクルメソッドを扱うための仕組みです。
Hooksは、useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useImperativeHandle、useLayoutEffect、useDebugValueの10種類があります。
それぞれのHooksには状態管理やライフサイクルメソッドの実装に役立つ機能がありますが全部を覚える必要はないです。
まずはuseState、useEffect、useContext、useReducerあたりの概要を確認していきましょう。
本サイトでReact Hooksの概要をわかりやすくまとめているので、参考にしてください。
React本を読む
この段階でReact本を購入し、空いた時間があれば読むようにし、知識を定着させていきましょう。
購入すべき本は1冊でOKです。
以下の本はメンターから教えてもらった本です。
Reactステップアップ
ここまでくるとReactがより理解をしている状態かと思いますが、やっぱり不安だなという気持ちがあるかと思います。
それはまだアプリとして実際に機能するものを作っていないため実感がないことが要因かもしれません。
そんな方にReact学習をステップアップする講座が用意されていますので、こちらを受講して簡易アプリを作成してみましょう。
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
「stateやprops、useStateやuseEffectの使い方は何となく分かったけど次どうしたら良いか分からない」
「もっと実務で必要となるレベルの解説を知りたい」
という方が対象になります。
正直お値段の割にかなりのボリュームがありお得です。
項目としては以下の通りです。
様々なCSSのあてかたに触れる
ルーティングのテクニックを学ぶ(React Router)
コンポーネントの分割方法を学ぶ（Atomic Design）
グローバルなstate管理を知る
React × TypeScriptで開発できるようになる
カスタムフックを使えるようになる
Chakra UIを使った実践アプリ作成
おなかいっぱいですね…
コンポーネントやパッケージを追加する必要がありますが、動画に沿って行けばできますので、頑張ってやっていきましょう。
Reactを学んだあとに学習すべきこと
ここまでできたらReactは習得しているといってもよいかもしれません。
さらにReactの知識を深めるためには以下を学習することもよいでしょう。
Firebase
ReactでFirebase/Firestoreからデータ取得する方法についてまとめていますので、ご参照ください。
ReactでFirebase/Firestoreからデータ取得
youtubeでもいい感じでまとまっています。
ReactとFirebaseを連携させてSNSアプリを自作してみたいというよくばりな方におすすめです。
【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう！
チャットアプリ版もあります。
Firebase未経験者のためのReactで作るチャットアプリ開発入門！
https://pro.diveintohacking.com/p/firebase-react
またReact学習の応用編として、以下のようなテクニックやライブラリを学習することがおすすめです。
Next.js
Next.jsを使用して、サーバーサイドレンダリングを行う方法を学習していきましょう。
さらにNext.jsを実用レベルに仕上げたい人はこちらの講座もお勧めです。
Next.jsでブログシステムを開発、デプロイしてきますので、実際に開発するときのイメージがしやすくなります。
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
※「Next.jsの公式ドキュメントを読み終えて理解済みの方は、この講座では新しい学びがないので受講しないようにしてください。」とのことです。親切ですね。
Redux
Reduxを使用して、アプリケーションの状態管理を行う方法を学習しましょう。
あのはむさんが講師のHooksとRedux状態管理手法習得講座です。フランクな感じで説明してくれるので、わかりやすくてお勧めです。
React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
React Native
React Nativeを使用して、モバイルアプリケーションが開発できます。
以下はWebの開発経験はあるけどアプリの開発は初めて…だったり、エンジニアになりたての人にお薦めのReact Native入門講座です。
【2023年最新版】React Native入門：ニュースアプリを作りながら覚えよう
※700件越えの高評価です！
Material-UI
Material-UIを使用すると美しいUIを構築することができます。
Implement High Fidelity Designs with Material-UI and ReactJS
Chakra UIも現場でよく使われますので、学んでおくことをおすすめします。
以下はChakra UIを用いた実践アプリの作成があるので、「React何となく分かったけど次どうしたら良いか分からない」という人のステップアップによいでしょう。きれいなデザインでUI開発ができることは他のエンジニアと差別化できますし、現場で重宝されること間違いないでしょう！
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
React Testing Library
React Testing Libraryを使用して、Reactコンポーネントのテストを行う方法を学習しましょう。
ソフトウェアテスト手法を知っている初心者の方はほぼいないと思いますので、以下の講座を受けてざっと把握しておくだけでも差別化になるでしょう。
[テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト
AWS
AWSのサーバレスサービスを利用してReactの実行環境を構築してみましょう。
コンテナ仮想化を利用するとなおよいでしょう。
以下の講座をうけると、インフラがあまり詳しくない方でもAWSを利用して自分でネットワークやサーバを構築できるようになりますのでお勧めです。
AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
さらに、「AWS 認定ソリューションアーキテクト アソシエイト」の取得を目指してみましょう。履歴書に書けますので転職活動によいでしょう。
【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）
【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）
PHP
バックエンドにPHP、フロントエンドにReactという組み合わせのサイトが多くなってきていますので、バックエンド側を代表する言語PHPを学ぶとよいでしょう。
PHPといえばLaravelですね。PHP案件で遭遇率高いLaravelをサクッと学ぶのは以下の講座がおススメです。
PHPからLaravelまで サーバーサイドをとことんやってみよう【初心者から脱初心者へ】【わかりやすさ最重視】
ちなみにサーバサイドはAWSが圧倒的に多いですのでこちらもしっかり学べばフルスタックエンジニアに一歩近づくでしょう。
さいごに
今回は、
についてまとめました。
また、他にも役に立つ情報がありますので、よろしければご参照頂ければと思います。
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました！
＞＞Amazonで詳細を見る
電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。
この記事の関連キーワード
