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

Javascript Lookup項目Details取得//Lookup項目に値設定

//Lookup項目Details取得
if (Xrm.Page.data.entity.attributes.get(“fieldname”).getValue() != null) {
var CustomerId = Xrm.Page.data.entity.attributes.get(“fieldname”).getValue()[0].id;
var CustomerName = Xrm.Page.data.entity.attributes.get(“fieldname”).getValue()[0].name;
var CustomerType = Xrm.Page.data.entity.attributes.get(“feildname “).getValue()[0].entityType;
}

//Lookup項目に値設定
var formContext = executionContextObj.getFormContext();
var loginUserId = Xrm.Utility.getGlobalContex

Retrieve Entity Record With JavaScript

Dynamics2011よく使っていたデータ取得方法

function GetEntityDetails() {
var result = new Array();

var lookupFieldId = “”;
if (Xrm.Page.getAttribute(“dsh_hospital”).getValue() != null) {
lookupFieldId = Xrm.Page.getAttribute(“dsh_hospital”).getValue()[0].id;
}

if (lookupFieldId != “”) {

var field1Value = “”;
var field2Value = “”;

//医療機関のオブジェクト取得
XrmServiceToolkit.Rest.Retrieve(lookupFieldId, “new_entityNameSet”, null, null, funct

【JavaScript】配列内の値に順位をつける

## 順位付け？

配列の値を並び替えすることはありましたが、順位付けする方法は？？となり、メモします。

“`js
const array = [ 90, 100, 50, 10, 80 ]

// 並び替え（降順）
const sorted = array.slice().sort((a,b) => b – a);

// 元配列と並び替えた配列を比較
const ranked = array.slice().map((item) => {
return sorted.indexOf(item) + 1
})

console.log(ranked);

// 出力
// [ 2, 1, 4, 5, 3 ]
“`

## 余談

sortは破壊的変更になるので、それを防ぐ方法

“`js
const array = [ 90, 100, 50, 10, 80 ]

// 破壊的変更
array2 = array.sort((a,b) => b – a);

console.log(array); // [ 100, 90, 80, 50, 10 ]
cons

【JavaScript】多次元配列の並び替えをする（複数キーも想定）

# JavaScriptで多次元配列をソートする方法

以下の配列を想定

“`js
const lists = [
[ 1, 3 ],
[ 1, 2 ],
[ 2, 1 ],
[ 1, 1 ]
]
“`

## 昇順

### 1つ目を第一優先

“`js
function sortArray(arr){
arr.sort((a,b) => {
return a[0] – b[0]
})
}
sortArray(lists);

// 出力
// [
// [ 1, 3 ],
// [ 1, 2 ],
// [ 1, 1 ],
// [ 2, 1 ]
// ]
“`

### 2つ目を第一優先

“`js
function sortArray(arr){
arr.sort((a,b) => {
return a[1] – b[1]
})
}
sortArray(lists);

// 出力
// [
// [ 2, 1 ],
// [ 1, 1 ],
// [ 1, 2 ]

プログラミング学習参考サイト

https://qiita.com/hatai/items/34c91d4ee0b54bd7cb8b

https://zenn.dev/nameless_sn/articles/awesome_python_github_repo

https://zenn.dev/nameless_sn/articles/important_10_github_repositories

https://github.com/EbookFoundation/free-programming-books/blob/main/books/free-programming-books-ja.md#java

event.target と型の話

知っている人からすれば「だから何」という話ですが、ちょっと面白かったので小ネタを。

:::note warn
この記事のサンプルコードは React TSX で書いていますが、今回の話題では React は関係ないです
:::

React + TypeScript を書いていたとき、下記のコードで型エラーが出ました。

“` tsx
// Property ‘src’ does not exist on type ‘EventTarget’.ts(2339)
console.log(event.target.src)} />
“`

これを、こう書き換えたら型エラーは消えました。

“` tsx
// エラーなし
console.log(event.currentTarget.src)} />
“`

一瞬「どちらも `event.target` には `HTMLImageElement` が入るはずなのに何故変わる？」

【もりたけんじ問題集】練習問題１～５

# 前書き(今回だけ)

次回以降は記事の見易さのため後書きとします。

https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d

JavaScriptの問題集がないか探していたところ、こちらを見つけました。
[もりたけんじ](https://profile.yoshimoto.co.jp/talent/detail?id=3871)さんが作成されたようです。

ざっと見てみたところかなり勉強になりそうなので、こちらに掲載されている問題を解きつつ、私及び初心者向けにさらに深く解説を載せていこうと思います。※許可を得ています
１記事５問をベースに載せていきます。

# 今回身についたこと

+ `Object.assign()`
+ `slice()`
+ `forEach()`
+ `Array.isArray()`

# 練習問題１

## 問題

“`
const a = { a: ‘a’ }とconst b = { b: ‘b’ } をマージしたc を出力してください e.g{ a:’a’, b:’b’

【React】UseReducerの使い方

## useReducerとは？？
***useReducer***は、useStateと同じく値を管理できるフック
***useReducer***:更新を***状態側***で行う
***useState***:更新は***利用者側***で行う

## useStateの場合
ここではボタンを押すとカウントアップするプログラムを作成した
“`typescript
import { useState } from “react”;

const Example = () => {
const [state, setState] = useState(0);

const countUp = () => {
//useStateを使う場合は呼び出し時(使うとき)に処理を記述する
setState((prev) => prev + 1);
};

return (
<>

{state}

カウントアップ

);
};
ex

Math.js で行列計算

JavaScript で 5 元連立方程式を大量に解く必要があったので Math.js を試しました。Deno での利用についても触れます。

* [math.js | an extensive math library for JavaScript and Node.js](https://mathjs.org/)

※ Python の numpy や sympy を使うなら情報も多くて簡単ですが、方程式が必要になったコードの他の部分は Deno で書いていたこともあって JavaScript でやってみました。

# Node.js

[ダウンロードページ](https://mathjs.org/download.html)に書いてあるように配布物が 1 ファイルにまとめられているので、npm ではなくそちらを使います。

* https://unpkg.com/mathjs@11.3.2/lib/browser/math.js

まずは感触をつかむため REPL で使ってみます。

math.js をダウンロードして置いたディレクトリで Node.js を起動して、行列の計算を

タグを入れるだけで Web サイトを高速化する Repro Booster について思うこと

こんにちは。ぬこすけです。

最近(2022/10/26)に、マーケティングツールを開発する Repro が、タグを入れるだけでウェブサイトの表示速度を高速化させるツール「 Repro Booster 」をリリースしました。

* ニュース

https://prtimes.jp/main/html/rd/p/000000206.000013569.html

* Repro 公式サイト

https://repro.io/products/booster/

[PRTIMESより引用](https://prtimes.jp/main/html/rd/p/000000206.000013569.html)

表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み

next.jsエンジニアになるためにやることメモ

next.jsエンジニアになるかもしれないので、そのために準備したことをメモしていく。
（このために学生時代に使っていたアカウントを掘り出してきた）

next.jsエンジニアの友達に聞きながら進めていくので、もし同じように今から始める人がこの記事を見てくれているのであればぜひ一緒に頑張りたい。
先輩エンジニアの皆様は「これをやれ」コメントをぜひお願いします。

## やること(予定）
大きく四段階で学習を進める。
※あくまで予定なので気分で変更するかも…

**第一段階**
・簡単なTODOアプリを作ってみる（基礎から始めてもつまらないので簡単なやつを作ってみる）

**第二弾階**
・HTTP、CSSをざっとおさらいする
・JavaScriptしっかり学び直す
　・ゆくゆくはTypeScriptもやりたい

**第三段階**
・Reactを学ぶ（初めてだから時間かかりそう）

**第四段階**
・**Next.jsをやる！！**

# やったこと
## 第一段階
やったら書きます

## 第二弾階
やったら書きます

## 第三段階
やったら書きます

## 第四段階
やった

HTML5プロフェッショナル レベル2 から学んだこと

前の会社で使用していたアカウントを引き継ぐの忘れてたので
https://qiita.com/ryota-yamada/items/16f299642160801d1496

for文if文での条件一致検索からforEach()を経てfind()にたどり着くまで

## この記事の経緯

自分でJavaScriptを書いていて、理解を深める、それをアウトプットして伝えよう！ということで記事にしてみました。
このコードはGASを書いていて使っているコードなので、正確にいうと、JavaScriptではないんですが、大体一緒なんでご勘弁を。
下記で書いている３パターンの記述は全て最終的な戻り値は同じものになっております。
結果は一緒だけども、記述の違いを見比べていただいてJavaScriptの理解を深めていただければと思います。

—
前提：関数の第1引数のpostTextの中に投稿者の情報が含まれています。その投稿者が誰なのかを調べるための関数です。調べるための要素としてgithubアカウントを用いています。そのgithubアカウントが含まれているかどうかで投稿者が誰なのかを調べるための関数となっています。

—
### パターン1: for文とif文の組み合わせ

“`javascript: for文とifの組み合わせ
// postText:string 検索したい文字列が含まれているのかを探す対象
// membersArr:

やらない理由を書いてやらない – Good Concepts in Programming –

# 概要
プログラミングの良い概念を理解するとプログラマーレベルが上がると考えています。
良い概念は特定のプログラミング言語に縛られないので、様々なプログラミング言語で役に立ちます。
前回は[OAOO原則](https://qiita.com/masaki_nakada_ari/items/1b4e1ea9a758ef86a498)を紹介しました。
今回紹介する良い概念は「やらない理由を書いてやらない」です。

# プログラミングの3大要素
本編に入る前に、プログラミングの3大要素について復習しましょう。
プログラミングを構成する3つの基本要素は「順次処理」、「分岐処理」、「反復処理」です。
プログラミングの3大要素だけであなたのやりたいことは基本的に実現できます（良いプログラミングであるとは限らない）。

## 1.順次処理
順次処理は記述した順番に従って処理を進めていくことです。

“`order.js
// Plan, Do, Check, Actionの順番で処理します
executePlan();
executeDo();
executeCheck();
executeAc

jsQRを使ってブラウザQRコードリーダーを作る【技術メモ】【小ネタ】


# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。

今回はブラウザで使えるQRコードリーダーをさっくり作りたいな～と思いjsQRを使ってみました。

# jsQRとは？
javascriptで作られたQRコード読み取りライブラリです。
公式ページ https://github.com/cozmo/jsQR
デモページ https://cozmo.github.io/jsQR/

↓ デモページを試した図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/acc24c7f-5a9c-30a5-a7d9-cc3

【kintoneカスタマイズ】ルーレットアプリを作ってみた

## はじめに

ただカスタマイズを行なってチーム内だけに共有だけでは”アウトプット”が足りない。
Hazime styleのように、今後はアウトプットを意識していきます。

## 何を作ったのか
今回、kintoneカスタマイズで「タスク決めルーレットアプリ」を作成しました。

作成の背景として、現在所属しているチームでのタスク決めは、この神アプリ”[webルーレット](https://jp.piliapp.com/random/wheel/)”を使って、ギャンブルチックに決定していました。
毎タスクでルーレットがハラハラドキドキを与えてくれます。我々のチームでは「今日もアレで決めますか！」となるほどルーレットに執着しています。

ある日のタスク決めの後に、
「いわくん、これkintoneでやってみてくれない？」

これがこのルーレットカスタマイズのきっかけでした。

と、話すと長くなるので、早速デモをお見せしましょう。

## デモ
![デモ動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2949201

?JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-](https://qiita.com/mmaumtjgj/items/ef7bf1116988bfeedd84)

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

## popup.js
前回popupのHTMLを作成したので色々と動きをつけるためにjsファイルを記入します。
このjsファイルには
・タブの切り替えの処理
・タイマーを表示させる
・スタート/ストップ/リセットの各ボタン機能
・タイマー作動中の有無で表示する画面の処理
と多くの処理を行う。

この記事ではタブの切り替えの処理を記述していく。

### タブの切り替えの処理
タブの切り替えは[こちらの記事](https://blog-and-destroy.com/24218)を参考に

同期と非同期の違いとPromiseの役割

# 同期処理と非同期処理とは

## 同期処理

同期処理は順番通りに処理を行う

“`javascript
console.log(“一番”);
console.log(“二番”);
console.log(“三番”);

コンソールログ
//上から順番通り
一番
二番
三番
“`
同期処理の問題点
同期処理は順番通りに処理を行うために
途中に重い処理が合った場合その処理を待たないといけない

## 非同期処理
処理を順番通りにとは限らない、終わった処理から実行される
例えばsetTimeoutなど

“`javascript
console.log(“一番”);
setTimeout(() => console.log(“二番”), 5000);
console.log(“三番”);

//コンソールログ
一番
三番
二番
“`
このように順番通りではなく処理が終わった順番になる

## Promise

resolve実行時は
thenの処理

reject実行時は
catchの処理

finallyはresolve,reject両方と

【React】フラグメント

## フラグメントとは？？
`React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがあります。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。`
参考：https://ja.reactjs.org/docs/fragments.html

要素を複数返すときに必要ということですね。

## 確認してみる
以下のプログラムは***Example関数内でインクリメントした変数`value`をCountPrint関数に引数として渡し、表示***します

## NG例
“`javascript
const CountPrint = ({ value }) => {
return

count:{value}

;
};

const Example = () => {
let value = 0;
return (

[Javascript + CSS] JAN-13のコード番号からバーコードを生成し表示する（１）～仕様の確認からロジックアウトラインの構築

# はじめに
プレーンなJavascript（Vanilla.js）による、コード番号からバーコードを生成するためのロジック構築について、前半と後半の２回に分けて紹介します。一般消費者では、恐らく一番目にすることが多い、**JAN-13** に限定し、モバイル端末等バーコードリーダーにて認識可能なバーコード表示を目的とします。

今回は前半ということで、**仕様の確認からロジックアウトラインの構築**までとなります。

バーコードの表示方法については印刷目的ではないことと、 [Canvasを使用したSVG版](https://qiita.com/Dolphin_0809/items/ac087aadcc43d15a01e2) は既に存在し、参考にもさせていただいているため、`CSS` による表示を選択しています。かなり泥臭く決してスマートとは言えない処理内容となってしまうのですが、ロジックとしては単純でわかりやすいかと思います。

なお、JANコードについての歴史や成り立ちなどの基本的な情報は割愛し、表示及び生成に必要な仕様情報のみをまとめています。また、当方ではjQueryは使用しま