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

酒井 琢郎のプロフィール画像
エンジニア 酒井 琢郎

1,188 view

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

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

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

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

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,486 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,159 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,491 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    ベイジディレクターのリアル

    2,541 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    BtoBサイトにおける「ファーストビュー攻略法」

    2,869 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
上に戻る