時給が全然上がりません（泣）
上記のように思っている方は絶対に最後まで記事を読んでほしいです！
コーディングを効率的にできる方法はあります！
私も元々
コーディングするスピードが遅く
初案件の時給は100円を切っていました笑
そこから
効率的にコーディングできるように
調べてよかったものだけをご紹介します！
コーディングで意識するポイント
まず、
コーディングで意識しておくと
効率が上がる２つのポイントについて
お話しします。
結論
「コードのテンプレート化」と「使用するclass名を統一」です。
コードのテンプレート化
Webサイトを制作を重ねてくると、
似たようなコーディングをする機会が増えてきます。
その時に、
同じコードをまた書いていると
時間がもったいないですよね！
なので、
よく使いそうなコードに関しては
再利用できるように
コードをテンプレート化させておくと
かなりの時短が可能です。
例えば、
『ハンバーガーメニュー』『見出し』『横並び』など
他にもたくさんあります！
これらのテンプレートを作るのが面倒くさい場合
他のサイトで紹介されているコードをコピペして
保存しておくのも良いですね！
私がお世話になっているサイトは
webパーツ屋さんです！
実装したいパーツを押すと、
HTMLとCSSが出てきてコピペをするだけなので
とても使いやすいです！
クラス名の統一
次に、
クラス名を一つ一つ考えていると
時間がかかってしましますよね。
なので、
使うクラス名をどのWebサイトを作る時でも
統一させるようにしましょう！
私は以下のように統一させています。
セクション：〇〇-container
大枠：〇〇-content
中枠：〇〇-inner
複数個：〇〇-items
単数個：〇〇-item
タイトル：〇〇-title
テキスト：〇〇-text
あとは必要に応じて、
自分なりのクラス名を考えて増やしています。
クラス名を事前に考えることで効率が上がります！
Emmet（エメット）
Emmet（エメット）とは
HTMLとCSSを省略して書くことのできるツールです。
Emmetを使用すれば、
タイプ数をかなり減らすことができるので
コーディングする時間を減らすことができます。
例えば
h1
と入力し、tabキーを押すと
<h1></h1>
というソースに変換されます。
他にも
ul>li*5>a
と入力し、tabキーを押すと
というソースに変換されます。
慣れてしまうと
このように130文字のコーディングが
たった９文字ですることができるので
かなりの時短になります。
SCSS（SASS）
SCSSとは
SASSの構文の一つであり、ウェブページのスタイルを指定する再利用・保守性の高いCSSを効率的に記述するためのものです。
SCSSを使用することで
「変数の定義」「修正作業の効率化」「コードの再利用」「クラス指定の時短」をすることができます！
詳しくはこちらのサイトがわかりやすかったので、
チェックしてみてください！
SASSとSCSSの違い
結論から言うと
書き方が違います。
Sassの場合は、
『{…}（波かっこ）』、『:（コロン）』や『;（セミコロン）』が必要なく、
.sassという拡張子を使います。
SCSSは、
CSSと同様『{…}（波かっこ）』でブロックを作り、
『:（コロン）』や『;（セミコロン）』を使います。
.scssという拡張子を使います。
CSSを理解していれば
SCSSの記法をイメージしやすいことから
現在はSCSSが主流となっています！
sassとscssの導入方法は
こちらの記事がわかりやすかったので
チェックしてみてください！
スニペット
スニペットとは
辞書登録のようによく使うコードを保存することができ、簡単に呼び出すことができる効率化ツールです。
HTML、CSS、JavaScriptなどの
コードを使いましできるので
一度やったことを登録しておくとかなりの時短に繋がります。
はにわまんさんのこちらの記事が
わかりやすかったので紹介しておきます！
ファイル名変更君
コーディングをするにあたって
UIデザインにある画像を保存することが多々あります。
画像をダウンロードをして
名前を一つ一つ変更するのは
面倒くさくないですか？
そこで超便利なのが、
ファイル名変更君！
名前がバラバラになっていても
一括でリネイムすることができます！
使い方がわかりやすい記事はこちらです！
最後に
この記事に書いてあることを
実践しただけで
コーディングの効率が絶対に爆上がりするので試して
時給をあげていきましょう！