2024/06/19 Findy主催イベント「鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック 」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://ton…
![鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2e300c23355b190d5ad05a8ae13825c6501f011/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fb8bd4dc0838a4461b4a24997acdf56f0%2Fslide_0.jpg%3F30676380)
2024/06/19 Findy主催イベント「鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック 」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://ton…
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験(UX)と、フォーム実
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし!この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke
In Safari Technology Preview 162 we enabled the support for ElementInternals and the form-associated custom elements by default. Custom elements is a feature which lets web developers create reusable components by defining their own HTML elements without relying on a JavaScript framework. ElementInternals is a new addition to custom elements API, which allows developers to manage a custom element’
はいさい!ちゅらデータぬオースティンやいびーん! 概要 ElementInternalsを使い、Shadow DOMのWeb Componentsを<form>で使えるようにする方法を紹介します! 背景 以前、Web Componentsの<slot>にLight DOMの非表示<input>を入れることで、Web Componentsをフォームで使う方法を紹介しましたが、実は、それと違った最新鋭の解決法があります。 それは、ElementInternalsをWeb Componentにつけて、Web Componentを丸ごと擬似<input>にする方法です。 以前の記事で作ったラジオインプットのコードを元にご紹介します。 https://qiita.com/tronicboy/items/b0008bcf43f3fd46d8c9 コード Light DOMのエレメントを削除し、Elem
こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか? おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 (結論のコードだけ知りたい方は読み飛ばして OK です) 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr
import React, { FC } from 'react'; import { useForm } from 'react-hook-form'; type FormInputs = { postTitle: string; postDescription: string; }; const Sample: FC = () => { const { register, errors, handleSubmit } = useForm<FormInputs>(); const onSubmit = (data: FormInputs) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="postTitle" ref={register({ required: 'タイト
2021.10.01追記 記事執筆時点からこの記事の実装についての筆者のスタンスが変わってきたので補足します。伝えたいのは以下です。 プロダクトでフォーム実装を考える際は、React Hook FormやReact Final Formの導入も検討ください。この記事はReactとTSの実装を理解するのには役立ちますが、プロダクト実装に耐えうるかはわからないです。 以下、お気持ちです。 執筆当時、筆者はReactでのフォームの実装は公式にあるようなコントローラブルな本記事の実装一択だ、これが一番拡張性があり、可読性も高い実装だと思っていました(正直視野狭かったですね…) 実際にプロダクトで運用してみると、入力内容の監視を行うとパフォーマンスがめちゃくちゃ悪くなったり、項目を追加させるようなフォームでは秘伝のタレみたいな実装をせざるおえなかったり、結局先に挙げたようなデファクトスタンダードなラ
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。3行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、1ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
Vue.jsなどでデータバインディングするとき<input>要素がきちんと(セマンティックに)使われて欲しくなる。jQueryなどで見かけ上の動作をされても困るのだ。かといってブラウザデフォルトの<input>の見た目はダサいので格好よくはしたい。 CSSのみでラジオボタンやチェックボックスをボタン化する方法は色々と紹介されているがフォーカス、キーボード操作、flexboxによるサイズの自動調整など細かいところまで考慮されたものが少なかったので、その方法を整理してみる。 基本形 この方法のポイントは以下。 JavaScript不使用 シンプルなHTMLマークアップ ボタンサイズ自動調整 hover checked disabledなどのinput要素自身の属性のみに応じて見た目が変化 フォーカスした時にブラウザが自動で付加する枠がボタンとズレない HTML5バリデーション結果のフィードバッ
Payment and address form best practices Stay organized with collections Save and categorize content based on your preferences. Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible. Well-designed forms help users and increase conversion rates. One small fix can make a big difference! Here is an example of a simple payment form that demonstr
この記事は、2021/9/2 に行われた WESEEK Tech Conference の内容をまとめたものです。 目次 はじめに この記事ではフォームの基礎について扱い, その後 React でのフォームの基礎, 実装をしてみてライブラリ (react-hook-form) を導入する話, react-hook-form の基礎と導入例について扱います 対象読者とこの記事で扱う内容 React のフォームの基礎を知りたい フォームってなんだろう Controlled or Uncontrolled とその基礎 react-hook-form について知りたい 基礎 Tips, GROWI.cloud での導入事例 そもそもフォームどういうもの ? ユーザとアプリケーションでの対話を表現しているもの。いろいろ種類がある。 一番単純なフォームから考えてみる 名前を入力したら Submit を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く