ブックマークレットで学ぶjavascript

🔰 はじめに

コーディング実務経験0で入社した当時、
javascript はおろか jQuery ですらよくわからない状態で、
動くかどうかもわからないコードを見つけてはコピペして、でも結局動かずｲﾗｲﾗ…を繰り返していました。
javascript の勉強もできて、気軽に成功体験を得ることができないかと考えていたとき
ブックマークレットの存在を知りました。

💡 ブックマークレットとは？

ブラウザのブックマーク機能を使って、
なんらかの javascript 処理を行う簡易的なプログラムのことです。
JavaScript プログラムを、WEBブラウザ上で実行することができます！！

　

✏️ ブックマークレットを書いてみよう！

基本構文

javascript:(function(){
    処理の内容
})();

基本の構文はこちら。ブックマークレットでは、こちらの形式のコードを使用します。
先頭の javascript: は、「JavaScriptのプログラムを実行してください」という印です。
「処理の内容」の部分に、実行したい内容を記述していきます。

以下に簡単なサンプルを用意したので、触ってみましょう！

サンプル1 - アラートメッセージ

初心者には目に見えてわかりやすいものが一番！
ということで、まずはアラートメッセージのポップアップを出すブックマークレットを書いてみましょう。
コードはこちら。

javascript

javascript:(function(){
    alert('ブックマークレットでアラートメッセージを出そう！');
})();

上記の記述をコピペして、ブラウザのブックマークのURLに登録します。

適当なページを開いて、登録したブックマークをクリック・実行します。
以下のポップアップが出たら成功です！👏👏

サンプル2 - URLにパラメータ付与

目に見えてわかりやすいサンプルとして、
今度はURL末尾に適当なクエリパラメータを付与してみましょう。

クエリパラメータとは、URLの末尾に追加されるパラメータ名と値のペアで構成される文字列です。
色々なサイトを回遊していると、サイトURLの末尾に/?xxx=yyy_zzzとかがついてくるアレです。

コードはこちら。

javascript

javascript:(function(){
    const url = new URL(window.location.href);
    url.searchParams.set('date', '20250101');
    window.location.href = url.toString();
})();

いきなり何をやっているかわからなくなりましたね〜
なので、各行で何をしているかのコメントも入れてみました。

ブックマークレットでJSが動く喜びを知っていただきたいだけなので、
内容については「こういうことをしているんだな〜」と軽く把握する程度で問題ないです👍️

解説板

javascript:(function(){
    // 現在のページのURL（window.location.href）を取得。
    // 取得した情報をURLオブジェクトとして格納します。
    const url = new URL(window.location.href);
    
    // set()を使ってURLオブジェクトの中のクエリパラメータを設定・修正します。
    // このサンプルでは、パラメータ名をdate、値を20250101として設定します。
    url.searchParams.set('date', '20250101');
    
    // 修正したURL（url.toString()）にブラウザをリダイレクトします。 
    window.location.href = url.toString();
})();

ブックマークレット構文内であれば、変数や引数、if文なども普通につかえます！

サンプル1と同様に、コードをブックマークのURLに登録します。
適当なページを開いて、登録したブックマークをクリック・実行します。

設定したクエリパラメータが付与・再リロードされたら成功です👏👏

書き方次第で現在の日時をいれることもできますが、
入門編にしては記述が煩雑になりすぎてしまうので…
今回のサンプルでは、固定の値を入力することにしています。

✅️ おわりに

いかがでしたか？どんな簡単なコードでも、実際に動いてくれると嬉しいですよね😃
ブックマークレットについて、以下のメリット・デメリットがあると思いますが、
メリットの恩恵の方がずっと大きいと思います。

ネットの海にサンプルコードもたくさん落ちているので、
まずは色々ブクマ登録して試してみましょう！

メリット

1. javascriptの学習ができる（スキルアップ）
2. 手軽に成功体験を積むことができる（JSが動く喜びを知る）
3. アイデア次第で日頃の業務改善ができる（効率化）

アイデアを形にする難しさもありますが、
今はAIツールも普及しているので、ツールも頼りながら学習することでスキルアップができます！

デメリット

1. 個人情報や秘匿情報は漏洩する可能性がある
2. ブラウザごとに、ブックマーク登録できるコードの文字数に制限がある

どちらもJS初心者にはあまり関係のないものですが…
ブックマークレットではセキュリティ情報は扱わないようにしましょう！

また、文字数が多くて登録できない場合はコード圧縮すると登録できるかも？
以下の整形・圧縮ツールも活用しましょう！

JSの整形・圧縮ツールはこちら

▼JSコード整形

▼JSコード圧縮