JavaScript関連のことを調べてみた2020年05月04日

【Vue.js】イベントのバブリングを防ぐ方法

## はじめに
この記事ではVue.jsでイベントのバブリングを防ぐ方法についてまとめます。

## 結論
イベント修飾子である`.stop`を使用するとイベントのバブリングを防ぐことができます。

## そもそもイベントのバブリングって何？
**イベントが親要素に順に伝播していくこと**を**イベントのバブリング**と言います。
以下のようなコードで実験してみましょう。
リストの項目(`li`タグ)をクリックすると太字に、ゴミ箱のマーク(`i`タグ)をクリックすると打ち消し線が表示されるコードです。

“`html

• ポケモンのダメージ計算ツールを設計する

  特性 / アイテム / 天候 / 色々要素があり、愚直にif分すると死ぬので設計を考える

Firebase CloudStorageを使ってブログのサムネイルは画像を設定する【Vue.js】

# Cloud Storage
Firebaseの提供する機能の一つである、CloudStorageを利用します。
`Cloud Storage`は写真や動画など、ユーザーが作成したコンテンツを保管、提供します。
AWSのS3のように使用できます。

## Vue CLIアプリ作成
いつもどおり`Vue CLI`によりVueアプリを作成します。

“`
vue create firebase-app
“`

どうせ使うので`Router`と`Vuex`も入れておきましょう。

“`
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
“`

“`
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
❯◉ Vuex
◯ CSS Pre-processors
◉ Linter / Format

メニューの開閉を画面全体で行う

## 目次

– [完成形のDemo](#完成形のDemo)
– [解説（図解）](#解説（図解）)
– [リポジトリ](リポジトリ)
– [あとがき](あとがき)

## 完成形のDemo

|Before|After|
|——|—–|
|||
|https://github.com/taiki-fw/Qiita/tree/2ed5117ff03b09ea62b020bf21be5797995

【Amazon Connect】在宅コールセンター向けにCCP（発着信画面）をカスタマイズする

ここ最近は在宅コールセンターの気運が高まっていますが、
Amazon Connectを利用すれば１日で最低限のシステムを構築することが可能です。
[前回の記事](https://qiita.com/duplicate1984/items/e97c6acdd8d7932a7ee1)でAmazon Connectの構築から、コマンドラインからのアウトバウンドまでやってみましたが、コールセンターとして主に必要なのはインバウンドに対応したGUIです。
今回はこのCPPに簡易的にログインボタンの配置と、着信時にサブウインドウを開いて「着信しています」みたいな通知する機能を追加してみたいと思います。

イメージ画像↓

#CPPとは
Amazon Connectには[CPP（Contact Control Panel）](https://docs

Webpack を使って Quasar 入門

# はじめに

今回は **`Quasar CLI`** や **`Vue CLI`** を利用せずに **Quasar** を利用する方法について紹介します.

なお、**Vue.js** の導入までは **[前回の記事](https://qiita.com/Midoliy/items/a336a8f5d35cfe21ec00)** とまったく同じなため、そちらを参照してください.

# Quasar の導入

まずは **npm** を利用して **quasar** をインストールします.

“`powershell:powershell
npm i -D quasar
“`

次に **[Quasar UMD / Standalone](https://quasar.dev/start/umd)** の **Installation** の所で利用したいものを選択し, 出力されている **html** の **link** タグをコピーして, **index.html** にペーストします.

なお, 今回はデフォルト設定のまま利用しています.

![image.png](

【JavaScript】Object.keysとforEachを使ったプロパティ取得

#【JavaScript】Object.keysとforEachを使ったプロパティ取得

オブジェクトのプロパティを取得する方法をまとめました。
手順は2つ。

・Object.keysを使い、プロパティと値を取得
・forEachを使い、それぞれを表示

キャラクターの座標情報を格納する定数characterPositionがあったとして

const characterPosition = {
x: 100,
y: 200,
z: 9
};

定数keysにプロパティ（x,y,z）と値を格納、出力します。

const keys = Object.keys(characterPosition);
keys.forEach(key => {
console.log(`Key:${key} Value: ${characterPosition[key]}`);//テンプレートリテラル
});

console.logの結果は次の通りになりました。

Key:x Value:

[Angular] inputタグに指定したchangeイベントで再度同じファイルを選択してもイベントを検知する

inputタグにchangeイベントを指定し、ファイルの選択を検知してなにかするよくある処理です。
同じファイルを選択してもイベントの検知をしたい際の解決策となります。

## 同じファイルを選択してもイベント検知できない例

“`html:example.component.html

“`

“`js:example.component.ts
export class ExampleComponent {
changeFile($event: Readonly): void {
// 処理
}
}
“`
ファイル選択ダイアログでファイルを選択した後、同じファイルを選択してもchangeイベントは検知できません。

## 解決策

“`html:example.component.html

“`

“`js:ex

【JavaScript】スプレッド構文、分割代入を使ったオブジェクトの操作

#【JavaScript】スプレッド構文、分割代入を使ったオブジェクトの操作

##スプレッド構文
①「…」を記述することでオブジェクト内に場所を確保
②①のオブジェクトよりも前に代入するオブジェクトを記述
これによりオブジェクトの中にオブジェクトを追加できる。

例.色情報colorをプロパティに持つcharacterColorオブジェクト。

const characterColor = {
color:’red’
}

キャラクター座標を格納するcharacterPosition に
…characterColorと書き、characterColorの場所を作る。

const characterPosition = {

x: 100,
y: 200,
…characterColor//スプレッド構文

};

console.log(characterPosition);//{x: 100, y: 200, color: “red”}
colorプロパティとr

【JavaScript】配列とオブジェクトの違い

#【JavaScript】配列とオブジェクトの違い

##配列
複数の値(要素)を[]の中に入れ、参照したり、追加削除して利用する

let values = [1,2,3,4,5];
console.log(values[0]);//1

let cities = [‘Tokyo’,’Kyoto’,’Sapporo’,’Fukuoka’,’Udon’];
console.log(cities[1]);//Kyoto

初めに[]で器を作り、push()で末尾に追加して利用したり、初期化時に[]で上書きする使われ方が多い印象。
一時的な入れ物。

以下はRPGツクールMVのスイッチの初期化処理。
[]することでスイッチの情報を初期化(ALL off状態)している

Game_Switches.prototype.clear = function() {
this._data = [];
};

Game_Picture.prototype.tint内の色調(RGB)の初期化では0を入れている。

if (!thi

[JavaScript] nodeListから配列に変更する方法

querySelectorAll とかで、HTML要素を取り出した後に、配列プロトタイプに存在するメソッドを使用したい時ってありますよね。

でも、

querySelectorが取得するのは、配列ではなく、NodeListなのです。

でも配列の数々のメソッドは非常に便利なものなので、今回は

NodeList　→ Array

への変更方法を記述していきます。

## ① Array.from を使用する

const links = Array.from(document.querySelectorAll(“.mw-category a”));

## ② 配列リテラルを使用する

const links = […document.querySelectorAll(“.mw-category a”)];

配列リテラルの最初に…とコンマを三つ記述することで、全ての要素をincludeすることができるのです。

このコンマ三つのことは、スプレッド構文と言います。もっと詳しくは、、、
https://qiita.com/akisx/items/682a4283c1

数学病棟24時 第一話

#入院患者に対して一日40件検査する能力があることと、40名の患者が検査できる態勢が整っていることは違う
病棟の看護師は、病棟の患者全員を分担して受け持たねばならない。
病院のベッドで誰からも受け持たれない患者がいてはいけないのだ。

たとえば、
ある看護師は一日に手術2件、検査4件を受け持てる能力を持つ。
別の看護師は、一日に手術1件、検査8件を受け持てる能力を持つ。

病棟の看護師全員の手術、検査の受け持てる能力を合計したら、
手術10件、検査40件に対応可能だと考えられた。

しかし、実際はそうならない。

患者の病態に応じて、その患者を受け持てる能力を持った看護師が受け持つべきだから、検査と手術が両方ある患者だったり、どちらか片方、あるいはその日なにも予定のない患者がいたりして、そのような事情を考慮すると、実際の対応可能件数は違ってくる。

#患者を受け持つという概念
看護師はその日、診療の補助と療養上の世話を実施する。

自然数p, q, r, m, nをおく。

当該病棟に、看護師がp名いる。

患者がq名入院中だとする。

看護師1名あたりr名を受け持つ決まりだとする。

JavaScriptをすこーし勉強してみたので書き留める③

最低限の知識一応あるけど、復習も兼ねて書いてみることにするの巻その③

# 関数定義
### 定義

“`
function {関数名}({引数}) {
　　処理
}
“`

### 呼び出し

“`
関数名({引数})
“`

# 変数スコープ
### ローカル変数
– 関数内の変数定義は関数内でのみ見える。

“`
function showMessage() {
let message = “Hello, I’m JavaScript!”; // ローカル変数

alert( message );
}

showMessage(); // Hello, I’m JavaScript!

alert( message ); // <-- エラー! 変数は関数のローカルです ``` ### グローバル変数 - 関数はグローバル変数にアクセスすることができる - 関数はグローバル変数に対してフルアクセス権を持つ - グローバル変数の内容を変更することもできる ``` let userName = 'John'; function showMessage

Vue.jsテンプレート構文

#Vue.jsテンプレート構文

前回の記事はこちら
[Vue.jsで作るtodoアプリ](https://qiita.com/fumiya0414/items/8d22c23dc0bff63dcc02)

今回はVue.jsのテンプレート制御ディレクティブについてです。

##代表的なテンプレート制御ディレクティブ
v-once　初回だけバインディング
v-pre　要素とすべての子要素のコンパイルをスキップ
v-html　プレーンなhtmlを挿入
v-cloak　インスタンスの準備が終わると取り除かれる
v-text　マスタッシュ構文の代わりに使用

##v-onceディレクティブ（描画を１回に固定）
初回だけテキストバインディングを行うディレクティブです。

まずは以下のコードを書いてみます。

“`html:index/html

{{ message }}

Click