Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
Search
Chiaki Uehira
May 24, 2019
Technology
1
900
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
Chiaki Uehira
May 24, 2019
Tweet
Share
More Decks by Chiaki Uehira
See All by Chiaki Uehira
個人と組織から考える自由な働き方について
uhck
0
140
ToDoリストを作ってる話
uhck
0
100
揮発性の高いコンポーネントを作る話
uhck
0
4.3k
LaravelでGraphQLやってみた
uhck
0
1.7k
Vueコンポーネントについて考えてみた
uhck
0
2.1k
「PWA」とこれからのウェブ
uhck
0
170
Nuxt.jsとNetlifyで はじめるJAMstack
uhck
1
1.1k
Other Decks in Technology
See All in Technology
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
2
2.6k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
130
OSSで50の競合と戦うためにやったこと
yamadashy
3
930
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
190
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
210
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
280
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.4k
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
240
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
320
コンパウンド組織のCRE #cre_meetup
layerx
PRO
0
220
Introdução a Service Mesh usando o Istio
aeciopires
1
280
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Writing Fast Ruby
sferik
629
62k
Side Projects
sachag
455
43k
Context Engineering - Making Every Token Count
addyosmani
7
290
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Agile that works and the tools we love
rasmusluckow
331
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
The Invisible Side of Design
smashingmag
302
51k
BBQ
matthewcrist
89
9.8k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Transcript
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Chiaki Uehira https://uhck.in
大阪を中心にウェブクリエイターとして活動していま す。デザインからシステム開発まで一貫してやっていま す。合同会社ピクセルグラムの代表。 Chiaki Uehira Web Creator https://uhck.in https://pixelgram.jp https://twitter.com/_uhck
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
訂正 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js + Firebaseで(最高の)ToDoリストを作ってる話 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
作りたいもの SNS + ToDoリスト Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
概要 共有に特化したToDoリスト (タスク管理ツール) Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 相互的にタスクがみれる
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 User_01 User_02 相互的にタスクがみれる 仕事 やること 某システム案件 読むべき本
仕事 某システム案件 共有 プライベートにできる
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 プラットフォーム Webアプリケーション / PWA Desktop URLでの共有のため Electronなどで簡単にできるなら
iOS / Android プッシュ通知などの利便性
なぜ作りたいのか モチベーション Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
❶ピクセルグラムの働き方 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 個人(フリーランス)が集まった組織 なぜ作りたいのか ピクセルグラム ウェブクリエイター プランナー フォトグラファー
イラストレーター
案件に人の出入りが多くタスクの共有が難しい Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 フリーランスでの働き方では、従来のサービスでは難しい ピクセルグラムの課題
❷そのひとが忙しいのか確認したい Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 特にプロマネとかやってると気になる。 なぜ作りたいのか
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 ❸タスクをオープンにする世界線にしたい すごい人がどんなことをやったり、 どんなものに関心があるか、 オープンにしたい。 なぜ作りたいのか
Trello, asana, Backlog, Google Tasks, ToDoist Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 組織向けが多い。個人が主体になってプロジェクト単位の共有できるものが少ない。
従来のタスク管理ツールでは難しい
サービス開発の理想 → ペルソナは俺「オレソナ」 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 自分が欲しいものを作ればいい。 無いなら作れるのがエンジニア
爆速であること Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 サクサク動くこと。めんどくさいアプローチがないこと。 ToDoリストに求めるもの 共有性 Slackなどで共有が可能なこと。URLが発行されていること。 マルチプラットフォーム どんなデバイスでも使えること。
Webアプリケーション / PWA Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 プロトタイプ → ドックフーディング 進捗
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js Nuxt.js は Vue.js アプリケーションの開発を楽しくするために必要なすべての設定が揃ってるもの。 技術構成 Firebase
Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js 慣れてるから。 技術構成 (理由) Firebase (Auth, Firestore)
とりあえずプロトタイプを作るためのセットが揃っているから。
まだ公開できない Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 共有はなしでお願いします。 とりあえずDEMO
Nuxt.js Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js は Vue.js アプリケーションの開発を 楽しくするために必要なすべての設定が揃ってるもの。 使ったもの
Vuetify Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 コンポーネントライブラリ 使ったもの
Nuxt PWA Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 PWA対応するモジュール 使ったもの
Firestore Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 NoSQLのデータベース 使ったもの
Firebase Authentication Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 ユーザー認証のためのサービス 使ったもの
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 勉強になったことを共有します。 勉強になったところ
認証状態の検証にnuxtServerInitを使おうと思ったけど動かない Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 SPAモードではnuxtServerInitが動かない nuxtClientInitを作ろうみたいな動きがある
plugins/init.js を作る Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 解決策 nuxt.config.jsに登録すると一度だけ読まれる。
FireStoreのdocumentが変更されたタイミングが検知できない? Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 VuexFireが微妙だった VuexFireを使わないで自分で書いたらよかったかも。 知ってる人がいるとおしえて欲しい。
登壇者から参加者に質問する時間 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 僕が悩んだことを解決してください。 質問コーナ
SubCollectionかReferenceか Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Firestoreに詳しいひと教えてください! 質問コーナ
マルチプラットフォームの場合、 Cloud Functionsで共通関数を作るべきか Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Firestoreに詳しいひと教えてください! 質問コーナ
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 開発メンバー募集 Webアプリケーション / PWA Desktop 僕だけ。 まだだれもいない。
iOS / Android まだだれもいない。
Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 まとめ プロトタイプはNuxt.jsで作ったけど、Flutterとか使っても面白いかも。 まだまだFirebaseでわからないことは多い。
None