Fork me on GitHub

2015-04-14のJS: 初代jQueryをコードリーディング、npmのエコシステムとプロトタイピング

Edit on GitHub 編集履歴を見る

JSer.info #223 - John Resig - Annotated Version of the Original jQuery ReleaseではjQueryの作者であるJohn ResigによるjQueryの初期バージョンのアノテーション付きソースコードが公開されています。

上記のページで公開されていて、jQueryの名前の由来、prototype.jsからインスパイアした$、メソッドチェーンの仕組み、CSS Selectorsの原点の話、タグ文字列からのDOM要素作成などjQueryの特徴的な機能がどういう意図で実装されていたのかを振り返る内容になっていてとても面白いと思います。

jQueryがJavaScriptに与えた影響は大きいので、2006年前後のブラウザやJavaScriptの歴史を振り返るような内容にもなっています。


Rapid Prototyping in JavaScriptという記事では、Browserifyやnpmのエコシステムを使ってGitHubにウェブサイトを公開するまでの流れを紹介しています。

など目的別に小さなツールを組み合わせて、Live Reloadやプロトタイピングをしていく内容になっています。
また、プロジェクトのディレクトリ構成、リポジトリを作成するghrepoやgh-pagesへのデプロイなどについて書かれているので、出てきたツールを使わない場合でも参考になる所はあると思います。

さっと使えてさっと公開できるのがJavaScriptやnpmのいいところでもあるので、こういうプロトタイピングを効率的に行う方法を模索してみるのも楽しいかもしれません。


ヘッドライン


ESLint 0.19.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2015/04/eslint-0.19.0-released

JavaScript Tools ReleaseNote

ESLint 0.19.0リリース。
ASTのコミュニティ標準であるESTreeの仕様への追従が中心。


babel/CHANGELOG.md at master · babel/babel

github.com/babel/babel/blob/master/CHANGELOG.md#510

JavaScript Tools ReleaseNote

Babel 5.1.0リリース。
trailing-function-commasのサポート、オブジェクトリテラルのメソッドに対するdecoratorsのサポートなど

関連してBabelを使ったコードもESLintでチェックできるプラグインbabel-eslintがBabel 5.xに対応。


The npm Blog — npm private modules are here!

blog.npmjs.org/post/116379479775/npm-private-modules-are-here

npm webservice

npmのprivate modulesがオープン。
npmjsにscoped modulesをpublishすることが出来るようになり、それらのモジュールをprivateで利用できる$7/monthのサービス


アーティクル


Rapid Prototyping in JavaScript

mattdesl.svbtle.com/rapid-prototyping

JavaScript debug 開発環境

Browserify、wzrd、budoを使ったプロトタイピングについて。
ブラウザのリロードなしで変更を反映出来るHot Reloadingが出来るbudoをローカルサーバにして開発する流れ


eval ソースをデバッグする - 開発ツール | MDN

developer.mozilla.org/ja/docs/Tools/Debugger/How_to/Debug_eval_sources

firefox sourcemap debug

FirefoxやChromeの開発者ツールはevalやnew Function経由で実行されるコードに//# sourceURL=my-foo.js のような識別子があると通常のスクリプトと同等に扱えるので、ブレークポイントなどが可能になる。


John Resig - Annotated Version of the Original jQuery Release

ejohn.org/blog/annotated-version-of-the-original-jquery-release/

jQuery 歴史 JavaScript

jQuery作者によるjQueryの初期バージョンのコードにコメントをしたものが公開されてる。
メソッドチェインの仕組み、CSSセレクタとなるもの、文字列からのDOM要素作成など多くのライブラリに影響を与えたものがどういう考えで作られたのかが書かれていて面白い


Measuring Performance

davidwalsh.name/measuring-performance

JavaScript performance browser

Navigation Timing API、Resource Timing APIといったパフォーマンス測定のためのブラウザAPIやWebPageTestなどの計測ツールやネットワーク環境のテストについての紹介


Deploying ECMAScript 6

www.2ality.com/2015/04/deploying-es6.html

ECMAScript JavaScript Tools まとめ

ES6関係のツール、試し方の簡潔なまとめ


Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas Animation - Qiita

qiita.com/TypoScript/items/ae07b7fe5d5d8d526110

JavaScript animation

JavaScriptの時刻を取得するAPIについて詳しい記事。
タイマーの分解能やベースクロックという考え方について


A Detailed Explanation of JavaScript Game Loops and Timing | Isaac Sukin

www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing

JavaScript game library

JavaScriptで正しいメインループを実装するにはどうするかについて。


関数型なAltJS、PureScriptの入門書を邦訳しました。 - Qiita

qiita.com/hiruberuto/items/f1e048fc9a8ca51eddb2

JavaScript book 翻訳

PureScriptの入門書の翻訳


サイト、サービス


Browser

browser.hatenablog.com/

IE blog browser

IEやSpartan等の情報を追ってるブログ


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


alfredkam/yakojs

github.com/alfredkam/yakojs

JavaScript グラフ SVG

DOM-lessなグラフライブラリ。
SVGグラフを吐き出せるようにすることでサーバサイドでも同じ出力結果を出せるようにする目的


MUI - Material Design CSS Framework

www.muicss.com/

HTML CSS JavaScript library

Material Design guidelinesに則ったデザインをするためのフレームワーク


github.com/yahoo/blink-diff

画像 testing library JavaScript node.js

画像を比較してその差を出したり、一致するかをテストできるJavaScriptライブラリ。
どれくらいの差を許すか等も設定できる


cburgmer/csscritic

github.com/cburgmer/csscritic

CSS testing library

CSSのレグレッションテストフレームワーク


mojo-js/obj-stream

github.com/mojo-js/obj-stream

JavaScript library browser

Stream的なAPIを持ったライブラリ。
オブジェクトをStreamに流すことができ、EventEmitterを使ったStream的なものなのでブラウザでも動作する


WebRx - Dynamic JavaScript User-Interfaces with ReactiveX

webrxjs.org/

Rx JavaScript MVC library

RxJSを使ったMVVMフレームワーク。
AngularやKnockoutJSからインスパイアしている部分がある。TypeScriptで書かれている


mattdesl/budo

github.com/mattdesl/budo

JavaScript サーバー 開発環境 Tools

Live Reloadする開発用のローカルサーバ。
https://github.com/caspervonb/amok のように、ブラウザの更新なしで変更を反映するHot Reloadingを行う拡張も持っている。


RQ

www.rq.crockford.com/

JavaScript Promises library

Douglas Crockford製のPromiseハンドリングライブラリ。
sequence、parallel、race、fallbackなどの複数のPromiseの流れを扱うライブラリ


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