2019-02-14 Developers Summit 2019 Day1
2019/02/14 に開催された Developers Summit 2019 Day1 のイベントレポートです。
●イベントのテーマ
SHARE YOUR FUN!
●イベント概要
みなさん、技術を愛していますか？ さまざまなテクノロジーが登場し変化が激しくなる世の中。エンジニアとしての生涯をどうデザインしていくか、楽しみでもあり不安でもある方が多いのではないでしょうか。
変化に適応し、学びつづけるのは辛い？ いいえ、テクノロジーは楽しいもの。楽しいから没頭し、没頭するから学びつづけることができる。「楽しい」はエンジニアの成長をブーストしてくれる最強のモチベーションです。
新しいテクノロジーと出会う楽しみ、現場で起こる課題を解決していく楽しみ、エンジニアとしての成長を日々実感することの楽しみ、まわりの人やコミュニティに貢献することの楽しみ……デブサミ2019では、さまざまなエンジニアの楽しみを持ち寄って、これからのエンジニアの生き様を考えます。
■❤一生エンジニアを楽しもう❤夢中が最高！！
漆原 茂さん [ウルシステムズ]
●自己紹介
・外部仕様は辞められる
・内部仕様はやめられない
もちろんjsonで書きますw
●35歳定年説なんて時代じゃない
・こんなキャリアパスの話？
エンジニア
-> 上流コンサル
-> マネージャー
●何の動機で働いていますか？
・外発的動機
役に立ちたい
偉くなりたい
家族を守りたい
お金がほしい
・内発的動機
楽しい
好きだから
・内発的動機 が強い人の方が長続きする
みんな両方もっている
楽しいから没頭する！没頭するから成長する！
最近ノイズが多い。
今日はデブサミなんで、お利口さんは辞めましょう
内に秘めたプラスエネルギーを開放せよ！
●内発的動機タイプの特徴：夢中が最高！
長期的に外発タイプを凌ぐ
心が健康、幸せ
圧倒的な没頭力で熟達
内発タイプ動詞は惹きつけ合う
-> こいつって作れるんじゃない？
●没頭できる楽しいテーマはどうやって見つけるの？
・漫画を読ませ面白さを測定
・ペンをストローのように食わせて漫画を読む
・ペンを手に持ったまま無表情で漫画を読む
◯ペンを横に歯でくわえて、読む
●体や無意識が先で、あとで意識がついてくる
・笑っているから楽しい
・親切にするから気分がいい
・良い仕事をするからモチベーション高い
●楽しいは最強 は作れる！
・面白そうと思うことを「すぐ行動」にうつしてみる！
・秘技：リアルタイムクリック
「面白そう」と直感したら、深く考えずに即座にクリック
スケジュールとか考えなくて良い！あとで考えれば良い。
行かなくいけなくなれば、どうやって行くかを考えはじめる
●そんな状態って一生続けられる？
・新しい技術を渡り歩く！
それぞれの技術にイノベーションカーブ
いろんなをイノベーション渡り歩く
積み上げよう！
・一流を産むのは「長年の鍛錬」
IQや天賦の才じゃない
10年以上の継続的な鍛錬の結果だった！
-> 一流を産むのは「どM」
と思われるほどの根気
●歳を重ねても 覚える能力は低下しない
エビングハウスの忘却曲線
記憶力は年齢によらない
年とともに衰えるのは根気
わからないことに取りくみ続ける気持ち
・記憶力低下は意欲低下・練習不足が原因
前頭葉の衰え（経年劣化）が深く影響
経年劣化以外にも劣化させる環境
ネガティブオーラ
ルーティンワーク
・前頭葉が衰えないような環境
毎日プラスのサプライズ
未来を楽しみにしている
良い仲間とつながっている
幸せオーラに溢れている
-> これって、楽しいは最強 と同じ！
・超シニアエンジニアで実験
・60歳で再雇用
・現役バリバリ
COBOL, ISAM
AWS, Spark, GEODE
・楽しい を優先すれば一生続けられる！
●好きなことだけして食べていけるの？
お金のためには我慢も必要なのでは？
・楽しいはずの仕事はどこで歪むのか？
自分, 営業, 上司, 経営, 顧客
・外的インセンティブで内発的な動機を消し去っている
短期的な利益なら行ける
「外的インセンティブ」の限界
興味ある作業に対して明確な報酬を与えると内発的動機が低下する
・「アメとムチ中心」のマネジメントは有害！
もう古い！
長期的に正解を探し続けるアプローチでは有害
・両立できるはず！
●没頭力を阻害する「外部環境」
顧客と自社都合の板挟み
理不尽な環境下でのプロジェクト遂行
価値がわからない仕事への従事
エゴと自己満足で他責な仕事
・「やらないこと」リストとをつくった
口だけコンサル
仕入れて売るだけ
自社受注目的の作為的コンサル
お客様ためにならないIT導入
:
売上目標を、全廃した！
・こうなった
もちろんはじめは売上下がる
エンジニアには細かい話はしなくて良い
・無意味な売上目標ばかり言う人へ
クソ野郎！w
●営業が要らなくなった
・面白い費ビジネスは個が回している
変態は変態を呼ぶ
・内発的動機のつながり（信頼関係）が会社よりも強くなる
・内発的動機で世の中とつながろう
変態同士 つながろう！
楽しさを分かち合おう！
・プラスエネルギーを発信しよう！
まず良質な情報を発信しよう！
あなたが何者か、世の中は知らない
ちなみに、転職だって可能！
●一生エンジニア宣言
プラスエネルギーを開放しよう！
行動しよう！夢中になろう！
未来の進化を楽しもう！
※もうひとつメモし逃しました。。。
■幸せなエンジニアのキャリアの組み立て方
泉 雄介さん [ラクスル]
●IBM "PC"
10歳で hello world.
「人が入力したもの」を「処理」して「何かを出力」する
-> 神になったw
●ザ・インターネット
インターネットを介して坂本龍一さんとメールでやり取りできた
実世界ではむり
想像したことが実現できる
世界に発信できる
でも、たまに忘れてしまう。
つくっておしまい
本当は、ユーザの世界を変えたいのに
どんな世界を創るかは、人任せにしてはいけない
1でつくったものが 1,000、10,000 に広がる
●REALITY: 現場やユーザを徹底的に理解する
ユーザを観察
現場を理解
課題に共感
●SYSTEM: 力技ではなく、仕組みで解決する
技術を使う
型化する
シンプルにする
●COOPERATION: 誰か一人ではなくチームで考える
一人で悩まない
多種多能を混ぜる
いろいろな視点を入れる
●未来を予測する最良の方法は、未来を創ることだ
by ピーター・ドラッカー
ワクワクしながら創る、共感できる人と広げる
■日経電子版のマイクロフロントエンドとPWAによる改善事例
宮本 将さん [日本経済新聞社]
●日経電子版
毎日900本の記事
月間3億アクセス
●技術スタック
・client
vanillaJS
SaSS
handlebars
・CDN
Fastly
・BFF
Node.js Express
●マイクロフロントエンドとは
・マイクロサービス on フロントエンド
・前提
モダンウェブアプリ
1画面を複数のサービスに分割
●電子版は（モダン）ウェブアプリ？
・Documents(content-centric)
・Applications(behavior-centric)
・この観点だとDocumentsより
ページによって違う
●日経電子版のマイクロ設計
・fastly
Path Based Routing
・ページ≒サービス
各サービス間は疎結合
・サービス
記事、検索、トップ
・他サービスで必要なものはCDN経由
●受けた恩恵
・TypeScript導入
JSつらい
ミドルウェアやルートごとの処理、引き回すデータの型
コンポーネントのインターフェース
-> 静的型検査がほしい
・with Babel
tscはあくまで型のチェックだけ
トランスパイルはbabel7
JavaScriptと共存もできる
・頑張りすぎない型付け
NoImplictAny は大変
最初の一歩が大きい壁になる
後から出OK
・JSXを導入
≠React導入
handlebarsが辛い
-> JSX with React
・Handlebars -> JSX
一度で全置き換えはむり
アダプターを挟んだ
テンプレートエンジンとしてもイケてるよ
●PWA
・PWAとは
信頼（確実）性
速さ
アプリとしての魅力：ネイティブっぽさ
-> Fast & Engaging
・AppShell
naviを出して、lagyでcontent
FirstPaintが早くなる
オフラインでも最低限のアプリ感が出る
日経電子版では実験中
MPAでもSPAのようなUX
・quicklink
画面内に入ったaタグ要素を自動でプリキャッシュ
縦にコンテンツを並べるのに向いてそう
viewportに入ったaタグを監視
優先度で分けられる
クリティカルレンダリングを邪魔しない
・TreeShaking と CodeSplitting
webpack4
package.json `sideEffects: false`
ESModules の Named Exports
webpackでデバッグできる
●CCSS
・ファーストビューに必要なCSSのみinlineで埋め込む
・日経電子版のCCSS事情
・コンテンツや会員属性によってCSSのばらつきが大きい
・動的に出し分けられない
-> CCSSが思い
HTMLの50%前後がCCSS
・Dynamic Critical CSS Optimization
各ページごとにCCSSをビルド
fastly で Edge-side Includes CSS
●Future Works
・現状はEBでいろいろやっている
制約がない & デブッグしやすい
ビルドが詰まってサーバが落ちる可能性がある
・サーバレスにしたい
edge-side compute
serverless/chrome
●ノウハウ
・ServiceWorkerはモノリスになりがち
マイクロフロントエンドなら、SWもマイクロサービス単位
変更が全体に波及してしまうので、よくせぬ不具合
スコープで影響範囲を設定
-> マイクロサービスワーカー
res header の Service-Worker-Allowed
・マイクロなキャッシュ戦略
各ワーカーが勝手に他のワーカーのキャッシュを消してしまう
読み出し時に他のワーカーのキャッシュがあるなら使いたい
方法
キャッシュアイテムの所有者を管理
読み出し早い
キャッシュ、パージが手間
キャッシュストレージをサービスごとに分ける
読み出し遅い
キャッシュ、パージが楽
・FeatureFlags
外部の設定を参照
値で機能を出し分ける
SaaSもある
featureflags.io
Firebase RemoteConfig: ネイティブアプリ向け
・FeatureFlags for SW
ServiceWorkerのregisterPathにフラグ情報を乗せる
フラグが変わればSWが更新される
Edge-side optimization には夢があるよ
■APIを活用したフォントの使い方 ～MR（Mixed Reality）の実例紹介～
相川 晴俊さん [モリサワ] / 堀尾 風仁さん [神戸デジタル・ラボ]
●フォントの制作
・書体は手書きからはじまる
・65.2mmの方眼紙で500文字
・一日20文字くらい
・新人はここから。これを3年
・「永」には、書に必要な要素が全て含まれている。
●UD書体
・文字の形が分かりやすい
・空間を広くとるとつぶれにくい
・濁点、半濁点を大きくして判別しやすく
●MORISAWA PASSPORT
・組み込みフォントライセンス
・スマホ、社債、医療現場のモニターなど
AQUOS zero: 新ゴ
shadowverse: 解ミン月
●TypeSquare
・サブセット配信
JavascriptとフォントをTypeSquareから配信
日本語だと23,000字くらい
全部だと多い
・Galaxy Mobile Japan公式サイト: UD新ゴ
・Base64エンコードしたフォントを、利用者側のweb serverでキャッシュもできる
これってWebサイト以外でも使えないの？
-> MR
Kobe Digital Labo
●なぜ今、Font x MRの取り組みを行っているのか？
・ポストスマホって考えたことありますか？
紙 -> PC -> Mobile
コンテンツのアウトプット先が多様化
-> ディスプレイから解き放たれるのでは！？
紙 -> PC -> Mobile -> Mixed Reality
・HoloLens
関西初、MS公式開発パートナー認定
・文字が圧倒的に見づらい
環境に応じて読みやすいフォントを選ぶ
視野角が狭い
・MRの共同研究テーマ
フォントの視認性とデザイン性
フォントの変化によって生じるUXの違い
●具体的にどんなことをやっているの？
・営業シーンに活用できないか？
自転車を買いに行った
説明されても、説明と実物のつながりが見えない
パンフレットを渡しても、読んでもらえない
空間のトラッキングもできる
どの商品に、どれだけ時間をかけてくれたかとか
・Creative Design
看板や広告など物理的なプロダクトだと、貼ってみないとわからない
-> MRで
イメージが合わない場合、印刷会社側が担保
これを解消
デザイナーとクライアントが同じ映像を見れる
●モリサワフォントを使ってみてどう？
・メイリオ、UD新ゴ、黎ミンで比較
・黎ミン
横線は縦線の太さが変わらない
文字数でギネス世界記録
・アンケート: どのフォントが見やすい？
UD新ゴ 60% > 黎ミン 25% > メイリオ > 15%
・アンケート: どのフォントが好き？
UD新ゴ 50% > 黎ミン 30% > メイリオ > 20%
-> ブランディングはフォントで決まる
・開発はしづらい
イラレ、フォトショ: デザイン
unity: 画面開発
Visual Studio: ビルド
HoloLens: 実機確認
-> フォントでフォトショに戻る。辛い
-> TypeSquare API
・TypeSquare APIのメリット
書体データの画像化が不要
開発中にローカルにない書体が試用できる
必要な書体データだけダウンロードできる
Base64 -> Binary変換が必要
・開発してみて感じたこと
フォントを活用することで、利用者の感動が起きる
デジタル変革木で、PoCが急増している今こそ
エンジニアこそ、フォントにこだわれ。
・多言語化されたデジタルサイネージでもTypeSquare活用できます。
■ヤフー株式会社におけるフロントエンドの取り組み
向井 咲人さん[ヤフー] / 森本 恭平さん [ヤフー] / 平山 涼也さん [ヤフー]
●ヤフー株式会社
・カンパニー制度
カンパニー単位で数千人
大きく分けて3つ
メディアカンパニー
コマースカンパニー
CTO
・人数
エンジニア: 2600
デザイナー: 400
・サービス数
100異常
●メディアカンパニー/プラットフォーム統括本部
・広告入稿管理画面のフロントエンド
12人
10年以上
2年前 jQuery + PHP
-> React + TypeScript + Redux + node.js
Redux-Form, Sass, webpackなど
・大規模な開発との戦い
刷新しながらビジネス要件の機能開発
並行して3〜4木の機能開発
コードレビューの時間が爆増
メンバーも増える
・コードの足並みが揃わない
人も入れ替わるし
協力会社、オフショアも
●規約の導入
・自動で弾きたい
Lint, Prettier
・GitBook
規約追加時にPR
・Dangerの導入
danger.systems/js/
PR時にやることを自動化
・TypeScriptの導入
静的型付けでローカルでバグに気づけるのは便利
●Atomic Designの導入
・コンポーネントの粒度を揃える
・Atoms, Molecules, Organisms という共通言語
-> チームでの合意が取りやすい
●コンポーネントガイドの導入
・コンポーネントの見える化
・新規メンバーの再開発を防ぐ
-> 試験環境で探すのは、大きいと大変
●Redux層の分割
・ファイル構成: re-ducks
・データ層に Domain層/UI層/App層も設ける
●日々素振りを続けて課題に挑む
まだまだ出会っていない課題はたくさん
チーム勉強会でコツコツ倒す！
●コマースカンパニー/Eコマース
Atomic Designってデザイナーには難しくない？
●Yahoo!ショッピングのABテスト
・案件
企画 1w
制作 1w
開発 2w
・8案件くらいを五月雨で
-> つかれちゃう
●UIパーツ集
・デザインパーツをAtomic Designで
・react, typescript, sass, bem
・storybook, github pages
●UIパッケージのnpm配信
トップ、検索、商品詳細、カート一覧が主動線
それぞれが別サービス
全ページで使えるように！
reactでimportしなければ、すぐに独自も作れる
良いUIは各自で再インストール
●どんな未来が来そう？
・デザイナーがパーツを使える
-> エンジニアも気軽にABテストのデザインが作れる
・簡単なデザインモックはいらない
-> デザイナーは「デザイン・リサーチ」に時間をつかえる
案の質を上げられる
・良い結果のデザインを再利用
-> 全体が良くなる！
まだ作り途中。
どこまで運用しやすいか、は乞うご期待！w
●縦割りだと個別最適化
・リソースがないところはモダン化されない
・人材流動できない
・ナレッジが会社に残らない
・ヤフーのwebフロントエンドが見えなくなる
-> 全社的な判断が必要。Webフロント技術室！
●チーム
・デザイナー、エンジニア、コマース、メディアのメンバーが揃った
・CTOと距離が近い
サービスの人が話そうとすると10stepとか。
直接話せる
●半年で何をしたか？
・react, vueなどの効率化
・パフォーマンスの計測方法を統一
・何を使って、何人いるのかなど健康状態の把握
・技術選定 & その浸透
●健康状態の把握
・全員に手入力してもらった
統一感がないw
●技術選定と浸透
・視点は全社
JSフレームワークは統一しなかった
エンジニア、デザイナー両方書く
リソースがないのに、リニューアルなんてむり
リリースとバッティングしたらビジネスを止める
バラバラ過ぎ
スタイルフレームワークは統一しなかった
CSS in JSはチームによっては効率が悪い
webpack周りはいじりたくなる
Gulp + Sassは悪ではない
まだまだ流動的なので時期的に
影響を抑えられ、効果があるものは？
TypeScript
・布教する課題
スキルの差
始める苦しみを取り除く
ドキュメントの整備
ハンズオンや遠隔地へのサポート体制
縦軸で事業を伸ばし
横軸で情報を取りまとめる
-> 全体を良くする
チャレンジすれば、モダンな開発もできます
■【祝】k8sデビュー！ エンタープライズ巨大アプリをマイクロサービス・コンテナ化。段階的移行(中)の全記録を追う。
石田 健亮さん [ドリーム・アーツ]
●本日のテーマ
既存アプリをマイクロサービスに分解
コンテナ化、k8sで運用する
※Javaですw
●Shopらん
・2008年〜 11年
・200万行
・23TB
・60万ユーザ
●アーキテクチャ
Angular
Velocity
Struts
OPA(俺PersistenceAPI)
CommonsJDBC - MySQL
-> 165MB
-> bootに30min(cacheを温めている)
・L7LB -> 複数tomcat
30min x 台数
chef -> Docker
・手に負えなくなっている
TheadLocalに独自で貯めるとか...
●k8sで行けるんじゃないか？
Kubernetes as a Service が揃ってきた
GKE, AKS, IKS, EKS
DataStoreがAzuleだったのでAKS
・マイクロサービス化でやっていること
インタフェースを抽出
インタフェースを抽象化
従来の実装も使えるようにしている
切り替えられたり
両方叩いて、比較したり
・SpringBoot + Swagger
標準構成を作成して、スキルのポータビリティ
swagger uiで画面から叩けちゃう
・コンテナ化
組み込みtomcatでjar
docker buildも簡単になる
・SpringBoot + docker
設定はyamlファイルで CMD指定
・CI/CD
GitHub -> maven -> docker -> ACR
TODO
jacocoのカバレッジレポート出せてない
並列テスト
サービスを組み合わせてE2Eテスト
・AKSの構成
大量にIP使うから maskは16で
memory foot printが大きくなるから、memory大きめ
MSなのにUbuntuで上がるよw
・サービスのデプロイ
yamlを書いてkubectl apply がたくさん
かなり面倒w
・SpringBootに設定ファイルを渡す仕組み
ConfigMapにファイルとして登録
spec.volumeMount.mountPathでパス指定
コンテナ起動時に読まれる
・kustomizeでYAML管理
共通する定義
-> 本番
-> 検証
kubectlに取り込まれるらしいよ
・Immutable ConfigMap
ConfigMapを変更しても自動更新してくれない
kustomizeでConfigMapにハッシュ値が入る
kustomize build PATH | kubectl apply -f -
・ログ収集
サイドカーでfluentdコンテナ
daemon set
read only volumeとしてmount
fluentd公式ですw
外側にEK stack
https://git.io/fhQNs に、ハマりどころをまとめました
TODO
logstashでSpringBootのログから構造を抽出
syslogもほしい
・パフォーマンス
Javaの中だからマイクロ秒レベル
マイクロサービスだと、RESTのミリ秒x2レイヤ間通信がある
-> 関数呼び出しのレベルで分割しちゃだめだね
・パフォーマンス改善の工夫
キャッシュ層を残す
非同期、並列プログラミング
面倒、、、CompletableFuture, Resilience4jあたりで。
・正しくは
フロントエンドからのAPI程度の粒度が目安
SOAで言ってたのも同じですね。
※jHipsterを参考にしてみた。
●TODO送り
マイクロサービス間の呼び出し
サービスメッシュ
Ingress
Horizontal Pod Autoscaler
分散トレーシング
AzureMonitor以上の監視
-> たまりまくってますw
●もっと勉強したかったら
CNCF
Netflix OSS
■楽しい場所でカンファレンスをする～スタジアムと岡山城
小西 宏樹さん [エムオーテックス] / uzullaさん
●知的に伝えるなら
早口で喋って、大切な所をゆっくり
今日は全部ゆっくり話します
全部大切なのでw
●JAWS Festa
・サッカースタジアムでやったよ
・売店スペースでセッションを並走
●なぜスタジアム？
・全国規模のお祭り
万博記念講演でやろうとしていた
・野外だけど雨だったらどうしよう
近くにスタジアムがあった
・スタジアム側から理解してもらえた
伝えたら、歩み寄ってもらえた
・決断
ガンバ大阪とコラボしようとしたが、かなわず。
次回以降で挑戦！
●passionate を生み出す工夫
・自ら燃える
自分から 好き を伝える！
好きなので
・退屈させない
セッションの合間でサポーター企業の紹介
体操したり、カップラーメンタワー
基調講演は下で->移動
・新たな芽を育てる
最初は一日緊張してしまうもの
-> AMに新しい人のセッション
・盛大なアピールをする
メディアにアピール
ブログ書く
-> デブサミへ
・形に残す
ブログに書くまでがfesta
●一流のエンジニアになるために考えたこと
・インプット最大
一流に聞きに行く
・アウトプット最大
ちょっと間違ってもOK
フィードバックをもらって
更にインプットのループ
・アピールを続け、認めてもらう
ブログ書いたり
知り合いを増やしたり
-> 上長にメリットが理解された
動きやすくなってつながりが広がっていった
・繋がりを大切にする
オフラインで会って話す
・夢を描く
数年先を描いて、そのために活動する
●まとめ
・インプット/アウトプットのサイクルを回す
・場を提供する
●岡山城でテックカンファレンス
・貸し切り
・20 min x 9枠
・参加者
ウェブ系エンジニア
個人で理解していただいている方
地元の方
・懇親会
独歩のビール樽
クラフトジン 岡山
天守閣まで酒を持っていけた
・スタッフ
8人くらい
●なぜ城？
城かりたくない？から始まった
キャパ小さいし余裕っしょ
-> 城を借りるのは楽しい！
旅行とセットでテックカンファレンス
●なぜイベントをやるの？
・趣味だから
・フリーランスだから時間=稼ぎがへる
・人のつながりが大切！
●リレーションによって生まれるもろもろ
・友達、知り合いができました
・その先でOSSができたり
・その先でなにかが起きる
●実例
・プルリク送るなら、事前に根回ししておくと動くやすくなるよね
・信用のリレーションがつながって、パワーが生まれる
●効果
・リアルで繋がっているひとは、打算なしで応援できる
・イベントはリレーションをぱっと作れる
・小さいイベントだとつながりやすいよ
●運営になると良いよ
・わかりやすく貢献できる
・役割があると話しやすくなる
●コアスタッフは事前に色々やる
・クリエイティブなタスク
・登壇者とコミュニケーション
：
●例
・トートバッグ、パーカー
・ティザーサイト
自分でググって、イケてるデザインに
・会場選定
・ごみ処理
軽トラ読んだり
・動画配信
・弁当や酒類
こだわった酒
インスタばえw
：
●参加するなら
まずは当日スタッフに
ここからコアスタッフにもつながったり
●既存のスタッフへ
人材流動化しよう！
景気の良い言語は景気が良いみたいですねw
楽しいよ！レッツトライ！！
■Day2の様子
■感想
さすがデブサミですね！すごい盛り上がりで、Funをたくさん共有していただきましたー
大きな会場だと、wifiにつながらないことがよくある感覚ですが、かなりスムーズで、ほぼストレスなくtweet、関連情報の検索ができました。
今回は DevLOVE、The Agile Guild の絡みで、エンジニア相談ブースのある3Fにはじめて行きました。電源とテーブル、飲み物も用意してくれている休憩スペースがあったんですね。とっても助かりました！
いつも応援していただいている皆さん支えられています。