Fork me on GitHub

2018-11-06のJS: Node.js 10.13.0(LTS)、React Hooks、Vueコンポーネントのテスト

Edit on GitHub 編集履歴を見る

JSer.info #408 - Node.js 10.13.0がリリースされました。

このリリースでNode.js 10.xがLong Term Support (LTS)となりました。
Node.js 10.xは2021年4月までサポートされます。

これを受けてApp Engineでは、Node.js 10をサポートしています。


Making Sense of React Hooks – Dan Abramov – Mediumという記事では、React v16.7.0-alphaで導入された"Hooks"のProposalについて書かれています。

Hooksが解決したい問題として巨大コンポーネント、重複ロジック、HOCなどの複雜なパターンをあげている。あわせてHooksの動作原理などについて書かれています。
また、Hooksはまだ試験的なものであるため、RFCのIssueなどでフィードバックを求めています。


1年間単体テストを書き続けた現場から送る Vue Component のテスト / Vue Component Test - Speaker DeckのスライドではVueコンポーネントのテストについて書かれています。

ライフサイクル、Props/Vuex State、User Interactionの3種類に分けてテストの方法について紹介されている。


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

JSer.info Sponsors

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


ヘッドライン


Release v2.1.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v2.1.0

React Tools ReleaseNote

create-react-app 2.1.0リリース。
Babelを使ったTypeScriptサポート。
create-react-app my-app --typescriptでTypeScriptプロジェクトとして作成できるようになった。


Video.js 7.3: Responsive Layout, Fill Mode, createLogger | Video.js Blog

blog.videojs.com/video-js-7-3-responsive-layout-fill-mode-createlogger/

video JavaScript library ReleaseNote

video.js 7.3リリース。
Fill Modeをplayer modeに格上げ、createLoggerメソッドの追加など


Node v11.1.0 (Current) | Node.js

nodejs.org/en/blog/release/v11.1.0/

node.js ReleaseNote

Node.js 11.1.0リリース。
ICUのアップデート、REPLでトップレベルawaitのサポートなど


Read Me - Squirrelly

squirrelly.js.org/

JavaScript library

ファイルサイズの小さなテンプレートエンジン。Handlebarsのようなカスタムヘルパー、delimiterの指定、フィルター、プリコンパイル、HTML以外への出力などに対応している


Node v10.13.0 (LTS) | Node.js

nodejs.org/en/blog/release/v10.13.0/

node.js ReleaseNote

Node.js 10.13.0リリース。 Node.js 10.xがLong Term Support (LTS)となり、2021年4月までメンテンスされる。


V8 release v7.1 · V8

v8.dev/blog/v8-release-71

V8 ReleaseNote

V8 v7.1リリース。
パフォーマンスの最適化、WasmでpostMessageをサポート。Intl.RelativeTimeFormatのサポート、globalThis Proposalをサポートなど


アーティクル


Making Sense of React Hooks – Dan Abramov – Medium

medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

React article opinion proposal

React v16.7.0-alphaで導入された"Hooks"のProposalについて。

Hooksが解決したい問題として巨大コンポーネント、重複ロジック、HOCなどの複雜なパターンをあげている。あわせてHooksの動作原理などについて書かれている。
また、Hooksはまだ試験的なものであるためフィードバックなどを求めている。


Node.jsにおけるprototype汚染攻撃への対策 - SSTエンジニアブログ

techblog.securesky-tech.com/entry/2018/10/31/

JavaScript security article

Prototype pollution攻撃への対応方法について。
MapやObject.create(null)__proto__の上書きを防ぐ方法、ネイティブの実装を上書きしてしまう方法などについて


Build a Bucket List Travel App with React and Material-UI (part 0) | appendTo

appendto.com/2018/10/build-a-bucket-listing-travel-app-with-react-and-material-ui/

tutorial React article

ReactとMaterial UIを使ってトラベルウェブアプリを作る連載。
スクレイピングしての候補データの取得、Pixabayを使っての画像取得、WikiVoyageを使ってので情報取得。
それらの情報を表示するウェブアプリを作成するチュートリアル。


Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog

tech.kitchhike.com/entry/2018/10/31/233000

React redux article 設計 opinion

Reactを使ったチーム開発において認識を合わせてておくとスムーズな概念について。
SFC、Flux/Redux、Context API、Renderパターン、SuspenseとHooksなどのトピックごとに解説とどのような方針をもって進めたかについて書かれている。


スライド、動画関係


[JAPANESE] Why vue-cli needed a UI and what you can do with it

slides.com/akryum/vue-cli-18-3-jp#/

Vue console Tools slide

Vue CLIについてのスライド。
Vue CLIは"Ease of Access"のために様々な機能をもっている。
ビルドツールチェイン、vue ui、プラグインシステムについて。


1年間単体テストを書き続けた現場から送る Vue Component のテスト / Vue Component Test - Speaker Deck

speakerdeck.com/tsuchikazu/vue-component-test

Vue slide testing

Vueコンポーネントのテストについてのスライド。
ライフサイクル、Props/Vuex State、User Interactionのテスト方法などについて


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


Web Performance 101: JS, CSS, HTTP, images & fonts | PerfPerfPerf

3perf.com/talks/web-perf-101/

performance slide browser

ウェブパフォーマンスについてのスライドを文字起こししたもの。
JavaScript、CSS、HTTP、Images、Fonts、Toolsについてそれぞれパフォーマンスの最適化についてのトピックが紹介されている。


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


gruns/irondb: A relentless key-value store for the browser.

github.com/gruns/irondb

JavaScript browser library

Cookie、IndexedDB、LocalStorageなどを重複して保存できるKey Valueストアライブラリ。
Evercookieのように複数のストレージに保存することで、どれが消えても他のデータから復元できるようにしている。


frontarm/async-javascript-cheatsheet: Cheatsheet for promises and async/await

github.com/frontarm/async-javascript-cheatsheet

JavaScript Promises チートシート

Async/Await、Promiseについてのチートシート


Stencil

stenciljs.com/

WebComponents library TypeScript jsx

Web Componentsフレームワークとコンパイラー。フレームワークに則ったコンポーネント
を書きWeb Components(Custom Elements)へコンパイルするツール。
TypeScriptやJSXをサポートし、ランタイムでコンポーネントのライフサイクル、非同期レンダリングなどをサポートしている。


chunqiuyiyu/ervy: Bring charts to terminal.

github.com/chunqiuyiyu/ervy

node.js グラフ library

ターミナルにグラフを描画できるライブラリ。
Bar, Pie, Bullet, Donut, Gauge, Scatterなどのグラフを描画できる


GoogleChromeLabs/carlo: Web rendering surface for Node applications

github.com/GoogleChromeLabs/carlo

Chrome Electron library node.js

ユーザー環境にインストール済みのChromeとPuppeteer経由で通信してNodeとBrowserを連携できる開発ツール。
ElectronのようなChromeをWebViewとしたアプリ開発ができる。Nodeからデータを送るといったことができ、Node向けのGUIフレームワークとして利用できる。


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