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 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