OmniAICreator/Qiita-1.07M huggingface dataset:
【Next.js × DOMPurify】DOMPurify.sanitize is not a functionの解決方法

# はじめに
`Next.js`で`DOMPurify`を使用した際に発生したエラーの解決方法について紹介します。

:::note warn
***この記事は<font color="Red">個人的なアウトプット</font>を目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです***。
:::

# 現象
以下のように`DOMPurify`を使用して`item.content`をサニタイズしようとしたところ、`Next.js`でエラーが発生しました。

```react
import DOMPurify from 'dompurify';

const sanitizeText = (text: string) => {
  return DOMPurify.sanitize(text, { ALLOWED_TAGS: [] });
};

return (
//省略

  <div>
    <div>{sanitizeText(item.content)}</div>
  </div>
  
//省略
);
```

# 解決方法
isomorphic-dompurify を使用することで、この問題を解決できます。
このライブラリはサーバーとクライアントの両方で動作する DOMPurify のラッパー であり、Next.js環境でもエラーなく利用できます。

## 手順

まず、`isomorphic-dompurify`をインストールします。
```zsh
npm install isomorphic-dompurify
```

次に、`isomorphic-dompurify`をインポートします。

```react
import DOMPurify from "isomorphic-dompurify";

const sanitizeText = (text: string) => {
  return DOMPurify.sanitize(text, { ALLOWED_TAGS: [] });
};

return (
  <div>
    <div>{sanitizeText(item.content)}</div>
  </div>
);
```
これにより、`DOMPurify`を`Next.js`の環境でも利用できるようになります。

https://github.com/kkomelin/isomorphic-dompurify

https://github.com/cure53/DOMPurify/issues/526

# 終わりに
`Next.js`では、クライアント側の処理とサーバー側の処理を分けて考えることが重要 です。
サーバー・クライアントの概念は少し難しいですが、引き続き学習を頑張ります！

# 参考

https://github.com/kkomelin/isomorphic-dompurify

https://github.com/cure53/DOMPurify/issues/526
IBM i で既存データベースの構造を調べたい

# はじめに
既存データベースの構造(カラム名・桁数などなど)を簡単に引っこ抜きたい！あわよくばEXCELで整理したい！
当時の設計書なんて残ってない！(最新になってない！)QDDSSRCは読みたくない！

# こんな人のための記事
- IBM i (AS/400)で既存DBを活用するプログラムの設計資料などを作らないといけない人。
- QDDSSRCを頑張らないと読み解けない人。

# QSYS2.SYSCOLUMNS2
を見ましょう。以上。

https://www.ibm.com/docs/ja/i/7.5?topic=views-syscolumns2

日本語のファイル名は`QSYS2.SYSTABLES`に保存されています。

https://www.ibm.com/docs/ja/i/7.5?topic=views-systables

# おまけ

以下よく使っているSQLです。
レコード件数はとても多いので、負荷が高いときの実行は控えましょう。

```
SELECT
    P.TABLE_SCHEMA     --ライブラリー名
   ,P.TABLE_NAME       --ファイル名
   ,S1.TABLE_TEXT      --ファイル名(日本語)
   ,P.ORDINAL_POSITION --カラム番号
   ,P.COLUMN_NAME      --カラム名
   ,P.COLUMN_HEADING   --カラムヘディング  
   ,P.DATA_TYPE        --データタイプ
   ,P.LENGTH           --桁数
   ,P.NUMERIC_SCALE    --小数桁数
FROM 
    QSYS2.SYSCOLUMNS2 AS P
    
LEFT OUTER JOIN QSYS2.SYSTABLES AS S1
 ON P.TABLE_SCHEMA = S1.TABLE_SCHEMA AND P.TABLE_NAME = S1.TABLE_NAME
    
WHERE 
    P.TABLE_SCHEMA = ?
--     AND TABLE_NAME LIKE ?

ORDER BY TABLE_SCHEMA,TABLE_NAME,ORDINAL_POSITION
```
18行目・19行目の検索条件は必要に応じて適宜変更してください。19行目はコメントアウトしてあります。
ACSのバージョンが1.1.9.2未満の場合は`?`を検索したい文字列を直接入力しましょう。
[参考: 「SQLスクリプトの実行」を2倍使いこなすtips](https://qiita.com/Nakanota/items/efdd1f70c08b596f6093#%E3%81%9D%E3%81%AE%E4%BB%96)

SQLで取得できるので、あとは煮るなり焼くなり好きにしましょう！
[Cryptosystem] 暗号文とハッシュ値の違い

# 暗号文とハッシュ値の違い
| 項目 | ハッシュ値  | 暗号文 |
|:-----|:--|:--------|
| **目的**   | データの整合性確認、改ざん検出  | データの機密性保 |
| **元のデータに戻せるか** | いいえ（不可逆）  | はい（可逆）  |
| **主な利用シーン** | パスワードの保存、データの改ざん検知| 通信の暗号化、ファイルの保護 |
| **主なアルゴリズム**  | SHA-256, MD5, SHA-1  | AES, RSA, DES            |
| **入力データの長さ**   | 可変長      | 可変長              |
| **出力データの長さ**   | 固定長（例：SHA-256は256bit）| 可変長         |
| **鍵の使用**     | 不要      | 必要                             |
| **利用例**      | チェックサム、電子署名  | HTTPS通信、ファイル暗号化         |

# 暗号文の利用プロセス
```mermaid
graph TD;
    A2[元データ] -->|暗号化（鍵を使用）| B2[暗号文]
    B2 -->|送信・保存| C2[データの保護]
    C2 -->|復号（鍵を使用）| D2[元データを復元]
```

# ハッシュ値の利用プロセス
```mermaid
graph TD;
    A1[元データ] -->|ハッシュ関数を適用| B1[ハッシュ値]
    B1 -->|比較| C1[改ざん検出]
    C1 -->|一致| D1[データが正しい]
    C1 -->|不一致| D2[改ざんの可能性あり]
```

# 参考リンク
- [Wikipedia: Hash function](https://en.wikipedia.org/wiki/Hash_function)
- [Wikipedia: Encryption](https://en.wikipedia.org/wiki/Encryption)
- [TutorialsPoint: Hashing](https://www.tutorialspoint.com/cryptography/hash_function.htm)
- [GeeksforGeeks: Cryptography](https://www.geeksforgeeks.org/cryptography/)
elm327の研究 その21

# 概要
elm327の研究やってみた。
練習問題やってみた。

# 練習問題
c#で、ELM327のエミュレータを書け。

# サンプルコード

```

using System;
using System.IO.Ports;
using System.Threading;
using System.Globalization;

public class ELM327 {
	public string talk(string a) {
		string res = "";
		string ans = "4" + a.Substring(1, 2) + " ";
		if (a.Substring(0, 3) == "ATZ")
			res += "ELM327 v1.4";
		else if (a.Substring(0, 2) == "AT")
			res += "OK";
		else if (a.Substring(0, 5) == "01 00")
			res += "41 00 FF FF FC FF";
		else if (a.Substring(0, 5) == "01 01")
			res += "41 01 84 07 61 00";
		else if (a.Substring(0, 5) == "01 20")
			res += "41 20 FF FF FC FF";
		else if (a.Substring(0, 5) == "01 40")
			res += "41 40 FF FF FC FF";
		else if (a.Substring(0, 5) == "01 60")
			res += "41 60 FF FF FC FF";
		else if (a.Substring(0, 5) == "01 80")
			res += "41 80 FF FF FC FF";
		else if (a.Substring(0, 5) == "01 A0")
			res += "41 A0 FF FF FC FF";
		else if (a.Substring(0, 5) == "01 C0")
			res += "41 C0 FF FF FC FF";
		else if (a.Substring(0, 2) == "01")
				res += ans + "00 00 00 00";
		else if (a.Substring(0, 2) == "03")
			res += "43 03 00 03 01 03\r\n43 13 01 04";
		else if (a.Substring(0, 5) == "09 02")
			res += "49 02 1Z3768470804";
		else
		{
			res += ans + " NO DATA\n";
		}
		return res;
	}
}
public class Program {
	public static void Main() {
		var elm = new ELM327();
		bool flg = true;
		while (flg)
		{
			string a;
			Console.Write(">");
			a = Console.ReadLine();
			var len = a.Length;
			if (a == "")
				flg = false; 
			Console.WriteLine(elm.talk(a));
		}
		Console.WriteLine("bai!");
	}
}




```

# 実行結果

```
>elm1
>ATZ
ELM327 v1.4
>01 00
41 00 FF FF FC FF
>01 22
41  00 00 00 00
```

以上。
daisyUIコンポーネントの疑似要素をカスタムしたい

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#punch-一緒に二次元業界を盛り上げていきませんか)まで。
:::

## :lipstick: 概要

daisyUIにある疑似要素を用いたコンポーネント（例えば[Tooltip](https://daisyui.com/components/tooltip/)）の色をカスタムする

## :lipstick: 環境

TailwindCSS v3.4.1
daisyUI v4.4.19

## :lipstick: 具体的に

daisyUIの[Buttonコンポーネント](https://daisyui.com/components/button/)などは、かなり細かく色や形をカスタムできますが、先ほどあげたTooltipのような疑似要素を使用している一部コンポーネントはdaisyUI側が用意しているカラーバリエーションしか使用できません :cry: 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835408/4ae8e000-9f4f-42bd-b2c4-a5a522573a61.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835408/681cdbb0-421a-4f0a-809b-c2bbd1c7c47e.png)

← これを こうしたい →

:::note info
primaryやsecondaryをtailwind.config.jsで上書きすることは可能です
:::

ただ、今回はdaisyUI側のスキーマを上書きせずに色を変更したいので、こうします。

```vue
<template>
  <div class="tooltip [--tooltip-color:#fce37d] [--tooltip-text-color:#473107]" data-tip="Tooltipだよ">
    <button class="btn">ホバーしてね</button>
  </div>
</template>
```

この`--tooltio-color`と`--tooltip-text-color`というのは、tooltipの中で使われているcss変数になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835408/ee37fbcd-187d-4891-bc6b-197b84b63ecc.png)

先ほどのような形で記述すれば、該当のcss変数に任意のカラーコードを割り当てることができます。

この方法で上書きできるcss変数はこちらにまとまっています。

https://daisyui.com/docs/utilities/#-4

:::note warn
当然ですがあくまでcss変数への割り当てのため、任意のクラスを割り当てることはできません（`[--tooltip-color:on-surface]` といった使い方はできない）
:::

## :bulb: ちなみに

今回はコンポーネント単位で上書きしましたが、`tailwind.config.js`で設定することもできます :smile: 

https://daisyui.com/docs/themes/#-5

## :punch: 一緒に二次元業界を盛り上げていきませんか
株式会社viviONでは、フロントエンドエンジニアを募集しています。

https://vivion.jp/recruit/

新卒採用はこちら

https://vivion.jp/recruit_fresh/

また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。
AI先生へ「積分のmathjaxをWolframAlphaのコマンドに変換して下さい。」2025 京都大学 前期理系数学【１】問２(1)

・WolframAlphaは、グラフ表示が入力１行で、ラクです。

# オリジナル

2025 京都大学 前期MathJax 【１】問２(1) ＜ 大学入試数学問題集成 様
https://mathexamtest.web.fc2.com/2025/202510541/2025105410100mj.html#top-0102

# ChatGPT先生へ
・質問リストの追番は無視して下さい。１個ずつです。途中の回答表示は省略しています。
```
<p class="s2level">(1)　<math>
<mrow><mstyle displaystyle="true"><msubsup><mo>&int;</mo>
<mn>0</mn><msqrt><mn>3</mn></msqrt></msubsup></mstyle>
<mstyle displaystyle="true"><mfrac><mrow><mi>x</mi><mo>&it;</mo><msqrt>
<msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></msqrt>
<mo>+</mo><mn>2</mn><mo>&it;</mo><msup><mi>x</mi><mn>3</mn></msup>
<mo>+</mo><mn>1</mn></mrow><mrow><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo><mn>1</mn></mrow></mfrac></mstyle><mo>&it;</mo>
<mi mathvariant="italic">dx</mi></mrow><mspace width="2em"></mspace>　をwolframalphaのコマンドに変換して下さい。
```
>(回答省略)

https://www.wolframalpha.com/input?i=Integrate%5B%28x+Sqrt%5Bx%5E2+%2B+1%5D+%2B+2+x%5E3+%2B+1%29+%2F+%28x%5E2+%2B+1%29%2C+%7Bx%2C+0%2C+Sqrt%5B3%5D%7D%5D&lang=ja

・こちらも,log4でした。
# Gemini先生へ
(未)
# copilot先生へ
(未)
ESP32: スイッチの状態を確認する

## プログラム

```text:gpio01.ino
// ---------------------------------------------------------------------
/*
	gpio01.ino
						Feb/28/2025
*/
// ---------------------------------------------------------------------
#define	PROGRAM	"gpio01.ino"
#define	VERSION	"2025-02-28 PM 16:59"

uint8_t gpio_pin1 = 32;
uint8_t gpio_pin2 = 33;

// ---------------------------------------------------------------------
void setup()
{
	Serial.begin(115200);

	pinMode(gpio_pin1, INPUT);
	pinMode(gpio_pin2, INPUT);

	delay(1000);
	Serial.println(PROGRAM);
	Serial.println(VERSION);
}

// ---------------------------------------------------------------------
void loop()
{
	if(digitalRead(gpio_pin1) == LOW)
		{
		Serial.println("*** LOW pin1 ***");
		}
	else
		{
		Serial.println("*** HIGH pin1 ***");
		}

	delay(500);

	if(digitalRead(gpio_pin2) == LOW)
		{
		Serial.println("*** LOW pin2 ***");
		}
	else
		{
		Serial.println("*** HIGH pin2 ***");
		}

	delay(500);
}

// ---------------------------------------------------------------------
```

## 実行時の様子
Arduino IDE 2.3.4 を使いました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ac8ba5b0-a947-461f-b4c6-a474e7cb93dd.png)
AutoRaiseを導入してMacのウィンドウアクティブ化を快適にする

MacとWindowsを行き来すると、Macではウィンドウを一度クリックしてアクティブにしないとボタンが押せないなど、クリック回数が増えて不便に感じることがあります。

「 [AutoRaise](https://github.com/sbmpost/AutoRaise) 」というアプリを導入すると、マウスカーソルをウィンドウに乗せるだけでアクティブ化でき、Windowsの操作感に近づけることができます。

https://github.com/sbmpost/AutoRaise

## AutoRaiseの設定方法

サイトの手順に従いAutoRaiseをインストール後、下記の設定を行いました。

1\. ウィンドウを前面に出さずにアクティブ化する
- 1番目のスライダー を左端にし、 `Window raise disabled` に設定
マウスカーソルを乗せたウィンドウをアクティブにするが、前面には表示しません。

2\. アクティブ化の遅延時間をゼロにする
- 2番目のスライダー を `Delay window focus for 0 ms` に設定
  ウィンドウのアクティブ化を即時にする（ここはお好みです）。

3\. 起動時に有効化  
- `Enable on launch` にチェックを入れる

4\. 例外アプリを指定する
- 一部のアプリでは、1番目の設定が効かず、カーソルを乗せると前面に出てきてしまう場合があります。その場合は、 `Ignore apps:` に該当アプリを追加することで対象外にできます。


![スクリーンショット 2025-02-28 16.29.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42028/3f84d9d7-77db-4361-874c-6197a7eb0d7d.png)


## まとめ

上記の設定でMacのウィンドウ操作がスムーズになり、クリック回数を減らして快適に作業できるようになります。Windowsの操作感に慣れている人には特におすすめです。
【よく使う】見ればすぐ使える！タグ一覧【HTML】

# ｜【はじめに】そもそも「HTML」ってなに？
<br>
　HP作成と切っても切り離せないのが、HTMLの存在。
　HTMLとは、
 
 「Webページを作成するためのプログラミング言語」
 
　これがないとWebサイトは成り立たない！
　文章や見出しなど、中身を構築している部分のこと。

　つまりは、雑にまとめてしまうと…

:::note info
「Webサイトの目に見えている文章全部」が、
基本はHTMLで構成されている。
:::

　ということになります。

 :::note alert
 ※ 注意 ※
 この記事は、文系脳の私が単純化した解釈に基づいて、初心者向けに作成されております。
 有識者は、見ても怒らないでください…笑
:::

　以上の注意を踏まえた上で、
　HTMLタグと呼ばれる、文章構成において必要な、
　よく使う要素を、下に一覧で記述しておきます。

## 【タグ機能一覧】
<details><summary>①見出し_heading</summary>

```HTML:書き方
<h1>見出し</h1>
<h2>見出し</h2>
...
<h6>見出し</h6>
```
実行結果：
# 見出し
## 見出し
###### 見出し

</details>

<details><summary>②段落_paragraph</summary>

```HTML:書き方
<p>段落とは</p>
```
使用用途：
①の見出し、段落は囲んだ文章の後が改行される。
見出し以外の、本文に当たる部分を段落で囲う。

</details>

<details><summary>③コメント</summary>

```HTML:書き方
<!ｰｰ この中の文字はブラウザに表示されません ｰｰ>
```
使用用途：
プログラムの補足など、自分のメモ代わりに使う。

</details>

<details><summary>④リンク先を指定</summary>

```HTML:書き方
<a href = "url">
```
使用用途：
リンクを作成する「a」に「href」という属性を追加すると、""の中にリンク先URLを指定することで、そのページへ遷移することが出来る。

実行結果：
[Qiita](http://qiita.com)

</details>

<details><summary>⑤画像表示_images</summary>

```HTML:書き方
<img src = "url">
```
使用用途：
画像の「img」に「src」という属性を追加すると、""の中に画像リンクを指定することで、画像が表示される。

実行結果：
<img width="120" src= "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756139/b169b513-9646-4e5b-b9a2-d5d0366dca5e.jpeg">
※ ↑は私のイラストです。興味ある方はこちらもどうぞ～
[宣伝用マイページ](https://www.pixiv.net/users/100361710)

</details>

<details><summary>⑥リストを作成_list</summary>

```HTML:書き方

<ul>
　<li>これは</li>
　<li>箇条書き</li>
　<li>です</li>
</ul>

```
使用用途：
<li>を囲む要素で、種類が変化する。
<ul>　～　「・」が先頭につく。箇条書き。
<ol>　～　「数字」が先頭に着く。ナンバリング。

実行結果：
・これは
・箇条書き
・です

</details>

<details><summary>⑦強調</summary>

```HTML:書き方

<P><strong>強調</strong></P>

```

実行結果：
**強調**

</details>


## 


※　随時更新予定
docker composeのbuild時COPY package*.json ./のエラー

# はじめに
 独学でプログラミングを勉強しながら学んだことについて記録したと考えています。もし内容に誤りや改善点があれば、ご指摘いただけると幸いです。:pray:

# COPY package*.json ./のエラー
 docker-compose.dev.ymlをビルドしてみようと思いましたが、以下のようなエラーになりました。

> => [backend 3/5] COPY package*.json ./                
> => ERROR [backend 4/5] RUN npm install                 

 > [backend 4/5] RUN npm install:
1.269 npm error code ENOENT
1.269 npm error syscall open
1.269 npm error path /app/package.json
1.269 npm error errno -2
1.269 npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/app/package.json'
1.269 npm error enoent This is related to npm not being able to find a file.
1.269 npm error enoent
1.271 npm error A complete log of this run can be found in: /root/.npm/_logs/2025-02-28T00_55_00_093Z-debug-0.log
------
failed to solve: process "/bin/sh -c npm install" did not complete successfully: exit code: 254

RUN npm installを実行しようとしたが、package.json見つかれなくて発生したエラーでした。

# 修正前docker-compose.dev.yml

```
services:
  backend:
    build:
      context: .
      dockerfile: backend/Dockerfile.dev
    container_name: oauth_backend_dev
    ports:
```

修正前はこのように作成していました。
- これが問題になる理由は以下になります。
- context: . だと Oauth ディレクトリ全体 が Docker ビルドの対象になるため、Dockerfile 内の COPY package*.json ./ はcontext のルート (Oauth/) からコピーしようとするからです。
- つまり、COPY package*.json ./ は Oauth/package.json を探してしまい、backend/package.json を見つけないことになります。

# 修正後docker-compose.dev.yml

```
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev
    container_name: oauth_backend_dev
    ports:
```

##### 修正のポイント
- context: ./backend にすることで、backend/ ディレクトリの中身だけが Docker のビルドコンテキストになります。
- これにより、COPY package*.json ./ は backend/package.json を正しくコピーできるようになります。
OpenAI API互換のEmbeddings APIをDockerで簡単に構築する方法


## はじめに
OpenAIのAPIと互換性のあるEmbeddings APIを簡単に構築する方法を紹介します。今回は、`engchina/embeddings-api:multilingual-e5-large-instruct`というDockerイメージを使用して、`/v1/embeddings`エンドポイントを提供するAPIを立ち上げます。

## 必要な環境
- Dockerがインストールされていること
- GPUが利用可能な環境

## Dockerコンテナの起動
以下のコマンドを実行して、Dockerコンテナを起動します。

```bash
docker run -d --name embeddings-api --gpus all -p 7965:7965 engchina/embeddings-api:multilingual-e5-large-instruct
```

このコマンドでは、以下のことを行っています。
- `-d`: コンテナをバックグラウンドで実行
- `--name embeddings-api`: コンテナに`embeddings-api`という名前を付ける
- `--gpus all`: すべてのGPUをコンテナに割り当てる（GPUがない場合はこのオプションを省略可能）
- `-p 7965:7965`: ホストの7965番ポートをコンテナの7965番ポートにマッピング
- `engchina/embeddings-api:multilingual-e5-large-instruct`: 使用するDockerイメージ

## APIの確認
コンテナが起動したら、以下のURLにアクセスしてAPIのドキュメントを確認できます。

[http://localhost:7965/docs](http://localhost:7965/docs)

このページでは、APIのエンドポイントやパラメータについて詳しく説明されています。

## curlコマンドでの確認
以下のcurlコマンドを使用して、`/v1/embeddings`エンドポイントにリクエストを送信し、APIが正しく動作しているかを確認します。

```bash
curl -X 'POST' \
  'http://localhost:7965/v1/embeddings?model_name=text-embedding-3-large' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "model": "text-embedding-3-large",
  "engine": "string",
  "input": "hi",
  "user": "string",
  "encoding_format": "string"
}'
```

このリクエストでは、以下のパラメータを指定しています。
- `model`: 使用するモデル名（`text-embedding-3-large`）
- `engine`: エンジン名（任意の文字列）
- `input`: 埋め込みを取得したいテキスト（ここでは`"hi"`）
- `user`: ユーザー識別子（任意の文字列）
- `encoding_format`: エンコーディングフォーマット（任意の文字列）

## まとめ
この記事では、Dockerを使用してOpenAI API互換のEmbeddings APIを簡単に構築する方法を紹介しました。`engchina/embeddings-api:multilingual-e5-large-instruct`イメージを使うことで、手軽に高性能な埋め込みAPIを利用できます。ぜひお試しください！
React 主要なフックの違いとユースケース

# React hooks

Reactには多くのフックがありますが、その中でも `useEffect`、`useMemo`、`useCallback` は、パフォーマンス最適化や副作用処理に関係する重要なフックです。本記事では、それぞれの役割、違い、そして適切なユースケースについて詳しく解説します。

---

## 1. `useEffect` - 副作用を管理する

### 役割

`useEffect` はコンポーネントのライフサイクルに応じて副作用を実行するためのフックです。データの取得、購読の管理、DOM の操作などが主な用途です。

### 使い方

```jsx
import { useEffect, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // countが変更されるたびに実行

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  );
}
```

### ユースケース

- **データのフェッチ** (APIリクエスト)
- **イベントリスナーの登録・解除**
- **DOMの操作** (タイトルの変更など)
- **クリーンアップ処理** (コンポーネントのアンマウント時)

---

## 2. `useMemo` - 値のメモ化

### 役割

`useMemo` は計算コストの高い処理の結果をメモ化するためのフックです。依存する値が変わらない限り、再計算を避けることでパフォーマンスを向上させます。

### 使い方

```jsx
import { useMemo, useState } from 'react';

function ExpensiveCalculationComponent({ num }) {
  const expensiveValue = useMemo(() => {
    console.log('Expensive calculation');
    return num * 2;
  }, [num]);

  return <div>Computed Value: {expensiveValue}</div>;
}
```

### ユースケース

- **計算コストの高い関数の結果をキャッシュ**
- **リストのフィルタリングやソートの最適化**
- **大きなデータ処理の負荷軽減**

---

## 3. `useCallback` - 関数のメモ化

### 役割

`useCallback` は関数をメモ化するためのフックで、コンポーネントの再レンダリング時に同じ関数インスタンスを維持するのに役立ちます。特に、子コンポーネントにコールバック関数を渡す場合に、不要な再レンダリングを防ぐために使われます。

### 使い方

```jsx
import { useState, useCallback } from 'react';

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 依存配列が空なので、常に同じ関数インスタンスを保持

  return (
    <div>
      <Button handleClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}
```

### ユースケース

- **子コンポーネントに渡すコールバック関数をメモ化** (不要な再レンダリングを防ぐ)
- **イベントハンドラの最適化**
- **依存関係リストの変化を抑える**

---

## 4. `useEffect`、`useMemo`、`useCallback` の違い

| フック           | 目的       | 主な用途                    |
| ------------- | -------- | ----------------------- |
| `useEffect`   | 副作用を管理   | APIリクエスト、イベントリスナーの登録・解除 |
| `useMemo`     | 計算結果をメモ化 | 高コストな計算の最適化             |
| `useCallback` | 関数のメモ化   | 子コンポーネントへの関数の再レンダリング防止  |

---

## まとめ

- `useEffect` は副作用処理（APIリクエスト、イベントリスナーの登録・解除など）に使用
- `useMemo` は高コストな計算を最適化し、無駄な再計算を防ぐ
- `useCallback` は関数のメモ化に使用し、子コンポーネントの無駄な再レンダリングを防ぐ

適切なフックを選択することで、Reactアプリのパフォーマンスを向上させることができます。
🎮 AIで進化するボス戦！未来のゲームは予測不能な戦いへ 🚀


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3917980/285e58a7-7866-44be-aa85-95b45b9cadb3.png)

ゲームのボス戦と言えば、強大な敵との戦い、パターンを覚えて攻略する楽しさがありますよね。しかし、従来のボス戦は**「パターン化された攻撃の繰り返し」** になりがちで、熟練プレイヤーには攻略されやすいものでした。そこで、**AI（人工知能）を活用した新世代のボスキャラクター** が登場し、ゲームの戦闘体験が大きく変わりつつあります！🎯

本記事では、**AIを活用したボス戦の進化、技術、実例、そして未来の可能性** について詳しく解説していきます！🔥

---

## 🤖 **AIがもたらすボス戦の革新とは？**

最近のゲーム開発では、AIを駆使してボスキャラクターの**攻撃パターンを予測不能にし、プレイヤーの行動に適応する** 仕組みが導入され始めています。

従来のボス戦では、
-  **固定パターン攻撃** → 覚えて回避すれば簡単に攻略できる
-  **難易度が固定** → プレイヤーのスキルに関係なく決まった難易度
-  **リプレイ性が低い** → 一度倒せば次回以降は楽勝

こうした課題がありました。しかし、**AIを活用したボス戦** では、
✅ **動的難易度調整（Adaptive AI）** → プレイヤーのスキルレベルに応じてボスの強さが変化！
✅ **学習型AI（Reinforcement Learning）** → プレイヤーの行動を学習し、戦術を変えてくる！
✅ **環境適応（Procedural AI）** → 戦闘フィールドの変化に対応し、よりリアルな戦いに！

**もはや「パターンを覚えるだけで攻略できるボス戦」は過去のものとなるかもしれません！**

---

## 🎭 **AIを活用したボス戦の主要技術**

### 1️⃣ **動的難易度調整（Adaptive AI）**
プレイヤーのスキルに応じて、ボスの行動や強さをリアルタイムで調整する技術。

💡 **例えば...**
- プレイヤーが回避を多用するなら、より速い攻撃を仕掛ける
- ダメージをあまり受けていないなら、ボスの攻撃力が上昇する

### 2️⃣ **機械学習を用いた行動予測（Reinforcement Learning）**
ボスがプレイヤーの過去の戦闘スタイルを学習し、同じ戦術が通用しなくなる。

💡 **例えば...**
- 何度も同じ攻撃パターンを繰り返すと、それを学習し回避するようになる
- プレイヤーが防御重視なら、ガードを崩す攻撃を増やす

### 3️⃣ **環境適応型AI（Procedural AI）**
戦闘フィールドの地形や天候に応じて、ボスの戦術が変化する。

💡 **例えば...**
- 火山エリアでは、火を使った攻撃が強化される
- 戦場が水辺なら、電撃系の攻撃が強力になる

これらの技術を組み合わせることで、**ボスキャラクターはまるで生きているかのように戦略を変える** ようになります！😱

---

## 🕹️ **AIを活用したボス戦の実例**

### 🎮 **1. 「SEKIRO: SHADOWS DIE TWICE」 - ボスの適応型行動**
FromSoftwareの名作「SEKIRO」では、一部のボスがプレイヤーの行動に適応するAIを採用。
-  **プレイヤーが遠距離攻撃ばかり使うと、それを回避するようになる**
-  **ガードを多用すると、ガードを崩す攻撃を増やす**

### 🎮 **2. 「The Legend of Zelda: Breath of the Wild」 - ダイナミックAI**
ゼルダの伝説 BotWでは、敵AIが環境に適応する仕組みが導入。
-  **天候が変わると、戦闘スタイルも変化**（雷雨の中では金属製の武器を持つとダメージを受ける）
-  **武器を持ち替えながらプレイヤーの行動に対応する**

### 🎮 **3. 「Middle-Earth: Shadow of Mordor」 - ネメシスシステム**
このゲームでは、敵がプレイヤーに倒されるたびに学習し、戦略を変える「ネメシスAI」を採用。
-  **過去に倒された敵が学習し、新たな戦術を持って再戦する**
-  **プレイヤーの攻撃パターンを記憶し、カウンターを取る**

これらのゲームは、AIを活用することで**よりリアルでスリリングなボス戦を実現** しています！🔥

---

## 🔮 **未来のAIボス戦はどうなる？**

💭 **プレイヤーがリアルタイムで戦略を考えなければならないゲーム** が主流になるかも？
💭 **AIが戦闘スタイルをリアルタイムで学習し、より強敵になっていく？**
💭 **プレイヤーごとに異なるボス戦が展開される可能性も？**

例えば、**AIが戦闘のたびにプレイヤーの行動を分析し、新しい攻撃を生み出す** ようなボスが登場するかもしれません。🎭

もしかすると、**次世代のボス戦は、まるで「AI vs プレイヤー」の頭脳戦** になるのかも？！🤯

---

## 🎯 **まとめ：AIボス戦の未来に期待しよう！**

✅ **AIがボスの行動を進化させ、より挑戦的な戦闘を実現！**
✅ **パターンを覚えるだけでは攻略できない、リアルな戦いが可能に！**
✅ **プレイヤーごとに異なるボス戦が展開される未来が来る？！**

AIを活用したボス戦は、ゲームの進化を加速させ、**これまでにない緊張感と達成感を生み出す** ことでしょう！🎮🔥

あなたは、AIが進化するボス戦についてどう思いますか？**コメントで意見を聞かせてください！😊**
自己流：正規表現を一生モノにするための覚え方

# はじめに

正規表現、何度学んでも忘れてしまう……そんな経験はありませんか？

「1回見れば一生忘れない！」を目指して、メタ文字の意味と語呂合わせを考えてみたので紹介します✨

# 私が忘れやすいメタ文字一覧


|メタ文字|意味 |
|---|---|
|. | 任意の一文字（1文字は必須） |
| *  | 直前の文字が0回以上繰り返される |
| + |  直前の文字が1回以上繰り返される|
| ? |  直前の文字が0回または1回|

# 一生忘れない！かも `. * + ?` の語呂合わせ

### `.` （ドット）
#### 「欲しいもの？なんでもいいけど、1つは欲しい！ワンドット🐶」
・どんな1文字でもOK！（ただし1文字は必ず必要）
・例：a.b → aとbの間に1文字ある（例：acb, a@b）

### `*` （アスタリスク）
#### 「ゼロから無限！気まぐれスター⭐️」
・直前の文字が 0回以上 繰り返される
・例：ho*t → ht, hot, hoot, hooot...

### `+` （プラス）
#### 「1回は必要！プラス思考🚀」
・直前の文字が 1回以上 繰り返される
・例：ho+t → hot, hoot, hooot（htはダメ）

### `?` （クエスチョン）
#### 「いるかいらないか？疑問の？（ハテナ）❓」
・直前の文字が 0回または1回
・例：colou?r → color, colour

# まとめ
正規表現は一度身につければ、一生役立つスキルです。
特に `. * + ?` の違いは 語呂合わせ でしっかり覚えておくと便利です。

`.` → 欲しいもの？なんでもいいけど、1つは欲しい！ワンドット🐶

`*` → ゼロから無限！気まぐれスター⭐️

`+` → 1回は必要！プラス思考🚀

`?` → いるかいらないか？疑問の？（ハテナ）❓

これで、もう忘れませんね！🥺

今後も正規表現を活用して、効率よく検索や文字列処理をしていきましょう！

# 参考
[以前書いた正規表現の記事](https://qiita.com/Asaminnn/items/5e79b484c775d6daa210)
Lisp のコメント記法について

# Lisp のコメント記法について

最近 Lisp の勉強を再開したのですが、
Emacs で Scheme をやっていると、次のようなことに気づきました。

- Emacs のフォーマッタは閉じカッコが一行につき一個になるまでフォーマットしてくれない
- どうも Lisper の間では、閉じカッコを最後の行にまとめる書き方が好まれるらしい
- `;`一つのコメントが右寄せされる

スタイルはともかく、勝手にコメントが右寄せされるのは困ります。
調べてみると、 Lisp ではインデントレベルを`;`の数で表現する作法のあることがわかりました。

- [Comment Tips (GNU Emacs Lisp Reference Manual)](https://ayatakesi.github.io/lispref/27.2/html/Comment-Tips.html)

`;`一つのコメントは行の最後に書かれる形式だそうです。
これでコメントを右寄せするメリットがわかりました、左寄せするとコメント間が遠くなり見にくくなるからでしょう。

## インデントレベルと役割

Lisp にはまだ docstring や範囲コメント `#||#` がありますが、ここでは無視します。

| レベル | 見た目| 役割 |
|:-:|:-:|:-:|
| 1  | ;   |  行についてのコメント、行の最後に書かれる |
| 2  | ;;  |  直後の小さなブロックについてのコメント |
| 3  | ;;; |  コメントに続く大きなブロックについてのコメント、左端に揃える |
| 4  | ;;;;|  ファイル全体あるいは大部分についてのコメント、左端に揃える |

## 例：クイックソート

例示のため、コメント行を極端に多くしました。
また、リンク先の記述によるとコメントの始まりを縦に揃えることを推奨していますが、
日本語だとフォントの問題で文字の幅が揃わずガタガタになり見苦しくなるため、コメント行の幅を揃えてません。

```scheme
;;;; ソートの実装

;;; クイックソート
;;; (リストを昇順にソートする再帰アルゴリズム)

;; quicksort: リストをクイックソートで昇順にソートする
;; lst: ソート対象のリスト
;; 戻り値: ソート済みリスト
(define (quicksort lst)
  (if (null? lst)
      '(); 空リストならそのまま返す
      (let* ((pivot (car lst)); 先頭の要素をピボットにする
             (rest (cdr lst)); 残りのリスト
             (smaller (filter (lambda (x) (< x pivot)) rest)); ピボットより小さい要素のリスト
             (greater (filter (lambda (x) (>= x pivot)) rest))) ; ピボット以上の要素のリスト
        (append (quicksort smaller); smaller の再帰呼び出しでソート
                (list pivot); ピボットをリストに変換して結合
                (quicksort greater)))))	; greater の再帰呼び出しでソート

;;; 使用例
;; `(quicksort '(3 1 4 1 5 9 2 6 5 3 5))`
;; => `(1 1 2 3 3 4 5 5 5 6 9)`
(quicksort '(3 1 4 1 5 9 2 6 5 3 5))
```

## 感想

- 全体的に Python を連想させる
    - `lambda` の記法ってもともとはこんなだったのかと感心
    - `;;;;` でファイル単位のコメントをする作法、Pylint で最初の行に docstrings を書くルールを思い出した
    - 慣れるとカッコを見ずにインデントだけを見るようになる。じゃあ、カッコなしでいいんじゃないかと思った
        - さらに慣れて無意識に閉じカッコを書くようになると気にならなくなるんでしょうね

## リンク

- 日本語
    - スタイル
        - [Lisp:コメント](https://practical-scheme.net/wiliki/wiliki.cgi?Lisp%3A%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88)
        - [Scheme:コーディングスタイル](https://practical-scheme.net/wiliki/wiliki.cgi?Scheme%3A%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB)
        - [Comment Tips (GNU Emacs Lisp Reference Manual)](https://ayatakesi.github.io/lispref/27.2/html/Comment-Tips.html)
    - フォント
        - [等幅フォント - Wikipedia](https://ja.wikipedia.org/wiki/%E7%AD%89%E5%B9%85%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88)
- 英語
    - スタイル
        - [CLHS: Section 2.4.4.2.1](https://www.lispworks.com/documentation/HyperSpec/Body/02_ddba.htm)
        - [Google Common Lisp Style Guide](https://google.github.io/styleguide/lispguide.xml#Documentation)
個人的備忘録：開発効率が上がる phpMyAdminの基本を体系的にまとめてみた

## はじめに

データベース管理は、開発や運用において重要な作業の一つです。

しかし、コマンドラインでの操作が苦手な人にとっては、SQLの知識が求められることがハードルになる場合もあります。

そこで登場するのがphpMyAdminです。本記事では、phpMyAdminの概要や主な機能について紹介します。

## 書こうと思ったきっかけ

データベース管理を行う際、コマンドライン操作に不慣れな人にとってはSQLの学習がハードルになることがあります。

そんな中、GUIで直感的に操作できるphpMyAdminの利便性に改めて気づきました。

特に、学習者や小規模な開発環境での利用に適しており、多くの人に役立つと感じました。そこで、本記事ではphpMyAdminの概要や主な機能を紹介し、活用のヒントを提供します。

## phpMyAdminとは？

phpMyAdminは、Webブラウザ上でMySQLやMariaDBのデータベースを管理できるオープンソースのツールです。

https://www.kagoya.jp/howto/it-glossary/develop/phpmyadmin/

https://www.sejuku.net/blog/30282

SQLの知識がなくてもGUIでデータベースの操作ができるため、初心者から上級者まで幅広く利用されています。

## 主な機能

- **データベースの作成・削除**
  - 新しいデータベースを簡単に作成し、不要になったものを削除できます。
- **テーブルの作成・編集・削除**
  - フィールド（カラム）の追加・削除、データ型の変更などの編集が可能です。
- **SQLクエリの実行**
  - クエリエディタを使用して、カスタムSQLを実行できます。SELECT、INSERT、UPDATE、DELETEなどの操作が可能です。
- **データのインポート・エクスポート**
  - CSVやSQL形式のデータをインポート・エクスポートし、データのバックアップや移行が簡単にできます。
- **ユーザー管理と権限設定**
  - MySQLユーザーの作成、削除、権限管理をGUIで行えます。
- **サーバーステータスの確認**
  - 実行中のプロセスやパフォーマンスの統計情報を確認できます。

phpMyAdminは、Webインターフェースを通じてMySQLやMariaDBを直感的に操作できるため、開発環境や本番環境でのデータベース管理に広く活用されています。

# まとめ

phpMyAdminは、MySQLやMariaDBを扱う際に非常に便利なツールであり、初心者でも直感的に操作が可能です。

:::note info
***そのため、データベース管理を効率化したい場合には導入を検討してみてください！***
:::

ただし、Web上で動作するため、適切なセキュリティ対策を施すことも重要です。
「VertiTab」バージョン2.17.0リリース：新しい検索体験とタブ管理機能の強化



VertiTabは、強力なブラウザタブ管理拡張機能として、本日重要なバージョン2.17.0のアップデートを迎えました。今回のアップデートでは、新しい検索機能、AIチャット統合、そしてより強力なタブ管理機能が追加されました。主な更新内容を見ていきましょう。

## 1. 新しい総合検索機能

 ![new_search.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836968/31735ff9-0805-4e21-b2ab-c66516154ba9.gif)


- **マルチソース検索対応**：
  - 開いているタブ
  - 最近閉じたタブ
  - 履歴
  - ブックマーク
  - 読み取りリスト
- **複数の検索エンジン対応**：Google、Bing、Yahoo、Baidu、Yandex、DuckDuckGo、Askなどの主要検索エンジンを統合
- **@コマンドによる素早い切り替え**：@コマンドで検索ソースを素早く切り替え可能
- **カスタマイズ管理**：検索ソースのカスタマイズ管理と並べ替えをサポート

## 2. AIチャット統合

- 検索バーに内容を入力後、対象のウェブサイトを開き、チャットダイアログに自動入力して問い合わせを送信
- 主要なAI対話モデルをデフォルトでサポート：
  - ChatGPT
  - Claude
  - Gemini
  - DeepSeek
- モデルの追加、編集、削除、並べ替えをサポート

## 3. タブ操作の強化

### タブの複製と移動
- 統一されたウィンドウ操作メニューを追加
- タブの複製先オプション：
  - 現在のウィンドウ
  - 新しいウィンドウ
  - シークレットウィンドウ
  - 他の既存のウィンドウ（アクティブタブのプレビュー付き）
- バッチ操作のサポート
- 検索結果項目の右クリックメニューをサポート

### ブックマーク機能の強化
- タブの右クリックメニューに単一タブのブックマークオプションを追加
- ブックマークダイアログで直接新しいブックマークフォルダを作成可能
- 複数のタブをサブフォルダとしてブックマークに追加（Premium機能）
- タブグループをグループ名をデフォルトフォルダ名としてブックマークに追加（Premium機能）

## 4. 自動タブグループ化

- 柔軟なドメイン形式オプションを導入：
  - メインドメイン
  - サブドメイン
  - ドメインプレフィックス
  - サフィックスなしドメイン
  - カスタム組み合わせ

## 5. パフォーマンスの最適化

- **タブツリー処理の最適化**
  - 循環参照の検出と自動修復メカニズムを追加
  - 親子タブ関係の処理を最適化
- **最近閉じたタブの改善**
  - デフォルトの保持期間を1日から30日に延長
  - 保存可能数を100から5000に増加
  - 履歴同期メカニズムを最適化
  - 復元時にタブ履歴レコードを保持
- **TabLens機能の最適化**
  - 監視要素のパフォーマンスを最適化
  - 無料ユーザーも設定を保存可能（サイトごとに1つまで）

## 6. その他の改善点

- 最近閉じたタブのプリロード
- 検索ボックスの複数行表示を最適化
- Vivaldiブラウザでのタブメニュー表示を最適化
- タブ履歴の更新問題を修正
- タブアバターの表示問題を修正
- 検索結果タブの右クリックメニューの問題を修正
- クイックアクセスリストの重複UUID問題を修正
- 空のタイトルタブの処理ロジックを改善

## まとめ

今回のアップデートでは、新しい検索体験を提供するだけでなく、多くの機能強化によってタブ管理の効率を向上させました。特にAIチャット統合と自動タブグループ化などの機能により、ユーザーにより賢く、より便利なブラウジング体験を提供します。

## ダウンロード

Chrome ウェブストア：[VertiTab - Side Panel Vertical Tabs](https://chromewebstore.google.com/detail/chejfhdknideagdnddjpgamkchefjhoi)

この拡張機能が役立つと感じられた場合は、ストアでの評価とフィードバックをお願いします！
ググり方

# 概要

最近というか前から、分かんなかったら、人に聞く前に、ググれ！と言われるようになりました。
最近はAIでも教えてくれますが、私の場合、基本Googleで検索するのがほとんどです。
ここでは、ググり方（Googleで検索する方法）を記事にしてみます。

# Googleで検索してみよう

以下のページに自分の興味がある言葉を入力してみましょう。

https://www.google.com/

私の場合コンピュータに興味があるので、「コンピュータ」と入力してみます。
入力後にエンターを押すと検索が実行されます。
結果は以下の通りです。

![Screenshot from 2025-02-28 16-41-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/73668d53-4a7b-4aa3-bae5-1d813de7c06a.png)

上の方にはAIが書いたコンピュータの説明文があります。
右側にはコンピュータの画像が表示されます。
左側の下の方にはWikipediaのページへのリンクがあります。

こんな調子で好きな単語を検索窓に入力して、エンターを押すだけでそれに関する情報が簡単に手に入ります。
スマホだとキーワードを入れて検索ボタンを押すのでもOKです。

# まとめ

何かの役に立てばと。
小学生にもわかる！DIDとVerifiable Credentials（VC）のしくみ

## はじめに
SSI（Self-Sovereign Identity）、DID（Decentralized Identity：分散ID）、VC（Verifiable Credential：検証可能な資格情報）について調べるうちに、多くの専門用語や複雑な概念が登場し、理解するのが難しいと感じました。
これらの仕組みをできるだけシンプルに、わかりやすく解説してみました。

## ① DID（分散型識別子）：デジタルの名前
 💡 DIDとは、インターネットの世界で使う「特別な名前」 

🔹 **学校の世界：**
 　   - 君の名前は「ひなた」
　    - クラスでは「1年1組のひなた」って呼ばれる
    - 
🔹 **デジタルの世界（DID）：**
    - インターネット上では「did:example:12345abc」みたいな特別で1つしかないIDがもらえる
    - このIDは、ひなた だけが使えるもので、他の人が勝手に変更することはできない
    - 
💡 ポイント💡
✅ 学校が決める名前ではなく、自分のDIDを自分で持てる
✅ 名前（DID）は、誰かが勝手に消したり変えたりできない

## ②  Verifiable Credentials（VC）：デジタルの学生証💳
💡 VCとは、DIDを使ってもらう「デジタル証明書」

🔹 学校の世界：
　 　   - 学校および先生が「ひなたは、1年1組の生徒です」という学生証をくれる
　 　   - 君は学生証を持って、図書館で見せる
　 　   - 
🔹 デジタルの世界（VC）：
　 　   - 先生（Issuer） が「did:example:12345abcは小学1年生です」というVCを発行してくれる
　 　   - 君（Holder）はVCを**デジタルの財布（ウォレット）**にしまっておく
　 　   - 図書館の先生（Verifier）が、君のVCをチェックして「本当に1年生か？」を確認できる
　 　   - 
💡 ポイント💡
✅ デジタルの学生証（VC）は、デジタルで持ち歩ける
✅ デジタルの学生証（VC）には、君のDIDが書いてあり、本物かどうか確認できる
✅ 改ざんできないので、先生が発行したことを誰でも確かめられる

## ③ DIDとVCを使うと、学校に連絡しなくても図書館で本が借りることができる📚

🔹 学校の世界（従来の方法）：
　 　   - 1年生しか借りられない本を借りたいとき、図書館の先生が学生証の内容が本物か**学校の先生**に確認する必要がある

🔹 デジタルの世界（DIDとVCの組み合わせ）：
　 　   - 図書室の先生は、君の デジタルの学生証(VC)をみれば1年生かどうかわかる
　 　   - 学校に問い合わせしなくてもOK

💡 なぜ？💡
✅ 君のDIDは 君だけのもの
✅ VCは先生が発行した証明書（改ざんできない）
✅ 図書館の先生は、VCの電子署名を確認するだけでOK（学校に連絡しなくてもよい）

## ④ SSI（自己主権型アイデンティティ）：自分でIDを管理できる仕組み🔐
💡  SSIとは、「自分の証明書を自分で管理し、必要なときに自分で提示できる仕組み」

🔹 学校の世界（今までのやり方）：
　 　   - 図書館で本を借りる → 先生が「君は1年生かな？」と学校の記録を確認する

📌 問題点
　 　   - 学校が情報を持っているから、学校の先生に聞かないと証明できない
　 　   - もし記録が間違っていたら、自分ではすぐに修正できない
　 　   - 
🔹 デジタルの世界（DIDとVCの組み合わせ）：
　 　 - 図書室の先生は、デジタルの学生証(VC)をみれば1年生なのかわかる
　 　 - 学校に問い合わせしなくてもOK

💡 SSIで便利になるポイント💡
✅ 学校の先生にきかなくても、すぐに本人確認できる
✅ 必要な情報だけを見せられる（名前だけ、学年だけ など）
✅ 情報が間違っていたら、新しい証明書をすぐにもらえる

## まとめ
今回紹介した SSI（Self-Sovereign Identity：自己主権型アイデンティティ）、DID（Decentralized Identity：分散型アイデンティティ）、VC（Verifiable Credential：検証可能な資格情報） の仕組みと、Issuer（発行者）・Holder（保持者）・Verifier（検証者）・ウォレット の関係性について、少しでも理解を深める助けになれば幸いです。
Pythonのゲーム開発ライブラリPyGameの使用方法

# はじめに
PyGameは、Pythonでゲーム開発するための強力なライブラリです。2Dゲームの作成に適しており、初心者から超級者まで幅広く利用されています。この記事では、PyGameの基本的な使用方法を紹介します。

# 目次
[インストール](#インストール)
[基本的な構造](#基本的な構造)
[主要な機能](#主要な機能)
- [描画](#描画)
- [イベント処理](#イベント処理)
- [音声](#音声)
- [衝突検出](#衝突検出)
- [応用例：簡単なゲーム](#応用例：簡単なゲーム)

[まとめ](#まとめ)



# インストール
まずPyGameをインストールする必要があります。以下コマンドを使用してインストールできます。
```bash
pip install pygame
```
# 基本的な構造
PyGameを使用したゲームの基本的な構造は以下のようになります。
```python
import pygame
import sys

# 初期化
pygame.init()

# ウィンドウの作成
screen = pygame.display.set_mode((800, 600))
pygame.display.set_caption("My PyGame")

# メインループ
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    # ゲームロジック
    
    # 描画
    screen.fill((255, 255, 255))  # 白色で塗りつぶし
    pygame.display.flip()  # 画面更新

# ゲーム終了
pygame.quit()
sys.exit()

```
# 主要な機能

### 描画
PyGameでは、様々な図形や画像を描画できます。
```python
# 四角形を描画
pygame.draw.rect(screen, (0, 255, 0), (100, 100, 50, 50))

# 画像の描画
image = pygame.image.load("player.png")
screen.blit(image, (200, 200))

```

### イベント処理
ユーザーの入力(キーボード、マウス)を処理できます。
```python
for event in pygame.event.get():
    if event.type == pygame.KEYDOWN:
        if event.key == pygame.K_SPACE:
            # スペースキーが押されたときの処理
    elif event.type == pygame.MOUSEBUTTONDOWN:
        # マウスクリック時の処理

```
### 音声
BGMや効果音を再生できます。
```python
pygame.mixer.music.load("bgm.mp3")
pygame.mixer.music.play(-1)  # -1で無限ループ

sound_effect = pygame.mixer.Sound("effect.wav")
sound_effect.play()

```
### 衝突検出
オブジェクト間の衝突を検出できます。
```python
player_rect = pygame.Rect(100, 100, 50, 50)
enemy_rect = pygame.Rect(200, 200, 50, 50)

if player_rect.colliderect(enemy_rect):
    print("衝突しました!")

```

### 応用例：簡単なゲーム
以下は、動く四角形(プレイヤー)を操作する簡単なゲームの例です。
```python
import pygame
import sys

pygame.init()
screen = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()

player_pos = [400, 300]
player_size = 50

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        player_pos[0] -= 5
    if keys[pygame.K_RIGHT]:
        player_pos[0] += 5
    if keys[pygame.K_UP]:
        player_pos[1] -= 5
    if keys[pygame.K_DOWN]:
        player_pos[1] += 5

    screen.fill((0, 0, 0))
    pygame.draw.rect(screen, (0, 255, 0), (player_pos[0], player_pos[1], player_size, player_size))
    pygame.display.flip()

    clock.tick(60)

pygame.quit()
sys.exit()

```
このコードでは、矢印キーを使ってプレイヤーを動かすことができます。

# まとめ
PyGameは、Pythonでゲームを開発するための強力なツールです。基本的な描画、イベント処理、音声再生、衝突検出などの機能を提供し、2Dゲーム開発を容易にします。この記事では紹介した基本的な使い方を理解すれば、より複雑なゲームの開発に挑戦することができるでしょう。
最後まで読んでくださり、ありがとうございました。もし改善点や質問があれば、ぜひコメントしてください！
ライブラリの型エラー解決手順：NextUIのDatePickerを例に解説

# はじめに
TypeScriptを使用しているプロジェクトでは、依存関係のバージョン不一致が原因で型エラーが発生することがあります。

本記事では、NextUIのDatePickerで発生した型エラーを例に、一般的な型エラーの解決手順を解説します。

# 発生した型エラー
NextUIのDatePickerコンポーネントを使用する際に、以下のような型エラーが発生しました。

```bash
Type 'ZonedDateTime | null' is not assignable to type 'CalendarDate | CalendarDateTime | ZonedDateTime | null'.
  Type 'ZonedDateTime' is not assignable to type 'CalendarDate | CalendarDateTime | ZonedDateTime | null'.
    Type 'import("/path/to/node_modules/@internationalized/date/dist/types").ZonedDateTime' is not assignable to type 'import("/path/to/node_modules/@nextui-org/system/node_modules/@internationalized/date/dist/types").ZonedDateTime'.
      Property '#private' in type 'ZonedDateTime' refers to a different member that cannot be accessed from within type 'ZonedDateTime'.
```

これは、同じライブラリ (@internationalized/date) でありながら異なる場所からインポートされていることが原因で、TypeScriptが異なる型として扱ってしまうために発生しています。

# 型エラーの原因
この問題の原因を特定するために、依存関係のバージョンを調査しました。

特に注目したのは、以下の2つの異なる @internationalized/date のインポートパスです。

1. プロジェクトが直接使用している @internationalized/date
2. NextUIが内部で使用している @internationalized/date

これらのバージョンが異なる場合、TypeScriptは ZonedDateTime を異なる型と見なし、型の不一致が発生することがわかりました。

# 型エラー解決の手順
この型エラーを解決するために行った手順を以下にまとめます。

## 1. エラーメッセージの分析
まず、エラーメッセージを読み取り、どの型が競合しているかを特定します。

今回の場合、@internationalized/date が異なるパスからインポートされていることが問題の核心でした。

## 2. 依存関係のバージョンを確認
依存関係のバージョンを確認するために、yarn.lock を調査しました。

以下のコマンドを実行し、NextUIが使用している @internationalized/date のバージョンを特定しました。

```bash
grep -A 10 "@internationalized/date" yarn.lock
```

```bash:結果
"@nextui-org/datepicker@npm:2.2.9":
  version: 2.2.9
  resolution: "@nextui-org/datepicker@npm:2.2.9"
  dependencies:
    "@internationalized/date": "npm:3.6.0" # ここ
    "@react-aria/datepicker": "npm:3.12.0"
```

その結果、NextUIの DatePicker が @internationalized/date のバージョン 3.6.0 に依存していることが分かりました。

## 3. 主要ライブラリに合わせてバージョンを統一
NextUIが使用しているバージョン (3.6.0) に合わせて、プロジェクトの package.json に明示的に追加しました。

```json
{
  "dependencies": {
    "@internationalized/date": "3.6.0",
  }
}
```
これにより、NextUIとプロジェクトが同じバージョンの @internationalized/date を使用するようになります。

## 4. 依存関係を再インストール
変更後に、以下のコマンドで依存関係を再インストールしました。

```bash
yarn install --mode update-lockfile
```
これにより、依存関係が正しく統一され、型エラーが解消されました。

# まとめ
TypeScriptプロジェクトで発生する型エラーは、一見複雑に見えても、落ち着いてエラーを読み、１つずつ原因を追求していくことで解決できることを体感しました。
AI先生へ「積分を(sympyで)解答して下さい。」2025 京都大学 前期理系数学【１】問２(1)

# オリジナル

2025 京都大学 前期MathJax 【１】問２(1) ＜ 大学入試数学問題集成 様
https://mathexamtest.web.fc2.com/2025/202510541/2025105410100mj.html#top-0102
(参考 mathjax表示)
https://qiita.com/mrrclb48z/items/c49116c24348fb6d646a

# 考察

・ChatGT先生へ。解答ありがとうございました。
・**本日ChatGT先生は???...** 私の質問方法が悪いかも。
・最初の質問(sympyなし)で
> 分子の各項を分けて、適切な方法,積分の各部分を個別に解析して解答を求めることが一般的です。

　第1項の積分(計算１つ)
　第2項の積分(計算3つ)
　**ステキ**
・sympyでお願いすると、なかなか分子を4つの項に分解にしてもらえませんでした。
　**ChatGPT先生も、ラクしようとされているかも。**
　もしかしたら、ChatGPT先生は質問者の性格を読み取っているかもしれません。
・当初,スクショ(スクリーンショット)からでもと思いましたが、
　スクショだと保存がメンドーです。

・(追加) 2log2でした。私の聞き方が不十分でした。**アドバイスをいただけると幸いです。**

# ChatGPT先生へ
・質問リストの追番は無視して下さい。１個ずつです。途中の回答表示は省略しています。
```
# 質問リスト
1. 以下を日本語で解答して下さい。  
   <p class="s2level">(1)　<math>
   <mrow><mstyle displaystyle="true"><msubsup><mo>&int;</mo>
   <mn>0</mn><msqrt><mn>3</mn></msqrt></msubsup></mstyle>
   <mstyle displaystyle="true"><mfrac><mrow><mi>x</mi><mo>&it;</mo><msqrt>
   <msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></msqrt>
   <mo>+</mo><mn>2</mn><mo>&it;</mo><msup><mi>x</mi><mn>3</mn></msup>
   <mo>+</mo><mn>1</mn></mrow><mrow><msup><mi>x</mi><mn>2</mn></msup>
   <mo>+</mo><mn>1</mn></mrow></mfrac></mstyle><mo>&it;</mo>
   <mi mathvariant="italic">dx</mi></mrow><mspace width="2em"></mspace>
2. 上記の解答をお願いします。
3. 上記をsympy のソースコードでお願いします。
4. 上記を分子を分解したsympy のソースコードでお願いします。
5. 上記の第2項も分解して下さい。
6. 上記の第2項は、当初の3つで分解したソースコードでお願いします。
```
>(回答抜粋)
このコードを実行すると、4 - log(4) + pi/3 という結果が得られます。

```
I1: 1
I2: 3 - log(4) + pi/3
I_total: 4 - log(4) + pi/3
```
```
I1: 1
I2_1: 3 - log(4)
I2_2: pi/3
I_total: 4 - log(4) + pi/3
```
・私は,最終ソースコードのみ表示です。途中のソースコードは省略です。
```python
import sympy as sp

# 変数の定義
x = sp.symbols('x')

# 分母の定義
denom = x**2 + 1

# 分子の各項を分解
num1 = x * sp.sqrt(x**2 + 1)  # 第1項
num2_1 = 2*x  # 第2項のうち 2x
num2_2 = - (2*x) / (x**2 + 1)  # 第2項のうち - (2x / (x² + 1))
num2_3 = 1 / (x**2 + 1)  # 第2項のうち 1 / (x² + 1)

# 各分数に分解
term1 = num1 / denom
term2_1 = num2_1  # 2x はそのまま
term2_2 = num2_2
term2_3 = num2_3

# 各項を積分
I1 = sp.integrate(term1, (x, 0, sp.sqrt(3)))
I2_1 = sp.integrate(term2_1, (x, 0, sp.sqrt(3)))
I2_2 = sp.integrate(term2_2, (x, 0, sp.sqrt(3)))
I2_3 = sp.integrate(term2_3, (x, 0, sp.sqrt(3)))

# 合計を計算
I_total = I1 + I2_1 + I2_2 + I2_3

# 結果の出力
print("I1:", I1.simplify())
print("I2_1:", I2_1.simplify())
print("I2_2:", I2_2.simplify())
print("I2_3:", I2_3.simplify())
print("I_total:", I_total.simplify())
```
```pyyhon
I1: 1
I2_1: 3
I2_2: -log(4)
I2_3: pi/3
I_total: 4 - log(4) + pi/3
```
>これは 手計算の結果と一致 します！

# Gemini先生へ
(未)
# copilot先生へ
(未)


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

# いつもと違うおすすめです。
#### Qiita内

https://qiita.com/mrrclb48z/items/b6351b48e47bcf6265c0
プレビューなしでWebアプリから印刷

 プレビューなしでWebアプリから印刷できるように、[pdf-print-proxy](https://github.com/ns2j/pdf-print-proxy)を作りました。   
 
 Spring BootでPDFファイルをREST APIで受取り、Windowsは[PDFtoPrinter.exe](https://mendelson.org/pdftoprinter.html)を、Mac、Linuxはlprを呼び出します。   
    
 各ローカルコンピュータにインストールして使います。インストーラーはjpackageでつくります。   
    
 Mac、Linuxはrootユーザーでサービスとして動きます。   
 
 Windwosもサービスにしてみましたが、[ここ](https://stackoverflow.com/questions/9488844/printing-by-executing-a-process-in-a-windows-service)などによると、ネットワークプリンターはSYSTEMアカウントではつかえないようです。 jpackageでは、サービスでないと自動起動でインストールできないようなので、アイコンクリックで起動し、システムトレイのアイコンから止めます。必要なら自分でスタートアップフォルダに入れてください。   

### 動作確認　
```
curl http://localhost:6753
``` 
でプリンターのリストが返ってきます。
data.jsonのprinterNameを編集して、
```
curl http://localhost:6753 -d '@data.json' -H 'Content-Type: application/json'
``` 
とすると、印刷できます。

### サンプルWebアプリ 
sampleフォルダーにサンプルWebアプリがあります。
```
mvn spring-boot:run
```
で、ポート8080でWeb Serverが動きます。
ポートを変えたいときには、
```
mvn spring-boot:run "-Dspring-boot.run.jvmArguments=-Dserver.port=<port>"
``` 
とします。
また、
```
mvn package
``` 
で、jarを作り
```
java -jar target/pdf-print-proxy-sample-<version>-exec.jar
```
で、実行もできます。ポートを変えるときには、
```
java -Dserver.port=<port> -jar target/pdf-print-proxy-sample-<version>-exec.jar
``` 
とします。 

ブラウザで、http://localhost:8080/sample.html にアクセスしてください。

サンプルの本体は、
```
src/main/resources/static
```
にあります。

思ったより、pdfをbase64にかえるのが難しかったのでユーティリティクラスを作りました。

これらを参考にして自身のWebアプリに組み込んでください。
力学の単位

ものの大きさや単位について概算できないといけない。知ってないといけない。まずは速度、加速、トルク、仕事、などである。数式で計算する前にだいたいどうなりそうかわからないと、桁の違うようなデタラメな答えを書いても一つも気がつかない、ということがおこる。教科書なんかにも書いてるのは書いてるけど結局は自分で考えて計算してみないと身につかないかもしれない。以下は、ほぼ高校レベルではあるけど体得できてないな、という人も多いように思う。

* １Nが100gのものを下から支えるのに必要な力(重力定数は10m/s$^2$とする)
* 1.4sで10ｍ自然落下する。14sなら1000m自然落下する。2.8sで40m。ホームランならその2倍として6秒ぐらいは飛ぶ。30sで自然落下で音速に達する。1000sで地球脱出速度に達する。光速に達するには1年ぐらいかかる。
* 1.5Vの電池で1Aで1s流すと1.5Jとなる。これは1.5W. 電子には100gの物体を1.5m押し上げるだけのエネルギーが電池から供給されている。1.5Wだと1gの水が3秒で1度ほど上昇する。
--
* タイヤを締めるときのネジのトルクは１００Nm.大きいトルクレンチで人力の限界。
* クルマのエンジンのトルクも100Nm程度。1sで100回回るとすると、
100 1/s x 2π x 100Nm= 60$^4$ J/s=60KW
* コンビニスイーツが200kcal=800kJ。アーモンドチョコ一個で200kJぐらいか
* 4kgの鉄アレイを両手に持って持ち上げる（50cm上げるとする）と40Jなので コンビニスイーツ800kJだと、800kJ/40J=20000回の上げ下げで消費できる。
* 40W出力だと1sで40Jなので、20000秒で800kJとなる。
* スマホのバッテリ、5000mAhとすると、5V(USBの電圧）x5A＝25Wで3600秒出せるということだから90kJになる。アーモンドチョコの半分ぐらい。EVでは1kWhを単位にしている。1kWh=1000J/s x 3600 s=3600kJ=900kcalとなる。だいたい5kmぐらい走れるらしい。
* 太陽光は1kW/m^2ぐらいある。太陽電池は20％として1m^2で200Wの発電能力
* 人間の基礎代謝を100Wとすると一時間で360kJ。24時間で8000kJぐらいか。100Wの電球なんてもう世の中にないけれど触るとやけどする熱さ。
--
* 水深10mで、10mx 10$^3$kgx 10 m/s$^2$ x 1/m$^2$=10$^5$N/m$^2$=1000 hPa ($F=ma$を思い出すとN=Kg m/s$^2$)。単位の乗除をきちんと確認。
--
* 人間の走る速さは10m/sで36km/s. 音速は300m/s$\sim$1000km/h,地球脱出速度は10km/s。音速と光速の比は10^6.1sの自然落下で10m/s(オリンピック選手の速度）。
--
* 原子のサイズ。1cm角の角砂糖で1億ｘ1億ｘ1億個。10$^{24}$、アボガドロ数。1モル。
* 電子が1モルで96500クーロン。その質量は1/1800 g
* 原子内の電子速度は100km/s程度。光速は3x10^8m/s。その比がおよそ微細構造定数で137。10$^4$ K$\sim$1eV$\sim$100kJ/mol
* 1μFのキャパシタに1000Vかけると10^-3Cたまる。エネルギーは0.5J。
* 100V,1A,60Hzの交流を整流した後、平滑化したいとする。$V=LdI/dt　$を考えると、100V=L x 1A/(1/60 s)より、1H(ヘンリー）ぐらいのインダクタが必要なのがわかる（巨大です）。DCアダプタの一次側だと100V,1A,100KHzとして1/1000の程度だから1mHのインダクタでよい。
コードレビュー時に"しないこと"３選

# はじめに
エンジニアとしての経験がある程度増えてくると、コードレビューを担当することも増えてくると思います。

コードレビュー時にするべきことはたくさんあると思うので、あえて今回はコードレビュー時に "しないこと" をシンプルに３つまとめます。

これを知ることで、コードレビューを効率よく的確に行えると思います。

# コードレビュー時に "しないこと" ３選

1. ローカルで動作確認しない
2. 「動いているからいいか」をしない
3. 代わりに実装しない

慣れている人にとっては当然意識していることかもしれませんが、
詳細がとても大切ですので、できているかぜひチェックしてみてください。

## 1. ローカルで動作確認しない
これをやってしまうと起こる問題は...

- 非効率

とにかくこれです。
動作確認はあくまでプルリク作成者に行ってもらいましょう。
プルリク作成時のルールとして「デザインの変更はスクショ必須」「ユーザーの動作を伴う変更はスクリーンレコーディング必須」と取り決めておくと良いでしょう。

## 2. 「動いているからいいか」をしない
これをやってしまうと起こる問題は...

- パフォーマンス低下の原因になり得る
- 今後の開発負債となり得る
- 相手の学習機会を奪ってしまう

といったことです。
後でしようと思っていることは、することはないと思っておくと良いでしょう。

ほんの少しパフォーマンスに影響があれば、それが繰り返されボトルネックになっていく可能性もあります。
関数の命名が適切でなかったり、もっとシンプルにかけるロジックを放置しておけば、その後の開発に無駄な工数が増える危険性も含んでいます。
今取り組むことが最善だと思いましょう。

また、プルリク作成者は「今がベスト」だと思っている可能性もあるため、学習や知るきっかけを奪うことにつながります。
もっと良い書き方があるのにレビューしないことは、レビュワーの最大の罪です。

:::note warn
どうしても急がないといけない場合は「必ずその場で」期限を明確にしてissue化・タスク化しましょう！
:::


## 3. 代わりに実装しない
これをやってしまうと起こる問題は...

- 今後のレビュー負荷が減らない
- 相手の学習機会を奪ってしまう

といったことです。

レビューされることによって、プルリク作成者たちはちょっとずつ成長していきます。
それに伴って、レビュワーのレビュー負荷は減っていくものです。

しかし、
「自分でやった方が早いな...」
「伝えるのが難しいな...」
などによりレビュワーが代わりにやってしまう場合も多いと思います。
これはレビュワー・プルリク作成者たち両方にとって大きなデメリットです。
レビュワーの負荷は減りませんし、プルリク作成者たちの学習機会を奪います。

何より、２でも記載した通り、もっと良い書き方があるのにレビューしないことはレビュワーの最大の罪です。

:::note warn
こちらもどうしても急がないといけない場合は、代わりに行った上で
「どうしてこの変更をしたか」
などの意図を必ず丁寧に伝え、別途プルリク作成者なりに修正してもらいましょう。
:::

# 終わりに
レビューをすることは、レビュワー・プルリク作成者たちの双方にとってたくさんのメリットがあります。
今回の３つを意識して "しない" ことでそのメリットを最大限に活かしましょう！

また、株式会社シンシアでは、実務未経験のエンジニアの方や学生エンジニアインターンを採用し一緒に働いています。
※ シンシアにおける働き方の様子はこちら

https://www.wantedly.com/companies/xincere-inc/stories

弊社には年間100人程度の実務未経験の方に応募いただき、技術面接を実施しております。
この記事が少しでも学びになったという方は、ぜひ wantedly のストーリーもご覧いただけるととても嬉しいです！
合格体験記_OCI Architect Associate 2024 

# Oracle Cloud Infrastructure 2024 Architect Associateに合格したので振り返り

最近、会社から資格取得要請がますます強まり、なんとか合格できました。他にもSnowflakeのプロジェクトに足を踏み入れていたこともあり、**時間の捻出やモチベーション維持が大変**でした。ひとまず一つの資格を取得できたことで会社からのプレッシャーは少し収まりをみせたので、覚えているうちに記事にかきます。

---

## 試験概要

- **試験名**: Oracle Cloud Infrastructure 2024 Architect Associate 
- **試験時間**: 約90分
- **形式**: 単一選択・複数選択問題  
- **合格基準**: 68%  
- **受験料**: 約42,000円

OCIアーキテクトアソシエイトは、Oracleのクラウドサービスを活用した基本設計・構築スキルを問う試験です。AWSやAzureなど他ベンダーと共通するクラウド概念も多いですが、OCI独自のサービス構成や用語があるため注意が必要でした。

---

## 受験のきっかけと背景

もともとAWS認定の初歩的な資格は持っていましたが、**会社の方針でOCIの導入案件が増えそう**とのことで、社内から強く取得を要請されました。さらに並行してSnowflakeの案件にも関わっていたため、正直なところ**試験勉強に割ける時間もモチベーションも維持が難しかった**です。ただ、今後マルチクラウド提案をする上でOCIの知見も重要になると判断し、試験対策に取り組むことにしました。

本当にプレッシャーかけるのやめてほしいですね。

---

## 学習教材と評価

結論から言うと、私が利用した「noteの一発合格問題集」だけで十分だと感じました。ただし、他の教材も試したので、そのメリット・デメリットをそれぞれ簡単にまとめます。  

※**特定の教材を貶めたり宣伝することを避けるため、あえてリンクの掲載は控えています。**
あしからずご了承ください。
→2025/423訂正。合格につながった問題集のリンクを追加しました。ご参考になれば幸いです。

### 1. noteの一発合格問題集
https://note.com/data_ku/m/mfeee5ae13692

- **メリット**  
  - 監修者がOCI資格を有する日本人エンジニアということもあり、日本語解説が丁寧。  
  - **公式ドキュメントへのリンクが全問題についている**ので、理解を深めながら学習可能。  
  - 実際の試験では、この問題集で見かけた問題ばかり出題されていたため、**網羅性が高い**と感じました。  
- **デメリット**  
  - **価格が約5,000円**とやや高め。  
  - 問題数はしっかりあるものの、もう少し安ければ…と思う場面も正直ありました。

### 2. UdemyのPractice Exams（英語版）
- **メリット**  
  - 出題問題の総数が多く、繰り返し解くことで**演習量を確保**できる。  
  - 日本語の解説がない分、英語力のブラッシュアップにもなるかも  
  - **価格は2,500円ほど**と比較的安いセール時も多く、手を出しやすい。  
- **デメリット**  
  - 2023以前のOCI試験範囲をタイトルだけ「2024」と変えて使い回しているのでは…？と思われる点がある。
  - 今気がついたが、タイトルが2025になっている。（いま最新の試験は2024）  
  - Autonomous DBやOKE（Kubernetes）の問題が複数含まれており、**2024で出題範囲外となった部分**が出てくるため、学習の方向性にややズレを感じる。  
  - 日本語解説がないので、googleブラウザ翻訳などの手間が面倒に感じる。

### 3. Udemyの日本語模擬試験
- **メリット**  
  - **価格が2,500円ほど**と安価で、費用を抑えたい人には向いている。  
  - 実際の試験に近い問題も含まれていたと感じる。  
- **デメリット**  
  - 問題数が少なく、網羅性に不安がある。  
  - 解説や公式ドキュメントへのリンクがほとんどないため、**深堀りしたい場合は追加で調べる必要がある**。  
  - 結果的には「noteの一発合格問題集」で十分カバーできた内容が多かった印象。

---

## 試験勉強の流れ

私は上記教材を行ったり来たりしましたが、今から勉強するのであればおすすめの方法を記載します。

1.一通り解く  
   まずは「noteの一発合格問題集」を一気に解き、解説を読む。公式ドキュメントのリンクは読まない。
   
2. **OCIドキュメントをこまめに参照**  
   問題集で分からない部分があったら、都度公式ドキュメントリンクに飛んで確認するサイクルを徹底。
   
3. **必要に応じて実際にハンズオン**  
   OCIにはAlways Free枠があるので、ComputeやStorageなどの基本サービスを自分で触りながら学習。試験問題と関連づけることで理解を定着。
   
4. **試験直前の総復習**  
  OCI特有の概念を再チェック。知識の特定につとめる。
  覚えにくい用語や概念は、技術ブログに記事をかくのがおすすめです。

---

## 受験当日のポイント

- 自宅で受けられます（現時点でテストセンターではうけられない）
- ガイドのとおり、事前準備していれば問題なくうけられます。
- 特にひっかかるポイントはありませんでした。運転免許証を準備し、机の周りに何もおかない環境が必要です。
---


OCIの需要が高まっている現状では取得するメリットは大きいかもしれません。私のように他プロジェクトと並行して勉強するのは大変ですが、これからチャレンジする方の参考になれば幸いです。
Python：venvで仮想環境の作成

# venvとは
軽量の「仮想環境」の作成をサポートしてくれるものです．
ポイントは以下の通りになります．
* 仮想環境は，既存のシステムのPython上に作成される.
* 仮想環境上にあるPythonでインストールしたライブラリとシステム上にあるPythonでインストールしたライブラリは別である.
→　もし仮想環境上で環境が壊れても，仮想環境を削除すればシステム上にあるPythonには影響しない．もう一度仮想環境を作成すればよい．

# 注意
公式のドキュメントによると，venvはシステム上のPythonのバージョンは，3.5で推奨されるようになりました．
また，Python 3.3および3.4ではpyvenvが推奨されていましたが，Python 3.5以降はvenvで置き換えられました．
詳しくは公式のドキュメントを確認してください．
[venv — Creation of virtual environments](https://docs.python.org/3/library/venv.html)

# システムの環境
* OS：Linux
* Pythonのバージョン：3.10

# 仮想環境の作成
仮想環境を作成していきます．
今回は "sakura" というプロジェクトを作成します．
プロジェクト名は好きな名前にしてください．

1. プロジェクトを作成したいディレクトリに移動します．
cd コマンドや ls コマンドなど使います．

2. プロジェクトを作成します．
以下をコマンド上で入力してください．
```
python3 -m venv sakura
```
これで "sakura"というワークスペースができました！

# 仮想環境を使うとき
仮想環境を使用します．

1. 使用したいプロジェクト（今回は "sakura"）があるディレクトリに移動します．
cd コマンドや ls コマンドなど使います．

2. プロジェクトを有効可します．
以下をコマンド上で入力してください．
```
source sakura/bin/activate
```
すると，コマンド上では (sakura)$ と表示されるようになり，仮想環境が有効可になっていることを確認できます．

この状態で，ライブラリをインストールしたり，Pythonのプログラムを作成・実行してください．

# 仮想環境の無効化
仮想環境を無効かする際は，以下のコマンドを入力してください．
```
desactivate
```
コマンド上で (sakura)$ が表示されなくなれば，仮想環境が無効化されています．

# 参考
[venv — Creation of virtual environments](https://docs.python.org/3/library/venv.html)
【自分用メモ】ビジネスマインドセット リンク集

### 『リーダブルコード』要約
https://qiita.com/KNR109/items/3b14e2e8f89a33c0f959

### 技術的なお問い合わせに関するガイドライン
https://aws.amazon.com/jp/premiumsupport/tech-support-guidelines/

### プロジェクトをまたいだ兼務による効率損失
https://note.com/mtx2s/n/n413488ed218a

### 無茶ぶり対応のポイント
https://toyokeizai.net/articles/-/140295

### 若手が抱く仕事の不満、1位は「フィードバックがない」　マネジメント層に見直してほしい“時代錯誤な育成方法”8選
https://logmi.jp/main/management/331658