プログラミング未経験の僕が「こんなアプリ作って」でWebアプリ作ってみた結果...

ねぇ、これって開発ツール界の『夢のコラボ』じゃない？

「プログラミング未経験の僕が「こんなアプリ作って」でWebアプリ作ってみた結果...」

いや、マジで言わせてもらうと、最近のAIと開発ツールの進化って、もはやチート級じゃないですか？昔は「プログラミングは難しい」って言ってたのに、今やAIにチャットするだけでアプリが作れちゃうって、正直ヤバすぎでしょ。これって、まるで開発ツール界の『夢のコラボ』が実現したって感じ。

「AIでプログラミングって何？」とか「ノーコードとかローコードって楽しそう？」って思ってる、そこのあなた！まだ何もやってないプログラミング初心者さんでも、今回の記事を読めば「あ、自分にもできるかも！」ってなるはず。今回は、そんな夢みたいな最新ツールを、ガジェットを比較するみたいに徹底レビューしちゃいます！

結論から言うと、○○一択。...と言いたいところだけど、そう単純じゃない。

いきなり結論から入りますが、実はどのツールも一長一短。「じゃあ結局どれがいいんだよ！」ってなるでしょ？そう、一概に「これ！」とは言い切れないのが正直なところ。でも、それぞれのツールの「ここが神！」「正直微妙...」なポイントを忖度なしで紹介していくから、きっとあなたにピッタリのツールが見つかるはず。

個人的には、深夜2時にふと思い立って「なんかアプリ作りてぇな」ってなった時にサッと使える手軽さが重要だと思ってるんだけど、そういう視点も交えながら話していくね。

ツールA: 「AI、これコピペで動くコードくれ！」って言ったら本当にくれた件

まず最初に試してみたのは、コード生成に特化したAIツール。具体的には、GitHub Copilot Chatみたいなやつね。正直、プログラミング未経験の僕でも、本当にコピペだけで動くWebアプリ（HTMLとCSS、ちょっとしたJavaScript）が作れるのか、半信半疑だったんだよね。でも、結果は...マジでくれた！

試しに「シンプルなToDoリストアプリのHTMLとCSSとJavaScriptをください。タスクの追加と削除ができればOKです」ってお願いしてみた。

AIにプロンプト（指示）を入力:

ToDoリストアプリのHTML、CSS、JavaScriptを生成してください。
- HTML: 入力フォームとリスト表示部分
- CSS: シンプルなデザイン
- JavaScript: タスクの追加、削除機能
```text

AIがコードを生成:
数秒後、AIはこんなコードを吐き出してくれた。

AIが生成したToDoリストアプリのコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルなToDoリスト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>ToDoリスト</h1>
        <input type="text" id="taskInput" placeholder="新しいタスクを入力">
        <button id="addTaskButton">追加</button>
        <ul id="taskList">
            <!-- タスクはここに表示されます -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>
```text

```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

#taskInput {
    width: calc(100% - 70px);
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#addTaskButton {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#addTaskButton:hover {
    background-color: #0056b3;
}

#taskList {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

#taskList li {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
}

#taskList li button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#taskList li button:hover {
    background-color: #c82333;
}
```text

```javascript
document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('taskInput');
    const addTaskButton = document.getElementById('addTaskButton');
    const taskList = document.getElementById('taskList');

    addTaskButton.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            addTask();
        }
    });

    function addTask() {
        const taskText = taskInput.value.trim();
        if (taskText === '') {
            alert('タスクを入力してください！');
            return;
        }

        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${taskText}</span>
            <button class="delete-button">削除</button>
        `;

        taskList.appendChild(listItem);
        taskInput.value = ''; // 入力フィールドをクリア

        const deleteButton = listItem.querySelector('.delete-button');
        deleteButton.addEventListener('click', () => {
            taskList.removeChild(listItem);
        });
    }
});
```text
</details>

ファイルを保存してブラウザで開く:
index.html, style.css, script.js の3つのファイルを作成して、それぞれにAIが生成したコードをコピペ。
そしたら index.html をブラウザで開くだけ。

「ファイルを保存してブラウザで開く」って言われても、どうやるの？って思った人もいるかも。
Windowsならメモ帳、Macならテキストエディットでそれぞれのコードを貼り付けて、拡張子を.html, .css, .jsにして保存するだけ。あとはindex.htmlをダブルクリックすれば、ブラウザで開くことができるよ！

結果: ちゃんと動く！入力フォームにタスクを入れて「追加」ボタンを押すとリストに追加されるし、「削除」ボタンで消せる。シンプルだけど、これってすごいことだよね。

ここが神！:

爆速で動くコードが手に入る: 「こんな機能がほしい」って言えば、すぐに形になる。
プログラミング知識ほぼ不要: コピペするだけだから、構文とか全然わからなくてもOK。
アイデアを形にする第一歩に最適: 「こんなことできるかな？」って試すハードルがめっちゃ低い。

正直微妙...:

複雑な機能は厳しい: データベース連携とか、ユーザー認証とか、ガチな機能は難しい。
コードの理解は進まない: コピペしてるだけだから、プログラミングのスキル自体はあんまり伸びないかも。
デバッグは自力: 生成されたコードにバグがあったら、自分で直すか、AIに修正指示を出す必要がある。

まぁ、あくまで「コピペで動くもの」を手軽に作るには最高って感じ。プログラミングの「とっかかり」としては、これ以上ない体験かもしれない。

ツールB: ドラッグ＆ドロップとAIの合わせ技！「爆速開発」は伊達じゃない

次に試したのは、ノーコード・ローコードツールとAIの連携がウリのサービス。具体的には、AdaloとかBubbleみたいな、ビジュアルでアプリを作っていくやつに、AIが組み込まれたイメージ。電車の中でスマホからやってみたんだけど、これがまた新感覚だった。

今回は「簡単なメモアプリ」を想定して試してみた。画面にテキスト入力欄と保存ボタン、メモの一覧が表示されるだけのシンプルなやつ。

AIにアプリの概要を伝える:
ツールによっては、「こんなアプリを作りたい」とチャットで伝えるだけで、初期の画面構成を自動で生成してくれる機能がある。
```
シンプルなメモアプリを作りたい。
- メモ入力欄
- 保存ボタン
- メモ一覧表示
```text
```
AIが初期画面を生成:
チャットで指示したら、キャンバス（作業画面）に、テキスト入力ボックスとボタン、リストコンポーネントが自動で配置された。マジか、もう骨格できてるじゃん！
ドラッグ＆ドロップで調整:
生成されたコンポーネントの位置やサイズを、マウスでドラッグ＆ドロップして調整。ボタンの色を変えたり、文字サイズを大きくしたりも直感的にできる。
AIに機能を追加指示:
「保存ボタンを押したら、入力されたテキストをメモ一覧に追加してほしい」とAIにチャットで指示。すると、内部でJavaScript（ローコードの部分）が自動生成されて、保存機能が実装された。

ここが神！:

視覚的にアプリが作れる: ドラッグ＆ドロップで直感的に操作できるから、完成形をイメージしやすい。
開発速度が段違い: AIが初期設定や簡単なロジックを組んでくれるから、本当に爆速。
複雑な機能も比較的簡単: データベース連携とか、ユーザー管理機能も、用意されたコンポーネント（部品）を使えば比較的簡単に実装できる。

正直微妙...:

表現の自由度が低い: テンプレートや用意されたコンポーネントに縛られるから、デザインや機能の自由度はコードを書くよりは低い。
学習コストはそれなり: ツールの操作方法や、各コンポーネントの機能は覚える必要がある。
ベンダーロックイン: 特定のツールに慣れてしまうと、他のツールへの移行が大変になる可能性がある。

「自分でコード書くのはちょっと...でも、もっとちゃんとアプリの形にしたい！」って人には、これが一番しっくりくるんじゃないかな。僕も「これ、マジで便利なんで騙されたと思ってやってみて」って言いたい。

ツールC: まるでAIとペアプロ？チャットだけでアプリが育っていく感覚が新しすぎる

最後に試したのは、チャットベースでAIと対話しながらアプリを作り上げていくタイプのツール。最近話題のChatGPTにプラグインを組み込んだり、それ自体がアプリ開発に特化したAIチャットボットみたいなやつね。これはね、まるでAIとペアプログラミング（二人で一緒にコードを書くこと）してる感覚だったんだよ。

今回は「簡単なアンケートフォーム」を作ってみることにした。質問と回答欄があって、送信ボタンを押すと結果が確認できる、みたいなやつ。

AIに「アンケートフォームを作りたい」と伝える:

簡単なアンケートフォームを作ってほしい。
- 質問は「好きな食べ物は何ですか？」「趣味は何ですか？」の2つ
- 回答はテキスト入力欄
- 送信ボタン
- 送信後、入力内容を確認できる画面に遷移
```text

AIがコードを生成、そして質問してくる:
AIはまずHTMLとCSSを生成してくれた。そして、「送信ボタンを押した時の処理はどうしますか？データをどこに保存しますか？」と聞いてきた。

対話しながら機能を拡張:
僕「とりあえず、データはブラウザのローカルストレージに保存して、送信後に別ページで表示できるようにしてほしい」
AI「承知しました。それでは、result.htmlという新しいファイルを作成し、そこに保存されたデータを表示するJavaScriptを追加します。」

みたいな感じで、キャッチボールしながらアプリが育っていくんだよね。

AIと対話して完成したフォーム（一部抜粋）

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アンケートフォーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>アンケートにご協力ください</h1>
        <form id="surveyForm">
            <div class="form-group">
                <label for="food">好きな食べ物は何ですか？</label>
                <input type="text" id="food" name="food" required>
            </div>
            <div class="form-group">
                <label for="hobby">趣味は何ですか？</label>
                <input type="text" id="hobby" name="hobby" required>
            </div>
            <button type="submit">送信</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>
```text

```javascript
// script.js (index.html用)
document.getElementById('surveyForm').addEventListener('submit', function(event) {
    event.preventDefault(); // ページの再読み込みを防ぐ

    const food = document.getElementById('food').value;
    const hobby = document.getElementById('hobby').value;

    // データをローカルストレージに保存
    localStorage.setItem('surveyFood', food);
    localStorage.setItem('surveyHobby', hobby);

    // 結果ページへ遷移
    window.location.href = 'result.html';
});
```text

```html
<!-- result.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アンケート結果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>アンケート結果</h1>
        <p><strong>好きな食べ物:</strong> <span id="displayFood"></span></p>
        <p><strong>趣味:</strong> <span id="displayHobby"></span></p>
        <button onclick="window.location.href='index.html'">もう一度回答する</button>
    </div>
    <script src="result_script.js"></script>
</body>
</html>
```text

```javascript
// result_script.js (result.html用)
document.addEventListener('DOMContentLoaded', function() {
    const displayFood = document.getElementById('displayFood');
    const displayHobby = document.getElementById('displayHobby');

    // ローカルストレージからデータを取得
    const food = localStorage.getItem('surveyFood');
    const hobby = localStorage.getItem('surveyHobby');

    if (food) {
        displayFood.textContent = food;
    } else {
        displayFood.textContent = '未回答';
    }

    if (hobby) {
        displayHobby.textContent = hobby;
    } else {
        displayHobby.textContent = '未回答';
    }
});
```text
</details>

ここが神！:

開発プロセスが身につく: 対話を通じて「次はこれが必要だよね」という開発の流れを体験できる。
柔軟な対応: 細かい要望にもチャットで応えてくれるから、自由度が高い。
プログラミングの学習にもなる: AIがなぜそのコードを書いたのか、意図を質問することもできる。

正直微妙...:

時間がかかる場合も: こちらの指示が曖昧だと、AIとの対話が長引くことがある。
質問力が求められる: 適切なプロンプト（指示）を出すスキルが必要になる。
あくまでAIの知識ベース: 最新のフレームワークやニッチな技術には対応しきれない場合もある。

これはね、プログラミング学習の新しい形って感じがしたよ。自分でコードを書くのはハードル高いけど、AIと相談しながらなら「これならできそう」って思える。

結局どれを選ぶ？僕が「今から始めるならコレ！」と推したいツールはこれだ！

3つのツールを比較した結果、プログラミング初心者が「AIにアプリを作らせ