OmniAICreator/Qiita-1.07M huggingface dataset:
増えていく電子部品の収納【2024年版】

　以前投稿した「[増えていく電子部品の収納](https://qiita.com/nekokurono7/items/8562f68475f835dd3e7b)」で紹介したケースが廃版になり、再販の様子を伺っていましたがなさそうなので代替品を探しました。良さげなものが見つかったので改めて記事にします。

https://qiita.com/nekokurono7/items/8562f68475f835dd3e7b

## 代替品
　今回ご紹介するものはこちらになります。
![IMG_20240803_002057_151x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308714/68b534a0-dbe1-6712-1841-8507440d4e24.jpeg)
　写真右が以前ご紹介した「ミニケース5個組」を33個収納した「カスタムバスケット L」になります。どちらも廃版となりました。写真左が、通販サイトAliexpressで見つけた「[透明なプラスチック製の収納ボックス,正方形の容器,宝石ビーズ用の長方形の包装箱,小さなアイテム,5個,10個](https://ja.aliexpress.com/item/1005006022845640.html)(J-2)」30個を「カスタムバスケット L」に収納したものになります。
 　1つの大きさは横7.5cm、縦5.0cm、高さ2.1cmとほぼ同じですが、まとめて収納すると高さ(厚み)の1mmが結構効いています。

　下の写真は抵抗を100本入れた様子です。ほんの少し余裕があります。ケースの肉厚は少し薄いですが問題ない程度です。
![IMG_20240729_214116_697x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308714/49f1337d-50e5-ba68-6944-13db62d0abea.jpeg)

## 購入価格
　2024年7月末時点で、10個入りを530円で購入しました。5個265円の計算なのでダイソーのミニケースよりは2倍以上の値段になりますが、丁度よいサイズのものが他にないので仕方ありません。
　Aliexpressはサイズ違いや組個数の違う商品がひとつの商品ページになっているので、買いたい商品を間違えないように注意が必要です。価格につられて違う商品をカートに入れないよう注意が必要です。「[透明なプラスチック製の収納ボックス,正方形の容器,宝石ビーズ用の長方形の包装箱,小さなアイテム,5個,10個](https://ja.aliexpress.com/item/1005006022845640.html)」の「J-2」というサイズの「10PCS」を購入しました。同じ商品が違うテナントにもあるので価格を比較してみてください。

## 他に
　Aliexpressをよく探したら同じ位のサイズで外ケース付きのものがありました。「[5dダイヤモンド塗装収納ボックス、DIY刺embroideryアクセサリー、ツールキット付き収納コンテナ、10グリッド、14グリッド、19グリッド、19グリッド、24グリッド、30グリッド](https://ja.aliexpress.com/item/1005006832144291.html)」。同時期に30グリッドを1284円で購入しました。5個あたり214円なのでこちらの方がコスパは上でした。ただ、外ケースが専用のものではないようで、きっちり収まらないのがイマイチでした。

![IMG_20240803_002111_871x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308714/b7949f8b-26dd-8870-c6e8-39fb241dbc7a.jpeg)

## 前記事の"あとは"の続き
　電子部品の在庫管理は、結局Googleスプレッドシートを使いました。PCでもスマホからでも参照できるので便利になりました。
 
以上
[Nuxt3] Cannot find module '@volar/typescript/lib/node/proxyCreateProgram' の解決方法

Nuxt3に以下の公式サイトを参考に、typescriptを導入しました。
```shell
npm install --save-dev vue-tsc@^1 typescript
```

https://nuxt.com/docs/guide/concepts/typescript

しかし、`npm run dev` 実行時に、以下エラーが発生しました。
```shell
Cannot start nuxt:  Cannot find module '@volar/typescript/lib/node/proxyCreateProgram' 
Require stack:
- C:\dev\myproject\node_modules\vite-plugin-checker\dist\esm\checkers\vueTsc\prepareVueTsc.js
```

## 解決方法
`npm install --save-dev vue-tsc@^1`ではなく、
`npm install --save-dev vue-tsc@^2`で解決しました。
```shell
npm install --save-dev vue-tsc@^2
```
PHPとJavaScriptを使用したServer-Sent Events (SSE) 通信の実装方法

# PHPとJavaScriptを使用したServer-Sent Events (SSE) 通信の実装方法

## 概要
Server-Sent Events (SSE) は、サーバーからクライアントへの一方向の通信を確立するための技術です。SSEを使用すると、サーバーからクライアントに対してリアルタイムでデータを送信できます。WebSocketとは異なり、SSEはHTTPプロトコルを使用し、ブラウザでのサポートが広範です。このガイドでは、PHPを使用してサーバー側を実装し、JavaScriptを使用してクライアント側でSSEを受信する方法を説明します。

## サーバー側（PHP）の実装

まず、PHPスクリプトを作成して、SSEストリームを生成します。以下は、サーバー側のPHPコード例です。

### `sse.php`

```php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$counter = rand(1, 10);

while (true) {
    // 現在の時間を取得
    $curDate = date(DATE_ISO8601);
    echo "data: The server time is: {$curDate}\n\n";
    echo "data: Random number: {$counter}\n\n";
    $counter++;
    
    // バッファをフラッシュしてデータを送信
    ob_flush();
    flush();
    
    // 3秒待機
    sleep(3);
}
?>
```

### 説明

1. **ヘッダーの設定**: `Content-Type` を `text/event-stream` に設定し、`Cache-Control` を `no-cache` に設定します。
2. **無限ループ**: 無限ループを使って、クライアントに対して定期的にデータを送信します。
3. **データの送信**: `echo` でデータを送信し、`ob_flush()` と `flush()` を使って出力バッファをフラッシュします。
4. **待機**: `sleep(3)` で3秒間待機します。

## クライアント側（JavaScript）の実装

次に、クライアント側でSSEストリームを受信するJavaScriptコードを作成します。

### `index.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Example</title>
</head>
<body>
    <h1>Server-Sent Events Example</h1>
    <div id="result"></div>

    <script>
        if (!!window.EventSource) {
            var source = new EventSource('sse.php');

            source.onmessage = function(event) {
                var resultDiv = document.getElementById('result');
                resultDiv.innerHTML += event.data + '<br>';
            };

            source.onerror = function(event) {
                console.error("EventSource failed:", event);
            };
        } else {
            console.log("Your browser doesn't support SSE.");
        }
    </script>
</body>
</html>
```

### 説明

1. **EventSourceの作成**: `EventSource` を使ってサーバー側の `sse.php` に接続します。
2. **メッセージの受信**: `source.onmessage` を使って、サーバーから送信されるデータを受信します。
3. **エラーハンドリング**: `source.onerror` を使って、エラーが発生した場合にエラーメッセージを表示します。

## まとめ

SSEを使用すると、サーバーからクライアントに対してリアルタイムでデータを送信することができます。PHPとJavaScriptを組み合わせることで、簡単にSSE通信を実装できます。SSEは、チャットアプリケーションやリアルタイムダッシュボードなど、多くのユースケースで非常に有用です。
JavaScriptの即時関数（IIFE）について

# JavaScriptの即時関数（IIFE）について

## 概要
即時関数（IIFE）は、定義と同時に実行される関数のことです。主にJavaScriptのスコープを管理するために使用され、モジュールパターンやクロージャを利用する際に非常に便利です。

## IIFEの基本構文

IIFEは、関数を定義した直後に実行するための構文を持っています。基本的な構文は以下のようになります。

```js
(function() {
    // ここにコードを書く
})();
```

### 例

以下は、簡単なIIFEの例です。

```js
(function() {
    var message = "Hello, IIFE!";
    console.log(message);
})();
```

このコードは、"Hello, IIFE!" というメッセージをコンソールに表示します。関数が定義されるとすぐに実行されるため、`message`変数は関数のスコープ内でのみ有効です。

## IIFEのメリット

### 1. **スコープの管理**

IIFEを使用することで、変数や関数をグローバルスコープから隔離し、他のコードと衝突しないようにすることができます。これにより、予期しない変数の上書きや競合を防ぐことができます。

```js
(function() {
    var localVar = "I am local";
    console.log(localVar);
})();
console.log(localVar); // エラー: localVarは定義されていません
```

### 2. **プライベート変数とメソッド**

IIFEを使うことで、モジュールパターンを実装し、プライベート変数やメソッドを作成することができます。これにより、外部からアクセスできない内部データや機能をカプセル化できます。

```js
var MyModule = (function() {
    var privateVar = "I am private";

    return {
        publicMethod: function() {
            console.log(privateVar);
        }
    };
})();

MyModule.publicMethod(); // "I am private"
```

### 3. **グローバル変数の削減**

IIFEを使用すると、グローバルスコープに変数や関数を持たずに済むため、グローバル変数の汚染を防ぎます。これにより、コードのモジュール性が向上し、他のスクリプトとの競合を避けることができます。

### 4. **初期化処理**

IIFEは、ライブラリやフレームワークの初期化処理に使うことができます。特定の初期設定や一度だけ実行する処理をIIFE内で実行することで、グローバルスコープを汚さずに初期化できます。

```js
(function() {
    // 初期化処理
    console.log("Initialization complete.");
})();
```

## グローバル関数の定義

グローバルスコープに関数を定義する際に、`window`オブジェクトを使用する方法もあります。この方法は、特にブラウザ環境でグローバルにアクセスできる関数を作成するために使われます。

### 例

以下は、`window`オブジェクトを使ってグローバル関数を定義する例です。

```js
window.myGlobalFunction = function() {
    console.log("This is a global function.");
};
```

このコードにより、`myGlobalFunction`はグローバルスコープで利用可能になります。他のスクリプトからもこの関数を呼び出すことができます。

### グローバル関数をIIFEで定義する

IIFE内で`window`オブジェクトを使ってグローバル関数を定義することもできます。これにより、即時関数のスコープ内で定義された関数がグローバルに公開されます。

```js
(function(global) {
    global.myGlobalFunction = function() {
        console.log("This is a global function defined within an IIFE.");
    };
})(window);
```

この方法を使うと、IIFEのスコープ内で関数を定義しながら、その関数をグローバルに公開することができます。

## IIFEの歴史と変遷

IIFEは、JavaScriptの初期から使われていた技法です。しかし、ES6（ECMAScript 2015）の導入により、`let`や`const`によってブロックスコープが追加されたため、IIFEの使用は減少しました。これらの新しい構文を使うことで、同様のスコープ管理がより直感的に行えるようになりました。

## まとめ

IIFEは、スコープを管理し、グローバル環境を汚染せずに変数や関数を隠蔽するための強力な技法です。特に古いコードベースやES6以前の環境では、IIFEがまだ広く使用されていますが、ES6以降は`let`や`const`によって同様の目的が達成できるため、用途に応じて使い分けると良いでしょう。さらに、`window`オブジェクトを使ったグローバル関数の定義も、ブラウザ環境での利便性を高める手段として覚えておくと良いでしょう。
プリザンターを1.4.0.1から1.4.6.4へバージョンアップする

# はじめに
新しいUIになった1.4.3.0を使いたいと思っていたが、なかなかアップデートするタイミングがなく今に至り、触りたい気持ちが抑えきれなくなってきたので今日頑張ることにしました。

:::note info
**説明範囲について**
ここでは以下の説明は行いません。
* プリザンターのダウンロード
* インターネット インフォメーション サービス（IIS）マネージャーの利用方法
:::


## アップデート環境

OS：windows 11 pro
DB：SQL Server 2019
プリザンター：1.4.0.1

:::note info
**アップデートするプリザンターについて**
プリザンターはRDS.jsonしか変更していません。
つまり、データベース接続の設定のみで、メール設定等は行っていない状態です。
:::

:::note info
**プリザンターのインストール場所**
今回はプリザンターのチュートリアルと同じ場所にプリザンターを格納しています。

```
C:\web\pleasanter
```
:::

# 【補足】アップデートについて

下記に詳細な手順が掲載されています。
バージョンが大きく異なる場合は一読した方が良いとおもいます。

https://pleasanter.org/manual/version-up-net

# アップデート手順
今回行った.4.0.1から1.4.6.4へアップデートする手順となります。

### １．RDS.jsonのバックアップ

RDS.jsonをバックアップします。

```
C:\web\pleasanter\Implem.Pleasanter\App_Data\Parameters\Rds.json
```

### ２．既存のプリザンターを退避する
「インターネット インフォメーション サービス（IIS）マネージャー」からプリザンターを停止し、別領域へ退避させます。

:::note info
**公式見解**
公式は **念の為、既存のC:\web\pleasanter\をC:\web\pleasanter_bk\などとリネームしてバックアップしたうえで、新バージョンを配置することを推奨します。** とあるので、バックアップを推奨します。
:::

### ３．プリザンターのコピー
プリザンター（1.4.6.4）をコピーします。

```
C:\web\pleasanter
```

### ４．CodeDefinerの実行
インストール手順では変更されていますが、本家のバージョンアップ資料はコマンドが古いので、新しいコマンドで実行します。

```bat
cd C:\web\pleasanter\Implem.CodeDefiner
dotnet Implem.CodeDefiner.dll _rds /l "ja" /z "Tokyo Standard Time"
```

参考にインストール手順のURLを記載します。

https://pleasanter.org/manual/getting-started-pleasanter-windows

#### ５．プリザンターの起動確認
「インターネット インフォメーション サービス（IIS）マネージャー」からプリザンターを起動します。
無事プリザンターが起動できているかと思います。

# その他

### 新UIの素晴らしさについて
本家記事にカッコイイUIが載っています。

https://pleasanter.org/archives/new-thema-cerulean
[paiza]3Dプリンタ (paizaランク B 相当)

# ようやくBランクか。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/3d_printer

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!
なんなら今回から入力チェックすらめんどくさくなったので、正常系のデータしか勝たん。

```javascript:3dPrinter.js
// [問題文（原文）]
// あなたは念願の3Dプリンタを購入しました。早速、いろいろな立体を出力して楽しみましょう！
// 3Dプリンタに入力される立体のデータは、大きさ 1×1×1 の立方体（セルという）を一つ以上組み合わせることで得られます。より正確に述べると次のようになります：
// 三次元空間で図１のような座標系 (x,y,z) を考えます。
// 立体データは、各座標 (x,y,z) でのセルが立体に含まれるかどうかを指定することで得られます。例えば、図２の立体は 14 個のセル (1,1,1), (1,2,1), (1,3,1), (2,1,1), (2,2,1), (3,1,1), (1,1,2), (1,2,2), (2,1,2), (2,2,2), (1,1,3), (1,2,3), (2,1,3), (2,2,3) を組み合わせることで得られます。
// あなたはまず、出力したい立体のデータを作りました。あとは、データを3Dプリンタに入力して印刷するだけです。
// しかし、データにミスがあっては大変です。慎重なあなたは、実際に印刷を始める前に、出力される立体を正面（x軸の正の方向）から見たときの図を求めてみることにしました。（図３）
// 立体のデータが入力された時、この立体を正面から見たときの図を出力するプログラムを書きましょう。
function threedPrinter(lines) {
  // めんどくさくなったので入力チェック省略
  const xyz = lines[0].split(" ");
  const seeX =
    Array.from({ length: xyz[2] }, (v, k) => Array.from({ length: xyz[1] }, (v, k) => Array.from({ length: xyz[0] }, (v, k) => [])));
  let zIndex = 0;
  let yIndex = 0;
  lines.slice(1).forEach(line => {
    if (line === "--") {
      zIndex++;
      yIndex = 0;
      return;
    }
    seeX[zIndex][yIndex] = Array.from(line);
    yIndex++;
  });
  // 一番上から見るためにリバースしてからぶん回す
  seeX.reverse().forEach(z => {
    const shows = Array.from({ length: xyz[1] }, (v, k) => ".");
    z.forEach(y => y.forEach((x, i) => shows[i] = (x === "#") ? x : shows[i]));
    console.log(shows.join(""));
  });
}

module.exports = {
  threedPrinter
};
```
とりあえずZYXの多重配列に変換してから、
それを逆転してYのループ中に#があったらそのYの位置のXは#と確定させてる感じ。

ちなみに渡ってきた配列のループで設定する方法だともっと簡潔に書ける
```javascript:3dPrinter.js
function threedPrinter(lines) {
  const xyz = lines[0].split(" ");
  let zIndex = 0;
  const result = Array.from({ length: xyz[2] }, (v, k) => Array.from({ length: xyz[1] }, (v, k) => "."));
  lines.slice(1).forEach(line => {
    if (line === "--") {
      zIndex++;
    } else {
      Array.from(line).forEach((x, index) => result[zIndex][index] = x === "#" ? x : result[zIndex][index]);
    }
  });
  result.reverse().forEach(z => console.log(z.join("")));
}

module.exports = {
  threedPrinter
};

```
**ね、簡単でしょ？**
#001: Resource GroupのBicep定義

※本記事は、個人の意見および個人的活動で得た経験を記したものであり、会社を代表するものではありません

# 1. Resource Groupの定義

今回は以下の定義で構築する。

- name = “RagSystem”
- region = “Japan East”

# 2. リソースの作成

## 2-1. BicepテンプレートでResource Groupをデプロイする

Bicepを使ったリソースグループの作成

https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/create-resource-group

BicepのVSCode拡張機能

https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/install#vs-code-and-bicep-extension

Bicepにタグを指定する方法

https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/management/tag-resources-bicep

### 2-1-1. Bicepテンプレート

https://github.com/masatoshisato/RagSystem/tree/v1.0.0/infra/resource-group

リソースグループだけなのでBicepはシンプル。PortalログインしてUI操作するより、コマンド実行がよい。実行ログも簡単に残せるし。

小さいテンプレートだが少しだけ工夫してみた。今後作成するBicepも自分仕様として同様に定義していく。より大きいテンプレートになるに従って、効果を発揮してくれると期待。

- パラメータを用いて固定値を排除
- テンプレート内で以下領域が明確にわかるように強調コメントを利用
    - 各リソース共通パラメータの定義領域
    - 特定リソースのパラメータの定義領域
    - 各リソースの定義
- 各パラメータには普段使い用のデフォルト値を指定
- タグには部署(”dept”)、デプロイ実行時間(”lastDeployed”)、デプロイ名(”deploy”)を含める
- デプロイメント名は指定しないことで、Bicepのファイル名が設定されるようにする（デプロイメント名のデフォルト値はBicepファイル名）

タグの「デプロイ実行時間」は、今のところは「アクティビティログを見なくてもデプロイした時間がわかる」程度。

デプロイ名は「deployment」関数で自動取得したものセットする。これはデプロイメント名を指定しないことによって「デプロイメント名」＝「Bicepファイル名」となるBicep仕様を利用したもの。これにより、どのリソースがどのBicepファイルでデプロイされたものかを識別できる。

上記の各パラメータはbicepparamファイルに定義し、コマンドラインでパラメータを指定する手間を省いた。

### 2-1-2. az deploymentコマンド

Bicepのパラメータに色々定義したけど、コマンド実行時は使用するBicepファイル名とリソースグループ名の２つのみを指定。

最初にログイン中のアカウント、サブスクリプションを確認してから実行。

```bash
sato@[9:30:44]:~/proj/RagSystem% az account show
...
ログイン中のテナント、サブスクリプション、ユーザーが表示される。
...

sato@[9:30:44]:~/proj/RagSystem/resource-group% az deployment sub create --template-file rg.biep　--parameters rg.bicepparam
...
実行結果が表示される
...

```

## 2-2. [issue] bicepテンプレートのデプロイ時にローカルフォルダーのpermissionエラー解消方法

デプロイする時に、インストール時に作成されるBicepのconfigファイルの権限エラーが発生して実行できない事象が発生。

configファイルというものが存在することすら知らなかったし、エラーメッセージがこれしか出力されないから意味不明。

```bash
sato@[10:36:23]:~/proj/RagSystem% az deployment sub create --template-file rg.bicep --parameters rg.bicepparam
[Errno 13] Permission denied: '/Users/sato/.azure/bin/bicep'
```

権限は問題ないはず、原因も不明。バックエンド側で他のプロセスとファイルの取り合いになっているのかも。でも簡単な方法で解決できたから多分違う理由。

```bash
sato@[10:36:05]:~/.azure/bin% ls -Fal
total 0
drwxr-xr-x   3 sato  staff   96  6  9 10:30 ./
drwxr-xr-x  27 sato  staff  864  6  9 10:32 ../
-rw-r--r--   1 sato  staff    0  6  9 10:30 bicep
```

対処方法は”bicep”ファイルを削除してaz bicep拡張機能を再インストール。

これで実行できるようになった。

```bash
sato@[10:44:24]:~% rm -rf .azure/bin/bicep
sato@[10:44:31]:~% az bicep install
Installing Bicep CLI v0.28.1...
The configuration value of bicep.use_binary_from_path has been set to 'false'.
Successfully installed Bicep CLI to "/Users/sato/.azure/bin/bicep".
```

参考情報

https://github.com/Azure/azure-cli/issues/22942

# 3. 実行結果

リソースグループの作成結果、タグも意図した通りに付与されていることを確認。

```bash
sato@[11:17:45]:~/proj/RagSystem% az group show -n RagSystem
{
  ...
  "location": "japaneast",
  ...
  "name": "RagSystem",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": {
    "deploy": "rg",
    "dept": "default",
    "lastDeployed": "07/07/2024"
  },
  ...
}
sato@[11:17:49]:~/proj/RagSystem%
```
【Next.js】V15でCache仕様が変わる！

一生懸命書いたNext.js Cacheシリーズですが、Next.js V15において、いくつかはデフォルトでCacheされない動きになるようです。

[公式ドキュメント](https://nextjs.org/blog/next-15-rc#caching-updates)


1. [Request Memoization]
1. [Data Cache]
1. [Full Route Cache]
1. [Router Cache]


間の悪いことに、Cacheシリーズ最後の記事が2024/5/22で、V15のドキュメントが5/23に出てました。


## ServerサイドにおけるFetchリクエスト

[Data Cache]が影響を受けます。

デフォルトが`no-store`となり、Cacheをすっ飛ばして、Resourceにアクセスします。

```javascript
// V14まで
fetch(`https://...`, { cache: 'force-cache' })

// V15
fetch(`https://...`, { cache: 'no-store' })
```

## Route Handler GET Method

Cacheシリーズには書いていませんでしたが、Route Handler、つまりRest ApiのGETメソッドがデフォルトのCache仕様を止めるとのことです。

## Client Router Cache

[Router Cache]が影響を受けます。

**In-Memory**で、React Server Component(RSC) PayloadをRouteごとにCacheする仕組みで、それがデフォルトで無効になるようです。


## 所感

「せっかく4種類もまとめたのに」という気持ちはありますが、今回の変更でCache周りはシンプルになったので良かったと考えています。

というのも、V14においてはCache仕様を理解していなければ、最新の情報が画面に反映されないといった問題が起きやすく、中々難易度は高かったなと。

Developer Experienceも大事にしているNext.jsならではの変更を垣間見れたので良しとしましょう！



[Request Memoization]: https://qiita.com/Leech/items/b118ae11d348ca37c271
[Data Cache]: https://qiita.com/Leech/items/667d5cca203254dabfd5
[Full Route Cache]: https://qiita.com/Leech/items/405b0641d9d30f55a51e
[Router Cache]: https://qiita.com/Leech/items/c9669e7d109651d1106c
【VSCode】リンクを開くブラウザを設定する方法

## 設定方法

`settings.json`に`workbench.externalBrowser`を記述することでリンクを開くブラウザをOSのデフォルトブラウザ以外に設定できます。

Arcに設定する場合には以下のように記述します。

```json:settings.json
{
  "workbench.externalBrowser": "arc"
}
```

![画面収録 2024-08-03 0.05.14 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/8ad9cf58-ce02-ee76-4c1f-571a03043f42.gif)


## 参考

https://code.visualstudio.com/updates/v1_92#_configure-the-browser-to-open-links
ReactアプリをKurocoにデプロイする際に必要なbuild.ymlについて

# はじめに
本記事では、Reactで作成したアプリをKurocoへデプロイする際に必要なbuild.ymlについてメモした記事です。

build.ymlの内容以外は、[Kurocoビギナーズガイド](https://kuroco.app/ja/docs/tutorials/beginners-guide/)と同じ内容なので、そちらをご参照ください。

# nuxt3のテンプレートを元に、YAMLファイルを修正
nuxt3のテンプレートに記載されている、部分を下記のように修正することで、デプロイされます。
```yml:nuxt3テンプレート
      - name: Generate
        run: npm run generate
      - name: Zip artifact for upload
        run: cd ./.output/public && zip ../../dist.zip . -r
```
```yml:修正内容
      - name: Generate
        run: npm run build
      - name: Zip artifact for upload
        run: cd ./build && zip ../dist.zip . -r
```
邪悪なHTML

太古の昔よりweb pageには定石があった。pageの左側にlink項目、右側に主要文書を配置するというものだ。これは操作性が悪過ぎて非常に不便だ。mouseを左右に大きく動かす羽目になるからだ。
```html:単純な例
<!doctype html>
<head><title>T</title>
<style>
body,html{
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden
}
iframe{border:0;width:100%;height:100%}
.main{right:0;left:200px}
.menu{left:0;width:200px}
.main, .menu{overflow:auto;position:absolute;top:0;bottom:0}
</style>
<base target=main></head>
<div class=menu>menu
	<dl>
	<dt><a href="data:text/html,AbC">abc</a>
	<dt><a href="data:text/html,dEfG">def</a>
	<dt><a href="data:text/html,HiJkLm">ghij</a>
	<dt><a href="data:text/html,NoPqR">klmn</a>
	</dl>
</div>
<div class=main><iframe name=main></iframe></div>
```
以下のようにlink項目を右側に配置すれば楽ちんなのである。scroll量が多いほど効果は顕著。しかし昔からこういう形式は少数派という印象
```html
<!doctype html>
<head><title>T</title>
<style>
body,html{
	height:100%;
	margin:0;
	padding:0
}
iframe{border:0;width:100%;height:100%}
.main{left:0;right:200px}
.menu{right:0;width:200px}
.main, .menu{overflow:auto;position:absolute;top:0;bottom:0}
</style>
<base target=main></head>
<div class=main><iframe name=main></iframe></div>
<div class=menu>menu
	<dl>
	<dt><a href="data:text/html,AbC">abc</a>
	<dt><a href="data:text/html,dEfG">def</a>
	<dt><a href="data:text/html,HiJkLm">ghij</a>
	<dt><a href="data:text/html,NoPqR">klmn</a>
	</dl>
</div>
```
[R言語 / rlang] プログレスバーを表示させたい

# 概要

タイトルの通り( \*˙︶˙\*)وｸﾞｯ!

# 実行環境

- Google Cloud Platform の VertexAI
- jupyter notebook

# ソースコード

これで実現できた。

```r:R言語
length <- 100000

pb <- txtProgressBar(min = 0, max = length, style = 3)


# 空のリストを作成
list_index = list()
count = 0
for (index in 1:length){
    if (index %% 1000 == 0) {
        list_index = append(list_index, index)
    }
    count = count + 1
    setTxtProgressBar(pb, count)
}
```


# 実行結果

こんな感じになって、リアルタイムに進捗が更新されるよ！( \*¯ ꒳¯\*)✨

![スクリーンショット 2024-05-22 9.18.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/cb0764ce-01ee-235d-74ef-13029545e054.png)


# 補足

もしかしたら何かライブラリ使っているのかもしれないけど、 VertexAI 上だったからなのか、意識せずに、 `txtProgressBar` などを呼び出すことができた。

ローカルマシン上だとこうはいかないのかもしれない[壁]д・)ﾁﾗｯ
Azure: azure-search-openai-demo を日本語利用するなら、日本語化して使おう

# 拝啓

以下のSampleをベースに開発してたら、Index の Analyzer が英語版になっていることに気付いた。

ということで、その対処法の備忘録

https://github.com/Azure-Samples/azure-search-openai-demo

# 結論

日本語化をする為、以下の環境変数を設定してから、
1. AZURE_SEARCH_QUERY_LANGUAGE = ja-JP
1. AZURE_SEARCH_QUERY_SPELLER = ja-JP
1. AZURE_SEARCH_ANALYZER_NAME = ja.microsoft

- Query Speller は、まだ日本語版は未対応。今後に期待 [spell check](https://learn.microsoft.com/ja-jp/rest/api/searchservice/preview-api/search-documents#querylanguage)
- Analyzer は、ja.lucene も選べるが、実際に使ってみると、PDF 認識で微妙だったのでパス

詳しくは <code>deploy_existing.md</code> に書いてあった。

> You can also customize the search service (new or existing) for non-English searches:
>
> 1. To configure the language of the search query to a value other than "en-US", run `azd env set AZURE_SEARCH_QUERY_LANGUAGE {Name of query language}`. ([See other possible values](https://learn.microsoft.com/rest/api/searchservice/preview-api/search-documents#queryLanguage))
> 1. To turn off the spell checker, run `azd env set AZURE_SEARCH_QUERY_SPELLER none`. Consult [this table](https://learn.microsoft.com/rest/api/searchservice/preview-api/search-documents#queryLanguage) to determine if spell checker is supported for your query language.
> 1. To configure the name of the analyzer to use for a searchable text field to a value other than "en.microsoft", run `azd env set AZURE_SEARCH_ANALYZER_NAME {Name of analyzer name}`. ([See other possible values](https://learn.microsoft.com/dotnet/api/microsoft.azure.search.models.field.analyzer?view=azure-dotnet-legacy&viewFallbackFrom=azure-dotnet))


https://github.com/Azure-Samples/azure-search-openai-demo/blob/main/docs/deploy_existing.md?plain=1#L55-L59



# 参考

- default変えたい時とか

https://github.com/Azure-Samples/azure-search-openai-demo/blob/main/app/backend/prepdocs.py#L284C5-L290C1

- search について

https://azure.github.io/jpazpaas/2023/06/20/cognitive-search-unexpected-search-results.html

# あとがき

<code>deploy_existing.md</code> に気付くまでは、ソース直接編集しちゃってましたよ :sweat:
10の割り算(記事の紹介)(3435973837)


目的
リンク切れになっていたので記事の紹介

↓クリック↓

https://www.rad51.net/blog/diary/index.php?itemid=902

↑クリック↑


![o_coq284.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/cf19a98b-cc95-0935-d3ae-edc1375d6beb.jpeg)
AtCoder 勉強記録[C++] その38

AtCoderで入茶を目指して勉強しています。
勉強を継続するために投稿を始めました。
もともとアカウントを作成していましたが、今年の4月から本格的に勉強を始めました。
一応自分用に解法を書いていますが雑です、自分で読み返して困ったら修正します。
[私のアカウント](https://atcoder.jp/users/nanami_brother)
[解いた問題](https://kenkoooo.com/atcoder/#/table/nanami_brother)
# 本日解いた問題
## B - Maintain Multiple Sequences
[B - Maintain Multiple Sequences](https://atcoder.jp/contests/abc271/tasks/abc271_b)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll n, q;
  cin >> n >> q;
  vector<vector<ll>> a(n, vector<ll>(0));
  for(int i = 0; i < n; i++){
    ll l;
    cin >> l;
    for(int j = 0; j < l; j++){
      ll x;
      cin >> x;
      a[i].push_back(x);
    }
  }
  for(int i = 0; i < q; i++){
    ll s, t;
    cin >> s >> t;
    cout << a[s-1][t-1] << endl;
  }
}

```
### 解法
すべての数列を2次元配列として保持しておき、入力された`Sk`、`Tk`に対応する値を出力する。
## C - Collision 2
[C - Collision 2](https://atcoder.jp/contests/abc243/tasks/abc243_c)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll n;
  cin >> n;
  vec x(n), y(n);
  map<ll, pair<ll,ll>> cnt;
  rep(i, n) cin >> x[i] >> y[i];
  string s;
  cin >> s;
  map<ll, vector<ll>> mp;
  for(int i = 0; i < n; i++){
    mp[y[i]].push_back(i);
  }
  for(auto const&[k, v]:mp){
    vector<ll> tmp = v;
    vector<pair<ll, char>> p;
    for(int i:tmp){
      p.emplace_back(x[i], s[i]);
    }
    sort(p.begin(), p.end());
    for(int i = 0; i < p.size()-1; i++){
      if(p[i].second=='R' && p[i+1].second=='L'){
        cout << "Yes" << endl;
        exit(0);
      }
    }
  }
  cout << "No" << endl;
}

```
### 解法
`Y`座標が同じ値をすべて保持しておき、それぞれを`X`座標でソートし、ソートしたものにおいてi番目の値が`R`、i+1番目の値が`L`である場合`Yes`となる。
## C - Choose Elements
[C - Choose Elements](https://atcoder.jp/contests/abc245/tasks/abc245_c)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll n, k;
  cin >> n >> k;
  vec a(n), b(n);
  rep(i, n) cin >> a[i];
  rep(i, n) cin >> b[i];
  vec x(n, 0);
  vector<bool> dp(n+10, false);
  vector<bool> ep(n+10, false);
  dp[0] = true, ep[0] = true;
  for(int i = 1; i < n; i++){
    if(abs(a[i-1] - a[i])<=k && dp[i-1]) dp[i] = true;
    if(abs(b[i-1] - a[i])<=k && ep[i-1]) dp[i] = true;
    if(abs(a[i-1] - b[i])<=k && dp[i-1]) ep[i] = true;
    if(abs(b[i-1] - b[i])<=k && ep[i-1]) ep[i] = true;
  }
  if(dp[n-1]||ep[n-1]) cout << "Yes" << endl;
  else cout << "No" << endl;
}

```
### 解法
簡単なDPを用いて解いていく。
道民でも別にさくらVPSの石狩リージョンは有利ではない

さくらのVPSサーバーを石狩リージョンで借りています。
私が道民なので北海道のデータセンターを応援したいのと、物理的に距離が近いしちょっと速いんじゃないかな、という目論見からです。

でも今日、ふと思ったんです。本当に速いのか、って。なので調べてみました。

## 調査

北海道内の自宅から石狩のさくらvpsまでの通信経路を調べます。といっても凝ったことはせず、tracert を実行するだけです。一部マスキングして結果を掲載します。

```
  1     1 ms     1 ms    <1 ms  192.168.11.1
  2     1 ms     1 ms     1 ms  192.168.3.1
  3    20 ms    20 ms    19 ms  softbankXXXXXXXXXXXX.bbtec.net
  4    19 ms    21 ms    19 ms  softbankXXXXXXXXXXXX.bbtec.net
  5     *        *        *     要求がタイムアウトしました。
  6    58 ms    23 ms    20 ms  101.203.88.51
  7    41 ms    38 ms    38 ms  iskrxxxx-xxxxxx.bb.sakura.ad.jp 
  8    39 ms    39 ms    38 ms  iskrxxxx-xxxxxx.bb.sakura.ad.jp
  9    39 ms    43 ms    39 ms  iskrxxxx-xxxxxx.bb.sakura.ad.jp
 10    42 ms    39 ms    39 ms  vps-isxx-xxxx-xxxxxx-x.sakura.ad.jp
 11     *        *        *     要求がタイムアウトしました。
 12    40 ms    39 ms    43 ms  ik1-xxx-xxxxx.vs.sakura.ne.jp
```

2番まではローカルネットワーク、7番のiskr-で始まるサーバーが石狩のサーバーでしょう。2-3, 6-7の間で20ms程度大きく飛ぶ部分がありますね。
このsoftbankのルータがどこに位置しているのかは、調べましたがわかりませんでした。
ところで、北海道-東京間のレイテンシはだいたい20msほどだそうです。


……つまり、通信時に **東京のサーバーを経由している可能性が高い**、ということですね。なんてこった。なんなら片道だけで済む分、東京リージョンで借りたほうが速いということです。

## 結論
低レイテンシが必要であれば東京に住みましょう。
クリーン・アーキテクチャーを再読したメモ

https://www.amazon.co.jp/Clean-Architecture-%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E6%A7%8B%E9%80%A0%E3%81%A8%E8%A8%AD%E8%A8%88-Robert-C-Martin/dp/4048930656

なんどか再読していまだにクリーンアーキテクチャとかよくわからないが、冒頭のパラダイムや設計・コンポーネントの原則は繰り返し読んでいる
ひどいソースコードを見てげんなりしたときにどの原則に違反しているのかを考える。

---
パラダイム
・関数型プログラミング
・オブジェクト指向プログラミング
・構造化プログラミング

---
設計の5原則
・SRP：単一責任の原則「モジュールはただ一つのアクターに対して義務を負うべきである」
右足と左足を別のボートに置いて漕ぎ出せば水に落ちる、一つのモジュールは一つのボートに乗せなければならない
・OCP：オープンクローズドの原則「ソフトウェアの構成要素は拡張に対しては開いていて、修正に対して閉じていなければならない」
変更と拡張は既存の機能に対して影響を与えない修正が拡張
単一責任の原則を実践するために、何の仕事もしない、ｐジュールを作成し、それを拡張していくようなやり方でシステム開発をする
・LSP：リスコフの置換原則
インターフェイスと実装に関するソフトウェア設計の原則
きちんと定義されたインターフェイスに依存している
わかるようなわからないような、違反の例が分かりにくかった
・ISP：インターフェイス分離の原則
そのまんまだな、インターフェイスは具象を持たない名前だけ保持しているクラス
・DIP：依存関係逆転の原則
ソースコードの依存関係が具象ではなく、抽象だけを参照しているもの。それが最も柔軟なシステムである。
抽象と呼んでいるものは名前のことだな
関数名であれ、クラス名であれ、フィールド名であれ

---
コンポーネント凝集性の3原則
・REP:再利用・リリース等価の原則：再利用の単位とリリースの単位は等価になる
・CCP:閉鎖性共通の原則（SRP）：同じ理由、同じタイミングで変更されるクラスをコンポーネントにまとめること。変更の理由やタイミングが異なるクラスは、別のコンポーネントに分けること。
・CRP:全再利用の原則（ISP）：コンポーネントのユーザーに対して、実際には使わないものへの依存を強要してはいけない。
言い換えると不要なものに依存しないこと

REP：再利用性のためのグループ化←→再利用性の低下
CCP：保守性のためのグループ化←→変更すべきコンポーネントの増加
CRP：不要なリリース作業を減らすための分割←→不要なリリース作用の増加

REPとCCP⇒コンポーネントを大きくする
CRP⇒コンポーネントを小さくする

ブレークスルー：DevOpsの1日10回のリリース、1日170回の本番リリース

---
コンポーネントの結合の3原則
・ADP:非循環依存関係の原則
→コンポーネントの依存グラフに循環依存があってはならない
コンポーネント図に起こした時の話なのかな。
コンポーネントの構造をトップダウンで設計するのは不可能だということだ。

・SDP:安定依存の原則
安定度の高い方向に依存すること
安定度とは変更の頻度とは関係ないということだ
うーんよくわかってないな。

・SAP:安定度・抽象度透過の原則
コンポーネントの抽象度はその安定度と同程度でなければいけない。
抽象度が高くなる方向に依存するべきということになる。

アーキテクチャのポイント
フレームワーク非依存・テスト可能・UI非依存・DB非依存・外部エージェント非依存
ファイナンスAPIとそのモダンフィンテックソリューションにおける役割

ファイナンスAPIは、今日のフィンテックの世界で大きな役割を果たしています。これらは、アプリとサービスを金融データと接続し、すべてをスムーズに動作させます。重要な種類の一つは、US株式APIです。ファイナンスAPI、特にUS株式APIがモダンフィンテックソリューションをどのように形作っているのか見てみましょう。

ファイナンスAPIとは何か？
ファイナンスAPIは、異なるソフトウェアシステムが相互に通信できるツールです。これらは株価や為替レートなどの金融データにアクセスを提供します。これらのAPIを使用すると、開発者はリアルタイムの金融情報を表示し、取引を行い、さらには投資アドバイスを提供するアプリを構築できます。

フィンテックにおけるUS株式APIの重要性
US株式APIは特定の種類のファイナンスAPIです。これは、米国の最新の株式市場データにアクセスを提供します。取引プラットフォームや金融アナリストにとって非常に役立ちます。リアルタイムの株価、過去のデータ、その他の重要な情報を取得できます。これにより、より良い意思決定を行い、より優れたサービスを提供できます。

ファイナンスAPIの仕組み
ファイナンスAPIは、アプリが金融データベースからデータを送受信できるようにすることで機能します。簡単な例を示します：

データのリクエスト：アプリがAPIに株価などのデータをリクエストします。
データの受信：APIがリクエストされたデータをアプリに送信します。
データの使用：アプリがデータをユーザーに表示します。例えば、チャートやリストとして。
このプロセスは迅速に行われるため、ユーザーはリアルタイムの情報を得ることができます。

ファイナンスAPIの利点
ファイナンスAPIは、フィンテックソリューションに多くの利点をもたらします。いくつかの例を挙げます：

リアルタイムデータ：最新の金融情報を取得します。
簡単な統合：異なるシステムを手間なく接続します。
強化されたセキュリティ：強力なセキュリティ対策でデータを保護します。
スケーラビリティ：アプリが成長するにつれて、より多くのユーザーとデータを処理できます。
FCS API：ファイナンスAPIのリーダー
FCS APIは、ファイナンスAPIの分野でトッププレーヤーです。彼らのサービスには、リアルタイムおよび過去のデータ、金融ニュース、市場分析が含まれます。彼らは次のようなツールを提供しています：

フォレックスライブレート：最新の為替レートを取得します。
トレーディングシグナル：取引の機会を知らせます。
歴史的データ：分析のために過去の金融データにアクセスします。
通貨コンバーター：通貨を簡単に変換します。
経済カレンダー：重要な経済イベントについて情報を得ます。
なぜFCS APIを選ぶのか？
[FCS API](https://fcsapi.com/)は、包括的なツールとリソースのスイートが際立っています。彼らは次のことを提供します：

リアルタイムデータ：常に最新情報を保持します。
歴史的データ：30年以上のデータにアクセスします。
市場の洞察：詳細な市場分析とニュースを取得します。
さまざまな形式：RESTful API、JSON API、WebSocketを通じてデータにアクセスします。
FCS APIが開発者を助ける方法
開発者は、FCS APIが使いやすく信頼性があるため、これを好みます。彼らのサービスは、CURL、PHP、Android、Java、Pythonなどのさまざまなプログラミング言語を使用してアクセスできます。この柔軟性により、FCS APIをさまざまなアプリやプラットフォームに簡単に統合できます。

価格とアクセスのしやすさ
FCS APIは柔軟な価格プランを提供しています。月額10ドルから150ドルまでです。また、いくつかの制限付きで生涯無料バージョンも提供しています。これにより、小規模な開発者から大企業までアクセス可能です。

FCS APIのデータソース
FCS APIは、世界中の異なる取引市場からデータを収集します。彼らのデータは、主要な金融機関、中央銀行、市場提供者から取得されます。彼らは50万以上の金融ニュース記事と180以上の通貨のリアルタイムレートにアクセスしています。

会社の背景
2018年に設立されたFCS APIは、急速に成長し、主要な金融ニュースと分析のウェブサイトとなりました。彼らは経験豊富な金融専門家とジャーナリストのチームを持っています。彼らは金融市場の主要プレーヤーと提携しており、高品質のニュースと分析で多くの賞を受賞しています。

ファイナンスAPIに関する個人的な考え
フィンテックをフォローする者として、ファイナンスAPIはゲームチェンジャーだと思います。金融データへのアクセスと使用が簡単になり、モダンなフィンテックソリューションの開発に不可欠です。特にUS株式APIは、トレーダーやアナリストにとって強力なツールです。

あなたが新しい取引アプリを構築している開発者だと想像してみてください。リアルタイムの株価、歴史的データ、トレーディングシグナルが必要です。US株式APIやFCS APIのサービスなどのファイナンスAPIは、これらすべてを提供できます。これにより、より良いアプリを作成し、ユーザーにより多くの価値を提供できます。

FAQ
Q: ファイナンスAPIとは何ですか？
A: ファイナンスAPIは、ソフトウェアシステムが相互に通信し、金融データにアクセスできるツールです。

Q: US株式APIとは何ですか？
A: US株式APIは、米国のリアルタイムおよび歴史的な株式市場データにアクセスを提供します。

Q: なぜフィンテックにおいてファイナンスAPIが重要なのですか？
A: それらはリアルタイムデータ、簡単な統合、強化されたセキュリティ、および金融アプリのスケーラビリティを提供します。

Q: FCS APIはどのようなサービスを提供していますか？
A: FCS APIは、リアルタイムおよび歴史的な金融データ、市場分析、フォレックスライブレート、トレーディングシグナルなどを提供しています。

Q: 開発者はどのようにFCS APIを使用できますか？
A: 開発者は、CURL、PHP、Android、Java、Pythonなどのプログラミング言語を使用してFCS APIにアクセスできます。
robloxでassistant その155

# 概要
robloxでassistantやってみた。
練習問題、やってみた。

# 練習問題
PolicyServiceを使え。

# サンプルコード

```

local Players = game:GetService("Players")
local PolicyService = game:GetService("PolicyService")
local Workspace = game:GetService("Workspace")
local player = Players.LocalPlayer

local success, result = pcall(PolicyService.GetPolicyInfoForPlayerAsync, PolicyService, player)
if success and result then
	print("ok")	

else
	print("Failed to get policy for player", player.Name)
end

```

以上。
Reactの基礎学習、学習記録アプリ作成

# はじめに
私は現在、プログラミングコミュニティ「JISOU」に参加させていただいており、Reactの勉強を基礎から行っています。
普段もプログラマーをしており、Reactは少し書いておりましたが、基礎から再度学ぶことで気づきがありましたので紹介です。
今回は学習記録アプリが課題であったため作成いたしました。

# 作成したもの
今回制作したものは学習記録アプリになります。
TODOアプリに少し機能を追加したようなもので、学習内容とその時間を登録し、学習時間の合計を表示してくれます。DBなどにはデータは保存されていないため、ページを更新してしまうとデータは初期化されます。
![stury_time.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835870/c055a768-5e93-5e7e-16be-df97bfd2ab74.gif)

https://github.com/yuuki4135/study-time-record-app

# 気づき
Reactは今まで、普段の業務中に自分で調べながら独学で習得しました。今回、参考に載せているUdemyの講座を視聴しながら学習を行うと、javascriptのES6の書き方やReactでの書き方に知らない部分があり、今まで書いてきたコードも短くかけることを気づくことができました。

* オブジェクトの省略記法
```javascript
const name = 'hoge'
const age = 10

//今まではこのようにしか書けないと思ってた
const myProfile = {name: name, age: age}
//↓で省略してオブジェクトに代入できることを知った
const myProfile = { name, age }
console.log(myProfile); // {name: 'hoge', age: 10}
```
* コンポーネントの再レンダリングについて
1.stateが更新された時
2.propsが更新された時
3.親コンポーネントが再レンダリングされた時
この3つを知らなかった

* コンポーネントのオートインポート方法
```javascript
//以下のようにexport const でコンポーネントを定義していれば
export const Todo = () => {}
```
下のようにVScodeなどで予測変換にでてくるものをクリックするだけでimport文を自動で書いてくれること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835870/b35d257a-06bd-59a2-ec79-5fd7bdb5bfc9.png)

* e.target.valueの中身は文字列に変換されてしまうこと
これは今回の課題を行った際に気づいたことです。onChangeなどの引数にわたってきた　eventの中に入っているe.target.valueは文字列に勝手に変換されてしまうため以下のようなif文で想定した動きになっていなかったこと
※文字列に勝手に変換されてしまうため、e.target.valueをNumberなどで数値に変える必要がありました。

```react
if (typeof time != 'number') {
  setError('入力されていない項目があります')
}else{
  setRecords([...records, { time }])
}

...
<div>
学習時間
<input
  type="number"
  value={time}
  onChange={(e) => setTime(e.target.value)}
/>
</div>
```

# おわりに
Reactは業務で書く機会はあったのですが、今回基礎から学ぶことでjavascriptの省略記載方法を知ることができたり、Reactの基礎の概念である再レンダリングについてあまり考えられていなかったことなど気づきがありました。
今まで、google検索やAIなどでReactの記法を調べたりしていましたがUdemyの講座や動画で学ぶととても分かりやすかったです。今後もわかりやすそうな講座の動画などあれば積極的に見ていこうと思いました。

# 少し発展した内容
こちらも基礎学習のため作ったので、参考にされる方はどうぞ

https://qiita.com/yuuki4135/items/b3e7c80804c3408afafe

# 参考
https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=ACCAGE0923

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇

https://projisou.jp
【Jest✕React】Jestを用いたテストの実行時、「supabaseUrl is required.」が表示される。

# はじめに
Jestを用いたReactアプリのテストを実行した際に直面したエラーに対する解決方法を紹介します。

# 問題
Jestを用いたテストコードを実行した際、「supabaseUrl is required.」というエラーが表示され、テストが通らない。
ぱっと見た感じ、環境変数を読み込めてないからなんだろうなと思いつつググってみたところやっぱりそうでした。

```console:エラーログ
    supabaseUrl is required.

      1 | import { createClient } from '@supabase/supabase-js'
      2 |
    > 3 | const supabase = createClient(
        |                              ^
      4 |     import.meta.env.VITE_SUPABASE_URL,
      5 |     import.meta.env.VITE_SUPABASE_ANON_KEY
      6 | );
```

参考↓

https://qiita.com/diskszk/items/ed6362e35e15f2fd790e

ESModule/CommonJSの形式の違いによってenvの値が読み込めないようです。
この記事の方は環境変数の読み込み方法を「process.env」に変更することで対応しているようです。

# 解決方法
テストを通すためにコードの方を変えるのはなんか嫌だなと思っていましたが、
よく考えたらテストでsupabaseに接続する必要はないよなと思い、createClient自体をモック化することで対応しました。
（そうしないとテスト実行時にsupabaseのインスタンスも同時に起動していないとテストが通らなくなってしまう。）
というわけで以下のコードをテスト実行前のところに追記。

```jsx:App.test.jsx
// createClient関数をモック
jest.mock('@supabase/supabase-js', () => ({
    createClient: jest.fn(() => ({
        from: jest.fn().mockReturnThis(),
        select: jest.fn().mockResolvedValue({ data: [], error: null }),
        insert: jest.fn().mockResolvedValue({ error: null }),
        delete: jest.fn().mockResolvedValue({ data: [], error: null }),
        eq: jest.fn().mockReturnThis(),
    })),
}));
```

<details><summary>テストコード全体</summary>

```jsx:App.test.jsx
/**
 * @jest-environment jsdom
 */
import React from "react";
import App from "../App";
import '@testing-library/jest-dom'
import { render, screen, waitFor } from "@testing-library/react";

// createClient関数をモック
jest.mock('@supabase/supabase-js', () => ({
    createClient: jest.fn(() => ({
        from: jest.fn().mockReturnThis(),
        select: jest.fn().mockResolvedValue({ data: [], error: null }),
        insert: jest.fn().mockResolvedValue({ error: null }),
        delete: jest.fn().mockResolvedValue({ data: [], error: null }),
        eq: jest.fn().mockReturnThis(),
    })),
}));

describe("初期表示のテスト", () => {

    test("タイトルが画面上に表示されること", async () => {
        render(<App />);
        const headElement = screen.getByRole('heading', { name: '学習記録一覧' });
        await waitFor(() => {
            expect(headElement).toBeInTheDocument();
        });
    });
});
```

</details>

# おわりに
問題のところに記載した「supabaseUrl is required.」が表示された際、試しにenvに定義されていたキー情報をcreateClientにそのまま直接入れてみたらテストが通ったのでアタリがつけられました。
エラー発生時はこんな感じで、どこが原因になっていて発生しているのか問題を切り分けるようにすることが大切ですね！


## JISOUのメンバー募集中🔥
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇

https://projisou.jp/
React + FullCalendarで現在の月が不規則にずれる奇妙な問題に遭遇した

<h1>どのような問題が起きたのか？</h1>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/398524c1-1431-d753-768f-d1fdc4ebc79d.png)

FullCalendarから表示している月を取得し、現在月として扱っていたが、
上記画像の通り不規則にずれる問題に遭遇した。

1~8月までは正常、9月がなぜか10月になり、10月からは正常に戻る。
コードは以下の通り
```javascript:FullCalendar.js
datesSet={(dateInfo) => { // カレンダー表示切替時に呼び出し
  const fullCalendarDate = new Date(dateInfo.start); // 月の最初の日付を取得
  fullCalendarDate.setDate(fullCalendarDate.getDate()); // fullcalendarのオブジェクトに変換
  setCurrentYear(fullCalendarDate.getFullYear()); // 今年をStateにセット
  setCurrentMonth(fullCalendarDate.getMonth()); // 今月をStateにセット
}}
```

不規則に発生していたので問題の発見が遅れた、
一体何が原因だったのか？

<h1>原因：表示されている月の初日が取得されていたから</h1>

![93f3e7d9f2d41fc3c8aa9fdf3f327d8a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/c5b1d7d3-da20-350a-2af7-c2193462934d.png)

FullCalendarの日付データ設定時にStateへ値をセットする場合、
dateInfoから取得すると "表示されている" 日付がstartとなるため発生していた。

dateinfoの中身は以下のようになっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/c1666185-bd2c-15e1-2d2a-794827e5f9c5.png)
表示月は8月だが、startの日付は8月1日でなく7月28日となっている、


<h1>対策：日付+15 で表示月に対応させる</h1>

```javascript:FullCalendar.js
datesSet={(dateInfo) => {
  const fullCalendarDate = new Date(dateInfo.start);
  fullCalendarDate.setDate(fullCalendarDate.getDate() + 15);
  setCurrentYear(fullCalendarDate.getFullYear());
  setCurrentMonth(fullCalendarDate.getMonth());
}}
```
FullCalendarの1行目は、最大でも先月の日付が7までしか入らないので、
仮に月が最も短い2月だったとしても7+15=22となり、翌月になることはない。
逆に表示日が1日の場合も16日となるため、先月となることもない。
どうしてRustは非同期処理にtokioを必要とするのか

そんなstackoverflowがありました

https://stackoverflow.com/questions/71357431/why-are-asynchronous-runtimes-like-tokio-necessary

> Rustは現在、標準ライブラリで非同期ランタイムを提供していません。詳細については、Rustの非同期プログラミング、特に[非同期のエコシステム](https://rust-lang.github.io/async-book/08_ecosystem/00_chapter.html#the-async-ecosystem)の章を参照してください。

https://rust-lang.github.io/async-book/08_ecosystem/00_chapter.html#the-async-ecosystem



> Rustは現在、非同期コードを書くための必要最低限のものしか提供していません。重要なのは、エグゼキュータ、タスク、リアクタ、コンビネータ、そして低レベルのI/Oフューチャーとtraitがまだ標準ライブラリで提供されていないことです。その間、コミュニティが提供する非同期エコシステムがこれらのギャップを埋める。


> Rustには非常に厳しい後方互換性要件があり、特定のランタイムをロックインする選択はしていません。また、標準ライブラリの一部とすることは、すべてのプロジェクトにとって明らかに正しい選択ではない特定の選択を強いることになります。将来的には、コミュニティ・プロジェクトがこの領域をよりよく探求し、強力な後方互換性を約束することなく、最適な選択肢の組み合わせを決定するのに役立つようになれば、この状況は変わるかもしれません。

tokioのバージョンは現在1.39になりましたが、それでも標準ライブラリに取り込むまではいきません。

これからも非同期処理にはtokioが必要になるでしょう。
正の約数の個数が3個で,その約数の総和が,381であるような自然数を求めよ。 「ラ・サール高校入試問題 整数問題」をChatGPTとsympyでやってみたい。

調子。悪いです。
**私には、無理なので、ChatGPTの回答の抜粋です。**
私の質問がピンとはずれかも。申し訳ありません。
sympyの計算結果は、web上(sympyのインストール不要)で確認しました。
sympyを使わずにpython だけで、計算可能かも。私は、実行していません。

# オリジナル
・YUUU0123 様 (0:00〜4:19)

https://youtu.be/Uv1rlSoR2pk

# 参考

https://live.sympy.org/

# ChatGPT-3.5先生へ

User

```
正の約数の個数が3個で、その約数の総和が、381であるような自然数を求めよ。
```


ChatGPT

???...解の公式を使います。...

User

```
sympyで
```

ChatGPT
...

```python
import sympy as sp

# 素数を p として定義
p = sp.symbols('p', integer=True)

# 方程式を定義
equation = sp.Eq(p**2 + p + 1, 381)

# 方程式を解く
solutions = sp.solve(equation, p)

# 自然数を計算
natural_numbers = [s**2 for s in solutions if s > 0]

natural_numbers
```
[361]


User

```
1から381までの全検索でお願いします
```
ChatGPT
...

```python
import sympy as sp

def find_number():
    for n in range(1, 382):
       divisors = sp.divisors(n)
       if len(divisors) == 3 and sum(divisors) == 381:
          return n
          
result = find_number()
result
```
361


User
```
1個だけですか
```
```python
import sympy as sp

def find_all_numbers():
    results = []
    for n in range(1, 382):
      divisors = sp.divisors(n)
      if len(divisors) == 3 and sum(divisors) == 381:
         results.append(n)
      return results

results = find_all_numbers()
results
```
???[]
```
???
...
全ての自然数を調べた結果、正の約数の個数が3個でその約数の総和が381である自然数は、唯一 361 でした。他には条件を満たす数はありません。 ​
```














# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

・以下ができたら、助かります。指定と全部です

https://qiita.com/mrrclb48z/items/555d85face87552c34fb

https://qiita.com/mrrclb48z/items/5f57eac92aaca30e85c0

# いつもと違うおすすめです。
FizzBuzzをオリジナルDIV15で遊ぶ


参考


https://sitest.jp/blog/?p=3822




x arduino unoは、予定は未定
x シフト演算する


結果

![o_coq282.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/61cd15c9-5088-9dc8-f00e-a59c14400d17.jpeg)


改良前

オンラインコンパイラ

```c++

#include <iostream>
using namespace std;


void fizzbuzz(int n) {
  if (n > 1) {fizzbuzz(n-1);}

  if ( (n % 3) == 0 && (n % 5) == 0){printf("Fizz,Buzz ");}
  else if ( (n % 3) == 0){printf("Fizz ");}
  else if ( (n % 5) == 0){printf("Buzz ");}
  else{printf("%d ",n);}
}


int main(void){
    // Your code here!
    printf("START\n");
    fizzbuzz(20);
    
}


```

```

START
1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 Fizz,Buzz 16 17 Fizz 19 Buzz

```


結果

![o_coq283.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/66ec9c58-83ad-3cc4-eaec-6c05fe162663.jpeg)



オリジナルDIV15

オンラインコンパイラ


```c++

#include <iostream>
using namespace std;

//15の割り算 0..256まで正しい
#define DIV15(x) ((x)>254?17:  \
((~(0b0111111111111111>>(((x)>>4)+((x)&15))))&1)+((x)>>4))

void fizzbuzz(int n) {
  if (n > 1) {fizzbuzz(n-1);}
  if ((n - (((DIV15(n)<<4)+DIV15(n)))== 0)){printf("Fizz,Buzz ");}
  else if ((n - (DIV15((n<<2)+n)+DIV15((n<<2)+n)+DIV15((n<<2)+n))) == 0){printf("Fizz ");}
  else if ((n - ((DIV15(n+n+n)<<2)+DIV15(n+n+n)) ) == 0){printf("Buzz ");}
  else{printf("%d ",n);}
}

int main(void){
    // Your code here!
    printf("START\n");
    fizzbuzz(20);
    
}



```


```

START
1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 Fizz 16 Fizz,Buzz Fizz 19 Buzz 

```
【SOA】試験対策メモ その4

# EC2 Image Builder
## 概要
事前定義に従ってAMIを作成するサービス。
AWS Systems ManagerのAutomationドキュメントを実行できるため、ソフトウェアアップデートなどを行った上でAMIを作成することができる。

# ELB
## SSLネゴシエーション設定
SSLプロトコルのバージョン（SSLv3とかTLSv1.3とか）、暗号アルゴリズム、証明書などの一連の設定。

# AWS Compute Optimizer
## 概要
以下のリソースについて、推奨事項（インスタンスタイプの変更など）をボード表示してくれるサービス。
- Amazon EC2 インスタンス
- Amazon EC2 Auto Scaling グループ
- Amazon EBS ボリューム
- AWS Lambda 関数
- AWS Fargate

https://techblog.nhn-techorus.com/archives/22517

# Amazon Macie
## 概要
S3に保存された機密情報を含むデータを解析してくれるサービス。
ダッシュボードから、機密情報を含むオブジェクトなどを確認することができる。
個人情報（PII）の検出も可能。

# AWS Health ダッシュボード
## 概要
AWSサービス全体の状況と組織固有の情報の両方を一か所で確認できるサービス。

# Amazon CloudFront
## 非HTTPのTCPトラフィック
サポートしていない。AWS Global Acceleratorは対応している。

## オリジン側でキャッシュ保持期間を制御する
```Cache-Control: max-age=秒``` および ```Expires``` ヘッダーを使用する。
ただし、以下の場合は、cloudfrontの設定が優先される。
①```MAX TTL``` < ```Cache-Control: max-age```
②```MIN TTL``` > ```Cache-Control: max-age```
③```Cache-Control: max-age``` または```Expires``` ヘッダーが存在しない

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#expiration-individual-objects

# S3
## クロスアカウントレプリケーションの注意
レプリケーション設定時に、S3バケットのオブジェクトの所有者を、デスティネーションバケットの所有者に指定する必要がある。

# S3 Inventory
## 概要
S3バケットに保存されたオブジェクトのリストをダッシュボード表示するサービス。
暗号化ステータスなども確認できる。

# RDS
## クロスリージョン自動バックアップ
というものがある。

https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/USER_ReplicateBackups.html
ナレッジ検索サイト

他のセルから取得した関数を分割してみる。

=TRANSPOSE(SPLIT(A1, ", "))

この関数はGoogleスプレッドシートで動作し、指定のURLからデータをインポートし、そのデータの中から指定したキーワードに一致する行をフィルタリングするためのものです。以下にこの関数の各部分を詳細に説明します。

### 1. `LET`関数
`LET`関数は、定義した変数を使って計算を簡素化する目的で使用されています。この場合、以下の変数が定義されています：
- `data`
- `keywords`
- `result`

### 2. `data`変数
```excel
data = QUERY(IMPORTRANGE(B1, "Apple!A:F"), "select Col1,Col2,Col3,Col4", 1)
```
- `IMPORTRANGE(B1, "Apple!A:F")`:
  - `B1`セルにあるURLからデータをインポートします。シート名は「Apple」で、範囲はA列からF列までです。
- `QUERY(..., "select Col1,Col2,Col3,Col4", 1)`:
  - インポートされたデータから1列目から4列目までを選択します。

### 3. `keywords`変数
```excel
keywords = SPLIT(A1, " 　")
```
- `SPLIT(A1, " 　")`:
  - `A1`セルにある文字列をスペースまたは全角スペースで分割し、キーワードのリストを作成します。

### 4. `result`変数
```excel
result = FILTER(data, BYROW(TO_TEXT(data), LAMBDA(r, PRODUCT(COUNTIF(r, "*" & keywords & "*")))) + (SEQUENCE(ROWS(data)) = 1))
```
- `FILTER(data, ...)`:
  - `data`から条件に一致する行をフィルタリングします。
- `BYROW(TO_TEXT(data), LAMBDA(r, PRODUCT(COUNTIF(r, "*" & keywords & "*"))))`:
  - `BYROW`関数を使って、各行をテキストに変換し、`LAMBDA`関数でその行がキーワードを含むかどうかをチェックします。
  - `COUNTIF(r, "*" & keywords & "*")`で、各キーワードがその行に含まれているかをカウントします。
  - `PRODUCT(...)`で、すべてのキーワードがその行に含まれている場合は1、それ以外は0を返します。
- `+ (SEQUENCE(ROWS(data)) = 1)`:
  - データの最初の行（ヘッダー行）を常に含めるための条件です。

### 5. 最終的な出力
```excel
IFERROR(VSTACK(ROWS(result) - 1 & "件がヒット", result))
```
- `ROWS(result) - 1 & "件がヒット"`:
  - フィルタリングされた結果の行数から1（ヘッダー行）を引いた数を表示し、「件がヒット」と文字列を結合します。
- `VSTACK(...)`:
  - 結果を縦に積み重ねます。
- `IFERROR(...)`:
  - エラーが発生した場合には何も表示しません。

### 要約
この関数は、指定されたURLからデータをインポートし、指定されたキーワードに一致する行を検索してフィルタリングします。結果として、ヒットした行数とその行のデータを表示します。 

これらの情報を参考にしました。
[1] note - Googleスプレッドシート FILTER関数 超応用例 -1（XLOOKUP ... (https://note.com/mir4545/n/n85dbfc00ee1c)
[2] 株式会社イノベーション - 【中級】難易度別！スプレッドシート関数15選|作業スピードを ... (https://www.innovation.co.jp/urumo/spreadsheet_function/)
[3] note - Googleスプレッドシート SPLIT関数/TEXTJOIN関数 超応用例2 (https://note.com/mir4545/n/n9cb63ad5e1fb)
[4] 株式会社JADE - ぼくのかんがえたさいきょうのスプレッドシート関数 - ブログ (https://blog.ja.dev/entry/blog/2023/04/13/my-collection-of-the-best-spreadsheet-funtions) 

リートンを利用する > https://wrtn.jp
OpenAI を活用して「画像必要」と「画像不要」を判別する方法

## 背景

https://style-assistant.net/ でユーザーが入力したメッセージから、その内容に基づいて「テキストのみ」か「画像付きのテキスト」かを判別したかった。
OpenAIのAPIを使用し、メッセージの内容を解析できるのではと思ったので、やってみた。

## やったこと

ユーザーのメッセージを解析し、視覚的表現が理解を助けるかどうかに基づいて、「画像必要」と「画像不要」を判別する

```
"""メッセージ内容に基づいて必要なアクション（テキスト処理か画像処理か）を分類する"""
message = inspect.cleandoc(
    f"""
    Given the prompt: '{message_text}', does it require an image or not?
    Please respond with '画像必要' or '画像不要'.

    ### Guidelines
    - If the prompt involves fashion, style, or design descriptions where visual representation could enhance understanding, respond with '画像必要'.
    - If the prompt involves general information or advice that does not rely on visual aids, respond with '画像不要'.

    ### Examples
    - 最新のイタリアンスタイルのメンズファッションを教えて => 画像必要
    - 結婚式の招待状が来た。フォーマルなドレスコードに合わせたスタイルを教えて => 画像必要
    - 彼女と海辺で過ごす日のための涼しげなコーディネートは？ => 画像必要
    - おすすめのジーンズブランドを教えて => 画像不要
    - 彼氏に10万円以下の予算で時計をでプレゼントしたい。おすすめは？ => 画像不要
    - 彼女の誕生日が近い。彼女は、いつもグレーの洋服を着ている。このスタイルに似合うハンドバッグのブランドを教えて => 画像不要
    """
)
self.message_generator_gateway.send_message(message)
action = "image" if "画像必要" in resp else "text"
return action
```

## 結果
予想以上に高い精度でユーザーメッセージに基づく内容の分類を行うことができた。
ただ、プロンプトが複雑になったり、２択以外の選択する場合は別の選択肢を考える必要がありそう。
MUIアイコンボタン "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

MUIのアイコンボタンを追加しようとしていたとき、題名のエラーに当たりました。
importの方法もコンポーネント内での呼び出し方も公式ドキュメント通りなのになぜ、、、

## 症状
```javascript:エラーメッセージ
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
```
「無効な要素タイプ：文字列（ビルトインコンポーネント用）またはクラス/関数（コンポジットコンポーネント用）が期待されていいますが、代わりにオブジェクトが得られました」

解決方法を調べてみると、次の二つがサジェストされました。
1. importの方法を間違えている
2. バージョン互換性の問題

### 解決方法
上記のどちらでもありませんでした。

package.jsonの中にある、`”type": “module” `を削除して再度`npm run dev`したところアイコンが正常に表示されるようになりました。

下記のissuesにコメントしてくださっている方がいます...!
https://github.com/mui/material-ui/issues/42997#issuecomment-2240188555
バッチマンの定例作業簡略化ヒント 〜定例バックアップ編

# バッチマンの定例作業簡略化ヒント 〜定例バックアップ編
こんにちは、私は定例作業に平和をもたらすバッチマンだ。  
今日は定例的なファイルのバックアップミッションを遂行するぞ！  
このバッチファイルを使えば、君の作業時間短縮に役立つだろう。さあ、共に戦おう！
## ミッション
「C:\data_folder にある重要なファイルを毎日バックアップせよ。」
## 紹介するバッチファイルの特徴
1. `C:\data_folder` 内のファイル及びディレクトリが `C:\daily_backup` 内に保存される。（サブディレクトリ含む）
2. 7日より古いバックアップは、自動的にバッチマンが始末してくれる。
## Step 1
まずは、メモ帳を開き、以下のコードを入力してくれ。
```bat
@echo off
setlocal
REM ディレクトリの設定
set SOURCE_DIR=C:\data_folder
set BACKUP_DIR=C:\daily_backup
REM バックアップ用のタイムスタンプを取得
for /f "tokens=2 delims==" %%i in ('wmic os get localdatetime /value') do set datetime=%%i
set datetime=%datetime:~0,8%_%datetime:~8,6%
REM バックアップ先ディレクトリを作成
set BACKUP_SUBDIR=%BACKUP_DIR%\backup_%datetime%
mkdir "%BACKUP_SUBDIR%"
REM ソースディレクトリをバックアップディレクトリにコピー
xcopy "%SOURCE_DIR%\*" "%BACKUP_SUBDIR%\" /e /y
REM 7日より古いバックアップを削除
forfiles /p "%BACKUP_DIR%" /m * /d -7 /c "cmd /c if @isdir==TRUE rd /s /q @path"
echo バックアップ完了！古いバックアップも始末したぞ！
pause
```
## 解説
さあ、バッチマンの解説タイムだ！
- `setlocal`: バッチファイル内で設定した変数が他に影響を与えないようにするためのものだ。
- `set SOURCE_DIR` と `set BACKUP_DIR`: 君の守るべきデータフォルダとバックアップフォルダのパスを設定する。
- `wmic os get localdatetime /value`: 現在の日付と時間を取得するぞ！
- `mkdir "%BACKUP_SUBDIR%"`: バックアップ用のサブフォルダを作成するぞ！
- `xcopy xxx /e /y`: フォルダをコピーするためには「copy」ではなく「xcopy」を使用するぞ！後半の「/e /y」はそれぞれ、ディレクトリまたはサブディレクトリが空であってもコピーする、受け側の既存のファイルを上書きする前に、確認メッセージを表示しないという意味だぞ！


## Step 2
このファイルを `daily_backup.bat` として保存してくれ。
## Step 3
タスクスケジューラに登録して、毎日決まった時間に実行するように設定しよう。
- `forfiles`: forfilesコマンドは、条件に合致するファイルに対して処理を行うコマンドだぞ！ここでは「/d -7」で7日前の日付を基準にして、それより古いファイルやフォルダを選択しているぞ！
このバッチファイルを使えば、君の面倒な作業からおさらば。  
毎日のバックアップが自動化され、古いバックアップも整理されるから、心配無用さ。  
定例作業のダークナイトとなって、ゴッサム・シティに希望の光をともそう！
＜参考＞  
[バッチファイルの基礎](https://www.cd-l.net/2024/03/bat.html)  
[Windowsコマンドリファレンス](https://windows.command-ref.com/)

## 採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/