HTML・CSSの開発環境を準備しよう

この章では、HTML/CSS のコーディングを快適に行うための環境構築について解説します。

このコースのゴール

• プログラミングのエディタ Visual Studio Code がインストールできる
• Visual Studio Codeで、開発を便利にするプラグイン（拡張機能）を導入できる

環境構築をしてみよう

Web 制作のプロ（フリーランス含め）を目指すには、コーディング環境をしっかりと整えて効率的な開発ができるように意識する必要があります。

Web 業界（主に Web エンジニアの仕事）に慣れないうちは、自分の仕事環境を改善するという意識が薄れがちですが、『プロの仕事は環境構築で差がつく』と言っても過言ではないほど、快適なコーディング環境を整えることはとても大切です。

本章の解説を参考に、「どうやったら楽にコーディングができるか？」という思考を大切にして、環境構築を進めていきましょう。

Web 制作に相性の良いテキストエディタを導入する

まず、HTML/CSS のコードを記述するために必要なテキストエディタを導入していきます。

テキストエディタには様々な種類があり、もっとも標準的なものだと「Windows のメモ帳」や「Mac のメモアプリ」などが該当します。

しかし、標準装備のテキストエディタでは快適なコーディングを実現することはできません。

また、インターネットで「 テキストエディタ おすすめ 」と検索すると、以下のように多くの関連記事が出てくることから、多様なテキストエディタが存在することが理解できると思います。

【おすすめのテキストエディタ】Visual Studio Code

まだ使い慣れたテキストエディタを見つけていないのであれば、本チュートリアルでは「Visual Studio Code（略して VSCode）」の利用をおすすめします。

VSCode をインストールする

VSCode の利点が理解できたら、さっそくインストールを進めていきましょう。（VSCode 以外のテキストエディタを利用する場合は、適宜インターネットで検索しながら導入を進めてください）

手順 1: 公式サイトへアクセスする

まずは、以下のリンクから公式サイトへアクセスします。

公式 - Visual Studio Code

ページが表示されたら、「今すぐダウンロード」のボタンを押下してダウンロードページへ遷移します。

ダウンロード画面に遷移したら、ご自身の環境に合わせて「Windows 版」か「Mac 版」のどちらかを選択して、VSCode をダウンロードします。

以下のようなファイルがダウンロードされていることを確認します。（画像は Mac 版をダウンロードしたときの参考画面）

手順 2: ダウンロードした VSCode をインストールする

Mac 版の場合は、ダウンロードファイルをダブルクリックで解凍します。

解凍すると「Visual Studio Code」のファイルが表示されるので、該当ファイルを「アプリケーション」のフォルダにドラッグ＆ドロップします。

最終的に、アプリケーションの一覧に「Visual Studio Code」が表示されていれば、インストール完了です。

※Windows 版の場合は、インストーラーを実行して VSCode のインストールを進めていきます。（設定内容は特に変更せずに「次へ」を押下していけば問題ありません）

拡張機能を導入しよう

VSCode のインストールが完了したら、次に Web 制作に役立つ拡張機能を導入していきます。

拡張機能とは？

拡張機能とは、日々のWeb開発を便利にする機能となります。
今回は、以下の拡張を追加しますが、以下のような便利な機能となっています。

拡張機能のインストール方法

VSCode を起動したら、サイドメニューから拡張機能のインストール画面を開いてください。（下記画像の赤枠で囲ったアイコンを選択します）

インストール画面を開くと拡張機能の「検索窓」が表示されるので、ここに導入したい拡張機能の名称を入力してインストールを進めていきます。

拡張機能を実際にインストールする際は、まず、検索結果に表示された該当の拡張機能を選択します。すると、右側のページに選択した拡張機能の概要が表示されるので、インストールがまだの場合はここから「Install」のボタンを押下することによって、拡張機能をインストールできます。

インストールする拡張機能

今回導入する VSCode の拡張機能は以下になります。

1. vscode-icons
2. Duplicate action
3. Prettier
4. Live Server
5. Bracket Pair Colorizer
6. Path Autocomplete
7. Trailing Spaces

それぞれ、役割などを理解しながら導入を進めていきましょう。

1： vscode-icons - ファイルアイコンをリッチにする

VS Codeを利用すると、フォルダ名とファイル名の見分けがなかなかつきにくいです。
vscode-iconsを利用すると、VSCode のエクスプローラーに表示されるファイルやフォルダに適切なアイコンが表示されるようになります。HTML ファイルや CSS ファイルなど、拡張子を確認しなくても視覚的にファイルの種類が把握できるので、ファイルを探す際のストレスが軽減されます。

検索窓に vscode-icons と入力して、拡張機能をインストールします。

2： Duplicate action - ファイルの複製を簡単にする

この拡張機能を導入することによって、右クリックすると、duplicate file or dilectoryという選択肢が増え、クリックすると複製したファイルを作成することができます。既存のファイルをコピーして新しい HTML ファイルを作成する機会は多いので、ファイル複製の作業時間を短縮するためにも導入しておきましょう。

検索窓に Duplicate action と入力して、拡張機能をインストールします。

3： Prettier - ソースコードをフォーマットする

この拡張機能を導入することによって、VSCode でコーディングした HTML コードなどがキレイにフォーマットされます。HTML のコーディングに限らず、ソースコードのインデント（フォーマット）を整えることは、コードの品質に直結することなので、必ずインストールするようにしましょう。

また、ソースコードをキレイに書くということは、自分自身にも多くのメリットを与えてくれるので、『コードのインデント（フォーマット）は必ず揃える』と覚えておきましょう。

まず、検索窓に Prettier と入力して、拡張機能をインストールします。

Prettier を実際に使ってみましょう。

歯車マーク（設定）をクリックして、Settingsをクリックします。

検索窓に、Format on Saveと入力して検索すると、Format On Saveという項目が出てきます。
ここのチェックボックスを入力します。

適当なファイルを開いて、あえてインデントがそろっていない以下のソースコードを貼り付けます。

const array = [1,2,3,4]
for (const index in array){
array[index]
}

この状態で、s+ f、もしくはCTRL + Sを押すと、自動でインデントすることができます。

4： Live Server - Web ページのリアルタイム読み込み

検索窓に Live Server と入力して、拡張機能をインストールします。

この拡張機能を導入することによって、HTML/CSS のファイル修正をリアルタイムに検知して Web ページの表示を確認することができます。拡張機能を使わない場合は、ファイルを修正するたびにブラウザでページの再読み込みを行う必要があり、無駄な作業時間を作ってしまいます。

本格的に Web 制作を仕事にすると、一日に数百回とページの修正結果を確認することもあります。１回の手間は数秒かもしれませんが、積み重ねで考えてみるとかなりの時間を無駄にしていると気づくことができます。

使い方は以下のサイトを参考にしてみてください。

https://life-care.site/programming/liveserver_install_how_to_use#Live_Server-2

5： Bracket Pair Colorizer - コードの対応範囲を分かりやすくする

検索窓に Bracket Pair Colorizer と入力して、拡張機能をインストールします。

この拡張機能を導入することによって、 { や ( などの括弧に色がつき、対応する括弧を把握しやすくなります。

Web 制作の場合は、主に JavaScript のプログラムコードを読み解く際に重宝します。例えば、JavaScript のコードに慣れないうちは、参考にしたソースコードをそのまま貼り付けても動作しない、ということが多々あります。

このように、プログラムが想定どりに実行されない原因の１つとして、括弧の範囲が間違っていた（不足しているか余分に記述されているなど）、ということが多いのですが、その場合にもこの拡張機能を導入していれば、それぞれで対応する括弧が色分けで表示されるので、ソースコードのミスに気づきやすくなります。

6： Path Autocomplete - ファイルパスを自動補完する

検索窓に Path Autocomplete と入力して、拡張機能をインストールします。

この拡張機能を導入することによって、画像ファイルや CSS ファイルなど、HTML ファイル側からパスを指定して呼び出すコードを記述する際に、そのファイル名の補完候補が表示されるようになります。

例えば、images フォルダにいくつかの画像ファイルを事前に保存しておいた場合、HTML 側のコーディング最中に VSCode 上でそのファイル名が自動で補完候補として表示されるため、わざわざ画像フォルダの中身を確認してファイル名を１つずつ確認する手間を省くことができます。

7： Trailing Spaces - 不要なスペースを視覚化する

検索窓に Trailing Spaces と入力して、拡張機能をインストールします。

この拡張機能を導入することによって、コードの末尾に入力された余分な空白文字や不適切な箇所に入力された全角スペースを強調表示してくれます。

プログラミングにおいて、コードの末尾や不適切な箇所にある空白文字はよく問題を引き起こします。

例えば、CSS のコードを記述する際に、本来であれば半角空白で入力すべきコードが全角空白になってしまい、想定外の表示結果になる場合などです。

このような初心者がやりがちなコーディングミスも、この拡張機能を導入することによって事前に防ぐことができます。

実際にTrailing Spacesの効果を確認してみましょう。

適当なファイルを開いて、aiueoと入力したあと、スペースキーを数回押します。

すると、以下のように不要なスペースが赤色になって示してくれます。

まとめ

この章では、Web 制作において効率的なコーディング環境を構築する手順について学びました。

VSCode に限らず、多くのテキストエディタでも快適なコーディング環境を構築するために、最初に様々な拡張機能を導入することが一般的です。

ここで解説した環境構築は、あくまでも最低限の設定だと捉えて、チュートリアル完走後も必要に応じて便利な拡張機能を使いこなせるように意識しておきましょう。

次のレッスンは「今回作成する完成品を確認しよう」です。