M

MLOG

日本語

高性能なWebアプリケーション向けに設計された宣言型UIフレームワークであるMarkoを探求し、そのストリーミングサーバーサイドレンダリング機能とグローバルなユーザーへの利点に焦点を当てます。

Marko: ストリーミングサーバーサイドレンダリングによる宣言型UI

今日のペースの速いデジタル環境では、ウェブサイトのパフォーマンスが最も重要です。読み込みが遅い、または応答性の低いウェブサイトは、ユーザーの不満、高い直帰率、そして最終的には収益の損失につながる可能性があります。宣言型UIフレームワークであるMarkoは、高性能なWebアプリケーションを構築するための独自のアプローチを提供することで、これらの懸念に対処します。この記事では、Markoのコア機能、特にストリーミングサーバーサイドレンダリング（SSR）機能について詳しく掘り下げ、グローバルなユーザー向けのウェブサイトやWebアプリケーションを構築する開発者にとって、なぜそれが魅力的な選択肢であるかを説明します。

Markoとは？

Markoは、eBayによって作成され、現在はMarkoチームによって保守されているオープンソースのUIフレームワークです。パフォーマンス、シンプルさ、スケーラビリティに重点を置いている点で、他のフレームワークとは一線を画しています。クライアントサイドレンダリングを優先するフレームワークとは異なり、Markoはサーバーサイドレンダリング、特にストリーミングSSRを重視しています。これは、サーバーがアプリケーションのHTMLを事前にレンダリングし、利用可能になるとすぐにチャンク（ストリーム）でブラウザに送信することを意味し、ファーストコンテンツフルペイント（FCP）が高速化され、ユーザーエクスペリエンスが向上します。

Markoの主な機能と利点

ストリーミングサーバーサイドレンダリングの詳細

ストリーミングSSRの利点について、さらに詳しく見ていきましょう。

ファーストコンテンツフルペイント（FCP）の改善

FCPは、ウェブサイトのパフォーマンスを測定するための重要な指標です。画面に最初のコンテンツ（テキスト、画像など）が表示されるまでの時間を表します。ストリーミングSSRは、クライアントサイドレンダリングよりも早くブラウザがHTMLを受信して​​レンダリングを開始するため、FCPを大幅に短縮します。JavaScriptバンドル全体がダウンロードされて実行されるのを待つ代わりに、ブラウザはページの初期コンテンツの表示をすぐに開始できます。製品リストを表示するeコマースウェブサイトを想像してみてください。ストリーミングSSRを使用すると、インタラクティブな要素が完全にロードされる前でも、ユーザーは製品の画像と説明をほぼ瞬時に見ることができます。これにより、はるかに魅力的で応答性の高いユーザーエクスペリエンスが生まれます。

より良いユーザーエクスペリエンス

FCPが高速化されると、ユーザーエクスペリエンスが向上します。コンテンツがすぐに表示されれば、ユーザーがウェブサイトを放棄する可能性は低くなります。ストリーミングSSRは、特に低速なネットワークやデバイスで、よりスムーズで応答性の高いエクスペリエンスを提供します。これは、インターネット接続が不安定な発展途上国のモバイルユーザーにとって特に重要です。たとえば、ストリーミングSSRを使用しているニュースウェブサイトは、帯域幅が限られているユーザーでも、速報ニュースの見出しと概要を即座に配信できます。

SEOの利点

検索エンジンのボットは、ウェブサイトの構造とコンテンツを理解するためにHTMLコンテンツに依存しています。サーバーサイドレンダリングは、すぐに利用できるHTMLを提供し、検索エンジンがサイトをクロールしてインデックスを作成しやすくします。これにより、検索エンジンのランキングが向上し、オーガニックトラフィックが増加します。GoogleはJavaScriptのレンダリングが上手になりましたが、SSRは依然として、特に複雑なJavaScriptを多用するアプリケーションを使用するウェブサイトにとって大きな利点となります。SSRを使用する旅行代理店のウェブサイトは、目的地ページが適切にインデックス付けされ、関連する検索結果に表示されるようになります。

アクセシビリティの向上

SSRは、スクリーンリーダーやその他の支援技術で簡単に解析できるHTMLコンテンツを提供することで、アクセシビリティの向上に貢献します。これにより、ウェブサイトが障害のある人々も利用できるようになります。サーバーで初期コンテンツをレンダリングすることで、JavaScriptが完全にロードされる前でも、アクセシビリティの強固な基盤を提供します。たとえば、SSRを使用する政府のウェブサイトは、すべての市民が能力に関係なく重要な情報にアクセスできるようにします。

Marko vs. その他のフレームワーク

Markoは、React、Vue、Angularなどの他の一般的なUIフレームワークと比べてどうでしょうか？

Marko vs. React

Reactは、ユーザーインターフェイスを構築するための広く使用されているライブラリです。Reactはサーバーサイドレンダリング（Next.jsまたは同様のフレームワークを使用）で使用できますが、通常はデフォルトでクライアントサイドレンダリングに依存します。MarkoのストリーミングSSRは、Reactの従来のSSRアプローチよりもパフォーマンスの利点があります。Reactのエコシステムは広大で、多くのライブラリとツールを提供していますが、これにより複雑さが増す可能性もあります。Markoはシンプルさとパフォーマンスに重点を置いており、より合理化された開発エクスペリエンスを提供します。複雑なダッシュボードアプリケーションを検討してください。Reactはコンポーネントベースのアプローチを提供しますが、MarkoのストリーミングSSRは、特に大きなデータセットを表示する場合に、初期ページロードのパフォーマンスを向上させる可能性があります。

Marko vs. Vue

Vueは、使いやすさとプログレッシブなアプローチで知られるもう1つの一般的なフレームワークです。Vueはサーバーサイドレンダリング（Nuxt.jsを使用）もサポートしています。MarkoとVueは、シンプルさやコンポーネントベースアーキテクチャの点でいくつかの類似点があります。ただし、MarkoのストリーミングSSRは、特にトラフィックが多いウェブサイトや複雑なUIを持つウェブサイトにとって、明確なパフォーマンス上の利点があります。Vueは、最適なパフォーマンスを実現するために、サーバーサイドレンダリングのより手動による最適化が必要になることがよくあります。たとえば、ソーシャルメディアウェブサイトは、MarkoのストリーミングSSRを使用して、ユーザーフィードとアップデートをすばやく表示するのに役立ちます。

Marko vs. Angular

Angularは、複雑なWebアプリケーションを構築するための包括的なソリューションを提供する本格的なフレームワークです。Angularは、Angular Universalを介してサーバーサイドレンダリングをサポートしています。ただし、AngularはMarkoやVueと比較して、学習と使用がより複雑になる可能性があります。Markoのシンプルさとパフォーマンスへの重点は、パフォーマンスが最優先事項であるプロジェクトにとって魅力的な代替手段となっています。大規模なエンタープライズアプリケーションは、その堅牢な機能とスケーラビリティのためにAngularを選択するかもしれませんが、小規模なスタートアップは、Markoのスピードと開発の容易さを選択する可能性があります。

まとめ: React、Vue、Angularはすべてサーバーサイドレンダリングをサポートしていますが、Markoの組み込みストリーミングSSRは、パフォーマンスにおいて大きな利点を提供します。Markoはパフォーマンスとシンプルさを優先しており、これらの要素が重要なプロジェクトにとって最適な選択肢となっています。

Markoを始める

Markoの開始は比較的簡単です。基本的な概要は次のとおりです。

  1. Node.jsのインストール: システムにNode.jsがインストールされていることを確認してください。
  2. Marko CLIのインストール: `npm install -g marko-cli`を実行して、Markoコマンドラインインターフェイスをグローバルにインストールします。
  3. 新しいMarkoプロジェクトの作成: コマンド`marko create my-project`を使用して、新しいMarkoプロジェクトを作成します。
  4. プロジェクト構造の調査: プロジェクトには、`index.marko`（メインコンポーネント）、`server.js`（サーバーサイドのエントリポイント）、`marko.json`（プロジェクト構成）などのファイルが含まれます。
  5. 開発サーバーの実行: コマンド`npm start`を使用して、開発サーバーを起動します。
  6. コンポーネントの構築を開始: コンポーネントの新しい`.marko`ファイルを作成し、メインコンポーネントにインポートします。

Markoコンポーネントの例（index.marko）:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</p>
</body>
</html>

サーバーサイドレンダリングの例（server.js）:


require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

これらは、開始するための基本的な例にすぎません。Markoは、複雑なWebアプリケーションを構築するための豊富な機能とオプションを提供しています。詳細については、公式のMarkoドキュメントを参照してください。

Markoが実際に使用されている実例

eBayはもともとMarkoを開発しましたが、現在ではさまざまな業界のさまざまな企業で使用されています。

これらの例は、Markoの汎用性と、幅広いWebアプリケーションへの適合性を示しています。

Markoを使用するためのベストプラクティス

Markoを最大限に活用するには、次のベストプラクティスを検討してください。

結論: Marko – 最新のWeb開発に最適な選択肢

Markoは、高性能なWebアプリケーションを構築するための魅力的なソリューションを提供する、強力で汎用性の高いUIフレームワークです。その宣言的な構文、ストリーミングSSR機能、およびシンプルさへの重点は、ウェブサイトのパフォーマンスを向上させ、ユーザーエクスペリエンスを高め、SEOを向上させようとしている開発者にとって優れた選択肢となっています。Markoを採用することで、開発者は高速で応答性が高く、世界中のユーザーがアクセスできるウェブサイトやWebアプリケーションを作成できます。小規模な個人ウェブサイトを構築する場合でも、大規模なエンタープライズアプリケーションを構築する場合でも、MarkoはUIフレームワークの選択肢として検討する価値があります。コンテンツを迅速かつ効率的に配信することに重点を置いているため、今日のグローバル化され、パフォーマンス主導のデジタル環境で特に重要です。

参考資料: