2020年09月11日

ひよこのサイト航海日誌

コーディング時に意識すべきこと

「サイト航海日誌(公開日誌)」ということで、
ここ数ヶ月で2つのサイトのコーディングに携わらせて頂いた中で
意識した点をレポートさせて頂きます。


——————————————
目次
1スケジュール感の把握
2デザインの全体像を意識する
3躓いた箇所はメモしておく

——————————————


1スケジュール感の把握


納品までの工程で、コーディングというのは一部分ですが、
コーディングの工程だけ考えて作業していると、全体の工程とのやり取りがスムーズに行きません。今振り返ると、はじめのうちは、自分が担当するページの優先順位に対する意識が低かったように思います。

具体的な例で言えば、お問い合わせフォームの仕組みなどは、コーディングだけでは作れません。
裏側のプログラム実装が必要です(実装の分量も多い)。
つまり、お問い合わせフォームは作業優先順位がかなり高いのです。

基本は上司から的確な指示があるので考えなくても大丈夫だったりしますが、
普段から自分で考えることを意識してやらないと、いつまでたっても仕事を回せないままで終わってしまうということです。

これはコーディングだけでなく、すべての仕事でも言えることではないでしょうか。
そういう基本的な姿勢は、Web制作も同じだと思います。




2デザインの全体像を意識する


デザイナーさんからデザインカンプ(設計図)を頂いたら、一番最初に全体的にページのデザインを確認することを忘れてはいけません。
各ページでの共通部分を把握するためです。

共通部分のCSSは基本まとめて一箇所の記述で終わらせる方が良いかと思います。
そうしないと、その分何度も繰り返して記述しなくてはいけなくなってしまいます。(これは、サイトのスピードを重くする原因の一つにもなるものです。)

もしかしたらここで、「コピペすれば一瞬で終わるじゃん」と考えた方もいるかも知れません。
しかし、あとからこの部分を修正したり、追加や削除する箇所が出てきたときに、その複製した回数分記述量が増えますし、
数が多くなりすぎると修正箇所を管理できなくなります。
おまけに、別の方が後からコーディングするときにもかなり苦労させてしまいます。

それらを回避するためにも、「後から追加/修正が出る」前提でCSS設計したほうが、
かえって全体の作業時間が早くなります。




3躓いた箇所はメモしておく


コーディング作業が完了して「やったー」と思うのもつかの間、
納品前の最終段階では、実機(スマホ・タブレット)を実際に使ってみたり、各ブラウザで見てみたりとテストします。

その際に、予想もしなかったエラーが出てくることがあります。(safariやIEで見たら表示がおかしい、スマホだとAndroidとiPhoneの表示が異なるなど)

これらのエラーはその都度解決していくことになるのですが、その際は必ずメモを取っておくと良いです。

なぜかというと、私の経験としては普段コーディング作業をやってる時に起こるエラーは、何回も修正対応することによって知識として定着するものですが、
テスト段階のエラーは、経験することが少なく、すぐ忘れてしまうので、1回経験した記述の修正は必ず「Boostnote」などにメモしておいて、
次回のコーディング時にすぐ対応できるようにしておくのが、後々困ることが少なくなります。


以上、コーディング作業の中で気づいた点でした。