はじめに

今回はViewの基礎知識についてそこしお話しします
なお、本記述はMacにおいて、Railsでの開発を前提としています
また、まだまだひよっこですので、不備等ございましたらご指摘いただけると幸いです

目次

• Viewの役割
• application.html.erbデフォルトでの役割

Viewの役割

Viewの役割はもちろん画面の表示処理です
それだけだとMemoにならないので、Viewファイルの階層構造も一緒に説明します
一例がこちら

＊hamlを使っていますが、ファイル名としては末尾が.hamlか.erbかの違いだけで、置き場所や役割は同じです

Viewsの中がアプリケーションのViewファイルの置き場所です
"rails new"をした場合、自動的にこのディレクトリが作成されますが、中身として"layouts"のディレクトリも同時に作成されます
画像内での"groups"や"users"は、他のモデルやコントローラと連動する名前にしなければいけません
そうすることで、Railsが自動的に各モデルやコントローラーとの関係を認識し、処理を行ってくれます
コントローラーの話が少し入ってきますが、例えば"groups_controller"に"index"アクションを加えたとしましょう
そのアクションに対応する"view"は、"views/groups/index.html.erb"となります
このようにたかだかファイル名と思われるかもしれませんが、非常に重要になってきます

application.html.erbのデフォルトでの役割

先ほど少し触れた"layouts"のディレクトリ内には"application.html.erb"というファイルも自動生成されます
イメージとしてはviewの統括者とでも思っていただければいいです
例えばこのQiita記事のheaderにあたる部分はどの記事を閲覧しに行っても、マイページを開いても共通ですよね
このように、どのページでも共通している部分に関しては、application.html.erbに記述するだけで、各viewファイルに書かなくても、全てに反映させることができます
これは、デフォルトでは全てのビューが読み込まれるときに、application.html.erbが読み込まれるからです
基本的にはヘッダーとフッターを書くことが多いかと思います
また、装飾となるcssを全体に反映させるのもこのファイルへの記述で行います

cssの読み込み

application.html.erbにstylesheet_link_tag 'application'という記述があります
この記述により"app/assets/stylesheets/application.css"が読み込まれます
そして、"application.css"には"require tree ."という記述があるので、この記述のおかげで、同じディレクトリにあるcssファイルを全て読み込むことができます

まとめ

• viewの役割は画面への表示
• ディレクトリ名やファイル名はコントローラーやモデルと連動した名前にする
• application.html.erbには共通して表示させたい項目を記述する