こんにちはAI新潟です!

GitHubでWebページを公開できるようになると、「次は入力した内容を保存したい」「利用者ごとに画面を変えたい」と思うことがあります。そこで登場するのが、サーバーの機能を利用したアプリです。

今回は、Googleが提供するアプリ開発基盤「Google Firebase(以下、Firebase)」を使い、無料枠からサーバー付きアプリを作る考え方を紹介します。難しそうに見えますが、生成AIに相談しながら小さな機能を一つずつ追加すれば、初心者でも次のステップを目指せます。

この記事で分かること

  • サーバーとは何か、なぜ必要なのか
  • GitHubとFirebaseの役割の違い
  • Firebaseを無料枠から使うときの注意点
  • サーバー機能で作れるアプリの例
  • 生成AIを活用した基本的な作り方
アプリの画面とサーバーの役割をお店の売り場とバックヤードに例えた図
サーバーは、アプリの裏側でデータや処理を支える仕組みです。

目次

サーバーとは何でしょうか?

サーバーとは、アプリから届いた要求を受け取り、必要な処理やデータの受け渡しを行う仕組みです。たとえば利用者がフォームへ文字を入力して「保存」を押したとき、その内容を受け取ってデータベースへ保存する役割を担います。

身近なお店に例えると、画面はお客さまが見る売り場、サーバーは注文を受けて作業するバックヤードです。見た目がきれいなページだけでも情報は届けられますが、利用者ごとに情報を預かったり、結果を返したりするには、裏側の仕組みが必要になります。

サーバーがあると何がすごいのか

サーバー機能を使う最大の魅力は、ページを「見るもの」から「使うもの」へ進化させられることです。データを保存する、ログインした人を見分ける、複数人で情報を共有するといった動きが可能になります。

たとえば、新潟のおすすめスポットを投稿して共有するアプリを考えてみましょう。サーバーがなければ、あらかじめ用意した情報を表示する形が中心です。サーバーとデータベースがあれば、利用者が新しいスポットを登録し、その内容を別の人の画面にも表示できます。情報が増え、アプリが育っていく感覚を味わえるのが面白いところです。

GitHubとFirebaseの違い

GitHubは、プログラムのコードや変更履歴を管理し、共同作業や公開に活用できるサービスです。静的なWebページを公開する機能もあり、最初の作品をインターネット上で見てもらう用途に向いています。

一方のFirebaseは、Webサイトの公開に加え、データベース、利用者認証、ファイル保存、サーバー側の処理など、アプリの裏側に必要な機能を組み合わせられる開発基盤です。

どちらか一方を選ぶというより、GitHubでコードを管理し、Firebaseでアプリを公開してデータを扱う、という併用もできます。GitHubが「設計図を管理する場所」、Firebaseが「設計図を動くサービスにする設備」と考えると、違いをつかみやすいでしょう。

Firebaseは無料で使えるのか

Firebaseには、学習や小規模な試作を始めやすい無料枠があります。ただし、すべての機能を無制限に使えるわけではありません。利用できる機能、保存容量、通信量、実行回数などには条件があり、内容は変更される可能性があります。

最初は無料枠の範囲で小さなアプリを試し、使いたい機能が対象かを公式画面で確認しましょう。料金が発生し得るプランへ切り替える場合は、課金条件や予算通知なども事前に確認することが大切です。「無料だから何をしても安心」ではなく、利用状況を見ながら育てる意識を持つと安全です。

GitHubによるコード管理とFirebaseによるアプリ機能の違いを表すイラスト
GitHubでコードを管理し、Firebaseでデータを扱うアプリとして動かせます。

どんなアプリが作れるのか

Firebaseの機能を使うと、次のようなアプリを考えられます。

  • 自分の予定を保存できるToDoアプリ
  • おすすめのお店や観光地を共有する投稿アプリ
  • 参加者の回答を集めるアンケートアプリ
  • 利用者ごとに記録を分ける日記アプリ
  • 新しい投稿を画面へ反映する簡易チャット
  • 生成AIへの依頼履歴を整理する管理アプリ

生成AIと連携するアプリでは、秘密にすべき認証情報をブラウザーへ直接書かず、サーバー側で安全に扱う設計が重要です。Firebaseのサーバー側機能は、そのような処理を置く選択肢にもなります。ただし、外部の生成AIサービスには別途利用条件や料金が設定されている場合があるため、Firebaseの無料枠とは分けて確認してください。

Firebaseアプリの始め方

1.作りたい機能を一つに絞る

最初から多機能なアプリを目指さず、「入力したメモを保存して一覧表示する」程度から始めます。画面、保存、表示という小さな流れが完成するだけでも、サーバー付きアプリの仕組みを体験できます。

2.Firebaseでプロジェクトを準備する

Firebaseの管理画面でプロジェクトを作成し、Webアプリを登録します。その後、目的に合わせて公開機能、データベース、利用者認証などを設定します。管理画面やプランの表示は更新されることがあるため、実際の操作時には公式案内を確認してください。

3.生成AIと一緒にコードを作る

生成AIには、「初心者向けに、入力したメモをFirebaseへ保存して一覧表示する最小構成を説明してください」のように、目的と自分の習熟度を伝えます。生成されたコードをそのまま使うのではなく、ファイルごとの役割や設定箇所も質問すると理解が深まります。

4.動作確認してから公開する

まず自分の端末で、登録、表示、編集、削除などが想定どおり動くか確認します。エラーが出たら、そのメッセージと「何をしたときに起きたか」を生成AIへ伝えると、原因を整理しやすくなります。公開前には、他人に見せてよいデータだけが表示されるかも確かめましょう。

初心者が注意したいこと

特に重要なのが、データベースのアクセスルールです。設定が不適切だと、保存した情報を意図しない人に読まれたり、書き換えられたりする可能性があります。テスト用の緩い設定を公開状態のまま残さず、「誰が、どのデータを、どの条件で操作できるか」を決めてください。

また、パスワード、秘密鍵、外部サービスの機密情報をGitHubの公開リポジトリへ保存しないことも基本です。個人情報や重要な業務データは練習用アプリへ入れず、まずは架空のデータで試しましょう。生成AIの回答にも間違いはあり得るため、権限設定や課金に関わる項目は公式情報と照合する姿勢が欠かせません。

初心者が小さなFirebaseアプリを完成させて次の一歩を踏み出す様子
まずは小さな保存アプリから、サーバー付き開発を体験してみましょう。

まとめ

GitHubでページを公開できたら、次の挑戦としてFirebaseを使ったサーバー付きアプリがあります。データの保存、ログイン、情報共有などが加わることで、作品は見るだけのページから、利用者が操作できるサービスへ大きく進化します。

まずは「メモを一件保存する」といった小さな成功を目指してみてください。無料枠の条件、アクセスルール、機密情報の扱いを確認しながら進めれば、生成AI初心者でもアプリ開発の面白さを実感できます。

AI新潟では、生成AIを暮らしや仕事へ取り入れるための分かりやすい情報を発信しています。この記事をきっかけに、あなたならではの便利なアプリを考え、最初の一歩を踏み出してみませんか。

AIで人生をもっと楽しく、未来をもっと豊かに