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 プレビュー

ファイルエクスプローラーには、アプリケーションの README.md Markdown ファイルがあります。これには、アプリケーションや React 全般に関する多くの優れた情報が含まれています。README を確認する良い方法は、VS Code のMarkdown プレビューを使用することです。プレビューは、現在のエディターグループ (Markdown: Open Preview ⇧⌘V (Windows、Linux では Ctrl+Shift+V)) または横の新しいエディターグループ (Markdown: Open Preview to the Side ⌘K V (Windows、Linux では Ctrl+K V)) で開くことができます。きれいなフォーマット、ヘッダーへのハイパーリンクナビゲーション、コードブロックの構文ハイライトが得られます。

構文ハイライトと括弧の照合

次に、src フォルダーを展開し、index.js ファイルを選択します。VS Code が様々なソースコード要素に対して構文ハイライトを適用し、カーソルを括弧に合わせると、対応する括弧も選択されることがわかります。

IntelliSense

index.js で入力を始めると、スマートな候補や補完が表示されます。

候補を選択して . を入力すると、IntelliSense を通じてオブジェクトの型やメソッドが表示されます。

VS Code は JavaScript のコードインテリジェンスに TypeScript 言語サービスを使用しており、Automatic Type Acquisition (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)) に移動し、[create a launch.json file] リンクを選択して launch.json デバッガー構成ファイルを作成します。[Select debugger] ドロップダウンリストから [Web App (Edge)] を選択します。これにより、プロジェクトの新しい .vscode フォルダーに launch.json ファイルが作成され、Web サイトを起動するための構成が含まれます。

この例では 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 メカニズムを活用することで、より効率的なワークフローを実現できます。これにより、VS Code から直接ライブ編集とデバッグが可能になります。詳細は、ブログ記事「VS Code から直接 React アプリをライブ編集・デバッグする」およびwebpack の Hot Module Replacement ドキュメントで確認できます。

Linting

リンターはソースコードを分析し、アプリケーションを実行する前に潜在的な問題について警告することができます。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' が定義されていますが、使用されていません」という警告を表示します。

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

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

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

これで、誤って行に複数のセミコロンがあると、エディターにエラー (赤い波線) と [問題] パネルにエラーエントリが表示されるようになります。

人気のスターターキット

このチュートリアルでは、create-react-app ジェネレーターを使用してシンプルな React アプリケーションを作成しました。最初の React アプリケーションを構築するのに役立つ素晴らしいサンプルやスターターキットがたくさんあります。

VS Code React サンプル

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

TypeScript React

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

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

Create React App サイトのTypeScript の追加で詳細をご覧ください。

Angular

Angular は別の人気のある Web フレームワークです。VS Code で動作する Angular の例を見たい場合は、Angular CLI でのデバッグレシピをご覧ください。Angular アプリケーションの作成と、JavaScript デバッガー用の launch.json ファイルの構成を順を追って説明します。

よくある質問

宣言的な JSX 内で IntelliSense を利用できますか？

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