-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update 319 draft * Update * add \n * Update 2017-02-20-babel-6.23.0-react-context-html.md * Update 2017-02-20-babel-6.23.0-react-context-html.md
- Loading branch information
Showing
1 changed file
with
244 additions
and
0 deletions.
There are no files selected for viewing
244 changes: 244 additions & 0 deletions
244
_i18n/ja/_posts/2017/2017-02-20-babel-6.23.0-react-context-html.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,244 @@ | ||
| --- | ||
| title: "2017-02-20のJS: Babel 6.23.0、React Context、HTMLリファレンス" | ||
| author: "azu" | ||
| layout: post | ||
| date : 2017-02-20T00:31:04.561Z | ||
| category: JSer | ||
| tags: | ||
| - Babel | ||
| - React | ||
| - HTML | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #319 - Babel 6.23.0がリリースされました。 | ||
|
|
||
| - [6.23.0 Released · Babel](https://babeljs.io/blog/2017/02/13/6.23.0) | ||
| - [Release v6.23.0 · babel/babel](https://github.com/babel/babel/releases/tag/v6.23.0) | ||
|
|
||
| `transform-es2015-block-scoping`に`throwIfClosureRequired`オプションが追加されました。 | ||
| Babelの変換では`const`や`let`などのスコープを実現するために、即時実行関数でスコープを作るという手法を取っています。 | ||
| このオプションでは、そのようなスコープを作るケースをエラーにすることでパフォーマンス改善を行うためのオプションです。 | ||
|
|
||
| <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">In Babel 6.23 (just released), I made let/const's generated code more efficient! Upgrade to enjoy a very small perf boost in your apps. :) <a href="https://t.co/DDD8Qj9rVF">pic.twitter.com/DDD8Qj9rVF</a></p>— Ben Alpert (@soprano) <a href="https://twitter.com/soprano/status/831588549870784514">February 14, 2017</a></blockquote> | ||
| <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> | ||
|
|
||
| - [Add option to block-scoping to throw on slow code by spicyj · Pull Request #5236 · babel/babel](https://github.com/babel/babel/pull/5236 "Add option to block-scoping to throw on slow code by spicyj · Pull Request #5236 · babel/babel") | ||
|
|
||
| [babel-preset-flow](https://www.npmjs.com/package/babel-preset-flow "babel-preset-flow")の追加やReactの最適化プラグインのバグ修正、`babel-traverse`に隣接Nodeを取得するAPIの追加などが行われています。 | ||
|
|
||
| Reactの最適化プラグイン周りのIssueについては、次のIssueも参考にすると良さそうです。 | ||
|
|
||
| - [Re-enable babel-plugin-transform-react-constant-elements when it’s not buggy · Issue #553 · facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app/issues/553#issuecomment-249359463 "Re-enable babel-plugin-transform-react-constant-elements when it’s not buggy · Issue #553 · facebookincubator/create-react-app") | ||
|
|
||
| ---- | ||
|
|
||
| [Context in ReactJS Applications](http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/ "Context in ReactJS Applications")という記事では、Reactの[Context](https://facebook.github.io/react/docs/context.html "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](https://facebook.github.io/react/docs/context.html "Context - React") | ||
| 公式のドキュメントにも注意が書かれていますが、React Contextは将来的にはAPIの変更が予定されています(具体案は提示されていない)。そのため、メリットとデメリットを把握しておくと良さそうです。 | ||
|
|
||
| <blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/sebmck">@sebmck</a> We will provide a new API but know that lots of people rely on the existing one. Meaning we'll provide an upgrade path for that.</p>— Sebastian Markbåge (@sebmarkbage) <a href="https://twitter.com/sebmarkbage/status/821159582110138368">January 17, 2017</a></blockquote> | ||
| <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> | ||
|
|
||
| ---- | ||
|
|
||
| [HTML Reference](http://htmlreference.io/ "HTML Reference - A free guide to all HTML elements and attributes.")というサイトではHTMLタグのリファレンスが公開されています。 | ||
|
|
||
| それぞれのタグごとに動作するサンプルコードがあり、block/inline/self-closing/metaで大きく分類されています。 | ||
|
|
||
|
|
||
| [](http://htmlreference.io/) | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## 6.23.0 Released · Babel | ||
| [babeljs.io/blog/2017/02/13/6.23.0](https://babeljs.io/blog/2017/02/13/6.23.0 "6.23.0 Released · Babel") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">babel</span> <span class="jser-tag">ReleaseNote</span></p> | ||
| Babel 6.23.0リリース。 | ||
| `transform-es2015-block-scoping`に`throwIfClosureRequired`オプションの追加、`babel-preset-flow`の追加。 | ||
| Reactの最適化プラグインのバグ修正、`babel-traverse`に隣接Nodeを取得するAPIの追加など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v0.39.0 · facebook/flow | ||
| [github.com/facebook/flow/releases/tag/v0.39.0](https://github.com/facebook/flow/releases/tag/v0.39.0 "Release v0.39.0 · facebook/flow") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">flowtype</span> <span class="jser-tag">ReleaseNote</span></p> | ||
| 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](https://github.com/localForage/localForage/releases/tag/1.5.0 "Release Safari IndexedDB support! · localForage/localForage") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
| localForage 1.5.0リリース。 | ||
| Safari 10.1からはIndexedDBを使うように変更された。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## node の security checkをするなら nsp が便利 - from scratch | ||
| [yosuke-furukawa.hatenablog.com/entry/2017/02/14/113910](http://yosuke-furukawa.hatenablog.com/entry/2017/02/14/113910 "node の security checkをするなら nsp が便利 - from scratch") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">security</span> <span class="jser-tag">Tools</span></p> | ||
| プロジェクトに依存しているモジュールに脆弱性がないかをチェックするツール | ||
| Node Security Platformに公開されている脆弱性を元にチェックする | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Native ECMAScript modules: dynamic import() | ||
| [blog.hospodarets.com/native-ecmascript-modules-dynamic-import](https://blog.hospodarets.com/native-ecmascript-modules-dynamic-import "Native ECMAScript modules: dynamic import()") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span></p> | ||
| 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](https://developers.google.com/web/updates/2017/02/navigation-preload "Speed up Service Worker with Navigation Preloads | Web | Google Developers") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">ServiceWorker</span> <span class="jser-tag">Chrome</span></p> | ||
| Chrome 57からOrigin-Trialで試験的に使える ServiceWorkerのnavigation preloadについて。 | ||
| 今まではServiceWorkerが起動してからリクエストが開始されていたため、起動時間がボトルネックとなるケースがあった。 | ||
| ServiceWorkerをパラレルに扱うことができ、preloadされているリクエストを取得できるAPIについて | ||
|
|
||
| - [OriginTrials/developer-guide.md at gh-pages · jpchase/OriginTrials](https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md "OriginTrials/developer-guide.md at gh-pages · jpchase/OriginTrials") | ||
|
|
||
| ---- | ||
|
|
||
| ## Context in ReactJS Applications | ||
| [javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/](http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/ "Context in ReactJS Applications") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">tutorial</span></p> | ||
| React Contextがどのように動いているかの解説。Contextのメリットとデメリットについて。 | ||
| Contextの値の流れ、テストの難しさ、ライブラリでの利用について | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Polyfill のあり方と Web の進化と協調するためのガイドライン | blog.jxck.io | ||
| [blog.jxck.io/entries/2017-02-17/polyfill-implementation-guideline.html](https://blog.jxck.io/entries/2017-02-17/polyfill-implementation-guideline.html "Polyfill のあり方と Web の進化と協調するためのガイドライン | blog.jxck.io") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">polyfill</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">WebPlatformAPI</span></p> | ||
| polyfillの役割と、早すぎたpolyfillの実装は仕様変更を難しくするSpeculative Polyfillの問題について。 | ||
| 間違ったpolyfillの実装、別名での回避事例、 | ||
| polyfillを実装するタイミングなどついて書かれてたW3C TAGのドキュメントについて。 | ||
|
|
||
| - [Polyfills and the evolution of the Web](https://w3ctag.github.io/polyfills/ "Polyfills and the evolution of the Web") | ||
|
|
||
| ---- | ||
|
|
||
| ## i18nの書き方 from JavaScript - Qiita | ||
| [qiita.com/mrasu/items/92971c09b6190fdfd45e](http://qiita.com/mrasu/items/92971c09b6190fdfd45e "i18nの書き方 from JavaScript - Qiita") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">i18n</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">article</span></p> | ||
| i18nのライブラリがどのような事をしているのかや、言語による違いにはどのようなものがあるかについて。 | ||
| いくつかのi18nライブラリを例に多言語化のやり方について解説されている記事 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## V8 JavaScript Engine: High-performance ES2015 and beyond | ||
| [v8project.blogspot.com/2017/02/high-performance-es2015-and-beyond.html](https://v8project.blogspot.com/2017/02/high-performance-es2015-and-beyond.html "V8 JavaScript Engine: High-performance ES2015 and beyond") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">V8</span> <span class="jser-tag">article</span></p> | ||
| V8のES2015+のパフォーマンス改善の取り組みについて。 Babelで変換されたコードサイズの問題やES5で同等の事を行う時の速度の違いについてなど | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">サイト、サービス、ドキュメント</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Flexbox Tutorial | HTML & CSS Is Hard | ||
| [internetingishard.com/html-and-css/flexbox/](https://internetingishard.com/html-and-css/flexbox/ "Flexbox Tutorial | HTML & CSS Is Hard") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span></p> | ||
| Flexboxについての解説。 | ||
| Flexboxのそれぞれのプロパティについてどのようなレイアウトを実現できるかについて書かれてる。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## TypeScript 日本語ハンドブック | js STUDIO | ||
| [js.studio-kingdom.com/typescript/](http://js.studio-kingdom.com/typescript/ "TypeScript 日本語ハンドブック | js STUDIO") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">翻訳</span> <span class="jser-tag">document</span></p> | ||
| TypeScriptハンドブックの翻訳 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## HTML Reference - A free guide to all HTML elements and attributes. | ||
| [htmlreference.io/](http://htmlreference.io/ "HTML Reference - A free guide to all HTML elements and attributes.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">リファレンス</span></p> | ||
| HTML要素のリファレンスサイト。 | ||
| それぞれのタグごとに動作するサンプルがあり、block/inline/self-closing/metaで大きく分類されている。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Optimising the front end for the browser | ||
| [hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572](https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572 "Optimising the front end for the browser") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">performance</span></p> | ||
| ブラウザのレンダリングフローについての記事。 | ||
| HTMLの取得、ネットワーク、DOM、CSSOM、JavaScriptの処理。 | ||
| またこれらの処理の最適化やそのメリットについて | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## eggjs/egg: Born to build better enterprise frameworks and apps with Node.js & koa | ||
| [github.com/eggjs/egg](https://github.com/eggjs/egg "eggjs/egg: Born to build better enterprise frameworks and apps with Node.js & koa") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> | ||
| AlipayのNode.jsフレームワーク。 | ||
| convention over configurationを重視したフレームワーク | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Rough.js | ||
| [roughjs.com/](https://roughjs.com/ "Rough.js") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">canvas</span> <span class="jser-tag">SVG</span> <span class="jser-tag">library</span></p> | ||
| 手描き風の図形を描画出来るCanvasライブラリ。 | ||
| SVG pathも手描き風に描画することができる。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## tunnckoCore/gibon: :1st\_place\_medal: Functional client-side router in ~570 bytes, built on HTML5 History API. | ||
| [github.com/tunnckoCore/gibon](https://github.com/tunnckoCore/gibon "tunnckoCore/gibon: :1st\_place\_medal: Functional client-side router in ~570 bytes, built on HTML5 History API.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> | ||
| 小さなルーターライブラリ。 | ||
|
|
||
| ---- | ||
|
|
||
| ## Jianru-Lin/lambda-view: A New Tool for Reading JavaScript Code | ||
| [github.com/Jianru-Lin/lambda-view](https://github.com/Jianru-Lin/lambda-view "Jianru-Lin/lambda-view: A New Tool for Reading JavaScript Code") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span></p> | ||
| JavaScriptのコードを構造的に読むことを支援するビューアツール。 | ||
| スコープ単位でコードを展開して見ていくことができる | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">書籍関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Angular Test-Driven Development, 2nd Edition - O'Reilly Media | ||
| [shop.oreilly.com/product/9781786465474.do](http://shop.oreilly.com/product/9781786465474.do "Angular Test-Driven Development, 2nd Edition - O'Reilly Media") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">AngularJS</span> <span class="jser-tag">book</span> <span class="jser-tag">testing</span></p> | ||
| AngularでのTDD本 | ||
|
|
||
|
|
||
| ---- |