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

    View full-size slide

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

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

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

    岡部恭平 @okabeeeat

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


    View full-size slide

  3. さっぽろ?


    View full-size slide

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


    View full-size slide

  5. 目次

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


    ● なぜ挫折するのか?


    ● 作ったもの


    ● まとめ


    View full-size slide

  6. TypeScript

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


    確かに便利そう


    View full-size slide

  7. よし!勉強だ!


    View full-size slide

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

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

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


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

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


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

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


    View full-size slide

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

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

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


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

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


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

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


    View full-size slide

  10. そんな時...


    View full-size slide

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

    Saasサービス




    ①WebHookを
    飛ばす

    超ざっくり図

    ②CSV

    出力実行

    社内システム

    ③CSV

    アップロード


    View full-size slide

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

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

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

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



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


    View full-size slide

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

    のが一番!


    View full-size slide

  14. 終わり


    View full-size slide

  15. にはならない...

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


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


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


    View full-size slide

  16. よし!勉強だ!(n回目)


    View full-size slide

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

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

    ○ Vue.js, React.js など


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


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

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


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


    View full-size slide

  18. つまり...

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

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


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


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


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


    View full-size slide

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


    View full-size slide

  20. 以下に絞られた

    +

    or
 or

    Google App Script +

    clasp

    Probot
 Slack bolt


    View full-size slide

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

    +

    or
 or

    Google App Script +

    clasp

    Probot
 Slack bolt


    View full-size slide

  22. Probot とは?

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

    ○ https://probot.github.io/


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

    ○ Octokit が内包されている


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


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

    ○ 要: yarn or npm


    View full-size slide

  23. 選定理由

    ● 実装がシンプル

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


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


    ● 環境構築が楽


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


    View full-size slide

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

    Label 貼り!!


    View full-size slide

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

    そういえば、

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


    View full-size slide

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

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

    忘れるんだよ
    なぁ...


    View full-size slide

  27. 作ったもの

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

    label-police

    View full-size slide

  28. できること

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


    View full-size slide

  29. どんなコード?


    View full-size slide

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


    View full-size slide

  31. 作ってみた結果

    ● とにかく楽しい!!

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


    ● 業務で普通に使えそう


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

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


    ● 処理がシンプル過ぎる


    View full-size slide

  32. まとめ

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


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


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


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

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


    View full-size slide

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


    View full-size slide