JSer.info #375 - TypeScript 2.8 RCがリリースされました。
Conditional Typesのサポート、Mapped Type Modifierの-、+ができるようになりNonNullableへの変換が扱えるようになりました。
また、JSX Pragmasをコメントで指定できるようなり、.d.tsだけを出力する--emitDeclarationsOnlyのサポートなどが行われています。
Conditional Typesで型の表現の幅が広がりますが、詳細はリリースノートや次の記事を参照してください。
- TypeScript 2.8 の Conditional Types について - Qiita
- Strongly Typed Event Emitters with 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の実装と衝突し動作しないサイトがあることとわかりました。
その回避案の１つとしてArray.prototype.flattenをArray.prototype.smooshにリネームするPRが出された一連の流れを#smooshgateと呼んでいます。
- rename flatten to smoosh by michaelficarra · Pull Request #56 · tc39/proposal-flatMap
- SmooshGate: The ongoing struggle between progress and stability in JavaScript
実際に判定ツールを書いたのでCan I Standardize?試すことができますが、Array.prototype.flattenはMooToolsやprototype.js、sugar.jsなどで実装されています。
Can I Standardize?https://t.co/Q1hA7MnHqB
— azu (@azu_re) March 9, 2018
`Array.prototype.flatten`:
- prototype.js define: true
- MooTools define: true
- Suger.js define: true
`Array.prototype.smoosh`:
prototype.js define: false
MooTools define: false
Suger.js define: false
#smooshgate #ecmascript pic.twitter.com/JQluGQLU4N
この記事ではなぜprototype拡張によってbreak the webが起きるのか、なぜMooToolsを直しただけでは解決しないのか、TC39はこれからこの問題をどう修正していくかなどについて書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Announcing TypeScript 2.8 RC | TypeScript
blogs.msdn.microsoft.com/typescript/2018/03/15/announcing-typescript-2-8-rc/
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
puppeteer 1.2.0リリース。
elementHandle.contentFrame()の追加、リダイレクト回数を返すrequest.redirectChain()の追加など
Firefox — Notes (59.0) — Mozilla
www.mozilla.org/en-US/firefox/59.0/releasenotes/
Firefox 59リリース。
開発者ツールの改善、PointerEventをデフォルトで有効化、overscroll-behaviorの実装、EventTargetコンストラクタの実装など
Release Inferno v5.0.0 · infernojs/inferno
github.com/infernojs/inferno/releases/tag/v5.0.0
Inferno v5.0.0 リリース。 .mjsで配布していたのを.jsに変更、 IE9のサポート終了、TypeScriptのサポート改善など
アーティクル
とあるLPの制作現場 - Qiita
qiita.com/noplan1989/items/a52a957546ddb9efeca3
実際にウェブサイトのランディングページ(LP)の作る際にどのように作成したかについて。
How to Build Password Generator with Electron & React Pt.1 - Setting the Stage - Alex Devero Blog
blog.alexdevero.com/password-generator-pt1/
Electronを使ったパスワードジェネレータアプリのチュートリアル
Unblocking Clipboard Access | Web | Google Developers
developers.google.com/web/updates/2018/03/clipboardapi
Async Clipboard APIについての紹介。
今までdocument.execCommandでやっていたものをちゃんとしたPermissionモデルと共に扱えるAPIについて
Data visualization with react-vis – DailyJS – Medium
medium.com/dailyjs/data-visualization-with-react-vis-bd2587fe1660
react-visを使ったグラフの描画について
webpack 4 の optimization.splitChunks（廃止されたCommonsChunkPluginの代わり） の使い方、使い所 - Qiita
qiita.com/soarflat/items/1b5aa7163c087a91877d
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 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
React/Reduxを使ったアプリケーション開発についての連載。
Reduxが必要となる状態はどのようなケースか、また開発においてもアプリの状態とUIの詳細は独立して考えられることについて。
Storybookでコンポーネントを確認しながら開発し、アプリを作るチュートリアル。
#SmooshGate FAQ | Web | Google Developers
developers.google.com/web/updates/2018/03/smooshgate
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 2.8(RC)のConditional Typeを使ったEventEmitterの型付けについて
スライド、動画関係
nucleartide/emberconf-2018: EmberConf 2018 notes.
github.com/nucleartide/emberconf-2018
EmberConf 2018の動画や発表のまとめ
サイト、サービス、ドキュメント
Everyone can now run JavaScript on Cloudflare with Workers
blog.cloudflare.com/cloudflare-workers-unleashed/
Cloudflare Workersが一般公開された。
CDN上でService Workerと同じようなAPIで処理を書くことができるサービス。
FromJS - Understand JavaScript Apps
DOMをインスペクトし、表示されている文字列がコードのどこで生成されているかを検索できるChrome拡張。 既存のHTMLを生成するDOM APIを上書きしトレースしている
ソフトウェア、ツール、ライブラリ関係
vuex-orm/vuex-orm: The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.
複雑なデータ構造を扱うためのVuexプラグイン。リレーションを持ったデータをノーマライズし、RailsやLaravelのようなORMライクなAPIでデータの検索、取得ができる。複雑にネストしたデータ構造をノーマライズすることで、データを扱うコストを一定に保つことが目的。
- Vuexでリレーションを持った複雑なデータ構造を上手く扱うには - Qiita
- paularmstrong/normalizr: Normalizes nested JSON according to a schema
maticzav/emma-cli: 📦 Terminal assistant to find and install node packages.
npmモジュールの検索とインストールを行うツール
terkelg/prompts: Lightweight, beautiful and user-friendly interactive prompts
Node.jsでインタラクティブなプロンプトを表示するライブラリ
