React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
Atomic DesignはWeb開発を救うのか - DMM.comラボ デザイナーズブログ
前置き Webを便利に・高品質にしようと技術が進歩する中、コンポーネント設計に寄り添ったシステムが多く出てきました。 ただし、それらを十分に活用するにはデザインから見直さなければなりません。 コンポーネントベースのUIデザインは汎用性・再利用性の観点からも有用ですが、それを実現する際には「コンポーネントの定義」が非常に難しいことがあります。 PDCAサイクルをまわす時のようにあとから再びデザインに手を加えることが予測される環境下では、コンポーネントの粒度が曖昧なままでいると思わぬコストが発生する場合が多々存在するでしょう。 そこに対して一定のルールを持った設計システムが導入されることにより、未来の要望に対応できる柔軟なデザインが構築できるかもしれません。 そう、デザインにも設計は必要なのです！ Atomic Designとは？ atomicdesign.bradfrost.com Atom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
