kaibukuroのブログ

HTML/CSS/JavaScript/PHPなどのアウトプット

【フロントエンド】リファクタリングについて

初めに

今まで5年ほどマークアップ＆フロントエンドエンジニアとして働いてきたので、
フロントエンドエンジニアリング（HTML/CSS/JSやその他）において役に立ちそうなリファクタリング（コーディング全般の）をまとめます。
ここでいうリファクタリングは、保守性、アクセシビリティ、サイト高速化などが目的です。

HTML

適切なタグや属性を使う

  • マークアップする人間としては、全てのユーザーに優しいコード、具体的にいうとユーザビリティやアクセシビリティ面をクリアにしたコードを書くべきだと思っています。そのためにもHTMLタグや属性を、正しく分かりやすく記述することでユーザーに伝えることが大事です。

参考）
zenn.dev
ics.media
qiita.com

昨年デジタル庁でもアクセシビリティガイドラインが発表されたのでぜひ参照してみてください。www.digital.go.jp

CSS

  • class名はデザイン上じゃなく用途で付けるなど、他の人が見て分かりやすい命名にすると良いです。
    例）「.blue」や「.left」 などデザイン上の名前じゃなく、「.caption」など

参考）
w-tatsu.sakura.ne.jp

画像

容量

  • 近年はWebモバイルファーストが重要と言われるほどモバイル端末（スマホ）の利用が増えてきていて、そういった意味で画像容量は抑えなくてはいけないですね。
  • 僕の目安としては、jpg,pngなら500MB未満には抑えるようにしてます。

pictureとsourceタグ

  • HTMLの話になりますが、PCとSPで違う画像を使う場合、CSSで出しわけせず、pictureとsourceタグで出しわけすることで読み込む画像を一つにできます。

developer.mozilla.org

Webp

  • jpgやpngの1/4ほどの容量であり劣化も少ない画像形式がWebPです。
  • 静的サイトなら、上記のpictureとsourceで出し分けたり、htaccessで読み込み設定をする必要があります。WPサイトなら、WebP導入はプラグイン（EWWWなど）により導入が簡単なので積極的に取り入れていきたいです。
  • 余談ですが、今後はますますWebPやAVIF導入が主流になっていくと思うので、ブラウザの進化につれて私たちも取り入れていきたいです。

最後に

日々情報を調べることは多いと思うので、参照すると良い個人的オススメサイトを紹介します。

オススメサイト

MDN（Mozilla）さんでは、Web技術における正しい情報が掲載されていますので、迷ったらここを参照すると良いです。
developer.mozilla.org


コリスさんでは、フロントエンドの新しい技術を海外記事翻訳などしてくれた上で分かりやすく掲載されていて技術インプットするのにとても良いサイトです。
coliss.com


ICS MEDIAさんでは、古い記事も随時更新して情報が古くならないようにしたり、アクセシビリティに考慮した実装を紹介したり、たくさんの役に立つ情報を発信されています。
ics.media