Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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
ご清聴ありがとうございました