
Next.js はじめ方(feat. 地図サービス開発)
vroomfan
Next.jsの基本を扱う講座です。 Next.jsで地図サービスを最初から最後まで開発してみます。
초급
Next.js, SEO, vercel
実務に適用できるWeb APIを扱います。一度はきっと直面するであろう要件を解決する武器を手に入れてください。
ブラウザでのWeb APIの動作原理
ウェブワーカーで負荷を減らす方法
異なるコンテキスト(window, tab, iframe など)が通信する方法
Timer, Animationをより正確に使う方法
入念なFE開発者向けの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でこの値を使用してリストの状態を更新できますか?
{ type: 'newPost', title: 'title_1', author: 'author_1', ... }
タブAで新しい記事が作成されたというシグナルをタブBに送信し、タブBからこの情報を受け取ったときにリストを呼び出すAPIを再度呼び出すことができますか?
{ type: 'refetchPosts' }
それでは、異なるタブ間で上記のようなデータを送受信する方法は何ですか?
ChromiumコードでWeb APIが動作する原理を理解する
タブが無効になったときのタイマーの動作と対応方法
Workerでメインスレッドの負荷を軽減
WebSocket接続を最小化してサーバーの負荷を軽減する
異なるブラウジングコンテキスト間でデータを転送する
アニメーションをcssではなくjsで制御する
実践のための追加のWeb API
ブラウザのソースコードを使用して、Web APIがJavaScriptの機能を拡張する方法、およびブラウザでどのように実装され動作するかを学習します。
タブが無効になったときに setTimeout がどのように動作するかを確認し、タイマーを正確に実装する方法を学習します。
メインスレッドやサーバーに負荷が発生する状況をWorkerを利用して解決する方法を学習します。
異なるWindow、異なるTab、Shadow DOMなどの分離状況で通信を可能にするWeb APIを学習します。
アニメーションをWeb Animation APIとrequestAnimationFrameで制御する方法を学びます。
MutationObserver、requestIdleCallbackなど、実務のための追加のWeb APIクラスが更新されます。
Q. 講義の難易度はどのくらいですか?
基本的なReact文法、イベントループの概念、Web関連の基礎知識がわかっているとします。基礎知識だけがあれば、新しい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,029
受講生
49
受講レビュー
87
回答
4.5
講座評価
2
講座
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
全体
25件 ∙ (2時間 5分)
講座資料(こうぎしりょう):
全体
3件
¥2,389
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!