本記事では、Reactの開発環境の設定とReactをVS Codeで扱う際にインストールしておくと便利な拡張機能（エックステンション）について紹介します。
React学習中の方や、軽量で高機能なコードエディタを探している方はぜひ参考にしてください！
Reactの開発環境
ReactとはFacebook社が開発したJavaScriptのライブラリです。
このライブラリはWebアプリケーションのUIを構築するために提供されています。
Reactを用いたWebアプリケーションの開発にはテキストエディタ、Node Package Manager(npm)、が必要となります。
VS Codeのインストール
VS Codeとは、正式にはVisual Studio Codeと呼ばれるMicrosoftが開発しているコードエディタです。
Windows、macOSはもちろんのこと、UbuntuやRed HatといったLinuxのシステムにも対応しているのが特徴です。高機能で多くの拡張機能も多く存在していることから、Reactでの開発に向いているテキストエディタとして、非常におすすめできます。
以下のページから自分が使用している環境にあったものをダウンロードしてインストーしてください。
https://code.visualstudio.com/download
インストール手順
VSCodeのダウンロードページにアクセスして「Windows」のボタンを押します。
パソコンのダウンロードフォルダの中に「VSCodeUserSetup-x64-1.63.2.exe」といった名前のexeファイルが保存されるので、ダブルクリックで起動します。
使用許諾が出てくるので、内容を確認したら「同意する」にチェックを入れて「次へ」をクリックします。
チェックはそのままで「次へ」をクリックします。
PATHへの追加に関してはコマンドプロンプトなどのターミナルソフトからcodeコマンドでVS Codeを起動できるようにする設定です。
追加タスク一覧にPTAHへの追加のみが表示されていることを確認したら、「インストール」をクリックします。
インストールが開始されるので、しばらく待ちます。
インストールが終了すると「Visual Studio Code セットアップウィザードの完了」という画面が表示されます。
ここではVS Codeが起動するかどうかを確認したいので「Visual Studio Codeを実行する」のチェックを入れたまま「完了」ボタンを押してください。
VS Codeが起動すれば成功です。
Node.jsのインストール
先述した通り、Reactでの開発をする上ではNode Package Manager(npm)が必要となってきます。
Node Package Manager(npm)を使用するために、Node.jsをインストールします。
Node.jsは以下のURLからダウンロードしてインストールしましょう。
https://nodejs.org/ja/download/
インストール手順
Node.jsのダウンロードページにアクセスし、LTS(推奨版)の「Windows Installer」をクリックします。
すると「node-v16.13.1-x64.msi」というようなファイルがパソコンのダウンロードフォルダに保存されるので、これをダブルクリックします。
Node.jsのセットアップウィンドウが開くので、Nextをクリックします。
ライセンスへの合意が求められるので、「I accept the terms in the License Agreement」にチェックを入れて、「Next」をクリックします。
インストール先を聞かれます。
ここではデフォルトのままで「Next」をクリックします。
カスタムセットアップのウィンドウが開きます。
何も変更をせずに「Next」を押します。
必要なツールの自動インストールについて聞かれます。
表示されているチェック項目については、さまざまなツールをインストールするためのものです。Reactの環境をセットアップするためには不要なので、チェックを入れずに「Next」をクリックします。
「Install」をクリックします。
インストールが開始されます。
Windowsのユーザーアカウント制御が出てきた場合、「はい」をクリックします。
Node.jsのインストールが開始されるのでしばらく待ちます。
インストールが終わったら「Finish」をクリックします。
Node.jsがインストールされているかを確認します。
Windowsの「ここに入力して検索」と書いてあるところに「cmd」と入力してEnterを押します。
コマンドプロンプトが起動の候補として表示されるので「管理者として実行」をクリックします。
Windowsからユーザーアカウント制御について聞かれた場合は、「はい」を押してください。
コマンドプロンプトのアプリが起動します。
「node –version」と入力して実行します。
Node.jsのバージョンが表示されたらインストールされています。
次に、「npm –version」と入力して実行します。
npmのバージョンが表示されたらnpmがインストールされています。
create-react-app の更新
Create React Appとは、Facebookから提供されているビルド環境でありcreate-react-appコマンドを実行することで構築します。
create-react-app のインストール
コマンドプロンプトを使用して開発用のディレクトリに移動します。
今回、Dドライブの直下にReactというフォルダがあると仮定して説明します。
コマンドプロンプトでカレントディレクトリがDドライブ以外になっている場合は、「d:」を実行してDドライブに移動してください。
次に開発をするディレクトリにcdコマンドで移動します。
Dドライブの直下からは「cd React」を実行します。
これで開発用のフォルダに移動しました。
「npx create-react-app [アプリ名]」と実行します。ここではアプリ名をtestとするので、「npx create-react-app test」を実行しています。
Ok to proceed? (y)と表示されたらyを入力してEnterを押します。
create-react-appコマンドや開発に必要なパッケージがインストールされます。
Success！ Created [アプリ名] at [ディレクトリ名] と、表示されていれば成功です。
「D:¥React¥test」ディレクトリに開発に必要なもの一式がインストールされました。
次にtestディレクトリに移動し、npm startを実行します。
さまざまなモジュールが実行去れ、successfullyと表示されます。
また、自動的にブラウザでReactのデフォルトページが表示されます。
この時のURLはhttp://localhost:3000となります。
おすすめVS Code拡張機能
VS CodeにはReactを用いた開発を補助してくれる便利な拡張機能が沢山あります。
その中でも厳選して、5つの拡張機能をご紹介いたします。
- React Native Snippet
- Node.js Modules Intellisense
- ESLint
- Live Server
- Bracket Pair Colorizer
React Native Snippet
コーディングの作業をするときは、同じようなソースコードを何度も書く機会があります。
Reactにおいても同様に、似たようなソースコードを書く機会が発生します。
そんな時に、スニペット機能を使い、あらかじめ登録しておいた記述を呼び出しておけるようにしておけば、何度も同じようなソースコードを記述する必要がなくなります。
React Native SnippetではReactに関連するJavaScript、Redux、ReactJS、React Native、React Native StyleSheet、TypeScript ReactJS、Typescript React Nativeの7つの言語に対応したスニペットが提供されています。
Node.js Modules Intellisense
こちらはインテリセンス機能を提供する拡張機能です。
Node.jsのimport文を書くときにコードを補完してくれます。
ESLint
JavaScriptの検証ツールです。
ソースコードを実行する前に、構文エラーや書き間違いを見つけたり、カッコの使い方などのスタイルの統一、実行前に明かなバグを見つける手助けをしてくれる拡張機能です。
Live Server
簡易的なローカル上の開発サーバです。
Reactには最初からサーバの機能がありますが、HTML、CSS、JavaScriptにおいてのコーディング作業の際には、表示を確認するのに便利です。入れておきたい拡張機能のひとつです。
Bracket Pair Colorizer
コーディングしていく中で、ネストが多くなってくると整合性が分かりづらくなってしまうカッコに色を付けて見やすくしてくれる拡張機能です。
デフォルトでは()、[]、{}に対応しています。
まとめ
Reactの開発環境を整える作業は難しくはありません。
どのようなアプリをどのように作るかアイデアさえあれば、補助してくれる拡張機能もあるので上手く開発できることでしょう。
本日の記事のポイントは以下の通りです。
+ 開発環境に必要なものはVS Code（テキストエディタ）、Node.js、Create React App
+ VS Codeは拡張機能が豊富なのでおすすめ
最後までお読みくださりありがとうございました。