はじめに
勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。
個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。
↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした
【Day3】まずはフロントだけ開発環境を構築する
【Day4】バックエンドの開発環境を整えつつ、マルチコンテナ対応のDevcontainerにする
【Day5】お試し実装！ファイルをアップロードしてバックエンドで処理する
【Day6】Docker Desktopが起動しなくなり泣きながら原因調査する
【Day7】画像にフレームとExif情報を付けてみる
【Day8】フロントに表示する画像のサイズを小さくする
【Day9】フロントエンドとバックエンドをそれぞれデプロイする
【Day10】結局コンテナ1つで開発する方が楽かもしれない
【Day11】アプリが一通り完成！！
【Day12】FastAPIのコードをリファクタリングする
前回やったこと
前回はバックエンドで使っているPythonのAPIをデファクトスタンダードな構成になるようにリファクタリングしました！
今回やったこと
新規機能として「画像を選択時にブラウザ上にExif情報を表示させて自由に編集できる」という機能を実装しようとしました！
実装背景
今までは画像をバックエンドに送信したら自動的にその画像からExif情報（カメラやレンズのモデル名、シャッタースピードなど）を取得してフレームに記載していました。
普通のデジタルカメラだと問題ないですが、私はデジタルカメラ以外にもフィルムカメラも使います。
フィルムカメラだと現像の都合上、撮影した写真にExif情報を付与することはできません。
そこでフィルムカメラの写真をアップロードするときは手動でExif情報を記入できるようにしたいのです！
進捗
こんな感じで画像を選択するだけで、一部のExif情報を表示できるようにしました！
しかし、見ての通り、UIはぐちゃぐちゃです。
また、これらのExif情報を編集はできてもAPIへのリクエストに加えること、バックエンドで受け取ったExif情報で上書きすることもできていません。
つまり、今日は全然進捗なしです！！！！！
本日のコミット
今日の実装内容です！全然進捗なくて悲しい！！！！
気づいたこと、学び
先日、バックエンドはリファクタリングしましたが、フロントエンドは全く手を加えられていません。
そこを蔑ろにして新規機能を実装しようとした結果、頭が混乱して実装がよりカオスになってしまいました。
やはり定期的なリファクタリングは大事ですね。。。
また、今までは開発に使用するブランチが実質1つだけだったのですが、そのせいで今回のような明らかに作成途中をpushできませんでした。
急遽トピックブランチを切って対応しましたが、本来なら開発中のブランチと機能開発のブランチは分けるべきですね。
機能実装欲が高まりすぎて周りが見えてないですね！！！！！！
今後は開発中のブランチは分けて、デプロイ用のブランチにPR作ってマージするような運用にします！
ゆくゆくはPRのプレマージのタイミングでテスト実行するなどのCI/CDの仕組みを作っていきたいですね。
おわりに
今日は進捗がしょぼめな一日でした。
リファクタリングしてないソースに新機能を追加するのは大変危険だということを身に染みて痛感しました。
「ああ！これも実装したい！！この機能もやりたいな！！！！」だけで突き進むのはダメ！絶対！！
でもモチベが高まってるのは良いこと！！！！