Page」というWebサイトの記事をリライトしようと思ったからです。このサイトでは、Silverlightで作成したプログラムを多く公開していました。今となってはSilverlightもIEでしか動かないし、2021年10月でサポートも終わってしまいます。そのため、Silverlightから別のプラットフォームへ移植しなおそうと思ったのがきっかけでした。コンソールアプリで書き直し、Qiitaで公開しました。ルール0からルール255まで全て試すなどなど。いくつかのプログラムは、どうしてもコンソールアプリには向かないものもあります。できればSilverlight同様、Webページでプログラムを動かしたい。しようかなと、ずーっと悩んでいたのですが、僕のやりたいことは、アルゴリズムをコードで残しておきたいってことなので、まあC#である必要性はないんですよね。C#大好き人間なので、C#で書きたいという気持ちはありますが、C#で移植するのをあきらめて、勉強を兼ねてJavaScriptに移植することにしました。できるだけ最新のJavaScriptの仕様で書こうと思います。いうことで、IEは無視することにします。その第一弾がこの記事です。能書きが長くなってしまいましたが、作成したのは、1次元ランダムウォークのプログラムです。Qiitaは、CodePenのコードを埋め込めるようなので、記事の最後で、CodePenのコードを埋め込んで動作を確認できるようにします。walk)は、次に現れる位置が確率的に無作為(ランダム)に決定される運動である。範囲で動くと定義します。固定するのではなく、動く範囲を±5%にしてみました。5%という数字にはほとんど根拠はないです。APIをラップしした簡単なMyCanvasクラスを定義します。drawLineと、全体を塗りつぶすClearAllという2つのメソッドを定義しただけのものです。}}JavaScriptもclassキーワードが使えるようになったので、随分と便利になりました。WalkerクラスWalkerクラスは、ランダムウォークをするこのプログラムの核となるクラスです。コンストラクタで、MyCanvasオブジェクトと値の初期値(V(0)の値)を受け取ります。walkメソッドは、1歩進むだけのメソッド。範囲でランダムに値が上下するようにしています。このときCanvasの範囲をはみ出さないように制御しています。このメソッドでは描画は行いません。execが処理を開始するメソッド。ここで、setInterval使って、walkを繰り返し呼び出しています。得られた値と一つ前の値を線で結んでいます。この描画は前述のMyCanvasクラスを使っています。}}Walkerクラスは、値変化の機能と描画の機能が蜜結合なので、そこがいまいちなところかな。小さいプログラムなので良しとします。mainメソッド最後は、メイン処理を行うコードです。ファイルにまとめています。大きなプログラムになったら、export、importを使った方がよいですかね。HTMLHTMLファイルは、必要最低限のことだけを記述しています。CSSはインラインで埋め込んでいます。スクリーンショットです。「ある会社の株価の推移です」と言われても頷いてしまいそうです。下降トレンド、もみ合い、上昇トレンドの3つが見られます。CodePenのコードを埋め込んでみる上記コードをCodePenで書いて、埋め込んでみました。[start]ボタンを押すと描画が始まります。upLoginユーザーは見つかりませんでした。