smalljs$mol検索⌘ Kドキュメントプレイグラウンド比較エコシステム概要JA
インストールGetting StartedはじめにメンタルモデルはじめかたTypeScript から view.tree へプロジェクト構成ツールEssentialsインストールビュー状態とリアクティビティルーティングレンダリングテストデプロイトラブルシューティングDataデータ取得データスキーマGiper BazaMoreショーケースReact、Vue、Svelte からクックブックAdvancedプラグインモジュールのメタデータオフラインゴーストビューAboutよくある質問チームリリースAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

インストール

はじめに では、最初のアプリを一歩ずつ作っていきます。このページはリファレンスです。$mol プロジェクトがどう構成され、ビルドがどう動くかを説明します。

必要環境

Node.js 24+ と git。それ以外にグローバルへインストールするものはありません。

MAM ワークスペース

$mol アプリは MAM（ビルドツール兼モジュールレジストリ）の中で動きます。一度クローンし、その中で自分のモジュールを開発します。1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start は http://localhost:9080/ で監視付きの開発サーバーを起動します。保存するたびに再ビルドし、依存関係を自動で解決します。バンドラーの設定を保守する必要は一切ありません。クローンせずに使う、 MAM の README の公式クイックスタートもあります。1mkdir mam && cd mam2npm exec mam@latest空のフォルダで同じ開発サーバーが起動します。それでもクローンをおすすめします。作業はどのみち MAM の中で行いますし、クローンにはエディタ設定（.vscode）と .npmrc が最初から入っています。

ブラウザで

マシンに何も入れていませんか？ GitHub Codespaces でワークスペースを開いてください: codespaces.new/hyoo-ru/mam。GitHub のマシン上で動くブラウザ版 VS Code で、Node.js は最初から入っています。ターミナルで npm install と npm start を実行し、転送されたポート 9080 を開きます。

モジュールの命名規則

すべてのコンポーネント名はフォルダのパスに対応し、アンダースコアはそれぞれフォルダの区切りです。1$my_app → my/app/2$my_app_header → my/app/header/モジュールのフォルダ名にアンダースコアを含めることはありません。複数単語の名前には入れ子のフォルダを使ってください。使っているコンポーネントがバンドルに現れない場合、ほぼ必ずフォルダのパスとクラス名が一致していません。

モジュールの構造

コンポーネントはファイルの入ったフォルダです。主なファイル：ファイル役割アプリの index.html はルートコンポーネントをマウントします。1<body mol_view_root>2 <div mol_view_root="$my_app"></div>3 <script src="web.js"></script>4</body>

本番用ビルド

開発サーバーは都度ビルドしますが、ワークスペースのルートから任意のモジュールを明示的にビルドすることもできます。1npm start my/appGitHub でこのページを編集役に立ちましたか？はいいいえ前へツール次へビューこのページの内容必要環境MAM ワークスペースブラウザでモジュールの命名規則モジュールの構造本番用ビルドnpm パッケージの追加実行時にパッケージを読み込む次へ
Type to search the documentation.