12章オリジナルアプリ制作を終えて (WEBアプリ開発のコツを掴みかけたような気がする)

公開: 2025年12月05日

学習振り返り

要約

ShiftBのカリキュラムを通じて、WEBアプリの開発からマネタイズまでの一連の流れを体験した。
フロントエンドの基礎から始め、API連携やバックエンドの理解を深め、オリジナルアプリの開発に挑戦。
自身のペインを解決するアプリを作成し、実際に3万円のマネタイズを達成した。

音声で記事を再生

0:00

現在学習中の方に向けて、実務体験に入るまでのなんとなくの流れを掴んで欲しいな〜と
思ってこの記事を書きました！！

僕は5月あたりから本格的にShiftBのカリキュラムをスタートし、初めての東京暮らし、動画編集などの慣れない業務と並行しつつも、なんとかここまでやり切ることができました。
正直最初はAIやぶべさんに聞きまくりで、全然わかんねえ…と思っていたのですが、オリアプ開発までやってなんとなくこんな感じか〜というのは掴めた気がするので、一旦ここまでの学習を振り返ろうと思います。

ひとつの節目だと思うので、Progateに始まり、自分でゼロからオリジナルアプリを開発〜マネタイズまでの一通りの流れを書き留めておこうと思います。

学習前〜

自分は元々WEB制作のコーダーで、ある程度のコーディングの実務経験はありました。
HTML,CSS,JavaScript,PHPといった言語、WordPressという既存のシステム、ドメイン・DNS・サーバーなどの関係はなんとなくですが理解できていたと思います。

ShiftBのメインカリキュラムは3章〜12章かな、と勝手に思っているので、それぞれの違いを完全主観でまとめておこうと思います。

3章〜8章

ここまでで、JavaScript,TypeScript,React,Next.js＋Web APIといった形で、WEBアプリにおけるフロントエンドの基礎的な部分を学習します。
ここまではTHE プログラミングの座学学習という感じで、新しい言語を覚える的な側面が多いです。基本的にはググったりAIに聞きながらコツコツ進めるという感じです。

わからないところは聞きつつも、ここで詰まってもしょうがない部分はあるので、一旦は完全な理解はすっ飛ばしでいいと思います。(とりあえず動けばおっけい！！)

9章

この章では、microCMSという外部サービスの扱い方をAPI連携を通して学びます。
元々サービス自体は知っていたものの、APIという慣れない概念のせいでWEB制作時代は目を背けていたのですが、いざ触ってみると、「あ、こんなもんか」となったのを覚えています。

WEBアプリ開発において、すべて自分のコードで書き切るといったケースはありえないので、開発に必要なツールの使い方を覚えたり、環境変数などの仕組みを理解するのは大切だな〜と思いました。

10章・11章

この章では、データベースや認証認可といったバックエンドの部分について学びます。
この辺りからかなり雰囲気が変わるな〜と思っていて、純粋にコードの書き方というよりは
概念の理解・Baasの使い方といった部分の割合が大きくなります。
ちょっとコーディングっぽさがなくなりますが、できることがかなり増えるので、ここまで来ると「自分ひとりでアプリ作れるやん！！」となります。

12章

この章は、今までの総決算です。
学習してきたことをフルに活用し、ひたすらエラーと戦いながらオリジナルのアプリを作っていきます。
転職や受託の案件獲得を目指す方がほとんどかと思いますが、自分は割と本気でオリジナルアプリの収益化を目標にShiftBに入ったこともあって、一応3万円のマネタイズは達成しました。(あくまで売り上げですが)

マネタイズまでの流れ、技術構成について解説します。
構想〜マネタイズまで2~3ヶ月かかりました。
とはいえ、割とプライベートの用事や仕事もあったので、アプリ開発1本なら1ヶ月あれば十分だな、と感じました。(クオリティとマネタイズ気にしなければ1,2週間で行けるかも)

こちらが自分が作成したアプリです。(DMいただければShiftB受講生の方はめちゃ割引します！！)
https://www.k-zoku.com/

構想段階で、自分のペイン(痛み)を解決するアプリが一番モチベ維持できるな〜と感じていたので、自分が今一番欲しいアプリを作りました。
StudyPlusという有名な学習記録アプリがあるのですが、それの自分カスタマイズといったイメージです。

あっという間に時間が溶けることが多く、「一体自分は何に時間を使っているんだ…?」となっていたので、それを可視化したかったです。

カリキュラム通り、題材選定、サイトマップ作成、DB設計、デザインと進んで行きました。

デザインまで終わったら、githubでリポジトリを作ります。
その後、超簡易的なサイトマップに沿ったWEBサイト(まだ機能なし)の状態で、一旦vercelにデプロイしてしまいます。(もちろんnoindexやbasic認証付きで)

通常、デプロイは一通り作り切った後にするものですが、僕はさっさとデプロイしてしまった方がいいと思っている派です。
さっさとデプロイしないとゴールが見えづらく、続けるモチベが下がりやすいので、一旦ハードルが低いゴールを達成してしまって、あとは改修するだけ、の方が気持ちが楽です。

その後はひたすらコーディングで機能と見た目を作っていきます。

認証認可含めた機能の実装が終わったら、Stripeのサンドボックスでテスト決済まで実行し、それも通ることを確認したら再度デプロイ、Stripeも本番環境に切り替えます。

ここまで行ければあとはユーザーさんが決済するだけで晴れてマネタイズ達成です！

技術構成は以下です。

フロントエンド (Frontend)

Framework: Next.js 14 (App Router)
Library: React 18
Language: TypeScript
Styling: Tailwind CSS
Icons: Lucide React
Animation: GSAP (ScrollTrigger含む)
Charts: Recharts (データ可視化)
Scrollbar: SimpleBar (カスタムスクロールバー)

バックエンド & データベース (Backend & Database)

BaaS: Supabase
- Auth: ユーザー認証
- Database: PostgreSQL
- Storage: 画像保存
ORM: Prisma (PostgreSQLとの接続・操作)
API: Next.js Route Handlers