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

OpenProcessing上で各種Input Controller系の位置がずれる問題のワークアラウンド

# 解決したい問題点
2021/10/09現在、[OpenProcessing](https://openprocessing.org/)上でInput系のコントローラー(`createSlider()`とか`createButton()`)を使うと盛大に位置がずれます。
例えば、`createSlider()`の[リファレンスコード](https://p5js.org/reference/#/p5/createSlider)をみると
と表示されるものが、OpenProcessing上では下記のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/05dccc89-4b1a-0732-fef8-522425fa094c.

kintoneカスタマイズで特定のフィールドを非活性化する

“`javascript
event.record.フィールドコード.disabled = true;
“`

kintone フィールド 非活性化で検索したら一発でひっかからなくて悔しかったです。（所感）

参考記事
[kintoneで実施する入力制限、フィールドの無効化とその活用][名前]
[名前]:https://www.gotop.co.jp/kintonesi20210805/
[フィールドの入力不可をラジオボタンとチェックボックスで完全制御！](https://developer.cybozu.io/hc/ja/articles/200306919)
こちらはタイトル無しのリンクになります。

【JavaScript】変数と参照の振り返り②

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/7ffcb3459da7df896b8e

#目的

* 変数についての理解を深める

#本題
###1.暗黙的な型変換

暗黙的な型変換とは**変数が呼ばれた状況によって変数の型が自動的に変換されること**です。

例：”1″ => 1（文字列から数値に変換）

javascriptはJavaのようにデータ型の宣言をしない。
→動的型付け言語

上記をVSコードで確認していく

““javascript
// データ型を調べる関数を用意
function printTypeAndValue(val){
// typeofメソッド（？）を入れるとデータ型がわかる
console.log(typeof val, val)
}

// 変数を定義
let a = 0;
// numb

JavaScript の超便利なメソッド bind で this を制御するの補足

https://foreignkey.toyao.net/archives/763

https://ja.stackoverflow.com/questions/29360/javascript%E3%81%AE%E3%82%B3%E3%83%B3%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%82%BF%E5%86%85%E3%81%AEjquery%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9%E3%81%8B%E3%82%89%E3%83%A1%E3%83%B3%E3%83%90%E3%82%92%E5%8F%82%E7%85%A7%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B

上のサイトの補足。
###結論は、クラス構文ではイベントメソッドはアロー関数を使え。

“`js:クラス構文でのthisのbind

【HTML】戻るボタンの実装方法

#はじめに
戻るボタンを実装する機会はかなり多いと思うのですが、そのときのための備忘録として残しておきます。

#戻るボタンの実装

##aタグでの実装

“`html:HTML
戻る
“`

##buttonタグでの実装

“`html:HTML
戻る
“`
`type=”button”`をちゃんと記述しないと、デフォルトで`type=submit`となってしまうので要注意！！

##formタグでの実装

“`html:HTML

“`

#おわりに
すべてHTML内の実装したい箇所に記述すれば良いので簡単ですね。

array.find()の便利技その1

棚に以下が置いてあります。

“`ts
const stack = [
{name:”たまねぎ”, date:true},
{name:”葡萄”, date:false},
{name:”たまねぎ”, date:false},
{name:”林檎”, date:false},
];
“`
今日はカレーを作りたいので「たまねぎ」が欲しいです。
以下のように欲しい食材を定義しました。

“`ts
const target = {name:”たまねぎ”};
“`

では、findを用いて「たまねぎ」を棚から取りましょう。注意点としてdate（消費期限）が切れる前の「たまねぎ」だけを棚から取りましょう。
※trueは賞味期限が切れていません。

# 答え

“`ts
const TAMANEGI = stack.find((food)=>{
if(!food.date){
return false
}
return food.name === target.name;
})
“`

# さらにレベルアップ
条件に合う「たまねぎ」がな

JavaScriptと黒魔術で演算子オーバーロードを実装してみた

# 序論
## 演算子オーバーロードとは
　まず、オブジェクト指向の三大要素の一つに多態性というものがある。演算子に独自の動作をさせるのが演算子オーバーロードだ。
　例えば、2つの配列から内積を求める処理を書くとしよう。

“`js
const a = [1, 2, 3],
b = [4, 5, 6];
console.log(a * b); // 内積の32を出力できればいいなぁ～
“`
　このように、演算子の動作を通常の挙動から変えることを、演算子オーバーロードと言う。計算式が見やすく表現できるメリットがある。
　C++言語にはこれを簡単に実装できる機能がある。しかし、JavaScriptには存在しない。それをどうにかしてJavaScriptで表現できるようにするのが本稿の目的である。
　確かに、演算子に拘らず、専用の関数を作ってしまえばそれまでだ。しかし、我々はロマンと言うものを忘れてはならない。

## 先行研究の紹介
　私が本稿を執筆するに至って、参考にしたものがある。こちらの記事の最後にあるコードを解説する。

https://alucky0707.hate

【Multiple Select】特定のトリガーでプルダウンをリセットする方法

# やりたいこと

あるボタンのクリックイベントで、Multiple Selectの選択状況をリセットしたい。

Multiple Selectとは、チェックボックスで複数選択できるプルダウンなどを作れるjQueryプラグイン。

公式は[こちら](https://multiple-select.wenzhixin.net.cn/en/)

# Multiple Selectの特徴

Multiple Selectは通常のselect要素で作るプルダウンとは少し異なるため、valueの取得の仕方などの勝手が変わってきます。

そのかわり、Multiple Selectの公式で用意されているさまざまなオプションやメソッドを使うことができます。

今回は「プルダウンのリセット」が目的なので、uncheckAllメソッドを使用していきます。uncheckAllは「すべてのチェックを外す」メソッドになります。

# uncheckAllでリセット

“`html
リセット

元記事を表示

react-burger-menu is 何

# はじめに

`react-burger-menu` は簡単にバーガーメニューを作成できるReactのライブラリらしいです。
Next.jsの開発でバーガーメニュー作りたいなと思って調べたら出てきて使って見たらよかったので紹介します。

## 使い方
一応公式のREADME置いときます。
https://github.com/negomi/react-burger-menu

## 1. インストール(Installation)
以下のコマンドでインストールを行う

“`
npm install react-burger-menu –save

or

yarn add react-burger-menu
“`
TypeScriptを使っている方は以下のコマンドでインストール

“`
npm install @types/react-burger-menu –save

or

yarn add @types/react-burger-menu
“`

## 2. 利用方法(Usage)
### アニメーション(animation)について
`react-burger-

元記事を表示

Material UI v5 と Emotion の環境構築

以前 `Material UI` と `Emotion` を使った環境構築について記事を書いたのですが、Material UI が **v4 から v5** にアップデートされたので、今回は以前の記事のリライトになります。

## 前提

[【React】Material-UI v4 と Emotion を併用するときの環境構築](https://qiita.com/yuki-endo/items/387194d29a44a3340bb9)の記事のリライトになります。
記事執筆時点で Material UI のバージョンは v5 なります。
npm ではなく yarn を使っています。

## React の環境構築

まずは `create-react-app` の typescript テンプレートを利用してプロジェクトを作成します。今回はプロジェクト名を myapp にします。

“`shell
$ npx create-react-app myapp –template typescript
“`

## Material UI v5 と Emotion のインストール

元記事を表示

【JavaScript】変数と参照の振り返り①

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/3ed1b5a2e6f08aaed5e0

#目的

* 変数についての理解を深める

#本題
###1.let, var, constの違い

| | version | 再宣言 | 再代入 | スコープ | 初期化 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| let | ES6~ | ✗ | ◎ | ブロック | ✗ |
| var | | ◎ | ◎ | ブロック |undifined|
| const | ES6~ | ✗ | ✗ | 関数 | ✗ |

再宣言：もう一度変数として宣言する
再代入：一度設定した値を変更できるか
スコープ：varだけ関数スコープが生成
初期化：ホスティングのこと(varはundified

元記事を表示

何でもかんでも非同期通信に頼るのは良くない？

#非同期通信とは？
ネットワークなどでつながれているコンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式・・・だそうです。

つまりどういうこと？
あるタスクを実行している最中に、その処理を止めることなく別のタスクを実行できる通信方式、と言えそうです。
イメージとしてはこうなります。

#非同期通信の利点
そもそも何がいいのでしょうか？
よく聞くのは、非同期はwebページの一部のみを更新するための機能として使われているということです。
ページ全体を読み込みしなくて良いので早い。これがメリットだと紹介されています。

* サーバーのトラフィックを減らし、スピードを上げる
* レイジーローディング
* 帯域使用量の削減
* フォームの検証

など

元記事を表示

AngularアプリでBootStrapを使ってみる

# BootStrapとは
BootStrapはCSSのフレームワークです。BootStrapを使うとデザイナーでなくても簡単にそれっぽい見た目の画面を作成することができます。
また、Sassが採用されているため変数を使う・CSSクラスを継承して新しいCSSクラスを作るなど、プログラミング言語っぽくCSSを記載することができます。
Angularを使用していない場合でももちろんBootStrapは使えますが、jQuery等の関連ライブラリを読み込む必要があります。
また、Sassは直接ブラウザで読み込むことができないためCSSファイルにコンパイルする必要があります。
Angularを使っている場合はそれらの面倒をすべてAngularが補ってくれるため、比較的簡単にBootStrapの恩恵を受けることができるみたいです。
見た目には特にこだわりはないけどそれなりに見やすい画面を作成したいといった場合に使えそうですね。
# bootstrap(ng-bootstrap)を使ってみる
こちらを参考にしました。
[bootstrapの変数の書き換え方](https://qiita.com/pi

元記事を表示

JavaScript入門(オブジェクト②)

# 概要
…[JavaScript入門(オブジェクト①)](https://qiita.com/andota05/items/86f359455eb4a233031a)の続きです。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**

元記事を表示

Nuxt/FirebaseのGoogleログイン時に毎回アカウント選択を表示する

生きてます。

Webアプリケーションにつきもののユーザ管理ですが、APIベースのアプリだと非常に面倒です。出来るだけ個人情報は自前で持ちたくないですし、大体のケースにおいてここに労力をかけることが本題ではないと思います。今回は自主的に夜な夜な開発していたNuxt.js製社内用Webアプリケーションで、尚更そこに手間をかけたくなかったので、Firebaseを使ってちゃちゃっと済ませます。

といっても今回は表題の件がメインなので、それまでの過程についてはかなり端折ります。一応Nuxtは使って入るものの、主題に関しては特に関係なく流用出来るんじゃないかと思います。

# 導入

“`sh
npm install firebase@8.10.0
npm install @nuxtjs/firebase
“`

パッケージマネージャで入れます。
留意点としては`firebase` のメジャーバージョンが上がったことに伴い、最新版の9.xに`@nuxtjs/firebase`が2021/10/08現在では対応していないようで、`npm install firebase`で最新版を入れてると

元記事を表示

javascriptで多次元配列の重複を削除

１・名前の重複を削除したい
２・名前が重複していた場合、moneyが2000のデータだけ欲しい

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
var arr = [
{id:1,name:”花子”,money:5000},
{id:2,name:”江藤”,money:4000},
{id:3,name:”山田”,money:3000},
{id:4,name:”山田”,money:2000},
{id:5,name:”山田”,money:8888},
{id:6,name:”山田”,money:9999},
{id:7,name:”松井”,money:2000},
{id:8,name:”松井”,money:2093},
{id:9,name:”松井”,money:2090},
{id:10,name:”大川”,money:1000}
];
var check = [];
arr.forEach(f

元記事を表示

terraformで構成管理しつつaws lambdaをデプロイする

DMMデータインフラ部に所属している[yuua](https://qiita.com/yuua0216)です
terraformで作成しlambdaをデプロイする際にterraformにlambda関数を含めるとchangeがでたり、扱いづらく
悩むときがあるのでその際の手順的な備忘録です

今回のlambdaはlambda containerではありません

## 初回の手順

1.terraformで基本的なlambdaの事前の情報を作成する(配置先など)
2.lambda関数をzip化しs3バケットに配置する

## 継続的なデプロイの手順

基本的にgithub actionsなどのCI/CDを使います

1.github actionsでlambda function / lambda layerをバケットに配置
2.github actionsでupdate functionの実行

## 下準備

lambdaを配置するようのs3 keyなどをterraformで作成します

“`s3.tf
// bucket作成
resource “aws_s3_bucket” “l

元記事を表示

【Vue.js】scrollToが効かない時、代わりに使えるscrollIntoView

#はじめに
##実現したいこと
あるボタンを押すと、画面一番上に移動するような動作（画面遷移はしない）

##やり方を探ってみる
「Vue.js トップに戻るボタン」とかで検索すると、ほとんどが?のような`window.scrollTo`を使ったようなやり方でした。

“`vue

“`

https://yuyauver98.me/vue-scrolltop/

https://qiita.com/TK-C/items/42b25ff4ec56528ad870

https://webty.jp/staffblog/producti

元記事を表示

JSでresizeイベントを使うときの注意点

Webページでウィンドウサイズが変化したときに何か処理をさせるのに便利な

“`JavaScript
window.addEventListener(“resize”, function() {});
“`
ですが、

このまま素の記述で実装してしまうと、スマホのブラウザで表示したときに**URLのバーが伸び縮みする動作もウィンドウサイズが変更されたと判定されてしまう**ので、単にスクロールしただけでイベントが発火してしまいます。
（例：ウィンドウサイズが変更されたときにページをリロードするように記述していた場合、スクロールしてURLバーのサイズが変わるたびにリロードされてしまう。）

これはPCブラウザのレスポンシブモードでは**確認できない現象**なので注意が必要です。

「ウィンドウサイズの変化」とは少し性質が違いますが、
例えばスマホ画面の縦・横の向きが変化したときに処理を発火したい場合などは、

“`JavaScript
window.addEventListener(“orientationchange”, function() {});
“`

を使う方

元記事を表示

React:Bootstrap Tabタイトルを子コンポーネントから変更

ReactでBootstrapのTabsを使っていて、keyのあるオブジェクトから作ったTabのタイトルを子コンポーネントからkeyを指定して変更した。メモを2点ほど。

“`react:ComponentParent
export default function ComponentParent(props) {
const [tabTitles, setTabTitles] = useState(null)
const [currentKey, setCurrentKey] = useState(null)

useEffect(() => {
// ここでは、例なので単純にオブジェクト直接記述
setTabTitles({ 111: “タブ1”, 222: “タブ2”, 333: “タブ3” })
setCurrentKey(111)
}, [])

useEffect(() => {
// 何か選択が変わった時の処理
},[currentKey]}

const TabSample = () => {

元記事を表示