バイブコーディング — 朝出汁（ASADASHI）

バイブコーディング

バイブコーディングのAIニュース。Cursor/v0/Claude Code などで自分で作る。

30 件の記事

バイブコーディング2026.07.11

TypeScriptが10万星超え、今が乗り換え時な理由

JavaScriptの上位互換として設計されたTypeScriptがGitHub上で10万9千以上のスターを獲得しており、バイブコーディング時代においても最も支持されるWeb系言語基盤のひとつとして業界での存在感を増している。
AIにコードを書かせる際、JavaScriptより型情報が明確なTypeScriptを使うと、AIが生成するコードの品質と修正のしやすさが上がるとドキュメントや開発者コミュニティで広く指摘されている。
始めるなら公式サイト（typescriptlang.org）のPlaygroundで、ブラウザ上から型付きコードを試せるので、環境構築なしでAIと組み合わせた書き方を確認するところから入るとスムーズ。

読了 2分

バイブコーディング2026.07.09

OfficeファイルをAIが直接読み書きする時代へ

OfficeCLIは、WordやExcel・PowerPointをOfficeなしで読み書き・自動操作できる無料のオープンソースツールで、AIエージェントが直接操作する用途に特化して設計されている。
注目したいのは「Officeインストール不要・単一バイナリ」という設計で、AIに指示を渡すだけでファイル操作が完結するワークフローを、個人環境でも組みやすくなっている点。
始めるなら、公式リポジトリからバイナリを取得し、手元の提案書や集計ファイルをAIで自動編集するフローを試してみると、使いどころがつかみやすい。

読了 2分

メニューバーアプリでAIコーディングのAPI使用量をリアルタイム監視するミニチュア紙工作ジオラマ

バイブコーディング2026.07.08

AIコーディング中のAPI使用量をログアウト不要で確認

メニューバーに常駐するアプリで、OpenAI CodexとClaude Codeのトークン使用量・コストをリアルタイムで確認できるようになった。
AIコーディングツールはコストが積み上がりやすく、使いすぎに気づくのが遅れがちだが、このツールを入れておくだけでダッシュボードにログインせず手元で把握できる。
GitHubのリポジトリ（steipete/CodexBar）からダウンロードして試せる無料のMacアプリなので、Claude CodeやCodexを普段使いしている人はまず入れてみるとよい。

読了 2分

バイブコーディング2026.07.07

Claudeに動画を「見せる」ツールが話題

GitHubで4,000スター超えのOSSツール「claude-video」が公開され、動画URLを渡すだけでダウンロード・フレーム抽出・文字起こしをまとめてClaudeに渡せるようになった。
動画広告やYouTube競合調査・インタビュー動画の要約など、これまでテキストや画像でしかAIに投げられなかった作業が、動画ごと投げ込む形に切り替えられる点が注目どころ。
GitHubのREADMEにPythonでの導入手順が記載されているので、Pythonが多少触れる人なら `/watch [URL]` のコマンド一本から試し始められる。

読了 2分

複数のAIエージェントをターミナル一画面で束ねる管理ツールのミニチュア紙工作イメージ

バイブコーディング2026.07.06

ターミナルで複数AIエージェントを束ねるツール

「herdr」はターミナル上で複数のAIエージェントを一元管理できるRust製ツールで、GitHubで約1.2万スターを集めている。
複数のAIエージェントを並列に動かしたい場合、これまでは画面を行き来する必要があったが、このツールを使うとターミナル1画面で束ねて制御できる。
GitHubのリポジトリ（ogulcancelik/herdr）からすぐに試せるので、バイブコーディングで複数エージェントを使い分けている人はまず動作確認から始めてみるとよい。

読了 2分

バイブコーディング2026.07.05

ブラウザをAIが操作する時代、3つの動きを整理

AlibabaがオープンソースでWebページをAIが自然言語で操作できるライブラリを公開し、GitHubで2.3万スターを集めるほど注目されている。
GoogleのAIエージェント構築キット（ADK）とAlibabのページ操作ライブラリが同時期に台頭しており、「AIが代わりにブラウザを触る」仕組みを自分で組める環境が整いつつある。
Claude Codeの活用リソース集（awesome-claude-code）を起点に、バイブコーディングの実践パターンを探してみると、自分のプロジェクトへの応用イメージが掴みやすい。

読了 2分

AIエージェントと連携するMetaのオープンソースデザインシステムAstryxをミニチュア紙工作で表現

バイブコーディング2026.07.04

Metaが公開：AIと組み合わせて使えるデザイン部品集

MetaがオープンソースのデザインシステムAstryxを公開。TypeScript製で、AIエージェントと連携して動作する設計になっている。
注目したいのは「agent ready」という設計思想で、AIにUIの組み立てを任せることを前提に部品が整理されている点。バイブコーディングでLP・管理画面などを丸ごと生成する際の土台として使える可能性がある。
GitHubのリポジトリ（facebook/astryx）からすぐ確認できるので、CursorやClaudeでUI生成を試している人は、このデザインシステムを読み込ませた上でコンポーネント生成を頼んでみるところから始められる。

読了 2分

ミニチュア紙工作で表現したチーム向けClaudeコードゲートウェイの一元管理構成

バイブコーディング2026.07.03

チームでClaude Codeを使うなら、ゲートウェイを立てる

AnthropicのAIコーディングツール「Claude Code」をチーム全体で使う際に、認証・コスト管理・利用制限を一元管理できる「Claude apps gateway」がGoogle Cloud向けに公開された。
従来は開発者ひとりひとりにクラウド認証情報を配布・管理する必要があったが、ゲートウェイを経由させることで、誰がどれだけ使ったかの把握や使いすぎの制御が組織レベルで行えるようになる。
試したい人は、公式ドキュメント「Claude apps gateway on Google Cloud」のウォークスルーに沿って、既存のclaudeバイナリからそのままセットアップを始められる。

読了 2分

バイブコーディング2026.06.28

自分だけのクラウドを自宅サーバーで作る

オープンソースの「CasaOS」を使うと、古いPCやRaspberry Piをそのまま自前のクラウドサーバーに変換でき、DropboxやGoogleドライブの代替環境をゼロ月額で構築できる。
インストールはコマンド1行で完了するとドキュメントに記載されており、Webブラウザから管理画面を操作できるため、サーバー管理の専門知識がなくても運用できる設計になっている。
余っているWindowsやLinuxの端末があれば今すぐ始められ、公式サイト（casaos.io）からインストールスクリプトとセットアップ手順を確認するのが最初の一歩。

読了 2分

バイブコーディング2026.06.27

「git push」でミスをなかったことにできるツール

「no-mistakes」はコードをプッシュする前に自動でミスを検出・修正提案するGitツールで、3,000以上のスターを集めて注目されている。
バイブコーディングでAIが生成したコードをそのまま上げがちな人ほど、うっかりミスのセーフティネットとして知っておく価値がある。
GitHubページからリポジトリを確認し、Goがインストール済みであれば手元の開発環境に導入を試してみるところから始められる。

読了 2分

バイブコーディング2026.06.25

コマンド一発でサイトを丸ごとコピー

AIコーディングエージェントを使い、URLを指定するだけで既存サイトの構造・デザインを複製するテンプレートがGitHubで公開されています。
使う側として知っておくべきは、これがゼロからの設計ではなく『参照元を渡して再現させる』アプローチである点で、LPや競合サイトの構成を素早く試作する用途に向いています。
始めるなら、GitHubリポジトリ（ai-website-cloner-template）をクローンし、READMEに記載されたコマンドに複製したいサイトのURLを渡すところから試せます。

読了 2分

バイブコーディング2026.06.24

AWSがAIエージェント向け公式ツールキットを公開

AWSが、AIエージェントからAWSのサービスを操作・構築できる公式ツールキット「agent-toolkit-for-aws」を公開した。MCP（AIとツールをつなぐ規格）に対応したサーバーやプラグインが含まれる。
これまでAIにAWSを触らせるには非公式の工夫が必要だったが、AWS自身が公式サポートする形でエージェント連携の土台を整備し始めた点が注目ポイント。自分でインフラを動かす人にとってAIの指示一本で操作できる範囲が広がる。
PythonとGitHubが触れる人なら、公式リポジトリ（github.com/aws/agent-toolkit-for-aws）からすぐ試し始められる。まずREADMEのQuickstartを読んで、どのサービスに対応しているか確認するところから始めるのがおすすめ。

読了 2分

HTMLコードから動画が自動生成される仕組みをミニチュア紙工作で表現したジオラマ

バイブコーディング2026.06.23

HTMLを書くだけで動画が出力される時代へ

HeyGenがオープンソース公開した「HyperFrames」は、HTMLとCSSで動画フレームを記述するだけでエージェントが動画を自動生成できるライブラリで、GitHubで約3万スターを集めている。
注目したいのは、動画制作の工程を「コードで定義できる」点で、LPや広告動画をAIエージェントに量産させる仕組みを自分で組める可能性が開いている。
触りたい人は公式リポジトリ（heygen-com/hyperframes）のREADMEからTypeScriptでのサンプル構成を確認するところから始めると、全体像がつかみやすい。

読了 2分

AIエージェントの記憶を象徴するペーパークラフトのナレッジグラフとノード接続のミニチュアジオラマ

バイブコーディング2026.06.22

AIエージェントに「記憶」を持たせるOSSが話題

「cognee」はAIエージェントがセッションをまたいで会話や知識を記憶し続けるための自前サーバー型ナレッジグラフエンジンで、スター数1.8万超えのOSSとして注目されている。
使う側として知っておくべきは、APIに都度コンテキストを渡す運用から脱却し、エージェント自体が文脈を蓄積・参照できる設計に移行できる点で、複数工程を自動化したい場面で差が出やすい。
始めるなら、公式GitHubのREADMEにPythonでのセットアップ手順が記載されているので、まずローカル環境で立ち上げてエージェントへの記憶の読み書きを試してみると動きが掴みやすい。

読了 2分

AIエージェントがアプリを自律操作する新設計フレームワークをミニチュア紙工作で表現

バイブコーディング2026.06.20

AIエージェントに対応したアプリ設計の新フレームワーク登場

BuilderIOが公開した「agent-native」は、AIエージェントがアプリの操作を直接担えるよう設計された新しいアプリ構築の枠組みで、GitHubで約1,000スターを集めている。
従来のUI操作前提の設計とは異なり、エージェントが自律的にアクションを判断・実行できる構造をアプリ側に持たせる発想で、「人が操作する前提」から「AIが動かす前提」への設計思想の転換を示している。
TypeScriptで書かれており、公式リポジトリ（github.com/BuilderIO/agent-native）のREADMEから構造を確認し、自分が作っているLPやツールにエージェント対応の設計を取り入れるヒントを探してみるところから始められる。

読了 2分

バイブコーディング2026.06.19

Claude Codeで作ったサイトをそのまま共有できるように

Claude Codeで作成したWebサイトを、そのまま外部に共有できる機能が追加された。
コードを別途デプロイする手間なく、作ったものをすぐ見せられる状態になる点が注目で、制作から共有までの流れがワンストップに近づいている。
LPや簡単なツールをAIで作って即クライアントや仲間に見せたい人は、Claude Codeの共有機能から試してみる価値がある。

読了 2分

紙工作で表現されたアプリ開発の場面：ミニチュアの机とパズルピースが組み合わさるジオラマ

バイブコーディング2026.06.18

未経験でもアプリが作れる時代、何が変わったか

プログラミング未経験の同人作家がClaudeだけで公募検索アプリを完成させた事例が公開され、コードも配布されている。
「書けなくても作れる」が現実になりつつある今、重要なのは何を作るかという目的の解像度であり、コードの知識よりも要件を言語化する力が問われる。
同じようにアプリ作りを始めたい人は、公開されている完成コードを出発点にClaudeへ「こう変えたい」と追加指示を出すところから試してみるのが近道。

読了 2分

バイブコーディング2026.06.17

Claude Codeが1,000体のAIを自律で動かす時代へ

Claude Codeの新機能「Dynamic Workflows」により、依頼内容に応じてAI自身が作業フローをその場で組み立て、最大1,000体のAIを並列で走らせながら検証まで完結できるようになった。
使う側として知っておくべきは、指示を出せば細かい工程管理はAIが担う設計になっている点で、バイブコーディングの「とりあえず投げる」スタイルがそのまま通用しやすくなっている。
触りたい人はClaude CodeのOpus対応プランから試せるので、まず小さなタスクを丸投げする形で動作感を確かめてみるのが入り口として現実的。

読了 2分

バイブコーディング2026.06.16

SaaSを使う側から、作る側へ転換する動き

Claude CodeやCodexを使い、コードの専門知識なしに自分専用アプリを月額内で完結させる実践者が増えている。
@id_1928611225535131650 や @shota7180 らの発信に共通するのは「既存SaaSに課金し続けるより、AI支援で自作する方がコスパが出る」という実体験の報告だ。
家計簿や業務効率化アプリなど小さな用途から始め、Claude CodeまたはCodexに相談しながら一つ作り切ることが、最初の一歩として勧められている。

読了 2分

ミニチュア紙工作で表現したCodexサブエージェントの並列処理とマルチエージェント戦略

バイブコーディング2026.06.15

Codexのサブエージェント、指示次第で速度が変わる

AIコーディングツールの並列処理能力に注目が集まっており、@id_113598297によるとClaude Codeが50並列動作する一方、CodexはサブエージェントをPromptで明示的に指定しないと並列化が始まらない仕様であることが実践者の間で話題になっている。
@masahirochaenが指摘するように、AIサービスは自分のミスと無関係に突然停止するリスクがあるため、Codex・Claude Codeなど複数ツールを使い分ける「マルチエージェント戦略」が使う側の視点として重要になっている。
Codexを使い始めるなら、タスクを投げる際に「サブエージェントを使って」と明示的に指示することで並列処理が有効化されるため、まずその一文を加えた指示を試してみるところから始めてみたい。

読了 2分

紙工作のミニチュアジオラマで表現されたAIコーディングのコンテキスト最適化ツールの概念図

バイブコーディング2026.06.14

AIコーディングの「無駄なコンテキスト」を削る新ツール

コードベース全体を事前にマッピングし、AIコーディングツールが本当に必要な箇所だけを読み込めるようにするローカル動作のツール「code-review-graph」が注目を集めている。
AIにコード全体を読ませると精度が落ちたりコストがかさむ問題があるが、このツールはコンテキスト量を大幅に削減できると公式ドキュメントに記載されており、大規模リポジトリでの効果が特に高いとされている。
CLIとMCP（=AIツールとの連携インターフェース）の両方に対応しているので、Claude CodeやCursorなどすでに使っているAIコーディング環境にそのまま組み込んで試してみるとよい。

読了 2分

バイブコーディング2026.06.13

Claude Codeで「コードを書く人」から「指示する人」へ

Claude Codeは、チャットで指示するだけでコードの生成・修正・実行まで一貫して行えるAIエージェントで、プログラミング経験が浅くても「動くものを作る」ことが現実的になっている。
使う側として知っておくべきは、Claude Codeのようなコーディングエージェントは「書く作業の代行」ではなく「何を作るかを決める人が主役」という構造になっている点で、指示の精度が成果物の質を左右する。
始めるなら、公式の入門動画からClaude Codeの基本操作を一通り確認し、LPや簡単なツール作成など自分のプロジェクトに当てはめて試してみるのが最短ルートです。

読了 2分

バイブコーディング2026.06.12

Appleが出したコンテナツール、Macで即動く

AppleがMac上でLinux環境を手軽に起動・管理できるコンテナツール「container」をオープンソースで公開し、Appleシリコン向けに最適化されている。
注目したいのは、これまでDockerなど外部ツールに頼っていたMacでのLinux実行環境が、Apple公式の軽量な仮想化で代替できる可能性が生まれた点。
GitHubのリポジトリ（apple/container）からすぐ試せるので、バイブコーディングの実行環境を手元に整えたい人はまずスターを打って中身を確認しておくといい。

読了 2分

バイブコーディング2026.06.11

NotionがAIで1人でも開発チーム並みに動く仕組み

OpenAIのCodexをNotionが社内導入し、仕様書の自動生成やAI音声入力機能の開発を少人数チームで完結させていることが公式ブログで明かされた。
注目したいのは、設計書を渡せばコードの初稿まで一気通貫で出力する「ワンショット開発」の流れで、営業から制作まで自分でこなすスタイルと相性がいい。
同じ流れを手元で試したい場合、OpenAIのCodexやCursorに「仕様→コード」のプロンプトを渡すところから始めると、Notionの事例に近い感覚をつかめる。

読了 2分

バイブコーディング2026.06.09

AIスキルをチームで管理・販売できるツールが登場

Claude CodeやCodexなど複数のAIエージェントに蓄積されたスキルを一元管理・可視化・販売できるプロダクト「Skillmart」が開発中で、チームでのスキル共有という課題に応える設計になっている。
AIを使い倒すほどスキルが各ツールに点在して把握しきれなくなる問題は多くの実践者が直面しており、管理の仕組みを持つかどうかがチーム活用の分岐点になる。
個人・チームでAIスキルの棚卸しをしたい人は、公開されているSkillmartの情報をチェックしつつ、まず自分が使っているAIツールのスキルリストを手元で書き出すところから始めてみると整理しやすい。

読了 2分

バイブコーディング2026.06.08

プロンプトより「AIの仕事の流れ」を設計する時代へ

Claude Codeの開発者によると、AIの使い方はコード補完から「自律的に計画・実行・検証するループの設計」へと移行しつつある。
使う側として知っておくべきは、良い指示を書くスキルより、AIが迷わず動ける「判断の仕組みと流れ」を整えるスキルの比重が高まっているという点。
自分のプロジェクトでAIに任せたいタスクを洗い出し、「判断基準・実行順・確認タイミング」をあらかじめ言語化してから指示を出す練習から始めてみよう。

読了 2分

ミニチュア紙工作で表現したSvelteのシンプルなコード構造とインタラクティブな学習環境

バイブコーディング2026.06.07

バイブコーディングのWeb制作、Svelteで変わること

SvelteはAIが生成するコードとの相性がよく、HTMLに近い直感的な構文でLP・ランディングページ・Webアプリをシンプルに書ける設計になっている。
ReactやVueより記述量が少ないため、AIに「Svelteで書いて」と指示するだけでも読み解きやすいコードが返ってきやすく、修正・改変の判断がしやすい。
公式サイト（svelte.dev）のインタラクティブチュートリアルから始めると、ブラウザ上だけでコードを動かしながら構造を把握できる。

読了 2分

紙工作のノートPCと打ち上げロケットで表現されたWebアプリ作成・公開のミニチュアジオラマ

バイブコーディング2026.06.06

ChatGPTでWebアプリを作って公開できるようになった

OpenAIのChatGPTに、Webアプリをその場で作成・公開できる機能が追加された。コードを別途用意しなくても、会話だけでアプリが完成する。
使う側として知っておくべきは、これがいわゆる「バイブコーディング」の入口として最も敷居が低い選択肢になったという点。エディタやホスティングサービスの知識がなくても、ChatGPTの画面だけで完結する。
触りたい人は、ChatGPTのチャット画面から「〇〇を表示するWebアプリを作って公開して」と話しかけるところから始めてみるとよい。

読了 2分

バイブコーディング2026.06.05

AIを1000体並列起動、Claude Codeが自走する

Claude Codeの最新版に追加された「Dynamic Workflow」機能により、最大1,000のAIエージェントを並列で走らせ、互いに検証し合いながら1時間以上自律的に作業を継続できるようになった。
使い方はシンプルで、「ultracode で○○をやって」「workflow で△△をレビューして」と自然な指示を打ち込むだけで、複雑な設定なしにワークフローが自動起動する設計になっている。
試したい場合はClaude Codeを最新版にアップデートするだけで使えるようになるので、まずLPのコピー作成やコードレビューなど、普段やっている作業をそのまま投げてみるところから始めてみよう。

読了 2分

コードなしでWebサイトが自動生成されるバイブコーディングの世界を表すミニチュア紙工作

バイブコーディング2026.06.04

コードを書かずにサイトが動く時代へ

OpenAIが2026年6月2日にCodexの新機能「Sites」を発表。コードを書かずにWebサイトを生成・公開できる機能がBusiness/Enterpriseプランでプレビュー提供されており、バイブコーディングの敷居がさらに下がっている。
複数の発信者（@shota7180、@masahirochaen）が整理しているように、Sitesに加えて職種別プラグインやannotations拡張も同時リリースされており、「作る・共有する・改善する」の一連の流れがCodex単体で完結しつつある。
まず公式ドキュメントとSitesのプレビュー申請を確認し、LPや簡単なツールページをプロンプトだけで作る体験から始めてみると、自分の用途に合うかどうかが見えてくる。

読了 2分