はじめに

昨年会社のイベントでクイズ大会を行いました。
参加者は100人弱で、人数分早押しボタンを用意するわけにもいかないのでWebアプリを構築したのですが、早押し判定でハマったので今更ながらサンプル版として残しておきたいと思います。
この記事ではFirebaseの基本的なセットアップや実装、Vue・Nuxtについての解説は行いません。

環境

• Yarn v1.15.2
• Node v12.13.0
• Nuxt v2.13.2
• Firebase v7.15.5

完成品

サンプルをgithubにて公開しています。
quizBuzzer

※UIライブラリにVuetify、効果音の実装にHowlerを使用(Web Audio API はめんどくさい！！)

早押しボタンの画面

進行役の画面

仕様

• クイズ参加者と進行役で別の画面を操作
• 参加者はそれぞれのデバイスの参加者用の画面で早押しボタンを押して解答権を獲得できる
• 進行役は専用の管理画面で事前に決められた問題の切り替え、参加者の解答に応じてピンポン・ブーを鳴らすことができる
• クイズの正誤判定は人力(笑)

実装の指針

• Realtime database(以下、RDB)には現在表示されている問題のIDと参加者のIDを保存する
• 参加者のIDは、手軽さを考慮しログイン機能を持たせたくないため、クライアントサイドで生成したランダムな文字列を使用

当初のコード

RDB上のデータ

quiz-state: {
  current-quiz: 1,
  respondent-id: "",
}

@/pages/index.vue

<template>
    <div>
        <p class="text">{{ currentQuiz.text }}</p>
        <v-btn
            v-if="waitingClicked"
            :disabled="!!respondentId"
            type="button"
            x-large
            outlined
            color="indigo"
            @click="postQuizState"
            >PUSH!</v-btn
        >
        <p v-else-if="clickedAtFirst">解答権GET!</p>
        <p v-else>他の人に解答権があります</p>
    </div>
</template>

<script>
import Vue from 'vue'
import { Howl } from 'howler'
import {
    postQuiz,
    respondentObserver,
    currentQuizObserver,
} from '@/api/firebase'
import quizData from '@/static/data/quiz'

export default Vue.extend({
    data: () => ({
        quizData,
        currentQuizIndex: 0,
        userId: '',
        respondentId: '',
        sound: new Howl({
            src: ['/audio/sound-btn.wav'],
        }),
    }),
    computed: {
        currentQuiz() {
            return this.quizData[this.currentQuizIndex]
        },
        waitingClicked() {
            return !this.clickedAtFirst && !this.clickedAtSecondAndLater
        },
        clickedAtFirst() {
            const result =
                this.respondentId &&
                this.userId === this.respondentId
            return result
        },
        clickedAtSecondAndLater() {
            return !!this.respondentId && this.userId !== this.respondentId
        },
    },
    watch: {
        clickedAtFirst(newVal) {
            if (newVal) {
                this.sound.play()
            }
        },
    },
    created() {
        currentQuizObserver((val) => {
            this.currentQuizIndex = val
        })
        respondentObserver((val) => {
            this.respondentId = val
        })
    },
    mounted() {
        this.userId = this.$store.state.userId
    },
    methods: {
        postQuizState() {
            if (this.respondentId) return
            postQuiz(this.userId)
        },
    },
})
</script>

@/api/firebase.js

import { db } from '@/plugins/firebase'

const respondentRef = db.ref('/quiz-state/respondent-id')

export function postQuiz(val) {
    respondentRef
        // eslint-disable-next-line consistent-return
        .transaction((post) => {
            if (!post) return val
        })
}

export function respondentObserver(callback) {
    respondentRef.on('value', (snapshot) => {
        callback(snapshot.val())
    })
}

export function resetBtn() {
    respondentRef.set('')
}

const currentQuizRef = db.ref('/quiz-state/current-quiz')

export function changeQuiz(val) {
    currentQuizRef.set(val)
}

export function currentQuizObserver(callback) {
    currentQuizRef.on('value', (snapshot) => {
        callback(snapshot.val() === null ? 0 : snapshot.val())
    })
}

RDBの解答者のIDのsnapshotとユーザーIDを比較して最初にクリックしたか or 2番目以降にクリックしたかの判定を行なっています。

問題点

数百ミリ秒の誤差でほぼ同時にボタンが押された場合、押したのが2番目以降で解答権を獲得できなかったにも関わらず、一瞬だけ解答権獲得の判定がされる。
これは、最初に押したか or 2番目以降に押したかの判定中にもcomputedは随時更新され、さらにrespondentObserverで監視しているRDBのクイズ解答者のIDのsnapshotは一時的にそのデバイスの更新が優先された値になることがあるためです。

解決したコード

@/pages/index.vue

<script>
...

export default Vue.extend({
    data: () => ({
        ...
        isTransactioning: false,
        ...
    }),
    computed: {
        ...
        clickedAtFirst() {
            const result =
                !this.isTransactioning &&
                this.respondentId &&
                this.userId === this.respondentId
            return result
        },
        ...
    },
    ...
    methods: {
        postQuizState() {
            this.isTransactioning = true
            if (this.respondentId) return
            postQuiz(this.userId).then(() => {
                this.isTransactioning = false
            })
        },
    },

...
</script>

@/api/firebase.js

export function postQuiz(val) {
    return new Promise((resolve) => {
        respondentRef
            // eslint-disable-next-line consistent-return
            .transaction((post) => {
                if (!post) return val
            })
            .then(() => {
                resolve()
            })
            .catch(() => {
                resolve()
            })
    })
}

RDBのtransactionは引数のpostで現在のRDB上のデータを取得でき、返した値でRDBを更新できる非同期関数です。
なのでVueのインスタンスにtransactionが処理中かどうかのフラグを持たせ、
ボタンクリック時にフラグをtrueにし、その間は判定を待つ。
そしてtransactionの終了時にresolveし、thenでフラグをfalseにすることで最終的な判定が終わってから画面が更新されるようになりました。

おわりに

実際にプロダクトで使用する際はユーザーIDのランダムな文字列をハッシュ値にする、はたまたログイン制にしてFirebaseのセキュリティルールもしっかり設定するなど課題はありますね。

あと今回の実装では、すでにRDBのデータがあればtransactionで値を返さない、というロジックにしたのでeslint-disable-next-lineに逃げてしまったのですが他に良い方法があれば是非ご教授ください?

プログラミング初心者が
JavaScriptの基本用語をアウトプット用にまとめてみました。

JavaScriptの基本用語

1.JavaScript
ブラウザに搭載するための言語。
ユーザーが行う様々な操作に対応できる言語。
コンソールに直接書く。ScriptタグでJavaScriptのコードを呼び出す。

2.window.alert( )
ブラウザでアラートを表示させるメソッド。

3.console.log( )
ブラウザのコンソールにテキストを表示させるメソッド。
デバッグ用に使うこともある。

4.変数宣言
letで変数を宣言する。後で書き換えることができる。
constで変数を宣言する。後で書き換えることができない。

5.オブジェクト
名前と値をセット(プロパティ)で管理するデータのまとまりのこと。
「{ プロパティ名: 値 };」で作成や定義を行う。

6.for文
JavaScriptにおける繰り返し処理を行うための文。

7.function文
JavaScriptにおいて関数を定義するための文。

8.return
JavaScriptではしっかり戻り値を明示しないといけない。

9.関数式(無名関数)
JavaScriptにおける関数を定義するもう一つの方法。
関数式にすることで、なにかに代入しやすくなったり渡しやすくなったりする。
JavaScriptは関数宣言を先に読み込む。

10.Bracket Pair Colorizer
VSCodeの拡張機能。
括弧が色分けされて読みやすくなる。

11.DOM(Document Object Model)
HTMLを解析して、データを作成するAPI。
※HTMLファイルはただの文字情報。ブラウザによってCSSやJavaScriptによる修飾を行なって画面に映している。
※HTMLを解析しDOMに変換→CSSとJavaScriptを読み込み見た目を描画→ユーザーがページを閲覧。

12.DOMツリー(ドキュメントツリー)
DOMによって解析されたHTMLは階層構造のあるデータになる。
このオブジェクトのツリー状の集合のこと。
JavaScriptで操作することができる。

13.ノード
DOMツリーの中での、HTML1つ1つのタグのこと。

14.document
開いているWebページのDOMツリーが入っているオブジェクト。
document.getElementById("id名");…DOMツリーから特定要素を取得するメソッド。
document.getElementsByClassName("class名");…同じクラスを持つ要素全てを取得するメソッド。
document.querySelector("セレクタ名")…セレクタに合致するもののうち一番最初に見つかった要素を1つ取得するメソッド。

15.イベント
HTMLの要素に対して行われた処理要求のこと。

16.イベント駆動
「イベント」が発生したら、それをきっかけにコードが実行される仕組み。

17.イベントリスナ
一つのイベントと一つの関数を紐付ける仕組みのこと。
addEventListenerは、ノードオブジェクトにイベントが起きたときに関数を実行するメソッド。

18.windowオブジェクト
元から用意されている、ブラウザの情報を持つオブジェクト。

19.innerHTML
HTML要素の中身を書き換えることができるメソッド。

20.classList.add
クラスを追加することができるメソッド。

21.classList.remove
クラスを削除することができるメソッド。

22.this
イベントの発生元となった要素を取得するメソッド。

23.Array.prototype.slice.call( )
引数にとったオブジェクトを配列に変換するメソッド。

24.forEach( )
配列によく使われる繰り返し処理。
引数には、コールバック関数を入れる。

25.コールバック関数
配列の各でデータに対して行う処理。
第一引数はvalue(値)、第二引数はindex(要素番号)。

26.indexOf( )
配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻す。

まとめ

JavaScriptの基本用語をまとめてみました。

表題の件について質問になります。

期間限定のページを運用で回していきたいと思っていて、
URL末尾に?enddate=200731 のようなパラメータをセットして、このパラメータを判別してページの表示期間を
制御させる方法（記述）をご教示頂けますと幸いです。

この例で言うと２０年８月１日になった時点でページが見れなくなる想定です。

それか、パラメータに有効期間をセットして、その有効期間を判別してページを出し分ける方法のどちらかの方法が知りたいです。。。

何卒よろしくお願いいたします。

はじめに

草野と申します。
今回の投稿は、プログラミングスクールでチーム開発にて行ったフリーマーケット系ECサイトのクローンアプリ商品編集機能についてです。自分用のメモのため、文章は拙いですが、少しでも初学者の助けになればと考えています。
内容は、表題にもあるとおり、プレビュー編集とDB更新についてです。未熟な点も多いと思います。不備等ありましたらご指摘ください。随時改善して行こうと思います。ちなみに私は、スクール自体は卒業しており、学習した内容の振り返りとして投稿させて頂いております。

完成品

商品編集画面（プレビュー画像部）

商品編集画面（カテゴリー部）

商品編集画面（販売手数料・利益部）

更新成功時の遷移画面

実装手順

1.ルーティング編集

• update_doneのルート設定（更新成功時の遷移画面）

２.コントローラー編集

• editメソッド設定
• updateメソッド設定
  • エラーハンドリング
  • 画像削除
• update_daneメソッド設定

３.ビュー編集・作成

• プレビュー画像呼び出し
• カテゴリー呼び出しの調整
• 更新成功時の遷移画面

4.JS編集

• プレビュー画像及びinputタグの生成、削除
• 販売手数料・利益の表示

1.ルーティング編集

update_doneルートを生成します。
これは、更新成功時の遷移画面を表示するためのルーティングです。

config/routes.rb 

  resources :items do
    resources :comments,  only: [:create, :destroy]
    resources :favorites, only: [:create, :destroy]
    collection do
      get 'get_category_children', defaults: { fomat: 'json'}
      get 'get_category_grandchildren', defaults: { fomat: 'json'}
      get 'search'
      get 'post_done'
      get 'delete_done'
      get 'detail_search'
      get 'update_done' # これを追加
    end
  end

2.コントローラー編集

今回編集したコントローラーの記述は下記の通りです。

app/controller/items_controller.rb 

class ItemsController < ApplicationController
before_action :category_parent_array, only: [:new, :create, :edit]
before_action :set_item, only: [:show, :edit, :update, :destroy]
before_action :show_all_instance, only: [:show, :edit, :destroy]

# 中略

  def edit
    grandchild = @item.category
    child = grandchild.parent
    if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
    else
     @parent_array = []
     @parent_array << @item.category.parent.parent.name
     @parent_array << @item.category.parent.parent.id
    end
     @category_children_array = Category.where(ancestry: child.ancestry)
     @child_array = []
     @child_array << child.name
     @child_array << child.id

     @category_grandchildren_array = Category.where(ancestry: grandchild.ancestry)
     @grandchild_array = []
     @grandchild_array << grandchild.name
     @grandchild_array << grandchild.id

  end

  def update
    if item_params[:images_attributes].nil?
      flash.now[:alert] = '更新できませんでした 【画像を１枚以上入れてください】'
      render :edit
    else
      exit_ids = []
      item_params[:images_attributes].each do |a,b|
        exit_ids << item_params[:images_attributes].dig(:"#{a}",:id).to_i
      end
      ids = Image.where(item_id: params[:id]).map{|image| image.id }
      delete__db = ids - exit_ids
      Image.where(id:delete__db).destroy_all
      @item.touch
      if @item.update(item_params)
        redirect_to  update_done_items_path
      else
        flash.now[:alert] = '更新できませんでした'
        render :edit
      end
    end
  end

  def update_done
    @item_update = Item.order("updated_at DESC").first
  end

# 中略

  private
  def item_params
    params.require(:item).permit(:name, :item_explanation, :category_id, :item_status, :auction_status, :delivery_fee, :shipping_origin, :exhibition_price,:brand_name, :days_until_shipping, images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def category_parent_array
    @category_parent_array = Category.where(ancestry: nil).each do |parent|
    end
  end

  def show_all_instance
    @user = User.find(@item.user_id)
    @images = Image.where(item_id: params[:id])
    @images_first = Image.where(item_id: params[:id]).first
    @category_id = @item.category_id
    @category_parent = Category.find(@category_id).parent.parent
    @category_child = Category.find(@category_id).parent
    @category_grandchild = Category.find(@category_id)
  end
end

まずeditメソッドを設定します。
他のメソッドで使用しているインスタンス変数を利用するのでリファクタリングのため、before_actionから呼び出しがあります。
使用しているインスタンス変数は下記の通りです。
② 親カテゴリーのnameとidが代入された配列
③ categoryモデル内の全ての子カテゴリー
④ 子カテゴリーのnameとidが代入された配列
⑤ categoryモデル内の全ての孫カテゴリー
⑥ 孫カテゴリーのnameとidが代入された配列
⑦ 該当商品情報
⑧ categoryモデル内の全ての親カテゴリー
⑨ 該当商品の画像
⑩ 該当商品のcategory_id(孫の数値)

app/controller/items_controller.rb 

class ItemsController < ApplicationController
before_action :category_parent_array, only: [:new, :create, :edit]
before_action :set_item, only: [:show, :edit, :update, :destroy]
before_action :show_all_instance, only: [:show, :edit, :destroy]

#中略

  def edit
    # ▼ ①ここで該当商品の子・孫カテゴリーを変数へ代入
    grandchild = @item.category
    child = grandchild.parent
    if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
    else
     # ② ▼ 親カテゴリーのnameとidを配列代入
     @parent_array = []
     @parent_array << @item.category.parent.parent.name
     @parent_array << @item.category.parent.parent.id
    end
     # ③ ▼ 子カテゴリーを全てインスタンス変数へ代入
     @category_children_array = Category.where(ancestry: child.ancestry)
     # ④ ▼ 子カテゴリーのnameとidを配列代入
     @child_array = []
     @child_array << child.name # ⑤で生成した変数を元にname・idを取得
     @child_array << child.id
     # ⑤ ▼ 孫カテゴリーを全てインスタンス変数へ代入
     @category_grandchildren_array = Category.where(ancestry: grandchild.ancestry) 
     # ⑥ ▼ 孫カテゴリーのnameとidを配列代入
     @grandchild_array = []
     @grandchild_array << grandchild.name # ⑤で生成した変数を元にname・idを取得
     @grandchild_array << grandchild.id
  end
  end

#中略

  private
  def item_params
    params.require(:item).permit(:name, :item_explanation, :category_id, :item_status, :auction_status, :delivery_fee, :shipping_origin, :exhibition_price,:brand_name, :days_until_shipping, images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])                                # ⑦ 該当の商品情報をインスタンス変数へ代入
  end

  def category_parent_array
    @category_parent_array = Category.where(ancestry: nil)        # ⑧ 親カテゴリーを全てインスタンス変数へ代入
  end

  def show_all_instance
    @user = User.find(@item.user_id)
    @images = Image.where(item_id: params[:id])                   # ⑨ 該当商品の画像をインスタンス変数へ代入
    @images_first = Image.where(item_id: params[:id]).first
    @category_id = @item.category_id                              # ⑩ 該当商品のレコードからカテゴリーidを取得し、インスタンス変数へ代入（この際に取得するidは孫カテゴリーidです。）
    @category_parent = Category.find(@category_id).parent.parent                    
    @category_child = Category.find(@category_id).parent
    @category_grandchild = Category.find(@category_id)
  end

それぞれを分類分けして並べ替えると下記の通りになります。

商品情報をinputタグに初期値として表示させるためのもの
　⑦ 該当商品情報
商品画像をプレビューに初期値として表示させるためのもの
　⑨ 該当商品の画像
カテゴリーをinputタグに初期値として表示させるためのもの

• 親・子・孫のname・idを取得し、ビュー側のcollection_selectで利用する情報
  　 ⑩ 該当商品のcategory_id（孫の数値）
  　 ② 親カテゴリーのnameとidが代入された配列
  　 ④ 子カテゴリーのnameとidが代入された配列
  　 ⑥ 孫カテゴリーのnameとidが代入された配列

• 再入力時にビュー側のcollection_selectで利用する情報
  　 ⑧ categoryモデル内の全ての親カテゴリー
  　 ③ categoryモデル内の全ての子カテゴリー
  　 ⑤ categoryモデル内の全ての孫カテゴリー

次にupdateメソッドの設定です。
editと同様に更新したい商品情報については、before_actionにて呼び出しを行っています。

app/controller/items_controller.rb 

class ItemsController < ApplicationController
before_action :set_item, only: [:show, :edit, :update, :destroy]

# 中略

  def update
    # ①
    if item_params[:images_attributes].nil?
      flash.now[:alert] = '更新できませんでした 【画像を１枚以上入れてください】'
      render :edit
    else
    # ②
      exit_ids = []
      item_params[:images_attributes].each do |a,b|
        exit_ids << item_params[:images_attributes].dig(:"#{a}",:id).to_i
      end
      ids = Image.where(item_id: params[:id]).map{|image| image.id }
    # ③
      delete__db = ids - exit_ids
      Image.where(id:delete__db).destroy_all
    # ④
      @item.touch
      if @item.update(item_params)
        redirect_to  update_done_items_path
      else
        flash.now[:alert] = '更新できませんでした'
        render :edit
      end
    end
  end


# 中略

  private
  def item_params
    params.require(:item).permit(:name, :item_explanation, :category_id, :item_status, :auction_status, :delivery_fee, :shipping_origin, :exhibition_price,:brand_name, :days_until_shipping, images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end
end

まずこちらの記述は、画像が１枚もない時に更新できないようにif文でエラーハンドリングを記述しています。
item_params[:images_attributes].nil?の記述でparams内の画像が空か確かめています。
.nil?メソッドで空の場合はtureとなり、renderで編集画面に戻りflash.now[:alert]でエラーメッセージを表示します。

①

    if item_params[:images_attributes].nil?
      flash.now[:alert] = '更新できませんでした 【画像を１枚以上入れてください】'
      render :edit
    else

先ほどのif文でfalseとなった場合に②が動きます。
記述している内容は、exit_idsが更新ボタンを押した時点で入力されている画像のid、idsがDB内に保存されている更新前画像のidとなります。
exit_idsという配列を生成し、item_params[:images_attributes]という多次元配列内に含まれるidの値を取り出したいのでeach文でキーと値を順番に展開します。（|a,b| → a キーのこと　b 値のこと）
そして多次元配列から値を取り出すために使用するのがdigメソッドです。
item_params[:images_attributes]（多次元配列）.dig(:"#{a（親キー）}",:id（子キー）).to_i（数値にする）という記述でidを取り出し、配列に代入します。
そしてidsにはDBから更新前の該当するレコードを取得し、mapメソッドにてidを抽出し代入します。

②

      exit_ids = []
      item_params[:images_attributes].each do |a,b|
        exit_ids << item_params[:images_attributes].dig(:"#{a}",:id).to_i
      end
      ids = Image.where(item_id: params[:id]).map{|image| image.id }

ちなみにbinding.pryを使用してitem_params[:images_attributes]の中身を確認すると下記のように表示されます。画像１枚で更新ボタンをクリックしました。②のexit_idsに代入したい値は、子の配列内にある"322"という値です。

ターミナル（コンソール起動）

[1] pry(#<ItemsController>)> item_params[:images_attributes]
=> <ActionController::Parameters {"0"=><ActionController::Parameters {"id"=>"322"} permitted: true>} permitted: true>

③では、先ほどのexit_idsとidsを比較し、DBから初期値として編集画面に呼び出されていた画像を削除した場合にDB内の該当データを削除します。idsからexit_idsを引くことで削除されているidだけ残すことができます。それをdelete__dbに代入し、それを元にDBからレコードを検索し、destroy_allメソッドを使って削除します。
_allとしているのは複数レコードの場合も削除できるようにするためです。

③

      delete__db = ids - exit_ids
      Image.where(id:delete__db).destroy_all

④では、商品情報の更新を行っています。if文のエラーハンドリングにより更新できた場合には、update_dineルートを通り更新成功を伝える画面に遷移します。更新でなかった場合には編集画面に戻り、エラーメッセージを表示します。
一番最初の行に記述している@item.touchはitemsテーブルのupdate_atカラム（更新日時）も含めて更新するためのものです。
これを記述する理由は、後ほどご説明します。

④

      @item.touch
      if @item.update(item_params)
        redirect_to  update_done_items_path
      else
        flash.now[:alert] = '更新できませんでした'
        render :edit
      end

次にupdate_doneメソッドの設定です。
更新成功を伝える画面には更新した商品詳細ページのリンクを設置しています。
先ほどのupdateメソッドの④で@item.touchを記述することによりitemsテーブルのupdate_atカラム（更新日時）を更新しました。orderメソッド、firstメソッドを使い、update_atカラム内を降順に一番目のものを@item_updateに代入します。

app/controller/items_controller.rb 

  def update_done
    @item_update = Item.order("updated_at DESC").first
  end

3.ビュー編集

全ての記述を載せると長くなってしまうのでここでは割愛して記述させて頂きます。

app/views/items/_form_edit.html.haml 

# ▼ 商品画像についての記載
.new__page__header
  = link_to image_tag("logo/logo.png", alt: "logo"), root_path
= form_for @item do |f|
  = render 'layouts/error_messages', model: f.object
  .name__field#1
    .form__label
      .lavel__name
        出品画像
      .lavel__Required
        [必須]
  #image-box-1{class:"#{@images.last.id}"}
# ▼ ① プレビュー画像の表示
    - @images.each do |img|
      .item-image{id:img.id}
        = image_tag(img.image.url,{width:"188",height:"180"})
        .item-image__operetion
          .item-image__operetion--edit__delete__hidden 削除
    %label.img-label{for: "img-file"}
      #image-box__container{class:"item-num-#{@images.length}"}
        #append-js-edit
          = f.fields_for :images do |image|
            .js-file_group{"data-index" => "#{image.index}"}
              = image.file_field :image, type: 'file', value:"#{image.object.id}",style: "",  id:"img-file", class:'js-file-edit',name: "item[images_attributes][#{@item.images.count}][image]", data:{index:""}
        %i.fas.fa-camera

# 中略

# ▼ カテゴリーについての記載
  .append__category
    .category
      =f.collection_select :category_id, @category_children_array, :id, :name, {selected:@child_array}, {class:"serect_field"}
    - if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
      .category__grandchild#children_wrapper
        =f.collection_select :category_id, @category_grandchildren_array, :id, :name, {},{selected:@grandchild_array, id:"child__category",class:"serect_field"}
    - else
      .category__child#children_wrapper
        =f.collection_select :category_id, @category_children_array, :id, :name, {},{selected:@child_array, id:"child__category", class:"serect_field"}
      .category__grandchild#grandchildren_wrapper
        =f.collection_select :category_id, @category_grandchildren_array, :id, :name, {selected:@grandchild_array}, {class:"serect_field"}

# 省略

下記の記述でプレビュー画像を表示しています。
.item-image_operetion--editdelete_hidden 削除 のhiddenという記述がポイントです。js編集の際にご説明します。

①

    - @images.each do |img|
      .item-image{id:img.id}
        = image_tag(img.image.url,{width:"188",height:"180"})
        .item-image__operetion
          .item-image__operetion--edit__delete__hidden 削除

下記の記述でカテゴリーを表示しています。
if文で孫なしの場合と孫ありの場合で条件分岐させています。
collection_selectタグに中身の内{}を記述していますがこれはidを付与するにあたり、オプションを記述する際の引数の順番の関係で記述しています。

カテゴリー

  .append__category
    .category
      =f.collection_select :category_id, @category_children_array, :id, :name, {selected:@child_array}, {class:"serect_field"}
    - if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
      .category__grandchild#children_wrapper
        =f.collection_select :category_id, @category_grandchildren_array, :id, :name, {},{selected:@grandchild_array, id:"child__category",class:"serect_field"}
    - else
      .category__child#children_wrapper
        =f.collection_select :category_id, @category_children_array, :id, :name, {},{selected:@child_array, id:"child__category", class:"serect_field"}
      .category__grandchild#grandchildren_wrapper
        =f. :category_id, @category_grandchildren_array, :id, :name, {selected:@grandchild_array}, {class:"serect_field"}

下記の記述は、更新成功時遷移画面のビューファイルになります。

app/views/items/_form_edit.html.haml 

= render "top/header"
.done#fullsize
  .done__title
    商品情報を更新しました
  .done__backlink
    = link_to 'トップページへ戻る', root_path, class: 'link'
  .done__backlink
    = link_to '更新した商品を確認する', item_path(@item_update), class: 'link'
  .done__backlink
    = link_to '出品中の商品一覧を見る', users_path, class: 'link'
= render "top/lower-photo"
= render "top/footer"
= render "top/btn"

4.JS編集

下記の通りjsファイルを編集します。

app/assets/javascript/edit_items.js 

$(function(){
  var dataBox = new DataTransfer();
  var file_field = document.getElementById('img-file')
  $('#append-js-edit').on('change','#img-file',function(){
    $.each(this.files, function(i, file){
      //FileReaderのreadAsDataURLで指定したFileオブジェクトを読み込む
      var fileReader = new FileReader();
      //DataTransferオブジェクトに対して、fileを追加
      dataBox.items.add(file)
      var num = $('.item-image').length + 1 + i
      var aaa = $('.item-image').length + i
// ①
      var image_id = Number($('#image-box-1').attr('class'))
      var append_div_count = Number($('div[id=1]').length) 
      var noreset_id = image_id + append_div_count

      fileReader.readAsDataURL(file);
     //画像が10枚になったら超えたらボックスを削除する
      if (num == 10){
        $('#image-box__container').css('display', 'none')
      }
      //読み込みが完了すると、srcにfileのURLを格納
      fileReader.onloadend = function() {
        var src = fileReader.result
// ②
        var html= `<div class='item-image' data-image="${file.name}" data-index="${aaa}" id="${noreset_id-1}">
                    <div class=' item-image__content'>
                      <div class='item-image__content--icon'>
                        <img src=${src} width="188" height="180" >
                      </div>
                    </div>
                    <div class='item-image__operetion'>
                      <div class='item-image__operetion--edit__delete__file'>削除</div>
                    </div>
                  </div>`
        const buildFileField1 = (num)=> {
// ③
          const html = `<div  class="js-file_group" data-index="${num}" id=1>
                          <input class="js-file-edit" type="file"
                          name="item[images_attributes][${append_div_count+9}][image]"
                          id="img-file" data-index="${num}value="${noreset_id}" >
                        </div>`;
          return html;
        }
        $('.js-file-edit').removeAttr('id');
        //image_box__container要素の前にhtmlを差し込む
        $('.img-label').before(html);
        $('#append-js-edit').append(buildFileField1(num));
      };
      //image-box__containerのクラスを変更し、CSSでドロップボックスの大きさを変えてやる。
      $('#image-box__container').attr('class', `item-num-${num}`)
    });
  });
// ④
  // 10枚登録されていた場合にボックスを消す
  $(document).ready(function(){
    var image_num = $('.item-image').length
    if (image_num==10){
      $('#image-box__container').css('display', 'none')
    }
  });
// ⑤
  $(document).ready(function(){
    $('.js-file-edit').removeAttr('id');
    var num = $('.item-image').length - 1
    var image_id = Number($('#image-box-1').attr('class'))
    var append_div_count = Number($('div[id=1]').length) 
    var noreset_id = image_id + append_div_count
    const buildFileField = (num)=> {
      const html = `<div  class="js-file_group" data-index="${num}" id=1>
                      <input class="js-file-edit" type="file"
                      name="item[images_attributes][100][image]"
                      id="img-file" data-index="${num}" value="${noreset_id}" >
                    </div>`;
      return html;
    }
    $('#append-js-edit').append(buildFileField(num));
  });
// ⑥
  $(document).on("click", '.item-image__operetion--edit__delete__hidden', function(){
    //削除を押されたプレビュー要素を取得
    var target_image = $(this).parent().parent();
    //削除を押されたプレビューimageのfile名を取得
    var target_id = $(target_image).attr('id');
    var target_image_file = $('input[value="'+target_id+'"][type=hidden]');
    //プレビューを削除
    target_image.remove()
    target_image_file.remove()
    //image-box__containerクラスをもつdivタグのクラスを削除のたびに変更
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })
// ⑦
  $(document).on("click", '.item-image__operetion--edit__delete__file', function(){
    //削除を押されたプレビュー要素を取得
    var target_image = $(this).parent().parent();
    var target_id = Number($(target_image).attr('id'));
    //削除を押されたプレビューimageのfile名を取得
    var target_image_file = $('#append-js-edit').children('div').children('input[value="'+target_id+'"][type=file]');
    //プレビューを削除
    target_image.remove()
    target_image_file.remove()
    //image-box__containerクラスをもつdivタグのクラスを削除のたびに変更
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })

１行目の記述で一番最後に保存された画像idを取得しimage_id変数に代入します。２行目でビューファイル内のdivでid=1と付与されているタグの数を数えappend_div_count変数に代入します。３行目でそれを足し合わせ、
noreset_id変数に代入します。noreset_idは、画像を追加した際に新たに表示されるinputタグのvalueオプションにセットするためのものです。これを利用して削除の動作を行います。また、プレビュー画像の親となるdivタグにも同じ数値のものを狙って削除するため、idオプションにセットします。（②）

①

      var image_id = Number($('#image-box-1').attr('class'))
      var append_div_count = Number($('div[id=1]').length) 
      var noreset_id = image_id + append_div_count

下記の記述は、画像データをinputタグに入力した際にイベント発火して生成されるプレビュー画像のHTMLです。

削除の記述でfileという記述がポイントです。ビュー編集時に言っていたhiddenの記述と見分け、新た生成されたinputタグなのか、最初から表示されているinputタグなのか判断します。

②

 var html= `<div class='item-image' data-image="${file.name}" data-index="${aaa}" id="${noreset_id-1}">
                    <div class=' item-image__content'>
                      <div class='item-image__content--icon'>
                        <img src=${src} width="188" height="180" >
                      </div>
                    </div>
                    <div class='item-image__operetion'>
                      <div class='item-image__operetion--edit__delete__file'>削除</div>
                    </div>
                  </div>`

下記の記述は、画像データをinputタグに入力した際にイベント発火して生成されるinputタグのHTMLです。

③

 const html = `<div  class="js-file_group" data-index="${num}" id=1>
                          <input class="js-file-edit" type="file"
                          name="item[images_attributes][${append_div_count+9}][image]"
                          id="img-file" data-index="${num}value="${noreset_id}" >
                        </div>`;

下記の記述は、readyメソッドにより画面がロード完了するとイベント発火し、プレビュー画像の数を数えて10枚だった場合に画像を入力するボックスを削除するという記述になります。

④

  // 10枚登録されていた場合にボックスを消す
  $(document).ready(function(){
    var image_num = $('.item-image').length
    if (image_num==10){
      $('#image-box__container').css('display', 'none')
    }
  });

下記の記述は、readyメソッドにより画面がロード完了するとイベント発火し、inputタグが生成される記述になります。これを行わない場合、最初のinputタグへの入力が、既存の表示されているinputタグに入力されてしまいズレが生じてしまうため、画面ロード時に生成する必要があります。

⑤

  $(document).ready(function(){
    $('.js-file-edit').removeAttr('id');
    var num = $('.item-image').length - 1
    var image_id = Number($('#image-box-1').attr('class'))
    var append_div_count = Number($('div[id=1]').length) 
    var noreset_id = image_id + append_div_count
    const buildFileField = (num)=> {
      const html = `<div  class="js-file_group" data-index="${num}" id=1>
                      <input class="js-file-edit" type="file"
                      name="item[images_attributes][100][image]"
                      id="img-file" data-index="${num}" value="${noreset_id}" >
                    </div>`;
      return html;
    }
    $('#append-js-edit').append(buildFileField(num));
  });

下記の記述は、editで呼び出した画像データが入力されているinputタグとプレビュー画像をプレビュー画像の左下に表示されている削除をクリックした際に削除するものです。

⑥

  $(document).on("click", '.item-image__operetion--edit__delete__hidden', function(){
    //削除を押されたプレビュー要素を取得
    var target_image = $(this).parent().parent();
    //削除を押されたプレビューimageのfile名を取得
    var target_id = $(target_image).attr('id');
    var target_image_file = $('input[value="'+target_id+'"][type=hidden]');
    //プレビューを削除
    target_image.remove()
    target_image_file.remove()
    //image-box__containerクラスをもつdivタグのクラスを削除のたびに変更
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })

下記の記述は、新たに画像がinputタグに入力された際に生成呼び出した画像データが入力されているinputタグと新たに生成されたプレビュー画像をプレビュー画像の左下に表示されている削除をクリックした際に削除するものです。

⑦

  $(document).on("click", '.item-image__operetion--edit__delete__file', function(){
    //削除を押されたプレビュー要素を取得
    var target_image = $(this).parent().parent();
    var target_id = Number($(target_image).attr('id'));
    //削除を押されたプレビューimageのfile名を取得
    var target_image_file = $('#append-js-edit').children('div').children('input[value="'+target_id+'"][type=file]');
    //プレビューを削除
    target_image.remove()
    target_image_file.remove()
    //image-box__containerクラスをもつdivタグのクラスを削除のたびに変更
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })

下記の記述は、価格が入力された際に販売手数料、販売利益を計算して出力するものです。
編集した箇所は、2段目、４段目に記述してる内容で、readyメソッドにより画面ロード時に販売手数料、販売利益を計算し、表示させるというものです。

app/assets/javascript/sales_commission.js 

$(function() {
  var input=$("#item_exhibition_price"),fee=1/10,feeIncluded=$("#sales_commission_price");
  input.on("input",function(){
    feeIncluded.text(Math.floor($(this).val() * fee).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_commission_price.append("円");
    }
  });
  $(document).ready(function(){
    feeIncluded.text(Math.floor($("#item_exhibition_price").val() * fee).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_commission_price.append("円");
    }
  });
});

$(function() {
  var input=$("#item_exhibition_price"),tax=9/10,salesProfit=$("#sales_profit_proce");
  input.on("input",function(){
    salesProfit.text(Math.ceil($(this).val() * tax).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_profit_proce.append("円");
    }
  });
  $(document).ready(function(){
    salesProfit.text(Math.ceil($("#item_exhibition_price").val() * tax).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_profit_proce.append("円");
    }
  });
});

これで編集機能完成です。
ここまで読んでくださり、ありがとうございます。

webpackとかふつうに使っていると
一つのファイルにしてくれるけど
ローカルでの挙動とサーバーでの挙動が激的に変化するときがあって
そのときは、もう手におえない状態になるのだ。。

なにせ、まとめたファイル(ここでは/dist/bundle.jsとでもしとこう)を
解析しようにも、そもそもごったまぜのスープになっており
どこのパッケージのどこのバージョンが。。とか基本は、省かれてる。

なんとなくならわかるけど、じゃあどう対処するんだよーｗってなる。。

そもそも、webpackとかって、いままで、ふつうにルートディレクトリーに
htmlファイルを置いとけば、ぜったい404とかでないのだが、
webpackの場合は、そうゆう形式でもないし。
基本react系ので、routerとかで、振り分けているのだし。。

で、それっぽいキーワードで、ググっても、的を得ない回答しかでてこないしｗ

firebase系のjsもimportしてるのだが、最近はそれを疑っているありさま。ｗ

もうここまでくるとカルト宗教化してるぜ

はじめに・目的

• chat app.にてユーザー検索後、グループ追加を実装
• ユーザー検索をインクリメンタルサーチ
• サーチ後、追加ボタンでグループ追加。
• 削除ボタンでメンバー削除
• gif https://i.gyazo.com/00f3a7ce88036db231b951564a69c8a2.mp4

インクリメンタルサーチ実装

1.API側準備

• routing

routes.rb

resources :users, only: [:index]

• users_controller.rbにindex定義

users_controllers.rb

class UsersController < ApplicationController
  def index
    respond_to do |format|
      format.html
      format.json
    end
  end

• app/views/usersディレクトリにindex.json.jbuilderファイルを作成

index.json.jbuilder

json.array! @users do |user|
  json.id user.id
  json.name user.name
end

2.テキストフィールド作成

_form.html.haml

.chat-group-form__field
    .chat-group-form__field--left
      %label.chat-group-form__label{:for => "chat_group_チャットメンバーを追加"} チャットメンバーを追加
    .chat-group-form__field--right
      .chat-group-form__search.clearfix
        %input#user-search-field.chat-group-form__input{:placeholder => "追加したいユーザー名を入力してください", :type => "text"}/
      #user-search-result

  .chat-group-form__field.clearfix
    .chat-group-form__field--left
      %label.chat-group-form__label{:for => "chat_group_チャットメンバー"} チャットメンバー
    .chat-group-form__field--right
      #chat-group-users.js-add-user

3.テキストフィールドに入力するたび、イベント発火

users.js

$(function() {
  $("#user-search-field").on("keyup", function() {
    let input = $("#user-search-field").val();
    console.log(input);
  });
});

4.非同期通信ajax

users.js

  $("#user-search-field").on("keyup", function() {
    let input = $("#user-search-field").val();
    $.ajax({
      type: "GET",
      url: "/users",
      data: { keyword: input },
      dataType: "json"
    })
  });
});

5.入力値を曖昧検索する

users_controller.rb

def index
  return nil if params[:keyword] == ""
  @users = User.where(['name LIKE ?', "%#{params[:keyword]}%"] ).where.not(id: current_user.id).limit(10)
  respond_to do |format|
    format.html
    format.json
  end
end

params[:keyword]に値が入っていればそのまま処理は続けられ、空だった場合はそこで処理が終わります。
検索処理の内容は、whereメソッドを使用し、入力された値を含むかつ、ログインしているユーザーのidは除外するという条件で取得しています。

6.非同期通信の結果を得て、HTMLを作成

users.js

$(function() {
  function addUser(user) {
    let html = `
      <div class="chat-group-user clearfix">
        <p class="chat-group-user__name">${user.name}</p>
        <div class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id="${user.id}" data-user-name="${user.name}">追加</div>
      </div>
    `;
    $("#user-search-result").append(html);
  }

  function addNoUser() {
    let html = `
      <div class="chat-group-user clearfix">
        <p class="chat-group-user__name">ユーザーが見つかりません</p>
      </div>
    `;
    $("#user-search-result").append(html);
  }
  $("#user-search-field").on("keyup", function() {
    let input = $("#user-search-field").val();
    $.ajax({
      type: "GET",
      url: "/users",
      data: { keyword: input },
      dataType: "json"
    })
      .done(function(users) {
        $("#user-search-result").empty();

        if (users.length !== 0) {
          users.forEach(function(user) {
            addUser(user);
          });
        } else if (input.length == 0) {
          return false;
        } else {
          addNoUser();
        }
      })
      .fail(function() {
        alert("通信エラーです。ユーザーが表示できません。");
      });
  });
});

メンバーの追加・削除機能の実装

1.追加ボタンが押された時にイベントが発火するようにする

users.js

$(document).on("click", ".chat-group-user__btn--add", function() {

• $(document).onすることで常に最新のHTMLの情報を取得する

2.追加ボタンをクリックされたユーザーの名前を、チャットメンバーの部分に追加し、検索結果からは消す

まずは検索結果から名前を消す方法

users.js

$(document).on("click", ".chat-group-user__btn--add", function() {
    console.log
    const userName = $(this).attr("data-user-name");
    const userId = $(this).attr("data-user-id");
    $(this)
      .parent()
      .remove();

• 「追加」ボタンがクリックされたユーザーが、検索結果一覧から消えるどのユーザーのhtmlかを特定するためにdata-user-idとdata-user-nameを取得するため、対象であるユーザー情報を定数へ代入。
• イベントが発生した要素を取得し、その親要素を削除
• 今イベントが発生している追加ボタンのaタグを起点に、その親要素のchat-group-userを削除

次にメンバーをチャットメンバーに追加する

users.js

$(document).on("click", ".chat-group-user__btn--add", function() {
    console.log
    const userName = $(this).attr("data-user-name");
    const userId = $(this).attr("data-user-id");
    $(this)
      .parent()
      .remove();
    addDeleteUser(userName, userId);
    addMember(userId);
  });

users.js(関数定義)

  function addDeleteUser(name, id) {   //画面上の追加
    let html = `
    <div class="chat-group-user clearfix" id="${id}">
      <p class="chat-group-user__name">${name}</p>
      <div class="user-search-remove chat-group-user__btn chat-group-user__btn--remove js-remove-btn" data-user-id="${id}" data-user-name="${name}">削除</div>
    </div>`;
    $(".js-add-user").append(html);
  }
  function addMember(userId) {        //DB上への追加
    let html = `<input value="${userId}" name="group[user_ids][]" type="hidden" id="group_user_ids_${userId}" />`;
    $(`#${userId}`).append(html);
  }

• <input name='group[user_ids][]' type='hidden' value='ユーザーのid'> この記述により、userがDBに保存される

3.削除ボタンで、チャットメンバーから削除する機能を実装

users.js

$(document).on("click", ".chat-group-user__btn--remove", function() {
    $(this)
      .parent()
      .remove();
  });

• .chat-group-user__btn--removeがクリックされたら、その親要素を削除。

4.ログイン中のユーザー(current_user)をチャットメンバーに表示し、他のメンバーを同じく表示する。

_form.html.haml

#chat-group-users.js-add-user
 .chat-group-user.clearfix.js-chat-member
   %input{name: "group[user_ids][]", type: "hidden", value: current_user.id}
   %p.chat-group-user__name= current_user.name
//current_user.idをgroup[user_ids]の配列に追加して、cuurent_user.nameを画面に表示

- group.users.each do |user|
  - if current_user.name != user.name
    .chat-group-user.clearfix.js-chat-member
      %input{name: "group[user_ids][]", type: "hidden", value: user.id}
      %p.chat-group-user__name
        = user.name
      %a.user-search-remove.chat-group-user__btn.chat-group-user__btn--remove.js-remove-btn
        削除
//user.nameと削除ボタンを全て表示

全体像

users.js

$(function() {
  var search_list = $("#user-search-result");

  function appendUser(user) {
    var html = `
              <div class="chat-group-user clearfix">
                <p class="chat-group-user__name">${user.name}</p>
                <div class="user-search-add chat-group-user__btn chat-group-user__btn-add" data-user-id="${user.id}" data-user-name="${user.name}">追加</div>
              </div>
              `;
    search_list.append(html);
  }
  function appendErrMsgToHTML() {
    var html = `
              <div class="chat-group-user clearfix">
                <p class="chat-group-user__name">ユーザーが見つかりません</p>
              </div>`;
    search_list.append(html);
  }
  function addDeleteUser(name, id) {
    let html = `
                <div class="chat-group-user clearfix" id="${id}">
                  <p class="chat-group-user__name">${name}</p>
                  <div class="user-search-remove chat-group-user__btn chat-group-user__btn--remove js-remove-btn" data-user-id="${id}" data-user-name="${name}">削除</div>
                </div>
                `;
    $(".js-add-user").append(html);
  }
  function addMember(userId) {
    let html = `<input value="${userId}" name="group[user_ids][]" type="hidden" id="group_user_ids_${userId}" />`;
    $(`#${userId}`).append(html);
  }
  $(".chat-group-form__input").on("keyup", function(){
    var input = $(".chat-group-form__input").val();
    $.ajax({
      type: 'GET',
      url: '/users',
      data: { keyword: input },
      dataType: 'json'
    })
    .done(function(users) {
      search_list.empty();
      if (users.length !== 0) {
        users.forEach(function(user) {
          appendUser(user);
        });
      } else if (input.length == 0) {
        return false;
      } else {
        appendErrMsgToHTML();
      }
    })
    .fail(function() {
      alert('ユーザーが表示できません。');
    });
  });
  $(document).on('click','.chat-group-user__btn-add',function(){
    console.log
    const userName = $(this).attr("data-user-name");
    const userId = $(this).attr("data-user-id");
    $(this)
      .parent()
      .remove();
    addDeleteUser(userName, userId);
    addMember(userId);
  });
  $(document).on('click', '.chat-group-user__btn--remove', function(){
    $(this)
      .parent()
      .remove();
  });
});

Vue.jsのScoped CSSは完全にはscopedじゃない、という話を聞いたので検証してみました。
結果、コンポーネント最上位の要素と、slotについては気をつける必要があることが分かりました。

参考記事

親コンポーネントのstyleが子コンポーネントに影響を与える仕組みは、以下が詳しいです。

• https://qiita.com/wintyo/items/dfc232255ad45fdf376f
• https://www.dkrk-blog.net/javascript/vue_scopedcss

検証環境

• OS: macOS Catalina 10.15.5
• ブラウザ: Google Chrome 83.0.4103.116（Official Build）(64bit)
• Vue.js: 2.6.11

検証1: 素朴にstyleを当てた場合

親、子、孫コンポーネントにそれぞれ違った色を割り当てました。
すると、各コンポーネントの最上位の要素には親コンポーネントのスタイルが適用されてしまいました。

Parent.vue

<template>
  <div class="root-div">
    this is root div of parent
    <h1 class="my-title">this is h1 of parent</h1>
    <div  class="h2-container">
      <h2>this is h2 of parent</h2>
    </div>
    <Child />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Child from "@/components/Child.vue";

export default Vue.extend({
  name: "Parent",
  components: {
    Child,
  },
});
</script>

<style scoped lang="scss">
.root-div {
  color: red;
}
.my-title {
  color: red;
}
h2 {
  color: red;
}
</style>

Child.vue

<template>
  <div class="root-div">
    this is root div of child
    <h1 class="my-title">this is h1 of child</h1>
    <div  class="h2-container">
      <h2>this is h2 of child</h2>
    </div>
    <GrandChild />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import GrandChild from "@/components/GrandChild.vue";

export default Vue.extend({
  name: "Child",
  components: {
    GrandChild,
  },
});
</script>

<style scoped lang="scss">
.root-div {
  color: blue; // こいつが効いていない
}
.my-title {
  color: blue;
}
h2 {
  color: blue;
}
</style>

GrandChild.vue

<template>
  <div class="root-div">
    this is root div of grandchild
    <h1 class="my-title">this is h1 of grandchild</h1>
    <div  class="h2-container">
      <h2>this is h2 of grandchild</h2>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "GrandChild",
});
</script>

<style scoped lang="scss">
.root-div {
  color: green;
}
.my-title {
  color: green;
}
h2 {
  color: green;
}
</style>

検証2: 全称セレクタ(*)を使った場合

*を使って乱暴にstyleを指定した場合どうなるかを見てみました。
結果、検証1と同じく、各コンポーネント最上位の要素だけは親コンポーネントのstyleの影響が出ました。
※検証1のコードから、Child.vueだけ変更しました。

Child.vue

<template>
  <div class="root-div">
    this is root div of child
    <h1 class="my-title">this is h1 of child</h1>
    <div  class="h2-container">
      <h2>this is h2 of child</h2>
    </div>
    <GrandChild />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import GrandChild from "@/components/GrandChild.vue";

export default Vue.extend({
  name: "Child",
  components: {
    GrandChild,
  },
});
</script>

<style scoped lang="scss">
.root-div * {
  color: blue;
}
* {
  color: blue;
}
* * {
  color: blue;
}
</style>

検証3: globalのcssがある場合

当たり前ですが、ページ全体に適用されているcssがある場合、競合します。
例えば、ページ全体に* { color: black!important }を当てたら、すべて黒になります。

App.vue

<style lang="scss">
* {
  color: black!important; // プロダクトコードで書いたら殴られるやつ
}
</style>

もちろん、!importantを付けなければ、コンポーネント内のcssが優先的に適用されます。
(この辺はScoped CSSというよりはCSSそのものの話)

App.vue

<style lang="scss">
* {
  color: black;
}
</style>

検証4: slotを使った場合

slotを使って、親から子へタグを渡した場合、渡したタグには親コンポーネントのstyleが適用されました。

Parent.vue

<template>
  <div class="root-div">
    this is root div of parent
    <h1 class="my-title">this is h1 of parent</h1>
    <div  class="h2-container">
      <h2>this is h2 of parent</h2>
    </div>
    <Child>
      <!-- 親からタグごとslotを挟むと、親のstyleが適用される -->
      <template #my-slot>
        <p>slot: this is p of parent</p>
        <div>
          <h2>slot: this is h2 of parent</h2>
        </div>
      </template>
    </Child>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Child from "@/components/Child.vue";

export default Vue.extend({
  name: "Parent",
  components: {
    Child,
  },
});
</script>

<style scoped lang="scss">
.root-div {
  color: red;
}
.my-title {
  color: red;
}
h2 {
  color: red;
}
p {
  color: red;
}
</style>

Child.vue

<template>
  <div class="root-div">
    this is root div of child
    <h1 class="my-title">this is h1 of child</h1>
    <div  class="h2-container">
      <h2>this is h2 of child</h2>
    </div>
    <slot name="my-slot">
        <p>slot: this is p of child</p>
        <div>
          <h2>slot: this is h2 of child</h2>
        </div>
    </slot>
    <GrandChild />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import GrandChild from "@/components/GrandChild.vue";

export default Vue.extend({
  name: "Child",
  components: {
    GrandChild,
  },
});
</script>

<style scoped lang="scss">
.root-div {
  color: blue;
}
.my-title {
  color: blue;
}
h2 {
  color: blue;
}
p {
  color: blue;
}
</style>

一方、親から子へ文字列だけを渡した場合、子のstyleが適用されました。

Parent.vue

<template>
  <div class="root-div">
    this is root div of parent
    <h1 class="my-title">this is h1 of parent</h1>
    <div  class="h2-container">
      <h2>this is h2 of parent</h2>
    </div>
    <Child>
      <!-- 親から文字列だけを渡すようにすれば、親のstyleは適用されない -->
      <template #my-slot-p>slot: this is p of parent</template>
      <template #my-slot-h2>slot: this is h2 of parent</template>
    </Child>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Child from "@/components/Child.vue";

export default Vue.extend({
  name: "Parent",
  components: {
    Child,
  },
});
</script>

<style scoped lang="scss">
.root-div {
  color: red;
}
.my-title {
  color: red;
}
h2 {
  color: red;
}
p {
  color: red;
}
</style>

Child.vue

<template>
  <div class="root-div">
    this is root div of child
    <h1 class="my-title">this is h1 of child</h1>
    <div  class="h2-container">
      <h2>this is h2 of child</h2>
    </div>
    <p><slot name="my-slot-p">slot: this is p of child</slot></p>
    <div>
      <h2><slot name="my-slot-h2">slot: this is h2 of child</slot></h2>
    </div>
    <GrandChild />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import GrandChild from "@/components/GrandChild.vue";

export default Vue.extend({
  name: "Child",
  components: {
    GrandChild,
  },
});
</script>

<style scoped lang="scss">
.root-div {
  color: blue;
}
.my-title {
  color: blue;
}
h2 {
  color: blue;
}
p {
  color: blue;
}
</style>

で、結局何に気をつければいいのか

• コンポーネント最上位の要素になるべくstyleを当てない
• 当てざるを得ない場合、.component-name-root { display: flex }のように、重複しないクラス名を付けて、styleを指定する
• 自前でslotを作る場合、極力DOM構造は子コンポーネント側で定義する
• デザインフレームワーク(vuetifyとか)の制約上slotにDOMを渡さざるを得ない場合は、予期せぬstyleが適用されないよう気をつける

所感

完全でないとはいえ、知らずに使っていてもそんなに気にならない程度にはscopedにできていると感じました。
個人的にはslotを使わないため、各コンポーネントの最上位のクラス名だけ気をつければ問題なし! という印象です。
Scoped CSS便利。

概要

前と同様、IndexedDB + Vue CLIで
Dexie.js　ライブラリを使用した構成となり。
json ファイルのエクポート、インポートの調査してみました
File API , Blob等で実現できそうでした。

・インポートした jsonファイルを　IndexedDB
　登録まで。可能でした

構成

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

参考

File
https://developer.mozilla.org/ja/docs/Web/API/File

Blob:
https://developer.mozilla.org/ja/docs/Web/API/Blob

http://www.tohoho-web.com/html5/file_api.html

https://qiita.com/wadahiro/items/eb50ac6bbe2e18cf8813

package.json

https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/package.json

---

Vue components

・json生成、エクスポート
test.vue
https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/src/components/Files/test.vue

var arr = [
    {id: 1  , name: "n1"},
    {id: 2  , name: "n2"},
    {id: 3  , name: "n3"},
    {id: 4  , name: "n4"},
    {id: 5  , name: "n5"},
];
var content = JSON.stringify( arr );
var blob = new Blob([ content ], { "type" : "application/json" });

・jsonアップロード, db登録
test2.vue
https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/src/components/Files/test2.vue

change_proc: function(){
    console.log("#-change_proc")
    var self = this
    var files = window.document.getElementById('file1').files;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        console.log("i: " + i );                
        console.log("Name: " + file.name);
        console.log("Size: " + file.size);
        console.log("Type: " + file.type);
        console.log("Date: " + file.lastModified);
        console.log("Date: " + file.lastModifiedDate);
        var reader = new FileReader();
        reader.onload = function(evt) {
            console.log("State: " + evt.target.readyState);
            console.log("Result: " + evt.target.result);
            var result =evt.target.result;
            var dat = JSON.parse(result || '[]')
            self.add_item(dat)
            self.items = dat
            console.log(dat)
        //document.getElementById("output1").innerHTML = evt.target.result;
        };
        reader.onerror = function(evt) {
            console.log(evt.target.error.name);
        };
        reader.readAsText(file, "utf-8");             
    }            
},

---

JavaScriptのループ処理について備忘録としてまとめておきます。

Javascriptのループ処理

• for文
• for...in文
• for...of文
• while文
• do...while文
• 高階関数によるループ

for文

for (初期化式; 条件式; 加(減)算式)

はじめに初期化式を書きます。その次にループを抜けるための条件を書き、最後に加（減）算をします。

const names = ["太郎", "次郎", "三郎"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

ちなみに式を全て省略した書き方をすることもできます。この場合breakを書かないと無限ループになるので気をつけましょう。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

for (;;) {
  if (i >= names.length) break; // もしiがnamesの要素数以上だったら処理を抜ける。
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/

for...in文

for...inはそれぞれの要素に対して反復処理を行います。

for (変数 in オブジェクト) {
  処理
}

配列

const names = ["太郎", "次郎", "三郎"];

for (let i in names) {
     // iにはインデックス番号が入る
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

オブジェクト

const obj = {name: "太郎", age: 20, gender: "male"};

for (let i in obj) {
    // iにはキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/

for...of文

for...ofは値に対して反復処理されます。

for (変数 of オブジェクト) {
  処理
}

配列

const names = ["太郎", "次郎", "三郎"];

for (let i of names) {
    // iにはそれぞれの値が入る
  console.log(i);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

オブジェクトの場合はObject.keys()で配列に変換にしてから処理をします。

const obj = {name: "太郎", age: 20, gender: "male"};

const keys = Object.keys(obj);
// keysは["name", "age", "gender"]
for (let i of keys) {
    // iにはそれぞれのキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/

while文

while文は形こそ違いますがやっていることはfor文と一緒です。

初期化式
while (条件式) {
  加(減)算式
}

条件式がtrueの場合反復処理を行うのでwhile文の中で条件をfalseにするための処理（今回はiをカウントアップ）しないと無限ループになるので気をつけましょう。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

while (i < names.length) {
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/

do...while文

do...while文は必ず最初の処理は実行され、その後は条件によって実行したい場合に使われます。

do {
  処理
} while (条件式);

doの間は実行されるので0番目の要素の太郎が出力されます。その後は条件式がfalseなので実行されません。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

do {
  console.log(names[i]);
} while (i < 0);

// => 太郎

高階関数

高階関数とは、引数に関数を取るもの、もしくは関数を返り値として返すもののことを言います。

代表的な高階関数

• forEach
• map
• filter
• sort
• reduce

forEach

forEachは引数にとった関数を各要素に対して繰り返します。返り値はundefinedを返します。

const names = ["太郎", "次郎", "三郎"];

names.forEach(function(name) {
  console.log(name);
});
/* => "太郎"
      "次郎"
      "三郎"
*/

map

map()はforEach()と出力結果は同じですが返り値に関数を実行した結果を返します。返り値の配列を別に使いたい時に使用します。

const names = ["太郎", "次郎", "三郎"];

let newName = names.map(function(name) {
  console.log(name);
  return name + "さん";
});
/* => "太郎"
      "次郎"
      "三郎"
*/

console.log(newName); // => (3) ["太郎さん", "次郎さん", "三郎さん"]
                      // forEachの場合はundefined

filter

filter()は関数に与えられた条件に合致したものを新しい配列として返します。

const languages = ["JavaScript", "Ruby", "Go"];

let newName = languages.filter(function(lang) {
  return lang.length > 3;
});

console.log(newName); // => (2) ["JavaScript", "Ruby"]

sort

sort()は要素を昇順・降順に並べたりする際に使用します。

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

nums.sort(function (a, b) {
  return a - b;
});

console.log(nums); // => (5) [1, 2, 3, 4, 5]

reduce

reduce()は配列の各要素に対して関数を実行し、最終的に単一の値を返します。

const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(newNums); // => 10

これは少しイメージしにくいので順を追って説明します。

まず最初の呼び出しで第１引数であるaccumulatorには0が、第２引数であるcurrentValueには最初の要素の値である1が入っています。

nums.reduce(function(0, 1) {
  return  0 + 1;
});

その返り値をaccumulatorが受け取ります。するとaccumulatorが1、currentValueは配列の次の値の2になります。

nums.reduce(function(1, 2) {
  return  1 + 2;
});

次はaccumulatorが3、currentValueも3になります。このように続けていくと最終的にaccumulatorが6、currentValueが4になりますので最終的に10が返されnewNumsの出力が10になります。

const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue; // 6 + 4
});

console.log(newNums); // => 10

最後に

JavaScriptのループ処理についてまとめてみました。
ループ処理は今どのような値が入っているのかを調べていくと理解が深まると思います。
MDN等を参照して手を動かしながら理解していきましょう。

参考

MDN ループと反復処理

JavaScriptのループ処理について備忘録としてまとめておきます。

Javascriptのループ処理

• for文
• for...in文
• for...of文
• while文
• do...while文
• 高階関数によるループ

for文

for (初期化式; 条件式; 加(減)算式)

はじめに初期化式を書きます。その次にループを抜けるための条件を書き、最後に加（減）算をします。

const names = ["太郎", "次郎", "三郎"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

ちなみに式を全て省略した書き方をすることもできます。この場合breakを書かないと無限ループになるので気をつけましょう。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

for (;;) {
  if (i >= names.length) break; // もしiがnamesの要素数以上だったら処理を抜ける。
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/

for...in文

for...inはそれぞれの要素に対して反復処理を行います。

for (変数 in オブジェクト) {
  処理
}

配列

const names = ["太郎", "次郎", "三郎"];

for (let i in names) {
     // iにはインデックス番号が入る
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

オブジェクト

const obj = {name: "太郎", age: 20, gender: "male"};

for (let i in obj) {
    // iにはキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/

for...of文

for...ofは値に対して反復処理されます。

for (変数 of オブジェクト) {
  処理
}

配列

const names = ["太郎", "次郎", "三郎"];

for (let i of names) {
    // iにはそれぞれの値が入る
  console.log(i);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

オブジェクトの場合はObject.keys()で配列に変換にしてから処理をします。

const obj = {name: "太郎", age: 20, gender: "male"};

const keys = Object.keys(obj);
// keysは["name", "age", "gender"]
for (let i of keys) {
    // iにはそれぞれのキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/

while文

while文は形こそ違いますがやっていることはfor文と一緒です。

初期化式
while (条件式) {
  加(減)算式
}

条件式がtrueの場合反復処理を行うのでwhile文の中で条件をfalseにするための処理（今回はiをカウントアップ）しないと無限ループになるので気をつけましょう。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

while (i < names.length) {
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/

do...while文

do...while文は必ず最初の処理は実行され、その後は条件によって実行したい場合に使われます。

do {
  処理
} while (条件式);

doの間は実行されるので0番目の要素の太郎が出力されます。その後は条件式がfalseなので実行されません。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

do {
  console.log(names[i]);
} while (i < 0);

// => 太郎

高階関数

高階関数とは、引数に関数を取るもの、もしくは関数を返り値として返すもののことを言います。

代表的な高階関数

• forEach
• map
• filter
• sort
• reduce

forEach

forEachは引数にとった関数を各要素に対して繰り返します。返り値はundefinedを返します。

const names = ["太郎", "次郎", "三郎"];

names.forEach(function(name) {
  console.log(name);
});
/* => "太郎"
      "次郎"
      "三郎"
*/

map

map()はforEach()と出力結果は同じですが返り値に関数を実行した結果を返します。返り値の配列を別に使いたい時に使用します。

const names = ["太郎", "次郎", "三郎"];

let newName = names.map(function(name) {
  console.log(name);
  return name + "さん";
});
/* => "太郎"
      "次郎"
      "三郎"
*/

console.log(newName); // => (3) ["太郎さん", "次郎さん", "三郎さん"]
                      // forEachの場合はundefined

filter

filter()は関数に与えられた条件に合致したものを新しい配列として返します。

const languages = ["JavaScript", "Ruby", "Go"];

let newName = languages.filter(function(lang) {
  return lang.length > 3;
});

console.log(newName); // => (2) ["JavaScript", "Ruby"]

sort

sort()は要素を昇順・降順に並べたりする際に使用します。

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

nums.sort(function (a, b) {
  return a - b;
});

console.log(nums); // => (5) [1, 2, 3, 4, 5]

reduce

reduce()は配列の各要素に対して関数を実行し、最終的に単一の値を返します。

const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(newNums); // => 10

これは少しイメージしにくいので順を追って説明します。

まず最初の呼び出しで第１引数であるaccumulatorには0が、第２引数であるcurrentValueには最初の要素の値である1が入っています。

nums.reduce(function(0, 1) {
  return  0 + 1;
});

その返り値をaccumulatorが受け取ります。するとaccumulatorが1、currentValueは配列の次の値の2になります。

nums.reduce(function(1, 2) {
  return  1 + 2;
});

次はaccumulatorが3、currentValueも3になります。このように続けていくと最終的にaccumulatorが6、currentValueが4になりますので最終的に10が返されnewNumsの出力が10になります。

const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue; // 6 + 4
});

console.log(newNums); // => 10

最後に

JavaScriptのループ処理についてまとめてみました。
ループ処理は今どのような値が入っているのかを調べていくと理解が深まると思います。
MDN等を参照して手を動かしながら理解していきましょう。

参考

MDN ループと反復処理