Fork me on GitHub

2018-01-16のJS: Prettier 1.10、Secure Contexts、TDD in Framework

Edit on GitHub 編集履歴を見る

JSer.info #366 - コード整形ツールのPrettier 1.10がリリースされました。

Vue Single File Components(.vue)のサポート、Plugin APIのサポートが行われています。

Plugin APIは、PythonサポートPrettier 2.0の議論の中でコンポーネントの分離をする流れで開発されました。

現在このAPIを使ってPython、PHP、Swiftのサポートが開発中となっています。


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

JavaScript testing library ReleaseNote

QUnit 2.5.0リリース。
assert.rejectsの追加、QUnit.onUnhandledRejectionの追加など


Node v9.4.0 (Current) | Node.js

nodejs.org/en/blog/release/v9.4.0/

node.js ReleaseNote

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 ReleaseNote

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

JavaScript Tools ReleaseNote

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

JavaScript testing Tools ReleaseNote

Storybook 3.3リリース。
Angularプロジェクトをサポート、viewportのシミュレート、storyshotsでのテスト改善など


Release v0.63.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.63.0

flowtype ReleaseNote

Flow 0.63.0リリース。
Strict modeでは関数の引数をconstとして扱うように


Secure Contexts Everywhere | Mozilla Security Blog

blog.mozilla.org/security/2018/01/15/secure-contexts-everywhere/

firefox security news WebPlatformAPI

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 JavaScript library ReleaseNote

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 testing article

JavaScriptにおけるテストとはどうやって動くものかについて。
ifとthrowを使ったものからassertを使ったもの、テストフレームワークを使った構造化など順を追って見ていく話


Introducing Immer: Immutability the easy way – Michel Weststrate – Medium

medium.com/@mweststrate/introducing-immer-immutability-the-easy-way-9d73d8f71cb3

JavaScript library article

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

HTTP2 article

HTTP/2の歴史や特徴などの概要を簡単にまとめた記事


低帯域幅と高レイテンシの理解  |  Web  |  Google Developers

developers.google.com/web/fundamentals/performance/poor-connectivity/?hl=ja

Chrome debug browser article

ネットワークの帯域やレイテンシのシミュレートするツールやlie-fiと呼ばれる問題のあるネットワークの問題について。
Service Workerを使ったネットワークタイムアウトについて


Learn TDD in React

learntdd.in/react/

React testing E2E article

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 debug Tools article

Vue DevTools 4.0の変更点について。
コンポーネントのデータ編集、アイテムの追加や削除、Quick Edit、エディタで開く、イベントフィルターの改善など


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


How to Read the ECMAScript Specification

timothygu.me/es-howto/

ECMAScript spec document

ECMAScriptの仕様書の読み方についてのドキュメント


2017 JavaScript Rising Stars

risingstars.js.org/2017/en/

JavaScript library Tools まとめ

2017年のJavaScript関連におけるStarの増加率でのランキングまとめ


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


React Studio

reactstudio.com/

React GUI software mac

Reactを使ったサイトを作るGUIエディタ。ページ間の遷移なども扱える。


russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

github.com/russellgoldenberg/scrollama

JavaScript library

IntersectionObserverを使ったスクロールでのクラスの付け外しなどを行えるライブラリ。
スクロールでデザインが変わるパターンの実装補助ライブラリ


NervJS/nerv: A blazing fast React alternative, compatible with IE8 and React 16.

github.com/NervJS/nerv

JavaScript React library

ReactライクなAPIをもつライブラリ。ファイルサイズや小さくしつつReactとの互換性をもつことを目的にしている。また、IE8をサポートしていて、devToolsやReduxとの連携するパッケージも用意されている。


zouhir/jarvis: A very intelligent browser based Webpack dashboard

github.com/zouhir/jarvis

webpack Tools plugin

webpackのダッシュボードプラグイン。


書籍関係


React本格入門 導入からテストまで高速で描写するための開発手法(穴井宏幸 柴田和祈 石井直矢 三宮肇)|翔泳社の本

www.shoeisha.co.jp/book/detail/9784798153353

JavaScript React book

2018年02月19日発売
Reactに関する書籍。


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