JavaScript関連のことを調べてみた2022年04月26日

Node.jsからLINE Notifyを使うメモ (Fetch API利用）

Node.js v18のアップデートでFetch APIがフラグなしで使えるようになったよという話題があるのでLINE NotifyのAPIで試してみました。

> [「Node.js 18」がリリース ～fetch API、Web Streams APIがグローバルスコープで利用可能に](https://forest.watch.impress.co.jp/docs/news/1404310.html)

## 先に実装したコピペ用コード

v18以降ならこのまま実行して動くと思います。

“`js
‘use strcit’;

const BASE_URL = ‘https://notify-api.line.me’;
const PATH = ‘/api/notify’;
const LINE_TOKEN = `トークン`;

const params = new URLSearchParams({
message: ‘こんばんわ。Node.js v18 Fetch APIでLINE Notify API を使ってみました。’,
});

const config

JavaScriptでのedge caseの勉強ノート

# Edge caseとは
エッジケースは、限界値（最高値／最小値）が起こす特別な問題や状態を指している。アルゴリズムの使用など、極端なケースを避けるべきだとよく指摘されています。
今回はこちらの文章に参考して書いた勉強ノートです。
[Algorithms: Common edge cases in JS | by Jeremy Gottfried |](https://medium.com/jeremy-gottfrieds-tech-blog/algorithms-common-edge-cases-in-js-ce35a2d47674)

前回は課題としてソートを書きました。この著者のようにバブルソートを使ってデモしていきたいと思います。
[Bubble Sort](https://qiita.com/hu-yu/items/9a00a1ce93679dbb8728#bubble-sort)
“`js:bubbleSort.js
function bubble(arr) {
// let bigger number always stay on right side
/

色をきれいにソートしてみたかった話

# 概要

タイトルの通り、色をソートしてみたかったという話です。

以下の記事をがっつり参考にさせてもらいました。ありがとうございます！

JavaScriptで複数のランダムな色を虹色に並び替えてみる

あとタグでネタバレしてますが、この話のそもそもの動機については余談に書いてます。（Qiita的にはメインで語るような話でもない気がするので…）

# はじめに

## 色のソート

ソートというと、例えば数字を昇順・降順にソートしたり、日付値をカレンダー順にソートするといった処理があります。

では色をソートするときは何を基準にするかというと、1つに、色相を基準にするという方法があります。

色相が何かという説明はWikipediaさんに任せるとして、色相の並びについては下図の **色相環** が視覚的にわかりやすいかと思います。

Vue→React移行の個人的メモ #1

Vueを使っていたのですが、諸事情によりReactに移行する必要がありました。
React+JavaScript, React+TypeScriptなどのソースを見て気づいたことを
なるべくVueと対比して書いていきます。何回かの記事分けて書きます。

### 変数の埋め込み、関数の埋め込み
Vueでの{{}}と違って、Reactで値を埋め込むcurly braces{}はそれぞれ一つずつ。
Vueで””を使っていたのとは違い、Reactでクリック時に実行する関数はcurly braces{}で渡せる。
些細なことだが、HTMLのonclickと違い、onClickであることが違う。

“`js:関数コンポーネントの例
import {useState} from ‘react’

const Component=()=>{
const [value, setValue] = useState(‘default value’)
const sayClicked = ()=>{
setValue(‘Clicked!’)
}

return (

Node.js のフレームワーク「Fastify」とキーバリューストア「keyv」を組み合わせて試す（JSON を GET・POST で扱う）

過去に別々に試したことがあるフレームワーク「Fastify」とキーバリューストア「keyv」を、組み合わせて試してみるという内容です。

– [Node.js のフレームワークの Fastify と WebSocket を利用可能にする fastify-websocket を軽く触ってみる – Qiita](https://qiita.com/youtoy/items/7c5a318278e397602b76)
– [Node.js用のシンプルなキーバリューストア「keyv」を試す（データの保持はメモリ・SQLite） – Qiita](https://qiita.com/youtoy/items/6137b6d417b1ab1a31e4)

## Fastify で GET・POST を試す（JSON のやりとり）
### GET を扱う
Fastify で GET ＋ JSON を利用する方法は、[公式の「Getting Started > Your first server」](https://www.fastify.io/docs/latest/Guides/Getting-S

【９日目】チャットアプリの作成 [supabase,localStrageを活用]

今回はsupabaseとlocalStrageを使用してチャットアプリを作成します。

機能としては、ユーザー名を登録しチャットの文を送信するとトーク欄に文が表示される、入力途中のトークはリロードしても入力フォームから消さないようにする、送信すると入力フォームから文字を消すというような機能を搭載させます。

See the Pen

Text Fragment を作るブックマークレット

Text Fragment 便利ですね。ただ、 `#:~:text=` という文字列は覚えにくいし入力するのも手間なので、ブックマークレットしました。

“`javascript
javascript: (() => { const text = getSelection() + ”; if (text !== ”) prompt(‘Text Fragment’, `${location.href}#:~:text=${encodeURIComponent(text.trim())}`); else alert(‘テキストが選択されていません。’); })(); void 0;
“`

あらかじめテキストを選択してからブックマークレットを起動すると、 Text Fragment の追記された URL がプロンプトに表示されます。後はコピペしてお使いください。
[例えばこの URL であれば](https://www.eldenring.jp/newsdetail/news_detail_220419_1.html#:~:text=%E6%95%B5%E3%81%AB%E4%B8

Javascript(Node.js)プロジェクトの開発者は必須！　ncuコマンドでパッケージを最新化する

## はじめに
Javascript(Node.js)のプロジェクトで、最初にインストールした時のままのバージョンでずっと開発をしていた、なんて事にならないように定期的にバージョンを更新していく必要があると思う（バージョン更新を後でまとめてやろうとしても変わりすぎて動かない…、なんて事もあるので1週間に1回とかできるだけ高頻度で更新するのが後々楽）。
今回は実際に勉強で作成していたプロジェクトのバージョンを更新してみたので、その備忘録を残す。

## 実際にパッケージの更新をやってみる
[npm-check-updates](https://github.com/raineorshine/npm-check-updates)を利用する。

“`console
[root@localhost node-express]# yarn global add npm-check-updates
yarn global v1.22.17
[1/4] Resolving packages…
[2/4] Fetching packages…
[3/4] Linking dependenci

アコーディオンの動きをCSSで作ってみた

jQueryだとアコーディオンって簡単に作れるな、という印象だったのですが
今回はアコーディオンの開閉切り替えのみをJavaScriptで、アニメーションはCSSのみで作ってみました。

## HTML
“`accordion.html
Accordion

アコーディオンの中身

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキ

Node.js用のシンプルなキーバリューストア「keyv」を試す（データの保持はメモリ・SQLite）

タイトル通りの内容です。Node.js でシンプルなキーバリューストアを使う場合、割とメンテナンスがされているものを選ぶとして選択肢に何があるだろうかと思い、少し調べてみました。

その時に出てきたものの 1つが、今回の記事で扱う [keyv](https://www.npmjs.com/package/keyv) です。
　●jaredwray/keyv: Simple key-value storage with support for multiple backends
　　https://github.com/jaredwray/keyv

公式の説明で「Simple key-value storage with support for multiple backends」と書かれているように、自分の目的に合っていそうです。とりあえず、公式のページや

初めてのReactのテスト

# 開発環境

PC:macOS Montery
エディター：Visual Studio Code

nodebrew: v1.0.1
nodejs: v15.14.0

JEST：プロジェクト生成時のバージョン
※create-react-appで作成したプロジェクトにはJESTが含まれている

# 内容
Reactのテストコードの作成から実行までの流れを忘却録として記録する。

# ディレクトリ構成
下記コマンドを実行して、作成されるプロジェクトの構成とする。
（Reactのチュートリアルの構成）

“`
npx create-react-app my-app
“`

“`
my-app/
　├ public/
　├ src/
　│　├ App.css
　│　├ App.js
　│　├ App.test.js
　│　├ index.css
　│　├ index.js
　│　├ logo.svg
　│　├ reportWebVitals.js
　│　└ setupTests.js
　├ README.md
　├ package-lock.json
　└ package.

body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能

## この記事に書いてあること
JavaScriptプラグインのbody-scroll-lock.jsの使い方について

## サイトリンク
– [GitHubリポジトリ](https://github.com/willmcpo/body-scroll-lock)
– [npmサイト](https://www.npmjs.com/package/body-scroll-lock)

## body-scroll-lock.jsとは？
ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです

対象ブラウザ
iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox

## どんな時に使うか？
例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。
モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。

## なぜ使うの？
スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です

だいたいのJS処理系で console.log の this が不要になっていた件

## 最近、こういうコードを見ておったまげた

“`js
incarnatePromise()
.then(console.log)
.catch(console.error);

ary.forEach(console.log);
“`

何におったまげたかというと、 「`console.log` をそのまま関数として扱ってる」　という点ですね。端的に書くと以下のようになります。

“`js
// （普通）メソッドとして扱う (this = console)
console.log(“Hello”)

// （おったまげ）関数として扱う (this = undefined)
const {log} = console
log(“Hello”)

// ↑は要するにこれ
(console.log)(“Hello”)
“`

これ、以前だったら動く保証はありませんでした。実際になにかのブラウザでエラーになってました。

`console.log` を関数として扱いたいなら、厳密にはこういうふうにする必要があるはずです。

“`js
// this を console に

IoT機器が手に入ったので推しを動かしてみた

## IoTって面白い
この度、obnizというIoT機器が手に入ったので色々触ってみました。
これまで自分でコードを書いたりしても画面の中で動作するのを見るのみだったのですが、IoTは現実世界で自分の作ったものが動作しているのを見ることができるので、その点が本当に面白いなと感じました。

## 推しを動かしてみたい
obnizには色々なセンサーやモーター、LEDといったパーツがありますが、これらの触り方を一通り知って真っ先に思ったことがあります。

**「推しを動かしてみたい」**
…はい。何を言っているか分からない方もいらっしゃると思いますが、obnizを使えば光と音と動きを簡単に制御できる、ということは推しキャラクターのフィギュアやアクリルスタント(以下、アクスタ)を使ってライブを再現できるのではないかと思い至ったわけです。

## 実際にやってみた
思い立ったら後は行動するのみ。という訳で実際に作ったものが以下になります。

自分が電子工作の部品と最低限の知識を得て真っ先にやりたかったこと、それは「推しを動かす」ことである
#obniz
#protoout pic.twitter.com/8ziy2GerTF

— KendoLab (@kelab_8) April 25, 2022

「ライブを再現」ということで、ペンライトの

「いま何時？」「ReactとTypeScriptで時計を作っといたで」

というわけで、下記のように現在時刻をアナログ・デジタルの両方で表示する時計を作りました。特段、スゴイことを書いてあることではありませんのご承知おきください。


## 利用技術
– emotion/react 11.8.2
– emotion/styled 11.8.1
– react 17.0.2
– typescript 4.6.3
– dayjs 1.11.0

## リンク先について
[GitHub](https://github.com/Naughty1029/React-Clock)でソースを公開しています。issue/プルリク募集しています！
またデモについては[こちら](https://react-clock.cocoroworks.net/)で公開しています。

## ソースコードについて
とくに特別なところもないですが、自分

Javascript スワイプ検出

javascriptバニラで十分なプログラムだけど、スワイプ入力したいと言われた時に書いたコード。
何かしらライブラリとかフレームワーク使う時には、たいがい含まれてるんじゃないかな…しらんけど。

# スワイプ検出する君

* 検出するエレメントを指定してもらう。
* そのエレメントに対するtouch系のイベント ( touchstart, touchend, touchmove, touchcancel ) を見張る。
* この動きってスワイプ？ と思ったら、swipe.xxx というイベントを作って発生させる。
* マルチタッチとか気にしない

“`javascript
// スワイプ検出
const SwipeTracker = function(elem, direction=””) {

let x = 0;
let y = 0;
let target = null;
let startX = 0;
let startY = 0;
let moveX = 0;
let moveY = 0;
le

距離センサを使ってポケモンをゲットしてみた

## ポケモンを3次元でゲットしてみたい
前回の投稿を見ていただいた方はお気づきだろうが今回もポケモンに関する記事だ。前回はクイズに正解をするとポケモンを捕まえられるという仕様になっていたのだが、 **『現実世界でポケモンを捕まえたい！』** という小学生からの夢を実現するために、現実世界でポケモンを捕まえた気分になれるようなプロトタイプを作成した。

https://qiita.com/kosuke0517lab/items/7fbe11c337ea3e8c7d16

## 遊び方
– 『ポケモン』とLINEへ送信すると、捕まえる対象のポケモンの画像がLINEへ送られてくる。
– モンスターボール（？）をポケモンに向けて投げる。
– 『ゲーム』とLINEへ送信をすると、距離センサでモンスターボールとの距離を計測する。
　 　3~5cmの間にモンスターボールが止まればポケモンをゲットできる。
– ポケモンがゲットできた際には『やった～！　○○を捕まえた！』とLINEへ送信。

## どんなプロトタイプ？
まずは下記の動画を見ていただきたい。

https://youtu.be/9ES0

[JavaScript]thisのスコープ理解していない人がいるわけない。（私は知らなかった）

# はじめに

画像アップロード機能を実装していたときにスコープに苦しめられた話です。

FileReaderやImageオブジェクトを使って苦手な非同期処理をしていたので、ハマっている原因が整理できずに泥沼化してました。。。

# できごと

## やりたいこと

– ``で画像選択時にリアルタイムで選択した画像が表示される
– 最終的に選択した画像のbase64の値をサーバーに送信したいので、ファイルが選択されたらcanvas→blob→base64の流れでデータを変換する

## 参考にした記事

[‘input type=file’から’canvas’への転写]([https://qiita.com/_shimizu/items/7df9add540984eba8786](https://qiita.com/_shimizu/items/7df9add540984eba8786))

ほぼこちらのソースコードをコピーで実装

## ソースコード

upload-component.vue

“`vue