メインコンテンツまでスキップ

Day 4: ブラウザ版VSCodeで快適開発 💻

🎯 今日の目標​

GitHubのリポジトリをブラウザ上で直接編集できる「github.dev」（ブラウザ版VSCode）の使い方をマスターしましょう！

📝 学習内容​

  1. github.devの起動方法
  2. ファイルの編集と保存
  3. ソース管理機能の使い方
  4. 便利なショートカットキー

1. github.devとは？​

特徴​

  • インストール不要: ブラウザだけで使える
  • VSCodeと同じ操作感: 慣れ親しんだインターフェース
  • どこでも編集可能: タブレットやChromebookでもOK
  • 自動保存: 変更は自動的にGitHubに反映

メリット​

  • ソフトウェアのインストールが不要
  • 学校のPCでも使える
  • OSに依存しない
  • 複数ファイルの同時編集が可能

2. github.devの起動方法​

方法1: ピリオドキー（.）を押す 🎯おすすめ！​

  1. GitHubでリポジトリを開く
  2. キーボードの「.」（ピリオド）キーを押す
  3. 自動的にgithub.devが起動！

💡 ポイント: 日本語キーボードでは「る」のキーです

方法2: URLを変更する​

  1. リポジトリのURL:

    https://github.com/ユーザー名/リポジトリ名

  2. .comを.devに変更:

    https://github.dev/ユーザー名/リポジトリ名

方法3: VSCodeボタンを使う​

  1. リポジトリページの「Code」ボタンをクリック
  2. 「Open with Codespaces」の横の「...」をクリック
  3. 「Open in github.dev」を選択

3. 基本的な操作方法​

ファイルの編集​

  1. ファイルを開く

    • 左側のエクスプローラーでファイルをクリック
    • または Ctrl+P（Mac: Cmd+P）でファイル名を検索

  2. 編集する

    • 通常のテキストエディタと同じように編集
    • 自動補完機能も使える
    • シンタックスハイライトで見やすい

  3. 保存する

    • Ctrl+S（Mac: Cmd+S）で保存
    • または自動保存機能を有効化

新しいファイルの作成​

  1. エクスプローラーで右クリック
  2. 「新しいファイル」を選択
  3. ファイル名を入力（拡張子も忘れずに！）

フォルダの作成​

  1. エクスプローラーで右クリック
  2. 「新しいフォルダー」を選択
  3. フォルダ名を入力

4. ソース管理（コミット）​

変更の確認とコミット​

  1. ソース管理タブを開く

    • 左側のアイコンから「ソース管理」をクリック
    • または Ctrl+Shift+G（Mac: Cmd+Shift+G）

  2. 変更内容を確認

    • 変更されたファイルが一覧表示される
    • ファイルをクリックすると差分が表示される

  3. コミットメッセージを入力

    良い例:
    - "プロフィールページを追加"
    - "READMEに説明を追加"
    - "誤字を修正"

    悪い例:
    - "更新"
    - "aaa"
    - "test"

  4. コミット実行

    • Ctrl+Enter（Mac: Cmd+Enter）でコミット
    • またはチェックマークボタンをクリック

5. 便利な機能とショートカット​

必須ショートカット​

操作Windows/LinuxMac
ファイル検索Ctrl+PCmd+P
保存Ctrl+SCmd+S
元に戻すCtrl+ZCmd+Z
やり直しCtrl+Shift+ZCmd+Shift+Z
検索Ctrl+FCmd+F
置換Ctrl+HCmd+H
ソース管理Ctrl+Shift+GCmd+Shift+G

マルチカーソル機能​

  • Alt+クリック（Mac: Option+クリック）で複数箇所を同時編集
  • 同じ単語を一括で変更できる！

ファイルの比較​

  1. 変更したファイルをソース管理で選択
  2. 変更前と変更後が並んで表示される
  3. どこを変更したか一目瞭然

6. OS別の注意点​

Windows​

  • 日本語入力中は一部ショートカットが効かない場合がある
  • その場合は半角英数に切り替えてから実行

Mac​

  • Cmdキーを使うことが多い
  • トラックパッドのジェスチャーも使える

Chromebook​

  • 基本的にWindows/Linuxと同じショートカット
  • 一部の特殊キーは使えない場合がある

タブレット（iPad等）​

  • 外付けキーボードがあると便利
  • タッチ操作でも基本的な編集は可能
  • ソフトウェアキーボードでは一部制限あり

7. トラブルシューティング​

Q: ピリオドキーを押しても反応しない​

A: 以下を確認してください：

  • リポジトリのトップページで押していますか？
  • 日本語入力がONになっていませんか？
  • ブラウザのアドレスバーにフォーカスがありませんか？

Q: 保存したのに変更が反映されない​

A: ソース管理タブでコミットを実行しましたか？保存だけではGitHubに反映されません。

Q: 日本語が文字化けする​

A: ファイルの文字コードを確認してください。UTF-8を推奨します。

Q: 編集できない/読み取り専用と表示される​

A: 以下を確認してください：

  • 自分のリポジトリですか？（他人のリポジトリは直接編集できません）
  • ログインしていますか？
  • 書き込み権限がありますか？

8. 演習問題​

演習1: github.devを起動してみよう​

  1. 自分のリポジトリを開く
  2. ピリオドキーでgithub.devを起動
  3. READMEファイルを開く

演習2: 複数ファイルを編集​

  1. 新しいファイル「profile.html」を作成
  2. 簡単なHTMLを記述
  3. READMEにprofile.htmlへのリンクを追加
  4. 両方の変更を1つのコミットでまとめる

演習3: マルチカーソルを使ってみよう​

  1. 同じ単語が複数ある文書を開く
  2. Alt+クリックで複数箇所を選択
  3. 一括で編集してみる

9. 今日のまとめ​

✅ github.devはブラウザで使えるVSCode
✅ ピリオドキー（.）で簡単起動
✅ ファイル編集後は必ずコミット
✅ ショートカットキーで効率アップ
✅ どんなデバイスでも開発可能！

🎉 お疲れさまでした！​

github.devを使えば、いつでもどこでもコーディングができます。明日は「ブランチとプルリクエスト」について学びます。チーム開発の基本となる重要な内容です！

次回予告: Day 5 - ブランチとプルリクエスト​

  • ブランチって何？
  • プルリクエストの作り方
  • コードレビューの受け方
  • マージの仕組み