🛠️
自然言語だけでプログラミング！Vibecodingをはじめよう②
この章のゴール
Codex CLI の環境設定を完了し、簡単なプログラムを作成します。
Codex CLI を起動（前回の復習）
通常はyoloを使わず起動します（全消し事故を防ぐ）。
Codespaces環境なので全消しでも問題ないのでyoloモードで進めます。
codex --yolo
Approvals（権限）を設定 /approvals
Codex が自動実行できる操作範囲を絞ります。おすすめは「Auto」。
/approvals
- 今回は
Full Accessとしますが、通常はAutoが安全です。 -
Full Accessでは破壊的操作（rm -rf フォルダ名等）が実行できます。※絶対やってはいけません！ - 謎の文字列
0;rgb:3b3b/3b3b/3b3b11;rgb:f8f8/f8f8/f8f8が時々入りますが、たぶんバグなので、面倒ですがその度BackSpaceで消しましょう。
Codexのモデルの設定 /model
Codex CLIの入力欄で/modelと入力し、キーボードの Enterキー を押します。
/model
gpt-5-codex (current) => › Low (current) を選択
Vibecoding！簡単なプログラムを作成してみよう
ここではIssuesをログとして活用するGithub Pagesで公開できる掲示板を作成してみましょう。
Codes CLIに下記を入力して実行してみましょう
GitHub Issues を読み込む掲示板を作って。GitHub Pages で公開できてる HTML/CSS/JS を生成して。
ローカルでコミットしてリモートへプッシュする
Codex CLI を使う場合は、自然言語で指示してもOK。
ローカルでコミットして、リモートへプッシュして
Codex は git add/commit/push を提案・実行します（/approvals の設定に従う）。
初心者向けのたとえ（荷物の発送）
-
git add: 変更したファイルを箱に入れて梱包する（コミット対象を選ぶ）。 -
git commit: 箱に宛名と伝票を書いて封をする（ローカルの履歴に確定。まだ相手には届いていない）。 -
git push: 配送業者に渡して相手の倉庫＝リモート（GitHub）へ運ぶ（リモートに反映され、公開や自動処理が動く）。
つまり、コミットは「手元で確定」、プッシュは「リモートへ配送して反映」です。
GitHub Pagesでデプロイ
デプロイとは、手元で編集したファイルをインターネット上で誰でも見られるように公開することです。GitHub Pages は GitHub が提供する静的サイトの配信サービスで、ブランチ上の HTML/CSS/JS をそのままホスティングします。この章では、最短の公開方法（リポジトリ直下の index.html）を説明します。
まずは下記URLからGitHubに移動して対象のリポジトリを開きます。
ルート直下に index.html を置く場合（最短ルート）
- リポジトリ直下に
index.htmlを配置し、mainにコミット/プッシュ。 - GitHub → 対象リポジトリ →
Settings→Pagesを開く。
- Build and deployment →
Source: Deploy from a branchを選択。 - Branch:
main、Folder:/ (root)を指定してSave。 - 数分後に公開 URL が表示されるのでアクセスして確認。
補足
- プロジェクト Pages の公開 URL は通常
https://<ユーザー名>.github.io/<リポジトリ名>/。 - 公開は基本 Public リポジトリで運用（Private は権限に注意）。
Discussion