【2026年9月最新】querySelector完全ガイド｜HTML要素取得の使い方とClaude Code活用法
aikanri-admin
「querySelectorって何をするものなの？」「Claude Codeが書いてくれたコードにquerySelectorという単語が出てきたけど、これが何をしているのか知りたい」——この記事は、そんな非エンジニアの経営者・管理職の方に向けて書いています。
querySelector（クエリセレクタ）は、JavaScriptでWebページ内の特定の部品（ボタンや見出しなど）を指定して操作するための基本機能です。Claude CodeにLPやWebサイトの修正を依頼すると、生成されるコードの中に必ずと言っていいほど登場します。
この記事では、querySelectorの基本的な仕組みを非エンジニアにも分かる言葉で解説しつつ、実際のコード修正作業はClaude Codeにどう任せればいいか、弊社（株式会社GENAI）の実運用例を交えて紹介します。自分でコードを書く必要はありませんが、AIが何をしているかを理解しておくと、指示の出し方や成果物の確認が驚くほどスムーズになります。
代表菅澤
AI鬼管理山崎
この記事を最後まで読むと、次の6つが明確になります。
01 WHAT IS QUERYSELECTOR querySelector()とは？非エンジニアが知っておくべき理由 Webページの部品を「探して操作する」ための基本機能
querySelectorは、JavaScriptに標準で備わっている機能で、Webページの中から特定の要素（ボタン・見出し・画像など）を1つ探し出すために使われます。「document.querySelector」という書き方で呼び出すのが基本形です。
📚 用語解説
JavaScript：Webページに動きや機能を追加するためのプログラミング言語。ボタンを押したら何かが起きる、フォームの入力内容をチェックする、といった「動的な処理」はほぼ全てJavaScriptで実現されています。Claude CodeがLPやサイトを修正する際、裏側で書いているコードの多くもJavaScriptです。
1-1. なぜ非エンジニアも知っておくべきなのか
Claude CodeにLPの修正やフォームの動作追加を依頼すると、生成されるコードの中にquerySelectorという単語が頻繁に出てきます。コードの詳細を読めなくても、「これはページの中の何かを探して操作している」という理解があるだけで、AIの作業内容を大まかに把握できるようになります。
この記事の目的は、あなた自身にJavaScriptを書けるようになってもらうことではありません。Claude Codeが生成したコードを見たときに「何が起きているか」をイメージできるようになること、そして適切な指示を出せるようになることが目的です。
1-2. 「探す・つかむ・操作する」の3ステップで理解する
querySelectorの動きは、次の3ステップに分解すると理解しやすくなります。
探す条件を
指定する
（IDやClass）
該当する
部品を
1つ見つける
見つけた部品を
操作する
（色を変える等）
例えば「送信ボタンの色を赤に変えたい」という指示があった場合、Claude Codeはまず「送信ボタン」というHTML要素をquerySelectorで探し出し、見つけた要素に対して「色を赤にする」という操作を実行します。
02 BASIC USAGE querySelector()の基本的な使い方 ID・Classを指定して要素を取得する仕組み
querySelectorの基本的な書き方は次の通りです。実際にコードを書くのはClaude Codeですが、構造を知っておくと会話がスムーズになります。
| 書き方 | 意味 | 取得される要素 |
|---|---|---|
| document.querySelector('.sample') | クラス名が「sample」の要素を探す | 最初に見つかった1つだけ |
| document.querySelector('#test') | IDが「test」の要素を探す | IDは1ページに1つだけの前提なので確実に1つ |
| document.querySelector('button') | button要素をタグ名で探す | ページ内で最初に見つかったbutton |
📚 用語解説
ID・Class（クラス）：HTML要素に付ける「名札」のようなもの。IDはページ内で1つの要素にだけ使う一意な名札、Classは複数の要素に同じ名前を付けて「グループ」として扱うための名札です。querySelectorでは、この名札を頼りに要素を探します。
2-1. querySelectorは「最初に見つかった1つ」だけを返す
重要な特徴として、querySelectorは条件に合う要素が複数あっても、最初に見つかった1つだけを返します。ページ内に同じクラス名のボタンが5個あっても、querySelectorが返すのは先頭の1個だけです。
指定した条件に合う要素がページ内に存在しない場合、querySelectorは「null（何もない）」を返します。この状態で操作しようとするとエラーになるため、Claude Codeが生成するコードでは「要素が存在するか確認してから操作する」という安全策が組み込まれているのが一般的です。
2-2. どんな条件で探せるのか
querySelectorの強みは、CSS（デザイン指定の言語）と同じ書き方で条件を指定できる点です。IDやクラスだけでなく、「特定の親要素の中にあるボタンだけ」のような複雑な条件も1行で指定できます。
AI鬼管理山崎
2-3. IDとClassはどう使い分けられているのか
実際のWebページのコードを見ると、なぜある部品にはID、別の部品にはClassが付いているのか疑問に思うかもしれません。基本的な使い分けの考え方はシンプルです。「ページ内で1つしかない、特別な部品」にはIDを、「同じデザイン・同じ役割の部品が複数ある」場合にはClassを使います。
例えば、LPの一番上にある「メインの見出し」はページ内に1つしかないためIDが付けられることが多く、逆に「料金プランのカード」のように同じ形をした部品が3つ並んでいる場合はClassで共通の名前が付けられます。この違いを知っておくと、Claude Codeに「あのカードだけ」なのか「カード全部」なのかを伝える際の精度が上がります。
📚 用語解説
CSS（シーエスエス）：Webページの見た目（色・大きさ・配置など）を指定するための言語。HTMLが「文章の骨組み」、CSSが「デザインの化粧」、JavaScriptが「動きの仕掛け」という役割分担になっています。querySelectorの条件指定は、このCSSと同じ書き方を採用しているため、覚える手間が最小限で済むよう設計されています。
03 MULTIPLE ELEMENTS querySelectorAll()で複数要素を取得する方法 「1つだけ」と「まとめて全部」の違いを理解する
querySelectorが「最初の1つだけ」を取得するのに対し、querySelectorAllは条件に合う要素を全部まとめて取得します。例えば「ページ内の全てのカードのデザインを一括で変更したい」という場合に使われます。
📚 用語解説
NodeList（ノードリスト）：querySelectorAllが返すデータの形式。配列（リスト）のように複数の要素を並べて保持しますが、厳密には配列そのものではなく「NodeList」という似た形式です。forEach（1つずつ処理を繰り返す機能）は使えますが、配列専用の一部の機能（map等）を使うには変換が必要になる場合があります。
| 機能 | 取得件数 | 主な用途 |
|---|---|---|
| querySelector() | 最初に見つかった1件のみ | 「送信ボタン」など、ページに1つしかない部品を操作したい時 |
| querySelectorAll() | 条件に合う全件 | 「全てのカード」など、複数の同種部品を一括操作したい時 |
3-1. 複数要素をまとめて操作する考え方
querySelectorAllで取得した複数の要素は、1つずつ順番に処理していく必要があります。この「1つずつ処理する」という考え方を実現する機能がforEach（フォーイーチ）です。
📚 用語解説
forEach（フォーイーチ）：複数のデータを1つずつ取り出して、同じ処理を繰り返し実行する機能。「リストの中の全員に同じ案内を送る」というイメージに近く、querySelectorAllで取得した複数の要素すべてに同じ操作（色を変える、テキストを書き換える等）を一括適用する際に使われます。
LPの中にある複数のボタンやカードのデザインを一括で変更したい場合、Claude Codeに「全てのカードの余白を揃えて」のように依頼すると、内部的にはquerySelectorAllとforEachを組み合わせて全要素に同じ処理を適用するコードが生成されます。
代表菅澤
3-2. 「一部だけ変えたい」場合の考え方
querySelectorAllで全件を取得したあと、「その中の3番目だけ変えたい」というように、一部だけ条件を絞りたい場面もあります。この場合、取得した複数の要素に番号（0番目、1番目、2番目…）を振って、特定の番号だけを選んで操作する、という考え方が使われます。
「上から3番目のカード」という指示は、後でカードの並び順が変わると意図しない部品を指してしまうリスクがあります。可能であれば「価格が一番高いプランのカード」のように、見た目や内容の特徴で対象を伝えるほうが、レイアウト変更後も安定して動作するコードになりやすいです。
弊社では、複数の同種パーツを扱う際にこの点を意識し、「順番」ではなく「役割・内容」で対象を指定するようClaude Codeに依頼しています。これにより、後日ページの並び順を変更しても、意図しない部品が変更されてしまう事故を防げています。
04 COMMON ERRORS よくあるエラーと対処法 「要素が見つからない」問題の正体
querySelector関連のトラブルで最も多いのが、「要素が見つからずエラーになる」というパターンです。ここでは、非エンジニアでも理解できるレベルで原因を整理します。
4-1. 「null」に対して操作しようとして起きるエラー
querySelectorが要素を見つけられなかった場合、結果は「null（何もない）」になります。この状態のまま「色を変える」などの操作を実行しようとすると、「存在しないものを操作しようとしている」というエラーが発生します。
よくある原因は、ページの読み込みが完了する前にJavaScriptが実行され、まだHTML要素が存在していない、というタイミングのズレです。Claude Codeが生成するコードでは、通常「ページの読み込み完了を待つ」処理が組み込まれているため、この種のエラーは比較的少なくなっています。
4-2. スペルミス・クラス名の指定ミス
もう一つのよくある原因は、指定したクラス名やID名が、実際のHTML側の名前と一致していないケースです。1文字でも違えば要素は見つかりません。
4-3. Claude Codeに修正を依頼する時の伝え方
エラーが起きた場合も、非エンジニアが自分でコードを直す必要はありません。Claude Codeに「このエラーメッセージが出た」と伝えるだけで、原因を特定して修正してもらえます。
エラー画面を
スクショ or
コピー
Claude Codeに
そのまま貼って
相談
原因の説明と
修正案を
受け取る
修正を承認して
反映
AI鬼管理山崎
4-4. 「動いていたのに突然動かなくなった」ケース
もう一つ非エンジニアが遭遇しやすいのが、「先週まで正常に動いていた機能が、今週になって突然動かなくなった」というケースです。この場合、原因の多くは他の修正作業の副作用です。
例えば、あるボタンのクラス名を別の修正のために変更した結果、そのクラス名を条件にしていた別のquerySelectorが要素を見つけられなくなる、という連鎖的な影響が起きることがあります。1つの部品の名前を変えると、それを参照している別の場所にも影響が及ぶ、という関係性を知っておくと、Claude Codeへの状況説明がスムーズになります。
「動かない」だけでなく「いつまでは動いていたか」を伝えるだけで、Claude Codeが調査すべき範囲を大きく絞り込めます。直前に依頼した修正内容と紐づけて考えることで、副作用による不具合の発見が早まります。
05 GENAI CASE STUDY 【独自データ】GENAI社内のフロントエンド修正実務 Claude CodeがどうquerySelectorを使ってLPを修正しているか
ここでは、弊社（株式会社GENAI）が実際にLP・Webサイトの修正業務でClaude Codeをどう活用しているかを紹介します。エンジニアがいない体制でも、フロントエンドの修正が回っている実例です。
5-1. 弊社の修正依頼フロー
| 項目 | 内容 |
|---|---|
| 依頼方法 | 日本語での自然な指示（「このボタンの色を変えて」等） |
| 実際のコード生成 | Claude Codeが自動でquerySelector等を含むJavaScriptを生成 |
| 担当者の役割 | 見た目の確認と承認のみ。コードは読まない |
| 修正1件あたりの時間 | 従来1〜2時間 → 現在10〜15分程度 |
弊社では、LPのボタンの色やテキストの微調整、フォームの入力チェックの追加など、日常的な細かい修正のほぼ全てをClaude Codeに依頼しています。人間側は「見た目が意図通りか」を確認するだけで、コードの内容を読む必要はありません。
5-2. 「指示の出し方」で結果が変わる
弊社の運用で分かってきたのは、具体的な指示ほど一発で正確な修正が返ってくるという点です。「なんとなく良くして」ではなく、「このボタンだけ」「この条件の時だけ」と対象を絞ることで、querySelectorの指定条件も正確になり、意図しない箇所が変わるリスクが下がります。
| 指示の例 | 結果 |
|---|---|
| 「ボタンの色を変えて」 | どのボタンか分からず、確認のやり取りが発生する場合がある |
| 「トップページの申込ボタンだけ、色を赤に変えて」 | 一発で正確に反映されやすい |
| 「全部のカードの余白を揃えて」 | querySelectorAllで一括対応され、効率的 |
「どのページの」「どの部品の」「何を」変えたいのかを具体的に伝えることが、querySelectorの指定条件を正確にする一番の近道です。曖昧な指示は、AIが誤った要素を探し出すリスクを高めます。
5-3. 修正フローの全体像
弊社でLPの細かい修正を依頼する際の流れを図解すると、以下のようになります。
対象を絞って
日本語で指示
Claude Codeが
querySelectorで
要素を特定
GitHubに変更を
記録
見た目を確認して
本番反映
代表菅澤
5-4. 修正前と修正後をどう比較して確認しているか
弊社では、Claude Codeに修正を依頼した後、必ず修正前・修正後のスクリーンショットを並べて比較するという確認手順を挟んでいます。コードの差分を読むのではなく、見た目の変化を目視で確認する方式です。
| 確認方法 | 必要な知識 | 弊社での採用状況 |
|---|---|---|
| コードの差分（diff）を読む | JavaScript・HTMLの知識が必要 | 採用していない |
| 修正前後のスクリーンショット比較 | 不要。見た目の違いが分かればOK | 標準の確認方法として採用 |
| 実際にボタンを押すなどの動作確認 | 不要。意図した動きになっているか確認するだけ | 重要な変更時に併用 |
この方式のメリットは、技術的な知識がなくても確認の質が落ちない点です。見た目と動作が意図通りであれば、裏側のコードがどう書かれているかは重要ではありません。逆に、見た目に変化がないのにコードだけ複雑に変更されている場合は、Claude Codeに「他に何が変わったのか」を確認する、という判断基準で運用しています。
06 OVERCOMING BARRIERS 【独自】非エンジニアが越える3つの壁 コードを読めなくても、AIに正確な指示を出すための考え方
「querySelectorの理屈は分かったけど、実際に自分がAIに指示を出すとなると何を言えばいいのか分からない」——ここでは、非エンジニアがAIコーディングを使いこなすまでに越える3つの壁を紹介します。
6-1. 【壁1】「どこ」を指せばいいか分からない → スクリーンショットで指す
最初の壁は、修正したい部分を言葉だけで正確に伝えるのが難しいという点です。この壁を越える最も簡単な方法は、該当箇所のスクリーンショットを撮って、丸で囲んで送ることです。
Claude Codeは画像を読み込んで内容を理解できます。「ここ」と丸で囲んだスクリーンショットを送るだけで、言葉で説明するより圧倒的に正確に対象を特定できます。言葉での説明に自信がない時は、まず画像を用意しましょう。
6-2. 【壁2】直したはずが直っていない → キャッシュを疑う
2つ目の壁は、「修正してもらったはずなのに画面が変わっていない」という現象です。多くの場合、原因はコードの間違いではなく、ブラウザに古い表示が残っている（キャッシュ）ことです。
📚 用語解説
キャッシュ：ブラウザやサーバーが、表示速度を上げるために一時的に保存している古いデータ。コードを修正しても、キャッシュが残っていると古い見た目のままになることがあります。「更新ボタンを長押しして強制リロード」や「別のブラウザで確認」で解決することが多いです。
6-3. 【壁3】専門用語で説明されて分からない → 「一言で言うと？」と聞く
3つ目の壁は、AIからの説明に専門用語が混じって理解できない、という状況です。この場合の対処はシンプルで、「一言で言うと何が起きたの？」と聞き返すことです。
説明を受ける
理解できない
用語が出る
と聞き返す
噛み砕いた説明を
求める
再説明される
比喩や具体例で
理解
次の指示を出す
誤解を防ぐ
AI鬼管理山崎
07 HOW TO INSTRUCT Claude Codeに任せる場合の指示の出し方 そのまま使えるプロンプト例
最後に、querySelectorが関わるような細かいコード修正を、Claude Codeにそのまま依頼できる指示文のパターンを紹介します。
| やりたいこと | そのまま使える指示文の例 |
|---|---|
| 特定のボタンの見た目を変える | 「トップページの『無料相談』ボタンだけ、背景色を赤に変えて」 |
| 複数の要素を一括で揃える | 「このページの全てのカードの余白と角の丸みを揃えて」 |
| クリック時の動作を追加する | 「このボタンを押したら、下の入力フォームまで自動でスクロールするようにして」 |
| エラーの調査を依頼する | 「このエラーメッセージが出た（画面を貼付）。原因を調べて直して」 |
共通するポイントは、「対象（どこ）」「変更内容（何を）」「条件（いつ・どんな時）」の3つを明確にすることです。この3点が揃っていれば、Claude Codeは高い精度でquerySelectorを含むコードを正確に生成してくれます。
代表菅澤
7-1. 一度に複数の変更を依頼する時の注意点
慣れてくると、「このボタンの色を変えて、このカードの余白も揃えて、フォームの必須項目にはマークもつけて」のように、複数の修正を一度に依頼したくなります。これは効率的な一方、1つの指示に対象が多すぎると、意図しない要素まで変更されるリスクが上がる点には注意が必要です。
複数の修正を一度に依頼する場合は、文章で続けて書くのではなく、箇条書きで1項目ずつ分けて伝えるのが安全です。箇条書きにすることで、Claude Code側も「どこまでが1つの指示か」を正確に区切って処理できます。
弊社でも、1回の依頼に3〜5個程度の修正項目を箇条書きで詰め込むスタイルが定着しています。これにより、1件ずつ小分けに依頼するより効率的に、かつ精度を落とさずに複数修正を完了できています。
08 CONCLUSION まとめ ── コードは読めなくても、仕組みが分かれば怖くない querySelectorの理解が、AI活用の指示力を上げる
この記事では、querySelector・querySelectorAllの基本的な仕組みから、よくあるエラーの原因、弊社GENAIの実運用例、非エンジニアが越えるべき壁、Claude Codeへの指示の出し方までを整理しました。最後にポイントを振り返ります。
最も重要なメッセージをお伝えします。querySelectorのようなコードの詳細を、あなた自身が覚える必要はありません。重要なのは、AIが「何をしているか」の大枠を理解し、正確な指示を出せるようになることです。
弊社がこれまで多くの経営者・管理職の方の導入支援をしてきた中で見えてきたのは、「AIに指示を出す力」は、プログラミングを学ぶ力とは全く別のスキルだという点です。コードの文法を覚える必要はなく、「対象・変更内容・条件」を明確に伝える言語化力さえあれば、Claude Codeとの協業は驚くほどスムーズに進みます。この記事で紹介したquerySelectorの仕組みは、その言語化力を支える「最低限の地図」として持っておくとよい知識です。
弊社では、非エンジニアの経営者・管理職の方でも、Claude Codeを使ったLP・Webサイトの修正業務が自走できる状態を作る支援をしています。この考え方に共感いただけた方は、ぜひ以下のAI鬼管理までお気軽にご相談ください。
代表菅澤
Claude CodeでのLP・サイト運用を、AI鬼管理が一緒に設計します
「コードは書けないけど、AIに直接LP修正を任せたい」という方は増えています。
弊社の実運用ノウハウをベースに、貴社に合った運用体制の設計をご相談いただけます。
AI鬼管理山崎
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
よくある質問
Q. querySelectorとquerySelectorAllの違いは何ですか？
A. querySelectorは条件に合う要素が複数あっても最初の1件だけを返します。querySelectorAllは条件に合う要素を全件まとめて取得します。1つの部品だけ操作したいか、複数の部品を一括操作したいかで使い分けます。
Q. querySelectorが使えないブラウザはありますか？
A. 現在主流のブラウザ（Chrome・Safari・Edge・Firefoxなど）では標準サポートされており、基本的な使用で問題になることはほとんどありません。
Q. 自分でJavaScriptを勉強しなくても、Claude Codeに全部任せられますか？
A. はい、任せられます。この記事の目的も「自分で書けるようになる」ことではなく「AIが何をしているかを理解し、正確な指示を出せるようになる」ことです。コードの詳細はClaude Codeに任せて問題ありません。
Q. querySelectorAllで取得した要素は配列として扱えますか？
A. 厳密には配列ではなく「NodeList」という似た形式です。forEachでの繰り返し処理は可能ですが、配列専用の一部の機能を使うには変換が必要になる場合があります。この判断もClaude Codeに任せて問題ありません。
Q. 修正を依頼してもエラーが出た場合、自分で直せますか？
A. 自分でコードを直す必要はありません。エラーメッセージをそのままコピーしてClaude Codeに伝えるだけで、原因の特定と修正まで対応してもらえます。
Q. LPの修正をClaude Codeに任せる場合、何を確認すればいいですか？
A. 意図した見た目・動作になっているかを画面で確認するだけで十分です。コードの内容自体を読み込む必要はなく、「対象を絞った指示」を出し、結果を見た目で承認する運用で回せます。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理／AI社員AIKATAへのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
