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

JSON & Object Tips

JSON & Object Tips

The slide provides detailed insights into advanced techniques and tips for using JSON and JavaScript objects. It covers topics like the use of JSON.stringify, including its definition, functionalities, and how it goes beyond simple stringification of JSON. The slide delves into the use of the replacer function in JSON.stringify, explaining its purpose and demonstrating its application with code examples. Additionally, it touches on performance aspects, comparing JSON.stringify with other methods and suggesting more efficient alternatives like typia. The latter part of the slide focuses on structuredClone for object copying, highlighting its specifications and limitations compared to traditional JSON methods.

JSONとJavaScriptオブジェクトを使う際の高度なテクニックとコツについて詳しく説明しています。JSON.stringifyの使用方法、その定義、機能、単純なJSON文字列化を超える機能について触れています。また、JSON.stringifyにおけるreplacer関数の使用方法やその目的について、コード例を交えて説明しています。さらに、他の方法と比較したパフォーマンスの観点から、より効率的な代替方法としてtypiaの使用を提案しています。スライドの後半では、オブジェクトのコピーにstructuredCloneを使用することに焦点を当て、伝統的なJSONメソッドと比較したその特性と限界について触れています。

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. +40/0CKFDUUJQT

    View full-size slide

  2. Who


    Name 青野健利


    GitHub @brn


    Twitter @brn227


    What


    Dev Lead at 株式会社AI Shift


    Contributor of V8 Javascript Engine

    View full-size slide

  3. +40/TUSJOHJGZ

    View full-size slide

  4. JSON.stringify使えてますか?
    JSON.stringify
    JSON.stringifyはJSONを文字列化するだけ

    View full-size slide

  5. JSON.stringifyの定義
    JSON.stringify
    JSON.stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string;

    View full-size slide

  6. JSON.stringifyの定義
    JSON.stringify
    replacer?: (number | string)[] | null

    View full-size slide

  7. replacerとは?
    JSON.stringify
    function replacer(key, value) {


    // ϓϩύςΟΛϑΟϧλʔ͢Δ


    if (typeof value === "string") {


    return undefined;


    }


    return value;


    }




    var foo = {


    foundation: "Mozilla",


    model: "box",


    week: 45,


    transport: "car",


    month: 7,


    };


    JSON.stringify(foo, replacer);


    // '{"week":45,"month":7}'


    View full-size slide

  8. replacer
    JSON.stringify
    JSONを文字列化する際に値を置き換えるだけ

    View full-size slide

  9. replacerで巡回
    JSON.stringify
    JSON.stringify({a: {b: {c: 1}}}, (...args) => {console.log(JSON.stringify(args));return args[1]}, "")


    // ["",{"a":{"b":{"c":1}}}]


    // ["a",{"b":{"c":1}}]


    // ["b",{"c":1}]


    // ["c",1]


    // '{"a":{"b":{"c":1}}}'

    View full-size slide

  10. replacer
    JSON.stringify
    ネストした複雑なJSONを自動で巡回して


    値を取得することが可能

    View full-size slide

  11. JSON.stringifyは遅い
    JSON.stringify
    あらゆる構造のJSONに対応しているため

    View full-size slide

  12. TypeScriptの型情報を使いたい
    JSON.stringify
    JSON.stringify早くできそう

    View full-size slide

  13. TypeScriptの型情報を使いたい
    typia
    type User = {


    firstName: string;


    lastName: string;


    age: number;


    reg: RegExp;


    };


    console.log(


    typia.json.stringify({


    firstName: "Matteo",


    lastName: "Collina",


    age: 32,


    reg: /"([^"]|\\")*"/,


    })


    );

    View full-size slide

  14. なぜ早くなるのか
    typia
    型情報を使って事前にコンパイルするから

    View full-size slide

  15. console.log(


    ((input) => {


    const $io1 = (input) =>


    "string" === typeof input.source &&


    "boolean" === typeof input.global &&


    "boolean" === typeof input.ignoreCase &&


    "boolean" === typeof input.multiline &&


    "number" === typeof input.lastIndex &&


    "string" === typeof input.flags &&


    "boolean" === typeof input.sticky &&


    "boolean" === typeof input.unicode &&


    "boolean" === typeof input.dotAll;


    const $string = typia.json.stringify.string;


    return `{"firstName":${$string(input.firstName)},"lastName":${$string(


    input.lastName


    )},"age":${input.age},"reg":${`{"source":${$string(


    input.reg.source


    )},"global":${input.reg.global},"ignoreCase":${


    input.reg.ignoreCase


    },"multiline":${input.reg.multiline},"lastIndex":${


    input.reg.lastIndex


    },"flags":${$string(input.reg.flags)},"sticky":${


    input.reg.sticky


    },"unicode":${input.reg.unicode},"dotAll":${input.reg.dotAll}}`}}`;


    })({


    firstName: "Matteo",


    lastName: "Collina",


    age: 32,


    reg: /"([^"]|\\")*"/,


    })


    );


    View full-size slide

  16. 他にも色々あります
    typia
    // RUNTIME VALIDATORS


    export function is(input: unknown): input is T; // returns boolean


    export function assert(input: unknown): T; // throws TypeGuardError


    export function validate(input: unknown): IValidation; // detailed




    // JSON FUNCTIONS


    export namespace json {


    export function application(): IJsonApplication; // JSON schema


    export function assertParse(input: string): T; // type safe parser


    export function assertStringify(input: T): string; // safe and faster


    }




    // PROTOCOL BUFFER


    export namespace protobuf {


    export function message(): string; // Protocol Buffer message


    export function assertDecode(buffer: Uint8Array): T; // safe decoder


    export function assertEncode(input: T): Uint8Array; // safe encoder


    }




    // RANDOM GENERATOR


    export function random(g?: Partial): T;

    View full-size slide

  17. TUSVDUVSFE$MPOF

    View full-size slide

  18. Objectのコピー
    structuredClone
    JSON.stringifyとparse使うとできるけど..

    View full-size slide

  19. JSONを経由したクローン方法
    structuredClone
    JSON.parse(JSON.stringify({a:1}))


    View full-size slide

  20. 簡単にできる
    structuredClone
    structuredClone({a: 1})


    View full-size slide

  21. Structured Clone の仕様
    structuredClone
    • Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DataCloneError 例外が
    発生します。


    • DOM ノードを複製するときも同様に DataCloneError 例外発生します。


    • 一部のオブジェクトのプロパティは保持されません。


    • RegExp オブジェクトの lastIndex フィールドは保持されません。


    • プロパティ記述子、セッター、ゲッター(もしくは同様のメタデータ系機能)は複製されません。 たとえば、あるオブジェク
    トがプロパティ記述子によって読み取り専用になっている場合でも、複製したものでは既定の条件である読み取り/書
    き込みに変わります。


    • プロトタイプチェーンは探索、複製されません。

    View full-size slide

  22. Structured Clone の仕様
    structuredClone
    https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

    View full-size slide