🧔‍♀️「この管理画面、CSV出力機能が欲しいです！」🤓（AIに頼めば一瞬だな）「CSV出力機能、できました！」🧔‍♀️「ありがとうございます、便利になりました！」AIによって機能開発のハードルが大きく下がった今、こうしたやり取りは珍しくないかもしれません。しかし、このやり取りには重大な問題が潜んでいます。本当に 🧔‍♀️ の問題は解決されたのでしょうか？ 問題はCSV出力機能で解決しているのか？そもそも「CSV出力機能が欲しい」というのはどんな問題を解決するための要望なのでしょうか。せっかちな 🧔‍♀️ は思いついた最初の解決策を要望として提示していますが、何が問題か理...

少し前に社内業務用の管理画面アプリケーションのPHP/Laravel/関連ライブラリをエイヤ[1]でアップデートしました。情報漏洩の事例が相次ぐ中で脆弱性を悪用されるリスクを減らすためにアップデートを検討しているものの着手できていない方もいるのではないでしょうか。そうした方の参考になればと思い今回の取り組みをケーススタディとして共有します。 前提項目アップデート前のバージョンPHP7.1系Laravel5.5系Composer1.10.27PHPは2019年12月にサポートが終了しているバージョンLaravelは2020年8月にサポ...

「ありがとう」「了解」みたいに好きな言葉を入れるだけで、AIがSlack用の絵文字を組み立ててくれるサイトを作りました。https://emoji-samurai.penpen-dev.com/ja/suggest/https://x.com/penpen_dev/status/2104372688559198502裏で使っているAIは「jev」です。この記事では、jevの使い方と工夫したところを書きます。 jevとはざっくりいうと「質問と選択肢を渡すと、選択肢ごとの確率で答えてくれるAI」です。質問の種類答え方choice選択肢の中から選ぶ。全選択肢...

「何らかのSaasで画面を操作して設定を変更する」って割とよくあると思うのですが、その結果を報告するときってどうしてますか？「この件、対応しときました！」だけで報告を終わらせてないですか？「対応済」のスタンプを押すだけで終わらせたりしてないですか？私はそういう報告をされると「何をどう対応したんだよお前は」と言いたくなります。そんな風に思われたくない人にオススメしたいのが画面録画です。 なぜ画面録画なのかたとえばAWSの管理画面で、不要になったリソースを削除する作業があったとします。このとき、作業を終わらせた後に「◯◯というリソースを削除しました」とだけで報告したとします。...

「ピクセルフォント制作入門」というnoteを参考に、ピクセルフォント「Alphabit」を作りました。ピクセルフォントの基本的なグリフの作り方は元記事に譲り、今回はフォントを作る上で開発者目線で面白かったポイントをまとめてみます。 作るフォントの仕様を決める 文字セットをどうするか以下の文字セットに絞りました。英大文字 A-Z英小文字 a-z数字 0-9よく使う記号自分が使うアプリで使用することを考えると日本語の文字セットも作りたかったですが、ひらがな・カタカナの清音・濁音・半濁音だけで200文字くらいグリフが必要になります。また、日本語表示のアプリに使用す...

Next.jsで認証やロギングなどの横断的な処理を書く場所といえばProxy(旧Middleware)ですが、アプリケーションが成長するにつれてこのファイルはどんどん大きくなっていきます。しかもProxyには「素直に関数分割できない」という構造的な難しさがあります。この記事では、なぜProxyの分割が難しいのかを掘り下げたうえで、HonoやExpressのmiddlewareと同じ発想で解決するアプローチを紹介します。 Next.jsのProxyとはProxyは、リクエストがルーティングへ到達する前に実行されるフックです。プロジェクトのルートにproxy.tsを置くと、リクエ...

機能削除は技術負債を解消する最もコスパの良い方法です。機能削除の重要性やメリットについては既に多くの記事で語られていますので、本記事では「なぜ削除するのか」ではなく「どう削除するのか」の具体的な方法に焦点を当てます。https://note.com/suthio/n/n6e39ebcad611https://qiita.com/hirokidaichi/items/64b444a89410190d965fなお、この記事における機能削除は静的解析によるデッドコードの削除ではなく稼働している機能を削除することを指しています。 機能を削除した方が良いことを証明する機能を削除するた...

はじめにこの記事では，まず，あるデータと他のデータの関連構造は，データそれ自体には存在せず，データの形を定義するスキーマにのみ存在できることを確認します．その上で，一般的なREST APIは関連構造の共有ができておらず，それゆえにOverfetch/Underfetchという問題が発生していることを示し，対して，ORMは関連構造の共有を行うことによって，データベース/プログラム間での同様の問題を解決していることを示します． ORMが行っている関連構造の共有 ORMの機能Prismaや，ActiveRecord，EloquentのようなORM（Object-Relatio...

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