プログラミングを始めるなら、コードを書くためのエディタが必要です。
初心者が最初に使うなら、VS Codeがおすすめです。
VS Codeは無料で使えるコードエディタで、HTML、CSS、JavaScript、Python、PHPなど、さまざまな言語の学習に使えます。
この記事では、プログラミング初心者がVS Codeで最初に入れておくと便利な拡張機能をまとめます。
最初からたくさん入れる必要はありません。まずは学習に必要なものだけ入れて、必要になったら少しずつ追加していきましょう。
VS Codeとは
VS Codeとは、Visual Studio Codeの略です。
Microsoftが提供している無料のコードエディタで、プログラミング学習やWeb制作でよく使われています。
エディタとは、コードを書くための道具です。
メモ帳でもHTMLやCSSを書くことはできますが、VS Codeを使うとコードが見やすくなり、入力補助やファイル管理もしやすくなります。
拡張機能とは
拡張機能とは、VS Codeに機能を追加するためのものです。
スマホにアプリを追加するように、VS Codeにも便利な機能を追加できます。
たとえば、コードをきれいに整えたり、ブラウザで表示を確認しやすくしたり、HTMLタグの編集を楽にしたりできます。
ただし、便利そうだからといって最初から何でも入れる必要はありません。
初心者のうちは、まず使う目的が分かりやすい拡張機能だけ入れるのがおすすめです。
最初はこの3つだけでいい
VS Codeを入れたばかりなら、まずは次の3つだけで大丈夫です。
- Japanese Language Pack for Visual Studio Code
- Live Server
- Prettier – Code formatter
この3つがあれば、日本語でVS Codeを使いやすくなり、HTML/CSSの表示確認とコード整形がしやすくなります。
慣れてきたら、Auto Rename Tagやindent-rainbowなどを追加していけば十分です。
Japanese Language Pack
Japanese Language Pack for Visual Studio Codeは、VS Codeの表示を日本語にする拡張機能です。
VS Codeをインストールした直後は、英語表示になっている場合があります。
英語のままでも使えますが、初心者のうちは設定画面やメニューが日本語の方が分かりやすいです。
まず最初に入れておくと、VS Codeの操作で迷いにくくなります。
Live Server
Live Serverは、HTML/CSSで作ったページをブラウザで確認しやすくする拡張機能です。
HTMLファイルを編集して保存すると、ブラウザの表示を自動で更新できます。
通常は、HTMLを書き換えたあとにブラウザを手動で更新する必要があります。
Live Serverを使うと、その手間が減るので、HTML/CSSの練習がしやすくなります。
Web制作の学習ではかなり便利なので、最初に入れておくのがおすすめです。
Prettier – Code formatter
Prettierは、コードを自動で整えてくれる拡張機能です。
HTML、CSS、JavaScriptなどを書くときに、インデントや改行をきれいにそろえてくれます。
初心者のうちは、コードの見た目が崩れやすいです。
インデントがずれていると、どこからどこまでがまとまりなのか分かりにくくなります。
Prettierを使うと、保存時にコードを整えられるので、読みやすいコードを書きやすくなります。
慣れたら追加したい拡張機能
Japanese Language Pack、Live Server、Prettierを入れて使い方に慣れたら、次の拡張機能も必要に応じて追加すると便利です。
- Auto Rename Tag
- indent-rainbow
- HTML CSS Support
ここから先は、最初から必須ではありません。HTML/CSSやJavaScriptを書いていて、不便に感じたら追加するくらいで大丈夫です。
Auto Rename Tag
Auto Rename Tagは、HTMLタグの開始タグと終了タグを同時に変更してくれる拡張機能です。
HTMLでは、開始タグと終了タグをセットで書きます。
<p>これは文章です</p>たとえば、開始タグのpをdivに変えたのに、終了タグがpのままだと、コードが分かりにくくなります。
Auto Rename Tagを入れておくと、片方を変更したときにもう片方も自動で変わります。
HTMLの書き間違いを減らせるので、初心者にも便利です。
indent-rainbow
indent-rainbowは、インデントを色分けして見やすくする拡張機能です。
インデントとは、コードの左側に入れる空白のことです。
HTMLやJavaScriptでは、どこからどこまでが1つのまとまりなのかを見やすくするためにインデントを使います。
indent-rainbowを入れると、インデントの段階ごとに色がつくため、コードのまとまりを確認しやすくなります。
特に、HTMLの入れ子構造やJavaScriptの関数を書くときに便利です。
HTML CSS Supportは必要に応じて入れる
HTML CSS Supportは、HTMLやCSSを書くときの補助をしてくれる拡張機能です。
class名やCSSの候補を表示してくれるため、コードを書きやすくなります。
ただし、VS Codeには標準でもHTMLやCSSの入力補助があります。
そのため、最初から必ず入れなければいけないわけではありません。
HTML/CSSを書いていて補完が足りないと感じたら、必要に応じて追加するくらいで大丈夫です。
拡張機能の入れ方
VS Codeで拡張機能を入れる手順は簡単です。
- VS Codeを開く
- 左側の四角いアイコンをクリックする
- 検索欄に拡張機能名を入力する
- 目的の拡張機能を選ぶ
- インストールを押す
インストール後に、VS Codeの再起動が必要な場合もあります。
日本語化の拡張機能を入れた場合は、表示言語を切り替えるために再起動することがあります。
入れすぎには注意する
VS Codeの拡張機能は便利ですが、最初からたくさん入れすぎない方がいいです。
拡張機能を増やしすぎると、どれが何のための機能なのか分かりにくくなります。
また、設定が増えて、初心者には扱いにくくなることもあります。
最初は、HTML/CSSの学習に必要なものだけ入れて、必要になったら少しずつ追加する方が進めやすいです。
HTML/CSS学習で使う流れ
VS Codeと拡張機能を使うと、HTML/CSSの学習は次のように進めやすくなります。
- VS CodeでHTMLファイルを作る
- CSSファイルを作る
- HTMLとCSSをつなぐ
- Live Serverでブラウザ表示を確認する
- コードを書き換える
- 保存して表示の変化を見る
この流れを繰り返すことで、HTML/CSSの書き方が少しずつ身についていきます。
まとめ
プログラミング初心者がVS Codeを使うなら、最初に入れる拡張機能は多すぎなくて大丈夫です。
まずは、Japanese Language Pack、Live Server、Prettierの3つを入れるだけでも学習しやすくなります。
HTML/CSSに慣れてきたら、Auto Rename Tagやindent-rainbowなどを追加すると、コードがさらに書きやすくなります。
HTML CSS Supportは、標準の補完で足りないと感じたときに必要に応じて入れれば大丈夫です。
拡張機能は、便利そうなものを全部入れるより、今の学習に必要なものから少しずつ使っていきましょう。
