質問サイトに勝手に答えるシリーズ「JavaScriptでルーレットと一緒に画像を用いたアニメーションを動かしたい。」(前編)

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

プログラミングが上達してくると、初心者のコードが汚く見えてくるのが、何故か不思議に思える、下駄です。
 

スキルが向上してくると、品質クオリティも向上して、その結果、クオリティが低いものをゴミのように思えてきてしまう心理現象なのかもしれませんね。
 

でも、初心者の人は、頑張ればかならずクオリティは上がるはずなので、がんばってくださいね。
 

今回のお悩み質問

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ボタンを1つにして、ユーザビリティを向上させてみました。
こうすることで、pcブラウザで見ているときに、focusさせているとenterキーを押すだけで、永遠に進めることができるようになります。
 

それから、数が3つそろうと「大当たり」と表示されるんですが、ほとんどあたらないので、2つヒットで「惜しい」アラートを表示させるようにしました。
 

ゲーミフィケーション的には重要な要素です。
 

そして、次回は、これを画像がくるくるまわるような仕様にしてみたいと思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です