BETA

Railsオリジナルアプリを作りたい!18(Slim編)

投稿日:2019-05-07
最終更新:2019-05-07

100DaysOfCode 63/100

今日やること

  • オリジナルアプリのviewファイル(erb)をSlimで書き直す

はじめに

しばらくRails Tutorialに注力していたので、久々のオリジナルアプリ開発です。

GW中は、数冊の本を読んでインプットを行っていました。
(これまでずっとアウトプット先行で進めていたため、知識不足による不便を感じる機会が多かったのが大きな理由です)

その中の一冊が「現場で使えるRuby on Rails5 速習実践ガイド」で、Rails Tutorialにも通ずる範囲を扱いつつ、より実践的な要素(RSpec、Ajaxなど)も含んだわかりやすい本でした。

まだザックリとしか読めていないのですが、本文中で扱われているSlimというテンプレートエンジンがとても便利そうだったため、今回は実際に使ってみたいと思います。

そもそもSlimって?

  • erbと同じく、「HTML + Rubyコード」のViewを記述するためのテンプレートエンジン
  • Haml、Slimなどのテンプレートエンジンが実際の開発でよく使われている(らしい)
  • erbのようにタグで括るのではなく、ツリー構造で括ることができるので簡潔

今後の機能拡張を進めやすくするためにも、早めに導入してしまいましょう!

gemの追加

gemの追加もちょっと久しぶりです。
Gemfileに、

gem 'slim-rails'  
gem 'html2slim'  

この2つのgemを追加します。

1つ目はslimのジェネレータ機能を提供するgem、2つ目はerbをslimに変換してくれるgemです。

いつものようにbundle installでインストールすると、以降に作成されるviewファイルがslimに変わります

しかし、現時点でerbで作成済のファイルについては変更されません。
さきほどインストールしたhtml2slimerb2slimコマンドを用いて、slimへの変換を行いましょう。

bundle exec erb2slim app/views/ --delete  

最後の--deleteは、既存のerbファイルを削除するオプションです。今後はslimを用いるため、思い切って削除してしまいましょう。

大量のerbファイルがslimファイルに変換されています!

slimの記法(HTML部分)

それでは、ファイルの中身を確認してみましょう。

- provide(:title, 'ユーザー登録')  
.content-wrapper  
  .content-container  
    .content-text  
      h1  
        | Welcome to Midia!  
      p  
        | 新規登録(無料)して利用を開始しましょう。  
      .user-form-container  
        .user-form  
          = render 'layouts/signup'  

まずはシンプルなユーザー登録ページです。

いきなり見るとちょっと面食らいますね!
rails sして、ブラウザでソースを確認してみましょう。

<div class="content-wrapper">  
  <div class="content-container">  
    <div class="content-text">  
      <h1>Welcome to Midia!</h1>  
      <p>新規登録(無料)して利用を開始しましょう。</p>  
      <div class="user-form-container">  
        <div class="user-form">  
.  
.  
.  

この通り、slimでは<div>タグは豪快にもクラスやid名だけに省略されます。
インデントによる階層構造は、シンプルになったことでむしろ分かりやすくなっていますね!閉じタグが迷子になってしまうこともなくなります。

|というのは、テキストが複数行にまたがることを示す記号です。

p  
  |  
    あいうえお  
    かきくけこ  
    さしすせそ  

このように表記すれば、

<p>あいうえおかきくけこさしすせそ</p>  

こうなります。長い文章が入る場合などはとても見やすくなりそうです。

      h1  
        | Welcome to Midia!  
      p  
        | 新規登録(無料)して利用を開始しましょう。  

上記のこの表記については、

      h1 Welcome to Midia!  
      p 新規登録(無料)して利用を開始しましょう。  

このように1行で表記することも可能です。
html2slimによる自動変換では|が用いられるようですが、気になる場合は手動でリファクタリングするとよりスッキリするかもしれませんね。

slimの記法(Ruby部分)

HTMLの簡略化という意味でも十分に有用ですが、真骨頂はRubyによる動的なロジック部分の記法です。

erbだと<% %>で括るのがちょっと億劫でした……。

- if logged_in?  

- else  
  .top-wrapper  
    .top-header  
      = render ('layouts/header')  
    .top-container  
      .jumbotron  
        h1  
          | Let's Make a MUSIC!!  
        p  
          | DTMをもっと楽しめるサービス「midia」にようこそ。  
        p  
          | 音楽制作のテクニックを「読んで、聴いて、書いて」共有しましょう。  
      .top-user-form  
        = render 'layouts/signup'  

このコードでは、ログインしている場合にはトップページにサービス紹介と会員登録フォームを表示しないという処理を行っています。

なんとif文を閉じるendすらありませんね!

-は、erbでいう<% %>です。条件式など、画面上に出力しないものに使います。

- provide(:title, @article.title)  
.content-wrapper  
  .content-container  
    .content-text  
      h1  
        = @article.title  
      p  
        = simple_format(@article.content)  

このコードは記事表示画面です。
記事のタイトルtitleと本文contentを出力するために、=を用いています。
これがerbの<%= %>相当ですね。

  • -<% %>(画面に出力しない処理に使う)
  • =<%= %>(画面に出力する処理に使う)

非常にシンプルで、文字通りスリムに書けます!

おわりに

プレーンなHTMLに慣れた身からすると確かにerbの方が見た目は取っつきやすいのですが、煩雑なタグの記述をかなり簡略化できるので保守性、拡張性が大幅にアップしそうです。

今後も便利なgemや技術を取り入れて、実践的な開発に少しでも近づいていけるように頑張ります。

次回以降やること

  • Rails Tutorial13章の続き
  • オリジナルアプリのテストをRSpecで書き直す(テストの書き方を今一度学ぶ)

Everyday Rails」を読んでRSpecの有用性やテストの書き方を学んだので、こちらも実際に手を動かしてみて学習したいと思っています!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@tammcの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!