JavaScript リテラル(文字列|オブジェクト|配列) | プログラミングアカデミーゼロプラスワン

リテラルというのは、JavaScript以外の言語を使うプログラマにはあまり馴染みのない言葉ですので、プログラマでも知らない人もいるかもしれません。

JavaScriptでは多用しますし、また、他の言語でもリテラルという呼び方はしませんが、同じようなことをしています。

リテラルというのは、特定の記号で囲うことで、記号に応じたもの(文字列/配列/オブジェクト)を生み出す記述の仕方、と定義することができると思いますが、文章で書いてあると何が何やらわからないと思いますので、例を出してリテラルが何かを理解してみます。

文字列リテラル

次は文字列を作り出すリテラルです。

let value1 = '123';
let value2 = "456";

1 2	let value1 = '123'; let value2 = "456";

このシングルクウォート['] または、ダブルクウォート["] を文字列リテラルと呼びます。

どちらでも、文字列を記述するときに使えます。シングルクウォートで囲まれた文字列の中ではダブルクウォートがそのままダブルクウォートとして認識されます。逆にダブルクウォートで囲まれた文字列の中ではシングルクウォートを普通に使えるわけです。

つまり、

let value1 = '今日は"○月×日"です';
let value2 = "わたしは'プログラマ'です";

1 2	let value1 = '今日は"○月×日"です'; let value2 = "わたしは'プログラマ'です";

こんな風に、使えます。

JavaScriptはHTMLと組み合わせて使うことが多く HTML では値を指定するときにダブルクウォートで囲って属性値などを記述するときに使われるため、プログラム内でHTMLを記載しやすいように、JavaScriptでは文字列はシングルクウォートで囲って記載される方が、より標準的なコーディング規約になっています。

どちらも同時に使いたい場合は

let value1 = 'この文字 " はダブルクウォートと呼びます。\nこの文字 \' はシングルクウォートと呼びます。';
let value2 = "この文字 \" はダブルクウォートと呼びます。\nこの文字 ' はシングルクウォートと呼びます。";

1 2	let value1 = 'この文字 " はダブルクウォートと呼びます。\nこの文字 \' はシングルクウォートと呼びます。'; let value2 = "この文字 \" はダブルクウォートと呼びます。\nこの文字 ' はシングルクウォートと呼びます。";

こんな感じに、記載することができます。\記号で、エスケープする(逃げる)と表現されますね。\n は改行を表す特殊な文字です。これもエスケープしているということになります。

テンプレートリテラル/テンプレート文字列

文字列に変数を埋め込んで記述することのできるテンプレート文字列の機能で新しいJavaScriptで採用されているものです。現在はほとんどのブラウザなどの JavaScript環境で動作します。

let value1 = `ABC`;
let value2 = `value1の値の中身は[${value1}]です`。
// value1の値の中身は[ABC]です

let value3 = `
テンプレートリテラルでは
改行もそのまま値として含めることができます。
`;

let value1 = `ABC`;

let value2 = `value1の値の中身は[${value1}]です`。

// value1の値の中身は[ABC]です

let value3 = `

テンプレートリテラルでは

改行もそのまま値として含めることができます。

テンプレートリテラルは、バッククウォートというもので囲まれた文字列です。${値}として、変数や数式などを埋め込むことができますし、また、改行もそのまま文字列として記述することができます。\nみたいなのはしなくていいんですね。

配列リテラル

さて、配列リテラルです。JSでは角かっこで囲むことで、簡単に配列を生成することができます。

他言語でも、文字列はダブルやシングルのクウォートで囲って宣言するので、文字列リテラルという言葉はなくても同じようなことをプログラム中で記載するのは普通のことでした。ですが、配列を生成するようなリテラルというのは、あまり他言語ではみかけません。それ故に、このような独特の記述方法を"リテラル"と名前をつけて呼んでいる、という気がします。

こちらが例になります。

let value1 = [100, 200, 300];
console.log(value1[0]); // 100
console.log(value1[1]); // 200
console.log(value1[2]); // 300

let value1 = [100, 200, 300];

console.log(value1[0]); // 100

console.log(value1[1]); // 200

console.log(value1[2]); // 300

角かっこで囲まれてカンマで区切られた数値を代入することで、value1には、要素が3つありそれぞれ番号が入った配列が代入されます。配列なので、0 / 1 / 2 というような連番でその中身にアクセスすることができます。

let value1 = new Array(100, 200, 300);

1	let value1 = new Array(100, 200, 300);

たしか、このような書き方でも配列を作ることはできるのですが、ほとんど用いられません。

オブジェクトリテラル

オブジェクトとは、特殊な変数のタイプになりますが簡単にいうと、いくつかの変数をひとまとまりにして定義できるものです。オブジェクトの中身の変数をプロパティと呼びます。

JavaScript では、オブジェクトを生成するのにもリテラル、というもので可能です。

let value1 = {
  name1: 'ABC',
  name2: 123 
}

let value1 = {

name1: 'ABC',

name2: 123

}

このように記述すると、value1 には値が ABC の name1 プロパティと、値が 123 の name2 プロパティを持つオブジェクトが生成されて代入されていることになります。

これを応用すると

let value2 = {
  name1; {
    name1_1: 'DEF',
    name1_2: 'GHI'
  },
  name2: {
    456
  }
}

let value2 = {

name1; {

name1_1: 'DEF',

name1_2: 'GHI'

name2: {

456

}

このように入れ子になったオブジェクト、つまり、オブジェクトのプロパティにオブジェクトを入れたもの、を作成することもできます。

この、大かっこの記号 { } は、オブジェクトリテラルということになります。

プログラム内の1つのブロック(まとまり)を表すにも、大かっこ記号が使われますが、プログラムの書き方によっては、オブジェクトリテラルになります。

また、JavaScript のオブジェクトは、プロパティ名に対して文字列で指定してアクセスすることもできます。(これはあまり他言語では見かけないのですが)

下記のプログラムでそれを表しています。

let obj1 = {
  a: 'Aです',
  b: 'Bです',
};
console.log(obj1['a']); // Aです
let prop1 = 'b';
console.log(obj1[prop1]); // Bです

let obj1 = {

a: 'Aです',

b: 'Bです',

};

console.log(obj1['a']); // Aです

let prop1 = 'b';

console.log(obj1[prop1]); // Bです

obj1 の a や b のプロパティの名称を文字列で指定することができるわけです。

このJavaScriptのオブジェクトの性質を使うことで、JavaScriptの古い資料ではオブジェクトのことを「連想配列」と呼んだりするものもあります。他言語でよく使われる連想配列というのは、名前と値がセットになって情報を記録できるような仕組みなので、たしかに連想配列と呼べるものではありますが、オブジェクトのことを連想配列というとなんのことを指しているのかよくわからなくなりがちなので、JSでは連想配列という言葉は使わずにオブジェクトのことだと、理解しておくのがよいと思います。

まとめ

今回は「リテラル」について紹介しました。

文字列リテラル、テンプレート文字列リテラル、配列リテラル、オブジェクトリテラル、というものをそれぞれ紹介しました。

※この記事書いてから気が付きました。

リテラルというのは、定義としてはプログラムの中で特定の書式で数値や定数や文字列や配列やオブジェクトを生成すること、とありました。

それ故に、整数値、小数値、null値、Boolean値、などなども、リテラル、の仲間になるとのことです。Boolean値の true false などをリテラルと呼ぶ機会は少ないと思いますが、そのような定義となるんですね。