BuriKaigi2023 みんなのヨガ部 開発エピソード

BuriKaigi2023 https://burikaigi.dev/ 登壇資料

at2023/01/21 ルーム: ホタルイカ

「サービス企画とUIデザインとWebアプリ開発を全部やってみたら良かった
みんなのヨガ部 開発エピソード」

Transcript

1. サービス企画とUIデザインと Webアプリ開発を全部やってみたら良かった 2023/1/21 BuriKaigi 2023 道家 陽介 みんなのヨガ部 開発エピソード
2. 自己紹介 道家 陽介 金沢在住（2年目） Flashエンジニアを経たフロントエンドエンジニア。 受託制作会社でテクニカルディレクターやPMを経験。 現在はフリーランス。 「みんなのヨガ部」というWebサービスを開発・運営。
3. サマリー オンラインヨガサービス「みんなのヨガ部」をWebアプリ化。 サービス設計とUIデザインとバックエンドをフロントエンドエ ンジニアひとりで全部やってみた記録7  サービス開始とWebアプリ開発までの経Æ Å UIデザインと開発でやったこ0 Ä 全部やってみて感じたこと
4. みんなのヨガ部とは みんなのヨガ部は、「小さく長く続けやすく」をコンセプトにした オンラインヨガスクールですB 0 オンラインで場所や時間の制約がなr 0 自宅でできる簡単なエクササイt 0 Zoomで部分参加でも耳だけでも自由な利用を可能にす% 0 安価なサブスクリプションで長く続けやすい仕組みで提供
5. サービス開始とWebアプリ開発の経緯 UIデザインと開発でやったこと 全部やってみて感じたこと
6. サービス開始とWebアプリ開発の経緯 2010年頃 2010年頃　 講師の「鈴木めゆ」さんおよびヨガとの出会い 締切に追われても生きててよいんだ（ちょっと疲れていた）
7. サービス開始とWebアプリ開発の経緯 2010年頃 2010年頃　 講師の「鈴木めゆ」さんおよびヨガとの出会い 2018年頃 都内のカフェで開催した呼吸で思考を整えるワークショップ 締切に追われても生きててよいんだ（ちょっと疲れていた） マネジメントやデザインに通じる思想があって面白い！
8. サービス開始とWebアプリ開発の経緯 2010年頃 2010年頃　 講師の「鈴木めゆ」さんおよびヨガとの出会い 2018年頃 都内のカフェで開催した呼吸で思考を整えるワークショップ 2020年4月 新型コロナウイルス流行に伴う緊急事態宣言の発令 呼吸の病気なのに呼吸を良くするレッスンができない事態に 締切に追われても生きててよいんだ（疲れていた） マネジメントやデザインに通じる思想があって面白い！
9. サービス開始とWebアプリ開発の経緯 2020年4月 新型コロナウイルス流行に伴う緊急事態宣言の発令 2020年5月 2020年6月 Zoomを使って知り合いを集めてテストプレイ PayPayやPeatixで集金しながら試行錯誤。結果noteサークルを採用 2021年 2022年8月 しばらくはnoteサークル+Peatixで運用 Webアプリ＋Stripeによる課金システムを構築し移行Peatixは営業窓口として継続
10. UIデザインと開発でやったこと 全部やってみて感じたこと サービス開始とWebアプリ開発の経緯
11. UIデザインと開発でやったこと PH Figmaで画面デザインとコンポーネント設R EH Firebase＋Nextでアプリケーションを構! H Chakra UIに組み込む
12. UIデザインと開発でやったこと 前提としてChakra UIの採用を決めていたのでその前提で準備しました8 s 8dpのグリッドシステムを採用8 s FigmaのStylesを積極的に使う8 s コンポーネント化は画面デザインをしながら随時。 Figmaで画面デザインとコンポーネント設計
13. UIデザインと開発でやったこと 8dpのグリッドシステム 場合によって4pxのサブグリッドを入れることもある Figmaで画面デザインとコンポーネント設計 実際の濃さ
14. UIデザインと開発でやったこと カラーシステム テキストスタイル Figmaで画面デザインとコンポーネント設計
15. コンポーネント HSTackやContainerを意識した レイアウト用のコンポーネントも 模擬的に定義してる。 ガイドとして利用するのと 実装時のヒントにもなる。 UIデザインと開発でやったこと Figmaで画面デザインとコンポーネント設計
16. UIデザインと開発でやったこと 他にFigmaでできないが意識したこと — コンポーネントの語彙をChakra UIに合わせるq — Border Radius(角丸)なども手入力だがChakra UIの値を利用するq — AutoLayoutやConstraintsの利用、ガイドコンポーネントでレイアウトを表明する。 Figmaで画面デザインとコンポーネント設計
17. UIデザインと開発でやったこと コンポーネントにすることで実装の検証を半分くらい行える例 例）次回以降の予定コンポーネント Figmaで画面デザインとコンポーネント設計 幅は成り行きでストレッチ コンポーネント幅に対して どう構造化し、整列、追従 するかを表現できる。 幅固定
18. UIデザインと開発でやったこと アプリケーションの構成 y Next.js でSSR(ホスティングはVercelQ y Clean Architecture風味のレイヤードアーキテクチャパターr y Firebase Authorization / Firestore Databasu y Stripe Firebase＋Nextでアプリケーションを構築
19. UIデザインと開発でやったこと Next.js でSSR(ホスティングはVercel) AWSとかでNext.jsのSSRなどの構築がめんどくさかった。 App Runnerなどコンテナ技術を使えば構築は可能だがデプロイに20分近くかかる。 コンテナで利用するパッケージのメンテナンスなども自身がなく負担が大きい。 個人サービスなので素直にVercelでよいと思った。 ※GCPやAWSで縛られたらCloud runやApp Runner使うしか無いと思うが情報求ム。 Firebase＋Nextでアプリケーションを構築
20. UIデザインと開発でやったこと Clean Architecture風味のレイヤードアーキテクチャパターン Firebase＋Nextでアプリケーションを構築 domain層 model usecase repository firebase stripe view components features pages model usecase view domain層 repository page User Firebase Stripe
21. UIデザインと開発でやったこと Firebase Authorization Firestore Database GmailのSSOと電話番号の実装 Account - 登録ユーザー情報とStripeの顧客情報 Lesson - 曜日ごとのレッスンとプランの紐付け Schedule - レッスンに紐づく予定とZoomURL あまりユーザーごとのデータを持たない設計。 Firebase＋Nextでアプリケーションを構築
22. UIデザインと開発でやったこと Stripe Firebase＋Nextでアプリケーションを構築 サブスクリプションの商品をAPIで取得する。 Checkout.Session.Createを利用してStripe側で決済処理する。 コールバックで決済情報を受け取りユーザーに紐付ける。 ユーザーの顧客IDからSubscriptionを確認して 該当するプランに紐づく予定のみ表示する仕組み。
23. UIデザインと開発でやったこと Chakra UIに組み込む コンポーネント設計 ディレクトリ構造とコンポーネント種別 views/components 汎用コンポーネント views/features/* ドメインコンポーネント pages/* ページコンポーネント Next.jsの構成を下敷きにレイヤードアー キテクチャを意識して構造化する。 関心を集める・凝縮度を上げやすい構造
24. UIデザインと開発でやったこと Chakra UIに組み込む 大事なこと UIコンポーネント設計　∋　Figmaで思考したこと コンポーネント分割や命名、スタイリングやレイアウトの半分くらいは Figmaで決めたことをなぞるだけ。になるようにデザインできる。
25. UIデザインと開発でやったこと Chakra UIに組み込む テーマの設定 Figmaで決めた値をマッピングして入れる。 メインテーマを して で 流す。 メインテーマを更に拡張して管理画面用の テーマを用意する。 export ThemeProvider import { breakpoints } from './foundations/breakpoints' /* 中略 */ const = { breakpoints, /* 中略 */ } const = ( ) export default theme export const = ( , { /* 中略 */ }) customTheme theme customTheme adminTheme theme extendTheme extendTheme
26. UIデザインと開発でやったこと Chakra UIに組み込む 既存コンポーネントの拡張 export const = { : { : { fontSize: '4xl', fontWeight: 'light', lineHeight: 10, }, : { fontSize: '3xl', fontWeight: 'normal', lineHeight: 10, }, '2xl': { Heading '4xl' '3xl' sizes テキストスタイルなどを のvariantに 割り当てていく。 Chakra UI
27. UIデザインと開発でやったこと Chakra UIに組み込む 汎用コンポーネントの実装 基本的には のみに依存する。 レイアウトの都合上、 のラッパーとなることが多いので のよう に互換性をもたせることが多い。 Props Chakra UI FC<StackProps>
28. 機能ごとの と に依存する。 各 側でユースケースを呼び出し外部から取得したデータが流し込まれる想定。 認証やナビゲーションなど一部の横断的機能も を通じて統合できる。 こちらもレイアウトの都合で などの を継承することが多い。 内部で使う単体のUIコンポーネントは分離して 化する。 Context Props Provider Context Box/Stack Props memo UIデザインと開発でやったこと Chakra UIに組み込む ドメインコンポーネントの実装
29. Provider Context 内でユースケースを呼び出す。 その に依存するドメインコンポーネントを子要素にしてデータを結合する。 レイアウトへの流し込みを行う。 UIデザインと開発でやったこと Chakra UIに組み込む ページコンポーネントの実装
30. UIデザインと開発でやったこと Chakra UIに組み込む あとで気づいたことや考えていきたいこと ※とても雑に思っていることなので懇親会とかで話したいです！！ „ は導入するとコンポーネントの検証が早い。特にレスポンシブh „ の分割の仕方をもっと工夫したら再描画を抑えられるh „ と の宣言するファイルをうまく分けないと が表示されないh „ うまく分けた上で をモックすることで複雑な も実現できそう。 Storybook Context Context Provider Story Provider Story
31. 全部やってみて感じたこと サービス開始とWebアプリ開発の経緯 UIデザインと開発でやったこと
32. 全部やってみて感じたこと デザイナーの思考プロセスを理解できた 　　決めやすさ決めづらさを知る 　　何を決めて何を決めてないか知る デザインしながら設計するので開発効率はめちゃくちゃ良い ロジックでデザインの品質にコミットする デザインへのコンプレックスを単純に減らせる フロントエンドエンジニアとして
33. 全部やってみて感じたこと デザインシステムなどシステマチックなデザインは開発に近い FigmaやSTUDIOのような思想のあるツールを使う UIフレームワークやデザインシステムを熟知する デザインに責任を持とういう気持ちでコミットできる コードを書かなくとも構造とルールをシステマチックに実装する 結果、ビジュアルコミュニケーションやスタイリングに集中できる UIデザイナーとして
34. フロントエンドエンジニアがデザインに参加する デザイナーがアプリケーション設計に参加する 月なみですが、双方の立場でのメリットを 実感できました。 全部やってみて感じたこと
35. チームもプロダクトもハッピー ひとりでどちらもできるという選択肢が増える。 分業したとしても、強化スキルとしてどちらの工程の品質を倍加できる。 できることが増える楽しみをもっと多くの人に知ってもらえたら幸いです。 全部やってみて感じたこと
36. 参考書籍 Micro State Management with React Hooks: 直近読みはじめました。 グローバルステートのアプローチの違いや Contextの最適化、Jotaiなどのライブラリの 仕組みや再描画抑制の仕組みなどを詳しく解説 しています。 著者: Daishi Kato
37. 参考書籍 Figma for UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ これも先日買って読み始めたばかり。 本日伝えようとしていたことが Figmaの活用法を通して書かれているので フロントエンドエンジニアなどがデザインに より触れていく入門としても良いと思いました。 著者: 沢田 俊介
38. 参考書籍 Firebase Authenticationで学ぶ ソーシャルログイン入門 ID管理の原則にそった実装のベストプラクティス 認証・認可の違いといった基本知識や Firebaseのやや複雑でドキュメントだけだと 分かりづらい部分を丁寧に解説しています。 著者のBOOTH等で販売しているシリーズも 併せて読むとより詳しく理解できます。 著者: Auth屋 https://amzn.to/3J9hirT
39. PR: Burikaigi2023 みんなのヨガ部 を使ってみてください！ https://minnanoyogabu.com/ BURIKAIGI2023 お試しクーポン（初回登録時限定）