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

セレクトボックスの選択肢を全て取得したい！！

# 結論
取得したセレクトボックスは一旦配列に変換しないといけない。
下記のようにセレクトボックスのelementを配列に変換してから操作する?
“`
// セレクトボックス要素を取得
formElem = document.getElementById(セレクトボックスのid)

// 選択肢のvalueを配列で取得
Array.from(formElem.options).map(option => option.value)
// 選択肢の表示部分を配列で取得
Array.from(formElem.options).map(option => option.text)
“`

## なぜ変換？？
“`
formElem = document.getElementById(セレクトボックスのid)
formElem.options
=> HTMLoptionsCollection[option,option…]
“`
このように　取得したセレクトボックス要素.optionsで選択肢達は取得できている…が
この状態で配列の操作をしようとすると上手くいかない

`

paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript 効率よく盗もう

効率よく盗もう (paizaランク A 相当)

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

# 方針

>盗み出す財宝を適切に選んだ結果、平均価値が最大でいくつになるかを答えてください。

以上の問題文より、平均価値で二分探索ができそうです。

***

k個の財宝の平均価値がx以上なら、それ以下の平均価値y(y<=x)も、もちろん達成できます。なので、二分探索ができます。 k個の平均価値は問題文の定義より`(v_1 + v_2 + ... + v_k) / (w_1 + w_2 + ... + w_k)`で求められます。 平均価値がx以上になるなら、 `(v_1 + v_2 + ... + v_k) / (w_1 + w_2 + ... + w_k) ≧ x` と表現できます。 このままだと考えにくいので、これを、**財宝１つ１つの表現にできないか考えます。** 財宝１つ１つの表現を目指して、式変形をします。 `(v_1 + v_2 + ... + v_k) -

【JavaScript】書き方による関数の違いまとめ

# はじめに
JavaScriptでは、関数の定義方法が複数あります。
いつもなんとなくで書いていたのですが、調べてみると書き方によって少しづつ違いがあったのでまとめてみようと思います。

# 関数の定義方法4つ
関数の定義方法は以下４つです。
### 1. function命令で定義
“`.js
function getTaxIncludedPrice(price, tax) {
return price + price * tax
}
“`
### 2. Functionオブジェクトを利用して定義
“`.js
const getTaxIncludedPrice = new Function(‘price’, ‘tax’, ‘return price + price * tax’)
“`
### 3. 関数リテラルで定義
“`.js
const getTaxIncludedPrice = function(price, tax) => {
return price + price * tax
}
“`
### 4. 関数リテラルで定義（アロー関数）
“

type aliasをinterfaceに変える

typeをinterfaceに変えてみる

変数のタイプを決めるにあたって、type alias方法とinterface方法がある。
interfaceとtype aliasの違いとしては
①interfaceは”=”を使わない。
②タイプを結合させたり組み合わせたりする方式の違い

①interfaceは”=”を使わない。

下の二つは同じ定義です。
二つの違いはtype aliasは”=”を使っていますが、interfaceは”=”を使いません。

“`react
// Type Alias
type NewsFeed = {
readonly points: number;
readonly comments_count: number;
read?: boolean; // ? はoptional
}

// interface
interface NewsFeed {
readonly points: number;
readonly comments_count: number;

Lodashインポート時のファイルサイズを削減する

## まとめ

* `import _ from “lodash”`
* 圧倒的にやめたほうがよい
* `import { get } from “lodash”`
* ファイルサイズ削減にはならない
* が、削除しようという意思があるので、そう自分のプロダクトに書いてあったら自分を褒めましょう
* `import get from “lodash/get`
* この書き方が一番よい
* 関数数個の import だと、lodash 全体の 20%くらいに収まる気がする
* すべての関数をインポートすると逆に重くなる（1.5 倍くらい？）
* 100 くらいのインポートの wrapper ファイル作るくらいならよさそう

## 解析結果


Gzipするなら144関数インポートしてもよさそう

node.jsのアプリケーションをAWS ElasticBeanstalkにデプロイしてみる。

node.jsの非常に簡素なアプリケーションをAWS ElasticBeanstalkを用いて公開するやり方をまとめていく。
これは下の動画に従ったものであるので下の動画を見てもいい。また、公式のドキュメントにもnode.jsとExpressを用いたアプリケーションの公開の仕方があった。この記事では最低限のことしか書かないので実際に実用性のあるアプリケーションを公開する際には公式ドキュメントを参照してほしい。

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

まず、作業に移る前に必要なことがいくつかある。

Gitへの登録とAWSアカウントの作成である。
こちらは行っていることを前提に進めていく、難しい作業ではないので各自調べて行ってほしい。

そして、ElasticBeansをコマンド上で操作するためにEB CLIのダウンロードをする必要がある。

ht

setTimeoutで実行する関数に引数を渡す

第一引数の関数を第二引数に渡したミリ秒後に実行する`setTimeout`メソッド。
下記のように関数に引数を取ると即実行されて意図どおりになりません。

“`js
function sayHello(name = ‘Tom’){
console.log(`hello ${name}`)
}

setTimeout(sayHello(‘John’), 3000) // 間髪入れず「hello John」が出力
“`

setTimeoutに渡さなければならないのは関数オブジェクトであり、関数の実行結果ではないからです。
そのため、引数を取らない場合でも即実行されてしまいます。

“`js
setTimeout(sayHello(), 3000) // 間髪入れず「hello Tom」が出力
setTimeout(sayHello, 3000) // これならOK。正しい渡し方
“`

どうすれば、引数を渡しつつ指定ミリ秒後に関数を実行できるのか。

## 無名関数をわたす

実行したい関数を包含した無名関数をsetTimeoutの引数とすることで、nameを指定すること

プリザンターのスクリプトで用いるJavaScriptの演算子について

# はじめに
プリザンターでスクリプト機能やサーバースクリプト機能を使うことがしばしばあります。その際、演算子を覚えきれないので、この記事にまとめようと思います。といっても、URLを乗っけるだけですが・・・

# 参考にしているURL
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

# 等値演算子と同値演算子
等値演算子(==)は型が異なる場合には型の変換を試みてから比較を行うそうです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality
同値演算子(===)は型が異なる場合、常に異なるものと判断するそうです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality

要約すると、===のほうが厳密に比較してくれるのでしょう(だから、名前が厳密等価演算

webpack.config.jsの内容

## 補足
当記事は[Shin Coding Tutorial](https://www.youtube.com/@user-hl9uv6cv7k)様のYoutube動画を参考に作成いたしました。

参考動画は[こちら](https://www.youtube.com/watch?v=ECc1EXnx7VQ)

## Webpackについて
WebpackはCSSやJavaScriptなどの複数のファイルをまとめる役割を持つモジュールバンドラーです。

本記事では、Webpackの設定ファイルであるwebpack.config.jsの記述について簡潔にまとめました。

## webpack.config.js

“`javascript
module.exports = {
entry: {
bundle: “./src/index.ts”, //バンドルしたいファイルのパス(複数指定可能)
},
output: {
path: `${__dirname}/dist`, //バンドルしたファイルを出力するディレクトリのパス
filename: “b

JavaScriptの関数の定義などの記述

JSに関数の記述いくつがあって，使い方を把握するように，ここに書いておきます．参考になれると幸いです．

①まず，通常の定義は

“`javascript
function exp(x1,x2){
…
}
“`

②即時実行関数式(定義すると同時に実行される)

“`javascript
//場合によって，関数名を省略可能
const s1 = function(x){ return x*x};
s1(2) //出力=4

//回帰の場合に，関数名が必要
const s2 = function f1(x){ if (x <=1) return 1; else return x * f1(x-1);} s2(4) //出力=24 //即変数に値を与えるのも可能 const s3 = function(x){ return x*x}(3); //s3 = 9 //別の関数の引数にもなれる function t(x){return x*x} t(function(a,b){return a-b}(2,3))

CloudFrontを使ってTerraMap APIにリクエストする

## この記事を作成した背景
外部APIにリクエストする際、APIキーをセットするタイプのAPIだとJavaScriptから直接リクエストしたときにAPIキーが見えてしまうためセキュアではなく、無駄なリクエストを消費する懸念があります。
サーバーサイドプログラムを実装し、APIキーをセットしてプロキシサーバーとして利用することもプログラム実装や環境構築の手間がかかります。
地図システム開発支援Web APIであるTerraMap APIはAPIキーをセットするタイプのAPIであり、サーバーサイドプログラムの実装や自前でインフラ構築することなく、容易にTerraMap APIにリクエストする方法を考えてみました。

## 概要説明
今回は[CloudFront](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)をリバースプロキシとして利用して[TerraMap API](https://www.mapmarketing.co.jp/terramap-api

Edgeの印刷機能で不具合が発生するのでメールワイズの印刷画面をカスタマイズした

# 状況
2023年1月19日現在，Microsoft Edgeの印刷機能で不具合が発生しております。
ショートカットキー（Ctrl＋Shift＋P）で印刷すれば回避できるのですがメールワイズでは使えません。印刷画面が表示されると同時に印刷がスタートしてプレビュー画面が表示されてしまうためです。そこで，印刷画面表示の際にプレビュー画面が表示されないようカスタマイズしました。
# コード
Edgeの場合だけ印刷をキャンセルします。
“`javascript
$(function () {
//メール印刷画面
if (mw.PAGE == “MailPrint”) {
var browser = window.navigator.userAgent.toLowerCase();
if (browser.indexOf(“edg”) != -1) {
window.onload = function () {
//onloadを上書きすることでEdgeの場合は印刷をキャンセル
alert(“Ctrl+Shift+P で印刷

JavaScriptおすすめ学習サイト

AngularがJavaScriptのフレームワークということもあり、復習をしようと思い、Udemyをチラチラと見ていました。
1日あれば十分に復習できます。

Udemyってキャンペーンでかなりお得に様々な講座が受けられて、とても良いですよね！

そんな中で、これからJavaScriptの学習をしようと思っている方におすすめの講座を発見しました！

[はじめてのJavaScriptプログラミング入門【2022年最新版】](https://www.udemy.com/share/101LEw3@Sa_4iB15krwjYAR-e06DLNoEl2x0SWDMrF2CocBFii3HO4W8VPve1GtIT-5XcGmy1A==/)

説明が分かりやすいのはもちろんのこと、ある程度学習してから、演習問題があることで、実際に手を動かしてアウトプットできます。
ただ一方的に講義を受けていても、本当に理解できているかわかりません。

ぜひリンクからリンクから飛んで学習スタートしてみてください！

ES Lintの導入

## 本記事を読んでできること
+ ES Lintを導入できる

## ES Lintとは
+ https://eslint.org/

## 環境
+ Windows10 Pro 64bit
+ Node.js v16.17.1

## 手順
1. Node.jsをインストールします。
[Nodejsのダウンロード](https://nodejs.org/ja/download/)

1. ターミナルを開き、以下のコマンドを実行してESLintをグローバルにインストールします。
“`
npm install -g eslint
“`

1. プロジェクトのルートディレクトリに移動し、以下のコマンドを実行してプロジェクトにESLintをインストールします。
“`
npm install eslint –save-dev
“`

1. 以下のコマンドを実行して、ESLintの設定ファイルを作成します。
“`
eslint –init
“`

1. package.jsonに以下を追加

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