ECMAScript仕様輪読会 #1

Scrapboxの招待リンク: https://scrapbox.io/projects/esspec/invitations/85b96c9fa718ce5185e307196ed8fb53

connpass: https://esspec.connpass.com/

Twitter hashtag: #esspec

はじめに

📝Meetの録画OKか確認してから始める

録画はsyumaiの手元には残します

公開はちょっと・・、と言う場合はsyumaiに連絡ください

特に連絡なければYouTubeに出そうと思います

読むもの

ECMA 262: https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

ECMAScript 2021 仕様書: https://262.ecma-international.org/12.0/

やること

✗ 全部読む

○ 読み方を覚える

よく読むであろう場所の読み方

基本的な文法

読み方について読む

https://timothygu.me/es-howto/

https://v8.dev/blog/understanding-ecmascript-part-1

スケジュール

19:30 集合、自己紹介

20:42 ~ 20:53 休憩

(21:45 くらい？) 今後の予定について相談

22:00 終了

自己紹介

syumai

Twitter: https://twitter.com/__syumai GitHub: https://github.com/syumai

仕事でNext.jsやったり、Go書いたりしてます

Goの言語仕様の輪読会が終わったので、勢いでこれを開催しました

(遍歴) 初めて触った JavaScript は ES5 で、Vue, Reactから入り、jQueryはほとんどやらずに生きてきました

syu_cream

Twitter: https://twitter.com/syu_cream GitHub: https://github.com/syucream

医療系スタートアップでフルスタック風なソフトウェアエンジニアやってます

React, Next.js 半年？くらいの経験値

ES5 から触ってた？記憶喪失

WhyK

Twitter: https://twitter.com/windchime_yk GitHub: https://github.com/windchime-yk

今は仕事でReact書いてます

Denoが好きです

ES5->jQuery->ES6

かなり雰囲気で英語を読んで、機械翻訳よく使う人間です（読むの遅いと思います）

仕様書輪読会面白そうだったので参加しました

輪読会も仕様書を読むのも初めてです

Nozomu Ikuta

Twitter: https://twitter.com/NozomuIkuta

GitHub: https://github.com/NozomuIkuta

Vue/Nuxtのスタック中心に仕事をしています

zu (asazu taiga)asazutaiga.icon

https://twitter.com/asazutaiga

仕事でReact, TypeScriptを使っています

JSは2年くらい書いてます

晩御飯食べてない

Kaito

JunYasumura

noyannoyan.icon

Reactが大好きです。最近はReact内部のコードリーディングに時間を溶かしています

言語仕様書を読むのは初めてなので緊張しています…！

yebis0942yebis0942.icon

Go仕様輪読会がよかったので流れてきました

Rails, Reactあたりをよく使ってます

遍歴:

ES5あたりからJS触り始めました。かつてはjQuery、今はReactをよく使ってます。

CoffeeScriptとかはあまり触らずに生きてきました。

おーみー

Twitter: aumy_f GitHub: aumyf

高校生です。趣味でReactなどをいじって遊んでいます

プログラミング言語に興味があります

JSはだいぶ前から少しずつ書いてました。ES2015以降が主です

ECMAScript仕様書についてのメモ

仕様書の全体構成

1. Introduction ECMAScript自体の紹介

thirdの前まで読む

3. Conformance

ECMAScriptの仕様の実装を満たす条件

2. Normative References

関連仕様（Unicode, I18n API, JSON）へのリンク

4. Overview

言語の概要

4.4. 用語の定義

4.5. 仕様書の構成

5. Notational Convensions

仕様書を表記するときに使う表記の説明

5.1. Syntactic and Lexical Grammars

Context-Free Grammars: 文脈自由文法

5.2. Algorithm Conventions

ここでいうAlgorithmとは

ランタイムでどんな処理をするかを規定する疑似コード的なやつyebis0942.icon

built-inの関数の処理内容を定義するときとかに使われてるyebis0942.icon

7. Abstract Operations

7.1 型変換の話面白そう

8. Syntax-Directed Operations

宣言的定義がメチャ出てくる

人間の読み物ではなさそう

9. Executable Code and Execution Contexts

実行コンテキストの話っぽい

大事そうなので読もう

9.2 Realms

これが実行コンテキストの話っぽい

9.3 Execution Contexts

いやこっちが実行コンテキストか…

わかんねー

10. Ordinary and Exotic Objects Behaviours

Exotic Objectとは

yebis0942.iconArrayのlengthみたいな特殊な挙動するやつだった気がする（pushしたりするとlengthが自動更新されるとか）

このあとの方から具体的な話が出てくる

How to Read the ECMAScript Specification by Timothy Gu

https://timothygu.me/es-howto/

Abstract

仕様は役に立つ

その仕様を読みやすくするのがこのドキュメントの狙い

1. Prelude

仕様を読むと健康にいい

ECMAScriptとJavaScriptは実質的には同じ

1.1 Why should I read the ECMAScript specification

普通のJavaScriptユーザーも仕様を読めると便利

不可解な挙動にぶつかった時、GoogleもStack Overflowも役に立たないことがある

MDNにも詳細が書かれていないことがある（後述）

例:

Array.prototype.push(42)とSet.prototype.add(42)

感想: そもそも前者が動作するのが謎

==の挙動

でも初学者はspec読まなくてもいいよ。とりあえず面白アプリ作ってからまた来てくれ。

英語

heck -> f*ckの婉曲表現

↑は自分の勘違いで、hellの婉曲語でしたnoyan.icon。

Ever the studious ...

everの解釈

質問してみました

「常に」という意味だそうです

evergreen(常緑樹), everlasting(永遠に続く)

nannycams

子守り用ビデオ

面白さがよくわからない

anythingと同じような意味と解してよさそう

warts

手のマメ？

ペンだこのようにJavaScriptダコができたらという話

1.2 What belongs to the ECMAScript specification, and what does not

どこまでがECMAScriptで規定されているのかという話

ECMAScriptの持ち物に見えてもHTMLやNode.jsの仕様の話だったりする

1.3. Before going any further, where is the ECMAScript specification?

まとめ: https://www.ecma-international.org/memento/tc39.htm を見ましょう

ECMAScript®

登録商標なんですねー

ECMAScriptは毎年リリース

不完全でも毎年出しているってことだろうか、という解釈があったけど、spec本体にプロポーザルがマージされるのはStage 4に到達して十分な品質に達したときなのではyebis0942.icon

https://github.com/tc39/proposals

必要とされてそうな新機能が入ってなくてもとりあえずリリースしてる、という観点ではそうなのかも

snapshotの文脈でこの話が出てきたはずですが、徐々にプロポーザルが各月でマージされるからこういう記述になるのでは？と思いました。noyan.icon

そうするとJune 2019以降(from)のブラウザで動かすアプリケーション、という話はECMA Scriptではなく実装状況によるのではという気がしますが…

なるほど…yebis0942.icon

1.4. Navigating the spec

specは5つに分けられると思っている

慣例と規則（Numberの定義とか）

文法（for-in文はどんな形？）

静的な意味論（変数はvar文でどう定義される？）

実行時の意味論（for-inループはどう実行される？）

API（String.prototype.substringはどのように動作する？）

仕様を全部読もうとしないこと

自分の知りたいことが上記のどれに当てはまるかを考える

難しかったら「いつevaluate (評価)されるのか」を考えてみる

自分の知りたいことに関係するセクションだけを読むこと

At this point, I’d like to point out that absolutely no one reads the spec from top to bottom. Rather, only look at the section corresponding to what you are trying to look for, and in that section only look at what you need. Try to determine which one of the five big sections your specific question relates to; and if you are having trouble determining which one it is, ask yourself the question "at which time is this (whatever you are trying to confirm) evaluated?" which may help. Don’t worry, navigating the spec will only become easier with practice.

英語

bullet point: 箇条書きの「・」

2. Runtime semantics

省略記法がよく使われているので初学者には辛いかも

仕様書の邦訳

ECMA-262 Edition 5.1を読む

https://ecmascript2020言語仕様.com/

ECMAScript / Standard ECMA-262 Edition 5.1 訳

議事メモ (余裕があれば)

ECMAScriptとは

ECMA: エクマ

ヨーロッパの情報通信分野の標準化団体