dev_nekoさん主催の上記のイベントに参加
可愛いステッカーもらいました

ちなみに今日がdev_nekoさんの第1回目だそうです！

アジェンダ

1. 概要
2. Vue.js/Nuxt.jsについて
3. Firebaseについて
4. Stripeについて
5. 作成方法概要
6. その他Tips

概要

スピーカー：市岡氏 @redshoga

de:code 2019 CD42の内容だそうです

作成したアプリの紹介

アプリ名：FIXER Cafe
・PWAで実装
・飲み物が買える

アーキテクチャ

JAMStack

UI/UX

「プロトタイピングちゃんとやりました」
Figmaを使用

コンポーネントによる構成ができる
AtomicDesignチックに作れる
vue.js、React.js等でのコンポーネント開発と相性がイイ

web上で簡単に使えるので採用した
作成したコンポーネントのCSSも吐き出してくれる、けど完全に流用は難しいかも（positionなど）

Nuxt.js

ルーティング処理等を簡単にできる（ざっくり）

vue.jsを選んだ理由
・学習コストが低いと思った
・ReactはJSXがハードル高いかなと思った

デザインの話

デザイナーが居ない！！
新入社員3人と先輩1人で開発（すごい）

3つを守る
・フォント
・色
・形

これさえ守ればある程度は映えるアプリになる！！

ぼっちデザインコンペ
2つ画面をFigmaで作って触って比べて構築していった

スケルトンスクリーン

Vuetify

vue.js用のCSSフレームワーク

いらなかった説
基本的なコンポーネントからデザインしていった
上書きしていくので結局使わずにできたかもしれない

気楽なコンポーネントわけ
そこまできっちり分けなかった、今回の開発チームにはそれが合ってた

Footerナビゲーションに使用
モーダルウィンドウにも使用

Firebase

mBaaS(Mobile Backend as a Service)

Firebase Authentication
Firebase Functions
Firebase DB

Stripe

決済のSaaS

こちらのAPIを叩いている

https以外で接続すると決済フォームが出ないなど、とてもセキュア

管理画面で商品を設定したり
ダッシュボードで売り上げが見えたり
エラーコードに対する日本語訳が充実

PWA

プッシュ通知
OneSignalが簡単でおすすめ

webサービス上で通知開封の情報を見れる

Language

JS vs TS

今回はJSを選んだ
・TSの沼にハマる予感
・未経験メンバーがいるのでJS→TSという道筋をとった方がいいと思った

VS Code

コーディング規約うんぬんに無駄な時間を割きたくなかった

フォーマッタ
・Vetur
・ESLint

CI/CD

Azure Pipelines
circleCIに似ているのでとっつきやすいと思う

質問

Q：商品マスタデータはFirebaseとStripeどちらにも構築する必要がありますか？
A：Stripeに任せた
両方だと整合性、そんな時間がなかった
小さいサービスであればそれで十分

Q：firebaseのセキュリティルールってgit上で管理できるんでしょうか？
A：できます！

Q：フロントやバックで起きたバグ通知って何かサービス使ってますか？
A:やってない！やりたかった！やるべき！

Q：テーマカラーの緑色はどうやって決めましたか？
A：スタバの色をちょっと変えてます
ここら辺は趣味です

Q：push通知を送るユーザをコントロールすることはできますか？ 
A：cloud messaging だと、ログインした人毎に、DBにhashを格納して、そのhashを用いて人毎に通知できますよ

Q：ストライプを利用するにあたって、おすすめの勉強法はありますか?
A：StripeのAPIをざっと読む
そして実際に叩く
個人の開発者でも申請して使える

Q：アイコンなどのデザインはfigmaでしましたか？
A：フォントアイコン使いました（Font Awesome）

Q：stripe周りのコードだけでも読みたいです 🙏
Q：stripeの管理画面って見せてもらえますか？
A：ネットに繋がらす残念…

Q：インデント周りはCIでチェックする選択肢はなかったのでしょうか?
A：ちゃんとやるならCI上でやった方がいい

感想

・熱いStripe推し…！
・凄く楽しそうに話されていた
・デモや実際の画面多めでイメージが湧きやすくてありがたい
・ここまでのアプリを今の時代はこのスピードでこの人員で作れる（焦り

素敵な会場＆貴重なお話ありがとうございました！