VSCode & GitHub 活用マニュアル

～将棋タイマーを制作した後に、開発環境と公開手順を学ぼう～

目次

1. はじめに
2. VSCode の準備
3. GitHub リポジトリ作成
4. Git を使ったコミットとプッシュ
5. Git の初期設定と確認
6. GitHub Pages で公開
7. 授業での進行例

1章 はじめに

将棋タイマーを作成した後に、自分の作品を GitHub で管理し、Web 上に公開する手順を学びます。

2章 VSCode の準備

• VSCode をダウンロード＆インストール
• 拡張機能「Live Server」をインストール
• Git がインストールされていることを確認
• リポジトリフォルダを VSCode で開く

3章 GitHub リポジトリ作成

1. GitHub にログインして新しいリポジトリを作成
2. README.md を作成して初回コミット
3. Public リポジトリがおすすめ（授業共有しやすい）

4章 Git を使ったコミットとプッシュ

ターミナルで以下を実行します：

git init
git add .
git commit -m "初回コミット"
git branch -M main
git remote add origin <リポジトリURL>
git push -u origin main

変更を加えたら、add → commit → push の順で更新します。

git init

git add .

git commit -m "初回コミット"

git branch -M main

git remote add origin <リポジトリURL>

git push -u origin main

git add .
git commit -m "変更内容"
git push

4.5章 Git の初期設定と確認

1. ユーザー情報を登録

初回のみ、以下を入力して自分の名前とメールアドレスを設定します。

git config --global user.name "自分の名前"
git config --global user.email "自分のメールアドレス"

例：

git config --global user.name "Taro Hamada"
git config --global user.email "taro@example.com"

※グローバル設定はパソコン全体に適用されます。共有PCでは --global を省略して「このプロジェクトだけ」に設定してもOKです。

2. 設定内容を確認

現在の設定を確認するには以下のコマンドを使います。

ユーザー名だけ確認したい場合：

git config user.name

メールアドレスだけ確認したい場合：

git config user.email

3. よくあるトラブル

• 設定ミス → コミットに正しい名前が残らない
• 設定していない → 初回コミット時に警告が出る
• グローバル設定を別の人が上書きしてしまう（共用PC注意）

5章 GitHub Pages で公開

1. GitHub リポジトリの「Settings → Pages」にアクセス
2. Main branch / root を選択して保存
3. 数分後、公開 URL が発行される　例: https://username.github.io/shogi-timer/
4. リンクをクリックして、ブラウザで確認

6章 授業での進行例

タイマー制作教材に戻る