Vue.js｜プログラミングのーと

2024.04.25 2025.05.04

Vue.js

kurumin

Contents

ヘッダー、フッターのコンポーネント化
コンポーネントの呼び出し
@って何？
遅延ローディングルート

ヘッダー、フッターのコンポーネント化

コンポーネント名

1単語でも動作するが、2単語以上にすることが推奨されている。

Header.vue → ×
TheHeader.vue → 〇

これは将来、新しいHTMLタグが増えてもタグ名の衝突が起きないようにするため。

コンポーネントの呼び出し

import GlobalHeader from '@/components/GlobalHeader.vue';

scriptブロックでimportし、templateブロックで呼び出す。

<GlobalHeader />

@って何？

エイリアスの書き方の@は何を意味しているのかは、tsconfig.app.jsを見るとわかる。

    "paths": {
      "@/*": ["./src/*"]
    }

“paths”で@はsrc配下として設定されている。

遅延ローディングルート

下記の書き方だとassetsフォルダに「index.78y6r349.js」のようなjsファイルが生成される。

import { createRouter, createWebHistory } from 'vue-router';

import Top from '@/views/Top.vue';
import About from '@/views/About.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'top',
      component: () => import('@/views/Top.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/About.vue')
    }
  ]
});

export default router;

上記のように記述することも可能だが、jsファイルが肥大化し最初の読み込みに時間が掛かるので、それを防ぐためにページごとにjsファイルを分割し、そのページを訪れたタイミングで読み込むようにする。
このことを遅延ローディングルートと言う。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'top',
      component: () => import('@/views/Top.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/About.vue')
    }
  ]
});

export default router;

今度はassetsフォルダに「about.vfd6av8.js」のようなファイルが作られている。

これによりSPAで問題になりがちだった初回ロードの重さが緩和される。

ABOUT ME