ERBテンプレートの中で複数行のコードをコメントアウトする方法を探していませんか?
エディタのショートカットではできないことも多く、意外とやりにくいですよね。
そこでこの記事ではERBテンプレート内で複数行のコメントアウトをする方法を3つ紹介します。
最後まで読めば、状況に応じた適切なコメントアウトができるようになります。

この記事を書いているぼくは実務経験1年。独学で未経験から従業員300名以上の自社開発企業へ転職しました。実務ではVue.jsとRailsを毎日書いています。
問題
ERBテンプレートに書いた以下のコードをコメントアウトしたいと思っていたのですが、なかなかうまくいきません、、。
<b>規約違反となるケース</b>
<ul>
<li>法令違反</li>
<li>プライバシー侵害</li>
<li>他社サービスへの誘導</li>
<li>
</ul>最初はHTMLと同じように<!-- -->を使ってコメントアウトしていました。
<!--
<b>規約違反となるケース</b>
<ul>
<li>法令違反</li>
<li>プライバシー侵害</li>
<li>他社サービスへの誘導</li>
<li>
</ul>
-->画面を見ると表示が消えているので「これで一件落着」と思いきや、開発者ツールを見ると、、


コメントアウトした記述が閲覧できてしまいます、、。
これだと実務では問題です。
普段は「Command + /」のショートカットキーでコメントアウトしていたのですが、ERBテンプレートではこれも機能しなかったため、やり方がわかりませんでした。
解決策
実務で使えるやり方として次の3つを紹介します。
- 1行ずつ
<%# %>で囲う <% if false %>〜<% end %>で囲う<% =begin %>〜<% =end %>で囲う
順番に説明をくわえます。
1. 1行ずつ<%# %>で囲う
<%# %>を使うと1行をコメントアウトできるんですが、これを愚直にすべての行に適用するやり方です。
<%# <b>規約違反となるケース</b> %>
<%# <ul> %>
<%# <li>法令違反</li> %>
<%# <li>プライバシー侵害</li> %>
<%# <li>他社サービスへの誘導</li> %>
<%# <li> %>
<%# </ul> %>これで画面上も開発者ツール上からも表示は消えます。
2. <% if false %>〜<% end %>を使う
2つ目は<% if false %>, <% end %>を使うやり方です。
条件式が常にfalseとなるif文で囲うことで、実質的にコメントアウトと同じ役割をはたします。
<% if false %>
<b>規約違反となるケース</b>
<ul>
<li>法令違反</li>
<li>プライバシー侵害</li>
<li>他社サービスへの誘導</li>
<li>
</ul>
<% end %>個人的には、パッと見ではコメントアウトだと分かりにくいので微妙だと思っています。
ですが実装の途中で一時的にコメントアウトしたい場合にはすごく簡単なので、よく使っています。
3. <% =begin %>〜<% =end %>を使う
Rubyでは=beginと=endで囲むとその中をコメントアウトできる(埋め込みドキュメント)ので、これをERBテンプレートで使う方法です。
<%
=begin %>
<b>規約違反となるケース</b>
<ul>
<li>法令違反</li>
<li>プライバシー侵害</li>
<li>他社サービスへの誘導</li>
<li>
</ul>
<%
=end %>ただしこの書き方を採用する場合、=beginと=endはかならず行の一番左に書く必要があります↓


インデントがぶち壊しになるので抵抗がありますが、一方でコメントアウトの箇所が一目瞭然になるので、これはこれでアリとも言えます。
おわりに
この記事ではERBテンプレート内で複数行のコードをコメントアウトする方法を3つ紹介しました。
最後にもう一度おさらいです。
- 1行ずつ
<%# %>で囲う <% if false %>〜<% end %>で囲う<% =begin %>〜<% =end %>で囲う
「あれ、コメントアウトどうやるんだっけ?」となりやすいので、しっかり思い出せるようにしておきましょう。
また、以下の記事ではワンランク上のRailsエンジニアになりたいと考えている方向けにおすすめの技術書を紹介しています。
こちらの記事もぜひ読んでみてください。




![[改訂新版]プロになるためのWeb技術入門の画像イメージ](https://kazuya-engineer.com/wp-content/uploads/2024/12/[改訂新版]プロになるためのWeb技術入門.001-300x169.jpeg)




コメント