강의

멘토링

커뮤니티

Programming

/

Web Development

React.js + Node.js LoL戦績検索サイト作成

この講義はRiot Games APIを活用し、React.jsとNode.jsを用いた「リーグ・オブ・レジェンド戦績検索サイト」を実際に作ってみる実践中心の講義です。 受講生は基本的なAPIの使い方から、フロントエンド(React.js)とバックエンド(Node.js, Express.js)の連携、戦績データの視覚化、そしてop.ggスタイルのUI実装まで、プロジェクトを段階的に追うことで実習を通じて自然に学ぶことができます。 複雑な理論よりも、コードを中心に「実際に真似して作る」ことを通じて、迅速に成果物を体験できます。

難易度 入門

受講期間 無制限

  • neneee
실습 중심
실습 중심
프로젝트
프로젝트
포트폴리오
포트폴리오
React
React
Node.js
Node.js
api
api
Portfolio
Portfolio
Clone Coding
Clone Coding
실습 중심
실습 중심
프로젝트
프로젝트
포트폴리오
포트폴리오
React
React
Node.js
Node.js
api
api
Portfolio
Portfolio
Clone Coding
Clone Coding

受講後に得られること

  • Riot Open API 活用法

  • React.jsでリアルタイム戦績検索UI開発

  • Node.js & Express.jsで バックエンド プロキシサーバー 構築

  • フロント-バック連携およびリアルタイム戦績データ処理

自分だけのロール全検索サイトを作る💡

このレッスンでは、Node.jsとReact.jsを活用して、Riot Games Open APIを連携したロールフル検索サイトを直接作成します。
フロントエンドとバックエンドを分離してREST API構造を理解し、Riot APIを介して実際の完全なデータ照会、ユーザー認証、データ処理、画面出力まで練習します。

Node.jsとExpressを利用したバックエンドの構築、Riot API連携、React.jsを活用したフロントエンド開発など、実戦プロジェクトで必要な全過程を段階的に学習します。
op.ggスタイルの完全な要約と詳細な全画面表示を直接実装し、APIリクエストフロー、データ処理、UI設定の実践的な開発経験を積むことができます。

この講義はコード中心の実習型講義で、複雑な理論なしに直接作成し、Riot APIの活用法とReact.js&Node.jsベースのWebサービス制作能力を自然に習得できるように構成しました。
講義を終えれば、Riot APIを活用した独自のデータ検索サイトを作成することができます。

👏講義をすべて受講してください!

  • プロキシサーバーの構造について

  • OpenAPIの使い方


このようなことを学びます。

React.js + Node.jsを使用したプロキシサーバーの構築💻

簡単なプロキシサーバーを構築し、OP.GGなどの全検索サイトの実装方法を簡単に実装します。 APIのリクエストとレスポンスの構造を簡単に学習し、データを視覚化します。

全検索マッチリスト

公式APIドキュメントの分析とAPIの理解📃

Riot Games Open APIの公式ドキュメントに基づいてAPI仕様を解釈し、実際のサービスに適用する能力をインキュベートします。
API呼び出しの流れと仕様の読み方から実践データの活用まで、段階的に習得します。

Riot公式API

講義資料提供📖

ノッションを活用して講義コードと環境設定ファイルを提供します。

ノッション資料

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):Windows 10、Windows 11、macOS

  • 使用ツール: Visual Studio Code, Postman

  • PC仕様:インターネット接続が可能な基本仕様のPC

学習資料

  • ノッションマークダウンファイルの提供

選手の知識と注意事項

  • React.jsとNode.jsの選手の知識があれば良いです。

  • Riot会員登録

  • 不正な配布と複製を禁止します。学習資料も著作権があり、個人的な学習目的以外の使用を禁じます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React.jsとNode.jsを活用した実践型プロジェクトを通じてウェブ開発スキルを向上させたい初級~中級の開発者

  • Riot Games APIを使用して自分だけのゲーム戦績サイト、データ可視化サービスなどを作成したい方

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

  • React.js

  • Node.js

こんにちは
です。

503

受講生

54

受講レビュー

11

回答

4.5

講座評価

3

講座

웹 개발을 하다가 게임 개발에 빠져 살고 있는 개발자 입니다!

항상 배우는 마음가짐으로!

カリキュラム

全体

23件 ∙ (2時間 40分)

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

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • cksdyd219677님의 프로필 이미지
    cksdyd219677

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    素早く作ってみるのに良いです。 その後の勉強は自分でもう少ししなければなりません

    • hyuk394025809429님의 프로필 이미지
      hyuk394025809429

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

      • alsrl92956022님의 프로필 이미지
        alsrl92956022

        受講レビュー 2

        平均評価 5.0

        5

        30% 受講後に作成

        • ddoyoi님의 프로필 이미지
          ddoyoi

          受講レビュー 38

          平均評価 5.0

          5

          100% 受講後に作成

          とても面白いです

          • kimszin16481님의 프로필 이미지
            kimszin16481

            受講レビュー 2

            平均評価 5.0

            5

            30% 受講後に作成

            期間限定セール、あと1日日で終了

            ¥11,550

            30%

            ¥2,123

            neneeeの他の講座

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

            似ている講座

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