以前、UTF-8で制作したHTMLをShift_JISに変換してサーバーにアップロードした際、波ダッシュ（〜）が文字化けしてしまいました。今後、個人的にしようと思っている再発防止策を共有させていただきます。
制作環境
- Mac
- Sublime Text 3
- gulp-convert-encoding
波ダッシュ〜は使用できない！全角チルダはOK！
まず基本的なことですが、文字化けするのはUTF-8とShift_JISで文字コードが違うからです。
以下のページにわかりやすくまとまっていました。
UTF-8 → cp932(Shift_JIS)変換表
Oracleデータベースで、波ダッシュの文字化けはなぜ起きるのか？
波ダッシュの入力方法
- Macキーボードのかな入力で、Shift + 「へ」キー
- 「から」の変換
全角チルダの入力方法
ない。みたいです。とりあえずぼくが使っているMagic Keyboardにはなかったです。
Macの標準機能文字ビューアを使う
Control + Command + スペースで文字ビューアを表示。
検索窓で「U+FF5E」を検索すると「FULLWIDTH TILDE」というのがあるので、お気に入りに登録しておけばダブルクリックで入力できる。
ちなみに波ダッシュは「U+301C」で「WAVE DASH」
【対策１】テキストエディタ上の対応
上記の方法で波ダッシュを検索して全角チルダに置き換えておく。
補足
機種依存文字をエディター上でハイライト表示させておくと見た目の検索もしやすいので気づきやすくなる。
【文字化け防止策】Sublime Text 3 で機種依存文字をハイライト表示する
Visual Studio Codeを使う方は以下の記事が参考になりそう。
Visual Studio Codeをインストールしたら最初に設定したい箇所
【対策２】アップロード後の対応
波ダッシュがあれば文字化けして半角?になる（と思う）ので検索して修正する。
日本語テキスト内では波ダッシュを用いるのが正しい
今回、UTF-8で作成したHTMLをShift_JISに変換する、という工程で制作しているため、全角チルダに置き換えて対応したのですが、見た目は似ていても波ダッシュとチルダでは意味合いが異なります。
日本語で「から」と読み、範囲を示すために使う場合などは波ダッシュをあてるのが正しい使い方になります。
尚、JavaScriptやPHPを使って文字を置き換えるということもできると思いますが、それについては詳しく調べてないのでまたの機会に。。
以上です。