鳥羽商船高等専門学校Advent Calendar 2024

【無料×クレカなし】初めてのアプリ開発・公開マニュアル

Last updated at 2024-12-26Posted at 2024-12-25

はじめに

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

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

この記事は、「鳥羽商船高等専門学校 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アプリで開発しよう！！

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

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

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

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

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

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): 〇〇
- コード管理: 〇〇

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

おわりに

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up