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

Qiita API サンプル

作成したDEMOページ

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

Qiita API とは

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

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

API の一覧

認証認可API

メソッドURI内容
GET/api/v2/oauth/authorizeOAuth認証画面を開きます。
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

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。