VS Code インストールガイド
📅 実施期限：授業日の前日まで
⏰ 所要時間：約15-20分
💻 対象：Windows・Mac両対応
📢 重要なお知らせ
この講座では Visual Studio Code（VS Code） という無料ソフトを使用します。
授業をスムーズに進めるため、必ず事前にインストールを完了させてください。
VS Codeとは？
- Microsoft社が開発する無料のテキストエディタ
- 世界中のプログラマーが使用する人気ソフト
- HTMLコードを色分け表示して見やすくする
- 自動補完機能でタイプミスを防ぐ
🚀 インストール手順
STEP 1：ダウンロード
- インターネットで「VS Code」と検索、または以下にアクセス
https://code.visualstudio.com/ - 「Download for Windows」または「Download for Mac」をクリック
- お使いのパソコンに合わせて選択してください
- ダウンロード完了まで待つ（数分）
STEP 2：インストール
🖥️ Windowsの場合
- ダウンロードしたファイル（VSCodeUserSetup-x64-x.x.x.exe）をダブルクリック
- セットアップ画面で「次へ」をクリック
- ライセンス条項に「同意する」を選択して「次へ」
- インストール先はそのままで「次へ」
- 以下に必ずチェック✅を入れてください
- ✅ エクスプローラーのファイル コンテキスト メニューに [Code で開く] アクションを追加する
- ✅ エクスプローラーのディレクトリ コンテキスト メニューに [Code で開く] アクションを追加する
- ✅ サポートされているファイルの種類のエディターとして、Code を登録する
- 「次へ」→「インストール」→「完了」
🍎 Macの場合
- ダウンロードした「Visual Studio Code.zip」をダブルクリックして展開
- 展開された「Visual Studio Code.app」をアプリケーションフォルダにドラッグ
- Launchpadから「Visual Studio Code」をクリックして起動
- セキュリティ警告が出たら「開く」をクリック
STEP 3：言語設定（必要な人のみ）
VS Codeは英語で表示されますが、日本語や中国語など多言語に変更できます。
英語のままでも問題ありませんので、必要な方のみ設定してください。
🇯🇵 日本語化する場合
- VS Codeを起動
- 左サイドバーの四角いブロックアイコン🧩をクリック
- 検索ボックスに「Japanese」と入力
- **「Japanese Language Pack for Visual Studio Code」**を見つける
- 作成者：Microsoft
- 「Install」をクリック
- インストール後、右下の「Restart」をクリックしてVS Codeを再起動
🇨🇳 中国語化する場合
- 検索ボックスに「Chinese」と入力
- 「Chinese (Simplified) Language Pack for Visual Studio Code」（簡体字） または 「Chinese (Traditional) Language Pack for Visual Studio Code」（繁体字）を選択
- 作成者：Microsoft
- 「Install」をクリック
- インストール後、右下の「Restart」をクリックしてVS Codeを再起動
🌐 その他の言語
以下の言語にも対応しています：
- Korean（韓国語）
- Spanish（スペイン語）
- French（フランス語）
- German（ドイツ語）
- Portuguese（ポルトガル語）
- Russian（ロシア語）
✅ 成功確認： メニューが選択した言語になっていればOK
📝 注意： 授業では日本語で説明しますが、機能は同じです
STEP 4：必須拡張機能のインストール
授業で使用する便利な機能を追加します。
Auto Rename Tag のインストール
- 拡張機能パネル（🧩アイコン）で「Auto Rename Tag」と検索
- **作成者「Jun Han」**のものを選択
- 「インストール」をクリック
機能： HTMLタグを変更すると、対応するタグも自動で変更されます
Live Server のインストール
- 拡張機能パネルで「Live Server」と検索
- **作成者「Ritwick Dey」**のものを選択
- 「インストール」をクリック
機能： ファイルを保存すると、ブラウザが自動で更新されます
YouTube の動画
https://www.youtube.com/watch?v=lWs5HyVd7OA
🧪 動作確認テスト
テスト用ファイルの作成
- デスクトップに「test」フォルダを作成
- VS Codeで「ファイル」→「フォルダーを開く」
- 作成した「test」フォルダを選択
- 「ファイル」→「新しいファイル」
- ファイル名を「test.html」として保存
テストコードの入力
以下をコピー＆ペーストまたは手入力してください：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>
<h1>VS Code動作確認</h1>
<p>正常に動作しています！</p>
</body>
</html>
機能テスト
✅ Auto Rename Tag テスト
<h1>の部分を<h2>に変更- 自動的に
</h1>が</h2>に変わればOK
✅ Live Server テスト
- test.htmlファイルで右クリック
- 「Open with Live Server」を選択
- ブラウザが開いてページが表示されればOK
📋 完了チェックリスト
授業当日までに以下を確認してください：
- [ ] VS Codeが正常に起動する
- [ ] 言語設定が完了している（設定した場合）
- [ ] 拡張機能が正しくインストールされている
- [ ] 言語パック（設定した場合）
- [ ] Auto Rename Tag
- [ ] Live Server
- [ ] Auto Rename Tag が動作する
- [ ] Live Server でブラウザが開く
🚨 トラブル対応
よくある問題と解決方法
❌ 言語設定が反映されない
解決法：
Ctrl+Shift+P（Win）/Cmd+Shift+P（Mac）を押す- 「Configure Display Language」と入力
- 希望する言語（日本語、中国語等）を選択してVS Codeを再起動
❌ 拡張機能が見つからない
解決法：
- インターネット接続を確認
- 検索キーワードのスペルを確認
- VS Codeを再起動
❌ Live Serverが動作しない
解決法：
- ファイルが「.html」で終わっているか確認
- ファイルが保存されているか確認
- VS Codeを再起動
❌ セキュリティ警告が出る（Mac）
解決法：
- ファイルを右クリック→「開く」を選択
- または「システム環境設定」→「セキュリティとプライバシー」→「このまま開く」
📞 サポート情報
困ったときは…
- まず上記のトラブル対応を試してください
- それでも解決しない場合
- 先生に相談
- 授業当日の開始前に申し出てください
- クラスメイトと協力して解決
システム要件
- Windows: Windows 7/8/10/11
- Mac: macOS 10.11 以降
- メモリ: 最低1GB（推奨2GB）
- ディスク容量: 約200MB
🎯 授業での効果
VS Codeを使うとこんなに便利！
- コードが色分け表示されて読みやすい
- 自動補完でタイプミスを防げる
- リアルタイム更新で作業効率UP
- プロと同じツールで本格的な学習
将来への投資
- 大学でのプログラミング授業で活用
- 就職後のWeb開発業務でも使用
- 様々なプログラミング言語に対応
📌 重要事項
必ず守ってください
- 授業日の前日までに必ず完了させてください
- 困ったことがあれば早めに相談してください
- 動作確認まで完了していることを確認してください
授業当日
- VS Codeを起動できる状態にしておいてください。
- インストールできなかった場合は授業開始前に申し出てください
- VS Code が無い場合は、メモ帳などテキストが入力できるソフトで代替します。（少し入力が面倒なだけです）
コメント