Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
Next.jsの考え方
Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
ITのひどい記事をみんながブクマしてキツイ
以下の記事、内容がひどくて空いた口が塞がらなかったのだが、 （はてブで）ブックマークして下手にホッテントリにでもなったら嫌だなと思いそっとブラウザのタブ閉じた。 が、しばらくすると残念ながらホッテントリ入りしてしまったので、はてブにコメントを軽く書こうとしたが100文字に収まらなかったので増田にした。 技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL まず、「特定条件下では MySQL は我々のプロダクトには不向き」を「MySQLを使うと会社は潰れる」なんて表現するのおかしいでしょ。 以下の記事からの引用だが Uber のエンジニアは「PostgreSQLではアーキテクチャに制限がありすぎてUberのシステムを支えきれない、MySQL＋InnoDBに変えたら全部解決した」と主張している。 UberエンジニアがブログでPostgre
生SQLを扱う $queryRaw TypeScript向けのORMライブラリとしてPrismaがあります。Prismaは直感的で型安全なAPIを提供し、TypeScript向けのORMとしては第一に名前が上がることが多いライブラリです。 しかしそんな人気なPrismaでも、裏側では少しクセのあるSQLが発行されていたり、欲しいSQLがPrismaのAPIでは実現できない場合があります。 そういった場合のために $queryRaw というメソッドが用意されており、これを使うことで生SQLを書いてその結果を受け取ることができました。他のORMにもよくある機能です。 例えば以下のように実装することができます。 const users = await prisma.$queryRaw` SELECT id, name FROM "Users" WHERE id = ${userID} `; co
Web標準のバックエンドアプリのテスト
ここで言う「Web標準のバックエンドアプリ」とはCloudflare Workers、Deno、BunなどのWeb標準をサポートするランタイム上で動くWebアプリです。もしくは、Node.jsでもWeb標準のAPIをサポートしているので、これから紹介するアプリとテストコード自体はNode.js上も動きます。 これらのテストを書く、実行するのは実にシンプルで、拍子抜けしてしまうほどです。ですが、現在、20,000行あるHonoのテストコードは、これらのやり方と全く同じ方法を取っています。注目すべき点は、実際のサーバーを立ち上げることがなく、抽象化されたリクエストとレスポンスのやり取りを試験するだけで、品質が保たれる点です。Honoのテストでは、ランタイムによっては一部実サーバーを立ち上げますが、コアの20,000行ではサーバーを立ち上げていません。この抽象化はPythonのWSGI、Ruby
Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil
Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM
Generate query functions by using the --sql flag on prisma generate: Import the query function from @prisma/client/sql … … and call it inside the new $queryRawTyped function to get fully typed results 😎 If your SQL query has arguments, they are provided to the query function passed to $queryRawTyped The Prisma Client API together with TypedSQL provides the best experience for both CRUD operations
2024/8/24 フロントエンドカンファレンス北海道2024
Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828 自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、2024年現在最も銀の弾丸に近いフロントエンド構成 これに勝てるのは remix を qwik に置き換えたときぐらい 今
はじめに こんにちは、畑田です。 最近、RDBを使用しているプロダクトをリプレイスする機会がありました。 このプロジェクトの目標は今現在の使用や実装方針をできるだけそのままに、インフラと技術だけをリプレイスするというものでした。 もちろん、インフラや技術を刷新するということはその上に乗るアプリケーションの実装にも必ず影響を及ぼします。その中で出来るだけ現状の仕様に寄せる試みを行いました。 元のプロジェクトはPHPで書かれており、DBのへの通信においても、文字列とsprintfなどを使用し、生のSQLを書いてpg_queryで実行していました。 私はこれを再現する最も安全な方法を探しました。 Prismaなどを用いたactive record形式のORMを使用するより、SQLに近い書き味のクエリビルダーを求めてkyselyに辿り着きました。 あまり情報が第三者からの情報が出てきていないように
フロントエンドカンファレンス2024 発表資料 ▼ プロポーザル 現代のVueとTypeScript - 型安全の活用術 近年、VueとTypeScriptの組み合わせがフロントエンド開発において注目されていますが、かつてはこの組み合わせに対して懐疑的な見方も存在しました。このセッションで…
Today we are excited to announce the availability of the release candidate of TypeScript 5.6. To get started using the RC, you can get it through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.6! Disallowed Nullish and Truthy Checks Iterator Helper Methods Strict Builtin Iterator Checks (and --strictBuiltinIteratorReturn) Support for
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
生SQLに型を手書きする時代は終わり？Prismaの新機能「TypedSQL」
Node.jsで型安全な環境変数を扱うスニペット
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
最強のクエリビルダ「kysely」の紹介 ~薄いORMを探して~
現代のVueとTypeScript - 型安全の活用術
Announcing TypeScript 5.6 RC - TypeScript