JavaScript

【React】ボタンクリックで入力フォームを動的に追加する

ボタンクリックなどで動的に入力フォームを追加する方法を実装するたびにやり方を忘れるので備忘録で残しておきます。※React 17+ 方法 まず、フォームのデータの型をTypeScriptで定義します 動的フォームを作成す […]
JavaScript

Vue.jsからReactへの移行: Composition APIの機能をReactで実装する方法

Vue.jsからReactへの移行を考えていく中で、Vue.jsのComposition APIにおける機能やパターンをReactでどのように再現できるか疑問に思うことが多かったのでまとめていきたいと思います。 Vue. […]
JavaScript

Vue.js2からVue.js3にアップデートするとVueI18nでSyntaxError: Invalid argumentになった

Vue.jsのバージョンを2→3に上げるといくつかの壁にぶち当たります。その中の一つに多言語ライブラリのVueI18nの中の、翻訳API（$tおよびt関数）が文字列のみを返すようになったことがあります。これにより、これら […]
JavaScript

Vue.js3xでvue-i18nの$tを拡張する方法

Vue.js は柔軟性が高く、ライブラリの拡張も容易に実現できます。特に、公式のプラグインガイドに従ってプラグインを作成することで、多くのカスタマイズが可能です。しかし、既存の$tをapp.config.globalPr […]
JavaScript

Vue.js 3 Composition APIでオブジェクトのプロパティをリアクティブに追加ができない時

reactive と ref の基本 Vue 3のComposition APIでデータのリアクティビティを実現するためのメソッドにreactiveとrefがあります。これらを使用して作成されたデータはリアクティブになり […]
JavaScript

Laravel x Vue.js x TypeScript x Viteでvite-plugin-checkerを入れて型チェックを行う

Vite環境でのTypeScriptはトランスパイルのみ​を行い型チェックは行いません。基本的にVSCodeの拡張機能を使ってエディタ側で型チェックをしてね！という方針のようです。それでも型チェックをしたい場合は以下の公 […]
JavaScript

@vue/compat環境でvuedraggableのバージョンを上げるとエラーになる

Vue2からVue3へのアップデートを@vue/compatを利用して進めていた際、vuedraggableを使用した箇所で予期せぬエラーが発生しました。 問題の発生 Vue2からVue3にアップデートする際、vuedr […]
JavaScript

@vue/compatを使ってVue2からVue3に移行ビルドしたら画面が真っ白になった（Vite）

Vue.jsの2系が2023年12月31日にサポートが終了するということで公式で提供されている@vue/compatを使用してVue 2からVue 3へ移行作業をしました。 開発環境 Vue.js2.7Laravel 9 […]
Laravel

LaravelでPHPUnitを使ってCRUDのテストをする

PHPUnitは、PHPで書かれたアプリケーションのユニットテストを行うためのフレームワークです。ユニットテストは、コードの個々の部分が期待通りに機能するかを確認することができます。今回はLaravelでPHPUnitを […]
JavaScript

Node.jsのOpenSSLバージョンエラー対処法

今回、新しいバージョンのNode.jsで古いコードや依存関係を実行しようとしたときに発生するエラーの対処法をご紹介します。 エラー内容 エラーの内容は以下の通りです これは、Node.jsが暗号化関連の操作（この場合はハ […]