2. Fibonacci(JavaScript)¶

テストファースト
アサートファースト
仮実装
三角測量
明白な実装
リファクタリン

2.1. テストファースト¶

[11]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("fail test", () => {
          assert.equal(1, 2);
        });
      });
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

2.2. アサートファースト¶

[12]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
        });
      });
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

2.3. 仮実装¶

[13]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
        });
      });

      function fib(n) {
          return 0
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

2.4. 三角測量¶

[14]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
          assert.equal(fib(1), 1);
        });
      });

      function fib(n) {
          return 0
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

2.5. 明白な実装¶

[15]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
          assert.equal(fib(1), 1);
        });
      });

      function fib(n) {
        let result = n
        if (n === 0) {
            result = 0
        }
        return n
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

[6]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
          assert.equal(fib(1), 1);
          assert.equal(fib(2), 1);
        });
      });

      function fib(n) {
        let result = n
        if (n === 0) {
            result = 0
        } else if (n === 1) {
            result = 1
        } else {
            result = (n - 2) + (n - 1)
        }
        return result
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

[7]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
          assert.equal(fib(1), 1);
          assert.equal(fib(2), 1);
          assert.equal(fib(3), 2);
          assert.equal(fib(4), 3);
          assert.equal(fib(10), 55);
        });
      });

      function fib(n) {
        let result = n
        if (n === 0) {
            result = 0
        } else if (n === 1) {
            result = 1
        } else {
            result = fib(n - 2) + fib(n - 1)
        }
        return result
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

2.6. リファクタリング¶

[8]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
          assert.equal(fib(1), 1);
          assert.equal(fib(2), 1);
          assert.equal(fib(3), 2);
          assert.equal(fib(4), 3);
          assert.equal(fib(10), 55);
        });
      });

      function fib(n) {
        if (n === 0) return 0
        if (n === 1) return 1
        return fib(n - 2) + fib(n - 1)
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

[9]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          assert.equal(fib(0), 0);
          assert.equal(fib(1), 1);
          assert.equal(fib(2), 1);
          assert.equal(fib(3), 2);
          assert.equal(fib(4), 3);
          assert.equal(fib(10), 55);
        });
      });

      function fib(n) {
        const next = (n) => fib(n - 2) + fib(n - 1)

        if (n === 0) return 0
        if (n === 1) return 1
        return next(n)
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles

[10]:

%%html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Programing Puzzles</title>
  </head>
  <body>

    <section id="app"></section>
    <section id="mocha"></section>
    <!-- Optional JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script>
      mocha.setup("tdd");
    </script>
    <script>
      const assert = chai.assert;
      suite("FibonacciTest", () => {
        test("function", () => {
          const data = {
              0:0,
              1:1,
              2:1,
              3:2,
              4:3,
              10:55
          }
          Object.keys(data).forEach(key => {
              console.log(`${key}:${data[key]}`)
              assert.equal(fib(parseInt(key)), parseInt(data[key]));
          })
        });
      });

      function fib(n) {
        const next = (n) => fib(n - 2) + fib(n - 1)

        if (n === 0) return 0
        if (n === 1) return 1
        return next(n)
      }
    </script>
    <script>
      mocha.checkLeaks();
      mocha.globals(["jQuery"]);
      mocha.run();
    </script>
  </body>
</html>

Programing Puzzles