Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hatena Engineer Seminar #18 仕事を通して身につけるはてなエンジニアの振る舞い

5237fad157563f7a9f90351a430624b7?s=47 kasu
January 27, 2022

Hatena Engineer Seminar #18 仕事を通して身につけるはてなエンジニアの振る舞い

https://hatena.connpass.com/event/235821/

新卒入社直後から携わっている新規の共同開発案件では、リポジトリの作成から技術選定・クライアント先方とのコミュニケーションを行いながらの実装を経て着々と開発が進んでいます。今回はこの共同開発案件を通して学んだことを、はてなのエンジニアのバリューズと絡めてお話しします。

5237fad157563f7a9f90351a430624b7?s=128

kasu

January 27, 2022
Tweet

More Decks by kasu

Other Decks in Programming

Transcript

  1. 仕事を通して身につける
 はてなエンジニアの振る舞い
 id: ergofriend Hatena Engineer Seminar #18 2022-01-26

  2. はてなのエンジニアは
 どのような日々を過ごしてるの?
 この発表で伝えたいこと
 Hatena Engineer Seminar #18

  3. Outline 1. 自己紹介
 a. だれ?
 b. 入社時のスキルセット
 2. はてなでの仕事
 a.

    新規プロジェクト配属時はどんな環境だったか
 b. 仕事でやったこと5選!
 3. まとめ
 a. はてなの評価とエンジニアバリューズ
 b. はてなエンジニアの日々とは

  4. id:ergofriend • はてなID
 ◦ id:ergofriend
 • はてな歴
 ◦ 2019年 サマーインターン


    ▪ ブログチーム
 ◦ 2021年 新卒入社
 ▪ WEBアプリケーションエンジニア

  5. • ベンチャーのアルバイトでフロントエンドを担当
 ◦ UI実装や機能実装
 • サービスとして世に出す為の知識はなかった
 ◦ 運用、WEB配信、セキュリティなど
 • 開発規範への意識


    ◦ PRで実装やコメント不足についてよく指摘された
 id:ergofriend > 入社以前の経験

  6. Work • 配属チーム
 ◦ 新規共同開発案件 
 ◦ フルタイムエンジニアが新卒2人
 ◦ シニアの24時間サポート付き


    • 技術スタック
 ◦ 社内でデファクトとなりつつあり知見 があったものに決定
 TypeScript
  7. Work > 1.技術選定
 開発がスタート。
 要件にある機能は...
 • 状態管理したい
 • グラフを描画したい
 •

    アニメーションをしたい
 • 画面スワイプのジェスチャーで操作したい
 ライブラリを選ぶには 

  8. Work > 1.技術選定
 ライブラリを選ぶときに考えたこと
 • 型が提供されているか 
 • 機能要件・非機能要件を満たせるか
 ◦

    機能が同じなら、インターフェースの使い勝手を比較
 • 運用に支障がないか
 ◦ メンテ、サイズ、ライセンス
 ライブラリを選ぶには 

  9. 1年程経ったが....技術選定の経過はいかに?
 • 今のところうまくいっている
 ◦ アップデートを問題なく行えている
 ◦ 開発に影響のあるライブラリは選ばずに済んだ
 • 選べなかったライブラリもある
 ◦

    Tooltipを自前で実装した
 
 Work > 1.技術選定
 ライブラリを選ぶには 

  10. まとめ
 • 流行っているからこれにしよう。は出来ない!
 • 要件を満たすものがない場合は自前で実装することも
 • サービスへの影響を考慮する
 ◦ 数年間に渡るメンテを考慮する必要がある
 ◦

    ライセンスによってはコードを公開する必要がある
 
 Work > 1.技術選定
 ライブラリを選ぶには 

  11. Work > 2.ペアプロ
 使うライブラリを決めたら実装がスタート。
 • フルタイムの新卒エンジニア2人
 ◦ シニアエンジニアの24時間サポート付き
 • コードは0行


    • お互いにgit initするわけにもいかない
 • ペアプロという手段

  12. Work > 2.ペアプロ
 ペアプロとは
 • ドライバーとナビゲーター
 ◦ 実装者とレビュワー
 • ドライバー


    ◦ 機能の実装に集中
 • ナビゲーター
 ◦ レビュー
 ◦ 議論の先導

  13. Work > 2.ペアプロ
 ペアプロしたことで...
 • 実装の進め方を会話しながらやった
 ◦ その後、分担しやすかった
 • 知見を盗むことが出来た


    ◦ 実装の進め方やタスクの整理方法など
 • タスクの取り組み方を共有できる
 ◦ やり方に対してフィードバックがもらえる

  14. Work > 3.実装とレビュー
 ペアプロの後は、タスクを1人で担当し始める。
 しかし...
 • 機能盛りだくさんコンポーネント
 • 思い込みによる要件の勘違い
 •

    タイプミス・実装ミス

  15. Work > 3.実装とレビュー
 そんな実装のままレビューに出すと...
 
 • 最後に確認していた仕様と変わっていた
 • PRの説明にタスクの背景や問題を記載していない
 •

    仕様が複雑な箇所に注釈をつけていない
 • データ処理の見落としによる実装漏れ
 49
  16. Work > 3.実装とレビュー
 レビューが盛り上がり過ぎないために...
 • レビューされることを意識した実装
 ◦ コメント
 ◦ 適度なカプセル化


    • セルフレビュー
 • PRの説明を丁寧に用意する

  17. Work > 4.日々の暮らし方
 黙々と実装 -> レビューの繰り返しではない...
 • 日々の仕事を続けるなかでやるようになったこと
 ◦ 日記やタスク毎のページをScrapboxに記録していく


    ◦ 仕様の整理やタスクの分解、疑問点の洗い出し
 • チームの目が止まる場所で記録を残す
 ◦ Scrapboxの更新がSlackで流れるようにしている

  18. Work > 5.コミュニケーション
 日々の暮らしでアウトプットしていると...
 • Scrapboxの更新はSlackに流れる
 • チームメイトが反応してくれる
 • コミュニケーションが起きる


  19. Work > 5.コミュニケーション
 たとえば、どんなコミュニケーションが起きるのか?
 • 仕様やデザインツールで表していない状態の確認
 ◦ UIの選択・未選択などのデザインはどんな感じ?
 • デザインツールで表現出来ない「動き」


    ◦ UIアニメーションはどう動くといい?
 • チームの中で議論のきっかけになる
 

  20. Work > 5.コミュニケーション
 共同開発というのはパートナーがいる。
 パートナーさんとのコミュニケーションも発生する。
 • 我々がフロントエンド・パートナーさんがバックエンド
 • フロントエンドから叩くAPIのデータを変えてほしい
 ◦

    こうして欲しい。だけではダメ 
 ◦ 背景や理由を伝える 
 ◦ 要求ではなくコミュニケーションをする。

  21. Summary 仕事では以上のようなことを経験して、
 こんなに学びました!
 と、終わる前に...
 学んだことを振り返り、身につける手段として
 はてなには、「評価」がある


  22. Summary > エンジニアバリューズ はてなにはエンジニアバリューズというものがある。
 1. プロダクト志向
 2. コラボレーション
 3. おもしろさ


    4. 学びとオープンネス
 https://hatenacorp.jp/recruit/engineer/values

  23. Summary > エンジニアバリューズ 高品質なプロダクトを通じてユーザー やコミュニティの幸福を実現すること

  24. Summary > エンジニアバリューズ 独りでは出せないアウトプットをチー ムとして出していくこと

  25. Summary > エンジニアバリューズ 新しい体験を生みだす「おもしろさ」を 原動力として革新を目指していくこと

  26. Summary > エンジニアバリューズ オープンな態度とフィード バックを通じて成長しつづ けていくこと

  27. Summary > 評価 エンジニアの評価で見ること
 1. プロダクト志向
 ◦ チームやプロダクトの課題を解決できる
 2. コラボレーション


    ◦ 他者との協力を通じて、成果をあげる
 3. おもしろさ
 ◦ 挑戦や変化を通じて、「新しい体験」を知る
 4. 学びとオープンネス
 ◦ 体系的な知識の獲得とそれを他者へ伝える

  28. Summary > 評価 評価が上がるごとに
 求められる役割が大きくなる
 1. プロダクト志向
 2. コラボレーション
 3.

    おもしろさ
 4. 学びとオープンネス
 チーム
 個人
 評価
 低い
 高い
 会社
 業界
 役割
 小さい
 大きい

  29. Summary > 評価 個人からチームへ変わる場合は?
 1. プロダクト志向
 ◦ 自分の課題を解決できる => チームの課題を解決できる
 2.

    コラボレーション
 ◦ チームメンバーと協力して課題を解決できる => チームを引っ張って課題を解 決できる
 3. おもしろさ
 ◦ 自分で新しい分野を学んでいく=> 学んだことをチームの成果に繋げられる
 4. 学びとオープンネス
 ◦ 仕事に必要なことを学んでいる => 体系的な知識を一般化してアウトプットでき る

  30. Summary > 評価 評価は年2回、1月と7月にある。
 • なにが良いのか?
 ◦ 多角的・客観的にみてもらえる
 ◦ 改善点が分かる


    ▪ 次の評価を目標にして直すことが出来る
 • 学んだことを振り返り、身につける仕組み

  31. Summary > 評価 どんなフィードバックを貰えるのか?
 • プロダクト志向
 ◦ より良い実装方針についてデザインパターンを学んでみては
 • コラボレーション


    ◦ 開発合宿DXなどの社内イベントに積極的に参加していて良かった
 • おもしろさ
 ◦ ライブラリのアプデ対応も果敢に調査・実装修正を行っていたのがよかっ た
 • 学びとオープンネス
 ◦ タスクの過程をScrapboxに記録してくれるのはありがたい

  32. Summary > 評価 PDCAの結果は?
 • タスクのコントロール精度が上がった
 ◦ 仕様の確認、見積もり、撤退判断
 • コミュニケーションをとる


    ◦ 仕様や疑問点を議論の俎上にあげていく
 • プロダクトを良く保つ
 ◦ ライブラリのアプデ、コーディング規約の導入

  33. Summary はてなのエンジニアとして仕事をするということ
 • 機能を実装することは大切
 • もちろんそれだけではダメ
 ◦ タスクをコントロールする
 ◦ コミュニケーションをとる


    ◦ プロダクトを良く保つ

  34. はてなのエンジニアは
 どのような日々を過ごしてるの?
 この発表で伝えたいこと
 Hatena Engineer Seminar #18

  35. Summary はてなのエンジニアとして仕事をするということ
 • 機能を実装することは大切
 • もちろんそれだけではダメ
 ◦ タスクをコントロールする
 ◦ コミュニケーションをとる


    ◦ プロダクトを良く保つ

  36. Summary > 評価 個人からチームへ変わる場合は?
 1. プロダクト志向
 ◦ 自分の課題を解決できる => チームの課題を解決できる
 2.

    コラボレーション
 ◦ チームメンバーと協力して課題を解決できる => チームを引っ張って課題を解 決できる
 3. おもしろさ
 ◦ 自分で新しい分野を学んでいく=> 学んだことをチームの成果に繋げられる
 4. 学びとオープンネス
 ◦ 仕事に必要なことを学んでいる => 体系的な知識を一般化してアウトプットでき る

  37. Summary はてなのエンジニアとして仕事をするということ
 • 機能を実装することは大切
 • もちろんそれだけではダメ
 ◦ タスクをコントロールする
 ◦ コミュニケーションをとる


    ◦ プロダクトを良く保つ

  38. ご清聴ありがとうございました
 Hatena Engineer Seminar #18