Ruby on Railsのcontent_tagの使い方を解説【初心者向け】

初心者向けにRuby on Railsのcontent_tagの使い方について解説しています。Railsのビューヘルパーであるcontent_tagでできること、基本の書き方、HTML生成の例を見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

Ruby on Railsのcontent_tagの使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。

 

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

content_tagの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

目次

 

railsのcontent_tagとは?

content_tagはRailsに組み込まれているビューヘルパーの1つですが、HTMLを意識して記述することが出来るメソッドです。tagメソッドはHTMLでbrタグなどの値の無いタグを表示したい場合に使われ、文字列などの値のある要素を生成する場合にはcontent_tagが使われます。

さらに、form_tagはお問い合わせフォームやログインフォームなどの本体の値を渡したい場合に使用していきます。Railsのプログラミングの中でHTMLを記述する場合にはerbファイル内に%を付けて記述していくことになります。

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

content_tagでできること

content_tagはHTMLのp要素やdiv要素などの要素以外にもidやclassなどの属性を指定して渡すことも出来ます。

content_tagはblockの中でも使用することが出来るため、HTMLのdivタグなどで囲ったテキスト表示をeach doなどのブロックの中に記述することができます。

またcontent_tagを入れ子構造にして要素を生成することも可能です。

 

content_tagの書き方

content_tagは、

content_tag(:要素名 ”テキストなど本体の値”)

という構造になっています。

この時、一緒に「id: :name」や「class: :body」と併記することで属性を指定することもでき、HTMLを意識した記述が簡単に出来るようになります。

 

実際に書いてみよう

erbファイルに以下を記述します。

<% 3.times do %>
<%= content_tag(:p,"test") %>
<% end %>

rails sで実行した場合に、HTMLでは以下のように生成されています。

こちらは各ブラウザのデベロッパーツールで確認をしていきましょう。

<p id="name">test</p>
<p id="name">test</p>
<p id="name">test</p>

ブラウザ画面では以下のように表示されていれば成功です。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。