こんにちは！まろんぼーいです。
今回の記事は、Rails内でのHTML、CSS、Rubyの使い分け、書き方についてのメモです。
このブログでは、過去に完全初心者の僕が作った（しょぼい）Webアプリを参考に、
初心者なりに試行錯誤しながらその改良版を作っていく過程をお見せしています。
このシリーズを追っていくだけで、初心者なりのRailsを使ったWebアプリの作り方が見ていただけると思います。
同じ初心者の方の参考になればうれしいです！
〇HTML、CSS、Rubyの使い分け
Ruby on Railsでは、主にRuby、HTML、CSSの三つの言語を扱います。
（応用でJavascriptも使いますがとりあえず置いときます）
プログラミングスクールに入って体系的に学ぶ前、
正直この3つの言語の違いさえわかりませんでした。
なので、Railsをやる際に3つの言語を扱うと聞いても、
「同じアプリの中で3つの言語？はい？どうやって？」
と思っていました（笑）。
なので、同じような方がいた場合を考え違いを書いておきます。
Rubyはいわゆるサーバーサイドの言語です。
つまり、サーバー内のデータを扱う言語です。
超簡単にかみ砕くと、僕たち人間が見えない、パソコンの中で実行してるコードです。
Railsでいうと、
Modelはサーバのデータのファイルなのでモロサーバサイドですよね。
また、アプリにアクセスしてる人は、データの中身を直接見ることができません。
なので、Rubyで書きます。
ちなみにRubyは「～.rb」で表します。
ControllerとRouterも、アプリ内の行動とModelを結び付けるファイルたちなので、
アクセスしている人からは見えません。
よってこちらもRubyで書きます。
さて、次にViewですが、こちらはアプリのレイアウトでした。
これは、アクセスしている人、つまりアプリを使っている人から見ることができます。
このように、実際にアクセスしているユーザが見る部分を各言語を、
フロントエンドの言語といいます。
フロントエンドの言語が、HTML（～.html）とCSS（～.css）です。
HTMLは良く知られていますが、文字を書くコードです。
対してCSSは、HTMLで作った文字たちをデザインする言語です。
色や詳細な配置を決めたりする言語です。
〇HTMLファイル内でのRubyコードの挿入
Viewファイルは、「～.html.erb」のファイルとなります。
「～.html.erb」は、「Rubyファイルで定義した変数などを、HTMLで表示させるファイル」です。
「～.html」だと、ただの文字のみのファイルです。
これを「～.html.erb」にすると、例えばRubyファイルであるControllerで定義したものを、挿入することができます。
ではどのように挿入するのかというと、
Viewファイル内において、「<%=」と「%>」または「<%」と「%>」で囲うことでRubyを適用することができます。
「<%= ○○ %>」と「<% ○○%>」の違いは、○○をアプリ内で表示するか否かです。
「<%= ○○ %>」とすれば○○は表示
「<% ○○ %>」とすれば○○は非表示
となります。
例えばViewファイル（○○.html.erb）で以下のコードが記述されているとします。
|
1 |
<span><%= user.name %></span> |
<span>で囲われている部分はインライン要素といい、改行されない文字列としてページに表示されるものです。
この<span>で囲われた部分を見ると、「user.name」が「<%=」と「%>」で囲われています。
「user.name」はRubyの表現で、「userにおけるnameの項目」を示します。
これによって、Rubyの働きでuser.nameに格納されていた文字列を、HTMLファイル内で表示できるのです（「<%= ○○ %>」の形なので表示されます）。
