LoginSignup
121
125

More than 3 years have passed since last update.

@qnighyinWantedly, Inc.

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

Last updated at Posted 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> タグが含まれた1HTML 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がリリースされた。

参考にした資料

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

121
125
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
121
125