ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|---|
|
基本的なリンクの書き方
① 静的なリンク
<a href="/users">ユーザー一覧</a>
<a href="https://example.com">外部サイト</a>
② url() ヘルパー(推奨)
<a href="{{ url('/users') }}">ユーザー一覧</a>
<a href="{{ url('/users/' . $user->id) }}">ユーザー詳細</a>
<a href="{{ url()->current() }}">現在のURL</a>
<a href="{{ url()->previous() }}">前のページ</a>
# url() は config('app.url') を基準に絶対 URL を生成
③ asset() ヘルパー(静的ファイル)
<img src="{{ asset('images/logo.png') }}" alt="Logo">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
名前付きルート(route ヘルパー、推奨)
URL を直書きするより、ルート名で参照するほうが URL 変更に強いです:
// routes/web.php
Route::get('/users/{id}', [UserController::class, 'show'])->name('user.show');
Route::get('/posts/{post}/comments', [CommentController::class, 'index'])->name('comment.index');
# Blade
<a href="{{ route('user.show', $user->id) }}">{{ $user->name }}</a>
# 名前付き引数
<a href="{{ route('user.show', ['id' => $user->id]) }}">{{ $user->name }}</a>
# クエリパラメータも含める
<a href="{{ route('user.show', ['id' => 1, 'tab' => 'profile', 'lang' => 'ja']) }}">
詳細
</a>
# → /users/1?tab=profile&lang=ja
# 複数のパスパラメータ
<a href="{{ route('comment.index', ['post' => $post->id]) }}">コメント</a>
# → /posts/1/comments
動的にリンクを生成
foreach でリスト
<ul>
@foreach ($users as $user)
<li>
<a href="{{ route('user.show', $user->id) }}">
{{ $user->name }}
</a>
</li>
@endforeach
</ul>
条件付き
@if (auth()->check())
<a href="{{ route('user.profile') }}">マイページ</a>
<a href="{{ route('logout') }}">ログアウト</a>
@else
<a href="{{ route('login') }}">ログイン</a>
@endif
アクティブリンクの判定
<a href="{{ route('home') }}"
class="{{ request()->routeIs('home') ? 'active' : '' }}">
ホーム
</a>
<a href="{{ route('users.index') }}"
class="{{ request()->routeIs('users.*') ? 'active' : '' }}">
ユーザー一覧
</a>
# URL ベースの判定
<a class="{{ request()->is('admin/*') ? 'active' : '' }}">管理画面</a>
外部リンクのセキュリティ
<!-- 推奨 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部サイト
</a>
# rel="noopener": 新タブ先から window.opener にアクセスさせない(XSS 防止)
# rel="noreferrer": Referer ヘッダを送らない(プライバシー)
# rel="nofollow": 検索エンジンに辿らせない(SEO 用、ユーザ生成リンクで使う)
動的属性とクラス
# クラスを動的に
<a href="{{ route('user.show', $user->id) }}"
class="btn btn-{{ $user->is_active ? 'primary' : 'secondary' }}"
data-user-id="{{ $user->id }}">
{{ $user->name }}
</a>
# Blade のクラスディレクティブ (Laravel 8.51+)
<a @class([
'btn',
'btn-primary' => $user->is_active,
'btn-secondary' => !$user->is_active,
'disabled' => $user->is_locked
])>...</a>
URL に関する Tips
action() でコントローラ指定
<a href="{{ action([UserController::class, 'show'], $user->id) }}">
詳細
</a>
# → /users/1 (web.php の定義に従う)
signed URL(署名付き URL)
# 改ざん防止の URL(メール認証等で使う)
$url = URL::signedRoute('verify.email', ['user' => $user->id]);
$temporaryUrl = URL::temporarySignedRoute('download', now()->addMinutes(30), ['file' => $id]);
# Blade
<a href="{{ URL::signedRoute('verify.email', ['user' => $user->id]) }}">
メール確認
</a>
ローカライズされた URL(多言語)
// 言語プレフィックス付き
Route::prefix('{locale}')->where(['locale' => '(ja|en)'])->group(function () {
Route::get('/users/{id}', ...)->name('user.show');
});
# Blade
<a href="{{ route('user.show', ['locale' => 'ja', 'id' => $user->id]) }}">...</a>
# → /ja/users/1
<a href="{{ route('user.show', ['locale' => 'en', 'id' => $user->id]) }}">...</a>
# → /en/users/1
JavaScript と連携
Blade で生成した URL を JavaScript に渡す:
# Blade
<script>
const routes = {
userShow: "{{ route('user.show', ':id') }}",
userDelete: "{{ route('user.destroy', ':id') }}"
};
</script>
// JS 側で使う
const url = routes.userShow.replace(":id", userId);
fetch(url).then(...);
または Ziggy ライブラリを使うと、JS から名前付きルートを直接呼べます。
パンくず・ナビゲーション
# レイアウトで再利用
<nav class="breadcrumb">
<a href="{{ route('home') }}">ホーム</a>
<span>/</span>
<a href="{{ route('users.index') }}">ユーザー</a>
<span>/</span>
<span>{{ $user->name }}</span>
</nav>
<nav class="pagination">
@if ($users->onFirstPage())
<span>前へ</span>
@else
<a href="{{ $users->previousPageUrl() }}">前へ</a>
@endif
@if ($users->hasMorePages())
<a href="{{ $users->nextPageUrl() }}">次へ</a>
@else
<span>次へ</span>
@endif
</nav>
関連記事
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
同階層のページ
- インストール(ファイルのダウンロード)
- npmを使用したプロジェクトの作成
- for 繰り返し処理
- ifの条件分岐とtemplateを用いたグループ化
- クリック時のイベント処理(on:click)
- modelとdata フォーム入力値とDOMへの即時反映
- computed(算出プロパティ)と使い方とdataとの違い
- ライフサイクルフック(created / mounted / updated / destroyedの使い方)
- $nextTickの使い方(ライフサイクルフック)
- メソッドの定義方法
- エラー一覧
- ルーティング設定
- aリンクの貼り方と動的URLの作成
- Mixinを利用した共通処理の記述方法
- v-bindによるデータ連携
- ヘッダー/フッターの共通コンポーネント
- ナビゲーションの現在ページをハイライトする方法
- 画面サイズの取得方法
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 Spring Frameworkのアノテーション一覧
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- PHPでのファイルアップロード方法|multipart/form-dataと$_FILES 2026-08-07 17:15:57
- PHP $_SERVERとは|DOCUMENT_ROOT・PHP_SELFなど主な要素 2026-08-07 17:15:57
- Scratchのアカウントの作り方|メールアドレスとユーザー名の登録手順 2026-08-07 17:15:57
- djangoにおけるMVCアプリケーション実装例 2026-08-07 17:15:57
- Bluetoothとは|仕組み・BLEとClassicの違い・用途 2026-08-07 17:15:57
- Spring Bootのテスト入門|@SpringBootTestとJUnitでの単体・結合テスト 2026-08-07 17:15:57
- APIキー取得方法 2026-08-07 17:15:56
- インストール方法(Windows版) 2026-08-07 17:15:56
- Java とは?言語仕様・JVM・主要フレームワーク一覧 2026-08-07 17:15:56
- 【PHPフレームワーク】Laravelの使い方 2026-08-07 17:15:56
- Scratch 作品の公開方法 2026-08-07 17:15:56
- Google OAuth 2.0 認証の実装方法 2026-08-07 17:15:56
- データベースとは?RDB / NoSQL / SQL の基礎 2026-08-07 17:15:56
- インストール(eclipseプラグイン) 2026-08-07 17:15:56
- Spring Frameworkの使い方 2026-08-07 17:15:56
コメントを削除してもよろしいでしょうか?