はじめに

私主観で書いていることは予めご了承ください。
私はタイピングがウルトラアメージング速いので、それが助けになっている場合もあります。

また、自動化などは昨今話題として頻繁に出てくるので、
そこにはフォーカスしません。
とにかく速く手を動かすコツを書きます。

あ、「お前だれだよ本当に速いのかよ」と勘ぐる方がいるかと思いますが、
スーパー速いです。

まず列挙します

emmetを使おう
タイピングを速くしよう
ショートカットキーを上手く使おう
知見を増やそう
時間を止めよう

そないな感じになっとります。

じゃあ各項目について語りましょう

emmetを使おう

大分表面的な話題になって本位ではないのですが、
これによってコーディングが速くなったのは紛れもない事実です。

4年ほど前、「zen coding」という名前で世に出た素晴らしい
仕組みなのですが、いつだかにemmetという名前に変わり、
機能も拡充されました。

出た当初は「コーディングが3倍速くなる」とか言われていましたが、
3倍はさすがにウソです。本当は5倍から8倍ぐらいです。

emmetについての詳しいことは、説明したくないのでどこかをご参照ください。
これとか (Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫)

だがしかし

大変魅力的で抱かれても良いぐらいのemmetではありますが、
気を付けてほしいのは、全部の機能を使いこなせるからといって必ずや幸せにはなれなかったということです。(個人差はもちろんあるかもですが)

どういうことかと言うと、例えばemmetを使えば

div+div>p>span+em^^^bq

と書いて展開すると

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

となりますね。
しかしですね。

これは本当にお得ですか?

私はひとつのタグにクラスを付けて展開をするなどの、
粒度を細かくした使い方しかしません。

全てを使おうとして、結局学習コストだけかかった経験があるから話しています。
ただ、一度使ってみて、どういうものかを実感するのは良いかもですね。

タイピングを速くしよう

これは非常に単純明快ですね。もうこれ以上説明できない!
私は小学生のころからウルトラアメージング速かったので、
ブラインドタッチができない人の気持ちにはなれません。

昔から利用していた練習道具としては、e-typingがあります。

カルテを残せるし、レベルアップも目に見えやすいです。
おすすめです。

ショートカットキーを上手く使おう

何事も、マウス操作が省ければ幸せになれます。(デザインは別と思っています)
ウィンドウの切り替えやページのリロード、
ディレクトリの移動、各ツールのショートカットなどなど。
Windowsだとメニューの項目にAlt+うんちゃらでフォーカスできるので、
これも非常に便利です。(Macは同等の機能がありません、ツールを使うなりコロ助なりしてください)

ショートカットについても、一個一個説明していたら大変なので、
下記をご参照ください。

知見を増やそう

これも見たままなのですが、重要な点が一点。
私が会社などで教育の際に口すっぱく言っていることがあります。

できなかった事に対して、どんな課題点があるかを必ず見直す
次の作業で絶対に課題をクリアする
上手くできても無理矢理反省点を見付ける

人間、慢心すると成長しないもので、反省しつづける、成長に意欲のある人が
成長していきます。

漫然と仕事をして成長ができるなんて、そんなチートはありません。

この精神でコーディングに向き合ってきて、私は多くの知識を得ることができました。
これで上手くいかなかったらすみません。

でも一番書きたかったのはこれかもしれないです。

時間を止めよう

これも見たままです。必要な要素として

スタープラチナ
ザ・ワールド
お酒

があります。
これがないと難しいですよね。

最後に

色々書きましたが、私もいつまでも勉強中の身で、
これからもっと速くなります。

素敵なコーダーの皆様にとって、成長の助けに少しでもなれればと思い、
今回の記事を書かせていただきました。

助けにならない場合もあります。
その場合は、あなたの方法を私にも教えていただけますと幸いです。

是非とも、よろしくお願いします。

高速なhtml / cssコーディングのコツ5選