SourceTreeを使ってGitHubにFlutterのコードをアップロードする方法
この記事は、以下の本と同じものを掲載しています。
なぜGitクライアントを使うのか
GitHubをターミナルで操作するのは、結構難しいからです。
そこでいくつかGUIでGitを操作できるGitクライアントがあるのですが、
今回はその中でもメジャーなSourceTreeの使い方について紹介します。
GitHubにアクセス
GitHubにリポジトリを作成し、アップロードしていきます。
アカウントを作成してない人は作っておいてください。
リポジトリを作成
アカウントができている方は、リポジトリを作っていきましょう。
右上のプラスボタンを押し、「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にダウンロードしましょう。
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大学](https://storage.googleapis.com/zenn-user-upload/avatar/f485149097.jpeg)
Flutter大学はFlutterエンジニアに特化した学習コミュニティです! 初心者から中上級者まで幅広く在籍し、切磋琢磨しています! 入会をご希望の方はこちらから→ flutteruniv.com
Discussion