はじめに
ご無沙汰しております(/・ω・)/
現在、フロントエンドの技術をキャッチアップしていますが、なにか自分で作りたいなと思ったので日記アプリを作成しました。
今回は、どのような技術を用いて作成したか、どういう点を工夫したかなど自分なりにまとめてみたいと思います。
そんなもん工夫もクソもねえ！当たり前だこの野郎！という意見もあるかと思いますが、初心者ゆえ温かく見守っていただけると嬉しいです(´・ω・｀)
なぜ日記アプリにしたのか
Todoアプリや簡単なSNSなどいろいろ候補はありましたが、今回は日記アプリを選択しました。
現在、私はペットを飼っております。そうです。奴隷になっているということです。
ペットを飼っている人ならわかるかと思いますが、やはりかわいい存在、成長を記録したいなと思うことがあります。
そこで、Xやインスタなどではなく、あくまで個人の自己満で日記をつけられるものが欲しいなという理由で日記アプリを作ることに決めました。
ということでまずは私のご主人様たちを紹介するZe☆
パポ
我が家の古参デグーです。
私が危険物の試験を受けたあとに、結果がボロボロだった心を癒すためにペットショップに立ち寄ったのがきっかけで出会いました。
この子を飼って、危険物なんて受けてなかったんだという前向きな気持ちになれました。
ちなみに試験は落ちました。
バナナ
売れ残りデグーです。
とんでもなく汚い声で威嚇してくるくせに、大好物のご飯を見せるとくるくる回り始める可愛いやつです。
脱走癖があり、ご飯を見せているのにフラフラとどっかに歩いていく姿は本当にまぬけです。
おいも
我が家の親分です。
ファンシーラットという所謂ドブネズミをペット化したやつです。
足を怪我して売れ残っているところ、来るか？と聞いたところ指を噛もうとしてきて度胸のあるやつだと思い迎えました。
飼った当初は爪が割れるほどの威力で噛んできていましたが、今ではネズミとは思えないどんくささで私の布団の上を陣取っています。
ちょこ
今年の冬に迎えたまだ赤ん坊のファンシーラットです。
まだまだ小さくすばしっこいため、部屋んぽをさせていると消えます。
あと、僕のキーボードによくおしっこをするのでしょっちゅう怒られてます。
狭いところが好きなようです。
ポピー
我が家一のお調子者です。
僕の腕がボロボロなのは基本的にこいつのせいです。
他のネズミの食べているものをすぐ奪うので一番体重が思いです。
この写真は疲れ果てて寝ている時です。席奪わないで…
イブ
我が家のアイドルです。
可愛らしく、おとなしい性格とは裏腹に一番狂暴でもあります。
テレワーク中によく足の間で寝ている可愛いやつです。
毛並みが縮れ毛でボサボサしててすごくいいです。
この3匹は同時に迎えた3姉妹みたいなものです。
家の前に立つといつもこんな感じで構ってアピールしてきます。
それぞれ紹介も終わったところで、今回作成したアプリケーションについて紹介していきます！
使用技術
今回は、フロントエンドとバックエンドをそれぞれ分けて開発を行いました。
フロントエンド
- React：ユーザーインターフェースの構築に使用
- Chakra UI：レスポンシブでカスタマイズ可能なコンポーネント
- axios：APIリクエストの送信に使用
- react-chartjs-2：グラフ表示に使用
バックエンド
- FastAPI ：高速で効率的なAPIサーバーの構築に使用
- SQLAlchemy：データベース操作のORM(オブジェクト関係マッピング)として使用
データベース
- SQLite：開発環境でも軽量データベースとして使用
※ 今後、PostgreSQLやMySQLへの移行を検討
UIはChakra UIを使用しました。
グラフは成長記録をつけたいこともあり、体重をグラフで表示して成長を実感できるような工夫を施しました。
バックエンドはNode.jsでもよかったんですが、PythonのFastAPIはいろいろなところで使用する予定だったので、練習も兼ねて選択しました。
データベースに関してはとりあえず簡単に実装できそうなSQLiteを使用しましたが、今後他のデータベースに変更する予定です。
実際に作成したアプリケーション
アプリケーションは以下のような見た目になっています。
ペットの誕生日を記録しカレンダーに反映させることができます。
体重を記録しグラフ化することで、成長の変化を楽しめることができます。
また、カレンダーに日記が投稿されている日付にはネズミのアイコンを表示させてわかりやすくしてみました。
可愛いですね。
日記の投稿も直感的でわかりやすいものにしてみました。
日付とペットの名前、日記の内容、写真を入力して保存すると、その日付に日記がエントリーされます。
本当にこいつはまぬけです。なんだその寝相…
今後の機能追加について
割と自分が納得いくものが完成したので、今後機能を追加してより良いものにしてみたいなと思いました。
現段階で考えているのは、
- 複数のペットの管理機能
- ソーシャル共有機能
あたりですかね。
やっぱり自分の可愛いペットを皆に見てほしいと考える人もいるかと思います。
今後、ゆっくりアップグレードしていきたいと思います。
まとめ
今回は、ペットを飼っている人向けの日記アプリを作成してみました！
ペットを飼っている人からすると、こういう機能があったら面白い！などアイデアがあるかと思いますので、遠慮なくコメントしてください(/・ω・)/
エキゾチックアニマルを飼っている人からすると動物病院で診てもらえるかなど、かなり重要になってくるので、そういった情報も機能としてまとめられたらいいなと思ってます。
もっとセキュリティなどしっかり考えた上で、アプリケーションを公開してペットを飼っている人たちに使ってもらえたらなと考えています。
また、一緒に開発を進めてくれる方がいればコンタクト取っていただければと思います（モチベ次第）。
また、何か進捗があれば記事にしたいと思います(^^)/
それでは！！！