飲食チェーン店から学ぶ
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