非同期処理は快適なUI / UXを実現する上で重要な概念です。
例えば、ファイルアップロードなどのデータの取り扱いにおいて一定の待ち時間が発生する処理を同期処理で行った場合、ユーザーはそれが完了するまでローディングを眺めるしかありません。
1つの画像を読み込むのに数秒かかり、それが終わったら次の画像にまた数秒となれば、ユーザーはアプリケーションの利用にうんざりして離脱するでしょう。
ですが仮に、複数の画像やデータ読み込みを並行して行えるとどうでしょう？ユーザーの待ち時間は圧倒的に削減されます。非同期処理は、あらゆる処理を並行して行うための重要な概念です。
今回はその重要な概念である非同期処理と、ES2015より導入されたPromiseインスタンスという仕組みについて解説します。
(さらに…)FormDataオブジェクトは、非同期処理(XMLHttprequest, fetch)を使用してデータを送信するために、keyとvalueのセット値を追加することができるインターフェイスです。
WEB開発で非同期処理を使用する場合に、ユーザーのアクションに応じて一部のデータのみ書き換え・更新を行いたいことは多々あります。FormDataを使用すると、DOMツリー内にForm要素を作成して形式的なステップを踏む必要がないため、一部のinput要素の値を取得して、$.ajax, XMLHttpRequest, fetchを使用してサーバーにデータを送信することができます。
FormDataで送信されるデータは、JSONなどと異なりマルチパートのフォームデータとして扱われるので、MIMEタイプの設定が必要なファイルデータの送信にも適しています。
これから数回に分けて、①FormDataの使い方、②データの送信、③ファイルの取り扱いについて解説していきます。
(さらに…)フロントエンド開発の現場でDOMの変更を検知して処理を実行する場面は多くあります。DOMに変更が加わる場面としては、ユーザーのアクションによってページの一部が描画されたり、ページ内のエディタにfocusが当たった or 外れたタイミングで処理を実行するものもあるでしょう。
今回、非同期処理で実装されたシステムでDOM操作をする際に、DOMの変更をリアルタイムで検知できるメソッドを探していたところ、MutationObserverを発見しましたので忘備録として記録に残します。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
(さらに…)