私の中で JavaScript の知識はかなり前から時間が止まったままでした。
最近、JavaScript の歴史を見ていく中で、JavaScript という言語をまた勉強し直したいという気持ちが強くなりました。そこで今回は、モダンなフロントエンド開発を学ぶという意味で Vue.js を使ってポートフォリオサイトを作成しました。
この記事ではサイトを制作する中で感じたこと・意識したことをまとめていきます。

ポートフォリオサイトを作成した経緯

私は、今まで約 3 年ほどプログラミングを勉強してきましたが、身につけたスキルを使って成果物を作るアウトプット型の学習より、ドットインストールや Progate を使った受動的なインプット学習が中心でした。そこでアウトプット型の学習を始めたいと思い、Vue.js を学習してポートフォリオサイトを作成しました。フレームワークとして Vue.js を選定した理由は様々あるのですが、大きく SPA 形式のサイトを構築してみたい。以前に Vue.js を少し触ったことがあったためというのがあります。最近、Web 系の情報や、記事のトレンドを見ていると、React.js や Next.js・Nuxt.js などの JavaScript フレームワーク名を目にすることが多くなりました。私が JavaScript を学習したのはかなり前になるので、この機会にモダンな JavaScript を学習したいという気持ちが強くなり、この機会にポートフォリオサイトを作ってみることにしました。

作成したポートフォリオサイト

学習期間が約 2 週間、制作期間として約 2 週間、全体として約 1 ヶ月で開発しました。 Toggle という時間管理ツールを使って開発している時間の記録をしたところ、完成まで 40 時間ほどかかっていました。
以前 Web 技術の概要を勉強したときに HTML / CSS と JavaScript を触ったことあり知識はあったのですが、かなり学習期間が空いてしまっている状態からのスタートでした。そのため学習期間を含めてかなり遅いペースでの開発にはなりましたが、Vue.js の教材や情報が充実しており、理解しながら進められたので結果的にモダンな環境での開発ができたことの達成感がすごくありました。

主な使用技術と概要

技術	使用バージョン	説明
Vue.js	2.6.12	JavaScript フレームワーク
VueCLI	4.5.7	Vue 用コマンドラインインターフェース
Vuetify	2.3.13	マテリアルデザインフレームワーク
Vue Router	3.4.6	Vue 用のルーティングプラグイン
Netlify	ー	静的サイトホスティングサービス

ポートフォリオサイトに含めたもの

ポートフォリオサイトを作るに当たって様々なエンジニアの方のポートフォリオサイトを拝見しました。作成しているページや記載している内容はそれぞれ個性があって面白いと感じました。かなり悩んだのですが、その中で以下の４つのページを作成することにしました。

• 簡単なプロフィール
• 扱える技術
• 作成したもの
• 連絡先・お問い合わせ

今までほとんど成果物を作って来なかったため、載せられるものが少なく寂しい感じになってしまいました。今後、個人制作で作ったものを載せてにぎやかにしていきたいです。扱える技術ページには今まで勉強したことのある技術をアイコンとレーティング(★)で載せました。今まで幅広くいろんな技術を勉強してきましたが、それぞれの知識が浅く、アウトプットを通して技術力を底上げしていかなければと危機感も覚えました。

開発で意識したこと

モダンな JavaScript の理解と開発環境構築

ポートフォリオサイトを作る際に、WSL2 が気になっていたこともあり、ローカルの開発環境として WSL2 の環境に Ubuntu 20.04.1 LTS をインストールし Vue.js の開発環境を構築しました。 最近のフロントエンド界隈について調べる中で Node.js や Webpack などの用語は聞いたことあったのですが、使えると何が便利なのかわからず、恥ずかしながら今まで食わず嫌いしていました。今思えばもっと早くに触れておくべきでした。そんなときに Qiita で見かけた@yukiji さんのJavaScript 学習ロードマップという記事に影響を受け、記事内で紹介されていたエンジニア Youtuber さんの動画を見漁りました。ここで Web 技術の流行り廃りが激しいこと、自分が学んできた JQuery等の技術はすでに廃れつつあるということを目の前にしモダンな技術、流行りの技術を取り入れる姿勢を大事にしていかなければならないという思いがより強くなりました。プロジェクトは Node.js をインストールして使うことのできるパッケージマネージャーnpmを使いインターネット上の記事を参考に作成しました。この時点で WebPack や node_module などを目にする機会が多くなり少しパニックになったのを覚えてます。それと同時に VueCLI が簡単な対話形式で簡単に動作するプロジェクトを生成してくれること、開発用のサーバーでのホットリロードがすでに用意されていることなど驚くことが多く、これから開発していくことに対してとてもワクワクしてたのを覚えてます。TypeScript での開発も視野に入れていたのですが、学習リソースに合わせるため今回は JavaScript での開発環境を構築しました。

Vue.js の学習

実は 1 年ほど前に Vue.js を勉強していた時期があります。そのときに学習していた書籍がこちら。

基礎から学ぶ Vue.js
mio さん(@mio3io)が執筆した 猫本 の愛称親しまれている有名な 1 冊です。

この記事を執筆した 2020 年 11 月現在、改定 2 版が出版されています。画像は改定前の表紙になります。

書籍サポートページが充実しているので、動くものを見ながら学習できたのが良かったです。

昨年、書店で購入して読み進めていたのですが、忙しかったこともあり、積読になってしまっていました。触りの部分しか読めていなかったため、中途半端な理解のまま Vue で成果物を作ることなく、令和を迎えてしまいました。
今回、勉強する際に、改めて最初から読み直し、重要なところはメモを取るなどして少しづつ理解を進めていきました。それと同時に Udemy で人気が高かった超 Vue.js 2 完全パック - もう他の教材は買わなくて OK！ (Vue Router, Vuex 含む)を購入し、猫本と並行して学習していきました。かなりボリュームがありますが、1 回購入すれば何度も見れるということもあり、再生速度を変えながら通勤時間などで繰り返し見るなどして学習を進めました。どちらも半分くらいまで見終えたぐらいから構築した環境で開発をはじめました。なお Vue.js は公式ドキュメントも充実しているのでとても学習しやすいと感じました。

ポートフォリオサイトを作成し始めるタイミングでちょうどよく Vue3 がリリースされたのですが、書籍と Udemy の講座動画の内容に合わせるため、今回は Vue2.x 系を利用して制作しています。

レスポンシブデザインと UI

今はモバイルファーストと言われるくらいにモバイル環境(タブレット・スマートフォン)への対応が必要不可欠となっています。今回の制作でもレスポンシブデザインに対応しながらおしゃれなデザインにしたいという思いがありました。レスポンシブデザイン対応はかなり難しい印象が強くあり、今まで意識してできていなかったのですが、Vuetify というマテリアルデザインフレームワークを導入することで柔軟に対応できました。もともと Booststrap をよく使っており、BootstrapVue というライブラリを使おうとしていたのですが、公式サイトのデザインに惹かれて今回は Vuetify を採用しました。Vuetify はコンポーネント単位でデザインしていくため、Vue.js の知識が必要ですが、同時にコンポーネントの概念について勉強して対応しました。レスポンシブ対応するときにブレークポイントを使ってレイアウトするのですが、以前 Bootstrap を使った経験があったので、直感的に理解しやすくそこまで難しいと感じることはありませんでした。簡単な記述でマテリアルデザインのコンポーネントを使うことができるので、使っていて楽しかったです。レスポンシブデザインとして、公式ドキュメントとサンプルではドロワーメニューとして以下のデザインが採用されています。

ハンバーガーメニューライク
このデザインがマテリアルデザインの方針としては正しいみたいです。しかしハンバーガーメニューは今まで使ってきて、個人的にあまり好きではありませんでした。UX の観点で否定的な意見を目にすることがあり、モバイル向けメニュー実装をする上どのように実装するかで悩みました。

そこで見つけたのが v-bottom-navigation コンポーネントです。

components/Navigation.vue

<template>
  <div>
    <v-bottom-navigation color="white" dark grow shift app>
      <v-btn v-for="item in items" :key="item.link" :to="item.link">
        <span class="white--text">{{ item.name }}</span>
        <v-icon>{{ item.icon }}</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </div>
</template>

これだけでナビゲーションバーを作ることができます。v-forディレクティブで中身を表示しています。
今回は思い切ってこのナビゲーションを採用してみました。モバイル向け Twitter や Youtube の公式アプリで使われているようなコンポーネントですね。しかし、このままだと PC 用のナビゲーションバーとモバイル向けのナビゲーションバーが混在してしまうため、App.vue ファイルの中でブレークポイントによってコンポーネントの出し分けをしています。ナビゲーションには公式プラグインの Vue Router を使用しています。ページのパスと呼び出したいコンポーネントを指定するだけでルーティングの制御を自動で行ってくれるのが便利でした。

src/App.vue

<MyNavigation class="hidden-md-and-up ma-0"></MyNavigation>

上の例だとコンポーネントのクラスにブレークポイント md 以上(タブレットやラップトップパソコン以上の画面サイズ)では bottom-navigationコンポーネントを表示するように指定しています。これだけの記述で出し分けができるのはすごいですね。

アイコンでページイメージがわかりやすくて好きです。アイコンは Fontawesome 使用

Vuetify はまだ日本語のドキュメントなどが少なく、コンポーネントの使い方について調べるのが少し大変な部分もありましたが、公式のドキュメントを読み込むことで一通り使うことができました。今の段階でも使えるコンポーネントが使い切れないくらいあるのですが、今も開発が進んでおりバージョンが上がり続けているため、今後のコンポーネント追加や機能追加にも期待しています。Bootstrap などの他のフレームワークにも言えますが、デザインフレームワークの導入によって簡単な記述でデザインに一体感が出せる、モダンなデザインにできるのはとても便利です。しかし、デザインがどうしても似通ってしまうためデザイン部分では個性が出しにくいと感じました。
その部分で Web デザインと UX について考えることも多く、難しさや奥深さを痛感しました。いろんなサイトを見ていく中で、今後、見直していきたい部分でもあります。

サイトホスティング

ページを公開するために必要となる Web ページのホスティングですが、ホスティングサービスとして上記の書籍と Udemy の動画の中で紹介されていたNetlifyを選びました。GitHub のリポジトリと連携してデプロイできるとのことで、半信半疑ではあったのですが、やってみるとたった数分でデプロイできたのがとても感動的でした。無料枠が設けられており、制限はあるのですが、個人的に利用する文については十分すぎるほどなので SPA を手軽に公開したいときの手段としておすすめできます。コードを変更をした際もコミットして連携したリポジトリに対してプッシュするだけでビルドして反映してくれるので便利です。

工夫したところ

ページ遷移時のアニメーション

vue の transitionを使って実装しています。watch プロパティで\$route の中身が変化したときに CSS ライブラリの Animate.css を適用させてアニメーションさせています。Animate.css は使ったことがなかったのですが、クラスを適用するだけでアニメーションさせることができて便利だと感じました。アニメーションが入ることでサイトに動きが生まれて華やかになるので、カスタマイズしていて楽しかったです。
アニメーション実装については以下の記事を参考にさせてもらいました。

• Vue.js の SPA で、進む/戻るのアクションに応じてページ遷移のアニメーションを切り替える - Qiita

全体のデザイン統一とアイコン

全体的に黒と白を貴重としたモノトーンな印象のサイトにしています。Vuetify のコンポーネントのデザインと合わせやすく、サイト全体的にまとまった印象になりました。アイコンは主に FontAwesome と DEVICON を使用しました。保有スキルのページでは技術アイコンを表示するために v-iconコンポーネントを使い DEVICON で配布されているアイコンを埋め込んでいます。アイコンには単色とカラーのものがあったのですが、単色のアイコンを使うことでサイトの雰囲気に合わせやすいのが良かったです。

作り終えてみて

ポートフォリオサイトを構築した結果として動くものができたことは大きな成功体験になりました。作成したものが Web 上で公開されていることが不思議な感覚です。ポートフォリオサイトを構築するにあたって JavaScript でモダンなフロントエンド開発をできたことが楽しく、アウトプットして技術を伸ばしていくことの大切さを実感しました。それと同時に、ドットインストールや Progate を何周も学習して満足していた過去の自分が恥ずかしいです。もっとはやく成果物作成を通して新しい技術に触れておきたかったという後悔もあります。今回の開発を通して新しい体験がたくさんありました。初めてのサイト制作であり、まだまだサイトデザインやサイトのパフォーマンスは改善できる余地があると考えています。細かいところまで見ると至らない点は多くあります。その部分をこれから個人開発をしていくなかで、少しづつ改善していきたいです。次は、今回身につけた Vue.js の知識を踏まえながらサーバーサイドレンダリングが特徴的な Nuxt.js、Next.js などのフレームワークや、Firebase を使ったアプリにも挑戦していきたいです。ここまで読んでいただきありがとうございました。

Reactを触っていて下のように突然{}の引数が出てきて「なんだこれ？？」となりました。

onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }

結論

これは分割代入と呼ばれるものらしくて、以下と同じみたいです。要は、オブジェクトが渡されていて{}とすることで勝手に代入してくれているみたいです。

function onSortEnd(param){
  let oldIndex = param.oldIndex
  let newIndex = param.newIndex
}

等価性とは？

値を比較して、同じと見なすことができるか？ということ。

等価性を比較するために、比較演算子を使用します。

等価性には 厳格な等価性と 抽象的な等価性 の２種類あります。
違いは以下の通りです。

等価性	比較演算子で記述した場合	型の比較
厳格な等価性	a === b	あり
抽象的な等価性	a == b	なし

厳格な等価性と抽象的な等価性の違いについては、データ型の比較を行うか否かというところです。

例１

let a = '1';
let b = 1;

console.log(a === b)

上記の場合、let a = '1'として、文字列型の「１」で変数aを定義しています。一方、let b = 1として、数値型の「１」で変数bを定義してます。

そして最後にconsole.log(a === b)で厳格な等価性で２つの値を比較しております。

この場合、aとbの型が文字列と数値で異なるため、

false

が真偽値として出力されます。

一方、次の場合を見てみましょう。

let a = '1';
let b = 1;

console.log(a == b)

変数の定義については先ほどと同じですが、今回はconsole.log(a == b)で、抽象的な等価性で比較しております。

この場合は

true

が出力されます。
これは、aとbの「１」という値のみ比較しており、文字型と数値型まで比較をしていないためです。

例２

let a = 1;
let b = true;

console.log(b == a)
console.log(b === a)

今回は 変数aを数値型の「１」で定義。変数bを真偽値型の「true」で定義しています。

なお、真偽値型の場合、falsyな値 と truthyな値 という概念があります。

falseになる値とtrueになる値については以下の通りになります。

falsyな値(falseになる値）	truthyな値（trueになる値）
false, null, 0, undefinded, 0n, NaN, ""	falsyな値以外のもの

これを踏まえて出力結果を見ると、

console.log(b == a)については、trueを返します。
console.log(b === a)については、falseを返します。

console.log(b === a)の方は、aが数値型で、bが真偽値型ですのでfalseが返ります。
注目するのは抽象的な等価性比較console.log(b == a)の部分です・

抽象的な等価性を比較する時の処理の流れ

抽象的な等価性を比較する際次のプロセスを辿って比較を行います。

①両辺の型を合わせる作業を行う
②厳格な等価性比較を行う

例２のconsole.log(b == a)をもう少し深く突っ込んで記述して表してみると次のようになります。

let a = 1;
let b = true;

console.log(b === Boolean(a));

まず処理の流れとして(b === Boolean(a))として両辺の型を合わせる作業を行っています。
この場合、最初にbが参照され、bの型が真偽値型だと認識します。その後aを参照する際、aをBoolean（真偽値型）に変換しています。
その後、厳格な等価性比較(===)で比較を行い、出力する流れです。

変数aには「１」の値が入っており、１は先ほども紹介したようにtruthyな値に該当するため、aはtrueということになります。

よって、console.log(b == a)については、trueを返すわけです。

仮にlet b = 0;だった場合は、先ほどと同じように両辺の型を合わせて、厳格な等価性比較を行うわけですが、変数bに代入された「0」はfalsyな値となるのでfalseが出力されます。

例３

空文字が含まれているケースを考えてみましょう。

let a = "";
let b = 0;

console.log(a === b);
console.log(a == b);

厳格な等価性console.log(a === b);はこの場合、falseを返します。
抽象的な等価性console.log(a == b);は、trueを返します。

抽象的な等価性についてもう少し深く突っ込んで記述すると

let a = "";
let b = 0;

console.log(a === b);
console.log(Boolean(a) === Boolean(b));

という形になります。
空文字の場合は数値に変換することができないので、この場合は真偽値型として両辺を統一して厳格な等価性比較をしています。
空文字「""」も「0」もfalsyな値に分類されるため、最終的な出力結果はtrueとなります。

例４

値が設定されていない場合を考えます。

let g = null;
let b;

console.log(a === b);
console.log(a == b);

厳格な等価性console.log(a === b);はこの場合、falseを返します。
抽象的な等価性console.log(a == b);は、trueを返します。

これも抽象的な等価性を細かく見てみると、

let a = null;
let b;

console.log(a === b);
console.log(Boolean(a) === Boolean(b));

となります。
let b;のように、変数が宣言された際に値が設定されていない場合は、undefindedが設定されることになっています。

よってこの場合、 a = null, b = undefinded　つまり　どちらもfalthyな値となりますので、
最終的な出力結果がtrueになります。

比較演算子を使う場合は厳格な等価性比較（===）を使おう！！

抽象的な等価性を使った場合は、例で上げた通り、データ型が異なる場合でもtrueになるケースが沢山あります。

これによって、思わぬバグを引き起こす可能性が高くなりますので、基本的には厳格な等価性比較を使うようにしましょう。

最後に

ご覧いただきありがとうございました。

はじめに

ReactNative（0.63~） + TypeScript（4.0~）を使用するプロジェクトで
importに絶対パスを使用する方法をまとめます。

絶対パスによるインポートを許可することで、ネストの深いモジュールをインポートする場合も簡潔にパスを記述できます。

相対パスの例

import * from '../../../component/foo';

絶対パスの例

import * from 'src/component/foo';

方法

以下２つのファイルに設定を加えます。

• tsconfig.json
• metro.config.js

ReactNativeだとtsconfigだけではうまく動かない。

tsconfig.json

"baseUrl": "./"

metro.config.js

const path = require("path")

module.exports = {
  resolver: {
    extraNodeModules: {
      "src": path.resolve(__dirname, 'src'),
    }
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

まとめ

以下２つのファイルに設定を加えることで実現できる。

• tsconfig.json
• metro.config.js

もちろん、通常どおり相対パスによる指定も可能です。

いつものノリで、思い立ったらとりあえず作ってみていた。

再帰を組むのはめんどくさかったので移動させるステップはべた書きでございます。

See the Pen Hanoi by kob58im (@kob58im) on CodePen.

ハノイの塔についての雑な説明

一番ちっさい輪っかから$N$番目の大きさの輪っかまでの$N$個を１塊で移動させるには、
一番ちっさい輪っかから$N-1$番目の大きさの輪っかまでの$N-1$個を、残りの棒のとこに一旦退避して、$N$番目の大きさの輪っかを目的の棒のとこに移動して、再度、
一番ちっさい輪っかから$N-1$番目の大きさの輪っかまでの$N-1$個を、その上に乗っければよい。（語彙力・・）

まとめ

cypressの公式リポジトリーに例があるからそちらを参照するとできる。
日本語の記事が検索に引っかからなかったから、記事を書いてみました。
エイリアス的な感じですね。

要点

• cypressにはブラウザのダウンロード機能をハックする仕組みがあり、ダウンロードディレクトリをDownloadsから変えることができる。つまりローカルに持ってこれる。
• ローカルに持ってきたCSVファイルをneatCSVでパースしてオブジェクト化する。
• テストする。

※cypressはブラウザのダウンロードAPIをハックする以外にもいろんな事ができる

実際に書いてみてあると便利なコマンド

以下の３つのコマンドを用意しているとテストしやすいかなって考えます。

コマンド	説明
allowDownloadPopup	ダウンロードポップアップを自動でYESにするcypressコマンド
readCSV	csvファイルを読み込んでパースしてオブジェクト化するcypressコマンド
detectEncoding	csvファイルを読み込んでエンコーディングを調べるcypressコマンド

const path = require('path');
const neatCSV = require('neat-csv');
const encoding = require('encoding-japanese');

const defaultDownloadFolder = 'cypress/downloads';

export function allowDownloadPopup(downloadPath, options) {
  // The next command allow downloads in Electron, Chrome, and Edge
  // without any users popups or file save dialogs.
  if (Cypress.browser.name !== 'firefox') {
    // since this call returns a promise, must tell Cypress to wait
    // for it to be resolved
    cy.wrap(
      Cypress.automation('remote:debugger:protocol', {
        command: 'Page.setDownloadBehavior',
        params: { behavior: 'allow', downloadPath: downloadPath || defaultDownloadFolder },
      }),
      { log: false, ...options },
    );
  }
}

export function readCSV(filename, downloadFolder = defaultDownloadFolder, options = {}) {
  const filepath = path.join(downloadFolder, filename);
  return cy.readFile(filepath, { timeout: 15000, ...options }).then(neatCSV);
}

export function detectEncoding(filename, downloadFolder = defaultDownloadFolder, options = {}) {
  const filepath = path.join(downloadFolder, filename);
  return cy
    .readFile(filepath, { timeout: 1500, ...options })
    .then((data, options) => encoding.detect(data));
}

使い方

allowDownloadPopup

beforeEach(function(){
 cy.allowDownloadPopup()
})

readCSV

test.csv を読み込んで、レコード数と最初のレコードの内容をテストする。

test.csv

a,b,c
1,2,3

cy.get('button').contains('CSV(UTF-8))').click()
cy.readCSV('test.csv')
  .then(list => {
     expect(list, 'number of records').to.have.length(1)
     expect(list[0], 'first record').to.deep.equal({
    a: 1,
    b: 2,
    c: 3
     })
  })

detectEncoding

test.csv を読み込んで、エンコーディングが UTF-8 であることをテストする。

cy.detectEncoding('test.csv').then(encoding => {
   expect(encoding, 'encoding').to.equal('UTF-8')
})

以上です。

Reduxの基本的な書き方

1 actionの作成

actionは、取り扱いたいデータの概要を書いているイメージ。

 
//reducks/dots/action.jsx
export const ADD_DOT = "ADD_DOT";
export const add_dot = (dot) => {
return {
        type: ADD_DOT,
        payload: dot,
    };
};

※export const ADD_DOT の意味…　type名である"ADD_DOTS"を変数化することで、type名をtypoしたときに、その旨がエラー文にでるようになる。

2 reducerの作成

actionで作ったデータをどう変更したいかを定義しているイメージ

//reducks/dots/reducer.jsx

import * as Actions from "./action";
import initialState from "../store/initialState"; //次に作る

export const DotReducer = (state = initialState, action) => {
    switch (action.type) {
        case Actions.ADD_DOT:
            return [...state, action.payload];
        default:
            return state;
    }
};

3 initialStateの定義

const initialState = []
export default initialState

このinitialStateが、reducerのstateの初期状態になる。

4 Storeの作成

import { createStore as reduxCreateStore, combineReducers } from "redux";
import { DotReducer } from "../dots/reducers";

export default function createStore() {
    return reduxCreateStore(
        combineReducers({
            dots: DotReducer,
        })
);
}

5 Storeの中身を全てで使えるように設定

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk";
import App from "./App";
import createStore from "./redux/store/store";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //Redux DevToolsを使うために定義
export const store = createStore(composeEnhancers(applyMiddleware(reduxThunk)));

ReactDOM.render(
    < Provider store={store}>
        < App />
    < /Provider>,
    document.getElementById("root")

これでAppコンポーネントにネストされてるものすべてを含めて、 storeで管理している内容が使えるようになった！！いえい！?

6 Actionを使っていく

・actionを使いたいコンポーネントに移動
・useDispatchと、actionをimport
・useDispatchを定義
・actionを使いたいところで「dispatch(アクション名(propsとして渡したいデータ));」

import { useDispatch } from "react-redux";
import { add_dot } from "../../redux/dots/action";

//....

const MiniForm = () => {
    const dispatch = useDispatch();
    const onSubmit = (data) => {
                //...
        });
        dispatch(add_dot(data));
    };
    return (
        < form onSubmit={handleSubmit(onSubmit)}>
        //...
        < /form>
    );
};
export default MiniForm;

これでactionの中に引数に指定したデータ(今回ならdata)が渡る→そのactionに該当するreducerが走る→storeに保管される 、まで行われる

7 Storeに保管されたstateを使う

・useSelectorのimport
・ useSelector((state) => state.dots)を定義。dotsはreducerのexport名（Store参照)
↓
dotというreducerに入っているstateが使えるようになった。
あとは使っていくのみ。(今回はmapで広げる)

import React from "react";
import { useSelector } from "react-redux";

export default function Base() {
    const dots = useSelector((state) => state.dots);
    console.log(dots); //これでstoreからやってきたdotsが見れる！
    return (
        < React.Fragment>
            < Header />
            {dots.map((dot) => {　    //storeからもらってきたdotsを使ってます
                return < Dots dot={dot} />; 
            })}
            //...
            < Footer />
        < /React.Fragment>
    );
}

投稿の動機

@NP_Systemsさんの 製造業において、Pythonに加えてWebも活用して飛躍しよう の記事を見て正にキャッチ‐な話題でしたので、社内での活動状況を投稿しようと思いました。現在私は定年後の再就職先として広島市内の名盤製造業に嘱託として勤めています。仕事内容は社内業務システム「業務支援・改」の構築・保守です。

何故Webなのか

今のシステムは経理・給与・販売管理（移行開発中）を除く、製造業務のほぼ全般をWebシステムで運用しています。巷では業務システムはクライアント・サーバータイプ（VB, VC, Java 等）で作られているみたいですが、かなり早い段階からWebで開発している身としては、楽なのに何故Webで開発しないのかが不思議でした。実際WebでVBよりも高速な伝票入力画面を作ることができます。現役時代に納品したシステムはOSのバージョンアップを行っても問題無く使えていますし、カーソル移動も[Enter]キーで[tabIndex]順に移動できます。端末へのインストールも不要で遠地の端末が壊れても簡単に機器の入れ替えができます。ハードを更改してもシステムを更改する必要が無いのです。環境に依存しないので製造現場ではiPadで運用している部署も有ります。一度作ったシステムを要件が変わらないのに再度開発するのは、資産が残らないという意味で馬鹿らしいと感じています。

実運用画面のサンプル

実際に現場でどんな画面を使っているのかを見てみましょう。
■ 出荷計上一覧（出荷予定・実績の一覧）

■ 出荷計上保守（俗に言う売上伝票、在庫出納と連動）

■ 納品書 先頭ページ (PDF出力)

■ 納品書 最終ページ (PDF出力)

■ 物品受領書 (PDF出力)

■ 品目保守（製品の材料・工程と工数、他各種情報）

■ 生産予定作成（生産オーダーより生産予定を作成）

■ 生産状況一覧（生産ロットの進捗状況を把握）

■ 生産日程（カレンダー上で予定と進捗を確認）

挙げれば切が無いのでこれぐらいにしておきますが、これらはたった一人で設計・施工・導入したものです。意外とWebシステムって簡単に作れるので皆さんもWebで開発する事を強くお勧めします。

開発環境

全てオープンソースです。Java8 (pdfBox), JavaScript, Tomcat9, mariaDB10, JQuery (ほんのチョットだけ), それと検索時に照合が出来ない事が有るので、入力時にANKは半角、カタカナは全角、濁音・半濁音は１文字に合成しています。殆どが手作りなので、皆さんも安価にリーズナブルなシステムを構築できる事請け合いです。生産計画作成画面はJavaScroptでコメントを入れて1,200行強位です。今日嵌って対応していた見積積算画面は少し凝っていて2,200行強でした (共通ライブラリ除く)。意外と手軽だと思いませんか。

まとめ

実は自分の周りに同じ様な事をしている人がいないので、最近疎外感を感じていたところでした。この投稿を切っ掛けにして多くの人にWebで業務システムを開発して貰いたいと思っています。本も買ったけどネットに転がっている情報でプログラムを作れているので、Webによる業務アプリケーション開発は決して敷居の高いものでは無いのです。みんなでWeb開発をやりましよう！

Proxyオブジェクトとは

指定したオブジェクトのプロパティを操作する際に独自の処理を追加する為のオブジェクト。

main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}

const handler = {
  メソッド
}

new Proxy(target, handler);

// target  = 指定するオブジェクトが入る
// handler = 指定したオブジェクト(target)を操作する際に
//           実行されるメソッドが格納されたオブジェクト

使用例１

プロパティの値に変更があった際に「変更がありました。」と出力する。

main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  set(target, prop, value) {
    target[prop] = value;
    console.log('変更がありました。') ;
  }
}

const pxy = new Proxy(target, handler);
pxy.hoge = 'ほげ';

console.log(pxy);

setメソッド
値の変更を検知する。

第一引数：targetオブジェクト
第二引数：プロパティの名前
第三引数：変更された値

main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  set(target, prop, value) {
    console.log(target);
    console.log(prop);
    console.log(value);
  }
}

const pxy = new Proxy(target, handler);
pxy.hoge = 'ほげ';

使用例２

プロパティの値を取得した際に「取得しました。」と出力する。

main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  get(target, prop) {
    console.log('取得しました。');
    return target[prop];
  }
}

const pxy = new Proxy(target, handler);
pxy.hoge;

console.log(pxy);

getメソッド　
値の取得を検知する。

使用例３

プロパティの値を削除した際に「削除しました。」と出力する。

main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  deleteProperty(target, prop) {
    console.log('削除しました。') 
    delete target[prop];
  }
}

const pxy = new Proxy(target, handler);
delete pxy.hoge;

console.log(pxy);

deletePropertyメソッド
値の削除を検知する。

使用例４

存在しないプロパティにアクセスしたときエラーを表示させる。

main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  get(target, prop) {
    if (!target[prop]) {
      throw new Error('プロパティが存在しません。');
    }
    return target[prop];
  }
}

const pxy = new Proxy(target, handler);
console.log(pxy.hoge);
console.log(pxy.fuga);
console.log(pxy.piyo);

---

以上、Proxyについてまとめでした。
ここまで見て頂きありがとうございました！

ビンゴゲームの制作

STARTボタンをクリックするとビンゴ用のカードを作り、その後に抽選ボタンをクリックするごとに抽選して、該当番号を埋めてくれるプログラムを制作します。

<body>
  <table id="table"></table><br>
  <button onclick="start()">START</button>
  <button onclick="lot()">抽選</button>
  <span id="result"></span><br>
  <span id="result2"></span>
</body>

まず、body要素内にtable要素とbutton要素を2つ、span要素を2つ作ります。
table要素にはビンゴ用のカードの表示、button要素はクリックするとカードを作成してくれるボタンと、クリックすると抽選してくれるボタンです。span要素は抽選の結果の表示と、ビンゴしたときの表示をします。

    let numbers = [];
    let first;

    function start() {
      numbers = numSet();
      first = true;
      let result = document.getElementById("result");
      result.textContent = "";

      let table = document.getElementById("table");
      table.innerHTML = "";
      for(let r = 0; r < 5; r++) {
        let tr = document.createElement("tr");
        for(let c = 0; c < 5; c++) {
          let td = document.createElement("td");
          let s = Math.floor(Math.random()*numbers.length);
          td.value = numbers[s];
          td.textContent = td.value;
          td.id = "num" + td.value;
          td.className = "judge";
          td.index = r * 5 + c;
          td.j1 = false;
          td.j2 = false;
          td.j3 = false;
          numbers.splice(s, 1);
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

script要素内は、まず変数numbersとfirstを定義します。
numbersは1〜99までの数字を代入する配列です。
firstは関数startの処理の際に配列numbersの1〜99の数字の内ビンゴ用のカードで使用した数字が25個分無くなっているので、関数lot内で再度1〜99までの数字を代入するために使用します。

関数startはビンゴ用のカードを作成する関数です。
最初に変数numbersに関数numSetを代入します。numSetは1〜99までの数字を返してくれる関数です。
変数firstにはtrueを代入します。後で関数lotを発火させたときに値をfalseにすることで、2回目以降に配列numbersに関数numSetが代入されないようにします。（抽選された数が重複しないようにするため）

変数resultの定義と空の値を代入することで、新しいカードを作成した際に結果の文字表示を消去しています。

次にbody要素内のtable要素に二次元配列でビンゴカードの表示をさせます。「table.innerHTML = "";」で2回目以降にSTARTボタンをクリックしたときに前のカードを削除しています。
「let s = Math.floor(Math.random( )*numbers.length);」で配列numbersからランダムに要素を一つ取得しています。「td.value = numbers[s];」で取得した要素の数字をtd要素のvalueプロパティに代入しています。
td要素のj1プロバティは後で横の行が揃ったときに値をtrueに変えます。j2は縦の列、j3は斜めが揃ったときにtrueに変えます。
「numbers.splice(s, 1);」でビンゴ用のカードに使われた数字を削除しています。
配列.splice(x, y)で配列の要素x番目からy個の要素を削除することができます。（xは0から数える）

    function lot() {
      if(first){
        numbers = numSet();
        first = false;
      }
      let s = Math.floor(Math.random()*numbers.length);
      let result = document.getElementById("result");
      result.textContent = `結果：${numbers[s]}`;
      let w = "num" + numbers[s];
      let td = document.getElementById(w);
      if(td) {
        td.textContent = "●";
      }
      let td2 = document.getElementsByClassName("judge");
      let result2 = document.getElementById("result2");
      result2.textContent = "";
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j1 == false) && (td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j1 == false) && (td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j1 == false) && (td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j1 == false) && (td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j1 == false)) {
        word();
        td2.item(0).j1 =true;
        td2.item(1).j1 =true;
        td2.item(2).j1 =true;
        td2.item(3).j1 =true;
        td2.item(4).j1 =true;
      } else if ((td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j1 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j1 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j1 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j1 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j1 == false)) {
        word();
        td2.item(5).j1 =true;
        td2.item(6).j1 =true;
        td2.item(7).j1 =true;
        td2.item(8).j1 =true;
        td2.item(9).j1 =true;
      } else if ((td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j1 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j1 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j1 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j1 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j1 == false)) {
        word();
        td2.item(10).j1 =true;
        td2.item(11).j1 =true;
        td2.item(12).j1 =true;
        td2.item(13).j1 =true;
        td2.item(14).j1 =true;
      } else if ((td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j1 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j1 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j1 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j1 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j1 == false)) {
        word();
        td2.item(15).j1 =true;
        td2.item(16).j1 =true;
        td2.item(17).j1 =true;
        td2.item(18).j1 =true;
        td2.item(19).j1 =true;
      } else if ((td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j1 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j1 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j1 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j1 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j1 == false)) {
        word();
        td2.item(20).j1 =true;
        td2.item(21).j1 =true;
        td2.item(22).j1 =true;
        td2.item(23).j1 =true;
        td2.item(24).j1 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j2 == false) && (td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j2 == false) && (td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j2 == false) && (td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j2 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j2 == false)) {
        word();
        td2.item(0).j2 =true;
        td2.item(5).j2 =true;
        td2.item(10).j2 =true;
        td2.item(15).j2 =true;
        td2.item(20).j2 =true;
      } else if ((td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j2 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j2 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j2 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j2 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j2 == false)) {
        word();
        td2.item(1).j2 =true;
        td2.item(6).j2 =true;
        td2.item(11).j2 =true;
        td2.item(16).j2 =true;
        td2.item(21).j2 =true;
      } else if ((td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j2 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j2 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j2 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j2 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j2 == false)) {
        word();
        td2.item(2).j2 =true;
        td2.item(7).j2 =true;
        td2.item(12).j2 =true;
        td2.item(17).j2 =true;
        td2.item(22).j2 =true;
      } else if ((td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j2 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j2 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j2 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j2 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j2 == false)) {
        word();
        td2.item(3).j2 =true;
        td2.item(8).j2 =true;
        td2.item(13).j2 =true;
        td2.item(18).j2 =true;
        td2.item(23).j2 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j2 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j2 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j2 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j2 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j2 == false)) {
        word();
        td2.item(4).j2 =true;
        td2.item(9).j2 =true;
        td2.item(14).j2 =true;
        td2.item(19).j2 =true;
        td2.item(24).j2 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j3 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j3 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j3 == false)) {
        word();
        td2.item(0).j3 =true;
        td2.item(6).j3 =true;
        td2.item(12).j3 =true;
        td2.item(18).j3 =true;
        td2.item(24).j3 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j3 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j3 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j3 == false)) {
        word();
        td2.item(4).j3 =true;
        td2.item(8).j3 =true;
        td2.item(12).j3 =true;
        td2.item(16).j3 =true;
        td2.item(20).j3 =true;
      }
      numbers.splice(s, 1);
      if(!numbers.length) {
        result.textContent = "抽選は終わりました。";
      }
    }

関数lotはビンゴの抽選をする関数です。
最初のif文では配列numbersに1〜99の数字を代入していますが、抽選を開始した1回目だけ行うようにしています。2回目以降はfalseとなるので抽選された数字が出ることはありません。

次にランダムに数字を出して、後で「let w = "num" + numbers[s];」と「let td = document.getElementById(w);」でtdに代入した値が、if文でビンゴカードに存在する数字のidと同じ場合はカードの数字を埋めます。

変数td2でビンゴカード上の全てのマスのデータを取得します。

「let result2 = document.getElementById(result2);」と「result2.textContent = "";」でビンゴした後に再抽選したときにビンゴの表示を消去しています。

次のif文でビンゴの判定をしています。
横の行、縦の列、斜めのそれぞれでインデックス番号が揃っているかと画面の表示が埋まっているか判定しています。該当する場合はword関数でビンゴの表示を行い、2回目以降にビンゴの表示をしないようにj1,j2,j3の値にtrueを代入します。
判定が終わったら、「numbers.splice(s, 1);」で抽選された要素を削除します。

最後のif文では、全ての抽選が出尽くした際に抽選が終わった表示をするようにします。

    function numSet() {
      let i = [];
      for(let n = 1; n < 100; n++) {
        i.push(n);
      }
      return i;
    }

numSet関数では配列に1〜99の数字を代入して返すようにしています。

    function word() {
      let result2 = document.getElementById("result2");
      result2.textContent = "ビンゴです。おめでとうございます。";
    }

word関数ではビンゴしたときに画面にビンゴの表示を出すようにしています。

下記のコードをコピーしてファイルに貼り付ければ試すことができます。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>bingo</title>

  <style>
    table {
      border: 3px double black;
      border-collapse: collapse;
    }
    td {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      font-size: 30px;
      text-align: center;
    }
    button {
      width: 60px;
      height: 30px;
      margin: 0px 10px 0 0;
    }
    span {
      font-size: 20px;
      margin: 0;
    }
  </style>

  <script>
    let numbers = [];
    let first;

    function start() {
      numbers = numSet();
      first = true;
      let result = document.getElementById("result");
      result.textContent = "";

      let table = document.getElementById("table");
      table.innerHTML = "";
      for(let r = 0; r < 5; r++) {
        let tr = document.createElement("tr");
        for(let c = 0; c < 5; c++) {
          let td = document.createElement("td");
          let s = Math.floor(Math.random()*numbers.length);
          td.value = numbers[s];
          td.textContent = td.value;
          td.id = "num" + td.value;
          td.className = "judge";
          td.index = r * 5 + c;
          td.j1 = false;
          td.j2 = false;
          td.j3 = false;
          numbers.splice(s, 1);
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

    function lot() {
      if(first){
        numbers = numSet();
        first = false;
      }
      let s = Math.floor(Math.random()*numbers.length);
      let result = document.getElementById("result");
      result.textContent = `結果：${numbers[s]}`;
      let w = "num" + numbers[s];
      let td = document.getElementById(w);
      if(td) {
        td.textContent = "●";
      }
      let td2 = document.getElementsByClassName("judge");
      let result2 = document.getElementById("result2");
      result2.textContent = "";
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j1 == false) && (td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j1 == false) && (td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j1 == false) && (td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j1 == false) && (td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j1 == false)) {
        word();
        td2.item(0).j1 =true;
        td2.item(1).j1 =true;
        td2.item(2).j1 =true;
        td2.item(3).j1 =true;
        td2.item(4).j1 =true;
      } else if ((td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j1 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j1 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j1 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j1 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j1 == false)) {
        word();
        td2.item(5).j1 =true;
        td2.item(6).j1 =true;
        td2.item(7).j1 =true;
        td2.item(8).j1 =true;
        td2.item(9).j1 =true;
      } else if ((td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j1 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j1 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j1 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j1 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j1 == false)) {
        word();
        td2.item(10).j1 =true;
        td2.item(11).j1 =true;
        td2.item(12).j1 =true;
        td2.item(13).j1 =true;
        td2.item(14).j1 =true;
      } else if ((td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j1 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j1 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j1 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j1 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j1 == false)) {
        word();
        td2.item(15).j1 =true;
        td2.item(16).j1 =true;
        td2.item(17).j1 =true;
        td2.item(18).j1 =true;
        td2.item(19).j1 =true;
      } else if ((td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j1 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j1 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j1 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j1 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j1 == false)) {
        word();
        td2.item(20).j1 =true;
        td2.item(21).j1 =true;
        td2.item(22).j1 =true;
        td2.item(23).j1 =true;
        td2.item(24).j1 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j2 == false) && (td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j2 == false) && (td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j2 == false) && (td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j2 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j2 == false)) {
        word();
        td2.item(0).j2 =true;
        td2.item(5).j2 =true;
        td2.item(10).j2 =true;
        td2.item(15).j2 =true;
        td2.item(20).j2 =true;
      } else if ((td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j2 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j2 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j2 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j2 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j2 == false)) {
        word();
        td2.item(1).j2 =true;
        td2.item(6).j2 =true;
        td2.item(11).j2 =true;
        td2.item(16).j2 =true;
        td2.item(21).j2 =true;
      } else if ((td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j2 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j2 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j2 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j2 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j2 == false)) {
        word();
        td2.item(2).j2 =true;
        td2.item(7).j2 =true;
        td2.item(12).j2 =true;
        td2.item(17).j2 =true;
        td2.item(22).j2 =true;
      } else if ((td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j2 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j2 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j2 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j2 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j2 == false)) {
        word();
        td2.item(3).j2 =true;
        td2.item(8).j2 =true;
        td2.item(13).j2 =true;
        td2.item(18).j2 =true;
        td2.item(23).j2 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j2 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j2 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j2 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j2 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j2 == false)) {
        word();
        td2.item(4).j2 =true;
        td2.item(9).j2 =true;
        td2.item(14).j2 =true;
        td2.item(19).j2 =true;
        td2.item(24).j2 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j3 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j3 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j3 == false)) {
        word();
        td2.item(0).j3 =true;
        td2.item(6).j3 =true;
        td2.item(12).j3 =true;
        td2.item(18).j3 =true;
        td2.item(24).j3 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j3 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j3 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j3 == false)) {
        word();
        td2.item(4).j3 =true;
        td2.item(8).j3 =true;
        td2.item(12).j3 =true;
        td2.item(16).j3 =true;
        td2.item(20).j3 =true;
      }
      numbers.splice(s, 1);
      if(!numbers.length) {
        result.textContent = "抽選は終わりました。";
      }
    }

    function numSet() {
      let i = [];
      for(let n = 1; n < 100; n++) {
        i.push(n);
      }
      return i;
    }

    function word() {
      let result2 = document.getElementById("result2");
      result2.textContent = "ビンゴです。おめでとうございます。";
    }
  </script>
</head>

<body>
  <table id="table"></table><br>
  <button onclick="start()">START</button>
  <button onclick="lot()">抽選</button>
  <span id="result"></span><br>
  <span id="result2"></span>
</body>
</html>