Bot releases are visible (Hide)
Published by azu about 1 year ago
JavaScript Primer v5.0.0では、2023年6月27日にリリースされたECMAScript 2023(ES2023)をサポートしています。
配列の破壊的なメソッドであるsplice
、reverse
、sort
に対して、
ES2023では非破壊的なバージョンであるtoSpliced
、toReversed
、toSorted
が追加されました。
また、配列への代入(array[index] = item
)という破壊的な処理に対して、with
という非破壊的なメソッドが追加されました。
toSpliced
、toReversed
、toSorted
、with
メソッドの解説の追加破壊的な方法 | 非破壊な方法 |
---|---|
array[index] = item |
Array.prototype.with [ES2023]
|
Array.prototype.pop |
array.slice(0, -1) とarray.at(-1) [ES2022]
|
Array.prototype.push |
[...array, item] [ES2015]
|
Array.prototype.splice |
Array.prototype.toSpliced [ES2023]
|
Array.prototype.reverse |
Array.prototype.toReversed [ES2023]
|
Array.prototype.sort |
Array.prototype.toSorted [ES2023]
|
Array.prototype.shift |
array.slice(1) とarray.at(0) [ES2022]
|
Array.prototype.unshift |
[item, ...array] [ES2015]
|
Array.prototype.copyWithin [ES2015]
|
なし |
Array.prototype.fill [ES2015]
|
なし |
配列のメソッドを非破壊的なメソッド(Immutable)と破壊的なメソッド(Mutable)に分けると、次のようになります。
Array.prototype.{findLast, findLastIndex}
ES2023では、Array.prototype.findIndex
とArray.prototype.find
に対応するメソッドとして、
Array.prototype.findLastIndex
と Array.prototype.findLast
が追加されました。
それぞれ findIndex
とfind
と同じ使い方ですが、末尾から探索した結果を返すメソッドになっています。
Array.prototype.findLastIndex
と Array.prototype.findLast
の対応Array.prototype.lastIndexOf
のサンプルコードを追加ES2022までは、WeakMapのキーとWeakSetの値にはオブジェクトのみが指定可能でした。
これは弱い参照をGCで解放するために、キーは一意な値のみが指定可能という制限からくるものでした。
Symbolも一意な値となるため、ES2023ではオブジェクトに加えてSymbolも指定できるように仕様が変更されました。
その他にもES2023にマージされたProposalとしてHashbang Grammarがあります。
Hashbang Grammarは#!
から始まる最初の行をコメントとして扱う仕様ですが、Node.jsなどの実行環境との相互運用性を考慮して、ES2023で仕様が変更されました。
jsprimerでは特に取り扱っていませんが、興味がある方は次のIssueを参照してください。
今までのjsprimerのライセンスは次のとおりでした。
v5.0.0からはjsprimerのライセンスを次のように変更します。
CC BY-NCでは商用利用を禁止する条項がありますが、
CC BYにはこの条項は含まれません。
行為 | CC BY | CC BY-NC |
---|---|---|
複製 | OK | OK |
頒布 | OK | OK |
展示 | OK | OK |
実演 | OK | OK |
改変 | OK | OK |
著作権者の表示 | 必要 | 必要 |
非営利目的 | OK | NG |
元から、教材などとしての利用は許可していましたが、商用かどうかの判断が難しいものになっていました。
今回の変更で、著作権者表示をすれば商用でも利用可能なライセンスになっています。
これにより、jsprimerの文章も、より自由に使いやすくなります。
変更の詳細についてはIssueを参照してください。
BabelやPrettierなども利用しているOpen Collectiveというサービスを使い、JavaScript Primerというプロジェクトを金銭的に支援できるようになりました。
次のCollectiveのページから支援できるようになっています。
このOpen Collectiveでの支援は、主に企業ユーザーを対象にしています。
支援することでWebサイトや次回(ES2024)のリリースノートにスポンサー表示ができるようになります。
また、"推しページ"を設定できるようにする予定で、https://jsprimer.net/の特定のページにメッセージ(書籍のポップをイメージ)を出せるようにする予定です。
JavaScript Primerは変化を前提にした書籍のプロジェクトであるため、毎年のECMAScriptのリリースに合わせて内容を改訂しています。
jsprimerは変化に対応できる基礎を身につけられること、またそれを迷わずに学べるようにすることを目的にしたプロジェクトです。
変化に対応するには、書籍自体も変化に対応する必要があります。
更新に継続的に行うのに必要なリソースとしてヒト、カネ、モノがあります。
Open Collectiveは、プロジェクトに対して金銭的な支援をすることができるサービスです。
単純に受け取るだけではなく、プロジェクトにContributeしてくれた方に還元することもできます。
それらのやりとりがオープンに行えるのがOpen Collectiveの特徴です。
ざっくりとした試算では、jsprimerの毎年の更新にかかる必要は年間で687,840円ぐらいです。
詳細は次の記事にまとめています。
JavaScript Primer - Open Collectiveでの支援方法として、Yearly Gold Sponsors(年間)とMonthly Gold Sponsors(月間)を用意しています。
jsprimerは年ごとの更新なので、Yearly Gold Sponsorsがわかりやすいかと思います。
まだ、どういう形が最適なのかはわかっていないため、Contributeしてくれる方(金銭的な支援もContributeです)と考えながら形を作っていけければと思います。
次のページに、このリリースについてのDiscussionを用意しているので、是非で意見を聞かせてください!
Open Collectiveについてはまだ検討中の部分も多いので、まずは公開するところから始めています。
これからも更新されていくと思うので、更新情報を知りたい方は、リポジトリをWatchしてみてください。
https://github.com/asciidwango/js-primer からWatchボタンで、Releaseの更新情報を受け取れます。
また、メールで通知を受け取りたい方は、次のフォームからメールアドレスを登録すると更新情報を受け取れます。
Published by azu over 1 year ago
「JavaScript Primer 改訂2版 迷わないための入門書」のスナップショットとなるタグです。
書籍版は次のサイトなどから購入できます。
改訂2版には、次の変更内容が含まれています。
初版からのDiffは次のページで閲覧できます。
Published by azu over 2 years ago
jsprimer.net がECMAScript 2022(ES2022)に対応しました。
ES2022への対応して、次の内容が更新されています。
また、ウェブ版の仕組みとしてユースケースの章などのHTMLを使ったアプリケーションもウェブ上でそのまま変更しながら確認できるエディタを組み込んでいます。
await
ES2021までは、await
式はAsync Functionの直下でのみしか利用できませんでした。
ES2022には、これに加えてModuleの直下では、Async Functionで囲まなくてもawait
式が利用できます。
console.log("start");
// awaitを使って1秒待つ
await new Promise(resolve => setTimeout(resolve, 1000));
console.log("end");
これにより、await
式を使うためだけにAsync Functionを使った即時実行関数は不要となります。
// awaitを使うためだけに、Async Functionの即時実行関数を実行している
(async function() {
// awaitを使う処理
const result = await doAsyncTask();
// ...
})();
Object.hasOwn
ES2022ではObject.hasOwn
静的メソッドが追加されました。
Object.hasOwn
静的メソッドは、対象のオブジェクトが指定したプロパティを持っているかを確認できるメソッドです。
const obj = { key: "value" };
// `obj`が`key`プロパティを持っているならtrueとなる
if (Object.hasOwn(obj, "key")) {
console.log("`obj`は`key`プロパティを持っている");
}
このObject.hasOwn
静的メソッドは、Object.prototype.hasOwnProperty
メソッドを置き換える目的で導入されています。
hasOwnProperty
メソッドは、Object.create(null)
で作成したような"prototypeを継承していないオブジェクト"からは直接呼び出せないという欠点があります。
// prototypeを継承していないオブジェクト
const obj = Object.create(null);
// `Object.prototype`を継承していないため呼び出すと例外が発生する
console.log(obj.hasOwnProperty("key")); // => Error: hasOwnPropertyメソッドは呼び出せない
Object.hasOwn
静的メソッドは、インスタンスオブジェクトではなく静的メソッドであるため、対象のオブジェクトに関係なく利用できます。
// prototypeを継承していないオブジェクト
const mapLike = Object.create(null);
// keyは存在しない
console.log(Object.hasOwn(mapLike, "key")); // => false
Array.prototype.at
配列の末尾の要素へアクセスするには、array[array.length - 1]
というlength
プロパティを使う必要がありました。
array
を2回書く必要があるなど、末尾の要素へのアクセスは少し手間が必要になっていました。
この問題を解決するためES2022では、相対的なインデックスの値を指定して配列の要素へアクセスできるArray.prototype.at
メソッドが追加されました。
Arrayのat
メソッドは、配列[インデックス]
とよく似ていますが、引数には相対的なインデックスの値を引数として渡せます。.at(0)
なら配列の先頭の要素へ、.at(-1)
なら配列の末尾の要素へアクセスできます。
const array = ["a", "b", "c"];
// 先頭の要素にアクセス
console.log(array.at(0)); // => "a"
console.log(array[0]); // => "a"
// 後ろから1つ目の要素にアクセス
console.log(array.at(-1)); // => "c"
console.log(array[array.length - 1]); // => "c"
String.prototype.at
配列と同じく文字列にも相対的なインデックスの値を指定して文字へアクセスできるString.prototype.at
が追加されました。
const str = "文字列";
console.log(str.at(0)); // => "文"
console.log(str.at(1)); // => "字"
console.log(str.at(2)); // => "列"
console.log(str.at(-1)); // => "列"
ES2022ではクラスにクラスフィールド構文が追加されました。
クラスフィールドは、PublicクラスフィールドとPrivateクラスフィールドの2種類があります。
Publicクラスフィールドは、次のようにクラスのインスタンスに対するプロパティを宣言的に定義できる構文です。
class Counter {
count = 0;
increment() {
this.count++;
}
}
const counter = new Counter();
counter.increment();
console.log(counter.count); // => 1
一方のPrivateクラスフィールドは、フィールド名の前に#
をつけることで、クラスの外からはアクセスできないプライベートなプロパティを定義できる構文です。
class NumberWrapper {
// valueはPrivateクラスフィールドとして定義
#value;
constructor(value) {
this.#value = value;
}
// `#value`フィールドの値を返すgetter
get value() {
return this.#value;
}
// `#value`フィールドに値を代入するsetter
set value(newValue) {
this.#value = newValue;
}
}
const numberWrapper = new NumberWrapper(1);
console.log(numberWrapper.value); // => 1
// クラスの外からPrivateクラスフィールドには直接はアクセスできない
// console.log(numberWrapper.#value); // => SyntaxError: reference to undeclared private field or method #value
今までは、クラスのインスタンスにプロパティを定義するにはクラスのconstructor
メソッド内で値を代入する必要がありました。クラスフィールドでは、インスタンスへのプロパティの定義をより宣言的に行えます。
また、Privateクラスフィールドでは #
という新しい記号を利用します。
そのため、今までprototypeの省略記号として #
を利用していた部分は全て書き換えています。
そのほかにもES2022ではRegular expression match indices、スタックトレースを継承するError cause、 static blocksなどが追加されています。
jsprimer.net のウェブ版では、JavaScriptのコードをそのままブラウザで実行できるコンソール機能が実装されています。
今までは、JavaScript実行のみしか扱えませんでしたが、そのため表示を扱うユースケースであるTodoアプリなどはローカルサーバを使って確認する必要がありました。
今回、jsprimerにHTMLの表示も伴うコードにも対応したエディタを組み込みました。
CodeSandboxが提供しているComponent toolkit for creating live-running code editing experiences | Sandpackを使いエディタを組み込んでいます。
エディタの右下のボタンから、CodeSandboxで開いてコードを共有も可能です。
最初にjsprimerでは、書籍をよりよくしていくための改善案などは常に募集しています。
また、今回のアップデートに関連して特に意見を募集している箇所はDiscussionのスレッドを作成しているので、興味がある人はコメントしてくダサい。
Published by azu over 3 years ago
JavaScript Primerのウェブ版がECMAScript 2021に対応しました 🎉
JavaScript Primerのウェブサイトから閲覧できます。
JavaScript Primerは、これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。
ECMAScriptの仕様は毎年アップデートされるため、JavaScript Primerも毎年それに対応できるように継続してアップデートしています。
GitHubで更新情報を購読したい人は、asciidwango/js-primerリポジトリを"Watch"してください。
"Custom"からリリースのみを購読も可能です。
更新通知をメールで受け取り方は、次のフォームからメールアドレスを登録してください。
継続的にアップデートするために、書籍への支援はいつでも歓迎しています。
JavaScript PrimerはECMAScriptのアップデートに追従したり、現実の使い方を反映するために、継続してアップデートしています。
GitHub Sponsorsで著者を支援できます。
また、書籍版へのレビューを書くことも支援に繋がります。
GitHubのDiscussions(掲示板)の他の人の質問に答えたり、JSPrimerを読んだ感想を書くことも支援になります。
Discussionsのガイドラインは次のスレッドにまとめられています。
書籍に対してIssueを立てたり、Pull Requestを送ったりして直接的に支援もできます。
IssueやPull Requestについては、次のページを参照してください。
The 121st General Assembly held as a virtual meeting on 22 June 2021 approved the following documents:
ECMA-262 12th edition – ECMAScript® 2021 language specification
-- https://www.ecma-international.org/news/ecma-international-approves-new-standards-4/
ECMAScript 2021は、2021年6月にEcma Internationalで正式に承認された仕様です。
ECMAScriptの仕様策定のプロセスについては、次のページを参照してください。
3.0.0では次の項目について書籍の内容を変更、追加しています。
String#replaceAll
ES2021では、String#replaceAll
メソッドというマッチした文字列を全て置換するメソッドが追加されました。
String#replace
メソッドは、最初に一致したものだけが置換されますが、String#replaceAll
メソッドでは一致したものがすべて置換されます。
今までもString#replace
メソッドと正規表現のg
(global)フラグを使うことで、繰り返し置換が可能でした。
しかし、正規表現では?
や.
などは特殊な意味を持つため、エスケープが必要となります。
String#replaceAll
メソッドでは、ただの文字列として渡したものを繰り返し置換ができるため、エスケープが不要な点が主な違いです。
const str = "???";
// replaceメソッドの場合は、正規表現の特殊文字はエスケープが必要となる
console.log(str.replace(/\?/g, "!")); // => "!!!"
// replaceAllメソッドでは、文字列として渡した検索文字列を全て置換する
console.log(str.replaceAll("?", "!")); // => "!!!"
詳細
ES2021では、Numeric Separatorsという_
を数値リテラルの区切り文字として利用できる構文が追加されました。
数値リテラルでは数値が大きくなるほど、桁数の見間違いなどが発生しやすくなります。
const largeNumber = 1000000000000;
Numeric Separatorsでは、数値リテラルの区切り文字として_
が追加できます。
数値リテラルを評価する際には、_
は単純に無視されるため意味の違いはありません。
const largeNumber = 1_000_000_000_000;
JavaScript Primer 3.0では、このNumeric Separatorsの解説をデータ型とリテラルに追加しています。
また、ビット演算では数値リテラルの桁数が多くなりやすいです。
そのため、演算子のビット演算のセクションをNumeric Separatorsを使って書き直し、図などを入れています。
📝 演算子の章は肥大化しやすいので、今後のバージョンで整理するかもしれません。
ビット演算はユースケースでは利用していないため、ページとして分ける可能性もありそうです。
チートシートにES2021で増えた構文を追加。
次のES2021の変更は、現時点のJavaScript Primerでは含まれていません。
JavaScriptのリファレンスを作ることは本書の目的ではないため、
この本のユースケースで利用する可能性が少ないものに関しては取り入れていません。
Promise.any
と AggregateError
WeakRefs
&&=
、||=
、??=
のような論理演算子と代入演算子の組み合わせ詳細はES2021の対応 · Issue #1220 · asciidwango/js-primerを参照してください。
Published by azu about 4 years ago
JavaScript Primerのウェブ版をECMAScript 2020に対応しました 🎉
JavaScript Primerのウェブサイトから閲覧できます。
The 119th General Assembly held as a virtual meeting on June 16, 2020, approved the following documents:
ECMA-262 11th edition - ECMAScript® 2020 Language Specification
ECMA-402 7th edition - ECMAScript® 2020 Internationalization API Specification
ECMAScript 2020は2020年06月にEcma Internationalによって正式に承認された仕様です。
ECMAScriptの仕様策定のプロセスについては次のページを参照してください。
2.0.0では次の項目についてそれぞれ書籍の内容を変更、追加しています。
for...in
文がプロパティを列挙する順番はES2019までは実装依存だった。
これがES2020では仕様として列挙する順番が規程されたので、異なる列挙をするブラウザは基本的になくなる。(現時点ではすでにどのブラウザも同じ順番)
背景としては、Reflect.ownKeys
(ES2015)が入った際に大体の実装が同じ列挙順に統一されていた。
そのため実装依存だった順序の仕様を定義するように修正された。
詳細
export * as ns from "mod";
ES2020では、export * as ns from "mod";
という再エクスポートの構文が追加された。
export * as ns from "mod”
to Export production and Module Semantic by spectranaut · Pull Request #1174 · tc39/ecma262ES2015での見落とし的な構文で、ES2015では次のように書く必要があった。
import * as ns from "./module.js";
export { ns };
これを次のように1行で書けるように追加された構文。
export * as ns from "./module.js";
String.prototype.matchAll
ES2020では String.prototype.matchAll
という正規表現のg
フラグを使った繰り返しマッチに対応したメソッドが追加された。
今まではRegExp.prototype.exec
メソッドで繰り返しマッチを表現していたが、String.prototype.matchAll
メソッドというIteratorを返すメソッドに置き換えることができる。
変更点
Sttring#match
と String#matchAll
をベースに変更RegExp#exec
は String#matchAll
が利用できる場合に使う状況がないため、コラムに変更
RegExp#exec
は 基本的には利用することはなくなったメソッドであるためSttring#match
と String#matchAll
の対比で話を進めた実行環境でwindow
やglobal
などグローバルオブジェクトの参照方法がバラバラだった。
これをまとめた概念としてglobalThis
がES2020で追加された。
新しいデータ型としてBigInt
が追加された。
1n
のように n
というsuffixをつけるリテラル2^53-1
よりも大きな値は精度が足りずに正確に表現できないn
をつけた場合は構文エラーとなる0n
も falsy に追加 #445??
)とOptional chaining演算子(?.
)Nullish coalescing演算子(??
)は、左辺の値がnulishであるならば、右辺の評価結果を返す。
nulishとは、評価結果がnullまたはundefinedとなる値のこと。
Optional chaining演算子(?.
)は、左辺のオペランドがnullish(nullまたはundefined)の場合は、それ以上評価せずにundefinedを返す。
一方で、プロパティが存在する場合は、そのプロパティの評価結果を返す。
どちらもNullishを扱うため、まとめて対応。
どちらの演算子も利用できる場所が広いため、かなり幅広いページを書き換えている。
変更点
?.
)の解説を"オブジェクト"の章に追加??
)とOptional chaining(?.
)の組み合わせを説明??
)の解説を"演算子"の章に追加||
を ??
に置き換え
??
推奨気味に変更チートシートにES2020で増えた構文を追加。
??
)?.
)42n
)export * as ns from "./x.js"
次のES2020の変更は、現時点のJavaScript Primerでは含まれていません。
Promise.allSettled
import()
import.meta
詳細はECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primerを参照してください。
Published by azu over 4 years ago
書籍版の初版をリリース
JavaScript Primerは これからJavaScriptに入門したい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。
プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるようになるように書かれています。