プログラマー VTuber 衣亥栖ティオのちょっとした話

Youtubeに投稿したプログラミング学習動画の補足説明をするためのブログです。

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

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


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

以下が今回実装したソースコードです。

関数を利用したリファクタリング

動画中ではリファクタリングに関数を利用しました。 関数は重複した処理をまとめることもできますし、"getIdTitleInMemoList" のように何をしているのか分かりやすい名前を付けることもできます。 とても便利な機能ですね。 今まであまり使ってきませんでしたが、今後の動画では関数をたくさん使うので、今のうちに復習しておきましょう。

function getIdTitleInMemoList(memoId) {
  return document.getElementById("id-title-in-list-" + memoId)
}

リファクタリング中の修正ミスについて

今回の動画ではリファクタリングミスによってメモ帳アプリが動かなくなってしまいました。 これは "id-title-in-list-" という文字列を検索して、何も考えずに関数に置き換えたからです。 ちゃんとリファクタリング候補の実装を理解してからリファクタリングしないとダメですね・・・。