Javascriptが他のプログラム言語と圧倒的に違うし、初心者の挫折ポイント No.1は、この「非同期処理」でしょう。
非同期という事は、同期というケースもあります。
今回は、Javascript特有の非同期処理をちゃんと理解して、同期、非同期、どちらもしっかりとプログラミングで対応できるようにしましょう。
Javascript学習 : 非同期編
非同期とは？
一般的なプログラムは、プログラムファイルに書かれたプログラムコードを、1行目から順番に上から処理を実行していきます。 javascriptでは、外部ファイルの読み込みや、入力待ちの状態の時などに、順番ではなく処理をする場面がしょっちゅう発生します。 その場合の順番が変わる事を非同期処理という風に言います。 逆に、順番通りに処理することは、同期処理と言います。同期処理
let a = func_a()
let b = func_b()
console.log(a + b)
function func_a(){
return 1
}
function func_b(){
return 2
}
上記のサンプルコードは、func_a()、func_b()ともに、すぐに答えが返ってくるので、順番に処理をして答えが出力できます。
イベント処理は非同期
たくさん存在するイベント処理は、全て非同期処理です。 そのイベントが発生して、はじめて実行されるので、プログラムの書いた順番通りに実行されない事を考えると、理解しやすいでしょう。 同期処理のコードの中のfunctionの一つが、数字の入力の（数字キーを押した）タイミングで、答えが表示される処理を作ろうとしたら、同期処理ではプログラミングできません。 非同期処理は、色々な書き方がありますが、簡単にその処理を書くと次のようになります。<meta charset='utf-8'>
<div id='ajax_1' style='border:1px dotted black;padding:10px;'>数字キーを1回押してください。押された数値の2倍の数が表示されます。</div>
<script>
window.onkeyup = function(e){
let a = func_a()
let b = func_b(e)
let msg = document.getElementById('ajax_1')
if(typeof b === 'number'){
msg.innerHTML = `押したキー : ${b}<br>倍数 : ${(a * b)}`
}
else{
msg.innerHTML = `数字のキーを押してください : ${e.key}`
}
}
function func_a(){
return 2
}
function func_b(e){
if(e.key.length === 1
&& e.key.match(/[0-9]/)){
return Number(e.key)
}
else{
return null;
}
}
</script>
数字キーを1回押してください。押された数値の2倍の数が表示されます。
コールバック処理
非同期処理は、処理を受け取ったタイミングで、何かしらのプログラムを実行します。 その実行するプログラムの事を、コールバック処理（関数）と言い、関数のように書くことができます。 ※または、任意の関数を実行することができます。 多くの場合は、非同期を実行する関数で、コールバック関数を書き込むことが可能なので、それぞれの関数の仕様を理解しておきましょう。setTimeout
一定時間後に、処理を実行できます。setTimeout(function(){console.log('1秒経ちました')} , 1000)
setTimeout(コールバック関数 , ◯秒後msec)
※msecは、ミリセカンドで1/1000秒で登録する。(1000msecは、1秒）
Ajax
ajaxは、javascriptから直接サーバーやwebサイトに対して、データのやり取りが出来る機能です。 ただし、実行するwebサイトと別ドメインのサーバー側で、アクセスを許容されていないと、エラーになってしまいます。 サーバーのデフォルト設定では、基本的に受付を拒否するようになっているので、意図して受付設定をする必要があります。 jQueryなどのライブラリを使ってAjax処理を実行してもいいですが、簡単な記述で書けるajaxをサンプルで載せておきます。function Ajax(url){
const xhr = new XMLHttpRequest()
xhr.open('post', url, true)
xhr.onload = this.loaded.bind(this)
xhr.send()
}
Ajax.prototype.loaded = function(e){
console.log(e.target.response)
}
リクエストヘッダや、クエリデータなどを付与したい場合は、上記のプログラムに、少し設定を追加すると送信することができます。
参考 : [Javascript] カンタンAjaxコード
promise / async
非同期を同期処理として対応するために、async機能機能というのがあります。 次のコードは、3秒待つ処理を非同期ではなく、同期処理として処理するサンプルです。(async function(){
window.value = null
await new Promise(resolve => setTimeout(function(){
window.value = 'waited'
resolve()
}, 3000))
console.log(window.value)
})()
new Promiseと、async、awaitは、セットで使うと考えておくといいでしょう。
この構文が理解できるようになると、非同期を使いこなすことができるようになります。
最初は難しいかもしれませんが、用途に沿った自分なりの非同期処理を書いていくことで、安定した非同期プログラミングが理解できると思います。
