【Next.js】新規プロダクトのフロントエンドにおけるディレクトリ構成 - 通信レイヤー編 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご
React Router v6.4 が、破壊的変更を伴わないマイナーバージョンアップながら、機能追加の内容としてはかなり新しい世界観を追加してきたので、5 分くらい眺めて気づいたことをメモしておきます。 Routing と Data Loading/Mutation の統合 まずはリリースノートがこちら。 そしてリリースノート内に貼り付けられている動画がこちら。 1:45 しかない動画なので、動画を見ていただければこの記事はあんまり読まなくてもいいかもです。 さて、動画内では、次の 2 つの機能を <Route> コンポーネントへと統合した話題が語られています。 データ読み込み（Data Loading） 0:00〜 0:28〜 エラーハンドリングの話題もあり データ更新（Data Mutation） 0:52〜 <Route> に統合された API は、ざっくりと次のような形です。 <R
GitHub - Shopify/hydrogen: Hydrogen lets you build faster headless storefronts in less time, on Shopify.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.2.1 Node.js 15.8.0／npm 7.5.0 React 17.0.1 react-scripts 4.0.2 SWR 0.4.2 React Hooksで通信結果をキャッシュする アプリケーション開発において、外部システムとのIO処理はパフォーマンスのボトルネックになりがちです。特に、ネットワークを介した通信はその最たるものでしょう。これを解決するための手法の一つとして、キャッシュ機構を利用する方法があります。ブラウザにも、HTTPヘッダー経由でサーバーと協調しながらキャッシュの有効期間を設定する手段が用意されていますね。サーバーやブラウザ側でキャッシュを制御してくれる
テックタッチアドベントカレンダー17日目を担当する kenshin です。 今年もあと少しで終わりですね。今年を振り返るのために2022年に食べたラーメンの杯数を数えてみると121杯（執筆時点）でした。年末までにあと何杯食べられるかな。 さて、今回は React18 で追加された useSyncExternalStore を使ってみました。 useSyncExternalStore とは 利用場面 使い方 実際に使ってみよう 最後に useSyncExternalStore とは React18 で新たに追加された React フックです。 React コンポーネントの多くは props、state、context からデータを参照します。 ただし、React 外部のデータソースから値を参照する必要がある場合も存在します。 このような場合、 useSyncExternalStore を使う
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
React Native Meetup #16 https://react-native-meetup.connpass.com/event/317621/
TS 4.9 satisfies operator を使って React Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog
BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかけるようになり、ルーティング宣言から型を拾いやすくなった React Router v6.4 から createXXXRouter のAPIが追加され、コンポーネントではなく、プレーンオブジェクトでルーティングを書けるようになりました import { createBrowserRouter } from
GitHub - cats-oss/use-intersection: React Hooks for IntersectionObserver.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tanstack Query を活用したフロントエンドアーキテクチャの紹介 ~ 持続可能な開発を目指して ~ | MEDLEY Developer Portal
2023-03-31 Tanstack Query を活用したフロントエンドアーキテクチャの紹介 ~ 持続可能な開発を目指して ~ こんにちは。医療プラットフォーム第一本部プロダクト開発室所属エンジニアの髙橋です。 普段の業務では、医療 SaaS プラットフォーム CLINICS の医療機関向けアプリケーション（以下、CLINICS）の開発を担当しています。 CLINICS では、昨年 10 月頃から React コードベースのリアーキテクチャに取り組んでいます。 その取り組みの 1 つとして、非同期状態管理に関連する実装を Tanstack Query を使って刷新しています。 この記事では、CLINICS における Tanstack Query の活用方法を導入背景と狙いを含めて紹介します。 目次 Tanstack Query について Tanstack Query を活用したフロント
Discover Frontend AI
Take your frontend game to the next level. Use AI-powered tools and a visual editor to create, refine, and perfect components in seconds while keeping your designs clean and consistent.
Update November 22nd, 2021: I added a recording of my CascadiaJS on this topic to the end of this post. Enjoy! Recently, I shared this tweet: 🔥 take I haven't fully thought through incoming: Every use of useEffect should be in a custom hook with a damn good name. It's frequently difficult to read & comprehend intention of the code when effects are strewn about. Better to encapsulate and provide c
JSer.info #544 - React 18のα版のリリースとReact 18での変更予定についての記事が公開されています。 The Plan for React 18 – React Blog React 18のα版はライブラリのメンテナー向けで、これにあわせてReactのワーキンググループが作られています。 React 18の詳細な変更予定については、次のDiscussionsにまとめられて議論されています。 Discussions · reactwg/react-18 React 18の変更は基本的に ReactDOM.createRootという新しいAPIを使った場合のopt-in方式となっています。 全体的な概要は次のスレッドにまとめられています。 Introducing React 18 · Discussion #4 · reactwg/react-18 それぞれの変更
GitHub - ruby-no-kai/takeout-app: Virtual venue for RubyKaigi Takeout w/ Amazon IVS, Chime SDK for Messaging, Transcribe
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Today we are thrilled to launch react.dev, the new home for React and its documentation. In this post, we would like to give you a tour of the new site. tl;dr The new React site (react.dev) teaches modern React with function components and Hooks. We’ve included diagrams, illustrations, challenges, and over 600 new interactive examples. The previous React documentation site has now moved to legacy.
GitHub - natemoo-re/microsite: Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GraphQL, TypeScript, React を用いて型安全に社内システムをリニューアルした話 | MEDLEY Developer Portal
TypeScript 今回のリニューアルで求められたことの一つとして、さらなる改善・新規機能追加などをしていく上で、ソフトウェア品質を担保するための、アプリケーションの堅牢さがありました。 そこで、フロントエンド側の開発言語としては、プログラムコード内で宣言された型によって、エラーを未然に防ぎつつ、VSCode をはじめとするエディタのコード補完の恩恵を受けられるメリット等を考慮して TypeScript の採用を決めました。また、他のプロジェクトでも既に TypeScript は部分的に利用し始めていた事情もあり、逆に TypeScript を採用しない、という選択肢はあまり考えられませんでした。 React UI を構築するためのライブラリ/フレームワークは React を採用しました。こちらも、弊社では別プロジェクトで React を既に利用し始めていたこともあり、学習コストの観点か
GitHub - nanojsx/nano: 🎯 SSR first, lightweight 1kB JSX library.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Next.js 14 の keynote で、「server actions を使って、ボタンと同じファイル内に SQL が書ける」というキャッチーな光景が、賛否両論を呼んだ。 私個人としては、問題だとは思わない。 なぜなら、既存の「分断された クライアント / サーバー を、BFF も無しでがんばって繋げる」という世界が壊れて、 A. コンポーネントに基づいたアプリケーション設計 B. サーバー側のロジック（→必要に応じて、BFF と 真のサーバーに分かれる？） C. UI の細かな調整（→デザイナと連携 or 融合して消滅？） という形の分業に変わり、フロントエンドエンジニア全員が B. まで担当する必要が無いと考えているからである。 この3つのグループは、ソースコードレベルで連携することができるので、従来のような openAPI およびソースジェネレータに頼った開発よりも連携が容易く
GitHub - pdfme/pdfme: Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities. Create custom PDFs effortlessly in both browser and Node.js environments.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
useEffect() hook manages the side-effects like fetching over the network, manipulating DOM directly, and starting/ending timers. Although the useEffect() is one of the most used hooks along with useState(), it requires time to familiarize and use correctly. A pitfall you might experience when working with useEffect() is the infinite loop of component renderings. In this post, I'll describe the com
Knowing how to profile a React application to improve real-world performance is a good tool in any front-end developer’s toolkit. The Profiler API allows us to do just that with insights on why and how long our components are rendering for. We can use the profiling data to find unnecessary and expensive renders that may be impacting performance negatively. Thankfully, it’s not that complicated. Le
☞ React 一覧JSXJSXの記法条件分岐・ループ処理Design patternCompound ComponentOthersコンポーネントのレンダリング位置をずらすReact HooksReact Hooksとは？useEffectuseEffectのよく間違うポイントuseStateuseStateの注意点useMemouseCallbackuseReducerComponent関数コンポーネントを使うべき理由ReduxRedux の概念RefRefref forwardingServer ComponentReact Server Component Component の種類 React でコンポーネントを定義する際は大きく分けてクラスコンポーネント、関数コンポーネントの 2 つに分けることができます。 これらのコンポーネントについては、コンポーネントと props につい
[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO
こんにちは、CX事業本部の若槻です。 Google Maps APIのReact向けライブラリは現在アクティブなものでもいくつか種類がありますが、そのうちのひとつに@react-google-maps/apiがあります。リポジトリやドキュメントは下記となります。 @react-google-maps/api - npm JustFly1984/react-google-maps-api: React Google Maps API React Google Maps Api Style Guide この@react-google-maps/apiは、前回の記事で紹介したものに比べてより頻繁にアップデートが行われているようです。 今回は、@react-google-maps/apiを使用した地図アプリをローカルで起動してみました。 やってみた Reactのプロジェクト新規作成 下記コマンドを
![[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c4bbfc30d9c579c165e2970097d822f63f8c0aa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F02%2Fgoogle_map.jpg)
UIをコンポーネント化（画面部品化）して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、特に生産性とカスタマイズ性にフォーカスして作られた、Chakra UIというライブラリについて解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.4 Node.js 16.6.1／npm 7.20.3 React 17.0.2 react-scripts 4.0.3 @chakra-ui/react 1.6.6 スタイルに一貫性を持たせる難しさ 前回、前々回は、Material-UIについて解説し
先日RemixとReact Routerがマージされ、React Routerv7で統合されるという衝撃的なニュースがありました。 React RouterはこれまでSPA開発におけるルーティングライブラリとして広く活躍してきました。しかし今回の統合の背景にReact Router自体がすでにRemixとの差分が無くなっていたという事情があったことからも分かる通り、React Routerは直感的にルーティングの域を超えた存在です。 またFrameworkを採用せずReactでSPA開発をする際にはReact Routerの存在は大きいものでしたが、昨年の12月にTanStack Routerがversion1系になったことでVite+Reactでルーティングを実装する選択肢が新たに1つ増えました。 TanStack Routerについてご存知でない方はこちらの記事で詳しく紹介をしています
GitHub - ozanyurtsever/verbum: Verbum is a fully flexible text editor based on lexical framework.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは丸山@h13i32maruです。すごい今更ながらNext.jsに入門したので感想をメモしておこうと思います。 入門資料 @hokacchaさんがクックパッド社のインターンシップ用に公開している動画を見て入門しました。要点がコンパクトにまとまってるので、これを見れば基本は理解できるようになってよかったです。 SSG CodeLunch.fmのサイトをNext.jsのSSGで作り直しました。もともとreact-dom/serverのrenderToString()を使ってなんちゃってSSGを自前で実装していたので、移行は簡単でした。getStaticPropsやgetStaticPathsの仕組みはうまいこと考えられてていいな〜と思いました。 それと、データを特に持っていない本当の静的サイトでもNext.js使ってSSGで作るのは良さそうと思いました。サイト内のパーツをReactコン
GitHub - brimdata/react-arborist: The complete tree view component for React
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
It is all well and good talking about REST & HATEOAS in theory or describing the Hypermedia-Driven Application architecture, but, at the end of the day, what matters in software is practical: Does it work? Does it improve things? We can say for sure that htmx works, since we use it in our own software. But it is hard to say that it would be an improvement over other approaches, since we haven’t ha
GitHub - inokawa/rich-textarea: A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - nanostores/nanostores: A tiny (286 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ドラッグ状態で触れた要素のindexがそのまま移動先になると考えるのが1番簡単そうです。 やりたいこと これが検知できるのはonDragEnter,onDragOver,onDropということになります。 ただ、これだと末尾に移動させることができません。 なのでカーソルが触れている位置で移動先を変えることにします。 「上側 → index」「下側 → index + 1」 加えてゴースト(またはキャレット)の表示位置はドラッグ中に移動先が変わるたび更新しないといけないので、移動先の決定にはonDragOverを使用することになります。 ミニマムな実装 以上を踏まえてミニマムに実装したのがこちらです。(ゴーストなどは未実装) 補足 iOSのSafariではdraggable属性だけではなく、CSSで -webkit-user-darg: elementを付けていないとonDragStartが
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Why Next.js 私は、業務でもプライベートでも Next.js を使っています。 Next.js は "Zero Config" をうたっているわけですが、実際業務で使うとなると、なかなか Zero とはいきません。IE11用にトランスパイルが必要になったり、ソースマップのアップロードのために webpack の拡張が必要なるケースにおいては、next.config.js のカスタマイズが必要になります。 そういったカスタマイズをサポートし、設定のストレスから我々エンジニアを開放してくれるパッケージが世の中にはたくさんあります。ということで、自分以外の方々が next.config.js にどのようなプラグインを入れているか気になりました。 まずは、自分がどのようなプラグインを入れているかシェアしたいと思います。 「自分はこんなプラグイン入れていて便利ですよ」みたいなシェアを、Tw
Zodでファイル(画像)のバリデーションをする
const IMAGE_TYPES = ['image/jpg', 'image/png']; const MAX_IMAGE_SIZE = 5; // 5MB // バイト単位のサイズをメガバイト単位に変換する const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => { const result = sizeInBytes / (1024 * 1024); return +result.toFixed(decimalsNum); }; const schema = z.object({ file: z // z.inferでSchemaを定義したときに型がつくようにするため .custom<FileList>() // 必須にしたい場合 .refine((file) => file.length !== 0, { messag
GitHub - alephjs/aleph.js: The Full-stack Framework in Deno.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
始め すべての始まりは「When to useMemo and useCallback」という記事でした。これを見て「あれ？useCallbackってパフォーマンス向上するやつじゃなかったの？」混乱し、いろいろリサーチしたので、整理したいと思います。 1. 基礎知識 Reactコンポーネントは自分のstateが変更された場合、渡されるpropsが変更された場合に再レンダリングされる。 親コンポーネントが再レンダリングされると子コンポーネントも一緒に再レンダリングされる。この時子コンポーネントが最適化されていなかったら、親から渡されるpropsに変更がなくても基本的に再レンダリングされる。 コンポーネントが再レンダリングされると、その中で宣言されている関数や変数は以前保存されていたメモリを空けて新しいメモリに再び保存される(garbage collection)。 2. useCallbac
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Router v6.4はClient Side Remix
React Hooks向けライブラリSWRとは？ 通信とキャッシュ管理を簡便に
useSyncExternalStoreを使ってみた - Techtouch Developers Blog
useEncapsulation | Kyle Shevlin
2021-06-15のJS: React 18 αリリース、Deno 1.11(Docker Images)、Plotly.js 2.0
Introducing react.dev – React
beautiful-react-diagrams | A tiny collection of lightweight React components for building diagrams with ease
サーバーサイドの人を React に引き込む作戦――コンポーネントベースの考え方をまとめる
How to Solve the Infinite Loop of React.useEffect()
The definitive guide to profiling React applications
React でクラスコンポーネントより関数コンポーネントを使うべき理由 5 選
ReactのUIコンポーネントライブラリ「Chakra UI」とは？ カスタマイズ性と生産性を両立しよう【前編】
【2024年】React Router & TanStack Router比較
今更ながらNext.jsに入門した - maru source
</> htmx ~ A Real World React -> htmx Port
【React】ドラッグ&ドロップで並べ替えできるリストを実装する話
React hooksを基礎から理解する (useRef編) - Qiita
【Next.js】みんな next.confing.js にどんなプラグイン入れてる？
クラスメソッドのReact事情大公開スペシャル -「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました #クラスメソッド勉強会 | DevelopersIO
useCallbackは、本当にパフォーマンスを向上させる？
はじめに｜You and 120% Cleaner React
www.aiaoko.com
xn--bck3aza1a2if6kra4ee0hf.gamewith.jp
mainichi.jp
diamond.jp
www.sangikyo.co.jp
engineering.reiwatravel.co.jp