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/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;
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/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..5ba76df
--- /dev/null
+++ b/what-is-throw/slides.md
@@ -0,0 +1,158 @@
+---
+theme: default
+titleTemplate: '%s - ken7253'
+colorSchema: 'dark'
+fonts:
+ sans: 'M PLUS 2'
+ mono: 'M PLUS 1 Code'
+---
+
+# 「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);
+ }
+});
+```
+
+---
+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()を呼んで…
+
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