Action Cableは、Railsのアプリケーションと同様の記述で、WebSocket通信という双方向の通信によるリアルタイム更新機能を実装できるフレームワークで、Rails5から実装されました。

Action Cableを利用することで、たとえばリアルタイムで更新されるチャット機能を実装することができます。

チャネルの作成

channel

リアルタイム更新機能を実現するサーバー側の仕組みでデータの経路を設定したり、送られてきたデータを画面上に表示させたりします。

チャネルを作成するコマンド

ターミナル


rails g channel message #チャネル名
# ↓実行結果↓
Running via Spring preloader in process *****
      invoke  test_unit
      create  test/channels/message_channel_test.rb
      create  app/channels/message_channel.rb
   identical  app/javascript/channels/index.js
   identical  app/javascript/channels/consumer.js
      create  app/javascript/channels/message_channel.js

生成されるファイルのうち以下の2つが重要です。
app/controller/message_controller.rb → クライアントとサーバーを結びつけるためのファイル
app/javascript/channels/message_channel.js → サーバーから送られてきたデータをクライアントに描画するためのファイル

クライアントとサーバーを結びつける

stream_fromメソッド

サーバーとクライアントを関連づけるメソッドでAction Cableにあらかじめ用意されています。

app/controller/messages_controller.rb

class MessageChannel < ApplicationCable::Channel
  def subscribed
    stream_from "message_channel" #記述箇所
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

broadcast

stream_fromメソッドで関連付けられるデータの経路で、サーバーから送られるデータの経路です。broadcastを介してデータをクライアントに送信します。

broadcastを使ってコントローラーへ以下のように記述します。

app/controller/messages_controller.rb

class MessagesController < ApplicationController
  def new
    @messages = Message.all
    @message = Message.new
  end

  def create
    @message = Message.new(text: params[:message][:text])
    if @message.save
      ActionCable.server.broadcast 'message_channel', content: @message
    end
  end
end

broadcastという経路を通して、message_channelに向けて@messageをcontentに入れてデータを送信しています。

JavaScriptへの記述

サーバーから送信されたデータはdataの中にcontentという名称で入っているので、data.content.textで使用できます。

app/javascript/channels/message_channel.js

import consumer from "./consumer"

consumer.subscriptions.create("MessageChannel", {
  received(data) {
    // 以下で使用
    const html = `<p>${data.content.text}</p>`;
    const messages = document.getElementById('messages');
    const newMessage = document.getElementById('message_text');
    messages.insertAdjacentHTML('afterbegin', html);
    newMessage.value='';
  }
});

ちなみにビューはこんな感じです。

app/views/messages/new.html.erb

<h3>mini-talk-app</h3>
<%= form_with model: @message do |f| %>
  <%= f.text_field :text %>
  <%= f.submit '送信' %>
<% end %>
<div id="messages">
  <% @messages.reverse_each.each do |message| %>
    <p><%= message.id %></p>
    <p><%= message.text %></p>
  <% end %>
</div>

content以外もクライアントに送信できる

app/controller/messages_controller.rbでは保存したメッセージの値をcontentに入れて送信していましたが、設定すれば他の値も送ることができます。

ぼくが今開発しているアプリでは、こんな感じで情報を追加してクライアント側に送信しています。

app/controllers/chats_controller.rb

class ChatsController < ApplicationController  def create
    @chat = Chat.new(chat_params)
    if @chat.save
      # userとtimeにそれぞれ@userと@timeを入れている
      @user = current_user
      @time = @chat.created_at.strftime("%Y-%m-%-d %-H:%-M")
      ActionCable.server.broadcast 'chat_channel', content: @chat, user: @user, time: @time
    end
  end

  private
  def chat_params
    params.require(:chat).permit(:text).merge(
      user_id: current_user.id,
      group_id: params[:group_id]
    )
  end
end

クライアント（JavaScript）側ではこのようにデータを利用しています。JavaScript側で投稿日時の表示形式を変更する方法が分からなかったので、事前にサーバー（Ruby）側で表示形式を変更してから送信しています。

app/javascript/channels/chat_channel.js

import consumer from "./consumer"

consumer.subscriptions.create("ChatChannel", {
  received(data) {
    // 送信されたデータを以下で使用
    const html = `<div class="each-chat">
                    <p class="chat-time">${data.time}</p>
                    <p class="chat-text">${data.content.text}</p>
                    <p class="chat-user">${data.user.name}</p>
                  </div>`;
    const chats = document.getElementById("chats");
    chats.insertAdjacentHTML("afterbegin", html);
    const newChat = document.getElementById("chat_text");
    newChat.value="";
  }
});

参考資料

【Rails6.0】ActionCableを使用したライブチャットアプリを実装する手順を解説

今日は３月14日、πの日ということで円周率の計算をするプログラムを作ろう、という趣旨の記事です。

使ったもの

HTMLとタイトルにありますが、HTMLの記述は数行でほとんどがJavaScriptです。HTMLのcanvas要素をJavaScriptでゴリゴリいじって描画します。
canvasについては、このサイトを参考にしました。

計算方法

数値計算ではなく、確率（乱数）を用いるモンテカルロ法で円周率を求めます。

こんな感じの円と四角形に、ランダムに点を打ち込みます。

青色の点は円の内側、赤色の点は円の外側にある点です。
均一に点がばらまかれていれば、青と青＋赤の点の数の比は、円の面積と四角形の面積比と等しいはずです。
青色の点の数をa、赤色の点の数をbとすると、
$\pi r^2:4r^2 = a:a+b$
$(a+b)\pi r^2 = 4ar^2$
$\pi = \frac{4a}{a+b}$
となり、上記式を用いて円周率を求めることができる。

実装

HTML

canvas要素にidをつけて置いておくだけでいいです。

HTMLのソースコード

pi.html

<!DOCTYPE html>
<html>
    <head>
        <title>円周率</title>
        <script type="text/javascript" src="./pi.js"></script>
    </head>
    <body onload="init();">
        <h1>モンテカルロ法による円周率の計算</h1>
        <canvas id="pi"></canvas>
    </body>
</html>

JavaScript

コードが長いので詳しい説明は省きます。今日中に終わりそうにないので。
ただ、やってることは、
1.背景の描画
2.乱数で点の生成
3.$\pi$の計算
4.2,3の繰り返し
と簡単なので、頭のいい人はもう少し短いコードで書けると思います。

ベクトルクラスを実装する際はこちらの記事を参考にさせて頂きました。

JavaScriptのソースコード

pi.js

//canvas要素の大きさ
const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 400;

//変数の準備
var ctx;
const FPS = 1000;
const TIME = 1000/FPS;
var total = 0;
var In = 0;

//ベクトルクラスの実装
class vec2{
    //
    constructor(x=0, y=0){
        this.x = x;
        this.y = y;
    }

    //足し算メゾット
    add(v){
        this.x += v.x;
        this.y += v.y;
        return this;
    }

    //ベクトルを複製するメゾット
    clone(){
        return new vec2(this.x, this.y);
    }

    //静的足し算メゾット
    static add(v1, v2){
        return v1.clone().add(v2);
    }
}

//原点の位置を定義
var origin = new vec2((CANVAS_WIDTH/2),(CANVAS_HEIGHT/2));

//bodyが読み込まれたときに実行される関数
//
function init(){
    //canvas要素を取得
    let pi = document.getElementById("pi");
    if(pi.getContext){
        ctx = pi.getContext("2d");

        //canvasのサイズを指定
        pi.width = CANVAS_WIDTH;
        pi.height = CANVAS_HEIGHT;

        //背景の描画
        draw_init();

        //点を打ちまくる
        setInterval(draw,TIME);
    }
}

//繰り返し実行される関数
function draw(){
    //文字を消す処理
    ctx.clearRect(0,360,CANVAS_WIDTH,400);

    //乱数の代入と変数の準備
    let tempX = getRandomInt(200) - 100;
    let tempY = getRandomInt(200) - 100;
    let pi;

    //円の中か外の判定
    ctx.fillStyle = "rgb(255,0,0)"
    if((tempX**2)+(tempY**2) <= 100**2){
        In++;
        ctx.fillStyle = "rgb(0,0,255)"
    }
    total++;

    //piの計算
    pi = 4*In/total;

    //点の描画処理
    let v1 = new　vec2(tempX,tempY);
    v1.y *= -1;
    let screen = vec2.add(v1,origin);
    ctx.fillRect(screen.x,screen.y,1,1);


    //piとtotalの表示
    ctx.fillStyle = "rgb(0,0,0)"
    ctx.fillText(pi,0,380);
    ctx.fillText(total,0,400);
}

//背景を描画する関数
function draw_init(){
    //x軸
    ctx.beginPath();
    ctx.moveTo(0,CANVAS_HEIGHT/2);
    ctx.lineTo(CANVAS_WIDTH,CANVAS_HEIGHT/2);
    ctx.stroke();
    ctx.font = "20px serif";
    ctx.fillText("x",CANVAS_WIDTH-20,(CANVAS_HEIGHT/2)+20);

    //y軸
    ctx.beginPath();
    ctx.moveTo(CANVAS_WIDTH/2,CANVAS_HEIGHT);
    ctx.lineTo(CANVAS_WIDTH/2,0);
    ctx.stroke();
    ctx.fillText("y",(CANVAS_WIDTH/2)+10,15);

    //原点
    ctx.fillText("O",(CANVAS_WIDTH/2)-20,(CANVAS_HEIGHT/2)+20);

    //四角形
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(100,300);
    ctx.lineTo(300,300);
    ctx.lineTo(300,100);
    ctx.lineTo(100,100);
    ctx.stroke();

    //円
    let t;
    for(t=0;t<=2*Math.PI;t+=0.01){
        let v2 = new vec2(100,t);
        let v1 = new vec2(v2.x*Math.cos(v2.y),v2.x*Math.sin(v2.y));
        v1.y *= -1;
        let screen = vec2.add(v1, origin);
        ctx.fillRect(screen.x, screen.y, 1, 1);
    }
}

//乱数を返す関数
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

実行結果

いい感じに近似出来ているのではないだろうか？

あとがき的なもの

初めて記事を書きました。なので少し言い訳と予防線を貼ったりします。
マークダウンの書き方などわからないことが多く、見苦しい記事になっていたら申し訳ないです。
間違いなどがありましたら、コメントで指摘していただけたら修正いたします。

もうすぐ3月１４日が終わってしまう。はたして、3月１４日に見られた人はいるのだろうか。

目次

1.この記事の目的
2.概要
3.パッケージ管理システム
4.もしnpmがなかったら
5.npmの使い方
6.便利なコマンド
7.最後に
8.参考記事

---

1. この記事の目的

• npmに関する知識の復習

  • もやっとした理解だったため記事を読んで理解を深め言語化する

• 実務でも使えそうな+αの知識を紹介
  　- 調べる中で、便利なコマンドなどを学べたので紹介

• 読んでくれる人の理解の手助けになれば

---

2. 概要

npmとは？

「Node Package Manager」の略。
Node.jsのパッケージ管理を行うツール。

Node.js

サーバーサイドで動くJavaScript。

特徴

• 大量のデータ処理が可能
  • C10K問題に対応
    • Apache HTTP Serverなどウェブサーバーとクライアント通信においてクライアントが約１万台に達するとウェブサーバーのハードウェア性能に余裕があるにもかかわらず、レスポンス機能が大きく下がる問題
• メモリ消費が少ない
  • イベントループ（詳細省略）
• 処理速度が速い
  • Google V8 JavaScript Engine
    • Googleが開発したコンパイルエンジン
    • Chromeなどで使用
    • 中間コード、インタープリタを搭載せず、最初の実行時からコンパイルされる
    • JIT（Just-In-Time Compiler）
      • ソフトウェアの実行時にコードのコンパイルを実行。実行速度の向上を図るコンパイラ
      • （AOTコンパイラ）
        • 事前コンパイラ
• サーバーサイドでJavaScriptが使える
  • 「サーバーサイドは新しい言語」ではなく、クライアント側で使用するJavaScriptをそのままサーバーサイドで使用できるため基礎的な書き方は同じ。

パッケージ

あらかじめ用意された便利な機能をまとめたもの

代表例

• Express
  • Node.jsのMVCフレームワーク
• promiss、async
  • 非同期処理

など

---

3. パッケージ管理システム

一つの環境で各種ソフトウェアの導入や削除、依存関係を管理するシステムのこと。

機能

主に4つの機能がある！

• リポジトリの購読

  • インターネット上のパッケージリポジトリを指定し、必要に応じてパッケージリストを更新

• ソフトウェアパッケージのインストール・削除

  • ソースコードや設定ファイルをパッケージ化してインストール可能

• 依存関係の解決

  • あるパッケージに必要なソフトウェアを自動的にインストールしたり更新することができる
  • 同時にインストール、更新できないソフトウェアパッケージのインストールや更新を回避できる

• 設定管理

  • 設定スクリプトを使って自動的に設定を行える
    • npmならpackage.json、composerならcomposer.jsonとか
  • 競合する機能を持つソフトウェアで、どちらを優先して使うかを設定できる

言われてみたら「確かにな」って感じるけど、言語化するとしっくりくる。

---

4. もしnpmがなかったら

開発するのに色々手間暇時間がかかります。
→「手間暇かけるのが愛情」が正だとすると、別のところに愛情を使えるようになる

• 使用するパッケージ、ライブラリなどをいちいち公式サイトなどからダウンロードしないといけない

• 作ったnpmパッケージをチームで共有したいが共有や更新などの管理などが面倒

つまり、楽に速くコードを書くことができるようになりサービスの開発時間の短縮や他のことに時間をかけられるようになる。

---

5. npmの使い方

Node.jsのダウンロード

公式サイトからダウンロード。
Node.jsをダウンロードしたらnpmもダウンロードされます

バージョンの確認

ダウンロードしたら

terminal

npm --version

でnpmのバージョンを確認します
（npmのパスが通ってなかったら通してください）

使用するパッケージをインストールする

ここでは例でjQueryをインストールします

プロジェクトルート配下

npm install jquery -g

※ 「-g」などのオプションは後述

既にpackage.jsonがあるプロジェクトの場合

package.jsonに記述されているパッケージを復元（インストール）します
（package.jsonはパッケージ管理スクリプトの一つ。詳細は後述）

package.jsonがディレクトリ

npm install

パッケージの更新

• 未更新パッケージの確認

未更新パッケージを確認

npm outdated

---

※パッケージの最新バージョンを使用するにはpackage.jsonに記述が必要※

パッケージを更新する際、いちいちpackage.jsonに内容を確認、記述するのが面倒。
→パッケージのバージョンを一括で最新にしてくれるパッケージnpm-check-updatesが便利！

npm-check-updatesをインストール

npm install -g npm-check-updates
npm-check-updates -u

インストール後、アップデートで最新になる

npm update

これでnpmパッケージのバージョン管理が楽になる。

---

オプションについて

たくさんあるけど、この資料で使う分を紹介。

-g

グローバルインストール。どのディレクトリでも使えるようにパッケージをインストールする
（グローバルインストールについては後述）

-g

npm install jquery -g

--save

package.jsonのdependenciesに依存関係が追加される。
要は「このpackage.jsonが入ったプロジェクトに必要なパッケージ」
（dependenciesについては後述）

--save

npm install jquery --save

--save-dev

package.jsonのdevDependenciesに依存関係が追加される。
要は「パッケージの開発をするときに必要なパッケージ」。テストするためのパッケージとか。
（devDependenciesについても後述）

---

ここでnpmの説明から離れた小休憩。

グローバルインストールとローカルインストールの違い

恥ずかしながら、二つの違いをはっきり理解できていなかったため復習。

グローバルインストール

npm installするときに「-g」オプションをつけることで実行可能。
「npm」のルート配下にあるnode_modulesにパッケージがインストールされるため、一度グローバルインストールしたパッケージはどのディレクトリのプロジェクトでも使用することができる

ローカルインストール

npm installした時に何もオプションを付けなかった時はデフォルトでローカルインストールされる。
インストールされるパッケージの場所はプロジェクトルート配下にあるnode_modules。

従って、どのプロジェクトでも使いそうなパッケージをインストールするときはグローバルインストール、既存のプロジェクトを始めるとき（package.jsonが既にあったら）ローカルインストールの方が良い…のか？
※要確認

---

小休憩になるかわからないがnpmから直接離れてもう一度休憩。

package.jsonのdependenciesとdevDependencies

dependencies

npmパッケージを使うときに必要なパッケージ。
これがないとこのパッケージが動かない。
必要なパッケージ=依存しているパッケージ

dependenciesはインストールされる

npm install [パッケージ名]

これでもインストールされる。

devDependencies

npmパッケージを開発する時に必要なパッケージ。
package.jsonがあるディレクトリでnpm installをしないとインストールされない。
例えば
「jQuery」のパッケージをnpm installでインストールした時は「jQuery」を開発する上でのテスト関係のパッケージなどはインストールされない。
（パッケージをテストするためのパッケージ）

---

パッケージのアンインストール

グローバルインストールされたパッケージのアンインストール

グローバルインストールされたパッケージ

npm uninstall jquery -g

ローカルインストールされたパッケージのアンインストール

ローカルインストールされたパッケージ

npm uninstall jquery

package.jsonのdependenciesから依存関係を削除する場合

依存関係を削除

npm uninstall jquery --save

package.jsonのdevDependenciesから依存関係を削除

devDependenciesから削除

npm uninstall jquery --save-dev

ちなみに※uninstallは省略記号も使える

uninstallを省略

npm un jquery

---

6. 便利なコマンド

npm dedupe

パッケージの依存関係を整理してくれる.

例

• モジュールBがCに依存

• モジュールDがCに依存

  • 上記がそれぞれ別々の記述だった場合、記述が重複してバージョンが異なると不整合が起きる

• これらを「モジュールB、DがCに依存」というふうに書き換えてくれるのがnpm dedupe

→パッケージをいくつか個別でinstallした後にやっておくと便利？
→npmに依存関係解決してくれる機能が既にあるから今はあまり使わない？

david

モジュールの最新安定バージョンをとってきてくれるツール
※依存モジュールの依存モジュールは最新にしない

david

npm install david -g

david update

オプションに-uを付けたら安定バージョンではない、最新のバージョンをとってきてくれるツール.

audit

依存関係でトラブった時にterminalでこのコマンド叩いてくださいって言われるやつ。

依存関係でトラブった時に解決手段を表示してくれる

npm audit 

依存関係でトラブった時に解決してくれる

npm audit fix

---

7. 最後に

参考記事を読んで僕なりにまとめてみましたが、もやっとしたところが言語化されて理解がスッキリした…かも。笑
特にグローバルインストールとローカルインストール、dependenciesとdevDependenciesははっきり理解できてなかったからとても勉強になりました。
あと便利コマンドも役に立ちそうだ！積極的に使って身につけていこう。

僕が下記の参考記事によって助けられたように
この記事が少しでも誰かの手助けになりますように。
ありがとうございました。

---

8. 参考記事

• 便利なパッケージ管理ツール！npmとは【初心者向け】
• npmとは
• npm入門
• 【いまさらですが】package.jsonのdependenciesとdevDependencies
• 初めてのnpm パッケージ公開
• NPM / Bower / Composer-違いは？
• npmのあまり知られていない機能10選

Wikipedia
- npm
- パッケージ管理システム

React Native 0.64 がリリース

2021年3月12日、React Native 0.64 が正式にリリースされました。

大きな変更点は以下の通りです。

• iOSでのHermesエンジンサポート
• Hermesがプロキシをサポート（非対応だったライブラリが少なくなった）
• Reactのバージョンが 17へ（機能的な変更はなし）

使ってみる

npx react-native init projectname

cd ios && pod install

# [!] `React` requires CocoaPods version `>= 1.10.1`, which is not satisfied by your current version, `1.10.0`.

CocoaPodsのバージョンが低く、ポッドインストールできない。

Homebrewで入れていたので、確認してアップグレードする。

brew outdated
# cocoapods (1.10.0) < 1.10.1

brew upgrade cocoapods
# ==> Upgrading cocoapods 1.10.0 -> 1.10.1

再度、Pod Installする

cd ios && pod install

起動する

yarn ios
yarn android

Hermesの有効化

Podfile

use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
+   :hermes_enabled => true
)

cd ios && pod install
# Installing hermes-engine (0.7.2)

完了。

ダークモード

何気にダークモードがデフォルトで入っている。

設定から Dark Appearance を ONにする。

自動でアプリ画面に反映される。

API自体は以前からあったもの（useColorSchemeフック）と同じ。

import { useColorScheme } from 'react-native';

const App: () => Node = () => {
+ const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

ベンチマーク

Hermesは開発モードでは有効になていないので、ipa作成して配布しないとと分からない。

Package.json のdependencies

  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }

expressのForm作成について

expressで入力フォームを（ログイン、新規登録）作成する際にform入力を利用しました。
expressを用いたフォーム作成の忘備録を残します。
参考サイト：
Node.js + Express で 登録画面 を作る
Node.js+Expressでpostを使う！
Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法

フォーム取得側の設定について

POSTのRequestの取得について

今まではbaby-parserをインストールして対応していましたが、現在はExpress本体に用意されているので追加でインストールは不要です。(4.x系で対応）

const express = require('express')
const app = express()
app.use(express.json())

app.post('/', function (req, res) {
  console.log(req.body);
  res.send('Got a POST request')
})

上記内容を記述しておくことで、POSTでの"req.body"でJSON受け取りが可能です。

フォームのejsについて

<form action="/" method="post">
    <input type="text" name="name" placeholder="name">
    <input type="text" name="age" placeholder="age">
    <input type="submit" value="送信！">
</form>

実際の出力は下記のようになります。

設定のポイントとしては、

action : データの送信先（受け取り側と一致するように）
method : 送信方法（今回はpost送信、受け取り側も一致するように）

name属性に設定されたものが
送信されるオブジェクトのkeyとなります。
出力結果(console.log(req.body)）は下記のようになります。

[Object: null prototype] { name: 'test', age: '55' }

こちらのsubmitと設定されたボタンを押すことでPOST送信が実行されます。

後は、よしなにして頂ければということです。

以上、簡単にですがフォームの忘備録でした。

npmとは？【フロントエンド？パッケージ管理】

Node.js のパッケージ（Package）を管理するツール

パッケージとは、Node.jsで利用できるJavaScriptの「ライブラリ」や「フレームワーク」などのこと

• 例えば
  • CSSフレームワークのbootstrap
  • jsフレームワークのvue.js

• あとはよくあるちょっとしたjsモジュールの

  • シャドーボックス
  • スライダーとか
  • Node Package Managerの略
  • package.jsonに必要なパッケージ、バージョンを記述して管理する
  • node_modulesディレクトリ配下に、インストールしたパッケージのソースが配置されていく

参考

とりあえずこれだけでOK
フロントエンド開発の３ステップ（npmことはじめ）
https://qiita.com/hashrock/items/15f4a4961183cfbb2658

これまで自分は、Promise.allを使ったことがなくPromise.allsettedに関しては名前すら聞いたことがありませんでした・・・そこで、自分と同じような人が少しでも早く理解を深められたらいいなと思いPromise.allとPromise.allsettedについての記事を書いてみました！

Promiseについて簡単に

JavaScriptの特性として、「非同期処理」というものがあります。同期処理は書かれたコードが上から順番に必ず実行されるのに対し、非同期処理は上から順番に実行されない時もあります。例えば、外部連携などの実行に時間がかかる処理の場合、実行が完全に完了する前に次の処理に走ってしまうことがあります。そのため、

let res = dynamodb.get(params)
console.log(res)

上記のような流れの場合に、非同期処理だと①の処理が最後まで終わり変数に代入される前に②の処理が実行されエラーになるというパターンが発生することがあります。
ただ、Promiseを使うことで実行する順番を指定することが可能です。
そのため、Promiseにより先ほど説明したようなエラーを防ぐことができます。

Promise.allを使用するメリット

Promise.allを使うメリットとして、時間のかかる非同期処理をたくさん行わないといけない場合に、「無駄なく効率よく並列で実行できる」ことが挙げられます。

例えば、下記のように時間のかかる処理を複数行うとします。

let res_1 = await dynamodb.get(params_1) // 実行を完了するのに1秒
let res_2 = await dynamodb.get(params_2) // 実行を完了するのに2秒
let res_3 = await dynamodb.get(params_3) // 実行を完了するのに3秒

この場合だと、全て実行し終えるのに6秒もかかります。

一方で実装したい機能の関係上、毎回6秒も待ってられない場合を考えてみます。
その場合、下記のようにします。

let  [ res_1 , res_2,  res_3] = await Promise.all(
dynamodb.get(params_1), dynamodb.get(params_2), dynamodb.get(params_3)
)

そうすると、3つの処理が順番に行われるのではなく、並行で実行されます。
よって、全て実行し終えるのに3秒しかかからないのです。
Promise.all()を使うことで、複数の非同期処理を最速で終わらせることができます。

Promise.allとPromise.allsettedの違いとは

両者の違いに触れる前に、Promiseは成功した際にはresolveが、失敗した際にはrejectが返されます。(地味にポイントかもです笑)

では、違いについて見ていきましょう。
Promise.allは、配列内の複数あるPromiseがたった1つでも「reject」を返すと、即終了いたします。たとえ、それ以外のPromiseが全て順調にうまくいっており、それらの実行が最後まで完了していなかったとしても、途中で終了します。初めはなんで？？？って感じでした(笑)
それに比べて、Promise.allsettedは配列内のPromiseが「resolve」でも「reject」でも関係なく、全ての処理が終わって初めて完了します。
そのため、「とりあえず、成功・不成功気にせず全てのPromiseを実行したいんだ！」(あ、自分はこれでした笑)と考える方は、Promise.allsettedでその悩みは解決できると思います。

最後に

あまりQiitaなどを書いたことがないため、拙い文章ではあったと思いますが最後まで読んでくださりありがとうございました！これからも月に2回ほど学んだことをアウトプットしていきます。もう少し文章が上手くなれるように頑張ります笑

これまで自分は、Promise.allを使ったことがなくPromise.allsettledに関しては名前すら聞いたことがありませんでした・・・そこで、自分と同じような人が少しでも早く理解を深められたらいいなと思いPromise.allとPromise.allsettledについての記事を書いてみました！

Promiseについて簡単に

JavaScriptの特性として、「非同期処理」というものがあります。同期処理は書かれたコードが上から順番に必ず実行されるのに対し、非同期処理は上から順番に実行されない時もあります。例えば、外部連携などの実行に時間がかかる処理の場合、実行が完全に完了する前に次の処理に走ってしまうことがあります。そのため、

let res = dynamodb.get(params)
console.log(res)

上記のような流れの場合に、非同期処理だと1行目の処理が最後まで終わり変数に代入される前に2行目の処理が実行されエラーになるというパターンが発生することがあります。
ただ、Promiseを使うことで実行する順番を指定することが可能です。
そのため、Promiseにより先ほど説明したようなエラーを防ぐことができます。

Promise.allを使用するメリット

Promise.allを使うメリットとして、時間のかかる非同期処理をたくさん行わないといけない場合に、「無駄なく効率よく並列で実行できる」ことが挙げられます。

例えば、下記のように時間のかかる処理を複数行うとします。

let res_1 = await dynamodb.get(params_1) // 実行を完了するのに1秒
let res_2 = await dynamodb.get(params_2) // 実行を完了するのに2秒
let res_3 = await dynamodb.get(params_3) // 実行を完了するのに3秒

この場合だと、全て実行し終えるのに6秒もかかります。

一方で実装したい機能の関係上、毎回6秒も待ってられない場合を考えてみます。
その場合、下記のようにします。

let  [ res_1 , res_2,  res_3] = await Promise.all(
dynamodb.get(params_1), dynamodb.get(params_2), dynamodb.get(params_3)
)

そうすると、3つの処理が順番に行われるのではなく、並行で実行されます。
よって、全て実行し終えるのに3秒しかかからないのです。
Promise.all()を使うことで、複数の非同期処理を最速で終わらせることができます。

Promise.allとPromise.allsettledの違いとは

両者の違いに触れる前に、Promiseは成功した際にはresolveが、失敗した際にはrejectが返されます。(正確にはPromiseのステータスをpendingからfullfilledに変更するために、resolve()を呼び出しrejectedに変更するためにreject()を呼び出します)

では、違いについて見ていきましょう。
Promise.allは、配列内の複数あるPromiseがたった1つでも「reject」を返すと、即終了します。たとえ、それ以外のPromiseが全て順調にうまくいっており、それらの実行が最後まで完了していなかったとしても、途中で終了します。初めはなんで？？？って感じでした(笑)
それに比べて、Promise.allsettledは配列内のPromiseが「resolve」でも「reject」でも関係なく、全ての処理が終わって初めて完了します。
そのため、「とりあえず、成功・不成功気にせず全てのPromiseを実行したいんだ！」(あ、自分はこれでした笑)と考える方は、Promise.allsettledでその悩みは解決できると思います。

最後に

あまりQiitaなどを書いたことがないため、拙い文章ではあったと思いますが最後まで読んでくださりありがとうございました！これからも月に2回ほど学んだことをアウトプットしていきます。もう少し文章が上手くなれるように頑張ります笑

vue-cliで外部JSファイルを読み込む方法

背景

Vueコンポーネントの年月日のプルダウンを外部ファイルのjsで実装したい

理由

可読性やメンテナンス性が向上するため
大規模なプロジェクトになるほど、こういった構成にしたときのメリットを感じやすい

準備

vueCLIのディレクトリのsrcフォルダ直下にutilesという名前のフォルダを作成
その中にdefinition.jsとういう外部JSファイルを作成

実装

外部js

1. 外部ファイル内に年月日の値を生成する（関数を作成、ループ関数を配列に格納する←どちらでも可能だが、definitionsの役割は値の生成なので、jsファイル側で格納する）
2. 年月日それぞれの値をexport

definition.js

var this_year, today;
today = new Date();
this_year = today.getFullYear();

// 配列を変数に格納
const yearList = []
const monthList = []
const dayList = []

// 第一引数〜第二引数までの年月日を生成し、配列（list）に追加する関数を作成
const optionLoop = (start, end, list) => {
    for( let i = start; i <= end; i++)
        list.push(i)
}

optionLoop(1950, this_year, yearList);
optionLoop(1, 12, monthList);
optionLoop(1, 31, dayList);

// 年月日の値のforループを配列に格納し、vueコンポーネントにexportする
export {yearList, monthList, dayList}

読み込む側のVueコンポーネント

1. import { yearList, monthList, dayList } from '@/utiles/definition';で外部jsファイルを読み込む
2. dataプロパティ部分でv-forで回す際の配列（years, months, days）に値をセットする

※yearList, monthList, dayListはそれぞれ年月日の値が入っている配列である

BasicForm.vue

<template>
<div>
  <div class="form">
    <div class="header">
      <p id="step">STEP1</p>
      <p id="inst">お客様の情報を入力してください</p>
    </div>
    <div class="body">
      <p class="genre">-性別-</p>
        <label><input type="radio" name="gender" value="男性" @change="updateGender">男性</label>
        <label><input type="radio" name="gender" value="女性" @change="updateGender">女性</label>
      <p class="genre">-生年月日-</p>
      <select name="year" id="id_year" @change="updateYear">
        <option v-for="(year, key) in years" :key="key">{{ year }}</option>
      </select>年
      <select name="month" id="id_month" @change="updateMonth">
        <option v-for="(month, key) in months" :key="key">{{ month }}</option>
      </select>月
      <select name="day" id="id_day" @change="updateDay">
        <option v-for="(day, key) in days" :key="key">{{ day }}</option>
      </select>日
    </div>
  </div>
  <div class="button-group">
    <router-link to="/questionnaire" class="button">次へ進む ＞</router-link>
  </div>
</div>
</template>

<script>
import { yearList, monthList, dayList } from '@/utiles/definition';

export default {
  data() {
    return {
      years: yearList,
      months: monthList,
      days: dayList,
    }
  },
  methods: {
    updateGender (e) {
      this.$store.commit('updateGender', e.target.value)
    },
    updateYear (e) {
      this.$store.commit('updateYear', e.target.value)
    },
    updateMonth (e) {
      this.$store.commit('updateMonth', e.target.value)
    },
    updateDay (e) {
      this.$store.commit('updateDay', e.target.value)
    },
  }
}
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
  // outline: auto;
    margin:0; padding:0;        /*全要素のマージン・パディングをリセット*/
  max-width: 100%;
}

#step{
  background: #1e90ff;
  color: #fff;
  font-size: 2px;
  margin: 0;
  max-width: 40px;
  padding: 2px;
  text-align: center;
}

#inst {
  font-size: 12px;
  color: #696969;
  text-align: center;
  padding-bottom: 10px;
}

.header {
  background: #afeeee;
  margin: 0%;
  padding: 0%;
  line-height: 10px;
  border-bottom: solid 1px #48d1cc;
}

.body {
  font-size: 9px;
  margin: 10px;
  padding-bottom: 10px;
  line-height: 30px;
  text-align: left;
}

.body input {
  vertical-align:middle;
}

.genre {
  color: #1e90ff;
}

select {
  padding: 5px 10px 5px 0px;
  font-size: 9px;
  border: 1px solid #dcdcdc;
}

.form{
  max-width: 80%;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #48d1cc;
  border-bottom: 0.5px solid #000;
}

.button-group{
  text-align: center;
}

.button {
  background-color: #40e0d0;
  color: #fff;
  border: solid 1px #48d1cc;
  margin-top: 1rem;
  padding: 5px 10px;
  border-radius: 0.5rem 0.5rem;
  text-decoration: none;
  display:inline-block;
  margin: 10px;
}
</style>

おまけ

プルダウンは、コンポーネント内だけで完結させる（例）こともできるが、可読性やメンテナンス性向上のため、値を生成するjsファイルを用意するという方が適切だと判断し、今回実装を行った。

vue-cliで外部JSファイルを読み込む方法

背景

Vueコンポーネントの年月日のプルダウンを外部ファイルのjsで実装したい

理由

可読性やメンテナンス性が向上するため
大規模なプロジェクトになるほど、こういった構成にしたときのメリットを感じやすい

準備

vueCLIのディレクトリのsrcフォルダ直下にutilesという名前のフォルダを作成
その中にdefinition.jsとういう外部JSファイルを作成

実装

外部js

1. 外部ファイル内に年月日の値を生成する（関数を作成、ループ関数を配列に格納する←どちらでも可能だが、definitionsの役割は値の生成なので、jsファイル側で格納する）
2. 年月日それぞれの値をexport

definition.js

var this_year, today;
today = new Date();
this_year = today.getFullYear();

// 配列を変数に格納
const yearList = []
const monthList = []
const dayList = []

// 第一引数〜第二引数までの年月日を生成し、配列（list）に追加する関数を作成
const optionLoop = (start, end, list) => {
    for( let i = start; i <= end; i++)
        list.push(i)
}

optionLoop(1950, this_year, yearList);
optionLoop(1, 12, monthList);
optionLoop(1, 31, dayList);

// 年月日の値のforループを配列に格納し、vueコンポーネントにexportする
export {yearList, monthList, dayList}

読み込む側のVueコンポーネント

1. import { yearList, monthList, dayList } from '@/utiles/definition';で外部jsファイルを読み込む
2. dataプロパティ部分でv-forで回す際の配列（years, months, days）に値をセットする

※yearList, monthList, dayListはそれぞれ年月日の値が入っている配列である

BasicForm.vue

<template>
<div>
  <div class="form">
    <div class="header">
      <p id="step">STEP1</p>
      <p id="inst">お客様の情報を入力してください</p>
    </div>
    <div class="body">
      <p class="genre">-性別-</p>
        <label><input type="radio" name="gender" value="男性" @change="updateGender">男性</label>
        <label><input type="radio" name="gender" value="女性" @change="updateGender">女性</label>
      <p class="genre">-生年月日-</p>
      <select name="year" id="id_year" @change="updateYear">
        <option v-for="(year, key) in years" :key="key">{{ year }}</option>
      </select>年
      <select name="month" id="id_month" @change="updateMonth">
        <option v-for="(month, key) in months" :key="key">{{ month }}</option>
      </select>月
      <select name="day" id="id_day" @change="updateDay">
        <option v-for="(day, key) in days" :key="key">{{ day }}</option>
      </select>日
    </div>
  </div>
  <div class="button-group">
    <router-link to="/questionnaire" class="button">次へ進む ＞</router-link>
  </div>
</div>
</template>

<script>
import { yearList, monthList, dayList } from '@/utiles/definition';

export default {
  data() {
    return {
      years: yearList,
      months: monthList,
      days: dayList,
    }
  },
  methods: {
    updateGender (e) {
      this.$store.commit('updateGender', e.target.value)
    },
    updateYear (e) {
      this.$store.commit('updateYear', e.target.value)
    },
    updateMonth (e) {
      this.$store.commit('updateMonth', e.target.value)
    },
    updateDay (e) {
      this.$store.commit('updateDay', e.target.value)
    },
  }
}
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
  // outline: auto;
    margin:0; padding:0;        /*全要素のマージン・パディングをリセット*/
  max-width: 100%;
}

#step{
  background: #1e90ff;
  color: #fff;
  font-size: 2px;
  margin: 0;
  max-width: 40px;
  padding: 2px;
  text-align: center;
}

#inst {
  font-size: 12px;
  color: #696969;
  text-align: center;
  padding-bottom: 10px;
}

.header {
  background: #afeeee;
  margin: 0%;
  padding: 0%;
  line-height: 10px;
  border-bottom: solid 1px #48d1cc;
}

.body {
  font-size: 9px;
  margin: 10px;
  padding-bottom: 10px;
  line-height: 30px;
  text-align: left;
}

.body input {
  vertical-align:middle;
}

.genre {
  color: #1e90ff;
}

select {
  padding: 5px 10px 5px 0px;
  font-size: 9px;
  border: 1px solid #dcdcdc;
}

.form{
  max-width: 80%;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #48d1cc;
  border-bottom: 0.5px solid #000;
}

.button-group{
  text-align: center;
}

.button {
  background-color: #40e0d0;
  color: #fff;
  border: solid 1px #48d1cc;
  margin-top: 1rem;
  padding: 5px 10px;
  border-radius: 0.5rem 0.5rem;
  text-decoration: none;
  display:inline-block;
  margin: 10px;
}
</style>

おまけ

プルダウンは、コンポーネント内だけで完結させる（例）こともできるが、可読性やメンテナンス性向上のため、値を生成するjsファイルを用意するという方が適切だと判断し、今回実装を行った。

JavaScriptの配列のループ処理を計測する。

今回計測したのは以下。
- for
- for of
- for in
- forEach
- reduce
- map

測定方法

ループ処理内では何も実行しない。
1度の実行だとはじめに実行されるループ処理が最も遅くなっため、計測対象のループ処理自体を数回実行し実行時間の平均を算出する。

const { performance } = require("perf_hooks");

// 1回の実行だと実行順序によって結果にブレがあったため何回か実行した結果の平均を取る
function measure(f, t) {
  const n = 100000;
  const s = performance.now();
  for (let i = 0; i < n; i++) {
    f(a);
  }
  // 少数第五位まで表示
  const d = 100000;
  console.log(t, " avg: ", Math.floor(((ms = performance.now() - s) / n) * d) / d);
}

// 配列の長さ - 測定に応じて数値を変える
const l = 10;
const a = [...Array(l)];

// 各loop処理の実行
measure(function (a) {for (let i = 0; i < a.length; i++) {}}, "for\t");
measure(function (a) {for (const i of a) {}}, "for of\t");
measure(function (a) {for (const i in a) {}}, "for in\t");
measure(function (a) {a.forEach(() => {});}, "forEach\t");
measure(function (a) {a.reduce(() => {});}, "reduce\t");
measure(function (a) {a.map(() => {});}, "map\t");

$ node loop.js
for       avg:  0.00005
for of    avg:  0.0001
for in    avg:  0.00048
forEach   avg:  0.00007
reduce    avg:  0.00006
map       avg:  0.0001

結果

数値はミリ秒。

処理\配列の長さ	10	100	1000	10000
for	0.00005	0.00009	0.00047	0.00417
for of	0.0001	0.00027	0.00146	0.01424
for in	0.00048	0.00286	0.02671	0.27616
forEach	0.00007	0.00025	0.00148	0.02653
reduce	0.00006	0.00031	0.00149	0.02717
map	0.0001	0.00057	0.00401	0.06101

パフォーマンスが良い順番は以下。

1. for
2. for of
3. forEach reduce
4. map
5. for in

たいしたことないんだけど地味にはまってしたまったのでメモ。

イベントリスナーがクリックの時だけ動いていて欲しいのになぜかロードのタイミングで実行される

用意していたイベントリスナーは以下の通り。
クリックしたら動いてね～ってやつ。

【修正前】clickEventListener.js

document.addEventListener("click",displayAlert(),false);

呼び出している関数displayAlertは以下の通り。
呼び出されたらダイアログ表示しますってやつ。

displayAlert.js

function displayAlert(){alert("execute function")};

なんで思い通りに動いてくれないの？？？思っていたら、
displayAlertがJSが読み込まれた時点で実行されていただけでした。
なのでclickしたタイミングで動くように
displayAlert()の()を外してあげればOK。

【修正後】clickEventListener.js

document.addEventListener("click",displayAlert,false);

はい。想定通りのタイミングで動きました
JavaScript書き方に自由度があるところが難しい。

※基礎編はこちら

どうも。kapyです。
先述の基礎編は、前座です。
気持ちとしてはこちらが書きたい内容でした。
「AIR DATEPICKER」はJQuery環境下なので、昔からあるページなどで自前のプラグイン化していると、うまく動きませんました。
そんなときは諦めて、ライブラリを直接編集しましょう。

動作確認した環境

Google Chrome 88.0.4324.150 / firefox 81.0.2 / IE 11 / safari 14.0.3 /

AIR DATEPICKERについて

公式ドキュメント
ダウンロード

何が原因で動かなかったか

軽く、今回なぜライブラリの直接編集に至ったのか、書いておきます。
直接の原因は、よくある$マークのコンフリクトです。
noConflictやJQuery直打ちなど、ググって試しては見たものの、一向に動作する気配がなく、
さらには、animate関数など他の便利な関数達も使えない不便な状況でした。
かと言って、消すと、また別のファイルでが起こってしまい、編集可能な範囲での解決は困難だと、判断しました。
（外部案件だと、よくある。。？）

そうか。ライブラリに直接書けばいい

まずは、規約を確認

今回のライブラリは、MITライセンスです。商用ライブラリだと、改変不可の場合もあるようなので、一応注意しておきましょう。

最低限の保守性

さて、ライブラリの編集に踏み切るとしても、軽量化は、そのままにしておきたい。。。
運用面も考慮し、以下の3点に注意をおきました。

1. 一旦、min.jsを整形プラグインで整形しなおして、あとで、改行などをとる
2. 後から見た人もわかるよう、ファイル名の変更
3. 出来る限り、自前の変数と関数は、他のファイルで参照しておく

① 一旦、min.jsを整形ライブラリで整形しなおして、あとで、改行などをとる

筆者は整形にvscodeのbeautifyという拡張機能を使っています。
まあ、インデントわけが見れればいいので、chrome開発者ツールなどでも、可能です。
Chromeデベロッパーツールで圧縮(minified)されたJavaScriptを読みやすく表示する

軽量化し直すときは、こちらを使いました。
compress.com

② 後から見た人もわかるよう、ファイル名の変更

一応、編集してしまっているので、名前を変えて、保存しておきます。
誰かがコピーしようとしても、これは弄くり回してるよ、ということで、今回は「datepicker.min.local.js」とします。

③ 出来る限り、自前の変数と関数は、他のファイルで参照しておく

最終的に、編集後のライブラリは軽量化しなおして、元に戻しておきたいので、運用上修正が発生しうるところは、別ファイルで管理することにします。
今回は「datepicker.options.js」という名前で管理します。

実際に書いてみる

今回、手を入れたのは以下です。それぞれ解説します。

• minDate/maxDateを外部変数により制御
• onSelectイベント時に値を取得、外部関数で処理
• onHideイベント時に、データ処理用の関数を忍ばせる
• 閉じるボタンを無理やり追加
• クリック時にスマホだと画面にカレンダーが収まらないので、スクロール関数を付与

minDate/maxDateを外部変数により制御

今回、日付の選択できる期間を、絞りたかったので、予め用意した変数を差し込みます。

datepicker.options.js

var minDateInput = new Date(2020,10,1)//2020/11/1から
var maxDateInput = new Date(2021,2,31//2021/3/31まで

次に変数をライブラリの初期設定のところにぶち込みます。
ちなみに、clearButtonやautoCloseなど、boolean型で設定されるプロパティは、全てこの「l」の中に初期設定されているので、そこを編集すれば、動きます。

datepicker.min.local.js

! function(){
  // 略
  l = {
    // 略
    minDate:minDateInput,
    maxDate:maxDateInput,
  }
  //略
}

onSelectイベント時に値を取得、外部関数で処理

jsで値をリアルタイムに処理したいので、値を取得する関数を、ぶち込みます。
もし、rangeをtrueにしてるときなどは、変数を二つ用意するか、配列にして取得してください。

datepicker.options.js

var getSelectedDate;

var _getDateValue = function _getDateValue(v){
  getSelectedDate = v;
  return getSelectedDate;

}

引数「t」がどうやら、選択された日付のようです。

datepicker.min.local.js

selectDate: function (t) {
  _getDateValue(t);
  //略
}

onHide,onShowイベント時にも、データ処理用の関数を忍ばせる

もし、表示,非表示の時に処理を追加したいときは、こちらをお使いください。
ただ、重すぎる処理を走らせると、ラグが生じてなんともUIよろしくない感じになりますので注意。

datepicker.min.local.js

hide: function () {
  //適当な関数
}

閉じるボタンを無理やり追加

AIR DATEPICKERは、クリアボタンは設定できますが、閉じるボタンは筆者が探した感じ、ありません。
閉じるイベントはあるのですが、「ボタンもDatePickerのなかに入れたい」という人は、
素直にぶち込みましょう。
「i」のところに、buttonsというdivがあり、その中に別の変数で、clearbuttonが挿入されているようなので、中に予め一つ追加しておきます。クラス名やidは適宜つけてください。

datepicker.min.local.js

function () {
  var //略,
      i = '
         <div class="datepicker--buttons">
           <button type="button" id="js-dp-close" class="js-dp-close datepicker--button">閉じる</button>
         </div>';
  //略
}

ただ、掲題の通り、js制御不可な状態なので、css周りをいじって、むりくり消す仕様を作ります。
まず、ライブラリのHideイベントの記載されている箇所から、cssを直接いじってるプロパティを削除します。

datepicker.min.local.js

hide: function () {
  //略
  this.$datepicker.removeClass("active").css({
    //left: "-100000px" <- 削除
  }),
  //略

ここで、「active」というクラス名の着脱が行われていることがわかるので、cssで上書きしていきます。
「pointer-events」と「visibility」で、ポインター（クリック・タッチ）とフォーカス両方、打ち消しておくと、アクセシビリティてきに、良いかと思います。

style.css

.datepicker{
  /* 略 */
  left:-100000px;
  pointer-events: none;
  visibility: none;
  opacity: 0;  
}
.datepicker.active{
  /* 略 */
  pointer-events: fill;
  visibility: visible;
  opacity: 1;
}

クリック時にスマホだと画面にカレンダーが収まらないので、スクロール関数を付与

スマートフォンとかだと、inputをタッチすると、画面の外にDatePickerが起動してしまうことがあるので、位置までスクロールするようにします。
スクロールはcssだけで実装できますが、polyfillだけ、注意してください。筆者はこれを使っています。
smoothscroll.js

datepicker.min.local.js

setPosition: function (t) {
  //略
  window.scrollTo({top:e-80,left:0,behavior:'smooth'});
  //e はDatePicker上部のY座標。-80しているのは、マージンです。
}

終わりに

以上、今回の対応まとめでした。ライブラリは、予期しない挙動をする時があるので、時間がある時orどうしてもやらなきゃいけないときなど、見てみるといいです。勉強し始めの時だと、作者にもよりますが、かなり勉強にもなりました。

コメントいただければ、適宜改訂します。
こういうのを実装したい、などもできるだけ一緒に考えるので、連絡ください。
もし、参考になったよ、というかたがおられましたら、twitterのDMでも、LGTMでも反応いただけると、次回記事のモチベーションになります。

最後までお付き合いいただき、ありがとうございました。

Reactの組み込みフックであるとuseReducerの説明をします。

useReducer とは

• useStateと同じ様な状態管理用のhook
  • 基本的に、useStateでできることはuseReducerにもできます
• stateとdispatch（actionを送信する関数）を返す

構文

const [state, dispatch] = useReducer(reducer, initialState)

• reducer: state を 更新するための関数
• dispatch: reducer を 実行するための呼び出し関数 　- dispath には action（何を実行するかをまとめたオブジェクト） を引数を渡す

実践1...カウントアプリ（state 1つ）

useStateでも実装できるカウントアプリを今回はuseReducerを使って実装していきましょう。

手順

• initialStateの定義
• reducerの定義
• useReducerの定義
• JSXの記述（actionを表示するボタン、カウント数(state)を表示する部分）

サンプルコード

import React, { useReducer } from "react";

const initialState = 0;

const reducer = (state, action) => {
  switch (action) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>{state}</p>
      <button onClick={() => {dispatch('increment')}} >+</button>
      <button onClick={() => {dispatch('decrement')}} >-</button>
      <button onClick={() => {dispatch('reset')}} >reset</button>
    </div>
  );
};

export default App;

initialStateが0で、各reducerがちゃんと機能してることがわかります。

実践2...カウントアプリ（複数のstate）

実践1を少し発展させた内容で、複数のstateを持たせていきましょう。

usereducerがuseStateより好ましいのは、複数の値を管理する複雑なステートロジックがある場合や、前のステートに基づいて、次のステートを決める必要がある場合です。

これを頭に入れておけば最適な使い分けの一助になるでしょう。

手順

• ① initialStateの定義
• ② JSXにinitialStateの配置
• ③ dispatch で渡している actionの中にペイロード（アクションの実行に必要な任意のデータ）を含ませる
• ④ reducerの定義
  • 今回はactionにtypeとvalueをセットしているので、Switch分のcaseの宣言はaction→action.typeに変更
  • secondCounter用にcaseを増やす
  • 複数のstateを含むので、spread構文を用いてprevStateを展開し、更新します
• ⑤ useReducerの定義（前と同じ）
• JSXの記述（actionを表示するボタン、カウント数(state)を表示する部分）

サンプルコード

import React, { useReducer } from "react";

// ① `initialState`の定義
const initialState = {
  firstCounter: 0,
  secondCounter: 10
};

const reducer = (state, action) => {
  // ④ actionにtypeとvalueをセットしているので、Switch分のcaseの宣言は`action`→`action.type`に変更
  switch (action.type) {
    case "increment1":
      return { ...state, firstCounter: state.firstCounter + action.value }; // 複数のstateを含むので、spread構文を用いて`prevState`を展開し、更新します
    case "decrement1":
      return { ...state, firstCounter: state.firstCounter - action.value }; // 上に同じ
    case "increment2":
      return { ...state, secondCounter: state.secondCounter + action.value }; // 上に同じ
    case "decrement2":
      return { ...state, secondCounter: state.secondCounter - action.value }; // 上に同じ
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      {/* ② JSXにinitialStateの配置 */}
      <p>カウント1: {state.firstCounter}</p>
      <p>カウント2: {state.secondCounter}</p>
　　　 {/* ③ dispatch で渡している actionの中にペイロード（アクションの実行に必要な任意のデータ）を含ませる */}
      {/* ③ action 内を Object にして、typeとvalueをセットする */}
      <button onClick={() => {dispatch({ type: "increment1", value: 1 })}}>
        +increment1
      </button>
      <button onClick={() => {dispatch({ type: "decrement1", value: 1 })}}>
        -decrement1
      </button>
      <button onClick={() => {dispatch({ type: "increment2", value: 10 })}}>
        +increment2
      </button>
      <button onClick={() => {dispatch({ type: "decrement2", value: 10 })}}>
        -decrement2
      </button>
      <button onClick={() => {dispatch({ type: "reset" })}}>
        reset
      </button>
    </div>
  );
};

export default App;

実践3...useReducer × useContext

useReducer で（ローカルに）扱ってきたStateを useContext を使って （グローバルに）Stateを扱っていきたいと思います。

今回も前回の実践2と同様カウントアプリを作ります。（グローバルに）Stateにカウント値を持たせて各、子コンポネントで値の参照・更新ができるようにします。

手順

• 3つの子コンポネント A〜Cの作成
• 親コンポネントから子コンポネント3つをimport
• reducerとinitialStateの定義
• useReducerにreducerとinitialStateを渡すことでcountStateとdispatch関数を作成
• createContextを使ってcountContextを作成（exportする）
• countContextを使って Provider を用意して valueには countとdispatchをセットする
• 各子コンポネントでは
  • 渡されたcountContextをuseContextしてもちいる
  • valueからcountを表示させとdispatch関数からincrement, decrementを使えるようにする

サンプルコード

App.js

import React, { useReducer, createContext, createElement } from "react";
import { ComponentA } from "./components/ComponentA";
import { ComponentB } from "./components/ComponentB";
import { ComponentC } from "./components/ComponentC";

export const CountContext = createContext();

const initialState = {
  firstCounter: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "increment1":
      return { ...state, firstCounter: state.firstCounter + action.value };
    case "decrement1":
      return { ...state, firstCounter: state.firstCounter - action.value };
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const App = () => {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <h1>カウント：{count.firstCounter}</h1>
      <CountContext.Provider
        value={{ countState: count, countDispatch: dispatch }}
      >
        <ComponentA />
        <ComponentB />
        <ComponentC />
      </CountContext.Provider>
    </div>
  );
};

export default App;

components/ComponentA

import React, { useContext } from "react";
import { CountContext } from "../App";

export const ComponentA = () => {
  const countContext = useContext(CountContext);
  return (
    <div>
      <p>ComponentA</p>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "increment1", value: 1 });
        }}
      >
        +increment1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "decrement1", value: 1 });
        }}
      >
        -decrement1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "reset" });
        }}
      >
        reset
      </button>
    </div>
  );
};

components/ComponentB

import React, { useContext } from "react";
import { CountContext } from "../App";

export const ComponentB = () => {
  const countContext = useContext(CountContext);
  return (
    <div>
      <p>ComponentB</p>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "increment1", value: 1 });
        }}
      >
        +increment1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "decrement1", value: 1 });
        }}
      >
        -decrement1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "reset" });
        }}
      >
        reset
      </button>
    </div>
  );
};

components/ComponentC

import React, { useContext } from "react";
import { CountContext } from "../App";

export const ComponentC = () => {
  const countContext = useContext(CountContext);
  return (
    <div>
      <p>ComponentC</p>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "increment1", value: 1 });
        }}
      >
        +increment1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "decrement1", value: 1 });
        }}
      >
        -decrement1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "reset" });
        }}
      >
        reset
      </button>
    </div>
  );
};

実行結果

それぞれの子コンポネントの動作が確認できました。こうすることで、useReducerとuseContextを使ってグローバルにstateを管理することができます。

実践4...useReducer × 非同期処理（useEffect）

useReducerとuseEffectを使って非同期処理させて外部APIからデータ（記事の擬似データ）を取得・表示させてみましょう。

手順

• useReducerとuseEffectのimport
• 非同期処理はaxiosを使う
• initialStateの定義（loading, error, post）
• reducerの作成
  • 引数（state,action）
  • return 新しいstate
  • switch ケースは HTTPリクエストの成功時（FETCH_SUCCESS） or 失敗時（FETCH_ERROR）で処理を分けます
• useReducerにinitialStateとreducer関数を読み込ませて、stateとdispatch関数を利用できるようにします
• useEffect内にHTTPリクエスト非同期処理を記載する
  • 記事の擬似データを取得できるJSONPlaceholderからデータをとってくる（GETリクエストで）
  • 今回はこのURLにGETリクエストします
• JSXに、FETCH_SUCCESS時とFETCH_ERROR時の場合のコンポーネントを書く

サンプルコード

App.js

import React, { useEffect, useReducer } from "react";
import axios from "axios";

const initialState = {
  loading: true,
  error: "",
  post: {}
};

const reducer = (state, action) => {
  switch (action.type) {
    case "FETCH_SUCCESS":
      return {
        loading: false,
        error: "",
        post: action.payload
      };
    case "FETCH_ERROR":
      return {
        loading: false,
        error: "データ取得に失敗",
        post: {}
      };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => {
        dispatch({ type: "FETCH_SUCCESS", payload: res.data });
      })
      .catch(() => {
        dispatch({ type: "FETCH_ERROR" });
      });
  }, []);

  return (
    <div>
      <h1>{state.loading ? "Loading..." : state.post.title}</h1>
      <p>{state.error ? state.error : null}</p>
    </div>
  );
};

export default App;

実行結果

非同期処理なので、時間差で 「Loading」がtitleに変わっていることがわかります。

シーン別 useState と useReducer 使い分け

結論、シンプルなstateにはuseStateが向いていて、複雑なstate管理にはuseReducerがいいでしょう。

表にして、特徴をまとめました。

	useState	useReducer
扱うといい state の型	Number, String, Bool などのプリミティブ型を更新する時	Array, Object の更新に使う時
どんなシーンで使うといい？	単独のstate（複数でもできるっちゃできる）	複数のstateを同時に更新したい時
stateの更新に複雑なビジネスロジックがある場合	好ましくない	好ましい
ストアーの種類	ローカルな管理に向いてる	useContextと合わせてグローバルに管理するとよい

以上です！

参考

ロードマップ

React 16.8 で追加された機能であるReactのHooksについて書いてあります。

書きながら学ぶ React Hooks 入門シリーズとして書き下ろしました。

• React.memo / useCallback / useMemo
• Context / useContext
• useRef
• useState
• useEffect
• useReducer 今回

これが最後です。

はじめに

Reactの組み込みフックであるとuseReducerの説明をします。

useReducer とは

• useStateと同じ様な状態管理用のhook
  • 基本的に、useStateでできることはuseReducerにもできます
• stateとdispatch（actionを送信する関数）を返す

構文

const [state, dispatch] = useReducer(reducer, initialState)

• reducer: state を 更新するための関数
• dispatch: reducer を 実行するための呼び出し関数 　- dispath には action（何を実行するかをまとめたオブジェクト） を引数を渡す

実践1...カウントアプリ（state 1つ）

useStateでも実装できるカウントアプリを今回はuseReducerを使って実装していきましょう。

手順

• initialStateの定義
• reducerの定義
• useReducerの定義
• JSXの記述（actionを表示するボタン、カウント数(state)を表示する部分）

サンプルコード

import React, { useReducer } from "react";

const initialState = 0;

const reducer = (state, action) => {
  switch (action) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>{state}</p>
      <button onClick={() => {dispatch('increment')}} >+</button>
      <button onClick={() => {dispatch('decrement')}} >-</button>
      <button onClick={() => {dispatch('reset')}} >reset</button>
    </div>
  );
};

export default App;

initialStateが0で、各reducerがちゃんと機能してることがわかります。

実践2...カウントアプリ（複数のstate）

実践1を少し発展させた内容で、複数のstateを持たせていきましょう。

usereducerがuseStateより好ましいのは、複数の値を管理する複雑なステートロジックがある場合や、前のステートに基づいて、次のステートを決める必要がある場合です。

これを頭に入れておけば最適な使い分けの一助になるでしょう。

手順

• ① initialStateの定義
• ② JSXにinitialStateの配置
• ③ dispatch で渡している actionの中にペイロード（アクションの実行に必要な任意のデータ）を含ませる
• ④ reducerの定義
  • 今回はactionにtypeとvalueをセットしているので、Switch分のcaseの宣言はaction→action.typeに変更
  • secondCounter用にcaseを増やす
  • 複数のstateを含むので、spread構文を用いてprevStateを展開し、更新します
• ⑤ useReducerの定義（前と同じ）
• JSXの記述（actionを表示するボタン、カウント数(state)を表示する部分）

サンプルコード

import React, { useReducer } from "react";

// ① `initialState`の定義
const initialState = {
  firstCounter: 0,
  secondCounter: 10
};

const reducer = (state, action) => {
  // ④ actionにtypeとvalueをセットしているので、Switch分のcaseの宣言は`action`→`action.type`に変更
  switch (action.type) {
    case "increment1":
      return { ...state, firstCounter: state.firstCounter + action.value }; // 複数のstateを含むので、spread構文を用いて`prevState`を展開し、更新します
    case "decrement1":
      return { ...state, firstCounter: state.firstCounter - action.value }; // 上に同じ
    case "increment2":
      return { ...state, secondCounter: state.secondCounter + action.value }; // 上に同じ
    case "decrement2":
      return { ...state, secondCounter: state.secondCounter - action.value }; // 上に同じ
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      {/* ② JSXにinitialStateの配置 */}
      <p>カウント1: {state.firstCounter}</p>
      <p>カウント2: {state.secondCounter}</p>
　　　 {/* ③ dispatch で渡している actionの中にペイロード（アクションの実行に必要な任意のデータ）を含ませる */}
      {/* ③ action 内を Object にして、typeとvalueをセットする */}
      <button onClick={() => {dispatch({ type: "increment1", value: 1 })}}>
        +increment1
      </button>
      <button onClick={() => {dispatch({ type: "decrement1", value: 1 })}}>
        -decrement1
      </button>
      <button onClick={() => {dispatch({ type: "increment2", value: 10 })}}>
        +increment2
      </button>
      <button onClick={() => {dispatch({ type: "decrement2", value: 10 })}}>
        -decrement2
      </button>
      <button onClick={() => {dispatch({ type: "reset" })}}>
        reset
      </button>
    </div>
  );
};

export default App;

実践3...useReducer × useContext

useReducer で（ローカルに）扱ってきたStateを useContext を使って （グローバルに）Stateを扱っていきたいと思います。

今回も前回の実践2と同様カウントアプリを作ります。（グローバルに）Stateにカウント値を持たせて各、子コンポネントで値の参照・更新ができるようにします。

手順

• 3つの子コンポネント A〜Cの作成
• 親コンポネントから子コンポネント3つをimport
• reducerとinitialStateの定義
• useReducerにreducerとinitialStateを渡すことでcountStateとdispatch関数を作成
• createContextを使ってcountContextを作成（exportする）
• countContextを使って Provider を用意して valueには countとdispatchをセットする
• 各子コンポネントでは
  • 渡されたcountContextをuseContextしてもちいる
  • valueからcountを表示させとdispatch関数からincrement, decrementを使えるようにする

サンプルコード

App.js

import React, { useReducer, createContext, createElement } from "react";
import { ComponentA } from "./components/ComponentA";
import { ComponentB } from "./components/ComponentB";
import { ComponentC } from "./components/ComponentC";

export const CountContext = createContext();

const initialState = {
  firstCounter: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "increment1":
      return { ...state, firstCounter: state.firstCounter + action.value };
    case "decrement1":
      return { ...state, firstCounter: state.firstCounter - action.value };
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const App = () => {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <h1>カウント：{count.firstCounter}</h1>
      <CountContext.Provider
        value={{ countState: count, countDispatch: dispatch }}
      >
        <ComponentA />
        <ComponentB />
        <ComponentC />
      </CountContext.Provider>
    </div>
  );
};

export default App;

components/ComponentA

import React, { useContext } from "react";
import { CountContext } from "../App";

export const ComponentA = () => {
  const countContext = useContext(CountContext);
  return (
    <div>
      <p>ComponentA</p>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "increment1", value: 1 });
        }}
      >
        +increment1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "decrement1", value: 1 });
        }}
      >
        -decrement1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "reset" });
        }}
      >
        reset
      </button>
    </div>
  );
};

components/ComponentB

import React, { useContext } from "react";
import { CountContext } from "../App";

export const ComponentB = () => {
  const countContext = useContext(CountContext);
  return (
    <div>
      <p>ComponentB</p>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "increment1", value: 1 });
        }}
      >
        +increment1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "decrement1", value: 1 });
        }}
      >
        -decrement1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "reset" });
        }}
      >
        reset
      </button>
    </div>
  );
};

components/ComponentC

import React, { useContext } from "react";
import { CountContext } from "../App";

export const ComponentC = () => {
  const countContext = useContext(CountContext);
  return (
    <div>
      <p>ComponentC</p>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "increment1", value: 1 });
        }}
      >
        +increment1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "decrement1", value: 1 });
        }}
      >
        -decrement1
      </button>
      <button
        onClick={() => {
          countContext.countDispatch({ type: "reset" });
        }}
      >
        reset
      </button>
    </div>
  );
};

実行結果

それぞれの子コンポネントの動作が確認できました。こうすることで、useReducerとuseContextを使ってグローバルにstateを管理することができます。

実践4...useReducer × 非同期処理（useEffect）

useReducerとuseEffectを使って非同期処理させて外部APIからデータ（記事の擬似データ）を取得・表示させてみましょう。

手順

• useReducerとuseEffectのimport
• 非同期処理はaxiosを使う
• initialStateの定義（loading, error, post）
• reducerの作成
  • 引数（state,action）
  • return 新しいstate
  • switch ケースは HTTPリクエストの成功時（FETCH_SUCCESS） or 失敗時（FETCH_ERROR）で処理を分けます
• useReducerにinitialStateとreducer関数を読み込ませて、stateとdispatch関数を利用できるようにします
• useEffect内にHTTPリクエスト非同期処理を記載する
  • 記事の擬似データを取得できるJSONPlaceholderからデータをとってくる（GETリクエストで）
  • 今回はこのURLにGETリクエストします
• JSXに、FETCH_SUCCESS時とFETCH_ERROR時の場合のコンポーネントを書く

サンプルコード

App.js

import React, { useEffect, useReducer } from "react";
import axios from "axios";

const initialState = {
  loading: true,
  error: "",
  post: {}
};

const reducer = (state, action) => {
  switch (action.type) {
    case "FETCH_SUCCESS":
      return {
        loading: false,
        error: "",
        post: action.payload
      };
    case "FETCH_ERROR":
      return {
        loading: false,
        error: "データ取得に失敗",
        post: {}
      };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => {
        dispatch({ type: "FETCH_SUCCESS", payload: res.data });
      })
      .catch(() => {
        dispatch({ type: "FETCH_ERROR" });
      });
  }, []);

  return (
    <div>
      <h1>{state.loading ? "Loading..." : state.post.title}</h1>
      <p>{state.error ? state.error : null}</p>
    </div>
  );
};

export default App;

実行結果

非同期処理なので、時間差で 「Loading」がtitleに変わっていることがわかります。

シーン別 useState と useReducer 使い分け

結論、シンプルなstateにはuseStateが向いていて、複雑なstate管理にはuseReducerがいいでしょう。

表にして、特徴をまとめました。

	useState	useReducer
扱うといい state の型	Number, String, Bool などのプリミティブ型を更新する時	Array, Object の更新に使う時
どんなシーンで使うといい？	単独のstate（複数でもできるっちゃできる）	複数のstateを同時に更新したい時
stateの更新に複雑なビジネスロジックがある場合	好ましくない	好ましい
ストアーの種類	ローカルな管理に向いてる	useContextと合わせてグローバルに管理するとよい

以上です！これで最後です。

連載の最後に

シリーズ全部読んでくれた方へ。

どうもありがとうございました。

参考

現職でReactとJS（今はTS）だけであらゆる機能を実装してきましたが、最近アサインされる機能がライブラリやAPI抜きでは太刀打ちできないケースが増えてきていて、実際去年の秋に担当したある機能は外部APIを使って実装しました。

ライブラリを選定して目指す機能が実現できるかの可否を判断する「技術検証」を頼まれる事が増えてきていますが、如何せんライブラリを導入した経験がまだ浅いので、選定→インストール→実装までを一度自分で経験してライブラリを扱う勘所を掴んでおきたいと思いました。

そこで目をつけたのが「ドラッグ＆ドロップ」

どんなアプリでも幅広く使われるこのUIは3年前プログラミングの勉強してる時にプレーンなJSで実装した事もありましたが（記事）開発現場ではライブラリを使う事がほとんどだと思います。

前置きが長くなりましたが、本題に入ります。

まずドラッグ＆ドロップを実装する上でどのライブラリがいいかの選定、そのライブラリでやろうとしてる事が実現できるかの検証をこの記事で紹介します。

ライブラリの選定：

まずライブラリはドキュメントが豊富か、と関連する記事が多いかで判断し、このReact DnDを選定しました。
https://react-dnd.github.io/react-dnd/about

react-beautiful-dndも候補にありましたが、情報量ではReact DnDには敵わなかったです。

今回実現したい操作：

今回自分がやろうとしたのはソリティアでカードをドラッグして移動したいカードにドロップした時に何がどこにドロップされたのか？のデータを受け取り、それを元に移動の許可判定をするという処理です。ただ単にリストをソートして順番を入れ替えるとか、カラムに移動させるだけだったら公式ドキュメントのDemoに載ってるコードをそのまま使えば事足りますが、こういう実装のサンプルはなかなか無いので、公式ドキュメント、参考になりそうな記事を漁って見つけた点の情報を徐々につないでいき、なんとかこのライブラリの使い方を掴みました。GitHubにサンプルが上がっていてもバージョンが古かったりして苦戦しました。。

まずこのライブラリの登場人物は３つ。

1. DnD Provider

Drag SourceとDrop Targetをラップする大元の親Component

2. Drag Source

ドラッグして動かすもの

3. Drop Target

ドロップを受け付ける場所。

実際のコードはこんな感じです。細かいところは省いてます。
大元の親となるDnD ProviderがApp.js

import React from 'react';
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

const App = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <>
        //この中にDragSourceとDropTragetを置く
      </>
    </DndProvider>
  )
};

動かすDrag SourceのCard.js (これでDraggableになる)

import React, { Component } from 'react';
import { DragSource } from 'react-dnd';

const itemSource = {
  beginDrag(props) {
    return {
      card: props.card,
      parentIndex: props.parentIndex,
      isFromFoundation: props.isFromFoundation
    };
  },
  canDrag(props) {
    retrun props.card.face;
  }
}

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
  }
}

class Card extends Component {
  render() {
    const { isDragging, connectDragSource, card, index } = this.props;
    const opacity = isDragging ? 0 : 1;

    //returnする大元の親は必ずプレーンなdivでくくる必要がある、StyledComponentなどは不可
    return connectDragSource(
      card.face ? (
        <div style={{ opacity }}><CardImage index={index} src={`${process.env.PUBLIC_URL}/${card.pattern}/${card.number}.png`} /></div>
      ) : (
        <div><CardImage index={index} src={`${process.env.PUBLIC_URL}/cardFace.png`} /></div>
      )
    );
  }
}

export default DragSource('item', itemSource, collect)(Card);

Drop TargetのSingleColumn.js

import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';

const itemSource = {
  drop(props, monitor) {
    const dragProps = monitor.getItem();
    //↑でCard.jsでbeginDragでreturnしたオブジェクトが取れる
    return props.onDrop(dragProps, props.index);
  }
}

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    hovered: monitor.isOver(),
    item: monitor.getItem(),
  }
}

class SingleColumn extends Component {
  renderCards = (column, parentIndex) => {
    return column.map((card, index) => {
      return <Card index={index} parentIndex={parentIndex} key={card.id} card={card} />
    })
  }
  render() {
    const { connectDropTarget, column, index } = this.props;

    //returnする大元の親は必ずプレーンなdivでくくる必要がある、StyledComponentなどは不可
    return connectDropTarget(
      <div>
        <Column index={index}>
          {this.renderCards(column, index)}
          <ColumnFrame />
        </Column>
      </div>
    );
  }
}

export default DropTarget('item', itemSource, collect)(SingleColumn);

SingleColumn.jsをまとめるColumn.js

const Columns = () => {
  const { state, dispatch } = useContext(store);

  const onDrop = (dragProps, targetIndex) => {
    //dragPropsにはCard.jsのbeginDragでreturnしたオブジェクトが入ってます
    {
      card,
      parentIndex,
      isFromFoundation
    };
   //これらの情報を元に判定処理をここで行います
  }

  const renderColumns = () => {
    return state.columns.map((column, index) => {
      return <SingleColumn index={index} key={index} column={column} onDrop={onDrop} />
    })
  }

  return (
    <>
      {renderColumns()}
    </>
  )
};

export default Columns;

DragSourceとDropTargetの関係を図にまとめるとこんな感じです。

この仕組みを応用すれば画像、動画などを管理するページとかで、フォルダAをフォルダBに移動とかという実装にも応用できそうです。

ちなみにこちらが今回このドラッグ＆ドロップを組み込んだソリティアです。
https://upbeat-panini-974f90.netlify.app/
まだバグありますが、ドラッグドロップでカードの移動はできます。

ソースコードはこちら
https://github.com/eiciemm/react-solitarire/tree/main/src

まとめ：

ライブラリはフレームワーク程じゃ無いにしても使いこなすのにルールを覚える点が少し似てると思いました。そしてルールを完璧に掴めば応用が効いて変わった使い方やカスタマイズも容易にできる。もちろんも限度があるでしょうが。

ライブラリは力が無いエンジニアが使うものというイメージがありました。ドキュメントで公開されてるDemoと全く同じように使うのであればそれはラッキーで、浮いた工数を他の部分の作り込みに時間を割けばいいと思うし、Demoと違う使い方をする場合はライブラリのルールを理解しないといけないので、これが容易い作業では無いので、ライブラリ＝手抜きとは一概には言えないかなと思いました。