プログラミングの基礎③：記述ルール／数値・文字列の扱い方

こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。

Web制作コースと事務・ライティングコースに所属しています。

プログラムでは、数値や文字列を正しく扱うことが基本です。
この記事で、計算や文字操作の基礎が理解でき、簡単な計算や文字操作ができるようになります。

数値
文字列
テンプレートリテラル
変数展開
1. 概要
文字列連結
まとめ

数値

概要
JavaScriptでは、数を扱うときに整数と 浮動小数点数 の2種類が存在します。

整数：0, -5, 12 など、小数点以下がない数字
浮動小数点数：3.14, -0.001, 2e10（2×10の10乗）

JavaScript はすべての数値を Number 型で扱うので、整数と浮動小数点は同じ型です。
ただし、計算結果が小数になる場合は自動的に浮動小数点になります。

一覧

項目	コード例	説明
整数の宣言	`let age = 15;`	年齢を整数で保持
浮動小数点	`const pi = 3.14159;`	円周率など小数を保持
小数計算	`let area = pi * radius * radius;`	半径が10の場合、円の面積を計算
指数表記	`let big = 1e6; // 1000000`	大きな数値を簡潔に書く

✅ ポイント

小数点以下が必要ない場合でも Number 型で扱います。

JavaScript の Number は64bit IEEE‑754 形式なので、精度に注意が必要です（例：0.1 + 0.2 が 0.30000000000000004 になる）。

文字列

概要:
文字列は「テキスト」のデータ型で、単語や文章を扱います。
JavaScript では文字列を シングルクオート ' や ダブルクオート "、あるいは バックティック `（テンプレートリテラル）で囲みます。

一覧

項目	コード例	説明
シングルクオート	`let greeting = 'こんにちは';`	文字列を単一引用符で作成
ダブルクオート	`let name = "Alice";`	名前をダブル引用符で作成
バックティック（テンプレート）	let sentence = `私は ${name} と友達です。`;	変数展開ができる文字列（変数展開とは,文字列の中で変数や値をそのまま埋め込む手法です。)

実例
実例に記載しているエスケープとは、特殊な意味を持つ文字をそのまま文字として扱うために必要不可欠です。

/* ---------------------------------------------
   シングルクオート（'）で文字列を定義する例
--------------------------------------------- */
const singleQuote = 'JavaScript は楽しい';
console.log(singleQuote);                  // → JavaScript は楽しい

// 文字列内にシングルクオートを入れたいときは、エスケープします。
const escapeSingle = 'I\'m learning JS';   // \ を付けてエスケープ。
console.log(escapeSingle);                 // → I'm learning JS


/* ---------------------------------------------
   ダブルクオート（"）で文字列を定義する例
--------------------------------------------- */
const doubleQuote = "JavaScript は楽しい";
console.log(doubleQuote);                  // → JavaScript は楽しい

// 文字列内にダブルクオートを入れたいときは、エスケープします。
const escapeDouble = "He said, \"Hello!\""; // \ を付けてエスケープ。
console.log(escapeDouble);                  // → He said, "Hello!"


/* ---------------------------------------------
   バックティップ（`）でテンプレートリテラルを使う例
--------------------------------------------- */
//テンプレートリテラルとは、バックティップで囲む文字列

const name = '太郎';
const age  = 28;

// テンプレートリテラルでは ${} 内に変数や式を書けます。
const templateLiteral = `こんにちは、${name}さん。年齢は${age}歳です。`;
console.log(templateLiteral);    // → こんにちは、太郎さん。年齢は28歳です。

// 複数行文字列も簡単に書ける。
const multiLine = `
  この文章は
  複数行で書かれています。
`;
console.log(multiLine);
/* 出力:
  
  この文章は
  複数行で書かれています。

*/

✅ ポイント

シングルとダブルは互換性があります。どちらを使うかは好みや既存コードの統一で決めましょう。

バックティックを使うと、複雑な文章でも見やすく書けます。

テンプレートリテラル

概要:
テンプレートリテラルはバックティック ` で囲む文字列を書き、変数や式を埋め込むことができます。

変数展開（${...}）が可能。
複数行をそのまま書ける。
計算式も埋め込める。

一覧

項目	コード例	説明
変数展開	let full = `${firstName} ${lastName}`;	`firstName` と `lastName` を連結
複数行	let poem = `星が輝く夜\n月も笑っている`;	改行をそのまま保持
計算式埋め込み	let total = `${price} + ${tax}`;	価格と税金の文字列化

主な用途・メリット

用途	説明
変数の埋め込み	`${expression}` の形で式を直接文字列内に挿入できる。従来の連結演算子（`+`）より可読性が高い。
複数行文字列	バッククォートで囲むだけで改行を保持でき、HTML や SQL など長文のテンプレートをそのまま書ける。

✅ ポイント

テンプレートリテラルは可読性が高く、特に長い文章や複数行の場合に便利です。

変数展開

概要

概要:
「変数展開」とはテンプレートリテラル内で ${} を使って変数を埋め込むことです。
これにより、文字列と変数の結合が簡潔になります。

一覧

項目	コード例	説明
基本展開	let msg = `こんにちは、${name}さん！`;	`name` の値を文字列に挿入
複数変数	let info = `${firstName} ${lastName} は ${age} 歳です。`;	3つの変数を連結
演算式展開	let result = `1 + 2 = ${1+2}`;	計算結果を文字列化

✅ ポイント

${} の中は JavaScript の任意の式が書けます。

変数名がわかりやすいと、コードの読み手に優しいです。

文字列連結

概要:

JavaScript では文字列を + 演算子で結合できます。
ただし、テンプレートリテラルを使うとより可読性が高くなります。

一覧

項目	コード例	説明
+演算子連結	`let full = firstName + ' ' + lastName;`	文字列を加算して結合
テンプレートリテラル	let full = `${firstName} ${lastName}`;	同じ結果だが読みやすい
連続した +	`let msg = 'A' + 'B' + 'C';`	A、B、C を結合

✅ ポイント

+ 演算子は文字列以外の型も自動で変換しますが、意図しない結果になることがあります。

テンプレートリテラルを使うと不具合を減らせます。

まとめ

一覧

項目	ポイント
数値	整数・浮動小数点は同じ `Number` 型。計算で小数が出ると自動変換
文字列	シングル／ダブルクオートは互換性あり。バックティックはテンプレートリテラル
テンプレートリテラル	変数展開 `${}`、複数行、計算式埋め込みが可能。可読性向上
変数展開	`${}` 内に任意の式を書ける。コードを簡潔に保つ
文字列連結	`+` 演算子はシンプルだがテンプレートリテラルで安全かつ読みやすい

次回は「プログラミングの基礎④：記述ルール／演算子と条件分岐の使い方」について学習します。

▶次回

プログラミングの基礎④：記述ルール／演算子と条件分岐の使い方
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。計算や条件分岐を正しく使えるようになると、プログラムで複雑な処理ができるようになります。IF文や演算子はExce...
kanau-lab.co.jp
2025.11.23

◀前回

プログラミングの基礎②：記述ルールと基本概念の理解
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。今回は、プログラムを書くときに知っておきたい基本的なルールや概念を整理します。これを理解することで、コードを書く...
kanau-lab.co.jp
2025.11.23