20.
コンポーネント
コンポーネントの基本
コンポーネントとは
Component（コンポーネント）は部品という意味で、Webアプリケーションでは、HTMLやプログラムを共通化したファイルのことを指します。コンポーネント化することで何度も同じコーディングをせず、効率的に開発ができます。
レイアウトとは
Layout（レイアウト）は、メニューやヘッダーなどの共通部分を１ファイルで構成するコンポーネントファイルです。例えばHTMLのheadタグやbodyタグなどのレイアウトファイルを用意することで、各ページはレイアウト部分をコーディングせずに済みます。
<html>
<head>
<title>Shopping</title>
</head>
<body>
ページごとのコンテンツを表示
</body>
</html>
ディレクトリ作成
今回のプロジェクトはMVC構成で作成していきます。「app/」ディレクトリに「models/」「views/」「controllers/」ディレクトリを作成します。
php_sns/
├── app/
│ ├── controllers/
│ ├── models/
│ └── views/
レイアウト
php_sns/
├── app/
│ └── views/
│ ├── components/
│ │ └── head.view.php
│ └── layouts/
│ └── app.layout.php
├── regist/
│ ├── confirm.php
│ ├── index.php
│ ├── input.php
│ └── result.php
レイアウトファイル作成
レイアウトファイル「views/layouts/app.view.php」を作成し、includeでViewファイルを表示します。
views/layouts/app.view.php
<!DOCTYPE html>
<html lang="ja">
<?php include 'views/components/head.php' ?>
<body>
...
</body>
</html>
headコンポーネント
レイアウトのheadタグを表示するコンポーネント「views/components/head.php」を作成します。
views/components/head.php
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Shop</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>