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

?JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## background.js
このjsファイルでは
・拡張機能を初めてインストールした時にする処理
・５分間の再接続処理
・start/stop/reset押した時の挙動
・ポモドーロタイマーの処理
を行う。この記事では拡張機能を初めてインストールした時にする処理を記述していく。

## 初インストール時の処理
初めてインストールした時、タイマーのフォームに最初からデフォルト値を入れて置きたかったので、“chrome.runtime.onInstalled.addLi

MindARトラブルシューティング

# クリックイベントが発生しない
MindARのオブジェクトはA-Frameタグを利用しているが、`cursor=”rayOrigin: mouse` アトリビュートを付与してもクリックイベント（onClick,OnMouseUp等）が発生しないが、MindARではクリック対象のタグに`class=”clickable”` を付与することでクリックイベントが取得できるようになる。

“`javascript

console.log(“clicked”)}
src=”#pro_video”
width=”1.3″

Mapオブジェクトはmapメソッドを使用できる【Javascript,Typescript】

## 概要
Mapオブジェクトを反復で使おうとする際、何も考えず下記のように書くと`プロパティ ‘map’ は型 ‘Map‘ に存在しません。`と注意される。
“`javascript
const hoge = new Map();
hoge.set(“key1″,”value1”);
hoge.set(“key2″,”value2”);
hoge.map(x=>console.log(x))//Error: hoge.map is not a function
“`
これは単純な理由で、Mapにはmapが実装されていないためだ。

しかし、上記の代わりに下記を書くと問題なく実行できる。
“`javascript
const hoge = new Map();
hoge.set(“key1″,”value1”);
hoge.set(“key2″,”value2”);
[…hoge].map(x=>console.log(x))
//> Array [“key1”, “value1”]
//> Array [“key2”, “value2”]
“`
これはMa

【MapLibre GL JS】ラインデータを表示する

## はじめに
この記事は#30DayMapChallenge2022 2日目の記事です。
テーマはLinesです。
MapLibre GL JSを使ってLineデータを地図上に表示してみます。


https://30daymapchallenge.com/

## Lineとは
ベクタデータの3要素（ポイント・ライン・ポリゴン）のうちの1つ。
複数の点を接続する線を指します。

## 地図表示
横浜駅周辺を表示してみます。

“`index.html





paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 二次元データの区間探索

二次元データの区間探索 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__matrix_boss

# 解答例
レジャーシート左上基準で、区画を順に調べていきます。
レジャーシートを敷く区画がxを超過していたら敷けません。
敷けるならカウントします。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, m, k, x] = lines[0].split(” “).map(Number);
const field = lines.slice(1).map(line => line.split(” “).map(Number));

let count = 0;//何通りある

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 三次元データ

三次元データ (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__matrix_step4

# 解答例
三次元データですが、求めたい答えは二次元配列で求まります。
メソッドを駆使して解いてみました。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//奥行きn、幅m、高さh,色x
const [n, m, h, x] = lines[0].split(” “).map(Number);
console.log(
lines.slice(1)
.map(line => line.split(” “).filter(v => Number(v) === x).length)

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript ピクニック 2

ピクニック 2 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__matrix_step3

# 解答例
最大値変数を用意し、区画を二次元配列にします。
レジャーシート左上基準で、区画を順に調べます。
レジャーシートに覆われた区画の価値の合計を求めて、最大値を超えるか比較します。
(小さな注意点：問題文のシートの大きさで変数にkを使うならば、ループで使う変数に、kを使わないようにします。地味にハマることがあります。const kとしておけば、気づけるので安全です)

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, m, k] = lines[0].split(” “).

Vue2からVue3への移行調査

社内のプロジェクトで「Vue2 × Class Component」での開発から「Vue3 × Composition API」へ移行する可能性を探りたい、という話になり、以下3点について調査したので、まとめてみました。

– Vue3へ移行するメリット
– 必要となる移行作業
– Class ComponentからComposition APIに書き換えるべきか

## Vue3へ移行するメリット

– Vue3はTypeScriptで開発されているため、Vuexなどのライブラリ含め型推論が効きやすい
– 当然、サポートが切れるのはVue2よりも後になる
– Composition APIで書くことにより、ロジックを1箇所にまとめやすく、また単体テストが書きやすい
※Composition API自体はVue2のプラグインでも使用可能ですが。。

など…

参考になった記事をいくつか貼っておきます。

https://www.ragate.co.jp/blog/articles/8232

https://www.ragate.co.jp/blog/articles/9888

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript ピクニック

ピクニック (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__matrix_step2

# 解答例
レジャーシートを敷ける場所の数countを用意します。
山を二次元配列にします。
レジャーシート左上を基準に、山の区画を順に、平行か調べます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, m] = lines[0].split(” “).map(Number);

let count = 0;//敷ける場所の数
//山を二次元配列に
const mountain = lines.slice(1).map(line => line.split(” “).map(Num

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 二次元データ 2

二次元データ 2 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__matrix_step1

# 解答例
メソッドを駆使して解いてみました。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, m, k] = lines[0].split(” “).map(Number);

console.log(
lines.slice(1)
.map(line => line.split(” “).filter(v => Number(v) === k).length)
.reduce((a, b) => a + b)
);
“`

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 二次元データ 1

二次元データ 1 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__matrix_step0

# 解答例
ワンライナーで解いてみました。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

console.log(
lines.slice(1)
.map(line => line.split(“”).filter(v => v === “.”).length)
.reduce((a, b) => a + b)
);
“`

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 大小関係 2

大小関係 2 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__range_boss

# 解答例
問題文を正しく理解することが大事です。
>以下の条件を満たす (l, r) ( l + 2 ≦ r )の組の数を答えてください。
>* l + 1 ≦ i ≦ r – 1 を満たすすべての i について、
a_{ i – 1 } < a_i > a_{ i + 1 } または、
a_{ i – 1 } > a_i < a_{ i + 1 } である 例えば、入力例2だと 1 2 1 2 1 2 1 (入力値) ですが、(l,r)の組がわかりやすいように番号をふると、 1 2 3 4 5 6 7 (l,rの何番目か) です。 条件を満たす(l,r)の組と数列は、 (1,3)の1 2 1, (1,4)の1 2 1 2, (1,5)の1 2 1 2 1, (1,6)の1 2 1 2 1 2, (1,7)の1

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 大小関係

大小関係 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__range_step4

# 解答例
問題文の
>連続する 3 要素 a_i, a_{ i + 1 }, a_{ i + 2 } が、 a_i < a_{ i + 1 } > a_{ i + 2 } または a_i > a_{ i + 1 } < a_{ i + 2 } となる i の個数を出力 に基づいて実装します。 ```javascript const fs = require("fs"); const input = fs.readFileSync("/dev/stdin", "utf-8").trim(); const lines = input.split("\n"); const [n] = lines[0].split(" ").map(Number); const a = lines[1].split(" ").map(Nu

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 連続した要素区間の最大長

連続した要素区間の最大長 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__range_step3

# 解答例
aの調べる左端lと右端rについてループを回します。
左端lを基準に、右端rを条件を満たす(a[l]=a[r])限り伸ばしていきます。
条件を満たさなくなったら長さを求めます。
a[l]!=a[r]なら、r-1までの長さ、
同じ要素なのに最後だったら、rまでの長さを求めます。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n] = lines[0].split(” “).map(Number);
const a = lines[1].split(” “).map

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 連続した要素の区間

連続した要素の区間 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__range_step2

# 解答例
問題文の、
>a_l から a_{l + k – 1 }までのすべての要素が x である l ( 1 ≦ l ≦ n − k + 1 )の個数を答えてください。

に基づいて実装します。
sliceとeveryを使いました。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, x, k] = lines[0].split(” “).map(Number);
const a = lines[1].split(” “).map(Number);

let count =

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 区間探索 2

区間探索 2 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__range_step1

# 解答例
前問の区間探索 1の以上のところを、未満にします。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, x] = lines[0].split(” “).map(Number);
const a = lines[1].split(” “).map(Number);

let max = 1;//最大長
let [l, r] = [-1, -1];//lとrの初期値。r-l+1=0なるように。

for (let i = 0; i < n; i++) { if (a[i]

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 区間探索 1

区間探索 1 (paizaランク B 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__range_step0

# 解答例
a に x 以上の要素は必ず 1 つ以上存在するので、最大長の最小値は1で、これを初期値とします。
lとrの初期値は0未満になるようにします。aのインデックにならないようにです。aのインデックになると、r-l+1=0の計算で、長さが求まってしまいます。
aの要素がx以上の時は、lが初期値だったら、更新します。rを伸ばします。最後のiだったら、最大の長さを求めます。
aの要素がx未満の時は、最大の長さを求めて、lとrをリセットします。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

cons

Best Practices for Node.js Security

Over the past few years, the software and application development game has taken businesses to reach new heights and has served well to both businesses and their consumers. And to develop powerful and robust applications there are numerous technologies, languages, and frameworks available in the market, and Node.js is among them.

It is the second most preferred framework by developers and Node.js development companies<

?JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-](https://qiita.com/mmaumtjgj/items/d15df85bcb9dcf31d87d)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## タイマー作動中の有無で表示する画面の処理
popupの画面が閉じても、タイマーが継続中なのか、一時停止しているのかによって表示する画面を切り替える。

“`popup.js
chrome.storage.local.get([‘timerStatus’,’btnStatus’], function(v) {
if(v.timerStatus == true){
timer_display();
if(v.btnStatus

?JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-](https://qiita.com/mmaumtjgj/items/6e1a978656580dab59d7)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## タイマーとボタンのステータス
現状まだタイマー自体の挙動は入れていないが、ボタンを押した際に複数のステータスを与える。
“timerStatus“と“btnStatus“の２つの属性を足す。

“timerStatus“はタイマー自体のステータスで、“true/false“で経過時間を表示の有無を決める。

“btnStatus“はタイマーが「start」状態、「stop」状態で、popupを再度開いた時のタイマーの挙動のスイッチとして担う。

この２つの属性をローカ