オブジェクトにプロパティを追加する方法

jquery.js

let data = {} //空のオブジェクトを定義
data['name'] = taro ;  //これでdataは{name:'taro'}になった

オブジェクトのプロパティを削除する方法

jquery.js

let data = {name:'太郎',age : 20}
delete data['age']; //data中のageを削除

はじめに

「色々な機械学習処理をブラウザ上で試せるサイトを作った」中で実装したモデルの解説の六回目です。

今回はOPTICSの実装について解説します。

デモはこちらから。（TaskをClusteringにして、ModelのOPTICSを選択）
実際のコードはoptics.jsにあります。

なお、可視化部分については一切触れません。

概説

OPTICSについては、Wikipediaの擬似コードをそのままコードに起こしただけとなります。

ただし、内部で優先度付きキューを使用する必要があるため、その実装も行っています。

優先度付きキュー

優先度付きキューの実装はシンプルで、以下の関数を用意します。

• push
  データを追加する。引数は値と優先度の二つ。
• move
  データの優先度を変更する。
• shift
  優先度の高いデータを取得する。

注意すべき点としては、優先度に距離を直接設定しているため、「優先度の値が小さい方が優先度が高い」ということです。

内部実装は、値と優先度のペアの配列を保持するようにしています。

コード

優先度付きキュー

class PriorityQueue {
    constructor(arr) {
        this._value = arr || []
    }

    get length() {
        return this._value.length;
    }

    _sort() {
        this._value.sort((a, b) => a[1] - b[1])
    }

    push(value, priority) {
        this._value.push([value, priority])
        this._sort()
    }

    move(value, priority) {
        for (let i = 0; i < this.length; i++) {
            if (this._value[i][0] === value) {
                this._value[i][1] = priority;
                this._sort()
                return
            }
        }
        this.push(value, priority)
    }

    shift() {
        const [value, priority] = this._value.shift();
        return value;
    }
}

OPTICS

class OPTICS {
    // https://en.wikipedia.org/wiki/OPTICS_algorithm
    constructor(eps = Infinity, minPts = 5, metric = 'euclid') {
        this._eps = eps;
        this._minPts = minPts;

        this._metric = metric
        switch (this._metric) {
        case 'euclid':
            this._d = (a, b) => Math.sqrt(a.reduce((s, v, i) => s + (v - b[i]) ** 2, 0));
            break
        case 'manhattan':
            this._d = (a, b) => a.reduce((s, v, i) => s + Math.abs(v - b[i]), 0)
            break
        case 'chebyshev':
            this._d = (a, b) => Math.max(...a.map((v, i) => Math.abs(v - b[i])))
            break;
        }
    }

    fit(datas) {
        const n = datas.length;
        const d = Array(n);
        for (let i = 0; i < n; d[i++] = Array(n));
        for (let i = 0; i < n; i++) {
            for (let j = 0; j < i; j++) {
                const v = this._d(datas[i], datas[j]);
                d[i][j] = d[j][i] = v;
            }
        }
        const getNeighbors = (i) => {
            const neighbors = [];
            for (let k = 0; k < n; k++) {
                if (d[i][k] < this._eps) neighbors.push(k);
            }
            return neighbors
        }
        const coreDist = (i) => {
            const neighbors = getNeighbors(i).map(k => d[i][k]);
            if (neighbors.length <= this._minPts) return null;
            neighbors.sort((a, b) => a - b);
            return neighbors[this._minPts];
        }
        const reachabilityDist = (o, i) => {
            const cd = coreDist(i);
            if (cd === null) return cd;
            return Math.max(cd, d[i][o])
        }

        const processed = Array(n).fill(false);
        const rd = Array(n).fill(null);
        const update = (n, p, seeds) => {
            const cd = coreDist(p);
            if (cd === null) return
            for (const o of n) {
                if (processed[o]) continue
                const nrd = Math.max(cd, d[p][o]);
                if (rd[o] === null) {
                    rd[o] = nrd;
                    seeds.push(o, nrd);
                } else if (nrd < rd[o]) {
                    rd[o] = nrd;
                    seeds.move(o, nrd)
                }
            }
        }

        this._core_distance = [];
        for (let p = 0; p < n; p++) {
            if (processed[p]) continue;
            const neighbors = getNeighbors(p);
            processed[p] = true;
            const cd = coreDist(p)
            this._core_distance.push([p, cd])
            if (cd !== null) {
                const seeds = new PriorityQueue()
                update(neighbors, p, seeds)
                while (seeds.length > 0) {
                    const q = seeds.shift();
                    const nd = getNeighbors(q);
                    processed[q] = true
                    const cdq = coreDist(q)
                    this._core_distance.push([q, cdq])
                    if (cdq !== null) {
                        update(nd, q, seeds);
                    }
                }
            }
        }
    }

    predict(threshold = 0.1) {
        let c = 0;
        const n = this._core_distance.length
        const clusters = Array(n)
        for (let i = 0; i < n; i++) {
            const [k, d] = this._core_distance[i]
            clusters[k] = d > threshold ? ++c : c;
        }
        return clusters
    }
}

はじめに

初めましてTutuと申します。
最近react-nativeの勉強を始めました。
その中でreact-navigation(5系)を使う機会があったので備忘録として残しておきたいと思います。

準備

react-navitaionをインストール
npm install @react-navigation/native

react-navigation-stackをインストール
npm install @react-navigation/stack

依存ライブラリをインストール(expoを使用)
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

環境

react-navigation-native ： 5.8.9
react-navigation-stack : 5.12.6

実装

遷移の設定

CreateStackNavigatorで遷移先登録のための初期化処理をします。(おまじないみたいなものなので気にしないで大丈夫です。)

初期化

const Stack = createStackNavigator();

ここで遷移先の登録と初期条件などを設定します。（今回はfunctionComponentで書いています）
例えばinitialRouteNameに設定した名前が最初の画面になったり、ヘッダーの情報をデフォルトで設定しておくことができます。

※詳細は公式をご覧ください。

画面登録

const RootStack = () => {
    return (
        <Stack.Navigator
            initialRouteName="Home"　//最初の画面
            screenOptions={{
                headerStyle: {
                    backgroundColor: "#265366",
                },
                headerTintColor: "#fff",
                headerTitleStyle: {
                    fontWeight: "bold",
                },
            }}>
            <Stack.Screen name="Home" component={MemoListScreen} />
            <Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
        </Stack.Navigator>
    );
};

最後にNavigationContainerでラップし、App.jsに登録することで設定したコンポーネントでreact-navigationを使うことができるようにします。

遷移画面の管理

export default function App() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
}

App.js(全体)

import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import MemoDetailScreen from "./src/screens/MemoDetailScreen";
import MemoListScreen from "./src/screens/MemoListScreen";

//createStackNavigatorを初期化
const Stack = createStackNavigator();

//遷移画面の登録
const RootStack = () => {
    return (
        <Stack.Navigator
            initialRouteName="Home"　//最初の画面
            screenOptions={{
                headerStyle: {
                    backgroundColor: "#265366",
                },
                headerTintColor: "#fff",
                headerTitleStyle: {
                    fontWeight: "bold",
                },
            }}>
            <Stack.Screen name="Home" component={MemoListScreen} />
            <Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
        </Stack.Navigator>
    );
};

//NavigationContainerで囲む必要があるためfunctionalコンポーネントを使用
export default function App() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
}

遷移方法

遷移させたい処理に以下を記述することで遷移が可能になります。
（今回はボタンを押した際に遷移する処理としました。）

data.navigation.navigate("MemoDetail");　

遷移方法

import React from "react";
import {StyleSheet, View, Text} from "react-native";
import MemoList from "../components/MemoList";
import CircleButton from "../elements/CircleButton";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%",
    },
});

const MemoListScreen = (data) => (
    <View style={styles.container}>
　　　　//別のコンポーネントにnavigationの情報を渡している(今回は関係なし)
        <MemoList navigation={data.navigation}/>　
        <CircleButton
            name="plus"
            onPress={() => {
                data.navigation.navigate("MemoDetail");　//遷移先
            }}
        />
    </View>
);

export default MemoListScreen;

最後に

今回react-navigationを実装するにあたり5系かつfunction Component(Const)を利用した情報が少なかったため、備忘録として残しておきました。
また、初学者のため間違っている等ありましたらご指摘いただけるとありがたいです。

参考文献

• 公式

はじめに

WebGL、できるようになるとかっこいいですが、なかなか理解しづらいですよね。
私もまだ初心者ですが、最初の入門としてこのような記事があればよかったなあと思いながら
備忘録も兼ねて概念の記事を書いてみることにしました。
ソースコードは出てきません。

WebGL

WebGLって何？

WebGLはブラウザからJavaScriptを使用してGPUに命令を出し、結果をCanvasエレメントに描画することができます。
GPUはGraphics Processing Unitの略で、画面上にグラフィックを描画する処理を行うユニットです。
GPUの持つ強い処理能力をブラウザで活用することで、ブラウザで3DCGのような高負荷のグラフィックを表示させちゃおうというのがWebGLです。

GLSL

GLSLは"OpenGL Shader Language"の略で、シェーダと呼ばれたりします。
名前にもOpenGLとあるように、OpenGL上で使われている言語です。
OpenGLとは、

クロノス・グループ が策定している、グラフィックスハードウェア向けの2次元/3次元コンピュータグラフィックスライブラリである。

というもので、
WebGLはこのモバイル版であるOpenGL ESから派生しているためGLSLを使用することができます。
WebGLでは、GLSLを使用して絵を描いていくことになります。
（GLSLはGPUの上で動くプログラムという認識で大丈夫だと思います。）

どうやって絵を描いていくの？

WebGLには
「丸を描いてください」「四角を描いてください」などの命令は存在しません。
基本的にできることは

1. 頂点をどのように配置するのか
2. どのように色を塗るのか

です。たとえば四角を描きたい場合、

1. ４つの頂点を打つ
2. 頂点で囲まれた中を塗りつぶす。

円を描きたい場合は

1. 円の形に点を並べる
2. 囲まれた中を塗りつぶす

といった具合です。打った点の数が少なければカクカクした円になりますね。

「頂点をどのように配置するのか」はVertex Shader、
「どのように色を塗るのか」はFragment Shaderで行います。
ちなみに、必ずVertex Shader -> Fragment Shaderの順で実行されます。

Vertex Shader

Vertex Shaderは頂点シェーダとも呼ばれます。
このシェーダーでは頂点の位置を動かす作業を行います。
「位置を動かす」のが仕事ということで、頂点の基本的な情報（言うなれば元データ）はJavaScriptで生成します。

（例）
三角形を作りたい！しかも回転させたいかも！

JavaScript: 点が３つ必要だな、点の座標はコレとコレとコレだな
↓
JavaScript: 座標データ送信！
↓
VertexShader: 座標データうけとった！え、三角形を回転させたい？じゃあこっちで座標動かして回転させとくで！

という感じです。
たとえば上記の三角形を回転する処理をVertex Shaderで行う場合、
三角形には3つの頂点が存在し、それぞれの頂点の位置を移動させる必要があります。
つまり頂点の移動処理を3回行う＝頂点の個数分VertexShaderの処理が発生します。

Fragment Shader

Fragment Shaderはピクセルシェーダとも言われます。
このシェーダーでは受け取った頂点によって作られた図形を
どのように塗るのか決定します。

CGは最終的には必ず画面に表示されます。
画面にはピクセルが存在し、そのピクセル１つ１つに色がつくことで描画されるわけです。
このピクセル1つ1つに対し、何色になるべきかを計算するのがFragment Shaderの仕事です。
つまり描画範囲に存在するピクセルの個数回実行されるため、
描画範囲が広大であったり、画面が高画質であったりすると実行回数が増える＝負荷が増える
ことになります。

流れをざっくりと図で

ざっくりですがこんな感じです。
本当はブレンディングなど、もっといろいろな処理が存在します。

なにやら壁がありますね、壁については次の項で解説します。

CPUとGPUの壁

CPUとGPUはユニットがそもそも違います。
メモリ空間も別のものになるため、相互でシームレスなやりとりをすることはできません。
GPUで計算を行うためには
CPU側で値をGPUで扱える形式に変換し、値を送り込む処理が必要になります。
処理はざっくりとこんな感じ。

その1: shaderの作成

GLSLを一生懸命に記述しても、それはCPU上ではただの文字列です。
GPUに送ることで初めて動作します。
したがってまずはWebGL APIを使用しGPU上で使用できる形にコンパイルする必要があります。

その2: programの作成

vertex shader, fragment shaderがそれぞれコンパイルできたら、次はその二つをつなげてprogramを作成します。
このprogramがGPUで動作するプログラムになると捉えてよいと思います。
このプログラムは1度作ればOKなので、最初の初期化として生成します。

その3: データの変換

頂点座標を入れた配列など、JavaScript上で取り扱っていた頂点毎のデータは、
GPUで使用できるように変換する必要があります。
これをVertex Buffer Object、略してVBOと言います。
頂点毎のデータとは座標のような、頂点ごとに異なる必要があるデータのことです。
例えば頂点毎に違う座標、違う色にしたい場合などは座標のVBO, 色のVBOというように、
属性毎にVBOを作成します。

その4:　ロケーションの取得

あとは描画に必要なデータをprogram（GPUで動作するプログラム）へ送ってしまうだけです。
しかし、C言語などでいうポインタのような、送り込む先を指定しなければなりません。
これをロケーションと言います。

「vertex shaderのこの変数に座標の値を入れたいのかい？
じゃあこの変数の在り処（アドレス）を教えるね、その場所にデータを入れればここにちゃんとデータが入るよ」

というイメージです。

ちなみに図中のAttribute変数は
頂点毎に異なる変数のこと（頂点座標や色の指定など）

Uniform変数は
どの頂点、どのピクセルでも等しいグローバルな値(時間、マウス座標など)のことです。

その5: shaderへ値の送信

送り込む先のロケーション（アドレス）を教えてもらったので、これでようやく送信ができます。
送信が完了したら描画命令を発行しましょう。GPUでの処理が行われます。

番外編: ループ処理

もしアニメーションなどを行う際にJavaScript側のデータを更新するときは

1. JavaScriptの元データ書き換え
2. VBOの再生成
3. programへデータ送信

を毎度やる必要があります。

pure webGLの処理

これらの処理を一生懸命に記述していく必要があります。
詳しい処理内容はDoxasさんのwgldをご覧ください。
ものすごく詳しく描いてあります。
WebGL 開発支援サイト wgld.org

おわりに

WebGLは初期セットアップを行うだけでも理解が難しく、大変苦しみました。
概念的なところを、とてもざっくりとしか書いていませんが、
私はこのような大きい流れから把握して少しずつ理解ができました。
もし同じような方がいれば、少しでも参考になればと思っています。

この記事について

JavaScriptもろくに書けないにも関わらずいきなり、Vueをバリバリ使った案件にぶち込まれて、はや半年。最初に理解に苦しんだのが"v-for"。
今ではv-forにはかなりお世話になっているが、最初のうちはもの凄く苦しんだ。
何せfor文すら書けなかったのだから無理もない。

そもそもv-for とは？？

まずVue.jsを触りはじめたときは、ディレクティブすら意味が分からなかった。
よくもまあそんな状態で初めたものである。

簡単にいうとディレティブとは、Html側でJavaScriptっぽいことができるように、
Vue.Jsで用意されている便利な部品のこと　だと私は思っている。
Vueにはいろんなディレクティブが用意されている。それらを駆使することによって、
ScriptからHtmlへのアクセス（逆もしかり）が非常に簡単になるというのがVue.Jsの
本質かと思う。

それではv-for は何かというと
公式サイトによると

v-for で配列に要素をマッピングする
配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです:

半年前のど素人の私なら、完結に書かれすぎてさっぱり分からなかった。
今見返すと実に完結に書かれてある。(笑)
当然、初学者にはわかるはずもない(笑)私だけだったりして

私なりの見解だが、ある配列の値を表示するために、v-forというVueが用意した
便利な部品を使って、item in itemsみたいな書き方でその値を取得して、itemで反復して配列を呼び出すことができるというのがv-forだ。
自分で書いていてもよくわからなくなってきたので、JavaScriptのforEachを考えればしっくりくるのではないか？

試しにforEachを使って配列の値をconsole.logで表示させるコードを下記に示したい。
items という配列をitemという引数を使って、一つずつ描画していることがわかる。
Vue.jsではv-forを使うことで、いちいちforEachなんて書かなくて済むのだ。

JavaScript

const items = ['item1', 'item2', 'item3']
const copyItemsArray = []
items.forEach((item) => {
  copyItemsArray.push(item)
　console.log(item)
})
//結果は
//item1
//item2
//item3
//と表示される。

もう少しforEachにお付き合いいただきたい。
今度は連想配列で考えてみる。

JavaScript

const objectItems = [
  {name:"太郎",age:22},
  {name:"治郎",age:20},
  {name:"三郎",age:18}
]
const objectArray = []
objectItems.forEach((item)=>{
  objectArray.push(item)
  console.log(`名前：${item.name}/年齢：${item.age}`)
})
//名前：太郎/年齢：22
//名前：治郎/年齢：20
//名前：三郎/年齢：18

forEachを知って、かなりしっくりきた。
というかv-forもforEachもかわらんやん(笑)

さて、ここで、v-for を使用して描画とやらをやってみる。
CSSは苦手なので、Vuetifyを使用している。
それと普段のプロジェクトで、TypeScriptを触っている都合上
私が一番慣れている書き方で書かせていただいた。

Vue.js

<template>
    <div>
        <ul>
            <li v-for="(brother,i) in brothers" :key="i">名前：{{brother.name}}/年齢：{{brother.age}}</li>
        </ul>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

interface Person {
    name:string
    age:number
}
@Component({})
export default class extends Vue{
    brothers:Person[] = [
        {name:"太郎",age:22},
        {name:"治郎",age:20},
        {name:"三郎",age:18}
    ]
}
</script>

↑こんな感じで描画される。
v-forを使用するときは、注意点としてkey要素というものをつけなければならない。
大抵の場合はオブジェクトの中にidなんかがあってそれをkey要素として返してあげるのだが、とくにid指定がないときなんかはindexで返してあげるのがベター。
その場合は、v-forのitemの2番目の引数としてindexを取ることができるので、
(item,i)のように書いてあげる。
このv-for のkeyの動作については下記のサイトに非常に詳しく載っているのでぜひ参考にしてみてほしい。
参考: 【徹底解説】これを見ればわかるvue.jsのv-forのkeyの動作

さて、せっかくUI frameworkとしてVuetify.jsを使用しているのだから、
何かコンポーネントを使用して描画してみよう。
今回はv-simple-tableというコンポーネントを使用。
その名の通り、めっちゃシンプルなコンポーネント。

Vue.js

<template>
    <div>
        <ul>
            <li v-for="(brother,i) in brothers" :key="i">名前：{{brother.name}}/年齢：{{brother.age}}</li>
        </ul>
        <v-simple-table>
            <template v-slot:default>
                <thead>
                    <tr>
                        <th>名前</th>
                        <th>年齢</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="(brother,i) in brothers" :key="i">
                        <td>{{brother.name}}</td>
                        <td>{{brother.age}}</td>    
                    </tr>
                </tbody>
            </template>
        </v-simple-table>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

interface Person {
    name:string
    age:number
}
@Component({})
export default class extends Vue{
    brothers:Person[] = [
        {name:"太郎",age:22},
        {name:"治郎",age:20},
        {name:"三郎",age:18}
    ]
}
</script>

↑こんな感じで描画される。

v-forなんて簡単

Vue.Jsなんて所詮はJavaScriptのフレームワーク(笑)って言ってみたかったのだが、
半年前の自分にいってやりたい。
まだまだひよっこエンジニアの私だが、最初は公式ページを見てもちんぷんかんぷん。
何度辞めたいと思ったことか、、、、、、

Vue.Jsは慣れれば非常に便利なツールだと思っている。
なんなら私なんて、innerHTML とか書けない(笑)
恥ずかしくて言えないが、、、、、
それはいいか悪いのか別として、非常に楽なツールである。
最初、Vueの勉強を始めたときは、”学習コストが低いのがVue。だから、初心者向きなんだ”って書いていたサイトを見て、俺は全く理解できていないから、もう辞めた方がいいのか、、、なんて本気で悩んだこともある。

勉強する順序が悪かっただけだった。
これからもVue.Jsを使ってガンガン開発に挑戦してみようと思っている。

最後まで読んでくださった方ありがとうございました。

Vuexの概念が何となく理解出来たので、ついでに使い方もまとめておく。
自社の開発においても大量のコンポーネントを扱わなければならない中でVuexが必須となっているので、勉強し直した。

Vuex（ビューエックス）とは何か？

Vuex とは何か？ | Vuex

ググったら一番最初に出てくるこれを見てもイマイチ分からない人に向け、
vue.jsの基本は一応分かっている前提で説明すると、

沢山のコンポーネントがあるそれなりの規模のプロジェクトがあったとする。
さて、この図でComponentAのデータをComponentCやComponentEに渡すにはどうしたらいいだろうか。

親コンポーネントから子コンポーネントへ、
また子コンポーネントから親コンポーネントへのデータのやりとりが出来るのはわかると思う。でも、孫から子へ、それを親に渡し、さらにそれを子から孫へ、みたいなやりとりは手間である。（$emitして$emitしてpropsしてpropsして見たいにやるのはスマートではない。）

そこでVuexを使うと、グローバル変数のような感じでデータを扱うことが出来るようになると言う感じ（概念）。と言われれば分かり易いのではないだろうか。これで深いコンポーネント同士でのやりとりが出来るようになる。

導入

Vuexのパッケージをインストールする。
vue cliでプロジェクト作成時にセットでインストール済みである場合は必要ない。

npm install vuex

vuex用のファイルを新たに設ける。
ファイル名は何でも良いのだが、store.jsとするのが一般的。

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex); // vuexをvue全体で使用する宣言

export default new Vuex.Store({ // main.jsで読み込めるようにする
　// 以下で定義したものはどのコンポーネントでも使用出来る
  state: { 
    number: 2
  }
})

あとはmain.jsで読み込むだけ。

main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store' // store.jsをインポート

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store, // store: store,
  components: { App },
  template: '<App/>',
});

stateを使ってみる

stateとは？

文字通りstoreの状態をプロパティーとして返すと言う位置付けになろうか。前述の通り、ここで定義した内容はグローバルに取得する事が出来るようになる。

store.js

export default new Vuex.Store({ // main.jsで読み込めるようにする
　// 以下で定義したものはどのコンポーネントでも使用出来る
  state: { 
    number: 2
  }
})

ComponentAで表示する変数を

ComponentA.vue

<template>
  <p>{{ number }}</p>
</template>

<script>
  export default {
    computed: {
      number() {
        // $storeとする事でどこからでも呼べるようになる
        return this.$store.state.number;
      }
    }
  }
</script>

ComponentEから操作出来る、みたいな事が出来る。

ComponentE.vue

<template>
  <b-button @click="increment">+1</b-button>
</template>

<script>
  export default {
    methods: {
      increment(){
        // $storeとする事でどこからでも呼べるようになる
        this.$store.state.number++;
      },
    },
  }
</script>

gettersを使ってみる

gettersとは？

storeの状態を算出したい時にgettersを定義する事で、算出プロパティーとして使う事が出来る感じ。

store.js

export default new Vuex.Store({ // インスタンスをmain.jsで読み込めるようにする
  state: { // 状態を全体で使用出来るようにする
    number: 0
  },
  getters: {
    counter: state => state.number++, 
  }
})

こんな感じでVuexの中でcomputedのような事が出来る。

ComponentA.vue

<template>
  <p>{{ count }}</p>
</template>

<script>
  export default {
    computed: {
      count() {
        return this.$store.getters.counter; // $store.gettersで呼ぶ
      }
    }
  }
</script>

まぁこの程度であればgettersを使う意味はないのだけど、
よりコンポーネントが複雑化してきた時に真価を発揮するものなのでそこはご容赦頂きたい。

複数のgettersを扱う時にもっと便利に使う事が出来るのが、mapGettersである。

store.js

export default new Vuex.Store({ 
  state: { 
    number: 2
  },
  // 複数定義しているものがあるとする
  getters: {
    doubleCount: state => state.number * 2,
    tripleCount: state => state.number * 3
  }
})

こう書くことも出来るが、

ComponentA.vue

<script>
  export default {
    computed: {
      doubleCount() {
        return this.$store.getters.doubleCount;
      },
      tripleCount() {
        return this.$store.getters.tripleCount;
      },
    }
  }
</script>

mapGettersを用いると一気に整理される。

ComponentA.vue

<script>
import { mapGetters } from "vuex"; // mapGettersをインポートする

  export default {
    // 配列
    computed: mapGetters(["doubleCount", "tripleCount"]),
  }
</script>

配列ではなく、オブジェクトでも良い。

ComponentA.vue

<script>
import { mapGetters } from "vuex"; // mapGettersをインポートする

  export default {
    // オブジェクトでも良い
    computed: mapGetters({
      doubleCount: "doubleCount",
      tripleCount: "tripleCount"
    }),
  }
</script>

必要なgettersだけを取ってくる事が出来るので是非使いこなしたい。
ちなみにこのままだと、computedにmapGetters以外に記述する事が出来ないので、普段使いでは

ComponentA.vue

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // スプレッド演算子（object spread operator）を使って組み込む
    ...mapGetters([
      'doubleCount',
      'tripleCount',
    ])
  }
}
</script>

という感じで使うっぽい。

mutationsを使ってみる

mutationsとは？

stateを使う事でコンポーネント間のデータのやりとりは簡単にはなるけれど、
何でもかんでも自由にやりとりをさせ過ぎると、逆に分かりづらくなったり、追跡、管理が煩雑になる。そこで使用するのがmutationsという事のようだ。

store.js

export default new Vuex.Store({
  state: {
    number: 2
  },
  mutations: {
    increment(state, str) { // 第一引数にstateをとり、実際の変更を記述する
      state.number += str;
    }
  }
})

呼び出す側ではstore.commitでmutationsを指定する。

ComponentA.vue

<script>
methods: {
  increment(){
    this.$store.commit('increment', 2);
  },
},
<script>

stateをあっちこっちで変更する事は思わぬバグを発生させる可能性があるから、
mutationsで扱いましょうという感じだろうか。

また、mutationsにもmapMutationsというヘルパーが存在する。

ComponentA.vue

<script>
import { mapMutations } from "vuex"; // mapMutationsをインポートする

  export default {
    methods: {
      // mapGettersと同じようにスプレット演算子で書ける
      ...mapMutations(["increment","decrement"]),
    },
  }
</script>

ちなみにmutationsは同期的でなければならないというルールがある。
では非同期を扱うにはどうしたらいいのか。

actionを使ってみる

actionとは？

actionはmutationsと異なり、任意の非同期処理を含む事が出来る。
なので、setTimeoutで一定時間後に特定の処理を行うという記述も可能となっている。

store.js

export default new Vuex.Store({ 
  state: { 
    count: 2
  },
  actions: {
    increment({ commit },number) {
      commit('increment', number);
    }
  }
})

store内のactionsでcommitし、コンポーネントでdispatchする。

ComponentA.vue

<script>
methods: {
  increment() {
    this.$store.dispatch('increment', 2); 
  }
},
</script>

非同期でもOK

store.js

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

最後はmapActionsヘルパー、これまで出てきたmapと同じ感覚で使用出来る。

ComponentA.vue

<script>
import { mapActions } from "vuex";

  export default {
    methods: {
      // スプレット演算子で書ける
      ...mapActions(["increment","decrement"]),
    }
</script>

まとめると・・・

・stateでvuexの状態を管理
・gettersでstateの変更を算出
・mutationsでstateの状態を変更、commitで呼び出される
・actionで同期、非同期なデータの処理、必要に応じてcommitする

これらの基本に基づいて、導入するプロジェクト毎にどうVuexを使っていくかを取捨選択していく形になるという事が分かった。

はじめに

※ JavaScriptが書ける人には不要な記事です。

ウェブサイトにおいてスライダーやモーダル、その他タブ等を実装するとき、そのページ上に複数存在する場合の記述方法の解説です。

今回はひとつのページ内で、スライダー（Swiper）を複数設置するシチュエーションがあったとします。

ググるとよく出てくるやり方

まったく同じスライダーがページ内に3個あったとします。ググるとよく出てくる情報が以下のようなやり方です。

<div class="js-swiper-1"></div>
<div class="js-swiper-2"></div>
<div class="js-swiper-3"></div>

const swiper1 = new Swiper('.js-swiper-1', {});
const swiper2 = new Swiper('.js-swiper-2', {});
const swiper3 = new Swiper('.js-swiper-3', {});

スライダーが100個あったら100個同じことを書くのでしょうか？いえ、無理です・・・。

NodeList.forEach を使用する方法

結論から書きます。

<div class="js-swiper"></div>
<div class="js-swiper"></div>
<div class="js-swiper"></div>

const sliders = document.querySelectorAll('.js-swiper');

sliders.forEach((slider) => {
  const swiper = new Swiper(slider, {});
});

解説

今回のものを実装するのに必要な知識は以下です。

• Document.querySelectorAll()
• NodeList
• NodeList.prototype.forEach

STEP1: Document.querySelectorAll() でNodeListを作る

まずは対象の要素をDocument.querySelectorAll()を使用してNodeListを作成します。

const sliders = document.querySelectorAll('.js-swiper');

これにより、変数slidersにはNodeListが入ります。

STEP2: NodeList.forEach()をまわす

NodeListにはNodeList.forEach()というメソッドがあります。
要はNodeListに入っている要素の数だけ順番に処理が走ると言うことです。

そして、NodeList.forEach()のコールバック関数内で、各スライダーの処理を走らせます。

sliders.forEach((slider) => {});

// アロー関数ではなく従来の関数で書くと...
sliders.forEach(function(slider) {});

STEP3: コールバック関数内に処理を書く

コールバック関数内で、スライダーの処理を定義します。

sliders.forEach((slider) => {
  const swiper = new Swiper(slider, {});
});

DONE

これでスライダーの数が何個あったとしても、記述を追加する必要はありません。
もちろんコールバック関数の中身は自由に書けるので、例えば対象がアコーディオンだったとしても問題無く実装できます。

アコーディオンの実装例

<dl class="faq">
  <div class="faq__item js-accordion">
    <dt class="faq__question js-accordion-toggle"></dt>
    <dd class="faq__answer js-accordion-content"></dd>
  </div>
  <div class="faq__item js-accordion">
    <dt class="faq__question js-accordion-toggle"></dt>
    <dd class="faq__answer js-accordion-content is-hidden"></dd>
  </div>
  <div class="faq__item js-accordion">
    <dt class="faq__question js-accordion-toggle"></dt>
    <dd class="faq__answer js-accordion-content is-hidden"></dd>
  </div>
</dl>

const accordions = document.querySelectorAll('.js-accordion');

accordions.forEach((accordion) => {
  const button = accordion.querySelector('.js-accordion-toggle');
  const content = accordion.querySelector('.js-accordion-content');

  button.addEventListener('click', () => {
    content.classList.toggle('is-hidden');
  });
});

注意

本例でのJavaScriptはIE11では動作しないので、別途対応が必要です。

• アロー関数
• Nodelist.prototype.forEach()

筆者メモ

この記事は、もともとNoteで公開していた内容と完全に同じ内容です。
元の記事：https://note.com/hadhad/n/nad8548c4943d

もともと100円で売ってたんですが、誰も買わなかったので無料にしたところ、
twitterでプチバズったのにNoteのフォロワーがまったく増えなかったので、
もうQiitaに自己転載して、もっといろんな人が見れるようにしました。

記事に記載したプラグインやソースコードはWTFPLライセンスで配布します。勝手にして、どうぞ。

はじめに

RPGアツマールのコメント機能は、ニコニコ動画と違って投稿したIDが公開されていない。
そのため、コメントした人全員が184コメントをしているような扱いになっている。
また、ゲーム側でコメントのNG機能も用意されてはいるが、ID指定ではなく「キーワード」での指定となっている。

その為に、RPGアツマールでは、ゲームをコメントで荒らされた場合、
ユーザー単位でNGしたいのに、できないという仕様になっている。

Twitter等で「アツマール コメント NG」とかで検索してみると、
ユーザーID特定機能が欲しいという人もチラホラ存在する。

だが僕は思う。
運営を頼る以前に、自分で作れるハズだ
と。

かくゆう自分も、この問題に直面していた。
気に入らないコメントは削除すればよいのだが、
コメントの削除は運営の人力で申請制のため時間がかかるし、
消せたとしても粘着質なユーザーは
すぐに同じようなコメントを書き込むからだ。

そこで僕は思った。
「コメントした人のIDを特定して、
　指定IDの人をBANできるプラグインを作ったら面白そうだ」
と。

結果、僕はこのプラグインの開発に成功した。

どうやったのかを次に記す。

コメントを個人特定する仕組み

予め断っておくが、この方法では、
既に書き込まれている過去のコメントからIDを特定することはできない。

今回の方法はあくまで、
「仕組みを取り入れた瞬間からのコメントが特定できる」
という話だ。

この仕組みを実現するために僕は、
「コメントを投稿する瞬間」に細工をすることにした。

用意するアツマールのAPIは次の通り。
・コメントAPI
・シグナルAPI

コメントAPIには、
「コメントを行った瞬間にコメント内容を取得できる」
関数が用意されている。

そしてシグナルAPIには
「100バイト以内の文章をユーザー情報付きで送信できる」
関数が用意されている。
またグローバルシグナルとして送信された情報は、
1000件までサーバーに記録される。

ここまで見て、察しが良い人はもう分かっただろう。

つまり、
１．コメントを行った瞬間に
２．ユーザー情報とコメントの内容をグローバルシグナルとして送信し
３．確認したいときにグローバルシグナルの中身を覗く
という順序を辿れば、コメントの個人特定が可能というわけだ。

さて、仕組みを理解できたところで、
さっそくこれをツクールMVプラグインにしてみよう！

コメントのユーザー情報を記録するプラグイン

このプラグインは、ツクールMVに適用するだけで効果を発揮する。
ソースコードは次の通り・・・

/*:
* @plugindesc 投稿されたコメントをグローバルシグナルに送信
* @author Had2Apps
* @help
* コメントが投稿されると同時に、グローバルシグナルに内容が送信されます。
* これにより、誰がどのコメントを行ったかを特定することができます。
*
* グローバルシグナルの一覧をコンソールに表示したい場合は、スクリプトで
* window.RPGAtsumaru.signal.getGlobalSignals().then(console.log)
* を呼び出してください。
*/
(function () {
 if (window.RPGAtsumaru === undefined) {
   console.warn("APIが読み込めません");
   return;
 }
 function shorten(text) {
   var chars = text.split("");
   var current = 0;
   var temp = "";
   for (i = 0; i < chars.length; i++) {
     var escapedChar = escape(chars[i]);
     current = escapedChar.length < 4 ? current + 1 : current + 2;
     if (current > 100) return temp;
     temp += text.charAt(i);
   }
   return text;
 }
 function sendCommentLog(res) {
   var comment = res.comment;
   var log = shorten(comment);
   window.RPGAtsumaru.experimental.signal.sendSignalToGlobal(log).then(() => {
     console.log("OK");
   });
 }
 window.RPGAtsumaru.comment.posted.subscribe(sendCommentLog);
})();

解説しよう。

ここで使用されているAPI関数は
・RPGAtsumaru.comment.posted.subscribe
・RPGAtsumaru.experimental.signal.sendSignalToGlobal
の２つだ。

※今は experimental. なしでも動くらしい。動かなかった場合は外してみたらいいんじゃないかな。

RPGAtsumaru.comment.posted.subscribe は、
引数にコールバック関数を渡してやることで、ユーザーがコメントを投稿した瞬間に、コメント内容を引数に渡した状態でコールバック関数が実行されるようになっている。
このプラグインでは、後者のAPI関数を使った処理をコールバック関数として指定した。

RPGAtsumaru.experimental.signal.sendSignalToGlobal は、
引数に100バイト以内の文字列を渡してやることで、その文字列とユーザー情報をRPGアツマールのサーバーに送信してくれる。
shorten 関数では、取得されたコメントが100バイトに収まるように調整している。

ちなみに、送信されたグローバルシグナルを確認したい場合は、
スクリプトで次の処理を書き込めばいい。

if (window.RPGAtsumaru !== undefined) {
  window.RPGAtsumaru.signal.getGlobalSignals().then(console.log)
}

この処理が実行されることで、
ブラウザのコンソール画面にグローバルシグナルの一覧が表示される。
これを見ればOKだ。

応用編：ユーザーIDのNG機能を実現する

ここまで読んだ人なら、ユーザーIDのNG機能を実装するのも、
そう難しくないはずだ。

ようは、上述のプラグインで取得したIDが一致するユーザーが
ゲームをプレイできないように細工すればいいのだ。

本記事では、実際にどのようにコードを書けばいいかは掲載しないが、
実現するためのヒントを以下に載せておこうと思う。

まず、NG機能を実装するのに使えそうな追加のAPIは次の通りだ。
・ユーザー情報取得API
・コメントAPI：シーン切り替え

まずユーザー情報取得APIは、
今プレイしているユーザーのIDなどを取得できるAPIだ。
これを使用することで、グローバルシグナルをいちいち送信しなくても
ユーザーIDを取得することができる。
なので、プラグインで取得した荒らしのユーザーIDと
このAPIの情報を照らし合わせて、処理を変えるようにすればいいのだ。

次にコメントのシーン切り替えAPIは、
コメント投稿先のシーン名を強制的に変更できるAPIだ。
これを応用することで、荒らしユーザーだけ
荒らし専用のシーンに強制的に投稿させる仕組みを作り、
他のユーザーからその荒らしのコメントを見れなくすることができる。

つまり処理の流れとしては、こうなればいいわけだ。
１．プラグインから荒らしのユーザーIDを予め指定しておく
２．ユーザー情報取得APIでプレイヤーのIDを調べ、荒らしのIDと照合
３．一致する場合、コメントのシーンを荒らし専用シーンに強制設定
４．ゲームをプレイ不能にする

先ほども書いた通り、
この記事ではそのプラグインをどのようにして
作るのかに関しては書かない。

もしプラグインを書いたことがない場合は、
勉強がてら作ってみることをおススメする。

これにて以上！

さいごに

（この部分はもともとのNote記事にはなかったことです）

この方法を使えば、荒らしコメントを書く輩のリストを作ることが可能なので、
荒らしユーザーリストを作者のみんなで共有すれば、
実質「NG共有機能」みたいなことができるはず。

特定のユーザーのプレイを禁止するようにできれば、荒らし撲滅できると思う。
わりと過激な考え方だけど。

ちなみにこの技術は、すでに個人的にも試験運用していて、
悪質コメントをした人のハンドルネームとアカウント名を特定し、その人の投稿した動画や、10年前のMMORPG掲示板の黒歴史な書き込みを特定することに成功した。

今は、その人が次に来た時に「特別なイベント」を開く罠を仕掛けて、様子を見てるところだったりする。
そのゲーム： https://game.nicovideo.jp/atsumaru/games/gm14221

この記事で書いた技術は、あくまで良いことに使ってほしいです。
悪用しようと思えばできちゃうと思うんだよね。
絶対に、人の迷惑になるようなことには使わないこと！

そして自分がターゲットになっても困らないように、身に振り方には気を付けよう！

火曜日から本格的に最終課題の学習にはいったのですが、火曜日から日曜日までで６割ぐらいは進めた（？）と思います。この調子ですすめて２２日までは必要な作業すべてを終わらせたいですね。それが終われば自分のポートフォリオを進めれる、、、ぐへへへ（変人感）
復習に入っていきたいところですがその前に、最終課題とはなんなのか、どんなことをやるのか少し話していきたいと思います。最終課題ではメルカリのようなフリマアプリの作成を通してサーバーサイドの実装を行っていきます。フロントサイドに関してはすでに用意されているのでやらなくても大丈夫です。この最終課題と今までの学習内容の違いはなにかというと、目標を達成（機能実装）するための手順を自分で考えないといけないところです。今までのカリキュラムだと、テキストに沿って決められたことをこなしていけばよかったのですが、最終課題においては機能実装を行うためにどのような工程が必要か自分で道筋を立てながら学習していくことになります。
例えば、ユーザー登録機能を作るならカラムの洗い出しとDB作成、必要なアクションの定義などなどがあります。最終課題以前だとカリキュラムに書かれたそれらの項目をこなしていくことで実装できるのですが、今回だと実装のための過程が明示されていないのでプロセスを考えないといけないという難しさがあります。私は今の所は大丈夫ですが、終盤にどうなるかが心配です。（笑）
ではでは、今週の学習内容をざざっと振り返ろうかなと思います。

11/10~11/15までの進捗状況
・herokuへのデプロイ
・Basic認証の導入
・テーブル　read.meの作成
・ユーザー管理（登録　ログイン　ログアウト）機能の実装
・商品を出品機能の実装
・トップページに商品を表示する機能の実装

herokuへのデプロイについて
これと認証に関してはやることがそう多くないですね
heroku内にアプリケーション作成をして、mysqlを作成、アプリケーションの情報をgitからプッシュしてマイグレーションを実行することでデプロイが可能となります！

Basic認証について
Basic認証はauthenticate_or_request_with_http_basicメソッドを用いることでidとpasswordを要求することができます。ここで注意すべき点は、環境変数にidとpasswordを入れることです。コントローラーにそのまま設定してたらどちらもgithubで漏洩してしまうので。

テーブル設計　Read.meの作成
それぞれのテーブルに必要なカラムを洗い出します。難しいことはないですが、read.meのバー（|や-）を揃えるのがかなり面倒です

ユーザー管理機能の実装
deviseの導入と正規表現の導入がかなり苦戦しました。
passwordだと半角英数字混合６文字以上というのがあったり、半角カタカナ限定だったりと、、、あとちゃんと機能しているか確認のためテストコードを書くのですが、100行以上かくはめになりました。がんばったなぁ（）

商品を出品機能の実装
ここでは商品の状態や発送元、送料の負担などをプルダウン機能を用いて実装していくのですが、結構調べるのに時間がかかってしまいました。商品の値段に下限と上限があり、そのバリデーションをどうかけるのか全くわからなかったですね。自分のググり力が上がる食べ物があったらそれを主食にしたいです。

トップページに商品を表示する機能の実装
トップページに登録された商品が新しいものから上に表示されるように実装を行いました。
横並びにするのに試行錯誤して２時間ほどかかってしまいました。

初めまして。現在保育士をしていて、WEB系エンジニアに転職を考えているNOZOMIです。

学習を始めて１ヶ月が経とうとしています。
現在の私の学習状況と取り組みについてまとめておこうと思います。

ドットインストール

完了済み

• 実践！アプリ紹介ページを作ろう (全16回)
• 詳解HTML 基礎文法編 (全22回)
• はじめてのRuby (全9回)
• JavaScriptでモーダルウィンドウを作ろう (全8回)
• JavaScriptでタブメニューを作ろう (全10回)
• はじめてのPython (全9回)
• はじめてのJavaScript (全11回)
• 【試験運用中】はじめてのPHP [macOS版] (全12回)
• 【試験運用中】Dockerを導入しよう [macOS版] (全2回)
• はじめてのCSS (全15回)
• はじめてのHTML (全14回)

進行中

• 詳解CSS 基礎文法編 (全33回)
• CSSでチャット風のUIを作ってみよう (全7回)
• 詳解HTML フォーム部品編 (全8回)
• Ruby入門 (全26回)
• 詳解JavaScript 基礎文法編 (全26回)
• 詳解PHP 基礎文法編 (全34回)

かなりのスロースターターと自負しております・・・。徐々にエンジン全開にして行けるように頑張ります！！

雑食系サロン入会

YOUTUBEがきっかけで勝又さんの雑食系サロンに入会しました。かなりレベルの高い方がたくさんいらっしゃって、ポートフォリオも参考にさせていただいています。オフ会やもくもく会等参加したいと考えています。

MENTA

雑食系サロンでのYOUTUBEライブで、未経験者はメンターをつけてコードレビューをしてもらうべきとのお話を伺い、MENTAに登録し、chilldrainさんに５０００円でポートフォリオ作りのロードマップを作成していただいています。

企業探し

保育士の経験を活かして働いて行けるような、保育系システムの自社開発系企業に絞りました。

• エクシオジャパン


• 日本ソフト開発株式会社


• キッズコネクト株式会社

来年の４月入社を目指して、頑張ります！！

どうも。
今まで掲示板等々を学習がてら作成してきましたが、5ヶ月というスパンで焦り走りしてきた事で
「フワッとした理解」で「〇〇機能は〇〇で実装できるだろう」と何となく分かるものの、Google先生の力がなければこれ一つ自分で実装できない僕が、
一つ一つの細かな理解が疎かであることから、
これから基礎の基礎を深く理解するためにアウトプットの場としてQiitaに投稿していきます。

自身でGoogle先生を活用して数十サイトや書籍を参考に理解を深めながら、
１、、実際にコードを書いて
２、、ノートに自分の言葉でいつかの自分が見ても伝わるようにまとめていく
３、、最後にQiitaに他の方が見ても分かるよう伝えていく

※間違い部分、誤解している箇所が出てくる可能性もあります。

[配列とは]

複数(プロパティ)のデータをまとめて整理して１つの大きな箱にいれるイメージ。

出力結果：アイス

呼び方まとめ

・青box１つ１つのまとまりをプロパティと呼ぶ。

・ここでは$box全ての部分を【配列】と呼ぶ。

・自動的に割り当てられる添字のことを【キー】と呼ぶ。

・アイス、チョコアイス、カレー味アイスの部分を【値】と呼ぶ。

問題

正解はスクロールしたらすぐ出てきますので、ここから下にスクロールせず解答してみること。

↓

正解：2.3.4.1

※プロパティを要素、配列をインデックスとも呼ぶ。

問題２

Hamburger 配列変数に
・テリヤキバーガー/ベーコンレタスバーガー/ホットケーキ
上記３つのハンバーガー[値]を上記の順番に格納すること
最後にテリヤキバーガーを出力結果に表示してください

先ずは自身でやること。
答えは以下のリンクを押すと出てきます。
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

次に、$Hamburger配列変数からテリヤキバーガーとホットケーキを改行して出力結果に表示してください。
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

改行の仕方は複数通りあるため上記URLの方法以外でも改行して出力出来ていればOK！！

ちなみに、上記URLの通りに文字列の中に変数を取り入れる場合は""(ダブルクォーテーション)です。
ダブルクォーテーションとシングルクォーテーションの違いは以下URLが非常に分かりやすいです！
https://qiita.com/bitcoinjpnnet/items/64458299eaeefbacab44

配列に格納されている値を全て出力結果に表示するには？

foreach文を使います。

【foreach文とは】
（リスト）や（配列）に格納されたデータ[要素とも値とも呼ぶ]に対して記述[プログラム]された処理を
繰り返し実行する力を持っているループ文です。

$box = ['アイス','チョコアイス','カレー味アイス'];
foreach($box as $value) {
    echo $value;
}
出力結果：アイスチョコアイスカレー味アイス

格納されたデータが全て出力されると繰り返し終了します。

また、添字[キー]も出力したい場合には

foreach ($box as $key=>$value){
echo "$key=>$value \n";
}

出力結果：
0=>アイス
１=>チョコアイス
2=>カレー味アイス

おさらいです。
文字列の中で変数展開したい場合はダブルクォーテーションで囲む。
\nは改行を意味します。
Macユーザーの方は半角[optionキー＋¥]。

$valueの部分は任意名です。

問題3

Hamburger配列変数に格納されてる値を全て出力結果に表示してください。

答え
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

Hamburger配列変数に格納されている値とキーを全て出力結果に表示してください。
条件
改行を行うこと。
カンマ/コンマをいれること

表示結果例
キー=>値、
キー=>値、
キー=>値、

答え
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

但し、やり方は複数通りある。

これである程度配列についての理解が出来たのではないでしょうか？
配列を初めて聞いた方は少しまだ理解できていないかもしれません。
Google先生に「配列　とは」で検索すると結構出てきます。

それでは次に連想配列について理解を深めていきたいと思います。

連想配列とは

任意の文字列をキーに割り当てる事が可能。
・文字列(クォーテーションで囲むもの)
・整数

連想配列の良いところ

・キーが任意文字列のため値と同じ意味を持たせた文字列にすればパッと見て分かりやすい！
例：　Apple　＝＞りんご　car =>　車

・１つの小箱(要素ともいうプロパティともいう)にキーと値で２つの意味を持たせれる。
例：　顧客の連絡先と名前を管理したい場合
例：　'〇〇会社小林様'　＝＞　xxx-xxxx-xxxx(これは電話番号です)

実際に試して覚えよう！

連想配列のキーに割り当てられるが注意すべき事

・true　false　・・・　キーに割り当てれるが、true = 1 false = 0に自動変換される
・小数点      　・・・　キーに割り当てれるが、自動的に切り捨て整数に自動変換される

実際に試して覚えよう！
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

連想配列もつまりは配列の仲間なので配列を理解出来れば連想配列も理解できると思います。

次回、配列を複数の出力方法で出力をし、ループ処理等を併せて理解する記事を書きます。

はじめに

今回は、jQueryを使って、フォームの入力ならびに選択が完了するまで送信ボタンが押せないように設定していきます。

完成イメージ

記事を書いた目的

情報の共有ならびに、自身の備忘録として執筆する。

導入した目的

誤送信を防ぎ、ユーザビリティを向上させるため。

環境

MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0

前提条件

• jQueryが導入済みであること。
• 画像の複数枚投稿機能を実装している。

記事執筆者の状況

テーブル

Userテーブルが「投稿者」、Postテーブルが「投稿」、Imageテーブルが「投稿画像」、Prefectureテーブルが「都道府県データ」、Categoryテーブルが「投稿カテゴリー」となります。

PrefectureテーブルとCategoryテーブルはseedデータを活用しております。

コントローラー

新規投稿機能はposts_controller.rbが担当しております。

posts_controller.rb

class PostsController < ApplicationController
  def new
    @post = Post.new
    @post.build_spot
    @post.images.build()
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to root_path, notice: "投稿が完了しました"
    else
      flash.now[:alert] = "必須項目を入力してください"
      @post.images.build()
      render :new
    end
  end
  ...下記一部記述を省略
  .
  .
  .
  private
  def post_params
    params.require(:post).permit(:title, :content, :prefecture_id, :category_id, images_attributes: [:id, :image, :_destroy]).merge(user_id: current_user.id)
  end

それでは作業していきましょう。

①-1 new.html.erbを作成する

まずはフォームをhtmlで作成していきます。

new.html.erb

<%= form_with(model: @post, local: true, multipart: true) do |form| %>
  <ul class='formSpace'>
    <li class="prefecture">
      <label class="labelName" for="Prefecture">Prefecture：</label>
      <%= form.collection_select :prefecture_id, Prefecture.all, :id, :name, {include_blank: '選択してください'}, {class: "prefecture__input", id: 'input01'} %>
    </li>
    <li class="category">
      <label class="labelname" for="category">Category：</label>
      <%= form.collection_select :category_id, Category.all, :id, :name, {include_blank: '選択してください'}, {class: "category__input", id: 'input02'} %>
    </li>
    <li class="title">
      <label class="labelName" for="titleSpace">Title：</label>
      <%= form.text_field :title, class: 'title__input', id: "input03", placeholder: "タイトルを入力してください" %>
    </lil
    <li class='newImage'>
      <label class="labelName" for="imageSpace">Photo：</label>
      <div class="prevContent">
      </div>
      <div class="labelContent">
        <label class="labelBox" for="post_images_attributes_0_image">
          <div class="labelBox__text-visible">
            クリックしてファイルをアップロード（最大５枚）
          </div>
        </label>
      </div>
      <div class="hiddenContent">
        <%= form.fields_for :images do |i| %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_0_image", name: "post[images_attributes][0][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_1_image", name: "post[images_attributes][1][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_2_image", name: "post[images_attributes][2][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_3_image", name: "post[images_attributes][3][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_4_image", name: "post[images_attributes][4][image]", type: "file" %>
        <% end %>
      </div>
    </li>
    <li class='content'>
      <label class="labelName" for="contentSpace">Content：</label>
      <%= form.text_area :content, class: 'content__input', id: "input05", placeholder: "コメントを入力してください" %>
    </li>
  </ul>
  <div class='send'>
    <%# <%= form.submit "送信中", class: 'send__btn', id: 'sending', value: "投稿する" %>
    <input type='submit' id='sending' class='send__btn' value='投稿する'>
  </div>
<% end %>

続いてscssを記述します。

new.scss

.formSpace {
  height: auto;
}

.labelName {
  color: #000000;
}
// 都道府県================================================================

.prefecture {
  height: auto;
  width: auto;
  margin-top: 1vh;
  font-size: 1.5vh;
  line-height: 1.5;
  color: #fff;
  &__input {
    width: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    color: #000000;
  }
}

// カテゴリー＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝======
.category {
  height: auto;
  width: auto;
  margin-top: 1vh;
  font-size: 1.5vh;
  line-height: 1.5;
  color: #fff;
  &__input {
    width: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    color: #000000;
  }
}

//Title===================================================================
.title {
  height: auto;
  width: auto;
  margin-top: 1vh;
  font-size: 1.5vh;
  line-height: 1.5;
  color: #fff;
  &__input {
    width: 30vw;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #000000;
    margin-left: 25px;
  }
}

//Image======================================================================

.newImage {
  display: block;
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}

.imageLabelName {
  color: #fff;
  margin-right: 25px;
}

.prevContent {
  display: flex;
}

.previewBox {
  height: 162px;
  width: 112px;
  margin: 0 15px 10px 0;
}

.upperBox {
  height: 112px;
  width: 100%;
  img {
    width: 112px;
    height: 112px;
  }
}

.lowerBox {
  display: flex;
  text-align: center;
}

.deleteBox {
  color: #1e90ff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.imageDeleteBtn {
  background-color: #f5f5f5;
  line-height: 4vh;
  height: 4vh;
  width: 60px;
}

.imageDeleteBtn:hover {
  color: rgba($color: #1e90ff, $alpha: 0.7);
}

//投稿クリックエリアのCSS
.labelContent {
  margin-bottom: 10px;
  width: 620px;
  .labelBox {
    display: block;
    border: 1px dashed #ccc;
    position: relative;
    background: #f5f5f5;
    width: 100%;
    height: 162px;
    cursor: pointer;
    &__text-visible {
      position: absolute;
      top: 50%;
      left: 16px;
      right: 16px;
      text-align: center;
      font-size: 14px;
      line-height: 1.5;
      font-weight: bold;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      pointer-events: none;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
//file_fieldのcss
.hiddenContent {
  .hiddenField {
    display: none;
  }
  .hidden-checkbox {
    display: none;
  }
}

//コメント====================================================================

.content {
  display: flex;
  height: auto;
  width: auto;
  margin-top: 5px;
  line-height: 1.5;
  font-size: 1.5vh;
  &__input {
    height: 15vh;
    width: 40vw;
    border-radius: 5px;
    color: #000000;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: 0px;
    padding: 1vh;
  }
}


//SENDボタン=========================================================================
.send {
  display: flex;
  justify-content: center;
  &__btn {
    height: 5vh;
    width: 25vw;
    margin: 50px 0;
    border-radius: 20px;
    background-color: #87cefa;
    border: none;
    box-shadow: 0 0 8px gray;
    color: #ffffff;
    line-height: 1.5;
    font-size: 2vh;
    font-weight: bold;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  :hover {
    background-color: #00bfff;
  }
  .send__btn[disabled] {
    background-color: #ddd;
    cursor: not-allowed;
  }
}

ここまで行うと次のような形になると思います。

ポイント

今回、JavaScriptにてフォームが入力または選択されているかどうかを状態管理するために

<%= form.collection_select :prefecture_id, Prefecture.all, :id, :name, {include_blank: '選択してください'}, {class: "prefecture__input", id: 'input01'} %>

という風に、id: 'input01'という形でidを指定しています。

このように、各フォームにidを指定していくのですが、idは同名のものを使い回しすることが不可のため、今回は
id='input02'、id='input0３'・・・という形でidを順番に振っています。
（クラス名を統一して、使い回すのもありですが、今回は省略します。）

SCSSについては、ボタン(class:send__btn)が有効・無効の状態別でボタンの色を変更する記述をしております。ボタンの状態管理は後述するdistabledという値を使って管理します。
無効の場合にはdistabledという値が要素に付与されることになるので、scssの方で

.send__btn[disabled] {
  background-color: #ddd;
  cursor: not-allowed;
}

という記述をして、ボタンが無効状態の場合は色を灰色にして、カーソルを無効にしています。

①-2 submit.jsに処理を記述

あとはjsファイルにフォームの入力・選択がされているかどうかを判定し、送信ボタンの有効・無効を切り替える処理を記述していきます。

今回はsubmit.jsというファイルに記述していきます。

submit.js

// フォームを入力・選択するまで送信ボタンが押せないようにする=============================================
$(function() {
  //最初に送信ボタンを無効にする
  $('#sending').prop("disabled", true);

  //idに「input」と設定している入力欄の操作時
  $("[id^= input],#post_images_attributes_0_image").change(function () {
      //入力欄が空かどうか判定を定義するために、sendという変数を使ってフォームの中身の状態管理を行う。
      let send = true;
      //id=input~と指定している入力欄をひとつずつチェック&画像（インデックス番号が０番の画像）をチェックする
      $("[id^= input],#post_images_attributes_0_image").each(function(index) {
        //フォームの中身（値）を順番に確認し、もしフォームの値が空の時はsend = false とする
        if ($("[id^= input],#post_images_attributes_0_image").eq(index).val() === "") {
          send = false;
        }
      });
      //フォームが全て埋まっていたら(send = trueの場合)
      if (send) {
          //送信ボタンを有効にする
          $('#sending').prop("disabled", false);
      }
      // フォームが一つでも空だったら(send = falseの場合)
      else {
          //送信ボタンを無効にする
          $('#sending').prop("disabled", true);
      }
  });
});

ポイント

最初に送信ボタン

<input type='submit' id='sending' class='send__btn' value='投稿する'>

に対して、prop(disabled, false)として、ボタンを無効化しています。

propメソッドは指定した属性に値を設定する役割を持っています。
distabledとは指定したHTML要素を無効化できる属性のことです。
propメソッドと組み合わせて使うことで
prop( ‘disabled’, true)」・・・要素を無効化
prop( ‘disabled’, false)」・・・要素を有効化
というふうに使用することができます。

参照：　
propメソッド・・・http://js.studio-kingdom.com/jquery/attributes/prop
distabled・・・https://persol-tech-s.co.jp/hatalabo/it_engineer/463.html#disabled

次に、

$("[id^= input],#post_images_attributes_0_image").change(function ()

と記述しています。

「[id^= input]と#post_images_attributes_0_imageの値が変化した時に、イベントが発火する」という記述になります。

注目いただきたいのは
javascript
[id^= input]

の部分です。
こちらはjQueryの属性を使った指定方法を採用しています。
指定方法には大まかに分けて４つあります。

• 前方一致
• 後方一致
• 部分一致
• 否定

「前方一致」は「属性 ^= 属性名」のように「^」を追加するだけで、属性名の先頭部分の文字列が一致するすべての要素を取得することができます。

今回の場合、[id^= input]とすることで、id="input01", id="input02,・・・ id="input05の要素、つまりid名にinputと命名されている要素を全て取得することができます。

なお、jQueryの属性を使った指定方法についてはこちらの記事を参考にさせていただきました。前方一致指定意外にも知りたい方はご覧いただければと思います。

続いて、

let send = true;

については、入力欄が空かどうか判定するために、sendという変数を用いてフォームの状態管理を行うために記述しています。trueの場合は、フォームが全て埋まっている状態を表します。

$("[id^= input],#post_images_attributes_0_image").each(function(index) {
  //フォームの中身（値）を順番に確認し、もしフォームの値が空の時はsend = false とする
  if ($("[id^= input],#post_images_attributes_0_image").eq(index).val() === "") {
    send = false;
  }
});

については、eachメソッドを使って、idにinputと命名している要素を、要素の個数分に応じて取り出します。
取り出す際、eachメソッドの引数にコールバック関数を定義する必要があるので、「function(index)」と指定します。こうすることでindex番号を取得することができ、取り出した要素にそれぞれindex番号を振り分けます。

今回の場合、イメージとしては

0 : id="input01"の要素
１ : id="input02"の要素
２ : id="input03"の要素
３ : id="input04"の要素
４ : id="input05"の要素

このような形になるかと思います。

加えて、#post_images_attributes_0_imageも対象のオブジェクトに加えております。正直なところ、
複数枚画像投稿する際、上手いidの設定、指定ができなくて、ここに加えております。
（他に上手い方法があれば教えていただけると助かります！）

eachメソッドでインデックス番号と一緒に取り出したあと、

if ($("[id^= input],#post_images_attributes_0_image").eq(index).val() === "") {
  send = false;
}

の処理に移ります。

ここでは、取り出した要素１つ１つのフォームの中身が空なのかを検証しています。
1つ１つ検証するにあたり、eqメソッドを使用しています。
eqメソッドとは現在マッチしている要素をインデックス番号でフィルタリングします。(eqメソッド参照サイト)

idにinputと命名されている要素は、eachメソッドでインデックス番号が０〜４が振られているので、順番にeqメソッドの引数にインデックス番号が入るイメージです。（例：　eq(0),eq(1)...eq(4)　）

フォームの値を取得するのはvalメソッドを使用します（valメソッド参照サイト）

〜〜　=== ""とは、「〜〜は空である」という意味を表します。

１つ１つ取り出した要素を検証して、１つでもフォームの値が空の要素があれば、send = falseを返します。

最後の

//フォームが全て埋まっていたら(send = trueの場合)
if (send) {
  //送信ボタンを有効にする
  $('#sending').prop("disabled", false);
}
// フォームが一つでも空だったら(send = falseの場合)
else {
  //送信ボタンを無効にする
  $('#sending').prop("disabled", true);
}

の部分については、
if (send)(if send ==trueという意味）の場合つまりフォームが全て埋まっている場合は、$('#sending').prop("disabled", false);というふうに、送信ボタンを有効にして、押せる状態にしています。

else(send == false)の場合つまりフォームが１つでも空だった場合は、$('#sending').prop("disabled", true);という形で、送信ボタンを無効にして、押せない状態にします。

①-3 完成

以上で完成です。

最後に

初学者のためまだまだ理解不足な部分も多く、今回の実装については正直、改善の予知が多くあると思いますので、もっと良い実装の方法等がありましたらご教示いただけますと幸いです。
また、この記事をご覧いただきましたら、LGTMもいただけるとすごく嬉しいです。何卒よろしくお願い致します。

はじめに

この記事はJavascriptが苦手な私ために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

目次

1. 関数 (function) とは
2. 関数 (function) の書き方
3. 関数(function) の例
4. 関数式とは
5. 関数式の例
6. アロー関数

1. 関数 (function) とは

複数の処理をまとめたもの。プログラムを何度も使い回しができるかたちにしたものです。
コード量が少なくなって、見通しが良くなる！！

2. 関数 (function) の書き方

関数の一番シンプルな基本のかたちです。

function 関数名( 引数 ) {
  処理する内容
}

関数名(引数);//関数を呼び出す

関数名は変数名を付けるときとルールは大体同じ。
最初に動詞を持ってくることが多い。
例）・add○○
　　・is○○

・引数とは
関数に与える情報で、関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を使うことができる。

3. 関数(function) の例

変数だけのプログラムで書くと、、、

1

const price = 6000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}

結果1

>> 高い

2

const price = 4000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}

結果2

>> 普通

3

const price = 1000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}

結果3

>> 安い

constの値を変えるたびに
同じプログラムをたくさん書かなければならない。

だけど関数を使うと、、、(関数宣言)

function judge(price) {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }

呼び出す

judge(6000);
>> 高い

judge(4000);
>> 普通

judge(1000);
>> 安い

これだけでいい！！すっきりー

4. 関数式とは

さっきの関数は関数宣言と言い、巻き上げに注意しなきゃいけないよー！！
で、関数式は、関数に定数や変数に代入することができる
関数式は、「無名関数」とすることができ、関数名をつけなくてもいい！！

関数式で書く場合は、、、

const 定数 = function(引数) {
    処理する内容
}

定数(引数);//関数式を呼び出す

関数名を省略できる！！（無名関数）

5. 関数式の例

const judge = function(price) {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }

呼び出す

judge(6000);
>> 高い

関数名が定数に変わった感じ。

6. アロー関数

その名の通り「アロー (arrow) (矢) =>」 を使った関数のこと。
関数式のfunction()部分をアローに変えれる。
アロー関数を使うと、コードがシンプルになり読みやすくなる

const judge = (price) => {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }

呼び出す

judge(6000);
>> 高い

こんな感じ。

gulpを実行した際に下記エラーに遭遇した。

ReferenceError: primordials is not defined

調べてみると理由は、「node.jsとgulpのバージョンの組み合わせがよくないから実行できないよ」ということ。

改善方法は以下の2つが考えられる。

1.gulpのバージョンを上げる(gulp3=>gulp4)
2.node.jsのバージョンを下げる

1の場合、gulpファイルの書き換えが必要になるが、今後はgulp4が主流になると思うので、1の方法で対応しました。

まずは、グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。

$ npm rm -g gulp
$ npm install -g gulp-cli

次にローカルインストールされているgulp v3を削除して、gulp v4をローカルインストールします。

$ npm uninstall --save-dev gulp
$ npm install --save-dev gulp

インストールが完了したのでpackage.jsonのgulpを4.0.2に書き換えます。

package.json

{
  "name": "backbone_sample02",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "backbone": "^1.3.3",
    "jquery": "^3.2.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browserify": "^14.5.0",
    "gulp": "^4.0.2",
    "vinyl-source-stream": "^1.1.0"
  }
}

書き換えたら下記のコマンドを実行して、変更を反映させます。

$ npm i

これでgulpのバージョンアップは完了です。

次にgulpfile.jsを編集します。

これが既存のgulpfile.jsの中身です。

gulpfile.js

//plug-in
var gulp = require('gulp');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
var source = require('vinyl-source-stream');


// gulpタスクの作成
gulp.task('build', function(){
  browserify({
    entries: ['src/app.js'] // ビルド元のファイルを指定
  }).bundle()
    .pipe(source('bundle.js')) // 出力ファイル名を指定
    .pipe(gulp.dest('dist/')); // 出力ディレクトリを指定
});
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: "./", // 対象ディレクトリ
      index: "index.html" //indexファイル名
    }
  });
});
gulp.task('bs-reload', function () {
  browserSync.reload();
});

// Gulpを使ったファイルの監視
gulp.task('default', ['build', 'browser-sync'], function(){
  gulp.watch('./src/*.js', ['build']);
  gulp.watch("./*.html", ['bs-reload']);
  gulp.watch("./dist/*.+(js|css)", ['bs-reload']);
});

上記の中身をgulp4仕様に書き換えました。

gulpfile.js

//plug-in
var gulp = require('gulp');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
var source = require('vinyl-source-stream');


// gulpタスクの作成
gulp.task('build', function(){
  browserify({
    entries: ['src/app.js'] // ビルド元のファイルを指定
  }).bundle()
    .pipe(source('bundle.js')) // 出力ファイル名を指定
    .pipe(gulp.dest('dist/')); // 出力ディレクトリを指定
});
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: "./", // 対象ディレクトリ
      index: "index.html" //indexファイル名
    }
  });
});
gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('default', gulp.series( gulp.parallel('build', 'browser-sync'), function(){
  gulp.watch('./src/*.js', gulp.task('build'));
  gulp.watch("./*.html", gulp.task('bs-reload'));
  gulp.watch("./dist/*.+(js|css)", gulp.task('bs-reload'));
}));

主な変更点は、gulp.watchの記述方法を変更しました。

これで大丈夫かなと思いgulpを実行したら下記のエラーが発生しました。

[18:08:52] 'build' errored after 736 ms
[18:08:52] Error: Received a non-Vinyl object in `dest()`
[18:08:52] 'default' errored after 740 ms

buildとdefaultでエラーが発生している。

調べると、同様のエラーがvinyl-source-streamのバージョンをアップデートすれば直ったという記事を発見し、package.jsonのvinyl-source-streamを2.00に書き換えた。

package.json

{
  "name": "backbone_sample02",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "backbone": "^1.3.3",
    "jquery": "^3.2.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browserify": "^14.5.0",
    "gulp": "^4.0.2",
    "vinyl-source-stream": "^2.0.0"
  }
}

下記コマンドを実行

$ npm i

これで無事gulpを実行できました。

しかし、gulpfileの書き方やバージョンによる影響についてはもっと勉強が必要だと感じました。

TL; DR

非同期処理について、たくさんのいいリソースや記事等がありますので、本記事は単刀直入に実装例から見てみましょう。
非同期処理の基礎概念に興味がある方はこちらの記事をご参考ください。
今回はXMLHttpRequest, Fetch API, Async/Awaitについて、それぞれの実装例と複数の非同期処理の方法を紹介します。（複数の非同期処理向けのPromise Allも記述しています。）
また、HTTPリクエストをシミュレートするためにJSONPlaceholderのエンドポイントを使っています。

XMLHttpRequest (XHR)

現在はよりモダンなFetch APIがあるため、XMLHttpRequestを若干非推奨としていますが、歴史的な理由により、例え既存のスクリプトをサポートする必要がある場合等、そのままXMLHttpRequestが使われている場合もあります。

リクエストをするためには、4 つのステップが必要です。
1. XMLHttpRequestを作成します
2. リクエストを初期化します
3. リクエストを送ります
4. （イベントをリッスン）レスポンスに対する処理します

非同期のリクエスト

基本構文

const request = new XMLHttpRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/users');
request.send();
request.addEventListener('load', () => {
  if (request.status !== 200) console.log('error');
  const data = JSON.parse(request.responseText);
  console.log(data);
});

loadイベント以外はreadystatechangeイベントも使えます。
Ready Stateの値について、以下の表を参照してください。

値	状態	説明
0	UNSENT	open()まだ呼ばれていない。
1	OPENED	open()が呼び出し済み。
2	HEADERS_RECEIVED	レスポンスヘッダを受け取った。
3	LOADING	レスポンスはロード中。
4	DONE	リクエスト完了。

ここで、一つ注意点があります。
URLに誤りがある場合、リクエストはそのまま実行されます。つまり、リクエスト完了したらステータス 4 になります。なので、request.statusは200かどうかも確認なければならないです。

const request = new XMLHttpRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/users');
request.send();
request.addEventListener('readystatechange', () => {
  if (request.readyState !== 4) return;
  if (request.status !== 200) console.log('error');
  // request.readyState === 4 && request.status === 200 場合
  const data = JSON.parse(request.responseText);
  console.log(data);
});

これで、リクエストができましたが、もし他のURLにリクエストしたい場合、コードが重複される可能性があります。重複したコードを避けるため、関数に入れてリファクタリングします。

関数でリファクタリング

const getUsers = (url, callback) => {
  const request = new XMLHttpRequest();
  request.addEventListener('readystatechange', () => {
      if (request.readyState !== 4) return;
      if (request.status !== 200) callback('error', undefined);
      const data = JSON.parse(request.responseText);
      callback(undefined, data);
  });
  request.open('GET', url);
  request.send();
};

getUsers('https://jsonplaceholder.typicode.com/users', (err, data) => {
  if (err) console.log(err);
  console.log(data);
});

ひとつ注意すべき点として、このコードで複数の非同期処理を実行する時にコールバック地獄になるかもしれませんので、以下のようなPromiseを使って、複数の非同期処理のためリファクタリングします。

Promiseでリファクタリング

const getRequest = (url) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.addEventListener('readystatechange', () => {
      if (request.readyState !== 4) return;
      if (request.status !== 200) reject('error');
      const data = JSON.parse(request.responseText);
      resolve(data);
    });
    request.open('GET', url);
    request.send();
  });
};

getRequest('https://jsonplaceholder.typicode.com/users')
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

複数の非同期のリクエスト

const getRequest = (url) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.addEventListener('readystatechange', () => {
      if (request.readyState !== 4) return;
      if (request.status !== 200) reject('error');
      const data = JSON.parse(request.responseText);
      resolve(data);
    });
    request.open('GET', url);
    request.send();
  });
};

getRequest('https://jsonplaceholder.typicode.com/users')
  .then((data) => {
    console.log('Request 1: Users', data);
    return getRequest('https://jsonplaceholder.typicode.com/posts');
  })
  .then((data) => {
    console.log('Request 2: Posts', data);
    return getRequest('https://jsonplaceholder.typicode.com/comments');
  })
  .then((data) => console.log('Request 3: Comments', data))
  .catch((err) => console.log(err));

FetchAPI

Fetch API は XMLHttpRequestよりもっと柔軟な操作が可能です。

非同期のリクエスト

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

複数の非同期のリクエスト

複数のリクエストと言ったら、多分直感的に以下のようなネストする事がなりますが、ネストが深くなると構造が把握しづらくなります。
以下の例は三つのリクエストをネストしたサンプルコードです。

悪い例：

fetch('https://jsonplaceholder.typicode.com/users')
  .then((userResponse) => userResponse.json())
  .then((userData) => {
    console.log(userData);
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((postResponse) => postResponse.json())
      .then((postData) => {
        console.log(postData);
        fetch('https://jsonplaceholder.typicode.com/comments')
          .then((commentResponse) => commentResponse.json())
          .then((data) => console.log(data))
          .catch((commentData) => console.log(commentData));
      })
      .catch((postError) => console.log(postError));
  })
  .catch((userError) => console.log(userError));

ネストを避けるため、2回目と3回目のfetch(url)前にreturnをすると、以下のことができます。
1. fetch(url)にいるコードブロックはPromiseとして返しますので、.thenメソッドチェーンを使用できます。
2. 一つのcatchで全てリクエストのエラーをキャッチできます。

fetch('https://jsonplaceholder.typicode.com/users')
  .then((userResponse) => userResponse.json())
  .then((userData) => {
    console.log(userData);
    return fetch('https://jsonplaceholder.typicode.com/posts');
  })
  .then((postResponse) => postResponse.json())
  .then((postData) => {
    console.log(postData);
    return fetch('https://jsonplaceholder.typicode.com/comments');
  })
  .then((commentResponse) => commentResponse.json())
  .then((commentData) => console.log(commentData))
  .catch((err) => console.log(err));

Async/Await + Fetch APIを使えば、もっと簡潔なコードを書けます。

Async/Await + Fetch API

非同期のリクエスト

const getRequest = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (response.status !== 200) throw new Error('Failed to fetch');
  const data = await response.json();
  return data;
};

getRequest()
  .then((data) => console.log(data))
  .catch((err) => console.log(err.message));

非同期関数の返す値はまだPromiseですので、.thenを使わなと戻ったデータを使えないです。

複数の非同期のリクエスト

const getRequest = async () => {
  const checkStatus = (res) => {
    if (res.status !== 200) throw new Error('Failed to fetch');
  };

  const userResponse = await fetch('https://jsonplaceholder.typicode.com/users');
  checkStatus(userResponse);
  const userData = await userResponse.json();
  const postResponse = await fetch('https://jsonplaceholder.typicode.com/posts');
  checkStatus(postResponse);
  const postData = await postResponse.json();
  const commentResponse = await fetch('https://jsonplaceholder.typicode.com/comments');
  checkStatus(commentResponse);
  const commentData = await commentResponse.json();
  return { userData, postData, commentData };
};

getRequest()
  .then((data) => console.log(data))
  .catch((err) => console.log(err.message));

Async/Await + Fetch APIを使うと、コードの可読性を高められます。

Promise All

Promise.all()メソッドは複数の非同期のリクエストをすることができます、そしてまとめて単一の Promise を返します。

const getRequest = async (url) => {
  const response = await fetch(url);
  if (response.status !== 200) throw new Error('Failed to fetch');
  return response.json();
};

const userPromise = getRequest('https://jsonplaceholder.typicode.com/users');
const postPromise = getRequest('https://jsonplaceholder.typicode.com/posts');
const commentPromise = getRequest('https://jsonplaceholder.typicode.com/comments');

Promise.all([userPromise, postPromise, commentPromise])
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

参考文献

MDN - Ready State

ここまでお読みいただきありがとうございました。
日本語まだ勉強中ですので、文法が多少おかしいと思います。
もし文法ミスや誤字がありましたら、編集リクエストでご意見いただければと思います。