Fork me on GitHub

2018-04-23のJS: Chrome 66、Redux 4.0、Svelte 2.0

Edit on GitHub 編集履歴を見る

JSer.info #380 - Chrome 66がリリースされました。

ECMAScriptの仕様(proposal)の実装として、
JavaScriptがJSONのsupersetに、trimStart/trimEndのサポート、catch節の引数省略に対応しています。

CSS Typed OM、CSS Paint API、AudioWorklet、Mediaのautoplayのpolicy変更、Fetch APIがkeepaliveオプションをサポートなどが行われています。


Reduxのメジャーアップデートとして4.0.0がリリースされました。

BREAKING CHANGEについては次のIssueにまとめられていますが、TypeScriptの型改善、元々使われることを意図してないActionTypesをprivateに、bundleをCommonJSとES moduleで公開するようにするといった変更が行われています。

またReduxのReact bindingであるreact-reduxRedux 4.0.0に対応済ですが、Reactの新しいContext APIへの対応はまだ行われていません。


コンパイルしてライブラリに依存しないJavaScriptとして動作するフレームワークであるSvelte v2がリリースされました。

JSXを参考にテンプレートの構文が変更され、マイグレーションツールとしてsvelte-upgrade
が公開されています。
oncreateondestroyのライフサイクルメソッドの追加に伴い、component.observeが削除されています。
またコンポーネントからの値のとり方がcomponent.get('foo')のようなcomponent.get().fooのように変更されています。

以前は"42"のような数字の文字列を渡すと文字列として評価されていましたが、{1}のようにリテラルを使って数値として渡さないと行けないように修正されています。

// Before – pass number string and treat as numbers
<Counter start='1'/>
// After – should pass as numbers
<Counter start={1}/>

ヘッドライン


New in Chrome 66  |  Web  |  Google Developers

developers.google.com/web/updates/2018/04/nic66

Chrome ReleaseNote

Chrome 66リリース。
JSがJSONのsupersetに、trimStart/trimEndのサポート、catch節の引数省略に対応。
CSS Typed OM、CSS Paint API、AudioWorklet、Mediaのautoplayのpolicy変更、Fetch APIがkeepaliveオプションをサポートなど


Release v4.0.0 · reactjs/redux

github.com/reactjs/redux/releases/tag/v4.0.0

redux ReleaseNote TypeScript

Redux 4.0.0リリース。
TypeScriptの型改善、middlewareのdispatchが複数の引数に対応、パフォーマンス改善など


Release v4.6.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v4.6.0

webpack ReleaseNote

webpack 4.6.0リリース。
importのコメントでpreloadとprefetchに対応、webpackのコアコードがTypeScriptのallowJscheckJsで型チェックされるようになるなど


Svelte v2 is out!

svelte.technology/blog/version-2

JavaScript ReleaseNote

Svelte 2リリース。
テンプレートの構文を変更、マイグレーションツールの公開、Computed propertiesの引数がオブジェクトに、component.getの返り値の変更。
またoncreate/ondestroyのライフサイクルを追加など


sonarwhal is v1 🎉 – sonarwhal – Medium

medium.com/sonarwhal/sonarwhal-is-v1-4262a2f887c9

JavaScript Tools ReleaseNote

ウェブサイトのLintツールであるsonarwhal 1.0リリース。


NativeScript 4.0 is out! 🎉

www.nativescript.org/blog/nativescript-4.0-is-out

JavaScript ReleaseNote ios Android

NativeScript 4.0リリース


Underscore.js

underscorejs.org/#1.9.0

JavaScript library ReleaseNote

underscore 1.9.0リリース。
_.restArguments_.chunk_.isSymbolなどの追加。
_.throttle_.debounceがcancelできるように、パフォーマンス改善など


アーティクル


Hello wasm-pack! – Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2018/04/hello-wasm-pack/

WebAssembly Rust console Tools

RustでWebAssembly向けの開発するツールキット


DasSur.ma – Layers and how to force them

dassur.ma/things/forcing-layers/

CSS performance article

要素をレイヤー化する方法としてwill-change: transformがある。
しかし、実際にtransformしていないならばwill-change: opacitybackface-visibility: hiddenを使ったほうが良いという話。
backface-visibilityの動作についての解説


Dependencies Done Right | Yarn Blog

yarnpkg.com/blog/2018/04/18/dependencies-done-right/

npm yarn article

pacakge.jsonのdependenciesdevDependenciespeerDependenciesの意味や使い分けについて。
バージョンの異なるものが混ざるとinstanceofの問題やファイルサイズが増える問題などについて


Node.js v10の変更点まとめ - 技術探し

blog.hiroppy.me/entry/node10

node.js article

Node.js 10で予定される変更点について


Traversing the DOM with JavaScript | Zell Liew

zellwk.com/blog/dom-traversals/

DOM article

DOMトラバーサルについての記事。
DOM APIを使ってどのように要素を取得、辿っていくかについて


スライド、動画関係


Progressive Web App Roadshow - YouTube - YouTube

www.youtube.com/playlist?list=PLNYkxOF6rcICnIOm4cfylT0-cEfytBtYt

PWA video google opinion

Progressive Web App(PWA)の概要や何を解決しようとしているものなのか、実装にはなにが必要なのかなどを解説してるシリーズ動画。


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


aweary/react-copy-write: ✍️ Immutable state with a mutable API

github.com/aweary/react-copy-write

React JavaScript library

immerを使ってmutableな操作でstateを更新できるReact Contextを使ったステート管理ライブラリ。


書籍関係


krasimir/react-in-patterns: A free book that talks about design patterns/techniques used while developing with React.

github.com/krasimir/react-in-patterns

React デザインパターン book

Reactのパターンについての電子書籍


React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 | 原 一浩, taisa, 小松 大輔, 永井 孝, 池内 孝啓, 新井 正貴, 橋本 安司, 日野 洋一郎 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4774197068/

JavaScript library book

2018年5月10日発売。
各フレームワークの紹介とSlackライクなサンプルをベースに解説する書籍


Rediscovering JavaScript: Master ES6, ES7, and ES8: Venkat Subramaniam: 9781680505467: Amazon.com: Books

www.amazon.com/dp/1680505467/

JavaScript book

2018年10月25日発売 ES2015以降についての扱う書籍


Amazon.com: Node.js Microservices - Second Edition: Develop, deploy, and scale microservices with Node 8 eBook: Diogo Resende: Kindle Store

www.amazon.com/dp/B079SCMR6T/

JavaScript node.js Microservices book

2018年8月9日発売
Node.jsのマイクロサービスについての書籍


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