Fork me on GitHub

2019-02-12のJS: Vue 2.6(v-slot)、React 16.8(Hooks)、Next.js 8(serverless)

Edit on GitHub 編集履歴を見る

JSer.info #422 - Vue 2.6.0がリリースされました。

Slotsの新しい構文としてv-slotディレクティブが追加されています。
ライフサイクルhookがRejectedなPromiseを返した場合にエラーハンドリングできるように、コンパイルエラー表示の改善なども行われています。
また、npmパッケージにES Module版のビルドが含まれるようになりました。

ES Moduleをサポートしているブラウザなら、http://unpkg.com/のようなCDNを使い、次のようにVueを読むことができるようになっています。

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'

new Vue({
  // ...
})
</script>

React 16.8がリリースされました。

HooksというFunctional Components内でのステートやライフサイクルを扱う仕組みが追加されました。
また、Hooksのテスト向けにReactTestUtils.act()が追加されています。

Hooksについては公式ドキュメントにモチベーションから使い方までまとまっています。


Next.js 8がリリースされました。

Serverlessモードの追加され、ページごとにserverless functionを出力できるようになっています。このserverless functionは依存をbundleした形になっているため、読み込んでNode.jsのhttpサーバとつなぐことでページのコンテンツを返せます。

また、ビルド時のメモリ使用量改善、next.config.jsenvで環境変数を定義をサポート、出力するHTMLファイルサイズの改善などが行われています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Lightning-fast templates & Web Components: lit-html & LitElement - Polymer Project

www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release

WebComponents JavaScript library ReleaseNote

lit-html 1.0とLitElement 2.0リリース。
lit-htmlはTagged Templateを使ったHTMLテンプレート、LitElementはWeb Componentベースのクラスライブラリ


Vue 2.6 released! – The Vue Point – Medium

medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e

Vue ReleaseNote

Vue 2.6リリース。
v-slotディレクティブの追加、Dynamic Directive Argumentsのサポート。
ライフサイクルhookがRejectedなPromiseを返した場合にエラーハンドリングできるように、コンパイルエラー表示の改善。
またes module版がパッケージに含まれるように


React v16.8: The One With Hooks – React Blog

reactjs.org/blog/2019/02/06/react-v16.8.0.html

React ReleaseNote

React 16.8リリース。
Hooksがデフォルトで有効化された。
またHooksのテスト向けにReactTestUtils.act()が追加された。


New Release: 2.10.0

jshint.com/blog/2019-02-05/release-2-10-0/

JavaScript Tools ReleaseNote

JSHint 2.10.0リリース。
esversionオプションを追加し7,8,9を指定できるように。
async functionなどの構文をサポート


Chromium Blog: Chrome 73 Beta: Constructable stylesheets, a new RegExp function, and passive mouse events

blog.chromium.org/2019/02/chrome-73-beta-constructable.html

Chrome ReleaseNote

Chrome 73 Betaリリース。
CSSOMを操作するConstructable Stylesheet Objectsのサポート、String#matchAllのサポート、::partのサポート。
wheelイベントがデフォルトでpassiveとなるように変更など


Release v7.0.0 · h5bp/html5-boilerplate

github.com/h5bp/html5-boilerplate/releases/tag/v7.0.0

HTML5 template ReleaseNote

ウェブページのテンプレートプロジェクトのhtml5-boilerplate 7.0.0リリース。
IE9/10に関する記述を削除、theme-colorのmetaタグを追加、secutiry.txtについてを追加など


TestCafe v1.0.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v1-0-0-released.html

testing JavaScript library ReleaseNote

TestCafe 1.0.0リリース。
テストの実行を動画として録画できるように、.testcaferc.jsonの設定ファイルを追加、Live modeの統合、型定義ファイルの追加など


Blog - Next.js 8 | Next.js

nextjs.org/blog/next-8

React library ReleaseNote

Next.js 8リリース。
Serverlessモードの追加、ビルド時のメモリ使用量改善、envで環境変数を定義できるように、出力するHTMLファイルサイズの改善。
<Head>コンポーネントの重複の解決、crossOriginオプションの追加、CSP対応など


Introducing swc 1.0 · swc

swc-project.github.io/blog/2019/02/08/Introducing-swc-1.0

Rust bundler ReleaseNote JavaScript

Rust製のJavaScript Transpiler/Compilerのswc 1.0リリース。
ECMAScript 2019、JSX、TypeScriptサポートなど


What’s next for SemVer

words.steveklabnik.com/what-s-next-for-semver

news

SemVerプロジェクトにnpmやCargoなどのパッケージ管理ツールの人中心のGitHub Teamが作成され、RFCプロセスでの運用が開始されたという話


アーティクル


Making wheel scrolling fast by default  |  Web  |  Google Developers

developers.google.com/web/updates/2019/02/scrolling-intervention

Chrome JavaScript article

Chrome 73からwheelイベントがデフォルトで{ passive: true }となる。


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


Webpack bundle analysis, for every commit

packtracker.io/

webpack webservice github CI

webpackのbundleサイズの分析を行うウェブサービス。
GitHub Checkに対応してコミットごとのbundleサイズやハッシュの変更によるキャッシュヒットの有無などをビジュアライズできる。
OSSプロジェクトでは無料で利用できる。


pikapkg/pack: 📦⚡️ npm package building, reimagined. https://www.pikapkg.com/blog/introducing-pika-pack/

github.com/pikapkg/pack

npm bundler Tools

npmパッケージ公開向けにNodeやブラウザ、moduleなど様々な種類に向けたライブラリのビルドを行うbundleツール。
それぞれのビルド設定はプラグインになっており、必要なものをパイプラインに定義してまとめてビルドできる。


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


notion-cli/notion: Notion: the hassle-free JavaScript toolchain manager

github.com/notion-cli/notion

Rust node.js npm yarn console Tools

Rust製のNode.jsバージョン管理ツール。
プロジェクトごとにNodeバージョンを切り替える仕組みやnpmで公開されているコマンドラインツールをインストールして利用する仕組みなどを持っている


この記事へ修正リクエストをする
JSer.info Slackに参加する