SHINYA TECH

公務員(行政職)から34歳でエンジニア転職した人

#22 Web版読書ログサービスの作成 ~ HTMLのレイアウト部分を共通化させる ~

f:id:kshinya-tech:20220306051329p:plain

前回までで、読書ログの登録ページを作成しました。

次に、読書ログの一覧ページを作成するにあたり、HTMLのhead部分が共通するため、レイアウトの共通化を行いました。

なぜ

DRY原則に則ったシステム開発を行うため。

DRY原則(Don't Repeat Yourself)とは、ソフトウェアの構成や構築手法についての原則の一つで、同じ意味や機能を持つ情報を複数の場所に重複して置くことをなるべく避けるべきとする考え方のこと。

DRY原則(Don't Repeat Yourself)とは - IT用語辞典 e-Words

どのように

  1. views/layout.phpに共通のレイアウトのHTMLをまとめる。
  2. ページごとに変わる部分は、呼び出し元のPHPファイル内にて変数で渡す。

書いたコード

views/layout.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="stylesheets/css/app.css">

    <!-- $titleはlayout.phpの呼び出し元で定義 -->
    <title><?php echo $title; ?></title>
</head>

<body>
    <header class="navbar shadow-sm p-3 mb-5 bg-white">
        <h1 class="h2">
            <a class="text-reset" href="index.php">読書ログ</a>
        </h1>
    </header>
    <div class="container">
        <!-- $contentはlayout.phpの呼び出し元で定義 -->
        <?php include $content; ?>
    </div>
</body>

views/index.php

<a href="new.php">読書ログを登録する</a>
<main>
    <section>
        <!-- ひとまず適当に表示内容を記述。後で修正。 -->
        <h2>新世界より</h2>
        <div>貴志祐介 / 読了 / 5点</div>
        <p>
            寝食を忘れ、貪るように読んでしまった。<br>
            圧倒的な神本<br>
            感情を揺さぶられ、悲しみ・興奮・感動の全てが押し寄せる。
        </p>
    </section>
</main>

index.php

<?php

// layout.php内の変数に渡す
$title = '読書ログの一覧';
$content = __DIR__ . '/views/index.php';

// layout.phpを取り込む
include __DIR__ . '/views/layout.php';