Tweet
Tweet

Slide 1

Slide 1 text

Probot で学ぶ
 TypeScript
 okabeeeat 
 2021.8.23 / Fukuoka.ts #3 Online

Slide 2

Slide 2 text

生活協同組合コープさっぽろ
 デジタル推進本部 システム部 
 AWS・エンジニアリングチーム　エンジニア
 岡部恭平 @okabeeeat
 Webアプリケーションエンジニア


Slide 3

Slide 3 text

さっぽろ？


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

現在


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

よし！勉強だ！


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

そんな時...


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

終わり


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

という条件で考えた結果


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

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


Slide 23

Slide 23 text

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


Slide 24

Slide 24 text

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


Slide 25

Slide 25 text

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


Slide 26

Slide 26 text

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


Slide 27

Slide 27 text

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


Slide 28

Slide 28 text

作ったもの
 https://github.com/bake0937/label-police
 label-police

Slide 29

Slide 29 text

できること
 人間に変わってLabelを貼ってくれる


Slide 30

Slide 30 text

どんなコード？


Slide 31

Slide 31 text

デモ(時間があれば)


Slide 32

Slide 32 text

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


Slide 33

Slide 33 text

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


Slide 34

Slide 34 text

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