2017-10-11

JavaScriptの現状と将来というタイトルで発表してきた

tc39 JavaScript

情報処理学会の若手の会で発表してきました。
三回目の参加で、二回連続30minのセッションをさせて頂きました。
前回は3年前に発表してその頃はまだ学生でした👨‍🎓

実はこの週、スライドにも書いてある通りバンクーバでNode InteractiveとNode関係者があつまるNode.js Collaborator Summitが開かれてました。
そちらの情報は他の方が何かしら報告してくれると思いますので、それを期待しています🙏

さて、それではスライドの内容を少し読み砕きましょう

ECMAScriptとは？

ECMAScriptとは、Ecma Internationalによって管理されるJavaScriptの標準化仕様です。
JavaScriptとは、ECMAScriptに基づく実装を指します。

エディション

そのころに選定された仕様をまとめたものがエディションです。
1997/06に最初のECMAScript 1が出ました。
そして、2015/06 からは毎年でるように変わりました。 (from ES2015)

TC39

ECMA-262とECMA-402を管理します。 JSの構文と国際化APIです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources

ここの委員会メンバーは各ブラウザの主要ベンダーと会社(e.g. Airbnb, FaceBook, PayPal, Bocoup, etc...)です。
また、委員会メンバーの推薦で所属している人もいます。

TC39プロセス

標準化されるまでに5つのプロセスを踏む必要があります。(stage-0 to stage-4)
このstageは二ヶ月に一回あるミーティングにより、変動していき、stage-4に入ったら次のリリースで正式に仕様として組み込まれます。

今年のスケジュールは以下のとおりです。

2017-01-24 to 2017-01-26	San Jose, CA	PayPal
Dates	Location	Host
2017-03-21 to 2017-03-23	Portland, OR	Mozilla
2017-05-23 to 2017-05-25	New York, NY	Google
2017-07-25 to 2017-07-27	Redmond, WA	Microsoft
2017-09-26 to 2017-09-28	Boston, MA	Bocoup
2017-11-28 to 2017-11-30	San Francisco, CA	Airbnb

各種stageの説明

stage-0(Strawman)

アイディアのフェイズです。
これは委員会メンバーではなくても、提出が可能です。
提出フォームから提出します。
そして、ドキュメントを作り、tc39/proposalsの方へそのリンクを追加するPRを提出する必要があります。

stage-1(Proposal)

ポリフィル、デモがあり、潜在的な問題の特定が必要です。
このステージではチャンピオンと呼ばれるものが必ず必要です。
チャンピオンは、提出者または共同チャンピオン(片方がTC39メンバー)でならなくては次のステージには進めません。

stage-2(Draft)

仕様に含まれる最初のバージョンです。
このstageにいることで仕様として含まれる可能性が高いです。
正式な構文記述の追加が必要です。

stage-3(Candidate)

このプロポーザルの終盤です。
各種ベンダーとユーザからのフィードバックをさらに求めます。
また、正式な仕様のドキュメントは完成しており、TC39のレビュワーとECMAScriptのエディタにより、レビューとサインオフされる必要があります。

stage-4(Finished)

次のリリースで正式な仕様として含まれるでしょう。
test262に合格していて、ブラウザベンダーの2つ以上で実装が組み込まれる必要が必ずあります。
また、ECMAScriptのエディタは仕様書に署名をする必要があります。

test262がBabylonに統合されました。

BabylonとはBabelのJSパーサです。

github.com

今回のMTG(60th)で変更したプロポーザル一覧

約2週間前に変動したプロポーザルの一覧です。

mport.meta	2 → 3
Proposal	Stage	Description
export ns from 'mod';	2 → N/A	it moved to https://github.com/tc39/ecma262/pull/1005
Array.prototype.flat{Map,ten}	1 → 2
throw Expressions	1 → 2
String.prototype.matchAll	1 → 2
Extensible numeric literals	0 → 1
First-Class Protocols	0 → 1	it was called `Interfaces` in stage-0
JSON superset	0 → 1
nullary coalescing	0 → 1
Partial application	0 → 1
Pipeline Operator	0 → 1
ArrayBuffer.transfer	N/A → 0
Builtins.typeOf() and Builtins.is()	N/A → 0
Object Shorthand Improvements	N/A → 0

github.com

ES2015 - ES2017

スライドを見てください。
また、これは世の中に沢山いい記事があるので省きます。

ES2018

現在、stage-4にあるのは、Template Literal Revisionのみとなっています。

Template Literal Revision

ES2015にも、String Templateの中に、Tagged Templateという書き方がありますが、それには制限がありました。
Tagged Templateというのは、有名なlibraryだとstyled-componentsやyo-yoが採用しています。
その制限というのが、Latexやwindowsのpath, 8進数のエスケープなどを表現できない(エラーで落ちる)問題です。

const tag = (obj) => ({
  Raw: obj.raw,
  Cooked: obj
});

tag`\u{4B}`; // ES2015 ~
// { Raw: [ '\\u{4B}' ], Cooked: [ 'K' ] }

// ES2018 ~
tag`\uu ${1} \xx`; // a Unicode escape
// { Raw: [ '\\uu ', ' \\xx' ], Cooked: [ undefined, undefined ] }
tag`\100`; // an octal escape

このリリースでは、その制限をなくし、イレギュラーなエスケープはundefinedとして、Cookedに入れられます。

候補

現在、stage-3には以下のプロポーザルがあり、ES2018として組み込まれる可能性が高いです。

面白そうなプロポーザル

興味あるプロポーザルを話しました。
stage-1が多く、Syntaxが変動する可能性があるので注意してください。
Binary ASTは他の場所で話します😌

Class Fields

class Counter extends HTMLElement {
  x = 0;  // public fields
  #y = 0; // private fields

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  clicked() {
    this.x++;
    this.#y++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  render() {
    this.textContent = this.#y.toString();
  }
}

Promise.prototype.finally

let finished = false;

fetch()
  .then((res) => {
    // finished = true;
  })
  .catch((err) => {
    // finished = true;
  })
  .finally(() => {
    finished = true;
  });

同じ処理をthenとcatchで書かなくて良くなりました。

Optional Chaining

abouthiroppy.hatenablog.jp

Pipeline Operator

abouthiroppy.hatenablog.jp

Partial Application Syntax

function add(x, y) { return x + y; }

// before
const addOne = add.bind(null, 1); // this, the left(x = 1), the right(y = undefined)
addOne(2); // 3

// after
const addOne = add(1, ?); // apply from the left(x)
addOne(2); // 3

const addTen = add(?, 10); // apply from the right(y)
addTen(2); // 12

const f = (...x) => x;
const g = f(..., 9, ...);
g(1, 2, 3); // [1, 2, 3, 9, 1, 2, 3]

const res = a |> f(?, 1) |> g(?, 2); // const res = g(f(a, 1), 2);

今まではES5のbindで部分適用していましたが、これからは?がある場合に固定化されます。
また、spread operatorでも展開できます。

github.com

Promise.try

bluebirdと同じ、tryです。

function getUserById(id) {
  return Promise.try(() => {
    if (typeof id !== 'number') {
      throw new Error('id must be a number');
    }

    return db.getUserById(id);
  });
}

Temporal

日付の計算等の扱いが簡単になります。

let myCivilDate = new CivilDate(2016, 2, 29);
let newCivilDate = myCivilDate.plus({years: 1, months: 2});
//results in civil date with value 2017-4-28

github.com

まとめ

ECMAScriptは毎年更新されます
誰でもプロポーザル出せるぞ！！
次のリリース(ES2018)は2018/06です！

宣伝

2017/11/25 - 26 で東京Node学園祭2017をやるので是非来てくださいね;)

nodefest.jp

The End

それではJavaScriptライフを楽しんで！😎

github.com

2017-10-05

Pipeline Operatorがstage-1へ

JavaScript tc39

github.com

先月のTC39のMTGでstage-1になりました。

F#, OCaml, Elixir, Elm, Julia, Hack, LiveScriptなどと似たような機能を提供します。

function doubleSay (str) {
  return str + ", " + str;
}

function capitalize (str) {
  return str[0].toUpperCase() + str.substring(1);
}

function exclaim (str) {
  return str + '!';
}

let result = exclaim(capitalize(doubleSay("hello"))); // "Hello, hello!"

let result = "hello"
  |> doubleSay // ここの引数が `hello`になる
  |> capitalize
  |> exclaim; // "Hello, hello!"

上記のコードを読めばわかりますが、ネストされた関数を読みやすくします。

例えば、引数を複数持つ関数でPipeline operatorを使いたい場合は以下のようになります。

function double (x) { return x + x; }
function add (x, y) { return x + y; }

function boundScore (min, max, score) {
  return Math.max(min, Math.min(max, score));
}

let newScore = boundScore(0, 100, add(7, double(person.score)));

let person = { score: 25 };
let newScore = person.score
  |> double // ここの引数が25
  |> _ => add(7, _) // `_`はdoubleの戻り値
  |> _ => boundScore(0, 100, _); // 57 // `_`はaddの戻り値

2017-09-21

自分のページを更新した

about-hiroppy.com

一年ぶりぐらいに更新した。
好きなサイトの色とフォントを参考にした。

sweetpackを使ったので基本設定ファイルは書かなくてよかった。

postcss-forとpostcss-randomを初めて使ったが、混ぜると大変だった。。
forのスコープ内で変数宣言時にrandom使うとそこで確定されると思ったらコールされるたびに値が変わるのなんでだろう。。

@for $i from 1 to 10 {
  $delay: random(0, 30)s;

  .a {
    animation-delay: $delay;
  }

  .b {
    animation-delay: $delay;
  }
}

.aと.bのanimation-deplayの値変わるんだよね。。
これってつまり、変数化する必要がないじゃん！！
なので共通で使いたかった部分を変数化したつもりが使えなくて共通を出さない実装に変えざる負えなかった😓

scssはたしか変わらない気がする。

https化を次はする。

おわり

2017-09-11

簡単なアプリケーションでwebpackとbabelの設定をしなくて済むライブラリを作った

webpack babel library

github.com

最初に
sweetpack
さいごに

最初に

ターゲット

簡単なwebアプリケーション

モチベーション

同じ設定ファイルを書くことが多いのでそれを避けたい

ゴール

babelの設定とwebpackの設定を書かなくてもある程度のことはできるようになる。
ただ、複雑なアプリケーションだとwebpackは無限大なのでそこまでサポートする気はない。
webサイトとかを作るときに、プロダクションや開発の設定(minify, hashed name, server, etc…)を書くのがめんどくさいのでそれを解決する。

sweetpack

できること

webpackとbabelの設定ファイルを書かずにできることは主に以下の通りです。

reactを使用できる
flowを使用できる
css-modulesを使用できる
postcssを使用できる
htmlテンプレートエンジンが使える
各環境の.envを読み込める
開発時にwebpack-dev-serverが立ち上がり、HMRも有効化される
開発時にreact-hot-loaderが使える
ビルド時にファイル名のハッシュを付く
ビルド時にコードの最適化が行われる(js, react)
ビルド時にファイルの分割ができる

プラグイン・設定

設定ファイル

.sweetpack.ymlで設定します。
以下の設定をサポートします。(値はデフォルト値)

entry: src/index.js
output: dist
js:
 flow: false
  react: false
css:
  modules: false
  postcss: false
html:
  filename: null
  template: null
dev:
  port: 8080
  dashboard: true
prod:
  extract: false

設定ファイルがない場合は、上記が適応されます。

共通プラグイン

html-webpack-plugin
- 基本的にhtmlは自動生成(or テンプレートを指定)
dotenv-webpack
- .envを読み込む
case-sensitive-paths-webpack-plugin
- モジュールのファイル名の大文字、小文字を判断しエラーを出します(osxの標準ファイルシステムのHFS+は判断しないため)
file-loader
style-loader
css-loader
- css-modulesにも対応(default: false)
postcss-loader(default: false)
- これはローダを挟むだけなので、postcss.config.jsで自分の使いたいプラグイン(e.g. sass, cssnext, precss, etc..)を指定する
babel-preset-react(default: false)
- onの時、react-hot-loaderも使用可能になる(devのみ)
babel-preset-flow(default: false)
- onの時、flow-status-webpack-pluginも使用される
babel-preset-env
babel-preset-stage-1

開発時プラグイン

webpack-dev-serverが起動し、HMRもオンになります。
webpack-dashboardもデフォルトで使用されます。
また、reactを使用している場合はreact-hot-loader@nextも自動で入ります。

有効化されるプラグイン

webpack-dev-server
react-hot-loader(reactオプションがtrueの時のみ)
webpack-dashboard

github.com github.com

NODE_ENV=productionを基本的には使用する前提で書かれています。
また、ビルド時にはindex.html以外のファイル名が自動でハッシュが付与されます。
このときに、reactが有効化されていてもreact-hot-loaderは無効化されます。
clean-webpack-pluginにより出力ディレクトリが削除されます。
最適化としてbabel-minify-webpack-plugin, OccurrenceOrderPlugin, AggressiveMergingPluginが走ります。
もしこのときにextract-text-webpack-pluginを有効化していれば、styles.[hash].cssという形でindex.htmlに挿入されます。

有効化されるプラグイン

clean-webpack-plugin
babel-minify-webpack-plugin
babel-preset-react-optimize(reactオプションがtrueの時のみ)
extract-text-webpack-plugin(extractオプションがtrueの時のみ)
webpack.optimize.OccurrenceOrderPlugin
webpack.optimize.AggressiveMergingPlugin

github.com github.com github.com

サンプル

package.json

{
  "scripts": {
    "start": "sweetpack watch",
    "build": "cross-env NODE_ENV=production sweetpack build"
  }
}

.sweetpack.yml

entry: ./lib/index.js
output: dist/bundle.js

ディレクトリ構成

 .
├── lib
│   └── index.js
└── package.json
1 directory, 2 files

npm startをしたらwebpack-dev-severとwebpack-dashboardが起動します。
そして、npm run buildをしたら、/distにビルド済みの生成ファイルができます。

dist
├── bundle.2ea3ca43d449dd5fdc16.js
└── index.html
0 directories, 2 files

html, jsはファイル名にハッシュ値が振られ、最適化済みになります。

すべての設定ファイルを有効化したサンプルはこちらです。
sweetpack/samples/all at master · abouthiroppy/sweetpack · GitHub

さいごに

詳しくはREADME.mdとサンプルを見るとわかると思います。

まだまだやるべきことはあると思いますが、一旦ここである程度サポートできたのではないかなと思い書きました。
もちろんまだ足りないプロパティはあると思います。。。

もし興味あれば、是非使ってみてください;)

2017-09-10

今の自分がどのように生成されたか考えた

なんとなく、タスクを捌きながら思ったことを殴り書きしている。
さて、今の自分がどのように形成されたかと考えたときに新卒の頃の周りの環境が大きいんじゃないかなって振り返って思った。

特に新卒の頃は、仕事というフィールドに触れて、特にインフラに詳しくなった気がする。
ドワンゴは知っての通りトラフィックが多いので、どうしても個人で運用して学ぶ知識ではカバーできない部分が多かった。
自分はフロントエンドエンジニアだったが、主にAWS周りのネットワーク設計やDB設計など色々と同期、先輩と討論したお陰である程度知識はあると思っている。

ドワンゴはギークな人が多い。これは実際そうでエンジニアとしてのスキルが高い人が多い。(ただ生活リズムが終わってる人も多い)
だから面白いけど真剣な討論が多かった。(多方面の知識を持ってる人が多いので、様々な視野があり指摘がある)

この二年は、自分の専門領域でない部分の学びが多かったと書いていて思った。
なので広く浅く知っていって、興味があれば調べて深掘りしていくという学びができた気がする。(これがいわゆるI型ではなくT型？)

ところで、新卒の頃を思い出してみると、周りの環境が新卒の自分にとってはとても良かった。自分で言うのもあれだが、新卒の時からある程度実力はあると思っていた。
入社当時、自分は研修スキップの早期配属で新卒が10名ぐらいいた部署で辞めるまで働いていた。

新卒の自分から見た同期は、優秀な人が多かった。また特に分野が被ってなかったのでキラキラして見えた。Ruby, RoR, iOS, Android, etc..
著名なOSSのコミッターがいたり、iOSめっちゃ詳しい人いたり、RoR詳しい人いたりしていた。
基本聞けば回答が帰ってくる。

どのように自分が学生時代から今の自分へ変わったのか考えたが、一番の理由は多分危機感だったんだと思う。
しかも自分と同じ年齢だったから更に刺激的だったんだと思う。
そこから本格的にOSSとかを始めてコードを読む量を増やしたり、コミットしたり、I/Oを重視して学習していた気がする。
なんでもいいんだけど、コミットだってコード読まないといけないし、登壇だって学びがないと話せないし、ブログも同じ。
I/Oは本当に大切である。
もし新卒のときにこの環境じゃなかったら今の自分は正直ないと思っている。
なので本当に運が良かったなーって思う。

さて、次は中途の自分がそういう風に見られる立場だと思うとこんな自分でいいのか謎である。
まぁとくにそういうことを考えて仕事をしているわけではないが、自分みたいな人間がいたらそうなんだろうなって感じ

次は自分が知識を発信していく番なので、ワクワクしつつ、楽しく自分自身も学んでいきたい。
これからも日本ではNodeの活動をしていけたらと思います;)

何が結局言いたいかって言うと、新卒の同期は一生に一回しかないものだと思うし、仕事する上での環境はとても大切だと思う。
人それぞれだと思うけど、互いに磨き合える同期がいる環境が一番、実力が伸びる近道なのかもしれない。
普通に技術の話を永遠としているだけでも楽しいと思える人がいると良さそう。

という自分の経験上の話をまとめてみた。

なんかすっごい意識高いこと書いているただの老害になってしまったけど、文字で残しておきたかった。

おわり

2017-09-04

次のリリースであるBabel7の主な変更点まとめ

babel JavaScript tc39

Babel7がリリースされるまでは更新されます。

注意: 量が多いので、BabelのInternal, Bug Fix, DocumentsとBabylonについては書きません。
また6.xへバックポートされたものも入っていますので注意してください。

もし、間違えや質問があれば、 @about_hiroppy までどうぞ;)

Index

Notable Changes
Details of Changes
In Progress

Revision History of This Article

2017/09/04(first)

Babelのstableがv6.26.0でプレリリースがv7.0.0-alpha.20です。
Babylonのv7.0.0-beta.22です。

The branches in babel have been moved. The previous master is now called 6.x, and the 7.0 branch is now master. Pull requests need to be based on master from now on. (2017/9/1)

masterブランチが7.0になったためここにまとめたいと思います。

Notable Changes

Babel

TypeScriptのサポート
.babelrc.jsのサポート
spread-operatorが仕様準拠となる
stageパッケージの追加と変動

Packages Status of Stage-X

従来通り、数値以上のパッケージはそこにすべて含まれます。

Tracking for Spec

github.com

stage-3

babel-plugin-syntax-dynamic-import(new)
babel-plugin-transform-async-generator-functions
babel-plugin-transform-class-properties(new)
babel-plugin-transform-object-rest-spread
babel-plugin-transform-optional-catch-binding(new)
babel-plugin-transform-unicode-property-regex(new)

stage-2

babel-plugin-transform-export-namespace
babel-plugin-transform-function-sent(new)
babel-plugin-transform-numeric-separator(new)
babel-preset-stage-3

stage-1

babel-plugin-transform-decorators
babel-plugin-transform-export-default
babel-plugin-transform-optional-chaining(new)
babel-preset-stage-2

stage-0

babel-plugin-transform-do-expressions
babel-plugin-transform-function-bind
babel-preset-stage-1

Flow

Object typeに対し、speadが使用可能になる
declare exportが使用可能になる
predicatesのエイリアスサポート
opaqueのエイリアスサポート

babel-preset-env

polyfillを動的に入れてくれるようになる

Details of Changes

Babel

babel-preset-es2015

specモード時に変換されたアロー関数に名前が付与される

// input
return {
  g: () => this
}

// output
return {
  g: function g() {
    babelHelpers.newArrowCheck(this, _this);
    return this;
  }.bind(this)
}

PRs

test for for-of optimization on arrays and add it for array type anno… by hzoo · Pull Request #4747 · babel/babel · GitHub

looseモードでの`ClassCallCheck`と`possibleConstructorReturn`が削除

Related Plugins

babel-helpers
babel-plugin-transform-es2015-classes
babel-plugin-transform-flow-comments
babel-plugin-transform-flow-strip-types

Versions

v7.0.0-alpha.15

PRs

Remove ClassCallCheck, possibleConstructorReturn in loose mode by hzoo · Pull Request #4850 · babel/babel · GitHub

looseモードにes2015-parametersが追加

argumentsを使用しません。

Related Plugins

spread-operatorが仕様準拠となる

// Invalid
( {...{}} = {} ); ( {...[]} = {} );
var { ...{ z } } = { z: 1 };
({ x, ...{ y, z } } = o);

// valid
let {...{}} = {}; let {...[]} = {};
let { ...z } = { z: 1 };
({ x, y, ...z } = o);

May 23, 2017 Meeting Notes

Related Plugins

babel-plugin-transform-es2015-destructuring
babel-plugin-transform-object-rest-spread

Spec

GitHub - tc39/proposal-dynamic-import: import() proposal for JavaScript

optional-catch-bindingの追加

try {} catch {}
try {
  bar;
} catch {
  foo();
} finally {
  yay();
}

Related Plugins

babel-plugin-transform-optional-catch-binding

Versions

v7.0.0-alpha.17
v7.0.0-alpha.18

PRs

Spec

Optional catch binding

class-fieldsの追加

class Bork {
  static a = 'foo';
  static b;
 
  x = 'bar';
  y;
}

looseモードの指定がない場合、コンパイル時に代入式からObject.defineProperyを使うように変更されました。

Related Plugins

babel-plugin-transform-class-properties

Versions

v7.0.0-alpha.20

PRs

Update Class Fields to Stage 3 and change default behavior by kedromelon · Pull Request #6076 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-class-fields: Orthogonally-informed combination of public and private fields proposals

transform-unicode-property-regexの追加

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π'); // true

Related Plugins

babel-plugin-transform-unicode-property-regex

Versions

v7.0.0-alpha.1
v7.0.0-alpha.15

PRs

Spec

GitHub - tc39/proposal-regexp-unicode-property-escapes: Proposal to add Unicode property escapes `\p{…}` and `\P{…}` to regular expressions in ECMAScript.

babel-preset-stage-2

function.sentの追加

function* generator() {
  console.log('Sent', function.sent);
  console.log('Yield', yield);
}
 
const iterator = generator();
iterator.next(1); //  Sent 1
iterator.next(2); // Yield 2

Related Plugins

babel-helper-wrap-function
babel-plugin-transform-function-sent

Versions

v7.0.0-alpha.17

PRs

Function sent by nicolo-ribaudo · Pull Request #5920 · babel/babel · GitHub

Spec

ESideas/Generator metaproperty.md at master · allenwb/ESideas · GitHub

export-default-fromの追加

export var v;
export * as ns from 'mod';
export v, {x, y as w} from 'mod';

Related Plugins

babel-plugin-transform-export-default
babel-plugin-transform-export-namespace

Versions

v7.0.0-alpha.20

PRs

Spec

GitHub - tc39/proposal-export-default-from: Proposal to add `export v from "mod";` to ECMAScript.

numeric-separatorの追加

1_000_000_000  // Ah, so a billion
101_475_938.38  // And this is hundreds of millions

let fee = 123_00;   // $123 (12300 cents, apparently)
let fee = 12_300;   // $12,300 (woah, that fee!)
let amount = 12345_00;  // 12,345 (1234500 cents, apparently)
let amount = 123_4500;  // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500

let budget = 1_000_000_000_000;
// What is the value of `budget`? It's 1 trillion!

console.log(budget === 10 ** 12); // true

Related Plugins

babel-plugin-transform-numeric-separator

Versions

v7.0.0-alpha.20

PRs

Add numeric separator to stage 2 preset by rwaldron · Pull Request #6071 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-numeric-separator: A proposal to add numeric literal separators in Javascript. https://tc39.github.io/proposal-numeric-separator/

babel-preset-stage-1

optional-chaining-operatorの追加

abouthiroppy.hatenablog.jp

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if `bar` exists

Related Plugins

babel-plugin-transform-optional-chaining

Versions

v7.0.0-alpha.15

PRs

Optional Chaining Operator (Stage 1) by jridgewell · Pull Request #5813 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-optional-chaining

babel-plugin-transform-class-properties

`configurable`プロパティの追加

Object.defineProperty(REF, KEY, {
  configurable: true,
  enumerable: true,
  writable: true,
  value: VALUE
});

Versions

v7.0.0-alpha.20

PRs

Add 'configurable' property to class fields by reznord · Pull Request #6123 · babel/babel · GitHub

babel-polyfill

それぞれの機能のポリフィルファイルを個別に追加

Versions

v7.0.0-alpha.7

PRs

add individual polyfill files by hzoo · Pull Request #5584 · babel/babel · GitHub

babel-cli

Flow

Object typeに対し、speadが使用可能に

type U = {};
type V = {};
type T = { ...U };
type T = { ...U, ...V, };
type T = { p: V, ...U, };
type T = { ...U, p: V, };
type T = { ...{} | { p: V } };

Versions

v7.0.0-alpha.10

PRs

Add support for object type spread by conartist6 · Pull Request #5525 · babel/babel · GitHub

declare exportが使用可能に

declare export var foo;
declare export function foo(): void;
declare export function foo<T>(): void;
declare export function foo(x: number, y: string): void;
declare export class A<T> extends B<T> { x: number }
declare export class A { static foo(): number; static x : string }
declare export class A mixins B<T>, C {}
declare export default function foo(): void;
declare export * from 'asd';
declare export { a, b };
declare export { c, d } from 'bar';

Versions

v7.0.0-alpha.15

PRs

Support declare export statements by danez · Pull Request #5589 · babel/babel · GitHub

`predicates`のエイリアスサポート

declare function foo(x: mixed): boolean %checks(x !== null);

function is_string(x): boolean %checks {
  return typeof x === "string";
}

Versions

v7.0.0-alpha.17

PRs

Add support for flow predicates in babel-generator by existentialism · Pull Request #5984 · babel/babel · GitHub

`opaque`のエイリアスサポート

opaque type ID = string;
opaque type Foo<T> = Bar<T>;
opaque type Maybe<T> = _Maybe<T, *>;
export opaque type overloads =
  & ((x: string) => number)
  & ((x: number) => string)
;

medium.com

Versions

v7.0.0-alpha.18

PRs

Flow opaque type aliases by jbrown215 · Pull Request #5990 · babel/babel · GitHub

babel-preset-reactはflowアノテーションがあるときのみflowの処理するように変更

TypeScriptとの互換性を持つためにbabel-preset-reactからflowのサポートはなくなります。

Versions

v7.0.0-alpha.19
v7.0.0-alpha.20

PRs

その他使用者向け

{
  "presets": ["typescript"]
}

Related Plugins

babel-plugin-syntax-typescript
babel-plugin-transform-typescript
babel-preset-typescript

Versions

v7.0.0-alpha.18
v7.0.0-alpha.19
v7.0.0-alpha.20

PRs

その他開発者向け

`for-await`は新しいASTに変更

// new forOfStatement
t.forOfStatement(left, right, body, await) // @param {boolean} await - default: false

Versions

v7.0.0-alpha.1

PRs

Change for-await to use new AST by danez · Pull Request #5321 · babel/babel · GitHub

make useBuiltIns: false default, rename true to 'usage' by hzoo · Pull Request #285 · babel/babel-preset-env · GitHub

Website

REPLがreplaceされた

Babel · The compiler for writing next generation JavaScript

In Progress

Babel

decoratorsのアップデート

class Foo {
  @dec1 method1() {}
  @dec2(a, b, c) method2() {}
  @dec3outer @dec3inner method3() {}
  undecorated() {}
}

elementDescriptor`というspecの概念の追加等

Versions

N/A

PRs

Decorators 2 Transform [WIP] by peey · Pull Request #6107 · babel/babel · GitHub

Spec

現在stage-2
Decorators

bigIntの追加

(1073741824n ** 2n).toString() === (new BigInt('1152921504606846976')).toString()

Versions

N/A

PRs

BigInt (Stage 2) [WIP] by wdhorton · Pull Request #6015 · babel/babel · GitHub

Spec

現在stage-3(PRの段階では2ですが現在3)
GitHub - tc39/proposal-bigint: Arbitrary precision integers in JavaScript

Babylon

Pattern Matchingの追加

let getLength = vector => match (vector) {
  { x, y, z }: Math.sqrt(x ** 2 + y ** 2 + z ** 2),
  { x, y }:    Math.sqrt(x ** 2 + y ** 2),
  [...]:       vector.length,
  else: {
    throw new Error("Unknown vector type");
  }
};

Versions

N/A

PRs

WIP Pattern Matching (Stage 0) by krzkaczor · Pull Request #635 · babel/babylon · GitHub

Spec

現在stage-0
GitHub - tc39/proposal-pattern-matching: Pattern matching syntax for ECMAScript

classへprivate methodsのサポート

class Counter extends HTMLElement {
  #xValue = 0;

  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }

  connectedCallback() {
    this.#render();
  }

  #render() {
    this.textContent = this.#x.toString();
  }
}

Versions

N/A

PRs

Add support for class private methods by Qantas94Heavy · Pull Request #703 · babel/babylon · GitHub

Spec

現在stage-2
GitHub - tc39/proposal-private-methods: Private methods and getter/setters for ES6 classes

2017-08-26

メモ: Node.jsとAyo.jsに分裂したという話

Node

この記事は自分用のリンク集メモです。(色々と聞かれるときにリンク探すの大変なため)

注意: 追記・変更が頻繁に行われるでしょう

原因
Node.js Foundationの動き
- 主な変更
- ボード
Ayo.js
さいごに

原因

Rodが複数回のNode.js Foundationの行動規範に対し違反を行っていた。
コレに関して、TSCで辞任の投票が行われたが60%の反対で否決となった。(技術力や今までの貢献度がすごかったから)
この意思決定に関して疑問を持った人がTSCから自主的に辞任をした。

Rodの違反行為一覧

I love that this issue highlights all the horrible shit that men in tech get to get away with with no repercussions. https://t.co/OYPpmMtCS1 pic.twitter.com/vbKKwsBJ8f
— ✨rachel✨ (@ohhoe) 2017年8月21日

画像じゃなければこっち meta: vote regarding Rod's status on the TSC · Issue #310 · nodejs/TSC · GitHub

また、Rodの違反行為はModerationまでエスカレーションしている。

参考Issues

TSC投票ステータス

github.com

privateを除く、一番始めに表に出てきたIssue
ココから今回の騒動は始まった。

編集前魚拓: meta: vote regarding Rod's status on the TSC · Issue #310 · nodejs/TSC · GitHub

結果: 6人がNo, 4人がYes, 2人が棄権, 1人が拒否

自主的に辞退した人

Anna, Brya, Myles, Jeremiah

Pull Requests · nodejs/TSC · GitHub

簡単に言うと、辞退を拒否

Nodeの将来

github.com

Hacker News

Effective immediately I am stepping down from the Nodejs TSC | Hacker News

ZDNet

www.zdnet.com

TSC

github.com

TSCとはNode.js FoundationのTop Working Groupである。
今回の投票はここにいるメンバーで行われた。

Node.js Foundationの動き

事態が起こってから急速に動いている。

主な変更

npm

http://blog.npmjs.org/post/164575965335/values-inclusion-and-the-nodejs-foundation

blog.npmjs.org

結構Ayoにノリノリっぽい気がした。(それぐらいNode.js Foundationの規範に不満があったのかな？)

目的

github.com

コード自体は当分ミラーリングの予定です。(が将来的には機能追加するとfishrockは言っていました)
それよりも規範等のガバナンスの再構築が目的です。

github.com

ここに書いてあるとおり、参加しているのはNode Coreで活動している人が主です。

github.com

Values

今現在、草稿が上がっています。 github.com

新しいガバナンスモデルとマネージメントの構築を目的としています。
全体的に人間が重要視されています。
価値や幸福を技術や企業より主軸に置きます。

アイコン

検討中

github.com

CI

インフラは検討中。
現在Travisで動いているが、各プラットフォームのテストができないのでつらそう。
今はTravisでLinuxのみのテストを行っています。

ちなみにNode.jsはJenkinsでCIが行われています https://ci.nodejs.org/

さいごに

今回はio.jsと似て非なるものである。
io.jsと違い、あくまでも身内の話である。(また技術的な話が要因ではない)

だからこそ今回の件の理由は、外から見ると何が起こっているのかわかりづらい。

8/28に開催される理事会を待つ。

ECMAScriptとは？

エディション

TC39

TC39プロセス

各種stageの説明

stage-0(Strawman)

stage-1(Proposal)

stage-2(Draft)

stage-3(Candidate)

stage-4(Finished)

test262がBabylonに統合されました。

今回のMTG(60th)で変更したプロポーザル一覧

ES2015 - ES2017

ES2018

Template Literal Revision

候補

面白そうなプロポーザル

Class Fields

Promise.prototype.finally

Optional Chaining

Pipeline Operator

Partial Application Syntax

Promise.try

Temporal

まとめ

宣伝

The End

最初に

ターゲット

モチベーション

ゴール

sweetpack

できること

プラグイン・設定

設定ファイル

共通プラグイン

開発時プラグイン

有効化されるプラグイン

ビルド時プラグイン

有効化されるプラグイン

サンプル

さいごに

Index

Links

Milestone

Releases

Revision History of This Article

2017/09/04(first)

Notable Changes

Babel

Packages Status of Stage-X

Tracking for Spec

stage-3

stage-2

stage-1

stage-0

Flow

babel-preset-env

Details of Changes

Babel

babel-preset-es2015

specモード時に変換されたアロー関数に名前が付与される

Related Plugins

Versions

PRs

check-es2015-constantsが仕様準拠となる

Related Plugins

Versions

PRs

配列でのfor-ofの最適化

Related Plugins

Versions

PRs

looseモードでのClassCallCheckとpossibleConstructorReturnが削除

Related Plugins

Versions

PRs

looseモードにes2015-parametersが追加

Related Plugins

Versions

配列での`for-of`の最適化

looseモードでの`ClassCallCheck`と`possibleConstructorReturn`が削除

template-literalsはデフォルトで`concat`を使用し、looseモードでは`+`を使用する

`configurable`プロパティの追加