Slimにおいて、コメントアウトが原因で表示されない箇所があった問題

結論

Slimのコメントアウトの仕様を理解していなかったため、コメントアウトが想定外に適用されてしまっていた

状況

• 一見して構文としては間違っていないはずなのに表示されない部分がある
• この問題に直面する前、別件のエラーがあり対応をしていた
  • そのエラーの調査のためにコメントを追加したり少し手を加えていた

詳細

• 以下のようにコメントを追加していた
  • / not error START、/ not error END というコメントを追加してエラー箇所を絞り込むように調査していたためこのようなコメントが残っていた

1. 単に「コード説明目的のコメント」として使いたかった
2. コメントが見やすいように一番左に寄せて書いた

サンプルコード

article.blog-post
  h1.blog-title AIを使ったコード生成：プログラミングの新時代

  section.published-at
    time
      = l(article.published_at? ? article.published_at.to_date : Time.current.to_date, format: '%Y年%-m月%-d日')

/ not error START
  
  .author-info
    img.author-avatar src="path_to_avatar.jpg" alt="著者のアバター"
    p.author-name テックブロガー 田中

/ not error END

  .post-content
    p.introduction
      | こんにちは、テックブロガーの田中です。今日は、最近話題のAIによるコード生成について紹介します。

    h2#what-is-ai-code-gen.section-title AIコード生成とは？
    p
      | AIコード生成とは、人工知能を使って自動的にプログラミングコードを生成する技術のことです。
      | これにより、開発者は基本的な構造やアルゴリズムの実装に費やす時間を節約し、より創造的な問題解決に集中できるようになります。

    h2#code-example.section-title コード生成の例
    p
      | 例えば、Pythonで簡単な電卓プログラムを作りたい場合、AIに以下のようなコードを生成させることができます：

※この記事ようにAIで生成してもらってサンプルコードなので、その点はご了承ください

解説

• Slimはインデントで階層（深さ）を表現している点に注意が必要
  • yaml ファイルなどと同じ
  • 親子関係がある
• 今回の問題は『コメントアウトが下位層にも適用されてしまっていた』のが原因だった
  • 階層があるため上位層に適用したことは下位階層にも適用されるという事を念頭に置く必要があった
• vscode では下位層にコメントアウトが適用されたかは分からない（文字が灰色にならない）

コードを踏まえて

• 実際は以下のように適用されていた

article.blog-post
  h1.blog-title AIを使ったコード生成：プログラミングの新時代

  section.published-at
    time
      = l(article.published_at? ? article.published_at.to_date : Time.current.to_date, format: '%Y年%-m月%-d日')

/ not error START
/  
/  .author-info
/    img.author-avatar src="path_to_avatar.jpg" alt="著者のアバター"
/    p.author-name テックブロガー 田中
/
/ not error END
/
/  .post-content
/    p.introduction
/      | こんにちは、テックブロガーの田中です。今日は、最近話題のAIによるコード生成について紹介します。
/
/    h2#what-is-ai-code-gen.section-title AIコード生成とは？
/    p
/      | AIコード生成とは、人工知能を使って自動的にプログラミングコードを生成する技術のことです。
/      | これにより、開発者は基本的な構造やアルゴリズムの実装に費やす時間を節約し、より創造的な問題解決に集中できるようになります。
/
/    h2#code-example.section-title コード生成の例
/    p
/      | 例えば、Pythonで簡単な電卓プログラムを作りたい場合、AIに以下のようなコードを生成させることができます：

補足

本件は以下と同じ

• 先述の通り、このようなコメントアウトの方法だとエディタツールでは文字が灰色にならないため適用範囲が分かりにくい

  /
  
    .author-info
      img.author-avatar src="path_to_avatar.jpg" alt="著者のアバター"
      p.author-name テックブロガー 田中
  
    .post-content
      p.introduction
        | こんにちは、テックブロガーの田中です。今日は、最近話題のAIによるコード生成について紹介します。
  
      h2#what-is-ai-code-gen.section-title AIコード生成とは？
      p
        | AIコード生成とは、人工知能を使って自動的にプログラミングコードを生成する技術のことです。
        | これにより、開発者は基本的な構造やアルゴリズムの実装に費やす時間を節約し、より創造的な問題解決に集中できるようになります。
  
      h2#code-example.section-title コード生成の例
      p
        | 例えば、Pythonで簡単な電卓プログラムを作りたい場合、AIに以下のようなコードを生成させることができます：
  

【検証】

検証

以下のケースを試してみた

• コメントの空白行を削除
  • 補足のコードと何も変わらない

  /
    .author-info
      img.author-avatar src="path_to_avatar.jpg" alt="著者のアバター"
      p.author-name テックブロガー 田中
  
    .post-content
      p.introduction
        | こんにちは、テックブロガーの田中です。今日は、最近話題のAIによるコード生成について紹介します。
  
      h2#what-is-ai-code-gen.section-title AIコード生成とは？
      p
        | AIコード生成とは、人工知能を使って自動的にプログラミングコードを生成する技術のことです。
        | これにより、開発者は基本的な構造やアルゴリズムの実装に費やす時間を節約し、より創造的な問題解決に集中できるようになります。
  
      h2#code-example.section-title コード生成の例
      p
        | 例えば、Pythonで簡単な電卓プログラムを作りたい場合、AIに以下のようなコードを生成させることができます：
  

• / はインデント無しで左寄せのまま、一部要素と同じ行にする
  • 冒頭のサンプルコードと一緒
  • 問題なのは / が最上位層にあるのがダメ

  / .author-info
      img.author-avatar src="path_to_avatar.jpg" alt="著者のアバター"
      p.author-name テックブロガー 田中
  
    .post-content
      p.introduction
        | こんにちは、テックブロガーの田中です。今日は、最近話題のAIによるコード生成について紹介します。
  
      h2#what-is-ai-code-gen.section-title AIコード生成とは？
      p
        | AIコード生成とは、人工知能を使って自動的にプログラミングコードを生成する技術のことです。
        | これにより、開発者は基本的な構造やアルゴリズムの実装に費やす時間を節約し、より創造的な問題解決に集中できるようになります。
  
      h2#code-example.section-title コード生成の例
      p
        | 例えば、Pythonで簡単な電卓プログラムを作りたい場合、AIに以下のようなコードを生成させることができます：
  
  

参考サイト＆参考記事