Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Full-stack

1日で作る自分だけのビジュアルノベルゲーム

React、Javascript、SpringAI、Springbootを通じて自分だけのビジュアルノベルゲームを作ってみましょう。 SpringAIとReactを通じてウェブベースのビジュアルノベルゲームを作る方法をお教えします!

  • yeseong0412
  • hhhello
실습 중심
AI 활용법
백엔드이해하기
토이프로젝트
리액트감잡기
React
Spring Boot
AI
SpringAI

学習した受講者のレビュー

こんなことが学べます

  • Reactを活用したウェブベースゲーム(ビジュアルノベル)制作方法

  • 簡単なアニメーション・エフェクト適用で没入感のあるウェブサイト作り

  • SpringAI(GPT API)活用方法

  • 独創性のあるアイデア導出方法

一日で作る自分だけのビジュアルノベルゲーム

React、Spring Boot、人工知能(AI)、SpringAI

🚀 たった一日で、あなたのアイデアがビジュアルノベルゲームとして生まれます。

あなたが毎日触れるゲームたち、
その中の一つくらいは「私も一度作ってみたい」という考え、したことはありませんか?

しかし、いざ始めようとすると…
"フロントエンド、バックエンド?何から始めればいいの?"
"AIも付けたいけど、GPT APIは難しそうだし…"
"説明書を読むだけで疲れてしまう…"

👉 この講義は、そんな迷い挫折感を終わらせるために作られました。


これから私たちが作るゲームストーリーを一度見ていってください!

こんな方におすすめです

🥳

CRUDじゃなくて独特なフロントエンドを作ってみたい

既存のCRUD以外で特別なプロジェクトを作ってみたい方

😘

サーバーとフロントを一緒に経験したくて

フロントエンドのみやサーバーのみを扱っていた方でも両方できるフルスタックWebベースビジュアルノベルゲーム作り

🤩

AIを活用したプロジェクトをやりたい

SpringAIでGPT APIを呼び出して自分だけのキャラクター応答値を作ってみてください

🎮 この講義を受講すると?

  • たった一日で、自分だけのストーリーを持つビジュアルノベルゲームを完成させます。

  • Reactでフロントエンドを直接作りながら目の前でキャラクターとシーンが動く体験をします。

  • Spring Boot + SpringAIでバックエンドを接続してAIがセリフを作ってくれるゲームを実装します。

  • 「AI + ゲーム + ウェブアプリ」という最新技術の組み合わせをポートフォリオに含めることができます。

この講義の特徴

🎯 この講義の核心的特徴&差別化ポイント

  1. Inflearn初、ウェブベースのビジュアルノベルゲーム講座

    • 従来はビジュアルノベルゲームの講義は主にUnityやゲームフレームワーク中心でしたが、
      この講義はReact + Spring Boot + SpringAIウェブで直接楽しめるゲーム制作を扱います。

    • 「Web環境でAIと連動したインタラクティブゲーム」を学ぶことができる独創的な講義です。

  2. 実習中心、一日で成果物完成

    • 理論だけを羅列する一般的な講義ではありません。

    • 手を動かしながらコードを書き、シーンやキャラクターを目の前で動かしながら即座に達成感を感じることができます。

  3. 最新技術スタックの実戦適用

    • ReactでUI実装、Spring Bootでバックエンド接続、SpringAIでGPT API活用まで実務核心技術を同時に経験します。

    • ゲーム制作という興味深いテーマを通じて最新のWeb開発スキルを自然に学習します。

  4. AIと創作の融合

    • 単純にコーディングだけを学ぶ講義ではありません。

    • AIを活用してキャラクターの台詞を生成し、ストーリーを動的に変化させる体験を提供します。

    • 創作と開発を同時に体験できる唯一無二の講義です。

  5. ポートフォリオ及び実務連携可能

    • 単純な実習用プロジェクトではなく、ポートフォリオに載せることができる完成度を提供します。

    • 「AI + ウェブ + ゲーム」の組み合わせは、今後の就職、インターン、創作活動において強力な差別化要素となります。


こんな内容を学びます

Springboot SpringAIを作って学ぶ

講義を追いながらChatGPT APIをSpringAIを通じて呼び出す方法を学び、簡単なプロンプトエンジニアリングの理論と実習を通じて自分だけのキャラクター回答を作る方法をお教えします。

React + JSでつくる自分だけのビジュアルノベルゲーム

他では見ることのできなかったアイデアであるReactで自分だけのウェブビジュアルノベルゲームを作りながら、皆さんの独創的なアイデアを表現する方法について説明します。

😱 この講義を見逃してはいけない理由

  • 今は「AI + 創作」がトレンドです。
    他の人より先に体験して成果物を作ることが、競争力の始まりとなります。

  • React + Spring Bootという実務の核心スタックを、ゲームという興味深いテーマで学ぶため、絶対に退屈しません。

  • この講義は理論中心ではありません。
    直接コードを書き、結果を目で確認し、完成品を手にすることができます。

「いつか学ぼう…」と先延ばしにしている瞬間、
すでに誰かがあなたが作りたかった自分だけのゲームを作っています。

こんにちは、知識共有者のNeoです!

  • Kotlinを主に扱うサーバー開発者として、サーバー開発、デプロイ、Spring AIなど様々な開発講座を作成しています。

  • シンプルで淡白な短い講義で、理論よりも実践中心で講義を進めています。

  • 様々なプロジェクトを簡単で手軽に皆さんが真似できるよう講義を制作しており、様々な方が経験したことのないものを簡単に経験できるようにすることが私のモットーです。

ご質問はありますか?

Q1. コーディングが苦手なのですが、本当に一日でゲームを作ることができますか?

👉 この講義は「大規模プロジェクト」ではなく、短くてインパクトのあるトイプロジェクトを目標にしています。
プログラミングの基礎さえあれば十分についてこられるよう、直接コードを書きながら実習中心で進めていきます。
複雑なロジックは私が事前に準備しましたので、皆さんはゲームが目の前で完成していく楽しさを感じることに集中していただければと思います。

Q2. わざわざReactとSpringBoot、そしてSpringAIまで一緒に学ぶ必要がありますか?

👉 実際「ゲームを一つだけ作る」なら、わざわざ全部使う必要はありません。
しかし、この講義は単純に「ゲーム完成」が目的ではなく、実務で使われる核心技術スタック面白いプロジェクトで身につけることが目的です。

  • React → フロントエンド核心技術

  • Spring Boot → 安定したバックエンド構造

  • SpringAI → AIをサービスに接続する方法
    つまり、講義を終えると単純なゲームではなく、ポートフォリオに書けるAIベースのWebプロジェクトを持つことになります。

Q4. この講義をすべて聞き終えたら、どこで活用できるでしょうか?

👉 様々な方向があります。

  1. クリエイターとして:直接書いたストーリーをウェブベースのゲームとして配布することができます。

  2. 開発者として:React + SpringBoot + AIを組み合わせた経験をポートフォリオに入れて実務でアピールすることができます。
    ゲームを作るということは「楽しい経験」ですが、同時に履歴書に確実に残る強みになるでしょう。

受講前の参考事項

実習環境

  • MacOS環境で講義を進めますが、Windowsの方々も付いてこられると思います。

  • 講義で活用されるIntellij、Postman、GPTなどのセッティング&インストール方法をお教えします。

  • 講義ビジュアルノベルストーリーは、事前に作成されたスクリプト形式でNotionの学習資料として提供されます。

学習資料

  • 学習資料(Notionリンク)を提供いたします。

前提知識および注意事項

  • 開発を経験されたことがあれば、無理なくついてこられます。

  • コンピュータが好きで、プログラムのインストールについてこられるなら、無理なく開発を進めることができます。

  • 各言語の基礎について知っていると便利ですが、知らなくても構いません。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 直接ストーリーを書いて、自分だけのビジュアルノベルゲームを制作してみたい人

  • React を実戦プロジェクトに適用してみたいフロントエンド開発者志望生

  • ウェブで動作するインタラクティブコンテンツ制作に興味のあるクリエイター

  • 短時間で完成度の高いWebアプリを作ってみたい初・中級開発者

前提知識、
必要でしょうか?

  • React

  • JavaScript

  • Kotlin

  • 基本コーディング技術

こんにちは
です。

829

受講生

88

受講レビュー

15

回答

4.7

講座評価

17

講座

안녕하세요! 인프런에서 강의를 진행하고 있는 Neo 입니다.

평소 접하지 못했던 개발기술들을 다양한 분들이 접할 수 있도록 하는게 제 목표입니다.

그래서 저는 단순한 이론 나열보다 실무 중심의 커리큘럼을 구성하고, 실제로 손을 움직이며 배울 수 있는 실습 위주의 강의를 제공하고자 합니다.

 

초보자도 부담 없이 따라올 수 있도록 최대한 가볍고 친절한 접근으로 내용을 구성하고 있으며, 지식에 대한 진입 장벽을 낮추는 것에 특히 집중하고 있습니다.

가끔은 마음이 같은 분들과 함께 강의 작업을 진행하기도 합니다!

カリキュラム

全体

15件 ∙ (2時間 18分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

3件

5.0

3件の受講レビュー

  • Neo님의 프로필 이미지
    Neo

    受講レビュー 17

    平均評価 5.0

    5

    100% 受講後に作成

    웹기반 비주얼노벨 게임을 만들어보실 수 있습니다

    • DKN님의 프로필 이미지
      DKN

      受講レビュー 7

      平均評価 5.0

      5

      100% 受講後に作成

      아이디어가 신박하네요 재밌었습니다~

      • Neo
        知識共有者

        감사합니다! 더욱 좋은 강의로 찾아뵐 수 있도록 노력하겠습니다!!

    • HelloWorld님의 프로필 이미지
      HelloWorld

      受講レビュー 7

      平均評価 5.0

      5

      100% 受講後に作成

      프로젝트가 신기하네요 잘보고 갑니다

      • Neo
        知識共有者

        강의를 들어주셔서 감사합니다! 더 신박한 강의로 찾아뵙겠습니다!!

    期間限定セール

    ¥23,100

    30%

    ¥4,020

    yeseong0412の他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!