前回はブックマークレットの使い方を説明しました。でも、「便利そうだけど呪文みたいでよくわからない。危なくないの？」と思うかもしれません。そこで ChatGPT の出番です。前回使ったコードを解説してもらいましょう。ChatGPT に次のプロンプトを入力します。
次のブックマークレットの動作について段階を追って説明してください。（コードを貼り付け）
するとこれだけで ChatGPT は次のような解説を出力しました。
このブックマークレットは、選択したテキストまたは手入力したテキストを使ってAmazonの検索ページを開くツールです。以下のように段階を追って動作を説明します。
コードの分解と動作説明
(function(){ let t = window.getSelection().toString() || prompt("検索するテキストを入力してください:"); t ? window.open(`https://www.amazon.co.jp/s?k=${encodeURIComponent(t)}`, '_blank') : alert("テキストが選択されていません。"); })();1. 無名関数の実行
(function() { ... })();:
- 無名関数（関数に名前がない）を即座に実行しています。
- これにより、クリックした瞬間にコードが実行される仕組みになっています。
2. テキストの取得
window.getSelection().toString():
- ユーザーが現在ウェブページ上で選択しているテキストを取得します。
- 選択したテキストが存在しない場合、空文字列（
""）を返します。
prompt("検索するテキストを入力してください:"):
- 選択したテキストがなかった場合、
prompt関数が実行されます。- ユーザーに「検索するテキストを入力してください」とメッセージを表示し、テキスト入力を求めます。
||（論理 OR 演算子）:
- 選択したテキストが存在する場合はそのテキストを使い、存在しない場合は
promptの結果を使います。結果的に、変数
tには以下のいずれかが格納されます:
- 選択したテキスト
- ユーザーが入力したテキスト
- 空文字列（どちらもない場合）
3. 条件分岐
t ? ... : ...:
t（取得したテキスト）が空でない場合と空の場合で動作を分けます。(a) テキストがある場合
window.open(...):(b) テキストがない場合
alert("テキストが選択されていません。"):
- ユーザーに警告を表示します。
- 選択も入力もされていない場合、検索は実行されません。
動作をステップごとにまとめると
- テキスト選択確認:
- ユーザーが選択したテキストがあるかチェック。
- 選択なしの場合:
- ユーザーにテキスト入力を促すダイアログ（
prompt）を表示。- テキスト取得:
- 選択されたテキストか、入力されたテキストを取得。
- 検索ページの生成:
- テキストがある場合、Amazonの検索ページを新しいタブで開く。
- エラーハンドリング:
- テキストがない場合、警告メッセージを表示。
ChatGPT からの説明は以上です。いかがですか？実行した際に何が起きるのかがわかると、少し安心できるのではないでしょうか。ネット上を「ブックマークレット おすすめ」などで検索するといろいろなブックマークレットが見つかります。いくつか解説を試してみてください。さて、ChatGPT はコードの解説だけでなく、指示されたコードを書くこともできます。次回は ChatGPT を使ってブックマークレットを作ってみましょう！
この記事はここまでです。有料部分はありません。
もし有益と感じられたなら ↓ から「投げ銭」お願いします。
この続きはcodocで購入
