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 では開発メンバーを募集しています

recruitment
fwywd では採用試験を無料で公開しています。
採用への応募の有無を問わず、Web アプリケーションの開発を学びたい多くの方にとって有益な試験内容となるように設計しています。 ぜひ、fwywd の面白い採用試験を覗いてみてください。