Help us understand the problem. What is going on with this article?

CakePHP3 HTMLヘルパーについて

More than 1 year has passed since last update.

HTMLヘルパーとは?

MVCの中でもっとも作成が面倒なのは、V(ビュー)だと思います。
頭を使う使わないは置いといて、単純に普通に記述すると記述する量が多すぎる・・・

基本的に構文はHTMLですが、ページのステータスによってPHPによる処理や計算によって可変させるような作業もあるかと思います。
せっかくMVCで処理と表示を分離させたのにもかかわらず、気づいたらビューのあちこちにPHPコードが埋まっている状態だとMVCで分離したメリットが失われてしまいます。

そこで考え出されたのが、コードの記述量を短縮してくれる【ヘルパー】という機能です。
ヘルパーはビューによって出力するさまざまな表示の作成をサポートしてくれます。

HTMLヘルパーのメリット

ソースコードの量が減る

ファイルのパスを環境に応じて、自動的に出力してくれる
テーブルのコードのように、幾つかのタグを決まった形式で書く必要があるときに自動的にそれらを作成してくれる

コードサンプル

charsetの指定

HTMLヘルパーによる記述

$this->Html->charset('utf-8')

通常

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">

スタイルシートファイルを読み込ませる記述

HTMLヘルパーによる記述

$this->Html->css('hello');

通常

<link rel="stylesheet" type="text/css" href="/cake3app/css/hello.css">

スタイルの指定

//第二引数をtrueにすると、その場で出力,falseにすると、<head>内に記述される
<p style='<$this->Html->style(['color'=>'red','font-size'=>'14','font-weight'=>'bold'],false); ?>'>Hello</p>

<p style='color:red;font-size:14px;font-weight:bold;'>Hello</p>

イメージタグの出力

HTMLヘルパーによる記述

//(第二引数の属性を指定するところは連想配列で指定)
<?=$this->Html->image('aaa.png',array('width'=>'200','height'=>'200','alt'=>'aaaの画像です')); ?>

通常

<img src="/cake3app/img/aaa.png" width="200" height="200" alt="aaaの画像です">

テーブル ヘッダーの出力

tableHeadersは、テーブルのヘッダーを出力します。
これは、ヘッダーの各項目名のテキストを配列としてまとめたもの。<tr>タグとthタグの属性をそれぞれ連想配列として引数に指定します。

$this->Html->tableHeaders(配列,<tr>属性設定,<th>属性設定)

配列 → ヘッダーとして表示するテキストを配列にまとめたもの
属性設定 →tr タグに用意する属性を連想配列にまとめたもの
配列 → th タグに用意する属性を連想配列にまとめたもの

テーブル セルの出力

$this->Html->tableCelles(配列,奇数行属性,偶数属性,boolean1,boolean2);

配列 → 各セルに表示するテキストを配列としてまとめたもの
奇数行の属性設定 → 奇数行のセルに設定される属性を連想配列としてまとめたもの
偶数業の属性設定 → 偶数業のセルに設定される属性を連想配列にまとめたもの
boolean1 → <tr>のクラス属性にcolumn-行数(column-1,column-2など)を自動設定するかどうか
boolean2 → 偶数業と奇数業で異なる属性を設定するかどうか

tableCellesは、配列データを元に、1行分のセル(<tr>で囲われている部分)をまとめて出力するメソッドです。
上記のように設定することにより、わざわざ条件分岐や、連番などをphpで設定する手間がなくなります。

サンプル

<table>
    <?=$this->Html->tableHeaders(
        ['投稿者','タイトル'],
        ['style'=>'color:#000066; background-color:#CCC'],
        ['style'=>'color:#000066; background-color:#EEEEFF'],
    ); ?>
    <?php foreach($data as $obj): ?>
        <?=$this->Html->tableCelles(
            //[$obj['person']['name'] = 投稿者のデータが格納されている配列,$obj['title'] = タイトルの配列
            [$obj['person']['name'],$obj['title']],
            ['style'=>'color:#000099'; 'background-color:#CCCCFF'],
            ['style'=>'color:#006600'; 'background-color:#EEFFEE'],
            false,true
        )?>
    <?php endforeach; ?>
</table>

リスト表示タグの生成(nestedListメソッド)

<ul> <ol>タグなどによるリストや階層メニューなどの表示を作成するためのメソッドも用意されています。
HTMLでは複数のタグを組み合わせて作成をしますが、nestedListメソッドを使用することにより、、ツリー構造の表示を作成することができます。

仕様

$this->Html->nestedList(配列,タグの属性,要素の属性);

サンプル

<span style='font-size: 18pt; font-weight: 700;'>
<?=$this->Html->nestedList(
    ['階層化されたリスト'=>
        ['最初の項目',
            '次の項目'=>
                ['サブ項目1','サブ項目2'],
            '最後の項目'=>
                ['サブ項目A','サブ項目B']]],
    ['style'=>'font-size: smaller; font-weight: lighter','tag'=>'ol'],
    ['style'=>'color: #006600']
); ?>

ナビゲーションメニューの作成(addCrumb,getCrumbs)

項目の追加

$this->Html->addCrumb(表示テキスト,リンク先,属性設定)

メニューの出力

$this->Html->getCrumbs(区切り文字,トップの名前)

サンプル

<?php
    $this->Html->addCrumb('First','one');
    $this->Html->addCrumb('Second','two');
    $this->Html->addCrumb('Third','third');
?>

<?=$this->Html->getCrumbs(' > ','HOME')?>

まとめ

上記いかがでしたでしょうか?
個人的に、HTMLヘルパーはソースコードを短縮することができることがメリットだと思いますが、
書き方によっては、HTMLヘルパーを使わない方法のほうが見やすく、複数のエンジニアで開発する際、可読性も変わってくると思いました。
(ここでは共有してませんが、pタグの書き方など。。。)

ただ、tableの記述については、HTMLヘルパーを活用してみても良いかと思います。
ケースバイケース(複数人のエンジニアで対応するのか、複数人のエンジニアで開発する場合のcakePHP3の理解度 など)で活用することをオススメします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした