1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Flutter アプリを GitHub にアップロードする方法

Posted at

Flutter プロジェクトを初めて GitHub に公開する手順まとめ

Flutter の環境構築やプロジェクト作成が終わったら、次に必要になるのが
GitHub にコードをアップロードして管理することです。
この記事では、Flutter アプリを作り始めたばかりの初心者でも迷わないように、
ローカルのプロジェクトを GitHub にアップロードする手順を
ゼロから丁寧に解説します。
Flutter プロジェクトの作成方法はこちら:
Flutter アプリ開発のはじめかた
https://qiita.com/penginfly/items/d4c469fd502cfd657ac0

1. Git がインストールされているか確認する

ターミナルで次を実行します。

terminal
git --version
git version 2.39.3

バージョンが表示されれば OK。
もし表示されない場合は、Xcode Command Line Tools のインストールが必要です。

2. GitHub に新しいリポジトリを作成する

GitHub にログイン
右上の + → New repository
次を設定します
Repository name: myfirstapp
Description: Flutter app
Public(ポートフォリオ用ならおすすめ)
他はデフォルトのままで OK
最後に Create repository をクリック。
作成直後は、次のような空のリポジトリ画面が表示されます。
…or create a new repository on the command line
後でここにあるコマンドを使います。

3. Flutter プロジェクト側で Git を初期化する

Flutter で作成したプロジェクトフォルダに移動します。

terminal
cd ~/development/myfave
git init #Git の初期化(ターミナルでは#以降はコピペしないでください)

リポジトリ(Git 管理の箱)をここに作るイメージです。

4. .gitignore を確認する(Flutter は必須)

Flutter プロジェクトは自動生成ファイルが多いため、
不要なファイルを Git に入れないように .gitignore が重要です。
通常は、flutter create を実行した時点で .gitignore が自動生成されています。
確認:

ls -a

.gitignore があればそのままで問題ありません。

5. すべてのファイルを Git に追加してコミットする

作ったファイルを Git に登録します。

git add .

次にコミット(スナップショット)を作成します。

git commit -m "Initial commit"

6. GitHub リポジトリと紐付ける

GitHub で作成したリポジトリの URL をコピーします。
例:
https://github.com/username/myfirst.git
これを origin として登録:

git remote add origin https://github.com/username/myfirst.git

7. GitHub にアップロードする(push)

初回は main ブランチとしてプッシュします。

git push -u origin main

GitHub アカウントの認証が求められることがあります。
成功すると、GitHub 側のリポジトリにコードが表示されます。

8. GitHub で内容を確認する

ブラウザでリポジトリを開くと、
Flutter プロジェクトのファイルがすべて GitHub 上に表示されているはずです。
これでアップロード完了です。

9. その後の基本作業(毎回使う Git コマンド)

コードを修正したら、以下の流れを繰り返します。
git add .
git commit -m "修正内容"
git push
この3つを習慣にするだけで、常に GitHub と同期できます。

9.1 ブランチを作って安全に開発する方法(補足)

Git の強みは 「ブランチ(branch)」を使った安全な開発」です。
ブランチとは?
作業するための「枝分かれした別ライン」のこと。
main
→ 公開してもいい完成系
feature/add-login
→ ログイン機能を作る用の作業ブランチ
fix/button-color
→ ボタンの色を修正するためのブランチ
のように、作業内容ごとに自由に分けられます。
直接 main を触らず、別ブランチで作業するのが世界中のエンジニアの基本。
\

ブランチを作る流れ

1. main にいることを確認
git branch

現在のブランチに * がついている。

* main
2. 新しいブランチを作る
git checkout -b feature/add-home-screen

ここで作られるのは
“feature/add-home-screen” という名前のブランチ
変化前:main にいた状態
変化後:新ブランチに移動完了
という状態。

3. このブランチで自由に作業する

ファイル修正や UI の追加はこのブランチで行う。
作業を保存するには
git add .
git commit -m "ホーム画面を追加"

4. GitHub にこのブランチをアップロードする

git push -u origin feature/add-home-screen
初回は -u が必要。
次からは
git push
だけで OK。

5. 変更を main に取り込む

GitHub 上で Pull Request を作成し、main にマージする。
(初心者でも数クリックでできる)
ブランチ運用のメリット
main を壊さずに済む
機能ごとに独立して作業できる
エラーが出ても「ブランチだけ壊れる」ので安心
チーム開発で必須
Flutter でも UI・機能ごとにブランチを作ると開発がとても楽になります。

10. よくあるエラーと対処法まとめ

エラー:remote origin already exists
fatal: remote origin already exists
意味:
すでに GitHub と紐付け済み
重複して追加しようとしているだけ
対処:
無視して OK
push すれば問題なし

まとめ

この記事では、Flutter アプリを GitHub にアップロードする手順を
Git の確認
GitHub リポジトリを作成
Flutter プロジェクトで Git を初期化
remote の設定
初回 push
通常の更新方法
という流れでまとめました。
GitHub 管理は、Flutter アプリ開発において
バージョン管理
バックアップ
就活・ポートフォリオ
チーム開発
に必須のスキルなので、ここで慣れておけば安心です。

最後に エラーなどが出ちゃった人に向けて

エラーものすごい嫌ですよね。出鼻を挫かれる感あります。
私のまだまだ全然うまくいかないことたくさんあります 一緒に頑張りましょうね。
もしうまくいかないときはyoutubeなどの動画で上げてくれる人がいるのでそっちを見てみてもいいのかなと思います(私も初めては動画でやりました)
動画だと何回かやってしまうと自然にやっちゃっていることも動画で残っているので一個一個同じ操作をしていればほとんど間違いはないと思います。
あと、エラーなどは本当に嫌ですが、chatGPTとかに聞いたら何が良くないのかとか教えてくれるので是非エラー全文投げると解決することもあります。

頑張って自分が作りたいアプリ作りましょうね!!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?