Luna エコシステム概要

Lunaは、MoonBitとJavaScriptでモダンなWebアプリケーションを構築するためのツールスイートです。

どれを使うべき？

選択フローチャート

Webサイトが必要？
├── 静的コンテンツ (ドキュメント, ブログ) → Sol SSG
└── 動的アプリ (認証, API) → Sol

学習目的？
├── JavaScript を知っている → JS チュートリアル
└── MoonBit を知っている → MoonBit チュートリアル

なぜ Luna なのか？

既存のソリューションへの不満から生まれました：

• React - パフォーマンスが重要なアプリケーションには大きすぎる

• Qwik / Solid - コンパイル時の変換がデバッグの邪魔になる

• WebComponentsファーストのフレームワークがなかった - 今までは

設計思想

コンパイル時最適化が不要なほど小さい

Lunaは意図的にミニマルです。フレームワークのオーバーヘッドは無視できるレベルなので、コンパイル時の最適化は不要です。

WebComponents SSR（世界初の実装）

Lunaは WebComponents SSR + Hydration を完全サポートした初めてのフレームワーク です。

• ブラウザ標準を優先（フレームワーク抽象化より）

• Shadow DOMによるスタイルカプセル化

• サーバーレンダリング用のDeclarative Shadow DOM

ランタイムパフォーマンス

Fine-grained reactivityにより、実際のシナリオで 5倍のパフォーマンス を実現。

アーキテクチャ

┌─────────────────────────────────────────────────────────────┐
│                     あなたのアプリケーション                   │
├─────────────────────────────────────────────────────────────┤
│  Sol SSG (SSG)          │  Sol (SSR Framework)                 │
│  静的ドキュメントサイト  │  フルスタックアプリ                   │
├─────────────────────────────────────────────────────────────┤
│                       Luna UI                                 │
│           Signals, Islands, Hydration, Components            │
├─────────────────────────────────────────────────────────────┤
│                      MoonBit / JavaScript                    │
└─────────────────────────────────────────────────────────────┘

プロジェクト

Luna UI - リアクティブUIライブラリ

すべての基盤：

• Signals - Fine-grained リアクティブプリミティブ

• Islands - 最適なパフォーマンスのための部分的ハイドレーション

• Components - 宣言的構文によるWeb Components

• Hydration - スマートなローディング戦略（load, idle, visible, media）

Sol SSG - 静的サイトジェネレーター

Markdownからドキュメントサイトやブログを構築：

• フロントマター対応のMarkdown

• 自動生成されるナビゲーションとサイドバー

• 多言語対応（i18n）

• Shikiによるシンタックスハイライト

• View TransitionsによるSPAナビゲーション

このドキュメントサイトもSol SSGで構築されています。

Sol - フルスタックフレームワーク

Hono統合のサーバーサイドレンダリングフレームワーク：

• SSR + 部分的ハイドレーションのIsland Architecture

• ミドルウェア付きの宣言的ルーティング

• CSRF保護付きのServer Actions

• ネストされたレイアウト

• ストリーミングSSR

npmパッケージ

クイックスタート

Luna UI (JavaScript)

npx @luna_ui/luna new myapp
cd myapp && npm install && npm run dev

Luna UI (MoonBit)

npx @luna_ui/luna new myapp --mbt
cd myapp && moon update && npm install && npm run dev

Sol SSG (ドキュメントサイト)

npx @luna_ui/sol new my-docs --ssg
cd my-docs && npm install && npm run dev

学習パス

JavaScript/TypeScript 開発者向け

1. JavaScript チュートリアルから始める

2. SignalsとIslandsを学ぶ

3. Sol SSGでサイトを、Solでアプリを構築

MoonBit 開発者向け

1. MoonBit チュートリアルから始める

2. MoonBit API リファレンスを探索

3. Solでサーバーサイドコンポーネントを構築

機能比較

ステータス

実験的 - すべてのプロジェクトは活発に開発中です。APIは変更される可能性があります。

MoonBitで構築 - クラウドとエッジコンピューティング向けに設計された高速で安全な言語。