はじめに
フロントエンドフレームワークというと、ReactやVue、最近ならSvelteあたりが真っ先に思い浮かぶと思います。でも個人的に最近気になっているのが、Markoというフレームワークなんですよ。
GitHubスター数14.3k、eBay社が開発・運用しているこのフレームワーク。正直なところ、日本ではあまり知名度が高くないんですが、「HTMLを再発明した」というコンセプトがなかなか面白いんです。
HTMLを書ける人なら、ほぼそのまま書き始められる。これ、意外と大事なポイントだと思うんですよね。
Markoとは
Markoは、宣言的でHTMLベースの言語として設計されたフレームワークです。公式サイトでは「HTML re-imagined（HTMLを再考した）」と表現されています。
ほぼすべての有効なHTMLがMarkoでも有効、というのが最大の特徴。ReactのJSXみたいに「classNameに書き換えなきゃ...」みたいな手間がないんです。
開発元はあのeBay。大規模ECサイトで実際に使われているという実績があるのは、選定する側としてはかなり安心材料ですね。
特徴・メリット
1. HTMLベースの直感的な構文
<div class="container">
<h1>Hello, ${name}</h1>
<p>Welcome to Marko</p>
</div>
見ての通り、ほぼ普通のHTMLです。変数展開は${}で行います。Reactを触ったことがある人なら、学習コストはかなり低いと思います。
2. ストリーミングレンダリング
これ、個人的にMarkoの一番すごいところだと思っています。
ページ全体の準備ができるまで待たずに、準備ができた部分から順次ブラウザに送信できるんです。体感的なページ表示速度が劇的に改善されます。
大規模なECサイトを運営しているeBayが作っているだけあって、パフォーマンスへのこだわりは本物です。
3. コンパイラベースの最適化
Markoは賢いコンパイラを持っていて、不要なコードをサブテンプレートレベルで削除してくれます。いわゆる「Islands Architecture」よりも効率的な細粒度バンドリングが可能です。
必要な部分だけを配信して、不要なハイドレーションはスキップ。これがページ読み込み速度に直結するんですよね。
4. フルスタックリアクティビティ
サーバーサイドとクライアントサイドの両方でリアクティブに動作します。状態管理の仕組みも組み込まれているので、別途Redux的なものを入れる必要がありません。
5. TypeScript対応
最近のフレームワークなら当たり前かもしれませんが、TypeScriptがネイティブでサポートされています。型推論と自動補完がしっかり効くので、開発体験は良好です。
インストール方法
新規プロジェクトの作成は驚くほど簡単です。
npm init marko
これだけで対話形式でプロジェクトがセットアップされます。
既存プロジェクトに追加する場合は：
npm install marko
ビルドツールとの統合も用意されていて、Webpack、Rollup、Viteなど主要なツールに対応しています。
基本的な使い方
カウンターの実装例
Markoでの状態管理は非常にシンプルです。
<let/count=0>
<button onClick() { count++ }>
Clicked ${count} times
</button>
<let/count=0>で状態を宣言して、onClickで更新するだけ。ReactのuseStateと比べると、かなりすっきりしていますね。
条件分岐
<if(user.isLoggedIn)>
<p>Welcome back, ${user.name}!</p>
</if>
<else>
<p>Please log in</p>
</else>
HTMLタグっぽい書き方で条件分岐が書けます。テンプレートエンジンを使ったことがある人には馴染みやすいと思います。
ループ処理
<ul>
<for|item| of=items>
<li>${item.name}</li>
</for>
</ul>
配列のイテレーションも直感的。|item|の部分で各要素を受け取ります。
コンポーネント化
Markoでは.markoファイルがそのままコンポーネントになります。
// components/button.marko
<button class="btn" onClick=input.onClick>
<${input.renderBody}/>
</button>
// 使用側
<button onClick() { console.log('clicked') }>
Click me
</button>
ファイル名がそのままタグ名になるので、importの記述すら不要。これ、地味に楽なんですよね。
実践的なユースケース
ECサイト
eBayで実際に使われているだけあって、ECサイトとの相性は抜群です。商品一覧のストリーミング表示、動的な価格更新、カート機能など、ECに必要な機能を効率よく実装できます。
コンテンツサイト
ブログやニュースサイトなど、SEOが重要なサイトでも威力を発揮します。サーバーサイドレンダリングがデフォルトで、ストリーミングによる高速表示が可能です。
ダッシュボード
リアクティブなデータ更新が必要なダッシュボード系のアプリケーションにも向いています。状態管理が組み込まれているので、追加のライブラリなしで対応できます。
React/Vueとの比較
30代になって思うのは、「何でもかんでもReact」という風潮に少し疑問を感じることがあるということ。
Markoは以下のような場面で選択肢になり得ます：
- HTMLテンプレートに慣れているチームメンバーが多い
- パフォーマンスが最優先で、ストリーミングSSRが必要
- 学習コストを抑えたい小〜中規模プロジェクト
- eBayのような大規模ECを参考にしたい
一方で、Reactエコシステムの豊富さには敵わない部分もあります。サードパーティライブラリの選択肢は限られるので、その点は考慮が必要ですね。
まとめ
Markoは「HTMLを再発明した」というコンセプト通り、HTMLを書ける人なら低い学習コストで始められるフレームワークです。
ストリーミングレンダリングによる高速表示、コンパイラベースの最適化、直感的な構文など、パフォーマンスと開発体験の両方を追求しているのが印象的でした。
正直なところ、日本での導入事例はまだ少ないですが、eBayという大規模サイトでの実績があるのは心強いですね。
次のプロジェクトで、ちょっと試してみようかなと思っています。
公式サイト: markojs.com GitHub: marko-js/marko