VS CodeとXcodeでFlutterの開発環境を構築してみた

高橋雄大

2022.04.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部IoT事業部の高橋雄大です。

私が所属しているIoT事業部では、度々モバイルアプリの開発を必要とする案件を受けることがあります。その際、部内にはモバイルエンジニアがいないため、他の部署と連携して取り組むことになります。しかし最近では、社内でモバイルエンジニアのリソースが不足しているため、メンバーの確保が難しくなっています。そこで今回、Flutterによるクロスプラットフォーム開発の学習を初めてみようと思いました。

クロスプラットフォーム開発では、他にもReact NativeやCordova、Xamarinなどのフレームワークがありますが、学習コストや将来性（コミュニティの成長）、現在のサポート状況などからFlutterを選択しています。

Googleトレンド Flutter

資料: Googleトレンド

本記事のゴール

VS Codeで編集してXcodeのiOS Simulatorでリアルタイムにプレビューできる開発環境を構築します。

Flutter開発環境

環境情報

項目	内容
OS	macOS Monterey 12.3 (21E230)
Visual Studio Code	1.66.0
Xcode	13.3 (13E113)
Flutter	2.10.4
Dart	2.16.2

Flutter SDKをインストール

Flutter SDKの最新版をこちらからダウンロードします。

任意の場所にダウンロードしたFlutter SDKのZIPファイルを解凍します。

cd ~/
unzip ~/Downloads/flutter_macos_2.10.4-stable.zip

PATHを通します。zshの場合は次のとおりです。

echo 'export PATH="$HOME/flutter/bin:$PATH"' >> ~/.zprofile
source ~/.zprofile

PATHが通っていることを確認します。

flutter --version

バージョン情報が出力されればOKです。

Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (7 days ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

次のコマンドでインストールが必要なツールを確認します。

flutter doctor

全てのツールが導入済みの場合は次のように表示されます。今回は「Flutter」「Xcode」「VS Code」を使います。チェックが入っていない場合は次のステップで導入します。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.66.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

Xcodeをインストール

Xcodeがインストールされていない場合は、App Storeからダウンロードしてインストールします。Xcodeと一緒にiOS Simulatorもインストールされます。

Xcodeインストール

インストールされたバージョンのXcodeを使用するようにXcodeコマンドラインツールをセットアップします。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

次のコマンドでiOS Simulatorを開きます。

open -a Simulator

シミュレートするデバイスを選択します。

iOS Simulator

FlutterアプリをiOSデバイスにデプロイして検証する場合は、サードパーティーツールのCocoaPodsをインストールします。今回はこの手順をスキップします。

VS Codeをセットアップ

最新版のVS Codeをこちらからダウンロードしてインストールします。

FlutterプラグインとDartプラグインをインストールして有効化します。

VS Code Flutterプラグイン

動作確認

サンプルアプリを作成してVS Codeで開きます。

flutter create flutter_sample_app # Flutterアプリを作成
code flutter_sample_app # VS Codeで開く

デバイスを選択してデバッグを実行します。

Flutterデバッグ

コードの編集結果がリアルタイムでシミュレーターに反映されます。

Flutter iOS Simulator

まとめ

Flutterで用いられているDartという言語は、JavaScriptの問題点を改善した後継言語のため、JavaScriptやTypeScriptによる開発経験がある人はすぐに使いこなせると思います。私は普段サーバーサイドの開発をしていますが、たまにフロントエンドの開発でReactやAngularも触っていたため、Flutterアプリの開発にもスムーズに移行することが出来ました。

国内外でFlutterを用いた開発の需要が高まってきているので、今後も継続して学習を続けていこうと思います。