2019.06.18
WEB技術

Webサイトを作成する上で、コーディングのスピードは欠かせません。
スピードを上げることで、デザイン部分や確認の時間を取ることができ、
より精度の高いものを仕上げることにつながります。
今回は弊社の入社半年のデザイナーがコーディングのスピードアップのために行っていることを伝えたいと思います。
タイピングスピードを上げる。
タイピングのスピードが、コーディングをする上で一番時短に繋がります。
打つ文字が多いということは、その分コードを多くかけることになります。
なので、まずはタイピングスピードを上げることが必要です。
テンプレートを用意する
コーディングには、決まった型があります。
基本的には、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
以上になります。
コーディングを始める前の事前準備を行ったり、日頃からコードをストックするなどの積み重ねが、スピードアップにつながる要因となります。
また、その他にもスピードアップにつながる方法があるので、またお伝えしたいと思います。
最新記事
2021/03/29
2021/03/01
2021/02/21
2021/02/01
2020/11/29
2020/11/13
2020/10/11
2020/10/04
2020/09/28
2020/08/24
