とある通信会社の有志Publicationへの投稿
👨‍💻

FlutterとFirebaseでVibe Codingを試してみた #1

crazykohei
に公開
Flutter
Dart
Vibe Coding
tech

この記事の目的

  • 簡易的なSNSアプリの開発を通してプログラミングの基礎から、実践的なアプリ開発まで体験しながら学ぶ
  • 細かいプログラミング言語の記述については、アプリ開発で実際に使うタイミングで解説する
  • 今回は短期間でプログラミングのアプリケーション開発について学び、モックアップやプロトタイプが作成できるようになることを目的としているため、正式なリリースをするための開発とは異なる部分がある
  • AI（LLM等によるCode生成技術）を使ってアプリの大部分を作成することとし、なるべくAIに頼る

この記事の想定読者

  • なんらかのプログラミング言語を使ったことがあり、変数や関数をなんとなくでも使ったことがある方

第1回の内容

  • 環境構築
  • プロジェクトの始め方
  • デフォルトアプリの解説
  • Claude Codeを使ったSNSアプリコードの生成
  • Flutterの解説

環境構築

  • Visual Studio Codeのインストール
    • 今回のアプリ開発で使用する高機能テキストエディタです。
    • 公式サイトhttps://code.visualstudio.com/からダウンロードとインストールを行ってください。
    • ソフトを開き、左のメニューのExtensionから"Flutter"という公式のExtensionをインストールしてください。
  • Git
    • ソースコードの変更履歴を管理するために使用します。
    • Mac であればターミナル、Windows であればコマンドブロンプトでgit -- versionコマンドを実行し、Git のバージョンが表示されていればすでにインストールされています。
    • インストールされていない場合は以下の方法でインストールしてください。
      • Macの場合
        • Homebrew を公式サイト https://brew.sh/ja/ の手順に従ってインストールし、"brew install git"コマンドでGitをインストールしてください。
      • Windows の場合
  • Flutter
    • 今回のアプリ開発で使用するフレームワークです。プログラミング言語としてはDart言語を利用していきます。公式サイトhttps://docs.flutter.dev/get-started/install/に環境構築の手順が載っているので基本的にはそれを参考に進めてもらえれば問題ありません

    1. Flutterを使うために事前に必要な開発ツールをインストールする

      • Mac の場合
        • Xcode
          • AppStore からインストールできます。
        • CocoaPods
          • 公式サイトhttps://cocoapods.org/に記載されているコマンドでインストールできます。
      • Windows の場合

    2. FlutterSDK の ZIP ファイルをダウンロードし解凍する

      • Mac の場合は、CPUによってダウンロードするSDK が異なりますので、使っているバソコンのチップがIntel製かApple製かを事前に確認しておいてください。
      • ZIP ファイルをダウンロードし、ユーザー直下に"development”ディレクトリを作成してその中に展開してください。
      • 以下のように”bin”ディレクトリがあることが確認できれば問題ありません。
        /User/{ユーザー名}/development/flutter/bin

    3. パスを通す

      • Macの場合
        • ユーザー直下にある、".zshenv”ファイルがあればそれをテキストエディット等のソフトで以下の行を追記して保存するとバスを通すことができます。
          export PATH="$PATH:/Users/{ユーザー名}/development/flutter/bin"
        • ただし、ドットから始まるファイルは隠しファイルですので、デフォルトでは非表示になっていて見つけられないことがあります。
        • Finder で「Command+Shift+.」をキーボードで入力すると、隠しファイルを非表示から表示に切り替えられますので、表示に切り替えてから探してください。".zshenv”ファイルが存在しなければ、新しくファイルを作成してからバスを通すようにしてください。
      • Windows の場合
        • Windows メニューで”環境変数”と検索すると入力するとコントロールパネルが出てきますので、そこからユーザーの環境変数を追加することになります。
        • 変数が“Path“となっている行を選択して”編集”ボタンを押し、新しく開いたウィンドウ内の”新規”ボタンを押すと入力できる状態になりますので、以下の文字列を入力してください。
          C:¥Users¥{ユーザー名]¥development ¥flutter¥bin

    4. flutter コマンドを実行する

      • ここまでの作業が正しく完了できていれば、Macの場合はターミナル、Windows の場合はコマンドブロンブトで、"flutter -- version"と入力し Enterを押して以下のようにFlutter バージョンが出力されることを確認してください。
      Flutter 3.29.3 . channel stable . https://github.com/flutter/flutter.git
Framework . revision ea121f8859 (5 weeks ago) . 2025-04-11 19:10:07 +0000
Engine . revision cf56914b32
Tools . Dart 3.7.2 . DevTools 2.42.3
      • この段階でエラーが出た場合はバスが通っていないケースが多いため、3を見直すこ
        とをおすすめします。

    5. flutter doctor コマンドを実行する

      • 4と同様に“flutter doctor”コマンドを実行すると、Flutter の環境構築がどのぐらい完了できているか確認することができます。
      • Flutter、VSCode、デバイス、Macの場合はXcode、Windowsの場合は Android toolchainの箇所にチェックが入っていることが確認できれば、Flutter の環境構築は完了です。
      • 以下、コマンド実行の出力例です。
      • ※さらに細かい情報を出力したい場合は、"flutter doctor-v”のように”-v”をつけて実行
        することもできますので、何かエラーが出ている場合は活用してください。
      [v] Flutter (Channel stable, 3.29.3, on macOS 15.3.2 24D81 darwin-arm64, locale
ja-JP)
[v] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[v] Xcode - develop for iOs and macOS (Xcode 16.2)
[v] Chrome - develop for the web
[v] Android Studio (version 2024.2)
[v] IntelliJ IDEA Ultimate Edition (version 2024.3.3)
[v] VS Code (version 1.99.1)
[v] Connected device (4 available)

プロジェクト作成

  • ターミナル（コマンドプロンプト）で、プロジェクトを保存したい場所に異動し、プロジェクト作成コマンドを実行する。"test_project"は好きな名前で構いません。
    flutter create test_project
  • このプロジェクト（test_projectと名前がついたディレクトリ）をVisual Studio Codeで開きます。

デフォルトアプリについて

  • 右下の+ボタンを押した分だけカウントアップするアプリがデモとして用意されている。

デフォルトアプリをSNSアプリに書き換える

  • Claude Code(https://claude.ai)を使って、コードを生成する
  • デフォルトアプリのメインコード（main.dart）をドラッグ・アンド・ドロップし、以下のようなプロンプトを入力して実行する
    • Modify the Flutter code below to create a Twitter-like social networking application
  • そうすると、要望通りのコードが生成されるので、ダウンロードして、Visual Studio Codeで開いたmain.dartファイル内にコピペして、実行する
  • 生成したコードを実行した画面
  • 生成したコードと共に、機能の解説も行ってくれる
    • まるで投稿が既にいくつもあるように見えるが、これはmain.dartにハードコーディングされたデータであり、今後はGoogle CloudのFirebaseなどを使って投稿データを保管するサーバー部分を開発する

今後の進め方

  • Claude Codeで生成したSNSアプリのコードの確認
  • SNSアプリの裏側で動作するバックエンド部分の作成

おまけ：Flutterの仕組みの解説

UI開発とWidget

  • Flutterは、Widgetと呼ばれる部品の集まりでUIが構成されている
  • Text: 文字列を画面に表示するWidget

Widgetツリーと状態

  • どのWidgetの中にどのWidgetが入っているか意識する

再実行の方法

  • Hot Reload:Widgetツリーの差分のみ更新する
    • UIの変更だけを確認したい時に使う（カウントの数字はそのまま）
  • Hot Restart:Widgetツリーをすべて作り直し、状態は初期化する
    • アプリ全体を初期化したい時に使う（カウントの数字は0になる）

String(文字列)とint(整数)

  • Stringは、シングルクォーテーション(’)もしくはダブルクォーテーション(”)で囲って使う
  • 補完文字列で変数の情報を表示することができる(.toStringは不要)

Center

  • childの中身を中央に配置するWidget
  • Widgetの多くには、childというプロパティがある(例:Align)
  • 知らないWidgetは、公式ドキュメント(https://api.flutter.dev/flutter/widgets/Center-class.html)にどのようなWidgetでどのように使うのかが記載されているので参考にするとよい
  • GitHub Copilot Chatで聞いてもよい

基本Widget(Column, Row,Stack)

  • Column:縦に並べる

  • Row:横に並べる

  • Stack:重ねる

  • 2つ以上の要素があることが前提となっているので、childではなくchildren

  • 並べ方はalignmentを設定することで変えられる

基本Widget(Container)

  • Container:色、サイズ、配置等、様々な情報が設定できるWidget
    ※colorとdecorationは同時に使用できない

基本Widget(GestureDetector)

  • GestureDetector:タップした時の処理を設定することができるWidget
とある通信会社の有志
とある通信会社の有志Publication

とある通信会社の有志が技術的知見について発信していきます (※ 個人の見解や意見であり所属する組織の公式見解ではありません。)

Discussion