Skip to content

Commit d126511

Browse files
azuazu
authored
2019-02-12のJS: Vue 2.6(v-slot)、React 16.8(Hooks)、Next.js 8(serverless) (#586)
* Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 422 draft * Update 2019-02-12-422draft.md * Move _i18n/ja/_posts/2019/2019-02-12-422draft.md to _i18n/ja/_posts/2019/2019-02-12-vue-2.6v-slotreact-16.8hooksnext.js-8serverless.md * Remove _i18n/ja/_posts/2019/2019-02-12-422draft.md * Update 2019-02-12-vue-2.6v-slotreact-16.8hooksnext.js-8serverless.md
1 parent 14dfb2d commit d126511

File tree

1 file changed

+224
-0
lines changed

1 file changed

+224
-0
lines changed

‎_i18n/ja/_posts/2019/2019-02-12-vue-2.6v-slotreact-16.8hooksnext.js-8serverless.md

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
---
2+
title: "2019-02-12のJS: Vue 2.6(v-slot)、React 16.8(Hooks)、Next.js 8(serverless)"
3+
author: "azu"
4+
layout: post
5+
date : 2019-02-12T00:10:22.571Z
6+
category: JSer
7+
tags:
8+
- Vue
9+
- React
10+
- next.js
11+
12+
---
13+
14+
JSer.info #422 - [Vue 2.6.0](https://github.com/vuejs/vue/releases/tag/v2.6.0)がリリースされました。
15+
16+
- [Vue 2.6 released! – The Vue Point – Medium](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e)
17+
18+
[Slots](https://vuejs.org/v2/guide/components-slots.html)の新しい構文として`v-slot`ディレクティブが追加されています。
19+
ライフサイクルhookがRejectedなPromiseを返した場合にエラーハンドリングできるように、コンパイルエラー表示の改善なども行われています。
20+
また、npmパッケージにES Module版のビルドが含まれるようになりました。
21+
22+
ES Moduleをサポートしているブラウザなら、<http://unpkg.com/>のようなCDNを使い、次のようにVueを読むことができるようになっています。
23+
24+
```html
25+
<script type="module">
26+
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
27+
28+
new Vue({
29+
// ...
30+
})
31+
</script>
32+
```
33+
34+
----
35+
36+
React 16.8がリリースされました。
37+
38+
- [React v16.8: The One With Hooks – React Blog](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)
39+
40+
[Hooks](https://reactjs.org/docs/hooks-intro.html)というFunctional Components内でのステートやライフサイクルを扱う仕組みが追加されました。
41+
また、Hooksのテスト向けに`ReactTestUtils.act()`が追加されています。
42+
43+
Hooksについては公式ドキュメントにモチベーションから使い方までまとまっています。
44+
45+
- [Introducing Hooks – React](https://reactjs.org/docs/hooks-intro.html)
46+
47+
48+
----
49+
50+
Next.js 8がリリースされました。
51+
52+
- [Blog - Next.js 8 | Next.js](https://nextjs.org/blog/next-8)
53+
54+
Serverlessモードの追加され、ページごとにserverless functionを出力できるようになっています。このserverless functionは依存をbundleした形になっているため、読み込んでNode.jsの`http`サーバとつなぐことでページのコンテンツを返せます。
55+
56+
また、ビルド時のメモリ使用量改善、`next.config.js`に`env`で環境変数を定義をサポート、出力するHTMLファイルサイズの改善などが行われています。
57+
58+
----
59+
60+
<h1 class="site-genre">ヘッドライン</h1>
61+
62+
----
63+
64+
## Lightning-fast templates & Web Components: lit-html & LitElement - Polymer Project
65+
[www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release](https://www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release "Lightning-fast templates & Web Components: lit-html & LitElement - Polymer Project")
66+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebComponents</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
67+
68+
lit-html 1.0とLitElement 2.0リリース。
69+
lit-htmlはTagged Templateを使ったHTMLテンプレート、LitElementはWeb Componentベースのクラスライブラリ
70+
71+
- [Lightning-fast templates & Web Components: lit-html & LitElement  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html "Lightning-fast templates &amp; Web Components: lit-html &amp; LitElement  |  Web  |  Google Developers")
72+
73+
----
74+
75+
## Vue 2.6 released! – The Vue Point – Medium
76+
[medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e "Vue 2.6 released! – The Vue Point – Medium")
77+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">ReleaseNote</span></p>
78+
79+
Vue 2.6リリース。
80+
`v-slot`ディレクティブの追加、Dynamic Directive Argumentsのサポート。
81+
ライフサイクルhookがRejectedなPromiseを返した場合にエラーハンドリングできるように、コンパイルエラー表示の改善。
82+
またes module版がパッケージに含まれるように
83+
84+
85+
----
86+
87+
## React v16.8: The One With Hooks – React Blog
88+
[reactjs.org/blog/2019/02/06/react-v16.8.0.html](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html "React v16.8: The One With Hooks – React Blog")
89+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p>
90+
91+
React 16.8リリース。
92+
Hooksがデフォルトで有効化された。
93+
またHooksのテスト向けに`ReactTestUtils.act()`が追加された。
94+
95+
96+
----
97+
98+
## New Release: 2.10.0
99+
[jshint.com/blog/2019-02-05/release-2-10-0/](https://jshint.com/blog/2019-02-05/release-2-10-0/ "New Release: 2.10.0")
100+
<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>
101+
102+
JSHint 2.10.0リリース。
103+
`esversion`オプションを追加し`7`,`8`,`9`を指定できるように。
104+
async functionなどの構文をサポート
105+
106+
107+
----
108+
109+
## Chromium Blog: Chrome 73 Beta: Constructable stylesheets, a new RegExp function, and passive mouse events
110+
[blog.chromium.org/2019/02/chrome-73-beta-constructable.html](https://blog.chromium.org/2019/02/chrome-73-beta-constructable.html "Chromium Blog: Chrome 73 Beta: Constructable stylesheets, a new RegExp function, and passive mouse events")
111+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
112+
113+
Chrome 73 Betaリリース。
114+
CSSOMを操作するConstructable Stylesheet Objectsのサポート、String#matchAllのサポート、`::part`のサポート。
115+
`wheel`イベントがデフォルトで`passive`となるように変更など
116+
117+
- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D73 "Chrome Platform Status")
118+
- [WICG/construct-stylesheets: API for constructing CSS stylesheet objects](https://github.com/WICG/construct-stylesheets "WICG/construct-stylesheets: API for constructing CSS stylesheet objects")
119+
120+
----
121+
122+
## Release v7.0.0 · h5bp/html5-boilerplate
123+
[github.com/h5bp/html5-boilerplate/releases/tag/v7.0.0](https://github.com/h5bp/html5-boilerplate/releases/tag/v7.0.0 "Release v7.0.0 · h5bp/html5-boilerplate")
124+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML5</span> <span class="jser-tag">template</span> <span class="jser-tag">ReleaseNote</span></p>
125+
126+
ウェブページのテンプレートプロジェクトのhtml5-boilerplate 7.0.0リリース。
127+
IE9/10に関する記述を削除、`theme-color`のmetaタグを追加、`secutiry.txt`についてを追加など
128+
129+
- [v7.0 Docs Update by coliff · Pull Request #2074 · h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate/pull/2074 "v7.0 Docs Update by coliff · Pull Request #2074 · h5bp/html5-boilerplate")
130+
131+
----
132+
133+
## TestCafe v1.0.0 Released | TestCafe
134+
[devexpress.github.io/testcafe/blog/testcafe-v1-0-0-released.html](https://devexpress.github.io/testcafe/blog/testcafe-v1-0-0-released.html "TestCafe v1.0.0 Released | TestCafe")
135+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">testing</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
136+
137+
TestCafe 1.0.0リリース。
138+
テストの実行を動画として録画できるように、`.testcaferc.json`の設定ファイルを追加、Live modeの統合、型定義ファイルの追加など
139+
140+
- [Migration from TestCafe v0.x.y to v1.0.0 | TestCafe](https://devexpress.github.io/testcafe/blog/migration-from-testcafe-v0-x-y-to-v1-0-0.html "Migration from TestCafe v0.x.y to v1.0.0 | TestCafe")
141+
142+
----
143+
144+
## Blog - Next.js 8 | Next.js
145+
[nextjs.org/blog/next-8](https://nextjs.org/blog/next-8 "Blog - Next.js 8 | Next.js")
146+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
147+
148+
Next.js 8リリース。
149+
Serverlessモードの追加、ビルド時のメモリ使用量改善、`env`で環境変数を定義できるように、出力するHTMLファイルサイズの改善。
150+
`<Head>`コンポーネントの重複の解決、`crossOrigin`オプションの追加、CSP対応など
151+
152+
153+
----
154+
155+
## Introducing swc 1.0 · swc
156+
[swc-project.github.io/blog/2019/02/08/Introducing-swc-1.0](https://swc-project.github.io/blog/2019/02/08/Introducing-swc-1.0 "Introducing swc 1.0 · swc")
157+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Rust</span> <span class="jser-tag">bundler</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">JavaScript</span></p>
158+
159+
Rust製のJavaScript Transpiler/Compilerのswc 1.0リリース。
160+
ECMAScript 2019、JSX、TypeScriptサポートなど
161+
162+
- [swc-project/swc: Super-fast javascript to javascript compiler written in rust](https://github.com/swc-project/swc "swc-project/swc: Super-fast javascript to javascript compiler written in rust")
163+
164+
----
165+
166+
## What’s next for SemVer
167+
[words.steveklabnik.com/what-s-next-for-semver](https://words.steveklabnik.com/what-s-next-for-semver "What’s next for SemVer")
168+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">news</span></p>
169+
170+
SemVerプロジェクトにnpmやCargoなどのパッケージ管理ツールの人中心のGitHub Teamが作成され、RFCプロセスでの運用が開始されたという話
171+
172+
- [SemVer’s New Maintainers | You’ve Been Haacked](https://haacked.com/archive/2019/02/11/semver-collective/ "SemVer’s New Maintainers | You’ve Been Haacked")
173+
174+
----
175+
<h1 class="site-genre">アーティクル</h1>
176+
177+
----
178+
179+
## Making wheel scrolling fast by default  |  Web  |  Google Developers
180+
[developers.google.com/web/updates/2019/02/scrolling-intervention](https://developers.google.com/web/updates/2019/02/scrolling-intervention "Making wheel scrolling fast by default  |  Web  |  Google Developers")
181+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
182+
183+
Chrome 73から`wheel`イベントがデフォルトで`{ passive: true }`となる。
184+
185+
186+
----
187+
<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
188+
189+
----
190+
191+
## Webpack bundle analysis, for every commit
192+
[packtracker.io/](https://packtracker.io/ "Webpack bundle analysis, for every commit")
193+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">webservice</span> <span class="jser-tag">github</span> <span class="jser-tag">CI</span></p>
194+
195+
webpackのbundleサイズの分析を行うウェブサービス。
196+
GitHub Checkに対応してコミットごとのbundleサイズやハッシュの変更によるキャッシュヒットの有無などをビジュアライズできる。
197+
OSSプロジェクトでは無料で利用できる。
198+
199+
200+
----
201+
202+
## pikapkg/pack: 📦⚡️ npm package building, reimagined. https://www.pikapkg.com/blog/introducing-pika-pack/
203+
[github.com/pikapkg/pack](https://github.com/pikapkg/pack "pikapkg/pack: 📦⚡️ npm package building, reimagined. https://www.pikapkg.com/blog/introducing-pika-pack/")
204+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">bundler</span> <span class="jser-tag">Tools</span></p>
205+
206+
npmパッケージ公開向けにNodeやブラウザ、moduleなど様々な種類に向けたライブラリのビルドを行うbundleツール。
207+
それぞれのビルド設定はプラグインになっており、必要なものをパイプラインに定義してまとめてビルドできる。
208+
209+
- [Pika | Introducing: @pika/pack](https://www.pikapkg.com/blog/introducing-pika-pack/ "Pika | Introducing: @pika/pack")
210+
211+
----
212+
<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
213+
214+
----
215+
216+
## notion-cli/notion: Notion: the hassle-free JavaScript toolchain manager
217+
[github.com/notion-cli/notion](https://github.com/notion-cli/notion "notion-cli/notion: Notion: the hassle-free JavaScript toolchain manager")
218+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Rust</span> <span class="jser-tag">node.js</span> <span class="jser-tag">npm</span> <span class="jser-tag">yarn</span> <span class="jser-tag">console</span> <span class="jser-tag">Tools</span></p>
219+
220+
Rust製のNode.jsバージョン管理ツール。
221+
プロジェクトごとにNodeバージョンを切り替える仕組みやnpmで公開されているコマンドラインツールをインストールして利用する仕組みなどを持っている
222+
223+
224+
----

0 commit comments

Comments
 (0)