Githubリポジトリ検索ツールを作った

動機

• Githubの検索が結構使いづらい
  • インスタントにリポジトリ名で検索したい
• 非同期で検索したい
• axios使ってみたい

成果物

Github Repository Search

github.com

使い方

検索ボックスにワードを打ち込むと、非同期で30件検索する。

使用API:
Search | GitHub Developer Guide

検索条件:

• リポジトリ名から検索する。
• スター数で降順ソート。

https://api.github.com/search/repositories?q={{ 検索ワード }}+in:name&sort=stars

表示する情報

• リポジトリ名(full_name)
• リポジトリURL(html_url)
• スター数(stargazers_count)
• フォーク数(forks_count)
• ウォッチ数(watchers_count)
• 説明(description)
• ホームページ(homepage)

使ったものたち

• Vue.js
• axios
  • 非同期処理
• lodash
  • 遅延処理(_.debounce)
• babel
• webpack
• yarn

今後の改善案

• ソート条件を指定できるように(スター数、フォーク数、最終アップデート等...)
• 単体テスト追加
  • lodashのモック化が出来ず断念した
• アカウント認証追加
  • GitHub API v3 | GitHub Developer Guide
  • 認証しない場合、60回/hourしかリクエスト出来ない

参考

Computed Properties and Watchers — Vue.js

Lodash Documentation

Preact: Fast 3kB alternative to React with the same modern API. Components & Virtual DOM.