コーディングをしたいと思い仕事にしてから約4年、ずっとwebサイトを作り続けてきました。
下りてきたデザインデータを元にマークアップしデータ納品ということをしていますが、制作の際に効率よくコーディングする為に意識していることをまとめたいと思います。
意識していること
頭で設計をイメージ
まずはデザインをしっかり見て、どのような設計にするのかを頭でイメージをすること。
webサイトは更新がつきものなのでベストな設計なんてものは存在しないと思いますが、よりベターな設計は何かをしっかり頭で想像することが重要だと考えています。
設計なんてまだわからないという状態だとしても、
どうhtmlを書いて、どうcssでレイアウトして、どういうアニメーション・演出を盛り込んで...
などを頭で描ききれればスムーズなマークアップができると思います。
イメージが湧かない場合は、このタイミングである程度実装方法を調べておくことをおすすめします。
ふわっとしたまま実装を進めない
- ここにアニメーションは入れようかな
- 画像にしちゃうか、htmlで組むべきか
- これも共通モジュール？ ...etc
どんなに頭でイメージしていても、コーディングの最中にはじめのイメージからそれるケースも多々あります。
そのときは、必ず立ち止まって自分の中で設計を固め直すことをおすすめします。
これを随時行わないと、ぐちゃっとしたコードになってしまい、死に目を見ます。（幾度となく経験してきた）
記述はわかりやすく
シンプルでわかりやすいコードが一番いいと思います。
ですが、記述している時は常に「命名が長くなってしまっている」「コメントアウトかいた方がいいか」など悩みがちだったり、
時間に追われていたりします。
その時の個人的な優先度は、わかりやすさ > コードの綺麗さです。
わかりやすくて綺麗が一番いいですが、そこのバランスに悩むくらいならわかりやすさを取るべきだと考えます。
もちろん時間が許す限り綺麗にしたいですが、なかなか時間がない時が多いです。
そんな時はわかりやすさを優先した方がトータル的に速いです。
まとめ
- 頭でコーディングのイメージを固める
- 詰まったときは後回しにしない
- 記述はわかりやすさを優先
上記意識することで、トータル的な作業時間は格段に減りました。
感覚的には、頭で考える時間と手を動かす時間は五分五分くらいのときが一番スムーズな気がします。
結局は急がば回れということですね。