https://zenn.dev/angelecho/articles/fe885638b7753d

はじめに

本業がSIerの身分からフロントエンドに足を踏みいれてしばらくが立ちました。自分の忘備録も兼ねて、私がフロントエンド開発で気をつけていることを技術要素ごとにまとめてみました。

HTML

• 用途に応じた適切なタグを利用する。SEO対策やアクセシビリティ向上の効果があり、開発者にとってもHTMLの構造を把握しやすくなる。
• aタグやimgタグのalt属性やrole属性、label属性などを適切に設定することでアクセシビリティの向上を図る。

CSS

• 余計なプロパティは書かないこと。画面の表示に影響がなくとも、後から追加した要素に予期せぬ悪影響を与えるリスクある。また、後でcssを見返したとき理解に苦労する。(普通はプロパティ１つ１つにコメントは入れないと思うのでなおさら)
• 複数のプロパティを記述する順番を統一する。 (Vscodeの拡張機能でできる）
• cssフレームワークを利用する場合、最終的にどのようなcssに変換されているのか理解する。プロパティの衝突で期待通りの表示にならない時、頼りになるのはブラウザのデベロッパーツールとcssの知識になる

現在、Reactと共に使用するCSSの選択肢が多く選定が難しい状況にある。個人的にはTailwindcssとCSS Moduleの組み合わせが好み。

• Tailwindcssはクラス名とcssがほぼ１対１で紐づくので、設定されているcssのプロパティを把握しやすい。いつでも素のcssにスイッチできる。
• CSS Moduleのメリットとして以下が挙げられる。ただし、将来deprecatedになる可能性が示唆されていることが心配。
  • ファイル単位がcssのスコープとなるため管理がしやすく、クラス名も長くなりにくい。
  • コンポーネントの実装とスタイル定義をファイルで分離できるため可読性や保守性の観点からも良い。
  • パフォーマンスの面ではCSS in JSより良いとされている。

参考

Javascript

Javascriptの歴史は一度読んでおくと良い。React、Webpack、Babel、Redux,Typescriptなど、現在のフロントエンド開発の前線で活躍している技術の理解を深めることができる。その技術がどのような問題を解決しようとしてるのかを理解することは大切。

ReactやNext.jsなどのフレームワークやTypescriptを利用する場合でも、最終的にはJavascriptに変換されて動作するため、Javascriptの理解は必須と考える。

• 変数は可能な限りconstを使用し、変数のスコープを縮める。
• 処理に使用する一時的な変数は使い回さない。