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をおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v2.1.0 · facebook/create-react-app
github.com/facebook/create-react-app/releases/tag/v2.1.0
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.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 11.1.0リリース。
ICUのアップデート、REPLでトップレベルawaitのサポートなど
Read Me - Squirrelly
ファイルサイズの小さなテンプレートエンジン。Handlebarsのようなカスタムヘルパー、delimiterの指定、フィルター、プリコンパイル、HTML以外への出力などに対応している
Node v10.13.0 (LTS) | Node.js
nodejs.org/en/blog/release/v10.13.0/
Node.js 10.13.0リリース。 Node.js 10.xがLong Term Support (LTS)となり、2021年4月までメンテンスされる。
V8 release v7.1 · V8
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 v16.7.0-alphaで導入された"Hooks"のProposalについて。
Hooksが解決したい問題として巨大コンポーネント、重複ロジック、HOCなどの複雜なパターンをあげている。あわせてHooksの動作原理などについて書かれている。
また、Hooksはまだ試験的なものであるためフィードバックなどを求めている。
- Introducing Hooks – React
- RFC: React Hooks by sebmarkbage · Pull Request #68 · reactjs/rfcs
- Array destructuring for multi-value returns (in light of React hooks) - Google ドキュメント
- React Conf 2018のKeynoteで発表されたHooks、Concurrent Reactのまとめ - Cybozu Inside Out | サイボウズエンジニアのブログ
Node.jsにおけるprototype汚染攻撃への対策 - SSTエンジニアブログ
techblog.securesky-tech.com/entry/2018/10/31/
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/
ReactとMaterial UIを使ってトラベルウェブアプリを作る連載。
スクレイピングしての候補データの取得、Pixabayを使っての画像取得、WikiVoyageを使ってので情報取得。
それらの情報を表示するウェブアプリを作成するチュートリアル。
Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
tech.kitchhike.com/entry/2018/10/31/233000
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 CLIについてのスライド。
Vue CLIは"Ease of Access"のために様々な機能をもっている。
ビルドツールチェイン、vue ui、プラグインシステムについて。
1年間単体テストを書き続けた現場から送る Vue Component のテスト / Vue Component Test - Speaker Deck
speakerdeck.com/tsuchikazu/vue-component-test
Vueコンポーネントのテストについてのスライド。
ライフサイクル、Props/Vuex State、User Interactionのテスト方法などについて
サイト、サービス、ドキュメント
Web Performance 101: JS, CSS, HTTP, images & fonts | PerfPerfPerf
ウェブパフォーマンスについてのスライドを文字起こししたもの。
JavaScript、CSS、HTTP、Images、Fonts、Toolsについてそれぞれパフォーマンスの最適化についてのトピックが紹介されている。
ソフトウェア、ツール、ライブラリ関係
gruns/irondb: A relentless key-value store for the browser.
Cookie、IndexedDB、LocalStorageなどを重複して保存できるKey Valueストアライブラリ。
Evercookieのように複数のストレージに保存することで、どれが消えても他のデータから復元できるようにしている。
frontarm/async-javascript-cheatsheet: Cheatsheet for promises and async/await
github.com/frontarm/async-javascript-cheatsheet
Async/Await、Promiseについてのチートシート
Stencil
Web Componentsフレームワークとコンパイラー。フレームワークに則ったコンポーネント
を書きWeb Components(Custom Elements)へコンパイルするツール。
TypeScriptやJSXをサポートし、ランタイムでコンポーネントのライフサイクル、非同期レンダリングなどをサポートしている。
chunqiuyiyu/ervy: Bring charts to terminal.
ターミナルにグラフを描画できるライブラリ。
Bar, Pie, Bullet, Donut, Gauge, Scatterなどのグラフを描画できる
GoogleChromeLabs/carlo: Web rendering surface for Node applications
github.com/GoogleChromeLabs/carlo
ユーザー環境にインストール済みのChromeとPuppeteer経由で通信してNodeとBrowserを連携できる開発ツール。
ElectronのようなChromeをWebViewとしたアプリ開発ができる。Nodeからデータを送るといったことができ、Node向けのGUIフレームワークとして利用できる。
