Fork me on GitHub

2018-03-20のJS: TypeScript 2.8RC、Firefox 59、#SmooshGate

Edit on GitHub 編集履歴を見る

JSer.info #375 - TypeScript 2.8 RCがリリースされました。

Conditional Typesのサポート、Mapped Type Modifierの-+ができるようになりNonNullableへの変換が扱えるようになりました。
また、JSX Pragmasをコメントで指定できるようなり、.d.tsだけを出力する--emitDeclarationsOnlyのサポートなどが行われています。

Conditional Typesで型の表現の幅が広がりますが、詳細はリリースノートや次の記事を参照してください。


Firefox 59がリリースされました。

PointerEventがデフォルトで有効化され、overscroll-behaviorの実装、EventTargetコンストラクタの実装が行われています。

EventTargetはNode.jsのEventEmitterのように継承し、pub/subなクラスとして利用できます。


#SmooshGate FAQ  |  Web  |  Google Developersという記事では、最近話題となった#smooshgateについてよくある質問を解説しています。

#smooshgateとは現在Stage 3のProposalであるArray.prototype.flatMap & Array.prototype.flattenとbreak the webについての問題です。
Firefox NightlyにArray.prototype.flattenが実験的に実装したところ、MooToolsのArray.prototype.flattenの実装と衝突し動作しないサイトがあることとわかりました。
その回避案の1つとしてArray.prototype.flattenArray.prototype.smooshにリネームするPRが出された一連の流れを#smooshgateと呼んでいます。

実際に判定ツールを書いたのでCan I Standardize?試すことができますが、Array.prototype.flattenはMooToolsやprototype.js、sugar.jsなどで実装されています。

この記事ではなぜprototype拡張によってbreak the webが起きるのか、なぜMooToolsを直しただけでは解決しないのか、TC39はこれからこの問題をどう修正していくかなどについて書かれています。


ヘッドライン


Announcing TypeScript 2.8 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2018/03/15/announcing-typescript-2-8-rc/

TypeScript ReleaseNote

TypeScript 2.8 RCリリース。
Conditional Types、Mapped Type Modifierの-+ができるように、JSX Pragmasをコメントで指定できるようなるなど


Release v1.2.0 · GoogleChrome/puppeteer

github.com/GoogleChrome/puppeteer/releases/tag/v1.2.0

Chrome library ReleaseNote

puppeteer 1.2.0リリース。
elementHandle.contentFrame()の追加、リダイレクト回数を返すrequest.redirectChain()の追加など


Firefox — Notes (59.0) — Mozilla

www.mozilla.org/en-US/firefox/59.0/releasenotes/

firefox ReleaseNote

Firefox 59リリース。
開発者ツールの改善、PointerEventをデフォルトで有効化、overscroll-behaviorの実装、EventTargetコンストラクタの実装など


Release Inferno v5.0.0 · infernojs/inferno

github.com/infernojs/inferno/releases/tag/v5.0.0

JavaScript React ReleaseNote library

Inferno v5.0.0 リリース。 .mjsで配布していたのを.jsに変更、 IE9のサポート終了、TypeScriptのサポート改善など


アーティクル


とあるLPの制作現場 - Qiita

qiita.com/noplan1989/items/a52a957546ddb9efeca3

web design

実際にウェブサイトのランディングページ(LP)の作る際にどのように作成したかについて。


How to Build Password Generator with Electron & React Pt.1 - Setting the Stage - Alex Devero Blog

blog.alexdevero.com/password-generator-pt1/

Electron JavaScript

Electronを使ったパスワードジェネレータアプリのチュートリアル


Unblocking Clipboard Access  |  Web  |  Google Developers

developers.google.com/web/updates/2018/03/clipboardapi

JavaScript clipboard WebPlatformAPI

Async Clipboard APIについての紹介。
今までdocument.execCommandでやっていたものをちゃんとしたPermissionモデルと共に扱えるAPIについて


Data visualization with react-vis – DailyJS – Medium

medium.com/dailyjs/data-visualization-with-react-vis-bd2587fe1660

React article

react-visを使ったグラフの描画について


webpack 4 の optimization.splitChunks(廃止されたCommonsChunkPluginの代わり) の使い方、使い所 - Qiita

qiita.com/soarflat/items/1b5aa7163c087a91877d

webpack article

webpack 4のoptimizationオプションについて。
optimization.*の設定とそれぞれの出力結果について


Say Hello to Houdini and the CSS Paint API / Coder's Block

codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

CSS article

CSS Paint APIについての記事。
Paint Workletを使ったスタイルの拡張の書き方やスタイルの適応方法について。
また現時点でのCSS Paint APIを含めたHoudiniについて


Redruco: Truco para aprender Redux (Parte 1) – Javier Fernandes – Medium

medium.com/@javierfernandes/redruco-truco-para-aprender-redux-parte-1-c72d052576b0

JavaScript redux React tutorial

React/Reduxを使ったアプリケーション開発についての連載。
Reduxが必要となる状態はどのようなケースか、また開発においてもアプリの状態とUIの詳細は独立して考えられることについて。
Storybookでコンポーネントを確認しながら開発し、アプリを作るチュートリアル。


#SmooshGate FAQ  |  Web  |  Google Developers

developers.google.com/web/updates/2018/03/smooshgate

ECMAScript article JavaScript TC39

ECMAScriptでArray.prototype.flatten Proposalが既存のMooToolsなどのライブラリと名前がバッティングするためbreak the webとなる問題について。
標準化する実装と異なる点だけではなく、prototypeを列挙している点にも問題がある。
また、なぜ既存の実装を変更しても解決にならないかや今後について。


Strongly Typed Event Emitters – Brian Terlson – Medium

medium.com/@bterlson/strongly-typed-event-emitters-2c2345801de8

TypeScript article

TypeScript 2.8(RC)のConditional Typeを使ったEventEmitterの型付けについて


スライド、動画関係


nucleartide/emberconf-2018: EmberConf 2018 notes.

github.com/nucleartide/emberconf-2018

JavaScript イベント video

EmberConf 2018の動画や発表のまとめ


サイト、サービス、ドキュメント


Everyone can now run JavaScript on Cloudflare with Workers

blog.cloudflare.com/cloudflare-workers-unleashed/

cdn ServiceWorker webservice

Cloudflare Workersが一般公開された。
CDN上でService Workerと同じようなAPIで処理を書くことができるサービス。


FromJS - Understand JavaScript Apps

www.fromjs.com/

Chrome DOM Extension babel debug Tools

DOMをインスペクトし、表示されている文字列がコードのどこで生成されているかを検索できるChrome拡張。 既存のHTMLを生成するDOM APIを上書きしトレースしている


ソフトウェア、ツール、ライブラリ関係


vuex-orm/vuex-orm: The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

github.com/vuex-orm/vuex-orm

JavaScript library Vue Vuex ORM

複雑なデータ構造を扱うためのVuexプラグイン。リレーションを持ったデータをノーマライズし、RailsやLaravelのようなORMライクなAPIでデータの検索、取得ができる。複雑にネストしたデータ構造をノーマライズすることで、データを扱うコストを一定に保つことが目的。


maticzav/emma-cli: 📦 Terminal assistant to find and install node packages.

github.com/maticzav/emma-cli

npm 検索 console Tools

npmモジュールの検索とインストールを行うツール


terkelg/prompts: Lightweight, beautiful and user-friendly interactive prompts

github.com/terkelg/prompts

node.js library console

Node.jsでインタラクティブなプロンプトを表示するライブラリ


この記事へ修正リクエストをする
記事を紹介する