こんにちは、THECOO株式会社のpoteboyと申します。普段は現職１人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務していました。 専任がいなかったのは、Faniconが元々ネイティブベースのアプリで、WEBアプリの開発優先度を下げていたためです。 そのため、フロントエンドの開発環境に関しても万全とは言えず、2022年6月に私が入社し、9月には2人目のフロントエンド開発者となるTomoya氏が入社したタイミングで、2人で協力してFaniconフロントエンドの大改修を行なうこととなりました。 フロントエンド改修業務にはTypeScriptの導入、既存コンポーネントのVue３化、単体テスト
10万件のSelectBoxが作りたい
10秒で概要 10万件のデータをサジェストするAutocompleteなSelectBoxを作りたい。 しかし、1万件を超えたあたりから通常のAutocompleteではレンダリングに時間がかかる。 以下の方針が有る。 react-windowによるレンダリング以外の範囲の仮想化 フロントエンドではデータを保持せず、入力値に応じてSearchのAPIコールを実施する Reactのレンダリングによる課題 Reactのレンダリングは、大まかに以下のフローで行われます。 Triggering a render 新規画面への描画時、またDOM要素の差分を検出したことをTriggerがとして、レンダリングが発生します。 Committing to the DOM 描画要素に違いがあるDOM要素のみ、DOMノードを変更します。 Autocompleteで表示するデータである<li>要素についても当然D
React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo
この記事はテックタッチアドベントカレンダー24 日目の記事です。 テックタッチのフロントエンドエンジニアの taka です。 クリスマス・イブを満喫してしまったため投稿するのが遅れてしまいました（嘘） 今回は最もメジャーな React の UI ライブラリの一つであるMaterial-UIの次期バージョンである v5 を先取りしてみようと思います。 v5 は 来年 2021 年 4 月頃リリースされるようで、特にスタイリングに関して大きな変更があるようでした。 注）v5 はまだ α 版であるため、実際のリリース時には本記事の内容とは異なる可能性があることをご理解ください。 Material-UI とは material-ui.com Material-UIとは、Material Designをベースとした React の UI ライブラリです。 Ant Designと肩を並べる、React
こんにちは。梅津です。 前回書いたこちら↓の記事で Recoil を利用しているという話をしました。 今回は業務で Recoil を使っている中で「こうすれば再レンダリングを抑えられるなー」ということがわかってきたので、その紹介です。 作るものと利用するライブラリ 再レンダリングを抑えるためのポイント ポイント1: Atom を小さく分割し、枝葉のコンポーネントで購読する ポイント2: イベントハンドリング時に Atom の値が欲しいなら useRecoilCallback を使う おわりに 参考・関連リンク 作るものと利用するライブラリ 今回は次のようなログインフォームを例にサンプルコードを書いていきます。 サンプルコードで利用するライブラリとそのバージョンは次のとおりです。 React 18.2.0 Recoil 0.7.5 MUI 5.10.4 また、コードの簡略化のためカスタムフッ
こんにちは、開発２部の早瀬です。 自分のチームではフロントエンドにReact（Next.js）を採用しており、MUIをベースにしたデザインシステムを構築して開発を行なっています。 そこで今回はデザインシステムの構築に至った背景や、具体的な取り組みを紹介したいと思います！ 背景 MUIとは デザインシステムを構築する目的 デザインと実装の同期 属人性の排除 コミュニケーションコストの削減 具体的な取り組み デフォルトスタイルのオーバーライド カラーコードの集約 Typographyの定義 8倍ルール Atomic Designの不採用 まとめ 背景 現在バイセルではリユースプラットフォームの開発に注力しています。自分はその中の出品管理サービスのチームに所属しており、他にも並行して複数のサービスの開発が進んでいます。 リユースプラットフォーム プラットフォームとして開発をしているので、プロダク
大規模SaaS 「カイポケ」の未来を支えるフロントエンドの技術選定 - エス・エム・エス エンジニア テックブログ
こんにちは、エス・エム・エスのフロントエンドエンジニアの城内です。 前職では、ヘルスケア系のスタートアップでソフトウェアエンジニアをしていましたが、2022年8月にエス・エム・エスへ入社し、介護事業者向けの経営支援サービス「カイポケ」の改善をするチームに所属しています。 カイポケの改善を進める開発チームでは、この度フロントエンド専任チームを立ち上げました。この記事ではフロントエンドチーム立ち上げの背景や、チームの立ち上げから進めてきた技術選定について書きたいと思います。 カイポケ改善プロジェクト 介護事業者向けの経営支援サービス「カイポケ」は、4万を超える事業所で導入されている SaaS 型のサービスです。介護事業には様々なサービスの種類（ex. 居宅介護支援、通所介護支援、訪問介護支援、etc…）があり、カイポケはそれぞれのサービス種類に対応した約40のサービス・機能を提供しています。カ
Introduction Material-UI v4 was released 10 months ago, per our release schedule. It's time to plan for v5. Our GitHub milestone has a due date for October 1st 2020, and while I doubt we will release in time, planning 6 months ahead seems relevant. Developers made it clear in the past that they don't enjoy breaking changes. This is feedback we took into consideration when designing our versioning
![[RFC] Material-UI v5 🚀 · Issue #20012 · mui/material-ui](https://cdn-ak-scissors.b.st-hatena.com/image/square/a304a1710f4db50aec4e859f051489aab02a50f6/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F210674cdaf98422a52ba90a91ce77f96bb1eba9863d2e8265bad5d1e89adf8ac%2Fmui%2Fmaterial-ui%2Fissues%2F20012)
Choosing the right component library for your design system: MUI vs Chakra
Design systems can be very complex, or very simple depending on the needs of an organization. At the center of every design system though, is a component library. The goal of this project is to choose which component library is the best fit for Udacity’s next generation design system. TL;DRAfter testing the two libraries the results were nearly identical in every category— except for theming. Them
Next.jsに新しくなったMUI(Material-UI v5)とEmotionを導入して新機能を試す | ZUMA Lab
Material UI の v5 がリリースされました。 v5 から MUI として新しくリニューアルされました。 公式サイトもリニューアルしていますね。 v5 から内部で使用されているスタイリングソリューションが Emotion か styled-components か選択できます。 今回は Next.js/Typescript プロジェクトに Material-UI/Emotion を導入します。 また今回から新たに追加された MUI の新機能や変更された記述方法を試してみます。 今回ソースは基本的には公式 Github の example を参照致しました。 環境macOS Big Sur 11.15.2Next.js 11.1.2Typescript 4.4.3npm 7.7.6yarn 1.22.4Next.js のプロジェクトを作成以下のコマンドを実行して Typescrip
A comprehensive UI kit with over 600 handcrafted Material UI, MUI X, and Joy UI components for Figma. Includes 600+ high-quality components—ready to use and customize—kept up-to-date with the React component libraries (Material UI, Joy UI, and MUI X) 1,000+ icons grouped and named consistently with Material Icons in 5 themes 100+ customizable color, typography, and elevation styles 50+ frames with
Even with advanced AI, the transition from design to code often misses a critical piece – your unique design system and code components. In this blog post, we will explore Builder.io’s Visual Copilot, a tool designed to understand and incorporate your design system and existing components, to convert Material UI Figma designs to React component code. FigmaFigma is a collaborative interface design
前回、Rails7 APIモードの認証機能をdevise_token_authで実装するという記事で、devise_token_authの導入方法や使い方を一通り説明いたしました。 今回はNext.jsとdevise_token_authを使ってログイン処理と認証制御周りを具体的な実装例を踏まえて説明します。 認証処理はクライアントサイドで行うか、サーバーサイドで行うか まず実装に入る前に、認証処理をクライアントサイドで行うのか、サーバーサイドで行うのかを決める必要があります。 クライアントサイドで認証 クライアントサイドで認証を行う場合は、認証用のAPIを別途設けて、その結果により遷移先を分けるという実装をします。 認証結果が真の場合は、該当ページへの遷移を許可し、偽の場合はログインページへリダイレクトさせます。 クライアントサイドでの認証の場合、ページリクエストの前に毎回認証用APIが
MUI入門
はじめに 実務でMUIを本格的に使用することになりそうなので、MUIに入門していきたいと思います。 なお、筆者はMUIの前身のMaterial UIは少し使用したことがあり、Material Designについてはエアプです。それらを踏まえて対戦よろしくお願いします。 本記事で触れること パッケージ構成からみるMUIの概要 MUIのカスタマイズ MUIで何ができるのか その他のUIコンポーネントライブラリと比較した場合のMUIの立ち位置 本記事で触れないこと MUIの導入手順 MUIの具体的な使用方法 パッケージ構成からみるMUIの概要 ※この章は基本的には以下のページを和訳したものとなります。 まずMUIには以下の2種類のプロジェクトが存在します。 MUI Core MUI X みなさんがMUIと聞いて思い浮かべるのはMUI Coreの方だと思います。 MUI Xは複雑なユースケースに対
現在のプロジェクトでMUIとReact Hook Form（以下RHF）を組み合わせてフォームを実装しています。しかし、フォームコンポーネントの設計に関して何もルールが整備されておらず、実装が複雑になっていました。そのため、メンテナンスがしづらかったり、汎用的に使いづらい状態でした。そこで、フォームコンポーネントの設計の見直しを行なった結果、いい感じの設計ができたので、今回はその設計と実装例を紹介したいと思います！ 制御コンポーネントと非制御コンポーネント Reactには制御コンポーネントと非制御コンポーネントの2つのタイプが存在します。制御コンポーネントは、フォームの入力値や状態をReactコンポーネント自体で管理します。一方、非制御コンポーネントは、フォームの入力値や状態をDOM要素自体が管理します。 RHFを使用する場合、通常はregisterを使用して非制御コンポーネントとして扱い
The Most Popular React UI Component Libraries — SitePoint
In this article, we’ll review some of the best React UI component libraries, and how to choose the right one for you. The article is written primarily for beginner React developers, but you’ll need some familiarity with specific terms in React. React powers the user interfaces (UI) of close to 10 million websites around the world. While the base library of React is solid, there are multiple compon
このやり方は、想定された使用方法とはあからさまに異なります。 技術力、お金、余裕、彼女などなどお持ちの方は、用途にあった技術を選択してください。 はじめに 皆様「おまえの次のセリフは『お久しぶりです』という！」 投稿者「『お久しぶりです』…はッ！」 …はぁ…まるで成長していない…。 さて、今回は「絶対に真似してはいけないGoogle Formのお問合せフォーム化」と銘打ちまして、Google FormをReact製Webページの問い合わせフォームにする姑息な実装をまとめたいと思います。 一応zennその他にも似たような投稿はあったんですが、 Reactで運用する記事がない（←色々ライブラリあるし、きっといらない） 投稿後の画面遷移が実現できていない （さも悪くないの方法かのように書かれていたのが怖い） （↑浅瀬の投稿者がこんなこと言っちゃって燃える方がもっと怖い） （↑「なんて言いながら記
2048 Token Examples":1,"2-Week 1800 Calorie Diet":1,"Negative Review: \"Dawn Disappointment\"":1,"Move Folder Contents in Linux":1,"ChatGPT's capabilities are based on the data it was trained on, which has a knowledge cutoff date of September 2021. Therefore, ":1,"Python Alias: Permanent Solution":1,"Incomplete Critias.":1,"Find Missing Topic Line":1,"Physics Knowledge Difficulty Progression":1,"提
(Almost) Every WWDC videos download links for aria2c.
README.md WWDC 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 Tech Talks App Store Connect Insights Usage aria2c --input-file=<#file#> FAQ Q: HTTP error 403 while downloading 2007～2012 videos? You need a special cookies to download videos from 2007 ~ 2012. Some videos requires cookies with your AppleID signed in (previously on developer.apple.com/dev
Build an ecommerce app with Next.js and Shopify - LogRocket Blog
Table of contents Create a Shopify Store Get Shopify’s Storefront API token Set up the Next.js app Create the ecommerce store’s homepage with Next.js Create different collection pages in the ecommerce app Create a product page in Next.js and Shopify Retrieve your products with the Shopify Storefront API Since COVID-19 appeared in the world, ecommerce has exploded. According to the International Tr
はじめに はじめまして！普段はスタートアップで業務SaaSを作っているtaroと申します！ Zennへの初投稿です！今回は個人ブログを作った話をまとめていきます。 どんなブログ？ 制作したのはよくあるシンプルな個人ブログです。 カード形式の記事一覧画面 サイドバーに目次がある記事詳細画面 記事はMarkDownで管理 本当に必要最低限の機能が揃っているだけのシンプルなブログです！ なぜ作ったか？ ZennやQiita,はてなブログ等々で手軽にブログが作れる今、わざわざ個人開発で作った理由は2つです！ 新しい技術を手軽に試す場が欲しかった 普段、技術書を読んだり、ZennやQiitaを始めとした技術ブログで色んな情報に目にする中で「あ、これ試してみたいなー」って思った時に、手軽に試せる自分の場所が欲しかったのが最初の理由です！ 特に最近はフロントエンドの技術力を高めたくて色々と勉強しているの
Next.js + Material UI v5 でフロントエンドアプリケーションを作成する - エニグモ開発者ブログ
Next.js + Material UI v5 でフロントエンドアプリケーションを作成する なぜこの記事を書いたのか こんにちは。エニグモでサーバサイドエンジニアをしております、寺田（@mterada1228）です。 この記事は Enigmo Advent Calendar 2021 の 20 日目の記事です。 業務では主に Ruby on Rails を使っているのですが、最近新しいチャレンジとして、フロントエンドの勉強をしています。 そこで、Next.js + Material UI（以降 MUI）を使った Web アプリケーションの開発にチャレンジすることにしました。 ただ、この2つは全く異なる開発形態のフレームワークですので、一緒に使うためにはちょっとしたセットアップが必要になります。 参考にするため色々と検索してみましたが、なかなか求めている検索結果が得られなかったことと、なぜ
【MUI (Material UI)】 それ、中に Typography を書かなくてもいいですよ ―― 継承とコンポジションを添えて - Qiita
Material UI (@mui/material) には、 Typography というコンポーネントがあり、これを使うことでデザインシステムで定義された文字スタイルを当てることができます。 ところで、Material UI のさまざまなコンポーネントに、 Typography コンポーネントを中に明示的に書かなくても同じ方法でスタイルを当てる機能があることをご存知ですか？ Material UI のコンポーネントは、継承・コンポジションによって、他のコンポーネントの機能を利用する実装になっているモノが多くあります。 そのようなコンポーネントを使うときには、中に Typography を追加で書く必要がありません。
<Box sx={{ typography: 'subtitle2' }}>… // theme.typography.subtitle2 <Box sx={{ typography: 'body1' }}>… <Box sx={{ typography: 'body2' }}>… (or $keyC)
React TypeScript Material UI のインラインスタイルで型エラーにハマる - かもメモ
Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /> // => style={style} の箇所が型エラーになる } 環境 typescript@4.1.6 react@17.0.2 @mui/material@5.2.7 結論 通常の JSX にCSS のオブジェクトを渡す際は React.CSSProperties の型をつける Material UI の sx に渡す CSS のオブジェクトは as const するか SxProps<Theme> の
↑この子の名前は"emotion"。 styled-componentと並んで、最も有名なCSS-in-JSのライブラリの１つです。 CSS-in-JSとは、JavaScriptを使ってスタイルを書く方法です。CSS-in-JSを使うことにより、CSSにありがちな名前の衝突やスタイルの複雑な優先順位の問題に別れを告げることができます。そして、より宣言的に、より再利用可能な方法でスタイルを記述できます。 ところで、同じCSS-in-JSであっても人によって使い方は様々です。ある書き方はメンテナンスしやすくしますが、また、ある書き方はemotionのメリットを十分に引き出せません。 どうせなら、emotionを解き放ちたい...! 今日はそんな別の意味でエモい話です。emotionに限らず、styled-componentsでもjssでも、CSS-in-JS全般に興味のある方に読んでいただける
This post is for you if you want a simpler alternative to NextAuth to implement authentication in your Next.js application using Iron-Session and the App Router. What's iron-session ? It's a popular open-source project for Node.js for encrypting/decrypting data that can be persisted in cookies. You can find more about the project in Github. My implementation uses a middleware that relies on iron-s
CSS 特定の子要素を持つ要素を指定するCSSセレクタ CSSセレクタで共通の子要素を持つ親要素をまとめる Chrome Devtoolsで変更したCSSの差分を確認する Git Gitでmainブランチ以外のブランチを削除する Gitでaliasを設定する JavaScript JavaScriptで文字列から最初の1行を取得する JavaScriptで配列に値を挿入する JavaScriptで配列の最後の値を取得する Marked JavaScript(NodeJS)でコールバック関数をPromise化する ReactやNext.jsを使っているオープンソースのWebアプリケーション JavaScriptのString.replace()の第2引数の文字列をエスケープする JestのmockClear、mockReset、mockRestore Vueを使っているオープンソースのWeb
次世代のフロントエンド開発では、データの取得とその最適化が重要な要素です。この記事では、Next.js 13のappディレクトリを使用して、SWRというデータフェッチングライブラリを活用してデータの取得を最適化する方法を解説します。さらに、React Queryとの違いも考察します。 ぽん キャッシュベースのAPI通信ってなんだかすごそう！ ponta キャッシュベースにすることでAPI通信を最小限にし余計なエラーなどを起こさないようにできるんだ。 リンク 1. Next.js 13のappディレクトリとは Next.js 13では、新しくappディレクトリが導入されました。このディレクトリは、従来のpagesディレクトリとは異なり、ルーティングを自動的に生成せず、コンポーネント、ヘルパー、フックなどの共有ロジックを配置するのに適しています。 プロジェクトのフォルダ構成は以下のようになりま
使いづらいと言わせないFigmaのコンポーネント設計
こんにちは。 普段はフロントエンドの開発を行いながら、デザイナーとデザインシステムの構築を行ったりしています。 デザイナーと仕事をするのが楽しい今日頃ごろです！ 「Reactのコンポーネント設計はいろんな記事があるけど、Figmaのコンポーネント設計ってどうやってやればいいのか見つからない」と感じていました。 半年ほどデザインシステムのコンポーネント設計をデザイナーと一緒にやってきて、なんとなく知見が溜まって来たのでまとめようと思います。 前提 <ツール・技術> デザインツール: Figma フロントエンド: React・Typescript UIライブラリ: MUI <組織> デザイナー数名とエンジニア1名。 デザイナーは全員美大出身で、コーディングは一切できません。 エンジニアは私のことです。 こんな人におすすめ Figmaコンポーネントを作ってみたけど、使い勝手が悪い気がする コンポ
てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T
こちらはバイセルテクノロジーズ Advent Calendar 2023の1日目の記事です。 こんにちは、開発２部の早瀬です。普段はリユースプラットフォームの出品管理SaaSの開発を行っています。 私のチームではモダンな技術を採用しながら、チーム全員でフロントエンドの開発を行っています。 以前はフロントエンドのメンバーが私一人だけだったのですが、途中からチーム全員で開発をするスタイルに変化していきました。 一人で開発する場合は特にルールなどなくても問題ないですが、複数人で開発するとなると話は別です。開発のルールや、それを浸透させるための取り組みが必要になってきます。 そこで私のチームでは、効率的に開発を進めるために、できる限り仕組み化したフロントエンドの構成に力を入れてきました。開発を進める中でも改善を繰り返しており、最近は良い感じに開発ができているので、今回はその構成について紹介したいと
CSS 特定の子要素を持つ要素を指定するCSSセレクタ CSSセレクタで共通の子要素を持つ親要素をまとめる Chrome Devtoolsで変更したCSSの差分を確認する Git Gitでmainブランチ以外のブランチを削除する Gitでaliasを設定する JavaScript JavaScriptで文字列から最初の1行を取得する JavaScriptで配列に値を挿入する JavaScriptで配列の最後の値を取得する Marked JavaScript(NodeJS)でコールバック関数をPromise化する ReactやNext.jsを使っているオープンソースのWebアプリケーション JavaScriptのString.replace()の第2引数の文字列をエスケープする JestのmockClear、mockReset、mockRestore Vueを使っているオープンソースのWeb
今回解説するのは下記の通りです。 ライブラリを使ってテーブルデータを表示する 行内のボタンをクリックし、編集用のモーダルを開く なお、UIにはMaterial UIを利用します。 インストール まずはreact-data-table-componentをインストールします。 npm npm install react-data-table-component yarn yarn add react-data-table-componen サンプルや詳細な使い方はこちらから https://react-data-table-component.netlify.app/ データの表示 まずはサンプルとなるデータテーブルを作って表示させます(実際にはMySQL等のデータベースから取得するのが一般的かと思いますが、今回は割愛します)。 import { useState } from 'react
React でスワイプによるスライドの操作を実装するライブラリ react-swipeable-views が非推奨になりました。この記事では、MUI (旧 Material-UI) のドキュメントに掲載されている react-swipeable-views を使ったコードを代替するライブラリ Swiper に置き換えていきます。 先行記事 【React】Swiper + MUI Tab を利用してスワイプでタブ切り替えを行う https://ramble.impl.co.jp/1959/ 本記事では以上の記事を大いに参考にしていますが、以下の2点で異なります。 TypeScript で記述 react-swipeable-views からの移行を念頭に置いて、その差分を記述 react-swipeable-views react-swipeable-views は React でスワイプ
はじめに react-material-ui-carouselを用いてCarouselを実装する方法を備忘録として書きます． 使い方 Carouselの説明やインストール方法，基本的な使い方は，「React-Redux-TypescriptアプリでCarousel機能を実装」に書かれています． 一番下の「参考にしたサイト」にも記載しているので，ご確認ください． material-uiをインストールしていない方は以下のコマンドでインストールできます． npm install @mui/material npm install @mui/icons-material npm install @mui/styles import './App.css'; import { Typography } from "@mui/material"; import Box from "@mui/mater
ReactでQRコードリーダーを実装する - Qiita
ブロックチェーンSymbolのウォレットの開発をしています。Webウォレットの開発ということで、React向けのQRコードリーダーの実装を進めていたのですが、意外と時間がかかったので、メモも兼ねてやり方を掲載します。 パッケージ QRライブラリの選定について 当初Webで検索し一番に試したライブラリは以下ですが、こちらは私の技術スキルでは内部エラーを解消できず、断念しました。 代わりに今回 zxing というライブラリを利用しています。 実装 以下呼び出される側です。副作用フックの実装の通りアンマウント時のカメラ等の処理も停止している為、QRコードの読込完了と共にアンマウントする想定です。 import { BrowserQRCodeReader } from "@zxing/browser"; import React, { FC, useEffect, useRef, useState
import { Box, Button, Paper, TextField, Typography } from '@mui/material'; export const Login = () => { return ( <> <Paper elevation={3} sx={{ borderRadius: 6, p: 4, height: '70vh', width: '280px', m: '20px auto', }} > <Box mt={8} display='flex' flexDirection='column' gap={5} alignItems='center' > <Typography variant='h5'>ログイン画面</Typography> <TextField type='id' name='user_id' variant='standard' p
import * as React from 'react'; import { Header } from '../../model/header/header'; export const Top = () => { return ( <> <Header /> </> ); } import * as React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import
React Colorというライブラリを利用することで、オシャレでいい感じのカラーピッカーを手軽に導入できます。 インストール npm install react-color --save カラーピッカーの表示 表示自体はとても簡単で、下記のように書けばOK。 import React from 'react'; import { SketchPicker } from 'react-color'; class Component extends React.Component { render() { return <SketchPicker />; } } APIを利用した実用的な使い方 次に、実際に選択された色をどう取得するかです。 import { useState } from 'react'; import { Box, Typography } from '@mui/mate
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインシステムに準拠したコンポーネント駆動UI開発への取り組み
React Router v6のOutletとReact.lazyの組み合わせが便利
Material-UI v5を先取りする - Techtouch Developers Blog
Recoil で再レンダリングを抑えるために気をつけていること - Adwaysエンジニアブログ
MUIをベースにしたデザインシステムの構築 - バイセル Tech Blog
[RFC] Material-UI v5 🚀 · Issue #20012 · mui/material-ui
MUI for Figma - MUI Store
Material UI: Convert Figma Designs to React Components
Next.jsとdevise_token_authを使って認証周りを実装する - 行動すれば次の現実
MUI v5 とReact Hook Form v7 を連携させる際の設計と実装例の紹介
【React】絶対に真似してはいけないGoogle Formのお問合せフォーム化【Google Forms】
teknium/OpenHermes-2.5 · Datasets at Hugging Face
React×MUI×Amplifyで個人ブログを作った話
Typography - MUI System
君のemotionを解き放て！－CSSinJSの歩き方－
Cookie-Based authentication for Next.js 13 apps
Goで指定した値が配列内に存在するか判別する
Next.js 13のappディレクトリとSWRを活用したデータフェッチの最適化
【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！
開発効率を上げるためのモダンなフロントエンド構成 - バイセル Tech Blog
TypeScriptでDOMPurifyとjsdomを使う方法
react-data-table-componentで管理画面をつくる - Rio Blog
react-swipeable-views から Swiper への移行 - Qiita
Reactとmaterial-uiを用いたアプリでCarouselを実装する方法 - Qiita
文系だけど React で 画面遷移実装してみた Ver.3 - Qiita
【React × Typescript】サイドバーの開閉をuseContextで状態管理する - Qiita
React Colorの導入と使い方 - Rio Blog