OmniAICreator/Qiita-1.07M huggingface dataset:
node:xx-busterのDocker ImageでParcelを実行すると「Error: /lib/aarch64-linux-gnu/libc.so.6: version `GLIBC_2.29' not found 」と出る

# ストーリー
Dockerイメージで作ったコンテナ内で, Parcelを使ったファイルのバンドルを行おうとすると、
```
Error: /lib/aarch64-linux-gnu/libc.so.6: version `GLIBC_2.29' not found (required by /usr/local/share/.config/yarn/global/node_modules/@parcel/rust/parcel-node-bindings.linux-arm64-gnu.node)
    at Module._extensions..node (node:internal/modules/cjs/loader:1327:18)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/usr/local/share/.config/yarn/global/node_modules/@parcel/rust/index.js:217:31)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12) {
  code: 'ERR_DLOPEN_FAILED'
}
```
 といったエラーが生じてしまい、ファイルのバンドルができない。

 # 状況
 ## Dockerfile
 ```
FROM node:20.9-buster-slim

RUN apt update && apt install -y zip

WORKDIR /app

COPY package.json tsconfig.json /app/
COPY yarn.lock /app

RUN yarn global add typescript parcel

RUN yarn

COPY ./src /app/src

CMD ["yarn", "watch"]
 ```
上記Dockerfileを元に作ったイメージで作成したコンテナ内で `npx parcel` を実行すると、上記のエラーが発生する。

# 解決策
**bullseye** のnode（version <= 20）イメージを使用する。
[DebianReleases](https://wiki.debian.org/DebianReleases)の情報によると、それぞれDebian GNU/Linuxのディストリビューションであり、
> Buster for Debian 10
URL: https://wiki.debian.org/DebianBuster
Buster is the development codename for Debian 10. It was superseded by Debian Bullseye on 2021-08-14.

と書いてある。

上記のエラーの
```
Error: /lib/aarch64-linux-gnu/libc.so.6: version 'GLIBC_2.29' not found
```
によると、`buster` には`GLIBC_2.29`が存在しなさそう。

https://packages.debian.org/search?keywords=libc6
を見ると、

![スクリーンショット 2024-01-31 13.05.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/5b53ad8b-bd76-60d6-34e7-9743f3133ce4.png)


と書いており、`buster` は 2.28まで対応、`bullseye` は2.31まで対応可能。
ということでイメージを `bullseye` に変えると動く。

# 参考
- [In Docker image names what is the difference between Alpine, Jessie, Stretch, and Buster?](https://stackoverflow.com/questions/52083380/in-docker-image-names-what-is-the-difference-between-alpine-jessie-stretch-an)
- [node/Docker](https://hub.docker.com/_/node)
- [DebianReleases](https://wiki.debian.org/DebianReleases)
- [Debian “buster” Release Information](https://www.debian.org/releases/buster/)
LaravelのModelsの階層を変えたらテストやSeederでエラーが出る

# 概要

Laravelの階層を `App\Models\User` から `App\Models` の元の状態に戻した。
テストを実行するとモデルを読み込めていないようなエラーが出るようになった。
ちょっと詰まったので備忘録として書いとく。

```
Class "App\User" not found
```

変更したファイル

- app/Models
    - 名前空間
- app/confit/auth.php
    - 認証に使用しているモデルの階層
- その他モデルをuseしているファイル

## 環境

- Laravel10
- PHP8.1
- MySQL8
- Docker

## やったとこと

① キャッシュクリア

```
php artisan config:clear
php artisan route:clear
php artisan view:clear
php artisan cache:clear
php artisan clear-compiled
```

② Composerの更新

```
composer dump-autload
```

③ Dockerの再起動

```
docker compose down
docker compose up
```

全部試したけどダメだった

## 結論

Factoryの階層を変えるorモデル名を明示的にしないとダメだった。

Modelsの階層に合わせてFactoryも `database/factories/User/` のような階層になっていた。
Laravelは内部的に、モデルをネームスペースとクラス名から自動的に推測しようとするらしく、階層をそのままにしたいときは `protected $model = User::class;` のように明示的にしないといけないらしい（言われてみれば確かに...）


```php
<?php

namespace Database\Factories\User;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
 */
class UserFactory extends Factory
{
    // ここで明示的にモデルを指定する
    protected $model = User::class;

    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => '田中 太郎',
            'name_kana' => 'たなか たろう',
            'email' => 'user@example.com',
            'email_verified_at' => now()
        ];
    }
}
```

モデル側でも同様にFactoryを指定してあげる

```php
<?php

declare(strict_types=1);

namespace App\Models;

use Database\Factories\User\UserFactory;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory;

    protected static function newFactory()
    {
        return UserFactory::new();
    }
}
```

解決。
Remix入門⑤ - Remixでのフォーム処理どうやるん？


おっす！今日はRemixでのフォーム処理がどんなもんか話してみよか。
WEB開発でのフォーム処理って、めっちゃ大事やけど、ちょっと難しくて面倒やったりするよな。でもな、Remixを使えば、これがぐっと楽に、かつ効率的にできるようになるんやで。

### Remixでのフォーム処理って何が違うの？

Remixでは、フォームの送信やバリデーションをサーバーサイドで処理することができるんや。これによって、フロントエンドでの複雑なJavaScriptの処理を減らすことができるし、セキュリティも強化されるんや。さらに、ユーザー体験も向上するで。

### サンプルコード: お問い合わせフォーム

```jsx
// app/routes/contact.js
import { useActionData, redirect } from "remix";

export let action = async ({ request }) => {
  let formData = await request.formData();
  let email = formData.get("email");
  let message = formData.get("message");

  // メール送信処理のサンプル
  if (email && message) {
    // ここでメールを送信する処理を書く
    return redirect("/success");
  } else {
    // バリデーションエラーの処理
    return { error: "メールアドレスとメッセージは必須です。" };
  }
};

export default function Contact() {
  let actionData = useActionData();
  return (
    <div>
      <h1>お問い合わせ</h1>
      {actionData && actionData.error && <p>エラー: {actionData.error}</p>}
      <form method="post">
        <div>
          <label htmlFor="email">メールアドレス:</label>
          <input type="email" name="email" id="email" />
        </div>
        <div>
          <label htmlFor="message">メッセージ:</label>
          <textarea name="message" id="message"></textarea>
        </div>
        <button type="submit">送信する</button>
      </form>
    </div>
  );
}
```

### サンプルコード: ユーザー登録フォーム

```jsx
// app/routes/register.js
import { useActionData, redirect } from "remix";

export let action = async ({ request }) => {
  let formData = await request.formData();
  let username = formData.get("username");
  let password = formData.get("password");

  // ユーザー登録処理のサンプル
  if (username && password) {
    // ここでユーザー登録の処理を書く
    return redirect("/register/success");
  } else {
    // バリデーションエラーの処理
    return { error: "ユーザー名とパスワードは必須です。" };
  }
};

export default function Register() {
  let actionData = useActionData();
  return (
    <div>
      <h1>ユーザー登録</h1>
      {actionData && actionData.error && <p>エラー: {actionData.error}</p>}
      <form method="post">
        <div>
          <label htmlFor="username">ユーザー名:</label>
          <input type="text" name="username" id="username" />
        </div>
        <div>
          <label htmlFor="password">パスワード:</label>
          <input type="password" name="password" id="password" />
        </div>
        <button type="submit">登録する</button>
      </form>
    </div>
  );
}
```

これらのサンプルコードでは、お問い合わせフォームとユーザー登録フォームの実装方法を示してるんや。どちらもサーバーサイドでのデータ処理を含んでいて、セキュリティやユーザー体験を向上させてるんやで。


### フォーム処理の裏側で何が起こってる？

Remixでのフォーム処理は、シンプルで直感的やけど、その裏側では色々なことが起こってるんや。たとえば、ユーザーがフォームに入力したデータは、サーバーサイドの`action`関数に送られる。ここで、データのバリデーションや送信処理が行われるんや。これによって、フロントエンドでの複雑なJavaScriptの処理を減らし、セキュリティを強化することができるんやで。

### まとめ

いかがやったか？Remixでのフォーム処理は、シンプルでセキュア、そしてユーザーフレンドリーや。WEB開発でフォーム処理に頭を悩ませてるなら、Remixを使ってみるとええかもしれんで。次回の「Remix入門⑥」では、さらにRemixの機能を深掘りしていくから、楽しみにしててな！
AWS Cloud Quest（続き）

内容
・はじめに
・実施内容や困った箇所
・さいごに


https://aws.amazon.com/jp/training/digital/aws-cloud-quest/?trk=f7e8324b-8108-47ae-8839-ea86b69b9fae&sc_channel=sm

前回の記事：
https://qiita.com/nikorasu277/items/8ba948f0228937537b81

### はじめに
前回の記事の続きとして、aws saa受験に向け、実施内容の概要や困った箇所の記録、復習のために記事にします。


### 実施内容や困った箇所
課題１
クライアントからの要望に応じてEC2のお見積り。
インスタンスを変更して再度お見積り。
お見積りaws webサイト：https://calculator.aws/#/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518951/f111a82e-046e-0097-9592-8a24b13bf71b.png)

課題２
DBの可用性確保と、読み取り専用の設定（リードレプリカの作成）によって処理速度を考慮する。
→RDSをマルチAZに設定、リードレプリカの作成。


課題３
大量のデータを保持、処理速度が必要、クエリの実行を行う。
→DynamoDBの導入、テーブルの作成、メタデータを使用したレコード追加


RDSとDynamoDBの使い分け：
https://blog.serverworks.co.jp/tech/2017/04/12/what_is_different_dynamodb_and_rds/

私見&蛇足：
RDSは調べた結果イメージ通り、MySQL、PostgreSQLと同じ。
・大量のデータの取り扱いに向かない。
・VPC内で使用
・複雑なSQLの実行が可能（実用的な感覚。。）
・スケールアップは停止が必要、また、Lambdaとの組み合わせなど処理や設定に時間を要す。

DynamoDBは、NoSQLでのデータのやり取りについて理解が必要
・大量のデータの取り扱いに向いている。
・VPC外で使用
・複雑なSQLの実行ができない。
・利用中に書き込み性能(キャパシティユニット)の変更が可能

全般、テーブル設計、情報をどこに置きたいかで決まるのかなと踏んでいます。結論として、特に、DynamoDBについて理解しきれていないので学習が必要。

課題３
EC2にEFSをマウント。セキュリティグループを設定しファイル共有ができる状態へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518951/54e4eddc-ee66-0135-a88c-b1f36224df3b.png)
(p_-)少なくともってｗ

課題４
IAMを使用して権限設定。ユーザーとグループを作成してポリシーの適用。
権限を追加する場合、ポリシーのテンプレは存在するため検索、エンティティに適用を実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518951/705420c6-cd17-38c0-8368-5d2808051d67.png)

課題５
Auto Scalingの適用。
Auto Scalingのグループを設定し、EC2を参加させるイメージ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518951/c613e384-8175-a42e-0c91-6b4951e31600.png)


課題最後
・Auto Scalingグループ作成
・ロードバランサー作成
・ロードバランサーヘルスチェック
・Auto Scalingをロードバランサーにアタッチ
・要件に従い３つインスタンスを稼働させた状態にしてAuto Scalingグループに参加させる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518951/7141e2c8-6349-454d-f31f-1df2c92e5f62.png)

### さいごに
皆さんの記事を見ていると、両目つぶってもできますみたいな記事が多いですがｗしっかり勉強になると思いました。ゲーム性は。。。勉強になりました(笑)

このままソリューションアーキテクトアソシエイト（SAA）版を続けるか、他の方法で学習するか検討中です。いずれにせよアプトプット中心で勉強です！！

では！
記事内のh1,h2,h3の見分け

# 課題
Qiitaの記事のマークダウンで`#`で始まる行は`h1`、`##`の場合は`h2`という記法があります。
前々から思ってたのですが、フォントサイズがちょっと違うくらいだと、違いがわからない。つまり今どのレベルを読んでいるのかわからなくなります。

この記事では、Qiitaでの根本的な解決方法ではなく、自作のブログシステムとかでMarkdownを読み取ってh1とかを書く場合の話が主です。

具体的には、`1.1.2.` みたいな微妙なパラグラフのとき、`1.1.2.`なのか、`1.2.`なのか、実は`2.`なのか、みたいな。右に出るインデックスみたいなとこではちゃんと字下げされてるんですけど。

本来のhighlightの役割から外れるけど、ここでやってみますと、、、ここからサンプル↓

----
# 1. トップ（h1）
文章サンプル１２３。。。
## 1.1. ひとつ下げた２つ目（h2）
文章サンプル１２３。。。
### 1.1.1. ３つ目（h3）
文章サンプル１２３。。。
#### 1.1.1.1. ４つ目、段落細かすぎ（h4）
文章サンプル１２３。。。
### 1.1.2. ３つ目の２（h3）
文章サンプル１２３。。。
## 1.2. ２つ目の２（h2）
文章サンプル１２３。。。
# 2. トップの２つ目（h1）
文章サンプル１２３。。。
## 2.1. ２つ目の１つ目（h2）
文章サンプル１２３。。。

----
↑サンプルここまで。

並べると違いはわかりますね。でも1.2、2.、2.1のあたりはやっぱり混沌。
Qiitaの場合は、h1とh2が区別しづらいです。一番よく使うのに。

# 対応方法
Qiitaに関しては、上のように、「1.1.2」とかを書いていくしかないかなと思いました。

先にも触れたように以下では、[自分でブログサイト](https://small-pieces.vercel.app/)を作っててhtmlやcssをいじれる場合の対応についてです。「1.1.2」とかを都度書いてもいいですけど。

## 暫定解：文字列「#」でレベルを表現しちゃう
自作のサイトでは実際やってみてますが、`h1`の場合は「#」を、`h2`の場合は「##」を、文字列として直接書く方法です。これはCSSで、
```css
h1:before {
    content: "# ";
}
h2:before {
    content: "## ";
}
```
でできます。

自作のサイトならQiitaと違ってもっと他の表現方法で違いを出せるから、もしかしたら「#」なんて入れなくていいかもしれないですが、これでしばらく様子を見てみます。違和感があったらなくすかもしれません。
【初心者向け】Jupyter Notebookのコマンド操作（背景色やフォントの変更）

「Jupyterの背景色やフォントの色を変えたいな」と思った時に、ネットで調べると方法を公開している人はたくさんいるけど、「Jupyter Notebookのコマンド操作ってどうやるの？」という初歩的な点で少々迷ったので同じような初心者向けにメモしておきます。

「こんな感じにしたい…！」という方へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665553/83f95a23-c608-1343-372d-a0ed9b7c4344.png)

## 環境
・Windows 11
・Anaconda3-2023.09-0-Windows-x86_64

## 対象
AnacondaでJupyter Notebookをインストールした人

## Jupyter Notebookの背景色やフォントの色を変える方法
参考にしたリンクは下記です。
https://qiita.com/uratatsu/items/cdc83308ce85a32d0512

## Jupyter Notebook(Anaconda)のコマンド
アナコンダのコマンド操作は「Anaconda Prompt」から行ないます。
スタート画面から「anaconda prompt」で検索してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665553/c82c45c6-656f-5bd4-b25b-2100c49cb2a8.png)

あるいはJupyter Notobook内のFiles画面の右上の"New"タブからも"Terminal"画面に遷移できます。
![スクリーンショット 2024-01-31 131458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665553/13ed1542-b230-9b12-1b45-6934ce0a26ad.png)


筆者はWindowsのコマンドプロンプトからコマンド操作しようとしたができなかった。そもそも、、
・pipコマンドは、Pythonパッケージのインストールに使うツールである。
・pipはPython3.4以降に標準搭載されており、Pythonをインストールすることによりpipコマンドを使えるようになる。

（参考）pipが使えない時の対処法
https://qiita.com/celeron5576/items/9ba3588a97fea46c6946

## Jupyter Notebookの背景色やフォントを変更するコマンド操作
1.Anaconda promptを開く

2.Anaconda promptでディレクトリの確認
```
dir
```

3.Anacondaディレクトリに移動
```
cd anaconda3
```

4.pipでjupyterthemesをインストール
```
pip install jupyterthemes
```

5.jupyterthemesをアップグレード
```
pip install --upgrade jupyterthemes
```

6.見やすい設定はこちら
```
jt -t onedork -f inconsolata -T -N -cellw 90% -tfs 11
```

7.デフォルトに戻す場合はこちら
```
jt -r
```

## Before
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665553/349ce43c-61ac-4fbe-ebe0-cb715f85aff9.png)

## After
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665553/83f95a23-c608-1343-372d-a0ed9b7c4344.png)

これで快適にコーディングできますね♪
LanScanが便利すぎる

2024/01/31

LanScanが便利すぎる。

# 目次
[1. LanScanとは](#1-LanScanとは)
[2. ラズパイやESP32をリモートコントロールするときに便利](#2-ラズパイやESP32をリモートコントロールするときに便利)
[3. おわりに](#3-おわりに)


# 1. LanScanとは
LanScanは、同じLANに接続されていれば、他のデバイスのipアドレスが表示されるというアプリ。
自分はmacで使用していますが、windows版もあるらしいですね。
[mac版](https://apps.apple.com/jp/app/lanscan/id472226235)


# 2. ラズパイやESP32をリモートコントロールするときに便利
ラズパイにsshで接続したい時、ipアドレスを忘れてしまったらキーボード・マウス・ディスプレイを繋いでローカル環境で確認すると思いますが、LanScanを使えばipアドレスとHostNameやvender nameが表示されるので、簡単にわかってしまいます。

最近はPOVの制作をしていますが、UDP通信で画像をESP32に送りたいなーってときも、USB繋いでシリアルモニタで確認せずとも、LanScanでEspressifと表示されているipアドレスを確認すれば見つかったりします。

しかし、複数の同じ種類のデバイスが同一空間内にあると、区別がつかないという問題が少しあります。
(例)ラズパイが複数同一LAN上にあると、リモートログインしたい方のipアドレスがどれかわからない。

# 3. おわりに
ローカル環境を毎回用意するのが面倒な同志に届け
仮PowerShellで証明書のインポート

リモートのコンピュータ（192.168.2.10）に証明書をコピーしてインポートするPowerShellスクリプトの例を以下に示します。この例では、`Copy-Item` コマンドレットと `Invoke-Command` コマンドレットを使用しています。

```powershell
# ローカルPCのファイルパス
$localCerPath = "C:\Path\To\Your\Certificate.cer"

# リモートPCのIPアドレス
$remoteComputer = "192.168.2.10"

# リモートPCへ証明書をコピー
Copy-Item -Path $localCerPath -Destination "\\$remoteComputer\C$\Path\To\Destination\" -Credential (Get-Credential)

# リモートPCへのPowerShellセッションの確立
$remoteSession = New-PSSession -ComputerName $remoteComputer -Credential (Get-Credential)

# リモートPC内で証明書をインポート
Invoke-Command -Session $remoteSession -ScriptBlock {
    $cerPath = "C:\Path\To\Destination\Certificate.cer"
    Import-Certificate -FilePath $cerPath -CertStoreLocation "Cert:\LocalMachine\Root"
}

# リモートセッションのクローズ
Remove-PSSession $remoteSession
```

このスクリプトでは、まずローカルPCからリモートPCへのファイルのコピーを行います。その後、リモートPC内でPowerShellセッションを確立し、証明書をインポートします。リモートPCにアクセスするためには適切な資格情報が必要です。`-Credential` パラメータで資格情報を指定し、`Get-Credential` コマンドレットを使用してユーザー名とパスワードを入力します。
ローカルプッシュ通知の備忘録

# はじめに

業務中にビジネスチームから
「ローカルプッシュ通知だとアプリがキルされていてもプッシュ通知って届くんだっけ？」
「ローカルプッシュ通知を使いたいのだけど、リモートプッシュ通知と比べて制約やデメリットはあるか？」
「ローカルプッシュ通知を使ってもこれって実現できる？」

みたいな雑な質問を受けることはないでしょうか？
これらの質問に対して、毎回調査したり時には検証アプリを作ったりするのですが、
毎回１から調べるとしんどいので、これは主に自分向けのメモ・ナレッジになります。

# 調査・検証メモ

### ローカルプッシュ通知だとアプリがキルされていてもプッシュ通知って届くんだっけ？

結論：「届く」

iOS： iOS16以上あたりなら特に労せずいけそう。サンプルコードに忠実に書けばいける。

この辺りのパラメータの設定は必要。
```
presentAlert: true,
presentBadge: true,
presentBanner: true,
presentSound: true,
```

android： WorkManagerなどのコンポーネントを使う必要がある、正確な時間の起動が必要な場合、AlarmManagerが良いが、こちらは制約が厳しい。

### ローカルプッシュ通知を使いたいのだけど、リモートプッシュ通知と比べて制約やデメリットはあるか？

ios: （今回の検証範囲ではなし）

android: 

- AlarmManagerを使う場合、審査が厳しくなる（スケジュールアプリなどでないといけない）
- Dozeモード時の考慮が必要
- バックグラウンド通知はネイティブの場合、実装が大変そう

### ローカルプッシュ通知を使ってもこれって実現できる？

これは個別要件、作ってみて検証するしかないですね。

今回はFlutterのアプリだったので、以下のライブラリを使って検証を行いました。
（なので、上の2つの質問もFlutterの検証をベースにしています。とはいえ、ローカルプッシュ通知はネイティブアプリの要素が強いので、
　Flutterかどうかに限った話ではないので）

(flutter_local_notifications)[https://pub.dev/packages/flutter_local_notifications]

# まとめ

コードもないので、かなりざっくり、フワッとした記載になってしまいましたが、
完全に自分の備忘録になります。。
Remix入門④ - Remixでのデータフェッチ、どうやってんの？


おっす！Remix入門シリーズも今回で４回目やで！
今日はRemixでのデータフェッチングについて話してみよかー。
データフェッチってなんや？どうやって実装するんや？って思ってるやろ？今回はその辺をわかりやすく説明していくで！

### Remixでのデータフェッチって？

Remixではな、ルートに対応するコンポーネントでデータをフェッチするんや。これによって、ページごとに必要なデータをサーバーサイドで取得して、ページを構築できるんやで。これができると、初回のページ表示がめっちゃ速くなるんや。

### サンプルコード: データフェッチの基本

```jsx
// app/routes/posts.js
import { useLoaderData } from "remix";

export let loader = async () => {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts");
  let posts = await response.json();
  return posts;
};

export default function Posts() {
  let posts = useLoaderData();
  return (
    <div>
      <h1>ブログの記事一覧やで</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
```

このコードではな、ブログの記事一覧をAPIから取得して、表示してるんや。`loader` 関数でデータをフェッチして、`useLoaderData` フックを使ってコンポーネントでそのデータを使ってるんやで。

### なんでええんや、この方法は？

1. **効率的なデータロード**: ページごとに必要なデータをサーバーサイドで先に取得できるから、ブラウザでの処理が減るんや。これによって、ページの表示が速くなるんやで。
2. **シンプルな実装**: データの取得と表示のロジックが1つの場所にまとまるから、コードがシンプルで読みやすくなるんや。
3. **パフォーマンスの向上**: SSRと組み合わせることで、ユーザーがページを訪れたときにはすでに必要なデータが揃ってる。これがパフォーマンスの向上につながるんや。

### まとめ

いかがやったか？Remixでのデータフェッチングは、シンプルかつ効率的やで。ページ表示の速度を上げたい、データの扱いをもっとスマートにしたいって思ってるなら、Remixはめっちゃええ選択肢やで。次回の「Remix入門⑤」では、さらにRemixの機能を深掘りしていくから、楽しみにしててな！
Remix入門③ - Remixでのルーティング、どんな感じや？


おっす！今日はRemixでのルーティングについて話してみよか。
Remixのルーティングって、実は結構特別やねん。なんでそんなにええのか？今回はその辺をわかりやすく説明していくで！

### Remixのルーティングって？

Remixでのルーティングは、直感的で使いやすいんやで。URLに応じてどんなコンポーネントを表示するか、そういうことを簡単に設定できるんや。データフェッチングもルートと結びつけられるから、ページごとに必要なデータをサーバーサイドで取得できるんやで。

### ディレクトリ構造のサンプル

Remixのルーティングを理解するには、ディレクトリ構造を見てみるのが一番や。以下は、典型的なRemixアプリのディレクトリ構造の例やで。

```
app/
├── routes/
│   ├── index.js
│   └── about.js
└── components/
    └── Header.js
```

この構造でな、`routes` ディレクトリの中に各ページのコンポーネントが配置されてるんや。たとえば、`index.js` はトップページ、`about.js` はアバウトページに対応してるわけや。

### サンプルコード: ルーティングの基本

```jsx
// app/routes/index.js
import { Link, Outlet } from "remix";

export default function Index() {
  return (
    <div>
      <h1>ようこそ、Remixの世界へ！</h1>
      <nav>
        <Link to="/about">アバウトページへ行ってみよう</Link>
      </nav>
      <Outlet />
    </div>
  );
}

// app/routes/about.js
export default function About() {
  return <div>ここがアバウトページやで。</div>;
}
```

このコードやと、トップページとアバウトページの2つのルートが設定されてるんや。それぞれがどのように表示されるか、これでバッチリやろ？

### まとめ

いかがやったか？ルーティングって言うと難しそうやけど、Remixならシンプルで強力なルーティングが可能や。次回の「Remix入門④」では、もっとRemixの機能を深掘りしていくから、楽しみにしててな！
Remix入門② - RemixのSSRってなんでええんや？


おっす！前回はRemixの基本をちょっと触れたけど、今日はRemixのSSR（サーバーサイドレンダリング）について話してみよか。
SSRってなんやろう？って思うかもしれんけど、ここではゆる～く、分かりやすく解説するで！

### SSR（サーバーサイドレンダリング）ってなんやねん？

SSR、これは「サーバーサイドレンダリング」の略やで。WEBページのコンテンツをサーバー側で先に作ってしまって、それをユーザーに送る技術のことや。従来の方法やと、ブラウザがJavaScriptをダウンロードしてからページを作り始めるから、表示までちょっと時間がかかるんやけど、SSRを使うとサーバー側でほぼ完成品を送れるから、表示がサクサク早くなるんやで。

### なんでRemixのSSRがええんや？

1. **めちゃくちゃ早いページロード**: RemixのSSRは初回訪問時のページロードをめっちゃ早くしてくれるんや。ユーザーは待ち時間ほぼゼロでサイトにアクセスできるんやで。
2. **SEOが強化される**: SSRやと、検索エンジンがページのコンテンツをインデックスしやすくなるんや。だから、Remixで作ったサイトはGoogleにも好かれるってわけや。
3. **ユーザーエクスペリエンスの向上**: ページがサクサク表示されるってことは、ユーザーが快適に過ごせるってことや。これが結果的に、サイトの評価を上げることにもつながるんやで。

### 例えばどんなサイトでSSRが活躍するん？

例えばやけど、ニュースサイトやブログ、EコマースのサイトとかでSSRの力を発揮できるで。サーバー側でページがあらかじめ生成されてるから、ユーザーがサイトにアクセスした瞬間に記事や商品がサッと表示されるわけや。これによって、ユーザーの満足度がグッと上がって、サイトへの滞在時間も伸びるんやで。

### サンプルコード: RemixでのSSRの基本

```jsx
// app/routes/index.js
export default function Index() {
  return (
    <div>
      <h1>RemixでSSRを体験しよう！</h1>
      <p>このページはサーバーサイドでレンダリングされてるで。</p>
    </div>
  );
}

// app/routes/about.js
export default function About() {
  return (
    <div>
      <h1>アバウトページやで</h1>
      <p>ここもサーバーサイドでレンダリングされてるんや。</p>
    </div>
  );
}
```

このサンプルでは、Remixを使って2つのシンプルなページ（ホームとアバウト）を作成しているんや。各ページはサーバーサイドでレンダリングされてるから、初回のページロードが速いんやで。

### まとめ

というわけで、RemixのSSRについて色々と話してみたけど、どやったかな？SSRは単にページの速度を上げるだけやなくて、ユーザーエクスペリエンスを向上させたり、SEOを強化したりする重要な技術やで。次回の「Remix入門③」では、Remixのルーティングシステムについてもっと掘り下げていくから、そっちも楽しみにしててな！
ポートフォリオを作ってみた(4)

# デザイン検討 & コーディング
以下の流れで説明をしていきます。前回は(3)サーバー構築をしたので、今回は(4)デザイン検討 & (5)コーディングを説明いたします。
(1)環境説明
(2)ドメイン作成
(3)サーバー構築
(4)デザイン検討
(5)コーディング
(6)公開

今回はデザイン検討とコーディングをまとめて説明する理由についてですが、基本的にポートフォリオが必要なタイミングというのは、転職等の就職活動をする場合、個人事業主などで仕事につなげたい場合が該当すると思います。

もちろん、勉強や人脈拡大など、上記以外が目的の場合もあると思いますが、今回は常日頃多忙で時間があまりとれない人を想定いたします。

短時間で、第三者から見て高品質に見えるポートフォリオを作ることができれば、デザイン検討とコーディングにかける時間も短くて済むわけでして、それができるならば説明についてもコンパクトにまとめられるわけです。

## デザイン検討
これは私の勝手なイメージかもしれないですが、SEという人種は、デザインが苦手な人が多いのではないでしょうか。

私もCSSをいじるのは苦手でしたが、最近はFigmaを使ったり、サイトのCSS解析をして徐々に技術を磨いています。

今回重要なことは、誰でも良いデザインでポートフォリオサイトを作り上げられるようにすることだと考えています。

そこで私がおすすめする方法は「HTML + CSSで作られたポートフォリオのサンプル」を活用することです。Googleなどで「ポートフォリオ　テンプレ」と検索すると、無料で自由に使えるものがいくつか見つかります。

このポートフォリオのテンプレを使い、自分がアピールしたい言語でリライトする手法をお勧めいたします。この方法であれば、良いデザインで、かつ、自分のアピールしたい言語で作られたサイトを短時間で簡単に公開するところまで持っていけます。

なお、[こちら](https://webdesigner-go.com/template/)がおすすめです。

## コーディング
先ほどお伝えした通り、自分がアピールしたい言語でリライトするだけです。スキルや経歴、開発実績などは一旦Jsonで管理するようにします。

こうすることで、スキルや経歴や開発実績に追加・変更・削除があった場合にも長いHTMLを編集する必要がありません(Json側を修正する形になります)。将来的にDatabaseに移行する場合やAPI経由でデータ取得する場合にもJson取得後の処理は変わらないため、フロントエンド側の変更は最小限に抑えることができます。

次回は、いよいよCloudFlareに公開する方法をご説明いたします。
Remix入門① - Remixって何やねん？


おっす！今日は最近話題の「Remix」について話してみよか。React好きやったら、絶対この新しいフレームワーク気になるやろ？けどな、「ただのReactフレームワークやないで」という話。Remixはサーバーサイドレンダリング（SSR）を駆使して、WEB体験をめっちゃ変える力を持ってるんやで。それじゃ、Remixの世界への扉をちょっとだけ開けてみよか。

### Remixってどんなんやねん？

まず、Remixって言うても「リミックス」とか「DJみたいやな」とか思うかもしれんけど、これReactベースのフロントエンドフレームワークやねん。従来のSPA（シングルページアプリケーション）とはちょっと違って、ページのロードがえらい早いし、SEOにも強いし、開発者にとっても使いやすい構造を持ってるんや。

### なんでRemixが注目されてんねん？

1. **めっちゃ早いページロード**: SSRのおかげで、初回アクセス時のページロードが早いんや。ユーザー体験に直結する大きなポイントやで。
2. **SEOの強化**: SSRによって、検索エンジンがコンテンツをインデックスしやすくなるんや。WEBサイトの視認性を高めるで。
3. **開発がラクちん**: Reactの知識があれば、Remixの開発は直感的や。ルーティングやデータフェッチングがシンプルで、綺麗なコードが書けるんやで。

### Remixってどんなプロジェクトにええの？

Remixは特に、高速なレンダリングとSEOを重視するWEBサイトや、データをガッツリ扱うWEBアプリケーションにピッタリやで。ブログやEコマースサイト、インタラクティブなポートフォリオサイトなんかが、Remixでめっちゃ輝くんや。

### サンプルコードも見てみよか

```jsx
// Remixでのシンプルなルーティングの例
import { Link, Outlet } from "remix";

export default function App() {
  return (
    <div>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">アバウト</Link>
      </nav>
      <Outlet />
    </div>
  );
}

// 'about' ルートのコンポーネント
export function About() {
  return <div>これがAboutページやで！</div>;
}
```

このコードは、Remixでの基本的なルーティングとページの構築を示してるんや。シンプルやけど、これがRemixの魅力の一端やで。

### まとめ

というわけで、Remixの基本的な紹介はここまでや。次回の「Remix入門②」では、その速さの秘密、SSRについてもっと掘り下げていくから、楽しみにしててな！Remixで、WEB開発の新しい世界を体験してみいひんか？次回も絶対見逃したらアカンで！
dockerイメージでつくるコンテナの関係

ChatGPTのたとえがわかりやすかったのでメモ
# 前提
python、Nginx、Celeryをdebianディストリビィージョンイメージでコンテナ作成。
RedisをAlpineディストリビューションイメージでコンテナ作成

# 例によってchatGPTにレストランに例えてもらった
### レストランチェーンの設立
あなたはレストランチェーンを設立し、複数のレストラン（コンテナ）を開くことにしました。各レストランは、特定の料理を提供するための特別なキッチン（サービス）を持っています。あなたのレストランチェーンは、特定の建築スタイル（python:3.10.11ベースのDebian OS）に基づいていますが、各レストランはその建築スタイルに沿って少し異なる内装やメニュー（web, nginx, celeryサービス）を提供します。

### レストランの種類
Webレストラン（webサービス）: Python料理を得意とするレストランです。顧客からの注文（リクエスト）を受け取り、美味しいWebページ料理（レスポンス）を提供します。

Nginxレストラン（nginxサービス）: このレストランは、入り口で顧客を迎え、彼らを正しいテーブル（webレストランや他のサービス）へ案内します。大道りに面しており、多くの顧客（トラフィック）を扱うことができます。

Celeryレストラン（celeryサービス）: 裏方で活躍するレストランで、大量の注文を効率的に処理するために、特別な調理技術（非同期タスク）を使います。

これらのレストランは全て、同じレストランチェーン（Dockerfileで定義されたDebianベースのイメージ）に属していますが、それぞれ異なる特色とメニューを持っています。

### 特別な提携レストラン
Redisレストラン（redisサービス）: このレストランは、特別な提携を結んでおり、高速な食材供給サービス（インメモリデータストア）を提供します。このレストランは、山の中腹（Alpine Linuxベースのイメージ）に位置しており、他のレストランとは異なる環境で運営されています。
顧客の体験
顧客（ユーザー）があなたのレストランチェーンのドメイン名（URL）を通じて訪れると、まずNginxレストランの入り口に到着します。そこでは、顧客のニーズに応じて、Webレストランでの食事、Celeryレストランでの特別な注文処理、またはRedisレストランでの迅速な食材供給へと案内されます。

### 結論
この例えを通じて、docker-compose.ymlによって定義された各Dockerコンテナ（レストラン）が、それぞれ独立していながらも連携して動作している様子を理解できます。各レストランは基本的に同じ建築スタイル（Debian OS）を共有していますが、Redisレストランだけは特別な場所（Alpine Linux）にあります。顧客の要求に応じて、適切なサービス（料理）を提供するためにそれぞれが特化しています。
リアルタイムで音響イベントをラズベリーパイ(Raspberry Pi4 B)で検出

# 使用したデバイス
1\.Raspberry Pi 4B(64-bit)
2\.USB接続マイク(logicool C270n HD WEBCAM)

# 前準備
マイクのデバイスが認識しているか
参考サイト https://hellobreak.net/raspberry-pi-usb-microphone/

# 手順
ターミナルで以下のコードからgit cloneし、ファイルに移動。そしてrequirements.txtに書かれているライブラリをインストール
使用させて頂いたgit hub
https://github.com/robertanto/Real-Time-Sound-Event-Detection
```
git clone https://github.com/robertanto/Real-Time-Sound-Event-Detection.git
cd Real-Time-Sound-Event-Detection
pip3 install -r requirements.txt
```
インストールが完了したらThonnyかターミナルで実行
ターミナルの場合
```
python3 ./sound_event_detection.py
```
Thonnyの場合
git cloneしたファイルからsound_event_detection.pyを開いて実行
![スクリーンショット 2024-01-31 11.05.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684178/b24c68a7-b2fa-b24c-1e5c-a667cdcc9973.png)

実行できたら以下のような画面が出てくる
![スクリーンショット 2024-01-31 11.02.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684178/743a2231-cf75-d56a-0add-f76088ff06a6.png)

初期の場合は
1\. Speech(スピーチ)
2\. Music(音楽)
3\. Explosion(爆発?)
4\. silence(無音)
の4つが設定されています。
設定を変更する場合は
sound_event_detection.pyの17行目の番号を変更
```
plt_classes = [0,132,420,494] # Speech, Music, Explosion, Silence 
```
Real-time-Sound-Event-Detection/keras_yamnet/yamnet_class_map.csv内を見て、欲しい項目の番号に変更
※git hubから閲覧可 英語で書かれているので翻訳で探してみるといいかも
https://github.com/robertanto/Real-Time-Sound-Event-Detection/blob/main/keras_yamnet/yamnet_class_map.csv
![スクリーンショット 2024-01-31 11.37.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684178/e3fc273b-9e03-d912-7069-c6111fc04342.png)
どうしてEC2インスタンスの中にあるDockerのアプリケーションを表示、実行できるのか

WEBリクエスト（80や443ポート）がWEBサーバーに来たときに、どうしてEC2インスタンスの中にあるDockerのアプリケーションを表示、実行できるのかわからなかったので調べた。
結論、Dockerデーモンがdocker-compose.ymlに書かれているマッピングを元に振り分けているようだ。

# ステップ
### ステップ1: リクエストの到着
ドメイン名解決: ユーザーがブラウザにURLを入力すると、DNSがドメイン名をIPアドレスに解決します。このIPアドレスは、あなたのEC2インスタンスに割り当てられています。

EC2へのリクエスト: リクエストはインターネットを介してこのIPアドレス（あなたのEC2インスタンス）に送信されます。

### ステップ2: EC2インスタンスとWebサーバー
ポートリスニング: EC2インスタンス上で動作しているWebサーバー（例えばNginxやApache）は、80番ポート（HTTP）や443番ポート（HTTPS）でリクエストを待ち受けています。

リクエストの受信: Webサーバーはリクエストを受け取り、設定ファイル（例えばNginxの設定ファイル）に基づいて、そのリクエストをどのように処理するかを決定します。

### ステップ3: Dockerコンテナへの転送
docker-compose.ymlとポートマッピング: docker-compose.ymlファイルで定義されたポートマッピングにより、外部からのリクエストがDockerコンテナの特定のポートに転送されるように設定されています。例えば、ports: - "80:8000"の設定は、EC2インスタンスの80番ポートからのリクエストを、Dockerコンテナの8000番ポートにマッピングします。

転送ルールの適用: Webサーバーは、リクエストを受け取ると、docker-compose.ymlで設定されたマッピングに従って、リクエストを内部のDockerコンテナに転送します。このプロセスは、Webサーバーの設定（リバースプロキシの設定など）とdocker-compose.ymlのポートマッピングの組み合わせによって実現されます。

### ステップ4: コンテナ内の処理
コンテナ内でのリクエスト処理: Dockerコンテナ内のアプリケーション（この場合、8000番ポートでリッスンしているアプリケーション）はリクエストを受け取り、適切なレスポンスを生成します。

レスポンスの送信: 生成されたレスポンスは、同じ経路を逆にたどってユーザーのブラウザに送り返されます。

# 例によってchatGPTにレストランに例えてもらった
### ステップ1: リクエストの到着 - レストランへの道案内
ドメイン名解決: 顧客（ユーザー）がレストランの住所（URL）を知りたいとき、彼らは案内板（DNS）に問い合わせます。案内板はレストランの住所を具体的な場所（IPアドレス）に変換し、顧客はその場所へ向かいます。

EC2へのリクエスト: 顧客がその場所（EC2インスタンス）に到着します。この場所はあなたが経営するレストランコンプレックスで、様々なレストラン（コンテナ）があります。

### ステップ2: EC2インスタンスとWebサーバー - レセプションでの案内
ポートリスニング: レセプション（Webサーバー）は、入り口（80番ポートや443番ポート）で顧客を待ち受けています。

リクエストの受信: レセプションは顧客からの要望（リクエスト）を受け取り、彼らが何を求めているかを理解し、どのレストラン（コンテナ）に案内するかを決定します。

### ステップ3: Dockerコンテナへの転送 - レストランへの案内
docker-compose.ymlとポートマッピング: 各レストラン（コンテナ）は特定の入り口（ポート）を持っています。たとえば、日本食レストランは入り口A（80番ポート）から入りますが、中華料理レストランは入り口B（8000番ポート）を使用します。

転送ルールの適用: レセプションは、顧客を適切なレストランへと案内します。これは、レセプションの指示（Webサーバーの設定）とレストランの入り口（ポートマッピング）に基づきます。

### ステップ4: コンテナ内の処理 - レストランでのサービス
コンテナ内でのリクエスト処理: 顧客がレストラン（Dockerコンテナ）に到着すると、ウェイター（アプリケーション）が注文を受け、彼らのために料理（レスポンス）を準備します。

レスポンスの送信: 顧客は注文した料理を受け取り、満足してレストランを後にします。
【Tableauの基本】初心者向け_テーマ4：パラメーター（1/2）

# 1 パラメーターとは

## 概要

:::note info
■前提：パラメーターは作成しただけでは動かない
:::

:::note info
■詳細：パラメータを使用する際には、以下の実行が必要

１：初期パラメーターを設定する
２：計算、フィルター、レファレンス ラインなどの要素でそのパラメーターを使用する
３：パラメーターの値は、以下の方法で調整できます。
・パラメーター コントロールを表示
・パラメーター アクションを使用
・動的パラメーターを設定して自動的に更新
:::



この後、活用例について言及させていただきますが、
以下のブログをかなり参照させていただき実際に実装してみました。

https://matzu-oshiruko.hatenablog.com/entry/2023/01/10/012427


# 2 パラメーターの活用事例（初級）

①指標入れ替え
②グラフ入れ替え　※ダッシュボードに反映するシートの変更
③特定サブカテゴリの利益を〇％UP
④リファレンスラインに反映



# ①指標入れ替え
:::note info
■手順
・指標選択用のパラメーターを作成する
・計算フィールドを作成する
・Vizを作成する
:::

### 指標選択用のパラメーターを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/08fdf99a-b646-2d56-eba6-0b0f8f8c332f.png)

### 計算フィールドを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/8f29606a-2530-df25-03ae-25daa6c15892.png)

### Vizを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/1710818a-d54c-70a5-f9d1-abe85f4668d5.png)













# ②グラフ入れ替え、これはシート変更
:::note info
■手順
・指標選択用のパラメーターを作成する
・計算フィールドを作成する　※パラメーターをそのまま入れるだけ
・Vizを作成する　※以下のようなワークシートを今回は3個作成
・ダッシュボードの作成
:::


### パラメーターの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/ea0d15d6-2fa9-904a-a6ed-0493838415ff.png)

### 計算フィールドの作成　※パラメーターをそのまま入れるだけ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/51cc766b-0d55-48c5-ef50-55cee598d118.png)

### Vizの作成　※以下のようなワークシートを今回は3個作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/a5c206d0-6d27-26f9-a1be-031a4f65022f.png)

### ダッシュボードの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/1f4dfcf7-3880-ee1b-5ae3-c27ae0497338.png)

※コンテナを一つ入れたうえで、その中にワークシートを入れるとよい感じになる
※ワークシートのタイトルは非表示
※ダッシュボードでタイトルを表示（ここにもパラメーターをいれる）
















# ③特定のサブカテゴリの指標（メジャー）を〇％UPさせる

:::note info
■手順
・パラメーターの作成（パラメーターを2つ作る）
1：パラメーター_例3_利益UPサブカテゴリ
2：パラメーター_例3_利益UP率
・計算フィールドを作成する
・Vizを作成する
:::


### パラメーターの作成（パラメーターを2つ作る）

1：パラメーター_例3_利益UPサブカテゴリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/dd049759-f258-5470-7eef-75bd7daa2187.png)

2：パラメーター_例3_利益UP率
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/47606f37-5f98-ddbf-4c10-0418eae22276.png)

### 計算フィールドの作成　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/b702be4d-9d9b-a629-a185-370d001d89b8.png)

### Vizの作成　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/06e13ddc-afd5-543b-a63c-504e558c1cc4.png)


# ④リファレンスラインに反映


### パラメーターの作成
例3で作成済み

### 計算フィールドの作成
例3で作成済み

### Vizの作成
リファレンスラインにいれる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618835/f2578506-af35-0b23-2041-65c9f30336d6.png)




# 参照させていただいたサイト

Tableau公式HP

https://help.tableau.com/current/pro/desktop/ja-jp/parameters_create.htm

matzu_oshirukoさん

https://matzu-oshiruko.hatenablog.com/entry/2023/01/10/012427

@vizhacker(Yusuke Sakai)さん

https://qiita.com/vizhacker/items/3b7f874411bd01babd28
PowerShellで今使用している実行ポリシーを見るコマンド

```
Get-ExecutionPolicy -List

Scope          ExecutionPolicy
-----          ---------------
MachinePolicy  Undefined
UserPolicy     Undefined
Process        Undefined
CurrentUser    AllSigned
LocalMachine   Undefined
```
参考URL
https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.security/get-executionpolicy?view=powershell-7.4
React学習開始しました！

## 本日からReact学習本格スタート
### React学習する理由
- 現在はShopifyによるECサイト制作を行っている
- サイト制作でも十分お客様に貢献できるが、十分ではない
- Shopifyだけでは対応できない分野をReactで補いたいと考えています
### 3ヶ月以内の目標
基本的なReact学習は完了させる。学習方法はUdemyがメインとなるが、学習にあまり時間をかけずに、どんどんアプリ制作を行ってスキルアップする。
**目標としては3ヶ月以内で企業と業務委託契約を結んでお仕事したい！**

### その後の目標
将来的にはShoifyによるECサイト制作・運用＋React開発を絡めて事業展開していきたい
Expected content key aca33b21dc11252c to exist / Parcel実行時のエラー

# 状況
- Docker
    - node:node:20.11.0-bullseye-slim
    - pracel


このイメージで作られたコンテナに入り、`npx parcel build` を実行すると発生

# ファイル構造
```
.
├── build
│   └── なし
├── node_modules
│   ├── ...
├── src
│   └── index.ts
├── .parcel-cache
│   └── モロモロ
├── Dockerfile
├── tsconfig.json
├── package.json
└── yarn.lock
```

# 事象
以下のコードを実行時に生じたエラー
```bash
npx parcel build ./src/index.ts --dist-dir ./build
```

# 解決策
`.parcel-cache` を削除することで動いた。

# 参考
- [parcel watch error: Expected content key 2d39cdf7c618ab5b to exist #8874
](https://github.com/parcel-bundler/parcel/issues/8874)
オーバライドとモンキーパッチでどう違うねんと思ったので調べた

オーバーライド（Override）とモンキーパッチ（Monkey Patch）は、どちらも既存のコードの挙動を変更する方法ですか、
使用される文脈と目的において全く違う振る舞いをするよと教えてもらったのでまとめてみました。

### オーバーライド

オーバーライドは、主に継承で使用され、
サブクラスがスーパークラスで定義されたメソッドを再定義することを指します。

#### 具体例
```ruby
class Animal
  def speak
    "Some sound"
  end
end

class Dog < Animal
  def speak
    "Bark"
  end
end

dog = Dog.new
puts dog.speak  # 出力: "Bark"
```

この例では、`Dog`クラスが`Animal`クラスの`speak`メソッドをオーバーライドしています。

### モンキーパッチ

モンキーパッチは、既存のクラスやモジュールに新しいメソッドを追加したり、既存のメソッドを変更したりするために使われます。モンキーパッチは、継承とは関係なく、直接的に既存のクラスやモジュールを変更します。

#### 具体例
```ruby
class String
  def shout
    "#{self.upcase}!"
  end
end

puts "hello".shout  # 出力: "HELLO!"
```

この例では、既存の`String`クラスに`shout`メソッドをモンキーパッチとして追加

### 違い

- **使用される文脈**: オーバーライドは継承の一環として使用されますが、モンキーパッチは既存のクラスやモジュールを直接変更するために使われます。
- **目的と影響範囲**: オーバーライドはサブクラスの挙動をカスタマイズするために使用され、一方、モンキーパッチは既存のクラス自体を変更し、そのクラスのすべてのインスタンスに影響を与えます。
ETL と ELT

## はじめに
Yellowfin でデータを可視化する際、分析用のデータベースを構築することが望まれます。データウェアハウス (DWH) のように、データ分析に適したスキーマのデータがあれば、可視化しやすいだけでなく、パフォーマンス向上にもつながります。
DWH をはじめとする分析データベースにロードするデータスキーマを作成するために、どのようなアプローチが考えられるでしょう。最も一般的なのが、ETL ツールを活用することだと思います。あるいは、近年は ELT というアプローチも一般化してきています。

## ETL
ETL は データを Extract (抽出)、Transformation (変換)、Load (書き出し) することを意味します。
業務システムなどのデータソースからデータを抽出し、ETL ツールと呼ばれる仕組みでデータを加工し、DWH に書き出します。DWH にデータを格納する前に、必要なデータの加工を済ませてしまうのが特徴で、イメージ的には以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/765184f6-5b15-6086-fe71-54b3f08b9842.png)

ETL ツールは世の中で数あまた販売されています。国産のツールも多く、国産のものとしては [Asteria Warp](https://www.asteria.com/jp/warp/) や [Waha! Transformer](https://waha-transformer.com/)、国外企業のものとしては [Informatica](https://www.informatica.com/jp/) や [DataStage](https://www.ibm.com/jp-ja/products/datastage)、クラウドサービスとしては [AWS Glue](https://aws.amazon.com/jp/glue/) や [Azure Data Factory]( https://azure.microsoft.com/ja-jp/products/data-factory) などが一例として挙げられます。

## ELT
一方の ELT は、データをExtract (抽出)、Load (書き出し)、Transformation (変換) します。
データソースから抽出するデータを、まずは DWH に書き出してしまい、その後 DWH 上でデータを変換して、分析に適したスキーマに作り替えます。イメージ的には以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/31b59993-110f-5446-d807-3084ff5b096a.png)

## ETL と ELT の比較
それぞれの特徴を踏まえて、機能を比較します。

|ETL の特徴|
|---|
|複雑な分析や加工を施して DWH にデータを書き出すことに優れている|
|セキュリティ担保の目的で、データを修正・削除する場合に必要な機能を備えている。そのため、GDPR や CCPA のようなコンプライアンス対応に、ETL が必須とされる場面もある|
|GUI で操作できる範囲が多く、またデータのフローが把握しやすい GUI を備えている|
|規定で備わった関数を利用できる|
|各 ETL ツールの扱いを学ぶ必要性がある|

|ELT の特徴|
|---|
|大量のデータを取り扱うために、DWH の処理能力を活用することができる|
|DWH に必要なデータをロードする容量と処理性能を担保する必要がある|
|データベースに実装された SQL 言語やストアドプロシージャなど、一般的に普及する技術を活用してデータを処理できる|
|データベース種類によっては、非構造化や半構造化データを取り扱うことができる|
|ストアドプロシージャにプログラミング言語を使用できる場合、再帰的な構造のデータ処理にも対応できる|

近年ではクラウドにデータを一元的に集約し、DWH を構築する傾向が強まっています。そのため、ELT を選択する場面が増えてきているようにも思います。

## 最後に
おじさん世代に対して ELT という単語を口にすると、5 割以上の確率で「持田香織？」という反応が返ってきます。その度「いやいや、ELT (Every Little Thing) にはいっくん (伊藤一朗) もいまっせ」、「いやいやいや、そうでもなくて、ELTとは Extract Load Transfer の略です」というやり取りをしなければいけません。
このようなやり取りをしなくても良いように、ELT が世の中に普及する日も遠くないと思っています。

何はともあれ、皆様良いデータ分析を!

## 参考情報

https://aws.amazon.com/jp/compare/the-difference-between-etl-and-elt/

https://www.integrate.io/blog/etl-vs-elt/
【生成AI】Gemini Pro APIでAIアプリを爆速開発 🎉

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1312905/da7ad467-1293-d3be-6b8f-a99617fec89c.png)

## はじめに

記事投稿キャンペーン 「2024年!初アウトプットをしよう」にギリギリ投稿です！

Googleの生成AIであるGemini Proというものが使えるようになったということで、
AIアプリを爆速開発してみた！

実際に３時間くらいかかりました。

全然爆速じゃないです。ごめんなさい

(2023年12月29日〜)

※現在(2024/1 時点)は、試用期間となっており、<font color="red">**無料**</font> で使用可能です。

※Gemini Proを使用するには、Googleアカウントさえ取得していれば、<font color="red">**すぐに始められます！**</font>

※ただし、Google Workspace等、管理者によって機能が制限されている可能性があります。

:::note warn
今回使用するのは、**Google AI Studio**です。
**Vertex AI Studio**は、Google Cloudのプロジェクトに紐づくため<font color="red">**課金**</font>設定が必要です。
:::

Google AI Studio

https://ai.google.dev/

Vertex AI Studio

https://cloud.google.com/generative-ai-studio?hl=ja

## 対象読者

- 生成AIのAPIを使用してアプリを爆速開発したい方
- 生成AIアプリをデプロイしたい方
- CI/CDも整備したい方

## やったこと

Reactで生成AIアプリを作成する

**完成画面**

![スクリーンショット 2024-01-28 11.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512616/945d7441-ac09-df2d-6963-fa382203f96a.png)


**成果物**

https://react-gemini-pro.firebaseapp.com/

**ソースコード**

https://github.com/o-ga09/react-gemini-pro-api


## 少し解説

1. Gemini Pro APIのサイト[https://ai.google.dev/](https://ai.google.dev/)にアクセス
2. Gemini Pro APIのキーを取得

    「Get APIKey in Google AI Studio」をクリック
    ![スクリーンショット 2024-01-28 11.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512616/7d5690d7-6427-c632-4423-c063b69e65ac.png)

    紐付けは必須でないです。
    GoogleCloud(firebaseでも良い)のプロジェクトとの紐付けも簡単！
    ![スクリーンショット 2024-01-28 11.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512616/f1972dbd-8564-5c18-dd39-3db14fba3c39.png)


3. GoogleのGemini Proの[ドキュメント](https://ai.google.dev/docs?hl=ja)を参考にAPIを呼び出す
4. ひたすら、<font color="red">**React**</font> で 開発！
5. firebase に <font color="blue">**デプロイ**</font>

## まとめ

- 今回は、一旦、使ってみたかっただけなので、APIで直接叩きましたが、爆速開発するなら普通に<font color="red">**ライブラリを使ったほうがいいです**</font>
- とはいえ、APIでのリクエストも<font color="red">**簡単**</font>ではありました
- <font color="blue">**プロンプト**</font>や<font color="blue">**RAG**</font>でもっと色んなことしたいですね！
- このアプリ、プロンプトクソすぎて、すぐ、<font color="red">**AIが設定放棄します！**</font>

## 参考

- Gemini Pro API のリファレンス

https://ai.google.dev/docs/gemini_api_overview?hl=ja

- REST でのクイックスタート

https://ai.google.dev/tutorials/rest_quickstart?hl=ja

- Node.jsでのクイックスタート

https://ai.google.dev/tutorials/node_quickstart?hl=ja
完PowerShellで自己署名証明書を作成し、ps1ファイルに署名しスクリプトを実行する方法

```

PS C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験> $cert = New-SelfSignedCertificate -Subject "CN=＜登録したい名前＞" `
>>                -KeyAlgorithm RSA -KeyLength 2048 -Type CodeSigningCert `
>>                -CertStoreLocation "Cert:\LocalMachine\My\" -NotAfter 2040/12/31
PS C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験> Move-Item "Cert:\LocalMachine\My\$($cert.Thumbprint)" "Cert:\LocalMachine\Root"
PS C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験> $cert=Get-ChildItem Cert:\LocalMachine\Root -CodeSigningCert
PS C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験> $cert.Thumbprint
Thumbprintの文字列が出てくる


PS C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験> Set-AuthenticodeSignature C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験\test.ps1 $cert

    Directory: C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験

SignerCertificate                         Status                    StatusMessage             Path
-----------------                         ------                    -------------             ----
Thumbprintの文字列  Valid                     Signature verified.       test.ps1

PS C:\Users\＜ユーザ名＞\Desktop\実行ポリシー実験> .\test.ps1

```
[Ubuntu]VPSでMinecraftサーバーを構築する方法

## 要　旨
VPSを使用して、Minecraftサーバー(バニラ・MODなし)を構築する方法について記述します。
## 実行環境等
VPS:KAGOYA VPS KVM 
    OS Ubuntu22.04LTS
    CPU/メモリ　２コア/2GB(RAMは2GB以上必要)
    ストレージ　25GB SSD
    料金　24円/日　660円/月(2024.1.29時点)
操作コンピューター：iMac 2017年モデル
Minecraftバージョン:1.20.4(2024.1.29時点の最新バージョン)
## 実施要領
ユーザーはrootで実施しました。
アップデートとアップグレードを実施する。
```linux
apt update
```
```linux
apt upgrade
```
Javaがインストールされているか確認する。
```linux
java --version
```
インストールされていなければ、以下のコマンドでjavaとscreenをインストールする。(Ubuntu22.04LTSにはjavaはインストールされていない)
```linux
apt install openjdk-19-jre-headless screen
```
javaがインストールされたか確認する。
```linux
java --version
```
minecraftディレクトリを新規作成する。
```linux
mkdir /root/minecraft
```
作成したminecraftトディレクトリに移動する
```linux
cd /root/minecraft
```
minecraft本体のダウンロード
Minecraft本体ダウンロード・公式
[https://www.minecraft.net/ja-jp/download/server?_fsi=k0kZLT20&_fsi=k0kZLT20](https://www.minecraft.net/ja-jp/download/server?_fsi=k0kZLT20&_fsi=k0kZLT20)
```linux
wget https://piston-data.mojang.com/v1/objects/8dd1a28015f51b1803213892b50b7b4fc76e594d/server.jar
```
server.jarファイルがダウンロードされるので、一旦起動する。
```linux
java -jar server.jar --nogui
```
すると同じminecraftディレクトリ内にeula.txtファイルが作成されて停止するので、この内容を書き換える。
```linux
vi eula.txt
```
eula=falseの箇所を以下のように書き換える
```linux
eula=true
```
これは、利用規約に同意するという意味である。
server.jarファイルと同じminecraftディレクトリ内にserver.jarを起動するrun.shシェルスクリプトを新規作成する。
```linux
vi /root/minecraft/run.sh
```
以下の内容を記述して保存する
```linux
#!/bin/sh
cd /root/minecraft
/usr/bin/java -Xmx2G -jar /root/minecraft/server.jar --nogui
```
上記で、-Xmx2Gは最大メモリが2GBであることを示しています。
--noguiはGUIを使用しないことを意味しています。
screenを使用して、run.shを起動します。
```linux
screen ./run.sh
```
元のコンソール画面に戻るには、
Ctrlキーを押しながらaを押して、次いでdを押す。
最後に再起動時に自動的にrun.shを実行するようにcrontabに記述する。
```linux
crontab -e
```
以下をcrontabに追加・保存する。
```linux
@reboot /root/minecraft/run.sh
```
crontabに正しく記載されているか、確認する。
```linux
crontab -l
```
異常なければ以上で終了です。お疲れ様でした。
## 結　言
今回は、VPSを使用して、Minecraftサーバー(バニラ・MODなし)を構築する方法について記述しました。
最後までお読みくださり、ありがとうございました。
一次元配列を二次元配列のように表現する方法

添え字の計算を用いて、一次元配列を二次元配列のように表現します。
(添え字は0から始まることを前提としています。)
# 添え字の変換式
```
(一次元の配列の添え字) = i * (一行の要素数) + j
```
ここではiは行のインデックス、jは列のインデックスを表します。

この式を変形すると、
```
i = ((一次元の配列の添え字) - j) / (一行の要素数)

j = (一次元の配列の添え字) - i * (一行の要素数)
```
となります。
Microsoft Copilotで、日本語プログラミング その14

# 概要
Microsoft Copilotのプロンプトを細工して、日本語プログラムを実行させようとする試みです。
グローバルIP、問題をやってみた。

# Ohisama prompt

```
グローバルIPを知りたい。
```

# 回答

こんにちは、これはBingです。グローバルIPとは、インターネット上であなたのデバイスを識別するために割り当てられる番号です。グローバルIPは、プロバイダから借りているので、定期的に変更されることがあります。グローバルIPを確認するには、専用のWEBサービスを利用するのが簡単です。例えば、[CMAN](^5^)や[ラッコツールズ](^2^)などのサイトがあります。これらのサイトにアクセスすると、あなたのグローバルIPが表示されます。¹²⁴

あなたのグローバルIPは、現在 **52.167.144.136** です。² この番号は、あなたが使用しているプロバイダや地域などの情報を示しています。⁴ たとえば、あなたのリモートホストは **msnbot-40-77-167-8.search.msn.com** で、国は **United States** 、地域は **Boydton** です。²

グローバルIPに関する詳しい情報は、[こちら](^4^)をご覧ください。⁴ グローバルIPとは別に、ローカルネットワーク内で割り当てられるプライベートIPというものもあります。グローバルIPとプライベートIPの違いについては、[こちら](^1^)を参考にしてください。¹

グローバルIPについてのご質問はありますか？😊

ソース: Bing との会話 2024/1/31
(1) undefined. https://www.cman.jp/network/support/go_access.cgi.
(2) IPアドレス確認：自分のグローバルIPアドレスを調べる | ラッコ .... https://rakko.tools/tools/2/.
(3) 自分のグローバルIPアドレスを調べる方法 簡単に確認するには .... https://amksystem.com/inf/global-ipaddress-check/.
(4) IPアドレス確認：自分のグローバルIPアドレスを調べる | ラッコ .... https://rakko.tools/tools/2/.
(5) グローバルIPアドレスとは? プライベートIPとの違いや確認方法 .... https://www.ntt.com/business/services/network/internet-connect/ocn-business/bocn/knowledge/archive_157.html.
(6) グローバルIPアドレスとは? プライベートIPとの違いや確認方法 .... https://www.ntt.com/business/services/network/internet-connect/ocn-business/bocn/knowledge/archive_157.html.
(7) 自分のグローバルIPアドレスを調べる方法 簡単に確認するには .... https://amksystem.com/inf/global-ipaddress-check/.
(8) 【簡単】グローバルIPアドレスを調べる方法 | 石川パソコン修理 .... https://ishi-pc.net/colum/global-ip/.
(9) undefined. https://www.ugtop.com/spill.shtml.
(10) undefined. http://www.bing.com/bingbot.htm%29.
(11) undefined. https://www.maxmind.com.


以上。
【BizRobo!】KCUポイント、意識していますか？

## はじめに
BizRobo!を運用する際に絶対考えた方がいい、**「KCUポイント」** について。

これを考えるのと考えないのとでは、MCのスケジュールでロボット実行をする時の快適さなどが大きく変わってきます。

本記事ではKCUポイントについての基礎知識についてまとめます。

## 基礎知識

- １KCU＝5000KCUポイント

- ロボの処理はステップ内容により各１～10000KCUポイントを消費する

- それぞれのMCで持っているKCU値によって１MCでのロボットの同時実行数が変わる
    - MCのスケジュールを作成する時にKCUポイントを意識する事でロボット実行の待ち時間が発生する事が防げる

下記ナレッジを参照頂くと、KCUについてのより詳しい記載があります。

https://knowledge.bizrobo.com/hc/ja/articles/360028673771-KCU%E3%81%A8%E3%81%AF

待ち時間については下記に詳しく記載があります。

https://knowledge.bizrobo.com/hc/ja/articles/360029748592-%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E7%A8%BC%E5%83%8D%E7%8A%B6%E6%B3%81%E3%82%92%E5%88%86%E6%9E%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84

KCUの消費状況はログファイルとして出力できるようなので、そちらも活用しましょう。

https://knowledge.bizrobo.com/hc/ja/articles/360028154971-KCU%E3%81%AE%E6%B6%88%E8%B2%BB%E7%8A%B6%E6%B3%81%E3%82%92%E3%83%AD%E3%82%B0%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%81%97%E3%81%A6%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

また、DesignStudioの画面で、 
**ヘルプ(Help) > KCU情報(Show KCU Information)**
と開くとKCU情報が確認可能です。

どのステップでどれだけポイントを消費するかが分かります。

## おわりに
KCUポイントを見直して、現行のロボット運用で詰めれる所が無いか見直してみましょう。
C#でインターフェイスを利用したほうがいい場合と拡張メソッドを利用したほうがいい場合をChatGPTに聞いてみた

# C#でインターフェイスを利用したほうがいい場合と拡張メソッドを利用したほうがいい場合をChatGPTに聞いてみた

## はじめに

個人で何か作るときはあまり気にしないのですが、OSSのIssue解消のためにプルリクを作ってアドバイス無い？と聞いたところ、「このメソッドはインターフェイスを増やすのではなく、拡張メソッドで実装して」という風に言われました。

自分としても、その使い分けが曖昧になってきた気がしましたので、ChatGPTにその使い分けを改めて聞いてみました。

## インターフェイスを利用したほうがいい場合

以下、引用部分はChatGPTの回答です。

> - 契約(Contract)の定義: インターフェイスはクラスが特定のメソッドやプロパティを実装する契約を提供します。複数のクラスが同じインターフェイスを実装することで、共通のメソッドやプロパティが存在することが保証されます。
>
> - ポリモーフィズム: インターフェイスを使用することで、異なるクラスが同じインターフェイスを実装している場合、これらのクラスを同じ型として扱うことができます。これにより、ポリモーフィズムを実現しやすくなります。
>
>- テスト容易性: インターフェイスを使用することで、モックやスタブの作成が容易になります。これはユニットテストやモジュールテストにおいて重要です。
>```cs
>public interface ILogger
>{
>    void Log(string message);
>}
>
>public class ConsoleLogger : ILogger
>{
>    public void Log(string message)
>    {
>        Console.WriteLine(message);
>    }
>}
>```

## 拡張メソッドを利用したほうがいい場合

以下、引用部分はChatGPTの回答です。

> - 既存のクラスへの機能追加: 拡張メソッドは既存のクラスに新しいメソッドを追加するために使用されます。元のクラスのコードを変更することなく、新しい機能を提供できます。
>
> - 外部ライブラリへの機能追加: 他者が提供したクラスやライブラリに機能を追加する際に、拡張メソッドが有用です。元のコードを修正することなく、外部の型に対して新しいメソッドを定義できます。
>
> - フルモジュールなしでの機能提供: インターフェイスを実装する場合、クラス全体を作成する必要がありますが、拡張メソッドでは特定のメソッドだけを追加できます。
>
>```csharp
>public static class StringExtensions
>{
>    public static bool IsUpperCase(this string str)
>    {
>        return str.All(char.IsUpper);
>    }
>}
>```

## 所感

書かれていることはその通りなのですが、自分が「はじめに」で受けた指摘とは少し背景が違うように思いました。
おそらく、上記で書かれているほかに「インターフェイスで提供するものは最小限にしたほうが良い」というものがあるのではないかなと思います。  

自分が作ったメソッドはいわゆるオーバーロードで同名のメソッドで引数のバリエーションを増やしたものをインターフェイスに追加しようとしていました。ただ、その場合インターフェイスを実装するクラスではその増やしたメソッドの分だけ実装が増えてしまいます。そのようなことも考えると、よりきれいな設計になっていくのかなと思いました。
Pythonの配列の宣言をまとめてみた

Pythonの配列についてまとめました。

# Pythonの配列について
Pythonには4種類の配列があります。

ここでは、list型、tuple型、dictionary型、set型について記述します。

# list型
```py
A = list()
A = []
A = [1]
```
list型は、このどちらかで宣言することができる。
# tuple型
```py
B = tuple()
B = ()
B = (1,)  # 1要素の場合カンマが必要、カンマがないと優先演算の括弧に解釈される
B = 1,    # カンマがあれば括弧は省略可能、省略できない場合もある
B = (1, 2, 3)
```
tuple型は、基本的に要素を変更できない。
# dictionary型
```py
C = dict()
C = {}
C = {"key": "value"}
C = {"one": 1, 1: "one"}
```
dictionary型は任意の文字列や数字などを添え字のように指定できる。
# set型
```py
D = set()  # 空集合は set() でしか作れない
D = {1}
D = {1, 2, 3}
```
set型は配列内の要素が常に一意になる。
Pythonの動画エンコーディング

# opencv-pythonと動画エンコーディング
opencv-pythonは動画出力に対応している
動画圧縮規格としてWebでも再生できるh264やMJPGなどがある

# opencv-python H.264 ビデオ圧縮規格で動画作成
通常、pip install でライブラリを用いると使用するデバイスにあったバイナリがインストールされる
opencv-pythonはバイナリインストールの場合h.264圧縮が使えない
ソースからビルドすることで回避可能

```
# opencv-python from binary
cv2.VideoWriter_fourcc(*'avc1') #-> ERROR

# Purge for source build
pip uninstall opencv-python

# Enabled H264
pip3 install --no-binary opencv-python

# opencv-python from whl
cv2.VideoWriter_fourcc(*'avc1') #-> CORRECT
```

# H265
未検証
【TypeScript】any型についてわかったこと【初心者向け】

# はじめに
皆さんTypeScriptの`any型`についてどの程度知っていますか？

私は開発にTypeScriptをよく使用します。
しかし、一般的に`「any型を使用することは敗北である!」`と言われることが多いので、正直なところ`any型`には良い印象を持っていません。

https://qiita.com/uhyo/items/aae57ba0734e36ee846a

実際、私はエンジニアとして、日々の開発業務において`any型`を使用することを極力避けています。
インターフェースの定義や型のチェックには常に注意を払い、正確な型付けを心掛けています。
`any型`を見つけた際には、適切な型を特定するために尽力しています。
しかし、今まで`any型`について深く調査したことはありませんでした。そこで、今回`any型`について改めて調査し、得られた知見を以下にまとめます。

# any型とは
TypeScriptはしばしばJavaScriptのスーパーセットと表現されます。
TypeScriptには独自の概念や型がいくつか存在し、その中に「`any型`」があります。簡単に言うと、`any型`は型チェックを無効にする特別な型です。

TypeScriptは、コンパイルに成功することでJavaScriptコードに変換されます。
しかし、`any型`を使用すると、その変数に対する型チェックが行われなくなります。
結果として、基本的にコンパイルエラーが発生しない状況が生じます。

`any型`を使用することは、型安全性を確保するというTypeScriptの主要な恩恵を受けることを放棄するといえるでしょう。
型安全性は、実行時エラーのリスクを減らし、開発者によるコードの理解を促進する重要な要素です。
したがって、`any型`を使用することは、型安全性の確保することを放棄し、JavaScriptのような動的型付けの振る舞いに戻ることを意味します。

『プロを目指すためのTypeScript入門』という書籍では、TypeScriptにおける「`any型`」について、以下のように述べています


> TypeScriptで最も危険な機能として位置付けられている。
> `any型`を使用は非常に困難であり、避けるべきである。

これは`any型`がTypeScriptの型システムにおいて特異な位置を占めていることを示しています。
`any型`を使用することは、型安全性を損なう可能性が高く、結果としてデバッグや保守が困難になる可能性があります。
そのため、多くのTypeScript開発者は、必要な場合を除いて`any型`を使用を避けることを推奨しています。

また、私は開発にVSCodeを使用していますが、`any型`を使うと型の補完機能が働かず、オブジェクトのプロパティが確認できないため、都度コンソール上にログを出力して確認をしています。 こういった作業が頻繁に発生する場合、作業効率化の低下を招くと感じています。


### `any型`を使用するデメリット
- TypeScriptの主要な利点である型安全性が損失、実行時エラーのリスクの増加
- VSCodeなどのIDE上で型情報の補完が不可能なため開発効率の低下、リファクタリングやデバッグが困難になる


ではどういった場合に`any型`を使用することが有効なのでしょうか？

### `any型`を使用するメリット
- 型が不明確な外部ライブラリやAPIの利用時

any型は型システムの制約を無効化することができるため、型情報がない外部ライブラリやAPIからのデータを扱う際に柔軟な対応が可能になる。これにより、既存のJavaScriptライブラリやAPIとの互換性を保ちつつ、TypeScriptの恩恵を享受することができる

- JavaScriptからTypeScriptへのコード移行時

既存のJavaScriptコードをTypeScriptに移行する際には有効である。
型チェックを無効化することにより、即座にTypeScriptの利点を享受しつつ、段階的に型を厳格化していくことができ、大規模なコードベースの移行を容易することができる。


# まとめ
ここまでany型を使用することのデメリット、メリットをまとめました。
any型はほとんどのケースでは、使用によるデメリットが大きいが一部のケースでは有効なアプローチであることがわかりました。
今後も基本的に`any型`を使用しないという、姿勢は変わりませんが、本当に必要な時に適切に使用するための知識を身に着けて置くことは非常に重要だと感じました。

`any型`だけでなく、実務で普段から使用している技術についても、理解度を見直し、深く理解することの重要性を再認識しました。
TypeScriptは今後も業務で使い続ける予定なので、気になる箇所があれば都度調査し、まとめていきます。

# 参考文献
https://gihyo.jp/book/2022/978-4-297-12747-3

https://typescriptbook.jp/reference/values-types-variables/any