【個人開発】爆速で書籍管理システムを作って大幅な時間削減をした

![bandicam 2023-11-11 21-48-59-772.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c3a061bb-802e-8188-a1d0-8cdd4f78c1ce.jpeg)

# はじめに

<h3>こんにちは！！@Sicut_studyです！</h3>

今回は個人開発で「**書籍管理システムYomuYomu**」を作成したので紹介したいと思います。
サービスでやりたかったことがシンプルでなおかつユーザーの作業時間を**大きく削減することができた**というところから

#### <font color="red">個人開発に挑戦してみたいけど何を作ればよいかわからない

このような方にとてもおすすめのサービスになっています。
私も実装していて「この内容はプログラミングコーチングJISOUの中でも1つの教材として今後使っていこう」と思うくらい良い題材でした

# 書籍管理システムYomuYomuとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e5860f41-35dd-8ea6-8075-f7126a619bab.png)

書籍管理システムYomuYomuは購入した本を登録できる簡単なアプリです
以下の機能が利用できます

## 1. 登録書籍一覧

登録した書籍を50音順で見ることができます
詳細検索を利用することで「あ行」などで書籍を絞ることができます

![top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/8fe224cb-752d-585c-7715-92ef493ef888.gif)

## 2. 書籍自動登録

書籍を登録するためにバーコードリーダーから**ISBN**を読み込んで書籍を自動的に登録できるようにしました

![5827542A-F8F1-4B21-9852-3C6CC907FA82.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/8a7faa4a-805e-9f44-ce9a-870ad43966e2.jpeg)

ISBNが入力されると書籍情報をAPIで検索して登録できるようになります

![Peek 2023-11-12 11-28.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/7063f2bb-0e31-f125-55ba-3a179e412798.gif)

## 3. カスタム登録

書籍によってはAPIに登録されていないものがあるので手動登録もできます

![Peek 2023-11-12 11-30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/60f2300d-de71-1ef1-7143-7f663b73ab60.gif)

# なぜ書籍管理システムを作ったのか

私の家族は**かなり本を購入します**
なので全員で買った本を共有して<font color="red">**重複して本を買わないようにする**</font>というのが大切になっていきます

そこで母親がスマホのメモに

### <font color="red">音声入力ですべての本を記録していました</font>

音声入力にしているのはたくさんの書籍を手入力するのが大変とのことでした。また家族のみんなはそのメモをあとで共有してもらって、すでに本を購入していないかをチェックしていました

また音声入力だと<font color="red">**漢字が間違えていて手入力でなおす**</font>という作業も発生していました

こんな背景があったので

### <font color="blue">バーコードから書籍情報を登録できて、家族で共有が簡単にできる

というところから本サービスを作成することにしました

# 技術スタック

フロントエンド : React, TypeScript, ChakuraUI
DB : Fire Store
Host : Firebase
その他 : Google Book API、ひらがな化API

開発人数 : 1人
開発時間 : 6時間

今回は爆足で作ること、家族しか使わないシステムということで**Firebase**を活用して楽できるところのコストを極限まで減らしました
スマホでしか利用しないのがわかっていたのでモバイルのみで実装してレスポンシブ対応などのコストをかけないようにしました。PCでも問題なく使うことは結果的にはできました

今回こだわったところは「書籍検索」に関してです
書籍はGoogle Book APIsを利用しました

https://developers.google.com/books?hl=ja

また、書籍検索で50音順にならべて、**行順**で検索をしたかったので書籍名をひらがなの読みを登録する必要がありました
そこで**ひらがな化API**を利用させていただきました

https://labs.goo.ne.jp/api/jp/hiragana-translation/

この2つのAPIは初めて利用したのでとても勉強になりました
またすごく便利なAPIだなと感じました

またバーコードリーダーなどのハードウェアとWebアプリをつなげるような開発を初めてしましたがとても簡単で可能性が広がりました。まだまだやれることがたくさんありそう

# システムを作成してよかったこと

システムを公開したところ一瞬にして**120冊**もの登録が行われました
そしてメモに音声入力で記録していた頃と比べて

#### <font color="red">1時間半かかっていた作業が20分に短縮することができました

これは<font color="red">**ITの勝利**</font>を実感しました
また書籍を購入しているか探すのも検索機能があるためすぐに確認ができるようになり、便利になりました

# 今回の開発を通して思ったこと

やはり<font color="red">**ユーザーがいて使ってくれること**</font>はとても良いことだなと思いました
すぐにフィードバックがきますし、使ってくれて便利と思ってくれることはシステム開発をやる楽しさだと再実感しまいた

個人開発でやるなら「誰に」「どのように」「役立つのか」を意識して作ると良いものが作れると思います。そんなお題をみつけるために日々アンテナを立てておくことが大切だと思いました

# おわりに

今回は個人開発した内容を記録として記事にしてみました
開発のお題としてもかなりおすすめの内容ですので気になったら実装してみてください

ここまで読んでいただけた方はぜひ**いいね**と**ストック**よろしくお願いします。

<h5>少し宣伝します🔥🔥🔥🔥🔥</h5>

これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。

もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、[Twitter](https://twitter.com/Sicut_study)に「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います！！

以上です。
今週もプログラミング頑張りましょう！

![bandicam 2023-10-04 20-58-54-525.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/f41a0065-b23e-1895-da22-66bf0e48c5fb.jpeg)

# おすすめ記事

https://qiita.com/Sicut_study/items/04097b2ababedb70099d

# 参考

https://developers.google.com/books?hl=ja

https://labs.goo.ne.jp/api/jp/hiragana-translation/