DockerでReactとFlaskAPIを実行してみる
はじめに 最近アサインされた案件で、FrontをReact（Vite）、BackendをPython（Flask）というものがありました。 FrontとBackendを別々のメンバーが開発を行うため、結合し…
続きを読む →カテゴリー: JavaScript
PlayWrightを使ったE2Eのビジュアルリグレッションテストを作成してみた。
最近、業務でWebアプリケーションのE2EテストやUIテストにおけるツールとしてPlaywrightを使用したので使い方などを簡単にまとめてみました。 Playwrightとは？ Playwrightは、Webアプリケー…
続きを読む →ブラウザでの手書きサインが簡単に実装できるjQueryプラグインのjSignatureを使ってみた
はじめに ここ数年、各種保険の契約や口座の開設等を店舗で行う機会が何度かあったのですが、昔ながらの紙とペンではなく、 タブレットからWebページを開き、入力していく方式が殆どでした。 その際、手書きのサインもタブレットか…
続きを読む →Laravel×ViteでJSのwindowオブジェクトに代入した値が参照できず困った話
はじめに Viteでビルドしたapp.js内でwindowオブジェクトに値を設定しても何故か参照できずエラーになってしまいました。 app.js import jQuery from ‘jquery’; window.$…
続きを読む →Flutter2のwebview_flutterではJavaScriptのalert()やconfirm()が使えない
2022/06/27時点での備忘録となります。 環境 Flutter: 2.5.3 webview_flutter: 2.1.1 Flutter公式で提供されているWebViewとなります iOS: 15.5 Boots…
続きを読む →LaravelでAmazon S3からファイルを非同期でダウンロードする方法
はじめに LaravelでAmazon S3からファイルを非同期でダウンロードする方法をご紹介します。 環境 PHP 8.0.16 Laravel Framework 9.6.0 PHP public function …
続きを読む →IntelliJ IDEAでファイルのテンプレートを追加する
はじめに 最近プライベートでReact+TypeScriptを触っているのですが、 毎回コンポーネントのテンプレートを書くのが地味にめんどうです。 IntelliJ IDEAではファイルのテンプレートを追加できるようなの…
続きを読む →Vue.jsで動的に追加された要素に対してイベントハンドラをバインドする方法
はじめに Vue.jsで動的に追加された要素に対してイベントハンドラをバインドする方法をご紹介します。 良くない例 以下、ポップアップを表示するためのjQueryプラグインMagnific Popupを使ったサンプルです…
続きを読む →SortableJSでリスト内の要素をボタン押下で移動させたい
はじめに リスト間で要素をドラッグ&ドロップで移動できるUIを作る際に、 SortableJSというライブラリを使うと簡単に実現できそうだったため、 導入してみました。 SortableJSのデモサイト ドラッ…
続きを読む →Create React Appで作成したプロジェクトをLaravelに組み込む
はじめに Create React Appで作成したプロジェクトをLaravelに組み込んでみたかったので、今回チャレンジしてみました。 環境 WSL2（Ubuntu 20.04.2 LTS） Laravel 8.52….
続きを読む →DropzoneJSの導入
ドラッグ&ドロップによるファイルアップロードを手早く実装する為に、DropzoneJSというライブラリを利用しました。 以下公式サイトです。 https://www.dropzonejs.com/ 導入 今回はK…
続きを読む →APIクライアントとスタブAPIサーバーのプログラムを自動生成して、疎通確認をする
はじめに 今回はAPIクライアントとスタブAPIサーバー（以下、スタブサーバー）のプログラムを自動生成して、 疎通確認を行います。プログラムの自動生成にはOpenAPI Generatorを使います。 APIクライアント…
続きを読む →Angular Materialのダイアログを画面内でのみ移動できるようにする
はじめに Angular Materialの公式サイトにドラッグで移動できるダイアログのサンプルがありますが、 こちらのサンプルはダイアログを画面外に移動できてしまいます。 公式サイトのサンプルは以下のリンクから項目「A…
続きを読む →Angular Materialのセレクトボックスにフィルタリング機能を付ける
はじめに Angular Materialで用意されているセレクトボックスにはフィルタリング機能がありません。 しかし、カスタマイズをすることで簡単にフィルタリング機能を付けることができます。 今回はその一例をご紹介した…
続きを読む →EventEmitter利用時のExpressionChangedAfterItHasBeenCheckedErrorの暫定的回避法
はじめに Angularでの開発中、ngIfでExpressionChangedAfterItHasBeenCheckedErrorが発生する現象に遭遇しました。 こちらの原因と暫定的対応案に関しての記事になります。 発…
続きを読む →