Skip to content

Instantly share code, notes, and snippets.

@matsumana07384

matsumana07384/2019-04-15_Frontrend×BonfireFrontend.md

Created April 15, 2019 12:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matsumana07384/65a1ce2f651b9366f3b0aaf8f9312ffa to your computer and use it in GitHub Desktop.
Save matsumana07384/65a1ce2f651b9366f3b0aaf8f9312ffa to your computer and use it in GitHub Desktop.
Download ZIP
2019-04-15_Mon_Frontrend × Bonfire Frontend
Raw
2019-04-15_Frontrend×BonfireFrontend.md

2019/04/15（月）19:30-22:30

Frontrend × Bonfire Frontend

  • この春、新しい「何か」に挑戦する皆さんを応援したい！

開会

  • ヤフーさん側、若手たちの初の登壇
  • サイバーさん側、つよめの2年めの方と新プロダクトの紹介してくださる方が登壇
  • 特別な会
  • #frontrend_bonfire

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

濱田 唯氏 / ヤフー株式会社 メディアカンパニー マーケティングソリューションズ統括本部

ざっくり内容

  • 未経験でフロントエンドの業務をしていて学んだこと

ながれ

  • OJT
  • フロントエンドチーム配属〜今

実際にやったこと

  • 基礎技術研修
    • エンジニアとしての基礎知識をつけた
    • チーム開発
  • OJT
    • 技術や担当サービスに関係なくローテーションで確認
  • 本配属
    • 知見共有会とか
    • インプット＆アウトプットの習慣づけ
  • 関わったプロダクト
    • 広告入稿管理画面のフロントエンド
    • BtoB
    • 既存、改善、新規などをやってきたよ

ポイント

  • チーム開発の心構え
    • コードレビューは大事
    • 感想や質問をがんがんする
  • 設計・構成への意識
    • 土台大切
    • ルールが言語化されていること
    • メンバーが合意していること
      • ルールがあるとレビューしやすい
  • 新しい技術に対する意欲
    • 自分からも取り入れることも大切
    • 知らないと議論に入れない！

まとめ

  • 考え方や概念を知ることで強くなれる
  • 大規模なプロダクトに関われてよかった
  • フレキシブルに技術選定できる環境よき
  • 日々成長していきたい

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

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

1年目の実録

  • PRの数
    • 560PR
      • 1日2PR?
  • 行数
    • 10万行
      • 1日400行くらい？
  • PRについて詳細
    • 内定者アルバイト

    • 研修

    • 配属
      • 小さな機能の実装
        • 2週間1スプリントで自立！
      • リコメンデーション機能
        • abema-wayにflux
        • 他の箇所へ反映できるように
      • Amebaビデオのモバイルブラウザからの視聴対応
        • ブラウザから観られるように
          • どこが大変？
            • タスク分解
            • スケジュール通りに進行する力
            • モバイルブラウザへの知見が深まった
      • 見逃し視聴のモバイル対応
        • 見逃し視聴対応
          • どこが問題点？
            • プロダクトとしてどうしたいか、ディレクターとデザイナーと一緒に考えて言った
      • とある大型案件
        • 困った
          • 仕様が曖昧
        • やったこと
          • 固めていない仕様を固める
          • 怪しげな仕様をサーバーサイドを確認
          • 疑問点をディレクター＆デザイナーさんと相談してきめていきたい

2年目に向けて

  • テックリードになっていきたい
  • 技術から事業に貢献できるエンジニア！
    • 私もこうなりたいなぁ

その他登壇資料

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

内藤 秀彦 / ヤフー株式会社 ショピング統括本部

（今日は5つく日なのでお得です）

入社から本配属まで

  • デザイナー側で入社
  • デザイナーの研修
OJT
  • デザインによるサービス改善
    • 改善したい課題を増やす
      • 検索する商品が抽象的だとほしい商品が見つからない
    • 改善案
      • 文言を変える
      • 絞り込み方を詳細に
  • テストのUI
  • 絞り込みを動線を追従させる
  • 学び
  • 改善のノウハウ
  • データを活用して裏付け
  • テストでは検証したい内容を1つずつやっていくべき
UIパーツのコーディング
  • 学び
    • モジュール単位でコーディングするとよい
    • Gulpなどのタスクランナーの知識大切

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

  • CVRを伸ばす改善のサイクル
  • リッチ検索
    • オートページャー
      • 行き止まりをなくす
    • サンドイッチ
      • 検索結果に選択肢を広げる
  • UIパーツの整理
    • UIパーツの派生
      • UIパーツライブラリの派生
  • レガシーからモダンな環境へ
    • 取組中

ビジュアライゼーション

課題

  • 部分最適化されたUIの全体最適
  • モダンフロントエンドの技術のキャッチアップ

まとめ

  • やってみたいことは積極的につたえよう
    • 実際に伝えてできたことって何かありますか？

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

原 一成 @herablog / 株式会社サイバーエージェント メディア統括本部

新卒12年目

内容

Webアプリ化

  • 録音機能が必要
    • ネイティブアプリのように動く必要がある
    • JSで動作するアプリが必要
  • PWAでしたいこと
    • ネットワークから返されるget

PRPLパターン

  • PRPLパターン
    • F1のレースの一番はやい車が紫色で表示される…からかもしれない（仮設）

CDN活用

  • CDN前提の設計
  • OriginServers-DB間が必要
  • できるだけ長く
    • デプロイ時に行う
  • コンポーネントWeb標準
    • コンポーネント化
      • スコープを限る
      • 外に公開したい内容は親から指定

対応しているブラウザ

  • グリーンブラウザ
  • 166KB
    • かるそう
  • LightHouseが高得点！

WebでAudioRecodrdingってできるの？

  • 近年のブラウザの進化により可能
    • ブラウザのマイクを利用
    • マイクパーミッションを取得
    • Webアセンブリで音声を圧縮
    • 詳細

おまけ

  • もちつき開発
    • コミット対応を小さく！
  • 最速でプロトタイプを作成
    • Firebaseをフル活用！
  • アクセシビリティも標準対応
    • 例外がでてきたら
  • デプロイ心理的安全性
  • performance budget

感想

  • なんとなく皆行き着く先は一緒なんだな、という印象
  • こえのブログの人が技術的に新しい学びが多くてとてもよかった
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment