Zenn
🐁

簡単に状態管理ができるStructiveで、"Hello World"を表示させるまで

に公開
frontend
フレームワーク
状態管理
javsscript
tech

Structiveとは？

StructiveはシングルファイルベースのWebコンポーネントを採用したビルドレスのフレームワークです。より宣言的な記述や状態管理のためのボイラープレートや状態フックを極力なくした構造駆動型テンプレートが特徴になります。
覚えることが以下の通り少なく、

  • 状態とUIテンプレートで同じ構造パスを使う
  • 状態の更新は構造パスで行う
  • getterで派生状態を作れる
  • ループ内では暗黙のインデックス($1、$2...)を使う

非常にシンプルであり学習しやすくなっています。しかし、今どきのフレームワークで求められる宣言的なUIとリアクティブ性をしっかりと備えています。

https://github.com/mogera551/Structive

https://github.com/mogera551/Structive-Example

Structiveで"Hello World"を表示させるまでを解説します。

解説していくファイルはHello Worldサンプルの内容と同じものになります。

ファイル構成

エントリーポイントとなるindex.htmlと、コンポーネントを定義するmain.st.htmlで構成することとします。

index.html (エントリーポイント)
main.st.html (コンポーネントファイル)

エントリーポイント(index.html)

エントリーポイントindex.htmlでは以下の内容を記述します

  • importmapの定義、エイリアス・オートローダーの定義
  • オートローダーの指定
  • タグの記述、オートローダーで定義したタグをボディに記述
importmapの定義

<script type="importmap">に読み込むファイルのエイリアスとオートロードするコンポーネントを定義します。"structive"はStructive本体のエイリアスでCDN配布されているURLを指定します。"structive"は固定キーワードで変更しないようにしてください。"@components/app-main"はオートロードするコンポーネントの定義でコンポーネントファイルの相対パスを指定します。@components/はオートロード対象を表し、app-mainはコンポーネントファイルに対応するタグ<app-main/>になります。

<script type="importmap">
{
  "imports": {
    "structive": "https://cdn.jsdelivr.net/gh/mogera551/Structive@latest/dist/structive.js",
    "@components/app-main": "./main.st.html"
  }
}
</script>
オートローダーの指定

importmapの定義の後ろに<script type="module"/>タグで、オートローダーのURLを指定します。オートローダーはCDNで配布されます。オートローダーはオプション指定によりいくつかのファイルが提供されていますが、ここでは一番シンプルなcomponents.jsを指定します。


<script type="module" src="https://cdn.jsdelivr.net/gh/mogera551/Structive@latest/dist/AutoLoaders/components.js"></script>
タグの記述

<body/>タグの中にimportmapのオートローダーで指定した<app-main/>タグを記述します

<body>
  <app-main></app-main>
</body>

コンポーネントファイル(main.st.html)

コンポーネントを定義するファイルで、VueやSvelteのようなシングルファイルコンポーネントを採用しています。ファイルはHTMLとほぼ同じです。<template/>にUIテンプレート部分を、<style/>にスタイル定義を,<script type="module"/>に状態管理を記述します。

UIテンプレート(<template/>)

UIテンプレートを記述します。ほぼHTMLですが、ブロック(for・if)、埋め込み（{{ }}）、属性バインド(data-bind)が独自構文として追加されています。messageを埋め込んでいます。

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>Welcome to the simple web component!</p>
  </div>
</template>
スタイルの定義(<style/>)

このコンポーネントに適用するスタイルの定義を記述します。ここでは<h1/>を赤くしています。

<style>
h1 {
  color: red;
}
</style>
状態管理(<script type="module/>")

状態管理コードを記述します。状態管理はクラスで定義しexportします。
状態はプロパティに定義します。ここではmessageを定義しています。

<script type="module">
export default class {
  message = 'Hello, World!';
}
</script>

まとめ

Structiveは、エントリポイントとコンポーネントファイルで構成される。
エントリポイントには、importmapの定義、オートローダーの指定、タグの記述が必要。
コンポーネントファイルには、UIテンプレート、スタイル定義、状態管理クラスの定義を記述。

Structiveの感想やメッセージをお待ちしています。

Discussion