Fork me on GitHub

2018-05-29のJS: React v16.4.0、Chrome 68の開発者ツール、自分で作るbundler

Edit on GitHub 編集履歴を見る

JSer.info #385 - React 16.4.0がリリースされました。

React 16.4.0ではPointer EventsがサポートされonPointerDown属性でハンドラを追加できるようになっています。またReact v16.3.0で追加されたgetDerivedStateFromPropsの挙動が修正されています。
getDerivedStateFromPropsは多くのアプリでは必要ないものだとして、今後フォローアップ記事を掲載する予定とのことです。


What's New In DevTools (Chrome 68)  |  Web  |  Google Developersという記事ではChrome 68(開発版)での開発者ツールの変更点についてまとめられています。

コンソールで入力中に実行結果を表示できる
Eaget Evaluationの実装、補完の改善、Lighthouse 3.0への更新、"Add property path watch"の追加などがおこなわれています。

次のGoogle I/Oの動画でも紹介されています。


次のリポジトリではJavaScriptのモジュールを1つのファイルに結合するbundlerをどうやって作るかについて紹介されています。

MinipackはBabelのASTパーサを使った300行程度のbundlerの実装となっています。
それぞれの処理にコメントで解説が書かれているのでbundlerの仕組みに興味がある人は読んでみるとよいかもしれません。


ヘッドライン


React v16.4.0: Pointer Events - React Blog

reactjs.org/blog/2018/05/23/react-v-16-4.html

React ReleaseNote

React 16.4リリース。
getDerivedStateFromPropsのバグ修正、Pointer Eventsのサポート。
試験的に<Profiler />のサポート、また実験的実装だったReact Call Returnを削除など


jsdom/Changelog.md at 11.11.0 · jsdom/jsdom

github.com/jsdom/jsdom/blob/11.11.0/Changelog.md

JavaScript DOM library ReleaseNote

jsdom 11.11.0リリース。
Node#getRootNodeメソッドの追加、whatwg-urlのアップデートなど


Node v10.2.0 (Current) | Node.js

nodejs.org/en/blog/release/v10.2.0/

node.js ReleaseNote

Node.js 10.2.0リリース。
assert.throwsの第2引数のバリデーションオブジェクトに正規表現を指定できるように。
Core APIのモジュールがnamed exportされるようになりES moduleからはnamed importできるようになるなど


ECMAScript proposal updates at 2018-05 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2018/05/28/ecmascript-proposal-updates

ECMAScript proposal news

2018年5月に行われたTC39ミーティング結果のECMAScript ProposalのStatus変更点まとめ。
Optional catch、JSON supersetがStage 4となった。


Prettier 1.13: Conquering the web! · Prettier

prettier.io/blog/2018/05/27/1.13.0.html

JavaScript Tools ReleaseNote

Prettier 1.13リリース。
ブラウザで動作するように、TypeScritp 2.9のサポート。
JSON.stringifyスタイルのフォーマットをサポートしpacakge.jsonとnpm/yarnとの整形の互換性を向上など


Release v4.10.0 · webpack/webpack

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

JavaScript bundler webpack ReleaseNote

webpack v4.10.0リリース。
WebAssemblyのTree Shakingをサポート(Dead Code Eliminationは未実装)、wasmのruntimeのファイルサイズを軽量化など


アーティクル


JavaScriptのStreams APIで細切れのデータを読み書きする

sbfl.net/blog/2018/05/26/javascript-streams-api/

stream JavaScript DOM article

WHATWG Stream APIについて。
Readable Stream、TransformStream、WritableStreamの使い方や繋げ方について


What's New In DevTools (Chrome 68)  |  Web  |  Google Developers

developers.google.com/web/updates/2018/05/devtools

Chrome debug article

Chrome 68の開発者ツールの変更点について。
Eaget Evaluation、補完の改善、Lighthouse 3.0への更新、"Add property path watch"の追加など


Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット

blog.nkzn.info/entry/2018/05/26/020312

React DOM article

React Native DOMというReact NativeをWebにPortするライブラリについての解説。
どのような仕組みでReact NativeのものをWebにPortしているかについて


Drupal JavaScript Initiative: The Road to a Modern Administration UI | Lullabot

www.lullabot.com/articles/drupal-javascript-initiative-the-road-to-a-modern-administration-ui

JavaScript React server library article CMS

DrupalはjQueryをコアに採用していたが、モダンなJavaScriptの仕組みを取り込むためにReactを採用することにした。
この決定をするために管理画面のプロトタイプを作成し、どのようなことを学び、課題を見つけたかについて。またフォームの問題についてなど


ブラウザのネットワークエラーをレポートさせるNetwork Error Loggingが来た - ASnoKaze blog

asnokaze.hatenablog.com/entry/2018/05/28/210830

Chrome debug network article

Chrome開発版で実装されたNetwork Error Loggingについて。
ネットワークエラーが発生したときに指定したエンドポイントでレポートを送ることができる仕組み。
DNSやTCP、TLSなどについてのエラーをクライアントから送信できる


スライド、動画関係


ReactEurope 2018 - Day 1 - YouTube - YouTube

www.youtube.com/playlist?list=PLCC436JpVnK3xH_ArpIjdkYDGwWNkVa73

React イベント video

ReactEurope 2018の動画まとめ


PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2

www.slideshare.net/MasahikoJinno2/pwa-beginners-4-a2hsv2

ios Android Chrome slide PWA

Add to HomeScreenについてのスライド。
対応方法、App Install Bannersの制御やユースケースについて。
またAndroid/Chromeでの動作とiOS/Safariでの動作の違いなどについて


Assert(js) Conf 2018 - YouTube - YouTube

www.youtube.com/playlist?list=PLZ66c9_z3umNSrKSb5cmpxdXZcIPNvKGw

JavaScript testing video

Assert(JS)カンファレンスの動画まとめ


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


Ameba Accessibility Guidelines

openameba.github.io/a11y-guidelines/

accessibility document

Amebaのアクセシビリティガイドライン。
項目ごとにWCAG 2.0との対応項目、悪い実装例、良い実装例が書かれている


popcodeorg/popcode: An HTML/CSS/JavaScript editor for use in the classroom

github.com/popcodeorg/popcode

HTML CSS JavaScript Tools editor

JSFiddleのようなエディタ環境ウェブアプリ


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


GoogleChromeLabs/audioworklet-polyfill: 🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.

github.com/GoogleChromeLabs/audioworklet-polyfill

JavaScript audio library

AudioWorkletのpolyfill


Vuesax

lusaxweb.github.io/vuesax/

Vue library

VueコンポーネントのUIフレームワーク


Wired Elements

wiredjs.com/

JavaScript UI WebComponents library

Web Componentsとして実装されている手書き風のUIコンポーネントライブラリ


github.com/trekhleb/javascript-algorithms

JavaScript algorithm library

JavaScriptで様々なデータ構造/探索アルゴリズムを実装しているリポジトリ。


vladocar/flexy: Flexy is minimal CSS framework made with Flex

github.com/vladocar/flexy

CSS library

Flexboxを使った小さなレイアウトフレームワーク。
カラムレイアウトをクラス名で指定できる。


ronami/minipack: 📦 A simplified example of a modern module bundler written in JavaScript

github.com/ronami/minipack

JavaScript AST example

JavaScriptパーサを使った小さなbundlerの実装サンプル。
どのようにbundlerを実装するかがコメント付きで紹介されている。


xtuc/webassemblyjs: Toolchain for WebAssembly

github.com/xtuc/webassemblyjs

AST JavaScript WebAssembly library

WebAssemblyのAST Toolchain。 Parser、Traverser、Printer、AST編集のヘルパー、整形ツールなどを揃えたmonorepo


書籍関係


js-primer(JavaScript入門本)がオフラインで読めるようになりました | Web Scratch

efcl.info/2018/05/25/js-primer-offline/

JavaScript book

js-primerがworkboxを使ってオフラインでも読めるようになった。 同じオフラインでもpdfやepubと違って内容が更新されれば、自動的に最新版を見られる。


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