サンプル アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/tag/サンプル/ ちょっとしたことを調べているよ Fri, 15 Nov 2024 08:55:34 +0000 ja hourly 1 https://wordpress.org/?v=6.7 https://nyanblog2222.com/wp-content/uploads/2021/09/cropped-favicon-32x32.png サンプル アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/tag/サンプル/ 32 32 【初心者】JavaScriptでTODOリスト作り方【サンプル】 https://nyanblog2222.com/programming/5090/ https://nyanblog2222.com/programming/5090/#respond Thu, 09 Mar 2023 15:31:35 +0000 https://nyanblog2222.com/?p=5090 JavaScriptでTODOリストを作成しました。 シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪ 目次 はじめに実装内容（フロー）HTMLCSSJavaSc […]

投稿 【初心者】JavaScriptでTODOリスト作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

JavaScriptでTODOリストを作成しました。

シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪

はじめに

まずはTODOリストの機能を考えます。
今回は以下の機能を持たせて実装しました。

簡単な機能しか実装していませんが、好みに応じてカスタマイズしてみてください。

  • タスクを追加、完了、削除
  • タスクをまとめて削除する

作成のイメージ図がこちらです。

実装内容（フロー）

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

  1. 変数を設定
  2. タスク追加ボタン押下時：
    1. タスク名の入力値チェック
    2. タスクに必要な要素を追加する
  3. チェックしたタスクを一括削除ボタン押下時：
    1. チェックしたタスクをを削除する
  4. 完了ボタン押下時：
    1. ボタンを押下したタスクを完了
  5. 削除ボタン押下時：
    1. ボタンを押下したタスクを削除
みみねこ
みみねこ

シンプルな機能だけ持たせています。
改善点は色々思い当たりますが、完了状態→タスク未完了状態に戻したりがありますね。

HTML

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

  1. タイトル（TODOリスト）
  2. タスク名登録・タスク複数削除
  3. タスク一覧（完了・削除ボタン）
<body>
  <div class="wrapper">
    <h1 id="header">TODOリスト</h1>
    <div id="input-wrap">
      <input id="task-name" type="text" placeholder="タスク名を入力してください" />
      <button onclick="addTask()">タスクを追加</button>
      <button class="deleteTask-button" onclick="deleteTask()">チェックしたタスクを削除</button>
    </div>
    <div id="main-wrap">
      <form name="task_form">
        <ul id="todo-list"></ul>
      </form>
    </div>
  </div>
</body>

「タスクを追加」ボタンにクリックイベント”addTask()“
「チェックしたタスクを削除」ボタンにクリックイベント”deleteTask()“

を設定しています。

CSS

次にCSSでスタイルを決定します。
この辺りは好きなようにカスタマイズをしていただいて良いと思います！
※ 先にreset.cssを読み込んでからスタイルを設定していますので、注意してください。

特に記載するところはありませんが、
61行目「line-through」、87行目「disabled」はJavaScriptで「完了」ボタン押下時のイベントで使用するため、設定してください。

@charset "utf-8";

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

/* 入力 */
#input-wrap {
  margin: 0 auto;
  width: 80%;
}
#input-wrap input{
  width: 40%;
  height: 24px;
  margin-right: 1rem;
}

/* リスト */
#main-wrap {
  text-align: center;
  margin: 0 auto;
  width: 70%;
  min-height: 120px;
  border: 1px solid #aaa;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  padding: 0.8rem 2rem;
}

#main-wrap ul {
  padding-inline-start: 0
}

#main-wrap li {
  text-align: left;
  list-style-type: none;
  border-bottom: 1px dashed #aaa;
  padding: 0.8rem 0;
  display: flex;
  line-height: 32px;
}

#main-wrap p {
  width: 60%;
}
#main-wrap p.line-through {
  text-decoration: line-through;
}

/*ボタン*/
button{
  height: 32px;

  cursor: pointer;
  background: #B78D4A;
  color: #fff;
  border: 1px solid #B78D4A;
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.2rem 1.5rem;
  margin-bottom: 0.5rem;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

button:hover{
  background-color: #D4BB92;
  border-color: #D4BB92;
}
button.disabled {
  background-color: #D4BB92;
  border-color: #D4BB92;
  cursor: not-allowed;
  pointer-events: none;
}

button.deleteTask-button {
  margin-bottom: 1.5rem;
}

.end-button, .delete-button {
  margin-bottom: 0;
  padding: 0.2rem 1rem;
}

.end-button {
  margin-right: 0.4rem;
}

JavaScript

JavaScriptのコードと解説をしていきます。

コード

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

var todoList;
window.onload = function () {
  todoList = document.getElementById('todo-list');
}

// タスク追加
function addTask() {
  var taskName = document.getElementById('task-name');

  // タスク名の入力がなければ処理を終了
  if(taskName.value.Trim() == "") return;

  // liに要素を追加
  var li = document.createElement('li');

  // liにinputを追加
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'task');
  li.appendChild(input);

  // liにpを追加
  var p = document.createElement('p');
  p.innerHTML = taskName.value;
  li.appendChild(p);

  // liにbuttonを追加
  var endButton = createTaskButton('end-button', '完了');
  li.appendChild(endButton);

  // liにbuttonを追加
  var deleteButton = createTaskButton('delete-button', '削除');
  li.appendChild(deleteButton);

  // ulにliを追加
  todoList.appendChild(li);

  taskName.value = "";

  // イベント処理
  // 完了ボタンクリック
  endButton.addEventListener('click', function(e){
    e.preventDefault();
    this.setAttribute('class', 'end-button disabled');
    this.previousElementSibling.setAttribute('class', 'line-through');
  });
  // 削除ボタンクリック
  deleteButton.addEventListener('click', function(e){
    e.preventDefault();
    todoList.removeChild(this.closest('li'));
  });
}

// チェックしたタスクを一括削除
function deleteTask() {
  var inputList = document.task_form.task;
  for(var i=inputList.length-1;i>=0;i--) {
    if(inputList[i].checked){
      todoList.removeChild(inputList[i].closest('li'));
    }
  }
}

// タスク内にあるボタンを作成
function createTaskButton(className, name) {
  var btn = document.createElement('button');
  btn.setAttribute('class', className);
  btn.innerHTML = name;
  return btn;
}

解説

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

・グローバル変数の定義・ページ読み込み後、変数にHTML要素を設定

var todoList;
window.onload = function () {
  todoList = document.getElementById('todo-list');
}

ページ読み込み後に<ul>のid’todo-list’を取得し、変数todoListに設定しています。

・タスク追加

function addTask() {
  var taskName = document.getElementById('task-name');

  // タスク名の入力がなければ処理を終了
  if(taskName.value.Trim() == "") return;

  // liに要素を追加
  var li = document.createElement('li');

  // liにinputを追加
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'task');
  li.appendChild(input);

  // liにpを追加
  var p = document.createElement('p');
  p.innerHTML = taskName.value;
  li.appendChild(p);

  // liにbuttonを追加
  var endButton = createTaskButton('end-button', '完了');
  li.appendChild(endButton);

  // liにbuttonを追加
  var deleteButton = createTaskButton('delete-button', '削除');
  li.appendChild(deleteButton);

  // ulにliを追加
  todoList.appendChild(li);

  taskName.value = "";

  // イベント処理
  // のちほど説明のため省略
}

「タスクを追加」ボタン押下時のイベントを実装します。

var taskName = document.getElementById('task-name');

タスク名を入力する<input>のid’task-name’を取得し、変数taskNameに設定しています。

// タスク名の入力がなければ処理を終了
if(taskName.value.Trim() == "") return;

タスク名の入力値が空であれば処理を終了する。
Trim()は入力値の前後の空白を除きます。

// liに要素を追加
var li = document.createElement('li');

// liにinputを追加
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('name', 'task');
li.appendChild(input);

// liにpを追加
var p = document.createElement('p');
p.innerHTML = taskName.value;
li.appendChild(p);

// liにbuttonを追加
var endButton = createTaskButton('end-button', '完了');
li.appendChild(endButton);

// liにbuttonを追加
var deleteButton = createTaskButton('delete-button', '削除');
li.appendChild(deleteButton);

<li>の要素を作成します。<li>の中には以下の要素を作ります。

・チェックボックス
・タスク名
・完了ボタン
・削除ボタン

// ulにliを追加
todoList.appendChild(li);

作成した<li>を<ul>に追加します。

taskName.value = "";

入力欄をリセットするため、空文字（””）を設定します。

・完了ボタンクリック
endButton.addEventListener('click', function(e){
  e.preventDefault();
  this.setAttribute('class', 'end-button disabled');
  this.previousElementSibling.setAttribute('class', 'line-through');
});

各タスクの「完了」ボタンを実装します。

e.preventDefault();

こちらの関数はイベントのデフォルト動作をキャンセルします。

this.setAttribute('class', 'end-button disabled');

end_button[完了ボタン]にclass属性’end-button disabled‘を設定します。
disabledクラスはボタンを非活性するスタイルを設定します。

thisはendButtonを指します。

this.previousElementSibling.setAttribute('class', 'line-through');

タスク名<p>に取消線のクラス‘line-through’を設定します。

previousElementSibling：一つ前の要素。endButton[完了ボタン]の一つ前の要素<p>を指します。

・削除ボタンクリック
deleteButton.addEventListener('click', function(e){
  e.preventDefault();
  todoList.removeChild(this.closest('li'));
});

各タスクの「削除」ボタンを実装します。
※ e.preventDefault();は先ほど出てきたので省略

todo_list.removeChild(this.closest('li'));

タスクを削除します。

removeChild()：<ul>（todoList）の子要素を削除します。
this.closest(‘li’)：クリックしたボタンthis(deleteButton)の直近に存在する親要素、もしくは要素自身を返します。

・チェックしたタスクを一括削除：deleteTask()

function deleteTask() {
  var inputList = document.task_form.task;
  for(var i=inputList.length-1;i>=0;i--) {
    if(inputList[i].checked){
      todoList.removeChild(inputList[i].closest('li'));
    }
  }
}

「チェックしたタスクを削除」ボタン押下時に呼ばれる関数“deleteTask()”を作成します。
チェックしたタスクを一度に削除する処理を行います。

var inputList = document.task_form.task;

<form name=”task_form”>の中の<input name=”task”>を一覧で取得して変数inputListに設定しています。

“task_form”と”task”はname属性で指定した値です。

みみねこ
みみねこ

htmlファイルと見比べながら確認すると分かりやすいです。

// ①
for(var i=inputList.length-1;i>=0;i--) {
  // ②
  if(inputList[i].checked){
    // ③
    todo_list.removeChild(inputList[i].closest('li'));
  }
}

チェックしたタスク<li>を削除していきます。

①for文でinputListを後ろから一つずつ<input>を回し
②if文でチェックボックスでチェックしているか確認
※ チェックされているときはcheckedがtrue
③trueであればリスト（todoList）からliを削除
※ removeChildは「削除ボタンクリック」で開設済み

みみねこ
みみねこ

①で後ろからfor文を回している理由は、回しながらliを削除しているので
添字が変わってしまうことにより、チェックしているタスクが全て削除されなくなるというのを防いでいます。
※ ★このあたりは文章だと分かりずらいので、今後時間があれば図にするかもしれません…。

・タスク内にあるボタンを作成：createTaskButton(class_name, name)

function createTaskButton(className, name) {
  var btn = document.createElement('button');
  btn.setAttribute('class', className);
  btn.innerHTML = name;
  return btn;
}

タスクの「完了」「削除」ボタンを作成する関数です。

var btn = document.createElement('button');

<botton>の要素を作成します。

btn.setAttribute('class', className);
btn.innerHTML = name;

ボタンに属性classを設定、innerHTMLにボタンに表示する内容を設定します。

最後にボタン（要素）を返します。

デモ

こちらがデモページになります。

良かったら試してみてください♪

投稿 【初心者】JavaScriptでTODOリスト作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/5090/feed/ 0 【サンプル】JavaScriptのコードまとめリンク集 https://nyanblog2222.com/programming/4717/ https://nyanblog2222.com/programming/4717/#respond Thu, 01 Sep 2022 12:18:37 +0000 https://nyanblog2222.com/?p=4717 本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。 目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪ 目次 文法JavaScript サンプルVue […]

投稿 【サンプル】JavaScriptのコードまとめリンク集 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。

目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪

文法

基本的な文法やJavaScriptで用意されている関数などの解説の記事です。

JavaScript サンプル

JavaScriptを使用したサンプルの一覧です。

Vue.js サンプル

Vueの基本からVueを使用したサンプルの一覧です。

Canvas

2Dの図形を描画するのに用いられるcanvasの使い方の一覧です。

JSON

さまざまなデータの集まりであるJSONの扱い方の一覧です。

アニメーション サンプル

JavaScriptでCSSやプラグインを操作した、動きのあるサンプルの一覧です。

IE対応

IE対応の一覧です。
※ 使うことはないかもしれませんが…。

投稿 【サンプル】JavaScriptのコードまとめリンク集 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/4717/feed/ 0 【初心者】簡単！vue.jsで電卓の作り方【サンプル】 https://nyanblog2222.com/programming/javascript/4571/ https://nyanblog2222.com/programming/javascript/4571/#respond Thu, 10 Mar 2022 12:40:12 +0000 https://nyanblog2222.com/?p=4571 前回はJavaScriptで電卓を作成しました。今回は前回作成した電卓を元にvue.jsに書き換えしてみましょう。 前回の記事はこちらから！ 目次 はじめに電卓の機能HTMLvue.jsの設定 → CDNでの設定電卓の各 […]

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

]]>

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

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

【初心者】簡単！JavaScriptで電卓の作り方【サンプル】
JSで四則演算や小数点の計算ができる簡易的な電卓を作成。持たせる機能から作り方の考え方までHTML,CSSソースやデモページ付きで解説しているので、プログラミングの勉強や参考に！デモページあり。
nyanblog2222.com
2022.03.06
【初心者向け】JavaScriptでカレンダー作成【サンプル】
JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！
nyanblog2222.com
2021.01.07

はじめに

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

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

電卓の機能

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

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

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

HTML

HTMLコードです。

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="icon" href="https://nyanblog2222.com/wp-content/themes/blogtemplate/images/favicon.ico">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div id="app">
    <h1 id="header">電卓</h1>
    <div id="calc">
      <div>
        <input readonly v-model="result" type="text"><button v-on:click="c_click">C</button>
      </div>
      <div v-for="row in dataArrays">
        <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
      </div>
    </div>
  </div>
</body>

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

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

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

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

また、vue.jsのインストールや最新環境のCDNの情報はこちらから確認してください♪

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

<div v-for="row in dataArrays">
  <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
</div>

// 電卓のボタン
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でカレンダー作成【サンプル】
JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！
nyanblog2222.com
2021.01.07

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

]]> https://nyanblog2222.com/programming/javascript/4571/feed/ 0 【初心者】簡単！JavaScriptで電卓の作り方【サンプル】 https://nyanblog2222.com/programming/4496/ https://nyanblog2222.com/programming/4496/#respond Sun, 06 Mar 2022 14:50:45 +0000 https://nyanblog2222.com/?p=4496 今回はJavaScriptで電卓を作成しました。初心者の方が勉強しやすいシンプルな機能で作ってみました。 まずは簡単なものを完成することを目的にして、そのあとで機能を追加していくことが勉強するにはおすすめですよ♪ 別記事 […]

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

]]>

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

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

みみねこ
みみねこ

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

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

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

はじめに

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

みみねこ
みみねこ

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

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

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

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

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

HTML

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

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

コード

<div class="wrapper">
  <h1 id="header">電卓</h1>
  <div id="calc">
    <div>
      <input readonly id="result" type="text" value="0">
      <button onclick="c_click()">C</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">7</button>
      <button onclick="num_click(this.innerHTML)">8</button>
      <button onclick="num_click(this.innerHTML)">9</button>
      <button onclick="ope_click(this.innerHTML)">÷</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">4</button>
      <button onclick="num_click(this.innerHTML)">5</button>
      <button onclick="num_click(this.innerHTML)">6</button>
      <button onclick="ope_click(this.innerHTML)">×</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">1</button>
      <button onclick="num_click(this.innerHTML)">2</button>
      <button onclick="num_click(this.innerHTML)">3</button>
      <button onclick="ope_click(this.innerHTML)">-</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">0</button>
      <button onclick="num_click(this.innerHTML)">.</button>
      <button onclick="equal_click()">=</button>
      <button onclick="ope_click(this.innerHTML)">+</button>
    </div>
  </div>
</div>
みみねこ
みみねこ

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で電卓の作り方【サンプル】
JS[JavaScript]で四則演算ができる簡易的な計算機を作成しました。プログラミング初心者の方への勉強向け記事になりますのでデモページを見ながらコード、関数を見ながら作成してみてはいかがでしょうか。
nyanblog2222.com
2022.03.10
【サンプル】JavaScriptのコードまとめリンク集
本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪
nyanblog2222.com
2022.09.01

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

]]> https://nyanblog2222.com/programming/4496/feed/ 0 【WordPress】サイトにデモページを貼りたい！【作り方】 https://nyanblog2222.com/webproduction/wordpress/1157/ https://nyanblog2222.com/webproduction/wordpress/1157/#respond Wed, 11 Aug 2021 23:32:33 +0000 https://nyanblog2222.com/?p=1157 プログラミング言語やWordPressやら、動きを確認するデモページを別ページで表示させているサイトありますよね！ 今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪ 目次 デモページの用 […]

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

プログラミング言語やWordPressやら、動きを確認するデモページを
別ページで表示させているサイトありますよね！

今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪

デモページの作成手順

１．デモページを作成

２．作成したフォルダごと「ドメイン」直下、もしくは「ドメイン/wordpress」直下にあげる

３．記事にリンクを張り付ける

デモページの用意

まずはデモページを準備します。

フォルダを用意し、その中にデモページのファイルを準備します。

demo1フォルダに
　js/script.js
　css/style.css
　index.html
を準備してみてください。

試しなのでindex.htmlだけでも大丈夫です。

分かりやすく、画像にしてみました！

デモページのファイル構成

デモページのサンプル

試しにやってみたいという方は
こちらのコードをコピーして使用してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デモサンプル</title>
    <meta name="viewport" content="width=device-wisth,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>
    <div>
        <p>デモサンプルです。</p>
        <p>表示させてみましょう！</p>
    </div>
</body>
</html>

style.css

@charset "utf-8";
p {
    // テキストを中央配置
    text-align: center;
}

script.js

window.onload = function() {
    // コンソール画面に"hello world!!"を表示
    console.log("hello world!!")
}

サーバにファイルをアップする

今回サーバへのファイルアップロードにはffftpのソフトを使用しています。

アップロードができれば、どのソフトを使用してもOKですし、
サーバ会社の管理画面よりファイルをアップしても問題ありません！

デモを配置する親フォルダを作成

デモを配置する親フォルダをWordPressがインストールされているフォルダ直下に作成します。

画像で表示されているフォルダやファイルを参考に場所を見つけてください。

初期設定にもよりますが、ドメイン直下もしくはWordPressフォルダ直下にあることが多いです。

また、「wp-admin」「wp-content」「wp-includes」のフォルダや
「.htaccess」「index.php」のファイルがあるフォルダと考えると見つけやすいです。

demoフォルダ作成

今回は「demo」というフォルダを作成しています。

親フォルダにデモファイル一式をアップロードする

続いて、先ほど作成した「demo」フォルダに「demo1」フォルダ毎アップロードします。

demo1フォルダ作成

「demo」フォルダに複数のデモが格納されるイメージです。

デモの配置イメージ

デモページの表示

先ほどアップロードしたデモページをさっそく確認してみましょう。

デモページのリンクの貼り方

htmlに実際にリンクを貼ってみましょう。

「リンク」をクリックし、URLを設定します。

URLは
https://[ドメイン]/[デモの親フォルダ]/[デモのフォルダ]/
のように設定してください。
※ 例：https://nyanblog2222.com/demo/demo1/

デモページのリンクの設定

デモページの確認

こちらのページから先ほど設定したデモページを確認することができます。

デモページ

まとめ

いかがでしたでしょうか。

簡単に作ることができますが、
デモページのファイルをどこに置けばいいのか悩んだので今回は記事にしてみました。

一度親フォルダを作成しておけば
次からも同じように3つの手順でデモページを引き続き作成することができます。

デモページの作成手順

１．デモページを作成

２．作成したフォルダごと「ドメイン」直下、もしくは「ドメイン/wordpress」直下にあげる

３．記事にリンクを張り付ける

良かったら参考にしていただければ嬉しいです！

最後までご覧いただき、ありがとうございました♪

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/1157/feed/ 0 【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】 https://nyanblog2222.com/programming/javascript/2835/ https://nyanblog2222.com/programming/javascript/2835/#respond Sat, 09 Jan 2021 02:57:23 +0000 https://nyanblog2222.com/?p=2835 こんにちは！前回はJavaScriptでカレンダーを作成しました。今回は、前回作成したカレンダーに祝日対応を組み込んでいきたいと思います！ 前回の記事は下のリンクからどうぞ♪ 目次 はじめにフロー（箇条書き）CSVファイ […]

投稿 【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

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

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

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

はじめに

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

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

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

フロー（箇条書き）

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

CSVファイル読み込み

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

当月の日付判定

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

HTML

<div class="wrapper">
    <!-- xxxx年xx月を表示 -->
    <h1 id="header"></h1>

    <!-- ボタンクリックで月移動 -->
    <div id="next-prev-button">
        <button id="prev" onclick="prev()">‹</button>
        <button id="next" onclick="next()">›</button>
    </div>

    <!-- カレンダー -->
    <div id="calendar"></div>
</div>

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

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

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 = "<table><tr class='dayOfWeek'>";
    for (var i = 0; i < week.length; i++) {
        calendar += "<th>" + week[i] + "</th>";
    }
    calendar += "</tr>";

    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 += "<tr>";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                var dateInfo = checkDate(year, month, count);
                if(dateInfo.isToday){
                    calendar += "<td class='today'>" + count + "</td>";
                } else if(dateInfo.isHoliday) {
                    calendar += "<td class='holiday' title='" + dateInfo.holidayName + "'>" + count + "</td>";
                } else {
                    calendar += "<td>" + count + "</td>";
                }
            }
        }
        calendar += "</tr>";
    }
    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 += "<td class='today'>" + count + "</td>";
} else if(dateInfo.isHoliday) {
    calendar += "<td class='holiday' title='" + dateInfo.holidayName + "'>" + count + "</td>";
} else {
    calendar += "<td>" + count + "</td>";
}

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 ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/javascript/2835/feed/ 0 【初心者向け】JavaScriptでカレンダー作成【サンプル】 https://nyanblog2222.com/programming/javascript/2749/ https://nyanblog2222.com/programming/javascript/2749/#respond Thu, 07 Jan 2021 04:29:22 +0000 https://nyanblog2222.com/?p=2749 こんにちは！今回はJavaScriptでカレンダーを作成してみました。カレンダー作成にはライブラリも存在しますが、勉学のために作成する方が多いかと思いますので今回は使用していません。自作すると、カスタマイズが容易であるこ […]

投稿 【初心者向け】JavaScriptでカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

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

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

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

はじめに

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

  • ヘッダーに年月を表示
  • ボタンで月の移動ができる
  • 余白に先月、翌月の日付を灰色で表示
  • 本日の日付に色をつける

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

カレンダー作成イメージ図

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

フロー（箇条書き）

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

  1. 日付オブジェクトを取得
  2. 年月を表示
  3. カレンダーを作成
    1. 曜日の行を作成
    2. 1日が何曜日からはじまるか取得
    3. 当月が何行になるか算出
    4. 月曜日から2. で取得した行数分日付を設定
  4. カレンダーを表示

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

HTML

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

  1. 年月表示のヘッダー
  2. 月移動のボタン
  3. カレンダー
<div class="wrapper">
    <!-- xxxx年xx月を表示 -->
    <h1 id="header"></h1>

    <!-- ボタンクリックで月移動 -->
    <div id="next-prev-button">
        <button id="prev" onclick="prev()">‹</button>
        <button id="next" onclick="next()">›</button>
    </div>

    <!-- カレンダー -->
    <div id="calendar"></div>
</div>

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 = "<table><tr class='dayOfWeek'>";
    for (var i = 0; i < week.length; i++) {
        calendar += "<th>" + week[i] + "</th>";
    }
    calendar += "</tr>";

    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 += "<tr>";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                if(year == today.getFullYear()
                  && month == (today.getMonth())
                  && count == today.getDate()){
                    calendar += "<td class='today'>" + count + "</td>";
                } else {
                    calendar += "<td>" + count + "</td>";
                }
            }
        }
        calendar += "</tr>";
    }
    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 = "<table><tr class='dayOfWeek'>";
for (var i = 0; i < week.length; i++) {
    calendar += "<th>" + week[i] + "</th>";
}
calendar += "</tr>";

定数”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 += "<tr>";
    // 1colum単位で設定
    for (var j = 0; j < week.length; j++) {
        if (i == 0 && j < startDayOfWeek) {
            // 1行目で1日まで先月の日付を設定
            calendar += "<td class='disabled'>"
                     + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
        } else if (count >= endDate) {
            // 最終行で最終日以降、翌月の日付を設定
            count++;
            calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
        } else {
            // 当月の日付を曜日に照らし合わせて設定
            count++;
            if(year == today.getFullYear()
              && month == (today.getMonth())
              && count == today.getDate()){
                calendar += "<td class='today'>" + count + "</td>";
            } else {
                calendar += "<td>" + count + "</td>";
            }
        }
    }
    calendar += "</tr>";
}

始めの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 ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/javascript/2749/feed/ 0 【VBA】Shift-JIS・UTF-8等、各種文字コードのファイル読み込み【コピペで使えるサンプル付き】 https://nyanblog2222.com/programming/2291/ https://nyanblog2222.com/programming/2291/#respond Sun, 06 Sep 2020 09:00:00 +0000 https://nyanblog2222.com/?p=2291 今回はAccess等で使われるVBAで、Shift-JIS（SJIS）・UTF-8等、各種文字コードのファイルを読み込む方法を紹介します。内容としては、OpenステートメントやADODB.Streamを使った手法です。自 […]

投稿 【VBA】Shift-JIS・UTF-8等、各種文字コードのファイル読み込み【コピペで使えるサンプル付き】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回はAccess等で使われるVBAで、Shift-JIS（SJIS）・UTF-8等、各種文字コードのファイルを読み込む方法を紹介します。
内容としては、OpenステートメントやADODB.Streamを使った手法です。
自作関数のサンプルもつけてますので、是非ご活用ください！
また、同時にダイアログを開いて対象のファイル名を取得する方法も紹介してますので、良かったらそちらもどうぞ。

紹介する手法

まず、本記事の簡単なまとめから♪

・Openステートメント
　Shift-JISのみ
・ADODB.Stream　←　☆汎用性があるため個人的にはおすすめ
　Shift-JIS・UTF-8他

共通で使っているテストデータやサブ関数

説明の際に使用するテストデータや、自作関数の中で呼び出しているサブ関数です。
本記事とは内容が離れますので、飛ばしてもらっても大丈夫です。

テストデータ

今回テストとして読み込むcsvファイルは以下を使用します。
（同じ内容で文字コードがShift-JIS・UTF-8のデータを用意）

No	郵便番号	住所	名前
1	859-5326	東京都春日井市向谷町１－６５	ヤマモトコーポレーション株式会社
2	987-2523	千葉県向田市山本町６５８－４４	華井　譲
3	789-0001	千葉県向田市山本町　ジンダ－ビル２F　２０１号	蓮田不動産株式会社
4	653-6567	大阪府大東市浅田８－９９９	株式会社ハッターフ
5	198-3463	鹿児島県薩摩川内市浜本１２３－７７	山本　茂

（サブ関数）ダイアログを開いて対象のファイル名を取得する

ダイアログを開いて対象のファイル名を取得するサブ関数を用意しました。
直接ファイルパスを次項から紹介する関数のコード上に書いてしまっても良かったのですが、それではコピペして使いにくいので。。

内容としては、GetFileName_csvを呼び出すと、ダイアログを開いてcsvファイルのファイル名を取得し、戻り値として返す関数になります。

' GetFileName_csv
' csvファイル名を取得
Function GetFileName_csv()

    'ダイアログを開いてcsvファイルのファイル名を取得
    'Application.FileDialogを使うには、
    '参照設定でMicrosoft Office 1X.0 Object Libraryの追加が必要
    With Application.FileDialog(msoFileDialogOpen)
        .Filters.Clear
        .Filters.Add "csvファイル", "*.csv"
        .AllowMultiSelect = False
        If .Show = True Then
            GetFileName_csv = .SelectedItems(1)
        End If
    End With

End Function

Openステートメントでcsvファイル読み込み（Shift-JISのみ可）

Openステートメントで、csvファイルを読み込む方法です。
Openステートメントでは、文字コードに合わせて対応していくことができないので、Accessのデフォルトの文字コードであるShift-JISでしか正しく読み取りできません。

以下、Openステートメントを使用したcsvファイル読込関数関数です。

' ReadCSVFile_Open
' csvファイル読込関数（Openステートメントを使用）
Sub ReadCSVFile_Open()
    
    'ファイル名取得
    Dim sOpenFileName As String
    sOpenFileName = GetFileName_csv
    If sOpenFileName = "" Then Exit Sub

    'ファイルを読み込んでイミディエイトウィンドウに内容を表示する
    Dim sBuf  As String
    Open sOpenFileName For Input As #1 'ファイルを開いて[#1]という番号で管理
    Do Until EOF(1)
       Line Input #1, sBuf '1行づつバッファへ格納
       Debug.Print sBuf
    Loop
    Close #1
    
End Sub

こちらの関数を使用して、Shift-JISのファイルを読み込んだ結果はこちらです。

ファイル名：SJIS.csv

No  郵便番号    住所    名前
1   859-5326    東京都春日井市向谷町１－６５    ヤマモトコーポレーション株式会社
2   987-2523    千葉県向田市山本町６５８－４４  華井　譲
3   789-0001    千葉県向田市山本町　ジンダ－ビル２F　２０１号   蓮田不動産株式会社
4   653-6567    大阪府大東市浅田８－９９９  株式会社ハッターフ
5   198-3463    鹿児島県薩摩川内市浜本１２３－７７  山本　茂

正確に読み取れてますね。

試しにこの関数を使って、UTF-8も読み取ってみました。

ファイル名：UTF-8.csv

No  驛ｵ萓ｿ逡ｪ蜿ｷ    菴乗園  蜷榊燕
1   859-5326    譚ｱ莠ｬ驛ｽ譏･譌･莠募ｸょ髄隹ｷ逕ｺ・托ｼ搾ｼ厄ｼ・繝､繝槭Δ繝医さ繝ｼ繝昴Ξ繝ｼ繧ｷ繝ｧ繝ｳ譬ｪ蠑丈ｼ夂､ｾ
2   987-2523    蜊・痩逵悟髄逕ｰ蟶ょｱｱ譛ｬ逕ｺ・厄ｼ包ｼ假ｼ搾ｼ費ｼ・闖ｯ莠輔€€隴ｲ
3   789-0001    蜊・痩逵悟髄逕ｰ蟶ょｱｱ譛ｬ逕ｺ縲€繧ｸ繝ｳ繝€・阪ン繝ｫ・巽縲€・抵ｼ撰ｼ大捷 闢ｮ逕ｰ荳榊虚逕｣譬ｪ蠑丈ｼ夂､ｾ
4   653-6567    螟ｧ髦ｪ蠎懷､ｧ譚ｱ蟶よｵ・伐・假ｼ搾ｼ呻ｼ呻ｼ・譬ｪ蠑丈ｼ夂､ｾ繝上ャ繧ｿ繝ｼ繝・
5   198-3463    鮖ｿ蜈仙ｳｶ逵瑚湊鞫ｩ蟾晏・蟶よｵ懈悽・托ｼ抵ｼ難ｼ搾ｼ暦ｼ・螻ｱ譛ｬ縲€闌・

全角が化けてしまっていますね。
前述のとおり、UTF-8を含む他の文字コードには対応していませんので、読み取る必要があれば次項をお使いください。

ADODB.Streamでcsvファイルを読み込む（UTF-8、Shift-JIS他）

ADODB.Streamで、csvファイルを読み込む方法です。
ADODB.Streamでは、UTF-8、Shift-JISを含む各種文字コードに対応しています。

以下、Openステートメントを使用したcsvファイル読込関数関数です。

' ReadCSVFile_ADODB
' csvファイル読込関数（ADODB.Streamを使用）
Sub ReadCSVFile_ADODB()
    
    'ファイル名取得
    Dim sOpenFileName As String
    sOpenFileName = GetFileName_csv
    If sOpenFileName = "" Then Exit Sub

    'ファイルを読み込んでイミディエイトウィンドウに内容を表示する
    Dim sBuf  As String
    With CreateObject("ADODB.Stream")
       .Charset = "UTF-8" 'SJISの場合、"shift_jis"
       .Open
       .LoadFromFile sOpenFileName
        Do Until .EOS
           sBuf = .ReadText(-2) '1行づつバッファへ格納
           Debug.Print sBuf
        Loop
       .Close
    End With
    
End Sub

なお、上記関数をそのままコピペすると、UTF-8に対応した関数になります。
shift_jisに対応させる場合、

.Charset = "UTF-8"

の部分を、

.Charset = "shift_jis"

に書き換えてください。

その他、UTF-8、Shift-JIS以外の文字コードで読み取る場合は、
「レジストリエディタ」の「HKEY_CLASSES_ROOT\MIME\Database\Charset」から確認してください。
レジストリエディタは、
「Windowsマーク」キーと「R」キーを同時押し→ファイル名を指定して実行の画面が出たら、「regedit」と入力してエンターを押すと開くことができます。

レジストリエディタ

それでは、まずshift_jisのファイルを読み込んでみました。

ファイル名：SJIS.csv

No  郵便番号    住所    名前
1   859-5326    東京都春日井市向谷町１－６５    ヤマモトコーポレーション株式会社
2   987-2523    千葉県向田市山本町６５８－４４  華井　譲
3   789-0001    千葉県向田市山本町　ジンダ－ビル２F　２０１号   蓮田不動産株式会社
4   653-6567    大阪府大東市浅田８－９９９  株式会社ハッターフ
5   198-3463    鹿児島県薩摩川内市浜本１２３－７７  山本　茂

正確に読み取れてますね。

ファイル名：UTF-8.csv

No  郵便番号    住所    名前
1   859-5326    東京都春日井市向谷町１－６５    ヤマモトコーポレーション株式会社
2   987-2523    千葉県向田市山本町６５８－４４  華井　譲
3   789-0001    千葉県向田市山本町　ジンダ－ビル２F　２０１号   蓮田不動産株式会社
4   653-6567    大阪府大東市浅田８－９９９  株式会社ハッターフ
5   198-3463    鹿児島県薩摩川内市浜本１２３－７７  山本　茂

こちらも、正しく読み取ることができました♪

以上、今回の記事が参考になれば幸いです。
関連として、もしUTF-8について知りたい！という方はこちらの記事もご覧ください。

【ファイル】UTF-8のBOM付き、BOM無しの違い・確認・作成について
CSVファイルをExcelで確認すると文字化けすることはありませんか。それは文字コードがUTF-8のBOM無しで作成されているからかもしれません。本記事ではUTF-8のBOM付き、BOM無しの違い、確認方法、作成方法についてご紹介しています。
nyanblog2222.com
2022.07.15

投稿 【VBA】Shift-JIS・UTF-8等、各種文字コードのファイル読み込み【コピペで使えるサンプル付き】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/2291/feed/ 0