こんにちは、@codeship_techです。
本日の質問がこちら。
コーディングの作業効率をどうやったら上げることができますか？？
ということで、作業効率についての質問ですね。
実際のwebサイト作成でコードを書いていると、かなり多くのhtmlやcssを書きます。
多いものだと1000行も書いたり、、
そんな時、もっと早く、もっと楽にコードを書けたらな！とみなさん一度は思いますよね。
それではこちらの質問に答えていきます。
ショートカットキーやEmmetを使いこなしましょう！
以前紹介したPCに最初から存在しているショートカットキーや、vscodeには最初から入っているEmmetという機能を使いこなすことで、楽に早くコードを記述できます。
体感的にはEmmetやショートカットキーを使いこなせば、二倍くらい作業が早くなるイメージですw
ショートカットキーに関しては以前説明しているので、その記事を読んでみてください。
Emmetとは？？
今回はあまり深く説明しませんが、わざわざコードを全部書かなくても、その中の数文字を打つだけで、cssプロパティやHTMLのタグなどを打つことができます。
今から通常の書き方とEmmetでの書き方を比較していきます。
例えば、<ul>と<li>と<a>でコードを書くとします。
通常の場合
通常の場合、次の順番で書きますよね。
①まず、<ul></ul>を書く
<ul></ul>
②次にさっき作った<ul></ul>の中に<li></li>を複数個作ります
<ul>
<li></li>
<li></li>
<li></li>
</ul>③その中に１つずつ<a href=""></a>を入れていきます
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>この①〜③の流れで作る人が多いのではないでしょうか。
大抵<li>は複数個作るため、毎回書くの大変ですよね、、
Emmetを使う場合
通常の書き方と同じく以下のコードを書きます。
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>Emmetを使う場合、このように書くだけで済みます。
ul>li*3>a一応言葉で説明すると、<ul>の中に<li>を3つ作り、それぞれの中に<a>を作る、という意味です。
このように楽にコードを打つことができるのです！
これらを使いこなすだけで今までより遥かに楽に早くコードを書けるようになるので、ぜひ勉強してみてください！
次回よく使うemmetに関して紹介していきたいと思います。
本日は、コーディングの作業効率の上げ方について解説しました。
