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

Phaserで作った試作品を公開する環境

## 結論

PLAYCODEで公開するのがいいかな、と思いました。
https://964701.playcode.io

* サーバーを立てなくてもいいですし、SSL証明書を用意しなくてもいいので維持費がかかりません
* ファイルをアップロードしたり、ディレクトリ階層を作ったりできるので、実際に近い構成にすることができます
* 

## 発端

　流行りのWEB3にあやかりたいという願望から、Dappを開発できたらいいな、とか思うのですが、オープンソースで開発に携われるようなプロジェクトってあまり見つからないしハードルが高いと思うんですよね。
　それでもチャレンジしたいなら、自分で立ち上げるしかないってことでしょうか。
それで、個人規模で比較的簡単に作れそうなものはゲームかなと思ったわけです。
　スマコンとのインターフェースにWeb3

WebWorker + indexedDBで逆ジオコーディング

# PHPサーバなしで逆ジオコーディングしてみる
– 諸般の事情により、CORS有効化不能 or PHPサーバが用意できなかった時に作成
– もう用済みですが、せっかく作った＋WebWorkerのお勉強をしたため供養

## 概要
以前の記事、[逆ジオコーディングサーバを自作](https://qiita.com/wrwrhucjnd/items/68e8e16b3337e278ba7b)でヒュベニの式を用いて直接緯度経度から最近傍を探していましたが、今回はgeohashを使用しています。
https://github.com/davetroy/geohash-js/
(精度がイマイチ、容量削減効果も微小、パフォーマンスも実用上変わらずのため、ヒュベニの式に移行)
– あらかじめ住所とgeohashの対応表を用意して、javascriptの変数の形でファイル保存
– 初回利用時に上記ファイルを取り込み、indexedDBに格納
– WebWorkerを起動し、indexedDBへのクエリを担当
– 非同期処理がたくさんです

## コード
### 実際にウェブワーカーとして働くクラス

2次元配列を1次元配列にする方法

はじめに
—
reactのuseStateで作成した配列を使ってあれこれ機能を実装していると、配列のネストをフラットにしたい！という時がありました。
“flat()”という便利なメソッドの存在を知ったので調べて備忘録として残そうと思います。

二次元配列とは？
—
配列の中に配列が入っている、下記のような配列のことを二次元配列といいます。
~~~
[[a,b,c],[d,e,f]]
~~~

ちなみにさらに配列が中に一つ入っていると三次元配列というみたいです。
見てると頭おかしくなりそうですね。
~~~
[[[a,b,c],[d,e,f]],[[g,h,i],[j,k,l]]]
~~~

二次元や三次元配列は多次元配列とも呼ばれるそうです。
そして、目にすることが多い下記の配列が1次元配列と言います。
~~~
[a,b,c]
~~~

構文
—
~~~react
const newArray = arr.flat([depth]);
~~~

引数の”depth”に入れた数字分ネストをフラットにしてくれます。
(省略可能でデフォルト値は1)

言葉ではイメージが湧かないと思うの

JavaScriptのStringについて part2

# 初めに
前回で漏れた一部の文字列メソッドと、`JSON`も一緒にまとめてみました。

今回の参考資料です。

https://javascript.info/json

https://es6.ruanyifeng.com/?search=%E9%81%8D%E5%8E%86&x=7&y=8#docs/string

（「字符串的扩展」の1～4まで）

# Methods
## String.prototype.padStart()
目標の文字列が指定の長さに達していないとき、指定の長さまで先頭にほかの文字列を追加する。
“`jsx
// Syntax
str.padStart(targetLength[, padString])
“`
下はMDNの例です。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

“`jsx
// console.log(‘123’.padStart(5, ‘0’)); // ‘00123’

cons

kintone 自動採番レコードIDを別フィールドにコピーする


# 目的
レコードを複製した際に「複製元のレコード」と「新しくできた複数のレコード」を同じグループとして管理したい。

# 要件
1. グループIDのフィールドを用意する。
2. 複製元のレコードは自身のレコードIDのをグループIDに登録する。
3. グループIDに「複製元のID」が登録されている状態にすることで複数のレコードを紐つける。
4. グループIDフィールドは編集不可

# 実装
新規にレコードを作成した場合はグループIDに自身のレコードIDを設定する。
レコードIDは新規のレコードが保存されたタイミングで発行される。
そのためレコードが保存され詳細が表示されるタイミングで、自身のレコードIDをグループIDにコピーし更新する。
複製された場合は既にグループIDに複製元のIDが登録されているので実装は不要となる。

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 辞書順

辞書順 (paizaランク C 相当)

https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step2

JavaScriptで解いてみました。

問題文の例で、abc, aa, a, abの四つが出てきていますが、アルファベット小文字 3 文字で作れる文字列なので、aaやa,abは考える必要はありません。辞書順で最初はaaaから、最後はzzzまでを考えれば良いです。

アルファベット小文字 3 文字で作れる文字列を全パターン作成し、辞書順にソートしてから k 番目の文字列を出力します。
“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const k = Number(lines[0]);
const alphabet =”abcdefghijk

info There appears to be trouble with your network connection. Retrying…

# 事象
パッケージを再インストールしようと`yarn`コマンドを実行したら以下のエラーに遭遇した
“`
$ yarn
…
info There appears to be trouble with your network connection. Retrying…
“`

# 原因
ネットワークが遅いためタイムアウトエラーが発生している

# 解決方法
タイムアウト時間を延ばすことで対処する
“`
yarn config set network-timeout 600000
“`

# その他
以下のコマンドでも解決できる
“`
yarn install –network-timeout 600000
“`

7歳娘「パパ、数値をパーミッションに変換して？」

# ある日の我が家
娘「パパ、**数値**を**パーミッション**に変換する方法を教えて！」

ワイ「ん、どういうこと？」
ワイ「いきなりどうしたんや」

娘「えっとね」
娘「小学校でこんな宿題が出ちゃったの！」

> ### 宿題
> `0`〜`7`の数値をパーミッションの文字列に変換する関数を実装しなさい。
>
> ※以下のルールで変換すること
>
> `0` -> `”—“`
> `1` -> `”–x”`
> `2` -> `”-w-“`
> `3` -> `”-wx”`
> `4` -> `”r–“`
> `5` -> `”r-x”`
> `6` -> `”rw-“`
> `7` -> `”rwx”`

ワイ「お〜」
ワイ「娘ちゃんも、もう小学1年生やもんな」
ワイ「こんな宿題が出るんやなぁ」

娘「そうなの」

ワイ「パーミッションって確か・・・**権限**のことよな？」

娘「うん」

ワイ「難しそうやなぁ」
ワイ「それで、どこまでできたん？」

娘「えっとね」

# 娘ちゃんが分かったこと

娘「パーミッションについてググってみたんだけどね」
娘「どうやら──」

var非推奨の理由について

# はじめに
jsの宣言方法でES5以前まではvarが使われてたようだが、ES6になりlet, constができてから、varは非推奨となった。
varが非推奨となった理由をざっくりまとめる。

# var とは何か
変数宣言の方法の一つ。
jsでの変数宣言は3種類が存在する。
* var
* let
* const

# 宣言方法による違い

| |var|let|const|
|-|-|-|-|
|**再定義**|可|不可|不可|
|**再代入**|可|可|可|
|**スコープ**|グローバルスコープ|スクリプトスコープ
ローカルスコープ|スクリプトスコープ
ローカルスコープ|
|**宣言の巻上げ**|初期化される|初期化されない|初期化されない|

# var非推奨の理由
* スコープが常にグローバルスコープとなるため
* レキシカルスコープを利用した書き方ができない
* どこからでも同じ変数を再定義、再代入されてしまうことで、バグを生み出しやすい
* 宣言の巻上げ時にundefinedで初期化されてしまうため
* どこからでも同じ変数名で再定義が

単一のHTMLファイルで簡単にOpenAPI定義を表示する方法(Dockerなし、ES Modules使用)

# はじめに(この記事でできること)

– Dockerを使用することなく、無料かつローカル環境でOpenAPI 3.0定義を表示する
– 単一のHTMLファイルもしくはJavaScriptファイルで機能する
– openapi定義の場所がローカル(相対パス)かリモートURLかにかかわらず、機能する

## 結果


# 必要な環境

– [Visual Studio Code](https://code.visualstudio.com/)
– [Live Preview拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

## 操作手順

– ソースコードのhtmlファイルを任意のフォルダに配置する
– Visual St

YahooAPIを用いた銘柄情報取得

# はじめに

YahooFinanceに保存されている情報をAPIを用いて取得します。
今回、APIをより扱いやすくする為、OSSの[node-yahoo-finance2](https://github.com/gadicc/node-yahoo-finance2)を用いて取得してみようと思います。
■環境
– macOS
– Node.js
– npm(パッケージ管理)
– Express(WEBサーバ)
– javascript
# 目次

1. [環境構築](#環境構築)
1. [APIを叩いてデータを取得](#apiを叩いてデータを取得)
1. [動作確認](#動作確認)
1. [エンドポイントの作成](#エンドポイントの作成)
1. [参考文献](#参考文献)

# 環境構築
1. package.json及び必要ライブラリのインストール

“`
npm init
npm install expres

JavaScriptのMap・Setを使用し、配列同士の差分データを抽出する方法

## はじめに
以前、JavaScriptで配列同士の比較を行う方法について投稿しました。
[JavaScriptで配列同士を比較して、重複・差分データを抽出する方法](https://qiita.com/uyupin/items/4ed7cfe205b411806413)

その際に素敵なコメントをいただき、別の方法により、
パフォーマンスの向上が見込めたので記します。

## 結論
Map・Setを使用して配列の比較を行う。
– Map
キーと値のペアを保持するオブジェクト
– Set
重複する値が存在しないコレクション

詳細は下記が非常に分かりやすかったため、参照してください
[JavaScript Mapオブジェクト](https://qiita.com/chihiro/items/9965cd7eca0380cf288c)
[JavaScript Setオブジェクト](https://qiita.com/chihiro/items/0e610a31b589e3cc435f)

## 事前準備
以下の二つの配列があったと仮定する。
「expense1」と「expens

Python,Ruby,PHP,Java,JavaScript,Perlのファイル・ディレクトリ操作の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのファイル・ディレクトリ操作の比較

# Python

https://qiita.com/supersaiakujin/items/12451cd2b8315fe7d054

# Ruby

https://qiita.com/prgseek/items/38f74d99b74baa3b42f7

# PHP

https://qiita.com/daichi87gi/items/111cd922991e4a18d1ef

# Java

https://qiita.com/suema0331/items/03330a663773204afc5f

# JavaScript

https://qiita.com/turmericN/items/28e8bc8fca07285ddffc

# Perl

https://perlz

Maximum call stack size exceeded Errorに綺麗にハマったのでgetter/setterと_についてを書く。

最近ちょっとJavascriptに触れていてgetter/setterをいじっていたら`Maximum call stack size exceeded Error`にハマったのだが、綺麗にハマりすぎたので記事にしようと思う。

## ハマってみる
まずはハマってみることが大切だ。
適当にインスタンスプロパティnumが10を超えたら文字列になる性質を付与してみる。

“`javascript
class beStringUpper10{
constructor(num){
this.num = num;
}
set num(val){
if (val > 10) this.num = String(val);
else this.num = Number(val);
}
}

let hoge = new beStringUpper10(0);
//数字だといいな
hoge.num = 1;
console.log(hoge.num)
//文字列だといいな
unko.num = 11;
console.log(hoge.num)

//Uncaught Range

洪水時の浸水深をボクセル風に立体化する

## はじめに

水害のリスクを伝える際に、3D にすることでインパクトを与えるというのはよく聞くアイデアです。
国土交通省のハザードマップポータルサイトでは、全国シームレスに洪水浸水想定区域の浸水深を見ることができます。

https://disaportal.gsi.go.jp/

この浸水深を立体的にしてみれば、浸水リスクが分かりやすいのではと思いましたので、簡易的に立体化させてみることにします。

**注意：これはあくまで実験で、実際のリスクを正確に示すものではありません。**

## データ

実は、ハザードマップポータルサイトのデータは [API](https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html) として提供され

kintoneのポータル画面に残営業日を表示させる

# kintoneのポータル画面に残営業日を表示させる

## ポータル画面

## 使用したモジュール

### holiday_jp-js
https://github.com/holiday-jp/holiday_jp-js

## コード
“`
import holiday_jp from “@holiday-jp/holiday_jp”;

kintone.events.on(‘portal.show’, (event) => {
// ポータル画面の要素を取得
const portalSpaceElement = kintone.portal.getContentSpaceElement();
// 残営業日の要素を作成
const informationElemen

javascriptメソッド、コールバック関数　備忘録

# pushメソッド
“`js
const characters = [“にんじゃ”, “ベイビー”, “ひつじ”];

characters.push(“とりずきん”); //配列の最後に要素を追加する

console.log(characters);
//出力結果
//[ ‘にんじゃ’, ‘ベイビー’, ‘ひつじ’ ]
//[ ‘にんじゃ’, ‘ベイビー’, ‘ひつじ’, ‘とりずきん’ ]
“`

# spliceメソッド
“`js
const scores = [80,90,40,70];
scores.splice(1,1,40,50); //splice(変化が開始する位置,削除数、追加する要素,..)
console.log(scores);
//出力結果
//[ 80,40,50,40,70]
“`

# forEachメソッド
“`js
const characters = [“にんじゃ”, “ベイビー”, “ひつじ”, “ずきん”];

characters.forEach((character) =>{
console.log(ch

Vue.jsのCDNを利用して、PHPを使わずにファイルのコンポーネント化してみた。

複数ページにまたがるサイトの場合、
ヘッダーやフッターなどのコンポーネント化（同じパーツを共通化）したいなーと思うときがあります。

そのときに、PHPだと`include(“ファイル名”)`でファイルを別に出来ますが、
PHPが使えない方法だと、ちょっと面倒です。

今回は、PHPが使えない場合、Javascriptだけでコンポーネント化する方法があります。

# jQueryのajaxを使う方法

ajaxはAPI取得などの外部ファイルの読み込みに使うイメージが強いと思いますが、実は同じサーバー内のHTMLファイルを読み込むことも可能です。
javascriptとして
“`javascript:index.html
function header(){
$.ajax({
url: “header.html”,
cache: false,
success: function(html){
document.write(html);
}
});
}
“`
を記載し、HTML部分に

deta.shのBaseにある予約データ__expiresに関しての注意点

## 結論
* putなどのメソッドにあるoptionでexpireInの指定をした場合登録される相対時間はサーバーの時間でなく、ローカルの時間。
そのため、実際に削除される時間は想定よりサーバー時間とローカル時間のずれ分ずれてしまう
* put、putMany、insertはデータフィールドとoptionでexpireInを指定した場合、optionが優先される
* updateの場合、
* set operationで__expiresを指定した場合、データフィールドが優先されてしまう
* increment operationで__expiresを指定した場合、重複のデータを変更しようとするエラーが発生する

## やったこと
Deta Baseの予約データ__expiresに関してJavaScriptで検証を行いました。
確認したdetaのバージョンは以下の通りです。
“`
“dependencies”: {
“deta”: “^1.1.0”
}
“`

## Deta Baseとは
Deta Baseとは[deta.sh](https://www.

1分でわかるNextJS+ChaktaUI画面遷移

## 早速説明いたします。

“`
yarn add next/link
“`

“`
yarn add @chakra-ui/react
“`
まずはプロジェクトのルートディレクトリでこの二つを実行しましょう。

そしてjsxファイルなどで

“`js
import React from ‘react’
import { ChakraProvider } from ‘@chakra-ui/react’
import { Link } from ‘next/link’

//Homeの部分は任意でOKです。
function Home () {
return (

page2

)
}

export default Home

“`

で実装できるはずです。

事前に遷移先のページファイルも用意しておくとよ