はじめに

JavaScriptでの||&&を使ったちょっと役に立つかもしれない書き方という記事を書きました。
その内容を踏まえて、簡単なブックマークレットを作ってみました。

  • ブックマークレットとは
    • javascript:void(0)の進化系
    • 開く = 閲覧中のWebページでJavaScriptを実行する

作ったもの

コード

javascript:void((() => {  
    prompt('', document.title)  
    ||  
    prompt('', location.href)  
    ||  
    prompt('', `${document.title} ${location.href}`)  
    ||  
    prompt('', `[${document.title}](${location.href})`)  
    ||  
    prompt('', `<a href="${location.href}" target="_blank" rel="noopener noreferrer">${document.title}</a>`)  
})())  

使い方

  1. 欲しい値が出るまでEscapeキーを連打する(キャンセルボタンを押す)
  2. 欲しい値が出たらcommand + Cとかでコピーし、Enter押下(OKボタンを押す)

たったこれだけ。

解説タイム

prompt()は、alert()confirm()の亜種とも言えるようなもので、テキストを入力するボックス付きのやつです。

ユーザにテキストを入力することを促すメッセージを持つダイアログを表示します。
window.prompt - Web API | MDNより

構文は以下の通り。

const text = '表示するテキストだよ';  
const value = 'テキストボックスのデフォルト文字列だよ';  
const result = window.prompt(text, value);  

switch (result) {  
    case '':  
        alert('テキストボックスがからっぽな状態でOKボタンが押されたよ');  
        break;  
    case null:  
        alert('キャンセルされちゃったよ');  
        break;  
    default:  
        alert(`「${result}」って入力された状態でOKボタンが押されたよ`);  
        break;  
}  

プロンプトがvalueが選択された状態で表示されるので、そのままキーボードショートカットを押すだけでコピーできるとあって、ブックマークレット作成ではとっても便利。

で、実際に何をしているのかと言うと…

  1. タイトルを簡単にコピーできるように表示する
  2. もしキャンセルされたら…
    1. URLを簡単にコピーできるように表示する
    2. もしキャンセルされたら…
      1. タイトルとURLを簡単にコピーできるように表示する
      2. もしキャンセルされたら…
        1. タイトル文字列とURLをMarkdown形式で簡単にコピーできるように表示する
        2. もしキャンセルされたら…
          1. タイトル文字列とURLをHTML形式で簡単にコピーできるように表示する

キャンセルされた場合、返り値はnullとなり、OR論理演算子(||)の働きにより次のprompt()が実行されます。
OKが押された場合、ショートサーキット評価(短絡評価)によりそれ以上は実行されることなく、ブックマークレットが終了します。

おわりに

短絡評価楽しい。

追記: きれいにした

javascript: void ((() => {  
    'use strict';  
    void (  
        false  
        || prompt('Copy me!', document.title)  
        || prompt('Copy me!', location.href)  
        || prompt('Copy me!', `${document.title} ${location.href}`)  
        || prompt('Copy me!', `[${document.title}](${location.href})`)  
        || prompt('Copy me!', `<a href="${location.href}" target="_blank" rel="noopener noreferrer">${document.title}</a>`)  
    );  
})())  

関連記事

この記事へのコメント

まだコメントはありません
+1
22
@okayuの大して技術的ではないブログ
このエントリーをはてなブックマークに追加