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で取得し、ブラウザに表示する方法を続けて説明します。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

実際に書いてみよう

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サービス開発を学べます。

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する