『1冊ですべて身につく HTML&CSSとWebデザイン 入門講座』を始めて、現在131ページまで読み進めました。CSSの章の物量が多くて、なかなか実践まで進みませんね🤔 もっと勉強時間を増やさないとなぁと思いつつ、今回は最近よく使うようになった「Visual Studio Code（通称：VSコード）」について、初心者が知りたい基本的な使い方をまとめてみようと思います。
Visual Studio Code（VSコード）の基本的なところが知りたい
前にVSコードの概要って教えてもらったよね。確か「プログラミング用の“高機能なノート”」だっけ。なんとなく使っているんだけど、画面の見方とかできることか、一通り知りたいので教えてほしいな。
私も知りたい！ とりあえず使ってみたけど、細かいところがよくわからないんだよね。取説が欲しいよ〜。
了解しました。まずは画面の見方から解説していきますね。
（・・・おや、ニンゲンたちが何か見慣れないことをやっているぞ。何をやってるんだろ。そしてあのロボットみたいのはなんなんだか。）
Visual Studio Code（VSコード）の基本レイアウト
| エリア | 名称 | 役割（初心者向け） |
|---|---|---|
| 左端の縦バー | アクティビティバー |
VS Codeの「機能切り替えメニュー」。 エクスプローラー・検索・拡張機能などを切り替える場所。 最初は「エクスプローラー」と「拡張機能」だけ使えればOK。 |
| 左側 | プライマリーサイドバー |
アクティビティバーで選んだ機能の中身が表示される場所。 ファイル一覧（エクスプローラー）や検索結果などがここに出る。 |
| 中央 | エディター |
実際にコードを書くメイン画面。 HTML・CSS・JavaScriptを編集する場所。 タブで複数ファイルを同時に開ける。 |
| 下部 | パネル |
出力結果・エラー・ターミナルなどを表示する場所。 Live Serverやデバッグ時によく使う。 最初は「出力」だけ見ればOK。 |
| 最下部 | ステータスバー |
現在のファイル情報を表示。 行番号・文字コード・言語モードなどが確認できる。 「今HTMLを書いているか？」を確認するのに便利。 |
アクティビティバー
| アイコン | 名称 | 役割（初心者向け） | 初心者の優先度 |
|---|---|---|---|
| 📁 | エクスプローラー | ファイル一覧を見る場所。HTML/CSS/JSを「作る・開く・整理する」基本の入口。 | ★★★★★ |
| 🔍 | 検索 | プロジェクト全体の文字検索・置換。ファイルが増えるほど便利。 | ★★★★☆ |
| 🔃 | ソース管理 | Gitで変更履歴を管理する場所。学習初期は無理に使わなくてもOK。 | ★★☆☆☆ |
| 🐞 | 実行とデバッグ | プログラムの実行やエラー調査に使う。JavaScript学習で登場。 | ★★☆☆☆ |
| 🧩 | 拡張機能 | 機能を追加する場所。例：日本語化、Live Server、Prettierなど。 | ★★★★☆ |
| 👤 | アカウント | GitHubなどのアカウント連携用。最初は特に触らなくてOK。 | ★☆☆☆☆ |
| ⚙️ | 管理（設定） | テーマ変更・日本語化・ショートカット設定など。困ったときに使う。 | ★★★☆☆ |
| 🛰️ | リモート（Remote/SSH 等） | 別PCやサーバーに接続して作業する上級向け機能。最初はスルーでOK。 | ★☆☆☆☆ |
引用・参考元：
Visual Studio Code Documentation
https://code.visualstudio.com/docs/getstarted/userinterface
なるほど。こういう感じなのね。少しそれぞれの項目の役割がわかってきたかな。
とりあえず初心者としては、エクスプローラーと検索、拡張機能が使えればいいの？
いい視点ですね。最初のうちはその認識でまったく問題ありませんよ。初心者の段階では、
- エクスプローラー：ファイルやフォルダの構造を把握する
- 検索：エラーや特定のコードを素早く見つける
- 拡張機能：HTML / CSS / JavaScriptを快適に書くための補助
この3つが使えれば、学習は十分スムーズに進みます。
デバッグやGit、ターミナルなどは、『必要になったタイミングで少しずつ覚える』で大丈夫です。登山で言えば、最初からアイゼンやロープを使わず、まずは登山道を歩く感じですね。まずは「書く・保存する・表示する」を繰り返して、VSコードに慣れるところからいきましょう 😊
グェー〜、グヮー〜（へーそうなのか、ただ拡張機能とか何使えばいいんだよ。もっと説明しろよな😤）
あっ！！！！！ 雷鳥だぁぁぁぁー。可愛いね〜。君も何か興味あるのかな？
おおおお、冬の雷鳥は初めて見たよ。こんな声で鳴くんだね。なんか訴えかけてるけど、何言ってるかわからないなぁ。
雷鳥さん、何か必死ですね。私が同時通訳してみましょう。
さっきから聞いていると説明が途中じゃん。オイラは拡張機能のオススメが知りたいんだよ。早く続き言ってくれよ。
何言ってるかわかるし、先生万能すぎでしょ！ っていうかライチョーも勉強熱心すぎ！！ 君なんてお名前なの？
オイラはライ太。お前らニンゲンが山の中にずかずか入ってきて、何か勉強し始めたから見張っていたんだ。山の中では見かけないものだったから、ついつい気になっちゃったじゃないか。どうしてくれんだ！
ライ太か〜、よろしくね。まさか雷鳥に興味を持たれるとは思わなかったよ。それじゃ先生、最後にオススメの拡張機能教えてくれる？
いい流れですね。では初心者向けに「まず入れておくと安心なVSコード拡張機能」を、目的別に厳選して紹介しますね 😊 全部入れなくて大丈夫。必要になったら追加でOKです。
🌱 最初に入れておくと安心な拡張機能（3つ）
① Japanese Language Pack for VS Code
👉 VS Codeのメニューを日本語化
- 設定画面で迷いにくくなる
- 英語アレルギー対策に◎
登山で言うと「案内板を英語から日本語にしてくれる」
② Live Server
👉 HTMLを保存したら、自動でブラウザに反映してくれる
- 「保存 → 画面更新」を自動化
- 初心者が一番「おおっ」となるやつ
- HTML / CSS 学習の必須装備
登山で言うと「登山口までの舗装路」
③ Prettier – Code formatter
👉 コードを自動で整形してくれる
- インデント（字下げ）を勝手に揃えてくれる
- 「見た目がぐちゃぐちゃ」問題を防止
- 保存時に自動整形も可能
登山で言うと「道をならしてくれる整備の方」
おお、必須のいい感じじゃん。これ入れとけば最初は安心できそうだな。
そうだね〜この辺は使うと便利そう。私もさっそく入れよっと。
とりあえず日本語にしないと、何の意味だかさっぱりだからね。コードの自動反映もありがたいなぁ。
🎯 まとめ（AI先生の結論）
初心者の今は、
- エクスプローラー
- 検索
- 拡張機能（Live Server / Prettier）
この3点セットでOK。
登山と同じで、最初は道具を増やさず「歩くこと」に集中しましょう。さあ、まずは👉 HTMLを書いて → 保存して → 表示するこの一歩を、何度も繰り返していきましょう😊
最初からたくさん道具があっても使いこなせないしね。どんどんやっていかないとなぁ。
必須のものだけ手に入れたら、あとは登るだけだね。
お前ら、山に登るぐらい、しっかり勉強しろよ。いろいろ脱線しそうで心配だわ😤
というわけで、今回はVSコードの基本レイアウトから、初心者向けの内容をまとめてみました。山の珍客？も現れ、これからもプログラム勉強も賑やかになりそうです😃 ではでは👋
