【Rails】Progateをslim化する上で詰まった箇所と解決法
はじめに
コードを自分のエディタ上でも書いていく、俗に言う写経をよく行っているのですが、単純に丸写しするのではなく、erbをslim化して記述するという一手間加えた学習を最近はやっています。
今回はProgateのコードをslim化する上で詰まった箇所と解決法、学習の目的についてメモします。
slim化する目的
ProgateやRailsチュートリアルでは、ERBにhtmlをそのまま書いていきますが、開発の現場ではHamlやslimといった別のテンプレートエンジンを使って記述していくようです。（書籍調べ）
これからRailsエンジニアとして就業する上で、slim化されたコードをスラスラ読みこなして、使いこなせるようになっておく事は、就業後のインプットをスムーズに行う上で役立ちそうだというのが学習の動機です。
ProgateのRails学習コースは以前に二度ほど行なっていますが、理解があやふやだったり、よく分からなかったら流していた部分もあったので、今改めて理解できるようになっておきたいという欲もあります。
また、デプロイ前提でコードを書いていく事で、あわよくばポートフォリオにするという一石二鳥も狙っています。
詰まった箇所と解決方法
<div class="content"> </div>
.content
基本ですがdivをそのまま書いてしまって、上手く読みこめない事がありました。classの部分が「.」になる、divタグは外すと覚えておけば良さそうです。
<% @posts.each do |post| %> <div class="posts-index-item"> <%= post.content %> </div> <% end %>
-@posts.each do |post|
.posts-index-item
=post.content
「%」は「-」に置き換えられ末尾の%の記述も不要です。同様に「%=」は「=」と書く事ができます。
ちなみに閉じタグの<% end %>はインデントで指定しているようなので、適当に書くとscssの適用がおかしくなり、レイアウトが滅茶苦茶になってしまいます。これを知らなかったのでcssの指定が上手くいっていないと勘違いしていました。
<div class="main posts-show"> </div>
.main.posts-show
クラスが「.」なので複数存在する時は一つずつ「.」でクラス指定します。
<%= link_to(post.content, "/posts/#{post.id}") %>
= link_to post.content, "/posts/#{post.id}"
「%=」を「=」にするのは同じですが、「( )」を外す事ができます。
<%= form_tag("/posts/create") do %> <div class="form"> <div class="form-body"> <textarea name="content"></textarea> <input type="submit" value="投稿"> </div> </div> <% end %>
= form_tag("/posts/create") do
.form
.form-body
textarea name="content"
input type="submit" value="投稿"
長い記述もスッキリと書く事ができました。
まとめ
初めは慣れていない記述に苦しみましたが、慣れてしまうとこれ以外考えられないくらい、見やすくて合理的な事に気づきます。インテンドに注意を払う必要はありますが、閉じタグを書かなくていいだけでコードが大分スッキリして見えます。今回だけではなくこれからも使っていきたい記述法です。
