강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

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

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

（4.9）受講レビュー 10件

受講生 487名

難易度 初級

受講期間 無制限

  • frongttv5414
JavaScript
JavaScript
promise
promise
frontend
frontend
fetch-api
fetch-api
asynchronous-programming
asynchronous-programming
JavaScript
JavaScript
promise
promise
frontend
frontend
fetch-api
fetch-api
asynchronous-programming
asynchronous-programming

受講後に得られること

  • 同時性、非同期メカニズム

  • fetch API & データ通信最適化

  • Debounce、Throttle、AbortController

  • エラーハンドリング、Cache & Retry戦略

  • Stream & Web-Worker

  • AIを活用したバイブコーディングと要求仕様作成

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

  • この講義はこのような悩みから始まりました。

  • AI時代には様々なコーディング支援ツールの活用も必要ですが、それと同時に基礎知識もより一層必要です。

  • フロントエンド、JavaScript開発では、その部分の中で代表的なものがまさに非同期プログラミングです。


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

  • 様々なAI APIを接続し、通信するサービスが増加しています。

  • AIモデルの発展ほどには、ブラウザやネットワークの状況は発展していません。

  • したがって、サービスの変化に合わせて「最適化されたデータ通信」技術が今後より重要になります。

  • データ通信過程の基盤には「非同期プログラミング」の理解が最も重要ですね。


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

  • 概念を身につけて実際に動作する方式を見ることができます。

  • チャプターごとに基本説明 - デモまたは短いミッション方式で、ミッション解説を含みます。

  • すべてのチャプターは独立しており、したがって必要な部分を途中から聞いても構いません。


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

  • 大小様々なミッションを自ら理解・分析して設計し、コーディングしながら自分の知識として習得する必要があります。

  • もちろんAIを活用した学習も並行して行う必要がありますね。（分からないこと、背景知識をより深く質問する）

  • 途中にプロジェクトミッションが一つあります。この過程がなければ、本講義はあまり役に立たない可能性があります。



🍦バニラを基本として扱います。

  • バニラフロントエンドを基本として扱います。

  • 簡単なReactサンプルコードが含まれる例題も入っています。


📚 様々なテーマの特別講義が含まれています。

  • 最後のセッションは「特講」です ^^

  • 非同期プログラミングではありませんが、有用で面白い内容を継続的に更新していこうと思います。

  • 例）AI時代にどのように開発者として成長するか、会社では教えてくれない会社生活のコツなど

  • 数ヶ月に一度ずつ追加・アップデート予定です！

こんな方に
おすすめです

学習対象は
誰でしょう？

  • AI時代でも必ず必要な非同期概念と効果的なデータ通信方法を扱いたい方

  • HTML、CSS、JavaScript 初心者

  • 非同期を正しく理解してプロジェクトを進めたいフロントエンドまたはJavaScript開発者

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

  • HTMLによる簡単な構造化

  • CSS原理と使用方法に対する理解

  • JavaScript基本文法と関数活用

  • 基本的なデバッグ方法

  • NPMとNode.jsに対する理解と活用

  • Reactとは何か、基礎的な文法に対する理解

こんにちは
です。

487

受講生

10

受講レビュー

4

回答

4.9

講座評価

1

講座

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

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

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

カリキュラム

全体

56件 ∙ (7時間 57分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

10件

4.9

10件の受講レビュー

  • gdgd님의 프로필 이미지
    gdgd

    受講レビュー 3

    ∙

    平均評価 5.0

    5

    61% 受講後に作成

    • yujin1kim2793님의 프로필 이미지
      yujin1kim2793

      受講レビュー 7

      ∙

      平均評価 4.7

      4

      100% 受講後に作成

      • tkyoun12409907님의 프로필 이미지
        tkyoun12409907

        受講レビュー 5

        ∙

        平均評価 5.0

        修正済み

        5

        100% 受講後に作成

        本当に素晴らしい講義です。 各セクションごとに知っていると思っていた概念を振り返りながら、実際にはきちんと理解していなかった部分が多いということに気づき、おかげでより深く学ぶことができました。 特に最後のセクションでは、AI時代を生きるジュニア開発者としてどのような観点と態度を持つべきかについて、多くのインサイトを得ることができました。 次のトピックの講義がいつ出るかは分かりませんが、個人的にはぜひ続いてほしいという気持ちです。

        • frongttv5414
          知識共有者

          講義を作りながら考えていた意図をよく感じ取っていただいて、少し驚きました。^^; 受講ありがとうございます。

      • wonseokchang7075님의 프로필 이미지
        wonseokchang7075

        受講レビュー 2

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        • frongttv5414
          知識共有者

          受講&評価ありがとうございます 💯

      • kimjw79503010님의 프로필 이미지
        kimjw79503010

        受講レビュー 1

        ∙

        平均評価 5.0

        5

        30% 受講後に作成

        • frongttv5414
          知識共有者

          受講レビューありがとうございます〜！

      ￥5,412

      似ている講座

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

      プログラミングの始め方：Web入門（Inflearnオリジナル）Course Thumbnail

      プログラミングの始め方：Web入門（Inflearnオリジナル）

      inflearn

      初めてプログラミングを始める方のためのWeb開発入門講座です。HTML、CSS、Javascriptを学び、Instagram投稿カードを作成することで、Webページ作成に不可欠な基本的な内容を学びます。

      Beginner

      Beginner

      HTML/CSS, JavaScript

      プログラミングの始め方：Web入門（Inflearnオリジナル）Course Thumbnail

      プログラミングの始め方：Web入門（Inflearnオリジナル）

      inflearn

      非専門家のための真の入門オールインワン開発ブートキャンプCourse Thumbnail

      非専門家のための真の入門オールインワン開発ブートキャンプ

      grab

      初心者でもできる、ウェブ、サーバー、モバイル アプリ、機械学習まで習得できるフルスタックの最終講義!! 開発をどこから始めたらよいかわからない場合は、この講義を強くお勧めします。Javascript 1 つで進めます!

      Beginner

      Beginner

      JavaScript, React, Node.js

      非専門家のための真の入門オールインワン開発ブートキャンプCourse Thumbnail

      非専門家のための真の入門オールインワン開発ブートキャンプ

      grab

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

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

      vroomfan

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

      Basic

      Basic

      JavaScript, React, Web API

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

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

      vroomfan

      ウェブ標準をしっかり学ぶ（基礎）- 2025Course Thumbnail

      ウェブ標準をしっかり学ぶ（基礎）- 2025

      usefulit

      本コースは、ウェブ標準コーディングを学び活用できる基礎的な知識を提供します。学習者はウェブコーディングの基本原則を理解し、これを基にウェブプログラムを学ぶのに必要な基礎を築くことができます。また、ウェブ標準コーディングを通じて資格取得も可能になるよう構成されています。

      Beginner

      Beginner

      frontend, HTML/CSS, Web Design

      ウェブ標準をしっかり学ぶ（基礎）- 2025Course Thumbnail

      ウェブ標準をしっかり学ぶ（基礎）- 2025

      usefulit

      @시코 - TypeScript をしっかり学ぶ（初中級）Course Thumbnail

      @시코 - TypeScript をしっかり学ぶ（初中級）

      seniorcoding

      質の高い授業で最高のWeb開発者になるためのTypeScript講座です。 全講義受講後、TypeScriptの本質を深く理解でき、次に学ぶReactやNext、Nestなどのエキスパートになれます。

      Basic

      Basic

      TypeScript, React, JavaScript

      @시코 - TypeScript をしっかり学ぶ（初中級）Course Thumbnail

      @시코 - TypeScript をしっかり学ぶ（初中級）

      seniorcoding

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

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

      usefulit

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

      Intermediate

      Intermediate

      JavaScript, ES6

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

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

      usefulit

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

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

      funcoding

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

      Beginner

      Beginner

      HTML/CSS, JavaScript, ES6

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

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

      funcoding

      Sencha ExtJS 6で画面開発をもう心配しないでください。Course Thumbnail

      Sencha ExtJS 6で画面開発をもう心配しないでください。

      extjs

      デザイナー+パブリッシャー+開発者の組み合わせで、ほとんどのサイトを作成します。 純粋にSenchaのExtJSコンポーネントを利用すれば、デザイナーとパブリッシャーなしで画面開発が可能です。 ただし、商用化の目的でExtJSを使用している場合は、ライセンスポリシーを正確に理解して使用してください。

      Basic

      Basic

      JavaScript, ExtJS

      Sencha ExtJS 6で画面開発をもう心配しないでください。Course Thumbnail

      Sencha ExtJS 6で画面開発をもう心配しないでください。

      extjs

      Do It! Django + Bootstrap：Python Web開発の定石Course Thumbnail

      Do It! Django + Bootstrap：Python Web開発の定石

      SungYong Lee

      Python Web 開発 A to Z を学びながら作成! Web の基礎からブログ開発、公開までを一度に学べます。

      Basic

      Basic

      Python, Django, Bootstrap

      Do It! Django + Bootstrap：Python Web開発の定石Course Thumbnail

      Do It! Django + Bootstrap：Python Web開発の定石

      SungYong Lee

      Express.jsをしっかり学ぶ: Part2 エンジン内部の動作原理とクローンプロジェクトCourse Thumbnail

      Express.jsをしっかり学ぶ: Part2 エンジン内部の動作原理とクローンプロジェクト

      nhcodingstudio

      Express.jsを使うレベルを超えて、実際にその内部エンジンを最初から最後まで直接実装し、本物のサーバーの動作原理を体で習得する講義です。ルーター、ミドルウェア、リクエスト-レスポンスオブジェクト、静的ファイル処理、テンプレートレンダリングなど、Expressのすべての構成要素を最初から直接作ってみながら、サーバー開発者として成長する経験を提供します。

      Basic

      Basic

      JavaScript, Node.js, Express

      Express.jsをしっかり学ぶ: Part2 エンジン内部の動作原理とクローンプロジェクトCourse Thumbnail

      Express.jsをしっかり学ぶ: Part2 エンジン内部の動作原理とクローンプロジェクト

      nhcodingstudio

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

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

      July

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

      Beginner

      Beginner

      Go, webrtc, p2p

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

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

      July

      モダンJavaScript(ES6+)の基本Course Thumbnail

      モダンJavaScript(ES6+)の基本

      tonextday

      4つの講座で構成されたJavaScriptバイブル講座の3番目の講座です。JavaScriptスペックの95%以上を扱います。ES6+環境で新しいパラダイムのプログラムを開発することができます。

      Basic

      Basic

      JavaScript, ES6

      モダンJavaScript(ES6+)の基本Course Thumbnail

      モダンJavaScript(ES6+)の基本

      tonextday

      JavaScript 機械学習 TensorFlow.jsCourse Thumbnail

      JavaScript 機械学習 TensorFlow.js

      tonextday

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

      Intermediate

      Intermediate

      Tensorflow, JavaScript, Machine Learning(ML)

      JavaScript 機械学習 TensorFlow.jsCourse Thumbnail

      JavaScript 機械学習 TensorFlow.js

      tonextday

      ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）Course Thumbnail

      ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

      webstoryboy

      ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

      Basic

      Basic

      HTML/CSS, jQuery, JavaScript

      ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）Course Thumbnail

      ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

      webstoryboy

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

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

      jeong4726

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

      Basic

      Basic

      HTML/CSS, JavaScript, Clone Coding

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

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

      jeong4726

      【就職に必須ー実務での協業方法】AIを活用したFigma UX Flowプロトタイピングの作り方Course Thumbnail

      【就職に必須ー実務での協業方法】AIを活用したFigma UX Flowプロトタイピングの作り方

      macro

      弊社の「実際の現場でのやり方」であり、入社する企画者や開発者のための「オンボーディング用動画」を公開します。デザイナーなしでサービス画面をデザインした後、Figmaを知らなくても画面UX Flowを作成し、プロトタイプを作る方法を教えます。弊社がサービス企画時に素早くプロトタイプを作成し、迅速な意思決定と必要な機能の確定を行い、フロントエンド開発に活用することで、生産性を最大化して業務を進めている方法です。反応が良ければ、他の「現場流」の講義もアップロードします。

      Beginner

      Beginner

      Prototyping, Service Planning, frontend

      【就職に必須ー実務での協業方法】AIを活用したFigma UX Flowプロトタイピングの作り方Course Thumbnail

      【就職に必須ー実務での協業方法】AIを活用したFigma UX Flowプロトタイピングの作り方

      macro

      copilotと一緒にpythonをかじってみる（クローリング、データ可視化）Course Thumbnail

      copilotと一緒にpythonをかじってみる（クローリング、データ可視化）

      ddur

      コパイロット (copilot) と一緒に開発に入門してみましょう。 AIと一緒なら小学生でもついていけます！

      Beginner

      Beginner

      AI, Microsoft Copilot, Python

      copilotと一緒にpythonをかじってみる（クローリング、データ可視化）Course Thumbnail

      copilotと一緒にpythonをかじってみる（クローリング、データ可視化）

      ddur

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門Course Thumbnail

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門

      zerocho

      本講義ではJavaScriptを活用してプログラミング思考力を養う練習を行います。ウェブゲームである球球団をはじめとする、数字野球、反応速度テスト、チックタクト、宝くじ抽選機、はさみロック、カードマッチングゲーム、テキストRPG、地雷探し、2048ゲーム、ほくろ捕獲まで一緒に作ってみましょう。

      Basic

      Basic

      JavaScript

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門Course Thumbnail

      [リニューアル]コーディング自律学習ゼロ秒のJavaScript入門

      zerocho

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

      ggangcoding162118

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

      Basic

      Basic

      Interactive Web, JavaScript, HTML/CSS

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

      ggangcoding162118

      Azure Nativeで独自のGPTを作成するCourse Thumbnail

      Azure Nativeで独自のGPTを作成する

      movingshape

      Azure のさまざまなリソースを使用して、独自の GPT を作成、デプロイする講義です。 最初から最後まで！何もない白紙に完全なサービスを配布しましょう！

      Basic

      Basic

      Azure, FastAPI, MongoDB

      Azure Nativeで独自のGPTを作成するCourse Thumbnail

      Azure Nativeで独自のGPTを作成する

      movingshape