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

Claude Codeを使っていると「あとどんだけ残量あるんだ⋯？」が気になって仕方なくなります。そこで、ステータスラインに残量を常時表示するシェルスクリプトをChatGPTに作ってもらいました👇こんな感じで、5時間あたりの使用率と7日間あたりの使用率がプログレスバーで表示されます。毎回「あとどんだけ残ってるんだ⋯？」を気にしなくて良くなるので、精神衛生上とても良いです。 ステータスラインとは？Claude Codeのsettings.jsonに以下のような設定を追加すると、画面下部にコマンドの実行結果を表示できます👇~/.claude/settings.json{...

はじめに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 -...

業務でドリルダウン（UIパターン）を実現するコンポーネントを実装する機会がありました。状態管理やアニメーションの実装に関していろいろ考えることが多かったので、実装中何を考えていたのかをトレースして記事にまとめました。ドリルダウンに関する説明はソシオメディアさんの記事がわかりやすいので、そちらを参照してください。 実装したいコンポーネントのゴールを考えるドリルダウンを実装するにあたり、どのようなデータをどのようなAPIのコンポーネントで扱いたいかを考えます。扱うデータは、大分類>中分類>小分類のように階層的になっているデータを想定します。たとえば次のような部署>...

はじめに近年、ClaudeをはじめとしたLLMの進化はめざましく、日々の開発補助や設計検討など、ソフトウェアエンジニアリングのあらゆる場面で利用されるようになってきました。しかし、LLMの持つ知識は訓練データのカットオフ時点までのものに限られているという制約があります。これにより、比較的新しいOSSライブラリを使用する際、LLMがそのライブラリを正しく理解・活用できないという問題が発生します。例えば、弊社で最近公開した@praha/byethrowというResult型ライブラリがあります。これはneverthrowなどにインスパイアされた軽量・シンプルなAPIを提供するType...

はじめに前回の記事で@praha/byethrowについて紹介しましたが、本記事ではこのライブラリの全機能についてより詳しく紹介したいと思います。@praha/byethrowは、JavaScript/TypeScript向けの軽量でシンプルなエラーハンドリングライブラリです。Result型を用いることで、関数の成功と失敗を明示的に表現し、try/catchに頼らない型安全なエラーハンドリングを実現できます。以下では、Resultモジュールに含まれる全ての関数について、用途 (何をする関数か)、引数, 戻り値, 使用例コードの順で解説します。まだこのライブラリを知らない方でも分...

はじめにJavaScriptでは、throwを使ってエラーを明示的に投げることで、処理を中断する「大域脱出」が可能です。しかし、TypeScriptではこのthrowによって発生するエラーの型を記述できないため、型安全性が損なわれてしまいます。この問題を解決するために、関数の成功・失敗を明示的に扱えるResult型が有用です。TypeScriptでResult型を利用する場合、neverthrowやeffect-ts、fp-tsなどのライブラリがよく挙げられます。しかし、それぞれ一長一短があり、neverthrowは比較的シンプルで使いやすいものの、現在は活発なメンテナンスが...