へっぽこITエンジニア@名古屋のブログ

Follow me on GitHub

GitHubのAPIを利用して一覧表示

重要
APIのアクセスには上限があるため、アクセスを繰り返すと
リストを出せないようですw
「API rate limit exceeded」とでます。
アクセス制限がかかっているときのエラー処理など
今後追記していこうかな(#^^#)

本題を始めます。 async/awaitとfetch関数を利用して、GithubのAPIを呼び出し、 私のリポジトリをリスト表示しました。

ソースは以下のように書きました
最近はAPIの呼び出しも簡単ですね(#^^#)

<script>
    async function getRepository (url) {
        const res = await fetch(url);
        const status = await res.status;
        if(status == 200){
            const json = await res.json();
            json.forEach(e => {
                document.getElementById("repos")
                    .insertAdjacentHTML('afterbegin',
                        '<li>'+ e.name +'</li>');
            })
        }else{
            document.getElementById("repos")
                .insertAdjacentHTML('afterbegin',  
                '<li style="color:red">APIの利用上限を超えました。しばらくしてからアクセスしてください。</li>');
        }
    }
    getRepository("https://api.github.com/users/mtaketani113/repos");
</script>

<div id = "repos"></div>

ちなみに、async/awaitはIEには対応していないので、
IEやEDGEのIEモードでは表示できないかと。

GithubにはAPIがあり、リポジトリだけでなく
Issueの一覧を出せたりします。
GithubのIssueで課題管理している方も多いかと思いますが、
まだまだ会社ではExcel大好きな方々がいっぱいいるかとw

こんな感じのExcelをCSVで出力しました。

Issue No. Title 作成日

上のコードはこんな感じです。

<script>
    async function getIssues (url) {
        const res = await fetch(url);
        const status = await res.status;
        if(status == 200){
            const json = await res.json();
            json.forEach(e => {
            document.getElementById("issues")
                .insertAdjacentHTML('afterbegin',
                    '<tr><td>'+ e.number +'</td><td>'+ e.title 
                    +'</td><td>'+ e.created_at +'</td></tr>');
            })
        }else{
            document.getElementById("issues")
                .insertAdjacentHTML('afterbegin',  
                '<tr><td colspan="3" style="color:red">APIの利用上限を超えました。しばらくしてからアクセスしてください。</td></tr>');
        }

    }
    getIssues("https://api.github.com/repos/mtaketani113/createIssueCsv/issues");
</script>

管理者からすると一覧で見たいとか、納期を一目で見たいとか、
Excelのほうが、ぱっと見てすぐわかるとかが大事のようです。
Githubを新たに使おうとすると、こうした抵抗にあうと思います。

たしかに、Excelの方がよいことも多々あります。
なので彼らの不安をわからずやと、何も対策しないのではなく
真摯に払拭してあげる必要があります。

そんな人たちを納得させるために、GithubのAPIを使って
上記のサンプルのように課題を一覧表にしたり、ちょっとアレンジして
特定の形式だ書いたら納期も一覧表に追加するようにしましょう。
きっと納得してもらえると思います。

本当はそんなことせずGithubを使って見てほしいんですがね。
現実はなかなかそうはいきませんね。

ちなみにIssueをCSVにして取得するJavaのプログラムは私も書いてますが、
ググればもっといいのがいっぱいあると思いますので、
そちらを利用してみてくださいw