タグ

ブックマーク / qiita.com/Terao-Takumi (2)

  • javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 後編 - Qiita

    前編(こちらを読まなくても問題ないです) サンプル See the Pen 漢気割り勘ツール by terao takumi (@teraotakumi) on CodePen. 金額と参加者を入力し、計算モードを選んで「計算する」をクリックすると、アラートウィンドウが表示されてそれぞれの参加者がいくら支払うのか表示されるようになっています。これを、バニラjavascriptを使ってオブジェクト指向で書いてみた、というのがこの記事の趣旨になります。 登場オブジェクト まずは全体感を理解するため、ざっくり登場オブジェクトとその役割について見ていきます。 ・漢気計算機(OtokogiCalculator) 入力された内容を元に計算を行うオブジェクト。constructorで支払金額と参加者名簿のインスタンスをもらう。 ・支払金額(PaymentAmmount) 入力された支払金額を司る。 ・参

    javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 後編 - Qiita
    kaido
    kaido 2023/04/01
  • javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 前編 - Qiita

    javascriptはオブジェクト指向言語なのに、手続き型で書いてしまいがち... javascriptはオブジェクト指向言語であるものの、ちょっと特殊な言語です。JavaC++、C#、Rubyといったクラスベースの言語とは違い、プロトタイプベースのオブジェクト指向言語であるというのがオブジェクト指向で書きづらい要因になっているように思います。 クラスベースの言語であれば、まずはともあれクラスを作ってインスタンス化する...という一連の流れが自然と書ける一方で、javascriptでは「DOMを操作する」という任務を任されることが多いために、要素を取得して、計算して、要素を書き換えて、ということを手続き的に書いてしまう。 そして、記述量が多くなればなるほど待ち受けるのは、、、 「このjsはどこで何をやってるんだ...」 「同じようなコードがいろんなところでコピペされてる...」 「この処

    javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 前編 - Qiita
    kaido
    kaido 2022/12/11
  • 1