VueとFirebaseでWebアプリ開発でハマったこと①: Strings must use singlequote, Extra semicolon

概要

最近、Reactの案件よりもVue.jsの案件が多く聞くため、フロントエンドスキルは無いが最低限ググって使えるレベルを身に着けるためにも何か作ろうと思い、まずはAuthを使ったSNS連携をやりたいなと思い、次の記事を参考に作り始めました。

• [Firebase] Authenticationで複数の認証プロバイダへ同時対応する (Web編)
• 認証付きの簡易チャットを作る！

現象

最新のFirebaseコンソールでは、記事を参考にしていると記事の方が古いため若干差異があり、次のスクショに記載されている内容をAPP_NAME-vue/index.htmlとAPP_NAME-vue/src/main.jsに書いていきます。

⑴ Firebaseプロジェクトを開いたFirebaseコンソール上の左上にある設定ボタン -> プロジェクトを設定をクリック

⑵ 全般 -> マイアプリに記載しているCDNを参考にする

ちなみにディレクトリ構成は、VueとFirebaseのファイルを１リポジトリに管理しています。

ちなみにBitbucket使ってて１リポジトリでVueとFirebaseを管理してる。
手動でVueビルド→ファイル操作→Firebaseデプロイがダルいからシェル作ってスクリプト実行するだけにしちゃってこの辺やるのが最近好きなんだよな〜笑https://t.co/OryOxT4Kfp

— gremito #ものラジ QAのスクラムをやり始めたCSM® フリーランス (@grem_ito) July 4, 2020

ですが、$ npm run devを実行すると次のエラーが発生します。

$ npm run dev

> APP_NAME-vue@1.0.0 dev /Users/gremito/git/APP_NAME/APP_NAME-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 27/32 modules 5 active ...ito/git/APP_NAME/APP_NAME-vue/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                         

 WARNING  Compiled with 1 warnings                                                                                                                                   3:07:00


  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:12:11
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
             ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:13:15
    authDomain: "APP_NAME-app.firebaseapp.com",
                 ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:14:16
    databaseURL: "https://APP_NAME-app.firebaseio.com",
                  ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:15:14
    projectId: "APP_NAME-app",
                ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:16:18
    storageBucket: "APP_NAME-app.appspot.com",
                    ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:17:22
    messagingSenderId: "012345678910",
                        ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:18:10
    appId: "1:012345678901:web:01234567890abcdefghifk",
            ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src/main.js:19:18
    measurementId: "G-01234ASDFG"
                    ^

  ✘  http://eslint.org/docs/rules/semi    Extra semicolon               
  src/main.js:20:2
  };
    ^

  ✘  http://eslint.org/docs/rules/semi    Extra semicolon               
  src/main.js:22:39
  firebase.initializeApp(firebaseConfig);
                                         ^

  ✘  http://eslint.org/docs/rules/semi    Extra semicolon               
  src/main.js:23:21
  firebase.analytics();
                       ^


✘ 11 problems (11 errors, 0 warnings)


Errors:
  8  http://eslint.org/docs/rules/quotes
  3  http://eslint.org/docs/rules/semi

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

原因

通常のJavascriptでは問題ないようだが、Vueではダブルクォーテーションとセミコロンを使うとこのエラーが発生する模様。

追記: エラーの詳細について

@serinuntius さんから

記事拝見したんですが、JS、vueとかのエラーではなく、eslint（linter）のエラーですね！npm run devしたときに裏でeslintが動いてるんだと思います。

なので、「ダブルクォーテーションでも使いたい！」と思ったら、ダブルクォーテーションを許可するruleにすれば通るようになると思います！

— serinuntius@no plan inc CTO (@_serinuntius) July 23, 2020

という連絡をもらえて、eslintの機能で発生するエラーだと分かり、上記のエラーはルールを追加するのかそもそもVueプロジェクトを作成した際にeslintを選択していなければ発生しないことがわかりました。

$ vue init webpack $PROJECT_NAME

（省略）

? Use ESLint to lint your code? No

今回は、./config/index.jsの設定を次のように変えることで開発に集中し、デプロイ前やテストなどで後々品質良くするタイミングで戻そうかなと。

'use strict'

const path = require('path')

module.exports = {
  dev: {

    （省略）

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    // useEslint: true,
    useEslint: false,

対策

単純にシングルクォーテーションを使いセミコロンを削除する。

var firebaseConfig = {
  apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: 'APP_NAME.firebaseapp.com',
  databaseURL: 'https://APP_NAME.firebaseio.com',
  projectId: 'APP_NAME',
  storageBucket: 'APP_NAME.appspot.com',
  messagingSenderId: '012345678910',
  appId: '1:012345678901:web:01234567890abcdefghifk',
  measurementId: 'G-01234ASDFG'
}

firebase.initializeApp(firebaseConfig)
firebase.analytics()