はじめに私がGraphQLに最初に触れたプロジェクトでは，Schema Firstで，graphql-codegenを用いてリゾルバーの型を生成し，その型に従って実装を行っていました．その後，別のプロジェクトでpothosを使ったCode Firstでの実装を行う機会があり，Schema Firstでの悩み事がそもそも発生しないことと，実装とSchemaの依存が整理されることに気がつきました． デフォルトリゾルバーとフィールドリゾルバーGraphQLには，リゾルバーの実装として，親リゾルバーが返却した値の同名プロパティを暗黙的に用いるデフォルトリゾルバーと，開発者が明示的に...

経緯ある日，PrAhaのメンバーであるAさんが困っているのを見かけました．「無駄なGitHub通知がいっぱいくる！」よくわからなかったので深掘りしてみました． 現状のGitHubからの通知PrAhaでは，伝統的に（？）SlackでGitHub Appを利用した通知を受け取っていました．GitHubでPRをオープンしたりすると，Slackに通知が来る，というものです．PRのAssigneeとなっている場合や，Reviewerとして指定されていると，メンションをつけて通知することもできます．PrAhaでは，リポジトリごとに，#prj-hoge-github-mentio...

AIがコードを書き、テストを生成し、レビューを行う時代になりました。多くのエンジニアがGitHub CopilotやCursor、Claude CodeといったAIコーディングツールを日常的に使っています。しかし、こんな経験はないでしょうか。問題は改善しようとした時に始まった。分析結果が正しく表示されないのでAIに修正を頼んだら、状態管理の書き直し・新しいAPIエンドポイントの追加・エラーハンドラーの追加・デバッグパネルの追加と、どんどんコードが膨れ上がった。毎回数百行増えるのに、本当の問題は残ったまま。最終的に手動でコードを見直したら、原因はバックエンドとフロントエンドのAPI間...

はじめに下記のように、データベースのコネクションやアプリケーション全体で共有する値がある場合、関数の引数として延々とバケツリレーしていった経験をしたことはありませんか。// あくまで例示のためにコネクションの解放などは省略しています。app.get('/user/:id', (c) => { const result = userDetailsHandler( { requestId: generateUniqueId(), timestamp: Date.now(), database: pool.connect(),...

「これを見ればCache-Control周りが大体分かる」を目指します。!この記事内では単に「CDN」と書いていますが、本来は「経路上に存在するすべてのCDNやプロキシなど」が正しいです。とはいえ、それだと長くて読みにくいので、記事内では単に「CDN」と書いています。 Cache-Controlヘッダーとは？Cache-Controlは、ブラウザ・CDN・サーバーの間で「キャッシュをどう扱うか？」を伝えるためのHTTPヘッダーです。Cache-Controlにはさまざまなディレクティブ（指示）があり、それらを組み合わせることでキャッシュの挙動を細かく制御できます。ここか...

!Claudeが公式に対応したので、この記事は無価値になりました。以下の記事を見たほうが良いです。Claude Codeの使用率がステータスラインに表示できるようになったので表示用のスクリプトを作った話 - 逆瀬川ちゃんのブログClaude Codeを使っていると「あとどんだけ残量あるんだ⋯？」が気になって仕方なくなります。そこで、ステータスラインに残量を常時表示するシェルスクリプトをChatGPTに作ってもらいました👇こんな感じで、5時間あたりの使用率と7日間あたりの使用率がプログレスバーで表示されます。毎回「あとどんだけ残ってるんだ⋯？」を気にしなくて良くなるので、...

はじめにOAuth 2.0は認可のためのフレームワークです．また，OpenID ConnectはOAuth 2.0の拡張であり，認証のためのフレームワークです．これらを利用すると，Access Tokenを得ることができ，様々なリソースサーバーへアクセスできます。ここで勘違いしやすいのは，Access Tokenの「認可」が意味するものは、「ユーザーへの特定の操作の認可」を示すものではないということです．Access Tokenは「ユーザーがリソースへのアクセスを委譲したこと」を示すだけなのです．この記事では，OAuth 2.0における「認可」の本質を理解し，実際のアプリケ...

一般的にソフトウェアのモジュール設計は「凝集度」や「結合度」といったモデルによって評価され、「高凝集・疎結合が良い設計の指標」として広く知られています。しかし、これらの既存のモデルだけでは現代のソフトウェア設計の課題に十分に対応できない場面があります。具体的には、以下のような観点が欠けています。物理的につながっていない結合（ロジックの重複など）を評価する枠組みがない同じ結合でも、同じファイル内か別チーム間かで変更の労力はまったく違う「どこに設計のコストをかけるべきか」という優先順位の調整弁がない「ソフトウェア設計の結合バランス」では、これらの課題に対して均衡結合モデルと...

はじめにOpenID Connectは，OAuth 2.0を拡張した，認証を行うためのプロトコルです．OAuth 2.0は認可のためのフレームワークですが，しばしばOAuth認証として，認証のためのプロトコルとしても利用されます．では，なぜOpenID Connectが認証のためのプロトコルとして用意されているのでしょうか？この記事では，OAuth 2.0で発行されるAccess Tokenと，OpenID Connectで発行されるID Tokenに注目して，その違いによるOIDCの必要性と，それぞれのトークンの適切な扱い方について説明します． OAuth 2.0とAc...

最近業務で動画プレイヤーを実装する機会がありました。実装においてはユーザーがよく触れているサービスと同じ挙動になっていることが重要だと考えYouTubeを大いに参考にしましたが、YouTubeには動画を快適にブラウズするための細かい実装がたくさん盛り込まれており、面白い発見が多かったので共有します。!YouTubeのソースコードは公開されていないため、筆者が開発者ツールで観測した内容が主になります。 video要素が提供する機能まずはHTMLの<video>が提供してくれる機能をおさらいしておきます（YouTubeも動画部分には<video>を使用し...

はじめにWebで動的なサイトを作るとき，多くの場合で認証は欠かせません．PrAhaで作成しているWebアプリでも，その大半に何らかのログイン機構が組み込まれています．これらのログイン機構について，多くの場合ではフルスクラッチでの実装ではなく，ライブラリによる実装を選択すると思います．今回は，それらのライブラリの1つとして，TypeScriptの認証・認可フレームワークである，Better Authについて紹介したいと思います．ただし，導入や基本的な利用方法については，公式ドキュメントに譲り，この記事では，Better Authの全体を俯瞰して理解することを目指します．バー...

趣味でやってるブログの話です！WordPressの記事は非プログラマーにも見てもらえそうなので、なるべく噛み砕いて書いてみます。 背景私は元アフィリエイターです。今でもXサーバーでWordPressブログを10個くらい運営しています。ですが最近はアクセス数も落ちてきたので、Xサーバーを解約したいと思いました。月1,000円もかかるからです。そこでもっと安いサーバーに移行することにしました。たとえば、CORESERVERの一番安いプランだと月200円くらいで借りられます👇️ただ、月間アクセス数の目安が125,000と書かれています。私のサイトたちは今でも20万PVく...

昨今のプログラミング学習においては、いつでも気が済むまで質問に答えてくれる生成AIの登場により、以前よりも遥かに効率よく知識を得られるようになりました。多くのプログラミング学習者が、まずAIに質問し、素早く答えを得るという学び方を取り入れています。その一方で、答えはわかるのに成長している実感がない、得た知識が次の課題に応用できないと感じる人が少なくありません。理解したつもりなのに使える知識として定着していないのはなぜなのでしょうか。学習効率を低下させる生成AIの特性を理解し、生成AIを使うだけでは身につかない能力を育むことができる環境に身を置くことで、プログラミング学習をより効果的に...

私は4年くらい使っています。Database Client - Visual Studio Marketplace 気に入ってるところ AIと連携できるこれが1番素晴らしいと思っています。テーブル名の補完をしてくれますし、GitHub CopilotなどのAIを入れているとSQLをほとんど書いてくれます👇️▲Ctrl＋Enterで実行できます（もしくはRunをクリック）「あと少し直せば使える」みたいなSQLをサッと書いてくれるので便利です。あと単純に「普段使っているエディタで書ける」というのが良きです。 いろいろなDBに対応しているCloudflare D1...

Pothosは型安全性を実現するためのコードファーストなGraphQLスキーマビルダーで、TypeScriptで記述したコードから簡単にGraphQLスキーマを構築できるライブラリです。https://pothos-graphql.dev/本稿ではPothosの特徴と弊社でのどのように使用しているかについて紹介します。 Pothosの特徴 コードファーストによる型安全性Pothosはコードファーストのアプローチを採用しており、オブジェクト型・クエリ・ミューテーションなどGraphQLの要素全てをTypeScriptで表現します。TypeScriptのコードを元にスキーマが...

なぜSQLのテストが必要なのかユニットテストでDBアクセスをモックするのは一般的なプラクティスです。テストの高速化に有効ですが、SQLロジック自体はテストされないという課題があります。複雑なJOINや集計処理、サブクエリを含むSQLは、意図通りに動作しているか実際にRDBで実行してみないとわかりません。また、パフォーマンスチューニングのためにSQLを書き換えたとき、テストがなければ「最適化によって挙動が壊れていないか」を確認するのが困難です。「シンプルなSQLだけ書いて、複雑な処理はアプリケーション側で行えばよいのでは」という考え方もあるでしょう。しかし、大量のデータをアプリケ...

はじめにTypeScriptでエラーハンドリングを型安全に行いたいと考えたとき、皆さんはどのようなアプローチを取るでしょうか。JavaScript/TypeScriptの標準的なエラーハンドリング手法であるtry/catchは、型安全性に欠け、エラーが発生する可能性のあるコードを追跡するのが難しいという問題があります。そんな課題を解決するために、よく用いられるのがResult型を用いたエラーハンドリングです。Result型とは、成功時の値と失敗時のエラーを明示的に表現する型です。TypeScriptにおけるResult型ライブラリといえば、neverthrowが最も有名で広...

現実のアプリケーションで発生するすべてのエラー・例外をResult型に変換するのは非現実的エラーハンドリングが不要なものはUnexpectedErrorとしてまとめてしまうという現実的な落とし所を提案する記事です。!記事内で使用されているResult型は@praha/byethrowが提供しているものです。カスタムエラーの定義には@praha/error-factoryを使用しています。ライブラリ固有の知識がなくても理解できるように、最小限のAPIのみを使用しています。 TypeScriptにResult型を導入したくなる理由TypeScriptのエラーハンド...

TypeScriptで開発をしていると、APIエラーやバリデーションエラーなど、さまざまなエラーを扱う場面があります。そんなときに、標準のErrorクラスだけで対応していませんか。この記事では、カスタムエラーを導入するメリットと、ボイラープレートを減らしてカスタムエラーを楽に定義出来るライブラリを紹介します。 カスタムエラーを作る理由標準のErrorクラスを使用することで楽にエラーを作成できますが、次のような問題があります。エラーの種類を区別しづらい追加の情報（HTTPステータスやエラーコードなど）を持たせづらいメッセージが一貫しないたとえば次のような例を考えてみま...

「私の場合はこうすると空き容量を増やせました」を書きます。▲こんな感じで容量がいっぱいになってしまった時の対処法 先に結論結論から書くと、以下をすると合計170GBほど減らせました。miseを使ってる場合：mise pruneする（110GB→10GB）iOSシミュレーターを使ってる場合XCodeの「Window → Devices and Simulators」から不要なシミュレーターを手動でポチポチ消す（たぶん100GB→50GBくらい）dockerを使ってる場合：以下を実行する（40GB→30GB）docker image prune -...