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

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

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

（5.0）受講レビュー 4件

受講生 136名

難易度初級

受講期間 無制限

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の使い方

こんにちは
です。

1,041

受講生

受講レビュー

回答

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分)

講座掲載日:

最終更新日:

受講レビュー

全体

4件

5.0

4件の受講レビュー

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

￥2,442

vroomfanの他の講座

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

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

vroomfan

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

초급

Next.js, SEO, vercel

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

vroomfan

似ている講座

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

オープンソースのJavaScript Reactプログラミング入門 Part.3

usefulit

Reactは、Facebookで作成されたオープンソースのJavaScriptライブラリです。 JavaScriptを使用して、コンポーネントベースのUIを作成できます。シングルページアプリケーション（SPA）の作成に最適化された現在最も人気のあるフロントエンド開発ライブラリであるリアクトを使用して、Web開発に必要なすべてのコンポーネントを学習します。 Part3では、1つの完成したデータベース処理Webアプリを作成します。

초급

React

オープンソースのJavaScript Reactプログラミング入門 Part.3

usefulit

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

hoonyhan

Web開発の経験が最低1年以上ある学生および実務者のための上級フロントエンド講座です。最も適した対象者は、現場で2〜3年以上の経験を積み、スキルの停滞期を迎えている方、または大企業で考慮すべき製品構造について学びたい方のために作られました。

중급이상

JavaScript, React, Functional Programming

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

hoonyhan

フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2

hackurity01

React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。

중급이상

React, Chrome DevTools

フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2

hackurity01

React(リアクト)学習の始まり

usefulit

本コースは、React学習を初めて始める学習者のために構成された入門コースです。 JSXの基礎文法を体系的に学習し、これを直接適用できるミニプロジェクトを通じて実務感覚を身につけることを目標とします。単純な文法学習を超えて、React開発の基本的な流れとコンポーネントベースの開発方式を理解できるように構成されています。

입문

React

React(リアクト)学習の始まり

usefulit

Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

neneee

Spring Boot + React.js ログイン（+ソーシャル）サービスを理解するとは、 JWTベース認証およびソーシャルログイン(Kakao/Google)を含む実践型ログインシステムを直接実装しながら、フロントエンドとバックエンドの認証フローを深く理解できるように設計された講座です。フロントエンドはReact.js、バックエンドはSpring Bootをベースに構成されており、実際のサービス環境で使われる Access Token + Refresh Token方式、HttpOnly Cookie、Reduxを活用したユーザー状態管理、 Roleベース権限処理、ソーシャルログイン連携まで一つずつ実践しながら習得できます。

초급

React, Node.js, REST API

Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

neneee

まだ生きている不死の jQuery - 基礎から実務まで

ezweb

全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

초급

HTML/CSS, JavaScript, jQuery

まだ生きている不死の jQuery - 基礎から実務まで

ezweb

# [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

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

초급

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

초급

Next.js, supabase, React

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

ES6文法と組み合わせたモダンJavascript（JavaScript）高度なPart.3

usefulit

JavaScriptプログラミング言語を最新のES6文法で学習するように企画されたコースです。

중급이상

JavaScript, ES6

ES6文法と組み合わせたモダンJavascript（JavaScript）高度なPart.3

usefulit

[コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース

codecamp

コーディングと恋に落ちた8年目のフルスタック開発者Captainの私心がいっぱいのカリキュラムです。バックエンドのすべてをすべてお知らせしたいCaptainの心が溶けます！このレッスンを聞くと、これまで教えてくれますか？＆＃x27;という考えを震えることができないでしょう。みんなが難しい部分までぜひ噛んで食い込んでくれるこの講義で始めましょうか？

입문

NestJS, Node.js, JavaScript

[コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース

codecamp

JavaScript 機械学習 TensorFlow.js

tonextday

JavaScript 環境で機械学習の概念を扱います。 JavaScript と TensorFlow.js を使って機械学習を実装する形式とコードを扱います。

중급이상

Tensorflow, JavaScript, Machine Learning(ML)

JavaScript 機械学習 TensorFlow.js

tonextday

JavaScript + jQueryの基礎から実務まで：高度なPart.1

usefulit

理論と実習を通じてJavaScriptを習得できる講義です。 JavaScriptにある程度慣れた方のための講義です。 Part 1はJavaScriptのクラスとオブジェクト指向プログラミングの内容を扱っています。

중급이상

JavaScript, jQuery

JavaScript + jQueryの基礎から実務まで：高度なPart.1

usefulit

[PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

nybs

フロントエンドプロジェクトのミッションコンテンツです。DevTimeというタイマーアプリを直接実装しながらプロジェクト実習ができるよう、PRD企画書、Figmaデザイン、APIエンドポイントを提供します。実際のサービスと同等レベルのプロジェクトを実装しながら、これまで学習した知識を完璧に自分のものにしてみましょう 🚀

입문

React

[PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

nybs