◀ 16.

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

▶
編集
この記事の要点
  • Web アプリのヘッダー / フッターを共通コンポーネントとして再利用する方法
  • Laravel Blade: @include / @yield / @extends
  • Vue.js: コンポーネント import + <Header /> / <Footer />
  • 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 への配慮: <header>, <nav>, <footer> 等の意味的タグ

関連記事

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. クリック時のイベント処理(on:click)
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法
2026-06-11 07:07:02 guest 5825

人気ページ

最近更新/作成されたページ