JavaScriptCoreの Object.groupBy / Map.groupBy の バグを自分で見つけて自分で直す 2023/04/25 meguro.es

自己紹介 SUZUKI Sosuke ユビー株式会社のプロダクト開発エンジニア Prettierのメンテナー 筑波大学の学生 最近はWebKitがアツい @__sosukesuzuki @sosukesuzuki

Object.groupBy / Map.groupBy とは ● ES2024から追加された新しいビルトイン ○ https://github.com/tc39/proposal-array-grouping ● LodashのgroupByと同じような便利な関数 ● このスライドでは Object.groupBy と Map.groupBy をまとめて GroupBy と呼ぶことにする

Object.groupBy / Map.groupBy とは

GroupByは何をする？ GroupBy は1番目の引数として配列(items)を受け取り、2番目の引数 として関数(callbackfn)を受けとり、callbackfnを使ってitemsをグ ルーピングし、結果をオブジェクト(もしくはMap)として返す。

GroupByの仕様 https://tc39.es/ecma262/#sec-groupby

GroupByの仕様 https://tc39.es/ecma262/#sec-groupby 配列に限定されているわけではない

GroupByは何をする？ GroupBy は1番目の引数として配列(items)を受け取り、2番目の引数 として関数(callbackfn)を受けとり、callbackfnを使ってitemsをグ ルーピングし、結果をオブジェクト(もしくはMap)として返す。 イテラブル

JavaScriptCoreのGroupByの実装 https://github.com/WebKit/WebKit/blob/ab951214497597d3 41962219a73d4b1ce743f19e/Source/JavaScriptCore/builtins/ ObjectConstructor.js (ライセンスは次ページ ) 内部用の関数呼び出しに @ が付いているが、基本 的には普通のJavaScript で書かれている

JavaScriptCoreのGroupByのライセンス /* * Copyright (C) 2016 Oleksandr Skachkov . * Copyright (C) 2015 Jordan Harband. All rights reserved. * Copyright (C) 2018 Yusuke Suzuki . * Copyright (C) 2023 Devin Rousso . * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ https://github.com/WebKit/WebKit/blob/ab951214497597d3 41962219a73d4b1ce743f19e/Source/JavaScriptCore/builtins/ ObjectConstructor.js (前ページのコードのライセンス )

JavaScriptCoreのGroupByの実装 https://github.com/WebKit/WebKit/blob/ab951214497597d3 41962219a73d4b1ce743f19e/Source/JavaScriptCore/builtins/ ObjectConstructor.js (ライセンスは次ページ ) itemsがオブジェクトでない場合、 その場でTypeErrorをthrowする

JavaScriptCoreのGroupByの実装 https://github.com/WebKit/WebKit/blob/ab951214497597d3 41962219a73d4b1ce743f19e/Source/JavaScriptCore/builtins/ ObjectConstructor.js (ライセンスは次ページ ) これでいいんだっけ？

JavaScriptCoreのGroupByの実装 https://github.com/WebKit/WebKit/blob/ab951214497597d3 41962219a73d4b1ce743f19e/Source/JavaScriptCore/builtins/ ObjectConstructor.js (ライセンスは次ページ ) オブジェクトではないイテラブルに対してもTypeErrorを throwしてしまうのでは？つまり...

JavaScriptCoreのGroupByの実装 https://github.com/WebKit/WebKit/blob/ab951214497597d3 41962219a73d4b1ce743f19e/Source/JavaScriptCore/builtins/ ObjectConstructor.js (ライセンスは次ページ ) Stringは？

GroupByのitemsがStringのときの正しい挙動 Chrome 123 で確認

GroupByのitemsがStringのときのJSCの挙動

バグを報告する ● GitHub issues ではなく https://bugs.webkit.org ○ https://bugs.webkit.org/show_bug.cgi?id=271524

バグを報告する ● GitHub issues ではなく https://bugs.webkit.org ○ https://bugs.webkit.org/show_bug.cgi?id=271524

JSCをローカルでビルドする ● https://github.com/WebKit/WebKit を clone する ○ デカすぎるので注意 ● JSCをビルドできるようにする ○ WebKitのビルドはCMakeとXCodeの二通りがある ○ Mac なら XCode を入れて ./Tools/Scripts/build-jsc –debug でいける ○ 自分はCMakeでのビルドを通せたことがない

JSCをローカルでビルドする ● デバッガの設定 ○ C++プロジェクトなのでLLDBを設定しておくと便利 ● VSCodeの設定 ○ 現時点で自分の設定を Gist に投稿しておいたので興味のある 方は参照してほしい ■ https://gist.github.com/sosukesuzuki/da19f1b789031 f19ad88ef2446beb7da

リポジトリのセットアップ ● WebKitが出しているガイドがいくつかあるのでこれらに従ってセット アップする（なんでいくつかあるんだ） ○ https://webkit.org/contributing-code/ ○ https://docs.webkit.org/Getting%20Started/Contributing Code.html#commit-messages ○ https://github.com/WebKit/WebKit/wiki/Contributing

JSCを直す https://github.com/WebKit/WebKit/pull/26383

JSCを直す https://github.com/WebKit/WebKit/pull/26383 !@isObject を @isUndefinedOrNull に (RequireObjectCoercible に対応する https://tc39.es/ecma262/#sec-requireobjectco ercible)

JSCを直す https://github.com/WebKit/WebKit/pull/26383 Symbol.iterator がないオブジェクトに対して 親切なエラーメッセージを投げる。 これがないと、58 行目の for 文で undefined is not a function になる

JSCを直す https://github.com/WebKit/WebKit/pull/26383 items[Symbol.iterator] がゲッターだった 場合に観測可能な副作用が生じうるので、ラッ パーオブジェクトを作成し、それを for of で回 す。

JSCを直す ● 最近のWebKitはGitで管理され、GitHubで開発されているが、Git の使い方にルールがあるので注意 ● ./Tools/Scripts/git-webkit を使ってcommitとかpushと かをする ● これもコントリビューションガイドに書いてある

JSCを直す Merged 🎉🎉

Test262にテストケースを追加する GroupBy のバグ直したん だ〜すごいでしょ〜 ???? へ〜

Test262にテストケースを追加する GroupBy のバグ直したん だ〜すごいでしょ〜 ???? で、test262 は？

Test262にテストケースを追加する だよね ????

Test262にテストケースを追加する ● test262は「Official ECMAScript Conformance Test Suite」 ○ https://github.com/tc39/test262 ● 要は「ECMAScriptを実装しているやつが満たしておくべきテスト ケース」 ● 結構エグいテストケースが多く、各エンジンの通過率は以下(2024 年4月23日)

Test262にテストケースを追加する ● 「GroupBy が文字列を受け取れるようになっていること」を検証する テストはtest262には存在しない ● そういうテストはあったほうが良さそう

Test262にテストケースを追加する https://github.com/tc39/test 262/issues/4036

Test262にテストケースを追加する ● こんなテストを追加 https://github.com/tc39/test262/bl ob/007b333af22d8b8466be3394b 9248345ac4445c9/test/built-ins/M ap/groupBy/string.js

まとめ ● GroupByのバグを自分で発見し自分で修正しtest262を更新するこ とができた ○ ぼーっと見てたらなんとなくバグを見つけただけなので発見の部 分に再現性はないが... ● WebKitのJavaScriptビルトインの実装の一部はJavaScriptで記述 されているので、C++などの知識がなくても簡単な修正なら可能