Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Probot で学ぶ TypeScript / Learn with Probot TypeScript

bake0937
August 23, 2021

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

bake0937

August 23, 2021
Tweet

More Decks by bake0937

Other Decks in Technology

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. ご清聴ありがとうございました