Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Satoshi Takeda
November 12, 2018
42

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

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

Satoshi Takeda

November 12, 2018
Tweet

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. 支えなくて良い技術を支える 少なくともユーザがいる限りは フロントエンドの技術で支えきる