useEffect: 基礎から使用すべきでない例まで

2024/01/04 215 users useEffect effect React レンダリング

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む

React Server Components のテスト手法

2023/11/26 51 users React Server Components テスト

React Server Components のテスト手法 2023.11.26 現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年　11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別... 続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users フォントサイズ マージン パディング 白銀比 バリエーション

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

2023/06/02 106 users コンポーネントベース Twitter React CSS 反響

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話... 続きを読む

GitHub、ソフトウェア部品表の作成機能を無償公開--脆弱性管理を容易に

2023/04/07 220 users GitHub リポジトリー ソフトウェア部品表 脆弱性管理

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます ギットハブ・ジャパン（GitHub）は4月7日、クラウド上のリポジトリーからソフトウェアを構成するコンポーネントやライブラリーなどの状況を開発者が容易に把握、管理できる「ソ... 続きを読む

AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

2023/04/04 144 users ナビゲーション CSS AIツール 生成 UI要素

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI ... 続きを読む

バックエンドエンジニアのための「React の仕組み」の理解方法 - めもめも

2023/03/05 304 users React メンタルモデル コーディング エンジニア 異次元

何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニアにわかりやすい形で React の仕組み（メンタルモデル）をまと... 続きを読む

次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io

2023/01/07 167 users CSS jxck.io 仕様 web テンプレートエンジン

Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に... 続きを読む

Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery

2022/11/09 357 users 各UIコンポーネント フック 実装方法 WEB制作者 部品

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの... 続きを読む

なんでコンポーネントに副作用があんだよ！　教えはどうなってんだ教えは！

2022/10/18 253 users 副作用

皆さんこんにちは。先日公開した以下の記事は多くの方にご覧いただきありがとうございます。 この記事に対して多く見られた反響のひとつは、コンポーネント内に use(fetchNote(id)) という非同期処理を行うコードが含まれていることに対する違和感です。 function Note({id, shouldIncludeAuthor}) { // ↓↓↓↓↓ const not... 続きを読む

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える｜osanai / ui designer｜note

2022/09/12 212 users figma カンム エンジニア デザイナー 作業効率

カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエ... 続きを読む

React/Next.jsでの俺的ベストプラクティスを見てくれ

2022/08/20 235 users React Zenn ベストプラクティス 焦点 Next.js

木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の... 続きを読む

CSS設計における、すべてがコンポーネントであるという誤謬

2022/06/11 74 users 誤謬 CSS設計 コンポーネントベース BEM すべて

BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図を的確に表現することができないと感じるようになってきた... 続きを読む

Java9から17で入った新機能ピックアップ

2022/03/19 163 users Java9 Record class フィールド レコード

Java9から17で入った新機能で、実際コード書く上で使いそうなものをピックアップします。 Java8を使い続けていた人向けです。 レコード (Java16) 不変なデータを保持するクラスを簡単に定義できるようになりました。 classの代わりにrecordで定義します。 名前の後に、フィールドのリスト(コンポーネントと呼ばれます)を... 続きを読む

Notionの標準機能だけでWebサイトビルダーを作ってしまった「The Super Builder」がスゴイ！ - paiza開発日誌

2021/11/17 434 users Notion フルカスタマイズ ノーコー paiza開発日誌

どうも、まさとらん（@0310lan）です！ 今回は、ごく普通のNotionドキュメントで構築された完全無料のWebサイトビルダーをご紹介します。 必要なものはNotionアカウントのみ！ 多彩なコンポーネントをドラッグ＆ドロップするだけで、誰でも簡単に美しいWebサイトを構築できるのが特徴で、フルカスタマイズ可能なノーコー... 続きを読む

コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術

2021/09/29 79 users script Vue Composition API 分割

Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界があり... 続きを読む

2021年現在Vueを選択すべきでないと思う理由 感想

2021/09/23 93 users 感想 理由 ローカルスコープ jsx tailwindcss

Vueに対する熱いメッセージを頂いたので感想を述べてみる（ここが解決されればVueを率先して使ってくれるという意味と受け取った） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 わかる 主にTailwindCSSのようなユーティリティファーストとの相性の悪さ スタイリングはテンプレート... 続きを読む

CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説 | コリス

2021/05/27 554 users コリス ビューポート CSS アニメーション 進化

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユ... 続きを読む

GraphQLでバックエンドのコードをすっきりさせた話 - LayerX エンジニアブログ

2021/04/12 258 users GraphQL LayerX github.com REST

こんにちは！LayerXの mosa_siru (榎本) です。 LayerX インボイスでは、もともと github.com/go-swagger/go-swagger を利用してREST APIを開発していましたが、最近開発したワークフロー機能 のコンポーネントではGraphQLを取り入れました。 GraphQLには様々なメリットがあり、RESTとの比較記事は多くありますが、なぜ... 続きを読む

props のバケツリレーって何が悪いんだっけ - fsubal

2021/03/11 206 users Props React fsubal バケツリレー 大半

#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のよ... 続きを読む

「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)

2020/12/16 182 users DESIGN mercan 概念 エンジニア デザイナー

「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign ... 続きを読む

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど | コリス

2020/12/07 271 users Flexbox コリス ブレークポイント フレームワーク デザ

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザ... 続きを読む

マイクロソフト、Chromiumベースの「Microsoft Edge WebView2」.NET正式対応版リリース。バージョンを固定できる「Fixed Version distribution mode」も － Publickey

2020/11/30 71 users Publickey ネイティブアプリケーション バージョン

マイクロソフト、Chromiumベースの「Microsoft Edge WebView2」.NET正式対応版リリース。バージョンを固定できる「Fixed Version distribution mode」も マイクロソフトは、ネイティブアプリケーションに埋め込めるコンポーネント「Microsoft Edge WebView2」（以下、WebView2）の.NET正式対応版がリリースされました。.... 続きを読む

まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog

2020/10/15 139 users Flexbox React uhyo CSS スタイリング

この記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連した... 続きを読む

Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages | コリス

2020/10/15 347 users コリス CTA ブッダ ヘッダ コピーライティング

最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど...記事の続きを読む 続きを読む