Javascriptでのネットワークアクセス

2021年6月10日

Javascriptでのネットワークアクセス

どこからデータを入手するかで変わる処理

プログラムの基本動作はデータ処理かイベント処理に大きく分けられます。データ処理の場合は、受け取ったデータに処理を加え流処理になります。イベント処理は、ボタンをクリックするなどのUIの操作などで発生したイベントに対応した処理を行うものです。エラーなどの処理もイベント処理に入ります。
WebアプリやWebサービスの場合、データをネットワークを経由して取得する場合が多くなります。ネットワークから取得するという事は、別のコンピュータからデータを受け取るという事になります。この場合、コンピュータが応答できない場合や、コンピュータ自体が稼働していない事があります。この場合、データを受け取れない事になります。
一方で、同じコンピュータからデータを入手する場合、この場合は、コンピュータのドライブ（HDDやSSD)やメモリからデータを取得することになります。このデータは殆どの場合問題なく取得できる場合が多く、プログラムを書く上では問題にならない場合が殆どです。

ネットワーク経由のデータはいつ届くかわからない！

さて、ネットワーク経由でデータを取得する場合に問題となるのは、いつデータが来るか予想できない点です。幾つか可能性があって、ネットワークが混んでいる（負荷が高い）場合は、ネットワーク上の「相手」が稼働している場合でも、データが届くまでに時間がかかる場合が多くなります。また、ネットワークに障害があるとデータが届かない場合もあります。さらに、ネットワーク上の相手のコンピュータが稼働していない場合にも、データは届きません。
プログラムを書く際にはこうした事を予め考慮したプログラムを書く必要があります。
こうした問題は、プログラムが動作しているコンピュータのリソースからデータを取得する場合には余り考えなくても大きな問題にならない事が多くなります。エラーになるのは、指定したファイルが間違えていた場合など、ファイルが存在しない場合などに限られてきますし、ファイルが存在するかどうかをチェックするのも比較的簡単です。

不確定要素が多いネットワークアクセス

ネットワーク経由でデータを取得するのが面倒なのは不確定要素が多く、事前に結果を予測するのが難しいからです。ネットワーク経由のデータは、リクエストをしてから数秒かかることは珍しくなく、相手のサーバーが稼働しているかをチェックするだけでも、時間がかかります。最悪の場合はデータが届かない場合も頻繁に起きるので、きちんとした対策をしたプログラムを書かないと安定した動作ができません。
前回、プログラムのバグの原因は「想定外」の事が起きるときちんと動かないという事を紹介しました。ネットワークのアクセスの場合、「普通」とか「正常」というのを決めるのが非常に難しいアクセスです。むしろ、いろいろな事が起きるのが「普通」なので、こうしたいろいろなケースを想定しておかないときちんとした動作をしてくれないという事になります。
ネットワークを利用したプログラミングが少し難しくなるのは、こうした理由です。想定外というよりは、どんな事が起こるのかは、ネットワークを良く理解していないとわからないからです。

ネットワークを利用するのは難しい？

では、ネットワークを利用するのが難しいかというと、実はそういうわけでもありません。 Web系のプログラミングではネットワークはどちらかというと「必須」の機能です。従って、皆が良く利用する機能です。従って、こうした共通で利用する機能は、既に誰かが開発して公開しているオープンソースのモジュールがあります。これを上手く利用することで、実際のプログラミングをする場合は、この部分は自分で書かなくても大丈夫だからです。

こうしたモジュールを開発した人は、上に書いたような事を考慮して設計しています。従って、これを使う人はそこまで深く考える必要はありません。しかし、ネットワークの動作を大まかにでも理解していると、そうしたモジュールを利用する際にも役に立ちます。

Javascriptのネットワークアクセス（HTTPアクセス）のモジュールとして良く利用される物に「axios」があります。 axiosでHTTPのアクセスを書く場合は、以下のような感じで記述します。

axios.post( "https://aaa.bbb.com",
    {
        id: "12345678",
        // 送るデータ
    }.then((res) => {
        // res: サーバーからの応答データ
        // データを受け取った後の処理を記述
    }).catch((error) => {
        // エラーが発生した場合の処理
    })
)
// データを待つ間にできる処理を記述

という感じでとてもシンプルに記述できます。面倒なエラー処理は、axiosがやってくれるので、余り細かいことを気にする必要がありません。「then」の部分と、「catch」の部分は非同期で処理されます。非同期というのは、「res」や「error」などの、データが送られてきたり、エラーが発生したイベントで処理が行われます。axiosの後に記述される処理は、そうしたデータやエラーなどが届く前に先に処理を行うようになっています。

これは、ネットワークからのデータが届くまで、あるいはエラーが起きたかわかるまでには、時間がかかります。そこで、その待ち時間に何もしないのは勿体無いので、できることをやってしまおうというのが非同期処理です。

慣れないと分かりにくい仕組みですが、どうしてこのような処理をするのかがわかると、理解しやすくなります。

まとめ

JavascriptはWebプログラミングを行う事を目的に作られた経緯があります。 Webプログラミングでは、ネットワークの機能を活用する場合が当然多くなりますが、ネットワークのアクセスはその中身を見ると思ったより複雑な事をしています。当然、ネットワークの仕組みが良くわかっていないと、「想定外」の事が沢山起きる可能性が高くなります。しかし、本来は面倒なネットワークのアクセスも、公開されているモジュールを利用すると初心者でも簡単に実装することができます。
ネットワークからデータを取得する場合、データが届くまでの時間には大きなバラツキがあって、待ち時間も多くなります。Javascriptの非同期処理は、こうした待ち時間を有効に使うために考えられた仕組みです。
最近は、公開されたモジュールを使ってプログラムをする事が普通になっているので、直接ネットワークの仕組みに触れる機会は少なくなっていますし、ネットワークの仕組みを知らなくても簡単にプログラムが組めるようになっています。
しかし、ネットワークの仕組みがわかると非同期の処理などの理解も簡単になるので、機会があればネットワークの勉強もされることをお勧めします！

このブログを検索

シリコンバレースーパーウエア