AWS設計プロンプト
シンプルかつ網羅的なAWS設計を生成するAIプロンプトの核心は： 構造化された出力フォーマット：設計書の章立てと各セクションの説明内容を明確に指定 具体的なパラメータ要求：抽象的な説明ではなく、実装に使える具体的な設定値を求める 選定理由の明確化：「なぜその選択をしたのか」の説明を求める 代替案との比較：検討した代替オプションとの比較を含める Well-Architectedの原則適用：AWSのベストプラクティスに基づく設計を促す このアプローチを活用すれば、AIの力を借りつつも、実装に直結する高品質なAWS設計書を効率的に作成できます。何より、設計者の時間を節約しながらも、その専門知識と判断を最大限に活かせるところに大きな価値があります。 ※以下を全量使用すると量が多いので、該当箇所のみの抜粋を推奨 以下の要件に基づいて、詳細かつ実装可能なAWSアーキテクチャを設計してください。各セクシ
良いReactを書くことは凡事徹底だと考えている話 - カミナシ エンジニアブログ
カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。 React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中
はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
MCPでLLMに行動させる - Terraformを例とした tfmcp の紹介 - じゃあ、おうちで学べる
はじめに こんにちは！今回は、私が最近開発した tfmcp というツールを紹介します。これは Terraform を LLM（大規模言語モデル）から操作できるようにするツールで、Model Context Protocol (MCP) を活用しています。 github.com このブログが良ければ読者になったり、GitHub リポジトリにStarをいただけると開発の励みになります。nwiizoをフォロワーしてくれるのもありがたいです。より良いツール開発のためのフィードバックもお待ちしています！ MCP とは何か？ 記事を始める前に、まず MCP (Model Context Protocol) について簡単に説明しましょう。MCP についてより詳しい情報は、公式ドキュメント modelcontextprotocol.io や Anthropic の Model Context Protoc
2月24日に、Anthropicは、新しいAIモデルのClaude 3.7 Sonnetを発表しました。Claude 3.7は、直感的な即時応答と詳細な推論を1つのモデルで実現するハイブリッド推論型のAIモデルです。 数日間Claude 3.7を使ってみたところ、簡単な指示だけで高品質な図表を作成できることに驚きました。そこで今回は、Claude 3.7を使って図表を作成する際のポイントを紹介します。 １．Claude 3.7の概要と特徴Anthropicが2025年2月にリリースした最新言語モデル「Claude 3.7 Sonnet」は、ハイブリッド推論モデルを採用した汎用AIとして注目を集めています。従来モデルを大幅に上回る推論能力と柔軟な運用性を特徴とし、特にソフトウェア開発分野で顕著な進化を見せています。 コア技術の革新 ハイブリッド推論アーキテクチャ ・Standardモード:
ここがつらいよ分散SQLデータベース Yoshitaka Koitabashi Sr. Solution Architect PingCAP株式会社 ハッシュタグ：#jawsdays2025 #jawsug #jawsdays2025_e 自己紹介 ハッシュタグ：#jawsdays2025 #jawsug #jawsdays2025_e Yoshitaka KOITABASHI PingCAP株式会社 Sr. Solution Architect 💙 Database / Serverless / Container ● PingCAPとは？ ● 分散型SQLデータベース ● TiDBの裏側 (アーキテクチャ/MVCC/分散トランザクション/Raft/ etc...) ● 実際の運用現場で直面する課題 ハッシュタグ：#jawsdays2025 #jawsug #jawsdays2025_
Mastraとは Mastra（マストラ）は、AIエージェント開発のためのオープンソースフレームワークです。TypeScript（JavaScript）で実装され、大規模言語モデル（LLM）を活用したAIアプリケーションや機能を効率的に構築できます。 例えば、対話型の「エージェント」（自律的にタスクを実行するAIシステム）をシンプルなコードで実装でき、ローカル環境やクラウド上で動作させることが可能です。 主な特徴 Mastraでは、エージェントにツールやワークフローなどの機能を組み込むことで、言語モデルに外部の操作能力を与えることができます。エージェントはユーザーからの指示に応じて、これらのツールを活用したり、定義されたワークフロー（処理手順）に従ったりしながら、自律的に処理を進めていきます。 また、OpenAIのGPT-4やAnthropicのClaude、GoogleのGeminiなど
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
【LayerX/ベースマキナ/令和トラベル】サービスの成長に合わせたフロントエンドの進化 - connpass https://reiwatravel.connpass.com/event/346339/
はじめに 「オープンソースに挑戦したいけど、どんなプロジェクトを作ればいいかわからない…」そんな悩みを持っていませんか？ 本記事では、初心者・中級者・上級者・達人 の4つのレベルに分けて、合計 120個のオープンソースプロジェクトアイデア を紹介します。 それぞれのアイデアの詳細については折りたたんであります。興味がある内容については広げてみて機能要件や実装のポイント、拡張機能、学べることを見てみてください！ 自分のスキルレベルに合ったプロジェクトを見つけて、実際に開発に挑戦してみましょう！ 初心者向けプロジェクトアイデア 1. ToDoリストアプリ 概要 ToDoリストアプリは、ユーザーがタスクを追加・編集・削除し、完了状況を管理できるシンプルなアプリです。 初心者でも取り組みやすく、プログラミングの基礎となる CRUD（Create, Read, Update, Delete） の概念
Mastraの基本機能と何ができるか
はじめに TypeScriptでAIエージェントの開発ができると噂のMastraを試してみたくなり、主要機能をざっと調べてみました。 この記事では、エージェントやワークフロー、RAGなどMastraの基本機能を一通り紹介し、「どんなことができるのか」をざっくり掴めるようまとめてみました。より高度な機能や環境構築、デプロイ方法など詳しい設定方法を知りたい方は、公式ドキュメントを参照してみてください。 Mastraとは Mastraは、AIエージェント、ワークフロー、RAGなどの機能を統合的に提供するTypeScriptフレームワークです。VercelのAI SDKをベースにしており、OpenAI、Anthropic、Google Geminiなど様々なAIプロバイダーとシームレスに連携できます。オープンソースであるため、カスタマイズ性が高く、コミュニティによる継続的な改善が期待できます。 M
Vercel AI SDK で MCP クライアントをツールとして利用する MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。 MCP（Model Context Protocol）は、LLM（大規模言語モデル）に追加のコンテキストや機能を提供するための標準化されたプロトコルであり、AI アプリケーション開発において注目を集めています。MCP を利用することで、LLM は外部ツールやデータソースと連携し、より高度なタスクを実行できるようになります。 MCP サーバーの例としては、以下のようなものが
はじめに React Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入され、フルスタックフレームワークとしての側面が強化されましたが、v7 ではさらに進化し、Vite との統合、Single Fetch、Lazy Loading といったモダンな機能がデフォルトで組み込まれ、より洗練された開発体験とパフォーマンスを提供します。 しかし、これらの機能がどのように連携し、ブラウザのリクエストがどのように処理され、最終的にページが表示されるのか、その内部構造は少し複雑に見えるかもしれません。 この記事では、React Router v7 で構築されたアプリケーションの動作フローを、主要なパッケージやコンポーネントの役割、データ取得の仕組み、レンダリングプロセスなどに焦点を当てて、内
近年のWebフロントエンド開発において「リアクティビティ」という概念が非常に重要になっています。今回は、このリアクティビティにまつわる歴史を辿りつつ、2025年の1月にv1.0となったリアクティビティライブラリである「alien-signals」についてを解説していきます。 リアクティビティとは何を実現するものか そもそも「リアクティビティ」とは何かについてを説明します。 リアクティビティを日本語にすると「反応性」と訳されることがあります。この「反応性」とは、ある状態の変化に対してシステムが適切な対応をすることを指します。 Webフロントエンドにおける「反応性」は、アプリケーションの状態（データ）が変化した際に、その変化を検知し、関連するUIや他の状態を自動的に更新する仕組みのことです。 分かりやすい例としてあげられるのがスプレッドシートのようなUIです。あるセルの値が変更されると、そのセ
はじめに こんにちは。ベースマキナで代表取締役社長をしております、高橋（timakin）です。 皆様、AI活用してますか？この数ヶ月から1年くらいの間で、AIを使ったプログラミングの進化といったら本当に目覚ましいものがありますね。 自分もソフトウェアエンジニアとしての経験をしたうえで代表をしているので心が踊る技術を何度か見てきましたが、10年単位で見てもここまでのパラダイムシフトはなかったのではと思います。 この変化に取り残されないよう、ベースマキナでもエンジニアチーム全体でのCursor導入、Clineの積極的活用等を実施しています*1。 ClineでClaudeを使う場合は会社で全エンジニアメンバー用のAPIキーを発行して使ってもらっています。 さて、そんなベースマキナですが、この記事では弊社のプロダクトの新機能開発をAIエージェント駆動で行った際の試行錯誤・学びをご紹介します。 なん
クリーンアーキテクチャを慌てて覚えた話。
まえがき どこいっても、クリーンアーキテクチャの話は割とでてきます。私は自作フレームワークを幾度も考えて作っているので、思想とか設計は割と言葉の違い程度でわかっていると思っていました。しかし、ちょっと私の思想と違ったので、勉強してよかった。 問題点 文章で覚えるとキツい そう、AIに聞いても文面だけだとピンとこない。ほんとはクイズ形式でだされるといい気がするけど、誰が作るんだって話。 呼び名、細分化が会社、PJT毎異なる ここら辺はPJT毎名称を確認するか、コードみて判断することになる。 大きく分けて4層 覚え方：タイムライン 時系列で処理されるものなので、時系列で名称を覚えます。 です。 インターフェースアダプタ層（コントローラー層、ハンドラー層、フレームワーク層と言ったり） 1-1. MVCのController、Presenter、Gateway 1-2. フレームワークのコア、中心
適切なメモリシステムを選択する際には、以下の点を考慮することが重要です： プロジェクトの特性: 規模、複雑さ、継続期間 作業スタイル: 個人作業か共同作業か、作業の連続性 情報の性質: 構造化された知識か経験的知識か、更新頻度 自動化の程度: どの程度の自動処理が望ましいか カスタマイズの必要性: 標準的な使用か特殊な要件があるか 次世代メモリシステムの方向性 現在のAIツールのメモリシステムを分析すると、Devinが先行する中で今後の発展方向として以下のようなトレンドが見えてきます： マルチモーダルメモリ: コード、ドキュメント、図表など異なる形式の情報を統合的に管理 分散協調メモリ: チームメンバー間で共有されるメモリ空間の構築 自己組織化メモリ: ユーザーの作業パターンから自動的に最適な構造を学習 これらの発展により、AIアシスタントはより人間に近い理解力と長期的な文脈把握能力を獲得
「The Deck」は、Flutterを用いて開発されたオープンソースのクロスプラットフォーム型ターン制カードゲームエンジンで、これまで紙や物理的なカードを使って遊ばれていたクラシックなカードゲームをデジタル環境で手軽にプレイできるようになります。 The Deck https://getthedeck.com/ 「The Deck」の特徴は、「テーブル」と呼ばれる専用のデバイスを1台指定し、スマートフォンなどからローカル接続してカードゲームをプレイできることです。このテーブル役のデバイスをグループの中央に置くと、全プレイヤーがリアルタイムでカードの状況を共有でき、より没入感のあるゲーム体験が可能になります。 ゲームの流れはシンプルで、ホスト役のデバイスでルームを作成し、他の参加者がそのルームに接続した後、人数が揃った時点でゲームがスタートします。 例えば、Android TVをテーブル役
TL;DR Plan Modeを活用しよう: Plan Mode を使って要件を固めて手戻りを防ぐ Cline はタスクランナー: Cline は自然言語スクリプトを実行するタスクランナーとして捉えると分かりやすい。Plan Mode は dry-run の役割 はじめに ここ最近話題になっている Cline ですが、触れた方の中には「これはパラダイムが変わる」と感じた人も多いのではないでしょうか。 私も2024年11月中頃に初めて Cline を使い、その新しい体験と馬力の高さに驚きました。 しかし、いざ Cline を使ってみると、Cline に実装を任せても意図通りの成果物ができず、大量の手戻りが発生しがちです。 そこで重要になってくるのが、 「Plan Mode」 という動作モードです。 Cline は「Plan Mode」と「Act Mode」という二つの動作モードに分かれていて
はじめに 先日、CyberAgent主催のWeb Speed Hackathon 2025に出場しました。 Web Speed Hackathonはお題となるWebアプリケーションのパフォーマンス改善を行い、そのスコアで競い合うハッカソンです。似たようなものにISUCONがありますが、Web Speed Hackathonは主にフロントエンドの改善がメインとなっています。 ここでは参加記として改善の流れや感想などを書きます。 先にスコアの推移を載せます。途中でスコアが大きく伸びている部分がありますが、これは改善によってアプリがエラーで表示できなくなってしまった事によるものです。 また、リポジトリは以下のURLです。 環境構築・デプロイ・初期計測 以下のリポジトリをforkして始めます。アプリの内容は仮想の動画配信サービス「AREMA」だそうです。(なんか似た名前のサービスをCyberAge
【clinerulesの書き方】Cline x Next.js での AI駆動開発に使っているテンプレートと使い方を紹介してみる - Qiita
はじめに みなさん、AI 駆動開発してますか？ 最近、いろんな AI エージェントが登場してきて、AI 駆動開発が盛り上がってきていますね。 私はこれまで、業務やプライベートの両方で、生成 AI や AI エージェントを使って開発をしてきました。 生成 AI 系 ChatGPT Gemini Claude AI エージェント GitHub Copilot Cursor Cline この中で、個人的には Cline が一番使いやすく、特に Next.js との相性が良いと感じています。 今回は、最近特に話題の AI エージェント Cline と Next.js を組み合わせて開発する際に、私が使っている設定ファイルを紹介してみたいと思います。 一応、数行を書き換えれば他の技術スタックでも使えると思いますが、今回は Next.js を例にして紹介していきます。 Cline とは Cline は
MVPリアーキテクチャを通して成長したWEAR iOSエンジニアアルバイト奮闘記 - ZOZO TECH BLOG
はじめに こんにちは。2025年4月に新卒で株式会社ZOZO（以下、ZOZO）に入社予定の清板海斗（せいたかいと）です。2024年8月から入社までの約半年間、「WEAR by ZOZO」（以下、WEAR）のiOSチームで内定者アルバイトに参加しました。この記事では、内定者アルバイトの目的やチームでの取り組み、全体の振り返りについてご紹介します。 目次 はじめに 目次 内定者アルバイトの概要 ZOZOの内定者アルバイトについて 内定者アルバイトでの働き方 WEARとは WEAR iOSチームについて 主な取り組み MVPへのリアーキテクチャ タスク概要 Presenter移行の背景 WEAR iOSにおけるPresenter 実施したこと 結果 学び 1. コミュニケーションと言語化の重要性 2. UIKitの理解 3. 実務レベルで求められる視点 最後に 内定者アルバイトの概要 ZOZOの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【図解解説】これ1本12分でReact Hooks 全20種を理解できる教科書 - Qiita
Claude 3.7で色々な図表を作成してみた｜IT navi
ここがつらいよ分散型SQLデータベース.pptx
Mastra入門 〜AIエージェント開発ツールの概要と使い方〜
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
レベル別で紹介！オープンソースで挑戦できる120のプロジェクトアイデア集 - Qiita
Vercel AI SDK で MCP クライアントをツールとして利用する
React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり
Webフロントエンドでのリアクティビティからalien-signalsを知ろう
開発期間2週間！新機能の叩き台をAIエージェント駆動で爆速開発した話 - ベースマキナ エンジニアブログ
Devinのメモリ活用の学びを自社サービスにどう組み込むか？
カードゲームをタブレットやスマホでプレイできるオープンソースのゲームエンジン「The Deck」
Cline の Plan Mode を使って手戻りを防ごう！
【参加記】Web Speed Hackathon 2025で優勝した話