OmniAICreator/Qiita-1.07M huggingface dataset:
windows11で、sketchup6 その58

# 概要
windows11に、sketchup6を入れてみた。
rubyで、3Dを書く。
練習問題、やってみた。

# 練習問題
rubyスクリプトでセレクトしたグループを動かせ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/db6b6da8-19ed-4344-837a-51b45a4835b1.png)


# サンプルコード

```
def movea
	ss = Sketchup.active_model.selection
	sents = []
	ss.each { |e|
		sents.push(e)
	}
	copy_group = Sketchup.active_model.active_entities.add_group(sents)
	trans = Geom::Transformation.translation [5, 5, 5]
	puts trans.to_a
	copy_group.transform! trans
end

```

以上。
自作Chrome拡張機能「Title & URL Capturer」の紹介


## はじめに
日々ブラウザを利用して作業をする中で  
効率化を図るために開発したChrome拡張機能「Title & URL Capturer」を紹介します。

## 開発の背景
Chromeを用いた作業を行う中で、以下４点の思うところがあり  
今回の拡張機能を開発するにいたっています。

1. 気になったサイトの情報を手元に残しておきたい
2. タイトルとURLを手動でコピーしていたが手間がかかる
3. サイトの情報をサッと共有できるようにしたい
4. Markdownファイルとしてエクスポートしたい  

## 作成物の紹介

### Title & URL Capturer

https://chromewebstore.google.com/detail/opdlefobnmccbnejgfbafaceejomgndb?utm_source=item-share-cb

https://github.com/mistylady/TitleAndURLCapturer

### 設計思想
- ミニマムかつシンプルなものにする
- 設定は不要ですぐに使えるものにする
- ワンクリックで、コピー・エクスポートが出来るようにする

### 拡張機能の操作画面

![view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780391/d327d9e4-e0f3-462f-b312-0936d8cfed29.png)

操作画面はシンプルな1枚のポップアップ画面です。    
メッセージフィールド、ボタン2種、入力フォームで構成しています。

### 提供する機能

拡張機能はアクティブウィンドウ内にて動作し、  
全てのタブのタイトルとURLの情報を取得し以下の機能を提供します。
いずれもユーザーによるボタンクリックの操作が起点です。

#### クリップボードへコピーする機能

「Copy To Clipboard」ボタンをクリックすると  
全てのタブのタイトルとURLの情報を、クリップボードへコピーします。
クリップボードへのコピはー以下サンプルの形式で行います。

```plaintext
- Google Chrome - 高速かつ安全でカスタマイズ可能なブラウザ
	- https://www.google.com/intl/ja/chrome/
- Google
	- https://www.google.com/
- GitHub
	- https://github.com/
```

#### MarkDownファイルとしてエクスポートする機能

「Export to Markdown」ボタンをクリックすると  
全てのタブのタイトルとURLの情報を、MarkDownファイルで出力します。  
エクスポートされたファイルの中身は、以下サンプルの形式です。
  
また、デフォルトでのファイル名と見出し文字は  
「export_from_Title&URLCapturer」となっています。  
こちらは出力前に入力フォームへ任意の名称を入れれば、変更が行えます。

```plaintext
## export_from_Title&URLCapturer

- Google Chrome - 高速かつ安全でカスタマイズ可能なブラウザ
	- https://www.google.com/intl/ja/chrome/
- Google
	- https://www.google.com/
- GitHub
	- https://github.com/
```

## 開発に利用したツール類

### Plasmo
作成には拡張機能開発用フレームワークであるPlasmoを利用しています。  
Plasmoを使用することで、Chrome拡張機能のmanifest.jsonの設定が自動化され  
メインロジック部分の開発に専念でき、全体の開発効率が向上しました。  
また、折角なので使ったことがないものを利用してみたいという考えもあっての選定です。

### Pico CSS
Pico CSSは軽量なCSSフレームワークであり、  
公式でも「Minimal CSS Framework」を押し出しています。
  
Chrome拡張機能として提供するため、ファイルサイズを小さくしたい思いがあり  
ピッタリだったのと、個人的に最近のお気に入りのため採用した背景があります。

## あとがき
自分で作成したものですが、とても便利に毎日利用しています！  
設計時に心がけたミニマムさもあり、200pxの正方形なのもお気に入りポイントです。  
仕事・プライベートと場を選ばずに使えるので、ぜひ利用してみてください〜。

## 開発時に参考にしたサイト
### ツール類
- Supercharge your browser extension development – Plasmo
	- https://www.plasmo.com/
- Pico CSS • Minimal CSS Framework for semantic HTML
	- https://picocss.com/

### 内部ロジック
- chrome.tabs  |  API  |  Chrome for Developers
	- https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=ja
- chrome.downloads  |  API  |  Chrome for Developers
	- https://developer.chrome.com/docs/extensions/reference/api/downloads?hl=ja
- Navigator: clipboard プロパティ - Web API | MDN
	- https://developer.mozilla.org/ja/docs/Web/API/Navigator/clipboard
- Blob - Web API | MDN
	- https://developer.mozilla.org/ja/docs/Web/API/Blob
- URL: createObjectURL() 静的メソッド - Web API | MDN
	- https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL_static
Codewars 8 kyu simple calculator

# Codewars 8 kyu simple calculator
https://www.codewars.com/kata/5810085c533d69f4980001cf/train/python
# Task
create a simple calculator that returns the result of addition, subtraction, multiplication or division of two numbers.

# Verbalization
Conditionally divided by
If op == “+”, return x + y
If op == “-”, return x - y
If op == “*”, return x * y
If op == “/”, return x / y
Else, return "unknown value"
Add condition if type(x) == int and type(y) == int in 2.- 5.

 
# Code 
```py
def calculator(x, y, op):
    if op == '+' and type(x) == int and type(y) == int:
        return x + y
    if op == '-' and type(x) == int and type(y) == int:
        return x - y
    if op == '*' and type(x) == int and type(y) == int:
        return x * y
    if op == '/' and type(x) == int and type(y) == int:
        return x / y
    else:
        return "unknown value"
```
M5Stack 振動モータで遊ぶ。(UNO)(スタックチャンフェス、100円で入手)


いろいろ、注意
----

- 過去ログを見てね
- モータ、リレーを繋いだ時の安全対策は、各自、行うように。
- 振動モーターは、思ったより、激しいので注意
- 最悪、マイコンが壊れるも、やだな思い、互換のUNO3を選択(壊れた、時は、表面実装CPUを張り替えようと思った)(ちなみにモバイルバッテリで駆動)

目的
---

とりあえず、モータを回してみた


結果(わかりずらいが激しく振動)
----

![image_original (79).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/faef96cc-8294-4911-967b-874f212aa88b.jpeg)



プログラム
----

```c++


//sindou_UNO


void setup() {
  // put your setup code here, to run once:

  //GPIOの初期化
  pinMode(A4, OUTPUT);
  digitalWrite(A4, LOW);

}//setup


void loop() {
  // put your main code here, to run repeatedly:

  //GPIOをオンにする
  digitalWrite(A4, HIGH);
  delay(1000); //1秒待つ

  //GPIOをオフにする
  digitalWrite(A4, LOW);
  delay(1000); //1秒待つ

} //loop


```
#0099（2025/04/09）プランニングポーカーとフィボナッチ工数見積

## 開発工数見積手法

ソフトウェア開発における工数見積はプロジェクト管理において重要な作業です。特にアジャイル開発でよく使われる手法として、「プランニングポーカー」と「フィボナッチ工数見積」があります。それぞれの特徴とメリットを解説します。

---

## 1. プランニングポーカー（Planning Poker）とは？

プランニングポーカーは、チームメンバーが各開発タスクの工数を相互に意見を出し合いながら推定する手法です。

### やり方

- チームメンバー全員がカード（またはオンラインツール）を使って見積数字を示します。
- 全員が同時に数字をオープンし、異なる数字を提示したメンバーはその理由を説明します。
- チーム内での議論と合意を繰り返しながら、見積を統一します。

### 利点

- 意見の偏りを防ぎ、チームメンバーの認識を統一できます。
- チーム全員の意見を聞くことで、タスクの理解度や問題点を早期に洗い出せます。

---

## 2. フィボナッチ工数見積とは？

フィボナッチ工数見積は、フィボナッチ数列（1, 2, 3, 5, 8, 13, 21, ...）を使って、各タスクの複雑さや規模を見積もる手法です。

### なぜフィボナッチ数列を使うのか？

- 工数が大きくなるほど正確な見積が難しくなり、小さい単位での細かな見積もりは意味を持ちにくくなるため、自然と大きく間隔が広がる数列を使うことで、現実的な見積りが可能になります。

### やり方

- 各タスクに対し、フィボナッチ数列の数値でサイズを見積ります。
- 数字が大きいほど複雑さや不確実性が高いことを示します。
- 見積の差が大きければ、タスクの分割や詳細な検討が必要というサインになります。

### 利点

- 工数見積の曖昧さを効果的に扱い、不確実性を直感的に表現できます。
- 不必要な詳細見積を避け、チームの見積精度を効率的に向上できます。

---

## まとめ

- **プランニングポーカー**：チームの合意形成を促し、意識共有が目的。
- **フィボナッチ工数見積**：見積もりの不確実性を合理的に表現し、効率的に規模感を掴むことが目的。
Service Portalのデザイン設計の企業ページをいくつか紹介する

## 序文
ポータルのデザインって企業の色がでますよね。
正解のない世界ですが、一つの回答になればいいと思います。
**紹介事例は全て公開情報によって構成されています。**

- 個人的には、OOTBをいじらないデザインが好きです。日本単体で作ったオリジナルデザインのポータルが、グローバル企業のインスタンス統合プロジェクトが走った場合に、手残ったポータルはOOTBベースでないという理由で廃棄決定されるケースをみたため
- しかし、コクヨさんのデザインはいいですね。Knowledge Firstの理想的なセルフサービスの一例のようにも思えますね
- また、企業が独自のブランドやUXを重視する中、標準UIでは限界があるので、Headless化によるUX設計に舵を切るのかななどとも思っています。Headless ERPやHeadless BIが米系スタートアップにちらほらききますし

## ITSM
### コクヨ様：日経ビジネスより
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/47643444-447c-4d00-b58d-af40d764817c.png)


### JALインフォテック様：ServiceNow社事例より
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/caba8a12-8c77-4d7c-8e13-8329ff8b3be6.png)



## CSM
### 藤沢市：ふじまど
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/bd4315ac-fafb-4771-bf26-96adf789f9e3.png)



### 東広島市：市民ポータル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/93f1aaaa-2b7e-4032-9415-1cdf5c997981.png)



### 鳥栖市：市民ポータル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/df65cc7f-d27a-445c-b59d-644278ce5d0a.png)

## 追加サンプル
### [KHネオケム](https://www.comture.com/casestudy/groupware/servicenow-khneochem.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/b3e43235-8950-40b8-8d17-7b8ac62dbe9c.png)

### [NTTデータ](https://www.excite.co.jp/news/article/Dprp_49715/image/1/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/c5811698-84b8-4646-8fd8-9e9aa4395e5f.png)

### [公共デジタルサービス](https://www.servicenow.com/jp/products/public-sector-digital-services.html?state=seamless)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/515c4cac-4c3c-42ca-b0c7-9bdd9ed4c6ca.png)

### [三菱UFJ銀行](https://www.smartnews.com/ja-jp/article/4805253710156409078?placement=article-preview-social&utm_campaign=sn_lid%3A4805253710156409078%7Csn_channel%3Acr_ja_top&utm_source=share_ios_email&share_id=QraPPV)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/d7d7e567-ec6b-4e3a-98f9-41e7be9eef5c.png)
チームリーダーの役割と考え方

# はじめに
この記事では、「チームリーダーは何をする仕事なのか」「チームリーダーに必要な考え方と手法」を解説します

# チームリーダーの責務と必要スキル
チームリーダーは、以下3つが求められます
- 計画を立てる
- 計画の実行と管理を行う
- チーム内外の関係者とコミュニケーションをとる

### 計画を立てる
1, 「いつまでに」、「なにを」、「どのように」を決める
2, 運営方針（どのようなチームにしたいか）を決める
3, 運営ルール（勤怠やスケジュール管理など）を決める

### 計画の実行と管理を行う
1, 計画通りに実行する
2, 実行できるか確認する
3, 計画通りでは通りでない場合は原因を特定する
4, 原因に従い対策を検討する
5, 対策を実行する

### チーム内外の関係者とコミュニケーションをとる
1, チーム内に対して、計画の実行に関する動機付けを行う
2, チーム外に対して、上位者や他チームへの報告、連絡、相談を行う

## 計画作成の成功ポイント
そもそも「計画」は誰のために存在するものでしょうか？
チーム内だけのものではありません。チーム外（インフラチーム、営業チーム、テストチームなど）を含め、プロジェクト遂行に向けた共通認識を持つために存在しています。

計画の作成のポイントは「5W3H」を含めることです。「5W3H」を意識することで、計画が明確になります。

>例）
1, プロジェクトの目的・背景　----WHY
2, フェーズの目的　　　　　　----WHY
3, フェーズの方針　　　　　　----HOW
4, 開始条件・完了条件　　　　----HOW MUCH
5, 成果物定義　　　　　　　　----WHAT
6, スケジュール　　　　　　　----WHEN
7, 環境　　　　　　　　　　　----WHERE
8, 体制と役割　　　　　　　　----WHO
9, 会議体　　　　　　　　　　----WHO + WHEN

## WBS作成の手引き
WBSとは「Work Breakdown Structure」の頭文字をとった名称で、「予定通り実績が積みあがっているか」を確認する際に用いられます。
※一般的には、WBS＝ガントチャートと呼ぶ場合が多い

以下の観点でWBSを作成しましょう
・成果物単位で作成（作成とレビュー）がセット
・３～５人日超える場合は分割を検討する
・休暇や休日を考慮する
・１日を何時間使えるのか考える
　└朝礼や定例会議がある場合は、実働５時間しか稼働できないこともある
 ・レビューに対応できるか考える
 　└３日以降にリーダーレビューが増えてくるため、時間が確保できるか考慮する

## 進捗管理の実践方法
進捗管理の目的は、「遅延」が発生していないかを確認するためです。
メンバーに状況をキチンと報告してもらうことが重要になります。
「なぜ」と責任追及するのではなく、「なにに困っているのか」「どこに困っているのか」と聞くと報告してもらいやすい。

以下遅延原因ごとの対策一覧です。原因に対して適切なアプローチをしましょう。
### スキルマッチ
・フォローメンバーをつける
・作業内容をより明確化する
・思い切って担当変更する

### 追加タスクの発生
・やる必要性の再確認
・優先度の整理（時期をずらす）
・要員追加

### 他チームのタスク未完了
・ボトルネックになっているチームに対して、正式な場で人を巻き込んで伝える

## あとがき
チームリーダーの役割は計画の立案、実行、管理、そしてチーム内外とのコミュニケーションです。これらを効率的に遂行するためには、明確な目標設定と柔軟な対策能力が不可欠です。また、計画作成のポイントを押さえ、進捗管理を適切に行うことで、チーム全体の成功につながります。

## 参考資料
https://www.udemy.com/course/team-leader-basic/?utm_medium=udemyads&utm_source=bene-msa&utm_campaign=responsive&utm_content=top-1&utm_term=general&msclkid=405456bd2a6819b5d74231488fe307eb
memo4

```
$text = "テキスト";
$verticalText = implode("\n", preg_split('//u', $text, -1, PREG_SPLIT_NO_EMPTY));

$pdf->MultiCell(0, 0, $verticalText, 0, 'L', 0, 1);


$pdf->StartTransform();
$pdf->Rotate(90, $x, $y);  // $x, $y は回転中心座標
$pdf->Text($x, $y, '縦書きテキスト');
$pdf->StopTransform();
```
ハッカソン個人備忘録㉑：ログインに少しの“ぬくもり”を。2段階ポエム認証というアイデアをまとめました

## はじめに

ユーザ認証に新しい価値を加えるべく、「ポエム認証」というユニークな2段階認証方式の導入を検討しています。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

本設計案では、セキュリティの確保とユーザ体験の向上を両立するための手法として、感性的な要素を取り入れたポエム選択による認証フローの仕組みを提案します。

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

受講中のITスクールのハッカソン活動にて、「認証＝セキュリティ」だけではなく、「認証＝心地よい体験」に変えられないかとふと考えました。

その中で、ポジティブなポエムを認証の一部として用いるアイデアが生まれ、実現可能性や構成パターンを整理する必要性を感じたため、この設計案をまとめました。

## ポエム認証に関するシステム設計案

### 背景
ユーザ認証におけるUX向上およびポジティブな心理的体験を提供するために、従来のユーザ名・パスワードによる認証に加えて「ポエム認証」という2段階認証を導入する構想が検討中である。

### 認証フロー概要

#### 1. 新規会員登録時
- ユーザは以下の情報を入力：
  - ユーザ名
  - メールアドレス
  - パスワード
- 上記に加えて、**事前にフロントエンド側で保持されている複数のポジティブポエムから1つを選択**してもらう。
- この選択されたポエムは、ユーザ情報とともにバックエンドへ送信・保存される。

#### 2. ログイン時
- 1枚目のログイン画面にて、ユーザ名およびパスワードを入力。
- バックエンドにて第一段階の認証を実施。
- 認証成功後、**2枚目の画面へ遷移**。
- 2枚目の画面では、**新規登録時に選択されたポエムを再度プルダウンから選択**する形式とし、これによりポエム認証（二段階目）を実施する。

### UI/UX設計方針
- **1画面目**：ユーザ名・パスワードの入力欄＋ログインボタン
- **2画面目**：ポジティブポエムのプルダウン選択欄＋確認ボタン

### 実装方式検討
- 当初は「ネガティブ発言をポジティブ変換し、オリジナルポエムを生成する」機構を新規登録時に組み込むことを検討していた。
- ただし、生成系AIを使用するアプローチは**処理負荷の高さ**および**システムレスポンスへの影響**が懸念される。
- このため、**あらかじめ用意された5種類程度のポジティブポエムをフロントエンドで保持し、選択式のUXを構築する案**が現実的であると判断される。

### 懸念点とその対応
| 懸念点 | 対応策 |
|--------|--------|
| 生成系AIによる遅延 | フロント側で静的に5つのポエムを保持・選択制とする |
| 認証強度の担保 | パスワード＋ポエムの2段階で十分な強度が見込まれる |
| 選択ポエムの漏洩リスク | ポエム選択の乱数順表示などで推測を困難化 |

### 今後の検討事項
- ポエム選択の記憶保持期間や再設定機能の導入可否
- 管理者によるポエムの編集・追加機能
- よりパーソナライズドなポエム生成の実現に向けた非同期AI利用検証

---

## まとめ
- ポエム認証は、セキュリティとユーザ体験の両立を目指すユニークな認証方式である。
- 実装面では、フロントエンド側で静的にポエムを提供し、処理負荷を軽減するアプローチが有効。
- 感性に訴える設計は、ユーザの記憶定着やサービスへの好感度向上にも寄与する可能性がある。

今後のプロトタイプ開発やユーザテストを通じて、より実用的か前向きに検討していきたいと思いました！！
Rubyのハッシュ、キーはシンボル？文字列？

## はじめに
Rubyでは頻繁に使われるハッシュ（Hash）ですが、キーの書き方に2種類あるのをご存じでしょうか？

```ruby 
# シンボル風
{ name: "Alice", age: 30 }

# ロケット記法
{ "name" => "Alice", "age" => 30 }
```
この2つ、パッと見は似ているけど、キーの型が違います。意外と見落としがちな違いと、どう使い分けるべきかを、実例とともに解説します。

## 1. ハッシュの2つの書き方
### シンボル記法（省略スタイル）
```ruby
user = { name: "Alice", age: 30 }
p user 
# 内部的にこう解釈されます
# => {:name=>"Alice", :age=>30}
```
つまり、キーは :name や :age というシンボル型です。

### ロケット記法
```ruby 
user = { "name" => "Alice", "age" => 30 }
p user 
# 内部的にこう解釈されます
# => {"name"=>"Alice", "age"=>30}
```

こちらは**文字列型**のキー。

この違いが、後でアクセスする際に影響を与えます。

## 2. キーの型を確認してみよう
```ruby 
user1 = { name: "Alice" }
user2 = { "name" => "Alice" }

p user1.keys   # => [:name]
p user2.keys   # => ["name"]

p user1[:name]     # => "Alice"
p user1["name"]   # => nil
```
シンボルと文字列は全くの別物なので、アクセスも合わせる必要があります。

### 3. 使い分けの原則と比較

| シーン                                   | 推奨キー | 理由                                                   |
|----------------------------------------|----------|--------------------------------------------------------|
| 固定された属性（名前・年齢など）       | シンボル | 軽量で高速。明示的な用途に最適                         |
| ユーザー入力、外部データ（JSONなど）   | 文字列   | 実行時に変化するため、文字列の方が適している         |

## 4. 具体的な使い分けサンプル
### サンプル1：ユーザープロファイル（シンボル）
```ruby 
profile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
}

p profile[:email]  # => "alice@example.com"
```
**ポイント**： キーがコード内で固定されているならシンボルがスマート。

---
### サンプル2：フォーム入力のパラメータ（文字列）
```ruby 
params = {
  "name" => "Bob",
  "age" => "25"
}

p params["name"]  # => "Bob"
p params["age"]  # => "25"
p params[:age]  # => nil
```
**ポイント**： WebアプリやCLIでのユーザー入力は基本文字列で扱われる。

### サンプル3：JSONなど外部データの読み込み（文字列）
```ruby 
require 'json'

data = JSON.parse('{"name":"Carol","age":22}')
p data["name"]  # => "Carol"
```

### 混ぜると危険！
```ruby 
user = {
  "name" => "Dave",
  name: "David"
}

p user.keys
# => ["name", :name]
```
**見た目は同じでも別キー**として扱われるため、意図しないデータの重複やバグの元に。

### 6. シンボルと文字列の変換Tips
```ruby 
# 文字列 → シンボル
p "name".to_sym  # => :name
# シンボル → 文字列
p :name.to_s  # => "name"

# ハッシュのキーをシンボルに変換
hash1 = { "name" => "Alice", "age" => 30 }
p hash1.transform_keys(&:to_sym)
# => {:name=>"Alice", :age=>30}

# ハッシュのキーを文字列に変換
hash2 = { name: "Alice", age: 30 }
p hash1.transform_keys(&:to_s)
# => {"name"=>"Alice", "age"=>30}
```

## 終わりに
**まとめ**
- シンボルと文字列は見た目が似ていても全く違う型。
- 固定キーはシンボル、動的なキーは文字列と覚えると使い分けやすい。
- どちらかに統一することが、コードの読みやすさ・バグ回避に繋がる。

Rubyのハッシュはとても柔軟だからこそ、キーの型に意識を向けることで、より読みやすく安全なコードになります。迷ったときはこの記事に立ち返ってみてください！

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

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

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

# はじめに
「サザエさん」で例えて、MCP（Model Context Protocol）を説明

## 🏠 登場人物（AIの世界風）

- **サザエさん**：MCPホスト（指令を出すAI）
- **カツオ、ワカメ、波平、フネ、タマ**：MCPサーバ（専門スキルを持つツールたち）
- **マスオさん**：全体の調整役（連携マネージャー的存在）

---

## 🧠 ストーリーでMCPを理解しよう！

### 🎯【目的】
サザエさんが「家族みんなでお花見に行く準備をしたい！」と言い出す。

---

### 🗣️【MCP以前（ふつうのAPI時代）】
サザエさんは、それぞれの家族に細かい指示を出さないと動いてくれない。

- サザエ：「カツオ、10時におにぎり買ってきて！」
- サザエ：「波平、近くの公園の空き状況を電話で聞いて！」
- サザエ：「フネ、お茶を3本冷やしておいて！」
- つまり、**すべて手動＆個別指示。疲れる…！**

---

### 💡【MCP時代】
サザエさんはざっくり一言だけ！

👩‍🦱「みんな、お花見の準備お願いね～！」

すると…

- カツオ：「じゃあオレ、おにぎりとお菓子買ってくるよ！」
- 波平：「公園の混雑状況は昨日よりマシじゃな。予約しておくかの」
- フネ：「お茶とレジャーシートはもう車に積んでおきましたよ」
- タマ：「にゃー！（…たぶん見守り担当）」

家族＝AIエージェントたちが、**自然に会話しながら連携して準備完了**！

---

## 🌸つまりMCPとは？
> 「お花見準備して～」という**ざっくりした自然言語**の指示で、  
> 家族（AIエージェントたち）が**自律的に相談＆分担しながら連携してタスクを進める**仕組み。

これがMCPの世界観なんやね✨



## 🔧 あなたの問いに対して整理すると：

### Q1.  
**「evolved_chip」を動画ファイルやプログラムコードの中に入れる発想でいうと、MCPは単なるインターフェイスなのか？**

▶️ **はい、基本的には「インターフェイス（接続仕様）」です。**  
MCP自体は、AIやツール同士が「自然言語」でやり取りするための**通信のルール・手段（=インターフェイス）**を提供しているにすぎません。

---

### Q2.  
**自分の考える『サービスが自律成長する』概念にとって、MCPは「インターフェイスだけ」なのか？**

▶️ それも**その通り**で、  
MCP単体は「自律的成長」や「学習」そのものではないんです。  
でも、それを**可能にする“土台”**ではあります。

たとえば：

> 🔌「コンセント＝MCP」  
> 🧠「電化製品＝AI・サービス」  
> 💡「自動で連携して発展する世界＝MCPが整った先の未来」

---

## 💡 あなたの「evolved_chip」構想との対応

| あなたの構想                  | MCPの立ち位置               |
|-----------------------------|----------------------------|
| 動画やコードに埋め込む「evolved_chip」 | AIやツールとつながる**脳や神経のソケット** |
| サービスが自律成長する世界        | MCPによって**可能になる前提の通信ルール** |
| 自分が設計する"進化系サービス"     | MCPはその中の「**共通言語/土台**」 |

---

## ✅ まとめ：  
- **MCP＝インターフェイス規格**（自然言語でAIやツールをつなぐ通信ルール）
- **自律成長や進化＝その上で走るアーキテクチャのデザインに依存**
- **あなたの「evolved_chip」構想＝MCPを活用すればより自然に分散知能的な成長が可能になる世界**
【GStreamerトラブルシューティングTips】C++からカスタムプラグインが読み込めない場合の対処法

# はじめに
GStreamerをC++から呼び出す際に、カスタムのプラグインが読み込めない場合の対処方法を示す。

# 動作確認環境
* Ubuntu 20.04 x64

# 原因と対策
## 原因1：パスが通っていない

GStreamerで利用したいカスタムプラグインが配置されているフォルダのパスを通す必要がある。
C++でのGStreamerのパスを通すには、環境変数「```GST_PLUGIN_PATH```」を設定する。

bashに設定する、もしくは、C++で環境変数を設定する。

### bashに環境変数を設定する場合
bashの```~/.bashrc```に以下のように設定する。

```bash
export GST_PLUGIN_PATH=/path/to/plugin1:/path/to/plugin2
```
* パスが複数ある場合は、コロン（```:```）で区切る

### C++内で環境変数を設定する場合

```C++
#include <cstdlib>
setenv("GST_PLUGIN_PATH", "/path/to/plugin1:/path/to/plugin2", 1);
```
* 第3引数：1とすると、既存の値を上書きする

## 原因2: 参照ライブラリが更新されていない  

パスを通しているにも関わらず、プラグインが利用できない場合は、以下を実行する。GStreamerの初期化（```gst_init```）後などに、```GST_PLUGIN_PATH```を更新すると発生する。

```c++
#include <gst/gst.h>
gst_update_registry();
```

# まとめ
GStreamerをC++から呼び出す際に、カスタムのプラグインが読み込めない場合の対処方法を紹介した。

# 参考

https://gstreamer.freedesktop.org/documentation/gstreamer/gstregistry.html?gi-language=c#gst_update_registry
栽培ロボットをインストール 1st

 より詳しくは
 「栽培ロボットを作ろう .bis」
https://qiita.com/nanbuwks/items/e667d432a697669dcc93
をごらんください

植物栽培ロボット Ver.210231022 を元に説明します。

![IMG_20250409_062207.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0f2c60cf-30d4-4cfc-99a8-63a0b0fbaaed.jpeg)

バージョンはここに
![IMG_20250409_062540.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/9037e10a-f644-4625-8ce8-d2e821d062ba.jpeg)

モータードライバーを向きに注意してインストールします。
![IMG_20250409_062550.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/3466dc8f-9919-44a3-8236-7829c5366953.jpeg)

ESP32 DekKitを装着します。
![IMG_20250409_062554.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a1b5698c-f0bd-4319-9d9f-83eba91f4818.jpeg)

ESP32 DekKitを配線します。

![IMG_20250409_062719.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7558131e-b24d-41f7-bf70-c687158c5e32.jpeg)


# 動作テスト
まずは、ESP32のプログラム環境を整えます。

cf.,
「ESP32 Arduino を設定」
https://qiita.com/nanbuwks/items/d5332d068c9c597d6e00

Lチカプログラムのポートを GPIO2 にすると、圧電ブザーから音がなります。
![IMG_20250409_062745.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/598f0f49-a630-4222-b15f-36856ba42f95.jpeg)

# ポンプ、バルブの動作

12V をつなぎ、GPIOを操作するとモータードライバーにつながったバルブやポンプが動作します。モニターLEDでも動作を確認できます。


# GPIO割当

|機能|GPIO||
|:---:|:---:|:---:|
|ポンプ1|25||
|ポンプ2|26||
|バルブ1|27||
|バルブ2|14||
|バルブ3|13||
|バルブ4|21||
|水位センサー1|34||
|水位センサー2|35||
|水位センサー3|32||
|ブザー|2||
|温度センサ|VP||
|GROVE1|22||
|GROVE2|VN||
|リレー|12||

# パイピング
パイピング。右上に延びるのが水タンクへ。左側の4つが各プランターへ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b9b781ca-9baf-33ce-69da-7fb5db9bb8d0.png)

ポンプは給水ポンプと排水ポンプで上下が逆になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/218c9767-955a-a4fc-95b5-617fb0e97382.png)



ポンプは入口と出口があります。外に近いほうが吸入、中心に近いほうが吐出です。

![IMG_20250411_062537.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8bbd4f23-7555-41ed-8caf-880e41ddbdc4.jpeg)
Claude のアーティファクトで Tailwind CSS のレスポンシブデザインにハマった

Claude のアーティファクトは、HTML や React (JSX) のコードスニペットをインタラクティブに表示・実行できる便利な機能です。しかし、Tailwind CSS でレスポンシブデザインを使おうとして、予期せぬ壁にぶつかりました。

本記事では、遭遇した問題と、その解決に至るまでの試行錯誤、そして得られた知見を共有します。

# アーティファクト環境における Tailwind CSS の初期状態

まず前提として、アーティファクト環境における Tailwind CSS の利用状況は、HTML と JSX で異なります。

- **HTML 環境:** デフォルトでは Tailwind CSS は利用できません。利用するには、CDN などから明示的に CSS を読み込む必要があります。

- **JSX 環境:** デフォルトで基本的な Tailwind クラスは利用できます。しかし、`md:` といったレスポンシブ修飾子が付いたクラスはデフォルトでは機能しません。レスポンシブデザインを実現するには、こちらも CDN などから明示的に読み込む必要があります。

このため、特にレスポンシブグリッドのような機能を使おうとすると、どちらの環境でもひと手間必要になります。

# 遭遇した問題点

- **`<script>` タグ (Tailwind Play CDN) が機能しない:**
   * HTML 環境で Tailwind を有効にするため、また JSX 環境でレスポンシブ機能を有効にするために、Play CDN `<script src="https://cdn.tailwindcss.com"></script>` を試しましたが、どちらの環境でもスタイルが適用されませんでした。
   * **観察結果:** アーティファクトのプレビューで DOM を確認すると、この `<script>` タグ自体が削除されていました。セキュリティ等の理由でフィルタリングされているようです。

- **レスポンシブクラスが効かない (JSX 環境):**
  * JSX 環境で `grid` や `bg-blue-500` のような基本クラスは適用されるものの、`md:grid-cols-3` のようなレスポンシブクラスが画面サイズを変更しても有効になりませんでした。

- **`<link>` タグ (静的 CSS CDN) でも特定の CDN が機能しない:**
  * 静的な CSS ファイル `tailwind.min.css` を `<link>` タグで読み込む方法を試しました。
  * `href` に JSDelivr の URL を指定した場合、`<link>` タグは DOM 上に存在しているにも関わらず、Tailwind のクラスが有効になりませんでした。

```html:NG
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
```

# 解決策

試行錯誤の結果、cdnjs から静的 CSS を読み込むことで、Tailwind CSS（レスポンシブクラスを含む）をアーティファクト上で機能させることができました。

```html:OK
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
```
:::note info
配信されるファイルの内容は JSDelivr と cdnjs で同一です。
:::

調査時のログを示します。

- https://claude.ai/share/14771c0d-1b96-4647-8f94-3e12b139cb99

# 知見と考察

今回の経験から、Claude アーティファクト環境で外部 CSS（特に CDN 経由）を利用する際には、以下の点に留意する必要があると考えられます。

* **`<script>` タグのフィルタリング:** 動的な外部スクリプトは、アーティファクト環境の制約により読み込み・実行が許可されない場合があります。外部 CSS の適用には `<link>` タグがより確実です。
* **CDN ホストの選択:** アーティファクト環境の内部的なネットワークポリシーやキャッシュ機構、あるいは他の内部的な要因により、特定の CDN ホストからのリソース読み込みが阻害される可能性があります。問題が発生した場合は、別の CDN ホストを試すのが有効なデバッグ手段となり得ます。
* **環境固有の挙動:** アーティファクトのような特殊な実行環境では、単体の HTML ファイルとは異なる挙動を示す場合があるため、観察と試行錯誤による対処が必要になることがあります。

# まとめ

Claude アーティファクトで Tailwind CSS のレスポンシブ機能（レスポンシブグリッド等）を使いたい場合は、まず `<link>` タグを使って cdnjs のような信頼できる CDN から静的 CSS ファイルを読み込むことを試してみてください。これにより、HTML/JSX の両環境で Tailwind のフル機能が利用可能になるはずです。

ここで調査したことは以下のプロジェクトで使用しています。

https://github.com/7shi/claude-slide
【RSpec初学者】contextを使ってテストを読みやすく整理する

# 【RSpec入門】contextを使ってテストを読みやすく整理する

RailsでRSpecのモデルテストを書いていて、`context`という便利な構文を知りました。  
これは「どういう前提条件のもとでテストを行うのか？」を整理して表現するためのものらしいです。

今回は、実際に`Article`モデルのテストで`context`を使ってみたので、その内容をまとめてみました。

## 書いたテストコード

```ruby
require 'rails_helper'

RSpec.describe Article, type: :model do
  context 'タイトルと内容が入力されている場合' do
    before do
      user = User.create!({
        email: 'test@example.com',
        password: 'password'
      })
      @article = user.articles.build({
        title: Faker::Lorem.characters(number: 10),
        content: Faker::Lorem.characters(number: 300)
      })
    end

    it '記事を保存できる' do
      expect(@article).to be_valid
    end
  end
end
```

## そもそもcontextとは？

- `context` は「前提条件（= テストする状況）」をグループ分けする。
- 今回、「タイトルと内容が入力されている場合」という条件を指定してみた。
- `context`の中に複数の`it`（テスト内容）を書くことができ、条件ごとにまとめられる。

## beforeブロックについて

- `before do ... end` の中に、各テストの前に毎回実行したい処理を記載。
- 今回は、ユーザーと記事のセットアップをここにまとめていく。
- `@article` というインスタンス変数にしておくことで、`it`ブロックの中でも使える。

## 実行コマンド

ターミナルで以下のコマンドを実行

```ruby
bundle exec rspec spec/models/article_spec.rb
```

## 実行結果

```ruby
Finished in 0.07647 seconds (files took 1.12 seconds to load)
1 example, 0 failures
```

成功しました

## わかったこと

- `context` を使うことで、テストの構造が見やすくなり、条件ごとの整理がしやすくなる
- 共通のセットアップ処理は `before` ブロックにまとめると便利

---

読んでいただきありがとうございます。
初学者のため、間違えていたらすいません
【RSpec初学者】モデルのバリデーションテストを書いてみた（Articleモデル編）

# 【RSpec入門】モデルのバリデーションテストを書いてみた（Articleモデル編）

Rails初学者の私が、RSpecでモデルのテストを書いてみました。  
今回は、`Article`モデルに対して「タイトルと内容が入力されていれば保存できる」というシンプルなテストを実行したときの備忘録です。

## 事前準備

- Rails（今回はバージョン6系）
- RSpec（`rspec-rails`）をGemfileに追加し、セットアップ済み
- ArticleモデルとUserモデルがある（ArticleはUserに属する）

## テストコード

以下が、実際に書いたテストコードです。

```ruby
require 'rails_helper'

RSpec.describe Article, type: :model do
  it 'タイトルと内容が入力されていれば、記事を保存できる' do
    user = User.create!({
      email: 'test@example.com',
      password: 'password'
    })

    article = user.articles.build({
      title: Faker::Lorem.characters(number: 10),
      content: Faker::Lorem.characters(number: 300)
    })

    expect(article).to be_valid
  end
end
```

### 解説

- `user = User.create!`：テスト用のユーザーを作成  
- `user.articles.build`：そのユーザーに紐づく記事を作成（まだ保存はしていない）  
- `Faker`：ダミーデータを生成する便利なgem（`faker`をインストールしておく必要がある）  
- `expect(article).to be_valid`：バリデーションエラーがないことを確認。 

## テストの実行

以下のコマンドでテストを実行する。

```ruby
bundle exec rspec spec/models/article_spec.rb
```

## 実行結果

```ruby
Finished in 0.07585 seconds (files took 0.97437 seconds to load)
1 example, 0 failures
```

1つのテストができた。

## 調べてみた：他の `expect` の書き方いろいろ

RSpecでは、バリデーション以外にもいろいろな形で `expect` を使ってテストを書きやすくできるらしい。

### 値の一致を確認したいとき

```ruby
expect(article.title).to eq("テストタイトル")
```

### 保存されたことを確認したいとき

```ruby
article.save
expect(article).to be_persisted
```

### エラーになることをテストしたいとき

```ruby
expect {
  Article.create!(title: "", content: "")
}.to raise_error(ActiveRecord::RecordInvalid)
```

### 配列に特定の要素が含まれているか

```ruby
expect([1, 2, 3]).to include(2)
```

### 複数のオブジェクト数を確認したいとき

```ruby
expect(Article.count).to eq(1)
```

---

引き続き、テストについて学んでいきたいと思います。
間違えていたら、すいません。
公開鍵暗号方式：RSAについて

RSAは、GitLabでの登録など開発でも利用する公開鍵暗号方式の暗号です。鍵生成はコマンド実行で作成されていますが、どんなアルゴリズムで動作しているのか調査しました。

# RSAの概要
RSAは、公開鍵暗号方式（Public Key Cryptography）の一つで、暗号化やデジタル署名に広く使われています。この仕組みは、1977年にロナルド・リベスト（Ronald Rivest）、アディ・シャミア（Adi Shamir）、レオナルド・エーデルマン（Leonard Adleman）の3名が考案しました。それぞれの頭文字から「RSA」という名前がついています。

RSAは公開鍵暗号方式のため、次の2つの鍵を使います：

+ 公開鍵（Public Key）：公開していて誰でも使える鍵 。暗号化に使用。
+ 秘密鍵（Private Key）：所有者だけが知っている鍵。復号化に使用。
### 安全性の理由
RSAは「素因数分解」の難しさを安全性の根拠にしています。巨大な数（n）を2つの素数（pとq）に分解するのが非常に難しいため、秘密鍵の推測を難しくしています。

# RSAのアルゴリズム
### ①鍵の作成
1. 大きな素数を2つ選ぶ（pとq）
例：p = 61, q = 53
2. これらを掛け合わせて「n」を計算 n = p × q
例： n = 61 × 53 = 3233
3. オイラー関数 ϕ(n) = (p − 1) × (q − 1) を計算
例：ϕ(3233) = (61 − 1) × (53 − 1) = 3120
4. 「公開鍵」の指数e を選ぶ
1 < e < ϕ(n) で、かつ ϕ(n) と互いに素である値(「互いに素」とは、「共通の約数が1のみ」という意味)
例：e = 17（よく使われる値）
5. 「秘密鍵」の指数d を計算
d は e × d ≡ 1(modϕ(n)) を満たす値 (e × d をϕ(n)で割った余りが1になるようなd)
例：17 × 2753 mod 3120 = 46801 mod 3120 = 1
d = 2753 (詳細な計算は省略)
6. 鍵の完成
公開鍵：(e, n) 例：(17,3233)
秘密鍵：(d, n) 例：(2753, 3233)
### ②メッセージの暗号化
1. 送りたいメッセージを数値Mに変換
例：「HELLO」をASCIIコードやUnicode値などで1文字ずつ数値に変換
2. 公開鍵 (e,n)を使って暗号文Cを計算
### ③メッセージの復号化
1. 暗号化されたメッセージCを受信
2. 秘密鍵(d,n)を使って元の数値化されたメッセージMを計算
# PythonによるRSAアルゴリズムの実装
RSAを用いた暗号・復号について、Pythonで実装してみます。

### generate_large_prime
```
# 素数生成
def generate_large_prime(bits=8):
  while True:
    prime = random.getrandbits(bits)
    if isprime(prime):
      return prime
```
非常に大きな素数をランダムに生成します。今回はサンプルのため8ビットの数値を生成していますが、実際の鍵生成では2048ビットから生成されます。
sympyモジュールのisprime(x)はxが素数化を判定する関数です。

### generate_keys
```
 # 鍵の生成
def generate_keys(bits=8):
  p = generate_large_prime(bits)
  q = generate_large_prime(bits)
  while p == q: # 異なる素数にする
    q = generate_large_prime(bits)

  n = p * q
  phi = (p - 1) * (q - 1)

  # 公開鍵の指数eを選ぶ
  e = random.choice([3, 5, 17, 257, 65537]) # よく使われる値
  while gcd(e, phi) != 1: # phiと互いに素な値を選ぶ
    e = random.randint(2, phi - 1)

  # 秘密鍵の指数dを選ぶ
  d = mod_inverse(e, phi)

  return (e, n), (d, n) # 公開鍵, 秘密鍵
```
前述したアルゴリズムに従って公開鍵・秘密鍵を生成します。 秘密鍵の指数dの計算については、Pythonのsympyモジュールのmod_inverseを利用しています。

### encrypt
```
# 暗号化
def encrypt(plaintext, public_key):
  e, n = public_key
  plaintext_int = [ord(char) for char in plaintext]
  chipertext = [pow(m, e, n) for m in plaintext_int]

  return chipertext
  ```
公開鍵を使ってメッセージを暗号化します。
まずメッセージの各文字をord()でUnicode値に変換して数値の配列にします。
その後、各数値を暗号化しますが、暗号化の際にpow()を用います。
powは引数が3つ渡されたとき、以下のような計算を行います。（暗号の計算にとても都合がよい機能です）
+ pow(a, b, c) == a ** b % c # aのb乗をcで割った余り

### decrypt
```
# 復号化
def decrypt(ciphertext, private_key):
  d, n = private_key
  decrypted_int = [pow(c, d, n) for c in ciphertext]
  decrypted_text = ''.join(chr(m) for m in decrypted_int)

  return decrypted_text
  ```
秘密鍵を使って暗号化されたメッセージを復号します。
暗号化と逆にpow()で各Unicode値を計算し、対応する文字に変換してメッセージを復元します。

## 実行例
以下に鍵生成し、メッセージ「Hello, world」を暗号化・復号化した結果を記載します。

![スクリーンショット-2025-01-31-20.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676048/2eabc505-01a6-436a-b238-8dd27db23fbe.png)


# まとめ
今回は、RSAについて解説しました。暗号化の技術は、業務・私生活問わず様々なところで利用されています。 機会がありましたら各自で調べてみるのも面白いかもしれません。

# 参考サイト
https://zenn.dev/atusi/articles/aca8cd04c31a0a
Geminiで侍を描いてみた。

# 概要

Geminiで侍を描いてみました。

# 実装

プロンプトと実行結果は以下の通りです。

```
炎の刀を使う侍を描いてみてください。
```

![炎の刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/8740f842-c64a-45ff-8d61-86bdfc9fe2d2.png)

```
氷の刀を使う侍を描いてみてください。
```

![氷の刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/00e97f0a-3bb8-46c1-89a3-76102c12a566.png)

```
電撃の刀を使う侍を描いてみてください。
```

![電撃の刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/b6cd291d-15a4-487f-8f5b-c7c6a2281968.png)

```
光の刀を使う侍を描いてみてください。
```

![光の刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/15514356-614b-4a01-becb-76878a755b31.png)

```
水の刀を使う侍を描いてみてください。
```

![水の刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/2c31d35c-8a4c-4c7b-b47c-95306b96b163.png)

```
闇の刀を使う侍を描いてみてください。
```

![闇の刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/ae36c6f5-1d9a-4091-bc8a-be15327d6bd3.png)

```
聖なる刀を使う侍を描いてみてください。
```

![聖なる刀を使う侍_20250409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/31c43ad4-603e-4617-847f-2b7971f74337.png)

いい感じです。

# まとめ

何かの役に立てばと。
競プロ日記#25/04/08

# アルゴ式-[部分列チェッカー](https://algo-method.com/tasks/ec9cff3176b54b53)
- 部分文字列とは違うということとあくまでも部分列なので順番は順守しなければならない部分がポイント
```
// Sの中でTを順番に探す
while (i < N && j < M) {
    if (S[i] == T[j]) {
        j++;  // Tの次の文字を探す
    }
    i++;  // Sの次の文字を調べる
}

// jがTの長さに達していれば、TはSの部分列
    return j == M;
```
- 二つの文字列についてi,jの2つのカウンターで並行的に走査していくのがポイント
- これに近い実装はできたがイマイチ答えが合わなかった。GPT先生に聞いた。

# アルゴ式-[メモ化のメリット (1)](https://algo-method.com/tasks/5f674b32c7d3ca93)
- さほど難しくないのだが各整数が呼ばれた回数を記録するカウンターの管理が適切ではなかった。
- 私は以下の様にmain関数内で定義したカウンタを参照渡しで渡す形にしてしまった。
```
int rec(int n, vector<int>& vec){
    
    vec[n - 1]++;
    if (n == 1 or n == 2){
        return 1;
    }else{
        return rec(n - 2,vec) + rec(n - 1,vec);
    }
}
```
- 解説ではグローバルで定義した配列をそのまま操作していた。
```
vector<int> counter(X+1);

int rec(int n) {
    counter[n]++;
    if (n==1 || n==2) {
        return 1;
    }
    else {
        return rec(n-2) + rec(n-1);
    }
}
英語圏での文章の表記ルール

# 英語圏での文章の表記ルールがわからない
英語で技術記事を書こうだとか、海外のIT担当へ向けた資料をつくろうだとかしたときにいつも迷う。いつも迷うので記事にすることにした。
例えば、「今日の作業: ○○」みたいに「:」を使っていいのか？などを明らかにしていきたい。

# 記号編
## スペース「 」
1. 記号の前にはスペースを入れない
1. 後ろに一つスペースを入れる

が基本。以下例外。

例外…
a) ハイフン「-」・ダッシュ「―」・スラッシュ「/」には前後共にスペース不要

b) カッコ・引用符には外側にひとつスペース・内側にはスペース不要。

c) 句読点（後ろにスペース）とカッコ（前にスペース）が続く場合、その間に入るスペースはひとつにまとめる。

## ピリオド「.」
### 省略を示すピリオド
例えば、
> Friday → Fri. 
> United States of America → U.S.A. 

のような使い方である。
ただし、FriやUSAのようにピリオドを省略する書き方も増えており、省略してもしなくても支障はなさそう。大事なことは、どれを選ぶか決めたら統一することみたいだ。

※ AP StylebookというAP通信社が出しているライティングのルール集が参考にされることがあるようだが、こちらではもう少し厳格なルールになっている。

### 文の最後のピリオド
文章の最後に複数の記号が来た時にどうすればいいか。
実例で記す。

1. ?!の場合
    > 正：I've never seen Who's Afraid of Virginia Woolf?
    > 誤：I've never seen Who's Afraid of Virginia Woolf?.

    > 正：He used to work at Yahoo!
    > 誤：He used to work at Yahoo!.
    
1. "の場合
    > 正：Laura said, “We will continue this tomorrow at 8:00 a.m.”
    > 誤：Laura said, “We will continue this tomorrow at 8:00 a.m.”.
    
    > 正：The president’s speech both began and ended with the word “freedom.”
    
    > 正：Yesterday he asked, “Why is it so cold on Mars?”
    > 誤：Yesterday he asked, “Why is it so cold on Mars?”.


1. ()の場合
    > 正：Hotel rooms are likely to be in short supply throughout August (the peak travel period).
    
    > 正：Their house was the largest one on the block. (It also happened to be the ugliest.)

## 疑問符「?」
フォーマルな場面では省略しないこと。
ただし日本語ではフォーマルな場面には相応しくない。

## コロン・セミコロン「:;」
### コロンの意味
例示・補足説明・引用・強調の役割を持つ。
> There are many languages I wanna learn: english, spanish, danish and chinese.

### セミコロンの意味
「または」「そして」という意味で、関係のある2文をつなぐ。
接続詞の代わり、または接続詞と一緒に使うことができる。

# 大文字編
固有名詞の場合、すべての単語の1文字目は大文字。
なお、文頭以外の前置詞や冠詞は小文字。
> Back to the Future

単語の全てを大文字にすると強調の役割を果たすが、怒っている印象を残すので避けた方がいい。イタリックにする・色を変えるなどで対応。

# 数字・日付編
後日まとめたい。

# まとめ
こうやって調べてみると、知らずに誤用していた表現は結構あった。
今回のゴール、「Today’s task: xxxといった書き方はできるのか？」が結局わからなかったのでChatGPTに聞くと、カジュアルでシンプルなメモであれば意味はわかる、という回答が返ってきた。

# 参考
https://nativecamp.net/blog/20211010_writing
https://www.best-teacher-inc.com/blog/knowledge-semi-colon-colon
https://www.thepunctuationguide.com/period.html
【AIX】データ転送が停止する一因：ulimit

# はじめに
AIXをインストールした直後のLPARに対してデータを転送した際に、一定量のデータを転送して停止した際のメモです。
`/etc/security/limits`を書き換えることで解決できました。

# 実施環境
- 転送元：192.168.t.t (転送ファイルを持つ)
- 転送先：192.168.r.r (AIXをインストールした直後)
- 転送ファイル：test (8304MB)
- 転送方法：scp

# 手順
scpコマンドを利用して、8304MBのtestファイルを転送した際に、1026MBの転送を行ったところで停止してしまいました。

```:@192.168.t.t
# scp -r test root@192.168.r.r:/
root@192.168.r.r's password:
test     12% 1026MB  26.2MB/s   04:38 ETA
scp: write remote "/test": Failure
scp: remote fsetstat: Failure
scp: failed to upload file test to /
```

`ulimit -a`により転送先のユーザー処理リソース制限の設定を確認したところ、file(blocks)が転送ファイルのサイズと比較して小さな値に制限されていました。

```:@192.168.r.r
# ulimit -a
time(seconds)        unlimited
file(blocks)         2097151
data(kbytes)         131072
stack(kbytes)        32768
memory(kbytes)       32768
coredump(blocks)     2097151
nofiles(descriptors) 2000
threads(per process) unlimited
processes(per user)  128
```

転送先の`/etc/security/limits`を編集し、file(blocks)の制限をunlimitedにしました。

```:@192.168.r.r
vi /etc/security/limits
```

fsize = 2097151をfsize = -1に変更しました。
-1は制限がないことを示しています。

変更前
```:@192.168.r.r
default:
        fsize = 2097151
        core = 2097151
        cpu = -1
        data = 262144
        rss = 65536
        stack = 65536
        nofiles = 2000
```
変更後
```:@192.168.r.r
default:
        fsize = -1
        core = 2097151
        cpu = -1
        data = 262144
        rss = 65536
        stack = 65536
        nofiles = 2000
```

`/etc/security/limits`を変更した転送先サーバー側でログインし直すと、
ユーザ処理リソース制限のfile(blocks)がunlimitedに変更されました。

```:@192.168.r.r
# ulimit -a
time(seconds)        unlimited
file(blocks)         unlimited
data(kbytes)         131072
stack(kbytes)        32768
memory(kbytes)       32768
coredump(blocks)     2097151
nofiles(descriptors) 2000
threads(per process) unlimited
processes(per user)  128
```

8304MBのtestファイルを再度転送すると、全て転送することができました。

```:@192.168.t.t
#scp -r test root@192.168.r.r:/
root@192.168.r.r's password:
test    100% 8304MB  26.5MB/s   05:13
```

##### 気をつけること
```
ulimit -f unlimited
```
こちらのコマンドでも、file(blocks)はunlimitedに変更可能です。
しかし、`/etc/security/limits`は変更されないため、**再ログインした際に変更前の値に戻ります**。

以上です。
【実は知らない】Pythonのlistとtupleの意外な違い10選

# 【実は知らない】Pythonのlistとtupleの意外な違い10選

Pythonを使っていると、`list` と `tuple` を見かけることがよくありますよね。  
「リストは変更できて、タプルはできない」くらいは知っていても、  
実はそれ以外にもたくさん違いがあるんです。

この記事では、**初心者の方にもわかりやすく**  
`list` と `tuple` の「意外と知られてない違い」を10個にまとめました！

---

## 🔰 まずはざっくり違いをおさらい

| 項目       | list (`[]`)           | tuple (`()`)             |
|------------|------------------------|---------------------------|
| 変更可能か | ✅ 変更できる         | ❌ 変更できない（イミュータブル） |
| 記述方法   | `[1, 2, 3]`            | `(1, 2, 3)`               |
| 主な用途   | データの追加・更新がある場面 | 固定データ、辞書のキーなど |

---

## 🧠 違い1：変更可能かどうか

```python
lst = [1, 2, 3]
lst[0] = 10  # OK！

tup = (1, 2, 3)
tup[0] = 10  # ❌ TypeError
```

タプルは一度作ったら **中身を変更できません**。  
この違いが一番有名ですね。

---

## 🧠 違い2：処理速度がちがう（タプルの方が速い）

```python
import timeit

print(timeit.timeit("[1, 2, 3, 4, 5]", number=1000000))
print(timeit.timeit("(1, 2, 3, 4, 5)", number=1000000))
```

タプルの方が **ちょっとだけ速い**。  
理由は「変更不可なので最適化されやすい」から。

---

## 🧠 違い3：辞書のキーに使えるかどうか

```python
d = {}
d[[1, 2]] = 'list'  # ❌ TypeError: unhashable type: 'list'

d[(1, 2)] = 'tuple'  # ✅ OK
```

リストは **辞書のキーにできません**。  
タプルは **ハッシュ可能（不変）なので使えます**。

---

## 🧠 違い4：括弧を省略できるのはタプルだけ

```python
x = 1, 2, 3
print(type(x))  # <class 'tuple'>
```

`()がなくても、カンマがあればタプル`。これ初心者あるあるな罠！

---

## 🧠 違い5：1要素タプルはカンマ必須

```python
t = (1)    # int型になる
t = (1,)   # tuple型になる！
```

カッコだけではダメで、**カンマがないとタプルにならない**。

---

## 🧠 違い6：リストはコピーしても同じ場所を指すことがある

```python
a = [1, 2, 3]
b = a
b[0] = 100
print(a)  # [100, 2, 3] ←変わっちゃう！

# タプルはそもそも変更できないから安心
```

**「参照渡し」に注意**。コピーの仕方に気をつけましょう。

---

## 🧠 違い7：メモリ使用量がタプルの方が少ない

```python
import sys
print(sys.getsizeof([1, 2, 3]))  # 88
print(sys.getsizeof((1, 2, 3)))  # 72
```

変更できないぶん、**タプルは軽量**。  
大量のデータを扱うときは差が出ます。

---

## 🧠 違い8：多重代入に向いてるのはタプル

```python
x, y = (10, 20)  # ✅ OK
x, y = [10, 20]  # これもOKだが、タプルの方が自然
```

一時的な複数データの受け渡しは **タプルがしっくり**きます。

---

## 🧠 違い9：関数の戻り値でよく使われるのはタプル

```python
def get_user():
    return "name", 20  # これは tuple を返してる

name, age = get_user()
```

`return` で複数の値を返すときは、**タプルが暗黙的に使われます**。

---

## 🧠 違い10：「リストの中のタプル」「タプルの中のリスト」使い分けのヒント

```python
list_of_tuples = [(1, 2), (3, 4)]  # ✅
tuple_of_lists = ([1, 2], [3, 4])  # ⚠️ 中身は変更できる
```

**「全体の構造を変えないけど、中身だけ変える」**  
そんなときにこの使い分けが便利です。

---

## 📌 おわりに

「listとtupleの違い」は、知ってるようで意外と知らない落とし穴が多いです。  
特に初心者のうちは「なんとなく使ってる」ことも多いですが、  
この違いを理解しておくと、コードの **バグ防止** や **パフォーマンス改善** にもつながります！

---

ご感想・コメントなど大歓迎です！  
他にも「Pythonのこれ気になる！」があれば教えてください 😄
React useState【Hooks】

## useStateってなに
Reactには**Hook**と呼ばれる関数いくつか用意されている。
よく見るのは```useState```と```useEffect```だと思う
今回は```useState```について理解したい。

```useState```は**state変数**を定義できるらしい

早速わからない単語が出てきた
**state変数**という言葉は聞いたことない

## state変数とローカル変数
普通に使う変数とstate変数が何が違うのかわからなかったので
とりあえず公式ドキュメントに目を通してみた。

太文字で2つの重要そうなことが書いてあった

**ローカル変数はレンダー間で保持されません**
**ローカル変数の変更は、レンダーをトリガしません**

つまりどういうことか

```react:App.tsx
export default function App() {
  let count:number = 0
  function handleClick() {
    count = count + 1;
    console.log(index)//0,1,2,3....
  }
  return (
    <>
      <div>{count}</div>
      <button onClick={handleClick}>
        increment
      </button>
    </>
  );
}
```
これはbuttonをクリックしたらcount変数に1を足す。それを表示している

しかしこれを実行してbuttonをクリックしても表示されるのは0の文字だけ
console.logの結果はしっかり加算されています。

前述の公式ドキュメント通りの結果です。

**ローカル変数の変更は、レンダーをトリガしません**

じゃあどうするのかってなった時にstate変数の出番ということです。

正しく動作するように書き直すと
```react:App.tsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

   function handleClick() {
    setCount(count => count + 1)
    console.log(count); // 1, 2, 3...
  }

  return (
    <>
      <div>{count}</div>
      <button onClick={handleClick}>
        increment
      </button>
    </>
  );
}
```

```useState()```の引数にはstate変数を初期化したい値を入れます。
```[count, setCount]```　
```count```がstate変数です
```setCount```がstate変数の値を変更する関数です

```setCount(count => count + 1)```ここは
```setCount(count + 1)```これでもいいけど、コールバックで書いた方が推奨される。

非同期の処理のなかで```setCount(count + 1)```こちらの書き方をすると上手く動かなかった。



重要そうなもう一つの文言
**ローカル変数はレンダー間で保持されません**
これはどういうことなのか

## ローカル変数はレンダー間で保持されません
そもそもレンダーされるのはどのタイミング？

- state変数が変わった時
- 親コンポーネントが再レンダーされたとき
- Propsが変わった時

以上のタイミングでレンダーされるようです。

つまり**レンダー間で保持されない**ということはstate変数が変わったらローカル変数は初期化されるってこと

```react:App.tsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  let localVar = 0;

  function handleClick() {
    setCount(count + 1)
    localVar = localVar + 1
    console.log(localVar); // 1, 1, 1...
  }

  return (
    <>
      <div>{count}</div>
      <button onClick={handleClick}>
        increment
      </button>
    </>
  );
}
```

先ほどuseStateで使ったコードに```localVar```変数を追加して同時にインクリメントしてみました。
するとconsoleの出力には１がずっと表示されます。
再レンダーされる際に```localVar```変数が初期化されているのが確認できます

Classに書いたメンバ変数みたいだと思いました。

## まとめ
フロントエンドフレームワークはVueしか触ったことありませんでしたが、Vueでも値を変更したのにDOMに反映されてない、、、と苦しんだ覚えがあります。
そこらへんが、Reactではすんなりと理解できた気がします。VueをやってたからなのかReactがわかりやすいのかわかりませんが、成長した気になれました。
VitePressでPikchr(WASM)を動かす

オリジナルのpikchrはCで実装されており、そのまま利用するにはD2のようにchild_processと一時ファイルで対応することになる。

幸いなことにpikchrをwasmにするのはそれほど難しくなく、既にwasm化されたパッケージが存在する。

この記事では以下のパッケージを利用する。

https://github.com/fabiospampinato/pikchr-wasm

```console
npm i pikchr-wasm
```

VitePressはmarkdown-itを利用しているため、markdown-itのプラグインとして実装して対応すればよい。

プラグインといってもそれほど大掛かりなものではなく一つのファイルで済む。
`.vitepress/`配下に`markdown-pikchr.ts`というファイル名で作成して、その中身は以下のように実装する。説明のため例外処理は省略している。

```ts:.vitepress/markdown-pikchr.ts
import pikchr from 'pikchr-wasm'

export default async () => {
  await pikchr.loadWASM()
  return (md: any) => {
    const fence = md.renderer.rules.fence.bind(md.renderer.rules)
    md.renderer.rules.fence = (tokens: any, idx: any, options: any, env: any, slf: any) => {
      const token = tokens[idx]
      const tokenInfo = token.info.toLowerCase()
      if (tokenInfo === "pikchr") {
        const code = token.content
        const svg = pikchr.render(code)
        return `<div class="pikchr-diagram">${svg}</div>`
      }
      return fence(tokens, idx, options, env, slf)
    }
  }
}
```

`pikchr.loadWASM`を実行するために全体をasyncにしておく必要がある。それ以外は特に難しいところはなく、ほぼ決まりごとのようなものである。型がなにも活かせてないのでjsにしてもよいと思う。

次に`config.mts`を修正する。中身は以下の通り。
注意点としてはmarkdown-pikchrをasyncにしたため、こちらの定義も全体をasyncにしておく必要がある。

```ts:.vitepress/config.mts
import { defineConfig } from 'vitepress'
import mdpikchr from './markdown-pikchr'

export default async () => {
  const pikchr = await mdpikchr()
  return defineConfig({
    themeConfig: {
      ...
    },
    markdown: {
      config: (md) => {
        md.use(pikchr)
      }
    }
  })
}
```

たったこれだけで終わり。

![vitepress-with-pikchr-screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23722/8651f537-9f33-44f0-bbce-b03ab79667e1.png)


````markdown:pikchr-examples.md
# Pikchr Example

```pikchr
        circle "DISK"
        arrow "character" "defns" right 150%
CPU:    box "CPU" "(16-bit mini)"
        arrow <- from top of CPU up "input " rjust
        move right from CPU.e
CRT:    "   CRT" ljust
        line from CRT - 0,0.075 up 0.15 \
                then right 0.5 \
                then right 0.5 up 0.25 \
                then down 0.5+0.15 \
                then left 0.5 up 0.25 \
                then left 0.5
        arrow from CPU.e right until even with previous.start
Paper:  CRT + 1.05,0.75
        arrow <- from Paper down 1.5
        " ...  paper" ljust at end of last arrow + 0, 0.25
        circle rad 0.05 at Paper + (-0.055, -0.25)
        circle rad 0.05 at Paper + (0.055, -0.25)
        "   rollers" ljust at Paper + (0.1, -0.25)
```

...(snip)...

````
VBA

```vba:セルの値を比較して赤字にする
Sub CompareAndHighlightDifferences()
    Dim lastRow As Long
    Dim i As Long
    Dim valA As String, valB As String
    Dim j As Long

    lastRow = Cells(Rows.Count, "B").End(xlUp).Row

    For i = 1 To lastRow
    ' Cells(i, "A")のAを変えると列を変えれる
        valA = Trim(Cells(i, "A").Value) 
        valB = Trim(Cells(i, "B").Value)

        ' 初期状態に戻す（黒にリセット）
        With Cells(i, "B")
            .Font.Color = RGB(0, 0, 0)
            .Characters.Font.Color = RGB(0, 0, 0)
        End With

        If valA <> "" And valB = "" Then
            ' A列に文字あり、B列が空白 → スキップ
            GoTo ContinueLoop

        ElseIf valA = "" And valB <> "" Then
            ' A列が空白、B列に文字 → B列全部赤字
            With Cells(i, "B").Characters(1, Len(valB)).Font
                .Color = RGB(255, 0, 0)
            End With

        ElseIf valA <> "" And valB <> "" Then
            ' 両方に文字がある → 1文字ずつ比較
            For j = 1 To Len(valB)
                If Mid(valA, j, 1) <> Mid(valB, j, 1) Then
                    If j <= Len(valB) Then
                        Cells(i, "B").Characters(j, 1).Font.Color = RGB(255, 0, 0)
                    End If
                End If
            Next j
        End If

ContinueLoop:
    Next i
End Sub
```
### 使い方
1. ExcelでAlt + F11 を押してVBAエディタを開く
2. 挿入>モジュールから新しいモジュールを作成
3. 上記コードを貼り付ける
4. F5 またはExcel側のマクロ実行で処理開始
（自分用メモ）【Gradle】推移的依存関係の解決

## 推移的依存（transitive dependency）とは？

アプリで依存しているライブラリ A があった時、そのライブラリ A が内部でライブラリ B に依存している時、アプリは「ライブラリ B に推移的に依存している」と言う。
この図の場合、Library A と Library B はそれぞれ Library C に依存しているため、 Your App は Library C に推移的依存していると言える。

![スクリーンショット 2025-04-08 23.57.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1274260/373c29e8-9df4-4331-a59d-2b146495f854.png)
（出典：https://developer.android.com/build/gradle-dependency-resolution?hl=ja）

しかし、この図だと Library A と Library B がそれぞr Library C の異なるバージョンを使用してしまっている。こういった状態は「バージョンが競合している」と表現される。

Gradle はこうして競合が発生した場合、デフォルトでは最も高いバージョンを選択することで競合を解決する。

> Gradle considers all requested versions across the dependency graph and, by default, selects the highest version. Detailed version ordering is explained in version ordering.

（出典：https://docs.gradle.org/current/userguide/dependency_resolution_model.html）


## 推移的依存関係を調べる
`./gradlew app:dependencies` コマンドを打つことですべての依存関係のツリーが表示される。
`->`が表示されているライブラリは推移的依存関係の解決によって想定していないバージョンが使用されている。
Next.js App Router での Prefetch の挙動を理解する

## はじめに
`Next.js` の機能の1つとして、ページを `Prefetch` してくれる仕組みがあります。  

この記事では、簡単なサンプルを作成し、`Prefetch` がどのように動作しているのかを見てみます🙋‍♂️

## 実装概要
```
src/
  app/
    prefetch/
      page-1/
        page.tsx
      page-2/
        page.tsx
      page-3/
        page.tsx
  middleware.ts
```

- **Page1** → 次ページ（Page2）へのリンクを表示
- **Page2** → 次ページ（Page3）へのリンクを表示
- **Page3** → 最後のページ。  
- **middleware** → リクエストをログ出力して挙動を確認

## Prefetch が行われるタイミング
`Link` コンポーネントは、**「リンクが画面に表示された時」** に `Prefetch` を行います。

なお、公式ドキュメントにある通り、 **「プリフェッチは production でのみ有効」** です。
> Prefetching is only enabled in production.

https://nextjs.org/docs/app/api-reference/components/link#prefetch

つまり、開発環境（`npm run dev`） では `Prefetch` が行われません。

実際の挙動を確認するには、`npm run build` → `npm run start` の手順で本番相当の環境でテストを行う必要があります。

## サンプルコード

検証用のサンプルコードを作成します。

`src/app/prefetch/page-1/page.tsx`
```tsx
import Link from 'next/link';

export default function Page1() {
  return (
    <div>
      <h1>Page 1</h1>
      <Link href="/prefetch/page-2">
        Go to Page 2 (Prefetched)
      </Link>
    </div>
  );
}
```

`src/app/prefetch/page-2/page.tsx`
```tsx
import Link from 'next/link';

export default function Page2() {
  return (
    <div>
      <h1>Page 2</h1>
      <Link href="/prefetch/page-3">Go to Page 3</Link>
    </div>
  );
}
```

`src/app/prefetch/page-3/page.tsx`
```tsx
export default function Page3() {
  return (
    <div>
      <h1>Page 3</h1>
    </div>
  );
}
```

`src/middleware.ts`
```ts
import { NextResponse, NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  console.log('リクエスト詳細:', {
    url: request.url,
    pathname: request.nextUrl.pathname,
    method: request.method,
    headers: Object.fromEntries(request.headers),
  });

  return NextResponse.next();
}
```

## 実際のリクエストログを見てみる

**1. 本番相当でサーバーを起動する**
```
npm run build
npm run start
```

**2. リクエストログの確認**

`Page1` を開いた直後に、ビューポートに `Link` が表示されるため、`Next.js` は自動で `Page2` のページデータを取りにいきます。

↓ コンソールからリクエストの結果を確認することができます。

```
リクエスト詳細: {
  url: 'http://localhost:3000/prefetch/page-1',
  pathname: '/prefetch/page-1',
  method: 'GET',
    headers: {
    ...
  }

...

リクエスト詳細: {
  url: 'http://localhost:3000/prefetch/page-2',
  pathname: '/prefetch/page-2',
  method: 'GET',
  headers: {
    ...
  }
}
``` 

## まとめ

本番環境でしか実行されない点は注意が必要ですね！
本記事が誰かの役に立てたのであれば嬉しいです👌
【Zod】nullとundefindを許容する方法

## `.nullish()`

`.nullish()` は `null` と `undefind` を許容する。  
使用方法は以下のとおり。

```typescript
const nullishString = z.string().nullish(); // string | null | undefined

// equivalent to
z.string().nullable().optional();
```

https://zod.dev/?id=nullish
【Python初心者】リスト内包表記をわかりやすくまとめてみた

Pythonの「リスト内包表記」は、リストをシンプルに作成できる便利な書き方です。  
この記事では、リスト内包表記の基本から応用までをわかりやすくまとめます。



## リスト内包表記とは？

リスト内包表記（List Comprehension）とは、  
**for文を使ったリスト作成を1行で簡潔に書ける構文**のことです。

コードを短く、見やすくすることができます。



## 基本構文

リスト内包表記の基本形は次のようになります。
```py
[式 for 変数 in イテラブル]
```
- **式**：リストに追加したい値
- **変数**：繰り返し処理で使う1つずつの要素
- **イテラブル**：リストや文字列など、繰り返し処理できるもの



## シンプルな例

### 1から5までの数字をリストにする

普通のfor文で書くと：
```py
numbers = []
for i in range(1, 6):
    numbers.append(i)
```

リスト内包表記を使うと：
```py
numbers = [i for i in range(1, 6)]
```

**出力結果**：
```
[1, 2, 3, 4, 5]
```


## if条件を付ける例

リスト内包表記では、**条件を付ける**こともできます。

### 例：1から10までの偶数だけをリストにする
```py
evens = [i for i in range(1, 11) if i % 2 == 0]
```

**出力結果**：
```
[2, 4, 6, 8, 10]
```


## if-elseを使う例

リスト内包表記の中で**if-else式**を使うこともできます。

### 例：1から5までの数字を、偶数なら"偶数"、奇数なら"奇数"とリストにする
```py
labels = ['偶数' if i % 2 == 0 else '奇数' for i in range(1, 6)]
```

**出力結果**：
```
['奇数', '偶数', '奇数', '偶数', '奇数']
```


## ネスト（入れ子）のリスト内包表記

リストの中にリストがある場合（多重ループ）も、リスト内包表記で書けます。

### 例：2つのリストを組み合わせる
```py
list1 = [1, 2, 3]
list2 = ['A', 'B']
combined = [(i, j) for i in list1 for j in list2]
```

**出力結果**：
```
[(1, 'A'), (1, 'B'), (2, 'A'), (2, 'B'), (3, 'A'), (3, 'B')]
```


## 注意点

リスト内包表記は便利ですが、**複雑すぎると可読性が下がる**ので注意しましょう。

- ネストが深くなりすぎる
- 条件が多すぎて一行が長くなる

こういった場合は、無理せず普通のfor文を使った方がよいです。



## まとめ

- リスト内包表記は「短く」「きれいに」リストを作れる
- 条件付きやif-else式も使える
- ネストも可能だが、可読性に注意する

リスト内包表記の書き方や問題で迷ったらこの記事を見て振り返ろうと思います。