この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: ヘッダー/フッターの共通コンポーネント
SEOタイトル: 【Vue.js】ヘッダー/フッターの共通コンポーネントの作り方

この記事の要点
  • Web アプリのヘッダー / フッターを共通コンポーネントとして再利用する方法
  • Laravel Blade: @include / @yield / @extends
  • Vue.js: コンポーネント import +
    /
  • React: コンポーネント import + JSX で配置
  • Next.js / Nuxt.js: Layout コンポーネントで自動適用

 

Laravel Blade のパターン

方法 1: @extends と @yield（推奨）





    
    @yield('title', 'デフォルトタイトル')
    @yield('styles')



    @include('partials.header')

    

        @yield('content')
    


    @include('partials.footer')

    @yield('scripts')





    
My Site

    






    
© {{ date('Y') }} My Site



@extends('layouts.app')

@section('title', 'ユーザー一覧')

@section('content')
    
ユーザー一覧

    @foreach ($users as $user)
        
{{ $user->name }}

    @endforeach
@endsection

@section('scripts')
    
@endsection

方法 2: コンポーネント（Laravel 7+）




    
{{ $title ?? config('app.name') }}

Vue.js のパターン

Vue 3 + Composition API

React のパターン

// components/Header.tsx
import { Link } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";

export default function Header({ title = "My Site" }) {
    const { user, logout } = useAuth();
    return (
        

            
{title}

            
        

    );
}
// App.tsx
import Header from "./components/Header";
import Footer from "./components/Footer";

function App() {
    return (
        <>
            

            

                
                    } />
                    } />
                
            

            

        
    );
}

Next.js の Layout

// app/layout.tsx (App Router)
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default function RootLayout({ children }) {
    return (
        
            
                

                
{children}

                

            
        
    );
}

// → 全ページで自動的に Header / Footer が表示される

Nuxt.js の Layout

Web Components（純粋 HTML / JS）

// header.js
class SiteHeader extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
            

                
My Site

                
            

        `;
    }
}
customElements.define("site-header", SiteHeader);

// HTML

共通コンポーネント設計の Tips

  • props で柔軟性: タイトル・サブメニュー等を props で受け取って汎用化
  • slot を活用: ヘッダー内に任意の要素を差し込めるように
  • 認証状態に応じて: ログイン中はマイページリンク、未ログインはログインリンク
  • アクティブリンクのハイライト: 現在ページに応じてスタイル変更
  • SP/PC で別表示: メディアクエリ + display 切替、または別コンポーネント
  • SEO への配慮:
    ,

関連記事