😊

URL引数にデータをぶち込んでいくぅ！

2022/07/27に公開

JavaScript

Web

url

tech

概要

URL引数は願いを叶える万能な機能です。
URL引数を素のJavascriptで活用したい。(フロントエンド側)
そんなアナタ向けの記事になります。

実際に活用して作成したサイトは下記になります。

https://aqua-beads.hashito.biz/

URL引数って？

一般的にURLとはhttps://hashito.bizのように{プロトコル名}://{ドメイン}/{Path}みたいな感じの文字列です。
この、広大な宇宙のどこにホームページが存在するか、指し示す希望の光だと言えます。

URL引数とは、そんなURLに引数を追加した感じのものです。
https://hashito.biz?a=aaaa&b=bbbbと記載されている場合はaというKeyにaaaaという文字列が入力されている感じになります。
一般的には、この文字列を使って希望の星々（サーバー）と秘密のやり取りを行うために利用します。

https://hashito.biz?a=aaaa&b=bbbb

<URL引数>
a=aaaa
b=bbbb

ぶち込んでいくぅ

受け取り

URL引数の受け取りは、下記のような手順で行います。

URLを取得するぅ！
URLオブジェクトに変換するぅ！
URLオブジェクトのsearchParams.get()でほしいURL変数を指定して値を取得するぅ！

    // 1. URLを取得するぅ！
    let url_string = window.location.href; 
    // 2. URLオブジェクトに変換するぅ！
    let url = new URL(url_string);
    // 3. URLオブジェクトの`searchParams.get()`でほしいURL変数を指定して値を取得するぅ！
    let value = url.searchParams.get("keyname");

この手順を行うだけでvalueにはURLから取得した値が入っています。
超簡単ですね。

書き出し

URL引数付きのURLを作成する場合、下記のような手順で行います。

URLオブジェクトを作成するぅ！
URLオブジェクトのsearchParams.append()でURL引数を追加するぅ！
URLオブジェクトのtoString()で文字列に変換するぅ！

    //1. URLオブジェクトを作成するぅ！
    const url = new URL(`https://hashito.biz`);
    //2. URLオブジェクトの`searchParams.append()`でURL引数を追加するぅ！
    url.searchParams.append("a","aaaa");
    //3. URLオブジェクトの`toString()`で文字列に変換するぅ！
    const url_string = url.toString();

これで作成した文字列を書き出す事ができます。
また、実際には再読み込みせずに、ブラウザのURL表示のみを帰る場合は下記のようなコードを利用します。

    // このコードではurl_stringに移動します。
    window.history.pushState({},"",url_string)

つぶやき

あわせ技でTwitter共有ボタンを作成する事ができます。

    <button id="twitter-button" type="button" class="btn btn-primary"><i class="fab fa-twitter"></i>  共有する</button>

    var twitter_button = document.getElementById('twitter-button');
    twitter_button.addEventListener("click",()=>{
        const url = new URL(`https://twitter.com/intent/tweet`);
        url.searchParams.append("hashtags","アクアビーズ");
        url.searchParams.append("text","アクアビーズエディターで作ってみました。");
        url.searchParams.append("url",`https://hashito.biz`);
        const option = 'status=1,width=800,height=400,top=100,left=100'
        window.open(url.href, 'twitter', option);    
    })

このコードを実装してボタンをクリックすると、下記のようなウィンドウが開きツイートを実行できます。