コンパイラかく語りき

import { Fun } from 'programming'

VSCodeでTabキーを押すとエディタ画面の入力状態が終わってしまう

超小ネタ。 VSCode でコーディングをしていたら、入力動作がおかしくなった。 入力中に Tab キーを押すと、エディタ画面からカーソルが消える。つまり入力状態が終わってしまう。 調べてみると、「Toggle Tab Key Moves Focus」というモードが ON になっていた…

React testing library のテスト環境にて、tsyringe による依存注入を有効にする

tsyringe による依存注入 tsyringe を使うと TypeScript アプリケーションにて依存注入を実現することができます。 GitHub - microsoft/tsyringe: Lightweight dependency injection container for JavaScript/TypeScript アプリケーションコードは以下のよ…

yup で true が選択されていることのバリデーション(規約同意など)

yup

スキーマバリデーションの yup の話です。 例えば、会員登録時の規約の同意など、必ず true になってほしい項目があります。 その際のスキーマ定義は以下の通り。 yup.object({ accept_terms: yup.boolean().default(false).isTrue('同意が必要です') }) isT…

yup で require なフィールドを持つオブジェクト自体を optional にする方法

yup

スキーマバリデーションのライブラリである yup の話です。 以下のようなネストになったスキーマがあるとします。 yup.object({ foo: yup.object({ bar: yup.string.require() }) }) foo は require ではないので任意項目のはずです。しかし、内部の bar が …

webpackで特定のwarningを消す(Craco対応

webpack で特定の warning 表示を消す場合。 ignoreWarnings を使う。 module.exports = { //... ignoreWarnings: [ { module: /module2\.js\?[34]/, // A RegExp }, { module: /[13]/, message: /homepage/, }, /warning from compiler/, (warning) => true…

【TypeScript】yup のカスタムバリデータを追加する

yup でカスタムバリデータを追加する方法です。 サンプルとして「日付っぽい文字列かどうか」のバリデータを追加しました。 Dateライブラリには dayjs を利用しています。 import * as yup from 'yup'; import dayjs from 'dayjs'; import customParseFormat…

yup のバリデーションで min 指定でも optional にする方法

yup

スキーマバリデーションの yup の話です。 github.com ※この記事執筆時点での yup のバージョンは 1.1.1 となります。 文字列の最小文字数を指定するには、 min を使います。 const schema = yup.object().shape({ password: yup.string().default('').min(8…

AntDesign のバージョンアップデートにより、css-dev-only-do-not-override に差分が発生してしまう問題への対処法

React のコンポーネントライブラリである AntDesign の話。 AntDesign を利用したコンポーネントに対するスナップショットテストが落ちていた。スナップショットの変更箇所は以下のような感じ。 <div class="ant-select _select_1826e5 css-dev-only-do-not-override-w8mnev ant-select-single ant-select-show-arrow"> </div>

【AntDesign】Calendar コンポーネントに日本語ロケールを指定する

概要 React のコンポーネントライブラリである Ant Design ant.design その Ant Design の Calendar コンポーネントにて、日本語ロケールを指定する方法。 結論 結論から書くと、以下のように指定しました。 ※アプリケーション全体から参照できるよう、共通…

Sass の変数を CSS Custom Properties として利用

CSS

CSS Custom Propeties(いわゆるCSS変数)は便利です。 この変数定義に Sass の変数を利用する方法。ちょっとハマったのですが、 #{ } というシンタックスを挟む必要がありました。 /* variables.scss(変数定義ファイル) */ $some-color: #64ff00; /* glob…

【Next.js】API CORS 設定

Next.js で作成した API が別ドメインからアクセスされる時、CORS の問題が発生すると思います。 対応策について調べてみたところ、設定ファイルである next.config.js の header 項目が利用できる、との情報を見つけました。 nextjs-ja-translation-docs.ve…

【CSS】複数行の時だけ line-height を指定する

複数行のときだけ line-height を効かせたい場合があります。 逆に言うと、1行なら特に指定したくない。 この場合、CSS の first-line 疑似要素が使えます。 span { font-size: 14px; // 文字サイズ line-heigth: 20px; // 複数行の場合、行間を開けたい } s…

React Custom Hooks のユニットテストにて、状態が更新されない問題(cleanup することで解決)

React の Custom Hooks に対して、ユニットテストを書いていました。 testing framework には vitest を利用。 さらに、@testing-library/react を追加。renderHooks という関数が含まれており、Custom Hooks のテストを実行することができます。 testing-li…

【HTML】videoタグの autoplay が動かない問題への対応

HTML の video タグを使って、動画を自動再生(autoplay)するよう設定していました。しかし、自動再生されない…。 MDN を見てみる。 developer.mozilla.org すると、こんな記述が。 一部のブラウザー (Chrome 70.0 など) では、 muted 属性がないと autopla…

【JavaScript】classList は Array 化することで順序削除、一致削除などができる

ちょっとしたアニメーションの実装などのために JavaScript から HTML の class を付け外しすることはあるかと思います。 そのときに利用するのが classList です。 const target = document.querySelector('.target') target.classList.add('foo') target.c…

【CSS】四つ角にだけ枠線をつける

サンプル このように、CSS だけで四つ角に枠線を付ける方法。 コード 以下のように書けばOK。 <div class="box">ここにテキスト</div> .box { position: relative; } .box:before { content: ""; background-image: linear-gradient(to right, #17172d, #17172d 40%, transparent 40…

flutter アプリで表示するウェブビューを React.js/Next.js で作る(ウェブビュー判定、イベントハンドラ呼び出し)

概要 ネイティブアプリを開発する際に一部のページをウェブで表示する、という要件はあると思います。(いわゆるウェブビュー) その際に、ウェブビューを React.js と Next.js で作成する方法です。 ※ちなみに筆者はネイティブアプリ開発の経験はありません…

【VSCode】最近使用した項目を開く(File: Open Recent)選択時に、新しいウィンドウで開くようにする settings.json 設定

VSCode には 最近使用した項目を開く(File: Open Recent) というコマンドがあります。 選択した項目を、VSCode で開くことができます。 筆者は Github のレポジトリごとに VSCode のウィンドウを開くようにしています。(例: UI 開発のコードベースと API …

Node.js REPL で ... more items と省略された内容を全て出力表示する

> console.log(new Array(120).fill('foo')) // 120個の要素 'foo' を持つ配列を表示 [ 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'fo…

Node.js v18 にアップグレードしたら storybook のビルドが通らない問題への対応(error:0308010C:digital envelope routines::unsupported)

プロジェクトの Node.js v18 にアップグレードした。 すると、storybook のビルドが通らなくなってしまった。 $ npm run storybook 「wdm」: wait until bundle finished: node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Erro…

Next.js のビルド時に SyntaxError: Unexpected token < in JSON が出てしまう問題への対処法(package-lock.json が原因の場合)

問題 Next.js でビルドする時に、エラーが発生した。 $ npm run build > project-name@1.0.0 build > next build info - Loaded env from /Users/me/project-name/.env.local info - Linting and checking validity of types SyntaxError: Unexpected token …

【Recharts】スタイル指定に CSS Custom Properties を利用する方法

React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。 そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。 <YAxis // ...ここにその他の props たち style={{ fontSize: '12px', fontWeight: 300, fontFamily: 'oswald' }} /> CSS Custom Properties を利用したバージョンが以下</yaxis>…

【tsparticles】canvas 要素への z-index 指定方法や、前面に出過ぎる問題への対処法

問題 tsparticles を使うと、サイト内に動的な演出ができて便利です。 github.com しかし直近リリースされた v2.4.0 に対応したところ、tsparticles の canvas が前面に出てきてしまいました…。 github.com 原因 原因は、canvas の inline style を消すのが…

【tsParticles】preset links の線の色を変更する

tsParticles を利用すると、ウェブページ内に動的な演出を追加できます。 github.com 今回、 tsParticles の links というプリセットを設定しました。 github.com ところが、ドキュメントを見ても線の色を変える方法が分からない…。 ソースコードを見ていた…

Next.js v13 で導入された @next/font を使って、ウェブフォント読み込みを最適化する

概要 Next.js v13 がリリースされました。 nextjs.org 主な変更点の1つが @next/font の追加。@next/font には以下のような特徴があります。 Automatically optimizes your fonts, including custom fonts(カスタムフォントを含めたフォントの最適化) Remo…

【React/Next.js】SSG/SSR 環境で React Portal を利用する方法

React Portal を使うと、コンポーネント構造の制約を受けずに、アプリケーション内の任意の箇所に DOM を挿入することができます。 モーダルの実装などで役に立つかと思います。 ja.reactjs.org そんな React Portal ですが、Next.js の SSR/SSG を利用した…

【CSS】display: flex 指定の子要素の高さが伸びてしまう問題への解決策

解説 例えば、以下のような構造。 div の中に2つの要素があり、display: flex で横並びにしている。 ここで、右側の要素は height: 100px を指定している。 すると、左側の要素も height: 100px となってしまう。 左側の要素の height を保つ 方法。 解決策 …

Next/Image を使った png 画像が storybook 上で表示されない問題への対処法

Next.js の Next/Image を利用しているコンポーネントを storybook で表示しようとしたところ、 png 画像が表示されませんでした。(以下のような状態。 Devtools の Network タブで見ても、404 が返ってきていました。 なぜかsvg 画像は問題なく表示されて…

【Angular】Service のメソッドを Template(html) から直接呼ぶ

問題 Angular でのアプリケーション開発では、Service を利用してロジックを分離することがあるかと思います。 Template から Service のメソッドを呼び出すには、普通は Component を経由するかと思います。 @Injectable() export class FooService { doSom…

Jest の toHaveBeenCalledWith の中身に snapshot を使いたい場合

Jest でモック関数を作成し、呼び出し内容をテストしたい場合があると思います。 そのときに、toHaveBeenCalledWith を使えば、呼び出し時の引数もテストできます。 しかし、 toHaveBeenCalledWith の中身が複雑・膨大になるような場合は、snapshot を利用し…