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

【JavaScript】配列内の連想配列の特定のキーの値の存在確認

他に良い方法がありましたらご教示いただけますと幸いです。

“`javascript
const array = [{id:1},{id:2},{id:3}]
const check = (key,val) => array.find(obj => obj[key] === val)

check(“id”,1)
>{id: 1}

check(“id”,4)
>undefined
“`

Tableau OnlineのAPI呼び出し

# 概要
– TableauのREST APIを使った記録。
– やりたかったことは「APIでのフローの実行」であった。しかし最終的には、**Data Management add-on という製品を契約しないと「APIでのフローの実行」はできない**という結論に至った。
– [Error “Tableau Prep Conductor must be enabled on your site settings to schedule flows”](https://kb.tableau.com/articles/Issue/error-tableau-prep-conductor-must-be-enabled-on-your-site-settings-to-schedule-flows)
– ちなみにData Management add-onの費用は、サイト内で契約している総アカウント費用の何％だかなので、大きなプロジェクトだとかなり選択しづらい。できれば使いたくないというモチベーションで調査した。
– ここでは上記の目的の調査のために、接続、プロジェクト一覧、

React,Vue.jsの前にJavaScriptを習得すべし！(スプレッド構文)

# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

# スプレッド構文
“`…を使う構文“`です。
まずは配列で展開していきます。この構文は***配列を順番に処理***していきます。
手で色々動かしていってみてください。

“`js
const arr1 = [10, 20];
console.log(arr1);
console.log(…arr1);

//[10, 20]
//10
//20
“`

“`js
const arr1 = [10, 20];
const sum = (score1, score2) => console.log(score1 + score2);
sum(arr1[0], arr1[1]);
sum(…arr1);

//30
“`

***配列のコピーと結合***です。

“`js
const array4 = [100, 300];
const array5 = [500, 800];

const array6 = […array

JavaScriptのジェネレーター関数で二つのDateオブジェクトの期間に月ごとの反復処理を施す方法

はいさい！オースティンやいびーん！んながんじゅーやいびーみ？

# 概要

JavaScriptのジェネレーター関数を使って`Date`オブジェクトの期間を月ごとの期間にして繰り返し処理を行う方法を紹介します。

## ジェネレーター関数について

JavaScript開発者の多くはJavaScriptのジェネレーター関数を必要だと感じたことがないのではないでしょうか？

実際、ジェネレーターを使わずにやっていても優秀なJavaScript開発者としてやっていけるのだと思います。

しかし、ジェネレーター関数を自分のコーディング道具箱に加えると、時々助かることがあります。

ジェネレータ関数は、`for…each`構文で使えるオブジェクトを返してくれる関数です。

つまり、**半数処理プロトコル**のオブジェクトを返す関数です。

[半数処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols)のオブジェクトで代表的な物をいえば`Array`がもっとも一般に

ローコード初心者で沼にハマったセキュリティエンジニアのメモ（元SE）

# 前置き
久しぶりの更新です。
最近はTryHackMeやHackTheBooxでひたすら修行していたので、全然更新してませんでした。
普段はセキュリティ診断（脆弱性診断やペネトレなど）やってますが、Office365を弊社でも使っている縁で、業務改善用にPowerAutomateくんを使おうとしたら、沼にハマってしまった次第です。

正規表現すら無いので、白目剥きながらOfficeScripts組んでました。
報告会とか被ってなくて良かった･･･

# ローコードくんへの所感と偏見
自由度がめっちゃ低くて、やりたい事が全然できない印象でした。
前述したように、正規表現するスクリプトもOfficeScript側で組みましたし、他の言語なら適当にクラス作るなりコレクション作ればすぐ出来そうな処理に四苦八苦しながらローコードと格闘してました。

# 参考文献
調べる中で特に有用な情報をいくつか挙げておきます。
とても参考になりました、ありがとうございます。

https://qiita.com/Satoshi_Yoshino/items/fa2062f0d26b3e679e4c

htt

大学の授業システムのUIをChromeの拡張機能を使って自力で改善してみた

# 概要
大学の授業システムのトップページには前までは課題一覧と授業一覧が表示されていましたたが、
UIの変更により別ページに移動してしまいました。これでは少し不便なので、Chromeの拡張機能を
自作して無理やりトップページに追加してQOLを上げた、という話です。

# どんなUI？
## 以前

ToDo欄に課題一覧が、コースに授業一覧が表示されます。（今は隠れてますが、、、）
ちなみに、旧UIのトップページも一応使用できますが、デフォルトではアクセス出来ない感じです。

## 変更後
![Screenshot from 2022-11-11 23-33-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.co

【初学者向け】useStateでobjectの中にあるobjectの値の更新

## はじめに
Reactを触っていく中で、objectの中にあるobjectへの値の更新の仕方で詰まったので、
備忘録として残すとともに、何かの参考になれば幸いです。

## サンプルコード
例として、以下のコードを使用する。
– 登録ボタンがクリックされたらonClickが実行される。
– person.nameをTaroに変更する。
– person.detail.hobbyをプログラミング、TVゲームという値に変更する。
– 変更された値を画面に表示する。
“`React
interface Person = {
name: string;
age: number;
detail: {
birthday: string;
hobby: string[];
};
}
const basePerson: Person = {
name: ”,
age: 0,
detail: {
birthday: ”,
hobby: [],
},
};

export const Sample: FC = memo(() =>

Javascript XrmServiceToolkit.Rest.Retrieve

//＜パターン1＞ 個別項目取得
var lookupFieldValue = Xrm.Page.getAttribute(“new_lookupName”).getValue(); //画面からLookup項目値取得
XrmServiceToolkit.Rest.Retrieve(
lookupFieldValue[0].id, “dsh_entityNameSet”,
“new_field1″,”new_field2″,”new_field3”,
null, function (result) { entityName = result }, XrmServiceToolkit.Common.ShowError, false);

var field1 = entityName.new_field1 != null ? entityName.new_field1.Value : null;
var field2 = entityName.new_field2 != null ? entityName.ne

【Node.js・Express】multerではなくexpress-fileuploadでファイルをアップロードする方法

# 環境構築

1.以下を実行（もしくは`express-file-upload`フォルダを作成してその中に移動）

“`terminal
mkdir express-file-upload
cd express-file-upload
“`

2.`package.json`以下を作成して以下をコピペで記述

“`json:package.json
{
“name”: “express-file-upload”,
“version”: “1.0.0”,
“description”: “”,
“main”: “server.js”,
“type”: “module”,
“scripts”: {
“start”: “nodemon server.js”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“ejs”: “^3.1.8”,
“express”: “^4.18.2”,
“express-fileupload”:

過去の自分に教えてあげたい！if文編。

2022/09/08
読んで欲しい人

3ヶ月前の私。
それと、プログラミング初学者の方。または、プログラミングを教えている人。

なぜ、Qiitaでブログを書こうと思った理由は私のつまずきってもしかしてSSR+（スーパースペシャルレア+）なのでは？と思ったからです。
このSSR+級のつまずきを言語化すれば

①私の’できなかった’を’できる’ようになる

②初学者の方は自分の成長が見えにくいと思うので小さい事から自分を褒めてあげる習慣をつけませんか？っていう提案

③プログラミングを教える側の方たちにも初学者だった頃を思い出して欲しくて書きました。

で、本題。

結局、私は今回、何でつまずいたかというと、、、
if文の中括弧の開始と終了がどこの位置に書いてあるかが理解できませんでした。

例

“`js
if(age >= 20){
result = ‘成人’;
} else {
result = ‘未成年’;
}
“`

こちらを見て皆さんは
条件分岐を使って20歳以上は成人、それ以外は未成年と出力するプログラムと理解すると思います。

しかし私には、

`els

【TypeScript】Null合体演算子(??)

## Null合体演算子とは？
論理演算子の一種です。この演算子は左辺が `null` または `undefined` の場合に右の値を返し、それ以外の場合に左の値を返します。
参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

私は初めて見た時に「なんこれ。どういう判定？」と思いました。
今でもどんな処理がされているっけとなるのでメモとして残しておこうと思います。

## 使い方
1\. 左辺が`Null`or`undefined`の場合
“`typescript
const example1 = null ?? “右辺”;
console.log(example1); //右辺
const example2 = undefined ?? “右辺”;
console.log(example2); //右辺
“`
example1,example2ともに右辺が出力されています

2\. `Null`or`undefined`が含まれていない場合

[JavaScript]異なるIDで同じ処理をまとめて書く方法

# はじめに
JavaScriptでIDは違うけれども同じ処理をまとめて書く方法がわからなかったのでここに解決法を書いておく

### 元のコード
“`
function valueInput(box_id_num) {
const box_input = document.getElementById(box_id_num).value
console.log(box_input)
}

let boxSelect = document.getElementById(‘box_num0’);
boxSelect.addEventListener(‘change’, valueChange);

let boxSelect = document.getElementById(‘box_num1’);
boxSelect.addEventListener(‘change’, valueChange);

let boxSelect = document.getElementById(‘box_num2’);
boxSelect.addEventListener(‘ch

React,Vue.jsの前にJavaScriptを習得すべし！(テンプレート文字列とアロー関数)

# CodeSandBox
1番環境構築が楽でした。

https://codesandbox.io/

create sandboxをした後にGitHub連携できます。
sign inでGitHubと連携し、リポジトリまで作れます。

https://codesandbox.io/post/open-beta

https://dev.classmethod.jp/articles/linking-codesandbox-with-github/

# テンプレート文字列
今までの書き方より楽になりました。

“`js
const name = “ルフィ”;
const age = 19;

const man = `私は${name}です。今${age}です。`;
console.log(man);
“`

# アロー関数
アロー関数は“`=>“`を使います。

“`js
const arrow = (str) => {
return str;
};
console.log(“func2です”);

//func2です
“`

***returnの省略法***で

関数型プログラミングは4つの関数だけでいい(私見含む)

# 関数型の方が給料が高い?

私事ですがこのようなサイトを運営しています。

簡単にいうと、 **プログラミング言語を年収や求人数別で番付したものです。**

https://flamevalue.short-tips.info/

このサイトを運営してく中で気づいたことですが、全体的に関数型が書ける言語の方がオブジェクト指向型の言語よりも収入が高い気がしてます。（異論は認める）

そうでなくても、何かと話題になる関数型を知っておいて損はないと思うのです。

備忘録も兼ねて、関数型の議論が始まった時に会話に参加できるよう、概要だけでも記述しようかと思います。

# 関数型四天王とメリット

関数型というとlispの次のようなコードを思い出す人もいると思います。

“`lisp
(if hoge (progn
(setq hoge 1)
(setq fuga 2))
(progn
(setq hoge 0)
(setq fuga 1)))
“`

…いや読めねぇよ！って

マラソン　Javascript　電卓

今回はjavascriptの使い方を復習するために、簡単な計算ツールを作成しました。
具体的には、マラソンのペースの計算しきです。

今回学べる事は6つぐらいで、Javascript初心者向けの記事になります。
11/10（一回目）
コード

“`html

2

元記事を表示

js.Objectのすべてのproperty表示する方法。

js.Objectのすべてのproperty表示する方法。
　　　　　　
　　　　　　

js this 関して。
　　　　　　
　　　　　　![imege.png](https://qiita-image-store.s3.ap-northeast-1.amazon

元記事を表示

Code Warsでトレーニングしてみた

## Javascript編
### toString()でバイナリに変換できる！

if文の複数条件で、||のOR演算子を使うとエラーになり、完全にハマった。
腹が減ったのでタイムアップとした。


自分の回答↓

“`javascript
function addBinary(a,b) {
let sum = a + b;
console.log(sum + “this is sum”);

sum = 2;
console.log(sum + “Currently number”);
for(sum; sum !== 1;){

console.log(sum + “for 1 statement is activating”);
}
“`

元記事を表示

YouTubeサーチ拡張プラグインの作成とリバースエンジニアリングについての検証

# 概要
[YouTubeサーチ拡張プラグイン](https://chrome.google.com/webstore/search/YouTube%E9%80%A3%E5%8B%95%E6%A4%9C%E7%B4%A2%E5%86%8D%E7%94%9F%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3?hl=ja)を作成する場合、YouTubeサーチ結果をリバースエンジニアリングして検索結果を解析する必要があります。
[リバースエンジニアリング(https://digitalrisk-lab.com/trend/156/)](https://digitalrisk-lab.com/trend/156/)については、セキュリティ対策上は禁止されなくなったようです。(著作権法の改正で)
今回のケースは検索結果を解析して、その一部データを使って別の形式の再生リストを作成します。動画自体の改変ではなく、検索結果の動画情報の一部利用になります。
つまり、動画を再生するためのオリジナル形式の再生リストを作成するプラグインを作成します。このようなケースのリ

元記事を表示

10進数を2進数に変更して指定の桁数で0埋めにする処理

“`TypeScript
// 10 進数
const state1 = 2;

// 2 進数で変換
const num = state1.toString(2);

// 文字列にして0埋めする
var ret = ( ‘000’ + num ).slice( -3 );

console.log(ret); // “010”がかえる
“`

元記事を表示

URQL の devtool を Chrome で動かす

# 概要

GraphQL クライアントライブラリの一種である [URQL](https://formidable.com/open-source/urql/) でも　devtool を導入し、クエリ結果及びキャッシュの状態を確認できるようにする。

# バージョン情報

– urql 3.0.3
– urql-devtools 2.6.3
– @urql/devtools 2.0.3
– Google Chrome 106

# 前提

`urql` はインストール済みで既に使用中であることを前提とする。

# 手順

Chrome 拡張をインストール

https://chrome.google.com/webstore/detail/urql-devtools/mcfphkbpmkbeofnkjehahlmidmceblmm

devtool 用の　exchange (urql におけるミドルウェアやプラグインのようなもの) をインストール

“`bash
# npm
npm i @urql/devtools

# yarn
yarn add @urql/devtools
“

元記事を表示