Reactコンポーネントのフォールバックどこに置く？
はじめに Reactでは、コンポーネントがエラーを発生させた場合はErrorBoundaryで、読み込みが完了するまではSuspenseで、それぞれフォールバックコンポーネントを指定できます。 ...
3
2
Comment0
168 search resultsShowing 1~20 results
Stocked
You need to log-in
TypeScriptで0~nまでの整数だけを取る型を作る
TypeScriptで特定の範囲の整数だけを取り得る型を作りたいことがあります。 0~3までのように短い場合は以下のように列挙して書くことが多いです。 type ShortRange = 0 |...
51
21
Comment4
hslをrgbから計算して、色相・彩度・明度を理解する
はじめに hslはHue(色相)、Saturation(彩度)、lightness(明度)から成り立っています。 色相は赤、緑、青のような有彩色の色のみの性質を表すものです。 色相はCSSにおい...
5
3
Comment2
useReducerについて理解を深める
useReducerについて useReducerはReactでstateを扱うために用意されたhooksのひとつです。 reducerと呼ばれるstateの更新ロジックを集約した関数を用いてs...
5
1
Comment0
Advent of Code 2024 with Denoに参加しました
はじめに DenoのブログでAdvent of Codeを紹介していたのを見て、2024年の12月1日から12月25の期間でAdvent of CodeにDenoを使って参加しました。 この記事...
5
1
Comment0
フロントエンドエンジニアが色彩検定UC級を受験した話
はじめに 私は仕事でフロントエンドを専門とした開発を行っています。 フロントエンドの領域のうち、特に興味を持っているのが見た目に関わる部分です。そのため、最近は開発に必要な知識だけではなく、デザ...
1
1
Comment0
Vercelが提供するFeature flagsをNext.jsと合わせて利用する
はじめに VercelではFeature Flagsと呼ばれる特定の機能のOn・Offを切り替える機能が提供されています。 Feature Flagsを使えば、特定のタイミングでのみ表示させる機...
3
1
Comment0
Next.jsが提供するuserAgentでユーザーの情報を取得する
Next.jsにはuserAgentを用いて、リクエストからユーザーエージェントを獲得する方法が提供されています。 import { NextResponse, userAgent } from...
3
1
Comment0
【Next.js】unstable_cacheの代わりに推奨しているuse cacheについて
はじめに Next.jsのバージョン14では非同期関数の結果をData Cacheに保存する関数としてunstable_cacheが用意されていました。 const data = unstabl...
8
1
Comment0
useCallbackは関数を作成しないらしいので実装を見て他に知らない仕様がないか確認する
はじめに useCallbackはReactのライフサイクル間でキャッシュされた関数を返すReactのhooksです。 主に依存配列等で比較するReactの機能で、関数が同一であることを保証する...
2
0
Comment0
microCMSを使って、Next.jsのDraft Modeを学ぶ
はじめに Next.jsのDraft Modeと呼ばれる手法を使えば、ヘッドレスCMSの下書きコンテンツを公開されているアプリケーションで確認することができます。 この記事ではmicroCMSを...
2
0
Comment0
Panda CSSでデザイントークンの型制約を一部だけ緩めるプラグインを作成する
はじめに Panda CSSではデザイントークンの埋め込みをサポートしています。 定義したデザイントークンには型がつきIDEなどで入力の補助をしてくれるのでデザイントークンのタイピングミス等を防...
3
0
Comment0
Panda CSSで動作をカスタマイズする
はじめに Panda CSSはChakra UIが手がける型安全なCSS in JSのツールです。 Panda CSSでスタイリングを行うときは、パッケージを直接使うのではなく、生成したファイル...
2
0
Comment0
画像に名前を与えるときはaria-labelかtailwindcssのsr-onlyか
tailwindcssにはsr-onlyと呼ばれるクラスが提供されています。 sr-onlyを付与したクラスは内容を支援技術に伝えつつ視覚的には非表示にならないスタイリングとなっています。 .s...
2
0
Comment0
ReactのアイコンライブラリとしてLucideを利用する
はじめに 自作のアイコンはもちろん、Material DesignやFont Awesomeのアイコンをsvgファイルとしてコピーしたり、React IconやMaterial UIのMater...
3
0
Comment0
Intl.DisplayNames()を使って言語、地域、文字体系を翻訳する
JavaScriptの標準組み込みオブジェクトにIntlオブジェクトがあります。国際化APIの名前空間で、localeに依存した数値のフォーマットや分かち書きを行うプロパティを持ちます。 この記...
2
0
Comment0
Intl.RelativeTimeFormat()を使って日本語で相対時刻を取得する
JavaScriptの標準組み込みオブジェクトにIntlオブジェクトがあります。国際化APIの名前空間で、localeに依存した数値のフォーマットや分かち書きを行うプロパティを持ちます。 この記...
2
1
Comment0
Subpath ImportsでStorybook中でだけ特定のファイルをモックする
Storybookではコンポーネントの計算を行い、その結果をStoryとして出力します。 いくつかのコンポーネントは外部のデータソースをもとに計算されます。 APIを用いたデータの取得はmswを...
1
0
Comment0
透過色を利用したときに表示される色を計算する
以下の画像は#50E3D2の背景に#FFFFFFを80%透過させた前景を被せたものです。 全景の部分に表現されている色は何色になるのでしょうか。 スポイトで色を取り出してみると、#50E3D2の...
3
1
Comment0
背景色が勾配を持つ時のコントラスト比について考える
はじめに Web上で利用されるアクセシビリティに対する自動テストのツールの1つとしてaxeがあります。 このツールは直接の利用はもちろん、eslint-plugin-a11yやstorybook...
1
0
Comment0
168 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles