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のモジュールを１つのファイルに結合するbundlerをどうやって作るかについて紹介されています。
- ronami/minipack: 📦 A simplified example of a modern module bundler written in JavaScript
- Build your own bundler by Ronen Amiel
MinipackはBabelのASTパーサを使った300行程度のbundlerの実装となっています。
それぞれの処理にコメントで解説が書かれているのでbundlerの仕組みに興味がある人は読んでみるとよいかもしれません。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
React v16.4.0: Pointer Events - React Blog
reactjs.org/blog/2018/05/23/react-v-16-4.html
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
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 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
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
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
webpack v4.10.0リリース。
WebAssemblyのTree Shakingをサポート(Dead Code Eliminationは未実装)、wasmのruntimeのファイルサイズを軽量化など
アーティクル
JavaScriptのStreams APIで細切れのデータを読み書きする
sbfl.net/blog/2018/05/26/javascript-streams-api/
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 68の開発者ツールの変更点について。
Eaget Evaluation、補完の改善、Lighthouse 3.0への更新、"Add property path watch"の追加など
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
blog.nkzn.info/entry/2018/05/26/020312
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
DrupalはjQueryをコアに採用していたが、モダンなJavaScriptの仕組みを取り込むためにReactを採用することにした。
この決定をするために管理画面のプロトタイプを作成し、どのようなことを学び、課題を見つけたかについて。またフォームの問題についてなど
ブラウザのネットワークエラーをレポートさせるNetwork Error Loggingが来た - ASnoKaze blog
asnokaze.hatenablog.com/entry/2018/05/28/210830
Chrome開発版で実装されたNetwork Error Loggingについて。
ネットワークエラーが発生したときに指定したエンドポイントでレポートを送ることができる仕組み。
DNSやTCP、TLSなどについてのエラーをクライアントから送信できる
スライド、動画関係
ReactEurope 2018 - Day 1 - YouTube - YouTube
www.youtube.com/playlist?list=PLCC436JpVnK3xH_ArpIjdkYDGwWNkVa73
ReactEurope 2018の動画まとめ
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
www.slideshare.net/MasahikoJinno2/pwa-beginners-4-a2hsv2
Add to HomeScreenについてのスライド。
対応方法、App Install Bannersの制御やユースケースについて。
またAndroid/Chromeでの動作とiOS/Safariでの動作の違いなどについて
Assert(js) Conf 2018 - YouTube - YouTube
www.youtube.com/playlist?list=PLZ66c9_z3umNSrKSb5cmpxdXZcIPNvKGw
Assert(JS)カンファレンスの動画まとめ
サイト、サービス、ドキュメント
Ameba Accessibility Guidelines
openameba.github.io/a11y-guidelines/
Amebaのアクセシビリティガイドライン。
項目ごとにWCAG 2.0との対応項目、悪い実装例、良い実装例が書かれている
popcodeorg/popcode: An HTML/CSS/JavaScript editor for use in the classroom
JSFiddleのようなエディタ環境ウェブアプリ
ソフトウェア、ツール、ライブラリ関係
GoogleChromeLabs/audioworklet-polyfill: 🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.
github.com/GoogleChromeLabs/audioworklet-polyfill
AudioWorkletのpolyfill
Vuesax
VueコンポーネントのUIフレームワーク
Wired Elements
Web Componentsとして実装されている手書き風のUIコンポーネントライブラリ
trekhleb/javascript-algorithms: Algorithms and data structures implemented in JavaScript with explanations and links to further readings
github.com/trekhleb/javascript-algorithms
JavaScriptで様々なデータ構造/探索アルゴリズムを実装しているリポジトリ。
vladocar/flexy: Flexy is minimal CSS framework made with Flex
Flexboxを使った小さなレイアウトフレームワーク。
カラムレイアウトをクラス名で指定できる。
ronami/minipack: 📦 A simplified example of a modern module bundler written in JavaScript
JavaScriptパーサを使った小さなbundlerの実装サンプル。
どのようにbundlerを実装するかがコメント付きで紹介されている。
xtuc/webassemblyjs: Toolchain for WebAssembly
WebAssemblyのAST Toolchain。 Parser、Traverser、Printer、AST編集のヘルパー、整形ツールなどを揃えたmonorepo
書籍関係
js-primer(JavaScript入門本)がオフラインで読めるようになりました | Web Scratch
efcl.info/2018/05/25/js-primer-offline/
js-primerがworkboxを使ってオフラインでも読めるようになった。 同じオフラインでもpdfやepubと違って内容が更新されれば、自動的に最新版を見られる。
