ニュースフィード（フロントエンド）

要件の明確化

コア機能

• ニュースフィードの閲覧: ユーザーは画像、テキスト、タイムスタンプを含むニュース記事のリストを見ることができます。

• フィードの更新: サーバーは定期的にニュース記事を更新し、最新の情報をユーザーに提供します。

クライアント

• モバイル vs ウェブ ?

非機能要件

• データサイズを考慮

• 新しい記事の更新の遅延

• UX中心の指標

• First Contentful Paint（FCP）: ページの読み込みを開始してから、ページのコンテンツのいずれかの部分が画面に表示されるまでの時間を測定します。

• Largest Contentful Paint（LCP）: ページの読み込みを開始してから、最大のテキスト ブロックまたは画像要素が画面にレンダリングされるまでの時間を測定します。（ラボ、フィールド）

• Interaction to Next Paint（INP）: ページで行われたタップ、クリック、キーボード操作のレイテンシを測定し、操作数に基づいて、ページの最も低い（または最も高いものに近い）インタラクション レイテンシを、ページの全体的な応答性を表す単一の代表値として選択します。（ラボ、フィールド）

• 操作可能になるまでの時間（TTI）: ページの読み込みを開始してから視覚的にレンダリングされ、初期スクリプト（存在する場合）が読み込まれてユーザーの入力にすばやく確実に応答できるようになるまでの時間を測定します。（ラボ）

データモデル

• ニュース記事: 画像URL、テキスト内容、タイムスタンプ、一意なIDを持ちます。

ハイレベル設計

必要なコンポーネント

• server: フィード投稿を取得するための HTTP API と、新しいフィード投稿を作成するための HTTP API を提供します。

• reducer/controller: アプリケーション内のデータフローを制御し、サーバへのネットワークリクエストを行います。(reducerはreduxから来たものですが他のアーキテクチャの似たようなものを使っても構いません）

• store: アプリケーション全体で必要なデータを保存します。ニュースフィードの場合、store内のデータのほとんどは、フィード UI に必要なサーバ由来のデータとなります。

• フィード UI: ニュース一覧のリスト

描画（render)のアプローチ

• サーバーサイドレンダリング（SSR）：最も伝統的な方法で、HTMLをサーバーサイドでレンダリングします。SEOが必要な静的コンテンツや重いユーザーの対話が不要なコンテンツに最適です。ブログ、ドキュメンテーションサイト、Eコマースサイトなど、SSRを使用して構築されたウェブサイトがあります。

• クライアントサイドレンダリング（CSR）：ブラウザ内でレンダリングし、JavaScriptを使用してページに動的にDOM要素を追加します。対話的なコンテンツに最適です。ダッシュボード、チャットアプリなどのアプリケーションはCSRを使用して構築されます。

API設計

• ニュースフィードを取得: ユーザーのニュースフィードを取得します。ページ番号とサイズのパラメータを受け取り、ページングを行います。

GET /news

{
  result: [
    { "id": 412, "title": "史上最高に旨い...", "content": "...", "image": "https://www.example.com/news-images.jpg", }
  ]
}

オフセットベースのページング

GET /news?page=1&size=10

{
  "pagination": {
    "size": 10,
    "page": 1,
    "total_pages": 20,
  },
  result: [
    { "id": 412, "title": "史上最高に旨い...", "content": "...", "image": "https://www.example.com/news-images.jpg", }
  ]
}

// 一つ目のリクエスト
GET /news?page=1&size=10

{
  "pagination": {
    "size": 10,
    "page": 1,
    "total_pages": 20,
  }
  ...
}

// ユーザーのスクリーンが大きのでニュース記事を多めに表示したいのでsizeをあげる
// 二つ目のリクエスト
GET /news?page=2&size=20

// こうなると 11~20th番目のニュース記事をスキップすることになる

• クエリパフォーマンスの低下: テーブルが大きくなるにつれてクエリパフォーマンスが低下します。巨大なオフセット (例: OFFSET 1000000) の場合、データベースは引き続き count + offset 行まで読み取る必要がある

カーソルベースのページング

GET /news?page=1&size=10

{
  "pagination": {
    "size": 10,
    "next_cursor": "_0xd9a2h"
  },
  result: [
    { "id": 412, "title": "史上最高に旨い...", "content": "...", "image": "https://www.example.com/news-images.jpg", }
  ]
}

ニュースフィードに適したページング方式は？

• 新しい投稿が頻繁にフィードの上部に追加される

• 新しく取得した投稿はフィードの末尾に追加される

• テーブルサイズがかなり早く大きくなる可能性がある

詳細なコンポーネント、最適化、およびその他の機能

ニュース一覧の最適化

無限スクロール

仮想リスト

• パフォーマンスの向上: 仮想リストを使用すると、DOM サイズを小さく保ち、ブラウザの描画と仮想 DOM の調整にかかる時間を短縮できます。

• メモリ使用量の削減: DOM サイズが小さいため、ブラウザが使用するメモリ量が少なくなります。

• スムーズなスクロール: ビューポート内の投稿のみがレンダリングされるため、ユーザーがスクロールするとフィードがよりスムーズに移動します。

• 実装の複雑さ: 仮想リストの実装は、通常のリストの実装よりも複雑です。

• ブラウザの互換性: 仮想リストはすべてのブラウザでサポートされているわけではないため、すべてのユーザーが同じエクスペリエンスを得られるとは限りません。

新着記事

ニュース一覧記事

テキストのrendering

画像の最適化

• CDN への画像ホスティング: CDN (Content Delivery Network) を使用して画像をホストし、世界中のユーザーに高速に配信します。これにより、サーバーの負荷を軽減し、画像の読み込み時間を短縮できます。

• WebPを使う：WebP は、優れた可逆圧縮と非可逆圧縮を実現する画像形式

• 画像の alt 属性の適切な設定：アクセシビリティ向上とSEOに役立ちます

• デバイスの画面サイズに基づいた画像読み込み：フィードリストのリクエストにブラウザの寸法を含めることで、サーバーはどのサイズの画像を返すかを決定できます。これにより、最適な画像サイズがユーザーに提供され、読み込み速度が向上します

• srcset：画像処理（リサイズ）機能がある場合は、srcset を使用して、現在のビューポートに最適な画像ファイルをロードします。これにより、不要なデータ転送を減らし、読み込み速度を向上させることができます。

• ネットワーク速度に応じた画像読み込み：
• 高速インターネット接続/Wi-Fi: ビューポート外にあるが、もうすぐビューポートに入るオフスクリーン画像をプリフェッチします。これにより、ユーザーが画像に到達する前に読み込みが完了し、シームレスなスクロール体験を実現できます。
• 低速インターネット接続: 低解像度のプレースホルダー画像をレンダリングし、ユーザーが高解像度画像をロードするには明示的にクリックするように要求します。これにより、データ消費量を削減し、読み込み速度を向上させます。

アクセシビリティ

ニュースフィードのアクセシビリティに関するいくつかの考慮事項を説明します ニュース一覧

• フィードの HTML 要素に role="feed" を追加します。

ニュース記事

• 各フィード投稿の HTML 要素に role="article" を追加します。

• フィード作成者名を含む HTML タグに id 属性があり、その ID を使用して aria-labelledby="<id>" を設定します。

• フィード投稿内のコンテンツは、キーボードでフォーカス可能にする必要があります ( tabindex="0" を追加) 。また、適切な aria-role を設定する必要があります。e

その他

サーバサイドのエラーハンドリング

• 429 Too many request

• 500 Internal server error

code splitting