Maven IntelliJでデバッグできない

Maven。♪それは君が見た光~ 僕が見た希望~♪

3年ぶりぐらいに mvn とか使った私です。

ちょっととあるJavaで書かれたたオープンソースのプロジェクトのソースコードが読みたくて、ダウンロードしたけれども、IntelliJですぐデバッグできなかったのでメモです。

① Run → Edit Configurationsをクリック

②+マークをクリックした後、Mavenを選択

③Runのところに、本来はテストコードを走らせるところに

mvn test

なので

test

だけ入力すればいいんですが、IntelliJでデバッグするために

-DforkCount=0

というオプションが必要です。

なので、IntelliJのRunの欄に下記のように入力します。

-DforkCount=0 test


【Vue】Composition API のCDNなどでできるめちゃ簡単なサンプルコード

どうも、Vueに時々取り組んでいる私です。

さて、Composition APIというものがありまして、Composition APIを説明してくれているサイトもいっぱいあります。公式サイト

ただ、私はまずは触ってみたいと思うタイプなので、サクッと試したいなと思って
「 Composition API  サンプル」
と検索してみても、nodeモジュール入れましょうとか、TypeScriptで作りましたとか、そういうちょっと手間がかかるサンプルが多かったので、私のような人のために載せておきます。

というわけで、以下Vueとcomposition APIはCDNから読み込みでやる(URLで読み込むということです)めちゃくちゃ簡単なサンプルです。

Vueのバージョン:2.6.10
Composition API:1.7.1

<!DOCTYPE html>
<html lang=”ja”>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body >
<div id ="sample">
    <div>性<input type="text" v-model="lastName"></div>
    <div>名<input type="text" v-model="firstName"></div>
    <div>フルネーム:{{fullName}}</div>
</div>
<script src ="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script>
<script type="text/javascript">
    const ref = VueCompositionAPI.ref
    const computed = VueCompositionAPI.computed

    new Vue({
        el:'#sample',
        setup(){
            const lastName = ref('渋川')
            const firstName = ref('剛毅')
            const fullName = computed(() => lastName.value +' '+ firstName.value)
            return {lastName, firstName, fullName}
        }
    })

</script>
</body>

上記をコピペしてsample.htmlという名前で保存して、ブラウザで開けばできます。

ここではComposition APIとはなんだとか、上記のコードの解説はしません。

私的にはこちらの記事がわかりやすかったです。

https://kobatech-blog.com/vue-composition-api/


Scala java.lang.UnsupportedOperationExceptionが起きる大体の原因

Scalaをやるのは2年ぶりの私です。

で、このエラーが頻発して悩んでいます。(>_<)

大体は、下記が理由で起こります。

あなたが触っているその変数、Immutableじゃない??

Scalaでは List とかもImmutableです。

val で宣言された変数はImmutableです。


ポエムみたいな投稿ではありますが、自分用のメモとしても書いておきます。

スカラベ

繰り返しを行う setInterval() の中でのエラー処理 サンプルコード有

javascriptで〇秒おきに〇〇を行うなどをするにはsetInterval()という関数を使いますが、これを実行したときのエラー処理がちょっと難しいので書いておきます。

まずは普通のsetInterval()

まずは普通のsetInterval()ですが、次のように普通にやってみます。

<!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">


</div>
<script>
  function helloWorld() {
    console.log("こんにちは、");
    try {
      setInterval(function(){
        console.log("日本");
      },1000);
    }
    catch (err) {
      console.log("なんかしらのエラー処理");
    }
    console.log("世界");
  }

  helloWorld();


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

これを実行して、consoleを見ると、次のように出力されています。(画面には何も出力されませんのでご注意を)

私はFirefoxを使っているのでFirefoxの開発者コンソールの画面ですが、次のようになっています。

最初に「こんにちは」と「世界」が出力され、次に一秒ごとに「日本」が出力されています。最近の開発者コンソールは、同じ出力をまとめてくれるので、上記のスクショだと「日本」の文字の横に「131」という文字が青地に白で書いてありますが、これが連続して出力された回数です。

わざとエラーを起こしてみる

さて、これだとエラーが起こりえないので、わざとエラーを起こしてみます。

<!-- HTML 部分は省略 -->

    function helloWorld() {
        console.log("こんにちは、");
        try {
            setInterval(function () {
                throw new Error("エラーを投げるよ");
                console.log("日本");
            }, 1000);
        } catch (err) {
            console.log("なんかしらのエラー処理");
        }
        console.log("世界");
    }

    helloWorld();

最初に実行したときは、「こんにちは」「世界」が出力され、そのあとのsetInterval() 内での処理はUncaught Errorが発生して、ストップしてしまいます。
1秒間隔での処理もストップしてしまいます。

なぜ普通のtry~catch ではダメなのか

catch 節に行かないのはどうしてでしょうか。

javascript がエラーをキャッチできるのは、最初に setInterval を起動したときだけです。

「ハ?setInterval は1秒ごとに実行されてるじゃんかよ~?!」

と思うと思います。私も最初はこの説明を聞いても

「な… 何を言っているのかわからねーと思うが…おれも何をされたのか…わからなかった…」

というポルナレフ状態でした。

まぁ、setInterval を起動するのが元のtry~catch節です。setIntervalの中身の実行が1秒ごとに行われるときには、元の try~catch節 の知りえない世界でやられているので 元の try~catch節 ではキャッチできないということですね。

たとえ話でいうと、私がペットの猿のウキ吉に

「これから出かけるので、5分ごとに玄関に誰か来ないか見張りに行ってね。」

と命令したとしましょう。これが最初の実行で、setIntervalの起動です。この時点ではエラーが起こっていないということです。

しかし、私はそのあと出かけてしまうので、ウキ吉がちゃんと5分ごとに見張りをしているかは私にはわかりません…。

ウキ吉の行動がsetInterval の中のコードということになります。

setInterval()内でのエラーをキャッチ するサンプルコード

なので、setInterval() 内でのエラーをキャッチするためには、 setInterval() 内で エラー処理をする必要があります。

私はエラーがあった時の処理がわかりやすいほうがいいので、下記のようにPromiseを使う方法が好きです。

下記のサンプルでは、1秒ごとに2分の1の確率で、猿の留守番が失敗することになります。

しかし、猿の留守番は見張られているので、成功・失敗により処理がわかれます。ちゃんと留守番をしているとバナナがもらえて、留守番をしていないと叱られるということです。

<!-- HTML部分は省略 -->
    function rusuban() {
        console.log('ウキ吉の留守番開始')
        setInterval(
            function () {
                console.log('時間が経過')
                monkeyWatch()
                    .then(
                        function (msg) {
                            console.log(msg)
                            console.log('エライ!ご褒美のバナナだよ')
                        }
                    )
                    .catch(
                        function (err) {
                            console.log(err)
                            console.log('こらっ ダメでしょ!')
                        }
                    )
            },
            1000)

        function monkeyWatch() {
            return new Promise((resolve, reject) => {
                if (Math.random() > 0.5) {
                    console.log('ちゃんと留守番している')
                    resolve('成功')
                } else {
                    console.log('留守番していない!')
                    reject('失敗')
                }
            })
        }
    }

    rusuban();

上記の実行結果は下記のようになります。

失敗しても、1秒後には次のターンが来ます。

ちょっとコードが長くなっちゃうのが欠点ではありますね💦


jest Jest encountered an unexpected token import とかexportが読み込めない

vue.jsのテストでjestを利用しています。

jestのバージョンは 27.4.3
nodeは 16.13.0です。

次のようなエラーが出てテストが実行できずに困っていました。

   Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /var/www/html/hoge/webpack_src/components/timeTable/templates/TimeTable.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>
                                                                                      ^

    SyntaxError: Unexpected token '<'

       8 | import Vuex from "vuex";
       9 | import {createLocalVue, mount} from "@vue/test-utils";
    > 10 | import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";
         | ^
      11 | import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome' // 追加
      12 |
      13 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (webpack_src/test/unit/specs/class/timeTable/TimeTableVue.spec.js:10:1)

node_modulesの中のimport, export が書いてあるところで止まっちゃうんですよ。

これについて平たく説明すると、jest は nodeで動作するのですが、nodeはexport や import という文法を知らないので、SyntaxErrorになってしまうというわけです。

下記のサイトに、解決方法が載っていました。有難うございます!

ts-jestが外部ライブラリをimportできない場合の対処方

https://media-massage.net/blog/ts-jest%E3%81%8C%E5%A4%96%E9%83%A8%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92import%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6%E6%96%B9/

このとき設定ファイルを.babelrcとして作成してしまうと意図通りに動作しないのでbabel.config.jsとすること。.babelrcで設定ファイルを作るとデフォルトではnode_modules内のファイルには設定が適用されない。

そうだったのか!目からうろこでした(泣)

というわけで、今まで.babelrc で書いていたところを babel.config.js にしたら直りました。

リンク先とほぼ同じですが、babel.config.js を載せておきます。

module.exports = {
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "useBuiltIns": "usage",
                "targets": "> 0.25%, not dead",
                "corejs": 3
            }
        ]
    ],
    "env": {
        "test": {
            "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
        }
    }
}

jest.conf.jsは次の通り。

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/webpack_src/$1',
    '\\.(css|less)$': 'identity-obj-proxy'
  },
  transform: {
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  transformIgnorePatterns: [
  ],
  testPathIgnorePatterns: [
    '<rootDir>/webpack_src/test/e2e'
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/webpack_src/test/unit/setup'],
  coverageDirectory: '<rootDir>/webpack_src/test/unit/coverage',
  collectCoverageFrom: [
    'webpack_src/**/*.{js,vue}',
    '!webpack_src/main.js',
    '!**/node_modules/**'
  ],
  testURL: 'http://localhost/',
  globalSetup: '<rootDir>/webpack_src/test/unit/global-setup.js'
}

次の

transformIgnorePatterns: [
]

は空なので、指定しなくてもいいかと思いそうですが、これを削除すると、前述のエラーが出ます。

Jestの公式サイトによると、

https://jestjs.io/ja/docs/configuration#transformignorepatterns-arraystring

transformIgnorePatterns  のデフォルト値が

 
{ "transformIgnorePatterns": ["/node_modules/", "\\.pnp\\.[^\\\/]+$"] }

なので、書かないとnode_modules の中をtransform してくれないからじゃないかなって考えています。(←ただの推測でちゃんと確認してません。)