JSエコシステムぶらり探訪(目次)

JavaScript

Last updated at 2020-11-15Posted at 2020-09-06

概要

webpackとかbabelとか、JSのすごいエコシステムを基本 (ブラウザ、Node.js, npm) から順番に調べていきます。

経緯

最近は npx create-react-app ... とやるといい感じに環境ができていいのですが、複雑なことをやろうとしたり、既に複雑になってしまったものを触るにはきちんと中身がわかってたほうがいいな……と思い始めたのでぼちぼち自分で調べ始めました。アウトプットしながら調べたほうが効率がいいので、このように記事として残します。

目次 (予定)

とりあえず思いつくだけ書き出したもので、全ての内容を確約するものではありません。また、調査を進めるにつれて目次も変化します。

原初のJavaScript
Node.jsとCommonJS modules
npm, yarn, node_modules
npmとコマンドライン
CommonJSモジュールバンドラー
AMDとモジュールローダー
ES Modules (Webブラウザ編)
ES Modules (モジュールバンドラー編)
ES Modules (Node.js編)
source map
polyfillとmock
- whatwg-fetch / node-fetch
- jsdom
- etc.
babel
CSS・アセットバンドリング
- PostCSS / Sass
- CSS modules
- style-loader / css-loader / sass-loader
モジュール応用編
- 非同期import
- トップレベルawait
- tree shaking
TypeScript
- namespaceとmodule
- tsc transpiler
- babel transpiler
webpack-dev-server
クロスオリジン: CORS, crossorigin attribute, subresource integrity
Web Worker
jest
eslint
react-scripts
- react-app-rewired, rescripts, craco
Railsアセットパイプライン
- sprockets
- webpacker
- 統合テスト (Capybara, etc.)
WebAssembly
tink / yarn v2 (berry)
deno
代替bundler: browserify, rollup, parcel, fusebox, esbuild
タスクランナー: gulp, grunt
さまざまなトランスパイラ
- CoffeeScript
- jsx (React)

附録

記事中で示したソースコードを https://github.com/qnighy/js-ecosystem-walkthrough-materials にまとめています。

年表

1995年9月: Netscape NavigatorにLiveScript (のちのJavaScript)が搭載された。
1997年1月: <SCRIPT> タグが含まれた¹HTML 3.2が発表された。
1997年6月: ECMA-262 (ECMAScript) の初版が発表された。
1997年12月: HTML 4.0で <SCRIPT> タグの挙動が定義された。 defer 属性が定義された。
2001年6月: Douglas CrockfordがJavaScriptの(おそらく)最初のminifierであるJSminを公開した。
2005年3月: Ajaxに対応したRuby on Rails 0.11.0がリリースされた。このとき同梱されたJavaScriptはのちのprototype.jsフレームワークとなった。
2005年8月: John ResigがBehaviour.jsとCssQueryのアイデアを統合した新しいJavaScriptライブラリのアイデアを思い付いた。これがのちのjQueryとなった。
2007年8月頃: prototype.jsの人気がピークを迎えた。
2009年5月: Node.jsが誕生した(0.0.1のリリース)。
2009年12月: 前版(ECMAScript 3)から10年たち、ようやくECMAScriptの次の版 (ECMAScript 5) が公開された。これによりJavaScript標準の時計が再び回りはじめた。
2010年1月: npmが誕生した(0.0.1のリリース)。
2010年8月: Ruby on Rails 3.0がリリースされ、prototype.jsからjQueryへの移行パスが整備された。
2011年2月: browserifyが誕生した(0.0.1のリリース)。
2011年5月: npm 1.0.1がリリースされた。
2011年8月: アセットパイプライン(sprockets)が含まれたRuby on Rails 3.1がリリースされた。
2012年3月: webpackが誕生した。
2012年3月: npmの代替クライアントであるyarn 0.1.0がリリースされた。
2012年8月頃: jQueryの人気がピークを迎えた。
2012年10月: TypeScriptがアナウンスされ、同時にTypeScript 0.8がリリースされた。
2014年9月: Babelの原型となる "6to5" が作られた。
2014年10月: HTML 5.0で <script> タグの async 属性と crossorigin 属性が定義された。
2015年6月: ECMAScriptの第6版にあたるECMAScript 2015が公開された。以降は毎年改訂されるようになる。
2015年6月: npm 3.0.0がリリースされた。 node_modules への展開やpeerDependenciesの挙動が変更された。
2015年9月: Node.js 4.0.0がリリースされた。
2017年4月: Ruby on Rails 5.1がリリースされた。jQuery依存がドロップされ、webpackとの統合が実装された。
2017年5月: npm 5.0.0がリリースされた。lockfileが自動で生成されるようになった。
2018年2月: Webpack 4がリリースされた。
2018年6月: Denoがアナウンスされた。
2018年8月: Babel 7がリリースされた。パッケージ名の変更などのほかTypeScript統合も含まれている。
2019年10月: babel対応が含まれたsprockets 4.0 (Railsアセットパイプライン) がリリースされた。
2020年5月: Deno 1.0がリリースされた。

参考にした資料

HTML3.2では <SCRIPT> タグの挙動については定義されず、ユーザーエージェントはこのタグの中身を無視するように規定されていた。 ↩

120

125

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up