【１０日目】12星座判定アプリの作成 [Monacaを使用]

HTML,JavaScript,monaca

今回は入力した日付から12星座を判定して結果を表示するプログラムを作ります。開発にはMonacaを使用しました。
このプログラムの目標としては、配列などを活用して判断の処理をできるだけ短くすることです。

完成したプログラムはこちらです。解説は後半でまとめて書きます。

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        function showResult() {
            let month = parseInt(document.getElementById("month").value);
            let day = parseInt(document.getElementById("day").value);

            let limit = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];


            let prof = [{
                sign: "やぎ",
                start: new Date('1/1'),
                end: new Date('1/19')
            }, {
                sign: "みずがめ",
                start: new Date('1/20'),
                end: new Date('2/18')
            }, {
                sign: "うお",
                start: new Date('2/19'),
                end: new Date('3/20')
            }, {
                sign: "おひつじ",
                start: new Date('3/21'),
                end: new Date('4/19')
            }, {
                sign: "おうし",
                start: new Date('4/20'),
                end: new Date('5/20')
            }, {
                sign: "ふたご",
                start: new Date('5/21'),
                end: new Date('6/21')
            }, {
                sign: "かに",
                start: new Date('6/22'),
                end: new Date('7/22')
            }, {
                sign: "しし",
                start: new Date('7/23'),
                end: new Date('8/22')
            }, {
                sign: "おとめ",
                start: new Date('8/23'),
                end: new Date('9/22')
            }, {
                sign: "てんびん",
                start: new Date('9/23'),
                end: new Date('10/23')
            }, {
                sign: "さそり",
                start: new Date('10/24'),
                end: new Date('11/22')
            }, {
                sign: "いて",
                start: new Date('11/23'),
                end: new Date('12/21')
            }, {
                sign: "やぎ",
                start: new Date('12/22'),
                end: new Date('12/31')
            }];

            if (month < 1 || month > 12 || day < 1 || day > limit[month]) {
                result.innerHTML = 'その日付は無いよ!!';
                return;
            }

            let sumple = new Date(`'${month}/${day}'`);
            console.log(sumple);
            console.log(month);

            const found = prof.find(element => element.start <= sumple && element.end >= sumple);

            console.log(found.sign);
            result.innerHTML = `${month}月${day}日は${found.sign}座です`;

        }
    </script>
</head>

<body>
    <div class="display">
    日付を入力してね<br />
    <input type="text" id="month" placeholder="月を入力" class="insert">月
    <input type="text" id="day" placeholder="日を入力" class="insert">日
    <br>
    <button onclick="showResult()" class="button">判定！</button>
    <div id="result">結果表示</div>
    </div>
</body>

</html>

プログラムの一連の流れを説明します。

宣言

            let month = parseInt(document.getElementById("month").value);
            let day = parseInt(document.getElementById("day").value);

            let limit = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            let prof = [{sign: ... , start: ... , end: ...}];

monthとdayはHTMLのinputから値を取りますが、このときにそのまま取り出してしまうと文字列のままになってしまうのでparseInt()を使用して数字に変換します。するとこの後扱いやすくなるのであらかじめ数値に直しておきます。

limitは「『月』番目の日にちはこの日まで」というのを表しています。

profは配列と連想配列の組み合わせでsignは星座名、startとendはそれぞれその星座の始まりの日と終わりの日を表しています。

判断

            if (month < 1 || month > 12 || day < 1 || day > limit[month]) {
                result.innerHTML = 'その日付は無いよ!!';
                return;
            }

            let sumple = new Date(`'${month}/${day}'`);
            
            const found = prof.find(element => element.start <= sumple && element.end >= sumple);

            result.innerHTML = `${month}月${day}日は${found.sign}座です`;

最初のif文でその日付が本当に存在する日付なのかを調べて、なければreturnで終了させます。これで余分な操作を省略することができます。

星座の判定にはfind関数を使用することで、for文を使うよりも短く実現することができます。
またDateオブジェクトを活用して日付の大小関係を簡潔に表すことができました。

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

より詳しく

ユーザー登録ログイン

@ri6616

@hzn3f

2022-05-06 17:49

コードを拝見して、データをもう少し簡略化したい、2月29日も有効な日付にしたい、持たせるDateオブジェクトは極力減らしたい、等と感じたので私なりに組んでみました。

const prof = [
  {sign: 'やぎ',     start: '1222'},
  {sign: 'いて',     start: '1123'},
  {sign: 'さそり',   start: '1024'},
  {sign: 'てんびん', start: '0923'},
  {sign: 'おとめ',   start: '0823'},
  {sign: 'しし',     start: '0723'},
  {sign: 'かに',     start: '0622'},
  {sign: 'ふたご',   start: '0521'},
  {sign: 'おうし',   start: '0420'},
  {sign: 'おひつじ', start: '0321'},
  {sign: 'うお',     start: '0219'},
  {sign: 'みずがめ', start: '0120'},
  {sign: 'やぎ',     start: '0101'},
];

const showResult = () => {
  const inputMonth = document.getElementById('month').value.trim().padStart(2, '0');
  const inputDay = document.getElementById('day').value.trim().padStart(2, '0');
  const result = document.getElementById('result');
  const inputDate = `2000-${inputMonth}-${inputDay}`;
  const date = new Date(`${inputDate}T00:00:00Z`);
  const checkDate = date.toJSON();

  if(checkDate === null || date.toJSON().slice(0, 10) !== inputDate) {
    result.textContent = 'その日付は無いよ!!';
    return;
  }

  for(const p of prof) {
    if(p.start <= `${inputMonth}${inputDay}`) {
      result.textContent = `${+inputMonth}月${+inputDay}日は${p.sign}座です`;
      return;
    }
  }
};

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン

記事の改善

編集リクエストを送る

記事の情報

編集履歴編集リクエスト一覧 LGTMしたユーザー一覧 Markdown で本文を見る