Git入門；　ローカルとGitHubの繋ぎ方

今回は、Git入門編ということで、ローカルpc環境とGithubのアカウントを連携させて、VS CodeでStreamlitアプリを作っていきたいと思います。具体的な方法について説明していきます。

レポジトリの作り方（Local）

まず、レポジトリをローカルで作ります。ここは、Terminalをうまく使っていきましょう。

$ mkdir annotation-app  #ファイル名、今回はこのようにした
$ cd annotation-app 

上のコードの通りにmkdirでannotation-appという名前のレポジトリを作成しました。
cookiecutter コマンドを実行してレポジトリを作成することもできますが、今回は基本ということで省いていこうと思います。

Gitの初期化とGit上でのレポジトリ作成

ローカル環境にレポジトリを作成することができたら、今度はGit上でレポジトリを作っていきます。
Githubにログインすると、Create a new repository という場所があるので、そこをクリックして作ります。MITライセンスとPrivateという部分を選択してOKです。なお、RepositoryNameにはannotation-app という名前を入れます。そして保存するとGithub上にレポジトリが作成されていると思います。

その後、プロンプトを打ち込みます。

$ git init .
$ git remote add origin https://github.com/{{ユーザ名}}/annotation-app.git

上のプロンプトをTerminal 上に打ち込むことで、GitHubのアカウント上のレポジトリをローカルのレポジトリと連携させます。

次にmain ブランチをチェックアウトします。

$ git fetch origin
$ git checkout -b main

新しいブランチの作成

ここで、新しいブランチを追加します。

$ git checkout -b feature/app

feature/appというブランチが作成されたことが確認できると思います。

 VSCodeで作業開始

新たに、Terminalで以下のプロンプトを打ち込みます。

$ cd annotation-app
$ touch main.py

ここでは、必要なファイル（main.py)をannotation-app上に作成しています。このファイルをいじっていくことでコードを加えてシステム開発を行っていきます。

VS Codeの画面上でプロファイルを開き、このファイルを探して開いてもらえるとコードが打ち込めるようになると思います。

Gitにプッシュして更新する方法

このファイル上でローカルに行った変更を、GitHubにプッシュしていくことでMainに合流させていきます。
まず、変更をステージングします。

$ git add .
 

次に、コミットを作成します。

$ git commit -m "Initial commit for annotation-app"

最後に、プッシュします。

$ git push origin feature/app

GitHub上でプルリクエストを作成

ローカルでコミットをプッシュすることができたら、GitHub上にアクセスします。

1. GitHubのリポジトリページにアクセス。

2. feature/app ブランチから main へのプルリクエストを作成。

3. 必要に応じてレビューを受け、マージ。

これで一通りの流れがわかったところで、Streamlitを使ってアプリ開発に入っていきます。

Streamlitの流れ

先ほど作ったmain.pyというファイルを編集していきます。
まず、Streamlitをimportします。必要に応じてライブラリを追加してください。

$ import streamlit as st 

そして、とりあえず最初のコードを打ち込みます。

$ st.title("Hello, Streamlit!")
$ st.write("This is a simple Streamlit app.")

これでStreamlitの上に何かが表示される状態になりました。
ここで、Terminalに移動してStreamlitを起動していきます。

$ cd annotation-app
$ streamlit run main.py

このプロンプトが認識されると、自動的にローカルサーバーが立ち上がります。そして、無事にStreamlitが表示されて先ほど打ち込んだ文字が表示されている状態になっていると思います。

Streamlitの画面の様子

これで一連の流れが理解できたと思います。このあとは、Streamの画面を見ながら適宜コードを追加してウェブアプリケーションを作っていくことができるかと思います。