概要
本記事は、初学者がRailsを使ってToDoリストを作成する過程を記したものです。
私と同じく初学者の方で、Railsのアウトプット段階でつまづいている方に向けて基礎の基礎を押さえた解説をしております。
抜け漏れや説明不足など多々あるとは思いますが、読んでくださった方にとって少しでも役に立つ記事であれば幸いです。
環境
-
Homebrew: 2.5.10-> MacOSのパッケージ管理ツール -
ruby: 2.6.5p114-> Ruby -
Rails: 6.0.3.4-> Rails -
node: 14.3.0-> Node.js -
yarn: 1.22.10-> JSのパッケージ管理ツール -
Bundler: 2.1.4-> gemのバージョン管理ツール
$ brew -v => Homebrew 2.5.10
$ ruby -v => ruby 2.6.5p114
$ rails -v => Rails 6.0.3.4
$ npm version => node: '14.3.0'
$ yarn -v => 1.22.10
$ Bundler -v => Bundler version 2.1.4
第２章 hamlの導入と書き方
第２章では、Railsでアプリ開発をする時にhamlテンプレートを使えるように設定していきます。
Railsはデフォルトはerbテンプレートが使われていますが、erbテンプレートは使いづらい上に、現場レベルでもあまり使われていない(らしい)ので、今回の開発においてはhamlテンプレートを使っていきたいと思います。
1 hamlの導入
まずは、hamlテンプレートをRailsで使えるようにしていきます。
hamlitというgemとerb2hamlという変換ツールのgemをインストールします。
gem 'hamlit'
group :development do
gem 'erb2haml'
end
🙋♂️
hamlitというgemをインストールしてください
🙋♂️erb2hamlというgemをインストールしてください
ターミナルで$bundle installを行えばgemのインストールは完了です。
既存のerbファイルをhamlに置き換えるためにはターミナルにて以下のコマンドを実行する必要があります。
$ bundle exec rake haml:replace_erbs
⚠︎hamlitをインストールしてエラーが起こってしまった場合は$rails sでサーバを立ち上げ直しましょう
以上でRailsの開発においてhamlテンプレートを使うことができるようになりました。
次は、実際にhamlの書き方を見ていきます。
2 hamlの基本ルール①
① タグの書き方
<header>
<p></p>
</header>
%header
%p
- hamlでは閉じタグが必要ない
- 入れ子構造にする際はスペースキーを２回押すこと
② class／id／attributeの書き方
<header class="header">
<p id="id"></p>
<a href="https://haml.com"></a>
</header>
%header.header
%p#id
%a{href: "https://haml.com"}
- classは
.class名で指定する - idは
#id名で指定する - attributeはハッシュで指定する
③divタグの書き方
<div class="container"></div>
.container
- divタグを作成したい時はタグの表記は必要ない。hamlが勝手に察してdivタグを付けてくれる
3 hamlの基本ルール②
①Rubyのコードの埋め込み(画面に表示する場合)
<%= board.title %>
= board.title
- <%=%>を表現する際は
=を使う
②Rubyのコードの埋め込み(画面に表示しない場合)
<% Board.all.each do |board| %>
<%= board.title %>
<% end %>
- Board.all.each do |board|
= board.title
- <%%>を表現する際は
-を使う - <% end %>はhamlが勝手に付けてくれる
※もしhamlの書き方がわからなくなったら下記のサイトで確認しましょう。