10
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.js2とFirebaseでLINEライクなチャットアプリを作ってみる。

Last updated at Posted at 2018-06-29

#目次
1.目標
2.使った技術
3.実装
4.成果物
5.苦労した点
6.今後の展望
#使った技術

  • Vue.js2
  • Vuefire
  • firebaseRTDB
  • firebaseAuth
  • Google様

#実装
目に見える部分から実装していきました。ログイン、サインアップページを作成しタブバーのコンポーネントを作成。
続いて各ページのコンポーネントとデータベースの構築(といってもFirebaseなので構造を考える)
それぞれのデザインを統一してデバッグしてひと段落といった感じです。

#成果物

メールアドレスで友だち登録できるタイプのチャットアプリが出来上がりました。一つの話題について話せるパブリックグループも実装されています。

#苦労した点
なんといってもRDBでない形式のデータベース構造が大変なことになってしまい大変だった。
最初Vuetifyという素晴らしいマテリアルデザインのフレームワークを使い実装していたのだが、使い方が悪いのかバグが多すぎて結局最終的にほぼ全てが素のCSSに置き換えることになった。もう二度とつかわないです。
#今後の展望
さらに様々な機能を追加できる拡張性があるので未来は無限大といった感じですが、折角なのでここまでの実装をもう少し詳しく解説する記事でも書こうかなと思います。Vueは学習コストの低いフレームワークらしいですが実際にはライブラリのドキュメントが古かったりVue1時代の記事と混じったりて以外と苦労したので現時点での最新をアウトプットできれば良いなと思います。

※追記作ってる途中でVueNativeとかいう便利ツールができたらしいので使えばよかった、、

10
4
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?