WP-LOAD

LESSON / WP LOAD

Web制作の環境を準備する

Visual Studio CodeとGoogle Chromeをインストールし、日本語表示、UTF-8、インデント、自動保存を設定してWeb制作の環境を整えます。

目安 20分 コース進捗 0 / 17

GOAL

このレッスンでできるようになること

  • Visual Studio CodeとGoogle Chromeを準備する
  • Visual Studio Codeを日本語で表示する
  • 文字コードをUTF-8に設定する
  • インデント幅をスペース1個に設定する
  • ファイルの自動保存を有効にする

このレッスンでは、Web制作に使用するVisual Studio CodeとGoogle Chromeを準備し、Visual Studio Codeの初期設定を行います。

制作に必要な道具をそろえる

Web制作では、コードを書く道具と表示を確認する道具を役割ごとに準備します。

コードエディター、ブラウザ、制作フォルダーを準備したWeb制作環境
コードエディター、ブラウザ、制作フォルダーを準備したWeb制作環境

Web制作では、コードを書くためのコードエディターと、作成したWebページを表示するためのブラウザを使用します。

  • コードエディター：HTML、CSS、JavaScriptなどのコードを書くためのソフトウェアです。
  • ブラウザ：HTMLやCSSを読み取り、Webページとして画面へ表示するソフトウェアです。

この教材では、コードエディターにVisual Studio Code、ブラウザにGoogle Chromeを使用します。

Visual Studio Codeをインストールする

Visual Studio Codeは、Windows、macOS、Linuxで使える無料のコードエディターです。

次の図では、「Visual Studio Codeをインストールする」で行う操作の流れを示しています。

「Visual Studio Codeをインストールする」で行う操作の流れを示す図
「Visual Studio Codeをインストールする」で行う操作の流れ
  1. Visual Studio Code公式サイトを開きます。
  2. 自分のOSに合う安定版をダウンロードします。
  3. ダウンロードしたファイルを開き、画面の案内に沿ってインストールします。
  4. Visual Studio Codeを起動できることを確認します。

Google Chromeをインストールする

Google Chromeは、作成したWebページの表示や動作を確認するために使用します。すでにインストールされている場合は、起動できることだけ確認してください。

次の図では、「Google Chromeをインストールする」で行う操作の流れを示しています。

「Google Chromeをインストールする」で行う操作の流れを示す図
「Google Chromeをインストールする」で行う操作の流れ
  1. Google Chrome公式サイトを開きます。
  2. 自分のOSに合うChromeをダウンロードします。
  3. 画面の案内に沿ってインストールします。
  4. Google Chromeを起動できることを確認します。

Visual Studio Codeを日本語で表示する

Visual Studio Codeが英語で表示されている場合は、日本語表示へ変更します。すでに日本語で表示されている場合、この操作は必要ありません。

次の図では、「Visual Studio Codeを日本語で表示する」で行う操作の流れを示しています。

「Visual Studio Codeを日本語で表示する」で行う操作の流れを示す図
「Visual Studio Codeを日本語で表示する」で行う操作の流れ
  1. Visual Studio Codeの左側にある拡張機能のアイコンを押します。
  2. 検索欄へJapanese Language Packと入力します。
  3. Microsoftが提供する「Japanese Language Pack for Visual Studio Code」をインストールします。
  4. 表示される案内に従ってVisual Studio Codeを再起動します。
  5. メニューが日本語で表示されたことを確認します。

文字コードをUTF-8に設定する

文字コードは、コンピューターが文字を扱うためのルールです。この教材では、日本語を含むファイルを扱いやすいUTF-8を使用します。

次の図では、「文字コードをUTF-8に設定する」で行う操作の流れを示しています。

「文字コードをUTF-8に設定する」で行う操作の流れを示す図
「文字コードをUTF-8に設定する」で行う操作の流れ
  1. WindowsではCtrl + ,、macOSではCommand + ,を押して設定画面を開きます。
  2. 設定の検索欄へencodingと入力します。
  3. 「Files: Encoding」がutf8になっていることを確認します。

インデントをスペース1個に設定する

インデントとは、コードの行頭に空白を入れて構造を見やすくすることです。この教材では、インデント幅をスペース1個に統一します。

次の図では、「インデントをスペース1個に設定する」で行う操作の流れを示しています。

「インデントをスペース1個に設定する」で行う操作の流れを示す図
「インデントをスペース1個に設定する」で行う操作の流れ
  1. 設定の検索欄へtab sizeと入力します。
  2. 「Editor: Tab Size」を1へ変更します。
  3. 「Editor: Insert Spaces」が有効になっていることを確認します。

ファイルを自動保存する

コードの保存忘れを防ぐため、Visual Studio Codeの自動保存を有効にします。

次の図では、「ファイルを自動保存する」で行う操作の流れを示しています。

「ファイルを自動保存する」で行う操作の流れを示す図
「ファイルを自動保存する」で行う操作の流れ
  1. 設定の検索欄へauto saveと入力します。
  2. 「Files: Auto Save」をafterDelayへ変更します。
  3. 「Files: Auto Save Delay」が1000ミリ秒になっていることを確認します。

afterDelayを選ぶと、コードを変更してから指定した時間が経過した後にファイルが自動保存されます。

準備できたことを確認する

  • Visual Studio Codeを起動できる
  • Google Chromeを起動できる
  • Visual Studio Codeのメニューが日本語で表示されている
  • 文字コードがUTF-8になっている
  • インデント幅がスペース1個になっている
  • ファイルの自動保存が有効になっている

ここでは、まだHTMLファイルを作成しません。次のレッスンで制作フォルダーと必要なファイルを作成します。

CHECK POINT

完了条件