デイトラWeb制作コース 初級編 DAY4【環境構築 VS codeを使いこなす】
ご覧いただきありがとうございます。
こんにちは！TAO（タオ）です。
今日はDAY４【環境構築について】の学習を進めていきました。
プラグインを入れて作業を効率化。
VS codeをそのまま使うこともできますが、プラグインを入れることで作業の効率化やミスやエラーを減らすことができます。
複雑な作業が簡素化され、学習がスムーズに進むため初心者ほど入れたほうがいいのかなと思います。
よく使われている拡張機能
Live Server
リアルタイムでプレビューできるプラグイン。コードを保存するたびに、ブラウザが自動でリロードされ最新の変更が反映されます。
Prettier - Code formatter
コードの整形を自動で行うプラグイン。読みやすいコードに整えてくれます。
Japanese Language Pack for Visual Studio Code
VSCodeの文章を日本語に変換するプラグイン。デフォルトが英語なので必須ですね。
上記の他にも使われている拡張機能もありますが、３つのみ紹介させていただきました。
↓の記事でほかのプラグインも紹介されているので、気になるものを入れてみて試してみてもいいと思います。
Emmet（エメット）
HTMLやCSSの入力補完するプラグイン。VSCode にはデフォルトで付いている機能です。
Emmetを使う理由
コードを書くスピードが上がる：簡単な記述でコードが書けるので、手間が省けます。
ミスが減る：自動生成されるのでミスが減ります。
Emmetで書いてみた
nav>ul>li*3>a と書いてEnterをを押すと、↓のようなHTMLが生成されます。
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>CSSでは、セレクタ｛ ｝の中にfz20と書いてEnterを押すと、↓のようなCSSが生成されます。
p {
font-size: 20px;
}こんなに簡単にコードを書けると便利ですね。はじめのうちはEmmetをスムーズに書けませんが、慣れていくと少しずつ速くなってくるのかな？？
Emmetだけでイメージをできない方は、展開されたときの状態（赤枠）が表示されるので、それを見ながら書いていくほうがいいかもしれません。
↓の記事では上記のEmmetの以外もたくさん紹介されているので、よく使うものからどんどん試していくといいと思います。
たくさん使えるようになると、コーディングのスピードが爆速になりますね。
↓の記事でEmmetについて解説されています。
↓Emmet Cheat sheet
Googleの検証ツールを使ってみる。
表示がおかしい部分の原因を見つけたり、他のWebサイトがどのように作られているかを学ぶことができます。
ウェブページ内で右クリックし、「検証」を選択します。↓のように表示されます。
テキストを書き換えてみる（テスト的に編集する）
右に表示されているHTMLの要素を選択して、↓のようにテキストを書き換えることができます。
テスト的に編集しているだけなので、VS Codeには反映されません。
同じようにCSSも変更することができますし、様々なデバイスの表示をシミュレーションをすることができます。
サイト制作には欠かせない機能ですね。
↓の記事で使い方が解説されています。
まとめ
プラグイン：入れることで作業の効率が上がり、ミスやエラーを減らすことができる。最初は必要最低限でOK。必要に応じて増やしていく。
Emmet：書くスピードが上がり、タイプミスを減らすことができる。
検証ツール：HTML / CSSの表示（レスポンシブ）構造やデザインを確認しながら行える。
さいごに
コードを書く作業は、１ページあたり数百行以上になるので、以下にミスを減らして効率的に行えるかが大事。慣れるまでは時間がかかるが、少しずつ試していく。
最後まで読んでいただき、ありがとうございました。