Vanilla JS と jQueryだけで動く軽量フレームワーク『Lunanthus(ルナンサス)』を作りました
「Lunanthus」の設計思想と名前の由来
現在、日本国内で個人が Web サイトを作ろうとした場合、多くの選択肢は次のいずれかに収束します。
-
VPS（仮想サーバー）
→ 自由度は高いが、個人利用にはコストが比較的高い -
レンタルサーバー
→ 手頃だが PHP 以外のサーバーサイド技術がほぼ使えない -
GitHub Pages などの無料ホスティング
→ 完全な静的サイトのみ対応で、サーバーサイド処理は不可
結果として、特にサーバーサイド JavaScript（Node.js）を個人で運用するのが難しい環境になっています。
その一方で、ユーザー体験を向上させるために SPA や PWA の需要は増え続けています。
しかし、この “PHP または完全静的サイトしか使えない” という環境下で、
簡単に SPA + PWA を構築できる軽量フレームワーク がほとんど存在していませんでした。
そこで生まれたのが Lunanthus(ルナンサス) です。
■ 名前の由来：ルナリア（Lunaria）× 金木犀（Osmanthus）
Lunanthus という名称は、
「ルナリア（Lunaria）」と「金木犀（Osmanthus）」を組み合わせた造語 です。
この名前には以下の意味があります。
● Lunaria（ルナリア）に込められた想い
ルナリアという言葉を選んだ背景には、
自分のすべての原動力であり始まりとなった、ソーシャルゲーム『オルタナティブガールズ』の主題歌『ルナリア』 があります。
毎日ゲームを起動したときに流れてくるルナリアを聴いたときの胸の高鳴り、ワクワク感。
Lunanthus というフレームワークにも、そのときの気持ちを感じてほしいという意味を込めています。
● Osmanthus（金木犀）に込めた気持ち
金木犀は、私が一番好きな花。
甘く優しい香りは、ふと心を穏やかにしてくれます。
Lunanthus に金木犀の要素を重ねた理由は、
「そばに置いておきたくなる、安心できる存在」 を表現したかったから。
軽やかで透明感がありながら、どこかほっとできる。
そんな技術になってほしいという願いが、この名前には込められています。
■ Lunanthus が解決したかった課題
日本の個人開発環境では、
“Node.js が動かない構成でも SPA を作りたい”
というニーズがありながら、対応する選択肢がほぼ存在しませんでした。
Lunanthus は以下の点を重視して設計しています。
- ビルド不要
- PHP または完全静的環境でも動作
- Vanilla JS + jQuery だけで SPA を実現
- Service Worker を利用した PWA 化
- 小規模サーバーでも運用可能
「どんな環境でも置くだけで動く」
これが Lunanthus の最大のコンセプトです。
■ Ajax + History API による軽量SPA
主要フレームワークに比べて Lunanthus は非常にシンプルです。
- リンククリックをフック
- Ajax でコンテンツを取得
- DOM の指定領域に差し替え
- History API で URL を自然に変更
- 戻る・進むにも対応
既存の DOM を壊さず、“静的サイトをそのまま SPA 化する” ことができます。
■ ページごとのスクリプト再ロード機能
SPA の懸念点である “ページ固有 JS が動かなくなる問題” を解決するため、
data-script 属性を読み取って JS を動的に再ロードする仕組みを実装しました。
- ページ初期化処理をページ側に閉じ込められる
- 必要な JS のみを自動読込
- グローバルスコープを汚しにくい
軽量フレームワークにちょうど良い柔軟性を持たせています。
■ PWA 対応と現在の課題
Lunanthus には PWA を組み込んでいます。
- オフラインキャッシュ
- 高速表示
- バージョン付きキャッシュ戦略
- manifest.json によるアプリ化
ただし現時点では、キャッシュ戦略が一部環境で正しく動作しない問題が確認されており、
フレームワーク本体のアップデート方式もまだ正式に固めていません。
そのため、
PWA 部分やアップデートの仕組み改善のためのコントリビューションを積極的に募集しています。
■ jQuery をあえて採用している理由
「モダンな SPA は jQuery を使わない」という風潮はありますが、
Lunanthus は敢えて jQuery のメリットを活かしています。
- DOM 操作が直感的で短く書ける
- 対応ブラウザが多い
- 既存サイトに後付けしやすい
- 小規模フレームワークとして重すぎない
“実用性” を優先したシンプルな選択です。
■ Lunanthus が向いているケース
- レンタルサーバーや GitHub Pages でも SPA/PWA を作りたい
- Node.js が使えない環境で UX を向上させたい
- React・Vue はオーバースペック
- 小規模〜中規模サイトを高速化したい
- 既存の jQuery サイトを段階的に SPA 化したい
日本の「個人利用の実情」に合わせた構成になっています。
■ まとめ：個人開発に“ちょうど良い”フレームワーク
Lunanthus は、
「個人開発でも無理なく使える SPA / PWA フレームワークを作りたい」
という背景から誕生しました。
- Vanilla JS + jQuery
- 軽量 SPA
- PWA 対応
- PHP / 静的サイトでもそのまま動く
- 改善・機能追加コミットを募集中
GitHub リポジトリ：
https://github.com/MizuiMiduki/Lunanthus
興味があれば、気軽にコントリビュートしてください。