VS Code: Flutter、React Native、Ionicのためのエディター

VS Codeとは？

VS Codeは、2015年にMicrosoftがリリースしたソースコードエディターです。Visual Studioとは異なり、VS Codeは完全なIDEではなく、拡張機能によってIDEレベルまで拡張可能な軽量エディターです。モバイル開発では、VS CodeはFlutter（Dart Code拡張機能経由）、React Native（React Native Tools拡張機能）、Ionic（内蔵のTypeScriptサポート経由）をサポートしています。

Stack Overflow Developer Survey 2025によると、VS Codeは全開発者の74%が使用しており、世界で最も人気のあるエディターとなっています。モバイル開発では、Flutter開発者の68%、React Native開発者の55%、Ionic開発者の71%がVS Codeを選択しています。主な理由は、速度、拡張性、内蔵のGitとターミナルです。

VS Codeのアーキテクチャは、オートコンプリートと診断のためのLanguage Server Protocol（LSP）、デバッグのためのDebug Adapter Protocol（DAP）、VSIX形式の拡張機能に基づいています。エディターはElectron（Chromium + Node.js）上で動作し、JavaScript/TypeScriptを使用した拡張機能の作成を可能にします。VS CodeはWindows、macOS、Linuxで利用可能です。

モバイル開発のためのVS Codeセットアップ

モバイル開発のための基本的なVS Codeセットアップには、特定のフレームワーク用の拡張機能パックのインストールが含まれます。Flutterの場合は、Flutter拡張機能で十分です（Dartは自動的にインストールされます）。React Nativeの場合はReact Native Toolsです。TypeScriptを使用するIonic/React Nativeの場合は内蔵サポートが即座に機能しますが、ESLintとPrettierのインストールが推奨されます。

// .vscode/settings.json — モバイルプロジェクトの設定
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

モバイル開発のための拡張機能：Flutter（Dart Code、5000万以上インストール）、React Native Tools（Microsoft、1000万以上）、Expo（React Native Expo用）、Thunder Client（APIテスト）、GitLens（Git可視化）、Error Lens（インラインエラー）、Material Icon Theme（ファイルアイコン）。スクリプトの迅速な実行にはCode Runnerのインストールも推奨されます。

ワークスペース構成（.code-workspace）を使用すると、関連するプロジェクトを1つのVS Codeウィンドウにグループ化できます。モノレポ（例：React Native + Backend）の場合、ワークスペースはすべてのフォルダーをその設定、拡張機能、起動構成とともに開きます。VS Codeはワークスペース内のプロジェクトを自動的に検出し、エクスプローラーに表示します。

VS CodeでのFlutter

VS CodeのFlutter拡張機能は、プロジェクト作成（Ctrl+Shift+P → Flutter: New Project）、ホットリロード（Hot Reload、Hot Restart）、UIインスペクター（Flutter Inspector）、エミュレーター/デバイス（Flutter: Select Device）、DevTools（ウィジェットツリー、タイムライン、ネットワーク、メモリー）など、完全な開発ツールセットを提供します。

// lib/main.dart — ナビゲーション付きFlutterアプリケーション
import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: 'VS Code Example',
        home: HomePage(),
        theme: ThemeData.useMaterial3(),
    ));
}

class HomePage extends StatelessWidget {
    HomePage({super.key});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Flutter + VS Code')),
            body: Center(
                child: ElevatedButton(
                    onPressed: () => debugPrint('VS Codeからこんにちは！'),
                    child: Text('ここをタップ'),
                ),
            ),
        );
    }
}

Dart DevToolsはVS Code内でエディター内のタブまたは別ウィンドウとして実行されます。DevToolsには、Flutter Inspector（レイアウトオーバーレイ付きウィジェットツリー）、パフォーマンス（FPS、フレームのbuild/rast）、CPU Profiler（flutter/scheduler/gesture）、メモリー（ヒープスナップショット、GC、割り当て）、ネットワーク（HTTPリクエスト）、ロギング（dart:developer log、stderr）が含まれます。

VS CodeでのReact Native

React Native Toolsは、React NativeアプリケーションをデバッグするためのMicrosoft公式拡張機能です。Androidエミュレーター、iOSシミュレーター、実機での起動、ブレークポイントを使用したJavaScriptデバッグ、Flipperによる要素検査、迅速な開発のためのExpoとの統合をサポートしています。

React Nativeのセットアップ：拡張機能は次のコマンドを追加します：React Native: Start Packager、Run Android、Run iOS、Attach to Packager、Debug。HermesデバッグにはReact Native Hermes Debuggerを使用します。VS CodeはFlipper統合をサポートしており、Reactotronプラグインでネットワーク、Redux/NgRx状態、async storage、console.logを監視できます。

// App.tsx — ナビゲーション付きReact Nativeコンポーネント
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
    Home: undefined;
    Details: { itemId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

ESLint + Prettierは、VS CodeでのTypeScript開発に必須の組み合わせです。ESLintはコードの意味論をチェックし（no-unused-vars、@typescript-eslint/ban-ts-comment）、Prettierはインデント、引用符、カンマを整形します。構成は.eslintrc.jsと.prettierrcに保存されます。VS Codeは保存時に自動的にESLintを実行し、エラーをインラインで強調表示します。

VS CodeでのIonic

Ionicは、Angular、React、Vueを使用したハイブリッドモバイルアプリケーションのためのフレームワークです。VS Codeは内蔵のTypeScriptサポート、Angular Language Service（.htmlテンプレート用）、Ionic Snippets拡張機能によるIonicコンポーネントのオートコンプリートを提供します。ビルドと公開にはCapacitor（Cordovaの後継）を使用します。

VS CodeでのIonic CLI統合：内蔵ターミナルでionic serve（ブラウザ開発用）、ionic build（本番用）、ionic cap sync（ネイティブプラットフォームとの同期）を実行します。Ionic Extension拡張機能は、Generate Page、Generate Component、Run on Android/iOSなどのコマンドを含むパネルを追加します。

Capacitorプラグイン — WebコードとネイティブAPIの間のブリッジです。主なプラグイン：Camera、Geolocation、Push Notifications、File System、Storage。各プラグインには統一されたJS APIと、Android（Java/Kotlin）およびiOS（Swift）向けのネイティブ実装があります。VS CodeはTypeScript定義を通じてCapacitor APIのオートコンプリートを提供します。

Launch.jsonとデバッグ

launch.json — .vscode/フォルダー内のVS Codeデバッガー構成です。モバイルプロジェクトの場合、launch.jsonは起動タイプを定義します：Flutter（dart）、React Native（reactnative）、Ionic（ブラウザデバッグ用のchromeまたはedge）。各構成には次のパラメーターが含まれます：program、args、cwd、env、platform、deviceId。

// .vscode/launch.json — FlutterとReact Nativeの構成
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter (Android)",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "deviceId": "emulator-5554",
            "args": ["--dart-define=ENV=staging"]
        },
        {
            "name": "React Native (Android)",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "sourceMaps": true
        },
        {
            "name": "Ionic (Browser)",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "webRoot": "\${workspaceFolder}"
        }
    ]
}

VS Codeでのマルチターゲットデバッグ — 複数の構成（compounds）の並行起動です。例えば、Flutter DevTools + Flutter Appでインスペクターが自動的に開きます。React NativeではAttach to Packagerを使用します。最初にMetroバンドラーが起動し、その後デバッガーが既に実行中のアプリケーションにアタッチします。

Dev Containersによるリモート開発：VS CodeはSDK（Flutter、Android、Node.js）がプリインストールされたDockerコンテナーまたはWSL2に接続します。Dev Containers拡張機能（旧Remote — Containers）は、エミュレーターとデバッガーを含む完全なツールセットを備えた分離環境でプロジェクトを起動します。