Tailwind CSS + daisyUIで作成したコンポーネントを、複数のプロジェクトで共有しようとしたが、単純にコンポーネントのソースだけを読み込んでも、 tailwind.config.js の設定内容が引き継がれない。 設定を手動でコピーするのも現実的ではないため、共有す…

Tailwind CSSで、レスポンシブ用のブレイクポイントの追加や、色などのクラス名を追加する方法を調べたのでメモ。 環境 ブレイクポイントの追加 色の追加 色指定時の注意点 その他のクラスの追加 振り返り 環境 Tailwind CSS v3.2.4。 ブレイクポイントの追…

daisyUIの table クラスを使うと、theadのth,tdタグに書いたアルファベットが大文字に変換される。 また、スクロール可能なテーブルの場合、最初のthタグの位置が固定されてしまう。 ちょっとイマイチな挙動のため、変更する方法を調べたのでメモ。 環境 the…

Notionをissueトラッカーとして使い、調査や設計した内容を書き溜めている。 先日、調査結果を社外のステークホルダーにも共有することとなった。 Notionは外部ユーザーと共有できるが、社内ルールで外部との共有は禁止されており、やるなら稟議が必要。かと…

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーやメニューで、ダブルクリックするとテキストが選択状態になるのを抑制したい。 簡単にできる方法はないかと調べると、CSSだけで選択を無効化できたのでメモ。 テキストの選択を無効にするCSS Tailwind 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 と AWS Amplify を使ったプロジェクトで、TypeScriptのファイルに対してJestのテストを書いたら、 SyntaxError: Unexpected token 'export' エラーが発生。 このエラー自体はよくあるやつだが、設定を大きくいじらず解決する方法を調べるのに結構時…

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

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

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

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

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

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

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

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

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

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