【Q&A】楽にコーディングするには?

こんにちは、@codeship_techです。

本日の質問がこちら。

コーディングの作業効率をどうやったら上げることができますか??

ということで、作業効率についての質問ですね。

実際のwebサイト作成でコードを書いていると、かなり多くのhtmlやcssを書きます。
多いものだと1000行も書いたり、、

そんな時、もっと早く、もっと楽にコードを書けたらな!とみなさん一度は思いますよね。

それではこちらの質問に答えていきます。

ショートカットキーやEmmetを使いこなしましょう!

以前紹介したPCに最初から存在しているショートカットキーや、vscodeには最初から入っているEmmetという機能を使いこなすことで、楽に早くコードを記述できます。

体感的にはEmmetやショートカットキーを使いこなせば、二倍くらい作業が早くなるイメージですw

ショートカットキーに関しては以前説明しているので、その記事を読んでみてください。

ショートカットキーに関する記事はこちら

Emmetとは??

今回はあまり深く説明しませんが、わざわざコードを全部書かなくても、その中の数文字を打つだけで、cssプロパティやHTMLのタグなどを打つことができます。

今から通常の書き方とEmmetでの書き方を比較していきます。

例えば、<ul><li><a>でコードを書くとします。

通常の場合

通常の場合、次の順番で書きますよね。

①まず、<ul></ul>を書く

HTML
<ul></ul>

②次にさっき作った<ul></ul>の中に<li></li>を複数個作ります

HTML
<ul>
<li></li>
<li></li>
<li></li>
</ul>

③その中に1つずつ<a href=""></a>を入れていきます

HTML
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

この①〜③の流れで作る人が多いのではないでしょうか。

大抵<li>は複数個作るため、毎回書くの大変ですよね、、

Emmetを使う場合

通常の書き方と同じく以下のコードを書きます。

HTML
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

Emmetを使う場合、このように書くだけで済みます。

HTML
ul>li*3>a

一応言葉で説明すると、<ul>の中に<li>を3つ作り、それぞれの中に<a>を作る、という意味です。

このように楽にコードを打つことができるのです!

これらを使いこなすだけで今までより遥かに楽に早くコードを書けるようになるので、ぜひ勉強してみてください!

次回よく使うemmetに関して紹介していきたいと思います。

本日は、コーディングの作業効率の上げ方について解説しました。


授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。

1 COMMENT

現在コメントは受け付けておりません。