はじめに Google AntigravityのようなAgentic AI（自律型AIエージェント）が登場し、私たちの開発スタイルは大きく変わろうとしています。単にコードを補完してもらうだけでなく、「目的を伝えて、一連のタスクを自律的に遂行してもらう」ことが可能になったからです。 Antigravityの強力な機能の一つに「Skills（スキル）」があります。これは、特定の一連の作業手順やルールをパッケージ化し、AIに「新しい能力」としてインストールできる機能です。 この記事では、開発効率を劇的に向上させるために、エンジニアが今すぐ自作すべき5つのSkillsのアイデアを紹介します。これらを実装することで、あなたのAIエージェントは「汎用的なアシスタント」から「最強の専属パートナー」へと進化します。 エンジニアが作るべきSkills 5選 1. 技術記事・ドキュメント執筆Skill (te

結論 「テストして」って言っただけなのに、AIが自分でバグ見つけて、自分で直して、「違反は切腹」ってルールを自分で追加してきた。 人間、何もしてない。 何を作ったか Claude Code × tmux でホワイトカラー向けマルチタスクツールを作った。 名前は multi-agent-shogun。 戦国時代の軍制をモチーフに、将軍1名・家老1名・足軽8名の階層構造でAIエージェントを統制する。 上様（人間） ↓ 「やれ」 将軍（Claude Code） ↓ 「家老、タスクを分解せよ」 家老（Claude Code） ↓ 「足軽ども、並列で実行せよ」 ┌──┬──┬──┬──┬──┬──┬──┬──┐ │1 │2 │3 │4 │5 │6 │7 │8 │ ← 8人同時に動く └──┴──┴──┴──┴──┴──┴──┴──┘ 足軽（Claude Code × 8） とにかくshogunにぶち

個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。 今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。 このアプリの約9割はLLM（コーディングエージェント）による実装です。 人は仕様や品質ルールを考え、実装はAIに任せる――そんな進め方で短期間リリースを実現しました。 作ったのはこちら この記事では、使ったツールのセットアップから完成までの流れをまとめます。 また、コードやプロンプトの詳細より「どう進めて短期リリースしたか」という工程に絞って紹介してます。 作りたかったもの 一言で言えば、自分だけのおすすめ商品をまとめた比較サービスです。 日頃から「それの何が良いのか、買ってどうだったのか」を人に話すことがあり、その記録を Notion に溜めていたのですが、「公

ちょっと株式会社の KindBurger です！ 本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。 また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉 これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。 v0 とは ざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。 自然言語のプロンプトや画像、Figma ファイルなどから、 React / Next.js / Tailwind CSS / shadcn/ui といったモダンな技術スタックのコードを生成してくれます。 さらに、汎用的な AI ツールとは異なり、Vercel エコシステムに最適化されている点も大きな特徴です。 より詳しく知りたい方は、

【導入】 すべての始まりは、一枚の「AI利用ランキング」だった こんにちは、FLINTERS新卒エンジニアの野崎です。 突然ですが、皆さんはAIコーディングツール、活用していますか？ 僕は8月頃から使えるようになった「Claude Code」にドハマりし、まさに"ゴリゴリ使い倒す"日々を送っていました。アイデアを壁打ちすれば設計のヒントをくれ、エラーコードを投げれば一瞬で解決策を示してくれる。まるで魔法使いのようなその力に、僕は完全に心酔していました。 しかし、そんな僕にある転機が訪れます。毎月発表される社内のAI利用状況レポートで、なんと僕が Claude Code利用者ランキング2位 にランクインしていたのです。 「え、俺がこんなに使っていいのか…？」「（従量課金だし）これ、まずいのでは…？」 一抹の危機感を覚えたのと同時に、僕は日々の開発業務に潜む、ある種の「ムダ」にも気づき始めてい

こんにちは、mayaです！ 最近、Claude Codeでボリュームの大きいタスクを実行していると、途中でAuto Compactが発動してコンテキストが圧縮され、それまでの経緯をClaude Codeが見失ってしまう問題に悩まされていました。 せっかく良い流れで進んでいたのに、突然とんちんかんな作業を始めるあの絶望感、分かる方も多いのではないでしょうか😭 そんな中、Codex CLIがMCPに対応したという情報を見つけて試してみたところ、これが予想以上に良い体験でした！ Claude Codeがタスク管理役、Codexが実行役という役割分担により、コンテキストウィンドウをほとんど消費せずに大規模なタスクを自律的に完遂できるようになりました。 この記事で分かること / 対象読者 Claude Codeのヘビーユーザー向けの内容です コンテキストウィンドウ問題の実践的な解決方法 Claud

はじめに：AIコーディングの新たな可能性 Claude Codeを使ってコーディングをしていると、こんな悩みを抱えたことはありませんか？ プロジェクトの全体像を理解してもらうのに毎回長い説明が必要 トークン消費量が気になって、詳細な指示を躊躇してしまう 同じような説明を何度も繰り返している コンテキストが切れて、以前の作業内容を忘れられてしまう これらの問題を一挙に解決してくれるのが、今回紹介する「Serena MCP」です。このオープンソースツールを使うことで、Claude Codeの理解力と効率性が劇的に向上し、まさに「10倍賢く」なったような体験を得られます。 Serena とは Serenaは、Claude CodeなどLLMのためのコーディングエージェントツールキットで、MCP（Model Context Protocol）という規格に則り、AIと連携するツールの1つです。 一言

Claude Codeとは? Claude Codeは、ターミナル上で動作し、コードベースを理解し、自然言語コマンドを通じてより速くコーディングできるようサポートするエージェント型コーディングツールです。開発環境に直接統合することで、追加のサーバーや複雑なセットアップを必要とせずにワークフローを効率化します 特徴としては以下があげられます。 コード生成: 自然言語の指示からコードを生成する能力があります。例えば、特定の機能を実装するためのコードを自動的に生成できます。 コードの理解: 既存のコードを解析し、コメントやドキュメントを生成することができます。これにより、コードの可読性と保守性が向上します。 デバッグ支援: コードのバグを検出し、修正案を提案することができます。これにより、開発者は迅速に問題を解決できます。 初期セットアップについて 作業用フォルダを作成します。

https://ryoppippi.com を MCP サーバーとしてClaudeから参照している様子 ウェブサイトの内容をまるごとAIに参照させたい、そんな願いを叶えるツールがあります。 その名も sitemcp です。 このツールを使うと、任意のサイトのページをfetchして、MCPサーバーとして立ち上げることができます。 MCP サーバーとは MCPは「Model Context Protocol」の略で、AIアシスタントが外部データにアクセスするための仕組みです。要するに、AIに「このウェブサイト読んでね」とか「このファイル見てね」と渡せるようにするプロトコルです。 使い方 詳しいインストールの仕方は GitHub の README を見てください。 ここではClaude Desktopから使う方法を紹介します。 ...と言ってもそんなに難しいことはありません。 例えば、Daisy

はじめに こんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次 デザインシステムと開発の現状課題 MCP サーバーの登場 Ubie UI MCP の構築 デモ テキストだけで UI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望 デザインシステムと開発の現状課題 Ubie では「Ubie Vitals」というデザインシステムに則って

1章　事業活動を分析する この章は事業活動を理解するためのドメイン駆動設計の考え方とやり方が解説されています。 感想 ドメイン駆動設計は事業活動と構造を理解するところから始まります。 理想的には設計者や開発者が業務全体を完全に理解したうえで設計や開発を進めることが望ましいです。 しかし、現実としては設計者や開発者がすべての業務を完全に理解することは極めて難しいです。 そこで重要となるのがコミュニケーションとなります。 業務エキスパートと密にコミュニケーションをとり、本来の意図を漏れなく汲み取ることがなにより重要になると思います。（どのようにくみ取るかは次章で解説されています。） この辺りはSIerとして参画する場合に特に必要とされると思います。 いかにステークホルダーを巻き込みながら業務エキスパートとの信頼関係を築けるかが、プロジェクトの成功を左右すると言っても過言ではないと思います。 2

はじめに こちらは e-dash Advent Calendar 2024 の17日目の記事です。 はじめまして、e-dashのフロントエンドエンジニア、kyonsiと申します。 クリスマスシーズン、皆さんいかがお過ごしでしょうか？ 私は、夜に輝くイルミネーションを眺めながら、「このキラキラのアニメーション、durationは何ミリ秒なんだろう？ CSSで再現できないかな？」なんて、ついフロントエンドエンジニア的な思考が巡っています。 本記事では、最近立ち上げたフロントエンドプロジェクトで採用した技術と、その選定理由を軽くご紹介いたします。「ちょっと攻めすぎじゃない？」「いや、もっと枯れた技術でいいでしょ？」といった社内議論も、クリスマスムードに包まれればスパイス程度。その過程こそが、フロントエンド開発の醍醐味といえるでしょう。 それでは、ホリデームード漂う中、スノードームのようにキラキラ

なんだか最近React Nativeに関する投稿が増えている気がしますね。 筆者も本投稿を準備していたところ、先に投稿が増えてきたので二番煎じ感が否めませんが、少し俯瞰的な整理としてご覧いただければと思います。 React Native界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥 具体的にどのように盛り上がっているのか、 React Conf 2024のKeynote（Day 2） がYoutubeで公開されており、非常に分かりやすくまとまっていました。 本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。 ※React Conf 2024は5/15・16に開催されたものです 動画前半： React Nativeがいかに盛り上がってい

Ubieでは、Ionic(Capacitor)でガワアプリ的に実装されていたモバイルアプリ(Android/iOS)を、2024年初頭にReact Native (with Expo)にリプレイスしました。 「なぜ今更React Nativeを？」という方もいらっしゃると思います。本記事では、UbieにとってReact Nativeがフィットした理由や検討した点を紹介します。Ubieの技術資産、人材、事業展望などのコンテキストを前提とするものであり、一般的な技術の良し悪しを論じる記事ではないことに注意してください。 Full-Stack TypeScript Ubieのプロダクト開発チームでは、フロントエンドエンジニア/バックエンドエンジニアといった技術領域での担当分けは原則せず、プロダクト開発エンジニアとして企画から開発、分析などに一貫して携わっています。 このように仕事を広く持つ前提で

独学で個人開発を始めて5年が経ちました。これまでには収益化に成功したサービスもあれば、鳴かず飛ばずでお蔵入りになったサービスも数多くあります。それらの経験から、成功したサービスはなぜ上手くいったのか、マーケティングや収益化において押さえておくべきことは何か、その要点が少しずつ見えるようになりました。 今回は私が開発〜集客〜収益化を行うプロセスと、各工程で気をつけているポイントを順を追って書き出してみます。上手く言語化できているか分かりませんが、暖かい目でお付き合いください。 収益化した3つのサービス 私はこれまでにWebサービスを20個以上開発しており、現在はポモドーロタイマー（月間100万ユーザー）やYouTubeのループ再生ツール（月間10万ユーザー）などを運営し、そこからの収入で生活しています。 基本は海外向けのBtoCで、以下のようなツール系が中心です： 収益化済みサービス： Po

この記事は以前 エンジニアと人生 というオンラインコミュニティで執筆し技術書典で頒布した本の中の、私の執筆した章をリライトしたものです。 無料公開の背景 本は有料で販売していたのでこの記事も有料記事にしようかとも思っていましたが、最近個人開発をネタにした特に中身のない記事を有料で買ってしまい後悔している友人を見かけて、そういうのにうんざりしていたので無料で公開することにしました。 個人開発云々いうなら中身のない情報商材じゃなくて自分のサービスで稼げよな！ ということで。でも投げ銭はありがたくいただくのでいいと思ったらバッジしてください！ 【追記】 上記に対して「有料記事がダメって事？」という反応を頂きました。書き方が悪く申し訳ありません。 有料でノウハウなどを販売する事は良いと思います！そしてそれでサービスの運営費を賄えるなら嬉しい事です。 なんならサービスに関する事ならこの記事の"データ

以下の記事などで既にかなり話題になっていますが、ぼくも触ってみました(使い方などの詳細はこちらの記事を参照してください)。 結論としては、マジすごくてかなり衝撃的です。すべてのホワイトカラーワーカーにとって、かなりディスラプティブなツールになるのではないでしょうか。 自分はコンサルタントでして、これまでにたくさんの資料を作ってきてスキルを磨いてきたつもりだったので、AIポン出しでここまでのものが出てきてしまうと、正直、人生について考えさせられちゃいますね。 この記事では、Napkinを使ってどういう資料ができたのか共有したいと思います。 ポストモーテムの勉強会をしたいなと思っていたので、まずはChatGPTで資料の骨子を出力し、それをNapkinに入力してみました。それで得られたのが、以下の資料です。 スライド1: タイトルスライド タイトル: ポストモーテムの教科書 副題: SREにおけ

技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ

技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ

はじめに 【追記】↓100秒テックでイラスト投稿してます！よかったら見てってください！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 この記事ではこの3つのキーワードを1つ1つ解説した後、最後にデモという形で実際にコードを書いて Cloudflare Workers にデプ