JavaScriptでRSSを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでRSSを取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• はじめに
• RSSとは
• RSSを取得する方法
• 実際に書いてみよう
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

RSSを取得する方法について詳しく説明していくね！

お願いします！

はじめに

今回は、外部のWebサイトなどの更新内容をJavaScriptを使って取得する方法を説明します。

Webサイトなどの更新情報はRSSという仕組みで配信されていますので、こちらをJavaScript上で取得・表示するまでを解説します。

ニュースサイトなどのRSSを取得・表示する処理をJavaScriptで実装できれば、ホームページなどを都度更新しなくても常に最新の情報を表示することが可能です。

ぜひこの機会にRSSとは何か、そしてRSSを取得してHTMLで表示する方法をマスターしましょう。

RSSとは

RSSはReally Simple Syndicationの略です。
新着情報などのお知らせを配信する際に利用されています。

主にXMLという言語で記述されています。

RSSを使うことで、ブログやニュースサイトなどのサイトの新着情報や更新情報を簡単に知ることができます。

今回はまず、配信されているRSSを取得する方法を説明します。

[PR] コーディングで副業する方法とは

RSSを取得する方法

多くの場合はRSSの情報を見やすくしてくれるツールのRSSリーダーに、RSSフィードというものが提供されているサイトのRSSのURLを登録することで取得ができます。

RSSリーダーはいろいろなものがあり、RSSの情報を見やすく表示してくれるので、好みのものを選んで使います。

また、ブラウザのURL欄にRSSのURLを直接入力してアクセスしても、RSSのデータを見ることができます。
この場合は、XMLで書かれたデータをそのまま見ることになります。

以下、URLをブラウザのURL欄に貼り付けてアクセスしてみましょう。

ASCIIのテクノロジー、カルチャーなどのRSSのURL

https://ascii.jp/mac/rss.xml

XMLの最新の更新情報が取得できるのが確認できましたね。
こちらのXMLをJavaScriptで取得し、ブラウザに表示する方法を続けて説明します。

実際に書いてみよう

RSSのURLにHTTPリクエストをすることで取得できます。

ただし、ブラウザでJavaScriptを実行している場合はクロスオリジンの制約がありますので、同一オリジン、またはクロスオリジン制約のないURLを使用してください。

※クロスオリジン制約（CORS）とは、Webサイトなどのセキュリティ機構です。
詳しくはこちらのMDNを確認してみましょう。

今回のRSS取得の例では、クロスオリジン制約のなかったASCIIのテクノロジー、カルチャーなどのRSSを使います。

ASCIIのテクノロジー、カルチャーなどのRSSのURL

https://ascii.jp/mac/rss.xml

上記のURLに、fetchメソッドを使ってHTTPリクエストを行います。
fetchメソッドの使い方はこちらの記事に詳しく解説があります。

HTTPリクエストのレスポンスにresponseオブジェクトのtext()メソッドを使って、レスポンスからbody部分であるXMLデータを取得します。

その後、XMLを解析してアンカータグを作成しています。
XMLの取り扱いが初めての方は、ぜひこちらの記事を参照してください。

let viewXML = (xmlDocument) => {
    //取得した文字列をコンソール出力
    console.log(xmlDocument);

    //XML形式に変換
    const parser = new DOMParser();
    const doc = parser.parseFromString(xmlDocument, "text/xml");
    let rss = doc.documentElement.getElementsByTagName("item");

    //HTMLタグの作成
    for(let i = 0;i < rss.length;i++){
        //RSSから取得したタイトルとリンク情報を格納
        let rssTitle = rss[i].getElementsByTagName("title")[0].textContent;
        let rssLink   = rss[i].getElementsByTagName("link")[0].textContent;

        //テンプレート文字列を使ってアンカータグを作成
        const tagString = `<a href="${rssLink}">${rssTitle}</a><br/>`;

        //body以下にアンカータグを挿入
        document.body.insertAdjacentHTML('beforeend',tagString );
    }
};
const URL = 'https://ascii.jp/mac/rss.xml';
fetch(URL)
.then( response => response.text())
.then( xmlData => viewXML(xmlData));

アンカータグがブラウザで表示され、クリックすると該当のページに遷移することが確認できたかと思います。

まとめ

RSSが主にXMLのフォーマットでデータを返すだけで、通常のHTTPリクエストの処理と同様の流れです。

fetch APIやfor文を使ったループ処理、テンプレート文字列など基本的なことを組み合わせると、今回のように動的なページ作成なども実装できます。

今回はRSSを表示する方法でしたが、他にも天気の情報などAPIから取得した場合も、扱うデータがXMLからJSONに変わるだけで同じように処理できます。

ぜひ動的なページや外部から情報を取得するサイトを実装する際には参考にしてみてくださいね。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！