タグ

ブックマーク / ics.media (2)

  • 2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

    すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を

    2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
    ishiduca
    ishiduca 2024/04/20
  • Reactの新しい状態管理ライブラリ「Recoil」とは? Reduxとの違いを解説 - ICS MEDIA

    Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが(参照:npm trends)、記事『ベストな手法は? Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基的には作法的な書き方はあまり軽減しませ

    Reactの新しい状態管理ライブラリ「Recoil」とは? Reduxとの違いを解説 - ICS MEDIA
    ishiduca
    ishiduca 2021/02/25
  • 1