飲食チェーン店から学ぶ
Javascript非同期処理と並列処理

自己紹介

氏名:田原一樹

出身地:大阪

血液型:B型

所属:レアジョブ/App・UXチーム
フロントエンドエンジニア

本日のお話

2つの飲食チェーン店の注文フローの違いを
例にJavascriptの同期処理/非同期処理の理解を深めた話

注意:ミスタードーナツは出ません

項目

  • 同期処理とは
  • 非同期処理とは
  • マクドナルドの場合
  • はなまるうどんの場合
  • 並列処理とは
  • 並列処理の例
  • まとめ

同期処理とは

同期処理とは、あるタスクが実行している間
他のタスクの
処理は中断される方式です。

console.log(1);
console.log(2);
console.log(3);

// 1 -> 2 -> 3

非同期処理とは

非同期処理は、あるタスクが実行をしている際に、
他のタスクが別の
処理を実行できる方式になります。

console.log(1);
setTimeout(function(){console.log(2)}, 1000);
console.log(3);

// 1 -> 3 -> 2

Promise

async/await

非同期処理を同期処理っぽく書ける方法

各店舗の注文フローで違いをみてみる。

はなまるうどんの場合(同期処理)

温玉ぶっかけ
うどんください

月見うどんですね

お会計○○○円
になります

マクドナルドの場合
(非同期処理・並行処理)

※マクドナルドの列は実際は1列ではありません。

てりやきマック
バーガーセットください

ポテトを揚げております
番号札でお呼び致します

非同期(並行では)ではなく、並列…つまり
列自体を増やすことはできないのか…??

実はできる

非同期処理は並列処理っぽいけど、
Javascript自体はそもそもシングルスレッド

並列処理とは

二つ以上の処理が同時並行に行なわれる処理であり、
つまりはマルチスレッドのことを指します。

マルチスレッドとは一つのコンピュータプログラムを実行する際に、複数の処理の流れを並行して進めること。
また、そのような複数の処理の状態を言います。

シングルスレッドとはマルチスレッドと対比して、プログラムの処理の流れが一本のみである状態を言います

でも、Javascriptでも並行処理したいッ!!!!

その前にちょっとだけ(ざっくり説明)

WebWorkerを使おう

弊社機能の実例

※リンク先の音声チェックの箇所で並列処理にて
実装をおこなっております。

まとめ

  • 他にも同期処理の飲食店ありそう
    特にうどん系のチェーン店
     
  • 非同期処理書くときはasync/awaitで
    最近は書き、errorハンドリングはcatchでやることが好き
     
  • 一部、プロダクトに使ってはいるけど
    webworkerの有り難みがまだ、あまりわかっていない感
    ある。(もっと有効に使えるところあるんじゃないか感)

ご清聴ありがとうございました。

Made with Slides.com