【告知】ノマドエンジニア養成ブートキャンプ

【DAY8.】30DAYSトライアル8日目をわかりやすく解説

web開発

 

おはこんばにちは、ミヤビです。

 

さて、今回からは環境設定編になります。

 

今までは、Progateにてインプット作業が中心でしたが、開発や実践に向けてローカル環境の設定をしていきます。

 

 

✔︎本記事の内容

  • DAY8.『エディタをインストールしよう』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

【事前準備】エディタをインストールしよう【VSCodeがオススメ】

vscode

ローカル環境でコーディングするために、まずエディタを用意しましょう。

 

そこで、オススメなエディタが、Emmetを標準で搭載している「Visual Studio Code」(VSCode)です。

 

Emmetととは、コードの入力を大幅に短縮する機能のことです。

 

控えめにいって神なので、Emmetを標準搭載したVSCodeをダウンロードすることをオススメします。

 

VSCodeのインストール方法

  1. 【Mac用】VSCodeを導入してみよう

 

 

拡張機能をインストールしよう【10個】

英語ですが、ザックリと翻訳します。

 

下記は無料なので、是非拡張してコーディングを効率化しましょう。

 

1.Auto rename tag

HTMLのタグの名前を直す時に、そのタグのペアも自動的に修正してくれる機能。開始タグを修正する場合は終了タグも修正してくれ、その逆も然りです。

 

2.CSSTree validator

CSSのプロパティと値の間違っている箇所を教えてくれる機能。

 

3.Visual Studio Code CSS Support for HTML Documents

HTMLにclass、idを指定する際、いくつかの候補を表示してくれる機能。

 

4.IntelliSense for CSS class names in HTML

HTMLにclassを指定する際、いくつかの候補を表示してくれる機能。

 

5.Japanese Language Pack for Visual Studio Code

VSCodeを日本語化する機能。

 

6.HTMLhint

HTMLのエラー箇所を表示し、どう修正すれば良いかヒントを与えてくれる機能。

 

7.zenkaku

全角スペースを可視化してくれる機能。

 

8.indent-rainbow

インデントスペースが配色され、見た目が綺麗になる機能。

 

9.Code Spell Checker

コードのスペルミスをしてる時に、緑の波線が表示されます。

 

10.Live Server

Chromeブラウザで、リアルタイムでコードの結果が確認できる

 

Emmetを理解しよう

Emmetとは、ザックリいうと、HTMLとCSSのコード入力を短縮する機能です。

 

Emmetを使うメリットは下記のとおり。

 

  • タイピング時間の短縮
  • タイピング疲れの軽減
  • タイピングミスの防止

 

非常にコーディングが効率的になります。

 

ここでEmmetの具体例をいくつか紹介します。

 

  • <p></p> → p + tabキー
  • <div class=” “></div> → div. + Enterキー
  • <img src=” ” alt=” “> → img + tabキー

 

  • background-color:;(18文字) → bgc
  • margin-bottom:;(15文字) → mb
  • display: inline-block;(21文字) → dib

 

こんな感じで、大幅にコーディングが効率化します。

 

DAY8.を機会にEmmetをマスターして、コーディングを効率化しましょう。

 

あと、下記を参考にすると大変分かりやすいのでオススメです。

 

「はじめて」でも簡単!Emmetの使い方とよく使うパターン集

 

ローカル環境でのコーディングには、効率化が必須です。

 

なぜなら、補助輪なしで行うと時間と労力が凄くかかるからです。

 

たとえば、「background-color:;」を毎回打ち込むのはわりとメンドイですよね。

 

しかし、Emmetがあるかないかで100回入力した時の差は、1800文字と300文字…

 

こんなにも差が現れます。

 

まずは、実際に自分の手で動かして、Emmetの素晴らしさを実感してみてください。

 

下記にEmmetのチートシートも貼っておきます。

 

 

というわけで、今回はここまでです。

 

次回は、ショートカットとファイルパスの理解についてです。

 

ここも基本を抑えて、作業効率を高めましょう。

 

ファイル 【DAY9.】30DAYSトライアル9日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】