はてなブックマーク

はじめに こんにちは！かろっく@calloc134 です。 先日、晴れて社会人となりました！ お仕事ではフロントエンドやったり、 バックエンドやったり認証基盤やったりデータ基盤やったりすると思います。 多分？わからん・・・ 社会人になる前に一人暮らしを始めたのですが、当然ネット環境も必要になります。 そこで、せっかく自分でネット環境を構築するのなら、 ルータも自分でカスタマイズしてみたい！ というモチベが高まり、 自前でルータを用意、更にOpenWRTを導入してみることにしました。 ネットの契約からルータの選定、導入と接続確立まで思ったより大変だったので、 同じように一人暮らしでOpenWRTを導入したい人の参考になればと思い、 今回の記事を書いてみました。 まず OpenWRT とは OpenWRTとは、ルータ機器のためのLinuxベースのオペレーティングシステムです。 ルータ機器にイン

はじめに こんにちは。かろっく@calloc134 です。 巷では NewSQL が流行りを見せていますが、皆さんこう思ったことはありませんか？ 我々は、RDBMS ですら、十分に理解していないのではないか？ 今回は、PostgreSQL の内部実装に焦点を当てて、RDBMS 実装の解像度を上げていきたいと思います。 PostgreSQL の内部実装については、 インデックスの実装、追記型アーキテクチャ、MVCC、トランザクション分離モデルなどが 断片的に語られることはありますが、横断的な解説はあまり見かけないように思います。 この記事では、PostgreSQL における MVCC を用いた読み取り整合性の実装 トランザクション分離モデル インデックスの実装について、横断的に解説していきます。 今回割愛したもの ブログ執筆にあたり、以下の内容は割愛しました。 トランザクションのステータス管

はじめに こんにちは。calloc134 です。 Digital Identity 技術勉強会 #iddance Advent Calendar 2025 18 日目の記事です。 近年、Auth0 などの外部認証プロバイダを用いて、 OAuth/OIDC ベースでログインを実装するサービスが増えています。 その際、フロントエンドとバックエンド API を分けて実装し、 ログインをフロントエンドで済ませ、バックエンド API をアクセストークン付きで呼び出す形態を取ることが多いようです。 しかしそのアクセストークンの検証に不備がある場合、 成りすまし攻撃が可能になることがあります。 今回の記事では、この脆弱性の根本的な問題はそもそも何なのか、 この実装のどこに問題があるのか、 そして OAuth 仕様から見てこの実装は果たして行儀が良いのか？ などを解説していきたいと思います。 想定シナリオ

一連のRSC/Server Functions議論について 以下の事象のどれをヨシとして、どれをヨシとしないかについてスタンスを明確にしてから議論を行う必要があります サーバ側で見た目をレンダリングすること (Server Componentsを用いたUIレンダリング) サーバ側のデータを魔法のようにクライアントに渡せてしまうこと (SCからCCへのprops受け渡し) クライアントがサーバの関数呼び出しを意識せず魔法のように行えてしまうこと (Server Functionsへの引数渡し) 自分は一番目は是非とも許容していきたくて(これに関してはMPAやHTML on the Wire/HotWire のメリットと同じ)、 2と3はうまく立ち回らないと自分の足を自分でぶち抜いてしまう危険な仕組みなので避け、 SPA + Backend APIと同様にAPIスキーマを定義し、意図しない値の

はじめに こんにちは、calloc134 です。毎日「React なんもわからん」を繰り返していたところ、ソースコードを読み始めていました React は今や、フロントエンド開発においてデファクトスタンダートなライブラリとなっています。 しかし、どのような考え方・仕組みで実装されているのか、気付かないうちに勘違いしている人も多いのではないでしょうか。 今回は、そんな React の内部の仕組みを、必要があればソースコードを参照しながら解説していきたいと思います。 なお、参考にするソースコードは React 18.2.0 のものを使用します。 当該バージョンは参考文献のバージョンと揃えるために選択しました。基本的な動作はおおよそ同じものと考えていますが、最新のバージョンにおける変更点があれば今後追記していきます。 なお、このブログと同じ内容で、React Tokyo #6 で発表させていただ

はじめに こんにちは、calloc134 です。 つい先日、セキュリティキャンプにエントリーし、課題を提出しました。 事前課題の中で、気になった攻撃テクニック事例を一つ選び、これを詳しく解説するというものがありました。 自分は OAuth/OIDC について勉強中のため、OAuth に関連する攻撃事例である「OAuth Non-Happy Path to ATO」を選びました。 詳しく調査したところ結構面白い内容だったので、OAuth の復習も兼ねて取り組みました。課題提出はおわりましたが、せっかく頑張ったレポート課題の内容を公開しないのはもったいない！と思い、課題晒しも兼ねて公開することに決めました。 「OAuth Non-Happy Path to ATO」について、自分の理解でまとめていきたいと思います。OAuth の基本的な知識があることを前提に、攻撃手法の詳細や、どのような脆弱性

はじめに こんにちは、calloc134 です。 つい先日、セキュリティキャンプにエントリーし、課題を提出しました。 事前課題の中で、パスキーに関する標準や実装の調査に関するものがありました。 OAuth/OIDC のような認証認可技術と関連し、パスキーというものを聞いたことはありましたが、実際にどのようなものかを調べる機会はありませんでした。ちょうど良い機会なのでパスキーについて一通り調査し、従来のパスワード認証と比較してどのようなメリット・デメリットがあるのかを考察しました。 せっかく良いレポートが書けたため、課題晒しも兼ねて公開することに決めました。パスキーの導入を考える方の参考になれば幸いです。 なお、以下の内容はレポートの文体に合わせるため少し堅い表現になっていますが、ご了承ください。 課題内容 こちらより引用しております。 ■ Q.5（パスキーに関連する標準や実装の調査） (1

みなさんこんにちは。calloc134 です。今回も面白いものを作ったので是非宣伝させてください。 日本のインターネット文化を形作った 2 ちゃんねるスタイルの掲示板を、令和最新の技術スタックで再構築してみました。 今回は、そんな掲示板「VakKarma」について解説していきます。 はじめに スレッドフロート型掲示板とは スレッドフロート型掲示板は、2 ちゃんねるや 5 ちゃんねるなどでおなじみの掲示板スタイルです。 新しい投稿（レス）が付いたスレッドが、自動的に掲示板の一覧の最上位に浮上（フロート）する仕組みを持つ電子掲示板です。 スレッドフロート型掲示板（スレッドフロートがたけいじばん）とは、最新のコメント投稿がなされたスレッドがその掲示板のスレッド群の最上位に表示される機能を持つ電子掲示板を指す。フローティングスレッド型掲示板とも言う。 (https://ja.wikipedia.o

はじめに こんにちは。calloc134 です。 以前、授業内開発で部室予約システムを作成した記事を書きました。 このプロダクトについて実際に大学の軽音楽部に働きかけたところ、採用していただけることになりました。 しかし、コードの流れが追いづらく、メンテナンス性や拡張性が低かったため、一週間かけてリファクタリングを行いました。 今回はそのリファクタリングについて書いていきます。 リファクタリング前 バックエンド 以下の URL から、当時のバックエンドのコードを確認できます。 バックエンドには Hono というフレームワークを使用しています。 なんと、すべての処理を単一のファイルに書いてしまっています。そのため、行数は 1000 行を超えており、コードを修正したい場合であっても、どこを修正すればいいのかが分かりにくい状態でした。 一応このコードでは値オブジェクトパターンを利用しており、ここ

当記事は下書きとして作成した記事です。 完成版は以下の URL で公開予定です。 内容もこちらの方が正確ですので、ぜひこちらをご覧ください。 この記事は下書き段階です。記事の執筆途中であるため、内容が不完全である可能性があります。 最後まで執筆が完了していないため、内容が変更される可能性があります。また、誤りを含んでいる可能性がありますので、ご了承ください。 すべての執筆が終わった後、内容の正しさを確認した上で、別の記事として公開する予定です。 はじめに こんにちは。calloc134 です。 就活シーズン真っ最中。つらみ。 執筆が終わる前に就活が終わりました ・・・笑 ここ最近、OAuth と OIDC について調べていました。 その際、なかなか躓くところが多く、学習に苦労したため、個人的に疑問に思ったことをベースに、OAuth と OIDC のフローについて解説していきたいと思います。

はじめに こんにちは。calloc134 です。 前のハッカソンイベントで、UUID をプライマリキーに利用するかどうかの議論がありました。 結果的にはあまりパフォーマンス要件の高くないアプリケーションであったため、プライマリキーとして UUID を採用することにしたのですが、イベント終了後に気になったため、調査を行いました。 今回は、この調査の結果を元に、MySQL と PostgreSQL におけるインデックスの内部構造の違いと、UUID をプライマリキーにする際の問題についてまとめてみたいと思います。 インデックスの概要 インデックスとは インデックスとは、データベースのテーブルに対して、アクセスを高速に行うための指標となる構造のことです。 インデックスとは日本語で索引ですが、まさに辞書の索引のように、アクセスにおいての手助けをしてくれます。 より具体的に解説すると、データベースにお

はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため

はじめに こんにちは。calloc134 です。 バックエンド開発において、DB にデータを保存することはよくあることです。 DB と接続してデータのやり取りを行う必要がありますが、皆さんはどのようにしてデータを取得していますか？ ORM やクエリビルダを利用したり、逆に SQL を記述してコード生成を行ったりと、様々な方法があります。 今回はこれらのアプローチについて比較し、比較的斬新な方針を取っているものとして SafeQL を紹介します。 注意点 ここでは、TypeScript のバックエンド開発と、そこで利用されるライブラリを前提として話を進めます。 Go や Python など他の言語での利用方法については、別途調査が必要です。 SQL に対するアプローチ まず、SQL に対するアプローチには大きく分けて 2 つの方法があります。 それぞれのライブラリの使い方を、簡単に見ていきま

はじめに こんにちは。calloc134 です。 前回の授業内ハッカソン記事において、200 いいねを頂きました。ありがとうございます！ 自分の大学では、これ以外にも授業内で開発を行う実践的な授業がいくつか存在します。 前回の授業とは別に授業内開発を行う機会があったため、半年ぶりに大学の授業として開発を行いました。 簡単な概要 この授業では、チームで開発の分担を行いながら決められた期限までにコンテンツを制作していきます。自分は後輩とチームを組み、開発を行いました。 本来であればここで開発する内容は静的サイトで十分なのですが、せっかくなので動的サイトを作ることにしました。 後輩に聞いてみたところ、 「自分は軽音楽部に所属しているので、練習室の予約システムを作りたい」とのことでした。 丁度いい機会だと思い、自分の気になっている技術を利用しながら開発を行っていくことを決めました。 全体像 まずは

はじめに こんにちは。calloc134 です。 自分は以前から Linux パソコンを欲していたのですが、ついに先日、ThinkPad を購入し、Manjaro Linux をインストールしました。 ここでは、セットアップ手順についてまとめていきます。 完成形 以下のようなデスクトップが完成しました。 利用したもの Manjaro Linux Cinnamon Edition White Sur GTK Theme White Sur Icon Theme Noto Sans CJK JP WezTerm Zsh Sheldon Starship Neovim fcitx5-im 事前準備 Linux を導入するための ThinkPad を購入します。 自分は以下のスペックで購入しています。 ThinkPad X13 Gen 4 AMD Ryzen 7 PRO 7840U 32GB RA

皆さん、こんにちは。かろっくです。 現在は情報系の大学に通っています。 さて、大学生といったら、趣味に時間を費やしてなんぼです。 自分は大学の図書館を本当に頻繁に利用しています。 見ての通り図書館のヘビーユーザなのですが、そうなってくるとやはり図書館の操作の自動化をしてしまいたいという欲求が出てきます。 というわけで、今回は大学のシステムを解析して自動化した話をしたいと思います。 ひとまず完成形 先に、実装したコードのリポジトリを掲載します。 動作例として、discord にメッセージを送信している様子を以下に示します。 現在は延長する書籍が存在していないため終了していますが、延長の必要な書籍が存在する場合は、延長を行います。 方針 大学のシステムを自動化するにあたって、単に Selenium 等のブラウザを使うのは少し癪です。出来ることならば、ブラウザ等を利用せず、HTTP リクエストか

こんにちは。かろっくです。 今回は一言でいうと 大学授業内ハッカソンで"出席管理システム"を作ることになりました せっかくなので Cloudflare のインフラで最新技術をフル活用！ 楽しかったです という感じのお話をします。 はじめに 自分の大学で行われている授業に、「PBL 概論」というものがあります。 この授業は、生徒が自分たちで解決したいテーマを決め、それに沿って作品を開発していく実践的な授業です(授業というより、ハッカソンに近い感じの演習となっています)。 テーマとしては、「授業の不満を解消する」「生徒の生活を便利にする」など、生徒が直接関わるものが多いです。 授業の不満をヒアリングしたところ、出席管理に関する不満として、以下のようなポイントが挙がりました。 出席判定がカードのタッチで行われるため、手間がかかる カードを忘れると出席が取れない 出席したときに何らかの手段で通知が

こんにちは。calloc134です。 つい先日、ossに送ったPRがマージされました。 ossに対するPRのマージは初めてだったので、とても嬉しかったです。 今回は、その話をしていこうと思います。 はじめに 今回PRを送ったossは、ladleというツールです。 このツールはStorybookの軽量版のようなもので、Storybookのようにコンポーネントを管理することができます。 Storybookは非常に便利なコンポーネント管理ツールですが、多機能すぎるため、使いこなすのが難しいという問題があります。また、多機能である分、重いという問題もあります。 ladleは、Storybookのようなコンポーネント管理ツールを、より軽量にしたものです。Vite環境で動作し、Storybookのようにコンポーネントを管理することができます。Storybookと同様に、コンポーネントのドキュメントを書