こんにちは
シナジーデザイン プログラマー / マネージャーのAです。
前回、
デキテルのお客様管理ツール（通称ログビューワー）の
リニューアルの話をしました。
ボリューミーな内容なので、複数回に分けて書いています。
今回は
「非同期処理の徹底」
の話です。
前回を読んでない方はこちらからどうぞ
https://syde.jp/w/archives/10286.html
非同期処理 とは？
PHPやJavaScriptでは、
「同期」と「非同期」の2つの書き方があります。
簡単にいうと…
【同期】
A → B → C
【非同期】
A →
B →
C →
という感じ。
図でもなんとなく分かるように、
非同期の方が、基本的に早いです。
今回のリニューアルには、非同期処理は必須。
今のログビューワーが遅く感じる大きな理由は
「見たいデータを見るために、見たくないデータの読み込みを待たなくてはいけない」
ことにあります。
・お客さまデータを見るために、指標データを読み込まなくてはいけない。
・スタッフデータを見るために、お客さまデータを読み込まなくてはいけない。
といった同期処理が、ログビューワーの表示を遅くしていました。
であれば、
全て非同期にしてしまえば、速いはずですね。
ただ、コレがものすごく大変でした。
非同期処理は難しい。
大変だった理由はシンプルで、
書くのがとても難しかった
ことにあります。
難しさの理由は
非同期の中に、同期が発生するから
でした。
先ほどの図のように、シンプルな処理はそうそうありません。
例えば…
「A と C は並列 で良いけど B は A の後じゃないといけない」
的な感じなんですが、
これが複数積み重なると
A — — — E — — H — —
— B — F — — — I — L
C — D — — G — J — K
みたいな感じになります。
AとCが終わるのを待って
Bが終わるのを待って
D, F, E はBが終わるのを待って… のように
複数の非同期処理を管理し、適切なタイミングで走らせる。
これは大変な苦労でした。
ログビューワー、だいぶ早くなったと思います。
苦労の話はもういいとして、
今回のリニューアルでは
非同期に出来るところは全て非同期にしました。
理論的な限界まで非同期にしました。
おかげで、ずいぶん早くなったように感じます。
同期・非同期の使い分けができると、世界が広がる。
個人的にですが
最近のJavaScript の進化を追ってると、
「同期・非同期をカンタンに書く」が1つのコンセプトとしてあるように思います。
モバイル端末の普及が爆発的に進む
→ 低速度ネットワークでWEBを見る機会が増える
→ ページを表示するために時間が掛かる
→ 少しでも早くページを見せたい
→ 同期・非同期を使い分けよう
という流れでしょうか。
素のJavaScriptでも、各FWでも、
同期・非同期を使い分けることが前提、な気がします。
コードが読みづらい理由の1つに
「同期・非同期の理解が浅い」
ことは間違いなくあると思うので、
ぜひ、積極的に情報収集して、知見を得ると良いと思います。
以上です。
