効率良いフロントエンド実装をするために新卒の私が気を付けていること

どの案件でも共通するが、どういう順番でコーディングを進めていくかは、スピードに大きく影響する重要なことだと思う。

フロントエンドが行うコーディングでいえば

  • 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版デザインを実現するには構造を変えなければならない、という二度手間も発生しない。

個人の裁量に任せられている部分ではあるが、こういった部分にこそ効率化の秘訣は隠れている。今後も試行錯誤しながら、最適なコーディングスタイルを考えていきたい。