30DAYSトライアル1st

30DAYSトライアルのまとめ【DAY8】

DAY8の課題は「エディタをインストールしよう」になります。

DAY8課題

30DAYSトライアルを開始しますが、DAY1〜DAY7(ProgateのHTML&CSSの学習・道場コースの全てを完了させる)は30DAYSトライアルをやろうと決意する前に個人的にやってたので割愛し、DAY8からやっていきます。

VScode(Visual Studio Code)のインストール

30DAYSトライアルでは開発用のエディタに高機能且つ拡張機能も豊富で人気が高い、MicrosoftのVisual Studio Code(VSCode)をおすすめしているようです。

現に自分もすでにインストール済みで、模写コーディングはVSCodeでやってました。

インストール方法は東京フリーランスのサイトにQita記事へのリンクが貼られているので同じものを貼っておきますが、プログラミング経験者であれば手順見なくてもインストールできると思います。

MacにVisual Studio Codeを導入してみる

拡張機能のインストール

以下の拡張機能のインストールがおすすめされています。

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

開始タグと閉じタグを記述済みのタグを編集する際に編集しているタグに対応したタグ(開始タグを編集する場合は終了タグ、終了タグを編集する場合は開始タグ)も同時に編集してくれる。上記のリンクに編集時のGIF動画が貼られてるのでそれをみるとイメージが分かりやすいです。

「開始タグのみ修正して終了タグの修正を忘れてしまってた」などの凡ミスを減らしてくれる拡張機能。

CSSTree validator

https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree

CSSにのプロパティと値に誤りがないかをリアルタイムにチェックし、誤りがある箇所を強調表示してくれる。また、問題ウインドウに誤りがある箇所の一覧が表示され、をれをクリックすることで誤りがある箇所にジャンプできる。

Visual Studio Code CSS Support for HTML Documents

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

HTMLにclass、id属性を指定する時に、VSCodeのワークスペース内のスタイルシート(Sass含む)の中から候補を表示してくれる。

IntelliSense for CSS class names in HTML

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Visual Studio Code CSS Support for HTML Documentsと同じようにHTMLにclass属性を指定する際の補完(入力候補表示)をしてくれる。Visual Studio Code CSS Support for HTML Documentsとの違いはVSCodeのワークスペースだけでなく、link要素のCSSも対象というところ。

class属性の補完だけだとIntelliSense for CSS class names in HTMLのみで事足りるけど、id属性の補完はできないからVisual Studio Code CSS Support for HTML Documentsも入れる感じかな。

Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

VSCodeは英語なので、メニューなどを日本語化してくれます。

HTMLHint

https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

HTMLの文法に誤りがないかをリアルタイムにチェックし、誤りがある箇所を強調表示してくれる。また、問題ウインドウに誤りがある箇所の一覧が表示され、それをクリックすることで誤りがある箇所にジャンプできる。

zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

プログラムには大敵である全角スペースを表示する。

zenkakuをインストールしただけでは動作しません。「shift + commqne + P」でコマンドパレットを起動して「Enable Zenkaku」を実行する必要がある(全角スペーズの表示をやめる場合は「Disable Zenkaku」を実行する)。

「Enable Zenkaku」はVSCodeを起動する度に実行しなければならないのでちょっと面倒っていう方は「/Users/ユーザー名/.vscode/extensions/mosapride.zenkaku-0.0.3/extension.js」の「enabled」という変数の値をfalseからtrueに変更するとVSCode起動時に「Enable zenkaku」が実行された状態となります。(自分はこの設定にしました)

詳しくは以下のサイトで紹介されています。

VSCode の拡張機能zenkaku を起動時から適用

注意点としては上記のサイトはWindows7での例になっている点と、「/Users/ユーザー名/.vscode」は隠しファイルなのでFinderで隠しファイルを表示するようにしなければいけないというところですね。

Finderで隠しファイルを表示させる方法はMac – Finderで隠しファイル・フォルダを表示する方法で紹介されています。

以上がおすすめされている拡張機能になります。主にに入力の補完や文法チェックなどの入力ミス防止などの機能ですね。特に最後の全角スペースなんかは表示させておこないとパッと見ても分からないので、どこでエラーになっているか分からずに時間が過ぎていくとなりがちなので必須ですね。

Emmetを理解する

EmmetとはHTMLやCSSの入力を補完するプラグインで、VSCodeには標準で搭載されているようです。

個人的に勝手に閉じタグが作成されるとかかなぁと思っていましたが、東京フリーランスのサイトに貼られているリンクの「はじめて」でも簡単!Emmetの使い方とよく使うパターン集を見てみたら驚愕しました。

自分はどんだけ無駄なパンチをしてたんだと。

基本である「要素 + Tabキー」だけでもaタグとかはharf属性(harf=””)が記述されますし、下記の例なんて衝撃以外の何者でもないです。

開始タグの「>」を入力したタイミングで閉じタグが作られて「おぉ」って思ってたのが恥ずかしいです。

これからの30DAYSトライアルの課題の中だったり、模写コーディングする時に積極的に使っていって早く自分のものにしたいと思います。

まとめ

  • エディタはVSCodeがおすすめ(高機能、軽い、拡張機能で自分好みにカスタマイズできる)
  • 拡張機能は入力補完や入力ミスを防止するものを最低限インストールする
  • Emmetを使用するとプログラミングのスピードが上がり、入力ミスも少なくなる
  • HTMLでのEmmetの基本は「要素 + Tabキー」に演算子(+、*、>)の組み合わせでどうにかなる
  • CSSでのEmmetの基本は「プロパティの頭文字 + Tabキー」だけど、慣れが必要と思う
  • 最初はEmmetのチートシート片手にプログラミングすると良い
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す