青栁幸助
12章 オリジナルアプリ制作を終えて (WEBアプリ開発のコツを掴みかけたような気がする)
2025年12月05日
学習振り返り
見出しはありません
要約
現在学習中の方に向けて、実務体験に入るまでのなんとなくの流れを掴んで欲しいな〜と
思ってこの記事を書きました！！
僕は5月あたりから本格的にShiftBのカリキュラムをスタートし、初めての東京暮らし、動画編集などの慣れない業務と並行しつつも、なんとかここまでやり切ることができました。
正直最初はAIやぶべさんに聞きまくりで、全然わかんねえ…と思っていたのですが、オリアプ開発までやってなんとなくこんな感じか〜というのは掴めた気がするので、一旦ここまでの学習を振り返ろうと思います。
ひとつの節目だと思うので、Progateに始まり、自分でゼロからオリジナルアプリを開発〜マネタイズまでの一通りの流れを書き留めておこうと思います。
自分は元々WEB制作のコーダーで、ある程度のコーディングの実務経験はありました。
HTML,CSS,JavaScript,PHPといった言語、WordPressという既存のシステム、ドメイン・DNS・サーバーなどの関係はなんとなくですが理解できていたと思います。
ShiftBのメインカリキュラムは3章〜12章かな、と勝手に思っているので、それぞれの違いを完全主観でまとめておこうと思います。
ここまでで、JavaScript,TypeScript,React,Next.js＋Web APIといった形で、WEBアプリにおけるフロントエンドの基礎的な部分を学習します。
ここまではTHE プログラミングの座学学習という感じで、新しい言語を覚える的な側面が多いです。基本的にはググったりAIに聞きながらコツコツ進めるという感じです。
わからないところは聞きつつも、ここで詰まってもしょうがない部分はあるので、一旦は完全な理解はすっ飛ばしでいいと思います。(とりあえず動けばおっけい！！)
この章では、microCMSという外部サービスの扱い方をAPI連携を通して学びます。
元々サービス自体は知っていたものの、APIという慣れない概念のせいでWEB制作時代は目を背けていたのですが、いざ触ってみると、「あ、こんなもんか」となったのを覚えています。
WEBアプリ開発において、すべて自分のコードで書き切るといったケースはありえないので、開発に必要なツールの使い方を覚えたり、環境変数などの仕組みを理解するのは大切だな〜と思いました。
この章では、データベースや認証認可といったバックエンドの部分について学びます。
この辺りからかなり雰囲気が変わるな〜と思っていて、純粋にコードの書き方というよりは
概念の理解・Baasの使い方といった部分の割合が大きくなります。
ちょっとコーディングっぽさがなくなりますが、できることがかなり増えるので、ここまで来ると「自分ひとりでアプリ作れるやん！！」となります。
この章は、今までの総決算です。
学習してきたことをフルに活用し、ひたすらエラーと戦いながらオリジナルのアプリを作っていきます。
転職や受託の案件獲得を目指す方がほとんどかと思いますが、自分は割と本気でオリジナルアプリの収益化を目標にShiftBに入ったこともあって、一応3万円のマネタイズは達成しました。(あくまで売り上げですが)
マネタイズまでの流れ、技術構成について解説します。
構想〜マネタイズまで2~3ヶ月かかりました。
とはいえ、割とプライベートの用事や仕事もあったので、アプリ開発1本なら1ヶ月あれば十分だな、と感じました。(クオリティとマネタイズ気にしなければ1,2週間で行けるかも)
こちらが自分が作成したアプリです。(DMいただければShiftB受講生の方はめちゃ割引します！！)
https://www.k-zoku.com/
構想段階で、自分のペイン(痛み)を解決するアプリが一番モチベ維持できるな〜と感じていたので、自分が今一番欲しいアプリを作りました。
StudyPlusという有名な学習記録アプリがあるのですが、それの自分カスタマイズといったイメージです。
あっという間に時間が溶けることが多く、「一体自分は何に時間を使っているんだ…?」となっていたので、それを可視化したかったです。
カリキュラム通り、題材選定、サイトマップ作成、DB設計、デザインと進んで行きました。
デザインまで終わったら、githubでリポジトリを作ります。
その後、超簡易的なサイトマップに沿ったWEBサイト(まだ機能なし)の状態で、一旦vercelにデプロイしてしまいます。(もちろんnoindexやbasic認証付きで)
通常、デプロイは一通り作り切った後にするものですが、僕はさっさとデプロイしてしまった方がいいと思っている派です。
さっさとデプロイしないとゴールが見えづらく、続けるモチベが下がりやすいので、一旦ハードルが低いゴールを達成してしまって、あとは改修するだけ、の方が気持ちが楽です。
その後はひたすらコーディングで機能と見た目を作っていきます。
認証認可含めた機能の実装が終わったら、Stripeのサンドボックスでテスト決済まで実行し、それも通ることを確認したら再度デプロイ、Stripeも本番環境に切り替えます。
ここまで行ければあとはユーザーさんが決済するだけで晴れてマネタイズ達成です！
技術構成は以下です。
Framework: Next.js 14 (App Router)
Library: React 18
Language: TypeScript
Styling: Tailwind CSS
Icons: Lucide React
Animation: GSAP (ScrollTrigger含む)
Charts: Recharts (データ可視化)
Scrollbar: SimpleBar (カスタムスクロールバー)
BaaS: Supabase
Auth: ユーザー認証
Database: PostgreSQL
Storage: 画像保存
ORM: Prisma (PostgreSQLとの接続・操作)
API: Next.js Route Handlers
Service: Stripe
SDK: stripe (Backend), @stripe/stripe-js (Frontend)
Features: サブスクリプション決済 (Checkout Session, Webhook)
Service: Resend
Usage: トランザクションメール送信（アカウント発行通知など）
Hosting: Vercel
Database Hosting: Supabase (Cloud)
独自ドメイン取得〜vercel連携、Resend、Stripeあたりはかなりユニークな知見が溜まったので、どんどんブログにして行ければと思います🔥🔥
みんなで頑張っていきましょう！！
ShiftB ストイックコースの募集まだまだ受け付けております！！
コメント
まだコメントはありません。
本気で学ぶなら、ShiftB
本気で学ぶなら、ShiftB
