この記事で分かること
document.getSelection()の役割と仕組み- 選択中の文字列を取得する方法
- 選択されていない場合の挙動
- 検索・コピー・ハイライトなどの活用シーン
- 実用的なコード例
document.getSelection() は、ユーザーがマウスやキーボード操作で選択している文字列を取得するためのメソッドです。
コピー機能や検索機能、選択範囲を利用したインタラクションを作る際に役立ちます。
document.getSelection とは？
document.getSelection() は、現在ページ上で選択されているテキストを返します。
document.getSelection();
返される値は 選択された文字列 です。
何も選択されていない場合は空の文字列になります。
このメソッドは、ユーザーの操作に応じて動作する機能を作る際に便利です。
使用例
例：選択された文字列を変数に代入する
st = document.getSelection();
→ 選択中の文字列が変数 st に代入されます。
例：選択文字列をアラート表示する
let text = document.getSelection();
alert("選択された文字列：" + text);
→ 選択した部分をそのままダイアログで確認できます。
どんな場面で使える？
- 選択した文字列を検索する機能
- 選択範囲をコピー・保存する機能
- 選択した部分に対してコメントを付ける機能
- 選択範囲をハイライトする UI
シンプルなメソッドですが、工夫次第でさまざまなインタラクションに応用できます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
document.getSelection() は DOM 操作の基礎として扱われることが多く、
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
- JavaScript の基本文法を視覚的に理解できる
- DOM や
documentの基本操作を学べる - サンプルを動かしながら学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScript の基礎を体系的に学びたい方に向いている入門書です。
- JavaScript の動作原理を体系的に理解できる
- 実務で使えるレベルの基礎力を身につけられる
- 現代的な JavaScript の書き方が理解できる
動画で理解を深めたい方へ（Udemy講座）
document.getSelection() は、DOM 操作・選択範囲 API の基礎として
実用的な UI 実装（検索・ハイライト・コピー機能など）に直結します。
Udemy では、こうしたブラウザ API を体系的に学べる講座が多数あります。
【初心者向け】JavaScript 完全入門コース
JavaScript の基本文法から DOM 操作まで丁寧に学べる人気講座です。
- 選択範囲 API・DOM の基礎が理解できる
document系メソッドの扱いが分かる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
【総合学習】超JavaScript 完全ガイド 2026
JavaScript の基礎〜応用を幅広く学べる総合講座です。
- DOM・イベント・ブラウザ API を体系的に理解
- 選択範囲の扱い・テキスト操作の実践例が豊富
- 実務で必要な知識をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- DOM の仕組みが曖昧なまま進んでしまう
- 選択範囲の扱いでつまずきやすい
- コードの意図が理解できない
- 学習の順番に自信が持てない
document.getSelection を理解すると、検索機能やハイライト UI など、
実用的なインタラクションを作る基礎が身につきます。
つまずきやすい部分を質問できる環境があると理解が深まります。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
document.getSelection に関するよくある質問（FAQ）
何も選択されていない場合はどうなる？
空の文字列が返されます。
画像や要素を選択した場合は取得できる？
取得できるのはテキストのみで、画像や要素は文字列として返されません。
選択範囲をハイライトするにはどうすればいい？
getSelection で取得した文字列をもとに、DOM 操作で該当部分をマークアップする方法が一般的です。
スマホでも使える？
はい。スマホのテキスト選択にも対応しています。
まとめ
document.getSelection()は選択中の文字列を取得するメソッド- 選択されていない場合は空文字列を返す
- 検索・コピー・ハイライトなどの機能に応用できる
- シンプルだが実用性の高いメソッド
