研究室図書管理システム
Apr 19, 2019以前作成した図書管理システムのコードが非常に管理しづらいものになっていたので、この1年間で培ってきた技術力を総動員してリニューアルしてやろうと思ったのがきっかけです。
内容説明
研究室の本を管理（貸出返却・新規本の登録）をしてくれるサービスです。 入力の手間をできるだけ減らすために、本はISBNコードで管理し、本棚の近くにバーコードリーダーを接続したタブレットPCを設置しています。
機能
- 書籍検索
- 貸出処理
- 返却処理
- 本の登録
ページ
1. トップページ
新刊情報と書籍検索結果が表示されるようになっています。
2. レンタルページ
借りる本のバーコードを読み取り（複数冊レンタル対応）、操作しているユーザのアイコンをタップすると、レンタルできるようになります。
3. 貸出一覧ページ
誰がどの本をいつから借りているか一覧で見ることができます。返却手続きもこの画面で行います
4. 新規本登録ページ
研究室に新たな本が導入された際は、このページから登録手続きを行ってもらいます。
開発のお話
リニューアルポイントは以下の3点です。主に私が卒業した際、次にコード管理を任された人間が理解しやすく、アプデが容易なコードを書くということがポイントです。
- APIのREST化（以前は貸出リストの取得は~~~.phpにアクセスみたいなことしてて非常に汚かった）
- システムのSPA化（久しぶりにコードみたら、jQueryで一生懸命カキカキした形跡があったが、まあ汚かった）
- レンタルユーザのバーコードでの管理を廃止（バーコードリーダーでピッピするのが楽しくて、本の読み取りのみならずユーザもそれぞれにバーコードを発行し、それを読み取ってもらうことでユーザ識別をしていた）
また、こちらの開発と同時にmureQと自身のホームページの開発を抱えていたので、開発に時間をかけたくないという私情が入りこんだ結果、以下のような技術を選定しました。
使用技術
フロントエンド
- HTML/CSS
- JavaScript
- React（今回はスピード重視だったのでcreate-react-appを使用）
- axios
- react-router
- react-helmet（titleタグの変更だけですが）
- styled-components
バックエンド
- Apache
- MySQL
- PHP
- Slim3 （REST APIさえ作れればよかったのでとにかくシンプルで開発コストがかからなそうという理由で）
振り返り
開発はトータル25時間ほどで終了しました。フロントエンド・バックエンド部分は15時間ほどで終了したのですが、その後.htaccessとreact-routerに振り回されました...
saito.nkmr.io/XXX直下にapiフォルダとフロントのビルドしたファイルたち（html, css, js）を置くとき、saito.nkmr.io/XXX/api/xxxxにアクセスする際はsaito.nkmr.io/XXX/api/index.phpに、その他のアクセスはすべてsaito.nkmr.io/XXX/index.htmlにリダイレクトさせる方法と、サブディレクトリをルートとして扱うとき、react-routerのbasenameを設定する必要があることを覚えました。