【Day4】環境構築

2021年12月25日 16:20

プログラミングをするにあたって環境構築は避けては通れない道なんですけど、HTML/CSSの環境構築に関してはさほど難しいものではないのでさくっと構築しちゃいましょう。

chapter1 : VS Codeをインストール

まずはコードを書くためのエディタと呼ばれるツールをインストールしましょう。
macとwindowsでやり方がやや異なるみたいなのでそれぞれ下記の記事を参照してみてください。

macの方↓

windowsの方↓

インストールできたら自分が見やすいように設定してみましょう。
基本的に英語表記になっているので英語が苦手な方は日本語設定にしたうえでカスタムしていくことをお勧めします。
設定方法は下記の記事を参考にしてみてください。

chapter2 : プラグインをインストール

プラグインは拡張機能と呼ばれているもので、便利機能みたいなものです。
このプラグインをVS Ccode上でインストールすることで作業効率が格段に上がり、かつミスも軽減します。

例えば、ミスコードを教えてくれたり、コード入力の際の補完機能等があります。

プラグインはたくさんありますし、人によって便利だと思うものも違うので初めての方は下記の記事を参照してみて必要そうなものをインストールしてみてください。
また、プラグインはいつでもインストールできるので学んでいきながら必要に応じて必要なものをインストールしていけばいいと思います。

chapter3 : Live Server

Live Serverというプラグインがあります。
これは僕もデイトラを受講するまで存在を知らなかったんですけど、めちゃめちゃ便利なので是非インストールすることをお勧めします。

これまで僕はVS Codeで編集を行なった際、エディタを上書き保存(cmd+S)したあとに、ブラウザ上で更新(cmd+R)してどんな編集になっているの確認していました。

ところがこのLive Serverを使えば保存や更新などそんな面倒なことをいちいちしなくても、VS Code上で編集したコードがリアルタイムでブラウザ上で更新されていくんですよね。びっくりです。

詳しい使い方は下記の記事をご覧ください。

chpter4 : 検証機能(デベロッパツール)

Chromには検証機能という便利機能があります。
まずはどんなものか見てみましょう。

いまPCで見てくれてる人はWebページ上で右クリックしてみてください。
次に表示されたメニューの中に「検証」という項目があると思うのでそちらをクリック。
すると画面右側にコードがたくさん書かれた何かが表示されたと思います。
これが検証機能(デベロッパツール)です。

今後Webデザインをするなら絶対に覚えておいた方がいい機能なので、下記記事を参考に頭に入れておくことをお勧めします。

chapter5 : Emmet

VS CodeにはEmmet等機能が標準装備されているのですが、これもまた作業効率を爆上がりさせるきのうなので覚えておいた方が得です。

どんなものかというとコードを書く際に補完してくれるです。

例えば

<ul>
    <li></li>
<ul>

というコードを書く時、今計測したのですが僕の場合は9秒かかります。
でもEmmet様に頼って「ul>li」と入力するだけで...

ul>li

<！--　Tabキーを押す -->

<ul>
    <li></li>
<ul>

<!-- あらびっくり。こうなる -->

すごいですよね。
作業時間が9秒→3秒になるんです。
17文字の入力ををたった5文字でできるってやばくないですか？

たくさんのコードを書くことを考えた場合、1700文字入力すべきところが500文字程度の入力で済むのは時間効率爆上がりです。

よく使うEmmetをまとめてくれているcode shipさんの記事が分かりやすかったので確認してみてください。

それでは今日はこのへんで終わりにします。
ありがとうございました。

けけ丸

この記事が気に入ったらサポートをしてみませんか？