Web経験半年の新人がコーディングのスピードアップで行っていること

Webサイトを作成する上で、コーディングのスピードは欠かせません。
スピードを上げることで、デザイン部分や確認の時間を取ることができ、
より精度の高いものを仕上げることにつながります。
今回は弊社の入社半年のデザイナーがコーディングのスピードアップのために行っていることを伝えたいと思います。

・タイピングスピードを上げる

・テンプレートを用意する

・事前に、必要な数値や画像のサイズを、メモやノートに書き出す

・各項目に分けてコーディングをする

・よく使うコードは、メモなどにストックする

・Emmetを使って打ち込みを減らす

タイピングスピードを上げる。

タイピングのスピードが、コーディングをする上で一番時短に繋がります。
打つ文字が多いということは、その分コードを多くかけることになります。
なので、まずはタイピングスピードを上げることが必要です。

テンプレートを用意する

コーディングには、決まった型があります。
基本的には、Header（ヘッダー）、nav（グローバルナビ）、kv（キービジュアル）、contents（コンテンツ）、footer（フッター）に大きく分かれています。
これを事前にテンプレートとして作っておくと、作り始める時にすぐ取りかかれます。
また、デザイン別にテンプレートを用意しておくと、より作業を短縮できます。

事前に、必要な数値や画像のサイズを、メモやノートに書き出す

画像のサイズや余白の広さを、事前に紙やテキストに書いておくことで、迷わず打ち込むことができます。
また、使うコードやクラス名などもあらかじめ決めておくと、コーディングだけに集中でき、作業スピードが上がります。

各項目に分けてコーディングをする

コーディングが全て完了してからチェックを行うと、不具合が出ていた場合に修正箇所を見つけるのに、大変時間がかかってしまう場合があります。
各ブロックに分けてコーディングを行い、ブロックが終わるごとにチェックを行うことで、完成後の不具合を未然に防ぐことができます。

よく使うコードは、メモなどにストックする

コーディングする中で、よく使うコードはメモ帳やスティッキーズにコピーしておくと便利です。使いたい時にメモからペーストして使えば、より作業効率が上がります。
また今後使いたいコードや、使ってみて便利だったコードなどもストックしておくことで、さらなる時間短縮に繋がります。

Emmetを使って打ち込みを減らす

Emmetとは、HTML、CSSをサポートしてくれるプラグインで、コーディングで打ち込む文字数をぐっと減らせることができます。
例えばCSSで、”db”と打つだけで、自動でdisplay: blockと表示されます。
Emmetは、各エディタでほぼ導入できると思います。
Emmitの詳しい使い方は、下記のHPcodeさんのブログを参照してもらえればと思います。
HPcode 「はじめて」でも簡単！Emmetの使い方とよく使うパターン集」
https://rfs.jp/sb/atom-github/atom03_emmet_howto.html

以上になります。
コーディングを始める前の事前準備を行ったり、日頃からコードをストックするなどの積み重ねが、スピードアップにつながる要因となります。
また、その他にもスピードアップにつながる方法があるので、またお伝えしたいと思います。