f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

Quagga.jsで読み取り可能なバーコード

# 対応コード
左側が読み取り可能なコード、右側が読み取る際readersに記載する内容
* JAN: ‘ean_reader’
* EAN: ‘ean_reader’
* UPC: ‘upc_reader’
* NW-7: ‘codabar_reader’
* ITF: ‘i2of5_reader’
* CODE39: ‘code_39_reader’
* CODE93: ‘code_93_reader’
* CODE128: ‘code_128_reader’

# 記載することになったいきさつを知りたい人向けの話
仕事でQuagga.jsを用いたバーコードリーダーを使っていた。今までJANだけ読み取っていたが、どうやらNW-7も読み取るようにするとのことだった
しかし、QuaggaにNW-7が読み取れるなんて記述はない
作り直しなんてことになったらライブラリを選ぶことから始めないといけなくなるぞ…
わー！そんなのいやじゃーー！！と今度はバーコードについて調べると、NW-7(codebar)と出てきた。codebarならQuaggaの説明にあったぞ…！
こうしてバーコードリーダーは

元記事を表示

lodash debounce って何？

vue の勉強をしている際に、しらっと、あまり説明もなく、lodash というライブラリが出てきて、そのライブラリの debounce という関数を使うソースがありました。よくわからないので調べました。

https://qiita.com/waterada/items/986660d31bc107dbd91c

> lodash は大変便利なのですが、関数が多すぎてどれ使ったらいいのか解りづらいのが難点です。ここではその中でも連続する呼び出しを無視してくれる debounce と throttle という負荷対策用の関数を紹介します

lodash の中には、関数がたくさんあって、その中の１つにdebounce があるらしい。

https://qiita.com/haruusagi/items/cea27a0b6939ffbeb990

多重クリックや、サーバへの問い合わせを短時間で連続で行わないようにする事を簡単にできる関数のよう。

上記のブログは、react で書

元記事を表示

Teamsのアダプティブカードの応答をBot Frameworkでキャッチできるようにする

# やりたいこと

Bot FrameworkからTeamsへアダプティブカードを送信したときにアダプティブカードの `Aciton.Submit` で返される値をBot Frameworkのプロンプト入力として反応できるようにしたい

# 何がうまくいかなかったか

Bot FrameworkでTeamsに向けてアダプティブカードを送信したときに、ユーザーの選択をキャッチできるようにしたい。送信するアダプティブカードは下記のもので、4つのボタンそれぞれが `Action.Submit` で、 `data` プロパティには選択肢の日本語と同じ値を文字列で指定しているため、ボタンをクリックするとその値がBot Frameworkに帰ってくる想定です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022607/1a434f6a-9165-6218-b301-35fc39d24e7b.png)

ただし、Teamsで動作確認したところ、アダプティブカードのボタンを押したときに返されるデー

元記事を表示

JavaScriptで、Date型で開始日と終了日から期間を計算し必要な日数以上かチェックする方法

## はじめに
イメージとしてはユーザーがカレンダーから何らかの期間の開始日と終了日をリクエストし、その期間が必要とする日数以上かをJavaScriptでチェックします。
期間の申請機能についてはこの投稿では省略します。
よく使う機能だと思ったため自身の備忘録もかねて投稿します。

## 完成したコード
~~~
function checkValid(start, end) {
　　　　　　　　// リクエストされた開始日と終了日を引数で受け取り変数を作成
var startDate = new Date(start);
var endDate = new Date(end);

// 開始と終了のタイムスタンプをgetし、（終了　- 開始)で時間差を計算する。
var diff = endDate.getTime() – startDate.getTime();
// 時間差をミリ秒単位を日単位に変換し（切り捨て）、1日分を加算。
var term = Math.floor(diff / (24 * 60 * 60 * 1000)) +

元記事を表示

kintoneカスタマイズ環境「Erakis」のご紹介

# Erakisはkintoneのカスタマイズ環境です
github : https://github.com/IshigiwaKenichiro/erakis
Erakisを皆さんに楽しんでほしいです。

必要なものはNode.jsがインストールされたPCです。VSCodeがあるともっといいです。

# Erakisで環境を構築する。
さっそく開発してみます。
## インストールまで
適当な場所でNode.jsパッケージを作ります。下記コマンドをCMD/PowerShellなどで実行。
“`bash
npm init
“`
Erakisの動作にはparcelを利用しています。
“`bash
npm i -D parcel
“`

Erakis本体をインストールします。
“`bash
npm i https://github.com/IshigiwaKenichiro/erakis.git
“`

### 注)mkcertのインストール
開発サーバーのHTTPS化のため、mkcertを利用しています。
windowsマシンの場合はchocolaty経由でセットアップが可

元記事を表示

手入力禁止 (コピペ専用) のメールアドレス入力欄を作ってみる

世の中には、「入力ミス防止のためコピペ禁止」などと**ぬかしやがる**メールアドレス入力欄がある。
**マジふざけんな。**
手入力なんかしたら**typoの原因**になるだろ**馬鹿野郎。**
「確認のため2回入力してください」という指示もよくあるが、そもそもの記憶が間違っている場合は**何十回入力させようがそれで間違いを防げる可能性は低い**だろう。

メーラーなどの確実なソースからメールアドレスをコピペすることで、typoも記憶間違いも防ぎ、正しいメールアドレスを入力できる可能性を上げることができる。
そこで、今回は逆に**手入力禁止 (コピペ専用)** のメールアドレス入力欄を作ってみた。

:::note warn
メーラーからメールアドレスをコピペしても、例えば以下の問題を防ぐことはできず、完璧ではない。

* 本来入力したい自分のメールアドレスではなく、メールの相手のメールアドレスをコピーしてしまう
* 複数のメールアドレスを使い分けている人が、本来使いたいのと別のメールアドレスをコピーしてしまう
* コピーしたメールアドレスが、クリップボードの内容を自動で加工するソフト

元記事を表示

Nodemonを用いたExpress起動

# Express 毎回再起動するの面倒くさくない??

Node.jsでExpressを用いてWebサーバーを作成する記事を今まで記載してきました。
今後も学んだことを記事にしていきますがExpressで機能を追加した際に動作検証をするとき、
何度も再起動するのめんどくさいな、と思ったときに`Nodemon`を知って便利！となったので記事にします。

## Nodemon
`Nodemon`はnpmに公開されているパッケージの一つです。
私が把握している機能は
`指定したディレクトリ内のファイルが変更された場合、自動的にnodeアプリケーションを再起動する`
⇒`Expressでファイルを変更した場合、サーバの再起動をNodemonが自動で行ってくれる`
です。
毎回コマンドで再起動しなくていいのは便利じゃないですか！？笑
※他にも機能があれば教えていただきたいです。

## Nodemon　設定
下記記事で記載したフォルダ構成を元に説明します。
[ExpressでWebサーバーを立ててみる](https://qiita.com/moody_engineer/items/f57733

元記事を表示

p5.js Web Editor上で AlaSQL を動かしてみる

以下の記事の続きで、引き続き「[AlaSQL](https://alasql.org/)」を扱ってみます。

●ブラウザ上で AlaSQL を利用するための下調べ（簡単なメモ） – Qiita
　https://qiita.com/youtoy/items/f36138ddcb2e696dc5db

今回は、p5.js Web Editor上で AlaSQL を使った簡単な処理を動かしてみようと思います。

## 元にするサンプル
今回、元にする内容は以下の公式サイトに掲載されているサンプルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/992fea38-f987-efe7-57d7-8913a50f706f.png)

## p5.js Web Editor上で AlaSQL を使う
早速、p5.js Web Editor上で動かしてみます。

ライブラリは、CDN から読みこむこととします。今回は、以下を使います。

●alasql – Libraries – c

元記事を表示

やってみたシリーズ６編　紹介画像に留める。

信頼できると思われる人向けに、ホームページにzip圧縮資料をアップしました6_0です。
信用ならないと言う人は、信頼のおける人が検査したのが、あったらやってみてください。
address　https://tattyan0-0.sakura.ne.jp/etc/index.html
html_stadio_6_0.zipというのが、対象。

参考画面、メモリー的には画像の方が食うが、テキスト送りの重たさは無いから。
![スクリーンショット 2024-05-13 174449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/6c625a32-b615-40e6-8824-306e99d175cd.png)
起動した画面が少し変わった。

![スクリーンショット 2024-05-13 174524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/384b8039-e3be-0f88-d211-c02

元記事を表示

前回遷移したページURL取得(リファラ)

## 前ページのURLvue-routerを使ってリファラを取得する
##### リファラ：直前に滞在していたWebページのこと

“`
import { useRouter } from ‘#imports’
const router = useRouter()
const previousPath = ref(“/”)

router.beforeEach((to, from, next) => {
previousPath.value = from.fullPath

　// 前回アクセスしたURL
console.log(previousPath.value)

next()
})
“`
## 解説
“`
router.beforeEach((to, from, next) => {
// to: 現在から移動しようとするルート
// from： 現在から前のルート
// next(): ナビゲーションを許可する
}
“`

## 補足
### history backでも取得可能みたい
“`
// 1つ前のレコード

元記事を表示

スプレッド構文　[JavaScript]

## 自分の感想：

JavaScript学習中、スプレッド構文というものを学んだので、
自分なりにまとめてみたいと思います。

まず、最初の感想として、スプレッドなので広げるや **拡散？** などの意味から何か縮こまっているものを広げるお手伝いをしてくれるのものなのかなと推測！

そこで、MDNによる定義を確認してみると・・・

:::note info
定義：
>配列式や文字列式などの反復可能オブジェクトを、０個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を期待された場所で、「展開」したり、オブジェクト式を、０個以上のキーと値のペア（オブジェクトリテラルの場合）を期待された場所で「展開」したりすることができる。
:::
##
とのこと・・
**「展開」** というキーワードがあるので予想していた挙動と同じような意味があることはわかったけど、今一つ何を言っているのか難しい・・・
なので、自分なりに実践を踏まえて読み解いていこうと思います。
##
できること、使い方

・スプレッド構文は、オブジェクトや配列のすべての要素を何らかのリストに入れる必要がある場合に使用する

元記事を表示

prismaのseedファイルを作りテーブルに初期データを投入する

# やりたいこと
prismaのマイグレーションをしたら、DBテーブルに初期データを投入したい

# やり方
userテーブルに対して初期データを入れるとします。

まず、prismaフォルダ配下に以下のようなseed.jsを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538617/8a0a7fe9-511d-98b7-06a0-cb80722273fd.png)

“`ruby:seed.js
const { PrismaClient } = require(‘@prisma/client’);

const prisma = new PrismaClient();

async function main() {
console.log(‘Seeding data…’);

// ユーザーを作成する例
const user1 = await prisma.user.create({
data: {
email: ‘user

元記事を表示

ECMAScriptのPattern Matcing 案について

こちらの記事で「ECMAScriptにパターンマッチングが来るかも！」ということを知りました。（リンク先は英語・Mediumメンバー限定記事です。ご注意を）

https://codeeverywhere.medium.com/goodbye-if-else-hello-pattern-matching-in-javascript-52bd46eda41f

しかし、この提案について日本語で書かれた記事が無い！　そこでECMAの提案ページを抄訳することでこの凄そうな機能について周知していきたいと思います。

https://github.com/tc39/proposal-pattern-matching

## パターンマッチングとは

オブジェクト指向プログラミングにおけるパターンマッチングとは何でしょう。[WikiPediaの英語版記事](https://en.wikipedia.org/wiki/Pattern_matching)を参考にすると「与えられたトークンシークエンスがパターン構成を満たしているかどうかをチェックすること」(the act of checking a g

元記事を表示

ガチャで映画を選べるアプリ【プライム名人】のリリースにあたって考えたこと（技術編）

# 作ったアプリ
https://jp.prime-meijin.com

![jp.prime-meijin.com_(iPhone SE).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111575/604b0523-4492-e3bc-c09e-dfcb8bb5355c.png)
![jp.prime-meijin.com_(iPhone SE) (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111575/716f9faf-d79b-6593-1b6b-fe2bc42ed049.png)
![jp.prime-meijin.com_(iPhone SE) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111575/c0e254c3-16aa-b80f-221e-4e6e9a599103.png)

プライム名人は、A

元記事を表示

ガチャで映画を選べるアプリ【プライム名人】のリリースにあたって考えたこと（機能編）

# 作ったアプリ
https://jp.prime-meijin.com

![jp.prime-meijin.com_(iPhone SE).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111575/604b0523-4492-e3bc-c09e-dfcb8bb5355c.png)
![jp.prime-meijin.com_(iPhone SE) (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111575/716f9faf-d79b-6593-1b6b-fe2bc42ed049.png)
![jp.prime-meijin.com_(iPhone SE) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111575/c0e254c3-16aa-b80f-221e-4e6e9a599103.png)

プライム名人は、A

元記事を表示

React & Firebaseを使ったWebサービス開発入門【データベース&ログイン】

## この記事について
先日作成した[React & Firebaseを使ったWebサービス開発入門](https://qiita.com/pigretyasushi/items/add22ebf450eb236a44c)の続編であり、まだ全編を読んでない方はそちらを先にお読みください。

## このサービスについて
私も含めWebアプリ開発を行うことを志した人間が最も初めに作る本格的なサービスはおおよそSNSになるのではないだろうか。
それも当然でWebサービスに必要な機能が全て揃っている。データベースのCRUDとユーザログインである。
このサービスはユーザ毎に気になる映画をお気に入りに保存したり解除したりすることを肝としているため、これらの機能追加は避けられない。

![スクリーンショット 2024-05-13 9.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659630/0b82577f-b331-3ae9-dca2-0a1b8fa94475.png)

それでは今回Firestor

元記事を表示

【Javascript】クソコードを憎め！クソコード構築選手権（独り）

#### ※この記事には通常では考えられないような記法が多々登場します
クソコードって見るたびに**イラッ**ときますよね？
ということでその憂さ晴らしで逆にどこまでクソコードかけるかなっていうやつです。
（EsolangでFizzBuzz回です）
# おまけクソコード集
とあるプロジェクト（個人開発）で[タイマー](https://github.com/Nikonosfive/Tabatch/)周りを作っていたんですけど、
天災的にコピペが駆使されていて()
なんかもうすごくて、、、
まあEsolang、CodeGolf勢なんで耐性はあるんですけども
“`html


　　　　　　　　︙