LoginSignup
255

More than 5 years have passed since last update.

JavaScriptのシングルクォーテーションとダブルクォーテーション

Last updated at Posted at 2015-06-15
シングルクォーテーションとダブルクォーテーションの使い方の違いって何ですか?

JavaScriptのプログラミングを教えている方から質問を受けました。確かにネットで調べたり本で読んだりしてもいろんな人がいろんな書き方をしていて困りますよね。

JavaScriptではシングルクォーテーションもダブルクオーテーションも機能としては同じです。どちらも文字列を表現するのに使います。
PHPではダブルクオーテーションを使う場合のみ$myValueのような変数名を値に置き換える処理が行われますが、JavaScriptではそのようなことは起こりません。

極端な話、どっちでもいいのです。

ただ実際にはプログラミングの都合上ある程度の使い分けが行われます。

文字列として',"が必要な場合

ダブルクオーテーションを使う場合
var myVar = "I'm fine.";
console.log(myVar);
シングルクォーテーションを使う場合
var myVar = 'I\'m fine.';
console.log(myVar);

このように、'で囲っている文字列中で'という文字が必要な場合は、\'と記述する必要があります。
逆に"で囲っている文字列中で"という文字が必要な場合は、\"と記述する必要があります。

シングルクォーテーションを使う場合
var myJson = '{"name": "Taro", "age": 18}';
var myObj = JSON.parse(myJson);
ダブルクオーテーションを使う場合
var myJson = "{\"name\": \"Taro\", \"age\": 18}";
var myObj = JSON.parse(myJson);

文章中に現れるのが'"のどちらか片方しかないのであれば、現れない方で囲うと読みやすくなります。

HTML要素のonclickなどに書く場合

スクリプトはHTML要素の属性値として記述されます。HTMLの属性値は"で囲うことが一般的です。
その場合、スクリプトの中の""に置き換えるエスケープ処理が必要になりますので、シングルクォーテーションの方が見やすくなります。

シングルクォーテーションを使う場合
<button onclick="alert('hello world')">Click me!</button>
ダブルクオーテーションを使う場合
<button onclick="alert(&quot;hello world&quot;)">Click me!</button>

もっとも、こう書いても良いっちゃ良いのですが。

<button onclick='alert("hello world")'>Click me!</button>

ここらへんは個人の趣味とかプロジェクトのルールによりどっちを使うか決めるので、どちらが良い悪いということはありません。どちらでも良いです。

入力のしやすさ

英字キーボードだと'の方が打ちやすい(シフトキーを使わずに入力できるので)ので、シングルクォーテーションが好まれるかもしれません。
日本語キーボードだとどちらもシフトキー使わないといけないですが、"の方が距離が近くて片手でも打ちやすいです。誤差の範囲かもしれませんが…

見た目

'の方がすっきりした印象のコードになるので、私は好きです。

※個人の感想です。

逆に、"の方が文字列っていう感じがするって思って好む人もいるかもしれません。特にJavaやってた人。私も昔はそうだったんですけどね。

※Javaでは"で文字列を表します。'は文字型というよりプリミティブな別のデータ型に使います。

プロジェクトのルールで定まっている場合

最終的には全て。そのプロジェクト全体として文字列は'で書くと決まっていれば'を使いますし、"で書くと決まっていれば"を使います。
身近な例としてはjQueryは"を文字列に使っていますがthree.jsは'を使っています。AngularJSも'でした。

最近のはやりとしては'の方が主流かな…?
※個人の感想です。

結局のところ、どっちでもいいんだけどTPOに応じて使い分けようねっていう話です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
255