スパイダープラス Tech Blog

建設SaaS「スパイダープラス」のエンジニアとデザイナーのブログ

hono/zod-openapiで実現するAPI開発実践

🧪 @hono/zod-openapiAPI開発をネクストレベルに

前回投稿の記事、「TypeScriptとhonoで作るDI実践入門」ではHonoとTypescriptで型安全なDIを実践しました。

techblog.spiderplus.co.jp

 

しかし、前回の実装では以下の課題がありました。

  • リクエスト/レスポンスの型安全性が不十分
  • APIドキュメントを手動で管理する必要がある
  • バリデーションロジックが分散してしまう

今回はこの課題に対して、@hono/zod-openapiを導入し解決していきます。

@hono/zod-openapiを導入することで、ZodスキーマからOpenAPIドキュメントを自動生成し、リクエスト/レスポンスのバリデーション、そしてルートハンドラーのコンテキストの型安全性を更に向上させることができます。

📋 @hono/zod-openapi 導入ステップバイステップ

続きを読む

TypeScriptとHonoで作るDI実践入門

Honoは軽快さとパフォーマンスで注目を集める最近注目されているWebフレームワークです。
TypeScriptとの相性も抜群で、一度使うとその虜になる開発者も多いのではないでしょうか。

しかし、アプリケーションが成長するにつれて、コンポーネント間の依存関係は複雑になりがちです。
「このサービスってどこでインスタンス化してるんだっけ…?」
「依存関係が複雑でテストが書きにくい!」そんな経験はないでしょうか?

そこで採用したいのが、Honoアプリケーションをより堅牢でメンテナンスしやすく進化させる方法が、DI(依存性注入)の導入です。
特に、インフラ層(データアクセスなど)とアプリケーション層(ビジネスロジック)を明確に分離することで、コードの見通しが良くなり、テストの容易性も向上します。

本記事では、シンプルながら強力なDIライブラリ hono-simple-di を活用し、HonoとTypeScriptで疎結合な構成を最小限のステップで実現する方法を徹底解説します。

「DIってなんだか難しそう…」と感じている方に対しても、わかりやすく解説できるようにサンプルコードと合わせて解説しますので、お付き合いいただければと思います。

なぜDIが必要になるのかは過去記事の「ソフトウェアアーキテクチャの本質と依存関係の整理、あるいはinterfaceの正しい使い所について」を参考にしていただければと思います。

techblog.spiderplus.co.jp

🎯 この記事で目指すゴール

  • Hono + TypeScript環境に、hono-simple-diを使ってDIを導入する。
  • 依存関係を疎結合に管理し、インフラ層とアプリケーション層を効果的に分離する。
  • 型安全性を維持しながら、テスタビリティとメンテナンス性の高いアプリケーションの土台を築く。

🛠 今回の使用技術

  • Hono
  • TypeScript
  • pnpm
  • hono-simple-di
続きを読む

AIエージェントにお任せ!MCPサーバーを利用してiOSアプリのUIテストをやってみた

こんにちは!ピヨコです。
今注目のAIエージェント(Cline)とMCPサーバーをiOSアプリ開発に活用できないか試してみました!今回はiOSアプリのSimulatorでの動作確認テストについて解説していきます。
AIエージェントがSimulatorで動作確認してコード修正を行えることがゴールとなります。
※いずれも記事作成時点の情報です。最新の情報とは異なる古い情報の可能性がありますので、必ず最新情報をお確かめの上でご自身の責任で検証等を行ってください。

内容

  • MCPサーバーを利用してiOSアプリをSimulatorで起動する
  • AIエージェント+MCPサーバーでアプリの動作確認テストをしてみる
  • AIエージェント+MCPサーバーでアプリのテスト結果から不具合を修正する

説明しない内容

  • MCPサーバーの導入方法
  • 他ツール類の導入方法
  • Xcode Project(iOSアプリ)の作成方法
  • 上手なプロンプトの書き方
続きを読む

ソフトウェアアーキテクチャの本質と依存関係の整理、あるいはinterfaceの正しい使い所について

はじめに

こんにちは、EMの本田です。今回はソフトウェアアーキテクチャの話を自分なりの理解で整理してみようと思います。

ソフトウェアアーキテクチャを設計する上で大切なことの一つは、変更しやすく、テストも行いやすいシステムを目指すことではないでしょうか。その本質は、突き詰めていくと「モジュール間の依存関係をいかに整理整頓するか」という点にたどり着くように思います。

この記事では、「依存関係の整理」がソフトウェア開発においてなぜこれほど大切なのか、そして、その実現に役立つ interface を、どのような場面で、どのように活用していくと効果的なのか、といったポイントに焦点を当ててみたいと思います。

説明の際には、オニオンアーキテクチャのレイヤー構造をイメージした図や、TypeScriptを用いたサンプルコードを参考にしますが、ここで触れる考え方は、多くのプログラミング言語や設計の進め方にも応用できるはずです。

ソフトウェアの課題: 複雑に絡み合う依存関係

続きを読む

セキュアな開発は「最初の1歩」から! SPIDERPLUSの脅威分析

はじめに

皆様、こんにちは。h12oです。情報システムオフィスに所属して、プロダクトセキュリティの第二線を担当しています。

当社はSPIDERPLUSをより良いプロダクトにするため、新規開発、機能拡張、不具合修正など様々な変更を日々加えています。SPIDERPLUSは、常に変化するプロダクトともいえます。

変化は進歩のために必要不可欠ですが、同時に新たなセキュリティリスクを生み出すおそれもあります。

プロダクトの小さな変更が、予期せぬ大きな脆弱性に繋がる可能性も否定できません。
インシデントを予防し、プロダクトのセキュリティを担保することを目的として、脆弱性診断を実施している会社は多いと思います。

脆弱性診断は、インシデントを防ぎ、プロダクトのセキュリティを維持するために重要ですが、それだけに頼ると、トータルコストの増大や、他のセキュリティ対策の不備につながるおそれがあります。

セキュリティをより強固にするためには、より前段階でのセキュリティ確保が重要になります。

そこで、スパイダープラスでは、開発プロセスの比較的初期段階で行う「脅威分析」を、早期に組み込む取り組みを始めました。

本記事では、その背景や具体的な取り組みについてご紹介します。

なぜ開発の初期に脅威分析が重要なのか?

続きを読む

エンジニアがITパスポートの試験を受けてみたら意外と学びが多かった話

はじめに

こんにちは。
プロダクト運用部CREチームの大畑です。

唐突ですが先日、ITパスポートを受験しました。

エンジニアとして働き始めて丸10年近く経つのですが、「エンジニアなら受かって当然という風潮だけど本当か?」と思ったのが発端です。
当然(?)合格点取りました(けど、正式な結果がまだなので合格と言い切れないのが締まりませんが……)。
さておき。
今回はITパスポートの試験を受けてみたら意外と学びが多かった話をまとめてみたいと思います。

 1分まとめ

  • ITパスポートと言う名前なのにビジネス全般の基礎知識を問われる総合的な試験だった
  • 取得でDX推進パスポートのデジタルバッジとITコーディネータ試験の一部免除のメリットがある
  • 応用的な問題も出てくるので油断は禁物

ITパスポートって何?

まずITパスポートという試験の概要について触れたいと思います。

続きを読む

AIの力でテストを自動化!Playwright MCP 入門編


今日もまた、モニターを食い入るように見つめ、気の遠くなるような手作業の波が押し寄せる。

はじめまして、takahashiです。

プロダクトのE2Eテスト(ユーザー視点でシステム全体を最初から最後まで全て操作するテスト)って大変ですよね。

何十、何百ものテストケースを一つ一つクリックしていく作業は最終的なプロダクトのクオリティを決定付ける最後のピースであり非常に大事なタスクです。

さて、世間はAIを利用した開発が一気に進んでおりますが、弊社も例外なく「GitHub Copilot」「Cursor」「CLINE」「Devin」などを取り入れています。

そんな中どうやら巷ではMCP(Model Context Protocol)という仕組みが隆盛であり、AIが様々な外部ツールやデータを操作するものらしいです。

特に最近Microsoftからオープンソースで提供された「Playwright MCP」に至っては非常にセンセーショナルで、生成AIに自然言語で指示を出すとブラウザを意のままに操り、アプリケーションを隅々まで理解して、最適なテストケースを自動で生成する事ができるというE2Eテストの救世主とも言える存在です。

github.com

大変なE2Eテストの一助になるべく、今回はCLINEを使用してPlaywright MCPを導入するまでの流れを簡単にご紹介したいと思います。

※CLINEとはVSCode上で動作するAIエージェントです

※今回はCLINEの導入方法は割愛させて頂きます( 参考

続きを読む