Fork me on GitHub

2019-10-15のJS: webpack 5β、Next.js(create-next-app)、Same-Site Cookies

Edit on GitHub 編集履歴を見る

JSer.info #457 - webpack 5βがリリースされ、ベータフィードバックを求めるIssueが作られています。

webpack 5βでは、破壊的な変更としてNode.jsコアモジュールの自動Polyfillの削除、Long TermキャッシュのためにChunkとModule Idのハッシュアルゴリズムの変更、オプション名の変更などが行われています。
その他の機能として、ファイルシステムキャッシュ設定の追加、Tree Shakingの改善、output.ecmaVersionオプションの追加なども行われています。
また試験的な機能としてasset module typeの追加、Top Level awaitのサポートなども含まれています。

4.xから5.xへのマイグレーションガイドも次のページで公開されています。

ベータフィードバックでは、バグやパフォーマンスリグレッション、Breaking Changeに対するコメントなどが募集されています。


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

Next.js 9.1.0では、src/pagesディレクトリのサポート、next exportpublic/ディレクトリへ出力できるように設定が追加されています。
また、次の試験的な機能がフラグ付きで実装されています。

  • Built-in CSS Support
  • Static Error Pages
  • Module / Nomoduleの出力

その他には、今までコミュニティが管理していたcreate-next-appが公式に移管されました。
公式のExampleでもcreate-next-appを使っていく形になるようです。


Same-Site Cookies By Default | text/plainという記事ではSame-Site Cookiesについて詳しく書かれています。

Chrome 80でCookieのデフォルトSameSite=Laxとする予定で、この記事ではSame-Site Cookiesの目的や実際の影響などについて書かれています。
Same-Site CookiesはCSRF攻撃からの保護に役立つごとや、CookiのHTTPOnly属性やSecure属性についても書かれています。
またSame-Siteがデフォルトとなった場合の実際の影響や他のブラウザの対応などについても書かれています。

Same-Site CookiesはSameSite=Noneと設定することで無効化できますが、Safari 12にはSameSite=NoneSameSite=Strictとして扱うバグがあることやデバッグ方法についてなど実際に扱う場合の問題についても触れています。


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

JSer.info Sponsors

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


ヘッドライン


The new evergreen Bingbot simplifying SEO by leveraging Microsoft Edge | Webmaster Blog

blogs.bing.com/webmaster/october-2019/The-new-evergreen-Bingbot-simplifying-SEO-by-leveraging-Microsoft-Edge

MSEdge Chrome SEO news

BingがChromiumベースのMSEdgeを採用。
クロールするBingbotがChrome相当になり、定期的に最新のStableにアップデートされる。


Release v9.1.0 · zeit/next.js

github.com/zeit/next.js/releases/tag/v9.1.0

node.js React ReleaseNote

Next.js 9.1.0リリース。
src/pagesディレクトリのサポート、next exportpublic/ディレクトリへ出力できるように


webpack 5 beta feedback · Issue #9802 · webpack/webpack

github.com/webpack/webpack/issues/9802

webpack ReleaseNote

webpack 5βリリース。
Node.jsコアモジュールの自動Polyfillの削除、Long TermキャッシュのためにChunkとModule Idのハッシュアルゴリズムの変更、オプション名の変更など。
ファイルシステムキャッシュ設定の追加、Tree Shakingの改善、output.ecmaVersionオプションの追加。
また試験的な機能として、asset module typeの追加、Top Level awaitのサポートなど


Node v12.12.0 (Current) | Node.js

nodejs.org/en/blog/release/v12.12.0/

node.js ReleaseNote

Node.js 12.12.0リリース。
fs.opendir()fs.Dirの追加、--enable-source-mapsでのスタックトレースのSource Mapサポートなど


Blog - Introducing Create Next App | Next.js

nextjs.org/blog/create-next-app

JavaScript React Tools ReleaseNote

create-next-appがNext.jsの公式プロジェクトになった。


アーティクル


Top-level await · V8

v8.dev/features/top-level-await

JavaScript article

Top-level awaitについて。
Top-level awaitのユースケースや実行順序などの挙動についてなど


Same-Site Cookies By Default | text/plain

textslashplain.com/2019/09/30/same-site-cookies-by-default/

Chrome security article

Chrome 80でされるSameSite=Laxのデフォルト化について。
CookieのSecurityとPrivacyの問題、Same-Site Cookiesの目的、CSRF攻撃からの保護、HTTPOnly属性やSecure属性について。
またSame-Siteがデフォルトとなった場合の実際の影響や他のブラウザの対応、2分間の緩和についてなど


What's new in Chrome 78 - LogRocket Blog

blog.logrocket.com/whats-new-in-chrome-78/

Chrome article

Chrome 78の変更点について。
CSS opacityの%サポート、ES ProposalのOptional Chaining、unload時の制限、User Timing Lv3、WebSocketStreamのサポートなど。

Origin TrialとしてサポートされたNative File System APIやSMS Receiver APIについてなど


スライド、動画関係


Vue.js Performance Tips / #v_kansai 11 - Speaker Deck

speakerdeck.com/masashi/number-v-kansai-11

Vue performance slide

Vue.jsアプリのパフォーマンス改善についてのスライド。
IntersectionObserverを使った表示されたことの検知、画像の遅延ロード、Hydrationの遅延実行などについて


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


lirantal/is-website-vulnerable: finds publicly known security vulnerabilities in a website's frontend JavaScript libraries

github.com/lirantal/is-website-vulnerable

JavaScript security Tools

指定したURLに脆弱性のあるライブラリが使われているかを判定するツール。
Synxベースの脆弱性判定をしている。


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


leeoniya/uPlot: An exceptionally fast, tiny time series chart

github.com/leeoniya/uPlot

JavaScript chart library

ファイルサイズが小さな時系列グラフライブラリ


devforth/painterro: Painterro - JavaScript painting plugin

github.com/devforth/painterro

Image JavaScript library

画像エディタライブラリ


luwes/sinuous: Small, fast, reactive UI library

github.com/luwes/sinuous

JavaScript UI library jsx

htm構文、Hyperscript、JSXに対応したUIライブラリ。
observableな値監視の仕組みも提供し、小さなファイルサイズでUIを作成できるようにすることが目的


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