JSer.info #366 - コード整形ツールのPrettier 1.10がリリースされました。
Vue Single File Components(.vue)のサポート、Plugin APIのサポートが行われています。
Plugin APIは、PythonサポートやPrettier 2.0の議論の中でコンポーネントの分離をする流れで開発されました。
現在このAPIを使ってPython、PHP、Swiftのサポートが開発中となっています。
- prettier/prettier-python: Prettier Python Plugin
- prettier/prettier-php: Prettier PHP Plugin
- prettier/prettier-swift: Prettier Swift Plugin
Secure Contexts Everywhere | Mozilla Security Blogという記事では、今後のFirefoxでサポートする新しいウェブプラットフォームAPIなどはSecure Contextsでのみ動作する方針について書かれています。
Secure contextsは大雑把にいうとHTTPS/TLSで配信されているコンテンツの実行コンテキストのことで、window.isSecureContextで判定できます。
(localhostもSecure Contextなので開発時は問題ありません)
たとえば、このサイトはHTTPSで配信しているのでSecure Contextsでのコンテンツと判断されます。
console.log(location.origin); // => "https://jser.info/"
console.log(window.isSecureContext); // => true
今後Firefoxで新しい機能(JavaScript、CSS、HTTP、メディアフォーマットなど)をサポートする際にはSecure Contextsを必須にすることについて書かれています。
Web-exposed means that the feature is observable from a web page or server, whether through JavaScript, CSS, HTTP, media formats, etc. A feature can be anything from an extension of an existing IDL-defined object, a new CSS property, a new HTTP response header, to bigger features such as WebVR.
その機能が使えるかどうかの判定は、今までどおり@supportsやFeature Detectをすることが推奨されています。
また、すでにある機能の値の追加は例外になるケース(実装が複雑となるため)などについても書かれています。
他のブラウザなども含めSecure Contextsを必須とするAPIなどについては次のページに纏められています。
ヘッドライン
Release 2.5.0 · qunitjs/qunit
github.com/qunitjs/qunit/releases/tag/2.5.0
QUnit 2.5.0リリース。
assert.rejectsの追加、QUnit.onUnhandledRejectionの追加など
Node v9.4.0 (Current) | Node.js
nodejs.org/en/blog/release/v9.4.0/
Node v9.4.0リリース。
npm 5.6.0へアップデート、zlibモジュールでArrayBufferをサポートなど
Release Notes for Safari Technology Preview 47 | WebKit
webkit.org/blog/8060/release-notes-for-safari-technology-preview-47/
Safari Technology Preview Release 47リリース。
Storage Access APIの実験的サポート、Service Workerの改善、Web InspectorのCanvasタブをデフォルトで有効化など
Prettier 1.10: One Year of Prettier 🎂 · Prettier
prettier.io/blog/2018/01/10/1.10.0.html
Prettier 1.10リリース。
Vue Single File Componentsのサポート、Prettier Plugin APIの追加。
Python、PHP、Swiftをプラグインでサポート。
Announcing Storybook 3.3 – Storybook – Medium
medium.com/storybookjs/announcing-storybook-3-3-9972c4bc87ac
Storybook 3.3リリース。
Angularプロジェクトをサポート、viewportのシミュレート、storyshotsでのテスト改善など
Release v0.63.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.63.0
Flow 0.63.0リリース。
Strict modeでは関数の引数をconstとして扱うように
Secure Contexts Everywhere | Mozilla Security Blog
blog.mozilla.org/security/2018/01/15/secure-contexts-everywhere/
Firefoxは今後に新しい機能(JavaScript、CSS、HTTP、フォーマットなど)に利用する際にはSecure Contexts(HTTPS)を必須にする方針について。
新しいCSS color keywordのような既存部分の変更については例外とする場合があることについてなど
Release v6.0.0 · epoberezkin/ajv
github.com/epoberezkin/ajv/releases/tag/v6.0.0
JSON Schema Validatorのajv 6.0.0リリース。
JSON Schema Draft-07をサポート
アーティクル
But really, what is a JavaScript test? – kentcdodds
blog.kentcdodds.com/but-really-what-is-a-javascript-test-46fe5f3fad77
JavaScriptにおけるテストとはどうやって動くものかについて。
ifとthrowを使ったものからassertを使ったもの、テストフレームワークを使った構造化など順を追って見ていく話
Introducing Immer: Immutability the easy way – Michel Weststrate – Medium
medium.com/@mweststrate/introducing-immer-immutability-the-easy-way-9d73d8f71cb3
Immutableにオブジェクトを更新するimmerについて。
Proxyなどを使い実際に変更された場合にのみ、オブジェクト自身を更新する仕組みをもち、また開発中は自動でObject.freezeを適応する
ReduxのReducerのようなパターンをMutableなAPIで書ける。
HTTP/2 の内幕
www.ibm.com/developerworks/jp/web/library/wa-http2-under-the-hood/index.html
HTTP/2の歴史や特徴などの概要を簡単にまとめた記事
低帯域幅と高レイテンシの理解 | Web | Google Developers
developers.google.com/web/fundamentals/performance/poor-connectivity/?hl=ja
ネットワークの帯域やレイテンシのシミュレートするツールやlie-fiと呼ばれる問題のあるネットワークの問題について。
Service Workerを使ったネットワークタイムアウトについて
Learn TDD in React
Cypressを使ったE2Eテストを書いてからコンポーネントの実装を行う方法についてのチュートリアル。
data-test属性を使ってのテストコンポーネントの指定、機能の実装などについて
What’s new in Vue Devtools 4.0 – The Vue Point – Medium
medium.com/the-vue-point/whats-new-in-vue-devtools-4-0-9361e75e05d0
Vue DevTools 4.0の変更点について。
コンポーネントのデータ編集、アイテムの追加や削除、Quick Edit、エディタで開く、イベントフィルターの改善など
サイト、サービス、ドキュメント
How to Read the ECMAScript Specification
ECMAScriptの仕様書の読み方についてのドキュメント
2017 JavaScript Rising Stars
2017年のJavaScript関連におけるStarの増加率でのランキングまとめ
ソフトウェア、ツール、ライブラリ関係
React Studio
Reactを使ったサイトを作るGUIエディタ。ページ間の遷移なども扱える。
russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.
github.com/russellgoldenberg/scrollama
IntersectionObserverを使ったスクロールでのクラスの付け外しなどを行えるライブラリ。
スクロールでデザインが変わるパターンの実装補助ライブラリ
NervJS/nerv: A blazing fast React alternative, compatible with IE8 and React 16.
ReactライクなAPIをもつライブラリ。ファイルサイズや小さくしつつReactとの互換性をもつことを目的にしている。また、IE8をサポートしていて、devToolsやReduxとの連携するパッケージも用意されている。
zouhir/jarvis: A very intelligent browser based Webpack dashboard
webpackのダッシュボードプラグイン。
書籍関係
React本格入門 導入からテストまで高速で描写するための開発手法（穴井宏幸 柴田和祈 石井直矢 三宮肇）｜翔泳社の本
www.shoeisha.co.jp/book/detail/9784798153353
2018年02月19日発売
Reactに関する書籍。
