同期と非同期
同期と非同期有料プラン
非同期JavaScript：API通信とモジュール
Promise と async/await、非同期エラー、HTTP/REST、fetch による GET、読み込み・成功・失敗の表示、モジュールの読み方を学ぶ全 19 レッスン（380 分）のコースです。最後は承認済みの読み取り専用 API から作品データを取得して表示します。POST はリクエストの組み立てまでで、外部サービスへの書き込みは行いません。
レッスン
19件
所要時間
約6.5時間
ランク
中級
最初のレッスンを読む
15分・登録なしで読めます
動く図解・同期と非同期
動く図解・同期と非同期
目標
app.js（承認済みの読み取り専用 API から作品データを取得し、読み込み中・成功・失敗を描き分けるポートフォリオアプリ）
できるようになること
Promise・async/await・Promise.all で、非同期処理の順序と並列の待ち合わせを扱える
HTTP/REST と response.ok を確認し、fetch の GET 成功・失敗を画面に反映できる
POST の method・headers・body を組み立て、教材が実送信しない理由を説明できる
named/default export を読み分け、ローカル環境でモジュールを試す手順を説明できる
よくある質問
前提知識・必要な環境
必須
- • 「モダンJavaScript：データ処理とコード設計」修了相当
- • 配列処理、関数、オブジェクト、DOM 描画、try/catch を一度書いた経験
推奨
- • ブラウザの開発者ツールでコンソールと Network タブを開いた経験
環境
ブラウザ完結（インストール不要）
必要ツール: ブラウザ内エディタ, JavaScript 実行環境, HTML/JavaScript プレビュー, 承認済み読み取り専用 API
このコースに入っているもの
触れる図解
12本
導入スライド
49枚
手を動かす演習
11問
理解度クイズ
3問
つまずき辞典
1件
読み物のレッスン
5本
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
同期と非同期の違いから入り、Promise を自分で作って返し、async と await で書き直し、Promise.all で同時に待ちます。遅れて届くデータに読み込み中の表示を出すところまで作ります。
HTTP と REST の読みかたを押さえ、実際に fetch で教材用の API からデータを取って画面に描きます。response.ok の判定と失敗時の表示、リクエストの組み立て方まで扱います。
ファイルを分けるという考えかたと export の書き分けを読み物で押さえ、最後に第2章から第9章までを 1 枚に集めてポートフォリオアプリを仕上げます。
このコースを終えると取れるバッジ
JavaScript 第3コース
0 / 19 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
Promise をつくって返す
Promise の状態は一度で決まる
async と await
await が止めるのはどこか
Promise.all で同時に待つ
直列の await と Promise.allこんな人におすすめ
Promise と async/await を順序立てて学びたい人
fetch の成功・失敗・読み込み中を UI に反映したい人
外部データを扱う前の安全な通信範囲を理解したい人
おすすめしない人
- ×配列処理、関数、オブジェクト、DOM、エラー処理をまだ学んでいない人
- ×POST・認証・データベース更新を実際の外部サービスで行いたい人
前提が不安な方へ
先にこちらを通しておくと、つまずきにくくなります
次に学ぶなら
このコースを終えたあとに進むと、無理なく続けられます
