f@ctor

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

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

【概要】CORSってなに

CORSエラーに出会い立ち止まったので、なんやそれ状態からチョットワカル状態に持って行きたい。
## CROSとは
Cross-Origin Resource Sharing＝オリジン間リソース共有
これだけではよくわからんけど、オリジン同士でリソース共有するものなのかと雰囲気だけ掴む。
## オリジンって？
スキーム(プロトコル)、ホスト(ドメイン)、ポートの組み合わせのこと。それぞれはURLの一部分をさしている。
該当部分は下図参照。
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940053/9e3f85b1-4f17-225c-fe54-ab5746237f8c.png)

つまり、3つの要素からなるURL間同士でリソースを共有するのだなとわかる。
そして、webの世界では基本的に下記ルールに基づきアクセス制御を行なっている。

## 同一オリジンポリシー
javascriptは、前提として異なるオリジンの内容を読み込むことができない。
理由はセキュリティ面。例えば、インターネット

元記事を表示

WebRTCを利用した複数人でのビデオ通話サンプル(Mesh)

# はじめに
WebブラウザのWebRTC機能を利用して、複数人でビデオ通話をするサンプルです。
Mesh接続のサンプルになります。

:::note info
[WebRTC](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)についての説明は巷に沢山あるため省きます。
:::

1対1のビデオ通話サンプルはこちら。
「[WebRTCを利用した1対1のビデオ通話サンプル](https://qiita.com/nakka_/items/555f0da0289b75edd420)」

# 環境
– サーバー
CentOS Linux release 7.6.1810 (Core)
（Windowsでも動作可能）
node.js v16.18.0

– クライアント(動作確認環境)
Chrome バージョン: 106.0.5249.119
iOS 16.0.2
Android 12
:::note warn
カメラとマイクが必要です。
:::

# インストール
サーバーはnode.jsを利用します。
node.jsで静的ファ

元記事を表示

【Script SetUp】モーダル作成方法【Typescript】

# 始めに
前提条件のコードを添付すると冗長になってしまうため、[こちら](https://qiita.com/tak8_al/items/17b6cdde012cb6a8658d)に書いてあります。
まずは[こちら]()をご覧ください。

# 本記事の内容
本記事は編集用のモーダルの作成を目指したものです。
以下の手順で解説していきます。
* モーダルの作成
* 編集機能の追加

# モーダル作成
①booleanの取得
②メソッドの定義
③モーダルファイルの作成
④buttonとemit

# ①booleanの取得
true,falseでモーダルの開閉を行うため、booleanを作成します。
“`vuejs: src/components/todo-lists/editCard.vue


```

```shell
# npmを使用する場合はこのコマンドを実行する
npm install chart.js
```

### 描画領域の準備

グラフ描画領域は、`canvas`タグで指定することができます。

```

元記事を表示

Kintoneでタイムカードアプリ実装1：タイムカードアプリ編～文字列結合～

1年ぐらいKintoneを触ってきて、おおまかな仕様が理解できたので、スケジュール管理システムらしいものをKintoneで実装していきたいと思います。

それでは本題ヘ、
### タイムカードアプリ

想定としては、社内システムとしてKintoneを導入した場合を考えていて、
テレワーク中に自己申告で出勤、退勤時刻を記録するアプリという感じです。

まずは、入力画面にフォームを配置。

【CSS】自作CSSアニメーションで得た学びを３つ紹介する試み。

# 自作CSSアニメーションで得た学び
CSSを学習中の方向けに書いてみましたので読んでくれたら嬉しいです。

前提となってる記事はこれです。

https://qiita.com/yowatsuyoengineer/items/948676b8e3ad07717bc0

　↑ 頑張ってイケメンなアニメーション作ったっちゃん。せっかくやけん見てってくれてもいいとよ。

# CSSで役立つテクニック
## ①要素の位置指定は「absolute＆transform」が使いやすい。
::: note
「position:absolute」で他要素に干渉されない状態にし、「transform: translate(Xpx,Ypx)」で位置を指定するという理屈。
:::

↓文字じゃよく分からんのでコードで
```doubleLaser.html

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 で 6 元連立方程式を大量に解く必要があったので 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/

![スクリーンショット 2022-10-26 21.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164159/7e9edb42-2da9-b5fd-7560-a15284b9e68c.png)
[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:

OTHERカテゴリの最新記事

画面イメージ フィールドコード フィールド型
inputForm.png