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

JavaScript備忘録

console.log(“”);
//「()」に出力する文字を入力。文字列は””　、数字はそのまま

変数　let
例
let name =”こんにちわ”;
console.log(“name”)　;
結果：こんにちわ

定数 const
例
const hello =”こんばんわ”;
console.log(“hello”);　
結果：こんばんわ

テンプレートリテラル　　特徴：※バッククォーテーションで囲む
例
const hello =”にんじゃわんこ”;
console.log(`こんにちは、${name}さん`);
//結果：こんにちは、にんじゃわんこさん

条件分岐 if　　※見やすくするために、Tabでインデント（字下げ）をつける

例
const number = 12;
if (number > 10) {
　　　　　　console.log(“numberは10より大きいです”);
}
//結果：numberは10より大きいです

真偽値と比較演算子
a < b aはbより小さい a <= b aの方が小さいまたは等しい a > b
aはbより大きい
a >=

コピペでOK! 0円LINEチャットボットを作ろう! #LINEDC #GAS #クイックリプライ

## これ0円で出来んじゃない？

ある小売業でずっと営業職(店長)をしていたアナログ人間です。
昨年あるプログラミングスクールに通い、LINEを使ったアプリを0から開発。
クラウドファンディングにも挑戦しました。

https://camp-fire.jp/projects/528736/preview

自分で作ってみたことで、これまで何気なく「友達登録」していた色々な会社の
LINEチャットボットに対して「どう作ってるんだろ？」「なるほど～この機能こう使うか～」
と、色々な見方が出来るようになりました。(偉そう)

自社ではLINEチャットボットがまだ開発されていなかったので
**ならば0円で自分で作ってみちゃおう!!**と思い立ちました。

## LINEを入口にして情報にアクセス

プロトタイプとして作ったものはこちら

クイックリプライと
リッチメニューで
0円企業LINEbot
自作してみた?#protoout#linedc pic.twitter.com/gyzsTCpa4N

— おきなかがいこつ?のこるん作るひと? 【CF支援感謝】 (@okinakamasayos1) April 12, 2022

試作段階ですが、ぜひこちらからお試しください!!

!

yarnでcreate-react-appをするには？

Reactのアプリの雛形を作成するコマンドといえば
“`
npx create-react-app my-app
“`
に馴染みがあるのではないでしょうか。
私も特に疑問も持たずに、これまでこのコマンドでアプリを生成してきました。

しかし、これだと開発を進めていく際に`yarn`コマンドでパッケージの追加を使うと`package-lock.json`と`yarn.lock`がどちらもある状態になってしまい気持ち悪いことになります。

一旦、`package-lock.json`と`node_modulesディレクトリ`を削除して、`yarn install`で入れ直すことで解決できますが、それも二度手間。できれば気持ちよくReactの開発をスタートさせたいものです。

では、「yarnでcreate-react-appする」にはどうすればいいのか？

## Yarnでcreate React Appする
それが、こちら。
“`
yarn create react-app my-app
“`
`npx`の時は**create-react-app**でしたが、`yarn`の場合は

TypeScriptの基本の型

## 目的
皆さんこんにちわ！
都内でエンジニアをしております者です。
今回の投稿では、仕事でTypeScriptを用いた開発をすることになりましたので、その学習と振り返りを兼ねて記事を投稿しようと思っています。
この記事は少しづつブラッシュアップしていこうと思いますので、まずはメモ書き程度に見ていただければと思います。

### 基本の型
・boolean
・number
・string
・array
“`typescript:qiita.ts
//記述方法が二つ存在する
let list :number[] = [1,2,3]
let list :Array = [1,2,3]
“`
・tuple
“`typescript:qiita.ts
let x: [string, number];
x = [“test”, 100] //OK
x = [100, “test”] //NG
“`
・any
→どんな値も許容するが、使用するとTypeScriptの恩恵が受けられないので基本使用しない。
・unknown
→値の代入は肝要ですが、使用する際は厳しくType

jsonで中間プロパティが存在しないときに使えるオプショナルチェーン

APIなどでjsonを取得時、中間プロパティが存在しない場合
オプショナルチェーンという方法で解決できたため記載します。

## 先に結論
##### 解決したコード
“`javascript:sample-answer.js
// リクエストを投げる処理
console.log(data.items[i].volumeInfo.imageLinks?.thumbnail);
“`

以下の配列で`thumbnail`が欲しいのに`imageLinks`のプロパティすらないって場合
`console.log(data.items[i].volumeInfo.imageLinks.thumbnail);`

オプショナルチェーン [?] を利用することで左側のプロパティが存在するかチェックし、
存在しなければundefinedを返してくれます。

## 動作環境
ローカル環境でHTML, CSS, JS, jQueryを使用
　※Chromeで動作確認

## 解決したい課題
今回はGoogle Books APIを利用して簡単なWEBアプリを作成する際に発生しました。
APIで4

【備忘録】.phpから別の.phpを実行する

web開発初心者の備忘録です。
ガラパゴスでも自家消費用だからへーきへーき。
# ポイント
include関数とrequire関数を使用することで、外部の.phpを参照する事ができる。(.phpに限らずファイルなら何でも読み込める？未検証。)
それぞれの違いは以下の通り。
– include関数　→　ファイルを読み込めなかった際、E_WARNINGを発生させるが、処理は強行する。
– require関数　→　ファイルを読み込めなかった際、E_COMPILE_ERRORを発生させて、処理も止まる。

https://www.php.net/manual/ja/function.require.php
# ファイル構成
“`
IISでルートに設定しているフォルダ
　└ test
　　　├ main.html
　　　├ main.php
　　　├ lib.php
　　　├ main.js
　　　└ jquery-3.6.0.js
“`
# ソースコード
### main.html
“`html

【更新中】プログラミングノート（モダンJavaScript）

# はじめに
Udemyの[【世界で7万人が受講】Understanding TypeScript 日本語版](https://www.udemy.com/course/understanding-typescript-jp)を参考に一部JavaScriptを学習したので、プログラミングノート（カンペ用ノート）をします。

# letとvar
letを使うべき(ベストは全部const)
“`
// varはグローバルスコープまたは関数スコープ
function add(a: number, b: number) {
var result; // これは関数スコープ
result = a + b;
return result;
}

if (age >= 20) {
var isAdult = true; // これはグローバルスコープ
}
console.log(isAdult); // undefined

// letはブロックスコープ
if (age >= 20) {
let isAdult = true; // ブロックスコープ
}
console.log

JavaScriptで入力値を100万単位に変換したい時

## やりたいこと
input入力欄に3と入力されたら300万にしてAPIに送りたい。
桁数が大きいデータを扱うときにフロントでは桁数を少なく表示したい。一方でAPIに送る情報には元の数値を入れて送る

## 実装メモ
“`ts

“`

“`ts
const getInputValue = ():string => {
const target = document.querySelector(“input[name=name]”);
return target.value;
}
“`

inputで入力された値を取ってくるgetInputValue関数を作ります。
getInputValue関数の返り値はstringで返ってくる想定です。

### inputで入力された数値を100万単位にする関数
“`ts
const changeToMillion = ():number => {
const normalValue = getInputValue();
const millio

MIDIキーボードでFF14

実行ファイルは概要欄にて

“`js
var key = {

//白鍵キー設定
C3:’1′,D3:’2′,E3:’3′,F3:’4′,G3:’5′,A3:’6′,B3:’7′,
C4:’8′,D4:’9′,E4:’0′,F4:’-‘,G4:’=’,A4:’Backspace’,B4:’Delete’,C5:’Escape’,
//黒鍵キー設定
‘C#3′:’Shift+1’,
‘D#3′:’

javascriptでの正規表現を用いて文字列を抽出する方法

業務でjsから文字列を抽出する作業を何度か行った為、
忘備録を残しておく。

例：
“`javascript:ex.js
var a = “抽出元の文字列”;
var b = a.match(/正規表現/);
console.log(b);//正規表現にマッチする文が出力
“`

グルーピングを用いることも可能
阿部寛のホームページから「abehiroshi」のみを抽出する場合
“`javascript:abe.js
var url = “http://abehiroshi.la.coocan.jp/”;
var i = url.match(/(abe.*?)./);
console.log(i[1]);//abehiroshi
“`

BoxにNode.jsからファイルアップロードメモ

[Box](https://www.box.com/ja-jp)のAPIを使ってファイルアップロードを試してみます。

## シンプルなサンプル

https://github.com/box/box-node-sdk

こちらのSDKを使って試してみましたが、割とシンプルに動きました。

ドキュメントを見つつasync/awaitに書き換えてます。

> https://github.com/box/box-node-sdk/blob/main/docs/files.md#upload-a-file

“`js
‘use strict’;

const BoxSDK = require(‘box-node-sdk’);
const fs = require(‘fs’);

// Initialize the SDK with your app credentials
const sdk = new BoxSDK({
clientID: ‘xxxxxxxxxxx’,
clientSecret: ‘xxxxxxxxxxxx’
});
const client = sdk.g

非同期処理　自分の為の議事録

### Promise について

非同期処理時の結果を保持するやつ!（一言で言うと）
結果は 3 つ種類ある

– 「Pending」 ：初期の状態、または処理待ち
– 「Fullfilled」 ：処理が成功して完了
– 「Rejected」：処理が失敗した

この 3 つの状態を処理していく事ができる！

### Promise の生成方法

“`js
// 脳死
let something = new Promise(function (resolve, reject) {
// something code
});

// アロー関数使用（イケイケ？）
let something = new Promise((resolve, reject) => {
// something code
});
“`

### then メソッド

処理が成功して完了した時、もしくは処理が失敗した時の状態を受け取る

– 「Fullfilled」：処理が成功して完了 (resolve)
– 「Rejected」：処理が失敗 (reject)

以下に例文を記載

“`js
con

Content-Dispositionのデコードに見るリーダブルコードとは

## Content-Dispositionのデコード例

## なにやってるのかわからんコード

“`javascript
let headerLine = axiosResponse.headers[‘Content-Disposition’] || axiosResponse.headers[‘content-disposition’];
const fnameArr = headerLine.split(‘;’);
let filename = fnameArr[fnameArr.length – 1].split(‘=’)[1].replace(‘”‘, ”).replace(‘”‘, ”);
if (filename.indexOf(utf8Name) !== -1) {
filename = decodeURI(filename.replace(utf8Name, ”));
}
return filename
“`

## リーダブルなコード

“`javascript
var filenameRegex = /filename[^;=\n]*=

React-useEffect, useLayoutEffect, useMemo, useCallback, useReducerの使い方

# 理解のポイントと前提
1. 描画サイクルの理解
Reactアプリケーションは「データの更新⇨コンポーネントの再描画⇨その他の処理」の一連のサイクルを繰り返す
2. 「その他の処理」の実装方法
useEffect, useLayoutEffect, useMemo, useCallback, useReducerを使う
3. 描画関数の実態は関数である
3. 「依存配列」という仕組みを使うことで、「その他の処理」の実行タイミングを細かく定義できる
3. return文を書くことで、描画コンポーネントがアンマウントされた時の処理を定義できる(useEffect, useLayouEffect)
3. useEffectとuseLayoutEffectは仲間
3. useMemoとuseCallbackは仲間

## useEffect関数
Reactコンポーネントの描画が完了した**後に**実行される関数
“`react
export default function App() {
const [val1, setVal1] = useState(“”);
const [val

mouseenter, mouseover, mouseleave, mouseoutイベント、どれが発生するのか理解する

mouseenter, mouseover, mouseleave, mouseoutイベントについて、マウスポインターが要素のボックスを出入りする際にどれがどの順番で発生するのか、仕様をすぐ忘れてしまうので、自分がわかりやすいようにサンプルを作ってCodePenと記事に残すことにしました。

デモ： https://codepen.io/kaz_hashimoto/pen/qBpxMVo

ボックスは外側からid=”outer”, “inner”, “bottom”を振ってあり、それぞれの要素に対して`addEventListener()`を呼び、上記４つのイベントを待ち受けます。

“`html:html

Hello

“`

## 外側から内側へ入る時
マウスポインターがボックスの外側から内側へ入る時に受信するイベントの様子。イベント名を色分けして見やすくしました。区切り記号「—–」までが、１回のアクションに対して受信する一

MQTTブローカーの shiftr.io で HTTPリクエスト（内向き/外向き）を組み合わせる【2022年4月版】

MQTT を利用する際の仲介役となる MQTTブローカーを準備する際、外部サービスやライブラリ等を利用して準備するなどしますが、クラウド・デスクトップの両方で使える MQTTブローカーで shiftr.io というサービスがあります。
この shiftr.io は、MQTT だけでなく HTTP のインタフェースを持っており、HTTPリクエストと MQTT の Pub/Sub との間をつなぐ役割を担うこともできます。

その shiftr.io の HTTPインタフェースについては、過去に一部を試したことがあり、手順を以下の記事に書いていました。

●【NoCode 2020】 MQTTブローカーの shiftr.io と IFTTT の Webhook をつなぐ（shiftr.io の HTTP Interface） – Qiita
　https://qiita.com/youtoy/items/c690e2f1aa064e6dd289

しかし、その時に試せてなかった機能もあったり、試したものの記事にしてなかった部分もあったため、あらためて今回の記事で情報をまとめてみようと思います

WASMのパフォーマンス最適化の勘所と使い所考察

## TL;DR

– JavaScriptとWebAssemblyの間の値渡しには気を使おう（なるべく値のコピーを避けよう）。
– JSはとても高速で、単純なループではWASM並の速度が出るので、WASMの使い所はよくよく考えるべき。

## はじめに

1000^2級の画像の全ピクセルをループして、（簡単に言うと）RGBA値の最も大きい値を抽出する、という処理をブラウザ上で突然したくなりました。ピクセル数が1,000,000だと、RGBAなので配列長は4,000,000となります。ブラウザで扱いたくないサイズ感です。

ここで、①WASMで高速化、ダメなら②サーバーサイドで計算させる…という算段をして、とりあえずWASMを試してみました。色々チューニングした結果、ブラウザ上で現実的な速度が出ることがわかりました（数十msの世界）。

### RGBA値の計算について

本記事では深く説明しませんが、今回やりたい処理は「下記式により求まる実数値の最大値を探す」というものです。

“`
value = -10000 + ((R * 256 * 256 + G * 256 + B) *

【Stimulus】Stimulusをクリックした要素を取得する方法

# はじめに

Rails7 でデフォルトでインストールされるようになった Stimulus でクリックした要素を取得する方法を忘備録として残しておきます。

## 環境

Rails 7.0.2
Ruby 3.1.1
Stimulus-rails 1.0.4

# 取得方法

ボタンが４つあり特定のボタンをクリックした時だけ、アクションを発動させる時、通常なら`data-target`を利用することで javascript 側で要素を取得できます。
ですが、それが使えないときは`Stimulus`のメソッドの引数を利用することで取得できます。

## html

“`html: button.html

Deno について学んでみた

# 「Node.js について後悔している10の事」
Node.js の作者 Ryan Dahl が Node.js の現状について、
今の視点からみて後悔している事を発表
本人はバグに見えると言っている。
それを克服する Deno プロジェクトを提案
> 2018/06/06
> https://www.youtube.com/watch?v=M3BM9TB-8yA

# 後悔
– Promisesにこだわらなかったこと
– セキュリティーについて
– ビルドシステムについて
– package.json
– node_modules
– モジュール解決時の拡張子省略
– index.js

## Promisesにこだわらなかったこと
– 2009年に追加しながらも2010年2月に削除してしまった

## セキュリティーについて
– V8のセキュリティサンドボックス機能を有効活用できていないこと。
– Nodeプログラムを実行すると、あらゆる種類のシステムコールにアクセスできてしまう。
– ディスクのアクセスを許可した場合に悪用される可能性がある。

## ビルドシステムについて

【解決方法】iOS Safari で JavaScript からCSS変数を取得できない

:::note warn
2022年4月12日追記
iOS のバージョンを最新版の `15.4.1` にアップデートしたところ iPad （第9世代）以外は取得できました。
iPad （第9世代）は古いから取得できないんでしょうかね…
CSS変数の定義はメディアクエリ内で行わないほうがよさそうです。

* 取得できた:smile:
* iPhone XR 15.4.1
* Safari
* iPhone X 15.4.1
* Safari
* iPad Pro （9.7インチ） 15.4.1
* Safari
* 取得できない:confounded:
* iPad （第9世代） 15.3.1
* Safari
:::

## 現象

JavaScript から算出されたCSS変数を取得しようとすると iOS Safari だけ取得できない…:weary:

* 取得できた:smile:
* Windows
* Firefox 99.0
* Google Chrome 100.0.4896.75
* Micros