はじめに

この記事では、初めてアプリ開発を行う方がまず何から始めていけばいいか、公開方法、おすすめの技術構成（無料でクレカなし！）を紹介します。

記事公開時点で無料かつクレカなしで開発・公開できるサービスを紹介していますが、将来的に無料プランが廃止される可能性があります。
これまでにも無料プランが廃止になったサービスをたくさん見てきたためです。

この記事は、「鳥羽商船高等専門学校 Advent Calendar 2024」の12月11日の記事です。（盛大に遅れてしまい申し訳ありません）

結論

初めてのアプリ開発は、Webアプリから始めるのがおすすめです（スマホアプリやデスクトップアプリより開発が容易なため）
開発・公開に必要な技術やサービスは、無料かつクレカなしで揃えることができます
ホスティングサービス（例: Cloudflare Pages）とデータベース（例: Cloudflare D1）の組み合わせで、完全無料で運用できます
開発から公開までの流れは、要件定義→技術選定→開発→テスト→デプロイの順で進めます
アプリ開発は失敗を恐れず、まずは小さな機能から始めることが大切です

自己紹介

皆さんこんにちは。たからーん (@takara2314) といいます。

今年3月に鳥羽商船高等専門学校情報機械システム工学科を卒業し、今は東京のIT企業でソフトウェアエンジニアをやらせてもらっています。

学生時代は高専ロボコン（2年生で幽霊部員になった）や高専プロコン、DCONなどのコンテスト活動や、業務委託でアプリ開発やプログラミング教室の先生を行っていました。

フロントエンドやバックエンド、インフラ、デザイン、要件定義など、幅広く経験しています。

対象読者

アプリを作ったことがない人
クレカを持てない高専生/学生
0円でアプリを公開したい高専生/学生

今回話さないこと

企画
クレカ登録すれば実質0円で公開できる構成
その技術を使った具体的なアプリの設計
技術の細かい話（こういう技術を使うといいんだよ！という触り程度の話を心がけます）
ノーコードツール
認証

何かしらアプリを開発してみたい！

授業や技術書、オンライン学習サービスを使ってプログラミングを勉強したあなた！そうそこのあなたです。何かしらアプリを開発してみたい！って思っていますよね。

でもどこから開発すればいいのかわからない、どの技術を使えばいいかわからない、みんなに使ってもらうために公開はどうやってするの？という疑問を抱いていると思います。

そこで、この記事では初めての方向けに、アプリ開発から公開までのマニュアルを紹介します。なるべく専門用語や難しい技術は使わず、「とりあえず開発して公開する」ということを目標にします。

また、「完全0円」、「クレカなし」で開発を行うことを縛りにして説明を行います。
（こういう系の記事は、意外と実質0円とか、クレカ登録必須だけど0円といった記事が多くて、クレカを持てない学生にはちょっときついかなと思ったので。）

この記事でのアプリの定義

まずはこの記事で説明するアプリの定義から行っていきましょう。
この記事で「アプリ」というのは、主に「アプリケーションソフトウェア」のことを指します。

アプリケーションソフトウェア（英: application software）あるいはアプリケーションプログラム（application program）は、ある特定の機能や目的のために開発・使用されるソフトウェアで、コンピュータの操作自体のためのものではないもの。コンピュータ・プログラムの一種であり、たとえば、ワープロソフト、表計算ソフト、イラスト作成（お絵かき）用ソフトウェア、写真加工用ソフトウェアなどを指す。

(引用元: https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)

つまり、

Androidスマホのホームから起動するアプリ
iPhoneスマホのホームから起動するアプリ
Windowsのデスクトップアプリ
Macのデスクトップアプリ
Windowsで動くゲームアプリ
ブラウザで動くWebアプリ
駅の発券機の液晶で操作するアプリ
テレビのメニューで操作するアプリ

などがアプリケーションソフトウェアになります。

Webアプリにしない？

この記事では、初めてのアプリ開発では、Webアプリを作ることを強く強く推奨します。

なぜかというと：

デバッグや検証がしやすい（今あなたが使っているブラウザから検証できる）
必要なプログラミング言語（JavaScriptやTypeScript）の習得が比較的簡単
どのOSのPCでも作れる（iPhoneアプリだとMacが必須）
アプリを公開するのに審査がいらない（スマホアプリだとGoogle PlayやApp Storeの審査が必須）
アプリを公開するためのサーバー（ホスティング環境）を無料で用意できる（VercelやCloudflare Pagesなど推奨）
ブラウザが入っている端末なら、どの端末でも動く
ブラウザからWebアプリを触れるので、端末にアプリをインストール不要（スマホアプリはインストールが必要） → 使ってもらいやすい
アプリのアップデートを適用しやすい → 変更をユーザーにすぐに適用させられる
Webアプリの技術を活かして、デスクトップ向けアプリも作れる（ElectronやTauriフレームワークを使う）
スマホアプリと同じような振る舞いができる（スマホのセンサーの値や位置情報も取得できる）
スマホのホームから起動するアプリも作れる（PWAという技術）
Webアプリが最近増えてきている（将来性はものすごく高いです）
Webアプリの技術がアツい（ブラウザから日常的に使うサービスを使えるようになっていますよね？それはWebアプリ周りの技術が発達している証拠です）

ほぼメリットしかない！！Webアプリで開発しよう！！

どんなアプリを作りたいか考えよう（提供する機能を考えよう）

ちょっと前に書いた、以下の記事を参考にしてください！

そのアプリで叶えたい世界観や目的を機能として落とし込んで考えていきましょう。

おすすめの技術・サービス構成（無料×クレカなし）

まずは、アプリ開発に必要な技術やサービスの構成を紹介します。
初めての方でも扱いやすく、かつ将来性のある技術を厳選しました。

プログラミング言語: JavaScript か TypeScript
フレームワーク: Next.js
スタイリング(UI): Tailwind CSS
ホスティング環境: Cloudflare Pages か Vercel
データベース: Cloudflare D1 か Neon か Supabase か TiDB Cloud Serverless
データベース操作(ORM): Prisma
コード管理: GitHub

プログラミング言語

Webアプリは、ボタンを押したときの処理や、何かを入力されたときの処理など、ブラウザが裏側で行っている処理をプログラミング言語で記述していきます。

代表的な言語としては、 JavaScript と TypeScript があります。

JavaScriptは、ブラウザで動くプログラミング言語です。
初めてプログラミングを学ぶ方でも、基本的な文法は1週間程度で習得できます。
また、オンラインの学習リソースも豊富で、困ったときにも解決策を見つけやすいのが特徴です。

TypeScriptは、JavaScriptのスーパーセットで、JavaScriptのコードをより安全に書くことができる言語です。
（C言語のように型を指定してコードを書くことができるので、コード全体の挙動を把握しやすいのと、エラーを出しやすいため、バグを減らしやすいです）

ブラウザはTypeScriptを直接実行することはできず、アプリ公開時に裏でJavaScriptに変換してから実行します。

JavaScriptと比べて少し習得が面倒ですが、後々来るメリットが大きすぎるので TypeScript がおすすめです！

フレームワーク

JavaScriptやTypeScriptだけでもアプリを作れますが、フレームワークを使うとより便利にアプリを作れます。

代表的なフレームワークとしては、 Next.js や Nuxt.js 、 Angular 、 SvelteKit などがあります。
（「Webフロントエンドフレームワーク」で調べるとたくさん出てきます）

その中でも Next.js は以下の理由でおすすめです：

情報量が多く、困ったときに解決策を見つけやすい
アプリ特有の手の込んだ処理も直感的に書ける
パフォーマンスが優れている
大規模なアプリケーションでも安定して動作する
Vercelという会社が開発しており、継続的なアップデートが期待できる

スタイリング(UI)

CSSだけでもスタイルを組むことができますが、CSSのフレームワークを使うことで、より直感的にスタイルを組むことができます。

代表的なCSSフレームワークとしては、 Tailwind CSS や Bootstrap 、 Material UI などがあります。
（「CSSフレームワーク」で調べるとたくさん出てきます）

その中でも Tailwind CSS は、以下の理由でおすすめです。

クラス名を組み合わせるだけで、デザインを作れる
レスポンシブデザイン（画面サイズに応じたデザイン）が簡単に実現できる
カスタマイズ性が高く、オリジナルのデザインも作りやすい
コンポーネント化しやすく、再利用性が高い

ホスティング環境（アプリを公開するサーバー）

Webアプリの中身は、Webサイトなので、Webサイトを公開するサーバーが必要です。

代表的なサービスとしては、 Cloudflare Pages や Vercel 、 Netlify などがあります。
（「Webサイトホスティング」で調べるとたくさん出てきます）

その中でも Cloudflare Pages は、以下の理由でおすすめです。

無料プランの制限が緩い（月間リクエスト数の制限なし）
CDN（コンテンツ配信ネットワーク）が世界中にあり、高速
GitHubと連携して自動デプロイができる
SSL証明書の設定が自動で行われる
カスタムドメインの設定が無料

データベース

データベースは、ユーザーやサイトに表示するデータを保存する場所です。

データベースはRDB（MySQLやPostgreSQLなどSQLを使うデータベース）とNoSQL（SQLを使わないデータベース）の2種類がありますが、開発初期かつ初めての開発の場合はRDBを推奨します。

NoSQLやNoSQLを使ったサービスは制約が多くなりがちで（集計が弱いなど）、新規開発初期にあり得る仕様変更にかえって柔軟に対応できなかったり、データの一貫性が保証されていないので、ループで情報を表示する系のページを作るときに苦労します。
（もちろんNoSQLはデータを挿入しやすかったり、速いなどの究極なメリットがありますが）

無料で使えるRDBのサービスとしては、 Cloudflare D1 や Neon、 TiDB Cloud Serverless などがあります。

選定ですが

MySQLを使いたい場合 → TiDB Cloud Serverless
- MySQLと互換性があり、使い慣れた方におすすめ
- 無料枠が5GiBと大きい
- スケーラビリティが高い
PostgreSQLを使いたい場合 → Neon か Supabase
- PostgreSQLの機能をフルに使える
- バックアップが自動で取られる
- 開発者向けの機能が充実
SQLiteを使いたい場合 → Cloudflare D1
- Cloudflareのサービスと相性が良い
- シンプルで扱いやすい
- 高速な読み書きが可能

もしCloudflareにホスティングする場合は、 Cloudflare D1 がおすすめです。
無料で多くのデータ量を保存でき、速度が速いです（Cloudflareのサービスからでないと呼び出せないので）。
ストレージも5GBまで無料で使えます。

それ以外の場合は TiDB Cloud Serverless がおすすめです。
こちらも無料で使うことができ、ストレージ5GiBまで無料で使えます。
MySQLと互換性があるため、MySQLの知識がそのまま活かせます。

データベース操作

一つ一つSQLを実行するのは面倒です。そこで、データベース操作のためのツールとして Prisma がおすすめです。

Prismaを使うと以下のようなメリットがあります。

TypeScriptと相性が良く、型安全なデータベース操作が可能
直感的なAPIでデータベース操作ができる
マイグレーション（データベースの構造変更）が簡単
データベースのスキーマ（構造）をコードで管理できる
Visual Studio CodeなどのIDEと連携して、補完機能が使える

コード管理

コード管理は、 GitHub がおすすめです。
GitLabやBitbucketなどもありますが、GitHubには以下のような利点があります。

世界最大のコード共有プラットフォーム
多くのホスティングサービスと連携可能
情報量が豊富で、困ったときに解決策を見つけやすい
プロジェクト管理機能も充実
オープンソースプロジェクトとの連携が容易

技術構成は決まったけど、具体的にどうやってアプリを開発すればいいの？

アプリ開発の流れを、初めての方でもわかりやすいように順を追って説明します。

1. 開発環境の準備

まずは自分のパソコンに必要なソフトウェアをインストールしていきます。

Node.jsのインストール

Node.jsは、Webアプリを開発するために必要な基本ソフトウェアです。
公式サイト(https://nodejs.org/) から、「LTS」と書かれているバージョンをダウンロードしてインストールしましょう。

開発フレームワークの準備

次に、実際の開発に使うフレームワークをインストールします。

Next.jsの環境構築
- コマンドプロンプトやターミナルを開き、以下のコマンドを実行します
- npx create-next-app@latest my-app
- 途中で設定を聞かれますが、基本的にはデフォルトのままでOKです
Tailwind CSSの環境構築
- Next.jsプロジェクトを作成する際に、Tailwind CSSを使うかどうか聞かれます
- 「Yes」を選択すれば自動でセットアップされます
Prismaの環境構築
- 作成したプロジェクトフォルダで以下のコマンドを実行します
- npm install prisma @prisma/client
- npx prisma init

2. 各種アカウントの作成

開発に必要なサービスのアカウントを作成します。

GitHubアカウントの作成
- https://github.com にアクセスし、「Sign up」からアカウントを作成
- メールアドレスと任意のユーザー名、パスワードを設定します
- アカウント作成後、新しいリポジトリ（コードの保存場所）を作成します
データベースのアカウント作成
- TiDB CloudやCloudflareにアクセス
- 無料プランでアカウントを作成し、データベースを作成します

3. アプリの開発

実際のアプリ開発に入ります。

データベース設計（Prisma）
- schema.prismaファイルにテーブル設計を記述
- 例：ユーザー情報テーブル、投稿データテーブルなど
- npx prisma db pushでデータベースに反映
ページの作成（Next.js）
- appフォルダ内に必要なページを作成
- 例：トップページ、ログインページ、ユーザーページなど
- 各ページの機能を実装していきます
デザインの適用（Tailwind CSS）
- 作成したページにTailwind CSSのクラスを使ってデザインを適用
- レスポンシブデザインも簡単に実装可能

4. アプリの公開

完成したアプリをインターネット上に公開します。

ホスティングサービスの準備
- Cloudflare PagesやVercelにアカウントを作成
- GitHubと連携の設定を行います
デプロイ（公開）
- GitHubにコードをアップロード
- ホスティングサービスと連携して自動デプロイ

困ったときの対処法

1. 検索キーワード例

開発中につまずいたら、以下のようなキーワードで検索してみましょう。

「Next.js チュートリアル初心者」
「Tailwind CSS 使い方基本」
「Prisma データベース接続方法」
「GitHub リポジトリ作成方法」
「Vercel デプロイ方法」

2. AIを活用しよう

今はChatGPTやGeminiなどのAIが発達していて、AIをプログラミングの先生として活用すると、効率的に開発を進められます。
以下のようなプロンプト（質問文）を使ってみましょう。

あなたは、アプリ開発の経験があるプログラマーです。
以下の技術構成で〇〇のアプリを作りたいです。

技術構成
- プログラミング言語: 〇〇
- フレームワーク: 〇〇
- スタイリング(UI): 〇〇
- ホスティング環境: 〇〇
- データベース: 〇〇
- データベース操作(ORM): 〇〇
- コード管理: 〇〇

どんな流れでアプリを開発すればいいですか？
ロードマップやチュートリアルを丁寧に教えてください。

おわりに

ここまで読んでいただきありがとうございました。
少しでもお役に立てれば幸いです。