WindowsユーザーがMacで開発しようとしたらバックスラッシュでハマった
長年Windowsを使っていたのですが先日MacBookを購入しました。
Macでコードを書こうとした際、バックスラッシュでちょっとハマってしまったのでそのことについて書こうと思います。
結論
- WindowsとMacではバックスラッシュまわりの仕様がちょっと違う（Windowsが特殊）
- Macでバックスラッシュを入力したいときは
¥ではなく\を使う -
\はoption+¥キーで入力できる - Windowsの場合
¥は\扱いになる
ハマったこと
Vue.js+TypeScriptでWebアプリを開発しようとしました。
その中で「textarea内に入力された文字を改行区切りで配列に格納する」という処理を書こうとしました。
以下は該当箇所の抜粋です。（今回の記事に関係のない記述は全て省いてたり簡略化したりしています。）
<!-- textareaに入力された文字列をstring型の変数"inputText"で受け取る-->
<textarea v-model="inputText"></textarea>
<!--このボタンを押すと入力を改行区切りで配列に格納する処理(doAction)を実行する-->
<button type="button" @click="doAction">Click Me!</button>
doAction関数の中身はこんな感じ。
doAction() {
// inputTextを改行で区切って配列arrayに格納
const array = this.inputText.split('¥n')
// arrayの中身をコンソールログに出力
console.log(array)
}
ぱっと見た感じ合ってそうなコードですが、これだとうまくいきません。
例えばinputTextを
A
B
C
としたとき、array=["A","B","C"]としたいところがarray=["A¥nB¥nC¥n"]となり、array[0]に文字列が全て入ってしまいます。
解決策
doAction関数内の¥nを\nに変えるだけです。
\はoption+¥キーで打つことができます。
const array = this.inputText.split('\n')
なぜ解決されるのか？
Windowsの場合、例えば改行コードを¥キー+nキーと打っても問題なく動きます。
しかし本来、円マーク¥とバックスラッシュ\は別物です。
| Unicode | 文字コード |
|---|---|
¥ |
U+00A5 |
\ |
U+005C |
実はWindowsでは¥キーは文字コードU+005Cになります。つまり円マークを入力しているつもりが実はバックスラッシュを入力していたのです。
そしてWindowsで日本語フォントを使っているとき、バックスラッシュは円マーク¥として表示される仕様があります。
例えば以下の文字はWindowsでみるとどちらも円マークに見えると思います↓
バックスラッシュ：\
円：¥
欧米フォントだと区別して表示されるのでコード内で¥と入力してもちゃんと\で表示されたりします。しかし押してるのは¥キーであるため、円マーク＝バックスラッシュと勘違いしてしまっていました。
Macでは¥キーと\キーは別物になっているため、Windowsのノリで¥キーを使うとうまくいかなったということです。
おわりに
WindowsユーザーがMacを使うときはバックスラッシュに気を付けましょう。
改行まわりのコードで「合ってそうなのにうまく動かない」というときはバックスラッシュが原因かもしれません……。
Discussion