Zenn
🔖

宣言的UIなJSフレームワーク

2023/07/23に公開
JavaScript
framework
MVVM
declarative
tech

https://github.com/mogera551/quel/

特徴

  • コンポーネントベース
  • 宣言的なView
  • クラスベースの状態管理
  • 低学習コスト → おっさんにやさしい

コンポーネントベース

  • カスタムタグとコンポーネントのView、振る舞いを定義していく
<body>
<!-- カスタムタグ -->
<myapp-main></myapp-main>

<script type="module">
import {registerComponentModules} from "/path/to/quel.js";
import * as myappMain from "/path/to/main.js"; // コンポーネント定義

// カスタムタグとコンポーネント定義を関連付ける
registerComponentModules({"myapp-main":myappMain});
</script>
</body>
main.js
// コンポーネントのViewと振る舞いを定義

// Viewの定義(exportする)
export const html = `
<div>{{ message }}</div>
`;

// ViewModelの定義(exportする)
export class ViewModel {
  message = "welcome to quel";
}

宣言的なView

  • Viewはhtmlで記述し、宣言的に定義する
  • 繰り返し、分岐を表現できる
  • 繰り返し中はワイルカードを用いたドット記法を使用し宣言的に記述できる
  • フィルターが使用できる
Viewの定義
<!-- ViewModelのmessageプロパティを表示 -->
{{ message }}

<!-- ViewModelのmessageプロパティと双方向バインド -->
<input data-bind="message">

<!-- ViewModelのisExistsプロパティで表示を切り替える(分岐) -->
{{ if:isExists }}
<div>message is exists</div>
{{ else: }}
<div>message is not exists</div>
{{ end: }}

<!-- ViewModelのmembersプロパティを繰り返し表示(繰り返し) -->
<ul>
  {{ loop:members }}
  <!-- ワイルドカード(*)を用いたドット記法 -->
  <li>{{ members.*.name }}</li>
  {{ end: }}
</ul>

<!-- フィルターを使用できる -->
{{ message|toUpperCase }}

クラスベースの状態管理

  • クラスのプロパティで状態を管理
  • アクセサプロパティ(getter)でComputed Propertyみたいなのができる(※依存関係の記述が必要)
  • ドット記法を用いたアクセサプロパティを定義できる
Viewの定義
<input type="number" data-bind="count|number">
{{ double }}

{{ loop:members }}
<div>{{ members.*.name }}, {{ members.*.sabaAge }}</div>
{{ end: }}


class ViewModel {
  count = 0; // Viewの入力が変更されると反映
  
  // Computed Propertyみたいなの
  get double() {
    return this.count * 2;
  }

  members = [
    { name:"山田", age:35 },
    { name:"鈴木", age:32 },
    { name:"佐藤", age:34 },
  ];

  // ドット記法を用いたアクセサプロパティ、ワイルドカード(*)が使える!!!
  // memberのプロパティにsabaAgeがなくても表示できる
  get "members.*.sabaAge"() {
    return this["members.*.age"] - 5; // 5歳若く表示!!!
  }

  // 依存関係の記述
  $dependentProps = {
    "double": [ "count" ],
    "members.*.sabaAge": [ "members.*.age" ],
  };
}

低学習コスト

  • トランスパイルなどのツール不要
  • ES準拠

Discussion