Markaby

概要

Markaby（Markup as Ruby）は、HTMLをRubyのDSLとして記述できる革新的なテンプレートエンジンです。HTMLタグをRubyのメソッドとして扱うことで、マークアップの生成をプログラマティックに行うことができます。

インストールと設定

gemのインストール

gem install markaby

基本設定

require 'markaby'

# 基本的な設定
Markaby::Builder.set(:indent, 2)
Markaby::Builder.set(:auto_validation, true)

基本構文

HTML生成の基本

mab = Markaby::Builder.new do
  html do
    head do
      title "Markabyの例"
    end
    body do
      h1 "Hello, World!"
      p "これはMarkabyで生成されたページです。"
    end
  end
end

puts mab.to_s

属性の指定

div class: 'container', id: 'main' do
  img src: '/images/logo.png', alt: 'ロゴ'
  a href: '/home', class: 'link' do
    text 'ホームへ戻る'
  end
end

クラスとIDの指定

ドット記法とシャープ記法

# クラスの指定
div.container.main do
  p.text.bold "太字テキスト"
end

# IDの指定
div#header do
  h1#site-title "サイトタイトル"
end

# 組み合わせ
div.container#main.wrapper do
  # 内容
end

制御構文

条件分岐

div.user-profile do
  if @user.admin?
    span.badge "管理者"
  end
  
  unless @user.bio.empty?
    p.bio @user.bio
  end
end

ループ処理

ul.items do
  @items.each do |item|
    li.item do
      span.name item.name
      span.price "$#{item.price}"
    end
  end
end

ヘルパーメソッド

カスタムヘルパーの定義

module MarkabyHelpers
  def user_card(user)
    div.user_card do
      img src: user.avatar_url
      h3 user.name
      p user.bio
    end
  end
  
  def format_date(date)
    time datetime: date.iso8601 do
      date.strftime('%Y年%m月%d日')
    end
  end
end

Markaby::Builder.include MarkabyHelpers

レイアウトとパーシャル

レイアウトの作成

layout.rb

def layout(&block)
  Markaby::Builder.new do
    html do
      head do
        title @page_title
        link rel: 'stylesheet', href: '/css/main.css'
      end
      body do
        div.container do
          render partial: 'header'
          div.content &block
          render partial: 'footer'
        end
      end
    end
  end
end

パーシャルの使用

def header
  Markaby::Builder.new do
    header.main-header do
      nav do
        ul do
          li { a 'Home', href: '/' }
          li { a 'About', href: '/about' }
        end
      end
    end
  end
end

フォーム作成

基本的なフォーム

form action: '/users', method: 'post' do
  div.form-group do
    label for: 'name' do
      text '名前'
    end
    input type: 'text', id: 'name', name: 'user[name]'
  end
  
  div.form-group do
    label for: 'email' do
      text 'メールアドレス'
    end
    input type: 'email', id: 'email', name: 'user[email]'
  end
  
  button type: 'submit' do
    text '送信'
  end
end

セキュリティ

XSS対策

• text メソッドによる自動エスケープ
• raw メソッドでエスケープ解除
• 信頼できるデータの扱い方

パフォーマンス最適化

キャッシュ戦略

• ビューのキャッシュ
• フラグメントキャッシュ
• 部分的な更新

デバッグとトラブルシューティング

デバッグテクニック

• puts mab.to_s での出力確認
• HTML検証
• エラートレース

Rails統合

Railsでの使用

config/initializers/markaby.rb

Rails.application.config.generators.template_engine = :markaby

# app/views/users/index.mab
collection @users do |user|
  div.user do
    h2 user.name
    p user.email
  end
end

テスト

ビューのテスト

require 'test_helper'

class UserViewTest < ActionView::TestCase
  test "renders user profile" do
    mab = Markaby::Builder.new do
      render partial: 'users/profile', locals: { user: @user }
    end
    
    assert_select mab.to_s, 'div.user-profile'
    assert_select 'h1', @user.name
  end
end

ベストプラクティス

コード整理

• 適切なモジュール分割
• ヘルパーの活用
• DRYな構造化

命名規則

• クラス名の規則
• ID名の規則
• メソッド名の規則

APIリファレンス

主要なメソッド

• text
• raw
• render
• capture
• to_s

コミュニティリソース

ドキュメント

• 公式ドキュメント
• チュートリアル
• サンプルプロジェクト

サポート

• GitHubイシュー
• Stack Overflow
• コミュニティフォーラム