実践！爆速開発！BOLT.newで宿泊予約システムを8時間でつくる
Bolt.newを使って、どれくらいのことができるのか、チャレンジ企画として、簡単な宿泊予約システムを作ってみました。BOLTだけで開発します。
BOLTだけで開発にする。手書き作業はしない。
1日で作成できるくらいの規模にする。
BOLTがどれくらい意図した通りのことをしてくれるのかわからない状態で始めましたので、もしかしたら記事にならないくらいの成果物しかできないかもしれません。そうなったら、BOLTとの関係を終わらせるつもりでした。
結果的に約8時間で、完成度の高いものができたので、満足しています。機能解説の最後に制作物のファイルのダウンロードができるようにしていますので、最後までお楽しみください。
要件定義
今回作成する予約システムのアイデアは、最初から頭の中にあったので、それをまとめました。書かれている内容は、一般的な宿泊予約フォームの情報ですので、読み飛ばしても問題ありません。まとめることで、頭の中が整理されるので、作成する人にとっては必要な手順です。
開発はBOLTとの対話を通じて進められます。BOLTが機能を考えながらどんどん実装を進めていくため、予定通りに実装されないことや、別の機能が追加されることもあり、手順は決して効率的とは言えません。
しかし、BOLTが作成した機能を評価しながら、必要な機能を選択してつくる手法は、意図せず高機能になったり、必要なのに気づいていない機能を実装してくれるなど、なんとも評価しがたい体験でした。
機能要件
1. 予約管理機能
宿泊予約の作成
・ユーザーが宿泊予約をオンラインで作成できる機能
・日付を選択し、部屋の空き状況を確認して予約を確定します。
2. 部屋管理機能部屋情報の登録・編集
・ホテル管理者が部屋の情報（部屋タイプ、設備、料金など）を管理できる機能。
空き部屋の管理
・予約に応じて部屋の空き状況を調整します。
休業日の管理
・定休日や臨時休業をホテル管理者が設定できる機能。
予約受付期間の管理
・月ごとに予約受付の可否を設定する機能。
ユーザーシナリオ
一般ユーザー
・カレンダーでチェックイン日を選択して、空いている部屋を選択、フォームに入力する
ホテル管理者
・部屋の管理：部屋情報を追加、編集、削除する。
・予約の確認：予約情報を確認し、特別なリクエストを処理する。
その他の考慮事項
表示項目
・ホーム画面には、カレンダーと入力フォームを表示する。
・入力項目は、チェックイン日、チェックアウト日、大人の人数、子供の人数、乳幼児の人数、宿泊プラン選択、駐車場利用希望のチェック、代表者の名前、居住地（都道府県）、電話番号、Eメール、メッセージ
BOLTとの共同開発
BOLTでの開発は、共同開発という言葉がしっくりきます。それくらいBOLTも頑張ったし、自分も頑張りました。
開発のスタート時には、エラーをたくさん出すBOLT君にイライラ。忍耐がためされます。都度、修正依頼をするという関係からはじまり、当初は大変がっかりしました。しかし、直接ソースコードを編集することもなく、こういうエラーが出ているから修正してと伝えるだけで、なんとか乗り切ることができました。
後半になって基本機能ができあがると、一度に改修するコードも少なくなり、BOLT君のエラーも落ち着いてきます。しかし、ここからも簡単ではありません。
一度出来上がっていた機能を、なかったことのようにされてしまいます。カレンダーがあったのにすっかり消えていたりするなど、指示した機能は実装されるけど、引き換えに別の機能が減っている状態です。ここが一番心配になりました。この繰り返しで本当に完成するのかと。消えてしまった機能はもう一度命令をし直しました。
機能が増えたり、減ったりを繰り返すこと数時間。フっと気づくと、これで良いと思える成果物が出来上がっていました。
今回は、BOLTの得意そうなReactで作成しました。なにも指定しないとほぼReactでつくりはじめます。NextjsやNuxtjsなどのフルスタックのフレームワークを使うとプレビューの表示で時間がかかり、BOLTとのやりとりに待ち時間が増えてしまうので、なるべく軽めのフレームワークが適しています。
この簡易予約システムは、データベースを使っていないので、ページから離れるとデータは消えてしまいます。デモなので、そのほうが良いと思ってデータベースを使いませんでしたが、libSQLなどを実装することもBOLT君にお願いすると実装してくれます。
完成したシステムの機能解説
初期画面です。デザインは、Boltが生成したそのままの状態です。最近人気のCSSフレームワークであるTailwindCSSが利用されており、このままでも使えそうな見た目になっています。
管理画面です。画面右上のボタンをクリックして管理画面とユーザー画面を行き来できます。本来は認証機能をつけるべきですが、デモ用なので、パスワードなしで管理画面を表示させています。BOLTに頼めば、サラっと簡単なパスワード認証をつけてくれます。
客室の追加や編集ができます。客室を複数にすると予約の管理が複雑になるので、初期のデモとして客室機能を追加するか迷ったのですが、期待通りの実装ができました。
定休日や臨時休業を設定する機能です。個人経営の宿を想定しているので、必須の機能だと思いました。管理画面で休日を入力するとユーザー画面のカレンダーに休日が反映されます。
定休日の設定が終わっていない月、はるか遠い未来の月に予約が入っては困るので、予約受付期間のオープン／クローズを切り替えできる機能です。
試しに予約を入力してみます。部屋ごとに金額固定になってますが、日本のホテル事情としては、予約人数に応じた料金設定が多いので、部屋の金額表示は無しにして、入力した人数に応じて表示金額が変わる仕組みのほうが良いですね。BOLTに頼んだら簡単に実装してくれそうです。
予約完了などのアラートはモーダル表示にするようにしています。
予約が完了するとカレンダーに反映されます。今回は11月11日に予約をいれてみました。残り１部屋になった日付に、△マークで「残りわずか」という状態になるようにしています。
予約の入っている部屋は選択できません。これもBOLTが気を利かせて、命令なしで、実装してくれました。
予約は、管理画面に反映されます。ユーザー画面と管理画面のデータ連係は、連携してと伝えないと、同じデータを参照してくれないことが多くありました。
予約ステータスの変更ができますが、この機能はまだ飾りです。
Bolt.newを使った開発はアリかナシか
ここまで、約8時間で出来ました。決して素直ではないBOLT君で、扱いには困りましたが、その苦労を考慮しても、この成果はすごくないでしょうか。どんなプロジェクトにも使えるとは言いがたいですが、特にモックアップをつくるのにはベストな選択です。
既存プロジェクトに入れるのは止めておいたほうが無難です。いろんな部分が一度に書き換えられるときは、恐怖を感じます。これで画面が真っ白なまま立ち上がらなかったら…とか、気づかないところで機能が消えていないかな…とか。まだ信じ切れない部分がありますが、これは慣れでしょうか。
実装にあたっては、サーバー環境の準備だとか、バックエンドの利用方法だとか、テストの実施だとか関連知識ゼロだと難しい部分もありますので、ノンプログラマーが実装する際には、サポートしてくれる人は欲しいところです。でも一番重要なスキルは、IT知識ではなく根気だと思いました。ノンプログラマーでも根気があれば、期待するシステムを開発することは可能だと思いました。
足りない機能について
完成とはいっても、足りない機能はまだあって、もしこれをリリースするようなことになったとしたら、以下のような機能の実装が考えられます。
データベースへの保存
予約完了メールの送信（管理者とユーザー宛て）
管理画面へ入室する際の認証
予約キャンセル機能
スマートフォン表示への対応
これらを実装するとバックエンドを別に作ることになりそうです。プロジェクトが２つに分かれてしまうため、もしかしたらBOLTだけでは、実装が難しくなるかもしれませんが、後日、チェレンジしてみたいと思います。使い道があるか分かりませんが、最後に開発したファイルを置いておきます。