Frontend Book

Chapter 1 - 1

開発環境の構築

Webページを作成するには、HTMLやCSS、JavaScriptなどのコードを記述する必要があります。

<body>
  <h1>HTMLのイメージ</h1>
  <p>このようなコードを書く</p>
</body>

一般的なテキストエディターであるメモ帳アプリでは、エラーの発見が困難なので、専用のテキストエディターが不可欠です。

Visual Studio Code(以下VSCode)は多くの開発者に愛用されている専用のテキストエディターです。

このチャプターではVSCodeをインストールし、開発を始める準備を整えます。

VSCodeのインストール

  1. こちらからインストーラーをダウンロードします。
  2. エクスプローラーでダウンロードフォルダを開きます。
  3. ダウンロードされたインストーラー VSCodeUserSetup-{version}.exe をダブルクリックして実行します。 screenshot
  4. 同意するを選択し、次へをクリックします。 screenshot
  5. デフォルトのまま次へをクリックし、続けてインストールをクリックします。
  6. Visual Studio Code セットアップウィザードの完了の画面が出てきたら完了をクリックしてインストール完了です。 screenshot

拡張機能の追加

VSCodeには様々な拡張機能が用意されており、自分が使いやすいようにカスタマイズすることができます。

ここでは基本的な拡張機能として、コードフォーマッターであるPrettierとローカルサーバーを立ち上げるためのLive Serverのインストールを行います。

Prettier

Prettierはコードを綺麗に整えてくれるための機能です。

コードを整形することによって、可読性が上がり、ミスが起きにくくなります。

Prettierのインストール

  1. VSCodeを起動し、左側のバーのExtensionsを開きます。 screenshot
  2. 検索バーにPrettierと入力し、選択します。
  3. Installをクリックする screenshot

Prettierの有効化

  1. VSCodeの画面の左下にある歯車マークをクリックし、Settingsをクリックします。 screenshot
  2. 検索バーにdefaultformatterと入力します。 screenshot
  3. Editor: DefaultformatterをNoneからPrettier-Code Formatterに変更します。 screenshot

保存時にコードをフォーマットするようにする

  1. 設定画面の検索バーにsaveと入力します。
  2. Editor: Format On Saveにチェックを入れます。 screenshot

VSCodeを開き直し、正しくPrettierが起動しているか確認して完了!

Live Server

Live Serverはコードを追加・変更した際にローカルホストを起動し、ブラウザの更新を自動化する機能です。

コードを変更するたびにブラウザを更新するのは手間なので自動化することによって素早く変更を確認することができます。

Live Serverのインストール

  1. VSCodeを起動し、左側のバーのExtensionsを開きます。
  2. 検索バーにLive Serverと入力し、選択します。 screenshot
  3. Installをクリックします。

VSCodeの画面の右下にGo Liveの表示が追加されていれば完了!

おめでとうございます! これでwebページを作る準備が出来ました。

次のセクションで早速HTMLを書いてみましょう!