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
800
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
Chiaki Uehira
May 24, 2019
Tweet
Share
More Decks by Chiaki Uehira
See All by Chiaki Uehira
個人と組織から考える自由な働き方について
uhck
0
90
ToDoリストを作ってる話
uhck
0
68
揮発性の高いコンポーネントを作る話
uhck
0
4.1k
LaravelでGraphQLやってみた
uhck
0
1.5k
Vueコンポーネントについて考えてみた
uhck
0
1.9k
「PWA」とこれからのウェブ
uhck
0
120
Nuxt.jsとNetlifyで はじめるJAMstack
uhck
1
910
Other Decks in Technology
See All in Technology
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
800
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Featured
See All Featured
It's Worth the Effort
3n
181
27k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
BBQ
matthewcrist
82
9k
Side Projects
sachag
451
42k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The Cult of Friendly URLs
andyhume
75
5.9k
Code Review Best Practice
trishagee
58
16k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Web Components: a chance to create the future
zenorocha
307
41k
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