ノーコードからの脱出 -地獄のデスロード- / Escape from Base44

Yokohama North Meetup #10でLTしたときの資料です

Transcript

1. ノーコードからの脱出 - 地獄のデスロード -
2. Keisuke Nishitani @Keisuke69 Programming is a creative work. Love Music ♫ Love Camping Blog: https://www.keisuke69.net/ Everything will be serverless.
3. Base44とは？ AIノーコードWebアプリ開発プラットフォーム チャット形式で指示するだけで本格アプリが完成 認証、DB、ホスティング全てオールインワン 2025年にWixに116億円で買収 創業6ヶ月で25万ユーザー獲得の実績
4. AIノーコードWebアプリ開発プラットフォーム • 自然言語のチャット形式インターフェース • 単なるサイトビルダーではなく本格的なフルスタックアプリが完成 • 認証、DB、管理者機能、ストレージ、メール送信など • ホスティングも込みで、完成したらすぐに公開可能 • 多様な3rd Partyに対応
5. • 2024年12月にイスラエルの開発者Maor Shlomo氏が個人で立ち上げ • 2025年6月に創業から6ヶ月で25万人のユーザーを獲得し、 Wixに約 120億円（8000万ドル）で買収された • 資金調達なしのブートストラップ • Build in Public • Base44自体もバイブコーディングで開発された
6. Base44で作ったもの 失語症患者向けトレーニングアプリ「Speech Link」 • 2025年春にクラウドファンディング実施 • 2025年夏にクローズドベータを実施したが紆余曲折ありUI/UXが最悪 • 非エンジニアのプロジェクト責任者がBase44でイメージ通りのプロト タイプを短期間で作成 • 現在、このプロトタイプをプロダクション用に移行中
7. なぜ移行することに？ プロダクション環境での運用が難しい 最大の問題 チーム開発ができない 基本的に1人での開発が前提の設計 いわゆるチーム開発が難しい バージョン管理もできない そのままBase44で運用するのではなく、移植することを選択
8. ここから始まる 地獄のデスロード
9. 地獄① そもそも起動しない エクスポートしても簡単には動かない • JavaScript + React + Viteで実装されている • エクスポートしておもむろにyarn dev で起動しても真っ白な画面 • Base44 SDKに依存した認証でエラー • 認証を無効化してもBase44サービスに接続できずエラー
10. 地獄② バックエンド不在 エクスポートされたコードにはフロントしか含まれない • バックエンドロジックは全て含まれない • フロントエンドのUIとコンポーネントのみ • ビジネスロジックはエスパーしつつ書き直す必要
11. 地獄③ SDK依存地獄 全てがBase44 SDK経由 • DB周りのコードもない • SQLはもちろんエンティティもない • Base44サービスがないと何も動かない • 全部差し替え = 実質再実装 • プロトタイプの「参考」にしかならない
12. というわけで、やっていく！
13. Step1: まず起動できるようにする そのままでは真っ白な画面になる • SDK依存部分をすべて静的データに置き換え • 認証チェックをバイパスするように • 認証通った際にレスポンスされるオブジェクトはダミーで用意 • APIへのリクエストとレスポンスをすべてダミーに置き換え • Base44への通信を不要にして、まずはローカルで起動できる状態に
14. Step1: まず起動できるようにする そのままでは真っ白な画面になる • SDK依存部分をすべて静的データに置き換え • 認証チェックをバイパスするように • 認証通った際にレスポンスされるオブジェクトはダミーで用意 • APIへのリクエストとレスポンスをすべてダミーに置き換え • Base44への通信を不要にして、まずはローカルで起動できる状態に
15. Step2: Next.js化していく • Next.js with TypeScriptで新規セットアップ • Base44で作成されたアプリケーションの画面とURLのパスを洗い出 し • 全ページを中身が空の状態で一通り実装
16. Step2: Next.js化していく • Next.js with TypeScriptで新規セットアップ • Base44で作成されたアプリケーションの画面とURLのパスを洗い出 し • 全ページを中身が空の状態で一通り実装
17. Step3: 認証を実装 ここは普通にNext.js + Firebase Authentication使った認証処理を実装
18. Step3: 認証を実装 ここは普通にNext.js + Firebase Authentication使った認証処理を実装
19. Step4: 各画面を移植していく • ここからは各画面を移植していく地味で長い道のり • 主にロジックの移植 • 既存コードからの移植も発生。特に音声周り • バックエンドロジックの再実装 • Base44の管理画面ではバックエンドロジックのソースコードが 参照できるのでとりあえずすべてコピペ • Entity関連のコードも同様 • DBどうするか問題 • Base44同様にRDBにするとバックエンドAPI必要になったりで コストが…
20. 道のりは長い まさにデスロード…
21. 所感: Base44の光と影 光：プロトタイピングは最強かも • アイデアをすぐに形にできる • デザインも自動生成で優秀。しかもセンスがいい • Webサイトの生成ではなく、フルスタックのWebアプリが出来上がる • 非エンジニアだけでも本格的なWebアプリが作れる。すごい。 影：プロダクションで使うには… • チーム開発には不向き • 実質的に再実装が必要 • 結構大変
22. THANK YOU