Probot で学ぶ TypeScript / Learn with Probot TypeScript

Fukuoka.ts #3 Online での登壇資料です．
https://fukuokats.connpass.com/event/218556/
発表中にデモをした GitHub App の ソースコードはこちら(label-police/src/index.ts)
https://github.com/bake0937/label-police

Transcript

1. Probot で学ぶ
 TypeScript
 okabeeeat 
 2021.8.23 / Fukuoka.ts #3 Online
2. 生活協同組合コープさっぽろ
 デジタル推進本部 システム部 
 AWS・エンジニアリングチーム　エンジニア
 岡部恭平 @okabeeeat
 Webアプリケーションエンジニア

3. さっぽろ？

4. 4年前に福岡に住んでいました

5. 現在

6. 目次
 • 私の TypeScript の勉強歴(2018〜2020)
 
 • なぜ挫折するのか?
 
 • 作ったもの
 
 • まとめ

7. TypeScript
 流行ってますよね(肌感)
 
 確かに便利そう

8. よし！勉強だ！

9. 私の TypeScript の勉強歴(2018〜2020)①
 • 一人で React.js + TypeScript でなんかWebアプリ作ろう
 ◦ 仕様どうしよ...そもそも React.js がわからない... 挫折 orz
 
 • 何人か集めて React.js + TypeScript でなんかWebアプリ作ろう
 ◦ みんなの時間が取れない... 挫折 orz
 
 • 一人で Vue.js + TypeScript でなんかWebアプリ作ろう
 ◦ 仕様どうしよ...そもそも Vue.js がわからない... 挫折 orz

10. 私の TypeScript の勉強歴(2018〜2020)②
 • 何人か集めて React.js + TypeScript でなんかWebアプリ作ろう
 ◦ みんなの時間が取れない... 挫折 orz
 
 • 一人で TypeScript でなんかWebアプリ作ろう
 ◦ あともうちょっとだった... 挫折 orz
 
 • とりあえず、TypeScript の本を一冊終わらせよう
 ◦ 最後に読んだページどこだっけ?... 挫折 orz

11. そんな時...

12. 業務で TypeScript を使う機会に巡り合った
 Saasサービス
 ・ ・ ・ ①WebHookを 飛ばす
 超ざっくり図
 ②CSV
 出力実行
 社内システム
 ③CSV
 アップロード

13. 約3ヶ月 TypeScript に触れてみて
 • 序盤はとにかくチームメンバーのコードを読んだ
 • 型のチェックが想像以上に便利!!!
 ◦ 特にお世話になったエラー
 
 
 • プログラミング言語に型が欲しいと段々と思うようになった

14. やっぱり業務で経験する
 のが一番!

15. 終わり

16. にはならない...
 • これからも業務で TypeScript を使う
 
 • TypeScript の力をまだ全然引き出せていない
 
 • 今後も継続的に勉強が必要

17. よし！勉強だ！(n回目)

18. なぜ挫折するのか?🤔
 • TypeScript 以外の技術が沢山あり、勉強するものが多い
 ◦ Vue.js, React.js など
 
 • 自分のペースで勉強できなかった
 
 • 壮大な仕様やデザインを考えてしまい、本末転倒気味だった
 ◦ 途中から何の勉強をしているのか忘れる
 
 • 本当に作りたいアプリがわからず、モチベーションが低下した

19. つまり...
 • 使用技術はなるべく広げすぎない
 ◦ 可能であれば Node.js + TypeScript ぐらい 
 
 • 自分のペースで勉強する
 
 • 仕様やデザインはシンプルにする
 
 • 普段の業務が便利になるものが作れたらモチベーションが上が る!!!

20. という条件で考えた結果

21. 以下に絞られた
 +
 or
 or
 Google App Script +
 clasp
 Probot
 Slack bolt

22. 色々考えた結果こうなった
 +
 or
 or
 Google App Script +
 clasp
 Probot
 Slack bolt

23. Probot とは?
 • GitHub App を作るためのフレームワーク(Node.js製)
 ◦ https://probot.github.io/
 
 • GitHub から WebHook を受け取り、Probot が GitHub API を実行する
 ◦ Octokit が内包されている
 
 • JavaScript または TypeScript で開発できる
 
 • コマンド一発で環境構築がほぼできる
 ◦ 要: yarn or npm

24. 選定理由
 • 実装がシンプル
 ◦ 例: issue を open にしたら ◯◯ する
 
 • 元々 GitHub API を使うのが好きだった
 
 • 環境構築が楽
 
 • 前々から業務で便利にしたいことがあった

25. 業務で便利にしたいこと
 Label 貼り!!

26. こんな経験は無いだろうか...
 そういえば、
 プルリクエストはちゃ んと Label を貼ってね
 は、はい！すいません

27. こんな経験は無いだろうか...
 だ、大丈夫かな...う るさく思われていな いかな...
 あぁ...いつも
 忘れるんだよ なぁ...

28. 作ったもの
 https://github.com/bake0937/label-police
 label-police
29. できること
 人間に変わってLabelを貼ってくれる

30. どんなコード？

31. デモ(時間があれば)

32. 作ってみた結果
 • とにかく楽しい！！
 ◦ 面倒だったことが便利になっていく感覚を得られる
 
 • 業務で普通に使えそう
 
 • 便利にするために TypeScript の文法を覚えたいモチベーションが生 まれた
 ◦ コードを書く ⇔ 本を読む のサイクルがやっと動き出した
 
 • 処理がシンプル過ぎる

33. まとめ
 • 去年まで何度か TypeScript の勉強に挑戦したが挫折していた
 
 • やっぱり業務で経験するのが一番ではある
 
 • 使用技術は少なく，仕様やデザインがシンプルで自分が作りたい ものを作る
 
 • 「label-police」という GitHub App を作ってみた
 ◦ TypeScript の力を引き出すのはこれからだ!!

34. ご清聴ありがとうございました