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

# 🔰 はじめに

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

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

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

　![スクリーンショット 2025-05-07 14.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379825/d697f78d-e9a7-4607-a0c8-a26e3aa8a953.png)

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

```javascript:基本構文
javascript:(function(){
    処理の内容
})();
```

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

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

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

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

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

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

![スクリーンショット 2025-05-04 14.20.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379825/a9841b1b-863e-478b-a9ba-a1623eca0949.png)

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

![スクリーンショット 2025-05-04 14.20.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379825/d364ff16-a64d-479c-8552-d2b57f9a244b.png)


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

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

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

コードはこちら。

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

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

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

```javascript:解説板
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();
})();
```

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

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

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

![スクリーンショット 2025-05-09 15.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379825/18a9ff76-ad7b-4d9d-9637-f54b4b256089.png)

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


# ✅️ おわりに

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

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

### メリット

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

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

### デメリット

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

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

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

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

▼JSコード整形

https://tools.m-bsys.com/dev_tools/jsbeautifier.php#google_vignette

▼JSコード圧縮

https://rakko.tools/tools/33/