Prisma界隈で話題沸騰中（自分調べ）のTypedSQLだが、自分の中ではかなりアツいと思っているので、その理由を語ろう。なおTypedSQLの機能とか仕組みについては記述しないのでドキュメントや以下の記事を参照するとよい。 Prismaの難しさ 複雑なクエリを組み立てるのが特に難しい。複雑といっても何10行もあるようなクエリとかではなく、joinとか集計関数がいくつかあるくらいで十分複雑になる。たとえば特定のユーザーに紐づく記事をコメントの数を含めて取得したいとする。クエリは雰囲気こんな感じ。SQLとしては全然難しくない。 SELECT posts.id, count(comments.id) AS cnt FROM posts INNER JOIN users ON posts.author_id = users.id LEFT JOIN comments ON posts.id =

テキストだけでサイトやアプリを構築できるv0（ブイゼロ）と呼ばれるAIツールが、SNSを中心に話題となっています。 v0では、テキストだけで（ノーコードで）、サイトの見た目（UI：ユーザーインターフェース）やゲーム・アプリを作成できます。 とはいえ、「v0が話題なのは知っているが、どうやって使えばいいのかわからない」と疑問をもっている方は多いでしょう。 そこで本記事では、v0の始め方や使い方を徹底解説しています。また、実際に作成したプロダクトや、v0を使うコツも紹介しているため、ぜひ参考にしてみてください。 この記事を読むことで、v0の使い方がわかり、デザイナー以外の方でもクオリティの高いプロダクトを作れるようになるでしょう。 ｜監修者 SHIFT AI代表　　木内翔大 （株）SHIFT AI 代表取締役 / GMO他複数社AI顧問 / 生成AI活用普及協会理事 / Microsoft C

登壇中にうっかりSlackの通知が出ちゃうみたいなことを避けたいですよね。うっかりを防ぐ対策が集まるスクラップです。

Rubyのobject_idを入口にして、Rubyの実装詳細について学びます。

Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828 自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、2024年現在最も銀の弾丸に近いフロントエンド構成 これに勝てるのは remix を qwik に置き換えたときぐらい 今

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ

生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

","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"

技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ

Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

はじめに AWSの豊富なサービス群を活用することで、高可用性かつ高スケール性を実現するシステムを構築することが可能です。 しかし、クラウドサービスの特性を最大限に活かすためには、適切なデザインパターンを理解し、実践することが重要です。そこで今回は、AWSを利用して「高可用性」かつ「高スケール性」を実現するための代表的なクラウドデザインパターンを紹介します。 1. EC2インスタンスを利用した動的コンテンツの配信 動的コンテンツとは？ 動的コンテンツとは、ユーザーのリクエストに応じて生成されるコンテンツのことを指します。たとえば、ユーザーのログイン状況や入力内容に基づいて異なるページを表示するようなケースです。 AWSサービスの簡単な解説 Amazon EC2 (Elastic Compute Cloud): スケーラブルなコンピューティングリソースを提供するサービスです。必要に応じて、イン

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

フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧

PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26d…

An IDE built on top of a canvas, Haystack takes care of the tedious and confusing parts of coding for you

概要 AWS とかで踏み台ホスト経由（ここでは AWS っぽく bastion と呼ぶ）で ssh する必要があるなら ~/.ssh/config は↓みたいにしとくのが良いんじゃないかな？ Host bastion Hostname bastionのIPアドレス User bastionのユーザ名 # ↓は規定のファイルだったり ssh-agent 使ってれば不要 IdentityFile bastion接続用の秘密鍵ファイル名 # ↓の3つはWindowsでは使えないので諦めて ControlMaster auto ControlPath ~/.ssh/cp-%r@%h:%p ControlPersist 10m Host 好きな接続先名 Hostname 接続先のIPアドレス User 接続先のユーザ名 # ↓は規定のファイルだったり ssh-agent 使ってれば不要 Identi

ささ木 @gamsic トラブルって当事者にとっては大ごとだけど傍観者にとってはエンタメだなというのがよく分かる動画だと思う。めちゃめちゃおもしろい youtu.be/fRYrkv09om8?si… x.com/1hte8q8ylkuwof…

人生で初めて1人用のカードゲームで遊んでみたら…あれっ、私本当に1人でプレイしてた？ うどん粉 2024年8月21日 今までにカードゲームをプレイしたことのある方は多いと思う。 筆者ももちろんトランプやかるたなど 様々なカードゲームで遊んできたけれど、そのどれもが2人以上でプレイするものだった。 そのため、カードゲームは「誰かと一緒に遊ぶもの」という認識だったのだが……調べてみたところ、どうやら1人でプレイできるものも存在しているらしい。 いったいどうやって進めていくんだろう。1人でプレイして本当に楽しめるのかな？ 気になったので、実際に1人用のカードゲームを購入して遊んでみることにした。 ・増えるひつじ 今回購入したカードゲームのタイトルは「シェフィ」。 1人用のカードゲームは他にもいくつかあったのだが、パッケージに描いてある ゆるいひつじのイラストと「増えろ！　ひつじ！」という文字に惹

LinkedInの記事をめぐっているうちに見つけた、マイクロアーキテクチャに関する面白い事例。 CPUのマイクロアーキテクチャのさらに奥深くまで理解が必要な問題を解決するために、どのようなツールをつかってどのように解決したかの話。 netflixtechblog.com Netflix内でのワークロード最適化のため、AWSのインスタンスサイズを移行(16 vCPUから48 vCPU)し、CPUがボトルネックとなるワークロードの性能向上を図った。 このインスタンスの移行により、性能をほぼ直線的に増加させることを想定し、スループットがおよそ3倍になると予想した。 しかし、結果としてこの移行で想定する性能は達成できなかった。 https://netflixtechblog.com/seeing-through-hardware-counters-a-journey-to-threefold-pe