Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

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

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

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

デモサイトは以下。

neos21.github.io

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

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

リポジトリは以下。

github.com

以下、作った時の話。

スキあらば自分語り

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

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


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

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

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


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

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

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

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

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


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

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