Webアプリ開発とは、ブラウザで開いて使うアプリを作ることで、画面を作るフロントエンド、データを処理するバックエンド、データの保存先、インターネットに公開する仕組みの4つを用意する作業です。インストール不要でスマホからもパソコンからも同じURLで使えるのが特長です。ここでは4つの要素の役割と、開発の流れを説明します。
Webアプリを作る4つの要素
- フロントエンド：利用者が見て操作する画面です。ボタン、入力欄、一覧などを表示し、操作に応じて画面を切り替えます。
- バックエンド：サーバー側で動く部分です。入力内容のチェック、計算、ログインの確認など、画面の裏側の処理を担当します。
- データの保存先：会員情報や予約内容などを保存する場所です。データベースと呼ばれます。
- 公開の仕組み：作ったアプリをインターネット上に置き、URLで開けるようにすることです。ホスティングと呼ばれ、HTTPSの設定も含まれます。
バックエンドが何をしているかを詳しく知りたい場合は、英語の記事What is a backendが参考になります。
開発の流れ
- 企画：誰が、何のために使うのかを1文で決めます。
- 設計：画面の一覧、保存するデータの項目、動きのルールを書き出します。
- 開発：フロントエンドとバックエンドを作り、データの保存先とつなぎます。
- テスト：わざと間違った入力をしたり、スマホで開いたりして、思いどおりに動くかを確かめます。
- 公開と改善：URLを発行して使ってもらい、出てきた要望をもとに直していきます。
4つの要素を誰が用意するか
自分でプログラミングする場合は、4つすべてを自分で用意します。ノーコードツールやAIのアプリビルダーでは、そのうちのいくつかをツール側が引き受けます。作り方の選択肢そのものはアプリの作り方で比べています。
具体例：AIでWebアプリを作る場合
VibeDreamを使う場合の流れです。アプリはReactのフロントエンドとFastAPIのバックエンドで作られ、プレビューと公開の仕組みも用意されているので、4つの要素を自分で組み合わせる必要がありません。画面は現在英語ですが、チャットには日本語で書けます。
料理教室の予約を受け付けるWebアプリを作ってください。
画面は、教室の日程一覧、予約フォーム、予約完了、管理者用の予約一覧の4つです。
予約フォームの項目は、名前、メールアドレス、人数です。
各回の定員は8人で、満席になったら予約できないようにしてください。
予約内容は保存して、管理者用の画面はパスワードで守ってください。
画面の文言はすべて日本語にしてください。
プレビューではスマホ表示にも切り替えて確かめます。定員の8人目まで予約して、9人目が断られるかを試すと、ルールが正しく動いているかがわかります。仕上がったらPut it onlineを押すと、1〜3分ほどでryouri.vibedreams.aiのようなHTTPS付きのアドレスで公開されます。独自ドメインはwwwの付いたアドレスで、TXTレコードとCNAMEレコードを追加してつなげます。手順は英語のデプロイガイドにあります。
Webアプリとスマホアプリの違い
Webアプリはブラウザで動くので、アプリストアの審査がなく、URLを送るだけで使ってもらえます。一方、スマホのカメラや通知などを細かく使いたい場合や、アプリストアに並べたい場合はネイティブアプリが必要です。VibeDreamで作れるのはWebアプリとブラウザゲームで、ネイティブアプリは作れません。違いは英語の記事What is a web appでも説明しています。