Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
Next.jsの考え方
Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog
目次 はじめに Colocation を意識した設計方針 Parallel Routes と Intercepting Routes を用いた設計パターン サーバー側に処理を寄せたことによる恩恵と課題 Next.js が抱える課題 おわりに 参考文献 はじめに ジャンプTOON のWeb版（以降、ジャンプTOON Web）の開発を担当している浅原昌大（@assa1605）です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON のフロントエンドには、Next.js を採用し開発をしています。 本記事では、Next.js の最新機能や設計パターン、Next.js を採用した恩恵と現在の課題について紹介します。 Colocation を意識した設計方針 Parallel Rou
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
はじめに この記事について こんにちは、zomysan（ぞみ） です。今回は私の所属するソーシャルPLUSのフロントエンドチームがどのようなことを考えてテストを作っているのかを紹介します。 フロントエンドのテスト手法については素晴らしい本や記事がすでにたくさん存在しますが、限られたリソースの中で、実務としてどうテストをこなしているのか、という具体的な事例として楽しんでいただければ幸いです。 テスト運用における課題や改善点も率直に紹介しますので、「うちではこうやって解決しているよ」といったご意見があればぜひコメント欄で教えてください！ 対象読者 フロントエンドのテスト運用に悩んでいる方 フロントエンドのテストってどういうものなのか興味がある方 ソーシャルPLUSに入社したフロントエンドメンバー この記事に書いていないこと すべてのチームにとっての最適解は提示していません 弊チームにとっても折
これまで、Findy Toolsのアーキテクチャ特集記事では、テーマや分野ごとに複数の企業からアーキテクチャや技術選定の背景を伺い、まとめた記事をお届けしてきました。今回から始まる新シリーズでは、1社の技術選定についてさらに深く掘り下げ、個々の選択がどのように全体の成功に寄与しているのかをより詳細に探っていきたいと思います。初回の本記事では、まず私たち自身であるFindy Toolsが、2ヶ月という短期間でリリースに至った技術選定の裏側をご紹介します。 Findy Toolsについて Findy Toolsは開発ツールに特化したレビューサイトです。 ツールのレビューや他社のアーキテクチャを見て技術選定の参考にすることが出来ます。2024年1月にベータ版としてサービスをリリースしました。 ベータ版までは ほとんど1人で開発され、現在は3名で開発を行っています。 立ち上げのスピードを重視して、
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
I've hired a lot of developers over the years. More than a few of them have come in with a strong belief that our code needed heavy refactoring. But here's the thing: in almost every case, their newly refactored code was found by the other developers to be harder to understand and maintain. It also was generally slower and buggier too. Now, don't get me wrong. Refactoring isn't inherently bad. It'
特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new Date() < showAt) { return null; } else { return children; } } これを Next.js Pages Router などから、以下のようにして使
ジャンプTOON Web アプリケーションの全体像〜採用技術と開発方針〜 | CyberAgent Developers Blog
目次 はじめに Next.js × GraphQL のサーバー間通信 Fastly でのコンテンツ配信とキャッシュ方針 vanilla-extract の採用とスタイリングシステム Chromatic による UI テスト / UI レビュー Datadog でのサービスモニタリング ジャンプTOON の CI/CD リリース戦略とブランチ運用の工夫 おわりに はじめに ジャンプTOON の Web 版（以降、ジャンプTOON Web）の開発を担当している2024年度新卒入社の鏑木 俊樹（かぶらき としき） @tosssssy_ です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON Web では Next.js App Router （v14.2）を採用して開発をしてお
前回はNEC、TIS、富士通の技術者が描いた全体概要図と物理構成図に注目した。今回は論理構成図に焦点を当てる（表3-2）。まずはインターネットイニシアティブ（IIJ）のITサービスインテグレーション4部2課でテクニカルマネジャーを務める田島文郎さんらのチームが描いた論理構成図に注目しよう。 田島さんらの図はセンター拠点からインターネットへと接続するコアネットワークを主な対象とする。ネットワーク機器など構成要素の大きさや配置と、図に書き込む情報量のバランスを工夫することで、インターネットと接続する回線が4系統もある大規模ネットワークを複雑にならないようにしている。 要素を伸縮させて線を見やすく 例えば構成要素の1つであるVR（Virtual Router、仮想ルーター）*10などのノードの大きさを自在に変えている（次ページの図3-4）。この工夫によってノード間の線を全て直線で表現できるように
Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合 | ドクセル
Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合
1兆 (1T) パラメータ規模のLLMの事前学習検証 - Preferred Networks Research & Development
Preferred Networksの子会社のPreferred Elements(以下PFE)では7月から約1ヶ月の間、1兆 (1T) パラメータ規模のLLMの事前学習について検証を行っていました。今回の記事ではこの取り組みとその結果について紹介します。 この検証は経済産業省が主導する国内の生成AIの開発力を強化するためのプロジェクト「GENIAC（Generative AI Accelerator Challenge）」のもと、NEDO（国立研究開発法人新エネルギー・産業技術総合開発機構）の助成事業に採択され、計算資源の提供支援を受けて実施しました。 超巨大モデル学習の目的 今回の取り組みは、超巨大な (1Tクラスの) DNNモデルを学習できるかを確認することを目的としています。そもそもなぜこの検証をしたのかについての説明から始めようと思います。 LLMの事前学習では、学習に利用したデ
v0 とは v0 は vercel 社が提供する React ベース[1]の UI を作ることができる生成 AI サービスです。 こちらの指示をもとに、 shadcn/ui や tailwind を使って UI を構築することができます。 先日、public Beta 版が公開され、会話形式で UI を逐次生成できるようになりました。 これまでは、プロンプトを v0 に投げると数パターン実装例を提案してくれていましたが、 ついに会話でやりとりをしながらコンポーネントをブラッシュアップしていくことが出来るようになりました。 早速ログインして試してみます。 できることとしては下記の通りです。(2024年9月1日現在) ジェネレーティブAIを使って、shadcn/uiとTailwind CSSに基づいたコピー＆ペーストしやすいReactコードを作成します。 プロンプトを送信するか画像をアップロー
はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため
最近の盆栽ですけれど、tanukirpcというGoのWebフレームワークを書いています。ある程度やりたいことができはじめてきたので、どんなフレームワークかを紹介します。 github.com TL;DR Webアプリケーションでよくやるようなことを、最短手順で自然に書けるように設計したフレームワーク リクエストをパースして構造体にマッピングする リクエストの内容をバリデーションする レスポンスの構造体をエンコードしてレスポンスとして書き込む グローバルスコープもしくはリクエストスコープでの構造体のコントローラーへの依存性注入 DBコネクションやAPIクライアントの保持などに使う 現在の責務範囲はWebアプリケーションのコントローラーだが、Webアプリを作る時によくやるようなことはできるだけやれるようにしてく tanukiup 開発サーバー起動用コマンド。ファイル更新を監視してビルドおよびサ
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
Server Actions で経費削減できた話
はじめに 個人開発にて、App Routerのフロントエンドとkotlin / Spring Boot / REST APIのサーバーサイドで構築されるシステムを2022年くらいから運用していました。機能的には問題なく使えていたのですが、如何せんAWS / EC2 上にNginx, Tomcat, RDBを立てているため、初年度無料枠で使用できても2年目からは月々2000~3000円ほど利用料が発生していました。 どうにかいい方法はないかと模索していたら、Server Actionsが使えるのでは？ということで思い切ってサーバーサイドを刷新することにしました。 以下は、この刷新を受けて得られたメリット・デメリットです。 メリット 今回採用した環境ではすべて無料なので、サーバー使用量がまるッと浮いた。（2024/08/13時点） kotlin のお守りがなくなり、TypeScriptのみの改
Findyの名物企画のコントリビューション・オブ・ザ・イヤー2024中間発表の裏側を大公開！ - Findy Tech Blog
Findyでエンジニアをしている栁沢（@nipe0324）です。 今回は、Findyの名物企画である「コントリビューション・オブ・ザ・イヤー2024中間発表」の裏側を公開します。裏側を知り、キャンペーンをより楽しんでもらえたら嬉しいです。 キャンペーン期間中にXでシェア後にフォームから応募することで「Anker充電器（Findyオリジナルデザイン入り）」が抽選で当たるかも！？ ぜひお申し込みください。 👇👇👇 コントリビューション・オブ・ザ・イヤー2024中間発表を試してみる コントリビューション・オブ・ザ・イヤーとは コントリビューション・オブ・ザ・イヤーの裏側 裏側①：コントリビューション・オブ・ザ・イヤーのランキング表示 裏側②：コントリビューション・オブ・ザ・イヤーのOGP表示 コントリビューション・オブ・ザ・イヤーを楽しんでください コントリビューション・オブ・ザ・イヤーと
はじめにSakana AIさんのThe AI Scientistを筆頭に、LLM-Based Agentの社会活用は今後拡大してくと考えています。また、Agentで推論→結果を合成データとしてTuningに利用みたいな流れで、LLM自体の発展にもAgentは活用されていくと考えます。 これらをモチベーションに最近LLM-Based Agentの勉強をしており、試しに作ったものを一部Noteで共有できたらと思っています。 今回は、LLM-Based Agentの基本的なアーキテクチャであるReflection Agentを題材に、SNS投稿コンテンツを提案してくれるAgentを作成していきたいと思います。 LangGraphでの基本的なAgent Workflowの構築については以前の記事をご参照ください。 1. Reflection AgentとはReflection Agentでは以下の
フロントエンドカンファレンス北海道開催など : Cybozu Frontend Weekly (2024-08-27号)
こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 8 月 27 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boosting performance: Faire’s transition to NextJS https://www.faire.com/ が React Router から Next.js App Router へ移行した際の解説記事です。Remix や Fresh/Deno なども検討した結果、スピードやフレームワークの成熟度、移行作業のボリュームや開発者経験などから Next.js の採用に至っ
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
はじめに おはようございますhiroです。 Vueを学習するにあたり、初学者向けのロードマップがあればと思っていたため本記事を書きました ✏️ タイトルにもありますが、本記事は私の経験に基づくかなり主観的なものとなっていますので予めご了承ください。「これからVueをどのように学習しよう？」そう悩んでいる方の参考になれば幸いです！ 対象読者 本記事はVueをこれから学習しようとしている初学者の方を対象としています。具体的に以下のような悩みを持った方を想定しています。 JavaScriptをざっと学びこれからVueをどのように学習しようか悩んでいる方 どのような教材を使用すれば良いか悩んでいる方 公式ドキュメントを読めと言われて「読めれば苦労しないよ！」と悶々としている方 本記事では、教材の紹介からその教材をどう使用していくかなどを具体的に記載しております。 ゴール 本記事のゴールとして、Vu
Cursor Directory
Python8TypeScript7React6Next.js4React Native4Vite3C#3Meta-Prompt3Expo3JavaScript2FastAPI2Unity2Game Development2API2Function2Tailwind2Astro1Viem v21Wagmi v21Standard.js1SwiftUI1Swift1Laravel1PHP1Ruby1Rails1Microservices1Serverless1Flask1Django1Web Development1Vue.js1Node.js1Critique1Reflection1Trajectory Analysis1WebShop1Acting1Tailwind CSS1three.js1React three fiber1Julia1DataScience1Data Analyst
はじめに Next.jsにApp Routerが導入されたことで、開発者にとって便利な機能が増えた一方、App Routerを前提とした設計のベストプラクティスがまだ確立されておらず、設計時にさまざまな検討が必要になっています。 特に大規模プロジェクトでは、開発が進むにつれてコードが肥大化し、メンテナンス性が損なわれる可能性があります。そのため、コードを細分化して管理し、将来的な保守や拡張を容易にするアプリケーション設計が求められます。 今回の記事の項目 本記事では、App Routerの機能を最大限に活用するための設計について考察します。 特に以下の項目に焦点を当て、長期にわたってメンテナンス性の高いプロジェクトを構築するための方法を探ります。 App Routerを活用した効率的なディレクトリ設計戦略 レイアウトコンポーネントの効果的な利用 RSCの活用 サーバーコンポーネントとクライ
Web で縦書きの段組みレイアウトは意外と難しい
概要 Web で文字数が不定の文章を縦書き段組みでいい感じにレイアウトするのは意外と難しい、ということを紹介する記事です。[1] 環境 Next.js App Router: v14.2.5 React を簡単にセットアップしたかっただけで、ほとんど関係ないです Windows 11 Google Chrome: v127.0.6533.120 実装 今回は「小説のような長さ不定の文章を、縦書きかつ縦スクロールで読みたい」という要望に応えることを想定します。 長い文章を縦書きかつ縦スクロールで読むには、読みやすさの観点で段組みするしかないと思います。 また一般の Web サイトにはヘッダーやフッターがあるので、最低限それらを模したレイアウトに収めることを目標にします。 縦書きで段組みする まず共通パーツとして夏目漱石の小説『こころ』の中身を詰め込んだコンポーネントを作っておきます。（中身は
Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月（2024年7月）ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン
App Routerの基本的な仕組みとファイル構造
はじめに App Routerは、Next.jsのバージョン13.4で安定版として登場したルーティングシステムです。 React Server Components（RSC）を基盤としており、サーバーサイドでの処理を可能にすることで、従来のPages Routerよりもパフォーマンスの向上を図っています。 App Routerの誕生背景 ReactとNext.jsの進化を振り返ると、App Routerの登場がいかに画期的かがわかります。 ReactとNext.jsの進化 Reactは2013年にFacebookによって公開され、コンポーネントベースの設計や仮想DOMなど、多くの革新的な概念を導入しました。 2016年には、Vercelの創設者であるGuillermo RauchによってNext.jsが登場。 Next.jsは、Reactの強力な機能を活かしつつ、サーバーサイドレンダリング
Tailscale小技集
もうわれわれはほろ苦い青春の思い出（おそるおそる自宅ルータのポートを開ける・移り気なIPを追いかけてDDNSでドメインを振る・得体の知れない無料VPNに身を委ねる）に悩まされなくていい。なぜならTailscaleがあるから。 Tailscale · Best VPN Service for Secure Networks Securely connect to anything on the internet with Tailscale. Built on WireGuard®️, Tailscale enables you to make finely configurable connections, secured end-to-end according to zero trust principles, between any resources on any infrastr
今回使用したソースコード Next.jsのセットアップ Next.js本体の準備 公式に則り npx create-next-app@latestで開始します。 $ npx create-next-app@latest ✔ What is your project named? … worksample-nextjs14 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommend
はじめに 就職や転職を考えているWebエンジニアのみなさん、どんなことを勉強していますか。プログラミング言語を勉強した後の悩みといえば、どのフレームワークを使用すれば良いかではないでしょうか。フレームワークの選択はキャリアに影響する大切なポイントです。そこで今回は、フロントエンドとバックエンド開発などで需要が高いフレームワークを4つピックアップしました。それぞれのフレームワークの特徴などを解説していきます。あなたのスキルアップの参考にしてみてください。 フロントエンドで人気なフレームワーク 1. React ReactはFacebookが開発したJavaScriptのライブラリで、ウェブのフロントエンド開発で広く使われています。動的なWebアプリケーションを手軽に作ることができるため、特に人気のあるフレームワークの一つです。Reactは他のライブラリやフレームワークに比べて学習が難しいとさ
ローカルLLM自由帳
言語モデルの「記憶」を管理する方法としては、１）追加学習や知識編集によってLLM自体の知識更新を試みる方法と、２）外部の記憶データから必要情報を適時検索してモデルに渡す方法、の2つの方向性があります。 この論文は後者の系統に属する研究で、人間のエピソード記憶のあり方を参照し、外部データを効果的に整理・検索することを目指した研究のようです。 タイトルは"Human-like Episodic Memory for Infinite Context LLMs"で、Huaweiの研究所とUCLの研究者らによって2024年7月に投稿されています。 arxiv.org 要旨 大規模言語モデル（LLM）は目覚ましい能力を示しているが、広範なコンテキストの処理にはまだ苦戦しており、長いシーケンスにわたって一貫性と正確さを維持する能力には限界がある。これとは対照的に、人間の脳は、生涯にわたる膨大な時間スケ
NIH症候群の逆襲 - タオルケット体操
僕がプログラマーになった20代前半の時期は、ちょうどRubyやPythonが日本でもキャズムの峠を越え始めたあたりだったようにおもう。 なので最初の数年間は、当初の所属組織がSIerやハードウェア寄りのお堅い環境だったのもあって 「OSSはとにかく最高でバンバン使え」 「（他人が作った）小さいパーツをとにかく組み合わせろ」 「自分で書いたコードは少ないほど良い」 という当初の風潮を無邪気に信用していたようにおもう。 （とはいえ僕がプログラミングを覚えた言語であるPythonは他と比べると比較的堅実で、標準でできることをちょっと楽に書けるだけのライブラリは入れるんじゃねえ！というような文化はあった） 現代でもそうなのかは知らないが、当時のSIerはほんの少しの不確実性が混じるくらいなら確実で再現性のある失敗を選ぶといった感じで、とにかく技術的にまともなライブラリ選定というものは存在しなかった
Architecture: Turbopack | Next.js
{ "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint" } } Supported features Turbopack in Next.js requires zero-configuration for most users and can be extended for more advanced use cases. To learn more about the currently supported features for Turbopack, view the API Reference. Unsupported features Turbopack currently only supports next dev
Progressive Web Applications (PWA)Progressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. With Next.js, you can create PWAs that provide a seamless, app-like experience across all platforms without the need for multiple codebases or app store approvals. PWAs allow you to: Deploy updates instantl
状態管理ライブラリ Jotaiの使い方
今回は React アプリケーションの状態管理ライブラリの中でも人気の高い "Jotai" の使い方を記事にしたいと思います。豊富な機能の中から本記事では以下の機能について記載しています。 atom, useAtom, useSetAtom, useAtomValue atomWithReset, atomWithLocation ( searchParams ) Read Only Atom, Write Only Atom Atom Creator 記事内に掲載しているソースコードは Github でも確認できます。 Jotai とは 🤔 Jotai は @dai_shi さんが作った React アプリケーションのための状態管理ライブラリです。軽量で使いやすく主に次のような特徴があります。 Atom（アトム）と呼ばれる小さな単位で状態を管理できる 使い方が直感的で、学習コストが低い
Upgrade Guide https://redwoodjs.com/upgrade/v8 Changelog 🚨 Breaking deps(react): 18.3.1 (#10885) by @Tobbe Please see #10885 for more details fix(template): Set scripts/ module resolution to match api/ (#11366) by @Tobbe Make the module resolution for scripts/ be more predictable/stable, and match that of api/ See also #11170 fix(tsconfig): set "module" to "ESNext" for web/tsconfig.json (#11368)
package by feature なファイルの依存関係をルールで守る（eslint-plugin-boundaries）
package by feature と呼ばれるディレクトリ構成が一般的になってきました。[1] キカガクでも、新規に作成するプロジェクトでは package by feature なディレクトリ構成を採用したり、既存のプロジェクトを段階的に移行させたりしています。 今回は、この package by feature のディレクトリ分割を ESLint でルール化する方法を紹介します。 package by feature とは 詳しい説明は他の記事に譲りますが、ざっくり言うと、ファイルの種別ではなく機能を基準にディレクトリを分けていくようなディレクトリ構成の方法です。 これにより、1 つの機能に関わるファイルがまとまる（＝コロケーション）ため、読むのも書くのも楽になります。 import ルールを設けたい package by feature でディレクトリを構成する場合、基本的に同じ機
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
ユーザー体験重視のSPAアーキテクチャ改 - laiso
弊社のフロントエンドのテストについて、考え方・方針・やっていることなど全部紹介します（2024年版）
2ヶ月でリリースしたFindy Toolsの技術選定の裏側 - Findy Tools
Good Refactoring vs Bad Refactoring
React Server Components で時限式コンポーネントを作る - mizdra's blog
ネットワーク図が情報過多になっていないか、IIJやNTT系に学ぶ見やすくするワザ
public beta になった v0 を試してWebサイトを作る
TanStack Routerでサクッと始める型安全ルーティング
tanukirpcというWebフレームワークを作っています - ぱいぱいにっき
LangGraphを使ったReflection Agent： SNS投稿コンテンツ提案Agent｜はち
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
経験談に基づく主観的Vue.js学習ロードマップ
【Next.js】App RouterとRSCによるアーキテクチャ設計
Nuxt Bridge を活用して Nuxt 3 へ移行しました - STORES Product Blog
Next.js14をVercelにデプロイするまで。+v0+Prisma+Neon
駆け出しWebエンジニアへ勧める〜人気フレームワーク4選〜 - Qiita
Configuring: Progressive Web Applications (PWA) | Next.js
Release v8.0.0 · redwoodjs/redwood