ニュースを簡単に表示できる！「News API」をご紹介！

{"status": "ok",
"totalResults": 3586,
-
"articles": [-
{-
"source": {"id": null,
"name": "Slashdot.org"},
"author": "Blockchainx",
"title": "Understanding the Initial Coin Offering Concept: What is ICO Fundraising?",
"description": "People who want to be involved in the Initial Coin Offering must do their research and work carefully.With the increasing popularity of crowdfunding, the Initial Coin Offering (ICO) has become the latest project in raising funds and capital needed to start a …",
"url": "https://slashdot.org/submission/11366188/understanding-the-initial-coin-offering-concept-what-is-ico-fundraising",
"urlToImage": null,
"publishedAt": "2020-03-19T10:23:12Z",
"content": "People who want to be involved in the Initial Coin Offering must do their research and work carefully.With the increasing popularity of crowdfunding , the Initial Coin Offering (ICO) has become the latest project in raising funds and capital needed to start a… [+11787 chars]"},
・・・
}

npm install newsapi --save

created() {
    // NewsAPI
    const NewsAPI = require('newsapi');
    const newsapi = new NewsAPI(”APIキーをいれる”);
    // キーワード検索
    newsapi.v2.everything({
      q: 'キーワードを入れる'
    }).then(response => {
      var news = response.articles;
      this.news = news;
      // ローカルストレージに保存
      this.$store.commit("getNews", this.news);
    });
},

ほとんど、公式通りですね。
私の場合はリロードした時も使えるように、ローカルストレージに保存を行ったりしています。
実際、コンソールに出してみると以下の通りになります。

ちゃんとデータが取り出せました！

キーワード検索「q」

検索するキーワードを選択しています。
今回は「q」しか使いませんでしたが、他にもオプションは多数あります。

カテゴリーを絞る「category」

現在のカテゴリは以下の通りみたいです。

• business
• entertainment
• general
• health
• science
• sports
• technology

国別検索「country」

国別でも検索ができます。
ちなみに日本は「jp」です。
他にも多数の検索の仕方があります。

まとめ

今回は「News API」をNuxtで使ってみました！
いろんなニュースが取得できて面白いですね。
これから、今作ってるNuxtのアプリケーションに組み込んでいきたいと思います。
では、今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！