React NativeでGoogle Newsを表示しよう

（１）はじめに

普段はソーシャルワーカーとして障がいをお持ちの方の支援をしています。ReactやReact Nativeでアプリ作成を楽しんでおり、最近は3D表示に関心があります。今年から始めたReactが楽しくて、Webアプリやモバイルアプリを作成したので、一年の振り返りにいくつか書きたいと思っています。

今回は Google News の rssフィード を取得してReact Nativeのアプリに表示させることについて。

Google News Rss(API)

参考にさせていただきました。

（２）使った技術

・react-native
・expo 42.0.1
・react-native-xml2js 1.0.3
・moment 2.29.1

（３）コード

変数 word に検索したい文字を入れてGoogle Newsから取得します。
そのままだと日付順にならないので ソートして変数 list にセットします。

   import { parseString } from "react-native-xml2js";

   const [list, setList] = useState([]);

   let url = `https://news.google.com/rss/search?q=${word}&gl=JP&ceid=JP:ja&hl=ja`;
    fetch(url)
     .then((response) => response.text())
     .then((responseText) => {
       parseString(responseText, (_, result) => {
         let article = result.rss.channel.map((item) => item.item);
         for (let i = 0; i < article[0].length; i++) {
           data.push({
             title: article[0][i].title[0],
             link: article[0][i].link[0],
             date: article[0][i].pubDate[0],
           });
         }
         const sortedData = data.sort(function (a, b) {
           a = new Date(a.date);
           b = new Date(b.date);
           return a > b ? -1 : a < b ? 1 : 0;
         });
         setList(sortedData);
        });
      })
      .catch((error) => {
       console.log("取得に失敗しました: ", error);
    })

    // FlatList などに展開して表示
    // {item.title}
    // {moment(item.date).format("YYYY年MM月DD日(ddd)")}
    // onPress={() => onPress(item.link)}

（４）終わりに

最新ニュースやある事柄に関係するニュースを表示させたいときに使えます。NewsAPIも簡単に取得できて良いのですが、登録の必要性や制限があるため、気軽に使いときはGoogle Newsが良いかと思います