From 5fed8fdccaf46703b9294cce202e3bea70c6c5f4 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 7 Mar 2024 22:36:02 +0900 Subject: [PATCH 1/4] init --- package-lock.json | 12 +++++++++++- package.json | 3 ++- what-is-throw/package.json | 15 +++++++++++++++ what-is-throw/slides.md | 16 ++++++++++++++++ what-is-throw/styles/index.ts | 2 ++ what-is-throw/styles/mod.css | 0 6 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 what-is-throw/package.json create mode 100644 what-is-throw/slides.md create mode 100644 what-is-throw/styles/index.ts create mode 100644 what-is-throw/styles/mod.css diff --git a/package-lock.json b/package-lock.json index 52261c4..aa6da86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "how-to-keep-learning", "introduction-functional-programming", "how-to-tech-writing", - "howto-use-react-keys" + "howto-use-react-keys", + "what-is-throw" ], "dependencies": { "@iconify-json/mdi": "^1.1.64", @@ -1699,6 +1700,10 @@ "resolved": "reuse", "link": true }, + "node_modules/@slide/what-is-throw": { + "resolved": "what-is-throw", + "link": true + }, "node_modules/@slidev/cli": { "version": "0.47.5", "resolved": "https://registry.npmjs.org/@slidev/cli/-/cli-0.47.5.tgz", @@ -10220,6 +10225,11 @@ "version": "1.0.0", "license": "ISC", "devDependencies": {} + }, + "what-is-throw": { + "version": "1.0.0", + "license": "MIT", + "devDependencies": {} } } } diff --git a/package.json b/package.json index 0801f33..91d8c7d 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "how-to-keep-learning", "introduction-functional-programming", "how-to-tech-writing", - "howto-use-react-keys" + "howto-use-react-keys", + "what-is-throw" ], "devDependencies": { "@slidev/cli": "^0.47.5", diff --git a/what-is-throw/package.json b/what-is-throw/package.json new file mode 100644 index 0000000..e3d5e8c --- /dev/null +++ b/what-is-throw/package.json @@ -0,0 +1,15 @@ +{ + "name": "@slide/what-is-throw", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "slidev build", + "export": "slidev export", + "dev": "slidev" + }, + "keywords": [], + "author": "ken7253 ", + "license": "MIT" +} diff --git a/what-is-throw/slides.md b/what-is-throw/slides.md new file mode 100644 index 0000000..410e9f4 --- /dev/null +++ b/what-is-throw/slides.md @@ -0,0 +1,16 @@ +--- +theme: default +titleTemplate: '%s - ken7253' +colorSchema: 'dark' +fonts: + sans: 'M PLUS 2' + mono: 'M PLUS 1 Code' +--- + +# slide title + +--- +src: "../reuse/me.md" +--- + +--- diff --git a/what-is-throw/styles/index.ts b/what-is-throw/styles/index.ts new file mode 100644 index 0000000..f1c9f2c --- /dev/null +++ b/what-is-throw/styles/index.ts @@ -0,0 +1,2 @@ +import "./mod.css" +import "@slide/reuse/styles"; \ No newline at end of file diff --git a/what-is-throw/styles/mod.css b/what-is-throw/styles/mod.css new file mode 100644 index 0000000..e69de29 From 77c67e2c328ded9957faf1dea544a82b6d59f611 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 7 Mar 2024 23:26:46 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=83=96?= =?UTF-8?q?=E3=83=AD=E3=83=83=E3=82=AF=E3=81=AE=E8=83=8C=E6=99=AF=E8=89=B2?= =?UTF-8?q?=E3=81=8C=E3=81=8A=E3=81=8B=E3=81=97=E3=81=84=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- reuse/styles/base.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/reuse/styles/base.css b/reuse/styles/base.css index be51e5d..046d2e9 100644 --- a/reuse/styles/base.css +++ b/reuse/styles/base.css @@ -137,6 +137,11 @@ deepl-inline-trigger { font-weight: 600; } +#app code[class*="language-"], +#app pre[class*="language-"] { + background-color: revert; +} + /* strong */ #app strong { font-size: 1.25em; From f67e0626b0d72c78a4590b456292dcaa64521e29 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 7 Mar 2024 23:41:22 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E5=89=8D=E6=8F=90=E3=81=AE=E5=AE=9A?= =?UTF-8?q?=E7=BE=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- what-is-throw/slides.md | 80 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/what-is-throw/slides.md b/what-is-throw/slides.md index 410e9f4..de5a3bd 100644 --- a/what-is-throw/slides.md +++ b/what-is-throw/slides.md @@ -7,10 +7,88 @@ fonts: mono: 'M PLUS 1 Code' --- -# slide title +# 「throw」とはなにか --- src: "../reuse/me.md" --- --- + +## よくある使い方 + +想定していない値を受け取った場合などに例外を投げるために利用される。 + +```ts +/** 引数をすべて足し合わせる関数 */ +export const sum = (...args: number[]) => { + if (args.some(num => (isFinite(num)))) { + // NaNやInfinityが引数に含まれていたら例外を投げる + throw new Error('加算できない数値が含まれています'); + } + + // 加算できる数値であることを確認してからすべての数値を足し合わせる + return args.reduce((acc, val) => acc + val, 0); +} +``` + +--- + +## よくある使い方 + +想定していない値を受け取った場合などに例外を投げるために利用される。 + +```ts{4-5} +/** 引数をすべて足し合わせる関数 */ +export const sum = (...args: number[]) => { + if (args.some(num => (isFinite(num)))) { + // NaNやInfinityが引数に含まれていたら例外を投げる + throw new Error('加算できない数値が含まれています'); + } + + // 加算できる数値であることを確認してからすべての数値を足し合わせる + return args.reduce((acc, val) => acc + val, 0); +} +``` + +--- + +## 関数を利用する側 + +関数の呼び出し側では`try...catch`を使うことで例外を受け取って安全に処理ができる。 + +```ts +import { sum } from "./util/math"; +import { userInput } from "./ui/input"; + +userInput.onChange((inputList: number[]) => { + // ユーザーの入力がある度に履歴を含めた配列を受け取る + try { + const result = sum(inputList); + console.log(result); + } catch (err) { + console.log(err); + } +}); +``` + +--- + +## 関数を利用する側 + +関数の呼び出し側では`try...catch`を使うことで例外を受け取って安全に処理ができる。 + +```ts{9-11} +import { sum } from "./util/math"; +import { userInput } from "./ui/input"; + +userInput.onChange((inputList: number[]) => { + // ユーザーの入力がある度に履歴を含めた配列を受け取る + try { + const result = sum(inputList); + console.log(result); + } catch (err) { + console.log(err); + } +}); +``` From c3154325207d032cd5bf83475a510b6eecdc57fb Mon Sep 17 00:00:00 2001 From: ken7253 Date: Fri, 8 Mar 2024 00:53:16 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Tips=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E4=BD=9C=E6=88=90=E3=81=A8=E9=81=A9?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- what-is-throw/components/Tips.vue | 46 ++++++++++++++++++++++ what-is-throw/slides.md | 64 +++++++++++++++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 what-is-throw/components/Tips.vue diff --git a/what-is-throw/components/Tips.vue b/what-is-throw/components/Tips.vue new file mode 100644 index 0000000..2dfa8a4 --- /dev/null +++ b/what-is-throw/components/Tips.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/what-is-throw/slides.md b/what-is-throw/slides.md index de5a3bd..5ba76df 100644 --- a/what-is-throw/slides.md +++ b/what-is-throw/slides.md @@ -92,3 +92,67 @@ userInput.onChange((inputList: number[]) => { } }); ``` + +--- +layout: center +--- + +## 今回はそんな`throw`の話 + +--- + +## throwとはなにか + +MDNで調べてみるとこのような説明がある。 + +> `throw`文は、ユーザー定義の例外を発生させます。現在の関数の実行を停止し（`throw`の後の文は実行されません）、コールスタック内の最初の`catch`ブロックに制御を移します。呼び出し元の関数に`catch`ブロックが存在しない場合は、プログラムが終了します。 + +[throw - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/throw)より引用 + +おそらくこれを読んで分かるのはもともと例外を知っている人だと思う。 + +なので一度意味を整理してみる。 + +--- + +## つまりどういうことか + +`throw`とは例外を発生させるための構文 + +### 例外とはなにか + +- 関数の実行を停止する +- `catch`されるまでコールスタックをたどる +- 任意の値を`catch`節に渡す + +--- + +## 関数の実行を停止する + +基本的には`return`と同じ性質だと思えばいい + +```ts +/** 引数をすべて足し合わせる関数 */ +export const sum = (...args: number[]) => { + if (args.some(num => (isFinite(num)))) { + // NaNやInfinityが引数に含まれていたら例外を投げる + throw new Error('加算できない数値が含まれています'); + } + + // 加算できる数値であることを確認してからすべての数値を足し合わせる + return args.reduce((acc, val) => acc + val, 0); +} +``` + +この関数の中で`throw`に到達した場合はそれ以降の処理は実行されない。 + +つまりこの関数の場合、値を返すことはなく例外を投げる。 + +--- + +## catch されるまでコールスタックをたどる + + +コールスタック ≒ 関数の呼び出し順の記録
+関数a()が関数b()を呼んでその中でさらに関数c()を呼んで… +