kk-web

2024 年も今日で終わりということで、1 年を振り返っていこうと思います。 というのも、あまり 1 年の振り返りのようなエントリーはブログに書かないタチなのですが。 今年はもうほんとどん底を這いずり回るかのような散々な 1 年だったので、新しい 1 年を気分良く迎えるためにも、ここに書き残しておこうかなと思った次第です。 2024 年の始まりは、愛犬との別れからスタートしました

オモコロアーカイブをリニューアルしました。 リポジトリも公開しています。 iOS で PWA のインストールプロンプトが表示されてないっぽいですが、それ以外は大丈夫かなと。 ストアで公開するかは考え中です、お金がない

今年もぼちぼち終わりですね。 毎年恒例？となっている、今年買って良かったものを書いていこうと思います。 とはいえ、今年は本当にあまり何も買わなかったので、あまり期待せず。 [5位：ZINZ ビジネスリュック](https://www.amazon.co.jp/dp/B0B9HBC1LZ?ref=ppxyo2ovdtbfedasintitle&tag=piro09

Next.js で Web Push を実装する場合、公式ドキュメント に沿ったら問題ないと思うのですが。 もうちょっとシンプルに実装したいなーと思い色々と調べてみたところ、[Serwist](https://ser

searchParams ってすげーやっかいだなーと常々感じていまして。 どういうことかと言いますと、 そもそも値の有無がめんどくさい、空文字なの？ undefined なの？ null なの？ 型の変換がめんどくさい、number や boolean をいちいち変換しなきゃいけない 配列を扱うのがめんどくさい、要素数 0 は空配列なの？要素数 1 は文字列なの？配列なの？ な

せっかく防音性能が高く楽器演奏可のマンションに住んでいるのでと思い、電子ドラムを買いました、無職なのに。 ![VQD106](https://lh3.googleusercontent.com/pw/AP1GczOZLR5TW7TKxT6sMnRCDSvJFYydSxXmJKIPGHn32sdkMO4v7Hj2jPdV9O9-lYmMpPC9qnYpt1FJs7URkkh5sRKu-48nyY

VTuberプロダクションの ラブボックス公式サイト を作らせていただきました。 愛らしい感じを最大限に引き出しつつ、ポップでキュートな雰囲気も併せ持つサイトデザインに仕立てようと頑張ってみました。 以下少しだけ開発に関する蛇足です。 ラブボックスさんは VTuber プロダクションなんですが、リアルライブも開催するというちょっと

最近は仕事もプライベートもボロボロでして。 肉体的にも精神的にもだいぶ来ているので、それに合わせて漫画を読む量も増えています。 ということで今回は最近読んで面白かった漫画を紹介していこうと思います。 ハローワークモンスターズ [<img alt="ハローワークモンスターズ" src="https://m.media-a

久しぶりに npm パッケージを作ってみました。 react-page-border サイトにフチをつけたいなーと思うことがしばしばあるのですが。 スマホのレスポンシブ対応やら Safari 対応やらを考えると、意外とめんどくさいんですよね。 で、今回じっくりと実装感を探ってみまして、一

スクラムマスターやエンジニアリングマネージャーを務めているときに強く意識することの 1 つとして『常にメンバーのモチベーターであり続けたい』というのがあります。 モチベーター、つまり誰かのモチベーションの維持や向上などマネージメントコントロールを行うロールのことです。 スクラムマスターなんかはとくにモチベーターとしての役割が求められることは、言うまでもありません。 ところがどっこ

日々 AI を用いた書きっぷりはどんどん変わっていまして。 基本的にアメリカを中心に情報がアップデートされているため、日本語の情報はかなり後手後手な印象を受けます。 そんな中でいろいろと情報を調べてみたのですが、基本的には AI SDK を追いかけていれば問題ないかなーという印象です。 ということで、今回は [Next.js × AI](

Claude を使用して作ってみました、自分の実装は 0 です。 youtube-quiz-generator YouTube の URL を入力すると、その動画から四択問題を作ってくれるサービスです。 例えば [【作品多すぎ】マーベル映画をだいたい観てる男によるあなたにオススメのマ

35 歳になりました、あらふぉですね、あらふぉ。 恒例のやつです。 34 歳 33 歳 32 歳 [31 歳](https://kk-web.link/bl

業務で必要になったので作ってみました。 以下ざくっと実装です、本当に最低限だけ。 useServerAction import { StreamableValue, readStreamableValue } from "ai/rsc"; import { useCallback, useState } from "react"; type UseMutati

ぼちぼち 35 歳が見えてきまして。 バツイチ独身子なし彼女なしと、なかなかどーしようもない感じになってきましたが、相変わらずフロントエンドプログラマーとして働いています。 いつのまにかエンジニアとしてのキャリアも干支が一周し、フロントエンドプログラマー歴も 7 年目と、まごうことなきおっさんになってきました。 これくらいの年齢になってくるといつのまにか同年代のプログラマーも徐々に減ってき

現在業務で Next.js に Congnito の SSO を乗っける作業をしているのですが。 Okta を使用した SSO の実装だったのですが、とくにサーバーサイドまで考慮した情報はほぼ皆無で、えらく苦戦しました。 ということで、今回は実装中にわかったことやまだわかっていないことを備忘録がてら書いていこうと思います。 Cognito と Okta の連携 [この記事

調べてみると色々と情報が錯綜していたので、備忘録がてら。 今回は以下の仕様となっています。 Next.js Vercel 適当に router.tsx ファイルを作成し、以下のように書いてあげたら動きました。 import { promises as fs } from "fs"; import path from "path"; import { ImageRes

今まで外出時は WF-1000XM4 を使用していたのですが。 数週間前から左側の聞こえがおかしくなり、修理に出しても良かったのですが、それならばと前々から気になっていた QuietComfort Ultra Earbuds を購入しました。 [![QuietComfort Ultra

スクラムマスターとしてのキャリアをぼちぼち積みつつある自分ですが。 スクラムを回すにおいて、開発の序盤はプロダクトオーナーがボトルネックになりやすいのかなーと思うのですが、開発の終盤に差し掛かってくるとほとんどのケースでステークホルダーがボトルネックになっていると感じるのは、個人的に非常に興味深いです。 多くの現場において、ステークホルダーは CTO あたりが割り当てられるケースが

個人的に、フルリモートワークとスクラムは親和性が高いと思っていまして。 今回はその根拠について書いていこうと思います。 まず前提として、開発を行う際にスケジュール感やタスク感を洗い出していないというのは結構な問題だと思っていまして。 トップダウンで締め切りや仕様が降りてくるのは当然の話であって、それに対しボトムアップでスケジュール感やタスク感を提示するのは当然なことだと思います。

普段 Next.js で開発する際によく導入するパッケージを書いていこうと思います。 @next/bundle-analyzer build されたファイルのうち、何がどれくらいの割合を占めるのか出力してくれるパッケージです。 以前と比べ出力されたファイルの容量を意

sass-mq という npm パッケージがありまして。 Sass で開発を行う際、sass-mq に breakpoints を設定することで media-query が書きやすくなるというパッケージでして。 以前はよく使用していたんですが、最近は media-query をなるべく使用しないようにするのがモ

以前 React Hook Form を無理やり Server Action に落とし込む という記事を書いたのですが。 最近 Conform というパッケージが Server Action へ対応しており、こっちを使おうみたいな記事がちらほら見受けられます。 とはいえ React Hook Form の書きっぷりと比

自分の性格の 1 つに『めんどくさがり』というのがあります。 仕事にせよプライベートにせよ、まーめんどくさいことが嫌いなタイプでして。 めんどくさいことって、単純にイヤじゃないですか、めんどくさいし。 ところがどうして、世の中案外めんどくさいことが嫌いじゃない人のほうがマジョリティな気がしていまして。 仕事の付き合いで見ると、めんどくさい考え方とかめんどくさい実装とかめんどくさ

まだ調査中の内容もあるため間違っている可能性が非常に高いです、あしからず。 Next.js の App Router におけるエラーハンドリングは /404 や /500 へリダイレクトをかけず、url のパスはそのままエラー表示を行うのが基本線となっています。 ということはまずはベーシックなエラーハンドリングを。 [error.js](https://nextjs