<p data-line="0" class="code-line">こんにちは！React Tokyo サポートメンバーの前田です。</p>
<p data-line="2" class="code-line"><a href="https://discord.com/invite/5B9jYpABUy" target="_blank" rel="nofollow noopener noreferrer">React TokyoのDiscordサーバー</a>では、Reactに関する最新技術の動向から、日々の開発で直面する具体的な課題まで、メンバー間で活発な情報共有が行われています。</p>
<p data-line="4" class="code-line">React Tokyo トレンドレポートでは、Discordサーバー内の情報・質問スレッドで盛り上がったトピックを定期的にまとめてお届けしています。</p>
<p data-line="6" class="code-line">今回は領域関係なく話題が沸騰しているバイブコーディングのスレッドに注目してみたいと思います。</p>
<h1 id="%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AF" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AF" aria-hidden="true"></a> バイブコーディングとは</h1>
<p data-line="10" class="code-line">バイブコーディングは、AIを活用した新しいプログラミング手法として注目されています。</p>
<h2 id="%E4%B8%BB%E3%81%AA%E7%89%B9%E5%BE%B4" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%BB%E3%81%AA%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 主な特徴</h2>
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">
<strong>AIとの協働</strong>: AIアシスタントと対話しながら開発を進める</li>
<li data-line="15" class="code-line">
<strong>直感的なアプローチ</strong>: 感覚や直感を重視した開発スタイル</li>
<li data-line="16" class="code-line">
<strong>効率性</strong>: 従来のコーディングよりも迅速な開発が可能</li>
<li data-line="17" class="code-line">
<strong>創造性</strong>: 技術的な詳細よりもアイデアに集中</li>
</ul>
<h2 id="%E5%BE%93%E6%9D%A5%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E5%BE%93%E6%9D%A5%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> 従来のコーディングとの違い</h2>
<ul data-line="21" class="code-line">
<li data-line="21" class="code-line">
<strong>従来のアプローチ</strong>: コードの詳細を丹念に理解して開発</li>
<li data-line="22" class="code-line">
<strong>バイブコーディング</strong>: AIとの対話を通じた直感的な開発</li>
</ul>
<h1 id="%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89" aria-hidden="true"></a> バイブコーディングのスレッド</h1>
<p data-line="26" class="code-line">バイブコーディングの細かい定義はおいておいて、AI等を使ってコーディングが大幅に変わっていく潮流について議論するスレッドです。</p>
<h2 id="%E5%85%B7%E4%BD%93%E7%9A%84%E3%81%AA%E8%AD%B0%E8%AB%96%E5%86%85%E5%AE%B9" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E5%85%B7%E4%BD%93%E7%9A%84%E3%81%AA%E8%AD%B0%E8%AB%96%E5%86%85%E5%AE%B9" aria-hidden="true"></a> 具体的な議論内容</h2>
<h3 id="%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E5%AE%9F%E8%B7%B5%E4%BD%93%E9%A8%93" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E5%AE%9F%E8%B7%B5%E4%BD%93%E9%A8%93" aria-hidden="true"></a> バイブコーディングの実践体験</h3>
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line">
<strong>Yourware</strong>: 世界初のバイブコーディングコミュニティの体験談
<ul data-line="33" class="code-line">
<li data-line="33" class="code-line">チャットである程度のアプリケーションを作成可能</li>
<li data-line="34" class="code-line">中身のコードが見えないため、エンジニア向けではない</li>
<li data-line="35" class="code-line">シフト管理システムの作成例を共有</li>
</ul>
</li>
</ul>
<h3 id="%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%A7%A3%E9%87%88" data-line="37" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%A7%A3%E9%87%88" aria-hidden="true"></a> バイブコーディングの解釈</h3>
<ul data-line="39" class="code-line">
<li data-line="39" class="code-line">
<strong>ユーモアのある解釈</strong>: 「プログラマーは通知のバイブ来たらクリックするだけ」(ちなみに私はバイブコーディングすると心が震える、振動するという意味でバイブかと思いました。)</li>
<li data-line="40" class="code-line">
<strong>Agent操作の実態</strong>: 通知が来る→許可する→クリックするの繰り返し</li>
<li data-line="41" class="code-line">
<strong>バイブス重視</strong>: 細かい定義よりも感覚的なアプローチを重視</li>
</ul>
<h3 id="%E9%96%A2%E9%80%A3%E5%8B%95%E7%94%BB%E3%83%BB%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E5%85%B1%E6%9C%89" data-line="43" class="code-line">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3%E5%8B%95%E7%94%BB%E3%83%BB%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E5%85%B1%E6%9C%89" aria-hidden="true"></a> 関連動画・リソースの共有</h3>
<ul data-line="45" class="code-line">
<li data-line="45" class="code-line">
<strong>Programmers are also human</strong>: 2025年のバイブコーダーへのインタビュー</li>
<li data-line="46" class="code-line">
<strong>Claude 4の紹介</strong>: Theo氏によるClaude 4の評価動画</li>
<li data-line="47" class="code-line">
<strong>バイブコーディング批判</strong>: 「Vibe Coding Is A Stupid Trend」への反応</li>
</ul>
<h3 id="%E8%A9%B1%E9%A1%8C%E3%81%AB%E4%B8%8A%E3%81%8C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%9F%E6%8A%80%E8%A1%93%E3%83%BB%E3%83%84%E3%83%BC%E3%83%AB" data-line="49" class="code-line">
<a class="header-anchor-link" href="#%E8%A9%B1%E9%A1%8C%E3%81%AB%E4%B8%8A%E3%81%8C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%9F%E6%8A%80%E8%A1%93%E3%83%BB%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 話題に上がっていた技術・ツール</h3>
<ul data-line="51" class="code-line">
<li data-line="51" class="code-line">
<strong>Yourware</strong>: 初心者向けAIコーディングエージェント</li>
<li data-line="52" class="code-line">
<strong>Next.js + Material UI</strong>: シフト管理システムの技術スタック</li>
<li data-line="53" class="code-line">
<strong>AI-assisted coding vs. vibe coding</strong>: 従来のAI支援コーディングとの違い</li>
</ul>
<h3 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" data-line="55" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 参考リンク</h3>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__78188dab44256" src="https://embed.zenn.studio/card#zenn-embedded__78188dab44256" data-content="https%3A%2F%2Fwww.yourware.so%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__bb3fc50870fd" src="https://embed.zenn.studio/card#zenn-embedded__bb3fc50870fd" data-content="https%3A%2F%2Fyoutu.be%2FJeNS1ZNHQs8%3Fsi%3D6B7575Hpu96SqZPl" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fb84a6bd4d22" src="https://embed.zenn.studio/card#zenn-embedded__fb84a6bd4d22" data-content="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DW5tBfYIhWok" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ccac0d182e9d9" src="https://embed.zenn.studio/card#zenn-embedded__ccac0d182e9d9" data-content="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D7ePiGthZq2w" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__41d6eeedfcbdd" src="https://embed.zenn.studio/card#zenn-embedded__41d6eeedfcbdd" data-content="https%3A%2F%2Ftnxvr3xnjx.app.yourware.so%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="63" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="65" class="code-line">今回のトレンドレポートでは、React TokyoのDiscordサーバーで盛り上がったバイブコーディングのスレッドの話題を取り上げました。</p>
<p data-line="67" class="code-line">バイブコーディングスレッドでは、AIを活用した新しいプログラミング手法について活発な議論が交わされました。Yourwareなどのツールを実際に試した体験談や、バイブコーディングの解釈についてユーモアのある意見も出るなど、技術的な話題だけでなく、開発手法の変化に対する様々な視点が共有されました。</p>
<p data-line="69" class="code-line">これらの議論を通じて、React TokyoのDiscordサーバーが、最新技術の動向を共有し、実践的な知見を交換する場として機能していることが改めて確認できました。初心者からエキスパートまで、様々なレベルのメンバーが参加できる環境で、AI時代の開発手法について学び合えることが、このコミュニティの大きな価値です。</p>
<p data-line="71" class="code-line">もし少しでも気になる部分があれば、バイブコーディングスレッドにご参加ください！</p>
<p data-line="73" class="code-line">ちなみにこの記事はほぼバイブコーディングで書きましたww ここの段落とバイブコーディングの解釈だけ自分で書きました。<br>
こういう方向性があるんだけど何かに出力するのが難しいときは本当に捗りますねw 記事から私のバイブスが伝わってくれたら幸いです。</p>
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" data-line="76" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h1>
<p data-line="78" class="code-line">今回ご紹介した議論に興味を持たれた方、Reactについてもっと深く語り合いたい方は、ぜひReact TokyoのDiscordサーバーへお越しください！初心者の方からエキスパートの方、エンジニア以外の職種の方までどなたでも大歓迎です！</p>
<p data-line="80" class="code-line">また、React TokyoのWebサイトもありますので、是非ご覧ください。</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c1a6fe99b8b78" src="https://embed.zenn.studio/card#zenn-embedded__c1a6fe99b8b78" data-content="https%3A%2F%2Fdiscord.com%2Finvite%2F5B9jYpABUy" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__40089580f18bf" src="https://embed.zenn.studio/card#zenn-embedded__40089580f18bf" data-content="https%3A%2F%2Freact-tokyo.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>


React Tokyo トレンドレポート #8 バイブコーディングのスレッド

バイブコーディングの実践体験

話題に上がっていた技術・ツール

バイブコーディングのスレッド

Discussion