Marko – 宣言的なHTMLベース言語

 (markojs.com)
8 ポイント 投稿者 GN⁺ 2025-11-10 | 2件のコメント | WhatsAppで共有
  • HTML構文を拡張して動的・リアクティブなWebインターフェースを構築できる宣言的な言語で、既存のHTML利用者にとってなじみのある開発環境を提供
  • ストリーミングレンダリングにより、サーバーからコンテンツを即座に送信し、クライアントのJavaScriptバンドル読み込み前でも画面表示が可能
  • 細粒度バンドリング(fine-grained bundling) により不要なコード転送を最小化し、性能と読み込み速度を向上
  • 環境別最適化コンパイル(targeted compilation) により、ブラウザとサーバーそれぞれに適した効率的な出力を生成
  • TypeScript統合サポートと豊富なエディター機能により、開発生産性とコード品質を向上

Marko の概要

  • MarkoはHTMLを再構想した宣言的言語で、動的かつリアクティブなユーザーインターフェースの構築を目的としている
    • ほとんどの有効なHTMLはMarkoでもそのまま使用可能
    • HTML構文を拡張し、モダンなアプリケーションを宣言的に記述できる
  • eBay.comのような大規模トラフィックサイトで実運用に利用されている
  • HTML、CSS、JavaScriptを知っていれば、特別な学習コストなしですぐに活用できる

主な特徴

  • ストリーミングレンダリング(Streaming) 機能により、サーバーが準備できたコンテンツを即座に送信
    • クライアント側のJavaScriptバンドルが読み込まれる前でも初期画面を表示可能
    • HTML、画像、アセットが非同期に読み込まれ、高速な初回描画を実現
  • 細粒度バンドリング(Fine-Grained Bundling) により、必要なコードだけを送信
    • 未使用コードの削除や、下位テンプレートレベルで不要なハイドレーションを省略
    • 「Lean by default, Fast by design」という思想で設計
  • 環境別最適化コンパイル(Targeted Compilation) をサポート
    • ブラウザとサーバーの違いを考慮し、各環境に合わせた最適化済み出力を生成
    • より高速なロード、より小さなバンドル、1つの統合言語で実現

コード例と構文

  • HTMLとJavaScriptを組み合わせた簡潔な構文を提供 
    <let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>
  • 同じコードを簡潔な記法でも記述可能 
    let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times
  • <for>, <if>, <await>, <const>, <define> などの拡張タグセットを提供
    • HTMLの基本タグとMarko専用タグを混在して使用可能

パフォーマンスと拡張性

  • 高速な初回描画(Faster First Paint) によりユーザー体験を改善
  • スケーラブル: シンプルなHTMLテンプレートから複雑なコンポーネント構造まで柔軟に拡張可能
  • 小さなランタイムと最適化されたコンパイラにより、多様なネットワーク環境でも高い性能を維持

TypeScript と開発ツール統合

  • TypeScriptの組み込みサポートにより、強力な型推論を提供
    • テンプレートとコンポーネント間で型の一貫性を維持
    • エディターで自動補完、定義への移動、構文ハイライト、フォーマットなどの機能をサポート
  • エラーの早期検出とコード品質向上により、安定した開発環境を提供

結論

  • MarkoはHTMLフレンドリーな構文、高性能レンダリング、精密なバンドリング、TypeScript統合を組み合わせたモダンなWeb開発言語
  • サーバーとクライアントの両方で効率的に動作し、大規模サービス運用に適した拡張性と性能を提供

関連記事

2件のコメント

 
shakespeares 2025-11-10

まだしばらくはSvelteですね
 
GN⁺ 2025-11-10
Hacker Newsの意見

  • 今後はHTML自体で JavaScriptなしでも すべてのHTTP verb（PUT、DELETEなど）をサポートし、ドロップダウン・マルチセレクト・日付・時刻のような入力コントロールを標準提供し、ページ全体をリロードせずにフォーム送信できるようになってほしい
    htmxという名前を最初に聞いたときはそういうものを期待したが、実際にはintercooler程度だった
    こうした機能にはブラウザベンダーの幅広いサポートが必要だ

    • htmxのアイデアの一部をHTML仕様に直接統合しようという取り組みが進行中だ
      関連内容は Triptychプロジェクト で見られる

  • JavaScriptフレームワークを自作したことがある立場からすると、Markoは過小評価されていると思う
    コンパイル時最適化が非常に印象的で、細粒度バンドリングの説明 の文書も素晴らしい
    実際、Kanbanボードの性能比較 でも良い結果を示していた

    • RSCとSSRの流行は、誰かの 昇進の口実 や新会社を立ち上げるための口実のように見えた
      ReactはNext.jsと結びつくことでプラットフォームの本質を裏切り、今では選ぶ理由がほとんどない
      静的にハイドレーションされたReactがCDN上で動いていた時代のほうがずっと良かった
    • 新規プロジェクトではSvelteKitをよく使っているが、機能・開発体験・性能のバランスが良い
      それでもMarkoも見てみるべきだと思わされる
      Electronのようなデスクトップフレームワークについても、こういう 踏み込んだ分析 があるとよい

  • Reactが好きな理由は、単純に 「ただのJavaScript」 だからだ
    <let> や <for> のような構文は見たくない

    • JSXも実際には純粋なJavaScriptではない
      慣れすぎて忘れがちだが、新しいフレームワークを見るときはこの点を覚えておくべきだ
    • 昔も良いテンプレート構文はあったし、今もある
      {% for user in users %} や {#each users as user} のような形のほうがずっと明快だ
      JSXも完璧ではない — {users.map(...)} 構文は今でも冗長だ
    • 昔Markoを使ったことがあるが、もともと eBayの社内プロジェクト として始まり、2015年ごろにオープンソース化された
    • 人それぞれだが、こうしたテンプレートベースの構文を好む人もいる
      VueやSvelteが人気なのもそのためだ
      ちなみにVueは、望めばJSXだけで書くこともできる
    • Reactはもうずっと前から「ただのJS」ではない
      DSLはますます肥大化し、useFormStatus や useActionState のようなフックが増えるにつれて複雑になった
      一方でMarkoの構文は直感的で、関数は関数らしく、変数は変数らしく見えるので理解しやすい

  • HTMLの中にJSを入れる方式がかなり新鮮だ
    Ryan Carniatoがこのプロジェクトに参加した後、のちにSolidJSを率いることになったが、なぜ再び HTML-in-JS スタイルに戻ったのか気になる

    • RyanはSolidをeBay/Markoに加わる前から進めていた
      両プロジェクトは互いのアイデアを共有しながら発展してきており、今でも交流がある
    • JSXを選んだ理由は単純だ
      多くの開発者が慣れており、エディタやTypeScriptのサポートもすでに充実している
    • 「HTMLの中にJS」なんて、まるで1995年のNetscape時代に戻ったみたいで冗談のように聞こえる

  • 20年以上にわたってフロントエンドが巡り巡って、結局 JSP時代のパラダイム に回帰したように感じる
    当時は「ダサい」と敬遠されたが、結局あれが正しかったのかもしれない

    • 技術は循環するが、そのたびに微妙な改善がある
      消えていくものもあるが、次の世代の創造性が新しいものを生み出す
    • JSFも覚えている — サーバーサイドで状態を復元でき、複雑なフォーム中心のWebサイトを素早く作れた
      ただし大規模なスケーラビリティには注意が必要だった
    • 「正しいパラダイム」という言い方には同意しにくい
      状況によっては別のアプローチのほうが適していることもある
    • SPAを選んだ理由を「古い技術が嫌だったから」と決めつけるのは単純すぎる
      当時はモバイルアプリとAPI中心の構成が必要で、SPAはその要件に合っていた
      今はJSPへの回帰ではなく、両者のバランスポイント を探っている段階だ

  • Markoはすでに eBayで実証済みの技術 だ
    何年も使ってきたが問題に遭遇したことはない
    一方でReactベースのFacebook、Instagram、MessengerではUIバグが絶えない
    実際の大規模サービスでの結果を見ると、Markoの安定性が際立つ

  • Markoは以前から何度もHNに登場している
    2023年1月、2017年8月、2015年2月 にも関連スレッドがあった

    • かなり古いプロジェクトだったことを今知った

  • JSXよりはるかに改善された構文に見える
    特に Pugスタイルの簡潔な構文 が気に入ったが、なぜ文書の奥深くに隠してあるのか疑問だ
    Concise Syntax文書

    • 私もその簡潔な構文のおかげでMarkoを見てみたことがある
      だが、文書の ハイライトの誤り や属性の区切り方が気に入らなかった
      最近は主にSvelteを使っているが、今でもよりエレガントな構文を待っている
    • 個人的にはYAMLの失敗を繰り返しているように感じる
      空白ベースの構文自体は悪くないが、-- のような表記やパースの難しさは惜しい

  • MarkoチームはMarko 6を紹介するために Hacker Newsクローン を自作して公開した
    GitHubのサンプルを見る

  • デモ用に作った言語だからなのか、「HTML-based」「building web apps」のような グラデーションテキストが見えない のは少し笑える