OmniAICreator/Qiita-1.07M huggingface dataset:
DTOって何？？僕なりの理解法

# DTOとは？空港の保安検査場でイメージしてみた

現在作成しているWebアプリにて、ChatGPT（先輩）と私（新人後輩）のような感覚で会話をしながら開発を進めています！笑

その中で、バックエンドの三層アーキテクチャを作成し終えたあと「次はDTO作った？」と聞かれたんですが、私は「？？？」状態でした。

話を聞くと、どうやら`Entity`とは異なる役割を持っているらしい…  
そこで、自分なりに理解したイメージを**空港の保安検査場**にたとえて書いてみました。

※あくまでイメージ重視なので、厳密には違うかもしれません。  
「いや、それちょっと違うよ〜」という方がいたら、優しく教えてくれると嬉しいです。

---

## DTO（Data Transfer Object）とは？

> データをやり取りするための**制限付きの箱**！

- `Entity` → ほとんど制限なし。DBに保存するための「素の箱」
- `DTO` → 制限（バリデーション）付きの一時的な箱。チェックポイント担当！

---

## どこで使う？

DTOは主に次のような場所で使います。

- **フロント → バックエンド（POST/PUT）**
    - Controllerでリクエストを受け取るとき
    - `@Valid` をつけてバリデーションチェック！
- **バックエンド → フロント（レスポンス）**
    - EntityからDTOに変換して返すことで、**余計な情報を隠せる**

---

## EntityとDTOの違い（空港のたとえ）

### DTO → 保安検査場の役割

- 保安検査場で「ルールに従ってない人（データ）」は入場NG！
- ＝ **バリデーションで制限をかける役目**
- さらに、渡航先の国（＝DB）に入る前にも**入国審査（最終チェック）**がある

### Entity → 空港の中に入った人の扱い

- 一度バリデーション（保安検査）を抜けたら、空港内・機内ではわりと自由
- Entityは**ビジネスロジックやDB保存処理で使われる、制限の少ない箱**

---

## なぜ使い分けるの？

- **DTO：安全第一。制限をかけて不正なデータを弾く**
- **Entity：処理しやすさ重視。制限が少ないので柔軟に使える**

もしDTOだけを使って全てを処理しようとすると、「制限がキツすぎて必要な処理ができない…」という地獄が待ってます。  
逆にEntityだけで処理すると、「入力ミスや悪意あるデータがそのままDBに突っ込まれてしまう」リスクがあります。

なので、**使い分けることでセキュリティと柔軟性のバランス**が取れるってわけですね。

---

## 最後に

私はよく**イメージで理解するタイプ**なので、こういった例えで覚えるのが得意です。  
この内容が、同じように悩んでいる誰かの役に立てば嬉しいです！

> ChatGPT先輩、いつもお世話になってます
今後やっていきたいこと(駆け出しエンジニア)

## 自己紹介

はじめまして、**駆け出しエンジニア**の sho！ です！

現在は実務経験約5ヶ月で、インフラや業務支援系のタスクに携わりつつ、  
将来的に**開発職として本格的にやっていきたい**と考え、趣味も兼ねて**Webアプリの個人開発**に取り組んでいます。

前職は異業種でしたが、転職活動の一環として**Laravel（PHP）を使ったポートフォリオ開発**にも約3ヶ月取り組んだ経験があります。  
現在はJava/Spring Bootを中心に、よりスケーラブルな設計を意識しながら開発を進めています。

### 取得資格
- **基本情報技術者試験**
- **Java Silver（Oracle Certified Java Programmer Silver SE11）**

### 使用技術スタック（個人開発）
- **バックエンド**：Java / Spring Boot / MySQL / JDBC
- **フロントエンド**：React / TypeScript
- **その他**：Git / GitHub / Docker（予定）

Qiitaでは、日々の学びやつまずき、ChatGPT先輩との掛け合い（？）を通して得た知見をアウトプットしていきます。  
同じように学習している方の参考になれば嬉しいです！
【AWS】ロール切り替えで権限切替（AssumeRole）を行う方法（スイッチロール）

AWSでは、ユーザーが一時的に権限を切り替えるために、IAMロールを使用してAssumeRole機能を利用できます。この記事ではIAMロールを作成し、AssumeRoleによる権限切替を行うまでの手順をまとめています。

## 📌 手順概要

以下の流れで進めます。

1. IAMロール作成
2. ユーザー（またはグループ）にAssumeRoleポリシーを付与
3. 権限切替（AssumeRole）の実施

## ① IAMロールを作成する

IAM画面からロールを新規作成し、「信頼されたエンティティタイプ」で「AWSアカウント」を選択、自分のアカウントIDを設定します。

### 信頼関係（Trust Relationship）JSONの例:

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": { "AWS": "arn:aws:iam::【自分のAWSアカウントID】:root" },
      "Action": "sts:AssumeRole"
    }
  ]
}
```

ロールの作成後、必要な権限（ポリシー）をロールにアタッチします。

## ② AssumeRole用のポリシーを作成してユーザーに付与

既存ユーザーに対してAssumeRole権限を付与するために、次のポリシーを作成します。

```json
{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Action": "sts:AssumeRole",
    "Resource": "arn:aws:iam::【自分のAWSアカウントID】:role/【ロール名】"
  }]
}
```

このポリシーをユーザーやグループに直接アタッチします。

## ③ ロール切替の実施（動作確認）

CLIでAssumeRoleを行う場合は、以下のコマンドを実行します。

```bash
aws sts assume-role \
--role-arn arn:aws:iam::【自分のAWSアカウントID】:role/【ロール名】 \
--role-session-name TestSession
```

マネジメントコンソール上での切り替えは以下のURLを利用できます。

```
https://signin.aws.amazon.com/switchrole?roleName=【ロール名】&account=【自分のAWSアカウントID】
```
## ✅ IAMロール切替の完成イメージ

```plaintext
IAMユーザー（AssumeRole権限を持つ）
└─ sts:AssumeRoleポリシー
   └─ IAMロール（必要な権限を持つロール）
```

## ⚠️ ポイント

* ロールの信頼関係（Trust Relationship）設定は、切替元のアカウントやユーザーを正しく設定すること。
* IAMポリシー数（最大10個まで）に注意し、ポリシーを統合しましょう。

以上の手順で、簡単かつ安全にAWSでの権限切替（AssumeRole）が可能になります。
【AWS】CloudWatch Logs Insights で定期的にログクエリを実行する方法（EventBridge + Lambda）

# CloudWatch Logs Insights で定期的にログクエリを実行する方法（EventBridge + Lambda）

## ⭐ はじめに

CloudWatch Logs Insights で特定のログを定期的にクエリして、エラー検出や定常監視を自動化したいことは多いと思います。
この記事では、**EventBridge と Lambda** を組み合わせて CloudWatch Logs Insights のクエリを定期実行する方法を解説します。

## ❓ 現状の問題

* CloudWatch Logs Insights で仕込みなしでクエリを実行しても、定期的に再実行する機能はありません
* Web UI の実行は人手での操作が必要

## 🛠️ 実装アプローチ

### ✅ ステップ1: CloudWatch Logs Insights でクエリを作成

```sql
fields @timestamp, @message
| filter @message like /ERROR/
| sort @timestamp desc
| limit 20
```

これをテストして、直実行することを確認します。

### 📆 ステップ2: EventBridge で定期実行を設定

1. AWS EventBridge を開く
2. 「ルール」を作成
3. 「スケジュール」を選択
4. cron 式で間隔を指定

   * 例: **毎日9時に実行**

     ```
     cron(0 9 * * ? *)
     ```
5. ターゲットに Lambda を指定

### 🧪 ステップ3: Lambda で CloudWatch Insights クエリを実行

#### 🔐 必要な IAM 権限

* `logs:StartQuery`
* `logs:GetQueryResults`

#### 💻 サンプルコード (Node.js)

```javascript
const AWS = require('aws-sdk');
const cloudwatchlogs = new AWS.CloudWatchLogs();

exports.handler = async (event) => {
    const logGroupName = '/aws/lambda/your-log-group';
    const queryString = `
        fields @timestamp, @message
        | filter @message like /ERROR/
        | sort @timestamp desc
        | limit 20
    `;

    const params = {
        logGroupName,
        queryString,
        startTime: Date.now() - 3600 * 1000, // 過去1時間
        endTime: Date.now(),
    };

    try {
        const { queryId } = await cloudwatchlogs.startQuery(params).promise();

        let result;
        while (true) {
            const response = await cloudwatchlogs.getQueryResults({ queryId }).promise();
            if (response.status === 'Complete') {
                result = response.results;
                break;
            }
            await new Promise(r => setTimeout(r, 1000));
        }

        console.log('Query Results:', JSON.stringify(result, null, 2));
    } catch (err) {
        console.error('Query Failed:', err);
    }
};
```

## 📊 表示まとめ

| 部署                       | 実装内容                              |
| ------------------------ | --------------------------------- |
| CloudWatch Logs Insights | クエリを作成                            |
| EventBridge              | 定期実行のルールを作成（cron(0 9 \* \* ? \*)） |
| Lambda                   | クエリを実行し結果を取得                      |


## 🎯 おわりに

AWS の機能を組み合わせれば、CloudWatch Logs Insights も定期的な監視システムの一部として活用できます。

日次の監視や通知システムに役立てるので、ぜひ導入を検討してみてください！
TypeScriptでテンプレートリテラルを使ってちょっと面白い型をつくる


今回は TypeScript でテンプレートリテラルを使ってちょっと面白い型をつくってみます。
実用性とか度外視で、テンプレートリテラルはこういうこともできるんだなあと思って思いついたものを紹介します。

### 4 桁の数字の型

```typescript
type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type FourDigits = `${Digit}${Digit}${Digit}${Digit}`;

const digits: FourDigits = '1234'; // OK
const digits2: FourDigits = '12345'; // NG
```

### WEB サイトの URL 型

```typescript
type UrlPrefix = 'http' | 'https';

type Url = `${UrlPrefix}://${string}`;

const url: Url = 'https://example.com/path/to/resource'; // OK
const url2: Url = 'http://example.com/path/to/resource'; // OK
const url3: Url = 'ftp://example.com/path/to/resource'; // NG
```

### セマンティックバージョン

```typescript
type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';

type Major = Digit;
type Minor = Digit;
type Patch = Digit;

type SemanticVersion = `${Major}.${Minor}.${Patch}`;

const version: SemanticVersion = '1.2.3'; // OK
const version2: SemanticVersion = '1.2.3.4'; // NG
```

### CSS 単位

```typescript
type CssUnit = `${number}px` | `${number}%` | `${number}em` | `${number}rem`;

const cssUnit: CssUnit = '100px'; // OK
const cssUnit2: CssUnit = '100%'; // OK
const cssUnit3: CssUnit = '100'; // NG
```

### トランプの札

```typescript
type Num = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
type Suit = 'S' | 'H' | 'D' | 'C';
type CardNo = 'A' | 'K' | 'Q' | 'J' | `${Num}`;
type PlayingCard = `${Suit}${CardNo}`;

const card: PlayingCard = 'S10'; // OK
const card2: PlayingCard = 'S100'; // NG
```

## おわり

ほかに何か面白いもの知ってるよって方はぜひ教えてください！
grepとかコマンドで遊んでみた

## 概要

<iframe width="560" height="315" src="https://www.youtube.com/embed/kARg6OYDfgM?si=iehy31CvHx8DMNAK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

これをみてたら、grepとかよく知らんのを触ってみたくなった
これまでターミナル雰囲気で触っていたのを、ちょっとやってみたいとなった感じ

## 動画から

```bash
ls -R | grep ramen | ws
```

そもそも`ls`に再帰用のコマンドがあるのを知らなかった。

## >,>>

合わせて雰囲気で使っていた`>`,`>>`もちょろっと調べた

`>`: 上書き
`>>`: 追記

```bash
sudo tcpdump -nn >> hoge.log
```

よくサーバーに到達しているかの確認とかで、このようにしていたが、、知らんかった

## grep

あんまりこれでは意味がないが、でもできると手段が増えていいな
```bash
 sudo tcpdump -nn | grep ack
```

これはなんか普通にログが出てしまった。ダメだね
```bash
docker compose up | grep warn
```

Geminiに聞いて試してみた
>対処法：標準エラー出力を標準出力にリダイレクトする
>
>2>&1 という記述を加えることで、標準エラー出力 (ファイルディスクリプタ 2) を標準出力 (ファイルディスクリプタ 1) に合流させ、grep に渡すことができます。
```bash
docker compose up 2>&1 | grep 500
```
これでいい感じにやりたいことができる。

すげえ

複数文字当てたりしてみた。
ステータスコードがエラーの時と、errorとかがある時
```bash
docker compose up 2>&1 | grep -E -i 'error|warn|"status": "4[0-9]{2}|"status": "5[0-9]{2}'
```

でも、んー本当に欲しいものを取りこぼしちゃうな、、、
難しいところ

Geminiにいい感じに変更してもらった
→正規表現の修正と、`-C`を利用して前後2行を出してくれた
```bash
docker compose up 2>&1 | grep -E -i -C 2 'error|warn|"status": "(4|5)[0-9]{2}"'
# マッチした行の前後2行 (計5行) を表示
```

sedで色変えするのいいな、、
結局Logを大量に見るときにErrorとかの色を後付けできた方がうれしく感じる
正直grepでログを絞るよりも色で視覚的にやった方が正直みやすいかも
```bash
# 例: "ERROR" という文字列を赤色で強調表示する (ターミナルが対応していれば)
docker compose up 2>&1 | sed 's/ERROR/\x1b[31mERROR\x1b[0m/g' | grep --color=never -E -i 'error|warn'
# sedでERRORを赤くした後、grepでフィルタリング（grep自身のカラーリングは無効化）
# この例は少し複雑ですが、sedの置換能力を示しています。
```

## ;,&&,||の違い

特に理解せずに、;と&&を使っていたが、`&&`は成功したら後ろの処理が実行される

`||`は前の処理が失敗したら次のを実行する

## 処理をバックグラウンドにする

```bash
docker compose up &
```

-dコマンドでもできるけど、それとはまた違うねえ

jobsで確認できるのいいね
でも、状態とまってるは、、、
実際アクセスできないし、、、意味ねえな
```bash
$ jobs
Job	Group	State	Command
1	79467	stopped	docker compose up &
```

これで一応表に持って来れるらしい
```bash
$ fg 79467 # fg %1 #これが推奨らしい。失敗失敗
```

持ってきたら動き始めた

Dockerが[tty](https://qiita.com/hoge_5555/items/f677f9ec7cd859380426)にアクセスしているらしい。正直よくわからんが、まあ普通に`-d`を利用しろということだろう

長く動くようなコマンドで占拠されないようにするにはまあ、手軽で良さそうだけど忘れちゃいそう

## まとめ！
コマンドしれるとなんか楽しい！
量子ネットワークのRGB & Bloch球可視化  分散ネットワークの量子状態をリアルタイムに視覚化するアプローチ

概要

量子ネットワークにおける量子ビットの状態を、RGBカラーとBloch球を用いて視覚化する手法を紹介します。特に、分散ノード間のエンタングルメントや量子状態の遷移を、直感的に把握できるよう設計されています。

⸻

技術スタック
	•	Three.js：3Dモデルのレンダリング
	•	WebSocket：リアルタイム同期
	•	Java + Python：データ処理とネットワーク管理
	•	WebGL：ブラウザベースでの高性能な3D描画

⸻

実装解説

1. Three.jsでのBloch球生成

各ノードの量子状態をBloch球として3D空間に表示。
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const blochSphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(blochSphere);

2. RGBカラー反映

量子状態に対応したRGB値を計算し、ノードに反映。
function updateColor(alpha, beta) {
    const r = Math.abs(alpha) * 255;
    const g = Math.abs(beta) * 255;
    const b = (1 - Math.abs(alpha) - Math.abs(beta)) * 255;
    return `rgb(${r}, ${g}, ${b})`;
}

3. エンタングルメントの表示

ノード間のエンタングルメントを光のラインで可視化。

const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const points = [new THREE.Vector3(-1, 0, 0), new THREE.Vector3(1, 0, 0)];
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
scene.add(line);

デモ結果
	•	ノード間の状態がリアルタイムで更新され、色や位置が動的に変化
	•	エンタングルメントが発生すると、光のラインで結ばれる
	•	ブラウザベースでのリアルタイム描画が実現

⸻

まとめと今後の展望
	•	今後は量子テレポーテーションやエラー訂正の可視化も追加予定
	•	分散型量子ネットワークの理解をさらに深めるためのデモを強化

⸻

参考リンク
	•	Three.js Documentation
	•	WebSocket API
PCI DSS on AWS(要件1)

本記事ではPCI DSS 4.0.1をベースに、AWSでは要件1を満たすためにどのような方針を検討したかをまとめています。
※準拠のためには必ず本家本元の資料を確認してください。

## 要件1概要
ネットワークの境界において、信頼できないネットワークからのアクセスを制限する。

* ネットワークセキュリティコントロールを導入・維持するためのプロセスや仕組みが定義され、理解されている。
* ネットワークセキュリティコントロール（NSC）が設定され、維持されている。 カード会員データ環境への、およびカード会員データ環境からのネットワークアクセスが制限され ている。 
* 信頼できるネットワークと信頼できないネットワーク間の接続が制御されている。
* 信頼されないネットワークとカード会員データ環境（CDE）の両方に接続できるコンピューティングデバイスによるカード会員データ環境（CDE）へのリスクは軽減される。 

※信頼できないネットワークとは、インターネットや他組織のネットワーク、自組織内でもCDE環境外のネットワークを主に意味する。

■準拠に必須なAWSサービス
・セキュリティグループ
・AWS Shield Standard

■任意に選択するAWSサービス
・ネットワークACL
・AWS Network Firewall
・AWS Network Manager
・AWS CloudFormation
・AWS Config

■任意に利用するサードパーティーサービス
・FW/IDSアプライアンス
・Teraform

### 要件1.1
AWSへの依存がないため、本記事の対象外

### 要件1.2
「ネットワークセキュリティコントロール(NSC)が最新化され、適切に運用されていること。」
NSCを明確に定義すること、必要性に基づきかつ資料化されること、NSCが最新化され不正にシステム適用されないことが求められます。
「データフロー図」「ネットワーク構成図」の整備が求められており、業務上必要な通信だけを許可するよう示されています。
また、これらの資料に基づき必要な通信のみを適用することが求められ、設定に必要な構成ファイルが不正アクセスされず、更新されないことが必要です。

■方針
* ネットワーク通信の必要性(根拠)に応じてネットワーク設計を行う
* 不要なサービスは起動させず、インバウンド／アウトバウンド問わず、必要な通信許可のみをセキュリティグループで許可する
* AWSおよびセキュリティアプライアンスへのアクセスを制限する
* (オプション)CloudFormationやFirewall Managerを用いて、変更の追跡やマルチアカウントのセキュリティ管理を行う

要件1で求められているNSCに関しては、Vセキュリティグループとルートテーブル、VPCによるネットワーク分割にて要件の達成が可能です。セキュリティグループでは不要な通信許可は行わない(特にアウトバウンド)ように設計します。加えてOSレベルでも不要なポートを閉じたいため、EC2利用の場合は、利用予定のないサービスは停止させます。(例:postfix)

### 要件1.3
カード会員データ環境(CDE)と非CDEの発着信トラフィックを制限する

■方針
* セキュリティグループで必要最低限のトラフィックを許可
* (オプション)AWS Network FirewallでVPCレベルでアクセスコントロール
* (オプション)AWS Firewall Managerによるセキュリティルールの一元管理

基本方針はセキュリティグループを用いたアクセス制限となります。システムが大規模でVPC数が多い場合には、AWS Network Firewallで明確にVPCに出入りする通信を分離することも可能です。ただし、2024年10月よりVPC間のセキュリティグループ共有機能が追加されたことにより、VPCをまたがってのセキュリティグループによる細かなネットワーク制御が可能になったため、AWS Network Firewallを使わないことも十分可能です。

### 要件1.4
信頼できないネットワークとCDE環境を分離し、許可しないユーザーからのアクセスを許容しない。


■方針
* セキュリティーグループで必要最低限のアクセスを許可する
* カード会員データが保存されているコンポーネント(EC2やFargate、RDS、S3など)はインターネットからアクセス不可とする
* インターネットや信頼できないネットワークとの通信は、NATやプロキシを用いて内部IPを秘匿する
*（オプション）ミドルウェアなどを利用してスプーフィング対策を実施する（レイヤー3以上）
*（オプション）CDE環境の分離を明確化するため、AWSアカウントレベルを分割する。

CDEの分離要件は要件1.2および要件1.3と大きくは変わりませんが、カード会員データ(CHD)が保存されるサーバーへのアクセスを制限することを要求しています。また、新規にローカルIPを用いた不正なアクセスへの対策が求められています。内部IPの漏洩対策やスプーフィング対策が必要です。前者はプロキシおよびNATを利用して双方向でIPの秘匿を行います。後者は、レイヤー2はAWSデフォルトで対策しているため、必要に応じてレイヤー3以上の対策が可能ですが、基本的には追加対策は不要です。
また、要件1では直接の用語は出てきていませんが、カード会員データ環境(CDE)の対象と対象外が明確に混在する場合は、それらをVPCレベルで分割することが推奨されます。(要件XX)また、VPC外のリソースをCDE対象とCDE対象外で利用する場合は、アカウント単位で分割し、AWSマネージドサービスも明確に分離させることも選択肢に入ります。マルチアカウントは設計の煩雑さが増えるので、VPCによるネットワーク分割だけではQSAに説明しにくい際のテクニックとしての選択肢になります。

### 要件1.5
AWSへの依存がないため、本記事の対象外

## まとめ
要件1ではCDE環境の分離が主に求められています。VPCの分離とセキュリティグループによる通信許可設計といった一般的なセキュリティ対策を行います。
基本的な設計思想はPCI DSSだから特別ということはなく、適切なネットワークの分離を行えば問題ありません。
一方で、「信頼できないネットワーク」などのPCI DSSならではの定義があります。
確実にPCI DSSに準拠させるためにも、PCI DSSの準拠範囲を明確化はさせる必要があります。
そのうえでプロキシやNATの活用によるIP秘匿、インターネットからのCHDアクセス制限などの対策を行います。
また、AWS上のシステム設計とは関連がないため記載していませんでしたが、ネットワーク図などのドキュメント作成も行うので、ドキュメントにてネットワークの分離が明確に読み取れるよう作成することで保守性も向上させるのが良さげです。
【Fusion】レンダリング領域とカメラアングルを保存する方法

Fusion360にて、レンダリングする領域と、それに対応するカメラアングルを保存するやりかたがよくわからなかったので、そもそもの可否、および最適であろう手順のメモです。


# Fusionでできること・できないこと
- カメラアングルとカメラの位置は `名前の付いたビュー`に紐づいて保存される![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/596b270e-c362-4037-9101-a980cbd7ea4d.png)

- ***レンダリングの縦横比の枠を何かに紐づけて保存したりあとから呼び出す機能は現時点ない*** ( `名前のついたビュー` には紐づいて保存されない) 

# おそらく最適なやりかた
以下の順番でやる。
### 1️⃣レンダリングしたい枠の縦横比をまず表示させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/e9686f54-24b0-4089-935b-6eb155495e13.png)
 1. `レンダリング`の作業スペースに行く
 1. 右クリック→ `シーンの設定`→ `▼カメラ` → `縦横比` から好きな縦横比を選ぶ

***結果*** → レンダリング作業スペースで、レンダリング領域がハイライトされる(レンダリングされない領域がグレー塗りに)。
### 2️⃣縦横比の中でカメラアングルを決めて`名前のついたビュー`に保存する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/4a87f9f4-7997-465f-8c3f-a03f6d4594e0.png)

 1. 1️⃣を終えた状態で、カメラを動かしてほしいアングルに設定する。
 1. `ブラウザ`→ `名前のついたビュー` を右クリックして、`新規名前付きビュー` で、新しくビューをつくる

***結果*** → カメラアングルがビューに保存され、後から呼び出すことができるようになる。



### 3️⃣レンダリング実行には
 1. `名前の付いたビュー`から、カメラアングルを設定したビューをダブルクリックしてカメラアングルを呼び出す
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/92cad407-da85-4597-aacc-6b2b00054f57.png)
 1. もし現在見えてる縦横比が異なっていたら、右クリック → `シーンの設定` から縦横比を再度選ぶ
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/95a6d481-bf9b-42aa-8857-b5b59ae00aaa.png)

 1. レンダリング実行する

***結果*** → できる。


### 要するに
レンダリングの縦横比は、最後に設定したものが継承されるのみで、どこかに保存することができないので、***新しく別の縦横比に設定してしまったら、その都度設定しなおすしかない***、ということです。

# 補足：もろもろのカメラ設定のビューへの保存の可否
先ほど説明したとおり、ビューに対して`シーンの設定`-`縦横比`は紐づいて保存されません。しかし`焦点距離`はなぜか紐づいて保存されます。しかし、かと思えば、`露出`は保存されません。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/50bc3327-9c43-4908-b8fa-1cdd0c530c48.png)
挙動に一貫性が見えないので、さしあたっては都度確認が必要のようです。

以上
【初心者向け】MacでPython＋Pygameを使って簡単なゲームを作る方法

この記事では、**Mac に Python 環境を構築し、Pygame を使って簡単なゲーム（動く四角）を作る**手順を紹介します。プログラミング初心者や、ゲーム開発に初挑戦する方に向けた内容です。

### ✅ 1. Python のバージョン確認
まずは Python がインストールされているか確認します。

```bash
python3 --version
```
Python 3.x.x が表示されれば OK。インストールされていない場合は `brew` でインストールできます：
```bash
brew install python
```

### ✅ 2. pip のバージョン確認
次に `pip` が使えるかを確認します。
```bash
pip3 --version
```
pip を最新にする
```bash
python3 -m pip install --upgrade pip
```
### 🐍  3. pygame のインストール
Pygame は Python でゲームを作るための人気ライブラリです。

```bash
pip3 install pygame
```
❗️補足：インストール時に「Permission denied」や「not on PATH」などの警告が出たら、以下を実行して PATH を追加してください。

```bash
echo 'export PATH=$HOME/Library/Python/3.9/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
```

### ✅ 4. ゲームのソースコード作成
🔧 **作業フォルダ例**
```bash
mkdir ~/my_pygame && cd ~/my_pygame
```
📝 `simple_game.py` の内容
```python
import pygame
import sys

# 初期化
pygame.init()

# 画面サイズ
width, height = 640, 480
screen = pygame.display.set_mode((width, height))
pygame.display.set_caption("動く四角ゲーム")

# 色
WHITE = (255, 255, 255)
RED = (255, 0, 0)

# 四角の初期位置
x, y = 300, 220
speed = 5

# ゲームループ
clock = pygame.time.Clock()
running = True
while running:
    screen.fill(WHITE)

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

    # キー操作
    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        x -= speed
    if keys[pygame.K_RIGHT]:
        x += speed
    if keys[pygame.K_UP]:
        y -= speed
    if keys[pygame.K_DOWN]:
        y += speed

    # 四角を描画
    pygame.draw.rect(screen, RED, (x, y, 50, 50))

    pygame.display.flip()
    clock.tick(60)

pygame.quit()
sys.exit()
```

✅ 5. 実行してみよう！
```bash
python3 simple_game.py
```
これで赤い四角が画面に表示され、矢印キーで動かせます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4067881/cd8b4d3a-d72e-413c-986e-d508aee5a6a4.png)

📝 まとめ
| 項目      | 内容                                |
| ------- | --------------------------------- |
| 開発言語    | Python 3                          |
| 使用ライブラリ | pygame                            |
| 実行環境    | macOS (Apple Silicon / Intel 両対応) |
| 難易度     | 初心者向け                             |
コンテンツエリアのサイズを取得する

前回　statusBarとNavigationBarのサイズを取得する記事を書きましたがコンテンツエリア（statusBarとNavigationBarを合わせたsysteBarを除いたエリア）のサイズも取得できるものを紹介します。


# 実践

```
  activity.window.decorView.getWindowVisibleDisplayFrame(Rect())
```
応用情報に挑戦した

 <h1>応用情報に挑戦した</h1> <nav> <h2>目次</h2> <ul> <li><a href="#intro">はじめに</a></li> <li><a href="#background">受験前の知識</a></li> <li><a href="#impressions">試験の感想</a></li>  <li><a href="#results">試験結果</a></li> <li><a href="#conclusion">おわりに</a></li> </ul> </nav> <section id="intro"> <h2>はじめに</h2> <p>こんにちは。大学院で学んでいる者です。今回は、基本情報技術者試験を受けずに、いきなり応用情報技術者試験に挑戦した体験を共有したいと思います。ITパスポートや基本情報の知識がない状態での挑戦でしたので、同じような境遇の方の参考になれば幸いです。</p> </section> <section id="background"> <h2>受験前の知識</h2> <p>受験前に持っていた知識は以下の通りです：</p> <ul> <li>C言語の基礎的な知識</li> <li>論理演算やビット演算などの工学的な基礎計算</li> <li>パソコンのハードウェア構成要素に関する知識</li> <li>組み込みマイコンを使った開発経験</li> </ul> <p>これらの知識はありましたが、ネットワークやソフトウェアの分野についてはほとんど知識がありませんでした。</p> </section> <section id="impressions"> <h2>試験の感想</h2> <p>結論から言うと、過去問をしっかりと解いていれば、試験自体はクリアできると感じました。特に午前試験は、過去問の演習が効果的でした。参考書で概念を理解し、その後はひたすら過去問を解くことで、効率的に学習を進めることができました。</p> <p>ただし、午後試験は実務的な問題が多く、過去問だけでは対応が難しいと感じました。特に、ネットワークやセキュリティなどの分野は、実際の現場を想定した問題が出題されるため、応用力が求められます。</p> </section> <section id="study"> <h2>試験結果</h2> <p>午後試験では、セキュリティやプログラミングの分野で高得点を取ることができましたが、ネットワークの問題が難しく、苦戦しました。</p> </section> <section id="conclusion"> <h2>おわりに</h2> <p>午後試験では、技術系の問題を選択しましたが、文系の問題（ストラテジーやマネジメントなど）の方が点数を安定させやすいという話も聞きました。文系の問題は、解答のキーワードが問題文中に記載されていることが多く、キーワードを見つけることができれば高得点が狙えるようです。</p> <p>応用情報技術者試験に挑戦する際は、自分の得意分野を見極め、効率的に学習を進めることが重要だと感じました。これから受験を考えている方の参考になれば幸いです。</p> </section>
【Python初心者】print()関数の基本と活用まとめ

Pythonの標準出力に使われる `print()` 関数について、自分の学習内容を整理するためにまとめました。基本的な構文からよく使うオプション、応用的な使い方まで記載しています。

## ✅ 基本構文

```python
print(値1, 値2, ..., sep=' ', end='\n', file=sys.stdout, flush=False)
```

| 引数 | 説明 |
|------|------|
| `値1, 値2, ...` | 出力したい値。複数指定可能。 |
| `sep` | 値と値の間に挟む文字列。デフォルトは半角スペース `' '`。 |
| `end` | 出力の最後に追加される文字列。デフォルトは改行文字 `'\n'`。 |
| `file` | 出力先。デフォルトは標準出力 `sys.stdout`。 |
| `flush` | Trueにすると出力バッファをすぐにフラッシュする。デフォルトは False。 |

## 🧪 基本の使い方とオプション

### ① 単純な出力

```python
print("Hello, world!")
# 出力: Hello, world!
```

### ② 複数の値を出力（スペース区切り）

```python
print("Python", 3, "rocks")
# 出力: Python 3 rocks
```

### ③ sep オプション（区切り文字の変更）

```python
print("2025", "05", "11", sep="-")
# 出力: 2025-05-11
```

### ④ end オプション（出力の末尾変更）

```python
print("Hello", end="")
print("World")
# 出力: HelloWorld
```

### ⑤ file オプション（ファイルに出力）

```python
with open("log.txt", "w") as f:
    print("ファイルに書き込みます", file=f)
```

### ⑥ flush オプション（即時出力）

```python
import time
for i in range(3):
    print(i, end=" ", flush=True)
    time.sleep(1)
```

## 💡 その他のポイント

### ・`print()` は戻り値として `None` を返します。つまり、何も返しません。  
  例えば次のようになります：

  ```python
  result = print("Hello")
  print(result)
  # 出力:
  # Hello
  # None
  ```

  `print("Hello")` の出力は画面に表示されますが、関数としての戻り値は `None` なので、`result` に代入されるのは `None` です。

  そのため、`print()` の結果を変数に入れてさらに処理をしようとするとエラーになります：

  ```python
  # ❌ エラーになる例
  result = print("Hi").upper()
  ```

  このように、`print()` はあくまで「表示」だけを行う関数であり、値を返さないことを覚えておくと、エラーを防げます。


### ・引数で渡されたオブジェクトは、内部的に `str()` によって文字列に変換されて表示されます。

### ・`f文字列` を使うと、変数を埋め込んだ分かりやすい出力ができます。

  ```python
  name = "Alice"
  age = 30
  print(f"{name} is {age} years old.")
  # 出力: Alice is 30 years old.
  ```

## おわりに

`print()` 関数はデバッグやログ出力にも頻繁に使われるため、各オプションの使い方を知っておくと便利だと思いました。自分の理解を深めるために今後もよく使いながら慣れていきたいと思います。
Dfplayer miniで音楽再生

# Dfplayer miniで音楽再生

# 苦戦した原因
 - ネットでは🔧 抵抗1kΩ×2（または1kΩ + 2kΩ）を使う理由
✅ 目的：5V → 3.3V に電圧を分圧するため
DFPlayer Mini の RX（受信ピン）は3.3Vレベルの入力を想定しているため、Arduino（5V）から直接信号を送ると、ピンが破損するリスクがあります。過電流になる恐れがあるという内容が強調されているものが何個かあったので慎重に使っていましたが、それが原因で動かなかった可能性が高いです。

# 今回上手くいったものはネットで参考にしたものから抵抗を取り除いて作成してようやく動きました。

 - 🔧 DFPlayer Mini：5V超えの扱い
✅ 正常な動作範囲
動作電圧：3.2V ～ 5.0V
推奨電圧：5.0V ±5%（= 約4.75V〜5.25V）

❌ 5Vを大きく超えると？
内部IC（特にオーディオアンプやMP3デコーダ）が破損する可能性あり
定格を超えると過電流（焼損）や熱暴走を引き起こす要因に

![Untitled Sketch_ブレッドボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957418/b66b1f69-8a79-4a4b-8443-38dba1274413.png)

## 🔌 ハードウェア構成とピン配置

| 機器                     | DFPlayer Miniのピン | Arduino UNOのピン     | 説明                                       |
|--------------------------|---------------------|------------------------|--------------------------------------------|
| 通信（ソフトウェアシリアル） | TX                  | 10 (mySerialのRX)      | DFPlayer → Arduino（データ送信）           |
| 通信（ソフトウェアシリアル） | RX                  | 11 (mySerialのTX)      | Arduino → DFPlayer（データ送信）           |
| 電源                    | VCC                 | 5V                     | 電源供給（推奨は安定化された5V）           |
| グラウンド               | GND                 | GND                    | 共通グラウンド                             |
| スピーカー              | SPK_1, SPK_2        | スピーカー出力        | 直接小型スピーカー接続可（アンプ内蔵）     |


```
#include <SoftwareSerial.h>
#include <DFRobotDFPlayerMini.h>

SoftwareSerial mySerial(10, 11); // RX, TX
DFRobotDFPlayerMini myDFPlayer;

void setup() {
  Serial.begin(115200);
  Serial.println("Serial communication started.");

  mySerial.begin(9600);
  Serial.println("SoftwareSerial communication started.");

  Serial.println("Initializing DFPlayer Mini...");
  if (!myDFPlayer.begin(mySerial)) {
    Serial.println("DFPlayer Mini not found. Check wiring and SD card.");
    while (true); // ここで停止
  }
  
  Serial.println("DFPlayer Mini initialized successfully.");
  
  myDFPlayer.volume(15);  // 音量設定
  Serial.println("Volume set to 15.");

  myDFPlayer.play(1);     // 0001.mp3 再生
  Serial.println("Playing track 001.mp3...");
}

void loop() {
  // ループ内で特に何もしない
}
```
【電子出願】特許用HTMLをテキストエディタで作ったという話

出願アプリで通れば大丈夫だろう

ってことで作ってみた

## 実際に起きた勘違い
特許用の*.docファイルからHTMLに変換すればいいのかと思った

それは実はだめで、[HTML用のテンプレート](https://www.pcinfo.jpo.go.jp/site/2_download/3_hina/index.html)があるのでそれをダウンロードしなければならなかった

## 普通ならWordとかで編集するらしいが
そもそも作ってるプラグインがphpだった
HTML要素も普通にある
HTMLは、ブラウザで見れればいいや、という感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/331489af-928c-45c1-a9a9-8fa224c00a77.png)

こんなにもひな形がいっぱいある（実際にはもっとある）

:::note
このひな形からコピーして作らないと、特許や実用新案要件、条件とか料金とか、いろいろ変わってしまうので注意
:::

## 頭のHTML
```
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
【書類名】　　　　　　　特許願<BR>
【整理番号】　　　　　　ＰＯＯＯＯＯ３－１<BR>
【あて先】　　　　　　　特許庁長官殿<BR>
【国際特許分類】　　　　Ａ１１Ｂ　　　１／１１<BR>
　　　　　　　　　　　　Ａ１１Ｂ　　　２／１１<BR>
```
どれもよく見てもらわないといけないのだが
HTML3.2すら対応していない
コピーして見てもらいたいのだが、全角スペースで位置を揃えている

相当古い仕様のHTMLだってことがわかった

## 使えるタグ
&lt;strong&gt; なんか使えない、もちろん &lt;b&gt;も使えない

使えるのは以下のみ

```
<BR>
<FONT SIZE="1～7"></FONT>
<U></U>
<SUB></SUB>
<SUP></SUP>
<PRE></PRE>
<IMG SRC="filename.bmp">
<FIG SRC="filename.jpg">
<A HREF="filename.htm"></A>
<A HREF="filename.pdf"></A>
<A HREF="filename.xml"></A>
```
&lt;FONT SIZE=&gt;は 6、7 で倍角とみなされる

しかも、リンクのある属性については httpから始まる文字でリンクできないのである

どうしてもリンクするには、
```
https://example.com/
```
と普通に書いて、審査官に手入力してもらう以外ない

```
<IMG SRC="filename.bmp" WIDTH="640">
```
ともできない

画像が画面から溢れてしまったら、溢れたままでいいらしい

## 節番号
```
【技術分野】<BR>
　【０００１】<BR>
　　ほげほげ<BR>
<BR>
【背景技術】<BR>
　【０００２】<BR>
　　ほげほげ<BR>
```

この節番号は自動で処理されないので、手動で処理する必要がある
もちろん、全角スペースで整えてる

## 一応特許用HTMLの書き方のサイトがあった
[HTMLの規定](https://www.pcinfo.jpo.go.jp/guide/Content/Rules/HtmlRules.htm) ここを見れば、簡単にテキストエディタで編集できるでしょう
アイコン、画像素材、コンポーネント。web開発これでOK。

- **アイコン**
  - [iconify](https://icon-sets.iconify.design/)（おすすめ。会員登録無し。コピペだけ。）
  - [font awesome](https://fontawesome.com/)
- **CSS部品**
  - [CSS stock](https://pote-chil.com/css-stock/ja/toc)（個人的に目次作成が優秀）
  - [ui buttons](https://ui-buttons.web.app/)（色々なデザインのボタン集）
- **ホスティングサービス（フロントエンド）**
  - [netlify](https://app.netlify.com/)（静的サイトなら無料。超簡単。）
- **ホスティングサービス（データベース）**
  - [supabase](https://supabase.com/ "タイトル")
- **画像素材**
  - [freepik](https://jp.freepik.com/)

# おまけ
唐突ですが個人開発した映画サジェストサイトを紹介させてください。
- 配信サービス別に映画を絞り込める
- Ti○derみたいに映画を選べる
そんなサイトです。
https://suggestmovie.netlify.app/
秋ヶ瀬公園　BD10　Yokomo　整理



# 電子部品
- ESC Quicrun 10BL 120
- moter rocket 4.5t 7800kv
- battery Zee 5200mash

# セッティング
### キャンバー
#### フロント
アーム取説規定値（14.7mm）
０.５度　：　フロントが強すぎて出だし、すべてでフラフラ
1度　　 ：　出だし、コーナーの安定感
#### リア
(14.8mm)
０．５度 ： 
１度　：　デフォルト

### ロースセンター
前後1.5mmから０に変更＝＞グリップするようになった。しかしふらつく気がする
フロントを0.5mm、リア0mmに変更＝＞多少安定するようになった

### ESC
タイミングを６から０に変更＝＞発熱の減少、ストレートは若干遅くなった気がする

### ホイールベース
前後ともにスペーサを内側にしたが変化を感じられない
フロントアームの外側、リアサスアームの内側にシムを入れてリア重心にしてみたが安定している気がするレベル

# タイム
2025\4\27 14.3- 14.8 前日晴れ　１４時くらい　（Bwoah-zooracing）
2025\5\11　14.7- 15.1s 前日強い雨　１４時くらい (hyper bittydesign)
16.0s BD7 bittydesign BMW 5.5t 10BL120 32:112 KM32
15.2s cero 22:80 6.5t fletaprov1 

# ボディ
## Bwoah-zooracing
ボディをだいぶ前に出しているのでリアが軽いが、ダウンフォースは聞いている
## Hyper-bittydesign
リアが弱い。旋回性能はリアが弱い分フロントが強くBwoahより小回りが利くが、高速コーナーでは関係ない
## PF corvette C8 
リアヘビーでとにかく安定する

# ダンパーオイル
## cero sport
400-450くらいが安定する。350だとリアが不安定
## BD10
spring =>{フロント、リア} {2.7,2.6} {2.7,2.5-2.9}どちらもあまり変化なし。若干{2.7,2.5-2.9}だとリアが不安定な気がする
350 若干不安定だが荷重移動させやすくよく曲がる
450と350（5:5） 安定しているがすべての挙動が遅い。曲がらない

# memo
Boost＝スロットル全体に加速力がかかる
Turb＝スロットル全開したときの回転数があがる
AWS CLI のアップデート方法まとめ（macOS / Linux / Windows 対応）

AWS CLI（AWS Command Line Interface）は、AWS をターミナルから操作するための強力なツールです。 頻繁に機能追加・修正があるため、定期的なアップデートが推奨されています。
この記事では、環境別に AWS CLI のアップデート方法をまとめています。

### 🔍 現在のバージョンを確認する
まずは現在のバージョンを確認しましょう。
```bash
aws --version
```
出力例：
```swift
aws-cli/2.15.0 Python/3.11.5 Linux/5.15.0
```

### ✅ pip 経由でインストールされている場合（v1系）
`pip` でインストールしている場合は以下でアップデートできます。
```bash
pip install --upgrade awscli
```
特定のバージョンにしたい場合：
```bash
pip install awscli==1.29.0
```
### ✅ AWS CLI v2 の場合（Linux / macOS）
AWS CLI v2 は pip ではなく、バイナリ形式で提供されています。
以下の手順で最新版にアップデートします。
**1. 旧バージョンの削除（必要に応じて）**
```bash
sudo rm -rf /usr/local/aws-cli
sudo rm /usr/local/bin/aws
```
**2. 最新版のダウンロードとインストール**
```bash
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
```
**3. バージョン確認**
```bash
aws --version
```
### ✅ Homebrew 経由（macOS の場合）
Homebrew でインストールしている場合は以下でOK。
```bash
brew upgrade awscli
```
必要に応じて再リンク：
```bash
brew link --overwrite awscli
```

### ✅ Windows の場合
**手順：**
1. 公式サイトからインストーラーをダウンロード 👉 AWS CLI v2 ダウンロードページ
2. インストーラーを実行して上書きインストール
3. PowerShell でバージョン確認：
```powershell
aws --version
```
### 💡 補足：どのインストール方法か分からない場合
次のコマンドでパスを確認できます：
```bash
which aws
```
- `/usr/local/bin/aws` → バイナリ直インストール
- `/opt/homebrew/bin/aws` → Homebrew
- `~/.local/bin/aws` → pip

## 🔚 おわりに
AWS CLI のアップデートはセキュリティや新機能利用のためにも重要です。
ぜひこの記事を参考に、ご自身の環境にあった方法で定期的にアップデートしてください！
Linucレベル１勉強メモ　＃３３

＃ 第三章　GNUとUnixのコマンド

練習問題3.8
viエディタでテキストファイルを編集しています。現在のカーソルの置かれている行から８行を削除したい場合の操作を選択してください。現在はコマンドモードになっています。

A. 「dd」と入力すると行数を尋ねてくるので「８」と入力する

B. 「d8」と入力する

C. CtrlキーとDキーを８回押す

D. 「8dd」と入力する

E. 「8yy」と入力する

（解答）D

（解説）
コマンドモードでは、コマンドの前に数理を入力することにより、その子コマンドの適用回数を指定できます。正解は選択肢Dです。ここでは行削除「dd」の前に数値「８」を入力しているので、カレント行から８行が削除されています。

viには「入力モード」と「コマンドモード」の二種類がある。入力モードでEscキーを押すとコマンドモードに切り替わる

* viの入力モード
 1. i<br>カーソルの前にテキストを入力する
 1. a<br>カーソルの後にテキストを入力する
 1. I<br>行頭の最初の文字にカーソルを移動し、その直前にテキストを入力する
 1. A<br>行末にカーソルを移動し、その直後にテキストを入力する
 1. o<br>カレント行の下に空白行を挿入し、その行でテキストを入力する
 1. O<br>カレント行の上に空白行を挿入し、その行でテキストを入力する

* viのカーソル操作
 1. h<br>1文字左へ移動する。左矢印（←）キーと同じ
 1. l<br>1文字右へ移動する。右やじるし（→）キーと同じ
 1. k<br>1行上へ移動する。上矢印（↑）キーと同じ
 1. j<br>1行下へ移動する。下矢印（↓）キーと同じ
 1. O<br>行の先頭へ移動する
 1. $<br>行の末尾へ移動する
 1. H<br>画面の一番上の行頭へ移動する
 1. L<br>画面の一番下の行頭へ移動する
 1. gg<br>ファイルの戦闘業へ移動する
 1. G<br>ファイルの採集業へ移動する
 1. nG<br>ファイルのn行目に移動する
 1. :n<br>ファイルのn行目に移動する

* viの終了、ファイルの保存、シェルコマンドの実行
 1. :q<br>ファイルへ保存せずに終了する（編集した場合は保存するかどうかを確認してくる。
 1. :q!<br>編集中の内容を保存せずに終了する
 1. :wq<br>編集中の内容を保存して終了する
 1. ZZ<br>編集中の内容を保存して終了する（:wqと同じ)
 1. :w<br>編集中の内容でファイルを上書き保存する
 1. :e!<br>最後に保存した内容に復帰する
 1. :r ファイル名<br>ファイルの内容をカレント行以降に読み込む
 1. :!コマンド<br>viを終了せずにシェルコマンドを実行する
 1. :r!コマンド<br>シェルコマンドの実行結果を挿入する
* viの編集コマンド
1. x<br>カーソル位置の文字を削除する(Delete)
1. X<br>カーソル位置の手前の文字を削除する(backspace)
1. dd<br>カレント行を削除する
1. dw<br>カーソル位置から次の単語までを削除する
1. yy<br>カレント行をバッファにコピーする
1. p<br>カレント行の下にバッファの内容を貼り付ける
1. P<br>カレント行の上にバッファの内容を貼り付ける
1. r<br>カーソル位置の１文字を置換すr
【イベントレポート】AlmaLinuxインストール大会 on VirtualBox 参加してきた

## 参加イベント

[AlmaLinuxインストール大会 on VirtualBox（connpass）](https://almalinux.connpass.com/event/343080/)

ハンズオン形式のイベントだったんですが、実は当日にサクッと全部インストールを済ませてから参加しました。

「じゃあなんで来たの？」って話なんですけど、
**教科書に書いてない話を生で聞く**のが目的です（←建前）
**懇親会！飲むぞ！飲めるぞお！！**（←本音）

---

## 教科書にない話がたくさん聞けた！

このあたりが聞きたかったんですよね。出てきた話を順番に書き殴ります：

---

### ■ 最近はOSインストールもクラウド任せ？

「最近、そもそもOSのインストール作業を自分でやらないよね〜」って話。

いやホントそれ。
ISO入れてVM立てて…って、普段は意識しないし、
回線が遅い環境で大容量ISO落とそうとした時、
「ブラウザの標準ダウンローダーじゃダメだな」ってなって、
昔ながらのダウンローダー探したりしてたなあ、と思い出したり。

まぁ今は回線も速くなって、そういう苦労もあんまりしないですけど。

---

### ■ VirtualBoxの進化（？）に戸惑う

VirtualBox、久しぶりに触ったら昔とUI変わりすぎ問題。

私はVirtualBoxメインじゃなかったので詳しくはないんですが、
「使い慣れたツールがバージョンアップで迷子になる」っていうのはめっちゃ共感します…。

UI変更で言えば、
昔のニコニコ動画のUIの方が良かった〜みたいな話も出てました。
（動画配信の都合で変更されたのはWebアプリ屋的には分かるけど、というやつ）

あと、技術者が入れ替わって保守性を考えた結果のリファクタリングなんだろうな〜とか、想像してしまうのも技術者あるある。

---

### ■ 設定まわりの罠

ハンズオン中に出てきた設定系トラブルの話。

* キーボード設定がうまくいかない
* 時刻設定が怪しい
* アップデートがいつまで経っても終わらない → 実はディスク容量不足

などなど。
結果、**トラブルシューティングのライブビューイング状態に！**

（「ついてこれるのか…？」と若干不安になったけど、参加者の半分くらいは顔なじみの常連さんっぽかったので、まぁ大丈夫そう）

---

### ■ 単なる「インストール会」じゃなかった

質問がやたら高度だった。

普通の「インストールして終わり」な会かと思いきや、
**設定をガチャガチャいじって検証しまくる回**でした。

「操作ミスで進まない」とかいうレベルじゃない。
ガチ勢向けでした。でも最後はちゃんと初心者向けのフォローもあって安心。

---

## 所感：ぬるっと懇親会

まとめる気はないんですが、一言だけ。

**懇親会の空気、最初から漂ってた。**
開始の合図も撮影もちゃんとあったけど、
始まる前から「これはもう懇親会やな」って雰囲気でした。

---

## まとめというか、所感

OSインストールって、昔は一大イベントだったけど、
今はクラウド環境に甘やかされて忘れかけてた技術のひとつ。
でも、そういう「忘れかけたけど大事」な部分を
ちゃんと実機ベースで見直せるいい機会でした！

懇親会楽しかったです（本音）。

## 謝辞
本稿は自分で書いた原文があまりにもまとまってなかったので、レポートをAIに投げたものです。そのため、若干違和感のある内容になってしまっています。
が、意味が変わっていないかどうかを監修しつつ、書き味が失われていたのでテコ入れしています。
Gitでブランチ削除 & Untrackedファイル削除のまとめ

Gitを使っていると、不要になったブランチや未追跡ファイル（Untracked files）を整理したくなることがあります。この記事では、以下の3点について簡潔にまとめます。
- ローカルブランチの削除方法
- リモートブランチの削除方法
- Untrackedファイルの削除方法

### 🧹 1. ローカルブランチを削除する
✅ **通常削除（マージ済みのブランチのみ）**
```bash
git branch -d branch_name
```
❗ **強制削除（マージされていないブランチも削除）**
```bash
git branch -D branch_name
```
🔄 **事前にチェックアウトしておこう**
削除対象のブランチに現在いると削除できません。先に `main` など他のブランチに切り替えてから実行します。
```bash
git checkout main
```
### 🌐 2. リモートブランチを削除する
🚀 **コマンド**
```bash
git push origin --delete branch_name
✅ **例：**
```bash
git push origin --delete feature/xyz
📌 **注意点：**
- リモートに削除の権限（push権限）が必要です。
- チームで共有している場合、削除前に確認を取りましょう。
- 削除後は、以下でローカルのリモート追跡情報も整理できます：
```bash
git fetch --prune
```
### 🗑️ 3. Untrackedファイル（未追跡ファイル）を削除する
🎯 **個別に削除する**
```bash
rm filename
```
🧼 **Gitのクリーンアップコマンドで削除する**
すべての未追跡ファイルを削除（強制）
```bash
git clean -f
```
対話モードで削除対象を選ぶ
```bash
git clean -i
```
特定のファイルだけ削除する
```bash
git clean -f path/to/untracked_file
```
⚠️ **注意：**
`git clean` は復元できません。削除前に `git status` で確認しましょう。

`-n` オプションを使えば、何が削除されるか事前に確認できます：
```bash
git clean -n
```
### 📚 まとめ
| 操作内容           | コマンド例                                  |
| -------------- | -------------------------------------- |
| ローカルブランチ削除（安全） | `git branch -d branch_name`            |
| ローカルブランチ削除（強制） | `git branch -D branch_name`            |
| リモートブランチ削除     | `git push origin --delete branch_name` |
| 未追跡ファイルの確認     | `git status`                           |
| 未追跡ファイルの削除     | `git clean -f` or `rm filename`        |

### ✅ 最後に
ブランチやファイルの整理は、プロジェクトの健全性を保つ上で重要です。削除操作は慎重に、必要ならバックアップを取ってから実行しましょう！
Scoopを使ってGowをインストールする

# はじめに
WindowsのPowerShellでUnix系のコマンドを使用する必要があったため、ScoopでGowをインストールしました。

# Scoopとは
Windows用のコマンドラインパッケージマネージャーです。コマンドでソフトウェアをインストール、アンインストール、アップデート、依存関係を整えるができるツールです。
従来はソフトウェアを使う際にサイトからダウンロード、インストーラーの実行など手間がありましたが、それが解消されます。

# Scoopのインストール方法
PowerShellを開き以下を実行します。※管理者権限では実行できません。
```powershell
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
```
※カスタムしたい場合は- [ScoopInstaller github README](https://github.com/ScoopInstaller/Install) を参考にしてください。

# Gowのインストール方法
Gow（GNU on Windows）はUnix系のコマンドをWindowsで使えるようにするツールセットです。先程インストールしたScoopを使ってインストールします。
PowerShellで以下を実行します。
```PowerShell
# Gowのバージョンを確認
scoop search gow
# Gowをインストール
scoop install gow
```
これでUnix系のコマンドをインストールすることができました！

# 参考
- [Scoop](https://scoop.sh/)
- [Scoop github README](https://github.com/ScoopInstaller/Scoop#readme)
- [ScoopInstaller github install](https://github.com/ScoopInstaller/Install)
- [windows10 scoopでgowをインストールしてlinuxコマンドを使う](https://mebee.info/2020/07/25/post-15206/)
量子ビジュアライザー - 分散処理とエンタングルメントの可視化

イントロダクション

量子ビジュアライザーは、分散処理と量子エンタングルメントの複雑な相互作用を3D空間で視覚化するシステムです。従来の集中処理とは異なり、各ノードが独立した量子状態を持ち、リアルタイムで同期・通信を行います。

⸻

システム設計
	•	使用技術
	•	Three.js : 3Dレンダリング
	•	Python : データ処理とシミュレーション
	•	WebSocket : リアルタイム通信

⸻

実装のポイント
	•	ノード（量子状態）間のリンクは エンタングルメント を意味し、色と太さで強度を視覚化
	•	各ノードの状態は RGBカラー として表示され、Bloch球の位相変化を表現
	•	動的な相互作用が視覚的に確認でき、ネットワークの強度もリアルタイムで反映される

⸻

デモンストレーション
	•	実際のシミュレーション映像をYouTubeで公開予定
	•	ノードが連動し、エンタングルメントの強度に応じたリアルタイム変化を確認できる
	•	Three.js を活用したインタラクティブなデモが展開

⸻

今後の展望
	•	量子ネットワークへの展開
	•	メタクラウドとの連携による大規模分散処理
	•	AI同士のコミュニケーションを強化し、リアルタイムな相互作用の最適化
Sansan株式会社さんの「R&D-データ分析アプリ開発1dayインターン」に参加した感想etcをば。

# はじめに

:::note
この記事を公開する許可はSansan株式会社さんからもらってます。
:::

2025年5月10日にSansan株式会社さんの「R&D-データ分析アプリ開発1dayインターン」に参加しました。
適当に感想etcをば。


# 当日の流れ
| 時間 | 内容 |
| ---- | ---- |
|13:00|自己紹介|
|13:10 |ワーク説明|
|13:30 |ワーク開始|
|17:20 |ワーク終了|
|17:30|発表|
|18:00| 研究開発紹介|
|18:15| オフィスツアー/アンケート記入|
|18:30| 懇親会|
|19:30| 中締め|
|20:00| 完全終了|

## 自己紹介パート
見た感じ `M1` しかいなかった。みんなすごく優秀そう。

## ワークの内容
ダミーの名刺データが取得できるエンドポイントがある。そこにアクセスして良い感じの名刺データの分析ができるようなフロントを個人がそれぞれ作成する。どのようなものが分析できるアプリを作成するかは基本的に個人の自由。

### 使った技術

- アプリケーション開発
  - Python (Streamlit)
- 品質保証/テスト
  - GitHub Actions (CI/CD)
  - ruff (Pythonリンター)
  - mypy (静的型チェック)
- デプロイ環境
  - AWS EKS (Kubernetes)


## 発表
みんなすごかった...
僕の成果物はデプロイできずに、ローカルでしか動かなかった。

## オフィスツアー
オフィスめっちゃ綺麗。最近移転したらしい。

![1000006638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534163/4a940b24-17df-4695-a50b-438bad4d138a.jpeg)

## 懇親会
飯がうまい&多い。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534163/c9d39873-2c0b-433c-8054-bf9bea7edfee.png)

このプリン美味しくて有名なところのやつらしい。

![1000006637.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534163/aef6fb80-7396-4b77-8eba-1b03d56009c1.jpeg)

## 中締め&終了
中締め後もお喋りしてた。会社のこととか色々。

# 個人的に強く学んだこと
作業の工数を見積もることが重要であると同時に、それがすごく難しそうだなと思った。

# おわりに
- `Sansanさん` っていうと `333` みたいだから、当日は `Sansan様` or `Sansan株式会社さん` って呼んでました。
【Python初心者】docstringの基本と書き方まとめ

Pythonで関数やクラスの説明を書くときに使う「docstring」について、基本的な使い方と公式スタイルガイドに基づいた書き方を整理しました。まだ理解しきれていないところもありますが、自分の学習の記録としてまとめています。

## 1. docstringとは？

docstring（ドックストリング）は、Pythonで関数・クラス・モジュールなどに説明をつけるための文字列です。定義の直後に三重引用符（""" または '''）で囲んで記述します。

記述したdocstringは `help()` 関数などから簡単に確認でき、読みやすいコードを書く上で大事な要素になります。

## 2. docstringの基本的な書き方

### 単一行docstring

内容が短い場合は1行だけで書けます。

```python
def greet():
    """挨拶を表示する関数"""
    print("Hello")
```

### 複数行docstring

複数行にわたる説明や、引数・戻り値を説明する場合は、以下のように記述します。

```python
def add(x, y):
    """
    2つの数値を加算する関数

    Parameters:
        x (int): 最初の数
        y (int): 2つ目の数

    Returns:
        int: 合計値
    """
    return x + y
```

## 3. Python公式スタイルガイド（PEP 257）とは？

Pythonのdocstringのスタイルには公式のガイドラインがあります。それが **PEP 257** です。

PEP 257では、docstringに以下のような書き方を推奨しています：

- 三重の **ダブルクォート `"""`** を使う（'''でも可能だが、公式ではダブル推奨）
- 1行目には**簡潔な要約**を書く（ピリオドで終えるとより良い）
- 要約の後に空行を1つ入れて、**詳細説明**を続ける
- クラスのdocstringは、その目的と振る舞いを説明する
- 関数やメソッドのdocstringには、引数や戻り値の説明も含めると親切

## 4. help() 関数でdocstringを確認する

docstringは `help()` 関数で確認することができます。

```python
help(add)
```

これを実行すると、ターミナル上に関数のdocstringが表示されます。

また、関数やクラスの `__doc__` 属性からも直接取得できます。

```python
print(add.__doc__)
```

## 5. コメント（#）との違い

Pythonでは `#` を使ったコメントもありますが、これは**実行されない行**であり、関数やクラスの説明文とは異なります。

一方、docstringは関数やクラスの**属性として記録される**ので、外部からも取得できるという違いがあります。

## 6. ドキュメント生成ツールとの連携（補足）

docstringをしっかり書いておくと、以下のようなツールで自動的にHTML形式のドキュメントを作ることができます。

### Sphinx（スフィンクス）
- Python公式ドキュメントでも使われている高機能なツール
- reStructuredTextという形式を使って構成する
- 設定がやや難しいが、自由度が高い

### pdoc（ピードック）
- docstringだけで簡単にAPIリファレンスを生成できるツール
- Markdown対応、導入も簡単

```bash
pip install pdoc
pdoc your_module.py
```

このコマンドで `your_module.html` が生成され、ブラウザで確認できます。

## 7. よくあるdocstringの注意点

- `"""` を使う（PEP 257ではダブルクォート推奨）
- 要約 + 空行 + 詳細説明 の順に書くと読みやすい
- 引数・戻り値を書くときは、Googleスタイルなどを参考にするのがわかりやすい
- コードの見直しや他人への共有の際に非常に役立つ

## 補足：他にもあるdocstringのスタイル

PEP 257のスタイル以外にも、docstringの書き方にはいくつかの形式があります。

- **Googleスタイル**：引数や戻り値を「Args」「Returns」などのラベルでまとめ、インデントを使って整理する形式です。
- **NumPyスタイル**：科学技術系ライブラリでよく使われ、見出しと区切り線を使ってセクションごとに整理する形式です。

これらのスタイルは、Sphinxやpdocなどのドキュメント生成ツールにも対応しており、プロジェクトによっては使い分けられていることがあるようです。

## まとめ

Pythonのdocstringは、ただの説明というよりも、コードの一部として活用できる便利な機能だと感じました。まだすべてを使いこなせているわけではないですが、今後は関数やクラスを書くときに意識してdocstringをつけていこうと思います。
S3 + CloudFrontでReact(Vite)の初期ページを表示

ReactアプリをViteで開発していると、リリース後に静的ホスティングで手軽に公開したくなることがあります。AWSのS3とCloudFrontを組み合わせれば、安価で高速な配信環境が構築できます。

本記事では、初心者の方にも分かりやすいように、以下の流れで手順を解説します。

1. S3バケットの作成
2. Viteでビルドして`dist`フォルダを生成
3. `dist`フォルダのアップロード
4. S3で静的Webホスティングを有効化
5. バケットポリシーの設定（公開権限付与）
6. CloudFrontディストリビューションの作成（OACを利用）
7. CloudFrontからのアクセス用にバケットポリシーを更新

---

### 前提条件

* AWSアカウントをお持ちであること
* AWS CLIがインストールされ、`aws configure`で認証情報が設定済みであること
* React + Viteのプロジェクトがローカルに存在すること

---

## 1. S3バケットの作成

まずはS3バケットを作成します。AWSマネジメントコンソールからも可能ですが、ここではCLIを例にします。

```bash
aws s3 mb s3://your-bucket-name --region ap-northeast-1
```

`your-bucket-name`はグローバル一意の名前に置き換えてください。

## 2. Viteでビルドしてdistフォルダを生成

プロジェクトのルートで以下を実行し、配布用フォルダを生成します。

```bash
npm run build
# または
yarn build
```

完了すると、`dist/`フォルダにHTMLやJS、CSSが出力されます。

## 3. distフォルダのアップロード

生成された`dist/`の中身を先ほど作成したS3バケットにアップロードします。

```bash
aws s3 sync dist/ s3://your-bucket-name --delete
```

`--delete`オプションで、バケット内の不要ファイルを自動で消します。

## 4. S3で静的Webホスティングを有効化

1. AWSコンソールのS3画面で対象バケットを選択
2. 【プロパティ】タブを開く
3. 【静的ウェブサイトホスティング】をクリック
4. * ホスティングタイプ: **静的ウェブサイトホスティングを有効にする**
   * インデックスドキュメント: `index.html`
   * エラードキュメント: `index.html`（SPA対応）

これでS3単体でも公開できますが、CloudFrontを介して高速配信\&HTTPS化します。

## 5. 【学習用】バケットポリシーの設定（公開権限付与）

S3にアップロードしたファイルを誰でも取得できるよう、バケットポリシーを追加します。コンソールの【アクセス許可】タブで以下JSONを貼り付けて保存してください。

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}
```

* `Principal`が`*`なので全人類に読み取り権限を与えています。

## 6. CloudFrontディストリビューションの作成（OACを利用）

S3よりも高速で安全に配信するため、CloudFrontを設定します。ここではOAC（Origin Access Control）を使います。

1. AWSコンソールのCloudFront画面で「ディストリビューションを作成」
2. * **配信方法**: Web
   * **オリジングループ**: 新規オリジン
   * **オリジンドメイン名**: 作成したS3バケット（例: `your-bucket-name.s3.amazonaws.com`）
   * **オリジンアクセス制御**: **新しいOACを作成**

     * 名前: `cf-oac-your-bucket`
     * 権限: GetObjectのみ
3. ビヘイビアはデフォルトのまま
4. **デフォルトキャッシュ動作**で**GET, HEAD**を許可
5. レスポンスヘッダー, SSL設定は必要に応じて変更
6. そのまま「作成」をクリック

作成後、配信ドメイン名（例: `d1234example.cloudfront.net`）が発行されます。

## 7.【本番推奨】 CloudFrontからのアクセス用にバケットポリシーを更新

OACを使った場合、今度はCloudFrontからS3へのアクセスを許可する必要があります。再度バケットポリシーを編集し、以下に変更してください。これでS3単体でホスティングしたURLからのアクセスができなくなります。

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontServicePrincipalRead",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": [
        "s3:GetObject"
      ],
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
        }
      }
    }
  ]
}
```

* `YOUR_ACCOUNT_ID`と`YOUR_DISTRIBUTION_ID`はそれぞれ実際の値に置き換えてください。

## 8. 動作確認

1. CloudFrontの配信ドメイン名にブラウザでアクセス
2. Reactアプリの初期画面が表示されれば完了です！

---

### まとめ

* **S3**で静的ホスティングを有効化
* **バケットポリシー**で公開権限を付与
* **CloudFront**で高速・HTTPS配信

これでViteで作ったReactアプリを簡単に公開できました。
【VS Code】Spring Boot × Maven × PostgreSQL × DevTools の開発環境構築手順まとめ

## はじめに
この記事では、**VS Code**上で**Spring Boot + Maven + PostgreSQL**を使った開発環境を構築し、**DevToolsによる自動再起動**を有効にするまでの手順を解説します。

Spring Boot初心者や、PostgreSQLを使ったAPI開発にチャレンジしたい方にもおすすめの内容です。

### 前提条件
- JDK 17 以上（AdoptOpenJDKなど）
- Maven インストール済み
- PostgreSQL インストール済み（任意のバージョン）
- VS Code インストール済み
- 拡張機能「Extension Pack for Java」インストール済み

## 1. プロジェクトの作成
### 方法①: ターミナルからMavenプロジェクト作成
```bash
mvn archetype:generate \
  -DgroupId=com.example \
  -DartifactId=springboot-postgres \
  -DarchetypeArtifactId=maven-archetype-quickstart \
  -DinteractiveMode=false

cd springboot-postgres
```

### 方法②: Spring Initializrから作成（おすすめ）
以下のように設定し、プロジェクトをダウンロードしてVS Codeで開きます。
- Project: Maven
- Language: Java
- Dependencies:
  - Spring Web
  - Spring Boot DevTools
  - PostgreSQL Driver

### 2. pom.xml に依存関係を追加
```xml
<dependencies>
  <!-- Spring Boot Web -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <!-- Spring Boot DevTools -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
  </dependency>

  <!-- PostgreSQL Driver -->
  <dependency>
    <groupId>org.postgresql</groupId>
    <artifactId>postgresql</artifactId>
    <version>42.6.0</version>
  </dependency>
</dependencies>
```
### 3. application.properties の設定
`src/main/resources/application.properties` に以下を記述します。
```properties
# PostgreSQL接続情報
spring.datasource.url=jdbc:postgresql://localhost:5432/your_database
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=org.postgresql.Driver

# JPA設定
spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect
spring.jpa.hibernate.ddl-auto=update

# DevTools設定
spring.devtools.restart.enabled=true
```
### 4. PostgreSQLの準備
PostgreSQLにて、対象のデータベースとユーザーを作成します。
```sql
CREATE DATABASE your_database;
CREATE USER your_username WITH ENCRYPTED PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE your_database TO your_username;
```
### 5. アプリケーションの実行
以下のコマンドでアプリケーションを起動します。
```bash
mvn spring-boot:run
```
変更を保存するたびに、**DevToolsが自動的にアプリケーションを再起動**してくれます。

## おわりに
以上で、VS Code × Spring Boot × PostgreSQL × DevTools の環境構築は完了です。
DevToolsによって開発効率が大幅に上がりますので、ぜひ導入してみてください！
プレビュー環境経由でenv漏れる可能性あるで

最近やらかしそうになったんでメモ。

詳細はこちら
https://github.com/onjmin/unj/issues/9

---


ワイの webアプリ（うんｊ）は .env でいろいろ設定しとるんやけど、これな、
**悪意あるプルリクで vite.config.ts に process.env を仕込まれたら、ビルドログから中身全部漏れる** って話や。

:::note info
**前提**
「フロントに流出したら困るようなenvを埋め込むな」って指摘はもっともや
ただ、今回のケースは静的サイトを二重三重に難読化した上でフロントに流出したら困るようなenvを埋め込んだケースな
「そんなケースねーよハゲ」って感想ならブラウザバックしてクレメンス
:::

特に問題なんは、以下のホスティングサービスの仕様：
+ Netlify
+ Cloudflare Pages
+ Fleek

どれもデフォルトで「プルリクごとにプレビュー環境作る」設定になってる。
で、そこのビルドログが普通に見れるようになっとるんや。つまり env 丸見えになる。

## 被害の例
1. PR に console.log(process.env) 仕込まれる
1. 自動でプレビュー環境がビルドされる
1. ログに全部出る
1. ｵﾜﾀ＼(^o^)／

## 対策
とにかく **「プルリクからプレビュー環境を自動生成させない」設定に変える** ことや。

| サービス名	 | やるべき設定 |
|-|-|
|Netlify	|プルリクの自動プレビュー無効化
|Cloudflare Pages|	同上
|Fleek|	同上

GitHub を public にしとるなら特に危ないで。
**デフォルトのままやと普通に漏れるんで絶対確認しといたほうがええ。**

## Cloudflare Pagesの補足
一応「ダッシュボードから値が見えないenv type」ってのもあるけど、正直それだけじゃ不十分。
viteはビルド時に平文展開するんで、PR経由でコードに仕込まれたら防ぎようがない。

## まとめ
+ env を使う webアプリやとこういう漏れ方もある
+ publicリポにする場合は特にプレビューの挙動に注意
+ プレビュー止めるだけでかなり安全になる
微分をPythonを使って学習してみる

## はじめに

学生時代、数学が苦手になったのはいつでしょうか？

早い人なら変数、定数、関数辺りが出てきたとき、そして次に多いのが微分・積分です。

それはなぜなのか？

それは「解くまでに覚えることが多すぎる」、そして「解法や計算手順に特化し過ぎていて、本質的な意味や活用法が見えにくい」からではないでしょうか。

Pythonを使うことで、人間が本当に理解すべき「概念」と機械に任せるべき「計算」を分離し、微分の本質をより直感的に学べます。


## DevContainerで環境構築する

```Dockerfile
FROM python:3.13-slim-bookworm

# Set environment variables
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1
ENV PYTHONPATH=/app

# Set work directory
WORKDIR /app

# Install system dependencies
RUN apt-get update && apt-get install -y --no-install-recommends \
    build-essential \
    curl \
    git \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# apt-get update
RUN apt-get update

# Upgrade pip
RUN pip install --upgrade pip

RUN pip install sympy

# Copy project
COPY . /app

# Command to run when container starts
CMD ["python", "-m", "venv", "--help"] 
```

## 簡単な微分をやってみる

関数 $f(x) = 3x^2 - 4x + 5$ について、$x = 2$ における導関数 $f'(2)$ の値を求めよ。

### 解き方を考える
- まず関数 $f(x)$ を微分して、導関数 $f'(x)$ を求める
- 次に導関数に $x = 2$ を代入して $f'(2)$ の値を計算する

### Pythonでやること

```python
from sympy import symbols, diff

# xを数式で使うxとして定義する
x = symbols('x')

# 微分をする関数を定義する
f = 3*x**2 - 4*x + 5

# 微分する
df = diff(f, x)
print(f"f'(x) = {df}")  # 微分した関数を表示

# 微分した関数に値を代入する
f_prime_at_x_2 = df.subs(x, 2)

# 答えを出力する
print(f"f'(2) = {f_prime_at_x_2}")
```

### ここから見る人間が覚える必要のないこと
- 導関数を使った時の微分計算（$f'(x) = 6x - 4$ という変換）
- 微分した関数へ値を代入するときの計算

数学の授業では計算過程に重きを置き過ぎています。微分の本質は「関数の振る舞いを理解する」「変化率を求める」ことにあります。今回でいえば「指定した点の傾き」を求めることが目的であり、その計算過程を手動でやることには本質的な価値はありません。

## もう少し難しい問題

次の関数について、$x = 3$ における導関数 $f'(3)$ の値を求めよう:

$$f(x) = \frac{2x^3 - 5x^2 + 4x - 7}{x^2 + 3x - 2} + \ln(e^x + 2) - \sin(x^2)$$

### 解説

この問題は手計算では非常に複雑です。なぜなら:

1. 第1項は「有理関数」なので、商の微分公式 $(u/v)' = \frac{u'v - uv'}{v^2}$ を使う必要がある
2. 第2項は対数関数と指数関数の合成
3. 第3項は三角関数と二次関数の合成

それぞれの項を微分すると:
- 分数関数: $(u/v)' = \frac{u'v - uv'}{v^2}$ を適用
- 対数関数: $(\ln(g(x)))' = \frac{g'(x)}{g(x)}$ より、$(\ln(e^x + 2))' = \frac{e^x}{e^x + 2}$
- 三角関数: 合成関数の微分法により、$(\sin(x^2))' = \cos(x^2) \cdot (x^2)' = 2x\cos(x^2)$

しかし、これらの計算は本質的ではありません。Pythonで微分を行い、結果を確認しましょう。

### Pythonで計算してみる
```python
from sympy import symbols, diff, sin, log, exp, simplify

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

# 関数の定義
f = (2*x**3 - 5*x**2 + 4*x - 7)/(x**2 + 3*x - 2) + log(exp(x) + 2) - sin(x**2)

# 微分
df = diff(f, x)

# 微分式を整理して表示
df_simplified = simplify(df)
print(f"f'(x) = {df_simplified}")

# x = 3 での値
df_at_3 = df.subs(x, 3)
print(f"f'(3) = {df_at_3}")
print(f"f'(3) ≈ {float(df_at_3)}")  # 数値近似も表示
```

### 人間のやるべきこと・やるべきでないこと
やるべきこと:
- 微分の概念や応用を理解すること
- 関数の性質を理解すること
- 結果の解釈と応用方法を考えること

やるべきでないこと:
- 複雑な微分の計算を手動で行うこと
- 大量の公式を暗記すること

Pythonのコードからわかる通り、複雑な微分でもコンピュータを使えば簡単に計算できます。これにより、計算に時間を取られず、微分の概念や応用に集中できるのです。

## まとめ：微分を学ぶ本当の楽しさ

微分で多くの学生が苦労するのって、計算や公式暗記に時間取られすぎて、「これって実際何の役に立つの？」ってところまで辿り着けないからじゃないでしょうか。

Pythonみたいなツールを使うと、こんな良いことがあります：

1. **本質が見えてくる** - 計算の苦労から解放されて、「あ、微分って要するに変化の仕方を調べるものなんだ！」って腑に落ちる
2. **実際に使えるスキルが身につく** - 今どきの科学や技術の世界では、パソコンで計算するのが当たり前
3. **難しい問題も怖くなくなる** - 手計算じゃ挫折しちゃうような複雑な問題も、Pythonなら「やってみよう！」って気になれる

数学の授業って「どう計算するか」ばかりじゃなくて、「これ使うとどんなことができるんだろう？」「結果から何がわかるの？」みたいな好奇心を大事にしたいですよね。Pythonは単なる計算ツールじゃなくて、数学の面白さと実用性を一気に体験できる強い味方なんです！