2025年9月17日

バッククォートとテンプレートリテラルを使った文字列処理【WordPress向け完全版】

バッククォートとテンプレートリテラルを使った文字列処理【WordPress向け完全版】

プログラミングを始めると、「（バッククォート）」と「'（シングルクォーテーション）」の違いで迷うことがあります。
特に WordPress で JavaScript や PHP のコードをブログに貼る場合、この違いを理解しておくと、JSONエラーや表示崩れを防ぐことができます。

💡 追記：最初は Enlighter などのプラグインでコードを試しましたが、Gutenberg 上で JSON エラー回避ができませんでした。そのため、（バッククォート） や $波括弧 に文字化して安全に表示する形式にしています。

🔰 そもそもクォーテーションとは？

プログラミングでの「クォーテーション」とは、文字列を囲むための記号のことです。JavaScript では主に次の3種類があります。

• シングルクォーテーション：'...'
• ダブルクォーテーション："..."
• バッククォート（テンプレートリテラル）：（バッククォート）...（バッククォート）

基本的にどれも文字列を扱えますが、バッククォートだけは特別な機能を持ち、複数行や変数の埋め込みが可能です。

🌞 シングルクォーテーションとダブルクォーテーション

• 文字列をシンプルに囲む方法
• 'Hello' と "Hello" はほぼ同じ
• 違いは「入れ子」にするとき。例：
  "彼は '侍' です" または '彼は "侍" です'
• \n を使えば改行できる

使用例（JavaScript）

// シングルクォーテーション（'...'）
const a1 = 'シングルクォーテーション';
console.log(a1);

// ダブルクォーテーション（"..."）
const a2 = "ダブルクォーテーション";
console.log(a2);

// 改行（\n を利用）
const a3 = '1行目\n2行目';
console.log(a3);

🌙 バッククォート（テンプレートリテラル）

• キーボードの左上（数字1の左横）にある記号
• ES6 以降で使える新しい文字列の書き方
• 複数行をそのまま書ける（改行できる）
• $波括弧 を使って変数や式を埋め込める
• 変数と文字を + で繋がなくて良い

使用例（JavaScript）

// バッククォート（テンプレートリテラル）
const b1 = （バッククォート）1行目
2行目（バッククォート）;
console.log(b1);

// 変数埋め込み（+不要）
const name = 'のび太';
const age = 10;
const b2 = （バッククォート）私は$波括弧{name}です。年齢は$波括弧{age}歳です。
             ← コンソール上に 「名前はのび太です。年齢は10歳です。」 が表示される。（バッククォート）;
console.log(b2);

📌 シングルクォーテーションとバッククォートの違い

以下のコードを比べると違いが直感的にわかります。

// 変数を用意
const name = 'のび太';
const age = 10;
const address = '東京都';

// シングルクォーテーション（変数は埋め込めない）
const sentence1 = '名前は' + name + 'です。年齢は' + age + '歳または' + (age + 1) + '歳で、' + address + 'に住んでいます'
                  + '← コンソール上に 「名前はのび太です。年齢は10歳または11歳で、東京都に住んでいます。」 が表示される。';
console.log(sentence1);

// バッククォート（テンプレートリテラルで変数を埋め込める）
const sentence2 = （バッククォート）名前は$波括弧{name}です。年齢は$波括弧{age}歳または$波括弧{age +1}歳で、$波括弧{address}に住んでいます
                   ← コンソール上に 「名前はのび太です。年齢は10歳または11歳で、東京都に住んでいます。」 が表示される。（バッククォート）;
console.log(sentence2);

👉 シングルクォーテーションは「文字列を囲むだけ」ですが、バッククォートは「変数や式を埋め込める」「複数行をそのまま書ける」「+ で繋がなくてもよい」という点で強力です。

⚠ WordPressでの注意

• Gutenberg の通常テキストブロックにバッククォートを含むコードを貼ると JSONエラー が出る場合があります。
• 安全にコードを載せる方法：
  • コードは <pre><code> ブロックにまとめる
  • Enlighter の Generic Highlighting ブロックに貼る（短いコードのみ）
• 本記事ではエラー回避のために （バッククォート） や $波括弧 に文字化しています

✅ まとめ

💡 この形式でカスタムHTMLブロックに貼ると、文章・箇条書き・絵文字・コードブロックすべてそのまま表示され、JSONエラーの心配もありません。