こちらは GAOGAO Advent Calendar 2021 の 13 日目の記事です。昨日は @hana_asia さんの [日記] システム開発難しいですよねでした！

こんにちは T と申します。
GAOGAO にてスタートアップスタジオのエンジニア、GAOGAOゲート　にてプログラミング研修事業のメンターをしております。

はじめに

私は現在 GAOGAOゲート生が効率よくポートフォリオ開発を進められるようなアプリケーションを開発しております。
開発する中で「GitHub で作成した Issue をボタンワンクリックで取得し保存したいな」と思い調べたところ、 GitHub REST API に辿り着き実際に触っています。

前述のアプリケーションは Laravel, Vue.js で実装しておりますが
今回は Vue.js で API をコールして欲しいデータを取得する箇所のみにフォーカスして書いていきます。

結論

Octokit というライブラリを利用することで、簡単に Issue を取得することができます。
また、特定のラベルがついているもの、Issue の状態（Open or Close）で絞り込み取得することができました。

1. GitHub REST API

指定した Repository の Issues や、Pull Requests、また指定したユーザーの Repositories を取得できるなど様々な操作が可能になっているようです。

GitHubのREST API
GitHubのREST APIを使って呼び出しを作成し、GitHubとインテグレートする必要があるデータを取得できます。

今回は Issues 取得にトライしてみます。

2. curl コマンドで取得する。

まずは curl を用いて簡易的に取得してみたいと思います。
下記は取得するリポジトリがパブリックであると仮定し進めていきます。

2.1 Issues 全て取得する

まずはリポジトリに紐づいた Issues を取得します。

shell

curl https://api.github.com/repos/t-aburasoba/StudyLaravel/issues

こちらで私（t-aburasoba）の StudyLaravel というリポジトリの issues を取得できます。
t-aburasoba にはあなたの GitHub のユーザー名
StudyLaravel にはあなたの Repository 名に置き換えてみてください。

取得できる内容がとても多いため、省略しますが主に下記の内容が取得できるようです。

タイトル
作成したユーザー情報
紐づいた label 情報
Close か Open か
Assignee ユーザー情報
紐づいた milestone
Body （中身）

などなど。非常に多くの情報が取得できますね。
では次に、Close した Issue で且つ特定のラベルが紐づいた Issues のみを取得してみましょう。

2.2 条件付きで Issues を取得する

shell

curl -G --data-urlencode "labels=enhancement" "https://api.github.com/repos/t-aburasoba/StudyLaravel/issues?state=closed"

今回は
enhancement ラベルがついていおり、
close されている Issue に絞り取得するようにしました。

こちらのように label や status に応じて絞り込みをして取得できるのは非常に便利ですね。
ではこちらを JavaScript で API をコールし取得してみましょう。

3. JavaScript から API をコール

では JavaScript で API をコールしてみます。

JavaScript (@octokit/core.js)
https://docs.github.com/en/rest/reference/issues

公式ドキュメントによると octokit を使用するように記載があるのでそのライブラリを使う必要がありそうです。

3.1 Octokit

下記のように使用できるようですね。

await octokit.request('GET /orgs/{org}/issues', {
  org: 'org'
})

3.2 JSFiddle で実装

JSFiddle で実装してみました。Fetch Closed GitHub Issues ボタンを押すことで、「Fetch 用の Issue」という Issue のタイトルが取得でき、console にログとして出力されます。

以下から実際に触っていただけます。
https://jsfiddle.net/Taburasoba/9z82ue3t/1/

下記画像のように「Fetch 用の Issue」が GitHub から取得できました。

まずは簡易的なボタンを用意します。
ボタンがクリックされた際に、fetchIssues メソッドを発火させるようにしています。
fetchIssues メソッドは Vue.js で実装していきます。

index.html

<div id="app">
  <button type="button" @click="fetchIssues">
    Fetch Closed Github issues
  </button>
</div>

では次に Vue.js で API をコールする fetchIssues メソッドを書いていきます。
全章で出てきた Octokit を用いて API をコールします。

app.js

import { Octokit } from "https://cdn.skypack.dev/@octokit/core"

new Vue({
  el: "#app",
  data () {
    return {
        git_hub_username: "t-aburasoba", // ご自身のアカウント名に変更ください
        repository_name: "StudyLaravel", // ご自身のリポジトリ名に変更ください
        label_name: "enhancement" // お好きなラベルに変更ください。
    }
  },
  methods: {
    fetchIssues() {
        const octokit = new Octokit()
        const issueJson = octokit.request('GET /repos/{owner}/{repo}/issues', 
        { owner: this.git_hub_username,
          repo: this.repository_name,
          state: 'closed',
          sort: 'updated',
          direction: 'desc',
          labels: this.label_name,
          per_page: 5 })

         issueJson.then(response => {
            response.data.forEach(issue => {
            console.log(issue.title)
      })
     })
    }
  }
})

こちらまで実装ができれば、特定のリポジトリの、クローズされた Issue のタイトルが取得できました。

今回は省きますが、console.log の箇所を、Laravel 側で作成した API をコールするようにし、保存処理を走らせることでデータベースへの保存も簡単にできますね。

まとめ

今回は Issues を取得するだけでしたが、Issue を作成するなど GitHub API が提供している内容は多岐に渡るようなのでそちらも触っていきたいなと思いました。

GitHub から Close 済みの Issues を取得する。（Octokit）