ビューを作成するときに、メンテ性や汎用性を向上させるため、極力直接入力をなくす。見た目もなんとなくカッコよくなる。
文字列はlangファイルにまとめて記述し、関数で取得するようにする。
パスもメソッドとヘルパーを使って表示するようにする。
実例(Before & After)
構造化マークアップ(Website)を例とする。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Website",
"name": "サイトの名前",
"url": "サイトのURL",
"description": "サイトの説明",
"potentialAction": {
"@type": "SearchAction",
"target": "サイトのURL?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
↓ リファクタリング
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Website",
"name": "{{__('page.index.title')}}",
"url": "{{route('index')}}",
"description": "{{__('page.origin.description')",
"potentialAction": {
"@type": "SearchAction",
"target": "{{route('index')}}?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
複数のサイト間で共有できる文字列はそのままとし、固有のものを変数に置き換えた。
パッと見ややこしいが、中身はかなり簡単。
目次
-
文字列の取得
2. 設定言語を日本語に変更
3. 文字列を記述
4. 呼び出し -
URLの取得
5. ルート名をつける
6. ルートを呼び出す
7. パラメータ付きのURLの場合 -
【応用編】confファイルとヘルパーの活用
9. データ取得の流れ
10. .envのデータをconfigに呼び出す
11. ヘルパー関数を作成
12. ビューで呼び出し
## 1. 文字列の取得 最初に文字列を変数に置き換える方法について。
resources配下にあるlangディレクトリの中に配列形式とオブジェクトで文字列を記載してく。
1-1. 設定言語を日本語に変更
デフォルトではenになっているので、jaに変更する。
config > app.php の中の localeを参照。
'locale' => 'ja',
1-2. 文字列を記述
page.phpファイルを作成し、呼び出しの元となる単語や文章を記載する。(ファイル名は任意)
<?php
return [
'index' => [
'title' => 'サイトの名前',
'description' => 'サイトの説明',
]
];
今回は、index.blade.phpの情報を作成。プロパティ名と値は必要に応じて変更・追加していく。
1-3. 呼び出し
langファイルに設定した文字列を呼び出す。__()
というヘルパ関数を使う。
呼び出し方は、ファイル名(拡張子なし)の後に、ドットでプロパティ名を繋ぐ。
・__('ファイル名.プロパティ名')
page.phpの中の、indexn中のtitleを呼び出しは以下のようになる。
"name": "サイトの名前",
↓ 置き換え
"name": "{{__('page.index.title')}}"
以上で文字列の呼び出しが完了。
## 2. URLの取得 次に、URLを変数に置き換える。これには`route`メソッドを使う。
・route('ルート名', ['変数'=>渡すデータ])
2-1. ルート名をつける
URLの呼び出しにはルート名を使うため、ルーティング(web.php)に名前を追加する。
ルーティングの後ろに->name('ルート名')
をつける。
Route::get('/',[IndexController::class, 'index'])
->name('index');
これで、https://ドメイン にindexと名付けることができた。
2-2. ルートを呼び出す
"url": "サイトのURL",
"target": "サイトのURL?q={search_term_string}",
↓ 置き換え
"url": "{{ route('index') }}",
"target": "{{ route('index') }}?q={search_term_string}",
これでURLを変数で呼び出すことができる。
### 2-3. パラメータ付きのURLの場合 記事詳細ページなど、idやページ番号といった変数が割り当てられている場合がある。その場合は、データを渡す必要がある。
Route::get('/article-{articleId}/', [ArticleController::class, 'show'])
->name('article.show');
https://ドメイン名/article-23 のように末尾に数字がつくパターン。ルート名はarticle.show。
ルーティングの設定で、数値の部分がarticleId
という変数に格納されて、コントローラのアクションに渡される。
ビューの中でルートで呼び出す時も、articleIdの指定が必須。
public function show (string $articleId)
{
$article = Article::article($articleId);
$articleId = $articleId;
return view('pages.articles.show', compact(
'article',
'articleId',
));
}
Articleモデルから、指定の番号の記事データを取得し、変数articleに代入。
また、ルーティングから受け取った変数articleIdを同じ名前でビューに渡す。
"url": "{{ route('article.show'), ['articleId' => $articleId] }}",
これで、現在のページのURLを呼び出すことができる。
## 3. confファイルとヘルパーの活用 応用編として、.envに記載されているサイト設計用のデータを使って変数を作り出すこともできる。
例として、.envにサイトのドメイン情報がある場合に、そこからヘルパーでホストを作成する方法について。
3-1. データ取得の流れ
- .envファイル: プロジェクトの基本情報
- config/app.phpファイル :環境設定用ファイル
- Helper/ViewHelper.php :自分でヘルパー関数を作成
- index.blade.php: ビューで呼び出す
3-2. .envのデータをconfigに呼び出す
.envの中で使いたいデータを、configディレクトリ配下のファイルに記述する。
.envは重要な情報が載っているため公開しない。config配下のファイルにデータを記述すると、config
ヘルパーを使って簡単に呼び出すことができる。
今回は、下記のexample.com
を使う場合を考える。
APP_ORIGIN_DOMAIN=example.com
↓
config/app.phpの中に以下を記述。
'origin_domain' => env('APP_ORIGIN_DOMAIN'),
env関数を使って、.envファイルの中のデータを抜き出し、変数に格納する。
## 3-3. 自分でヘルパー関数を作成 envファイルから取得したドメイン名を使って、引数にパスを入れると、`https://example.com/引数で渡したパス`を返す自作のヘルパ関数を作成する。
3-3-1. ヘルパ関数を定義
app直下に、Helpers > ViewHelper.phpを作成する。
<?php
if (! function_exists('origin_url')) {
function origin_url(string $path):string
{
return "https://" . config('app.origin_domain') . $path;
}
}
・if (! function_exists('origin_url'))
既存のヘルパ関数と名前が被ってないか確認。被っている場合に上書きしないようにしている。
ヘルパ関数の作成時は必須。
・function origin_url(string $path):string
関数名origin_url。引数で変数pathを渡す(型はString)。末尾の:string
は戻り値の型を指定している。
戻り値がstring以外だとエラーが発生する。
・return "https://" . config('app.origin_domain') . $path;
戻り値で https://example.com$path を返す。
3-3-2. ヘルパ関数の読み込み
ヘルパ関数を定義したらcomposerで読み込む必要がある。
ルートディレクトリにあるcomposer.jsonのautoloadに以下を追記する。
composer.json
"autoload": {
"files": [
"app/Helpers/ViewHelper.php"
],
}
autoloadを更新すれば読み込み完了。
$ composer dump-autoload
これで、定義したヘルパ関数をビューで呼び出せるようになった。
## 3-4. ビューで呼び出し 直接URLを書き込んでいる箇所を、`{{ }}`で囲ってヘルパ関数を呼び出せばOK。
"url": "https://example.com",
↓ 変換
"url": "{{origin_url()}}",
配下のディレクトリも指定する場合は引数でパスを渡す。
"url": "https://example.com/src/logo.png",
↓ 変換
"url": "{{origin_url(`/src/logo.png`)}}",
以上。