JavaScript アーカイブ - nyanblog ~にゃんぶろぐ~

【簡単】DockerでPHPとMySQLの環境構築【コンテナ仮想化】

nyan2222 — Sun, 26 Mar 2023 09:28:33 +0000

Dockerとは
Dockerをインストール
ファイル構成
ファイル作成
動作確認

Dockerとは

Dockerはコンテナ仮想化を使ったアプリケーションを開発・配置・実行するためのオープンプラットフォームです。

簡単に利点をいうと、
・環境構築ファイルを共有することで簡単に同じ環境を提供可能
・環境の流用や変更が簡単
・軽量で高速に起動、停止が可能

みみねこ

詳しいことが知りたい方は色々調べてみてください♪
（気が向けば別記事で書きます）

Dockerをインストール

Dockerをインストールします。
以下のリンクからダウンロードしてインストールを行ってください。

Dockerのダウンロードはこちらから

コマンドプロンプトやVSCodeのターミナルなどで
バージョン確認のコマンドを実行し、インストールされていることを確認できます。

■コマンド – バージョン確認
docker -v

■コマンド結果
このようにバージョンが出てきたらOKです。

> docker -v 
Docker version 20.10.13, build a224086

ファイル構成

今回は以下のファイル構成で環境構築しています。
慣れたら自分の好きなファイル構成にしていただいて構いません。

□：ディレクトリ名
・：ファイル名

□app
├□docker
││
│├□mysql
││├□data
││└・Dockerfile
││
│└□php
│  └・Dockerfile
│
├□html
│└・index.php
│
└・docker-compose.yml

※1 mysql\dataディレクトリの中身は空で作成してください。

ファイル作成

各ファイルの内容を載せています。

docker-compose.yml ファイル

version: '3'
services:
  php:
    build:
      context: ./docker/php
      dockerfile: Dockerfile
    volumes:
      - ./src:/var/www/html
    ports:
      - 8080:80
    depends_on:
      - db

  db:
    build:
      context: ./docker/mysql
      dockerfile: Dockerfile
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=pass
      - MYSQL_DATABASE=app
      - MYSQL_USER=user
      - MYSQL_PASSWORD=root

ぱっと見分かる箇所は説明抜いてます。

volumes:
　右側：ローカル上のディレクトリパス（docker-compose.ymlからの相対パス）
　左側：永続化したいサーバーフォルダ

build:
　context：build実行パス
　dockerfile：Dockerファイル名

depends_on:
　db：dbコンテナを先に起動

コンテナ[php]：Dockerfile

FROM php:8.0-apache

RUN apt-get update && apt-get install -y libonig-dev && \
    docker-php-ext-install pdo_mysql mysqli

コンテナ[mysql]：Dockerfile

FROM mysql:8.0.20

index.php ファイル




    
    環境構築

localhostに接続して表示する内容を記載しています。

動作確認

localhostに接続

■コマンド – コンテナ起動
（-d）はバックグラウンドで実行

docker compose up -d

■ローカル環境にアクセス
http://localhost:8080

「Hello World!」と画面に表示

http://localhost:8080に接続

■コンテナ名を変更したとき
変更前のコンテナが残っているので、一度削除しておく
※ 削除せずにコンテナ起動すると警告が出る

docker compose down --remove-orphans

コンテナ内に入ってphp実行確認

phpコンテナに入ってphpファイルを実行確認する場合

■phpコンテナに入る
docker compose exec php bash

■phpファイル実行
php index.php

ファイルを実行します。
[index.php]ファイルの中身を
[echo Hello World!]だけにした方が分かりやすいかもしれません。

■bash終了
exit

MySQL接続、SQL実行

■MySQLコンテナでMySQL接続
docker compose exec db mysql -u root -ppass

みみねこ

db[コンテナ名]
pass[MYSQL_ROOT_PASSWORD]
は[docker-compose.yml]で設定した値です。

> docker compose exec db mysql -u root -ppass
Welcome to the MySQL monitor.  Commands end with ; or \g.
・・・
mysql>

上記のように
mysql>とSQLが入力できる状態であればOKです。

SHOW DATABASES;
などSQL文を実行して試してみてください。

これで環境構築は完了です。

これから色々試してみる予定なので、
phpのiniファイルを追加したりcnfファイルを追加した
よかったら参考にしてみてください。

みみねこ

いやぁ…。色々はまりました。
はまった点を記載すべきなのですが、開発環境も異なるため解決方法も異なる可能性が高く一つ一つネットで調べるのが速いと思います。

投稿【簡単】DockerでPHPとMySQLの環境構築【コンテナ仮想化】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

Visual Studio Codeのインストールや日本語化設定

nyan2222 — Sat, 25 Mar 2023 15:12:41 +0000

本記事ではVisual Studio Codeの環境構築を行います。

Visual Studio Code（VSCode）とは
Visual Studio Codeのインストール
Visual Studio Codeに拡張機能をインストール

Visual Studio Code（VSCode）とは

Visual Studio CodeはMicrosoftが開発している
Windows、Linux、macOS、webで無料で提供されているソースコードエディタです。

調べるときに良くVSCodeとも出てきます。

最大の特徴は拡張機能が豊富にあり、
・英語・中国語・日本語表示
・各開発言語の開発効率を向上させる機能（ソースコード入力補助等）
様々あるため、現在最も多く利用されているエディタといわれています。

みみねこ

なにより多くの機能が無料で使える！
これに尽きます。

Visual Studio Codeのインストール

さっそくVisual Studio Codeをインストールしていきます。
まずはVisual Studio Codeのページから赤枠をクリックし、ファイルをダウンロードします。

ダウンロードしたファイル「VSCodeUserSetup-x64-[ver名].exe」をダブルクリックし
インストールを開始します。

セットアップ画面が開いたら
「同意する」にチェックをつけて、「次へ」をクリックします。

インストール先を指定します。
特に変更する必要がなければそのまま「次へ」をクリックします。

スタートメニューにショートカットを作成します。
特にこだわりがなければ、このまま「次へ」をクリックします。

ここでは、インストール時の追加要素を選択することができます。

今回は変更していませんが、おすすめは以下の3つです。

・エクスプローラーのファイル　コンテキストメニューに[Code で開く]アクションを追加する
・エクスプローラーのディレクトリ　コンテキストメニューに[Code で開く]アクションを追加する
・PATHへの追加

他のサイトでよくインストール作業の内容に関して、環境変数に設定する内容が記載されていますが、ここでPATHへの追加にチェックを入れておくと自分で作業する必要が無くなります。
そのため、チェックをつけた状態で「次へ」をクリックしましょう。

インストールの確認前画面です。
内容に問題なければ「インストール」をクリックしてください。

インストールが完了したら「完了」をクリックし、セットアップ画面を閉じてください。
これでVisual Studio Codeのインストールが完了です。

Visual Studio Codeに拡張機能をインストール

拡張機能でインストールする方法を紹介します。
まず使うであろう「日本語化」の拡張機能をインストールします。

Visual Studio Codeを開きます。

左側のアクティビティバーにある、赤枠「拡張機能」をクリックします。

「Marketplace」に「Japanese」と入力してください。

「Japanese Language Pack for Visual Studio Code」
のインストールを行ってください。

locale.jsonで日本語に設定します。
「Ctrl」+「Shift」+「P」でコマンドパレットを起動します。

「configure」と入力すると予測変換が出てくるので
「Configure Display Language」をクリックします。

「ja」(japanese)をクリックします。

再起動するか確認するメッセージボックスが出ますので、「Restart」をクリックしてください。

これで日本語化の完了です。

投稿 Visual Studio Codeのインストールや日本語化設定は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者】JavaScriptでTODOリスト作り方【サンプル】

nyan2222 — Thu, 09 Mar 2023 15:31:35 +0000

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

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

はじめに
実装内容（フロー）
HTML
CSS
JavaScript
1. コード
2. 解説
デモ

はじめに

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

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

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

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

実装内容（フロー）

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

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

みみねこ

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

HTML

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

タイトル（TODOリスト）
タスク名登録・タスク複数削除
タスク一覧（完了・削除ボタン）


  
    TODOリスト

「タスクを追加」ボタンにクリックイベント”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');
}

ページ読み込み後に

・タスク追加

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');

タスク名を入力するの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);

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

・チェックボックス
・タスク名
・完了ボタン
・削除ボタン
```
// ulにliを追加
todoList.appendChild(li);
```
作成した
を

【JS】jQueryでloadが効かない場合の対処法

nyan2222 — Mon, 02 Jan 2023 14:21:21 +0000

今更な内容にはなりますが…。

jQueryでは2から3にバージョンが上がった際、load関数が廃止されたためon関数を使用して対処するようになりました。

…が、それでも上手くできない…。となったときの備忘録です。
まずは、load関数からon関数に書き換える方法と、他、注意事項を載せています。

on関数に書き換え
注意事項

on関数に書き換え

イベント関連の処理clickイベント同様に、各関数（load、unload、error）での書き方は使用できなくなり、on関数での記述になりました。

■2.Xの書き方

$(window).load(function() {
  // ・・・処理
});

$(window).unload(function() {
  // ・・・処理
});

$(window).error(function() {
  // ・・・処理
});

■3.Xの書き方

$(window).on('load', function() {
  // ・・・処理
});

$(window).on('unload', function() {
  // ・・・処理
});

$(window).on('error', function() {
  // ・・・処理
});

注意事項

注意事項ですが、load処理を行う際に以下のように $(function () {}); で囲ってしまうとエラーが起こってしまうので注意してください。

$(function () {}); は $(document).ready(function() {}); と同じ処理で、ready処理はload処理とは実行するタイミングが異なるため、エラーになってしまいます。

■書き方

$(function () {
  // ・・・処理1
});

$(window).on('load', function() {
  // ・・・処理2
});

■エラー

$(function () {
  // ・・・処理1

  $(window).on('load', function() {
    // ・・・処理2
  });
});

★readとloadの違いの記事を書くかもしれません。

投稿【JS】jQueryでloadが効かない場合の対処法は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者】JavaScriptでストップウォッチの作り方

nyan2222 — Fri, 09 Sep 2022 06:31:39 +0000

今回はJavaScriptでストップウォッチを作成しました。
シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪

はじめに
実装内容（フロー）
HTML
CSS
JavaScript
1. コード
2. 解説
デモ

はじめに

まずはストップウォッチの機能を考えます。
今回は以下の機能を持たせて実装しました。

時間を計測する
ボタン：スタート、ストップ、リセット
※ 各ボタンを押すと各ボタンの有効・無効を判定
一度ストップしてから再度スタートすると継続して時間を計測
リセットを押すと”00:00.000″表示となりリセットされる

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

実装内容（フロー）

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

ボタンやタイマーの各要素を変数に設定
スタートボタン押下時：
1. 時間を計測して表示
2. スタートボタンを無効
3. ストップ、リセットボタンを有効
ストップボタン押下時：
1. 時間計測をストップし、停止時間を保持
2. 停止時間を保持
3. スタート、リセットボタンを有効
4. ストップボタンを無効
リセットボタン押下時：
1. 時間計測をストップし、時間計測に使用する変数や表示時間を初期化
2. スタートボタンを有効
3. ストップ、リセットボタンを無効

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

HTML

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

計測時間の表示
スタート・ストップ・リセットボタン

CSS

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

特に記載するところはありませんが、
強いて言えばボタンは有効時、hoverすると色変化、カーソル変化。無効時は色変化のスタイルを設定しています。

@charset "utf-8";

/*全体*/
.wrapper{
    font-family: arial, sans-serif;
	max-width: 600px;
	margin: 0 auto;
	color: #666;
	text-align: center;
}

/* 時間表示 */
#time{
    font-size: 60px;
    margin: 20px 0;
}

/*ボタン*/
button {
    padding: 20px 0;
    font-size: 30px;
    display: inline-block;
    padding: .8rem 1.6rem;
    border: none;
    color: #FFF;
    background-color: #B78D4A;
    border-radius: 15px;
}
button:hover {
    cursor: pointer;
    background-color: #D4BB92;
}
button:disabled {
    cursor: default;
    background-color: #D4BB92;
}

JavaScript

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

コード

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

var startButton;    // startボタン
var stopButton;     // stopボタン
var resetButton;    // resetボタン
var showTime;       // 表示時間

var timer;              // setinterval, clearTimeoutで使用
var startTime;          // 開始時間
var elapsedTime = 0;    // 経過時間
var holdTime = 0;       // 一時停止用に時間を保持

window.onload = function () {
    startButton = document.getElementById("start");
    stopButton = document.getElementById("stop");
    resetButton = document.getElementById("reset");
    showTime = document.getElementById("time");
}

// スタートボタン押下時
function start(){
    // 開始時間を現在の時刻に設定
    startTime = Date.now();

    // 時間計測
    measureTime();

    startButton.disabled = true;
    stopButton.disabled = false;
    resetButton.disabled = false;
}

// ストップボタン押下時
function stop(){
    // タイマー停止
    clearInterval(timer);

    // 停止時間を保持
    holdTime += Date.now() - startTime;

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = false;
}

// リセットボタン押下時
function reset(){
    // タイマー停止
    clearInterval(timer);

    // 変数、表示を初期化
    elapsedTime = 0;
    holdTime = 0;
    showTime.textContent = "00:00.000";

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = true;
}

// 時間を計測（再帰関数）
function measureTime() {
    // タイマーを設定
    timer = setTimeout(function () {
        // 経過時間を設定し、画面へ表示
        elapsedTime = Date.now() - startTime + holdTime;
        showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 23);
        
        // 関数を呼び出し、時間計測を継続する
        measureTime();
    }, 10);
}

解説

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

・グローバル変数の定義

var startButton;    // startボタン
var stopButton;     // stopボタン
var resetButton;    // resetボタン
var showTime;       // 表示時間

var timer;              // setinterval, clearTimeoutで使用
var startTime;          // 開始時間
var elapsedTime = 0;    // 経過時間
var holdTime = 0;       // 一時停止用に時間を保持

コメントでそれぞれ記載していますが、使用する変数を宣言します。

1～4行がボタン、計測時間の表示でこの後HTMLの要素を設定します。
5～9行が時間の計測に使用する変数です。

・ページ読み込み後、変数にHTML要素を設定

window.onload = function () {
  startButton = document.getElementById("start");
  stopButton = document.getElementById("stop");
  resetButton = document.getElementById("reset");
  showTime = document.getElementById("time");
}

ページ読み込み後、ボタンや計測時間の表示のidを指定して各変数にHTML要素を設定します。

・スタートボタン押下時に呼ばれる関数：start()

// スタートボタン押下時
function start(){
    // 開始時間を現在の時刻に設定
    startTime = Date.now();

    // 時間計測
    measureTime();

    startButton.disabled = true;
    stopButton.disabled = false;
    resetButton.disabled = false;
}

スタートボタン押下時に呼ばれる関数です。

startTime = Date.now();
時間計測に使用する[開始時間]を変数に設定します。

measureTime();
次に時間計測を行う関数を呼び出します。
時間計測に関しては関数の説明で詳しく説明します。

最後にスタートボタンを無効、ストップ、リセットボタンを有効にします。

・ストップボタン押下時に呼ばれる関数：stop()

// ストップボタン押下時
function stop(){
    // タイマー停止
    clearInterval(timer);

    // 停止時間を保持
    holdTime += Date.now() - startTime;

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = false;
}

ストップボタン押下時に呼ばれる関数です。

clearInterval(timer);
時間計測に使用しているタイマーを停止します。

holdTime += Date.now() – startTime;
一度ストップを押下して再度スタートボタンを押下した際、続きから時間を計測するため、停止時間を保持します。

最後にスタート、リセットボタンを有効、ストップボタンを無効にします。

・リセットボタン押下時に呼ばれる関数：reset()

// リセットボタン押下時
function reset(){
    // タイマー停止
    clearInterval(timer);

    // 変数、表示を初期化
    elapsedTime = 0;
    holdTime = 0;
    showTime.textContent = "00:00.000";

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = true;
}

ストップボタン押下時に呼ばれる関数です。

clearInterval(timer);
時間計測に使用しているタイマーを停止します。

elapsedTime = 0;
holdTime = 0;
showTime.textContent = “00:00.000”;
時間計測に使用する変数や表示時間を初期化します。

最後にスタートボタンを有効、ストップ、リセットボタンを無効にします。

・時間を計測する関数（再帰関数）：measureTime()

// 時間を計測（再帰関数）
function measureTime() {
    // タイマーを設定
    timer = setTimeout(function () {
        // 経過時間を設定し、画面へ表示
        elapsedTime = Date.now() - startTime + holdTime;
        showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 23);
        
        // 関数を呼び出し、時間計測を継続する
        measureTime();
    }, 10);
}

時間を計測する関数です。

4～11行目まででタイマーを設定します。

elapsedTime = Date.now() – startTime + holdTime;
計測時間を計算します。
[現在の時刻] – [開始時間] + [保持している時間]で導き出されます。
startTimeはスタートボタン押下時、holdTimeはストップボタンを押下時に設定しています。

showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 23);
計算した計測時間を表示します。

toISOString()：ISO形式の文字列で常にYYYY-MM-DDTHH:mm:ss.sssZ形式を返します。

slice(14, 23)：先頭を0として14～23文字目までを取得しているので、
[YYYY-MM-DDTHH:mm:ss.sssZ]の赤線（赤文字）がshowTime.textContentに渡されます。

measureTime();
処理中に自身を呼び出します。
これでストップボタンが押されるまで時間計測が行われます。

デモ

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

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

投稿【初心者】JavaScriptでストップウォッチの作り方は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者】JavaScriptでおみくじの作り方【サンプル】

nyan2222 — Tue, 06 Sep 2022 14:43:10 +0000

今回はJavaScriptでおみくじを作成しました。
三段階で作成してみましたので、初心者の方が勉強するのにおすすめですよ♪

段階としては三段階で作成していきます。

ボタンを押しておみくじを表示する
おみくじの結果の確率を設定する
ボタンを押しておみくじルーレットを表示する
おみくじは画像で表示する

ボタンを押しておみくじを表示
1. ソースコード
2. 解説
おみくじの結果の確率を設定
1. ソースコード
2. 解説
ボタンを押しておみくじルーレットを表示
1. ソースコード
  1. HTML
  2. JavaScript
2. 解説

ボタンを押しておみくじを表示

まずは一番簡単なコードで作成していきます。

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

ソースコード

こちらがソースコードです。




  
    おみくじ
ボタンをクリックしてください。

解説

HTML

17～19行目　ボタン：押すことでおみくじが引く
20行目　pタグ：おみくじの結果を表示

JavaScript

5行目　おみくじの結果をリストに設定
7～10行目　ボタンのクリックイベント
8行目　random関数を利用して0～リストの数までのランダムの数を作成
　　　 floor関数で小数を切り捨てて整数にする
9行目　8行目で作成した数字を使っておみくじ結果リストにアクセスし、id=”result”に設定

おみくじの結果の確率を設定

続いて、おみくじの結果の確率を設定して出やすさを変えていきます。

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

ソースコード

こちらがソースコードです。




  
    おみくじ
ボタンをクリックしてください。

解説

HTMLは変更なしのため、解説は割愛します。

JavaScript

3～11行目　おみくじの結果を連想配列に設定
　　　 valueを数字にして確率を設定（数字が大きい方が出やすい）
　　　 ※ 全ての項目のvalueの和が100になるように
13～23行目　ボタンのクリックイベント
14行目　random関数を利用して0～100の数までのランダムの数を作成
　　　　 floor関数で小数を切り捨てて整数にする
15～21行目　14行目でランダムに設定した値を使い、for文で連想配列を回しながら14行目で取得した値の結果をid=”result”に設定

ボタンを押しておみくじルーレットを表示

最後にボタンを「START」「STOP」に変更しておみくじルーレットを作成します。
また、おみくじの結果は画像にしました。

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

表示画面

ソースコード

こちらがソースコードです。

HTML


  
    おみくじ
ボタンをクリックしてください。

JavaScript

window.onload = function () {

  const list = {
    "daikichi":10,
    "kichi":15,
    "chuukichi":20,
    "syoukichi":25,
    "suekichi":15,
    "kyou":10,
    "daikyou":5,
  };

  var timer;
  // START・STOPボタンクリックのイベント
  document.getElementById("button").onclick = function () {
    // START
    if (this.textContent == "START") {
      // ボタンのテキストを"STOP"に変更
      this.textContent = "STOP";

      // ルーレットタイマーを設定
      timer = setInterval(function () {
        var random = Math.floor(Math.random() * Object.keys(list).length);
        document.getElementById("img").src = "img/" + Object.keys(list)[random] + ".png";
      }, 10);
    // STOP
    } else {
      // ボタンのテキストを"START"に変更
      this.textContent = "START";

      var rate = 0;
      var random = Math.floor(Math.random() * 100);
      for(var data in list){
        rate += list[data];
        if(random <= rate){
          document.getElementById("img").src = "img/" + data + ".png";

          // ルーレットタイマーを停止
          clearInterval(timer);
          return;
        }
      }
    }
  };
};

解説

HTML

4～6行目　ボタン：押すことでおみくじが引く
7～9行目　pタグ：おみくじの結果を表示

JavaScript

3～11行目　おみくじの結果を連想配列に設定
15～行目　ボタンのクリックイベント
16～24行目　START表示時にクリックしたときの処理
・19行目　ボタン表示を[STOP]に変更
・22～25行目　タイマーを設定（ルーレットを作ります）
・23行目　randomにランダムに値を設定（0～連想配列の数）
・24行目　23行目の値を使って画像を設定
26～43行目　STOP表示時にクリックしたときの処理
・29行目　ボタン表示を[START]に変更
・31～42行目　[おみくじの結果の確率を設定]のおみくじの設定を流用
・39行目　タイマー解除

みみねこ

上記で簡単に解説していますが、

START表示の処理は[ボタンを押しておみくじを表示]、

STOP表示の処理は[おみくじの結果の確率を設定]の実装を流用しています！

投稿【初心者】JavaScriptでおみくじの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

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

nyan2222 — Thu, 01 Sep 2022 12:18:37 +0000

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

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

文法
JavaScript サンプル
Vue.js サンプル
Canvas
JSON
アニメーションサンプル
IE対応

文法

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

JavaScript サンプル

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

Vue.js サンプル

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

Canvas

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

JSON

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

アニメーションサンプル

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

IE対応

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

【object-fit-images】object-fit,object-positionのIE対応

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

【サンプル】JavaScriptのオブジェクトからJSONデータに変換【JSON.stringify()】

nyan2222 — Wed, 31 Aug 2022 12:35:10 +0000

JavaScriptのオブジェクトからJSON文字列のデータに変換するには、JSON.stringify()関数を使用します。

本記事では基本的な使い方から、第2引数・第3引数の使用方法も含めてご紹介していきます！

この記事のポイント

・JSON.stringify()を使用してJavaScript→JSONデータのオブジェクトに変換
・第2・3引数は任意だが、指定することでさまざまな設定が可能

構文
使い方

構文

JSON.stringify(value[, replacer[, space]])

第1引数：JSONの文字列データに変換するオブジェクト
第2引数：関数か配列を指定してJSONの置き換えを行う
第3引数：可読性を上げるため、JSONデータの項目の前にスペース等を設定可

使い方

JSONの文字列データに変換

まずは第1引数だけ指定して、JavaScriptのオブジェクトをJSONデータに変換します。
オブジェクトでなくとも、値だけ引数を渡してもJSONデータに変換可能です。

// '{"a":10,"b":20,"c":30}'
console.log(JSON.stringify({a:10, b:20, c:30}));

// 1項目目と2項目目は異なる型
// '[true,"true"]'
console.log(JSON.stringify([new Boolean(true), new String('true')]));

// 値だけ
// "5"
console.log(JSON.stringify(5));

実行結果

以下のようにそれぞれJSONの文字列データとして出力されます。

'{"a":10,"b":20,"c":30}'
'[true,"true"]'
"5"

関数、または配列を指定して置き換え処理を実行

第2引数は関数か配列を指定できます。

・keyとvalueの引数を持つ関数を指定することで値を置き換えしたり、除外することができます。

・配列を指定すると、配列に指定されたkeyのみ含めたJSON文字列のみ値を返します。

function replacer(key, value){
  if(typeof value ==="string"){
      return undefined;
  }
  if(key === "c"){
      return value * 2;
  }
  return value;
}

// '{"a":10,"c":60}'
console.log(JSON.stringify({a:10, b:"test", c:30}, replacer));

// '{"b":"test","c":30}'
console.log(JSON.stringify({a:10, b:"test", c:30}, ["b", "c"]));

実行結果

1行目では「key:b」が除外され、「key:c」のvalueが2倍になっています。
2行目では「key:a」が除外されていることが分かりますね！

'{"a":10,"c":30}'
'{"b":"test","c":30}'

関数、または配列を指定して置き換え処理を実行

第3引数を指定することでJSONデータを成形する際のスペースや文字を入れることができます。
※ 指定することで強制的に改行が入るので改行コードは不要になります。

ただし、このスペースや文字列は10文字までしか設定できないため、文字列を10文字以上設定した場合は先頭から10文字分設定されます。

console.log(JSON.stringify({a:10, b:20, c:30},undefined,5));

// 11で設定しているが、スペースは10個までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,11));

console.log(JSON.stringify({a:10, b:20, c:30},undefined,"\t"));

// 11文字設定しているが、10文字までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,"12345678901"));

実行結果

'{
     "a": 10,
     "b": 20,
     "c": 30
}'
'{
          "a": 10,
          "b": 20,
          "c": 30
}'
'{
	"a": 10,
	"b": 20,
	"c": 30
}'
'{
1234567890"a": 10,
1234567890"b": 20,
1234567890"c": 30
}'

投稿【サンプル】JavaScriptのオブジェクトからJSONデータに変換【JSON.stringify()】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【サンプル】JSONデータをJavaScriptのオブジェクトに変換【JSON.parse()】

nyan2222 — Sat, 27 Aug 2022 13:34:41 +0000

JSON文字列のデータからJavaScriptのオブジェクトに変換するには、JSON.parse()関数を使用します。

本記事では基本的な使い方から、第二引数の使用方法も含めてご紹介していきます！

この記事のポイント

・JSON.parse()を使用してJSONデータ→JavaScriptのオブジェクトに変換
・第2引数は任意だが、オブジェクトを返す前に実行する処理を設定が可能

構文
使い方
1. JSONデータをJavaScriptのオブジェクトに変換
2. JSONデータからオブジェクトを返す前に処理を実行

構文

JSON.parse(text[, reviver])

第1引数：JSONデータ形式の文字列
第2引数：値を返す前に実行する関数（コールバック関数）

第2引数に関数を指定することで、事前にJSONデータに処理を行った状態でオブジェクトにすることができます。

使い方

JSONデータは文字列（string）型なので、JavaScriptで扱いやすいようにJSON.parse()関数でObjectに変換してから使用します。

JSONデータをJavaScriptのオブジェクトに変換

まずは第1引数だけ指定してJavaScriptのオブジェクトに変換します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data);

// {a:10, b:20, c:30}
console.log(obj); 

// 20
console.log(obj.b);

実行結果

1行目はオブジェクト形式のデータが表示されます。

{a:10, b:20, c:30}
20

JSONデータからオブジェクトを返す前に処理を実行

次に第2引数を指定します。
keyとvalueの引数を持つ関数を設定し、関数の戻り値が新しくvalueに設定されます。

ここでの例ではkey=”a”, “b”, “c”、valueは10, 20, 30になり、
keyが”b”の場合のみ、valueを2倍にして返す関数を設定します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data, function(key, value){
  if(key==="b"){
      return value * 2;
  }
  return value;
});

console.log(obj);

実行結果でオブジェクトのbに40が設定されていることが確認できます。

{a:10, b:40, c:30}

投稿【サンプル】JSONデータをJavaScriptのオブジェクトに変換【JSON.parse()】は 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 — Fri, 13 Aug 2021 05:01:54 +0000

こんにちは。今回はJavaScriptでカウントダウンタイマーを作成してみました！

オリンピックやワールドカップ、クリスマスやお正月など季節の行事事のタイマーとしても使えます！

今回はシンプルなスタイルで作成していますが、CSSで派手なスタイルにしても面白いと思います♪

カウントを取る動きとして似ているアナログ時計を作った記事も
良かったら見ていただけると嬉しいです！

【JavaScript】アナログ時計の作り方【サンプル】

先日はJavaScriptでカウントダウンタイマーを作成してみました。今回は前回の記事の内容を利用してアナログ時計を作ってみようともいます。サンプルもありますのでコピペで簡単にできます！初心者の方や勉強されている方におすすめなので、良かったら試してみてください♪

HTML
JavaScript
デモ
まとめ

HTML

今回のHTMLはとてもシンプルです。

現在時刻とカウントダウンタイマーのp要素をそれぞれ作成しています。

JavaScript

時間の表示については、JavaScriptを使用しています。

主に現在時刻の出力とカウントダウンの出力とそれぞれ実装しています。

// 曜日の配列を取得
var week_day = ["日", "月", "火", "水", "木", "金", "土"];

window.onload = function () {

    var id = setInterval(function(){
        // 現在日時を出力
        var now_date = new Date();
        var now_date_str = "今日の日付は" + get_nichiji(now_date) + "（" + week_day[now_date.getDay()] + "）です。" + "
" +
            "時刻は" + get_jikoku(now_date) + "です。";
        
        document.getElementById("now").innerHTML = now_date_str;
        
        // 年末までのカウントダウン
        var nen_matsu = new Date(now_date.getFullYear() + 1 + "/1/01");
        var count_down = nen_matsu.getTime() - now_date.getTime();
        
        // 日にちから計算していく
        var day = Math.floor(count_down / (1000 * 60 * 60 * 24));
        count_down -=  (day *(1000 * 60 * 60 * 24));
        var hour = Math.floor(count_down / (1000 * 60 * 60));
        count_down -= (hour *(1000 * 60 * 60));
        var minutes =  Math.floor(count_down / (1000 * 60));
        count_down -= (minutes * (1000 * 60));
        var second = Math.floor(count_down / 1000);
        
        var count_down_str = get_nichiji(nen_matsu) + "まで、あと" +
            day + "日" + hour + "時" + minutes + "分" + second + "秒" + "です。";
        document.getElementById("count_down").innerHTML = count_down_str;
    }, 1000);
};

// 月を正しい表示で出力
function get_month(date_obj) {
    return date_obj.getMonth() + 1;
}

// 〇〇年〇〇月〇〇日表示
function get_nichiji(date_obj) {
    return date_obj.getFullYear() + "年" + get_month(date_obj) + "月" + date_obj.getDate() + "日";
}

// 〇〇時〇〇分〇〇秒表示
function get_jikoku(date_obj) {
    return date_obj.getHours() + "時" + date_obj.getMinutes() + "分" + date_obj.getSeconds() + "秒";
}

// 曜日取得
function get_week_day(date_obj) {
    return week_day[date_obj.getDay()];
}

デモ

出力内容はこちらです！
1秒ごとに現在時刻と翌年の1月1日までのカウントダウンの秒数が表示されています。

↓の赤枠に何も表示されていない場合、数秒そのままでお待ちください。

まとめ

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

今回はJavaScriptでカウントダウンタイマーを作成しました！
日付の表示方法やカウントするためのタイマー処理を主に使用しました。

今回は機能を主にご紹介しましたが、CSSでスタイルを設定して
おしゃれなカウントダウンタイマーを作ってみてはいかがでしょうか。

アナログ時計を作った記事も良かったら見てください！

【JavaScript】アナログ時計の作り方【サンプル】

投稿【JavaScript】カウントダウンタイマーの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript】変数、型の違い【var let const】

nyan2222 — Wed, 11 Aug 2021 21:21:06 +0000

こんにちは。

変数の宣言でvar、let、constそれぞれどの状況で使用していますか？

私は特にvarとletについて違いが良く分からなかったので、この機会に調べてまとめてみました。

良かったら参考にしてください！

ローカルスコープとグローバルスコープ
変数宣言キーワード
まとめ

ローカルスコープとグローバルスコープ

まずは、ローカルスコープとグローバルスコープについてです。

スコープとは、変数が参照したり変更できたりと使用できる有効範囲を指します。

ローカルスコープはある特定の範囲内でのみ有効となるスコープです。
特定の範囲とは、これから出てくる関数やブロックなど括られた範囲を指します。

グローバルスコープは名の通りどこからでも使用できる有効範囲を持つスコープです。

どこでも使用することが可能なので、とても便利であるように感じますが
意図しない箇所で上書きしてしまったり、利用してしまったりすることで
不具合の原因となってしまいます。

そのため、できる限り変数のスコープは小さくすることが
読みやすいコードにつながると言われています。

本記事では特にvarとletに関してスコープを意識して使い分けていくことをおすすめしています！

変数宣言キーワード

varについて

特徴: ・ES2015以前より使用できる変数宣言キーワード
・スコープは関数内部
・関数内のどこで宣言しても、先頭で定義した扱いとなる
・ ifやfor文内で宣言した変数でも、同じ関数内であれば使用できる

// 例
function Sample() {
    for(let i=1;i<=3;i++){
        console.log(i)
    }
    
    // ブロック外なので、アクセスできずエラー
    console.log(i)
}

letについて

varとの主な違いはスコープの範囲です。

varではif文やfor文のようにブロック内で宣言した変数でも、
同じ関数内であれば使用することができますが、
letではブロック内で宣言した変数はブロックの範囲を超えると使用することができません。

特徴: ・ES2016以降より使用可能（IE9等、少し古いバージョンのブラウザだと動かない場合がある）
・スコープは関数内部、もしくはブロック内部
・varと比べて、よりスコープを限定することができる

// 例
function Sample() {
    var sample1 = 1;
    // var i;

    // 再代入可能
    sample1 = 3;

    for(var i=1;i<=3;i++){
        console.log(i)
    }
    
    // 同じ関数内なので、アクセスできる
    console.log(i)
    
    console.log(gloval_hensu)
}

// 関数外なので参照できず、エラー
console.log(i)

constについて

constはこの3つの中だと、一番特徴が分かりやすいです。
それは再代入（変更）できないため定数として扱われます。

特徴: ・ES2016以降より使用可能（IE9等、少し古いバージョンのブラウザだと動かない場合がある）
・スコープは関数内部、もしくはブロック内部再代入ができない（定数扱いとなる）
・宣言のみはできず必ず値を代入する必要がある。

定数とは、一度宣言されると値が固定され変更できない値を指します。

// 例
// 宣言時に値を代入していないので、エラー
const sample1;

const sample2 = "test2";
const sample3 = "test3";

// 代入できないので、エラー
sample3 = "sample3";

if(sample2 === "test2"){
    const sample4 = "test4";
}

// sample4はブロック内で宣言されているため、
// ブロックの外で使用し、スコープからはみ出ているのでエラー
console.log(sample4);

まとめ

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

ちょっとしたことなのですが、
忘れやすかったりするので良かったら時々見に来てください♪

ちなみに、JavaScriptは変数宣言キーワード（var, let, const）を使用しなくても宣言することができます。

キーワードを使用することで有効範囲が変わってくるので、
予期せぬ動きをさせないためにも、使用した方が良いですね！

投稿【JavaScript】変数、型の違い【var let const】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript／JS】Canvasとは？【HTML5／使い方】

nyan2222 — Wed, 11 Aug 2021 21:19:50 +0000

皆さんCanvasを使用したことはありますか？
今回はCanvasを使って、2Dの簡単な図形を描画する方法を紹介していきます。

Canvasとは？
HTMLの設定
描画コンテキストの取得
四角形を描画
線（パス）を描画
1. 関数
2. 実装
円（円弧）の描画
1. 関数
2. 実装
まとめ

Canvasとは？

Canvasとは、HTML5から追加された2Dの図形を描画するための技術です。
使い方としては、HTMLで要素を作成・IDを指定し、JavaScriptで描画する内容を実装します。
例として、グラフを描く、写真を合成する、シンプルなアニメーションを表現することができます。

HTMLの設定

HTMLでcanvasを設定します。
JavaScriptで指定するためにid=”canvas”を指定しています。
属性で幅(width)、高さ(height)を設定していますが、JavaScriptでも設定が可能です。

また、canvasブロック内で”代替コンテンツ”と設定していますが、
これはcanvasに対応しないブラウザやJavaScriptを無効にしている場合、代替コンテンツを出力しています。
代替コンテンツには、テキストや画像など設定することができます。

描画コンテキストの取得

HTMLでCanvasを設定しましたが、そのままでは何も描画されません。
getContext関数で、コンテキストを取得することができます。

// HTMLの読込完了後に実行
window.onload = function () {
    // id='canvas'の要素を取得
    var canvas = document.getElementById('canvas');

    // 2次元の描画コンテキストを取得
    var ctx = canvas.getContext('2d');
}

getContext関数の第1引数にコンテキストの種類を指定することができます。
今回は2次元の描画コンテキスト（CanvasRenderingContext2D）を取得しています。
他の設定値は以下の通りです。

webgl
3次元グラフィックス描画（WebGL ver1）コンテキスト
（WebGLRenderingContext）を取得します。
webgl2
3次元グラフィックス描画（WebGL ver2）コンテキスト　　　　　　（WebGL2RenderingContext）を取得します。

WebGL・・・Web用のOpenGL（グラフィック専用のライブラリ）

これで描画する準備ができました。
次項目から実際に図形を描画してみましょう。

四角形を描画

まずは四角形を描画してみましょう。
こちらのプロパティと関数を使って描画することができます。

プロパティ

fillStyle・・・塗りつぶしのスタイルを設定（色・グラデーション・パターン値）
strokeStyle・・・境界線のスタイルを設定（色・グラデーション・パターン値）
lineWidth・・・境界線の幅を設定

関数

fillRect(x, y, width, height)・・・塗りつぶし状態の四角形を描画
strokeRect(x, y, width, height)・・・四角形の境界線を描画
clearRect(x, y, width, height)・・・指定範囲の四角形を消去し、透明になる

実装

それでは実際に描画してみましょう。
こちらがソースコードです。詳しい内容はコメントを記載しています。

こちらが実際に描画したcanvasです。

線（パス）を描画

四角形の他には、パスを組み合わせて描画することで図形を表現することができます。
パスを用いた図形の描画では、次の関数を使用します。

関数

beginPath()・・・新規パスを作成。以降の描画呼び出しはパスを構築します。
closePath()・・・開始パスに直線を描画し、パスを閉じる
stroke()・・・境界線を描画
fill()・・・塗りつぶして描画
moveTo(x, y)・・・指定座標に移動
lineTo(x, y)・・・現在地から指定座標まで線を描画

実装

実際に描画してみましょう。
詳細はコメントにそれぞれ記載していますので、実装しながらだと理解しやすいかもしれません。

こちらが実際に描画したcanvasです。

このようにして、パス使って図形を描画することができました。

注意点ですが、beginPath()の呼び出し直後は、どの関数が呼び出されてもmoveTo()として扱われ実行されます。
例えると紙に書く時、鉛筆を紙に添えている動作をイメージしたものです。
そのため、基本的には、beginPath()の後や、canvasを新規で作成した後はmoveTo()を意識的に呼び出すようにしてください。

円（円弧）の描画

続いて、円（円弧）の描画についてです。
まずは関数の説明です。

関数

arc(x, y, radius, startAngle, endAngle[, anticlocwise])・・・円弧を描画
x,y=中心地、radius=半径、startAngle=開始角度、endAngle=終了角度、anticlocwise=周る方向（初期設定：時計回り）

実装

続いて、ソースコードの内容です。
詳細はコメントに記載しています。

こちらが実際に描画したcanvasです。

まとめ

今回はHTML5とJavaScriptを使用して、Canvasで2Dの描画をしてみました。
ぜひ試してみてくださいね！

今回の記事が何かの参考になれば幸いです♪　

投稿【JavaScript／JS】Canvasとは？【HTML5／使い方】は 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 ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript/JS】Promiseの使い方(then/resolve/reject)
nyan2222 — Sat, 18 Jul 2020 09:00:00 +0000

こんにちは。今回は非同期処理で使うPromiseについて、使い方を紹介していきます。



Promiseは同期、非同期処理の考え方が分からないとチンプンカンプンになってしまうので、よく分からない方は先にこちらの記事をご覧ください。





【JavaScript】非同期処理と処理の順番について【初心者・入門】
JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後遅延処理について説明していきます。同期処理はプログラムの記述順に1つずつ実行されます。そのため、次の処理は前の処理が終わらないと実行するこ...
nyanblog2222.com
2020.06.02




Promiseは非同期処理が完了した後に結果を返しています。
それでは、基本的な記述方法から始めていきましょう。




  目次
    
    基本的な「Promise」の書き方
「then」を使ってコールバック処理を実行する方法
    
  

基本的な「Promise」の書き方



まずは、Promiseオブジェクトを生成することです。
newでPromiseのオブジェクトを、objに設定します。



var obj = new Promise(function(resolve, reject) {
    resolve("成功");
});



また、Promiseの引数の関数では、二つの関数を引数として取ることができ、それぞれ以下の状態での処理を実施することができます。



・resolve：処理成功時の処理
・reject：処理失敗時の処理



「then」を使ってコールバック処理を実行する方法



続いて、Promiseでthenを使用してコールバック処理を実行してみましょう。



var promise_obj = new Promise(function(resolve, reject) {
    resolve();
});

promise_obj.then(function(success, failure) {
    console.log("こっちが後に出力されるよ");
});

console.log("こっちが先に出力されるよ");



then関数はPromiseが返され、処理が成功もしくは失敗した場合にコールバック関数を取ります。



また、Promise.then()は非同期処理のため、6行目の方が先に処理として登録されますが、8行目の方が先に実行されます。
このように、非同期処理では時間がかかる処理が終わる前に後の処理が完了することがあります。



いかがでしたでしょうか。
今回はPromiseを使って基本的な非同期処理の制御方法について、ご紹介していきました。
他にもさまざまな関数が使用できるので、良かったら試してみてください。




投稿 【JavaScript/JS】Promiseの使い方(then/resolve/reject) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JavaScript】Vue.jsの基本（1）【入門】
nyan2222 — Tue, 07 Jul 2020 09:00:00 +0000

こんにちは。今回はVue.jsの基本的な使い方をご紹介します。
実践には及びませんが、初心者の方にはおススメの記事になります。




  目次
    
    Vue.jsとは
Vueインスタンスを作成new Vueでインスタンスを作成
オプションel : element
data
methods
computed
watch
データ表示：マスタッシュ構文
ひとこと
    
  

Vue.jsとは



JavaScriptのフレームワークの1つでUI（ユーザインタフェース）を構築するフロントエンドアプリケーションの開発で使用されています。
また、SPA（Single Page Application）開発に使われることが多いフレームワークになります。



SPAとは単一ページでコンテンツを切り替えるWebアプリケーションを指していますが、以前はFlashが多くの方で使用されていました。
ご存じの方も多いと思いますが、Flashは2020年末にサポートが終了することもあり、Vueを使用するようになった開発者も多いと思います。



Vueインスタンスを作成



new Vueでインスタンスを作成



まずは、Vueオブジェクトのインスタンスを作成します。
コンストラクタで引数にオプションを設定することができます。



オプション



el : element



idやclassを指定して、どのHTMLとVueインスタンスを紐づけるか、指定できます。







new Vue({
  el : "#sample"
})



data



Vueで使用するデータを定義することができます。




  こんにちは、{{ name }}さん




new Vue({
  el: "#sample",
  data: {
    name: "山田　花子"
  }
})



// 処理結果
こんにちは、山田　花子さん



methods



Vueで使用する関数を定義できます。




   {{count}}回
  




new Vue({
  el: "#app",
  data: {
    count:0
  },
  methods: {
    count_up: function() {
      this.count++;
    }
  }
})



実行画面でボタンをクリックするたびに「1回…2回…」とカウントが上がっていきます。



computed



dataオプションの値を使用して、関数で別の計算をする。
計算結果がキャッシュに格納されるため、処理が高速なのが特徴。



watch



dataオプションの特定の値を監視して、変更時に関数を実行する。



データ表示：マスタッシュ構文



先ほどのdataオプションの項目にもありましたが、Vueでデータを表示するのにマスタッシュを使用することで表示することができます。



例：
こんにちは、{{ name }}さん




マスタッシュとは、口ひげの意味があり、「{」を横にすると口ひげに見えることからこの名が付いています。



ひとこと



いかがでしたでしょうか。
Vueは最近JavaScriptで特に注目を集めているフレームワークの一つです。



良かったら次回の記事もご覧ください。
投稿 【JavaScript】Vue.jsの基本（1）【入門】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JavaScript】スクロール中にヘッダーを固定する方法【簡単・コピペOK】
nyan2222 — Sat, 04 Jul 2020 09:00:00 +0000

こんにちは。ホームページを閲覧している中で、始めはヘッダーが固定されていなかったのに、途中から常に規定の位置で固定されているページをお見掛けしたことはありませんか？



今回はスクロール中にヘッダーナビゲーションを固定させる方法をご紹介していきたいと思います。



また、本記事のコードではJQueryを使用しています。




  目次
    
    HTML
CSS
JavaScript
デモページ
ひとこと
    
  

HTML



HTMLでは、トップ画像とナビゲーション、サイトの長さを出すためにsection・footer要素を置いています。





    
        
            News
            About
            Blog
            Contact
        
    


    
        News
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    


    
        About
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    


    
        Blog
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    


    
        Contact
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    


    © 2020 nyanblog




CSS



CSSで見た目を整えていきます。
また、JavaScriptでつけ外しをする「nav.fixed」でヘッダーを固定しています。



@charset "utf-8";

*{
    margin: 0;
}

#top_visual {
    background: url(../img/visual.jpg) center center / cover no-repeat;
    height: 480px;
}

nav {
    background: #fff;
    width: 100%;
}

nav.fix {
    position: fixed;
    right: 0;
    top: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 100%;
}

nav ul {
    justify-content: flex-end;
    display: flex;
    list-style: none;

}

.item {
    margin: 0 2em;
    padding: 17px 0;
}

.item a {
    color: #B78D4A;
    text-decoration: none;
}

.item a:hover{
    color: #D5BC94;
}

h1 {
    font-size: 1.25rem;
    padding: 2rem 0;
    color: #B78D4A;
    font-weight: normal;
}

p {
    line-height: 2;
    padding-bottom: 4rem;
    color: #555A60;
}

section{
    background-color: #F0F0F0;
    padding: 2em;

}

section .wrapper{
    max-width: 800px;
}

footer {
    background-color: #B78D4A;
    padding: 2em;
}

footer p {
    font-size: .8em;
    color: #fff;
    max-width: 800px;
    padding: 0;
}



JavaScript



JavaScriptでスクロールイベントするたびに、スクロールの位置とnav要素の位置と比較しています。
スクロールの位置を超えると、nav要素に「fix」クラスを付与し、上部に固定させます。



$(function() {
    var pos = $("nav").offset().top;
    var height = $("nav").outerHeight();
    $(window).scroll(function () {
        if ($(this).scrollTop() > pos) {
            $("nav").addClass("fix");
            $("body").css("padding-top", height);
        } else {
            $("nav").removeClass("fix");
            $("body").css("padding-top", 0);
        }
    });
});



デモページ



デモページはこちらです。
実際にスクロールで動かしてヘッダーが固定されることを確認してみてください。



ひとこと



いかがでしたでしょうか。
今回はスクロールイベントを利用して、ヘッダーナビゲーションを固定させる方法をご紹介しました。



簡単にコピペで実装することができますので、良かったら試してみてください。
本記事をご覧くださり、ありがとうございました！
投稿 【JavaScript】スクロール中にヘッダーを固定する方法【簡単・コピペOK】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JQuery】遅延実行でイベントを発生させる方法
nyan2222 — Thu, 02 Jul 2020 09:00:00 +0000

こんにちは。今回は一定時間後に処理を実行することができる、遅延実行についてご紹介します。




  目次
    
    setTimeout・clearTimeout関数
setInterval・clearInterval関数
setTimeoutとsetIntervalの違い
まとめ
    
  

setTimeout・clearTimeout関数



setTimeout関数は一定時間後に処理を実行する時に使用する関数です。
JavaScriptでは、基本的に同期（上から順番に）処理していきますが、明示的に時間をずらして実行したい場合、この関数を利用します。



こちらの例を見てみましょう。
このスクリプトを実行すると、1秒後にコンソール画面に「実行するよ」と表示されます。



setTimeout(function () {
    console.log("実行するよ");
}, 1000);



また、このようにすると繰り返し処理を実行することもできます。



var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);
}
countUp();



繰り返しsetTimeout関数を使用すると、無限処理になってしまうので、それを止めるためにclearTimeout関数を使用します。



clearTimeout関数は、setTimeout関数で宣言した処理を解除するための関数です。



var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);

    if (cnt > 4) {
        clearTimeout(timeout);
    }
}
countUp();



このようにclearTimeout関数を使用することで、指定の条件で繰り返し処理を終了することができます。



setInterval・clearInterval関数



先ほど、setTimeout関数で繰り返しの遅延実行を行いましたが似たような関数でsetInterval関数があります。



setInterval関数は、一定時間ごとに処理を実行することができます。



一方、clearInterval関数はsetInterval関数で宣言した処理を解除する関数です。
こちらが使用例になります。
カウントが5になるまで実行し、超えると処理を止めるようにしています。



var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
}
var interval = setInterval(function () {
    countUp();
    if (cnt > 4) {
        clearInterval(interval);
    }
}, 1000);



setTimeoutとsetIntervalの違い



ぱっと見では、setTimeout関数とsetInterval関数の違いはなさそうですが、時間間隔に少し違いがあります。



・setTimeout関数：処理終了時点から次に実行するタイミングを指定



・setInterval関数：処理開始時点から何秒間隔で実行するかを指定



そのため、setInterval関数では、間隔の秒数を超過した処理が行われた場合、時間の感覚がずれる可能性があります。
用途に応じて、関数を使い分けるのがおすすめです。



まとめ



setTmeout関数では、一定時間後に処理。
setInterval関数では、一定時間毎に処理。



両者の違いは間隔時間の開始時点が異なることをご紹介していきました。
遅延関数を使用したい場合、よく使う関数になると思いますので、参考にしてみてください。



良かったら次回の記事も見てみてくださいね！
それでは、本記事をご覧くださり、ありがとうございました。
投稿 【JQuery】遅延実行でイベントを発生させる方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)
nyan2222 — Tue, 30 Jun 2020 09:00:00 +0000

こんにちは。前回はJSONデータの基本操作方法を紹介しました。
詳しくは、こちらからご覧ください。





【JSON入門】JSONデータの参照・追加（更新）・削除
こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...
nyanblog2222.com
2020.06.28




今回はJQueryを使用したJSONファイルの読み込み方になります。
コピペでも実装可能なので、宜しければご覧ください。




  目次
    
    フォルダ構成
JSONファイルの用意
JSONファイルの読み込み$.ajax()読み込みの設定
読み込み後の処理
注意点
$.getJSON()
読み込みに失敗する場合コンソール画面でエラーを確認
JSONファイルのミスを防ぐWEBツール
JSON変換ツール
まとめ
    
  

フォルダ構成



今回使用するファイルのフォルダ構成はこちらです。



フォルダ構成
│
├─index.html
│    htmlファイル
├─script.js
│    javascript(JQuery)ファイル
└─data.json
     jsonファイル



JSONファイルの用意



まずは読み込むJSONファイルを準備します。
ファイルの場所は、ローカルファイルではセキュリティの問題で絶対パスで設定できないため、相対パスで簡単に設定できる場所に配置してください。



絶対パス：C:\Users\Guest\AppData…やhttps://nyanblog2222.comなどルートディレクトリからやURLなど、目的地までの経路を頭から最後まで記述



相対パス：../javascript/script.js など、現在地から目的地までの経路を記述



こちらがファイルの内容です。



ファイル：data.json



[
    {
        "name": "yamada",
        "school_year": 2,
        "test": {
            "japanese": 65,
            "english": 80
        }
    },
    {
        "name": "hayashi",
        "school_year": 2,
        "test": {
            "japanese": 45,
            "english": 95
        }
    },
    {
        "name": "sato",
        "school_year": 1,
        "test": {
            "japanese": 75,
            "english": 35
        }
    }
]



JSONファイルの読み込み



$.ajax()



$.ajax()での読み込み方法です。



$.ajax({
    // 読み込みの設定
    type: "GET",
    url: "data.json", // ファイルパス（相対パス）
    dataType: "json", // ファイル形式
    async: false // 非同期通信フラグ
}).then(
    function (json) {
        // 読み込み成功時の処理
        console.log("読み込みに成功しました");
        console.log(json)
        json.forEach(function (data) {
            console.log(data)
        });
    },
    function () {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
    }
);



読み込みの設定



1～6行目でjsonを読み込む際の設定を記述しています。
ファイル名やファイルの配置を変更する場合、4行目の”data.json”を変更してください。
また、6行目のasyncでは、非同期通信フラグを設定しています。
デフォルトではtrueですがfalseに設定すると、読み込みが終わるまで他の処理を進めることができません。逆に読み込みが終わってる次の処理へ行いたい対場合、falseにした方が良いです。



読み込み後の処理



7行目でthen(成功,失敗)の処理が分かれています。
8～15行目では読み込み成功時の処理を、16～19行目では読み込み失敗時の処理を記述しています。



また、11行目でJSONファイルのデータ全てをコンソールへ出力、
12～14行目でJSON内の配列データを1つずつコンソールへ出力しています。



then()ではなく、done()・fail()を使うことも可能です。
また、どの場合でも処理するconplete()関数もあります。



注意点



Jquery1.8未満では、success()、error()、conplete()が使用されていましたが、現在は非推奨の関数となっております。
上記の関数が無くなることに備えて、done()、fail()、complete()を使用するようにしましょう。



done、fail、complete関数を使用した場合の記述です。



$.ajax({
    // 読み込み設定
}).done(function(json){
    // 成功
}).fail(function(){
    // 失敗
}).always(function(){
    // 常に最後に処理
});



$.getJSON()



$.getJSON()での読み込み方法です。



$.getJSON("data.json")
    .done(function (json) {
        // 成功
    }).fail(function () {
        // 失敗
    }).always(function () {
        // 常に最後に処理
    });



JSONファイルの読み込み -> $.ajax() -> 注意点で記述しているコードと似ています。
設定部分が$.ajax()と比べて少し簡略化されているところが違いですね！



$.ajax()でも、$.getJSON()でも使いやすいと思いますので、自分の好みで使用を決めていいと思います。



読み込みに失敗する場合



コンソール画面でエラーを確認



JSONファイルはちょっとしたミスで読み込めない場合が多くあります。
もちろん失敗した理由が分からなければ修正する方法も分かりません。



そこで、失敗時の関数でこのように記述し、コンソール画面を確認することである程度はエラーの内容を理解することができます。



$.ajax({
    ・・・略
}).then(
    function (json) {
        ・・・略
    },
    function (jqXHR, textStatus, errorThrown) {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
        // httpステータス
        console.log("jqXHR : " + jqXHR.status);
        // タイムアウト、パースエラー
        console.log("textStatus : " + textStatus);
        // エラーの詳細情報
        console.log("errorThrown : " + errorThrown.message);
    }
);



大体は「jqXHR.status」と「errorThrown.message」の内容をネット検索等、調べたらエラーを解決することができると思います。



JSONファイルのミスを防ぐWEBツール



JSON Pretty Linter



JSONファイルの記述ミスを防ぐためのおすすめはこちらです。
こちらで事前にチェックすることでエラーの割合はかなり減ると思います。



JSON変換ツール



CSV to JSON – CSVJSON



CSVやSQLからJSONに変換できるツールです。
CSVやSQLを良く使用されるかたは一度使用してみてはいかがでしょうか。



まとめ



いかがでしたでしょうか。
今回はJQueryでJSONファイルを読み込む方法をご紹介しました。



JSONファイルを読み込むには、こちらの2つの方法で実装できます。
・$.ajax()
・$.getJSON()



また、JSONファイルの読み込みには、ちょっとしたミスでエラーが発生しますので、デバッグでステータスコードを調べることが解決の近道です。



今回は全3回のJSONの記事でしたが、新しくJSONの内容を学んだ後には新しい記事を投稿しようとおもいます。良かったら次回も見てみてくださいね！



↓↓↓【JSON入門シリーズ♪】





【JSON入門】JSONとは？JS相互変換について(stringify/parse)
JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪
nyanblog2222.com
2020.06.27











【JSON入門】JSONデータの参照・追加（更新）・削除
こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...
nyanblog2222.com
2020.06.28






【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)
JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪
nyanblog2222.com
2020.06.30

投稿 【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JSON入門】JSONデータの参照・追加（更新）・削除
nyan2222 — Sun, 28 Jun 2020 09:00:00 +0000

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。
詳しくは、こちらからご覧ください。





【JSON入門】JSONとは？JS相互変換について(stringify/parse)
JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪
nyanblog2222.com
2020.06.27




今回はJSONデータの扱い方の続編となります。
宜しければご覧ください。




  目次
    
    操作するデータ
JSONデータを参照データの参照方法
特定のデータのみ参照する方法
JSONデータを追加新規プロパティを指定して値を追加
push関数でオブジェクトを追加
値やオブジェクトを更新する場合
JSONデータを削除
最後に
    
  

操作するデータ



こちらが今回サンプルのデータです。
json_dataが配列、testはオブジェクトになっています。
※違いは” [ ] ”で括られているか、” { } ”で括られているかです。



var json_data = [
    { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
    { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, },
    { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, }
];



JSONデータを参照



まずは、作成したJSONデータを参照する方法です。



データの参照方法



json_dataは配列のため、添え字でデータを参照することができます。
それ以外はオブジェクトの構造になっており、「オブジェクト.プロパティ」のように、ドットで参照することができます。



// name、school_year：プロパティ
console.log(json_data[0].name); // => yamada
console.log(json_data[1].school_year); // => 2

// testプロパティ（オブジェクト）にenglishプロパティを保持
console.log(json_data[2].test.english); // => 35



特定のデータのみ参照する方法



filter関数を使用することで、特定のデータのみ参照することができます。



// filter関数
var data = json_data.filter(function (item) {
    // 英語が50点以上の人のデータを取得
    return item.test.english >= 50;
});

// 条件に一致したデータの”name”を参照
data.forEach(function (value){
    console.log(value.name) // => yamada, hayashi
});



JSONデータを追加



新規プロパティを指定して値を追加



プロパティと値をそのままデータに追加する方法です。



それぞれ、
　配列と同じ階層にareaプロパティ「”Tokyo”」が追加
　配列添字 [1] 内のオブジェクトにareaプロパティ「”Osaka”」が追加
になっています。



json_data.area = "Tokyo";
json_data[1].area = "Osaka";

console.log(json_data)
// { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, area: "Osaka" },
// { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, },
// area: "Toyko"



push関数でオブジェクトを追加



オブジェクトを作成してpush関数を使う方法です。
push関数で追加したオブジェクトは末尾に追加されます。



var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };
json_data.push(new_data);

// 末尾のデータ
console.log(json_data[json_data.length - 1])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }



値やオブジェクトを更新する場合



データ内の値やオブジェクトを更新する場合、配列やオブジェクトをそのまま指定して値を設定するだけで更新が可能です。



// プロパティの値を指定
json_data[1].area = "Osaka";
console.log(json_data[1].area) // => Osaka

json_data[1].area = "Nagoya";
console.log(json_data[1].area) // => Nagoya



// オブジェクトを更新
console.log(json_data[2])
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, }

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };

// name:"hayashi"オブジェクトを"tanaka"オブジェクトに更新
json_data[2] = new_data;
console.log(json_data[2])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }



JSONデータを削除



指定のプロパティを削除するときは、「delete」演算子を使用します。



// 各配列の"school_year"を削除
json_data.forEach(function (value) {
    delete value.school_year;
    console.log(value)
});

// { name : "yamada", test : { japanese : 65, english : 80 }, },
// { name : "hayashi", test : { japanese : 45, english : 95 }, },
// { name : "sato", test : { jananese : 75, english : 35 }, },



配列の要素を削除したい場合は、削除したい要素をfalse条件にしてfilter関数を使えば可能です。



最後に



いかがでしたでしょうか。
今回はJSONデータの扱い方続編ということで、基本的な操作方法（参照・追加（更新）・削除）についてご紹介しました。
次はもう少し応用的な操作方法をご紹介できたらと思います。



良かったら次回も見てみてくださいね！



↓↓↓【JSON入門シリーズ♪】






【JSON入門】JSONとは？JS相互変換について(stringify/parse)
JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪
nyanblog2222.com
2020.06.27






【JSON入門】JSONデータの参照・追加（更新）・削除
こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...
nyanblog2222.com
2020.06.28






【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)
JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪
nyanblog2222.com
2020.06.30

投稿 【JSON入門】JSONデータの参照・追加（更新）・削除 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JSON入門】JSONとは？JS相互変換について(stringify/parse)
nyan2222 — Sat, 27 Jun 2020 09:00:00 +0000

こんにちは。JSONファイルについて、ご存じでしょうか。
本記事はJSONファイルについてと、基本的な扱い方についてご紹介します。




  目次
    
    JSONファイルとはどういうファイルなの？
JSONの良いところ
オブジェクトとは似て非なるもの
JSONの基本的な使い方オブジェクトからJSONへ（エンコード encode）
JSONからオブジェクトへ（デコード decode）
まとめ
    
  

JSONファイルとは



どういうファイルなの？



JSONは「JavaScript Object Notation」で直訳すると、「JavaScriptのオブジェクト表記法」となります。



つまり、情報のやりとりができるテキストベースのデータ形式を表しています。
同じようなデータ形式で、XMLファイルが代表的な例としてよく挙げられています。



JSONの良いところ



JSONの特徴は主にこちらの3点を満たしており、この特徴を持つことで、サーバ間の通信やさまざまなプログラミング言語との共有を可能にしています。



テキストデータのため、軽量
オブジェクトのように扱える
単純な構造



オブジェクトとは似て非なるもの



先ほどのJSONの良いところでも上げましたが、相互変換が可能なため、JSONはオブジェクトのように扱うことができます。



しかし、JSONはテキストデータであり、オブジェクトではありません。



こちらの例を見てください。



// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

// JSON
var json = { "name": "Hanako", "old": 18, "tel": "000-0000-2" };



テキストデータに変換する前のJSONは、連想配列に似た構造となっていますが、明確な違いがあります。
それはこちらです。



プロパティのみ含めることができ、関数は含められない
プロパティをダブルクォーテーション（””）で括る
→括られた文字列のみプロパティとして使用できる



また、注意点として、カンマ、コロンが1つでも抜けているとJSONとして無効になる場合もあります。



この辺りを理解しておくだけでも、開発するときに違うと思います。



JSONの基本的な使い方



さっそく、試してみましょう。
今回はJSONとJavaScriptのオブジェクトとの、相互変換を行ってみます。



オブジェクトからJSONへ（エンコード encode）



stringfy関数
・JavaScriptのオブジェクトからJSONへの変換
・JSONデータとして通信する前に変換することが多い



// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

var json = JSON.stringify(obj);
console.log(json)



JSONからオブジェクトへ（デコード decode）



parse関数
・JSONからJavaScriptへの変換
ファイルから読み込み後、プログラムで使用しやすいようにデコードする必要がある。



注意する点として、jsonはテキストベースなので全体をシングルクォートで括っています。



// JSON
var json = '{ "name": "Hanako", "old": 18, "tel": "000-0000-2" }';

var obj = JSON.parse(json);
console.log(obj)



まとめ



いかがでしたでしょうか。
今回はJSONの基本的な知識と、基本的な扱い方について、ご紹介しました。
次回はJSON登録や更新などについて、ご紹介していきます。



良かったら次回も見てみてくださいね！



↓↓↓【JSON入門シリーズ♪】





【JSON入門】JSONとは？JS相互変換について(stringify/parse)
JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪
nyanblog2222.com
2020.06.27






【JSON入門】JSONデータの参照・追加（更新）・削除
こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...
nyanblog2222.com
2020.06.28






【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)
JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪
nyanblog2222.com
2020.06.30

投稿 【JSON入門】JSONとは？JS相互変換について(stringify/parse) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JavaScript】Canvasで複数の画像を1つのimgタグで順番に出力してみよう【HTML5】
nyan2222 — Thu, 25 Jun 2020 09:00:00 +0000

こんにちは。今回はJavaScriptでcanvas要素を使って、複数の画像を1つのimg要素へ出力する方法をご紹介します。



同じフォルダ構成＋ファイル名の画像さえあれば、コピペで再現できます！




  目次
    
    HTML
CSS
JavaScript
デモ
まとめ
    
  

HTML



今回のHTMLは至ってシンプルです。
img要素を作成する親divを記述しています。




    




CSS



今回はCSSは使用していないので、不要です。
※ その代わりJavaScriptがしっかり目です。



JavaScript



JavaScriptはこちらです。
今回はJQueryは使っていません。



要所要所で、解説用にコメントを記述してみました。



window.onload = function () {
    // 色々宣言・初期化
    var canvas = document.createElement("canvas");
    canvas.width = 0;
    canvas.height = 0;
    var images = [];
    var srcs = [
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
    ];
    var loadCount = 0;

    // Canvas上に画像を表示
    for (var i = 0; i < srcs.length; i++) {
        // Imageのインスタンスを生成し、それぞれの画像を設定
        images[i] = new Image();
        images[i].src = srcs[i];

        // 画像の読み込みが終わったら
        images[i].onload = function () {
            // カウントを取る
            loadCount++;

            // 画像全てloadが終わったら
            if (loadCount === images.length) {
                // ロード後の処理
                loadProcess(images, canvas);
            }
        };
    }
};

// ロード後の処理
function loadProcess(images, canvas) {
    // 画像それぞれのサイズを計算して、canvasのサイズを設定
    setCanvasSize(images, canvas);

    // canvasをクリアにする
    let ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // カンバスに画像を描画
    drowImage(images, ctx);

    // canvasを画像に変換
    canvasToImage(canvas);
}

// カンバスサイズを設定
function setCanvasSize(images, canvas) {
    for (let i = 0; i < images.length; i++) {
        // 横幅は一番大きい画像に設定
        if (canvas.width < images[i].naturalWidth) {
            canvas.width = images[i].naturalWidth;
        }
        // 高さはプラスしていく
        canvas.height += images[i].naturalHeight;
    }
}

// カンバスに画像を描画
function drowImage(images, ctx) {
    var set_y = 0;
    for (let i = 0; i < images.length; i++) {
        ctx.drawImage(images[i], 0, set_y);
        // 前の画像分、高さをずらして表示させるため、set_yに現在の画像の高さを設定
        set_y += images[i].naturalHeight;
    }
}

// canvasからImgに変換
function canvasToImage(canvas) {
    // img要素を作成
    var outputImg = document.createElement('img');
    // canvasを画像に変換
    outputImg.src = canvas.toDataURL('image/png');
    // 変換したimg要素をdiv要素の中に追加
    document.getElementById('result').appendChild(outputImg);
}



デモ



デモページはこちらです。
サイズの取得を確認できるよう、さまざまな画像を使ってみました。



まとめ



いかがでしたでしょうか。
このようなcanvasの使い方もできるんですねぇ。。。
色んな描画の使い方ができるので、もっと！もっと！とできるようになりたいです。
（ちょっとしたミニゲームっぽいのもそろそろ作ってみたい。。。）



今回に限った話ではないですが、実務でC#をやっておきながら、JavaScriptでオブジェクト指向の書き方が全然できておらず、猛勉強中です。



可読性も上げたいと思っているので、近いうちに記事にできるようしっかり勉強していきます。
投稿 【JavaScript】Canvasで複数の画像を1つのimgタグで順番に出力してみよう【HTML5】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JavaScript】アナログ時計の作り方【サンプル】
nyan2222 — Wed, 24 Jun 2020 09:00:00 +0000

こんにちは。先日JavaScriptでカウントダウンタイマーを作成してみました！
詳しくはこちらをご欄ください。





【JavaScript】カウントダウンタイマーの作り方【サンプル】
JavaScript（JS）でカウントダウンタイマーを作成しました。サンプル付きでデモもあるので分かりやすくなっています。コピペでも良いのでよかったら試してみてください♪
nyanblog2222.com
2021.08.13




今回はDateオブジェクトを使用して、アナログ時計を作成してみました。
良かったら試してみてください。




  目次
    
    HTML
CSS
JavaScript
デモ
まとめ
    
  

HTML



まずは、HTMLからです。
それぞれの役割はこちらです。



wrapperクラス：ラッパー
clockクラス：時計全体
scaleクラス：時計のメモリの枠
　※ JavaScriptでそれぞれのメモリを設定します。
hourクラス：時針
minクラス：分針
secクラス：秒針




    
        
            
            
            
            
        
    




CSS



こちらがスタイルの設定です。



@charset "utf-8";

.wrapper {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.clock {
    background-color: rgba(255, 243, 217, 0.2);
    border: 3px solid #C6A35B;
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 50%;
}

.clock::after {
    width: 16px;
    height: 16px;
    background: #C6A35B;
    content: "";

    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    border-radius: 50%;
}

.line {
    position: absolute;
    transform-origin: bottom;
}

.hour {
    width: 8px;
    height: 140px;
    background: #C6A35B;
    top: calc(50% - 140px);
    left: calc(50% - 4px);
}

.min {
    width: 4px;
    height: 180px;
    background: #C6A35B;
    top: calc(50% - 180px);
    left: calc(50% - 2px);
}

.sec {
    width: 1px;
    height: 180px;
    background: #D4BB92;
    top: calc(50% - 180px);
    left: calc(50% - 0.5px);
}

.scale {
    position: relative;
    width: 100%;
    height: 100%;
}

.scale > div {
    position: absolute;
    top: 0;
    left: calc(50% - 2px);
    width: 4px;
    height: 50%;
    transform-origin: bottom;
}

.scale > div::after {
    position: absolute;
    top: 0;
    content: "";
    width: 4px;
    height: 12px;
    background-color: #C6A35B;
}



JavaScript



JavaScriptで針の動きと、時計のメモリを設定しています。



・setIntervalは1秒ごとなので1000でも良いですが、起動後に1秒待つ必要があるため、100で設定しています。
・針やメモリはstyle.transformでrotateを指定して角度を設定しています。
・window.onloadの関数内では、scaleクラスの要素の最後にdiv要素を追加しています。



setInterval(function () {
    // 時間を取得
    var now = new Date();

    // 針の角度
    var deg_h = now.getHours() * (360 / 12) + now.getMinutes() * (360 / 12 / 60);
    var deg_m = now.getMinutes() * (360 / 60);
    var deg_s = now.getSeconds() * (360 / 60);

    // それぞれの針に角度を設定
    document.querySelector(".hour").style.transform = `rotate(${deg_h}deg)`;
    document.querySelector(".min").style.transform = `rotate(${deg_m}deg)`;
    document.querySelector(".sec").style.transform = `rotate(${deg_s}deg)`;
}, 100);

window.onload = function () {
    // メモリを追加
    for (let i = 1; i <= 12; i++) {
        // scaleクラスの要素の最後にdiv要素を追加
        let scaleElem = document.querySelector(".scale");
        let addElem = document.createElement("div");
        scaleElem.appendChild(addElem);

        // 角度をつける
        document.querySelector(".scale div:nth-child(" + i + ")").style.transform = `rotate(${i * 30}deg)`;
    }
}



デモ



デモページはこちらです。
実際の時刻に合わせて時計が動いているのが分かります。



まとめ



いかがでしたでしょうか。
今回はJavaScriptでアナログ時計を作成してみました。



Dateオブジェクト以外にも、CSSのtransformの使い方やJavaScriptで要素内に要素を追加する方法も中で行っているので、ぜひ試してみてください。
投稿 【JavaScript】アナログ時計の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。


【JavaScript】簡単に文字をカーブ状に配置するプラグイン【Arctext.js】
nyan2222 — Fri, 12 Jun 2020 09:00:00 +0000

文字をカーブさせるためには、CSSやJavaScriptで一から作成するのはかなり難しいです。
今回は、JavaScriptのプラグインを使って、簡単に文字をカーブ状に配置する方法をご紹介します。




  目次
    
    プラグインの設定Arctext.jsのファイルをダウンロード
script参照の設定
HTML
CSS
JavaScript
Arctext.jsのオプション
デモ
まとめ
    
  

プラグインの設定



Arctext.jsのファイルをダウンロード



こちらのページ[Arctext.js – Curving Text with CSS3 and jQuery]のページから「Download Source」をクリックしてダウンロードすることができます。
このプラグインはCDNには設置されていないので、ダウンロードしてファイルを配置してください。



また、このプラグインはJqueryを使用していますので、CDN設置のアドレスを設定するか、事前にダウンロードして用意してください。



script参照の設定



先ほどダウンロードしたファイルをhtmlでscript要素で参照設定します。









HTML



HTMLでカーブ状にしたい要素に対してidを設定していきます。
具体的な設定はJavaScriptで設定します。




    nyanblog javascript
    簡単にカーブにできるよ
    よかったら試してみてね
    文字をまっすぐにできるよ




CSS



CSSで少しスタイルも編集しています。



p {
    text-align: center;
    color: #D09B4A;
    margin: 5rem auto;
    font-weight: bold;
    font-size: 1.6rem;
}

#sample3 {
    margin-top: 16rem;
}



JavaScript



HTMLで設定したh1~h6要素やp要素に設定したidに対して、arctext関数を使って文字列をどのようにカーブ状にするか、設定します。



この設定は「script.js」ファイルに記述しています。



$(function() {
    $("#sample1").arctext({
        radius : 200,
    });
    
    $("#sample2").arctext({
        radius : 150,
    });
    
    $("#sample3").arctext({
        radius : 150,
        dir: -1,
    });
    
    $("#sample4").arctext({
        radius : 200,
        rotate: false,
    });
});



Arctext.jsのオプション



オプションを設定について、こちらの表を参考に設定してみてください。




    
" + week[i] + "



















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





































































        
            
                オプション
                説明
            
            
                radius
                サークルの半径（デフォルト：0）
            
            
                dir
                方向：1:下にカーブ、-1:上にカーブ（デフォルト：1）
            
            
                rotate
                true：文字が中央を向く、false：文字がまっすぐのまま。（デフォルト：true）
            
            
                fitText
                [fitText]プラグインを使用する場合、true（デフォルト：false）
            
        
    




デモ



ソースコードに記述している「デモページはこちら」です。







まとめ



いかがでしたでしょうか。
今回はJavaScriptのプラグインで簡単に文字をカーブ状に表現することができました。
これを使うとロゴも簡単にできちゃいそうですね！
投稿 【JavaScript】簡単に文字をカーブ状に配置するプラグイン【Arctext.js】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

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

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

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

オプション	説明
radius	サークルの半径（デフォルト：0）
dir	方向：1:下にカーブ、-1:上にカーブ（デフォルト：1）
rotate	true：文字が中央を向く、false：文字がまっすぐのまま。（デフォルト：true）
fitText	[fitText]プラグインを使用する場合、true（デフォルト：false）



【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】
nyan2222 — Tue, 09 Jun 2020 09:00:00 +0000

こんにちは。前回はJavaScriptを使って、ビンゴカードを作成してみました。





【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】
JavaScript（JS）を使ってビンゴカードを作ってみました。作成にはJqueryを使用しています。コピペで使えるソースコードや、実際のビンゴカードのサンプル付きなので、是非動かして試してみてくださいね♪
nyanblog2222.com
2020.05.31




今回はビンゴマシンを作成してみましょう！




  目次
    
    HTML
CSS
JavaScript
デモ
まとめ
    
  

HTML



まずはHTMLを作成しています。
divのwrapperで全体的に囲み、
・ルーレット div要素
・ルーレットの開始・停止ボタン div要素
・ルーレット停止後、出た数字を一覧で追加する枠 ul要素
で作成しています。



// 全体的な枠

    // ルーレット
    
    // ルーレット開始、停止のボタン
    
        
    
    // ルーレットを停止後、出た数字を一覧で表示
    




CSS



こちらがCSSです。
HTMLで設定した要素に対して、スタイルを設定していきます。
この辺りはコピペで好きなところを調整してもいいと思います！



@charset "utf-8";

body {
    font-family: arial, sans-serif;
}

.wrapper {
    margin: 0 auto;
    text-align: center;
}

.centering {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* ルーレット */
.result {
    border: solid 1px #B78D4A;
    border-radius: 50%;
    font-size: 70px;
    
    margin-bottom: 20px;
    width: 130px;
    height: 130px;
}

/* 出た数字の一覧 */
.number {
    color: #B78D4A;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    list-style: none;
    width: 80%;
    padding: 0;
}

.number li {
    background-color: #B78D4A;
    color: #fff;
    border-radius: 10px;
    height: 40px;
    margin: 4px;
    width: 40px;
}

/* ボタン */
.wrapper-button {
    padding: 20px 0;
}

.button {
    font-size: 30px;
    display: inline-block;
    padding: .8rem 1.6rem;
    border: none;
    border-radius: 25px;
    color: #FFF;
    background-image: linear-gradient(45deg, #B78D4A 0%, #D4BB92 100%);
}

.button:hover {
    background-image: linear-gradient(45deg, #D4BB92 0%, #FDE0A5 100%);
}



JavaScript



Jqueryを使っています。



まずは、ビンゴの数字一覧を作成します。この一覧を使ってルーレットを回します。



次にSTARTとSTOPのクリックイベントでルーレットを回したり、結果を表示させたりします。
詳しくはコメントを記載していますので、確認してください。



$(function () {

    // 1~75まで、bingoの数字一覧を作成
    var max = 75;
    var bingo = [];
    for (var i = 1; i <= max; i++) {
        bingo.push(i);
    }

    var timer;
    var random;
    // START・STOPボタンクリックのイベント
    $("#button").on("click", function () {
        // START
        if ($(this).text() == "START") {
            // ボタンのテキストを"STOP"に変更
            $(this).text("STOP");

            // ルーレットタイマーを設定
            timer = setInterval(function () {
                random = Math.floor(Math.random() * bingo.length);
                $("#result").text(bingo[random]);
            }, 10);
        // STOP
        } else {
            // ボタンのテキストを"START"に変更
            $(this).text("START");

            // ルーレットタイマーを停止
            clearInterval(timer);

            // 停止時の数字を結果に反映
            var result = bingo[random];
            // 一覧から削除（次のルーレットに表示させないため）
            bingo.splice(random, 1);

            // 数字一覧に追加
            $("#number").append($("").text(result));
            $("#number li").addClass("centering");
        }
    });
});



デモ



こちらがデモページです。
STARTボタンをクリックしてルーレットが開始、一定時間後にSTOPボタンをクリックすることで、数字を止めることができます。



ボタンの下に今まで出た数字が一覧で表示されるので、カードを再チェックするときに活用することができます。



まとめ



前回のビンゴカードと合わせることで、
ビンゴゲームをすることができます。





【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】
JavaScript（JS）を使ってビンゴカードを作ってみました。作成にはJqueryを使用しています。コピペで使えるソースコードや、実際のビンゴカードのサンプル付きなので、是非動かして試してみてくださいね♪
nyanblog2222.com
2020.05.31




これならカードをビンゴゲーム一式を購入する必要もないので、簡単に遊ぶことができます。
良かったら遊んでみてくださいね！



良かったら他の記事も見てみてくださいね！
投稿 【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】
nyan2222 — Fri, 05 Jun 2020 09:00:00 +0000

前回は、＜input type = “file”＞で選択するボタンの装飾について説明しました。
詳しくは、こちらをご覧ください。





ファイルを選択するボタンの画像やスタイルを設定する方法＜input type="file"＞
input要素において、「確認する」ボタンを でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。しかし、ファイルを選択するinput要素では、既にtype = "file"が設定されているため、少し工夫が必要になります！今回は選択ボタンの画像やスタイルの変更をいく...
nyanblog2222.com
2020.06.03





今回はinput要素で読み込んだ画像を表示させてみようと思います。
それでは、img要素とdiv要素それぞれのパターンでみていきましょう。




  目次
    
    【サンプル1】img要素に出力
【サンプル2】div要素に出力
デモ
まとめ
    
  

【サンプル1】img要素に出力



まずは、img要素に出力してみます。
input要素、type=”file”では、ファイルを選択後、onchangeのイベントが呼ばれます。
JavaScriptでは、on(“change”, function())関数です。



HTMLではinput要素とimg要素を宣言します。








JavaScriptに1～4の内容を記述します。



1. ファイル選択後に呼ばれるイベントを記述
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったらimg要素のsrc属性に画像ファイルの情報を設定
4. 読み込んだ画像ファイルをURLに変換



// 1. ファイル選択後に呼ばれるイベント
$("#input1").on("change", function (e) {

    // 2. 画像ファイルの読み込みクラス
    var reader = new FileReader();

    // 3. 準備が終わったら、id=sample1のsrc属性に選択した画像ファイルの情報を設定
    reader.onload = function (e) {
        $("#sample1").attr("src", e.target.result);
    }

    // 4. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(e.target.files[0]);
});



【サンプル2】div要素に出力



次はdiv要素に画像ファイルを出力してみます。
JavaScriptの記述方法も変えてみました。



先ほどと異なり、input要素のonchange属性にOutputImage関数を設定しています。








JavaScriptではサンプル1と同様、ファイル読み込みクラスを使用して、画像を表示させます。
サンプル1と異なるのはImageクラスを使って、heightとwidthの設定を追加しています。



1. input要素のonchange属性に関数を設定
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったら画像の情報を設定
4. Imageクラスに読み込んだ画像の情報を設定し、div要素に読み込んだ画像の縦・横のサイズを設定
5. backgroundスタイルを設定
6. 読み込んだ画像ファイルをURLに変換



// 1. onchange属性に設定した関数
function OutputImage(target)
{
    // 2. ファイル読み込みクラス
    var reader = new FileReader();

    // 3. 読み込みクラスの準備が終わった後、画像の情報を設定
    reader.onload = function () {
        $sample2 = $("#sample2");

        // 4. Imageクラスを使ってdiv要素に画像のheightとwidthのサイズを設定
        img = new Image();
        img.src = this.result;
        img.onload = function() {
            $sample2.css("width", img.naturalWidth);
            $sample2.css("height", img.naturalHeight);
        }
        // 5. backgroundスタイルを設定
        $sample2.css("background", "url(" + this.result + ") center center / contain no-repeat");
    }
    // 6. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(target.files[0]);
}



デモ



こちらがサンプル1とサンプル2のデモです。
内容は一緒ですが、出力方法や要素がimgかdivであることが異なります。






           
        
            サンプル1
            
            
        
        
        
            サンプル2
            
            
        
        
        
    
    



まとめ



今回はinput type=file要素で取得した画像ファイルを出力する方法を説明していきました。
divに関して、今回例で試してみただけなので、別の要素でも試してみてください。
次回は複数ファイルを読み込んで出力してみましょう。



本記事をご覧いただきありがとうございました。
投稿 ＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞
nyan2222 — Wed, 03 Jun 2020 09:00:00 +0000

input要素において、「確認する」ボタンを ＜input type = “image”＞ でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。



しかし、ファイルを選択するinput要素では、既にtype = “file”が設定されているため、少し工夫が必要になります！
今回は選択ボタンの画像やスタイルの変更をいくつかの方法でご紹介します。




  目次
    
    【サンプル1】ボタンを画像に設定する
ボタンのスタイルを変更【サンプル2】で囲んでスタイルを設定
【サンプル3】CSSとJavaScriptを使ってスタイルを変更
デモ
まとめ
    
  

【サンプル1】ボタンを画像に設定する



ボタンを画像にする方法について、
HTMLでは、input要素をlabel要素で囲みます。




   




CSSでlabel要素に画像を設定します。
他にもサイズやポインタなど、スタイルを変更しておきましょう。



デフォルトでinput要素はボタンが出力されるので、display: none; で表示を消しておきます。



また、hoverの疑似クラスで別の画像を設定しておくと、少し動きが出ますね。



#sample1 {
    // サイズを設定
    height: 54px;
    width: 150px;

    // ボタンにする画像を設定
    background: url(../img/sample1.png) center center / contain no-repeat;

    // インラインボックスに設定
    display: inline-block;
    // マウスカーソルを当てた時、ポインタに設定
    cursor: pointer;
}

#sample1:hover {
    background: url(../img/sample1_hover.png) center center / contain no-repeat;
}

#sample1 input{
    // デフォルトのinputは出力なし
    display: none;
}



また、今回はサンプルなので簡単な画像なのですが、
この程度の画像の動きであればスタイルでも実現可能です。



ボタンのスタイルを変更



【サンプル2】で囲んでスタイルを設定



先ほどの画像の設定と同様にinput要素をlabel要素で囲みます。




   




続いて、今度はlabel要素をCSSで設定していきます。



#sample2 {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  background: #00BCD4;/*背景色*/
  color: #00BCD4;/*=背景色*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
  border-bottom: solid 2px #118e9e;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

#sample2:active {
  /*押したとき*/
  border-bottom: solid 2px #00BCD4;
  box-shadow: none;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

#sample2 input{
    // デフォルトのinputは出力なし
    display: none;
}



【サンプル3】CSSとJavaScriptを使ってスタイルを変更



次はdiv要素でボタンを作成し、CSSで装飾を付けます。
input要素はサンプル2と同様、出力しないようにします。



ファイルを選択




#sample3 {
    position: relative;
    display: inline-block;
    padding: 0.75em 1.25em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

#sample3:active {
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}

#sample3 input{
    // デフォルトのinputは出力なし
    display: none;
}



JavaScriptでdiv要素をクリックしたときに、input要素をクリックしたイベントを呼び出します。
今回はJQueryで記述しています。



$(function () {
    $('#sample3').click(function() {
        $('#sample3_input').trigger('click');
    });
});



デモ



今までのサンプルそれぞれのデモです。
ボタンをクリックするとダイアログが表示されますが、ファイルを選択しても何も起こりません。




   
    
        
            デフォルト
            
        
           
        
            サンプル1
            
                
            
        
        
        
            サンプル2
            ファイルを選択
                
            
        
        
        
            サンプル3
            ファイルを選択
            
        
        
    
    



まとめ



今回はinput要素でファイル選択ボタンのスタイルを変更や、画像の設定を行いました。



ぜひ色々試してみてくださいね！
投稿 ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞ は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【JavaScript】非同期処理と処理の順番について【初心者・入門】
nyan2222 — Tue, 02 Jun 2020 09:00:00 +0000

JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。
ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後処理の順番について説明していきます。




  目次
    
    同期処理と非同期処理同期処理
非同期処理
スレッドについて
処理の順番
まとめ
    
  

同期処理と非同期処理



同期処理



同期処理はプログラムの記述順に1つずつ実行されます。
そのため、次の処理は前の処理が終わらないと実行することができません。



非同期処理



非同期処理は同期処理と異なり処理が実行する準備をしている空き時間の間に、別の処理を実行することができます。



この説明だけだと、非同期処理は並列で色んな処理ができるってこと？と思うかもしれません。



答えは　「No」　です。



あくまで、準備している空き時間を活用しているだけなので、並列で複数の処理ができるわけではありません。
並列処理を行うためにはマルチスレッドで処理を実行する必要がありますが、JavaScriptはシングルスレッドで動きますので、並列処理ではなく、並行処理と言えます。



並列処理と並行処理の違いはこちらです。



並列処理
物理的に複数の処理を同時に実行することができる
並行処理
常に1つの処理のみ実行しているが、タイミングを見計らって処理を切り替えて処理を効率よく実行する
同時に実行しているように見せかけている



スレッドについて



先ほどシングルスレッドとマルチスレッドについて話が出てきましたが、スレッドとは何でしょうか。



スレッドとは、1つ1つ実行する処理を表します。



シングルスレッドはその名の通り1つの処理を実行することができます。



対し、マルチスレッドは複数の処理を実行することができます。



これを先ほどの並列処理と並行処理に当てはめると、このようになります。



並列処理・・・マルチスレッドで実行
並行処理・・・シングルスレッドで実行



JavaScriptはシングルスレッドのため、並行処理をしていることになりますね。



処理の順番



さて先述のようにJavaScriptはシングルスレッドであることが理解できましたが、並行処理をしているということは、処理の順番が入れ替わってしまうことがあります。



JavaScriptは上から順番でキューに関数を登録し、処理しています。
しかし、処理が同期的なものと非同期的なものによって、順番が入れ替わることがあります。



＜上から順番に処理する＞



console.log("one");
console.log("two");
console.log("three");



実行結果



one
two
three



＜順番が入れ替わっている＞



console.log("one");
setTimeout(function(){console.log("two")}, 0);
console.log("three");



実行結果



one
three
two




順番が入れ替わっているパターンでは「setTimeout」関数のタイマーを0ミリ秒で設定しています。
ここで不思議なのは、タイマーは0ミリ秒…つまり待ち時間なしで実行するように記述されていますが、実際の実行結果はone→three→twoと2行目と3行目の順番が入れ替わっています。



キューに登録されているのは、
　1. ログ表示　”one”
　2. タイマー登録　0ミリ秒
　3. ログ表示　”three”
この3つの処理になります。
つまり、この時点では、「ログ表示　”two”」はキューにまだ登録されていないのです。



では、いつ「ログ表示　”two”」はキューに登録されるのか？



それは、同期処理が全て終わってからです。



なので、キューの登録の順番は、
同期処理
　1. ログ表示　”one”
　2. タイマー登録　0ミリ秒
　3. ログ表示　”three”
同期処理の登録完了後、非同期処理
　4.ログ表示　”two”
となります。



だから先ほどの実行結果のように、順番が入れ替わります。



まとめ



今回はJavaScriptの非同期処理と同期処理、処理の順番について、説明していきました。
JavaScriptで開発するためには、このあたりをまず始めに理解しておきたいところですね！



非同期処理を同期的に処理する方法については、
別の記事にしたいと思います。
ご覧いただき、ありがとうございました。
投稿 【JavaScript】非同期処理と処理の順番について【初心者・入門】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】
nyan2222 — Sun, 31 May 2020 09:00:00 +0000

こんにちは。今回はJavaScriptを使ってビンゴカードを作成してみました。Jqueryも使用していますので、ご注意ください。




  目次
    
    HTMLの設定
CSSの設定
JavaScript
デモ
まとめ
    
  

HTMLの設定



まずは、枠作りのHTMLからです。



ビンゴカードの枠と作成用のボタンを設定しています。




    
        
            
                B
                I
                N
                G
                O
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
        
    
    




CSSの設定



ビンゴカードと作成ボタンのスタイルを設定しています。



/* カード全体のスタイル */
#bingo{
    width: 340px;
    margin: 0 auto;
}

/* B I N G Oと番号のスタイル */
#bingo th,
#bingo td {
    text-align: center;
    font-weight: normal;
}

/* B I N G O の文字のスタイル */
#bingo th{
    color: #B78D4A;
}

/* 番号のスタイルを設定 */
#bingo td {
    width: 60px;
    height: 55px;
    text-align: center;
    vertical-align: middle;
    
    border-radius: 1.5rem 1.5rem 0 0;
    color: #fff;
    background-color: #B78D4A;
    border: 2px solid #B78D4A;
}

/* 番号をチェックした時に変更するクラス、スタイルを設定 */
#bingo td.check {
    color: #B78D4A;
    background-color: #F0F0F0;
}

/* 番号をマウスオーバーした時にポインタを指矢印に変更 */
#bingo td:hover {
    cursor: pointer;
    cursor: hand;
}

/* 作成ボタンのスタイル */
p#button{
    text-align: center;
}



JavaScript



JavaScriptでカードの番号をランダムに設定する動きと、
番号をクリックした際にスタイルを変更するクラスをつけ外ししています。



$(function () {
    var make_col = function (base) {
        var arr = [];
        for(var i=0; i<15; i++) {
            arr.add(i);
        }
        var list = [];
        for (var i = 1; i <= 5; i++) {
            // ランダムで値を取得
            var a = parseInt(Math.random() * arr.length);
            list.push(arr[a] + base);
            // 数字を重複させないため、元々のリストから値を削除する
            arr.splice(a, 1);
        }
        return list;
    };

    var make_table = function () {
        // B列、I列...とそれぞれで5つの数字をランダムで取得
        var col_b = make_col(1);
        var col_i = make_col(16);
        var col_n = make_col(31);
        var col_g = make_col(46);
        var col_o = make_col(61);
        
        // 25個分の数字を格納できるtableに取ってきた列の数字を設定
        var list = new Array(25);
        for (var i = 0; i < 5; i++) {
            list[i * 5 + 0] = col_b[i];
            list[i * 5 + 1] = col_i[i];
            list[i * 5 + 2] = col_n[i];
            list[i * 5 + 3] = col_g[i];
            list[i * 5 + 4] = col_o[i];
        }
        // 中心はfreeで固定
        list[12] = 'free';
        return list;
    };
    
    // カード作成関数
    var create_card = function () {
        // 取ってきた数字が入ったtableをhtmlに出力する
        var table = make_table();
        for (var i = 0; i < table.length; i++) {
            $('#bi' + i).text(table[i]);
        }
    };

    // 初期化関数
    var init = function () {
        create_card();
        
        // チェック状態を外す
        $('#bingo td').each(function () {
            $(this).removeClass('check');
        });
    };
    
    // 初期
    init();
    
    // カード作成 ボタンをクリックすると、初期化
    $('#bingo-create').click(function () {
        init();
    });
    
    // 番号をクリックすると、スタイルを変更するクラスをつけ外しできる
    $('#bingo td').click(function (){
        $(this).toggleClass('check');
    });
});



デモ



こちらが作成したビンゴカードです。



デモページはこちら





番号をクリックすると見た目が変更されます。
（押し間違い対策でもう一度番号をクリックすると元に戻ります。）
カードをリセットしたい場合は、「カード変更」ボタンをクリックすると、初期化されます。



まとめ



今回はJavaScriptを使って、ビンゴカードを作成してみました。
列がそろったらBINGO！の表示を追加するのも面白いですね！
近いうちに試してみたいと思います。



次回の記事も良かったらご覧ください。





【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】
JSでビンゴマシンを作成してみましたのでサンプルコードをご紹介します。簡単にできて解説もついて分かりやすくしています。ビンゴカード作成の記事もありますので、良かったら見てみてください♪
nyanblog2222.com
2020.06.09

投稿 【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【CSS】object-fit,object-positionのIE対応【object-fit-images】
nyan2222 — Wed, 27 May 2020 09:00:00 +0000

前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。





【CSS】object-fitの使い方【img要素の縦横比固定方法】
CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪
nyanblog2222.com
2020.05.24






【CSS】object-positionの使い方【img要素の画像配置設定】
img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪
nyanblog2222.com
2020.05.26




ただし、前回までの記事でも記載したように、このプロパティはIEには対応しておらず、別途対応する必要があります。
今回はIEに対応させるobject-fit-imagesを使用して、object-fit、object-positionプロパティを有効にできる方法を紹介していきます。




  目次
    
    object-fit-imagesライブラリを有効にするCDNを貼り付ける
ダウンロードしたファイルを読み込む
img要素にクラスを追加
CSSに”font-family”プロパティを設定
JavaScriptの記述を追加
処理結果
まとめ
    
  

object-fit-imagesライブラリを有効にする



まずは、object-fit-imagesライブラリを有効にしていきます。
方法は2つあり、
1つはCDNを読み込む方法。
もう1つはダウンロードしたファイルを読み込む方法。です。



CDNを貼り付ける



CDNとは、「Content Delivery Network」の頭文字を取った略称で、「コンテンツ配信ネットワーク」を指します。
簡単に言うと、ネットワーク上に配置されているファイルにアクセスできる仕組みのことです。
この仕組みを使うとサーバの負荷を一部肩代わりしてくれるようになるため、レスポンスが早くなると言われています。



htmlにscript要素を使って、CDNを読み込ませます。







ダウンロードしたファイルを読み込む



こちらのサイトから「Clone or download」をクリックしてダウンロードしてください。
https://github.com/bfred-it/object-fit-images



ダウンロードしたファイルの中から「ofi.js」ファイルを読み込む設定をhtmlのscript要素で設定します。







img要素にクラスを追加



object-fit、object-positionプロパティを使用するimg要素にクラスを追加します。
クラス名は任意で問題ないので、既にクラスを指定している場合はそのクラスを使っても大丈夫です。







CSSに”font-family”プロパティを設定



2～5行目まではimgのサイズ設定と処理結果が分かりやすいように、背景色と境界線を設定しています。



7、8行目：object-fit、object-positionプロパティを設定しています。
10行目：IE用に「font-family」プロパティを設定します。値は7、8行目で設定した値と同じ値を設定します。



object-image{
    width: 400px;
    height: 300px;
    background-color: #999;
    border: 1px solid #666;

    object-fit: none;
    object-position: right;
    // IEのブラウザに対応
    font-family: 'object-fit: none; object-position: right;';
}



10行目があれば、7、8行目は不要なのかも？と思い、試してみましたが、object-fit、object-positionが反映されなかったので、別々に記述が必要みたいです。



JavaScriptの記述を追加



htmlファイル内のの直前にscript要素を追加し、objectFitImages関数を呼び出します。



全てのimg要素に対応させる場合は引数なし。
任意のクラスに画像を対応させたい場合は引数に「img.クラス名」を設定します。
※ クラス名のみでは、反映されないので、注意してください。



// 全てのimg要素に対応


// 指定のimg要素のクラスに対応




処理結果



ここまで設定が終わりましたら、処理結果を見てみましょう。
このページをIEで開き、対応前と比較して対応後ではobject-fitが効いていることを確認してみてください。
他のブラウザでは対応前と対応後では一緒の動きをしています。



object-fit-images対応前




    



object-fit-images対応後





    





まとめ



いかがでしたでしょうか。
今回は「object-fit-imagesライブラリ」を使って、IEのブラウザにobject-fitを対応させてみました。
まだまだIEのブラウザは使用されているので、対応させて損はないと思います。
※ 2022年6月15日でサポート終了予定



4つの簡単なステップで対応ができるので、良かったら試してみてください。



今回の記事が何かの参考になれば幸いです。
ご来訪ありがとうございました。それでは♪
投稿 【CSS】object-fit,object-positionのIE対応【object-fit-images】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【JavaScript】console.logでデバッグ【フォーマット文字列】
nyan2222 — Sat, 23 May 2020 09:00:00 +0000

こんにちは。前回はconsole.log関数を使って、基本的なデバッグ方法をご紹介しました。
詳しくは良かったらこちらの記事をご覧ください。





【JavaScript】デバッグ中に値を確認してみよう！【console.log】
プログラム中にデバッグをしていますか？今回は基本的な方法でブラウザでコンソールウィンドウを表示させ、デバッグできる、console.log関数の使い方を説明していきます。特に初心者の方へぜひ見ていただきたいです。デバッグとは、プログラム開発の際に発生したバグ（不具合、誤り）を見つけ、修正する作...
nyanblog2222.com
2020.05.21





今回は、%s, %d, %f, %oなどのフォーマット文字列を使って変数でデバッグをしてみましょう。




  目次
    
    %s 文字列を出力
%d, %i, %f 数値を出力
%o(%O) オブジェクトを出力
%c コンソールの出力を装飾
まとめ
    
  

%s 文字列を出力



%sを使って、文字列を出力します。
こちらはソースコードの記述例です。



var temp1 = "sample";
var temp2 = "文字列";

console.log("temp1 : %s", temp1)
console.log("temp2 : %s", temp2)



このように%sを設定した箇所に、第2引数で設定した変数の値が出力されています。



temp1 : sample
temp2 : 文字列



%d, %i, %f 数値を出力



%d, %i, %fを使って数値を出力します。
%d, %i : 整数値を出力
%f : 浮動小数点数値を出力
こちらはソースコードの記述例です。



var num1 = 123;
var float1 = 234.56;

var format_d = "%d";
var format_i = "%i";
var format_f = "%f";

// 整数を%d, %iで出力
console.log("%s : %d" + "\r\n%s : %i", format_d, num1, format_i, num1)

// 小数を%d, %iで出力
console.log("%s : %d" + "\r\n%s : %i", format_d, float1, format_i, float1)

// 整数、小数を%f, %fで出力
console.log("%s : %f" + "\r\n%s : %f", format_f, num1, format_f, float1)



コメントにも記載していますが、



1. 整数を%d, %iで表示させた場合
2. 小数を%d, %iで表示させた場合
3. 整数、小数を%fで表示させた場合



のパターンで記述しているのを確認できます。
この実行結果のように、小数の値を%d, %iで出力させると、小数部分が切り捨てされてしまうので、注意しましょう。



// 整数を%d, %iで出力
%d : 123
%i : 123

// 小数を%d, %iで出力
%d : 234
%i : 234

// 整数、小数を%fで出力
%f : 123
%f : 234.56



%o(%O) オブジェクトを出力



%o(%O)を使って、オブジェクトを出力します。
オブジェクトをクリックすることで、詳細情報を確認することができます。
こちらはソースコードの記述例です。



var obj = {
    hoge1: 'value1'
   , hoge2: 'value2'
   , hoge3: 'value3'
   , hoge4: 'value4'
};
console.log("オブジェクト : %O", obj)

var url = "https://nyanblog2222.com/"
console.log("URL : %o", url)



赤枠内のようにオブジェクトの要素を確認したり、URLをクリックして、実際にどこのページへジャンプしたり、確認することができます。







%c コンソールの出力を装飾



%cを使って、%c以降の記述にスタイルを設定することができます。
こちらはソースコードの記述例です。



console.log("ここまでのtextは反映無し %cここからstyleが反映されます。"
    , "padding: 5px; color: #FFF0ED; font-weight: bold; background-color: #47A4A5;");



赤枠内のように、%c以降に設定したスタイルが適用されていることが確認できますね。







まとめ



前回に引き続き、console.log関数の使い方について、ご紹介いたしました。
色々な方法で、変数の中身を確認することができるのですね！
%dや%iでは、桁数を色々変えて実際の値を見てみたり、%cでは、そのスタイルなら適用できるのかを確認したりするのも、面白いと思います！



それでは、本記事をご覧いただき、ありがとうございました。
次回は、console内の他の関数の使い方について、ご紹介していきたいと思います。
良ければ次回もご覧ください。
投稿 【JavaScript】console.logでデバッグ【フォーマット文字列】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【JavaScript】デバッグ中に値を確認してみよう！【console.log】
nyan2222 — Thu, 21 May 2020 09:00:00 +0000

皆さん、プログラム中にデバッグをしていますか？
今回は基本的な方法でブラウザでコンソールウィンドウを表示させ、デバッグできる、console.log関数の使い方を説明していきます。




  目次
    
    デバッグについて
ブラウザのデバッグツールの表示方法Google Chromeの方法
Microsoft Edgeの方法
Internet Explorerの方法
Firefoxの方法
console.log関数の使い方文字列を表示
変数を表示
配列や連想配列を表示
まとめ
    
  

デバッグについて



まずは「デバッグ」についての説明です。
デバッグとは、プログラム開発の際に発生したバグ（不具合、誤り）を見つけ、修正する作業のことを指します。



JavaScriptではブラウザの機能にデバッグするためのツールが搭載されており、簡単にデバッグすることができます。
他にも、alertで画面に出力させる方法だったり、プログラムを別途記述する方法だったりありますが、基本的にはブラウザのデバッグツールを使うことが多いと思います。
本記事では各ブラウザで搭載されているデバッグツールを使ったデバッグ方法を紹介していきます。



ブラウザのデバッグツールの表示方法



まずは各ブラウザのデバッグツールを表示する方法です。



Google Chromeの方法



１．Webサイトを表示させ、「右クリック」→「検証」をクリック
他の方法では、
　・ショートカットキーから
　　Windows：「F12」キー　
　　　　　　　  「Ctrl」+「Shift」+「I」キー
　　Mac：「Command」+「Option」+「I」キー
　・Google Chromeの設定から
　　右上の縦3点ボタン「…」をクリック
　　→「その他のツール」をクリック
　　→「デベロッパー　ツール」をクリック



２．表示された画面の「Console」タブをクリック



Microsoft Edgeの方法



１．「F12」キーをクリック
他の方法では、
　右上の「…」ボタンをクリック
　→　「その他のツール」をクリック
　→　「開発者ツール」をクリック



２．表示された画面の「コンソール」タブをクリック



Internet Explorerの方法



１．「F12」キーをクリック
他の方法では、
　右上の「歯車ボタン」をクリック
　→「F12 開発者ツール」をクリック



２．表示された画面の「コンソール」タブをクリック



Firefoxの方法



１．「F12」キーをクリック
他の方法では、
　右上の「三」ボタンをクリック
　→「ウェブ開発」をクリック
　→「開発ツールを表示」をクリック



２．表示された画面の「コンソール」タブをクリック



console.log関数の使い方



ここではconsole.log関数の基本的な使い方を説明します。
コンソールは「Google Chrome」の画面を表示させています。



文字列を表示



まずは文字列を表示させてみましょう。
JavaScriptでこのコードを記述してください。



console.log("Hello world!")



するとページには何も表示されていませんが、コンソール画面では、“Hello world!”が表示されています。







変数を表示



続いて、変数の中身を確認する方法です。
こちらのコードを記述してください。



var str = "変数strの中身";
console.log(str)

for(var i=1; i<=5; i++){
    console.log(i)
}



こちらがコンソール画面です。
このように引数に変数を設定することで、strやiの中身を確認することができます。







配列や連想配列を表示



最後に配列や連想配列の表示を確認してみましょう。
こちらのコードを記述してください。



var array = [
    'apple'
    , 'lemon'
    , 'peach'
];
console.log(array)

var obj = {
    hoge1: 'value1'
   , hoge2: 'value2'
   , hoge3: 'value3'
   , hoge4: 'value4'
};
console.log(obj)



こちらがコンソール画面です。
配列や連想配列の中身だけでなく、配列はlengthプロパティの値や__proto__プロパティも確認することができます。







まとめ



いかがでしたでしょうか。
今回は基本的な内容でしたが、コンソール画面でデバッグ操作を実行してみました。



個人的には開発速度を向上させるには、デバッグ作業がどれだけ早くできるかどうか。だと思っています。
これを機にデバッグ操作能力を向上させてもいいかもしれませんね！
良ければ次回の記事もご覧ください。





【JavaScript】console.logでデバッグ【フォーマット文字列】
前回はconsole.log関数を使って、基本的なデバッグ方法をご紹介しました。今回は、%s, %d, %f, %oなどのフォーマット文字列を使って変数でデバッグをしてみましょう。1.%s 文字列を出力 2.%d, %i, %f 数値を出力 3.%o(%O) オブジェクトを出力 4.%c コン...
nyanblog2222.com
2020.05.23

投稿 【JavaScript】デバッグ中に値を確認してみよう！【console.log】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【Raindrops.js】水面の動きを表現したプラグインの使い方【JQuery】
nyan2222 — Fri, 08 May 2020 09:00:31 +0000

こんにちは。今回はRaindrops.jsという、水面の動きを表現したプラグインをご紹介いたします。
このプラグインは雨が水面に滴るような動きを表現しており、清涼感を表現することができそうですね！
では、さっそく使い方をご紹介いたします。




  目次
    
    HTMLで形を作る
CSSでスタイルを設定
htmlへjsファイルの読み込みを設定
JSファイルにオプションを設定
Raindropsのオプション
デモ
まとめ
    
  

HTMLで形を作る



今回は簡単にdivで表現枠を作成しています。




    // canvas_wrapperクラスのdivにJQueryで動きをつけたcanvasが設定されます。
    
    




CSSでスタイルを設定



cssでdivタグにサイズを設定するのと、動きを分かりやすくするため、画像と背景色を設定します。



// divを中央寄せ
.wrapper {
    max-width: 1024px;
    margin: 0 auto;
}

.canvas_wrapper {
    // サイズの設定
    max-width: 1024px;
    height: 600px;

    // お好みで背景の設定をしてください。
    background: url(../img/main_visual.jpg) center center / cover no-repeat #fff;
}



htmlへjsファイルの読み込みを設定



今回指定するのは、4つのjsファイルです。



JQuery　（ライブラリ）
JQuery UI　（ライブラリ）
Raindrops　（プラグイン）
オプション設定用のjsファイル



今回はRaindrops.jsプラグインを使用するため、別途JQuery、JQuery UIのライブラリが必要になります。



HTMLへの設定は、
Google Ajax Libraries API を使用して、ライブラリの読み込みを設定しています。



Raindrops.jsプラグインは、
こちらからダウンロードして読み込みの設定をしましょう。



読み込み設定注意点として、読み込む順番にも決まりがありますので、以下の順番で設定してください。










JSファイルにオプションを設定



HTMLのdivタグに設定した、canvas_wrapperクラスに対し、Raindropsのオプションを設定したら、簡単に表現することができました。



$(function(){
	$(".canvas_wrapper").raindrops();
});



Raindropsのオプション



このように指定することで、詳細なオプションを設定することができます。



$(".canvas_wrapper").raindrops({
    color:"#fff",
    canvasHeight:200,
    rippleSpeed: 0.05,
    density: 0.04
});



オプションの設定については以下の通りです。




    
        
            
                オプション
                説明
            
            
                color
                水の色を指定
            
            
                waveLength
                波長を数値で指定します。
数値が大きいほど、波長は短い。
初期設定は340。
            
            
                frequency
                雨粒の頻度を指定。
数値が大きいほど、雨滴が頻繁に発生。
初期設定は3。
            
            
                waveHeight
                波の高さ。
数値が大きいほど、雨滴によって生成される波が高くなる。
初期設定は100。
            
            
                density
                水の密度。
数値が大きいほど、波紋が短くなる。
初期設定は0.02。
            
            
                rippleSpeed
                波及効果の速度。
数値が大きいほど、波紋が速い。
初期設定は0.1。
            
            
                canvasWidth
                canvasの幅。
初期設定は親の幅の100%。
            
            
                canvasHeight
                canvasの高さ。
初期設定は親の高さの50%。
            
            
                rightPadding
                アニメーションによる、canvasの左右の余白を指定。
初期設定は20。
            
            
                position
                canvasに指定されるpositionの値。
初期値は”absolute”。
            
            
                positionBottom
                canvasに指定されるBottomの値。
初期値は0。
            
            
                positionLeft
                canvasに指定されるLeftの値。
初期値は0。
            
        
    
    参考：Raindorops ドキュメント




デモ



デモページはこちらです。



まとめ



今回はJqueryのプラグイン【Raindrops.js】について、ご紹介しました。
組み込みも設定も簡単にできるので、ぜひ参考にして、試してみてください！
投稿 【Raindrops.js】水面の動きを表現したプラグインの使い方【JQuery】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【JQuery】スムーススクロールでふわっとページ移動してみよう
nyan2222 — Wed, 29 Apr 2020 09:02:38 +0000

こんにちは。JQueryを使用して簡単に出来るスムーススクロールをご紹介いたします。




  目次
    
    HTMLで形を作る
CSSでスタイルを設定
JQueryをhtmlへ設定する
JQueryでイベントを設定する
    
  

HTMLで形を作る



まずはHTMLでナビゲーションとセッションの形を作っていきます。




    スムーススクロール
    
        
            index1
            index2
            index3
            index4
        
    


    Section1
    トップへ戻る


    Section2
    トップへ戻る


    Section3
    トップへ戻る


    Section4
    トップへ戻る




CSSでスタイルを設定



次にCSSでスタイルを決定します。
ここではスクロールさせるため、ある程度セッションの高さを設けています。
また、スクロール後の位置がぴったりにならないようにwrapperクラスにpaddingを設定しています。



*{
    box-sizing: border-box;
}

.wrapper{
    padding: 4rem;
    height: 1000px;
}

h1,h2{
    color: #666;
    margin-bottom: 2rem;
}

li{
    float: left;
    margin-right: 1.5rem;
}



JQueryをhtmlへ設定する



JQueryの設定を行います。
の直前にこのコードを入れます。








JQueryでイベントを設定する



JQueryでクリック時にスクロールさせる動作を追加します。
クリック時のイベントは　‘a[href^=#]:not([href=#])’　で条件を付けています。CSS3では条件を付けることができるので、簡単な条件であればこのように記載します。
ちなみに、 a[href^=#] は#から始まる構文を指し、 :not() 疑似クラスで href=# のみの設定を除外しています。



次に移動する位置を取得しています。
$(this).attr(“href”) は、クリックしたaタグのhref属性に設定されている値を取得し、$(href).offset().top で先ほど取ってきたhref属性先の位置を設定しています。
そして、設定したposへanimateメソッドを用いてスクロールさせています。
return falseで戻り値をfalse設定しているのは、リンク先へ移動する機能を動かさないよう無効にしているからです。



$(function () {
    // #から始まらない場合、処理しない
    $("a[href*=#]:not([href=#])").click(function () {
        // 移動する位置を取得
        var href = $(this).attr("href");
        var pos = $(href).offset().top;

        // スクロール処理
        $("html, body").animate({ scrollTop: pos }, 800);

        // リンク先へ移動する機能を無効化
        return false;
    });
});



これでリンクをクリックするとゆっくりスクロールするスムーススクロールを実装することができました。
今回はJQueryで実装してみましたが、調べる中でブラウザが限定されてしまうようですが、CSSのみでも実装できるようなので試してみたいと思います。
投稿 【JQuery】スムーススクロールでふわっとページ移動してみよう は nyanblog ~にゃんぶろぐ~ に最初に表示されました。



【JQuery】コピペでできるドロップダウンメニュー【サンプル】
nyan2222 — Tue, 28 Apr 2020 09:21:55 +0000

こんにちは。



今回はJQueryを使って簡単にコピペで出来るドロップダウンメニューをご紹介いたします。




  目次
    
    ナビゲーションをHTMLで作成する
CSSでスタイルを設定
Jqueryをhtmlへ設定する
JQueryでイベントを設定する
    
  

ナビゲーションをHTMLで作成する



メニューをul要素で作成しています。
各li要素内に子要素のナビゲーションを設定しています。




    
        メニュー１
            
                メニュー１ａ
                メニュー１ｂ
                メニュー１ｃ
            
        
        メニュー２
            
                メニュー２ａ
                メニュー２ｂ
                メニュー２ｃ
                メニュー２ｄ
            
        
        メニュー３
            
                メニュー３ａ
                メニュー３ｂ
            
        
        メニュー４
            
                メニュー４ａ
                メニュー４ｂ
            
        
        メニュー５
            
                メニュー５ａ
                メニュー５ｂ
                メニュー５ｃ
            
        
    




CSSでスタイルを設定



子要素のメニューはマウスホバーで表示させるため、#global_nav ulのスタイルをdisplay:noneに設定しておきます。もしご自身でスタイルを色々変更される場合はdisplay:noneの設定は最後に行ってください。



/* ナビゲーションのスタイル */
a{
    text-decoration: none;
    color: #666;
}

#global_nav li{
    float: left;
    width: calc(98.5%/5);
    margin: 1% 0.15%;
}
#global_nav li a{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #FFF1DA;
}

#global_nav li a:hover{
    color: #fff;
    background: #FCD69E;
}

/* 子要素のみのスタイル */
#global_nav ul{
    display: none;
}

#global_nav ul li{
    float: none;
    width: 100%;
    margin: 1% 0;
}



Jqueryをhtmlへ設定する



Jqueryの設定を行います。
の直前にこのコードを入れます。








JQueryでイベントを設定する



JQueryでマウスホバー時に表示を切り替える動作を追加します。
まず、ul li liにはイベントを起こさないようにchildrenメソッドで#global_navの子要素のみにhoverメソッドを設定します。
次に、this(ホバーされている#global_nav li)の子要素 ulに対し、slideToggleメソッドで要素をスライドしながら開閉します。
※ stop()メソッドはイベントの重複を防ぐため、イベントを中止するために設定しています。



$(function () {
    // 1.#global_nav liにhoverメソッドを設定
    $("#global_nav").children("li").hover(function(){
        // 2.メニューの開閉
        $(this).children("ul").stop().slideToggle(180);
    });
});



実際にマウスホバーした時にこのように子要素のナビゲーションが表示されたら完成です。簡単にできますので、試してみてください。







デモページはこちらです。
簡単にできるので、最初はコピペでも動きを確認しながら勉強できるので試してみてください！



最後までご覧いただきありがとうございました。
投稿 【JQuery】コピペでできるドロップダウンメニュー【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

オプション	説明
color	水の色を指定
waveLength	波長を数値で指定します。数値が大きいほど、波長は短い。初期設定は340。
frequency	雨粒の頻度を指定。数値が大きいほど、雨滴が頻繁に発生。初期設定は3。
waveHeight	波の高さ。数値が大きいほど、雨滴によって生成される波が高くなる。初期設定は100。
density	水の密度。数値が大きいほど、波紋が短くなる。初期設定は0.02。
rippleSpeed	波及効果の速度。数値が大きいほど、波紋が速い。初期設定は0.1。
canvasWidth	canvasの幅。初期設定は親の幅の100%。
canvasHeight	canvasの高さ。初期設定は親の高さの50%。
rightPadding	アニメーションによる、canvasの左右の余白を指定。初期設定は20。
position	canvasに指定されるpositionの値。初期値は”absolute”。
positionBottom	canvasに指定されるBottomの値。初期値は0。
positionLeft	canvasに指定されるLeftの値。初期値は0。

JavaScript アーカイブ - nyanblog ~にゃんぶろぐ~

【簡単】DockerでPHPとMySQLの環境構築【コンテナ仮想化】

Dockerとは

Dockerをインストール

ファイル構成

ファイル作成

docker-compose.yml ファイル

コンテナ[php]：Dockerfile

コンテナ[mysql]：Dockerfile

index.php ファイル

動作確認

localhostに接続

コンテナ内に入ってphp実行確認

MySQL接続、SQL実行

Visual Studio Codeのインストールや日本語化設定

Visual Studio Code（VSCode）とは

Visual Studio Codeのインストール

Visual Studio Codeに拡張機能をインストール

【初心者】JavaScriptでTODOリスト作り方【サンプル】

はじめに

実装内容（フロー）

HTML

TODOリスト

CSS

JavaScript

コード

解説

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

・タスク追加

・完了ボタンクリック

・削除ボタンクリック

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

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

デモ

【JS】jQueryでloadが効かない場合の対処法

on関数に書き換え

注意事項

【初心者】JavaScriptでストップウォッチの作り方

はじめに

実装内容（フロー）

HTML

CSS

JavaScript

コード

解説

・グローバル変数の定義

・ページ読み込み後、変数にHTML要素を設定

・スタートボタン押下時に呼ばれる関数：start()

・ストップボタン押下時に呼ばれる関数：stop()

・リセットボタン押下時に呼ばれる関数：reset()

・時間を計測する関数（再帰関数）：measureTime()

デモ

【初心者】JavaScriptでおみくじの作り方【サンプル】

ボタンを押しておみくじを表示

ソースコード

解説

おみくじの結果の確率を設定

ソースコード

解説

ボタンを押しておみくじルーレットを表示

ソースコード

HTML

JavaScript

解説

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

文法

JavaScript サンプル

Vue.js サンプル

Canvas

JSON

アニメーション サンプル

IE対応

【サンプル】JavaScriptのオブジェクトからJSONデータに変換【JSON.stringify()】

構文

使い方

JSONの文字列データに変換

関数、または配列を指定して置き換え処理を実行

関数、または配列を指定して置き換え処理を実行

【サンプル】JSONデータをJavaScriptのオブジェクトに変換【JSON.parse()】

構文

アニメーションサンプル