VSCodeでReactの開発を行う！React開発者のためのオススメ拡張機能。

この記事では、Visual Studio Code（以下VSCode）のインストールから日本語化までの手順で、Reactの開発をおこなうためにインストールしておきたいオススメの拡張機能（エクステンション）を紹介する。

VSCodeは世界中で使われているもっとも人気のあるIDE。

ReactのみならずJavaScriptのフレームワークとは相性も抜群だ。ぜひ一緒に使ってみよう。

VSCodeとは？

公式サイト:: https://code.visualstudio.com

Visual Studio CodeはMicrosoft社が開発しているコードエディタ。IDE（統合開発環境）とも呼ばれる。

2021年の現在、もっともよく使われている開発ツールであり、JavaScript関連のプロジェクトをはじめJavaやC++の開発もおこなうことができる。

VSCodeはオープンソースプロジェクトであり、すべての機能を無料で使用することができる。

豊富に用意されているサードパーティー製の拡張機能（エクステンション）を使い自分の好みに合わせて機能を拡張させることができる。

なお、JavaScript向けのIDEについてもっと知りたい人はこちらの記事をどうぞ。

VSCodeのインストール

では、VSCodeをインストールしてAngularの開発をおこなうための準備を整えよう。

インストーラーをダウンロードする

まずはVSCodeの公式サイトを開き、お使いのOSに対応したインストーラーをダウンロードする。

「Stable」は公式にリリースされた安定しているバージョン。特に理由がなければこちらを使用するようにしよう。

VSCodeをインストールする

インストーラーのダウンロードが完了したら、そのファイルを開いてインストールを始めよう。

まず、最初に利用規約の同意を求められるので「同意する」を選択して「次へ」ボタンをクリックする。

次にVSCodeのインストール先を指定する。特にフォルダを指定する理由がそのまま「次へ」をクリックする。

次にスタートメニューフォルダの指定を行う。これもそのまま「次へ」をクリックする。

次に追加タスクの選択画面が表示される。

ここでは、必要に応じてタスクを追加しよう。今後、VSCodeをメインの開発ツールとして使う予定の人はすべてにチェックを入れよう。

最後に設定の確認画面が表示される。問題がなければ「インストール」をクリックしてインストールを開始する。

インストールが終了すると完了の確認画面が表示されるので、「完了」をクリックして終了する。

日本語化パックをインストールする

インストールしたVSCodeは画面表示が英語になっている。日本語に変更したい人はこの章を読んでほしい。

まずはデスクトップに作成されたショートカットをダブルクリックしてVSCodeを起動する。

起動した際に画面の右下に以下のようなメッセージが表示される場合は、「インストールして再起動」をクリックする。

上のメッセージが表示されない場合は自分で日本語化パックを自分でインストールする。

画面左側のサイバーから「Extentions」ボタンをクリックして拡張機能の画面を開く。画面左上の検索窓に「japanese」と入力すると関連する拡張機能が表示される。

一番上に表示されている「Japanese Language Pack for Visual Studio Code」をクリックして詳細を表示する。

問題が無ければ「Install」をクリックして言語パックをインストールする。

インストールが終了したらVSCodeを再起動して言語表示が日本語になっているか確認する。

Reactのための拡張機能

次にReactの開発に役立つVSCodeの拡張機能を紹介しよう。

VSCodeの拡張機能について

VSCodeの最大の売りは豊富な拡張機能（エクステンション）だ。

拡張機能には単体のものと、いくつかの拡張機能をセットにした拡張機能パックがある。

• 単体の拡張機能
  単独の機能をもつ拡張機能。
  
  メリット ⇒ インストールされている機能を把握しやすい。
  デメリット ⇒ ひとつひとつインストールするので手間がかかる。
  
• 拡張機能パック
  複数の拡張機能をテーマごとにセットにしたもの。
  
  メリット ⇒ 選ぶのやアップデートするのが楽。
  デメリット ⇒ いらない機能までインストールされる。

なお、拡張機能は自動でアップデートするように設定することも出来る。

オススメのReact拡張機能

では、オススメの拡張機能を5つ紹介したい。

ES7 React/Redux/GraphQL/React-Native snippets

「ES7 React/Redux/GraphQL/React-Native snippets」はReactのためのスニペット（決まった役割を持つコードのまとまり）を簡単に呼び出すための拡張機能。

まず最初にインストールしておきたい、生産性アップには欠かせない拡張機能だ。

VSCode React Refactor

「VSCode React Refactor」はReactプロジェクトにJSXファイルのためのリファクタリングアクションを追加する拡張機能。

Prettier – Code formatter

「Prettier」は代表的なJavaScript・TypeScriptのためのコードフォーマッター。

JavaScriptはコーディングのルールが緩いプログラミング言語。フレキシブルにコードを記述できる反面、統一性の無い読みづらいコードを書いてしまうことも少なくない。

この拡張機能では、「改行」や「半角空ける」といったルールを自分の好みに合わせて定義することができる。

またコードの変更をセーブするたびに自動でフォーマットを適用するように設定することも可能だ。

ESLint

ESLintは広く普及しているJavaScriptのための静的なコード分析ツール。

テストの内容は細かく設定ができるうえに、チェック項目をカスタマイズすることも可能。

ESLintはパイプラインテストの1ステップとして組み込まれることも多い。

React Extention Pack

React Extention PackはVSCodeでReactの開発をおこなううえでインストールしておきたい拡張機能をセットにした拡張機能パック。