Flutter開発入門 VSCodeを使った開発

Flutter
2024.08.24

はじめに

　本記事ではVScodeを使ってFlutter開発を行う方法について解説します。まだVSCodeをインストールしていない方はこちらからインストールしてください。

https://azure.microsoft.com/ja-jp/products/visual-studio-code
azure.microsoft.com

なぜVSCodeか

　Visual Studio Code (VSCode)は、その拡張性と軽量な設計により、Flutter開発に最適な環境を提供します。多様なプラグインが利用可能であり、Dart言語やFlutterフレームワーク専用の拡張機能を通じて、コーディングの効率化が図られます。また、VSCodeはクロスプラットフォーム対応しており、Windows、macOS、Linuxを問わず利用できるため、さまざまな開発環境に柔軟に対応します。これにより、一貫した開発体験が可能となり、開発者の生産性が大幅に向上します。

環境設定

Flutter開発環境をVisual Studio Code (VSCode)で構築するためのステップは以下の通りです

  1. Flutter SDKのインストール： 公式のFlutterウェブサイトからFlutter SDKをダウンロードし、システムにインストールします。Windowsの場合は環境変数にFlutterのパスを追加してください。
  2. VSCodeのセットアップ： VSCodeをインストール後、拡張機能マーケットプレイスから「Dart」と「Flutter」の拡張機能をインストールします。これにより、自動補完、デバッグ支援、コード解析などの機能が利用可能になります。
  3. エミュレータの設定： Android Studioをインストールし、AVD Managerを通じてAndroidエミュレータをセットアップするか、iOSの場合はXcodeを使用してiOSシミュレータを設定します。

プロジェクト作成と実行

Visual Studio Code (VSCode)でFlutterプロジェクトを作成し、実行する方法を以下に解説します

  1. プロジェクトの作成： VSCodeを開き、コマンドパレット（Ctrl+Shift+PまたはCmd+Shift+P）を使用して「Flutter: New Project」と入力します。選択肢がいくつか出てきますが、ここでは「Application」を選択しましょう。プロジェクト名と保存先を指定することで新しいFlutterプロジェクトが作成されます。
  2. エミュレータの起動： VSCodeでエミュレータを起動するには、ステータスバー(VSCodeの下部)にある「No Device」をクリックして利用可能なエミュレータを選択します。
  3. アプリケーションの実行： エミュレータが起動したら、F5キーを押すか、デバッグパネルから「Start Debugging」を選択してアプリケーションを実行します。ホットリロードが有効になっているため、コードの変更がすぐにエミュレータに反映される状態になっています。

コーディングとデバッグ

　VSCodeでは効率的にコーディングとデバッグが可能です。

  • コーディング
    • 自動補完とシンタックスハイライト: VSCodeにインストールしたDartとFlutterの拡張機能が、コーディングを支援します。自動補完機能を利用して迅速にコードを記述し、エラーを減らします。
    • コードスニペット: よく使用するコードのスニペットを活用して、開発時間を短縮します。
  • デバッグ
    • ブレークポイントの設定: VSCodeでは、コードの任意の行にブレークポイントを設定することができます。これにより、プログラムの実行を一時停止し、変数の値を確認することができます。
    • ステップ実行: ブレークポイントで停止した後、一行ずつコードを実行して、問題の原因を特定します。
    • コンソールログの利用: デバッグ中にコンソールにログを出力して、プログラムの動作状況を確認します。

　ここではいくつか使いやすい拡張機能を紹介します。

  • Awesome Flutter Snippets: Flutter開発で頻繁に使用されるコードスニペットを提供し、開発速度を向上させます。
  • Flutter Widget Snippets: より具体的なFlutterウィジェットのコードスニペットを簡単に挿入できる機能を提供。
  • Pubspec Assist: Flutterプロジェクトのpubspec.yamlファイルを編集する際に便利な機能を提供し、依存関係の追加や更新を簡単に行えます。
  • Flutter Intl: 国際化（i18n）をサポートする拡張機能で、アプリの多言語対応を容易に行えます。

パッケージと依存関係の管理

　Flutterアプリケーションのパッケージと依存関係の管理を行う方法について解説します。Flutterのパッケージはpubspec.yamlというファイルで管理されています。試しにhttpパッケージを追加する方法を示します。

  1. VSCode上でpubspec.yamlファイルを開きます。
  2. 初めはコメントがたくさん入っているので見づらいかもしれませんが、dependenciesという項目を見つけて以下のようにhttpパッケージを追加しましょう
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.2
  1. VSCode上でターミナルを開き、以下コマンドを実行するとパッケージがインストールされます。
flutter pub get

ビルドとデプロイ

　Visual Studio Code (VSCode)でFlutterアプリケーションのビルドとデプロイを行う方法を解説します。

  • ビルド方法
    • コマンドパレットを使用: VSCodeでCtrl+Shift+P（またはCmd+Shift+P）を押し、「Flutter: Build APK」や「Flutter: Build Appbundle」を選択してビルドを実行します。
    • ターミナルを使用: ターミナルから直接flutter build apkやflutter build iosなどのコマンドを使用してビルドを行います。
  • デプロイ方法
    • Androidへのデプロイ: ビルドしたAPKファイルやAppbundleをAndroidデバイスにインストールするか、Google Play Consoleを通じて公開します。
    • iOSへのデプロイ: Xcodeを利用してビルドしたアプリをiOSデバイスにインストールするか、App Store Connectを通じて公開します。

　実際の細かい使い方は以下を参照してください

Build and release an Android app
How to prepare for and release an Android app to the Play store.
docs.flutter.dev

まとめ

　この記事では、Visual Studio Code (VSCode) を使用して Flutter 開発を行うための全体的なガイドをまとめました。VSCodeの拡張機能を活用し、Flutter SDKの設定からプロジェクトの作成、アプリケーションの実行、さらにデバッグ方法まで詳しく説明しています。

コメント