HTMLとCSSだけではキャリアアップの限界を感じている、JavaScriptを今より使えるようになりたい、Next.jsやReactも気になるけどどこから手をつければよいか分からない、そんな人にお勧めの解説書を紹介します。 最近ではCSSにもReactの存在が感じられるようになり、FigmaでもReactを理解している方が便利だったりします。ReactベースのフレームワークNext.jsを使用できるようになると、Web制作での選択肢は一気に広がります！ 著者は「作って学ぶ HTML&CSSモダンコーディング（紹介記事）」でもお馴染み、ていねいで分かりやすい解説で評判のエビスコム様。 HTMLとCSSの解説書を数多く執筆している著者様ならではの、HTMLとCSSを使用してきたけどReactにはちょっと手を出せなかった人向けの解説書です。Next.jsとReactの環境構築から、実際にブログ
本記事は React best practices and patterns to reduce code - Part2 を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第2パートとなる記事です。 パート1パート2（この記事）パート3 時間を無駄にしないために早速Reactのベストプラクティスとコード削減についてみていきましょう。まずは最も一般的な内容から始めます。 コンポーネントが子要素を持たない場合はself-closing tagするよくないコード： return <Component></Component>よいコード： return <Component />
これからはじめるReact Hooks
Creating an Effective Media Campaign and Attracting Event Sponsors
React18 設計とコードレビューの観点
はじめに 最近チームに React 18 を布教することの多い osuzu です。 普段の業務で、ペアプロ時に設計意図を伝えたり、コードレビューで都度自分の意図を伝えたりしてきました。 今回、これまでのチーム開発の経験やドキュメントに目を通す中で、自分が良いと考えている設計やコードレビューの観点を言語化することが出来てきたので、筆を執ってみました。 この記事はコードレビューの観点をチーム内へ知見共有するために書きましたが、社内に閉じる必要もない内容のため、Zenn でオープンに公開することにしています。 設計部分はプロジェクト（チーム）に依存していることが多く参考にしにくい部分もあるかもしれませんが、この記事がコードレビューや設計ガイドラインのような形で少しでも参考になれば幸いです。 記事の対象外 コードレビューそのものの基準や観点は取り扱いません。下記記事など適宜参考に。 Google
ReactのConcurrent Renderingで本格的に実用化されるSuspenseは、ライブラリを通して使うことになりがちでその裏側が見えにくいものです。この本では、手を動かしながら生のSuspenseの使い方を学びます。
React.jsの練習にブラウザで動く将棋を作りました（ソースコード）。このページで遊べます。現状ではただ将棋ができるだけなので面白くはないと思います。追記：通信機能を実装しました（反転将棋）。 TypesScript (JavaScript) をほとんど書いたことがない人がどうやって作ったかという記事です。TypeScript初心者なので以下の内容は間違いを含んでいる可能性があります。 はじめに 情報系にしては実装力があまりない僕ですが、競技プログラミングを始めて2年近くになるしそろそろアプリを何か作りたいなあと思っていました。web系の言語はほとんど書いたことがなかったのですが、おそらく作りながら学ぶのが一番効率がいいだろうと考えました。 学部生のときは将棋が趣味だったので、ブラウザで動く将棋を作ることにしました。オセロなどの他のボードゲームと比べるとルールがそこそこ複雑で、自分には丁
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
GraphQL の Fragment でコンポーネントの見通しがよくなった話 - vivit engineering blog
vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デスク。 さて、弊社ではいくつかのプロダクトのフロントエンドに React(Next.js) + TypeScript を採用しており、バックエンドとの通信には GraphQL(Apollo) を採用しています。 今回はその中で、コンポーネント分割をする際の GraphQL Query の定義と取得したデータの受け渡しについて話をします。 ここからは GitHub GraphQL API v4 を使って説明していきます。 developer.github.com アジェンダ pages から components へのデータの受け渡し方法に
React Tutorial から一歩踏み出してみたい人 / バックエンド経験があり、フロントを触ってみたい人へ LINE API と連携して、ユーザー連携や LINE へのメッセージなどを解説していきます。
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
Tao of React - Software Design, Architecture & Best Practices
Tao of React - Software Design, Architecture & Best PracticesJanuary 18, 2021 • 25 minute read I’ve been working with React since 2016 and still there isn’t a single best practice when it comes to application structure and design. While there are best practices on the micro level, most teams build their own “thing” when it comes to architecture. Of course, there isn’t a universal best practice tha
GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that de
ISUCON9 予選問題の解説と講評 : ISUCON公式Blog
予選の問題作成を担当したメルカリのkazeburoです。 ISUCON9の予選に参加していただいた皆さま、ありがとうございました。 お楽しみいただけましたでしょうか。 また、主催の941さんをはじめとするLINEの皆様、ポータルの作成と運用をやっていただいたさくらインターネットの皆様、問題作成と事前回答に協力にいただいた皆さま、サーバ環境を提供していただいたアリババクラウドの皆さま、本当にありがとうございました。 問題の公開今回の予選問題のソースコード、データ、およびプロビジョニングに使用した設定ファイルなどは以下のリポジトリで公開しております。アプリケーション、ベンチマーカーを起動する手順もありますので、手元で挑戦することもできるかと思います。 https://github.com/isucon/isucon9-qualify 蛇足ですが、本リポジトリのコミット数は1,700以上、PRも
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をするJavaScriptReactreact-hooks はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は
はじめに この記事では、VST（オーディオプラグインの形式の一つ）開発に突如現れた、 React-JUCEという黒船について紹介します VSTとは DAW(Digital Audio Workstation)と呼ばれる音楽制作ソフトウェアでは、VSTと呼ばれるプラグインの仕組みが標準的に用いられています。 VST形式で開発すると、CubaseやロジックといったDAW上でMIDIやオーディオを処理するプラグインを動作させることができます。 VSTの開発においては、JUCE と呼ばれるフレームワークを用いてC++で開発されることが多いようです。 今までのVST開発のツライところ 音楽家でありエンジニアである筆者は、 ずっと興味がありつつも、VST開発からこれまで一定の距離をおいてきました。 その理由としては、 C++こわい 信号処理こわい UIを命令的に記述したくない（※後述します） という理
useEffectを使ったデータ取得はベストプラクティスではないです、react-hooks-fetchをお試しあれ
useEffectの新しいドキュメントが書かれている途中です。useEffectのタイミングでデータ取得を開始するのは、これまでもベストプラクティスではないと言われていたのですが、React 18のStrict Effectにより再び議論されるようになりました。 今のところ、Reactが提供しているAPIだけですんなり実現する方法はなく、3rd-partyライブラリやフレームワークを使いましょうとなっています。react-hooks-fetchはその一つにならないかと開発してます。 また、他のライブラリも開発してます。比較表を作りました。 ちなみに、以前作っていたuseEffectベースのライブラリはdeprecateしました。こちらの記事にも注釈追記しました。 かいつまんだ紹介しかしませんでしたが、こんな議論を楽しめる方がいらしたら、ぜひReact Fanオンラインコミュニティ(Slac
Remix の SPA モード
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
ふとスナップショットテストってなんだろう、どういう場面で向いていて、どういう場面には向いていないんだろうと考える機会があって色々調べてました。丁寧な記事にしようとしたのですが、上手くまとまらなくて挫折してしまった… とはいえこのまま手元に置き続けておくのも勿体ないので、下書き段階のものを公開して供養します。 スナップショットテストとは スナップショットテストとは、あるプログラムの出力を以前の出力と比較し、両者に差分があるかをテストする手法のことです。予め以前のバージョンのプログラムの出力 (スナップショット) のどこかに保存しておき、新しいバージョンのプログラムの出力と比較し、差分があったら fail させます。これにより、プログラムの出力内容が予期せぬうちに変わってしまっていた場合に気づくことができます。 例: React コンポーネントのテストへの適用 代表的な利用例が Jest を使
こんにちは。フィナンシャル開発センターWeb開発室の鈴木です。Web開発室は現在「LINE証券」のフロントエンドを担当しています。【LINE証券 FrontEnd】 シリーズでは、Web開発室メンバーがLINE証券のフロントエンドにまつわる様々なトピックや、LINE証券の開発中に得た知見をお届けします。今回は第1回ということで、LINE証券のフロントエンドの全体像を説明します。LINE証券というアプリがどんな技術で動いているのか、そして技術に対する考え方を知ることで、LINE証券をより身近に感じていただけると幸いです。 TypeScript + React LINE証券は、いわゆるSPAとして作られています。最近のSPA開発で最初に決めることといえば、1に言語、2にViewライブラリですね。見出しにすでに出ていますが、LINE証券ではプログラミング言語としてTypeScriptを、ライブラ
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObject と MutableRefObject が別である理由について https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#i
React + Firebase入門
初心者(バックエンドエンジニア）が書いた入門書です。 ・FirebaseAuth ・FirebaseStorage ・Firestore ・Realtime Database ・Hosting ・Cloud Functions の説明です。
React 18 alpha版発表まとめ
先日、The Plan for React 18という記事が React チームから発表されました。これは React の次期メジャーバージョンである React 18 で予定されている変更や新機能を紹介するとともに、React 18 の alpha 版の公開を知らせるものです。この記事自体に技術的なトピックは載っておらず、それらはReact 18 Working Groupという新設されたリポジトリに Discussion としてまとめられています。 本記事では、今回あった発表のポイントを厳選してお伝えします。ポイントを絞ってお伝えするため載せる情報は取捨選択しています。隅々まで理解したいという方は原文か他の記事を参照しましょう。 アップグレードの簡単さ React 17 の際もそうでしたが、最近の React は「簡単にアップデートできる」ことをたいへん重要視しており、React 18
atama plus の osuzu です。 atama plus では、これから段階的に Web ベースプロダクトのフロントエンド開発で React を用いて SPA(Single Page Application) へリプレイスしていきます。 参考: 技術課題のないプロダクトなんてものはない！Django→React リプレイスの意思決定に至る atama plus 流の軌跡 この記事では SPA の技術選定にあたって考えたことを共有します。 プロダクトについて 技術選定はプロダクトの置かれた状況によって意思決定が変わると考えているので、リプレイスするプロダクトについて補足します。 atama plus は塾などで利用可能な学習アプリ「atama＋」を提供していますが、一連のプロダクトの中に塾本部の方が管理のために用いる業務アプリがあります。 今回リプレイスするのはこちらの業務アプリで
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal)
TechFeed Conference 2022で使用した資料 https://techfeed.io/events/techfeed-conference-2022 Twitter https://twitter.com/__sakito__
WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
はじめに React HooksはReact 16.8 で追加された新機能であり、state などの React の機能をクラスを書かずに使えるようになります。 React Hooks以前は、ロジックの再利用がコンポーネントに依存してしまいロジック単独でのモジュール化が難しいという問題がありました。 しかしReact Hooksのカスタムフックという独自のフックを作成する機能を使うことで、Viewに依存することなくロジックだけを再利用することができるようになります。 この記事では、v1からv6まで改善していく様子を見て頂くことでReact Hooksの利用方法を紹介します。 今回の実例ではコンポーネントのコード量は以下のように削減されます。 実例紹介 コンポーネント間のページネーションを実装するuseLocalHistoryカスタムフックを作成します。 ブラウザのhistory APIのよ
「映像プレーヤー」を作成したことはあるでしょうか？ 作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。 HTML5で定義されるHTML Video Elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠です。 今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。
前置き(私見含む) Recoil が面白い。 React でそれなりの規模のアプリケーションを作ったことのある方なら、状態管理の辛さをよく知っていると思う コンポーネントを跨いだ変数をひとつ作ろうと思っただけなのに「まずは Flux アーキテクチャのコンセプトとアンチパターンから学ぶ必要があります。大量の props バケツリレーから逃れるためには〜」とか言われても 現実的で複雑なアプリケーションの状態、つまり「非同期処理」や「状態同士の依存関係」……などを作っていくのは大変 そんな中 Facebook が新たな状態管理ライブラリをリリースした、それが Recoil これは Redux とも ReactN とも全く異なるアプローチのライブラリで、しかも圧倒的に分かりやすい teramotodaiki.icon 現在は experimental(実験段階) なので Redux のコードをごっ
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita
概要 リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。 React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み返しながら随時更新していきます。 そもそもリーダブルコードとは ダスティン・ボスウェル著書の良いコードを書くための技術書です。 エンジニアになったら1度は目を通した方が良いとされる代表格の技術書ではないでしょうか？ 意味としてのリーダブル(readable)コード(code)とは、「読みやすいコード」と直訳できます。 チーム開発ではスムーズな開発や保守性を担保するために読みやすいコードが必要とされます。 リーダブルコードではそんな読みやすいという
Reactハンズオンラーニングを読んだので感想
はじめに この記事はこれからReactやJavaScriptを0から学びたいと思う人に向けての記事です。 こちらの本を紹介したいなという、ただの布教記事です。 自分もそれなりにJavaScriptを書いて、Reactを勉強してきたと思っていましたが こちらの本を読んで、まだまだ序の口だったのだなと感じました。 もちろん、何年もJavaScriptを書いてきて、ここに書いてある事は常識だぜ！っていう人もいるかと思います。 ただ、最初にも書いたように、0から学ぼうとしている人に向けてなので そういった人にはとても有益な本になるのではないかと思います。 こちらのスクラップに自分で理解するためにコードのメモなどもとってあるので、参考にしてみてください。 本の構成について ツールの紹介 から始まります。 Github React Dev Tools Node などの説明があります。 JavaScri
WYSIWYGEdtr.io is a WYSIWYG in-line web editor written in React. Content created with Edtr.io looks just like the final page - select any editable element on the page, edit it in-place or drag ’n’ drop it around. Heavily CustomizableIts plugin architecture makes Edtr.io lean AND adaptable to any use case at the same time. Open SourceEdtr.io is of course Open Source and has already been adopted by
SWRを使おうぜという話2022
はじめに 2021年1月に以下のような記事を書きました。 内容はVercel社のオープンソースプロジェクトの一つであるデータフェッチライブラリであるSWRの紹介で、記事内に間違いなどもあったにも関わらずたくさんの反響を頂きました。 2022年半ばとなった今でも「いいね」を頂いております。 しかし、内容は2021年当時のものであり、ライブラリの仕様が少し変更となっておりますので、現在のSWRの仕様に合わせて新しく記事を書くことに致しました。 当記事の内容は「SWRを使おうぜという話」のシナリオに沿っての再掲と致します。 最後までどうぞお付き合いください。 SWRとはなにか SWRは、クライアントJavaScriptからのデータ取得とそれに関連する操作を提供するReact Hooks群です。 通常、Reactを使用してAPIサーバーからのデータ取得を非同期で行う場合、useEffectとfet
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
[RFC] React 18 and types-only breaking changes · Issue #46691 · DefinitelyTyped/DefinitelyTyped [@types/react] add VoidFunctionComponent type which does not accept "children" by awmottaz · Pull Request #46643 · DefinitelyTyped/DefinitelyTyped https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/ 簡単に言うと React.FCのpropsの型定義には暗黙的にchildrenが含まれてしまう childrenが必要ない
フロントエンドアプリケーションの開発を行う上で避けては通れないデータフェッチの実装。 REST APIを使うか、GraphQLを使うか、クライアントでキャッシュするか、APIレスポンスにどのようにして型を付けるか、状態管理はどうするのかなど、開発者の悩みが尽きないけれども、それに関しての設計を考えたり議論を行うのはフロントエンド開発の楽しいポイントだと僕は思っています。 この記事では、バックエンドにHasura、フロントエンドにNext.jsを使用する場合に僕が最強だと感じたツールの組み合わせ・使い方を紹介します。 モチベーション APIからのレスポンスにはTypeScriptの型が勝手についてきてほしい。asで型アサーションするのはやりたくない。 クライアントでもサーバー（SSR）でもデータフェッチの方法が同じインターフェースで提供されてほしい。 クライアントでAPIレスポンスをキャッシ
はじめに この記事は、筆者がOOPartsというプロダクトにおいて、Reactのアプリを 「Create React App」 から 「Next.js」 に置き換えた事例を記す内容となっています。 これまで 「0からのNext.jsアプリケーションの作成」 文脈における記事は多くありましたが、「Create React App」から「Next.js」という、 同じReact環境における移行記事 はそこまで多くなかったと認識しています。 ある程度育ちきっているプロダクトであれば、フレームワークごと移行することは中々困難になると思っていますし、それを成し遂げることはとてもチャレンジングなことです。その結果、事例としての大規模移行事例は中々存在しませんし、稀有なことだと思っています。 本記事におけるOOPartsのNext.js移行に関する知見は、今後大きな移行する人たちの参考になれば良いと思っ
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLとCSSの人が、Reactを学ぶのにぴったりな最高の一冊！ 解説がていねいで、すごく分かりやすい
Reactのベストプラクティスとコード削減パターン - パート2
ReactのSuspense対応非同期処理を手書きするハンズオン
Reactで将棋アプリを作りました - izumo’s diary
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
React (Vite) で LIFF アプリを作ろう
Reactでオーディオプラグインを作れる時代になったという話
Gatsby と Netlify で Jamstack 構成のブログサイトを作ろう
スナップショットテストの向き不向きについて考えてみる - mizdra's blog
【LINE証券 FrontEnd】LINE証券フロントエンドの全体像
React SPA の技術選定で考えたこと（atama plus のケーススタディ）
Headless UI v1.0 - Tailwind CSS
Reactでアプリケーションを構築する多様化
React Hooksとカスタムフックが実現する世界 - ロジックの分離と再利用性の向上 - Qiita
ReactHooksでvideoを乗りこなす
Recoil が面白いので Redux との違いを説明してみる - study-react
The Open Source Web Editor You Will Love | Edtr.io
React×Firebaseでちゃんと開発するときの環境構築手順と解説
Reactコンポーネントの定義にFCではなくVFCを使う - いけだや技術ノート
ぼくのかんがえたさいきょうのデータフェッチ 2021Summer🏄♂️【Next.js / Hasura】
Create React AppからNext.jsへの移行事例紹介
【React】daisyUIを触ってみた！かなり楽しいw