2020-07-31

GitHub アカウントの全リポジトリ情報を一覧表示する Vue アプリ「List Repos」を作った

最近 Vue.js をちまちまイジってたので、簡単なアプリを作ってみた。その名も「List Repos」。

GitHub アカウント名を指定すると、そのユーザのリポジトリが一覧表になって表示されるモノで、簡単なテーブルソートもできるようになっている。

デモサイトは以下。

List Repos

デフォルトでは僕のリポジトリ一覧がズラッと表示されるが、別のユーザのリポジトリ一覧が見たければ、次のようにクエリパラメータでユーザ名を指定すれば良い。

https://neos21.github.io/list-repos/?user=【User Name】

リポジトリは以下。

Neos21/list-repos

以下、作った時の話。

スキあらば自分語り

ボイラープレートは Vue CLI で作ってみた。Babel と TypeScript・SCSS を有効にし、class 構文でコンポーネントを作れるようオプションを入れた。コレにより vue-class-component と vue-property-decorator がインストールされた。

class 構文でコンポーネントが作れるようになると、かなり Angular に似た形でコードが書けるようになる。

参考 : Vue.js to TypeScriptの書き方一覧 - Qiita

より Angular っぽくしたければ、HTML ファイルを .vue とは別ファイルにしたりできるみたい。

参考 : TypeScriptではじめるVueコンポーネント（vue-class-component） - Qiita
- html-loader を入れれば良いみたい。@Component() 内で template: require('./Component.html') と書くだとか、先に import html from './Component.html; みたいにしておいて template プロパティに仕込めば良いみたい
参考 : Vue+Webpack+Sassを使ったWebアプリケーションの作り方 - Qiita
- コチラだと <template src="./Component.html"> と読み込んでいたり

SCSS もファイルを分割できるっぽいが、未検証。

参考 : javascript - How to load scss in vue.js - Stack Overflow
- style-loader・css-loader・sass-loader を組み合わせれば良さげ？
参考 : How to add style import as @Component option? · Issue #149 · vuejs/vue-class-component · GitHub
- vue-class-component 内で似たような Issues が何回か挙げられている。Webpack Config で対応できる他、以下の vue-css-ts を使う方法も紹介されている
参考 : GitHub - numsg/vue-css-ts: Local style processing in Vue for ts-oriented development mode
- SCSS ファイルを別ファイルに切り出せるツール。未検証
- GitHub - numsg/vue-seed: vue, vuex , typescript , vue-typescript … コレを使ったデモアプリ

まぁ自分は .vue ファイルに全部まとまっているのにだいぶ慣れてきたので、このままで良いかなという感じ。

vue.config.js には2つほど設定を入れた。

GitHub Pages で公開した時に CSS・JS ファイルを正しく読み込めるようにするため、publicPath を未指定時のデフォルト / (ルート相対パス) から ./ (相対パス) に変更
ビルド時のソースマップが要らないので productionSourceMap: false を指定。tsconfig.json で sourceMap: false としても効かないので、コチラで指定する

今回は完全にシングルページで、ルーティングもストアも要らなかったので、Vue-Router や Vuex は導入していない。./src/App.vue に全てを実装した。

外部ライブラリも使わず自前で実装してみた。クエリ文字列のパース、GitHub API の link ヘッダのパース、テーブルのソート処理などは自前。

GitHub API でリポジトリ一覧を取得する処理は、以前も jq 芸の一環で紹介したこともあったが、今回はレスポンスヘッダを覗いて必要なだけ再帰的に処理してみたりしている。API のコールレート制限にぶつからない限り、自動的に全リポジトリ情報を取得できるので、ユーザのリポジトリページを見るよりもお手軽だろう。

見た目周りは雑にコーディング。

とりあえずコレで自分が欲しかったモノは作れたのでよしとする。