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 アプリケーションの作成と依存関係のインストールには数分かかる場合があります。

注: 以前に create-react-app を npm install -g 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 言語サービスを使用しており、自動型取得 (ATA) と呼ばれる機能を備えています。ATA は、package.json で参照されている npm モジュール用の npm 型宣言ファイル (*.d.ts) をダウンロードします。

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

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

TypeScript 言語サービスを介して、VS Code は Go to Definition (F12) または Peek Definition (⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)) を通じてエディターで型定義情報を提供することもできます。App にカーソルを合わせ、右クリックして Peek Definition を選択します。ピークウィンドウが開き、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 ファイルを保存すると、サーバーの実行中のインスタンスがウェブページを更新し、ブラウザーを更新すると「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 App (Edge) を選択します。これにより、プロジェクトの新しい .vscode フォルダーに 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 または緑色の矢印を押してデバッガーを起動し、新しいブラウザーインスタンスを開きます。ブレークポイントが設定されているソースコードは、デバッガーがアタッチされる前に起動時に実行されるため、ウェブページをリフレッシュするまでブレークポイントに到達しません。ページをリフレッシュすると、ブレークポイントに到達するはずです。

ソースコードをステップ実行 (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: ESLint 構成を作成コマンドを使用して作成できます。

このコマンドは、ターミナルパネルで一連の質問に答えるように促します。デフォルトを受け入れると、次のような .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 サンプル

これは、シンプルな 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 フレームワークです。Angular が VS Code で動作する例を見たい場合は、Angular CLI を使用したデバッグのレシピをご覧ください。これは、Angular アプリケーションの作成と、JavaScript デバッガー用の launch.json ファイルの構成について説明しています。

よくある質問

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

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