🍳 AI x Flutter Cookbook

レシピ#1-6: 自分のFlutterプロジェクトをGitHubで管理する

前のレシピで、あなたの最初のFlutterプロジェクトが誕生しました。この大切なコードを、ただPCの中に置いておくだけでは、万が一の事故で失ってしまうかもしれません。

このレシピでは、あなたのプロジェクトをGitHubを使って安全に保存し、バージョン管理を行うための手順を解説します。これにより、コードのバックアップ、変更履歴の追跡、そして将来的なチーム開発への道が開かれます。

なぜGitHubで管理するのか？

前提条件

Step 1: GitHub上で空のリポジトリを作成する

まず、ローカルのコードをアップロードするための「箱」をGitHub上に用意します。

  1. GitHubにログインし、右上の「＋」アイコンから「New repository」を選択します。

  2. リポジトリ作成フォームを以下のように入力します。

    • Repository name: あなたのアプリ名など、分かりやすい名前を付けます。（例: my_first_app）
    • Description (任意): リポジトリの簡単な説明を書きます。AIに手伝ってもらうのも良いでしょう。
    • Public / Private:
      • Private: あなたが許可した人しか見ることができない、個人開発に最適の選択肢です。
      • Public: 世界中の誰でもコードを閲覧できます。オープンソースとして公開する場合に選びます。
    • 【超重要】"Initialize this repository with:" の下のチェックボックスは、すべて外したまま**にしてください。READMEや.gitignoreは、ローカルのFlutterプロジェクトにあるものを使うため、ここでは何も追加しません。

  3. 「Create repository」ボタンをクリックします。

  4. 空のリポジトリが作成され、「Quick setup」という画面が表示されます。この画面に表示されているURLを後で使いますので、このページは開いたままにしておいてください。

🤖 AI活用プロンプト (リポジトリ説明文の作成)

どんな説明文を書けば良いか迷ったら、AIに相談してみましょう。 ``` あなたはテクニカルライターです。私が作るFlutterアプリ「my_first_app」のGitHubリポジトリ用の、簡潔で魅力的な説明文（Description）を英語で作成してください。

アプリの概要

このアプリは、Flutterの学習のために作成した、基本的なカウンターアプリです。 ```

Step 2: ローカルのFlutterプロジェクトでGitを準備する

次に、あなたのPC上にあるFlutterプロジェクトを、Gitで管理できるようにします。

  1. ターミナルを開き、プロジェクトのルートディレクトリに移動します。 bash # 前のレシピで作成した my_first_app フォルダに移動 # Windowsの場合 cd c:\dev\ai-x-flutter\my_first_app # Macの場合 cd ~/Development/ai-x-flutter/my_first_app # Linuxの場合 cd ~/dev/ai-x-flutter/my_first_app

  2. git initコマンドで、Gitリポジトリを初期化します。 bash git init 実行すると、.gitという隠しフォルダが作成され、このフォルダが変更履歴などを管理します。

Step 3: ローカルとリモート（GitHub）を接続する

ローカルのGitリポジトリに、Step 1で作成したGitHub上のリポジトリの場所を教えます。

  1. Step 1の最後で開いていたGitHubのページに戻り、「…or push an existing repository from the command line」の下にあるコマンドの中から、以下の行をコピーします。 git remote add origin https://github.com/your-username/my_first_app.git
  2. ターミナルにそのコマンドを貼り付けて実行します。
    • これは、「originという愛称で、このURLのリモートリポジトリを登録します」という意味です。

Step 4: 最初のコードをGitHubにPushする

いよいよ、ローカルのコードを初めてGitHubにアップロード（Push）します。

❗認証について

git push を実行する際、あなたのPCが本当にあなた自身のものであることを証明するための認証が必要になります。 初心者の方には、GitHub CLIを使った認証方法を、この後のレシピ#1-7で詳しく紹介します。

この方法を使えば、PC毎に最初に1回だけ認証しておくだけで、その認証情報がPCに安全に記録されます。その後のpushでは自動的に認証が行われるので、認証を特に意識する必要がなくなり、非常に快適です。

まずはこのままpushを試してみて、もし認証エラーが出たら、次のレシピに進んで設定を完了させましょう。

  1. すべてのファイルをステージングエリアに追加します。 bash git add . これは、「プロジェクト内のすべての（.gitignoreで無視されていない）ファイルを、次のコミットの対象にします」という意味です。

  2. 最初のコミットを作成します。 bash git commit -m "feat: Initial project setup from flutter create" commitは、変更内容をひとかたまりの記録として保存する操作です。"feat: Initial project setup..."は「機能: flutter createによる初期プロジェクト設定」という意味で、何をしたかが分かりやすいメッセージの一例です。

  3. 現在のブランチ名をmainに変更します。（推奨） GitHubの現在の標準ブランチ名はmainです。合わせておきましょう。 bash git branch -M main

  4. リモートリポジトリにプッシュします。 bash git push -u origin main -uオプションは、ローカルとリモートのmainブランチを「紐付ける」ためのもので、初回のみ必要です。

  5. GitHubのページをリロードしてみてください。あなたのFlutterプロジェクトのファイルがすべて表示されているはずです！

Step 5: 日々の開発フロー

これからの開発は、以下のサイクルを繰り返すことになります。

  1. コードを編集する
  2. 変更をステージング: git add .
  3. 変更をコミット: git commit -m "分かりやすいメッセージ"
  4. GitHubにプッシュ: git push

このサイクルを習慣にすることで、あなたのプロジェクトは安全かつ体系的に管理されていきます。

次のレシピでは、この後の開発で毎回パスワード入力をしなくて済むように、GitHub CLIでPCを認証する方法を学びます。

➡️ 次のレシピへ: #1-7: GitHub CLIでPCを認証する