OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonで実現するストラテジーパターン：振る舞いの切替と疎結合設計


## 概要

**ストラテジーパターン（Strategy Pattern）**は、  
「あるアルゴリズムや処理の振る舞いを、動的に差し替え可能にする設計手法」である。

このパターンを使うことで、`if-else` や `switch` 文による処理分岐を排除し、  
**オブジェクト指向の原則に基づいた、拡張に強い柔軟な構造**を構築できる。

本稿では、Pythonでの実装方法と、現場で活かせるパターン適用の実務例を紹介する。

---

## 1. なぜストラテジーが必要か？

### ❌ 条件分岐による処理切替

```python
if payment_type == "credit":
    process_credit(payment)
elif payment_type == "paypal":
    process_paypal(payment)
```

→ **新しい支払い手段を追加するたびに、条件分岐が膨張し保守性が低下**

---

## 2. ストラテジーパターンの基本構造

### ✅ 共通のインタフェース

```python
class PaymentStrategy:
    def pay(self, amount):
        raise NotImplementedError
```

### ✅ 具象戦略クラス

```python
class CreditCardPayment(PaymentStrategy):
    def pay(self, amount):
        print(f"Paid {amount} via Credit Card")

class PayPalPayment(PaymentStrategy):
    def pay(self, amount):
        print(f"Paid {amount} via PayPal")
```

### ✅ コンテキスト（呼び出し側）

```python
class PaymentProcessor:
    def __init__(self, strategy: PaymentStrategy):
        self.strategy = strategy

    def process(self, amount):
        self.strategy.pay(amount)
```

### ✅ 実行例

```python
processor = PaymentProcessor(PayPalPayment())
processor.process(1000)
```

---

## 3. 動的切り替えの実装と利点

```python
strategy_map = {
    "credit": CreditCardPayment(),
    "paypal": PayPalPayment(),
    # 他の戦略も追加可能
}

def get_processor(method):
    return PaymentProcessor(strategy_map[method])
```

- **条件分岐を排除**
- **拡張時に既存コードを変更しない（OCPの実現）**
- **戦略のテストや切り替えが容易**

---

## 4. 実務ユースケース

### ✅ 並列アルゴリズムの切り替え

```python
class SortStrategy:
    def sort(self, data): ...

class QuickSort(SortStrategy):
    def sort(self, data): return sorted(data)

class BubbleSort(SortStrategy):
    def sort(self, data):
        # 実装略
        return data
```

---

### ✅ データ出力形式の動的切り替え

```python
class ExportStrategy:
    def export(self, data): ...

class CSVExporter(ExportStrategy):
    def export(self, data): print("Exporting as CSV")

class JSONExporter(ExportStrategy):
    def export(self, data): print("Exporting as JSON")
```

---

## 5. Pythonならではの実装スタイル：関数戦略

### ✅ 戦略をクラスではなく関数で表現

```python
def credit_strategy(amount):
    print(f"Credit: {amount}")

def paypal_strategy(amount):
    print(f"PayPal: {amount}")

def process_payment(strategy, amount):
    strategy(amount)
```

→ **軽量かつ関数型志向な設計**も可能  
→ 小規模・一時的な切り替えに有効

---

## 6. よくある誤用と対策

### ❌ インタフェースを定義せず共通性が破綻

→ ✅ `Strategy` インタフェース（抽象基底クラス or プロトコル）を定義すべき

---

### ❌ コンテキスト側が戦略の中身を知ってしまう

→ ✅ コンテキストは `strategy.pay()` のように**抽象的に操作**するべき

---

## 結語

ストラテジーパターンは、**「振る舞いを切り替えられる構造を、構文ではなく設計で実現する」ための手法**である。

- 分岐を排除し、拡張に強いアーキテクチャを構築  
- 戦略ごとのコードを明示的に分離し、単体テストしやすくする  
- 関数ベース・クラスベース・DIコンテナと組み合わせた**多様な設計**が可能

**Pythonicとは、“制御の流れすらオブジェクトとして管理する”ことであり、  
ストラテジーパターンはその意図を、構造として洗練する強力な手段である。**
Pythonにおけるファクトリパターンの実装と応用：オブジェクト生成の戦略的分離


## 概要

**ファクトリパターン（Factory Pattern）**は、  
「オブジェクトの生成方法をカプセル化し、呼び出し側から分離する」ための設計手法である。

直接コンストラクタを呼ぶのではなく、**生成をファクトリ経由にすることで、  
柔軟性・再利用性・拡張性が高まり、OOP設計における依存関係の制御が容易になる。**

本稿では、Pythonで実現するファクトリパターンの基礎から、  
動的な型選択・DIとの併用・抽象化による戦略的な設計法まで解説する。

---

## 1. なぜファクトリが必要か？

### ❌ 呼び出し側が直接型を決めてしまう

```python
if shape_type == "circle":
    shape = Circle()
elif shape_type == "square":
    shape = Square()
```

→ 呼び出し側にロジックと型の知識が集まり、**密結合かつ変更耐性が低下**

---

## 2. シンプルなファクトリ関数

```python
def shape_factory(shape_type):
    if shape_type == "circle":
        return Circle()
    elif shape_type == "square":
        return Square()
    raise ValueError("Unknown shape")
```

→ 呼び出し側：

```python
shape = shape_factory("circle")
shape.draw()
```

→ **生成ロジックの隠蔽 + 呼び出し側の責務分離**

---

## 3. クラスベースのファクトリ（インタフェース拡張可能）

```python
class ShapeFactory:
    def create(self, shape_type):
        match shape_type:
            case "circle": return Circle()
            case "square": return Square()
            case _: raise ValueError("Invalid shape")
```

→ クラス化により**設定依存の注入**や**バインディング変更**が容易になる

---

## 4. 登録型ファクトリ：拡張性の高い設計

```python
class Factory:
    registry = {}

    @classmethod
    def register(cls, key, klass):
        cls.registry[key] = klass

    @classmethod
    def create(cls, key, *args, **kwargs):
        if key not in cls.registry:
            raise ValueError(f"{key} is not registered")
        return cls.registry[key](*args, **kwargs)
```

```python
Factory.register("circle", Circle)
Factory.register("square", Square)

shape = Factory.create("circle")
```

→ **Open/Closed Principle（拡張に開き、修正に閉じる）** を満たす柔軟な構造

---

## 5. 実務におけるユースケース

### ✅ 設定ファイルによるサービス切替

```python
if config["db"] == "sqlite":
    db = SqliteRepository()
elif config["db"] == "postgres":
    db = PostgresRepository()
```

→ ✅ ファクトリにロジックを集約し、アプリ本体は依存を意識しない構造に

---

### ✅ APIクライアントのバージョン切替

```python
ApiClientFactory.create("v1")  # returns V1Client
ApiClientFactory.create("v2")  # returns V2Client
```

---

## 6. DIとの組み合わせによる抽象化の強化

```python
class Controller:
    def __init__(self, factory: ShapeFactory):
        self.factory = factory

    def handle(self, shape_type):
        shape = self.factory.create(shape_type)
        shape.draw()
```

→ **生成ロジックの注入とテスト分離が実現**

---

## 7. よくある誤用と対策

### ❌ if文が増殖してswitch文のようになる

→ ✅ **辞書登録型や登録制ファクトリ**で分岐を排除する

---

### ❌ 型情報が呼び出し元に漏れている

→ ✅ 呼び出し元は「使う」ことに集中し、「作る」ことはファクトリへ委任する

---

## 結語

ファクトリパターンは、「生成」の責務を明確に切り出すことで、  
**構造の単純化と変更耐性の向上を同時に実現する設計戦略**である。

- オブジェクト生成を制御し、呼び出し元との結合を緩める  
- 動的選択・条件分岐・設定反映の処理を整理  
- DI・インタフェース分離との組み合わせで**テスト容易性も強化**

**Pythonicとは、“オブジェクトの生成さえも意図として表現する” ことであり、  
ファクトリパターンはその実装手段として最も普遍的かつ実用的な形で存在する。**
webstorm で NextJsのデバッグ設定方法

# webstorm で NextJsのデバッグ設定方法

# PC構成
- MacBookPro M2
- Webstorm 

# 背景
webstorm でデバッグするのに手こずったから。

# 設定方法
1. 実行（※1） > 構成の編集
1. 構成タブと、ブラウザ/LiveEditタブを下図のように修正し、OKボタン押下。![Group 1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145434/8e92e110-e211-4e7c-ba72-6fe2b84eb22f.jpeg)
1. 画面上部のデバッグボタンをクリックすると、Chrome（ヘッドレスモード？）が起動します。![スクリーンショット 2025-04-07 20.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145434/5987f655-f0ba-4376-ba43-a4031dfac4ef.png)

あとは好きな位置にブレークポイントを設定すればそこで止まります。

※
1: 設定（⌘,）ではなく、画面上部メニューの 実行（英語:Run > Edit Configurations.）
Pythonにおける依存性注入（DI）の設計：拡張性とテスタビリティの両立



## 概要

**依存性注入（Dependency Injection, DI）**は、  
オブジェクトの依存対象（サービス、設定、外部リソースなど）を  
**内部で生成せず、外部から注入する設計手法**である。

これは「疎結合」「テスタビリティ」「再利用性」「設定柔軟性」など、  
ソフトウェア品質において不可欠な設計戦略であり、  
Pythonでも実用的に導入・応用可能である。

---

## 1. なぜDIが必要か？

### ❌ 依存を内部でハードコード

```python
class Service:
    def __init__(self):
        self.repo = FileRepository()
```

→ **再利用不可、モック困難、変更不能な密結合コード**

---

### ✅ 外部から依存を注入

```python
class Service:
    def __init__(self, repo):
        self.repo = repo
```

→ 依存対象の制御権が呼び出し元に移る  
→ **柔軟性・テスト容易性・動的切替が可能**

---

## 2. DIの3つの形態

| タイプ         | 概要                                       |
|----------------|--------------------------------------------|
| コンストラクタ注入 | `__init__()` に依存を渡す                        |
| セッター注入     | プロパティやメソッド経由で依存を注入             |
| インタフェース注入 | オブジェクトにインジェクションを要求させる          |

Pythonでは主に**コンストラクタ注入**が使われる

---

## 3. DIを使ったテスト容易な設計

```python
class UserService:
    def __init__(self, repository):
        self.repository = repository

    def get_user(self, id):
        return self.repository.find(id)
```

### ✅ テスト時

```python
class MockRepository:
    def find(self, id):
        return {"id": id, "name": "Mock User"}

service = UserService(MockRepository())
assert service.get_user(1)["name"] == "Mock User"
```

→ **外部依存を切り離すことで、テストをシンプルかつ高速に保てる**

---

## 4. DIコンテナの導入（例：`injector`）

```bash
pip install injector
```

```python
from injector import Module, Injector, singleton, inject

class Repository:
    def get(self): return "RealData"

class AppModule(Module):
    def configure(self, binder):
        binder.bind(Repository, to=Repository, scope=singleton)

class Service:
    @inject
    def __init__(self, repo: Repository):
        self.repo = repo

injector = Injector([AppModule()])
svc = injector.get(Service)
```

→ DIコンテナにより **依存の自動解決とスコープ管理** が可能

---

## 5. DIを活かす設計のポイント

- **明示的な依存関係の記述**：依存を隠蔽しない
- **インターフェースによる抽象化**：具象型に縛られない
- **呼び出し側が注入責任を持つ**：構成の柔軟性を高める

---

## 6. 実務的ユースケース

### ✅ リポジトリの切替（DB vs メモリ）

```python
class MemoryRepo:
    ...

class DBRepo:
    ...
```

→ 実行環境ごとに `UserService(repo=...)` で切り替え

---

### ✅ APIクライアントのMock化

```python
class APIClient:
    def fetch(): ...

class MockClient:
    def fetch(): return {"mock": True}

svc = SomeService(client=MockClient())  # テストで注入
```

---

## 7. よくある誤用と対策

### ❌ シングルトン依存を直接呼ぶ

```python
class Service:
    def __init__(self):
        self.config = Config.get_instance()  # 💥 密結合
```

→ ✅ `Service(config)` と注入可能にすべき

---

### ❌ コンストラクタが複雑すぎる

→ ✅ **依存は集約しすぎず分割して管理する（ファサード/ドメインごと）**

---

## 結語

**DIとは“設計における依存の制御権を呼び出し側に戻す”こと**であり、  
それは単なる技術的選択ではなく、**責務分離・可読性・柔軟性を実現する設計原則**である。

- 密結合を解消し、変化に強い構造を構築  
- テストしやすいコードベースを標準化  
- 明示的で動的な依存制御が拡張性を担保する

**Pythonicとは、“動的で柔軟な言語特性の中に、明確な設計の意志を持ち込む”ことであり、  
DIはその意志を、構造として体現する最適な手段である。**
Pythonでの列挙型設計：Enumによる意味論と安全性の強化


## 概要

列挙型（Enum）は、複数の選択肢を意味づけ付きで表現するための構造であり、  
**「値の集合」に対する意味論的制御と、安全性・保守性の両立**をもたらす。

Python 3.4以降の標準ライブラリ `enum` モジュールにより、  
定数群の羅列から脱却した、**意図を持つ設計**が可能となる。

本稿では `Enum` の基本構文から、`IntEnum`, `auto`, フラグの応用、シリアライズ、実務設計パターンまで  
**列挙型による堅牢で読みやすいコード構築法**を解説する。

---

## 1. 列挙型とは？

列挙型は「定数の名前」と「実際の値」をペアで定義する構造であり、  
以下のような従来の定数定義の欠点を克服する。

```python
# 従来
STATUS_ACTIVE = 1
STATUS_INACTIVE = 2
STATUS_SUSPENDED = 3
```

→ ✅ `Enum` を使うことで、**型・意味・可読性の三位一体な制御**が可能

---

## 2. 基本的な `Enum` の定義と使用

```python
from enum import Enum

class Status(Enum):
    ACTIVE = 1
    INACTIVE = 2
    SUSPENDED = 3
```

```python
s = Status.ACTIVE
print(s.name)   # 'ACTIVE'
print(s.value)  # 1
```

- `Enum` の各メンバーは **ユニークかつ不変**
- 名前による比較が可能で、**Magic numberの排除**につながる

---

## 3. `IntEnum` と整数互換性

```python
from enum import IntEnum

class Priority(IntEnum):
    LOW = 1
    MEDIUM = 2
    HIGH = 3
```

```python
assert Priority.HIGH > Priority.LOW  # True
```

- `IntEnum` は **int としての比較やソート**が可能
- DBとの連携やソート処理を伴う場合に有用

---

## 4. `auto()` による自動割り当て

```python
from enum import Enum, auto

class Mode(Enum):
    READ = auto()
    WRITE = auto()
    EXECUTE = auto()
```

→ `auto()` によって値を意識せず定義できる  
→ 意味論に集中できる構文美とメンテナンス性を両立

---

## 5. フラグ型：ビット演算による複合状態管理

```python
from enum import Flag, auto

class Permission(Flag):
    READ = auto()
    WRITE = auto()
    EXECUTE = auto()

perm = Permission.READ | Permission.WRITE
print(perm)  # Permission.READ|WRITE
```

- `Flag` により **複数状態の合成・検査**が可能
- 権限・状態ビット・オプション設定に適用可能

---

## 6. 実務でのユースケース

### ✅ 状態管理（ステータスマシンの定義）

```python
class UserStatus(Enum):
    ACTIVE = "active"
    INACTIVE = "inactive"
    BANNED = "banned"
```

---

### ✅ REST API のフィルタ条件

```python
class SortOrder(Enum):
    ASC = "asc"
    DESC = "desc"
```

---

### ✅ 型ヒントとの併用で明示的制約

```python
def get_users(status: UserStatus) -> list:
    ...
```

→ **不正な値の流入を事前に防ぐ設計**

---

## 7. シリアライズ/デシリアライズへの対応

```python
import json

class Role(Enum):
    ADMIN = "admin"
    USER = "user"

r = Role.ADMIN
json_str = json.dumps({"role": r.value})  # → {"role": "admin"}
```

→ Enumは `.value` を使ってシリアライズ  
→ `.value` → コンストラクタで復元

```python
Role("admin")  # → Role.ADMIN
```

---

## 8. よくある誤用と対策

### ❌ 値だけで比較する

```python
if user.status == "active":  # NG
```

→ ✅ Enum での比較は名前ベースで行う

```python
if user.status == UserStatus.ACTIVE:
```

---

### ❌ DBや外部APIとの整合性を意識しない

→ ✅ `IntEnum` や `str` 値を持つ `Enum` を定義し、  
→ **双方向マッピングの責務を明確化する**

---

## 結語

`Enum` は、Pythonにおける「意味を持つ選択肢」を明示的に制御するための設計構造である。

- 定数の集まりを **クラスと型で管理**することで保守性を向上  
- 不正な値を防ぎ、選択肢の意図を**型・構文レベルで保証**  
- `auto`, `IntEnum`, `Flag` などによって **多様な文脈に適応**

**Pythonicとは、“値に意味を与える”ことであり、  
Enumはその思想を、コードに確固たる秩序として付与する設計武器である。**
Pythonにおけるシングルトン設計パターン：実装例とその適用判断

## 概要

**シングルトンパターン（Singleton Pattern）**は、  
「あるクラスのインスタンスが常に1つであること」を保証する設計手法。

設定管理、ログ出力、接続プールなど、**状態の一貫性が求められる場面で有効**だが、  
誤用すれば**テスト困難・密結合・副作用の温床**ともなる。

本稿では Python におけるシングルトンの正統実装と、  
**適用判断の観点**を洗練された設計思考として整理する。

---

## 1. シングルトンとは何か？

- 特定のクラスのインスタンスは「1つだけ」
- 再生成は同一インスタンスを返す
- グローバル状態に依存する処理に利用

---

## 2. Pythonにおける典型的な実装方法

### ✅ クラス変数によるインスタンス制御（最もシンプル）

```python
class Singleton:
    _instance = None

    def __new__(cls):
        if cls._instance is None:
            cls._instance = super().__new__(cls)
        return cls._instance
```

```python
a = Singleton()
b = Singleton()
assert a is b  # True
```

- `__new__()` によって**生成タイミングを制御**
- 1度目は生成、2度目以降は同一インスタンスを返す

---

### ✅ デコレータで実現するシングルトン

```python
def singleton(cls):
    instances = {}
    def get_instance(*args, **kwargs):
        if cls not in instances:
            instances[cls] = cls(*args, **kwargs)
        return instances[cls]
    return get_instance

@singleton
class Config:
    ...
```

→ 呼び出しインターフェースは通常のクラスと変わらず、**設計に柔軟性を与える**

---

### ✅ モジュールレベルでの自然なシングルトン（Pythonらしい）

```python
# config.py
settings = {
    "DEBUG": True,
    "DB_HOST": "localhost"
}
```

```python
# app.py
from config import settings
```

→ Pythonでは**モジュールは一度しかロードされない**  
→ 実質的にシングルトンと同じ振る舞いを実現できる

---

## 3. シングルトンの使用が適切なケース

- **設定オブジェクト**：全体で一貫した設定状態を保持したい場合
- **ログライター**：ファイルや出力先の共有
- **接続プール・キャッシュ管理**：高コストな初期化の回避

---

## 4. シングルトンの危険性とその回避法

| 問題点              | 説明 |
|---------------------|------|
| 密結合になる        | 多数の箇所が同じオブジェクトに依存する |
| テストが困難        | ステートフルでモック・再生成が難しい |
| 状態汚染が起きやすい | 副作用が蓄積されやすい |

### ✅ 解決アプローチ

- **DI（依存性注入）**により切り替え可能性を確保
- **明示的なライフサイクル管理**で使用範囲を制限
- テスト時は `reset()` メソッドや `clear()` などで状態を初期化

---

## 5. 実務でのベストパターン

### ✅ 設定クラスとしての応用

```python
class AppConfig:
    _instance = None

    def __new__(cls):
        if cls._instance is None:
            cls._instance = super().__new__(cls)
            cls._instance.env = "development"
            cls._instance.debug = True
        return cls._instance
```

→ **設定変更が即座に全体へ反映される**

---

### ✅ ログ管理

```python
class Logger:
    _instance = None

    def __new__(cls, filepath="log.txt"):
        if cls._instance is None:
            cls._instance = super().__new__(cls)
            cls._instance.filepath = filepath
        return cls._instance

    def log(self, message):
        with open(self.filepath, "a") as f:
            f.write(message + "\n")
```

---

## 結語

シングルトンは、**インスタンスの一意性という設計原則をコードで保証する構造**である。

- Pythonでは多様なシングルトン実装が可能  
- 状態の共有と制御を両立するためには、**設計意図の明示とテスト性の担保**が鍵  
- オブジェクトの数を制御することは、**構造と振る舞いの境界線を定義すること**

**Pythonicとは、“明示的に振る舞いを制限する設計の美学”であり、  
シングルトンはその表現の1つに過ぎないが、極めて有力な武器である。**
ブラウザにおけるURLによるリクエストからDNSサーバーを介したIPアドレスの取得までのプロセス

# ブラウザとDNS：Webページ表示までの流れ
私たちがブラウザでURLを入力してWebサイトにアクセスする際、実はその裏で「DNS」と呼ばれる仕組みが重要な役割を果たしています。本記事では、たとえば Amazon の商品ページ（例：`https://www.amazon.co.jp/a_merchandise`）を開こうとしたときに、ブラウザがどのようにして該当するサーバーにたどり着くのかを、DNSの仕組みを中心に解説します。

## DNS（Domain Name System）とは？
インターネット上の通信は、実際には「IPアドレス」を使って行われます。たとえば `192.0.2.1` や `2606:2800:220:1:248:1893:25c8:1946` といった文字列がそれにあたります。ただし、これらの数値を覚えるのは困難なため、人間が扱いやすい「ドメイン名」という形式が使われています。

たとえば `www.amazon.co.jp` と入力すれば、そのドメイン名に対応するIPアドレスをDNSが自動的に探し出してくれます。これが、DNSの基本的な役割です。つまりDNSは、「ドメイン名」から「IPアドレス」への変換装置として機能しています。

## URL構造とDNSの関係
では、`https://www.amazon.co.jp/a_merchandise` というURLを例に、どこがDNSに関係する部分かを見てみましょう。

URLは一般に、以下のような構造をしています。

```
[プロトコル]://[ホスト名（ドメイン名）]/[パス]?[クエリ]#[フラグメント]
```
この中で、DNSに関係するのは「ホスト名（ドメイン名）」、すなわち `www.amazon.co.jp` の部分です。
ホスト名（ドメイン名）は:// のあとから最初の / までとして取得されます。
このドメイン名が、DNSサーバーに問い合わせられ、対応するIPアドレスが返されることで、初めてブラウザは正しいWebサーバーに接続できるようになります。

一方、URLの後半 /a_merchandise の部分は「パス」にあたり、実際に接続されたWebサーバーが処理する領域です。これはWebサーバー内部のファイル構造やルーティングに依存しており、DNSとは関係ありません。

## DNSの解決手順
ブラウザがドメイン名をIPアドレスに変換するには、DNSリゾルバと呼ばれる仕組みを通じて、複数のDNSサーバーに問い合わせを行います。

まず、ユーザのPCやISP（インターネットサービスプロバイダ）が持つDNSリゾルバが、キャッシュにIPアドレスの情報を持っているかを確認します。もしキャッシュにない場合、次のような順序で問い合わせが行われます：

1. ルートDNSサーバー：インターネット全体の出発点。ここでは「.」（ドット）に対応する情報が保持されています。
2. TLD DNSサーバー：たとえば「jp」などのトップレベルドメインに対応するサーバー。※jpは日本
3. セカンドレベルドメインのDNS：たとえば「co.jp」。※co.jpは日本の法人向け
4. 権威DNSサーバー：最終的に「amazon.co.jp」の情報を正しく持っているDNSサーバー。

このように、DNSは階層構造になっており、「ルート」から始まり「jp」→「co.jp」→「amazon.co.jp」→「www」とたどる形で、目的のIPアドレスにたどり着きます。

## 名前解決の完了とWebリクエスト
最終的にIPアドレスが見つかると、それがDNSリゾルバを通じてブラウザに返されます。これによって、ブラウザははじめてそのIPアドレス宛にHTTPリクエストを送ることができるようになります。こうして、Webページの表示に必要な情報が取得され、ユーザの画面にAmazonの商品ページが表示されるのです。
Slackを連携してアラートを即通知する設定手順

Slack通知を行うためのWebhookを作成するには、Slack側で**Incoming Webhook**を設定する必要があります。以下の手順でWebhookを作成できます。

---

## ✅ SlackでWebhookを作成する手順

### 1. **Slack Appを作成する**
1. [Slack API](https://api.slack.com/apps) にアクセス
2. 「Create New App」をクリック
3. 「From scratch」を選択
4. アプリ名とワークスペースを選択して「Create App」

---

### 2. **Incoming Webhooks機能を有効にする**
1. 作成したAppの管理画面で「**Incoming Webhooks**」を選択
2. 「**Activate Incoming Webhooks**」をONにする

---

### 3. **Webhook URLを作成する**
1. ページ下部の「**Add New Webhook to Workspace**」をクリック
2. 通知を送信したいチャンネルを選択（例: `#alerts`）
3. 「許可する」をクリック
4. Webhook URL（`https://hooks.slack.com/services/...`）が生成されるのでコピーしておく


```sh
curl -X POST -H 'Content-type: application/json' \n
--data '{"text":"Hello, World!"}' \n
https://hooks.slack.com/services/xxxxxx/xxxxx/xxxxxxxxxx
```
CSSの方頑張り

私は　CSS　勉強　はじめたときから難しとか思いましたがでもゆっくり練習が大事なんでそれも一緒に考え行ってました。最近は普通の基本的なmargin,padding,border,color、こんな感じで勉強していました。marginとはコンテンの周りのspaceが間どれくらいあるかどんなに変わる　それはmarginということです。paddingとはコンテンの中にあるspaceとかの
どれぐらいで設定なるかそれはpaddingのことです。CSSの中でこのこととっても大事です。
borderは周りの引いてるラインのことである。そのラインのつきいろいろな色々がついて作ります。ラインに色がついてみるともっときれいに見えるしコンテンのところ別にされることあります。colorもとっても大事です。
NotebookLMで英語の技術系の動画を一瞬で要約する


英語の技術系の動画って、見るのに時間がかかるし、英語だと理解が曖昧で、結構理解するのつらいですよね。
NotebookLMを使うと、動画を見ることなく、日本語で要約を作成したり、知りたいことだけ質問できて、超短時間で理解できます。

例として、インドで開催されたUDEのセッションの動画(６０分)を使ってみます。
Comprehending the unified admin experience and the unified developer experience
https://www.youtube.com/watch?v=_YshdxUB2pw

(手順)
GoogleアカウントでログインしてNotebookLMを開きます。
https://notebooklm.google.com/

[新規作成]ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/6a6ef758-2da0-4764-8f99-f301141be1de.png)

ソースを追加　ページで　Youtube　をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/d147ae91-88c3-4943-8f4c-72d090c301b1.png)

動画のURLを貼り付けて、[挿入]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/f9441c2a-30f2-4bba-9778-88d70654c631.png)

直ぐに、日本語で要約してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/b0403235-712d-4c66-aaa6-e9f67ba6ee8c.png)


より、具体的な要約を作成するため、「要約を作成してください」と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/99bfbe71-b152-45ec-b1eb-5539a75bf482.png)


要約が作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/ffda88ec-6f89-421a-8722-2b4a47ddef0c.png)


次に、UDEとLCSからPPACのスケジュールが気になるので質問してみます。

「スケジュールに関する情報を抜き出してください」と質問します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/61662067-c5a3-4806-942d-f6a373c860bd.png)

セッション中で、スケジュールに関して説明している箇所を抜き出して、日本語で説明してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/88b3feeb-ae38-4cf9-a04f-c535a52a294f.png)

**NotebookLMを使えば、60分の英語のセッションでも、動画を見ることなく、英語が苦手でも**
**５分くらいで日本語で要約と知りたい情報を纏められます。**
[スニペット]Java8　CSVの指定した列を加算して新たな列を作成して挿入

```java
import com.opencsv.*;
import java.io.*;
import java.util.*;

public class CSVSumWithInsertOpenCSV {
    public static void main(String[] args) throws IOException {
        String inputFile = "input.csv";
        String outputFile = "output.csv";

        // 加算対象の列名
        List<String> sumHeaders = Arrays.asList("Math", "Science", "English");
        String insertAfter = "English"; // この列の右に "Total" を挿入

        try (
            CSVReader reader = new CSVReader(new FileReader(inputFile));
            CSVWriter writer = new CSVWriter(new FileWriter(outputFile))
        ) {
            List<String[]> allRows = reader.readAll();
            if (allRows.isEmpty()) return;

            // ヘッダー取得
            String[] originalHeader = allRows.get(0);
            List<String> newHeader = new ArrayList<>(Arrays.asList(originalHeader));
            int insertIndex = newHeader.indexOf(insertAfter) + 1;
            newHeader.add(insertIndex, "Total");
            writer.writeNext(newHeader.toArray(new String[0]));

            // 各データ行の処理
            for (int i = 1; i < allRows.size(); i++) {
                String[] row = allRows.get(i);
                List<String> newRow = new ArrayList<>();

                // 合計の算出
                double sum = 0;
                Map<String, String> rowMap = new HashMap<>();
                for (int j = 0; j < originalHeader.length && j < row.length; j++) {
                    rowMap.put(originalHeader[j], row[j]);
                }

                for (String key : sumHeaders) {
                    try {
                        sum += Double.parseDouble(rowMap.getOrDefault(key, "0"));
                    } catch (NumberFormatException e) {
                        // 数値変換できない場合は 0 扱い
                        sum += 0;
                    }
                }

                // 新しい行を構築しながら "Total" を挿入
                for (int j = 0; j <= originalHeader.length; j++) {
                    if (j == insertIndex) {
                        newRow.add(String.valueOf(sum));
                    }
                    if (j < originalHeader.length) {
                        newRow.add(row[j]);
                    }
                }

                writer.writeNext(newRow.toArray(new String[0]));
            }
        }
    }
}
```
【初投稿】JavaScriptでlocalStorageにデータを保存する方法

# :grinning: はじめに
初めまして！2025年4月から都内のSlerで働くエンジニアです。プログラミングを学習し始めて約1年が経ったので記事を書こうと思います！（Qiitaへ初投稿です...:relaxed:）

まずは簡単に自己紹介させてください！！！

- 25卒文系大学卒
- 就活と同時にプログラミング学習をスタート
- 入社企業では業務アプリケーションを開発予定

この記事では、JavaScriptでlocalStorageを使ってデータを保存・読み込む方法について、実装例を交えて紹介します！
初学者の方や、localStorageの使い方をこれから学びたい方の参考になれば嬉しいです！

## 🔧 使用技術・環境

- 言語：HTML / CSS / JavaScript（Vanilla JS）
- エディタ：Visual Studio Code
- ブラウザ：Google Chrome

## 🛠️ 実装の流れ

今回は「localStorageを使ってデータを保存・読み込みする方法」にフォーカスして解説します。

以下のようなシンプルな入力フォームを用意し、入力されたデータをlocalStorageに保存・復元する処理を実装しました。

1. **HTMLで入力フォームとボタンを作成**
2. **JavaScriptでフォームの入力値を取得**
3. **`localStorage.setItem()` を使って保存**
4. **ページ読み込み時に `localStorage.getItem()` でデータを読み込み、画面に反映**

## 💾 localStorageの基本実装（保存と読み込み）
```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>○○○</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <input type="text" id="input" placeholder="データを入力" />
    <button id="saveBtn">保存</button>
    <!-- ボタンの下に表示されるように配置 -->
    <div id="output"></div>
    <script src="./main.js"></script>
  </body>
</html>
```

```javascript:main.js
const input = document.getElementById("input");
const saveBtn = document.getElementById("saveBtn");
const output = document.getElementById("output");

saveBtn.addEventListener("click", () => {
  const value = input.value;
  localStorage.setItem("savedData", value);
  output.textContent = `保存されたデータ：${value}`;
  alert("データを保存しました！");
});

window.addEventListener("DOMContentLoaded", () => {
  const saved = localStorage.getItem("savedData");
  if (saved) {
    output.textContent = `保存されたデータ：${saved}`;
  }
});
```

## 📝 まとめ

今回は、JavaScriptでlocalStorageを使ってデータを保存・読み込みする方法を紹介しました！

- `localStorage.setItem()` で保存
- `localStorage.getItem()` で読み込み
- ブラウザを閉じてもデータが保持される

この記事が、同じように学習中の方のお役に立てれば嬉しいです✨
最後まで読んでいただき、本当にありがとうございました！！！

## 🎓 参考講座
[【講座名】【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門（Udemy）](https://www.udemy.com/course/modern_javascipt_react_beginner/)  
※内容の一部をアレンジして、自分の学びを整理する目的で記事にしています。
関数の辞書化について


初めての投稿です。

プログラミング学習中、複数の関数をどう使い分けたらいいか迷うこと、ありませんか？ 特に、コマンドで関数を選びたい時、「辞書（ハッシュ）ってどう使うんだっけ…？」って私はよく頭が真っ白になります！

この記事では私の備忘録として、**「関数の辞書化」** について説明します！

### 1. そもそも「関数の辞書化」って何？

一言で言うと、**関数を辞書に登録して、キー（名前）で呼び出すテクニック**になります。

例えば、電卓アプリを作りたいとしましょう。足し算、引き算、掛け算、割り算…たくさんの関数が必要になります。

```python
def add(x, y):
  return x + y

def subtract(x, y):
  return x - y

def multiply(x, y):
  return x * y

def divide(x, y):
  if y == 0:
    return "Error: 0で割れません！"
  return x / y
```

これらの関数を、電話帳のように整理したい！ そんな時に、辞書が役に立ちます。

### 2. 辞書にまとめてみよう！

辞書は、`{キー: 値}` の形でデータを保存します。関数の場合、キーに関数名（文字列）、値に関数そのものを入れましょう。

```python
functions = {
  "add": add,
  "subtract": subtract,
  "multiply": multiply,
  "divide": divide
}
```

これで、`functions["add"]` と書けば、足し算の関数 `add` を呼び出せるようになります。

### 3. コマンドで関数を選んで実行！

ターミナルから関数を選んで実行するコードを書きましょう。

```python
def main():
  print("使える関数： add, subtract, multiply, divide")
  command = input("どの関数を使いますか？: ")

  if command not in functions:
    print("Error: そんな関数はありません！")
    return

  try:
    num1 = float(input("数字1を入力: "))
    num2 = float(input("数字2を入力: "))
  except ValueError:
    print("Error: 数字を入力してください！")
    return

  result = functions[command](num1, num2) # 辞書から関数を呼び出し
  print("結果:", result)

if __name__ == "__main__":
  main()
```

**コード解説**

*   `print("使える関数： add, subtract, multiply, divide")`: 使える関数を示す。
*   `command = input("どの関数を使う？: ")`: ターミナルから関数名を入力してもらう。
*   `if command not in functions:`: 入力された関数名が、辞書に登録されているかチェックする。
*   `result = functions[command](num1, num2)`: **ここがポイント！** 辞書 `functions` から、入力された名前の関数を取り出し、引数 `num1` と `num2` を渡して実行できます。

### 4. 実行してみよう！

上記のコードを `calculator.py` などの名前で保存して、ターミナルで実行しましょう！

```bash
python calculator.py
```

指示に従って関数名と数字を入力すれば、計算結果が表示されます！

### 最後に

関数の辞書化は、コードを整理する強力な武器です。最初は難しく感じるかもしれませんが、実際に手を動かしてみれば、きっと理解できるはずです。

この記事が、悩んでいる方の助けになれば嬉しいです。
今後も発信していきます。よろしくお願いします！
Map×orderでスッキリ！出現順に単語カウントする方法

Paizaの問題で、半角スペース区切りの文字列を出現順に出力した後、それぞれの出現回数を出力するというタスクに挑戦した。とりあえず `Map` と `forEach` を駆使したのだけれど、これはどうも無駄が多い…。調べたら配列を使うと最適化できることがわかった。その実装を共有しよう！

## <br>問題概要

👉 要求
- 半角スペース区切りの文字列を受け取る
- その中のユニークな単語を、登場順に出力
- その後、個々の単語の出現回数を出力

<br>入力例：
```
red green blue blue green blue
```

出力例：
```
red
green
blue
1
2
3
```

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/word-count_07


## <br>🚨 シンプルながら無駄が多いコード
```js
const rl = require('readline').createInterface({input: process.stdin});

rl.on('line', (input) => {
   const words = input.split(" ");
   const dict = new Map();
  
   words.forEach(a => {
       dict.set(a, 0); // まず0で初期化
   });

   words.forEach(a => {
       dict.set(a, dict.get(a) + 1); // カウントアップ
   });

   dict.forEach((value, key) => {
       console.log(key); // 単語を出力
   });

   dict.forEach(value => {
       console.log(value); // 出現回数を出力
   });

   rl.close();
});
```

## <br>🛠️ order 配列を利用
```js
const rl = require('readline').createInterface({ input: process.stdin });

rl.on('line', (input) => {
    const words = input.split(" ");
    const dict = new Map();
    const order = []; // 単語の出現順を記録

    words.forEach(word => {
        if (!dict.has(word)) {
            dict.set(word, 0);
            order.push(word); // 初出の単語を記録
        }
        dict.set(word, dict.get(word) + 1); // カウント更新
    });

    // 出現順に単語を出力
    order.forEach(word => console.log(word));
    
    // 出現順にカウントを出力
    order.forEach(word => console.log(dict.get(word)));

    rl.close();
});
```

### 🤔 なぜ order 配列が必要なの？
- `order`に初出の単語を記録すれば、出力順を保証できる
- ループを1回にまとめて、計算量を削減


## <br>📅 まとめ
- `Map` で単語の出現回数を管理
- `order`を利用して出現順を保証
- `forEach`を減らすだけで、キレイなコードに修正できる

🎧 この解決法で、パフォーマンスが向上した気がする！


<br>[僕の失敗談と解決談！🚀](https://paizabeginner.wordpress.com/2025/04/07/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9amap%e3%81%a7%e5%87%ba%e7%8f%be%e9%a0%86%e5%8d%98%e8%aa%9e%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%ef%bc%81/)
CheckNumber.AI 更新情報 WhatsApp番号チェック結果の表示画面を追加しました

[CheckNumber.AI](https://checknumber.ai/) 更新情報 2025年4月5日 - WhatsApp番号チェック結果の表示画面を追加しました

CheckNumber.AIは本日、WhatsApp番号チェックのオンラインツールの使い方を改善しました。

![WhatsApp-check-number-result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3962293/ea842c35-50e5-4823-9e75-a96a5c5c9157.png)

番号チェックが終わると、すぐにWhatsApp番号チェック結果の画面が表示されます。また、下にある「項目の説明を表示」ボタンを押すと、それぞれの項目について詳しい説明が見られるようになりました。

![WhatsApp-check-number-result-descriptions.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3962293/c88ed1ed-8f2d-4bf2-8d06-8af0df1bd696.png)

さらに、項目の説明の下に「チャットで相談」リンクを追加しました。何か質問があれば、このリンクをクリックするとWhatsAppのチャット画面が開き、スタッフに直接相談できます。
[API] WebAPIの分類_TreeDiagram

# WebAPIの分類_TreeDiagram
~~~yaml
WebAPI:
├── RESTful API:
│   ├── OData
│   ├── JSON API
│   ├── HAL (Hypertext Application Language)
│   └── Siren
├── SOAP API:
│   └── WSDL (Web Services Description Language)
├── GraphQL:
├── JSON-RPC:
├── XML-RPC:
└── gRPC:
~~~

# 詳細
## RESTful API (Representational State Transfer)
特徴
- HTTPメソッド（GET、POST、PUT、DELETE）を使用
- ステートレスな通信（各リクエストは独立）
- JSON、XMLなど複数のデータフォーマットをサポート
- Uniform Resource Locator (URL) を使用してリソースを識別

使用例
- ウェブサービスやモバイルアプリケーション
- ソーシャルメディアプラットフォーム（例：Twitter API）
- Eコマースアプリケーション

具体的なWeb API
- ODate: ビジネスインテリジェンスツール（例：PowerBI）との連携

## SOAP (Simple Object Access Protocol)
特徴
- XMLベースのメッセージングプロトコル
- 高いセキュリティと信頼性
- 複雑なトランザクションやセキュリティが必要な場合に適している

使用例
- 金融サービス、医療システム
- エンタープライズソフトウェア

## GraphQL
特徴
- クエリ言語で、クライアントが必要なデータのみを取得
- 単一のエンドポイントを使用
- 強く型付けされたスキーマ

使用例
- ソーシャルメディアプラットフォーム（例：Facebook、GitHub API）
- 動的なデータニーズを持つモバイルアプリケーション
- データ量が多いアプリケーション

## JSON-RPC
特徴
- JSONを使用したリモートプロシージャコール
- シンプルで軽量
- 低レイテンシーで効率的な通信

使用例
- モバイルアプリやマイクロサービス間の通信
- リアルタイム、高パフォーマンスシステム

## XML-RPC
特徴
- XMLを使用したリモートプロシージャコール
- 古いプロトコルで、複雑なデータを扱う

使用例
- レガシーシステムや特定のエンタープライズアプリケーション

## gRPC (gRPC Remote Procedure Calls)
特徴
- HTTP/2を使用した高速通信
- プロトコルバッファ（Protocol Buffers）を使用した効率的なデータシリアライゼーション
- 双方向ストリーミングをサポート

使用例
- マイクロサービスアーキテクチャ
- リアルタイム通信が必要なアプリケーション（例：チャットアプリ）
- 高パフォーマンスが求められるシステム


# 参考リンク
- [Comparing SOAP vs REST vs GraphQL vs RPC API - AltexSoft](https://www.altexsoft.com/blog/soap-vs-rest-vs-graphql-vs-rpc/)
- [REST vs SOAP vs GraphQL vs RPC: Which API Protocol Should You Use? - DEV Community](https://dev.to/drishti1920/rest-vs-soap-vs-graphql-vs-rpc-which-api-protocol-should-you-use-mn7)
- [An architect's guide to APIs: SOAP, REST, GraphQL, and gRPC](https://www.redhat.com/en/blog/apis-soap-rest-graphql-grpc)
- [[API] RESTfulなAPIとは](https://qiita.com/Jochun/items/c2ff19f479c23896af1f)
- [ODataにさわってみよう](https://www.cresco.co.jp/blog/entry/3135.html)
【Vue3 / Composition API】hoverしたときに要素を出現させる方法

## はじめに

"Vue.js hover"で検索して一番上に出てきた記事がVue2 & Option APIで書かれたものでしたので、Vue3 & Composition APIで書き換えてみました。

https://qiita.com/TK-C/items/edb7dc7d796b07811b78

## 完成品

![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/dce4beea-d329-4c29-b50a-862acb5b2160.gif)

以下のVue SFC Playgroundでコードと動作を確認できます。

https://play.vuejs.org/#eNqVVU2P20QY/isjVyi71TrJbrorMNkVBVUCDhQBBw6+TOxxdrr2zGhmnE2JIuEsEpQPUSpVHEACqgpWqsQBLm1V6I9xo7an/oW+M2N70zS7apUc7PfzeZ739czEuyhEe5QTL/D6KpJUaKSIzsVeyGgmuNRogiRJ0BQlkmeoBaGtkIUs4kxplBGl8JCgXROz1trnIyLL4uey+LMsfiyL38viZll81Vqv46l634SQGFUpCU4VAXdTkOeKXIaQi5GmnEHU2jra3UOTkKGT7PYIp7npqmVOQjZdyue5frV0293m9zuOPNA2v74mmUixJvCOUD+mIxSlWKnd0IM+GlNGZOhZ55LbSuAfSiyECUHvOERgBOcSuxN3rmtvg70pDw3EUvlBrrWNmEyaEUyn/Y6ZWpViMI18mkBOwxv61XU056mmAkpUM7tZzr4vi//t8H7rdyC9Ztc810/9zoI6Vi2lr6YEqYgLEoOt3WjkhM+wHFIWoO2uGL9tDJqMtY9TOgRjRJgmEsx2ip3zqDz6tZw9LI/+LYvj+fV7ZfHD/Ov7BtfshgV4XM4KWLD5L/+Usy/R+Q70e0F011NwRY2MAawZQKUjYjvHVAHyqwGiLAWA/iDl0cGq5k9vQZ975nl2uzy6s9jHqe/anFYPAOA4pmwYoE1gjbZq6gMcHQwlz1nsRzzlMkDnLnTfIklivZXpcJ9qh3fAZQwtJY5prgL0ZlUlyqUygYLTSj0QVWJWc17ugrrtnkIEK1cV9kz6iqQk0gFinBmrVeAFhoF9cTxXwN7ZGWxa2LV2i8N69uCbR3e/K4s7T/44fnz7/rMH15yC1d4tzwgPFE/zirPmwqjWfcO+pSQBkNvVmyWZcJkF7tFs4edrPrjXT5M32TK/RXnP9Xq9FTPa3K5ntFp0t8Z+Ba+JHftqH8f8MEBdtAVlIBzJ4QCvdTdQ9W9vOnR2rr4SOCJGd7Ow1v6FT1lMxqbsKXqWxd+P7l578teN+X+3rLbfzq//BN5lYYMAJ7AQTl/zGcLXFaBWy9E9Q29/pyL0mnpbqQIE2QhK0tiFCSyh8aKYtkm1ao1xwGHPspcn5Q5kc6jseRuehoOFJXTYvqI4g3vKcjMHcSZoSuRlYTip0Asca+PDacoPP7Q2c0Vs1PZon0QHK+xX1NjYQu9jSeDbGJHQa3waxk60c1/69CM4uhacGY/zFKLPcH5CrNb2SDdh78JyAuyFOIv2A3vbwjZ+pi6NYWyqJuXuOISmNj704AZ+7wzqJ3B77Qs2D/T0ps8BxxTo5Q==

### 要点

- `@`は`v-on`の省略形です
- マウスポインタが要素に乗った時`mouseover`イベントが発火します
- マウスポインタが要素から外れた時に`mouseout`イベントが発火します

```vue
<script setup>
import { ref } from 'vue'

const message = ref('hoverしてください')
const isHovered  = ref(false)

const mouseOverAction = () => {
  isHovered.value = true
}

const mouseOutAction = () => {
  isHovered.value = false
}
</script>

<!-- CSSは省略しています -->
<template>
  <div>
    <div @mouseover="mouseOverAction" @mouseout="mouseOutAction">
      <p>{{ message }}</p>
      <div v-if="isHovered">hoverされました</div>
    </div>
  </div>
</template>
```

## 補足：マウスポインタのイベント

v-onディレクティブに指定できるマウスポインタのイベントは他にもあります。
これらはVueではなくJavaScriptのイベントですので、詳細は"JavaScript mouseenter"などで検索して調べてください。

| イベント名 | 発生タイミング | 
| -------- | -------- | 
| mouseenter     | マウスポインタが要素に入ったとき（自要素のみ ）   | 
| mouseleave     | マウスポインタが要素を出たとき（自要素のみ ）   | 
| mouseover     | マウスポインタが要素に入ったとき（子要素も含む ）   | 
| mouseout     | マウスポインタが要素を出たとき（子要素も含む ）   | 

:::note info
※ 山田祥寛『Vue 3 フロントエンド開発の教科書』（技術評論社、2023年、初版）P72より引用
:::

## 終わりに

Option APIとComposition APIだけではなく、mouseenterとmouseoverの違いについても知ることができ、いい機会でした。
Pythonで学ぶゲーム数理工学：ポケモン編2「H = B + D」の定理


##  目的 
ポケモンの総合耐久値 \( Y = H + B + D \) を固定したとき、物理・特殊耐久（それぞれ \( H \times B \), \( H \times D \)）が最大になる条件をグラフで可視化します。  
このとき、**「H = B + D」** を満たすような割り振りが最も効率的であることを確認します。

##  参考リンクまとめ

http://firefly1987.blog.fc2.com/blog-entry-4.html


https://pokedesiaf.com/doryokuchityousei-hbd/

##  Pythonコード
```python
import numpy as np
import matplotlib.pyplot as plt

# ---------------------------------------------
# 定数設定 / Set constants
# ---------------------------------------------
# 総合耐久値 Y = H + B + D（HP + 防御 + 特防の合計）を仮定
# Total durability value Y = HP + Defense + Special Defense
Y = 300

# B:D の比率を設定（ここを変えるとグラフが変わる）例：k = 1 なら B = D
# Set ratio of Defense (B) to Special Defense (D) as D = kB
k = 1  # ← この値を変えて色々試してみましょう！

# ---------------------------------------------
# B の範囲を生成 / Generate a valid range of Defense (B) values
# ---------------------------------------------
# H = Y - B - D = Y - B - kB = Y - (1 + k)B が正になるよう制限
# Ensure H remains positive: H = Y - (1 + k)B > 0 ⇒ B < Y / (1 + k)
B_values = np.linspace(1, Y / (1 + k + 1), 500)

# 各 B に対して D, H を計算 / Compute D and H for each B
D_values = k * B_values
H_values = Y - B_values - D_values

# ---------------------------------------------
# 耐久指数を計算 / Compute durability indices
# ---------------------------------------------
# 物理耐久指数（Physical Durability Index）= H × B
# 特殊耐久指数（Special Durability Index）= H × D
physical_durability = H_values * B_values
special_durability = H_values * D_values

# ---------------------------------------------
# 耐久が最大となる B を理論式から求める / Calculate optimal B
# ---------------------------------------------
# 最大耐久となる B の理論値は B = Y / (2(1 + k))
B_opt = Y / (2 * (1 + k))
D_opt = k * B_opt
H_opt = Y - B_opt - D_opt
max_durability = H_opt * B_opt  # 理論上の最大物理耐久

# ---------------------------------------------
# グラフ描画 / Plotting the durability indices
# ---------------------------------------------
plt.figure(figsize=(10, 6))

# 耐久指数を描画 / Plot both durability indices
plt.plot(B_values, physical_durability, label="Physical Durability (H×B)")
plt.plot(B_values, special_durability, label="Special Durability (H×D)", linestyle='--')

# 最適な B の位置に縦線を追加 / Mark the optimal B with a vertical line
plt.axvline(B_opt, color='gray', linestyle=':', label='Optimal B (H = B + D)')

# タイトルと軸ラベル / Title and axis labels
plt.title("Durability Optimization when H = B + D")
plt.xlabel("Defense B.D")
plt.ylabel("Durability Index")

# 凡例とグリッド / Legend and grid
plt.legend()
plt.grid(True)

# グラフを表示 / Show the plot
plt.show()

```


##  結果


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4046871/ad7f9d39-6d1d-4b78-ad80-934d03a08aca.png)
バーチャルキャスト公式わんコメプラグインで広告などを取得する

# サイト別設定の書き出しは推奨しません!!

最新のわんコメではサイト別設定から
・ニコニ広告
・引用
・クルーズ
・リクエスト
・配信延長
・ランクイン
・ランク変動
・来場
・アンケート
・配信終了時刻通知
の情報がプラグイン経由で書き出すことができる

<BR>しかし4月7日現在この情報を送信するとほとんどのVCIではエラーが出てしまい、正常に動かなくなってしまう。
今後公式がどのような対応を取るかは不明だが、一応対策を取っておきたい、または対応しておきたいという人のために記録として書いておきます。

<BR>今回はこの中から扱いが特殊な「ニコニ広告」について説明します。
まずニコニコ広告を送った場合どのような情報が送られるか見ていこう！
### ニコ生ギフトAPIの場合
```
{"id":"ni-nicoad-EhoKEgkbe7lNfg-WARHZux17-MrnmBDA8ZvLAQ",
"liveId":"system",
"userId":"onecomme.system",
"name":"ニコニコ",
"timestamp":{"year":2025,"month":4,"day":7,"hour":18,"minute":4,"second":18,"ms":425},
"isOwner":false,
"hasGift":true,
"comment":"【広告貢献1位】悠里さんが100ptニコニ広告しました",
"displayName":"ニコニコ",
"profileImageUrl":"（省略）",
"type":"niconico-gift"}
```
### 共通受信APIの場合
```
{"type":"niconico-gift",
"author":"ニコニコ",
"comment":"【広告貢献1位】悠里さんが100ptニコニ広告しました",
"timestamp":{"year":2025,"month":4,"day":7,"hour":18,"minute":4,"second":18,"ms":425},
"iconUrl":"（省略）"}
```
という情報がそれぞれに送られています

<BR>ギフトの場合は"price"のデータも一緒に送られるのですが、広告の場合"price"の情報がないデータがギフト用のアドレスとして送信されているのです。

つまりVCIのスクリプト上で"price"を参照する処理を入れているとそこでエラーが出てしまうということなんですね。

<BR>これを回避するためにはどうすればいいのか、というと
### ①そもそも"price"を参照しない
または、
### ②"price"があるときだけ実行する
json.parseでOSCのデータを展開するときに例えば
``` 
local oscData = json.parse(content)
if oscData.price ~= nil then
    --処理を書く
end
```
のようにする

<BR>では逆に広告が来たときに演出などを発生させたい場合は
``` 
local oscData = json.parse(content)
if oscData.price ~= nil then
    --ギフトの処理
else
    --広告の処理
end
```
とすればいいでしょう。
私の場合はめんどくさいので
```
oscPrice = oscData.price or 0

if oscPrice == 0 then
    --無料ギフトの処理
end
```
として無料ギフトとまとめて処理をしています

# おわりに
現在この処理がされているVCIはほとんどなくほぼ確実にエラーが出てしまいます
なのでサイト別設定の書き出しは推奨しません（公式で書いてほしい）
どうしても対応したいという方だけやってみてください
（あまり大きな声では言えませんが私のVCIは対応済みです！！）
constructor には何を書くべきであり、何を書くべきではないのか

constructorの役割は、「インスタンスが利用可能になるために必要な初期状態を作ること」に限定することが望ましい。

# constructor に書くべきこと

constructorには、次のような内容を書くことが望ましい。

- クラスのインスタンスが初期状態として最低限必要とするプロパティの初期化や設定
- [依存性注入](https://ja.wikipedia.org/wiki/%E4%BE%9D%E5%AD%98%E6%80%A7%E3%81%AE%E6%B3%A8%E5%85%A5)（[Dependency Injection](https://en.wikipedia.org/wiki/Dependency_injection)）として外部から渡されるオブジェクトや設定値を保持する処理

## プロパティの初期化
クラスが正常に動作するためには、最低限必要な状態が設定されている必要がある。
そのため、引数で受け取った値やデフォルト値を用いて、必要最小限のプロパティを設定する。

```ts
class User {
  private name: string;
  private age: number;

  constructor(name: string, age: number = 20) {
    this.name = name;
    this.age = age;
  }
}
```


## 依存性の注入（DI）
外部のオブジェクトやサービスを受け取り、それをクラスの内部で保持することで、クラスの疎結合性を高め、テストを容易にすることができる。

```.ts
class UserService {
  constructor(private repository: UserRepository) {}
}
```

# constructor に書くべきでないこと

constructorに以下のような処理を含めることは避けるべきである。

- 複雑なロジックやビジネスロジックの実行（これらは専用のメソッドに分離するべき）
- グローバルな状態の変更や副作用を伴う処理（設計として副作用を極力少なくすべき）

```.ts
// 悪い例
class Config {
  data: any;

  constructor() {
    fetch("config.json").then(res => res.json()).then(json => {
      this.data = json;
    });
  }
}
```

```.ts
// 良い例
class Config {
  data: any;
  private constructor(data: any) {
    this.data = data;
  }

  static async create(): Promise<Config> {
    const res = await fetch("config.json");
    const data = await res.json();
    return new Config(data);
  }
}
```

## 複雑なビジネスロジックや条件分岐処理
constructorはインスタンス生成のための初期設定に特化するべきであるため、複雑なビジネスロジックや条件分岐を含めると、コードの読みやすさや保守性が著しく低下する。こうした処理は専用のメソッドやファクトリメソッドに切り出すことが望ましい。

```.ts
// 悪い例
class Order {
  constructor(items: Item[]) {
    if(items.length === 0) throw new Error("Items required");
    if(items.some(i => i.price <= 0)) throw new Error("Invalid item price");
    this.totalPrice = items.reduce((sum, i) => sum + i.price, 0);
    this.items = items;
  }
}
```

```.ts
// 良い例
class Order {
  items: Item[];
  totalPrice: number;
  constructor(items: Item[]) {
    this.items = items;
    this.totalPrice = this.calculateTotalPrice();
  }

  private calculateTotalPrice(): number {
    return this.items.reduce((sum, i) => sum + i.price, 0);
  }

  validate(): void {
    if(this.items.length === 0) throw new Error("Items required");
    if(this.items.some(i => i.price <= 0)) throw new Error("Invalid item price");
  }
}
```

## グローバルな状態変更や副作用のある処理
グローバルな状態をconstructor内で変更すると、テストやデバッグが困難になる。このような副作用はconstructorでは避け、constructorは純粋にインスタンス自身の初期設定に専念することが重要である。

```.ts
// 悪い例
class UserSession {
  constructor(user: User) {
    SessionManager.setCurrentUser(user); // グローバルな状態変更
  }
}

```

```.ts
// 良い例
class UserSession {
  user: User;
  constructor(user: User) {
    this.user = user;
  }

  activate(): void {
    SessionManager.setCurrentUser(this.user);
  }
}
```

# 謝辞
この記事は GPT に素朴な疑問を質問するやり取りを再編したものである。
また、この記事のドラフトを [villagepump](https://scrapbox.io/villagepump) コミュニティ内でオープンパブリックに[編集](https://scrapbox.io/villagepump/constructor_%E3%81%AB%E3%81%AF%E4%BD%95%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%B9%E3%81%8D%E3%81%A7%E3%81%82%E3%82%8A%E3%80%81%E4%BD%95%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%B9%E3%81%8D%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B)した際、誤りを bsahd 氏に指摘していただいた。ありがとう。
AWS S3コネクタの追加(DataCloudハンズオン - Coral Cloud #2)

前回は、DataCloudでのハンズオンでCRMデータとの連携を行いました。

https://qiita.com/Mijinko-kun/items/9aa89e622de7cbab2e2c

今回は、以下の手順に従いDataCloudハンズオンの続きを進めていきます。AWSのS3との連携を行います。

https://developer.salesforce.com/agentforce-workshop/data-cloud/2-create-s3-connection

## AWS S3とは

AWS S3は、Amazon Web Services（AWS）が提供するスケーラブルでオブジェクトストレージサービスです。


### S3コネクタの追加

データクラウドのセットアップから、[その他コネクタ]で、Amazon S3を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2716146/27bc30f2-4d9a-4e43-91f9-71fe72bd039a.png)

ワークショップページの通りに入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2716146/c846cce3-349f-4ca4-aaf6-657c74b5950e.png)

[テスト]ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2716146/2c346459-ed31-4850-a938-e8dea19e7fd6.png)

[接続しました]と表示されれば問題ありません。


---


↓次回は、このS3コネクタを利用して、データストリームを作成します。


https://qiita.com/Mijinko-kun/items/3a9ee0c0b06011c452b3
【Android Jetpack Compose】Dialogの背景の透過度を調整する

|dimAmount: 0.2 | dimAmount: 0.8  |
|---|---|
|<img width="160" alt="02" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/d1df3401-ee20-44cd-ac92-154c793ea23c.png"> | <img width="160" alt="02" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/bee868c2-c103-4beb-a8ec-4a3814770057.png"> |





# はじめに

Android Jetpack Composeで、Dialogの背景の透過度を調整する方法について解説。

# 方法

`DialogWindowProvider`で`window`を取得し、`setDimAmount`で`dimAmount`を0f~1fにセットすることで調整可能。

# コード

```Kotlin
Dialog(onDismissRequest = { showDialog.value = false }) {
    // DialogWindowProviderでwindowを取得し、setDimAmountでdimAmount`を0f~1fにセット
}
```

詳しくは[こちら](https://note.com/naka_inc/n/n85e6054fe552)

https://note.com/naka_inc/n/n85e6054fe552
【ローコードのSKE】標準部品の鮮やかな表現力

SKEリポジトリ定義で作成される標準部品を格好よくしたい場合どうすればよいか、今回の記事で紹介させていただきます。説明内容はおもに入力画面向けです。

## 画面デザインのコツ

### 項目の並び
項目の並び順つまりタブ順です。一般的に横並び優先（左⇒右、上⇒下）ですが、縦並び優先（上⇒下、左⇒右）のケースもあります。右⇒左または下⇒上の並び順は、業務画面ではほぼありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/49dfb768-04ac-4888-abaa-8235b20b5613.png)


### フィールドセット
いくつかの項目を枠で囲んでラベルを付けたものをフィールドセットと呼びます。フィールドセット内の項目並び順は固定で横並び優先です。フィールドセットを設定するには開始と終了を表す項目を作成しタイプを「[」と「]」に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/9450436d-e321-4846-b39f-504019c29542.png)


### 区切りのタイトル
画面の節を表すため、一般的なラベルと区別して、文字サイズと色を区別する区切り用のタイトルがほしいです。「span」タイプの項目のラベルに、HTMLタグを登録して区切りのタイトルを表現できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/9c3ca966-eb03-4bd2-b070-a4d91b222f16.png)

### ラベルの活用
項目が注意事項または付属動作ありの意味を表すため、項目のタイトルにアイコンを追記することができます。そのアイコンを動作させるため、「タイトル操作」にアドオン登録で制御可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/9764bc6c-c30e-45d0-8729-e20d47e69874.png)


## 例
### 縦配置優先と区切りタイトルの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/9102c574-f323-4363-9626-03268358b5e0.png)
```html
<div style="font-size:20px;background-color:steelblue;color:white;padding-left:10px;margin-top:10px;margin-bottom:10px;">
基本情報
</div>
```
このデザインは、各項目のラベルと入力枠の幅は、文字数と関係なく同じ設定するのは特徴になり、設定しやすいです。画面に項目がいっぱいになるが、文字で埋めるとからからの項目がよくあり、スペースの使い方は荒い弱点があります。

また、左右区切りのところにどの項目から右にさせるか、「入力画面⇒基本情報⇒高さ」で微調整しています。そして、左側に項目を追加する都度、画面高さの微調整が必要になる弱点があります。

### 縦配置優先とフィールドセットの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/1288479f-0a36-4984-a099-dccf05ba47be.png)


このデザインは、縦配置優先でフィールドセットが並びます。フィールドセットの幅は同じで高さが違います。「入力画面⇒基本情報⇒高さ」の調整で、どのフィールドセットから右側にさせるかを決めます。フィールドセットの高さは項目より大きいですから、余裕を持って設定すれば、数項目の増減は画面全体の配置に影響しません。

フィールドセットの中は横並び優先です。項目のラベルと入力枠の文字数を考慮して幅を設定しています。これにより、小さいスペースに大量な項目を格納できコンパクトな感じになります。

### 必須入力・ツールチップ・サブダイアログ呼び出し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/c87a97b2-1586-4f43-9c5c-543dc2d531a9.png)
```html:必須入力（タイトル）
会社名 <font color=red>
<i class="bi bi-bookmark-fill" title="必須情報"></i>
</font>
```
```html:ツールチップ（タイトル）
評価 <i class="bi bi-info-circle-fill" 
title="「資料申請」のユーザーにレベルを設定する	"></i>
```
```html:サブダイアログ呼び出し（タイトル）
ウィルス対策  <i class="bi bi-search"></i>
```
```js:サブダイアログ呼び出し（タイトル操作）
function(touchFormData){
	if (touchFormData.mode=="ref") return;
	return (new Result()).eval(`V_SOFT_inputDialog.open();`);    
}
```

## アイコンの利用
SKEにはbootstrapのアイコンを取り込んでいるため、アイコンフォントを利用できます。書き方は以下の通りです。
```html
<i class="bi bi-XXXX"></i>
```
詳細を確認する場合、以下のリンクをご利用ください。

https://icons.getbootstrap.jp/

https://github.com/efwGrp/ske?tab=readme-ov-file
オリジナルアプリ抹消

以前、オリジナルアプリを作っていましたが、AWSでデプロイしたので起動設定の関係でAWSの利用料金が発生し、月に2500円くらい掛かってます。

プログラミングスクールでやってたものです。カリキュラムにはインスタンスの停止時間を無効（つまりは常時起動）にすると書いてありました。
使っていないのに常時起動は……
不完全で人に見せられるものではなかったですし、公開しても正常に動かない。こんなアプリのために2500円毎月払うのももったいないと思いました。
今はAIがありますし、困るものではありません。
なので、インスタンスを削除し、利用料金が掛からないようにしました。（AWSのコスト画面は良く分からない）
AIを使い、何か作れれば公開したいです。

bolt.newなどで作ってもらってはいますが。(^^;
[Linux] スクリプト内で使用する定義済み変数について

### この記事について
主にスクリプト内で使用する定義済みの変数についてまとめる。
カバー範囲はLPIC1-102。

### 定義済み変数一覧
| 定義済み変数 | 内容                               | 備考                                              | 
| ------------ | ---------------------------------- | ------------------------------------------------- | 
| $0           | スクリプト名を表示                 |                                                   | 
| $#           | 引数の個数を表示                   |                                                   | 
| $$           | 実行中のシェルのPIDを表示          |                                                   | 
| $?           | 最後に実行したコマンドの結果を表示 | 0は成功、0以外は失敗で1orエラーコードが格納される | 
| $1           | 1番目の引数を表示                  |                                                   | 
| $2           | 2番目の引数を表示                  |                                                   | 
| $@           | 全ての引数を表示                  |                                                   | 
### 実行する
> スクリプト
```
#! /bin/bash

echo "script_name=" $0    #スクリプト名
echo "arg_count=" $#      #引数の個数
echo "shell_PID=" $$      #実行中のシェルのプロセスID
echo "result=" $?         #最後に実行したコマンドの結果:0は成功、0以外は失敗で1orエラーコードが格納される
echo "No.1=" $1           #1番目の引数
echo "No.2=" $2           #2番目の引数
echo "No.2=" $@           #全ての引数
```
> 実行結果
```
[root@kotaro script]# ./ArgTest aaa bbb ccc
script_name= ./ArgTest
arg_count= 3
shell_PID= 68084
result= 0
No.1= aaa
No.2= bbb
No.2= aaa bbb ccc
```