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を選択すればよいかわ
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
管理画面のデザインに携わることがあり、やってみて気付いたこと、試してみたことの紹介です。 管理画面のデザインは難しい見た目をつくる力だけでは管理画面は作れません。 競業調査・使いやすさ・本当に必要な機能かの議論・新たな案の提案・注力する箇所の調整など、限られた時間とリソースの中で、最適な管理画面を制作するのは、経験値の高いデザイナーでも苦難すると思います。 機能（ユーザーストーリー）・情報が整理され、社内議論も終わり、ワイヤーフレームもあり、「準備万端。さぁデザイナーさんお願いします。」といった、情報が充分揃って依頼が来るといった理想な状態はありません。（デザイナーなら分かると思いますが、文言・構成が決まってない状態で依頼が来ることが多いです。サービスの管理画面の場合は関わるメンバーも多く、残念ながらカオスが極まります。） そのため、まだ整理が終わっていないところはデザイナーも携わり、要件
シリーズ: 要件定義とはそもそも何か 要件定義の目的とゴールとは 要件定義の重要ポイント〜要望・要求・要件を見極める 事業・業務・システムの3階層で要件を捉える 業務フロー図で見える化する業務プロセスからシステム要件への道筋 ユースケースとロバストネス図によるシステム要件定義 システム要件定義の成果物〜設計へのインプットを作成する 要件定義とソフトウェアアーキテクチャ設計（本記事） 要件定義とクラス設計 TRACERYプロダクトマネージャーの haru です。 設計プロセスでは、要件定義で作成された成果物をもとに、各種の設計が進められます。 そのため、設計プロセスの流れや観点を理解しておくことで、「どのような情報を、どの粒度で要件としてまとめるべきか」が明確になり、要件定義の成果物の実用性や完成度が大きく向上します。 設計プロセスについて、たとえば、以下のような観点を押さえておくことが重要
複雑なフォームと複雑な状態管理にどう向き合うか / #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
はじめに React Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入され、フルスタックフレームワークとしての側面が強化されましたが、v7 ではさらに進化し、Vite との統合、Single Fetch、Lazy Loading といったモダンな機能がデフォルトで組み込まれ、より洗練された開発体験とパフォーマンスを提供します。 しかし、これらの機能がどのように連携し、ブラウザのリクエストがどのように処理され、最終的にページが表示されるのか、その内部構造は少し複雑に見えるかもしれません。 この記事では、React Router v7 で構築されたアプリケーションの動作フローを、主要なパッケージやコンポーネントの役割、データ取得の仕組み、レンダリングプロセスなどに焦点を当てて、内
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 サーバーの例としては、以下のようなものが
はじめに こんにちは。ベースマキナで代表取締役社長をしております、高橋（timakin）です。 皆様、AI活用してますか？この数ヶ月から1年くらいの間で、AIを使ったプログラミングの進化といったら本当に目覚ましいものがありますね。 自分もソフトウェアエンジニアとしての経験をしたうえで代表をしているので心が踊る技術を何度か見てきましたが、10年単位で見てもここまでのパラダイムシフトはなかったのではと思います。 この変化に取り残されないよう、ベースマキナでもエンジニアチーム全体でのCursor導入、Clineの積極的活用等を実施しています*1。 ClineでClaudeを使う場合は会社で全エンジニアメンバー用のAPIキーを発行して使ってもらっています。 さて、そんなベースマキナですが、この記事では弊社のプロダクトの新機能開発をAIエージェント駆動で行った際の試行錯誤・学びをご紹介します。 なん
近年のWebフロントエンド開発において「リアクティビティ」という概念が非常に重要になっています。今回は、このリアクティビティにまつわる歴史を辿りつつ、2025年の1月にv1.0となったリアクティビティライブラリである「alien-signals」についてを解説していきます。 リアクティビティとは何を実現するものか そもそも「リアクティビティ」とは何かについてを説明します。 リアクティビティを日本語にすると「反応性」と訳されることがあります。この「反応性」とは、ある状態の変化に対してシステムが適切な対応をすることを指します。 Webフロントエンドにおける「反応性」は、アプリケーションの状態（データ）が変化した際に、その変化を検知し、関連するUIや他の状態を自動的に更新する仕組みのことです。 分かりやすい例としてあげられるのがスプレッドシートのようなUIです。あるセルの値が変更されると、そのセ
「The Deck」は、Flutterを用いて開発されたオープンソースのクロスプラットフォーム型ターン制カードゲームエンジンで、これまで紙や物理的なカードを使って遊ばれていたクラシックなカードゲームをデジタル環境で手軽にプレイできるようになります。 The Deck https://getthedeck.com/ 「The Deck」の特徴は、「テーブル」と呼ばれる専用のデバイスを1台指定し、スマートフォンなどからローカル接続してカードゲームをプレイできることです。このテーブル役のデバイスをグループの中央に置くと、全プレイヤーがリアルタイムでカードの状況を共有でき、より没入感のあるゲーム体験が可能になります。 ゲームの流れはシンプルで、ホスト役のデバイスでルームを作成し、他の参加者がそのルームに接続した後、人数が揃った時点でゲームがスタートします。 例えば、Android TVをテーブル役
適切なメモリシステムを選択する際には、以下の点を考慮することが重要です： プロジェクトの特性: 規模、複雑さ、継続期間 作業スタイル: 個人作業か共同作業か、作業の連続性 情報の性質: 構造化された知識か経験的知識か、更新頻度 自動化の程度: どの程度の自動処理が望ましいか カスタマイズの必要性: 標準的な使用か特殊な要件があるか 次世代メモリシステムの方向性 現在のAIツールのメモリシステムを分析すると、Devinが先行する中で今後の発展方向として以下のようなトレンドが見えてきます： マルチモーダルメモリ: コード、ドキュメント、図表など異なる形式の情報を統合的に管理 分散協調メモリ: チームメンバー間で共有されるメモリ空間の構築 自己組織化メモリ: ユーザーの作業パターンから自動的に最適な構造を学習 これらの発展により、AIアシスタントはより人間に近い理解力と長期的な文脈把握能力を獲得
はじめに 先日、CyberAgent主催のWeb Speed Hackathon 2025に出場しました。 Web Speed Hackathonはお題となるWebアプリケーションのパフォーマンス改善を行い、そのスコアで競い合うハッカソンです。似たようなものにISUCONがありますが、Web Speed Hackathonは主にフロントエンドの改善がメインとなっています。 ここでは参加記として改善の流れや感想などを書きます。 先にスコアの推移を載せます。途中でスコアが大きく伸びている部分がありますが、これは改善によってアプリがエラーで表示できなくなってしまった事によるものです。 また、リポジトリは以下のURLです。 環境構築・デプロイ・初期計測 以下のリポジトリをforkして始めます。アプリの内容は仮想の動画配信サービス「AREMA」だそうです。(なんか似た名前のサービスをCyberAge
検索・MLチームの山口 (@altescy)です。 先月 3/10〜３/14 にかけて長崎で行われた言語処理学会第31回年次大会に参加し発表・聴講してきたので、今回はその参加報告となります。 その前に 4/23 (水) に検索・MLをテーマにオフラインイベント Tech Kitchen を開催します。 Tech Kitchen #31 クックパッドのレシピ検索のいま 〜多言語対応と機械学習〜 私からは『レシピのための埋め込みモデルの学習とベンチマーク構築』についてお話しする予定です。 ご興味のある方はぜひキッチンへ遊びに来てください 🥳 発表した内容 クックパッドからは以下の発表を行いました。 P3-12: LLM を用いた複数レシピに対する調理計画手法の検討 1人の作業者が複数のレシピを同時に調理するのに最適な調理計画を LLM を使って生成するというものです。現在のクックパッドでは作
【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
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
管理画面のデザインに役立つ。テンプレート「Phoenix」とは。｜MAKOTO｜Designer
要件定義とソフトウェアアーキテクチャ設計 - TRACERY Lab.（トレラボ）
レベル別で紹介！オープンソースで挑戦できる120のプロジェクトアイデア集 - Qiita
React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり
Vercel AI SDK で MCP クライアントをツールとして利用する
開発期間2週間！新機能の叩き台をAIエージェント駆動で爆速開発した話 - ベースマキナ エンジニアブログ
Webフロントエンドでのリアクティビティからalien-signalsを知ろう
カードゲームをタブレットやスマホでプレイできるオープンソースのゲームエンジン「The Deck」
Devinのメモリ活用の学びを自社サービスにどう組み込むか？
【参加記】Web Speed Hackathon 2025で優勝した話
NLP2025 に参加しました - クックパッド開発者ブログ