OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptのアロー関数とは？

# はじめに
JavaScript超初学者の私ですが、JavaScriptの関数式であるアロー関数に遭遇し、「なんじゃこりゃあ！」と思ったので簡単にまとめます。
# 問題
アロー関数のメリットは？従来の書き方と何が違うの？
# 解決方法
**最初にアロー関数とは**

従来の関数式の簡潔な代替構文。以下の形で表す。
**定数/変数名 = (引数) => { 処理 };**

**従来の書き方と比べてみよう！**

・従来の書き方
```js:index.js
function sample1(str) {
        return str;
    }
console.log(sample1("sample1です"));
```
・アロー関数を用いた書き方
```js:index.js
const sample2 = (str) => {
        return str;
    }
console.log(sample2("sample2です"));

//引数が1つの場合はもっと省略できる
const sample3 = (str) => str;
console.log(sample3("sample3です"));
```
アロー関数だと
・functionの記述が不要
・引数が1つの場合は（）や｛｝も省略しようと思えばできる

調べた感じ他にもメリットは数多く存在しそうですが、さらなる混乱を防ぐため、このあたりまでにしておきます。。
# おわりに
アロー関数は簡潔に関数を定義できるので、使えたら便利ですよね！
たくさんコードに触れて慣れていきましょう！
【PWA + GitHub】10分でできるPWAの導入

# はじめに
PWAを手っ取り早く実現してどんなものかを確かめたいという人向けの記事です。

# 前提条件
- httpsでwebページを公開する環境が整っている
- GitHubの基本的な使い方を理解している

# 目次

1. [PWAを導入する](#pwaを導入する)
1. [参考文献](#参考文献)

# PWAを導入する
### ファイルの作成
GitHub上に以下の構成でリポジトリを作成します（sw.jsのurlsToCacheにはリポジトリ名を入れてください）

```html:index.html
<!DOCTYPE html>
<html>
<head>
	<title>Your App</title>
	<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
	navigator.serviceWorker.register('sw.js').then(registration => {
	console.log('ServiceWorker registration successful with scope: ', registration.scope);
	}, err => {
	console.log('ServiceWorker registration failed: ', err);
	}).catch(err => {
	console.log(err)
	});
	});
}
</script>
</head>
<body>
	<h1>hello world</h1>
</body>
</html>
```

```json:manifest.json
{
	"short_name": "pwa",
	"name": "pwa_sample_app",
	"display": "standalone",
	"start_url": "index.html",
	"icons": [
		{
			"src": "images/icon.png",
			"sizes": "192x192",
			"type": "image/png"
		}
	]
}
```

```javascript:sw.js
var CACHE_NAME = 'pwa-sample-caches';
var urlsToCache = [
	'/pwa/',
];

// インストール処理
self.addEventListener('install', function(event) {
	event.waitUntil(
		caches
			.open(CACHE_NAME)
			.then(function(cache) {
				return cache.addAll(urlsToCache);
			})
	);
});

self.addEventListener('fetch', function(event) {
	event.respondWith(
		caches
			.match(event.request)
			.then(function(response) {
				return response ? response : fetch(event.request);
			})
	);
});
```

最後にimages/icon.pngを配置して完了です。最終的には以下の構成になるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/24d2212c-4e0b-abc0-2ed0-ea4ead9d5c70.png)

### アクセスしてみる

作成したwebページにhttpsでアクセスします（やり方がわからない人は以下の記事を参考にアクセスしてください）

https://qiita.com/KomoriSohto/items/9b3f23397db2842f894f

iphoneでアクセスした場合、ホーム画面に追加を行ってアクセスするとurlが表示されず、アプリを起動したときのような振る舞いになります。

![IMG_2922.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/6f802d9d-4edf-a389-1b50-2f035960435d.png)

以上で作業完成です

# 参考文献

この記事は以下のサイトを参考に作成しました

https://qiita.com/poster-keisuke/items/6651140fa20c7aa18474
cat

```
[linuxstudy@xxxx ~]$ cat -n file.txt
     1	xacxa
     2	xxacxa iiiii
     3	
[linuxstudy@xxxx ~]$ cat << EOF
> aaa
> bbb
> EOF
aaa
bbb
```
```
CAT(1)                           User Commands                          CAT(1)



NAME
       cat - concatenate files and print on the standard output

SYNOPSIS
       cat [OPTION]... [FILE]...

DESCRIPTION
       Concatenate FILE(s), or standard input, to standard output.

       -A, --show-all
              equivalent to -vET

       -b, --number-nonblank
              number nonempty output lines, overrides -n

       -e     equivalent to -vE

       -E, --show-ends
              display $ at end of each line

       -n, --number
              number all output lines

       -s, --squeeze-blank
              suppress repeated empty output lines

       -t     equivalent to -vT

       -T, --show-tabs
              display TAB characters as ^I

       -u     (ignored)

       -v, --show-nonprinting
              use ^ and M- notation, except for LFD and TAB

       --help display this help and exit

       --version
              output version information and exit

       With no FILE, or when FILE is -, read standard input.

EXAMPLES
       cat f - g
              Output f's contents, then standard input, then g's contents.

       cat    Copy standard input to standard output.

       GNU  coreutils  online  help:  <http://www.gnu.org/software/coreutils/>
       Report cat translation bugs to <http://translationproject.org/team/>

AUTHOR
       Written by Torbjorn Granlund and Richard M. Stallman.

COPYRIGHT
       Copyright © 2013 Free Software Foundation, Inc.   License  GPLv3+:  GNU
       GPL version 3 or later <http://gnu.org/licenses/gpl.html>.
       This  is  free  software:  you  are free to change and redistribute it.
       There is NO WARRANTY, to the extent permitted by law.

SEE ALSO
       tac(1)

       The full documentation for cat is maintained as a Texinfo  manual.   If
       the info and cat programs are properly installed at your site, the com‐
       mand

              info coreutils 'cat invocation'

       should give you access to the complete manual.



GNU coreutils 8.22               November 2020                          CAT(1)
```
野球クイズアプリを開発します

## はじめに
突然ですが、今日からJavaScriptで野球のクイズアプリを個人開発します。

理由としてはこの前少し学んでみたJavaScriptが楽しかったこと、

そして好きな野球に関するアプリを作ってみたいという思いがあったからです。

https://qiita.com/Yuzaburo/items/750043e7b603c932ff06


## こんな機能が欲しい
Javascriptに関しては完全初心者ですが、以下のような機能は搭載したいと考えています。

* 基本的なクイズ機能
* 難易度に基づくポイントシステム
* 二人でのマルチプレイ機能
* ランキング機能

### 基本的なクイズ機能
まずは、4択クイズの基本的な機能を作成します。

- **問題と選択肢の表示**:
    - JavaScriptを使用して、ランダムな問題とその4つの選択肢を表示します。
    - HTMLとCSSでクイズのレイアウトをデザインします。
- **答えの選択とフィードバック**:
    - ユーザーが選択肢をクリックすると、正解か不正解かを表示します。
    - 正解の場合はポイントを加算します。

### 難易度に基づくポイントシステム
- 各問題に難易度を設定し、難易度に応じて異なるポイントが得られるようにします。
- 難易度は、問題データにプロパティとして追加できるとイメージしています（例：easy, medium, hard）。

### マルチプレイ機能
- 二人のプレイヤーが交互にクイズに答える機能を追加します。
- プレイヤーごとのスコアを管理し、それぞれのターンで表示を更新します。
- いつかリアルタイムで早押し対決ができるように改善できればと思います。

### ランキング機能
- 簡易的に、自分の最高スコアを表示することから始めます。
- いずれはデータベース（例：MongoDB）を使用してスコアを管理し、全プレイヤーのスコアを集計してランキングを表示します。

## 発展編
Laravelでサーバーサイドの技術を学んできたので、いずれNode.jsを使って認証・認可や、

データのCRUD操作を行えるようなアプリケーションを作成したいと思います。
amazon-cognito-identity-js で sessionStorageをつかう

amazon-cognito-identity-js はデフォルトで localStorageにUserが保存されるようである。

# localStorageとsessionStorageの確認方法
localStorageとsessionStorageの見方は、Chromeで開発者コンソールを開いて、 `アプリケーション` ＞ `ローカルストレージ` と `セッションストレージ` が確認できる
![スクリーンショット 2024-01-18 19.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192887/23e3b1a6-bc95-56fb-9764-4c7e2e8150a8.png)


# 普通は…
`amazon-cognito-identity-js` を使用すると、localStorageに保存されるらしい。

# sessionStorageに保存する

cognitoUserとcognitoUserPoolを sessionStorageに保存する。
[やり方はこちらの記事](https://qiita.com/kyane/items/e3dc8d4d22236fb2a4c4)より、

```
Storage: sessionStorage
```
を追加するだけ。

そして、idTokenは、sessionStorageで保存したUserからログイン時に1度だけ取得し、propsで渡して使う。

ポイントは「localStorageを使用しないこと」である。
また、idTokenを何度も取り直さないことで有効期限が伸び続けることを防ぐ。


# 参考記事
- https://qiita.com/Hiro-mi/items/18e00060a0f8654f49d6#jwt%E3%82%92%E7%94%A8%E3%81%84localstorage%E3%81%AB%E4%BF%9D%E5%AD%98
- https://www.gizmodo.jp/2024/01/google-just-disabled-cookies-for-30-million-chrome-user.html
- https://blog.mori-soft.com/entry/2018/08/17/231551
rmdir

```
RMDIR(1)                         User Commands                        RMDIR(1)



NAME
       rmdir - remove empty directories

SYNOPSIS
       rmdir [OPTION]... DIRECTORY...

DESCRIPTION
       Remove the DIRECTORY(ies), if they are empty.

       --ignore-fail-on-non-empty

              ignore each failure that is solely because a directory

              is non-empty

       -p, --parents
              remove  DIRECTORY  and  its ancestors; e.g., 'rmdir -p a/b/c' is
              similar to 'rmdir a/b/c a/b a'

       -v, --verbose
              output a diagnostic for every directory processed

       --help display this help and exit

       --version
              output version information and exit

       GNU  coreutils  online  help:  <http://www.gnu.org/software/coreutils/>
       Report rmdir translation bugs to <http://translationproject.org/team/>

AUTHOR
       Written by David MacKenzie.

COPYRIGHT
       Copyright  ©  2013  Free Software Foundation, Inc.  License GPLv3+: GNU
       GPL version 3 or later <http://gnu.org/licenses/gpl.html>.
       This is free software: you are free  to  change  and  redistribute  it.
       There is NO WARRANTY, to the extent permitted by law.

SEE ALSO
       rmdir(2)

       The full documentation for rmdir is maintained as a Texinfo manual.  If
       the info and rmdir programs are properly installed at  your  site,  the
       command

              info coreutils 'rmdir invocation'

       should give you access to the complete manual.



GNU coreutils 8.22               November 2020                        RMDIR(1)```
可変長引数とスプレッド構文

## はじめに
typescriptを学習していて、可変長引数とスプレッド構文がごちゃごちゃになってしまいそうなので備忘録として残します。

## 可変長引数とスプレッド構文
### 可変長引数
可変長引数は、引数として任意の数だけ受け取りそれら配列になる。　
以下だと`...arg`の部分。
```js
  const sum = (...arg: number[]): number => {
    let i = 0;
    for (const num of arg) {
      i += num;
    }
    return i;
  };
  console.log(sum(1, 2, 4));

```
以下のように通常の引数と併用ができる。
```js
const sum = (base: number, ...arg: number[]): number => {
```

### スプレッド構文
スプレッド構文は、配列の値を取り出す。配列　→　値
```js

  const sum = (...arg: number[]): number => {
    let i = 0;
    for (const num of arg) {
      i += num;
    }
    return i;
  };
  
  const num = [1, 2, 4];
  
  console.log(sum(1, 2, 4)); //7
  console.log(sum(...num)); //7

```

### 比較
自分の中では以下のようなイメージです。

・可変長引数：　値　→ 配列
・スプレッド構文：　配列　→ 値

## おわりに
まだまだtypescriptの理解ができていないので間違っていたら教えていただけると嬉しいです。
mv

```
MV(1)                            User Commands                           MV(1)



NAME
       mv - move (rename) files

SYNOPSIS
       mv [OPTION]... [-T] SOURCE DEST
       mv [OPTION]... SOURCE... DIRECTORY
       mv [OPTION]... -t DIRECTORY SOURCE...

DESCRIPTION
       Rename SOURCE to DEST, or move SOURCE(s) to DIRECTORY.

       Mandatory  arguments  to  long  options are mandatory for short options
       too.

       --backup[=CONTROL]
              make a backup of each existing destination file

       -b     like --backup but does not accept an argument

       -f, --force
              do not prompt before overwriting

       -i, --interactive
              prompt before overwrite

       -n, --no-clobber
              do not overwrite an existing file

       If you specify more than one of -i, -f, -n, only the  final  one  takes
       effect.

       --strip-trailing-slashes
              remove any trailing slashes from each SOURCE argument

       -S, --suffix=SUFFIX
              override the usual backup suffix

       -t, --target-directory=DIRECTORY
              move all SOURCE arguments into DIRECTORY

       -T, --no-target-directory
              treat DEST as a normal file

       -u, --update
              move  only  when  the  SOURCE file is newer than the destination
              file or when the destination file is missing

       -v, --verbose
              explain what is being done

       -Z, --context
              set SELinux security context of destination file to default type

       --help display this help and exit

       --version
              output version information and exit

       The  backup  suffix  is  '~',  unless  set  with   --suffix   or   SIM‐
       PLE_BACKUP_SUFFIX.   The version control method may be selected via the
       --backup option or through the  VERSION_CONTROL  environment  variable.
       Here are the values:

       none, off
              never make backups (even if --backup is given)

       numbered, t
              make numbered backups

       existing, nil
              numbered if numbered backups exist, simple otherwise

       simple, never
              always make simple backups

       GNU  coreutils  online  help:  <http://www.gnu.org/software/coreutils/>
       Report mv translation bugs to <http://translationproject.org/team/>

AUTHOR
       Written by Mike Parker, David MacKenzie, and Jim Meyering.

COPYRIGHT
       Copyright © 2013 Free Software Foundation, Inc.   License  GPLv3+:  GNU
       GPL version 3 or later <http://gnu.org/licenses/gpl.html>.
       This  is  free  software:  you  are free to change and redistribute it.
       There is NO WARRANTY, to the extent permitted by law.

SEE ALSO
       rename(2)

       The full documentation for mv is maintained as a  Texinfo  manual.   If
       the  info and mv programs are properly installed at your site, the com‐
       mand

              info coreutils 'mv invocation'

       should give you access to the complete manual.



GNU coreutils 8.22               November 2020                           MV(1)
```
Pythonで顔のAIセグメンテーション

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/459cd3c8-c207-fa94-0acf-b2f66ee07aea.jpeg width=400>
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/a8a5e5cd-1d56-da30-76e4-6a0d363a0b4a.jpeg width=400>

easyportraitというデータセットを学習したモデルを使います。

https://github.com/hukenovs/easyportrait

### インストール

リポジトリで提供されているいくつかのモデルの中で、segformerが使いやすいと思うのでダウンロードします。

```shell
git clone https://github.com/hukenovs/easyportrait.git
cd easyportrait/pipelines/
pip install torch==1.13.1 torchvision==0.14.1
pip install -U openmim
mim install mmengine
mim install mmcv==1.7.1
mim install mmcv-full==1.7.1
pip install mmsegmentation==0.30.0
pip install ftfy
wget https://n-ws-620xz-pd11.s3pd11.sbercloud.ru/b-ws-620xz-pd11-jux/easyportrait/experiments/models/segformer-fp-1024.pth
```

mmseg/datasets/pipelines/formatting.pyの２８１行目を以下のように書き換えます。

```python:formatting.py
# img_meta[key] = results[key]
img_meta[key] = results.get(key,None)
```

### 実行

```python
from mmseg.apis import inference_segmentor, init_segmentor, show_result_pyplot
from mmseg.core.evaluation import get_palette

device = 'cuda:0'
checkpoint = "segformer-fp-1024.pth"
config = "local_configs/easyportrait_experiments_v2/segformer-fp/segformer-fp.py"
model = init_segmentor(config, checkpoint, device=device)
img = 'image.jpg'
out = "result.jpg"
# test a single image
result = inference_segmentor(model, img)
show_result_pyplot(
    model,
    img,
    result,
    None,
    opacity=0.5,
    out_file=out)
```

結果のクラスインデックスは以下

```
['background',
'person',
'skin',
'left brow',
'right brow',
'left eye',
'right eye',
'lips',
'teeth']
```

歯もとれるのが良い。

![image4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/69778111-c9c6-ef60-8312-4b3cae05527d.jpeg)
![result (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/be14a8f4-d999-0fd1-e64d-0afbb20bd3bb.jpeg)


🐣
****
フリーランスエンジニアです。
AIについて色々記事を書いていますのでよかったらプロフィールを見てみてください。

もし以下のようなご要望をお持ちでしたらお気軽にご相談ください。
AIサービスを開発したい、ビジネスにAIを組み込んで効率化したい、AIを使ったスマホアプリを開発したい、
ARを使ったアプリケーションを作りたい、スマホアプリを作りたいけどどこに相談したらいいかわからない…

いずれも中間コストを省いたリーズナブルな価格でお請けできます。

お仕事のご相談はこちらまで
rockyshikoku@gmail.com

機械学習やAR技術を使ったアプリケーションを作っています。
機械学習／AR関連の情報を発信しています。

[X](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
mkdir

```
[linuxstudy@xxxx ~]$ ls -l | grep dira
[linuxstudy@xxxx ~]$ mkdir dira/dirb
mkdir: ディレクトリ `dira/dirb' を作成できません: そのようなファイルやディレクトリはありません
[linuxstudy@xxxx ~]$ mkdir -p dira/dirb
```
```
MKDIR(1)                         User Commands                        MKDIR(1)



NAME
       mkdir - make directories

SYNOPSIS
       mkdir [OPTION]... DIRECTORY...

DESCRIPTION
       Create the DIRECTORY(ies), if they do not already exist.

       Mandatory  arguments  to  long  options are mandatory for short options
       too.

       -m, --mode=MODE
              set file mode (as in chmod), not a=rwx - umask

       -p, --parents
              no error if existing, make parent directories as needed    ※

       -v, --verbose
              print a message for each created directory

       -Z     set SELinux security context of each created  directory  to  the
              default type

       --context[=CTX]
              like  -Z,  or  if CTX is specified then set the SELinux or SMACK
              security context to CTX

       --help display this help and exit

       --version
              output version information and exit

       GNU  coreutils  online  help:  <http://www.gnu.org/software/coreutils/>
       Report mkdir translation bugs to <http://translationproject.org/team/>

AUTHOR
       Written by David MacKenzie.

COPYRIGHT
       Copyright  ©  2013  Free Software Foundation, Inc.  License GPLv3+: GNU
       GPL version 3 or later <http://gnu.org/licenses/gpl.html>.
       This is free software: you are free  to  change  and  redistribute  it.
       There is NO WARRANTY, to the extent permitted by law.

SEE ALSO
       mkdir(2)

       The full documentation for mkdir is maintained as a Texinfo manual.  If
       the info and mkdir programs are properly installed at  your  site,  the
       command

              info coreutils 'mkdir invocation'

       should give you access to the complete manual.



GNU coreutils 8.22               November 2020                        MKDIR(1)```
Java 配列　

配列にnullを入れるとNullPointerExceptionが投げられる
**2つ目の要素がどこも参照していないため**
```java
	String [][]array = {{"A","B"},null,{"C","B","D"}};
		int total = 0;
		for(String[]temp:array) {
			total += temp.length;
		}
		
		System.out.println(total);

  ```
  これはok
  要素の値として入れているため
  ```java
  String [][]array = {{"A","B"},{"C","B","D"}};
  array[0][0] = null;
		int total = 0;
		for(String[]temp:array) {
			total += temp.length;
		}
		
		System.out.println(total);
  ```
これもok
[1][0]の値として入っているため
```java
 String [][]array = {{"A","B"},{null},{"C","B","D"}};
		int total = 0;
		for(String[]temp:array) {
			total += temp.length;
		}
		
		System.out.println(total);
```
  ArrayListにはnullを入れてもNullPointerExceptionは投げられない

  ```java
  ArrayList<String>list = new ArrayList<>();
  list.add(null);
  System.out.println(list.get(0));
  
  ```
  

# 配列型変数宣言
コンパイルエラーにならない宣言
```java
int [] a;
int b [];
int [][] c;
int d [][];
int [] e[];
int [][] f[];
```

  コンパイルエラーになる宣言
  ```java
  int[2]a;
  ```
 ::: note warn
  配列型変数に要素数を指定することはできない
::: 

# 配列インスタンス

コンパイルエラーになる宣言
```java
int [] array1 = new int [];　//要素数を指定していない
int [] array2 = new int[2.3];　//不動小数点は使えない
int [] array3 = new int[2]{}; //{}を使う場合要素数の指定はできない

int [][] array4 = new int []{} //次元数の不一致


```
:::note
要素数の指定にはint型を使う。long型は使えない
::: 

多次元配列
```java
	
		String [] arrays = new String[] {"1次元配列"};
		String [][]arrays1 = new String[][] {{"2次元配列は大かっこ２こ"}};
		String [][][]arrays2 = new String [][][] {{{"3次元配列は大かっこ３こ"}}};
		
```
Azure CLI で ubuntu のVMを起動/削除する

Azure CLI で Ubuntu のVMを起動/削除する手順を解説します。  

## サブスクリプションの指定(省略可)

```text
az account set --subscription "******-******-******-******"
```

## リソースグループの作成

```text
az group create^
 --name vm_resource_group^
 --location japaneast
```

## Ubuntu VM の起動

```text
az vm create --location japaneast^
 --resource-group vm_resource_group^
 --name ubuntu-vm^
 --image Canonical:0001-com-ubuntu-server-jammy:22_04-lts-gen2:latest^
 --size Standard_B1ms^
 --public-ip-address public_ip_01^
 --public-ip-sku Standard^
 --data-disk-delete-option Delete^
 --os-disk-delete-option Delete^
 --nic-delete-option Delete^
 --nsg nsg_01^
 --vnet-name vnet_01^
 --priority Regular^
 --nsg-rule SSH^
 --admin-username admin01^
 --admin-password SampleVM!123
```

👇下記内容が出力されるので、**publicIpAddress**を利用してSSH接続できます。  

```json
{
  "fqdns": "",
  "id": "/subscriptions/*****-*****-*****/resourceGroups/vm_resource_group/providers/Microsoft.Compute/virtualMachines/ubuntu-vm",
  "location": "japaneast",
  "macAddress": "**********",
  "powerState": "VM running",
  "privateIpAddress": "10.0.0.4",
  "publicIpAddress": "**.**.**.**",
  "resourceGroup": "vm_resource_group",
  "zones": ""
}
```

👇SSH接続イメージ  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/ee5ba7a2-6bff-0eea-7878-7b3f87d65827.png)

## ユーザー割り当てマネージドIDによるAzureリソースへのアクセス権限付与

ユーザー割り当てマネージドIDによるAzureリソースへのアクセス権限付与する手順は下記記事参照下さい。  
[ユーザー割り当てマネージドIDによるAzureリソースへのアクセス権限付与](https://docs.saurus12.com/azure/user_manage_id)

## VM削除

```text
az vm delete^
 --resource-group vm_resource_group^
 --name ubuntu-vm^
 --yes
```

## リソースグループの削除

```text
az group delete^
 --name vm_resource_group^
 --yes
```

## 👇関連記事

- [Azure VM で Docker イメージを作成して Azure コンテナー レジストリ に登録する](https://docs.saurus12.com/azure/docker_registory)
- [Azure コンテナー インスタンスでコンテナー レジストリ に登録したDockerイメージを起動する](https://docs.saurus12.com/azure/docker_container_create)
- [ユーザー割り当てマネージドIDによるAzureリソースへのアクセス権限付与](https://docs.saurus12.com/azure/user_manage_id)

## 👇参考URL

- [Azure CLI を使用した Azure リソース グループの管理](https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/management/manage-resource-groups-cli)
- [az vm](https://learn.microsoft.com/ja-jp/cli/azure/vm?view=azure-cli-latest)

[keywords]  
Azure CLI Ubuntu

[Azure CLI で Ubuntu のVMを起動/削除する](https://docs.saurus12.com/azure/ubuntu_vm)

更新日:2024年01月23日
Mac 広げてしまったターミナルのウインドウサイズを一発で戻すコマンド

<br><b>
見易くするために、マウスドラッグでウインドウを広げるときがあります。そんな時、</b>

# そのターミナルで 次のコマンドを叩く

```sh:# resize to 80x24
echo '\e[8;24;80t' 
```

```sh:または
printf '\e[8;24;80t' 
```

_（`echo` , `printf`どちらも、zshの組み込みコマンドです）_


`24`行、`80`列の数値を書き換えると、任意のサイズに変更できます。

<br>alias仕込んでおくと便利。

```sh
alias reset_size="echo '\e[8;24;80t'"  
```

# そもそものデフォルトのウインドウサイズを変更する場合は

「ターミナル」メニュー → 「設定...」 →「ウインドウ」タブにあるウインドサイズの`列`、`行`を変更します。



# 最大サイズは？

当方の WQHD(2560×1440)のモニターで ターミナル ウインドウを最大限広げると、317列×81行となりました。



# macOS以外でも

ANSIエスケープシーケンスであるため、Unix, Linux系OSなら使えると思いますが、echoコマンドに-eオプションが必要な場合があります。BSD / SystemV系の違いか、シェルの違いか??

```sh
echo -e '\e[8;24;80t'
```

_WindowsOSのコマンドプロンプトでは、使えないっぽい。_

<br><br><b>以上</b>
Mac ディスク容量の大きいフォルダを確認するコマンド

# 次のコマンドをコピペしてTerminalで実行します

```sh
sudo du -gxd 5 / | awk '$1 >= 10{print}' | sort -k 2
```

```terminal:実行例
% sudo du -gxd 5 / | awk '$1 >= 10{print}' | sort -k 2
Password:

759	/
40	/Applications
33	/Library
30	/Library/Developer
28	/Library/Developer/CoreSimulator
28	/Library/Developer/CoreSimulator/Images
394	/System
    :    :
```

_使用中のディスク容量やフォルダの総数によると思いますが、1〜2分かかります。_

## 引数の意味は,

- `du -g` :  ギガバイト単位で出力
- `du -x` : 外付けディスクは見ない（内蔵ディスクのみ）
- `du -d 5` : パスの階層は5段まで
- `awk '$1 >= 10'` : 10ギガバイト以上に絞る
- `sort -k 2` : パス名でソート<br>（`sort -k 1nr`とすれば、容量の大きい順となる） 


<br><br><b>以上</b>
福水先生のカーネル法入門を読む前の事前準備

# はじめに

福水先生の著書「カーネル法入門」を読むと、結構難しい概念がポンポン出てきます。そこで、本記事ではカジュアルに「カーネル法入門」の難しい概念の補完を試みます。備忘録として残していくので完成は遅いかもしれません。


# Mercerの定理の準備

Mercerの定理あたりで、しれっとHilbert Schmidt積分作用素が使われています。Hilbert Schmidt積分作用素の知識を補完しようとすると、散らばった情報をまとめる必要があります。というのも、Hilbert Schmidt積分作用素は、コンパクト自己共役作用素の重要な例なのですが、具体例として便利すぎるせいで、線形作用素の各節の中に結構散らばってしまっているんです。さらにめんどくさいのが、コンパクト自己共役作用素を理解することが結構労力が必要なんです。そこで、ひとつの資料にまとめましたので、ご活用頂ければ幸いです。ついでにMercerの定理の証明で用いるDiniの定理も付録に載せておきました。

https://github.com/Hideki105/mathematical-engineering/blob/main/解析数理工学/hdk/再生核ヒルベルト空間/Preparation_for_Reproducing_Kernel_Hilbert_Space.pdf


# カーネル回帰とサポートベクターマシン

カーネル回帰とサポートベクターマシンについてわかりやすく解説しています。
実は、この著者は、私を数理科学の沼に引き込んだ偉大な方です。

https://tiskw.github.io/writings.html

# 確率過程の最良予測

2次のモーメントが有限な確率過程の最良予測とガウス過程回帰の平均が一致するという面白い事実を紹介しています。

https://mathlog.info/articles/S2a5cmaqMIvp1xQterAT



# 統計的学習理論

下の図のように、学習理論で囲まれている範囲が、統計的学習理論です。
数理統計の厳密評価と統計的学習理論の境界は曖昧だそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139678/6943422c-7df5-3332-fd8e-8364787b668d.png)


赤穂先生の「カーネル多変量解析」と鈴木先生の論文では、統計的学習理論で用いる道具について直感的な理解を促進するように書かれている印象を持ちました。福水先生の「カーネル法入門」では、それに厳密な証明を与えてくれた印象です。金森先生の「統計的学習理論」は道具の使い方を具体例をもとに教えてくれている印象です。M. Mohri「Foundations of Machine Learning」は何でも書いてある印象です。この本は、とにかくすごい。


赤穂先生と鈴木先生→福水先生→金森先生→M. Mohriの順で読むと理解が捗ります。


鈴木大慈先生の資料

https://www.jstage.jst.go.jp/article/jsiamt/23/3/23_KJ00008829130/_article/-char/ja/

https://ibisml.org/archive/ibis2012/ibis2012-suzuki.pdf


松井先生の資料

https://speakerdeck.com/kmatsui/tong-ji-de-xue-xi-li-lun-du-mi-chapter-1

https://speakerdeck.com/kmatsui/tong-ji-de-xue-xi-li-lun-du-mi-chapter-2?slide=78

https://speakerdeck.com/kmatsui/tong-ji-de-xue-xi-li-lun-du-mi-chapter-3

usaitoさんの資料

https://usaito.hatenablog.com/entry/2019/04/25/201214

https://usaito.hatenablog.com/entry/2019/05/09/142551

https://usaito.hatenablog.com/entry/2019/05/16/174440


https://whyitsso.net/math/statistics/Chernoff_bound.html

https://www.di.ens.fr/~fbach/ltfp_book.pdf



# おわりに

数理科学は完全独学で学んでいるので、間違いがあるかもしれません。間違いを見つけた際は、やさしくご指摘頂ければ幸いです。また、福水先生の著書「カーネル法入門」を土日に輪読会する方を募集中です！
DatabricksのSQLにおける変数の活用

Databricksランタイム14.1でサポートされていたとは。

https://learn.microsoft.com/ja-jp/azure/databricks/sql/language-manual/sql-ref-variables

以前は`spark.conf`を使ってました。上の機能を使うとSQLだけで完結できます。

https://qiita.com/taka_yayoi/items/e447ba254a19bcd8b648

文字列の変数`username`を宣言して、自分のユーザー名を文字列置換したものを変数に設定しています。

```sql:SQL
-- 変数を宣言
DECLARE OR REPLACE username STRING;
-- ユーザー名からピリオド、@を除外
SET VAR username = (SELECT regexp_replace(current_user(), "(\\.|@)", "_"));
```

`SELECT`でアクセスできます。

```sql:SQL
SELECT username;
```

![Screenshot 2024-01-18 at 17.32.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/31e02f35-5fdb-9224-bdee-746d9888bd44.png)

[`IDENTIFIER`句](https://learn.microsoft.com/ja-jp/azure/databricks/sql/language-manual/sql-ref-names-identifier-clause)を用いることで、データベース、テーブル名に文字列変数を指定できます。

```sql:SQL
--- quick_start カタログに新規スキーマを作成
CREATE SCHEMA IF NOT EXISTS IDENTIFIER(username)
COMMENT "自分用のUnity Catalogスキーマ(データベース)";
```

変数を用いてデータベースを作成することができました！
![Screenshot 2024-01-18 at 17.35.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/0d39632e-4372-4c82-c4bc-fae6554bed29.png)


### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
定時帰る術-スタティックルーティング削除（要注意）

## 背景
誰かが間違って、いらないスタティックルーティングを入れてしまった。
結果的には↓になる。
```
[root@momo ~]# ip route
0.0.0.0/2 via 192.168.100.1 dev ens34 proto static metric 100
default via 192.168.100.254 dev ens34 proto static metric 100
```
## コマンド準備
「ip route」の結果をみて、「この作業が一瞬で終われる」を思いながら、↓のコマンドを準備した。

```
ip route 
nmcli c mod ens34 -ipv4.routes "0.0.0.0/2 192.168.100.1"
nmcli c u ens34
ip route
```
## 作業
実際に作業に行ってみたら、↑のコマンドでうまくいけなかった。
```
# ip route
0.0.0.0/2 via 192.168.100.1 dev ens34 proto static metric 100
```
マジかと思って、grepしてみたら、ヒットしなかった。
```
# grep "0.0.0.0" /etc/sysconfig/network-scripts/route-ens34
```
## トラブルシューティング
**①一応XX作業なので、少し焦って、「history」で誤ったコマンドを探そうとしたけど、見つからなかった**

**②「ip route」の仕様も忘れて、↓を実行した**
```
# ip route del 0.0.0.0/2 via 192.168.100.1
```
これで「ip route」を確認すると、「0.0.0.0/2 via 192.168.100.1 dev ens34 proto static metric 100」が削除された。
「nmcli c u ens34」を実行してみたら、「ip route」の仕様通り、設定が元に戻った。

**③「/etc/sysconfig/network-scripts/」配下にある全ファイルをgrepしてみたら、怪しいところがなさそう**
```
# grep "0.0.0.0" /etc/sysconfig/network-scripts/
```

**④なんとなく冷静になって、「/etc/sysconfig/network-scripts/route-ens34」とルーティングテーブルを比較してみた。**
50何行もあったが、目視で犯人が発見

ネットワークマスクが「/2」で、対象ネットワークが全然別だ
```
ADDRESS=10.10.10.0
NETMASK=192.0.0.0
GATEWAY=192.168.100.1
```
コマンドを編集して、対象ネットワークを「10.10.10.0」を指定して、削除できた!!
```
nmcli c mod ens34 -ipv4.routes "10.10.10.0/2 192.168.100.1"
```

## 振り返

①ルーティング追加コマンドがそのままで「/etc/sysconfig/network-scripts/route-xxx」に追記される

②当然だけど、ルーティングテーブルに表示されるのがネットワークアドレス

③↓のコマンドは、「/etc/sysconfig/network-scripts/route-xxx」を操作できる。
（恐らくnmcliは「/etc/sysconfig/network-scripts/」配下にある全ファイルを操作できると思われる）
```
nmcli c mod xxx +ipv4.routes/-ipv4.routes　"x.x.x.x/x x.x.x.x"
```
**「-ipv4.routes　"x.x.x.x/x x.x.x.x"」はルーティングテーブルではなく、「/etc/sysconfig/network-scripts/route-xxx」の中身を探して、完全一致の場合だけ削除する。**
**スタティックルーティングの事前調査として、「/etc/sysconfig/network-scripts/route-xxx」を確認して、その結果で誤ったルーティング設定を探して、コマンドを作成する**
④「ip route」は「/etc/sysconfig/network-scripts/route-xxx」を触らず、ルーティングテーブルに対する操作だけなので、再起動すると設定が戻る

⑤↓でサブネットマスクで計算すると、ネットワークアドレスが確かに「0.0.0.0」なので、「ip route」で「0.0.0.0/2 via 192.168.100.1」に表示される
```
ADDRESS=10.10.10.0
NETMASK=192.0.0.0
GATEWAY=192.168.100.1
```
以上
Cursorエディタのポートの転送機能が使えなくて苦労した件

VSCodeからCursorエディタに移行したときに下記現象が発生しました。
表題のとおりにCusorエディタでもポートの転送機能を試した際にエラーが発生して使えませんでした。
しかし、解決方法が分かったので、誰かの助けになればと思います。

# ポートの転送機能
VSCodeにはポートの転送機能があります。詳しくは[youtoyさんの記事](https://qiita.com/youtoy/items/56e48c84d6a2f0549155)をご確認ください。
この機能をCursorエディタで使う場合私の環境下ではこのようなエラーが発生しました。

:::note warn
localhost を転送できません:3000。spawn /Applications/Cursor.app/Contents/Resources/app/bin/code-tunnel ENOENT

![スクリーンショット 2024-01-18 17.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b4eac55e-052f-bb3d-7062-247f4e19c733.png)
:::

# 解決方法
解決方法は[こちらのissue](https://github.com/getcursor/cursor/issues/1160)に記載されていました。
WindowsもMacもほぼ同じやり方で対応可能です。

VSCode側の`code-tunnel`というファイルをCursorエディタ側にコピーすれば動くようになりました。

## Step.1
VSCode側のcode-tunnelファイルをコピーする

### Windowsの場合

C:¥Users¥ユーザー名¥AppData¥Local¥Programs¥Microsoft VS Code¥bin¥code-tunnel

### Macの場合
/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code-tunnel

## Step.2
コピーしたcode-tunnelファイルをCursor側にbinフォルダに貼り付ける

![スクリーンショット_2024-01-18_17_26_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/fc233506-13fd-5ab4-a1c4-d9b4ea67d6a1.png)

### Windowsの場合
C:¥Users¥ユーザー名¥AppData¥Local¥Programs¥cursor¥bin

### Macの場合
/Applications/Cursor.app/Contents/Resources/app/bin

これで無事に起動できました。

![スクリーンショット 2024-01-18 17.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b611ec7f-7bdf-4a78-5f3d-e21e02430d20.png)

## まとめ
今までポートの転送機能を使うためだけにVSCodeを起動していましたが、
原因がわかってCursorエディタ一本で運用できるようになりました。

システム化のご検討やご相談は弊社までお問い合わせください。

https://www.i-enter.co.jp
GitHubでMainブランチを保護する方法

# mainブランチを保護する
mainブランチはpull requestを使って編集するものです。  
直接編集することはしません。  
なので、編集を拒否する設定をします。

## リポジトリのsettingsにアクセス
github.comでリポジトリを開いて、画面上部の「Settings」をクリックしてください。
[![Image from Gyazo](https://i.gyazo.com/b6dfdce568da207f30089220c1b63c4b.png)](https://gyazo.com/b6dfdce568da207f30089220c1b63c4b)

## Branches設定にアクセス
画面左側のメニューから「Branches」をクリックしてください。
[![Image from Gyazo](https://i.gyazo.com/b52851ff91414797abcd2cff540127c8.png)](https://gyazo.com/b52851ff91414797abcd2cff540127c8)

## ルールの追加
「Add branch protection rule」をクリック
[![Image from Gyazo](https://i.gyazo.com/14b3fa5ed9c874abfc77815e074f468e.png)](https://gyazo.com/14b3fa5ed9c874abfc77815e074f468e)

## 情報の入力
Branch name patternに「main」と入力します。  
「Require a pull request before merging」にチェックを入れてください。  
デフォルトで「Require approvals」にチェックが入っています。  
プルリク承認前にコードレビューを必須にしたい場合は残してください。  
[![Image from Gyazo](https://i.gyazo.com/5d6fcc4d146ca2b6c432e75c521f05b3.png)](https://gyazo.com/5d6fcc4d146ca2b6c432e75c521f05b3)

一番下まで行き「Create」をクリックします。
[![Image from Gyazo](https://i.gyazo.com/654ff465546077d55dd8d6c197ee456b.png)](https://gyazo.com/654ff465546077d55dd8d6c197ee456b)

以上
Power Automate: Invalid Connection


珍しくSalesforce以外のツールで遊び始めると最初からつまずきます。何をやってもInvalid Connectionエラーです。難しすぎて分からないです。


+ [Power Automate: Invalid Connection](https://manueltgomes.com/microsoft/powerautomate/power-automate-invalid-connection/)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/de1edc67-f176-dbb1-47ce-3a09e8da1470.png)


もしかして、ここのリンク？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/6074734b-52cb-c443-2c1c-c188ab768a55.png)


# Invalid connection, please update your connection to load complete details

新規作成できなくなりましたねぇ。やっぱり難しすぎだな。
【Web開発入門】localStorageとはなんぞや？Cookieとなにが違うんだい？

## 背景
仕事であるデータの保持期間について教えてほしいとの調査依頼がきました。
そこで社会人1年目のペーペーの自分はlocalStorageというものを知ったのでまとめようと思います。

## 目次
1. [localStorageってなんぞや?](#localstorageってなんぞや)
2. [どんなデータを保持できるのか](#どんなデータを保持できるのか)
3. [Cookieとの違い](#cookieとの違い)
4. [簡単な使用例](#簡単な使用例)
5. [使用するときの注意点](#使用するときの注意点)
6. [おわりに](#おわりに)

## localStorageってなんぞや?
Web開発を行う上で、ユーザーのブラウザにデータを保存する方法として、localStorageというものがあります。localStorageは、HTMl5の一部として導入されたWebストレージAPIの一つで、ユーザーのコンピュータ上にデータを長期間保存することができる仕組みです。これにより、サーバーにデータを送ることなく、ローカル環境でデータを保持できます。

> ユーザーのコンピュータ上にデータを長期間保存できる仕組み

ぐだぐだ書きましたがこんな感じの理解で大丈夫です。

## どんなデータを保持できるのか
localStorageは、Webアプリケーションでデータをキーと値のペアとして保存します。
保存するデータは文字列の形式で保存されるので、オブジェクトや配列などの複雑なデータは直接保存はできないようです。

でもオブジェクトや配列を保存したい...

そんなときは`JSON.stringify()`を使いましょう。
JSON形式の文字列に変換してくれます。
逆にJSON形式の文字列からオブジェクトに戻したい場合は`JSON.parse()`を使えばOKです。

使用例↓
```JavaScript
var user = {
  name: 'Alice',
  age: 25
};

var jsonString = JSON.stringify(user);
console.log(jsonString); // 出力: {"name":"Alice","age":25}
var jsonString = '{"name":"Alice","age":25}';
var userObject = JSON.parse(jsonString);
console.log(userObject); // 出力: { name: 'Alice', age: 25 }

```

## Cookieとの違い
* 容量: localStorageはCookieよりもはるかに大きなデータを保存できます。
一般にlocalStorageは5MB程度まで、Cookieは約4KBまでです。

* サーバーへの送信: Cookieは毎回のHTTPリクエストに含まれ、サーバーに送信されますが、localStorageのデータはクライアントサイドに留まり、サーバーには自動的には送信されません。

* 有効期限: Cookieには有効期限を設定できますが、localStorageのデータは明示的に削除するまで残ります。

* インターフェース: localStorageはシンプルでモダンなAPIを提供しているため、データの取得と保存が容易です。

## 簡単な使用例
JavaScriptでlocalStorageの簡単な使用例を示します。

localStorageはWeb Storage APIの一部であり、ウェブブラウザのグローバルスコープに既に存在しているオブジェクトなので定義やインポートは不要です。
```JavaScript
// データをlocalStorageに保存する
localStorage.setItem('myKey', 'myValue');

// データを取得する
var value = localStorage.getItem('myKey');
console.log(value); // 出力: myValue

// データを削除する
localStorage.removeItem('myKey');
```

## 使用するときの注意点
localStorageを使用する際の注意点です。

* セキュリティ: localStorageは平文でデータを保存するため、重要な情報や個人情報は保存しないでください。めちゃくちゃ簡単に見れるので本当に気を付けましょう。
* データの永続性: localStorageに保存されたデータは、意図的(ブラウザのキャッシュクリアやプログラム)にクリアしない限りほぼ永続的に残るので管理にも注意が必要です。
* 同期的: localStorageのAPIは同期的です。つまりlocalStorageへのデータの読み書きが行われるとき、その操作が完了するまで他のスクリプトがブロックされます。大量のデータを扱う際には注意が必要です。
* ブラウザの互換性: ほとんどの現代のブラウザではlocalStorageがサポートされていますが、非常に古いブラウザでは使えないことがあります。
(ほぼ気にしなくていいです)

以下はブラウザと対応しているバージョンです。
| Browser             | Version |
|---------------------|---------|
| Chrome              | 4       |
| Edge                | 12      |
| Firefox             | 3.5     |
| Opera               | 10.5    |
| Safari              | 4       |
| Chrome Android      | 18      |
| Firefox for Android | 4       |
| Opera Android       | 11      |
| Safari on iOS       | 3.2     |
| Samsung Internet    | 1.0     |
| WebView Android     | 37      |

↓参照元

https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7


## おわりに
つたない文章でしたが、読んでいただきありがとうございました。
なにか間違っている点があれば、コメントでご指摘お願いします。
AngularDartでFutureのDelayedがnot foundになる

# はじめに

弊社にぽつぽつ存在するAngularDartで書かれたサービスに困ったのでまとめます

# 問題

ドキュメントをみて以下のような処理を実装しました

```dart
    await Future.delayed(new Duration(milliseconds: 10000), () {
      print("SLEEP");
    });
```

しかし実行すると以下のエラーが出ました

```
NoSuchMethodError: method not found: 'delayed'
Receiver: ""
Arguments: [Instance of 'Duration', Closure 'InputForm_onSubmit2_closure']
```

# 解決方法

以下のようにしたらうまく行きました

```dart
    await new Future.delayed(new Duration(milliseconds: 10000), () {
      print("SLEEP");
    });
```

# おわりに

とにかく辛いなと感じていますが、Dartはイケてるなと思ってます
TypeScriptがかければそんな大変ではなさそう！！

# 参考

https://api.dart.dev/stable/1.24.3/dart-async/Future/Future.delayed.html
「現代数理統計学の基礎」演習問題解法メモ　第4章問7～12

できるだけヤコビアンの計算も略さずに記載しています。
![第4章問7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/2bf78b39-e06a-3af1-acb5-207156e94262.jpeg)
![第4章問8　P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/c67ae1ff-a2bd-de10-ec4e-b280ee2a5536.jpeg)
![第4章問8　P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/4798e30c-5ede-6bf7-3fdb-747763b99e38.jpeg)
![第4章問8　P3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/832f6ce2-b648-be19-fba4-58db6b3b9735.jpeg)
![第4章問9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/62398048-5009-aca3-d7b1-d9dd13d433c9.jpeg)
![第4章問10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/4cf95d6c-0246-07c4-3045-1a87de705cc6.jpeg)
![第4章問11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/ae49a1bc-4a91-33b8-2be4-e8ed55f3b0aa.jpeg)
![第4章問12　P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/3776f56f-3099-0dda-d31d-d9c01d8b2f35.jpeg)
![第4章問12　P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/89151494-9661-893a-a2f6-eb8e480bcf4b.jpeg)
![第4章問12 P3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/4a429677-ab2b-ccd2-3e56-aec95d541e3b.jpeg)
【zsh】zsh上でnode version manager が動作しない場合の対処法

nodeのプロジェクトで`yarn install`しようとした際、nodejsの20.11.0(現時点でのLTS版)を使ってくれ! というエラーが出ました。ただこれより前にnode version manager(以下nvm)を使って入れたはず... と困ってしまったので、他に困ってしまっているかもしれない方に対処法を書きました。

(本当は病み上がりなので寝ていなければなのですが、すぐに忘れてしまうので...)

# 原因 + 修正

わかってしまえば簡単なのですが、前に入れたときはbashでインストールしていたのでzshが認識できていなかったようです。

stackoverflowにて対処法が書いてありました。

https://stackoverflow.com/questions/16904658/node-version-manager-install-nvm-command-not-found

.zshrcに

```.zshrc
source ~/.nvm/nvm.sh
```

を追加すれば自動で読み込まれるらしい。

追加する場所はどこでもいいですができる限り上が分かりやすいかと。

保存したらexitでbashに戻ってから再度zshを立ち上げれば正常に使えるはず。
WebページでKaTeXを使う

## やりたいこと
自分で作ったHTMLのWebページでKaTexがパースされるようにしたい。
ページ読み込みのタイミングではなく、ユーザーのアクションに合わせてパースされるようにしたい。

## 背景
サーバー上のcsvをjavascriptで読み取ってhtmlに表示するというwebページで、KaTeXを埋め込む必要があるということになったのですが、[公式HP](https://katex.org/docs/browser)のStarter Templateを使おうとしたら上手くいきませんでした。
今回はkatex.jsをサーバーに置いて呼び出す方法で対応することになったので、備忘録として書きます。

## 準備
[こちら](https://github.com/KaTeX/KaTeX/releases)からzipをダウンロードして、中のkatexフォルダをサーバーにアップロードしておきます。

## コードを書く
HTMLのheadタグ内にkatex.cssとkatex.jsへのリンクを記載します。
```HTML
<head>
    <link rel="stylesheet" href="PATH/TO/katex/katex.min.css">
    <script defer src="PATH/TO/katex/katex.min.js"></script>
    <script defer src="PATH/TO/katex/contrib/auto-render.min.js"></script>
</head>
```
次にjavaScriptでイベントを定義して、イベントが発火したときにKaTeXがパースされるようにしたいと思います。ページ内に最初から数式が入力されている場合はイベントを自作する必要はなく、DOMContentLoaded等を使えばいいです。今回のケースでは最初からページに数式があるわけではなく、ユーザーアクションによってcsvが読み込まれ、そのcsvに数式が記載されている、というケースでしたのでこのような仕組みにしました。
```js
//javaScript

var katex_event = new Event('katex');

// katexイベントを発生させる関数
function triggerKatex() {
    document.dispatchEvent(katex_event);
}
```
ユーザーアクションと連動してtriggeKatex()が動き、イベントが発火するという流れです。
このイベントに対応してKeTeXが表示されるようにHTMLのbodyタグに以下を追加します。
```html
<body>
    ...(HTMLページの中身)...

    <script>
        document.addEventListener("katex", function() {
            renderMathInElement(document.body, {
                delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "\\[", right: "\\]", display: true},
                    {left: "$", right: "$", display: false}
                ]
            });
        });
    </script>
</body>
```
delimiters内のdisplayをtrueにするとブロック表示になり、falseにするとインライン表示となります。
試していませんが、おそらく自前でdilimiterを指定することもできるので、必要に応じて追加や削除を行ってください。
【websocket通信】チャットサービスでの欠落

こんにちは、私は機械学習のエンジニアとして週3、4で勤務しようとフリーランスエージェントを利用しています。

最近の面談で直近のPJでの技術的課題とその解決について聞かれ、うまく説明できなかったwebsocketでのチャット欠落問題について備忘録として残しておきます。

---
私はチャット機能のあるサービスの開発に当時携わっておりまして、無茶な工数と引き継ぎで炎上しつつもなんとか第一期リリースを終えた時にそれは起きました。

顧客から「チャットが表示されていたのに後から見直すとある時間の複数のチャットだけ無くなっている」との障害報告が来ました。

このチャットのやり取りをしている間は正常に表示できているところがややこしいところで、
##### 1.websocketはブラウザ間でハンドシェイクして通信している
##### 2.チャットのDBへの保存はサーバーへの通信で行なっている
と**二種類のレイヤーで通信している**ことに起因していると考えました。
チャットのやり取りが成功しているため。1の通信は成功していて2で失敗しているということですね。

対応策としては以下を実施しました。
#### 1.サーバーのログを見てもおかしなログはなかったので、AWS側ではじいたとみてログレベルを上げる。（料金がかかるがいか仕方なし）
#### 2.websocketで新しいチャットが来るたびにチャットが欠落していないか確認。該当チャットが欠落の場合挿入する処理を追加

:::note warn
2の暫定対応でそれ以来発生しなくなったのですが、根本的な原因が何かを面談で説明できず微妙な雰囲気に。。。
:::

そこで、改めてわからないなりにどのようなケースがあるか考えてみると
- フリーWi-Fiに接続したところ、サーバー間通信でセキュリティ上の問題が生じ、接続が拒否されたが、websocket通信はブラウザ間なので正常だった。
- トンネルなどを通過していて、websocketのみ通信が再接続され、サーバーへの通信は失敗した。

上記2ケースが考えられるかなと思いました。

次の面談ではスラスラ説明できるようにします！
面談で聞かれたけど答えられなかったシリーズはこれからも残していこうと思います。
jax.vmapの使い方

# はじめに
- jaxという並列実行をするためのpythonライブラリがあるようである
- 特に一番基本のvmapの使い方を簡単にまとめておく

# vmapのメリット
- 基本的にはnp.vectorizeみたいに使える。
- CPU, GPU, TPUで並列実行できるようにコンパイルされる。

# 基本的な使い方
使い方はほぼnp.vectorizeと同様。
```python
import jax
import jax.numpy as jnp

# 並列実行したい関数
def multiply(x, y):
    return x * y

# jax.vmapを使用してmultiply関数をベクトル化
# in_axesは各入力に対するバッチ次元を定義する
vectorized_multiply = jax.vmap(multiply, in_axes=(0, 0))

x = jnp.array([1, 2, 3, 4])
y = jnp.array([10, 20, 30, 40])

result = vectorized_multiply(x, y) # 並列実行

print(result)
# 出力結果は[10,40,90,160]
```

# @jax.vmapを使った書き方
並列化する軸はデフォルトで0が指定される。
軸を指定する必要がない場合は@jax.vmapでデコレートするだけでOK。
関数「vectorized_multiply」を別に作る必要がないのでスマート。

```python
import jax
import jax.numpy as jnp

# 並列実行したい関数
@jax.vmap
def multiply(x, y):
    return x * y

# 入力データ
x = jnp.array([1, 2, 3, 4])
y = jnp.array([10, 20, 30, 40])

# ベクトル化された関数を適用
result = multiply(x, y)  # 並列実行

print(result)
# 出力結果は[10, 40, 90, 160]
```


# 複雑な構造に関する並列化
次のような複雑な構造に関する並列実行もできる。これすごい。

```python
import jax
import jax.numpy as jnp
import chex

# 並列実行したい関数
def multiply(x, y):
    return x * y.c.u

# jax.vmapを使用してmultiply関数をベクトル化
# in_axesは各入力に対するバッチ次元を定義する
vectorized_multiply = jax.vmap(multiply, in_axes=(0, 0))


@chex.dataclass(frozen=True)
class DataClass1:
  u: chex.Array  
  v: chex.Array  

@chex.dataclass(frozen=True)
class DataClass2:
  a: chex.Array  
  b: chex.Array  
  c: DataClass1  

x = jnp.array([1, 2, 3, 4])
y = DataClass2(
    a=jnp.array([10,20,30,40]), 
    b=jnp.array([10,20,30,40]), 
    c=DataClass1(
        u=jnp.array([1,2,3,4]),
        v=jnp.array([10,20,30,40]),
    ),
)

result = vectorized_multiply(x, y) # 並列実行


print(result)
# 出力結果は[1,4,9,16]
```

# おわりに
- jax.vmapの使い方は簡単。
- ただjaxを使いこなすのは結構難しい。。覚えないといけないことは次の通り。
    - **型付け**：コンパイルされるので、それなりに型付けしないといけない
    - **ループ構造**：jax.lax.fori_loop, jax.lax.while_loop, jax.lax.scan
    - **プロセス並列化**：jax.pmap
    - **並列化の引数固定**：functools.partial, @functools.partial
    - **その他**：通常の関数・バッチ処理の関数が混ざるので、関数が普通の1個の値をとるのか、配列をとるのか、引数なのかをよく見わけないといけない（ソースコードにコメントを積極的に書き残そう）
AWS SQSのキューの保持期間についての備忘録

### Amazon Simple Queue Service（SQS）のキューの保持期間について

キューにメッセージが送信された後、そのメッセージがキュー内に保持される期間を指します。キュー内のメッセージはこの期間が経過すると自動的に削除されます。保持期間はキューごとに設定され、メッセージごとに異なる保持期間を持つことができます。


#### デフォルト値:

SQSキューを作成すると、デフォルトでメッセージの保持期間は4日間に設定されています。つまり、メッセージがキューに送信された後、4日間はそのメッセージがキュー内に保持され、その後自動的に削除されます。
#### 最小・最大値:

保持期間の最小値は最小で1分、最大値は最大で14日間です。これは、メッセージが保持される期間の範囲を示しています。
#### メッセージごとのカスタム設定:

SQSでは、個々のメッセージごとに保持期間をカスタマイズすることも可能です。メッセージを送信する際に MessageAttributes を使用して、特定のメッセージに対して保持期間を指定できます。

```json
{
  "MessageBody": "Your message content.",
  "MessageAttributes": {
    "RetentionPeriod": {
      "DataType": "Number",
      "StringValue": "3600"  // 保持期間を秒単位で指定（例: 1時間）
    }
  }
}
```
#### 影響と注意事項:
保持期間が経過したメッセージは削除され、再キューイングされません。メッセージを再処理したい場合は、再度送信する必要があります。
保持期間が短いと、メッセージがすぐに削除されるため、それより前に処理されることがないか検証する必要があります。
Amazon Redshift Spectrumとは？の備忘録

### Amazon Redshift Spectrumとは？

Amazon Redshiftのデータウェアハウスサービスにおいて、分散型クエリエンジンを使用してAmazon S3内のデータを直接クエリできる機能を提供するサービスです。これにより、Amazon Redshiftのクラスタ内にデータをロードせずに、Amazon S3に格納されているデータをクエリおよび分析できます。

主な特徴と機能

#### 外部テーブル:

Redshift Spectrumでは、外部テーブルを定義してAmazon S3に格納されているデータを仮想的にRedshiftに統合します。外部テーブルは、Amazon S3のデータのメタデータやスキーマ情報を保持します。
#### クエリ実行:

Redshift Spectrumを使用すると、Amazon Redshiftクラスタ内でSQLクエリを実行できます。このクエリは、Amazon S3内のデータに対して直接実行され、結果をRedshiftクラスタに返します。データはクエリ発行時に読み込まれ、Amazon S3に格納されたままです。
#### 分散型処理:

Redshift Spectrumは、データを分散して処理し、大規模なデータセットに対して迅速にクエリを実行できるように設計されています。これにより、パフォーマンスの向上が期待できます。
#### 異種データフォーマットのサポート:

Redshift Spectrumは、Amazon S3に格納されたデータが異なるデータフォーマット（Parquet、ORC、Avro、JSONなど）であってもサポートします。これにより、様々なデータソースを統合してクエリできます。
#### コスト効果:

Redshift Spectrumは、クエリ実行時にのみAmazon S3上のデータを読み込むため、データのロードやストレージコストを最小限に抑えつつ、必要なときにデータにアクセスできるメリットがあります。

### 主な使用目的

#### 大規模なデータセットの分析:

Redshift Spectrumは、Amazon S3に格納された大規模なデータセットに対してクエリを実行できるため、データウェアハウスのデータを拡張し、過去のデータや外部データなどにもアクセスできます。これにより、ビジネスインテリジェンスや分析のニーズに柔軟に対応できます。

#### 非構造化データ:

Redshift Spectrumは非構造化データをサポートしており、JSON、Parquet、Avroなどのフォーマットに対してクエリを実行できます。これにより、セミ構造化データや階層的なデータ構造を含むデータにも対応できます。
#### 構造化データ:

同様に、Redshift Spectrumは構造化データもサポートしています。CSV、TSV、または他の通常のテーブル形式のデータもクエリ可能です。これにより、従来のデータウェアハウスの形式に従ったデータも利用できます。
#### 複数のデータフォーマットの混在:

同じAmazon S3バケット内で複数のデータフォーマットを混在させて保存することも可能です。Redshift Spectrumは異なるデータフォーマットを理解し、それらをクエリできます。
ディープロ Python3エンジニア認定基礎試験 解いてみた

今回は以下の模擬試験を解いてみました。
難易度は中程度らしく、本番試験よりはやや易しいようです。
https://diver.diveintocode.jp/dive_into_exam/1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663180/1c504cb6-e4e6-6ad2-ee10-14c5ca215f7b.png)


残念ながら、不合格でした。
あと、数問正解すれば合格ラインのようです。。。
以下に間違えた箇所の復習を記載します。

## 見直し
【辞書型】
```ruby:
dic = {'Noro': 1, 'Nakao': 2, 'Miyaoka': 3}

dic['Miyaoka'] += 1

print(dic)
```
```ruby:実行結果
{'Noro': 1, 'Nakao': 2, 'Miyaoka': 4}
```
【多次元配列】
```ruby:
num = [[1, 2, 3, 4, 5],
       [6, 7, 8, 9, 10]]

col = [row[2] for row in num]

print(col)
```
```ruby:実行結果
[3, 8]
```
1.変数numには、listが多重で代入されている。（いわゆる多次元配列）
2.変数colには、for文でnumの要素をrowにコピーして、そのrowの2番目を出力。

【計算】
```ruby:
a = 3
b = 4

c = 3.0 + b, 5 * a

print(c)
```
```ruby:実行結果
(7.0, 15)
```
【zip】
```ruby:
dic = [
    ['Noro', 'Nakao', 'Miyaoka'],
    ['Kimura', 'Miyashita', 'Shibata'],
    ['Matsumoto', 'Tanaka', 'Ivan'],
]

print(list(zip(*dic)))
```
```ruby:実行結果
[('Noro', 'Kimura', 'Matsumoto'), ('Nakao', 'Miyashita', 'Tanaka'), ('Miyaoka', 'Shibata', 'Ivan')]
```
:::note info
*（アスタリスク）による位置引数のタプル化：
アスタリスクを付けることで可変個の位置引数をタプルにまとめることができる
:::
【不変と可変】
不変(immutable): 整数、浮動小数点数、文字列、タプルなど

可変(mutable): リスト、辞書、集合など

【math】
math.pi ：3.141592653589793
mash.cos ：x ラジアンの余弦を返します。
```ruby:
>>> import math
>>> math.cos(math.pi / 5)
```
```ruby:実行結果
0.8090169944
```
【ビルドイン関数dir()】
モジュールが定義している名前を確認することができる。

【for文】
```ruby:
titles={'title1':'hoge1','title2':'hoge2','title3':'hoge3'}
 
print("出力結果:")
for k,v in titles.items():
  print(v)
```
```ruby:実行結果
hoge1 hoge2 hoge3
```

1.titlesに対して、items()メソッドで、titlesの中のキーと対応する値を同時に取得
2.それを k (key), v (value) に代入
3.vの方を出力する。

```ruby:
num_list  = [2, 4, 6, 4, 4, 2, 6]
for i in range(num_list.count(4)):
    print(i, end=' ')
```
```ruby:実行結果
0 1 2
```
1.リスト型で要素がnum_listに入っている
2.range(終了)で、num_list.count(4)は、
　num_listのリストに含まれる要素4の出現回数を数える。
　-> 4は3回出現している -> range(3)になる。
3.for i in range(3)
　print(3, end=’ ‘)
　の出力のため0, 1, 2となる。
  
print()は引数”end”に値を入れることで、末尾に何をつけるかを設定することができる。

【Pythonの変数】
**・関数内で変数に代入を行うと、その値がローカル変数のシンボル表に記録される**
・~~関数内からグローバル変数は参照することができない~~
　**→関数内からグローバル変数は参照可能**
・~~ビルトイン名のシンボル表は builins() 関数で確認できる~~
　**→ビルトイン関数のシンボル表は「import builtins → dir(builtins)」で確認できる**
・~~変数に値を代入しないで実行しようとするとTypeErrorが表示される~~
　**→変数に値を代入しないで実行しようとすると「NameError」が表示される**

 【コンパイル済Pythonファイルの拡張子】
 **pyc**
 pycファイル：Pythonでモジュールをインポートすると、拡張子pycのファイルができる。
 　　　　　　 pyファイルをコンパイルした結果のバイトコードを含むファイル。

【del】
```ruby:
dive_into_code = ['Noro', 'Nakao', 'Miyaoka', 'Miyashita', 'Shibata', 'Kimura']

del dive_into_code[:]

print(dive_into_code)
```
delで全削除することが可能。
del 変数名[:] とすると全範囲指定になる。（スライス）


【del】
```ruby:
name1,name2,name3,name4= '', 'suzuki','tanaka','sato'
selected_name = name1 or name2 or name3 or name4
print(selected_name)
```
```ruby:実行結果
suzuki
```
1.1行目が実行された時点で、name1には空文字、name2には'suzuki'が入っています。

2.orを使った時には一番初めのname1から評価されていきます。
　また、Trueになるものがきたときに後ろの評価は行わずに評価を行って
　Trueだったものを返します。


3.name1は空文字なのでFalse扱いです。
　しかし、次のname2には文字列が入っているためTrue扱いとなって、
　selected_nameにはname2の値が返されます。

4.name3,name4に関しては評価は行われません。

【シーケンスデータ型】
タプルは「immutable」であり、 アンパッキングしてアクセスすることができる。
※アンパック：複数の要素を持つものを分解して各変数に代入すること
【パブリッシャー】簡単！ Excelレポートをブラウザで公開しよう

# はじめに #
マイクロソフトエクセルで作成したレポートをイントラネットあるいはインターネット上にそのまま公開したいなってことありませんか？
Sharperlightにその機能が追加されたようなので早速試してみたいと思います。

# エクセルでレポートを作成する #
以前にSharperlight Excelアドインを使ったレポート作成記事を投稿しましたので[[↗]](https://qiita.com/Miki_Yokohata/items/c0bf5e9f4e8d86e1e3c3/)、ぜひそちらをご覧いただき、公開用のExcelレポートを準備してください。 。

# エクセルレポートの公開 #
Sharperlightリボンの`ワークブックのパブリッシュ`アイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/cdcf7c13-b709-2634-ae15-fb35f17929f2.png)
Webレポートの定義ダイアログが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0033c848-bae5-2184-5d14-96bf57e74a85.png)
**コード**や**グループ**をお好みの値に書き換えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c76d8d6c-8780-07f3-0dfb-2bd0c3f6eec1.png)
先ず`適用`ボタンをクリックして定義を保存します。そして`ビュー`ボタンをクリックしブラウザでレポートを閲覧します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/edf4a1e3-eff5-eab4-5568-e2f11843b4a8.png)
Sharperlightサービスが起動済みであるとすると、このようなWebレポートが表示されます。
イントラネットであれば直ちに部署内に公開したりするのに適しているのではないでしょうか。もちろんSharperlightサービスやユーザー設定が一般公開用に設定されていれば、公衆への公開も行えますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/759363c1-17f1-1e3b-dcba-156fa7840f41.png)
パラメータを変更すると。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6001e954-e6de-9ce9-a0f0-466a0235ef27.png)
直ちに結果も更新されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/32947e20-6ed0-9be7-e769-089badb67dce.png)

# おわりに #
個々のパソコンにしまい込まれている有益なExcelレポートの再利用やファイルでの共有の不便さ、レポートの一元管理等のニーズに答えられる一品ではないでしょうか？