Gaji-Labo フロントエンドエンジニアの茶木です。 みなさんは、テスト書いていますでしょうか？テストの重要性はたくさんの方が述べていて、蔑ろにできないものです。しかし、テストを書くのは正直しんどいですよね。 この記事では、自分なりにつかめてきた、あまり辛くなく、ありがたみを感じやすいテストの書き方の手順について個人的な見解をまとめます。特に単体テストについて心がけていることについて述べます。 結論 先に結論です。 新機能追加の単体テストは、コーディング前に書いておくのがおすすめです。 コーディング前に単体テストを書く 機能追加から時間が経つほどテストを書くのは辛くなる 機能追加のタイミングで単体テストを書く テストのない既存機能に後からテストを書くのは、実作業的および心理的に高コストです。 機能が作られた当初の想定を知るのは困難 すでに組み込まれて問題なく動作している（ように見える）

こんにちは森田です。 CSSでコンテンツ内のアイテムを上下中央に配置する時、flex や grid を使っていますか？ もしくは top: 50% や transform: translateY(-50%) を使っているかもしれません。 しかし、現在では1つのプロパティのみで block 要素のまま上下中央揃えが可能です。 align-content プロパティで上下中央揃えが可能に 上下中央にする CSS は、 align-content: center; です。 いや、flexのやつじゃん。と思った方もいるかもしれませんが、このプロパティが flex や grid 以外でも使えるようになりました。 CSS Box Alignment Module Level 3 にて策定された仕様で、ブロック要素やテーブルでも使えるようになります。 デモ 簡単なコードを用意しました。 align-co

こんにちは森田です。 最近 Gaji-Labo では shadcn/ui を使った案件が増えてきています。 shadcn/ui は、Radix & Tailwindを使ったコンポーネントコレクションで、ライブラリではなくコピーして使うことを前提に作られているのが特徴です。 shadcn/ui の CSS は Tailwind CSS で書くのですが、先日そのCSSが効かなくなる現象が起こり、それを解決したのでまとめます。 起こった現象現象としてはコンポーネントに指定したフォントサイズやフォントカラーなどテキスト系のクラスがうまく効かない現象となっていました。 コード的には以下のように Button コンポーネントにカスタムクラスのテキストサイズやテキストカラーを指定していたのですが、うまく聞きませんでした。 ブラウザのデベロッパーツールで見てもクラスが見当たらず、なぜかクラスが消えている状

こんにちは。フロントエンドエンジニアの辻です。 前回に引き続き、他の Storybook Doc blocks について触れていこうと思います。 Storybook Docs ページのカスタマイズStorybook Doc blocks に触れていく前に、まず Docs ページのカスタマイズ方法を紹介します。 前回の Typeset のサンプルコードでチラリと登場していましたが、Storybook v7 では Docs ページのテンプレートを簡単にカスタマイズできます。 例えば、以下のような Tag コンポーネントとその Storybook ファイルがあるとします。 import { PropsWithChildren } from 'react' type Tag = { type?: 'primary' | 'secondary' } export const Tag = ({ typ

こんにちは、フロントエンドエンジニアの茶木です。 前回の記事で Google Calendar ライクな時間入力フォームを作りました。 前回は、簡易実装にしていた時刻のサジェストを考えます。 要件基本形式は HH:MM（例 12:34 ） でGoogle Calendar のものは多様な入力を許容します。 許容するフォーマットコロン無しのどちらも許容 (例12:34, 1234)12時間表記 AM/PM の対応 (例 AM12:34, PM0:00)さらに、入力途中でも、0がパディングされているとみなしてサジェストしてくれます。 (例13 → 13:00 例234 → 23:40) 正規表現 const MATCHER = /(AM|PM)?(\d{1,2}:?\d{0,2})/; const [_, ampm, body] = text.match(MATCHER) || []; if(

こんにちは、上條（mk-0A0）です。 前回書いた『アクセシビリティツリーを調べてみた』ではタイトルの通りアクセシビリティツリーについて調べたのですが、全体を捉えることに重きを置いていて深堀りがあまりできませんでした。そのため、今回は name（アクセシブルな名前）に注目して調べてみました。 改めて name とはWCAG では次のように記載されています。 名前 (name) ソフトウェアが、ウェブコンテンツのコンポーネントを利用者に識別させることができるテキスト。 名前 (name) | Web Content Accessibility Guidelines (WCAG) 2.1 (日本語訳)スクリーンリーダーなどの支援技術が利用者に伝えるテキストを name またはアクセシブルな名前と呼びます。要素内のテキストや aria-label / aria-labelledby / alt

こんにちは森田です。 前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。 前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。 popover 属性を試してみるではさっそく popover 属性を色々試してみましょう。 まずは動作確認として超シンプルなモーダルを作ってみます。 動作確認用超シンプルなモーダルまずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。 モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。 <button type="button" popovertarget="popover">シンプルモーダル表示</button> <div id="popove

import type { Meta, StoryObj } from '@storybook/react' import { Title, Subtitle, Typeset } from '@storybook/blocks' const SAMPLE_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' const TYPOGRAPHY_CONFIG = { type: { 'font-sans-serif': '"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif', 'font-serif': 'Georgia, Times, "Times New Roman", serif'

こんにちは森田です。 2024年は JS なしでモーダルが作れそうです。 今回はそんな HTML のみでモーダルが作れる popover 属性について紹介します。 popover 属性と Popover API についてpopover 属性は Popover API という仕様で策定されており。 その名のとおりHTMLのみでポップオーバー（モーダル）の状態を操作することができます。 参照：ポップオーバー API – Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Popover_API 対応ブラウザ現在のブラウザ対応状況ですが、ほぼ全てのモダンブラウザが対応しています。 HTMLElement API: popover | Can I use..今回もいつものように Firefox がサポートされていなかったですが、つ

こんにちは。フロントエンドエンジニアの辻です。 今回は Storybook Docs と JSDoc による説明文の記述について触れてみます。 Storybook DocsStorybook Docs は、コンポーネントに関連するデータを 1 つのドキュメントにまとめて閲覧する機能です。 Storybook 7 Docs の記事によると、Storybook Docs がリリースされたのが 2019 年で、今日に至るまで様々なバージョンアップがされてきたようです。 そして Storybook v7 にて抜本的な更新が入り、より使いやすくなりました。 特に便利なのが autodocs tag です。 v7 から導入されたこの機能のおかげで、Storybook Docs を簡単に自動生成できるようになりました。 例えば、以下の Button コンポーネントと、その Storybook ファイルが

こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。

こんにちは。Gaji-Labo で DevHR をしている関根です。エンジニア採用や組織作りを担当しています。 先日、Gaji-Labo が主催で『UI＋FE合流点』というトークイベントを開催しました。 ちなみに『UI＋FE合流点』と書いて、読み方は『ユーアイ・エフイー・ジャンクション』です。 名前の通り、UI デザインとフロントエンド開発の「合流点」を目指したイベントです。 イベント本編のトークセッションはもちろん、懇親会でも職種をまたいだ課題感の共有や相談などが活発に行われ、UI デザインとフロントエンド開発における合流の場として盛り上がりました！ 今回のイベントは、フロントエンド側にサイボウズの sakito さん、SmartHR の masuP9 さん、UIデザイン側で Chatwork の守谷絵美さんの3名をゲストにお迎えしました。 笑いあり、納得感ありの名言や迷言が 本編中で印

こんにちは、Gaji-Labo フロントエンドエンジニアの石垣です。 今回は、最近話題の JavaScript 用のオールインワンツールキット「Bun」を触ってみたので、概要と基本的な React アプリケーションの作成方法を紹介します。 Bun とは？Bun は、JavaScript および TypeScript アプリ用のオールインワンツールキットです。 根幹には、Node.js や Deno のように、JavaScript および TypeScript のコードを実行するためのランタイムがあります。 Node.js や Deno と異なるのは、Bun はランタイムだけでなく npm 互換のパッケージマネージャーや Jest 互換のテストランナー、 Webpack 等の代替となるバンドラーなどのツールも含まれている点です。 また、公式ドキュメントによると Bun は高速性を売りにしてお

フロントエンドエンジニアの茶木です。 前回 Next.js におけるレスポンシブ、画面幅でのコンテンツの出し分けについてSSRの観点も含めて考察しました。 今回は、考察結果を踏まえて実装を考えます。 おさらい前回の考察のおさらいです。 スタイルの変更は CSS Media Query が良い要素自体の描画切り替えは MUI useMediaQuery が良い以上が、レスポンシブの切り替えの方法のおすすめでした。 CSS Media queryReact では、DOMツリーの構造の変化をもとに再レンダリングが行われます。再レンダリングは高コストなのでDOMツリーの構造変化を伴わない、スタイルの変更は CSS Media Query による切り替えが最適と考えます。 グローバルCSSを使う方法 @media screen and (min-width: 1024px) { /* PC */ b

フロントエンドエンジニアの茶木です。 Next.js におけるレスポンシブ、PC/SPの出し分けについてSSRの観点も含めて考察します。 具体的には、以下の切り替えについて、どのように実現するかについての考察です。 スタイリングの切り替え要素自体の描画を行うかどうかはじめにサーバーサイドレンダリング（SSR）Next.js はサーバーサイドレンダリング（SSR）をサポートしています。 SSRは、サーバー側で HTML を生成し、クライアントに返し表示することで、初期表示の高速化を実現します。 Next.js では、SSRは、クライアントサイドレンダリング（CSR）と混在させられます。基本的には SSRでレンダリングするべきなのですが、サーバーサイドで行えない、クライアントに依存した動的な表示を行う場合が存在します。 PC/SPの出し分け踏まえて、PC/SP の出し分けの判定について考えます

こんにちは、上條（mk-0A0）です。 少し前に Panda CSS というライブラリを見かけ、気になったので触ってみました。 Panda CSS とはPanda CSS とは、Chakra UI の開発チームが開発した比較的新しい CSS in JS ライブラリです。Github を見ると Chakra UI や Vanilla Extract などさまざまなライブラリから影響を受けているようで、それらのいいとこ取りをしたような印象を持ちました。 使い方ドキュメントに沿ってインストールします。 npx panda init で panda.config.ts と styled-system ディレクトリが生成され、--postcss を付けると postcss.config.cjs も生成されます。既存のプロジェクトへの導入で既に postcss の config ファイルがある場合は前

お元気ですか？森田です。 CSSセレクタをネストして書ける。そんな Sass（SCSS記法）に衝撃を覚えてからもう何年経ったでしょうか？あの時に感じたパラダイムシフトを超えるものは未だにありません。多分。 そんなネストが CSS でも仕様策定され、いよいよ全てのモダンブラウザでサポートされました。 参考：CSS Nesting Module CSS Nesting とは概要や検証は以前記事で試したのでそちらを見ていただきたいのですが、その名の通り CSS をネスト（入れ子）にして書ける記法です。 ブラウザのサポート状況今年の4月の Chrome が対応した際はまだ Chrome 以外赤かったですが、9月現在は Safari も Edge も Firefox も対応し主要ブラウザは Can I use でオールグリーンになりました。 2023年9月 Can I use の CSS Nesti

こんにちは森田です。 Gaji-Labo がフルリモートになりだいぶ経ちましたが、引き続き全ての打ち合わせはオンラインで行っています。 弊社は受託の制作会社なのでクライアントからオンラインツールを指定されることも多いです。 その際に相変わらず、「この打ち合わせは Zoom だっけ？Meet だっけ？というか URL どれだっけ？」という状況になりがちです。 そんな時に便利な MeetingBar というアプリを紹介します。 MeetingBar とはMeetingBar は ウクライナの Andrii Leitsius さんが開発しているオープンソースのMac用ソフトウェアです。 インストールは App Store か brew コマンドでインストールできます。 Github でソースコードも公開されています。 MeetingBar – 🇺🇦 Your meetings at your

フォームにおいてバリデーションやエラーメッセージの表示方法は、ユーザーエクスペリエンスを向上させる上で非常に重要な要素です。 フォームのエラーメッセージの表示の仕方や送信ボタンの扱いについて、以下のポイントを考えてみたいと思います。 エラーメッセージの出し方送信ボタンの制御エラーメッセージの出し方フォームへの入力内容についてのバリデーションの結果は、エラーメッセージで表現されます。 エラーメッセージは、ユーザーに対して下記のコミュニケーションを行います。 ユーザーに入力についての問題があることを知らせる入力した内容の問題の原因を明確にする解決方法を提供するタイミングと場所エラーメッセージの表示は、入力項目ごとに表示する方法と画面レベルでまとめて表示する方法の2つがあります。 これらをどのように採用するかは、 ユーザーのエクスペリエンスやコンテキスト、フォームのシステムに合わせて検討する必要

こんにちは、上條(mk-0A0)です。 今回はコードの記事ではなく、Figma の新機能「Variables」を触ってみた感想を書きたいと思います。 Figma の大型アップデート6/21に Figma の大型アップデートがありました。 https://www.figma.com/ja/whats-new/ 内容としては、 Dev モードの追加Variables の追加Prototype の進化などがあります。 なかでも Variables が面白そうだったので、ちょこっと遊んでみました。 Variables とは簡単に言うと Figma で使える変数です。Color・Number・String・Boolean の値に対して名前をつけて管理することができます。 Variables in Figma design store reusable values that can be appli