Twitter のシェアリンクに指定したテキストを JavaScript でエンコードする方法

Twitter のシェアリンクに指定したテキストを JavaScript でエンコードする方法

はじめに

どーも、入田 / ぐるたか @guru_taka です!
先日 Vue.js & Nuxt.js から React & Next.js へ移行した理由 を Twitter の SNS ボタンでシェアすると、テキストが正しく表示されないと、Twitter でご指摘がありました。
▼ 現象
bad_tweet_sns_text
▼ 理想
good_tweet_sns_text

原因

原因は &%26エンコードしなかったからです。Twitter のシェアリンクにおいて、text パラメータに & が挿入されていると、別パラメータと認識されてしまいます
https://twitter.com/intent/tweet?text=${title}&url=${url}&hashtags=${hashtag1}, ${hashtag2}...
そのため、 & の直前である Vue.js で途切れてしまい、それ以降の文字はツイート画面に表示されませんでした。

結論

解決策は JavaScript の標準組み込みオブジェクトである encodeURIComponent 関数を使うだけです。引数に値を渡すと、UTF8 ベースでエンコードされた値が返ってきます
https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}
& だけでなく、?, /, # など URI で意味をもつ特定の文字もエンコードされます
基本的に SNS のシェアリンクに対し、各パラメータに値を渡す時は encodeURIComponent 関数でエンコードすると良さそうです!
※ URL と URI の違いについては、下図を参考にしてみてください。
uri_url_urn
出典:URI とは?「URL」と「URI」の違いを解説!| ferret

最後に

今回は encodeURIComponent 関数を用いて、エンコードする方法を紹介しました。わざわざ自前でエンコードするための関数を用意しなくて良いのは嬉しいですね!
URI で意味をもつ特定の文字をエンコードせず、URI として機能をもたせる encodeURI 関数もあります。気になる方は下記事をチェックしてみてください! 参考:encodeURI() - JavaScript | MDN

株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter: @guru_taka

参考文献

\ 次期受講生募集中 /

経営から技術まですべての力を手に入れたいあなたへ

【次期受講生募集】経営から技術まで仲間と一緒にすべての力を手に入れたいあなたへ

『起業家精神 × 学び方改革』が起こす行動の劇的な変化!
キカガク創業者の吉崎が考える新しい起業家育成の環境。
スキルばかり磨いて変わらない現実を変えていきましょう!