00:06
神経質やせ男です。今回は、料理レシピ、データベースアプリのソースコードの整理についてお話しします。
前回は、PiWebViewで作り直したレシピアプリの画面を紹介しました。 今回はその中身、つまりプログラムの構成です。
まず、このアプリ、データベースと名前はついていますが、保存形式はJSONファイルです。 将来的にはSQLiteの導入も考えていますが、まずはシンプルにJSONからスタートしています。
さて、今回のテーマはファイル分割。 AIにプログラムを作らせるとよくあるのが、Pythonの1ファイルに全部まとめる構成です。
つまり、Python、HTML、CSS、JavaScript、これらが全部1つのPythonファイルに入る。 これだと正直保守性がかなり悪い。
ということで、今回も例のごとく4ファイル構成に分割しました。 構成はまずこんな感じです。
まず、Pythonファイル、これはアプリの本体ですね。 JSONデータの保存、画像ファイルのコピー、そしてJavaScriptとの連携。
こういった処理を担当しています。 次にHTMLファイル、これは画面のレイアウト。
レシピ登録画面と登録済みレシピを表示する画面。 この2つをナビゲーションで切り替えるシンプルな構造です。
3つ目がJavaScript、ここでは画像選択、レシピ保存、画面切り替え、レシピ一覧表示、こういったユーザー操作を処理しています。
そして最後はCSS、見た目のデザインですね。 カード形式のレシピ表示やフォームのレイアウトなどをここで調整しています。
フォルダー構成はこんな感じです。 ルートフォルダの中にJSフォルダ、CSSフォルダ、imagesフォルダ、そしてPythonファイル、HTMLファイルという構成になります。
画像は保存時にimagesフォルダへコピーされる仕組みにしています。 この構成にしておくとコードの見通しがかなり良くなります。
今回分割作業で少し苦労したのはアロー関数とif文の扱い、JavaScript側でイベント処理を書く部分ですね。
この辺りは別の回で詳しく整理しようと思っています。 ということで今回はレシピ、データベースアプリのソースコード構成についてお話ししました。
次回は実際に使ってみた感想やコードの理解についても少しずつ深掘りしていこうと思います。
ということで次回はレシピアプリ分割で学んだJSの落とし穴についてお話しする予定です。
ご静聴ありがとうございました。
