こんにちは、社畜ママです！
11月から案件にアサインし、初めてのlaravel、MySQLに奮闘しております。
そんな中、プルダウンの選択によって、次のプルダウンのデータを切り替える非同期処理の実装を任され、初めてAjaxを使いました。
Ajaxは非同期処理を行うときに使用する技術なのですが、非同期処理についてなんとなくしか知らないな、と思い同期処理と非同期処理について理解を深めることにしました。
これを理解してから様々なwebサイトをみると、この部分が非同期処理か〜！と分かったので、ちょっと感動します(笑)
非同期処理について知りたい方はぜひ読んでみてください。
非同期処理って何？
同期処理と何が違うの？
非同期処理と同期処理の切り分け方は？
非同期処理っていつ使うの？
このような疑問が浮かぶ方のお役に立てましたら幸いです。
同期処理と非同期処理
まず、同期処理と非同期処理ってなんのこと？と思っている方に向けてそれぞれの違いを以下にまとめました。
同期処理
同期処理とは、ボタンをクリックしたときに画面のリロードが入り、リクエストが完了するまでページが再読み込みされ、次のタスクに進むことができない処理のことを言います。
プログラム内で記述された順番にタスクが実行され、1つのタスクが終了するまで次のタスクは実行されません。
つまり、処理が上から下に「順番通り」実行され、途中のタスクが時間のかかる処理であれば、そのタスクが完了するまで次のタスクは待たされます。
入力フォームの送信ボタンを押したとき、数秒待って次の画面に移る、この流れが同期処理です。
では、同期しない非同期処理とはどんな処理を行うのでしょうか。
非同期処理
非同期通信はプログラムの他の部分をブロックせず、タスクを並行して進行することができます。
非同期処理を使用すると、プログラムの一部で時間がかかる処理（ネットワーク通信やファイル読み込みなど）が発生しても、その間に他のタスクを進めることができます。
文字だとわかりにくいと思うので、以下の例をご覧ください。
非同期通信をしているwebサイト一例
-
検索エンジン
→検索ワードを入力中でも予測されたキーワードが並ぶ
同期通信だったら：検索バーに文字を入力しても予測ワードは出てこない -
地図アプリ
→スクロールのたびに新しい地図が出現。
同期通信だったら：スクロールごとにページがリロードされる -
ECサイト
→商品検索・絞り込み、カートへの商品追加、お気に入り登録・解除、住所・支払い方法の変更
同期通信だったら：それぞれ変更のたびにリロードが入り、動作が遅くなる
例を見るとわかる通り、ユーザーの操作に対して都度同期処理を行っていると次の操作まで時間がかかったり、操作性が悪くなるのでユーザーの離脱につながりかねません。
そこで非同期処理を使って
- レスポンスの速さを重視する場面
- 並列処理が可能な場面
- 時間がかかる処理が含まれる場面
これらに該当する場面では非同期処理を入れ込んでユーザー体験を向上させ、離脱を防ぎます。
ここまで理解した当初は、素人考えですが全部非同期処理で書いたほうがスムーズに思えました。
皆さんはいかがでしょうか。
なぜ同期処理と非同期処理を書き分けて実装をするのか？
それはそれぞれのメリット・デメリットを知ると理解できました。
同期処理のメリット・デメリット
メリット
-
シンプルで理解しやすい
処理が記述された順序通りに実行されるため、コードの流れが直感的にわかります。初心者にも扱いやすい方式です。
-
順序依存の処理に適している
例えば、Aの処理結果を使ってBを実行する必要がある場合、同期処理の方が管理が容易です。
-
デバッグが簡単
順番に処理が進むため、エラーが発生した箇所を特定しやすく、トラブルシューティングがスムーズです。
同期処理のメリットは、コードが直感的に読みやすく、管理しやすい点にあります。また、エラーが発生しても、その対処が比較的容易です。
プログラムの記述量が多くなるほど、エラーが発生した場合にその原因を特定するのは難しくなります。しかし、同期処理のコードは上から順に処理が実行されるため、実行順序を追っていけばエラー箇所を特定しやすいです。
この特性により、同期処理はデバッグがしやすく、コードのメンテナンス性が向上するという大きな利点があります。
デメリット
-
待ち時間が発生する
時間のかかる処理があると、そのタスクが終わるまで次の処理が実行されず、全体がブロックされてしまいます。
-
ユーザー体験に影響を与える
UIを持つアプリケーションでは、処理が遅延すると画面が「固まった」と感じられ、ストレスを与えることがあります。
-
効率が悪い場合がある
必要以上に他の処理を待たせるため、リソースの利用効率が低下することがあります。
デメリットとしては、やはり処理速度が遅いという点が大きいようです。
特に時間のかかるタスクがある場合、次の処理がそのタスクの完了を待たなければならず、全体の処理が滞ることがあります。
この遅延により、画面が固まって見えたり、操作がブロックされることで、ユーザー体験が損なわれることがあります。結果として、ユーザーの離脱率が増加する可能性もあり、特にレスポンスの速さが求められるシステムでは致命的な問題となり得ます。
次に非同期処理のメリットとデメリットを見てみましょう。
非同期処理のメリット・デメリット
メリット
-
並行処理が可能
複数のタスクを同時に実行できるため、システム全体の効率が向上します。特にネットワーク通信やファイルの読み書きなど、時間のかかる処理で効果的です。
-
スムーズなユーザー体験
時間のかかる処理中でも、他の操作が可能になるため、アプリケーションの応答性が良くなります。たとえば、ロード中にローディングアニメーションを表示するなどの工夫がしやすいです。
-
システムリソースの有効活用:
処理待ちの間にCPUやメモリを他のタスクに割り当てられるため、全体のリソース効率が上がります。
非同期処理のメリットとしては操作性やアプリケーションの応答性、システム全体の効率の向上が期待できるようです。
例えば、時間のかかる処理（大容量ファイルのアップロードやデータベースクエリの実行など）が行われている間でも、他の操作を継続できるため、ユーザーはストレスを感じることなくスムーズに作業を進められます。
これにより、ユーザーが操作中に処理が終わるのを待つ必要がなくなり、離脱を防ぎやすくなります。また、複数の処理が並行して進むことで、システム全体の効率も向上し、大規模なアプリケーションでも快適に動作します。
非同期処理は、ユーザーにとってより快適でストレスのない体験を提供できる点で非常に優れた仕様と言えます。
デメリット
- 実装が複雑:
並行して実行されるタスクの結果を管理したり、エラー処理を統一したりするのが難しくなります。
- 順序の制御が難しい
処理の完了タイミングが予測できないため、依存関係のある処理を管理するコードが煩雑になります。例えば、コールバック地獄や競合状態（Race Condition）が発生することがあります。
- デバッグが難しい
並行処理の中でエラーが起きると、どこで問題が発生したのか特定するのに時間がかかる場合があります。
デメリットとしてはコードの可読性が落ちてしまうようです。
同期処理と違い、好きなタイミングで処理を行うことができるのでエラーが出たときに対処するのが難しくなったり、プログラム全体の流れが見えづらくなったりします。
コードの管理が難しくなり、競合が発生することもあるため、多用すると後々地獄を見そうですね、、(笑)
このような問題を防ぐには、設計段階でしっかりとした管理が求められ、開発の負担が増える可能性もあります。
開発者側としてはできるだけ必要最低限で、ユーザー体験を向上させる効果的な場面で使いたい処理なんだな、と理解しました。
まとめ
同期処理と非同期処理について少し詳しく説明してみました。
開発する側からみると、同期処理を基本にして、
- ユーザーの操作性や体験の向上
- システム全体の処理の負担が大きくなる
- 処理速度の向上
- 同期処理中のアニメーションの実装
このような場面では非同期処理を組み込む、と基準を決めると良いかもと思いました。
以上が同期処理と非同期処理の概要です。
なんとなく知っていた非同期処理について少し理解できた気がします。
ちなみに、非同期処理にはいくつか種類があるようで、先日Ajaxで実装した非同期処理は「イベント駆動型非同期処理」という処理でした。
ユーザーアクションをトリガーにして非同期でデータを取得・更新する処理で、プルダウンによる条件選択の非同期処理です。
次回は「イベント駆動型非同期処理」の実装方法についてサンプルコードを交えながらご紹介できたらと思います。
今回は以上です。
また次回よろしくお願いいたします。