Upgrade to Pro — share decks privately, control downloads, hide ads and more …

javascriptでも条件式を使いたい話 / want to use conditional expression in javascript

philomagi
August 26, 2020
5.8k

javascriptでも条件式を使いたい話 / want to use conditional expression in javascript

https://rakus.connpass.com/event/183881/ での発表資料です。

リポジトリはこちら
https://github.com/tooppoo/ceiocs

本文で言及している、"do" expression の proposalはこちら
https://github.com/tc39/proposal-do-expressions

philomagi

August 26, 2020
Tweet

More Decks by philomagi

Transcript

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

    View full-size slide

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

    View full-size slide

  3. javascriptでも
    条件式を使いたい話
    3

    View full-size slide

  4. 条件文と条件式
    4

    View full-size slide

  5. プログラミングにおける文と式
    5
    ● 文
    ○ コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを
    表すものである。
    ■ wikipedia 文 (プログラミング) より
    ○ 一般に、文は値を返さない
    ● 式
    ○ プログラミングにおいて、言語によって定められた優先順位や結びつきの規定に則って評価さ
    れる値、変数、演算子、関数などの組み合わせである。数学における式と同様、式は評価され
    た値を持つ。
    ■ wikipedia 式 (プログラミング) より
    ○ 式は値を返す

    View full-size slide

  6. プログラミングにおける文と式
    6
    ● 文
    ○ コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを
    表すものである。
    ■ wikipedia 文 (プログラミング) より
    ○ 一般に、文は値を返さない
    ● 式
    ○ プログラミングにおいて、言語によって定められた優先順位や結びつきの規定に則って評価さ
    れる値、変数、演算子、関数などの組み合わせである。数学における式と同様、式は評価され
    た値を持つ。
    ■ wikipedia 式 (プログラミング) より
    ○ 式は値を返す

    View full-size slide

  7. プログラミングにおける文と式
    7
    ● 文
    ○ コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを
    表すものである。
    ■ wikipedia 文 (プログラミング) より
    ○ 一般に、文は値を返さない
    ● 式
    ○ プログラミングにおいて、(中略)値、変数、演算子、関数などの組み合わせである。数学におけ
    る式と同様、式は評価された値を持つ。
    ■ wikipedia 式 (プログラミング) より
    ○ 式は値を返す

    View full-size slide

  8. 条件文と条件式
    ● 条件文
    ○ ifやswitchは、値を返さない手続き
    ○ 変数に入れる値を条件によって変更したい時にちょっと面倒
    ■ 再代入
    ■ メソッド分割
    ○ javascript、Java、PHP等
    ● 条件式
    ○ ifやswitchは、値を返す式
    ○ 条件分岐の結果を、直接変数に代入できる
    ○ Ruby、Scala等
    8

    View full-size slide

  9. 条件文と条件式
    ● 条件文
    ○ ifやswitchは、値を返さない手続き
    ○ 変数に入れる値を条件によって変更したい時にちょっと面倒
    ■ 再代入
    ■ メソッド分割
    ○ javascript、Java、PHP等
    ● 条件式
    ○ ifやswitchは、値を返す式
    ○ 条件分岐の結果を、直接変数に代入できる
    ○ Ruby、Scala等
    9

    View full-size slide

  10. 条件文と条件式
    ● 条件文
    ○ ifやswitchは、値を返さない手続き
    ○ 変数に入れる値を条件によって変更したい時にちょっと面倒
    ■ 再代入
    ■ メソッド分割
    ○ javascript、Java、PHP等
    ● 条件式
    ○ ifやswitchは、値を返す式
    ○ 条件分岐の結果を、直接変数に代入できる
    ○ Ruby、Scala等
    10

    View full-size slide

  11. コードの比較
    11
    条件文 (javascript) 条件式 (Ruby)

    View full-size slide

  12. 条件式のメリット
    12
    ● コードを単純化しやすい
    ○ 「一時変数を用意して再代入して ……」が不要
    ● 「条件をメソッドで分ければreturnできるじゃん」
    ○ それはその通り
    ○ 事前処理でのちょっとした値の選択とか、いちいちメソッドに分割するのが煩わしい場合もある
    ○ 見かけ上のコード量の多少によってではなく、意味の表現であったり、抽象度の統一といった基
    準に基づいてメソッドの分割は行いたい、という場合もある

    View full-size slide

  13. javascriptで条件式を使いたい
    13

    View full-size slide

  14. javascriptで条件式を使いたい
    14
    ● javascriptのif/switchは条件文
    ● 言語仕様として、javascriptでは条件式をサポートしていない

    View full-size slide

  15. javascriptで条件式を使いたい
    15
    ● javascriptのif/switchは条件文
    ● 言語仕様として、javascriptでは条件式をサポートしていない
    ● \(^ o ^)/

    View full-size slide

  16. javascriptで条件式を使いたい
    16
    ● javascriptのif/switchは条件文
    ● 言語仕様として、javascriptでは条件式をサポートしていない
    ● \(^ o ^)/
    なので、ライブラリとして作ってみた
    https://www.npmjs.com/package/ceiocs

    View full-size slide

  17. 条件式ライブラリ ceiocs
    17

    View full-size slide

  18. 条件式ライブラリ ceiocs
    18

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. “do” expression
    23

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide