Reactエンジニアへの道のり【初心者向け】

はじめに

近頃、Reactのシェア率がすごいですね。エンジニア求人サイトでは、かなりの確率で「必要スキル:React」って書いてある気がします。
Reactの強い点は

  • 一度学習すれば、webもネイティブアプリ(スマートフォンアプリ)も同じ要領でかける

  • 書いたコードを使い回ししやすいので、二度同じコードを書くことが少ない

  • Reduxと併用することで複雑なデータ構造も扱える

などの点があげられると思います。この記事では、React(エンジニア)初心者の人が二週間程の学習でReactで書かれた簡単なコードを読み書きでき、Reactプロジェクトにジョインできる状態になることを目標とします。各項目の学習方法は、すでにとてもわかりやすい記事がたくさん上がっているので、そちらへのリンクを貼っていきます。ここでは、何をどのような順番でやればいいのかに焦点を当ててまとめていきます。

エンジニアとして知らなきゃいけない基本知識(1日目~4日目)

まずは、プロジェクトにジョインするために、最低限の知識・準備をしましょう。

git

gitはチーム開発において必須の知識ですまずはじめに学習しましょう。
まずは、こちらのサイトでgitとはどういったものか、gitの中で出てくる基本単語を押さえましょう。
【初心者向け】Gitってなに?①まず流れを理解する(コードなし) - Qiita
その後、このタイトルが超絶煽りのサイトの、入門編、できれば発展編までをさら読むのが良いと思います。
サルでもわかるGit入門 〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】

エディタを準備しよう

実際にコードを書いて行く際に、コードを書くツールのことをエディタと呼びます。例えば、macで最初から備わっているメモ帳もエディタとして使用することができます。しかし、コードの続きを自動で補完してくれる、コードの形を整形してくれるなどの機能を持ったエディタがインターネット上にはたくさんあります。
その中でもオススメなのがVSコードです。
Visual Studio Code – コード エディター | Microsoft Azure
ここからダウンロードできます。

Reactを学ぼう(5日目~12日目)

まずはhtml,cssから

まずはフロントエンジニアを目指すなならば必須の知識、htmlとcssについて学びましょう。
以下のprogateというサイトが、とてもわかりやすくてオススメです
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
一部の講座は有料ですが、無料でも十分に学べます。

次はjavascript(js)

Reactはjavascriptという言語で書かれています。チュートリアルの冒頭でも述べられている通り、基本的な文法はマスターしておきましょう。
jsについても、上記のprogateというサイトがとてもわかりやすいチュートリアルを用意してくれています。そちらをやりましょう。

Reactのメインコンセプトを読もう

公式は英語のドキュメントになります。英語が苦手な人はGoogle翻訳に全部ぶち込んで読んでいきましょう。 メインコンセプトはこちら
Hello World – React
まずは、リンク先のMAIN CONCEPTSを全部読みましょう。概念を理解しているといないとで次のTodoアプリを作る時の理解度が大きく変わります。
ADVANCED GUIDSは必要になったらで大丈夫です。

チュートリアルのまるばつゲームアプリを作ってみよう

リンクはこちら
Tutorial: Intro to React – React
このステップが一番大切です。最初は写経で大丈夫なので、しっかりと理解しながら、きちんと動くものを自分自身で作ってみましょう。
また、Setup Option 2: Local Development Environmentでやりましょう。プロジェクトにジョインする際に避けて通れないのは環境構築です。自分自身のパソコンで動作する環境づくりの練習をここでしておきましょう。また、次のステップで手元に動くコードを残しておく必要があります。

Reduxを学ぼう(13日目~14日目)

Reduxがどのようなものかは、この記事がとてもわかりやすいです。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
まずはこの記事を読んでReduxの概念を把握しましょう。

先ほど作ったまるばつアプリにReduxを導入しよう

Reactチュートリアルで作ったアプリのデータ構造をstateによる管理ではなく、Reduxによる管理にしましょう。
こちらのサイトに詳しい手順が書いてあります。
初心者がザックリとReact+Reduxを学ぶ - Qiita

あとは実践で

ここまでやれば、大抵のコードは読めるはず!実際に運用されているコードに触れて、よりReactに強くなっていきましょう!

最後に

最後までお読みいただきありがとうございました!ご意見、ご感想お待ちしています! また、Reactで書かれているwebサイトを運営しています。
https://www.twi-reviews.jp/
今人気のゲームを、最新AI技術を用いた独自のシステムで評価しているサイトです。分析は、該当商品に関するツイートを集計し、評価・星付けをしています。 よかったらのぞいてみてください!