日用品のストック管理ツール Stokk を作った
日用品のストックを管理出来るツール「Stokk」を公開しました。
以下はポエムです。
技術選定
- サーバをわざわざ建立するほどの機能はない
- mBaaSと親和性が高そう
- フロントエンドを書きたい
ということで、SPA + mBaaSで作ることにしました。
使ったもの
- ツール
- 言語
- TypeScript
- フレームワーク
- その他ライブラリ
- mBaaS
ツール: Adobe XD
初使用。無料の「スタータープラン」があり、アカウントさえあればｼｭｯと使えます。
プロトタイプは作らず、ちょっと便利な図形描画ツール程度に使いました。事前にデザインや要件を整理でき、その後データやイベントの流れを練り練りするのにも大いに役立ちました。
言語: TypeScript
JavaScriptを操れる自信はなかったのでTypeScriptで書きました。エディタはVisual Studio Code。
ただ、厳格に型付けをするのは諦めました。動く状態で、「thisはVueだからお前が定義したプロパティなぞ存在せんわ！」などと言われていました。「ぐ、Gradual Typingだから…」と意味不明な言い訳をしつつキャストしたりanyにしたりしました。
フレームワーク: Vue.js + Vue Router, Bootstrap + BootstrapVue
ふわっと書きたかったのとReactは仕事で書く機会があるのとでVue.jsにしました。Vue CLIでTypeScriptも含めて一括で初期設定でき、とても楽でよいです。
デザインは安定のBootstrap。BootstrapVueも入れましたが、「BootstrapのListってBootstrapVueでどう書くんだっけ」と毎回マッピングしつつ書いていました。効率的に書けたかは分かりません。
その他ライブラリ: Lodash, Font Awesome
Lodashはdebounceに、Font Awesomeはアイコンに。
mBaaS: Cloud Firestore, Firebase Hosting, Firebase Authentication + FirebaseUI
作るサービスと親和性高そうなので全面的に依存しました。
FirebaseUIについては、 Firebase 6.6.1 と FirebaseUI 4.2.0 でドキュメント通りに書いたつもりで動作せず（firebase.auth()と書くとfirebaseがないと怒られる）。
メジャーバージョンを1つ落として FirebaseUI 3.6.1 を使用することで落ち着きました。何故なんだ。
そのほか
命名: Stokk
当初「にちまね!（日用品在庫マネージャ）」で けいおん!風にしようと思っていました。が、サブドメインを割り当てるタイミングで nichimane は無いな… と思って在庫(stock)を意図的に誤字らせました。
アニメーション
「動いているんだけど動いている感がない」という印象を受けたため、「小気味よく動いている」感を演出するべくアニメーションを設定しました。
- アイテム追加、削除、並び替え時
- 読み込み・保存時（スピナー表示）
