無からniboshiを生み出す

Transcript

1. 無からniboshiを⽣み出す Pasta-K niboshi.js ( in Helpfeel 開発部全体会 2025 ) 2025-10-10 1
2. About me 2 • Pasta-K ◦ よく呼ばれる呼び⽅: /^ぱすた(けー?)?(くん|さん)*$/ ◦ https://x.com/pastak ◦ https://blog.pastak.net/ • 株式会社 Helpfeel Gyazoチーム エンジニア ◦ 主にフロントエンドを中⼼に担当 ◦ 最近はReact v17のFlux脱出などをしている • 趣味 ◦ サッカー観戦 ▪ J1 京都サンガF.C.のほぼ全試合を現地観戦 ◦ クラフトビール ◦ マンガ
3. スライドが60枚くらいあるので、 先に成果物を⾒せます 3
4. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 4
5. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 5
6. 無からniboshiを⽣み出す 6
7. 無からniboshiを⽣み出す JavaScriptにおける無 7
8. • JavaScriptにおける無 ◦ undefined ◦ null JavaScriptにおける無 8
9. • nullは値、undefinedは変数 • 存在しない変数や要素にアクセスすると undefined が帰ってくる ◦ const obj = {}; console.log(obj.foo) // undefined ◦ ↑のconsole.logような返り値のない関数の返り値も undefined • console.log(typeof null) // “object” • console.log(typeof undefined) // “undefined” > Use undefined. Do not use null. ◦ https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#n ull-and-undefined undefined vs null 9
10. 無からniboshiを⽣み出す 10
11. undefinedからniboshiを⽣み出す 11
12. • undefinedの中からniboshiを感じ取る undefinedの中のniboshi 12
13. • undefinedの中からniboshiを感じ取る ◦ niはある: undefined (後ろの⽅が連続していてよりniboshi) undefinedの中のniboshi 13
14. • undefinedの中からniboshiを感じ取る ◦ niはある: undefined (後ろの⽅が連続していてよりniboshi) ◦ niboshi: 末尾のhとiはアルファベットが1つ違い ◦ undefined: 末尾のfとeはアルファベットが1つ違い undefinedの中のniboshi 14
15. ここまでの発⾒を整理 15 undefined niboshi niをひっくり返す
16. ここまでの発⾒を整理 16 undefined niboshi アルファベット順で 1つ違いという共通点
17. ここまでの発⾒を整理 17 undefined niboshi 同じ⽂字数
18. ここまでの発⾒を整理 18 undefined niboshi 同じ⽂字数 アルファベット順で 1つ違いという共通点 niをひっくり返す
19. • undefinedの中からniboshiを感じ取る ◦ niはある: undefined ◦ niboshi: 末尾のhとiはアルファベットが1つ違い ◦ undefined: 末尾のeとdはアルファベットが1つ違い ◦ 残りの部分も⼤体⽂字数が同じ undefinedの中のniboshi 19
20. Challenge: undefinedをniboshiにしてみよう ① 20 • ここまでの知識を使って、undefinedをniboshiにしてみましょう • 15秒くらい待ちます
21. undefinedをniboshiにしてみよう 21
22. Challenge: undefinedをniboshiにしてみよう ② 22 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒
23. Challenge: undefinedをniboshiにしてみよう ② 23
24. Challenge: undefinedをniboshiにしてみよう ③ 24 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒ 禁⽌事項
25. Challenge: undefinedをniboshiにしてみよう ③ 25 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒ 禁⽌事項 • セミコロン禁⽌
26. Challenge: undefinedをniboshiにしてみよう ③ 26 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒ 禁⽌事項 • セミコロン禁⽌ • 数値‧undefind‧null を値として記述することは禁⽌
27. Challenge: undefinedをniboshiにしてみよう ③ 27 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒ 禁⽌事項 • セミコロン禁⽌ • 数値‧undefind‧null を値として記述することは禁⽌ • 空⽂字列以外の⽂字列の記述禁⽌
28. Challenge: undefinedをniboshiにしてみよう ③ 28 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒ 禁⽌事項 • セミコロン禁⽌ • 数値‧undefind‧null を値として記述することは禁⽌ • 空⽂字列以外の⽂字列の記述禁⽌ • {}やnew Object()以外のオブジェクトの記述禁⽌ • 1つ以上の要素を持つ配列の記述禁⽌
29. Challenge: undefinedをniboshiにしてみよう ③ 29 • コードの冒頭でundefinedが⼊っている変数を定義して、その値を操作して ⽂字列 “niboshi” を出⼒ 禁⽌事項 • セミコロン禁⽌ • 数値‧undefind‧null を値として記述することは禁⽌ • 空⽂字列以外の⽂字列の記述禁⽌ • {}やnew Object()以外のオブジェクトの記述禁⽌ • 1つ以上の要素を持つ配列の記述禁⽌ • 当然⽂字列 “niboshi” や個別の⽂字として”n”などを記述するのも禁⽌
30. こういうコードは禁⽌されています • const u = undefind ◦ undefinedを値として記述することの禁止 • console.log(“niboshi”) ◦ 空文字列以外の文字列禁止 • (function niboshi () {}).name ◦ 直接 niboshi を書くことの禁止 • Object.keys({niboshi: ‘’})[0] // “niboshi” ◦ {}以外のオブジェクトの禁止・数値記述禁止 やってみよう 30
31. では、皆さんやってみてください!!!!! 書けた⼈はMeetでコードを出してください 短いほうがボーナスがあるということにします 31
32. 皆さんがコードを頭を捻ったりコードを書いている間に 使えるかもしれない(?)⾖知識を披露するコーナー 32
33. • そもそも変数宣⾔だけすれば良い ◦ const u; console.log(u) // undefined • 他の⽅法は？ undefinedを⽣み出す⽅法⾊々 33
34. • nullは値、undefinedは変数 • 存在しない変数や要素にアクセスすると undefined が帰ってくる ◦ const obj = {}; console.log(obj.foo) // undefined ◦ ↑のconsole.logような返り値のない関数の返り値も undefined • console.log(typeof null) // “object” • console.log(typeof undefined) // “undefined” > Use undefined. Do not use null. ◦ https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#n ull-and-undefined 再掲: undefined vs null 34
35. • そもそも変数宣⾔だけすれば良い ◦ const u; console.log(u) // undefined • 他の⽅法は？ ◦ const u = console.log(); ◦ const u = {}.foo; ◦ const u = [][0] undefinedを⽣み出す⽅法⾊々 35
36. • String.prototype.bold() ◦ ⽂字列を<b>タグで囲った⽂字列を返す ◦ “hello”.bold() // “<b>hello</b>” • 空⽂字からbを⽣み出す (2は頑張ってください) ◦ “”.bold()[2] // “b” • 亜種 ◦ String.prototype.italics() ▪ “hello”.italics() // “<i>hello</i>” ◦ String.prototype.fontsize() ▪ “hello”.fontsize(5) // “<font size=’5’>hello</font>” 空⽂字列からbやiを⽣み出す 36
37. • オブジェクトを⽂字列にした結果は？ ◦ Object.prototype.toString ◦ JSON.stringifyを 介した Object.prototype.toJSON ⽂字を獲得するその他の⽅法について考える 37
38. • オブジェクトを⽂字列にした結果は？ ◦ Object.prototype.toString ◦ JSON.stringifyを 介した Object.prototype.toJSON • toStringが上書きされていない任意のオブジェクトのtoString()を呼び出した結 果は常に同じ ◦ ({}).toString() // '[object Object]' • toString()は空⽂字列との連結に置き換え可能 ◦ ‘’+{} // '[object Object]' ⽂字を獲得するその他の⽅法について考える 38
39. • オブジェクトを⽂字列にした結果は？ ◦ Object.prototype.toString ◦ JSON.stringifyを 介した Object.prototype.toJSON • toStringが上書きされていない任意のオブジェクトのtoString()を呼び出した結 果は常に同じ ◦ ({}).toString() // '[object Object]' • toString()は空⽂字列との連結に置き換え可能 ◦ ‘’+{} // '[object Object]' • 文字列に配列のようにアクセスするとその文字が取得できる ◦ (‘’+{})[2] // ‘b’ ⽂字を獲得するその他の⽅法について考える 39
40. • めっちゃ⻑い⽂字列を取得できる⽅法を考えてみる ◦ ⽂字列がいっぱいあるやつと⾔えば…… ⽂字を獲得するその他の⽅法について考える 40
41. • めっちゃ⻑い⽂字列を取得できる⽅法を考えてみる ◦ ⽂字列がいっぱいあるやつと⾔えば…… ◦ そう、エラーメッセージ！！！！！！ ⽂字を獲得するその他の⽅法について考える 41
42. • めっちゃ⻑い⽂字列を取得できる⽅法を考えてみる ◦ ⽂字列がいっぱいあるやつと⾔えば…… ◦ そう、エラーメッセージ！！！！！！ • 便利そうなエラーメッセージを⾒つけてきました ◦ document.querySelector ⽂字を獲得するその他の⽅法について考える 42
43. • めっちゃ⻑い⽂字列を取得できる⽅法を考えてみる ◦ ⽂字列がいっぱいあるやつと⾔えば…… ◦ そう、エラーメッセージ！！！！！！ • 便利そうなエラーメッセージを⾒つけてきました ◦ document.querySelector ▪ 引数がないとき ⽂字を獲得するその他の⽅法について考える 43
44. • めっちゃ⻑い⽂字列を取得できる⽅法を考えてみる ◦ ⽂字列がいっぱいあるやつと⾔えば…… ◦ そう、エラーメッセージ！！！！！！ • 便利そうなエラーメッセージを⾒つけてきました ◦ document.querySelector ▪ 引数があるがSelectorとして無効なとき ⽂字を獲得するその他の⽅法について考える 44
45. • エラーのメッセージにniboshi を⾒つける • 共通部分 ◦ Failed to execute 'querySelector' on 'Document': • 異なる部分 ◦ 1 argument required, but only 0 present. ▪ bはこっちにだけある ◦ The provided selector is empty. ▪ hはこっちにだけある ⽂字を獲得するその他の⽅法について考える 45
46. • String.prototype.charCodeAt() ◦ ⽂字から数値(コードポイント)を得る • String.fromCharCode() ◦ 数値(コードポイント)から⽂字を得る ⽂字を獲得するその他の⽅法について考える 46
47. • Number()で任意の値を数値に変換する 数値を⽣み出す 47
48. • Number()で任意の値を数値に変換する ◦ 引数がtrue / false のときは 1 / 0 ◦ 引数がオブジェクトの時は…… ▪ → LT: JavaScript / HTML カルトクイズ - Speaker Deck 数値を⽣み出す 48
49. • Number()で任意の値を数値に変換する ◦ 空⽂字列はfalsy ◦ Number('') // 0 • ショートハンドとしての+ ◦ +’’ // 0 • undefinedが作れたらそれを活⽤する ◦ undefinedはfalsy ◦ !undefinedはtruthy ◦ (+!undefind) // 0 数値を⽣み出す 49
50. pastakが書いてみた例 50
51. • undefindを⽂字列化 // ʻundefined’ • 配列にする // [ʻu’, ʻn’, ʻd’, ʻe’, ʻf’, ʻi’, ʻn’, ʻe’, ʻd’] • 末尾2つを捨てる // [ʻu’, ʻn’, ʻd’, ʻe’, ʻf’, ʻi’, ʻn’] • ひっくり返す // [ʻn’, ʻi’, ʻf’, ʻe’, ʻd’, ʻn’, ʻu’] ◦ ni 発⽣ • 2番⽬を ʻb’ に // [ʻn’, ʻi’, ʻb’, ʻe’, ʻd’, ʻn’, ʻu’] • 連番を利⽤して // [ʻn’, ʻi’, ʻb’, ʻo’, ʻs’, ʻn’, ʻu’] ◦ e → o コードポイント的には 101 → 111 差分は10 ◦ d→s コードポイント的には 100 → 115 差分は15 ◦ 元の⽂字のコードポイントに5*2と5*3を⾜す 作戦 51
52. • エラーメッセージからhを取り出す // [ʻn’, ʻi’, ʻb’, ʻo’, ʻs’, ʻh’, ʻu’] ◦ document.querySelector(‘’)のエラーメッセージから • 2番⽬のiを流⽤ // [ʻn’, ʻi’, ʻb’, ʻo’, ʻs’, ʻh’, ʻi’] • この配列をjoin() // ‘niboshi’ そうして完成したのがこちら 作戦 52
53. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 53
54. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 54
55. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 55 ⼀番の⾒どころご紹介
56. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 56
57. 57 [_i_]
59. 59 [_i_]
60. https://gist.github.com/pastak/c5e2400a3d6deee71259c07bc5e6263b 60 ![]はfalsyなので[][![]] は[][0]でundefinedを得 て、uに代入 undefinedから1を作って_に _+_で2。色々やって _i_に 5。$は’undefined’をsplit して置き換えた配列。 ひっくり返して、 withで要素 を書き換えして iを流用。 map使って、indexを使ってo とsを生成。エラーメッセー ジからhを取り出して withで 要素置き換え。 最後にjoin()でくっつける。 セミコロン禁止なので、文を ||や&&でつなぐ
61. • ⾊んな⼿法でundefinedや⽂字列などを⽣成する⽅法について紹介しました • Array.prototype.with()便利なのでおすすめです • コードを圧縮したり、ショートハンドに置き換える⽅法についても紹介しまし た • 皆さんも無からniboshiを⽣成する良いコードが出来たら是⾮教えて下さい まとめ 61