便利で難しい非同期通信【ajax】

　二ヶ月ほど前に、エラーが出すぎて時間が持っていかれてしまう、という話をしたのですが・・・

　エラーにならないとしても、なぜか思った形になっていないというパターンも非常に多く、相変わらず毎日思い悩むことの連続です。特に開発関連のお仕事だと、プログラムを書いている時間よりも、頭を悩ませながら調べている時間の方が長いんじゃないかと・・。いろいろな手段を試してもなかなかすぐに上手くいくわけではなく、未熟さを痛感するところではあります。
　しかし、実は意外とエラーが出て、そこに対して悩むのが結構好きだったりします。エラーや動作に悩むことで、新しく学べることはとても多いです。そこで今回は、先日Javascript(jQuery)を使用していて学んだ内容について書いてみようかなと思います。

ajaxとは

　ajaxというものを活用してデータを取得する処理を作っていたときのことでした。ajaxというのは、「Asynchronous JavaScript + XML」を略したもので、非同期通信を実現するために使われます。ajax、非同期通信、というのはなんとなく聞いたことがあったものの、正直詳しくはよく分かっていませんでした。しかしなんと便利な時代でしょう。調べればある程度の書き方はすぐに見つかり、すぐに動かしてみることが出来ます。

取得データをreturnして使いたい

　実際に書いてみたコードの流れはざっくり示すとこんな感じです。

//ajaxでデータを取得してdata変数に入れ、returnする
function getData() {
$.ajax({
url: ~~~
・・・
})
.done(function(data) {
return data
})
}

//メソッドを呼び出す
let getAjaxData = getData();

//以降の処理でデータを使用したい
console.log(getAjaxData);

　

理想通りにはいかない

　最後のところで、console.logを使用してコンソールにデータの中身を出力しています。

その結果がこちら。

【undefined】
翻訳：定義されていない

非同期通信は返り値が（基本的に）使えない

　試しに「return data」の前で「console.log(data);」を実行してみると、取得したデータの中身が出力されました。ということは、データの取得自体は正しく行えているはずです。エラーも出ていません。
　おかしいなあ、と思いつつもいろいろと調べてみたところ、「非同期通信では返り値が使えない」という情報にたどり着きました。メソッド内でreturnしておけばとりあえず戻せると思っていたので、そもそも返り値が使えないとは思いもせず・・。今回の場合はエラーが出る訳でもないので、原因に気づきにくいですね。ajaxや非同期通信の仕様や、動作の仕方がポイントとなっていたようです。

　調べてみると返り値を戻す方法もいくつかあるようでしたが、結局以下の形でひとまず実装することにしました。

//ajaxでデータを取得してdata変数に入れ、中で処理をする
function getData() {
$.ajax({
url: ~~~
・・・
})
.done(function(data) {
//中で処理を行う
console.log(data);
})
}

　

　返り値でどうこう、ということを考えないのであれば、この方法が一番簡単そうです。今回は処理自体がそれほど長くなかったので、簡単な方法を選ぶことにしました。

　実現したいことを検索すれば、誰かが書いてくれたコードにすぐたどり着ける便利な時代になりました。とりあえずそれをそのまま流用させていただく、ということも結構あります。しかし、それでするっとエラーにも不具合にもならず動いてしまうと、仕様や具体的な動きの流れを一切掴めないままになってしまいます。そういった意味でも、エラーや不具合は新しい情報を仕入れるきっかけになると思っています。
　非同期通信の技術は、使いこなせるようになるととても便利そうです。まだ正直扱いにくいな・・という印象なのですが、これを機にもう少し勉強してみたいなと思いました。