Frontend Academy · レッスン

テンプレートリテラルとオプショナルチェーン

テンプレートリテラルで文字列に式を埋め込み、?. でネストしたプロパティに安全にアクセスし、null 合体演算子 ?? で短絡評価します。

「テンプレートリテラルとオプショナルチェーン」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

テンプレートリテラル：バッククォート文字列

テンプレートリテラル（バッククォート文字列）は、複数行の文字列と埋め込み式をサポートします。+による文字列連結を置き換え、意図をより明確にできます。

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

複数行のテンプレートリテラル

テンプレートリテラルでは、改行とインデントがそのまま保持されます。\nや、複数行にわたる文字列連結は必要ありません。

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${body}</p>
  </div>
`;

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

テンプレートリテラル内の式

任意のJavaScript式を${}内に記述できます。三項演算子、関数呼び出し、算術演算、メソッド呼び出しなどが使用できます。

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

タグ付きテンプレートリテラル

タグ付きテンプレートは、文字列の各部分と補間された値を引数として関数を呼び出します。styled-components、GraphQL（gql``）、sql``などのライブラリで、安全なクエリの構築に使用されています。

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;

オプショナルチェーン：?.

オプショナルチェーン演算子?.は、左辺がnullまたはundefinedの場合にTypeErrorをスローせず、undefinedへ短絡します。防御的なnullチェックをなくせます。

const user = null;

// Without optional chaining (throws TypeError):
// user.profile.avatar

// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error

オプショナルなメソッド呼び出し

obj?.method()は、objがnullでもundefinedでもない場合にのみメソッドを呼び出します。objがnullの場合は、例外をスローせずにundefinedを返します。

const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists

// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null

Null合体：??

Null合体演算子??は、左辺がnullまたはundefinedの場合にのみ右辺を返します（falsyの場合ではありません）。||とは異なり、0や''をnullishとして扱いません。

const port = config.port ?? 3000;  // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';

// Compare with ||:
console.log(0 ?? 'default');   // 0 (not nullish)
console.log(0 || 'default');   // 'default' (falsy!)

Null合体代入：??=

a ??= bは、aがnullまたはundefinedの場合にのみ、bをaへ代入します。a = a ?? bの省略形です。オブジェクトのプロパティを条件付きで初期化するときに便利です。

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

論理代入演算子

&&=は左辺がtruthyの場合にのみ代入します。||=は左辺がfalsyの場合にのみ代入します。これらを??=と組み合わせると、条件付き代入を簡潔に記述できます。

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

?.と??の組み合わせ

オプショナルチェーンとNull合体を組み合わせると、デフォルト値を指定しながら安全にプロパティへアクセスできます。

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

知っておきたい文字列メソッド

よく使う文字列メソッドには、trim()、trimStart()、trimEnd()、padStart()、padEnd()、startsWith()、endsWith()、includes()、replaceAll()、at()があります。

const str = '  Hello World  ';
str.trim();           // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1);         // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

確認問題

objがnullの場合、const val = obj?.foo?.bar ?? 'default'は何を返しますか。

まとめ：テンプレートリテラルとオプショナルチェーン

バッククォート文字列は式と複数行の記述をサポートします。タグ付きテンプレートによってDSLを作成できます。?.を使うと、nullチェックなしで安全にプロパティへアクセスできます。??は、値がnullまたはundefinedの場合にデフォルト値を提供します（単にfalsyの場合ではありません）。これらを組み合わせると、デフォルト値を備えた安全で読みやすいデータアクセスが可能になります。

よくある質問

「テンプレートリテラルとオプショナルチェーン」レッスンは無料ですか？

はい。「テンプレートリテラルとオプショナルチェーン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「テンプレートリテラルとオプショナルチェーン」で何を学びますか？

テンプレートリテラルで文字列に式を埋め込み、?. でネストしたプロパティに安全にアクセスし、null 合体演算子 ?? で短絡評価します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「テンプレートリテラルとオプショナルチェーン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る