🚀 プログラミング学習

環境構築ガイド：作ったアプリを世界に公開しよう！

対象：中高生・パソコン初心者 ／ JavaScript コース レッスン7 完了後

🎯 学習目標

📖 1. 導入

ここまで HTML・CSS・JavaScript を学んで、動くウェブアプリを作れるようになりました。

次は、作ったものを世界中の人がアクセスできる場所に公開しましょう！

このガイドでは、2つのことをやります。

  1. Live Server を使って、コードを書きながらリアルタイムで確認できる環境を整える
  2. GitHub Pages を使って、無料でサイトを公開する

英語のメニューが出てきますが、手順通りに進めれば大丈夫です。一緒にやってみましょう！

💻 2. VS Code のインストール（まだの人だけ）

レッスン0 で VS Code をインストール済みの人はスキップしてください。

  1. ブラウザで https://code.visualstudio.com を開く
  2. 「Download」ボタンをクリックしてインストールする
    • Windows：.exe ファイルをダブルクリック → 「次へ」を押し続ける
    • Mac：.dmg ファイルをダブルクリック → アイコンを「Applications」にドラッグ

⚡ 3. Live Server 拡張機能

Live Server って何？

VS Code に追加できる拡張機能（プラグイン）です。インストールすると、ファイルを保存するたびにブラウザが自動で更新されます。

インストール手順

  1. VS Code を開く
  2. 左のサイドバーにある「拡張機能」アイコン（四角が4つ並んだアイコン）をクリック
  3. 検索ボックスに Live Server と入力
  4. 「Live Server」（作者：Ritwick Dey）が表示されたら「Install」をクリック

使い方

  1. VS Code でプロジェクトフォルダを開く
  2. index.html を開いた状態で、右下の「Go Live」ボタンをクリック
  3. ブラウザが自動で開き、ページが表示される
  4. コードを書いて Ctrl+S（Mac は Cmd+S）で保存すると、ブラウザが自動で更新される
✅ これで「保存 → ブラウザで確認」がとてもスムーズになります！

🐙 4. GitHub アカウント作成

GitHub って何？

GitHub（ギットハブ）は、コードを保存・管理・公開できる無料のサービスです。世界中のプログラマーが使っています。

💡 英語のサイトですが、手順通りに進めれば大丈夫です。

アカウント作成手順

  1. ブラウザで https://github.com を開く
  2. 右上の「Sign up」をクリック
  3. 以下を入力して進む：
    • Username（ユーザー名）：半角英数字で好きな名前（例：taro-yamada）
    • Email address：自分のメールアドレス
    • Password：パスワード（8文字以上）
  4. 「Verify your account」でパズル認証を完了する
  5. 登録したメールアドレスに確認メールが届くので、メール内のリンクをクリックして認証する
✅ アカウントが作れたら、https://github.com/あなたのユーザー名 があなたのページになります。

🌐 5. GitHub Pages での公開手順

① リポジトリを作成する

リポジトリ（repository）とは、GitHub 上のプロジェクトフォルダのことです。

  1. GitHub にログインした状態で、右上の「+」→「New repository」をクリック
  2. 以下を入力する：
    • Repository name：my-website（半角英数字とハイフンのみ）
    • Public（公開）を選択する
  3. 「Create repository」をクリック

② ファイルをアップロードする

  1. 作成したリポジトリのページで「uploading an existing file」リンクをクリック
  2. 自分のプロジェクトフォルダの中のファイルをすべてドラッグ＆ドロップする（index.html・style.css・script.js など）
  3. ページ下部の「Commit changes」ボタンをクリック
⚠️ フォルダごとドラッグするとうまくいかない場合があります。フォルダの中のファイルを選んでドラッグしましょう。

③ GitHub Pages を有効にする

  1. リポジトリのページ上部の「Settings」タブをクリック
  2. 左のメニューから「Pages」をクリック
  3. 「Branch」のドロップダウンで「main」を選び、「Save」をクリック

④ 公開 URL を確認する

数分待つと、ページ上部に以下のような URL が表示されます：

https://あなたのユーザー名.github.io/my-website/

✅ この URL を友達や家族に送れば、誰でもあなたのサイトを見られます。

📌 6. まとめ

あなたのサイトが世界中からアクセスできるようになりました！🎉

コードを更新したいときは、GitHub のリポジトリページで「Add file」→「Upload files」から新しいファイルをアップロードすれば、サイトが更新されます。

🚀 7. 次のステップ

公開できたら、次は自分だけのオリジナル作品を作ってみましょう！

テーマは自由です。好きなものを紹介するページ、クイズアプリ、日記サイト——何でも OK です。

→ プロジェクトアイデア集を見る