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

22年4月入社のエンジニア4人でチームアップし、新卒研修の一環として、従業員間で気軽に感謝の気持ちを送り合える Slack アプリ「はてなピアスター」を開発しました。今回は、この「はてなピアスター」のチーム開発を通して考えたことや実践したこと、学んだことについてお話しします。

1. 新卒研修で気軽に「ありがとう」 を伝え合える Slack アプリを 開発した話 id:SlashNephy / @SlashNephy 2023/01/25 Hatena Engineer Seminar #23 1
2. 自己紹介 id:SlashNephy • 組織・基盤開発本部 • サービスプラットフォーム チーム • Web Application Engineer 2
3. 3 はてなの エンジニア新卒研修
4. エンジニア新卒研修 2022 • スケジュール ◦ 5営業日 (2022/4/6 ~ 4/12) • メンバー ◦ 出会って間もない新卒エンジニア 4人でチームアップ 4
5. エンジニア新卒研修 2022 • 内容 ◦ 社長からお題が与えられて、期間中に開発 ◦ 成果物を全社に発表 • 社長のお題 ◦ 「はてなピアスター」を開発して、社内公開する 5
6. 6 「はてなピアスター」 とは？
7. 「はてなピアスター」とは？ ゴール • 従業員同士で感謝の気持ちを気軽に伝えたい • 良い働きが賞賛されるようにしたい 7
8. 「はてなピアスター」とは？ • ピアボーナスを参考に ◦ peer = 同僚、bonus = 報酬からなる造語 ◦ 従業員間で少額のインセンティブを送り合う制度 8
9. 「はてなピアスター」とは？ • 「はてなスター」をモチーフにした ◦ 記事やコメントにスターを付けて、気持ちを表現 ◦ https://s.hatena.ne.jp • 感謝の度合いに応じ、★ ★ ★ を送り合う 9
10. 10 これが 「はてなピアスター」です
11. 11 起動 • Slack のショートカッ トから 「はてなピアスター」 を起動 • スラッシュコマンド /peerstar からも可
12. 感謝を贈る • 「はてなピアスター」 を起動した画面 • 宛先・スターの種類・ 感謝の気持ちを入力す るフォームが出現 12
13. 感謝を見る 送信されたメッセージは #peer-stars チャンネルに 投稿される 13
14. 14 仕様検討
15. 15 大事にしたこと • 気軽さ 従業員同士で気軽に感謝の気持ちを伝えたい • 感謝してもされても楽しい 継続的に「はてなピアスター」を使ってもらう
16. 気軽さを実現するために • 快適な UX ◦ 社員は Slack を普段使いしている ◦ Slack アプリで体験を良くする ▪ スラッシュコマンド / ショートカット • 無限に送れるイエロースター ★ ◦ 些細なことでも送り合える 16
17. 気軽さを実現するために • 公開される (されない) メッセージ ◦ レベルアップ通知 (後述) は本人だけ ◦ spam にならないように 17
18. 感謝してもされても楽しい • レアなスター ★ ★ は個数限定 ◦ ★ は毎月5個、★ は毎月3個 ◦ レアなスターをもらえると嬉しい！ ◦ 毎月カラースターを補充 18
19. 感謝しても されても楽しい • 経験値システムを導入 • 感謝してもされても 経験値が得られる • レベルアップすると 楽しい • シーズン制も検討 19
20. 20 開発の進め方
21. 開発スケジュール • 研修は5営業日で ◦ 時間がない 😇 • 1日1スプリント ◦ 毎日小目標を立てて、動くものを作ろうという方針 ◦ フィードバックをもらう 21
22. 開発スケジュール • 定期的に会話 ◦ 毎朝 今日やることを話し合う会 ◦ 昼過ぎに進捗共有会 ▪ その日のタスクの状況について ◦ 終業前にふりかえり会 ▪ KPT フレームワークでひとこと • Keep / Problem / Try 22
23. 開発言語を決める • はてな社内では最近は Go / TypeScript が 使われがち (参考: https://hatena.co.jp/recruit/engineer/technology) • Slack の Bolt というライブラリが良さそう ◦ https://slack.dev/bolt-js 👉 TypeScript + Bolt で開発することに 23
24. デプロイ先を決める • AWS Lambda に CDK でデプロイ • Bolt の `AwsLambdaReceiver` が便利だった ◦ Lambda と API Gateway を繋ぎこんでくれるくん ◦ これのおかげで Slack のイベントを受け取れるようになる ◦ https://slack.dev/bolt-js/ja-jp/deployments/aws-lambda 24
25. チーム開発の進め方 • 新卒エンジニア4人でチームアップ • Slack / Scrapbox / GitHub を使い分ける ◦ Slack: 連絡事項、PR・Issue・コミットの通知 ◦ Scrapbox: ノウハウや、ハマったところの共有 ◦ GitHub: Issue でタスク管理 25
26. チーム開発の進め方 • 2人でペアプロ ◦ Discord で通話しながら ◦ VSCode Live Share の活用 ◦ 👍 ペアの方が相談しやすい・問題が解決しやすい 26
27. 27 まとめ
28. チーム開発のサマリー • 開発期間中に ◦ 179 コミット ◦ マージした PR = 46 件 ◦ クローズした Issue = 42 件 • PR はなるべく細分化し、レビュアーの負担を 下げるように心掛けた 28
29. 29 研修を通して学んだこと • 小さなイテレーションの重要性 ◦ 議論を長引かせるよりもまずは手を動かす ◦ フィードバック が得られやすい • ドッグフーディング ◦ 自分たちは満足できているか
30. 「はてなピアスター」の今後 • 研修が終了しても開発には終わりはない ◦ 隔月ペースで 「ピアスター会」 を開催 w/ 社長 • 今後も 開発合宿 などで新機能追加や改善を行う • 社長を中心に、会社の制度としてピアボーナスの 導入も検討されている 30
31. まとめ • 与えられた要件から、細部まで仕様を検討し実装した • フィードバックをもとに改善するプロセスを経験した • チーム開発を経験することで、新卒⇄社員間の交流が深 まった • Slack アプリ開発は、エンジニアとしての基礎を学べた 良いカリキュラムだった 31
32. 32 ご清聴 ありがとうございました！