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

## 概要

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

## 経緯

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

## 目次 (予定)

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

- [原初のJavaScript](https://qiita.com/qnighy/items/fc19f328cf36fc28658c)
- [Node.jsとCommonJS modules](https://qiita.com/qnighy/items/067dd47c48b96e772a4e)
- [npm, yarn, node_modules](https://qiita.com/qnighy/items/677bf64063c666b21034)
- [npmとコマンドライン](https://qiita.com/qnighy/items/faddc72389f6c94421e1)
- [CommonJSモジュールバンドラー](https://qiita.com/qnighy/items/3d2496e9cf48f16cee05)
- [AMDとモジュールローダー](https://qiita.com/qnighy/items/0c3fd208e0356fa19cda)
- 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-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の人気](https://trends.google.com/trends/explore?date=all&q=%2Fm%2F0fvx82)がピークを迎えた。
- 2009年5月: Node.jsが誕生した([0.0.1](https://github.com/nodejs/node/releases/tag/v0.0.1)のリリース)。
- 2009年12月: 前版(ECMAScript 3)から10年たち、ようやくECMAScriptの次の版 (ECMAScript 5) が公開された。これによりJavaScript標準の時計が再び回りはじめた。
- 2010年1月: npmが誕生した([0.0.1](https://github.com/npm/npm/releases/tag/v0.0.1)のリリース)。
- 2010年8月: Ruby on Rails 3.0がリリースされ、prototype.jsからjQueryへの移行パスが整備された。
- 2011年2月: browserifyが誕生した([0.0.1](https://www.npmjs.com/package/browserify/v/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の人気](https://trends.google.com/trends/explore?date=all&q=%2Fm%2F0268gyp)がピークを迎えた。
- 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がリリースされた。

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

## 参考にした資料

- 全般
  - [Difference between Webpack/Babel and react-scripts - Stack Overflow](https://stackoverflow.com/questions/46337918/difference-between-webpack-babel-and-react-scripts)
  - [webpackとBabelの基本を理解する(1) ―webpack編― - Qiita](https://qiita.com/koedamon/items/3e64612d22f3473f36a4)
  - [Node.js - Wikipedia](https://en.wikipedia.org/wiki/Node.js)
- モジュールシステム
  - [What are CJS, AMD, UMD, and ESM in Javascript? - DEV](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm)
  - [Brief history of JavaScript Modules | by SungTheCoder | sungthecoder | Medium](https://medium.com/sungthecoder/javascript-module-module-loader-module-bundler-es6-module-confused-yet-6343510e7bde)
  - [Modules: CommonJS modules | Node.js Documentation](https://nodejs.org/docs/latest/api/modules.html)
  - [Modules: ECMAScript modules | Node.js Documentation](https://nodejs.org/docs/latest/api/esm.html)
  - [Modules/1.1 - CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Modules/1.1)
  - [JavaScript モジュール - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)
  - [top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita](https://qiita.com/uhyo/items/0e2e9eaa30ec2ff05260)
  - [CommonJS - Wikipedia](https://en.wikipedia.org/wiki/CommonJS)
  - [What Server Side JavaScript needs &middot; ](https://www.blueskyonmars.com/2009/01/29/what-server-side-javascript-needs/)
  - [AMD & RequireJS - Qiita](https://qiita.com/nanocloudx/items/70f1316debf05b93ac82)
  - [RequireJS in Node](https://requirejs.org/docs/node.html)
  - [umdjs/umd: UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.](https://github.com/umdjs/umd/)
- パッケージ管理
  - [Understanding the npm dependency model](https://lexi-lambda.github.io/blog/2016/08/24/understanding-the-npm-dependency-model/)
  - [ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita](https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95)
  - [依存関係の種類 | Yarn](https://classic.yarnpkg.com/ja/docs/dependency-types/)
  - [How npm3 Works | How npm Works](https://npm.github.io/how-npm-works-docs/npm3/how-npm3-works.html)
  - [The npm Blog — npm@2.0.0](https://blog.npmjs.org/post/98131109725/npm200)
  - [The npm Blog — npm@5, specifications, and our RFC process](https://blog.npmjs.org/post/154473364440/npm5-specifications-and-our-rfc-process)
  - [The npm Blog — The new npm CLI: a year in review; or, what you...](https://blog.npmjs.org/post/173240511455/the-new-npm-cli-a-year-in-review-or-what-you)
  - [The npm Blog — npm v7 Series - Beta Release! And: SemVer-Major...](https://blog.npmjs.org/post/626173315965468672/npm-v7-series-beta-release-and-semver-major)
  - [The npm Blog — Hello, Yarn!](https://blog.npmjs.org/post/151660845210/hello-yarn)
  - npm Release Notes: [3.0.0](https://github.com/npm/npm/releases/tag/v3.0.0) [5.0.0](https://github.com/npm/npm/releases/tag/v5.0.0)
  - [About scopes | npm Documentation](https://docs.npmjs.com/about-scopes)
  - [npm-scope  | npm Documentation](https://docs.npmjs.com/using-npm/scope.html)
  - [Yarn: A new package manager for JavaScript - Facebook Engineering](https://engineering.fb.com/web/yarn-a-new-package-manager-for-javascript/)
  - [3 Reasons to Use Yarn in 2020 (and Beyond)](https://spin.atomicobject.com/2020/03/15/why-yarn-2020/)
  - [Packages/Registry - CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Packages/Registry)
  - [npm-package-lock.json | npm Documentation](https://docs.npmjs.com/files/package-lock.json)
  - [npm-shrinkwrap.json | npm Documentation](https://docs.npmjs.com/files/shrinkwrap.json)
  - [npm-package-locks | npm Documentation](https://docs.npmjs.com/files/package-locks)
  - [yarn.lock | Yarn](https://classic.yarnpkg.com/ja/docs/yarn-lock/)
  - [node.js - What is the difference between yarn.lock and npm&#39;s shrinkwrap? - Stack Overflow](https://stackoverflow.com/questions/40057469/what-is-the-difference-between-yarn-lock-and-npms-shrinkwrap/40057535)
  - [Reproducible Builds with NPM (And Why You Should Use Yarn Instead)](https://spin.atomicobject.com/2016/12/16/reproducible-builds-npm-yarn/)
  - [Manual | Deno (Linking to third party code)](https://deno.land/manual/linking_to_external_code)
  - [Import mapsでDenoのパッケージのバージョンを管理したい | WEB EGG](https://blog.leko.jp/post/package-management-in-deno-with-import-map/)
  - [Bowerはなぜオワコン化したのか - Qiita](https://qiita.com/jonghyo/items/e931f7b6357995314599)
- webpack
  - [A brief and incomplete history of JavaScript bundlers | Read the Tea Leaves](https://nolanlawson.com/2017/05/22/a-brief-and-incomplete-history-of-javascript-bundlers/)
  - [Guides | webpack](https://webpack.js.org/guides/)
- アセットバンドリング
  - [css-modules/css-modules: Documentation about css-modules](https://github.com/css-modules/css-modules)
- TypeScript
  - [@babel/preset-typescriptを使ってTypeScriptを変換する - Qiita](https://qiita.com/nacam403/items/edf3e2c8ff364aff910f)
  - [TypeScript and Babel 7 | TypeScript](https://devblogs.microsoft.com/typescript/typescript-and-babel-7/)
  - [TypeScript: Handbook - Modules](https://www.typescriptlang.org/docs/handbook/modules.html)
- 歴史的なJavaScriptライブラリ
  - [Ajax (programming) - Wikipedia](https://en.wikipedia.org/wiki/Ajax_(programming))
  - [jQuery - Wikipedia](https://en.wikipedia.org/wiki/JQuery#History)
  - [History | jQuery Foundation](https://jquery.org/history/)
  - [John Resig - Selectors in JavaScript](https://johnresig.com/blog/selectors-in-javascript/)
  - [/my/cssQuery/](http://dean.edwards.name/my/cssQuery/)
  - [Behaviour : Using CSS selectors to apply Javascript behaviours](http://web.archive.org/web/20080419033833/http://www.bennolan.com/behaviour/)
  - [JavaScript ソースが HTML から消える日: 我的春秋](http://my-chunqiu.cocolog-nifty.com/blog/2006/01/javascript_html_bc22.html)
  - [History of jQuery](https://www.slideshare.net/jeresig/history-of-jquery)
  - [Prototype JavaScript Framework - Wikipedia](https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework)
  - [Prototype JavaScript framework: a foundation for ambitious web applications](http://prototypejs.org/)
  - [script.aculo.us - web 2.0 javascript](http://script.aculo.us/)
- その他JavaScript
  - [document.writeでscriptを読み込んではいけない - Qiita](https://qiita.com/aya_taka/items/1255909b3db622272cee)
  - [&lt;script&gt;: スクリプト要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/script)
  - [Minification (programming) - Wikipedia](https://en.wikipedia.org/wiki/Minification_(programming))
  - [JavaScript - Wikipedia](https://en.wikipedia.org/wiki/JavaScript)
  - [JScript - Wikipedia](https://en.wikipedia.org/wiki/JScript)
  - [A brief history of JavaScript | by Ben Aston | Medium](https://medium.com/@_benaston/lesson-1a-the-history-of-javascript-8c1ce3bffb17)
  - [HTMLの歴史 - とほほのWWW入門](http://www.tohoho-web.com/html/memo/hist.htm)
  - [HTML 3.2 Reference Specification](https://www.w3.org/TR/2018/SPSD-html32-20180315/)
  - [HTML 4.0 Specification](https://www.w3.org/TR/REC-html40-971218/)
  - [Browser Wars - Wikipedia](https://en.wikipedia.org/wiki/Browser_wars)
  - [The State of Babel · Babel](https://babeljs.io/blog/2016/12/07/the-state-of-babel)
  - [Deno (software) - Wikipedia](https://en.wikipedia.org/wiki/Deno_(software))
  - [TypeScript - Wikipedia](https://en.wikipedia.org/wiki/TypeScript)
- Ruby on Rails
  - [The Asset Pipeline - Ruby on Rails Guides](https://guides.rubyonrails.org/asset_pipeline.html)
  - [Working with JavaScript in Rails — Ruby on Rails Guides](https://guides.rubyonrails.org/working_with_javascript_in_rails.html)
  - [rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails](https://github.com/rails/webpacker)
  - [Ruby on Rails - Wikipedia](https://en.wikipedia.org/wiki/Ruby_on_Rails)
  - [Releases | Riding Rails](https://weblog.rubyonrails.org/releases/)
  - Release Notes: [Ruby on Rails 3.1](https://guides.rubyonrails.org/3_1_release_notes.html)