Developers Summit 2019 参加録
目次
- 目次
- 雰囲気
- Session
雰囲気
Session
日経電子版のマイクロフロントエンドとPWAによる改善事例
宮本 将 [日本経済新聞社]
日経電子版の技術スタック
日経電子版のフロントエンド
— ozaki25 (@ozaki25rn) 2019年2月14日
JSのフレームワークは使ってない#devsumi #devsumib
マイクロフロントエンドとは、フロントエンド on マイクロサービス
マイクロフロントエンドとは
— しょう34 (@sho_M34) 2019年2月14日
一つの画面に複数のサービス #devsumiB
日経はページごとにマイクロサービスに分割
— iotas𓆡創作支援アプリ運営中𓅬 (@tRiaeZ1) 2019年2月14日
(大変そう)
#devsumiB
日経電子版のマイクロ設計
— nori (@nori0__) 2019年2月14日
ページごとにマイクロサービスを分割。#devsumiB pic.twitter.com/3Aw90y7Ijo
Flow vs TypeScript
— kozzy (@kozzy0919) 2019年2月14日
* Flow は型推論強い
* Flow はロジェクトの設定が柔軟ではない
日経電子版では TypeScript on Babel での実装 #devsumiB #devsumi
最初からNoImplictAnyはつけない
— Shagamii (@RyuichiSakagami) 2019年2月14日
障壁が大きくて断念した経験
#devsumi #devsumiB
templateエンジンとしてのjsxの導入 #devsumi #devsumiB
— Shagamii (@RyuichiSakagami) 2019年2月14日
●恩恵
— 諏訪真一 (@suwa_sh) 2019年2月14日
・TypeScript導入
JSつらい
ミドルウェアやルートごとの処理、引き回すデータの型
コンポーネントのインターフェース
-> 静的型検査がほしい#DevSumi#DevSumiB
テンプレートエンジンとしての JSX
— kozzy (@kozzy0919) 2019年2月14日
*補完、フォーマットが効く
* 状態の受け渡しが明確
* 型でしばれる #devsumi #devsumiB
PWA
PWAは
— Yusuke (@elsa_twt) 2019年2月14日
信頼性、速さ、アプリとしての魅力
の3つがポイント #DevsumiB
AppShell
- firstPaint が高速
- オフライン時でも最低のアプリ感
- MPA でも SPA のような UX
- 日経電子版では実験中
Quicklink
- IntersectionObserer で viewport に入った a タグを監視
- 優先度別の戦略
]quicklink
— ozaki25 (@ozaki25rn) 2019年2月14日
- 画面内のaタグのリンク先を自動でプリキャッシュhttps://t.co/WUiqDx1hpf#devsumib
・quicklink
— 諏訪真一 (@suwa_sh) 2019年2月14日
画面内に入ったaタグ要素を自動でプリキャッシュ
縦にコンテンツを並べるのに向いてそう
viewportに入ったaタグを監視
優先度で分けられる
クリティカルレンダリングを邪魔しない#DevSumi#DevSumiB
quicklinkはメモリキャッシュだが、swで一元に扱いたかったのでpostMessageで渡してプリキャッシュ
— Shagamii (@RyuichiSakagami) 2019年2月14日
#devsumi #devsumiB
・TreeShaking と CodeSplitting
— 諏訪真一 (@suwa_sh) 2019年2月14日
webpack4
package.json `sideEffects: false`
ESModules の Named Exports
webpackでデバッグできる#DevSumi#DevSumiB
Critical CSS
First View に必要な CSS wのみを inline で組み込む
ファーストビューに必要なCSSをinlineに埋め込むって凄いサラッと言ってるけど、かなりめんどくさい #DevsumiB
— Yusuke (@elsa_twt) 2019年2月14日
Critical CSS
— kozzy (@kozzy0919) 2019年2月14日
* First View に必要な CSS wのみを inline で組み込む #devsumi #devsumiB
・日経電子版のCCSS事情
— 諏訪真一 (@suwa_sh) 2019年2月14日
・コンテンツや会員属性によってCSSのばらつきが大きい
・動的に出し分けられない
-> CCSSが思い
HTMLの50%前後がCCSS#DevSumi#DevSumiB
Dynamic Critical CSS Optimization
・Dynamic Critical CSS Optimization
— 諏訪真一 (@suwa_sh) 2019年2月14日
各ページごとにCCSSをビルド
fastly で Edge-side Includes CCSS#DevSumi#DevSumiB
Edge side Includes critical CSS #devsumi #DevsumiB pic.twitter.com/wwVuACwFF8
— kozzy (@kozzy0919) 2019年2月14日
今後は Lambda に全て載せてサーバレスにしていきたい
最終的にサーバレスにしたいけど、今まではLambdaにchromiumが乗せられずデバッグが厳しくて断念。でも最近はheadlessなのがあるからLambdaで動かせそう! #DevsumiB
— Yusuke (@elsa_twt) 2019年2月14日
モノリス化する Service Worker
Service Worker はモノリスになりがち
- マイクロフロントエンドな環境なら SW もマイクロサービス単位であって欲しい
- 基本的には変更が全体に波及してしまうので、予期せぬ不具合が出る可能性
ServiceWorkerがモノリス化する
— ozaki25 (@ozaki25rn) 2019年2月14日
- 修正時の影響が広くて怖い
- ServiceWorkerもマイクロサービス化した#devsumib
・ServiceWorkerはモノリスになりがち
— 諏訪真一 (@suwa_sh) 2019年2月14日
マイクロフロントエンドなら、SWもマイクロサービス単位
変更が全体に波及してしまうので、よくせぬ不具合
スコープで影響範囲を設定
-> マイクロサービスワーカー
res header の Service-Worker-Allowed#DevSumi#DevSumiB
マイクロなキャッシュ戦略
- 各ワーカーが勝手に他のキャッシュを消してしまうというケースがある
- 読み出し時に他のワーカーのキャッシュがあるならそれを使いたい
方法は2つ
- それぞれのキャッシュアイテムの所有者が誰かを管理する
- キャッシュストレージをサービスごとに切り分ける
各ワーカーが勝手に他のワーカーのキャッシュを削除
— Shagamii (@RyuichiSakagami) 2019年2月14日
- キャッシュアイテムの所有者で(res headerに)
- キャッシュストレージをサービスごとに切り分ける
workboxのライフサイクルにのせたくて後者#devsumi #devsumiB
Feature Flag
FeatureFlags for Service Worker
- ServiceWorker の RegisterPath にフラグ情報を載せる
- フラグが変われば SW が更新される
まとめ(をさらに抜粋)
- TypeScript は肩の力を抜いて取り組む
- JSXはテンプレートエンジンとしても最高
- AppShell & Quicklink おすすめ
- Edge-side optimization には夢がある
kozzyの所感
- 日経でのフロントエンドの取り組みを内製でやっているイメージはなかったが、フロントエンドの事例としても先進的で少し驚いた
- せっかく良い内容なのに、自分で自分の成果を大したことないと仰っていたのが勿体無かった(気持ち分かりみ)
- AppShell, Quicklink は触ってみようと思う
ビズリーチは新規事業でなぜKotlinを選んだのか〜企業をアップデートする「Human OS」の技術選定について〜
大谷 弘喜[ビズリーチ]
選択肢とその選定根拠って構成のセッション、なんか久々に聞いたけどスゲー為になる。 #devsumia
— ゆぅりる♪ (@yourilyouril) 2019年2月14日
ひたすら技術選定の話が続いていて非常に参考になる #devsumiA
— Yusuke (@elsa_twt) 2019年2月14日
ビズリーチの組織について
ビズリーチの新規事業は既存の組織とは別の事業体として成立させている
HRMOS
- リクルーティング
- パフォーマンスマネジメント
- エンゲージメント
クラウド型人材マネジメントツール
ビズリーチにおける人事業務フローでは、データバリデーションとデータ変換が大半。 なのでこれを RPA (Robotic Process Automation) で自動化していっている。
「マスタデータが複数あってどれが本当のマスタか分からない」
— Yusuke (@elsa_twt) 2019年2月14日
これは辛い #DevsumiA
結局大抵の業務って扱うべきデータが綺麗じゃない(=人間による解釈が必要)になっているせいで、自動化だったりの障壁になってるのよねー #devsumiA
— Yusuke (@elsa_twt) 2019年2月14日
基本方針
プロセス改善後のビズリーチの業務フロー pic.twitter.com/1JT3pvtcnq
— kozzy (@kozzy0919) 2019年2月14日
最終的にはこうしていきたい #devsumiA pic.twitter.com/oS3GDK4bYU
— kozzy (@kozzy0919) 2019年2月14日
抱えているエンジニアの属性を考えて技術を選定する #devsumiA
— しょう34 (@sho_M34) 2019年2月14日
10年メンテナンスするためにトレンドに左右されないこと
— しょう34 (@sho_M34) 2019年2月14日
ただし、変化の早いフロントエンドは除く #devsumiA
基本的には「技術トレンドに左右されない」ようにしたいが、「フロントエンドだけは例外で、世の中の変化が激し過ぎるからある程度追従しなければ」
— Yusuke (@elsa_twt) 2019年2月14日
これ皆が苦しんでる課題だよなぁ・・・ #devsumiA
「人事データは量は多くないけどバリエーションが多い」
— Yusuke (@elsa_twt) 2019年2月14日
一人の人間を構成する属性って一杯あるからね、仕方ないね #devsumiA
KVS vs RDB
KVS vs RDB #devsumiA pic.twitter.com/kSvYDZ9DiM
— kozzy (@kozzy0919) 2019年2月14日
KVS:RDBのスケーラビリティについて、Auroraとか出てきたから必ずしもKVSに軍牌が上がるかは疑問(RDBでも良さそう) #devsumiA
— Yusuke (@elsa_twt) 2019年2月14日
結局 RDB を使っている。
Aurora PstgreSQL を採用
- Scalable
App サーバ vs マイクロサービス
App サーバー vs マイクロサービス #devsumiA pic.twitter.com/Gthf46mNXC
— kozzy (@kozzy0919) 2019年2月14日
ユーザ認証:Cognito ユーザプールを選定
理由
- 自前でパスワードを管理したくない
- リスクベース認証などをマネージドサービスとして管理したい
- できれば簡単に作りたい
- GCPのプロトタイプでは Firebase
Cognito の現実
- 管理
- メール文面のカスタマイズ
- 認証の状態管理
- 認証のブラックボックス化
- アドバンスドセキュリティ
- アプリケーション開発者がやるよりは今日こ
- セキュリティの説明を求められると答えられない
Cognitで認証部分がブラックボックス化されることで便利なことがある反面、顧客からセキュリティの説明を求められた時に答えられない辛み #devsumiA
— Yusuke (@elsa_twt) 2019年2月14日
ビズリーチさん構成の最終型 #devsumiA pic.twitter.com/eBjJt811hu
— kozzy (@kozzy0919) 2019年2月14日
Kotlin の採用
Kotlin の採用 pic.twitter.com/ppCE2CRiRg
— kozzy (@kozzy0919) February 14, 2019
Javaには色々不満があるけどScalaまでいくと難しい。Kotlinはその二つの中間ぽい感じなので採用 #devsumiA
— Yusuke (@elsa_twt) 2019年2月14日
Javaからkotlinは学習コストが低い
— しょう34 (@sho_M34) 2019年2月14日
Google が androidの開発をしている事から言語の安定性も問題なし #devsumiA
kozzyの所感
- 技術採用の際の Pros, Cons が丁寧に述べられていて、今後自分が選定する場になったときのための参考になりそう
開発者の第三のキャリアパス~エバンジェリスト/アドボケイトとは何者か?~
中津川 篤司[MOONGIFT]
これまでのキャリア
- スペシャリスト:高い技術力と専門性(日本では少数派): 30代前半までは転職は問題なし
- ジェネラリスト:中間管理職的、社内調整力:幹部候補としての教育や、業界のコネ、著作があれば転職は問題なし
これまでのエンジニアのキャリアパスはスペシャリストかゼネラリストかの2択。ただスペシャリストは日本ではあまり求められない傾向があり、ゼネラリストは技術から離れてしまいがち #devsumiE
— ひらりん (@himarin269) 2019年2月14日
ピーターの法則とは、ローレンス・J・ピーターの著書「The Peter Principle」で提唱されたもので、企業などの組織に属する構成員は、その全員が自己の能力を進展させ続けなければ組織がいずれ無能化し、機能しなくなるという階層社会学の法則です。
お、最近よく見るピーターさん#devsumiE pic.twitter.com/22iokYVoQl
— 金谷拓哉/Takuya Kanatani (@torisankanasan) 2019年2月14日
— ひらりん (@himarin269) 2019年2月14日
死なないための第三の道 #devsumiE pic.twitter.com/ldH68D8ovR
— Masato Nabeshima (@nabemasat) 2019年2月14日
【エバンジェリスト/アドボケイトとは】
— 豆乳ばなな (@smb0214) 2019年2月14日
自社製品やサービスを外部の人に啓蒙する人のこと #devsumiE
製品を啓蒙するとはマーケティングである #devsumiE pic.twitter.com/7muAiLBseM
— Masato Nabeshima (@nabemasat) 2019年2月14日
エバンジェリストとアドポケイトの違い #devsumiE pic.twitter.com/AjzwAH3F9W
— kozzy (@kozzy0919) 2019年2月14日
エバンジェリストを必要とする企業 #devsumiE pic.twitter.com/fjEm4WBzNt
— Masato Nabeshima (@nabemasat) 2019年2月14日
どんな会社が必要としているのか?→プラットフォーマー、開発者向けの製品提供企業、API提供企業、開発者を雇用したい企業 #devsumiE
— Ikou Sanuki (@i_sanuki) 2019年2月14日
アドポケイト || エヴァンジェリスト
- イベントでのパネルディスカッション 6人中4人がエンジニア、2人がマーケッター出身
- きっかけは転職、社内公募、勝手に名乗ってた、ユーザ会で誘われた・・・など
アドポケイト || エヴァンジェリストの素養
- 製品に対する 愛 (これが全て)
- 開発者とのコミュニケーション能力
- 技術に対する 愛
- 技術力
細かいところ
- 健康な人
- 表裏のない人
- コミュニティ好きな人
- 人の話を聞けるタイプの人
エバの素養に加えて実際業務で必要になるスキル #devsumiE pic.twitter.com/zMVFM0ebdE
— Masato Nabeshima (@nabemasat) 2019年2月14日
マーケティングチームに所属したほうが、開発に巻き込まれて登壇できなくなったりすることがなくなる。が、技術の新しい知見が得にくくなる #devsumiE
— ひらりん (@himarin269) 2019年2月14日
登壇するのは恥ずかしい
— 豆乳ばなな (@smb0214) 2019年2月14日
・私もです!(キリッ
・聴衆はあなたのミスを期待していません。味方です。
・ミスらないよう事前練習をしっかりやりましょう!
・あなたの常識、みんなの非常識
・知識の再構築に最適です #devsumiE
「マーケティングとは自社の製品をみんなに知ってもらうこと」
マーケティングはもう広告の世界のみではない。今はエンジニアリングとの親和性が高くなってきている #devsumiE pic.twitter.com/G6vvi9dzfZ
— Masato Nabeshima (@nabemasat) 2019年2月14日
エバやアドのお仕事 #devsumiE pic.twitter.com/2CZzfOvLaC
— Masato Nabeshima (@nabemasat) 2019年2月14日
エバアドのタスク
- 認知度向上
- ユーザ登録数を増やす
- アクティブ率を増やす
- 開発者をサポートする
- 大会を減らす
- 生み出されるプロダクトを増やす
いろいろなところに出張できたり、いろいろな開発者と知り合えたり。いろんな技術と自社製品を組み合わせたり製品レベルではない開発に取り組める。楽しそうだー。 #devsumiE
— ひらりん (@himarin269) 2019年2月14日
コミュニティを探そう、参加しよう、アウトプットしよう――DevRel流、開発者コミュニティの歩き方 (1/3):CodeZine(コードジン) https://t.co/proXTg2OHv @codezineさんから #devsumiE
— 豆乳ばなな (@smb0214) 2019年2月14日
kozzyの所感
- 教える経験がこれまで多かったり、イベントでの運営が好きだったりそのような活動が自分に合っていると思っているので聞けてとても良かったセッション
- 5〜10年後のキャリアとしての アドポケイト を見据えた仕事と勉強をしていきたいと感じた
ZOZOTOWNのDWHをRedshiftからBigQueryにお引越しした話
Redshift 時代
zozoテクノロジーズさんの旧データフロー構成 #devsumiA pic.twitter.com/7oldzG15rn
— kozzy (@kozzy0919) 2019年2月14日
S3 に入れていたデータ
Data PipelineでRedshiftへのCopyと、集計クエリの実行
— たきぐち in the Cloud (@atakig) 2019年2月14日
ちょっとレガシーな感じ#devsumiA
Redshiftはノードが増えたり、データ規模が大きくなると中を分かっていないと辛いのがあるなぁ#devsumiA
— たきぐち in the Cloud (@atakig) 2019年2月14日
S3 -> Redshift への天雄には Data Pipline をしよう
BigQuery 移行の動機
ノウハウ、マネージドの観点で、移行
BigQuery移行への動機 #devsumiA pic.twitter.com/sB1L1eXywP
— kozzy (@kozzy0919) 2019年2月14日
kozzyの所感
- 普段、データ基盤に関わっていない人なので、ざっくりとしか理解できなかった
- データ基盤管理 と データ分析をコラボさせつつも分けて考えないといけないボリュームで考える事はあるよなあと再認識した