ネタ系アプリ「キモツイ」で使用した技術（Vue.js+Firebase+Buefy）の基本的なセッティング方法 #Vue.js

構想から半日の爆速でリリースしたネタ全振りWebサービス「キモツイ」の構成技術とその基本的なセッティング部分の解説です。

作ったサイトはこちら
キモツイ

「クソツイ」じゃない「キモツイ」だ！
「キモツイ」は「クソツイ」とは違う新たな概念です。ちょっとキモい感じが漂うツイートを「キモツイ」と私たちは愛を込めて呼びます。
当サイトは、キモいツイートを誰でも投稿・シェアできるサービスです。
お気に入りキモツイには「キモ投票」ができ、100票集まると殿堂入りします。
ぜひお気に入りのキモツイを投稿・シェアしてみてください。

ブログに遊び方書いています。ブログ

Vue.js + Firebase + Buefy(Bulma)のお手軽三点セット

気軽な個人開発ではもうおなじみの、フロントは「Vue.js」バックエンドはサーバレスの「Firebase」という構成です。加えてUIも楽したいのでBulmaベースでVue.js用に作られたUIフレームワークの「Buefy」を使っています。
この３点セットは何か突発的にサービスを作りたいときに本当に簡単でオススメです。
Vue.js
Firebase
Buefy

今回はこの3つのセッティングの方法を紹介します。

Vue.jsのセットアップ

VueのプロジェクトはVue CLI３を使って設定しました。
まずCLIをインストール


npm install -g @vue/cli

次にプロジェクト作成

$ vue create my-project

色々質問されるから今回は以下のように作成

? Please pick a preset: 
  example (vue-router, vuex, stylus, babel, eslint, unit-mocha) 
  default (babel, eslint) 
❯ Manually select features 

? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
❯◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fal
lback in production) (Y/n) y

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle a
ll, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Us
e arrow keys)
❯ In dedicated config files 
  In package.json

? Save this as a preset for future projects? (y/N) n

あとはプロジェクトのディレクトリに移動し、


$ npm run serve

うまくローカルホストで表示されれば成功です。
これでVue.jsのセットアップは完了です。

Firebaseのプロジェクト作成とVue.jsとの連携

まずFirebaseのアカウントを作ってください。

「プロジェクトの作成」でプロジェクトの名前を入力
次にアナリティクスの登録を聞かれるので、今回は設定しないを選択
これだけでプロジェクトの作成ができます。

次に、プロジェクト内の管理画面でウェブを選択し、コードを取得します。


<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "XXXXXXXXXX",
    authDomain: "XXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXX.firebaseio.com",
    projectId: "XXXXXXXX",
    storageBucket: "",
    messagingSenderId: "XXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXX"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

このコードです。
ここの「script」で囲まれている部分を使います。
そして、Vue CLIで作ったプロジェクトのsrcの下に「firebase.js」ファイルを作成してこのコードを貼り付けてください。

src/firebase.js


<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "XXXXXXXXXX",
    authDomain: "XXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXX.firebaseio.com",
    projectId: "XXXXXXXX",
    storageBucket: "",
    messagingSenderId: "XXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXX"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

保存したら、firebaseを初期化します。


npm install firebase --save

次に「firebase.js」に以下のようにコードを変更追加し、さらに「main.js」で最初に読み込むように設定します。ここのやり方は色々あるので好みの問題です。

src/ firebase.js


import firebase from "@firebase/app";
import "@firebase/auth";
import "@firebase/firestore";
import "@firebase/storage";

const config = {
    apiKey: "XXXXXXXXXX",
    authDomain: "XXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXX",
    storageBucket: "",
    messagingSenderId: "XXXXXXXXXX",
    appId: "XXXXXXXXXX"
};
export default {
    init() {
        firebase.initializeApp(config);
    }
  }

src/main.js


import Vue from 'vue'
import router from './router'
import store from './store'
import Firebase from "./firebase"

Vue.config.productionTip = false

Firebase.init();

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

ポイントは、main.jsで「Firebase.init()」で読み込ませているところです。これを忘れるとうまく動きません。

これでVue.jsとFirebaseの連携ができるようになりました。

Buefyの設定

Buefyの設定は簡単です。
npmでインストールします。


npm install buefy

次に、「main.js」に以下の加えます。


import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

これで完了です。アイコンを使いたい場合は「head」要素にCDNを追加すれば使えるようになります。

シンプルだけど強力な組み合わせ

以上で簡単に開発する準備ができました。
個人開発など一人の開発ならこれで事足りるので本当に便利だなぁと思います。
ホスティングもFirebase hostingで行えば本当に一瞬ですからオススメです。

最後にツイッターをやっている方はぜひ「キモツイ」で遊んでみてください。
キモツイ