Webサービス制作の概要
どうも、AI駆動開発ラボ大森です。
今回は、Webサービス、Webアプリケーションを作るのって、 公開するのって実際どういうふうにしているのか、
お金がかかるのか、どういうサービス使っているのか、 みたいなことをお話ししてみようかなと思います。
2025年10月時点で、大森が実際に使っている技術スタックですね。
大森なりにいろいろ触ったり、どれがいいかなってしてきた上で、
これが今一番モダンで、主流で、
つまりは、それを学んで使うのに時間とかを投資しても悪くないんじゃないかなって思っている 技術スタックがあります。
これかなり個人開発というか、初心者の人とかに優しい、 私にも優しいような、なるべくお金がかからない、
基本的にお金がかからない状態でWebサービス、 Webアプリケーションを公開して人に使ってもらうことができる
技術のスタックとかサービスの使い方があるので、 それのお話をしてみようかなと思います。
もしかしたら専門的っぽい内容になるのかなと思うんですけれども、 なるべくわかりやすく話します。
実際に作ってみようと思ったときに、 Webサービス作ってみたいなと思ったときに、
またこれを聞いてみてください。
ということで、僕はもともとWebサイト制作をしていました。
HTML、CSSみたいなものでやってて、 Wordpressを触りたいのでPHPみたいにやって、
あとVueっていうのを使ってました。
ちょっとここだけ専門用語っぽいんですけど、 Vue.js、Nuxt.jsっていうのを始めて、
JavaScriptのフレームワークとして触りました。
とはいえ、それでめちゃめちゃ複雑なことをするわけじゃなくて、 Webサイトを作るぐらいなんですけど、
1年半前ぐらいまで、それの流れがあって、 AI駆動開発最初にやってみようと思ったときは、
VueとNuxt.jsで作っていました。
なんですけど、AI駆動開発っていうのは どんどん進化してきていて、
これからどんどん進化していくだろうっていうときに、 一番大事なのって、
自分が今使い慣れているかどうかよりも、 AIさんがそれのプログラミング言語の知識がある。
つまり、いいコードが書けることだなと思いました。
どういうものがあればいいコードが書けるか、 どれだけ知識があるのかといったら、
単純にWeb上に存在する、 これから存在していくプログラムの量が多いもの。
つまり、一番人気のものなんじゃないかなと思いました。
一番人気なものが、よりいろんな人が使う。 よりAIがそれを学習する。
どんどんどんどん、この1位がぶっこ抜いていく みたいな感じになるんじゃないかなと想像して、
そのときに、AI駆動開発ツール、 V0っていうAI駆動開発ツールが出てて、
結構それが先駆け、言葉から何かアプリケーションを 作ってもらうっていうのが先駆けではあったんですけど、
V0を作っている会社が出している プログラミング言語がNext.jsっていうものでした。
next.js、Next.jsって言います。
これはJavaScriptっていうのを包む、 Reactっていうフレームワークを包むNext.jsってやつなんですけど、
それを今使ってます。
今使ってますし、実際にVue.next.jsよりも React.next.jsのほうが、
実際にAI駆動開発においての主流になってます。
ほぼ一択。
Vueで作りますってとこはないですね、基本的に。
自然言語でもですし、何か作ってって言ったときに、
特に指定しなかったら、 ReactないしはNext.jsで作るようになってます。
という意味で、Vue.next.jsからの乗り換え判断としては、
めちゃめちゃタイミングとしても よかったんじゃないかなと思っています。
なので、プログラミング言語みたいなところは 基本的にNext.jsっていうのを使ってます。
とてもモダンですし、すごくやりやすいです。
ちょっとだけエンジニア寄りなんですけど、
フロントエンドとバックエンドっていう概念があって、
フロントエンドっていうのはすげえ分かりやすく言うと、
見える部分。
ウェブサイトとか見える部分。
バックエンドっていうのは見えない部分。
例えば、データベースからデータを取ってくるよとか、
人によって表示を仕分けるよ、みたいな。
なんとなくそんな感じだと思ってください。
プログラミング言語によってはフロントエンドしかできないから、
バックエンドは別のプログラミング言語で書いてねっていうものもあるんです。
つまり、一つのウェブアプリケーション、
フロントとバックがある一つのアプリケーションを作るときに、
2つのフロントはフロント。
バックはバックの2つの言語を使わなきゃいけないやり方もあるんですけど、
このNext.jsだと、フロントもバックもNext.jsで
フロントもバックもNext.jsで作れるので、
学習しなきゃいけないのが一つでいいよねっていうのに加えて、
分断されてないので、
AI駆動開発、AI社に何か作ってねっていうときに、
どっちもフロントもバックも見通しがいい状態でAIさんが作ってくれるっていうので、
とてもAIさんと相性がいいですねといったプログラミング言語です。
なので、今から駆動開発としていく方はNext.js一択でいいんじゃないかなと僕は思っている、
そういう宗派の人です。
SupabaseとVercelの活用
さらにNext.jsでプログラムを作りました。
それをWebに公開するとか、それこそデータベースとか色々あるんですけど、
それぞれどういうものを使っているかちょっとお話ししていきます。
Web上に公開するときはバーセルってやつを使っています。
Vercelです。バーセルってやつを使っています。
これもバーセルでいいと思います。バーセル一択でいいんじゃないかなと思っています。
なんでかっていうとめちゃめちゃ簡単なんですよ。簡単なんです。
ボタンポチポチで多分5回ぐらいボタンを押すだけでWeb上に公開されます。
なんか結構エンタープライズって言い方をするんですけど、
例えばTwitter、Xとかめっちゃ色んな人が使うやつっていうのはめちゃめちゃ色んな複雑な設定をした方がいいんですね。
めちゃめちゃ人がいっぱい来ても耐えられるようにするとか、
そういう大企業向けのことをエンタープライズって言うんですけど、
バーセルを使わない方がいいんですよ。
結果安く済んだりとか、いっぱい人が来ても壊れないとかあるんですけど、
個人開発の範囲だとバーセルでいいです。
基本的にめっちゃめっちゃページビューがいく。
すごい大きなメディア、ブログ、ブログサイトとかにしてめっちゃ人が来るじゃない限り、
ほぼ無料で済むのでバーセルでいいと思います。
しかもバーセルとNext.jsを作っている会社さんが一緒なんだっけな。
とにかく相性がめちゃめちゃいいんですね。
Next.jsを使ってバーセルで公開する。
これはここまででいいと思います。
データベースだとか、アカウント登録だとか、
そういういろいろな周辺のサービスとかがあると思います。
何だろうな。
例えば、ECサイト、ショッピングサイトを作りますよっていうときに、
ショッピングデータ、買い物のデータを登録しておくところ、
データベースが必要だよねとか。
では、この人がどの人、どのアカウントなのかを認証するために、
アカウントの情報を扱わなきゃいけないよね。
例えば、メールアドレス、パスワードで登録するとか、
Googleアカウントで登録するとかみたいな感じですね。
Webサイトだといらないことも多いんですけど、
Webサービス、Webアプリケーションってなると、
そういうちょっとエンジニアっぽいところが必要になります。
僕、それどうしてるかっていうと、
スパベースってやつを使ってます。
S-U-P-A-B-A-S-E、スパベースって言うんですけど、
スパベースでいいんじゃねえかなと思ってます。
スパベース、何がすごいかっていうと、結構新しめ。
だから、すごくダッシュボードとかもめっちゃ見やすいんですけど、
データベースもスパベースで管轄してるし、
アカウント登録もスパベースで管轄してるし、
サーバーみたいなところもスパベースで管轄してるんですね。
つまり、スパベースさんの使い方さえわかれば、
もろもろいろんなことを覚えなくてもいいよっていう。
なるべく使うサービスっていうのは少なくしたほうが、
なんだろうな、小学者、AI駆動開発、
めちゃめちゃ今までエンジニアやってきたわけでもないから、
覚えなきゃいけないことが多いと大変じゃないですか。
だから覚えなきゃいけないことを少なくするとか、
無料の範囲に収まりたいみたいなことをしたときに、
スパベースっていうのがめちゃめちゃいいです。
結構無料の範囲が大きいんですね。
無料枠がないサービスももちろんあるんですよ。
無料枠がないサービスもあるし、
アカウント登録だけのサービスとか、
データベースだけのサービスとかあるんですよ。
例えばデータベースだけのサービス使うと、
もうちょっと無料枠が広いよとかあるんですけど、
とかよりも、やっぱりAI駆動開発、
小学者が何かやるときはなるべく難しくない。
これだけ分かればできるっていうほうがいいんじゃないかなと。
もう僕自身のことなんですけど、
スパベースだとデータベースもできるし、
アカウント登録っていうのもできる。
無料枠もある程度あるっていうので、
スパベースを使うといいんじゃないかなと思ってます。
スパベース、無料だとちょっと制限があって、
一つのメールアカウントに対して、
登録できるプロジェクトとかプロダクトというか、
アプリが二つまで、
二つ以上を超えると、
冬眠させないといけないよ。
でもメールアドレス、違うメールアドレスで登録すれば、
全然問題ない。
僕もちょっとそんな感じで運用してたり、
あとは一週間アクセスないと、
休眠しちゃうよっていうのがあるんですけど、
その辺も時々ポチポチしたり、
休眠しちゃう人がいないから、
これはお休みさせておこうみたいな感じですね。
全然問題なく使えるスパベース。
めちゃめちゃいいです。
AIとも相性が良くて、
MCPっていう技術があるんですね。
AIさんにサービスとかを触ってもらおう。
普通はパソコンの画面を自分でポチポチしないといけない、
主流はですけど。
だからそれをAIさんに教えようと思ったら、
毎回スクリーンショットを撮って、
AIさんに渡して、これどうしたらいい?
聞いたやつをやって、
でもAIさんの情報が古かったりして、
そんなメニューないよってなったりするんですけど、
そのMCPっていうのを使えば、
AIさんが勝手にそのサービススパベースを操作してくれるわけですよ。
データベースこうなってますねとか、
ここではこうしますねっていうのが、
結構新しめのサービスだし、
結構すごく勢いがあります。
スパベースかなり、
個人開発とかでModern、
Next.jsとかバーセリを使った開発だと、
多分一番デファクトスタンダード的な感じになっていると思います。
つまりそれだけの情報が集まっているし、
それだけ開発更新のスピードも多い、
安定している、どんどん進化していくという感じなので、
めちゃめちゃAIとも相性がいいですね。
なんで結論で言うと、
Next.jsっていうプログラミング言語を使って、
いろいろデータベースとかは、
もろもろスパベースさんにお任せして、
それをバーセルでアップロードする、
ウェブに公開するっていう、
初心者向けのWebサービス作成
この3種の人気っていうのがめちゃめちゃ、
駆動開発、個人、無料でっていうのと相性がいいと思ってます。
僕もがっちりそれを使ってます。
結構プログラミング言語をどうするとか、
どのサービス使うって、
本当に実際作ろうってなると、
かなり悩むところなんですよね。
なかなかVueっていうNext.jsで作ってたのを、
Next.jsに変えよってして、
ポンってできるわけじゃなくて、
いろいろ変わった部分が変えたけど、
本当に動くのか確かめないといけないとか、
いろいろ大変なことがあります。
なんで最初に選んだものを、
ある程度使い続けることになるので、
なるべく未来を見据えて破綻しないような、
何か選定をしなきゃなとか、
スパベース、データベースとか、
アカウント登録も、
なんとなくサービス別のにするのって、
大変そうなイメージあると思うんですけども、
全くその通りで結構大変だったり、
特にエンジニア的な知見とか経験とかが、
知識が薄い、
僕なんかは壊れちゃうんじゃないかと思って、
すっげえ怖いんですね。
なんでなるべく将来性がある、
かつ無料枠がちゃんとある、
かつ無料を多いすぎて、
いろんなサービスを使おうとしちゃうと、
分からない分からないってなっちゃうから、
作るとこが楽しい、
メール送信サービスの紹介
作るとこやってもらいたいので、
このNext.jsバーセルスパベースっていうのが、
いいんじゃねえかなと思っています。
ちなみに油断的に、
もうちょっと周辺の技術とかサービスとか、
どうしてるんだの話をしてみると、
メール送信、
メールを送るサービスがあります。
例えばアカウント登録をしたら、
確認してねみたいな、
メールアドレス、
このメールの認証するをクリックしてねとか、
6桁の数字入れてねみたいな感じで、
メールを送信するときって、
メール送信用のサービスを使わなきゃいけないんですけど、
Resendってやつが一番いいんじゃねえかなと思っています。
R-E-S-E-N-D
リセンド、
もう一回送るよって、
海外のサービスなんですけど、
たぶんかなり主流、
一番ぐらいで主流なんじゃないかな、
主流だし、
ダッシュボードとかもおしゃれだし、
無料枠があるか、
めっちゃ安いっていうのがあります。
メール送信サービス、
リセンドのほかに、
もう一つ国内向けのやつがあるんですけど、
ちょっとそっちは、
僕的には、
なんだろうな、
ナシかなと思って見送りました。
っていうのは、
結構なんだろうな、
エンタープライズ、
みたいな感じなんですね。
カスタマーサービスが、
結構しっかりしてるとかあるんですけど、
むしろAIさんにいっぱい聞くぜっていう前提だと、
リセンドのほうが、
日本のサービスよりも、
海外転換されてるサービスのほうが、
情報が絶対に多いので、
情報が多いと、
AIめっちゃ強くなるんで、
AI駆動開発っていう前提だと、
リセンドがいいんじゃねえかなと思っています。
スタイリングの手法
もう一つだけ、
プログラミングのやり方の話なんですけど、
スタイリングっていう概念があります。
これは、
ウェブサイトとかを作るときに、
背景は白色にしようとか、
ここの画像はこれぐらいの大きさにしようとか、
ここはなんだろうな、
Q&Aみたいなリストにしよう、
みたいなものですね。
スタイリング、
デザインを当てるものがあるんですけど、
それの書き方っていうのが、
ざっくり二つあるんですね。
CSS、
スタイルシートってやつと、
テイルウィンドっていうのがあります。
ちょっとだけ専門的な話なんですけど、
僕もともとウェブ製作をしていました。
ウェブ製作をしてて、
Viewってやつを使ってたりしたんですけど、
1年半前ぐらいまで。
CSSっていう、
書き方があるんですよ、スタイリングの。
この要素はこういうサイズで、
こうです、みたいなやつがあって、
それをだから、
6,7年ぐらいしてきたんですよ。
6,7年ぐらいしてきて、
そのやり方もあるんですけど、
テイルウィンドっていうやり方の方が、
なんか主流になってきてるっぽいぞ、
っていうのが、
僕がViewから
Next.jsに乗り換えるタイミングで、
聞いてですね、
やっぱり6,7年使ってたやり方を変えるって、
すっげーハードル高いんですよ。
心理的なハードル高いし、
何がいいの?
みたいな感じなんですね。
なんとなく伝わる感じで言うと、
このウェブサイトはこういう構成ですよ、
っていうファイルがあって、
CSSだと、
よっていうファイルと、
デザインはこうですよっていうファイル。
ファイルっていうか、
分かれてるんですよ。
分かれてるんですね。
テイルウィンドっていうのは逆に、
設計図に、
これこんなサイズですよって書いていく。
今まで分けてたのに、
設計図に書いちゃったら、
よく分かんないよって思ってたんですけど、
どうにか乗り越えて、
できるようになったらめっちゃ便利だし、
めっちゃ主流だし、
AIさんにプログラムを書かすとき、
テイルウィンドめっちゃ使ってます。
めちゃめちゃ使ってます。
あと、
シャドウCNUIっていう、
デザインのライブラリというか、
パッケージというか、
テンプレートみたいなのがあるんですけども、
それがテイルウィンドを使ってる、
みたいなものがあるので、
これちょっと本当にNext.jsで
ウェブサイト作るよっていう方が、
実際に、
スタイリングのやり方2種類あるらしいぞっていうとき、
良ければ、
僕を信じて、
テイルウィンドを選択していただくと、
将来性がある、
つまり、
めっちゃ勉強してたけど、
無駄になっちゃったが、
起こりづらいんじゃねえかなと思っています。
AAさんもめちゃめちゃ詳しいし。
って感じです。
最後余談でしたけど、
ウェブサービスを作るの、
大変そうだなとか、
何をどうしたらいいんだ?
どの言語で何を使えばいいんだ?
ウェブとか検索すると、
めっちゃいろんな情報が出てくるから、
それは怖いってなっちゃうんですけど、
僕の思い的なおすすめとしては、
AAクード開発と相性がいいのは、
JSっていうプログラミング言語で、
バーセルで公開して、
データベースとかアカウント登録は、
スパベースを使って実装するのが、
いいんじゃないかなというお話でした。
この放送、
AAクード開発ラボでは、
AIを使って何か、
ウェブサイトとかウェブサービスとか、
あとはスマホアプリとか、
ゲームを作るよっていうのを、
僕自身がAAクード開発のおかげで、
それまでプログラミング挫折して、
もう5年ぐらい、
俺はもうプログラミングできねえや、
と思ってたんですけど、
今、何でも作れるようになったっていう、
ものを活かしてですね、
もともとできる人が、
AAクード開発で、
より高速化したぜ、
みたいな感じ、
じゃなくて、
本当にできない人、やったことない人向けに、
なるべく分かりやすいような言葉とか、
拒否反応が起こらないような言い方で、
AAクード開発やってみたいな、
楽しいかもって思っていただけるように、
発信をしています。
なのでですね、
何か作りたいものがある方、
作りたいもの今はないけど、
何か作れたら楽しいなっていう方、
あとは福井を知っているなっていう方、
よければ今後とも聞いていただければと思います。
また今回のね、
配信の内容がですね、
面白いな参考になったとか、
あと覚えとこう、
このウェブアプリケーション作るときに、
もう一回聞こう、覚えとこうっていう方いらっしゃいましたら、
いいね高評価していただけると、
めちゃめちゃ嬉しいです。
思われている以上の100倍ぐらい嬉しいです。
誰かに届いてたんだ、
ちゃんと聞いて、いいね押してくれた方がいるんだって思って、
胸アツになるので、
よければポチッとしていただけると、
ありがたいです。
また今回のウェブアプリケーションの作り方、
どういう技術選定をするんだ、
みたいなものに関して、
これはどうなんですかとか、
どうしてそれを選んだんですかとか、
こっちの方がいいと思うんですけど、
ぜひコメントいただければ嬉しいです。
このウェブサービス、
ウェブアプリケーションの技術選定に関しては、
結構僕がロンリーウルフで、
AIとかいっぱい聞いたり、
勉強会のオンラインの配信を見に行ったりして、
結構一人で練り上げてしまったものなので、
実際に他の方、
どういう風にやられているのかなというのを、
もしよければコメント欄で、
違うやり方をしている方がいらっしゃったら、
聞いていただければ嬉しいです。
ここまでご静聴いただきどうもありがとうございました。
AI駆動開発ラボ大森でした。
また次回の放送でお会いしましょう。
またね。
