ESETでWebブラウザの枠が緑色になるのを解除する

ESET Internet Securityのアップデートをしたら、Webブラウザのウィンドウ枠が緑色になった。 OSから何からすべてダークテーマにしていると、緑が目立って気持ち悪い。 無効化する方法を調べたのでメモ。 環境 問題 対応 一時的に解除 恒久的に解除 振り返り…

Storybookにアイコンでのロケール変更機能を追加する

React + Next.js で、多言語対応したアプリケーションを開発している。 日本語から、英語などのラテン文字で記述する言語に切り替えた場合、文字が長くなり、レイアウトが崩れることがあるため、各言語でのレイアウトを簡潔に確認したい。 アプリケーション…

npm installで使える国旗アイコンセット

Node.js のアプリケーション内で、国旗の画像を使うことになった。 画像を用意するのが面倒だったので、 npm install して使える国旗のアイコンセットがないか調べたのでメモ。 候補 flag-icons country-flag-icons flagpack Iconify パッケージ選定 その他 …

ESLintでスクリプトファイル名のフォーマットを指定する

Next.js + TypeScriptのプロジェクトで、TypeScriptファイル名はローワーキャメルケースにするようコーディング規約を定めていた。 ただ、Javaのように言語側でフォーマットが決まっていないからか、個人の癖が出やすく、アッパーキャメルケース、スネークケ…

daisyUIのアニメーションを無効化する

小ネタ。 daisyUIのアニメーションの無効化ができないか調べたのでメモ。 問題 対応 アニメーションを一括で無効化 振り返り 問題 daisyUIのコンポーネントを使うと、インタラクションの一環としてか、デフォルトでアニメーションが行われる。 ちょっと困っ…

拡張子がtsxのファイル内で、型パラメータを持ったアロー関数を宣言する

小ネタ。 TypeScriptでは、アロー関数でジェネリック関数を定義できる。 const generic = <T>(value: T) => ... 拡張子が .ts のファイル内では問題ないが、 .tsx のファイル内でこの記法を用いると、 <T> がタグの開始とみなされ、以下のコンパイルエラーが発生す</t></t>…

JavaScriptで文字列を繰り返したり、配列を特定の値で埋める

JestやStorybookで、テストや表示用に長い文字列や配列を用意するがある。 リテラルで書いていた同僚に、コードレビューで「こんなやり方ができるよ」と教えたら感心されたのでメモ。 文字列 文字列の繰り返し 左埋め・右埋め 配列 配列を特定の値で埋める e…

GitLabでForkしたプロジェクトのMR作成時、デフォルトのターゲットプロジェクトを現在のプロジェクトにする

GitLabで、フォークしたプロジェクトに対してマージリクエストを作成すると、デフォルトのターゲットブランチがフォーク元のデフォルトブランチになっている。 面倒なのでプロジェクトを切り離したりしていたが、設定からターゲットプロジェクトを現在のプロ…

Tailwind CSSの特殊なクラスや書き方のメモ

Tailwind CSSを使い始めて3ヶ月ほど経った。 スタイルに対応したクラス以外に、特殊なクラスや書き方があったのでメモ。 環境 子要素にスタイルを指定 テキストの省略 1行テキストの省略 複数行テキストの省略 スペーサー 要素間のボーダー important にする…

StorybookのDecoratorの引数を、TypeScriptで型定義する

Storybookのストーリーファイルをtsxで記述しているが、TypeScriptをstrictモードにしているため、Decoratorを定義する際、引数に型を付けないとエラーになる。 // パラメーター 'Story' の型は暗黙的に 'any' になります。 const decorator = Story => ( <div style={{ maxWidth: '400px' }}> <Story /> </div>…

exportしているモジュールのJSDocやTSDocを必須にする

TypeScriptでの開発時、exportしているモジュールに対してはTSDocを書くようコーディング規約を定めたが、ヒアドキュメントを書く習慣のないメンバーが多く、書き漏れが頻発した。 都度コードレビューで指摘するのも面倒なので、ESLintで何とかならないかと…

TypeScriptのinterfaceやtypeで、関数やオブジェクトの型を定義する

TypeScriptのinterfaceやtypeで、関数やオブジェクトの型を定義する際、どんな書き方をすればいいかちょこちょこ迷うのでメモ。 関数 オブジェクト Union型をキーとしたオブジェクト 振り返り 関数 numberを引数に取り、stringを返す関数の場合、以下のよう…

JavaScriptのタグ付きテンプレートで、JavaのString#formatのような関数を作る

Jestでパラメーター化テストする時の it.each のような、バッククォートで囲った中で ${value} を使う書き方について調べてみたところ、タグ付きテンプレートというらしい。 また、それを使ってJavaの String#format のような関数を作れたのでメモ。 タグ付…

CSSでテキストの選択を無効化する

CSS

ヘッダーやメニューで、ダブルクリックするとテキストが選択状態になるのを抑制したい。 簡単にできる方法はないかと調べると、CSSだけで選択を無効化できたのでメモ。 テキストの選択を無効にするCSS Tailwind CSSのクラス 振り返り テキストの選択を無効に…

create next appした時のグローバルなCSSファイル、exampleによってglobals.cssだったりglobal.cssだったりする

小ネタ。 yarn create next-app したプロジェクトの設定ファイルなどを、 yarn create next-app --example with-jest したプロジェクトにコピーし、 yarn build したら Module not found: Can't resolve 'styles/globals.css' が発生。 TypeScriptプロジェク…

Next.js + TypeScript + AWS AmplifyのプロジェクトでJest実行時に「SyntaxError: Unexpected token 'export'」が発生する

Next.js と AWS Amplify を使ったプロジェクトで、TypeScriptのファイルに対してJestのテストを書いたら、 SyntaxError: Unexpected token 'export' エラーが発生。 このエラー自体はよくあるやつだが、設定を大きくいじらず解決する方法を調べるのに結構時…

WindowsへのWSL2のインストールが、コマンド一発でできるようになっていた

仕事で使っているPCが新しくなったので、WSL(Windows Subsystem for Linux)2を使えるようにしようと思ったら、以前に比べて格段に楽になっていたのでメモ。 WSLインストールコマンド コマンドを打つとwsl.exeの使用法が表示される場合 インストールするLinux…

ESLintの解析結果をGitLabのMRに連携する

以前の記事で、Violationsツールを使い、Javaプロジェクトの静的解析結果をGitLabのマージリクエストに連携した。 最近、Next.jsによる開発を行っており、エディタとして使用しているVSCode上ではリアルタイムでESLintによる解析をしているため、エラーがpus…

Next.jsプロジェクトでTypeScriptのimportの並び順を指定する

JavaやKotlinを長く書いてきて、importの並び順、ソートはフォーマッターにお任せだった。 Next.jsをTypeScriptで書いているプロジェクトでも、Javaと同様、importの順序を統一したいと思い、設定したのでメモ。 環境 ESLintプラグインの導入 .eslintrc の記…

Amplifyで作成したLambdaにロールを付与してSESでメール送信する

前回の続き。 LambdaからSESによるメール送信を行う方法として、前回はIAMを作成し、アクセスキーを使ったが、今回はLambdaにロールを付与してみる。 環境 実装 Lambdaの作成 Lambdaへのロール付与 Lambdaの実装 GraphQL定義およびコードからの呼び出し 振り…

Amplifyで作成したLambdaからアクセスキーを用いてSESでメール送信する

Amplifyで作成したアプリケーションでメール送信をしようと思い、Lambda経由でSESを呼んでみた。 メール送信用のIAMを作成してアクセスキーを使うパターンと、LambdaにSESでのメール送信権限を付与するパターン、両方試したが、まずはアクセスキーを用いるパ…

Google Apps Scriptでプライベート関数を宣言し、「実行する関数を選択」に表示させない

GAS

Google Apps Scriptで宣言した関数が、「実行する関数を選択」に一覧表示される。 privateとして扱いたい関数については非表示にしたいと思い、調べたのでメモ。 試行錯誤 非表示になるパターン 関数名の末尾にアンダースコア クラスにメソッドとして定義 II…

AWS Amplifyでビルドに失敗する

新規プロジェクトにて、バックエンドにAWS Amplifyを使うことにした。 Gitリポジトリと連携して、開発ブランチに変更があるたびにAWS側でビルドするように設定したが、いくつかの原因でビルドに失敗したのでメモ。 環境 問題1 問題1の対応 問題2 問題2の対応…

SikuliXの画像のファイル名を指定する

久しぶりにSikuliXを触ったが、IDEで画像をキャプチャしたときに、ファイル名を指定できたのでメモ。 環境 SikuliX IDE Version 2.0.5。 画像ファイル名について SikuliX IDEで画像キャプチャすると、通常は数値のみ(おそらくエポックミリ秒)をファイル名と…

JavaのString#replaceAllによる正規表現置換でも、$1などでグループ化した文字列を後方参照できる

タイトル通りだが、チーム内の誰もできるということを知らなかったのでメモ。 replaceAllでの後方参照 Groovyの場合 Kotlinの場合 振り返り replaceAllでの後方参照 タイトル通り、第1引数の検索文字列に ( ~ ) で囲んだグループを記述し、第2引数の置換文…

Hibenateで関連エンティティが存在しない場合の例外を抑制する

JPAの実装としてHibenateを使っている。 既存のテーブルに対して、新規にエンティティクラスを追加し、 @OneToOne で関連を追加したが、関連元のフィールドがnullを設定可能になっている。 その状態で関連元のエンティティを参照すると、該当のカラムがnull…

JavaのコレクションファクトリーメソッドやGuavaのImmutableCollectionは、nullを要素に使えない

Java9で追加された List#of などのファクトリーメソッドや、Java10で追加された Collectors#toUnmodifiableList などのイミュータブルなコレクション生成をよく使っているが、nullを含んだ値を指定したら NullPointerException が発生した。 標準APIやGuava…

Spring DATA Repositoryの@Queryによる検索の戻り値を、DTOやインターフェースにする

Spring DATAのJPA Repositoryを使っているが、戻り値をJPA Entity全体ではなく、任意のフィールドだけにしたいという話があった。 単純にSQLのように SELECT フィールド, フィールド... すると Object の配列になるが、それは避けて任意のDTOやインターフェ…

DevToysの1.0.1.0から1.0.3.0への変更点

前回、DevToysについて書いた直後に、v1.0.2.0で日本語化されたりしたので、変更点をメモ。 devtoys.app 環境 変更点 多言語対応 新ツール GZip を利用した文字列の圧縮と展開 SQLフォーマッター、XMLフォーマッター チェックサム 画像フォーマット変換 Choc…

開発者向けの便利ツール集、DevToysを試してみる

窓の杜の記事を見て気になり、DevToysのツール群をひととおり試してみた。 また、Windows以外での代替アプリも調べたのでメモ。 devtoys.app 2022/2/7追記: v1.0.2.0で日本語化されたが、この記事の記述時点では未翻訳のため、ツール名などは英語で記載して…