【ITニュース解説】Making an RSS Feed for a Nuxt Website
2025年09月23日に「Dev.to」が公開したITニュース「Making an RSS Feed for a Nuxt Website」について初心者にもわかりやすく解説しています。
ITニュース概要
Webサイトの更新を購読できるRSSフィードをNuxt 3/4で自作する方法。専用モジュールがないNuxtでも、`feed`パッケージとサーバーAPIで簡単に作成できる。`/server/routes`にエンドポイントを作り、`feed`でデータ構築しXMLとして返却。HTMLへリンクを追加すれば利用可能だ。
ITニュース解説
この解説では、Nuxt 3および4のウェブサイトでRSSフィードを作成する方法について、システムエンジニアを目指す初心者にも分かりやすく説明する。NuxtにはRSSフィードを生成する公式モジュールが現状存在しないが、手動での実装は比較的容易だ。
まず、RSSフィードとは何かという基本的な概念から理解を深めよう。RSSフィードは、ウェブサイトの更新情報をユーザーが購読できるようにするためのXML形式の文書だ。これにより、ユーザーはRSSリーダーと呼ばれるアプリケーションを使って、お気に入りのウェブサイトの最新記事や更新情報を自動的に受け取ることができる。RSSフィードは、単なるXML文書であるため、プログラムで内容を解析し、ウェブサイトの著者や最新の公開記事などの情報を簡単に取得できる。XML形式のRSSが最も一般的だが、JSONフィードやAtomフィードといった他の形式も広くサポートされている。今回の解説では主にRSSに焦点を当てるが、基本的な考え方は他の形式にも応用できる。
次に、RSSフィードがどのような構造をしているかを見てみよう。RSSフィードは特定のXMLタグで構成されている。最上位には<rss>タグがあり、これはこの文書がRSSフィードであることを示し、そのバージョン情報（例: version="2.0"）を含む。その内部には<channel>タグがあり、これが実際のフィードの全体像を定義する。<channel>タグの中には、フィード全体のタイトル、ウェブサイトへのリンク、フィードの生成ツール、言語、著作権情報、そしてフィードが最後に更新された日時など、フィードに関する基本情報が記述される。さらに、<channel>タグの中には、個々の記事や更新情報を表す<item>タグが複数含まれる。各<item>タグは、そのアイテムのタイトル、具体的な記事へのリンク、一意の識別子（GUID）、公開日、簡単な説明、そして場合によっては記事の全文内容（<content:encoded>タグなど）を持つ。この構造により、RSSリーダーはフィードから必要な情報を抽出し、ユーザーに分かりやすく提示できるのだ。
Nuxtウェブサイトで実際にRSSフィードを構築する方法は、Nuxtが提供するサーバーエンドポイントの機能を利用する。Nuxtでは、通常ウェブページとして表示されるVueコンポーネントの他に、サーバーサイドで動作するAPIエンドポイントを定義できる。これらのエンドポイントはNitroと呼ばれる技術によって処理され、ブラウザからのリクエストを受け取り、適切なレスポンスを返すことができる。つまり、特定のURLにアクセスがあった際に、XML文書を生成して返すように設定すれば、それがRSSフィードとして機能する。
具体的な実装手順は以下の通りだ。まず、/server/routes/ディレクトリの下にrss.xml.tsのようなファイルを作成し、サーバーエンドポイントとして宣言する。このファイルはdefineEventHandlerという関数をエクスポートし、その中にフィードを生成するロジックを記述する。defineEventHandlerは非同期関数としてイベントオブジェクトを受け取り、フィード生成のための処理を実行する。
XML文書を手動で作成することも可能だが、より効率的な方法として「feed」というNode.jsパッケージを利用する。このパッケージは、プログラム的にフィードを構築し、異なる形式（RSS、Atomなど）で出力できる便利なツールだ。まず、このパッケージをプロジェクトにインストールする。
次に、defineEventHandler関数の中でFeedクラスのインスタンスを作成し、フィードの基本情報を設定する。これには、フィードのタイトル、説明、一意のID、ウェブサイトのURL、言語、著作権情報、最終更新日、フィードを生成したツール名、そして著者情報などが含まれる。
この基本情報が設定できたら、feed.rss2()メソッドを呼び出すことで、RSS 2.0形式のXML文字列が生成される。これをdefineEventHandlerから直接返せば、一応フィードは生成されるが、重要な設定がまだ二つ残っている。
一つは、ブラウザに返されるデータの種類を正しく伝えることだ。これはHTTPヘッダーのContent-Typeを使って行われる。setResponseHeader関数を用いて、Content-Typeをtext/xmlに設定する。これにより、ブラウザやRSSリーダーは、受け取ったデータがXML形式であり、RSSフィードとして解釈すべきだと認識できる。
もう一つは、フィードに個々の記事（アイテム）を追加することだ。通常、これらの記事データは、データベースやNuxt Contentなどのコンテンツ管理システムから取得される。記事データの配列があったとして、その配列をループ処理し、各記事の情報をfeed.addItem()メソッドに渡していく。addItem()メソッドには、記事のタイトル、一意のID、簡単な説明、公開日、記事への直接リンク、そして必要に応じて記事の全文コンテンツなどを設定する。例えば、Nuxt Contentで記事コレクションを管理している場合、queryCollectionを使って記事データを取得し、それをfeed.addItemでフィードに追加する。
これらのステップを完了すれば、NuxtアプリケーションでRSSフィードが生成されるようになる。Atomフィードも同様のロジックで作成でき、feed.atom1()を呼び出すだけで対応可能だ。
最後に、作成したRSSフィードをウェブサイトに認識させるための設定を行う。ウェブサイトのHTMLの<head>セクションに<link>タグを追加し、RSSフィードの存在とURLを明示する。これにより、RSSリーダーやブラウザは、このウェブサイトにフィードがあることを自動的に検出できるようになる。Nuxtでは、useHeadコンポーザブルフックを使用することで、この<link>タグをプログラム的に追加できる。rel="alternate"属性とtype="application/rss+xml"属性を設定することで、これがRSSフィードであることを明示し、href属性でフィードのURLを指定する。
この設定を行うことで、ウェブサイトのRSSフィードが完全に機能し、ユーザーはサイトの更新情報を簡単に購読できるようになる。これらの手順を踏むことで、Nuxtのアプリケーションでも独自のRSSフィードを問題なく構築できる。