by shigemk2

当面は技術的なことしか書かない

ECMAScript6で何が変わるのか まとめ #ecma262

ECMA-262 Edition 5.1を読む

ECMA-262 Edition 5.1を読む

【完全日本語訳+解説】ECMA-262 Edition 5.1を読む

5分で分かるクイズ。答えは適当に。

ヒント

  • 桁数制限とかあるやつあるから、気をつけてね
  • e
  • 文字列連結

文法

  • ES6では今までの文法が変わるけど、すぐに開発が変わるわけではない

leanpub.com

github.com

  • JSをECMAインターナショナルで標準化したのがEcmaScript
  • ISOの仕様
  • ECMA6だといろいろ文法が出てくる

Arrows

  • CoffeeScriptで出てくるやつで、ラムダが簡単に書けるやつ
  • こういう書き方が出来る。
var odds = evens.map(v => v + 1);
nums.foreach(v => {
  if (v % 5 === 0) fives.push(v);
}
  • 今までのJSとはだいぶちがう…

Classes

ECMA4のころからあったけど、ついにECMA6から入った!

class SkippedMesh extends THREEE.Mesh {
  constructor() {
  }

  update() {
  }
}

Enhanced Object Literals

オブジェクトリテラル

Template Strings

  • テンプレートストリング 改行可能で変数展開も可能
  • これを使うといろいろと変態的なことが出来る
`In JavaScript '\n' is a line-feed`

Destructing

デストラクタ

Default + Rest + Spread

  • 引数省略のデフォルト値を設定できる
  • ...とかくと配列として解釈。など
function f(x, y=12) {
  return x + y;
}

let + const

function f() {
  {
     let x; // レキシカルな定義で別のところでlet xするとエラー
  }
}

iterators

イテレータ

for..of

for (var n of fibonacci) {
}

Generators

ジェネレータ

JavaScript4 MozillaのJavaScript2など

developer.mozilla.org

Unicode

"吉".lenght == 2
  • 2バイト文字列が扱えるようになった
  • コードポインタ
  • ユニコード

Modules

  • exportとかimportとか
export function sum(x, y) {
  return x + y;
}
import * as math from "lib/math";

Module Loaders

www.infoq.com

Map + Set

var s = new Set();
var m = new Map();

WeakMap + WeakSet

  • 弱参照

Proxies

  • プロキシ構文

Symbols

var key = Symbol("key");

Subclassable Built-ins

Math + Number + String APIs

別にこれはいらんだろ…っていう感じの数学関数

Math.acosh(3) // 1.76...
Math.hypot(3, 4) // 5
"abcde".includes("cd") // true

Array + Object APIs

Array.of(1, 2, 3)
[0,0,0].fill(7, 1) // [0,7,7]

Binary and Octal Literals

0b111110111 === 503 // true
0o767 == 503 // true

### Promise
### Tail Calls

再帰呼出しとかで使えるかも

### これらの機能はどのくらい浸透しているの?

[http://kangax.github.io/compat-table/es6/:title]

たいがいのブラウザではES5の機能は使える

ES7はもうほとんど無理

[http://kangax.github.io/compat-table/es7/:title]

### 結論

今すぐWeb開発が変わるわけではない。。

### 追記

[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/imul:embed:cite]

ECMA262 Edition 5.1読書会 ここまでのおさらい まとめ #ecma262

ecma262reading.doorkeeper.jp

ECMA-262 Edition 5.1を読む

ECMA-262 Edition 5.1を読む

タイムスケジュール変わってた

ECMA262-Edition5.1読書会

ECMA262-Edition5.1読書会 | Doorkeeper

JavaScript(ECMAScript)の仕様書をみなで読み進める読書会

groups.google.com

日本語の本

ECMA-262 Edition 5.1を読む

ECMA-262 Edition 5.1を読む

HTML

http://www.ecma-international.org/ecma-262/5.1/

過去の開催内容

  • 第1条 適用範囲 - 第12条 文まで

第1条はさわりだけ1ページで、本格的なところは第4条から。。。後ろにいくほどしんどくなる

ドルアーガの塔

ドルアーガの塔

第4条 概要

  • ECMAScriptの概要
  • ECMAScriptはオブジェクト指向言語
  • 最初はWebスクリプティング言語として(実装から始まって後付でルールが決まった)
  • 仕様では外部データや出力先は指定せず(ECMAという仕様があって、各計算環境で必要なオブジェクトを追加して欲しいという仕様)
  • 計算環境がホストオブジェクトをも提供することを想定

言語の概要

  • ECMAScriptはOOP
  • 基本言語とホスト機能はオブジェクトで提供
  • ECMAはオブジェクトの集合体
  • オブジェクト=プロパティのコレクションで、0個以上で構成

プロパティ

  • プリミティブ値と関数を格納するコンテナ
  • プリミティブ値とは言語仕様の最も低いレベルで直接表現されるデータ
  • undefined null boolean number string

オブジェクトとメソッド

  • 呼び出し可能なオブジェクト→関数
  • プロパティを通してオブジェクトに関連付けられた関数→メソッド

関数とメソッドは違うものとして定義されている

オブジェクト

  • ECMAではC++とかJavaみたくクラスというものが使われない
  • かわりにリテラル表記やコンストラクタでオブジェクトを生成できる
  • プロトタイプベースの継承 共有プロパティを実装するために使われるprototypeという名前の関数
  • new式でコンストラクタを使用することでオブジェクトは作られる

nodeで動かしてみる

> typeof(new Date())
'object'
> typeof(Date())
'string'

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

  • プロパティのコレクション
  • プロパティ
  • 名前つきのデータプロパティ
  • 名前付きのアクセサプロパティ
  • 内部プロパティ(二重括弧で括って表現 それを実装していないオブジェクトはTypeError)

継承のような振る舞い

> A = function() { return { func : function() { console.log('hello'); } } }
[Function]
> B = function() { return new A(); }
[Function]
> C = new B();
{ func: [Function] }
> C.func()
hello
undefined
> C.func = function() { return 123; }
[Function]
> C.func()
123

データ型

  • プリミティブ値 undefined bool number など
  • 仕様書型(見慣れない…)
  • Reference
  • List
  • Completion
  • Property Descriptor
  • Property Identifier
  • Lexical Environment
  • Envirnment Record

このあたりを抑えておかないと言語仕様を理解するのがしんどい…かもしれない…

仕様書型

  • セマンティクスで記述されているアルゴリズム内で使われるメタな値に相当
  • 仕様書型は仕様上の中間生成物 任意の特定の要素に対応しているとは限らない
  • 評価の中間結果を記述するために使用されるがオブジェクトのプロパティや変数の値として格納できない(=プログラマが使えない)

Reference仕様書型

  • Referenceは解決された名前のバインディング
  • 値をバインディングするためのもの
  • base値 レファレンス値 boolean値 の3つの構成要素
  • base値 Obejctを覗いてプリミティブ値が入る
  • base値がundefinedというのはリファレンスがバインディングで解決されない
  • 何も参照されていない値はundefined扱いされるが、そういう場合はリファレンスがバインディングで解決されていないという状態
  • GetValue()/PutValue()はリファレンスを操作するための抽象操作(なのでやっぱり仕様書の言語仕様でプログラマが直接いじれるレイヤーではない)

Completion仕様書型

  • 言語仕様の中で嫌というほど出てくる 制御の非局所的な転送を行うやつ
  • (break continue return throw)の振る舞いを説明
  • (type, value, target)のタプルで構成
  • typeはnormal break continue return throw
  • valueは言語の値もしくはempty
  • targetは言語の識別子もしくはempty
  • 中途完了という用語は、typeがnormalである以外のすべての完了を表す

Property Descripter / Identifier仕様書型

  • 名前付きプロパティの属性の操作と具体化を説明するのに使われる
  • プロパティの属性 規定された属性のフィールド名とフィールド値から構成
  • Property Descriptor型は特定のフィールドの有無や使い方によって、データプロパティ記述子とアクセサプロパティ記述子に分類
  • データプロパティ Value Writableという名前を含む
  • アクセサプロパティ Get Setという名前を持つもの
  • この両方を兼ねるものはNG
> o={}
{}
> o.a=1
1
> Object.getOwnPropertyDescriptor(o, "a")
{ value: 1, writable: true, enumerable: true, configurable: true }

オブジェクトの内部メソッドのアルゴリズム

  • 仕様上どういうふうな書かれ方をしているのか。。。
  • P66
  • Oはオブジェクト Pはプロパティ Dはdesc まあ擬似言語なので実際の文字はなんでもよかった

  • 読み方とかはこんなかんじ。。。

www.webzoit.net

9条(型変換とテスト)

  • 特筆すべきところはあまり…

10条(実行可能コードと実行コンテキスト)

  • global ソースコードそのもの
  • eval 組み込みのeval関数に指定されたソースコード
  • function 関数
  • strictモード

レキシカル環境

  • Identifier(識別子)から変数と関数の関連を定義するために用いられる仕様書型
  • 環境レコードとnullである可能性のある「外側の」レキシカル環境への参照から構成
  • ECMAScriptコードの構造に関連付けられており、新しいレキシカル環境はそういったコードが評価されるたびに作られる try catchなど、それぞれのブロックに環境が構築される
  • レキシカル環境と環境レコード値は中間生成物に対応する必要はないので、プログラマはこの部分を弄ることは出来ない。

重要なところ

  • Completion仕様書型
  • 仕様書の読み解き方

とっかかり

> var a = [1,2,3,4]
undefined
> a.propertyIsEnumerable()
false
> a.propertyIsEnumerable(0)
true
> a.propertyIsEnumerable(1)
true
> a.propertyIsEnumerable(4)
false

getの実装

> Object.defineProperty(o,"b",{get:function() {return 1}})
{ a: 1 }
> Object.defineProperty(o,"c",{get:function() {return 1}})
{ a: 1 }
> o.c
1
> o.c = 2
2
> o.c
1
> o.a
1
> o.a = 2
2
> o.a
2

propertyIsEnumerable メソッド (Object) (JavaScript)

仕様書型をトレースできるECMAScriptの実装

Narcissus - Wikipedia

ナルキッソスはちょっと違う。

仕様書を決めるのは読書会の目的じゃなかった。

AltES6 Introduction #ecma262

Quineをたくさんかく。

@make_now_just

AltES6

  • 従来のAltJS
  • AltES6はなんなのか

メリット

  • ES6にコンパイル
  • できなければBabelやTraceurでES5にして実行
  • JSの構文が嫌いな人でもAltES6を使えば別の構文に。

AltES6の例

Spider

qiita.com

末尾にセミコロン SwitとかGoっぽく書ける

Earl Grey

github.com

  • インデントベースでPythonっぽいけど構文はものすごく柔軟でPerlっぽい
  • あまりES6の機能を使っていないな…
  • 情報がない…

  • どっちも一長一短

  • CoffeeScriptやDartもES6の一部の機能に対応しているのでAltES6っぽい
  • 既存のAltJSもES6のコードを吐く方向に。

まんがタイム WebKit のドキドキ☆ビジュアル ES6 まとめ #ecma262

WebKitReviewerになりました。

  • WebKitでES6がどれだけ使われているのか→55%
  • iOSデベロッパーはES6と心中しなければならない

  • WebKitまわりはいろいろ実装しました 皆が思っているよりよっぽど実装している

  • だんだんモダンなスタックが出来ている

ECMAScript 6 compatibility table

  • Classは完全に載っている
  • Symbolsも実装
  • Template Strings完全に実装
  • for-of完全対応

まとめ

  • ES6の機能はWebKitにいっぱい入っているよ!
  • WebKit Nightlyダウンロードしてね
  • WebKitツリーをダウンロードしてビルドしてポチポチ実行すると動くよ!

など、属人性の高いソリューションが意外と効く。

ECMAScript 6ドラフトのDiff検索用リポジトリを作った まとめ #ecma262

ECMAScript 6ドラフトのDiff検索用リポジトリを作った | Web Scratch

  • ドラフトを一つ一つバージョンごとにダウンロードしてコミットしたやつ。
  • Gitにすると履歴を検索しやすい
  • バージョンで変更があったことが分かる

リポジトリ

github.com

発表資料

ECMAScript 6 Draft Hisotry Repo

まとめ

  • 歴史は作れる