sugulogの日記

Railsのビュー!レスポンスとして返す見た目を作成しよう!!

スポンサードリンク

f:id:sugulog:20200921014134p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、ブラウザにレスポンスとして返す見た目をつくる

  • ビュー

について簡単に解説します!!

その為このブログを読むことで、ビューについて理解が深まるのはもちろん、今回でトップページが表示されるまでの流れも理解できます。

是非最後までご愛読ください

 

今回は、

  • テンプレートエンジン

  • ビュー作成

の順で解説していきます!

前回のブログの内容を引き継いで記述しています。

そのため、前回のブログを必ず1度読んでからお読みください。

sugulog.hatenadiary.jp

 では早速、解説していきましょう!!

・テンプレートエンジン

雛形となるテンプレートと、そのテンプレートのデータとなる記述を埋め込むことで、最終的に別のファイルとして生成できる仕組みのこと。

この仕組みの中でERBというのがあります。

ERBとは、HTMLファイルに Rubyの記述を埋め込むことができるテンプレートから、HTMLファイルを生成できるテンプレートエンジンです。

つまり、HTMLファイルの中にRubyの記述を加えて、ブラウザ上に表示させることができるということです。

ファイル名としては、対応するアクション名.html.erbを使用することでHTMLファイルの中にRubyの記述が使用できるようになります。

今回の場合だとindex.html.erbです。

またファイルを作成する場所としては、app/views/コントローラー名/対応するアクション名.html.erbで作成しましょう!

では実際に、記述していきましょう!!

・ビュー作成

今回ビューを作成していくファイルは、app/views/posts/index.html.erbです。

ここでビューを作成するにあたって、大事なテクニックがあるのでみていきましょう!

・コントローラーから情報を受け取る

コントローラーのアクション内にインスタンス変数を定義しておくことで、その情報をもつ変数をビューで使用することができます。

では実際に、使用してみましょう!

コントローラー内のアクションで、以下のように記述しました。

f:id:sugulog:20200921004853p:plain

そしてビューに、以下のように記述しました。

f:id:sugulog:20200921005152p:plain

補足として<%= %>という記述はerbにおいて、Rubyの記述をブラウザ上に表示させるための記述です。

表示させたくない場合は、<% %>でRubyの記述を囲みましょう。

ではブラウザ上でどのように表示されているかみてみましょう!!

f:id:sugulog:20200921010541p:plain

コントローラーで記述した内容がインスタンス変数を使うことで、正しくビューに表示されているのが確認できますね!!

この記述の仕方は、データーベースから情報をビューに持ってくる際などに活用するので、しっかり押さえておきましょう!!

後はビューに表示したい内容を記述し、app/assets/stylesheets/コントローラー名.csscssによる装飾をすることでレスポンスとして返すビューは完成します。

今回の場合だと、app/assets/stylesheets/posts.cssですね。

ということでルーティングから振り返ると、トップページがみたい!というリクエストが送られてくる。

それに対してルーティングで、どのような処理をするのか指定し振り分ける。

コントローラーでその振り分けに対し処理を行う。

その際に、トップベージの見た目として返すビューを取得する。

そして、リクエストに対するレスポンスが完成した段階で、クライアントにコントローラーからそのレスポンスを返す。

この流れを今回までのブログで学習しました。

この流れが非常に大事な流れになります!

しっかり復習し、自分の技術にしていきましょう!!

 

以上、今回のブログでした。

ビューについて理解が深まり、トップページが表示されるまでの流れも理解できましたか??

今回までの流れをしっかり押さえることで、画面が表示されるまでの基礎は終わりです。

ここからより高い技術を目指し、さらにさらに深堀していきましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!