JavaScript関連のことを調べてみた2021年12月06日

Symbol sdk 検証スクリプト完全版

この記事は [nem Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nem) 6日目の記事です。

# はじめに

開発用コンソールで検証するためのスクリプト置き場です。今まで何度かQiitaでも動作検証のためのスクリプトを紹介してきましたが、今回はほぼすべてのメソッドを検証できる完全版です。
Twitterで「動かない」とツイートしたら秒で私からの解決リプを経験された方がいるかもしれませんが、以下のスクリプトで再現のための検証環境を構築しています。

# 接続先

– メインネット
– https://node.xembook.net/chain/info
– https://sym-main-01.opening-line.jp:3001/chain/info
– https://the-symbol-node.dusan.gq:3001/chain/info
– テストネット
– https://sym-test.opening-line.jp:3001/chain/inf

Selenium/Playwrightで要素が取得できなかった時はJavaScriptを実行するとうまくいく時がある

## 事象

PythonでSelenium/Playwrightを使って、AWS Cognitoの認証ページへのログインを自動化しようとする際、
画面上の要素（入力フォーム）を取得しようとするとエラーが出て要素を取得できませんでした。

怒られ方は

> element not interactable

とか

> timeout

とかであまり参考にならなかった覚えがあります（後日追記予定）

## 解決

それぞれのフレームワークで下記のようにページ内でJavaScriptを実行することで取得ができました。

“`selenium.py
driver.execute_script(“document.querySelectorAll(‘#signInFormUsername’).value =’test'”)
“`

“`playwight.py
page.evaluate(“document.querySelectorAll(‘#signInFormUsername’).value = ‘test'”)
“`

## 考察

上のコードで動いた理由は著者は正確には把握

HEIC画像をjsで.pngや.jpegに変換する

# HEIC画像とは
iOSのスマホで撮影した写真の形式で、高画質でありがながら、サイズが軽いという特徴があります。
元々は「JPEG」形式だったのですが、iOS11以降より変わったようです。
拡張子はそのまま「.HIEC」もしくは「.HEIF」です。

# 抱えている課題
ブラウザではこのHEIC画像を表示することが出来ないという課題があります。
開発中のスマホアプリの中で、.heicのままURLをDBなどに保存し、そのURLをブラウザで表示したいとなった時に、問題が発生するという状態です。
ただ拡張子を変えても、上手く表示できません。

※ちなみに、この「.HEIC」形式の画像はiOSのアプリ内で利用する分には問題ありません。

### 課題を体験
以下URLにアクセスすると、ブラウザで表示されるのではなく、ローカルにダウンロードされてしまうと思います。
https://alexcorvi.github.io/heic2any/demo/1.heic
これを通常の画像と同じようにブラウザに表示したいのに、出来ないという問題に直面した方のための記事になります。

# 解決策

huskyとlint-stagedを使ってlint errorが発生していたらcommitできないようにしよう

パーソンリンクアドベントカレンダー6日目の記事です！

# 前提
– eslintは導入済み

以下のようなディレクトリ構成で行いました。

“`
.
├── front
└── server
“`

# 手順

まず`front`配下でライブラリのインストール

“`
yarn add -D husky lint-staged
“`

### huskyの初期化コマンドの実行

“`
npx husky-init && yarn
“`

### `package.json`をカスタマイズ

“`
{
“scripts”: {
…
“lint”: “eslint . –ext ts –ext vue –ext js”,
“prepare”: “cd .. && husky install front/.husky”,
“lint-staged”: “lint-staged”
},
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},

SlackのOAuthフローをDockerを使ってPoCする

## 経緯
[前回](https://qiita.com/tenda_ryo_y/items/8e16f0b508170f9ab230) 、ChatworkのOAuthフローをDockerで作ってみました。実はSlackに対しても同様の調査をする必要がありましたので、今回はその環境を使ってSlackのOAuthフローを作っていきたいと思います。使用するSlack APIのバージョンは**v2**です。
## 準備
### Slack app directory から Appの作成
SlackでOAuthを行うためにはまず、Slack Appを作る必要があります。
テスト用に作成したWorkspaceにAppを作っていきます。

まだ１つもAppが存在しない場合はこのような表示になっていますので、**Create an App**をクリックしましょう。
![スクリーンショット_2021-07-28_15.52.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/18935c42-a795-

Next2D NoCode ToolのFilterを利用する

フィルターは、グラフィックエフェクトの一種で、ぼかし、ベベル、グロー、ドロップシャドウなど、豊富な視覚効果をDisplayObjectに適用して表示できます。

# 事前の技術共有事項
フィルター機能はメモリを大量に消費するので、使い過ぎには十分注意してください。
特に広範囲にフィルターを適用した場合、レンダリング処理が重くなります。

但し、座標(x,y)変更であればキャッシュしたフィルターが適用されるためレンダリング負荷は発生しません。ですが、拡大縮小、回転、色の変化もしくはフィルターの値に変更が行われた場合、フレーム毎に再描画をします。
この特性を理解頂き、効果的にご利用頂ければと思います。

# DropShadow
シャドウアルゴリズムは、ぼかしフィルターで使用するのと同じボックスフィルターに基づいています。ドロップシャドウのスタイルには複数のオプションがあり、`内側シャドウ`、`外側シャドウ`、`ノックアウトモード`などがあります。

before|after
:-:|:-:
Deno標準ライブラリでServer-Sent Events

この記事はDeno Advent Calendar 2021とは全く関係ない記事です。

Denoの標準ライブラリを使って、Server-Sent Eventsを送信するサーバーを書いていきたいと思います。

## Server-Sent Eventsとは？

[Server-Sent Events](https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)（SSE）とは、サーバーからクライアントへイベントを受け渡しできる接続方法のことです。WebSocketと似ていますが、WeSocketが双方向通信なのに対し、SSEはデータがサーバーからクライアントへの1方向しか送信できないという違いがあります。

## Deno標準ライブラリのサーバーでServer-Sent Eventsを送信する

SSEを送信するには`ReadableStream`を使用します。

“`ts:SSEの送信
import { serve } from “https://deno.lan

【Vue.js】サイズ・色にも対応！SVGアイコン簡単な作り方

VueでサクッとオリジナルのSVGアイコンコンポーネントを作成する方法です。
今回は以下の要件を満たすようにします。

– 色が変更できる
– 大きさが変更できる

:point_up: __この記事のポイント__
– CSSの`currentColor`による色変更
– CSS変数を使ったサイズ変更

#下準備

まずはIllustratorでの`

– 管理上アイコンは一連のものを一つのAIファイルでまとめると良い
– アートボードは100px*100px(任意)
– アートボード、レイヤーともに名前をつける（レイヤー名はSVGのid属性に割り当てられます）
– svgのコードをシンプルにするために”パスのアウトライン”で面データに加工

SVGのオプションは以下のようにします。
![image.p

Lisk SDKでブロックチェーンアプリケーションを作る

# はじめに
[Lisk](https://lisk.com/)って名前を知っていても[Lisk SDK](https://lisk.com/documentation/lisk-sdk/index.html)に触れたことがある人は少ないのでは、ということで今回記事にしました。
丁度いいところに、[アドベントカレンダー](https://qiita.com/advent-calendar/2021/blockchain)もあったしね。
構築手順を書いているので少し長いですがお付き合いください。

https://lisk.com/

# Lisk SDK ってなんぞ
ブロックチェーンとその上で動作するアプリケーション(ブロックチェーンアプリケーション)を構築するための開発キット。
これを使用して作成されたアプリケーションは独自のブロックチェーン上で動作します。
また、将来的にサイドチェーンとしてLiskにつながることが可能になります。
なお、JavaScript、TypeScriptで構築できるので非常に楽。(いや、ホントに)

:::note info
サイドチェーンとしてLisk

LINEでスタンプ（QRコード）を集めて抽選会ができるサービスを作った話

# 概要

LINEで抽選会ができるサービスを今年のゴールデンウィークに作りました。このサービスを作った経緯・技術についてこのアドベントカレンダーで書きます。

# どんなサービスを作ったのか？
LINEで簡単に抽選会が開催できるサービスを作りました?

**ザ・抽選会**

https://the-chusenkai.com/

【新サービスリリース?】

LINEで抽選会が開催できる「ザ・抽選会」をリリースしました！

ショッピングモールや商店街でやっているような抽選会を、LINEを使って非接触且つ簡単に開催できるサービスです。

GW中に開発して、GW明けに無事リリースできました? ﾔｯﾀﾈ!!https://t.co/83oXth9I7W pic.twitter.com/0tJytR6XZ3

— フジワラユウタ (@Fujiyama_Yuta) May 6, 2021

# なぜこのサービスを作ったのか？
家の近くのショッピングモールに遊びに行ったときに、抽選会を開催していました。コロナ禍ということもあり、デジタルでの抽選会でしたが、完全にはデジタル化できていませんでした。

その抽選会では 5,000円以上買い物をすると、抽選券をゲットでき、抽選券に書かれている番号を打ち込むと抽選会に参加できるという仕様でした。「5,000円以上の買い物をしているかどうか」のレシート確認に長蛇の列ができており、これは果たしてデジタル抽選会なのか？自分であればもっとよいプロダクトを作れそう？と思ったのがこの、サービスを

React Hook Formで数値を処理する際にハマったこと


本記事は、[React Advent Calendar 2021](https://qiita.com/advent-calendar/2021/react)の6日目の記事です。

Reactでフォームを作成するとき、簡単に作成できる[React Hook Form](https://react-hook-form.com/jp/)を使うことがよくあるかと思います。
本記事では、私がReact Hook Formで数値を処理する際にハマったこととその解決方法を紹介します。

なお、記事中のコードは一部分の引用です。記事の最後にCodeSandboxのリンクを記載しています。

# はじめに
React Hook Formでは下記のように`useForm()`を使って必要な関数や値を取得します。
また、フォーム送信のハンドラ(ここでは`onSubm

ネットで知り合った仲間と農家の3代目の困りごとをFirebaseで解決した話

### はじめに

※この記事は[freee APIで業務を楽しく便利にハックしよう！](https://qiita.com/advent-calendar/2021/freee-api)アドベントカレンダー2021の6日目の記事として投稿しています。

はじめまして。今年の1月からプログラミングの勉強をしているものです。
今回は、ネットで知り合った仲間とともに（顔もフルネームも知らないもの同士で）半年間、開発を行い、農家の3代目の困りごとを解決するアプリを作った話をしたいと思います。

### きっかけ

私は技術力を身につけたいと思い、今年の1月〜4月ごろまで独学で勉強を進めていました。しかし次第に写経に飽き、このままUdemyなどで写経をして学習するより実際になにか動くものを作るほうが楽しいだろうなと思うようになりました。

また、せっかくなら1人でやるより誰かと一緒に開発する方がもっと楽しいだろうなと思い、勇気を出してネットで仲間を募り、アプリのチーム開発を始めてみることにしました。

募集したメンバーのうちの1人が農業をテーマになにか取り組みたいという希望があったため、農業の

p5.jsの関数まとめ part.5 constrain()

この記事は Qiita p5js アドベントカレンダー6日目の記事です。

## これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はconstrain()について。

## constrain()
動的な数値(mouseXなど)をconstrainに渡すと、指定した範囲を超えない数値を返してくれる関数です。
地味ですがすごく面白い機能だと思います。

### リファレンスより
> Constrains a value between a minimum and maximum value.

> 最小値と最大値の間で値を拘束します。(DeepL翻訳)

### Type
“`typescript
constrain(n: number, low: number, high: number): number;
“`

引数
– n 基本的にここは動的な値を渡すことになります。
– low 返す値の下限を設定できます。
– high 返す値の上限を設定できます。

nがlowを下回ったり、highを上回ったりしたとしても、
constrainからは必ずこの

JavaScriptの数値型

2進数の世界で動いている汎用計算機が処理する数値は、整数か浮動小数点数の2つに分けられます。C言語の型ではintやdoubleです。それぞれの型はメモリ上でのビット長が決まっており、32bitや64bitです。

言語によっては数値の精度を必要ならいくらでも伸ばしたりできるような任意精度演算
という演算システム（実際上は利用可能なメモリ容量に制限される）による演算が可能な言語もあります。

ここではJavaScriptで数値がどのように扱われているのかを記述します。

# JavaScriptの数値は1種類

JavaScriptにの数値型は1種類しかありません。
JavaScriptでは整数・浮動小数点数の区別がなくすべての数値が __64ビットの浮動小数(double型)__ のみです。

以下のようなプログラムでは一見整数を扱ってるように見えますが、これはすべて小数としてデータを扱ってることになります。

“`JavaScript
const x = 1
const y = 2

console.log(x + y) //3
“`

double型でも52ビットをはみ出

Promiseのクイズです

Promise の登場で面倒な非同期処理がとても簡潔に扱えるようになりました。それでも、やはり非同期処理には違いないので、ややこしい部分もあります。そんなとき、筆者は簡単なコードを書いて、実際に試してみることにしています。

以下は、筆者が自分のために作ったコードレットをクイズにしたものです。Promise が分かりにくいと思う方は、トライしてみてください。

なお、検証した環境は、Node.js が v17.2.0、OS が Debian Linux v11.1 です。

#### 予備知識: Promise オブジェクトの状態
ここで、Promiseオブジェクトの状態をまとめておきます[^pstate]。

|状態|内容|
|:–|:–|
|待機中（pending）|初期状態。非同期関数は実行中|
|成功（fulfilled）|非同期関数の処理が成功した|
|失敗（rejected）|非同期関数の処理が失敗した。catchで処理する|

#### 第1問 Promise化
JavaScriptの既存の非同期関数を Promise オブジェクトを返す関数として再定義すること

ブラウザで動くドット絵なゲームを作る！

作りました！
撃って避けてスコアを稼ぐ、シンプルなゲームです。

**アドベントカレンダー**でのゲームふたたび。
去年はランゲームでしたが、今年は**シューティングゲーム**になりました。

https://hasegawa-campfire.github.io/fire-shooter-san

:::note warn
わりと音が出ます
:::

やはり今回も、思うところや紆余曲折はイロイロありました。
ありましたがそれは note にまとめて、こちらの Qiita は技術的なお話です。

https://note.com/8kg/n/n7064d21ecfcf/

## 技術概要

前回のゲームはとても Webフロントらしく HTML や CSS が活躍していました。
が、今回は **canvas** でゴリゴリ描い

デザイナーでもやればできる！FigmaをJavaScriptで操作してみる

サイバーエージェントでコード書いたりデザインしたりしている谷（[@hiloki](https://twitter.com/hiloki)）です。
QiitaでのFigmaアドベントカレンダー6日目として書きます。

https://qiita.com/advent-calendar/2021/figma

## Figmaはプラグインがいっぱいある

Figmaの人気を支える一つとしては、プラグインの豊富さにあると思います。

https://www.figma.com/community/explore

デザイン作業の煩わしいところを解消してくれるものなど、業務効率を挙げるのに役立つものが多く存在しています。僕自身も、自分で少し面倒だなとおもった時、こういうのがあれば便利かもな、というのは[プラグインをつくって公開しています](https://www.figma.com/@hiloki)。

https://www.figma.com/@hiloki

Figmaのプラグインの内部はJavaScriptで実装することができ、Webフロントエンドの開発経験があれば、ある程度のことはさ

CakePHP+jQuery製UIをReactでシンプルにした件

これは、[Lancers（ランサーズ）Advent Calendar 2021](https://qiita.com/advent-calendar/2021/lancers) の6日目の記事です。

はじめまして、ランサーズでフロントエンドエンジニアとして従事している[谷](https://scrapbox.io/high-g/profile)です。

この記事では、CakePHP ＋ jQueryで作成されていたUIを元に、Reactで作成した際に、学びや気付きがあったので、それを共有できればと思います。

また、記事の内容自体は、世間一般では、「それ、何回目やねん！」とツッコミが来そうな割とありふれた内容なのですが、ランサーズがリリースされた2008年当時、jsがまだまだおもちゃ扱いされていた時代を経て、Ajaxが流行となり、YUI、Prototype.js、jQueryが出現し、Angular.js、 Backbone.jsをはじめ、いくつものjsフレームワークが出現し、ReactやVueが出現して何年か経ち、Webフロントエンドが成熟した現在において、ランサーズとして改めて振

【micro:bit 2021】 PC と micro:bit を通信させる方法： Node.js・MakeCode でのシンプルなシリアル通信（USBケーブル接続）

この記事は、2021年の [micro:bit のアドベントカレンダー](https://qiita.com/advent-calendar/2021/microbit) の 6日目の記事です。

micro:bit を PC と USBケーブルでつないだ状態で、PC との間でやりとりをする方法の 1つである「シリアル通信」を扱います。
その中でも Node.js を用いたものについて、軽いお試しをしていく形です。

## 過去に micro:bit と PC との間の通信について書いた記事
過去にも、micro:bit と PC との間で何らか通信させる話を、以下のように複数書いています。

– Bluetooth関連
– [Web Bluetooth API を使い micro:bit とブラウザの間で BLE通信](https://qiita.com/youtoy/items/c98c0996458a21fc1e67)
– [あらためて noble でガジェットを扱う話に着手する： toio と micro:bit を複数混在させてスキャン、toio の複数制御（6台

【JavaScript】変数宣言の使い分けについて（var let const）【初学者の疑問点を簡潔に解説】

## はじめに
　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## 今回の疑問点
　今回の疑問点は、

　　_JavaScriptにおける変数宣言の使い分け_
　
　です。　

　最近、JavaScriptを勉強し始め、上記の点については一度まとめておいた方が良いと感じたので、記事にすることにしました。
## 疑問点についての解説

###結論
　varは現在は、ほとんど使用されていない。
　letは再代入が必要なときに使用し、constは定数的に扱う場合に使用する。

###それぞれの変数宣言の違いと特徴
　それぞれの再宣言、再代入、スコープについてまとめます。

####再宣言
**再宣言**：一度宣言した変数名と同名の変数を再度宣言すること

`var` → 可能。
`let` → Uncaught SyntaxErrorが出る。不可。