「Frontrend × Bonfire Frontend」に参加してきました

勉強会メモ
  • Frontrend × Bonfire Frontendに参加してきました。

frontrend.connpass.com

  • YahooとAbemaTVの若手社員の入社から現在までの成長についてお話をきくことができました。
  • 「学生エンジニアから事業プロダクトを作るプロのエンジニアに成長できた」という言葉もありましたが、単にアプリ開発をするだけでなくKPIなどを意識して取り組んでいる姿勢が印象的でした。
  • 原さんの発表はノウハウがかなりつまっていたのでスライドをじっくり見返しておきたいと思います。
タイトル 発表者
新卒3年目、ヤフーで学んだ2年間を振り返る 濱田 唯 / ヤフー株式会社
AbemaTV 新卒1年目エンジニア実録 野口 直 / 株式会社AbemaTV
Webフロントエンド&デザインで学んだ2年間を総括 内藤 秀彦 / ヤフー株式会社
こえのブログでのPWA 〜開発現場編〜 原 一成 / 株式会社サイバーエージェント

新卒3年目、ヤフーで学んだ2年間を振り返る

  • 濱田 唯さん / ヤフー株式会社 メディアカンパニー マーケティングソリューションズ統括本部
  • 2017入社 エンジニア入社からフロントエンド

入社して2年

  • 新卒研修(3ヶ月)
  • OJT(3ヶ月)
  • 本配属
  • 広告入稿管理システム

2年での成長ポイント

チーム開発の心構え

  • コードレビューは大事
  • 人が読むことを意識して書く
  • レビューはプロジェクトの雰囲気を作る

設計構成への意識

  • 動けばいいではダメ
    • 大人数で長期で運用される
  • チームごとのルールにのっとったアーキテクチャで開発
    • TypeScript
    • re-ducks
    • AtomicDesign
  • 大事なのは
    • ルールが言語化されてること
    • メンバーが合意してること

新しい技術に対する意欲

  • 自分も議論に参加するために意欲的になった

AbemaTV 新卒1年目エンジニア実録

  • 野口 直寛さん @nodaguti / 株式会社AbemaTV 開発本部

1年目エンジニア実録

  • 配属から1年弱で約560PR10万行
  • 新卒研修:4月-5月
  • AbemaTVに配属:5月
  • 5-8月
    • コミット/PRの粒度に慣れた
    • 担当した機能はレビューもできるようになった
    • RxJS使ったFluxのフローを一通り作れた
  • 8-12月
    • 大きな案件でタスク分解/見積もりしてスケジュールどおり進行
    • プロダクトを伸ばすにはどうすればいいか考え実行
    • Chrome Dev Summitに参加
  • 1-4月
    • ディレクターやエンジニアにヒアリングして曖昧な仕様を固める
    • リリースまで持っていった
  • 振り返り
    • 学生エンジニアから事業プロダクトを作るプロのエンジニアに成長できた
    • どうUXに影響するか、どうKPIに影響するか考えられるようになった

2年目に向けて

  • 技術から事業に貢献できるエンジニア

Webフロントエンド&デザインで学んだ2年間を総括

  • 内藤 秀彦さん / ヤフー株式会社 ショピング統括本部
  • 2017入社 デザイナー入社からフロントエンド

入社から本配属

  • デザイナー研修
  • OJT
  • デザインによるサービス改善
    • サービスの課題を探して解決する
    • 商品数が多いので抽象的なワードで探しにくい
    • 絞り込みのUIを改善
    • ABテスト
    • 何が利いて効果があったか分かるようにするとよい
  • UIパーツのコーディングお作法
    • モジュール単位でパーツを実装
    • SCSS
      • カラーなどは共通化
      • よく使うスタイル軍はmixin

本配属から2年目の終わりまで

CVRを伸ばす改善サイクル

  • CVR: コンバージョン率
  • 課題に対して再現性のある勝ち筋を見つけサイクルを回す

UIパーツの整理

  • 一つのサービスなのに似たような部品がたくさん出来てしまう
    • UIライブラリを作った
    • コードと使い方をまとめたドキュメント

レガシーからモダンな開発環境へ

  • Before
    • PHPではきだしたHTMLにjQueryでDOM操作
  • After(移行中)
    • React/Redux/Next.js

今後

こえのブログでのPWA 〜開発現場編〜

PWAの高速化

  • PRPLパターン
    • Push,Render,Pre-cache,LazyLoad
  • CDNの活用
    • できるだけCDNにキャッシュする
    • originサーバまでアクセスしないから高速

コンポーネント指向

  • WebComponents
    • LitElements
  • 影響範囲を狭めることで捨てやすくなる
  • スタイルのCascadeとShadowDOOMによるスコープをそれぞれ活用する

WebでAudioRecording

  • ブラウザからマイクを利用できる
  • WAVはファイルサイズ大きいのでmp3に変換して使ってる
    • vmsg

開発フロー

  • 餅つき開発
    • 細かい粒度でプルリク
    • 捨てやすいように細かく
  • 最速でプロトタイプ
    • 無駄になることを恐れない
    • リリース前に出戻りになるよりいい
    • Firebase便利