https://rakus.connpass.com/event/183881/ での発表資料です。
リポジトリはこちら https://github.com/tooppoo/ceiocs
本文で言及している、"do" expression の proposalはこちら https://github.com/tc39/proposal-do-expressions
javascriptでも条件式を使いたい話2020/08/26 フロントエンドLT会 vol.1 2020夏祭り#frontendlt1
View Slide
発表者@Philomagi● WEB系プログラマ● 自称フロントエンド寄り○ 最近のマイブームは SelfとSmalltalk○ vanila jsも久しぶりにちょっと触りたい● 設計の話とかが好きです○ DDDとかクリーンアーキテクチャとか○ 最近のSOLID原則の推しはI2
javascriptでも条件式を使いたい話3
条件文と条件式4
プログラミングにおける文と式5● 文○ コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを表すものである。■ wikipedia 文 (プログラミング) より○ 一般に、文は値を返さない● 式○ プログラミングにおいて、言語によって定められた優先順位や結びつきの規定に則って評価される値、変数、演算子、関数などの組み合わせである。数学における式と同様、式は評価された値を持つ。■ wikipedia 式 (プログラミング) より○ 式は値を返す
プログラミングにおける文と式6● 文○ コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを表すものである。■ wikipedia 文 (プログラミング) より○ 一般に、文は値を返さない● 式○ プログラミングにおいて、言語によって定められた優先順位や結びつきの規定に則って評価される値、変数、演算子、関数などの組み合わせである。数学における式と同様、式は評価された値を持つ。■ wikipedia 式 (プログラミング) より○ 式は値を返す
プログラミングにおける文と式7● 文○ コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを表すものである。■ wikipedia 文 (プログラミング) より○ 一般に、文は値を返さない● 式○ プログラミングにおいて、（中略）値、変数、演算子、関数などの組み合わせである。数学における式と同様、式は評価された値を持つ。■ wikipedia 式 (プログラミング) より○ 式は値を返す
条件文と条件式● 条件文○ ifやswitchは、値を返さない手続き○ 変数に入れる値を条件によって変更したい時にちょっと面倒■ 再代入■ メソッド分割○ javascript、Java、PHP等● 条件式○ ifやswitchは、値を返す式○ 条件分岐の結果を、直接変数に代入できる○ Ruby、Scala等8
条件文と条件式● 条件文○ ifやswitchは、値を返さない手続き○ 変数に入れる値を条件によって変更したい時にちょっと面倒■ 再代入■ メソッド分割○ javascript、Java、PHP等● 条件式○ ifやswitchは、値を返す式○ 条件分岐の結果を、直接変数に代入できる○ Ruby、Scala等9
条件文と条件式● 条件文○ ifやswitchは、値を返さない手続き○ 変数に入れる値を条件によって変更したい時にちょっと面倒■ 再代入■ メソッド分割○ javascript、Java、PHP等● 条件式○ ifやswitchは、値を返す式○ 条件分岐の結果を、直接変数に代入できる○ Ruby、Scala等10
コードの比較11条件文 (javascript) 条件式 (Ruby)
条件式のメリット12● コードを単純化しやすい○ 「一時変数を用意して再代入して ……」が不要● 「条件をメソッドで分ければreturnできるじゃん」○ それはその通り○ 事前処理でのちょっとした値の選択とか、いちいちメソッドに分割するのが煩わしい場合もある○ 見かけ上のコード量の多少によってではなく、意味の表現であったり、抽象度の統一といった基準に基づいてメソッドの分割は行いたい、という場合もある
javascriptで条件式を使いたい13
javascriptで条件式を使いたい14● javascriptのif/switchは条件文● 言語仕様として、javascriptでは条件式をサポートしていない
javascriptで条件式を使いたい15● javascriptのif/switchは条件文● 言語仕様として、javascriptでは条件式をサポートしていない● ＼(^ o ^)／
javascriptで条件式を使いたい16● javascriptのif/switchは条件文● 言語仕様として、javascriptでは条件式をサポートしていない● ＼(^ o ^)／なので、ライブラリとして作ってみたhttps://www.npmjs.com/package/ceiocs
条件式ライブラリ ceiocs17
条件式ライブラリ ceiocs18
条件式ライブラリ ceiocs19● 100% Typescriptで実装● 厳格な型定義
条件式ライブラリ ceiocs20● 遅延評価対応● 必要になるまで実行しない
条件式ライブラリ ceiocs21● 非同期処理にも対応● 遅延評価との組み合わせも可能● 実装の都合上、 async プロパティの経由が必要● asyncを挟まずPromiseを渡すとコンパイルエラー
まとめ22● 条件文と条件式の違い○ 文は値を返さない、式は値を返す○ 条件式が使えると、細かいところでコードが簡略化できて便利● javascriptのif/switchは条件文○ なので、条件式の恩恵を得られない● javascriptで条件式を使うために、ライブラリ化してみた○ Typescript対応○ 遅延評価対応○ （若干IFが微妙だけど）非同期にも対応■ ちゃんとしたルートで呼び出さないとコンパイルエラー
“do” expression23
24https://github.com/tc39/proposal-do-expressions
25https://github.com/tc39/proposal-do-expressions
26ECMAScript proposal: do expressions● do式を使うことで、条件式っぽいことができるようになる（かも）● 「これリリースされたら、ceiocs要らなくね」○ 主張点はなくもないが ……■ 型定義が厳密■ 遅延評価が効く■ elseを強制するので、漏れが無い■ (switch相当のmatchでは) == 以外の比較方法を設定できる○ でも、組み込みの言語機能で条件式を擬似再現できるなら、それで十分感も強い● とは言え2年前からstage1で止まってるので、リリースはまだ先になりそう（それまでの間なら、需要は無くも無い……？）
ご清聴ありがとうございました27
tooppoo
deanohume
chriscoyier
colly
marcelosomers
jlugia
rocio
jennybc
jakevdp
hannesfritz
bkeepers
mza