開発のスキル

JavaScriptによるページ転送を調べ、読み込みの遅れを実測で確認します。問題のある箇所を示し、サーバー側の301・302転送への変更を支援します。

• ページ転送による遅延を調べたいとき
• window.locationの転送処理のレビュー
• サーバー側への転送切り替えの検討

ページの主要領域を示すHTML要素とラベルを点検し、スクリーンリーダーで本文やナビゲーションへ移動しやすい構造への改善を支援するスキル。

• 読み上げ時のページ内移動の点検
• 汎用コンテナを意味のあるHTMLへ改善
• 複数のナビゲーションのラベル確認

HTMLに直接書かれたJavaScriptを点検し、外部ファイルとaddEventListenerへ整理して、保守性やキャッシュ利用の改善を支援します。

• HTML内のJavaScriptを分離したいとき
• onclickをaddEventListenerに変更
• キャッシュ利用と保守性の見直し

Front-End Checklistのルール文書を採点基準に沿って点検し、曖昧なAI向け指示や不足項目を、具体的な手順とコード例で補うスキル。

• 未完成のチェックリストルールの拡充
• AI向け確認・修正指示の具体化
• PR前のルール構造と品質の確認

JavaScriptのオブジェクトや配列を直接書き換える箇所を探し、コピーを作って更新する形に直すスキル。共有状態の変更を追いやすいコードへ見直します。

• 共有オブジェクトの直接変更の検出
• pushやspliceによる更新の見直し
• クライアント側の状態更新のレビュー

Webサイトの画像配信を点検し、CDNによる形式変換やサイズ調整の設定を支援します。画像容量、表示サイズ、読み込み方法と初期表示への影響を確認します。

• 画像のCDN配信を確認したいとき
• 画像のサイズ調整と形式変換の自動化
• 画像読み込みと初期表示への影響の確認

Webページの画像形式・容量・表示サイズ・読み込み方法を点検し、修正を支援します。画面幅に応じた画像の出し分けや、読み込み時のレイアウトずれも扱います。

• 表示が遅いページの画像容量・形式点検
• モバイルとPCで画像サイズを出し分け
• 画像読み込み時の表示ずれを防ぎたいとき

Webページの見出しを点検し、階層の飛びや内容に合わない見出しを洗い出します。画面読み上げでページ構成をたどりやすいよう、HTMLの構造を整えます。

• ページの見出し階層を点検したいとき
• 画面読み上げでの移動しやすさ改善
• デザインシステムの見出し確認

ページの読み込み時に発生するHTTPリクエストを数え、実測で遅延の原因を確認しながら、ファイル統合や重要な資源の埋め込みなどの削減案を示すスキル。

• ページの初期表示が遅い原因の調査
• 画像やCSSなどの不要な通信の確認
• ファイル統合やアイコン集約の検討

HTMLで読み込みの遅い重要リソースを見つけ、フォントや画像の先読み、外部ドメインへの事前接続を見直すスキル。ブラウザに届くマークアップまで確認します。

• 重要なフォントや画像の先読み確認
• 外部ドメインへの事前接続の確認
• 出力されたHTMLのヒント監査

同じ文言なのに異なるページへ移動するリンクを見つけ、リンク先の統一や文言の修正を支援し、スクリーンリーダーでも行き先を判断しやすくするスキル。

• 同じリンク文言の行き先を点検したいとき
• 読み上げ時のリンク文言の改善
• 共通コンポーネントのリンク確認

本番配信するJavaScriptの軽量化状況を点検し、ビルド設定や未使用コードの除去を見直して、ファイル容量と読み込み時の負荷を減らすスキル。

• 本番JavaScriptの軽量化確認
• 配信ファイルを小さくしたいとき
• 未使用コードの除去

Google Tag Managerがページの表示速度に与える影響を実測し、不要なタグやトリガー、読み込み方法を点検して改善案を示すスキル。

• GTM導入ページの遅さを調べたいとき
• 不要なタグやトリガーの見直し
• 非同期読み込みの確認

子要素の状態や入力内容に応じて親要素の見た目を変える処理を見直し、JavaScriptのクラス切り替えをCSSの :has() に置き換える支援をします。

• クラス切り替え処理をCSSに移したいとき
• 入力状態に応じたフォームの装飾
• 子要素の有無に応じた親要素の装飾

フォームの入力欄に合うHTMLのtype属性とautocomplete属性を点検・修正し、スマートフォンのキーボード表示やブラウザの自動入力を整えるスキル。

• 既存フォームの入力属性を点検したいとき
• スマホのメール・電話入力を整えたいとき
• ブラウザの自動入力を設定したいとき

初回表示を重くする地図やエディターなどの任意機能を見つけ、クリックやフォーカス後に必要なコードを読み込む構成へ変更し、読み込み中の表示も整えます。

• 地図をパネル表示時に読み込みたいとき
• エディターを操作時に読み込みたいとき
• 初回表示を遅くするチャットの点検

フォームの入力エラーや必須項目が支援技術にも伝わるかを点検し、説明文と入力欄の関連付け、エラー状態、選択肢のグループ化を改善するスキル。

• 読み上げでも伝わる入力エラーにしたいとき
• 必須項目と選択肢グループの点検
• Reactフォームの入力検証レビュー

HTTPSサイトに残るHTTPのリンクや画像・スクリプトのURLを調べ、内部・外部・リソース別に整理し、リンク先の対応状況を確かめて修正するスキル。

• HTTPS移行時のリンク確認
• 直接書かれたHTTPのURLを探したいとき
• 画像やスクリプトの参照先確認

Webページ内のiframeやframeに内容が伝わるタイトルがあるか点検します。空欄や説明不足を見つけ、スクリーンリーダーで埋め込み内容を識別しやすくする修正を支援します。

• 埋め込み広告やSNSのタイトル確認
• iframeのtitle欠落や空欄を調べたいとき
• スクリーンリーダーでのフレーム識別確認

画像を使った入力ボタンのHTMLを点検し、操作の目的を伝える代替テキストの不足を見つけます。検索や送信などの動作が読み上げでも分かるよう、alt属性の修正を支援します。

• 画像入力ボタンの代替テキスト点検
• 検索・送信ボタンの説明を整えたいとき
• 共通の画像ボタン部品のレビュー

長いページやダッシュボードで、画面外の重い部品を表示位置に近づいてから読み込むよう見直し、初期表示の負担とスクロール時の待ち時間を調整するスキル。

• ダッシュボード下部のグラフを遅延読み込み
• 長いランディングページの読み込み点検
• 埋め込みや関連商品を表示前に読み込み

サイト内の画像容量を用途別の目安で点検し、重い画像と削減目標を一覧化します。圧縮・形式変更・端末別の配信を見直し、容量と表示寸法の問題を切り分けます。

• 容量超過の画像と削減目標の一覧化
• CMSに登録された画像の点検
• ヒーロー画像やサムネイルの軽量化

Webページの見出し階層を点検し、見出しレベルの飛びや構造の不整合を修正して、スクリーンリーダーで内容をたどりやすくするためのスキル。

• ページの見出し順を点検したいとき
• 共通コンポーネントの見出し構造の確認
• 読み上げの見出し一覧を整えたいとき

狭い画面やブラウザ拡大時に生じる横スクロールを、CSSの幅指定や折り返し設定から点検し、本文や画像が画面内に収まる修正を支援するスキル。

• スマホ表示の横スクロールを直したいとき
• 400%拡大時の表示を確認したいとき
• 長いURLや画像のはみ出し点検