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

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変数を取得できない

## 現象

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

* 取得できた:smile:
* Windows
* Firefox 99.0
* Google Chrome 100.0.4896.75
* Microsoft Edge 100.0.1185.36
* Android 12 Pixcel 3
* Google Chrome 96.0.4664.104
* Android 11 OPPO CPH2309
* Google Chrome 100.0.4896.58
* 取得できない:confounded:
* iPhone XR 15.2.1
* Safari
* iPhone X 15.2.1
* Safari
* iPad Pro （9.7インチ） 15.2.1
* Safari
* iPad （第9世代） 15.3.1
* Safari

## 原因

スマホ時だけ変数を利用したかったため、メデ

Google App Scriptでセルの背景色が連続する時の開始セル、終了セルを取得するってみんなに言ってたっけ？

# 経緯
サウザンドサニー号の船員の出勤シフト管理をするときにスプレッドシート上のクルーのセルがどこからどのセルまでなのかを知りたいので作りました。
目視で確認すれば、５列目から１４列目と言うことは分かるのですが、コード内でベタ打ちする箇所をなるべく減らすために関数にしてみました。


この関数を使用することで期待する戻り値は５列目、１４列目という数値になります。

“`javascript:Google App Script

function colorEndClmJudge(cellBgColor, shName){
// 最終的にリターンする時に使用するオブジェクト
let answer = {
startClm : 0,
endClm : 0
};
//

AWSでWebサイトを作ってみた(3) フロントエンド・キーワード抽出編

[前回の記事はこちら](https://qiita.com/alksoho/items/fc2740bf7f581d5bb0f1)

完成したWebサイトは[こちら](http://aws-portfolio-infra.com/)

今回は前回作成したサーバーにWordPressを導入することとキーワード抽出の実装を行います。

# 目次
* [概要](#概要)
* [利用しているサービス](#利用しているサービス)
* [WordPress導入](#WordPress導入)
* [キーワード抽出](#キーワード抽出)
* [プラグイン](#プラグイン)
* [API](#API)
* [コード](#コード)
* [終わりに](#終わりに)
* [参考文献](#参考文献)

# 概要

今回は前回作成したサーバーにWordPressを導入することとキーワード抽出の実装を行います。

## 利用しているサービス

### Webサイト

[WordPress](https://wordpress.com/ja/)

### キーワード抽出

* API

【６日目】メモ帳アプリの作成 [３]

# １．本日の課題
本日も前回から作成しているメモアプリに機能を付け加える。前回では、localStrageの中に複数のメモ内容を保存できるようにした。
次は保存した日付と削除ボタンを付け加える。
まずは連想配列を使ってメモ内容と日付を結びつける。

See the Pen
Memo2 by mizmizsan2 (

【Deno1.23～】`deno run`コマンドは型チェックしなくなる予定なので注意

2022年6月リリースのDeno1.23で、`deno run`コマンドの挙動の「実行」の部分と「型チェック」の部分が切り分けられ、別のコマンドになります。


更に、型チェックのデフォルトの挙動が「リモートファイルも含め型チェック」から「ローカルファイルのみ型チェック」に変わります。

これに合わせて関連するコマンドの挙動もいくつか変更されます。

なお、これらの変更はTypeScriptを使っている場合のみ影響します。JavaScriptの実行には関係ありません。

## 変更後の`deno run`コマンドの挙動と、各オプションについて

具体的に各コマンドの挙動がどのように変更されるかというと、

– `deno run`コマンドは型チェックしなくなる（従来の`–no-check=remote`がデフォルトに）
– `deno run`

jqueryでタグの絞り込みを実装する

# 実装したもの

See the Pen
siborikomi by yoshida (@yoshi090)
on CodePen.

【コンポーネント】コンテンツを開閉させるもっと見るボタン

長いコンテンツを省略して表示し、ボタンを押すとすべて表示させるアノUI。

スマホでは省略表示、それ以外は全表示という実装が多いのですが、これが毎回地味に大変…:sweat:

というわけで、汎用的に利用できるコンポーネントを作成しました。

## 仕様

* 表示・非表示
* `` のチェックの有無で管理
* 省略時のコンテンツの高さ
* CSS変数（Custom Properties）で管理
* スライドアニメーション
* CSS の `transition` で `max-height` をアニメーション
* `max-height` の値は JavaScript で高さを取得、CSS変数に設定

## HTML

:::note info
親要素の `div` に設定している `class=”js-showMore”` は JavaScript のトリガーです。
アニメーションさせない場合は不要です。
:::

“`html:html

[自分用メモ] select2のoptions（選択肢）にclassとhtmlを引き継ぐ

select2の選択肢表示に元のoptionタグのcalssとinnerHTMLを引き継ぎたい話
忘れてまた探し回りそうなので自分用コピペメモ

### 注意点
この方法だと、ただの``でも中にタグがないと
`$(data.element.innerHTML)`のところでjQueryが停止するので、``要素で囲む
jsを工夫すればいいのでしょうけど、見づらくなりそうなので一旦これでＯＫとする
### コード
“`select.html
ただの選択肢 怪我
“`
“`select2_init.js
$selectEl = $(‘#select’).select2({
templateResult: (data, container) => { /

【Google MAP】地図移動後の緯度経度の再取得方法

# はじめに

– 以前、Googleスプレッドシートにある場所リストを利用して、GoogleMAPにマーカー表示＋場所リスト表示をしました。

https://qiita.com/yoshi_yast/items/44ef9da9bc136e455950

– MAPの横にあるサイドバーの場所リストについて、**地図を移動した際に、移動後に表示される地図におけるリストに更新**したいと思いました。言い換えると、複数の場所情報がある場合、GoogleMapの表示範囲のみの地点にて、マーカー＆リストを表示する、ということになります。

# 用意したいサンプルデータ(Googleスプレッドシート)
– Googleスプレッドシートから場所リストを読み込みする方法は、上記リンクを参照。

# サンプルプログラム
– 初期に表示される場所は6カ所。ドラックや

ES6のJavaScriptを知らないフロントエンドエンジニアは早急に学ぶべし! 配列の便利メソッドを7つご紹介します!

2021年9月にSIerからWebサービス企業に転職をして、これまであまり触れてこなかったフロントエンド開発をするようになりました。（前職では主にバックエンドだったので）

しかも、モダンなTypeScriptを使っているということでキャッチアップしなければいけなかったんですが、何がTypeScriptの機能で何がJavaScriptの機能なのか、あまり理解できなかったんですよね・・

TypeScriptは結局JavaScriptがベースの言語なので、まずはJavaScriptが理解できていないことには始まらないと思い、JavaScriptから勉強を始めることにしました。

前職では少しだけJavaScriptを触ったことがありましたが、ES6というモダンなJavaScriptは触ったことがなく、これからはES6以降を理解していないとダメだなと感じたので、ES6の勉強をするに至りました。

フロントエンドエンジニアを志望している方、現在フロントエンドエンジニアだがES6を理解していない方は是非一読下さい！！

## 記事はこちらに移管しました
https://toranokoeng

【jQuery】submit()を使ったのにフォームのPOSTが出来ない

## まえがき
フォームで送信用のボタンのクリックイベントを用いた際に発火は確認できているのに送信が出来ず詰まっていた。

## コード(送信できないパターン)
＊送信ボタン
“`

“`

＊送信処理
“`
var clickCount = 0;
$(‘#submitForm’).click(function() {
clickCount++;
if (clickCount === 1) {
$(this).closest(‘form’).submit();
return false;
} else {
setTimeout(function() {
clickCount = 0;
}, 2000);

ビジュアルリグレッションテストのすすめ

日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない（と思っていた）ページで表示が崩れてしまったことってありませんか？

私はたびたび経験があります。

毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。
自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。

どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。

# ビジュアルリグレッションテストとは
ざっくりいうと「見た目の比較」をするテストのことです。
変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。

# どうやって使

【MPA】LarvelにVueコンポーネントを導入する方法とVueコンポーネントが大量にある時のコツ?

以前SPAとしてVueをフロントエンド、Laravelをバックエンドとして利用することは多々あったが、MPAでLaravelのBlade表示のためにVueコンポーネントを利用するという経験がなかったので、その時のことをまとめる。
## 環境
MacOS Catalina
Vue 2.6
Laravel 8.0

## SPAとMPAのイメージ
これまでやってきたSPA

初回のHTTPリクエストで返ってきたHTMLに対してコンテンツの切り替えのみを行うため、ページ遷移を行わずより高速な画面更新が可能になる。
完全にフロントエンドとバックエンドをVueとLaravelで分けて、Vueでaxiosを利用してLaravelのAPIを叩く形で利用。
LaravelはAPIとしての責任を持たせ、それ以外はVue側に責任を持たせるような実装である。

今回挑戦