暇なのでプログラミングの勉強をしています。
Udemy(ユーデミー)という動画学習サイトで、HTML・CSSの勉強をして、JavaScriptの基礎を勉強しました。
難しいところもありましたが、JavaScriptの基礎まではまったく意味がわからないというほどでもありませんでした。
しかし、JavaScriptの非同期処理の勉強で挫折しました。
仕事で使うわけでもなく、暇つぶしで勉強しているので理解できなくてもいいのですが、理解できるようになりたい気持ちも結構あります。
非同期処理とは
非同期処理が何なのかを説明するのが難しいですが、命令した処理が終わる前に次の命令を実行するみたいな感じでしょうか。
間違っている可能性が高いので、他のサイトで調べてください。
非同期処理には、setTimeout、Promiseなどを使うようです。
setTimeoutは、〇秒後に処理をしてほしい時に使うものです。
ページが読み込まれてから何秒後とか、ボタンをクリックしてから何秒後とかに何かをするとかです。
setTimeoutはなんとなく理解できて、今までも使ったことがあります。
クイズで「答えを見る」ボタンを押してから1秒後に答えが表示されるみたいな使い方をしました。
Promiseは今のところ意味不明です。
非同期の処理が終わるまで次の処理を行わないようにするというイメージですが、やっぱり意味不明です。
意味不明ですが、教材のマネをすればPromiseを使ったウェブページを作ることはできます。
勉強だけならマネするだけでいいですが、公開するなら完全なマネではなくアレンジしましょう。
非同期処理を使ったウェブページを作ってみた
あまり意味はわかっていないのですが、setTimeoutとPromiseを使って、プロ野球の交流戦の順位を順番に表示するウェブページを作ってみました。
下の動画で動きをチェックしてください。
1位の楽天が表示されてから1秒後に2位のソフトバンクが表示されます。
それを12位まで繰り返しています。
同時に全部表示させるのは簡単なのですが、1秒間待ってから次を表示するというのが難しいです。
12位まで表示されたら「阪神タイガースは7勝11敗の10位でした」というメッセージが表示されます。
Promiseを使わなければ最初からメッセージが表示されてしまいます。
非同期処理でつまずく人は多いらしい
今まで順調に勉強が進んでいたのに、意味不明なことにぶつかってやる気をなくしそうですが、何度も繰り返して勉強すれば理解できるかもしれません。
動画教材の先生が「非同期処理でつまずく人は非常に多いので、すぐに理解できなくても気にしないでください」みたいなことを言っています。
暇なので時間だけはたっぷりあります。
今は理解できなくてもコツコツ勉強したらいいことあるかもしれません。
やる気が無かったらやらなくても怒られないので気楽に生きていきます。
実際のところ、プロ野球が開幕してからは野球を見る時間が増えたので、勉強時間はかなり短くなっています。