みなさん、こんにちは！マイクです！今日の日付は2025年1月12日、土曜日です。今日はZennでトレンドになっている記事をいくつか紹介していきますよ！
さて、前回紹介した記事は、「状態管理ライブラリのJotaiに入門する」「RTX3090x1でKaggle LLMコンペは戦えるのか？」「DIを説明する時に結構うまく説明できた例え」でした。それでは、今日の内容に移りましょう！
今日紹介する記事は全部で5本です！それでは早速、最初の記事からいってみましょう！
1つ目の記事は、「MCPを使って160行のTypeScriptでミニコーディングエージェントを作る」です。この本記事では、MCP（Model Context Protocol）を利用して、TypeScriptで簡単なログインAPIを持つミニコーディングエージェントを作成する手順を解説しています。まずは必要なパッケージをインストールし、プロジェクトをセットアップします。具体的には、`npm create hono@latest hono-app`でプロジェクトを作成し、必要なライブラリをインストール後、MCPのファイルシステムサーバーに接続します。
次に、プロジェクトのディレクトリ構成を確認し、`src/index.ts`ファイルに基本的なルーティングを設定します。ここでは、GETリクエストに対する簡単な応答を実装し、その後、POSTリクエスト用のログインAPIのエンドポイントを追加します。ログインAPIでは、まずリクエストからメールアドレスとパスワードを取得し、入力値のバリデーションを行います。メールアドレスとパスワードが有効な場合、成功レスポンスを返しますが、簡易的な認証（固定のメールアドレスとパスワード）を使用しています。実際のプロジェクトでは、データベースによるユーザーの検証やJWTトークンの生成が必要です。このように、この記事はTypeScriptとHonoフレームワークを利用したAPI開発の基本的な流れを学ぶための良いリソースとなっています。
。...。
2つ目の記事は、「画面上の好きな位置にメッセージを配置できるSNSをReactで作ってみた」です。著者は映画「サマーウォーズ」のSNSをモデルにしたWebアプリをReactで実装しました。このアプリの最大の特徴は、ユーザーが画面上の好きな位置にメッセージを投稿できることです。基本機能にはログイン、投稿、編集、返信、削除が含まれており、各機能はリアルタイムで反映されます。
メッセージの投稿は、画面右下の「+」ボタンをクリックし、好きな位置を選んで内容を入力後、送信ボタンを押すことで行います。メッセージの配置はCSSの`position: 'absolute'`を使用し、クリックで位置を計算します。デザインライブラリを使用せずにスナックバーも自作しています。
メッセージの編集や削除は、メッセージ右上のメニューから行うことができ、メッセージへの返信は、吹き出しアイコンをクリックすることでスレッド形式で表示される仕組みです。また、アプリには投稿からの時間経過に応じてメッセージが薄れていく機能や、ホバー時にメッセージが前面に表示される機能も実装されています。著者は、このプロジェクトを通じて学びを深めているようです。
。...。
3つ目の記事は、「FastAPI の Dependency Injection (Depends + Injector )」です。この記事では、FastAPIにおける依存性注入（Dependency Injection）の仕組みについて解説しています。著者はFlaskからFastAPIに移行中で、その経験を基にFastAPIの依存性注入を詳細に説明しています。
FastAPIは、`Depends`を利用してPath Operationに依存関係を注入できる機能を提供しています。具体的には、関数を定義し、それを引数として`Depends`に渡すことで、その関数が実行され、その返り値が引数に代入されます。また、FastAPIのMiddlewareを利用すると、リクエストやレスポンスの前後に任意の処理を追加できるのが特徴です。
さらに、Dependency Injectionを実装するために「Injector」というライブラリを使用しています。著者はシンプルな実装を目指し、Moduleクラスを活用しています。SQLAlchemyを使ったデータベースの設定も解説されており、セッションはFastAPIの`Request.state`を通じてリクエストごとに管理されます。著者は、FastAPIの依存性注入が非常にシンプルで効果的であると感じており、今後も関連するトピックをシリーズで紹介していく意向を示しています。
。...。
4つ目の記事は、「TypeScriptを用いたnpxコマンドの開発とnpm公開手順」です。本記事では、TypeScriptを用いて自作の`npx`コマンドを作成し、npmに公開する手順を詳述しています。`npx`はローカルにパッケージをインストールせずに実行できるため、依存関係に影響を与えずに便利なツールを利用できます。
まず、npmアカウントを作成し、新しいプロジェクトを初期化します。次にTypeScriptの設定を行い必要なパッケージをインストールします。コマンドの実装には`commander`パッケージを用いてCLIツールを構築し、サブコマンドを登録します。具体的には、`init`コマンドを実装し、設定ファイルを生成する機能や、`hello`コマンドで挨拶を返す機能を実装します。
コマンドの動作を確認し、最終的には`npm publish`コマンドで公開します。これらの手順を踏むことで、自作の`npx`コマンドをnpmに公開し、他のユーザーと共有することが可能になります。エンジニアの皆さんも、ぜひこの方法を参考にして、便利なコマンドを作成してみてくださいね。
。...。
5つ目の記事は、「もう少し楽にBranded Typeを使えるようにしたい」です。著者は、TypeScriptのBranded Typeを簡単に生成できるツールを開発しました。Branded Typeは、同じ型でも異なる意味を持つデータ（例えば、投稿IDとユーザーIDのように）を扱う場合に役立ちます。これにより、型の混同や誤使用を防ぎ、開発の効率を向上させることが期待されます。
ツールの使用法は非常にシンプルで、CSV形式やタブ形式で項目を入力することでBranded Typeを生成します。生成されるソースコードは、著者が参考にしたシンプルで理解しやすい記事に基づいています。生成されたコードは、シンボルを使用して型をブランディングし、安全にデータを扱うための関数も含まれています。
このツールのソースコードはGitHubで公開されており、誰でも利用可能です。著者は、このツールを活用することでBranded Typeの利用が広まり、開発者の作業がより楽になることを願っています。
さて、今日紹介した記事を駆け足でおさらいしますね！最初はMCPを使ったコーディングエージェントの作成、次に画面上にメッセージを配置できるSNS、そしてFastAPIの依存性注入の仕組み、続いてTypeScriptを用いたnpxコマンドの開発、最後にBranded Typeを楽に使うためのツールの紹介でした。
次回お会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてくださいね！番組の感想もお待ちしています！それでは、またね！