Fork me on GitHub

2016-05-16のJS: Electron 1.0、ブレークポイントの使い方、Bublé

Edit on GitHub 編集履歴を見る

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とは構造や目的も異なるので、興味がある人はためしてみるといいかもしれません。


ヘッドライン


Electron 1.0

electron.atom.io/blog/2016/05/11/electron-1-0

Electron ReleaseNote

Electron 1.0リリース。


ESLint v2.10.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2016/05/eslint-v2.10.0-released

ESLint ReleaseNote

ESLint v2.10.0リリース。


Release Notes for Safari Technology Preview 4 | WebKit

webkit.org/blog/6210/release-notes-for-safari-technology-preview-4/

safari ReleaseNote

Safari Technology Preview 4リリース。
String.prototype.localeCompareの実装、object literalでもsuper()が呼べるように、var log = console.logが可能になるなど


アーティクル


ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita

qiita.com/nekoneko-wanwan/items/02aed17773833c3ad3b2

JavaScript debug

Chrome開発者ツールのブレークポイントの使い方や各種ブレークポイントについて。
画像と共に項目が解説されているので分かりやすい。


するするさせたい:サイボウズ採用情報のアニメーション(その1) - fragmentary

myakura.hatenablog.com/entry/2016/05/12/083000

CSS Chrome performance

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

CSSの擬似要素と擬似クラスの網羅的な解説


Get to Know the Page Visibility API | Scotch

scotch.io/tutorials/get-to-know-the-page-visibility-api

JavaScript WebPlatformAPI

Page Visibility APIの使い所や使い方について


ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita

qiita.com/cognitom/items/acc3ffcbca4c56cf2b95

npm

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

flowtype tutorial

Flowの導入チュートリアル


redux-observable — Medium

medium.com/@benlesh/redux-observable-ec0b00d2eb52

JavaScript redux Rx

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

JavaScript WebPlatformAPI Chrome

Credential Management APIについて。
自動サインインを実装しながら使い方について学ぶチュートリアル


About document.ready

www.webreflection.co.uk/blog/2016/05/10/document.ready

DOM JavaScript Promises

Promiseを返すdocument.readyをどう実装するかという話。
document.readyStateDOMContentLoadedについて


スライド、動画関係


ng-conf 2016 - YouTube

www.youtube.com/playlist?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j

AngularJS 動画

ng-conf 2016の動画一覧


How to make your Webpack builds 10x faster

www.slideshare.net/trueter/how-to-make-your-webpack-builds-10x-faster

webpack スライド performance

webpackのビルド速度改善についてのスライド


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


tc39/proposals: Tracking ECMAScript Proposals

github.com/tc39/proposals

ECMAScript proposal

ECMAScriptのProposalまとめリポジトリ。
Active/InActive/Finished/Stage 0のProposalが一覧できる。


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


Bublé – the blazing fast, batteries-included ES2015 compiler

buble.surge.sh/guide/

JavaScript Tools babel

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 performance library

Reactでpropsの中身が一致する場合にも、renderが呼ばれている事を検知してコンソールに表示するライブラリ


leo/args: Minimal toolkit for building CLIs

github.com/leo/args

node.js JavaScript library

minimistを使った引数処理、ヘルプ表示、サブコマンドなどに対応したライブラリ


florian/x18n: A sane JavaScript internationalisation library

github.com/florian/x18n

i18n JavaScript library

r18n gem互換記法が使えるi18nライブラリ


documentationjs/globals-docs: Documentation URIs for JavaScript globals.

github.com/documentationjs/globals-docs

JavaScript library Mozilla

JavaScriptの型やオブジェクトを渡すと、対応するMDNのドキュメントURLを返してくれるライブラリ


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