NEW

Front-end

AI時代のWeb開発：非同期プログラミングとデータ通信最適化（フロント特講）

JavaScriptデベロッパーのための非同期プログラミング概念とデータ通信最適化技法を扱います。

224名 が受講中です。

frongttv5414

프론트엔드

자바스크립트

javascript

frontend

JavaScript

promise

fetch-api

asynchronous-programming

こんなことが学べます

同時性、非同期メカニズム
fetch API & データ通信最適化
Debounce、Throttle、AbortController
エラーハンドリング、Cache & Retry戦略
Stream & Web-Worker
AIを活用したバイブコーディングと要求仕様作成

🤖 AI時代のWeb開発者にはどのような能力が重要でしょうか？

この講義はこのような悩みから始まりました。
AI時代には様々なコーディング支援ツールの活用も必要ですが、それと同時に基礎知識もより一層必要です。
フロントエンド、JavaScript開発においては、その部分の中で代表的なものがまさに非同期プログラミングです。

📟 最近、非同期プログラミングは本当に重要なのでしょうか？

様々なAI APIを接続し、通信するサービスが増加しています。
AIモデルの発展ほどには、ブラウザやネットワークの状況は発展していません。
したがって、サービスの変化に合わせて「最適化されたデータ通信」技術が今後より重要になります。
データ通信過程の基盤には「非同期プログラミング」の理解が最も重要ですね。

🧑🏻‍🏫 講義コンテンツはどのような形で進行されますか？

概念を身につけて、実際に動作する方式を見ることができます。
チャプター別に基本説明 - デモまたは短いミッション方式で、ミッション解説を含みます。
すべてのチャプターは独立しており、したがって必要な部分を途中から聞いても構いません。

🙆🏻‍♂️ この講義を成功的に自分のものにするには？

大小様々なミッションを自ら理解・分析して設計し、コーディングしながら自分の知識として習得する必要があります。
もちろんAIを活用した学習も並行して行う必要がありますね。（分からないこと、背景知識をより深く質問する）
途中にプロジェクトミッションが一つあります。この過程がなければ、本講義はあまり役に立たない可能性があります。

こんな方に
おすすめです

学習対象は
誰でしょう？

AI時代でも必ず必要な非同期概念と効果的なデータ通信方法を扱いたい方
HTML、CSS、JavaScript 初心者
非同期を正しく理解してプロジェクトを進めたいフロントエンドまたはJavaScript開発者

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

HTMLによる簡単な構造化
CSS原理と使用方法に対する理解
JavaScript基本文法と関数活用
基本的なデバッグ方法
NPMとNode.jsに対する理解と活用
Reactとは何か、基礎的な文法に対する理解

こんにちは
です。

TmaxSoft, NAVER, NHN NEXT, SK Planet 등에서 일했어요.

우아한테크캠프, NAVER 부스트캠프, 현대소프티어 부트캠프등의 웹프론트엔드 커리큘럼을 설계/진행했어요

'프롱트' 유튜브 웹개발 채널 운영 (https://www.youtube.com/@frongt)중입니다.

カリキュラム

全体

55件 ∙ (7時間 36分)

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

授業資料

セクション 1．並行プログラミング

3件 ∙ (17分)

セクション 2．イベントループとコールバックキュー

3件 ∙ (34分)

4. コールスタックとJavaScriptデバッグ
10:55
5. イベントループと単一スレッドの不正確性
07:58
6. 復習-イベントとタイマー制御(実習)
15:22

セクション 3．非同期フロー制御 - タイマーとコールバック

2件 ∙ (21分)

7. タイマー制御
15:27
8. コールバック地獄と関数分離
06:29

セクション 4．Promiseパターン

5件 ∙ (49分)

セクション 5．マイクロタスクキュー

5件 ∙ (18分)

セクション 6．Fetch APIの理解と活用

6件 ∙ (54分)

セクション 7．認証と非同期リクエスト

5件 ∙ (54分)

セクション 8．非同期エラー処理 Part-1

3件 ∙ (25分)

セクション 9．非同期エラー処理 Part-2

4件 ∙ (25分)

セクション 10．プロジェクトミッション

2件 ∙ (38分)

セクション 11．非同期通信制御と応答一貫性

2件 ∙ (21分)

セクション 12．非同期通信の安定性とキャッシング戦略 Part1

4件 ∙ (22分)

セクション 13．非同期通信の安定性とキャッシング戦略 Part2

5件 ∙ (23分)

セクション 14．Stream方式のデータ通信

4件 ∙ (35分)

セクション 15．ワークスレッドで同時性を確保する

2件 ∙ (13分)

講座掲載日:

最終更新日:

受講レビュー

まだ十分な評価を受けていない講座です。

みんなの役に立つ受講レビューを書いてください！

期間限定セール

￥2,598

68%

￥8,140

似ている講座

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

リアクト（React.js）を利用した独自のYouTubeサイト作成プロジェクト

webstoryboy

レッスンでは、ReactフレームワークとYouTube APIを使用して独自のリアクトなYouTubeビデオサイトを作成します。 Reactの基本概念を理解し、コンポーネントを構造化し、状態を管理する方法を学びます。また、YouTube Data APIを利用して外部データを取得する方法を学び、APIレスポンスを処理してユーザーに意味のある情報を提供する方法を理解します。これにより、独自のYouTubeサイトを作成し、活用することを目指します。

초급

React, HTML/CSS, JavaScript

リアクト（React.js）を利用した独自のYouTubeサイト作成プロジェクト

webstoryboy

非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで

Jiwoon Jeong

私が好きなユーチューバーのグルメマップを作成しながら、フロントエンド、バックエンド、Kakao Map API の使用方法、公開までを一度に学べるフルスタックグルメマップの講義です。

초급

HTML/CSS, JavaScript, REST API

非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで

Jiwoon Jeong

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

zerocho

タイプスクリプト/JavaScriptでペイントを作成し、さまざまなデザインパターンの使い方と長所と短所を学びます。 canvas apiを学べるのはボーナス！

중급이상

Design Pattern, oop, TypeScript

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

zerocho

一度で終わらせるJavaScript: バニラJavaScriptでSPA開発まで

hyobin

基本文法から応用概念まで学習しながら、バニラJavaScriptでSPAを開発してみましょう🔥

초급

JavaScript, SPA, DOM

一度で終わらせるJavaScript: バニラJavaScriptでSPA開発まで

hyobin

ウェブプログラミングの華！JavaScript基礎

ezweb

JavaScriptを使ってHTMLの要素を選択し、様々なイベントに応じて要素のスタイルを変更したり、アニメーション効果を実装します。JavaScriptの基本文法から、スタイル変更、イベント設定、そしてウェブページの作成時に頻繁に使用される効果を実装します。

초급

HTML/CSS, JavaScript, vanilla-javascript

ウェブプログラミングの華！JavaScript基礎

ezweb

まともに売るJavaScript(JavaScript) - by ヤルコ(Yalco)

yalco

プログラミング初心者でもついてこられる優しい講座！現役開発者をJavaScriptのエキスパートにしてくれる究極の講座！

초급

JavaScript

まともに売るJavaScript(JavaScript) - by ヤルコ(Yalco)

yalco

コーディング初心者からWebサービスの立ち上げまで：2021済州コーディングベースキャンプ（Django）

jejucoding

済州島で開催されるブートキャンプをオンラインで！自分のサービスを素早く作成してみましょう！ :)

입문

Python, HTML/CSS, JavaScript

コーディング初心者からWebサービスの立ち上げまで：2021済州コーディングベースキャンプ（Django）

jejucoding

関数型プログラミングとJavaScript ES6+

mduniv

ES6+と関数型プログラミングを学べる講義です。このコースでは、ES6+のイテラブル/イテレータ/ジェネレータプロトコルを詳細に扱い、応用します。イテラブルに基づく関数型プログラミング、map/filter/reduce、パイプライン、ジェネレータによる遅延評価、Promise合成、同時性/並列性、async/awaitと非同期エラー処理などを学ぶことができます。このコースを習得して練習して、中級のJavaScript開発者に成長しましょう！

초급

JavaScript, Functional Programming

関数型プログラミングとJavaScript ES6+

mduniv

Webプログラミング(HTML5+CSS+javaScript)

software25766

初心者のためのWebプログラミング講義。 HTML、CSS、JavaScriptの基本的な文法と活用法を段階的に学習できるように構成されています。 Webページの構造とデザイン、インタラクション機能の実装など、Web開発の重要な要素をカバーしています。

입문

HTML/CSS, JavaScript, Responsive Web

Webプログラミング(HTML5+CSS+javaScript)

software25766

クリーンアップ JavaScript: ベース構築!

tonextday

考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

초급

JavaScript, Interview, Tech Interview

クリーンアップ JavaScript: ベース構築!

tonextday

バイブコーディング With Claude Codeでウェブサービス作り

ref63184917

現職スタートアップCTOが実際のサービスと複数の外注を通じて得たバイブコーディング知識をお伝えします。

입문

HTML/CSS, JavaScript, Next.js

バイブコーディング With Claude Codeでウェブサービス作り

ref63184917

初めてのFlutter（Flutter）基礎から実戦まで [フルスタック Part4] （簡単で堅実に段階別で多様なプロジェクトまで）

funcoding

この講座は、Dartプログラミングの基礎からFlutterの基本および中級機能、さらにはバックエンドであるFirebaseを連携させ、実際のプロジェクトまで！Flutterを段階的に習得できる完成度の高い講座です。

초급

Flutter, Firebase, firestore

初めてのFlutter（Flutter）基礎から実戦まで [フルスタック Part4] （簡単で堅実に段階別で多様なプロジェクトまで）

funcoding

サーバーフレームワークをゼロから構築：Express.jsエンジンのクローン作成

nhcodingstudio

このコースは単にExpress.jsを使用するだけではありません。その内部エンジンを最初から最後まで再構築し、サーバーがどのように動作するかの真の原理を実践的に体験できます。ルーティング、ミドルウェア、リクエスト・レスポンスオブジェクト、静的ファイル処理、テンプレートレンダリングなど、Expressの各コンポーネントを直接作成することで、サーバー開発者として成長し、フレームワークがコアでどのように動作するかを真に理解できるようになります。

초급

JavaScript, Node.js, Express

サーバーフレームワークをゼロから構築：Express.jsエンジンのクローン作成

nhcodingstudio