0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Geminiと一緒に学習しながらWebアプリを作成する#1

Posted at

どの様なアプリを作成するか?

スポーツ等の大会の運用で使用するリーグ・トーナメント表を作成するアプリを作ります。

作成しようと思った背景

とあるスポーツの大会などを運営する方から、リーグを2つ用意して大会を進めていく際に前大会の成績や力関係を考慮したリーグ作成が手間だと話を聞いていた。
→「リーグ数・チーム名・力の序列」のデータ入力して自動で作成したら楽じゃない?
と、考えたので作成することに決めました。

Geminiを使っていく

使用するプラン:PRO
Gem:コーディングパートナー

Geminiに尋ねる

まず、どういったアプリを作成していきたいのかを伝えます。
Webアプリの開発を考えています。
機能としては、
スポーツなどの試合のリーグ・トーナメントの試合を自動で組んでくれるアプリです。
チームを入力したら力関係を考慮してリーグ・トーナメントを構成したい。
ランダムでもリーグ・トーナメントを構成したい。
リーグ・トーナメントの数も入力して構成に影響させたい。
できたら試合結果などを入力してリーグであれば勝ち点や得失点差を計算できる様にしたい。
大会ごとに試合結果を管理できる様にしたい。
スプレッドシートやエクセルで試合結果をダウンロードできる様にしたい。
DBでも同様に大会ごとに結果などを管理できる様にしたい。
アプリを実装するにあたって私の知識と経験はNext.js,Express,Docker,等です。
デプロイ先はAWSかそれ以外の無料で使用できるプラットフォームで考えています。
Prismaを使用するかや、どういったライブラリなどを使用して実装するかまでは考えきれていません。
おすすめなどを提案していただけると幸いです。
後、学習も兼ねているのでお題を出しながらの形で進めていきたいと考えています。
今までChatGPTやGeminiを触っている感覚としては、やりたいと考えていることはできるだけ詳細に全ての情報を伝えてあげると良いと思います。
より自分の作りたいものや欲しい情報に近づくのではないかと感じています。(AIは基本的に察してもらえないものとして接することでストレスが少なくなりました。)
Geminiからの回答
こんにちは!コーディング パートナーです。
これから一緒に、あなたの素晴らしいアイデアを形にしていくお手伝いをさせてください。
スポーツのリーグ・トーナメント自動生成アプリ、とても面白そうですね!
全力でサポートしますので、一緒に楽しみながら開発を進めていきましょう!

プロジェクトの概要と技術選定
まず、これから作るアプリケーションの構成と、それに合った技術の組み合わせを考えてみましょう。
あなたの経験や目標に合わせて、以下の様な構成はいかがでしょうか。

フロントエンド: Next.js
あなたの経験を活かせますし、サーバーサイドの処理も書けるので非常に強力です。

データベース(DB): PostgreSQL
無料で始められるプランが多く、信頼性も高い人気のデータベースです。
将来的にアプリが大きくなっても安心です。

ORM (DB操作ライブラリ): Prisma
あなたが検討している通り、Prismaは素晴らしい選択です!
データベースの構造を直感的に書けて、安全にデータを操作できます。学習にも最適です。

バックエンド処理: Next.js (API Routes)
Expressの経験も素晴らしいですが、今回はNext.jsのAPI Routes機能を使いましょう。
フロントエンドとバックエンドの開発をNext.jsに集約できるので、プロジェクトがシンプルになります。

Excel/スプレッドシート出力: xlsx
JavaScriptでExcelファイルを簡単に作成できる人気のライブラリです。

デプロイ先: Vercel
Next.jsを開発している会社が提供しているプラットフォームで、非常に相性が良いです。
無料で簡単にWebアプリを公開できます。まずはVercelから始めてみるのがおすすめです。

この構成で進めていくことで、モダンで効率的な開発ができます。


最初のステップ:プロジェクトの準備をしよう!
それでは、早速最初のステップに進みましょう!
学習も兼ねているとのことなので、お題形式で進めていきますね。

お題1:Next.jsとPrismaでプロジェクトの骨組みを作る

まずは、アプリケーションの土台となる部分を構築します。データベースと接続し、大会の情報を保存する準備を整えましょう。

1. Next.js プロジェクトの作成
最初に、ターミナル(コマンドプロンプトやPowerShellなど)を開いて、以下のコマンドを実行してください。
これにより、Next.jsプロジェクトの雛形が作成されます。
npx create-next-app@latest league-tournament-app --typescript --tailwind --eslint

...(略)

この様にして技術選定・プロジェクトの準備から作成までお手伝いをしてくれます!

次の記事では実際にプロジェクトの作成をするところから始めていきたいと思います!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?