【この記事に書くこと】
・Reactってそもそも何？ どうしてReactを使うのか？
・Reactをローカル環境で始める手順
【経緯】
Reactの入門書２冊ほど読んだので、学んだことをまとめたいと思い記事にしました。
【環境】
以下の環境でReactを試しています。
| OS | macOS Monterey 12.3.1 |
|---|---|
| ブラウザ | Google Chrome |
| テキストエディタ | VS Code |
想定読者
・JavaScriptに触れたことがある（初心者〜中級者）
Reactってそもそも何？
ReactとはJavaScriptのフレームワークです。
フレームワークはざっくりいうと、あらかじめよく使う機能がまとめられたツールのことです。
例えば、どのWebサービスにもあるような画面遷移（トップページから各ページに飛ぶとか）、データベースにデータを登録するなどの機能がありますが、それらを毎回１から作るのは大変です。
Reactを使うことで、よく使う機能を０から作る必要がなくなります。
Reactをローカル環境で始める手順
⒈ Node.jsをインストールする。
Node.jsは、ブラウザ以外でもJavaScriptを扱うための実行環境です。（JavaScriptは基本的にブラウザ上で動かすもの）
ReactをローカルPC上で動かすためには Node.jsをインストールしておく必要があります。
以下、Node.jsを公式サイトからダウンロードしましょう。
https://nodejs.org/en/download/
安定版の「LTS」と最新版の「Current」がダウンロードできますが、
特に理由がなければ「LTS」 をダウンロードしましょう。
Reactに限った話ではないですが、「最新版」には文字通り最新の機能が含まれていますが、「安定版」と比べてまだ取り除かれていないバグなどが残っていることもあるからです。
⒉ npmがインストールされているかを確認
npmはNode Package Managerの略です。
Reactで開発するためにはさまざまなツール（「パッケージ」と呼びます）が必要になりますが、それらを追加したり、管理したりするのがnpmです。
npmはNodeと一緒にインストールされているはずです。
ターミナルを起動し、「npm -v」を打ち込んでみましょう。正常にインストールされていれば、以下のようにnpmのバージョンが表示されます。
y-kato@katouyuutakanoMacBook-Pro react-hello-world % npm -v
8.5.0
⒊ VS Codeをインストールする
今回は特にファイルを編集することはしないので、この「⒊」の手順はスキップしても大丈夫です。本記事の読了後、そのままReact開発を進めたい方はインストールしてみましょう。
Reactアプリ開発を効率的に進めるため、専用のテキストエディタをインストールしてみましょう。
本記事ではVS Codeをインストールしますが、別のテキストエディタでも問題ありません。
VS Codeは以下公式サイトよりダウンロードしましょう。
https://code.visualstudio.com/download
⒋ create-react-appをダウンロード
冒頭でも軽く触れましたが、アプリケーションを全て１から作成するのは大変時間がかかります。
そのため、ReactでもFacebook社が公式で用意した「create-react-app」という便利なツールがあります。
「create-react-app」をダウンロードすることで、利用者はすぐにReactアプリの開発に移れます。
ターミナルを開き、任意のディレクトリにて以下コマンドを実行しましょう。
npx create-react-app react-sample-app
コマンドが正常に実行され場合、コマンド実行したディレクトリに「react-sample-app」というディレクトリが作成されているはずです。
作成したReactアプリが正常に動くか確認してみましょう。
「react-sample-app」 ディレクトリ直下に移動し、以下コマンドを実行してみてください。
### まだディレクトリ直下に移動していない場合、以下コマンドでディレクトリを移動
cd react-sample-app
### ローカルのサーバーを起動
npm start
「npm start」を実行した場合、デフォルトで設定されたブラウザにて以下画面が表示されるはずです。
※もしコマンド実行時にブラウザが開かない場合、ブラウザにて「http://localhost:3000/」を入力してみましょう。
これでReactの開発が進められる環境が整いました。
まとめ
・ReactとはJavaScriptのフレームワークの一種
・Reactを使うことで、開発の効率が向上する。
・Reactをローカル環境で動かすにはNode.jsが必要
・npmはNode.jsのパッケージを管理するためのツール。Reactの開発にも用いられる。
・「create-react-app」をダウンロードすることで、すぐにReactアプリ開発に移れる。
参考文献
本記事を書くにあたって参考にした書籍です。
Reactでどんなことができるのか？ をWebアプリを作りながら学べる良書です。2022年3月頃から読みはじめましたが、エラーでつまづくことはほとんどなく、ほぼ書籍通りに進められました。おすすめです。
kindle unlimitedで現在無料です。
・はじめてつくるReactアプリ Kindle版
・はじめてさわるReact & JavaScript with TypeScript Kindle版
※上記の書籍が発売してから数ヶ月経ちReactがバージョンアップされた関係か、一部書籍通りの記述だとエラーになる箇所はあります。プログラミングの書籍は、発売してからしばらく経った後に購入すると、使われるシステムがバージョンアップされることで予期しないエラーが出る場合がありますよね。。それも勉強にはなりますが。。。