【JavaScript】DOM操作を学ぼう: 「作りながら覚える」ブックマークレットを使ってテキストを保存する方法

JavaScript は、現代のWeb開発に欠かせない言語の1つです。

その中でも、DOM (Document Object Model)という概念は、Webページ上で要素を操作するための基礎となります。

しかし、DOM操作は初学者にとっては難しい部分もあり、実際のプロジェクトで扱うにはより深い知識が求められるのです。

そこで本記事では、ブックマークレット を使ったDOM操作の基本から、実践的なカスタマイズまでを解説します。

具体的には、選択したテキストをテキストファイルに保存する方法などを扱います。

サンプルコードを通じて、徐々にコードの難易度を上げていくため、初心者でも着実にスキルアップできるようになっています。

ぜひ、最後まで読んでDOM操作の重要性を理解し、自身のプロジェクトに活かしてみてください。

はじめに: なぜJavaScriptのDOM操作を学ぶ必要があるのか

Webページは、HTMLやCSSで構成されていますが、その要素に動的な機能を与えるためにJavaScriptが使われます。

JavaScriptは、Webページ上での要素の操作や動的なコンテンツの生成など、様々なことができるため、Web開発に欠かせない言語となっています。

JavaScriptでWebページを操作するために必要なのが、DOM（Document Object Model）の知識です。

DOMとは？何ができるの？

DOMとは、Webページの要素をJavaScriptで扱うための仕組みであり、Webページの各要素をオブジェクトとして扱うことができます。

DOM操作の理解は、JavaScriptでWebアプリケーションを開発する上で不可欠なスキルだといえるでしょう。

例えば、ユーザーの操作に応じて要素を追加・削除することができるため、Webページの動的な更新やビジュアル効果を追加することができます。

また、Ajax（Asynchronous JavaScript and XML）を使った非同期通信も、DOM操作を用いてWebページを動的に更新することができるため、現代のWeb開発には欠かせないスキルです。

さらに、DOM操作はブラウザの開発者ツールでも利用されています。

以上のように、JavaScriptのDOM操作はWeb開発に欠かせないスキルであり、JavaScriptの理解を深めるためにも、また開発者として必要なスキルを身につけるためにも、学ぶことが重要です。

次に、ブックマークレットを使ったDOM操作の基本から実践的なカスタマイズまでを紹介していきます。

ブックマークレットとは: その概要と使い方

ブックマークレットとは、ブラウザのブックマーク機能を利用して、Webページ上で特定の処理を行うためのJavaScriptコードのことです。

ブックマークレットは、JavaScriptの基礎的な知識があれば簡単に作成することができ、ブラウザのアドレスバーにドラッグ＆ドロップするだけで使用することができます。

ブックマークレットは、Webページ上で何らかの処理を行うために便利なツールです。

また、Web開発者の場合には、ブックマークレットを使って特定のWebページの構造を調査したり、CSSのスタイルを編集したりすることができます。

ブックマークレットを作成するには？

ブックマークレットを作成するには、

例えば、Webページ上で選択したテキストをアラート表示するブックマークレットは以下のようになります。

サンプルコード1: 選択した文字列をアラートで表示する

まずは、ブックマークレットを使ってWebページ上で選択したテキストを取得し、アラートで表示するサンプルコードを紹介します。

このサンプルコードは、DOM操作の基本的な内容を理解するためにも役立つでしょう。

以下の手順に従って、ブックマークレットを作成してください。

JavaScriptのコード：

javascript:(function() {
  let selectedText = window.getSelection().toString();
  alert(selectedText);
})();

これで、下記のように動作するブックマークレットが作成されました（名前：選択Toアラート）。

では早速、ページのテキストを選択して、作成したブックマークレットをクリックして、アラートが表示されることを確認してみましょう！

「選択したテキストがアラートで表示される」を選択して、ブックマークバーの「選択Toアラート」をクリックすると・・・

ブラウザの上の方にこのようなポップアップウィンドウが表示されましたか？

サンプルコードの解説

このサンプルコードでは、window.getSelection()を使って、Webページ上で選択されたテキストを取得し、変数selectedTextに代入しています。

そして、alert()関数を使って、selectedTextの値をアラートで表示しています。

DOM操作において、window.getSelection()はよく使われるメソッドの1つです。

このメソッドは、Webページ上で選択されたテキストを取得するために使われます。

また、このサンプルコードで使用されたalert()関数は、JavaScriptで簡単なデバッグを行う際によく使われます。

次の章では、選択したテキストをテキストファイルに保存する方法について解説します。

サンプルコード2: 選択したテキストをクリップボードにコピーする

次に、ブックマークレットを使ってWebページ上で選択したテキストをクリップボードにコピーするサンプルコードを紹介します。

このサンプルコードは、前章で紹介したサンプルコードをベースに、選択したテキストをクリップボードにコピーする機能を追加したものです。

以下の手順に従って、ブックマークレットを作成してください。

JavaScriptのコード：

javascript:(function() {
  let selectedText = window.getSelection().toString();
  let textArea = document.createElement("textarea");
  textArea.value = selectedText;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand("copy");
  document.body.removeChild(textArea);
  alert("クリップボードにコピーしました");
})();

これで、ブックマークレットが作成されました。

Webページ上でテキストを選択した状態で、ブックマークバーのブックマークをクリックすると、選択したテキストがクリップボードにコピーされます。

このサンプルコードでは、前章と同様にwindow.getSelection()を使って、Webページ上で選択されたテキストを取得しています。

そして、新しいtextarea要素を生成して、選択したテキストを挿入します。

select()メソッドを使って、textarea要素の中身を選択し、copyコマンドを使ってクリップボードにコピーします。最後に、生成したtextarea要素を削除します。

次に、これらのサンプルコードに含まれるDOM操作の基本的な内容を解説します。

コードの解説: DOM操作の基本知識

DOMとは、Webページの要素をJavaScriptで扱うための仕組みであり、Webページの各要素をオブジェクトとして扱うことができます。

ブックマークレットを使ったDOM操作では、Webページ上の要素をJavaScriptで操作することができます。

サンプルコード1の解説：window.getSelection()

まず、サンプルコード1で使用されているwindow.getSelection()について解説します。

このメソッドは、Webページ上で選択されたテキストを取得するために使われます。

このメソッドを使うには、Webページ上でテキストを選択しておく必要があります。

サンプルコード2の解説

サンプルコード2では、ブックマークレットを使ってWebページ上で選択したテキストをクリップボードにコピーするサンプルコードを紹介しました。

サンプルコードでは、以下のようなDOM操作が行われています。

カスタマイズ: テキストを指定したファイル名で保存する

以下は、選択したテキストとその情報を事前に指定したファイル名で保存するためのサンプルコードです。

javascript:(function() {
  let url = location.href;
  let currentTime = new Date().toLocaleString();
  let text = window.getSelection().toString();
  let data = url + '\n' + currentTime + '\n' + text + '\n';
  let file = new Blob([data], { type: 'text/plain' });
  let title = document.title.replace(/[/\\?%*:|"<>]/g, '-');
  let filePath = 'WEBメモ_' + currentTime + '_' + title + '.txt';
  let a = document.createElement('a');
  a.href = URL.createObjectURL(file);
  a.download = filePath;
  a.click();
})();

事前に指定したファイル名：

このサンプルコードでは、以下の手順でファイル保存するためのデータを生成しています。

以上のように、ブックマークレットを使って、Webページ上で選択したテキストとその情報を指定したファイル名で保存することができます。

ファイルの保存先は、ブラウザによって異なります。

ブックマークレットのデバッグ方法

ブックマークレットのデバッグ方法は、以下の手順で行うことができます。

上記の手順を実行することで、ブックマークレットのデバッグを行うことができます。

長くなりましたので、ページを分けることにしました。

次のページでは、サンプルコードとして、「キーワードをハイライト表示」するブックマークレットの解説や、ブックマークレットがうまく動作しないときの対処法を解説していきます。

ぜひ、続けてごらんください。