HTMLに直接書かれたJavaScriptを点検し、外部ファイルとaddEventListenerへ整理して、保守性やキャッシュ利用の改善を支援します。
- HTML内のJavaScriptを分離したいとき
- onclickをaddEventListenerに変更
- キャッシュ利用と保守性の見直し
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
フォームの入力欄に合うHTMLのtype属性とautocomplete属性を点検・修正し、スマートフォンのキーボード表示やブラウザの自動入力を整えるスキル。
- 既存フォームの入力属性を点検したいとき
- スマホのメール・電話入力を整えたいとき
- ブラウザの自動入力を設定したいとき
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
多言語サイトの言語・地域別ページを検索エンジンに伝えるhreflangを点検・修正します。実際のHTMLとHTTP応答を確認し、相互参照や既定ページの設定漏れを探します。
- 言語・地域別ページの設定確認
- 言語版同士の相互参照の点検
- 既定ページの設定確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
検索に載せたい重要ページを対象に、noindexやHTTPヘッダー、robots.txt、CMSの設定を点検し、意図しない検索登録の妨げを見つけて修正するスキル。
- 重要ページがGoogle検索に出ない原因の調査
- 公開後にテスト環境の制限が残っていないかの確認
- CMSのページ・カテゴリ別登録設定の点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
本文を覆うポップアップやモーダルを点検し、モバイルでの閲覧、閉じる操作、キーボードのフォーカス管理を確認して、SEOとアクセシビリティの改善を支援するスキル。
- モバイルの広告ポップアップ点検
- モーダルをキーボードで閉じたいとき
- ダイアログ開閉時のフォーカス確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
本番配信するJavaScriptの軽量化状況を点検し、ビルド設定や未使用コードの除去を見直して、ファイル容量と読み込み時の負荷を減らすスキル。
- 本番JavaScriptの軽量化確認
- 配信ファイルを小さくしたいとき
- 未使用コードの除去
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
Webページの空の見出しや空白だけの見出しを探し、説明文の追加や不要なタグの削除を通じて、スクリーンリーダーでたどれる文書構造を整えるスキル。
- Webページの空見出しを探したいとき
- 装飾目的の見出しを使う部品の点検
- スクリーンリーダーの見出し移動確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
画像の読み込みに失敗したときの表示を点検し、代替画像や意味のあるプレースホルダーの実装を支援します。エラーログや読み込み中の表示、修正の確認方法も扱います。
- リンク切れ画像の代替表示を整えたいとき
- 画像読み込み中の仮表示の見直し
- ログとDevToolsで画像エラーを調査
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
Web画面の動きを重くするDOMの読み書きやイベント処理を調べ、処理順序や更新頻度を見直して、ブラウザ上で原因に即した修正を検証するスキル。
- アニメーションのもたつきを調べたいとき
- DOMの読み書きをまとめたいとき
- スクロールやタッチのイベント処理の確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
JavaScriptの読み込み・公開方法を点検し、CommonJSからimport/exportへの移行を支援します。ブラウザでの実行経路も確認し、修正後の検証方法を示します。
- require()をimportに変換したいとき
- module.exportsからの移行
- ブラウザでのモジュール読み込みの点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
HTMLに直接書かれたCSSや埋め込みスタイルを点検し、例外を見極めて外部ファイルへの整理を支援します。画面幅や操作状態ごとの表示も確認します。
- HTML内のスタイルを点検したいとき
- 埋め込みCSSを外部へ整理したいとき
- 初期表示用CSSや動的な値の例外判断
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
装飾用の画像やアイコンが、スクリーンリーダーで不要に読み上げられないかを点検します。空のaltやaria-hiddenを確認し、実際に問題がある要素の修正を支援します。
- 装飾画像の不要な読み上げの点検
- SVGやアイコンの読み上げ確認
- 共通の装飾コンポーネントの点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
リンクやボタン、入力欄のID重複を調べ、修正箇所と確認方法を示します。キーボード操作やスクリーンリーダーでの移動、フォーカスへの影響も点検します。
- フォームのID重複を確認したいとき
- 意図しないフォーカス移動の調査
- 共通の操作部品のレビュー
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
JavaScriptの非同期処理やReact画面で起きるエラーの扱いを点検し、例外の捕捉、原因を追うためのログ、画面側のエラー処理の追加を案内するスキル。
- 非同期処理のエラー対応を点検したいとき
- React画面のエラー処理の追加
- 原因調査に使うログの改善
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
スマートフォンでの文字の読みやすさをCSSから点検し、小さすぎる文字や固定サイズを見直すスキル。ブラウザの文字設定と200%拡大時の表示も確認します。
- モバイルの文字サイズ点検
- px指定を相対単位に直したいとき
- 200%拡大時のレイアウト確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
フロントエンドのチェック項目に合うnpmパッケージを調査し、利用数と更新時期の基準を満たす候補を選び、ルールファイルのメタデータに追記するスキル。
- チェック項目にnpmの参照を加えたいとき
- 利用数と公開時期で候補を絞りたいとき
- ルールの検出・修正・テスト用ツール探し
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
固定ヘッダーやバナーがキーボード操作中の選択先を隠していないか点検します。拡大表示やモバイル画面も確認し、余白やスクロールの修正を支援します。
- 固定ヘッダー周辺のキー操作確認
- バナーやチャット表示中の動作確認
- 拡大時やモバイル画面の重なり確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
HTMLの生の応答を確認し、先頭のHTML5文書型宣言の欠落や古い形式、宣言前の余分な文字を見つけて、標準モードで表示するための修正を支援します。
- 生のHTML応答の文書型宣言を確認
- 古いHTML4やXHTMLの宣言を置換
- 文書型宣言前の余分な文字を除去
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
独自のHTML要素やWeb Componentsを点検し、読み上げ用の役割・名前、キーボード操作、フォーカス管理、フォーム連携の不足と修正案を整理するスキル。
- 独自部品の読み上げ対応を確認したいとき
- メニューのキーボード操作の点検
- 独自入力欄のフォーム連携
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ページの初期表示を待たせるCSSの読み込みを点検し、必要なスタイルの埋め込みや後回しの読み込みを支援します。画面幅や操作状態ごとの表示も確認しながら修正を検討します。
- 初期表示を遅らせるCSSを調べたいとき
- 最初に必要なCSSと後回しのCSSの整理
- preloadやmediaによる読み込みの点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
本番公開するJavaScriptに残ったconsole出力を点検し、削除や環境別の無効化、ログサービスへの置き換えを支援します。ブラウザでの実行経路と修正後の確認方法も扱います。
- 公開前のデバッグログ点検
- 開発用と本番用のログを分けたいとき
- ビルド時のconsole出力除去
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
Webページを紙に印刷したときの読みやすさを点検し、印刷用CSSを整えます。ナビや広告の非表示、文字サイズ、改ページ、外部リンクのURL表示を確認します。
- Webページを紙で読みやすくしたいとき
- 印刷時にナビや広告を隠したいとき
- 印刷の文字・改ページ・URL表示の調整
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
HTMLのhead内でCSSとJavaScriptの読み込み順を点検し、画面幅や操作状態ごとの表示も確かめながら、表示の遅れや装飾のちらつきへの修正案を示すスキル。
- 装飾のない画面が一瞬見える原因の調査
- head内のCSSとJSの順序確認
- スクリプト遅延と重要なCSSの点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
独立した画面部品のCSSを点検し、レイアウト再計算や再描画の範囲を抑える設定を提案します。画面幅や操作状態ごとの表示も確認し、適用箇所を見極めます。
- 独立した部品が多いページの見直し
- 画面外の一覧項目の描画を省きたいとき
- 画面幅ごとの表示を確認したいとき
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新