00:06
神経質やせ男です。今日は、料理レシピデータベースアプリのファイル分割で起きた失敗談をお話しします。
前回、Pythonで作っていたコードを、Python、JavaScript、HTML、CSS、この4ファイル構成に分割したという話をしました。
今回はその時に実際にはまったポイントです。
まず最初に気づいたのが、HTMLとJavaScriptを分割する時のボタン処理。
Pythonの中にHTMLを書いていた時は、ボタンにオンクリック括弧、これを書くだけで処理が動いていました。
でも、JavaScriptを別ファイルに分割すると、ドキュメント、アット、イベントリスナー、これを使ってイベント処理を仲介する形に変える必要がありました。
ここまではまだ順調だったのですが、問題は次です。
今回のレシピアプリ、ボタンが4つあります。
そこで自分はこう考えました。条件分岐すれば一つの関数で処理できるのでは。
発想としては悪くなかったのですが、ここでミスをします。
条件分岐にifとelseを使ったのです。
ところがこれがうまく動かない。原因はシンプルでした。
elseは条件に合わないものを全て飛ばしてしまう。つまり途中で処理が終わる。
正しくはif分を4つ並べる。elseは使わない。
こうすると一つの条件に当てはまらなくても次のif分が実行されるので、どこかで正しい処理に到達します。
これが一つ目の失敗でした。
そして二つ目。オンクリックで読む関数に引数があるケース。
これは箇所分時間タイマーでは出てこなかった問題でした。
引数なしの関数と同じ書き方で大丈夫だろうと思ってたらこれが動かない。
そこでAIに聞いたところ、答えはシンプルでした。
アロー関数を使う。つまり引数付きの関数はそのまま渡すのではなく、アロー関数でラップして呼び出す形にする。
正直ここは完全に知らなかった知識。いい勉強になりました。
ファイル分割って慣れれば簡単だろうと思っていたんですが、実際にやるといろんな思考の罠があります。
深く理解している人と初心者の差ってこういうところに出るんだろうなぁと感じました。
自分は毎日30分から45分ぐらいプログラムを学習しています。
なので、エラーに時間がかかるとノートの進捗としては何も進んでいないように見えてしまうんですよね。
でも実際はエラーの原因を探す時間、これがかなり大きい。
なのでこれからは何に時間がかかったのかもちゃんと進捗として書いていこうと思っています。
ということで今回はレシピアプリのファイル分割での失敗談をお話しました。
次回はJSの変数加工で関数をシンプル化についてお話しする予定です。
03:01
ご静聴ありがとうございました。