デブサミ2019のメモです

-　https://event.shoeisha.jp/devsumi/20190214/session/1941/
- Togetter
- 資料

向井さん＠メディアカンパニー

• 広告入稿画面　スポンサー向け（BtoB）
• React + TypeScript + Reduc + node.js
• 大規模開発、刷新＋ビジネス要件の機能開発３〜４個
• コードの足並みがそろわない、刷新３〜１０人、機能開発３〜４人

フロントエンドの課題を解決するために

• レビュー時間が膨大→Lint,Prettier導入、GitBook利用。規約追加時にプルリクレビュー
• Danger、プルリクを出すときにやることを自動化してくれる（メンバーのアサイン、タグをつける等）
• TypeScriptの導入
• Atmic Designの導入、コンポーネント流動を揃える
• Atoms, Molecules, Organismsという共通言語を作った。レビューのときに粒度の指摘・相談をやりやすいように。
• コンポーネントガイドの導入、新規メンバーの再開発を防ぐ。storybook,docz
• Redux層の分割　Reduxのデータ層にDomain層、UI層を設ける

平山さん＠コマースカンパニー

• ABテストをめちゃくちゃ回している

ABテストの途中段階

• 企画（１週間）・制作（１週間）・開発（２週間）が重ねてる
• パーツを抜き出して共通化
• Atmic Designを利用
• React TypeScript Sass Storybook GithubPagesにアップ
• 社内限定で、npm配信　部品の再開発をしない

完成したら？

• エンジニアも気軽にABテストをできる
• 簡単なデザインならモックもいらない
• UXを考えるとき、結構たくさん時間がかかる（調査したりユーザインタビューしたり）のでこの時間に充てられる
• ４システムで１つの機能、というような画面を統一できる
• 運用できるようになったら発表したい

森本＠Webフロント技術室

課題

• モダン化できていないサービスあり。個別最適化されている。
• リソースがないところはモダン化されない、人材流動ができなくなってしまう
• エースが退職・転職するとナレッジが残らない
• 横断的な組織が必要

yahoo全体のフロントエンドの課題を解決する室が設立

• CTO室と距離が近い
• ライブラリ（React, vue）の効率化、パフォーマンスの計測方法、健康状態の把握（どういう人数がいてどんなライブラリを利用）、技術選定

健康状態→適切な技術選定

• 環境を手入力してもらって現状使ってる技術の一覧を把握
• 全社基準での技術選定

統一？

• フレームワーク：React+ReduxではDeveloperはかけるけどDesignerがかけない
• CSS：流動的なので選ぶのやめた
• 影響を抑えられ、全社にメリットのある技術→TypeScript

TypeScript

• MS製、はやってる言語
• 静的な片付け→大きなミスが防げる・リアルタイムでの型チェック、JS互換性→部分的な導入が可能

課題（＝布教）

• スキルの差、始める苦しみ、ドキュメント、サポート体制

感想

• 各カンパニーの技術→全体をみる組織、の流れがわかりやすかった
• エースが若い
• 粒度を定義できる用語便利そう。Atoms, Molecules, Organisms。