Qiita APIを利用した検索表示－Vuejs

作成したDEMOページ

Qiita APIを利用した検索表示のサンプルをこちらに用意しました。

Qiita API とは

Qiita API は、Qiitaが提供しているサービスから様々なデータの取得、投稿やストックなどの操作ができるWeb-APIです。

https://qiita.com/api/v2/docs

API の一覧

認証認可API

メソッド	URI	内容
GET	/api/v2/oauth/authorize	OAuth認証画面を開きます。
POST	/api/v2/access_tokens	与えられた認証情報をもとに新しいアクセストークンを発行します。
DELETE	/api/v2/access_tokens/:access_token	指定されたアクセストークンを失効させ、それ以降利用できないようにします。

未認証でも使用可能なAPI

メソッド	URI	内容
GET	/api/v2/comments/:comment_id	コメントを取得します。
GET	/api/v2/items/:item_id/comments	投稿に付けられたコメント一覧を投稿日時の降順で取得します。
GET	/api/v2/tags	タグ一覧を作成日時の降順で返します。
GET	/api/v2/tags/:tag_id	タグを取得します。
GET	/api/v2/users/:user_id/following_tags	ユーザがフォローしているタグ一覧をフォロー日時の降順で返します。
GET	/api/v2/items/:item_id/stockers	投稿をストックしているユーザ一覧を、ストックした日時の降順で返します。
GET	/api/v2/users	全てのユーザの一覧を作成日時の降順で取得します。
GET	/api/v2/users/:user_id	ユーザを取得します。
GET	/api/v2/users/:user_id/followees	ユーザがフォローしているユーザ一覧を取得します。
GET	/api/v2/users/:user_id/followers	ユーザをフォローしているユーザ一覧を取得します。
GET	/api/v2/items	投稿の一覧を作成日時の降順で返します。
GET	/api/v2/items/:item_id	投稿を取得します。
GET	/api/v2/tags/:tag_id/items	指定されたタグが付けられた投稿一覧を、タグを付けた日時の降順で返します。
GET	/api/v2/users/:user_id/items	指定されたユーザの投稿一覧を、作成日時の降順で返します。
GET	/api/v2/users/:user_id/stocks	指定されたユーザがストックした投稿一覧を、ストックした日時の降順で返します。

Qiitaアカウント向けAPI

メソッド	URI	内容
DELETE	/api/v2/comments/:comment_id	コメントを削除します。
PATCH	/api/v2/comments/:comment_id	コメントを更新します。
DELETE	/api/v2/comments/:comment_id/thank	コメントからThankを外します。
PUT	/api/v2/comments/:comment_id/thank	コメントにThankを付けます。
POST	/api/v2/items/:item_id/comments	投稿に対してコメントを投稿します。
DELETE	/api/v2/tags/:tag_id/following	タグのフォローを外します。
GET	/api/v2/tags/:tag_id/following	タグをフォローしているかどうかを調べます。
PUT	/api/v2/tags/:tag_id/following	タグをフォローします。
DELETE	/api/v2/users/:user_id/following	ユーザへのフォローを外します。
GET	/api/v2/users/:user_id/following	ユーザをフォローしている場合に204を返します。
PUT	/api/v2/users/:user_id/following	ユーザをフォローします。
GET	/api/v2/authenticated_user/items	認証中のユーザの投稿の一覧を作成日時の降順で返します。
POST	/api/v2/items	新たに投稿を作成します。
DELETE	/api/v2/items/:item_id	投稿を削除します。
PATCH	/api/v2/items/:item_id	投稿を更新します。
DELETE	/api/v2/items/:item_id/stock	投稿をストックから取り除きます。
GET	/api/v2/items/:item_id/stock	投稿をストックしているかどうかを調べます。
PUT	/api/v2/items/:item_id/stock	投稿をストックします。
GET	/api/v2/authenticated_user	アクセストークンに紐付いたユーザを返します。

Qiita:Teamアカウント向けAPI

メソッド	URI	内容
GET	/api/v2/items/:item_id/likes	投稿につけられた「いいね！」を作成日時の降順で返します。
POST	/api/v2/items/:item_id/taggings	投稿にタグを追加します。Qiita:Teamでのみ有効です。
DELETE	/api/v2/items/:item_id/taggings/:tagging_id	投稿から指定されたタグを取り除きます。Qiita:Teamでのみ有効です。
GET	/api/v2/teams	ユーザが所属している全てのチームを、チーム作成日時の降順で返します。
GET	/api/v2/templates	チーム内のテンプレート一覧を返します。
DELETE	/api/v2/templates/:template_id	テンプレートを削除します。
GET	/api/v2/templates/:template_id	テンプレートを取得します。
POST	/api/v2/templates	新しくテンプレートを作成します。
PATCH	/api/v2/templates/:template_id	テンプレートを更新します。
GET	/api/v2/projects	チーム内に存在するプロジェクト一覧をプロジェクト作成日時の降順で返します。
POST	/api/v2/projects	プロジェクトを新たに作成します。
DELETE	/api/v2/projects/:project_id	プロジェクトを削除します。
GET	/api/v2/projects/:project_id	プロジェクトを返します。
PATCH	/api/v2/projects/:project_id	プロジェクトを更新します。
POST	/api/v2/expanded_templates	受け取ったテンプレート用文字列の変数を展開して返します。
DELETE	/api/v2/items/:item_id/like	投稿への「いいね！」を取り消します。Qiita:Teamでのみ有効です。
PUT	/api/v2/items/:item_id/like	投稿に「いいね！」を付けます。Qiita:Teamでのみ有効です。
GET	/api/v2/items/:item_id/like	投稿に「いいね！」を付けているかどうかを調べます。

Vue.jsでQiita APIを利用した検索表示

view

<template>
  <main>
    <article>
      <div class="entry-header">
        <h1 class="entry-title">Qiita API サンプル</h1>
      </div>
      <div class="entry-content">
        <p>
          検索ワード：<input type="text" v-model="keyword" />
        </p>
        <p>
          {{message}}
        </p>
        <ul>
          <li v-for="(e, index) in items" :key="index">
            <a v-bind:href="e.url" target="_blank" > {{ e.title }}</a> Likes:{{ e.likes_count }}
          </li>
        </ul>
      </div>
    </article>
  </main>
</template>

script

<script>
export default {
  components: {
  },
  data() {
    return {
      items: null,
      message: '',
      keyword: ''
    }
  },
  created() {
    // this.keyword = 'Javascript';
    // this.getAnswer();
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000);
  },
  watch: {
    keyword: function(newKeyword, oldKeyword) {
      console.log(newKeyword, oldKeyword);
      this.message = 'Waiting for your to stop typing...';
      this.debouncedGetAnswer();
    }
  },
  methods: {
    getAnswer: function() {
      if (this.keyword === '') {
        this.item = null;
        this.message = '';
        return;
      }
      this.message = 'Loading...';
      var vm = this;
      var params = {page: 1, per_page: 20, query: this.keyword};
      this.$store.dispatch('getQiitaList', params)
      .then(function(response) {
        //console.log(response);
        vm.items = response.data;
      })
      .catch(function(error) {
        vm.message = 'Error!' + error;
      })
      .finally(function() {
        vm.message = '';
      });
    }
  }
}
</script>

vuex

const actions = {
  async getQiitaList({ commit }, params) {
    return await axios.get("https://qiita.com/api/v2/items", { params });
  }
}

ソースコード

Github

https://github.com/isystk/vuejs-qiita-api