一休.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... 続きを読む