OmniAICreator/Qiita-1.07M huggingface dataset:
Reactカート画面：数量変更で合計金額を自動更新する方法と「選択項目の削除」ボタン実装メモ

````markdown
# Reactカート画面：数量変更で合計金額を自動更新する方法と「選択項目の削除」ボタン実装メモ

## 今日やったこと
- カート内商品の数量を変更した際に合計金額（totalPrice）や小計(sumPrice)を自動で反映
- 各商品に選択オプション・数量の変更UIを実装
- 「全て選択する」「カート空ける」など、カート全体操作ボタンの動作確認
- 「選択項目の削除」ボタン設置準備

---

## 1. 商品数量更新時の金額再計算

### sumPriceとtotalPriceをリアルタイムで反映

```tsx
// 数量変更ハンドラ
const handleQuantityChange = (productId: number, newQuantity: number) => {
  setCartItems(prev =>
    prev.map(item =>
      item.productId === productId
        ? { ...item, quantity: newQuantity, sumPrice: item.price * newQuantity }
        : item,
    ),
  )
}
````

* 各商品の`sumPrice`を計算し直すことで、親コンポーネントで`totalPrice`も自動的に更新される
* これによりUIの一貫性が保たれる

---

## 2. 「選択項目の削除」ボタン表示のロジック

* `cartItems`の中で`choose`が`true`の商品が一つでもあれば、「選択項目の削除」ボタンを表示
* このボタンを押した時、選択された商品だけ削除APIを実行するようにする

```tsx
const handleDeleteSelected = async () => {
  const selectedIds = cartItems.filter(item => item.choose).map(item => item.productId)
  await Promise.all(
    selectedIds.map(id => axios.put(getDeleteUrl(id), {}, { headers: { ... } }))
  )
  setCartItems(prev => prev.filter(item => !item.choose))
}
```

```tsx
{cartItems.some(item => item.choose) && (
  <Button
    name="選択項目の削除"
    variant="transparent"
    size="small"
    shape="rounded"
    handleClick={handleDeleteSelected}
  />
)}
```

---

## 3. 決済画面へは「選択中（choose=true）」のみ渡す

* チェックされた商品のみで決済画面に遷移させるには
* `cartItems.filter(item => item.choose)` で抽出し、決済処理APIやページ遷移時に使う

---

## 4. そのほか実装Tips

* `sumPrice`は「商品単価×数量」で都度再計算
* 商品のオプションや数量変更時は、setCartItemsで常に全てのプロパティを最新化する
* サーバー側APIも、同一ユーザー・同一商品・同一オプションのカートが重複しないよう制御が必要

---

## まとめ

* フロントエンド側で、数量・オプション・選択状態などのUI・状態管理を適切に行うことで、UX向上
* カート操作系UIは状態遷移・副作用の管理が複雑なので、map/filter/reduceをうまく使いこなすことがコツ

---

```
```
Redisのレプリケーション

## マスター＆レプリカモデル

- マスターの更新内容を複数のレプリカに反映  
- 主な目的は **高可用性の確保**

---

## 実装

- レプリケーションは **非同期** → 遅延や一貫性の欠如が発生する可能性あり  
- レプリカは基本的に **読み取り専用**  
- マスターを再起動すると、レプリカも再初期化され、**データが消失**する可能性あり

---

## レプリケーションのメカニズム

1. レプリカが `PSYNC` を使用してマスターに同期をリクエスト  
   → 現在のレプリケーションIDとオフセットを送信  
2. マスターは自分のレプリケーションIDとレプリカのIDを比較  
3. オフセットがレプリケーション・バックログに存在するか確認  
   - 存在する → **部分同期**が可能  
   - 存在しない／リクエストサイズがバックログを超える → **全体同期**

---

### 全体同期（Full Sync）

1. マスターが子プロセスをフォーク（`BGSAVE`）  
2. マスターのメモリ内容をスナップショット化（RDBファイル生成）  
3. RDBファイルをディスクに保存し、ネットワーク経由でレプリカへ送信  

> ※ ネットワーク帯域に負荷がかかる場合あり  
> ※ **初回のレプリケーションは全体同期が必要**  
> ※ **ディスクレスレプリケーション**（RDBをディスクに書かず、直接ソケットに送信）も可能で、よく使用される

---

### 全体同期の補足

- すでにレプリカにRDBファイルが存在する場合、一貫性のため既存ファイルは削除される  
- 同期完了前のレプリカは、**古い（stale）データ**をクライアントに返す可能性がある  
  - `replica-serve-stale-data=false` を設定すれば、クライアントへは **エラーを返す**

---

### 複数レプリカの同期

- 2台目以降のレプリカが同期を開始したタイミングにより動作が異なる  
  - **既存のBGSAVEが進行中** → そのスナップショットを再利用  
  - **BGSAVE完了後** → 新たにBGSAVEを実行

---

### レプリカとTTL（Time to Live）

- expire（期限切れ）したキーは RDBファイルに含まれない  
- AOF（Append Only File）では `DEL` コマンドとしてレプリカに転送される

---

## 同期的レプリケーション（セミシンク）

- データ損失を防ぐために `WAIT` コマンドが使用できる  
  - 指定した数のレプリカから応答が返るまでクライアントは待機  
  - レプリカの応答遅延検出にも有効

---

## ヘルスチェック機構

- マスターは `repl-ping-replica-period` に従って、**定期的に全レプリカへPING**を送信  
- レプリカは `REPLCONF ACK <OFFSET>` を返し、処理済みのオフセットを報告  
- マスターは各レプリカからの最終ACK時刻を記録  

設定パラメータ:

- `min-replicas-max-lag`:  
  → マスターが「レプリカが遅延している」と判断する最大許容時間  
- `min-replicas-to-write`:  
  → 有効なレプリカがこの数未満の場合、マスターは書き込みを停止してエラーを返す  
- `repl-timeout`:  
  → マスターからのPINGがこの時間を超えて届かない場合、レプリカは再同期を行う

---

## フェイルオーバー（Failover）

- Redisは **自動フェイルオーバー機能を提供しない**  
  - レプリカをマスターに昇格させるには `REPLICAOF NO ONE` を使用  
  - 一部マネージドサービス（例: AWS ElastiCache など）では自動フェイルオーバーをサポート  
- フェイルオーバー中は `CLIENT PAUSE` によって、クライアントからのリクエストを一時停止可能
VertiTab 2.19.0 アップデート: 新機能、改善、修正が登場


皆さん、こんにちは！**VertiTab 2.19.0**がリリースされましたので、最新のアップデート内容をお知らせします。以下の新機能と改善をチェックしてみてください。

### 新機能:

- **ミドルクリックでタブを閉じる**: ミドルマウスボタンでタブを閉じることができるようになりました。
- **ダブルクリックでタブを閉じる**: ダブルクリックでタブを閉じる機能（300msの遅延付き）が追加されました。
- **アイコンの代わりにカラー点を使用**: サイトのURLに基づいてタブアイコンをカラー点に変更しました。 [デモを見る](https://static.rabbitpair.com/public/20250607/TabUseColorDots.gif)
- **最後にアクセスしたタブに戻る**: タブを閉じた後、隣のタブではなく、最後にアクセスしたタブに戻る機能を追加しました。
- **ウィンドウ間でピン止めタブを同期**: すべてのブラウザウィンドウでピン止めタブが同期され、どのウィンドウでも利用できるようになりました。
- **タブのスケジュール機能**: タブをリフレッシュ、スリープ、または閉じるスケジュールを設定できるようになりました。 [デモを見る](https://static.rabbitpair.com/public/20250607/TabScheduled%20Task.gif)
- **リンクの開き方をカスタマイズ**: 新しいタブ、ポップアップウィンドウ、シークレットウィンドウなど、リンクを開く方法をカスタマイズできるようになりました。無料ユーザーも右クリックで利用できます。 [デモを見る](https://static.rabbitpair.com/public/20250607/LinkOpenWith.gif)

### ブックマーク管理の改善（プレミアム機能）:

- ビジュアルやレイアウトをカスタマイズできる新しいオプションが追加されました。
- タブグループの管理がさらに簡単になり、新しいショートカットで素早く操作できます。

### その他の変更:

- **Shadow DOM**サポートを追加した動画ファインダーの改善。
- 5個以上のタブが開いている場合の表示方法を最適化しました。
- UIとスナップショットの処理に関するいくつかの修正を行いました。

もしまだ**VertiTab**を試していない方や、最新バージョンを手に入れたい方は、以下のリンクからダウンロードできます。

[Chrome ウェブストアでVertiTabをダウンロード](https://chromewebstore.google.com/detail/vertitab-vertical-tabs-in/chejfhdknideagdnddjpgamkchefjhoi)
AIがワイのためにER図を書いて分析レポートを保存してくれるなんて

# AIがワイのためにER図を書いて分析レポートを保存してくれるなんて

> 人から引き継いだアプリのデータ構造が不明...
> ドキュメントもない...このデータベースは一体なんなんだ！
> そんな"あるある"に苦しむあなたに贈る、Claude × MCP × Mermaid × MySQL の“可視化爆速レシピ”。

---

### ✅ やること

1. リモートMySQLを `mysqldump` で取得
2. ローカルにMySQL復元
3. ClaudeでER図を生成
4. `filesystem`サーバ経由で **ローカル保存**

---

## 1. 前提

| 項目        | 内容例                                  |
| --------- | ------------------------------------ |
| リモートDB    | MySQL 8.x系、SSHで接続可                   |
| ローカル環境    | macOS + Homebrew MySQL 9.x           |
| MCPクライアント | [Claude Sonnet4](https://claude.ai/)       |
| MCPサーバ    | MySQL用, filesystem用                  |
| Claude拡張  | Model Context Protocol プラグインが有効であること |

---

## 2. mysqldump でリモートDBをバックアップ

```bash
mysqldump -u <remote_user> -p <remote_db> > dump.sql
gzip dump.sql
```

---

## 3. scpでローカルへ

```bash
scp <remote_user>@<remote_host>:~/dump.sql.gz ~/Downloads/
cd ~/Downloads && gunzip dump.sql.gz
```

---

## 4. ローカルMySQLに復元

```bash
mysql -u <local_user> -p -e "CREATE DATABASE <local_db>;"
mysql -u <local_user> -p <local_db> < dump.sql
```

---

## 5. `.mcp.json` の設定（Claudeで使う）

```jsonc
{
  "mcpServers": {
    "mysql": {
      "command": "npx",
      "args": [
        "-y",
        "@benborla29/mcp-server-mysql",
        "--dsn",
        "mysql://<user>:<password>@127.0.0.1:3306/<your_db_name>"
      ],
      "env": {
        "MYSQL_ENABLE_LOGGING": "false",
        "MYSQL_LOG_LEVEL": "info"
      },
      "disabled": false,
      "autoApprove": []
    },
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/path/to/your/directory"
      ]
    }
  }
}
```

---

## 6. Claude へのプロンプト例

Claudeに以下の指示を送信：

```
＜<your_db_name>＞ MySQLデータベース構造分析した上でER図を作成して保存してください
```

→ 出力例：
![スクリーンショット 2025-06-09 21.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3349905/8c30e52a-8775-4a61-a410-984a267fabc7.png)
![スクリーンショット 2025-06-09 21.54.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3349905/7ca46182-436b-4831-b261-2ee281452e11.png)
ER図を作成するだけでなく、なぜか分析レポートまで書いてローカルに保存してくれました。

---


## ✅ おわりに：データ構造の把握・修正、サクッと可視化から始めませんか？

Claude × MCP では、**ノーコードで設計図を生成、保存**のすべてが簡単になります。良い時代に生まれたもので、データ構造の把握と修正に力を入れられます。

> **見える化したいDB、Claudeに見せよう**！

---

### ちょこっと宣伝

ワークスタープロは40代~60代以上のエンジニア＆IT経験者向けの、
**シニアIT人材のためのフリーランスマッチングサービス**を運営し始めました。

☑ ご興味がある方は → [https://workstarpro.com](https://workstarpro.com/work-star-app/)

---

## 🔗 参考リンク

* [Model Context Protocol](https://modelcontextprotocol.io/)
* [Mermaid ER Diagram](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)
* [Claude by Anthropic](https://claude.ai/)
* [MySQL公式 mysqldump](https://dev.mysql.com/doc/refman/8.0/en/mysqldump.html)
Fletで本格的にToDoアプリを作った話【Python】

1年ほど前、PythonのGUIライブラリであるFletを使用してスマホ向けのToDoアプリを開発しました。コンセプトとしては、大学の授業の課題の管理に特にフォーカスした設計でした。

当時は制作したものを記事に起こしたりする習慣がなかったので、今更ですが軽く紹介記事を作っておこうかと思います。
一部コードが最新バージョンのFletとは互換性がなくなっていたので、その修正についても軽く触れます。

<img width="400" alt="タイトル用-トリム.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/ca17a519-159e-456e-85ec-46da93af8653.png">


# 📝課題管理ToDoアプリ TasClear

TasClearとは、日々の課題に追われる大学生のために開発した「**課題管理に特化したToDoアプリ**」です。

<img width="200" alt="icon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/bd6f16cd-de51-4d0d-8cde-c465067437a8.png">


以下のような機能を搭載することで、課題（***Task***）を明確（***Clear***）に管理し、確実に完了（***Clear***）することができます。

- 🏫授業ごとの課題管理
- 📆提出期限が近い課題の強調
- 🔃自動並び替え

以下のリンクより、部活内での発表に使用したスライドもご覧いただけます。

https://www.canva.com/design/DAGp23MRFi0/m5LkDDA6S3_ynXC-L0fb_g/view?utm_content=DAGp23MRFi0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h89be8ecb81

# 主な機能

## 授業ごとの課題管理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/d6ea0125-b0d9-4891-8a83-2c7953ccb8fa.png)

授業ごとにタブが作成され、課題を直感的に分けて管理できます。

タブの右端にある「＋」ボタンから授業の追加も可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/234ad342-7ddb-45e6-bddc-843e66a2f5dd.png)

「＋ Add Task」の横のゴミ箱アイコンから授業の削除が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/db06e0e6-dfed-4b09-a3f3-a6f1fcebb296.png)

## 提出期限が近い課題の強調

提出期限まで24時間を切った課題は、文字色が赤くなり強調表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/f0da2efa-a8b8-4e6e-9ae7-f272f077eb15.png)

## 自動並び替え

各課題は締切が近い順に上から表示されるため、課題の優先順位も一目瞭然です。
もちろん、締切を変更しても即座に並び替えが反映されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822515/da3a4aeb-a4c2-40a1-86ca-e65bd65eb5e3.png)





# 最新バージョンへの対応

このアプリを開発した当時は、Fletのバージョンが0.22.0だったので、現時点（2025/06）の最新バージョンである0.28.*とは一部コードの互換性がなくなっていました。
修正しなければいけない部分は主に以下の3点でした。

- `ft.colors`が使えない
- `ft.icons`が使えない
- `ft.Dropdown`で`alignment`プロパティが非推奨

## `ft.colors` & `ft.icons` の修正

コントロールの色の設定に使用する`ft.colors`や、アイコンの指定をするための`ft.icons`は共にv0.28から使用できなくなりました。代わりに、`ft.Colors`と`ft.Icons`を使用します。

```diff_python: 例：カラースキームシードの設定
theme = ft.Theme(
-   color_scheme_seed=ft.colors.GREEN_400,
+   color_scheme_seed=ft.Colors.GREEN_400,
)
```

```diff_python: 例：Appbarアイコンの設定
page.appbar = ft.AppBar(
-   leading=ft.icon(ft.Icons.CHECK_CIRCLE_OUTLINE_ROUNDED),
+   leading=ft.Icon(ft.Icons.CHECK_CIRCLE_OUTLINE_ROUNDED),
        ...
)
```

## `ft.Dropdown`で`alignment`プロパティが非推奨に

日付や時間の選択に使用しているDropdownコントロールに`alignment`プロパティがv0.30.0から廃止になるそうです。
まだv0.28.*なので動作はしますが、警告文が出てしまうので削除しておきます。特に動作に影響はありません。

```diff_python: プロパティごと削除
self.dpYear = ft.Dropdown(
    width=207,
    options=[ft.dropdown.Option(i) for i in range(t.year, t.year+3)],
    value=t.year,
    text_size=18,
    content_padding=15,
-   alignment=ft.alignment.center,
)
```
ママ「vue‑quillは終わりよ。Vue 3でQuill本体を直で使う方法を伝授するわ」

# 🎙️「vue‑quill？そんな古いの使うの？ダメよダメダメ！」

ちょっと聞いてちょうだい。
未だに **`vue‑quill`** を推奨する記事があるんだけど、最後に更新されたのが約2年前、Quillのバージョンは1.3.7よ 。アタシたちのお店じゃもう骨董品扱いだわぁ🏺

最新のGoogle Chromeで使うとコンソールにこんなエラーが出るわよ！！❌️❌️❌️

```console
> ERROR! Listener added for a 'DOMNodeInserted' mutation event 
```

可愛くても、今どきメンテが止まってたら将来どうなるか分からないわ。Σ(・∀・；)
セキュリティだって心配よ〜。
それに、**Quill v2 には未対応**。カスタムモジュールを使おうにも古いままじゃ進化できないわね 

---

## ✅ ママのアドバイス：**オシャレなアタシでも、やっぱりシンプルが一番！**

vue-quillを使わなくても直接使うのがシンプルでいいわよっ🎯

### 🌸 Quill本体をVue 3で直接使う方法が良いワケ

1. **依存少なめ** → 軽やかでストレス知らず
2. **公式APIがそのまま使える** → "text-change" イベントとかモジュール登録も自由自在 
3. **将来性アリ** → Quill v2, v3…新しい機能も逃がさない！

---

## 💅 基本の使い方

あたしはアーダーコーダ説明するのは苦手なのっ
これがママが開発したVue3用のラッパーコンポーネントよ♥️
これを見て作るもよし、自由にカスタマイズして使うのもよし✨️
煮るなり焼くなり好きにして👄

でも刺し身はイヤッ🍣 (南国少年パプワくんより)

```vue
<script setup>
import { computed, onMounted, ref, watch } from "vue";
import Quill from "quill";
import "quill/dist/quill.snow.css";

const props = defineProps({
    modelValue: String,
    disabled: Boolean,
});

const emits = defineEmits(["update:modelValue"]);
let editor = ref(null);
let quillInstance = null;

const toolbar = computed(() => {
    // ここは好きな用にツールバーをカスタマイズしてね♥
    return [
        [{ color: [] }, { background: [] }],
        ["bold", "italic", "underline"],
        ["link", "image"],
        [{ align: [] }, { list: "ordered" }, { list: "bullet" }],
        [{ size: ["small", false, "large", "huge"] }, "clean"],
    ];
});

const content = computed({
    get: () => {
        return props.modelValue ? props.modelValue : "<p><br></p>";
    },
    set: (value) => {
        emits("update:modelValue", value);
    },
});

onMounted(() => {
    quillInstance = new Quill(editor.value, {
        theme: "snow",
        modules: {
            toolbar: toolbar.value,
        },
        readOnly: props.disabled,
    });
    quillInstance.root.innerHTML = content.value;
    quillInstance.on("text-change", () => {
        emits("update:modelValue", quillInstance.root.innerHTML);
    });
});

watch(
    () => props.modelValue,
    (value) => {
        if (quillInstance && quillInstance.root.innerHTML !== value) {
            quillInstance.root.innerHTML = value || "<p><br></p>";
        }
    }
);
</script>
<template>
    <div
        ref="editor"
        :style="{ minHeight: '6rem' }"
        class="bg-white"
    ></div>
</template>

<style>
.ql-editor .ql-size-small {
    font-size: 0.9em;
}
.ql-editor .ql-size-large {
    font-size: 1.3em;
}
.ql-editor .ql-size-huge {
    font-size: 2.1em;
}
</style>

```

**これだけで使えるのよ〜💕**
簡単でしょ⁉️😍

このコードだとこんな感じになるわ↓↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235255/0a9071ad-3781-4618-b714-113bec5e70bc.png)


それじゃ、またね〜〜〜✋️
ITエンジニアになった理由 ～その1：NEC製8ビットPCとの出会い～

## プロローグを経て...
いよいよ本編が始まろうとしています。

## そして本題
何故ITエンジニアになろうと思ったの？
1. フルリモートでやりたい？ → No。そもそもコロナ禍前は出社前提でしたから
1. 稼げるから？ → No。いやいや...稼げる職業だったらITエンジニア志していないっすよ

そもそもITエンジニアなんて2000年初頭は時間外労働が恐ろしい位なので3Kとも言われる不人気職だったんですから...
(時間外労働をしたがらないまるさんでも時間外労働が100時間超える事もあった)

それは「コード書いたりするのが好きだから」に他ならないと思っています。

## ～その1：NEC製8ビットPCとの出会い～
そんなまるさんは小学校6年生の頃にNEC製の8ビットパーソナルコンピュータである
PC-8801mkII FR model30を手にしたところから始まる
これが当時としては高性能で
1. 定価は178,000円
1. 8ビットPC(当時は16ビットになると超高性能)
1. 5インチ2Dのフロッピーディスクドライブが2基搭載(フロッピーなんて今の時代は絶滅...してないか...)
1. フロッピーディスクの容量は2Dなので320キロバイト(ギガでもテラでも無い)
1. N88-BASICと言う標準で備わっているBASIC言語搭載(プロローグのファミリーベーシックよりも充実していてディスクベーシックもあった)
1. 日本語はローマ字入力が出来ないためカナロックしてカナ配列で入力していた
1. この時期はハードディスクは一般的では無い(あったとして...とても高価で手が出せない)

てな訳で...当時の名残もあり...
まるさんの日本語入力は「かな入力」でございます(笑)
「かな入力」の理由としては「ローマ字入力」だと頭で考えちゃって入力が超絶スローになるのですよ

その点「かな入力」のメリットとしては以下の通りで理に適っているのですよ(親指シフトなんてのもありますし)
1. 日本語キーボードの配列を理解していれば入力出来る
1. ローマ字入力と比較して打鍵が減る傾向にある

一方...「かな入力」のデメリットとして
1. 英字配列のキーボードを選択出来ない
1. 「かな入力」は絶滅危惧種(凡そ10%未満とか？)のため共用PCでカナロックしていると確実に怒られる(若い時にやらかしました)

ちょっと話が「かな入力」に脱線してしまいましたが...

PC-8801mkII FRでは色々と遊びましたねぇ...
1. マイコンBASICマガジンを見てゲームプログラムを打ち込んで遊ぶ
1. パソコンゲームで遊ぶ

上記の様にゲームで遊んでいたのでプログラミング言語(BASIC)を学習するなんて事は殆どしていませんでした...
それでも...この時期は1. でも述べている様にゲームで遊ぶためにキーボード叩いて必死にプログラム打ち込んでました。
プロローグでも述べていたファミリーベーシックとは大きく異なり
作成したゲームプログラムを5インチフロッピーディスクに保存するなんて事が出来るので

カセットテープに保存：保存に数分(ピーガーガーと独特の音を発する)
フロッピーディスクに保存：保存は一瞬(大規模プログラムだと数秒程度？)(そして音も静か。今で言うとSSDみたいなものか？)

と数年の進化に驚いたのを思い出す...

後は主に2. でしたが...ファミリーコンピュータよりも凝ったゲームが遊べたので
パソコンの世界にのめり込んでましたねぇ...(殆ど遊びだろ(笑)...と言うツッコミは置いといて)

そんな中で一番のめり込んだゲームは...

おっと...こんな時間だ(笑)
今日はこの辺にしておこうか...

次回へつづく(笑)
Python仮想環境管理の「ルネサンス」：コマンドラインよさらば、GUIよこんにちは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/775ab21e-1e6f-4b8a-8dc8-8959ca83a3ea.png)

Pythonを書いたことがあるなら、「仮想環境」というものをご存知でしょう。初心者であれベテランであれ、私たちは皆こう教えられてきました：プロジェクトごとに隔離された仮想環境を作成することは「ベストプラクティス」である、と。私も完全に同意します。議論の余地はありません。

![截屏2025-06-07 22.15.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/efd49389-2c9d-4e32-bdaa-695c2559be8d.png)


しかし、正直に言いましょう。私たちはそのプロセスを本当に「楽しんで」いるでしょうか？

あの見慣れた「儀式」を思い出してみてください。ターミナルを開き、呪文のようなコマンドを打ち込むのです。python3 -m venv .venv、そしてsource .venv/bin/activate。プロンプトの前に(.venv)が表示されて初めて一息つけます。次にpip install -r requirements.txtを打ち、長い待ち時間の後、ようやく実際のコードを書き始めることができるのです。プロジェクトが終われば、deactivateと打ち込むのを忘れてはいけません。

これは一つのプロジェクトでの話です。PCに十数のプロジェクトが同時に存在すると、事態は「パンク」なことになります：

あるプロジェクトはPython 3.8を、別のプロジェクトは3.11を必要とし、あなたはpyenvのようなバージョン管理ツールと格闘し始めます。
.venv、venv、env… フォルダには様々な名前の仮想環境が散乱し、時にはどれがどのプロジェクトに対応しているのか自分でもわからなくなります。
異なるターミナルウィンドウで、「今、どの環境を有効にしているんだっけ？」と忘れ、グローバル環境にパッケージをインストールしてしまい、大惨事を引き起こします。
コマンドラインは強力ですが、「環境管理」のような反復性が高く、間違いを犯しやすく、創造的ではなく純粋に手続き的な作業に対しては、面倒で「非人間的」に感じられます。私たちはツールとの内部摩擦にあまりにも多くのエネルギーを費やしています。

今こそ「ルネサンス」を迎える時です。

ルネサンスの核心は、より人間的でエレガントな方法で人々を反復労働から解放することでした。Python仮想環境管理の問題において、グラフィカルユーザインタフェース（GUI）こそがこの復興の旗手です。私たちが必要なのは、何十ものコマンドパラメータを覚えることではなく、明確なダッシュボードなのです。

これこそが、私がmacOSですべてのWebプロジェクト（Pythonプロジェクトを含む）の管理をServbayに全面的に移行した理由です。それは私のPython環境管理を、全く新しい、より文明的な段階へと引き上げてくれました。

![日语.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/170634b8-5e4e-474b-9666-dae2a6ad4a25.png)


Servbayでは、ロジック全体が逆転します。あなたはもはや環境に「入る」のではなく、プロジェクトに「環境を割り当てる」のです。

バージョンの混乱にさよなら：Servbayは、Python 2.7から最新の3.xまでの任意のバージョンをグラフィカルインターフェースでインストールさせてくれます 。プロジェクトの設定ページで、ドロップダウンメニューから「このプロジェクトはPython 3.12を使用する」と選択するだけです。それだけ。Servbayはすべてのパスと隔離を自動的に処理し、複数のPythonバージョンが互いに干渉することなく同時に実行できるようにします 。

![截屏2025-06-07 22.04.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/5214e672-7fec-4ad5-ad3e-31b74389de88.png)


「有効化/無効化」を忘れる：もはやactivateやdeactivateコマンドは存在しません。プロジェクトが特定のPythonバージョンに関連付けられている限り、そのプロジェクトに統合されたターミナルは正しいPythonインタプリタを使用します。この無意識の切り替えは、初心者にとって非常に親切です 。
![截屏2025-06-07 22.13.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/ee4b462f-3edb-4392-8715-602aa14c58b7.png)


統合された開発体験：DjangoやFlaskを使用するPython Web開発者にとって、Servbayの利点はさらに明白です。Pythonだけでなく、データベース（MySQL, PostgreSQLなど）やWebサーバー（Nginxなど）も一元管理します 。同じインターフェースからプロジェクトに必要なすべてのサービスを起動できる、これこそが真のワンストップ開発体験です。

シンプルで直感的、精神的負担を軽減：ServbayのGUIは非常に直感的に設計されており、環境管理を設定でオプションを切り替えるのと同じくらい簡単にします 。これにより、参入障壁と日常のメンテナンスにおける精神的負担が大幅に軽減され、複雑なコマンドラインに頭を悩ませる初心者や学生開発者にとっては大きな福音です 。


コマンドラインがなくなることはありません。多くのシナリオで依然として最も効率的なツールです。しかし、「ローカル開発環境管理」という領域においては、私たちはより現代的で、直感的で、手間のかからない選択肢を持つ価値があります。

貴重なエネルギーをアルゴリズム設計、ビジネスロジック、そして創造的なコーディングに使いましょう。ターミナルで「呪文」を唱えるのではなく。それこそが、Python環境管理における「ルネサンス」の意義なのです。
AWSアカウント開設初日に「Amazon Q CLI」でゲーム開発！非エンジニアでもできた衝撃体験

皆さん、こんにちは！
実は先日、初めてAWSアカウントを作成したばかりの超初心者、非エンジニアの私が、なんとAmazon Q CLIを使ってゲームを作ってしまいました！まさかこんなことが簡単にできるなんて、自分でも驚きを隠せません。
Amazon Q CLIは、まるでチャットするようにプロンプトを入力するだけで、コードを生成してくれるAIツールなんです。私は今回、このAmazon Q CLIとひたすらチャットをしながら、あるゲームを開発しました。
今回挑戦したのは、シンプルなゲームですが、プロンプトだけでコードがどんどん生成されていく過程は、まさに魔法のようでした。途中でエラーが出ても、Amazon Q CLIが原因を教えてくれて、修正方法まで提案してくれるので、プログラミングの知識がなくても安心して進めることができました。
最終的に完成したゲームがこちらです！
![IMG_5950.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109063/02026aac-1ccb-4b80-8eff-52a12a50f652.jpeg)
![IMG_5951.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109063/ae739607-620a-49eb-8453-017760534ab9.jpeg)
![IMG_5952.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109063/62682b13-d99b-46b7-8f73-ba42aab65991.jpeg)

この画像を見ていただければ、プログラミング未経験の私でも、こんなゲームが作れるんだと実感してもらえるはずです。
エンジニアではないからと諦めていた方、ぜひ一度Amazon Q CLIを試してみてください。きっと新しい世界が広がりますよ！
#AmazonQCLI
リソースを削除せずにTerraform管理外にできるremovedブロック

## 概要
リソースを削除せずにTerraform管理外としたい場合に有効

似ているものでignoreがあるが、あれはtfstateとデプロイ済みリソースとの差分を特定の設定項目のみ無視する意味になるので、少し挙動が違う

でも、わかると便利


## やり方
以下のようにresourceブロックを削除した上で、removedブロックを記述する

destroy = falseにすることで物理削除はされなくなる

```jsx
- # resourceブロックは削除する
- resource "aws_s3_bucket" "hoge-s3-bucket" {
-   bucket = "hoge-test-s3-bucket"
- }

+ removed {
+   from = aws_s3_bucket.hoge-s3-bucket
+   lifecycle {
+     # falseするとリソースが削除されなくなる (デフォルトはtrueなので注意)
+     destroy = false
+   }
+ }
```


対象resourceブロックを削除しておかないと以下のようなエラーになるので注意してください。
```

This statement declares that aws_s3_bucket.hoge-s3-bucket was removed, but it is still declared in configuration.
```
【備忘録】テストデータをモックデータに置き換える

## やりたいこと
モックデータをセットし、データが置き換わっていることを確認したい

## 実装

```App.spec.tsx
// 本番データはここのgetAllReocrds関数で取得してくる
import * as api from "../../utils/supabaseFunction";

jest.mock("../../utils/supabaseFunction");

describe("App", () => {
  test("モックで取得したデータが表示される", async () => {
    // getAllRecordsで取得するデータをモックデータに置き換える
    (api.getAllRecords as jest.Mock).mockResolvedValue([
      { title: "てすと", time: "33" },
      { title: "てすと2", time: "44" },
    ]);
  
    render(<App />);

    // モックデータは複数取れるので、find「All」ByTestIdで指定する
    const items = await screen.findAllByTestId("item");
    expect(items[0]).toHaveTextContent("てすと");
  });

```

```App.tsx
{records.map((item, key) => {
  return (
    <>
      <p key={key} data-testid="item">{item.title}:{item.time}</p>
      <button onClick={() => handleDelete(item.id)}>×</button>
    </>
  )
})}
```
## 詰まっていたところ
`await waitFor(()=>{})`で取ろうとしてやり方がわからなかったり、`screen.findAllByTestId`で取得しようとした。
プロデル、調査 その33

# 概要
プロデルが、CLRらしいので、調べて見た。
練習問題やってみた。

# 練習問題
Edgeを起動せよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5371850d-d0cf-4e7e-90e7-9733cf85ba85.png)

# サンプルコード

```

メイン画面を表示する
待機する

メイン画面とは
	ウィンドウを継承する
	はじめの手順
		初期化する
	終わり
	初期化する手順
		nは 0
		初期化開始する
		ボタン1というボタンを作る
		この実質大きさは{357, 328}
		この内容は「ランチャー」
		ボタン1を使う
			その位置と大きさは{86, 59, 70, 28}
			その内容は「次へ」
		初期化終了する
		この設計スケール比率は{120, 120}
	終わり
	ボタン1がクリックされた時の手順
		COM_shellというCOM型(「Shell.Application」）を作る
		shellは、COM_shellからインスタンスを作ったもの
		shell:ShellExecute(「microsoft-edge:https://produ.irelang.jp/docs/index.htm」)
	終わり
終わり




```

以上。
Unity個人開発で“絶対にハマる落とし穴”ベスト3


Unityで個人開発をしていると、公式ドキュメントや一般的なチュートリアルには載っていない“地味だけど確実に詰まるポイント”が山ほどあります。

今回は、実際に何度も自分や周囲がハマった“絶対にやらかす落とし穴”を3つピックアップし、その理由や対策も合わせて紹介します。

---

## 1. “プレハブの参照地獄”と「意図せぬデータ共有バグ」

この話、過去にも記事にしたくらい定番です。分かっているつもりでも、ついクセでやってしまうし、後から「あっ…」となるヤツ。

### どういうことか？

* ScriptableObjectやPrefabを“インスタンス化せずに”そのまま使い回すと、全オブジェクトが**同じデータを参照してしまう**
* 例えば「HP」や「所持アイテム」など、“本来インスタンスごとに別で持つべきデータ”が**全キャラで同期**してしまい、バグの温床に
* 特にScriptableObjectは、**アセット自体がメモリ上で1つ**という性質を見落としがち

### なぜハマるのか？

* プレハブやScriptableObjectは**楽だから**そのまま使いがちだけど、「共有していいデータ」と「インスタンスごとに持たせるべきデータ」を分けないと地獄
* 「エディタ上では動くのにビルドするとバグる」みたいなケースも多い

### 対策

* **インスタンスごとにClone/DeepCopyを作る**（自前のコピー処理を用意）
* 「明示的に共有したい」「インスタンスごとに違う値を持たせたい」を**毎回意識して設計**する
* 具体的なScriptableObjectバグ体験談・修正例も別記事で公開中

---

## 2. “アセットバンドル／アドレッサブル”の罠

一見便利そうなアセット管理機能、でもここにも“初心者キラー”な落とし穴が。

### どういうことか？

* AddressableやAssetBundleでリソースを分割＆管理する際、**エディタでは動くのにビルドするとエラーや参照切れが多発**
* 例えば、「パスが間違っていてビルド後にクラッシュ」「アドレッサブルのラベルをつけ忘れてロード失敗」「外部リソースが実機で見つからない」など

### なぜハマるのか？

* エディタ上では「なんとなく」動いてしまうので、本番ビルドでしか起きない不具合に気付きにくい
* アドレッサブルは“依存関係・ラベル・グループ管理”が煩雑で、1ヶ所の設定ミスが全体に波及しやすい
* 特に個人開発だと「全部自分で面倒見る」必要があるため、つい疎かになりがち

### 対策

* **必ず実機・ビルド環境で細かくテスト**（エディタだけで満足しない）
* アドレッサブルやAssetBundleの「グループ・ラベル・依存関係」は表にまとめてドキュメント化
* ローカルパスやResources依存のハードコーディングを避け、運用ルールを徹底
* エラー発生時の「リトライ処理・例外処理」も必ず用意

---

## 3. “実機でしか再現しない謎挙動（iOS/Androidプラットフォーム依存バグ）”

これ、**Unityでモバイルアプリを作ると100％経験する**やつです。

### どういうことか？

* 「エディタやPCビルドでは普通に動くのに、iOSやAndroid“実機”でだけクラッシュ・処理落ち・表示バグが起きる」
* 例えば：

  * ファイル入出力がPermissionで失敗
  * iOSだけ通知が鳴らない
  * Androidのバックグラウンド挙動が怪しい
  * フォントや画像が正しく表示されない
  * Google/Firebaseなど“外部サービス連携”でハマる

### なぜハマるのか？

* UnityのAPIは**内部的にプラットフォームごとの実装差分**が多く、ドキュメントだけじゃ追いきれない挙動が存在する
* iOSとAndroidで権限周り（Manifest/Info.plist等）の初期設定が抜けてる
* 特にiOSの審査通過やバックグラウンド挙動はクセが強い

### 対策

* **とにかく早めに実機でテスト＆デバッグ**
* 新しい機能を追加したら毎回「iOS/Android両方」で挙動を確認
* Manifest, Info.plist, 権限設定などはドキュメントを横断して細かくチェック
* 外部連携（Google/Firebase/Apple系）も公式サンプルを参考に最小構成から段階的に導入

---

## まとめ

Unityで個人開発をしていると、見落としがちな「地雷」が本当に多いです。
「分かっているつもりだったのにやってしまう」「ネット上にもあまり事例が載ってない」みたいな、まさに“リアルな落とし穴”こそ後から効いてきます。

これからUnityでアプリやゲームを作ろうとしている方は、今回の内容を頭の片隅に置いておくと、トラブルを未然に防げるかもしれません。

---

## ブログ・YouTube・アプリも発信中です！

開発ノウハウやUnity連携のハマりポイントなど、より深掘りした内容をブログでもまとめています。
▶ [https://syunpp.com](https://syunpp.com)

公開中のアプリ一覧もまとめています。
▶ [https://syunpp.com/公開中のアプリ一覧/](https://syunpp.com/公開中のアプリ一覧/)

Unityで制作中のゲームの進捗や演出テスト、実装の様子をショート動画でタイムラプス形式にまとめて公開しています！
▶ [https://www.youtube.com/@syunpp\_8413/shorts](https://www.youtube.com/@syunpp_8413/shorts)

---
Amazon Q CLI でゲームを作ってみた

# JAWS-UG横浜支部で「JAWS-UG横浜 #85 Build Games with Amazon Q CLI」というイベントを開催しました
https://jawsug-yokohama.connpass.com/event/355243/

### 当日の様子
![DSC04968.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33070/2447279d-74f6-4eda-baf8-7c751587b88b.jpeg)

- みんなで工夫を凝らしながら、即興でゲームを作っていくのはとても面白かったです
- できた人からゲームを共有したことで、たくさんのアイデアが沸いてきました

## ステップバイステップガイド
[Amazon Web Servicesブログ](https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/)に日本語のガイドが載っていたので紹介します

# 作ったもの
横スクロールでランナーが障害物を避けていくゲームです。
キャラクターがピコピコ動いてなかなかツボです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33070/3544db25-9aba-4563-bd3c-a754174cf647.png)


# 作り方
```
横スクロールのマラソンゲームを作ってください
```

## 改善
```
> ゲームを改善したいです
```
とだけ指示してみました。

```
🟢 Completed in 0.11s
マラソンゲームの改善案を実装しました。以下に主な改善点をまとめます：

## 実装した改善点

### 1. グラフィックの向上
• **パララックス背景**: 空、山、地面の3つのレイヤーを実装し、それぞれ異なる速度でスクロールすることで奥行き感を出しまし
た。
• **プレイヤーアニメーション**: 簡易的なアニメーションを実装し、走っている感覚を表現しました。
• **多様な障害物**: 通常の障害物に加えて、上下に動く障害物や高い障害物を追加しました。

### 2. ゲームプレイの拡張
• **レベルシステム**: 走行距離に応じてレベルが上がり、障害物の出現頻度が増加します。
• **複数のアイテム**: スタミナ回復アイテムに加えて、一時的な無敵状態になるアイテムを追加しました。
• **難易度の段階的な上昇**: レベルが上がるにつれて障害物の出現頻度が増加します。

### 3. UI/UXの改善
• **スタート画面とメニュー**: ゲーム開始前にタイトル画面を表示し、スペースキーでスタートできるようにしました。
• **ハイスコア機能**: 最高スコアを保存し、メニュー画面とゲームオーバー画面で表示します。
• **ポーズ機能**: Pキーでゲームを一時停止できるようにしました。
• **ゲームオーバー画面**: より詳細な情報を表示し、新記録達成時には特別なメッセージを表示します。

### 4. その他の改善
• **アセット対応**: 将来的にスプライト画像やサウンドを追加できるよう、コードを準備しました。
• **コードの整理**: クラス構造を改善し、拡張性を高めました。

## 使い方

1. improved_marathon_game.py を実行してゲームを開始します。
2. メニュー画面でスペースキーを押すとゲームが始まります。
3. 操作方法:
   • **スペースキー**: ジャンプ
   • **右矢印キー**: ダッシュ（スタミナを消費）
   • **Pキー**: ポーズ/再開
   • **Rキー**: ゲームオーバー時にリスタート
   • **ESCキー**: ゲーム終了

## 今後の改善予定

今後さらに改善するためには、以下の点に取り組むことをお勧めします：

1. スプライト画像の追加: プレイヤーキャラクター、障害物、アイテムなどの画像を作成または入手し、assets ディレクトリに配置
します。
2. サウンドの追加: BGMや効果音を追加して、ゲーム体験を向上させます。
3. ゲームプレイの拡張: 二段ジャンプなどの特殊能力や、複数のステージを追加します。
4. 設定画面: 音量調整やキー設定などのオプションを追加します。

これらの改善を進めることで、より魅力的なマラソンゲームになるでしょう。
```

意図を汲み取ってくれたのか、ものすごい勢いで作ってくれました。


# 所感
プロンプトだけで動くゲームが出来上がるのは感動しますね！
Linuxを基本からまとめてみた【プロセス】

## プロセスを表示するコマンド

#### プロセスとは？
- プログラムをカーネル・CPUが扱うときの実行単位

#### psコマンド
- 現在動作しているプロセスを表示する

BSD形式オプション

| オプション |　説明     |      
| :---: | --- | 
| a | ユーザーが実行した全てのプロセスを表示する |     
| f | 親子関係を表示する |     
| l | 詳細情報を表示する |  
| x | 制御端末のない『デーモン』などのプロセスを表示 |  


#### psコマンドで出力される主な例

| オプション |　意味    |      
| :---: | --- | 
| PID | プロセスID |     
| TTY | ターミナル |     
| STAT | プロセスの状態 |  
| TIME | CPUの稼働時間 |  
| COMMAND | プロセスの実行内容 |  

#### プロセスの親子関係
- ほとんどのプロセスは、別のプロセスから派生して実行される

## プロセスの監視をするコマンド

#### topコマンド
- プロセス・システムリソースの状態を更新して表示するコマンド

## ジョブ

#### ジョブとは？
- シェルに入力した１行のコマンド群のこと
- プロセスの集まりとして捉えられる
- 『フォアグラウンドジョブ』『バックグラウンドジョブ』の２種類
- デフォルトはフォアグラウンドジョブ
- コマンドの末尾に『＆』をつけるとバックグラウンドジョブになる

| フォアグラウンドジョブ |バックグラウンドジョブ |      
| :---: | --- | 
| 処理が終わるまでシェルを占有 | シェルを占有しない |     
|処理が終わらないと別のジョブを実行できない|処理が終了していない場合でも別のジョブが実行できる|
| |処理に時間がかかる場合に有効  |

#### jobsコマンド
- 現在処理中のジョブを表示するコマンド

#### fgコマンド
- フォアグラウンドジョブとして切り替える

#### bgコマンド
- バックグラウンドジョブとして切り替える

## ジョブを継続して実行するコマンド

#### nohupコマンド
- ターミナルが閉じられてもジョブを継続して実行するコマンド

#### tmuxコマンド
- ターミナルを多重化し、セッションを管理する

## プロセスとジョブの停止

#### シグナルとは？
- プロセス・ジョブに対して送る合図のようなもの 

#### tmuxコマンド
- ターミナルを多重化し、セッションを管理する





## 参考サイト
[新・Linux入門編3(LinuC対策版): プロセス](https://paiza.jp/works/linux/new-primer/linux-new-primer-3)
SwiftUI LinearとSpring Animationの使い方を簡単に説明してみました！

SwiftUI では、わずか数行のコードで簡単にアニメーションを実装できます。中でもよく使われるのが Linear Animation と Spring Animationです！

Linear Animation（線形アニメーション）とは？
----
Linear Animation は、一定の速度でアニメーションが進行するシンプルなアニメーションです。開始から終了まで速度が変わらないため、動きに緩急がなく、時間ベースの操作に適しています。


```swift
withAnimation(.linear(duration: 1.0)) {
    // アニメーションさせたい状態の変更
}
```
例：ボタンを押すとViewが横にスライドする

```swift
struct LinearAnimationView: View {
    @State var move = false

    var body: some View {
        VStack {
            Rectangle()
                .fill(.blue)
                .frame(width: 100, height: 100)
                .offset(x: move ? 150 : 0)
                .animation(.linear(duration: 1.0), value: move)

            Button("Move") {
                move.toggle()
            }
            .padding(.top, 20)
        }
    }
}
```
---

Spring Animation（スプリングアニメーション）とは？
--
Spring Animation は、バネのように弾む動きを表現できるアニメーションです。自然で柔らかい印象を与えることができます！


使い方
```swift
withAnimation(.spring(response: 0.5, dampingFraction: 0.6)) {
    // アニメーションさせたい状態の変更
}
```
- response: 動きの速さ（短いほど早く動く）

- dampingFraction: 減衰率（低いほど跳ねる）
 
 例：Viewが弾むように拡大縮小する
 --

 ```swift
struct ContentView: View {
    @State var scale: CGFloat = 1.0

      var body: some View {
          VStack {
              Circle()
                  .fill(.pink)
                  .frame(width: 100, height: 100)
                  .scaleEffect(scale)
                  .animation(.spring(response: 0.4, dampingFraction: 0.5), value: scale)

              Button("Bounce") {
                  scale = scale == 1.0 ? 1.5 : 1.0
              }
              .padding(.top, 20)
          }
      }
}
 ```

Linear vs Spring：使い分けのポイント
---
| 特徴  | Linear     | Spring         |
| --- | ---------- | -------------- |
| 動き  | 一定速度       | 弾むような動き        |
| 印象  | シンプル   | 自然、柔らかい        |


まとめ
---
SwiftUIのアニメーションは、たった一行の .animation() で視覚効果を大きく向上させられます。Linear Animation で動きの正確さを、Spring Animation で動きの楽しさや自然さを演出できます。

ぜひ参考にしてみてください✌️
新言語Gluとは ～Rust, C++, Swift間のネイティブ連携～

### はじめに

マイクロサービスアーキテクチャの採用や、既存の高性能なライブラリ活用が当たり前になった今、こんな要求が頻繁に発生します。

  * 「パフォーマンスクリティカルな部分はRustで書いて、UIはSwiftから呼び出したい」
  * 「巨大なC++の資産を、新しく作るGoのサービスから安全に使いたい」
  * 「Pythonのデータ分析ライブラリのコア部分をZigで高速化したい」

これらの言語間連携を実現するのが**FFI (Foreign Function Interface)** です。しかし、FFIの多くはC言語を「共通語」として利用するため、**グルー** コード（接着剤の役割を果たすコード）の作成には様々な課題が伴います。

  * 手作業によるヘッダーファイルの管理とデータ型のマッピング
  * `unsafe` なコードが増え、メモリ安全性が脅かされるリスク
  * 複雑化するビルドプロセス

この課題に真正面から取り組むために生まれた、新しいプログラミング言語 **「Glu」** を紹介します。

### Gluとは？ LLVM時代の「接着剤言語」

**Glu** (`glu-lang.org`) は、その名の通り、異なるプログラミング言語を強力に「接着」することを目的とした新しい言語です。

特に、**Rust, C++, Swift, Zig** のような[LLVM](https://ja.wikipedia.org/wiki/LLVM)をコンパイラバックエンドとして利用する言語間のネイティブな連携を目指しています。

Gluが目指すのは、C言語に代わる、より安全で高レベルな「グルーコード」のポジションです。開発者はC言語で煩雑なグルーコードを手書きする代わりに、Gluを使ってよりシンプルかつ安全に言語間のインターフェースを記述できるようになります。

### Gluが解決するC言語グルーコードの課題

従来のC言語を介したFFIでは、以下のような課題がありました。

```c
// C Header for Rust library
typedef struct MyRustObject MyRustObject;

MyRustObject* create_my_rust_object();
void do_something_with_object(MyRustObject* obj, int32_t value);
void free_my_rust_object(MyRustObject* obj);
```

このようなヘッダーファイルを用意し、各言語でデータ構造を正しくマッピングし、ポインタの所有権を慎重に管理する必要がありました。これは非常にエラーを起こしやすい作業です。

Gluは、LLVM IRレベルでの連携を視野に入れることで、これらの課題を解決しようとしています。

  * **安全性の向上**: `unsafe`なポインタ操作を減らし、言語の力でメモリ安全性を高める。
  * **高い抽象化**: C言語よりも表現力豊かな型システムで、言語間のデータ構造の違いを吸収する。
  * **シンプルなビルド**: 複雑なヘッダーファイルの依存関係やビルドフラグの管理を簡略化する。

### Gluの最もユニークな特徴：「可逆性 (Reversibility)」

Gluには、他の言語にはない概念があります。それが **「可逆性」** です。

通常、プログラミング言語はコンパイラによって最適化され、機械語に近いLLVM IRに変換されると、元のソースコードが持っていた情報は失われてしまいます。(デバッグ情報の埋め込み等のオプションはありますが)
これを「不可逆なプロセス」と呼びます。

Gluは、**最適化されたLLVM IRからでも、意味的に等価なGluのソースコードを再生成できる** という「可逆性」の実現を目指しています。

これにより以下が実現されます。

  * **究極のデバッガの実現**: 最適化によってのみ発生する不可解なバグも、人間が読めるソースコードのレベルで原因を追跡できる・・・かも？
  * **コンパイラの挙動理解**: 「コンパイラが自分のコードをどのように最適化したのか」を、ブラックボックスではなく、Gluのコードとして直接確認できます。これにより、パフォーマンスチューニングの精度が格段に向上する・・・かも？
  * **ライブラリのブラックボックス化防止**: ソースコードが非公開のサードパーティ製ライブラリ（`.a` や `.lib` ファイル）が、内部でどのような処理を行っているのかを、ある程度推測する手がかりになるかも。

### Gluのコードはどんな感じ？

Gluはまだ非常に若いプロジェクトですが、公式サイトのブログなどからその姿を垣間見ることができます。

```rust // これはGluの疑似コードです
// Rustで書かれた関数をインポートするイメージ
extern "Rust" {
    fn my_rust_function(x: i32, y: i32) -> i32;
}

// Swiftの関数をインポートするイメージ
extern "Swift" {
    fn MySwiftClass.someMethod(self, arg: String);
}

// Gluで両者を繋ぐ関数を定義
fn call_both_languages(value: i32) {
    let result = my_rust_function(value, value * 2);
    
    // Swiftのクラスをインスタンス化してメソッドを呼ぶ (将来的な構想)
    // let swift_obj = MySwiftClass.new();
    // swift_obj.someMethod(arg: "Result from Rust: \(result)");
}
```

> **Note:** 上記はコンセプトを元にした疑似コードです。実際の構文は今後変更される可能性があります。

現状では、C言語やLLVM IRに近い命令的なセマンティクスを持ちつつ、Rustのような型推論や`let`束縛、`fn`による関数定義といったモダンな要素を取り入れた言語仕様が構想されています。

`extern "<ABI>"` のような構文で、連携したい言語のABI（Application Binary Interface）を指定し、ネイティブ関数を直接インポートする未来が描かれています。

### 現状と今後の展望

Gluは、記事執筆時点（2025年6月）でまだアルファ版であり、プロダクションで利用できる段階にはありません。

  * **公式サイト**: [https://glu-lang.org/](https://glu-lang.org/)
  * **GitHub**: [https://github.com/glu-lang/glu](https://github.com/glu-lang/glu)

言語間連携の課題は、ソフトウェアが複雑化・多様化する現代において、ますます重要になっています。GluがC言語によるグルーコード作成の煩雑さと危険性を過去のものにしてくれるのか、見守っていきたいところです。
世界最大のハッカソンに参加して賞金100万ドルをゲットしよう！

2025/07/01に世界最大という触れ込みのハッカソンが開催されます。
主催は[Bolt.new](https://bolt.new/)で、AWS・reddit・dev.to・supabase・netlifyほか多くの企業が協賛しています。
賞金がなかなかすごいことになっていて興味をそそられるところです。

# [World’s Largest Hackathon presented by Bolt](https://worldslargesthackathon.devpost.com/)

世界最大のハッカソンへようこそ！
賢明でクリエイティブなあなたに！
総額100万ドルを超える賞金が贈られます！

私たちはいま、一生に一度あるかないかの歴史の転換点に立っています。
ルールが入れ替わり、我々はみな平等になりました。
アイデアさえあれば、ソフトウェア開発スキルが無くても、それを実現できる時代に、歴史上初めて突入したのです。

**Bolt.new**は、想像力と創造力の壁を取り払いました。
作りたいものを言葉にすれば、AIがあなたのビジョンを形にしてくれます。
コーディングは必要ありません。

ここは、ただのハッカソンではありません。
あなたの出発点であり、あなたの教室であり、あなたの資金調達フェーズであり、あなたの飛躍の瞬間です。

## WHO SHOULD DROP EVERYTHING AND JOIN?

今すぐ参加すべき人は誰ですか？

・新世代コーディングの準備が整ったバイブコーダー。
・次のビリオンダラーを目指している企業家。
・何年もかかる学習曲線をスキップしたい学生。
・価値のあるアイデアと、アイデアを実現したい意欲を持つ人全て。

## THE OPPORTUNITY IS UNPRECEDENTED

前例のないチャンスです。

・ワールドクラスのメンターから最先端のAI開発を学ぶことができます。
・本番稼働に耐えうるアプリケーションの開発期間を、数か月から数分に短縮します。
・注目を集めてスタートダッシュを決められます。
・人生を変える賞品や、投資家とのつながりを獲得しましょう。

この夏、このイベントにテクノロジー業界の注目が集まります。
ベンチャーキャピタリスト、テクノロジーインフルエンサー、業界のリーダーたちが予定を待ち受けています。

このハッカソンで立ち上がったプロジェクトは、テクノロジーメディアの話題を独占するでしょう。
クリエイターたちは、本来なら数年かかるはずのコミュニティ構築と構想から完成までの道のりを、一気に突き抜けるでしょう。

Eric Simons「このハッカソンに参加しないということは、この10年で最も登りやすい階段を登らないということです。」

## GET STARTED IN SECONDS. CHANGE YOUR TRAJECTORY FOREVER.

参加方法

・[30秒で登録する](https://worldslargesthackathon.devpost.com/)。
・[AIを使ったアプリを構築する](http://bolt.new/)。
・[イベントに参加する](https://app.getriver.io/bolt)。
・賞金総額100万ドルをゲットする。

## Requirements

Bolt.newを使った、新しいアプリケーションを作成してください。

5月30日より後に開発開始することで『新しい』とみなします。
アプリはBolt.newだけで構築してもいいし、Bolt.new以外を使ってもかまいません。
公開バージョンには、Bolt.newを使用したことを示すバッジが[表示されていることを確認してください](https://worldslargesthackathon.devpost.com/details/badgeguidelines)。


## What to Submit

提出物の内容を解説する約3分の動画を添付してください。
動画はYoutube・Vimeo・Facebook Videoいずれかに公開する必要があります。

審査のために、完全に動作するプロジェクトのURLを添付してください。

プロジェクトにBolt.newバッジを表示してください。

Bolt.newでプロジェクトをビルドする際に使用したメールアドレスを添付してください。

## Prizes

賞金総額$1,012,500

優勝：$100,000 + AWSクレジット25,000 + Espressoモニタ1台
準優勝：$750,00 + AWSクレジット25,000 + Espressoモニタ1台
3位：$50,000 + AWSクレジット25,000 + Espressoモニタ1台
以下10位まで

また、各種部門賞あり。


## Judging Criteria

審査基準

### Potential Impact

プロジェクトがどれだけのインパクトをもたらす可能性を秘めているか。
プロジェクトが取り組んでいる問題が意義深く、効果的な解決方法を提供しているか。
人々に共感を呼び、広く普及する可能性があるか。

### Quality of the Idea

プロジェクトの創造性、独創性。
既に同じプロジェクトが存在しないか、他のソリューションによって既に解決されていないか。

### Technological Implementation

ソフトウェアが高品質であるか。
Bolt.newをどれだけ先進的な、もしくは面白い使い方をしているか。
インフラやコードはしっかり検討されているか。

### Design and User Experience

ユーザエクスペリエンスやデザインは十分に練りこまれているか。


# 感想

賞金総額1億円以上は相当なインパクトがありますね。
日本では[10万とかがんばって200万](https://qiita.com/_sayako21/items/684bad8aaa8ae0ec406c)とかですからね。
でも海外は賞金に大金が出るって勝手なイメージがありましたが、ざっくり調べてみたところでは概ね3万ドルとかで、行っても10万ドルくらいというかんじだったので、実はそこまで日本と桁が違うわけでもなさそうでした。
そんな中で優勝1400万円、総額1億4000万円というのは、世界全体でみても飛び抜けていますね。

ということで、アイデアに自信のある人はぜひとも挑戦してみましょう。

私？
私のアイデアは現在の低性能極まりないAIでは実現不可能なので挑戦しません。
インフラ経験を土台にAWS SAP取得、DevOPS/SREへの橋渡し

## ✅ はじめに

2025年1月、AWS認定ソリューションアーキテクト – プロフェッショナル（SAP）に合格しました。  
スコアは **782点**で、合格ライン（750点）をわずかに超えたスコアでした。
800点台以上が目標でした。間違えたと思える分野含め、3日間復習をしました。

## ✅ なぜ SAP（AWS Certified Solutions Architect – Professional）を取得したのか
- 応募を検討していた多くの企業に「SAPの取得」が応募要件や歓迎条件として明記されていたため、取得を意識しました。
- 学習を進める中で、自分の AWS 設計スキルや理解度を客観的に証明したいという気持ちが強まりました。
- 将来的に DevOps や SRE のエンジニア領域を目指すうえで、知識の土台を固める目的もありました。
---
## ✅ 合格のためにやったこと
## 🔍 わからない用語やサービスはすべて調査
試験に出題されるサービスや専門用語をブラックボックスにせず、一つひとつ徹底的に調べて理解しました。サービスの概要・ユースケース・制限・設計上の注意点などを、自分の言葉で説明できるよう掘り下げました。
## ✅ 「AWS Hands-on for Beginners」シリーズを活用
試験範囲に関係する項目は、手を動かして理解しました。初心者向けの内容ですが、プロフェッショナル試験の土台となる考え方を再確認するのに非常に有効でした。
## ✅マネジメントコンソールや CloudShell でハンズオン検証
試験範囲のすべてのサービスについて、実際に手を動かして設定・構築し、設定項目の意味や影響を体感的に理解しました。
## ✅ 環境構築が難しいサービスはパラメーターを熟読
ハンズオンが難しいサービスについても、設定画面のパラメーターを丹念に読み解き、構成を理解するよう努めました。暗記に頼らず、「身体で覚える」ことを意識しました。
## ✅ Black Belt を何度も読み込む
CLF や SAA 取得時にも活用していましたが、SAP 受験時は特に重点的に繰り返し読み込みました。

## ✅ 「マネジメントコンソール」や「CloudShell」で実際に操作してみる  
書籍や公式資料に書かれた内容を、実際に操作して確認しました。  
この時間は、有意義で知的好奇心を満たすものでした。

---
## ✅ 苦労したこと
- リソースの作成をするが、リソースの削除が容易ではないサービスがありました。
- マネージメントコンソールの操作では解決できないもの
- 複数のサービスが連携する場合、Aの設定がBにどう影響するかわからない
- 想定外の課金発生や、課金されている原因の特定に時間を要したもの
---
## ✅ 結果として得た力
- AWSが推奨するアーキテクチャ設計やユースケース、ベストプラクティスの理解。
- 初めて触れる技術や概念に対しても、**自ら調べ、再現・検証し、理解するスキル**  
- 想定外の課金を発生させないスキル 
- 資格取得に時間と労力を要しました。実務で必要とされるスキルとは、まだ大きな乖離があると感じています。

## ✅ 今後への活用
この経験を通じて、私は「疑問点に対して自ら調べ、試し、理解するサイクル」を実践。
今後、DevOpsやSREの分野で、自動化や運用改善、可観測性の向上に取り組み、より信頼性の高いシステム運用を目指し、これまで以上に技術力の向上に努めていきます。これまで以上に技術力向上を目指し、チーム全体の生産性やサービス品質の向上に貢献できるエンジニアを目指しています。

## ✅ 乗り越えられなかった課題と今後の学び

**受験し、正解と確信できない分野もありました**。
重点的に学習していた分野でも、3問ほどは正解に確信が持てませんでした。
十分に理解していたつもりの領域でも、本質を捉えきれていなかったと感じています。

## ✅  未踏の領域を、少しずつ自分の力に変えていくために

ソリューションアーキテクトプロフェッショナルには合格しましたが、DevOpsやSREのエンジニアとしての領域は、まだ自分の中で十分にこなせていません。
一つ一つ経験と理解を積み重ね、DevOpsやSREの分野でも少しずつ実践力を高めていけるよう努力します。
main以外の不要なブランチを一括削除

完全僕の備忘録です。
いっぱいリリースしたあと、いっぱいブランチ残っちゃうじゃないですか。
それを一括削除するコマンドです。

```
git checkout main && git branch | grep -v "main" | xargs git branch -D
```

## 解説
```
git checkout main
```
現在のブランチを main に切り替えます。

```
git branch | grep -v "main"
```

git branch の出力結果から main ブランチを除外します。grep -v は指定された文字列（ここでは main）を含む行を除外するコマンドです。

```
xargs git branch -D
```

最後に、xargs を使って、git branch -D コマンドに残りのすべてのブランチを渡します。
git branch -D はブランチを強制的に削除するコマンドです。-D オプションは、未マージの変更があるブランチでも削除する強制オプションです。
fx-72Fで日数・期日を求める

## 日数計算
前回の[fx-72Fで曜日を求める](https://qiita.com/harycurl/items/233a36df76b32fc6b26f)に続き、[グラフ電卓のMicroPythonで曜日・日数を求める](https://qiita.com/harycurl/items/19cd7b93e99d857420ce)の日数計算についてプログラムを作ってみる。

日数計算自体は前回の[fx-72Fで曜日を求める](https://qiita.com/harycurl/items/233a36df76b32fc6b26f)とほぼ変わらない。日付をシリアル値に変換するため底関数を使うだけである。
ただし変数が7つ（A,B,C,D,X,Y,M）しか使えないため、使い回す必要がある。

開始日と終了日に同じ変数を用いてもよいが、それだと入力時に分かりづらくなるため、開始日の変数をA、終了日の変数をXとし、Rnd処理で引く0.5をY、一時的に年・月・日を入れておく変数はB・C・D、シリアル値を求めたらそれぞれ変数A・Xに戻して最後にX-Aを行う。

``` :日数計算
Fix 0:
?→A:
0.5→Y:
Rnd(A÷10000-Y)→B:
Rnd((A-10000B)÷100-Y)→C:
A-10000B-100C→D:
If C≦2: Then B-1→B:C+12→C:IfEnd:
Rnd(365.25×B-Y)+Rnd(B÷400-Y)-Rnd(B÷100-Y)+Rnd(30.59×(C-2)-Y)+D→A:
?→X:
Rnd(X÷10000-Y)→B:
Rnd((X-10000B)÷100-Y)→C:
X-10000B-100C→D:
If C≦2: Then B-1→B:C+12→C:IfEnd:
Rnd(365.25×B-Y)+Rnd(B÷400-Y)-Rnd(B÷100-Y)+Rnd(30.59×(C-2)-Y)+D→X:
X-A→M:
M:
Norm 0
```

### 入力値を改変しないように改良
前述のプログラムでは入力したA・Xにシリアル値を書き戻したが、結果を変数Mに入れるのであれば、直接Mに対してシリアル値を加減算すればよい。
ということで、AやXの値を壊さずに日数を求めたければ以下のように直せばよい（8行目と最後から3行目）。
``` :日数計算(改良)
Fix 0:
?→A:
0.5→Y:
Rnd(A÷10000-Y)→B:
Rnd((A-10000B)÷100-Y)→C:
A-10000B-100C→D:
If C≦2: Then B-1→B:C+12→C:IfEnd:
0-(Rnd(365.25×B-Y)+Rnd(B÷400-Y)-Rnd(B÷100-Y)+Rnd(30.59×(C-2)-Y)+D)→M:
?→X:
Rnd(X÷10000-Y)→B:
Rnd((X-10000B)÷100-Y)→C:
X-10000B-100C→D:
If C≦2: Then B-1→B:C+12→C:IfEnd:
M+(Rnd(365.25×B-Y)+Rnd(B÷400-Y)-Rnd(B÷100-Y)+Rnd(30.59×(C-2)-Y)+D)→M:
M:
Norm 1
```

## 期日を求める（簡易バージョン）
[グラフ電卓のMicroPythonで曜日・日数を求める](https://qiita.com/harycurl/items/19cd7b93e99d857420ce)では年月日と日数を入力させて期日を算出したが、かなり煩雑な処理になっているため、とりあえず一般電卓の期日計算のように月日と日数から期日を求める簡易バージョン（うるう日非対応）を作ることにした。

### シリアル値計算
3月1日を1、2月28日を365とするシリアル値に変換する。
最初に求められるシリアル値は3月1日を31としたものであるため、334を足し（この時点で3月1日が365となる）、日数を加減した後に365で割った余りを出し（3月1日は0となる）、さらに1を足す。
```:シリアル値計算
Fix 0:
?→A:
0.5→Y:
Rnd(A÷100-Y)→C:
A-100C→D:
IF C≦2:Then C+12→C:IfEnd:
Rnd(30.59×(C-2)-Y)+D→M:
M+334→M:
M-Rnd(M÷365-Y)×365+1→M:
M:
Norm 1
```

### シリアル値の逆変換
シリアル値がうまく生成されることを確認したら、月日形式への逆変換を作る。
今度は3月を起点として前月までの日数が 月数×30.6 を四捨五入したものであることを利用する。
[グラフ電卓のMicroPythonで曜日・日数を求める](https://qiita.com/harycurl/items/19cd7b93e99d857420ce)では日数が超えた時点でループを抜ける処理をしたが、今回は12か月分回し切り、当月末までの日数より大きい場合、仮月に1を足す処理を行う。終了後に仮月に3を足し、さらに1月・2月を戻す処理を行う。
答の表示は下2桁が日、その上1～2桁が月となる。

```:シリアル値→逆変換
Fix 0:
?→A:
0.5→Y:
Rnd(A÷100-Y)→C:
A-100C→D:
IF C≦2:Then C+12→C:IfEnd:
Rnd(30.59×(C-2)-Y)+D→M:
M+334→M:
M-Rnd(M÷365-Y)×365+1→M:
0→C:
For 1→X To 12:If M>Rnd(X×30.6):Then C+1→C:IfEnd:Next:
M-Rnd(C×30.6)→D:
C+3→C:If C≧13:Then C-12→C:IfEnd:
100C+D→M:
M:
Norm 1
```

### 期日計算
シリアル値の逆変換がうまく行けば、あとは日数を入力させて加減すればよい。
上記のプログラムに3行目と10行目を足しただけである。

```:期日計算
Fix 0:
?→A:
?→B:
0.5→Y:
Rnd(A÷100-Y)→C:
A-100C→D:
IF C≦2:Then C+12→C:IfEnd:
Rnd(30.59×(C-2)-Y)+D→M:
M+334→M:
M+B→M:
M-Rnd(M÷365-Y)×365+1→M:
0→C:
For 1→X To 12:If M>Rnd(X×30.6):Then C+1→C:IfEnd:Next:
M-Rnd(C×30.6)→D:
C+3→C:If C≧13:Then C-12→C:IfEnd:
100C+D→M:
M:
Norm 1
```
なお、このプログラムもエラー処理を一切していないため、範囲外の値を入力すると予期せぬ答を出す可能性がある。
Aには月日4桁（MMDD、1桁月の場合頭の0は省略）、Bには-365～365の日数（整数値）が入力されることを想定している。

## プログラム容量が限られているのでこれが限界か
前回、今回と3本のプログラムを作ったが、消費バイト数は
- 曜日計算：149
- 日数計算：277
- 期日計算：190

となり、全680バイト中、残りは64バイトしかない。

冗長なことをやっている部分は多少削減もできる（乗算記号の省略等）だろうが、所詮本機でできるプログラムはこの程度かもしれない。

とはいえ、この3機能だけでも十分使い道はある。fx-72Fをお持ちの方は試してみてほしい。
【初心者向け】Windowsで指定サイズのデータをTCP/UDPで送信してみた（Ncat(nc)編）

# 【初心者向け】Windowsで指定サイズのデータをTCP/UDPで送ってみた（Ncat(nc)編）

---

ネットワーク検証などでお困りの方の参考になればと思います。

この記事では、Windows環境に「Ncat（nc）」を導入し、**指定したサイズのデータをTCPまたはUDPで送信する方法**を解説します。

Ncatは、セキュリティツールとして知られる`nmap`に同梱されており、**公式サイトから安全に入手可能**です。  
（GitHub等で配布されている`nc.exe`など一部セキュリティポリシーによりダウンロードできない場合でも、nmap公式版は使用できることがあります）

本記事では、インストールからコマンド例まで、初心者向けに丁寧に解説していきます。

---

## ✅ この記事はこんな人向け

- WindowsでTCP/UDP通信のテストをしたい方
- 指定サイズのデータを送信してみたい方
- 簡単に`nc`コマンドを試したい方

---

## 1. Nmapのインストール（Ncat含む）

まずは、nmap公式サイトからインストーラーをダウンロードします。

👉 [https://nmap.org/download.html](https://nmap.org/download.html)  
![nmap公式サイト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4084251/e41e9a0a-269c-4eb4-813b-1b2926af810c.png)

### ▼ インストール手順

1. ページ下部の「Microsoft Windows binaries」からインストーラー（`nmap-<version>-setup.exe`）をダウンロード  
　![インストーラー選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4084251/3e285053-1fc5-4b31-bd38-49979b184fa0.png)
2. `.exe` を実行し、「次へ」をクリックして進めます（基本はそのままでOK）
3. インストール先に `ncat.exe` が含まれています（例：`C:\Program Files (x86)\Nmap\`）

> 見つからない場合は、エクスプローラーで「ncat」と検索してください。  
![ncat.exeの場所](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4084251/320bc735-582d-43bf-b6c5-71d2cd97a231.png)

---

## 2. `ncat.exe` の使い方

取得した `ncat.exe` は以下のいずれかの方法で利用できます。

- 作業ディレクトリにコピーして使う  
- システム環境変数の `PATH` に通して、どこからでも実行可能にする

---

## 3. テストデータ（text.txt）の準備

送信するデータサイズに応じてテキストファイルを作成します。  
たとえば「A」を1000文字分送信したい場合、以下のように作成できます。(PowerShellの例）

```
powershell -Command "Write-Output ('A'*1000) > text.txt"
```

> ※ファイルがなくても送信は可能です。後述するクライアントのコマンドで `< text.txt` を省略すると、標準入力から手動で文字列を打ち込んで送信できます。

---

## 4. UDPでデータ送信してみる

以下の手順で、UDP通信をテストします。  
※すべて「**コマンドプロンプト（cmd）**」で実行してください。

### ▼ サーバー側（受信）

```
ncat.exe -lu -p 12345
```

- `-l`: 受信（Listen）
- `-u`: UDPモード
- `-p`: ポート番号指定

---

### ▼ クライアント側（送信）

```
ncat.exe -u 192.168.1.10 12345 < text.txt
```

- `-u`: UDPモード
- `< text.txt`: テキストファイルの内容を送信

> UDPはコネクションレスなため、**受信側が起動していないとパケットは破棄されます**。  
> また、**MTU（最大転送単位）を超えるサイズはOSによって分割される**場合があります。

---

## 5. TCPでデータ送信してみる

次にTCP通信の送信方法です。こちらも**コマンドプロンプト**で実行してください。

### ▼ サーバー側（受信）

```
ncat.exe -l -k -p 12345
```

- `-l`: 受信（Listen）
- `-k`: 接続後も待ち受けを継続（複数接続対応）
- `-p`: ポート番号指定

---

### ▼ クライアント側（送信）

```
ncat.exe 192.168.1.10 12345 < text.txt
```

> TCPはコネクション型のため、**受信側が起動していないと接続できません**。

---

## 🔚 おわりに

Ncat（nc）を使えば、Windows環境でも簡単にTCP/UDP通信のテストができます。  
特に**パケットキャプチャやMTU検証、ファイアウォール検査**などの場面で非常に役立ちます。

「とにかく手軽に試してみたい」方は、ぜひ今回紹介した手順を活用してみてください。
プロデル、調査 その32

# 概要
プロデルが、CLRらしいので、調べて見た。
練習問題やってみた。

# 練習問題
グラフでsin波を描け。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c3a8ab4b-7c81-4951-aad9-c3fcf8658969.png)


# サンプルコード

```
「チャート.rdr」を参照する

チャート1というチャートを作る
	チャート1をクリアする
	チャート1のSizeは{500,500}
	チャート1のDockは「全体」
	チャート1に凡例を作る
タイトル1というタイトル(「タイトル」)を作る
シリーズ線1というシリーズを作る
	シリーズ線1のChartType=「Line」
	シリーズ線1のLegendText =「sin」
	シリーズ線1の線幅=2
	シリーズ線1の印サイズは12
	シリーズ線1の凡例表示は○
	数１は０
	40回数に繰り返す
		数１=数１　＋　0.3
		シリーズ線1に(データポイント(数, サイン（数１）)を作ったもの)を加える
	そして
エリア1というチャートエリアを作る
	エリア1のAxisXのTitle=「X軸」
	エリア1のAxisYのTitle=「Y軸」
	チャート1にタイトル1を加える
	チャート1にエリア1を加える
	チャート1にシリーズ線1を加える

メイン画面を表示する
待機する

メイン画面とは
	ウィンドウを継承する
はじめの手順
	初期化する
	チャート1を貼る
終わり
	初期化する手順
		この実質大きさは｛600,394｝
		この内容は「棒グラフテスト」
		初期化開始する
		初期化終了する
		この設計スケール比率は｛144,144｝
終わり
終わり
 




```

以上。
ONES Wikiのコメント欄でチームのコミュニケーションをもっとスムーズに！

## はじめに
[ONES Wiki](https://systemcon.co.jp/products/oneswiki/)は、チームメンバーが共同で情報を作成し、共有できる便利なコミュニケーションツールです。中でも「コメント欄」は、リアルタイムで意見交換や、フィードバックができ、チームのコミュニケーションを強力にサポートしてくれる機能です。

今回は、ONES Wikiのコメント欄の使い方と活用ポイントを紹介します。

## コメントの基本機能
ONES Wikiのページの下部にコメントが入力できます。
このコメント機能は、ページ本文には入れる程でもないメモや補足、参考にしたWebページのリンク、画像などを追加したり、他のメンバーとコミュニケーションをするのに役立ちます。

### 主な特徴はこんな感じ
* **リアルタイムな共有**： コメントはすぐにチームメンバーに共有されるので、スピーディーなやり取りが可能！
* **スレッド形式**： コメントに対して返信ができるので、会話が見やすく整理できる！
* **メンション機能**： 「@」を付けてメンバーを指定でコメントすると、その人に**通知が送信**される。直接意見を聞いたり、依頼を伝えるときにとても便利ですよ。

![主な特徴.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483972/595878be-38d4-48e8-84d1-6e74a53ea735.png)

## コメントを追加してみよう！
コメントの追加方法はとてもカンタンです。
1. コメントを追加したいページを開きます。
2. ページの下にある「コメント」をクリック。
3. コメント入力欄に自由に記入して投稿すればOK！

![コメントの追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483972/d928128f-158a-4546-9b13-236f2a132942.png)

コメント内でも、ページ編集時と同様に文字の装飾など（太字、斜体など）の効果を付けることができます。強調したい部分も見やすく工夫できますよ。

![コメントに効果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483972/2aabd53c-75e5-4b65-bb82-651f839e49ca.png)

## メンション機能を使いこなそう！
特定のメンバーに通知を送りたい時は、「@」マークをクリックしてメンバーを指定します。

メンバー名の候補がポップアップ表示されるので、該当メンバーを選びましょう。検索ボックスに直接メンバー名を入力して指定することもできます（候補を絞り込むことができます）。

### こんな時に便利
* 特定メンバーにタスクをお願いしたい
* アドバイスが欲しい
* レビューや承認をお願いしたい

通知を受けたメンバーは、通知と一緒にページのURLが届くので、リンクをクリックするだけで該当ページを開けます。ページを探す手間がなく、スムーズに情報共有ができますね！

![メンション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483972/96beea5a-d67d-4974-bba9-55cc4bde7714.png)

## まとめ
ONES Wikiのコメント欄は、単なるメモやコメント以上に使えます。チームの情報共有とコミュニケーションが円滑に進められる協力なツールです。

ファイルを送り合ったり、メールでやり取りするよりもずっと簡単でスピーディ。
ぜひONES Wikiのコメント欄を活用して、チームの生産性をもっとアップさせちゃいましょう！
null のブランド型は作れない

null に想いを込めたコードベースでその想いが込められたものだけ区別するためにブランド型にできないか試したのですが、できないようです

---

まず、基本的なブランド型の使い方を [Branded Type ベストプラクティス 検索 #TypeScript - Qiita](https://qiita.com/uhyo/items/de4cb2085fdbdf484b83) で確認してみます

```ts
const userIdBrand = Symbol();
const postIdBrand = Symbol();
type UserId = string & { [userIdBrand]: unknown };
type PostId = string & { [postIdBrand]: unknown };

// 説明用にUserIdを作る
const myId = "uhyo" as UserId;

// これは型エラーになる
const postId: PostId = myId;
```

これを `string` ではなく `null` に適用してみます

```ts
const PoBrand = Symbol();
const GaBrand = Symbol();

type Po = null & { [PoBrand]: unknown };
type Ga = null & { [GaBrand]: unknown };

// Po と Ga の型は別のブランド型だがエラーなく代入できる
const po = null as Po;
const nullPo: Ga = po;
```

この理由は単純で `null & {}` が `never` と判断されるためです。そのため `Po` と `Ga` の型はどちらも `never` となり相互に代入が可能になります

ではなぜこのように変換されてしまうのでしょうか？
その前になぜ `string & {}` が有効な記述なのかを考えてみます。これはシンプルに `String` が `Object` を継承しているからですね

```ts
const str = new String()

str instanceof String // true
str instanceof Object // true

const obj = new Object()

obj instanceof String // false
obj instanceof Object // true
```

そのため、プロトタイプ拡張が可能でその場合の方の表現が `string & {}` になるわけです

```ts
String.prototype.hoge = 'hoge'
console.log(''.hoge) // 'hoge' が出力される

// 上記のコードから実際に推論されるわけではないが、この定義と等しい
type HogeString = string & { hoge: 'hoge' }
```

これに対して `null` は `Object` を継承しておらず当然のことながらプロトタイプ拡張はできません

```ts
null instanceof Object // false

null.prototype.hoge = 'hoge' // エラーになる
```

ということで `null & {}` は発生することがあり得ず、そのためあり得ないを表現する `never` 型になる、というわけでした

### 学び

とりあえず、 `null` に想いを込めるのはやめましょう

### おまけ

`null` は `Object` を継承していないんですが、 [`typeof` で確認するとなぜか 'object' になるみたいです](https://developer.mozilla.org/ja/docs/Glossary/Null)。面白いですね
【2025年最新版】ローコード開発のベストプラクティス


## 1. 「作る前に捨てる」フェーズ：構想を削ぎ落とす
- **目的を1文に絞る**
  - 例：「営業が毎日の報告を3分で済ませられるアプリ」
- **KPIを明文化**
  - 時間削減率、入力完了率など可視化できるものにする
- **「全部作らない」ことを前提にする**
  - MVP（最小構成）に絞る：ユーザー1人・機能1つでOK

---

## 2. ノーコード/ローコードツールの選定
- **目的ベースで選ぶのが鉄則**

| 目的             | 推奨ツール                             |
|------------------|----------------------------------------|
| UI重視           | Glide, Adalo, OutSystems               |
| 業務効率化       | Power Apps, Kintone, Retool, AppSheet |
| データ連携重視   | Make, Zapier, n8n                      |
| 分析・可視化     | SmartDB, QuickBase, Notion + API       |

> **💡 ポイント**：自前で拡張したくなる時だけコードを足す（コード化は最後の手段）

---

## 3. 0→1の開発：超短サイクルMVP
- **「3日以内に使える」ものを作る**
- 最小構成：
  - 画面：最大3つ（例：入力 / 一覧 / 詳細）
  - ユーザー：1部署 or 1人
- **フィードバックは“その場”で聞く**
- **ドキュメントは不要**
  - 操作動画（1分以内） or スクリーンショットで十分

---

## 4. 改善サイクル：週単位で運用・改善
- 毎週1回：ユーザーと15分ミーティング
  - 何が便利だったか、不便だったかを直接聞く
- フィードバックはNotionやSlackで即記録
- タスク管理しすぎず、「改善ログ」として残す

---

## 5. 拡張判断：コード化 or 他ツール連携の基準
- **処理が複雑化したら** → API連携 or 外部SaaSと接続
- **動作が重くなったら** → 特定処理だけコードに移行
- **セキュリティ要件が増したら** → IT部門と連携 or 有償版導入

---

## 🔁 継続のポイント
- **使われない機能は削除**：追加より削除の方が重要
- **KPIが改善しなくなったら作り直す**：無駄な改修はやらない
- **常に「現場の人」と並走する**：IT部門主導にさせない

---

## 🧠 よくあるムダ（排除すべきもの）

| ムダな工程         | なぜ不要か                                     |
|--------------------|-----------------------------------------------|
| 詳細な要件定義     | 実際に触ってもらうと前提が変わるため           |
| 画面モック長期検討 | 動くものを見せる方が早く正確                 |
| 操作マニュアル整備 | UIが直感的なら動画1本で済む                   |
| 完璧なデータ設計   | 最初は「必要な項目だけ」で運用して改善すべき   |
| テスト計画書作成   | 実際のユーザーが触って問題なければ十分         |

---

## ✅ まとめ：成功の鉄則

- 🎯 **目的とKPIを最小限に絞る**
- ⚡ **まずは動くものを3日で出す**
- 🔄 **週1回の小さな改善サイクル**
- 🧹 **機能は削りながら洗練させる**
- 👥 **「使う人」と常に並走する**

---