Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
Next.js App Routerで破綻しない設計──本番で使えるアーキテクチャ実践ガイド
内部的には Google Identity Platform + NextAuth による認証、 マルチロール制御、通知、DTO検証などを組み込み、 App Router特有の問題が浮き彫りになるような構成になっています。 📂 リポジトリ: System guide: docs/README.md Frontend playbook: frontend/docs/README.md Checklists: docs/checklists.md App Routerの“自由さ”をどう設計で制御するか 実際に運用して分かった課題は、大きく3つです。 1. 境界のあいまいさ server専用コード（handlerやrepositoryなど）がclientコンポーネント側に漏れる。 2. Server Actionのスパゲッティ化 Actionがランダムなpage.tsxに散らばり、 機能とルー
Next.js featuresディレクトリ構成で実現するスケーラブルなフロントエンド設計 - ASKUL Engineering BLOG
こんにちは。フロントエンドエンジニアの禹です。 弊社で開発中の商品データを管理するWebアプリケーションに選定したfeaturesディレクトリ構成について解説し、自分が思ったメリットやデメリット、そして実装のポイント事例を紹介します。 対象アプリケーションの概要 技術スタック： Next.js 15.3.1 React 19 TypeScript Material-UI NextAuth.js 主な機能： アイテム管理 フィルタリング テーブル表示 ページネーション データ処理 featuresディレクトリ構成 featuresディレクトリ構成は、機能（feature）単位でファイルを配置するディレクトリ構成となります。 src/ ├── features/ # 機能別ディレクトリ │ ├── alert/ # アラート機能 │ ├── fileProcessing/ # ファイル処理機能
Next.js App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離 - レバテックLAB
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表：山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に『たった1日で基本が身に付く! Androidアプリ開発超入門』、『基礎から学ぶ React Native入門』 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表
Reactでロジックをhooksにまとめないという選択肢 - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A
Turborepo のダミータスク topo ってなんだー！？ - Mitsuyuki.Shiiba
JavaScript や TypeScript のモノレポを便利に使えるようにしてくれる Turborepo というツールのドキュメントを読んでて、↓この部分で？？？ってなった。ので、将来の自分用にブログにまとめておくことにした。 https://turbo.build/repo/docs/core-concepts/monorepos/task-dependencies#dependencies-outside-of-a-task topo ってなんだー！？ add、subtract、multiply という workspace があって subtract は add に依存している multiply も add に依存している という場合に、こういう書き方をすると↓ { "$schema": "https://turbo.build/schema.json", "pipeline":
Encraft #4「React/Next.js 最前線」開催レポート
こんにちは、よしこです。 今回は、参加者が800人を超え大盛況となった Encraft #4 「React/Next.js 最前線」 の開催レポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は 株式会社ナレッジワーク が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1 「フロントエンド × 設計」 開催レポート Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート それではさっそく今回のセッション資料と動画アー
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
久しぶりにReactのプロジェクトに参加｜const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた【おかわり編】
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた【おかわり編】
管理画面等でNext.jsをBetter Reactとして使う | フューチャー技術ブログ
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。 ホンダ時代に、タイプRを買っても実際にサーキットとかに走らせに行く人は1/10ぐらい、という話を聞いた気がしますが、必ずしも、そのすべてのパフォーマンスを引き出さないのはダメとかなくて、単にかっこいいからとか、一部のメリットでも自分にあえば良いのです。 Next.jsも、たくさん機能がありますが、ミニマムな使い方もできます。 ほぼNext.jsの機能をオフにした使い方たぶんNext.jsを最低限で使うライン・メリットはここかな、と思います。 基本的に全部CSR(Client Side Rend
React Application Architecture for Production〜これ一冊で全てが網羅〜
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
Home
Learn everything you need to become a better designer standards, conventions and more.
StorybookとChromaticの導入、GraphQLのSchema Stitchingの活用… これからの爆速開発に向けた「無駄をなくす」技術投資 | ログミーBusiness
消耗してしまったメンバーが増えた時期があった横江亮佑氏（以下、横江）：組織もなにか工夫したところはあるんですか？ 村下瑛氏（以下、村下）：当時は5人のチームだったので、組織みたいな要素はほぼゼロというか。 横江：じゃあ、この開発を進めていく上でハレーションとかも特になかったんですか？ 村下：でも、それでいうとやはりあって。 横江：この人数であったんですね。 村下：5人で小規模なチームではあったんですが、僕が開発にフルコミットみたいな感じではなくなりつつあるようなタイミングで、チームからすると、ややステークホルダー寄りみたいな頃がありました。 横江：ステークホルダー寄りってどんな感じですか？ 村下：上司じゃないですが、進捗を報告するようなところがあった状態で。とはいえ、僕の目線としては今までどおり「同じ釜の飯を食うチームだよ」みたいな感じだったんですよね。 だから、けっこう無邪気に「このリリ
【コード品質】綺麗なReactコード 応用７例 - Qiita
初めに Reactの実装ドキュメントやライブラリは充実している 要件通り動くだけのコードを作ることは誰でもできるが、保守運用改善は大変である 綺麗なコードほどコード修正は早くなり、デバックは効率的になり、開発者間の認識の共有は楽になる 前提 基本: 数行レベルで綺麗なコードが書けること 中級: コンポーネント単位で綺麗なコードが書けること 1. 無駄なアルゴリズムの適応はするな 問題提起されてない箇所に勝手に適応していないか? ベンチマークが数段高くても、ユーザ体験的には誤差でないか？ // NG🤔 制御フローの理解，例外ケースの確認，一定時間要してしまう const sumArray = (numbers: number[]): number => { let sum = 0; for (let i = 0, j = numbers.length - 1; i < j; i++, j-
RecoilとRxJSってどう違うの？ 共通点は？ 調べてみました！
皆さんこんにちは。筆者は最近Recoilを推す記事を量産しています。その成果か、Recoilは非同期処理を交えたロジックを書くのが得意であるということは以前よりも知られるようになりました。その次のステップの話題としてよく見られるのが「Rxと似ている」「Rxとどこが違うの？」といったものです。Rx (Reactive Extensions)、とくにフロントエンドの文脈ではRxJSですが、これは非同期処理を交えたロジックを記述できるという点で確かにRecoilと類似しています。 そこで、今回はRecoilとRxJSの共通点や違いについて、具体例も交えつつ解説します。 コンセプトから見るRecoilとRxJSの共通点・相違点 RxJSの特徴については、RxJSのイントロダクションにわかりやすく書いてあります。 RxJS is a library for composing asynchronou
ハンズオン：React チュートリアルからはじめる TypeScript と単体テスト
import { useState } from 'react'; function Square({ value, onSquareClick }) { return ( <button className="square" onClick={onSquareClick}> {value} </button> ); } function Board({ xIsNext, squares, onPlay }) { function handleClick(i) { if (calculateWinner(squares) || squares[i]) { return; } const nextSquares = squares.slice(); if (xIsNext) { nextSquares[i] = 'X'; } else { nextSquares[i] = 'O'; } on
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome! - DEV Community
Lexical
React.jsでemotionを使うときはJSX Pragmaをつける必要がありまして。 - Qiita
Zodを試す