Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

2017-05-22のJS: Safari TP 30、Polymer 2.0とBower、Create React App 1.0.0

2017年05月22日 Edit on GitHub 編集履歴を見る

JSer.info #332 - Safari Technology Preview Release 30がリリースされました。

Subresource Integrity(SRI)のサポート、X-Content-Type-Options:nosniffがサポートされました。

また、Promiseのrejectionhandledとunhandledrejectionのイベントサポートされています。

Polymer 2.0.0とpolymer-cli 1.0.0がリリースされました。
ES2015のクラスベースで書けるようになり、Dirty checkingをopt-outする手段が用意され、1.xとの互換レイヤーなども提供されています。

1.xからのマイグレーションについては次のドキュメントにまとめられています。

また、Polymerをインストールする方法としてBowerを使う方法が公式となっています。
(polymer-cliもBowerをベースにしている)

しかし、数日前にBowerは正式に非推奨となりました。

そのため、Polymerもnpm/yarnサポートへと移行中です。

philipahlberg 5:52 PM
Hi everyone, with Bower being depreciated and pointing to Yarn now, should an issue be filed for the Polymer CLI to make the switch at some point in the future?

fresnizky 7:47 PM
@philipahlberg I think they're​ already working on it.
 https://github.com/Polymer/polymer/issues/3903#issuecomment-279180914

次のIssueでnpmサポートについて議論されていて、現在@polymer/polymerがα版として公開されています。

ReactのScaffoldingツールであるCreate React App 1.0がリリースされました。

webpack 2、ランタイムエラーの表示、Service Workerの対応、Jest 20、Dynamic importを使ったコード分割などさまざまな変更が含まれています。

0.9.5からのマイグレーション方法については次のリリースノートに書かれています。

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

JSer.info Sponsors

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

ヘッドライン

Release Notes for Safari Technology Preview 30 | WebKit

webkit.org/blog/7614/release-notes-for-safari-technology-preview-30/

safari ReleaseNote

Safari Technology Preview Release 30リリース。
Subresource Integrity(SRI)、X-Content-Type-Options:nosniffに対応、PromiseのUnhandled rejectionのイベントをサポート。
document.cookieのアクセスを厳密化、WAI-ARIA周りの修正など

Time for 2.0 - Polymer Project

www.polymer-project.org/blog/2017-05-15-time-for-two

WebComponents JavaScript library ReleaseNote

Polymer 2.0リリース。
クラスベースで書けるように、Polymer CLIも併せてメジャーアップデートされた

Release 7.0 “Coelestem adspicit lucem” · postcss/autoprefixer

github.com/postcss/autoprefixer/releases/tag/7.0.0

CSS ReleaseNote

Autoprefixer 7.0リリース。
PostCSS 6.0、Browserslist 2.0、caniuse-liteを利用するように。
Node.js 0.12のサポート終了、Grid Layoutのサポートをデフォルトではオフに、コードベースがCoffeeScriptからBabelへ移行など

ESLint v4.0.0-beta.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/05/eslint-v4.0.0-beta.0-released

ESLint ReleaseNote

ESLint 4.0.0βリリース。

Add yarn and webpack recommendation from bower.io to readme Fixes #2298 by graingert · Pull Request #2458 · bower/bower

github.com/bower/bower/pull/2458

JavaScript Tools news

Bowerがnpm deprecateとなり正式に非推奨となった。
メンテナンスは続けられるが、Bowerの将来に興味がある人はメールで連絡をくださいとのこと。

Release v1.0.0 · facebookincubator/create-react-app

github.com/facebookincubator/create-react-app/releases/tag/v1.0.0

React Tools ReleaseNote

create-react-app v1.0.0リリース。
webpack 2、ランタイムエラーの表示、Service Workerの対応、Jest 20、Dynamic importを使ったコード分割など

アーティクル

ZEIT – Next 3.0 Preview

zeit.co/blog/next3-preview

JavaScript React サーバー ReleaseNote

Next 3.0 プレビューリリース。
next exportで静的なHTMLとして出力できるように、コンポーネントのdynamic importをサポートなど

Developer Edition 54: New inspector and debugger features, MDN help in the netmonitor, and more ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features/

firefox debug article

Firefox 54の開発者ツールの変更点紹介。
CSS Inspectの改善、Debuggerパネルで整形版が別タブで開けたり、ツールチップで変数の表示、Network PanelでMore Infoからヘルプへの移動、JSON Viewなど

JavaScript のもう一つの「関数名」 —— name プロパティ - Qiita

qiita.com/8x9/items/34272b59b5aa68e33256

JavaScript article

JavaScriptのFunctionのnameプロパティについて。
ES2015から無名関数やArrow Functionなど関数自体が名前を持ってなくても、変数宣言側の名前がnameプロパティで参照できることや、writable属性の仕様についてなど

The Many Faces of Functions in JavaScript - Bocoup

bocoup.com/blog/the-many-faces-of-functions-in-javascript

JavaScript ECMAScript article

JavaScriptの色々な"関数"についての解説

スライド、動画関係

A Modern Front-End Workflow – Umar Hansa | Render 2017 - YouTube

www.youtube.com/watch?v=v5r_n6Tq0uk

Chrome debug video

Chrome開発者ツールのTipsやデバッグワークフローについての発表動画

The Future of Audio and Video on the Web (Google I/O '17) - YouTube

www.youtube.com/watch?v=z9unKFzAj1w

google video JavaScript ProgressiveWebApp

ウェブサイトにおける動画や音楽のPWA対応についての発表動画。
ServiceWorkerを使ったオフライン対応、回転とフルスクリーン、 Media Capabilitiesを使った再生判定、MediaSession APIでのカバー表示など

Web Performance: Leveraging the Metrics that Most Affect User Experience (Google I/O '17) - YouTube

www.youtube.com/watch?v=6Ljq-Jn-EgU&index=71&list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

browser performance video

パフォーマンスとメトリクスについての発表動画。
ロード完了ではなくインタラクティブになった時間(TTI)を計測、Hero Elements。UXとメトリクス
Long Tasks(50ms)をPerformanceObserverで検出、操作の遅延の計測、改善のパターンについて

CSS Houdini- the bridge between CSS, JavaScript and the browser by Serg Hospodarets

slides.com/malyw/houdini-codemotion#/

CSS slide

CSS Houdiniについてのスライド。
CSS/JavaScript/ブラウザの連携、Workletについて

Google I/O 2017 - All Sessions - YouTube

www.youtube.com/playlist?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

google video イベント

Google I/O 2017の動画まとめ

JSConf EU 2017 - YouTube

www.youtube.com/playlist?list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_

JavaScript イベント video

JSConf EU 2017の動画一覧

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

Don't Overcomplicate Javascript – Bits from Nikola Ristic ∞ ƒront-end ∆eveloper

bits.ristic.io/dont-overcomplicate-javascript-0

redux opinion

JavaScriptにおけるカーゴカルトについての連載。よく理解しないでコードの習慣を持ち込むことは技術的負債や複雑性を持ち込む可能性があることについて。
ReduxにおけるActionの定数のパターンについて。import * as Constants from "./constants"の問題点についてなど

HN PWA - Hacker News readers as Progressive Web Apps

hnpwa.com/

JavaScript ProgressiveWebApp example

Hacker Newsを色々なViewフレームワークで実装したまとめ。

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

diegomura/react-pdf: Create PDF files using React

github.com/diegomura/react-pdf

React PDF library

Reactコンポーネントとしてレイアウトなどを書きPDFを生成するライブラリ

書籍関係

Complete Redux Book by Ilya Gelman et al. [PDF/iPad/Kindle]

leanpub.com/redux-book

redux book

Reduxについての電子書籍

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