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
   

   View Slide

2. 生活協同組合コープさっぽろ

   デジタル推進本部 システム部 

   AWS・エンジニアリングチーム　エンジニア

   岡部恭平 @okabeeeat

   Webアプリケーションエンジニア

   

   View Slide

3. さっぽろ？

   

   View Slide

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

   

   View Slide

5. 現在

   

   View Slide

6. 目次

   ● 私の TypeScript の勉強歴(2018〜2020)

   

   ● なぜ挫折するのか?

   

   ● 作ったもの

   

   ● まとめ

   

   View Slide

7. TypeScript

   流行ってますよね(肌感)

   

   確かに便利そう

   

   View Slide

8. よし！勉強だ！

   

   View Slide

9. 私の TypeScript の勉強歴(2018〜2020)①

   ● 一人で React.js + TypeScript でなんかWebアプリ作ろう

   ○ 仕様どうしよ...そもそも React.js がわからない... 挫折 orz

   

   ● 何人か集めて React.js + TypeScript でなんかWebアプリ作ろう

   ○ みんなの時間が取れない... 挫折 orz

   

   ● 一人で Vue.js + TypeScript でなんかWebアプリ作ろう

   ○ 仕様どうしよ...そもそも Vue.js がわからない... 挫折 orz

   

   View Slide

10. 私の TypeScript の勉強歴(2018〜2020)②

    ● 何人か集めて React.js + TypeScript でなんかWebアプリ作ろう

    ○ みんなの時間が取れない... 挫折 orz

    

    ● 一人で TypeScript でなんかWebアプリ作ろう

    ○ あともうちょっとだった... 挫折 orz

    

    ● とりあえず、TypeScript の本を一冊終わらせよう

    ○ 最後に読んだページどこだっけ?... 挫折 orz

    

    View Slide

11. そんな時...

    

    View Slide

12. 業務で TypeScript を使う機会に巡り合った

    Saasサービス

    ・
    ・
    ・
    ①WebHookを
    飛ばす

    超ざっくり図

    ②CSV

    出力実行

    社内システム

    ③CSV

    アップロード

    

    View Slide

13. 約3ヶ月 TypeScript に触れてみて

    ● 序盤はとにかくチームメンバーのコードを読んだ

    ● 型のチェックが想像以上に便利!!!

    ○ 特にお世話になったエラー

    

    

    ● プログラミング言語に型が欲しいと段々と思うようになった

    

    View Slide

14. やっぱり業務で経験する

    のが一番!

    

    View Slide

15. 終わり

    

    View Slide

16. にはならない...

    ● これからも業務で TypeScript を使う

    

    ● TypeScript の力をまだ全然引き出せていない

    

    ● 今後も継続的に勉強が必要

    

    View Slide

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

    

    View Slide

18. なぜ挫折するのか?🤔

    ● TypeScript 以外の技術が沢山あり、勉強するものが多い

    ○ Vue.js, React.js など

    

    ● 自分のペースで勉強できなかった

    

    ● 壮大な仕様やデザインを考えてしまい、本末転倒気味だった

    ○ 途中から何の勉強をしているのか忘れる

    

    ● 本当に作りたいアプリがわからず、モチベーションが低下した

    

    View Slide

19. つまり...

    ● 使用技術はなるべく広げすぎない

    ○ 可能であれば Node.js + TypeScript ぐらい 

    

    ● 自分のペースで勉強する

    

    ● 仕様やデザインはシンプルにする

    

    ● 普段の業務が便利になるものが作れたらモチベーションが上が
    る!!!

    

    View Slide

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

    

    View Slide

21. 以下に絞られた

    +

    or
 or

    Google App Script +

    clasp

    Probot
 Slack bolt

    

    View Slide

22. 色々考えた結果こうなった

    +

    or
 or

    Google App Script +

    clasp

    Probot
 Slack bolt

    

    View Slide

23. Probot とは?

    ● GitHub App を作るためのフレームワーク(Node.js製)

    ○ https://probot.github.io/

    

    ● GitHub から WebHook を受け取り、Probot が GitHub API を実行する

    ○ Octokit が内包されている

    

    ● JavaScript または TypeScript で開発できる

    

    ● コマンド一発で環境構築がほぼできる

    ○ 要: yarn or npm

    

    View Slide

24. 選定理由

    ● 実装がシンプル

    ○ 例: issue を open にしたら ◯◯ する

    

    ● 元々 GitHub API を使うのが好きだった

    

    ● 環境構築が楽

    

    ● 前々から業務で便利にしたいことがあった

    

    View Slide

25. 業務で便利にしたいこと

    Label 貼り!!

    

    View Slide

26. こんな経験は無いだろうか...

    そういえば、

    プルリクエストはちゃ
    んと Label を貼ってね
 は、はい！すいません

    

    View Slide

27. こんな経験は無いだろうか...

    だ、大丈夫かな...う
    るさく思われていな
    いかな...
 あぁ...いつも

    忘れるんだよ
    なぁ...

    

    View Slide

28. 作ったもの

    https://github.com/bake0937/label-police

    label-police
    

    View Slide

29. できること

    人間に変わってLabelを貼ってくれる

    

    View Slide

30. どんなコード？

    

    View Slide

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

    

    View Slide

32. 作ってみた結果

    ● とにかく楽しい！！

    ○ 面倒だったことが便利になっていく感覚を得られる

    

    ● 業務で普通に使えそう

    

    ● 便利にするために TypeScript の文法を覚えたいモチベーションが生
    まれた

    ○ コードを書く ⇔ 本を読む のサイクルがやっと動き出した

    

    ● 処理がシンプル過ぎる

    

    View Slide

33. まとめ

    ● 去年まで何度か TypeScript の勉強に挑戦したが挫折していた

    

    ● やっぱり業務で経験するのが一番ではある

    

    ● 使用技術は少なく，仕様やデザインがシンプルで自分が作りたい
    ものを作る

    

    ● 「label-police」という GitHub App を作ってみた

    ○ TypeScript の力を引き出すのはこれからだ!!

    

    View Slide

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

    

    View Slide