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

参考文献

【無料配信】fwywd radio で起業家のリアルを配信中!

fwywd radio

キカガク創業者で代表取締役会長の吉崎が 2022 年の 4月から始動した fwywd in 淡路での起業家育成プログラムの裏側を話します。

絶対にここでしか聴くことのできない起業家の裏側をリアルな情報と共に配信しています。