Next.jsでMiddlewareが大量に実行される場合の対処法
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js（１４．x） App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En
【ミノ駆動流】「思うように伝わらない」を解消する！エンジニアのための言語化力の鍛え方 - エンジニアtype | 転職type
NEW! 2024.05.21 スキル 「つまりどういうこと？」「要するにできるの、できないの？」「それって何の話だっけ」 技術的にどうするべきか正解は見えているのに、頑張って説明しても返ってくるのはそんな言葉ばかり……。「うまく伝えられない」という悩みを抱えるエンジニアは、少なくないのでは？ 2023年のITエンジニア本大賞・技術書部門で大賞を受賞した『良いコード／悪いコードで学ぶ設計入門』（技術評論社）の著者であり、SNSでの情報発信やイベント登壇でも活躍する「言語化のプロ」であるミノ駆動さんも、昔は「君が何を言ってるのか分からん」と上司に言われていたそう。 ミノ駆動さんはどのように言語化能力を伸ばしたのか。聞くと、出てきたのは「合意駆動」というキーワード。その正体とは？ ミノ駆動さん（@MinoDriven） 新卒でNEC の関連会社に入社。その後キヤノンでの10年のエンジニア経験を
実用Rustアプリケーション開発
実世界のRustアプリケーションを効率良く開発するための実用的な知見集 仕事などで実世界のRustアプリケーションを書く時に実用的な知見やtipsがまとまっていたらいいなと思ったことはありませんか？ この本では、アプリケーションを書く時に悩むポイントや便利crateを素早くアプリケーションに組み込む際のポイントを紹介します。本の内容をスリムにするため、自分が学び始める前に知りたかったものに絞りつつ要所を紹介・解説します。Rustの言語仕様のメジャーどころやよく利用されているcrateはドキュメントが豊富なので、わからないところや詳しく知りたい部分はドキュメントを読んだりLLMに聞いてみたりしてください。 想定読者: "The Rust Programming Language" の要所を読み終えたくらいのこれからRustでアプリケーションコードを書いていく、または今まさにアプリケーションコ
Vue3でモーダルダイアログの起動をいい感じに実装する | フューチャー技術ブログ
Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。 ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装するVue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？という方針を見つけたので、備忘がてら技術ブログに書いておきます。 使いやすいダイアログAPIとは太古の昔より、便利なダイアログ機能というのは、呼び出し元はダイアログの開閉状態とか細かい制御は気にせず、必要な情報を渡して、結果だけもらうというものです。JavaScriptのブラウザのAPIにもありますよね。 const result = confirm("今日はいい天気でしたね") // OKのときはtrue console.log(result) これはVisual Basicとかでもなんでも同じですね。ただし、JavaScriptだとconfirm()、ale
【React】useEffectの関数はいつ実行される？（むずかしくないReact #1） 【VOICEVOX解説】
「セットアップ→クリーンアップ」のエフェクトのライフサイクルから、依存配列の正しい指定のしかた（ESLint による自動チェック・補完）まで、ざっくり解説 「依存配列によってタイミングが異なるの、ややこしすぎる！」「なるべく使わないと言われているなら、設計として優れてないの？」という疑問に答えます！ # 関連記事 - https://zenn.dev/yumemi_inc/articles/react-effect-simply-explained - https://ja.react.dev/learn/lifecycle-of-reactive-effects - https://ja.react.dev/learn/removing-effect-dependencies # BGM・効果音 - 効果音ラボ様: https://soundeffect-lab.info/
リッチ スニペットと構造化データについて - ウェブマスター ツール ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google は、Google 検索がページのコンテンツを正確に理解するよう努めています。構造化データを使用してページの意図を伝えると、Google はそのページをより正確に理解できるようになります。 構造化データとは、ページに関する情報を様々なサイトで活用できるように標準化したデータ形式で、例えばレシピページでは材料、加熱時間と加熱温度などを詳細に提供できます。 構造化データをページに追加する理由 構造化データを追加することで、よりユーザーの興味をひく検索結果を表示できるようになり、ウェブサイトの利用も増えることが期待されます。これはリッチリザルトと呼ばれます。サイトに構造化データを実装しているウェブサイトの実例をいくつかご紹介します。 Rotten Tomatoes では、構造化デー
TSKaigi 2024 スライドまとめ【非公式】
TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。
TypeScriptのパフォーマンス改善
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマンスの最適化が不可欠です。コンパイル速度を上げることでビルド時間やテスト実行時間の削減を行うことができます。今回の発表では、TypeScriptのコンパイルパフォーマンスを改善するための具体的な手法とその背後にある理論をいくつか紹介します。 ◎内容 1. TypeScriptのパフォーマンスとは何か、そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論 本資料で紹介している内容については以下の記事で詳しく記載していますので合わせて参照していただければと思いま
サービス開発におけるVue3とTypeScriptの親和性について
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
大画面ディスプレイ1台 vs. 複数枚ディスプレイ──作業効率がいいのはどっち？ 2009年発表の論文を紹介
被験者8人（企業で知的財産管理業務に携わる人たち）に17インチのディスプレイ1台（これをSmall条件とする）、24インチのディスプレイ1台（同Large条件）、17インチのディスプレイ2台並置（同Dual条件）の3つの環境を使ってもらい、実験を行った。 ディスプレイ環境変更の前後約2週間ずつ、被験者のPC操作ログを収集した。操作ログには、マウスやキーボードによるウィンドウ操作（ウィンドウのアクティブ化、移動、サイズ変更）が含まれ、これらが要する総時間を算出した。 その結果、Small条件では作業時間の8.5％をウィンドウ操作に費やしており、現行のウィンドウシステムの改善が必要だと示唆した。Large条件ではウィンドウ操作コストの削減は見られなかったが、Dual条件では13.5％の削減を確認した。よって、ウィンドウ操作コストの観点からは、大画面単一より複数ディスプレイの方が優れているといえ
ast-grepでReact 19に移行する
はじめに こんにちは、ast-grepの作者ヘリントンです。 Reactバージョン19のリリースに伴い、新機能と改善が追加されました。 しかし、この新バージョンへのアップグレードには、ソースコードの一部を修正する必要があります。特に大規模なコードベースでは、このプロセスはかなり手間がかかり、繰り返し行う必要があります。 本記事では、ast-grepというツールの使用方法を説明します。このツールは、コードベース内でパターンを見つけて置き換えることを目的として設計されており、React 19への移行を容易にします。 以下の3つの主要なcodemodsに焦点を当てます。 <Context>をプロバイダとして使用する 暗黙のrefコールバックリターンを削除する refをpropsとして使用し、forwardRefを削除する 前提条件: ast-grepのセットアップ まず、ast-grepをセット
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
どういう時に型注釈を書くか - Qiita
最近のプログラミング言語は何らかの型推論を搭載したものが多いです。しかし、型推論も万能ではなく、ところどころで型注釈を書かないとコンパイルが通らない、あるいは意図せず any 型になってしまう、という状況があります。 この記事では、どういう場合に型注釈を書くべきかについてのガイドとなることを目指します。 主に、「HaskellやMLほどではないがある程度の型推論ができる」言語、具体的にはTypeScript, Python（mypy等）、C#、Swiftなどを想定しています。特定の言語についてのガイドではないので、全体的にふわふわした記述になっているかもしれません。 関数の型を書くべきか トップレベル関数の引数は、注釈が必要なことが多いです。一部の言語、HaskellやMLなどは引数の使われ方から型を推論できたりしますが、他の多くの言語はそこまでの能力を持っていません。 戻り値の型について
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prismaでスキーマ変更を行う際のベストプラクティス
データベースでユニークキーにUUIDを使うメリットは何ですか？連番やタイムスタンプまたは複合などではいけないのでしょうか？どうも視認性が悪く使いにくく感じますし連番でも衝突しない気もします。
SVGR - Transforms SVG into React Components. - SVGR
UIデザイン講習会
Powerfully Typed TypeScript
Prisma ORMを2年運用して培ったノウハウを共有する
TypeScript 関数型スタイルでバックエンド開発のリアル
