モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy
2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界に飛び込む新人さんなどの学習の助けになれば、と思います。 「モダン」な JavaScript ここで言う「モダン」とはどういう意味でしょうか？ 「モダン JavaScript」という表現は数年前から目にしますが、大抵 ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指しているようです。確かに、const / let やアロー関数などの文法的な改善、A
ECMAScript 2020の変更に対応したJavaScriptの入門書としてJavaScript Primer 2.0.0を公開しました。 JavaScript Primerのウェブサイトから閲覧できます。 ウェブサイト: https://jsprimer.net/ サマリIssue: ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer 変更内容の詳細はリリースノートを参照してください。 Release 2.0.0: ECMAScript 2020対応 · asciidwango/js-primer 2.0.0の目的 JavaScript Primerは、継続的にメンテナンスするためにOSSとして開発しています。 ECMAScriptの仕様は年に一度アップデートされていて、現実でのJavaScriptの使われ方も変化していく
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
イントロ MDN はもはや業界標準の JavaScript リファレンスサイトであるが、JavaScript の syntax (構文) や低レベルな動作については情報が載っていないことがある。このような場合は仕様に立ち返ってみる必要があるが、ECMAScript の仕様は非常に分かりにくい。この記事では、ECMAScript の仕様がどういうルールで書かれているか、どう読めばいいかを軽く説明する。 if 文の syntax の仕様ってどうなってるの？ if 文は statement1 であるから、"13 ECMAScript Language: Statements and Declarations" の中で説明されている。 早速最初の syntax1 のところを見てみると、下のように分かりにくい式のようなものが書かれている。 https://tc39.es/ecma262/#prod-
JavaScript Primer(jsprimer.net)が、ECMAScript 2022(ES2022)に対応しました。 リリースノート: Release v4.0.0: ES2022 · asciidwango/js-primer これまでのjsprimer ECMAScriptの仕様書は毎年更新されるので、それに合わせてjsprimerも更新しています。 1.0.0(ES2019): JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ 2.0.0(ES2020): JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました 3.0.0(ES2021): ES2021に対応したJavaScript Primer 3.0を公開しました - JavaScript入門 今回のアップ
近頃のJavaScript開発は、モジュールとして書かれた複数のJavaScriptファイルをimport文やexport文を通じて連携させるのが基本です。また、それらのファイルはWebpackに代表されるバンドラによって事前に処理され、import文の解決・ファイルの結合といった前処理を施されるのが普通です。まったく、各ファイルが他に影響を与えないように(function(){ ... })()で囲んで文字列連結していた時代が懐かしいですね。 さて、import文の解決を担当するバンドラは、大抵JavaScriptプログラム以外のものを読み込む機能を備えています。Webpackならばloaderと呼ばれるものですね。例えば、style-loaderやcss-loaderが持つCSS Modulesの機能を使うと次のようなプログラムを書くことができます（Reactの例）。 import s
はじめに 個人的に TC39 meeting をウォッチしてまとめている @petamoriken です。 ECMAScript の Decorators の提案は何度も改定しています。その割にあまり知れ渡っていません。この記事ではその変遷と最終的な Decorators の仕様について簡単にまとめようと思います。 この発表スライドを見ると流れがわかりやすいかもしれません。 最初の提案（2014年~2015年頃） 最初の提案はこのような形式をしていました。 class Person { @nonenumerable get kidCount() { return this.children.length; } } function nonenumerable(target, name, description) { descriptor.enumerable = false; return
We are excited to announce the release of the new version of Prettier! We have made the migration to using ECMAScript Modules for all our source code. This change has significantly improved the development experience for the Prettier team. Please rest assured that when using Prettier as a library, you can still use it as CommonJS as well. This update comes with several breaking changes. One notabl
このページはECMAScript® 2020 Language SpecificationをJavaScriptの学習目的で私的に日本語訳したものであり、直訳と意訳および推測が混在しています。そのため内容については正確でない可能性があります。正確な情報を知りたい場合は、原文をご覧ください。また一部訳者によるコメントが含まれていることがあります。※このサイトの内容で損害や不利益を受けたとしても当方は一切の責任を負いません。
TypeScript3.8以降のECMAScript private fieldについて - abcdefGets
現状targetがesnextじゃないならあまり使わないほうがよい Reason 以下のようなシンプルなケースを考える。 class A { #field = 1; something() {return this.field;} } targetがesnext以外だと var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return privateMap.get(receiver); }; var _field; class
ECMAScript Module Harmony
Module Harmony とは 現在 TC39 で多くのモジュール機能を追加する提案が進行しています。かつてはそれぞれの提案が無秩序に進行していましたが、2023年5月に Module Harmony として整理されました。この記事ではそれら提案についてまとめようと思います。 モジュール提案仕様の依存関係 インポートフェーズ修飾子 モジュールの読み込みがフェーズに分けられ、それぞれに対して修飾子が提案されています。シンタックスとしては import の後ろに修飾子を付けます。 import <Modifier> <ImportBinding> from <ModuleSpecifier>; import.<Modifier>(<AssignmentExpression>); モジュールの各フェーズと修飾子の対応 アセット参照 URL やパス解決のみをするのがアセット参照です。Asset
この記事では2022年06月06日~09日に開催された TC39 meeting 90th で議題に上がったプロポーザルを紹介します。 For Stage 4 findLast / findLastIndex Stage 4 に到達しました findLast と findLastIndex は、Array.prototype.find と Array.prototype.findIndex の逆から走査するバージョンです。 const arr = [ { prop1: 1, prop2: "foo" }, { prop1: 1, props2: "bar" }, ]; const obj1 = arr.find((element) => element.prop1 === 1); console.log(obj1.prop2); // "foo" const obj2 = arr.find
GitHub - daumann/ECMAScript-new-features-list: A comprehensive list of new ES features, including ES2015 (ES6), ES2016, ES2017, ES2018, ES2019
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Meguro.es #27 @ oRo
「Prettier 3.0」では、すべてのソースコードをECMAScriptモジュールを使用する形式へ移行しており、この変更によって開発エクスペリエンスを大幅に向上している。なお、Prettierをライブラリとして利用する場合は、CommonJSとしても利用できる。 おもな変更点としては、中国語、日本語、韓国語における空白の処理を改善し、これまで行っていた中国語や日本語と西洋の文字や数字との間へのスペースの挿入が行われないようになった。 さらに、中国語と日本語における特定の文字を行頭または行末に使用しない、というルールを順守するよう変更されるとともに、韓国語において単語内での改行が行われないよう修正されている。 また、プラグインの非同期パーサがサポートされるようになったほか、ESMにおけるprettier.config.js、.prettierrc.js、prettier.config.m
ECMAScript Record & Tuple polyfill はどのようにして実装されているのか | Wantedly Engineer Blog
Record & Tuple とはRecord & Tuple は ECMAScript (JavaScript) に対する提案段階の機能で、構造化データのためのプリミティブ型を提供するというものです。RecordはObjectのプリミティブ版、TupleはArrayのプリミティブ版にあたります。 プリミティブとオブジェクトJavaScriptにおける値はプリミティブとオブジェクトの2種類に分けられます。 プリミティブはイミュータブルで、値の同等性にもとづいて比較されます。既存のプリミティブとして、null, undefined, number, string, boolean, bigint, symbol が存在しています。オブジェクトはデフォルトでは書き換え可能で、参照の同一性にもとづいて比較されます。これまで、複数のスカラー値をまとめて構造化データとして扱うには、オブジェクト (主
Show navigation All episodes In this article, we take a simple function in the spec and try to understand the notation. Let’s go! Preface #Even if you know JavaScript, reading its language specification, ECMAScript Language specification, or the ECMAScript spec for short, can be pretty daunting. At least that’s how I felt when I started reading it for the first time. Let’s start with a concrete ex
この記事では2022年03月28日~31日に開催された TC39 meeting 89th で議題に上がったプロポーザルを紹介します。 For Stage 4 For Stage 4 の提案はありませんでした。 For Stage 3 RegExp set notation + Unicode properties of strings Stage 3 に到達しました このプロポーザルは正規表現に新しくvフラグを導入し、その中で set notation と Unicode properties of strings を使えるようにします。 (翻訳するとしたら set notation は「集合の表記」、properties of strings は「文字列プロパティ」でしょうか。定訳がわからないのでこの記事ではこれらの用語を英語のまま表記します。) まず、set notation とは次
SES v0.8.0Up to this point, SES has supported evaluating scripts in the SES runtime. Since every non-trivial application has many modules, running an application previously required creating a script bundle with a tool like Browserify. We’re excited to announce the first release of SES that directly supports loading ECMAScript modules. This is the first in a series of milestones toward delivering
これは著者が Intl（ECMAScript の国際化 API）策定までの議論を追った際に得た知見をもとに「ECMAScript の仕様策定を 10 年以上遡って調べたい時にどうするか」について書いた記事です。仕様の種類や策定している年代によっては紹介する方法が当てはまらない可能性もあるので注意してください。 仕様を調べるとプロセスが気になってくる ECMAScript の仕様を調べていると時折「何でこの仕様は入ったんだろう」とか「採用されるまでにどういった議論がなされたんだろう」といったことが気になる時があります。 新しい仕様の策定や stage 変更は必ず ECMAScript の仕様策定している TC39 のミーティングを経て行われていますから、基本的にミーティング議事録を漁れば上記のような「モチベーション」や「策定までの議論」を見つけることがでるはずです。 近年のミーティング ag
Node.js の import specifier と ECMAScript の ImportSpecifier 先日 Firefox の JavaScript エンジンである SpiderMonkey の公式ブログに Import Maps についての記事が投稿された。 https://spidermonkey.dev/blog/2023/02/23/javascript-import-maps-part-1-introduction.html この記事は、そもそも ECMAScript Modules とは何かというところから入り、Node.js のモジュールシステムの歴史やブラウザの ECMAScript Modules との関係などを説明した後、本題である Import Maps について解説している。短い時間で読める面白い記事なので、まだ読んでいない人はぜひ読んでほしい。 この
GitHub - tc39/proposal-type-annotations: ECMAScript proposal for type syntax that is erased - Stage 1
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
祝！Google Apps Scriptが「V8ランタイム」をサポート！モダンなECMAScript構文が使えるようになった
今回、GASにどのようなアップデートがあったのか まず、今回のGASのアップデートの概要についてお伝えします。 Google Apps Scriptではこれまで、「Rhinoランタイム」というJavaScriptを実行するエンジンを使ってきていました。 で、実際にそれで実行できるJavaScriptの構文は「JavaScript1.6~1.8」とかのバージョンのもので、正直古いもの… 今、多くのJavaScriptプログラマーが使っている「ECMAScript」と呼ばれるJavaScriptのバージョンとは、かなりの差分がありました（ECMAScriptにも「ES5」や「ES6」などのいくつかのバージョンがあります）。 さて、今回のGASのアップデートで、Rhinoランタイムに加えてGASで「V8ランタイム」というJavaScript実行エンジンがサポートされました。 V8ランタイムに切り
Node.js v20 リリースされました。 V8 のバージョンが 11.3 まで上がったことで、いくつかの新しい ECMAScript の機能が使えるようになりました。v フラグが好きなのでうれしいです。 どのバージョンからどの機能が使えるようになったかとか忘れてしまうのでメモしておきます。 String.prototype.isWellFormed / String.prototype.toWellFormed 文字列が Well Formed Code Unit Sequence かどうか判定する isWellFormed と、それに変換する toWellFormed が追加されます。WebIDL の文脈では USV 文字列とか言われますね。 これは WebAssembly みたいな USV 文字列前提の環境とやり取りするときに便利。Babel みたいな JavaScript を解釈
ECMAScript Proposals
Adopting Unicode behavior for set notation in regular expressions
GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler You will know how to make a javascript bundler. Contribute to hiroppy/the-sample-of-module-bundler d... 変更されたコード一覧はこちら ECMAScript Modules(ESM)について さて、多くの人がすでに使っている以下のような構文が ESM と呼ばれるものです。 import { version } from "module"; export const a = 1; 仕様等のドキュメント tc39: https://tc39.es/ecma262/#sec-modules whatwg: ht
【2021/9/1 追記】 提案されていた API のリネームが検討されていましたが ShadowRealm に決まりました。それに伴って記事の中身を修正しています。 【追記ここまで】 Realms とは何か Realms は JavaScript の言語仕様である ECMAScript で定義されている概念です。 JavaScript のコードが評価されるグローバル変数や Array, Map といったビルトインクラス、そこで実行されるコードなどの状態やリソースのことを指します。 ShadowRealm 現在 TC39 で ShadowRealm クラスが提案されています。これを使うことで新しい Realm を作って、JavaScript を評価させることが出来ます。 Web Workers のように別のスレッドで動作されるわけではなく、同じスレッドで同期的に実行されます。 const
This article was contributed by the Node.js Module Team. Node.js 13.2.0 ships support for ECMAScript modules, known for their import and export statements. This support was previously behind the--experimental-module flag, which is no longer required; however the implementation remains experimental and subject to change. Enabling Node.js will treat the following as ES modules when passed to node as
ECMAScript 2019 and beyond...
Newsletter Subscribe to keep up-to-date with the latest content! Last month - June 2019 - 10th edition of ECMA-262 standard was officially published. What does it mean? - Well, ECMAScript 2019 is here! The latest and greatest specification for JavaScript and other derivatives languages to follow. And while you may already have heard of some of its new features, we'll recall all of them! Plus some
[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か - 株式会社カブク
※ 2021/09/15 時点の話です。議論が活発なので、これからどう流れるか分かりません。この記事ではたくさんのリンクを貼っていますが、議論の焦点を理解するにあたって最も重要なリンクはこれです。 TC39 Pipeline Operator – Hack vs F# https://benlesh.com/posts/tc39-pipeline-proposal-hack-vs-f-sharp/ 2 つの仕様案 TC39 の Pipe operator （以前は Pipeline operator と呼ばれていました、 Wikipedia によれば Pipe operator を日本語で「パイプライン演算子」と呼ぶようです）のプロポーザルには少なくとも 2 つの異なる仕様案「F# pipe」と「Hack pipe」があります。以前はこれらを組み合わせた「Smart mix」案もありました
![[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/3c5228e05eb2c2945c402094eb984595033f4d3f/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2021%2F09%2Ffsharp-pipe-rxjs-1024x321.png)
⭐ Prepare for a JavaScript interview fast with my new book!Learn more → ECMAScript 2020, the 11th installment of our favorite programming language, contains a handful of new features. Some are small ones, but others have the potential to change forever the way we write JavaScript. This article is an attempt at a short and concise overview of those new features. Grab your cup of tea and let's go. D
JSer.info #442 - しばらくbetaのままリリースが止まっていたnpm 6.9.1がリリースされました。 Release: [email protected] - 📣 announcements - npm forum npm token createやnpm --global outdatedのバグが修正されています。 また、6.9.1には問題があったため、6.9.2もリリースされています。 Release: [email protected] - 📣 announcements - npm forum npm 6.9.1 is broken due to .git folder in published tarball - 🐞 bugs - npm forum 6.9.xには、mainフィールドのファイル名が一致した.gitにあるファイルもnpm publishで含
7.8.0 Released: ECMAScript 2020, .mjs configuration files and @babel/cli improvements · Babel
This is the first release of the year! 🎉 Babel 7.8.0 supports the new ECMAScript 2020 features by default: you don't need to enable individual plugins for nullish coalescing (??), optional chaining (?.) and dynamic import() anymore with preset-env. We also finished aligning our different configuration files with the formats natively supported by Node.js, a process that we started in the 7.7.0 rel
ECMAScript 2021
Update 2021-06-22: The 121st Ecma General Assembly approved the ECMAScript 2021 language specification, which means that it’s officially a standard now. This blog post describes what’s new. The editors of ECMAScript 2021 # The editors of this release are: Jordan Harband Shu-yu Guo Michael Ficarra Kevin Gibbons A word on ECMAScript versions # Note that since the TC39 process was instituted, the i
Firefox 115がリリースされました。 Firefox 115.0, See All New Features, Updates and Fixes Firefox 115 for developers - Mozilla | MDN macOS 10.12/10.13/10.14、Windows7/8/8.1がサポートされる最後のバージョンとなります contenteditableにおけるノード分割と結合の挙動を他のブラウザと揃えるように変更。 Array.fromAsync()のサポート、ES2023のArray.toReversed()/.toSorted()/.toSpliced()/.with()のサポート。 Response.json()、URL.canParse()のサポートなどが追加されています。 JSer.infoをサポートするには 😘 知り合いにJSer.inf
GitHub - tc39/proposal-record-tuple: ECMAScript proposal for the Record and Tuple value types. | Stage 2: it will change!
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
ECMAScript proposal: RegExp flag `/v` makes character classes and character class escapes more powerful
ECMAScript proposal: RegExp flag /v makes character classes and character class escapes more powerful In this blog post, we look at the ECMAScript proposal “RegExp v flag with set notation + properties of strings” by Markus Scherer and Mathias Bynens. The new flag /v # The proposed new regular expression flag /v (.unicodeSets) enables three features: Support for multi-code-point graphemes (such a
みんな大好きGoogleAppsScriptで、2020年2月よりES2015以降のナウい構文が利用できるようになりました。 Historically, Apps Script has been powered by Mozilla's Rhino JavaScript interpreter. While Rhino provided a convenient way for Apps Script to execute developer scripts, it also tied Apps Script to a specific JavaScript version (ES5). Apps Script developers can't use more modern JavaScript syntax and features in scripts using the Rhino
![[GAS] V8ランタイムを有効にし最新のECMAScriptを動かす - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/e22239975e1a982d6ba111b888b4e30816b6f5aa/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061407041%2F1701427022)
JSer.info #614 - Bun v0.2.0がリリースされています。 Release Bun v0.2.0 · oven-sh/bun 0.2.0ではbun --hotでのHot Relaodingの対応、Bun.spawnの追加、ReadableStreamのサポート改善、package.jsonのimportsフィールドのサポートなど含まれています。 monorepo管理ツールのlerna v6.0.0がリリースされました。 Release v6.0.0 · lerna/lerna デフォルトでlerna runにNxを使うように、lerna add-cachingコマンドの追加、lerna repairコマンドの追加などの変更が含まれています。 内部的にNxを使うようになったため、Nxの機能であるリモートキャッシュなども利用できるようになっています。 Lerna rebor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました
ECMAScript(JavaScript)の仕様をちょっと読んでみよう - Qiita
JavaScript Primer 4.0.0: ECMAScript 2022に対応したJS本
import文で画像やCSSを読み込むのはECMAScript仕様違反か - uhyo/blog
ECMAScript Decorators の変遷と最新仕様 - Qiita
Prettier 3.0: Hello, ECMAScript Modules! · Prettier
ECMAScript2020言語仕様 私的日本語訳
ECMAScriptの最新動向 2022年06月版 | サイボウズ フロントエンドエキスパートチーム
require(ESM)とECMAScript仕様
コードフォーマッタ「Prettier 3.0」がリリース。すべてのソースコードをECMAScriptモジュールに変更
Understanding the ECMAScript spec, part 1 · V8
ECMAScriptの最新動向 2022年03月版 | サイボウズ フロントエンドエキスパートチーム
SES support for ECMAScript modules
ECMAScript考古学をするときに
Node.js と ECMAScript の Import Specifier は意味が違うらしい
Node.js v20 から使える ECMAScript の新機能
module bundlerの作り方(ECMAScript Modules編) - hiroppy's site
ECMAScript Realms と ShadowRealm の提案 - Qiita
Microsoft、「TypeScript 5.0」を正式公開 ～よりコンパクト、シンプル、高速に／ECMAScriptで採用が予定されている「デコレーター」に対応するなどの新機能も
Announcing core Node.js support for ECMAScript modules
What's new in ECMAScript 2020
2019-07-04のJS: npm 6.9.2、ECMAScript 2019リリース、Dark Mode
2023-07-05のJS: TypeScript 5.2 Beta、ECMAScript 2023、Firefox 115
[GAS] V8ランタイムを有効にし最新のECMAScriptを動かす - ねこの足跡R
2022-10-19のJS: Bun v0.2、Lerna v6、ECMAScript Decorator