2026年7月15日（水）19時、未来クライム第4期アドバンスコースの第3回を開催しました。前回まではHTMLやCSS、JavaScriptを使ってWebページを作ってきましたが、作ったものはすべて自分のパソコンの中にだけある状態でした。今回からは「作ったコードを安全に保管し、世界に公開する」ための技術、GitとGitHubに踏み出します。

「今回と次回の2回にわたって、この題材を扱います。今日1日で全部行かなくても大丈夫」。冒頭でそう伝えたのは、今回の内容がこれまでとは少し毛色が違うからです。AIと一緒にコードを書くのではなく、自分のコードを「管理する」「送り出す」という、開発の裏側の作業に入っていきます。

セットアップ ─ 全員で足場を固める

まず取りかかったのは、GitとGitHubの環境構築です。Gitのインストール確認ではVSCodeのターミナルを開き、`git –version`と入力してバージョン番号が表示されることを確認。続いてGitHubアカウントを作成し、ターミナルでユーザー名とメールアドレスを登録する初期設定を済ませました。

Gitのインストールもアカウント作成も、一つひとつは難しくありません。ただ、初めて触る画面が次々と現れるため、スタッフが個別にサポートに入りながら全員のペースを揃えていきました。ここまでで約1時間。想定よりも時間がかかりましたが、全員がセットアップを完了できたことが何より大切です。

4つのキーワード ─ コミット、プッシュ、GitHub、GitHub Pages

休憩を挟んで後半戦。ここからは、今日覚えてほしい4つの言葉を軸に、GitとGitHubの全体像を説明しました。

「前回までの状態って、自分のパソコンの中にしかデータがない。パソコンが壊れたら、せっかく作ったものが全部消えてしまう」。そんな問いかけから始まり、それぞれの役割を整理していきます。コミットは「セーブ」。ゲームのセーブポイントのように、ある時点の状態を記録すること。プッシュはコミットしたデータをGitHubに送ること。パソコンが壊れてもGitHubにコードが残ります。GitHubはコードを保管・共有できるWebサービスで、インターネット上の保管庫。そしてGitHub Pagesは、GitHubに置いたHTMLファイルをそのままWebサイトとして公開してくれる機能です。

「セーブして、GitHubに上げて、公開する。この3ステップを順番にやっていきます」。ゴールの全体像を先に見せてから、手を動かすパートに入りました。

手を動かす ─ フォルダを開いて、最初のコミット

前回作った「card」フォルダをVSCodeで開き、3つのファイル（card.html、script.js、style.css）があることを確認。ここで最初の作業として、`card.html`を`index.html`にリネームしました。Webの世界では、最初に表示されるページのファイル名は`index.html`にするという決まりがあるためです。

次に、VSCodeの左端に並ぶアイコンから「ソース管理」を開き、「リポジトリを初期化する」ボタンをクリック。リポジトリとは、Gitが変更履歴を記録する場所のこと。初期化が成功すると、ファイル名の横に「U（Untracked：まだ記録されていない）」のマークが表示されます。

いよいよ最初のコミット。「変更」セクションの右端にあるプラスボタンを押してファイルをステージングに追加すると、マークが「U」から「A（Added：追加された）」に変わります。メッセージ欄に「初めてのコミット」と入力し、チェックマークのボタンをクリック。ステージングされていたファイルの一覧が消え、画面左下に「main」の文字が表示されれば成功です。

講師が一つひとつの手順を見せながら進め、スタッフが個別にサポートに入る形で、全員が初めてのコミットを完了しました。

プッシュ ─ 自分のコードがGitHubに届いた瞬間

コミットボタンを押した後、同じ場所に「ブランチの発行」というボタンが現れます。これをクリックすると、GitHubへの認証を求めるポップアップやブラウザが開きます。ログインして許可を与え、「パブリックリポジトリ」を選択。画面右下に「リポジトリ”card”を正常にGitHubに公開しました」という通知が出れば、プッシュは成功です。

「パブリックじゃなくてプライベートを選んでしまった方は、後から設定を変更できます」。GitHub Pagesの無料プランはパブリックリポジトリでのみ使えるため、ここでの選択が次回の公開作業に関わってきます。

最後に、ブラウザでGitHubを開き、自分のリポジトリを確認しました。右上のアイコンから「Your repositories」をクリックし、「card」というリポジトリを開くと、index.html、script.js、style.cssの3つのファイルがそこに並んでいます。

自分のパソコンの中にしかなかったファイルが、インターネット上のサービスに保管された。目に見える形でそれを確認できた瞬間でした。

これからの道のり

次回は2026年7月29日（火）19:00から。今回のコミットとプッシュを振り返ったあと、GitHub Pagesを使ってWebサイトとして公開するところまで進めます。さらに、後半からはAI活用の新しいフェーズに入るための準備として、Claude Proの登録案内も行う予定です。

体験会でAIに触れ、第1回でコードに触れ、第2回で3つの技術の役割を知り、第3回でコードをGitHubに送り出した。次はいよいよ、作ったものを世界に公開する番です。

コース全体の流れについては、[体験会レポート](https://mirakura.jp/archive/1413/)をご覧ください。

未来クライムとは

なりたい自分になる。やりたい仕事を、やり続ける。そんな未来を手に入れるためには、険しい山を登るように、たくさんの学びや出会い、そして挑戦が必要です。

未来クライムは、「なりたい自分」を目指すみなさんを支えるために、出会いと学びの場を届けていきます。

第4期目を迎えた今年度の「未来クライム ～PROGRAMMING ACADEMY BIBAI～」でも、美唄市からIT人材を世に送り出していくために、生成AIやプログラミングを継続的に学べる場を提供していきます。

小さな一歩の積み重ねが、やがて大きな成長につながります。仲間とともに学び合いながら、生成AIとプログラミングの世界を、一歩ずつ一緒に進んでいきましょう！