Slide 1

Slide 1 text

TSKaigi ZOZOブース クイズの裏側 株式会社ZOZO 基幹システム本部 リプレイス推進部 リプレイス推進ブロック テックリード 冨川 宗太郎 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

株式会社ZOZO 基幹システム本部 リプレイス推進部 リプレイス推進ブロック テックリード 冨川 宗太郎 ssssota / Xは@ssssotaro いろんなフロントエンドカンファレンスに出没 TSKaigi 2026は以下の内容で登壇 「ReactとSvelteのその先、Ripple-TS」 登壇後からRipple/TSRXが変更祭りで汗 © ZOZO, Inc. 2

Slide 3

Slide 3 text

https://zozo.jp/ ● ファッションEC ● 1,700以上のショップ、11,000以上のブランドの取り扱い ● 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新着 商品を掲載(2026年3月末時点) ● ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー&デザイナーズゾーン 「ZOZOVILLA」を展開 ● 即日配送サービス ● ギフトラッピングサービス ● ツケ払い など © ZOZO, Inc. 3

Slide 4

Slide 4 text

ZOZOのブース、行きましたか? 株式会社ZOZO、スポンサーしてました。 2日間で計20問の激ムズ(?)JS/TSクイズをやっていました。 いくつかクイズの解説と、 作問、アプリ作成の裏側を紹介します。 © ZOZO, Inc. 4

Slide 5

Slide 5 text

Day1 Q1 次のコードはエラーになる? (tsconfig strict:true) const a = 1 + '1'; © ZOZO, Inc. 1. 実行時エラー 2. コンパイルエラー 3. ならない 5

Slide 6

Slide 6 text

Day1 Q1 次のコードはエラーになる? (tsconfig strict:true) const a = 1 + '1'; 1. 実行時エラー 2. コンパイルエラー 3. ならない 実行時はJavaScriptなので演算時に 動的に文字列化する。 このようなJavaScriptの挙動を許容するため コンパイルでエラーにならない。 検出したい場合ESLint/Oxlintが必要。 © ZOZO, Inc. 6

Slide 7

Slide 7 text

Day1 Q3 TypeScript 7 はなんの言語 で開発されている? © ZOZO, Inc. 1. TypeScript 2. Rust 3. Go 7

Slide 8

Slide 8 text

Day1 Q3 TypeScript 7 はなんの言語 で開発されている? 1. TypeScript 2. Rust 3. Go パフォーマンスとTypeScript実装の移植性から Go言語が選定された。 (基調講演でもありましたね) © ZOZO, Inc. 8

Slide 9

Slide 9 text

Day1 Q9 次の JavaScript ファイルを実行するとエラー になるのは? const obj = {}; obj.__proto__.a = 1; console.log(obj.a); 1. Node.js 2. Deno 3. Bun // node ./index.mjs // deno run ./index.mjs // bun run ./index.mjs © ZOZO, Inc. 9

Slide 10

Slide 10 text

Day1 Q9 次の JavaScript ファイルを実行するとエラー になるのは? const obj = {}; obj.__proto__.a = 1; console.log(obj.a); // node ./index.mjs // deno run ./index.mjs // bun run ./index.mjs © ZOZO, Inc. 1. Node.js 2. Deno 3. Bun Denoはセキュリティ上の理由から、 Object.prototype.__proto__ をサポート していない。(プロトタイプ汚染防止) Node.jsでも --disable-proto オプションで 無効化可能。 10

Slide 11

Slide 11 text

Day2 Q4 返り値の型が void で推論されるのは? const A = () => { throw 'Oops'; }; function B() { throw 'Oops'; } const C = function () { throw 'Oops'; }; © ZOZO, Inc. 1. A 2. B 3. C 11

Slide 12

Slide 12 text

Day2 Q4 返り値の型が void で推論されるのは? const A = () => { throw 'Oops'; }; function B() { throw 'Oops'; } const C = function () { throw 'Oops'; }; © ZOZO, Inc. 1. A 2. B 3. C class メソッドのオーバーライド挙動のために Bになっている(とされている)。 A, Cはneverで推論される。 ref. Inconsistent never type inference 12

Slide 13

Slide 13 text

Day2 Q5 次のコードの結果は? "use strict"; let str = "zozo"; str[0] = "s"; console.log(str); © ZOZO, Inc. 1. "sozo" 2. "zozo" 3. Error 13

Slide 14

Slide 14 text

Day2 Q5 次のコードの結果は? "use strict"; let str = "zozo"; str[0] = "s"; console.log(str); 1. "sozo" 2. "zozo" 3. Error 文字列リテラルのindex-access propertyは writable:falseなので上書きできない。 writable:falseをstrictモードで上書きしよう とするとエラー © ZOZO, Inc. 14

Slide 15

Slide 15 text

何問わかりましたか? TSKaigiでは1日目、2日目それぞれ10問ずつ出題し平均4点くらいでした。 (正確な統計が取れてないので感覚値) 他にも15問あるので、会場で挑戦できなかったひとはテックブログへ → TSKaigi 2026 スポンサーブースクイズ解説 - ZOZO TECH BLOG © ZOZO, Inc. 15

Slide 16

Slide 16 text

時は遡り... © ZOZO, Inc. 16

Slide 17

Slide 17 text

難問クイズ20問を考える ● ● ● ● ● ● TypeScriptのカンファレンス ○ TypeScript/JavaScript すべてが難しすぎると辛い。そもそも難問とは...? ○ とても複雑だったり、極度な知識問題は難しいかもしれないが面白くない AIに相談する ○ →絶妙におもしろみに欠ける問題を作ってくれる ZOZOにつながるエッセンスも... 型に関するクイズは過去にも... (TSKaigi Kansai 2024) ○ JavaScriptもひとつまみ... ギリギリ実務で役に立たないラインがほどよく難しく面白い 4/21(TSKaigi 1ヶ月前、ブース印刷物など余裕を持って)、業務の隙間で20問完成 © ZOZO, Inc. 17

Slide 18

Slide 18 text

どうやって10問解いてもらう? ● ● ● ● ● ● ● ● ● ● Google Forms? 紙? フロントエンドエンジニアなのにアプリ作らないのか...? →答えはどう開示する? →フロントエンドエンジニアとしてはクライアントには答えを含めたくない →バックエンド込みの公開は会社のルール的に少し大変 →GitHub Pagesでなんとかいけると手早い... →QRコードで回答読み込みならアプリケーションには回答を載せなくても済む GitHub Pages + QRコードな仕組みでアプリを作ろう フレームワークは? ○ たまたま登壇がRipple-TSだからそれも使ってみよう! © ZOZO, Inc. 18

Slide 19

Slide 19 text

AIに頼る ● ● ● アプリの要件を洗い出しAI Agentに投げつける バンドルサイズやライブラリ利用など、AIの判断が怪しい箇所は人間でカバー QRコードリーダーで正解を読み取る形式にしたので自動テストはコストに見合わないと判断 ○ 2日だけの命、多少の不具合が出ても目を瞑ってもらう © ZOZO, Inc. 19

Slide 20

Slide 20 text

ssssotaアメリカへ ● ● ● ● ● ● 5/18 Google I/O 2026に参加するためサンフランシスコへ✈ 5/19 Google I/O Day1 5/20 Google I/O Day2 5/21 深夜1時のフライトで羽田へ✈ 5/22 早朝5時羽田着→荷物を置きに自宅へ→TSKaigiに参加するため羽田へ 5/23 登壇 © ZOZO, Inc. 20

Slide 21

Slide 21 text

おわりに 改めて、クイズは楽しんでもらえましたか? クイズは「滅多に使わないけど、いつか役に立ちそう」くらいが楽しい。 みんなも業務に役に立たないクイズを(作ろう|やろう)! © ZOZO, Inc. 21

Slide 22

Slide 22 text

No content