開発のスキル

Webサイトの画像容量や表示サイズ、読み込み方を点検し、形式ごとの圧縮や不要な付加情報の削除を進め、変更前後のファイルサイズを比較するスキル。

• 表示を遅くする画像を探したいとき
• 圧縮前後のファイル容量比較
• 画像の不要なメタデータ削除

ページの主要コンテンツが表示されるまでの時間を計測し、画像やサーバー応答、描画処理のボトルネックを特定して、根拠に基づく改善を支援するスキル。

• 主要コンテンツの表示遅延を調べたいとき
• メイン画像の読み込みを見直したいとき
• 計測結果から改善の優先順位を決めたいとき

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

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

Webページのナビゲーションを点検し、nav要素や識別ラベル、スキップリンクを使って、スクリーンリーダーで目的の領域へ移動しやすい構造に整えるスキル。

• メインとフッターの操作性を見直したいとき
• 複数のナビゲーションを区別したいとき
• 共通部品が出力するHTMLの点検

ページを開いて最初に見える画像の遅延読み込みを点検し、実測で表示の遅れを確認したうえで、属性の削除や読み込み優先度の見直しを案内するスキル。

• メイン画像の読み込み設定点検
• LCPに影響する画像の遅れを調べたいとき
• 最初に見える画像の読み込み属性の調整

JavaScriptライブラリの古いバージョンや既知の脆弱性、容量の重さを点検し、実測した問題を根拠に、安全な更新や軽量な代替への置き換えを検討するスキル。

• 依存ライブラリの脆弱性を調べたいとき
• 読み込みを遅くする原因を調べたいとき
• 軽量な代替ライブラリを検討したいとき

HTMLの言語指定を点検し、未設定・空欄・本文との不一致を見つけて修正します。多言語が混在する箇所も確認し、読み上げや翻訳に使われる言語情報を整えます。

• ページ全体の言語指定の確認
• 多言語コンテンツの言語切り替え指定
• 読み上げの発音に関わる設定の点検

モダンブラウザに不要な旧形式のJavaScriptや互換コードを調べ、実測で負荷を確かめながら、配信方法とビルド設定の見直しを支援するスキル。

• ページ読み込みの遅さを調べたいとき
• 不要な互換コードの点検
• モダンブラウザ向けビルド設定の見直し

JavaScriptのイベント処理やタイマー、不要になった通信などを点検し、画面を使い続けるとメモリ使用量が増える原因を調査・修正するスキル。

• 長時間利用でメモリが増える原因の調査
• 部品を破棄するときの後処理の確認
• 画面変更後の不要な通信を止めたいとき

TypeScriptの配列やオブジェクトの添字アクセスを点検し、設定の見直しと未定義値のチェック追加を通じて、実行時エラーにつながる見落としを減らすスキル。

• TypeScriptの安全設定の点検
• データ処理の配列アクセスのレビュー
• 予期しない未定義値エラーの調査

画面外の画像・動画・iframeなどの読み込みを必要になるまで遅らせ、初期表示の負荷を抑える実装を支援します。実測と配置を確認し、変更すべき箇所を絞ります。

• ページの初期表示が遅い原因の調査
• 初期画面より下の画像の遅延読み込み
• 画面外の動画や重い部品の読み込み延期

Webサイトの画像形式を点検し、WebP・AVIFへの変換や代替画像の設定を支援します。表示サイズや読み込み方も調べ、具体的な修正箇所を示します。

• JPEG・PNGの変換候補の洗い出し
• WebP・AVIFと代替画像の設定
• CSS背景画像の形式の見直し

API応答や保存データを読み込むJavaScriptのJSON処理を点検し、不正な入力への例外処理と、読み取り後のデータ構造の検証を追加するスキル。

• API応答のJSON処理を点検したいとき
• localStorageの壊れたデータへの対処
• プロパティ参照前のデータ構造の検証

Web画面をキーボードだけで操作できるか点検し、Tabの移動順や非表示要素への移動、操作から抜け出せない問題を確認します。該当要素と修正・検証方法を示します。

• Tabで全操作要素に届くか確認
• 見た目に合うフォーカス順への修正
• 非表示要素をTabの移動対象から除外

CSSの曖昧なクラス名や命名のばらつきを調べ、部品・要素・状態を表すBEM形式に整理するスキル。画面幅や操作状態ごとの実際の表示も確認します。

• CSSクラス名のばらつきの点検
• コンポーネントの命名をBEMに統一
• 補助クラスとJavaScript用クラスの区別

JavaScriptの手書きループを点検し、配列やオブジェクトの標準メソッドに置き換えて、データの変換・抽出・集計の意図が伝わるコードに整えるスキル。

• 手書きループを整理したいとき
• データの変換・抽出・集計の明確化
• オブジェクト変換や深いコピーの見直し

JavaScriptファイルの圧縮後の容量と読み込み負荷を調べ、コードの分割や未使用部分の除去、依存関係の見直しで表示や操作の遅れを改善するスキル。

• 圧縮後200KB超のJSを探したいとき
• ページ操作開始までの遅れを調べたいとき
• コード分割で容量を減らしたいとき

リンク先が単独でも伝わる文言かを点検し、曖昧な表現や読み上げ用の名前を改善します。キーボード操作やダウンロードリンクの案内も確認するスキルです。

• 曖昧なリンク文言を直したいとき
• 読み上げ時のリンクを点検したいとき
• ダウンロードリンクの案内確認

ページのHTMLを調べ、body内などに誤って置かれたメタタグを特定して、headへの移動やスクリプトの挿入先の修正を支援するスキル。

• CMSプラグイン変更後のタグ配置を確認
• JavaScriptによるbody内への挿入を調査
• robotsやOGなどの配置を点検

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

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

TypeScriptで型チェックをすり抜けるanyを洗い出し、unknownやジェネリクス、外部データの検証への置き換えと利用箇所の修正を支援するスキル。

• ESLintのany関連警告を直したいとき
• 外部APIデータの型安全性レビュー
• 呼び出し元へanyが広がる関数の点検

モーダルダイアログのキーボード操作と読み上げ対応を点検し、フォーカスの移動、Escapeでの終了、タイトルの関連付けの改善を支援するスキル。

• モーダルのキーボード操作の点検
• 開閉時のフォーカス移動を確認したいとき
• タイトルと読み上げ用ラベルの確認

データ取得や送信中の待ち時間に、処理状況が伝わる表示を点検・実装します。スピナーや仮の表示枠、読み上げ対応、読み込み完了時のレイアウトのずれまで確認します。

• データ取得中の待機表示を付けたいとき
• 操作の実行中に進捗を伝えたいとき
• 読み込み状態の読み上げ対応を確認

HTMLのリスト項目と親要素の関係を点検し、読み上げソフトに項目数や一覧の構造が伝わるよう、リストの入れ子やARIAの指定を修正するスキル。

• 部品に分かれたリスト構造の点検
• ナビゲーションの入れ子修正
• 独自リストの親ロール確認