GitHubでTypeScriptのプロダクトを作るときに便利な連携サービス

# 概要

正月の休みを利用して，

[TS-Express](https://github.com/kotauchisunsun/ts-express)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/1194b08f-7a7e-36bf-4f56-35226705cc68.png)

というものを作りました．これ自身はなんのことはないTypeScriptとExpressの練習プロジェクトです．
これをGithubのリポジトリとして公開し，色々な外部のサービスを色々繋ぎこんでみたので，その備忘録を兼ねたまとめとなっています．

# サービス

## CircleCI

https://circleci.com/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/1bafeedf-ee25-af5a-864d-edb1c2f11c91.png)

実際の画面
https://circleci.com/gh/kotauchisunsun/ts-express

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/a05aa560-8a09-fb03-0bcc-e0da76cb32ab.png)


定番のCircleCIです．クラウド上でCI回すならこれが便利だと思います．TravisCIは？と思うかもしれませんが，ごめんなさい使ったことないです．
本当に簡単に使えて，20,30分そこそこで設定できます．しかし，一点だけハマりポイントがあって，

公式のドキュメントを適当に参考にして作ってしまうと，
https://circleci.com/docs/2.0/hello-world/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/1a5c42a0-defd-83df-64cf-6910b38e543e.png)

えらく古いNode.jsのバージョンを入れてしまいます．そのため，初めて導入して，何か動かないな？とか思った時には，とりあえずCircleCIのNode.jsのバージョンを疑ってみるのも良いかもしれません．

**色々なサービスを使う際は最初にCIを入れることをお勧めします．**

というのは，ほとんどの外部サービスがCIと連携を前提にしていたりするので，**色々と導入する前に**行っておくことをお勧めします．

# Code Climate

https://codeclimate.com/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/55223080-d355-3f0e-6acc-db301c37fcfc.png)

実際の画面
https://codeclimate.com/github/kotauchisunsun/ts-express
![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/d7fed49d-7760-ca6e-e5e0-baf6abcd90e4.png)

OSSの場合，無料でソースコードのQualityの調査をしてくれるサービスです．画像のようにMaintainabilityの解析とTest Coverageの表示してくれます．CodeClimateはIssueの機能が強力で，

https://codeclimate.com/github/kotauchisunsun/ts-express/issues

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/b4ca9385-bfd9-201a-7be9-1531225a81a7.png)

リポジトリ内のコードを解析して，「どういうコードが技術負債になりやすいか？」「どう直せばよいか？」をサジェストしてくれる機能があります．
導入も簡単なので，すぐにどの部分を直したらよいか？が一目でわかります．

# Renovate

https://renovatebot.com/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/ddd96e9d-2b2a-6516-d479-1f9366f6c154.png)


実際の画面
https://github.com/kotauchisunsun/ts-express/pull/7

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/5c342857-5201-a29e-ead9-de53fa3b94d0.png)

これは，パッケージの依存関係を自動で上げてくれるbotです．Node.jsを使っている方だと，npmやyarnでパッケージ管理をしていると思います．昔と大きく違うことの1つとして，1つのプロダクトに関してかなり多くのパッケージを利用するようになりました．また，開発が効率化され，ライブラリのバージョンもバンバン上がり，パッケージの依存関係やアップデートの管理も頻繁に行う必要が出てきました．また，去年の話だと，ライブラリに攻撃コードを埋め込まれ，パッケージのアップデートを促されたこともありました．このようにライブラリの管理も最近のプロダクトに必要になってきており，それを解決してくれるプロダクトがRenovateです．
このサービスの面白いところは基本的にプルリクをあげてくることです（笑）
サービスをリポジトリに設定した後，中のコードを解析して，「Renovateの設定ファイルついかするプルリク作ったからマージして！」と飛ばしてくることです．あとは，基本的にはマージするだけでOKで，ライブラリのバージョンが上がったりすると，その都度，プルリクを飛ばしてきてくれます．
そんなにバージョン上げて大丈夫？と不安になることもありますが，個人的には，動作するか？ちゃんと動くか？はCIで管理したほうが良いと思います．そのためには，かなり高いカバレッジが必要になったりして，大変な面もあるのですが・・・


# CodeCov

https://codecov.io
![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/bf5ffdb4-e214-fa4c-dc2a-20d9f4909409.png)


実際の画面

https://codecov.io/gh/kotauchisunsun/ts-express
![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/29c21ef8-d0d3-e3a0-5c0a-2f17a7e549aa.png)

これはコードのカバレッジに特化したサービスです．CIと連携し，コードのカバレッジを解析します．
これだけを見るとCodeClimateと同じじゃない？という気もするのですが，個人的に気に入ったのはプルリクの解析機能です．

https://github.com/kotauchisunsun/ts-express/pull/6

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/79c4daff-6d97-a21b-1ce9-35b1b4cae92c.png)

このような形で，プルリクに対して，codecovのbotがコメントをして，どれくらいカバレッジがあるのか？どれくらい変化するのか？を可視化してくれます．


# 選外

## Codacy

https://app.codacy.com/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/f5d04996-8cfd-32cd-e18f-9e69e40ffb60.png)

知り合いが使っていたので導入していたのですが，利用をあきらめたプロダクトです．
ざっくりというとCodeClimateと似たようなもので，コードの静的解析とカバレッジを表示してくれるサービスです．
理由は単純で静的な解析にTypeScriptが対応していなかったためです．

https://app.codacy.com/project/kotauchisunsun/ts-express/dashboard

![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/b4fd809d-b557-c80b-eab7-295271f79fea.png)

そのため，「連携してもあまり見るものがない・・・」となったので，連携したまま放置しています．
あとCodacyは最初から連携していたのですが，一向にカバレッジが表示されなかったり，コミットしてもUIに反映されなかったり，結構ややこしいものを引きました．カバレッジは一旦プロジェクトごと削除した後，時間がたってやっと表示されたので，結構大変でした．そのため，あまり近寄りたくない感じです．


## GreenKeeper

https://greenkeeper.io/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/139643/c0e47127-6155-b3ff-39ed-e87eadd79d22.png)

これは先ほど紹介したRenovateと似たプロダクトで，node.js周りのパッケージの依存性管理やアップデート管理を行ってくれるbotです．**導入をあきらめました．**
正直，なぜ導入できなかったのかわからないレベルでわからなかったです．ドキュメントには2,3のクリックでできるような表記はあるのですが，実際には全然連携されずGreenKeeperのアカウント表示にも何も表示されない．いくら待ってもプルリクが上がってこない．となってしまったため，もう使いたくない感じです．たぶん1,2時間ぐらいは溶けて，そのあとRenovateが一瞬で導入できたので拍子抜けしました．

# 個人的な連携するモチベーション

このあたりの連携サービスを利用したモチベーションは，5つあって，

1. リポジトリにバッヂほしい
2. CIがをしたい
3. テストカバレッジを表示したい
4. コードの良さを解析したい
5. 依存関係の管理したい

一番大きなモチベーションは「リポジトリへのバッヂ付与」でした(笑)
バッヂをペタペタ貼られたリポジトリを見て，こんだけいろんな「外部サービスと連携して大変そう・・・」という気持ちがありました．実際やってみるとこなれてるやつは本当に簡単に連携出来て，簡単にバッジもらえますね．あとバッヂついてると，「ちゃんと保守されてる感」も結構ありますよね(笑)
「CIができること」は割と今では当たり前な感じはありますが，あまりgithub連携でパブリックなリポジトリでは経験が少なかったために，もう一度やってみたかった感じでした．
もともとTS-Expressのプロダクト自体，かなり厳密なTDDで行っており，カバレッジもかなり高いように作っていました．そのため，ちゃんとアピールしたいなーと思って，「テストカバレッジの表示」はしたいモチベーションがありました．
「コードの良さを解析できること．」に関しては2つほど理由があって，1つは「静的解析ってtslintで十分なんだっけ？」という疑問です．昨今のjs周りは「Linterは必須」みたいな流れはありますが，実際に使ってみると，「1関数の実装が長い」「変数はキャメルケースにすべき」「importで*禁止」みたいなルールが多いように思いました．実際それはそれで大事なのですが，あまりにも「フォーマット」に寄りすぎており，「クラスが密結合している」「パッケージの依存関係が悪い」「コードに繰り返しがある」といった，もう少しマクロな視点はないのか．と疑問に思っていました．そのため，そのあたりが解析できるサービスはないかなぁ．と思って探していました．その面でもCodeClimateは優秀でした．あと2つめの理由は「コードの宗教戦争に疲れた」という背景があります．あるあるだと思いますがコード書いて，「この実装は良くない．」「いや，この実装のほうがイケてる」「長期的にみるとこっち」と設計やその書き方にばらつきがあります．そういう議論で平行線が続き，落としどころを付ける作業が，すごくめんどくさいです．そういった時に，このような静的解析ツールを証拠にして，「いや，ツールには悪いと判断されなかったんだから，このまま進めよう」とスムーズに開発を進められないかな．と思っています．
最後は「依存関係の管理」です．これは自分の中では重要度が上がっていたりします．安定性が求められるプログラムを書く際，ライブラリのパッケージをバンバン上げるのには互換性の面で抵抗があります．一方でセキュリティ周りでのパッケージのアップデートは見逃したくない．そうすると行うべきことは3つで，「テスト」「CI」「依存管理」で，「依存管理」でパッケージをアグレッシブに更新しつつ，その動作保証は「テスト」，それを動かすための「CI」という3つ組がそろわないと，かなりリスキーな状態になるんだと感じています．そのために一度Renovateを試してみたかった．という背景がありました．

# 感想

やってみたところ「連携が大変なサービス」と「連携が楽なサービス」の落差がかなりありました．
一番簡単なのは「Renovate」です．もうほとんどワンクリックのみで，あとはプルリクが来るのを待つのみです．意外に分かりにくかったのは「CodeClimate」でしょうか．ドキュメント自身はしっかりしてはいるのですが，「Jest + CircleCI」のようなジャストなドキュメントや資料がないので，自分のためにちょっとアレンジする必要があったりするので，ハマるときはハマるイメージです．逆に「codecov」はコマンド自体が賢いので，ほぼドキュメントのコピペで動くのが良いです．
他にも面白い連携サービスがあったら教えてください．