開発のスキル

Webページのスクリプト読み込みを点検し、defer・async・type=moduleの使い分けと修正を支援します。ブラウザに届くHTMLまで確認します。

• ページ表示を遅らせるタグの点検
• スクリプトの読み込み方式を選びたいとき
• 共通部品が出力するHTMLのレビュー

ブラウザのタブやスマートフォンのホーム画面に使うサイトアイコンを点検し、端末に応じた形式・サイズの生成からHTMLやPWAの設定まで支援するスキル。

• タブやブックマーク用アイコンの準備
• モバイルのホーム画面用アイコン設定
• PWAのアイコン設定を確認したいとき

JavaScriptの読み込み・公開方法を点検し、CommonJSからimport/exportへの移行を支援します。ブラウザでの実行経路も確認し、修正後の検証方法を示します。

• require()をimportに変換したいとき
• module.exportsからの移行
• ブラウザでのモジュール読み込みの点検

HTMLに直接書かれたCSSや埋め込みスタイルを点検し、例外を見極めて外部ファイルへの整理を支援します。画面幅や操作状態ごとの表示も確認します。

• HTML内のスタイルを点検したいとき
• 埋め込みCSSを外部へ整理したいとき
• 初期表示用CSSや動的な値の例外判断

ファイル選択欄やドラッグ＆ドロップ領域を点検し、ラベル、形式・容量の案内、進捗やエラー通知を改善します。読み上げやキーボードで使えるか確認するスキルです。

• アップロード欄のラベルと説明の確認
• ドラッグ操作の代替手段の点検
• 進捗やエラーの読み上げ改善

Webページを構成するHTML要素の数や入れ子の深さを測定し、不要な囲み要素の削除や長い一覧の表示方式の見直しを通じて、描画負荷の軽減を支援するスキル。

• ページの描画や操作が遅い原因を調べたいとき
• HTML要素数と入れ子の深さを測りたいとき
• 不要な囲み要素を整理したいとき

画像と説明文のHTML構造を点検し、figureとfigcaptionで正しく関連付けます。代替テキストとの重複も確認し、読み上げ時に意味が伝わる形へ整えます。

• 説明文付き画像のHTMLを点検したいとき
• 画像説明と代替テキストの重複確認
• 読み上げ時の画像説明を改善したいとき

Flexboxの横並び・縦並びで起きる文字のはみ出しや幅の不揃いを確認し、余白や伸縮設定を修正します。画面幅や操作状態ごとの表示も点検します。

• 横並びの文字のはみ出しを直したいとき
• 項目を均等幅に揃えたいとき
• 項目間の余白をgapに統一したいとき

アラビア語など右から左へ読む言語や、文字方向が混在する投稿を点検し、HTMLの方向指定と表示・読み上げ順、画面配置の確認や修正を支援するスキル。

• アラビア語・ヘブライ語ページの点検
• 文字方向が混在する名前や投稿への対応
• ナビゲーションやアイコンの左右反転確認

Webサイトのダークモード対応を点検し、OS設定に合わせた配色や手動切り替えを整えます。固定色やコントラスト、画面幅・操作状態ごとの表示も確認します。

• OS設定に配色を合わせたいとき
• 暗い背景で崩れる固定色の点検
• 選択を保存するテーマ切り替えの追加

JavaScriptの非同期処理やReact画面で起きるエラーの扱いを点検し、例外の捕捉、原因を追うためのログ、画面側のエラー処理の追加を案内するスキル。

• 非同期処理のエラー対応を点検したいとき
• React画面のエラー処理の追加
• 原因調査に使うログの改善

画像の読み込みに失敗したときの表示を点検し、代替画像や意味のあるプレースホルダーの実装を支援します。エラーログや読み込み中の表示、修正の確認方法も扱います。

• リンク切れ画像の代替表示を整えたいとき
• 画像読み込み中の仮表示の見直し
• ログとDevToolsで画像エラーを調査

ページの初期表示を待たせるCSSの読み込みを点検し、必要なスタイルの埋め込みや後回しの読み込みを支援します。画面幅や操作状態ごとの表示も確認しながら修正を検討します。

• 初期表示を遅らせるCSSを調べたいとき
• 最初に必要なCSSと後回しのCSSの整理
• preloadやmediaによる読み込みの点検

独立した画面部品のCSSを点検し、レイアウト再計算や再描画の範囲を抑える設定を提案します。画面幅や操作状態ごとの表示も確認し、適用箇所を見極めます。

• 独立した部品が多いページの見直し
• 画面外の一覧項目の描画を省きたいとき
• 画面幅ごとの表示を確認したいとき

CSSに散らばる色・余白・文字サイズの指定を見つけ、共通のCSSカスタムプロパティへ整理します。テーマ変更や画面幅ごとの表示を確認しながら修正を提案します。

• 重複する色や余白の整理
• ブランド変更に向けたCSS整備
• ダークモード用の値の見直し

JavaScriptのvar宣言を行番号付きで洗い出し、再代入の有無に応じてconstやletへ置き換え、変数の有効範囲とブラウザでの動作も確認するスキル。

• var宣言を行番号付きで探したいとき
• varをconstやletへ置換したいとき
• 変数の有効範囲を見直したいとき

行と列を同時にそろえる画面レイアウトを見直し、CSS Gridへの置き換えや、画面幅・内容に応じて配置が変わるグリッドの設計を支援するスキル。

• 二次元のFlexboxやfloat配置の見直し
• 画面幅に応じたカード一覧の配置
• 入れ子の要素を親グリッドにそろえたいとき

ページの初期表示を遅らせるリソース取得の依存関係を計測し、重要なCSSの埋め込みや必須ファイルの先読みで、通信の待ちが連鎖する構造を見直すスキル。

• ページの初期表示が遅いとき
• リソース取得の依存関係の点検
• 重要CSSの埋め込みや先読みの検討

ブラウザーに届くHTMLの文字コード宣言を点検し、UTF-8の指定漏れや配置の問題を見つけ、日本語や特殊文字の文字化けを防ぐために修正するスキル。

• 日本語や特殊文字の文字化け調査
• 公開前の文字コード宣言の確認
• 共通テンプレートのHTML出力点検

本番配信するCSSの空白やコメントを削ってファイルを小さくするために、圧縮の適用状況やビルド設定を点検し、画面幅ごとの表示も確認するスキル。

• 本番CSSの圧縮状況の確認
• ビルド工程に圧縮を追加したいとき
• PostCSSの出力を見直したいとき

ページの初期表示に必要なCSSを抽出してHTMLに埋め込み、残りを非同期で読み込む構成へ整えます。画面幅や操作状態ごとの表示も確認するスキルです。

• 初期表示を遅らせるCSSの見直し
• 最初の画面に必要なCSSを抽出
• 後回しにできるCSSの非同期読み込み

画像や内容を切り替えるカルーセルを点検し、自動再生の停止、キーボード操作、読み上げ通知、動きを抑える設定への対応を確認・修正するスキル。

• 自動再生スライドの停止操作の点検
• キーボードだけでの操作確認
• スライド変更の読み上げ通知の確認

表示されない画像や失敗しやすい参照先を調べ、ファイルパスの修正と代替画像への切り替えを支援し、読み込みエラー時の表示まで確認するスキル。

• 商品画像が欠ける原因を調べたいとき
• ビルド後の画像パス確認
• 外部画像に代替表示を付けたいとき

CSSの上書き競合を点検し、`@layer`でスタイルの優先順を明示する構成へ整理して、複雑なセレクターや`!important`への依存を見直すスキル。

• CSSの上書き競合を調べたいとき
• デザインシステムのスタイル優先順を設計
• ユーティリティ中心のCSSから段階的に移行