Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

IE11でSymbolは定義されていませんとエラーが出る

参考にさせていただいたページ

解決したい問題

IE11で「'Symbol' は定義されていません。('Symbol' is undefined.)」と表示されました。

解決策

webpackを使用する場合

using Symbol causes exception in IE11 · Issue #514 · zloirock/core-js · GitHub にあるように以下の2行を書くと解決すると思います。

import 'core-js/es/symbol';
Symbol('');

webpackを使用しない場合

reactjs - 'Symbol' is undefined in IE after using babel - Stack Overflow にあるようにscriptタグを追記すると解決すると思います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

jestのcustom reporterを作成してテスト実行結果をcsvファイルで出力する

参考にさせていただいたページ

はじめに

jestのテスト実行結果を出力するためのreporterは比較的簡単に自分で作成することができます。

csvで出力したいという要件があったので、作成してみました。

コードを書く

公式ページの「Configuring Jest · Jest」の例が最も簡素でわかりやすいと思います。

具体的には、「GitHub - mas0061/jest-allresult-csv-reporter: A Jest plugin. Output all test results to CSV.」のindex.jsを参考にすると具体的な書き方がよくわかります。

  • constructorはglobalConfigとoptionsを引数として受け取ることができます。
  • onRunCompleteメソッドは、contextsとresultsを引数として受け取ることができます。

htmlやjunitで出力してくれるモジュール

テスト対象でない子コンポーネントをstubで置き換える | Vuex + vue-test-utils その0006

参考にさせていただいたページ

サンプルコード

たとえばMyComponentの子コンポーネントHogeComponentを置き換えたい場合は、mountするときに以下のようにします。

  wrapper = mount(MyComponent, {
    stubs: {
      HogeComponent: { template: '<div class="hoge" />' },
    },
  });

何ミリ秒か待ってからテストする | Vuex + vue-test-utils その0005

はじめに

Vue.nextTick()を使ってDOMを更新して解決できるようなことは、Vue.nextTick()を使うのが良いと思います。

実装上setTimeout()を使っている箇所があったので、テストコードでも100ミリ秒待ってから実行するなどしました。

Vue.nextTick()で非同期に更新されるDOMのテストについては以下の記事に書きました。

stateの更新に伴うDOMの更新を待ってからテストする(非同期処理で更新されるstateのテスト) | Vuex + vue-test-utils その0004 - Motomichi Works Blog

wait_millisecond.jsの作成とその記述内容

wait_millisecond.jsを作成して以下の通り記述しました。

export default async function waitMillisecond (num) {
  function wait (num) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('resolved');
      }, num);
    });
  };

  const message = await wait(num);
  return message;
};

hoge.spec.jsの作成とその記述内容

import waitMillisecond from '@/path/to/wait_millisecond.js';

〜略〜

describe('サンプル', () => {
  it('サンプル', async () => {
    〜略〜

    // 100ミリ秒待つ
    await waitMillisecond(100).then((message) => {
      // resolved
      console.log(message);
    });

    // テストする
    expect(example).toBe('hoge');
  });
});

stateの更新に伴うDOMの更新を待ってからテストする(非同期処理で更新されるstateのテスト) | Vuex + vue-test-utils その0004

参考にさせていただいたページ

vue-test-utils公式(英語)

vue-test-utils公式(日本語)

Vue.nextTick()について Vue.js公式 (v2.x)

awaitについて

サンプルコード

サンプルとしては、上記した公式ドキュメントを確認していただくのが確実だと思います。

DOMの更新を待ってテストを実行するにはVue.nextTick()を使う。またはVue.nextTick()にasync awaitも組み合わせて使うということになります。

特に はじめる | Vue Test Utils非同期動作のテスト | Vue Test Utils を見るのが良いと思います。

await nextTick()の処理完了を1度待つ

以下のコードはhoge.spec.jsの一部を抜粋したものと考えてください。

// async functionキーワードで関数を定義します。
async function getHoge() {
  const button = wrapper.find('.button');
  button.trigger('click');

  // await演算子でVue.nextTickに渡したコールバック処理の完了を待ちます。
  await Vue.nextTick(() => {
    console.log('DOM updated');
  });

  // ここから下はawait演算子をつけたVue.nextTick()のコールバック処理が完了してから実行されます。
  console.log('find DOM');
  const hoge = wrapper.find('.hoge');
  return hoge;
}

describe('サンプル', () => {
  it('サンプル', () => {
    // Promiseを返す関数の戻り値は必ずreturnしてください。returnしないとテスト結果判定ができず、全て成功扱いになってしまいます。
    return getHoge().then((hoge) => {
      // hogeをテストします。
    })
  });
});

await nextTick()の処理完了を2度待つ

テスト対象が表示されるまでに複数回DOMの更新をしたいときがあると思います。
そんなときのためのサンプルです。

以下のコードはhoge.spec.jsの一部を抜粋したものと考えてください。

// async functionキーワードで関数を定義します。
async function getHoge() {
  const button = wrapper.find('.button');
  button.trigger('click');

  // await演算子でVue.nextTickに渡したコールバック処理の完了を待ちます。
  await Vue.nextTick(() => {
    console.log('DOM updated');
  });

  // ここから下はawait演算子をつけたVue.nextTick()のコールバック処理が完了してから実行されます。
  console.log('1度待った');



  // もう一度await演算子でVue.nextTickに渡したコールバック処理の完了を待ちます。
  await Vue.nextTick(() => {
    console.log('DOM updated');
  });

  // ここから下はawait演算子をつけたVue.nextTick()のコールバック処理が完了してから実行されます。
  console.log('2度待った');

  console.log('find DOM');
  const hoge = wrapper.find('.hoge');
  return hoge;
}

describe('サンプル', () => {
  it('サンプル', () => {
    // Promiseを返す関数の戻り値は必ずreturnしてください。returnしないとテスト結果判定ができず、全て成功扱いになってしまいます。
    return getHoge().then((hoge) => {
      // hogeをテストします。
    })
  });
});

rails sしたらYour Yarn packages are out of date!と表示された

問題のメッセージ

rails s したら以下のようなメッセージが表示されて、rails server起動できませんでした。

========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.7.0
success Folder in sync.
Done in 0.14s.
yarn check v1.7.0
error "@babel/core#@babel/helpers" is wrong version: expected "^7.9.0", got "7.5.5"
error "@babel/core#@babel/template" is wrong version: expected "^7.8.6", got "7.4.4"
error "@babel/core#@babel/helper-module-transforms#@babel/helper-replace-supers" is wrong version: expected "^7.8.6", got "7.5.5"
error "@babel/preset-env#@babel/plugin-transform-classes#@babel/helper-define-map" is wrong version: expected "^7.8.3", got "7.5.5"
error "@babel/preset-env#@babel/plugin-transform-object-super#@babel/helper-replace-supers" is wrong version: expected "^7.8.3", got "7.5.5"
error "@babel/core#@babel/helper-module-transforms#@babel/helper-simple-access#@babel/template" is wrong version: expected "^7.8.3", got "7.4.4"
error "babel-jest#babel-plugin-istanbul#istanbul-lib-instrument#@babel/template" is wrong version: expected "^7.7.4", got "7.4.4"
error Found 7 errors.
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

書いてある通りやってみるが失敗

Please run yarn install --check-files to update. と書いてあるので

yarn install --check-files

を実行してから

rails s

をもう一度してみましたがだめでした。

解決した

一度 node_modulesディレクトリとyarn.lockファイルを削除します。

rm -rf node_modules/
rm yarn.lock

yarn installし直します。

yarn install

rails sしたら無事に起動できました。

rails s

依存パッケージとして深い階層にもともとあったものを、devDependenciesとかdependenciesに追加するとyarn.lockに定義されたバージョンと齟齬が出てエラーになるような感じなのかな?

JavaScript学習日記 その0007 文字列の中に半角文字が混ざっているか判定する

参考にさせて頂いたページ

半角かどうかの判定について

半角カナかどうかの判定について

第一水準漢字と第二水準漢字について

JIS文字コード表について

http://charset.7jp.net/sjis.html

サンプルコード

const hankakuChars = [];
let value = event.target.value;

// 改行を削除
value = value.replace(/\r?\n/g, '');

for (let i = 0; i < value.length; i++) {
  // 1文字ずつ16進数文字コードに変換
  const charCode = value.charCodeAt(i);

  // 半角文字に該当するか16進数で比較
  const isHankaku = (charCode >= 0x0 && charCode < 0x81) ||
    charCode === 0xf8f0 ||
    (charCode >= 0xff61 && charCode < 0xffa0) ||
    (charCode >= 0xf8f1 && charCode < 0xf8f4);

  if (isHankaku) {
    hankakuChars.push(value[i]);
  }
}

if (hankakuChars.length === 0) {
  console.log('半角文字はありません。');
} else {
  console.log(hankakuChars);
}

おまけ

UnicodeUTF-8文字集合(文字セット)と文字符号化方式」について

Log in with Atlassian account

0xから始まる数について

0xから始まる数は16進数です。

半角カナかどうか判定する

半角カナかどうかは「Unicode 内のそれぞれの文字種の範囲 - みちのぶのねぐら 工作室 旧館」によると

半角カナなどは、 0xFF61 - 0xFF9F になります。

とのことです。

Unicode一覧 0000-0FFF - Wikipedia などで、 を検索して確認するとよさそうです。

ヲァィゥェォャュョッーアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン゙゚

第一水準漢字と第二水準漢字かどうか判定する

[JavaScript] 全角文字のJIS第一水準、第二水準などをチェックしたい。あとencoding.js « きんくまデザイン によると、JavaScriptの場合は文字を列挙していくか、ライブラリ使うしかなさそうな感じです。

JIS文字コードと句と点について

JIS文字コード表: http://charset.7jp.net/sjis.html

句と点について: たとえば「&H889F」は、JISでは&Hは16進数であること、88の部分が点、9Fの部分が句を表しています。10進数で表現する場合は句、点はまた違います。