Visual Studio Code で React を使用する

Reactは、ユーザーインターフェースを構築するためにFacebookによって開発された、人気の高いJavaScriptライブラリです。Visual Studio Codeエディターは、すぐに使えるReact.jsのインテリセンス（IntelliSense）とコードナビゲーションを標準でサポートしています。

React へようこそ

このチュートリアルでは、create-react-appのジェネレーターを使用します。ジェネレーターを使用し、Reactアプリケーションサーバーを実行するには、Node.js JavaScriptランタイムとnpm（Node.jsパッケージマネージャー）がインストールされている必要があります。npmはNode.jsに含まれており、Node.jsのダウンロードページからダウンロードしてインストールできます。

ヒント: マシンにNode.jsとnpmが正しくインストールされているかテストするには、ターミナルまたはコマンドプロンプトでnode --versionおよびnpm --versionを入力します。

以下を入力することで、新しいReactアプリケーションを作成できます。

npx create-react-app my-app

ここで、my-appはアプリケーションのフォルダー名です。Reactアプリケーションの作成と依存関係のインストールには、数分かかる場合があります。

注: 以前にnpm install -g create-react-appを実行してグローバルにcreate-react-appをインストールしていた場合は、npxが常に最新バージョンを使用するように、npm uninstall -g create-react-appを実行してパッケージをアンインストールすることをお勧めします。

作成した新しいフォルダーに移動し、npm startを入力してWebサーバーを起動し、ブラウザーでアプリケーションを開いて、Reactアプリケーションをすばやく実行してみましょう。

cd my-app
npm start

ブラウザーでhttps://:3000を開くと、Reactのロゴと"Learn React"へのリンクが表示されるはずです。VS Codeでアプリケーションを確認している間、Webサーバーは起動したままにしておきます。

VS CodeでReactアプリケーションを開くには、別のターミナルまたはコマンドプロンプトのウィンドウを開き、my-appフォルダーに移動してcode .と入力します。

cd my-app
code .

Markdownプレビュー

エクスプローラーに表示されるファイルの中に、アプリケーションのMarkdownファイルであるREADME.mdがあります。これには、アプリケーション全般やReactに関する多くの有益な情報が含まれています。READMEを確認するには、VS CodeのMarkdownプレビューを使用するのが便利です。プレビューは、現在のエディターグループ（Markdown: プレビューを開く ⇧⌘V (Windows、Linux Ctrl+Shift+V)）または、横の新しいエディターグループ（Markdown: プレビューを横に開く ⌘K V (Windows、Linux Ctrl+K V)）のいずれかで開くことができます。きれいなフォーマット、ヘッダーへのハイパーリンク移動、およびコードブロック内での構文ハイライトが適用されます。

構文ハイライトとブラケットの照合

次に、srcフォルダーを展開し、index.jsファイルを選択します。VS Codeでは、さまざまなソースコードの要素に対して構文ハイライトが適用されること、また括弧にカーソルを合わせると対応する括弧も選択されることに気付くでしょう。

IntelliSense

index.jsで入力を開始すると、スマートな提案（補完）が表示されます。

提案を選択して.を入力すると、インテリセンスを介してオブジェクトの型とメソッドが表示されます。

VS Codeは、JavaScriptのコードインテリジェンスにTypeScript言語サービスを使用しており、自動型取得（ATA）と呼ばれる機能を備えています。ATAは、package.jsonで参照されているnpmモジュールのnpm型定義ファイル（*.d.ts）をプルダウンします。

メソッドを選択すると、パラメーターのヘルプも表示されます。

定義へ移動、定義のピーク

TypeScript言語サービスを通じて、VS Codeはエディター内で定義へ移動（F12）または定義をここに表示（⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)）による型定義情報を提供することもできます。Appの上にカーソルを置き、右クリックして定義をここに表示を選択します。「ここに表示」ウィンドウが開き、App.js内のAppの定義が表示されます。

ピーク ウィンドウを閉じるには、Escape キーを押します。

Hello World

サンプルアプリケーションを「Hello World!」にアップデートしてみましょう。index.js内に、"Hello, world!"というH1ヘッダーを含むHelloWorldというコンポーネントを作成し、root.render内の<App />タグを<HelloWorld />に置き換えます。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

function HelloWorld() {
  return <h1 className="greeting">Hello, world!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.jsファイルを保存すると、起動中のサーバーインスタンスがWebページを更新し、ブラウザーをリフレッシュしたときに「Hello World!」と表示されます。

ヒント: VS Code は自動保存をサポートしており、既定では遅延後にファイルを保存します。自動保存をオンにするには、**ファイル** メニューの **自動保存** オプションを確認するか、files.autoSave ユーザー 設定を直接構成します。

React のデバッグ

クライアント側のReactコードをデバッグするために、組み込みのJavaScriptデバッガーを使用します。

注: このチュートリアルでは、Edgeブラウザーがインストールされていることを前提としています。Chromeを使用してデバッグしたい場合は、起動用のtypeをchromeに置き換えてください。また、Firefoxブラウザー用のデバッガーもあります。

ブレークポイントを設定する

index.jsにブレークポイントを設定するには、行番号の左側にあるマージンをクリックします。これにより、赤い円として表示されるブレークポイントが設定されます。

デバッガーの構成

最初にデバッガーを構成する必要があります。これを行うには、実行とデバッグビュー（⇧⌘D (Windows、Linux Ctrl+Shift+D)）に移動し、launch.json ファイルを作成しますというリンクを選択して、launch.jsonデバッガー構成ファイルを作成します。デバッガーの選択ドロップダウンリストからWeb アプリ (Edge)を選択します。これにより、プロジェクト内の新しい.vscodeフォルダーに、Webサイトを起動するための構成を含むlaunch.jsonファイルが作成されます。

今回の例では、1点変更を加える必要があります。urlのポートを8080から3000に変更します。launch.jsonは以下のようになります。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

開発サーバーが起動していることを確認します（npm start）。次に、F5キーまたは緑色の矢印を押してデバッガーを起動し、新しいブラウザーのインスタンスを開きます。ブレークポイントが設定されているソースコードは、デバッガーがアタッチされる前の起動時に実行されるため、Webページを更新するまではブレークポイントで停止しません。ページを更新すると、ブレークポイントで停止するはずです。

ソースコードをステップ実行（F10）したり、HelloWorldなどの変数の中身を検証したり、クライアント側のReactアプリケーションのコールスタックを確認したりできます。

デバッガーおよび利用可能なオプションの詳細については、ブラウザーのデバッグに関するドキュメントを確認してください。

ライブ編集とデバッグ

Reactアプリと一緒にwebpackを使用している場合、webpackのHMR（Hot Module Replacement）機能を利用することで、VS Codeから直接ライブ編集やデバッグを行うことができ、ワークフローをより効率化できます。詳細については、こちらのブログ記事「Live edit and debug your React apps directly from VS Code」や、webpackのHot Module Replacementドキュメントを参照してください。

Linting

リンター（Linter）はソースコードを分析し、アプリケーションを実行する前に潜在的な問題を警告してくれます。VS Codeに組み込まれているJavaScript言語サービスは、デフォルトで構文エラーのチェックをサポートしています。これは問題パネル（表示 > 問題 ⇧⌘M (Windows、Linux Ctrl+Shift+M)）で確認できます。

Reactのソースコードにあえて小さなエラーを記述してみると、赤いうねうねした波線が表示され、問題パネルにエラーが表示されるのを確認できます。

リンターは、より洗練された分析を提供し、コーディング規約を強制したり、アンチパターンを検出したりできます。人気のあるJavaScript用リンターはESLintです。ESLintをESLint VS Code拡張機能と組み合わせることで、優れた組み込みのリンティング環境が提供されます。

まず、ESLintコマンドラインツールをインストールします。

npm install -g eslint

次に、拡張機能ビューに移動して「eslint」と入力し、ESLint拡張機能をインストールします。

ESLint拡張機能をインストールし、VS Codeを再読み込みしたら、ESLint構成ファイルである.eslintrc.jsを作成します。コマンド パレット（⇧⌘P (Windows、Linux Ctrl+Shift+P)）から拡張機能のESLint: Create ESLint configurationコマンドを使用して作成できます。

このコマンドを実行すると、ターミナルパネルでいくつかの質問に答えるよう求められます。デフォルト値を選択すると、プロジェクトのルートに以下のような.eslintrc.jsファイルが作成されます。

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
};

これで、ESLintが開いているファイルを分析し、index.jsで'App'が定義されているが一度も使用されていないという警告が表示されるようになります。

.eslintrc.jsファイルでESLintのルールを変更できます。

余分なセミコロンに対するエラーのルールを追加してみましょう。

 "rules": {
        "no-extra-semi":"error"
    }

これで、誤って行に複数のセミコロンを記述した場合、エディターにエラー（赤いうねうねした波線）が表示され、問題パネルにエラーのエントリーが追加されます。

人気のスターター キット

このチュートリアルでは、create-react-appジェネレーターを使用して、シンプルなReactアプリケーションを作成しました。初めてのReactアプリケーション構築に役立つ、優れたサンプルやスターターキットが他にも多数用意されています。

VS Code React サンプル

これはサンプルのReactアプリケーションで、シンプルなTODOアプリケーションを作成し、Node.jsのExpressサーバーのソースコードを含んでいます。また、Babel ES6トランスパイラーを使用し、その後webpackを使ってサイトのアセットをバンドルする方法も示しています。

TypeScript React

TypeScriptとReactに関心がある場合は、TypeScriptテンプレートを使用するように指定することで、create-react-appアプリケーションのTypeScriptバージョンを作成することもできます。

npx create-react-app my-app --template typescript

詳細は、Create React AppサイトのAdding TypeScriptを参照してください。

Angular

Angularも、もう一つの人気のあるWebフレームワークです。VS CodeでAngularを使用する例をご覧になりたい場合は、Debugging with Angular CLIレシピを確認してください。このレシピでは、Angularアプリケーションの作成手順と、JavaScriptデバッガー用のlaunch.jsonファイルの構成手順について説明しています。

よくある質問

宣言的なJSX内でインテリセンスを利用できますか？

はい。たとえば、create-react-appプロジェクトのApp.jsファイルを開くと、render()メソッド内のReact JSXでインテリセンスが機能するのを確認できます。