$30 off During Our Annual Pro Sale. View Details »

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

Satoshi Takeda
November 12, 2018
49

フロントエンド全身ちぎれ節/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

    View Slide

  2. Satoshi Takeda
    @tkdn
    株式会社 mediba
    au
    パートナー本部 au
    サービス開発部
    フロントエンドエンジニア
    "
    ブラウザが主戦場
    "

    View Slide

  3. 本日話すこと
    1.
    「支えなくて良い技術」とは
    2.
    支えなくて良い技術を支えていく技術
    how 1: webpack + Babel
    how 2:
    不足しているネイティブ API
    how 3: OS
    固有バグとの付き合い方
    3.
    まとめ・言いたいこと

    View Slide

  4. 1.
    「支えなくて良い技術」とは
    deprecated, obsoleted
    な技術
    例えば

    View Slide

  5. TLS 1.0/1.1
    TLS 1.0/1.1
    のサポート停止

    View Slide

  6. これによって対応出来なくなる
    ブラウザ
    OS
    ・ブラウザ
    Android 2.x - 4.x

    View Slide

  7. 弊社
    大人の事情でまだまだ支えている

    View Slide

  8. 対応は辛い
    端末やOS
    由来によるバグチケット
    かさむ工数
    たまっていくカルマ
    ⬇ 開発体験 DX
    の悪化

    View Slide

  9. このカルマを燃やすために
    エンジニアリングでなんとかする

    View Slide

  10. ゴール
    レガシー端末をフォローしていくことに疲れない
    開発者が(ある程度)意識せずコーディング・オペレーションできる
    自動化できることは自動化し開発体験を良くしたい

    View Slide

  11. how 1: webpack + Babel
    webpack
    =>
    モジュール解決のためのバンドラー
    Babel
    => ES2015~
    の構文を解釈し ES5
    相当に変換
    babel-preset-env
    => browserslist
    が提供する DSL
    に従い、サポートブラウザを記述する

    View Slide

  12. {
    {
    "browserslist"
    "browserslist":
    : [
    [
    // Android 2.1
    以上に最適化
    // Android 2.1
    以上に最適化
    "Android >= 2.1"
    "Android >= 2.1",
    ,
    // iOS 8
    以上に最適化
    // iOS 8
    以上に最適化
    "iOS >= 8"
    "iOS >= 8",
    ,
    ]
    ]
    }
    }
    ターゲットブラウザに準じた変換が可能

    View Slide

  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}
    }`
    `)
    );
    ;
    }
    }
    }
    }
    こんなのが

    View Slide

  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;
    ;

    View Slide

  15. だがしかし。
    このままでは
    Android 2
    系, 4.0
    系までフォローできない
    ES5
    相当の
    JavaScript
    ネイティブ API
    が不足している

    View Slide

  16. やってやろうじゃねえか

    View Slide

  17. how 2:
    足りないネイティブ
    API
    を足す
    ES5
    相当のネイティブ API
    を埋める es5-shim
    を依存として追加しファイルにバンドルさせる
    es-shims/es5-shim: ECMAScript 5 compatibility shims for legacy (and modern)
    JavaScript engines

    View Slide

  18. これでもう大丈夫やろ…(
    ;´
    ∀`)
    これでもう大丈夫やろ…(
    ;´
    ∀`)

    View Slide

  19. 「一部の
    Android 2
    系では
    ES3
    相当の記述をしないと対応出来ない」

    View Slide

  20. まじかよ…(
    ;´
    ∀`)
    まじかよ…(
    ;´
    ∀`)

    View Slide

  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;
    ;

    View Slide

  22. ES3
    相当に書き換える必要がある
    Branches · sophiebits/es3ify
    最終的な生成ファイルをリビルドするスクリプトを書いた

    View Slide

  23. ファイルサイズ膨れ上がってきたんだが…(
    ;´
    ∀`)
    ファイルサイズ膨れ上がってきたんだが…(
    ;´
    ∀`)
    ここまでやったんならさすがにもう大丈夫やろ…(
    ;´
    ∀`)
    ここまでやったんならさすがにもう大丈夫やろ…(
    ;´
    ∀`)

    View Slide

  24. OS
    固有のバグ

    View Slide

  25. OS
    固有のバグ
    Uncaught TypeError: Cannot assign to read only
    property '__esModule' of #
    なにこれ…(
    ;´
    ∀`)
    任意の構文からJavaScript
    オブジェクトへ直接的なプロパティ書き込みが
    出来ないというエラー内容

    View Slide

  26. 1530 - De ning function's 'prototype' property with Object.de neProperty sets
    different value and makes property immutable - v8 - Monorail

    View Slide

  27. 出処
    Android 4.0.x
    に搭載された JavaScript
    エンジン V8
    のバグ起因
    V8
    のバージョンまで特定は出来ないが、Android 4.0.3, 4.0.4
    の標準ブラウ
    ザもしくは webview
    の V8 JavaScript
    エンジンではバグを持ったまま実装
    されている。なお 2.x
    系ではバグは起きない

    View Slide

  28. どうしたもんか

    View Slide

  29. 回避パッチで何とかなりそう

    View Slide

  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)
    );
    ;
    }
    };
    ;
    パッチを差し込むプラグインを作った
    無事に動いた…

    View Slide

  31. 紹介しきれませんがでも他にも OS
    固有のバグが多くあります…
    OS
    固有バグは網羅すること自体が人智を越えているため、トライ&
    エラ
    ーとナレッジの共有しかない

    View Slide

  32. まとめ
    ターゲットブラウザを明示し設定、意識せずコーディング
    不足した API
    は適宜 poly ll, shim
    を足し込んでフォロー
    OS
    固有のバグは知見でしかない、ぶつからないと分からない
    全身ちぎれて血まみれになりながらまとめた

    View Slide

  33. 考えていくべきこと
    紹介したことはいずれ価値のなくなるハック
    ユーザがセキュアな環境で通信出来ない事自体をきちんと考える
    レガシー対応に引きずられてサービスグロースの足を引っ張らないと良

    View Slide

  34. 支えなくて良い技術を支える
    少なくともユーザがいる限りは
    フロントエンドの技術で支えきる

    View Slide