[勝手に解答] Q. JavaScriptでルーレットと一緒に画像を用いたアニメーションを動かしたい (前編)

プログラミングが上達してくると、初心者のコードが汚く見えてくるのが、何故か不思議に思える、ユゲタです。 スキルが向上してくると、品質クオリティも向上して、その結果、クオリティが低いものをゴミのように思えてきてしまう心理現象なのかもしれませんね。 でも、初心者の人は、頑張ればかならずクオリティは上がるはずなので、がんばってくださいね。

今回のお悩み質問

teratailサイトで、半月以上回答数が0件のもので以下のような質問がありました。 「JavaScriptでルーレットと一緒に画像を用いたアニメーションを動かしたい。」 https://teratail.com/questions/285822 質問内容は、htmlとjavascriptで構成されたルーレット処理で画像を使いたいとのコトですが、 javascript事態も、何かの書籍のコピペをして、その後どのように改変すればいいかわからなくなったと読み取れました。 書かれているコードも不具合がいくつかあったので、とりあえず、このコードを見やすいように書き直してみました。

元のコード

See the Pen Question #2 base by YugetaKoji (@geta1972) on CodePen.

codepenにて、ソースを貼り付けて、htmlをjsを分割しておきました。 このソースでの問題点は以下のようなものがあったので、リストアップしておきました。

1. body/centerタグがtable/td内に閉じタグが書かれていて、入れ子になっている。
2. 位置調整やスペースを入れるために
   をいくつも重ねているが、重複brは、htmlの記述エラーなので、cssを使ったポジショニングを覚えましょう。
3. formタグの閉じタグが存在しない。

HTML箇所だけで、これだけあったのですが、 javascript箇所は、まるっと書き換えをしてみました。

リファクタ後のソース

See the Pen Question #2 edit by YugetaKoji (@geta1972) on CodePen.

まず、HTMLもテーブル構造をdiv構造に切り替えて、cssでそれぞれのスタイルを保持して、ソースをスッキリさせました。 次にjavascriptですが、setInterval構造だったものをsetIntervalにして、全体を無名関数記述に変更しました。 tetartailのサイトでは、ソースにインデントが全く入っていなくて見づらかったので、形式も整えておきました。 あと、startボタンとstopボタンを１つにして、ユーザビリティを向上させてみました。 こうすることで、pcブラウザで見ているときに、focusさせているとenterキーを押すだけで、永遠に進めることができるようになります。 それから、数が３つそろうと「大当たり」と表示されるんですが、ほとんどあたらないので、２つヒットで「惜しい」アラートを表示させるようにしました。 ゲーミフィケーション的には重要な要素です。 そして、次回は、これを画像がくるくるまわるような仕様にしてみたいと思います。