Sanding UI

• 開発をしているときは、何かを作り、何度もクリックし、修正し、またクリックするという過程を繰り返す
• ページ遷移の場合は、戻るボタンを何度も使う
• これは一種のQA戦術で、クリックしながら問題を見つけて修正していく過程である
• 木工と似ていて、大きな問題を先に解決したあと、細かい部分を磨き上げていく過程である

UIテスト

• ソフトウェアには変数が多すぎて、すべてをテストして磨き上げるのは難しい
• UIを何度も使いながら、問題を見つけて修正する過程を繰り返す

ラジオオプションリストの作業

• とを同じ行に配置し、中央揃えにして、間隔を空ける
• 以前はCSSのfloatを使っていたが、今ではflexboxを使って簡単に作業できる

  
  Foo  
  
  
  
  
  .container {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    gap: .5rem;  
  }  
  

問題の発見と解決

• UIでラジオボタンとラベルの間に、クリックできないデッドゾーンがあることを発見した
• flexboxのgapプロパティが問題の原因であることを確認した
• gapを削除し、ラベルにパディングを追加して問題を解決した
• ラベルにパディングを追加することで、デッドゾーンなしでクリックできるようにした

結論

• 小さな問題が積み重なると、大きな不便につながることがある
• 問題を見つけて修正する過程を繰り返すことで、最終的に滑らかな結果が得られる

GN⁺のまとめ

• この記事は、UI開発の過程で起こりうる小さな問題を見つけて解決する流れを説明している
• flexboxを使えばレイアウトを簡単に構成できるが、予期しない問題が発生することもある
• 問題を解決するためにさまざまな方法を試し、最終的にパディングを使って問題を解決した
• UI開発者に役立つヒントを提供し、小さな問題を解決する過程の重要性を強調している