Open6

JSとTSの小ネタメモ

DaikiSuyamaDaikiSuyama

Vue3 * TSで、propsのtypeを指定するときにTSの型を指定できないと困る時がある
その時は、type: JSの型 as PropType<TSの型>とすればOK


String as PropType<'a'|'b'|'c'>
Object as PropType<何らかのinterface等>

DaikiSuyamaDaikiSuyama

JSの関数型と言うのが気になって調べた、だいたい合っている気がする

JavaScriptが関数型と言うのを聞いて調べたが、関数型は責務を関数内にとどめて行く感じか。
また、関数による作用は入力と出力のみの関係を考え、入力以外の部分への副作用が出ないように関数で閉じるようなプログラミングスタイル。
関数で閉じているので、テスタブルになる。
逆に、オブジェクト指向の場合は状態をオブジェクトで閉じて、メソッドにより作用を実装するようなプログラミングスタイル。
直感的な理解のしやすさがある。

また、多くのUIフレームワークにおいては宣言的UIを採用することで、宣言部(表示)と状態とを分離できる。
宣言部についてはオブジェクト指向を採用するが、状態部においては関数型的なアプローチとオブジェクト指向的なアプローチのどちらもとることができる。
(宣言部においてはコンポーネントを組み合わせて構築するという記述がなされるので、オブジェクト指向しか取り得ない。)
関数型の場合は上記のように作用を閉じることができるのがメリットとなるが、オブジェクト指向に慣れている人にとってはそのメリットが理解しにくい。
現状はオブジェクト指向を採用した方が早いが、関数型的なアプローチも取れると幅が広がりそう。

DaikiSuyamaDaikiSuyama

補足

関数型は副作用がない書き方が良いとされているものの、オブジェクト指向に慣れている人はそれに気づかず副作用があるようなコードを書いてしまい、関数型の良さを享受できないという意図。

オブジェクト指向はDDDなどの責任境界がはっきりするような設計やアーキテクチャ等が確立されているイメージだが、関数型でそのようなものがあるのか??(ここは勉強不足ではありそう)

あとは、関数型だとなかなか柔軟性がなさそう

自分の場合、エンティティ内(DDDの文脈)での更新以外は基本的に責務を分割して関数型のように(高階関数をよく使う、副作用を無くす)書いているので、オブジェクト指向の言語で関数型を利用している感じ。

自分の好みとしては、静的なクラスベースのオブジェクト指向の言語で関数型っぽく書く、だけど、これが正解な気がしている

DaikiSuyamaDaikiSuyama

async/await

asyncはPromiseを返す、普通のものでもrapして返す

awaitはasyncの関数内で使える(というかasyncでない関数内で使う必要もないじゃん)

awaitはasyncに対して使える

↓これ結構わかりやすい

https://ja.javascript.info/async-await