第2回：開発環境を整えよう - あなたのPCを"アプリ工場"にする準備

はじめに - 前回の振り返り
開発環境ってなに? - 工場に例えると分かりやすい
- 具体的に必要な「道具」
- 作業時間の目安
準備するもの
ステップ1: Flutter SDKのインストール
ステップ2: Android Studioのインストール
ステップ3: Xcode のインストール(Macのみ)
- App Storeからインストール
- コマンドラインツールの設定
ステップ4: Flutter Doctor で確認
ステップ5: 初めてのアプリを動かしてみよう!
よくあるエラーと対処法
まとめ:第2回のポイント

はじめに - 前回の振り返り

前回は、アプリ開発の全体像を「家を建てる」ことに例えて説明しました。

アプリ開発の4つのステップ:

開発環境を整える ← 今回はココ!
デベロッパー登録をする
プログラミングする
審査を受けて公開する

そして、Flutterという道具を使えば、1つのプログラムでiOSとAndroid両方のアプリが作れることをお伝えしました。

今回は、いよいよ実践編です。あなたのパソコンを「アプリが作れる状態」にしていきます。

「環境構築」と聞くと難しそうに感じるかもしれません。でも安心してください。この記事では、クリックする場所、入力する内容を、一つずつ丁寧に説明していきます。

料理で例えるなら、「材料を揃えて、調理器具を準備する」段階です。ここさえ乗り越えれば、後は料理を作るだけ。一緒に進めていきましょう!

📕おすすめ書籍

1.ゼロから学ぶFlutterアプリ開発

著者: 藤川慶
出版社: 技術評論社
おすすめポイント: プログラミング初心者やエンジニア1〜2年目レベルの方を対象に、アプリ開発やプログラミングを始めるきっかけとなる1冊です。

ゼロから学ぶFlutterアプリ開発

2.Android Studioではじめる簡単Androidアプリ開発

著者: 有山圭二
出版社: 技術評論社
おすすめポイント: Android Studioの基本操作が分かる。UIの見方、デバッグ方法など、実務で使える知識が満載。

［改訂版］Android Studioではじめる簡単Androidアプリ開発

3.Visual Studio Code実践ガイド

著者: 森下篤
出版社: マイナビ出版
おすすめポイント: VS Codeを使いたい人向け。Android Studioより軽量で使いやすいエディタの選択肢。

改訂新版 Visual Studio Code実践ガイド —— 定番コードエディタを使い倒すテクニック

開発環境ってなに? - 工場に例えると分かりやすい

「開発環境」という言葉、なんだか難しそうですよね。でも、実はシンプルな概念です。

開発環境 = アプリを作るための工場

と考えてください。

普通の工場には、製品を作るための機械や道具が揃っていますよね。アプリを作る「工場」にも、専用の「機械」や「道具」が必要なんです。

具体的に必要な「道具」

今回、あなたのパソコンに導入する道具は主に3つです:

1. Flutter SDK(フラッターSDK) これが「アプリを作るメインの機械」です。プログラムを書くと、それをiPhoneやAndroidのアプリに変換してくれる、いわば「製造ライン」のような存在です。

2. Android Studio(アンドロイドスタジオ) これは「作業台」のようなものです。プログラムを書いたり、実際にアプリを動かして確認したりする場所です。Android用の機能も含まれています。

3. Xcode(エックスコード) ※Macのみ Macを使っている方は、これも必要です。iOS(iPhone)アプリを動かすための専用の作業台です。

これらは全て無料でダウンロードできます。Appleやコードが開発している公式の道具なので、安心して使えます。

作業時間の目安

全体で2〜3時間くらいかかります。

「えっ、そんなに?」と思ったかもしれませんが、これは主に「ダウンロード時間」です。ファイルのサイズが大きいので、インターネット経由で取得するのに時間がかかるんです。

実際にあなたが操作する時間は、30分程度です。ダウンロード中は、コーヒーでも飲みながら待っていてOKです。

準備するもの

作業を始める前に、以下を確認しましょう。

パソコンのスペック確認

必要なスペック:

メモリ(RAM): 8GB以上(推奨16GB)
ストレージ空き容量: 20GB以上
OS: Windows 10以降、またはmacOS 12(Monterey)以降

自分のパソコンのスペックを確認する方法:

Windowsの場合: 「設定」→「システム」→「バージョン情報」で確認できます

Macの場合: 画面左上のAppleマーク→「このMacについて」で確認できます

インターネット環境

安定したインターネット接続が必要です。合計で5〜10GBのファイルをダウンロードします。

Wi-Fi環境での作業をおすすめします。スマホのテザリングだと、通信量を大きく消費するので注意してください。

時間的余裕

途中で中断すると、やり直しになることもあります。できれば、まとまった時間(3〜4時間)を確保してください。

週末の午前中などが理想的です。

ステップ1: Flutter SDKのインストール

それでは、実際に作業を始めていきましょう。最初は「Flutter SDK」のインストールです。

Flutterの公式サイトにアクセス

ブラウザ(ChromeやSafariなど)を開いて、以下にアクセスします:

flutterサイト

サイトが英語で表示されますが、心配いりません。必要な部分だけ説明しますので、その通りに進めてください。

ダウンロード

トップページの「Get started」(始める)ボタンをクリック
あなたのOSを選択(Windows、macOS、Linuxから選ぶ)
「Download」(ダウンロード)ボタンをクリック

すると、「flutter_xxx.zip」のような名前のファイルがダウンロードされます。サイズは約1GBあるので、数分〜10分程度かかります。

解凍と配置

ダウンロードしたZIPファイルを解凍します。

Windowsの場合:

ダウンロードしたZIPファイルを右クリック
「すべて展開」を選択
展開先を「C:\」(Cドライブの直下)にする
展開すると「C:\flutter」というフォルダができます

Macの場合:

ダウンロードしたZIPファイルをダブルクリック(自動的に解凍される)
解凍された「flutter」フォルダを、ホームディレクトリに移動
最終的に「/Users/(あなたの名前)/flutter」という場所に配置

パスを通す

ここが少し専門的ですが、「パスを通す」という作業をします。

これは、「どこからでもFlutterコマンドを使えるようにする」という設定です。例えるなら、「家のどの部屋からでも、道具箱にアクセスできるようにする」ようなイメージです。

Windowsの場合:

Windowsキーを押して「環境変数」と検索
「システム環境変数の編集」をクリック
「環境変数」ボタンをクリック
「システム環境変数」の中の「Path」を選択して「編集」
「新規」をクリック
「C:\flutter\bin」と入力
すべてのウィンドウで「OK」をクリック

Macの場合:

ターミナルを開く(Finderで「アプリケーション」→「ユーティリティ」→「ターミナル」)
以下のコマンドを入力して Enter キーを押す:

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

copy

次に以下のコマンドを入力:

source ~/.zshrc

copy

これで設定完了です。

確認

正しくインストールできたか確認しましょう。

Windowsの場合: 「コマンドプロンプト」を開いて、以下を入力:

Macの場合: 「ターミナル」を開いて、以下を入力:

flutter --version

copy

Flutterのバージョン情報が表示されればOKです。「Flutter 3.XX.X」のような表示が出るはずです。

もし「コマンドが見つかりません」のようなエラーが出たら、パスの設定をもう一度確認してください。

ステップ2: Android Studioのインストール

次に、Android Studioをインストールします。これが、あなたの「作業台」になります。

ダウンロード

ブラウザで以下にアクセス: https://developer.android.com/studio
「Download Android Studio」ボタンをクリック
利用規約が表示されるので、内容を確認して「同意する」にチェック
ダウンロード開始(サイズは約1GB、数分かかります)

インストール

Windowsの場合:

ダウンロードした「android-studio-xxx.exe」をダブルクリック
インストーラーが起動するので「Next」を連打
すべてデフォルト設定のままでOK
「Finish」でインストール完了

Macの場合:

ダウンロードした「android-studio-xxx.dmg」をダブルクリック
Android Studioのアイコンを「Applications」フォルダにドラッグ
これでインストール完了

初回起動と設定

Android Studioを初めて起動すると、セットアップウィザードが始まります。

「Do not import settings」(設定をインポートしない)を選択
「Next」をクリック
「Standard」(標準)を選択
テーマ(見た目)を選択(Light または Dark、どちらでもOK)
「Next」をクリック
必要なコンポーネントのダウンロードが始まります

ここで、Android SDKなど、追加で必要なファイルがダウンロードされます。これも数GB あるので、10〜20分程度かかります。コーヒータイムです☕

Flutter プラグインのインストール

Android Studioに「Flutter用の拡張機能」を追加します。

Android Studioのメイン画面で「Plugins」(プラグイン)を選択
検索欄に「Flutter」と入力
「Flutter」プラグインが見つかるので「Install」をクリック
一緒に「Dart」プラグインも自動的にインストールされます
インストール後、「Restart IDE」(再起動)をクリック

これで、Android StudioがFlutter対応の作業台になりました!

ステップ3: Xcode のインストール(Macのみ)

Windowsユーザーの方は、このステップは飛ばしてください。

Macユーザーの方は、iOS(iPhone)アプリを作るために、Xcodeが必要です。

App Storeからインストール

Macの「App Store」を開く
検索欄に「Xcode」と入力
「入手」をクリック(無料です)
Apple IDでサインインを求められたら、IDとパスワードを入力
ダウンロード開始

Xcodeは非常に大きなアプリ(約10GB以上)なので、ダウンロードに30分〜1時間かかることもあります。気長に待ちましょう。

コマンドラインツールの設定

Xcodeのインストールが完了したら、追加の設定が必要です。

ターミナルを開く
以下のコマンドを入力:

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

copy

Macのパスワードを求められるので入力(画面には表示されませんが、ちゃんと入力されています)
次に、ライセンスに同意する必要があります:

sudo xcodebuild -license accept

copy

これで、Xcodeの準備完了です。

ステップ4: Flutter Doctor で確認

さて、ここまでで必要な道具は揃いました。でも、本当にちゃんと動くのか不安ですよね。

Flutterには「Flutter Doctor」という便利な診断機能があります。お医者さんが健康診断をするように、開発環境の状態をチェックしてくれるんです。

診断の実行

コマンドプロンプト(Windows)またはターミナル(Mac)を開いて、以下を入力:

flutter doctor

copy

すると、チェックリストが表示されます。

診断結果の見方

結果には、こんなマークが表示されます:

✓ (チェックマーク):問題なし
✗ (バツマーク):問題あり、対応が必要
! (ビックリマーク):警告、できれば対応した方がいい

理想的な状態:

[✓] Flutter (Channel stable, 3.XX.X)
[✓] Android toolchain
[✓] Xcode (Macのみ)
[✓] Android Studio

copy

全部にチェックマークが付いていればパーフェクトです!

よくある警告と対処

「cmdline-tools component is missing」と出た場合:

Android Studioを開いて:

メニューから「Tools」→「SDK Manager」
「SDK Tools」タブをクリック
「Android SDK Command-line Tools」にチェック
「OK」をクリックしてインストール

「Android license status unknown」と出た場合:

ターミナル/コマンドプロンプトで以下を実行:

flutter doctor --android-licenses

copy

何度か「y」(yes)を入力して、すべてのライセンスに同意してください。

ステップ5: 初めてのアプリを動かしてみよう!

環境構築、お疲れ様でした! ここまで来たら、実際にアプリを動かしてみましょう。

「Hello World」ならぬ、Flutterのサンプルアプリを起動します。これが動けば、環境構築は完璧です!

プロジェクトの作成

コマンドプロンプト/ターミナルで、作業したいフォルダに移動

例:

cd Desktop

copy

以下のコマンドで、サンプルプロジェクトを作成:

flutter create my_first_app

copy

「my_first_app」という名前のフォルダができて、中にサンプルアプリのファイルが自動生成されます。

作成したプロジェクトに移動:

cd my_first_app

copy

アプリの起動

Android Studioから起動する方法:

Android Studioを開く
「Open」をクリック
先ほど作った「my_first_app」フォルダを選択
画面上部に、実行ボタン(▶️ 再生マークのようなボタン)があるのでクリック

初回は、エミュレータ(仮想スマホ)の起動に数分かかります。

しばらく待つと...

カウンターアプリが起動しました!

画面に数字と「+」ボタンが表示されて、ボタンを押すと数字が増えるシンプルなアプリです。

この画面が見えたら、環境構築は完全に成功です! おめでとうございます! 🎉

実機で試す(オプション)

エミュレータではなく、実際のスマホで動かしてみることもできます。

Androidスマホの場合:

スマホの「設定」→「開発者向けオプション」を有効化
「USBデバッグ」をオンにする
スマホをUSBケーブルでPCに接続
Android Studioの実行ボタンの左にあるデバイス選択で、実機を選ぶ
実行ボタンをクリック

iPhoneの場合:

iPhoneをMacにUSBケーブルで接続
初回は「このコンピュータを信頼しますか?」と聞かれるので「信頼」をタップ
Android Studio(またはXcode)でデバイスを選択
実行

実機で動くと、より実感が湧きますよ!

よくあるエラーと対処法

環境構築では、いろいろなエラーに遭遇することがあります。代表的なものと対処法を紹介します。

「Permission denied」(権限がありません)

原因: 管理者権限が必要な操作を、通常権限で行おうとしている

対処法:

Windowsの場合:コマンドプロンプトを「管理者として実行」で開き直す
Macの場合:コマンドの前に「sudo」を付ける

「command not found」(コマンドが見つかりません)

原因: パスが正しく設定されていない

対処法:

パス設定をもう一度確認
ターミナル/コマンドプロンプトを再起動してみる
PC自体を再起動してみる

エミュレータが起動しない

原因: PCのスペック不足、または仮想化が有効になっていない

対処法:

BIOSで仮想化技術(VT-xやAMD-V)を有効化
Android Studioで軽量なエミュレータイメージを選択
実機での開発に切り替える

ダウンロードが途中で止まる

原因: ネットワークの不安定

対処法:

安定したWi-Fi環境で再試行
時間を変えてトライ(夜間は混雑していることも)

困ったときは、エラーメッセージをそのままGoogle検索してみてください。同じ問題で困っている人が世界中にいて、たいてい解決策が見つかります。

まとめ:第2回のポイント

お疲れ様でした! 長い道のりでしたね。でも、これでアプリを作る準備は完全に整いました。

今回の重要ポイント:

開発環境 = アプリを作る工場 Flutter SDK、Android Studio、Xcodeという「道具」を揃えました。
Flutter Doctorで健康診断 環境が正しく構築されているか、確認する方法を学びました。
初めてのアプリ起動に成功 サンプルアプリが動いた瞬間、それが「あなたもアプリ開発者になった」瞬間です。

ここまでできたあなたは素晴らしい!

環境構築は、アプリ開発の中で最も挫折しやすいポイントです。ここを乗り越えた人だけが、次のステージに進めます。

そして、あなたは今、そこにいます。

次回は、AppleやGoogleとデベロッパー契約を結ぶ方法を解説します。これは「アプリを公開する許可証」を取得する段階です。

といっても、まだプログラムは一切書いていないので、実際に公開するのはもっと先の話です。でも、早めに登録プロセスを知っておくと、全体の流れが見えて安心できます。

次回予告:「Apple・Googleと契約しよう - アプリストアに出すための"免許取得"」

Apple Developer Programの登録方法
Google Play Consoleの登録方法
証明書とは何か(身分証明書に例えて説明)
費用と支払い方法

ぜひ、次回もお付き合いください!