HTMLやCSSの勉強を始めて、いよいよコードを書くぞ！と意気込んでインストールしたVS Code。

……ところが、実際に開いてみると、

「えっ！全部英語なんだけど！？」

Instagramで見ていたときは、ただ「かっこいいコードを書く画面」というイメージしかありませんでした。

実際に開いてみると、どこを触ればいいのかも分からない。

英語ばかりの画面を見ながら、

と、少し焦ったのを覚えています（笑）。

そんな状態から少しずつ設定を進めて、便利な拡張機能を入れていきました。

すると、最初は「何これ？」だったVS Codeが、少しずつ**「コードを書くための相棒」**みたいな存在に。

今回は、私がVS Codeを使い始めたときに最初にインストールしたおすすめの拡張機能6つをご紹介します。

どれも今でも使っているものなので、これからHTMLやCSSの勉強を始める方や、VS Code初心者の方の参考になれば嬉しいです。

---

---

VS Codeの「拡張機能」って何？

まず、VS Codeを使い始めたばかりの方は、

「そもそも拡張機能って何？」

と思いますよね。

私も最初はよく分かっていませんでした（笑）。

VS Codeには、あとから便利な機能を追加できる**「拡張機能（Extensions）」**があります。

たとえば、

• VS Codeを日本語化する
• HTMLを書く作業をラクにする
• HTMLの変更をブラウザですぐ確認する
• コードを自動で整える
• ファイルやフォルダを見やすくする

など、さまざまな機能を追加できます。

最初から全部入れる必要はありません。

「これ便利そう！」と思ったものから少しずつ試していけば大丈夫です。

私も最初から全部を理解していたわけではなく、使いながら少しずつ覚えていきました。

---

VS Code初心者におすすめの拡張機能6選

ここからは、私が実際に最初に入れた拡張機能を紹介していきます。

① Japanese Language Pack｜VS Codeを日本語化

まず最初に入れたのは、Japanese Language Packです。

名前の通り、VS Codeの表示を日本語にしてくれる拡張機能です。

VS Codeを初めて開いたときは、英語のメニューがずらっと並んでいて、正直かなり戸惑いました。

と思ったのを覚えています（笑）。

もちろん、英語のままでもVS Codeは使えます。

でも、プログラミング自体が初めてだった私は、まず**「何がどこにあるのか分かる状態」**にしたかったので、日本語化することにしました。

日本語に変えただけでも、かなり安心感がありました。

こんな人におすすめ

• VS Codeを初めて使う人
• プログラミング初心者
• 英語のメニューに抵抗がある人
• まずはVS Codeの操作に慣れたい人

最初から無理に英語環境に慣れようとせず、自分が使いやすい環境を作ることも大切だと思います。

---

② Live Server｜HTMLの変更をブラウザですぐ確認

次に紹介したいのが、Live Serverです。

これは個人的にかなり感動した拡張機能でした。

HTMLやCSSを書いて保存すると、ブラウザですぐに変更を確認できます。

初めて使ったときは、

と本当にびっくりしました。

HTMLを書いて、ブラウザを開いて、確認して……。

という作業を毎回繰り返すよりも、書いたものをすぐブラウザで確認できるので、初心者にはかなりありがたい機能です。

特にHTMLやCSSの勉強では、

「ここを変えたらどうなるんだろう？」

と試しながら進めることが多いですよね。

変更したところをすぐ確認できるので、試行錯誤しながら学びたい人には便利だと思います。

こんな人におすすめ

• HTMLやCSSを勉強している人
• Webサイト制作を始めたばかりの人
• コードの変更をすぐ確認したい人
• ブラウザを何度も更新するのが面倒な人

**「書く→保存→確認」**の流れがスムーズになるので、HTMLやCSSの勉強を始めたら入れておきたい拡張機能のひとつです。

---

③ Auto Rename Tag｜HTMLのタグ変更をラクにする

HTMLを書くときに便利だったのが、Auto Rename Tagです。

HTMLでは、

<p>こんにちは</p>

のように、開始タグと終了タグをセットで書くことがあります。

このとき、開始タグを変更すると終了タグも自動的に変更してくれるのがAuto Rename Tagです。

例えば、

<h2>こんにちは</h2>

を、

<h3>こんにちは</h3>

に変更すると、終了タグも一緒に変更してくれます。

初心者の頃は、タグを入力するだけでも意外と間違えます。

私も、

「開始タグは変えたのに、終了タグを変えるのを忘れてた……」

ということがありました。

そんな小さなミスを減らしてくれるので、かなり助かりました。

こんな人におすすめ

• HTML初心者
• HTMLのタグ入力が苦手な人
• タグの閉じ忘れや変更ミスを減らしたい人
• HTMLを効率よく書きたい人

小さな機能ですが、使い始めると「これがないと不便かも」と感じるタイプの拡張機能です。

---

④ Path Intellisense｜画像やCSSのパス入力をサポート

次に紹介するのは、Path Intellisenseです。

これは、画像やCSSなどのファイルパスを入力するときに候補を表示してくれる拡張機能です。

HTMLやCSSを勉強し始めた頃、私が苦戦したもののひとつが「パス」でした。

そもそも最初は、

「パスって何！？」

という状態（笑）。

画像を表示したくても、

「ファイル名、これで合ってる？」

「フォルダの場所はどこだっけ？」

と何度も迷っていました。

Path Intellisenseを使うと、入力途中でファイルやフォルダの候補が表示されるので、手入力する負担が減ります。

初心者にとっては、こういう小さな「分からない」を減らしてくれる機能がありがたかったです。

こんな人におすすめ

• HTML初心者
• CSSを勉強している人
• 画像を読み込むことが多い人
• ファイルパスの入力が苦手な人
• ファイル名の入力ミスを減らしたい人

---

⑤ Prettier｜コードを自動で整えてくれる

コードを書いていると、いつの間にかインデントや改行がバラバラになってしまうことがあります。

そんなときに便利なのが、Prettierです。

Prettierは、コードを自動的に整えてくれるフォーマッターです。

初心者の頃は、コードを書くことに必死で、

「見た目まできれいにする余裕なんてない！」

という状態でした（笑）。

でも、Prettierを使うとコードを見やすく整えてくれるので、あとから見返したときにも分かりやすくなります。

コードがきれいに整っているだけで、

「なんだかちょっとプログラマーっぽい……！」

とテンションも上がりました（笑）。

こんな人におすすめ

• コードをきれいに整えたい人
• インデントが苦手な人
• HTMLやCSSを勉強している人
• コードを書くことに集中したい人

「コードをきれいに書く」ということに慣れていない初心者ほど、便利さを感じやすい拡張機能だと思います。

---

⑥ Material Icon Theme｜ファイルやフォルダを見やすくする

最後に紹介するのは、Material Icon Themeです。

これは、VS Code内のファイルやフォルダにアイコンを表示して、見やすくしてくれる拡張機能です。

正直、最初は、

と思っていました。

でも、実際に使ってみると意外と便利。

HTML、CSS、画像など、ファイルの種類が視覚的に分かりやすくなるので、ファイルが増えてきたときにも見つけやすくなります。

そして何より……

ちょっとだけ「できる人感」が出ます（笑）。

これ、初心者にとっては意外と大事だったりします。

見た目が自分好みになると、VS Codeを開くのがちょっと楽しくなるんですよね。

こんな人におすすめ

• VS Codeを見やすくしたい人
• ファイルやフォルダが増えてきた人
• VS Codeの見た目を自分好みにしたい人
• コーディングのモチベーションを上げたい人

---

VS Codeの拡張機能は最初から全部入れなくてもOK

ここまで6つ紹介しましたが、最初から全部を完璧に使いこなす必要はありません。

私自身も、最初から

「この拡張機能はこういう仕組みで……」

なんて理解していたわけではありません。

「便利そうだから入れてみる」

↓

「使ってみたら便利だった」

↓

「なんとなく使い方が分かってきた」

という感じでした。

プログラミング初心者のうちは、分からないことがたくさんあります。

だからこそ、便利な機能に頼りながら、少しでも「コードを書くのが楽しい」と思える環境を作ることが大切だと思っています。

---

VS Code初心者は便利な拡張機能を使って効率よく学ぼう

最初はVS Codeを開いても何が何だか分からず、

と思っていました。

でも、日本語化したり、便利な拡張機能を入れたりしながら、少しずつ自分が使いやすい環境に整えていくことで、以前よりもコードを書くハードルが下がった気がします。

今回紹介したのは、私がVS Codeを使い始めた頃に入れて、今でも使っている拡張機能です。

今回紹介したVS Code拡張機能6つ

拡張機能	できること
Japanese Language Pack	VS Codeを日本語化
Live Server	HTMLの変更をブラウザですぐ確認
Auto Rename Tag	HTMLタグの変更をラクにする
Path Intellisense	ファイルパスの入力をサポート
Prettier	コードを自動で整える
Material Icon Theme	ファイルやフォルダを見やすくする

もちろん、最初から全部覚えなくても大丈夫です。

私も一つずつ試しながら覚えていきました。

特に、仕事や家事などで勉強できる時間が限られている人ほど、便利なツールを上手に使って、コードを書くことそのものに集中するのも大切だと思います。

「分からないから使わない」のではなく、

「便利なものはどんどん使って、分からないことを少しずつ覚えていく」

くらいの気持ちで大丈夫。

私もまだまだ勉強中ですが、一緒に少しずつ進んでいきたいと思います。

---

次回はCSSの勉強へ！

HTMLを一通り学んだら、次はいよいよCSSです。

HTMLだけで作ったページは、文字が並んでいるだけで、正直ちょっと地味。

ここからCSSを使って、

「文字の色を変える」

「文字の大きさを変える」

「背景に色をつける」

「レイアウトを整える」

など、少しずつWebサイトらしい見た目に変えていきます。

HTMLで骨組みを作って、CSSで見た目を整える。

この違いが分かるようになると、Web制作の勉強がさらに面白くなってきました。