はじめかた

React や Vue から来て、何ひとつ腑に落ちませんか？まず

メンタルモデルを読んでください。computed、watch、ライフサイクルフック、データ読み込みがどこへ行ったのかを 5 分で。このページは、空のフォルダーから動作するリアクティブな $mol アプリまでを案内します。所要時間はおよそ 15 分。以下のスニペットはすべて実際に動くコードです——そのままコピーしてください。コンポーネントはふつうの TypeScript で書きます。$mol にはコンポーネントを記述するもっと短い形式 view.tree もあり、それには次のページで出会います。ここでは必要ありません。どちらで書いても、$mol のコンポーネントはただのクラスです。

必要なもの

Node.js 18+ と git。リストはこれで全部です。グローバル CLI をインストールしたり、後で理解しなければならない定型コードを生成したりする必要はありません。$mol アプリは MAM ワークスペースの中で暮らし、そのワークスペースはすでにビルドと配信の方法を知っています。

1. ワークスペースを入手する

MAM は $mol のビルドツールでありモジュールレジストリです。一度クローンしてインストールします。1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start は http://localhost:9080/ で開発サーバーを起動します。ファイルを監視して自動的に再ビルドするので、専用のターミナルで動かしたままにしておきましょう。

2. モジュールを作る

$mol アプリは単なるフォルダーです。名前空間（あなた自身のもの、例えば my）と名前（hello）を選びます。1mkdir -p my/hello覚えておくべき一つのルール：コンポーネント名の中のアンダースコアはフォルダーの区切りです。$my_hello は my/hello/ に、$my_hello_form なら my/hello/form/ に置かれます。モジュールのフォルダー名にアンダースコアは決して含まれません。では my/hello/ の中に 2 つのファイルを追加します。

index.html — エントリーポイント

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>mol_view_root="$my_hello" 属性が、ページの読み込み時にコンポーネントをマウントします。

hello.view.ts — コンポーネント

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}GitHub でこのページを編集役に立ちましたか？はいいいえ前へメンタルモデル次へTypeScript から view.tree へこのページの内容必要なもの 1. ワークスペースを入手する 2. モジュールを作る index.html — エントリーポイント hello.view.ts — コンポーネント 3. 実行する 4. 二つ目のリアクティブな値を足す 5. ビルドを確認する $mol アプリを作れました