7つのAIプログラミングツールの比較
本章のガイド
数多くあるAIプログラミングツールの中で、どれが自分に一番合っているのでしょうか?本章では、統一された実践タスク——「スネークゲーム + AIで詩を作る」ゲームの開発——を通じて、Lovable、Replit、Z.aiなど7つの主要なWeb Vibe Codingプラットフォームを深く横断的に評価します。初心者へのやさしさ、コードの制御性、デプロイの便利さなど、複数の観点から比較し、あなたに最適な開発支援ツールの選び方をご案内します。
1. Vibe Codingでスネークゲームを作る:完全実践チュートリアル
本記事では、「Vibe Coding(雰囲気コーディング)」と呼ばれる新興のソフトウェア開発手法についてご紹介します。これは人工知能を活用してアプリケーション構築プロセスを加速させる手法です。
続いて、Vibe Codingの核心的な概念、AI Agentとは何かを説明し、実用的なプロンプトの書き方をご紹介します。最後に、ゼロから「スネーク(Snake)」ゲームを構築する完全な実践を通じて、複数の主要なVibe Codingプラットフォームを詳しく比較評価し、自分に最も適したツールの組み合わせを選べるようにします。
ここで学べる内容:
- Vibe Codingとは何か: 定義、ワークフロー、そして主な利点について理解します。
- AI Agentの役割: AI Agentの動作方式、および従来のプログラムとの違いを理解します。
- プロンプトの上手な書き方: 明確で具体的なプロンプトの書き方を身につけ、より良い結果を得られるようになります。
- Vibe Codingツール: 主要なAIプログラミング・デザインプラットフォームを知ります。
- プラットフォームの比較: 初心者の視点から、7つの異なるAI Agentプラットフォームの長所と短所を評価・比較します。
- UI / UXツール: Figma、MastergoなどのUI/UXツールを全体のワークフローに組み込む方法を学びます。
1. はじめに
これまでのレッスンでは、z.aiのフルスタック開発モデルを使ってプログラミングタスクを進めてきました。
しかし、その核心が「AI Agent」であることはご存知でしょうか?(一般的なチャット式AIとは異なり、ずっとスマートです。)なぜなら、単に会話するだけでなく、思考(タスクを与えると、まず計画を立てます)し、自発的に行動(例えば、Web検索、PCコマンドの実行、Webページを開くなどのツールを呼び出す)できるからです。詳しくは後ほど説明します。
1. Vibe Codingとは何か?
Vibe Codingとは、AIを活用してアプリケーション開発プロセスを加速させる新しいソフトウェア開発手法です。従来のプログラミングの代替ではなく、より「対話型」のプログラミングモードと言えます。この概念はAI研究者のAndrej Karpathy氏によって提唱されました。このワークフローでは、開発者はコードを一行ずつ手書きするのではなく、主にAI Agentを誘導してアプリケーションの生成、最適化、デバッグを行います。
Vibe Codingの核心的な考え方は、「コード中心(code-first)」から「意図中心(intent-first)」への転換です。もう最初の一行からコードを考える必要はなく、自然言語で期待する結果を記述するだけで済みます。
典型的なVibe Codingのワークフローは、継続的なイテレーションのサイクルです:
- 目標を記述する: まず一文または一段落で実現したい機能を記述します。例:「Pythonバックエンド付きで、詩を生成できるシンプルなスネークゲームを作って。」
- AIがコードを生成: AI Agentがあなたのニーズを解析し、基本構造、フロントエンドページ、バックエンドロジックを含む初版コードを生成します。
- 実行して確認: 生成されたコードを実行し、期待通りに動作するか確認します。同時にバグや不十分な点を見つけます。
- フィードバックして反復: エラーや期待通りの結果でない場合は、チャットで引き続き指示を出します。例:「蛇の移動が遅すぎるので、速度を上げてください」や「
.envファイルのAPI Keyが正しく読み込まれていません。バックエンドコードを修正してください。」 - 上記の手順を繰り返す: 「記述 → 生成 → 実行 → フィードバック」のサイクルで継続的にイテレーションし、アプリケーションが満足できる状態になるまで続けます。
Vibe Codingの主な利点:
- 敷居を下げる: プログラミング経験のないデザイナー、起業家、学生なども、自然言語でアプリケーション開発に参加できるようになります。
- 迅速なプロトタイピング: アイデアから最小viable製品(MVP)までの時間が大幅に短縮されます。
- 効率の向上: テンプレートコードなど、大量の反復的・機械的なコーディング作業を自動処理し、開発者がアーキテクチャ設計や問題の抽象化に注力できるようにします。
- 実験に有利: まず迅速に成果物を作り、その後継続的に改良していくアプローチを奨励し、新しいアイデアや機能の試行がしやすくなります。
2. Vibe Codingオンラインプラットフォーム(Web-based)とは何か?
今回の実測では、評価するツールがWeb-based(オンラインプラットフォーム)とIDE(ローカル開発環境)の2つのカテゴリーに分かれていることがわかります。
どちらも基本的にはAIにコードを書かせる仕組みですが、使用感と適用シーンには大きな違いがあります:
Vibe Codingオンラインプラットフォーム (Web-based)
代表的なツール: Lovable, Replit, Z.ai, v0
「荷物を持ってすぐ入居できる」サービス付きマンションのようなものです。
- 環境設定不要: Python環境やNode.jsのバージョン、依存パッケージのインストールなどを気にする必要はありません。ブラウザを開いてURLを入力するだけで、すぐにコーディングを始められます。
- ワンクリックプレビューとデプロイ: コードが生成されると、プラットフォームは通常、右側のウィンドウに自動的に実行結果を表示します。完成したら、ボタン一つでリンクを生成して友人に共有できます。
- 適したシーン:
- アイデアの迅速な検証(MVP): 頭の中にアイデアがあり、30分程度で試してみたい場合。
- 初心者の入門: 複雑な環境エラーで挫折したくなく、AIプログラミングの楽しさを体験したい場合。
- 軽量アプリケーション: シンプルなツールWebページ、ミニゲーム、個人ポートフォリオページなど。
AI IDE (ローカル開発環境)
代表的なツール: Cursor, Trae, VS Code + AIプラグイン
「内装付き」の持ち家のようなものです。
- 強力なローカル能力: お使いのコンピュータ上で動作し、すべてのローカルファイルに直接アクセスでき、コンピュータの計算リソースを活用できます。
- プロのワークフローとシームレスに連携: 大規模プロジェクトに適しており、各種プラグインを自由にインストールし、ローカルデータベースに接続し、複雑なデバッグが可能です。
- 適したシーン:
- プロジェクト開発: 長期メンテナンスが必要で、構造が複雑な商業プロジェクト。
- 深いカスタマイズ: コードの細部を極限まで制御したい場合や、既存のローカルワークフロー(Git、Dockerなど)と深く統合する必要がある場合。
- データプライバシー: コードが完全にローカルにあり、企業のセキュリティ規範により適合します。
まとめると: AIプログラミングに触れ始めたばかりの方や、手軽に小さなものを作ってみたい場合は、オンラインプラットフォームが素晴らしい出発点です。プロの開発者の方や、プロジェクトが徐々に複雑になってきた場合は、ローカルIDEの方がより高い上限を提供してくれます。
3. AI Agentとは何か?
AI Agentとは何か?
AI Agentとは、環境を認識し、意思決定を行い、特定の目標を達成するために自発的に行動できるソフトウェアシステムです。固定された指示に従い、単一のフローしか持たない従来のソフトウェアと比較して、AI Agentはより柔軟で適応性に優れています。
AI Agentを従来のプログラムと区別する主な特徴は以下の通りです:
- 自律性(Autonomy): AI Agentは高い独立性を持っています。従来のプログラムは通常、人間が一歩一歩トリガーする必要がありますが、Agentは目標に基づいて次に何をすべきかを自ら判断できます。
- 知覚と記憶(Perception & Memory): Agentは環境からデータを収集し(例:APIレスポンス、センサーデータ、ユーザー入力など)、「記憶」を通じてコンテキストを保持し、その後の行動で経験を再利用し、効果を継続的に改善します。
- 合理性と目標志向(Rationality & Goal-Orientation): Agentは与えられた目標に基づいて分析と計画を行い、より高い「パフォーマンス指標」を追求するために最適な行動シーケンスを選択します。
- ツールの使用(Tool Use): 近年のAI Agentの大きな特徴は、外部ツールを呼び出すことができ、「テキストの生成」にとどまらないことです。例えば、Webページの閲覧、コードの実行、データベースのクエリ、メールの送信などが可能で、「ツールを調整する」頭脳と言えます。
このように例えて理解できます:
- 従来のプログラムは計算機のようなものです。数字と演算子を入力すると、ボタンを押した時にだけ計算を実行します。
- AIアシスタントは人間のアシスタントのようなものです。「近くのレストランを探して」と頼むと、検索結果を表示し選択肢を提示しますが、最終的な決定はあなたが行います。
- AI Agentは自動化された研究チームのようなものです。あなたは上位の目標(例:「日本旅行の計画を立てて」)を与えるだけで、Agentがタスクを分解し、インターネットで情報を調べ、航空券やホテルを予約し(API経由)、スケジュールを整理し、最終的に結果を届けてくれます。プロセスの細部にほとんど介入する必要はありません。
2. プロンプトの書き方について
1. プロンプトは一度に書き上げる方が良いか、それとも複数ステップに分ける方が良いか?
多くの人は、「完全なフルスタックアプリケーションを作る」ことを一つのプロンプトで一度にまとめたくなるでしょう。事実、現在のツールは十分に強力であり、一見それなりの結果を一度に出すことも可能です。しかし、全体的な体験と成功率から見ると、作業を小さなステップに分け、段階的にイテレーションする方が、結果的に良い成果が得られやすく、「どうしても変えられない」という行き詰まりに陥りにくくなります。
ヒント: 「一発で完璧」を期待するより、大きな目標を一つずつ実行可能な小さなTo-doに分割しましょう。 例えば、「build me a Snake game」と直接言うのではなく、以下のように分けます: 「1. まずスネークゲームのフロントエンドを作る」、 「2. 次にスコアを記録するバックエンドを実装する」、 「3. 最後にフロントエンドとバックエンドを繋ぐ」。 こうすることで、AIがあなたのニーズをより正確に理解し、より信頼性の高い出力を提供してくれます。
2. 明確であればあるほど良い
- Vibe Codingでは、あなたが書くプロンプトはコードと同じくらい重要です。プロンプトが明確で具体的であればあるほど、結果はあなたのイメージに近づきます。
- 最初に目標と制約条件を明確にしておけば、後の修正の回数を減らすことができます。これは時間の節約になるだけでなく、使用量とコストの節約にもなります。
3. ツールの概要(Vibe Coding / UIUXツール)
1. AI Agentプラットフォーム
| Name | Platform |
|---|---|
| Lovable | Web-based |
| Cursor | PC |
| Z.ai | Web-based |
| Replit | Web-based |
| Minimax | Web-based |
| Trae | PC |
| V0 | Web-based |
2. AI UIUXプラットフォーム
| Name | Platform |
|---|---|
| Mastergo | Web-based |
| FIgma | Web-based, PC Plugin |
4. 実践チュートリアル(Vibe Coding + UIの組み合わせ)
Vibe Codingを行うプラットフォームのチャットウィンドウで、作りたいプログラムの説明を入力します。 例:
フロントエンドとバックエンドを備えたシンプルなスネーク(Snake)Webアプリケーションを構築してください。
- フロントエンド
- ページ1:ゲームページ
- キーボードで蛇の移動を操作します。
- 蛇が食べるのは食べ物ではなく、英単語です。
- ページのサイドバーに収集済みの単語とその数を表示します。
- ゲームオーバー後も、収集済みの単語は保持され、新しいゲームにも引き継がれます。
- ページ2:詩を作るページ(Make Poem)
- ゲームページと同じ単語リストを表示します(データは同一)。
- ボタンを提供し、現在収集している単語をバックエンドに送信して詩を生成します。
- 詩の生成後、使用された単語をリストから削除またはカウントを減らします。
- GameとMake Poemの2つのページ間を切り替えるためのシンプルなナビゲーションを追加してください。
- 収集した単語が両方のページで確認できるようにしてください。
- バックエンド
- 収集した単語を受け取り、詩を返すバックエンドAPIを提供してください。
- DeepSeek APIを使用して詩を生成します。
- API Keyを
.envファイルに保存し、.gitignoreでこのファイルを除外してください。
DeepSeek API Keyを入力します。(https://platform.deepseek.com/で取得できます)
- LLMのAPI Keyは、あなた自身のプロジェクトで大規模言語モデルを呼び出すために使用します。これは機密情報であるため公開できず、設定ファイルに別途記載する必要があります。 なぜ
.envファイルを使い、GitHubにアップロードしてはいけないのか?
.envファイルは鍵やパスワード(例:DeepSeek API Key)を保存するために特化しています。- このファイルがGitHubにアップロードされると、世界中の人があなたの鍵を見て不正使用する可能性があります。
- 安全のため、
.gitignoreファイルで.envを除外するよう宣言し、Gitが追跡しないようにする必要があります。 - これにより、プロジェクトはローカルでこれらの鍵を正常に使用しながら、リポジトリで鍵が漏洩することはありません。
- LLMのAPI Keyは、あなた自身のプロジェクトで大規模言語モデルを呼び出すために使用します。これは機密情報であるため公開できず、設定ファイルに別途記載する必要があります。 なぜ
生成結果を確認した後、エラーや修正が必要な箇所があれば、チャットウィンドウで直接修正のリクエストを入力できます。
ページデザインに満足できない場合は、FigmaやMastergoでインターフェースを再設計し、そのデザインコンセプトをAgentにフィードバックすることもできます。
- 例
Word-Snake という名前の2ページWebアプリケーションを設計してください。
- Gameページ:
- 蛇はキーボードで操作して移動します。
- 蛇が食べるのは通常の食べ物ではなく、英単語です。
- 右側のパネルに収集済みの単語と数を表示します。
- ゲームオーバー後も、単語の在庫はリセットされず、次のラウンドに引き継がれます。
- Make Poemページ:
- 同じ共有単語在庫を表示します。
- ユーザーが一部の単語を選択し、Generate Poemボタンをクリックします。
- 選択した単語をバックエンドに送信し、DeepSeek APIで詩を生成します。
- 詩の生成後、使用された単語を在庫から削除または減らします。
- ナビゲーション: シンプルなTabまたはトップメニューで2つのページ間を切り替えます。
- 共有状態: 収集した単語が両方のページで常に同期され、確認できるようにします。
- 効果の例


5. AI Agentプラットフォームの比較(シンプルなプロジェクトに最適な組み合わせの選び方)
それぞれのVibe Codingプラットフォームには独自の特徴とワークフローがあります。私たちは同一の「DeepSeek APIを組み込んだスネークゲーム」という要件を使って、複数のプラットフォームで実測を行い、初心者の視点から長所と短所を評価しました。以下はそのまとめです。
1. 比較基準
目標(Goal) DeepSeek APIに接続されたスネーク(Snake)Webアプリケーションを構築する。
ゲームの詳細(Game Details)
- ゲームはDeepSeek LLM APIを使用して詩を生成します。
- 蛇が食べるのは英単語で、収集された単語はゲーム終了後も保持され、新しいゲームでも引き続き使用されます。同じ単語は複数回収集でき、それぞれカウントされます。
- 詩が生成された後、使用された単語は在庫から削除されます。
必須機能(Must-Haves)
- スネークゲームを含む実行可能なフロントエンドページ(キーボード操作、Canvasレンダリング)。
- 単語収集の仕組み(単語がボード上に表示され、蛇が単語を食べるとサイドバーのリストが更新される)。
- 複数ラウンドのゲーム間で単語在庫を永続化する機能。
- DeepSeek APIを使用するバックエンド(API Keyがない場合は、まずモックの詩を返すようにする)。
- 「詩を生成する」ボタン:クリック後にバックエンドを呼び出し、詩を表示し、使用状況に応じて単語在庫を更新する。
- API Keyに対する
.envサポート、および.gitignoreによる鍵の漏洩防止。
加点要素(Nice-to-Haves)
- ユーザーがどの単語を使って詩を生成するかを選択できる。
- ユーザーエクスペリエンスが良い(例:サイドバーに単語リストが明確に表示される、詩の表示エリアのレイアウトが適切)。
- 初心者向けにコードにコメントを追加し、主要なロジックを説明している。
2. コーディング出力の比較
1. Lovable(Web-based)
- プラットフォームタイプ: Web
- 主な特徴とワークフロー: Lovableは統合とコラボレーションの面で優れています。Supabaseデータベースの接続などの初期化作業を自動的に完了し、プロジェクトのセットアッププロセスを非常にスムーズにします。プロジェクトの要件を記述するだけで、Agentが各種サービスを連携させ、基本構造を構築してくれます。
- 対象ユーザー: 初めてVibe Codingに挑戦する初心者にとって、Lovableは非常に使いやすい選択肢です。複数サービス連携の複雑さを簡略化し、環境設定ではなくプロンプトとイテレーションに集中できます。高度な自動化のおかげで、すぐに実行可能なプロトタイプを得られます。
- プロンプトのプロセス:

- スネークゲームの効果:


- 価格: 比較的高めですが、学校のメールアドレスがあれば、学生認証により半額で利用できます。

2. Cursor(IDE)
- プラットフォームタイプ: デスクトップアプリケーション(PC)
- 主な特徴とワークフロー: CursorはAI機能を統合した専用IDEで、Windows、macOS、Linuxに対応しています。コード生成、スマートリライト、コードベース検索などの機能を開発環境に直接組み込んでいます。Webツールと比較すると、より従来のローカル開発体験に近いです。ローカル環境であるため、コンピュータごとの設定が異なり、環境関連の問題に遭遇することがあります。メリットは、プロジェクトがローカルにあるため、追加で実行環境をダウンロード・設定する必要がなく、Cursorが多くの煩雑な手順を処理してくれることです。
- 対象ユーザー: ある程度プログラミングの基礎があるユーザーにとって、Cursorは非常に強力で馴染みのある環境です。しかし、完全なゼロベースの初心者にとっては、プロジェクト構造、依存関係管理、ファイル編成などの概念を自分で理解する必要があり、学習曲線はやや急になります。従来のコーディングプロセスにAIアシスタントを加えたい開発者により適しています。
- プロンプトのプロセス:

- スネークゲームの効果:


- 価格:

3. Z.ai(Web-based)
- プラットフォームタイプ: Web
- 主な特徴とワークフロー: Z.aiの使い方は比較的シンプルですが、明らかな課題が一つあります:生成されたコードを手動でコピー&ペーストする必要があります。プラットフォーム自体にリアルタイムプレビューウィンドウがないため、コードの実行結果をすぐに確認するのが難しいです。
- 対象ユーザー: このプラットフォームは比較的「手動」の使用方式を求めます。自動化が少ないため、コードと直接向き合う必要があり、AIの出力内容を深く理解したい人にとっては逆に良い訓練になります。しかし、頻繁なコピー&ペーストは効率の問題とミスのリスクをもたらします。ワンクリック体験を追求する人ではなく、「生のAI出力コード」を見たい方に向いています。
- プロンプトのプロセス:

- スネークゲームの効果:


- 価格:

4. Replit(Web-based)
プラットフォームタイプ: Web
主な特徴とワークフロー: Replitはオールインワンのオンライン開発・デプロイ環境で、ブラウザ上でコーディング、プログラムの実行、オンラインアクセスURLの生成が可能です。コーディングを始める前に、明確なアクションプランを提示します。またビジュアルエディタも提供しており、プレビューウィンドウで直接UIを変更でき、ソースコードが自動的に同期更新されます。これにより、AIの出力が期待通りかどうかを随時確認でき、修正の往復を大幅に減らすことができます。

対象ユーザー: Replitは初心者に非常に使いやすいです。コーディングからデプロイまでの完全なサイクルを簡略化し、自前でサーバーやホスティングサービスを設定する必要がありません。コラボレーション機能も強力で、同級生と一緒にプロジェクトを作ったり、他の人にリモートでコードを見てもらうのに適しています。
プロンプトのプロセス: 構築中、AIは最初から要件を完全に理解しているわけではなく、約3ラウンドのイテレーションを経て、最終的に理想的な結果に到達しました。

スネークゲームの効果:


- 価格:

5. Minimax(Web-based)
- プラットフォームタイプ: Web
- 主な特徴とワークフロー: Minimaxはタスクの実行に通常かなり時間がかかります。そのプロセスには、AIが自動的にエラーを発見して修正することが多く含まれるため、全体として遅く、やや手間がかかる印象です。本プロジェクトを例にすると、Agentは通常まず詳細な計画を作成し、その後ステップバイステップでバックエンド、データベース、フロントエンドのロジックを構築していきます。
- 対象ユーザー: 自動的にテストを実行しエラーを修正するため、時間とTokenの消費が大きいですが、AIがどのように問題を特定し解決するかを明確に観察でき、学習の観点からは非常に価値があります。
- プロンプトのプロセス:




- スネークゲームの効果:


- 価格: 無料版では複雑なプロジェクトを最初から最後までスムーズに完了するのが難しい場合があるため、プロジェクトを完全に構築できるよう、有料プランへのアップグレードをお勧めします。

6. Trae(IDE)
- プラットフォームタイプ: デスクトップアプリケーション(PC)
- 主な特徴とワークフロー: デスクトップアプリケーションとして、TraeはWebツールと比較してパフォーマンスとレスポンス速度で通常優位性があります。ただし、ダウンロードとインストールが必要で、一部のユーザーにとっては導入の敷居が少し高くなります。同様に、ローカル環境であるため、コンピュータの設定や依存環境の違いにより、ある程度の不確実性が生じます。メリットは、Traeがローカルでのプロジェクト作成と実行設定を支援し、直接ローカルで開発とデバッグができることです。
- 対象ユーザー: 長期的にVibe Codingプロジェクトを行い、専用のデスクトップツールを使用したいと考えているユーザーにより適しています。「たまに遊んでみたい」だけの方には、最も軽量な選択肢ではないかもしれません。
- プロンプトのプロセス:

- スネークゲームの効果:


- 価格: 価格は比較的手頃で、無料版でも品質の良い小規模プロジェクトを十分に完了できます。

7. V0(Web-based)
プラットフォームタイプ: Web
主な特徴とワークフロー: V0はVercelが提供する、React UIコンポーネントの生成に特化したツールです。高品質で本番環境に使用可能なインターフェースの生成において優れたパフォーマンスを発揮します。ただし実際の使用では、「コードビューが見つけにくい」「API Keyをどこに設定すべきかの明確な説明がない」といった問題に直面することがあります。
対象ユーザー: V0はフロントエンドとUI/UXデザインに注力する学生やデザイナーに非常に適しています。しかし完全なフルスタックソリューションではなく、バックエンドロジックとAPI統合を実装するには他のプラットフォームを使用する必要があるため、「ワンストップで完全なアプリケーションを構築する」ことが目標であれば、最適な第一選択ではないかもしれません。
プロンプトのプロセス:


スネークゲームの効果:


価格: 無料ユーザーは約4〜5個のシンプルなプロジェクトを構築できます。

3. プラットフォームの総合比較
| プラットフォーム | レビュー | Platform | 備考 |
|---|---|---|---|
| Lovable | AIプログラミング初心者に非常にやさしく、操作がシンプルで体験がスムーズ。理想的な入門選択。 | Web-based | Supabaseなどのサービス接続を自動的に完了し、設定コストを削減。 |
| Cursor | 開発経験のあるユーザーに適しており、生産性とコード品質を大幅に向上。 | PC | ある程度のプログラミング基礎が必要。ローカル環境ではプロジェクト構造や依存関係を自分で理解する必要がある。 |
| Z.ai | プログラミングの基礎があり、AI出力コードの細部を直接研究したいユーザーにより適している。 | Web-based | プレビューウィンドウがなく、結果の確認が面倒。コードの手動貼り付け、フォルダやファイルの手動作成、サービスの手動実行が必要。 |
| Replit | アイデアを素早くアクセス可能なオンラインサービスにしたいユーザーにお勧め。 | Web-based | オールインワンのオンライン開発・デプロイ。コラボレーション対応、ビジュアルエディタ付き。 |
| Minimax | AIの自動的なエラー検出と修正の全プロセスを見て学びたい人に適しているが、全体として遅くToken消費が大きい。 | Web-based | 全プロセスが長く、AIが複数回自動テストを実行してエラーを修正する。 |
| Trae | プログラミング経験があり、デスクトップIDE + AI Agentの組み合わせを使いたいユーザー向けの効率向上ツール。 | PC | ローカルインストールと環境設定が必要だが、パフォーマンスが良く、長期的なVibe Codingプロジェクトに適している。 |
| V0 | React UIの視覚効果を素早く作りたい非開発者向けに最適化。フロントエンド/デザイン志向の学生に適している。 | Web-based | React UI生成に特化。バックエンドや完全なアプリケーション構築には他のプラットフォームとの連携が必要。 |