VS Codeを使い始めて感じたこと｜初心者におすすめな理由

Web制作を始めると、「コードを書くためのツールは何を使えばいいんだろう？」と迷うことがあるかもしれません。

私もWeb制作を学び始めた頃は、HTMLやCSSを書くためにどんなツールを使えばいいのか分からないところからのスタートでした。

そこで使い始めたのが、**Visual Studio Code（VS Code）**です。

VS Codeは、HTMLやCSS、JavaScriptなどのコードを書くことができる無料のコードエディターです。

実際に使ってみると、コードを書くだけではなく、ファイルを管理したり、拡張機能を追加したりと、Web制作を続けていくうえで便利な機能がたくさんあることが分かりました。

この記事では、Web制作を学んでいる私がVS Codeを使い始めて感じたことや、初心者におすすめしたい理由について紹介します。

---

VS Codeってどんなツール？

VS Codeは、Microsoftが提供しているコードエディターです。

HTML、CSS、JavaScript、PHPなど、さまざまなプログラミング言語やファイルを編集することができます。

Web制作では、HTMLでWebページの構造を作り、CSSでデザインを整え、JavaScriptで動きや機能を追加していきます。

VS Codeを使えば、こうしたファイルを一つの環境でまとめて編集できます。

例えば、Webサイトを作る場合は、

• index.html
• style.css
• script.js

といったファイルを作り、それぞれをVS Codeで編集していくことができます。

また、VS Codeには拡張機能があり、自分の制作スタイルに合わせて機能を追加できるのも特徴です。

最初からすべての機能を使う必要はなく、必要なものから少しずつ覚えていけば大丈夫です。

---

Web制作を始めてVS Codeを使うようになった理由

Web制作を学び始めると、HTMLやCSSなどのコードを書く機会が増えていきます。

最初はコードを入力するだけでも精一杯でしたが、Webサイトを作っていくうちに、ファイルの数も少しずつ増えていきました。

HTML、CSS、JavaScriptなどを別々に管理しながら作業していると、コードを書くための環境もしっかり整えたいと思うようになります。

そこで、Web制作でよく使われているコードエディターを調べ、VS Codeを使い始めました。

無料で始められることや、Web制作で使いやすい機能がそろっていることも、使ってみようと思った理由の一つです。

最初から使いこなせたわけではありません。

分からない機能もたくさんありましたが、実際にWebサイトを作りながら使っていくことで、少しずつ操作にも慣れていきました。

---

実際にVS Codeを使って感じたこと

ここからは、実際にVS Codeを使っていて感じたことを紹介します。

コードを書く環境がまとまる

VS Codeを使って便利だと感じたことの一つが、Web制作に必要なファイルを一つの環境でまとめて扱えることです。

Webサイトを制作していると、HTMLだけではなくCSSやJavaScriptなど、複数のファイルを扱うことがあります。

VS Codeでは、制作しているフォルダを開けば、その中にあるファイルを一覧で確認できます。

そのため、

「どのファイルを編集しているのか」

「CSSファイルはどこにあるのか」

といったことが分かりやすくなります。

サイトの規模が大きくなってファイルが増えてくるほど、このファイル管理のしやすさは便利だと感じます。

ファイルを管理しやすい

Web制作では、ファイルやフォルダを整理しておくことも大切です。

例えば、

website
├── index.html
├── about.html
├── css
│   └── style.css
├── js
│   └── script.js
└── images
    └── main.jpg

というように、役割ごとにフォルダを分けて管理することがあります。

VS Codeでは制作フォルダをそのまま開いて、ファイルやフォルダを確認しながら作業できます。

ファイルが増えてきたときにも、全体の構成を確認しやすいところが便利です。

コードが見やすい

VS Codeでは、HTMLやCSSなどのコードが色分けされて表示されます。

最初はそれほど気にしていませんでしたが、コードを書く量が増えてくると、この色分けが意外と見やすいと感じるようになりました。

タグや属性、値などが視覚的に区別されるため、コードの構造を確認しやすくなります。

もちろん、色分けだけでコードの意味が分かるようになるわけではありません。

それでも、長いコードを編集するときには、画面を見やすくしてくれる機能の一つだと感じています。

Web制作をしている感覚がある

これは機能とは少し違いますが、VS Codeを使っていて感じたことの一つです。

HTMLを書いて、CSSでデザインを変更して、ブラウザで確認する。

そして、思った通りになっていなければコードを修正する。

この作業を繰り返していると、自分でWebサイトを作っているという感覚が少しずつ出てきます。

最初は分からないことが多くても、コードを書いた結果が画面に反映されると、「ここを変えるとこうなるんだ」と実感できます。

Web制作を学ぶうえでは、実際に手を動かして試してみることが大切だと感じています。

---

VS Codeで実際にできること

VS Codeでは、Web制作に必要なさまざまな作業を行うことができます。

できること	内容
HTMLを書く	Webページの構造を作る
CSSを書く	Webページのデザインを整える
JavaScriptを書く	動きや機能を追加する
PHPを書く	WordPressなどの開発に利用する
ファイルを管理する	制作フォルダやファイルをまとめて管理する
コードを検索する	必要なコードや文字を探す
複数ファイルを編集する	ファイルを切り替えながら作業する
拡張機能を追加する	必要な機能を後から追加する

Web制作を始めたばかりなら、まずはHTMLとCSSを書ければ十分です。

JavaScriptやPHP、拡張機能などは、必要になったときに少しずつ覚えていけば問題ありません。

---

初心者にVS Codeをおすすめしたい理由

ここでは、私がVS Codeを初心者にもおすすめしたいと思う理由を紹介します。

無料で始められる

VS Codeは無料で利用できます。

Web制作を始める段階では、できるだけ費用をかけずに学習したいという人も多いと思います。

その点、無料で使い始められるVS Codeは、最初のコードエディターとして選びやすいツールだと感じています。

Web制作に必要なコードを書ける

HTMLやCSSだけではなく、JavaScriptやPHPなどにも対応しています。

最初はHTMLとCSSから始めたとしても、Web制作を続けていくとJavaScriptやPHPを使う機会が出てくることがあります。

そのときにも同じVS Codeを使い続けられるのは便利です。

ファイルをまとめて管理できる

Webサイト制作では、一つのHTMLファイルだけで完成するとは限りません。

ページが増えればHTMLファイルも増えますし、CSSやJavaScript、画像なども必要になります。

VS Codeでは制作フォルダを開いて、これらのファイルをまとめて管理できます。

初心者のうちはファイル構成に慣れることも学習の一つなので、実際に制作しながら覚えていけるのは良いところだと思います。

必要に応じて機能を追加できる

VS Codeには、さまざまな拡張機能があります。

最初からすべてを追加する必要はありません。

「こういう機能があったら便利そう」

と思ったときに調べて、必要なものだけ追加できます。

自分が使いやすい環境を少しずつ作っていけるのも、VS Codeの魅力の一つです。

分からないことを調べやすい

Web制作について調べていると、VS Codeに関する情報を見つけることも多くあります。

操作方法や設定方法など、分からないことが出てきたときに検索して調べやすいのは、初心者にとって安心できるポイントです。

ただし、インターネット上の情報には古いものや環境によって異なるものもあるため、公式情報なども確認しながら使うことをおすすめします。

---

最初からすべての機能を覚える必要はない

VS Codeにはたくさんの機能があります。

そのため、初めて画面を見たときに、

「覚えることが多そう」

と感じる人もいるかもしれません。

私も最初からすべての機能を理解していたわけではありません。

Web制作を始めたばかりなら、まずはコードを書いてブラウザで確認するところから始めれば十分です。

例えば、最初は次のような流れで大丈夫です。

VS Codeを開く
      ↓
制作フォルダを開く
      ↓
HTMLを書く
      ↓
CSSを書く
      ↓
保存する
      ↓
ブラウザで確認する
      ↓
必要なところを修正する

使っているうちに、

「この機能を使ってみたい」

「この作業をもっと簡単にしたい」

と思うことが出てきます。

そのタイミングで新しい機能を覚えていけば、無理なく使えるようになっていきます。

---

最初に覚えておきたいVS Codeの基本

初心者が最初に覚えておきたい操作は、それほど多くありません。

フォルダを開く

まずはWebサイトを制作するためのフォルダを作り、そのフォルダをVS Codeで開きます。

例えば、

my-website

というフォルダを作って、その中にHTMLやCSSなどのファイルを入れていきます。

ファイルを作る

次に必要なファイルを作ります。

例えば、

index.html
style.css
script.js

などです。

最初はHTMLとCSSだけでもWebページを作ることができます。

コードを書く

作成したファイルにコードを書いていきます。

例えばHTMLなら、

<h1>Web制作を始めました</h1>
<p>HTMLを使ってWebページを作っています。</p>

のようなコードを書きます。

CSSを使えば、文字の大きさや色、余白などを変更できます。

ブラウザで確認する

コードを書いたら、実際のWebブラウザで表示を確認します。

思った通りに表示されなければ、VS Codeに戻ってコードを修正します。

この、

書く → 確認する → 修正する

という繰り返しが、Web制作の基本的な作業になります。

---

VS Codeを使ってWebサイトを作る流れ

実際のWeb制作では、VS Codeだけですべてが完結するわけではありません。

デザインを考えたり、ブラウザで表示を確認したり、制作したコードを管理したりと、さまざまなツールを使い分けます。

例えば、次のような流れです。

Webサイトの構成を考える
        ↓
HTMLを書く
        ↓
CSSでデザインする
        ↓
JavaScriptを追加する
        ↓
ブラウザで確認する
        ↓
修正する
        ↓
完成

Webサイト制作全体では、デザインや公開作業など、さらに多くの工程があります。

Webサイト制作の基本的な流れについては、こちらの記事でも詳しく紹介しています。

【ここに「Webサイト制作の基本的な流れを初心者向けに解説」の内部リンクを設置】

---

VS Codeを使っていて難しいと感じたこと

ここまでVS Codeの良いところを紹介してきましたが、実際に使っていて難しいと感じることもあります。

最初は画面の見方が分からない

VS Codeには、ファイル一覧やコードを書く場所、検索など、さまざまな項目があります。

初めて使ったときは、どこを操作すればいいのか分からないこともありました。

ただ、Web制作で実際に使う部分は少しずつ覚えていけば大丈夫です。

エラーの原因が分からない

コードを書いていると、入力ミスなどによって思った通りに表示されないことがあります。

例えば、

• タグの閉じ忘れ
• スペルミス
• ; の付け忘れ
• CSSの指定ミス
• ファイルの指定ミス

などです。

最初はどこが間違っているのか分からないこともあります。

しかし、エラーを探して修正する経験を重ねることで、少しずつコードを見る力も身についていきます。

拡張機能が多くて迷う

VS Codeにはたくさんの拡張機能があります。

便利そうなものがたくさんあるため、最初はどれを入れればいいのか迷うこともあります。

でも、最初からたくさん追加する必要はありません。

まずは標準の機能を使ってみて、必要になったときに追加していく方法がおすすめです。

---

初心者はどこまでVS Codeを覚えればいい？

Web制作を始めたばかりなら、まずは基本的な操作を覚えるだけで十分です。

最初に覚えたいこと

1. VS Codeを開く
2. 制作フォルダを開く
3. ファイルを作る
4. HTMLを書く
5. CSSを書く
6. 保存する
7. ブラウザで確認する

まずはこの流れを繰り返してみましょう。

慣れてきたら覚えたいこと

Web制作に慣れてきたら、

• JavaScript
• 拡張機能
• ショートカット
• コード検索
• 複数ファイルの操作
• Git
• GitHub
• PHP
• WordPress

などにも少しずつ挑戦できます。

すべてを一度に覚える必要はありません。

自分が必要だと思ったものから覚えていく方が、実際の制作にもつながりやすいと思います。

---

VS Codeと一緒に使いたいツール

Web制作では、VS Code以外にもさまざまなツールを使います。

私がWeb制作で使っているツールについては、以前の記事でまとめて紹介しています。

【ここに「Web制作で使っているツールを紹介｜初心者向けおすすめ環境」の内部リンクを設置】

例えば、

• Google Chrome
• Figma
• GitHub
• WordPress

などです。

それぞれ役割が違うので、一つのツールですべてを行うというより、目的に合わせて使い分けていきます。

---

VS Codeはこんな人におすすめ

ここまで紹介してきた内容を踏まえると、VS Codeは次のような人におすすめです。

• Web制作を始めたい人
• HTMLやCSSを学びたい人
• JavaScriptを勉強したい人
• 自分でWebサイトを作ってみたい人
• コードを書いてWebサイトを制作したい人
• 無料で使えるコードエディターを探している人
• Web制作を長く続けていきたい人

特に、これからHTMLやCSSを勉強してWebサイトを作ってみたいという人は、最初のコードエディターとして候補に入れてみてもいいと思います。

---

まとめ

今回は、Web制作で使っているVS Codeについて、実際に使い始めて感じたことや、初心者におすすめしたい理由を紹介しました。

VS Codeは、HTMLやCSS、JavaScript、PHPなどのコードを書くことができる無料のコードエディターです。

実際に使ってみると、コードを書くだけではなく、制作ファイルをまとめて管理できたり、必要に応じて機能を追加できたりするところが便利だと感じました。

一方で、最初からすべての機能を覚えようとすると難しく感じるかもしれません。

まずは、

フォルダを開く → HTMLを書く → CSSを書く → ブラウザで確認する

という基本的な流れから始めてみるのがおすすめです。

Web制作を続けていく中で必要な機能が出てきたら、その都度少しずつ覚えていけば大丈夫です。

私自身もまだまだ勉強中ですが、実際にWebサイトを作りながらVS Codeの使い方を覚えていきたいと思っています。

これからもNoah Labでは、実際に使ってみたツールや、Web制作を学ぶ中で感じたことを少しずつ紹介していきます。

「Web制作を始めてみたいけれど、何から始めればいいか分からない」という方の参考になればうれしいです。

ゆるり、学んで、つくって。

これからも少しずつWeb制作を楽しみながら、Noah Labを育てていきたいと思います。