JSer.info #402 - Reactを使った静的サイトジェネレータであるGatsby 2.0.0がリリースされました。
Runtimeのサイズを削減、React 16、webpack 4、Babel 7に対応。
アクセシビリティの改善のためにreact-routerから@reach/routerに変更。
layoutコンポーネントをgatsby-plugin-layoutへ移動するといった変更も行われています。
Nuxt.js 2.0(Vueベース)とNext.js 7(Reactベース)がそれぞれリリースされています。
Nuxt.js:
- Release v2.0.0 · nuxt/nuxt.js
- Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app and more! 💫
- Nuxt.js v2.0.0がリリースされたので触ってみた【変更点まとめ】 - Studio Andy
Next.js:
どちらのフレームワークもBabel 7、webpack 4を使うように変更されています。
Nuxt.js 2.0では独自のvendorオプションは廃止され、webpack側の仕組みを使うような方針になっています。またあわせてcreate-nuxt-appというCLIも更新されています。
Next.js 7.0.0ではstyled-jsx v3.0.0への更新やCSSに対するDynamic Importの対応しています。またデフォルトではimport()に対してはNext.js側は何もしないように変更され、next/dynamicを使った時に処理するように統一されました。
Idle Until Urgent — Philip WaltonではrequestIdleCallback()を使った遅延実行のパターンについて書かれています。
さまざまなパターンの遅延実行やそのパターンを実装したidlizeというライブラリについて書かれています。
お知らせ
無事JSer.info 400回記念イベントは開催され、その結果については議事録なども含め次の記事で紹介しています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
What’s New in Safari - Apple Developer
developer.apple.com/safari/whats-new/
Safari 12リリース。
watchOSで動作するように、font-displayのサポート、iPadでFullscreen APIのサポート。
ITP 2.0、CORBの一部をサポート、.safariextzスタイルのSafari拡張を非推奨化など
Announcing Gatsby 2.0.0 🎉🎉🎉 | GatsbyJS
www.gatsbyjs.org/blog/2018-09-17-gatsby-v2/
静的サイトジェネレータとして知られるGatsby 2.0.0リリース。
Runtimeのサイズを削減、React 16、webpack 4、Babel 7に対応。
react-routerから@reach/routerに変更。layoutコンポーネントをプラグインに移動など
Release v2.0.0 · nuxt/nuxt.js
github.com/nuxt/nuxt.js/releases/tag/v2.0.0
Nuxt.js 2.0.0リリース。
Babel7、webpack 4を使うように、serverとclientの成果物を別々のディレクトリに出力できるように、nuxt.config.jsでserverオプションのサポートなど
Next.js 7 - Next.js Blog
Next.js 7.0.0リリース。
Babel 7、webpack 4へのアップグレード、react-error-overlayを使ったエラー表示を行うように。
CSSに対してもDynamic Importをサポート、assetPrefixオプションのサポートなど
Release electron v3.0.0 · electron/electron
github.com/electron/electron/releases/tag/v3.0.0
Electron 3.0リリース。
Chrome 66、Node 10.2.0へのアップデート。app.isPackaged、app.whenReady()の追加、いくつかのAPIの名前を変更といった破壊的な変更も行われている。
アーティクル
一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Developers Blog
user-first.ikyu.co.jp/entry/2018/09/20/090000
Calibreを使ったパフォーマンス計測とBudgetの設定、ファイルサイズの削減による最適化、Vueのv-ifとv-showの処理の違い、遅延ロードなどのパフォーマンス改善について
React製のSPAのパフォーマンスチューニング実例 | リクルートテクノロジーズ メンバーズブログ
recruit-tech.co.jp/blog/2018/09/19/react_spa_performance_tuning/
ReactコンポーネントのshouldComponentUpdateライフサイクルメソッドの動作とパフォーマンスについて。
shouldComponentUpdateの実装の違いによるコンポーネントの最適化の違いやボトルネックを開発者ツールで見つける方法についてなど
Idle Until Urgent — Philip Walton
philipwalton.com/articles/idle-until-urgent/
すぐに実行するとコストが高いものをrequestIdleCallbackを使い遅延実行することでfirst input delay (FID)を改善するという話。
それらのパターンをまとめたidliveというライブラリの使い方やユースケースについて
レガシーなフロントエンドコードを整理するためにどう立ち向かったか - Misoca開発者ブログ
tech.misoca.jp/entry/2018/09/21/110000
jQueryで書かれていたDOM操作とロジックがべったりだったコードをどのようにリファクタリングしていったかについて。
コードにおけるデータの読み書きの流れを整理どこまでをリファクタリング対象にするかを決めテストを書いて進めたかについて
スライド、動画関係
「1⇒100」のために「0⇒1」を考える フロントエンド - Speaker Deck
speakerdeck.com/mukai21/1-100-falsetameni-0-1-wokao-eru-hurontoendo
1=>100のフェーズは長くこの段階での変更は難しいため、0=>1の段階で基礎を作ることの重要性についてのスライド。
多人数開発でのコンポーネントガイド、PrettierやLint、テストとTypeScript、パッケージの更新を定期的に行うことについて
サイト、サービス、ドキュメント
Firefox Reality Developers Guide
blog.mozvr.com/firefox-reality-developers-guide/
WebVRをサポートしているライブラリについて。
またVRアプリでの最適化で気をつける点やFirefox Realityでのデバッグ方法について書かれている。
ソフトウェア、ツール、ライブラリ関係
bokub/lyo: 📦 Node.js to browser - The easy way
Browserify、Babel、UglifyJSを使った設定ファイルを使わないブラウザ向けにbundleするツール。
XOのようにopnionatedな設定を提供することで、設定自体をしなくても使えるようにしている。
GoogleChromeLabs/worker-plugin: 🐳 Adds native Web Worker bundling support to Webpack.
github.com/GoogleChromeLabs/worker-plugin
new Worker指定したファイルを自動的にbundleするwebpackプラグイン
KidkArolis/space-router: Minimal, yet awesome, universal router.
github.com/KidkArolis/space-router
ファイルサイズが小さなReact向けのルーターライブラリ
JamesHenry/typescript-estree: A parser that converts TypeScript source code into an ESTree-compatible form
github.com/JamesHenry/typescript-estree
TypeScript Compilerを使ってTypeScriptコードからESTree互換のASTを出力するパーサライブラリ
書籍関係
できるキッズ 子どもと学ぶ JavaScriptプログラミング入門 できるキッズシリーズ | 大澤文孝, できるシリーズ編集部 | 工学 | Kindleストア | Amazon
www.amazon.co.jp/dp/B07HHR8J4B/
2018年9月21日発売
プログラミング教育としてのJavaScript本
