Webサイトコーディングのお仕事を始めてから4年ほど経ちますが、「フロントエンドエンジニア」と名乗れるようになったのはここ2年くらいの私です。
「これからフロントエンドエンジニアとして働くぞ！」な方へ向けて、私が開発時に留意していることや気をつけたいことを自戒の念を込めて残していきます。
デザインを受け取ってから開発に着手するまで
画像書き出しの設定を確認
XDでデザインをいただいた時に多いのですが、画像の書き出し権限が無い場合があります。
コーディング中にこれが発覚すると、デザイナーさんに依頼している間作業が止まってしまったり、タイムロスが発生する可能性もあります。
それを防ぐため、デザインデータをいただいた後なるべくすぐ確認するようにしています。
繰り返し使えるパーツを探す
個人的にはできるだけCSSを書く量を減らしたいので、繰り返し使える部分は共通パーツ化してしまいます。
お問い合わせボタンやリンク、記事サムネイルなどはなるべく一つのCSSで済むように設計します。
後からデザインに修正が入ったりした場合も、ひとつのCSSを修正すれば良いので手間を減らせます。
「色は違うが形は一緒」などの場合は、バージョン違いとして作成することが多いです。
全ページのデザインに目を通し、全体のレイアウトをおおまかに考える
全てのページで同じテンプレートを使用できる場合と、個別で調整が必要な場合が出てくると思います。
一つのテンプレートで済むのであれば一番簡単なのですが、調整が必要なものは早めに把握して設計することで後々崩壊を防ぐことにもなるのではと考えています。
開発
とにかくファイル管理を楽にする
CSSやJSの設計手法はたくさんありますし、人それぞれ好みもあるかと思います。
ですが、パーツや処理ごとにファイルを分けることで触るファイルが分かりやすくなります。
後から開発にアサインされたり、担当が変わる場合もスムーズにできるのではないでしょうか。
私自身は普段、CSSはFLOCSSをベースに設計しており、JSも処理ごとにファイルを分けています。
適度にコメントアウトを入れる
どうしても一つのCSSファイルが肥大化してしまったり、JSもコード量が増えてしまったりすることがあると思います。
そういう場合は、他の人が見てもわかるようにコメントアウトを入れます。
特にJSは、「この関数は何をしているのか」が見てすぐ分かるコードの方が読みやすいなと思っています。
基本的に、自分以外の誰が見ても理解できるコードを書くよう心がけています。
lintツールを入れる
私は元々面倒でlintを入れていなかったのですが、複数人で開発するようになってからはlintの重要性に気づきました。。
lintを導入することで、自分じゃ気づけなかった文法エラーやミスを減らすことができます。
CSSやJS、画像の軽量化
これは公開後のサイトパフォーマンスに関わってくるので大変重要だと思います。
画像やCSSの圧縮は今では当たり前に行われているかと思いますが、そのほかにも使用していないCSSの記述を削除してくれるパッケージがあったり、webpを使うことで画像の容量を大幅に軽減することもできます。
そういったものを開発環境に組み込んでおくと、サイトの表示速度を早めてパフォーマンスを上げることにもつながります。
さいごに
まだまだ開発に関して勉強中なので、他にも便利なツールややるべきことはたくさんあると思います。
こまめにそういった情報を集め、実際に使って試してみることで自分の知識・技術にも繋がってくるので、引き続き「もっと何かできないか」を探していきたいと思います。