2018-11-25

「HTML5 Conference 2018」に参加してきました

HTML5 Conference 2018に参加してきました。

events.html5j.org

全部で30セッション以上あるカンファレンスでしたが、ほとんどが興味のある内容でとても充実したイベントでした。
Webパフォーマンスや最新のWebAPIやHTTP/3等、最前線の情報をキャッチアップできました。
このカンファレンスは全て有志で成り立っているとのことで、機器トラブル等あっても丁寧に対応していただき問題なくセッションに参加することができました。スタッフの皆さんありがとうございました。

タイムテーブルと資料のリンク

10:00 - 10:50

タイトル	発表者
基調講演	吉川徹、えーじ、岩井将行

11:20 - 12:00

タイトル	発表者
ZOZOのグローバルECのフロントエンドアーキテクチャ設計	権守健嗣
光を超えるためのパフォーマンスチューニング/アーキテクチャ	mizchi
TypeScript Evolution	倉見洋輔
持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話	花谷拓磨（potato4d）
ブラウザでARとAIを動かした話	杉井庸一
デザインを共有するための言語化あれこれ	長谷川恭久

13:20 - 14:00

タイトル	発表者
「それ、AMPで作りませんか？」--- RichでResponsiveかつPWAなAMPの作り方	宇都宮佑亮
FIDO認証によるパスワードレスログイン実装入門	合路健人
2018年のHTMLやCSSやAPIとか	矢倉眞隆
組み込みブラウザとMediaの仕様あれこれ	梅田雅士
使い倒そうVisual Studio Code!	さっくる（本間咲来）
アクセシビリティ、はじめよう! 〜「できない」から脱出するための20（仮）のネタ🍣〜	山本和泉、太田良典

14:20 - 15:00

タイトル	発表者
Yahoo! JAPANアプリ上で動くWebVIewサービス開発〜Web技術で動くライブクイズ「ワイキュー」〜	石井直矢
PWAの導入で得られた成果と見えてきた課題	宍戸俊哉
Web Components のリアル	aggre
TechFeedのつくりかた 2018	白石俊平
VOXELCANVAS：WebGLでのボクセルモデリングツール開発 ~ 開発ノウハウとブラジルの小学校で使ってもらえた話	津田良太郎
「セマンティクスの作り方、これまで、今、そして未来」	伊藤由暁（越智）、桝田草一

15:20 - 16:00

タイトル	発表者
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践	Jun、kawasako
Node.js まとめ	古川陽介
Web プラットフォーム再考～PWA のもたらす未来の光と影～	ものえおさむ、eegozilla、chikoski
Angularを使用したWebアプリケーションの最新設計手法	松本洸
あんずフォト：PlayCanvasでリッチアドコンテンツを開発して発信してみた	宗形修司、津田良太郎
開発体制に合わせたCSS設計	吉川雅彦

16:20 - 17:00

タイトル	発表者
HTTP の今と未来ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで	浅井智也、永井泰裕
webpackのいままでとこれから	廣戸裕大
Angular 製高機能グリッドのパフォーマンス問題に立ち向かった（ている）話 - IE11、お前もか・・・ -	桐生逹嗣
Reactにおけるパフォーマンスチューニング	辻健人
WebXR: Beyond WebGL	小山田晃浩
さらに便利になった最新版SketchとMaterial Theme Editor	山本麻美

LT

タイトル	発表者
1000万以上のWebページを AMPにした話	Masashi Hirano
slamdata/purescript-halogen の紹介	@e_ntyo
CSS組版の救世主 Vivliostyle	@spring_raining
ビルドプロセスから考えるCSSアンチパターン	Kenji Imamula

基調講演

吉川徹さん(html5j)
えーじさん(Google)
岩井将行さん(東京電機大学)

テーマ

The Web is shifting to the next gear
Webの進化がはやい
- WebXR
- Web Authentication

仕組みを作る仕組みを、作る仕組みを作る

1ヶ月にWebにアクセスするデバイスの数 -> 50億
web is an infrastructure
- 蛇口をひねれば水が出るのと同じ
- ブラウザを開けばWebが見られる
最新の技術
- Video + Picture in Picture
- WebRTC
- WebXR
- WebAuthentication
- Web Asesmbly + Web Audio
仕様の議論
- github上でオープンに議論される
- 各ブラウザベンダが最新仕様のステータスをオープンにしてる
Extensible Web Manifest
- 低レベルのAPIをまず用意するという考え方
AMP
- アプリに制約をもたせることで高速化
  - WebComponentsを活用してる
- Googleのキャッシュから配信してるためオリジンがgoogleになってしまう
  - -> Web Packagingで解消
Web is thhe only platdorm no one owns

光を超えるためのパフォーマンスチューニング/アーキテクチャ

mizchiさん

大前提

この宇宙では光が遅すぎる
- 海外と通信すると特に

フロントエンドのキャッシュ設計

フロントエンド技術の目的

小さいスコープ
- 部分的に60fpsを達成
大きいスコープ
- 通信を含めて遅延を抑える

16ms以上の世界

構築済みHTMLをCDNで返すと速い
キャッシュがいろんな層にある
EdgeCacheにキャッシュしておく
- 参照はキャッシュから返す
- 更新されたらサーバがキャシュを更新
小規模開発だと
- CDN: Redis
- Server: MySQL
- と置き換えて考えてもいい

先読み

https://guess-js.github.io/
GAのデータを元にpreloadを挿入してくれる
- データがたくさんあると効果的

まとめ

ネットワークにアクセスしたら負け
CDNより先にアクセスしたら負け
DBでクエリ発行したら負け

16ms未満の世界

途切れず連続していると感じる時間

最適化

単純にライブラリの量を減らす
- 展開する時間に1秒とかかかることも
- ダウンロードの時間だけなく展開の時間も削ることを考える
lodashとかmomentとかでかいものを入れない
Dynamic Importを使う
レイアウト抑制
- ヘッダーの連続性が重要

マイクロチューニング指針

楽観的UI

常にリクエスト成功したことにする
- 失敗したらロールバック
正常系にネットワーク上の分岐がない場合に使える

クライアントファースト

クライアントのデータ処理を優先する
サーバは単にsyncするだけ
扱うデータが自己完結するケース
- ゲームとかツールとか
firebase(firestore)と相性良し
Webはクライアント改ざんに弱い
- 真面目に突き詰めるならP2Pで相互監視?ブロックチェーンなど

Off the main thread

UIスレッド以外に処理を逃がす
自然とViewとデータを分離できる

FIDO認証によるパスワードレスログイン実装入門

合路健人さん(Yahoo)

FIDO認証によるパスワードレスログイン実装入門 from Yahoo!デベロッパーネットワーク

パスワード認証の課題

利便性
- サービスごとにパスワード
- 複雑なパスワードの入力
安全性
- パスワードを盗まれる

FIDO

Fast Identity Online
従来は利便性と安全性がトレードオフ
- FIDOはどちらも向上させる
公開鍵暗号方式
- 公開鍵をオンラインサービスに登録
RP
- Relying Party
認証器
- Authnticator

FIDOの特徴

利便性
- 生体認証なので認証行為が容易
  - 指紋・声紋・虹彩・顔
  - 認証器の多様性
- パスワードを記憶しなくて良い
  - 本人のみが記憶してる情報 -> 本人のみが所持している情報
安全性
- ネットワーク上に流れるのはクレデンシャル情報だけ?
- リスト攻撃を受けない
- フィッシング攻撃もできない

FIDOの技術仕様

FIDO UAF

パスワードレス
主にスマホを利用
生体認証

FIDO U2F

パスワード補完型(記憶 + 所持)
PCのWebブラウザで利用
着脱式/無線式

FIDO2

Webも対応
- ブラウザでもパスワードレスに
Web Authntication API
- CredentialWebAPIの拡張

まとめ

パスワード認証は利便性安全性に問題
FIDO認証は公開鍵暗号方式で課題を解消
FIDO2

PWAの導入で得られた成果と見えてきた課題

宍戸俊哉さん(日本経済新聞)

PWA導入したせいか

日経電子版
- https://r.nikkei.com/
SPAではない
PWA化から１年たった
パフォーマンス
- SpeedIndexで2倍
ビジネス指標も向上
- PWA化だけでなくリニューアルによってUXが向上した
ヘビーな使い方にも応えやすくなった
- 再訪の仕組み
  - A2HS
  - Push通知

リリース後の取り組み

CSSのインライン化

レンダリングブロックさせない工夫
- first viewのCSSだけheadに
- 本題はlazy loading
First Meaningful Paintが1秒改善
デバイスサイズやユーザ属性によってスタイルが違う
- マニュアルでメンテしてる

A2HSのタイミング

いつホームに追加のプロンプトを出すかABテスト
- 記事の読了を判定し表示
  - 押してもらえる率は高いが回数が少ない
- ブラウザ任せ
  - こっち採用

ServiceWorkerの起動待ち問題

起動までに50ms(モバイルは250-500ms)待たされry
NavigationPreload
- sw起動待たずにfetchできる仕組み

速度を維持する取り組み

サイトは絶対に遅くなっていく

モニタリング

Speedcurve
- 毎日測定
- ダッシュボード用モニタを置いて可視化
短期(1w-1m)
- 特定のリリースでの劣化を検知
長期(3m-1y)
- 気づいたら遅くなっていたを検知

ツール

導入済み
- SpeedCurve(webpagetest)
- PageSpeed Insights
- Atlas(内製ツール)
導入したい
- Chrome Experience Report
- Lighthouse CI

Paformance Badget

パフォーマンス関連のメトリクスい対するBadget
- ファイルサイズ
- ファイル数
- 表示時間
数値で定義しオーバーしないようにつとめる
目標とする値をどうやって決める？
- web.devに記事が上がってる
現実的に取り組める値を設定してやっていくとよい
- ダイエットと一緒

現状の課題

js/cssの最適化
- devtoolsでカバレッジ取ると8-9割使われてない
  - Named Export
  - Code Splitting
  - Dynamic Import
さらなるキャシュ活用とオフライン対応
- 朝夕刊の一括ダウンロード
  - アプリでは持ってる機能
- オフライン対応
  - 日本では需要少なめなので後回しになってる
  - BackgroundSyncとIndexedDBでできる
    - RequestオブジェクトごとIndexedDBに入れる
iOS Safari PWA
- 課題が山積み
- プッシュ通知できない
- A2HSのプロンプトでない
- バグ
- 等々
その他
- 実装当時はキャッシュ周りライブラリなかったので自前
  - workboxで書き直してる
- ServiceWorkerの更新
  - 前回の更新確認から24時間以上経つと更新確認される
  - importScriptsで読み込まれるファイルのみ変更した場合更新確認が行われない

PWAの今後の展望

ライブラリによる抽象化
- workbox, Next.js, Nuxt.js
プラットフォームの整備
- Microsoft Store
- デスクトップPWA
- Web標準 API

まとめ

PWA導入でエンゲージメント高められる
速度はUX向上の1手段
モニタリング/Paformanec Badget
iOS課題多いがServiceWorkerだけでも恩恵ある
フレームワーク/プラットフォームがもっと整備されていきそう

Node.js まとめ

古川陽介さん(リクルートテクノロジーズ)

Node v11

chengelog見ても変更少ない
nodeのポリシー
- small core, less is more
Long term support
- 偶数バージョン
- 2年間は保障 + 1年間セキュリティ保障
- LTSあると運用面で嬉しい
  - 新しいバージョンでてもいきなり追従しなくていい
  - VUP戦略を企業毎にとれる
V8
- v8はNode非互換の修正をするときは事前に通知する
- v8がnodeをforkして確認してる
CI回してる
- PRごとに全CPU・プラットフォームででビルドを確認
Stability
- CPUのプロファイラとれる
- メモリリークを確認するする仕組み
  - devtoolsでheapdumpとれる
paformance priority is high
- 便利だけどパフォーマンス落ちるっていう機能は入れない
- ベンチマークをとってる
  - マイクロベンチマークだけでなくExpressを使ったベンチマークもとってる
  - https://benchmarking.nodejs.org
- https://yosuke-furukawa.hatenablog.com/entry/2017/12/05/125517
keep v8 fresh
- 新しい(Stable Chromeに使われてる)v8を取り込むようにしている
Worker
- Threeadを使えるようにするためのもの
- NodeはWebpackやbabelでの需要が高まってる
  - multi threeadでやりたい
llhttp
- TSからllvm bitcode生成してCからも呼べるようにする
- 従来のhttp_parserよりも高速化
- まだexperimental
セキュリティ
- Security Releaseは脆弱が報告される度に修正パッチ
- ソーシャルハッキング的なことは防げない
  - npm audit, yarn audit
  - 脆弱性があるパッケージ使ってないかチェックできる

Web Standards

Http/2
ES Modules
- .mjsはexperimental
Promise
- Nodeの非同期処理
  - callback, Promise, Stream
- util.promisify
  - callbackをPromise化
- fs.promises(experimental)
  - Promise返す
- Promise使えればasync/awaitで×
- StreamとPromise
  - for await (constt k of readable) { }
- stream -> callback -> promisifyする -> Promiseとして扱える

Node.js Futuer

Node.js Foundation と JS Foundationの統合
W3CとNodeの歩み寄り
- 共通部分をECMAで標準化
WebAPIもNodeAPIもECMAもユースケースを求めてる
- 仕様策定側よりも利用してる開発者の方が知ってる
- 開発者がユースケースを作っていく

HTTP の今と未来ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで

浅井智也さん(WebDINO Japan)
永井泰裕さん(ソフトバンク)

HTTPP and 5G fixed1 from dynamis

イントロ

2015/2
- HTTP/2
2019/XX
- HTTP/3
HTTP over QUIC -> HTTP/3

5Gの世界

5Gにおけるネットワークの進化

4G -> 5G
- 1Gbps -> 10Gbps超
- 10ms -> 1ms以下
- 10万デバイスkm2 -> 100万デバイスkm2
遅延を小さくすることに特化させると
- 隊列走行による無人走行を実現し流通効率化
- 建設機器の遠隔監視制御
大容量に特化させると
- モバイル以外もターゲットに
- VRを用いたリアルタイムスポーツ観戦
- 場所にとらわれないe-Sports
- 監視カメラの映像解析

ターゲット

3G
- 音声ネットワーク
4G
- データネットワーク
5G
- サービスネットワーク

5Gの実用化

2018年~
- 実証実験
2020年頃~
- 5G実現
2022年以降~
- 5G高度化

開発者にとって

Web for 5Gの課題
- 5Gの性能を活かしきれない場面
MEC(Multi-access Edge Computing)
- クライアントとサーバの間で受け取って処理する
- 5Gの性能を活かしたアプリ提供が可能に
Web屋とインフラ屋でサービスを共創

HTTP/2 & TLS1.3

HTTP1.1 + TLS/1.2の課題

同時接続数6まで
- 一つずつ送られる
- 重いのがあるとブロッキングしてしまう
TCPの限界
- TCPヘッドオブラインブロッキング
- パケットをロスすると詰まる

HTTP/2

単一TCP接続上で非同期並列通信
ヘッダ圧縮による通信効率向上

TLS1.3

速い
- 0-RTT
安全
安心

QUIC

HTTP + TLS over TCPをUDP上で再実装
- HOLブロッキング解消
- 0-RTT
- 複数経路でMultipath通信

HTTP/3

Google QUIC -> IETF QUIC
HTTP over QUIC -> HTTP/3

2018-11-23

「東京Node学園祭2018」に参加してきました

勉強会メモ

東京Node学園祭2018に参加してきました。

nodefest.jp

去年に続き海外スピーカーが多く登壇されNodeのコアなテーマが多くありました。
個人的にはGraphQL系の2セッションの大盛況ぶりがとても印象的でした。
Keynoteでは来年からはNodeFestではなくJSConf in Japanとして開催する計画であると発表されました。

RoomA	RoomB	RoomE
Keynote 古川陽介	-	-
Offline-First Collaborative Data Structures Mathias Buus	JavaScriptで機械学習はじめよう Shuhei Iitsuka	How I made critical code run much faster Vladimir de Turckheim
Node.js: The Road to Workers Anna Henningsen	Node.jsでつくるNode.js ミニインタープリター＆コンパイラーがねこまさし	Accessibility vs latest Web APIs. Can’t we just get along? Mauricio Palma
JavaScript Class Features: A case study in TC39 Daniel Ehrenberg	Diagnose your Node.js app Daiki Arai	A trillion points with Node.js Martin Heidegger
Who Takes Out Your Trash Sanne Kalkman	State of SEO for SPA seya	Navi: painless routing for React James K Nelson
libuv: What's a Unicorn Velociraptor? Colin Ihrig	React におけるパフォーマンスチューニング辻健人	Node.jsアプリの開発をモダン化するために取り組んできたこと Daiki Yokoi
Leak Hunting: Finding and debugging a memory leak in Node.js Giovanny Gongora	WebアプリをNativeアプリにする Capacitor が広げるWebの可能性榊原昌彦	ブロックチェーンアプリケーション開発でのJavascriptの話 Koji Hirano
Look What You MIDI Me Do! Rachel White	実践GraphQL for クライアント側鈴木亮太	Angular Universal on Google App Engine 今村謙士
Visualizing the Decentralized Web Jim Pick	Service Workerを用いたキャッシング戦略〜Wikiアプリケーションを例に〜飯塚大貴	React + Apollo Client (GraphQL) により変化するアプリケーション設計宮崎優太郎
Real-Time Machine Learning in JavaScript Athan Reines	貢献できるOSSの見つけ方 -完結編- Masato Ohba	-
Haute Codeture Stephanie Nemeth	Vue.js/Nuxt.js で実現できた PWA のリアルタイム動画ラップ・バトル・アプリ lulzneko	-

LTタイトル	発表者
おまいらちゃんとリソース解放してますか	Taro Odashima
食べたいIoT	へっぽこまるこ
What developers can learn from Soviet space program failures	Andrey Sitnik
power-assert 2	和田卓人
How to choose the best npm library?	Sota Sugiura
Squoosh裏話	Mariko Kosaka

JavaScriptで機械学習はじめよう

Shuhei Iitsukaさん(Google)

docs.google.com

JS × ML

Tensorflow.jsの例

emojiscavengerhunt.withgoogle.com

landing.google.co.jp

機械学習とは

データを活用して有用な予測を行う
ロジックで記述することが難しい時にデータからロジックを得るアプローチ

機械学習の実装方法

K近傍法

最も似てるK個で多数決する
データが増えると複雑

線形モデル

線を引いてグループ分け
平面で分離できないと対応できない

ニューラルネットワーク

脳細胞のネットワークをヒントにしたモデル
行列演算を繰り返す
調整するパラメータが多い
ニューラルネットワークを重ねる -> DeepLearning
- 膨大な数のパラメータ調整が必要
  - そこでTensorFlow

TensorFlow

計算グラフを使う
- 微分の計算(パラメータを変更時に誤差がどれくらい変化するかの計算)が簡単になる
- 誤差逆伝播法

TensorFlow.js

TensorFlowのjs版
ブラウザからでもNodeでも

なぜJSで機械学習?

オンブラウザ機械学習
- 高速な推論
- プライバシーの保護
- スケーリングが容易
- 学習済みモデルの軽量化が課題

デモ

3×3マスのマルバツゲーム
手書きの○と×を認識させる

https://tushuhei.github.io/tfjs-tutorial/

Diagnose your Node.js app

Daiki Araiさん(Yahoo)

Node初学者の悩み

非同期処理が難しい
エラーハンドリングが難しい
debugが難しい

非同期処理が難しい

ブラウザ or NodeやNodeのバージョンによって挙動が違うことも
- node v11から変わった

for (let i = 0; i < 2; i++) {
  setTimeout(() => {
    console.log(`Timeout ${i}`);
    Promise.resolve(`Promise ${i}`).then(console.log);
  }, 4);
}

非同期処理は順番/時間に依存しない設計が重要
フロー制御できているかどう確認?
- Async Hooks
- Async Hooks | Node.js v11.3.0 Documentation

エラーハンドリングが難しい

非同期処理の種類によってエラーハンドリングのしかたが違う
- callback
- EventEmmiter
- Promise
- async/await
unhandledRejection/multipleResolvesのdebugは必ずするべき

debugが難しい

node v12からasyncスタックトレースが強化される!?
- 非同期処理中にクラッシュしてもスタックトレースが表示される
post-mortem debugging
- クラッシュ時のメモリイメージから指標を取る

State of SEO for SPA

seyaさん

qiita.com

SEOとは

Search Engine Optimization
Google botにインデックスされること
- Google botにクロールされること
- HTMLが適切に解釈されること

SPAでのSEOの課題

よく言われること
- Googlebotはjs実行しない/ajax実行してくれない
  - -> そんなことない
Chrome41相当のレンダリングエンジンしか持ってない
- アロー関数等々動かない
WebSocket対応していない
ユーザの同意を必要とする機能使えない
jsを含むページだとRenderQueueに入るから反映が遅い

SPAでのSEOの課題の解決策

babel使ってchrome41で動くJSにする
- fetch as googleで確認できる
  - ただし1日10回までの制限
メタ情報だけSSR
Dynamic Rendering(prerender)
- prerender.io
- アクセスしたのがGoogleBotだったらPrerenderServiceがHeadlessChromeがレンダリングしたHTMLを返す
StaticSiteGenerator
- SEOしたいところだけ使うってのもありではないか
- SEOしたいページで認証通しておきたいとかないだろうし
SSR

解決策の選び方

判断ポイント
- インデックスに信頼性を求めるか
- メタ情報の対応が必要/不要
- 頻繁に更新される & すぐにインデックスしてほしいかどうか

React におけるパフォーマンスチューニング

辻健人さん(リクルートテクノロジーズ)

SPAに何を求めるか

いろいろなことを求められるようになっている
ユーザの操作に迅速に応えることが重要

事例

お客さんからパフォーマンスが悪いと問い合わせ
Scriptingに時間がかかっていた
- Reduxの処理だろうと思い調査
- うまくいかなかった
推測するな測定せよ

調査

何をするか

Scriptingの内訳を見る
関数のコールスタックを調べる
React内部で何が起きているか調べる

どうやって調べる

Chrome Devtoolsを活用する
ReactDevTools
- HighlightUpdate
- Profiler
Network Timing
User Timing
- React内部で計測の処理を入れてくれている
- redux-action-timing-middlewareと組み合わせ
  - actionごとのパフォーマンスが見られるようになる github.com
React Virtualize
- 画面に表示されてない要素を描画しない

まとめ

推測ではなく測定することが重要
顧客と同等の環境で動作確認しないと気づけない
- DevToolsの機能で性能を調整できる
定期的なパフォーマンス測定が重要
- 機能追加とともにパフォーマンスも劣化していく

WebアプリをNativeアプリにする Capacitor が広げるWebの可能性

榊原昌彦さん

Capacitor

capacitor.ionicframework.com

Cordovaの後継
HTMLでモバイル/Web/デスクトップアプリを作れる
- WebViewの中でHTMLを表示している
- SPAであればいいので任意FWで作れる
デザインガイドラインに沿ったアプリを簡単にHTMLで作れる

Cordovaの課題

バージョン
- プラグインとのバージョン差異問題
プラグイン
- ネイティブAPIをたたくプラグインはほしいのがなければ自作しないといけない
デザイン
- OSのデザインも変わっていく
開発スピード
- OSSなのでFW自体の開発スピードが遅いことも

Capacitorの特徴

コアプラグインとして、よく使われるネイティブにアクセスする機能を持っている
- Cordova -> Cordova Plugin -> Objective-C/Java -> NativeAPI
- Capacitor -> Swift/Kotlin -> NativeAPI
Native UI Shell
- モバイルでWebViewの中にネイティブのパーツを出せる
  - 小さいパーツはHTMLで再現ではなくネイティブを呼んでしまう
  - アラートなど
- Webの時はデザインされたパーツを出してくれる
HTMLアプリだからネイティブより遅いでしょ？
- 速くはないけど遅くはない
- 遅いから使い物にならないという時代ではない
PWAをサポートしてることがCordovaとの違い
- スマホアプリよりもWebの方が利用率が高いというデータ
- アプリの新規インストールはあまりされなくなってきている

実践GraphQL for クライアント側

鈴木亮太さん(Fringe81)

GraphQLってなに

型システムとともにあるクエリ言語
Facebookが2015年にRelayとともに紹介
HTTPの場合はPOSTのボディにクエリを入れる

Query/Mutation

query
- RESTでいうGET
mutation
- RESTでいうGET以外
ネストした情報も一発でとってこれる

型システム

データに型を指定できる

GraphQLを使ったプロダクト

データ同士の関連が複雑

GraphQLによって解消された苦しみ

サーバ/クライアント間のいけてなさ

before
- API仕様のやりとりがつらい
after
- コミュニケーションの中心がGraphQLのスキーマになった
- 共有されるドキュメントはコードから自動生成

データ取得の複雑化

before
- エンドポイントがたくさん
- 一つの画面を表示するのにたくさんのエンドポイントとのやりとり
- レスポンスを扱うコードへの不安
after
- 一発でデータがとれる
- 取得したデータのスキーマが保証される

データ取得のパフォーマンスボトルネック化

before
- リクエストの数だけ時間がかかる
- 使わないデータも送られてくる
after
- 一発で手に入るので
- 不要なフィールドの値は送られてこない

なぜGraphQL選んだか

GraphQLの課題
- BFFやSwagger使ったりすればGraphQL使わなくても実現できる
- リクエストが全て/graphqlになる
GraphQLだけ覚えればやりたいことできるから
クライアントサイドに依存したサーバサイドにならなくていい

GraphQLを使うにあたって工夫したこと

Query/Mutationに名前をつける
- リクエストの文脈がわかる
- エンドポイントが全部おなじになる問題の対応
queryの再利用性を高める
- fragmentを積極的に使う

React + Apollo Client (GraphQL) により変化するアプリケーション設計

宮崎優太郎さん(メルカリ)

blog.vwxyutarooo.me

メルカリWeb

今GraphQLを使ってるわけではない
リファクタリング中でそこで取り入れてる

ReactとGraphQL

GraphQLを使うとReduxがいらなくなってコード量が減る
- 実際にそうだった
- GraphQLとApolloClientを使って作ってる

Reducing our Redux code with React Apollo – Apollo GraphQL

Moving from Redux to GraphQL - Speaker Deck

GraphQL

RESTの置き換え
BFFとして

Apollo

www.apollographql.com

GraphQLのクライアントとサーバそれぞれに必要なプラットフォームを提供してくれる
Apolloの構成
- Gateway(ApolloEngine)
- Library
- Development

Apollo Client

Apollo Boost
Apollo Link
Apollo Cache

React Apollo

www.apollographql.com

ApolloClientを内包している
- ReactのHOCとして提供
クエリをGraphQLサーバに投げてくれる
- 結果をHOCに流す

Apollo Link State

ローカルステートとサーバからとってきた情報を混ぜて扱える

Redux -> Apollo

Redux
- ビジネスロジック
  - データアクセス
  - エンドポイント管理
  - ステート管理
- プレゼンテーションロジック
Apollo
- データアクセス
  - React Apolloによって抽象化され書かなくて良くなった
- エンドポイント管理
  - GraphQLサーバに一回アクセスすればいい
GraphQLとApolloの抽象化によってReduxが置き換わった
- プレゼンテーションロジックが複雑なものはもしかすると難しいかも

まとめ

ApolloとGraphQLを使うとReduxでやってたところが抽象化される
- UIやプレゼンテーションロジックにフォーカスできるようになる

2018-11-09

「Meguro.css #4 @ oRo」に参加してきました

勉強会メモ

Meguro.cssに参加してきました

megurocss.connpass.com

Meguro.cssは#2以来の2回目の参加でした。
実用的な話が多くて特にShadowDOMの実践的な話を聞けてとても勉強になりました。

タイトル	発表者
雑誌風レイアウトをCSS Grid Layoutでリファクタリング	@c_re
CSSフレームワークを自作してみた話。	@kokushing
CSS と Shadow DOM	@ktsn
outline: none;	@yamanoku
Marqueeタグでゲームを作りたい	@bug_ojisan
word-wrap周りのベストプラクティスを考えてみた	@masahiko888

雑誌風レイアウトをCSS Grid Layoutでリファクタリング

@c_reさん

雑誌っぽいレイアウト

前提

既存のflexboxをGrid Layoutに
レスポンシブに

苦労したとこ

IE11対応苦労した
- grid itemに指定したmargin/paddingがおかしい
- grid containerに対するalign-item, grid itemに対するalign-selfが効かない

よかったとこ

ゴードが読みやすくなった
レスポンシブはモバイルファーストで組んだ方が楽

CSS フレームワークを自作してみた話。

@kokushingさん

CSS フレームワーク使ってて

使いづらいなと思うところがある
- 記述の癖
- 使わないスタイル
- 日本語つまってる
- デザイン好みじゃない
-> 自分で作った

自作フレームワーク

UNITS

unitscss.kokush.in

コンポーネントベース
日本語表示最適化
MaterialDesign風

Uny

unys.github.io

柔軟性を意識
SCSSを採用
スタイルの一括調整
- メンテナンス性
pxではなくremを使ってフォントサイズ管理楽になった

Unim

kokushin.github.io

まだ公開してない
レイアウト用、テーマ用、カラー用のスタイルに分割
日本語での表示に特化

mono.css

kokushin.github.io

2kbの軽量フレームワーク

jpn.css

kokushin.github.io

bootstrap合わせて使うと日本語が読みやすくなる

CSS と Shadow DOM

@ktsnさん

ShadowDOM

スコープが区切られたDOMを作れる
- 外部のCSSは内部に影響を与えない
- 内部のCSSは外部に影響を与えない
CSSが漏れない

使ってみって

reset.cssどうする？
- shadowDOMごとに読み込む
手っ取り早くリセット
- all:initial;
- all:unset;
テーマ変更
- CSS Custom Property

:root {
  --text-color: red
}

var(--text-color);

外から自由にスタイルを変えたい
- ;;part``::themeが提案中

対応状況

そろそろいけそう
- Chrome OK、FireFox OK
- safariあやしい、Edgeダメ

outline: none;

@yamanokuさん

outline

輪郭線
outline: none;
- フォーカスした要素の輪郭線を消す

`outline: none;`なぜよくない？

現在位置わからなくなる
a11yが悪くなる
http://www.outlinenone.com/
とはいえデフォルトのフォーカスはいけてない

マウスとキーボードを別にする

forcus-visible
キーボード操作でフォーカスしたときだけスタイルを当てる
- 使えないブラウザがほとんど
jsライブラリ

github.com

まとめ

outline: none;をする前に一旦立ち止まろう
問題なければデフォルトでいいとおもう
- スタイル変えるならよく考えないといけない
いろんなサイトをタブキーで移動してみよう

Marqueeタグでゲームを作りたい

@bug_ojisanさん

Marqueeタグ

廃止されたHTMLタグ
アクセシビリティが悪い
横に動くやつ
斜めとかも動かせる

Marqueeタグの可能性

ゲームとか作れそう
パラメータは変数ではないので衝突判定とかできない
CSS in JSで作り直す
- remarquee

remarquee

www.npmjs.com

衝突判定したい
Reactベースで
横に動くだけで100%追従してるものはない

word-wrap周りのベストプラクティスを考えてみた

@masahiko888

word-wrap

固定幅の要素内で文字が横にはみ出させずに折り返したい
word-wrap: break-word
word-wrap: break-all
break-wordでダメな時に安易にbreak-allしてはダメ
考えないと行けないパターン
- 英字の連続
- 、。…の連続
- 、。…の禁則処理

どうしたらよいか

基本はbreak-word
禁則処理が発生しないところはbreak-all

2018-11-07

「どこでもKotlin #6 〜Kotlin 1.3の新機能に触れる〜」に参加してきました

勉強会メモ

どこでもKotlin #6 〜Kotlin 1.3の新機能に触れる〜に参加してきました。

m3-engineer.connpass.com

最新のKotlinの話やサーバサイドKotlin、Kotlin/Nativeと幅広い話が聞けて勉強になりました。
Kotlin/Nativeは気になりつつもあまり情報収集できていなかったので参考になりました。着実に進歩しているものの今はまだ様子見といった印象ですかね。
後は太郎さんのContractsの説明めちゃくちゃわかりやすかったです。

タイトル	発表者
What's new in Kotlin	LINE 藤原聖
コードで見る Kotlin 1.3	M3 大和康平
8割完成済みのJavaプロジェクトにKotlinを途中導入した話	M3 川俣涼
Kotlin/Native 「使ってみた」の一歩先へ	M3 星川貴樹
Kotlin Contracts	Ubie 長澤太郎

What's new in Kotlin

LINE 藤原聖さん
エムスリー技術顧問

Kotlin Conf 2018

JetBrainsが主催
今年で2回目
1300人以上参加
65セッション全て動画公開

www.youtube.com

Keynote

Kotlin言語設計者のAndrey

Pragmatic

実用主義
開発者が考えたことをそのままコードにできる

Evolution

Keep the language modern
Comfortable update
言語をモダンに保ちつつIDEの補完でサポート

Kotlin 1.3 Release

10/29リリース
Coroutinesがstable
Kotlin/Nativeがbeta
Contracts, Inline classes等experimental

コードで見る Kotlin 1.3

M3 大和康平さん

Kotlin1.3事始め

brew install kotlinで1.3入る

Croutines

軽量なスレッド
Croutines builder

Inline Classes

コンパイル時にオーバヘッドが少なく展開できる
static methodとして展開される
プライマリコンストラクタのプロパティ1つまで
init文を持てない

標準関数

Random
isNullOrEmpty/orEmpty
Array.copyInto
ifEmpty/ifBlank

8割完成済みのJavaプロジェクトにKotlinを途中導入した話

M3 川俣涼さん

JavaプロジェクトにKotlin導入

社内でKotlin導入の流れ
新しい技術への挑戦

進め方

新規追加のクラス/テストはKotlinで

メリット

コード量の減少で開発効率アップ
- data class
Null安全がいい
- nullpo事前に分かるのいい

デメリット

なかった
強いて言うなら情報が少ないこと
- qiitaの記事Java + SpringBootは1250、Kotlin + SpringBootは132
Javaのコンパイラ周りの知識は必要
- lombokを使ってるJavaクラスのプロパティを参照できない
- JavaからKotlinのクラスを参照するとビルドエラー
- コンパイルの処理順序を知っておくことが必要

Kotlin/Native 「使ってみた」の一歩先へ

M3 星川貴樹

Kotlin/Native 「使ってみた」の一歩先へ from Takaki Hoshikawa

Kotlin/Nativeとは

Kotlin -> LLVM
コンパイル前はSwiftと混ざってても理論上は大丈夫

Kotlin/Nativeの歩み

2017/4登場
- Cのヘッダーファイルを解釈することできた
2017/11
- iOS, macOS, WebAssembly対応
2018/2
- MPP対応
2018/4
- Objective-C, Swiftの相互運用改善
2018/6
- JVM, JSのstdlibに
2018/11beta
- 安定版コルーチンサポート
- Kotlin1.3

Kotlin/Nativeの使いみち

Java資産使えないのに価値あるの？
- Cのライブラリなら使える
- iOSならSwift, Objective-Cのライブラリ使える
Kotlin stdlibにない機能はどうするの？
- コルーチン等いろいろ対応されてきてる
メモリ管理どうするの？
- GC独自実装している
- iOSであればARC値返る
想定される使い道
- Andoroid, iOS, (Web)の共通モジュール
- サーバとクライアントのモデルクラスの共通化
- MVPのMとPをKotlinでVはOSごとのコードで

Kotlin/Native速いの？

JVMの方が2倍速い
最適化作業がまだされてないから?

Kotlin/Nativeのこれから

MPPで使えるライブラリを使うようにする
KotlinライブラリのMPP化
iOSエンジニアの理解

Kotlin Contracts

Ubie 長澤太郎

従来のKotlin

便利な関数があるのにスマートキャストできない
- !name.isNullOrBlank()と書くと
  - Nullableな変数をnullでないと確認した後はNonNullで扱いたい
  - 文脈的に明らかにnull出ない場合でもコンパイラがエラーという
  - name != nullって書かないと行けなかった
  - これが1.3からちゃんと動くようになる

Contracts

事前条件
- 関数の利用者が条件を満たす
事後条件
- 関数を呼び出した後の状況を関数が保証する
- ex. List#addしたらlengthが1増える
不変条件
- オブジェクトが満たすべき状態を維持する
Contractsは事後条件の部分
- しかも静的に

対応してる標準関数

引数がtrueを保障
- assertTrue
- check
- require
引数がfalseを保障
- assertFalse
引数がNotNullを保障
- assertNotNull
- checkNotNull
- requireNotNull

従来のKotlin2

val変数の初期化が絶対成功するはずなのにできない
ラムダの中での初期化はは一度だけしか呼ばれないのに分かってくれない
- これが1.3からちゃんと動くようになる
InvocationKind
- AT_MOST_ONCE
- EXACTRY_ONCE
- AT_LEAST_ONCE
- UNKNOWN

契約DSLまとめ

contract: 関数の先頭
returns(): 関数が成功したら..
returns(Any?): true/false/nullを返したら..
callsInPlace: 関数が呼ばれる回数を保障する

contract {
  returns(true implies (arg != null)
}

contract {
  callsInPlace)block, InvocationKind.EXACTRY_ONCE)
}

2018-11-03

「Vue Fes Japan 2018」に参加してきました

勉強会メモ

Vue Fes Japan 2018に参加してきました。

vuefes.jp

会場A	会場B
キーノート Evan You	-
Next-level Vue Animations Sarah Drasner	Vue.js と Web Components のこれから Takanori Oki
Vue Designer: デザインと実装の統合 katashin	Unit testing a Vuex store Edd Yerburgh
Atomic Design のデザインと実装の狭間菅原孝則	Nuxt.js 2.0 Sébastien Chopin
A deep dive in SFC compilation Rahul Kadyan	note のフロントエンドを Nuxt.js で再構築した話福井烈
Vue CLI 3 and its Graphical User Interface Guillaume Chau	1年間単体テストを書き続けた現場から送る Vue Component のテスト土屋和良

キーノート~ Vue3.0 Updates ~

Evan Youさん

Vue3.0

より速く
- 仮想DOM再実装
- コンパイラ最適化
より小さく
- tree shaking対応
よりメンテナンスしやすく
よりネイティブ向けに作りやすく
- カスタムレンダラAPI
よりあなたのコードの保守性を向上
- tsxによるTypeScriptサポート
- HooksAPI(Experimental)
- TimeSlicing(Experimental)

より速く

仮想DOMの実装を作り直した
- moutとpatch処理が最大100%向上
- 後方互換性も保つ
ネイティブプロキシを使って高速化
コンパイルの仕組みも高速化
- コンポーネント探索の最適化
- 依存関係を正しくトラッキングし不要な親子のレンダリングを回避
- 静的ツリーの巻き上げ
  - テンプレートの静的な部分と動的な部分を区別して最適化
  - インラインで定義してる関数も巻き上げてキャッシュする
=> コンポーネントの初期化が最大で100%高速化する！

より小さく

tree shaking対応
- 使われていないコードをバンドルされたファイルに含まないようにする

よりメンテナンスしやすく

アーキテクチャの整理
パッケージの分離
テストセットアップの改善

よりネイティブ向けに作りやすく

カスタムレンダラAPI
- 対象はブラウザだけでない
- ios/android(WeexやNativeScript)

あなたのコードの保守性を向上

リアクティビティAPI
- observableメソッドでstateの変更を監視
- リアクティブの画面に反映
コンポーネントの再描画をデバッグしやすく
- renderTriggered
TSXによるTypeScriptサポートの強化
- render関数にtsxを書ける
warningメッセージの改善
HooksAPI(Experimental)
- mixinのネームスペースの問題を解決できる
TimeSlicing(Experimental)
- 重い処理があってもブロッキングしなくなる
- 処理を分離させている
- 60fps

Vue.js と Web Components のこれから

Takanori Okiさん

WebComponsntesとは

Web標準でカプセル化されたコンポーネントを作る技術
EdgeとIE除けばもうpolyfillなしで動く

仕様

Custom Elements
- 自分でHTMLのタグを作れる
Shadow DOM
- DOMのカプセル化を実現できる
- CSSやJSがscopedに
HTML Template
- 独立したHTMLかたまりを定義できる
- <templates>
ES Modules
- JSファイルをimport/exportできる
HTML Modules
- HTMLをJavaScriptの中に直接import可能にする仕様

どうやってWebComponentsをVueで作るか

VueCLI3のBuildTargets
--target wcをつけるとvueのコンポーネントをWebComponentsに変換してbuildできる
これで生成されたファイルは単体でWebComponentsとして動く
VueからWebComponentsにスムーズに移行できる

なぜWebComponentsを使うのか

-　今のところVueの機能を使ってWebComponentsを作ったほうが楽

メリット

同じコンポーネントをどんなライブラリとも一緒に使える
- フレームワークが変わってもUIを使い回せる
FullScoped
- VueだけではうまくScopedに振る舞わせられるだけ
- グローバルなCSSに影響されなくなる

デメリット

属性にString型しか渡せない
外部から渡されるイベントハンドリングが難しい

Micro Frontend

サーバサイドのマイクロサービスのようにフロントエンドもマイクロサービス化
外側はVueで細かいパーツはWebComponents

変更に強い柔軟なWeb

WebComponentsならScopedなので以下のような変更が楽
- CSSの変更
- JSの変更
- ライブラリの変更
- DOMの変更
Framework移行はとても大変
- Vueが死んでもWebComponents使ってればmigrationしやすい
Web標準であることは強い

今後どうなるか

VueはWebComponentsに置き換えられていく？
- No
- 共存していくもの
WebComponents is to encapsulate HTML elements

まとめ

WebComponentsまだ課題もある
VueとWebComponentsは共存できる
UIをWebComponentsに任せることで負債を減らせる

Vue Designer: デザインと実装の統合

katashinさん

今のWebアプリ

デザインと実装が分かれている

デザイナー
- デザイン用のツール
開発者
- デザインの通りに実装
昔よりUIや設計が複雑になってきたので分業化されてきた
分業することによる課題もある

デザインと実装が分かれることによる課題

デザインのファイルと実装するファイルが違うので二度手間
小さな改修でのコミュニケーション問題
デザインは静的
=> みんな解決しようとしている

ライブラリ

vuegg
- 結局プロトタイプでしか使えなさそう

vuegg.now.sh

FramerX
- Reactコンポーネントを生成できる

technical-creator.com

SFCが実装かつデザインになるようなツールがほしい
- そこでVue Designer

Vue Designer

github.com

VSCode上で使う
VueアプリのプレビューがVSCode上で見られる
- windowsサイズを柔軟に変えられる
- プレビューで画面を選択するとそれに該当するコードがハイライトされる
SFCが唯一のデータ
- デザインしたものがVueのコードになる
- 実装もデザインも同じコード

仕組み

html
- vue-eslint-parser
js
- @babel/parser
- babelはtsにも対応した
css
- postcss

今後

v1.0.0までの展望
- 開発者が使って便利なものにしたい
- SFCのプレビューツールとしてでも便利
- Chrome devtools on VSCode
- Layouting tool
その先
- npm i element-ui vuetify quasar-framework vuesaxするだけでデザイン使えるように
- デザイナーと開発者がgithubで同じコードを編集
- コンポーネントカタログ自動生成

まとめ

デザインと実装が分かれてることによる課題がある
- 統合したい
- Vue Designer
まずは開発者が便利に使えるツールに
将来的にはデザイナーも開発者も使えるツールに

Atomic Design のデザインと実装の狭間

菅原孝則さん

コンポーネント

デザイナーとエンジニアが同じ目線でコンポーネントを設計するのは難しい
AtmicDesignでもダメ
知識の分断が大きい
大事にしていることも違う

デザイナーがやってること

やってること
- UXデザイン
- UIデザイン
- 他にもいろいろ
大事なのはユーザの反応
- 綺麗に作ることも大事だけどその次
コンポーネントはエンジニアリングの概念

デザインのツール

コンポーネント指向のデザインツールはあまり流行ってなかった
- 最近は出てきた
- みんな慣れてないだけ
手段が進化したので手法も変わる
- まだまだツールのサポートが足りない
- 時間が解決するところもあるだろう
コンポーネント指向でAtomicDesign
- Cしか知らない人にSpringBootでアプリ作れと言ってるようなもの

Design Ops

デザインの仕事に集中できるように
デザインプロセスをサポートする仕組み組織を作る
- エンジニアがデザインツールを覚えてコンポーネント化の見本を作る
- Vue Designerのようなツール
- デザインした側でエンジニアがコンポーネントを作り出す

まとめ

デザイナーがデザインに専念できる環境を作ろう
やり方はまだみんな手探り
エンジニアがそれをサポートしよう

note のフロントエンドを Nuxt.js で再構築した話

福井烈さん

Nuxt移行のモチベーション

2013年にAngularJSで実装開始した
- UI複雑
  - 2way-binding

現状の課題

初期表示の遅さ
技術的制約
- AngularJSはSSRサポートしてない
- Railsに乗ったフロントエンド
技術的負債
- コーディング規約
- コンポーネント設計

技術選定要件

要件
- SSR
- 学習運用コスト
  - デザイナーもコード書く
    - フロントエンド専任がいない
- 開発コミュニティの活発度
Vueがこれらを満たすので採用
さらにNuxtも採用
- SSRが作りやすい
- コードの規約がある
- Webpack等も入ってる

移行計画

ベージ単位で移行
ドックフーディング
一部のページはNuxt版が動いてる
lighthouseのパフォーマンス 3点 -> 41点
- 現状残っている指摘は画像の最適化

技術

コンポーネント設計

Vuex
AtomicDesign
- atomsとmoleculesはvuex参照禁止
- organismsはvuex参照可
Storybook
- Nuxtとの設定互換がつらい
  - v4で改善

ユニバーサルJS

SSRするから対応必須
サーバサイドからはwindowやdocumentが見えないから改修しないといけない
- ライブラリが使ってるとどうしようもない
- jsdomを使って対応

ファイルサイズの圧縮

nuxt build --analyze
highlight.js(コードに色つけるやつ)言語絞ってサイズ削減
moment.jsをday.jsに
lodashやめる

インフラ

当初はEC2 + node + pm2
- Serverless Frameworkに変更
nodeのバージョンがLambdaに依存してしまう

まとめ

URL単位で小さく移行するの有効
- ドックフーディング容易
- 完全移行までの二重メンテは覚悟いる
NuxtはSSR必要なら有用

1年間単体テストを書き続けた現場から送る Vue Component のテスト

土屋和良さん

コンポーネントのテスト書いてますか

UIは変更が多いからテストしない？
- テストがないと意図しない変更が起きないか不安

コンポーネントの何をテストするのか

外部からみた振る舞いをテストする
- 自動テストのターゲットは外から見た振る舞い
input/outputを整理
mount? or shallow?
- 基本的にmount

どうやってコンポーネントをテストするか

Lifecycleのテスト

他のテストよりは優先度低
- 得られる安心感は少なめ

Props/VuexStateのテスト

単純なassert
- どこまで細かくチェックする?
- 文言変わっただけで書き直さないといけないの面倒
SnapshotTest
- DOMのスナップショットをとって次のテストのexpectedにする
- CSSもテストしたい
  - -> VisualTesting
VisualTesting
- SnapshotTestの画像版
- Storybook + reg-suit
reg-suit
- CIのフローに組み込むとこまでサポートしてくれている
  - PRで結果が見えるとか
- PRのレビューが効率化

reg-viz.github.io

User Interactionのテスト

User Interaction
- 入力
- クリック
- スクロール
- D&D
- ....
全部やるのは大変
- 入力、クリックくらいなら簡単
  - そこだけテストしている
簡単なUserInteractionテストは大変じゃない
- 重要なフォームだけでもやっておくといい

まとめ

VisualTestは最高
- 簡単に作れる
- レビュー負荷も下がる

2018-11-01

「React会 #1」に参加してきました

勉強会メモ

React会 #1に参加してきました。

react-kai.connpass.com

React Hooksで盛り上がってる中でのReactのイベントということで、最新情報をキャッチアップできる勉強会でした。
React会は今後React meetupと合流するということで、Reactコミュニティの盛り上がりにも期待してます。

タイトル	登壇者
typescript-fsaに頼らないReact/Redux	camcam_lemonさん
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察	大岡由佳@oukayukaさん
ReactNative(Expo) + Firebaseを使って爆速でアプリを作る	はがさん
React Hooksで遊ぼう	yamatatsuさん
Context APIを使ったライブラリを作った	dai_shiさん

typescript-fsaに頼らないReact/Redux

camcam_lemonさん

Component

Stateful Component

interfaceかtypeでprops/stateを宣言

Stateless Functional Component

React.SFC<P>で型付ける

Container

maoStateToProps
mapDispatchToProps
- reduxのDispatchで型つける

Action

actionのtypeプロパティにas typeof xxx
typeをただの文字列じゃなくて型として扱える

Reducer

Conditional typeのReturnTypeを使ってActionを型定義
switch文で該当するものがなければdefaultでnever型で拾う
- 受け取るActionが一つの時はnever使えない
- if使う

まとめ

tsの機能だけでいい感じに型をつけることができる
ActionｔReducerのテンプレを崩さずに書けるのがいい

Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察

大岡由佳@oukayukaさん

技術書店で本出した

Reactの本
RecomposeとHOCの話も書いてた
その数日後ReactConfでReact Hooks発表
Recoposeは開発終了今後はReact Hooksでとのアナウンス
嘆いてたらDan先生からDMが来た

Recomposeとは

関数コンポーネントやHOCのためのReactユーティリティ
関数コンポーネントにローカルステートやライフサイクルメソッドが追加される
Reduxのconnectなんかがそれ

なぜRecomposeは開発をとめるのか

Recomposeの作者がfacebookにジョインしてHooksを作った
- withStateとuseStateがそっくり

これからどうなるか

ReactHooks反響大きすぎて後戻りすることはない
HOC, Render Propsもフェードアウトしていくのではないか
classコンポーネントもそのうち非推奨になりそう
Reduxがなくなることはないのでは
- connectがuseReduxのようなインターフェースになるのでは

github.com

ReactNative(Expo) + Firebaseを使って爆速でアプリを作る

はがさん(FACTBASE)

docs.google.com

サンプルアプリ

Expo

ReactNative開発をWeb開発に近づけるプラットフォーム兼ライブラリ
アプリのビルドをせずとも実機で動作確認できる

ReactNativeのライブラリ

ReactNavigation
- ナビゲーションライブラリ
NativeBase
- UIライブラリ
react-native-swiper
- 画像のスワイプ簡単に作れる
react-native-gifted-chat
- チャット風UIを簡単に作れる

まとめ

OSSを活用すると爆速で作れる
Expo使うことでビルドで実機とPCを繋がなくてよかった

React Hooksで遊ぼう

yamatatsuさん

React Hooks

三行で言うと
- Functional Componentで状態を持てる
- Functional Componentでupdate系のイベントを扱える
- Consumer無しでContextを使えるとかとか

useState

Functional Componentでstate持てる

useReducer

reducerっぽく使えるuseState

useCallback

memoKeyが変わらない限り一回しか実行されない
一回だけ走って欲しいやつに使う

useMemo

useCallbackに似てる
関数の戻り値をくれる

uesRef

createRef的な

DidMount

Dan先生曰くSuspenceを待たれよとのこと

Context APIを使ったライブラリを作った

dai_shiさん

ContextAPI

React16.3ではいった
Reduxの代替になるのではと噂に
コンポーネントツリーの階層をジャンプして値を渡すことができる
Providerで値を渡してConsumerで値を受け取る
State管理できるわけではない
npm化した

github.com

React Hooks

React Hooksで世界が変わる
classでしかできなかったことがなくなる
hooks版も作った

github.com

itnext.io

2018-10-31

「Spring Fest 2018」に参加してきました

勉強会メモ

Spring Fest 2018に参加してきました。

springfest2018.springframework.jp

KFCHall	KFCHall Annex	KFCHall 2nd	Room111
KEYNOTE SébastienDeleuze(Pivotal)	-	-	-
決済システムの内製化への旅 ‒ SpringとPCFで作るクラウドネイティブなシステム開発槙俊明(Pivotal) 鈴⽊順也(ソフトバンク・ペイメント・サービス株式会社)	エンタープライズ・マイクロサービスの格⾔⻑⾕川裕⼀(Starlight&Storm/⽇本Springユーザ会)	Spring Data for Apache GeodeでRDBいらずのアプリ開発をしよう！⼭河征紀(ウルシステムズ株式会社)	これからSpringを使う開発者が知っておくべきこと⼟岐孝平(⽇本Springユーザ会スタッフ)
Rakuten Travel and Spring Kalburgi Gajraj(楽天株式会社)	Spring ♥ GCP ー SpringとGCPの素敵な関係福⽥潔(Google)	実際のプロジェクトでSpringアプリをKotlinで開発して得た気づき集⻑澤太郎(Ubie株式会社)	Thymeleafさいしょの⼀歩伊賀敏樹
Knative:Serving your Serverless Java Serviceon Kubernetes the 12-Factor way Kamesh Sampath(Redhat)	Observability with Spring-Based Distributed Systems Thomas Ludwig(楽天株式会社)	AmazonCognito使って認証したい？それならSpring Security使いましょう！内⽴良介(コイニー株式会社⽇本Javaユーザーグループ)	SpringBootで作るRESTful Web Service ⼤野渉(Starlight & Storm/JSUGスタッフ)
Pivotal認定講師が解説！基礎からのOAuth2.0とSpring Security5.1による実装多⽥真敏(株式会社カサレアル)	500+のサーバーで動くLINE Ads PlatformをささえるSpring 渡邉直樹(LINE株式会社)	SpringTools4の機能とその実装岩塚卓弥/堅⽥淳也(NTTソフトウェアイノベーションセンタ)	Spring5でSpring Testのここが変わる平栗勇⼈(株式会社NTTデータ)
Spring Boot with Kotlin, functional configuration and GraalVM SébastienDeleuze(Pivotal)	⼤規模⾦融系SaaSを⽀えるSpring〜活⽤の変遷と新時代のアーキテクチャ〜⽝塚裕介(株式会社野村総合研究所)	Spring Data RESTとSpring Cloud Contract ⼩川岳史/⼭﨑⼤(株式会社タグバンガーズ)	Spring BootでHello Worldのその先へ〜ウェブDBプレスのSpring Boot特集で伝えたかったこと＆伝えきれなかったこと～藤野真聡(ソニーネットワークコミュニケーションズ株式会社)
業務で使いたいWebFluxによるReactiveプログラミング⾕本⼼(Acroquest Technology株式会社)	-	Micrometer/Prometheusによる⼤規模システムモニタリング〜ヤフーインターネット広告システムでの導入事例〜池⽥誠(ヤフー株式会社)	Angularを⽤いたデザインスプリント開発と設計⼿法佐川夫美雄(アシラス株式会社)

KEYNOTE - The State of Spring, Java and Kotlin

SébastienDeleuze(Pivotal)

Javaの現状

Java8が広く使われるようになってきた
- 2017/10で75%くらい使われてる
- 残りはほとんど7
- 9はLTSじゃないから少ない
JavaSE Lifecycle
- LTSは3年ごと
  - 次は11その次は17
- 6ヶ月ごとにリリース

Java LTS Version

Java8
- Java8がベースになっていく
- 2023+までサポート
Java11
- 2023+までサポート
Java17
- 2021リリース予定

SpringとJava

v4.3はJava8まで
- EOLは2020/6
v5.0はJava10まで
- EOLは2019/3
v5.1はJava11まで
- EOLは2019/12
v5.2はJava12までサポート

New VM

GraalVM
- High performance polyglot VM

Kotlinの現状

今一番伸びている言語
- stack overflowやgithubのデータより
1.3がつい最近リリース
- コルーチンが目玉
- Kotlin/Nativeがbetaに

Springの現状

SpringFramework5.1

v5.1でJava8と11をサポート
non-LTSはベストエフォート

SpringBoot2.1

v2.1が昨日でた
Java11サポート
3rdパーティライブラリアップグレード
- TomcatとかHibernateとか
Spring Data JDBC Starter
起動時のパフォーマンス改善

Roadmap

SpringFrameworkのv5.2でKotlinのv1.3をベースにする
- コルーチンもサポート
公式ドキュメントにKotlinのサンプルコードも含めるようにする

R2DBC

Reactive SQL SPI
Reactive Streamベース
PostgreSQL driver more to come

Spring Data R2DBC

Spring Data JDBCに似てるけどこっちはReactive
DatabaseClient functional API

GraalVM

SpringBootが一瞬で起動するデモ
- 0.006s?

RSocket

ネットワークをReactiveにする
facebookを中心に4社で作ってる
モデル
- request response
- fire and forget
- request - stream
- channel
クライアント
- JavaでもJSでもKotlinでもC++でも
SpringFramework v5.2から

Spring Fu

SpringをFunctionalに書く
Faster and Lighter
Kofu
- KotlinによるSpring Fuのconfiguration
- Kotlin DSL
Jafu
- JavaによるSpring Fuのconfiguration

まとめ

パフォーマンスを上げることとReactiveに力を入れてる

決済システムの内製化への旅 ‒ SpringとPCFで作るクラウドネイティブなシステム開発

槙俊明(Pivotal)
鈴⽊順也(ソフトバンク・ペイメント・サービス株式会社)

決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1 from Toshiaki Maki

内製化に至る過程

2016

課題
- 開発は全てベンダ任せ
- 開発環境も整ってない
- 手作業によるミスが起きる
解決策
- 改善プロジェクト
- SpringBoot, Selenium
- github入れたり
- エンジニアが3人入社

2017

課題
- サービスの状況を把握できない
- 古いアーキテクチャで開発コスト増
解決策
- 監視ツール導入
- FWはSpringで統一
- jenkins, nexus, sonar

2018

決済システムの内製スタート
- オンライン決済サービス
- 加盟店にAPIを公開
- 複数の決済手段で決済
- 加盟店(8000件) -> 決済システム -> 決済機関(40件)
求められてたこと
- スピード感
- 継続的な改善
- 監視が容易で障害に強い
- -> ベンダーに頼ると実現できないので内製で
PCF上に構築することに
- 槙さんがサポート

なぜPCF

PCF
- Pivotal Container Service
  - Kubernetes
- Pivotal Application Service
  - Cloud Foundry
- Pivotal Function Service
  - Knative, riffがベース
この事例ではPvotal Application Serviceを採用
- 3つのうちどれが良いかはチーム構成ややりたいことによる
チーム体制
- ops2名 - PCFの面倒見る
- dev3名 - アプリ作る
12factorに従って作ればPCFを意識しなくてもPCFで動く
PaaS vs Kube
- 開発者視点で
  - いろんなことをやりたくなかった

技術の話

全体アーキテクチャ

CI周り
- Github
- Nexus
- Concourse
PAS
RabbitMQ
監視周り
- Prometheus
- Grafana
ログ周り
- Logstash
- Elasticserch
- Kibana
Dev環境とProd環境を用意
- PAS以外のコンポーネントはBOSHで管理

アプリのアーキテクチャ

マイクロサービスで作ってる
- API Gateway
  - Spring Cloud Gayteway
- ServiceA, B, C
  - 決済機関単位で？作成
- Hystrix入れてサーキットブレーカも
  - 障害があった時に関係ない決済機関も使えなくなる訳にはいかない
- 決済機関から加盟店への通知はRabbitMQで非同期に連携
  - Spring Cloud Stream
  - Notification Gateway
  - 通知失敗したらDeadLetterQueとして返ってくるので再送する
PCFによるAutoscaler
- 急な負荷に対応する
- スケールに関してアプリ側が何か意識する必要はない
12factor
- 環境に依存する設定項目は環境変数に
- ログはファイルではなく標準出力に
  - 絶対にロストしてはいけないデータはDBへ

CI/CD

Concouseで動かす
- slackに通知
- github enterpriseと連携
- pushする -> JUnit実行 -> Sonarに結果送る -> nexusへ配置 -> 開発環境へリリース
  - 本番では自動でバージョンのインクリメントとかも
  - 槙さん謹製の構成(どこかで見たことあるような構成)
負荷テスト、E2Eテストも自動で
- JMeterで負荷テスト
  - 開発環境で毎日
- E2Eテスト
Javaの複数バージョン対応
- 複数のバージョンでのテストをConcourseで同時に実行
- docker使ってるので複数バージョン並列実行を簡単にできる

Observability

Observability
- Tracing
- Metrics
- Logging
Zipkin使ってる
- MySQLのJDBCの処理も見れるようになる
  - Brave MySQL
Grafanaダッシュボードでメトリクス監視
- BOSHで入れるとダッシュボードやアラートがデフォルトで入ってる
- micrometerの依存追加するだけで使える
Kibanaでログを見てる

実際のプロジェクトでSpringアプリをKotlinで開発して得た気づき集

⻑澤太郎(Ubie株式会社)
jkug代表

KotlinでSpringを始める

Spring InitializrでKotlinを選べるようになってる

クラスにつけるアノテーション

Kotlinのクラスはデフォルトfinal
- 継承したいならopenってつける必要がある
- @Serviceするならopenしないといけない
- Kotlin公式のallopenプラグイン
  - 指定したアノテーションをつけるとopenしたことにしてくれる
- Kotlin公式のkotlin-springプラグイン
  - @Service等々は自動でopenしてくれる
  - SpringInitializrで作れば入ってる
アノテーションの解析ないから速い

バリデーション

これだとダメ

class Xxx (
  @NotNull val age: Int,
  @NotBlank val name: String
)

Javaを意識してこう書かないといけない

class Xxx (
  @field:@NotNull val age: Int,
  @field:@NotBlank val name: String
)

デフォルトではもともとnull許容しないので注意
- ?つけるとnull許容型

class Xxx (
  @field:@NotNull val age: Int?,
  @field:@NotBlank val name: String
)

WebFluxとコルーチン

ReactorはAPIとか覚えることたくさん
Reactorとコルーチンを組み合わせると書きやすい
Reactorの世界とKotlinの世界を処理の途中でいったりきたりできる
- async/awaitとか使って書く

アノテーションをやめる

アノテーションは黒魔術
Spring5からアノテーションなしでもできる
mainにKotlin DSLで書く
- 手動でbeanに登録とか
- @GetMappingとかも移せるからroutingもそっちに

テスト

Spring Test - WebTestClient
AssertJ
MockK
DbSetup-kotlin

JUnit5

@Nestedでグルーピングしやすくなった
assertThrows<MyException>って感じで型引数渡せる

AssertJ

.isNotNullした後でもnullableな値だと?つけないといけない

assertThat(got).isNotNull
assertThat(got?.name).isEqualTo('test')

そもそもデータクラスで比較したほうがエラーのときの情報量が豊富でみやすい

MockK

コルーチンは通常特定の場合じゃないと呼び出せない
- けど、呼び出せるような仕組みがある
mock生成は重いから繰り返さないように注意
- 各テストの前にclearMokcksすればいい

周辺ツール

コーディングガイドライン

ktlint
- eslint的な
- Linter 兼 formatter
- gradleプラグインある
シンプルさを保つ
- Kotlinの思想として簡潔さではなく読みやすさ重視

まとめ

Kotlinでも普通にSpringアプリ作れる
Javaとの違い意識しないと行けない部分はまだある
Reactorとコルーチン相性良し
アノテーションやめてKotlin DSL
データクラスでテスト結果読みやすく
モックはmockKがよい

Observability with Spring-Based Distributed Systems

Thomas Ludwig(楽天株式会社)

Observability概要

Observabilityとは

ツールと手段を組み合わせてデータとコンテキストから気づきを得る
単純なモニタリングだけでなくもっと深いところまで
- システムが大きくなると必ずどこかで障害が起きる
最近Observability流行ってるらしい

なぜObservability

UXを改善するため
本番に似せた環境があっても全てが同じではない
- ユーザも違う
自身をもって運用するならサービスの状態を把握しないといけない
MTTR(mean time to recovery)が重要
- 障害が起きた時にどれだけ速く検知して直せるか

分散システム

別のプロセスで並行して処理
複数のプロセスを跨るので難易度が高い
- 全てのプロセスの情報を見ないといけない
スケーリングでそのインスタンスにしかない情報が消えるかも

Observabilityの3要素

3要素かぶってる領域もあれば特化した領域もある
どれか一つだけで全部できるというものではない
- 使い分けるのがベスト

Logging - Events

メッセージを残して後でそれを見つけられるようにする
分散システムだと各サービスがログをはくからどこを見ればいいか複雑
- ログを一箇所に収集して見られるようにしたい
Spring Cloud Sleuth
- ログにIDを振ってくれるのでサービスをまたがってもリクエストの流れを特定することができる
楽天トラベルでは
- Spring Cloud Config
- Travel Auto-configuration
  - 独自ライブラリ
  - セッションIDみたいなものを振って同じユーザが何度もアクセスした時に紐付ける
- ELK
  - Elasticsearch
  - Logstash
  - Kibana

Metrics - Aggregatable

時系列のデータを集計した値
集計した値なのでリクエストが多くてもサイズは変わらない
可視化したい時やトレンドを分析したい時に使う
インスタンスが多いとスケールしない
- 各インスタンスからデータを収集してひとまとめにしたい
Micrometer
- SpringBoot2から入ってる
- SLAがあればその値をセットしてアラート上がるようにとかできる
楽天トラベルでは
- Micrometer
- Prometeus
- Grafana
Alert
- あらゆるサービスにアラート入れると多重アラートが発生してしまう
- ユーザのリクエストを受けるところだけ設定しておくとよい

Tracing - Request scoped

パフォーマンス遅延の原因を調査するために使う
リクエストの流れがどうなっているか見るために使う
Spring Boot Actuator
- トレーシングの情報がとれるエンドポイントを自動で作ってくれる

Destributed Tracing

インスタンスを跨いだトレーシングをしないといけない
一つのリクエストでどのサービスにどれくらい時間がかかったか把握できる必要がある
Zipkin
Soring Cloud Sleuth: spring-cloud-starter-zipkin
楽天トラベルでは
- 全てのデータをzipkinに送ると負荷があるのでサンプリングしてる

Putting It All Together

3要素はそれぞれ連携してる
検知 -> 調査 -> 復旧のサイクルが回せるようになる

500+のサーバーで動くLINE Ads PlatformをささえるSpring

渡邉直樹(LINE株式会社)

500+のサーバーで動く LINE Ads PlatformをささえるSpring from LINE Corporation

LINEのAds Platform

LINEの中に出てる広告
- LINE NEWSとかLINE Blogとか
LINEに広告配信できる唯一のPlatform
MAU7800万人
運用型広告
- リアルタイムに予算やターゲットを変更できる
- 何を表示するかリアルタイムにオークションにかけて選んでる
  - 全て50ms以内にやらないといけない
Real Time Bidding
関係者のニーズを満たす必要がある
- Advertiser
  - ROI
- Media
  - 利益
- Audience
  - UX
指標
- CTR(Click Through Rate)
  - 簡単な数式
- CTRを機械学習で事前に予測する

Spring in LINE Ads Platform

SSP(Supply Side Platform)

メディア側の情報を管理するプラットフォーム
- Real Time Bidding
  - リアルタイムにオークションする
Spring Boot2
CMS側はサーバがKotlinクライアントがNuxt

DSP(Demand Side Platform)

ROIが最大化する広告を選ぶ役割
50ms以内に返さないと広告が表示されない
Goで作ってる
- 50ms満たすため
G1GCでも数十msかかることある
CMS側はサーバがSpringBootクライアントがReact

データの持ち方

広告情報をMySQLに入れてる
- 毎回取りに行くと50msこえちゃう
- 基本はメモリに乗せておく
  - 乗らないようなものはRedis

DMP(Data Management Platform)

広告配信する対象を管理する
広告を出す相手の情報があるとより効果的な広告を選べる
Look-a-like
- 似ているユーザの行動をもとに広告を出す
技術
- SpringBoot
- Kafka
- HBase
- Redis
ユーザの操作の度にイベントを飛ばしてそれを受けたらKafkaに書き込む

Data Pipeline/Analytics Cluster

広告配信に関わるデータを収集し格納するプラットフォーム
hadoop クラスタ
Erasticsearch, kibana

LINEの技術トレンド

Kafka

高速で安定したStreaming Platform
queueやjob schedulerとしても利用
各サービスはKafkaに書き込むまでが責務
一度書き込んでおけば誰でも取れる
spring-kafkaあるけど公式のkafka_clientおすすめ
- springの方は自由にバージョン変えられない

SpringBoot2

Reactor
- Reactive Streams
- Non-blocking
- back pressure
  - Kafka使ってるからあんまり使ってない
- Lettuce5
  - Reactive API
kafka
actuator + micrometer
- 使いやすい
- それまではprometeusにデータ入れてGrafanaで見てた

LINEの開発体制

データ
- 2 Country
  - 日本と韓国
- 60 Developer
- 100 Co-worker
コミュニケーション
- 通訳挟んでTV会議
- 翻訳bot入れてLINEで
- 気軽に出張も

今後

機械学習とか
ARとか

Spring BootでHello Worldのその先へ〜ウェブDBプレスのSpring Boot特集で伝えたかったこと＆伝えきれなかったこと～

藤野真聡(ソニーネットワークコミュニケーションズ株式会社)

Web+DB Pressに寄稿した

2018/8号
内容
- SpringBootの概要
- HelloWorldの一歩先
伝えきれなかったこと
- 変化に強いWebアプリの作り方
- 寄稿したのはプロトタイプレベルだった
今回のない湯
- ミドルウェアやDBと連携したアプリ開発
- マイクロサービス化

バージョン番号の表示

qiitaのAPIを叩くアプリ
qiitaのAPIのバージョンを返すエンドポイントを作る?
pom.xmlに定義しているバージョン情報に紐づくようapplication.propertiesに定義しておく
それをJavaから呼ぶ

モジュール分割

プロジェクトフォルダ内に子プロジェクトのフォルダを作る
- 親プロジェクトも各子プロジェクトもpom.xmlを持つ

ActiveMQ

JMS(Java Messaging Service)を実装したメッセージングミドルウェア
メッセージをqueueで非同期に処理する

MongoDB

ドキュメント指向のDB

Angularを⽤いたデザインスプリント開発と設計⼿法

佐川夫美雄(アシラス株式会社)

Web Application Design

WebアプリとWebサイト

Webサイト
- 一方向
Webアプリ
- 双方向
デザイナーはWebサイト的なものを作る傾向?
- インタラクティブなUXまで考慮できる人は少ない

Webアプリ

html/css/js
htmlとCSSはスコープがグローバル
- モジュール分割もできない

よいプログラム

可読性
テスト
再利用性
リファクタリング

コンポーネント

よいプログラムにするにはコンポーネントを作って組み合わせるとよい
Atmic Design
大きなものを作ってそこからパーツを抽出しそれらを組み合わせてページをつくる

Design Sprint

デザインカンプ(画面設計書)を作るのが目標
WebのUIは細かいとこまで柔軟に作れてしまう
イラレで書いたのをXDに貼り付けたレベルでユーザに評価してもらう
- これをスプリントで回す

Web Application Implementation

WebComponents

Custom Elements
- 自分でHTMLのタグを作れる
Shadow DOM
- CSSにスコープを作れる
HTML Template
- 独立したHTMLかたまりを定義できる
(HTML Import) -> 仕様廃止ES Modulesへ
- テンプレート化されたHTMLをimportできる

JS Frameworkの比較

ScopedなCSSを作れるFWを使うべき
3大SPAFW
- Angular
  - 標準機能でShadowDOM使える
  - まあ全部込みがAngularの特徴だし・・
- Vue
  - scopedなCSSは標準でできる
- React
  - 標準機能ではscopedなCSSは使えない？？？
  - styled-components使えばできる
  - 本体を薄くする戦略だし・・・
Web標準のShadowDOMにこだわっているのか？
だとしても現状polyfill必須だしな

DevOps for Frontend

デザインしたものをすぐに確認してフィードバックできるサイクル
Github Enterpriseでプロジェクト管理リソース管理
クラウドでさくっと環境作ってそこにあげる
- デモはすぐ見れる
Swagger使うとAngularの通信周り自分で書かなくていい
- Swagger Codegenで生成できる

まとめ

Webアプリ開発はコンポーネント指向で
デザイナーとエンジニア協力して開発効率をあげる

2018-10-30

「Node学園 32時限目」に参加してきました

勉強会メモ

Node学園に参加してきました。

nodejs.connpass.com

今回は、先日のReactConfから話題沸騰中のReact Hooksについてmizchiさんが解説してくれるということで、とても豪華なイベントでした。
来月のNodeFest2018も楽しみです。

タイトル	登壇者
Node v11 and NodeFest introduction	yosuke_furukawa
Node.jsで現実世界の”もの”を動かす話	9wick
React Hooks	mizchi

Node v11 and NodeFest introduction

yosuke_furukawaさん

NodeFest2018

11/23,24に開催

nodefest.jp

ロゴが変わった

Day1: Conference

注目のスピーカー

Anna
- Workerを作った人
Rachel
- Webの中のメディア系のところの話
- WebGLとかWeb Audioとか
Daniel
- TC39の中の人
- Class Propertyとか
- 一日一部屋貸し切り
  - 未知数枠
  - 大物たちが来てディスカッション？
Colin
- libuvの中の人
飯塚さん
- tensorflow.jsの人
- Google

Day2: Interactive Sessions

NodeとJSのディスカッション
- 良いとこ悪いとこ改善点
- 開発者と利用者でディスカッションできる
Code and Learn
- nodeにコミットする
Handson
- SPAとか
- 海外から来る講師も(未知数)

Node.js v10/v11情報

v11はそんなにたいした変更はない
v10.0.0 ~ v10.12.0
- http2
- ESM
- Worker追加
v11
- v8のversion7対応
- url moduleがdeprecated
- TextEncoder/TextDecoderがglobalになった
- queueMicrotask APIがexperimental
  - Promiseにタスクを積む

Stream/Promiseの親和性改善

for await ofでstreamを逐次処理
v10からStreamに追加されたfinished, pipeline APIがPromiseと親和性高い

for await of

for await (const k of readable) {
  data += k;
}

Stream finished API

エラー成功にかかわらず終了したらcallbackを呼べるようになった
callbackをPromiseにしてしまえばasync/awaitで扱える

Stream Pipeline API

before

rs.on('error', errorHandler).pipe(ws).on('error', errorHandler)

after

pipeline(rs, ws, (err) => {
  if(err) {
    // ...
  }
}

Node.jsで現実世界の”もの”を動かす話

9wickさん

Nodeでできること広がってる

CLI: 一次元
Webサーバ: 二次元
ものを動かす: 三次元

ものを動かせると何ができるか

現実に鑑賞できる
input
- 音・温度・傾き・土壌・空気
output
- 光・音・モーター・電光掲示板・ロボット

Nodeで動かせるデバイス

rasberry pi

小さいPC
- node動く
IO端子がついてる

arduino

PCでなくマイコン
- node動かない
  - PCで操作する
有線接続
IO端子

obniz

マイコン？
- node動かない
  - サーバで操作する
  - インターネット経由で
無線接続
IO端子

DEMO

clovaでラジコン?を動かす

React Hooks

mizchiさん
https://gist.github.com/mizchi/b7346bf448eb826a02e2176800ab40a5

React Hooks

SFCでstateを使う
- Class使わなくても状態を持てる
Dan先生
- Reduxの作者
- Reactのコアチーム

If I had to condense my talk into a single frame, it would be this one. Hooks let you define your own abstractions (like useWindowWidth in this example) that “feel” as natural to use as React’s built-in features. pic.twitter.com/hm4RlsFNgd
— Dan Abramov (@dan_abramov) 2018年10月28日

reactjs.org

ライフサイクルメソッドも使える
- 毎回走るからComponentDidMount相当のもの作るのは大変
Vueでも同じものを作ろうという動きが・・・？
- Evan Youがリツイートしてた
recomposeもうメンテされなくなる？
- 今後はhooksで

今後

HOCは推奨されなくなる
React.Component -> Function Component

2018-10-24

「We Are JavaScripters! @25th」に参加してきました

勉強会メモ

We Are JavaScripters!に参加してきました。

wajs.connpass.com

WeJSは来月で2周年とのことです！

タイトル	発表者
実践AST FlowtypeからTypeScriptへの移行	@れこ
Node.jsとイベントループ	@hiroppy
JSでアニメーションに入門したい	@atsuco
ServerlessでIsomorphicにGohanをKetteiしてみた	@Seri-Nazu
スポンサーLT: @ブラウザから大容量ファイルを気兼ねなく送る話	Media Do
Google Chromeの履歴情報を抜き出す	@camcam_lemon
TypeScriptのトランスパイルTips	@sakito
javascriptの参照と値	@brn0227
高階関数の実践: パーサーコンビネータをつくってみた	@chikoski

実践AST FlowtypeからTypeScriptへの移行

@れこさん(CureApp)

FlowからTypeScripに移行中

中身はmonorepo
量が多いからASTで自動的に変換

FlowとTSの違い

Flowは$から始まる特殊な型
TSはkeyof
複雑なことしてるほど違いがある

Flow->TS

FlowをAST変換
babelのコマンドでできる
全ての構文を漏れなくマッピングするのは難しい

AST

Abstract Syntax Tree
- 抽象構文木
ASTのコードを書き換えるだけでFlow->TSへ変換させることができる
PrettierなんかもASTを活用してr

まとめ

AST活用してTS変換自動化できた
ベースとなる実装があればなんとかなる

Node.jsとイベントループ

@hiroppyさん(Dwango, Mercari)

イベントループとは

イベントループはメインスレッドで動いてる
- ブラウザのJSとnodeで仕組みは違う
libuv
- プラットフォームの違いを吸収してくれるやつ
- 非同期IO

仕組み

イベントループのフェーズ
- timers
- pending callbacks
- idle, prepare
- poll
- check
- close callbacks
idle, prepare以外は設定されたcallbackが実行される
nextTickが一番最初に処理される

まとめ

Nodejsはlibvuを使ってる
6つのphaseと2つのtick

JSでアニメーションに入門したい

@atsucoさん

アニメーションとは

時間経過に伴いある値を0~100%の間で変化させること
始点、変化量、時間で表される

Webでアニメーション

CSSアニメーション
- 宣言型アニメーション
- 軽い簡単 -途中で止めたりとかは苦手
JSアニメーション
- 命令形アニメーション
- 表現力豊か

アニメーションができるJS

$.animation()
- いにしえ
Velocity.js
- 軽い$.animationと互換
anime.js
- 軽い$.animationと互換なし
Web Animations API
- Web標準

jsでアニメーション重い？

変化させるプロパティを考える
クリティカルレンダリングパス
- レイアウト
  - 他の要素も影響受けるので再計算されて重い
- ペイント
  - 他の要素に影響しないので軽い
- コンポジット
  - opacityは再描画を誘発しない
setTimeout()やsetImterval()ではなくrequestAnimationFrame()を使ったほうがよい
- anime.jsはrequestAnimationFrameを使ってる

ServerlessでIsomorphicにGohanをKetteiしてみた

@Seri-Nazuさん(Media DO)

お昼何食べるか迷うじゃないですか

作ってみた
ぐるなびの無料API
LINE Bot
AWS Lambda

良かったところ

Lambdaすごい
- サーバのこと何も考えなくていい
API Gatewayすごい
- CORSの設定をGUIで一発

まとめ

サーバを一秒も考えずに作れた
Lambdaガンガン使っていきたい

スポンサーLT: @ブラウザから大容量ファイルを気兼ねなく送る話

泉さん(Media Do)

メディアデュとは

電子書籍の中継
単行本とかだと200-300枚の画像ファイル
画像はFTPで、メタ情報はメールで受け取ってる
- 出版業界まだアナログ
- Webアプリ化したい
多くの画像ファイルをどう送るか
- S3に送ってしまう
- サーバ負荷気にしなくていい
CognitoとS3を使った

Google Chromeの履歴情報を抜き出す

@camcam_lemonさん(日本事務器)

ブラウザ何使ってますか？

Chromeはいろいろな情報が記録される

History

実態はDBファイル
複数アカウント使い分けても一つのファイル
urlsテーブルに閲覧履歴が記録される

Webアプリと連携

Historyの情報をWebアプリと連携
nodeでHistoryを取得
Chromeがファイルを掴んでるからコピーしてから操作
データ量めちゃくちゃ多いからそのまま出すと落ちる

TypeScriptのトランスパイルTips

@sakitoさん(yahoo)

ts-loader

webpackでTSをトランスパイルする時に使う
高速化
- transpileOnlyをtrueにする
- HappuPackを使うとトランスパイルと型チェックを並列化できる

awesome-typescript-loader

webpackでTSをトランスパイルする時に使う
ts-loaderよりts+babelがやりやすい

babelでtsをトランスパイル

babelのコンパイラでtsをトランスパイルできる
- 型チェックは行われない
@babel/preset-typescript
一部まだ未対応なので注意

まとめ

ts-loader or awesome-typescript-loaderがベター
babelを使う時はデメリットを理解して使う
- 型チェックは別でやること

javascriptの参照と値

@brn0227さん(Cyberagent)

参照と値

オブジェクトごとにどちらを使うか決まってる
参照
- Objectを継承したもの
- 参照は同じものを見続ける
値
- string, number, boolean

MutableとImmutable

変更できる値とできない値がある
string, number, booleanは変更できない
- stringは内部的には参照渡ししてる

高階関数の実践: パーサーコンビネータをつくってみた

@chikoskiさん

高階関数

関数を扱う関数
S式
- 木の書き方の一種
- (+ 1 2 (+ 3 4 5) (- 4 3 ) (/ 4 2))
AST
- Abstract Syntax Tree

まとめ

関数は部品
BNF読めると便利
単機能を組み合わせて複雑な機能を作ってくといい

2018-10-21

「MANABIYA #2 - day3」に参加してきました

勉強会メモ

MANABIYA #2に参加してきました。

manabiya2.peatix.com

10/19-21まで3日間開催されるイベントの3日目の参加レポートです。
day2のレポートははこちらに書いています。

時間	タイトル
0限目 (11:20 - 11:30)	【3-0】オープニング
1限目 (11:30 - 12:10)	【3-1】IoT × AI
2限目 (12:30 - 13:10)	【3-2】Web × モバイル
3限目 (13:30 - 14:10)	【3-3】Special Session：リクルートテクノロジーズ
4限目 (14:30 - 15:10)	【3-4】プログラミング × ブロックチェーン
5限目 (15:30 - 16:10)	【3-5】IoT × セキュリティ
6限目 (16:30 - 17:10)	【3-6】Special Session：キスモ
7限目 (17:30 - 18:10)	【3-7】インフラ × AI
8限目 (18:30 - 19:10)	【3-8】IoT × ブロックチェーン
放課後 (19:30～21:00)	懇親会

【3-1】IoT × AI

登壇者

IoT
- 菅原のびすけさん(@n0bisuke)
- 中村晃一さん(@9_ties)
AI
- 五木田和也さん(@kazoo04)
- 中原啓貴さん

議題

IoTで使うようなコンパクトなコンピューターの中でAIを実装するのと、外(クラウドなど)で実装するのでは、それぞれどんなものを作るのに向いてるのか？
各実例としてはどのようなものがあるのか？
コンパクトなコンピューターの中でAIを実装するには、どんなライブラリ等を使えばいいのか？
最先端の研究事情

エッジでやるかクラウドでやるか

画像認識の場合全部クラウドに送るのはない
- 次々送るとコストが大きすぎる
- プライバシー的にもよくない
画像とか音声はエッジで処理してからクラウドに送るのがいい

【3-2】Web × モバイル

登壇者

モバイル
- 七島偉之さん(@jollyjoester)
- 岸川克己さん(@k_katsumi)
Web
- 古川陽介さん(@yosuke_furukawa)
- 宇都宮佑亮さん(@uskay)

議題

サービスやシステムを作る際、Webアプリとモバイルアプリ、それぞれでは一体何がどう違ってくるのか？
Webとモバイル、どう棲み分けるべきか？何をWebでつくり、何をモバイルでつくるべきなのか？
今後、Webとモバイルを統合していく方向で考えると、どのようなことが困るのか？また、どう作るのがベストなのか？

モバイルとWebの違い

配布の手間の違い
- ストアからインストールしないといけない
- リンクにアクセスすればすぐに使える
  - ハイパーリンクの強さ
アプリでしかできないこと
- デバイス機能へのアクセスのしやすさ
- Webも頑張ってるけど
モバイルとWebのUXの違い
- Webの方がもっさりするとか
Webの世界もレスポンスには厳しくなってる
- RAILモデル
- Lighthouse

developers.google.com

モバイルでもLighthouseみたいなのあるのか？
- IDEの機能でできる
モバイルのCI
- AndroidだとCIでビルドとかやりやすい
- iOSはMacじゃないと
パフォーマンスバジェット

html5experts.jp

モバイルはUIのコンポーネントが標準化されてる
- ブラウザはデフォルトのボタンそのまま使うことなんてない
- submitの動きもそのまま使うことなくてpreventDefaultする
storyboardのようなものWebでもないのか
- そういうライブラリはある
- Webはオープンだからみんなで作る(googleとかが用意してくれるの嬉しいけど)
- https://learnreact.design/framerx-react/
iOSはアプリとWebに線を引いてる感じでAndrodはそうじゃないように見える
- MaterialDesignはアプリもWebも対応
- ServiceWorker対応のスピード感とか
課金について
- 価値を感じないと課金してくれない時代
- インストールは無料にしないと
- +αで課金してもらう
アプリはイニシャルキャッシュがあるWeb
- インストール時にキャッシュをとってるだけと受け取れば
ReactNativeとかFlutterはどうか？
- 単純ならいいけど結局ネイティブしらないとつらくなる
- Swift/Kotlinを学ぶことのハードルを高く持ち過ぎなんじゃないか
AMP as PWA
- AMPをSPAFWと同じレイヤーで見るといいかも
Webで画像の加工

developers.google.com

2018-10-20

「MANABIYA #2 - day2」に参加してきました

勉強会メモ

MANABIYA #2に参加してきました。

manabiya2.peatix.com

10/19-21まで3日間開催されるイベントの2日目の参加レポートです。
このイベントは以下の2つの特徴がありました。
- 全てパネルディスカッション形式
- 2つの分野のプロフェッショナルが同時に登壇しそれらを組み合わせることがテーマ
私はWebエンジニアですが普段の勉強会では深入りされないようなところまで聞けて勉強になりました。
- たとえばアプリ開発の効率化についてAIの専門家が、それくらいなら近い将来できるようになる等即答してくれたり
あとは、ディスカッション形式ということで各分野の先駆者の思いをふんだんに聞くことができたのも良かったです。

時間	タイトル
0限目 (11:20 - 11:30)	【2-0】オープニング
1限目 (11:30 - 12:10)	【2-1】Web × インフラ
2限目 (12:30 - 13:10)	【2-2】モバイル × XR
3限目 (13:30 - 14:10)	【2-3】Web × AI
4限目 (14:30 - 15:10)	【2-4】Special Session：Datadog
5限目 (15:30 - 16:10)	【2-5】XR × AI
6限目 (16:30 - 17:10)	【2-6】プログラミング × インフラ
7限目 (17:30 - 18:10)	【2-7】Special Session：ジーズアカデミーTOKYO
8限目 (18:30 - 19:10)	【2-8】Web × XR
9限目 (19:30 - 20:10)	【2-9】モバイル × AI
10限目 (20:30 - 21:10)	【2-10】プログラミング × Web
放課後 (21:30 - 21:40)	クロージング

以下ディスカッションのメモです。Web以外は素人なので正確でないところもあるかもしれません。

【2-1】Web × インフラ

登壇者

Web
- 古川陽介さん(@yosuke_furukawa)
- 森久太郎さん(@qsona)
インフラ
- 池添正隆さん
- 田中邦裕さん(@kunihirotanaka)
- 長尾俊さん(@shun_metal)

議題

レイヤーの違う人/チームはどのように連携をとるのがいいのか？各現場ではどのような工夫をしているのか？
コンウェイの法則があるが、各現場ではどのような組織構造にし、どのようなコミュニケーションフローをとっているのか？
フロント、インフラの人たちがそれぞれ歩み寄るにはどうしていくべきか？

BFF

Backends for Frontends
- フロントエンドのためのサーバ
- 誰が面倒見る？
- 組織構造にも関わってくる
docker使う
フロントエンドはビルド周りがすぐ変わる
- なんで変わってるのかちゃんと共有すれば理解し合える

https

https everywhere
Let's encrypt
- 自動で更新してくれるのがいい
広告業界はhttpsでないと配信できなくなってる
- mixed contentになる心配はない
- httpsしか対応しないというGoogoleからの圧力
ハードウェアアクセラレーターを使っていると新しいWebの仕様に対応できない
内部の通信までhttpsにするか
- そこまでできた方がセキュアではある
- でもそこまで考えられてない現場の方が多そう

フォールトトレランス

カオスエンジニアリング
- 本番のサーバをあえて落としてみる
- それでもうまくいくことを確かめる
バックアップしてるけどリストアちゃんとできるか

【2-2】モバイル × XR

登壇者

XR
- 比留間和也さん(@edo_m18)
- 西川美優さん
- 福田浩士さん(@okomesan)
- 森本俊亨さん(@ok_totti)
モバイル
- 七島偉之さん(@jollyjoester)

議題

ざっとしたVR・ARの現在の情勢おさらい
XRモバイルアプリの最前線では、どのようなアプリが出現しているのか？
スタンドアローン版も目立ってきている中で、そうでないものとどう棲み分けていくのか？
モバイルでのXRアプリ開発には、どのような技術を使うのがベストか？
HMD(ヘッドマウントディスプレイ)もコントローラーも6DoFとなるものの登場も予定されているが、それによりXRはどう変化するのか？

AR

リアルタイムに遠くにいながら落書きを共有できるサービスとか
空に絵が書けるとか
ARの方が技術詳しくない人にもわかりやすいコンテンツが多い
- ポケモンGOがARの筆頭
今は若い層が多く使われてる
ARだと思わないで使われてるのも多い
- snowとか

モバイル

インカメラのAR
アウトカメラのAR
スマホにどんなセンサーがあるか
ARKitは空間を認識するだけ
- コンテキストを理解して何を出すか考えないといけない
- そうしないと継続して使われない

ARの活用

ARが当たり前になるとあらゆる産業に影響を与える
体のあらゆるところにセンサーつけて動きをトラッキング
- それらのコントローラとしてスマホ
ARグラスいつくる
- 世界をだいぶ待たせてる
- いろんな課題
スマホ -> HMD -> ARグラス

【2-3】Web × AI

登壇者

Web
- 古川陽介さん(@yosuke_furukawa)
- 倉見洋輔さん(@quramy)
AI
- 五木田和也さん(@kazoo04)
- 廣瀬一海さん(@kazumihirose)
- 横井羽衣子さん

議題

Tensorflow.jsがあるが、なぜあまり現場で使われないのか？Tensorflow.jsは今後はどう展開されていくのか？
AIの活用で、Webプロダクトにおけるユーザー体験を向上させるようなことは何かできないのか？
AI関連のWebプロダクトを開発するときに気をつけなければならないことは？

WebパフォーマンスとAI

Webには光の速度の壁がある
- 予測して先読みでそれを超えられないか
SPAはビルドしてバンドルするのが必須
- どういうサイズでバンドルするか
タップしたら認識するんじゃなくて加速度検知して読み込みを始める
- dev.toの例
- GoogleMapは下にスクロールしてると、次も下だろって先読みする
  - そいういことを普通のWebでもできないか
ゲームとかの方が進んでる

AIを活用したプログラミングの効率化

マイクロソフトのAI lab
- ここにいろいろある

www.ailab.microsoft.com

手書きの画面をHTML化

sketch2code.azurewebsites.net

github.com

github上のコードを学習し悪い書き方を指摘したりコード補完したり
- VisualStudioのプラグインある

visualstudio.microsoft.com

www.publickey1.jp

被写体選択
- 背景を切り取る
- Adobeの人工知能「Adobe Sensei」
  - 裏側はAzureのAI

stand-4u.com

職員室(本編の後の個別ディスカッション)

いろはす問題
- 特徴がなさすぎていろはすを判別するのが難しい
- 独自でボトルの形状とかを考えてモデルを作ったらうまくいっている
  - 特徴点が少ないものは自分でモデル作ったほうがいい
モバイルでAIを動かす
- デモであったMSのサービスだとTensorflowでエクスポートできる
  - Tensorflow.js使えばすぐに動かせる
- サイズの大きさが課題
- 圧縮したら数十MBとか数百KBまで減らすことはできる
  - ただし精度がさがってしまう
- 5Gが来たら重いものはサーバ側に戻る時代も来るかも
AIが判断する根拠をどうやって説明するのか
- 自分がバナナをバナナと判断するロジックを説明できるかというとできない
  - 人間の脳がベースだからそれと同じ
- モデルのバースとなっているのは世の中にあるデータ
  - AIの判断が性差別とかするのは世の中のデータを映している

【2-6】プログラミング × インフラ

登壇者

プログラミング
- 清水智公さん(@chikoski)
インフラ
- 田中邦裕さん(@kunihirotanaka)
- 仲山昌宏さん(@nekoruri)
- 松本亮介さん(@matsumotory)

議題

IaC(Infra as Code)という言葉がよく出てくる「DevOps」や「SRE」とは、それぞれ一旦何なのか？どう違うのか？
SRE / DevOpsは現場では実際どのように行われているのか？ハマりポイントはあるのか？
IaCについて
    設定とコードは何が違うのか？
    作ったコードの正しさはどう担保するのか？
    インフラのデバッグはどのようにやるのか？
    コードの再利用は効くのか？
    アセットストアのようなソリューションストアが将来できると思うか？できた時にインフラエンジニアは存在しうるのか？

IaC

infrastructure as Code
インフラの設定をコード化する

DevOps

AWS等が出てダイナミックにインフラを作れるようになった
- どう管理するかが課題になった
- コードで書いた
  - どうテストするか？
  - 開発のプロセスと一緒だね
  - DevもOpsも同じ考え方でできる

SRE

Googleが提唱
DevOpsの中の一つのアプローチ

開発スキルと運用スキル

ある程度までは広く知っておくべき
車の運転のしかた一通り知ってないと免許持てない
- エンジンの解体はできなくてもいい
全員に無理やりプログラミングさせるのもよくない
- プログラミングで改善したいと思ってる人ができるように

IaCの信頼性

コードで書くと信頼性の不安になる要素を増やすことになる
クラウド使うならクラウドベンダーが担保してくれてる

【2-7】Special Session：ジーズアカデミーTOKYO

山崎大助さん
ジーズアカデミー主席講師
デジタルハリウッド大学員准教授

テーマ

Output learning

G's ACADEMYの紹介

youtu.be

G's ACADEMYの学び

記憶力
判断力
独創力
- 想像力(Imagination)
- 創造力(Creative)
- ここが重要
いろんな課題が週に2回
- みんな課題よりもっとすごいのを作ってくる

プログラミング学習のポイント

とにかくコード書く
- 理解 < 体験
作りたいものを作る
- 考える < 行動
スポーツで例えると
- 最初は試合して楽しむこと
- 試合で困ったことがあれば練習で補う
- 試合・・・コードを書き作ること
- 練習・・・基礎知識を調べる
学習のスパイラル
- まず試すDEMO作る(学習)
- 実際に動かしてみる(検証)
- 足りない部分に気づく(分析・新しい学習)

【2-8】Web × XR

登壇者

XR
- 比留間和也さん(@edo_m18)
- 古林克臣さん(@korinVR)
- 杉本雅広さん(@h_doxas)
Web
- 古川陽介さん(@yosuke_furukawa)

議題

WebとXRをかけあわせることで、どんな良いことがあるのか？
WebXRはどうやって作っているのか？
WebVR/AR、どんな実例が生まれてるのか？
WebVR/ARの課題はどのようなもの？
WebエンジニアがWebVR/ARエンジニアになることはできるのか？

WebとXR

WebGL × XR

WebXRどうやって作る

WebVR API
- HMDとブラウザをバイパスるもの
- 傾きをブラウザへ伝えたいとか
- 表示する内容があってそれをどこに出すかの制御
WebXR
- もっと広い
60fps出さないとダメなの？
- 60じゃ足りない
ダウンロードにかかる時間
- ローディングが長くなる
- 見られる前に閉じられちゃわないか
- webpackaging活用できないか
  - 一部をp2pで一部をダウンロードしてマージするとかできたら高速化できそう
  - -> 現状ではまだそこまで仕様は進んでない
- ServiceWorkerでできるだけキャッシュしておくとか
safariでUSDZと入れるとVRが体験できる

#MANABIYA usdzすごい！！ pic.twitter.com/WzYlJzVSnz
— Yosuke FURUKAWA (@yosuke_furukawa) 2018年10月20日

WebエンジニアがWebVR／ARエンジニアになれるか

難しい
3Dがまず難しい
Unity使うと容易にできる

WebVR/ARの未来

インストールなしで使えるのがいい
ハイパーリンクの機能
- VRコンテンツに対してリンカブルなのがいい
- VR空間を閉じずに維持したままリンクで移動できる
- VR in ARとかできたりしないか

【2-9】モバイル × AI

登壇者

モバイル
- 七島偉之さん(@jollyjoester)
AI
- 我妻幸長さん(@yuky_az)
- 五木田和也さん(@kazoo04)
- 小西祐介さん
- 染谷悠一郎さん

議題

端末側に機械学習を組み込むことはできるのか？
モバイルへのAI活用実例
研究レベルの最先端ではどのようなことが考えられているのか？
今後、モバイルにおいて、AI/機械学習をどのように活かしていくべきか？

モバイルとAI

モバイルに入れる場合モデルサイズの問題がある
大きなファイルの配信は避けたい
重い処理はクラウドでやってくのが技術的にも普通
ニューラルネットワークの蒸留というテクニック
- 圧縮みたいなもの
- 精度が上がることもある(謎)

どこで処理をする

基本はモデルはクラウドにある
- 学習したり計算したりは重い
モバイル端末の計算能力上がってきてる
- エッジデバイス上で完結させたいというニーズもある
- リアルタイム性が求められる場面
エッジデバイス上でやるならモデルをダウンロードしないといけない
端末上でも学習できたら面白い
- 既存のモデルに微調整
- 個人にカスタマイズ
端末上でやるとバッテリー消費激しいという課題もある
ケースバイケースで使い分けないといけない
端末側で処理するとモデルの中身が見られちゃうというリスク

プライバシーについて

画像の判定をするには画像をサーバにあげないといけない
- ユーザは勝手にクラウドに上げられるのは怖い
- 運用者も画像を持つのはリスク
端末側で完結すればアップロードの必要がなくなる
画像から抽出できる特徴量の状態にしてサーバに送る

多数のデバイスで分散して学習

Webページ開いてる間裏でマイニングしてた件みたいに、裏で機械学習させるとかはないか
課金したら広告消すみたいな感じで裏での機械学習を許可したら広告消すとか
分散して学習をさせるメリットがどれだけあるか

【2-10】プログラミング × Web

登壇者

プログラミング
- 清水智公さん(@chikoski)
- Linda_ppさん(@Linda_pp)
Web
- 古川陽介さん(@yosuke_furukawa)
- 川口和也さん(@kazu_pon)

議題

WASMの近況はどうなっている？
WASMの利用例について知りたい！
    vim.wasmの話
        移植してみての苦労話
        追加したコードと、消したコードについて
    Vue + WASMの話
        フレームワークでの利用例
        WASMをフレームワークに組み込む理由
WASMのこれからはについて教えてください！
    Webアプリに計算スピードは必要？
    使えるとしたらどこなのか？
    開発には組み込まれていく？
    どう組み込むといいのか？

WebAssemblyとは

ブラウザで動かすにはJSじゃないとダメだった
WebAssembly形式もブラウザは処理できる
- メジャーなブラウザなら使える
- node上でも動く
特徴
- バイナリ
- コンパイルして作る
- いろんな言語から作ることができる
  - RustとかGoとかKotlinとか
- コンパイルしてるので速い
- Cの資産を使える
- 足し算掛け算とかの単純なことしかできない

WebAssemblyにどんな期待を持ってるか

新しい処理系
ブラウザ上で動く
JSはファイル全体がダウンロードされないと実行されない
- WebAssemblyはストリーミングに実行できるのが良い
WebAsseblyのポータビリティに期待してる
- RustやGoでも動くというのが面白い

Vim.wasm

ブラウザで使えるvim

https://rhysd.github.io/vim.wasm/

コード

github.com

紹介記事

rhysd.hatenablog.com

canvasを置いてそこにJSを書く
イベントのハンドリングはJS
ブラウザとやり取りするところはJSで
- JSで書いたコードを呼び出すことはできる
- CのコードとJSのコードをつなぐことができる
スリープができないのが苦労した
- emscriptenの機能で力技で提供しているスリープを使った

Vue + WebAssembly

Vueでの課題
- DOM操作のパフォーマンス
- WebAssembly使ったらどうかという話がでている

Webアプリのパフォーマンス上げるのにWebAssemblyが使えるか

動画とかをストリーミング
暗号複合処理
クラウドゲーミング
- 導入例もある

WebAssemblyを開発で使う

デバッグがしんどい
- テキスト形式で見ることはできる
- それ以上は見れない
- 地道にconsoleにいろいろ出してくしかない
AssemblyScript
- TypeScriptみたいに書ける

github.com

2018-10-19

「KotlinConf 2018 報告会」に参加してきました

勉強会メモ

KotlinConf2018報告会に参加してきました。

kotlin.connpass.com

10/3-5にオランダのアムステルダムで開催されたKotlinConfの報告会に参加しました。
Androidやサーバサイド等テーマ別にお話いただけたのでKotlin界隈のキャッチアップをすることができました。
個人的にはサーバサイドKotlinはこれまでSpring一択かと思ってましたがKtorも注目されてるということで使ってみたいなと思いました。

タイトル	発表者
KotlinConf 2018 カンファレンス概要とトピックOverview	日高正博
KotlinConf 2018 のワークショップに参加してきました	あんざいゆき
KotlinConf 2018 Android編	岩谷明
KotlinConf から見る、最近の Kotlin サーバーサイド事情	川田裕貴
Kotlinのユニットテスト　ベストプラクティス	長澤太郎
build.gradle.kts	Panini

KotlinConf 2018 カンファレンス概要とトピックOverview

日高正博さん(メルカリ)
@mhidaka

KotlinConf 2018 Conference Overview and Session Reccomendation from Masahiro Hidaka

伝えたいこと

KotlinConfの空気感
基調講演おすすめトピック

KotlinConf2018

オランダのアムステルダム
2018/10/3-5
直行便なら11~12時間
時差7時間
今年で2回目
参加者1200人くらい
- 日本人は20人くらい
動画も公開されてる

https://www.youtube.com/playlist?list=PLQ176FUIyIUbVvFMqDc2jhxS-t562uytr

KotlinConf 2018 のワークショップに参加してきました

あんざいゆきさん(uPhyca)
@yanzm

Workshop

kotlinconf.com

workshopは今年から
初日がworkshop
649ユーロ(8万くらい)
9時-17時
朝食昼食つき
5種類のworkshopで講師は豪華
- コルーチンだけsoldoutしてた

コルーチンのworkshop

Workshopのリポジトリ

github.com

スライド

github.com

デスクトップアプリとデモ集

KotlinConf 2018 Android編

岩谷明さん(LINE)
@hoshi_gaki

LINE LIVE

30%くらいKotlinになってきた
Reduxアーキテクチャ

Androidのセッション

Android関連は3つあった

Android Suspenders by Chris Banes

youtu.be

なぜコルーチン使うのか
- I/O処理によい
- Androidという限られた中でスケール
- Rxより書きやすい
Androidでどうやってコルーチンを使うか

Shaping Your App's Architecture with Kotlin and Architecture Components by Florina

youtu.be

なぜコルーチン使うのか
- rxより簡単だから
どこでコルーチン使う
- ほぼ全部に使っていこう

Android KTX: A Dash of Kotlin Makes All the Difference! by Dan Kim

youtu.be

AndroidXでKTX1.0

KotlinConf から見る、最近の Kotlin サーバーサイド事情

川田裕貴さん(LINE)
@hktechno

KotlinConf 2018 から見る最近の Kotlin サーバーサイド事情 from Hirotaka Kawata

KotlinConfの感想

サーバサイドの話も思ったよりあった
何かをやってみた系が多くてあまり深い話ではなかった
コルーチンがあつい

ServerSideKotlin

JVMの上で動くところがいい
- パフォーマンス的な問題があまりない
ServerSideKotlin何で書いてる
- Ktor
- http4k
- SpringBoot
Ktorの成長に期待
- コルーチン使うならKtor
- jetbrainが作ってる
SpringBoot + Kotlin

youtu.be

API/Microservicesのセッションも
- RESTに否定的
Microservices

youtu.be

GraphQL

youtu.be

Zipkin便利
- Microservices間のトレーシング
Kotlin/Nativeの可能性
- コルーチン周りがまだつらそう
- ライブラリの成熟に期待

Kotlinのユニットテスト　ベストプラクティス

長澤太郎さん(Ubie)
@ngsw_taro

Unit Testのセッション

youtu.be

JUnit4でJava風なテスト
JUnit4は毎回インスタンスが生成される
JUnit5を使いましょう
- TestInstance
テスト関連のライブラリ
- いろいろあるけどどれも良い
- JUnit5 + MockK + AsserrtJがおすすめ
MockK
- モック生成は一度、都度リセットする
  - スピードアップ
AsserrtJ
- データクラスアサーション
  - データクラスで表示されるのでエラー時の情報がわかりやすい

まとめ

JUnit5を使う
ボイラープレートを避けよう
lateinitやvarを避ける
モックの生成を繰り返さない
データクラスで比較すると読みやすいエラーメッセージ

2018-10-18

「NuxtMeetup#5」に参加してきました

勉強会メモ

Nuxt Meetupに参加してきました。

nuxt-meetup.connpass.com

今回は具体的な実装よりも、なぜNuxtを選択するのかといった話や実運用での苦労話多くありました。
実運用している方の踏み込んだ話が聞けて参考になりました。

タイトル	発表者
バンドルファイルの肥大化問題解消にみるNuxt.jsの成熟化	Wakamatsu Hisashi
フロントエンド(実稼働)までひとりでできるもん	hiroki_yoshitug
Vue or Nuxt	masaakikunsan
Vueを広めるためのNuxt.jsの可能性	かめぽん
Nuxtを使っていて地味にハマった小ネタの紹介	Yuki Terashima
nuxt-i18nを使ったWebサイトの多言語化	odan
NuxtでのJAMStackな開発とポイント	Tame

バンドルファイルの肥大化問題解消にみるNuxt.jsの成熟化

Wakamatsu Hisashiさん

Nuxt2

webpack4
ESModules
babel7

Nuxtのメリット

SSR手軽にできるのは大きなメリット
- VueCLI3も便利だけど

Code Splitting

柔軟性を欠いていた(v1)
- ファイル肥大化
maxChunkSizeを指定できるようになった(v1.2.1~v1.4.1)
- http2環境でないと良さを活かしきれない
optimization.splitChunkの仕様に沿って指定できるようになった(v2)

Nuxtを使う上で大事なこと

便利に使えるけど内部がどうなってるかわからない
- node_modules/nuxt配下にどんな初期値が設定されてるかも見るよい

フロントエンド(実稼働)までひとりでできるもん

hiroki_yoshitugさん

DODA

リブランディングしてる
PWAで作ってる

技術スタック

Nuxt(SSR)
PWA(nuxt-pwa-module)
express
mysql

Nodeサーバのかどう

マルチプロセスで動かす
80port使えるのか？
クラスタ構成で上手くロギング

マルチプロセスで動かす

npm run startだと持て余してしまう
クラスタモードで起動する
PM2を使う

80port使えるのか？

well known portはroot必要
authbindを導入してpm2のエイリアスを設定することで一般ユーザでできる

クラスタ構成で上手くロギング

アクセスログを適切にファイル出力したい
pm2とlog4jで解決

PM2でできること

プロセス監視
ファイル変更時に自動でプロセス再起動
メトリクスの設定

Vue or Nuxt

masaakikunsanさん(SCOUTER)

VueとNuxtの動向

どちらも上向いてる

Vueのメリット

公式のエコシステム豊富

Nuxtのメリット

Webpackやbabelが隠蔽
SSRが簡単
routing自動生成
規約があること

Nuxtを選択した方がいいケース

SSRしたい
SEO気にする
Vueに精通してる人が多い
静的サイトを作りたい
routerが便利だから?
- vueでも便利なライブラリはある

github.com

Nuxtを選ばないほうがいいケース

SEO気にしない
設計を自分でやりたい
Vue初心者が多い
TS使いたい

まとめ

SEO/SSR以外の時はNuxtじゃないといけない理由はない
Nuxt便利だからって思考停止してませんか？
よく考えてVue/Nuxtでハッピーライフを

Vueを広めるためのNuxt.jsの可能性

かめぽんさん

Vue/Nuxtをなぜ拡散させる必要あるか

フロントエンドが居やすい環境
jQueryにより弊害を激減させる
組織をドライブさせるため
- 適切な技術は適切な人を呼ぶ

Nuxtの組織に与えるインパクト

劇的な親しみやすさ
- Vueだから
規約で意識の共通化
- 初心者でも爆発しづらい
圧倒的スピード
- スターターの充実

まとめ

新しい技術を定着させるのは時間と体力がいる
Nuxt使うと早い

Nuxtを使っていて地味にハマった小ネタの紹介

Yuki Terashimaさん

地味なハマりポイントがある

GTMの設定

Google Tag Manager
GAはプラグインあるけどGTMはない
Nuxtのpluginsは便利

Lambda上で動かす

AWS Lambda上で動かしている
- 実例が少ない

500エラーの挙動

layouts/error.vue
SSRしてるとファイルが読み込まれない
- それだと困る
- app/views/error.htmlで解決する
- nuxt.config.jsのsrcDirがapp app/app/views/error.htmlじゃないとダメ

まとめ

Nuxtは変なところでハマることもあるが基本的に使いやすい
公式読めばだいたい分かる

nuxt-i18nを使ったWebサイトの多言語化

odanさん

i18n

internationalizationの略
言語、時差、名詞の複数形

vue-i18n

github.com

messagesに入れておけば自動的に入れ替わる

nuxt-i18n

github.com

日本語情報が少ない
- つい最近qiitaの記事が出た

qiita.com

ルーティングの自動生成
便利関数
SEO対策の機能

NuxtでのJAMStackな開発とポイント

Tameさん

JAMStack

JAM
- JavaScript
- APIs
- Markup

NuxtとJAMStack

NuxtとJAMStackは相性が良い
- ディレクトリ構成がルール化されている
- 静的ファイルも生成できる

Nuxtでサイトを公開するパターン

SPA
SSR
JAMStack

NuxtでJAMStack

Nuxt + Netlify + Contentful
gitにpushするとNetlifyにデプロイ
Netlifyのprerenderingを使ってデプロイ時に記事を生成

2018-10-13

「ABC 2018 Autumn in KAWASAKI」に参加してきました

勉強会メモ

Android Bazaar and Conference 2018 in KAWASAKIに参加してきました。

abc.android-group.jp

Androidのイベントではあるものの、IoTメインにAIやPWA、Kotlin、Flutterと幅広い分野のセッションが用意されていました。
エンジニアだけでなく大学講師や総務省の方も登壇されていて普段と違った角度の話を聞くことができました。

1階ホール	９階第２研修室	9階第３研修室
IoT機器との連携で広がるAndroidの可能性と懸念される脅威への対策吉岡克成	-	-
データ主導社会の実現に向けて谷脇康彦	-	-
使おうWatson！西戸京子	AI Car Race 佐々木陽	スマホでもスピーカーでも！誰でもできるGoogleアシスタントアプリ開発里山南人/一円真治
ICT社会、次の10年に求められるモバイルの役割木暮祐一	毒舌女エンジニアのアブない副業セミナー〜資本主義社会上等〜長尾ユリコ	Sketchでアイコンを描こう！山本麻美
PWA A Go-Go!! 進藤龍之介	Androidで広がる車のアプリ開発～SDL対応アプリ開発入門とAndroid Auto～柴田文彦	Android Pie時代のUIデザイン佐藤伸哉
KotlinConf2018最速レポート＆Kotlin最新情報藤原聖	農業IoT”みどりクラウド”成功の裏側～PoCから始めるIoTビジネスの実現～持田宏平	Flutterアプリ開発実践編神原健一

IoT機器との連携で広がるAndroidの可能性と懸念される脅威への対策

吉岡克成さん(横浜国立大学/大学院環境情報研究院/先端科学高等研究院　准教授)

IoTデバイス

IoTデバイスの数が2020年に400億をこえる
- 今はスマホや通信インフラが多い
- 今後は家電やPC周辺機器、IAや照明等産業用途のものが伸びる

IoTとサイバー攻撃

大学にサイバー攻撃の観測すステムがある
感染した機器からの攻撃が来る
- ネットワークストレージ
- 太陽光発電管理システム
- 電力需要監視システム
- 医療機器
デバイス大量感染の元凶
- Telnet
- Telnetのポートがあいたまま動いてしまってるIoTデバイスが多い
- 2014年以降急増

攻撃の観測

ダークネットによる攻撃の観測
- 使われてないIPへのアクセスを監視
ハニーポットによる攻撃の観測
- 脆弱な機器を模擬した囮システム
- マルウェアを捕獲して解析している
攻撃元の判定
- WebとTelnetで攻撃元に接続して機器を判定
- 10%以下しか特定できない
  - カメラ
  - デジタルビデオレコーダ
  - ルータ

攻撃の内容

DDoS
- 1Tbpsを超える規模
Miraiというマルウェア
- 何十万台の機器を乗っ取れると示してしまった
- 悪用して社会に影響を与える攻撃を起こし得ることを示してしまった
- 日本での被害はまだ少ない方
Telnet以外も標的に
- 日本にも飛び火してきている

Androidとの関連

Android Debug Bridgeを狙った攻撃
- Miraiの亜種からの攻撃
- ADBのポートを開けたまま出荷してしまった製品

悪性アプリはどれくらいあるのか

55種類のアンチウイルスソフトにかけて調査
- サードパーティマーケットのアプリは検知率高い
GooglePlayで公開されてるアプリは公開期間が長いほど安全
- 悪いものが長く出続けることはない状況
- 非公式マーケットの中には何年間も放置されてる危険なアプリもある

正規アプリのマルウェア化

正規アプリに悪性コードを挿入
- 7000種類のアプリが被害
- 攻撃者はリパッケージを自動化していると予想される
- GooglePlayに公開されてるアプリでも多くが悪性コードの挿入できてしまう
  - 難読化が大事
Androidから操作できるIoTデバイス
- 家庭内サービスを外部から妨害できてしまう
  - 情報家電を使えなくする
  - 電源のON/OFF
- 正規のアプリとIoT機器が認証してないからできてしまう

まとめ

脆弱性のあるIoT機器は後継されている
- Androidも標的になっているものもある
正規アプリのマルウェア化
IoT機器と連動するアプリのなりすまし対応

質疑

難読化しても破れちゃうんじゃないか
- コストをかければいくらでも難読化できるけどそこまで必要ないものが多数
- 攻撃者側もコストベースでやっているのでしきい値を上げるだけでも効果はあるのではないか

データ主導社会の実現に向けて

谷脇康彦さん(総務省/総合通信基盤局長)

サイバーセキュリティ関連

IoT機器の脆弱性強化の法改正
脆弱なID/パスワードになっていないかチェック
- ISPに通知し改善を要求させる

データ主導社会

Data Driven Society
- 現実世界のデータを収集
- AI使って解析
- 現実世界へフィードバック社会的課題解決
従来の情報化
- それぞれの領域に留まった情報化
- IoTは領域を跨いだ情報化ができる
- System of Systems

第5世代移動通信システム(5G)

特徴

超低遅延
超高速
- 2時間の映画を3秒で(LTEは5分)
多数同時接続

周波数

今までより高い
- より多くの情報を伝送できる
- 遠くまで届かない
  - 基地局を多く

ネットワークのフルIP化

2025年に完了

ネットワークの仮想化

ネットワークのスライシング
- 用途ごとに分けられる
- リソース配分を効率化
  - AIで判断

トラストの確保

利便性
プライバシー
セキュリティ

AI Car Race

佐々木陽さん(株式会社GClue/代表取締役)

Android Thingsの技適

5Gwifi帯が全滅

AI Robot Car Race

シリコンバレーで流行ってる

Robo Race

https://roborace.com/
Radar + Lidar + GPS + Ultrasonic + Machine Vision Cameras

自動運転プラットフォーム

AutoWare
- 名古屋大学が中心に
apollo
- 中国
ハッカソンで一週間ぐらいで作れちゃう

DeepTesla

論文で以下の2つだけで自動運転できると発表
- フロントのカメラ画像
- ハンドルの角度
CNN
- 5つの畳み込みそう
- 3つの全結合

UDACITY

エミュレータで自動走行
学習させたりそれを適用できる

Donkey Car

初心者でも1日で作れるキット
https://docs.donkeycar.com/

AirSim

マイクロソフトが提供するOSSはのシミュレータ
APIで操作できる

ICT社会、次の10年に求められるモバイルの役割

木暮祐一さん(青森公立大学/准教授／モバイル研究家)
https://www.dropbox.com/s/agfedyyo1kb8h9p/20181013%E6%97%A5%E6%9C%ACAndroid%E3%81%AE%E4%BC%9A.pdf

モバイルのサイクル

10年ごとに劇的な変化がある
メール、カメラ、iモード、スマホ
ネットワークもだいたい10年サイクルで置き換わる

スマホ登場から10年

IoTの時代
- その中心にあるのはスマホ

中国のデジタル化

IoT/データ活用が進んでる
- 監視カメラで顔認識
- 交通量から信号操作
- 電子決済の普及
- 電気自動車
これらにはスマホが必要不可欠

日本では

青森ではJRでもSuicaが使えない
クレジットカードも使えない店が多い
- 徐々にQR決済が浸透中
地方ではSuicaもクレジットカードも飛ばしてQRコード決済が普及するのではないか
地方でICTが普及するタイミングが来てる

まとめ

スマホの活用は中国と日本でぜんぜん違う
- 日本でも東京と田舎で違う
それでもスマホは普及してる
そこにビジネスチャンスがあるんじゃないか

PWA A Go-Go!!

進藤龍之介さん(NPO日本Androidの会/理事／エンジニア)

PWA A Go-Go !! @ABC2018A 20181013 from Ryu Shindo

モバイルにおけるWebの存在

Webの入り口はGoogle
GoogleとかSNSの先にあるもの
PWAになってホーム画面に置いてもらえるとアプリと並べるんじゃないか

エンゲージメントの壁

「ホーム画面に追加」を押してもらえるか
プッシュ通知許可Yes押してもらえるか

PWAと相性がいいサイト

地域型の小さなビジネス
- 空き状況予約状況
イベントサイト
- スケジュールや会場の確認
- 会場内のネットワーク負荷低減にもつながる
いずれもエンゲージメントが確立済みである
Webにある既存の情報でローコストにアプリ化

PWA導入の考慮点

通知、インストール許可のタイミング、シチュエーション
どこを見せたいのか
- 空き状況
- 新着情報

PWA実装準備

アイコン

png
192 * 192
512 * 512

オフラインページ

ネットワークがつながらない時に出すページ

キャッシュ計画

パフォーマンスと更新反映のトレードオフ
キャッシュの更新タイミング
- ServiceWorkerに差分があったらロードしてきて、次回起動時に適用される
デフォルトではキャッシュに有効期限がない
- 明示的に消さないと残り続けちゃう

https

https必須

PWA実装

Manifest

iosで使われるアイコンはhtmlで定義するapple-touch-iconが使われる

Add to HomeScreen

インストールのポップアップを抑止
- beforeinstallpromptイベントを拾って止めておく

よくあるトラブル

https不完全問題
- httpのコンテンツが埋め込まれてないか
キャッシュの焦げ付き問題
- indexedDBを使って実装
- WorkBox使えば有効期限が指定できる
外部ページとの行き来
- 外部ページで処理した後正しく戻ってこれない
- 認証/決済

検証

PWAのテストめんどくさい
実機テスト
- chrome://inspect/#devices

KotlinConf2018最速レポート＆Kotlin最新情報

藤原聖さん(LINE株式会社/Developer Relations)

KotlinConf

kotlinconf.com

今年で2回目
1300人以上参加(チケット完売)

KotlinConfのセッション

4トラック並行で63セッション
全部動画が公開されてる
Coroutine/Multiplatform(ios含む)/ServerSideが多め
Android固有は3つ

Keynote

Kotkinの言語設計者であるAndreyBreslavが登壇

Pragmatic-言語設計の価値観-

実用主義
考えをそのままソフトウェアに落とし込める

ConcisionではなくReadability

簡潔さではなく読みやすさ重視
コードが短ければいいというものではない
ボイラープレートは減らして意味のあるものだけになるようにする

ExpressivenessではなくReuse

表現力豊かにするのではなく再利用可能にする

OriginalityではなくInteroperability

独自性ではなく相互運用性を追求
他の言語にすでにある機能や治験を取り入れる

SoundnessではなくSafety/Tooling

言語の堅牢さではなく安全さやツールによるサポートを重視
静的型付け言語

Momentum-Kotlinの盛り上がり-

2018/10時点で1500万人の開発者
GooglePlayの上位1000のうち4分の1はKotlin
Kotlin使ったアプリ1年で4倍に

Industry-Kotlinの業界動向-

あらゆる業種で使われてる
- 金融業界
- スタートアップ
MicrosoftがKotlin移行した

Kotlin1.3

すべての変更点はgithub上にある
Coroutine
Kotlin/Native beta

Evolution-Kotlinの進化の方向性-

keep the language modern
confortable update

2018-10-05

ログミーTech Live #1「サーバーサイド開発最前線」に参加してきました

勉強会メモ

ログミーTech Live #1「サーバーサイド開発最前線」に参加してきました。

logmitechlive.connpass.com

最近サーバサイドKotlinが気になっていたこともあり参加してみました。
テーマが「サーバーサイド」とスコープを絞りすぎない勉強会だったので、普段ふれないgoやScalaやGCPの話も聞けて良かったです。

タイトル	発表者
Go/GAEで作る金融システム	株式会社ネクストカレンシー
FRESH LIVEにおけるServer Side KotlinとMicroservicesの今	株式会社サイバーエージェント野澤聡史氏
クラウド電子カルテを支えるテクノロジーの光と闇	エムスリー株式会社冨岡純氏

Go/GAEで作る金融システム

株式会社ネクストカレンシー Shogo Namekiさん

ネクストカレンシー

DMMの子会社
仮想通貨の会社
金融業
高い安全性が求められる

技術スタック

GCP
- easyだから
golang
- simpleだから
node

Google App Engineはいいぞ

Googleが提供するPaaS
とにかく楽
- bluegreenデプロイ
  - GAEのバージョンの機能を使う
- スケールイン/アウト
  - goなら立ち上がり数十ミリ秒
- セキュリティ
  - ミドルウェアの脆弱性は勝手に対応してくれる

Stackdriver Loggingはいいぞ

フルマネージドなロギングサービス
- GCPで出力されるログが集約される
加工や通知が楽
柔軟なフィルタ

Protocol Buffersはいいぞ

APIドキュメントメンテしなくなりがち
シンプルで高速
JSONをhttpでやりとりするのと同じようにProtocol Buffersをやりとりする
ドキュメント=実装なのがいい

golangはいいぞ

シンプルな仕様
並行処理
ループするならfor,if使うしかない
- シンプル

FRESH LIVEにおけるServer Side KotlinとMicroservicesの今

株式会社サイバーエージェント野澤聡史さん（@soushi_nozawa）

FRESH LIVEとサーバサイドKotlin

様々なマイクロサービスにKotlin導入してる

FRESH LIVEとマイクロサービス

どっかが落ちても全体は倒れない
戦略とともに必要なところをスケールできる
1サービス1DB
サービス間はgrpc
低レイヤーはgo

SpringBoot2とKotlin

Idiomatic Kotlin Code
- Kotlinらしく書くためのベストプラクティス
- 拡張関数が便利
Router Function DSL
- エンドポイントをDSLで書ける
- コンストラクタインジェクトで@Autowiredを省略
Spring Web Flux
- Reactiveをサポート
- StreamなAPIを簡単に作れる

コンテナとマイクロサービス

環境変数をコンテナにDI
k8sのSecretリソース
- 環境ごとに異なる機密情報を扱う
- コンテナの環境変数にセット
サービスログ収集
- これまではecs
- k8sのDaemonSetでfluentdをNodeに配置
- サイドカーコンテナの撤廃
- ログは標準出力に吐くだけ
- stern
  - podのログを見られる

gRPC

HTTP2との効率的な接続
双方向ストリーミング
portを分けて2つのServer起動
- CommandLineRunner
- DisposableBean
SpringとgRPC
- Server起動Interceptorなど難なく構築
- 入念なクライアント疎通確認必要(特にAndroid)
- 周辺ライブラリのアップデートをこまめに

まとめ

サーバサイドKotlinやるならSpringBoot2おすすめ
k8sでコンテナ配置戦略に変化
gRPCで効率的な通信

クラウド 電子カルテを支えるテクノロ ジーの光と闇

エムスリー株式会社冨岡純さん（@jooohn1234）

クラウド 電子カルテ

日本のクリニックで
- 電子カルテの導入30%くらい
- クラウド電子カルテ2%未満

光

クラウドが当たり前の業界ではない
- 導入できたらありがたみを実感できた

闇

院内ネットワークとクラウドの連携にハードル
- socketio使って双方向通信
- サーバはNode
- クライアントはJava
院内ネットワークで動くものの保守つらい
全部クラウドの世界になってほしい

レセコン

会計ソフトウェア

闇

カルテの情報をレセコンと動機するのは必須
診療報酬点数計算等々複雑で開発ハードル高い

光

Scala
- 管理しやすく(oop)
- 堅牢(fp)
Functional Programming
- テスト再利用容易
- 点数計算は巨大な関数
Clean Architecture
- 複雑な起算ルールと作用を分離

まとめ

レガシー業界ではすべてがモダンにならない過渡期がある
設計手法を駆使して少しずつ良くしてる

KFCHall	KFCHall Annex	KFCHall 2nd	Room111
KEYNOTE SébastienDeleuze(Pivotal)	-	-	-
決済システムの内製化への旅 ‒ SpringとPCFで作るクラウドネイティブなシステム開発槙俊明(Pivotal) 鈴⽊順也(ソフトバンク・ペイメント・サービス株式会社)	エンタープライズ・マイクロサービスの格⾔⻑⾕川裕⼀(Starlight&Storm/⽇本Springユーザ会)	Spring Data for Apache GeodeでRDBいらずのアプリ開発をしよう！⼭河征紀(ウルシステムズ株式会社)	これからSpringを使う開発者が知っておくべきこと⼟岐孝平(⽇本Springユーザ会スタッフ)
Rakuten Travel and Spring Kalburgi Gajraj(楽天株式会社)	Spring ♥ GCP ー SpringとGCPの素敵な関係福⽥潔(Google)	実際のプロジェクトでSpringアプリをKotlinで開発して得た気づき集⻑澤太郎(Ubie株式会社)	Thymeleafさいしょの⼀歩伊賀敏樹
Knative:Serving your Serverless Java Serviceon Kubernetes the 12-Factor way Kamesh Sampath(Redhat)	Observability with Spring-Based Distributed Systems Thomas Ludwig(楽天株式会社)	AmazonCognito使って認証したい？それならSpring Security使いましょう！内⽴良介(コイニー株式会社⽇本Javaユーザーグループ)	SpringBootで作るRESTful Web Service ⼤野渉(Starlight & Storm/JSUGスタッフ)
Pivotal認定講師が解説！基礎からのOAuth2.0とSpring Security5.1による実装多⽥真敏(株式会社カサレアル)	500+のサーバーで動くLINE Ads PlatformをささえるSpring 渡邉直樹(LINE株式会社)	SpringTools4の機能とその実装岩塚卓弥/堅⽥淳也(NTTソフトウェアイノベーションセンタ)	Spring5でSpring Testのここが変わる平栗勇⼈(株式会社NTTデータ)
Spring Boot with Kotlin, functional configuration and GraalVM SébastienDeleuze(Pivotal)	⼤規模⾦融系SaaSを⽀えるSpring〜活⽤の変遷と新時代のアーキテクチャ〜⽝塚裕介(株式会社野村総合研究所)	Spring Data RESTとSpring Cloud Contract ⼩川岳史/⼭﨑⼤(株式会社タグバンガーズ)	Spring BootでHello Worldのその先へ〜ウェブDBプレスのSpring Boot特集で伝えたかったこと＆伝えきれなかったこと～藤野真聡(ソニーネットワークコミュニケーションズ株式会社)
業務で使いたいWebFluxによるReactiveプログラミング⾕本⼼(Acroquest Technology株式会社)	-	Micrometer/Prometheusによる⼤規模システムモニタリング〜ヤフーインターネット広告システムでの導入事例〜池⽥誠(ヤフー株式会社)	Angularを⽤いたデザインスプリント開発と設計⼿法佐川夫美雄(アシラス株式会社)

1階ホール	９階第２研修室	9階第３研修室
IoT機器との連携で広がるAndroidの可能性と懸念される脅威への対策吉岡克成	-	-
データ主導社会の実現に向けて谷脇康彦	-	-
使おうWatson！西戸京子	AI Car Race 佐々木陽	スマホでもスピーカーでも！誰でもできるGoogleアシスタントアプリ開発里山南人/一円真治
ICT社会、次の10年に求められるモバイルの役割木暮祐一	毒舌女エンジニアのアブない副業セミナー〜資本主義社会上等〜長尾ユリコ	Sketchでアイコンを描こう！山本麻美
PWA A Go-Go!! 進藤龍之介	Androidで広がる車のアプリ開発～SDL対応アプリ開発入門とAndroid Auto～柴田文彦	Android Pie時代のUIデザイン佐藤伸哉
KotlinConf2018最速レポート＆Kotlin最新情報藤原聖	農業IoT”みどりクラウド”成功の裏側～PoCから始めるIoTビジネスの実現～持田宏平	Flutterアプリ開発実践編神原健一

タイムテーブルと資料のリンク

10:00 - 10:50

11:20 - 12:00

13:20 - 14:00

14:20 - 15:00

15:20 - 16:00

16:20 - 17:00

LT

基調講演

テーマ

仕組みを作る仕組みを、作る仕組みを作る

光を超えるためのパフォーマンスチューニング/アーキテクチャ

大前提

フロントエンドのキャッシュ設計

フロントエンド技術の目的

16ms以上の世界

先読み

まとめ

16ms未満の世界

最適化

マイクロチューニング指針

楽観的UI

クライアントファースト

Off the main thread

FIDO認証によるパスワードレスログイン実装入門

パスワード認証の課題

FIDO

FIDOの特徴

FIDOの技術仕様

FIDO UAF

FIDO U2F

FIDO2

まとめ

PWAの導入で得られた成果と見えてきた課題

PWA導入したせいか

リリース後の取り組み

CSSのインライン化

A2HSのタイミング

ServiceWorkerの起動待ち問題

速度を維持する取り組み

モニタリング

ツール

Paformance Badget

現状の課題

PWAの今後の展望

まとめ

Node.js まとめ

Node v11

Web Standards

Node.js Futuer

HTTP の今と未来 ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで

イントロ

5Gの世界

5Gにおけるネットワークの進化

ターゲット

5Gの実用化

開発者にとって

HTTP/2 & TLS1.3

HTTP1.1 + TLS/1.2の課題

HTTP/2

TLS1.3

QUIC

HTTP/3

JavaScriptで機械学習はじめよう

JS × ML

機械学習とは

機械学習の実装方法

K近傍法

線形モデル

ニューラルネットワーク

TensorFlow

TensorFlow.js

なぜJSで機械学習?

デモ

Diagnose your Node.js app

Node初学者の悩み

非同期処理が難しい

エラーハンドリングが難しい

debugが難しい

State of SEO for SPA

HTTP の今と未来ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで

CSS フレームワークを自作してみた話。

CSS フレームワーク使ってて

`outline: none;`なぜよくない？