プログラマーへの道 #99 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。 動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード

今回の実装は以下です。
https://github.com/tio-iis/memo-server/pull/25/files

現時点でのソースコード全体は以下です。
https://github.com/tio-iis/memo-server/tree/b29b494ac4413f6bd5563a04e2bc561ffdcc9754

HTML関連の処理を関数に切り出す

今回の実装では createHTML() という関数にHTML関連の要素を作成する処理を切り出しました。
https://github.com/tio-iis/memo-server/pull/25/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R300

このリファクタリングによってメモを登録する時とバックエンドサーバから取得したメモを表示するときのHTML作成を共通化することができました。 リファクタリングはこのように重複する実装を共通化することで、実装をスッキリさせることができます。 実装を共通化すると、実装を修正する際に複数箇所を修正する必要がなくなるので、修正自体が楽になったり、修正漏れを防ぐことができます。 実装の共通化は積極的に取り組みましょう。

静的なメソッドと Static Factory Method

今回はバックエンドサーバから取得したメモを表示するときに静的なメソッド（Static Method）を利用しています。 実装は以下です。static というキーワードが付いているので分かりやすいですね。
https://github.com/tio-iis/memo-server/pull/25/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R327

この静的なメソッドはクラスに実装するメソッドとは異なる性質を持ったものです。 詳しい説明は以下にありますが、"クラスをオブジェクト化（newする）ことなく、呼び出せるメソッド" といったところでしょうか。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/static

今回のようにオブジェクトを生成する際に静的なメソッドを利用する実装方法を "Static Factory Method" と呼びます。
https://qiita.com/hatt0519/items/92a91ead02b0724064ee

リファクタリングが終わったタイミングで改めて説明しようと思うので、今は気にしてくても大丈夫です。