jest Vueのテスト実行時の Unknown custom element: – did you register the component correctly? というエラーの解決方法

jest : バージョン27.4
Vue : バージョン 2.5.2

Vueのユニットテストをjestを使って取り組んでいます。

TimeTable.vueというvueファイルのテンプレート部分に次のような記述がありまして、

<template>
  <div>
    <h2 class="date">
      <font-awesome-icon icon="caret-left" />
      {{ dateGetParameter }}
      <font-awesome-icon icon="caret-right" />
    </h2>
 …後略

テストのほうは下記の通りです。

/**
 * @jest-environment jsdom
 */

import Vuex from "vuex";
import {createLocalVue, shallowMount} from "@vue/test-utils";
import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";

const localVue = createLocalVue()

localVue.use(Vuex)

describe('TimeTable', () => {
  let store
  let getters
  beforeEach(() => {
    // gettersのモック
    getters = {
      getCompanyId: () => 1
    }
    // モックストア
    store = new Vuex.Store({
      getters
    })
  })

  it('should render correct contents', () => {
    const wrapper = shallowMount(TimeTableVue, {
      components: {},
      computed: {
      },
      store,
      localVue})
    expect(wrapper.find('save').exists()).toBe(true)
  })
})

テンプレートの<font_awesome-icon>の部分で下記のエラーが出ます。

jest Unknown custom element:  - did you register the component correctly?

下記に解決方法がありました。

https://aznric3boi91.medium.com/5-mins-to-fix-jest-tests-for-app-with-unknown-custom-element-did-you-register-the-component-23ae75d5620b

スタブを作ると解決します。

テストスクリプトの //追加 とある部分を追加します。

/**
 * @jest-environment jsdom
 */

import Vuex from "vuex";
import {createLocalVue, shallowMount} from "@vue/test-utils";
import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome' // 追加


const localVue = createLocalVue()

localVue.use(Vuex)

describe('TimeTable', () => {
  let store
  let getters
  beforeEach(() => {
    // gettersのモック
    getters = {
      getCompanyId: () => 1
    }
    // モックストア
    store = new Vuex.Store({
      getters
    })
  })

  it('should render correct contents', () => {
    const wrapper = shallowMount(TimeTableVue, {
      stubs: ['font-awesome-icon'], //追加
      components: {},
      computed: {
      },
      store,
      localVue})
    expect(wrapper.find('save').exists()).toBe(true)
  })
})
毎日寒いですね!スタブってみると酢豚を想像しちゃいますね!

Vue.js ComputedとDataの違い オブジェクトを代入したときに元のオブジェクトへの影響の違い

Vue 2.5.17

ここのところ、Vueに取り組んで3か月強の私です。

Vueを書くときによく出てくる「Computed」と「Data」ですが、Computedは「算出プロパティです。」、Dataは「UIの状態となるデータのオブジェクトです。」という説明があります。

正直、この説明だと「なるほどね!理解した。」というには北海道と横浜ぐらい遠かったです。特に、Computedはキャッシュがあるとか、リアクティブではないデータの検知はしない、というのもよくわかりませんでした。(>_<)
そこで、いろいろ試してみました。特に、元のオブジェクトに対する影響、表示がどうやって更新されるか、ComputedとDataの違いについて調べています。

次のようなサンプルを作りました。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@2.5.17"></script>

</head>
<body>
<div id="app">
    <p>【Data】{{ lancerEvolotionData.type }} {{ lancerEvolotionData.color }} <br>
        ドライバー:{{lancerEvolotionDriver()}}</p>
    <p>【Computed】{{ rx7Computed.type }} {{ rx7Computed.color }} <br>
        ドライバー:{{rx7Driver}}</p>
    <button @click="changeColorOfCar">車の色を変える</button>

</div>
<script>
    class Car {
        constructor(type, color) {
            this.type = type
            this.color = color
        }

        setColor(color) {
            this.color = color
        }
    }
    let lancerEvolotion = new Car('ランサーエボリューション', '白')
    let rx7 = new Car('RX7', '黄色')

      var vm = new Vue({
        el:'#app',
        data:{
            lancerEvolotionData: lancerEvolotion,
            lancerEvolotionDriver: function (){
                if(lancerEvolotion.color ==='白'){
                    return lancerEvolotion.color + 'は岩城清次'
                }else if(lancerEvolotion.color ==='黒'){
                    return lancerEvolotion.color + 'は須藤京一'
                }
            },
        },

        computed:{
            rx7Computed() {
                return rx7
            },
            rx7Driver() {
                if(this.rx7Computed.color ==='黄色'){
                    return this.rx7Computed.color + 'は高橋啓介'
                }else if(this.rx7Computed.color ==='白'){
                    return this.rx7Computed.color + 'は高橋涼介'
                }

            }
        },

        methods:{
            changeColorOfCar() {
                lancerEvolotion.setColor('黒')
                console.log(lancerEvolotion)
                console.log(this.lancerEvolotionData)
                console.log(this.lancerEvolotionDriver)

                rx7.setColor('白')
                console.log(rx7)
                console.log(this.rx7Computed)
                console.log(this.rx7Driver)

            }
        }
    })


</script>
</body>
</html>

内容は、まず最初にシンプルに車のオブジェクトがあります。

画面は次の通りです。


「ランサーエボリューション」という「白い車」と「RX7」という「黄色い車」があります。

ランサーエボリューション は主にVueの中ではDataで扱われ、RX7は主にComputedで扱われます。

それぞれ、車の色によりドライバーが変わります。

ランサーエボリューションの白 → 岩城清次
ランサーエボリューションの黒 → 須藤京一
この移り変わりは、Data→lancerEvolotionDriver で行っています。

RX7の黄色 → 高橋啓介
RX7の白 → 高橋涼介
この移り変わりは、Computed→rx7Driverで行っています。

というようになっています。(頭文字Dを知らない人にはわかりにくいネタで申し訳ありません。)

先程も書いたように、最初は次のような画面ですが

「車の色を変える」ボタンをクリックします。すると、次のようになります。

ランサーエボリューション(長い…変数名も長かった💦)は黒に変わり、ドライバー名も変わっているのに対して、RX7は白に変わりましたが、ドライバー名が変わっていません。

consoleを見てみますと次のようになっています。

Dataは何やら複雑なオブジェクトですね。

これ、一番最初のconsole.logで出力されている もともとのlancerEvolotion は

    let lancerEvolotion = new Car('ランサーエボリューション', '白')

で宣言したシンプルなオブジェクトのはずが、Vueに変換されて何やら複雑なオブジェクトになってますね。中身を展開してみると、次のようになっています。

そうでなければ、 オリジナルのオブジェクトである、lancerEvolotion の変化をVueが感知することができませんもんね。
これが、リアクティブってことなんですね!!(しゅごい)

一方のComputedに代入されたrx7のほうはなんの変化もありません。

最初に作った

let rx7 = new Car('RX7', '黄色')

と同じ、シンプルなオブジェクトです。また、computedのrx7DriverをConsoleで見ると、

 
黄色は高橋啓介

というシンプルな文字列が入っています。( ˊᵕˋ )

「え?そしたらComputedってなんなん?よく、文房具の数とか単価とかを入力していくらか計算するやつあるじゃん。」

となると思います。

これ、Computedが参照するデータがリアクティブであれば、Computedがリアクティブに計算してくれるようです。

試しに、さっきのコードのrx7をComputedからDataに移します。

//★変更ポイント(⋈◍>◡<◍)。✧♡

って書いてあるところだけが変更ポイントです。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@2.5.17"></script>

</head>
<body>
<div id="app">
    <p>【Data】{{ lancerEvolotionData.type }} {{ lancerEvolotionData.color }} <br>
        ドライバー:{{lancerEvolotionDriver()}}</p>
    <p>【Computed】{{ rx7Data.type }} {{ rx7Data.color }} <br>
        ドライバー:{{rx7Driver}}</p>
    <button @click="changeColorOfCar">車の色を変える</button>

</div>
<script>
    class Car {
        constructor(type, color) {
            this.type = type
            this.color = color
        }

        setColor(color) {
            this.color = color
        }
    }
    let lancerEvolotion = new Car('ランサーエボリューション', '白')
    let rx7 = new Car('RX7', '黄色')

    var vm = new Vue({
        el:'#app',
        data:{
            lancerEvolotionData: lancerEvolotion,
            lancerEvolotionDriver: function (){
                if(lancerEvolotion.color ==='白'){
                    return lancerEvolotion.color + 'は岩城清次'
                }else if(lancerEvolotion.color ==='黒'){
                    return lancerEvolotion.color + 'は須藤京一'
                }
            },
            rx7Data:rx7 //★変更ポイント(⋈◍>◡<◍)。✧♡
        },

        computed:{
            rx7Driver() {
                if(this.rx7Data.color ==='黄色'){ //★変更ポイント(⋈◍>◡<◍)。✧♡
                    return this.rx7Data.color + 'は高橋啓介' //★変更ポイント(⋈◍>◡<◍)。✧♡
                }else if(this.rx7Data.color ==='白'){ //★変更ポイント(⋈◍>◡<◍)。✧♡
                    return this.rx7Data.color + 'は高橋涼介' //★変更ポイント(⋈◍>◡<◍)。✧♡
                }
            }
        },

        methods:{
            changeColorOfCar() {
                lancerEvolotion.setColor('黒')
                console.log(lancerEvolotion)
                console.log(this.lancerEvolotionData)
                console.log(this.lancerEvolotionDriver)

                rx7.setColor('白')
                console.log(rx7)
                console.log(this.rx7Data)
                console.log(this.rx7Driver)

            }
        }
    })


</script>
</body>
</html>

すると「車の色を変える」ボタンをクリックした後の動作が次のように変わります。

ちゃんと、RX7の白に乗っているのは高橋涼介、と表示されました!!!

パチパチ。


以下は余談ですが、色々とほかにもわかったことがあって、最初に紹介したコードの

lancerEvolotion.setColor('黒')


をコメントアウトしてみると、そもそもボタンをクリックしても何も起こりません。Console.logで出力されるオリジナルのオブジェクトの中身もComputedの中身も変わってはいますが、画面が更新されません。
Dataはリアクティブなので、画面の更新をしてくれますが、Computedだけ更新しても、画面の更新はしてくれないのです。
Dataを更新すると、画面の更新をしてくれるので、Computedも新しい値でついでに表示の更新がされる、という仕組みのようです。

<参考>

リアクティブの探求 Vue2

リアクティブの探求 Vue3 Vue2のドキュメントよりわかりやすい

Computed Properties

S課長のオーリス。若き日は峠を攻めてたとかいないとか。
S課長のオーリス。若き日は峠を攻めてたとかいないとか。

PHPStorm 自分が一つ前にいたブランチ名を取得する

大した話じゃなくって恐縮なんですが💦。

プルリクとかを見るたびに、しょっちゅうブランチを切り替えていると、自分がどのブランチにいたのかわからなくなりませんか?

例えば

①自分の作業 hogehoge ブランチ
②プルリクが来た相手のブランチ someone ブランチ

となっていて、someoneブランチに切り替えてプルリクをレビューした後に、いざ自分の作業に戻るとき

「あれ?なんてブランチにいたんだっけ…。」

ってよくなります。

ローカルのブランチも50個ぐらいずらっと並んでいて、目視で探すことができません。hogehogeブランチとかパンチの聞いた名前ならいいんですが、大体忘れがちな名前をつけてしまっています。

自分が今いるブランチを見るなら、

git log

とかでできるんですけどね。

自分が前にいたブランチを見る方法がわかりませんでした。

今も、めちゃいい方法とは思いませんが、下記の方法でやってます。

(もっといい方法があれば教えてください。m(_ _)m)

私はGitのクライアントはPHPStormを使ってますので、それでのやり方を紹介します。

①左下のGitタブをクリック
②Logタグをクリック
③下記のBranchというところをAllにします。そうすると、全員のコミットの歴史が見れますのでそこから自分のコミットを見ると、ブランチ名が書いてあります。

④隣のUserというところでも絞り込みができますので、ここで「me」を選ぶと自分のコミットの歴史だけ見せてくれます。コミットログがめちゃ並んでて自分のコミットがわからない場合は使ってください。

Nightwatchを解説&導入してみる① 初めの一歩 サンプルコード有

環境:Windows10,  Nightwatchのバージョン:1.7.11

Nightwatchとは

NightwatchというjavascriptのE2Eのテストフレームワークを導入してみます。

Nightwatch公式サイト
https://nightwatchjs.org/

Nightwatchとは、日本語で宿直とかいう意味ですね。夜、見回りをする警備員さんのことです。

E2E はEnd to Endの略です。

End to End は何かといいますと、ここでの意味は、ユーザーがする動作のようなテストを行うことですね。
例えば、ログインのページだと
「ユーザーがログインIDとパスワードを入力欄に入力し、ログインボタンをポチっと押すと、ログイン後のページに遷移して『ようこそ 〇〇様』と表示する。」
という流れをテストすることです。

ユニットテストがプログラムのメソッド単位でテストを行うことに対比して言われることが多いでしょう。

さて、先の例で行きますと
「ユーザーがログインIDとパスワードを入力欄に入力し、ログインボタンをポチっと押すと、ログイン後のページに遷移して『ようこそ 〇〇様』と表示する。」
このテストを人間がいちいち行うのはまったくもって手間ですよね!
しかも、複数ブラウザで行うとかなると、手間×4ぐらいあります。

なので、ここは自動化しようというわけです。

余談ですが、弊社ではこのテストをGhost Inspectorというツールを使ってやっていました。が、 Ghost Inspector はソースコードの品質を高めるために役に立っているかというと、そうではなく、サービスの死活監視的に用いられているので、今回改めてもうちょっとjavascriptのプログラム的なテストフレームワークを導入してみようかなと思った次第です。(意識高く!(`・ω・´))

表題は導入してみる、となっていますが、本サービスに導入するかどうかは今の時点で未定です。(笑) ただ、開発環境としては作ってみたというところですね。

私自身はjavascript界からちょっと離れていました。
(こいつ、いつもこれ言ってんな…。(´ω`))
初心者なので、間違っているところ等ありましたら教えてください。

ではいよいよ、Window10にNightwatchをインストールします。

手順① Nightwatch をインストールするディレクトリを作る

まっさらな洗い立てのシーツのようなディレクトリを作ります。
ここでは、

D:\study\nightwatch

に作りました。

手順② Nightwatch自体をインストール

コマンドプロンプトを開いて、そのディレクトリ内に移動し、

npm install nightwatch

とやります。

すると下記の図のようにいろいろメッセージが表示されてインストールができます。

もし、npmがわからない、npmが動作しない場合は、node.jsとnpmをインストールして使えるようにしてください。
npmとはパッケージマネージャーと呼ばれるツールで、こういうフレームワークをインストールする場合などに使います。ナウなjs界では欠かせない存在なので、躊躇せずにインストールしてみてください。

これで、Nightwatch自体がインストールされました。

手順③ ChromeのWebdriverをインストール

同じディレクトリで

npm install chromedriver --save-dev

とやります。すると、下記のように表示されて、インストールが終わります。

これは何をインストールするのかというと、ChromeのWebdriverをインストールしています。手っ取り早く言うと、これがChromeを動作させてして、テストの時に使ってくれるわけです。

手順④ Selenium Serverインストール

次に同じディレクトリで、次のようにやります。

npm install selenium-server --save-de

すると、上記のようにメッセージが表示されて、インストールができます。

今回は、Selenium Serverというのをインストールしました。 Selenium Server は何かというと、③のChrome DriverはChromeを動作させますが、ほかのブラウザなどを動作させたりします。(現時点ではいらないのかもしれない)

これで、インストールするものは一通り終わりです。

手順⑤設定などを準備する

まだ設定などが必要です。さっきから使っている

D:\study\nightwatch

の中に、node_modulesというディレクトリができていて、ここにウジャッといろいろなモノが入っています。その中のnightwatchというディレクトリに、examplesというディレクトリがあって、そこにサンプルが入っています。ありがたや~


D:\study\nightwatch\node_modules\nightwatch\examples\tests

testというディレクトリの中の、ecosia.js というファイルをコピーして、nightwatchディレクトリの中に、test というディレクトリを作って、そこに貼り付けます。

このようになっているはずです!

ecosia.jsを参考までに貼っておきます。ちな、ecosiaはドイツの検索エンジン?らしいです。

describe('Ecosia.org Demo', function() {

  before(browser => browser.url('https://www.ecosia.org/'));

  test('Demo test ecosia.org', function (browser) {
    browser
      .waitForElementVisible('body')
      .assert.titleContains('Ecosia')
      .assert.visible('input[type=search]')
      .setValue('input[type=search]', 'nightwatch')
      .assert.visible('button[type=submit]')
      .click('button[type=submit]')
      .assert.containsText('.mainline-results', 'Nightwatch.js');
  });

  after(browser => browser.end());
});

これがテストスクリプトです。解説すると、

https://www.ecosia.org/

というサイトを開き、タイトルが ’Ecosia’ で、検索ボックスにnightwatchと入れて検索して、クリックすると、Nightwatch.js という文字列が含まれるページが出てくる、というテストですね。

次の2つのファイルをD:\study\nightwatch に追加します。

global.js

const chromedriver = require('chromedriver');

module.exports = {
    before: function (done) {
        chromedriver.start();
        done();
    },

    after: function (done) {
        chromedriver.stop();
        done();
    }
};

使うWebdriverなどを指定しています。

nightwatch.conf.js

// Autogenerated by Nightwatch
// Refer to the online docs for more details: https://nightwatchjs.org/gettingstarted/configuration/
const Services = {}; loadServices();

module.exports = {
  // An array of folders (excluding subfolders) where your tests are located;
  // if this is not specified, the test source must be passed as the second argument to the test runner.
  src_folders: ["test"],

  // See https://nightwatchjs.org/guide/working-with-page-objects/
  //page_objects_path: 'page-objects',

  // See https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
  custom_commands_path:  '',

  // See https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
  custom_assertions_path: '',

  // See https://nightwatchjs.org/guide/#external-globals
  globals_path : './globals.js',

  webdriver: {},

  test_settings: {
    default: {
      disable_error_log: false,
      launch_url: 'https://nightwatchjs.org',

      screenshots: {
        enabled: false,
        path: 'screens',
        on_failure: true
      },

      desiredCapabilities: {
        browserName : 'firefox'
      },

      webdriver: {
        start_process: true,
        server_path: (Services.geckodriver ? Services.geckodriver.path : '')
      }
    },

    

    firefox: {
      desiredCapabilities : {
        browserName : 'firefox',
        alwaysMatch: {
          acceptInsecureCerts: true,
          'moz:firefoxOptions': {
            args: [
              // '-headless',
              // '-verbose'
            ]
          }
        }

      },
      webdriver: {
        start_process: true,
        port: 4444,
        server_path: (Services.geckodriver ? Services.geckodriver.path : ''),
        cli_args: [
          // very verbose geckodriver logs
          // '-vv'
        ]
      }
    },

    chrome: {
      desiredCapabilities : {
        browserName : 'chrome',
        'goog:chromeOptions' : {
          // More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
          //
          // This tells Chromedriver to run using the legacy JSONWire protocol (not required in Chrome 78)
          w3c: false,
          args: [
            //'--no-sandbox',
            //'--ignore-certificate-errors',
            //'--allow-insecure-localhost',
            //'--headless'
          ]
        }
      },

      webdriver: {
        start_process: true,
        port: 9515,
        server_path: (Services.chromedriver ? Services.chromedriver.path : ''),
        cli_args: [
          // --verbose
        ]
      }
    },

    edge: {
      desiredCapabilities : {
        browserName : 'MicrosoftEdge',
        'ms:edgeOptions' : {
          w3c: false,
          // More info on EdgeDriver: https://docs.microsoft.com/en-us/microsoft-edge/webdriver-chromium/capabilities-edge-options
          args: [
            //'--headless'
          ]
        }
      },

      webdriver: {
        start_process: true,
        // Download msedgedriver from https://docs.microsoft.com/en-us/microsoft-edge/webdriver-chromium/
        //  and set the location below:
        server_path: '',
        cli_args: [
          // --verbose
        ]
      }
    },

    //////////////////////////////////////////////////////////////////////////////////
    // Configuration for when using the browserstack.com cloud service               |
    //                                                                               |
    // Please set the username and access key by setting the environment variables:  |
    // - BROWSERSTACK_USER                                                           |
    // - BROWSERSTACK_KEY                                                            |
    // .env files are supported                                                      |
    //////////////////////////////////////////////////////////////////////////////////
    browserstack: {
      selenium: {
        host: 'hub-cloud.browserstack.com',
        port: 443
      },
      // More info on configuring capabilities can be found on:
      // https://www.browserstack.com/automate/capabilities?tag=selenium-4
      desiredCapabilities: {
        'bstack:options' : {
          userName: '${BROWSERSTACK_USER}',
          accessKey: '${BROWSERSTACK_KEY}',
        }
      },

      disable_error_log: true,
      webdriver: {
        timeout_options: {
          timeout: 15000,
          retry_attempts: 3
        },
        keep_alive: true,
        start_process: false
      }
    },

    'browserstack.local': {
      extends: 'browserstack',
      desiredCapabilities: {
        'browserstack.local': true
      }
    },

    'browserstack.chrome': {
      extends: 'browserstack',
      desiredCapabilities: {
        browserName: 'chrome',
        chromeOptions : {
          w3c: false
        }
      }
    },

    'browserstack.firefox': {
      extends: 'browserstack',
      desiredCapabilities: {
        browserName: 'firefox'
      }
    },

    'browserstack.ie': {
      extends: 'browserstack',
      desiredCapabilities: {
        browserName: 'internet explorer',
        browserVersion: '11.0'
      }
    },

    'browserstack.safari': {
      extends: 'browserstack',
      desiredCapabilities: {
        browserName: 'safari'
      }
    },

    'browserstack.local_chrome': {
      extends: 'browserstack.local',
      desiredCapabilities: {
        browserName: 'chrome'
      }
    },

    'browserstack.local_firefox': {
      extends: 'browserstack.local',
      desiredCapabilities: {
        browserName: 'firefox'
      }
    },
    //////////////////////////////////////////////////////////////////////////////////
    // Configuration for when using the Selenium service, either locally or remote,  |
    //  like Selenium Grid                                                           |
    //////////////////////////////////////////////////////////////////////////////////
    selenium_server: {
      // Selenium Server is running locally and is managed by Nightwatch
      selenium: {
        start_process: true,
        port: 4444,
        server_path: (Services.seleniumServer ? Services.seleniumServer.path : ''),
        cli_args: {
          'webdriver.gecko.driver': (Services.geckodriver ? Services.geckodriver.path : ''),
          'webdriver.chrome.driver': (Services.chromedriver ? Services.chromedriver.path : '')
        }
      }
    },

    'selenium.chrome': {
      extends: 'selenium_server',
      desiredCapabilities: {
        browserName: 'chrome',
        chromeOptions : {
          w3c: false
        }
      }
    },

    'selenium.firefox': {
      extends: 'selenium_server',
      desiredCapabilities: {
        browserName: 'firefox',
        'moz:firefoxOptions': {
          args: [
            // '-headless',
            // '-verbose'
          ]
        }
      }
    }
  }
};

function loadServices() {
  try {
    Services.seleniumServer = require('selenium-server');
  } catch (err) {}

  try {
    Services.chromedriver = require('chromedriver');
  } catch (err) {}

  try {
    Services.geckodriver = require('geckodriver');
  } catch (err) {}
}

テストのプログラムはtestディレクトリにあるよ、などが書いてあります。

手順⑦テストを実行

ハァハァ、いよいよ…。テスト実行です。D:\study\nightwatchで

   .\node_modules.bin\nightwatch -v 

とやります。

おおっ!

OK. 5 assertions passed. (1.818s

と表示されましたね!!

そして、皆さんの目の前で、ブラウザっぽい画面が一瞬開いて検索っぽいことをやっているのが見えたでしょうか?

今回は基本のキでインストールして動作させるところだけで終わってしまいました。


Firebase javascript でやる初めの一歩 Windows10

私はFirebaseをアプリへのPush通知では使ったことはあるけれども、Webの方では使ったことはないので、ちょっとやってみたという感じです。

環境はWindows10です。

早い話が、下記の動画を見ればすぐわかります(笑)。

全部英語ですが、まぁソースコード見てると大体わかりますし、どうしても英語聞きたいときは0.5倍ぐらいで聞くとなんとか聞けたりします。

わかりにくいところだけ補足します。

①apikeyとかなんなのかわからない。

const firebaseConfig = {
    apiKey:これ
};

ですよね~。

これは、Firebaseの方で先にアカウントを作っておいて、「アプリを登録」ということをする必要があります。

下記のFirebaseのサイトにアクセスして、プロジェクトを作ります。

https://console.firebase.google.com/u/0/?hl=ja

その後、作ったプロジェクトに「アプリを追加」します。

Firebaseの画面 左上の「プロジェクトの概要」をクリックするとこれになります。

アプリを</>というマークがJavascriptですので、Javascriptで登録します。

すると、このapiKeyとかprojectIdとかをコピペすればすむ画面が出てきます。

②ブラウザから動作させてみる

動画の通り、index.jsとindex.htmlを作ります。

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-analytics.js';;

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
    apiKey: "置き換えてね",
    authDomain: "置き換えてね",
    projectId: "置き換えてね",
    storageBucket: "置き換えてね",
    messagingSenderId: "置き換えてね",
    appId: "置き換えてね",
    measurementId: "置き換えてね"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
console.log(analytics);
console.log("にゃー");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="index.js"></script>
</head>
<body>
ウキー
</body>
</html>

動画内では

serve

というコマンドがさらっと使われております。

これ、Node.jsのコマンドなんですね。事前に

$ npm install -g serve

とやって、serveをnpmでインストールしておきます。

(この動画の冒頭でもnpm使っているので、npmが入っていないということはないと思いますが、npmが入っていなければnpmを先に入れましょう。)

はい、それではindex.jsとindex.htmlがおいてあるディレクトリ(ここではC:\study\firebase)で

serve src

とやります。

http://localhost:5000/

へアクセスします。

ちゃんとブラウザのコンソールにAnalyticsのオブジェクトが表示されましたね。