From 87803fcb237d3356190d6fef38aec87571a50ce4 Mon Sep 17 00:00:00 2001 From: yossydev Date: Mon, 18 Nov 2024 23:02:50 +0900 Subject: [PATCH 1/7] commit --- .../proposal-safe-assignment-operator.mdx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 app/routes/posts/proposal-safe-assignment-operator.mdx diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx new file mode 100644 index 0000000..bba3a9d --- /dev/null +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -0,0 +1,18 @@ +--- +title: "try&catchの課題とproposal-safe-assignment-operator" +description: "a" +date: "2024/12/04" +updatedAt: "2024/12/04" +path: "proposal-safe-assignment-operator" +published: true +--- + +## Intro + +[proposal-safe-assignment-operator](https://github.com/arthurfiorette/proposal-safe-assignment-operator)というプロポーザルがあります（多分まだ提出されていないのでstage0ですらない）。 +JavaScriptにおけるエラーハンドリングといえば、try&catch / then&catchがあると思います。 +本プロポーザルはそれらについて触れつつ、解決方法が面白かったので紹介します。 + +## try&catchの課題 + +## Symbol.result From a8e624553d140929f9ad8198022a1659899bd499 Mon Sep 17 00:00:00 2001 From: yossydev Date: Tue, 19 Nov 2024 09:54:28 +0900 Subject: [PATCH 2/7] update --- .../proposal-safe-assignment-operator.mdx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx index bba3a9d..5aa1a29 100644 --- a/app/routes/posts/proposal-safe-assignment-operator.mdx +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -15,4 +15,68 @@ JavaScriptにおけるエラーハンドリングといえば、try&catch / then ## try&catchの課題 +例えば、以下のようなコードがあったします（プロポーザル内のコードを拝借） + +```ts +async function getData() { + const response = await fetch("https://api.example.com/data") + const json = await response.json() + return validationSchema.parse(json) +} +``` + +このコードだとエラーがキャッチされていないので、アプリケーションがクラッシュする可能性があります。 + ## Symbol.result + +キャッチし忘れによるクラッシュを防ぐため、以下のような新しい構文が提案されています。 + +```ts +async function getData() { + const [requestError, response] ?= await fetch( + "https://api.example.com/data" + ) + + if (requestError) { + handleRequestError(requestError) + return + } + + const [parseError, json] ?= await response.json() + + if (parseError) { + handleParseError(parseError) + return + } + + const [validationError, data] ?= validationSchema.parse(json) + + if (validationError) { + handleValidationError(validationError) + return + } + + return data +} +``` + +`?=`という演算子を新しく追加し、タプル型でエラー、レスポンスをそれぞれ受け取るようにします。 +このようにすることで、手続き的なエラーハンドリングが可能になるのと、キャッチ漏れによるアプリケーションのクラッシュも防げるようになります。 + +そしてこれをダウンタイムコンパイルを行うと、以下のようになります。 + +```ts +const [error, data] ?= expression + +if (error) { + // catch code +} else { + // try code +} +``` + +エラーだった場合の条件にしているだけのようです。 + +## 演算子の変更 + +## 筆者の感想 From 635979530cb523b1203835d921e3dde571c60eb6 Mon Sep 17 00:00:00 2001 From: yossydev Date: Tue, 19 Nov 2024 22:47:15 +0900 Subject: [PATCH 3/7] update --- .../proposal-safe-assignment-operator.mdx | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx index 5aa1a29..189efce 100644 --- a/app/routes/posts/proposal-safe-assignment-operator.mdx +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -4,7 +4,7 @@ description: "a" date: "2024/12/04" updatedAt: "2024/12/04" path: "proposal-safe-assignment-operator" -published: true +published: false --- ## Intro @@ -27,7 +27,7 @@ async function getData() { このコードだとエラーがキャッチされていないので、アプリケーションがクラッシュする可能性があります。 -## Symbol.result +## The Safe Assignment Operator (?=) キャッチし忘れによるクラッシュを防ぐため、以下のような新しい構文が提案されています。 @@ -77,6 +77,29 @@ if (error) { エラーだった場合の条件にしているだけのようです。 -## 演算子の変更 +## try-expression + +先ほど紹介した`?=`だと、他の`??`と似すぎているのもあり、直感的ではないなと、筆者はこれを見た時に思っていました。 +実際、似たようなコメントが挙げられていました。（[#issues/4#issuecomment-2292234700](https://github.com/arthurfiorette/proposal-safe-assignment-operator/)） + +なのでアンケートとして幾つかのパターンが提案されていましたが、以下のような書き方が人気みたいです。 + +```ts +const [error, data] = try mightFail(); +const [error, data] = try await mightFail(); +``` + +筆者としても、これだと直感的で良さそうだなと思いました。 ## 筆者の感想 + +正直筆者としては、ここまで発展したJavaScriptに新しいエラーハンドリング方式を入れることって現実的なのかなと、少し考えたりします。 +then/catchのメソッドチェーン方式が辛いから（確か）、手続き的にかけるasync/awaitが生まれ、そしてそれのエラーハンドリングとしてtry&catchが入ったはずで、catch漏れのクラッシュなんて今だとlintで防げるのでは、みたいなことも正直思ってしまいます。 + +というのが感想の一つですが、別に批判したいわけではないです。 +別の言語から影響を受けて、それを入れようとしてみる。そしてフィードバックを受け、入れなかった理由がはっきりしていれば、今後のためになるはずです。 + +筆者は別にJavaScriptが特段好きみたいなタイプでもないですが、こういう取り組みはとても大好きです。 +引き続き応援したいです。 + + From 6cee16bc431dc7e30266c6c820eafb67ce3ed8c3 Mon Sep 17 00:00:00 2001 From: yossydev Date: Tue, 19 Nov 2024 22:50:09 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E3=82=AA=E3=83=BC=E3=83=97?= =?UTF-8?q?=E3=83=B3=E3=81=AB=E3=81=97=E3=81=A6=E3=81=8A=E3=81=93=E3=81=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/routes/posts/proposal-safe-assignment-operator.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx index 189efce..bb58875 100644 --- a/app/routes/posts/proposal-safe-assignment-operator.mdx +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -4,7 +4,7 @@ description: "a" date: "2024/12/04" updatedAt: "2024/12/04" path: "proposal-safe-assignment-operator" -published: false +published: true --- ## Intro From 8288f26890222d930eaf1428006839a8496fd193 Mon Sep 17 00:00:00 2001 From: yossydev Date: Thu, 5 Dec 2024 23:05:20 +0900 Subject: [PATCH 5/7] update --- app/routes/posts/proposal-safe-assignment-operator.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx index bb58875..76fc06e 100644 --- a/app/routes/posts/proposal-safe-assignment-operator.mdx +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -1,8 +1,8 @@ --- title: "try&catchの課題とproposal-safe-assignment-operator" -description: "a" -date: "2024/12/04" -updatedAt: "2024/12/04" +description: "proposal-safe-assignment-operatorというプロポーザルがあります（多分まだ提出されていないのでstage0ですらない）。JavaScriptにおけるエラーハンドリングといえば、try&catch / then&catchがあると思います。本プロポーザルのそれらの課題に対しての解決方法が面白かったので紹介します。" +date: "2024/12/05" +updatedAt: "2024/12/05" path: "proposal-safe-assignment-operator" published: true --- @@ -100,6 +100,4 @@ then/catchのメソッドチェーン方式が辛いから（確か）、手続 別の言語から影響を受けて、それを入れようとしてみる。そしてフィードバックを受け、入れなかった理由がはっきりしていれば、今後のためになるはずです。 筆者は別にJavaScriptが特段好きみたいなタイプでもないですが、こういう取り組みはとても大好きです。 -引き続き応援したいです。 - - +引き続き応援したいです。 \ No newline at end of file From b7e69fb5fbc18c8629663d3ce5b50da98bd7b054 Mon Sep 17 00:00:00 2001 From: yossydev Date: Thu, 5 Dec 2024 23:23:45 +0900 Subject: [PATCH 6/7] update --- .../posts/proposal-safe-assignment-operator.mdx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx index 76fc06e..86fd4ce 100644 --- a/app/routes/posts/proposal-safe-assignment-operator.mdx +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -1,5 +1,5 @@ --- -title: "try&catchの課題とproposal-safe-assignment-operator" +title: "proposal-safe-assignment-operatgorでJSに新しいエラーハンドリングが入るかもしれない" description: "proposal-safe-assignment-operatorというプロポーザルがあります（多分まだ提出されていないのでstage0ですらない）。JavaScriptにおけるエラーハンドリングといえば、try&catch / then&catchがあると思います。本プロポーザルのそれらの課題に対しての解決方法が面白かったので紹介します。" date: "2024/12/05" updatedAt: "2024/12/05" @@ -7,11 +7,13 @@ path: "proposal-safe-assignment-operator" published: true --- +[2024年 ユウトの一人アドベントカレンダー](https://adventar.org/calendars/9980)の5日目の記事です。 + ## Intro [proposal-safe-assignment-operator](https://github.com/arthurfiorette/proposal-safe-assignment-operator)というプロポーザルがあります（多分まだ提出されていないのでstage0ですらない）。 JavaScriptにおけるエラーハンドリングといえば、try&catch / then&catchがあると思います。 -本プロポーザルはそれらについて触れつつ、解決方法が面白かったので紹介します。 +本プロポーザルのそれらの課題に対しての解決方法が面白かったので紹介します。 ## try&catchの課題 @@ -60,14 +62,16 @@ async function getData() { } ``` -`?=`という演算子を新しく追加し、タプル型でエラー、レスポンスをそれぞれ受け取るようにします。 -このようにすることで、手続き的なエラーハンドリングが可能になるのと、キャッチ漏れによるアプリケーションのクラッシュも防げるようになります。 +`?=`という演算子を新しく追加し、エラーとレスポンスを配列として返しています。 +そしてerrorでエラー処理の記述が簡潔になり、キャッチ漏れを減らすことでアプリケーションのクラッシュリスクを低減できます。 + +本ブログの公開前に少し気になったんですが、errorの時に早期returnするようにしないとdataはnullableになるのか。みたいなのは議論が盛り上がってそうでした。（[https://github.com/arthurfiorette/proposal-safe-assignment-operator/issues/30](https://github.com/arthurfiorette/proposal-safe-assignment-operator/issues/30)） -そしてこれをダウンタイムコンパイルを行うと、以下のようになります。 +そしてこの構文は、コンパイラによって次のような形に変換されます。 ```ts const [error, data] ?= expression - +// ↕︎ if (error) { // catch code } else { From 437393457cca44f61ff7daaf32c610cb23dc6226 Mon Sep 17 00:00:00 2001 From: yossydev Date: Thu, 5 Dec 2024 23:27:57 +0900 Subject: [PATCH 7/7] update --- app/routes/posts/proposal-safe-assignment-operator.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/posts/proposal-safe-assignment-operator.mdx b/app/routes/posts/proposal-safe-assignment-operator.mdx index 86fd4ce..6c43fd7 100644 --- a/app/routes/posts/proposal-safe-assignment-operator.mdx +++ b/app/routes/posts/proposal-safe-assignment-operator.mdx @@ -1,5 +1,5 @@ --- -title: "proposal-safe-assignment-operatgorでJSに新しいエラーハンドリングが入るかもしれない" +title: "proposal-safe-assignment-operatorでJSに新しいエラーハンドリングが入るかもしれない" description: "proposal-safe-assignment-operatorというプロポーザルがあります（多分まだ提出されていないのでstage0ですらない）。JavaScriptにおけるエラーハンドリングといえば、try&catch / then&catchがあると思います。本プロポーザルのそれらの課題に対しての解決方法が面白かったので紹介します。" date: "2024/12/05" updatedAt: "2024/12/05"