タグ「コンポーネント設計」

タグコンポーネント設計

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 17 / 17件)

[React] 新規作成画面と編集画面の実装で気をつけていること

2024/11/28 93 users SaaS React コンポーネント実装一見

SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。コンポーネント設計につい... 続きを読む

UIコンポーネントの大きさは外から制御しよう - Qiita

2024/07/03 50 users Qiita prop UIコンポーネントコンポーネント昨今

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるよう... 続きを読む

React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。今回は Re... 続きを読む

Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog

2024/05/13 18 users Findy Tech Blog Findy 開発生産性刷新

こんにちは、ファインディ株式会社でフロントエンドのリードをしております新福(@puku0x)です。この記事では、転職サービス Findy の開発チームにおける開発生産性の向上に対する取り組みをご紹介します。以前の状況モノリスの解体開発基盤の刷新コンポーネント設計の刷新テストの拡充 CI の高速化改善の効果ま... 続きを読む

一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog

2023/12/14 11 users 変遷フロントエンド設計 developers blog

宿泊の管理システムについて新しい管理システムについて開発初期のフロントエンド設計コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用これ以上の設計、方針は決めなかった初期ローンチ後の課題改善した内容 1. コンポーネント設計の見直しディレクトリ構成の変更大きくなったコンポー... 続きを読む

加速するコンポーネント設計入門 / Component Design as an Accelerator

2022/10/07 103 users Keywords 境界フロントエンドエンジニアデザイナー

社内勉強会用デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門 ※フロントエンドエンジニア視点 [Keywords] - 共通認識としてのデザインシステム - 共通認識としてのコンポーネント設計続きを読む

【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog

2022/05/23 167 users React ベストプラクティス Kazuya offers

概要こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつあり... 続きを読む

CSSとコンポーネント設計に対する考察 - uhyo/blog

2020/12/20 134 users uhyo CSS 考察 Blog

近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようにな... 続きを読む

【Vue.js】負債を返却しながら機能追加しなければならない状況で実践したフロントエンドのコンポーネント設計 - クラウドワークスエンジニアブログ

2020/08/26 91 users 負債施策クラウドワークス Vue.js エンジニア

はじめにこんにちは！社会人2年目を頑張っております、エンジニアの@b0ntenmaruです。今年2月までリファクタリング専門チームにてcrowdworks.jpの技術的負債を返却するために奮闘しておりましたが、そこから現在まではユーザーの皆様に安心安全なサービスを提供するためにクラウドワークス安心安全宣言のための施策... 続きを読む

useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita

2020/01/19 15 users Qiita useReducer ロジック本質

React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される... 続きを読む

Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog

2019/08/29 69 users Biscuet Atomic Design Vue.js

スマートキャンプのデザイナー/エンジニアの葉栗です。弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケットという新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介し... 続きを読む

最近のフロントエンドのコンポーネント設計に立ち向かう - Qiita

2018/04/01 250 users Qiita コンポーネントベースフロントエンド React

ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をす... 続きを読む

いまどきのコンポーネント設計をめぐる座談会 | CodeGrid

2017/07/25 7 users CodeGrid 座談会

コンポーネント構造を考えるとき、さまざまな軸が考えられます。それらを踏まえてコンポーネントを切るとき、何に気をつけるべきなのでしょうか。また、デザイナーとエンジニアの関係についても考えます。続きを読む

Atomic Designの概念に基づいたJavaScriptフレームワークのコンポーネント設計とは？ - pixiv inside

2017/05/26 72 users pixiv inside Atomic Design 概念

テクノロジー Atomic Designの概念に基づいたJavaScriptフレームワークのコンポーネント設計とは？はじめにこんにちは。はてなブログとエモい話が何よりもすきな17新卒のエンジニアPotato4dです。ひょんなことからこのpixiv insideに技術的な記事を書く機会に恵まれたので、JavaScript周りの話を書きたいと思います。概要モダンなJavaScript環境に慣... 続きを読む

amakan の React コンポーネント設計 - ✘╹◡╹✘

2017/03/15 285 users React amakan header コンポーネント構造

2017 - 03 - 15 amakan の React コンポーネント設計説明用の図例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。上手に登場するコンポーネントは以下の通り。 Header... 続きを読む

(1 - 17 / 17件)