タロットとJavascript。プログラム初心者が組み合わせを試みる。他、おすすめ本など。

若いときからプログラムには興味があったのですが、なかなか手を出せずに年月ばかりが過ぎてしまいました。仕事には出来なかったのですが、ちょっとしたヒマつぶし、遊びの延長で手を出してみるのもありかなと思いました。

さて、プログラムにも色々種類がありますが、どれに手を出すのがいいでしょうか？色々考えた結果、初心者にも手が出しやすく、実行環境もブラウザですむというjavascriptを選択してみました。

色々とコードを書いていくのが上達の近道だと思うのですが、トランプゲームや、タロット占いなどのいわゆる「カード物」は、数字の計算やそれによる条件分岐、カードの加減、画面のDOM操作など、プログラムの初学者が練習用として取り組むのは、最適な案件だと思います。

そこで今回やってみるのが、「タロットカードのワンオラクル」。さて、どんなものが出来るでしょうか？

まずはJavascriptの開発環境を整える
1. sandbox。クラウド上で全て完結するオシャレなコードエディタ。
2. おすすめの入門書、勉強の為の本は？
本題のタロットカードのワンオラクル
おわりに

まずはJavascriptの開発環境を整える

さて、いきなりプログラムを作れと言われても、それ相当の準備は必要ですよね。

sandbox。クラウド上で全て完結するオシャレなコードエディタ。

コードの記述には、一口にはテキスト文書という事なのですが、やはり、コード記述に特化したものを選ぶのがいいですね。色々試してみたのですが、かなり気に入っていて今使っているのが、「sandbox & github連携」。特徴としては、

クラウド上で完結するため、PCに余計なインストールがない
作成したファイルもgithubに保存するので、もしもの時も安心
ネット環境があればどこでもいいので、PCを持ち歩かなくてもいい
作ったコードを、WEB上に張り付け、簡単に公開できる

少し気になる点としては、webに貼り付けた際、多少のロード時間がある。そのあたりは、codepenとかの方がいい気がします。色々勘違いがあったら、すみません。

おすすめの入門書、勉強の為の本は？

イメージとしては、「教科書となるべき入門書を1冊は手元に置き、それで分からない部分に関しては、適宜ネット検察で補っていく」方法が良いかと個人的には思います。で、書店にてその教科書となるべき書籍を探して購入したのですが、かなり分かりやすくて、個人的に良いと思ったのは、こちら。

リンク

ロングセラーで、何年ぶりかのリニューアルだそうです。もしプログラムでどの書籍がいいか？迷われている方がいるならば、とりあえずコレを選んでおけば間違いはないのではないでしょうか。Javascriptの入門書として、おすすめの1冊です。

本題のタロットカードのワンオラクル

さて、環境が整ったところで、実際にコードを書いていきます。なるべくシンプルに、簡単に…なんて思ってはいたのですが、やってるうちに、あんな機能付けたい、こんな機能どうやって実現するんだろうか？とかいう感じになり、中々のスパゲティ具合…

それはそうと、目標としては、sandboxで書いたコードを、ブログに貼り付けというのがあったので、っていうか、実はそれがやりたかった(笑)

sandboxのコードをページに貼り付け

説明書

簡易版につき、タロットカード使用枚数は12枚のみ
一度にひける枚数は1～3枚まで、リセットにより再度試行出来る
クラスによるオブジェクト生成で、回顧録を右下の◀▶で閲覧できる
シャッフルでは、カード画像がぷるぷる震えるアニメーション
日付、時間のリアルタイム表示
カード裏面画像は、Base64という技術を使いcssに埋め込み、表示の高速化
タロットカード画像は、wikipediaへのリンクで対応

配列のシャッフルコード

function shuffle(arr) {
    let n = arr.length;
    let temp, i;

    while (n) {
      i = Math.floor(Math.random() * n--);
      temp = arr[n];
      arr[n] = arr[i];
      arr[i] = temp;
    }
    return arr;
  }

他のどなたかが考案された配列のシャッフルコード。便利です。詳しい事は分からないのですが、恐らく、配列の末尾要素と、中間のランダム要素の入れ替えをしながら、全体のシャッフルをしている？考案された人は、頭良すぎ(笑)

入力した数字の配列を、数字で作成するコード

　　　　　　　　//[...Array(x).keys()]
const aaa = ['りんご,'みかん','ぶどう'];
let bbb = [...Array(aaa.length).keys()];
               // ここでは↑aaaのlengthを入れている
console.log(bbb);
               //[0,1,2]←入力した数字の配列が、数字で出来る

主に、「配列の要素数面ダイス」を作るのに使用。さらに出来たダイスにpop()を組み合わせると、「カードデータが格納された配列は傷つけずに、カードを1枚ずつ引いていく」表現が上手くできる。便利。

画像をBase64で文字情報に変換、cssに埋め込み

[ホームページ作成] All About

HTMLファイルの中に画像を埋め込んで表示させる方法

https://allabout.co.jp/gm/gc/23977/

HTMLソースの中に画像を直接埋め込んで表示する方法を解説。HTMLはテキストデータですから、そのままではバイナリデータである画像を含められません。しかし、Base64という方法で画像をエンコード(＝テキストデータに変換)すれば、画像をHTMLソースの中に直接埋め込むことができます。読み込むファイル数を削減して高速化したい場合などに活用できます。HTMLソース内に画像を直接挿入してみましょう。

画像を文字情報に変換し、htmlやcssなどに埋め込むので、1度の読み込みで完了し再度読み込みの必要がない。よって、画像ファイルを別個用意しアップロードする必要もないというすぐれもの。ただし、画像サイスが大きいと、とてつもない文字数になってしまうので、小さな画像に限ります。カードの絵柄は大きくなく、且つ何度も表示要求のあるトランプやタロットには、とても良い選択肢の一つ。今回のワンオラクルでは、カードの裏面画像を、.backというクラス名でcssに入れています。

合わせて読みたい

【JavaScript】配列要素のシャッフルコード、forEachでループをゆっくり回す方法

おわりに

いかがだったでしょうか？

プログラムって、色々な機能をつけたくなっちゃって、どこかで区切らないと中々終われなくなってしまいます(笑)

因みに、今思いついている、実装出来たらいいなと思う機能は、

引いたカードの説明リンクを何処かに設けたい（出来れば）
引いたカードのデータを表計算ソフトなどに抽出してみたい（これはどうだろ？）

などなど(笑)

まあ、気長に挑んでみるとします。

それでは！

タロットのワンオラクルとJavascript。プログラム初心者が、組み合わせを試みる。他、おすすめ本など。