Vue.jsでWeb pageのlayoutで共通化できる部分を共通化

f:id:ts0818:20220115225741j:plain

gigazine.net

gigazine.net

⇧ 膨大なデータ量があると、機械学習も捗るんですかね。

今回は、Vue.jsについてです。

レッツトライ~。

Web pageでlayoutのdesign patternとかって存在しない?

まぁ、何て言うか、Webで表示されるページって言うと、HTML/CSSが基本になっているとは思うんだけど、様々なレイアウトが存在するんで、design patternみたいなものを定義してる団体とか無いのかなって思って調べてみた感じ、無いのね...

どなたか、詳しい方、教えてください。

というわけで、

coliss.com

⇧ 上記サイト様によりますと、

csslayout.io

⇧ 有名どころなlayoutについては、上記サイト様がまとめてくださっているようです。

というわけで、確認してみたところ、

f:id:ts0818:20220115175206p:plain

⇧ 見た感じ、有名どころなlayoutの名前が確認できる模様。

まぁ、何て言うか、こういう資料って「W3CWorld Wide Web Consortium)」あたりが頑張ってまとめて欲しい気もするんだけどな...

Web pageのlayoutで共通化できる部分を共通化したいけど...誰か用語を定義してくれんかね...

で、ページ数の多いWebシステムを作成する時に、誰もが一度は考えると思うんですが、layoutで共通化できる部分を共通化したいことあるあるだよね?

ただ、これを表す端的な用語が分からん...

stackoverflow.com

⇧ どのプログラミング言語でも、とりあえずincludeしとけって言葉が出てくるところを見ると、「include common parts layout pattern」みたいな感じになるんかね?

Vue.jsでWeb pageのlayoutで共通化できる部分を共通化

というわけで、Vue.jsでWeb pageのlayoutで共通化できる部分を共通化したい場合はどうすれば良いのか?

ちなみに、自分の環境では「Vue Router」を使っているので、「SPA(Single Page Application)」で実現するケースになります。

ti-tomo-knowledge.hatenablog.com

コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。
Vue.jsではその時、どのようにまとめるのが良いのでしょうか。

vue.jsで全ページ共通コンポーネントのまとめ方 - 親バカエンジニアのナレッジ帳

⇧ 上記サイト様がまとめてくださっていました。

code-schools.com

qiita.com

何やら、

qiita.com

⇧ 上記サイト様によりますと、Vue-Routerで別ファイルを読み込むこともできる模様。

というわけで、上記サイト様を参考に試してみます。

利用する「Vue.js」のプロジェクトについては、

ts0818.hatenablog.com

⇧ 上記の記事で作成したものになります。

現在のプロジェクトの構成は以下のような感じになっていて、「Vue.js」プロジェクトは「my-app」フォルダになります。

f:id:ts0818:20220115183251p:plain

インストールしてるnpmのモジュールは以下になります。

f:id:ts0818:20220115183459p:plain

フォルダとファイルを追加で。

f:id:ts0818:20220115220833p:plain

⇧ 追加したフォルダやファイルは緑色になってて、編集したファイルは黄色っぽい色に変わってますかね。

 

■my-app\src\views\common\Header.vue

<template>
  <header>
    <div><img src="./../../assets/logo.png"></div>
    <h1>Header</h1>
  </header>
</template>    

■my-app\src\views\common\Footer.vue

<template>
  <footer>
    <h1>Footer</h1>
  </footer>
</template>    

■my-app\src\views\common\Sidebar.vue

<template>
  <div class="sidebar">
    <h1>Sideber</h1>
    <router-link to="/setting">設定</router-link>
  </div>
</template>   

■my-app\src\views\sidebar\Setting.vue

<template>
  <h1>設定画面</h1>
</template>    

■my-app\src\views\Contact.vue

<template>
  <div class="contact">
    <h1>This is an contact page</h1>
  </div>
</template>    

■my-app\src\router\sidebar-router.ts

export default {
  // sidebar
  path: "/setting",
  name: "設定",
  component: () =>
    import(/* webpackChunkName: "setting" */ "../views/sidebar/Setting.vue"),
};    

■my-app\src\router\index.ts

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import { component } from "vue/types/umd";
import Home from "../views/Home.vue";
import SidebarRouter from "./sidebar-router";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  // global-nav
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/contact",
    name: "Contact",
    component: () =>
      import(/* webpackChunkName: "contact" */ "../views/Contact.vue"),
  },
  SidebarRouter,
];

const router = new VueRouter({
  mode: "history",
  routes: routes,
});

export default router;

■my-app\src\App.vue

<template>
  <div id="app">
    <Header/>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contact">Contact</router-link>
    </div>
    <div class="main">
    <Sidebar/>

    <router-view />
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from './views/common/Header'
import Footer from './views/common/Footer'
import Sidebar from './views/common/Sidebar'

export default {
  components: { Header, Footer, Sidebar }
}
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 8px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

header {
  display: flex;
}

header img {
  width: 64px;
  height: auto;
}

header div {
  min-width: 280px;
}

.main {
  display: flex;
}

.sidebar {
  min-width: 280px;
  background: #42b983;
}
</style>

で、コマンドプロンプトで、npm run serve コマンドを実行。

f:id:ts0818:20220115222700p:plain

f:id:ts0818:20220115222752p:plain

ブラウザで「http://localhost:8080/」にアクセス。

f:id:ts0818:20220115222913p:plain

デザインはドイヒーだけども、変更が反映されてます。

「SPA(Single Page Application)」って、結局のところ、コンテンツの数だけ「コンポーネント(「拡張子」が「.vue」のファイル)」を書くことになるって考えると、いまいちメリットが分かりにくい...

「Vue Router」とかも何か、微妙に痒い所に手が届かない感じな気がしてならない...

毎度モヤモヤ感が半端ない...

今回はこのへんで。