これってどういう順番になるんだっけ？って毎回なるので図解しました。 describeが2個の場合たとえば、以下の場合を考えます。describe('外側のdescribe', () => { beforeAll(() => console.log('🐔 beforeAll')); afterAll(() => console.log('🐔 afterAll')); beforeEach(() => console.log('🐔 beforeEach')); afterEach(() => console.log('🐔 afterEac...

はじめに弊社では、テスト実行時にデータベースをモックせず、Testcontainers を用いて実際のデータベースを使用したテストを行っています。このようなテストを行うためには、事前にテストデータを準備する必要があります。しかし、テストデータの作成は煩雑になりがちで、可読性の低下やメンテナンスの手間が増える原因となります。そこで、テストデータの生成をより簡単にするために、Drizzle ORMを活用したテストデータ生成パッケージ@praha/drizzle-factory を開発しました。本記事では、@praha/drizzle-factoryの基本的な使い方について紹介し...

「これを見たらトランザクション周りがざっくり分かる」を目指します。MySQLを前提に解説しますが、他のDBMSでもベースとなる部分は同じだと思います。 トランザクションとは？ざっくり言うと「ここからここまでワンセットです」な処理のことです。たとえば、以下のようなSQLが2つあったとします。在庫を減らすSQL;発送処理をするSQL;この2つは絶対にセットで実行したいとします。ですが、この2つを実行した結果「1つ目は成功したけど2つ目は失敗した」となった場合、「在庫だけ減ってしまった！」になってしまいます。こういうときにトランザクションが使えます。この2つをトランザクシ...

Renovateという自動ライブラリ更新botを利用し始めたのですが，マージの順番管理をする時間が増えてしまったので，その自動化をしました．短く言うとこうです．Renovate（またはDependabot）を利用していてGitHubのマージ前にブランチを最新にするルールを利用していると（Renovate以外の）PullRequestがなかなかマージできなくて困るのでマージ順を管理するGitHub ActionsであるMerge Masterを作りましたついでに，Enable auto-mergeを押すだけでいい感じにマージされるようになって便利になりました Reno...

自分が使ってるやつを紹介します。 GitHub Star History指定したGitHubリポジトリのスターの増加数をグラフで見れるサイトです。たとえば、👇の3つのReactのUIライブラリを例に見てみます。muichakra-uishadcn-ui▲https://star-history.com/#shadcn-ui/ui&chakra-ui/chakra-ui&mui/material-ui&Dateこんな感じで、一目でライブラリの人気度合いをざっくり比較できます。 使い方テキストボックスに、比較したいライブラリのGitHubリ...

はじめに私たちは最近、DrizzleORMのGoldスポンサー($1,000/月)になりました。本記事では、DrizzleORMについての簡単な紹介と、OSSスポンサーになるメリットについてご紹介します。 DrizzleORMとはDrizzleORMとは、TypeScript製のORMライブラリです。シンプルなAPIを提供し、SQLに似たインターフェースでデータベースを操作できる点が特徴です。テーブル定義をTypeScriptで記述でき、TypeScriptの型システムを活用することで、型安全なSQLを作成することができます。例えば、SELECT文は次のように記述でき...

リーダーアプリとはリーダーアプリとは雑誌、新聞、書籍、オーディオ、音楽、ビデオなどのデジタルコンテンツの閲覧をアプリの主な機能として提供するアプリです。通常、モバイルアプリ内で有料コンテンツを利用する場合はアプリ内購入を実装してアプリ内から有料コンテンツを購入できるようにする必要があります。リーダーアプリとして実装されたアプリはその限りではなく、アプリ外で作成されたアカウントにアプリからサインイン => そのアカウントで購入したコンテンツをアプリで閲覧することができます。今回は他のウェブサイトでアカウント作成とコンテンツの購入をする前提で、そのコンテンツを閲覧するアプリ...

プラハチャレンジにて、受講生チームから次のような質問がありました。データベース（RDB）のテーブル設計を変更したいテーブル設計を変更する作業中にアプリケーションからデータベースへのアクセスが発生すると困るメンテナンス期間を設けアプリケーションを一時的に停止することで、データベースへのアクセスを防ぐことはできるデータベースを止めることなくテーブル設計を変更する方法はないかこの質問に対して、Expand and Contract patternを紹介しました。この記事では、Expand and Contract patternを用いてテーブル設計を移行する方法を例を交えて紹介...

1人でウミガメのスープを遊べるiOSアプリを作りました。https://apps.apple.com/jp/app/1人でウミガメのスープ/id6544801645 アプリの概要「ウミガメのスープ」は以下のようなゲームです。出題者が問題を出し、他の人は「はい」または「いいえ」で答えられる質問を出す。質問者は、出題者が考えているストーリー、あるいは物を推測して語る。それがすべての謎を説明できたとき、このパズルは解けたことになる。（Wikipedia - シチュエーションパズルより引用）通常は複数人でプレイするゲームですが、このアプリでは出題者をChatGPTに担当してもら...

むかしむかしあるところに※おおむね嘘です めでたくリリース！までは幸せだったボス🧔‍♂️ < 今日から新規プロジェクトを立ち上げる！ボス🧔‍♂️ < まず、君には基幹システムからのデータ連携システムの構築を任せる。ボス🧔‍♂️ < 連携元システムの担当者はxxxさんだ。詳細は彼と詰めてくれたまえ。私👨🏻‍💻 < ラジャ！...私👨🏻‍💻 < でけたっす！ボス🧔‍♂️ < よくやってくれた。では次のタスクを～...。...ボス🧔‍♂️ < 無事リリースだ！お疲れ様！ボス🧔‍♂️ < 早速次のプロジェクトに移っても...

https://nextjs.org/blog/next-15雑に翻訳しました。意訳がめちゃくちゃ含まれているので注意です。Next.js 15が正式に安定版としてリリースされました。このリリースはRC1とRC2のアップデートをベースにしています。安定性に重点を置きながら、気に入っていただけるようなエキサイティングなアップデートを追加しました。今すぐNext.js 15をお試しください。# 新しい自動アップグレードCLIを使用するnpx @next/codemod@canary upgrade latest # もしくは手動でアップグレードするnpm instal...

https://nextjs.org/blog/next-15-rc2雑に翻訳しました。意訳がめちゃくちゃ含まれているので注意です。5月に最初のNext.js 15 リリース候補版を発表した後、皆さまからのフィードバックをもとに、2回目のリリース候補版を準備してきました。 以下がその内容です。@next/codemod upgrade: Next.jsとReactの最新バージョンに簡単にアップグレードできるようになりました。Turbopack for development: パフォーマンスの向上とNext.js 15の安定性を目指した改善。Async Reques...

GitHub前提です！順不同です。 コードを提案する❌divではなく、spanを使ったほうが良いと思いました！✅divではなく、spanを使ったほうが良いと思いました！+ <div>山田</div>- <span>山田</span>文章だけで「ここはこうした方がいい」を説明するより、コードも一緒に提案してあげた方が分かりやすいです。GitHub上だと、以下のように操作するとコードの提案ができます👇️ GitHubのリンクを貼る時はパーマリンクを使う❌https://github.com/prisma...

はじめに連続ログイン記録のようなものは，多くのアプリケーションに実装されています．しかし，いざログから連続記録を算出する機能を実装してみるとなると，かなり複雑なSQLが必要になりました．chito_ngさんの「『継続して○○した日数』とその最大値をSQLで求める」を参考に実装しました．結構苦労したので，備忘録がてら残そうと思います．PostgreSQLを利用します． SQLで連続記録を算出する今回は問題演習アプリを例に取り，連続学習日数を取得しようと思います．以下のようなanswersテーブルから，連続学習日数を取得します．user_idanswer_id...

Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャするElements...

「上（下左右），右（左），下，左」で指定されている基本的には上から時計回りで書きます．省略したところは，前に書いたものが適用されます． ケーススタディ padding: 20px;上（下左右）が20px結果： 上下左右が20px padding: 20px 40px;上（下左右）が20px右（左）が40pxで上書き結果： 上下 20px，左右40px padding: 20px 40px 60px;上（下左右）が20px右（左）が40pxで上書き下が60pxで上書き結果： 上 20px，左右 40px，下 60px padding...

ディレクトリツリーを2秒で書けるアプリを作りました。https://dir-maker.netlify.app/ アプリ開発のきっかけPRに説明をつけるとき、自分はよくディレクトリツリーを使います。👇 こんなのです。/└─ src └─ components ├─ button.tsx ├─ button.css.ts └─ button.stories.tsx一から自分でディレクトリツリーを書くのはなかなかの手間なので、👇のようにしていました。既存のディレクトリツリーをコピーしてファイル名の部分だけを変える足りない部分は他...

会社でNeverThrowというライブラリを使っています。とても便利なので、とても便利だよ〜という記事を書きます。 NeverThrowとは？NeverThrowは、TypeScriptで「Result型」を実現できるライブラリです。 Result型とは？Result型は、関数の中でエラーをthrowする代わりに、エラーを戻り値として返すようにすればいいじゃね？な仕組みのことをいいます。もっと噛み砕いて説明します。たとえば「50%の確率で足し算してくれるけど、50％の確率で💩をthrowする」という関数があるとします。コードで表すと👇になります。function a...

はじめにTypeScriptでClassを定義する場合、みなさんはどのように初期化を行っていますか？コンストラクタに引数を並べる方法が一般的だと思いますが、引数が多い場合や、引数の順番を間違えるとバグの原因になります。class User { public readonly id: number; public readonly firstName: string; public readonly lastName: string; public constructor(id: number, firstName: string, lastName: st...

社内のプチ発表に使った資料です。 文章のコツ前置きフルリモートでは、文章でのやり取りがメインになる。なので、文章がヒドいと「この人と仕事するのキツイ」と思われちゃう😢そう思われないための色々思ったことを自戒メモ。 なるべく箇条書きにする❌パソコンには、デスクトップパソコンとノートパソコンの２種類があります。✅パソコンには、以下の２種類があります。- デスクトップパソコン- ノートパソコン 漢字をひらく❌必要な時だけ実行される為、費用を安くする事が出来ます。✅必要な時だけ実行されるため、費用を安くすることができます。「漢字がギッ...