🍌
#0 Web開発フロー

2025/05/23に公開
 ソースソースはこちらのYoutube.

 この記事で学べること開発に必要なGitコマンドの知識
GithubFlowが学べる

 (初めての方はこちらから) Githubへの登録の仕方
 新しいリポジトリの作成リポジトリ = 作業スペース兼倉庫みたいなもの.


Githubのホーム画面
ホーム画面右上のGithubアイコンをクリック


Githubのホーム画面(プルダウンメニュー)
するとこのような画面になる．このメニューの上から3つめ「Your repositories」をクリック．


リポジトリ画面
この画面中右上の緑のNewボタンをクリック．


リポジトリ初期設定
ここで「Repository name」に好きなプロジェクト名を入力．今回は動画に倣って「todoapp_github_flow_tutorial」とする．　　

他の設定項目について
Description(optional)：何か書きたいことがあれば書く．
PublicかPrivate：ソースコードを公開したくない又は公開できない場合はPrivate. 練習のためなら公開したほうがよい．外部サービスのトークンや暗号鍵を利用する場合はソースコードにそれらの情報を載せないように気をつける．
他は基本デフォルトでOK
最後に最下部の緑の「Create repository」ボタンを押してリポジトリ作成．　　

これでリポジトリの作成は完了．

 ソースコードの作成ここからVSCodeなどのコードエディタに移動

 クローンの作成

VSCodeターミナル
このように
git clone GithubのリポジトリのURL
コマンドを使用して自分のPC内にもリポジトリを作成（複製）する．

その後cdコマンドで作成したリポジトリに移動して作業する．
最後に
code .
と打つことでカレントディレクトリで新しいVSCodeウィンドウを立ち上げる．

 コミットコミットは変更を記録する操作．


commit コマンド
このように
git commit --allow-empty -m "commit内容"
とするとコミットできる．「--allow-empty」は空でも許可するというオプション．

 プッシュプッシュはコミットした変更をGithubのリモートリポジトリ（集約リポジトリ，　複数人が閲覧できる）に反映する操作．


pushコマンド
その結果


pushコマンド結果
こうなる．

 ブランチの作成・移動

branchの作成・移動

 ソースコードの記述ここからはVSCodeでやっていく．
jqueryはjavascriptのライブラリ．

CDN(Contents Delivery Network)経由で使用できる．

このサイトが良さそう．


jquery CDNサイト
このサイト内の赤くハイライトされたURLの左から2番目のボタンを押すと，HTMLタグとしてコピーできる．
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" 
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" 
            crossorigin="anonymous" 
            referrerpolicy="no-referrer">
        </script>
こんな感じで貼り付け．
これでとりあえずtodo_baseブランチのソースコードの記述は終了．

 mainブランチへのプルリクエスト(プルリク)・マージまずtodo_baseブランチで作成したものをプッシュする．


push 一連
これでtodo_baseブランチで作成したものがリモートリポジトリにpushできた．

画像内のコマンドに関して，
git add file名(*か.とするとそのブランチ内のすべてのファイルを指定)
このコマンドはブランチ内の任意のファイルをローカルリポジトリからインデックスに移動させる操作．

インデックスはリモートリポジトリに登録したい内容を一時的に保存する領域．この操作をステージングと呼ぶらしい．

詳しくはこちらの記事を参照．
git commitコマンドのコメントの書き方はこちらを参照．
git push origin branch名
これで任意のブランチをリモートリポジトリにプッシュできる．
ここまでやってgithubを確認．


push後のgithub
画面中央上の「Compare & pull request」という緑のボタンをクリック．

このプルリクは「できたから確認おねがいします」的な意味．


pull requestの記述
pull requestの内容とコメントを記述したら，画面右下の「Create pull request」という緑のボタンをクリック．


pull request後の画面
実際のレビューは画面中央上の「Files changed」というメニューから，確認可能．　　

確認ができたら画面中央下の「Merge pull request」という緑のボタンでマージする．

下のところでコメントを残しても良い．

 Branchの削除

merge後の画面
mergeが完了したら，画面中央の「Delete branch」ボタンで先程使っていたtodo_baseブランチを削除する．これはリモートリポジトリでブランチを削除しただけ．
VSCodeに移動．これからローカルリポジトリのブランチを削除する．


branchの削除
この手順でローカルリポジトリのブランチを削除する．
この操作をするとさっきまで使っていたHTMLファイルに斜線が入りリポジトリに存在しない状態になる．そこで次にマージしたものをリモートリポジトリから引っ張っってくるpullという操作が必要になる．


delete branch
この画面中のゴミ箱マークでも削除可能．

 Pullこんな感じで引っ張ってくる．


pull

 機能の追加ここまででTODOアプリの基礎ができた．

次に動きを追加するために，また新たなブランチを作成する．


ブランチの作成と移動
これでブランチを新たに作成し，そのブランチに移動できる．

 まとめGitを使った開発フローはこんな感じ．

細かいところは追々やっていく．