【初心者向け】Webサイト制作の開発環境を整える。VSCodeでHTMLをリアルタイムプレビューしながらコーディング！

2024-02-222024-03-17

これからプログラミングを初めてみようという方にとっての最初の疑問は、

ちーも

どうやってコードを書いていったらいいんだ？
どうやって書いたコードを動かすの？確認するの？

ということだと思います。

今回の内容は、プログラミングの中でもホームページやブログ制作に使える三種の神器、HTML、CSS、JavaScriptを学びたい方へ、快適な開発環境づくりの方法をレクチャーしたいと思います。

この記事を読んで出来ること

Webサイト開発に必要なものがわかる
開発が快適に行える環境を用意できる

Webページを作るために必要なもの

前提として環境構築に必要なものは以下の通りです。

パソコン
インターネット回線
ブラウザ
コーディングツール

①から③までは用意がある前提でサクッと進んでいきますね。
また、この記事はWindowsユーザーの方向けの記事となっております。

Macの方でも同じような手順で進めることができますが、一部表示や表記が異なる可能性があります。

パソコン

まずはこれがないとなにも始まりません！

よくプログラミングにはハイスペックPCが必要！という記事を見かけますが、Web制作だけをするということであればそこまでのスペックは必要ありません。

よっぽど古いモデルのパソコンでない限り割とどんなものでも大丈夫だと思います。

ただし、その他の言語にも挑戦してみたい！アプリ開発をしてみたい！デザインをしたい！という場合には話は別で、そこそこの性能のものを用意することをおすすめします。

特にデザインをやる場合、イラレやフォトショなどAdobe製アプリはめちゃくちゃ重くなります。

またiOS用アプリ（iPhone用アプリ）を開発する場合には、独自の開発環境が使えるMacが必要になります。

いずれにしても、開発画面と確認用のブラウザを並べて表示できる程度の画面の大きさがある方が開発効率は格段に上がります。

インターネット回線

ソフトのダウンロード時やネット上のライブラリ（開発を楽にできる便利な機能）を使用する際必要です。

ブラウザ

コーディングしたものが実際にどのように表示されるか、確認するために使います。

なんでもいいとは思いますが、Webサイトはブラウザによって見え方が違ったりするので、最終的には複数のブラウザでテストを行い、レイアウト崩れを修正しましょう。

基本的にはシェア率の高いGoogle Chromeを使って開発を行うのが〇です。

参考：https://ohdo.at21.jp/web/browser-market-share/

コーディングツール（今回の本題）

ここからが今回の内容に関係する本題です。

HTML、CSS、JavaScriptでの開発は、やろうと思えばWindows標準のメモ帳アプリのみでも行うことができます。

ただしこんなコードを書くとき、これを一字一句間違えないように全部書くのは結構大変ですよね。

<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>こんにちは！</p>
      <img src="./img/sample.png">
    </div>
  </body>
</html>

そんな時に高性能なテキストエディタがあるとコーディングがかなり楽になり、サクサクとコードを書くことができるようになります。

こちらの動画をご覧ください。

こんな感じでタグ（<>で囲まれている記述）の予測変換機能や、>を入力すると自動で閉じタグが入力される機能、タグの閉じ忘れがあった場合に表示が赤くなったりと、入力の効率化やミスを減らすための開発者に優しい機能が盛りだくさんなのが分かるかと思います。

また特定のコードをハイライト（色が変わる）する機能があり、かなりコードが見やすくなっています。

テキストエディタは無料で使用できるものがたくさんあります。

Visual Studio Code（VSCode）
TeraPad
Atom
サクラエディタ

これは一例ですが、どれも神アプリだと思います。

ちなみに先ほどの動画で使用しているのはVSCodeで、Microsoftが開発しているテキストエディタです。

ちーも

こんなのが無料で使えるなんて神すぎる

私はWebサイト開発やWordPressのカスタマイズを行う際など、仕事でもプライベートでもVSCodeを愛用しています。

VSCodeはインストールしてそのままでも十分すぎるほど高性能ですが、拡張機能（これも無料）をインストールすることで、機能を追加したり見た目を自分好みにカスタマイズすることができます。

神アプリVSCodeで開発環境を作っていく

ではさっそくVSCodeでWebサイト開発をするための準備をしていきましょう。

VSCodeのダウンロードとインストール

まずはVSCodeの公式サイト（https://code.visualstudio.com/）にアクセスし、「Download for Windows」のボタンをクリックします。

Macの方は「Download Mac Universal」という表記になっていると思います。

VSCodeのダウンロードが開始されますので任意の場所に保存してください。

次にインストールを行います。

ダウンロードしたインストーラーを起動し、使用許諾契約書が表示されるので「同意する」にチェックを入れて進みます。

インストール先の設定・スタートメニューフォルダの設定は特に指定が無ければそのまま進みます。

追加タスクの選択は、

デスクトップ上にアイコンを作成する
PATHへの追加（再起動後に使用可能）

の2つを選択します。その他お好みで選択しても問題ありません。

インストール準備完了と表示されるので、「インストール」ボタンをクリックします。

※初回インストールの場合、本来はインストールフォルダなどが記載されています

これでVSCodeを使うための準備ができました！

ここから初期設定などをしていきます。

VSCodeの初期設定

アプリを起動すると以下のような画面が表示されます。

テーマの選択

画面の配色を一括で変えることができます。

開発は長時間エディタとにらめっこすることになるので、目に優しい暗めの配色を選ぶことをおすすめします。

おすすめは4つ表示されているうちのDark Modernか、「See More Themes…」をクリックして表示される中のMonokaiです。

テーマを選んだら2番目の「Rich support for all your languages」のみチェックを入れ、

「Mark Done」をクリックしてこの初期画面を閉じます。

日本語化

インストールしたてのVSCodeは英語表記になっているので日本語化していきます。

左側メニューの拡張機能（Extensions）ボタンをクリックします。

すると拡張機能の一覧が表示されるので、「japanese」と検索し、地球儀アイコンの拡張機能をインストールします。

インストール後、VSCodeを再起動すると日本語で表示されるようになります！

これで基本的な初期設定は完了しました。

ここからはさらにWeb開発がしやすくなるように追加の設定をしていきます。とりあえずすぐにコーディングを始めてみたいという方は、ここまでの設定のみでOKです。

より便利に開発ができる追加設定をしていく

リアルタイムプレビュー機能の追加

コーディングしたHTMLが実際にどう表示されるのか、ブラウザで確認するには.htmlファイルをダブルクリックで開きます。

ブラウザで開かない場合はHTMLファイルを右クリック＞プログラムから開く＞お使いのブラウザ（ここではChrome）を選択してください。

冒頭の動画でコーディングしたHTMLを開いてみました。

ブラウザでちゃんと表示されていますね。

ここでテキストを「こんにちは！」から「こんばんは！」に変更して保存してみます。

しかしブラウザ上での表示は「こんにちは！」のまま変わりません。

表示を更新するにはブラウザ上でページを再読み込みする必要があります。

この再読み込みの手間が一見大したことないように思えて、画面を見ながら微調整したい時などに実は結構なストレスになります。

ちーも

いちいちエディタとブラウザを行ったり来たりしないとだからね

そこでHTMLやCSSなどを修正した際、自動でブラウザのページを更新してくれる拡張機能があるのでそちらを入れていきたいと思います。

先ほど日本語化の拡張機能をインストールした時と同様の手順でインストールします。

「Live Server」で検索してインストールしてください。

インストールが完了すると、画面の右下に「Go Live」というボタンが追加されているので、リアルタイムプレビューしたいファイルを開いた状態で　このボタンを押します。

初回起動時にはこのような表示が出ますので、「許可」をクリックします。

するとブラウザで先ほどのページが開きました。

よく見るとアドレスが何やらよくわからない数字になっているのがわかります。

この状態でコードを変更すると・・・。

自動的にブラウザ画面が更新され、更新を即時確認しつつコーディングができるようになりました！

HTMLの変更ではあまり恩恵を感じないかもしれませんが、CSSでスタイルをいじっている時にかなり重宝します。

「Open a folder or workspace… (File -> Open Folder)」というエラーでプレビュー画面が開けない場合

VSCodeでは基本的にファイル単体を開いて編集するのではなく、そのファイルが入っているフォルダごと読み込んで開発を行う必要があります。

このプラグインも、HTML単体で開いている場合は上記エラーで起動できません。

フォルダの開き方

SCSSを便利に使えるようにする

ここまでWebサイト制作三種の神器はHTML、CSS、JavaScriptであるとお伝えしてきましたが、これからホームページを作ってみようという方にこそ、CSSではなくSCSSを学ぶことをおすすめします。

結局はCSSも理解する必要があるのですが、SCSSがわかるようになれば自動的にCSSも理解できる気がします。

SCSSとは？（ざっくり）

CSSと同じスタイルシート言語ですが、入れ子構造などを使ってCSSよりも効率的に、わかりやすくコーディングをすることができるもの。

分かりやすく記述ができるため、メンテナンスなどが楽。

詳しくはこちらのサイトで解説されています。

カゴヤのサーバー研究室

【Sass入門】SCSSとは？CSSとの違い、メリット、注意点を解説 – カゴヤのサーバー研究室今では、分からないことがあれば、インターネットでリサーチすることで大抵のことは解決できます。多くのWebサイトが運営されていますが、サイトを見やすくするためには今…

上記サイトでも解説されているようにSCSSはそのままだとHTMLにスタイルを当てられないんですよね。

ではどうするかというと、コンパイルという作業をしてCSSに変換する必要があります。

本来はターミナル（プログラマといえばなあの黒い画面）で専用のコマンドを打ち込んで実行する必要があるのですが、そんな面倒で難しそうなコンパイルもVSCodeの拡張機能で簡単に行うことができます。

では再度拡張機能をインストールしていきます。「Live Sass Compiler」で検索してください。

インストール後Live Serverと同じように、画面右下に「Watch Sass」というボタンが追加されました。

この拡張機能は、機能の実行中にSCSSが保存されると、自動でCSSへコンパイルしてくれるというものです。

実際にどうなるのかやってみたいと思います。

※あらかじめstyle.scssをHTMLと同じフォルダ内に作成し、HTMLにはstyle.cssを読み込むように記述を修正しておきました。

  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>

「Watch Sass」を押すと

style.css
style.css.map

の2つのファイルが自動的に作られます。（ファイル名はSCSSに付けたものと同じになります）

SCSSを変更して保存すると画面の文字色が赤色に変わりましたね。

生成されたCSSの中身はこんな感じ。

p {
  color: red;
}/*# sourceMappingURL=style.css.map */

今はコード量が少ないのでSCSSと中身がほぼ同じですが、大量のスタイルを書いていくとその楽さがよくわかります。

試しにHTMLとSCSSのコード量を増やしてみました。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>  
  <body>
    <div>
      <p>おはようございます！</p>
      <img src="./img/sample.png" class="img1">
      <img src="./img/sample.png" class="img2">
    </div>
  </body>
</html>

body {
  div {
  background-color: aliceblue;
    p {
      color: red;
    }
    img {
      display: block;
      width: 250px;
      &.img1 {
        transform: rotate(180deg);
      }
      &.img2 {
        transform: scale(.5);
      }
    }
  }
}

生成されたCSS

body div {
  background-color: aliceblue;
}
body div p {
  color: red;
}
body div img {
  display: block;
  width: 250px;
}
body div img.img1 {
  transform: rotate(180deg);
}
body div img.img2 {
  transform: scale(0.5);
}/*# sourceMappingURL=style.css.map */

CSSだと「body div」を毎回書かなくてはいけませんが、SCSSでは入れ子構造により記述を省略することができ、どこにスタイルが当たっているのか一目でわかります。