0から始まり5までいったらまた0からスタートする


数字の0から1msごとに+1していき、5になったらまた0からスタートするプログラムを書きたいです。考え方が浮かびません。。考え方のアルゴリズムを教えていただきたいです。




  
アルゴリズムが分からないというよりは、コードにしていく過程でつまづかれているのかな、と思いました。  
できるだけ小さい単位でコードを追加し、テストするようにするとよいです。  
常に追加している機能の部分以外はテスト済みで、間違いが無い、と安心できるようにしておきたい所です。

以下は例です。追加部分は小く、追加部分以外のコードは動く、という形を保っています。  
もちろん、完成後にコードを整理する必要はあるかもしれません。  
(追記: ここで「テスト」としているのは「動かしてみる」という程度の意味です)

### 最低限のコードでテスト

まず、カウントを記憶させるcount変数を作ります。「数字の0から」なので、0を代入しておきます。

[code]

    var count = 0;
    
[/code]

次にカウントを表示するcount_show関数を作ります。  
HTMLに id="count" の要素を用意しておくものとします。

[code]

    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
[/code]

ここらへんでcount_show関数を一度呼んでみて、テストしておきす。  
カウント: 0 が表示されれば成功です。

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    count_show();
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

### 最小限の機能追加でテスト

次にカウントを変化させるcount_change関数を作ります。  
count変数に1を足した後にcount_show関数を呼び出し、表示を更新する事にします。  
今は最小限の追加なので、5を超えた場合の事は後で考えます。

[code]

    function count_change(){
        count += 1;
        count_show();
    }
    
[/code]

これもすぐテストします。  
カウント: 1 になれば成功です。

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    function count_change(){
        count += 1;
        count_show();
    }
    
    count_show();
    count_change();
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

### 動きのある物は観察しやすい形でテスト

次にcount_change関数を呼ぶのを一定時間おきに繰り返すようにします。  
観察しやすいように、とりあえず一秒毎にしておきます。

[code]

    setInterval(count_change, 1000);
    
[/code]

これもすぐにテストします。

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    function count_change(){
        count += 1;
        count_show();
    }
    
    count_show();
    setInterval(count_change, 1000);
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

### つまづきがちな機能は、他が完全に動いている事が確信できる環境で追加

count_change関数に5を超えた場合はcount変数を0に戻す処理を入れて完成です。

[code]

    function count_change(){
        count += 1;
        if(count > 5){
            count = 0;
        }
        count_show();
    }
    
[/code]

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    function count_change(){
        count += 1;
        if(count > 5){
            count = 0;
        }
        count_show();
    }
    
    count_show();
    setInterval(count_change, 1000);
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]




  
アルゴリズムが分からないというよりは、コードにしていく過程でつまづかれているのかな、と思いました。  
できるだけ小さい単位でコードを追加し、テストするようにするとよいです。  
常に追加している機能の部分以外はテスト済みで、間違いが無い、と安心できるようにしておきたい所です。

以下は例です。追加部分は小く、追加部分以外のコードは動く、という形を保っています。  
もちろん、完成後にコードを整理する必要はあるかもしれません。  
(追記: ここで「テスト」としているのは「動かしてみる」という程度の意味です)

### 最低限のコードでテスト

まず、カウントを記憶させるcount変数を作ります。「数字の0から」なので、0を代入しておきます。

[code]

    var count = 0;
    
[/code]

次にカウントを表示するcount_show関数を作ります。  
HTMLに id="count" の要素を用意しておくものとします。

[code]

    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
[/code]

ここらへんでcount_show関数を一度呼んでみて、テストしておきす。  
カウント: 0 が表示されれば成功です。

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    count_show();
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

### 最小限の機能追加でテスト

次にカウントを変化させるcount_change関数を作ります。  
count変数に1を足した後にcount_show関数を呼び出し、表示を更新する事にします。  
今は最小限の追加なので、5を超えた場合の事は後で考えます。

[code]

    function count_change(){
        count += 1;
        count_show();
    }
    
[/code]

これもすぐテストします。  
カウント: 1 になれば成功です。

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    function count_change(){
        count += 1;
        count_show();
    }
    
    count_show();
    count_change();
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

### 動きのある物は観察しやすい形でテスト

次にcount_change関数を呼ぶのを一定時間おきに繰り返すようにします。  
観察しやすいように、とりあえず一秒毎にしておきます。

[code]

    setInterval(count_change, 1000);
    
[/code]

これもすぐにテストします。

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    function count_change(){
        count += 1;
        count_show();
    }
    
    count_show();
    setInterval(count_change, 1000);
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

### つまづきがちな機能は、他が完全に動いている事が確信できる環境で追加

count_change関数に5を超えた場合はcount変数を0に戻す処理を入れて完成です。

[code]

    function count_change(){
        count += 1;
        if(count > 5){
            count = 0;
        }
        count_show();
    }
    
[/code]

[code]

    var count = 0;
    
    var count_show_elm = document.getElementById("count");
    function count_show(){
        count_show_elm.textContent = count;
    }
    
    function count_change(){
        count += 1;
        if(count > 5){
            count = 0;
        }
        count_show();
    }
    
    count_show();
    setInterval(count_change, 1000);
[/code]

[code]

    <p> カウント:
         <span id="count"></span>
    </p>
[/code]

