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

QRコードベースのオンライン入退室管理システム

# Introduction
今回の騒動で，研究室内の入室人数を非接触で可視化するシステムが必要になったため，
Googleアカウントを持っていれば誰でもwebアプリが無料で作れちゃう，**Google Apps Script（GAS）**を使って簡単なwebアプリケーションを作成しました

サンプルは[こちら](https://script.google.com/a/keio.jp/macros/s/AKfycbyx5Se-VGLI4hXxTJzO7RqUC_OKMA9NX6KvQl4vnA/exec?p=index)をクリックして確認してください


### 特徴
* QRコードを読み込むだけで，入退室処理が可能
* 部屋内の人数をオンラインで管理することができる

### プログラミング言語
フロント；HTML, CSS,

30分刻みの時刻を動的生成

もっとカッコよくかけないものかね

“`javascript
array = Array.prototype.concat.apply(
[],
[…Array(24).keys()].map(v => {
return [
String(v).padStart(2, ‘0’) + ‘:’ + ’00’,
String(v).padStart(2, ‘0’) + ‘:’ + ’30’
];
})
);
console.log(array);
“`

“`javascript:実行結果
[
’00:00′, ’00:30′, ’01:00′, ’01:30′,
’02:00′, ’02:30′, ’03:00′, ’03:30′,
’04:00′, ’04:30′, ’05:00′, ’05:30′,
’06:00′, ’06:30′, ’07:00′, ’07:30′,
’08:00′, ’08:30′, ’09:00′, ’09:30′,
’10:00′, ’10:30′, ’11:00′, ’11

jQuery1系をWebpackerで流用した話

# 背景
新規開発プロジェクトにてデザインの一部を他アプリから流用したいリクエストがありました｡
そのアプリはjquery1系で動いていたため､そのまま流用しても後述の環境では動かず・・・｡
Chromeの開発者ツールによるデバッグで「$ is not defined」が頻発したりとだいぶハマったので備忘録として残します｡

局所的にjqueryを利用するため､アプリ内におけるグローバル化は実施しておりません｡

# 参考
以下の回答が大変参考になりました！

[Webpackでjqueryなどが認識されない](https://teratail.com/questions/161541)

# 環境
Rails: 6.0.2
Webpacker: 4.2.2
jQuery: 3.5.1
パッケージマネージャ: yarn

## 流用したコード(抜粋)

test.js

“`javascript
‘use strict’;

(function($){
// 各処理
var hoge = (function () {
var $fuga = $(‘viewのclass

new Promise(function(onFulfilled, onRejected))　のonFullfilledとonRejectedってなにもの？？

JSの勉強会をしていたときに
`new Promise(function(onFulfilled, onRejected))　のonFullfilledとonRejectedってなにもの？？`
となったので自分なりにまとめてみることにした

##### まず、なにが疑問なのか
Promiseのインスタンス生成のとき
非同期処理の内容を記述した関数を引数に指定する
こんな感じ

“`
new Promise(
function(onFulfilled, onRejected) {
/* 非同期の処理を記述 */
}
)
“`
これの`onFulfilled`, `onRejected`が何なのか・どういう関数なのかという話

##### onFulfilledとonRejected
onFulfilledとonRejectedの説明書きはされていて、以下のように書かれている

`onFulfilled`
処理が正常に終了し結果が得られた場合に実行させるもの
これが実行される時はプロミスはfulfilled(成功)の状態

`onRejected`
処理

JavaScriptの文字列操作（サンプル集でマスター）

# はじめに
JavaScriptの基本的な文字列操作をまとめました。

## テンプレートリテラル

基本は文字列を“` `テキスト` “`のように、バッククオートで囲むだけです。
エスケープ無しの改行や変数埋め込みができます。

“`javascript:テンプレートリテラルで改行

var a = `Java
Script`;

console.log(a);
// -> Java
// -> Script
“`

“`javascript:テンプレートリテラル内に変数埋め込み

var num = 10;
var str = `りんごを${num}個とみかんを${num – 5}個ください`; // ${}内に計算式をいれてもOK
console.log(str); // -> りんごを10個とみかんを5個ください
“`

エスケープはシングルクオートやダブルクオートのように、“` \ “`でOKです。

“`javascript:テンプレートリテラル内のエスケープ

var a = `Java\\Script`;
console.log(a); // ->

Javascript　初めてのGSAPアニメーションの使い方　その7　TimelineMaxのラベルと同期処理

前回の記事はこちら

[Javascript　初めてのGSAPアニメーションの使い方　その6　TweenMax.setとTimelineMaxプロパティ
](https://qiita.com/fumiya0414/items/09605bc01683e57efa76)

今回はTimelineMaxのラベルと同期処理について説明します。

htmlは以下です。CSSで配置と色は調整しています。

“`html

パネル 1 (.circle)

パネル 2 (.square)

Javascript　初めてのGSAPアニメーションの使い方　その6　TweenMax.setとTimelineMaxプロパティ

前回の記事はこちら
[Javascript　初めてのGSAPアニメーションの使い方　その5　staggerTo/staggerFrom](https://qiita.com/fumiya0414/items/38c86d9a4df253005218)

今回はTweenMax.setとTimelineMaxのプロパティーを
組み合わせたアニメーションについて説明します。

#TweenMax.set

今回使用するhtmlは以下です。
※CSSで配置調整と色付けしています。

“`html

パネル 5 (.oval)

“`

[](https://gyazo.com/dd1da46aaa37c27c9f24fcc97565a575)

PlayCanvasでTypeScriptを使うためのメモ(Webpack編)

#概要

[前回の記事](https://qiita.com/riafeed/items/3af6117be7a7ca38b461)でwebpackを使わず、無理やりコードを追加することでモジュール問題を解消しましたが、
今回は、そもそもああいったモジュール問題を解決するためにあるWebpackを利用したgulpタスクを作ります。

#Webpackの設定

ポイントとしては、PlayCanvasライブラリは実行時に別の形で(たぶんScriptタグで)読み込まれるため、externalで生成されるJavaScriptコードに組み込まないように設定しておく必要があります(そうしないと競合するのでたぶん動かない)

“`webpack.config.js
const path = require(“path”);
const glob = require(“glob”);

module.exports = {
mode: “development”,
//mode: ‘production’,
devtool: “”,
entry: glob.sync(“./src/*

PlayCanvasでTypeScriptを使うためのメモ(Webpack未使用編)

#概要

[前回の記事(準備編)](https://qiita.com/riafeed/items/d79615260c0cf3f47e92)でアセットをアップロードするための設定までやりましたが、今回はgulpを使ってトランスパイルからアップロードまで一括で行えるようにgulpタスクを作ります。

なぜgulpを使うのかというと、前回の記事にも書いた通り、[PlayCanvas用のgulpタスクが公開されている](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)からです。

#gulpfile.js

後述の問題のため、through2というgulp用のプラグインを使い、トランスパイル後のコードの先頭に2行ほどコードを書き加えるという泥臭い処理を行っています…(´・ω・`)

“`gulpfile.js
const gulp = require(“gulp”);
const playcanvas = require(“gulp-playcanvas”);
const pcOptions = require(“./

Javascript　初めてのGSAPアニメーションの使い方　その5　staggerTo/staggerFrom

前回の記事はこちら
[Javascript　初めてのGSAPアニメーションの使い方　その4　easing設定](https://qiita.com/fumiya0414/items/a0cc791c96f56472ca5a)

今回はstaggerFrom/staggerToについて説明します。

staggerは繰り返す複数の要素に対して連続したアニメーションを設定できます。

#staggerFrom

htmlは以下のように三角形を連続して表示させています。

“`html

パネル 4 (.triangle)

React Redux基礎の基礎/小さなカウンターアプリを作る流れ

#この記事で書くこと
UdemyのReact、Redux講座の基礎編を学んでおり、本当にReduxがややこしいので一旦基礎の基礎をまとめました。
環境構築のあたりや細かい用語の説明や調査は省き、ミニマムにコードの流れをまとめただけの記事です。
ほぼ頭の整理のためなのでいろいろ認識違ってるかもしれないです。。w。

最低限わかっておくべきprops、stateについては[こちら](https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50)が分かりやすかったです。
+と-ボタンで数字が増える、減るというだけの処理を書いてます。

#流れ

###【1】まず、アクションのタイプを書く。incrementかdecrementか。これをReducerへ渡す。

“`javascript:action/index.js
//あとでレデューサーでも使うので、constしておく。
export const INCREMENT = ‘INCREMENT’
export const DECREMENT = ‘DECREMENT’

//それぞれをア

PlayCanvasでTypeScriptを使うためのメモ(コーディング編)

#概要

せっかくTypeScriptでPlayCanvasをコーディングできるようになっても、
従来のPlayCanvasサンプルによくみられるプロトタイプベースのコーディングをしていたのでは意味がないので
(最近まで古いJavaScriptしかサポートしていなかったので致し方ないのですが…)

サンプルとして同じコードをクラスベースに書き換えたものを載せておきます。
TypeScriptではなく、ES2015(ES6)で作る際の参考にもなるかもしれません。

コードは新規登録したときに作成された「My First Project」のfollow.jsというコードをクラスベースに書き換えてみます。

#プロトタイプベース

“`javascript
var Follow = pc.createScript(‘follow’);

Follow.attributes.add(‘target’, {
type: ‘entity’,
title: ‘Target’,
description: ‘The Entity to follow’
});

Follow.a

[JavaScript] 正規表現の Firefox 限定問題の回避方法 (flags s)

# 概要

* JavaScript の正規表現で flags の一部にブラウザ依存があり、それの回避方法を説明します。

# Firefox で生じる問題

* 以下のコードは Google Chrome と Safari では動作しますが、Firefox では動作しません。

“`JavaScript
const str = `aaa
bbb
ccc`

str.match(/.{11}/s)
“`

* 正規表現の説明。
1. 正規表現中の `.` は、ディフォルトでは「改行以外の任意の一文字」にマッチします。
2. `/.{11}/` は「11文字の長さの文字列」にマッチします。
3. `/.{11}/s` の最後の `s` は正規表現の flags で、「正規表現中の `.` を、改行文字にもマッチさせる」と云う指定です。
4. `aaa … ccc` は、アルファベット9文字と `aaa` と `bbb` の後ろの改行を含めて11文字あります。

# 原因

* flags の `s` は比較的新しい仕様で、Firefox (v76

Javascript　初めてのGSAPアニメーションの使い方　その4　easing設定

前回の記事はこちら

[Javascript　初めてのGSAPアニメーションの使い方　その3　Timelinemax](https://qiita.com/fumiya0414/items/61e8b4dcd9f1fe218a07)

#easingの設定

今回はeasingのプロパティを設定していきます。
htmlは前回と同じです(CSSにて色付けしています)

“`html

パネル 1 (.circle)

パネル 2 (.square)

パネル

Javascript　初めてのGSAPアニメーションの使い方　その3　Timelinemax

前回の記事はこちら

[Javascript　初めてのGSAPアニメーションの使い方　その2　Tween.from/Jqueryとの併用](https://qiita.com/fumiya0414/items/c88c098d7a7d4dacbe45)

#Timelinemax

“`html

パネル 1 (.circle)

パネル 2 (.square)

パネル 3 (.rectangle)

Javascript　初めてのGSAPアニメーションの使い方　その2　Tween.from/Jqueryとの併用

前回の記事はこちら
[Javascript　初めてのGSAPアニメーションの使い方　その１　Tweenmax.toの使い方](https://qiita.com/fumiya0414/items/1e90093f8f047b41312a)

#Tween.from

Tween.fromでは指定したプロパティを起点に要素をアニメーションすることができます。

htmlとcssをを以下に追記します。

“`html

iTunesAPIを使ってiTunesメディアからリンクを見つけ出す

# 大まかな処理内容
## ショートカット側
1.テキストもしくはURLが渡される
→StoreIDが含んでいるかチェック、含んでいたらScriptableに渡す

“`
{
“how2”: “lookup”,
“id”: “< StoreID >”
}
“`
2.iTunesメディアが渡される
→タイトル名、アルバム名、アーティスト名、メディアタイプを取得してScriptableに渡す

“`
{
“how2”: “search”,
“title”: “< タイトル >“,
“album”: “< アルバム >“,
“artist”: “< アーティスト >“,
“mediatype”: “< メディアタイプ >”
}
“`
3.何も渡されない
→エラー通知
## Scriptable側
### how2 == lookup
`https://itunes.apple.com/lookup?id=&country=jp&lang=ja_jp`
にGETリクエスト。
json貰ったらスクリプトを終了して出力。終わ

stateを直接参照しないシンプルなVuexサイクル

# Vuexとは？
Vue.jsアプリケーションにおける状態管理パターンライブラリです。

コンポーネント間のデータや関数の受け渡しには、propsやemitを使いますが、Vuexは全てのコンポーネントのための集中型のStoreになります。
propsやemitだけでデータの受け渡しをするのは、バケツリレーに似ていて、vueファイルに何度も同じコードを書く必要があったり、無駄にロジックが発生します。

# Vueコンポーネント層とVuexはどう繋がるのか？
今回の記事のタイトルは**「stateを直接参照しないシンプルなVuexサイクル」**です。
Vueコンポーネント層からStore内のstateにアクセスするためには

– **store.state**や**mapState**を使ってstateを直接する方法
– **store.getters**や**mapGetters**を用いて、取得する方法

があります。

ただ、Stateの変更をどこからでも直接、自由に変更、取得可能だと、全コンポーネント共通で参照可能なStateの秩序を保つことが出来ません。
そのため、公式ドキュメ

【JavaScript】forEachを用いてDOM操作で作成した要素たちにイベントハンドラーをかける

##やりたいこと
①配列の中身である値をforEachで取り出し、値を反映させた\

要素を作成する。
②\

要素をクリックすると、値を反映した処理を行う

##詰まったポイント
①単純にli要素にaddEventListenerをかけても、それぞれの値を反映した処理をしてくれない

②親要素（\

）にイベントハンドラをかけても、それぞれの値を反映した処理をしてくれない

##実装
＜ポイント＞
forEachで要素を作成する時に、それぞれのaddEventListenerの処理も記述する！

例）
配列の中身をリストとして表示させる。
リストをクリックすると、表示されている値に応じて奇数か偶数か判定する。

“`javascript

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
const li = document.createElement(‘li’);
li.appendChild(number);

li.addEventListener(‘click’, (

Javascriptの復習（3）

# この記事について
これはJavascript初学者(現在progateで学習中)がアウトプットの場として書いている記事なので、間違いがあったらご指摘ください。また、Rubyを学習した後なのでRubyと比較して書いているかもしれないです。

# アロー関数
関数の名前と言うよりは書き方といったほうがしっくりくると思います。

“`script.js
//これが従来の書き方
const greet = function(){
console.log(“こんにちは”)
};

//”function()”を”()=>”と省略した書き方をアロー関数と言います。
const greet = ()=>{
console.log(“こんにちは”)
};

“`

# 引数
Rubyと同様に関数を呼び出した時に関数に渡す値のことです。同じ関数でも引数によって処理の結果が変わります。

“`script.js
//()の中に引数名を入れます。定数(値)の値が引数名に代入されます。
const greet = (name)=>{
console.log(`こんにちは${name}`)