javascriptでも 条件式を使いたい話 2020/08/26 フロントエンドLT会 vol.1 2020夏祭り #frontendlt 1

発表者 @Philomagi ● WEB系プログラマ ● 自称フロントエンド寄り ○ 最近のマイブームは SelfとSmalltalk ○ vanila jsも久しぶりにちょっと触りたい ● 設計の話とかが好きです ○ DDDとかクリーンアーキテクチャとか ○ 最近のSOLID原則の推しはI 2

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

条件式ライブラリ ceiocs 17

条件式ライブラリ ceiocs 18

条件式ライブラリ ceiocs 19 ● 100% Typescriptで実装 ● 厳格な型定義

条件式ライブラリ ceiocs 20 ● 遅延評価対応 ● 必要になるまで実行しない

条件式ライブラリ ceiocs 21 ● 非同期処理にも対応 ● 遅延評価との組み合わせも可能 ● 実装の都合上、 async プロパティの経 由が必要 ● asyncを挟まずPromiseを渡すとコンパ イルエラー

まとめ 22 ● 条件文と条件式の違い ○ 文は値を返さない、式は値を返す ○ 条件式が使えると、細かいところでコードが簡略化できて便利 ● javascriptのif/switchは条件文 ○ なので、条件式の恩恵を得られない ● javascriptで条件式を使うために、ライブラリ化してみた ○ Typescript対応 ○ 遅延評価対応 ○ （若干IFが微妙だけど）非同期にも対応 ■ ちゃんとしたルートで呼び出さないとコンパイルエラー

“do” expression 23

24 https://github.com/tc39/proposal-do-expressions

25 https://github.com/tc39/proposal-do-expressions

26 ECMAScript proposal: do expressions ● do式を使うことで、条件式っぽいことができるようになる（かも） ● 「これリリースされたら、ceiocs要らなくね」 ○ 主張点はなくもないが …… ■ 型定義が厳密 ■ 遅延評価が効く ■ elseを強制するので、漏れが無い ■ (switch相当のmatchでは) == 以外の比較方法を設定できる ○ でも、組み込みの言語機能で条件式を擬似再現できるなら、それで十分感も強い ● とは言え2年前からstage1で止まってるので、リリースはまだ先になりそう（それ までの間なら、需要は無くも無い……？）

ご清聴ありがとうございました 27