Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」

by SlashNephy

Slide 1

Slide 1 text

新卒研修で気軽に「ありがとう」を伝え合える Slack アプリを開発した話 id:SlashNephy / @SlashNephy 2023/01/25 Hatena Engineer Seminar #23 1

Slide 2

Slide 2 text

自己紹介 id:SlashNephy ● 組織・基盤開発本部 ● サービスプラットフォームチーム ● Web Application Engineer 2

Slide 3

Slide 3 text

3 はてなのエンジニア新卒研修

Slide 4

Slide 4 text

エンジニア新卒研修 2022 ● スケジュール ○ 5営業日 (2022/4/6 ~ 4/12) ● メンバー ○ 出会って間もない新卒エンジニア 4人でチームアップ 4

Slide 5

Slide 5 text

エンジニア新卒研修 2022 ● 内容 ○ 社長からお題が与えられて、期間中に開発 ○ 成果物を全社に発表 ● 社長のお題 ○ 「はてなピアスター」を開発して、社内公開する 5

Slide 6

Slide 6 text

6 「はてなピアスター」とは？

Slide 7

Slide 7 text

「はてなピアスター」とは？ゴール ● 従業員同士で感謝の気持ちを気軽に伝えたい ● 良い働きが賞賛されるようにしたい 7

Slide 8

Slide 8 text

「はてなピアスター」とは？ ● ピアボーナスを参考に ○ peer = 同僚、bonus = 報酬からなる造語 ○ 従業員間で少額のインセンティブを送り合う制度 8

Slide 9

Slide 9 text

「はてなピアスター」とは？ ● 「はてなスター」をモチーフにした ○ 記事やコメントにスターを付けて、気持ちを表現 ○ https://s.hatena.ne.jp ● 感謝の度合いに応じ、★ ★ ★ を送り合う 9

Slide 10

Slide 10 text

10 これが「はてなピアスター」です

Slide 11

Slide 11 text

11 起動 ● Slack のショートカットから「はてなピアスター」を起動 ● スラッシュコマンド /peerstar からも可

Slide 12

Slide 12 text

感謝を贈る ● 「はてなピアスター」を起動した画面 ● 宛先・スターの種類・感謝の気持ちを入力するフォームが出現 12

Slide 13

Slide 13 text

感謝を見る送信されたメッセージは #peer-stars チャンネルに投稿される 13

Slide 14

Slide 14 text

14 仕様検討

Slide 15

Slide 15 text

15 大事にしたこと ● 気軽さ従業員同士で気軽に感謝の気持ちを伝えたい ● 感謝してもされても楽しい継続的に「はてなピアスター」を使ってもらう

Slide 16

Slide 16 text

気軽さを実現するために ● 快適な UX ○ 社員は Slack を普段使いしている ○ Slack アプリで体験を良くする ■ スラッシュコマンド / ショートカット ● 無限に送れるイエロースター ★ ○ 些細なことでも送り合える 16

Slide 17

Slide 17 text

気軽さを実現するために ● 公開される (されない) メッセージ ○ レベルアップ通知 (後述) は本人だけ ○ spam にならないように 17

Slide 18

Slide 18 text

感謝してもされても楽しい ● レアなスター ★ ★ は個数限定 ○ ★ は毎月5個、★ は毎月3個 ○ レアなスターをもらえると嬉しい！ ○ 毎月カラースターを補充 18

Slide 19

Slide 19 text

感謝してもされても楽しい ● 経験値システムを導入 ● 感謝してもされても経験値が得られる ● レベルアップすると楽しい ● シーズン制も検討 19

Slide 20

Slide 20 text

20 開発の進め方

Slide 21

Slide 21 text

開発スケジュール ● 研修は5営業日で ○ 時間がない 😇 ● 1日1スプリント ○ 毎日小目標を立てて、動くものを作ろうという方針 ○ フィードバックをもらう 21

Slide 22

Slide 22 text

開発スケジュール ● 定期的に会話 ○ 毎朝今日やることを話し合う会 ○ 昼過ぎに進捗共有会 ■ その日のタスクの状況について ○ 終業前にふりかえり会 ■ KPT フレームワークでひとこと ● Keep / Problem / Try 22

Slide 23

Slide 23 text

開発言語を決める ● はてな社内では最近は Go / TypeScript が使われがち (参考: https://hatena.co.jp/recruit/engineer/technology) ● Slack の Bolt というライブラリが良さそう ○ https://slack.dev/bolt-js 👉 TypeScript + Bolt で開発することに 23

Slide 24

Slide 24 text

デプロイ先を決める ● AWS Lambda に CDK でデプロイ ● Bolt の `AwsLambdaReceiver` が便利だった ○ Lambda と API Gateway を繋ぎこんでくれるくん ○ これのおかげで Slack のイベントを受け取れるようになる ○ https://slack.dev/bolt-js/ja-jp/deployments/aws-lambda 24

Slide 25

Slide 25 text

チーム開発の進め方 ● 新卒エンジニア4人でチームアップ ● Slack / Scrapbox / GitHub を使い分ける ○ Slack: 連絡事項、PR・Issue・コミットの通知 ○ Scrapbox: ノウハウや、ハマったところの共有 ○ GitHub: Issue でタスク管理 25

Slide 26

Slide 26 text

チーム開発の進め方 ● 2人でペアプロ ○ Discord で通話しながら ○ VSCode Live Share の活用 ○ 👍 ペアの方が相談しやすい・問題が解決しやすい 26

Slide 27

Slide 27 text

27 まとめ

Slide 28

Slide 28 text

チーム開発のサマリー ● 開発期間中に ○ 179 コミット ○ マージした PR = 46 件 ○ クローズした Issue = 42 件 ● PR はなるべく細分化し、レビュアーの負担を下げるように心掛けた 28

Slide 29

Slide 29 text

29 研修を通して学んだこと ● 小さなイテレーションの重要性 ○ 議論を長引かせるよりもまずは手を動かす ○ フィードバックが得られやすい ● ドッグフーディング ○ 自分たちは満足できているか

Slide 30

Slide 30 text

「はてなピアスター」の今後 ● 研修が終了しても開発には終わりはない ○ 隔月ペースで「ピアスター会」を開催 w/ 社長 ● 今後も開発合宿などで新機能追加や改善を行う ● 社長を中心に、会社の制度としてピアボーナスの導入も検討されている 30

Slide 31

Slide 31 text

まとめ ● 与えられた要件から、細部まで仕様を検討し実装した ● フィードバックをもとに改善するプロセスを経験した ● チーム開発を経験することで、新卒⇄社員間の交流が深まった ● Slack アプリ開発は、エンジニアとしての基礎を学べた良いカリキュラムだった 31

Slide 32

Slide 32 text

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