Share
Embed
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
ご清聴
ありがとうございました！