Firebase+Nuxt.jsでともだちのSNSリンクを一カ所で管理できるサービスを作ってしまった......【個人開発】

[じぇい](https://twitter.com/jyouj__)です！

今回僕は、Firebaseの勉強にサービスを一つリリースしました。

それは！

ともだちのSNSリンクを一カ所で管理できる「[ともだちびお](https://tomodachi.bio)」というサービスです。

Firebase+Nuxt.jsで作りました！Firebaseは初めての挑戦です。

リリースツイートはこちらです！え、リツイートしてくれますよね...？

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">🎉友人などのSNSリンクを一箇所管理できる「ともだちびお」をリリースしました！㊗️㊗️㊗️<br><br>Firebase×Nuxt.jsでつくりました！Firebaseをはじめて使ったんですが、便利で感動しました！<br><br>ぜひ触ってみてください！<a href="https://t.co/msQC3Z9F2w">https://t.co/msQC3Z9F2w</a></p>&mdash; じぇい👨‍💻 (@jyouj__) <a href="https://twitter.com/jyouj__/status/1101035381208674304?ref_src=twsrc%5Etfw">February 28, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## サービス内容
サービス内容はともだちのSNSリンクを一カ所で管理できる連絡帳サービスです。

![intro.png](https://qiita-image-store.s3.amazonaws.com/0/252295/bd91ed1f-5ea1-2648-d4c1-c5f00c63819a.png)

Twitter, Facebook, Instagram, Githubなどのリンクを登録できます！

## 使ったもの
### [Nuxt.js](https://ja.nuxtjs.org/)
Vue.jsをさらに便利に活用できるフレームワーク。SPAもSSRもどっちも来い！っていうなんでもできちゃう感。SPAで今回は作りました！

### [Firebase Authentication](https://firebase.google.com/docs/auth/?hl=ja)
Twitter認証に使いました(後述)。

### [Firebase Realtime Database](https://firebase.google.com/docs/database/?hl=ja)
基本的なCRUDを実装しました（後述)。ルール定義で自分の保存データしかアクセスできないようにすることで連絡帳サービスを実装しています。Firestoreも興味深かったのですが、学習コストがたかそうだったので、まずはRealtime Databaseからにしました。

### [Firebase Hosting](https://firebase.google.com/docs/hosting/?hl=ja)
デプロイもものすごく簡単！カスタムドメインにもSSL接続を無料でできてハッピー！

### [FontAwesome](https://fontawesome.com/)
最初、CDNで使ってたんですが速度が遅かったので最終的にはnpmパッケージで使うことにしました。使うアイコンだけ`library.add()`すれば、読み込みも遅くなりません。

### [nuxt-buefy](https://github.com/buefy/nuxt-buefy)
BulmaのVueに最適化したフレームワーク。細かい部品は頼りきりでした。

### [vue-lazyload](https://github.com/hilongjw/vue-lazyload)
画像の遅延読み込みに使いました。少しは速度は改善したはず......。

### [vue-burger-menu](https://github.com/mbj36/vue-burger-menu)
おしゃれなバーガーメニューを実装できます。

### [vue-tags-input](https://github.com/JohMun/vue-tags-input)
タグの入力に使いました。

### [@nuxtjs/pwa](https://pwa.nuxtjs.org/)
PWA対応を簡単にできます。ただTwitter OAuthを使っているので一度Safariに遷移してしまってあまりうまく使えてません。Androidはできてるのかな？

### [@nuxtjs/google-analytics](https://github.com/nuxt-community/analytics-module)
Google Analyticsの設定が楽々！

## Firebaseの認証・CRUD
### 認証
**Twitterログイン**

``` javascript
methods: 
  twitterLogin () {
    var provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
    }
  }
```

**ログアウト**

``` javascript
logout: function() {
   firebase.auth().signOut();
},
```

**ログインしてるかのチェック**

``` javascript
firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.isLogin = true
        this.user = user
      } else {
        this.isLogin = false
        this.user = null
      };
    })
```

### CRUD
**Create(投稿)**

``` javascript
var newLinkKey = firebase.database().ref().child('posts').push().key;
firebase
  .database()
  .ref('posts/' + this.user.uid + '/' + newLinkKey)
  .set({
     content: this.content,
     // 省略
  })
```

**Read(読み取り)**

``` javascript
firebase.database().ref('posts/' + this.user.uid).on('value', function(snapshot) {
   this.posts = snapshot.val()
})
```

**Update(更新)**

``` javascript
var newPost = {
   content: this.content
   // 省略
}
var updates = {}
updates['/posts/' + this.user.uid + '/' + key] = newPost
firebase.database().ref().update(updates)
```

**Delete(削除)**

``` javascript
firebase.database().ref('links/' + this.user.uid + '/' + key).remove();
```

### 最後に
Firebaseはこれだけでマイクロサービスを作り上げることができます。

Nuxt.jsと組み合わせることでサービスの幅も広がって良き良き。

[Twitter](https://twitter.com/jyouj__)フォローしてねー！