そのコード、そのまま載せていませんか？` `と``で「伝わる」ソースコード表示術
Web制作を学んでいると、自分の書いたコードをブログやポートフォリオで紹介したくなる瞬間が必ずやってきますよね。「自分が苦労して書いたコードを、誰かに見てもらいたい！」という気持ち、本当によく分かります。 でも、いざWebページにコードを貼り付けてみると、「あれ？なんか表示が崩れるな」「改行が反映されないぞ？」とつまずいてしまうことはありませんか？ 実は、Webブラウザはデフォルトだと「連続する半角スペースや改行を、全部まとめて1つの半角スペースに変換する」というおせっかいな性格をしています。これでは、大事なコードのインデント（段落）が台無しになってしまいますよね。 そんな時こそ、HTMLの力を借りましょう。今回は、コードを美しく、そして正しく伝えるための「魔法のペア」について解説します。 ---魔法のペア：``タグと``タグの役割
コードをきれいに表示させるには、この2つをセットで使うのが「セマンティック（意味論的）」な正解です。- `
`タグ
：「Preformatted text（整形済みテキスト）」の略。ブラウザの「おせっかいな自動整理」をストップさせ、書いた通りに表示させる箱のような役割です。 - `
`タグ：「これはプログラムのコードですよ」とブラウザや検索エンジンに伝えるためのタグです。
`は「形を崩さないための専用の型」、``は「中身が何であるかを示すラベル」のようなものですね。
基本的な書き方を見てみましょう
まずは、最もシンプルな形です。
// JavaScriptのサンプルです
const message = "こんにちは！";
console.log(message);
これだけで、ブラウザは「ああ、ここはプログラムのコードなんだな。勝手に整形しちゃいけないんだな」と理解してくれます。
---
「泥臭い」現実：そのまま載せると怒られる！？
ここで一つ、初心者が一番陥りやすい「落とし穴」をご紹介します。HTMLの中にHTMLをそのまま書くと、ブラウザは「あ、これWebページの一部だな！」と勘違いして実行しようとしてしまうんです。
例えば、`
`タグを表示させたいのに、そのまま書くとページレイアウトが崩れてしまいます。これを防ぐには「実体参照（エスケープ）」というテクニックが必要です。
- `<` → `<`
- `>` → `>`
「えっ、面倒くさい…」と思いましたよね？ 大丈夫です。最近はコードをコピーすると自動で変換してくれるツールや、VS Codeなどのエディタの機能が優秀なので、手打ちする必要はほとんどありません。まずは「`<`は`<`に化けるんだな」と頭の片隅に置いておくだけで十分ですよ。
---
さらに一歩先へ：シンタックスハイライトという「彩り」
コードが見やすいのは、色がついて文字の役割がハッキリしているからです。これを「シンタックスハイライト」と呼びます。
自分で色分けをCSSで書くのは大変なので、世界中のプロは「Highlight.js」や「Prism.js」といった便利なライブラリを借りています。これらを読み込ませると、先ほどの`
`タグの中身を自動的にカラフルに彩ってくれます。
実践的なマークアップ例
多くのライブラリでは、``タグに「どの言語か」を示すクラス名をつけるのがルールです。
function sayHello() {
console.log("コード表示の完成です！");
}
こうしておけば、ライブラリが自動的に「あ、これはJavaScriptだから、このキーワードを青くして、文字列を緑にしよう」と気を利かせてくれます。
---
まとめ：怖がらずに、まずは「囲む」ことから！
最初は難しいルールに感じるかもしれませんが、Web制作の現場でも「まずは`
`で囲む」という基本は変わりません。
1. `
`で「崩さない！」と宣言する。
2. ``で「これはコードだ！」と明示する。
3. 必要に応じてライブラリで色をつける。
これだけで、あなたの書いたコードはぐっとプロっぽく、そして読み手にとっても優しいものに変わります。
最初はうまくいかなくても大丈夫。「あ、ここ改行足りないな」「タグが閉じられてないかな？」と一つずつ確認していく作業こそが、エンジニアとしての確かな一歩になります。ぜひ、今日書いたコードをブログやメモ帳に、丁寧に「囲んで」あげてくださいね！
コメント