はじめに

この記事は、プログラミング学習を始めたての方、
特にRuby on Railsを独学やスクールで書いているが、
「ビューファイルの構造や書き方がいまいちわからない」
という方向けの記事です。

基本的な内容だけを扱うので、初心者の方向けの記事になります。

例えば、

html.rubyファイルと普通のrubyファイルやhtmlファイルの違い
<% %> と <%= %> の違い

などを述べます。

私自身もまだまだ初心者なので、この記事に間違いがあればご指摘いただけると幸いです。

記事を書こうと思った背景

この記事を書こうと思った背景は、
私自身、スクールに通っていたときに教材をコピペして勉强していて、
rubyとhtmlが一体となったビューファイルの仕組みや書き方がよくわかっていなかった経験があるからです。

この記事が、同じ状況の方の理解の助けになれば良いなという思いで記事を書きました。

HTMLとは

HTMLとは、簡単に言うとWEBページを作成するためのマークアップ言語です。
マークアップ言語であって、プログラミング言語とは呼ばないことのほうが多い印象があります。

Webページの見た目を作っている言語なんだと認識しておけば良いかなと思います。

拡張子は「html」です。具体的には、以下のように記述します。

example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    a = 3
    b = 4
    c = a + b
    <p>p c</p>
</body>
</html>

このファイルを実際に開いてみると、以下のような画面が表示されることが確認できます。

このように、Webページの見た目を作る言語がhtmlです。

a = 3 などの記述があり、それが文字列としてそのまま出力されていることが分かります。
（ a に 3 が代入されたり、 b に 4 が代入されたりしていません。）
※これをrubyやhtml.rubyとの比較対象にするので、少し頭に入れておいてください。

これ以上詳しい内容は、この記事の目的からそれてしまうので省略します。

Rubyとは

Rubyはプログラミング言語の一つです。
作者は、Matzこと「まつもと　ゆきひろ」さんです。

Rubyの公式ページによると、
まつもとゆきひろさんは、好みの言語(Perl、Smalltalk、Eiffel、Ada、Lisp)の一部をブレンドし、
関数型プログラミングと命令型プログラミングが絶妙に調和された新しい言語を作ったそうです。

Rubyは動的型付け言語であり、柔軟な書き方ができるのが特徴です。

拡張子は「rb」です。例えば、以下のように記述します。

example.rb

p "Hello World!"
a = 3
b = 4
c = a + b
p c

ターミナルで

$ ruby example.rb

を実行すると、以下のように出力されます。
ここで、「p」はその後に続くものを出力する（＝表示する）処理です。

"Hello World!"
7

htmlのときとは違って、

a に 3 が代入される
b に 4 が代入される
c に a + b, つまり 3 + 4 = 7 が代入される

というように、計算が行われていることが分かります。
rubyではこのように、コードを文字列として扱うだけでなく、四則演算やその他複雑な処理ができます。

これ以上詳しい内容は、この記事の目的からそれてしまうので省略します。

HTMLとRubyが一体となったファイルとは

HTMLとRubyが一体となったファイルは、
Webページ上で何かしらの処理が行えるようにしたいときに使います。

何かしらの処理とは、計算したり、文字数をカウントしたり、などといった
プログラミングでできるような処理です。

例えば、先程確認したように、
HTMLだけでは四則演算やその他の複雑な処理は行えませんでしたが、
Rubyはそのような処理が行なえます。

そこで、HTMLにRubyを埋め込みます。

Ruby on Railsなどでは、RubyをHTMLに埋め込んで記述することが多いです。

拡張子は「html.erb」です。例えば、以下のように記述します。
※ここでは、とても簡単な例を示します。これより複雑な例は、後で示します。

example01.html.erb

<% a = 3 %>
<%= a %>
a

このコードを見ると、<% %>で囲まれたものと、そうでないものがあることが分かります。

<% %>で囲まれた部分がRubyの記述、
囲まれていない部分がHTMLの記述として処理されます。

これだけ見てもよくわからないと思うので、詳しい記述方法は以下で述べます。

記述方法

私の思う、抑えたいポイントは以下の3つだけです。

Rubyで処理したい部分は<% %>で囲い、Rubyで記述する。
HTMLで処理したい部分はベタ書きし、HTMLで記述する。
<% %> と <%= %> は、画面に出力するかどうかの違い。

この3つを抑えておけば、今まで自分が書いたコードが理解できるようになるはずです。

例えば、以下のように記述します。

example02.html.erb

<h1><%= "Hello World!" %></h1>
<% a = 3 %>
<% b = 4 %>
<% c = a + b %>
<p><%= c %></p>

このファイルをブラウザで表示させると、以下のような画面が表示されることが確認できます。

この画面を見て、以下のようなことに気づくのではないでしょうか。

HTMLだけのときとは違って、a = 3 などが表示されていない
HTMLだけのときのように、文字の大きさが変わっている
Rubyだけのときとは違って、文字の大きさが変わっている
Rubyのときのように、3 + 4 の結果の 7 が表示されている

このように、HTMLとRubｙが一つになったファイルは、

HTMLの良さであるタグを使えるのできれいに表示できる
Rubyの良さである四則演算などの処理を行えるので複雑なことができる

という両方の利点を取り入れた実装が可能になります。

なんとなく理解はできましたか？

もう少し詳しく説明します。

Rubyで処理したい部分は `<% %>` で囲い、Rubyで記述する

今回のファイルをよく見ると、a = 3 などの処理は <% %> で囲まれていることが分かります。

example02.html.erb

<h1><%= "Hello World!" %></h1>
<% a = 3 %>
<% b = 4 %>
<% c = a + b %>
<p><%= c %></p>

これを、<% %>で囲わずに書いたらどうなるでしょうか。
試しに、すべての <% %> を除いてみます。

example03.html.erb

<h1>"Hello World!"</h1>
a = 3
b = 4
c = a + b
<p>c</p>

結果は以下のようになりました。

先程とは違って、HTMLだけのときと同じように a = 3 などもそのまま表示されてしまっています。

このように、
<% %> で囲むことで、
その中のコードがRubyとして処理されることが分かりました。

HTMLで処理したい部分はベタ書きし、HTMLで記述する

example02.html.erb ファイルでは、
HTMLのタグである<h1>や<p>などは <% %> で囲われていません。

example02.html.erb

<h1><%= "Hello World!" %></h1>
<% a = 3 %>
<% b = 4 %>
<% c = a + b %>
<p><%= c %></p>

試しに、<h1>や<p>などのタグも<% %>で囲ってみるとどうなるでしょうか。

example04.html.erb

<%= <h1>Hello World!</h1> %>
<% a = 3 %>
<% b = 4 %>
<% c = a + b %>
<%= <p>c</p> %>

結果は以下の通り、エラーとなってしまいました。

Rubyには<h1>などを処理できないので、構文エラーとなってしまったことがわかります。

このように、
HTMLで記述したい部分やHTMLタグは、
そのまま記述することでHTMLとして処理されることが分かりました。

`<% %>` と `<%= %>` は、画面に出力するかどうかの違い

最後に、ここまでで

Rubyで処理したい部分は<% %>で囲い、Rubyで記述する。
HTMLで処理したい部分はベタ書きし、HTMLで記述する。

ことは分かりましたが、example02.html.erbをよく見ると、
Rubyを囲う記号として<% %>と<%= %>の二種類があることが分かります。

example02.html.erb

<h1><%= Hello World! %></h1>
<% a = 3 %>
<% b = 4 %>
<% c = a + b %>
<p><%= c %></p>

これら2つは、どのような違いがあるのでしょうか。

結論から言うと、<% %> と <%= %> は、画面に出力するかどうかの違いがあります。

<% %>は画面に出力しない処理
<%= %>は画面に出力する処理

です。

つまり、example02.html.erbでは、

Hello Worldは出力する
a, b は出力しない
c の計算過程は出力しない
c は出力する

という記述がされています。
このことに着目して、example02.html.erbの出力をもう一度確認してみましょう。

a や b の、 3 や 4 という数字は表示されず、c の 7 という数字のみが表示されていることが確認できたはずです。

では、example02.html.erbで、a の値を出力したいときにはどうしたら良いのでしょうか。
答えは、以下のようにすればOKです。

example05.html.erb

<h1><%= "Hello World!" %></h1>
<%= a = 3 %>
<% b = 4 %>
<% c = a + b %>
<p><%= c %></p>

a を囲う <% %>を、<%= %>に変更するだけです。
結果を確認してみます。

a の 3　も表示されていることが確認できました。

このように、
<% %>で囲った部分は出力されない。
<%= %>で囲った部分は出力される。
ことが分かりました。

まとめ

最後に、この記事のまとめを書いてこの記事を締めます。

RubyをHTMLファイルに埋め込みたいときは、

拡張子は「html.erb」にする。
Rubyで処理したい部分は<% %>で囲い、Rubyで記述する。
HTMLで処理したい部分はベタ書きし、HTMLで記述する。
<% %> と <%= %> は、画面に出力するかどうかの違いがある。

この記事が少しでも理解を進める手助けとなっていれば嬉しいです。