2020-01-07のJS: Mocha v7.0.0、Next.js 9.1.7、ペースにあわせたTypeScriptへの移行

_i18n/ja/_posts/2020/2020-01-07-mocha-v7.0.0next.js-9.1.7typescript.md

@@ -0,0 +1,190 @@
+---
+title: "2020-01-07のJS: Mocha v7.0.0、Next.js 9.1.7、ペースにあわせたTypeScriptへの移行"
+author: "azu"
+layout: post
+date : 2020-01-07T02:10:03.192Z
+category: JSer
+tags:
+- Test
+- Next.js
+- TypeScript
+
+---
+
+JSer.info #469 - テストフレームワークのMocha v7.0.0がリリースされました。
+
+- [Release v7.0.0 · mochajs/mocha](https://github.com/mochajs/mocha/releases/tag/v7.0.0)
+- [mocha/CHANGELOG.md at master · mochajs/mocha](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md#%E2%80%8B700--2020-01-05)
+
+Mocha v7.0.0では、EOL([End-of-Life](https://github.com/nodejs/Release#end-of-life-releases))であるNode.js 6.xのサポートを終了しています。
+
+:memo: Node.js 8.xも2019-12-31にEOLとなり、Node.jsとしては公式にサポートを終了しています。
+また、コマンドラインオプションが一部リネームされています。
+
+- `--debug` → `--inspect`
+- `--debug-brk` → `--inspect-brk`
+- `--list-interfaces` → `--interfaces`
+- `--list-reporters` → `--reporters`
+
+その他には、レガシーな設定方法である`mocha.opts`ファイルが非推奨となりました。
+`.mocharc.js`などのConfiguration Fileを使った設定方法が今後のメインとなります。
+
+- <https://mochajs.org/#configuring-mocha-nodejs>
+
+`mocha.opts`からのマイグレーションツールはv7.0.0には含まれていませんが、実装中のようです。
+
+- [Soft deprecate "mocha.opts" · Issue #3910 · mochajs/mocha](https://github.com/mochajs/mocha/issues/3910)
+- [Create migrate script to change mocha.opts to [json | js | yml | yaml] by wnghdcjfe · Pull Request #4069 · mochajs/mocha](https://github.com/mochajs/mocha/pull/4069)
+
+----
+
+Reactを使ったフレームワークであるNext.js 9.1.7がリリースされました。
+
+- [Blog - Next.js 9.1.7 | Next.js](https://nextjs.org/blog/next-9-1-7)
+- [Release v9.1.7 · zeit/next.js](https://github.com/zeit/next.js/releases/tag/v9.1.7)
+
+クライアントサイドでは、[native-url](https://github.com/GoogleChromeLabs/native-url)を使い`url`パッケージを自動的に[`URL`](https://developer.mozilla.org/ja/docs/Web/API/URL)ベースに置き換えることでビルドファイルサイズが削減されています。
+
+同じ話ですが、`fetch`、`Object.assign`のpolyfillを使っている場合に、それを自動的にビルドインの実装と置き換える仕組みが含まれています。
+これは、アプリケーション内で同じAPIに対する複数のpolyfillが存在する場合にファイルサイズが増加するため、それをビルトインAPIを使った実装に置き換えてファイルサイズを削減する仕組みです。
+
+まとめると、次のAPIに対するpolyfillパッケージをビルトインの実装で置き換えています。
+
+- `whatwg-fetch` and `unfetch` → [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API): 
+- `object-assign`, `object.assign`, and `core-js/object/assign` → [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `url`(Node.js API) → [URL](https://developer.mozilla.org/ja/docs/Web/API/URL)
+  - [native-url](https://github.com/GoogleChromeLabs/native-url)を利用
+
+仕組み的には、webpackの`alias`設定で、元々あった`whatwg-fetch`などのpolyfillパッケージを[ビルトインAPIをexportするだけのpolyfill](https://github.com/zeit/next.js/tree/2757826cf75e75ddbcb2d4f57800da2fb0563346/packages/next/build/polyfills)で置換しているようです。
+
+- <https://github.com/zeit/next.js/blob/2757826cf75e75ddbcb2d4f57800da2fb0563346/packages/next/build/webpack-config.ts#L66-L92>
+
+その他には、Reactで[Strict Mode](https://reactjs.org/docs/strict-mode.html)を有効化する`reactStrictMode`オプションの追加なども行われています。
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## mocha/CHANGELOG.md at master · mochajs/mocha
+[github.com/mochajs/mocha/blob/master/CHANGELOG.md#%E2%80%8B700--2020-01-05](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md#%E2%80%8B700--2020-01-05 "mocha/CHANGELOG.md at master · mochajs/mocha")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">testing</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Mocha 7.0.0リリース。
+Node.js v6.xのサポート終了、一部コマンドライン引数のリネーム、`Mocha`コンストラクタのオプションとコマンドラインオプションをあわせるように変更など。
+また、`mocha.opts`ファイルが非推奨となった。
+
+- [Soft deprecate &quot;mocha.opts&quot; · Issue #3910 · mochajs/mocha](https://github.com/mochajs/mocha/issues/3910 "Soft deprecate &amp;quot;mocha.opts&amp;quot; · Issue #3910 · mochajs/mocha")
+
+----
+
+## Release v0.115.0 · facebook/flow
+[github.com/facebook/flow/releases/tag/v0.115.0](https://github.com/facebook/flow/releases/tag/v0.115.0 "Release v0.115.0 · facebook/flow")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">flowtype</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Flow v0.115.0リリース。
+Types First modeではexportされたclassやfunctionは再定義できなくなるなど。
+
+- [What the Flow team has been up to - Flow - Medium](https://medium.com/flow-type/what-the-flow-team-has-been-up-to-54239c62004f "What the Flow team has been up to - Flow - Medium")
+
+----
+
+## Blog - Next.js 9.1.7 | Next.js
+[nextjs.org/blog/next-9-1-7](https://nextjs.org/blog/next-9-1-7 "Blog - Next.js 9.1.7 | Next.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Next.js 9.1.7リリース。
+クライアントのビルドサイズの削減、ビルド結果表示の変更、ビルドインのpolyfillとしして`fetch`、URL、`Object.assign`の追加、`reactStrictMode`オプションの追加など
+
+- [Release v9.1.7 · zeit/next.js](https://github.com/zeit/next.js/releases/tag/v9.1.7 "Release v9.1.7 · zeit/next.js")
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Understanding positioning in CSS - DEV Community 👩‍💻👨‍💻
+[dev.to/huijing/understanding-positioning-in-css-7mn](https://dev.to/huijing/understanding-positioning-in-css-7mn "Understanding positioning in CSS - DEV Community 👩‍💻👨‍💻")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
+
+CSSのBox modelとpositionについての記事。
+
+
+----
+
+## How to move your project to TypeScript - at your own pace - Twilio
+[www.twilio.com/blog/move-to-typescript](https://www.twilio.com/blog/move-to-typescript "How to move your project to TypeScript - at your own pace - Twilio")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">VSCode</span> <span class="jser-tag">article</span></p>
+
+プロジェクトのコードをTypeScriptに移行するポイントについての記事。
+VSCodeの`settings.json`での`checkJs`、`tsconfig.json`を使った`allowJs`と`checkJs`の設定、JSからTSへのリファクタリング、`strict`の設定などについて
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## machinelearnjs/machinelearnjs: Machine Learning library for the web and Node.
+[github.com/machinelearnjs/machinelearnjs](https://github.com/machinelearnjs/machinelearnjs "machinelearnjs/machinelearnjs: Machine Learning library for the web and Node.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">MachineLearning</span> <span class="jser-tag">library</span></p>
+
+TypeScriptで書かれたMLライブラリ
+
+
+----
+
+## hjkcai/typesafe-joi: A fork of joi that produces typed validation results in TypeScript
+[github.com/hjkcai/typesafe-joi](https://github.com/hjkcai/typesafe-joi "hjkcai/typesafe-joi: A fork of joi that produces typed validation results in TypeScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+データバリデーターであるjoiのTypeScriptフォークライブラリ。
+大部分は互換性のあるAPIだが、一部はType SafeにするためAPIを変更している。
+
+
+----
+
+## antvis/G6: ♾ A Graph Visualization Framework in JavaScript
+[github.com/antvis/G6](https://github.com/antvis/G6 "antvis/G6: ♾ A Graph Visualization Framework in JavaScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">graphic</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+データビジュアライズライブラリ。
+グラフの情報とデータを渡すことでビジュアライズしてくれるライブラリ
+
+
+----
+
+## shellyln/tynder: TypeScript friendly Data validator for JavaScript.
+[github.com/shellyln/tynder](https://github.com/shellyln/tynder "shellyln/tynder: TypeScript friendly Data validator for JavaScript.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">Tools</span></p>
+
+TypeScriptライクなDSLでスキーマを定義し、実行時にデータの型を検証を行うバリデーションライブラリ。
+
+- [TypeScriptの型定義を使って、実行時にデータの検証を行う - Shellylのブログ](https://shellyln.hatenablog.com/entry/2020/01/05/161345 "TypeScriptの型定義を使って、実行時にデータの検証を行う - Shellylのブログ")
+
+----
+
+## mroderick/plete: Vanilla autocomplete component
+[github.com/mroderick/plete](https://github.com/mroderick/plete "mroderick/plete: Vanilla autocomplete component")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">WAI-ARIA</span></p>
+
+依存のないautocomplete UIライブラリ。
+Modern browserを対象としている。
+
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## BiB/i あらため Bibi v1.0.0 を公開しました | ふらここ、こ
+[fracoco.co/2020/01/03/bibi-v1.html](https://fracoco.co/2020/01/03/bibi-v1.html "BiB/i あらため Bibi v1.0.0 を公開しました | ふらここ、こ")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">epub</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+JavaScriptで書かれているEpubリーダのBibi v1.0.0リリース。
+ZIPファイルの展開にWasmを使うBibi Zip Loaderによる高速化、UIの改善、epubの対応改善など
+
+- [lunascape/bibi-zip-loader](https://github.com/lunascape/bibi-zip-loader "lunascape/bibi-zip-loader")
+
+----