Stencilを使ったWebComponentの作り方

Stencilとは

StencilはVirtual DOM, Async rendering, Reactive data-binding, JSXなどの機能が組み込まれた標準ベースのWebComponentを生成するコンパイラーです。

Stencilで生成されたWebComponentはAngular, Vue, Reactなどのフレームワークの壁を超えて使い回すことができ、さらにはVanilla JSでも使うことできます。

Stencilの導入

npm init stencil

上記のinitを実行すると、開始するプロジェクトのタイプが選べます。

? Pick a starter › - Use arrow-keys. Return to submit.

   ionic-pwa     Everything you need to build fast, production ready PWAs
   app           Minimal starter for building a Stencil app or website
❯  component     Collection of web components that can be used anywhere

今回はひとまずコンポーネントを一つ作るところを目的としたいので、componentを選択してください。

最新バージョンのパッケージをインストールします。

npm install @stencil/core@latest --save-exact

以下のコマンドを叩いて開発サーバーを立ち上げましょう。

npm start

これでStencilでWebComponentを作る準備が整いました。

WebComponentを作る

さっそくWebComponentを作ってみましょう。

Stencilで扱うコンポーネントはJSXで構築されますが、Typescriptも使用されているため、新たにコンポーネントを作るときは.tsxファイルが必要になります。

ではsrc/components配下にmy-first-component.tsxを作成し、
必要なモジュールのインポートとコンポーネントの設定をしていきます。

// my-first-component.tsx
import { Component, Prop, h } from '@stencil/core'

@Component({
  tag: 'my-first-component'
})

Stencilで扱うコンポーネントは必ず@Component()デコレーターで装飾してあげる必要があります。
tagオプションでWebComponentとして使用するときの名前を設定します。

続いて実装をしていきます。

// my-first-component.tsx
import { Component, Prop, h } from '@stencil/core'

@Component({
  tag: 'my-first-component'
})
export class MyComponent {
  @props() name: string
}

使う側で値を提供したい場合は@Propsデコレーターを使用してプロパティを定義します。

@Props() PropatyName: string | number | boolean | Object | Array

続いてDOMにレンダリングするためのrender()を使用してJSXを記述していきます。
定義したプロパティは{this.PropatyName}と呼び出すことができます。

// my-first-component.tsx
import { Component, Prop, h } from '@stencil/core'

@Component({
  tag: 'my-first-component'
})
export class MyComponent {
  @props() name: string
  
  render() {
    return (
      <p>My name is {this.name}</p>
    )
  }
}

これで簡単なWebComponentを作ることができました。
試しにsrc/index.html<my-first-component name="Taro" />と記述して、ブラウザを確認してみてください。
Stencilでは作成したWebComponentをインポートしなくても表示されたと思います。

まとめ

Stencilでは、今回紹介した内容以外にもオプションやデコレーター、ライフサイクルメソッドなどが用意されています。
これについては別の記事で紹介したいと思います。