はじめに
こちらはオプトテクノロジーズ社内勉強会で利用した資料になります
自己紹介
株式会社オプト シニアエンジニア @sisisin（しめにゃん）
https://github.com/sisisin
https://twitter.com/_sisisin
- フロントエンドマン（最近は React+Redux）
- スクラムマスター・インフラ・サーバーサイドといろいろやります
- 今はテックリードとか社内アジャイル相談窓口っぽいことやってます
モチベーション
- 別に課題感があったわけではない
- ちなみに今まではスプシで管理して、GASで貸し借りの通知をしていた（それで十分だった）
-
@watiko 氏と話していたら、↓というのが分かってサクッといけるのでは？ってなったので作った
- カメラからバーコードを読み取れる
- ISBNコードから本の画像とか情報が引っ張ってこれる
出来ること
- 貸し借りが携帯でサクッとできるようになるので便利！
- 一覧でも見れる！
- 半期ごとぐらいにやる棚卸しもバーコード読んで終わり！
- 今まで取れなかった貸し借りの履歴とかも取れる！
べんり！
デモ
使っている技術
- Firebase
- hosting
- firestore
- function
- React+typeless
- yarn workspace,lerna
Firebaseについて
- 言わずとしれたGoogleのmBaaS
- リアルタイムDBとか使えたり、モバイルを簡単に作れるよ！というやつ
- 今回の使い所
- 社員のメールアドレス（G SuiteなのでGoogleアカウント）による認証とバリデーション
- 書籍情報の管理
- 棚卸し機能では棚卸された本が一覧画面にリアルタイム反映される、というおしゃれ機能もあります
小さい社内向けアプリなので、サクッと使い始められて、インフラコストも抑えやすいというのはとても良かったですね
DBアクセスのためのAPIが参照を上手く使おうとするとどうしてもアプリケーションドメインと密結合になってしまいそうで、上手く実装を分離するのは苦労しそうという所感でした
typelessについて
- 概ねReduxのラッパー
- 画面構築のベースに スターターリポジトリ を使いました
- ログイン画面・ログイン前後の画面・ルーティング・参考実装・plopを使ったコードジェネレータなどが殆ど全部揃ったリポジトリ
- これをcloneしてきて初めたので即実装が進められた
- 最高
- 去年の10月ぐらいからRedux周りを沢山触ってきたけど、ダントツで使いやすくて最高
まだアルファ版ですが、書き味が異常に良くて、画面側の実装をするときにかなりの部分が迷いなく直感的にかけて最高でした
ある程度モバイルや動きを意識したアプリになりましたが、それでも全然破綻なく書けるので本当に筋の良いライブラリだと思います
みんな使おう
yarn workspace,lernaについて
- いわゆるmonorepoをやりやすくするための仕組み・ツール
- firebase functionsやフロントの間でinterfaceの共有などしたいので、 yarn workspaceとlernaをつかってmonorepo構成にしています
- ついでに全てTypeScriptなので Project Referencesという仕組みも使ってます
便利でした。TypeScriptのProject Referenceはプロジェクトをまたぐと参照を取りにくい（エディタで関数名を書いたときに import文を自動で入れるやつとかが動かない、とか）のが気になりますが、まあそれは追々改善されていくでしょう
地味にnode環境とbrowser環境の差異がある中でtsconfigとか調整してやるのが大変だった話もありました
質問タイム
なにかあれば。