AI に一言で GitHub Pages 公開、v1.0 タグまで―自分のアプリが URL で世界に届く

SHARE

第8回で最小の TODO アプリを作ってから、完了チェック、削除、保存、フィルタ、ダークモード、並び替えと、機能を足してきました。今日は、そのアプリをついにインターネットに公開します。誰でも開ける URL を用意し、完成版に v1.0 という名前 (タグ) を付けます。

これまでと同じで、私はコマンドを打ちません。「公開して、見られるようになるまで確認して」「v1.0 のタグを付けて上げて」と、AI に言葉で頼むだけです。AI が gh api や git tag を選んで実行します。

目次

TL;DR

  • 第12回まで育てたアプリを GitHub Pages で公開します。「公開設定をして、見られるようになるまで確認して」と AI に頼むだけです。
  • AI は gh api で Pages を有効化し、ページが表示できるようになるまでポーリングで待って、公開 URL を返しました。
  • 完成版に注釈付きタグ v1.0 を付けます。「v1.0 を付けて GitHub にも上げて」と頼むと、AI が git tag -a で実行しました。
  • AI が勝手に決めた値は、公開ソース (main のルート)・ポーリング間隔・注釈付きタグを選んだこと・GitHub Release は作らなかったことです。

この回のゴール――自分のアプリが URL で世界に届く

今日のゴールは、この URL です。

https://ikuma-hiroyuki.github.io/todo-app-git-deep-dive/

ここを開くと、これまで育ててきた TODO アプリが、誰のパソコンからでも動きます。GitHub がコードの倉庫だとすれば、GitHub Pages は、その倉庫の中身を Web ページとして直接届けてくれる配送サービスです。倉庫に入れた index.html を、そのまま世界に向けて開く。流れにすると 3 段です。

flowchart TD L["手元のコード<br/>index.html"] -->|"git push(第 8〜12 回で済み)"| G["GitHub リポジトリ<br/>main 8515ebf"] G -->|"gh api で Pages を有効化"| P["GitHub Pages<br/>世界に公開された URL"]

左 2 つ、手元から GitHub への push は、ここまでの回で何度もやりました。今日やるのは、右端の 1 歩。GitHub のリポジトリを、公開 Web ページとして開くところです。

AI への一言で GitHub Pages を有効化する

公開も、私が設定画面を触るのではなく、AI に頼みます。

この TODO アプリを GitHub Pages で公開したい。公開設定をして、公開 URL を教えて。
反映に時間がかかるなら、実際にページが見られるようになるまで確認して。

AI は、GitHub の公式コマンド gh の api 機能で、Pages を有効化しました。GUI(設定画面) を開かずに、コマンド 1 つで済みます。

gh api repos/ikuma-hiroyuki/todo-app-git-deep-dive/pages \ --method POST -H "Accept: application/vnd.github+json" \ --field 'source[branch]=main' --field 'source[path]=/'

source[branch]=main は「main ブランチの中身を公開する」、source[path]=/ は「リポジトリのルート (直下) にある index.html を使う」という指定です。どちらも私は言っていません。index.html がリポジトリの直下にあるのを見て、AI が決めました。

途中で出たエラー――シェルの「[ ]」の癖

ここで、AI も一度つまずきました。最初のコマンドが、こんなエラーで止まったのです。

no matches found: source[branch]=main

原因は、私が使っているシェル (zsh) の癖です。source[branch] の [ ] を、シェルが「ファイル名のパターン」と勘違いして、該当ファイルを探しに行き、見つからずにエラーになりました。AI はこれに気づいて、[ ] を含む引数をシングルクォート ('...') で囲み、シェルに展開させないようにして、もう一度実行しました。さきほどのコマンドで --field のうしろがクォートで囲まれているのは、この対処の跡です。

「[ ] や * のような記号をコマンドに渡すときはクォートで囲む」。シェルを使う人がよく踏む定番のつまずきですが、AI はエラーメッセージを読んで自分で直しました。

30 秒待って、ページが開いた

Pages は、有効化してもすぐには表示できません。GitHub が裏でページを組み立てる時間がかかります。AI への指示に「見られるようになるまで確認して」と入れておいたので、AI は表示できるまで待ってくれました。

具体的には、URL に短い間隔でアクセスし、200(正常表示) が返るまで繰り返す、というやり方です。

until curl -s -o /dev/null -w "%{http_code}" \ https://ikuma-hiroyuki.github.io/todo-app-git-deep-dive/ | grep -q 200; do sleep 15
done

このときは 2 回めのアクセスで 200 が返りました。約 30 秒です。AI は公開 URL を私に伝え、念のため私もブラウザで開いてみました。タイトルは TODO、入力欄も追加ボタンもダークモードのボタンもそろっていて、ちゃんと動く。手元で育てたアプリが、そのまま世界に開かれていました。

完成版に「v1.0」という名前をつける――タグ

公開できたので、この「完成した状態」に名前をつけます。Git では、特定のコミット (スナップショット) に分かりやすい名前のシールを貼ることができます。これがタグです。第3回で、コミット・tree・blob・タグという 4 種類のオブジェクトを解剖したとき、タグにも触れました。今日はそれを、実際のリリースの目印として使います。

タグには 2 種類あります。

種類コマンド例残る情報
軽量タグgit tag v1.0コミットへのポインタだけ
注釈付きタグgit tag -a v1.0 -m "..."作った人・日時・メッセージも残る

頼んだのは、これだけです。

公開できたら、いまの完成版に v1.0 のタグを付けて、GitHub にも上げて。

AI は、2 種類のうち注釈付きタグを選びました。

git tag -a v1.0 -m "v1.0: TODO アプリ完成版(フィルタ・ダークモード・並び替え機能を含む)"
git push origin v1.0

なぜ注釈付きかというと、リリースの目印には「いつ・誰が・何の意図で付けたか」が残っていたほうが、後から振り返りやすいからです。私は「v1.0 を付けて」としか言っていませんが、AI はメッセージ文面まで考えて、注釈付きで残しました。タグも git push origin v1.0 で GitHub に上げないと相手には伝わりません。コミットを push するのと同じです。

ついでに、AI は GitHub Release(リリースページ) は作りませんでした。Release はタグにリリースノートや配布ファイルを添える機能ですが、今回のような個人の小さなアプリでは、タグだけで十分だと判断したからでしょう。

v1.0^{} って何？

注釈付きタグを GitHub に上げたあと、git ls-remote --tags origin でタグの一覧を見ると、こう並びます。

8515ebf... refs/tags/v1.0
8515ebf... refs/tags/v1.0^{}

v1.0 と v1.0^{} の 2 行があるのが、注釈付きタグの証拠です。注釈付きタグは、それ自体が 1 つのオブジェクト (作成者やメッセージを持つ) として存在し、その中から実際のコミットを指しています。^{}(デリファレンスと読みます) が付いたほうが、「タグが最終的に指している実際のコミット」です。軽量タグなら、この 2 行めは出ません。タグそのものに中身があるかどうかの違いが、ここに表れています。

AI に頼むときの言い方

今日も、私が指定したことと、AI が補ったことに分かれていました。

種別こちらが指定した値指定しないと AI が勝手に決める値
Pages 公開公開したいこと・見られるまで待ってほしいこと公開ソース (main のルート)・ポーリングの間隔・エラーの直し方
タグタグ名 (v1.0)・GitHub にも上げること注釈付きか軽量かの選択・メッセージ文面・Release を作らない判断

「公開して、見られるまで確認して」という言葉だけで、AI は gh api を選び、シェルのエラーを自分で直し、表示できるまで待ち、URL を返しました。タグも「v1.0 を付けて」で、注釈付きという最適な選択まで AI が埋めました。私が決めたのは「公開する」「v1.0 という名前」という方向だけです。

まとめ

第 13 回として、育ててきたアプリを GitHub Pages で世界に公開し、完成版に v1.0 のタグを付けました。

  • 「公開して、見られるまで確認して」と頼むと、AI が gh api で Pages を有効化し、表示できるまでポーリングで待ち、公開 URL を返した。[ ] のシェルエラーも自分で直した。
  • 「v1.0 を付けて上げて」と頼むと、AI が注釈付きタグを選んで git tag -a で実行し、git push origin v1.0 で GitHub にも上げた。
  • 公開ソース・ポーリング間隔・注釈付きの選択・Release を作らない判断は、すべて AI が補った。私は「公開する」「v1.0」という方向だけを渡した。

自分が作ったものが、世界中どこからでも URL で開ける。そして完成の瞬間に v1.0 という名前が刻まれる。ここまでの 6 回で積み上げた小さなコミットの先に、ちゃんと「公開されたアプリ」がありました。次回は実戦編の最終回。push するたびに GitHub が自動でテストして、自動でこのページを更新してくれる仕組み――GitHub Actions による自動デプロイ――を作って、連載を締めくくります。

なお、この記事で AI に渡したひと言は、すべて Claude(Sonnet) に実際に渡し、書いてあるとおりに動くことを確かめたものです。GitHub Pages は本当に公開され、上の URL は今も開けます。タグ v1.0 も実機リポジトリに注釈付きで付き、GitHub に上がっています。Pages の有効化からタグ付けまで、私はコマンドを打たず、すべて AI への言葉だけで実機検証しました。モデルやその日の状態によって、AI が勝手に決める値 (タグのメッセージ文面など) は変わります。指定しなかった部分は変わりうる、と思って読んでください。

前の記事

自分 1 人でも Pull Request を使う―フィルタ機…

次の記事

push したら世界が自動で更新される― GitHub Act…