😽

配列の有無でスタイルを切替える（`release-list`命名・BEM）

に公開
Rails
Ruby
Scss
erb
tech

1) ERB（index.html.erb）

<%# 一度だけ真偽をキャッシュ %>
<% has_secondes = menus_secondes.present? && menus_secondes.flatten.any? %>

<div class="release-list">
  <%# 配列が空(false)のときだけ --pad を付与して余白を確保 %>
  <header class="release-list__head <%= 'release-list__head--pad' unless has_secondes %>">
    <h1 class="release-list__head__title">公開予定リスト</h1>
  </header>

  <% if has_secondes %>
    <section class="release-list__publish">
      <% 5.times do |i| %>
        <% category_menus = Array(menus_secondes[i]) %>
        <% next if category_menus.blank? %>

        <div class="release-list__publish__category" data-category="<%= i %>">
          <% if (first_menu = category_menus.first).present? %>
            <% days_until_open = first_menu['open_day'].to_i %>
            <% publish_on = current_user.created_at.to_date + days_until_open %>

            <article class="release-list__card">
              <p class="release-list__label">次回公開予定</p>

              <div class="release-list__info">
                <div class="release-list__info__icon">
                  <% if (icon = first_menu.dig('images', 'icon')).present? %>
                    <%= image_tag icon, alt: first_menu['name'].to_s, loading: 'lazy' %>
                  <% end %>
                </div>
                <div class="release-list__info__name">
                  <%= link_to first_menu['name'], fortune_pre_path(itemcd: first_menu['itemcd']) %>
                </div>
              </div>

              <p class="release-list__date">公開予定日: <%= l(publish_on, format: :long) %></p>
            </article>
          <% end %>
        </div>
      <% end %>
    </section>
  <% else %>
    <section class="release-list__empty">
      <p>現在、公開予定のメニューはありません。</p>
    </section>
  <% end %>
</div>

2) SCSS（release_list.scss など）

.release-list {
  &__head {
    padding-top: 0;

    &--pad { padding-top: 10%; }

    &__title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.4;
    }
  }

  &__publish {
    margin-top: 1.5rem;

    &__category { margin-bottom: 1rem; }
  }

  &__card {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: .5rem;
    background: #fff;
  }

  &__label { font-weight: 700; margin-bottom: .5rem; }

  &__info {
    display: flex; gap: .75rem; align-items: center;

    &__icon img { width: 48px; height: 48px; object-fit: cover; }
    &__name a  { text-decoration: underline; }
  }

  &__date  { margin-top: .5rem; color: #666; }
  &__empty { margin-top: 2rem; color: #777; }
}

リネーム方針（置換マップ）

  • ルートブロック：unverified-free → release-list
  • ヘッダー：unverified-free__head → release-list__head
  • 余白修飾子：unverified-free__head--pad → release-list__head--pad
  • 公開枠：unverified-free__publish* → release-list__publish*
  • カード：unverified-free__publish__menu 相当 → release-list__card
  • ラベル／情報／日付：__menu__title 等 → release-list__label / release-list__info / release-list__date
  • 空表示：unverified-free__empty → release-list__empty

「リスト」を主役にした命名（release-list）で目的が明確になり、Zenn記事でも読み手が直感的に理解しやすくなります。
見た目の切替は --pad 修飾子 で表現、ロジックは has_secondes で一度だけ判定、がポイントです。

Discussion