Laravel開発、ユーザー所有本を管理できるようにする【3】メニュー表示位置の修正
前回記事にて既存ビューの扱いを見直しました。
この作業をしていたなかで気づいたのですが、サイトのメニューについて記述方法が統一されていないという問題を見つけました。
本記事ではこの問題点を解決していきます。
目的
サイトを構成する要素を整理することでコードの可読性を上げる
※なお、本記事の都合上下記表現を利用する。
（前回記事と同じ表現です。）
表現：ページ
Aページ：本情報管理ページ
Bページ：ユーザー所有本管理ページ
なぜやるか
自分で作成している時点で問題と感じており、統一性をもたせるべきであると考えた。
他人がみるとなると、なおさら分かりにくいため、ここで問題を解決させてから次の実装へすすむため。
やりたいこと
ページ内構成を統一してメニューの場所を明確にする。
やったこと
現状を知る
現状に対しての解決策を考える
解決策にそった実装を行う
作業内容
状況把握しメニュー記述の問題点を確認する
初期設計段階
初めに構成していた内容を整理すると以下のような表示になります。
# ページのおおまかな設計要素
各ページの構成は大まかには「ヘッダ・メニュー・コンテンツ」の3つの要素で構成されています。
当初設計段階では、全体メニューがあれば問題ないと考え、bodyタグ内のヘッダ要素の一つとしてメニューをいれていました。
（レイアウトファイルの□内をヘッダとして表示）
スタイルシートについても、ヘッダ要素とコンテンツ用としてファイルをわけることで、各々で変更が生じたときに対象のファイルを変更すればいいように考えていました。
現状把握と問題点
その後、AページとBページのメニューをつけることとなり、後から追加実装しました。
# 現在の状況
現状について問題点が2つあります。
問題点1、スタイルシートのファイル名と内容がリンクしていない。
ヘッダ用のレイアウトとしてレイアウトファイルを作成しています。
しかし、AページBページのメニューについてはコンテンツ内に配置しているにもかかららず参照しているレイアウトはヘッダ用レイアウトとなっており、レイアウトファイルとコード記述位置に一貫性がありません。
問題点2、メニューがあちこちに配置されてしまっている。
こちらはスタイルでなく要素の配置の問題です。
全体メニューはヘッダにあり、AページBページメニューはコンテンツ内にあります。
ようするに、メニューがあちこちにあって、スタイルシートの記述が全部ヘッダになってる状態。
自分で作っておいてあれですが、分かりにくい状態です。
解決策を考える
まず、あるべき姿を考えることにしました。
# 修正案
まずメニューの配置場所から考えました。
解決策1、スタイルシート上のヘッダとメニューを分離する。
ヘッダ部を赤枠の範囲として再構成し、ヘッダ用スタイルシートファイルもこの内容に限定します。
メニューに関してはメニュー専用のスタイルシートを新規作成し、専用化します。
解決策2、メニューの配置を明確にし、再配置する。
メニュー専用のextendsを新たに作成し、メニューの場所を明確にして全体メニューと各メニューを配置するように変更します。
全体メニューに関しては全てのページで読み込まれる為、レイアウト側に残置しておき、各メニューはコンテンツから切り出してメニュー用と再設定します。
手順としては解決策2を先になおすことで、ビューファイル上のメニュー位置を明確に設定し、それからスタイルシートを書き直す、といった手順で実施することにしました。
解決策を実行する
ビューファイル構成をなおす
まずは、改めてビューファイル内のコードを詳しくみます。
レイアウトファイルから確認します。
# ~/resource/views/layout/layout.blade.php
レイアウトファイルの後半部分です。
ヘッダとして構成しているheaderタグ内に全体メニューのコンポーネントが含まれています。
その後に各コンテンツ表示をする構成です。
ここから、header内のメニューをメニュー専用のエリアに変更します。
メニュー専用のブロックを構成します。
# ~/resource/views/layout/layout.blade.php
パンくずリストまでをheaderとして再構成し、メニューを新たに"menulist"として構成しました。
全体メニューは全ページで表示する為、レイアウト上で設定しています。
その下に各ページでのメニューを表示するため、yieldによる参照としました。
現状はcontent内で呼び出しているので、メニューとして呼び出せるように変更しました。
Aページのindexファイルを確認します。
# ~/resource/views/book/index.blade.php
content内にメニューを表示するコンポーネントを定義していました。
今回、メニュー表示用の新しいセクションを呼び出すレイアウト構成にしたので、変更します。
新たにsectionを追加し、メニューリストとして表示させるためのコンポーネントを移設しました。
そして、@componentでなく@includeという記述に変更しました。
呼び出し結果としては同じ物が出力されますので、コード記述量のすくないincludeを採用しました。
最後にビュー確認し、見た目上の変化がない事を確認して、最初に書き直したビューページの再構成は完了です。
あとは、同様の修正を現在実装済みの全ページで行いました。
※componentとincludeの違い
※本項はコード修正でなく、私の個人的な考え方の整理です。コード修正の続きは次の項目をご覧下さい。
ここでコンポーネントとインクルードという2つの標記を使っている点に気づきました。
そもそもはLaravelを学習していた本でcomponentという存在を知り、これによって部分的にテンプレート化して参照するものという理解をしていました。
後に本のリスト表示をテンプレート化するときに変数を引き渡す必要があった為、componentではそのままでは変数が継承されないと知り、調べていく中でincludeは変数も継承されるものと知り、includeを使用していました。
まだ知識不足な点もあるのですが、componentでも引数指定で値を引き渡すことができるようです。
最大の違いはcomponentではslotを使用することで、一部の記述を分けられる点にあるようです、これをうまく使えば本管理記事の始めに出てきたDBからデータを取り出す記述もうまく変更が加えられそうです。途中で初めに戻って別の変更をしだすときりがないので、こちらについては現在の目的が完了してから見直したいと思っています。
レイアウトをなおす
ビューの構成はなおったので、レイアウトを修正していきます。
クラス名等は一切修正していなかったので、結果として現在はヘッダ用レイアウトファイル内のクラスを参照して正常にデザインは適用されています。
ここでまずはヘッダ用のスタイルシートの中身を確認します。
※長さの都合上画像2枚を続けてのせています。
# ~/public/scss/book-index.scss
最初の仕様ではヘッダ内にメニューを含むとしていたのでヘッダクラス内に"&__menutab"として作成していました。
今回はメニューのみ単独でレイアウトファイル化してメニュー用と明確に分かるように変更しますので、この"&__menutab"部分を新たにファイル化します。
ファイルを新規作成し、レイアウトファイルで記述していた新しいクラス名をつけました。
# ~/public/scss/menulist.scss
スタイルシートの再定義はこれだけです。元々使い回すような記述を考えていたので、結構簡単に載せ替えることができました。
あとは、新しいクラス名をビューファイル側で変更してあげると載せ替えは終了です。
# ~/resource/views/book/index.blade.php（修正前）
# ~/resource/views/book/index.blade.php（修正後）
メニュー専用クラス名に変更しました。
これで見た目を確認し、表示くずれなしで完了です。
…と思いきや表示崩れしました。
よくやりがちなミスで、メニューリストのスタイルシートは新たなスタイルシートファイルとして作成したが、適用できていませんでした。
メニューリスト用スタイルシートを適用します。
これでビュー表示確認し、表示が正常になりました。
後は残りのページについても同様にスタイルシートの適用します。
以上でページ構成を「ヘッダ・メニュー・コンテンツ」の3種類として分類し、それに対応するようにスタイルシートについても見直しを行いました。
DBデータ取り出しと既存ビューの調整が終了しましたので、ユーザーページの残りのビューと、本情報の保存機能を後は実装していきます。
