「誰しもが 初めの頃は 未経験」

どうも。フロントエンドエンジニアの杉原睦弘です。
私はWEB業界に足を踏み入れてから4年目になります。
誰しも駆け出しの頃というものはあるのもで、コーディングをしていて「絶対間違ってないはずなのに！なんで動かないんだ！」という頃があったことでしょう。
しかもそれが、うっかりミスで綴りが違うなんてことが原因だったりしたものです。
私もよくやらかしました……（遠い目）

タイプミスで躓く時間は無駄そのもの！
うっかりミスをなくせば、雇用側もハッピー！労働者側もハッピー！
つまり、タイプミスが発生しづらい環境を作ることが幸福への道！

WEB初心者の方は、小難しいことは抜きにして、テキストエディタの環境設定をしましょう！

はじめに

みなさんはきっと、Dreamweaver, Sublime Text, Atom, Brackets等のテキストエディタを使用していることと思います。
この記事では、エディタごとの設定方法やプラグインの入れ方は説明しません。
どのテキストエディタでも共通で設定しておくとよいと思うものを紹介します。

因みに私はSublime Textを使っています。ですので、記事中の画像はSublime Textのエディタの画像です。

タブ・スペースは可視化する

コーディングする際に、意図しない場所に全角スペースが入ってしまい、想定通りの表示にならない、正常に動作しない、なんてことがあったりします。意図しない入力に気づきやすくするために、タブ・スペースは可視化しておくのがベターです。

タブ・スペース非表示

タブ・スペース表示

※全角スペースはエディタによって可視化できるものと、できないものがあります。

テキストエディタのフォントを変更する

テキストエディタのフォントをわざわざ変更する人は少ないかもしれません。しかし、誤読を防ぐ意味ではフォントを変更するのは有用です。
よく見間違えるのが 0（ゼロ）とO（オー）や、I（アイ）とl（エル）と1（いち）などです。
こういった文字の差をわかりやすくしているフォントは、プログラミング用フォントとしてネット上で公開されています。プログラミング用フォントは種類がありますが、今回は「RictyDiminished」というものを使ってみます。

「RictyDiminished」は全角スペースが可視化されるため、個人的にオススメです。
「RictyDiminished」はこちらからダウンロードできます。

ダウンロードしたttfファイルをダブルクリックすれば、フォントビューアーが立ち上がります。
ビューアーにある「インストール」ボタンを押すと、フォントがパソコンに追加されます。

フォントをインストールし、エディタのフォントを変更すると以下のようになります。

・フォント変更前

・フォント変更後

EmmetでHTML,CSSを爆速コーディング

EmmetはHTMLとCSSの入力補助として提供されているプラグインで、その効力は絶大です。
Emmetが昔はZen-codingと呼ばれていた、等々詳しいことは色々なサイトで語り尽くされていますので、ここではEmmetを使うとどのように入力補助を行えるかの例をご紹介します。
少しでも「お！これは良さそうやん！わいのエディタに入れたろ！」と思っていただければ幸いです。

HTMLタグの展開

• HTMLのテンプレートを展開

  html:5

• タグ名の展開

  div, p, span 等々

子要素ありの展開

• 子要素ありのタグの展開

  div>p>span
  CSSのセレクタと同じで「>」で子要素を意味します。

• 子要素の数を指定して展開

  ul>li*5
  「*」で数を指定できます。

• 子要素に連番を入れて展開

  ul>li{text $}*5
  「{}」で囲うことでタグ内に任意の文字列を挿入できます。
  「$」で連番の数字を入れることができます。

兄弟要素の展開・class, idを指定

• 兄弟要素の展開

  div+p
  CSSのセレクタと同じく「+」で兄弟要素を意味します。

• class, idの指定

  div.class-name
  div#id-name
  CSSのセレクタと同じく「#」「.」でidとclassを意味します。

CSSの展開

• CSSの展開

  プロパティ名の頭文字などでcssのプロパティを展開できます。
  値も指定して展開することが可能です。

Emmetにはまだまだ他にも記述方法があります。

Emmetのコマンド一覧は公式のチートシートを参照してください。

まとめ

どうですか？テキストエディタの環境設定って楽しくないですか？
入力補助機能を強化したり、可読性を高めるように設定したり、やりだしたら止まらないですね。
エディタによってはマルチカーソルでの入力ができたり、エディタ自体に拘るともっと楽しいですよ。
ではでは！