🐈‍⬛

SourceTreeを使ってGitHubにFlutterのコードをアップロードする方法

2023/04/18に公開

この記事は、以下の本と同じものを掲載しています。

https://zenn.dev/flutteruniv/books/flutter-api-textbook

https://zenn.dev/flutteruniv/books/flutter-textbook

なぜGitクライアントを使うのか

GitHubをターミナルで操作するのは、結構難しいからです。

そこでいくつかGUIでGitを操作できるGitクライアントがあるのですが、
今回はその中でもメジャーなSourceTreeの使い方について紹介します。

GitHubにアクセス

GitHubにリポジトリを作成し、アップロードしていきます。

https://github.com

アカウントを作成してない人は作っておいてください。

リポジトリを作成

アカウントができている方は、リポジトリを作っていきましょう。

右上のプラスボタンを押し、「New Repository」を選びます。

プロジェクト名を入力しましょう。

限定公開の場合はprivate、全員に見られてもいい場合はpublicにしましょう。

すると、以下のような画面になると思います。この指示に従ってターミナルにコマンドを打っていけば、GitHubリポジトリにコードをアップすることができます。

とはいえ、脳死で全部やればいいわけではありません。

今回は、意味を1つ1つ理解しつつ、SourceTreeというアプリを用いてGit管理する方法を紹介したいと思います。

コマンドでやること

コマンドで絶対やらなければ、いけないことは以下の2つです。

Gitの初期化

まず、このアプリのプロジェクトが入っているフォルダにGitを入れます。

これがgit initです。

このコマンドを行うと、.gitという隠しフォルダが生成されます。これがなきゃGitとフォルダを繋げることができません。

git init
git remote add origin git@github.com:flutteruniv/toilenow.git // ここのリポジトリ名は人によって違います

SourceTreeをダウンロード

そのほかもコマンドでやってもいいのですが、あとはツールを使った方が直感的にわかりやすいです。私はエンジニアを始めた当初からSourceTreeを使っており、7年間ずっと使っております。(他にもツールはあるのでお好みでお使いください)

SourceTreeは以下です。まずはPCにダウンロードしましょう。

https://www.sourcetreeapp.com/

SourceTreeとGitHubアカウントの連携

GitHubアカウントをSourceTreeに登録しておくと、権限まわりで苦労することがなくなるので便利です。

SourceTreeの環境設定を開きます。

左から2つ目のタブの「アカウント」を開きます。

「追加」ボタンを押すと、以下のような画面になります。

  • ホスト: GitHub
  • 認証タイプ: OAuth
  • プロトコル: SSH

アカウントを接続したら、キーを生成ボタンを押してください。

すると、生成してくれるので、「クリップボードにコピー」ボタンを押してコピーします。そして、右下のボタン「保存」で大丈夫です。

次に、GitHubを開き、右上のアイコンからSettingを開きます。

「SSH and GPG keys」を選択。右上の「New SSH Keys」を押して追加します。

先ほどクリップボードにコピーしたキーをkeyのテキストボックスに貼り付けて、適当にタイトルをつけて保存したらOKです。

これでもGitHub接続が可能したはずです!

SourceTreeでGitHubにアップロードする方法

SourceTreeを開くとリポジトリ一覧画面が現れます。(画像ではいっぱいありますが、最初は空だと思います。)

その一覧に対して、アプリの入ったフォルダをドラッグアンドドロップします。

すると、一覧に登録されますので、登録されたリポジトリをダブルクリックします。

開くと、以下みたいな画面になります。

表示方法は「ステージングを分割して表示」がおすすめです。

下のステージにある「ステージングに未登録のファイル」すべてにチェックを入れると、上のステージに移動します。これがコミット対象です。

最後に、コミットメーセージを入力し、「コミットをただちにプッシュする」にチェックを入れてコミットボタンを押すと、GitHubにアップロードされます。

以下のようにGitHubリポジトリにコード一覧が並んだらアップロード成功です!

まとめ

以上です。

  • この記事では、FlutterプロジェクトとGitHubの連携方法を紹介しました。
  • まず、GitHubアカウントを作成し、リポジトリを作成する方法を説明しました。
  • その後、SourceTreeというGitクライアントを使って、GitHubリポジトリにコードをアップロードする方法を紹介しました。
  • また、SSH接続についても解説しました。
  • これにより、GitHubリポジトリに簡単にFlutterプロジェクトをアップロードできるようになります。
Flutter大学

Discussion