コンテナクエリ（@container）とは、親コンテナ要素に基づいてスタイルを定義できる CSS の機能です。メディアクエリ（@media）では画面全体の幅に応じてスタイルを変更する必要がありましたが、コンテナクエリでは任意の要素に基づいたスタイルを適用できるため、より柔軟なレイアウトの実現が可能です。 .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 600px) { /* カードの親要素の幅が 600px 以上の場合、2 列に変更 */ .card { display: grid; grid-template-columns: 1fr 1fr; } } コンテナクエリを使用してスタイルを適用する場合、コンテナクエリ単位を使用できます。コンテナクエリ単位は、親コンテナ要素に対する相対的な

よくあるモーダルの実装について考えてみましょう。モーダルは名前のとおり、現在開いているか閉じているかの状態（モード）があります。状態を管理するときには、React の useState フックを利用する方法がまっさきに思い浮かぶのではないでしょうか？ import { useState } from "react"; import Dialog from '@ui/components/Dialog'; import Button from '@ui/components/Button'; const App = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button variant="outlined" onClick={() => setIsOpen(true)}> Open dialog </B

最小限のコードで動く最も汚いコードから始める 2023.09.02 コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。 コードを書くときに最も大切なことってなんだろう？聡明な読者諸君ならご存知だろうが、コードは書く時間よりも読む時間のほうが長い。だから他人に読まれることを意識して、読みやすい「良いコード」を書かなくっちゃならない。コンポーネントは適切な粒度で分割されていて、適切な名前がつけられている。型システムに安全性だって守られてるし、最新のなんとかアーキテクチャにも準拠

Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ

テストコード内では条件分岐を書かないようにする 2023.01.21 誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコードの中に入り込んだ例を見てみましょう。 テストコードは誰でも読める愚直なコードであることが求められます。テストコードにはある種のドキュメントのような、コードの仕様を説明する役割が求められているためです。テストの期待結果が変数になっていて、定義元までジャンプしないと値を確認できないだとか、条件分岐やループが入り込んでいて複雑性が上がっている状態ですと、素直に読みやすいとは言えません。 コードの中では重複排除をするためにさまざまなテクニックを駆使することがありますが、これは単にテストコード

Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で