DSLでも出来るようになるよ。こんな感じのことができるよ。(eap)の対応としているので、最新のEAPを落としてくるとプラグインがインストール出来ます。DSL対応したよTweet広告を非表示にするもっと読むコメントを書く2020-02-09Vue.jsのrouteパラメータを$router.paramsではなくpropsで受け取るVue.jsやりたいことrouteパラメータを、コンポーネント側で$router.paramsを使って取り出すのではなく、propsに代入してもらいコンポーネントはvue-routerに依存しないようにする。これをすることで、コンポーネントのプロパティでrouteパラメータを受け取れるようになります。}]コンポーネント側のコードrouteパラメータを受け取るプロパティを定義してあげるだけですね。検証用に、createdでプロパティの内容を出力してみます。}}動かしてみた結果hello/hogeにアクセスすると、コンソールにhogeが出力されているので、プロパティでrouteパラメータが受け取れていることが確認できます。お試しコード(任意のオブジェクトで受け取る)propsでrouteパラメータの値をオブジェクトで受け取ってみたいと思います。コンポーネント側のコードプロパティの型を、stringからMessage型に変更してみます。Message型には、idとmessageのプロパティを定義してみます。'メッセージ'}}}">Hello!!</router-link>動かしてみた結果コンソールにrouteパラメータが出力出来ているので、オブジェクトでの受け渡しが出来ていることが確認できますね。Vue-Routerへの依存をなくした場合のメリットテストを考えた場合、コンポーネントがVue-Routerに依存している場合($router.paramsへ依存している場合)、モックを定義してあげないとテストができなくなってしまいます。$router.paramsを使わずにプロパティー経由で受け取った場合、下のテストコードのように、propsDataをセットアップするだけでテストが実行可能となります。})})$route.paramsに依存している場合は、下のコードのようにmocksでデータをセットアップする必要があります。めんどくさいのと、コンポーネント単体だけじゃなくルート定義などを意識したテストコードになるのが嫌ですね。データベースアクセス後(特定の条件時のみデータベースアクセスが行われていた...)に遅いAPI呼び出しを行った結果コネクションプール不足となった。原因にたどり着くまでめっちゃデバッグしたりログ仕込んだりして大変だったので(3時間ぐらいかかった)、ちっちゃいアプリ作って検証や対応方法などを考えてみる。検証用アプリコントローラざっくりとアプリケーションの内容は下のような感じ。JPAでデータベースアクセスを行ったあとに遅い処理を行っている。検証用なのでAPI呼び出しの代わりにスリープ処理を入れてます。}}設定ファイル再現しやすくするために、プール数とタイムアウト時間を調整しています。同時に複数リクエストを投げると以下のようなエラーが発生します。タイムアウト時間まで待ってみたけど、使えるコネクション見つからなかったよってやつですね。1000ms.原因spring.jpa.open-in-viewという設定がデフォルトでtrueになっていて、Viewの構築時(Restの場合のjsonの構築時)まで、データベース接続が維持されていたため。この設定値、デフォルトがtrueになっていて、明示的に指定しないと起動時にワーニングログが出力されていたけど気づかなかった...データベースアクセス終わったタイミングでコネクション開放されると思ってたから、なかなかここにたどり着けなかった...(まだまだ知らないことがおおいなー)試しに、コントローラの最後でアクティブなコネクション数を出してみると、スリープ後もコネクションがプールに戻っていないことが確認できる。}}実行ログを確認すると、こんな感じにコントローラ終了時には返却されていないコネクションが残っていることがわかる。対応spring.jpa.open-in-viewを無効化してみるapplication.propertiesを下のように変更し、open-in-viewを無効化して、コネクションが開放されるかを確認してみる。spring.jpa.open-in-view=false実行ログを確認すると、先程の結果とは異なりデータベース接続がコントローラ終了時まで維持されなくなったことがわかる。これで、コネクション不足の問題は解決できるが、すでに動いているアプリケーションのこの設定値を変更した場合、間違いなくlazyなプロパティにviewが依存しているため動かなくなっちゃいますね...該当リクエストのデータベースアクセスでJPAを使うのを諦める例えば、下のような感じにJdbcTemplateを使うようにすることで、他の処理には影響を与えずコネクションプール不足問題を解決できるようになる。単純に値を表示したい場合は、下のコードのようにdonut.titleに値を設定する。},})ドーナツチャートの中にタイトルを表示することは出来るけど、フォントのカスタマイズは出来るけど、改行して表示や行毎のフォントのカスタマイズなどは出来ない...*1チャート内の値の表示方法を変更する方法チャート生成後にコールバックされるonrenderedを使って、チャート内に表示される値をカスタマイズしてあげる。実装する内容的には、こんな感じ。}})スタイル定義donut-chart-title-headerクラスがついている部分のみフォントサイズを変更してみる。jest-whenVue.jsのコンポーネントテストをjestを使ってやっている中で、モック用のライブラリのjest-whenを知ったので軽くお試ししてみたよ。jest-whenとはざっくりこんなことが出来るようです。パラメータの内容に応じて、モックが返す値を簡単に定義できるPromiseを返すケースをちょっとだけ簡単に書けるインストールnpm使って、さくっとインストールですね。jest-whenお試ししてみるモック化したい関数を定義する引数を2つ受け取る関数ですね。})})jest-whenを使わなかった場合のテストコードはこんな感じですね。パラメータの検証を後からやらないといけないのでちょっと面倒ですね。/test.spec.js/i.試しに異なるパラメータに書き換えてテストを実行してみるパラメータの値を変更してみます。})モック定義時と実際の呼び出し時のパラメータが違うので、undefinedが戻されてテストが失敗しますね。C3.jsVue.jsなアプリケーションでドーナツチャートを表示する必要があったので、C3.jsを試してみたよ。ドーナツチャートを表示するコンポーネントの作成C3.jsを使ってドーナツチャートを表示するためのコンポーネントを作ります。ドーナツチャートは、C3のExampleを参考にして作ります。'~c3/c3.min.css';</style>DonutChart.vueを使う親コンポーネントdata1からdata4までの4つのデータを渡してチャートを表示するようにしています。]}</script>表示結果いい感じに、ドーナツチャートが表示されました。BootでScalikeJDBCを使ってデータベースにアクセスしてみたお話です。build.gradleデータベース関連のライブラリとScalikeJDBCを足してあげます。Bootのコネクションプールを使うので、application.propertiesに接続設定を行いますspring.datasource.url=jdbc:mysql://localhost:3306/siosiospring.datasource.username=siosiospring.datasource.password=siosiospring.datasource.driver-class-name=com.mysql.cj.jdbc.DriverScalikeJDBCの設定クラスコネクションプール(HikariCPのDataSource)をScalikeJDBCのConnectionPoolに登録してあげます。これは、一度だけやればいいのでConfigurationクラスのPostConstructで行っています。}}データベースアクセスの実装CommandLineRunnerでデータベースに1レコード追加するような処理にしています。Springのアプリケーションの場合、トランザクション制御は@Transactionalで行いますが、ScalikeJDBC側の機能を使ってトランザクション制御を行うので@Transactionalはつけていません。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。