Fork me on GitHub

2017-08-08のJS: Storybook 3.2、core-js 2.5.0、Flow Lint

Edit on GitHub 編集履歴を見る

JSer.info #343 - React Componentの開発環境ツールであるStorybook 3.2がリリースされました。

3.2からはVueのコンポーネントをサポートやメニューの階層表示をサポート、onDeviceUIのオプションをサポートなどが行われています。

@storybook/reactの代わりに@storybook/vueを使うことでVueのコンポーネントをプレビュー環境で確認できるようになります。


babel-polyfillなどからも使われているpolyfillライブラリのcore-js 2.5.0がリリースされました。

2017年7月に行われたTC39のMeetingの内容を反映した更新が行われています。

Promise#finallyPromise.tryArray#flattenArray#flatMapの追加。 Collectionのof/from静的メソッドの追加、MathのProposalの追加、DOM collectionのiterable対応の更新などが行われています。


Linting in Flow – Flow – Mediumという記事では、Flow 0.52で追加されたFlowlintについて解説されています。

Flowに内蔵されているLinting Frameworkで、ESLintなどのようにルール毎にSeverity Levelsが設定できるようになっています。また、Flowlint Commentsを使うことで、コメントで部分的にルールを無効することもできるようになっています。

import type {
  // flowlint untyped-type-import:off
  Foo,
  Bar,
  Baz,
  // flowlint untyped-type-import:error
} from './untyped.js';

まだ自分でLint Ruleを追加する方法は書かれていませんが、今後のドキュメントを整備していくようです。


ヘッドライン


Release v3.2.0 · storybooks/storybook

github.com/storybooks/storybook/releases/tag/v3.2.0

JavaScript UI debug Tools ReleaseNote

Storybook 3.2.0リリース。
Vueのサポート、メニューの階層表示をサポート、onDeviceUIのオプションをサポートなど


TestCafe v0.17.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v0-17-0-released.html

JavaScript ReleaseNote browser testing

TestCafe v0.17.0リリース
testcafe-browser-provider-electronの追加、-cオプションでConcurrentなテストを実行できるように、Automatic waitの仕組みを改善など


Release v3.0.0 · sinonjs/sinon

github.com/sinonjs/sinon/releases/tag/v3.0.0

JavaScript testing library ReleaseNote

Sinon.js 3.0.0リリース。
Deprecatedとなっていたメソッドを削除、Fake XHR/Fake Serverはniseモジュールへ移動された。
format.setFormatterの追加など


V8 JavaScript Engine: V8 Release 6.1

v8project.blogspot.com/2017/08/v8-release-61.html

V8 ReleaseNote

V8 6.1リリース。
Map/Set/Object#isPrototypeOf()/Reflect.constructのパフォーマンス改善。
asm.jsのコードを検証してからwasmへコンパイルするようになるなど


Workspaces in Yarn | Yarn Blog

yarnpkg.com/blog/2017/08/02/introducing-workspaces/

yarn npm

lernaのようなmonorepo管理の仕組みであるyarn workspaceについての紹介。
オプションで有効化できる実験的な機能。リポジトリ内の複数のパッケージを管理して、それぞれのパッケージが依存するモジュールはsymlinkで解決できる。


Glamorous v4 is here 💄 🎉 🎊 – Kent C. Dodds – Medium

medium.com/@kentcdodds/glamorous-v4-is-here-c678fe02a39a

CSS React library ReleaseNote

CSS in JSなライブラリのglamorous v4リリース。
theme引数の削除、useDisplayNameInClassNameの削除。
withPropspropsAreCssOverridesshouldClassNameUpdateのサポートなど


Release 2.5.0 - 2017.08.05 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v2.5.0

JavaScript library ReleaseNote

core-js 2.5.0リリース。
Promise#finallyPromise.tryArray#flattenArray#flatMapの追加。
Collectionのof/from静的メソッドの追加、MathのProposalの追加、DOM collectionのiterable対応の更新、ProposalのStage対応など


アーティクル


JavaScriptフレームワーク選定の議論 - Qiita

qiita.com/azu/items/2921f62127b8d3a1aa03

JavaScript library opinion

JavaScriptのフレームワーク選定やTypeScript/Flowといった言語の選択について。 それぞれのカテゴリにどのような選択肢があり、どのように選択していくのかについて


This in JavaScript | Zell Liew

zellwk.com/blog/this/

JavaScript article

JavaScriptのthisについての解説。
グローバル、オブジェクト、メソッド、関数、Arrow Function、イベントハンドラなどにおけるthisについて。
またthisをバインドするbindについて


babel-preset-env@2.0 を試した -トランスパイル環境をスケールさせていく- | mediba Creator × Engineer Blog

ceblog.mediba.jp/post/163780014387/babel-preset-env-v2

babel plugin article JavaScript

現在αリリースされているbabel-preset-env 2.0αについて。 静的解析した結果のpolyfillだけを読み込む"useBuiltIns": "usage"の解説と挙動について。


Linting in Flow – Flow – Medium

medium.com/flow-type/linting-in-flow-7709d7a7e969

flowtype article

Flow 0.52.0で追加されたFlow linterについての解説。
ESLintのように.flowconfigやコメントでルール毎に有効/無効/エラーレベルの制御できる。


スライド、動画関係


component test // Speaker Deck

speakerdeck.com/bokuweb/component-test

JavaScript testing UI slide

ビジュアルリグレッションツールのreg-suitについてのスライド。
スナップショットとして保存した画像同士を比較しリグレッションを検知する。
プラグインでスナップショットの保存先や通知先を変更できる。


Get ready: A new V8 is coming, Node.js performance is changing. | nearForm

www.nearform.com/blog/node-js-is-getting-a-new-v8-with-turbofan/

V8 JavaScript performance

V8のバージョンごとの典型的なケースにおけるパフォーマンスについて。TurboFunによる最適化の違い。
try-catch、deleteundefinedの代入、argumetnsの渡し方の違い、bind、forループ、オブジェクトの生成などのケースいおける比較


真のコンポーネント粒度を求めて // Speaker Deck

speakerdeck.com/takazudo/zhen-falsekonponentoli-du-woqiu-mete

CSS slide

CSSとコンポーネントについてのスライド。
OOCSSやBEMにおけるコンポーネント、Atomic Designにおけるコンポーネントの粒度と抽象化、抽象化を避けたECSSコンポーネントなどについて


複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ // Speaker Deck

speakerdeck.com/shinpeim/fu-za-najavascriptapurikesiyonnili-tixiang-kautamefalseakitekutiya

JavaScript slide 設計

見通しが悪いものを分割統治する話。
プレゼンテーションとドメインの分離(MV*)、モデルをレイヤー分けについて。
レイヤードアーキテクチャのコンセプトとしてのクリーンアーキテクチャやCQRSについて。
また具体的な実装についてなど


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


The Critical Request | CSS-Tricks

css-tricks.com/the-critical-request/

JavaScript browser performance

クリティカルリクエストについて。
開発者ツールでリクエストのPriorityを見る方法、またPriorityはどのように付けられているか。
First meaningful paintを妨害するリクエストの見つけ方、Priorityをrel=preloadを使っての管理について


StackBlitz

stackblitz.com/

webservice editor

VSCodeを使ったオンラインIDE、コードシェアサービス。
Hot reloading、npmモジュールの管理、書いたコードの公開などができる


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


deepsweet/hocs: A collection of Higher-Order Components for React

github.com/deepsweet/hocs

React library

React用のHigh Order Componentを集めたライブラリ。
Propsの除外、LifeCycleのhook、debounce、throttleなど


書籍関係


Node.js 8 the Right Way - O'Reilly Media

shop.oreilly.com/product/9781680501957.do

node.js book

2017年10月発売
Node.js v8についての書籍


インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン | Heydon Pickering, 太田良典, 伊原力也, 株式会社Bスプラウト |本 | 通販 | Amazon

www.amazon.co.jp/dp/4862463878

HTML CSS JavaScript accessibility book

2017年9月29日発売
Inclusive Design Patternsについての翻訳本


最新JavaScript開発~ES2017対応モダンプログラミング | 電子書籍とプリントオンデマンド(POD) | NextPublishing(ネクストパブリッシング)

nextpublishing.jp/book/8958.html

JavaScript book

ES2017についてチュートリアルガイド


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