Fork me on GitHub

2017-02-20のJS: Babel 6.23.0、React Context、HTMLリファレンス

Edit on GitHub 編集履歴を見る

JSer.info #319 - Babel 6.23.0がリリースされました。

transform-es2015-block-scopingthrowIfClosureRequiredオプションが追加されました。
Babelの変換ではconstletなどのスコープを実現するために、即時実行関数でスコープを作るという手法を取っています。
このオプションでは、そのようなスコープを作るケースをエラーにすることでパフォーマンス改善を行うためのオプションです。

babel-preset-flowの追加やReactの最適化プラグインのバグ修正、babel-traverseに隣接Nodeを取得するAPIの追加などが行われています。

Reactの最適化プラグイン周りのIssueについては、次のIssueも参考にすると良さそうです。


Context in ReactJS Applicationsという記事では、ReactのContextについて解説されています。

そもそもReact Contextはどのようにして親から子のコンポーネントに値を渡しているのかや、使い方について書かれています。またContextを使うことによるメリットやデメリットについても書かれています。

If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.

-- Context - React

公式のドキュメントにも注意が書かれていますが、React Contextは将来的にはAPIの変更が予定されています(具体案は提示されていない)。そのため、メリットとデメリットを把握しておくと良さそうです。


HTML ReferenceというサイトではHTMLタグのリファレンスが公開されています。

それぞれのタグごとに動作するサンプルコードがあり、block/inline/self-closing/metaで大きく分類されています。

HTML Refeence


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

JSer.info Sponsors

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


ヘッドライン


6.23.0 Released · Babel

babeljs.io/blog/2017/02/13/6.23.0

babel ReleaseNote


Babel 6.23.0リリース。
transform-es2015-block-scopingthrowIfClosureRequiredオプションの追加、babel-preset-flowの追加。
Reactの最適化プラグインのバグ修正、babel-traverseに隣接Nodeを取得するAPIの追加など

Release v0.39.0 · facebook/flow

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

flowtype ReleaseNote


Flow v0.39.0リリース。
--no-suppressionsのサポート、typeをJSON printできる$Flow$DebugPrint typeの追加など

Release Safari IndexedDB support! · localForage/localForage

github.com/localForage/localForage/releases/tag/1.5.0

JavaScript library ReleaseNote


localForage 1.5.0リリース。
Safari 10.1からはIndexedDBを使うように変更された。

アーティクル


node の security checkをするなら nsp が便利 - from scratch

yosuke-furukawa.hatenablog.com/entry/2017/02/14/113910

node.js security Tools


プロジェクトに依存しているモジュールに脆弱性がないかをチェックするツール
Node Security Platformに公開されている脆弱性を元にチェックする

Native ECMAScript modules: dynamic import()

blog.hospodarets.com/native-ecmascript-modules-dynamic-import

ECMAScript JavaScript browser


dynamic import() Proposalについての解説。
import()はPromiseベースのAPIである点について、import()のfeature detectとpolyfill、Babelやwebpack 2での利用方法など

Speed up Service Worker with Navigation Preloads  |  Web  |  Google Developers

developers.google.com/web/updates/2017/02/navigation-preload

ServiceWorker Chrome


Chrome 57からOrigin-Trialで試験的に使える ServiceWorkerのnavigation preloadについて。
今まではServiceWorkerが起動してからリクエストが開始されていたため、起動時間がボトルネックとなるケースがあった。
ServiceWorkerをパラレルに扱うことができ、preloadされているリクエストを取得できるAPIについて

Context in ReactJS Applications

javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/

React tutorial


React Contextがどのように動いているかの解説。Contextのメリットとデメリットについて。
Contextの値の流れ、テストの難しさ、ライブラリでの利用について

Polyfill のあり方と Web の進化と協調するためのガイドライン | blog.jxck.io

blog.jxck.io/entries/2017-02-17/polyfill-implementation-guideline.html

polyfill JavaScript WebPlatformAPI


polyfillの役割と、早すぎたpolyfillの実装は仕様変更を難しくするSpeculative Polyfillの問題について。
間違ったpolyfillの実装、別名での回避事例、
polyfillを実装するタイミングなどついて書かれてたW3C TAGのドキュメントについて。

i18nの書き方 from JavaScript - Qiita

qiita.com/mrasu/items/92971c09b6190fdfd45e

i18n JavaScript library article


i18nのライブラリがどのような事をしているのかや、言語による違いにはどのようなものがあるかについて。
いくつかのi18nライブラリを例に多言語化のやり方について解説されている記事

V8 JavaScript Engine: High-performance ES2015 and beyond

v8project.blogspot.com/2017/02/high-performance-es2015-and-beyond.html

ECMAScript JavaScript V8 article


V8のES2015+のパフォーマンス改善の取り組みについて。 Babelで変換されたコードサイズの問題やES5で同等の事を行う時の速度の違いについてなど

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


Flexbox Tutorial | HTML & CSS Is Hard

internetingishard.com/html-and-css/flexbox/

CSS


Flexboxについての解説。
Flexboxのそれぞれのプロパティについてどのようなレイアウトを実現できるかについて書かれてる。

TypeScript 日本語ハンドブック | js STUDIO

js.studio-kingdom.com/typescript/

TypeScript 翻訳 document


TypeScriptハンドブックの翻訳

HTML Reference - A free guide to all HTML elements and attributes.

htmlreference.io/

HTML リファレンス


HTML要素のリファレンスサイト。
それぞれのタグごとに動作するサンプルがあり、block/inline/self-closing/metaで大きく分類されている。

Optimising the front end for the browser

hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572

browser performance


ブラウザのレンダリングフローについての記事。
HTMLの取得、ネットワーク、DOM、CSSOM、JavaScriptの処理。
またこれらの処理の最適化やそのメリットについて

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


eggjs/egg: Born to build better enterprise frameworks and apps with Node.js & koa

github.com/eggjs/egg

node.js JavaScript library


AlipayのNode.jsフレームワーク。
convention over configurationを重視したフレームワーク

Rough.js

roughjs.com/

JavaScript canvas SVG library


手描き風の図形を描画出来るCanvasライブラリ。
SVG pathも手描き風に描画することができる。

tunnckoCore/gibon: :1st_place_medal: Functional client-side router in ~570 bytes, built on HTML5 History API.

github.com/tunnckoCore/gibon

JavaScript library


小さなルーターライブラリ。

Jianru-Lin/lambda-view: A New Tool for Reading JavaScript Code

github.com/Jianru-Lin/lambda-view

JavaScript Tools


JavaScriptのコードを構造的に読むことを支援するビューアツール。
スコープ単位でコードを展開して見ていくことができる

書籍関係


Angular Test-Driven Development, 2nd Edition - O'Reilly Media

shop.oreilly.com/product/9781786465474.do

AngularJS book testing


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