JavaScriptの文字列・NULL/Undefined・Mathオブジェクトまとめ
📝 この記事で学べること
JavaScriptの「文字列操作」「null/undefinedの違い」「Mathオブジェクトの基本」を初心者向けに分かりやすくまとめました。
目次
- 1. 文字列（String）とは
- 2. 文字列のインデックスとアクセス
- 3. 文字列メソッドの基本
- 4. 代表的なStringメソッド
- 5. テンプレートリテラルと従来の連結方法
- 6. NULLとUndefinedの違い・よくあるつまずき
- 7. Mathオブジェクトの使い方
- 8. まとめ
- 9. 次におすすめの学習記事・リソース
1. 文字列（String）とは
文字列は「文字の並び」を表すデータ型です。
'シングルクォート' もしくは "ダブルクォート" で囲って表現します。
const greeting = "Hello, world!";
const name = 'Haruka';
2. 文字列のインデックスとアクセス
文字列は**インデックス（添字）**で、1文字ずつアクセスできます（インデックスは0から）。
const language = "JavaScript";
console.log(language[0]); // J
console.log(language[4]); // S
🟡 補足
language.charAt(0)でも同じ動作ができますが、配列のように[]でアクセスするほうが今は一般的です。
3. 文字列メソッドの基本
文字列に対して「メソッド」を使って便利な操作ができます。
後ろに()を付けて呼び出します。
const message = " hello world ";
console.log(message.trim()); // "hello world"
console.log(message.toUpperCase()); // " HELLO WORLD "
✅ メソッドの連続適用も可能！
const cleaned = message.trim().toUpperCase();
console.log(cleaned); // "HELLO WORLD"
4. 代表的なStringメソッド
| メソッド | 概要・使い方例 |
|---|---|
.toUpperCase() |
アルファベットを大文字に変換"abc".toUpperCase() → "ABC"
|
.trim() |
両端の空白を削除" abc ".trim() → "abc"
|
.indexOf('文字') |
指定文字が最初に出現するインデックスを返す"banana".indexOf("n") → 2
|
.slice(開始, 終了) |
指定範囲の部分文字列を返す"abcdef".slice(2, 4) → "cd"
|
.replace(旧, 新) |
指定部分を別の文字に置換"apple".replace("p", "b") → "abble"
|
5. テンプレートリテラルと従来の連結方法
テンプレートリテラルは、バッククォート `（Shift + @）で囲みます。
変数や式、改行も含めることができてとても便利！
const user = "はるや";
const message = `こんにちは、${user}さん！
今日の日付は${new Date().toLocaleDateString()}です。`;
console.log(message);
// こんにちは、はるやさん！
// 今日の日付は2025/7/18です。
従来の連結方法（+演算子）との違い：
const user = "はるや";
const msg1 = "こんにちは、" + user + "さん！";
const msg2 = `こんにちは、${user}さん！`; // テンプレートリテラル
console.log(msg1); // こんにちは、はるやさん！
console.log(msg2); // こんにちは、はるやさん！
💡 ポイント
テンプレートリテラルは複雑な文や変数埋め込み・改行もラクラク！
6. NULLとUndefinedの違い・よくあるつまずき
| 型 | 意味 | 例 |
|---|---|---|
| null | 意図的に「値が存在しない」と示す | let data = null; |
| undefined | 変数が宣言されたが値が入っていない状態 | let value; // undefined |
🟡 補足
nullは「空にしたい」「初期化したい」ときに明示的に使います。
undefinedは「値を入れていない」「未定義」の状態。
よくある落とし穴：
let a;
console.log(a == null); // true（nullとundefinedのどちらでもtrue）
console.log(a === null); // false（型も値も一致しない）
⚠️ 注意
== nullで判定するとundefinedもnullも両方trueになるため、
型も厳密にチェックしたい場合は===を使いましょう。
7. Mathオブジェクトの使い方
Mathオブジェクトは数学的な定数や関数が利用できる組み込みオブジェクトです。
よく使うメソッド
| メソッド | 説明 | 使用例 |
|---|---|---|
Math.floor(x) |
小数点以下切り捨て |
Math.floor(7.8) → 7
|
Math.ceil(x) |
小数点以上に切り上げ |
Math.ceil(7.2) → 8
|
Math.round(x) |
四捨五入 |
Math.round(7.5) → 8
|
Math.max(a, b, ...) |
最大値 |
Math.max(5, 9, 3) → 9
|
Math.min(a, b, ...) |
最小値 |
Math.min(5, 9, 3) → 3
|
Math.random() |
0以上1未満のランダムな数値を返す |
Math.random() → 例: 0.5274
|
// 1から10までのランダムな整数を生成
const randomNumber = Math.floor(Math.random() * 10) + 1;
console.log(randomNumber); // 例: 7
⚠️ 注意
Math.random()は毎回違う値を返すため、再現性が必要な処理には向きません！
8. まとめ
✅ 文字列は''や""、テンプレートリテラルは`
✅ Stringメソッドで文字列操作が効率的にできる
✅ null/undefinedの違いも押さえよう
✅ Mathオブジェクトでランダム値や数学計算もラクラク！
9. 次におすすめの学習記事・リソース
- MDN公式: JavaScript String
- MDN公式: nullとundefined
- MDN公式: Math
- Qiita: JavaScriptのnullとundefinedの違いまとめ
- Qiita: JavaScript Mathオブジェクトまとめ
💡 以上、JavaScriptの基本的な文字列操作・null/undefined・Mathオブジェクトについてのまとめ＆よくある質問でした。
ご意見・ご質問・誤りの指摘などコメントでぜひ教えてください！