モルペコかわいい。 tl;dr 先月ポケカ始めたばかりの初心者です。 来月のシティリーグ出ます。 実戦を積まないといけないので、対戦してくれる人探してます。 外出するときは基本的にデッキを持ち歩くようにするので、会う機会がある人はバトルしましょう。 始めたきっかけ 最近ポケカを始めた。 隅田川花火大会の会場真横に住んでるやべーやつの家で、例年花火が始まるまでボドゲとかして時間潰してたのを、今年は海外のポケカの大会で賞金貰ってるやべーやつも来るとのことで、レクチャーして貰いながらそのまま沼に沈められた。 このとき３戦くらいしかやっていないのに、その後シティリーグに申し込んだ。 デッキ作った シティリーグには当選して、俺も最強のデッキを作ろうと思い、カミツオロチex デッキを作った。 たまたま買ったパックからSARとSRが出たからだ。 これは作るしかない。 それで渋谷のポケカラウンジに遊びにい

久しぶりの地方カンファレンス。 https://www.frontend-conf.jp/ 前日にかなるんとおたるん 飛行機が遅れていて２時間遅れで移動開始。 初日は小樽で canalun と散策して寿司食べた。 ちょうど札幌マラソンで札幌付近の宿が高騰していたので、自分は小樽に泊まった。 札幌まで１時間くらいの距離なので全然泊まれる位置。 札幌のビジネスホテルくらいの値段で、部屋に露天風呂付いている部屋に泊まれてとてもよかった。 当日 LTだしと思って資料を何も作っていなかったので、行きの電車の中で作った。 昼休憩のときに知人らと合流して一緒にスープカレー食べた。 その後は発表を眺めていた。印象に残っているものをピックアップする。 Web技術を駆使してユーザーの画面を「録画」する。 APMの課金にやられた経験があったので、この辺りを自作したりOSSでやる方法を学べたのはよかった。 自分も

最近久しぶりに React Router を使う機会があった。 SSR不要な要件だったのでNext.jsではなく Vite を選んだら、ルーターが必要となり React Router を選定した。 React Router は Remix との統合もある通り、もはやただのルーターではなく、fetch や form action までもサポートされている。 採用にあたって考えるのはどこまで React Router の機能を使うかだ。 自分は router が欲しくて入れるので fetcher や action は不要だ。 一方で React Router を FW と考えると FW の標準に乗るのは自然な発想にも思える。 今回、React Router の機能に寄せて開発してみて、この機能使う・この機能使わないという土地勘ができたのでメモをしておく。 router ルーターライブラリなので

業務委託期間を含めて４年在籍した日本経済新聞社を退職しました。 日経に入るまで 自分が日経に入った理由は３つあり、 そろそろ健康保険が切れそうだったから Web標準への理解が求められる仕事をしたかったから 情報を編纂すること、発信すること自体に興味があり、興味と事業ドメインがマッチするから です。なんと自己中な・・・ 前の会社を辞めてフリーランス（と名乗ってはいたがどちらかというと無職の方が実態には近かった）になったときの話も書いておくと、元々は営業から入社した職場で活躍できず逃げるようにエンジニアになったものの、その道で進んでいこうにも未経験で基礎的な能力が無かったので勉強期間を作りたくなって辞めました。当時社会人を経験して思ったのは、社会では期待される人に成長できる仕事が任されていくので、ブートストラップに失敗した自分はこれから常に不利な戦いを強いられ続けそうだということです。なので勉

Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！

ISUCONのチートシートを作った時の話です。 なんで4月にISUCONの話をするのかと言うと、今日 ISUNARABE LT#1 だからです。 スライドからはみ出た内容をブログにしました。 Algolia の便利機能は高い Algoliaは全文検索のSaaSです。 全文検索エンジン以外にもクライアントサイドで使えるコンポーネントも提供していて、APIキーを発行してクライアントライブラリを埋め込めば簡単に全文検索を実装できます。 ただ、ドキュメントをAlgoliaに反映させるためのステップでおそらく課金したくなります。 課金せずにやろうとすると、こういうめんどくさそうなことをしないといけません。 Gatsby だとAPIキーを渡せばビルド時にテキストをトークン分割してインデックスしてくれるプラグインを使ったりもしていたのですが、今回使う Docusaurus はそういうエコシステムではなく

aiko のモノマネとは？ いわゆるコールアンドレスポンスです。 aiko のライブに行くと「男子ー？」「女子ー？」「メガネー？」って言われて「いぇええ」って答えるのですが、それをしました。 理由としては当日の視聴者の層が分からなくて、DockerやNginxといった直接PHPと関係ない話をどれほど前提にして話していいのかを知るためのアンケートが目的です。 半分くらいに別れるという想定だったのですが、会場の雰囲気的にはDocker使っている人がほとんどで少し驚きました。 なのでDockerの説明は結構端折って進めました。（その結果、5分くらい早く終わってしまった...) 資料自体ははてぶでバズっていたみたいなのですが、誰もaikoに言及していなくて悲しい気持ちになりました。 なにを話したのか Laravel を Docker で動かす際に Apache や Nginx を要求されることに対

FrankenPHP を CloudRun で動かして、1イメージだけでサーバーを実行できるのか試してみる2024-03-06 隙あらば自分語り１ 3/8 14:40-15:20 に PHPerKaigi で話します。 PHP を Docker に固めてデプロイするときに ApacheやらNginxが求められることに対して、そもそも Webサーバーとは何かという話をします。 FrankenPHPも、Dockerに固めてデプロイするときの解決策の一つとして紹介します。 see: https://fortee.jp/phperkaigi-2024/proposal/42d9e721-b3e8-4a7d-ae88-1727ccfabf9b 隙あらば自分語り２ 年パスを持っていたので小さい頃ユニバによく行っていました。 ユニバにモンスター・メーキャップ っていうフランケンシュタインが出てくるアトラ

普通こういうブログって一年の締めに書くようなものだが、ラーメンにハマったのが去年の後半だったというのと、最近自己紹介する時に「ラーメン好き」って言うと「どこが好き？」「どこ行った？」と聞かれるので、何か今までのまとめを作るかと思って書いている。今年の総集編は今年の末にやると思う。 最近ラーメンにハマった きっかけは同僚と行った駄目な隣人。 ググると SUSURU という Youtuber が行っていることを知り動画を見る。 SUSURUは毎日ラーメンを食べていることにかっこよさを感じ、そのままチャンネルを登録する。 そしてどはまりし、毎日更新される動画を毎日楽しみに見るようになってしまった。 日頃から過去動画も漁っており、店を認知した結果、SUSURUが行ったラーメン屋に行くようになる。 そして最後は自分でも開拓を始めるほどにハマった。 厚木家 家系の直系店。 醤油強め、動物強めといった明

定期的に DDD やクリーンアーキテクチャなどを題材にした記事が盛り上がっているのを見ていると、いま長年の疑問を書けば誰か答えてくれるのではと思って書いてみる。 何に困っているかというと、 いわゆるレポジトリ層が持つ create/update 関数の引数は Entity で待ち受けるべきか、プレーンなオブジェクトで待ち受けるべきか分からない ユーザーから POST Body されたデータにはビジネスルールを適用させるべきか（= 一度 Entity を作るべきか）分からない だ。 Entity を作らない場合、いわゆるトランザクションスクリプトと呼ばれているものに近づく。 そしてトランザクションスクリプトには結構否定的な意見も見られる。 しかし、自分は Entity を作ることが必ず正解とは思えず、レイヤードな設計とトランザクションスクリプトを組み合わせる設計の余地もあると思っていて、トラ

新規開発の設計支援や古いコードベースを甦らせて欲しいという相談をもらったときに、最初にちょろっとコードだけお手本的なコードを書いてから引き渡しているのだが、そのときに必ず結合テストを書くようにしている。 3, 4年前から僕と付き合いがある人からすると、 「「「あの sadnessOjisan がテストを書くだと！！！」」」 という感じだと思うのだが、最近はテストに思うところもあってちゃんと書いている。 そしてそのテストコードだが、基本的にはアプリケーションから分離して書いている。その話をしたい。 OGP OGP は野方ホープで海苔が分離されて出てきた時の画像だ。 アプリケーションから分離したテストとはどういうことか 最終的にはテスト対象のサーバーを Docker コンテナで固めて、そのコンテナに対して HTTP リクエストを投げてその結果や DB の中身を検証するコンテナを docker

どうも、仕事を納めてしまうと、何も予定がない人になってしまった人です... てなわけで、公式ドキュメント、リリースノート、信頼できる情報源全部読んじゃうぞという計画を立てました。計画倒れしないようにちゃんと読むことをブログで宣言します！ 何をするのか マジでやること何もないので、日頃サボったプログラミングの勉強を一気にしようと思っている。「勉強していない」なんていうと「嘘つけ」と言われそうだが、いつも必要になったことをその都度調べて誤魔化しているだけであり、読むのは本や記事といった誰かの二次三次情報なので、実は一次情報には触れていない。なので以下に挙げるドキュメントは実はちゃんと読んだことがない。全て雰囲気で使っている。 そのため自分は歳の割には未知になっている範囲がとても多く（この構文ってフリーレンぽくてなんかかっこいいよね）、未知の未知にとても弱いため、わかっている人から見るとおかしな

fastify で 0 -> 1 することが年に何回かあるのだけど、その都度やり方を忘れて調べているのでメモしておく。 OGPはFastifyをコントロールしている人のイラスト by DALLEだ。 Routing をプラグインで表現する root ファイルで fastify.get("/users/:id", (req, res) => { res.status(200).send(""); }); のようにしてもいいけど、機能毎にモジュール化しておいた方があとでスケーリング効くので、ルーティングはモジュールとして定義したい。 そのためには FastifyPluginAsync を定義すればよく、 export const userFindRouter: FastifyPluginAsync = async (f, opts) => { f.get("/:id", {}, async (

転職ドラフトからオライリーの本たくさんもらったので欲しかったやつとりあえず全部読んでみた。 <pr> 紹介コード RVSC を使うとお互いにもらえるので気になる人は是非。 https://job-draft.jp/sign_up?utm_term=RVSC </pr> オブザーバビリティ・エンジニアリング 良い本。トレーシングやOpenTelemetryの本と思って買っていたが、実際はオブザーバビリティを確保するための色々な手法を紹介している。そのような手法が発達するまでの歴史の流れの解説も面白かった。従来のメトリクスとモニタリングだけでは現代の分散システムのデバッグが困難ということで、 オブザーバビリティ・エンジニアリングを導入する上での説得に使えそうな文言がたくさん散りばめられている。その手法の一つが、そもそも問題が起きてからデバッグのためにデバッガを挟み込んでデプロイしたくないという

なんか今日、megumish が CNDT 2023 で Next.js と otel の話をする らしい。そこで話されてしまうと、下書きに入れてあった Next.js と otel の記事が二番煎じになって出しにくくなりそうだったので大急ぎで書いている。 OGPは小樽のnextの駅です。 Next.js が OpenTelemetry をサポートした Next.js v13 でサポートされている。 see: https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry instrumentation.ts というファイルを置いて、ここで sdk-node を起動すれば計装されるという仕組みだ。計装には @vercel/otel というライブラリを使う。 ドキュメントは export as

OpenTelemetry Advent Calendar 2023 6日目は sadnessOjisan がやっていきます。 約2ヶ月ぶりのブログ。サボった最長記録達成してると思います。何をしていたかはそのうち書きます。今日は OpenTelemetry & JS についてです。 公式のExample を使うとすぐに tracing を試せるようになっていますが、一体どういう仕組みで、express サーバーへのリクエストがトレーシングされてログになるのかって不思議じゃないですか？てなわけで調べてみました。 OGP はモンキーパッチを DALLE に書いてもらいました。モンキーパッチが解答だからです。 公式のExample通りにSDKを使ってみよう Getting Start をまずはやってみましょう。 see: https://opentelemetry.io/docs/instrum

宣伝 10/21 に rust.tokyo でカニさんタワーバトルという発表をする。その事前資料として axum の内部実装の解説を書いているのだが、その解説を読むためには axum の Router は tower の Service ということを知っておく必要があるので、そもそも Service とは何かという tower の導入記事を書く。 tl;dr Webサーバーはルーティング、認証、レートリミット、ロギングなどのmiddleware関数が積み重なったものと見做せる これらのmiddleware関数は Fn: (req: Request) -> Future<Response> と見做せ、そのmiddleware関数の中が別の関数を呼ぶことで積み重ねられる 関数の中にmiddleware関数をハードコートすると再利用性に乏しくスケーリングさせにくいので、Fn: (req: Req