こんにちは、松原です。
今は「案件相談窓口」として、お客様からご相談いただいた案件の見積やスケジューリングに必要な作業工数の算出を担当しています。元コーダーで、たまにコーディングもします。

在宅ワーク期間にはじめたルービックキューブにド嵌りして、この度「自動でキューブの展開図を描画するプログラムを作ってみよう！」という連載企画をスタートしました。

第１回では、ルービックキューブ（スピードキューブ）をはじめたきっかけや、キューブの面を崩す「スクランブル」の方法。これから制作するプログラムの構想についてお話ししました。
第２回、第３回では、HTMLとJavaScriptを使って制作をすすめる過程をレポートしてきましたが、コーディングがわからない人にはちょっと難しい内容になってしまいました。
前回の第４回はちょっと箸休め、知れば誰かに言いたくなるキューブ豆知識７選をお送りしました。

そして今回、この連載が遂に最終回を迎えることになりました。
つまり「Scrambler」がついに完成いたしました！！！
 

最後の仕上げ：展開図を表示させる

それでは早速、最後の仕上げ部分をレポートしていきたいと思います。制作の過程については、今回もコーディングがわかる人向けの内容が多いですが、ご容赦ください。

キューブが回転する仕組みのプログラムは一通り完了しているので、あとは展開図の部分をHTMLでコーディングして、キューブの状態（6面の色情報）を反映すれば出来上がり。完成までの道のりは次の3ステップです。

1. ブラウザ上で描画するために、展開図部分のHTML要素を取ってくる
2. 取得したHTML要素とJavaScriptの色情報の形式をそろえる
3. JavaScriptの色情報を元に、全54パーツの色をHTMLに反映する

1．展開図のHTML要素を取得

先ずは、ブラウザ上で描画するために、展開図の全54パーツ（9マス×6面）を構成するHTML要素を取得します。

2．HTML要素とJavaScriptの色情報の形式をそろえる

現状、JavaScriptで持っている全54パーツの色情報は、二次元配列（00～02、11～12、20～22のインデックス）に格納されていますが、1.で取得したHTMLの要素は通常の配列（一次元配列）のため、2つのデータの形式をそろえるために、JavaScriptの色情報を二次元配列から一次元配列（0～8のインデックス）に変換します。

3．JavaScriptの色情報を元に、全54パーツの色をHTMLに反映する

JavaScriptの色情報を元に、取得したHTML要素に対して背景色が変わるclassを順番に付与。全54パーツの色を展開図に反映します。

この一連の流れをコードで書くとこんな感じです。

See the Pen Sample3.js by M Matsubara (@matsume) on CodePen.

キューブが6面あるので、同じことを毎度6回繰り返してますね。ちょっとダサい感じがします。上記をリファクタリング（動作を変えずにソースコードを整理）したものが下記のコードです。

See the Pen Sample4.js by M Matsubara (@matsume) on CodePen.

JavaScriptのforEach（繰り返し処理）を利用すれば、同じことを何度も書く必要がなくなります。その機能を利用するために、まずは必要なキューブ6面の情報をオブジェクト（keyとvalue）で定義しました。さらに繰り返し実行したいプログラムを1回だけ記述して、それをオブジェクトの分だけループしています。結果、重複するような記述がなくなり、コード自体もかなり短くなりました！
 

おまけ：ローディング画面の追加

最初にイメージしたとおりの動きと見た目で大満足なのですが…なんか重い。動作が重いというか、最初の画面が表示されるまでに2～3秒かかるのが気になるのです。まぁ1,193,647行もあるTSVファイルを読み込んでいるのだから致し方なしですが、雰囲気を出すためにローディング画面を追加することにしました。

最近は画像なしのCSSとJSのみで実装できるローディングアニメーションのサンプルが豊富に公開されているので、それをキューブっぽくアレンジして実装してみました。

ということで、完成でーーーーす！！
何とか最後まで作り切ることができました、完成したページはこちら。是非アクセスして更新ボタンをクリックしてみてください。そしてキューブをお持ちの方はスクランブルしてみてください。尚、公開にあたって、どうしてもTSVデータの容量が大きすぎる問題が解消できず、今回は一部データを削除して調整しました。

ものさすサイトで「ものさす探求隊」がスタートして、ちょっとした好奇心で自らこの企画を持ち込み、この「Scrambler」（結局、最後まで仮タイトルのままでした）の制作と連載を続けてきました。しかし、毎回もの凄く悩みながら記事を書いていました。
一体誰に向けて書いているのか、何のために書いているのか、結局最後までよくわかりませんでしたが、キューブに対する熱い想いだけは失わずに持ち続けることができました。

今年は10年以上ぶりに福袋を予約しました、もちろん中身はキューブです。1月1日に届くので、年始もキューブ三昧になりそうです！

スピードキューブはどのくらい成長したのか？

最後に私が実物のキューブを回すタイムについてですが、連載をはじめることになった2020年7月のベストタイム（単発）は45.49秒でした。そして、現在の私のベストタイムは、、、26.82秒です！5ヵ月で約19秒もベストタイムを縮めることができました。

毎回連載でお伝えしていた「Best average of 5」（連続した5回の計測で、最短と最長の2回を除いた3回のタイムの平均値）は現在33.21秒で、前回より1.14秒短くなりました。ちょっとずつではありますが着実に成長はしているようです。

少し専門的な話ですが、私は「CFOP」という解法でキューブを解いていています。その解法には119の手順が存在するのですが、私はまだその中の半分くらいの手順しか憶えていません。つまり、まだまだ伸びしろがあるということですね！

もちろん、早く回すだけがキューブの楽しみ方ではありません。知れば知るほどキューブの世界は奥深く、今回私がスクランブルをJavaScriptでプログラミングしたように、キューブ界には独自の楽しみ方を実践している方々がたくさんいます。そんな幅の広さもキューブの魅力の一つです。是非実際のキューブを手に取って、自分なりの楽しみ方を発見して欲しいと思います。

これで「Webとキューブと私」の連載はめでたく終了となります。
最後までお読みいただき、誠にありがとうございました。