初心者と学ぶFlutter第1回：環境構築ガイド(Mac編)

はじめに
Flutterとは？
1. なぜFlutterを使うのか？
Flutterの環境構築
Flutterプロジェクトの作成
まとめ

はじめに

「Flutterって聞いたことはあるけど、どうやって始めたらいいの？」そんな疑問を持つ方も多いはずです。実は、私自身もFlutterを改めてしっかり勉強し直したいと思っています。そこで、この記事では、私と一緒にFlutterの環境構築をゼロから始めてみませんか？Flutterのインストールから初めてのプロジェクト作成まで、一つひとつ丁寧に説明していきます。プログラミングが初めての方でも、安心して進められる内容にしていますので、一緒にFlutterの世界に飛び込んでみましょう！

Flutterとは？

まず最初に、Flutterについて簡単に説明します。
FlutterはGoogleが開発したUIフレームワークで、1つのコードベースでiOS、Android、Webなど、複数のプラットフォームに対応したアプリを開発できるツールです。
特徴的なのは、ネイティブアプリに近いパフォーマンスを持ちながら、クロスプラットフォーム開発を可能にする点です。

なぜFlutterを使うのか？

クロスプラットフォーム開発が可能なため、同じコードを使ってiOS、Android、Web、さらにはデスクトップアプリも作れる。
豊富なウィジェットが用意されており、簡単に美しいUIを作成できる。
高パフォーマンスのアプリを、少ない手間で作成可能。
コミュニティが活発で、ドキュメントも充実しているため学びやすい。

Flutterの環境構築

今回は下記サイトに沿って環境構築を行っていきます。

Start building Flutter iOS apps on macOS

Configure your system to develop Flutter mobile apps on macOS and iOS.

Flutter SDKのダウンロード

公式のFlutterサイトからFlutter SDKをダウンロードします。

Flutter公式サイトにアクセスし、「macOS版」Flutter SDKをダウンロードします。
私はAppleSilliconなのでAppleSillicon版をダウンロードしました。
ダウンロードされた.zipファイルを解凍します。
解凍したFlutter SDKを適当な場所（例: /Users/あなたのユーザー名/flutter）に移動します。

PATH環境変数の設定

Flutterコマンドをどのディレクトリからでも実行できるように、PATHを設定します。

ターミナルを開き、以下のコマンドを実行してPATHにFlutterのbinディレクトリを追加します。.bashrcや.zshrcなど、シェルの設定ファイルに以下の一行を追加してください。

Bash

export PATH="$PATH:[Flutter SDKのパス]/flutter/bin"
# 例: export PATH="$PATH:/Users/your-username/flutter/bin"

設定ファイルを読み込むために、ターミナルで以下のコマンドを実行します（シェルによって異なります）。

Bash

source ~/.zshrc # zshを使用している場合<br>source ~/.bashrc # bashを使用している場合

ターミナルで以下のコマンドを実行し、Flutterが正しくインストールされているか確認します。
画像のようにバージョン(今回は3.24.2)が出ていればOKです。

Bash

flutter --version

Xcodeのインストール

iOS向けの開発には、Xcodeが必要です。Xcodeには、iOSシミュレーターやビルドツールが含まれています。

Mac App StoreからXcodeをインストールします。
Xcodeのインストールが完了したら、以下のコマンドをターミナルで実行し、Xcodeの開発ツールをインストールします。

Bash

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

次に、Xcodeのライセンスに同意します。以下のコマンドを実行して同意してください。

Bash

sudo xcodebuild -runFirstLaunch

iOSシミュレーターの起動

XcodeにはiOSシミュレーターが付属しています。これを使って実際のデバイスを持っていなくてもiOSアプリの動作を確認することができます。

Xcodeを開き、メニューから「Xcode」→「Open Developer Tool」→「Simulator」を選択します。
シミュレーターが起動し、仮想デバイス上でiOSアプリをテストできます。

コマンドラインツールの確認

以下のコマンドをターミナルで実行して、Xcodeのコマンドラインツールが正しくインストールされているか確認します。
すでにインストールされてるよと出てきたら問題ないです。

Bash

xcode-select --install

CocoaPodsのインストール

FlutterアプリでiOSの依存関係を管理するために、CocoaPodsというツールが必要です。以下のコマンドでインストールしましょう。

※もしgem installができない場合はRubyの環境設定をしないといけません

Bash

sudo gem install cocoapods

Flutter Doctorで環境をチェック

Flutter SDK、Xcode、CocoaPodsのインストールが完了したら、Flutter Doctorを使って環境が正しく整っているか確認します。Flutter Doctorは、必要なツールがすべて揃っているかどうかをチェックし、セットアップに問題がないか確認できます。

ターミナルでflutter doctorのコマンドを実行します。
Flutter Doctorは、システムの状況を確認し、問題があればそれを教えてくれます。すべての項目に「✓」が表示されれば、環境は正常です。
必要なツールが不足していたり、エラーが表示された場合、その指示に従って不足分をインストールしてください。

今回ios環境のみの開発でAndroid環境はセッテイングしていないのでAndroid項目が×でも問題ありません。

Flutterプロジェクトの作成

すべての準備が整ったら、いよいよFlutterプロジェクトを作成してみましょう。

ターミナルやコマンドプロンプトで、以下のコマンドを実行します。
これにより、my_first_appという新しいFlutterプロジェクトが作成されます。

Bash

flutter create my_first_app

作成したプロジェクトのディレクトリに移動します。

Bash

cd my_first_app

エミュレーターやシミュレーターが起動している状態で、以下のコマンドを実行してアプリを起動します。

Bash

flutter run

これで、初めてのFlutterアプリがエミュレーター上で動作します。

まとめ

これで、Flutter環境の構築が完了しました！
今回紹介した手順を踏めば、Flutterのインストールからプロジェクト作成、実行までスムーズに進められるはずです。Flutterは、初めての方でも使いやすいフレームワークですが、環境構築に少し手間がかかることもあります。しかし、一度セットアップしてしまえば、複数のプラットフォーム向けにアプリを開発できる強力なツールです。ぜひ、この機会にFlutterを使って、オリジナルのアプリを作ってみてください！

次回は、Flutterの基本的なウィジェットについて学びながら、簡単なUIを作成していきます。引き続き、一緒にFlutterを学んでいきましょう！

第二回はこちら