Hatena Blog Tags
はてなブログ トップ
UIコンポーネント
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

UIコンポーネント

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Techouse Developers Blog•4ヶ月前

Ruby on RailsでUIコンポーネント構築を効率化、ユーザ体験の仮説検証ループを爆速で回しちゃうぞ！

はじめに こんにちは、2023 年からジョブハウスで業務委託のバックエンドエンジニアをしている jxmtst です。 今日は、ジョブハウスで使用している Ruby on Rails の ViewComponent を用いて UI コンポーネントを実装する際に利用しているライブラリを紹介します。 ViewComponent（UI コンポーネント）× Lookbook（プレビュー）× rspec-snapshot（スナップショットテスト） という、フロントエンドエンジニアには馴染みのあるようなエコシステムを、Ruby on Rails 上で実現しています。 ViewComponent とは Vie…

#Rails#RSpec#UIコンポーネント

ネットで話題

もっと見る
1273ブックマークウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UIHTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。 Chico UI [ad#ad-2] Chico UIの対応ブラウザは下記の通りです。 IE6には対応していませんが、十分でしょう。 対応ブラウザ Google Chrome Safari Firefox 4+ Internet Explorer 7+ Opera Chico UIのウェブページに使用す...coliss.com
780ブックマークよく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめcoliss.com
563ブックマーク管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stislacoliss.com
477ブックマークよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめcoliss.com
434ブックマークVue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリスcoliss.com
418ブックマークWeb制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallerycoliss.com
416ブックマークFlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめcoliss.com
312ブックマークVueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC Engineers' Blogtechblog.kayac.com
267ブックマークJavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Componentscoliss.com

関連ブログ

弁護士ドットコム株式会社 Creators’ blog•6ヶ月前

UIコンポーネントライブラリ「delta-wing-ui」の開発物語

UIコンポーネントライブラリ「delta-wing-ui」の開発物語 この記事は、弁護士ドットコム Advent Calendar 2024 の 19 日目の記事です。 はじめまして。弁護士ドットコム株式会社で『クラウドサイン』という契約マネジメントプラットフォームのフロントエンドを担当しています、神戸と言います。 今年の Vue Fes Japan では、弊社エンジニアが登壇し、 多くの方に社内で開発している UI コンポーネントライブラリの取り組みを知っていただくことができました。 ライブラリはバーチャルチーム（特定の目的に向けて、有志メンバーが期間限定で組成する小規模チーム）で開発してお…

#UIライブラリ#UIコンポーネント#CI/CD#エンジニアリング#Vue
りまりまだんの本拠地•1年前

初期状態（props）を活用して仕様を表現する

ここでの初期状態とはUIコンポーネントテストを書くとき設定するpropsのことである。 propsが複数ある場合、全てのパターンを網羅しようとすると組み合わせの数次第ではテスト数が膨大になる。 すると、テストケースの維持やメンテナンスが難しくなる。 自動テストの導入は品質向上のきっかけとしたり、変更時のデグレードを防ぐために行なっている。それにも関わらず、テストケースのメンテナンスに悩殺されていれば意味がない。 ほどほどに、しかし必要なテストは書いておきたい。どのように初期状態を設定すれば良いだろうか。 TODOリストを元にパターンを洗い出す TODOリストで先に仕様を整理しているため、それを…

#UIコンポーネント#自動テスト
りまりまだんの本拠地•1年前

UIコンポーネントテストを書く流れ

UIコンポーネントテストをいきなり書くのは難しい。最初にテストを書く流れを抑えたあと書き始めると良い。 テスト用ライブラリの思想を理解する（最初の1回のみ） UIコンポーネントの仕様を言語化する 言語化したものを元にTODOリストを作る TODOリストを元にテストケースを1つ書き、失敗させる テストを通す 以降は4と5を繰り返す テスト用ライブラリの思想を理解する（最初の1回のみ） テストに使うライブラリの思想を理解すると、効率的に要素のクエリを組み立てることができる。 例えばTesting LibraryはDOMのレンダリング結果、つまりユーザーが画面を利用する状況を作り出してテストすること…

#UIコンポーネント#自動テスト
DIGGLE開発者ブログ•1年前

自前のReact UI コンポーネントライブラリを Tailwind CSS で再構築した話

"The logo for the React open source JavaScript library" © Facebook (Licensed under CC BY 1.0) "Tailwind CSS Logo" © Tailwind CSS (Licensed under CC BY 4.0) この記事はReact Advent Calendar 2023 23日目の記事です。 はじめに Semantic UI ReactベースのUIコンポーネントライブラリについて DIGGLEでの使い方にマッチするよう薄くラップ Dropdownのpropsのデフォルト値を調整 TextAr…

#Tailwind CSS#UIコンポーネント#react