Skip to content

Commit

Permalink
Merge #509
Browse files Browse the repository at this point in the history 
509: 2018-04-23のJS: Chrome 66、Redux 4.0、Svelte 2.0 r=azu a=azu

* [New in Chrome 66  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/04/nic66 "New in Chrome 66  |  Web  |  Google Developers")
* [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D66 "Chrome Platform Status")
* [Chromium Blog: Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet](https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html "Chromium Blog: Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet")
* [Svelte v2 is out!](https://svelte.technology/blog/version-2 "Svelte v2 is out!")
* [Release v4.0.0 · reactjs/redux](https://github.com/reactjs/redux/releases/tag/v4.0.0 "Release v4.0.0 · reactjs/redux")
* [React 16 experiment: rewrite React-Redux to use new context API by markerikson · Pull Request #898 · reactjs/react-redux](reduxjs/react-redux#898 "React 16 experiment: rewrite React-Redux to use new context API by markerikson · Pull Request #898 · reactjs/react-redux")


Co-authored-by: azu <azuciao@gmail.com>
Co-authored-by: azu <azu@users.noreply.github.com>
  • Loading branch information
@bors @azu
3 people committed Apr 23, 2018
2 parents a8259c3 + ca3a320 commit 17ba95b
Showing 1 changed file with 255 additions and 0 deletions.
255 changes: 255 additions & 0 deletions _i18n/ja/_posts/2018/2018-04-23-chrome66-redux-4.0-svelte-2.0.md
View file
@@ -0,0 +1,255 @@
---
title: "2018-04-23のJS:Chrome 66、Redux 4.0、Svelte 2.0"
author: "azu"
layout: post
date : 2018-04-23T11:03:05.776Z
category: JSer
tags:
- chrome
- Redux
- svelte

---

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

- [New in Chrome 66  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/04/nic66 "New in Chrome 66  |  Web  |  Google Developers")
- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D66 "Chrome Platform Status")
- [Chromium Blog: Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet](https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html "Chromium Blog: Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet")

ECMAScriptの仕様(proposal)の実装として、
[JavaScriptがJSONのsuperset](https://github.com/tc39/proposal-json-superset)に、[trimStart/trimEnd](https://github.com/tc39/proposal-string-left-right-trim)のサポート、[catch節の引数省略](https://github.com/tc39/proposal-optional-catch-binding)に対応しています。

CSS Typed OM、CSS Paint API、AudioWorklet、[Mediaの`autoplay`のpolicy変更](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)、Fetch APIが`keepalive`オプションをサポートなどが行われいます。

----

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

- [Release v4.0.0 · reactjs/redux](https://github.com/reactjs/redux/releases/tag/v4.0.0)

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

- [Redux 4 breaking changes · Issue #1342 · reactjs/redux](https://github.com/reactjs/redux/issues/1342)

またReduxのReact bindingである[react-redux](https://github.com/reactjs/react-redux)はも[Redux 4.0.0に対応済](https://github.com/reactjs/react-redux/releases/tag/v5.0.7)ですが、Reactの新しいContext APIへの対応はまだ行われいません。

- [React 16 experiment: rewrite React-Redux to use new context API by markerikson · Pull Request #898 · reactjs/react-redux](https://github.com/reactjs/react-redux/pull/898)

----

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

- [Svelte v2 is out!](https://svelte.technology/blog/version-2)

JSXを参考にテンプレートの構文が変更され、マイグレーションツールとして[svelte-upgrade
](https://github.com/sveltejs/svelte-upgrade)が公開されています。
`oncreate`と`ondestroy`のライフサイクルメソッドの追加に伴い、`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}/>
```

----

<h1 class="site-genre">ヘッドライン</h1>

----

## New in Chrome 66  |  Web  |  Google Developers
[developers.google.com/web/updates/2018/04/nic66](https://developers.google.com/web/updates/2018/04/nic66 "New in Chrome 66  |  Web  |  Google Developers")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>

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

- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D66 "Chrome Platform Status")
- [Chromium Blog: Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet](https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html "Chromium Blog: Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet")

----

## Release v4.0.0 · reactjs/redux
[github.com/reactjs/redux/releases/tag/v4.0.0](https://github.com/reactjs/redux/releases/tag/v4.0.0 "Release v4.0.0 · reactjs/redux")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">redux</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">TypeScript</span></p>

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


----

## Release v4.6.0 · webpack/webpack
[github.com/webpack/webpack/releases/tag/v4.6.0](https://github.com/webpack/webpack/releases/tag/v4.6.0 "Release v4.6.0 · webpack/webpack")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">ReleaseNote</span></p>

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

- [add support for link preload/prefetch by sokra · Pull Request #7056 · webpack/webpack](https://github.com/webpack/webpack/pull/7056 "add support for link preload/prefetch by sokra · Pull Request #7056 · webpack/webpack")
- [Add TypeScript type checking by mohsen1 · Pull Request #6862 · webpack/webpack](https://github.com/webpack/webpack/pull/6862 "Add TypeScript type checking by mohsen1 · Pull Request #6862 · webpack/webpack")

----

## Svelte v2 is out!
[svelte.technology/blog/version-2](https://svelte.technology/blog/version-2 "Svelte v2 is out!")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span></p>

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


----

## sonarwhal is v1 🎉 – sonarwhal – Medium
[medium.com/sonarwhal/sonarwhal-is-v1-4262a2f887c9](https://medium.com/sonarwhal/sonarwhal-is-v1-4262a2f887c9 "sonarwhal is v1 🎉 – sonarwhal – Medium")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>

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


----

## NativeScript 4.0 is out! 🎉
[www.nativescript.org/blog/nativescript-4.0-is-out](https://www.nativescript.org/blog/nativescript-4.0-is-out "NativeScript 4.0 is out! 🎉")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">ios</span> <span class="jser-tag">Android</span></p>

NativeScript 4.0リリース


----

## Underscore.js
[underscorejs.org/#1.9.0](http://underscorejs.org/#1.9.0 "Underscore.js")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>

underscore 1.9.0リリース。
`_.restArguments`、`_.chunk`、`_.isSymbol`などの追加。
`_.throttle`と`_.debounce`がcancelできるように、パフォーマンス改善など


----
<h1 class="site-genre">アーティクル</h1>

----

## Hello wasm-pack! – Mozilla Hacks – the Web developer blog
[hacks.mozilla.org/2018/04/hello-wasm-pack/](https://hacks.mozilla.org/2018/04/hello-wasm-pack/ "Hello wasm-pack! – Mozilla Hacks – the Web developer blog")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">Rust</span> <span class="jser-tag">console</span> <span class="jser-tag">Tools</span></p>

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


----

## DasSur.ma – Layers and how to force them
[dassur.ma/things/forcing-layers/](http://dassur.ma/things/forcing-layers/ "DasSur.ma – Layers and how to force them")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>

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


----

## Dependencies Done Right | Yarn Blog
[yarnpkg.com/blog/2018/04/18/dependencies-done-right/](https://yarnpkg.com/blog/2018/04/18/dependencies-done-right/ "Dependencies Done Right | Yarn Blog")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">yarn</span> <span class="jser-tag">article</span></p>

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


----

## Node.js v10の変更点まとめ - 技術探し
[blog.hiroppy.me/entry/node10](http://blog.hiroppy.me/entry/node10 "Node.js v10の変更点まとめ - 技術探し")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">article</span></p>

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


----

## Traversing the DOM with JavaScript | Zell Liew
[zellwk.com/blog/dom-traversals/](https://zellwk.com/blog/dom-traversals/ "Traversing the DOM with JavaScript | Zell Liew")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">DOM</span> <span class="jser-tag">article</span></p>

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


----
<h1 class="site-genre">スライド、動画関係</h1>

----

## Progressive Web App Roadshow - YouTube - YouTube
[www.youtube.com/playlist?list&#x3D;PLNYkxOF6rcICnIOm4cfylT0-cEfytBtYt](https://www.youtube.com/playlist?list=PLNYkxOF6rcICnIOm4cfylT0-cEfytBtYt "Progressive Web App Roadshow - YouTube - YouTube")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">PWA</span> <span class="jser-tag">video</span> <span class="jser-tag">google</span> <span class="jser-tag">opinion</span></p>

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


----
<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>

----

## aweary/react-copy-write: ✍️ Immutable state with a mutable API
[github.com/aweary/react-copy-write](https://github.com/aweary/react-copy-write "aweary/react-copy-write: ✍️ Immutable state with a mutable API")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>

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


----
<h1 class="site-genre">書籍関係</h1>

----

## krasimir/react-in-patterns: A free book that talks about design patterns/techniques used while developing with React.
[github.com/krasimir/react-in-patterns](https://github.com/krasimir/react-in-patterns "krasimir/react-in-patterns: A free book that talks about design patterns/techniques used while developing with React.")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">デザインパターン</span> <span class="jser-tag">book</span></p>

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


----

## React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 | 原 一浩, taisa, 小松 大輔, 永井 孝, 池内 孝啓, 新井 正貴, 橋本 安司, 日野 洋一郎 |本 | 通販 | Amazon
[www.amazon.co.jp/dp/4774197068/](https://www.amazon.co.jp/dp/4774197068/ "React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 | 原 一浩, taisa, 小松 大輔, 永井 孝, 池内 孝啓, 新井 正貴, 橋本 安司, 日野 洋一郎 |本 | 通販 | Amazon")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">book</span></p>

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


----

## Rediscovering JavaScript: Master ES6, ES7, and ES8: Venkat Subramaniam: 9781680505467: Amazon.com: Books
[www.amazon.com/dp/1680505467/](https://www.amazon.com/dp/1680505467/ "Rediscovering JavaScript: Master ES6, ES7, and ES8: Venkat Subramaniam: 9781680505467: Amazon.com: Books")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">book</span></p>

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/](https://www.amazon.com/dp/B079SCMR6T/ "Amazon.com: Node.js Microservices - Second Edition: Develop, deploy, and scale microservices with Node 8 eBook: Diogo Resende: Kindle Store")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">node.js</span> <span class="jser-tag">Microservices</span> <span class="jser-tag">book</span></p>

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


----

0 comments on commit 17ba95b

Please sign in to comment.