kokh log

主にフロントエンドの備忘録

2023-01-01から1年間の記事一覧

複数行のテキストでも下線追従アニメーション

小ネタです。 ホバー時に下線が左から右に流れるような追従アニメーション、今までafter疑似要素のscaleをtransitionする形で実装していたのですが、 この方法だと複数行対応ができないという欠点がありました。 テキストをinlineブロックで囲う background-…

React Testing Libraryの勉強メモ

React Testing Libraryについて勉強したので備忘録です。 ソースコードはこちら テストの種類 Unit Test : コンポーネント単体のテスト Integration Test:ReduxStoreにアクセスしてコンポーネントテストする E2E:ブラウザでの挙動をテストする Unit Test, …

Next.jsでmp3をimportする

前回はfile-loaderで動画メディアを変換する方法について書きましたが、 今回はmp3ファイルをimportします。 next.config.js のwebpack設定に以下を加えます。 const nextConfig = { ... webpack(config, options) { config.module.rules.push({ test: /\.mp…

ビルドに含めないローカルファイルをレンダラーに取り込む

Electron内で使用する頻繁に更新されるデータ(例えばjsonファイル)を アプリのビルドをせずに、対象のファイルの差し替えで済むようにしました。 フローとしては、レンダラープロセスが読み込む準備ができたら、メインプロセスへリクエストを送り、メイン…

Next.jsでvideoをimportする

publicディレクトリが使えないという制約があり、 Next.jsのコンポーネント内でmp4といった動画メディアをimportする必要がありました。 初期値は動画メディア用のloaderが設定されていないため、 import MOVIE from "../assets/movie.mp4" のようにimportす…