リテラルについて

2025-07-28

リテラルとは

リテラル（literal）とは、プログラムコード内に直接記述される固定値やデータ表現のことを指します。つまり、変数に格納する値そのものを直接コード上に書いた形式です。リテラルはデータ型ごとに異なる表記方法があります。

リテラルの重要性

リテラルを理解することは、JavaScriptの基礎を学ぶ上で非常に重要です。なぜなら:

  • コード内で直接値を表現する基本的な方法
  • 各種データ型の特徴が現れる
  • プログラムの可読性に直結する
  • 効率的なコーディングに不可欠

主要なリテラルの種類

1. 数値リテラル

let integer = 42;        // 整数リテラル
let floating = 3.14159;  // 浮動小数点数リテラル
let binary = 0b1010;     // 2進数リテラル (ES6)
let octal = 0o755;       // 8進数リテラル (ES6)
let hex = 0xFF;          // 16進数リテラル
let bigInt = 1234567890123456789012345678901234567890n; // BigIntリテラル (ES2020)

2. 文字列リテラル

let singleQuote = '文字列';  // シングルクォート
let doubleQuote = "文字列";  // ダブルクォート
let backtick = `文字列`;    // バックティック（テンプレートリテラル）

// テンプレートリテラル（ES6）
let name = "太郎";
let greeting = `こんにちは、${name}さん！`;

3. 真偽値リテラル

let isTrue = true;   // 真
let isFalse = false; // 偽

4. 配列リテラル

let emptyArray = [];                     // 空配列
let numbers = [1, 2, 3, 4, 5];          // 数値配列
let mixed = [1, "text", true, { key: "value" }]; // 混合配列

5. オブジェクトリテラル

let emptyObj = {};   // 空オブジェクト
let person = {
  name: "山田太郎",  // プロパティ
  age: 30,
  "favorite-color": "blue" // ハイフンを含む場合はクォートが必要
};

6. 正規表現リテラル

let regex = /pattern/flags;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

7. nullリテラル

let nothing = null; // 意図的な値の不在を示す

8. テンプレートリテラル（再掲）

ES6で導入された複数行文字列と式埋め込みが可能なリテラル:

let multiLine = `
  これは
  複数行の
  文字列です
`;

let calculation = `10 + 5 = ${10 + 5}`; // "10 + 5 = 15"

リテラルとコンストラクタの違い

同じ値でも、リテラル表記とコンストラクタ呼び出しでは微妙に異なります。

// リテラル
let strLiteral = "text"; 
let objLiteral = {};
let arrLiteral = [];

// コンストラクタ
let strConstructor = new String("text");
let objConstructor = new Object();
let arrConstructor = new Array();

リテラル表記の方が:

  • 簡潔で可読性が高い
  • パフォーマンスが良い場合が多い
  • 一般的に推奨される

リテラルの型判定

console.log(typeof 42);               // "number"
console.log(typeof "text");           // "string"
console.log(typeof true);             // "boolean"
console.log(typeof {});               // "object"
console.log(typeof []);               // "object"
console.log(typeof /pattern/);        // "object"
console.log(typeof null);             // "object"
console.log(typeof undefined);        // "undefined"
console.log(typeof 10n);              // "bigint"
console.log(typeof Symbol("sym"));    // "symbol"

リテラルのベストプラクティス

  1. 文字列リテラル: テンプレートリテラルを優先使用
   // 👍 推奨
   `文字列 ${expression}`

   // 👎 非推奨
   "文字列 " + expression
  1. オブジェクトリテラル: 簡潔な記法を活用
   const name = "太郎";
   const age = 25;

   // 👍 プロパティの短縮記法
   const person = { name, age };
  1. 配列リテラル: スプレッド演算子を活用
   const arr1 = [1, 2, 3];
   const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
  1. 数値リテラル: 可読性のための区切り文字
   // 👍 可読性向上
   const billion = 1_000_000_000;

リテラルに関する注意点

  1. 浮動小数点数: 精度問題に注意
   console.log(0.1 + 0.2); // 0.30000000000000004
  1. オブジェクトリテラル: 同じプロパティ名は上書き
   const obj = { a: 1, a: 2 }; // { a: 2 }
  1. 配列リテラル: 末尾のカンマ
   const arr = [1, 2, 3,]; // 有効（長さは3）

リテラルの応用例

分割代入とリテラルの組み合わせ

// 配列リテラルと分割代入
const [first, second] = ["apple", "banana"];

// オブジェクトリテラルと分割代入
const { name, age } = { name: "太郎", age: 25 };

動的プロパティ名

const prop = "color";
const obj = {
  [prop]: "blue" // 動的プロパティ名
};

メソッドの短縮記法

const obj = {
  // 従来
  oldMethod: function() { /* ... */ },

  // ES6短縮記法
  newMethod() { /* ... */ }
};

リテラルとJSON

JSON（JavaScript Object Notation）はJavaScriptのオブジェクトリテラルに似た形式ですが、いくつかの違いがあります:

  • プロパティ名は必ずダブルクォートで囲む
  • 関数やundefinedは使用できない
  • 末尾のカンマが許されない
// JavaScriptオブジェクトリテラル
const jsObj = {
  name: "太郎",
  age: 25,
  method() {}
};

// JSON
const jsonStr = '{"name":"太郎","age":25}'

まとめ

リテラルはJavaScriptの基礎的な概念であり、コード内で直接値を表現する方法です。各種データ型ごとに異なるリテラル表現があり、ES6以降ではより強力で簡潔なリテラル構文が追加されています。リテラルを適切に使い分けることで、より読みやすく効率的なコードを書くことができます。特にテンプレートリテラルやオブジェクト/配列の短縮記法は、現代のJavaScript開発において必須の知識です。

同じカテゴリーの記事