9/11　今日の学習内容〜テンプレート（ビュー）の基本について学習〜

###今日の学習内容
***
今日は**テンプレート**について学習しました。
テンプレートとはRailsのMVCアーキテクチャにおいて、**ビュー**に当たるものですね( ´ ▽ ` )ﾉ

前にもコードを書き込んだことのある、拡張子が``erb``で終わるファイルになります。
``erb``ファイルは、HTMLにRubyのコードを埋め込んだものです。

これまでの学習で作ったファイルで言えば、``index.html.erb``や``about.html.erb``ですね。

####テンプレートとは
***
先ほど言いました通り、テンプレートとはRailsのMVCアーキテクチャにおいて**ビュー**に当たるものですね。

Railsの処理の流れを今一度確認しますと、コントローラで用意したインスタンス変数をテンプレートに埋め込んで、レスポンスを返すという流れになります( ´ ▽ ` )ﾉ
（他にもモデルを通してデータベースともデータのやり取りをするわけですけれど...）

Railsのリクエスト処理については、以前学習したので、再確認しておきたい方は、こちらをご覧ください↓
>[9/3　今日の学習内容～Railsのリクエスト処理の流れについて学習～](http://qiita.com/shouxuohs/items/2f932dc8a01d0f38fdaa)　 


下記の画像は、以前作った``index.html.erb``の内容です↓


![スクリーンショット 2016-09-11 18.22.53.png](https://qiita-image-store.s3.amazonaws.com/0/137880/f06912c4-8aeb-4a7e-3811-ac50404fb63a.png)

HTMLの``<h1>``タグと``<p>``タグに囲まれている``<%= %>``の中が、Rubyのコードとして解釈され、式の結果が文字列として挿入されます。
ちなみに、``<% %>``でも同じくRubyのコードとして解釈されますが、こちらは代入されるだけで、文字列としての挿入は行われないということに注意が必要です( ´ ▽ ` )ﾉ

以下の練習でも、実際に試してみますので、``<%= %>``と``<% %>``の差について、一応留めておいてくださいね。

　
####実際にコードを書いて学習していきましょう！
***
今回も[cloud9](https://ide.c9.io/)を使って練習をしていきます。

まず、``lesson``コントローラに新しいアクション``practice7``を作ってください。

[cloud9](https://ide.c9.io/)でコントローラとアクションを作ったことがまだない方は、こちらをご覧いただければ、ある程度理解していただけると思います（私が書いたものなので、ちゃんと理解していただけるかは分かりかねますが（笑））↓
>[8/28　今日の学習内容～cloud9でコントローラとアクションの作成！～](http://qiita.com/shouxuohs/items/da910b3ce72505ffffb1)

空のままのアクションでOkです( ´ ▽ ` )ﾉ

```ruby:lesson_controller.rb
def practice7
end
```

を打ち込むだけですね(￣▽￣)

さて、アクションを作ったので、今日の学習の本命である、テンプレート（ビュー）を書いていきましょう！

``アプリケーション名（私の場合asagao）/app/views/lesson``フォルダに、``practice7.html.erb``という名前のファイルを作ってください。

lessonフォルダを右クリックすると、NewFileという項目がありますので、そこからファイルを作成できます( ´ ▽ ` )ﾉ

``practice7.html.erb``ファイルが作成できましたら、そのファイルを開いてHTML文書を書いていきます(*^^*)

![スクリーンショット 2016-09-11 18.56.56.png](https://qiita-image-store.s3.amazonaws.com/0/137880/23bec439-066e-3a1f-26d0-908ae32388d5.png)

上記の画像に注目してください↑

1行目は変数``name``に``25``という文字列を代入するという内容になります。
2行目も同じく変数``name2``に``やったね！！V7！！！``という文字列を代入しています。

``rails s -b $IP -p $PORT``コマンドをターミナルに打ち、実行してRailsサーバを立ち上げましょう！
出てきたURLをクリックし、開いたページのURL欄に``/lesson/practice7``を付け加えてください( ´ ▽ ` )ﾉ

実行画面はこちら↓

![スクリーンショット 2016-09-11 19.53.44.png](https://qiita-image-store.s3.amazonaws.com/0/137880/e7b796c6-9982-43e1-371e-bafe66e064e2.png)

``name``と``name2``に代入された文字列が、``<%= name %>``や``<%= name2 %``と書かれることで表示されています( ´ ▽ ` )ﾉ

ですが、本当に``<% %>``では、表示がされないのかは分からないですよね？
なので、次はすべて``<% %>``に変えてリロードしてみましょう！

変えていきます↓
![スクリーンショット 2016-09-11 19.53.08.png](https://qiita-image-store.s3.amazonaws.com/0/137880/0fd86421-8c33-253e-58cb-31c0e48bc93c.png)

こちらが、変更した後の実行画面です↓

![スクリーンショット 2016-09-11 19.52.48.png](https://qiita-image-store.s3.amazonaws.com/0/137880/2e244fd0-35ca-e3f2-ad42-19c80416ab68.png)

``<h1>``タグの中に書いていた「年ぶりの優勝おめでとう！！」しか表示されませんでしたので、確かに``<% %>``では表示されないことがわかりましたね( ´ ▽ ` )ﾉ

　
####アクションで作ったインスタンス変数をテンプレートに埋め込む！
***
先ほど練習したものでは、テンプレート内での変数を使っていましたが、今回はMVCアーキテクチャーらしく、アクションでインスタンス変数を作り、それをHTMLに埋め込み表示させていきましょう( ´ ▽ ` )ﾉ

```ruby:lesson_controller
def practice7
    @name = "25"
    @name2 = "やったね!!V7!!!"
end
```

↑これでコントローラ側の準備はできました。

次に、先ほど練習に使った``practice7.html.erb``を書き換えていきます。↓

![スクリーンショット 2016-09-11 20.37.05.png](https://qiita-image-store.s3.amazonaws.com/0/137880/154bb034-33c6-0543-1ea4-b4bd21da87cb.png)

これで準備はできました( ´ ▽ ` )ﾉ
ちゃんとセーブ（CtrlとSキーでできます）した後、先ほどの練習の時に開いたページをリロードします。

実行画面↓
![スクリーンショット 2016-09-11 19.53.44.png](https://qiita-image-store.s3.amazonaws.com/0/137880/ca144af4-7cbc-8d51-84e2-31d4de76e0c3.png)

ちゃんとインスタンス変数をHTML文書に埋め込むことが出来ました(*^^*)

###あとがき
*** 
今日はテンプレート（ビュー）の基礎を学習しました。
最初に一度簡単に学習しましたが、[改訂3版基礎RubyOnRails](https://www.amazon.co.jp/dp/4844338153)では、一度簡単に説明しておいて、学習の段階を踏んでいくたびに、少しずつ詳しくなっていく構成のようなので、飽きっぽい人にもオススメです( ´ ▽ ` )ﾉ

あと、カープ優勝しましたね(*^^*)
カープファンの方、おめでとうございます！！
25年、待った甲斐がありましたね( ´ ▽ ` )ﾉ
私にとって、生まれて初めてのカープ優勝ですが、普段あまり見ていなくても、嬉しいものですね(￣▽￣)

V7に因んで、``practice7``になっていたことに気がつきましたでしょうか？
このまま日本一になって欲しいですね♪( ´▽｀)

ここまで読んでいただき、ありがとうございましたm(__)m

###参考にさせていただいたサイトなど
***
- [改訂3版基礎RubyOnRails](https://www.amazon.co.jp/dp/4844338153)
- [cloud9](https://ide.c9.io/)