--- title: Github Apiを使って Issue Getter を作ってみた(with ajax request / jquery) tags: GitHub api Ajax jQuery author: Saayaman slide: false --- # Github Apiを使って Issue Getter を作った バンクーバーで受けたジュニアのフロントエンドエンジニア向けのテストの一部を公開! とりあえず、CSSは全て無視して、機能だけを引っ張って来れるコードを書きました。 Frogのアドベントカレンダー向けに書きました。 https://adventar.org/calendars/2350 #### やったこと - レポジトリのURLを入力したら、Issueが全部出てくる - レーベルが現れる。 - ClosedとOpenなIssueをタブで出し分ける - プルリクも別タブで見せる。 - jquery Ajaxを使った ## Github Apiって? Githubが提供しているフリーなApiで, 公開されているGithubの中の情報全部を引っ張って来れるよ! https://developer.github.com/v3/ ## ページ1: 検索ページ Screen Shot 2017-12-12 at 12.22.00 PM.png ```index.html Github Issue Getter ``` ## ページ2: 検索結果一覧 検索例) とりあえず、atomのリポジトリを引っ張ってみた。 https://github.com/atom/github Screen Shot 2017-12-12 at 12.24.15 PM.png ```issuelists.html Issue 一覧

Issue 一覧

``` ### JSはこんな感じ(ほとんど2ページ目に書いてるけど) ```script.js function openTabs(evt, tabName){ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementsByClassName(tabName)[0].style.display = "block"; evt.currentTarget.className += " active"; } $(document).ready(function(){ $("#githubform").submit(function(submitEvent) { submitEvent.preventDefault(); var url = $("#githubform").val(); $.ajax(url, { dataType: 'json', timeout: 2000, success: function (data) { // console.log(data); } }) }); }); ``` ### あとはJQueryをダウンロードしてリンクすれば完成! 役になったらいいね!ください!