CakePHP4のエレメントの使い方
Webサイトを作成していると、複数ページで共通のヘッダーやフッターやナビゲーションになっている場合があります。
もし各ページごとにこの共通箇所を重複して記述していると、実装や修正が面倒です。
CakePHPでは、こういった共通箇所を重複せずにパーツ分けして管理する方法として、以下の便利な機能が用意されています。
- レイアウト
- エレメント
- セル
今回はそのうちのエレメントについてみていきたいと思います。
CakePHP4のエレメントが使えるシチュエーション
エレメントはページの中の要素をパーツ化する仕組みです。
例えば、
「詳細ページの記事の末尾と、カテゴリページの一覧の先頭にお知らせエリアを設けたい」とか、
「プロフィール表示を左カラムとマイページで行いたい」とか、
といった場合を想定してみます。
同じ要素が複数のページに出てきているので、ここを共通のエレメントとして作成しておき、
各ページでそのエレメントを読み込めばよい、ということになります。
例えばランキング表示のように、データベースの内容を取得して表示するには向いていません。そういう場合には「セル」を使う方がベターと思われます。ただ読み込む際にエレメントに値を渡すことは可能なので、例えばページによって表示が変わるパンくずリストなどはエレメントで対応可能でしょう。（セルについては別記事に書く予定です→書きました）。
CakePHP4のエレメントの使い方
ではエレメントを実装してみましょう。
・CakePHP4.1.4をインストールしています。
まずtemplates/elementの下にtest_element.phpを作成し、そこに何か記述して保存しましょう。
（「テスト」とか内容はなんでもOK）。
次にエレメントを読み込むビューテンプレートファイル（どのテンプレートファイルでもOK）を開き、そこに以下のように記述します。
<?php
echo $this->element('test_element');
?>括弧の中にエレメントのファイル名の「.php」を除いた名前を入れることで、
どのエレメントを埋め込むかを指定していることになります。
それでは上記のビューを表示するURLをブラウザで表示してください。
上記の記述をした箇所に「テスト」などのエレメントファイルに記述した内容が表示されていることが分かります。
では次にこのエレメントに引数を渡していきましょう。
先ほどのビューテンプレートの記述を以下のように変更してみます。
<?php
echo $this->element('test_element', [
'message' => 'こんにちは'
]);
?>このように配列形式でエレメントに値を渡せます。
エレメント側ではその内容をそのまま変数として表示できます。
以下のように表示してみましょう。
<?= $message ?>「こんにちは」と表示されればOKです。
このように呼び出し側で値を決めることで、エレメント側の表示を変更することができます。
また、渡せる値は配列形式で複数渡すことが可能です。
<?php
echo $this->element('test_element', [
'message' => ['おはよう','こんにちは','こんばんは']
]);
?>エレメント側では
<?php foreach($message as $m){ ?>
<?=h($m);?>
<? } ?>といった形で配列変数として扱えます。
最後に1点注意点ですが、
エレメント側で上記のようにh()関数を使ってHTMLエンティティ化している場合、呼び出し側は「echo」でエレメントを呼び出さないと、エレメント側で使用するHTMLタグがエンティティ化されて表示されてしまいます。
逆にエレメント側でh()関数を使っていなければ、呼び出し側はh()関数を使わないとエンティティ化が漏れることになります。
これはエスケープの実装漏れをうみそうだと思うので注意しましょう。
今回の内容はCakePHPドキュメントを参考にしています。
参考
エレメント
