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

kintoneでステータス変更時にカラムを更新するjavascript

kintoneで特定のステータスになった際にカラムを自動更新したいと思ったので実装してみました。
例として、「決裁済み」ステータスになった際に「決裁日」を自動登録するという内容で作成してみます。

# 手順
1. kintoneでAPIトークンを取得
1. moment.jsを取得(今日の日付を扱うのに必要)
1. 自動更新javascriptファイルを作成
1. 作成したjavascriptファイルとmoment.jsをkintoneアプリに設置する
1. kintoneアプリを更新

# kintoneでAPIトークンを取得
kintoneアプリ設定画面にて「設定」タブを開き、「APIトークン」をクリックします。


APIトークンを生成して、「レコード閲覧」と「レコード編集」の権限にチェッ

焼きなまし法(SA)で解くOneMax問題をJavaScriptで書いてみた

※個人の練習用です。アルゴリズムの正確性は担保しません。

## 焼きなまし法(SA)とは

焼きなまし法（Simulated Annealing, SA）とは、大域的最適化問題への汎用の乱択アルゴリズムである。
詳細は割愛する。

## JSで書いてみた

SAは探索アルゴリズムの中でも結構シンプルなものなので、
JSでも簡単にかける。

“` JavaScript
let width = 100;
let num = 2;
let maxCount = 100;
let length = Math.pow(num,width);
let start = setValue(num, width);

function getRandom(max){
return Math.floor(Math.random()*Math.floor(max));
}

function setValue(num, width){
let result = []
for(i=0; i< width; i++){ result.push(getRandom(n

タブーサーチ(TS)で解くOneMax問題をJavaScriptで書いてみた

※個人の練習用です。アルゴリズムの正確性は担保しません。
ここでいうTSは、タブーサーチ(Tabu Search)のことです。

## タブーサーチ(TS)とは

メタヒューリスティックの探索アルゴリズムの一つである。
TSに関する説明は[Wiki](https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%96%E3%83%BC%E3%82%B5%E3%83%BC%E3%83%81)または[こちらのレビュー論文](http://www.co.mi.i.nagoya-u.ac.jp/~yagiura/papers/tabu-kaisetsu-2008.pdf)に割愛する。

## JSで書いてみた

TSは探索アルゴリズムの中でも割とシンプルなものなので、
JSでも簡単に書ける。

“` javascript
// タブーリストの長さを設定
const TABU_LIST_MAX_LENGTH = 7;
// One-Max 問題の長さを設定
const ARRAY_WIDTH = 100; //e.g. 4 = [0, 0, 0, 0]
// On

plunkerでMandelbrot その3

#概要

plunkerでMandelbrotやってみた。

#写真


#サンプルコード

“`
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);

var cx,
cy;

function mandelbrot(x1, y1, x2, y2) {
var i,
j;
var iter;
var color;
var sy = y2 – y1;
var sx = x2 – x1;
for (i = 0; i < 500; i++) { for (j = 0; j < 500; j++) { var cy = j * sy / 5

plunkerでMandelbrot その2

#概要

plunkerでMandelbrotやってみた。

#写真


#サンプルコード

“`
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
var KS = 500;
var RST = -3.1;
var RED = 0.9;
var IST = -1.85;
var IED = 1.85;
var DR = (RED – RST) / KS;
var DI = (IED – IST) / KS;

function map(n, v, omin, omax) {
return n / (omax – omin) * v + v / 2;
};

for (CR = RST; CR <= RED; CR = CR + DR) { for (CI

plunkerでMandelbrot

#概要

plunkerでMandelbrotやってみた。

#写真


#サンプルコード

“`
let pixelSize = 1;
let width = 500;
let height = 500;
let maxIterations = 100;
let mandelMin = -2.5;
let mandelMax = 2.5;
let infinity = 2;
let brightness;

function draw() {
let ctx = document.getElementById(‘canvas’).getContext(‘2d’);
for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++)

【JavaScript】モダンJavascript基礎まとめ

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

##モダンJavaScript基礎まとめ

###変数宣言

“`.js:変数宣言

// 以前はvarが使用されていた
var val1 = “val1宣言”;
console.log(val1);
// “val1宣言”

// var変数は上書き可能
val1 = “val1上書き”;
console.log(val1);
// “val1上書き”

// var変数は再宣言可能
var val1 = “val1再宣言”;
console.log(val1);
// “val1再宣言”

// var変数は意図しない上書きや再宣言が発生する可能性があるため、以下を使用するようになった

// let変数
let val2 = “val2宣言”;
console.log(val2);
// “va

【JavaScript】データの型と少し向き合ってみる

# JavaScriptのデータ型
「JavaScriptやPHPやRubyって型がない言語でしょ？」と認識されがちですが、これは誤り。
JavaScriptは『**動的型付け言語**』といって、プログラム実行時の値によって関数の引数や返り値の型が動的に変化するような言語なんですね。
よって、「型はあるけどそれをあまり意識することがない言語」というのが正しいかも。
一方でTypeScriptなどのように、プログラム実行前に関数の引数や返り値の型が予め決まっているのが『**静的型付け言語**』。

試しにそれぞれの言語で、`year`という変数に数値型の`2022`と文字列型の`2022`を代入してみる。

“`javascript
/* JavaScript */
let year = 2022;
year = ‘2022’;

/* TypeScript */
let year: number = 2022;
year = ‘2022’; // Type ‘string’ is not assignable to type ‘number’.
“`
JavaScriptは数値型で

最近puppeteerを使ったテストコードを書いたのでアウトプットしてみる

#初めに
皆さんこんにちは。
最近フロントのテストコードを書く経験をさせてもらっているので、アウトプットしたいと思います。
主にコードの書き方など具体的な内容になりますので、puppeteererの人は是非参考にしてみてください。
（読み方が未だにわからない・・・　パペッティア？パペティア？？）

#puppeteerとは
まずはpuppeteerとはなにかです。
公式には下記のように書かれています。

>
Puppeteerは、DevToolsプロトコル上でChromeやChromiumを制御するための高水準APIを提供するNodeライブラリです。Puppeteerはデフォルトではヘッドレスで動作しますが、完全な（ヘッドレスでない）ChromeやChromiumを動作させるように設定することができます。

要するに、Chromeブラウザ上でテキストいれたりボタン押したりできるよ〜〜ってことですね。
具体的に何ができるのか？

###何ができるのか

>
ブラウザで手動でできることのほとんどは、Puppeteerを使って行うことができます!
ここでは、いくつかの例をご紹介します。

>

REST API（Node.jsのExpressで実装）のエラーハンドリングを共通化してみる

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/neeb0b7f17627

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

## 補足
ソースコード全体は以下を参照。

https://github.com/yuta-katayama-23/node-express/tree/3123743c8c53f4b8420f19de3c5223c331e425c8

【JavaScript】reduce()の使い方

データの合計を求めるのにreduce()を使用したので使い方をメモしておく。

# reduce()の使い方
reduce()は、配列に含まれる要素を順番に取り出していき、コールバック関数を呼び出すようになっている。
配列の要素の合計を求める時などに使用される。reduce()の基本的な書き方は以下となる。

“`javascript
<対象の配列名>.reduce(<コールバック関数>,<初期値>)
“`
ここで、初期値に関しては省略可能である。また、コールバックは順番に以下の4つの引数を取る。
■ １つ前のコールバック関数の結果の値。最初は、初期値か対象配列array[0]の要素。
■ 現在の要素。最初は、初期値が指定されている場合は対象配列array[0]の要素、指定なしの場合は対象配列array[1]の要素。
■ 現在の要素のインデックス。最初は、初期値が指定されている場合は0、指定なしの場合は1。
■ 対象となっている配列

# サンプル
配列の合計を求めるサンプルを書いてみた。

“`javascript
const array = [1,2,3,4,5];

con

JavaScriptでTOPSICする時用のノート

社内で2回目のTOPSICをやるので復習がてらJavaScriptのノートを残しておきます。
前回は70点だったので100点取りたい。

### JavaScriptを選んだ理由

一番自信がある言語を選びました。
「腕試しがてら○○で挑戦してダメだった！笑」みたいな声を周りで聞きました。
TOPSIC導入の意図はアルゴリズム力の測定だと思うので、素直に得意言語にしましょう。

それ以外では、1行コードを確認するにはChromeの開発者ツールが使えるので楽！

### JavaScriptを選ぶ際の注意点

TOPSICのNode.jsの環境がv12系(2019年リリース)で若干古いです。
古いことにより、以下の問題が考えられます。

– 搭載しているv8エンジンが古いため実行速度が遅い
– ECMAScriptの新しめの言語仕様が使えないことがある

TOPSICはコード実行制限があり、これをオーバーすると正解でもNGになります。
Node.jsのエンジン、v8の実行速度は改善されていますが、[JavaやGoと比べると不利です](http://www.hykn.org/hnb/201

ダークモード対応のsvg(favicon)を簡単に作れる「Hybrid SVG Maker」を作りました（技術編）【結局JS】

## きっかけ

先日、IEがお亡くなりになるのを期にし、ダークモード対応のSVGを作ろうと思い、[ライダーロゴメーカー](https://pexr.net/fonts/maker.html?font=KHONGO&text=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%BC)というのを作る機会がありました。(ロゴメーカーを作りたいのではなく、faviconをやってみたいがためにロゴメーカーを作ったわけです。)

その時、ふと思ったのはこの作業はいずれ『**デザイナーとエンジニア(特にフロントエンド)との戦争になるなぁ**』と。
だた、それを見過ごすのも『ダサいなぁ』と思い[Hybrid SVG Maker](https://pexr.net/hsm/)なるものを作りました。

こんな感じの↓ツールです。

React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 02 ー selectorによるフィルタリングと集計

「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる」第2回は、`selector`を使います。複数の`atom`から参照した値に手を加えて返すのが`selector`です。他の`selector`から値を得ることもできます。派生の状態をつくる純粋な関数です。今回のでき上がりは、サンプル001のリンクでCodeSandboxに公開しました。

#### サンプル001■React + TypeScript: Recoil tutorial example 02

# 項目をフィルタリングする
まず加えるのは、Todo項目のフィルタリングです。全件/処理済み/未処理の3つの表示に切り替えられるようにします。そのために新たに定めるのが、つぎの`atom`(`todoListFilterState`)です。

#### コード001■選択したフィルタを状態としてもつ`atom`
“`react:s

どうしてMath.max()は-Infinityになるし[].every(条件式)はtrueになるの？

`Math.max()` は与えられた複数の数値のうち最大の数を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max
引数を与えないと `-Infinity` という最小の数値を返すのが意外というのが最近ちょっと話題になりました。

“`Javascript
> Math.max()
<- -Infinity ``` 配列の`every`メソッドは、配列要素のすべてで条件式が成立する場合にtrueとなります。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every これも、空の配列で呼ぶと条件式が一回も成立していないのにtrueを返すのが意外だと話題です。 ```Javascript > [].every(x => true)
<- true ``` これらは、別に「JavaScriptの奇妙な仕様」ではありません。 集合

JavaScript学習時によく出てくるワードのまとめ（メモ。随時追記）

#前書き
この投稿は筆者がJavaScript学習時に、よく出てくるがいまいちしっかりと理解できていないワードをまとめたメモです。

ついでに同じような問題にぶつかっている人の助けになったら幸いと思いアップしています。

初心者のため間違う可能性や表現が悪い場合があります。ご注意ください。
また、間違った表現などがあった際は指摘してくださると幸いです。
よろしくお願いいたします。

#よく出てくるワード
ここではプログラミング学習でよく出てくるワードについて解説していきます。
ものすごく簡易的に説明を書いています。ご了承下さい。

##オブジェクト指向
オブジェクト指向とは「もの」に注目した考え方。
どんなものでどう動くのかに注目した考え方のこと。
ものに相当するものがオブジェクト。

##オブジェクト
オブジェクト指向の概念の一つ。
全てのものや事柄のことを言います。
コンピュータ上で操作や処理の対象となる何らかの実体のことなど。
まとめると、さまざまな実態の総称のこと。

##クラス
設計図のこと。
それがどんなものなのかが書いてある。
クラスはプロパティとメソッドを持っている。

Windows 簡単Jsonフォーマット

###Windows環境でライブラリ不要・ソフト不要でJsonを成形する。
拡張子はhtmlまたは、htaで保存
そのほか一切不要です。

“`json.html







成形