UX よりも DX を選ぶのはやめましょう.またはそうでないかもしれません?

Stop choosing DX over UX.

–

デヴォンにダンクしたいわけじゃない.これは、インターネット上で流れる感情のほんの一例です.ですから、読者の皆さんは、私がどこから来たのかを理解するでしょう.

DX - 開発者の経験. UX - ユーザー エクスペリエンス、使いやすさ.

ボタンについて話しましょう

クリック可能な要素の Using <button> instead of <div> は、UX (およびアクセシビリティ) に適しています.それでも、多くのフロントエンド開発者は div や span などを使い続けています.何故ですか?

私の推測では、div にはスタイルが組み込まれていないため、ボタンよりも div を使用する方がはるかに簡単だからです.ここで近道をしている開発者は、おそらく無意識のうちに、より優れた DX を選択しています.

ボタンの使い方がdivと同じくらい簡単なら、多くの人が使うと思います.そもそも DX について考えていれば、開発者はツールや標準ライブラリの不足と戦うのではなく、実際のユーザーの問題を解決することに多くの時間を費やすことができるため、UX が向上するのではないでしょうか?

コード

<button> の代わりにボタン <div> を使用するのがどれほど難しいか疑問に思っている場合.これは、ボタンからすべての癖を取り除く「CSS リセット」を含むスニペットです.

import styled from "styled-components";

if (typeof document !== "undefined") {
  // https://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/
  document.addEventListener("touchstart", function () {}, false);
}

export const focusRing = (color: string = "blue", inset?: boolean) => ({
  /* Remove excess padding and border in Firefox 4+ */
  "::-moz-focus-inner": {
    border: 0,
    padding: 0,
  },
  ":focus": {
    outline: "none",
  },
  ":focus-visible": {
    // https://css-tricks.com/platform-news-rounded-outlines-gpu-accelerated-svg-animations-how-css-variables-are-resolved/#rounded-outlines-are-coming-to-firefox
    "box-shadow": inset
      ? `inset 0 0 0 3px ${color}`
      : `0 0 0 2px #fff, 0 0 0 5px ${color}`,
  },
  transition: `box-shadow 100ms ease-in-out`,
});

/**
 * reset built-in styles of a button https://css-tricks.com/overriding-default-button-styles/
 *
 * Don't forget to provide styles for:
 *
 * - default state
 * - `:hover`
 * - `:active` (See also https://bugzilla.mozilla.org/show_bug.cgi?id=68851)
 * - `:disabled`
 * - `:focus-visible`
 *
 */
export const BaseButton = styled.button`
  ${focusRing()}

  display: inline-block;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  cursor: pointer;
  :disabled {
    cursor: default;
  }

  /* Corrects inability to style clickable input types in iOS */
  -webkit-appearance: none;

  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
`;

BaseButton.defaultProps = {
  type: "button",
  // @ts-ignore https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-autocomplete
  autocomplete: "off",
};

Source code on the Github.についての私の以前の投稿.

コード内のリンク:

Enable CSS active pseudo styles in Mobile Safari

Rounded outlines are coming to Firefox

Overriding Default Button Styles

Bug 68851: HTML buttons should go :active on keydown (spacebar) (21年前にオープン)

button autocomplete

Bug 654072: if disabled state is changed with javascript, the normal state doesn’t return after refreshing the page(開店10年)

何をすべきか？

社内にコンポーネント ライブラリがある場合は、それに BaseButton を追加します.また、チームはベスト プラクティスに簡単に従うことができます.

- const MyButton = styled.div` ... `
+ const MyButton = styled(BaseButton)` ... `

- <div onClick={...} />
+ <BaseButton onClick={...} />

少しの DX が、開発者とユーザーの生活を改善するかもしれません.