OmniAICreator/Qiita-1.07M huggingface dataset:
プロファイルを使ってVScodeを他PCへ移行する

## この記事の概要

古いPCから新しいPCへVScodeの設定を引き継ぎたいときはプロファイルをエクスポートすると簡単です。
この記事ではプロファイルに含まれる内容とエクスポート・インポート方法を記載します。

## プロファイルに含まれる内容

- 一般的な設定
	- `settings.json` ファイル
- 拡張機能
- ユーザーインターフェースの状態
- キーバインディング
	- `keybindings.json` ファイル
- スニペット
	- `{language}.json` ファイル
- タスク
		- `tasks.json` ファイル

## プロファイルをエクスポートする方法

### メニューからの操作方法

未作成の場合はプロファイルを作成します。

1. ファイル
2. ユーザー設定
3. プロファイル
4. プロファイルの作成

その後エクスポートします。

1. ファイル
2. ユーザー設定
3. プロファイル
4. プロファイルをエクスポート

### コマンドパレットからの操作方法

未作成の場合はプロファイルを作成します。

1. Ctrl+Shift+P
2. Profiles: Create Profile

その後エクスポートします。

1. Ctrl+Shift+P
2. Profiles: Export Profile

## プロファイルをインポートする方法

### メニューからの操作方法

1. ファイル
2. ユーザー設定
3. プロファイル
4. プロファイルのインポート

### コマンドパレットからの操作方法

1. Ctrl+Shift+P
2. Profiles: Import Profile

## プロファイルのエクスポート先

Githubへ保管する場合とローカルファイルとして保存する場合があります。

Github gistというGithubのサービス上にプロファイルのテキストファイルが保管されます。この場合はGithubアカウントさえあれば他PCとも簡単に共有できるため便利です。

アカウントがない、または作成したくない場合はローカルファイルとして保存して他PCへ移動させれば問題ないです。

## 参考資料

[Profiles in Visual Studio Code](https://code.visualstudio.com/docs/editor/profiles)
Windows11のReact環境づくり

## はじめに
Reactを使ったWeb開発デビューにあたり、環境構築を行いました。
なお、今回は**Windows11**が対象になります。

## 1. WSL2のインストール

まず、WSL2のインストールを行ってUbuntuの環境をWindowsに用意します。

**※WSLとは**
Windows上でLinuxを動かすためのシステム。ほぼすべてのLinuxコマンドが使用できる。

**※Ubuntuとは**
Linux系のOS。「誰でも扱いやすいOS」をコンセプトに開発され、日本語対応済み、無償で使用できる。数あるLinuxディストリビューションの中でも特に人気。

wslコマンドをインストールすると、規定でそのままUbuntuがインストールされます。
```jsx
$ wsl --install
```

※Ubunts以外のディストリビューションをインストールする場合は下記を参照

https://learn.microsoft.com/ja-jp/windows/wsl/install#set-up-your-linux-user-info

Linuxのユーザー名とパスワード設定を求められるので、画面の指示に従って設定します。

次に、Ubuntuのバージョンを確認してみましょう。

```jsx
$ cat /etc/os-release
```

※なおUbunts含むパッケージは最新版を使用する場合、定期的に手動で更新する必要があります。

```jsx
$ sudo apt update && sudo apt upgrade
```

Ubuntuが入ったら作業用ディレクトリを作成します。（名前は任意）

```jsx
$ mkdir workspace
$ cd workspace
```

これからはこのディレクトリで作業をします。

## 2. asdfのインストール

**※asdfとは**

様々な言語やツールのバージョンを管理してくれるライブラリです。

ディレクトリごとに言語のバージョンを切り替えることもできます。（しかも簡単）

今回はnode.jsのバージョン管理に使っていきます。

以下のドキュメントを参考にインストールします。

(VSCodeが入っていない場合はこのタイミングでインストールしといてください)

https://asdf-vm.com/guide/getting-started.html

今回は上記のドキュメントを参照して、この手順でインストールを行いました。
```jsx
$ sudo apt-get update
$ sudo apt-get upgrade

# curlとgitをインストール
$ apt install curl git

# asdfのインストール
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.0 //ドキュメントから最新版を入れる

# VSCodeが入っている前提で以下を実行
$ code ~/.bashrc
```

VSCodeが起動されたら、.bashrcの末尾に以下を追記します。

```jsx
. "$HOME/.asdf/asdf.sh"
. "$HOME/.asdf/completions/asdf.bash"
```

VSCodeのターミナル上（powershellではなくubuntsuを選択）で.bashrcを再読込してください。

```jsx
ファイル再読み込み
$ source ~/.bashrc
$ asdf #なにか出ればOK
```

## 3. Node.jsのインストール

asdfを使ってnodejsをインストールします。

立ち上げる環境によってNodejsのバージョンが変わるので、簡単に切り替えられるようにします。(バージョン管理を使わない場合、アンインストール→再インストールの手間が発生します。)

**※nodejsとは**

JavaScriptを、サーバー側で動作させるプラットフォーム。

前提として、JavaScriptはブラウザ上でのみ動く言語であるため、サーバー上では動きません。

Web開発をする際は、OS機能（ファイルの読み書き、ネットワーク通信等）にアクセスする必要があるため、OSにアクセスできるサーバサイド言語も必要になります。従って、今回はnodejsを使用します。

また、nodejsは大量なアクセスに強く、求められる処理をリアルタイムで実行できるメリットもあります。

以下のドキュメントを見ながら作業します。

https://github.com/asdf-vm/asdf-nodejs

nodejsをインストールできるようにプラグインを追加します。

```jsx
$ asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
```

次に、asdfでnodejsのバージョンを指定します。下記を参照します。
(今回はNode.js 18.16.0をいれます。)

https://codenote.net/tool/5848.html

今回は下記の手順で行いました。
```jsx
$ asdf list-all nodejs
$ asdf install nodejs v18.16.0
$ asdf global nodejs v18.16.0
# バージョンチェック
$ node -v
```

## 4. ViteでReact環境を作る

今後ReactやTypeScriptの環境を作るときはViteを使います。

**※Viteとは**

モダンな開発環境に対応したビルドツール。

従来のツールに比べ以下のメリットがあります。

- 開発サーバの起動・更新がとにかく早い
- TypeScriptやSass使用時の設定がほぼ不要

下記サイトの「最初の Vite プロジェクトを生成する」を参照します。

https://ja.vitejs.dev/

今回は下記の手順で行いました。

```jsx
$ npm create vite@latest
// 今回はproject名をsample-viteにしてみる
// React + JavaScriptに設定
$ ls // sample-viteというディレクトリができているかを確認
$ cd sample-vite
$ npm i // package.jsonの内容をインストール
// node_modulesというディレクトリができている
$ code . //今いる場所をVSCodeでひらく

// ターミナルをひらく(デフォルトはPowerShellなのでWSLのターミナルをひらく)
$ npm run dev
```

https://localhost:5173　
こちらが表示できれば成功です！お疲れさまでした。

## 参考

https://qiita.com/Sicut_study/items/cb198375011581f3ef2c

https://zenn.dev/asopitech/articles/20230201-225956_1
CodeIQ:「LCM・パレード」問題の解答


Kawazoe(@riverplus)さんのCodeIqの問題です。
問題とテストケースはこちらにお世話になりました。解答もあります。
~~->https://blog.goo.ne.jp/r-de-r/e/cc4c0751d6d5658a45dbe573488e2e8f~~
(リンク切れになっていました。2025.5.2)
こちらにも情報があります。
->https://togetter.com/li/1198588

ーーー2025.5.2追加
自然数a,bに対し、aとbの最小公倍数をLCM(a,b)と定義します。
自然数n,kに対しm<=nなるすべての自然数mのLCM(k,m)÷kの値の和F(n,k)を
求める問題です。ただし　1≦n≦10^8,1≦k≦10^5です。
ーーー

aの10^8を何とかしないと計算量が多すぎますので、aをbで表すことを考えます。
そこでまず
lcm(x\*j+i,x)=(x\*j+i)\*x/gcd(x\*j+i,x)=(x*j+i)*x/gcd(i,x) 
そして
y=d\*x+rとして1<=k<=d\*xとするとv=Σlcm(k,x)/xは
for i in 1:x , j in 0:d-1
  　 v+=lcm(x\*j+i,x)/x
    
ここでlcm(x\*j+i,x)/x=( (x\*j+i)*x/gcd(x,i) )/x=(x\*j+i)/gcd(x,i)

またΣx\*j(j=0..d-1)=x\*d*(d-1)/2、Σi(j=0..d-1)=d\*i となりますので上の式は
for i in 1:x
　v+=(d*(d-1)/2\*x+d\*i)/gcd(x,i)
剰余分は別に
for i in 1:r
　v+=(d*x+i)/gcd(x,i)
 となります。
 ところで投稿のため見直していたら、出題者の「 O(k)とO(√k)の解法を紹介したよ」
 というtweetを見つけました。 O(√k)というのは見当がつきません。
 まずJuliaから。

```Julia
#julia ver 1.41,1.53,1.73

function solve(y,x,a)
    ans = 0
    d,r = divrem(y,x)
    m = div(d*(d-1),2)
    for i in 1:x
        ans += div((m*x+d*i),gcd(x,i))
        if i <= r
           ans += div(d*x+i,gcd(x,i))
        end
    end
    s = a == ans ? "ok " : "no "
   println(s,ans)
end

solve(10,3,43)
solve(20,9,162)
solve(9, 12, 22)
solve(40, 50, 502)
solve(312, 41, 47708)
solve(7122, 360, 10778909)
solve(1234567, 17200, 414701577895)
solve(98777, 98999, 4878497253)
solve(100000000, 98765, 4199787396686968)
```
Prologも同じ方針で解いています。

```Prolog
%SWI-Prolog ver 7.42,7.64
%:-initialization(start).   %ideone
%start.

loop(X,X,_,_,_,R,R):-!.
loop(I0,X,D,M,N,R1,R):-
    I is I0+1,Y is gcd(X,I),R2 is R1+(N*X+D*I) div Y,
    (I =< M->R3 is R2+(D*X+I) div Y;R3=R2),loop(I,X,D,M,N,R3,R).

solve(Y,X,A):-
    divmod(Y,X,D,M),N is D*(D-1) div 2,
    (loop(0,X,D,M,N,0,R)->(R==A->Str=" ok  ";Str=" no  ");
    write(fail)),write(" "),write(Str),writeln(R),!.

start:-f(Y,X,A),solve(Y,X,A),fail.
start.

f(10,3,43).
f(20,9,162).
f(9, 12, 22).
f(40, 50, 502).
f(312, 41, 47708).
f(7122, 360, 10778909).
f(1234567, 17200, 414701577895).
f(98777, 98999, 4878497253).
f(100000000, 98765, 4199787396686968).
```
Tableauで男女比もわかりやすく比較できる人口ピラミッドを作ろう

## 人口ピラミッドとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/9dbe27b3-f0aa-ccc6-2e18-a701efe522be.png)
人口ピラミッドは男女別に年齢ごとの人数を表したグラフのことで、中央に縦軸を引いて性別によっての年代の分布を確認することが出来、注力すべき世代を確認するのに役立ちます。
Tableauでも一工夫して作成が可能です。

## Tableauにおける人口ピラミッドの課題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/7466ef14-a84f-4b87-d135-ef88d4024a4f.png)
男女比が等しくないデータを使用してTableauで人口ピラミッドを作成すると、各性別での軸の最大値が異なったり、軸が中央にならないため上手く分析出来ない場合があります。今回はリファレンスラインを使用してこの問題を解決する方法を解説します。

##人口ピラミッド作成のおさらい

年齢が数値で入っている場合は年齢でビンを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/c091015e-1d35-89ff-c391-f647d70b76ed.png)

人数の計算フィールドを作成する。男性の人数はプラス、女性の人数はマイナスになるようにする。
１レコードを１カウントとする場合は以下のように計算。
```
IIF([性別]="男性",1,-1)
```
顧客のユニーク数をカウントする場合は以下のように計算。
```
IIF(MAX([性別])="男性",1,-1)
*
COUNTD([顧客名])
```

列に先ほど作成した人数の計算フィールドを、行に先ほど作成した年齢のビンを、色に性別を配置する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/54e4f0b2-a3c4-8122-2440-d9989d4ff856.png)

年齢のビンは降順にし、書式設定を使用して「代」などをサフィックスにつけると親切。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/2275e39b-2327-8072-a655-0c7207694f8e.png)

作成した人数の計算フィールドの書式設定をカスタムに設定し、プラスでもマイナスでも"‐"がつかないように表示するように設定
```
#,##0;#,##0
```

人口ピラミッドの完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/d1c0b55a-6335-cba1-b71b-53d28dfa82a5.png)

## 横軸をそろえた人口ピラミッドの作成方法

ここからが本題です。この人口ピラミッドにリファレンスラインを使用して横軸をそろえる設定をしていきます。
計算フィールドを２つ作成。
性別の各世代の最大値をWINDOW_MAXで取得し、その値が男女でどちらが大きいかを比較。大きい方を表示できるようにする。
```
IF WINDOW_MAX(ABS([男女人数]))>=WINDOW_MAX(ABS(-[男女人数])) THEN
WINDOW_MAX(ABS([男女人数]))/2
ELSE
WINDOW_MAX(ABS(-[男女人数]))/2
END
```

```
IF WINDOW_MAX(ABS([男女人数]))>=WINDOW_MAX(ABS(-[男女人数])) THEN
-WINDOW_MAX(ABS([男女人数]))/2
ELSE
-WINDOW_MAX(ABS(-[男女人数]))/2
END
```

作成した２つの計算フィールドを詳細に入れ、次を使用して計算を「性別」に設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/4957656d-3e12-3aa0-1b57-dc101701f157.png)

リファレンスラインを追加。値を作成した正の計算フィールドの最大値に設定し、ラベル、線を「なし」に設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/495004dc-f811-2871-3945-ae12dce7dd83.png)

同様に値を作成した負の計算フィールドの最小値に設定し、ラベル、線を「なし」に設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/c216cae9-ab2f-9851-0500-0fe49bffa592.png)

これにより、男性側も女性側の値と同じ程度の範囲が表示され、軸も真ん中で固定される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/456d3305-ab4e-ba20-8fbb-50a2e2d12ed7.png)

## まとめ
リファレンスラインによって軸の範囲を変更する機能はかなり便利なので活用できると良いと思います。
Tableauの仕様によりスムーズな分析が阻害されるような要素についても工夫次第では排除できることもありますので、方法がないかを試行錯誤することはかなり大事と思います。
【React × FastAPI のモダンWebAppにおいての】よく使うチートシート

今まで学んできた事をまとめてみます。

[Python](#python)
[TypeScript](#typescript)
[React](#react)
[Javascript](#javascript)
[外部API](#外部api)

# Python


## FastAPI
https://qiita.com/raisack8/items/6bd25f34db45e3fdab31

## Rest Framework
https://qiita.com/raisack8/items/ade78eabd06b2073d738
## Pandas
https://qiita.com/raisack8/items/8d13ecefe7d1efe35659
## SQL Alchemy

https://book.st-hakky.com/hakky/sqlalchemy-crud/

### SQL
https://qiita.com/raisack8/items/c3c18f6a0f960378a08b

# TypeScript

# React
https://qiita.com/raisack8/items/18fb593d7ff3e2620a68

https://qiita.com/raisack8/items/506afa17ffc16bb2c348

https://qiita.com/onomimono/items/07cbcfe7e09eec704e8c


## state
https://qiita.com/raisack8/items/db801f2e2326ae55a9ca

## hooks

https://zenn.dev/spacemarket/articles/271cf9ec2513a7

# Javascript

https://qiita.com/raisack8/items/4317e90b726d1738218b

# 外部API
https://qiita.com/raisack8/items/9336e815dacfa6a37a9e
【ST言語ことはじめ】カウンタの数値をDPLに表示する

## はじめに

この記事では、PLCでのプログラムを使って、ボタンを押すとカウンタが1ずつインクリメントされ、その数値を7セグメントLEDに表示する方法について解説します。

## 使用機材

|   |機種など   |
|:---:|------|
|PLC  |Q02CPU, QX41, QY41P, Q62P, Q38B    |
|アプリ  |GX Works 2    |

I/O割り付けは[こちら](https://qiita.com/so2/items/0f0cab2e324179718b89 "I/O割り付け表")を参照してください。

## サンプルコード
ボタン1を押すとカウンタが1ずつインクリメントされるプログラムを作成します。以下がそのサンプルコードです。

```st
PLS(X1, M0);

IF M0 THEN
    INC(K1, CN1);
END_IF;

K4Y40 := CN1 + CN1 / 10 * 6;
```

### カウントアップ処理

```st
PLS(X1, M0);

IF M0 THEN
    INC(K1, CN1);
END_IF;
```

このプログラムは、ボタン1（X1）が押されると、カウンタCN1が1ずつインクリメントされます。

### 7セグメントLEDへの表示
最後に、変換した数値を7セグメントLEDに表示します。ここでは、Y40からY4Fのアドレスに接続されたLEDを使用します。

```st
K4Y40 := CN1 + CN1 / 10 * 6;

(* 9の次にある A〜Fを飛ばして繰り上げるための処理をしています *)
```

このコードは、変換した16進数をDPLに反映させます。DLPが16進数表示のため、見た目が10進数になるように数値データを盛っています。これにより、7セグメントLEDに数字が表示されます。

## K4Y40とY40の違い

K4Y40は、整数値などを16進数で格納し、ワードデバイスとして扱います。一方、Y40はON/OFFの状態を直接BOOL型で格納し、ビットデバイスとして扱います。

### コード例

#### 1. ワードデバイスに整数値を代入
```st
K1Y40 := 3;
```
このコードは、K1Y40アドレスに3という値を代入しています。Y40は出力の端末番号なので、そのままではBOOL型のデータしか扱えません。
しかし、K1を頭につけることでY40から数えて4ビット分をまとまりとして扱えるようになります。K1Y40の場合はY43, Y42, Y41, Y40が対象となります。これは0000から1111までですので、16進数の一桁分となります。
K2ならば8ビット分、Y40〜Y47となります。これは16進数の00からFFです。

#### 2. ビットデバイスを個別に変更
```st
Y40 := TRUE;
Y41 := TRUE;
```
このコードは、Y40とY41のビットにTRUEを代入しています。これにより、7セグメントLEDの表示器に数字の3が表示されるようになります。

## まとめ

この記事では、PLCでボタンを押すとカウンタが1ずつインクリメントされ、その数値を10進数から16進数に変換し、7セグメントLEDに表示する方法について解説しました。その際にビットデバイスをワードデバイスとして扱うことにより、処理を簡略化する方法を使用しました。これを参考にして、自身のプロジェクトでの活用をお試しください。
【AppleVisionPro】VisionPro向けゲームをUnityを使って開発する時の注意点(2024/03/17ver)【Unity】

WWDC'23 で発表されたVisinoPro がついに発売されました！
今回は会社で無事に入手できたのでVisinoPro 向け（専用）アプリをUnityで開発するときに
出来ること・できないことをまとめました。

# 前提/注意点
- UnityはPro以上のライセンスが必須です
- 開発はApple Sillicon 搭載のMac が必要です
- 一部 SwiftUI/UIKit で使えていたAPIはVisionOS1.0では未実装なものがあります
- ある程度実現できない部分を考慮しつつ開発する必要があります


# 現状の PolySpatial(VisionOS) で出来ること
| 項目 | 補足 |
| --- | --- |
| ハンドトラッキング | 当たり判定があればObjectを持つ等も可能 |
| ハンドジェスチャー | 手で特定のポーズを作った時にそのイベントをトラックすることが可能 |
| タップ操作 | 人差し指と親指をくっつけることで選択アクションが可能 |
| 空間音響 | 音源を空間配置可能。立体音響として聴くことが可能(※HRTFを使うので体感には個人差があります) |
| ARアンカー | 空間上にARアンカーを設定可能 |
| 平面検知 | 壁・床・テーブル等の平面を検知し、検知したMesh情報も取得可能<br>もちろんラベルも取得可能 |
| リアルタイムデバッグ |UnityEditorを `XCode のVisionOSSimulator` もしくは `VisionPro実機` とリアルタイムにデバッグが可能。　Editorでの操作 or Simulator/実機での操作をそれぞれの環境に即時に反映が可能<br>PlayToDevice を利用 |


# 現状の PolySpatial(VisionOS) で出来ないこと

| 課題 | 現在の挙動 | 回避策 |
| --- | --- |---|
| Application のポーズ判定がとれない | OnApplicationPause（） が発火しない | visionOSのバージョンアップ待ち |
| Application の終了イベントがとれない | OnApplicationQuit（） が発火しない | visionOSのバージョンアップ待ち |
| アプリを終了してもBGMが停止できない | アプリ終了してもBGMは再生し続ける | UIにBGM停止ボタン等を設定するしかない.<br>visionOSのバージョンアップ待ち  |
| 視線ベクトル(Gaze)をリアルタイムにとれない | HoverEventかRaycastでHit位置はとれる | ポリシー的に無理そう |
| HoverEvent をとれない | HoverEffect Componentによる自動的にエフェクトが適応されるのみ | visionOSのバージョンアップ待ち |
| 実機リアルタイムデバッグ | ~~PlayToDevice は実機と接続は未対応~~ <font color=red>　PolySpatial 1.1.4から実機でも一部は対応されました(3/2更新)</font><br>AR系コンテンツはリアルタイムに検証は不可能(平面検知やハンドトラッキング等) |　現状はLogを貼っておくしかできない |


# 実機でよく使う開発に使える操作
## スクショ
- デバイス左端にあるTopボタンを押す
- RealityComposerPro の `File` → `Device Capture` を選択
    
## アプリの強制終了
- デバイスの両端にあるTopボタンとCrownボタンを同時に長押しするとForceQuitメニューが出てくるのでそれを選択
    - 基本的にxボタンを押してもホームに戻るだけでアプリは `Active状態` です

## ファイル共有
- 基本的にはAirDrop経由でPCと実機間でやり取りが可能
    - 実機のスクショや動画のキャプチャを送る時は覚えておくと良い

## Eye/Handのセットアップ
### 通常開発時
https://support.apple.com/ja-jp/guide/apple-vision-pro/tanf67b02683/visionos

公式にもある通り `General` → `Eyes & Hands` → `Redo Eye Setup` , `Redo Hands Setup` を選択

### ゲストユーザーに装着してもらう場合
1. 上方向を見て 丸いチェックマーク `✅` を探してTap
1. バーが並んでいる設定アイコンを選択
1. 人型のバストアップアイコンの「ゲストモード」を選択
    - この時Screen共有しておくとOK
1. Guest モード設定後5分以内に被り直せば初期設定から行えるゲストモードで起動
集合論理

# 集合論理

　集合とは、ある条件を満たし、他のものとは明確に区別できる集まりのこと。
　例）A地区の「学校A」、B地区の「学校B」

　集合に属するもののことを要素（元）と呼ぶ。
　例）学校Aの「生徒A」、学校Bの「生徒B」

　
## 部分集合とべき集合
・要素数が「0」の集合を空集合と呼ぶ。
　また、空集合は「φ：ファイ」の記号で表す。
　例）学校はあるが生徒が誰もいない場合、この学校を記号で表すと「φ」

　
・要素数が有限である集合のことを有限集合と呼ぶ。

　
・要素数が無限である集合のことを無限集合と呼ぶ。

　
・集合の中に存在する集合のことを部分集合と呼ぶ。
　例）A市の「地区A」の「学校A」　
　※A市も視点によっては部分集合（世界、国、県があるため）

　
・部分集合を要素とした集合をべき集合と呼ぶ。
　例）「A市」の地区Aと学校A
　※地区Aと学校Aから見て、A市はべき集合

　べき集合の要素数を数える場合、「φ」および自身もカウントする。
　例）A市の地区Aと学校A　→　φ、地区A、学校A、A市（地区A + 学校A） →　4個

　集合の個数は、集合の要素数がxとすると、2のx乗の数となる。
　例）集合U = { 1 , 2 , 3 }
　　　集合Uのべき集合 
　　　　= { φ 、{1} 、{2} 、{3} 、{1,2} 、{1,3} 、{2,3} 、{1,2,3}
    　　→ 8個 （要素数が3個、2の3乗で8個の計算）


## 和集合と積集合

・ある集合AとBがあり、集合Aか集合Bのいずれかに含まれる要素を集めた集合のこと。
　式で表すと、「A⋃B」　※⋃：カップ
　例）安いレストラン、美味しいレストランの集合
　　　安いけど美味しくないレストラン、高いけど美味しいレストランは和集合の要素となる。
　
・ある集合AとBがあり、集合Aと集合Bの両方に含まれる要素を集めた集合のこと。
　式で表すと、「A∩B」　※∩：キャップ
　例）安いレストラン、美味しいレストランの集合
　　　安くて美味しいレストランが積集合の要素となる。
   
　
## 差集合と対称差

・ある集合AとBがあり、集合Aの要素であって、集合Bの要素ではない集合を差集合と呼ぶ。
　例）安いレストラン、美味しいレストランの集合
　　　安いけど美味しくないレストランは差集合の要素となる。

　差集合のことを式で表すと「A-B」もしくは「A∩B[-]」となる。※ (-)はBの頭に付く。
　集合を表す変数の頭に（-)が付くと、その集合に属さない要素という意味になる。
　※記事では「A∩B[-]」の「B[-]」のように表記する。

　
・ある集合AとBがあり、「集合Aの要素であって、集合Bの要素でないもの」と「集合Bの要素であって、集合Aの要素ではないもの」の集合を対称差と呼ぶ。
　例）安いレストラン、美味しいレストラン
　　　安いけど美味しくないレストラン、高いけど美味しいレストランは要素となる。

　対称差のことを式で表すと「AΔB」となる。

　対称差は、差集合「A-B」と「B-A」の和集合となるため、以下の式で表すことができる。
　AΔB = (A-B) ⋃ (B-A)
　AΔB = (A∩B[-]) ⋃ (B-A[-])
私が考えるKintoneカスタマイズの最強構成🔥デプロイ自動化&Viteを使おう

# はじめに

ノーコードを謳っている Kintone ですが、実際に使っていくとどんどん要望が出てきて、最終的にはめちゃくちゃカスタマイズすることになるかと思います（笑）
Cybozu も開発の助けになる記事をたくさん用意してくれています👍
それらを参考に現時点での私が考えるKintoneカスタマイズの最強構成をご紹介します！

# サンプルコード

詳細はコードを見ていただければと。
テンプレートとして使っていただいて大丈夫です👍

https://github.com/miyukikoga/kintone-vite-template

# 技術スタック

- TypeScript...プログラム言語
- React...JavaScript ライブラリ
- Vite...バンドルツール
- Vitest...Vite ネイティブのテストフレームワーク
- Eslint...静的解析ツール
- Prettier...コードフォーマッター
- GitHub Actions...CI/CD のプラットフォーム


# ディレクトリ構成

```
kintone-app/
├─.github # プルリクテンプレートや自動デプロイの設定
├─src/
│ ├─apps/ # kintone 各アプリのカスタマイズを管理するディレクトリ
│ | ├─(app name)/ # 各アプリのカスタマイズ用ファイルを格納する
│ | | ├─features # 機能ごとにロジック等を管理するディレクトリ
│ | | ├─types # 各アプリで使用する型定義
│ | | ├─index.ts # エントリーポイントとなるファイル
│ ├─components # ボタンやフォームなど汎用的なコンポーネントを格納する
│ ├─constants # 汎用的な変数を格納
│ ├─global # kintone 全体のカスタマイズを管理するディレクトリ
│ ├─utils # 汎用的な関数を格納
```


# CI/CD

アプリへの JavaScript の反映は手動では行わない方針です。
各人が勝手に js ファイルを上げ始めるとまじでやばいので、ここは対応必須です😢

作業ブランチにプッシュしたら自動でテストを実行します。
検証ブランチにプッシュしたら自動デプロイします。
本番アプリへのデプロイはリリース公開時に行います。

https://docs.github.com/ja/repositories/releasing-projects-on-github/managing-releases-in-a-repository


# バンドルツール

Cybozu のブログで webpack を紹介していますが、かなり複雑なのでやめた方が良いです。
Vite の方がシンプルで高速なのでおすすめです。

https://cybozu.dev/ja/kintone/tips/development/customize/development-know-how/javascript-customize-middle-class-webpack/

# ブランチ戦略

これは好きな方法を選択してもらって大丈夫ですが、Kintoneカスタマイズは基本的に少規模だと思うので、ぐるなびさんの記事にある GitFeatureFlow がシンプルでおすすめです。

https://developers.gnavi.co.jp/entry/GitFeatureFlow/koyama

![brachFlow.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71897/a0de2551-53c0-09e1-9ff5-c1d50b895271.png)


# 最後に

ノーコードゆえなんとなーくでカスタマイズしていくと本当に悲惨なことになります😭
事前にある程度ルールを決めてデプロイ自動化などやることがKintoneとうまく付き合っていくコツかなと。
手遅れになる前にちゃんと設計して快適なカスタマイズを行なっていきましょう！
Azure App Service のカスタムコンテナーに OWASP ZAP Webswing を試してみた

Azure App Service のカスタムコンテナーの動作サンプルとして、OWASP ZAP Webswing を試してみました。

## Docker で OWASP ZAP Webswing を動かす場合の例

```bash:bash
docker run -u zap -p 8080:8080 -i ghcr.io/zaproxy/zaproxy:stable zap-webswing.sh
```

## Azure App Service 環境に置き換えて構築する例

```bash:bash
prefix=mnrzap
region=japaneast

az group create \
  --name ${prefix}-rg \
  --location $region

az appservice plan create \
  --name ${prefix}-asp \
  --resource-group ${prefix}-rg \
  --sku B1 \
  --is-linux

az webapp create \
  --name ${prefix} \
  --resource-group ${prefix}-rg \
  --plan ${prefix}-asp \
  --deployment-container-image-name ghcr.io/zaproxy/zaproxy:stable \
  --startup-file zap-webswing.sh \
  --https-only

az webapp config appsettings set \
  --name ${prefix} \
  --resource-group ${prefix}-rg \
  --settings WEBSITES_PORT=8080
```

## OWASP ZAP Webswing の画面例

![appservice-owaspzap-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/4b958219-1297-98b0-4f1b-f691eaabfcfd.png)

## 参考

https://www.zaproxy.org/docs/docker/webswing/

https://learn.microsoft.com/ja-jp/azure/app-service/configure-custom-container?tabs=debian&pivots=container-linux#configure-port-number
タスクスケジューラ エラー Value 2147943726



# タスクスケジューラで「2147943726」というエラーとなった

Microsoft アカウントではエラーとなってしまって、ローカルアカウントを使ったアカウントでは問題なかった
自分の場合は、以下をいじっていたら動き出しました

# タスクスケジューラ設定

[全般]
　[レ]ユーザーがログオンしているかどうかにかかわらず実行する
　 [レ]パスワードを保存しない

[設定]
タスクが既に実行中の場合に適応される規則
　既存のインスタンスの停止
　
# 参考
* https://appuals.com/how-to-fix-task-scheduler-error-value-2147943726/
UTMでARMとx64とを比較

# MacのUTMにて仮想環境を比較
ようやくAppleシリコン搭載のMacを購入。仮想環境を構築できるUTMでは、ネイティブであるARMだけではなく、エミュレーション（qemu）によるx64（Intel）も実行可能であるため、両者の比較を行ってみた。

## 対象
- ARM: ubuntu-22.04.3-live-server-arm64.iso
- x64: ubuntu-22.04.3-live-server-amd64.iso

## 方法
### Unixbench
Unixで有名どころのベンチマーク。[こちら](https://github.com/kdlucas/byte-unixbench)のリソースを利用。

### 起動時間
正確ではないが、カーネルログ（コマンド”dmesg”）で落ち着くまでの所要時間で比較。

### ネットワークスタック
外部通信の比較は意味がないと考え、ループバックを用いたpingおよびiperf3(TCP)を採用。
```
$ ping -c 100 127.0.0.1
```
```
$ iperf3 -s # Server

$ iperf3 -c 127.0.0.1 -t 100 # Client
```

## 結果サンプル
### Unixbench
最後に表示されるスコアを使う。
```
System Benchmarks Index Values               BASELINE       RESULT    INDEX
Dhrystone 2 using register variables         116700.0    5879619.6    503.8
Double-Precision Whetstone                       55.0        658.0    119.6
Execl Throughput                                 43.0        640.4    148.9
File Copy 1024 bufsize 2000 maxblocks          3960.0     266587.5    673.2
File Copy 256 bufsize 500 maxblocks            1655.0      74073.2    447.6
File Copy 4096 bufsize 8000 maxblocks          5800.0     755574.9   1302.7
Pipe Throughput                               12440.0     387017.2    311.1
Pipe-based Context Switching                   4000.0      14765.8     36.9
Process Creation                                126.0       1417.2    112.5
Shell Scripts (1 concurrent)                     42.4       1595.3    376.2
Shell Scripts (8 concurrent)                      6.0        210.3    350.5
System Call Overhead                          15000.0     489556.4    326.4
                                                                   ========
System Benchmarks Index Score                                         276.1
```
上記の場合、276.1を採用

### 起動時間
```
...
[    3.150017] sr 0:0:0:0: [sr0] scsi3-mmc drive: 16x/50x cd/rw xa/form2 cdda tray
[    3.150023] cdrom: Uniform CD-ROM driver Revision: 3.20
[    3.150903] sr 0:0:0:0: Attached scsi CD-ROM sr0
[   13.263421] rfkill: input handler disabled
```
上記の場合、3.15（秒?）とする。
```
...
[   17.259990] NET: Registered PF_QIPCRTR protocol family
[   18.270481] e1000: enp0s1 NIC Link is Up 1000 Mbps Full Duplex, Flow Control: RX
[   18.271383] IPv6: ADDRCONF(NETDEV_CHANGE): enp0s1: link becomes ready
[   43.567596] rfkill: input handler disabled
```
上記の場合、18.27（秒?)とする。

### ping
最終結果の平均値を利用。
```
--- 127.0.0.1 ping statistics ---
100 packets transmitted, 100 received, 0% packet loss, time 99375ms
rtt min/avg/max/mdev = 0.146/0.690/1.321/0.238 ms
```
上記の場合、0.690msを採用。

### iperf3
Server側で表示される最終結果を利用。
```
[ ID] Interval           Transfer     Bitrate
[  5]   0.00-100.00 sec  1.65 TBytes   145 Gbits/sec                  receiver
```
上記の場合、145Gbits/secを採用。

## 比較＆考察
数回行った平均値を下記（pingやiperf3は最終結果自体が平均値とみなす）。
||Unixbench(Score)|起動時間(秒?)|ping(ms)|iperf3(Gbits/s)|
|---|---|---|---|---|
|ARM|10755|3.08|0.108|145|
|x64|273|18.16|0.690|3.11|

Unixbenchやiperf3の結果を見ると、40倍程度の差があり、体感（操作）的にもx64は遅く感じる。やはり、エミュレーションの限界であろうか、、。

EOF
DHCPサーバのリスト一覧出力

・物理アドレスがわかるが何処のスコープに入ってるか不明な時。
・端末名からエントリを探したい時など。

```bat
netsh dhcp server 192.168.3.1 dump >"C:\Users\test\Desktop\DHCPLIST\LIST.TXT"

```
STM32C011とキャラクター液晶でHello Worldを表示して遊ぶ。(PA14)(PA13)(ターゲットリセット)




参考

↓ここをクリック↓

http://100year.cocolog-nifty.com/blog/2010/04/arduinolcd3-0bb.html



STM32C011とキャラクター液晶でHello Worldを表示して遊ぶ。(PA14)(PA13)(ターゲットリセット)


x 過去ログを見よ
x 「Arduino」関連を見てください

x 自己責任の意味がわかる人がお読みください。
x 間違った操作を行うと二度と書き込めなくなります。
x なぜか知らないが、表示速度を速くするとジャムるので各自で調整してくざさい。
x 74HC164を使いピン数を減らしています。
x ターゲットリセットを接続してください。
x 非常用として「3秒ルール」があり、起動後、3秒以内に接続してください。

接続

1 
2 VCC
3 GND
4 ターゲットリセット

8 液晶 CLK  (SWCLK)
7 液晶 DATA (SWDIO)
6 液晶 EN
5



基板パターン ACM1602K-NLW-BBW

o_con88.jpg
![o_con88.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/1633ccc8-852a-efd5-1f7f-8c3ec4f2ff06.jpeg)




結果

![o_cop918.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f43ef579-6afb-256c-205f-703d9fa3623f.jpeg)




プログラム


```c++



//GPIO_LCD_Hello World_C011_1

//インクルド
#include <Arduino.h>


//*          *****  *****  
//*         *       *    * 
//*         *       *    *
//*         *       *    *
//*         *       *    *
//********   *****  *****


//定義
#define DW   digitalWrite

//STM32G031J6M6 i2cピンの定義
//#define sdaPin PA12    // ArduinoA4
//#define sclPin PA11    // ArduinoA5

//#define S5851A 0x48

#define swdclk   PA14 // 8pin
#define swdio    PA13 // 7pin
//#define swdclk   PA11 // 5pin
//#define swdio    PA12 // 6pin
//#define swdclk   PA12 // 6pin
//#define swdio    PA11 // 5pin
//#define t_led1   PA12 // 6pin
//#define t_led2   PA11 // 5pin
//#define en       PA0  // 4pin
//#define in7      PB7  // 1pin
//#define en      PB7  // 1pin
#define en      PA12  // 6pin

// tx PA14(PB6) 8PIN
// rx PC14(PB7) 1PIN

//シフトパターン
//              12345678   12345678   12345678   12345678
char b8[8] = {0b10000000,0b01000000,0b00100000,0b00010000,
              0b00001000,0b00000100,0b00000010,0b00000001 };

//液晶の初期化配列
int lcd_int[]={
  0x30,0x30,0x30,0x38,0x08,0x01,0x06,0x08+0x04
};//lcd_init


//液晶に一文字を表示する。
void seg1(int v,int rs)
{
    //一文字分のデータをセット
    for(int jj=0;jj<8;jj++){
        if( (v & b8[jj]) == 0 ){
                DW(swdio,0); //ビットが0
        } else {
                DW(swdio,1); //ビットが1
        }//endif
        DW(swdclk,1);
        DW(swdclk,0);
    }//for
    
    DW(swdio,rs);   //コマンド/データ
    DW(en,1); delay(1);  //イネーブルオン
    DW(en,0);       //イネーブルオフ
}//seg1


//文字列の表示 nana_seg
int ns_printf(char *str1) {

    //文字の中身がゼロか
    while(*str1){

        //一文字出力
        seg1( *str1 ++ , 1  );

    } //while

    //戻り値
    return(0);
}//ns_printf


//初期化
void setup() {

  delay(3000); //not Delete (絶対消すな)(消しちゃィゃーん)

  //GPIO初期化
  pinMode(swdclk,OUTPUT);
  pinMode(swdio,OUTPUT);
  pinMode(en,OUTPUT);
  DW(en,0);

  //液晶の初期化
  for(int ii=0;ii<8;ii++){ 
    seg1( lcd_int[ii] , 0);delay(2);
  }//for

  //スタートアップ表示
  seg1( 0x80+0x00 , 0  ); //1ライン目にカーソルを移動
  ns_printf( "Hello World" ); delay(500);
  //seg1(   0x01  , 0  ); delay(5); //画面クリア

} //setup


//メインループ
void loop() {
} //loop



```
Here are some key tips for writing a psychology experiment report

Structure and Clarity:
Follow a standardized structure: Introduction, Method, Results, Discussion, Conclusion, References.
Write clearly and concisely: Use concise language and avoid jargon where possible.
Use past tense to describe the study: The experiment is already completed.
Section headings and subheadings: Guide the reader and improve readability.
Content:

Introduction:
Briefly introduce the topic and research question.
Review relevant literature and state your specific hypothesis.
Clearly state the purpose of your experiment.
Method:
Describe the participants (age, gender, etc.) and how they were recruited.
Explain the research design (independent and dependent variables).
Detail the procedure step-by-step, including materials and apparatus.
Mention any ethical considerations and how they were addressed.
Results:
Present the results objectively and without interpretation.
Use descriptive statistics (means, standard deviations) and appropriate statistical tests.
Create clear tables, figures, and graphs to present data visually.
Discussion:
Interpret the results in light of your hypothesis and existing literature.
Discuss limitations of the study and potential future research directions.
Avoid making overgeneralizations or unsubstantiated claims.
Conclusion:
Briefly summarize the main findings and their implications.
Restate the answer to your research question.
Additional Tips:

Proofread carefully for grammar and spelling errors.
Use consistent formatting throughout the report.
Cite all sources used in APA format.
Tailor the report to your specific audience and level of detail required.
Resources:

Publication Manual of the American Psychological Association (7th edition)
https://psychessaypro.com/
Your instructor's guidelines or rubric
Online examples of psychology experiment reports
Remember, your report should be clear, concise, and well-organized, allowing the reader to easily understand your study and its implications.
10 Ways Psychology Students Can Deal with Anxiety:


Psychology students deal with a unique set of stressors: dissecting human emotions, navigating complex theories, and often having personal encounters with mental health concepts. This can trigger anxiety for some students. Here are 10 ways psychology students can manage their anxiety:

Acknowledge and Understand:

Identify Triggers: Recognize situations, thoughts, or feelings that trigger your anxiety. Keeping a journal can help you identify patterns.
Challenge Negative Thoughts: Anxiety often fuels negative self-talk. Use cognitive behavioral therapy (CBT) techniques to challenge these thoughts and replace them with more realistic and positive ones.
Practice Self-Care:

Prioritize Sleep: Aim for 7-8 hours of quality sleep each night. Create a relaxing bedtime routine and avoid screen time before bed.
Maintain a Healthy Diet: Eat nutritious foods that support brain function and mood. Limit processed foods, caffeine, and sugar.
Exercise Regularly: Physical activity is a natural mood booster. Engage in activities you enjoy, like walking, yoga, or swimming.
Mindfulness and Relaxation Techniques:

Practice Deep Breathing: Focus on slow, controlled breaths to activate your body's relaxation response. Techniques like guided meditation or box breathing can be helpful.
Mindfulness Meditation: Focus on the present moment without judgment, reducing racing thoughts and anxieties. Guided apps or courses can help you get started.
Progressive Muscle Relaxation: Tense and relax different muscle groups systematically, releasing tension and promoting relaxation.
Seek Support:

Connect with Others: Talk to friends, family, or a therapist about your anxiety. Sharing your struggles can feel validating and provide needed support.
Utilize University Resources: Many universities offer counseling services, workshops, and support groups specifically for students. Don't hesitate to reach out.
Bonus Tip: Remember, you're not alone. Many psychology students experience anxiety. Embrace self-compassion, celebrate your strengths, and focus on progress, not perfection.

Remember, these are just suggestions, and it's important to find what works best for you. If your anxiety is severe or interferes with your daily life, seek professional help from a therapist or counselor. They can provide tailored guidance and support.
Other useful resource: https://psychessaypro.com/blog/gadget-addiction-on-psychology-students-actionable-solutions/
ツンデレ女子、再び... 会話履歴を残す

# はじめに

前回作ったツンデレ女子をバージョンアップさせていきます！
今回は会話履歴をDBに残して連続した会話を行えるようにします。

前回記事はこちら

https://qiita.com/miyuc/items/d678b7d954ca74006189


# システム構成

DB は PlanetScale を使用しています。

![systemConfiguration.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71897/1d1cfd3f-597a-c8db-a621-6a617c6ff6d1.png)

# サンプルコード

細かい設定はコードを見ていただければと。

https://github.com/miyukikoga/ai-chat-bot/tree/v1.1.0

# テーブル定義

ユーザーとAIのメッセージが必ずあるはずなのでセットで1レコードにしています。

![スクリーンショット 2024-02-03 5.57.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71897/8c0d32bf-03c1-6554-b0ca-7d20ff600809.png)

# スレッドに返信する

スレッドごとで連続した会話ができるようにします。
なのでまずは返信先をスレッドに変更します。

```
await say({
  text: `<@${event.user}> ${content}`,
  thread_ts: threadTs,
});
```

# DB ドライバーをインストール

```
npm i @planetscale/database
```

# 会話履歴を取得する

次にメンションされた時にまずは会話履歴を取得するようにします。

```
const query =
  'INSERT INTO chat_histories ' +
  '(`thread_ts`, `channel`, `user_message`, `ai_message`) ' +
  'VALUES (?, ?, ?, ?)';
```

# 取得した会話履歴をプロンプトに設定する

こんな感じになるように...笑

```
{
  role: 'system',
  content: 'あなたはツンデレの女の子です。あなたへのメンションは含めないでください。',
},
{
  role: 'user',
  content: '今日の夜ご飯は焼きそばだったよ。君は何を食べたの？',
},
{
  role: 'assistant',
  content: '焼きそばだなんて、いいな…。私は、ううん、別に君に教える意味なんてないんだからね！でも、ただのおにぎりだったよ。でもそれだけじゃなくて、ちゃんと厚焼き玉子もあったんだから！',
},
{
  role: 'user',
  content: 'おにぎりも、厚焼き玉子もいいね。おにぎりはなんの具だったの？',
},
{
  role: 'assistant',
  content: 'そうね、あまり重要じゃないことを聞いてくるなんて...うぅ、いいわ、教えてあげる。梅干しだったわ。すっぱいけど好きなんだから、勘違いしないでね！',
},
{
  role: 'user',
  content: '話してたら君の作ったご飯が食べたくなるよ。',
},
{
  role: 'assistant',
  content: 'えっ！？私のごはんが食べたいって、なんでそう思うの？！バカ…でも、私が料理する姿、見たいのかもしれないし…って、何言ってるの私！でも、ああ、なんでもないわよ！もう、変なこと言わないで！',
},
```

# DBに会話を登録する

AIからのメッセージを取得後、DBに会話を登録します。

```
const query =
  'INSERT INTO chat_histories ' +
  '(`thread_ts`, `channel`, `user_message`, `ai_message`) ' +
  'VALUES (?, ?, ?, ?)';
```

これで完成です👏

# 最後に

前の会話を覚えていてくれるので、ツンデレ女子とのより濃密なコミュニケーションを取れるようになりました🥳🙌
次は FunctionCalling 使ってお天気ツンデレ女子でも作れたらなと目論んでます🤭
俺が１番好奇心が強いこと


## 俺のギア５：最終到達地点

：光量子コンピュータの研究/開発　（東京大学/理化学研究所）

：AGIの研究開発/開発　（xAI：openAI）



## 最後に

全時代の中で、最も面白い時代に生まれてきた
React ：レンダー（ブラウザレンダリング）の標準教科書


## レンダーの流れと特徴について、[公式ドキュメント](https://ja.react.dev/learn/render-and-commit)を読んで理解した部分を書いていく

`レンダーのトリガー`**（トリガーとは、引き金のこと）**
↓
`レンダー`**（レンダーとは、レンダリングのことで、ブラウザへの画面描写のこと：Reactでは、描写内容の把握）**
↓
`DOMへのコミット`**（コミットとは、変更の確定：どの部分（DOMノード：HTMLタグなどのこと）をどう変更するかを把握）**

↓

この工程が終わったら、画面が変わる


## レンダーのトリガーについて詳しく説明するよ

レンダーがトリガーされる場合は、

### 1. 初回の強制

**ブラウザが、コードを読み込んだ時**

```
Google Chrome（など）が、Reactのそのアプリのソースファイルたちを初めて読んだとき
```

### 2. stateが更新された時

**`setstatus`などの値が変わった時**

## レンダーについて詳しく説明するよ


`この工程は、Reactがコンポーネントを呼び出す工程`



## DOMノードのコミットについて詳しく説明するよ

`この工程は、変更されたDOMノードを知る工程`

```
Reactのソースコードの中で、DOMノードが変更された部分を特定する工程
```

## まとめ


```
Reactでは、初回以外の画面を表示するときは、変更があった部分しか、変更しない
```
yupでenumのバリデーションをする

## やりたいこと

enumのバリデーション

ここで紹介されている。
https://github.com/jquense/yup/issues/1013#issuecomment-679113073

## コード

```typescript
import * as yup  from "yup";

enum Status {
    Success = "Success",
    Failure = "Failure"
}
const schema = yup.object({
    status: yup.mixed<Status>().oneOf(Object.values(Status)).required(),
});
```

## 説明

`mixed<Status>()`で型を指定し`oneOf(Object.values(Status))`で取りうる値を指定する。

`mixed<Status>()`でバリデーション後の値の型が`Status`になる。
`mixed<Status>()`だけだと各列挙子以外の文字列も有効判定になってしまうため`oneOf(Object.values(Status))`で列挙子を指定する。
自分でインストールしたJavaバージョンをSDKMANで管理する方法

# 概要

普段sdkmanでJavaを管理しているが、`sdk list java` で検索した中に自分の入れたいバージョンがない場合の対処方法の記事です。

# やり方

適当に必要なJDKをインストールします。どんなやり方でもいいです。

ここでは、OpenJDKのサイトから取ってきます。

以下のサイトから、ダウンロードします。 利用したいバージョンを環境に合わせて取得すれば良いです。自分はシリコンMacなので、`Mac/AArch64`を使います。
https://jdk.java.net/archive/

今回は、19.0.1を使います。取得したtargzを解凍し、適当な場所に置きます。

```shell
$ sudo mv ~/Downloads/jdk-19.0.1.jdk /Library/Java/JavaVirtualMachines/
```

次は、インストールしたsdkをSDKMANに認識させます。これだけです。ポイントは、`19.0.1-openjdk` のようにバージョンを先に書くことです。

```shell
$ sdk install java 19.0.1-openjdk /Library/Java/JavaVirtualMachines/jdk-19.0.1.jdk/Contents/Home
```

試します。

```shell
$ sdk list java
 Vendor        | Use | Version      | Dist    | Status     | Identifier
--------------------------------------------------------------------------------
 Unclassified  |     | 19.0.1       | none    | local only | 19.0.1-openjdk
```

Versionに19.0.1と出ているのは、コマンドで`19.0.1-openjdk`と入力したからです。これを `openjdk-19.0.1`にするとVersionがopenjdkになってしまいます。

使ってみます。

```shell
$ sdk use java 19.0.1-openjdk
Using java version 19.0.1-openjdk in this shell.
```

```shell
$ java -version
Picked up _JAVA_OPTIONS: -Dfile.encoding=UTF-8
openjdk version "19.0.1" 2022-10-18
OpenJDK Runtime Environment (build 19.0.1+10-21)
OpenJDK 64-Bit Server VM (build 19.0.1+10-21, mixed mode, sharing)
```

使われてますね。

javaの場所はこんな感じで、sdkmanディレクトリをちゃんとみてます。

```shell
$ which java
~/.sdkman/candidates/java/19.0.1-openjdk/bin/java
```

アンインストールも他と同じようにSDKMANのコマンドでできます

```shell
$ sdk uninstall java 19.0.1-openjdk
```
Nuitkaでpythonをexe化（メモ）

基本的にはこれらの記事を参考にしました。
実行の部分で手こずったので注意点をまとめます。

↓基本的にはこの記事を見ればいい。

https://qiita.com/yulily/items/b97dc34615eac2be7157

↓実行の部分に関してはこちらを参考にした。

https://pisuke-code.com/python-convert-to-exe-by-nuitka/

# インストール

```
pip install nuitka
```

# 実行
exe化したいpyファイルまで行く。
```
cd フルパス
```
基本の形
```
python -m nuitka ファイル名.py
```
何回かyes/noを聞かれるのでyesを選択しましょう。
僕はこの形でないと動かなかったのでそこを忘れないように記事を書きましたね。


# オプション

 --windows-disable-console：黒い画面を出さない

 --standalone：Python環境がないところでも動くようにする

 --onefile：ひとつのexeファイルにまとめる

 --enable-plugin=tk-inter：Tkinterをつかうおまじない

 --windows-icon-from-ico="*.ico”：*.icoファイルをアイコンとして使用

 オプションを付けての実行例
 ```
 python -m nuitka　--windows-disable-console --onefile --enable-plugin=tk-inter ファイル名.py
 ```
ReactのHooksを基礎から理解する（useRef, useMemo編）


## useRef
useRefはDOMを操作するためのhooksです。
#### DOMを操作する
例：inputのDOMを操作する
```jsx
const Demo: FC = () => {
  const inputRef = useRef<HTMLInputElement>(null)

  function selectInput() {
    const inputElem = inputRef.current
    if (inputElem) inputElem.select() // DOM node，DOMを操作するAPI
  }

  return (
    <div>
      <input ref={inputRef} defaultValue="hello world" />
      <button onClick={selectInput}>inputを選択する</button>
    </div>
  )
}

```

#### 普通のJS値として使う
useRefでJS値を操作して、コンポーネントは再レンダリングされない
```jsx
const Demo: FC = () => {
  const nameRef = useRef('JAPAN') // DOM ノードではなく，普通のJS変数です

  function changeName() {
    nameRef.current = 'JAPANESE' // refの値を更新しても，rerenderを実行しない （ stateを変更したら、 コンポーネントのrerenderが実行される ）
    // console.log(nameRef.current)
  }

  return (
    <>
      <p>name {nameRef.current}</p>
      <div>
        <button onClick={changeName}>change name</button>
      </div>
    </>
  )
}
```

## useMemo
関数コンポーネントであれば、毎回stateを変更すれば、rerenderされます。useMemoはあるデータをキャッシュされ、毎回rerenderする必要がありません。
PS：useMemoは大量の計算を伴うデータで使用することができます。
```tsx
const Demo: FC = () => {
  console.log('demo...')

  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(20)
  const [text, setText] = useState('hello') // stateの変更でコンポーネントがrerenderされる

  const sum = useMemo(() => {
    console.log('gen sum...') //　キャッシュする
    return num1 + num2
  }, [num1, num2])

  return (
    <>
      <p>{sum}</p>
      <p>
        {num1} <button onClick={() => setNum1(num1 + 1)}>add num1</button>
      </p>
      <p>
        {num2} <button onClick={() => setNum2(num2 + 1)}>add num2</button>
      </p>
      <div>
        <input onChange={e => setText(e.target.value)} value={text}></input>
      </div>
    </>
  )
}
```
ReactのHooksを基礎から理解する（useEffect編）

# useEffect


## コンポーネントの副作用
関数コンポーネントの実行に伴い、副作用がよく利用している。
例えば：
- コンポーネントがレンダリング完了後に、Ajaxリクエストを実行したい
- あるstate更新後に、Ajaxリクエストを実行したい

これらの機能はuseEffectではなくと実現できない。

#### useEffectを利用しない
下記のコードを関数コンポーネントに入れると、コンポーネントが初期レンダリングする際に実行されますが、毎回state更新後に、このconsole.logも実行されて、コントロールできない。
```jsx
console.log('Ajaxリクエストを実行する')
```
#### useEffect を利用する
コンポーネントが初期レンダリングする際に、実行される。
```jsx
useEffect(() => {
  console.log('Ajaxリクエストを実行する')
},[]) // 配列はuseEffectの依存関係です。
```

productListが更新される際に、実行される。
```jsx
useEffect(() => {
  console.log('Ajaxリクエストを実行する')
},[productList]) // 配列はuseEffectの依存関係です。
```

#### コンポーネントがunmouted際のライフサイクル
```jsx
useEffect(() => {
  console.log('product card mounted')
  return () => {
    console.log('product card unmounted')
  }
},[]) 
```

#### 開発環境でコンポーネントが2回実行される
 - React18から、開発環境でuseEffectが2回実行される。
 - コンポーネントがmounted, unmounted, mountedで実行され、早めにエラーを検知する。
【Git】モノレポ時のDev Containerにおけるバージョン管理

# はじめに
　サービス開発、特にAPIをコンパイル言語で構築する場合、[Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)を用いると便利である。しかし、モノレポ構造でサービスを開発している場合、.gitリポジトリが親ディレクトリに存在することでVSCodeがリポジトリを認識しない。gitコマンドを利用する際にVSCodeをLocalでReOpenし対応可能だが、現実的でない。
　今回はモノレポ構造の開発環境でDev Containerを用いた際にGitでバージョン管理を行う方法についてまとめる。

 # ディレクトリ構造
　開発を行うにあたり、ディレクトリ構造の抜粋を以下に示す。
> root/
>　├ .git
>　├ .devcontainer/
>　│　└ devcontainer.json
>　├ backend/
>　│　└ build
>　│　 　└ package
>　│　 　 　└ Dockerfile
>　└ docker-compose.yml

# docker-compose.yml
　利用する`docker-compose.yml`のサンプルを以下に示す。
```yml:docker-compose.yml
version: "3.6"

services:
  api:
    build:
      context: ./backend/build/package
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    volumes:
      - .:/go/src
    working_dir: /go/src/backend
    tty: true
```
　上記したdocker-compose.ymlはプロジェクトのルートディレクトリをコンテナにマウントしている。Dev Containersの[リファレンス](https://github.com/devcontainers/spec/blob/a2e4b49073fc0cc0c70f0191e904f74d6113d436/docs/specs/devcontainer-reference.md#workspacefolder-and-workspacemount)より、プロジェクトのルートディレクトリをマウントし、WorkingDirを指定することでGit管理が可能になる。

# devcontainer.json
　次に、Dev Containersのサンプル設定ファイルを以下に示す。
```json:devcontainer.json
{
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "api",
  "workspaceFolder": "/go/src/backend",
  "postAttachCommand": "git config --global --add safe.directory /go/src",
  "customizations": {
    "vscode": {
      "settings": {
        "git.openRepositoryInParentFolders": "always"
      },
      "extensions": [
        "golang.Go",
      ]
    }
  }
}
```
　上記のdevcontainer.jsonはdocker-compose.ymlを参照して設定を行っている。ここで重要になってくるのが`postAttachCommand`と`git.openRepositoryInParentFolders`である。
　まず、postAttachCommandには`git config --global --add safe.directory /go/src`コマンドを指定し、プロジェクトのルートディレクトリをsafe.directoryに指定する。この設定を行わない場合`Unsafe Repositories`となり自動でリポジトリを認識しない。
 　次にgit.openRepositoryInParentFoldersだが、その名の通り親ディレクトリの.gitディレクトリを認識させるための項目である。今回はalwaysにし、コンテナ内でVSCodeを開く際に毎回認識するよう設定している。

# まとめ
　本記事ではモノレポ構造のサービス開発において、Dev Containerを用いる際にGit管理を行う方法をまとめた。詳しいdocker-compose.ymlファイルの記載方法やDev Containersの設定については公式サイトを確認してほしい。
 　では、良いエンジニアライフを。
java static イニシャライザとstaticフィールド

## java static イニシャライザ
静的初期化ブロックは、括弧{}で囲まれ、前にキーワードstaticが付いているコードブロックです。
static イニシャライザは、クラスロードされる際に、実行されるブロックです。
## staticフィールド
staticフィールドはプログラムが実行される時に生成され、すべてのインスタンスが共有します。
## 実装
```java
public class StaticTest {
  public static void main(String[] args) {
    System.out.println(AAA.m);
  }
}

class AAA {
  static {
    m = 300;
  }
  static int m = 100;
}
```
## 実装結果
```cons
100

Process finished with exit code 0
```
【React・TypeScript】円グラフサンプル

# recharts

##### 作成したサンプル

https://nagajun1.github.io/sample_react_graph_ts/

##### ソースコード

https://github.com/NagaJun1/sample_react_graph_ts

##### ライブラリ

https://recharts.org/en-US/api/PieChart


##### インストールのコマンドライン

```
npm install recharts
```

##### 描写に必要となるコード

```.tsx
const App = () => {
  return (<>
      {/* ↓ 円グラフの項目、data の値次第で、要素の修正が可能 */}
      <PieChart width={width} height={height} className='margin10px'>
        <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={outerRadius} fill="#82ca9d" label={label} > {
          data.map((entry, index) =>
            (<Cell key={`cell-${index}`} fill={COLORS[index]} />)
          )
        } </Pie>
      </PieChart>
  </>);
}

/** 円グラフの各要素の色 */
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

/** 円グラフに登録するデータ */
let data = [
  {
    index: 0,
    name: 'データ1',
    value: 100,
  }, {
    index: 1,
    name: 'データ2',
    value: 200,
  }, {
    index: 2,
    name: 'データ3',
    value: 300,
  }, {
    index: 3,
    name: 'データ4',
    value: 40,
  }, {
    index: 4,
    name: 'データ5',
    value: 50,
  }
];
```

# React Google Charts

##### サンプルページ

https://nagajun1.github.io/sample_react_google_charts/

##### コード

https://github.com/NagaJun1/sample_react_google_charts

##### ライブラリ

https://www.react-google-charts.com/examples/pie-chart

##### インストールコマンド

```
npm install --save react-google-charts
```

##### 描写に必要となるコード

```App.tsx
const App = () => {
  return (<>
      <Chart
        chartType="PieChart"
        data={chartData}
        options={CHART_OPTIONS}
        width={"100%"}
        height={"600px"}
        chartEvents={chartEvents}
      />
  </>);
}

/** 円グラフに描写するデータ */
let chartData = [
  ["Data", "value"],
  ["データ１", 11],
  ["データ２", 2],
  ["データ３", 2],
  ["データ４", 2],
  ["データ５", 7],
];

/** 円グラフのオプション */
export const CHART_OPTIONS = {
  legend: "none",
  pieSliceText: "label", // 円グラフの各項目の表示形式
  title: "タイトル",
  pieStartAngle: 100,
}
```
SQLAlchemyで取得したレコードをまるっとコピーして新しいレコードとして挿入する方法

SQLAlchemyで取得したレコードをコピーして新しいレコードとして挿入する際、
カラムが多いとレコードインスタンスを作成したときにカラムごとに代入していくのがだるいので動的に値をセットできるようにする際の議事録です。

```python
# 既存のレコードを取得
existing_record = session.query(YourModel).filter(
    YourModel.id == record_id
).first()

# 新しいレコードインスタンスを作成
new_record = YourModel()

# 既存のレコードから新しいレコードへ属性をコピー
for column in YourModel.__table__.columns:
    setattr(new_record, column.name, getattr(existing_record, column.name))

# IDや他の一意性制約があるカラムの値を削除または変更
new_record.id = None  # IDが自動生成される場合、Noneに設定

# 新しいレコードをセッションに追加してコミット
session.add(new_record)
session.commit()
```

`YourModel.__table__.columns`を使うことでモデルに定義したカラム一覧が取得できます。
ループで回し、`setattr`と`getattr`を組み合わせることでオブジェクトに値を動的に取得、代入することができます。
ReactのHooksを基礎から理解する（useState編）

# useState
## usestate によりページが動的にする
たとえば、クリック数カウント機能の実装は、通常の変数はできません。 
つまり、通常の変数を変更しても、コンポーネントの再レンダリングの更新をトリガーすることはできません。

#### 通常のJS変数は実現できない
```jsx
import React from 'react'
function App() {
    let count = 0
    const add = () => {
        count++
    }
    return (
        <div>
            <button onClick={add}>add {count}</button>
        </div>
    )
}
export default App
```

#### useStateにて動的にページが更新できる
```jsx
import React, { useState } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const add = () => {
        setCount(count + 1)
    }
    return (
        <div>
            <button onClick={add}>add {count}</button>
        </div>
    )
}
export default App
```

## useStateは何でしょうか
State, A component's memory
- props:親コンポーネントによって渡される情報
    - components/ProductCard.tsx
```jsx
<ProductCard id={id} title={title} inStock={inStock}></ProductCard>
```
- state:コンポーネントの外部状態ではなく、内部状態です

## stateの特徴
### 非同期更新
```tsx
const add = () => {
    setCount(count + 1)
    console.log('cur count:', count) //非同期更新、最新のstateは取得できない　
}
```
### 統合される可能性があります
```tsx
const add = () => {
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
}
```
関数で更新する際に統合されない
```tsx
const add = () => {
    setCount(count => count + 1) // 関数を利用して、state更新は統合されない
    setCount(count => count + 1)
    setCount(count => count + 1)
    setCount(count => count + 1)
    setCount(count => count + 1)
}
```
### 不変データ（非常に重要！）
state には、値の型だけでなく、任意のJS型を指定できます
stateを直接変更することはできませんが、新しい値をsetStateにするセットする必要がある。
#### objectの書き方
```tsx
const [userInfo, setUserInfo] = useState({name: 'mei', age: 20})
const changeAge = () => {
    // userInfo.age = 21 //間違っている！
    // stateは不変データであり、stateの値を直接修正ではなく、新しい値を渡す必要がある
    setUserInfo({
        name: 'mei'
        age: 21
    })
    //setUserInfo({
    //    ...userInfo, // 分解構文、ES6
    //    age: 21
    //})
}
```

#### arrayの書き方
```tsx
const [list, setList] = useState(['x', 'y'])
const addItem = () => {
    setList(list.concat('z')
    // setList(list.push('z') // 間違っている
}
```
Windows Server 2022のライセンス認証をやってみた(インターネット経由)

# 近況
明けましておめでとうございます。
1月は記事を書く時間...はあったのですがダラダラと過ごしてしましました。もう2月です。
今月末にFF7 Remakeの2作目である[FF7 Rebrith](https://www.jp.square-enix.com/ffvii_rebirth/)が発売されるので、お休みを取ってがっつりやりたいと思います！(その前にAWSの資格を取らなければ...)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/d8b10671-f26a-9c71-5035-6f450069049a.png)

# Windows Serverのライセンス認証(インターネット経由)について

業務の中でWindows Server 2022のランセンス認証を実施する機会があり、一瞬詰まったので誰かのために書き残しておきます。

以前別件でもWinodwsServerのライセンス認証を行ったのですが、その際はインターネットに出られない環境だったので、電話認証によるライセンス認証を行いました。
(今回は電話認証ではなかったので楽でした)

その時は10数台のWindows Serverのライセンス認証を行うために、先輩と2人で手分けして行いましたが、
PCを並べてひたすら電話をかける。。。
傍から見ると詐欺グループみたいだったと思います。
※イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/f07d167c-ccfe-5bd9-1933-84a5f759977e.png)


今回は評価版ライセンス(Windows Server 2022 Datacenter Evaluation)からWindows Server 2022 Datacenterへアップグレードしました。
ここで気を付けないといけないのは、評価版のWindows Serverを立てる際(最初にインストールを行うとき)に、StandardかDatacenterかを選択することができます。
同じ評価版からでも、**Datacenterの評価版からStandardへはライセンス認証をおこなえない**ので、注意が必要です。(Standard→Datacenterはいける)


# 今回行った手順
今回のアップグレードはすべてコマンドで行いました。
参考にしたのは[MicroSoftのページ](https://learn.microsoft.com/ja-jp/windows-server/get-started/upgrade-conversion-options#converting-an-evaluation-version-to-a-retail-version)です。というか書いてある内容をそのまま実行しました。
GUIでできるのかは不明です。

①現在のエディション名を確認
 `DISM /online /Get-CurrentEdition`

評価版であれば画像のように「ServerDatacenterEval」と返されます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/d803618f-a98d-ec03-c53f-8efaf2268752.png)

②現在のエディションからどのエディションに変換できるかを確認
 `DISM /online /Get-TargetEditions`
 
ターゲットエディションにServerDatacenterと表示されれば、Datacenterエディションに変換できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/8a9c822d-b3c4-8b73-8813-acbfa40391ec.png)

③Windows Server の Microsoft ソフトウェアライセンス条項を保存

 `DISM /online /Set-Edition:<target edition> /GetEula:C:\license.rtf`

今回はターゲットエディションが②で確認した通り、ServerDatacenterなので、下記コマンドを実行しました。
 `DISM /online /Set-Edition:ServerDatacenter /GetEula:C:\license.rtf`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/9cc32d60-7f32-b19f-5729-31a73191a3e9.png)

④新しいエディション名と、対応する製品版のプロダクトキーを入力

手元にプロダクトキーがある前提で進めていましたが、下記コマンドに変更するエディション名とプロダクトキーを入力してコマンドを実行します。

 `DISM /online /Set-Edition:<target edition> /ProductKey:<product key> /AcceptEula`

プロダクトキーが12345-ABCDE-12345-ABCDE-12345の場合、下記のコマンドを実行します。

 `DISM /online /Set-Edition:ServerDatacenter /ProductKey:12345-ABCDE-12345-ABCDE-12345 /AcceptEula`

コマンド実行結果は画像のようになります。再起動して問題ない場合は`Y`を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/6ed6f779-cee2-add3-0b0f-3338134befe8.png)

⑤再起動後に設定からランセンス適用状態を確認します。
もし画像のようにライセンス認証がされていない場合は、赤枠の[トラブルシューティング]を押下します。
数分~数十分くらいかかりますが、正常にライセンス認証が完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/fb2694db-f350-ac88-d278-a1f77c63d878.png)

手順は以上です。

# さいごに
今回は初めてオンラインでライセンス認証しましたが、GUIだけではできないのが意外でした。
(僕が見つけられなかっただけで、普通にあるのかもしれませんが...)
こんな記事ですが、誰かの助けになれば幸いです。
それではまだどこかで。
ツリー構造をなすクラスを作る(その4)

[Nuget-TreeStructures](https://www.nuget.org/packages/TreeStructures/)

https://github.com/Houzkin/TreeStructure

必要と思う機能は一通り書き上げたつもりなので一旦の完成とします。

使い方、仕様については[ wiki ](https://github.com/Houzkin/TreeStructures/wiki)に書きました。
当初とはクラス名やメソッド名に変更があります。

`CombinableObservableCollection<T>`や`ReadOnlySortFilterObservableCollection<T>`、`Comparer<T>.Invert()`のようにコレクションに関するコードも追加しました。

ツリー構造と関係のないものはあまり書きたくなかったのですが、HierarchyWrapperの実装や派生先でのカスタマイズを考えたときに必要でした。
ツリー構造以外の場面でも使用できるので公開しています。

カスタマイズの部分だけは`ReadOnlySortFilterObservableCollection<T>`を定義しなくても[ObservableComputations](https://github.com/IgorBuchelnikov/ObservableComputations)を使えたのですが、使うことになるかどうかもわからないライブラリを含めるのは憚られました。


## 今後の方針
バグ修正に加え、定義済みTreeの追加を思案しています。
名前空間`TreeStructures.Tree;`は現在、DateTimeTreeとObservedPropertyTreeだけですが、ディレクトリをツリーにするとか、クラスの継承関係をツリーにするとか。

現状では、二分探索木、QuadTree、木の回転のような数学的な部分にはあまり踏み込んでいません。
データ構造としての表現に重きを置いています。
もしこの辺りのコードを書くのであればプロジェクトを分けようかと思います。
と言っても、今のところ書く予定はありません。

おわり。