VSCode で React を開発する

Visual Studio Code（略称 VS Code）は、Microsoft が開発した無料・オープンソースのコードエディターで、さまざまなプログラミング言語をサポートし、コードハイライト、スマートコード補完、コードリファクタリング、デバッグなどの機能を提供しています。

VS Code には内蔵ターミナルがあり、エディター内で npm、yarn などのコマンドラインツールを直接実行でき、プロジェクトの構築や管理に便利です。

より充実した Vue.js 開発環境を希望する場合は、Volar と Volar for TypeScript 拡張機能をインストールできます。これらの拡張機能は Vue.js のインテリセンスを提供します。

VS Code についてまだよく知らない場合や、まだインストールしていない場合は、以下を参照してください：VSCode チュートリアル。

なぜ VS Code で React を開発するのか？

• スマート補完：JSX、React Hooks、Props などを完璧にサポートします。
• 拡張機能が豊富：ESLint、Prettier、コードスニペットなどをワンクリックでインストールでき、効率が向上します。
• 統合ターミナル：エディター内で直接npm run devなどのコマンドを実行できます。
• デバッグツール：内蔵デバッガー + React DevTools の連携で、最高の体験。
• クロスプラットフォーム：Windows、macOS、Linux を完璧にサポート。
• 無料・オープンソース：Microsoft がメンテナンスしており、コミュニティも活発です。

---

VS Code のダウンロードとインストール

• 公式サイトにアクセス：https://code.visualstudio.com/

• 大きなDownloadボタンをクリックして、自分の OS を選択します：

  • Windows：.exe インストーラーをダウンロード
  • macOS：.dmg をダウンロード（Applications にドラッグ＆ドロップ）
  • Linux：ディストリビューションに応じて .deb または .rpm を選択

• インストール手順：

  • Windows/macOS：インストーラーをダブルクリックし、そのまま Next/続行 を進めます。
  • 「PATH に追加」と「コードエディターとして登録」にチェックを入れることを推奨します（コマンドラインから開くのに便利です）。

• インストールの確認：

  • VS Code を開くと、ウェルカム画面が表示されます。
  • Windows ユーザーはコマンドラインでcode --versionと入力してテストできます。

React プロジェクトを開く

1. VS Code を開きます。

2. 方法1：メニューFile → Open Folderからプロジェクトフォルダーを選択します（例：my-first-react-app）。

3. 方法2（推奨）：ターミナルでプロジェクトディレクトリに移動し、ワンクリックで開く：

   cd my-first-react-app
   code .

   （code .コマンドは VS Code で現在のフォルダーを直接開きます）

左側のファイルエクスプローラーにプロジェクト構造（src、public など）が表示されます。

必須プラグイン（Extensions）のインストール

VS Code の強みはプラグインです。左側のアクティビティバーのExtensionsアイコン（4つの四角形）、またはショートカットキーCtrl+Shift+X（macOS: Cmd+Shift+Xを押して拡張機能マーケットを開きます。

以下のプラグインを検索してインストールします（Install をクリック）：

• ESLint（作者：Microsoft）

  • コード規範をリアルタイムでチェック。React 公式推奨。
  • インストール後、コード内のエラーが赤く表示されます。

• Prettier - Code formatter（作者：Prettier）

  • コードを自動フォーマットし、スタイルを統一します。

• ES7+ React/Redux/React-Native snippets（作者：dsznajder）

  • コードスニペットの神ツール！ショートカット入力でコンポーネントをすばやく生成できます。
  • よく使うスニペット：
    • rafce→ アロー関数コンポーネント + export default を生成
    • rfc→ 関数コンポーネントを生成
    • useState→ useState をすばやく生成

• Path Intellisense（作者：Christian Kohler）

  • インポートパスの自動補完（import のときに非常に便利です）。

• Bracket Pair Colorizer 2または内蔵の括弧の色分け（VS Code 1.60+ に内蔵済み）

  • 括弧を色で区別し、ネストされた JSX を読みやすくします。

• GitLens（任意ですが、強く推奨）

  • Git を強化し、コードのコミット履歴を表示します。

React 専用のおすすめ（任意・上級）：

• Tailwind CSS IntelliSense（Tailwind を使う場合）
• React Developer Tools（ブラウザー拡張機能はインストール済みのため、ここでは不要です）

インストール完了後、VS Code を再起動します（またはCtrl+Shift+P → Reload Window）。

VS Code を設定して React 開発体験を向上させる

按 Ctrl+Shift+P（macOS: Cmd+Shift+Pを押してコマンドパレットを開き、"Preferences: Open Settings (JSON)" と入力して開きます。settings.json。

プロジェクトのルートディレクトリに.vscode/settings.jsonを作成します（プロジェクトレベルの設定を推奨）。以下の内容を追加します：

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认使用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JSX/TSX 文件也应用 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 显示行号、缩进指南
  "editor.rulers": [80],
  "editor.guides.indentation": true
}

保存後に有効になります。今後はコードを保存するたびに、Prettier が自動フォーマットし、ESLint が一般的な問題を自動修正します。

検証：わざと不規範なコード（セミコロンがないなど）を書き、保存後に自動修正されるか確認します。

実際に React コードを書く：ゼロからコンポーネントを作成する

左側のエクスプローラーで、srcフォルダーを右クリック → New Folder → 作成componentsフォルダー。

を右クリックcomponents→ New File → 作成Greeting.jsx。

コードスニペットを使ってコンポーネントをすばやく生成します：

• と入力しrafce（react arrow function component export）
• Tab キーを押すと、テンプレートが自動生成されます：

import React from 'react'

const Greeting = () => {
  return (
    <div>Greeting</div>
  )
}

export default Greeting

完全なコンポーネントに変更します（状態と Props のデモ）：

にsrc/App.jsxでインポートして使用します：

すべてのファイルを保存（Ctrl+S）し、ブラウザーに切り替えると、ホットアップデートで新しいコンポーネントが自動的に表示されます！

体験のポイント：

• と入力するとuseState、スマート補完がヒントを表示します。
• インポートパス./components/Greeting.jsxを入力すると、Path Intellisense が自動補完します。
• 保存後、Prettier がインデントを自動フォーマットします。
• エラーがある場合、ESLint が問題パネル（下部）で赤く表示します。

統合ターミナルとデバッグのコツ

内蔵ターミナル：メニュー Terminal → New Terminal、またはCtrl+`（バッククォート）。

• を直接実行するとpnpm dev、サーバーの出力がここに表示されます。

React コードのデバッグ：

1. ブラウザー拡張機能React Developer Toolsをインストールします（まだインストールしていない場合）。
2. VS Code で F5 を押してデバッグを開始します（事前に launch.json の設定が必要ですが、入門段階ではまずブラウザーの DevTools を使用します）。
3. ブラウザーで F12 → Components タブを開き、Greeting コンポーネントの Props と state を確認します。

よく使うショートカットキー（必ず覚えましょう）：

• Ctrl + S：保存
• Ctrl + /：行のコメント化
• Alt + ↑/↓：行の移動
• Ctrl + D：同じ単語を複数カーソルで選択
• Ctrl + Shift + P：コマンドパレット（万能）

小演習：カードコンポーネントを構築する

1. を作成しcomponents/Card.jsx、rafceを使って生成します。
2. title、content、imageUrl の3つの Props を受け取るカードコンポーネントを実装します。
3. App.jsx で2回使用し、異なる内容を表示します。
4. インラインスタイルを追加して美化しましょう。

完了すると、あなたのページには複数の美しいカードが表示されます！

ステップ 1：Card.jsx コンポーネントを作成する

1. にsrcフォルダー内で、右クリック → New Folder → 作成componentsフォルダー（まだない場合）。

2. 右クリックcomponentsフォルダー → New File → 作成Card.jsx。

3. にCard.jsxに入力rafce（Tabキーを押すとテンプレートが自動生成されます）、その後以下のコードに修正します：

説明：

• 分割代入（Props）を使用：{ title, content, imageUrl }。
• インラインスタイルの美化：角丸、影、画像のレスポンシブ対応、余白などにより、カードを現代的でプロフェッショナルに見せます。
• 条件付き画像レンダリング：もしimageUrlがない場合は、画像を表示しません（&&を使用して実装）。

ステップ2：App.jsxを修正し、Cardコンポーネントを2回使用

開くsrc/App.jsx、内容を以下のコードに置き換えます（元の構造の一部を保持し、デフォルトのカウンターを削除して、カード表示に焦点を当てます）：

説明：

• インポートCardコンポーネント。
• 使用<Card />を2回行い、異なるPropsを渡します。
• Appの外側のdivはflexレイアウトを使用し、複数のカードを横に並べます（レスポンシブな折り返し）。
• 画像URLには公式公開画像（Reactの小さなアイコンとViteのロゴ）を使用しており、ローカルリソースは不要で、オンラインで直接読み込まれます。

ステップ3：実行して結果を確認

1. すべてのファイルを保存します（Ctrl+S）。
2. 開発サーバーが実行されていない場合は、VS Codeのターミナルで次を実行します：

   npm run dev

3. ブラウザで http://localhost:5173 を開くと、2枚（またはそれ以上）の美しいカードが中央に配置され、画像・タイトル・コンテンツ付きで表示されます！

効果プレビュー（テキスト説明）：

• カードには影と角丸があり、Material Designスタイルのように見えます。
• 画像は上部で幅いっぱいに表示され、テキスト部分には快適な余白があります。
• 背景は薄いグレー、カードは白で、視覚的に明確です。