JavaScript - 手続きによる抽象の構築(高階手続きによる抽象(一般的方法としての手続き(無限の連分数(continued fraction、Eulerの展開))))

計算機プログラムの構造と解釈[第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.38.を JavaScript で取り組んでみる。

その他参考書籍

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

問題1.38.

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="k0">k = </label>
<input id="k0" type="number" min="1" step="1" value="2">
e = <span id="output0"></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="sample38.js"></script>

JavaScript

(() => {
    let div_graph = document.querySelector('#graph0'),
        input_k = document.querySelector('#k0'),
        span_output = document.querySelector('#output0'),
        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);
        },
        euler = (k) => {
            let n = (i) => 1,
                d = (i) => {
                    if (i % 3 == 2) {
                        return 2 * Math.ceil(i / 3);
                    }
                    return 1;
                };
            
            return contFrac(n, d, k);
        },
        e = (k) => euler(k) + 2,
        draw = () => {
            let k = parseInt(input_k.value, 10),
                ys = Array.range(1, k + 1).map(e),
                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', 2)
                .attr('fill', 'green');

            svg.append('line')
                .attr('x1', xscale(1))
                .attr('y1', yscale(Math.E))
                .attr('x2', xscale(k))
                .attr('y2', yscale(Math.E))
                .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_output.innerText = ys.pop();
        };

    input_k.onchange = draw;
    draw();
})();

k = e = (近似値)