- Reactのスムーズな始め方が知りたい
- Reactの環境構築の方法を詳しく知りたい
- Reactの環境構築が終わった後に何をしたら良いか知りたい
Reactの始め方が『簡潔すぎる情報』か『複雑すぎる情報』ばかりで、 『初心者に寄り添った情報』 が見つかりにくいですよね。
この記事ではフロントエンドエンジニアの私が、Reactを始めた際に 難しかったところを噛み砕いて説明します。 私自身、数ヶ月前に入門したばかりですので、かなり初心者に寄り添った内容になっています。
ぜひこの記事を見ながらReactを始めてみてください。
【2022年10月最新】初心者でも分かりやすいReactの始め方
この記事では お手持ちのパソコンで、プロと同じ開発環境を構築し、すぐにReactの教材を始められる状態になることを目指します。
- コードエディタをインストールする
- Node.jsをインストールする
- Reactをインストールする
- Reactがインストールされた環境を確認する
詳しい手順を詳しく説明していきます。
【Reactの始め方 1】コードエディタをインストールする
【出典】https://azure.microsoft.com/ja-jp/products/visual-studio-code/
『コードエディタ』は、プログラムのコードを書いていくためのアプリケーションの総称です。HTML / CSS / JavaScriptを編集する際に使用していたものがあるかもしれませんが、この記事では『VSCode』の使用を想定して進めていきます。
VSCodeのおすすめポイント
- オープンソース製品だから無料で使える
- 予測変換が優秀だから、コードを完璧に覚える必要がない
- コーディングを効率化する機能が多彩
- 圧倒的なシェア率だから、ネットに情報が多い
- 動作が軽快
- 拡張機能が豊富なため、自分好みにカスタマイズすることができる
- 開発元がWindowsでおなじみなMicrosoftなため、安心して使える
- Windows・Mac・Linuxでも同じ環境で使える
マイナーなエディタを選んでしまうと、分からないことが出てきたときに調べるのに一苦労します。特に初心者のうちは、VSCodeで開発をはじめることを強くおすすめします。
VSCodeのインストール
インストールはこちらの動画がわかりやすかったのでオススメです。
必要な拡張機能をインストールします
- Japanese Language Pack for Visual Studio Code：日本語化パック
- Material Icon Theme：フォルダ名やファイル名に応じてアイコンが自動で設定される
- ES7 React/Redux/GraphQL/React-Native snippets：Reactのスニペット（コードの雛形）を呼び出せる
- Prettier – Code formatter：コードを自動で整形する
- Auto Rename Tag：開始タグを修正したら、閉じタグも自動修正してくれる
- Auto Close Tag：開始タグを入力したら、閉じタグを移動で追加してくれる
- Color Highlight：カラーコードの箇所に色をつけてくれる
- Path Intellisense：パスの入力支援
- ESLint：JavaScriptのバグ・非推薦な書き方を教えてくれる
- vscode-styled-components：スタイリングの一つである『styled-components』を見やすくしてくれる
拡張機能に関しては必要に応じて追加するようにしてください。
【Reactの始め方 2】Node.jsをインストールする
Node.jsは本来ブラウザ上のみで動くJavaScriptを、サーバーサイドでも動かせるよう開発されたプラットフォームです。
Node.jsをインストールすればReactの環境構築を簡単に行える『create react app』のコマンドを使えるようになります。
公式サイトからお使いのOSに対応した、Node.jsのLTS版（長期安定サポート版）のインストーラーをダウンロードしてください。
こちらはインストーラーの手順通り行えばOKです。
【Reactの始め方 3】Reactをインストールする
いよいよReactの環境を構築していきますが、今回は初心者でもわかりやすいよう、VSCodeで全て完結できるようにしていきたいと思います。
- VSCodeを開きます。
- 【ファイル】タブ＞【フォルダーを開く...】＞ 任意のフォルダを開く
- 【ターミナル】タブ＞【新しいターミナル】を開く
- 画面の下側からターミナルが表示されます
npx create-react-app my-appを入力- インストールが完了したら『Happy hacking!』と表示されます
cd my-appを入力
画像付きで詳しく解説していきます。
1.VSCodeを開きます。
VSCodeのトップ画面を表示させておきます。
2.【ファイル】タブ＞【フォルダーを開く...】＞ 任意のフォルダを開く
自分が作業したい任意のフォルダーを用意しておき、そこを指定して開きます。
3.【ターミナル】タブ＞【新しいターミナル】を開く
ターミナルとは、コンピュータに指示を出すためのプログラムです。これから行う作業は『Windowsのコマンドプロンプト』『Macのターミナル』で行うことが一般的ですが、VSCode上で進めるほうが簡単なため、こちらで進めていきます。
4.画面の下側からターミナルが表示されます
画像はWindowsですが、Macでもおおよそ同じ内容です。
5.npx create-react-app my-app を入力
上記コマンドの『my-app』が作成されるフォルダ名に当たり、この中に環境が構築されていきます。
6.インストールが完了したら『Happy hacking!』と表示されます
インストールには数分かかります。
7.cd my-appを入力
『my-app』は5で入力したものと同じものを入力。
cdはフォルダ移動のコマンドで、作業フォルダを『my-app』に移動させます。
こちらでReactの環境構築は完了です。Reactでコンテンツを作成する場合、毎回行いますのでスラスラできるようになるのが理想です。
次にReactをブラウザ上に表示し、正しく環境構築ができているか確認していきます。
【Reactの始め方 4】Reactがインストールされた環境を確認する
npm startで、ブラウザに『Create React App』で作成されたReactのアプリを表示させる- 『Create React App 』で作成されたファイルの中身を確認する
- 『Create React App 』のファイルの中身を編集してみる
npm start で、ブラウザに『Create React App』で作成されたReactのアプリを表示させる
『Create React App』で作成されたアプリは npm startのコマンドで、編集をリアルタイムで確認ができます。
正しく環境構築ができていれば、下記のような『Reactのアイコン』が回転している画面が立ち上がります。
『Create React App 』で作成されたファイルの中身を確認する
my-appの中身を確認すると、3つのディレクトリと4つのファイルが生成されています。こちらを解説していきます。
Reactを始めたばかりのフォルダの中身
.gitignore
エンジニアが必ず使用する『Git』という、バージョン管理システムから除外するファイルを指定するためのファイルです。
package.json
アプリを作る際に必要なモジュール（部品）をリストにしているものです。
package-lock.json
package.jsonを元にモジュールを集めてきた記録と、バージョンが記載されています。
README.md
プロジェクトの説明、使い方、インストール方法などの説明が書いてあるファイルです。今回の場合だと『Create React App』の説明書になっています。
node_modules
package.jsonを元に集めてきたモジュールを格納しているディレクトリです。
public
HTMLや画像、フォントなど『ファイルにアクセスできるもの』管理するディレクトリです。
src
メインの開発ディレクトリです。JavaScriptやReactのコンポーネント・CSSなどを格納します。
『Create React App 』のファイルの中身を編集してみる
『src/App.js』の内容を『src/index.js』で取りまとめて『public/index.html』の<body id="root">の内容を書き換えてブラウザで表示させる、というのがReactの大まかな流れです。
現在表示されている画面を変更してみましょう。
- srcディレクトリのApp.jsを開く
- pタグ内を書き換える
- ブラウザで確認する
srcディレクトリのApp.jsを開く
App.jsの中身は、独特なファイル構成になっています。
JavaScriptの中でHTMLのように振る舞う、JavaScriptの拡張構文『JSX』で書かれています。
HTMLで見慣れたpタグがありますので、こちらを以下のように変更することで、ブラウザの初期画面を変更することが出来ます。
ブラウザで確認する
保存するとブラウザ上でも変更されます。環境構築と確認が完了です。
環境構築が終わったら、教材で学習を進めましょう
環境構築ができるようになったら、実際に教材を使って学び始めましょう。オススメなのは実際に手を動かしながら学べる『ハンズオン形式』の教材です。
私が主に使用したのは動画教材です。実際に講師の方が動かしているコードを見ながら、自分もコードを書けるので失敗しにくく、スムーズに学習を進めることが出来ます。
詳しい学習方法は以下の記事でまとめましたので是非参考にしてください。
この記事を読むと『Reactの罠』を回避できます。
【初心者の方へ】難しすぎるReactを挫折しない学習方法3選
まとめ
- コードエディタをインストールする
- Node.jsをインストールする
- Reactをインストールする
- Reactがインストールされた環境を確認する
上記の手順通り行えば、必ずReactを始めることが出来ます。
Reactを始めることができたら、 必ず最新の学習方法を確認しておきましょう。 フロントエンドの情報は移り変わりが早く、古い情報がいまだに検索の上位に上がってきていることが多いため、注意が必要です。
最新の学習方法はこちらの記事で詳しく紹介をしています。
Share this post