どの案件でも共通するが、どういう順番でコーディングを進めていくかは、スピードに大きく影響する重要なことだと思う。
フロントエンドが行うコーディングでいえば
- HTMLを組む
- PC版のCSSを書く
- SP版のCSSを書く
- PSDから画像を書き出す
- JavaScriptを実装する
これらが主な作業だ。この順番を案件ごとに変え、どの流れが一番効率的か試行錯誤している。
最初の頃は、以下のような流れで進めていた。
1. PC版のHTML・CSSを組む
2. SP版のHTML・CSSを組む
3. JavaScriptを実装
PC版とSP版を一気に組もうとすると、特定モジュールの実装に多くの時間を割いてしまい、全体の進捗が進まなくなるからである。JavaScriptを後出しにしていたのは、JavaScriptが苦手だったからだ。
しかし最近は、1つのモジュールを作り始めたらPC版もSP版も対応し、JavaScriptも実装するというように、モジュールを一つひとつ完成させながら進めるスタイルに定着しつつある。
このスタイルに変わった理由は、スキルアップしてコーディングのスピードが上がったこと、JavaScriptの苦手意識がなくなったことが挙げられる。しかし一番の理由は、作業時間短縮の問題である。HTMLやCSSが完成していない状態でPC用の対応だけ仕上げて次のステップに進み、SP用のコーディングになったときに、「このモジュールはどうしてこんな構造にしたのか」と思い出す時間がなくなり、トータルで時間を節約できるからだ。
先にHTMLだけ組んでしまうと、案外忘れてしまうことがある。また、PC版・SP版を一気に組むことで、PC版はこの構造で良かったけど、SP版デザインを実現するには構造を変えなければならない、という二度手間も発生しない。
個人の裁量に任せられている部分ではあるが、こういった部分にこそ効率化の秘訣は隠れている。今後も試行錯誤しながら、最適なコーディングスタイルを考えていきたい。
