Minzeは最新のJavaScriptライブラリである。Webコンポーネントを作成する際の多くの難題を抽象化している。最小限のオーバーヘッド（MinifiedかつCompressedで2kb）で提供され、開発者のための優れた人間工学が考慮されている。
Webコンポーネントを使うと、開発者は、アプリケーションからデザイン（CSS）と機能（JavaScript）をカプセル化する再利用可能なカスタムHTML要素を作成できる。
Webコンポーネントはフレームワークに依存しないため、Ionicのようなライブラリは、簡単に複数のフレームワーク（Angular、Vue.js、React）をサポートできる。それらのコンポーネントを何度も書き直す必要はない。
Minzeには、開発者が簡単なインストールプロセスを実行できる簡単なセットアップスクリプトが付属している。
npm init minze@latest
最初のプロジェクトには3つの単純なWebコンポーネントが含まれている。これが、素晴らしい出発点を提供しており、ライブラリの重要な機能を示している。
Minzeを使ってWebコンポーネントを作成する方法を探るために、MinzeCounterの例のシンプルなバージョンを見てみよう。
export class MinzeCounter extends MinzeElement {
html = () => `
<div class="count">
<span>Count is:</span>
${this.count}
</div>
`
css = () => `
.count {
text-align: center;
}
`
reactive = [['count', 0]]
increaseCount = () => this.count++
eventListeners = [['.button', 'click', this.increaseCount]]
}
「html」メソッドと「css」メソッドは、コンポーネントHTMLとCSSを含む文字列を返す。コンポーネントはかなり小さいはずなので、テンプレート文字列をそのまま返すとうまくいく。
MinzeElementクラスで定義されたプロパティは「non-reactive」と見なされる。つまり、プロパティを変更しても要素は再レンダリングされない。
reactiveプロパティは、文字列あるいはタプルの配列が許される「reactive」プロパティを使って定義される。reactiveプロパティ内で定義された値を変更すると、コンポーネントの再描画がトリガーされる。
外部属性を受け入れるには、開発者は「attrs」プロパティを使う必要がある。これは「reactive」プロパティと同様に機能するが、2つの重要な注意事項がある。
- 「attrs」プロパティは、ダッシュケース記法（ワードをハイフンでつなぐ）を使う必要がある
- 開発者は、「observedAttributes」プロパティを「onAttributeChange」メソッドと組み合わせて、属性の変更を追跡できる。つまり、次の通りである。
attrs = [
'example-attribute'
]
static observedAttributes = ['example-attribute']
onAttributeChange(name, oldValue, newValue) {
console.log(this.exampleAttribute)
}
TypeScriptを使う開発者の場合、TypeScriptはクラスで直接定義されていないプロパティを認識しないため、「reactive」または「attrs」として定義されたプロパティにアクセスするには、これらのプロパティ定義を含むインターフェイスが必要になる。
最後に、Minze.defineを使って、作成された新しいカスタム要素を定義できる。開発者は、カスタムコンポーネント名は常に少なくとも2つの単語で構成されなければならないことを覚えておく必要がある。
Minzeは、MITライセンスの下で公開されているオープンソースプロジェクトである。ソースコードはMinze Githubリポジトリから入手でき、開発者は投稿ガイドラインに従って投稿することが推奨されている。