Edited at

おみくじプログラムの改造の自分バージョン

More than 5 years have passed since last update.

ぼくと同じ、JavaScriptを勉強し始めの@cervomansanさんに感化され、自分バージョンの「おみくじプログラム」を作った。

ベースはドットインストールのもの。

以下の改造をしてみた。


  • ドットインストールでの改造は組み込み済み

  • 外部jsファイル化した(onclickが学べた)

  • 外部ファイルにしたので、asyncとdeferを指定して非同期読み込みをかけた

  • 結果を画像として出力するようにした

  • 乱数で結果を出し、画像ファイル名にそのまま当てた

  • jsとCSSのセレクタ一貫性を理解して、キャメルケースでIDを指定した

日本版StackOverFlowと名高いQiitaで、フィードバックを頂きたくて書きました!


html

<!DOCTYPE html>

<html lang="ja">

<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>

<body>
<h1>おみくじ</h1>
<input type="button" value="あなたの運勢は?" id="jsButtom">
<p>あなたの運勢は...
<img id="jsResult"></img>
</p>
<script src="js/omikuji.js" async defer></script>
</body>

</html>



JavaScript

var jsButtom = document.getElementById('jsButtom'); //ボタンをIDでgetしてキャッシュ

jsButtom.onclick = function() { //ボタンがonclickされた時に起きる処理
var omikuji = ["daikichi", "chukichi", "shokichi", "suekichi", "kyo"];
var result = Math.floor(Math.random() * omikuji.length);
var imgFolder = "img/"; //フォルダパスをキャッシュ
var fileExtension = ".png"; //ファイル拡張子をキャッシュ
document.getElementById('jsResult').src = imgFolder + omikuji[result] + fileExtension;
};



Image

img/daikichi.png

img/chukichi.png
img/shochiki.png
img/suekichi.png
img/kyo.png


問題点


  • 乱数で配列から結果を取り出し、画像名にそのまま当てたのは、スマートなのか?

  • 応用性がでるように、imgFolderとfileExtensionという変数で画像の場所と拡張子を指定できるようにしたが、スマートなのか?


  • jsButtom.onclickonclickonClickでは動かなかった謎


セレクタのはなし


  • jsでは変数にハイフンは使えない

  • jsが触るID・Classにはプレフィックスを付けてわかりやすくしたい

  • jsの変数記述などでセレクタと変数をあわせたい

以上の理由からキャメルケース使用に着地したのだが、良いのでしょうか?


まとめ

@cervomansanさんを見習い、Qiitaに自分の勉強過程を書いてみたが、すごく良い!

とりあえず動いたので、自分のこのコードがもっとスマートに書ける方法が知りたい。諸先輩方、なにかありませんか?

いまだ変数・関数・オブジェクトの単語の使い分けが分からない。。。

@cervomansanさんと共にJavaScriptを覚えていきたいです!


その後

【あなたの運勢は?】ボタンを押しまくってひとりで楽しんでる。

こんな気持ちは小学校以来?

他のカスタム予定としては、


  • 結果に対するラッキーアイテムを表示したい(if/elseif/elseなのかwitch/caseどっちが正しいの。。。)

  • クッキーを使って前の日にちのおみくじの結果を出したい

  • あわせてカレンダーを出してみて、今日の日付を強調しつつ前の日付へのリンクを付けたい

  • どうせなら結んでみたい(canvasで)