Fork me on GitHub

2018-09-25のJS: Gatsby 2.0.0、Nuxt.js 2.0、Next.js 7、Idle Until Urgent

Edit on GitHub 編集履歴を見る

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:

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回記念イベントは開催され、その結果については議事録なども含め次の記事で紹介しています。


ヘッドライン


What’s New in Safari - Apple Developer

developer.apple.com/safari/whats-new/

ReleaseNote safari

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/

React Tools ReleaseNote

静的サイトジェネレータとして知られる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

Vue library ReleaseNote

Nuxt.js 2.0.0リリース。
Babel7、webpack 4を使うように、serverとclientの成果物を別々のディレクトリに出力できるように、nuxt.config.jsserverオプションのサポートなど


Next.js 7 - Next.js Blog

nextjs.org/blog/next-7/

React JavaScript library ReleaseNote

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 ReleaseNote

Electron 3.0リリース。
Chrome 66、Node 10.2.0へのアップデート。app.isPackagedapp.whenReady()の追加、いくつかのAPIの名前を変更といった破壊的な変更も行われている。


アーティクル


一休.comスマホサイトのパフォーマンス改善(JavaScript編) - 一休.com Developers Blog

user-first.ikyu.co.jp/entry/2018/09/20/090000

JavaScript Vue performance

Calibreを使ったパフォーマンス計測とBudgetの設定、ファイルサイズの削減による最適化、Vueのv-ifv-showの処理の違い、遅延ロードなどのパフォーマンス改善について


React製のSPAのパフォーマンスチューニング実例 | リクルートテクノロジーズ メンバーズブログ

recruit-tech.co.jp/blog/2018/09/19/react_spa_performance_tuning/

React performance article

ReactコンポーネントのshouldComponentUpdateライフサイクルメソッドの動作とパフォーマンスについて。
shouldComponentUpdateの実装の違いによるコンポーネントの最適化の違いやボトルネックを開発者ツールで見つける方法についてなど


Idle Until Urgent — Philip Walton

philipwalton.com/articles/idle-until-urgent/

JavaScript performance article

すぐに実行するとコストが高いものをrequestIdleCallbackを使い遅延実行することでfirst input delay (FID)を改善するという話。
それらのパターンをまとめたidliveというライブラリの使い方やユースケースについて


レガシーなフロントエンドコードを整理するためにどう立ち向かったか - Misoca開発者ブログ

tech.misoca.jp/entry/2018/09/21/110000

JavaScript リファクタリング article

jQueryで書かれていたDOM操作とロジックがべったりだったコードをどのようにリファクタリングしていったかについて。
コードにおけるデータの読み書きの流れを整理どこまでをリファクタリング対象にするかを決めテストを書いて進めたかについて


スライド、動画関係


「1⇒100」のために「0⇒1」を考える
フロントエンド - Speaker Deck

speakerdeck.com/mukai21/1-100-falsetameni-0-1-wokao-eru-hurontoendo

JavaScript TypeScript design slide 設計

1=>100のフェーズは長くこの段階での変更は難しいため、0=>1の段階で基礎を作ることの重要性についてのスライド。
多人数開発でのコンポーネントガイド、PrettierやLint、テストとTypeScript、パッケージの更新を定期的に行うことについて


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


Firefox Reality Developers Guide

blog.mozvr.com/firefox-reality-developers-guide/

VR firefox JavaScript

WebVRをサポートしているライブラリについて。
またVRアプリでの最適化で気をつける点やFirefox Realityでのデバッグ方法について書かれている。


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


bokub/lyo: 📦 Node.js to browser - The easy way

github.com/bokub/lyo

JavaScript bundler Tools console

Browserify、Babel、UglifyJSを使った設定ファイルを使わないブラウザ向けにbundleするツール。
XOのようにopnionatedな設定を提供することで、設定自体をしなくても使えるようにしている。


GoogleChromeLabs/worker-plugin: 🐳 Adds native Web Worker bundling support to Webpack.

github.com/GoogleChromeLabs/worker-plugin

webpack webworker plugin

new Worker指定したファイルを自動的にbundleするwebpackプラグイン


KidkArolis/space-router: Minimal, yet awesome, universal router.

github.com/KidkArolis/space-router

JavaScript React library

ファイルサイズが小さなReact向けのルーターライブラリ


JamesHenry/typescript-estree: A parser that converts TypeScript source code into an ESTree-compatible form

github.com/JamesHenry/typescript-estree

TypeScript JavaScript AST library

TypeScript Compilerを使ってTypeScriptコードからESTree互換のASTを出力するパーサライブラリ


書籍関係


できるキッズ 子どもと学ぶ JavaScriptプログラミング入門 できるキッズシリーズ | 大澤文孝, できるシリーズ編集部 | 工学 | Kindleストア | Amazon

www.amazon.co.jp/dp/B07HHR8J4B/

JavaScript book

2018年9月21日発売
プログラミング教育としてのJavaScript本


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