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メソッドと比較したその特性と限界について触れています。

Transcript

1. +40/
   
   0CKFDU
   UJQT
2. Who Name 青野健利 GitHub @brn Twitter @brn227 What Dev Lead at 株式会社AI Shift Contributor of V8 Javascript Engine
3. +40/TUSJOHJGZ
4. JSON.stringify使えてますか？ JSON.stringify JSON.stringifyはJSONを文字列化するだけ
5. ͡Όͳ͍
6. JSON.stringifyの定義 JSON.stringify JSON.stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string;
7. JSON.stringifyの定義 JSON.stringify replacer?: (number | string)[] | null
8. 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}'
9. replacer JSON.stringify JSONを文字列化する際に値を置き換えるだけ
10. ͡Όͳ͍
11. 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}}}'
12. replacer JSON.stringify ネストした複雑なJSONを自動で巡回して 値を取得することが可能
13. UZQJB
14. JSON.stringifyは遅い JSON.stringify あらゆる構造のJSONに対応しているため
15. TypeScriptの型情報を使いたい JSON.stringify JSON.stringify早くできそう
17. TypeScriptの型情報を使いたい typia type User = { firstName: string; lastName: string; age: number; reg: RegExp; }; console.log( typia.json.stringify<User>({ firstName: "Matteo", lastName: "Collina", age: 32, reg: /"([^"]|\\")*"/, }) );
18. なぜ早くなるのか typia 型情報を使って事前にコンパイルするから
19. 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: /"([^"]|\\")*"/, }) );
20. 他にも色々あります typia // RUNTIME VALIDATORS export function is<T>(input: unknown): input is T; // returns boolean export function assert<T>(input: unknown): T; // throws TypeGuardError export function validate<T>(input: unknown): IValidation<T>; // detailed // JSON FUNCTIONS export namespace json { export function application<T>(): IJsonApplication; // JSON schema export function assertParse<T>(input: string): T; // type safe parser export function assertStringify<T>(input: T): string; // safe and faster } // PROTOCOL BUFFER export namespace protobuf { export function message<T>(): string; // Protocol Buffer message export function assertDecode<T>(buffer: Uint8Array): T; // safe decoder export function assertEncode<T>(input: T): Uint8Array; // safe encoder } // RANDOM GENERATOR export function random<T>(g?: Partial<IRandomGenerator>): T;
21. TUSVDUVSFE$MPOF
22. Objectのコピー structuredClone JSON.stringifyとparse使うとできるけど..
23. JSONを経由したクローン方法 structuredClone JSON.parse(JSON.stringify({a:1}))
24. 簡単にできる structuredClone structuredClone({a: 1})
25. Structured Clone の仕様 structuredClone • Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DataCloneError 例外が 発生します。 • DOM ノードを複製するときも同様に DataCloneError 例外発生します。 • 一部のオブジェクトのプロパティは保持されません。 • RegExp オブジェクトの lastIndex フィールドは保持されません。 • プロパティ記述子、セッター、ゲッター（もしくは同様のメタデータ系機能）は複製されません。 たとえば、あるオブジェク トがプロパティ記述子によって読み取り専用になっている場合でも、複製したものでは既定の条件である読み取り/書 き込みに変わります。 • プロトタイプチェーンは探索、複製されません。
26. Structured Clone の仕様 structuredClone https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm