【javascript】Fetch APIを使って、ブログなどのRSS取得して表示する方法（ライブラリ無し）

今回はRSS情報の取得に、Fetch APIを使ってみます。jqueryやaxios.jsみたいなライブラリを使うと、RSSは結構カンタンにとれますが、あえてFetch APIを使うメリットや、実際のコードなども確認していきましょう。

Fetch APIとは？使用のメリットとかは？

Fetch API→リソース取得のためのインターフェイス

以前はフロントjavascriptでデータ取得する際はXMLHttpRequest（最近は非推奨）が使われていましたが、それに替わって利用されています。より強力で柔軟な操作が可能とのこと。ブラウザの互換性をチェックしても、最近のバージョンは押さえてあるので、フロント外部データ取得のメインになるかなといった印象はあります。

Fetch API(MDN)
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

Fetch API利用のメリットは？

XMLHttpRequestの後継といわれているだけあって、似たような機能ですが、以下のapi専門のサイトで調査したところメリットがあります。『様々なレスポンスフォーマット対応・ネストがシンプル・ストリーミング送受信に対応』などです（XMLHttpRequestと比べた場合）。

XMLHttpRequestとは？非推奨の理由やFetchとの関係などを解説(api dog)
https://apidog.com/jp/blog/xmlhttprequest-intro/

管理人個人としては、jqueryを使うのと比べて『ライブラリをロードしなくてよい』というのがポイントになりました。サイズをしらべてみたところ、jquery-3.7.1.min.jsは85.4 KB　非圧縮のjquery-3.7.1.jsは278 KBありました。これらをロードしないで、数十行程度のコードで実装することができましたからね。

Fetch APIでrss取得・表示するコードと、実装例および動作サンプル

コードとポイント

とりあえずfetchのurlには、このサイトのフィードを入れました。!response.ok（レスポンスがokじゃない）ときはアラート＆console.errorになるようにしています。『response.statusが200ではない』みたいな判定でもよいかも。

あとはresponse.text()で返しますが、DOMParserを使ってやらないと要素がうまく取れません（rssdata.lengthで要素数を計っても、１文字ずつ１２０００要素とかになる）。あとはその要素数ループして、idを指定したボックスにセットします（innerHTML）。

Fetch APIでrss取得・表示例およびサンプルurl

ではさっそく、このサイト（読んどけコラム）のRSSを取ってきてみます。まずはWPの管理画面で、件数を設定。最新20件を出力する設定にしました。

こんな感じで、タイトル・リンク・日付を表示。今回のサンプルも、以下のurlに載せていますので、実際に動いているところを見たい場合は こちらもご確認ください。

fetch api てすと
https://division-web.atelier-ss-agency.com/test/202405-fetch-api.html

あとがき・まとめ

まとめると、こんなところでしょうか。管理人的に狙っているのは『vueで使うデータを渡す』みたいな点です。element，vue, jqueryやaxios.jsまでロードしていたら、読み込みの負荷が多少大きくなりそうで気になってるからです。