フロントエンド開発のスパイス、Web API (feat. React)

Name: フロントエンド開発のスパイス、Web API (feat. React)
Price: 19800 KRW
Rating: 5 (4 reviews)

実務で活用できるWeb APIを扱います。一度は必ず直面するであろう要件を解決するための武器を、ぜひ手に入れてください。

（5.0）受講レビュー 4件

受講生 139名

難易度初級

受講期間 無制限

vroomfan

JavaScript

React

Web API

JavaScript

React

Web API

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

5.0

고슈

100% 受講後に作成

よく使われるWeb APIを見て回ることができてよかったです。エッセンスだけが集められていますね！！気軽に聞ける良い講義です。最高 👍

5.0

망고

100% 受講後に作成

WEB APIについてより詳しく知ることができて良かったです。もう少し実務的な観点や例示のコードを見せていただけたら、もっと良かったと思います

5.0

Jang Jaehoon

33% 受講後に作成

良い講義をありがとうございます！

受講後に得られること

ブラウザでWeb APIが動作する仕組み
Web Workerで負荷を軽減する方法
異なるコンテキスト（window、tab、iframeなど）間で通信する方法
Timer, Animationをより正確に使用する方法

フロントエンド開発のスパイス、Web API

FE開発を進める中で自然と触れることになるfetchやsetTimeoutだけでなく、Worker、MessageChannel、MutationObserverといった、別途学習が必要なAPIもあります。

一般的なFE機能の実装にとどまらず、タブの非アクティブ化への対応、異なるタブ間でのデータ転送、重複するサーバーリクエストの削減など、徹底したバグ対応や最適化のためにはWeb APIが不可欠です。

実務を進める中で、難しい要件の実装や、特殊なバグへの対応、パフォーマンスの最適化など、様々な問題をWeb APIで解決できることを知りました。

実務で直面しうる状況を反映した例を通じて、詳細な要件をWeb APIで実装する方法を学んでいただければ幸いです。

次のような状況に直面したことはありますか？ 🤔

地図上でユーザーの移動動線を可視化する

時間情報が含まれた座標データに基づき、経過時間ごとに地図上に線を描画して移動経路を可視化する必要があります。データは以下の通りです。

[{ lng: 127.10, lat: 37.50, time: 1000ms },
{ lng: 127.11, lat: 37.51, time: 1700ms },
{ lng: 127.12, lat: 37.52, time: 2100ms }, ...]
- setTimeout(drawLine, 1000); setTimeout(drawLine, 1700 - 1000); setTimeout(drawLine, 2100 - 1700); ... このように、それぞれの time に合わせて setTimeout を連続で呼び出せばよいでしょうか？
- setTimeoutが意図通りに動作しない状況もありますか？ある場合、どのように対応すべきでしょうか？
複数タブのデータを同期する
タブAの投稿作成ページで新しい記事を作成したとき、タブBの投稿一覧ページでも作成した新しい記事がすぐに表示される必要があります。
- タブAで新しい投稿を作成した際、その投稿の情報をタブBに渡し、タブBでこの値を使ってリストの状態(state)を更新すればよいでしょうか？
  { type: 'newPost', title: 'title_1', author: 'author_1', ... }
- タブAで新しい投稿が作成されたという通知をタブBに送り、タブBでその情報を受け取ったときに一覧取得APIを再実行すればよいでしょうか？
  
  { type: 'refetchPosts' }
- それでは、異なるタブ間で上記のようなデータをやり取りする方法は何でしょうか？

Q&A 💭

Q. 講座の難易度はどのくらいですか？

基本的なReactの文法、イベントループの概念、ウェブ関連の基礎知識は習得していることを前提に進められます。基礎知識さえあれば、新しいWeb APIはスムーズに付いていくことができます。授業資料の中で理解できないコードがあれば、お気軽に質問を残してください。

Q. 授業はどのような方式で進められますか？

セクションごとに新しい課題が提示されます。まず、その課題を基本的なJS/CSSで解決する方法を確認し、そのコードで発生する可能性のあるバグや例外状況を調べます。その後、問題をより確実に解決するためのWeb APIを紹介し、Web APIを使って目的の機能を実装します。

Q. 授業で使用する特別なライブラリはありますか？

JavaScript Web APIの講座であるため、別途ライブラリを学ぶ必要はありません。ただし、スムーズな授業進行のためにzod(TS validation)やws(ウェブソケット)などのライブラリがpackage.jsonに含まれています。

💾受講前の注意事項

Web、Javascript、Reactに関する基礎知識が必要です。
授業で使用された全ソースコードを提供します。授業ではコードを一行ずつ読み上げることはせず、授業の進行に必要な部分だけを読み上げるため、コードを一緒に確認することをおすすめします。

👨‍🎓 推奨される学習方法

提供される授業資料のコードと授業動画を一緒に見ながら受講されることをおすすめします。
セクションの最後に出題されるミッションは、ご自身で解いてみることをお勧めします。

こんな方に
おすすめです

学習対象は
誰でしょう？

実務でsetTimeout、fetch Web APIだけを使っている方
複雑な要件をWeb APIの概念で解決したい方

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

React, Javascript 基本文法
npmの使い方

こんにちは
vroomfanです。

1,046

受講生

受講レビュー

回答

4.5

講座評価

講座

こんにちは。
スタートアップで4年間フロントエンドエンジニアとして働いています。
React、Next.js、地図、チャート、UIライブラリなどを扱っています。

ポートフォリオ

カリキュラム

全体

25件 ∙ (2時間 5分)

講座資料（こうぎしりょう）:

授業資料

ミッション

セクション 1．講義紹介

4件 ∙ (14分)

1. Web APIとは
03:05
2. Web APIは魔法ではない
09:15
3. 授業方式の紹介
01:52
4. 授業資料ダウンロード

セクション 2．タイマー関数(setInterval, setTimeout)を正確に使う

5件 ∙ (15分)

5. タイマー関数を実行し、ブラウザが非アクティブになる状況
01:30
6. setIntervalを使用した解法
02:51
7. Page Visibilityを利用した解法
07:12
8. Web Workerを利用した解法
04:18
Page Visibility + setTimeout 使用時のバグ対応

セクション 3．負荷を軽減する Web Workers API

4件 ∙ (15分)

セクション 4．異なるコンテキストを繋ぐメッセージAPI

5件 ∙ (32分)

セクション 5．JSでアニメーションを制御するAnimation API

4件 ∙ (25分)

セクション 6．ボーナス Web API

3件 ∙ (22分)

講座掲載日: 2025/06/03

最終更新日: 2025/12/30

受講レビュー

全体

4件

5.0

4件の受講レビュー

fined0006806
受講レビュー 46
∙
平均評価 4.7
2025/10/23
5
100% 受講後に作成
WEB APIについてより詳しく知ることができて良かったです。もう少し実務的な観点や例示のコードを見せていただけたら、もっと良かったと思います
jjhgwx
受講レビュー 755
∙
平均評価 4.9
2025/07/23
5
33% 受講後に作成
良い講義をありがとうございます！
yoonc017672
受講レビュー 8
∙
平均評価 5.0
2025/09/28
5
32% 受講後に作成
go5ue
受講レビュー 4
∙
平均評価 5.0
2025/06/07
5
100% 受講後に作成
よく使われるWeb APIを見て回ることができてよかったです。エッセンスだけが集められていますね！！気軽に聞ける良い講義です。最高 👍

vroomfanの他の講座

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

Next.js はじめ方（feat. 地図サービス開発）

vroomfan

Next.jsの基本を扱う講座です。 Next.jsで地図サービスを最初から最後まで開発してみます。

初級

Next.js, SEO, vercel

Next.js はじめ方（feat. 地図サービス開発）

vroomfan

似ている講座

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

ヤルコの最も簡単なReact（リアクト）

yalco

説明隊長ヤルコの濃厚で充実した講座で、最も簡単に、最も速くReactを学びましょう！

初級

JavaScript, React, Node.js

ヤルコの最も簡単なReact（リアクト）

yalco

フロントエンド・マスタークラス

hoonyhan

Web開発の経験が最低1年以上の学生および実務者のための、上級フロントエンド講座です。実務で2〜3年以上の経験があり、スキルの停滞期を感じている方や、大企業で考慮すべき製品構造について学びたい方に最適な内容となっています。

中級以上

JavaScript, React, Functional Programming

フロントエンド・マスタークラス

hoonyhan

Reactマスタークラス：Part 3 - 実務の核心ライブラリ攻略 (TypeScript, Zustand, React Hook Form, TanStack Query)

nhcodingstudio

AIが生成した断片的なコードと複雑なReactエコシステムの間で制御権を失っていく問題を、Zustand、TanStack Query、React Hook Form、Zod、React Compilerなど、主要なReactライブラリの内部動作原理を工学的に分析することで根本的に解決します。ツールの単純な活用を超え、Reactエンジンのパフォーマンスとデータフローを直接制御する方法を習得することで、いかなる危機的状況でも即座に対応できる強固な「エンタープライズ・アーキテクチャ設計の筋肉」を身につけることができます。

初級

JavaScript, React, TypeScript

Reactマスタークラス：Part 3 - 実務の核心ライブラリ攻略 (TypeScript, Zustand, React Hook Form, TanStack Query)

nhcodingstudio

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

タイプスクリプトを正しく理解するには、公式文書を一度見てください。文書の重要な部分だけがコックを拾い、分かりやすく伝えます。実戦に必要な内容も一緒にお知らせする講義です！

入門

TypeScript, JavaScript, ES6

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

ezweb

React + TypeScriptを活用して実務感覚で「タスク管理アプリ（ToDo List）」を直接作るプロジェクト中心のコースです。単純に文法を学ぶだけでなく、コンポーネント構造設計 → 状態管理 → 型適用 → 機能実装 → ローカルストレージ連携 → デプロイまで実際のサービス形態で完成させながらTypeScriptの活用感覚を身につけることができます。

初級

HTML/CSS, JavaScript, React

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

ezweb

誰も教えてくれないWebRTCを使ったP2P通信

July

WebRTCを活用して実装するウェブカメラとピア間通信について学習できます。

入門

Go, webrtc, p2p

誰も教えてくれないWebRTCを使ったP2P通信

July

React + GPT APIでAI回顧録サービス開発（ワンデイクラス）

dodocoding

1時間で終えるReactベースのGPT AIサービス講義受講後、自分だけのAI GPT SASSソリューションを構築してみましょう。

初級

React, ChatGPT, JavaScript

React + GPT APIでAI回顧録サービス開発（ワンデイクラス）

dodocoding

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

コーディング1位 YouTubeのジョコーディングの本番圧縮！簡単で楽しいWebフルスタック開発講義

入門

HTML/CSS, JavaScript, Node.js

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

初級

REST API, GraphQL, React

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

JavaScriptオブジェクト指向、理論ではなく「作りながら」学びます（戦略AI編）

nhcodingstudio

📌 この講義は、戦略型AI三目並べプロジェクトから始まり、オブジェクト指向プログラミングの核心概念まで実践例で完成させるカリキュラムです。ゲーム実装でロジック設計とAI戦略思考を訓練し、続いて継承、合成、委譲、カプセル化のようなOOP設計技術を直接コードで体験します。実際のプロジェクトで文法を超えて「設計する開発者」として成長したい方におすすめします。

初級

HTML/CSS, JavaScript, oop

JavaScriptオブジェクト指向、理論ではなく「作りながら」学びます（戦略AI編）

nhcodingstudio

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

実務で実際にWebサービスを開発した経験をもとに、入門者が実際に商用化も可能なレベルのWebとアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中で、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript + ES6をすべてしっかりと整理する講座です。

入門

HTML/CSS, JavaScript, ES6

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

関数型プログラミングとJavaScript ES6+アプリケーション

mduniv

このコースは、関数型プログラミングとJavaScript ES6 +のシリーズコースで、さまざまなアプリケーションケースをカバーしています。

中級以上

JavaScript, Functional Programming

関数型プログラミングとJavaScript ES6+アプリケーション

mduniv

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

中級以上

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

SpringAI + Reactで作る自分だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です！

初級

React, Kotlin, Spring Boot

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

初級

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

クリーンアップ JavaScript：ベースビルドアップ！

tonextday

思考を扱います。JavaScriptの核心と根本を論理的に整理できます。JavaScriptの経験や考えを自ら整理できるようになります。JavaScriptの技術論理を確立できます。JavaScript全体を見渡す視野を広げることができます。JavaScriptの技術面接対策ができます。

初級

JavaScript, Interview, Tech Interview

クリーンアップ JavaScript：ベースビルドアップ！

tonextday

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong4726

この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。（フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

初級

HTML/CSS, JavaScript, Clone Coding

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong4726

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

初級

React, Electron, GUI

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

AIウェブ開発実践プロジェクト (Stitch · Figma Make · React)

ezweb

「生成AIを活用して企画・デザイン・実装・デプロイまで完成させるWeb開発実践プロジェクト講座」アイデアの構想から始まり、AIでデザインをパッと作成し、Reactで実際に動作するウェブサイトの実装、そしてインターネットへのデプロイまで、すべての過程をステップバイステップで一緒に完成させます。 StitchやFigma Makeといった最新のAIツールがデザイン作業をサポートし、複雑なコーディングも段階ごとに簡単に進められるようお教えします。

初級

React, Figma, stitch

AIウェブ開発実践プロジェクト (Stitch · Figma Make · React)

ezweb

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

初級

Interactive Web, JavaScript, HTML/CSS

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

フロントエンド開発のスパイス、Web API (feat. React)

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

5.0

受講後に得られること

フロントエンド開発のスパイス、Web API

次のような状況に直面したことはありますか？ 🤔

講義を通じて学ぶWeb API 7つのポイント✅

学習カリキュラム 📚

Section 1. 講義紹介

Section 2. タイマー関数を正確に使用する

Section 3. Web Workers API

Section 4. Message API

Section 5. Web Animations API

Section 6. ボーナス Web API

Q&A 💭

こんな方に
おすすめです

こんにちは
vroomfanです。

カリキュラム

受講レビュー

vroomfanの他の講座

似ている講座

フロントエンド開発のスパイス、Web API (feat. React)

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

5.0

受講後に得られること

フロントエンド開発のスパイス、Web API

次のような状況に直面したことはありますか？ 🤔

講義を通じて学ぶWeb API 7つのポイント✅

学習カリキュラム 📚

Section 1. 講義紹介

Section 2. タイマー関数を正確に使用する

Section 3. Web Workers API

Section 4. Message API

Section 5. Web Animations API

Section 6. ボーナス Web API

Q&A 💭

こんな方に おすすめです

こんにちは vroomfanです。

カリキュラム

受講レビュー

vroomfanの他の講座

似ている講座

こんな方に
おすすめです

こんにちは
vroomfanです。