강의

멘토링

커뮤니티

Programming

/

Front-end

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

実務に適用できるWeb APIを扱います。一度はきっと直面するであろう要件を解決する武器を手に入れてください。

  • vroomfan
이론 실습 모두
JavaScript
React
Web API

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

受講後に得られること

  • ブラウザでのWeb APIの動作原理

  • ウェブワーカーで負荷を減らす方法

  • 異なるコンテキスト(window, tab, iframe など)が通信する方法

  • Timer, Animationをより正確に使う方法

丁寧なFE開発者のためのWeb API
様々な例題を通じた簡単で素早い理解!

フロントエンド開発のKick、Web API

FE開発をしながら自然に触れることになるfetch、setTimeoutだけでなく、Worker、MessageChannel、MutationObserverなど別途勉強しなければならないAPIもあります。

一般的なFE機能実装を超えて、タブ非アクティブ状況対応/異なるタブ間のデータ送信/重複サーバーリクエスト削減など、きめ細かいバグ対応と最適化のためには、Web APIが必須です。

実務を進める中で、厳しい要件を実装したり、一般的でないバグ状況に対応したり、パフォーマンスを最適化するなど、様々な問題をWeb APIで解決できることを知りました。

実務で遭遇する可能性のある状況を反映した例題を通じて、詳細な要求事項をWeb APIで実装する方法を学んでいただければと思います。

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

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


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


    [{ 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が意図通りに動作しない状況もあるでしょうか?ある場合、どのように対応すべきでしょうか?

  2. 複数タブのデータ同期
    タブAの投稿作成ページで新しい投稿を作成した時、タブBの投稿一覧ページでも作成した新しい投稿がすぐに表示される必要があります。


    • タブAで新しい投稿を作成した時、該当投稿に関する情報をタブBに渡し、タブBでこの値を利用してリスト状態(state)を更新すれば良いでしょうか?
      { type: 'newPost', title: 'title_1', author: 'author_1', ... }

    • タブAで新しい投稿が作成されたという信号をタブBに送り、タブBでこの情報を受け取った時にリストを読み込むAPIを再度呼び出せばよいでしょうか?


      { type: 'refetchPosts' }

    • それでは、異なるタブ間で上記のようなデータをやり取りする方法は何でしょうか?


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

  1. Chromiumコードを通じてWeb APIが動作する原理の理解

  2. タブが非アクティブになった時のTimerの動作と対応方法

  3. Workerでメインスレッドの負荷を軽減する

  4. WebSocket接続を最小化してサーバー負荷を軽減する

  5. 異なるbrowsing context間でのデータ転送

  6. アニメーションをcssではなくjsで制御する

  7. 実務のための追加的なWeb API


学習カリキュラム📚

Section 1. 講義紹介

ブラウザのソースコードを通じてWeb APIがJavaScriptの機能をどのように拡張するか、ブラウザでどのように実装されて動作するのかを学習します。

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

タブが非アクティブになった時にsetTimeoutがどのように動作するかを確認し、タイマーを正確に実装するための方法を学習します。

Section 3. Web Workers API

メインスレッドやサーバーに負荷が発生する状況をWorkerを利用して解決する方法を学習します。

Section 4. Message API

異なるWindow、異なるTab、Shadow DOMのような分離された状況での通信を可能にするWeb APIを学習します。

Section 5. Web Animations API

Web Animation APIとrequestAnimationFrameでアニメーションを制御する方法を学習します。

Section 6. ボーナス Web API

MutationObserver、requestIdleCallbackなど実務のための追加的なWeb API授業がアップデートされます。

Q&A 💭

Q. 講義の難易度はどの程度ですか?

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

Q. 授業はどのような方式で進行されますか?

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

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

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

💾受講前の参考事項

  • Web、Javascript、Reactに関する基礎知識が必要です。

  • 授業で使用された全体のソースコードを提供します。授業ではコードを一行ずつ読むことはなく、授業進行に必要な部分のみを読むため、コードを一緒に見ることをお勧めします。


👨‍🎓 推奨学習方法

  • 提供される授業資料のコードと授業動画を一緒に見ながら授業を受講されることをお勧めします。

  • セクションの最後に出題されるミッションは、ご自身で解いてみることをお勧めします。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 実務で setTimeout、fetch Web APIのみを使用されている方

  • 複雑な要件をWeb APIの概念で実現したい方

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

  • React、JavaScript 基本文法

  • npm 使い方

こんにちは
です。

1,037

受講生

50

受講レビュー

87

回答

4.5

講座評価

2

講座

안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.

포트폴리오

カリキュラム

全体

25件 ∙ (2時間 5分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

4件

5.0

4件の受講レビュー

  • 고슈님의 프로필 이미지
    고슈

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    자주 쓰이는 Web API를 둘러볼 수 있어서 좋았습니다. 엑기스만 모아뒀네여!! 부담없이 듣기 좋은 강의입니다. 최고 👍

    • 망고님의 프로필 이미지
      망고

      受講レビュー 33

      平均評価 4.7

      5

      100% 受講後に作成

      WEB API를 좀 더 자세히 알 수 있어서 좋았습니다. 좀 더 실무적인 관점이나 예시의 코드를 보여주셨으면 더 좋았을 것 같아요

      • Jang Jaehoon님의 프로필 이미지
        Jang Jaehoon

        受講レビュー 609

        平均評価 4.9

        5

        33% 受講後に作成

        좋은 강의 감사합니다!

        • 윤효준님의 프로필 이미지
          윤효준

          受講レビュー 7

          平均評価 5.0

          5

          32% 受講後に作成

          ¥2,469

          vroomfanの他の講座

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

          似ている講座

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