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

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

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

cd my-app
code .

Markdown プレビュー

ファイルエクスプローラーに表示されるファイルの 1 つは、アプリケーションの README.md Markdown ファイルです。これには、アプリケーションと 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 で入力を開始すると、スマートな提案または補完が表示されます。

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

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 内に HelloWorld というコンポーネントを作成し、「Hello, world!」という H1 ヘッダーを含め、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) を選択します。これにより、Web サイトを起動するための構成を含む launch.json ファイルがプロジェクトの新しい .vscode フォルダーに作成されます。

この例では、url のポートを 8080 から 3000 に変更するという 1 つの変更を行う必要があります。 launch.json は次のようになります。

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

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

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

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

ライブ編集とデバッグ

webpack を React アプリケーションと一緒に使用している場合は、webpack の HMR メカニズムを利用して、より効率的なワークフローを実現できます。これにより、VS Code から直接ライブ編集とデバッグを行うことができます。詳細については、VS Code から直接 React アプリケーションをライブ編集およびデバッグする ブログ記事と webpack Hot Module Replacement ドキュメント を参照してください。

Lint

リンターはソースコードを分析し、アプリケーションを実行する前に潜在的な問題について警告できます。 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 は開いているファイルを分析し、「App」が定義されているが使用されていないことに関する警告を index.js に表示するようになります。

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

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

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

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

一般的なスターターキット

このチュートリアルでは、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 は、もう 1 つの一般的な Web フレームワークです。 VS Code での Angular の動作例を確認したい場合は、Angular CLI でのデバッグ レシピを確認してください。 Angular アプリケーションの作成と、JavaScript デバッガーの launch.json ファイルの構成について説明します。

よくある質問

宣言型 JSX 内で IntelliSense を取得できますか?

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