f@ctor

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

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

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/

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

**注意：これはあくまで実験で、実際のリスクを正確に示すものではありません。**
![スクリーンショット 2022-09-13 232903.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842832/d453837d-1536-7409-e28e-66929c964f6d.png)

## データ

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

元記事を表示

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

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

## ポータル画面
![スクリーンショット 2022-09-16 22.10.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1815076/133c9261-17b4-b0d2-4998-b680ade5c53b.png)

## 使用したモジュール

### 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);
//出力結果
//[ ‘にんじゃ’, ‘ベイビー’, ‘ひつじ’ ]
//[ ‘にんじゃ’, ‘ベイビー’, ‘ひつじ’, ‘とりずきん’ ]
“`

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

characters.forEach((character) =>{
console.log(character);
});

//出力結果
//にんじゃ
//ベイビー
//ひつじ
//ずきん
“`

# findメソッド
“`js
const numbers = [1, 3, 5, 7, 9];

const foundNumber = numbers.find((number)=>{
return number%3 == 0 //1つしか取り出せない

元記事を表示

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

“`

で実装できるはずです。

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

元記事を表示

javascriptで足し算

文字列を出力が取得できる### 足し算
“`

+
=

“`
数字入力可能なテキストボックスに数字を打ち込んで自動で計算結果が表示されるようにしたい。
“`