フロントエンド全身ちぎれ節/BIT VALLEY -INSIDE- Vol4

支えなくて良い技術を支える技術
2018-12-12 BIT VALLEY -INSIDE- Vol.4

Transcript

1. フロントエンド 全身ちぎれ節 支えなくて良い技術を支える技術 2018-12-12 BIT VALLEY -INSIDE- Vol.4
2. Satoshi Takeda @tkdn 株式会社 mediba au パートナー本部 au サービス開発部 フロントエンドエンジニア " ブラウザが主戦場 "
3. 本日話すこと 1. 「支えなくて良い技術」とは 2. 支えなくて良い技術を支えていく技術 how 1: webpack + Babel how 2: 不足しているネイティブ API how 3: OS 固有バグとの付き合い方 3. まとめ・言いたいこと
4. 1. 「支えなくて良い技術」とは deprecated, obsoleted な技術 例えば
5. TLS 1.0/1.1 TLS 1.0/1.1 のサポート停止
6. これによって対応出来なくなる ブラウザ OS ・ブラウザ Android 2.x - 4.x
7. 弊社 大人の事情でまだまだ支えている
8. 対応は辛い 端末やOS 由来によるバグチケット かさむ工数 たまっていくカルマ ⬇ 開発体験 DX の悪化
9. このカルマを燃やすために エンジニアリングでなんとかする
10. ゴール レガシー端末をフォローしていくことに疲れない 開発者が（ある程度）意識せずコーディング・オペレーションできる 自動化できることは自動化し開発体験を良くしたい
11. how 1: webpack + Babel webpack => モジュール解決のためのバンドラー Babel => ES2015~ の構文を解釈し ES5 相当に変換 babel-preset-env => browserslist が提供する DSL に従い、サポートブラウザを記述する
12. { { "browserslist" "browserslist": : [ [ // Android 2.1 以上に最適化 // Android 2.1 以上に最適化 "Android >= 2.1" "Android >= 2.1", , // iOS 8 以上に最適化 // iOS 8 以上に最適化 "iOS >= 8" "iOS >= 8", , ] ] } } ターゲットブラウザに準じた変換が可能
13. export export default default class class Human Human { { constructor constructor( (name name) ) { { this this. .name name = = name name || || "Tom" "Tom"; ; } } eat eat( (food food) ) { { console console. .log log( (` `${ ${this this. .name name} } eats eats ${ ${food food} }` `) ); ; } } } } こんなのが
14. exports exports. .__esModule __esModule = = true true; ; var var Human Human = = ( (function function( () ) { { function function Human Human( (name name) ) { { _classCallCheck _classCallCheck( (this this, , Human Human) ); ; this this. .name name = = name name || || "Tom" "Tom"; ; } } Human Human. .prototype prototype. .eat eat = = function function eat eat( (food food) ) { { console console. .log log( (String String( (this this. .name name) ) + + " eats " " eats " + + String String( (food food) )) ); ; } }; ; return return Human Human; ; } }) )( () ); ; exports exports. .default default = = Human Human; ;
15. だがしかし。 このままでは Android 2 系, 4.0 系までフォローできない ES5 相当の JavaScript ネイティブ API が不足している
16. やってやろうじゃねえか
17. how 2: 足りないネイティブ API を足す ES5 相当のネイティブ API を埋める es5-shim を依存として追加しファイルにバンドルさせる es-shims/es5-shim: ECMAScript 5 compatibility shims for legacy (and modern) JavaScript engines
18. これでもう大丈夫やろ…( ；´ ∀｀) これでもう大丈夫やろ…( ；´ ∀｀)
19. 「一部の Android 2 系では ES3 相当の記述をしないと対応出来ない」
20. まじかよ…( ；´ ∀｀) まじかよ…( ；´ ∀｀)
21. object のプロパティが 予約語となる場合エラーとなる...etc // 下記の構文がエラーとなる // 下記の構文がエラーとなる var var obj obj = = { { class class: : true true } }; ; var var obj obj. .class class = = true true; ; // こうしないとだめ // こうしないとだめ var var obj obj = = { { "class" "class": : true true } }; ; var var obj obj[ ["class" "class"] ] = = true true; ;
22. ES3 相当に書き換える必要がある Branches · sophiebits/es3ify 最終的な生成ファイルをリビルドするスクリプトを書いた
23. ファイルサイズ膨れ上がってきたんだが…( ；´ ∀｀) ファイルサイズ膨れ上がってきたんだが…( ；´ ∀｀) ここまでやったんならさすがにもう大丈夫やろ…( ；´ ∀｀) ここまでやったんならさすがにもう大丈夫やろ…( ；´ ∀｀)
24. OS 固有のバグ
25. OS 固有のバグ Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object> なにこれ…( ；´ ∀｀) 任意の構文からJavaScript オブジェクトへ直接的なプロパティ書き込みが 出来ないというエラー内容
26. 1530 - De ning function's 'prototype' property with Object.de neProperty sets different value and makes property immutable - v8 - Monorail
27. 出処 Android 4.0.x に搭載された JavaScript エンジン V8 のバグ起因 V8 のバージョンまで特定は出来ないが、Android 4.0.3, 4.0.4 の標準ブラウ ザもしくは webview の V8 JavaScript エンジンではバグを持ったまま実装 されている。なお 2.x 系ではバグは起きない
28. どうしたもんか
29. 回避パッチで何とかなりそう
30. // Android 4.x support // Android 4.x support var var defineProperty defineProperty = = Object Object. .defineProperty defineProperty; ; Object Object. .defineProperty defineProperty = = function function ( (exports exports, , name name) ) { { if if ( (name name === === '__esModule' '__esModule') ) { { exports exports[ [name name] ] = = true true; ; return return; ; } } return return defineProperty defineProperty. .apply apply( (this this, , arguments arguments) ); ; } }; ; パッチを差し込むプラグインを作った 無事に動いた…
31. 紹介しきれませんがでも他にも OS 固有のバグが多くあります… OS 固有バグは網羅すること自体が人智を越えているため、トライ& エラ ーとナレッジの共有しかない
32. まとめ ターゲットブラウザを明示し設定、意識せずコーディング 不足した API は適宜 poly ll, shim を足し込んでフォロー OS 固有のバグは知見でしかない、ぶつからないと分からない 全身ちぎれて血まみれになりながらまとめた
33. 考えていくべきこと 紹介したことはいずれ価値のなくなるハック ユーザがセキュアな環境で通信出来ない事自体をきちんと考える レガシー対応に引きずられてサービスグロースの足を引っ張らないと良 い
34. 支えなくて良い技術を支える 少なくともユーザがいる限りは フロントエンドの技術で支えきる