JavaScript - 手続きによる抽象の構築(高階手続きによる抽象(一般的方法としての手続き(無限の連分数(continued fraction)、正接関数の連分数展開、Lambertの式、近似値)))

計算機プログラムの構造と解釈[第2版]
原著

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• JavaScript Library
  • kjs-array
  • D3.js
• Safari(Web browser)
• 参考書籍
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
• JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)

計算機プログラムの構造と解釈[第2版](ハロルド エイブルソン (著)、ジュリー サスマン (著)、ジェラルド・ジェイ サスマン (著)、Harold Abelson (原著)、Julie Sussman (原著)、Gerald Jay Sussman (原著)、和田 英一 (翻訳)、翔泳社、原著: Structure and Interpretation of Computer Programs (MIT Electrical Engineering and Computer Science)(SICP))の第1章(手続きによる抽象の構築)、1.3(高階手続きによる抽象)、1.3.3(一般的方法としての手続き)、問題1.39.を JavaScript で取り組んでみる。

その他参考書籍

• Instructor's Manual to Accompany Structure & Interpretation of Computer Programs

問題1.39.

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="x0">x = </label>
<input id="x0" type="number" step="0.001" value="3.140">
<label for="k0">k = </label>
<input id="k0" type="number" min="2" step="1" value="5">
<br>
近似値: tan x = <span id="output0"></span>, 
Math.tan(x) = <span id="output1"></span>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="array.js"></script>
<script src="sample39.js"></script>

JavaScript

(() => {
    'use strict';
    let div_graph = document.querySelector('#graph0'),
        input_x = document.querySelector('#x0'),
        input_k = document.querySelector('#k0'),
        inputs = [input_x, input_k],
        span_output0 = document.querySelector('#output0'),
        span_output1 = document.querySelector('#output1'),
        width = 600,
        height = 600,
        padding = 50,
        contFrac = (n, d, k) => {
            var iter;

            iter = (i, result) => {
                if (i === 0) {
                    return result;
                }
                return iter(i - 1, n(i) / (d(i) + result));
            };
            return iter(k, 0);
        },
        tanCf = (x, k) => {
            let n = (i) => -1 * Math.pow(x, 2),
                d = (i) => 2 * i + 1;
            
            return x / (1 + contFrac(n, d, k - 1));
        },
        draw = () => {
            let x = parseFloat(input_x.value),
                k = parseInt(input_k.value, 10),
                ys = Array.range(1, k + 1).map((k) => tanCf(x, k)),
                y = Math.tan(x), 
                ymax = Math.max.apply(null, ys),
                ymin = Math.min.apply(null, ys);

            let xscale = d3.scaleLinear()
                .domain([1, k])
                .range([padding, width - padding]);
            let yscale = d3.scaleLinear()
                .domain([ymin, ymax])
                .range([height - padding, padding]);

            let xaxis = d3.axisBottom().scale(xscale);
            let yaxis = d3.axisLeft().scale(yscale);

            div_graph.innerHTML = '';
            let svg = d3.select('#graph0')
                .append('svg')
                .attr('width', width)
                .attr('height', height);

            svg.selectAll('circle')
                .data(ys)
                .enter()
                .append('circle')
                .attr('cx', (_, i) => xscale(i + 1))
                .attr('cy', (d) => yscale(d))
                .attr('r', 5)
                .attr('fill', 'green');

            console.log(y);
            svg.append('line')
                .attr('x1', xscale(1))
                .attr('y1', yscale(y))
                .attr('x2', xscale(k))
                .attr('y2', yscale(y))
                .attr('stroke', 'rgba(0, 0, 255, 0.5)');

            svg.append('g')
                .attr('transform', `translate(0, ${height - padding})`)
                .call(xaxis);
            svg.append('g')
                .attr('transform', `translate(${padding}, 0)`)
                .call(yaxis);

            span_output0.innerText = ys.pop();
            span_output1.innerText = y;
        };

    inputs.forEach((input) => {
        input.onchange = draw;
    });
    draw();
})();

x = k =
近似値: tan x = , Math.tan(x) =