見出し画像

あるく戦記 #11｜理論編～非同期処理：「待つこと」も技術のうち

管理人あるく

非同期処理は“反応”から“流れ”への進化

DOM操作 → イベント処理に続き、このタイミングで非同期処理を学習することで、API連携（次回予定）や、より高度なUI設計にもスムーズに進めるとAI軍師からのアドバイスがありました。
非同期処理を習得すると以下の4つのスキルアップ効果が期待できるんだそうです。

1.イベントの“その先”にある処理を扱えるようになる

イベント処理では「何かが起きたら、何かをする」という反応型のコードを書きますよね。 でも、たとえば「ボタンを押したらサーバーからデータを取得して表示する」といった処理は、時間がかかるもの。 この“時間差”を扱えるようになるのが、非同期処理です。
つまり、イベントは「きっかけ」、非同期処理は「その後の流れ」を制御する技術。

2.UIとユーザー体験を滑らかにできる

DOM操作とイベント処理だけでは、ユーザーに「待っている間の体験」を提供できません。 非同期処理を使えば

  • 読み込み中のスピナー表示

  • エラー時のメッセージ表示

  • 処理完了後の画面更新

など、状態に応じたUIの変化を実現できます。これはUX設計の要です。

3.外部とのやりとり（API通信）に備えることができる

次のステップである「API連携」では、サーバーとの通信が必須になります。 通信は当然時間がかかるので、非同期処理がなければまともに扱えません。

非同期処理は、コードが“自分の世界”を越えて、外とつながるための準備。

4.コードの流れを“時間軸”で考える力がつく

DOMやイベントは空間的な操作（どこをどう変えるか）ですが、非同期処理は時間的な操作（いつ何をするか）。 この「時間軸でコードを設計する力」は、今後の開発でずっと役立ちます。

非同期とは何か

非同期処理とは、「今すぐ終わらない処理」を扱うための仕組みです。 たとえば、こんな場面で使われます：

  • サーバーからデータを取得する（API通信）

  • 一定時間待ってから何かをする（タイマー）

  • アニメーションの完了を待つ

JavaScriptは基本的に“同期的”に動くのですが、こうした処理には「待つ力」が必要になります。

setTimeout：時間をずらす

JavaScriptでは、時間を指定する際に「ミリ秒（ms）」という単位を使います。 1秒は1000ミリ秒なので、たとえば 3000 と書けば「3秒後」を意味します。
「秒じゃなくてミリ秒？」と驚くかもしれませんが、これはコンピュータが細かい時間の制御をするための仕様。 慣れてくると、1000 が「1秒」として自然に感じられるようになります。

では、実際に一定時間待ってから処理を実行する setTimeout を使ってみましょう。

console.log("冒険開始");

setTimeout(function() {
　console.log("3秒後に敵が現れた！");
}, 3000);

このコードでは、「冒険開始」のあと、3秒後に「敵が現れた！」と表示されます。 setTimeout は、処理のタイミングをずらすことで、順番をコントロールする手段です。

Promise：未来の結果を扱う

次に、非同期処理の結果を“約束”として扱う Promise を見てみます。

function fetchData() {
　　　return new Promise(function(resolve, reject) {
　　　setTimeout(function() {
　　　resolve("データ取得完了");
　　}, 2000);
　});
}

fetchData().then(function(result) {
　console.log(result);
});

このコードでは、fetchData() が2秒後に「データ取得完了」という結果を返します。 .then() を使うことで、結果が返ってきたタイミングで処理を続けることができます。

async/await：流れを自然に書く

Promise をより読みやすく、直感的に扱うための構文が async/await です。

async function startAdventure() {
　console.log("冒険準備中...");
　const result = await fetchData();
　console.log(result);
}

startAdventure();

このコードは、「準備 → 待つ → 結果を受け取る」という流れを自然に表現できます。 await を使うことで、「待つ」ことを明示し、コードの可読性が高まります。

UIとの連動：待つ時間も体験になる

非同期処理は、UIとも深く関係しています。 たとえば、データ取得中に「読み込み中...」と表示したり、エラーが起きたら「失敗しました」と伝えたり。 こうした演出は、状態管理と非同期処理の連携によって実現されます。

AI軍師いわく、「“待つ時間”もユーザー体験の一部。どう見せるか、どう伝えるかが重要」なのだそうです。

まとめ：時間を扱う技術はUXの鍵

非同期処理は、コードが“時間”という概念に触れる技術です。 待つこと、約束すること、そして結果を受け取ること――それらは、ユーザー体験を滑らかにするための重要な要素です。

次回は、外の世界とつながる技術――API連携へ。 コードは、自分の世界を越えて、他者と対話を始めます。

管理人あるく


いいなと思ったら応援しよう！