毎週大量のプルリクエストを捌く！Next.js App Router時代のスケーラブルなフロントエンドアーキテクチャ設計 - ぐるなびをちょっと良くするエンジニアブログ
はじめに こんにちは。Restaurant Service Devグループの高岡です。現在ぐるなびウエディングのフロントエンド開発・運用を行っています。 ぐるなびウエディングは結婚式場検索・予約サービスで、検索・会場詳細・特集・ランキングなど多様な機能を持つ大規模なウェブアプリケーションです。 そのぐるなびウエディングはリニューアルプロジェクトが進行しており、今年の7月に二次会検索と会場ページをリリースしました。 今回は大規模なウェブサービスのリニューアルにおいてチーム開発の効率性と保守性を両立するフロントエンドアーキテクチャをどう設計するか、ぐるなびウエディングリニューアルプロジェクトで実践した取り組みについて紹介します。 目次 はじめに 目次 開発体制 採用した技術スタック フレームワーク：Next.js App Router スタイリング：CSS Modules グローバルな状態管理
propsを1つ増やしただけなのにレスポンスサイズが5倍に増えてしまった
ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。 原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。 SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。 分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。 そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない（？）RSCペイロードの覗き方を簡潔にお伝えします。 RSCペイロードを覗く Next.jsでRSCペイロードがどう扱われているのか、実際に覗いてみます。 以下の3つのファイルを用意して確かめます。 import ClientCompon
Claude CodeとCodex MCPの組み合わせが体験良すぎる
こんにちは、mayaです！ 最近、Claude Codeでボリュームの大きいタスクを実行していると、途中でAuto Compactが発動してコンテキストが圧縮され、それまでの経緯をClaude Codeが見失ってしまう問題に悩まされていました。 せっかく良い流れで進んでいたのに、突然とんちんかんな作業を始めるあの絶望感、分かる方も多いのではないでしょうか😭 そんな中、Codex CLIがMCPに対応したという情報を見つけて試してみたところ、これが予想以上に良い体験でした！ Claude Codeがタスク管理役、Codexが実行役という役割分担により、コンテキストウィンドウをほとんど消費せずに大規模なタスクを自律的に完遂できるようになりました。 この記事で分かること / 対象読者 Claude Codeのヘビーユーザー向けの内容です コンテキストウィンドウ問題の実践的な解決方法 Claud
ブログの編集画面にイルカが出てきて本文を読んでアドバイスをくれるuser.js - hitode909の日記
近年では、作文した文章をいきなり人に見せず、まずチャットに見てもらって、つっこみどころがないことを確認してから公開する、という習慣ができている。 ブログを書くときには、ブログの編集画面で書いてから、ChatGPTにコピペしていたけど、その場で見てもらえたら早いと思い、以下のようなことをやってくれる拡張機能を作った。 ブログの編集画面で動いて、本文を監視する 本文に変化があれば、「日記を批評して：（以下本文）」というプロンプトでChat GPTのAPIに送る 得られた批評は、編集画面内に現れたイルカのセリフとして表示する Chrome拡張で作ったらいいかと思ったけど、この拡張時代の実装もAIにやってもらいたい、と考えると、1ファイルで完結したほうが楽だ、と思って、Tampermonkeyで動くuser.jsとして作った。 APIキーはGM_setValueして格納している。これは他のuser
UnJS製のライブラリ・cittyを使ってNode.jsでさくっとCLIを作る - 空の箱
cittyを使ってみたところめっちゃ良かったのでメモがてらエントリを書く。 citty unjs.io Nitroとかh3とかいろいろいい感じのライブラリを作ってるUnJSのライブラリの一つ。いい感じにCLIツールを作れる。 準備 npm install citty 公式のサンプルソースを拝借。 import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI App", }, args: { name: { type: "positional", description: "Your name", required: true, }, friendly: { ty
Next.js のリリースは追っておこう
この記事は Magic Moment Advent Calendar 2024 16 日目の記事です。 Magic Moment でフロントエンドエンジニアをやっている negishi です。 最近引っ越しをしたのですが、自宅から 10 分圏内にラーメン二郎・家系・中本があるのでラーメン好きな私の QOL が最高潮に達しています。 はじめに 弊社は React を採用しフロントエンド開発を行っています。 React でフロントエンドを開発する際には、公式ドキュメントでも推奨されているように Next.js や Remix (react-router-dom v7 に統合されましたね) などのフレームワークを用いることも選択肢として存在します。 弊社ではこうしたフレームワークは採用しておりませんが、最近 Next.js にフロントエンドメンバーで触れる機会がありました。 React のフレー
クレカ情報の流出があったタリーズオンラインストアのWebアーカイブから原因を特定した猛者が現れる→集まった有識者たちにより巧妙な手口が明らかに
あらおじ @ojigunma すごい タリーズの原因発見してる人いる 確かにナンカある slick.min.js という画像をスライドするファイルの中に 難読化された悪意のあるコードが追記されてるっぽい 難読化は４段階ぐらいされてるらしい これブラウザとかセキュリティソフトで気づくのは無理なんだろか。。。 x.com/motikan2010/st… 2024-10-04 13:15:14 Niishi Kubo @n11sh1_ クレカ情報漏洩の件、技術的な原因特定はこの投稿が一番分かりやすかった。 slick.min.js（画像切り替えのライブラリ）を改ざんされてマルウェアが仕込まれて、クレカ情報はサーバーに送信される前にフロントエンドから外部に送信されていたらしい。Content-Security-Policy がレスポンスヘッダーにきちんと設定されていれば悪意あるドメインに対しての通
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
俺の管理画面 2023年冬 - KAYAC Engineers' Blog
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
Next.js製アプリケーションのコンパイルを約100倍高速化した話
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 [email protected] tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
JSのウェブフレームワークで高速なルーターを実装する方法
https://nseg.connpass.com/event/251366/ での発表資料です。
💡 Node.jsのバージョン管理ツールを改めて選定する【2021年】 - Qiita
開発者「すみません、なんかnpm iとかnpxコマンドがうまくいかなくて…」 ワイ「でたー、cb.apply is not a functionって書いてません？」 開発者「書いてます」 ワイ「ちょっと見てみますね」 ワイ「……これはnpm入れなおしたほうが早そうですね…」 ｶﾀｶﾀ… ワイ（うーん…なぜ未だにnodistで消耗しているのか…😨） TL;DR nodistはもうやめよう 選定するときは、まず選定基準を決めよう 関連技術の特徴を洗い出そう それらが自分たちの環境にどれくらいマッチするかで比較しよう Windowsならfnmがオススメ1！ ※ バージョン管理ツールがなんだかわからない方は「Node.jsのバージョン管理ツールとは」からお読みください。 うわっ…私の現場、nodist使いすぎ…？ Node.jsの利用が本格化してきたころ、私の周りでは圧倒的にnodistが流行し
creative codingに入門してみている - すぎゃーんメモ
子ゃーんに喜んでもらいたくて、creative coding入門してp5.jsで色々作る練習してる。今はフワフワでキラキラな可愛いシャボン玉を表現しようと試行錯誤しています pic.twitter.com/qGeRYCelqh— すぎゃーん💯 (@sugyan) October 6, 2021 動機・目的 上記の通り、「子に喜んでもらえるものを作る」ことを目指す。 特にshort codingなどにチャレンジしたりはせず、またgenerative artのようなものよりはどちらかというと"触って遊べる"インタラクティヴなものを優先的に。 1歳半の我が子は最近はiPadの操作も慣れてきていて、幼児向けアプリなどで画面を指で触って楽しむことは出来るようになっている。複雑な操作はまだ難しいが 直感的に動かせるようなものなら楽しんでくれるのでは(という勝手な期待)。 …とはいえ 単純に自分が面白
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド準備編｜Yuu's Memo
皆さんこんにちは！！ 前回までで、最低限のスケジュール管理をできるAPIサーバーの作成が終わりました。 今回からは、フロントエンド編ということで、ようやくWEBアプリの開発らしくブラウザー上で動きを確認できるようになります。 フロントエンドは、Vue.jsで作成するのですが、いくつか開発に便利なライブラリーを利用して開発を行なっていくので、今回は「準備編」ということで、一気にそれらのライブラリーをプロジェクトへ組み込んでいきたいと思います。 では、張り切っていきましょう！！ 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - image-js/image-js: Image processing and manipulation in JavaScript
Next.js App Router での MPA フロントエンド刷新
