初心者向けアーカイブ - nyanblog ~にゃんぶろぐ~

【初心者】簡単！vue.jsで電卓の作り方【サンプル】

nyan2222 — Thu, 10 Mar 2022 12:40:12 +0000

前回はJavaScriptで電卓を作成しました。
今回は前回作成した電卓を元にvue.jsに書き換えしてみましょう。

前回の記事はこちらから！

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

はじめに
1. 電卓の機能
HTML
JavaScript
デモ
最後に

はじめに

まずはじめに前回でも説明しましたが、電卓の機能を説明します。
その後、vue.jsに書き換える手順を説明します。

また、CSSに関しては前回の記事より変更がありませんので今回は割愛させていただきます。

電卓の機能

作る電卓の機能は次のとおりです。

四則演算ができる
Cキーで初期化
＝で計算した後
数字の場合、初期化したあと数字入力
演算子の場合、結果はそのまま使用
最初のキーが”0”、”.”、”+-×/”の場合、
あらかじめ0が入力されている前提で式に入力

完成イメージはこちらです。

HTML

HTMLコードです。

vue.jsの設定 → CDNでの設定


  
  電卓

今回vueを使用するため、6行目にheadタグにCDN設定を追加しました。

注意する点として、他のJavaScriptファイルを読み込む前にCDN設定するようにしてください。

電卓の各ボタンをv-forで自動作成

// 電卓のボタン
dataArrays: [
  ["7", "8", "9", "÷"],
  ["4", "5", "6", "×"],
  ["1", "2", "3", "-"],
  ["0", ".", "=", "+"],
],

Cボタン以外はvueで自動生成させます。
ボタンの順番やデータはJavaScript側で記述します。

divタグはデータ1行単位でforを回し、buttonタグは1項目（1データ）単位で回しています。

みみねこ

dataArrayと完成イメージ図を見比べると分かりやすいと思います！

クリックイベント書き換え

クリックイベント「onclick」を「v-on:click」に置換します。

vue使用のためv-model、idの設定

inputタグのidを設定していましたが、v-modelでの設定に変更。
divのid=”app”を設定。

JavaScript

こちらがJavaScriptのコードです。

scriptファイルを分けているので、「window.onload」でhtmlの読み込みが終わってから実行するようにしています。

window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      result: "0",
      is_calc: false,
      dataArrays: [
        ["7", "8", "9", "÷"],
        ["4", "5", "6", "×"],
        ["1", "2", "3", "-"],
        ["0", ".", "=", "+"],
      ],
      operators_list: ["÷", "×", "-", "+"  ],
    },
    methods: {
      c_click: function () {
        this.result = "0";
        this.is_calc = false;
      },
      btn_Click: function (val) {
        if (this.operators_list.includes(val)) {
          this.ope_click(val);
        } else if (val === "=") {
          this.equal_click();
        } else {
          this.num_click(val);
        }
      },
      num_click: function (val) {
        if (this.is_calc) this.result = "0";
        this.is_calc = false;

        if (this.result == "0" && val == "0") {
          this.result = "0";
        } else if (this.result == "0" && val == ".") {
          this.result = "0.";
        } else if (this.result == "0") {
          this.result = val;
        } else {
          this.result += val;
        }
      },
      ope_click: function (val) {
        if (this.is_calc) this.is_calc = false;

        if (this.is_ope_last()) {
          this.result = this.result.slice(0, -1) + val;
        } else {
          this.result += val;
        }
      },
      equal_click: function () {
        if (this.is_ope_last()) this.result = this.result.slice(0, -1);

        var temp = new Function("return " + this.result.replaceAll("×", "*").replaceAll("÷", "/"))();
        if (temp == Infinity || Number.isNaN(temp)) {
          this.result = "Error";
        } else {
          this.result = temp;
          this.is_calc = true;
        }
      },
      is_ope_last: function () {
        return this.operators_list.includes(this.result.toString().slice(-1));
      },
    },
  });
};

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

最後に

いかがでしたでしょうか。vue.jsも主流になっていますので使いこなしていきたいですね！

良ければ別のサンプルページも見てみてくださいね♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

投稿【初心者】簡単！vue.jsで電卓の作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者】簡単！JavaScriptで電卓の作り方【サンプル】

nyan2222 — Sun, 06 Mar 2022 14:50:45 +0000

今回はJavaScriptで電卓を作成しました。
初心者の方が勉強しやすいシンプルな機能で作ってみました。

まずは簡単なものを完成することを目的にして、
そのあとで機能を追加していくことが勉強するにはおすすめですよ♪

みみねこ

初めから難しいものを作ろうとしても時間がかかって、その内やる気がなくなるのは勿体ないですよね…。（よくある）

別記事でVue.jsを使った記述も紹介しますので、合わせて読んでみてください！

【初心者】簡単！vue.jsで電卓の作り方【サンプル】

JS[JavaScript]で四則演算ができる簡易的な計算機を作成しました。プログラミング初心者の方への勉強向け記事になりますのでデモページを見ながらコード、関数を見ながら作成してみてはいかがでしょうか。

はじめに
HTML
1. コード
2. HTML解説
CSS
JavaScript
1. コード
2. 解説
デモ
最後に

はじめに

まずは今回作成する電卓の機能を決定します。

みみねこ

コーディングする前に機能を決定しておくことは、手戻りを防ぐためにも大事ですね♪

今回は次の機能を持たせました。

四則演算ができる
Cキーで初期化
＝で計算した後
数字の場合、初期化したあと数字入力
演算子の場合、結果はそのまま使用
最初のキーが”0”、”.”、”+-×/”の場合、
あらかじめ0が入力されている前提で式に入力

みみねこ

今回はこのまま進みますが、機会があればアップデートしていきたいですね♪

完成イメージ図はこちらです。デモページもありますので見てみてください。

HTML

まずはHTMLを作成していきます。
作成しているのは、次の3つです。

ヘッダー
「電卓」の文字
計算の表示枠
数字や演算子ボタン

コード


  電卓

みみねこ

input後のbuttonや、button後のbuttonについて
分かりやすいように改行を入れていますが、実際のコードでは改行していないので注意してください。

HTMLファイルを見てみると画像のように表示されます。

HTML解説

5行目　input要素
・readonly属性にして直接入力不可
・計算式や結果を表示するためid=”result”を設定
・valueを0にして初期表示
6行目　Cボタン
onclick属性で”c_click()”を設定
数字ボタン
onclick属性で”num_click(this.innerHTML)”を設定
this.innerHTMLはHTMLの中身を表しています。
例）9行目であれば”7″が入ります。
演算子ボタン
onclick属性で”ope_click(this.innerHTML)”を設定
29行目　イコールボタン
onclick属性で”equal_click()”を設定

CSS

次にCSSでスタイルを決定します。
”reset.css”も使っているので、この辺りは好きなようにカスタマイズをしてください。

@charset "utf-8";
/*全体*/
.wrapper{
  max-width: 350px;
  margin: 0 auto;
  color: #666;
}
#header,#calc{
  box-sizing: border-box;
  text-align: center;
}
/*ヘッダー*/
#header {
  font-size: 24px;
  padding: 1rem;
}
/*テキスト*/
input{
  box-sizing: border-box;
  width: 75%;
  height: 3.5rem;
  font-size: 1.6rem;
  text-align: right;
  padding: 0 0.75rem;
}
/*ボタン関係*/
button{
  font-size: 18px;
  width: 25%;
  height: 3.5rem;
  color: #333;
  vertical-align: middle;
  border-color: #fff;
}
button:hover{
  background-color: #ddd;
}

設定が終わると、このように表示されるようになります。

JavaScript

コード

次項で詳しく解説していますが、コメントでも多少記述しています。

みみねこ

最初はコピペして自分で理解しながらカスタマイズする方法も勉強するのに向いていますよ！

// データ
var result = "";
// =で計算したかどうか
var is_calc = false;

// 初期表示
window.onload = function () {
  result = document.getElementById('result');
};

// Cキー押下
function c_click(){
  result.value = "0";
  is_calc = false;
}

// 数字キー押下
function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}

// 演算子キー押下
function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}

// =キークリック
function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();
  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}

// 入力されている値が演算子かどうか
function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

解説

先述したコードに対して細かく解説していきます！

・グローバル変数の定義

2つの変数を定義、初期化しています。
result変数はhtmlのid=”ressult”と紐づけします。

// 表示させるデータ
var data = "";
// =で計算したかどうか
var is_calc = false;

・HTML読み込み後

HTML読み込み後、id”result”と変数のresultを紐づけしています。

window.onload = function () {
  result = document.getElementById('result');
};

・Cボタンクリック

Cボタンクリック時のイベントを記述しています。
ここでは変数の初期化を行っています。

function c_click(){
  result.value = "0";
  is_calc = false;
}

・数字ボタンクリック

数字ボタンクリック時のイベントを記述しています。

function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}

2、3行目
1度”＝”で計算済みの場合、数字ボタンを押したらresultを初期化します。
is_calcはfalseにします。
5～13行目
入力した数字によってresultの処理を行います。
・1つ目の条件は初期化後、”0″が入力された場合、resultに”0″を設定
・2つ目の条件は初期化後、”.”が入力された場合、resultに”0.”を設定
・3つ目の条件は初期化後、上記以外の数字が入力された場合、resultに入力値を設定
・それ以外は直接resultに入力値を追加

・演算子ボタンクリック

演算子ボタンクリック時のイベントを記述しています。

function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}

2行目
is_calcがtrueの場合があるのでfalseにします
4～8行目
条件によって計算式の処理を変えています。
1つ目の条件では、直前のボタンが演算子の場合、演算子を切り替えます。
それ以外では、計算式に入力した演算子を付け加えます。

// 1つ目の条件：例
// 直前の計算式
9×6+
// 押したボタン
-
// 演算子切り替え後
9×6-

・＝ボタンクリック

＝ボタンクリック時のイベントを記述しています。

function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();

  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}

2行目
計算式の最後が演算子の場合、演算子を取り除きます。
4行目
変数tempに計算式の計算結果を設定します。
7～9行目
計算結果がInfinity（無限大）かNaN（数字出ない）場合、resultにErrorを設定します。
8～11行目
tempの値をresultに設定し、計算済み（is_calc）フラグをtrueにします。

・is_ope_last() 関数

計算式の最後が演算子か判定する関数です。
「result.value.toString().slice(-1)」は計算式の最後の文字を取得し、
「[“+”,”-“,”×”,”÷”].includes(…」で4つの演算子と一致するかどうかbool型で返しています。

function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

最後に

いかがでしたでしょうか。
次回はvue.jsに書き換えしてみます！

良ければ別のサンプルページも見てみてくださいね♪

【初心者】簡単！vue.jsで電卓の作り方【サンプル】

【サンプル】JavaScriptのコードまとめリンク集

本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪

投稿【初心者】簡単！JavaScriptで電卓の作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】

nyan2222 — Sat, 09 Jan 2021 02:57:23 +0000

こんにちは！
前回はJavaScriptでカレンダーを作成しました。
今回は、前回作成したカレンダーに祝日対応を組み込んでいきたいと思います！

前回の記事は下のリンクからどうぞ♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

はじめに
フロー（箇条書き）
1. CSVファイル読み込み
2. 当月の日付判定
HTML
CSS
JavaScript
1. コード
2. 解説
デモ
最後に

はじめに

祝日の対応ですが、今回はCSVファイルを読み込んで日付判定を行います。
CSVファイルは内閣府のWebサイトから取得できます。
※ 文字コードをShift-JISからUTF-8に変更しました。

直接ダウンロードされる場合はここをクリックしてください。

データは日付、祝日名の2項目で作成されています。

フロー（箇条書き）

箇条書きで処理フローを記述していきます。
CSVファイルの読み込みと当月の日付判定のそれぞれで変更を加えます。

CSVファイル読み込み

CSVファイルを読み込み
読み込み完了後、カレンダー表示

当月の日付判定

その日付の情報を取得（本日か、祝日か等）
条件に応じてカレンダー（HTML）を設定

HTML

こちらの記事のHTMLと同じなので、解説は省略します♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

CSS

前回の記事とほとんど変わりなしですが、
祝日のクラス（=holiday）に日曜日と同様のcolorスタイルの設定を追加しました。

td:first-child,
td.holiday{
    color: red;
}

JavaScript

コード

全体のコードです。
次項で解説しますが、前回の投稿で解説した内容は割愛いたします。

const week = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();
// 月末だとずれる可能性があるため、1日固定で取得
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 祝日取得
var request;
window.onload = function () {
    request = new XMLHttpRequest();
    request.open('get', 'syukujitsu.csv', true);
    request.send(null);
    request.onload = function () {
        // 初期表示
        showProcess(today, calendar);
    };
};

// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

// カレンダー表示
function showProcess(date) {
    var year = date.getFullYear();
    var month = date.getMonth(); // 0始まり
    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

    var calendar = createProcess(year, month);
    document.querySelector('#calendar').innerHTML = calendar;
}

// カレンダー作成
function createProcess(year, month) {
    // 曜日
    var calendar = "";
    for (var i = 0; i < week.length; i++) {
        calendar += "";
    }
    calendar += "";

    var count = 0;
    var startDayOfWeek = new Date(year, month, 1).getDay();
    var endDate = new Date(year, month + 1, 0).getDate();
    var lastMonthEndDate = new Date(year, month, 0).getDate();
    var row = Math.ceil((startDayOfWeek + endDate) / week.length);

    // 1行ずつ設定
    for (var i = 0; i < row; i++) {
        calendar += "";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                var dateInfo = checkDate(year, month, count);
                if(dateInfo.isToday){
                    calendar += "";
                } else if(dateInfo.isHoliday) {
                    calendar += "";
                } else {
                    calendar += "";
                }
            }
        }
        calendar += "";
    }
    return calendar;
}

// 日付チェック
function checkDate(year, month, day) {
    if(isToday(year, month, day)){
        return {
            isToday: true,
            isHoliday: false,
            holidayName: ""
        };
    }

    var checkHoliday = isHoliday(year, month, day);
    return {
        isToday: false,
        isHoliday: checkHoliday[0],
        holidayName: checkHoliday[1],
    };
}

// 当日かどうか
function isToday(year, month, day) {
    return (year == today.getFullYear()
        && month == (today.getMonth())
        && day == today.getDate());
    }

// 祝日かどうか
function isHoliday(year, month, day) {
    var checkDate = year + '/' + (month + 1) + '/' + day;
    var dateList = request.responseText.split('\n');
    // 1行目はヘッダーのため、初期値1で開始
    for (var i = 1; i < dateList.length; i++) {
        if (dateList[i].split(',')[0] === checkDate) {
            return [true, dateList[i].split(',')[1]];
        }
    }
    return [false, ""];
}解説
・祝日データ（CSVファイル）取得
// 祝日取得
var request;
window.onload = function () {
    request = new XMLHttpRequest();
    request.open('get', 'syukujitsu.csv', true);
    request.send(null);
    request.onload = function () {
      // 初期表示
      showProcess(today, calendar);
    };
};
XMLHttpRequestオブジェクトを使用して、変数 request にCSVデータを格納しています。
1. request.open()関数でデータ取込のリクエストを行います。
2. request.send()関数でリスエストをサーバに送信します。
3. 7～10行目はロードが成功して完了後に呼ばれます。
つまり、CSVファイルの読み込みが完了した後にカレンダー表示の関数（showProcess）を呼び出しています。
・当月の日付を設定　コード：70～77行目
var dateInfo = checkDate(year, month, count);
if(dateInfo.isToday){
    calendar += "
";
} else if(dateInfo.isHoliday) {
    calendar += "";
} else {
    calendar += "";
}1行目：変数 dateInfoに日付チェックの戻り値を設定します。
2～8行目：dateInfoを使って条件に応じて日付を設定していきます。
・dateInfo.isTodayがtrueの場合、クラスtodayを付与して設定。
・dateInfo.isHolidayがtrueの場合、クラスholidayを付与、titleに祝日名を設定。
・上記以外の場合、日付をそのまま設定。
titleに祝日名を設定しているのは、祝日名をツールチップとして表示させるためです。
ツールチップ：カーソルやマウスポインタを合わせると小さな領域が注釈が表示されるもの。
・日付チェック　checkDate関数
引数：year（年）、month（月）、day（日）
戻り値：日付の情報
・当日かどうか（Bool）
・祝日かどうか（Bool）
・祝日名（文字列）
// 日付チェック
function checkDate(year, month, day) {
    if(isToday(year, month, day)){
        return {
            isToday: true,
            isHoliday: false,
            holidayName: ""
        };
    }

    var checkHoliday = isHoliday(year, month, day);
    return {
        isToday: false,
        isHoliday: checkHoliday[0],
        holidayName: checkHoliday[1],
    };
}
日付チェックの関数です。
条件に応じて戻り値のオブジェクトを作成しています。
・当日判定　isToday関数
引数：year（年）、month（月）、day（日）
戻り値：当日かどうか（Bool）
// 当日かどうか
function isToday(year, month, day) {
    return (year == today.getFullYear()
    && month == (today.getMonth())
    && day == today.getDate());
}
today（Date型）を使って、当日かどうかを判定します。
・祝日判定　isHoliday関数
引数：year（年）、month（月）、day（日）
戻り値：配列 [祝日かどうか（Bool）, 祝日名]
// 祝日かどうか
function isHoliday(year, month, day) {
    var checkDate = year + '/' + (month + 1) + '/' + day;
    var dateList = request.responseText.split('\n');
    // 1行目はヘッダーのため、初期値1で開始
    for (var i = 1; i < dateList.length; i++) {
        if (dateList[i].split(',')[0] === checkDate) {
            return [true, dateList[i].split(',')[1]];
        }
    }
    return [false, ""];
}
3行目：CSVデータの日付はYYYY/MM/DD形式のため、
引数で渡された年月日をYYYY/MM/DD形式で変数checkDateに設定。
4行目：変数dataListには、CSVデータを行毎に配列に格納。
6～10行目：CSVの行数分for文を回します。
ファイルの1行目はヘッダー行のため、初期値=1で設定。
7～9行目：
祝日：dateList[i].split(‘,’)[0]
祝日名：dateList[i].split(‘,’)[1]
祝日とcheckDateが一致する場合、戻り値を配列 [true, 祝日名]で設定して処理を完了。
どのデータとも一致しない場合は戻り値を配列 [false, 空文字]でセットして処理を完了。
デモ
こちらがデモページになります。
祝日の日付が赤くなっており、該当の日付にカーソルを合わせると祝日の名前が表示されます。
ただ、このCSVファイルはその年分までの日付しか入っていないため、
2024年以降の祝日には対応されていません。ご注意ください…。
最後に
いかがでしたでしょうか。
カレンダーを確認するときに祝日は分かっている方が見やすいですね♪
実装も簡単にできたのでお勧めです。
良ければ他の投稿もご覧ください！
投稿 【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者向け】JavaScriptでカレンダー作成【サンプル】
nyan2222 — Thu, 07 Jan 2021 04:29:22 +0000

こんにちは！
今回はJavaScriptでカレンダーを作成してみました。
カレンダー作成にはライブラリも存在しますが、勉学のために作成する方が多いかと思いますので今回は使用していません。自作すると、カスタマイズが容易であることもメリットですね！



本記事の続きでカレンダーに祝日も反映させました！





【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】
JavaScriptで祝日対応のカレンダーを作成しました。内容：内閣府のWebサイトから取得したCSVファイルを読み込んで日付判定を行い、祝日を赤字表示させツールチップに祝日名を表示する。var request = new XMLHttpRequest();...
nyanblog2222.com
2021.01.09





  目次
    
    はじめに
フロー（箇条書き）
HTML
CSS
JavaScriptコード
解説・グローバル変数の定義
・初期表示
・prev()、next()関数
・カレンダー表示　showProcess関数
・カレンダー作成　createProcess関数
デモ
最後に
    
  

はじめに



まずはカレンダーに持たせる機能を決定します。
今回は以下の機能を持たせることにしました。





ヘッダーに年月を表示



ボタンで月の移動ができる



余白に先月、翌月の日付を灰色で表示



本日の日付に色をつける





実際に作成したものですが、イメージ図はこちらです。







また、次以降の投稿で祝日、スケジュール入力の機能を追加したいと考えています。



フロー（箇条書き）



次に箇条書きで処理フローを記述します。





日付オブジェクトを取得



年月を表示



カレンダーを作成

曜日の行を作成



1日が何曜日からはじまるか取得



当月が何行になるか算出



月曜日から2. で取得した行数分日付を設定





カレンダーを表示





こちらで実際にコーディングを進めていきます。



HTML



まずはHTMLを作成していきます。
作成しているのは、以下の3つです。





年月表示のヘッダー



月移動のボタン



カレンダー






    
    

    
    
        
        
    

    
    




CSS



次にCSSでスタイルを決定します。
この辺りは好きなようにカスタマイズをしていただいて良いと思います！



ただ、JavaScriptで以下にクラスを設定しているので、ご注意ください。



先月、翌月の日付：disabled
当日：today



@charset "utf-8";

/*全体*/
.wrapper{
    max-width: 600px;
    margin: 0 auto;
    color: #666;
}
#header {
    text-align: center;
    font-size: 24px;
    width: 100%;
    margin: 1rem 0 0;
}

/*カレンダー*/
#calendar {
    text-align: center;
    width: 100%;
}
table {
    outline: 2px solid #ddd;
    border-collapse: collapse;
    width: 100%;
}
th {
    color: #000;
}
th, td {
    outline: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
/*日曜日*/
td:first-child {
    color: red;
}
/*土曜日*/
td:last-child {
    color: blue;
}
/*前後月の日付*/
td.disabled {
    color: #ccc;
}
/*本日*/
td.today {
    background-color: #D65E72;
    color: #fff;
}

/*ボタン*/
#next-prev-button {
    position: relative;
}
#next-prev-button button{
    cursor: pointer;
    background: #B78D4A;
    color: #fff;
    border: 1px solid #B78D4A;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    margin: 1rem 0;
}
#next-prev-button button:hover{
    background-color: #D4BB92;
    border-color: #D4BB92;
}
#prev {
    float: left;
}
#next {
    float: right;
}



JavaScript



JavaScriptで実際にカレンダーを作成、表示していきます。



コード



次項で詳しく解説していますが、コメントでも多少記述しています。
コピペも可能です！



const week = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();
// 月末だとずれる可能性があるため、1日固定で取得
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 初期表示
window.onload = function () {
    showProcess(today, calendar);
};
// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

// カレンダー表示
function showProcess(date) {
    var year = date.getFullYear();
    var month = date.getMonth();
    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

    var calendar = createProcess(year, month);
    document.querySelector('#calendar').innerHTML = calendar;
}

// カレンダー作成
function createProcess(year, month) {
    // 曜日
    var calendar = "
" + week[i] + "
" + (lastMonthEndDate - startDayOfWeek + j + 1) + " " + (count - endDate) + " " + count + " " + count + " " + count + "



























" + count + " " + count + " " + count + "















































































































";
    for (var i = 0; i < week.length; i++) {
        calendar += "";
    }
    calendar += "";

    var count = 0;
    var startDayOfWeek = new Date(year, month, 1).getDay();
    var endDate = new Date(year, month + 1, 0).getDate();
    var lastMonthEndDate = new Date(year, month, 0).getDate();
    var row = Math.ceil((startDayOfWeek + endDate) / week.length);

    // 1行ずつ設定
    for (var i = 0; i < row; i++) {
        calendar += "";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                if(year == today.getFullYear()
                  && month == (today.getMonth())
                  && count == today.getDate()){
                    calendar += "";
                } else {
                    calendar += "";
                }
            }
        }
        calendar += "";
    }
    return calendar;
}解説
先述したコードに対して細かく解説していきます！
結構長くなってしまったので、不要な方は飛ばしてください。
・グローバル変数の定義
const week = ["日", "月", "火", "水", "木", "金", "土"];
曜日を格納した配列を定義しています。
変更予定がないので、定数（const）で作成しています。
const today = new Date();
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);
・本日の日付オブジェクトを定数で宣言
・表示する日付オブジェクトを宣言
表示する日付オブジェクトは初期化では”today”の年月＋1日固定で作成します。
Q：なぜ”today”をそのまま使用しないか
A：前の月、次の月表示で”getMonth()”に+-1を行っていますが、末日だと先々月、もしくは翌々日になることがあります。
・初期表示
window.onload = function () {
    showProcess(today, calendar);
};
当日の日付オブジェクトを使用して、showProcess関数を呼び出して初期表示を行います。
window.onload = function () {・・・};
↑はHTMLが読み込まれた直後に呼び出される関数です。
・prev()、next()関数
// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}
「＜」クリックでprev()、「＞」クリックでnext()の関数がそれぞれ呼び出されます。
prev()関数の場合はshowDateオブジェクトに1月分減算後、
next()関数の場合はshowDateオブジェクトに1月分加算後にshowProcess関数を呼び出してカレンダーを表示します。
・カレンダー表示　showProcess関数
引数：date（表示するDateオブジェクト）
var year = date.getFullYear();
var month = date.getMonth();
document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";
ヘッダー（id=”#header”）に年月を表示させます。
getMonth()は0始まりのため、1月の場合、0が取得されます。
そのため、3行目では (month + 1) で月を設定します。
var calendar = createProcess(year, month);
document.querySelector('#calendar').innerHTML = calendar;
createProcess関数でカレンダーを作成し、id=”#calendar”にカレンダーを設定します。
・カレンダー作成　createProcess関数
引数：year（年）、month（月）
戻り値：作成したカレンダー
// 曜日
var calendar = "
" + week[i] + "
" + (lastMonthEndDate - startDayOfWeek + j + 1) + " " + (count - endDate) + " " + count + " " + count + "











































































































";
for (var i = 0; i < week.length; i++) {
    calendar += "";
}
calendar += "";定数”week”を使用してカレンダー上部に表示させる、曜日を設定します。
var count = 0;
var startDayOfWeek = new Date(year, month, 1).getDay();
var endDate = new Date(year, month + 1, 0).getDate();
var lastMonthEndDate = new Date(year, month, 0).getDate();
var row = Math.ceil((startDayOfWeek + endDate) / week.length);
日付を設定するのに必要な変数を定義します。
それぞれの変数は以下の内容を定義しています。
count：日付のカウント
startDayOfWeek：表示する月の1日の曜日
endDate：表示する月の末日
lastMonthEndDate：表示する先月の末日
row：カレンダー（日付部分）の行数
// 1行ずつ設定
for (var i = 0; i < row; i++) {
    calendar += "
";
    // 1colum単位で設定
    for (var j = 0; j < week.length; j++) {
        if (i == 0 && j < startDayOfWeek) {
            // 1行目で1日まで先月の日付を設定
            calendar += "";
        } else if (count >= endDate) {
            // 最終行で最終日以降、翌月の日付を設定
            count++;
            calendar += "";
        } else {
            // 当月の日付を曜日に照らし合わせて設定
            count++;
            if(year == today.getFullYear()
              && month == (today.getMonth())
              && count == today.getDate()){
                calendar += "";
            } else {
                calendar += "";
            }
        }
    }
    calendar += "";
}始めのfor文は行単位、2つ目のfor文はカラム（日付）単位で回します。
3行目、26行目ではtrタグで括っています。
6行目の条件は「1行目、かつ、1日の曜日未満」の場合に8、9行目の処理を行います。
その場合にクラス「disabled」を付与して日付を設定します。
計算式は例で実際に当てはめてみましょう。
例：2021/01
lastMonthEndDate = 31
startDayOfWeek = 5 （金曜日）
日曜日：31 – 5 + 0 + 1 = 27
月曜日：31 – 5 + 1 + 1 = 28
10行目の条件は当月の最終日以降、翌月の日付を設定します。
上記同様、クラス「disabled」を付与して日付を設定します。
それ以外の14行目～24行目の処理は当月の日付1日から末日まで入ります。
また、17行目～19行目の条件は本日の日付かどうかチェックしており、本日の場合はクラス「today」を付与しています。
デモ
こちらがデモページになります。
初期表示は当月で表示され、本日が赤く表示されていると思います。
また、＜＞のボタンをクリックすることで月の移動ができますので、お試しください♪
最後に
いかがでしたでしょうか。
ライブラリを使わなくても意外と簡単に実装ができました！
この後、カレンダーに祝日対応してみましたので、
良ければこちらの投稿もご覧ください！


【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】
JavaScriptで祝日対応のカレンダーを作成しました。内容：内閣府のWebサイトから取得したCSVファイルを読み込んで日付判定を行い、祝日を赤字表示させツールチップに祝日名を表示する。var request = new XMLHttpRequest();...
nyanblog2222.com
2021.01.09


【サンプル】JavaScriptのコードまとめリンク集
本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪
nyanblog2222.com
2022.09.01
投稿 【初心者向け】JavaScriptでカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。
" + week[i] + "



















"
                     + (lastMonthEndDate - startDayOfWeek + j + 1) + " " + (count - endDate) + " " + count + " " + count + "

" + week[i] + "
" + (lastMonthEndDate - startDayOfWeek + j + 1) + "	" + (count - endDate) + "	" + count + "	" + count + "	" + count + "
" + count + "	" + count + "	" + count + "

初心者向け アーカイブ - nyanblog ~にゃんぶろぐ~

【初心者】簡単！vue.jsで電卓の作り方【サンプル】

はじめに

電卓の機能

HTML

電卓

vue.jsの設定 → CDNでの設定

電卓の各ボタンをv-forで自動作成

クリックイベント書き換え

vue使用のためv-model、idの設定

JavaScript

デモ

最後に

【初心者】簡単！JavaScriptで電卓の作り方【サンプル】

はじめに

HTML

コード

電卓

HTML解説

CSS

JavaScript

コード

解説

・グローバル変数の定義

・HTML読み込み後

・Cボタンクリック

・数字ボタンクリック

・演算子ボタンクリック

・＝ボタンクリック

・is_ope_last() 関数

デモ

最後に

【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】

はじめに

フロー（箇条書き）

CSVファイル読み込み

当月の日付判定

HTML

CSS

JavaScript

コード

解説

・祝日データ（CSVファイル）取得

・当月の日付を設定 コード：70～77行目

・日付チェック checkDate関数

・当日判定 isToday関数

・祝日判定 isHoliday関数

デモ

最後に

【初心者向け】JavaScriptでカレンダー作成【サンプル】

はじめに

フロー（箇条書き）

HTML

CSS

JavaScript

コード

解説

・グローバル変数の定義

・初期表示

・prev()、next()関数

・カレンダー表示 showProcess関数

・カレンダー作成 createProcess関数

デモ

最後に

初心者向けアーカイブ - nyanblog ~にゃんぶろぐ~

・当月の日付を設定　コード：70～77行目

・日付チェック　checkDate関数

・当日判定　isToday関数

・祝日判定　isHoliday関数

・カレンダー表示　showProcess関数

・カレンダー作成　createProcess関数