JSer.info #279 - ChromiumとNode.jsをベースとしたデスクトップアプリ開発環境であるElectron 1.0がリリースされました。
本体は非推奨なメソッドの削除が中心となっています。
合わせて開発者ツールの強化やデモ、テストツールが公開されています。
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiitaという記事ではChrome開発者ツールでのブレークポイントの使い方について解説されています。
コードに対するブレークポイントからDOM、XHRなど色々なブレーク方法をスクリーンショット共に解説されているので分かりやすいです。
公式サイトも合わせて見るといいかもしれません
Bublé – the blazing fast, batteries-included ES2015 compilerは、ES2015のコードをES5へ変換することを目的としたTranspilerツールです。
Babelとは異なる点としては以下のような点があります。
- ASTを変換してASTを生成するわけではなく、ASTからmagic-stringを使い直接コードを生成しています
- ASTから直接コードを吐き出すので高速な変換ができます
- 一方、中間フォーマットがないためプラグインのような拡張は難しいです
- Babel 6.xのようにプラグイン式ではなく、ビルトインで変換するパターンが入っています
- ECMAScriptの仕様準拠が目的ではない点
- BabelはECMAScriptへのできるだけ準拠した挙動になるように変換します
looseオプションを指定することで、ラフな変換をするようにできますがBubléはこちらがデフォルトとなります
- 変換できる機能が意図的に限定されています
import/exportやComputed propertiesなどの変換はできません- 恐らく同作者のrollupと合わせ使うようなデザインになっています
Babelとは構造や目的も異なるので、興味がある人はためしてみるといいかもしれません。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Electron 1.0
electron.atom.io/blog/2016/05/11/electron-1-0
Electron 1.0リリース。
ESLint v2.10.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2016/05/eslint-v2.10.0-released
ESLint v2.10.0リリース。
Release Notes for Safari Technology Preview 4 | WebKit
webkit.org/blog/6210/release-notes-for-safari-technology-preview-4/
Safari Technology Preview 4リリース。
String.prototype.localeCompareの実装、object literalでもsuper()が呼べるように、var log = console.logが可能になるなど
アーティクル
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
qiita.com/nekoneko-wanwan/items/02aed17773833c3ad3b2
Chrome開発者ツールのブレークポイントの使い方や各種ブレークポイントについて。
画像と共に項目が解説されているので分かりやすい。
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
myakura.hatenablog.com/entry/2016/05/12/083000
CSSアニメーションのパフォーマンス問題を見つけ方と解決方法について
An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements – Smashing Magazine
www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/
CSSの擬似要素と擬似クラスの網羅的な解説
Get to Know the Page Visibility API | Scotch
scotch.io/tutorials/get-to-know-the-page-visibility-api
Page Visibility APIの使い所や使い方について
ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita
qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
npmのdependenciesの種類についての解説。
- dependencies
- devDependencies
- peerDependencies
- optionalDependencies
- bundledDependencies
runtastic/flow-guide: Our definitive guide for using Flow static JavaScript type checker (https://flowtype.org)
github.com/runtastic/flow-guide
Flowの導入チュートリアル
redux-observable — Medium
medium.com/@benlesh/redux-observable-ec0b00d2eb52
Netflixで使ってるredux-observableについて。
なぜredux-なのか? - ReduxはReact周りでよく知られているパターンであり、既に様々なRedux関連ツールが存在するからであるという話
Streamlining the Sign-in Flow Using Credential Management API | Web Updates - Google Developers
developers.google.com/web/updates/2016/04/credential-management-api
Credential Management APIについて。
自動サインインを実装しながら使い方について学ぶチュートリアル
About document.ready
www.webreflection.co.uk/blog/2016/05/10/document.ready
Promiseを返すdocument.readyをどう実装するかという話。
document.readyStateとDOMContentLoadedについて
スライド、動画関係
ng-conf 2016 - YouTube
www.youtube.com/playlist?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j
ng-conf 2016の動画一覧
How to make your Webpack builds 10x faster
www.slideshare.net/trueter/how-to-make-your-webpack-builds-10x-faster
webpackのビルド速度改善についてのスライド
サイト、サービス、ドキュメント
tc39/proposals: Tracking ECMAScript Proposals
ECMAScriptのProposalまとめリポジトリ。
Active/InActive/Finished/Stage 0のProposalが一覧できる。
ソフトウェア、ツール、ライブラリ関係
Bublé – the blazing fast, batteries-included ES2015 compiler
BabelのようにES2015のコードをES5に変換するツール。
設定なしで動作し、サポートしたいブラウザバージョンを指定することで変換内容を選択できる。
garbles/why-did-you-update: Puts your console on blast when React is making unnecessary updates.
github.com/garbles/why-did-you-update
Reactでpropsの中身が一致する場合にも、renderが呼ばれている事を検知してコンソールに表示するライブラリ
leo/args: Minimal toolkit for building CLIs
minimistを使った引数処理、ヘルプ表示、サブコマンドなどに対応したライブラリ
florian/x18n: A sane JavaScript internationalisation library
r18n gem互換記法が使えるi18nライブラリ
documentationjs/globals-docs: Documentation URIs for JavaScript globals.
github.com/documentationjs/globals-docs
JavaScriptの型やオブジェクトを渡すと、対応するMDNのドキュメントURLを返してくれるライブラリ
