Fork me on GitHub

2018-08-21のJS: webpack 4のマイナーな変更、スクロールの歴史、Puppeteer Recorder

Edit on GitHub 編集履歴を見る

JSer.info #397 - webpack 4.0 to 4.16: Did you know? – webpack – Mediumという記事では、webpackのマイナー(4.0 ~ 4.16)の変更に関してまとめて解説されています。

webpack 4ではCommonsChunkPluginが削除され、代わりにoptimization.splitChunksというオプションが追加されています。

その後のマイナーアップデートでもautomaticNameDelimitermaxSizeオプションの追加などが行われています。
また、Code Splittingする際にはDynamic Importsに対してimport(/* webpackChunkName: "lodash" */ 'lodash')のような特殊なコメントでモジュールごとの挙動を指定できるようになっています。
この挙動の指定に関しても、マイナーの変更としてpreloadなどを指定できるwebpackPrefetchや、そのままimport()として出力するためのwebpackIgnoreコメントなどが追加されています。

その他にもwebpack 4のマイナーの変更が紹介されているので、興味がある人は見てみると良さそうです。


Puppeteer Recorder - Chrome ウェブストアというChrome拡張が公開されています。
この拡張はSelenium IDEのように、Chromeでの操作を記録し、それを再現するコードをPuppeteer向けのスクリプトとして出力します。

また、Creating a Chrome extension in 2018: The good, the bad and the meh | Checklyという記事では、このChrome拡張に関する解説が行われています。

PuppeteerはHeadless Chromeを扱うHigh LevelなAPIをまとめたライブラリですが、foxrというFirefox(headless)をPuppeteerライクなAPIで操作するライブラリも公開されています。

foxrはまだ開発段階ですが、Puppeteer APIのサブセットとして互換性のあるAPIを提供することを目的としています。


ヘッドライン


Release: npm@6.4.0 - 📣 announcements - npm forum

npm.community/t/release-npm-6-4-0/1417

npm ReleaseNote

npm 6.4.0リリース。
IPv6が使える場合はIPv6を使うように、npm audit--audit-levelを追加など


アーティクル


Variable Scope in Modern JavaScript with var, let and const | Andy Carter

andy-carter.com/blog/variable-scope-in-modern-javascript

JavaScript article

varletconstの変数のスコープについて解説している記事。


Better tree shaking with deep scope analysis – webpack – Medium

medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77

webpack JavaScript article

webpackのTree Shakingではモジュール間同士の依存に関するDead Code Eliminationに動かないケースがあった。
そのパターンを解決するプラグインとその動作の解説について


webpack 4.0 to 4.16: Did you know? – webpack – Medium

medium.com/webpack/webpack-4-0-to-4-16-did-you-know-71e25a57fa6b

webpack article

webpack 4以降の変更点について。
optimizationautomaticNameDelimitermaxSizeオプションの追加。
Dynamic Importでpreloadなどを指定できるwebpackPrefetchや、そのままimport()として出力するためのwebpackIgnoreコメントのサポートなど。


Scroll to the future — Martian Chronicles, Evil Martians’ team blog

evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations

browser UI WebPlatformAPI CSS JavaScript

ブラウザとスクロールについての歴史や変更についてをまとめた記事。
スクロールバーのOSやブラウザでの表示の違い、Element#scrollIntoViewやCSS scroll-behaviorでのスクロールの挙動。
またstickyやIntersection Observer、overscroll-behaviorプロパティなどについて


Cross-tab Synchronization with the Web Locks API - Blog | SitePen

www.sitepen.com/blog/2018/08/14/cross-tab-synchronization-with-the-web-locks-api/

WebPlatformAPI Chrome JavaScript article

Web Locks APIを使ったタブ間同士のコミュニケーションについて。
Web Locks APIのユースケースや使い方について


JavaScript engine fundamentals: optimizing prototypes · Mathias Bynens

mathiasbynens.be/notes/prototypes

JavaScript V8

JavaScriptエンジン(V8)のprototypeの最適化の仕組みについての解説


スライド、動画関係


Tangled World of Web Technology ― Are we safe? - Speaker Deck

speakerdeck.com/lmt_swallow/tangled-world-of-web-technology-are-we-safe

JavaScript library XSS slide security

ブラウザでの新しい技術と今まである技術が絡んだ脆弱性についてのスライド。
ReactやVueといったデフォルトエスケープされるライブラリにおいてもXSSは起こるケースがあること。
また、Service WorkerやCSPなど新しい技術と今まである技術が絡み合うことで発生する問題などの紹介。


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


Puppeteer Recorder - Chrome ウェブストア

chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda

Chrome Extension testing

Chromeの操作を記録してPuppeteerで再生できるスクリプトを出力できるブラウザ拡張。


deepsweet/foxr: 🦊 Node.js API to control Firefox

github.com/deepsweet/foxr

firefox API node.js

Firefoxをremote protocol経由で操作するNode.jsライブラリ。
Headlessモードにも対応し、APIはPuppeteerのサブセット互換のものを提供することを目的としている


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


Angular Console

angularconsole.com/

Angular console GUI software

Angular CLIのUIを提供することを目的にしたアプリ。
Angular CLIでできる操作をGUIから行えるようにすることが目的。


flowchart.js

flowchart.js.org/

JavaScript SVG library グラフ

テキストからSVGのフローチャートを作成するJavaScriptライブラリ。


Tonejs/Tone.js: A Web Audio framework for making interactive music in the browser.

github.com/Tonejs/Tone.js

web audio API library

Web Audio APIを使ったインタラクティブミュージックを作成するためのフレームワーク。
Max/MSPインスパイアなシグナルプロセッシング向けの処理やモジュールを提供するのが目的


arguiot/TheoremJS: A Math library for computation in JavaScript

github.com/arguiot/TheoremJS

JavaScript library

MathやNumber、代数、統計などに関する関数を集めたmathematicalフレームワーク


spencermountain/spacetime: A lightweight javascript timezone library

github.com/spencermountain/spacetime

JavaScript i18n library

他のライブラリに依存していないタイムゾーンライブラリ。また、i18n APIには直接依存していない。歴史的なタイムゾーンの扱いを省略することでファイルサイズを小さくしている。


書籍関係


Vue.js入門 基礎から実践アプリケーション開発まで | 川口 和也, 手島 拓也, 野田 陽平, 喜多 啓介, 片山 真也 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4297100916/

Vue book

2018年9月22日発売
Vue.jsについての書籍


JavaScript Data Structures and Algorithms: An Introduction to Understanding and Implementing Core Data Structure and Algorithm Fundamentals: Sammie Bae: 9781484239872: Amazon.com: Books

www.amazon.com/dp/1484239873/

JavaScript book

2019年3月11日発売
JavaScriptでのデータ構造やアルゴリズムについての書籍


JavaScript逆引きレシピ 第2版 達人が選んだ珠玉の現場ワザ(山田祥寛)|翔泳社の本

www.shoeisha.co.jp/book/detail/9784798157573

JavaScript book

2018年10月15日発売
JavaScriptの逆引きリファレンス本


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