はじめに

今まで静的サイトのフロントは jQuery を使ってきていたけど、いい加減開発するのもメンテするのも辛くなってきたし、
可能だったらメンテナンス性を上げるためにも Vue.js を使って開発できないかな〜、と思っていたら、なんと一年も前に公式から Web Components を実現するためのライブラリが発表されていることを確認。

vuejs/vue-web-component-wrapper: Wrap a Vue component as a web component / custom element.

しかもしかも、vue-cliの公式ページにも Web components 向けにビルドができることを匂わせるページを発見。

Build Targets | Vue CLI 3

これは Vue.js で Web components をやるっきゃない！と思い実装してみることにしました。

環境構築

環境構築にはvue-cliの3系を使用します。
また、今回の開発方針として、３系でデフォルトとなる TypeScript の流れを汲みつつ、開発速度を保つために以下の構成を採用したいと思います。

TypeScript で書けるようにする
css は Stylus, テンプレートは pug で記述できるようにする
vue-property-decoratorを使用し、クラススタイルでのコンポーネントを記述できるように

また、本題は Web Components ですが、TypeScript + クラススタイル (+ pug and stylus) のサンプルとしても参考にして頂けるようにコードを作成していこうと思います！

では早速vue-cliをインストールしていきましょう。

$ npm i -g @vue/cli

なお、2系など古いvue-cliが既に入っている方は、既存のものを削除し3系を新たにインストールし直しましょう。
今回は3系で新たに追加された機能をばんばん使って参ります。

2.xなど古いバージョンのvue-cliが入っていた場合

# 古いvue-cliを削除し、新しいものを入れ直す
$ npm uninstall -g vue-cli
$ npm install -g @vue/cli

そして、適当なディレクトリ内に新たな Vue.js のプロジェクトを作成します。

# プロジェクト名は適宜変更して良いです
$ vue create vue-webcomponents-sample

# こんな質問を聞かれると思います
Vue CLI v3.4.1
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
❯ Manually select features

ここで注意なのですが、今回はデフォルトのプリセットを使用せずマニュアルで指定するようにします。
最初の質問でManually select featuresを選択した後、概ね以下のようになるように設定をしましょう。

これで TypeScript + Stylus を使ってクラススタイルでコンポーネントを書けるようになりました！
ここまでの構築をvue-cliだけで完結できちゃうのはすごいですよね。

あとは pug が使えるようにすれば環境構築は完了です。

$ cd vue-webcomponents-sample
$  yarn add -D pug pug-loader pug-plain-loader

では、以下のコマンドを叩いてローカルサーバが立ち上がり、http://localhost:8080/ にアクセスして以下の画面が見られるかどうか確認しましょう！

$ cd vue-webcomponents-sample
$ yarn serve

これで環境構築は完了です！

実装

今回はお試しということで、Vue.jsの公式にあるTodoMVCの例に少しアレンジを加えたものを Web Components にしていこうと思います。

コンポーネントの作成手順もこれから載せていきますが、全てのソースコードは以下のgithubリポジトリにて公開しております。
本記事中では省いたところも全て閲覧できますので、ぜひ一度ご高覧下さい。
sugoikondo/vue-webcomponents-sample

0.前準備

まずsrc ディレクトリ内に以下のような構成でファイルを生成します。

src/
├── App.vue
├── assets
├── components
│   ├── TodoForm.vue # 新規Todo追加用のフォーム
│   └── TodoItem.vue # Todoリストのアイテム
├── main.ts
├── services
│   └── localStorage.ts # todoの保存用
├── shims-tsx.d.ts
├── shims-vue.d.ts
├── types
│   └── todo.ts # Todoの型定義
└── views
    └── Todo.vue # Todoコンポーネント本体。これが Web Components になるイメージ

viewsというディレクトリ名は個人的に納得がいっていませんが、一旦この名称で進めていきます。
いわゆる Web components として使用する単位のものをviewsに、views が使用する部品類をcomponentsに格納していくイメージです。

1.ストレージと型定義の準備

最初にtodoの型定義ファイルの準備と、todoの保存先を作っていきましょう。
無くても問題はありませんが、todo一つ一つにユニークなIDを割り振るために今回は外部ライブラリのshortidを使用したいと思います。

$ yarn install shortid

そして該当ファイルを以下のようにします。

types/todo.ts

import shortid from 'shortid'

export class Todo {
  id:    string
  title: string  = ''
  done:  boolean = false

  constructor(title: string, done: boolean = false) {
    this.id    = shortid.generate()
    this.title = title
    this.done  = done
  }
}

components/TodoForm.vue

services/localStorage.ts

import { Todo } from '@/types/todo'

const STORAGE_KEY = 'webcomponent-todos-localstorage'

export const todoStorage = {
  fetch: () =>  {
    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  },
  save: (todos: Todo[]) => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

2. TodoItemとTodoFormコンポーネントの作成

次にtodo一つ一つを表すTodoItemコンポーネントと、todoを新規追加するTodoFormコンポーネントを作成します。

components/TodoItem.vue

<template lang="pug">
  .todo-item(@mouseover="hovered = true" @mouseleave="hovered = false")
    input.toggle(type="checkbox" v-model="todo.done")
    label.title(v-if="!editorActive" :class="{ done: todo.done }" @dblclick="editorActive = true")
      | {{ todo.title }}
    input(v-if="editorActive" ref="editor" type="text" v-model="todo.title" @blur="editorActive = false")
    button.destroy(:class="{ active: hovered }" @click="removeSelf") ×
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { Todo } from '@/types/todo'

@Component
export default class TodoItem extends Vue {
  $refs!: { editor: HTMLFormElement }

  @Prop({ required: true }) todo!: Todo
  private hovered:      boolean = false
  private editorActive: boolean = false

  private removeSelf(): void {
    this.$emit('remove', this.todo.id)
  }

  @Watch('editorActive') private setFocusToInput(value: boolean): void {
    if (value) this.$nextTick().then(() => this.$refs.editor.focus())
  }
}
</script>

<style lang="stylus" scoped>
.todo-item
  display       flex
  align-items   center
  font-size     24px
  min-height    2.6em
  border-bottom 1px solid #ededed

  .toggle
    flex       0 0 auto
    text-align center
    width      40px
    height     40px
    margin     0 8px
    border     none
  label, input
    flex        1 0 auto
    box-sizing  border-box
    text-align  left
    word-break  break-all
    display     block
    line-height 1.2em
    transition  color 0.4s
    color       #4d4d4d
    border      none
    &.done
      text-decoration line-through
      color           #d9d9d9

  button.destroy
    flex       0 0 auto
    width      40px
    height     40px
    font-size  30px
    transition color .1s ease-out
    border     none
    appearance none
    color            transparent
    background-color transparent
    &.active
      color #cc9a9a
</style>

components/TodoForm.vue

<template lang="pug">
  .todo-form
    input(type="text" autofocus v-model="formText" @keyup.enter="submitNewTodo()" placeholder="今日は何をしますか？")
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
import { Todo } from '@/types/todo'

@Component
export default class TodoForm extends Vue {
  private formText: string = ''

  submitNewTodo(): Todo | void {
    const value = this.formText.length && this.formText.trim()
    if (value) {
      this.formText = ''
      this.$emit('submit', new Todo(value, false))
    }
  }
}
</script>

<style lang="stylus" scoped>
.todo-form
  input
    padding     16px 16px 16px 54px
    border      none
    background  rgba(0, 0, 0, 0.003)
    box-shadow  inset 0 -2px 1px rgba(0,0,0,0.03)
    position    relative
    margin      0
    width       100%
    font-size   24px
    font-family inherit
    font-weight inherit
    line-height 1.4em
    box-sizing  border-box
    -webkit-font-smoothing antialiased
</style>

3.コンポーネントの結合

では最後に、Todo.vueで今まで作成したコンポーネントをつなぎこんでいきましょう。

views/Todo.vue

<template lang="pug">
  .todo
    TodoForm(@submit="appendNewTodo($event)")
    .todo-list
      TodoItem(v-for="todo in todos", :todo="todo", :key="todo.id", @remove="removeTodo($event)")
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Todo as TodoType } from '@/types/todo'
import { todoStorage } from '@/services/localStorage'
import TodoForm from '@/components/TodoForm.vue'
import TodoItem from '@/components/TodoItem.vue'

@Component({
  components: { TodoForm, TodoItem }
})
export default class Todo extends Vue {
  todos: TodoType[] = []

  created(): void {
   this.todos = todoStorage.fetch()
  }

  @Watch('todos') autosaveTodosOnChange() {
    todoStorage.save(this.todos)
  }

  appendNewTodo(todo: TodoType): void {
    this.todos = this.todos.concat(todo)
  }

  removeTodo(id: string) : void {
    this.todos = this.todos.filter(todo => todo.id !== id)
  }
}
</script>

<style lang="stylus" scoped>
.todo
  background #fff
  margin     130px 0 40px 0
  position   relative
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)
</style>

Web Components の生成

長くなりましたが、**ここからが本題です。**早速作成したTodoコンポーネントを Web Components として利用できるようにしましょう。

vue-cli でビルド

プロジェクト内のルートディレクトリにて、以下のコマンドを叩きます。

$ yarn build --target wc-async --name wc-todo 'src/views/Todo.vue'

各オプションについて軽くまとめると、

--target wc-async
ビルド対象を指定します。
wcでも良いですが、wc-asyncを指定することによって動的インポートが使えるようになるので、基本的にこちらで問題ないと思います。
今回のようにビルドするファイルが一つの場合は、wcを指定した時と同じ出力が得られます。

--name wc-todo
コンポーネントにつける名前を指定します。
これがHTML内で使用する際の名前です。<wc-todo>のように使うことが可能になります。

注意として、今回のように生成するコンポーネントが一つの場合は、必ずハイフンを含めなくてはいけません。
また、生成するコンポーネントが複数の場合には、--nameで指定した名前がコンポーネントの名前のプレフィックスとしてつくようになります。

# 複数コンポーネントが存在する状態で叩くと、
$ yarn build --target wc-async --name prefix 'src/views/*.vue'

# HTML内でこのように呼べるようになります
<prefix-todo>

'src/views/Todo.vue'
Web Components として生成するファイルを指定します。
もし複数のコンポーネントを生成する場合には、'src/views/*.vue'のようにglobで指定します。

ビルドが成功すると、dist配下にjsファイルが生成されます。

生成したコンポーネントの使用

では早速生成したコンポーネントを確認して見ましょう！
プロジェクトのルートディレクトリにsample.htmlのようなhtmlファイルを作成し、以下のようにします。

sample.html

<html lang="ja">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <script src="dist/wc-todo.min.js"></script>

    <div style="width: 80vw; margin: 0 auto;">
      <!-- この wc-todo が Web Components です -->
      <wc-todo></wc-todo>
    </div>
  </body>
</html>

そしてブラウザにて表示させ、以下のように表示されていればOKです！

さいごに

再度の掲載になりますが、今回作成したソースコードは以下のリポジトリに格納してありますので、よろしければご高覧ください。
Web Components だけでなく、Vue.js のソースコードとしても皆様の参考になるようなコードを目指したので、少しでも参考にして頂けると幸いです。
sugoikondo/vue-webcomponents-sample

また、もし記事内で何か良くないところや問題点などございましたら、遠慮なくお申し付け下さい。
すぐに修正させて頂きます。

最後になりますが、ここまでお読み頂き本当にありがとうございました！

はじめに

環境構築

実装

0.前準備

1.ストレージと型定義の準備

types/todo.ts

components/TodoForm.vue

2. TodoItemとTodoFormコンポーネントの作成

components/TodoItem.vue

components/TodoForm.vue

3.コンポーネントの結合

views/Todo.vue

Web Components の生成

vue-cli でビルド

生成したコンポーネントの使用

さいごに

参考資料