Fork me on GitHub

2015-11-09のJS: 巨大なJavaScriptのリファクタリング、Firefox 44の開発者ツール

Edit on GitHub 編集履歴を見る

JSer.info #252 - フロントエンドに秩序を取り戻す方法 // Speaker Deckというスライドでは、はてなブログの編集画面をどのようにリファクタリングしていっているかという話が書かれています。

名前空間風のオブジェクトで管理されていたものを、CommonJSのモジュール管理に変えていくリファクタリングの流れ、Viewのライブラリ導入の議論、Lintやテストの方針などについて書かれています。

JavaScriptにモジュール的な概念が根付いたのはここ数年なので、このように一つの巨大な名前空間オブジェクトで管理されているものを移行していくケーススタディとして見てみると面白いかもしれません。


Developer Edition 44: New visual editing and memory management tools ★ Mozilla Hacks – the Web developer blog(翻訳)という記事ではFirefox 44での開発者ツールの機能について紹介されています。

アニメーションツール、 CSSフィルタツール、カラーインスペクタツールなどのビジュアル的なツールの追加がされており、これらの機能についてはDevTools Challengerというサイトで実際に使い方を試しながら学ぶ事ができます。

また、メモリのスナップショットやWebSocketのframeを確認するデバッグ機能などが追加されています。


ヘッドライン


Release v3.4.0 · npm/npm

github.com/npm/npm/releases/tag/v3.4.0

npm ReleaseNote

npm 3.4.0でnpm install && npm testを行うnpm install-testというコマンドが追加された。
--dry-runなどと組み合わせて、依存モジュールのアップデートテストに活用出来る


PEP 0.4.0 | Official jQuery Blog

blog.jquery.com/2015/11/05/pep-0-4-0/

jQuery library ReleaseNote

Pointer Events Polyfill 0.4.0リリース


Release ES2016 Draft 2015-11-03 · tc39/ecma262

github.com/tc39/ecma262/releases/tag/es2016-draft-20151103

ECMAScript ReleaseNote

ES2016 Draft 2015-11-03リリース。
abstract operationであるReturnIfAbruptのシンタックスシュガーである?の導入。
仕様書のバグ修正や実在する実装に合わせて__proto__がstrict modeでも許可されるようになるなど


ESLint v1.9.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2015/11/eslint-v1.9.0-released/

JavaScript ECMAScript library ReleaseNote

ESLint v1.9.0リリース。
npm 3の対応改善など


アーティクル


7 Things You Should Know About WebAssembly

auth0.com/blog/2015/10/14/7-things-you-should-know-about-web-assembly/

WebAssembly

WebAssemblyについてよくある疑問に対する分かりやすい解説


Javascript quiz. ES6 edition. — Perfection Kills

perfectionkills.com/javascript-quiz-es6/

ECMAScript JavaScript

ES6についてのJavaScriptクイズ


スライド、動画関係


フロントエンドに秩序を取り戻す方法 // Speaker Deck

speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa

JavaScript スライド

昔ながらの名前空間風で管理されconcatして扱うJavaScriptをどうやってモジュール管理出来るようにリファクタリングしていくかという話。
また、Reactなどのライブラリ導入における議論やリファクタリングとE2E/ユニットテストについて


Developer Edition 44: New visual editing and memory management tools ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/11/developer-edition-44-creative-tools-and-more/

firefox debug

Firefox 44での開発者ツールについて。
アニメーションパネル、 pixel rulers、メモリ消費量のスナップショット、WebSocketのデバッグ機能の追加など


What's new in Chrome DevTools? // Speaker Deck

speakerdeck.com/addyosmani/whats-new-in-chrome-devtools

Chrome debug

Chrome開発者ツールの新しい機能についてのスライド


Javascript Unit Testing - Early Release - O'Reilly Media

shop.oreilly.com/product/0636920042594.do

JavaScript 動画

ユニットテストについてのスクリーンキャスト


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


npmcdn

npmcdn.com/

npm library webservice

npmにあるものをブラウザで読み込めるように配信するCDN的なサービス


DevTools Challenger

devtoolschallenger.com/

firefox debug

Firefoxの開発者ツールの使い方についてを学べるサイト。
アニメーション制御やカラーピッカーなどのFirefox 44で新しく追加された機能について扱ってる。


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


lepture/vui · GitHub

github.com/lepture/vui

JavaScript UI library

Vue.jsベースのUIフレームワーク


neal-react - Declarative landing pages for react.js

www.nealjs.com/

React UI library

Reactを使ったランディングページでよく使われるUIをまとめたComponent集


Scooter - Welcome to Scooter

dropbox.github.io/scooter/

dropbox Sass library

DropboxのSassフレームワーク


書籍関係


Amazon: 確かな力が身につくJavaScript「超」入門 (Informatics & IDEA): 狩野 祐東

www.amazon.co.jp/dp/4797383585

JavaScript 初心者 book

プログラミング初心者向けのJavaScriptについての書籍


Selenium - O'Reilly Media

shop.oreilly.com/product/0636920042853.do

Selenium book

2016年1月発売
Seleniumについての書籍


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