JavaScript アーカイブ - 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 — 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で祝日対応のカレンダー作成【サンプル】

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】スクロール中にヘッダーを固定する方法【簡単・コピペ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 ~にゃんぶろぐ~ に最初に表示されました。


【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 アーカイブ - nyanblog ~にゃんぶろぐ~

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

JavaScript

解説

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

文法

JavaScript サンプル

Vue.js サンプル

Canvas

JSON

アニメーション サンプル

IE対応

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

構文

使い方

JSONの文字列データに変換

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

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

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

構文

使い方

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

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

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

はじめに

電卓の機能

HTML

電卓

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

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

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

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

JavaScript

デモ

最後に

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

はじめに

HTML

コード

電卓

HTML解説

CSS

JavaScript

コード

解説

・グローバル変数の定義

・HTML読み込み後

・Cボタンクリック

アニメーションサンプル

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

・日付チェック　checkDate関数

・当日判定　isToday関数

・祝日判定　isHoliday関数

・カレンダー表示　showProcess関数

・カレンダー作成　createProcess関数