サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
azukiazusa.dev
スタイルの適用範囲を限定する CSS の `@scope` ルール 2024.07.07 `@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する 2024.06.30 CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー(階層)に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。 CSS の @layer ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー(階層)に分けて管理する仕組みです。@layer ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現できます。 @layer ルールは CSS カスケーディングレベル
CSS で条件分岐を行う `@when/@else` ルール 2024.06.22 `@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。
SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう 2024.05.26 SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。 SvelteKit は、Svelte と Vite で構築されたフレームワークです。SvelteKit と Svelte の関係は、Next.js と React、Nuxt.js と Vue.js の関係に似ています。SvelteKit は Web アプリケーションを開発するために必要な以下の機能を提供します。 ル
楽観的更新を行うための React の useOptimistic フック 2024.05.12 React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 React v19 では楽観的更新を行うための useOptimistic フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 楽観的更新を使用している例として、X(旧 Twitter)のいいねボタンがあります
<script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? "time" : "times"} </button> <p>{count} doubled is {doubled}</p> 上記のコード例では通常の JavaScript と同じ方法で変数が宣言されていますが、これは Svelte のコンパイラによりリアクティブな変数に変換されます。count 変数の値が更新されるたびに、UI が自動的に更新されます。$: で始まる式は Svelte のリアクティビティシステムにより自動的に監視され、変更があると再評価されます(構文として
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性(concurrency):Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ(composability):小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理(resource-safety):処理が失敗したとしても、安全にリソースを開放する 型安全性(type-safety):TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理(error handling):構造化された信頼性の高い方法でエラーを処理する 非同期性(asynchronicity
Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim
Remix v2.9 で導入された Single Fetch 2024.04.27 Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機能です。Single Fetch は v2.9 ではフィーチャーフラグとして提供されており、v3 以降ではデフォルトの挙動となります。 Remix に対してドキュメントリクエストが行われると、Remix はリクエストパスにマッチしたすべての loader 関数を呼び出し、それらの結果を組み合わせてページを構築します。対して、ユーザーがクライアントサイドでのページ遷移を行った場合、Remix はそれぞれの loader 関数ごとに個別のリクエストをサーバーに対して行います。
コンテナクエリ(@container)とは、親コンテナ要素に基づいてスタイルを定義できる CSS の機能です。メディアクエリ(@media)では画面全体の幅に応じてスタイルを変更する必要がありましたが、コンテナクエリでは任意の要素に基づいたスタイルを適用できるため、より柔軟なレイアウトの実現が可能です。 .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 600px) { /* カードの親要素の幅が 600px 以上の場合、2 列に変更 */ .card { display: grid; grid-template-columns: 1fr 1fr; } } コンテナクエリを使用してスタイルを適用する場合、コンテナクエリ単位を使用できます。コンテナクエリ単位は、親コンテナ要素に対する相対的な
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor(基準)としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 CSS Anchor Positioning は 2024 年 4 月現在 Chrome Canary でのみ利用可能です。 CSS Anchor Positioning とは、特定の要素を Anchor(基準)としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floati
anonymous default export? anonymous default export とは名前のとおり匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。 export default class { constructor(options) { this.options = options; } } export default function () { } export default 1 export default { a: 1 } export default [1, 2, 3]
use フックは 2024 年 4 月現在、React の Canary および experimental チャンネルでのみ利用可能です。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { const response = await fetch("/api/users"); return response.json(); }; const Users = () => { const users = use(fetchUsers()); return ( <ul> {users.map((user) => ( <li key={user.id}>
親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS 2024.03.30 CSS の @container ルールは、コンテナ(親要素)の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。 CSS の @container ルールは、コンテナ(親要素)の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーは以下の 2 種類に分類されます。 コンテナサイズクエリー:コンテナ要素の現在のサイズに基づいてスタイルを適用する。e.g. @container (min-width: 3
CSS から React コンポーネントを生成する MistCSS 2024.03.23 MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。 昨今のフロントエンド開発では、CSS の手法が多様化しています。特に React での開発では以下のような手法があげられます。 グローバル CSS(エントリーポイントで 1 つの CSS ファイルを読み込む) CSS Modules CSS in JS Tailwind CSS CSS の手法に新たな選択肢が加わりました。それが MistCSS です。MistCSS は CSS in JS になぞらえた JS from CSS というコ
単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader 2024.03.16 Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうかをテストできます。なお、Virtual Screen Reader はあくまでスクリーンリーダーの挙動を模倣したものであり、現実で使われているスクリーンリーダーによるテストを代替するものではないことに注意してください。
フォームのアクセシビリティを考える 2024.03.10 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。スクリーンリーダーといった支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、
http://localhost:3000/ にアクセスすると、Waku のデフォルトのページが表示されます。 React Server Components 冒頭で述べたように、Waku は React Server Components に対応しています。React Server Components は React の新しいパラダイムであり、サーバー上でのみ実行されるコンポーネントを提供します。サーバー上でのみ実行されることで、以下のような利点があります。 クライアントに JavaScript が送信されないため、バンドルサイズを削減できる コンポーネントを非同期関数として、直接データベースや外部 API からデータを取得でき、パフォーマンス上の利点がある React Server Components は、サーバー上でのみ実行されるため、クライアント側でのイベントハンドリングや状態
新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Libra
技術の素振りのために記事を書く 2024.02.20 技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際のプロジェクトで使えるかどうか調査するといった事項があげられるでしょう。ただ素振りするだけではぼんやりと頭に知識が入っている状態になりがちですが、他者への説明というアウトプットを意識することで、コードを書くことによって得られた知見を整理できるようになります。 技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際のプロジェ
■ yokosawa.shop ■https://yokosawa.shop/大人気!世界のヨコサワオリジナルグッズ - World Wide Yokosawa -が絶賛発売中です!!すぐにポーカーで遊べるオリジナルチップセットや、ポーカーやギャンブルをテーマにしたCOOLなアパレルがたくさん!僕たちと一緒にポー... これらのルールはポーカーを数学的に考えたときに導き出せる基礎的な戦術です。しかし、初心者に対していきなり複雑な理屈を含めて教えようとすると、自分が参入するには過度に困難なゲームだと思われてその場でリタイアされてしまう可能性が高いでしょう。 そこで、機械的に守っていれば勝てるようになるルールを伝授することが大切なのです。まずは初心者に勝つ喜びを与えることが重要だからです。この戦術は非常にシンプルに考えられているため、当然大きく勝つことはできないと思います。ですが、初心者同士の
type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform 2024.02.18 Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions や Remix に対応しています。
フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR(Bring Your Own Rerender):レンダリングエンジンを自由に選択できます island
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
Hono で Server-Sent Events によるストリーミングを実装する 2024.02.01 Server-Sent events(SSE)は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。 Server-Sent Events(SSE) は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信になるという特徴があります。また HTTP で通信するため、WebSocket のように独自のプロトコルではないため、運用の負担が少ないというメリットがあり
import "@typespec/http"; using TypeSpec.Http; model User { id: string; name: string; birthday?: utcDateTime; address: Address; } model Address { street: string; city: string; state: string; zip: string; } @route("/users") interface Users { list(@query limit: int32, @query skip: int32): User[]; create(@body user: User): User; get(@path id: string): User; } openapi: 3.0.0 info: title: (title) versio
次のページ
このページを最初にブックマークしてみませんか?
『azukiazusaのテックブログ2』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く