JavaScript関連のことを調べてみた2023年01月19日

Create React Appでソースマップの生成を抑制する。

[Create React App](https://create-react-app.dev/) を使用して React アプリケーションを作成すると、ビルド時にウェブブラウザでのデバックに役立つソースマップが作成されます。

ソースマップは、CSS と JavaScript でそれぞれ作成されます。リストにあるパス中の `xxxxxxxx` はハッシュ値です。

* `build\static\css\main.xxxxxxxx.css.map`
* `build\static\js\main.xxxxxxxx.js.map`

ソースマップとは、何かは次の記事を参照してください。

https://developer.chrome.com/blog/sourcemaps/

プロダクション環境にソースマップがデプロイされると、ウェブブラウザの開発者ツールで開発時のコメントまで含めてソースコードが丸見えになります。クライアント側でソースコードが見られる、改変されることを前提にコーディングすることは、当たり前として、精神衛生上、あまりよろしくないという議論があります。

https:

逆算的に考えて作品を作る（最近の勉強方法）w

どうも,2424goです。
2023年になってから元々フロントエンドエンジニアチックなこともしていたこともあって備忘録としてここに残しておきますw

✳️今回は勉強法の紹介で見出しとかリストとかそこまで書く時間もないので本文が見づらくなってしまっている恐れがあります。あらかじめご了承ください?‍♂️（qiita全然更新してないから見出しとかの入れ方も調べてない僕が悪いですw）

✅結論から申し上げると逆算法を個人的に推奨してます。

まずは抽象的に考えるてみます。

達成したい目的→適切に必要な要素を確認して把握→細分化して自分が何からできるのかを把握する→継続するといったフローになります。

例えばここに対して制約（ルール１ヶ月以内とか）、期限を設けることで達成するためにとかつけるとなおのこと上手く行きやすいと言った小技もあります

PDCAを回すのは大事だけどその都度うまくいっているのかこまめな軌道修正を入れていくこととか

ここまでだいぶ抽象的なことばかり考えていたのでもっと具体的な例で考えてみると

?具体例
javaScript でハンバーガーメニューを実装したい
↓
構成要

UnhandledRejectionエラーを握りつぶす

# エラー内容
Vue.jsに設定したSentryから以下のエラーが飛んできました。
[](https://gyazo.com/12595ff9d545a35bd33e7f1ec0843f3c)

“`
UnhandledRejection
Non-Error promise rejection captured with value: cancel
“`

# エラーの意味
promiseでcancelが返ってきたが、ハンドルできなくて失敗したよ！と言っています。

# エラーコードサンプル
Vue.jsのライブラリ「Element-Plus」の確認ダイアログで発生するサンプルです。表示された確認ダイアログで「いいえ」を選択したときは、`.then`ではなく`.catch`に遷移しますが、`.catch`が定義されていないためUnhandledRejectionが発生します。
“`javascript
ElMessageB

paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript パイプを切り出そう

パイプを切り出そう (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search/binary_search__application_step0

# 解説
解き方を思いつくところが難しかったです。

**解き方の流れ**

切り出すパイプの長さを決める(長さの範囲の両端の真ん中mid)
→決めた長さで、A_1からA_nまで順に切り出し、本数を合計する
→切り出した本数の合計がk本切り出せているか判定する
→その判定により両端の範囲を狭める
→求められる誤差まで繰り返す。

**解き方を思いつくまで**

ある長さで、n本のパイプ1本1本から切り出す。切り出した本数がわかる。それがk本に満たないなら、もっと短い長さにする。k本を超えるなら、もっと長くできる。

できるだけ長くしたいので、k本切り出せるか切り出せないかの境目の長さが知りたい。手間がかかりそうなので、速い処理ができないか。二分探索が使えそう。

長さxのパイプをk本切り出せるなら、それ以下の長さのy(数式で表すとy<=x)についても、もちろん切り出せる。なので

componentが勝手に二重renderされちゃう

始めに

最初にReactを勉強していた時に、ログを確認したら絶対１回しか出力されないうはずのログが
２回出力されていることがわかりました。特に問題とかにはならなかったため、無視してきたが、
ソースが長くなることにより、ログを見るのがむずくて探してみた。

renderが二重されちゃう

“`react
import React from ‘react’
export default function List() {
const todos= [
{id: 1, text: ‘Drink Water’},
{id: 2, text: ‘Wash Car’}
]

const Item = (props) => {
console.log(props);
return

{props.id}{props.text}

}

const todoList = todos.map((todo) =>

【Vue.js】おそろしく速いキャベツ、オレでなきゃ見逃しちゃうね

### 【概要】
キャベツの画像をアニメーションで移動します。
トンパ、キルア、クロロの順にキャベツの移動速度が速くなります。

### 【環境】
Vue.js バージョン3.2.29

### 【コード】
・トンパ、キルア、クロロのキャベツ表示秒数の設定値は、特にこだわりはありません。
・トンパ、キルアまではキャベツが移動していることが目視できますが、クロロは目視できないと思います。

See the Pen ブラウザのみでDot言語をSVGや画像に変換する【Javascript】

# 概要
有向や無向グラフを書くのに優れた`Dot言語`。しかし、これを視覚化するには`Graphviz`というソフトをインストールしなければなりません。それって、面倒くさいですよね？

ということで、JavaScriptで`Graphviz`と同じ動きができる`Viz.js`を使って、ブラウザのみで`Dot言語`を視覚化する関数を作りました。

**余談**
すぐにでも`Dot言語`を図に起こしたい人は、次の`Viz.js`公式サイトへ。マークダウンエディタで、視覚化できます。便利！

http://viz-js.com/

# ソースコード
大まかには、Dot言語をSVGに→SVGをcanvasに→canvasをimg画像に、という流れで変換します。
“`HTML




“`

“`JavaScript
// dot言語をSVGに変換する関数
function do

Monacaクイックビューアで開発する際の注意点

[iOS版Monacaデバッガー配信停止](https://ja.docs.monaca.io/release_notes/discontinuation-of-ios-store-monaca-debugger-and-alternatives)に伴って、新しくMonacaでリリースされたのが「[Monacaクイックビューア](https://ja.docs.monaca.io/products_guide/quick-viewer)」です。

一見するとUIはMonacaデバッガーと同じように見えますが、幾つかの違いがあります。本記事ではその相違点について紹介しつつ、開発時の回避策を解説します。

## Cordovaプラグインは使えません

Monacaデバッガーでは、以下のプラグインがデフォルトで組み込まれています。

– バーコードスキャナー
– バッテリー
– カメラ
– キャプチャー
– デバイス
– デバイスモーション
– デバイスオリエンテーション
– ファイル
– ジオロケーション
– アプリ内ブラウザ
– メディア
– ネットワーク情報
– ローカル通知
– バイ

【JavaScript】非同期関数内のエラーを呼び出し元でキャッチしたい

## 問題

非同期関数を呼び出す時、呼び出し元でtry/catchを書いてもエラーをcatchできず、困っていました。

以下の場合、関数`sub`だけではなくて関数`func1`でも例外をキャッチしたい！

“`js
async function sub() {
console.log(“subが呼ばれました”);
try {
const a = 0;
a = 1; // エラー発生！
res = a;
return res;
} catch (e) {
console.error(“subでエラーが発生しました”, e); // キャッチされる
}
}

async function func1() {
try {
console.log(“func1が呼ばれました”);
const result = await sub(); // この関数内でエラー発生
console.log(“resultにsubの結果を格納しました”);
} catch (e) {
console.error

MonacaとNCMBで経県値風アプリを作る（その3: データの保存・更新と一覧表示）

経県値というアプリは知っていますか？各都道府県毎に、その地域で経験した内容を記録していくことで累計ポイントを獲得するアプリです。

[経県値](https://uub.jp/kkn/#app)

今回はNCMBとMonacaを使って経県値風のアプリ（地図タップアプリ）を作ります。SVGを使って日本地図を表示し、経験したことをチェックしていきます。得点は出していませんが、ちょっとカスタマイズすればできるでしょう。

[前回の記事では匿名認証と地図表示を実装しました](https://qiita.com/goofmint/items/a50f53e5f201cb307f81)ので、今回はデータの入力と検索を作成します。

## コードについて

今回のコードは[memorymap-monaca](https://github.com/NCMBMania/memorymap-monaca)にアップロードしてあります。実装時の参考にしてください。

## 都道府県をタップした際のイベント

各都道府県はSVGで描画されており、 `pref(都道府県ID)` という形式で描画されています。以下は

JavaScriptでA-Zの羅列を楽に作る方法

エクセル形式が関わる案件でたまに使うんだけどちょくちょく忘れるので備忘録

`String.fromCharCode`を使う。これは文字コードのnumberをstringに変換してくれる
例えば`String.fromCharCode(0x41);`とすると”A”が出てくる。
これをfor文で回してあげる
“`js:index.js
for(let i = 0x41; i <= 0x5A; i++){ console.log(String.fromCharCode(i)) } ``` 出力 ``` A B C D ... ``` 小文字が欲しければ0x61~0x7Aを見てあげればいい ただしこの手法はひらがなには使えない。 0x3041: ぁ 0x3042:　あ 0x3043: ぃ 0x3044: い 0x304B: か 0x304C: が のように小文字や濁点付き文字がごっちゃに出てくる。この場合素直にあ~んまで打った方が早いだろう。

【React】React v18

# JSX記法
まずReactでは、“JSX記法“と呼ばれる書き方を使用します。これは、JavaScript XMLの略であり、JavaScriptのファイルの中でHTMLのようなタグを記述できるというもので、JavaScriptの拡張構文です。

“`jsx
import { createRoot } from ‘react-dom/client’;
import { App } from ‘./App’;

const container = document.getElementById(‘app’);
const root = createRoot(container!);

root.render();
“`
引数が““となっていますがReactでは関数名をHTMLのようにタグで囲むことによって“コンポーネント“として扱うことができます。
TypeScriptを使う場合は、警告が出るので“const root = createRoot(container!);“の部分では“!“を忘れずにつけましょう。
“getEleme

MonacaとNCMBで経県値風アプリを作る（その2: 匿名認証と地図の表示）

経県値というアプリは知っていますか？各都道府県毎に、その地域で経験した内容を記録していくことで累計ポイントを獲得するアプリです。

[経県値](https://uub.jp/kkn/#app)

今回はNCMBとMonacaを使って経県値風のアプリ（地図タップアプリ）を作ります。SVGを使って日本地図を表示し、経験したことをチェックしていきます。得点は出していませんが、ちょっとカスタマイズすればできるでしょう。

[前回の記事では画面の説明とSDKの導入までを進めました](https://qiita.com/goofmint/items/8e462b165fc3b62eac5a)ので、今回は匿名認証と地図表示を実装していきます。

## コードについて

今回のコードは[memorymap-monaca](https://github.com/NCMBMania/memorymap-monaca)にアップロードしてあります。実装時の参考にしてください。

## 匿名認証を有効にする

匿名認証とは、デバイスで生成したUUIDを使って認証を行う機能になります。自動生成した文字列なので

paizaラーニング レベルアップ問題集 スタック・キューメニュー応用編 JavaScript カードゲーム

カードゲーム (paizaランク B 相当)

https://paiza.jp/works/mondai/stack_queue_advanced/stack_queue_advanced__card_game

# 解答例
山札に1-40までの数字を順番にセット。効果を発動する中で、手札に加えて、その中にキーカードの番号があるか判定するようにした。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N, K] = lines[0].split(” “).map(Number);
let key = false;//キーカードが引けたか判定

let deck = Array(40).fill(1).map((v, i) => v = i + 1);//山札、キュー

let hands = [];//手札
let graveyard = [];//墓地

ElasticBeanstalkのUnknown or duplicate parameter: NodeCommandの対処法

昨日、下に貼ったこちらの動画と公式のドキュメントを基にnode.jsのアプリケーションをAWS Beanstalkでデプロイすることを試みた。

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

ということで上の資料ではエラーが起きてしまうところの対処法を先に記述する。
その後、全体の流れを記述する。

“`
C:\Users\yusuk\nodejs-project>eb deploy
Creating application version archive “app-c698-230118_133959827133”.
Uploading nodejs-project/app-c698-230118_133959827133.zip to S3. This may take a while.
Upload Complete.
2023-01-18 04

javascriptでid属性やclass属性を制御する

## ■状況
もともと、バックエンドばかりを担当していた。
フロントも任されることになり、javascriptで制御をする必要があった。
情報はあったが、ばらけているのでシェアしたいと思った。

## ■ソース
ボタンの活性・非活性の制御をもとに、id属性とclass属性の例をあげる。

### idの場合

この場合だと、１つのhtml要素しか制御できない。

“`javascript
ダウンロードする