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

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

kasu
January 27, 2022

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

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

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

kasu

January 27, 2022
Tweet

Other Decks in Programming

Transcript

  1. 仕事を通して身につける

    はてなエンジニアの振る舞い

    id: ergofriend
    Hatena Engineer Seminar #18
    2022-01-26

    View Slide

  2. はてなのエンジニアは

    どのような日々を過ごしてるの?

    この発表で伝えたいこと

    Hatena Engineer Seminar #18

    View Slide

  3. Outline
    1. 自己紹介

    a. だれ?

    b. 入社時のスキルセット

    2. はてなでの仕事

    a. 新規プロジェクト配属時はどんな環境だったか

    b. 仕事でやったこと5選!

    3. まとめ

    a. はてなの評価とエンジニアバリューズ

    b. はてなエンジニアの日々とは


    View Slide

  4. id:ergofriend
    ● はてなID

    ○ id:ergofriend

    ● はてな歴

    ○ 2019年 サマーインターン

    ■ ブログチーム

    ○ 2021年 新卒入社

    ■ WEBアプリケーションエンジニア


    View Slide

  5. ● ベンチャーのアルバイトでフロントエンドを担当

    ○ UI実装や機能実装

    ● サービスとして世に出す為の知識はなかった

    ○ 運用、WEB配信、セキュリティなど

    ● 開発規範への意識

    ○ PRで実装やコメント不足についてよく指摘された

    id:ergofriend > 入社以前の経験


    View Slide

  6. Work
    ● 配属チーム

    ○ 新規共同開発案件 

    ○ フルタイムエンジニアが新卒2人

    ○ シニアの24時間サポート付き

    ● 技術スタック

    ○ 社内でデファクトとなりつつあり知見
    があったものに決定

    TypeScript

    View Slide

  7. Work > 1.技術選定

    開発がスタート。

    要件にある機能は...

    ● 状態管理したい

    ● グラフを描画したい

    ● アニメーションをしたい

    ● 画面スワイプのジェスチャーで操作したい

    ライブラリを選ぶには 


    View Slide

  8. Work > 1.技術選定

    ライブラリを選ぶときに考えたこと

    ● 型が提供されているか 

    ● 機能要件・非機能要件を満たせるか

    ○ 機能が同じなら、インターフェースの使い勝手を比較

    ● 運用に支障がないか

    ○ メンテ、サイズ、ライセンス

    ライブラリを選ぶには 


    View Slide

  9. 1年程経ったが....技術選定の経過はいかに?

    ● 今のところうまくいっている

    ○ アップデートを問題なく行えている

    ○ 開発に影響のあるライブラリは選ばずに済んだ

    ● 選べなかったライブラリもある

    ○ Tooltipを自前で実装した


    Work > 1.技術選定
 ライブラリを選ぶには 


    View Slide

  10. まとめ

    ● 流行っているからこれにしよう。は出来ない!

    ● 要件を満たすものがない場合は自前で実装することも

    ● サービスへの影響を考慮する

    ○ 数年間に渡るメンテを考慮する必要がある

    ○ ライセンスによってはコードを公開する必要がある


    Work > 1.技術選定
 ライブラリを選ぶには 


    View Slide

  11. Work > 2.ペアプロ

    使うライブラリを決めたら実装がスタート。

    ● フルタイムの新卒エンジニア2人

    ○ シニアエンジニアの24時間サポート付き

    ● コードは0行

    ● お互いにgit initするわけにもいかない

    ● ペアプロという手段


    View Slide

  12. Work > 2.ペアプロ

    ペアプロとは

    ● ドライバーとナビゲーター

    ○ 実装者とレビュワー

    ● ドライバー

    ○ 機能の実装に集中

    ● ナビゲーター

    ○ レビュー

    ○ 議論の先導


    View Slide

  13. Work > 2.ペアプロ

    ペアプロしたことで...

    ● 実装の進め方を会話しながらやった

    ○ その後、分担しやすかった

    ● 知見を盗むことが出来た

    ○ 実装の進め方やタスクの整理方法など

    ● タスクの取り組み方を共有できる

    ○ やり方に対してフィードバックがもらえる


    View Slide

  14. Work > 3.実装とレビュー

    ペアプロの後は、タスクを1人で担当し始める。

    しかし...

    ● 機能盛りだくさんコンポーネント

    ● 思い込みによる要件の勘違い

    ● タイプミス・実装ミス


    View Slide

  15. Work > 3.実装とレビュー

    そんな実装のままレビューに出すと...


    ● 最後に確認していた仕様と変わっていた

    ● PRの説明にタスクの背景や問題を記載していない

    ● 仕様が複雑な箇所に注釈をつけていない

    ● データ処理の見落としによる実装漏れ

    49

    View Slide

  16. Work > 3.実装とレビュー

    レビューが盛り上がり過ぎないために...

    ● レビューされることを意識した実装

    ○ コメント

    ○ 適度なカプセル化

    ● セルフレビュー

    ● PRの説明を丁寧に用意する


    View Slide

  17. Work > 4.日々の暮らし方

    黙々と実装 -> レビューの繰り返しではない...

    ● 日々の仕事を続けるなかでやるようになったこと

    ○ 日記やタスク毎のページをScrapboxに記録していく

    ○ 仕様の整理やタスクの分解、疑問点の洗い出し

    ● チームの目が止まる場所で記録を残す

    ○ Scrapboxの更新がSlackで流れるようにしている


    View Slide

  18. Work > 5.コミュニケーション

    日々の暮らしでアウトプットしていると...

    ● Scrapboxの更新はSlackに流れる

    ● チームメイトが反応してくれる

    ● コミュニケーションが起きる


    View Slide

  19. Work > 5.コミュニケーション

    たとえば、どんなコミュニケーションが起きるのか?

    ● 仕様やデザインツールで表していない状態の確認

    ○ UIの選択・未選択などのデザインはどんな感じ?

    ● デザインツールで表現出来ない「動き」

    ○ UIアニメーションはどう動くといい?

    ● チームの中で議論のきっかけになる


    View Slide

  20. Work > 5.コミュニケーション

    共同開発というのはパートナーがいる。

    パートナーさんとのコミュニケーションも発生する。

    ● 我々がフロントエンド・パートナーさんがバックエンド

    ● フロントエンドから叩くAPIのデータを変えてほしい

    ○ こうして欲しい。だけではダメ 

    ○ 背景や理由を伝える 

    ○ 要求ではなくコミュニケーションをする。


    View Slide

  21. Summary
    仕事では以上のようなことを経験して、

    こんなに学びました!

    と、終わる前に...

    学んだことを振り返り、身につける手段として

    はてなには、「評価」がある


    View Slide

  22. Summary > エンジニアバリューズ
    はてなにはエンジニアバリューズというものがある。

    1. プロダクト志向

    2. コラボレーション

    3. おもしろさ

    4. 学びとオープンネス

    https://hatenacorp.jp/recruit/engineer/values


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Summary > 評価
    エンジニアの評価で見ること

    1. プロダクト志向

    ○ チームやプロダクトの課題を解決できる

    2. コラボレーション

    ○ 他者との協力を通じて、成果をあげる

    3. おもしろさ

    ○ 挑戦や変化を通じて、「新しい体験」を知る

    4. 学びとオープンネス

    ○ 体系的な知識の獲得とそれを他者へ伝える


    View Slide

  28. Summary > 評価
    評価が上がるごとに

    求められる役割が大きくなる

    1. プロダクト志向

    2. コラボレーション

    3. おもしろさ

    4. 学びとオープンネス

    チーム

    個人

    評価

    低い

    高い

    会社

    業界

    役割

    小さい

    大きい


    View Slide

  29. Summary > 評価
    個人からチームへ変わる場合は?

    1. プロダクト志向

    ○ 自分の課題を解決できる => チームの課題を解決できる

    2. コラボレーション

    ○ チームメンバーと協力して課題を解決できる => チームを引っ張って課題を解
    決できる

    3. おもしろさ

    ○ 自分で新しい分野を学んでいく=> 学んだことをチームの成果に繋げられる

    4. 学びとオープンネス

    ○ 仕事に必要なことを学んでいる => 体系的な知識を一般化してアウトプットでき
    る


    View Slide

  30. Summary > 評価
    評価は年2回、1月と7月にある。

    ● なにが良いのか?

    ○ 多角的・客観的にみてもらえる

    ○ 改善点が分かる

    ■ 次の評価を目標にして直すことが出来る

    ● 学んだことを振り返り、身につける仕組み


    View Slide

  31. Summary > 評価
    どんなフィードバックを貰えるのか?

    ● プロダクト志向

    ○ より良い実装方針についてデザインパターンを学んでみては

    ● コラボレーション

    ○ 開発合宿DXなどの社内イベントに積極的に参加していて良かった

    ● おもしろさ

    ○ ライブラリのアプデ対応も果敢に調査・実装修正を行っていたのがよかっ
    た

    ● 学びとオープンネス

    ○ タスクの過程をScrapboxに記録してくれるのはありがたい


    View Slide

  32. Summary > 評価
    PDCAの結果は?

    ● タスクのコントロール精度が上がった

    ○ 仕様の確認、見積もり、撤退判断

    ● コミュニケーションをとる

    ○ 仕様や疑問点を議論の俎上にあげていく

    ● プロダクトを良く保つ

    ○ ライブラリのアプデ、コーディング規約の導入


    View Slide

  33. Summary
    はてなのエンジニアとして仕事をするということ

    ● 機能を実装することは大切

    ● もちろんそれだけではダメ

    ○ タスクをコントロールする

    ○ コミュニケーションをとる

    ○ プロダクトを良く保つ


    View Slide

  34. はてなのエンジニアは

    どのような日々を過ごしてるの?

    この発表で伝えたいこと

    Hatena Engineer Seminar #18

    View Slide

  35. Summary
    はてなのエンジニアとして仕事をするということ

    ● 機能を実装することは大切

    ● もちろんそれだけではダメ

    ○ タスクをコントロールする

    ○ コミュニケーションをとる

    ○ プロダクトを良く保つ


    View Slide

  36. Summary > 評価
    個人からチームへ変わる場合は?

    1. プロダクト志向

    ○ 自分の課題を解決できる => チームの課題を解決できる

    2. コラボレーション

    ○ チームメンバーと協力して課題を解決できる => チームを引っ張って課題を解
    決できる

    3. おもしろさ

    ○ 自分で新しい分野を学んでいく=> 学んだことをチームの成果に繋げられる

    4. 学びとオープンネス

    ○ 仕事に必要なことを学んでいる => 体系的な知識を一般化してアウトプットでき
    る


    View Slide

  37. Summary
    はてなのエンジニアとして仕事をするということ

    ● 機能を実装することは大切

    ● もちろんそれだけではダメ

    ○ タスクをコントロールする

    ○ コミュニケーションをとる

    ○ プロダクトを良く保つ


    View Slide

  38. ご清聴ありがとうございました

    Hatena Engineer Seminar #18

    View Slide