PHPの基礎 - テンプレート方式のソースを表示

== 概要 ==
テンプレート方式とは、HTMLのデザイン部分とPHPのロジック部分を分離することである。<br>
これにより、デザイナと開発者が別々に作業しやすくなり、コードの保守性も向上する。<br>
<br>
テンプレート方式を採用する主なメリットを以下に示す。<br>
* コードの可読性向上
* メンテナンス性の向上
* チーム開発での作業効率向上
* デザインの一貫性維持が容易
<br>
代表的なテンプレートの実装方法を以下に示す。<br>
* 基本的な分離方式
*: PHPファイルとHTMLファイルを分けて、includeで結合する。
* テンプレートエンジンの使用
*: Smarty、Twig等のテンプレートエンジンを使用する。
<br>
なお、テンプレート方式を導入する場合は、プロジェクトの規模や要件に応じて適切な方法を選択することが重要である。<br>
小規模なプロジェクトの場合は基本的な分離方式で十分の可能性があり、大規模なプロジェクトではテンプレートエンジンの採用を検討する。<br>
<br><br>

== 基本的な分離方式 ==
PHPファイルとHTMLファイルを分けて、<code>include</code>文で結合する方法である。<br>
 <syntaxhighlight lang="php">
 // index.php
 
 $title   = "Webサイトのタイトル";
 $content = "ここに本文を入力する";
 
 include 'template.html';
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="html">
 <!-- template.html -->
 
 <!DOCTYPE html>
 <html>
 <head>
    <!-- 変数titleを使用する -->
    <title><?php echo $title; ?></title>
 </head>
 <body>
    <!-- 変数contentを使用する -->
    <?php echo $content; ?>
 </body>
 </html>
 </syntaxhighlight>
<br>
例えば、PHPを使用したテーブルを実装する場合は、以下に示すようなテンプレート方式が推奨される。<br>
 <syntaxhighlight lang="php">
 // template.php
 
 <table class="data-table">
    <thead>
       <tr>
          <th>ID</th>
          <th>名前</th>
          <th>メール</th>
       </tr>
    </thead>
    <tbody>
    <?php foreach($users as $user): ?>  // PHPの代替構文の使用, {の代わりに:を使用
       <tr>
          <td><?php echo htmlspecialchars($user['id']); ?></td>
          <td><?php echo htmlspecialchars($user['name']); ?></td>
          <td><?php echo htmlspecialchars($user['email']); ?></td>
       </tr>
    <?php endforeach; ?>  // }の代わりにend構文名を使用 (他にも、endforeach, endif, endwhile等がある)
    </tbody>
 </table>
 <?php else: ?>
    <p>データがありません。</p>
 <?php endif; ?>
 </syntaxhighlight>
<br>
実務では、テンプレート方式が推奨される理由として、以下に示すことが挙げられる。<br>
* 保守性
*: HTMLとPHPの分離により、デザインの修正が容易である。
* 可読性
*: マークアップ構造が視覚的に把握しやすい。
* チーム開発
*: フロントエンドとバックエンドの開発者が分担しやすい。
* セキュリティ
*: XSS対策などのセキュリティ処理が漏れにくい。
<br>
さらに、現代的な開発では以下に示すようなアプローチも採用されている。<br>
* テンプレートエンジン
*: Blade、Twig等の使用
* MVCフレームワーク
*: Laravel、Symphony等の使用
* コンポーネント指向の実装
<br><br>

== レイアウトの共通化 ==
ヘッダ部やフッタ部では、共通部分を別ファイルとして管理することにより、保守性が向上する。<br>
<br>
 <syntaxhighlight lang="php">
 // header.php
 
 <!DOCTYPE html>
 <html>
 <head>
    <!-- 必要に応じて、ヘッダ部分で変数を確認する処理を入れる -->
    <?php
       if (!isset($title)) {
          $title = "デフォルトタイトル";
       }
    ?>
    <title><?php echo $title; ?></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
    <header>
       <nav>
          <ul>
             <li><a href="/">ホーム</a></li>
             <li><a href="/about">会社概要</a></li>
             <li><a href="/contact">お問い合わせ</a></li>
          </ul>
       </nav>
    </header>
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="php">
 // footer.php
 
    <footer>
       <div class="footer-content">
          <p>&copy; 2024 会社名 All Rights Reserved.</p>
       </div>
    </footer>
    <script src="/js/main.js"></script>
 </body>
 </html>
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="php">
 // content.php (このファイルをトップページとする)
 
 <?php
   $title = "ページタイトル";
 
   include 'header.php';
 ?>
 
 <!-- メインコンテンツ -->
 <main>
 <div class="content">
    <h1>ようこそ</h1>
    <p>これはメインコンテンツです。</p>
 </div>
 </main>
 
 <?php
    include 'footer.php';
 ?>
 </syntaxhighlight>
<br><br>

== テンプレートエンジンの使用 ==
Smarty、Twig等のテンプレートエンジンを使用する方法がある。<br>
これらは独自の構文を持ち、より柔軟なテンプレート制御が可能である。<br>
<br>
==== Twigを使用する場合 ====
 <syntaxhighlight lang="php">
 // index.php
 
 <?php
 require_once 'vendor/autoload.php';
 
 $loader = new \Twig\Loader\FilesystemLoader('templates');
 $twig = new \Twig\Environment($loader);
 
 echo $twig->render('template.twig', [
    'title'   => 'Webサイトのタイトル',
    'content' => 'ここに本文を入力する'
 ]);
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="twig">
 {# template.twig #}
 
 <!DOCTYPE html>
 <html>
 <head>
    <title>{{ title }}</title>
 </head>
 <body>
    {{ content }}
 </body>
 </html>
 </syntaxhighlight>
<br>
==== Laravelを使用する場合 ====
LaravelのBladeテンプレートエンジンは、PHPの機能を損なうことなく、保守性の高いテンプレートを作成できる機能を提供している。<br>
<br>
Bladeテンプレートの特徴を以下に示す。<br>
* @extends、@section、@yield によるレイアウトの継承
* {{ }} による変数の出力 (自動エスケープ付き)
* {!! !!} によるHTMLエスケープなしの出力
* @if、@foreach等のディレクティブ
* コンポーネントによる再利用可能なUI部品の作成
* バリデーションエラーの表示が簡単
* @auth、@guest等の認証関連ディレクティブ
<br>
===== Bladeの基本的な構造 =====
 <syntaxhighlight lang="php">
 // routes/web.php
 
 Route::get('/', function () {
    return view('welcome', [
       'title'   => 'Webサイトのタイトル',
       'content' => 'ここに本文を入れる'
    ]);
 });
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="php">
 // resources/views/layouts/app.blade.php
 
 <!DOCTYPE html>
 <html>
 <head>
    <title>@yield('title')</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite([
       'resources/css/app.css',
       'resources/js/app.js'
    ])
 </head>
 <body>
    <header>
       @include('layouts.navigation')
    </header>
 
    <main>
       @yield('content')
    </main>
 
    <footer>
       @include('layouts.footer')
    </footer>
 </body>
 </html>
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="php">
 // resources/views/welcome.blade.php
 
 @extends('layouts.app')
 
 @section('title', $title)
 
 @section('content')
    <div class="container">
       <h1>{{ $title }}</h1>
       <p>{{ $content }}</p>
 
       {{-- 条件分岐の例 --}}
       @if (Auth::check())
          <p>ようこそ、{{ Auth::user()->name }}さん</p>
       @else
          <p>ログインしてください</p>
       @endif
 
       {{-- ループの例 --}}
       @foreach ($items as $item)
          <div class="item">
             {{-- エスケープなしで出力する場合 --}}
             {!! $item->description !!}
          </div>
       @endforeach
    </div>
 @endsection
 </syntaxhighlight>
<br>
===== コンポーネントの使用例 =====
 <syntaxhighlight lang="php">
 // resources/views/components/button.blade.php
 
 <button {{ $attributes->merge(['class' => 'btn']) }}>
    {{ $slot }}
 </button>
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="php">
 // resources/views/welcome.blade.php での使用例
 
 <x-button class="btn-primary">
    クリックしてください
 </x-button>
 </syntaxhighlight>
<br>
===== 共通パーツの分離例 =====
 <syntaxhighlight lang="php">
 // resources/views/layouts/navigation.blade.php
 
 <nav>
    <ul>
       <li><a href="{{ route('home') }}">ホーム</a></li>
       <li><a href="{{ route('about') }}">会社概要</a></li>
       <li><a href="{{ route('contact') }}">お問い合わせ</a></li>
    </ul>
 </nav>
 </syntaxhighlight>
<br>
===== フラッシュメッセージの表示例 =====
 <syntaxhighlight lang="php">
 @if (session('success'))
    <div class="alert alert-success">
       {{ session('success') }}
    </div>
 @endif
 </syntaxhighlight>
<br>
===== バリデーションエラーの表示例 =====
 <syntaxhighlight lang="php">
 @error('email')
    <div class="alert alert-danger">{{ $message }}</div>
 @enderror
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]