OmniAICreator/Qiita-1.07M huggingface dataset:
Moving Back to Japan – Built a Free Garage Sale Site with Cursor + Google Spreadsheet in 2 Hours


## Introduction

Hi there! I'm moving from North America back to Japan, and as a token of appreciation for all the amazing people I've met here, I decided to host a **free garage sale**.

Rather than just using a spreadsheet, I thought it would be nice to build and share a dedicated web page for the garage sale. So, I created one using **Cursor (an LLM-powered dev environment)** and **Google Spreadsheet**, displaying the item list on my portfolio site.

The result? A fully functional, nicely styled web page—**built in just about 2 hours**. Here's how I did it.

👉 Final site: [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)

![{6C5AC696-3018-4637-AC9F-9FDC793B89DB}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/39d6481c-cc67-479f-86d8-79f7835c5bd8.png)

---

## Tech Stack

* Cursor (LLM-based coding and dev environment)
* Google Sheets API (for item data source)
* Vercel (hosting)
* Next.js (frontend framework)
* Tailwind CSS (styling)

---

## Workflow Overview

### Step 1: Building the Garage Sale Item Page

#### 1. Fetching Data via Google Sheets API

* Installed necessary packages like `googleapis`
* Wrote utility functions to fetch data server-side
* Configured the Google Cloud Console:

  * Created a new project
  * Enabled the Sheets API
  * Created a service account and downloaded its key (JSON)
  * Shared the spreadsheet with read access to the service account

#### 2. Creating the Item List Page

* Built the page using Next.js components
* Styled it using Tailwind CSS for a clean, responsive layout

#### 3. Authentication & Error Handling

* Resolved `net` module errors from client-side calls
* Created an API route to handle authentication on the server
* Switched from `@google-cloud/local-auth` to service account authentication

#### 4. Environment Variable Setup

* Configured `.env.local` with spreadsheet ID and credentials
* Verified JSON key file placement

---

### Step 2: Adding Search and Filter Features

#### 1. Search Bar Implementation

* Enabled search by item name and description
* Case-insensitive and updates results in real-time

#### 2. Status Filter (On Sale / Sold Out)

* Added dropdown to filter item status
* Works in combination with search input

#### 3. UI/UX Enhancements

* Search bar and filter aligned horizontally (stacked vertically on small screens)
* Modern input styling with hover and focus effects

---

## Results & Reflections

Thanks to Cursor and AI-assisted coding, I was able to create a polished and useful site in just two hours.

Even if you're not a seasoned web developer, tools like Cursor can help you build practical, real-world solutions quickly.

If you ever want to create something meaningful for a farewell or gratitude event, this kind of project might be a great idea to try.

---

## Live Site

👉 [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)

Feel free to grab anything you like—everything is free!
北米→日本引っ越し記念！無料ガレージセールサイトをCursor + Google Spreadsheetで爆速構築してみた

## はじめに

こんにちは。今回、北米から日本への引っ越しに伴い、これまでお世話になった方々への感謝の気持ちを込めて、**無料のガレージセール**を実施することにしました。

どうせなら、Garage Sale用のWebページを作って公開したい――そう思い立ち、**Cursor（LLM開発環境）**と**Google Spreadsheet**を使って、自分のポートフォリオサイト上に商品リストを表示するページを作りました。

結果として、**わずか2時間程度でしっかりとしたWebページを構築**できたので、その手順や工夫した点をQiitaで共有します！

最終的なサイトはこちら → [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)
![{2A793559-C70E-4D69-9F3F-9A6980029D84}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/72e822cb-cae7-4a66-a8d0-d854f4348104.png)

---

## 使用した技術スタック

* Cursor（開発環境 & AIとの対話でコーディング）
* Google Sheets API（商品データの取得元）
* Vercel（ホスティング）
* Next.js（Webフロントエンド）
* Tailwind CSS（スタイリング）

---

## フロー全体

### 段階①：Garage Sale 商品リストページの作成

#### 1. Google Sheets APIで商品データ取得

* 必要パッケージのインストール（`googleapis` など）
* ユーティリティ関数を作成し、サーバーサイドでデータを取得
* Google Cloud Consoleで以下の設定を実施：

  * プロジェクト作成
  * Sheets APIの有効化
  * サービスアカウント作成・鍵(JSON)取得
  * Spreadsheetの共有設定でサービスアカウントに読み取り権限を付与

#### 2. 商品リストのページを作成

* Next.jsのページコンポーネントを用意
* スタイリング（Tailwind CSS）で見やすいデザインに

#### 3. 認証まわりのエラー対応

* `net`モジュールエラーなど、クライアントサイドでのAPI呼び出し失敗対策
* APIルートを作成してサーバーサイドで認証処理を実行
* `@google-cloud/local-auth`からサービスアカウント認証へ切り替え

#### 4. 環境変数の設定

* `.env.local`にキーやスプレッドシートIDを設定
* JSONファイルの配置場所も要確認

---

### 段階②：検索・フィルター機能の追加

#### 1. 検索バーの実装

* 商品名・説明文に対応した検索機能を追加
* 大文字小文字を無視したリアルタイムフィルタリング

#### 2. ステータスフィルター（On Sale / Sold Out）

* ドロップダウンで絞り込み機能を提供
* 検索バーと組み合わせて使えるUI設計

#### 3. UI/UXの工夫

* 検索バーとフィルターを横並び（狭い画面では縦並び）
* モダンなデザイン＋ホバー・フォーカス時のアニメーション追加

---

## 結果と感想

CursorとLLM対話ベースの開発を活用したことで、**2時間で完成度の高いサイト**を構築することができました。

これまでWeb開発に自信がなかった方でも、CursorのようなAI開発支援ツールを使えばかなり実用的なものが作れる実感を得ました。

みなさんも何かのお別れや感謝のタイミングに、こんなプロジェクトに挑戦してみてはいかがでしょうか？

---

## 公開サイト

👉 [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)


ぜひ、何か気になるアイテムがあれば持ち帰ってください！全部無料です！
Windows で Docker Desktop その1

Windows11 に Docker Desktop をインストールしていたんですが、しばらく放置していました。

今回、いじってみることにしました。Kubernetes の設定は、このようにしました。

![スクリーンショット 2025-06-14 193317.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470368/9ea8bac7-56e1-49f1-a666-e4b154fab93a.png)

Powershell を立ち上げ、コマンドを実行してみました。

```
PS C:\Users\xxx> cat .kube/config
apiVersion: v1
clusters:
- cluster:
    certificate-authority-data: LS0tLS1...S0tLS0K
    server: https://127.0.0.1:55248
  name: docker-desktop
contexts:
- context:
    cluster: docker-desktop
    user: docker-desktop
  name: docker-desktop
current-context: docker-desktop
kind: Config
preferences: {}
users:
- name: docker-desktop
  user:
    client-certificate-data: LS0tLS1...S0tLS0K
    client-key-data: LS0tLS1...S0tLQo=
PS C:\Users\shint> kubectl config view
apiVersion: v1
clusters:
- cluster:
    certificate-authority-data: DATA+OMITTED
    server: https://127.0.0.1:55248
  name: docker-desktop
contexts:
- context:
    cluster: docker-desktop
    user: docker-desktop
  name: docker-desktop
current-context: docker-desktop
kind: Config
preferences: {}
users:
- name: docker-desktop
  user:
    client-certificate-data: DATA+OMITTED
    client-key-data: DATA+OMITTED
```

```
PS C:\Users\xxx> kubectl config get-contexts
CURRENT   NAME             CLUSTER          AUTHINFO         NAMESPACE
*         docker-desktop   docker-desktop   docker-desktop
```
1つしか context がないので、必要ないかもしれませんが、以下を実行しました。
```
PS C:\Users\xxx> kubectl config use-context docker-desktop
Switched to context "docker-desktop".

PS C:\Users\xxx> kubectl config current-context
docker-desktop
```

GUI で設定したとおり、確かに 3 つのノードが立ち上がっているようです。
```
PS C:\Users\xxx> kubectl get nodes
NAME                    STATUS   ROLES           AGE   VERSION
desktop-control-plane   Ready    control-plane   49m   v1.31.1
desktop-worker          Ready    <none>          48m   v1.31.1
desktop-worker2         Ready    <none>          48m   v1.31.1
```

このコマンドを実行してみます。
```
PS C:\Users\xxx> kubectl config view
apiVersion: v1
clusters:
- cluster:
    certificate-authority-data: DATA+OMITTED
    server: https://127.0.0.1:55248
  name: docker-desktop
contexts:
- context:
    cluster: docker-desktop
    user: docker-desktop
  name: docker-desktop
current-context: docker-desktop
kind: Config
preferences: {}
users:
- name: docker-desktop
  user:
    client-certificate-data: DATA+OMITTED
    client-key-data: DATA+OMITTED
```

参考文献

Poulton, N. (2025). *The kubernetes book* (2025 ed.). Nigel Poulton.

[Windows で Docker Desktop その2](https://qiita.com/intrajp/items/573902d2c2f480421e1d) につづく
DVC基本操作

## 关于DVC的知识以及配置方法
---

参考资料
---
DVC 官网教程-中文版 [https://zhuanlan.zhihu.com/p/475053858]
---

## 安装DVC
```bash
pip install dvc
pip install "dvc[s3]"
```

## 在项目根目录下初始化DVC
```bash
dvc init
git add .dvc .dvcignore
git commit -m "Initialize DVC"
```

## 添加数据文件或目录到DVC追踪
```bash
dvc add data/raw_data    # data/raw_data可以是文件或目录
git add data/raw_data.dvc
git commit -m "Add raw data to DVC"
```

# 添加远程存储
```bash
dvc remote add -d storage s3://your-bucket/path
```

# 数据版本管理操作
```bash
# 推送数据到远程存储
dvc push

# 从远程存储拉取数据
dvc pull

# 检查状态
dvc status
```


### 如果我新建立一个分支，会怎样
```bash
# 1. 创建并切换到新分支
git checkout -b experiment_branch

# 2. 切换分支后，需要同步DVC数据
dvc checkout

# 3. 在新分支上修改数据或模型
dvc add data/new_dataset.csv

# 4. 提交DVC变更
dvc push

# 5. 提交Git变更
git add data/new_dataset.csv.dvc
git commit -m "add: new dataset for experiment"
```

2. 分支间数据切换的工作原理
数据版本隔离：每个Git分支可以有自己独立的数据版本.dvc文件记录了每个分支的数据状态
DVC缓存保存了所有版本的数据

切换分支时的数据同步：
```bash
   # 切换到主分支
   git checkout main
   dvc checkout  # 同步到主分支的数据版本
   
   # 切换到实验分支
   git checkout experiment_branch
   dvc checkout  # 同步到实验分支的数据版本
```

## 3. 实际应用场景
### 1.实验管理：
```bash
 # 创建实验分支
git checkout -b experiment/new_feature
   
# 添加新数据
dvc add data/experiment_data.csv
   
# 修改pipeline
dvc repro
   
# 比较实验结果
dvc metrics diff main
```

### 2.模型版本管理
```bash
   # 在不同分支保存不同版本的模型
   git checkout -b model/v2
   dvc add models/model_v2.pkl
   dvc push
   git add models/model_v2.pkl.dvc
   git commit -m "add: model version 2"
```

## 4. 最佳实践
分支命名规范：
```bash
   experiment/feature_name  # 实验分支
   model/vX.Y.Z           # 模型版本分支
   data/dataset_name      # 数据版本分支
```


数据同步检查：
```bash
# 切换分支后总是检查状态
   dvc status
   
   # 确保远程数据同步
   dvc push  # 推送数据
   dvc pull  # 拉取数据
```
【Java】技術書から学んだ命名規則・例外設計を実践に活かすためのメモ

# はじめに
最近、コードを書いて気づいた「命名・例外・引数」の扱いについて、可読性や安全性を意識した考え方を自分なりにまとめてみました！

---

# 命名のポイント
- メソッドは動詞一言で
- 連番（getData1など）は避ける
- 命名で処理の意図を表すのが基本

# コメントに頼らない設計
- 命名で意味を伝える
- コメントは変更漏れのリスクがある

# 戻り値は意味のあるクラスで
- int や String よりも UserId 等の専用クラスを使うと混乱が減る

# 引数は final ＋ 意味のある命名
- final指定で安全性UP
- newUser、dbUserなどで状態を明確に

# 例外は throw で明確に
- -1やnull返しはバグの元
- IllegalArgumentExceptionなどを活用
- 独自例外も視野に！

# おわりに
こうした設計の小さな工夫が、長期的に安全で読みやすいコードにつながると実感しています。もっと良いやり方やフィードバックがあればぜひ教えてください！
Drupal と EC-CUBE を触って気づいた——みんな Symfony に乗っかってる!?


> **初めに**  
> - Drupal 10 も EC-CUBE 4 も中身は Symfony。  
> - Symfony は部品（＝コンポーネント）を自由に組み合わせられる “レゴ” みたいな PHP フレームワーク。  
> - いま PHP 製プロダクトの “黒子” として存在感が急上昇中。  
> - 「CMS も EC も作れるなら、次は自分のサービスで使ってみたくない？」というお誘い記事です。

---

## 1. この記事を書いたきっかけ

最近、業務で **Drupal**（CMS）と **EC-CUBE**（EC パッケージ）を並行して触ることになりました。  
――で、設定ファイルを開いてみたらまったく同じディレクトリ階層・ほぼ同じ書き方のコードが並んでいる……。

> 「あれ？ これって同じフレームワーク上に立ってない？」

調べてみると **どちらも Symfony の上に成り立っている** と判明。  
しかも Laravel, phpMyAdmin, Composer CLI までもが Symfony コンポーネントを使っていると知り、軽く衝撃を受けました。

「Symfony きてるんじゃね？」——このワクワクを、Qiita レベルの言葉に落として共有します。  
難しい専門用語は極力かみ砕くので、PHP 初心者の方でも大丈夫！

---

## 2. Symfony ってそもそも何？

> **一言で**  
> PHP アプリを作るための **フレームワーク** 兼 **部品置き場**。

### 2.1 フレームワーク編

- **MVC**（モデル・ビュー・コントローラ）の箱をまるっと提供  
- ルーティング、テンプレート、フォーム、メール送信など “アプリに必須な機能” が最初から揃う  
- **LTS**（長期サポート）版があるので、エンタープライズ用途でも長く安心

### 2.2 コンポーネント編

- 60 以上の小さなライブラリに分解されており、**1 個だけ** インストールしても OK  
  - 例：`symfony/console`——CLI ツールをサクッと作れる  
  - 例：`symfony/validator`——バリデーションだけ差し込みたい時に便利
- だから Laravel や EC-CUBE みたいな「別フレームワーク」も、足りない所を Symfony の部品で補っている

---

## 3. Drupal・EC-CUBE が採用する理由

| 観点 | つらみ | Symfony 採用でどう変わる？ |
| --- | --- | --- |
| 開発体験 | OSS なのに**独自実装の沼**にハマる | 部品が共通 → ドキュメント・記事が多い |
| エコシステム | プラグイン同士が**競合**しやすい | コーディング規約が統一され衝突しにくい |
| バージョンアップ | CMS 側で**脆弱性パッチ**を全部背負う | Symfony の LTS を取り込むだけで最新に近づく |

> **要するに**  
> “車輪の再発明” をやめて、みんなで **メンテしやすい共通部品** を使おうぜ、という流れ。

---

## 4. 「Symfony きてる」と感じる 3 つのポイント

1. **採用実績がめちゃ増えた**  
   - CMS：Drupal、TYPO3  
   - EC：EC-CUBE  
   - SaaS：Shopware、OroCRM  
   - フレームワーク：Laravel も内部で多数利用  
2. **Composer install ひとコマンドで触れちゃう**  
   - `composer create-project symfony/skeleton myapp` ← 10 秒で “Hello World”  
3. **PHP 8.3 時代に合わせたモダン設計**  
   - 属性（アノテーション）の標準対応  
   - HTTP/2, Messenger (キュー) など “いまどき要件” も素でカバー

---

## 5. 具体例：Drupal と EC-CUBE、ここが同じ！

### 5.1 ルーティング定義

```yaml
# routes.yaml（一部）
home:
  path: /
  controller: App\Controller\HomeController::index
```

「YAML で URL とコントローラをつなぐ」スタイルは両者そっくり。
だから片方を覚えるともう片方もすぐ読める。

### 5.2 サービス定義（DI コンテナ）

```
services:
  _defaults:
    autowire: true
    autoconfigure: true
```

依存性注入（DI）コンテナも Symfony 製なので書き方は統一。
「外部 API クライアントを差し替える」みたいなカスタマイズが CMS/EC 問わず同じ手順で済む！



## 6. もし Symfony を触ってみたくなったら

1.	まずは公式チュートリアル
		https://symfony.com/doc/current/index.html（英語でも読みやすい）
2.	コンポーネントだけ試す
		CLI ツールなら symfony/console を composer require してみる
3.	小さな REST API を作ってみる
		ルーティング → コントローラ → JSON レスポンス、ここまで 30 行で動く
4.	本格的にやるなら Docker
		symfony-cli が自動でコンテナ立ち上げまで面倒を見てくれる

Tip:
既に Drupal / EC-CUBE をいじっている人は 「設定を読む」こと自体が最高の教材。
「へぇ、このフックは Symfony Event で飛ばしてるんだ」みたいな発見が山ほどあります。

## 7. まとめ
•	Drupal と EC-CUBE の共通点 を辿ると Symfony にたどり着く
•	Symfony は フレームワーク でもあり 部品セット でもある
•	OSS 界隈で「裏方としての採用」が急増 → 安定性と学習コスト削減が魅力
•	CMS/EC のカスタマイズ案件が多い日本こそ、Symfony を知っておくと得する場面が多い


## 8. おわりに

感想：
Drupal と EC-CUBE、別々のプロジェクトなのに「設定読めばだいたい理解できる」状態は本当に快感でした。
“フレームワーク選び” で迷うとき、「その先に Symfony があるか？」 をチェックリストに入れてみてはいかがでしょう。

ここまで読んで「Symfony いいかも」と思ったら、ぜひコメントで盛り上がりましょう！
「〇〇でも使われてるよ」などの情報もお待ちしています 🙌
【ChatGPT】語彙力テストのPromptです。


　どうも、カーブミラーです。

　今回は、語彙力テストのPromptです。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はありません。あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　著作権法については
　　こちらを参照するのが
　　　良いのではないかと。

　文化庁レポートをもとにした
　　著作権法についての動画（約20分）
　　　[かいちのAI大学　【警告】ChatGPTの画像生成は危険です...【4o Image Generation】](https://youtu.be/8VLUnG-iyo0?si=rAfjMboqmNqppDGq)
***
　さっそく、【本題】です。

　今回は、
　　語彙力テストのPromptです。

　人によってですが、
　　“語彙力がない”と
　　　おっしゃる方が多いです。

　私も小説を書いていても
　　“語彙力がないなぁ”と
　　　思うことが多々あります。

　そこで
　　おのれの語彙力を
　　　きちんと把握するための
　　　　Promptを作成しました。

　こちらがそのPromptです。
```Text:
日本語語彙力診断テスト

以下の指示に従って、【言い換え問題】【使い方問題】【類語・対義語問題】【空欄補充問題】【語釈選択問題】の5種類の問題を組み合わせて、合計10問の語彙力テストを作成してください。
問題の難易度は高校生から社会人向け程度とし、各設問には必ず模範解答と簡単な解説をつけてください。

【指示】

1. 下記の5タイプの問題をまんべんなく2問ずつ出題すること。

2. 全体で10問になるように作成すること。

3. 問題ごとに、「問題」「選択肢（必要な場合）」「解答」「解説」を明記すること。

4. 問題文・選択肢・解答・解説はすべて日本語で記述すること。


【問題タイプ例】

1. 言い換え問題

「（単語）」と最も近い意味の単語を選びなさい。


2. 使い方問題

「（単語）」を使って自然な文章を作りなさい。


3. 類語・対義語問題

「（単語）」の類語または対義語を答えなさい。


4. 空欄補充問題

（　　　）に当てはまるもっとも適切な語を書きなさい。


5. 語釈選択問題

「（単語）」の意味として最も正しいものを選びなさい。


【フォーマット例】

問題1【言い換え問題】

問題：
「迅速」と最も近い意味の単語を次から選びなさい。

1. ゆっくり
2. すばやい
3. 楽しい
4. 正しい


解答：2. すばやい

解説：
「迅速」とは、物事を非常にすばやく行うさまを指します。


このフォーマットを使い、合計10問作成してください。一問一答してテストしてください。
```

　特に専門用語というものではなく、
　　一般的な語彙力を
　　　テストします。

　必要ならば
　　修正してください。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
【JavaScript】ABC409感想（A~E）

AtCoder Beginner Contest 409

https://atcoder.jp/contests/abc409

こんにちは。
先日のABC409は不参加でした。
後日unratedでバーチャル参加し、ABCDEの5完（88分4ペナ）でした。
predictorによると1108パフォで少し負けてたらしいです。
今回はA~Eまでの感想を述べていきます。

# A - Conflict
https://atcoder.jp/contests/abc409/tasks/abc409_a

左から順に$T_i$と$A_i$が`o`で一致するかどうかを確認します。
`o`で一致している、という条件がなくてもサンプルが通ってしまうのがいやらしいですね。（１ペナ）

# B - Citation
https://atcoder.jp/contests/abc409/tasks/abc409_b

これは$A_i≦10^9$という制約に惑わされましたが、$N≦100$のため$x$は高々$100$ですので$x=0,1,\cdots, N$を全探索すれば良いだけでしたね（$101$回以上の要素が現れることはありえないため）。
あらかじめ$0,1,\cdots, N$までの数値が現れる回数を配列に格納し、$N$を超える要素は$cnt$に$+1$して数えておきます。
そうすれば、あとは$x=N,\cdots,0$まで順に$x$以上の要素の個数を得ることができるため、条件を満たした状態で即座に出力することによってACすることができます。（３ペナ）

```js
function Main(input) {
  input = input.split("\n").map((line) => line.trim());
  const N = Number(input[0]);
  const A = input[1].split(" ").map(Number);
  const freq = new Array(N + 1).fill(0);
  let cnt = 0;
  for (let i = 0; i < N; i++) {
    if (A[i] <= N) freq[A[i]]++;
    else cnt++;
  }
  let ans = 0;
  for (let i = N; i >= 0; i--) {
    cnt += freq[i];
    if (cnt >= i) return console.log(i);
  }
  console.log(ans);
}

Main(require("fs").readFileSync(0, "utf8"));
```

# C - Equilateral Triangle
https://atcoder.jp/contests/abc409/tasks/abc409_c

円周上の点$a,b,c(a<b<c)$を頂点とする図形が正三角形をなすとき、線分$(a,b),(b,c),(c,a)$は等間隔となっています。すなわち、$a,b,c$が公差$L/3$の等差数列であるような組を求めればよいわけです。
なお、$a,b,c$は円周上の点なので$L$を法とする座標で考える必要があることに注意が必要です。
また、$L$が$3$で割り切れないときは正三角形となるような組はないので即座に$0$を出力します。（私は全ての辺を$3$倍して考えました）

# D - String Rotation
https://atcoder.jp/contests/abc409/tasks/abc409_d

辞書順に最も小さくなるように$l,r$を選択する方法として、まず$l$は$S_i>S_{i+1}$（不等号は辞書順を表すことにします）を満たすような最初の$i$を選べば良さそうです。
ここで、`ccccb`のように同じ文字が連続する場合にどうなるのか悩みましたが、$r$を一番右の位置とすれば、$S_i=S_{i+1}$となる位置でも、$S_i<S_{i+1}$となる位置でも、結局`cccbc`となり変わりがありません。

次に、$r$の選び方ですが、これは$l>r$で初めて$S_l<S_{i+1}$となる位置を良さそうです。$S_{i+1}$を左にシフトするより、$S_l$をそこに入れた方が辞書順に小さくなるからです。
少し頭を使いますが、アルゴリズム的にはそこまで難しくないので茶色妥当でしょうか。

# E - Pair Annihilation
https://atcoder.jp/contests/abc409/tasks/abc409_e

これは難問でした。
処理自体は単純な`dfs`でしたが、`dfs`で良いと判断するのが難しいと思います。
`dfs`で良い理由ですが、葉っぱにある(陽)電子は親方向にしか移動できないためです。
葉っぱにある(陽)電子を親方向に移動させて、その親で対消滅できるものは消して、残った(陽)電子をその部分木のさらに親に伝播させる、、、という再帰的な処理をすることで最も効率よく(陽)電子を動かすことができます。
わかれば単純かもしれませんが、これが1000diffないというのは結構意外な気がします。

# まとめ
今回はunrated参加のため解説があまりない感想回でした。
今月は仕事とプライベートが忙しすぎて全く精進できていません。
見ての通りprogress chartがスカスカです。

![スクリーンショット 2025-06-14 18.19.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3866035/e5c4d69c-2c56-4f1e-9402-21dceae9dfbe.png)

競プロだけじゃなく、もっと業務寄りの知識も得たいので本当に時間が足りないです。
社会人は大変ですね（泣）
今日はrated参加できそうなので、ぜひ頑張りたいと思います。
よ
WSL内のdocker composeの起動が遅い...

# 初めに

最近wsl内の`docker compose`の実行が遅くストレスを感じることが多く、体感2秒ほど待つ時間があったためどうにかしたいと思いいろいろ調べて最適化の手段を試してみた備忘録になります。

※ 今回の手順ではHyper-Vの機能を使用しております。

### 最適化前にやったこと

- 不要なdocker imageの削除
- docker build cacheの削除
- docker volumeに関しては削除は実行してません

# 仮想ディスクファイルを最適化（圧縮）
`Optimize-VHD` コマンドを実行し、仮想ディスクファイルを最適化を図ります
以下`Optimize-VHD`コマンドの要約です。
>`Optimize-VHD`は、動的にサイズが拡張する仮想ハードディスク（VHDXファイル）の無駄なスペースを整理し、ファイルサイズを物理的に小さくして、ホストPC（Windows）のディスク容量を解放するためのPowerShellコマンドです 。
>https://learn.microsoft.com/en-us/powershell/module/hyper-v/optimize-vhd?view=windowsserver2025-ps
>https://bwgjoseph.com/reclaim-disk-space-used-by-docker-desktop-wsl2

実行した手順になります。

1. ext4.vhdxが存在する箇所を確認 
   自分の環境では次の階層にありました。`C:\Users\<UserName>\AppData\Local\Docker\wsl\main\ext4.vhdx`
2. 管理者でWindows powershellを起動
3. WSLを完全シャットダウン
   ```shell
   wsl --shutdown
	```
4. ext4.vhdxに対し最適化実行
	```shell
	Optimize-VHD -Path "C:Users\<UserName>\AppData\Local\Docker\wsl\main\ext4.vhdx" -Mode Full
	```

これだけです。

# ついでに

いろいろ解決策を探してるときに`docker-compose`と`docker compose`の二つが同時に存在してることに気づき、関係は無いかもしれませんがCompose v1の非推奨とサポート終了がされてるため、ついでに`docker-compose`削除しました。

```bash
which docker-compose
/usr/bin/docker-compose

sudo rm /usr/bin/docker-compose
```


# 結果

`docker compose version`を実行してみましたが、残念ながら段違いに変わったということではありませんでした。
しかし若干ですが前よりストレスはありません。(ほかに手段はあるのだろうか...)
どなたかの参考になれれば幸いです。

# 参考
https://dev.classmethod.jp/articles/windows-virtual-disk-compression/

https://learn.microsoft.com/en-us/powershell/module/hyper-v/optimize-vhd?view=windowsserver2025-ps

https://btburnett.com/docker/2021/09/06/reclaiming-hd-space-from-docker-desktop-on-wsl-2.html

https://forums.docker.com/t/how-to-completelly-remove-docker-and-all-leftovers/134189/4

https://bwgjoseph.com/reclaim-disk-space-used-by-docker-desktop-wsl2
IAM User でも請求情報を見れるようにするには、IAMポリシー以外にもrootでの設定が必要

# やりたいこと

rootユーザーだと請求情報が見れるけど、ベストプラクティス的にrootユーザーにはあんまりログインしたくない。

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/root-user-best-practices.html

> ルートユーザーの認証情報が必要なタスクがある場合を除き、AWS アカウントのルートユーザーにはアクセスしないことを強くお勧めします。

請求情報をIAM User（もしくはSSO User）で確認したい。

# 困ったこと
[PowerUserAccess](https://docs.aws.amazon.com/ja_jp/aws-managed-policy/latest/reference/PowerUserAccess.html)を付与したIAM Userで請求情報を見ようと思ったら、権限不足で見れなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320845/a0800ccb-f58b-447b-a0df-45e686783674.png)

なんで？
PowerUserって、IAM, Organization, Account以外のサービスの全部の権限持ってるはずだよね？

# 解決策

どうやら、請求情報を見るには、請求関係の権限を付与するだけでは不足しているらしい。
**請求関係の権限を付与するのとは別に、rootユーザーでアカウント設定を変更する必要がある**そうだ。

https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/control-access-billing.html#grantaccess

> AWS アカウントの IAM ユーザーとロールは、デフォルトでは Billing and Cost Management コンソールにアクセスできません。
> これは、特定の請求機能へのアクセスを許可する IAM ポリシーが設定されている場合でも当てはまります。
> アクセスを許可するには、AWS アカウントのルートユーザーが 「IAM アクセスのアクティブ化」設定を使用します。


![](https://storage.googleapis.com/zenn-user-upload/4a5afcbf5e0c-20250614.png)

- rootユーザーでログイン
- 右上のタブから「アカウント」
- 「IAM ユーザーおよびロールによる請求情報へのアクセス」

これを有効化する

見れるようになった🎉

![](https://storage.googleapis.com/zenn-user-upload/d7c5e286552e-20250614.png)
CTF SQL Injection

# 共通事項

# DB個別

## postgress

### 参考サイト

1. [Postgres SQL Injection Cheat Sheet | pentestmonkey](https://pentestmonkey.net/cheat-sheet/sql-injection/postgres-sql-injection-cheat-sheet)
1. [PayloadsAllTheThings/SQL Injection/PostgreSQL Injection.md at master · swisskyrepo/PayloadsAllTheThings · GitHub](https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/SQL%20Injection/PostgreSQL%20Injection.md)

### メモ

- メタコマンド`\x`でSQLが実行できるようになる
よく学習できている、ってどうわかるの？～AIってすごいんでしょ？！を卒業する②～

これは、前回の記事「AIってすごいんでしょ？！を卒業する基礎的な構造について」の続きになります。
前回紹介した機械学習（machine_learning:ML）や機械学習の手法のうちの深層学習（Deep_leraning:DL）がどうやって学習を「できている」と判断するのかを考える。



機械学習やDeep Learningの「学習」って、実際に何を見て「学習できてるぞ」と判断するのでしょうか？

ポイントは、“どれくらい間違っているか”を数字で見ることです。


![Gemini_Generated_Image_xa8q6zxa8q6zxa8q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900280/13d280e5-8b2e-42b2-86ef-cd9d580628cd.png)


## その1：損失関数（Loss Function）
損失関数は、「モデルの予測がどれくらい間違っているか」を計算する関数です。
簡単に言うと「痛みスコア」。
この値が小さければ小さいほど、予測精度が高くなっている証拠になります。
代表的な損失関数は以下の通り：

📉 MSE（平均二乗誤差）：主に数値を予測する「回帰」タスクで使います。
→ 正解とのズレを2乗して平均する。ズレが大きいほど痛みが大きい。

📉 Cross Entropy（交差エントロピー）：主に分類タスクで使います。
→ 「正解っぽさ」を数値化したもので、正解クラスの確率を高く出せてるほど良い。

実際の学習では、この「損失」を1回ずつ（エポックごと）確認しながら「だんだん減っているぞ！」を見ていきます。
***
※ぶっちゃけここらへんで英語ばかり出てきてしんどい。更に、それぞれの損失値を計算する関数にはとんでも難解式があり、その部分まで説明することは自分にはできない,,,。今後はそういった部分も説明できるようになれたらいいな。

## その２:それ以外のML・DLを評価する指標
損失値以外にも、ML・DLを評価するものは以下の通りである。

・ Accuracy（正解率）：単純に「何％当たったか」
→ クラスが均等な場合には有効。

・ Precision（適合率）：当たったうち、どれくらい正解だったか
→ 誤検出を防ぎたいときに重視。

・ Recall（再現率）：実際にある正解を、どれくらい拾えていたか
→ 取りこぼしを避けたいときに重視。

・ 1スコア：PrecisionとRecallのバランスをとった指標。
***
※ただ損失が下がっていればOK？というと、ちょっと違うのが厄介なところである。現実のデータがあると仮定すると、「98%が正常画像、2%が異常画像」みたいに**偏り（クラス不均衡）**があることはやや多い。
その時に、「全部正常って答えても98%正解じゃん」とかいう悲劇もある。これでは、２％の異常部分を説明できずにそのままの学習を行う。それは、システムを製品化した際や大型のデータセットでの学習時にどのような影響を発生させるかは不透明になる。
,,,よってこういった評価指標も必要になります。
***

次回は学習データの終え方やエポック数（繰り返す学習数）、そして応用分野に着目していければと思う
AIで要件定義を最適化する：曖昧さから詳細へ

# AIで要件定義を最適化する：曖昧さから詳細へ

## はじめに

現在、プロダクト開発のスピードが加速し、競争が激化する中で、AIを活用して要件の抽出・定義工程を最適化することは必然的なトレンドとなっています[1]。

## 曖昧な要求から始まる課題

Product Owner（PO）やBusiness Analyst（BA）の立場で、顧客やステークホルダー（時には自分自身）から「チャットボットエージェントを作りたい」といった非常に曖昧な要求を受けた経験はありませんか？

> 「チャットボットエージェントを作りたい。」

従来であれば、要件定義書（Software Requirements Specification：SRS）を作成する前に、何度もミーティングを重ね、たくさんの質問をして要求を明確化する必要がありました。しかし、今ではAIの力を借りて、このプロセスを迅速かつ効果的に最適化できます[1]。

![誰もが必要とするアシスタント（AI生成画像）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037245/2adb9aa4-44a2-4274-86d5-e754aa0431ae.png)


## AIプロンプト ― 「要件定義・抽出のエキスパート」

AIの力を最大限に引き出すには、要件定義・抽出専用に設計された**特化プロンプト**を使うのが最も効果的です。このプロンプトは、15年以上の経験を持つビジネスアナリストとしてAIに振る舞わせ、IEEE 830、IREB、ISO/IEC/IEEE 29148:2018などの国際標準やAgile（ユーザーストーリー）手法に精通した専門家として働かせます[1]。

### プロンプトの主な構成

- **役割とミッションの説明**：AIに責任範囲と業務内容を認識させる
- **構造化質問スキル**：全体から詳細へ、段階的に質問する方法を指示
- **体系的な要件抽出プロセス**：初期情報の評価からSRS作成まで5ステップ
- **要件の品質基準**：明確・具体的・優先度明示・矛盾なしを担保

**プロンプト全文はこちら：** [要件定義エキスパートプロンプト](https://github.com/phuc-nt/prompt_collection/blob/main/prompts/product-management/product_owner_srs_prompt.ja.md)

## 曖昧なアイデアからSRS完成までAIで実現

実際の効果を理解するため、以下のような曖昧な要求から始めたケースを見てみましょう。

> 「チャットボットエージェントを作りたい。」

AIなしでは、自分で目的やユーザー、必要機能などを一つ一つ質問して明確化しなければなりません。しかし、この特化プロンプトを使えば、AIが構造化された質問を自動で投げかけてくれます。

1. **探索的質問例**  
   - 「このチャットボットの主な目的を詳しく教えてください。」
   - 「主なユーザーは誰ですか？彼らは何を期待していますか？」
2. **明確化の質問例**  
   - 「どのプラットフォームと連携したいですか？例：JIRA、Slack、Confluence」
   - 「チャットボットが実行すべき具体的なタスクは何ですか？」
3. **深掘り・確認の質問例**  
   - 「自然言語処理（NLP）はどのように扱いたいですか？」
   - 「チャットボットが何かアクションを実行する前にユーザーの確認が必要ですか？」

このようなやり取りを数回繰り返すだけで、最初は曖昧だった「チャットボットエージェント作成」というアイデアが、IEEE 830標準に沿ったSRSドキュメントへと変わります。

- プロジェクト目標が明確化
- 機能要件が詳細化（例：JIRA連携でタスク閲覧/更新、Slackでチャット内容分析＆自動作業記録、Confluenceで進捗レポート自動生成）
- 非機能要件（応答速度3秒以内、OAuth2によるセキュリティ）
- 推奨システムアーキテクチャ（LangChainとOpenAI GPTを用いたエージェントベース設計）
- 段階的な導入ロードマップ

## プロンプトAIが活用するPOのスキル

この特化プロンプトは、プロフェッショナルPOのコアスキルをAIに実装するものです。

- **要件抽出（Elicitation）**：段階的なオープンクエスチョンで情報を明確化
- **ビジネス分析**：収集した情報を構造化し、機能・非機能要件に分類
- **優先順位付け**：質問を通じて重要度を明確化し、ステークホルダーの注力点を定める
- **要件ドキュメント作成**：IEEE 830標準に準拠したSRSを自動生成
- **効果的なコミュニケーション**：簡潔で分かりやすい質問で、正確な情報収集を支援

## AIで要件定義を行うメリット

AIを要件定義プロセスに導入することで、次のような利点があります。

- **時間短縮**：数回のやり取りだけで詳細なSRSが完成
- **抜け漏れ・ミスの削減**：体系的な質問で重要情報の取りこぼし防止
- **コミュニケーション＆協働強化**：明確な質問でステークホルダーが正確な情報を提供しやすい
- **曖昧なアイデアでもすぐに着手可能**：事前準備が不十分でも迅速に要件を明確化

## どう始める？

1. ざっくりしたアイデアや初期要求を用意
2. プロンプトをAIツール（ChatGPTやGeminiなど）に入力
3. AIからの質問に答えていく
4. 数回のやり取りで、完成度の高い要件ドキュメントを受け取る

## まとめ

急速なプロダクト開発と激しい競争環境の中、AIを活用した要件抽出・定義の最適化は必須です。この特化プロンプトを使えば、曖昧なアイデアも短時間で高品質な要件ドキュメントへと変換できます[1]。

ぜひ今日から試してみてください。その違いを実感できるはずです！

## 参考

1. [要件定義エキスパートプロンプト](https://github.com/phuc-nt/prompt_collection/blob/main/prompts/product-management/product_owner_srs_prompt.ja.md)
DCCツールのファイルをLLMで読み込む方法

## 環境

* Windows
* Maya 2026.1
* JetBrains AI

## はじめに

この記事ではDCCツールのファイルをLLMで読み込む方法を説明します。LLMによるファイル解析の優位性を示すものではなく、単にその方法を紹介するものです。また、ルールベースの手法と自然言語処理の手法を比較することを目的とした記事ではありませんのでその点をご了承ください。

## ファイルを読み込ませるための前準備

### ファイルフォーマット

多くのDCCツールは、ファイルをASCII形式で保存できます。(Mayaであれば .maファイル、USDであれば .usda、Substance Designerであれば .sbsなど)
ASCII形式であれば、文字列で構成されるため、LLMに解析させることが可能となります。

### 拡張子

対話型AIの多くはファイル添付が可能ですが、2025年6月現在、指定された拡張子以外添付できないケースが多々あります。この問題については、ファイルの拡張子を手動でテキスト形式 (.txt) に変更することで回避します。
ただし、一般的なマークアップ言語に準拠しているファイルについては、そちらの拡張子に変更することをお勧めします。(例えば .sbsであれば.xml形式に変更するなど)

## ファイル読み込みの例

わかりやすさを重視してシンプルな例にしています。ルールベースでも判定可能であり、実用性やLLMの優位性を示すものでない点をご了承ください。

### ファイル

以下の画像のようなシンプルな構造のメッシュを保存したファイルを読み込ませます。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965005/53fbdf68-83ed-46a9-ad54-8c5e664cbd6e.jpeg">

Mayaで作成したデータを.usda形式で保存後、拡張子を.txtにリネームしたものを読み込ませています。

### タスク

対話型AIに下記を検出させます。

- 5角形以上のface (今回の例ではインデックスが 0, 2, 6, 9, 13)
- 凹型のface (今回の例ではインデックスが 2, 6, 9)

### 使用したAIツール

対話型AIは [JetBrainsのAI Assistant](https://www.jetbrains.com/ai/)、モデルは [Gemini 2.5 Pro](https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/2-5-pro) を使用しています。

対話型AIは、私の環境で利用可能なAIという単純な理由で選んでいます。モデルは [Artificial Analysis](https://artificialanalysis.ai/) を参考に、2025年6月現在で性能の高く、JetBrainsのAI Assistantで使用可能なものを選びました。

### プロンプト

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965005/c6cdfdbc-6365-404c-8a88-84294c0c1ea3.jpeg">

この記事ではプロンプトエンジニアリングをテーマとしていないため、詳細は割愛しますが、プロンプト内で、添付したテキストファイルを「USDファイル」として扱うように補足しています。

### 出力結果

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965005/723bfa17-4e75-4543-b9d7-6bd55472f0c9.jpeg">

この記事の例では、ファイル自体がシンプルで、タスクも極めて単純なもののため、今回は上手くいっておりますが、実際には、出力結果の正確性を評価し、入出力を繰り返して調整する必要があります。
また、添付できるファイルサイズにも制限があるため、プロダクションレベルのファイルではサイズが大き過ぎて直接読み込ませるのは難しいケースがあります。(分割してアップロードをする、解析用にデータを整理してサイズを小さくするなどの工夫が必要になります)

## 参考

* [JetBrains AI](https://www.jetbrains.com/ai/)
* [Gemini 2.5 Pro](https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/2-5-pro)
* [Artificial Analysis](https://artificialanalysis.ai/)
未経験エンジニアが2年目に入って思うこと

## はじめに  
私は1年前から未経験でこの業界に入ってきました。1年と少しが過ぎて経験したものやこれからの目標をここに書いておこうと思います。

## 1 年前のスタートライン
当時、大学院で研究をしており、解析の際にMatlabやR、Pythonを使うことがありました。また、大学の講義で基本的なプログラミングやアルゴリズムについては学習していました。一方で、自分でプロダクトを作るようなことがなく、そこの経験のなさがだいぶきつかったように思います。

## この 1 年の技術ハイライト

### 1. Flutter 
- **背景**: Web上で動いている自社サービスのスマホへの移管を行う必要があった
- **沼った点**: 進化の早いフレームワークのため調べたやり方が古かったり、いくつかやり方があって混乱することが多かった
- **学び**: 宣言的UIの構築やコンポーネントの基礎的な概念を理解できた

### 2. Laravel
- **背景**: Webアプリケーションの構築
- **沼った点**:本格的なアプリケーションのMVCモデルなどを当時知らず、案件をこなしながら学んだため理解が進むまでが大変だった
- **学び**: 一つのアプリケーションの開発を通してデータの受け渡しなどの流れを学ぶことができた

### 3. CodeIgniter
- **背景**: Webアプリケーションの構築
- **沼った点**: DB設計など初期段階も関わったが、慣れていないことも多くやり直さなくてはいけないことが多々あり大変だった
- **学び**: ただ単にデータを受け渡すだけではなくそもそものデータ設計などを考えたことで開発においてもコードの整合性など意識が高まったと思う

### 4. AWS
- おまけみたいな感じで少しずつ触れていたがSAAまで取得できた
- AWSを知ることでインフラやネットワークも同時に知ることができてよかった

### 5. Angular
- いくつかのフレームワークを触れてきたことで比較的やりやすかった
- バックエンドの開発が別チームだったため急にデプロイでアクセスできなくなったり知らぬ間に仕様変更されてたりエラーあったりして大変だった

### 6. 周辺スキル
| トピック | 概要 |
|----------|------|
| Git運用 | 基本的なチケット運用はできるようになった |
| Swift | VisionPro向けのアプリ開発試して空間コンピューティングなども触れられた |
| three.js | CG的なものを作れるようになった |
| 競プロ(C++) | AtCoderに参加したりアルゴリズム勉強したり |

こちらで当時のいろいろをたらたらと書いてます。物好きな方がいたらどうぞ
(作成中)
SwiftのCore Dataとは？基本の使い方を簡単に解説してみた！

iOSアプリでデータの保存が必要なとき、あなたはどうしますか？
「UserDefaultsでは物足りない…」そんなときに役立つのが、**Core Data**です。

Core Dataとは？
---

Core Dataは、Appleが提供しているデータ管理フレームワークです。
以下のようなことができます。
- データの保存（ローカル保存）

- データの読み込み、更新、削除

- 複雑なデータ構造の管理（リレーション）

- 高速な検索（フィルター・並び替え）


 Core Dataを使うべきタイミングは？
 --
- ToDoリストアプリなど、複数のデータを保存したいとき

- オフラインでもデータを残したいとき

- UserDefaultsでは扱いにくい、構造化されたデータを扱いたいとき



Core Dataの基本構成
---
Core Dataでは、以下の3つが特に重要です。

| 用語                  | 役割                   |
| ------------------- | -------------------- |
| **Entity（エンティティ）**  | 保存するデータの型（例：メモ、タスク）  |
| **Attribute（属性）**   | データの項目（例：タイトル、日付）    |
| **NSManagedObject** | 実際のデータオブジェクト（インスタンス） |

Core Dataの使い方（基本の流れ）
---
1. プロジェクトにCore Dataを追加
新規プロジェクト作成時に「Use Core Data」にチェックを入れる。もしくは途中からでも Core data の追加もできます。

2. Data Modelを作成する
ファイルでエンティティを作成します

例：
エンティティ名：Task
属性：

title（String）

isDone（Boolean）

3.データの保存・取得・削除の処理を書く

```swift
// ① コンテキストを取得
let context = PersistenceController.shared.container.viewContext

// ② データの追加
let newTask = Task(context: context)
newTask.title = "買い物に行く"
newTask.isDone = false

do {
    try context.save()
} catch {
    print("エラー: \(error)")
}
```
4  データの読み込み（取得）

```swift
let fetchRequest = Task.fetchRequest()

do {
    let tasks = try context.fetch(fetchRequest)
    // 取得したtasksを使ってUIに表示など
} catch {
    print("取得に失敗: \(error)")
}
```
5  データの削除

```swift
context.delete(task)
try? context.save()
```
UserDefaultsとCore Dataの使い分け
--

| 用途           | 推奨方法           |
| ------------ | -------------- |
| ログイン状態や設定の保存 |  UserDefaults |
| 数百件以上のデータ管理  | Core Data    |

まとめ
--
| 項目           | 内容                          |
| ------------ | --------------------------- |
| Core Dataとは？ | iOSのローカルデータベース機能            |
| 向いている用途      | ToDo、メモ、履歴管理など              |


Core dataは少し難易度が高いと思うのですが、ぜひ参考にしてみてください！🙌
約数の列挙



今日も前回に続いて約数の問題をループ処理を使って解いていく！

前回の平方根の考え方を応用しようとしたら、ちょっとつまづいたけど、最終的にはうまくいってよかった🚀

<br><br>

## 問題概要

- 整数 N が与えられる。
- N の約数を小さい方から順に改行区切りで出力せよ。

<br>

入力例：

    10

出力例：

    1
    2
    5
    10

<br>

https://paiza.jp/works/mondai/loop_problems2/loop_problems2__divsor_print

<br><br><br>

## ✅ OK例：
```js
const rl = require('readline').createInterface({input:process.stdin});


rl.once('line', (input) => {
    const N = Number(input);
    
    const divisor = [];
    for (let i = 1; i <= N; i++){
        if (N % i === 0){
           divisor.push(i); 
        }
    }
    
    divisor.forEach(num => console.log(num));
    
    rl.close();
});
```
- 1からNまでを調べる
- 約数を見つけたら配列に格納
- 出力する

1から調べていっているので、勝手に昇順で配列に格納されて、そのまま出力される。

<br><br><br>

## 💡前回の学びを応用してみよう！

前回、約数を見つけるのに、

ループを回すのは、N の「平方根」までで十分であり、

そうすると計算量を大幅に減らせる場合もあると学んだ！

<br>

### ❌ NG例
```js
const rl = require('readline').createInterface({input:process.stdin});


rl.once('line', (input) => {
    const N = Number(input);
    
    const divisor = [];
    for (let i = 1; i <= Math.sqrt(N); i++){
        if (N % i === 0){
           divisor.push(i); 
           divisor.push(N / i);
        }
    }
    
    [...new Set(divisor)].sort().forEach(num => console.log(num));
    
    rl.close();
});
```

❌問題点
`sort()` はデフォルトで文字列として並べるので、
例えば、2の前に10が出力されてしまう。

<br>

※このコードの意図（読み飛ばしてください(´;ω;｀)）

Setを使えば重複を防げるから、一担 Set に入れて、スプレッド構文で配列に戻して、昇順に並び替えて出力すればいいという考え。

ちなみに、そのときは、重複する約数を2回pushしないようにするように条件分岐を書くより、setで処理した方が楽そうだと思った。

<br><br>

### ✅ 方法①：数値として正しく .sort() する
```js
[...new Set(divisor)]
  .sort((a, b) => a - b)  // 数値の昇順で並び替え
  .forEach(num => console.log(num));
```

<br>

### ✅ 方法②：そもそも順番を気にして最初から前後に分けておく
```js
const small = [];
const large = [];

for (let i = 1; i <= Math.sqrt(N); i++) {
  if (N % i === 0) {
    small.push(i);
    if (i !== N / i) large.unshift(N / i); // 重複防止
  }
}

[...small, ...large].forEach(num => console.log(num));
```
→この方法だと `sort()` しなくても 最初から昇順になる

💡ポイント
- `（i !== N / i）` で平方根の重複を避ける。
- `.unshift()` で配列の先頭に要素を追加することで、後半の約数を順番通りに並べる。
- スプレッド構文を使って、配列同士をつなげて出力。

<br>

※補足

例）N = 10

- 1、2、5、10 が約数である　
- [1 と 10]、 [2 と 5] でペアとした時
    - 1と2が小さい約数
    - 5と10が大きい約数

ペアで考えてみると、大きい約数は配列の「前から」いれないと昇順にならないとわかる。

<br><br>

## 📝 気づきメモ & まとめ

- `.sort((a, b) => a - b)` ← 数値ソートの基本！
- `.unshift()` を使うと先頭に要素を追加できる。
- ループは平方根までで十分
    - 約数は 小さい × 大きい のペアで出ることを意識すると効率的。
- スプレッド構文で配列を結合！


<br><br><br>[僕の失敗談(´;ω;｀)と解決法🐈]()
Abstract Syntax Tree Javascript 


## Javascript sample code 

```javascript
const war = 5; // VariableDeclarator

 function triple(number){  // FunctionDeclaration
   return 3 * war; 
 }

 ```


## Json out put 

```json
{
  "type": "Program",
  "start": 0,
  "end": 59,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 14,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 13,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 9,
            "name": "war"
          },
          "init": {
            "type": "Literal",
            "start": 12,
            "end": 13,
            "value": 5,
            "raw": "5"
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "FunctionDeclaration",
      "start": 16,
      "end": 59,
      "id": {
        "type": "Identifier",
        "start": 25,
        "end": 31,
        "name": "triple"
      },
      "expression": false,
      "generator": false,
      "async": false,
      "params": [
        {
          "type": "Identifier",
          "start": 32,
          "end": 38,
          "name": "number"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "start": 39,
        "end": 59,
        "body": [
          {
            "type": "ReturnStatement",
            "start": 42,
            "end": 57,
            "argument": {
              "type": "BinaryExpression",
              "start": 49,
              "end": 56,
              "left": {
                "type": "Literal",
                "start": 49,
                "end": 50,
                "value": 3,
                "raw": "3"
              },
              "operator": "*",
              "right": {
                "type": "Identifier",
                "start": 53,
                "end": 56,
                "name": "war"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

 ```
![Screenshot 2025-06-14 at 14.17.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564975/824934b3-4ec7-48fc-9d64-17c1876a735a.png)


## Reference

https://astexplorer.net/

https://www.youtube.com/watch?v=N5hczoxUzMU&list=LL&index=4&t=32s

https://www.npmjs.com/package/abstract-syntax-tree
【書籍紹介】Tidy First? ―個人で実践する経験主義的ソフトウェア設計

## 読んだ本

https://www.oreilly.co.jp/books/9784814400911/

## 感想

とりあえず読むべしという天の声に従い読み始めた。乱雑なコードへの向き合い方について書かれている本で、類似した書籍に「リーダブルコード」がある。「リーダブルコード」は実践に近い内容だった記憶だが、本書は”理論と実践の橋渡し”と書いてあるように、少し俯瞰した視点から書いてあるように感じて、似ているけど両方読むのがおすすめだ。ボリュームも少ないのですぐ読める。

ざっくり三部の構成になっていて、1部では整頓の具体的手法が解説される。2部はプルリクの単位や、どうやるか、さらにはやらないかのトレードオフについての考え方が書いてある。ここまでは実践に近い内容だが、3部は理論が解説される。なぜ整頓するのかについて色々なアプローチから書かれていて、特にお金の時間価値の概念を取り入れた解説が興味深かった。

## おすすめの人

- **現場でリファクタリングのタイミングに悩んでいるエンジニア**：「いつやるか」「どこまでやるか」の判断基準が学べる
- **技術的負債の改善を上司に提案したい人**：経済的な視点からの説得材料が得られる

## 次に読むなら

- 未読なら「リーダブルコード」「リファクタリング」など

## 知らなかった言葉

- 既知ではあるが、結合、凝集などは定期的に意識し直したい
Linux リダイレクトコマンド 2>&1について端的に解説

LinuxやMacのターミナル、WindowsのPowerShellなど、コマンドラインで作業をしていると、
たまに見かける「リダイレクト」「2>&1」という記号。

他の記事を読み漁りましたがいいのがなかったので
自分用に書いていますがよければご覧ください。

---

## 前提知識：「標準〇〇」について

コマンドを実行するとき、実は裏側では「入力」と「出力」が3種類に分かれています。（正確にはもっとあるかもしれません）

### 1. 標準入力（stdin）

* **プログラムが受け取る情報**
* 普通はキーボード入力
  （例：`cat` にファイル名を渡す）

### 2. 標準出力（stdout）

* **プログラムの実行結果（成功）**
* 普通は**画面に表示される（ディスプレイという意味）**

### 3. 標準エラー出力（stderr）

* **エラーのメッセージ出力**
* 普通は**画面に表示される（ディスプレイという意味）**
エラーなので標準出力とは分けて扱う

---

## 具体例で見る

```bash
cat hoge.txt
```

このコマンドで `hoge.txt` の内容を表示したいとします。
ファイルの中に `hogehoge` と書かれていれば、画面にこう表示されます：

```
hogehoge
```

これが **標準出力（stdout）**です。
そしてユーザが入力したcat hoge.txtが標準入力です。

では、`hoge.txt` にアクセス権がなければどうなるか？

```bash
cat: hoge.txt: 許可がありません
```

このエラー文は **標準エラー出力（stderr）** として扱われます。

そしてそれらの入出力には番号が割り振られています。：

| 出力内容     | 出力の種類       |
| -------- | ----------- |
| キーボードからの入力  | 標準入力（0番）    |
| ファイルの中身  | 標準出力（1番）    |
| エラーメッセージ | 標準エラー出力（2番） |

---

## こられを踏まえてまずリダイレクトの理解をする

### リダイレクトとは「出力先の変更」です

通常、出力は画面に流れますが、それを**ファイルなど別の場所に送る**のがリダイレクトです。

### ✔ 基本形

| コマンド例                  | 意味                       |
| ---------------------- | ------------------------ |
| `command > file.txt`   | 標準出力を `file.txt` に送る     |
| `command 2> error.txt` | 標準エラー出力を `error.txt` に送る |

このように2>とすることで標準エラー出力としてリダイレクトさせることができます。
(> は1>が隠れているということです。)

---

## では `2>&1` って何？

ここからが本題。

```bash
some_command > all.log 2>&1
```

これがやっているのは、

> 「標準出力を `all.log` に出す」＋「標準エラー出力も、**同じく** `all.log` に出す」

同時に標準出力と標準エラー出力のリダイレクト先を設定しているということです。。

### 🔍 内訳を解説

| 表現   | 意味                             |
| ---- | ------------------------------ |
| `>`  | 出力をリダイレクト（ファイルに出す）             |
| `2>` | 標準エラー出力をリダイレクト                 |
| `&1` | 「ファイル記述子1（標準出力）の**行き先**と同じにする」 |

---

## 順番に注意！

```bash
some_command 2>&1 > all.log
```

これは**エラー**は画面に出て、**出力だけファイルに行く**
→ 順番を間違えると意図した結果にならない。

常にこう書くべし：

```bash
some_command > all.log 2>&1
```

---

## よく使う形まとめ

| コマンド                     | 意味                    |
| ------------------------ | --------------------- |
| `command > out.txt`      | 標準出力をファイルに書き出す        |
| `command 2> error.txt`   | エラーだけ別ファイルに書き出す       |
| `command > all.log 2>&1` | 出力もエラーもまとめて1つのファイルに保存 |

---

## まとめ

```bash
1> = 標準出力の行き先を変える  
2> = 標準エラー出力の行き先を変える  
2>&1 = エラー出力の行き先を、標準出力と同じにする
```

<Alert>
リダイレクトとは「出力先の変更」。  
`2>&1` は「エラー出力も同じ場所に出してね」というだけ。  
実はシンプルな仕組みです。
</Alert>

---
標準入力・標準出力の学習のまとめ


## 基本概念

### 標準入力・標準出力とは
```
標準入力(stdin)  → [プログラム] → 標準出力(stdout)
                              → 標準エラー出力(stderr)
```

**デフォルト：**
- 標準入力：キーボード
- 標準出力：画面
- 標準エラー出力：画面

## リダイレクト
標準入力・標準出力をデフォルトから切り替える

### 基本的なリダイレクト
```bash
# lsで表示される出力をファイルに
ls > list.txt

# 入力をファイルから
cat < file.txt

# エラーをファイルに
cat nofile.txt 2> error.txt
```

## コマンドの分類

### データ生成系（標準出力メイン）
```bash
ls          # ファイル一覧
cat file    # ファイル内容
echo hello  # テキスト出力
date        # 現在時刻
```

### データ処理系（標準入力→標準出力）
```bash
grep txt    # txtを含む行を抽出
sort        # ソート
head -5     # 最初の5行
wc -l       # 行数カウント
```

### データ表示系（標準入力→画面）
```bash
less        # ページ単位表示
```

## パイプライン

### パイプの仕組み
```bash
コマンドA | コマンドB
```
- コマンドAの標準出力 → コマンドBの標準入力

### 簡単な例
```bash
# ファイル検索
ls | grep txt

# ファイル数カウント
ls | wc -l

# ソートして表示
ls | sort

# 最初の3個だけ
ls | head -3

# 見やすく表示
ls | less
```

### 複数の組み合わせ
```bash
ls | grep txt | sort | head -5
# txtファイルを探して、ソートして、最初の5個表示
```

## 重要なポイント

** データの流れ**
```
生成 → 処理 → 処理 → 表示
ls  → grep → sort → less
```


**基本パターン**
```
何かを表示 | 絞り込み
何かを表示 | 並び替え
何かを表示 | 数える
```
Cucumberテストでブレークポイントが効かない？Payaraをデバッグモードで起動すべき理由と対処法

# はじめに
Cucumberによる結合テストで、実装側のブレークポイントが効かず困ったことはありませんか？

私自身、JUnitでは止まるのに、Cucumberから呼ばれる実装処理が止まらず何が起きているかわかりませんでした。
原因は「Payaraをデバックモードで起動していないこと」にありました。

この記事では、その技術的な理由と対処法をわかりやすく整理しました。


# 背景と疑問におもったこと
Cucumberテストを実行し、実装側にブレークポイントを設定しても、Payaraをデバックモードでデプロイしていないと、ブレークポイントが反応しない理由がわからなかった。
Junitなどの単体テストではIDEと同じJVM内で実行されるためブレークポイントが効くが、Payara経由で動作するCucumberテストの場合、なぜデバックモードでサーバを起動しないと止まらないのか疑問

# 技術的な補足・考察
#### 想定される原因と背景
Cucumberは通常、アプリケーションを起動したPayara Serverに対してHTTPリクエストを投げてテストを行う構成（外部結合テスト）であることが多い。

:::note info
1\.そのため、テストコード（Cucumber）が呼び出す対象は、「Payara上にデプロイされたアプリケーションのHTTPエンドポイント」になる。
2\.実装の処理が実行されるのはPayara上のプロセスであり、IDEの通常のデバックモードでは対象にならない。
:::

Payaraがデバックモードで起動されていないと、JVMのデバッガーポートが開かれておらず、IDEから接続できない。

:::note info
1\.デバッグモードでは、JVMに対して「外部デバッガから接続可能なポート」が開かれ、IDEと通信できるようになる。
2\.通常モードだとこの接続が行えず、IDEのブレークポイントも機能しない。
:::

#### ポイントまとめ
| 用語 | 意味 |
|:-:|:-:|
| JVM  | Javaの実行環境  |
| Payara  | JVM上で動くアプリサーバ  |
| デバッガーポート  | JVMがデバッグ時に外部と通信するために開くポート  |
| JPDA  | デバッガーとJVM間の通信を可能にするプロトコル。  |
| IDE  | 開発を支援する統合環境。  |

### Payara は JVM 上で動いているアプリケーションサーバ
```mermaid
classDiagram
  JVM仮想マシン <|-- IDE
  class JVM仮想マシン{
    Payara：アプリケーションサーバ
  }
  class IDE{
    ブレークポイントを仕掛けたい
  }
```

### 通常モードとデバッグモードの違い
```mermaid
classDiagram
  通常モードのPayara <|-- IDE
  デバッグモードのPayara <|-- IDE
  class IDE{
    ブレークポイントを仕掛けたい
  }
  class 通常モードのPayara{
    鍵が閉まっている
    見えない！止められない！
  }
  class デバッグモードのPayara{
    ポート9009番が開いてる
    IDEから「止まれ！」が届く！
  }
```
# 対処法としては
Payaraを`--debug`オプションまたはIDE（例：IntelliJ）の「Debug」ボタン経由で起動する。
JPDAポート（例：9009）をIDE側のRemote Debug設定で接続しておく。
されに、`payara-maven-plugin`などを使っている場合は、`debug`プロファイルの設定も確認する。

# 学び
Cucumberを使ってPayara上のREST APIをテストする際、実装側でのブレークポイントを効かせるには、Payara Server自体をJPDAポートを開いてデバッグモードで起動する必要があるとわかった。
単体テスト（JUnit）とは異なり、外部結合テストではサーバプロセスが別JVM上で動いており、IDEからは直接制御できない点に注意。
JavaScriptのイベントループ

## イベントループとは
非同期処理を可能にし、シングルスレッドで効率的に複数のタスクを扱うための仕組み

## 主な構成要素
### コールスタック
- JavaScriptの関数実行の順番を管理するスタック
- 同期的なコードはここで順に実行される
- LIFO（後入れ先出し）のスタック構造

### タスクキュー
- setTimeoutやイベントリスナーなどが入る
- 実行準備が整った非同期処理のコールバック関数が並ぶ

### マイクロタスクキュー
- Promise.thenやawaitがついた処理などが入る
- タスクキューより優先度が高く、イベントループの1サイクルごとに、必ず全て実行される

## イベントループの流れ
1. コールスタックが空になるまで、同期処理を実行
2. マイクロタスクキューの全てを実行
3. タスクキューから1つ取り出して実行
4. 再びマイクロタスクキューの全てを実行
5. このサイクルを繰り返す

## 実行順の例
```js
console.log(1);

setTimeout(() => {
  console.log(2);
}, 0);

Promise.resolve().then(() => {
  console.log(3);
});

console.log(4);
```
このコードを実行した場合、
```
1 → 4 → 3 → 2
```
の順でログが出力される
[AutoHotkey]Vim的キーバインドでPC作業をミニマルに最適化する方法

# Vim風キーバインドでPC操作を効率化する方法（AutoHotkey活用）

みなさん、パソコン作業をしていますでしょうか？  
そのうえで、**キーボードの操作**というのは必須だと思います。

しかし、現在主流である **QWERTY配列** というのは、お世辞にも効率化された配置とは言えません。  
特に **矢印キー** は、コーディングを行う上で頻繁に使用するにも関わらず、ホームポジションからかなり遠い位置にあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4078843/01a6754c-9a22-49c1-8940-7069fb47b9fa.png)


この問題は、VimやHHKBといった一部のキーボード・ツールを使うことで解消されているケースもあります。  
実際、私もNeoVimを使用しており、その快適さは身をもって実感しています。  
ですが、一般的なアプリケーションや書類作成では、Vimのキーバインドは活かせません。

この「矢印キー問題」を、**すべてのPC操作で解消したい**と思い、この記事を書くことにしました。

---
https://www.autohotkey.com/

## AutoHotkeyを利用したキーマッピングの方法

私の環境は **Windows 11** です。  
この環境でキーバインドを自由にカスタマイズできるソフト「**AutoHotkey**」を利用します。

> ※AutoHotkeyの導入方法やインストールについては、他のQiita記事などをご参照ください。

---

## Vimと同じキー配置で矢印キーを操作する

Vimと同様に、以下の配置を再現したいと思いました。

↑　k
↓　j
→　l
←　hです。

これをAutoHotkeyで実現するために、**CapsLockキーを修飾キーとして利用**し、以下のようなスクリプトを書きました。

```ahk
SetCapsLockState, AlwaysOff ; 常にCapsLockを無効にする

CapsLock & h::Send, {Left}
CapsLock & j::Send, {Down}
CapsLock & k::Send, {Up}
CapsLock & l::Send, {Right}
```

意外とシンプルですよね。
このスクリプトを実行しておくだけで、普段のPC操作でもVimと同じようにカーソル移動ができるようになります。

## おまけ：そのほか便利なCapsLockショートカット
さらに、私は以下のような便利なキー設定も追加しています。

Capslock + n : Backspace
Capslock + wasd : 行の一番最初、最後等に移動できる（EndキーやHomeキーの役割）

```
CapsLock & n::Send, {Backspace} ; n → バックスペース
CapsLock & d::Send, {End}        ; d → 行末へ移動
CapsLock & a::Send, {Home}       ; a → 行頭へ移動
CapsLock & w::Send, ^{Home}      ; w → ファイルの先頭へ移動
CapsLock & s::Send, ^{End}       ; s → ファイルの末尾へ移動
```
これにより、ホームポジションから指を離すことなく、よりスムーズな操作が可能になります。

---
最後まで記事を読んでいただいてありがとうございました。
【CPU自作】AVR疑似コアをVHDLで制作した話

Qiitaに初めての投稿になります。これまで趣味も含めて15年以上技術（電子回路・組み込み技術）とかかわってきましたが、こうやって公に自分の書いた制作物を出すのは初めてです。
私は学生時代AVRマイコン（Atmel社製、現在はMicrochipに統合）を使っていろいろ作るのが好きでした。今後記事にしようかと思っていますが（10年以上前なので制作物残ってるかな？）、MP3プレーヤをCADで基板設計～ソフトウェア作成までして作ったことがあります。PICマイコンも少しいじっていましたが、レジスタのバンク切り替えもろもろが面倒、とかいろいろな理由でAVRのほうが好きです（笑）。
AVRと聞いてご存じの方もいらっしゃると思いますが、有名なArduino UNOに使われているAtmega328Pが代表的なAVRマイコンです。

さて、本題に入りますが就職してよくFPGAを触るようになってから、CPU自作に関心を持つようになり「もしやAVRをFPGAで実装できるのでは？」と思いちょうど数年前の新型コロナが出た時期ぐらいにAVRをVHDLで実装し始めました。

仕様は以下になります。
・Atmega328Pに近い（一部レジスタのアドレスなどは一部変更）仕様
・基本的な算術命令（addなど）
・スタックを使いサブルーチンが構築できる仕様（rcall,ret）
・条件分岐命令
・まだ割り込みは実装していません
・PORTA～D実装
・アセンブラはavrasm2.exe（AtmelStudio7に付属）を使って吐き出されたHEXファイルをQuartusのOnChipRAMの初期値として設定
まだ実装していない命令もあり完璧なコードではないですが（更新予定）、ある程度動くようにはなっているのでGithubにあげてあります。
https://github.com/ykhr7121rkhy/AVR_single_cycle_core

・検証方法
①	avrasm2.exeを使い任意のアセンブリコードからHEXファイルを生成
②	modelsimでhexファイルを含めコードをコンパイルし、命令がちゃんと実行されているかどうか波形確認

これくらいの命令数であればLチカ～簡単なキャラクタLCD操作ぐらいであれば実現可能です。


●今後の目標、改善点など
・Arduinoで動かせたら面白い
・割り込みも付けたい
・現状シングルサイクルなのでパイプライン化したい（ハザードとか面倒そう）
・ほかのマイコンの疑似コアも作ったら面白そう

以上になります。
簡単な紹介ではありますが、読んでいただいてありがとうございました。
LinuC 303の受験メモ

## はじめに
こんにちは。
今日の午前中にLinuC 303を受験してきました。その感想を備忘録として残したいと思います。

## 学習方法
以下のWebページを参考にしました。
* [Ping-t](https://mondai.ping-t.com/g)プレミアムプランの問題集・コマ問
* [LinuC](https://linuc.org/)のサンプル問題

Ping-tプレミアムプランの問題集・コマ問を繰り返し何度も解いてわからないところはひたすら解説を読んで頭に入れるようにしました。業務が忙しすぎて、正直、勉強がなかなか捗らなかったですが、合間を見つけてコツコツと勉強するようにしました。
個人的にはPing-tのプレミアムプランを繰り返すことによって理解度も深まりました。本来は、Linuxを用意して実際に使ってみるともっと理解も深まるとは思いますが、LinuC 303に合格するだけであればPing-tだけでも問題なさそうに思います。

## 受験結果
点数	626 点
合格できました。これでLinuC Level3はコンプリートです。

## 感想
かなり細かいコマンドのオプションなどが問われるので、少し難しく感じました。でもPing-tのプレミアムプランを繰り返し勉強していたためか、それ以外の多くの問題はすんなり解けたと思います。90分で60問を解くので時間的にはかなり余裕があり、問題を見直すことができました。
説明図用の画像生成 各サービス精度比較

教材やパワポの説明のときに図を載せたいときがありますよね。
イラスト画像やビジュアル用ではなく
こんな感じの図が作りたいときです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/a5d56944-ea29-4090-85cf-99bee250b751.png)

chatGPT等を始め、各ツールを比較してみました。
napkin.ai
ChatGPT
Gemini
Perplexity 
Claude
GenSpark

※設計図などに使用するフローチャートやクラス構成図の生成に関してはPlantUMLかMermaidの方がいいと思います。
以下は結構昔に書いた記事です。

https://qiita.com/hokutoh/items/aab457ae0c31e73a9023

## napkin.ai

プレゼン用図作成としては本命だと思われたnapkin.aiは
イメージ的にはパワポのスマートアートを自動的に作ってくれる、テンプレート的なイメージで
独自の表現にしたい場合はあまりうまくいってくれませんでした。

以下のように候補一覧を見ても、いわうるスマートアートのステップ図と言った形です。
冒頭の図のようにひとあじ加えたい場合はうまくいってくれませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/6d4b2afc-9085-4081-a6be-5314553e34e6.png)

Gannmaなどスライド作成系でも同様でした。

ということで、汎用チャットサービスで行くことにしました。

## Chatサービス系
まず前提として、イラストなどではなく冒頭の図のような説明図を生成した場合、
チャット系サービスは普通の画像生成だとまずうまくいきません。
特に文字が入るとうまく出すまでにプロンプトでの試行錯誤がかなり必要になります。

HTMLかSVGのようなマークアップで指示した方がうまくいきます。
また、画像生成では困難な「微調整」がHTML/SVGだと容易というメリットがあります。
今回はより画像としての側面が強いSVGで指示しています。

またプロンプトの試行錯誤により精度は上がると思いますが、今回は「簡単に」を条件にシンプルな1,2プロンプト以内で生成できるという条件にします。

スタートのプロンプトは以下です。
```text
【ライブラリ活用の4ステップ】 
1. 事前のステップ
1-1. インストール (install): 自分の環境にライブラリ機能を追加する
2.コード内でのステップ
2-1. インポート (import): プログラムの中で「このライブラリを使います」と宣言する
2-2. インスタンス生成: ライブラリの設計図（クラス）から、実体（インスタンス）を作る
2-3. メソッド実行: 実体（インスタンス）が持つ機能（メソッド）を呼び出して実行する

上記の説明の図をSVGで作成してください
```

## chatGPT

chatGPTでは以下のようになってしまいました。
chat内でのSVGプレビュー機能もあります。

単純4ステップになってしまい、矢印の関係もおかしいです。(importしないとインスタンス生成できないよ)
冒頭のような図に持っていくためにはいくつかやり取りが必要そうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/1cd2b45c-e373-461e-9c72-12b9bbf48e4a.png)

## Gemini

GeminiはそもそもSVGと指示してもpngで出してきたりします。
(画像生成自体も日本語に対応していなかったりでこの分野は苦手のようです。)
画像生成してもらったあと、「SVGのコードで出力してください」と指示の追加が必要でした。
当然SVGのプレビュー機能もないので、別途自分でSVG保存して確認する必要があります。

結果は以下で、一応単純4ステップではなく区分けを意識してきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/f0d6e81f-a10e-4d66-89ec-0b00d7283db0.png)

見栄えをよくしてくれと指示して、こんな感じです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/cea5e604-65c0-4a3f-8f28-56944b7ed3d3.png)

## Perplexity

こちらもSVGのコードで出力してきました。
SVGのプレビュー機能はなさそうです。

結果は以下で、やはり単純4ステップにしてきました。
(位置がずれているのは他でも起こりがちなので微調整部分)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/0f5f905b-7056-48fe-9511-e64e8161df92.png)

## Claude

実は冒頭の画像はClaudeで生成した画像です。
この調査をしてみようと思ったのも知り合いから「Claudeがいい感じ」という情報を聞いたからになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/a8b38181-8fe9-4239-82a8-520659d4b2c5.png)


## GenSpark

GenSparkは冒頭の指示だけだとスライドを作成し、単なる箇条書きのスライドを作成してしまったので
追加で「SVGの図を作ってくれ」という指示が必要でしたが
余計な謎の図形や読みにくい文字はありつつも一応意図とは近い形で出力してきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/17d608ec-af02-46ae-8742-43b033a60768.png)

ただ、非常に時間がかかるのがたまにキズです。
「今回のちょいちょいと作りたい」という意味ではワンテンポ遅れる形です。
もっとも画像だけではなくスライド生成が目的ならその一環で作業できるので問題ないとは思いますが。

## まとめ

この中ではClaudeが好みの画像を出力してきました。
今回の題材以外でもSECIモデルの図を作成させたりしましたが、やはりClaudeが良い感じでした。

もっとも、プロンプトの精度やステップを踏めばどれもそれなりの形にはなるでしょうし、
手書きでイメージを書いてからマルチモーダルで指示するとかなり精度は上がると思われます。

また、ここら辺の動きは各サービスの性能アップでモリモリ入れ替わるところなので
あくまで「2025年6月現在の動きでは」という形でご参考頂ければと思います。