OmniAICreator/Qiita-1.07M huggingface dataset:
finger（フィンガー）とmultiplier（マルチプライヤー）とMOSFET


## ✅ MOSFETの基本ドレイン電流式（飽和領域）

$$
I_D = \frac{1}{2} \mu C_{\text{ox}} \frac{W}{L} (V_{\text{GS}} - V_{\text{th}})^2
$$

### 各記号の意味：

* $I_D$：ドレイン電流
* $\mu$：キャリア移動度（mobility）
* $C_{\text{ox}}$：ゲート酸化膜容量（per unit area）
* $W$：チャネル幅（Width）
* $L$：チャネル長（Length）
* $V_{\text{GS}}$：ゲート-ソース間電圧
* $V_{\text{th}}$：しきい値電圧（threshold voltage）

---

## ✅ finger / multiplier のW/Lに与える影響

### ● 通常のMOSFET

* $W = 10\,\mu m$, $L = 1\,\mu m$ のとき：

  $$
  \frac{W}{L} = \frac{10}{1} = 10
  $$

---

### ✅ finger（フィンガー）ありの場合

* **定義**：WをN本に分割し、個々のFETを指（finger）状に並列接続
* 例：finger = 5 のとき → 1本あたり W = 2μm、L = 1μm
* 各トランジスタ：$\frac{W}{L} = \frac{2}{1} = 2$
* しかし5本並列接続されるので、全体の有効 $W/L = 10$（合成的には同じ）

$$
W_{\text{effective}} = N_{\text{fingers}} \cdot \left(\frac{W}{N_{\text{fingers}}}\right) = W
$$

---

### ✅ multiplier（マルチプライヤー）ありの場合

* **定義**：同じW/L比をもつMOSFETを複数コピー（完全並列）
* 例：multiplier = 5 のとき

  $$
  W_{\text{effective}} = 5 \cdot W,\quad \Rightarrow \frac{W_{\text{eff}}}{L} = 5 \cdot \frac{W}{L}
  $$
* ドレイン電流は比例して増加：

  $$
  I_D^{\text{total}} = N_{\text{multiplier}} \cdot I_D
  $$

---

## ✅ まとめ：finger と multiplier の違いと式への影響

| 項目        | finger                | multiplier          |
| --------- | --------------------- | ------------------- |
| 定義        | 幅Wを複数の指（finger）に分割    | 同じW/Lを持つMOSFETを複製   |
| レイアウト上の意味 | 幅方向に分割して並列化（配線短縮・対称性） | ドライブ力強化・電流量増加       |
| 有効W       | $W$（分割しても合計は不変）       | $N \cdot W$（N倍）     |
| $W/L$（全体） | 変化なし                  | $N \cdot (W/L)$ に増加 |
| $I_D$（合成） | 変化なし（合成的に）            | N倍になる               |

---

## ✅ 結論

MOSFETのドレイン電流式において：

* **finger**は物理配線・寄生成分の最適化に寄与（電流は合成的に同じ）
* **multiplier**は電流ドライブ力を線形に増加させる設計要素

この違いは、レイアウト設計、面積制約、速度要件などに応じて選択されます。ご希望あれば、これらを含んだSPICEモデル記述例やCadence Layoutへのマッピングも提示可能です。

参考文献

https://community.cadence.com/cadence_technology_forums/f/custom-ic-design/17152/fingers-and-multiplier-of-mosfet?utm_source=chatgpt.com

https://www.edaboard.com/threads/finger-and-multiplier.120582/?utm_source=chatgpt.com

https://people.engr.tamu.edu/spalermo/ecen474/hspice_mosfet.pdf?utm_source=chatgpt.com
アセットパイプラインとは

# アセットとは
Website assets refer to all the various components and resources that come together to create a website. These elements play crucial roles in shaping the user experience, performance, and overall functionality of the website. Here’s a breakdown of typical website assets:

ウェブサイトは作成するために組み合わされるすべてのいろんな要素と資源を指す。
それら構成要素はwebサイトのユーザエクスペリエンス、パフォーマンス、機能全体を形成する重要な役割を果たしている。

参考　DeepL

https://vonclaro.com/blog/what-are-website-assets/

# アセットパイプラインとは
Railsのアセットパイプライン（Asset Pipeline）は、`JavaScript、CSS、画像ファイルなどの静的アセットを整理・キャッシュ・配信するために設計されたライブラリ`です。これらのアセットの管理を合理化および最適することで、アプリケーションのパフォーマンスとメンテナンス性を高めます。

## Railsのアセットパイプラインは、Propshaftによって管理されている
Propshaftは、基本的なアプリケーションにおけるトランスパイルやバンドルや圧縮が、ブラウザでのサポート強化やネットワーク高速化、HTTP/2機能によって以前ほど重要ではなくなった時代に合わせて構築されています。

### Propshaftの機能
Propshaftでは、アセットがすでにブラウザ対応の形式（プレーンCSS、JavaScript、前処理済みのJPEG画像やPNG画像など）になっていることを前提としています。`Propshaftの役割は、それらのアセットを効率的に整理・バージョニングしてブラウザに配信`することです

https://railsguides.jp/asset_pipeline.html

# 感想
また理解したくなったら書く
「リポジトリ多すぎてとっ散らかる問題」をghqで解決！

最近、ライブラリなどのソースコードをAIエージェントに読ませる機会が多く、そのたびにローカルに`git clone`してくることが増えました。

しかし、困った問題が一つありました。それは、「リポジトリの数が多すぎて整理整頓ができていない」という課題です。

皆さんは、ローカルにクローンしたリポジトリをどのように管理されているでしょうか？僕は野放図にフラットに並べていたのですが、そのせいでどこに何があるのか分からなくなってしまいました。

本稿では、こうした問題を解決してくれる`ghq`というツールについて紹介します！

## Go言語のライブラリ管理から学ぶ

まず、どう整理したらいいものかと考えたところ、「そういえば、Goのライブラリってうまく整理できてたな〜」ということを思い出しました。

Go言語では、ライブラリは以下のようなツリー構成で管理されています：

```
github.com/
├── [user1]/
│   ├── [repo1]/
│   └── [repo2]/
└── [user2]/
    ├── [repo1]/
    └── [repo2]/
```

これは、GitHubのURLの階層構造をそのままディレクトリ構造に反映したものです。非常に直感的で、どこに何があるかが一目瞭然です。

## 手動でやるには面倒すぎる問題

この構造を自分のリポジトリ整理にも真似したいと思ったのですが、`git clone`だけでこれを実現しようとすると結構面倒です。

1. まず、ユーザー名のディレクトリを作るために`mkdir -p github.com/[user]`を実行
3. 作成したディレクトリに`cd`
4. そこで`git clone`を実行

少なくとも３ステップはやることがあって、こんなんじゃ「整理するぞ」と意気込んでも、僕だったら三日坊主で終わっちゃいます💦

理想は、**GitHubのURLをコピペするだけで、上のようなディレクトリ構造を自動で作ってくれるツール**です。そんなツールは無いかな？と思って調べてみました。

## ghqとの出会い

そして見つけたのが、`ghq`というツールでした。

https://github.com/x-motemen/ghq

使い方は非常にシンプルです：

```bash
ghq get --look https://github.com/kubernetes-sigs/multicluster-runtime.git
```

このコマンドを実行すると、`~/codes/github.com/kubernetes-sigs/multicluster-runtime`というディレクトリが自動で作成され、その中に`git clone`してくれます。

おまけに`cd`までしてくれるので、すぐに作業を開始できます！

まさに痒いところに手が届く感じです。

## 設定方法

リポジトリをクローンする場所は、グローバルのgit configで`ghq.root`を設定するだけです。

僕は`~/codes`にリポジトリをクローンするようにしているので、以下のように設定しました：

```bash
git config --global ghq.root '~/codes'
```

## 階層構造での移動を快適にする工夫

ディレクトリが階層構造になることで一つ困ることがあります。それは移動のしにくさです。フラットにリポジトリを並べるのと比べて、パッとcdできないのが不便に感じることがあります。

そんな時は、以下のようなシェル関数を追加しておくと便利です：

```js:fish
function gcd
  cd (ghq list -p | fzf)
end
```

この関数により、ghqで管理しているリポジトリ一覧をfzfの曖昧検索で選択し、一発でジャンプできるようになります。

## さらなる効率化のためのエイリアス設定

毎回`ghq get --look`を打つのが手間なのと、`--look`オプションは忘れがちなので、エイリアスに設定しておくことをおすすめします：

```bash:fish
abbr -a ghc ghq get --look
```

これで`ghc <URL>`でリポジトリをクローンして、すぐに`cd`できるようになります🙌

## まとめ

ghqを使うことで、以下のメリットが得られました：

- GitHubのURL階層に沿った直感的なディレクトリ構造
- 一発でクローン＋移動ができる効率性
- fzf連携による快適なリポジトリ間移動

ローカルリポジトリの整理に悩んでいる方は、ぜひghqを試してみてください。きっと開発環境がより快適になるはずです。

最後までお読みくださりありがとうございました。
【CppGameDevTutorials/00_HelloCpp】C++開発環境構築

ゲームを作りましょう. C++で. Unity? 棚に戻してきなさい.
(実際, 他人が作ったよくわからない仕様と闘うか, 自分や自然科学と闘うかの違いでしかなく, 後者の方が精神衛生にいいのでC++で作ることを推奨します. 冗談ではなく, 本気でそう思っています.)

今回はまずC++の開発環境を構築します.

## 前提
- Windows 11 (x64)
- Visual Studio Code

## 手順
1. **Visual Studio Build Tools(VSBT)**
    Visual Studioのエディターはこの世で最も醜いものの一つなので使わず, 中にあるBuild Toolsのみを使います. Visual Studioを入れずにこれだけをインストールできます.
    1. 公式サイト([https://visualstudio.microsoft.com/downloads/](https://visualstudio.microsoft.com/downloads/))の下の方からダウンロード(Tools for Visual Studio → Build Tools for Visual Studio 2022).
    2. C++によるデスクトップ開発にチェックを入れる.
2. **vcpkg**
    パッケージマネージャ. VSBTの中にもvcpkgがありますが, 偽物なので使いません. vcpkgはユーザーディレクトリなどに入れるのが一般的らしいです. (OSの直下にフォルダを作って開発用のツールをまとめる人もいるらしい)
    1. インストールしたい場所で以下を順に実行する.
        ```bash
        # インストール
        git clone https://github.com/microsoft/vcpkg.git

        # bootstrap
        .\bootstrap-vcpkg.bat

        # Visual Studioと統合
        .\vcpkg integrate install
        ```
    2. システム環境変数のPATHに追加
        vcpkg.exeを持っているフォルダのパスをコピーしてPATHに追加します. 最も外側のvcpkgだと思います.
3. **CMake**
    メタビルドシステム. 公式サイト([https://cmake.org/](https://cmake.org/))からインストールします.
    (「コンパイル」というのはソースコードを機械語に翻訳することであり, これはファイルごとに行われるので, 複数のソースコードからなるゲームを作るにはそれらを結合する「リンク」という作業が必要になります. これらをまとめて「ビルド」といい, ビルドを自動で行うツールを「ビルドツール」といいます. ビルドツールには複数あり, それらの仕様ごとに異なる形式のキャッシュを生成するのですが, これでは共同開発などで不便なことが多かったため, 選択的にビルドツールを生成してビルドを行う「メタビルドシステム」というものが誕生しました.)

4. **母国語を取り戻す**
    現状ではC++のコード内で日本語(UTF-8)を書くとコンパイルに失敗します. そこでWindowsの設定を見直す必要があります.
    1. 設定 → 時刻と言語 → 言語と地域 → 管理用の言語の設定 → システム ロケールの変更 → 「ベータ: ワールドワイド言語サポートでUnicode UTF-8を仕様」にチェックを入れる.
    2. PCを再起動する.
5. **VS Code拡張機能**
    - C/C++
    - CMake Tools

    あたりがあれば十分だと思います. あとはお好みで.

## サンプルコード
プロジェクトフォルダの直下にCMakeLists.txtを作り, 以下のように書きます. (このファイル名にするとVSCode上でアイコンがMになると思います.)

```cmake
# 00_HelloCpp/CMakeLists.txt

# CMakeの最低バージョンを指定
cmake_minimum_required(VERSION 3.15)

# プロジェクトを定義(HelloCppという名前のCppで書かれたプロジェクト)
# このプロジェクト名はフォルダ名と同じである必要はない
project(HelloCpp LANGUAGES CXX)

# ビルドを実行(main.cppをコンパイルしてhello.exeを作る)
add_executable(hello main.cpp)

```

main.cppを適当に書きます.
```cpp
// 00_HelloCpp/main.cpp

#include <iostream>
#include <vector>
#include <string>

int main() {
  std::cout << "Hello, C++!" << std::endl;
  std::vector<std::string> Zoo = {"dog", "cat", "bird"};
	for (const auto& animal : Zoo){
		std::cout << animal << ' ';
	}
  std::cout << "" << std::endl;
  std::cout << "はろーわーるど！" << std::endl;
  return 0;
}
```

## ビルドと実行

プロジェクトフォルダの直下で以下を順に実行します.
```bash
# buildフォルダを作成・移動
mkdir build && cd build

# キャッシュファイル作成
cmake ..

# Debugフォルダの中に実行ファイルを生成
# 以降, コードを変更したらここからやり直す
cmake --build . --config Debug

# 実行
./Debug/hello.exe
```
<details><summary>ビルドの慣習について</summary>
buildフォルダを作って, その中にビルド生成物をすべて入れます. これにより, buildフォルダを消すことでビルド状況をリセットできます. これを「out-of-sourceビルド」といいます.　開発時はbuildの中にさらにDebugフォルダを作り、その中に実行ファイルを置きます(デバッグビルド). 完成したらDegubの代わりにReleaseフォルダを作り, そこに入れます(リリースビルド).
</details>

<details><summary>ターミナルに関する超初心者向けの補足</summary>
ターミナル上でキーボードの「↑」や「↓」を押すと履歴を遡れます. 何度も同じコマンドを書く必要はありません. ターミナルにある程度入力した後でキーボードの「Tab」を押すと入力補完してくれます. cdなどの後にパスを手入力する必要はありません.
</details>
【GAS】GASとHTML間のデータ受け渡しが難しかった話

# 著者の簡単な経験
大学、大学院でJava,PHP,python,jsを触っていた。WEBシステムはjavaかphpでしか書いたことなかった。frameworkの経験はLaravelのみ。
# 何を実装したかった？
GASで個人ブースの簡単な予約管理WEBシステムを作りたかった。
予約一覧をスプレッドシートで管理してそれをユーザーにWEB経由で見せる的な構造にしたかった
# 何で苦労したか
スプレッドシートのデータをいい感じのHTMLで表す方法がわからん...！Laravel等のMVCフレームワークに慣れすぎてGASの~~よくわかんない~~構造が理解できていなかった。
# どうやって解決したか
 **GASでHTMLタグを含む文字列を生成してHTMLに載せる**
 いやあ、パワープレイです。でも時間的に、自分の実力的にそうするしかなかった。
 コード例はこんな感じです。（こんな関数を4つくらい書いた）
 ```code.gs
 /**-- シートをrowずつ読み込むんでTable要素を生成 --*/
function getReservationTable(sheetName){
  const sheet = spreadSheet.getSheetByName(sheetName);
  const all_data = sheet.getDataRange().getValues();
  let tableHtml="";
  let thead ="<thead>";

  for(var row = 0; row < 3; row++){
    if(row == 1){
      continue; //この行は表示したくない
    }
    thead += "<tr>"
    for(var column = 0; column < all_data[row].length; column++){
      thead += "<th>" + all_data[row][column] + "</th>";
    }
    thead += "</tr>"
  }
  thead += "</thead>"
  tableHtml += thead;

  let tbody = "<tbody>";
  for(var row = 3; row < all_data.length; row++){

    tbody += "<tr>";

    if(row == 3){
      tbody += "<th>" + all_data[row][0] + "</th>";
      tbody += "<th>" + all_data[row][1] + "</th>";
      continue;
    }
    
    for(var column = 0; column < 2; column++){
      tbody += "<th>" + all_data[row][column] + "</th>";
    }

    for(var column = 2;  column < all_data[row].length; column++){
      let available = all_data[row][column];
      if(available == ""){
        available = "⭕️";
      } else{
        available = "✕";
      }
      tbody += "<td>" + available + "</td>";
    }
    tbody += "</tr>"
  }
  tbody += "</tbody>";

  tableHtml += tbody;
  return tableHtml;
}
```
スプレッドシートで空白の箇所（つまり予約可能なとこ）を◯で表示したかった。
見出しとかも調整したかったから、考え抜いた結果が、これ。
# 結果
まあまあええ感じに出力できました
![スクリーンショット 2025-06-05 153735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106177/d4506fbf-e5a2-4fc0-8ed6-d8fd07d171e3.png)
# 他にやり方あったのかなあ
とにかく締切が迫っておりましたので、急ぐしかなかった。。。
「こんな方法もある！」みたいなものがあればぜひご教示ください！

ありがとうございました！
SwiftUIのbackgroundとoverlayの使い方を簡単に解説してみました！

SwiftUIでビューの見た目をカスタマイズする際に便利なのが、backgroundとoverlayです。


そもそもbackgroundとoverlayとは？
---
| 修飾子名         | 意味                   |
| ------------ | -------------------- |
| `background` | 背景に色や画像・図形を「後ろに」表示する |
| `overlay`    | 上にテキストや枠線などを「前に」重ねる  |

backgroundの基本的な使い方
---
```swift
Text("Hello!")
    .padding()
    .background(.yellow)
```
![Screenshot 2025-06-05 at 15.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/b60383d6-2c01-4eed-ab0a-91ce6a09af1c.png)

解説：
テキストの背景に黄色が付きます。

padding()でスペースを確保し、その外側にbackgroundが付きます。

overlayの基本的な使い方
---
```swift
Text("Hello, SwiftUI!")
    .padding()
    .overlay(
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.blue, lineWidth: 2)
    )
```
- テキストの上に青い枠線が付きます。
- overlayには任意のViewを載せることが可能です（今回は枠線用のRoundedRectangleを使用）
![Screenshot 2025-06-05 at 15.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/b1bbab3f-17ea-4774-8a2f-c3a97eecd3b9.png)



backgroundとoverlayの組み合わせを組み合わせると
--
```swift
Text("SwiftUI")
    .font(.title)
    .padding()
    .background(.black)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(Color.orange, lineWidth: 3)
    )
    .foregroundColor(.white)
```
この例では：

- 背景は黒（background）
- 外枠はオレンジの線（overlay）
![Screenshot 2025-06-05 at 15.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/39de19d3-5267-449b-82be-5e713f1d169e.png)


まとめ
---
| 修飾子          | 主な用途              | 使い方例                              |
| ------------ | ----------------- | --------------------------------- |
| `background` | 背景色・画像・形を後ろに配置    | `.background(Color.red)`          |
| `overlay`    | 枠線・テキスト・ラベルを前に重ねる | `.overlay(RoundedRectangle(...))` |

終わりに
---
backgroundとoverlayを活用することで、SwiftUIの見た目を自由にデザインできます。
ぜひ参考にしてみてください！👏
雑な相談は避けるべき

エンジニア歴が4年目となりました。
これまで開発現場で雑な相談を投げられて右往左往したり
逆に自分が投げてしまって気まずい思いをした経験が何度かあります。

そんな経験から私が思う、雑な質問を投げない方法と
雑な質問を投げられた時のお作法をまとめます。

## そもそも雑な相談とは

例えば
```text
「注文確認画面で金額が1円ずれるんだけど、どう直したらいい？」
「本当は一度しか呼ばれないAPIが複数回叩かれてるっぽい。原因って何？」
```
みたいなもの。
相談者は該当処理のコードや仕様をある程度触っていて、受け手はほぼ初見。

こう言った状態を加味せずに同じ景色が見えていると思い込み、
情報の差分を埋める意識が抜け落ちた状態で相談することを
私は雑な相談と定義しています。

## なぜ避けるべきか

まず、一番わかりやすいものとして時間の浪費があります。
情報が足りない相談が飛んできても、受け手は「何が起きているのか」を掘り起こすところから始める必要があるため

「フロントだけで起きる？」「再現は毎回できる？」「ログは仕込んだ？」と何往復も質問が
続くうちに、大きく時間を使ってしまいます。

次に品質面のリスクで、雑な相談は前提が共有されないまま議論が進むことがあり、
受け手が誤った仮説を立て、本質的な原因にたどり着くことがなく、誤った回答を行なってしまう可能性があります。

これでは相談した意味がありません。

## 雑な相談が生まれる仕組み

根本には前述した情報のギャップが大きく関わっていると思います。 
相談者は目の前のコードと仕様が頭に入っていて、受け手も同じ景色を見ている（だろう）とつい錯覚する。

さらに人間なので、相談者と受け手で情報ごとの「重要度の判断」というものは多少異なります。
そこで省かれた情報の重みも食い違う。

また「詳しい人なら一発で答えが返ってくるだろう」という謎の幻想も拍車をかけていき
ギャップがギャップを呼び、雑な相談が誕生するわけです。

## 雑な相談を投げないためのコツ

私は脳内に仮想上司を置き、セルフ問答をしてから相談を持ち込むようにしています。

```text
相談者「注文確認画面で金額が1円ずれるんだけど、どう直したらいい？」
仮想上司「それはフロントとバックエンドのどちらで起きている？　まずログは確認した？」
相談者「してない……ログを一度調べよう！」

ログを眺めて情報が増えると、次の問いが返ってくる。

仮想上司「具体的にどの処理が怪しそう？」
相談者「まだ分からない……じゃあその関数の実装を読もう！」
```

やり取りを繰り返してどこからが自分の限界で、
どこから先が他者の知恵を借りたい部分なのかを事前整理しておく
こうすることによって問いの解像度が格段に上がります。

最初の相談を例にすると

```text
「注文確認画面で金額が1円ずれるんだけど、どう直したらいい？」
```

整理後 ↓

```text
「注文確認画面で金額が1円ずれます。
リリースブランチのみ再現してフロントのネットワークタブでは計算結果が正しいです。
バックエンドのアクセスログには差分がありました。調査方針を一緒に詰めてください。」
```

みたいな。

後の方が仮説を立てやすいですよね。
相手の時間を使っているわけなのでこれくらいは欲しいところです。

慣れていない人だと、これを律儀に毎回フルコースでやると、
相談そのものが遅くなる危険性もあります。

この場合は「ここから先は一人でやっていたらコストがかかりすぎる」と
判断して途中で情報整理→相談に切り替えることもアリです。

限界に感じた段階で、今持っている情報整理に入り相談することも、重要なのです。

## 雑な相談を投げられたときのお作法

まず、嫌そうな顔をしない。

超大事です。 私は二日酔いの時、あんまり守れてないかも。

それは置いておいて、雑でも「困ってる」事実は変わらないので
「いまの情報だと判断むずいかも。もう少し教えて～」と切り替えてあげる。

質問の仕方ですが、足りていない情報を少しずつ、小出しにして質問していきましょう。
小出しにする理由としてラバーダッキング法で、相手の頭を整理させつつ情報を拾う狙いがあります。

質問自体が調査ロードマップになるように投げるのがおすすめです。

相談中、色々なことを話してると相手の中で「結局なにがどうなったんだっけ？」となることもあります。
一度、伝えたとしても最後にもう一度「今わかってること」「仮説」「次にやるべきこと」を
サッとまとめて伝えてあげましょう。

情報が多いときはテキストで送ってあげると、相手もあとで確認しやすいし親切です。

## おわりに
相談するなら、相談を受けるなら、互いの時間を尊重しつつ最短距離で「うまくいった！」に
たどり着きたいものです。 いつでも建設的な対話を目指したいものですね。
SwiftUIのToggleの使い方をわかりやすく解説してみました！

SwiftUIでユーザーのオン・オフの操作を受け取るときによく使われるのがToggleです。

Toggleとは？
---
Toggleは、オン・オフ（true/false）を切り替えるためのUI部品です。
iOSでよく見る設定スイッチみたいなもな感じです。

```swift
struct ContentView: View {
    @State var isOn: Bool = false  //@State：Toggleの状態（オン・オフ）を保持するための変数です。

    var body: some View {
        VStack {
            Toggle("通知を受け取る", isOn: $isOn) //isOn: $isOn：トグルの状態と変数をバインディングします。
            Text(isOn ? "オンになっています" : "オフになっています")  //Textでオンかオフかの状態を表示しています。
        }
        .padding()
    }
}

```
![Screenshot 2025-06-05 at 15.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/1354677c-f52f-476a-bbcf-6e8e8387e8be.png)



Toggleの使い方で注意するポイント
---
- Toggleは**バインディング変数（$）と一緒に使う必要があります。

- 状態を保持するには@Stateや@Bindingなどの状態管理が必須です。



まとめ
----

| 機能      | 方法                     |
| ------- | ---------------------- |
| トグルの表示  | `Toggle("ラベル", isOn:)` |
| 状態の保持   | `@State`を使う            |
| カスタムラベル | クロージャでViewを渡す          |
| 無効化     | `.disabled(true)`を使う   |

Toggleはシンプルですが、アプリに設定画面やフィルター機能を追加するときにとても便利なUIです！ぜひ参考にしてみてください！👍
モーダルウィンドゥ

```php:
<!doctype html>
<html lang="en">

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>


<div class="modal fade" id="contactEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit Contact</h5>
          <button type="button" class="close" data-dismiss="modal">&times</button>
        </div>
        <div class="modal-body">
          <form>
            <div class="mb-3">
              <label for="edit-name" class="col-form-label">Edit Name</label>
              <input type="text" class="form-control" id="edit-name">
            </div>
            <div class="mb-3">
              <label for="edit-address" class="col-form-label">Edit Email</label>
              <input type="text" class="form-control" id="edit-address">
            </div>
            <div class="mb-3">
              <label for="edit-sex" class="col-form-label">Edit Phone Number</label>
              <input type="text" class="form-control" id="edit-sex">
            </div>
            <div class="mb-3">
              <label for="edit-brood" class="col-form-label">血液型 修正</label>
              <input type="text" class="form-control" id="edit-brood">
            </div>
           
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="updateContact">Update Contact</button>
        </div>
      </div>
    </div>
  </div>
```
Spring BootでのBindingResult使用時に発生するIllegalStateExceptionの原因と解決方法

## はじめに
Spring Bootの開発環境で、フォームデータのバリデーションとエラーメッセージの表示を行う処理を実装中、`BindingResult`でバリデーション結果を保持するようにしたところ、`IllegalStateException`が発生した件について、原因と解決方法をまとめました。

## １．エラー内容
まず、実装内容について簡単に記載します。
以下のように、単項目のGETパラメータを```Integer```型で受け取り、BindingResultに結果を保持するよう実装していました。

```SampleController.java
    @RequestMapping(value = {"/sample/"}, method = RequestMethod.GET)
    public String sampleComplete(@RequestParam(name = "sampleCode", required = false) Integer sampleCode, 
                                 BindingResult bindingResult, Model model) {
        // 実装
        return "/sample";
    }
```
しかし、実行したところ、以下のエラーが発生しました。
```
java.lang.IllegalStateException: An Errors/BindingResult argument is expected to be declared immediately after the model attribute, 
the @RequestBody or the @RequestPart arguments to which they apply: public 
java.lang.String SampleController.sampleComplete(java.lang.Integer,
org.springframework.validation.BindingResult, org.springframework.ui.Model) 
throws java.lang.Exception
```
「BindingResult引数が対応するモデル属性、@RequestBodyなどの引数の直後に宣言されていない」という内容のエラーですが、`SampleController.java`では直後に宣言しているので、別の部分に原因がありそうです。

:::note warn 
BindingResultは、バリデーションエラーを保持するためのものであり、対応する引数の直後に配置する必要があります。
:::

## ２．原因
原因を調査したところ、以下の理由から`BindingResult`は@RequestParamに対応していないことが分かりました。

:::note info 
`BindingResult`は、Formオブジェクトに対してバリデーション結果を保持するよう設計されている
:::

つまり、複数フィールドをもつFormオブジェクトを引数とすべきところで、単一のリクエストパラメータを記載していたことが間違いだったようです。

※@RequestParam：単一のリクエストパラメータをバインドするためのものであり、複数フィールドを持つオブジェクトのバインドには適していない

## ３．解決
解決方法は、2つあります。
**①そもそも`BindingResult`は使わない**
**②`BindingResult`を使用する場合は、単項目パラメータでもFormオブジェクトを作成する**

①で解決も可能ですが、今回は他処理に合わせた仕様としたかったので、②の解決方法をとりました。
@ModelAttributeを使用して、`Integer`ではなく`SampleForm`というFormオブジェクトに格納するよう修正した結果が以下です。
```SampleController.java
    @RequestMapping(value = {"/sample/"}, method = RequestMethod.GET)
    public String sampleComplete(@ModelAttribute SampleForm sampleForm,
                                 BindingResult bindingResult, Model model) {
        // 実装
        return "/sample";
    }
```
これで実行結果も問題なく、バリデーション結果が保持されていました！

## あとがき
今回のエラーは、`BindingResult`がFormオブジェクトに対してバリデーション結果を保持するものであることを把握していなかったために発生しました。
知らずにこのエラーが発生してしまったという方の参考になれば幸いです。
AIの助けを借りて簡単。Googleカレンダーで始めるポモドーロテクニック

# はじめに
- **集中力が続かない**
- **気づいたら座りっぱなしで身体が痛くなる**

こんな悩み、ありませんか？

この問題を解決するために、ポモドーロテクニックをAIの力を借りながら学習に取り入れた話をお伝えします。

# AIを活用してポモドーロテクニックを導入した話

効率的に学習を進める方法を模索する中で、「ポモドーロテクニック」に出会いました。<br><br>

**ポモドーロテクニックとは**
1. タイマーを25分セットし、その間タスクに集中する
1. 25分経過したら、5分間の短い休憩を取る
1. この作業と休憩を4回繰り返す
1. 4回目のポモドーロが終わったら、15〜30分間の長めの休憩を取る<br><br>


繰り返すことで、集中力を維持しつつ効率的に作業を進めることができる手法です。

この方法なら、集中できて定期的に立ち上がる時間も確保できるので、実践することにしました。<br><br>

ただし、タイマーをいちいち設定するのが面倒…。<br><br>

**そこでAIに相談してみました。**


「ポモドーロテクニックをWindowsの標準機能かGoogleのサービスを使ってうまく実践する方法はある？」<br><br>


AIが提案してくれたのがこの3つの方法です。

1. Windows標準搭載アプリ「クロック」を使用する
1. Googleカレンダーでポモドーロの予定を手動で作成する
1. Google Apps Scriptを使ってポモドーロスケジュールを自動作成する<br><br>

1つ目と2つ目は手間がかかるので却下。
そこで選んだのが3つ目の方法です。<br><br>

ただ、私はプログラミング未経験のエンジニアであり、コードを自作するとなると莫大な時間がかかってしまいます。
こんなことに時間をかけていられません。<br>
そこでAIにコードを書いてもらいました！<br><br>

「ポモドーロスケジュールをGoogleカレンダーに追加するコードを教えて」

と尋ねると、AIはすぐにコードを提案してくれ、それをGoogle Apps Scriptにコピペして実行しました。<br><br>



**結果、**<br>
![スクリーンショット 2025-06-05 130930.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106070/67ff77a5-d419-4063-a84a-53398d8f7153.png)

無事Googleカレンダーにポモドーロスケジュールが反映されました！<br><br>

あとは、
- 「作業と休憩の開始時間に通知が来るように設定」
- 「長めの休憩を15分に調整」
- 「ポモドーロ開始時間を簡単に設定できるように」

など追加の要望を送って、修正したら完成です。
わずか15分ほどでできました。

AIの力に感動です。<br><br>

# 最後に
以上、AIと協力しながらポモドーロテクニックを導入した話でした。

集中して作業したい方や、定期的に立ち上がりたい方は、ぜひ試してみてください！
Manimの環境構築

Manimを導入しましょう. Manimは数学などの理論的・抽象的な内容に特化したアニメーションを作成するためのPythonライブラリです.
**Manim** = **Ma**th + **anim**ation

## 環境構築
ManimはPythonのライブラリなので, システムのPythonに直接インストールできます. ですが, Manim はC拡張入りの重量級依存（ManimPango, Cairo, Numpy, Pillow…）が多いので仮想環境で隔離するのが理想的です.

(PythonはC言語で実装されています. 多くのPythonライブラリはPythonで書かれているのですが, 下部構造のC言語まで下りて独自のC言語ソースコードを持つライブラリをC拡張と言います. C拡張入りのライブラリをインストールするとき, ビルドのタイミングによって依存している外部ツールとバージョンが食い違ったり, 低レイヤに干渉できるために既存のPython環境を汚染したりするリスクがあるため, 仮想環境で隔離するのが理想とされています)

Pythonの仮想環境とは, プロジェクトフォルダの中にPython環境を構築するということです. 当然データ量は多くなりますが, 当該プロジェクトが使用するPythonやライブラリのバージョンを固定できるため, 様々なメリットがあります. Pythonには標準ライブラリにvenvというライブラリがあるので, 今回はこれを使います.

Manimを入れる前に, PCに以下を入れておきます:
- Python3.10 ~ 3.12 (2025年5月時点)
    (Pythonのバージョンが新しすぎるとManimが対応していない場合があります.)
- FFmpeg
- LaTeX

venvを作成し, Manimを入れます. PowerShellで以下を順に実行してください.

```bash
# 今プロジェクトフォルダの中にいるとします.

# 仮想環境を作成 & 有効化
python -m venv .venv
.venv\Scripts\Activate.ps1
# cmd の場合は
.venv\Scripts\activate.bat

# pip を更新
python -m pip install -U pip

# Manim 本体をインストール
pip install manim

```

## 動作確認
例えば次のようなコード書きます.

```python
# hello.py
from manim import *

class Hello(Scene):
    def construct(self):
        text = Text("Hello, Manim!")
        self.play(Write(text))
        self.wait()

```

レンダリングには以下を実行します:
```bash
manim -pqh hello.py Hello
```

`-p`: レンダリング後に動画を自動再生
`-q`: 品質 (`l`=低, `h`=高, `k`=4K)
`hello.py`: ファイル名
`Hello`: シーン名

出力先は `media/videos/...`

## 高度なレンダリング

コード内でデフォルトのレンダリング設定を上書きできます. また, コード内でシーンの.render()を呼び出すことで, pythonとして実行してレンダリングできます.

```python
# hello2.py
from manim import *

# レンダリング設定
config.pixel_width          = 1920
config.pixel_height         = 1080
config.frame_rate           = 60
config.background_color     = WHITE
config.format               = "mp4"
config.quality              = "high_quality"


class Hello(Scene):
    def construct(self):
        text = Text("Hello, Manim!", color=PINK)
        self.play(Write(text))
        self.wait()

if __name__ == "__main__":
    scene = Hello()
    scene.render()
```

```bash
python hello2.py
```

configは他にも色々変えられますが, デフォルトの設定が理想的なので特に変える理由はないです.

## Visual Studio Code拡張機能
`-p`を付けてレンダリングすると, 拡張子に対応したデフォルトのアプリでプレビューされます. Windowsの場合はメディアプレイヤーが起動すると思います. ですが, これはちょっと不便なのでもっと手軽に, 例えばLaTeXのサイドビューのように, プレビューされてほしいです. これを実現するためにVS Codeの拡張機能である**Manim Sideview**を入れるのがオススメです. Manim Sideviewを入れると, 保存のたびにレンダリングされ, 最新の動画がサイドビューで再生されます(上の方にある赤いボタンを押して再生したいシーンを選択).
Raspberry Pi Pico WとZeroを使って鍵の解/施錠管理システム作ってみた


# ぼくのかいしゃの入退室管理シートのもんだい
![スクリーンショット 2025-06-05 13.53.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2200496/51865c8f-d78d-4dc4-b163-24c9e20ce7fa.jpeg)

私の会社のオフィスには誰が何時にオフィスの鍵を開けたのか、閉めたのかを記入する上のようなシートがあります。

ですが書き忘れが多く、「入退室管理シートの空欄、誰が施錠・解錠した？」といった言葉が頭上を飛び交う日々が続いていました。

そして「多分、おれかな....」と足をブルブルさせながら自信なくシートに”おぼろけに浮かんだ時刻”を記入してしまう事が起きていました。

### おぼろけに浮かんできたんです。8:30といった時刻が。

# 節子！それ形骸化や！！！
元々誰が何時に鍵開けたか閉めたかを管理し、不明な侵入がない事の確認や鍵紛失時の足掛かりとなるように始めた管理シートだったのです（知らんけど

# 解/施錠管理システム「鍵管理くん」爆誕
クソネーミングセンスは置いておいて、この問題と自宅で１年ほどウォーミングアップを続けていたラズパイ君がこちらを見ていたので、なんかITっぽいことやってみるかぁ〜と始めたのが「鍵管理くん」です

余談ですが、鍵管理くん使ってくれメンス！ってメンバに普及したら
「それって鍵管理くんじゃなくて、入退室管理くんですよね？」
と言われました。


**細かい事は忘れましょう（だめ）**

# 使い方
![スクリーンショット 2025-06-05 13.24.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2200496/b7883cd6-9a74-427d-be4f-bb7d7c52f1fa.jpeg)

オフィス内に鍵管理くんを設置し、鍵を開けて/閉めて直ぐにボタンを押してもらい、入退室管理シートに記入するといった流れです。

シートに直接書くんじゃあなくて、代わりにボタンで記入って感じです。

# 全体の構成
![スクリーンショット 2025-06-05 13.12.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2200496/b4c240bb-68a2-41c1-b995-a0f3f19f913e.jpeg)

Raspberry Piは２個使ってます。
クライアント側のRaspberry Pi Pico W
バックエンド側のRaspberry Pi Zero
クライアント側でユーザー操作をバックエンド側にAPI経由で送付し、バックエンド側から入退室管理用のシートに[Google Sheets API](https://developers.google.com/workspace/sheets/api/guides/concepts?hl=ja)経由で更新します。

ぶっちゃけRaspberry Piは一個でもよかったんですが、オフィスに常時起動するバックエンドサーバーは他のシステムを作った時にでも利用しよかなと思い立ち別々にしてみました。


# クライアント側Raspberry Pi Pico 
![スクリーンショット 2025-06-05 13.33.38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2200496/acde8abb-84b8-468d-9d8e-fb290ba12c14.jpeg)

PicoにLCDディスプレイとキーパッド、写真では見えませんがスピーカーもつけています。
LCDでユーザー操作の誘導とシート記載のフィードバック。キーパッドは誰が鍵を開けたか/閉めたか（鍵に番号を付与して人と結びつけています）、スピーカーは処理が正常に終えたら以下のランダムな音を出すようにしています。

- ファミマ入店音
- マクドナルド、ポテト揚がり音
- ピタゴラスイッチのテーマ(最後のとこ）
- CR 戦姫絶唱シンフォギア　大当たり音



# バックエンド側Raspberry Pi Zero 
FastAPIでAPIサーバを立ち上げています。
クライアント側で送られてきたデータをGoogle Sheets API経由でシートに記入しています。

Google Sheets APIを利用するには、OAuthを利用したクライアントを準備する必要があります。

Google Sheets APIの利用方法は以下を参照してください。
[OAuth導入](https://developers.google.com/workspace/guides/get-started?hl=ja)
[Google Sheets API](https://developers.google.com/workspace/sheets/api/guides/concepts?hl=ja)


# 終わりに
私はWebアプリ開発を業務にしているんですが、Raspberry Piへの配線は普段と違うことをしているので楽しかったです。
元々電気系の学科を履修していたので、ひっさびさのはんだごてにテンションあがりました。

またGCPの設定等も自分で行ったことがなかったのでとても勉強になりました。

そして肝心のシステムを利用してもらったメンバからの声ですが
### めっちゃ便利です！


といってくれました。めでたしめでたし。
バッチファイルで日本語が文字化けする

## 背景
バッチファイルで`echo`やディレクトリに日本語を使って処理させたとき、文字化けしてしまう

## 開発環境
- Windows11 Pro
    - Version：23H2
    - OS Build：22631.5189

## 検証
おそらく文字コードが原因だろうと踏んで、文字コード設定を調べてみることにしました。
コマンドプロンプト上で`chcp`コマンドを実行したところ、コードページ番号は「932」と表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4105153/ff12e2f2-e4c5-4a5a-95a4-06fe5b2e24dc.png)

対応表によるとコマンドプロンプトでデフォルトで設定されている文字コードは「Shift_JIS」になります。（日本語版のOSであれば大体はこの文字コードに設定されていると思います）
　※各コードページと文字コードの対応表は [こちら](https://learn.microsoft.com/ja-jp/windows/win32/intl/code-page-identifiers) に記載されています。
<br>

アプリケーション側で設定した文字コードがコマンドプロンプトの文字コード設定に影響するのかを調べてみます。
メモ帳で「chcp_chk.bat」を作成し、メモ帳側の文字コードを「UTF-8」で保存して実行してみます。
```bat:chcp_chk.bat
@echo off
chcp
pause
```
<br>
実行結果は、「現在のコードページ：932」と表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4105153/1349c51a-06a0-4f05-baa7-25b7b730d314.png)

同様に「chcp_chk (2).bat」を作成し、「ANSI」で保存。実行しても同じ結果となりました。
当たり前といえば当たり前ですが、あくまでアプリケーション側はアプリケーション側の設定であってコマンドプロンプト側の文字コード設定には影響しないということになります。

### 余談
「ANSI」でエンコードしたバッチファイルは`chcp`コマンドで文字コードを指定しなくても文字化けせずに正常に表示されます。
試しに先ほどの２つのバッチファイルに `echo テスト` を追加して実行してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4105153/2fae1709-7496-4e07-b7e6-b6337e99002e.png)

このようになぜ「ANSI」だと正常に表示されるのか。これについては「Shift_JIS」は ANSIコード を基に作られているからです。
この２つの違いについて、ぶっちゃけてしまうと「国際規格」か「日本規格」かの違いだけです。
「JISコード」には半角コードと共存する上で問題があったため、ANSIコードを「Shift_JIS」として採用したようです。

## 原因
コマンドプロンプト側で設定されている文字コードとアプリケーション側で設定している文字コードの違いにより現象が起きている。

## 対策
- `chcp`コマンドで文字コードを指定する
この対策が無理に環境を変えずに実施できるかと思います。
文字コードを指定する場合は`chcp`の後ろに`コードページ識別子`を指定すればいいです。
例）`chcp 65001` (文字コード「UFT-8」の場合)

* 「ANSI」でエンコードする
荒業ですが「Shift_JIS」を使用している以上は不都合はないかと思ってます。

- 日本語を使用しない
これも極端な対策ですが、「ASCII」や「Unicode」「UFT-8」など互換性のある国際規格を使用するのであればこちらも不都合はないと思います。
ですが、環境によっては可読性が落ちる場合もあるのでプロジェクトで開発を行なっている場合は注意が必要です。

## まとめ
文字コードの違いにより文字化けが起こる現象は、バッチファイルに限らず電子データを取り扱う上で共通して言えることですので、エンコーディング設定も気にかけてコーディングしましょう。（自戒の念も込めて）
どの文字コードを指定するかについては極論なんでもいいと思ってます。エンコードする文字コードが統一されていればいいので。
初歩的な内容ではありますが、なんとなく知ってるだけに見落としてしまう原因だなと改めて思いました。
相談テンプレート（チーム開発・業務共通）

業務中の相談・判断依頼をスムーズに行うためのテンプレートです。
PREP法（Point-Reason-Example-Point）＋希望日時の構成になっており、読み手にとっても意図が伝わりやすくなります。

---

## 🧠 テンプレート

### ① 回答してほしいこと

* 例：「〜の設定方針で迷っています。A/B/Cのどれが適切でしょうか？」
* 例：「この仕様変更を進めてよいか、判断いただけますか？」

---

### ② 現状と問題点

* 例：「既存の設計資料を参照しましたが、通知先の指定が明確でないため判断できませんでした」
* 例：「仕様通りに実装したつもりですが、想定通りの挙動にならず原因調査中です」

---

### ③ 対策案

* 例：「以下3パターンを検討しています」

  * A案：通知先を〇〇に設定（理由：〇〇）
  * B案：通知なし（理由：〇〇）
  * C案：暫定で自分宛てに通知し、運用でカバー

---

### ④ 希望対応日時

* 例：「〇〇までに回答をいただけると、その後の作業がスムーズです」
* 例：「自分のタスクが止まっているため、できれば△△日中に判断いただけると助かります」

---

## ✅ 使用例（具体）

> **① 判断してほしいこと**
> メールの送信先を A/B/C のどれに設定すべきか教えてほしいです。
>
> **② 現状と課題**
> フローの設計書には記載がなく、過去の履歴を見ても統一されていないようでした。
>
> **③ 対策案**
>
> * A案：営業責任者に通知
> * B案：開発チーム宛に一括送信
> * C案：今だけ自分に通知し、後で修正予定
>
> **④ 希望日時**
> 本日17時までに方針がわかると、明日以降の開発に影響が出ずに済みます。

---

## 🎯 メリット

* 結論から伝えられるので、読み手の理解が早い
* 事実・根拠・選択肢が整理されており、判断しやすい
* 対応期日があるため、優先順位をつけやすい
A Quick Introduction to Data Center Interconnect Technologies

In today’s digital age, data centers are the backbone of our online world. They store, manage, and deliver data that powers everything from social media to cloud computing. But how do these data centers communicate with each other? That’s where Data Center Interconnect (DCI) technologies come in. Let’s break it down in simple terms.

What is DCI?

Imagine data centers as large, digital warehouses. Each warehouse has its own collection of data, but they often need to share information with each other. CCIE Data Center expertise is like the network of roads and highways that connect these warehouses. It ensures that data can travel smoothly and quickly from one center to another, no matter where they are located.

Why is DCI Important?

Increased Efficiency: Just like roads allow cars to travel quickly between cities, DCI helps data move fast between data centers. This is crucial for businesses that need to access and process large amounts of data in real time.

Improved Reliability: DCI technologies ensure that even if one data center has a problem, the data can be rerouted through other centers. This means that services remain available and reliable.

Scalability: As businesses grow, their data needs to grow too. DCI allows data centers to connect and share resources, making it easier for companies to expand their operations without running into data bottlenecks.

Popular DCI Technologies

Optical Fiber: Think of optical fiber as super-fast, high-capacity cables that carry data between data centers. They use light signals to transmit data, allowing for very high-speed connections.

Microwave Links: For shorter distances or when laying cables isn’t practical, microwave links use radio waves to transmit data. They’re like a wireless highway between data centers.

Hybrid Networks: Sometimes, a mix of different technologies works best. Hybrid networks combine optical fiber, microwave links, and other methods to create a flexible and efficient DCI solution.

The Future of DCI

As technology continues to evolve, so will DCI. Innovations in speed, efficiency, and reliability will make data center connections even more seamless. This means faster, more reliable access to our digital world, enhancing everything from online services to cloud applications.

In conclusion, CCIE Data Center Training plays a crucial role in mastering Data Center Interconnect technologies, which are like the vital connections that keep our digital world running smoothly. By enabling fast, reliable, and efficient data exchange between data centers, DCI helps support the ever-growing demand for data and services in our connected world.
備忘録：css-animationのmixin化

※ SCSSあまり詳しくないので、もっとスマートな方法あればコメントください。

# 目的
scssで細かい条件を都度指定できるアニメーションmixinを作成したい。

例：
要素がぷるぷる震え続けるアニメーション`puru-puru`を定義する場合、
`@include animation.puru-puru(3deg, 200ms);` のように
揺れ幅（3deg）と速度（200ms）を調整できるようにmixin化する。

# コード

```scss:animation.scss
@keyframes puru-puru {
  from {
    rotate: calc(var(--puru-deg));
  }

  50% {
    rotate: calc(var(--puru-deg) * -1);
  }

  to {
    rotate: calc(var(--puru-deg));
  }
}

@mixin puru-puru($deg, $speed) {
  --puru-deg: #{$deg};
  animation: puru-puru $speed infinite linear;
}
```

実際に使う時

```scss
@use '.../animation.scss';

.xxx {
    @include animation.puru-puru(3deg, 200ms);
}
```

# 解説

- `@keyframes`はCSSの記法なので、定義する時点で未定義のSCSS変数を参照するように指定するとエラーがでるかと思いCSS変数を利用しました。（実際未確認）
- `@keyframes`内ではCSS変数を参照するように指定して、
SCSSのmixinにてanimationを指定する直前でCSS変数を定義すれば、
`@keyframes`でその値が参照されるため、通常のmixinのような挙動を叶えられると考えました。
- 実際に書いてみたところ、iOSのSafariとmacのChromeでは問題なく動作しました。
ケルベロス認証

ケルベロス認証は、ネットワーク上で安全にユーザー認証を行うためのプロトコルです。主に企業内のシステム（例：WindowsのActive Directory環境など）で利用されます。以下に、ケルベロス認証の基本的なフローをわかりやすく説明します。

---

### 🔐 ケルベロス認証フローの概要

登場人物（主要な構成要素）：

* **クライアント（ユーザー）**
* **KDC（Key Distribution Center）**
  ├── **AS（認証サービス）**
  └── **TGS（チケット発行サービス）**
* **サービスサーバ（ファイルサーバなど）**

---

### 📘 認証フロー：3ステップ構成

#### ① ログイン（初期認証：AS とのやり取り）

1. **クライアント → AS（認証サービス）**
   　ユーザーがログインし、ユーザー名をASに送信。

2. **AS → クライアント**
   　ASはKDC内でユーザーを認証し、「TGT（チケット・グラント・チケット）」と「セッショキー」を送る（セッショキーはユーザーのパスワードから導かれる鍵で暗号化されている）。

---

#### ② サービスアクセス要求（TGS とのやり取り）

3. **クライアント → TGS（チケット発行サービス）**
   　クライアントはTGTとともに、アクセスしたいサービス名を送信。

4. **TGS → クライアント**
   　TGSはTGTの有効性を確認し、\*\*「サービスチケット」\*\*を発行。

---

#### ③ サービス利用（サービスサーバとのやり取り）

5. **クライアント → サービスサーバ**
   　クライアントはTGSからもらった「サービスチケット」をサービスサーバに送信。

6. **サービスサーバ → クライアント（オプション）**
   　サーバがチケットを確認し、必要であればセッションキーを使って再認証（Mutual Authentication）を行い、接続を許可。

---

### 🔁 イメージで理解（簡略図）

```
[クライアント] 
     │
     │① ログイン要求（ユーザー名）
     ↓
[ AS（認証サービス）]
     ↑
     │② TGTとセッションキーを返却
     │
     ↓
[ TGS（チケット発行サービス）]
     │③ TGTとサービス名を送る
     ↓
     │④ サービスチケットを返却
     ↓
[ サービスサーバ ]
     │⑤ サービスチケットを提示
     ↓
     │⑥ 認証され、サービス利用OK
```

---

### 🔑 ポイントまとめ

* パスワード自体はネットワーク上に流れません。
* TGTとサービスチケットは、暗号化されているため安全。
* チケットには**有効期限**があり、使いまわしが制限されている。
【Python入門 第3章】if文・for文で“考えるプログラム”を書こう🐍🧠

こんにちは、 **PythonTimesの蛇ノ目いろは** です🌿  
今回は「条件分岐」と「くり返し処理」について、やさしく解説していくよっ！

---

## 🧠 if文：条件によって処理を分ける！

「もし〇〇なら～する」っていうときに使うのが `if` 文！

```python
score = 80

if score >= 70:
    print("合格です！")
else:
    print("残念、不合格…")
```

📝 `elif` を使えば「それ以外の条件」も追加できるよ👇

```python
if score >= 90:
    print("とても優秀！")
elif score >= 70:
    print("合格！")
else:
    print("再チャレンジしよう！")
```

📌 ポイント
- `:` を忘れずに！
- インデント（スペース4つ）が「処理の範囲」を表すよ

---

## 🔁 for文：決まった回数くり返す

リストなどの **データを1つずつ取り出す** ときに使うのが `for` 文！

```python
fruits = ["りんご", "みかん", "バナナ"]

for fruit in fruits:
    print(fruit)
```

```output
りんご  
みかん  
バナナ
```

### `range()` と組み合わせて数値ループもできる！

```python
for number in range(5):
    print(number)
```

```output
0  
1  
2  
3  
4
```

---

## 🔁 while文：条件がTrueの間くり返す

「〜になるまで続けたい」処理には `while` が便利！

```python
count = 0

while count < 3:
    print("回数：", count)
    count += 1
```

---

## ⛔ break / continue

- `break`：ループを強制終了！
- `continue`：スキップして次のループへ！

```python
for number in range(5):
    if number == 3:
        break
    print(number)
```

---

## ✍️ Pythonの命名スタイル（PEP8）

Pythonでは「読みやすく、わかりやすいコード」を大切にしていて、  
**PEP8（公式スタイルガイド）** という命名ルールがあるよ🐍

| 種類         | 書き方ルール                      | 例                        |
|--------------|-----------------------------------|---------------------------|
| 変数名       | 小文字＋アンダースコア（snake_case） | `user_name`, `total_score` |
| 関数名       | 同上（snake_case）                  | `get_data()`, `send_mail()` |
| クラス名     | 単語の先頭だけ大文字（PascalCase）   | `UserInfo`, `MyClass`      |
| 定数         | 全部大文字＋アンダースコア           | `MAX_SIZE`, `PI`          |

📝 ループ変数も意味ある名前で書こう！

```python
# 悪い例（意味がわかりにくい）
for x in data:
    print(x)

# 良い例（何を処理しているか明確）
for user_name in user_names:
    print(user_name)
```

---

## 📌 まとめ

- `if` で条件分岐、`for` や `while` でくり返し処理が書ける！
- `range()` を使えば数字のループが簡単✨
- `break` と `continue` でループを制御！
- 命名スタイル（PEP8）を守ると、 **読みやすいコード** になるよ🐍

---

次回は、  
**「第4章：関数とモジュール」** をお届け予定🎁  
コードをキレイに整理して、再利用できるようにしよう！

フォローしてくれたら嬉しいな🐍🌸
ちょっと気をつけたいgccの`-Ofast`

:::note info
本当に特別な理由がない限り`-O3`で最適化すれば十分です。
:::

`-Ofast`を有効にすると、コンパイラは`-O3`よりもさらに最適化を行います。
ただし、Cの規定に**従わない**かなりアグレッシブな最適化を行うことに注意が必要です。

## `-Ofast`が有効にするオプション

- `-ffast-math`
- `fallow-store-data-races`

`fortran`のみに対して有効になるオプションもありますが、ここでは割愛します。
詳しくは[参考資料のリンク](https://gcc.gnu.org/onlinedocs/gcc/Optimize-Options.html)を見てください。

## `-ffast-math`

`-ffast-math`自体は

- `-funsafe-math-optimizations`
    - `-fno-trapping-math`
    - `-fno-signed-zeros`
    - `-fassociative-math`
    - `-freciprocal-math`
- `-ffinite-math-only`
- `-fno-signaling-nans`
- `-fno-rounding-math`
- `-fcx-limited-range`


のIEEEに従わない可能性のある最適化を有効にします。
各オプションの詳細については私自身も完全に理解していないので深入りはしませんが、`-Ofast`を使うことによって計算結果が変わる例を示します。

## `-Ofast`を使うと計算結果が変わる例

`-Ofast`を有効にすると行われる操作の一つに`(a + b) + c`を`a + (b + c)`に変える操作があります。
この変形は数学的には問題がありませんが、浮動点小数を使っている場合には必ずしも等式変形になりません。

なのでこのようなプログラムを考えましょう。

```c++
#include <cmath>

int main(){
    double x = 1;
    double y = (x + std::pow(2.,100)) - std::pow(2.,100);

    return (int)y;
}
```

このプログラムで書いている式の括弧に従って計算すると、桁落ちが発生して`y`の値が0になります。
しかし、括弧を`(std::pow(2.,100) - std::pow(2.,100))`のように付け替えると、ここが先に打ち消し合い、桁落ちが発生せずに`y`は1となります。

さて、まずこれを`gcc-15.1`で`-O3`フラグを付けてコンパイルすると、アセンブリは、
```
main:
        xor     eax, eax
        ret
```
実行すると、
```bash
Program returned: 0
```
となって、予想された結果が得られます。

一方、`-Ofast`オプションを付けてコンパイルすると、アセンブリは
```
main:
        mov     eax, 1
        ret
```
これを実行すると、
```bash
Program returned: 1
```
となって予想しているものと別の結果が得られます。

## まとめ

実行速度のために精度を犠牲にしても良い、あるいは書いているアルゴリズムと`-Ofast`を有効にすることによってなされる怪しい最適化を完全に理解している場合は`-Ofast`を使うのは一つの選択肢だと思います。

しかし、（私自身を含め）完全に`-Ofast`の内容を理解していない、あるいは精度が落ちることがよろしくない（科学計算など）場合には大人しく今まで通り`-O3`を使うのが良いでしょう。

異論は認めます。

## 参考資料

https://gcc.gnu.org/onlinedocs/gcc/Optimize-Options.html

https://gcc.gnu.org/wiki/FloatingPointMath
グルメなクラウドネイティブな考え方

クラウドは何？美味しいの？
食べても美味しくないよ～
でも使ったら美味しいかも！

自分は高性能のコンピューター持ってるのに、
一日一時間しか使わない、それは勿体無い
って、思ったりしますか？
勿体無いから、いっそもたなくていいじゃん～？
それこそクラウド的な考え方です。

クラウドプロバイダーは高性能のコンピューターいっぱい持ってる
私はそれを好きな時だけ、好きな分だけを借りる
最初にコンピューターを買うために大金を用意する必要は無くなった
仕事がないときは借りない、節約できました。
突然仕事が増えたらもっといいコンピューターを長く借りる、仕事を全部こなせました。
それこそクラウドネイティブ的な使え方です。
AIと一緒に、初めて実装できた話

こんにちは。

文系学部からエンジニア職に就職し、インプットしなければならないことの多さにおびえる毎日を送っています。

#### 初投稿として、そんな私が研修のグループワークで、初めてGASを実装出来た話をしたいと思います。
<br>
グループワークの課題は、

<font color="#008080">**「お客様（に扮した研修担当者）の課題を聞き取り、GASを用いて課題を解決する製品を実装、提案まで行う」**</font>
というものでした。

同期にはGAS未経験者も結構いたのに、1か月で提案まで行くのは結構しんどかったです...
<br>
私はGAS開発の経験が全くなかったので、慌ててインプットを開始しました。ですが、私たちのグループは、幸いにもGAS開発経験のあるスーパー優秀な同期がいたため、私がインプットを終えたころには、基本的な機能はほとんど完成していました。
<br>
ですが、それでもポロポロと、あったら便利機能やバグは残っていたので、
#### 「せっかくインプットできたことだし！」
といくつか機能の開発に挑戦してみることにしました。
<br>

ですが、初めは

#### そもそも、書いてくれたコードが読めない

という問題に直面。
分からないところを一個一個調べていったのですが、ほぼ理解できない数十行のコードを解読することは難しく、ここで半分挫折しかけました。

### そこで、AIの活用を思い出しました。

「この辺からこの辺まで、詳しく解説して」と投げると、とっても分かりやすく解説してくれて、最低限インプットが済んでいた私は、数十行のコードを１～２時間で理解することに成功しました。

コードを読めるようになると、追加機能は既存のコードを応用して出来るものがほとんどだったため、実装のハードルが格段に下がりました。経験者の同期ならば数十分で完成しそうな小さな機能に半日かかりましたが、それでもちゃんと動いた時の感動は忘れられません。
<br>
また、今までの研修ではpaizaで問題を解くばかりだったのですが、
#### 正直このコードが何の役に立つんだろう...？
という心境でした。

そのため、初めて機能を実装出来たときは、

### <font color="#008080">**「自分が書いたコードが、実用的な機能になった！！！」**</font>

とめちゃめちゃ感動しました。
<br>
今後エンジニアとして仕事を続ける上で、この感動を忘れないようにしたいなーと思ってここに記録させていただきます。

最後に、色々質問に答えてくれたり、助けてくれたりした
グループの皆さん、ありがとうございました！！

エンジニアの皆さん、これからよろしくお願いいたします！
【第3章】HTTPとWebの基本：ハッカーが見ているWebの中身をのぞこう👀🌐

# 🌐 第3章：HTTPとWebの基本

こんにちは、守山しずくです🌸  
今回は、 **「ハッキングといえばWeb！」** というぐらい重要な、WebとHTTPのしくみを見ていきます💡

---

## 🧁 Webの正体＝リクエストとレスポンス！

ブラウザでWebページを開くとき、裏ではこんな会話が交わされています：

> あなたのPC：「このページ見せて！」（リクエスト）  
> サーバー：「はい、どうぞ！」（レスポンス）

このやりとりをする仕組みが **HTTP（HyperText Transfer Protocol）** です📡

---

## ✉️ HTTPリクエストの中身を見てみよう

リクエストとは「この情報が欲しいです！」という要求のこと。

```
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
```

ポイントはこの3つ：

- **GET** ：取得する命令（他にPOSTなども）
- **/index.html** ：欲しいページ
- **User-Agent** ：どんなブラウザかの情報

---

## 📦 HTTPレスポンスの中身

レスポンスは「こちらがページの中身です」という返事。

```
HTTP/1.1 200 OK
Content-Type: text/html

<html>～</html>
```

- **200 OK** ：成功のステータス
- **Content-Type** ：HTMLなのか画像なのか？
- **本文** ：実際のWebページデータ

---

## 🛠️ ステータスコード早見表

| コード | 意味 | 内容 |
|--------|------|------|
| 200 | OK | 正常に表示できた |
| 404 | Not Found | ページが見つからない |
| 500 | Internal Server Error | サーバー側のエラー |
| 403 | Forbidden | アクセス禁止 |
| 302 | Found | 一時的なリダイレクト |

これらの番号は、ブラウザでページが表示されないときにも表示されることがあるので、知っておくと便利です💡

---

## 🔎 開発者ツールで見てみよう

ChromeやEdgeの「F12キー」を押して「ネットワークタブ」を開くと…  
実際のリクエストやレスポンスが見れちゃいます！

これはハッカーも使う**最強の情報源**。  
「どんな通信がされているのか」「隠れた情報はないか」チェックに使われます🔍

---

## 🚨 HTTPの落とし穴

実は、HTTP通信は**暗号化されていません**。

つまり、同じネットワーク上にいる誰かが通信を盗み見することもできちゃいます…💦  
（※学校やカフェのWi-Fiなど、要注意！）

そこで登場するのが **HTTPS（SSL/TLS付きHTTP）**。  
URLが `https://` で始まっていると、暗号化されている証拠です🔐

---

## 📌 まとめ

- HTTPは「Webページください」「どうぞ」の会話  
- リクエストとレスポンスで成り立っている  
- ステータスコードはWebの健康診断  
- 開発者ツールで通信の中身を見てみよう  
- セキュリティを考えるならHTTPSが必須！

---

次回は、 **「第4章：よくある脆弱性①：XSS / SQLインジェクション」** を一緒にのぞいていきます！  
お楽しみに🌸

---

> 💬 フォローしてくれたら、セキュリティの世界をやさしく毎日お届けします♪
【rails】devcontainerで react + rails 開発環境を整えてみた。


## はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
今回は「React（Vite）+ Rails（API モード）+ PostgreSQL」のフルスタック開発環境を、VS Code の DevContainer（Docker）を使って実際に環境構築してみました。
以下にセットアップの方法をまとめたので、作成してみてください

https://github.com/Taira0222/react-rails-devcontainer

---

## ディレクトリ構成

このテンプレートは、以下のようにバックエンド（Rails）とフロントエンド（React）を明確に分離して構築されています。

```
rails-react/
├── backend/                 # Rails API
│   ├── .devcontainer/       # Rails 用 DevContainer
│   ├── Dockerfile
│   └── ...
├── frontend/                # React (Vite)
│   ├── .devcontainer/       # React 用 DevContainer
│   ├── Dockerfile
│   └── ...
├── docker-compose.yml       # Rails・React・DB をまとめて起動
├── .github/workflows/       # (任意)CI 定義 (RSpec, Vitest など)
└── .gitignore               # .env などを除外
```

---

## 特長まとめ

- **VS Code DevContainer 対応**：再現性の高い環境構築が可能。
- **Rails × React 分離構成**：開発・デプロイを独立して実施可能。
- **Docker Compose 利用**：Rails・React・PostgreSQL を簡単に一括起動。
- **ホットリロード・依存キャッシュ対応**：開発効率も抜群です。

---

## セットアップ手順（ローカル開発）

### 1. リポジトリをクローン

```bash
git clone https://github.com/your-username/react-rails-devcontainer.git
cd rails-react
```

### 2. VS Code で DevContainer を開く

- VS Code 拡張機能「Dev Containers」をインストール。
- `code ./backend` や `code ./frontend` で個別に DevContainer を開きます。
- 左下の「><」ボタンや `devcontainer.json` を開くことで、リビルド＆起動可能です。

### 3. 初期化（初回のみ）

#### Rails (backend)

```bash
rails new . --api -d postgresql
```

#### React (frontend)

```bash
npm create vite@latest .
```

### 4. サーバー起動

#### Rails API

```bash
rails s
```

アクセス: [http://localhost:3000](http://localhost:3000)

#### React（Vite）

```json
// package.json
"scripts": {
  "dev": "vite --host"
}
```

```bash
npm run dev
```

アクセス: [http://localhost:5173](http://localhost:5173)

---

## セキュリティと環境変数

- `.env` にデータベース接続情報などの機密情報を記載します。
- `.env` は `.gitignore` に含め、Git に上げないように注意。

```bash
#.gitignore
.env
```

## まとめ

まだ、実際に DevContainer を使って React + Rails の開発はできてませんが、rails や react 単体では現在進行形で使用しており、
かなり快適に開発を進めることができます。

何か気づいた点や改善提案があれば、ぜひコメントください！
OS起動時、Kong GatewayのData Planeコンテナを自動起動する


Kong Gatewayの起動についてはsystemdを使ったやり方が[Control Kong Gateway through systemd](https://docs.konghq.com/gateway/latest/production/running-kong/systemd/)で記載されているが、コンテナ版がなかったので作ってみる。

ここではsystemd経由でData Planeの起動・停止を行うようにする。
単に再起動させたいだけなら、dockerの引数に`--restart=always`を足せば問題なさそうだが、細かな設定をしたい場合とかはsystemdを使うといいかとおもう
なお、「Data Plane」としたのはKonnect向けを意識しているからであり、Enterprise版でControl Planeも同様に自動起動したい人はアレンジすれば自動起動できると思う。

## 前提
以下の前提で進める。
- Kong GatewayのData Planeをコンテナで起動している
- Data Planeの起動時の引数(`docker run ...`)が手元にある
- systemdが利用可能

## 手順
自作系は`/etc/systemd/system`に置くのが一般的だと思うので、こちらにUnitファイルとして`kong-gateway-dp.service`を作成する。
書き込み権限が必要なので、最初にrootになっておく。
```bash
sudo su -
```
次にUnitファイルの作成だが、Unitファイルに`docker run ...`部分をベタ書きしようとすると、証明書のところが上手く解釈されないので、コマンドをスクリプト化して1クッション挟む形でコンテナを起動するようにする。
なお、証明書の部分をファイル化するのでもいいのだが、ここでは起動コマンド自体をスクリプト化することで対応した。
以下のような感じでスクリプトを`/usr/local/bin`以下に作成する。なお、コンテナに名前をつけたかったので`--name kong-gateway-dp`を足している。
```bash
cat <<EOF > /usr/local/bin/run-kong-gateway-dp.sh
#!/bin/bash
docker run -d \
--name kong-gateway-dp \
-e "KONG_ROLE=data_plane" \
-e "KONG_DATABASE=off" \
-e "KONG_VITALS=off" \
:(省略)
-p 8000:8000 \
-p 8443:8443 \
kong/kong-gateway:3.10
EOF
```
実行権限を付与する。
```sh
chmod +x /usr/local/bin/run-kong-gateway-dp.sh
```
Unitファイルを作成する。コンテナに名前をつけた関係上、削除処理を入れている。また起動していない場合を考慮して`=-`としてエラーが出ても問題ないようにしている。
```systemd:/etc/systemd/system/kong-gateway-dp.service
cat <<'EOF' > /etc/systemd/system/kong-gateway-dp.service
[Unit]
Description=Kong Gateway
After=docker.service
Requires=docker.service
[Service]
ExecStartPre=-/usr/bin/docker stop kong-gateway-dp
ExecStartPre=-/usr/bin/docker rm kong-gateway-dp
ExecStart=/usr/local/bin/run-kong-gateway-dp.sh
[Install]
WantedBy=multi-user.target
EOF
```

作成したsystemdのサービスを有効化し起動する。
```bash
chmod 644 /etc/systemd/system/kong-gateway-dp.service
systemctl daemon-reload
systemctl enable kong-gateway-dp
systemctl start kong-gateway-dp
```
動作確認する。
```bash
curl localhost:8000
```
問題なければ以下が返ってくる。
```json
{
  "message":"no Route matched with those values",
  "request_id":"858b840264c4e906cb70e00dd781ab58"
}
```
再起動しても動作することを確認する。
再起動後、`docker ps`で確認する。
```bash
$ docker ps
CONTAINER ID   IMAGE                    COMMAND                  CREATED          STATUS                             PORTS                                                                                                                NAMES
3ae96f7a3b37   kong/kong-gateway:3.10   "/entrypoint.sh kong…"   42 seconds ago   Up 41 seconds (health: starting)   0.0.0.0:8000->8000/tcp, :::8000->8000/tcp, 8001-8004/tcp, 0.0.0.0:8443->8443/tcp, :::8443->8443/tcp, 8444-8447/tcp   kong-gateway-dp
```
念の為、`curl`でも確認しておく。
```bash
$ curl localhost:8000
{
  "message":"no Route matched with those values",
}
```
問題なさそうだ。
Denodo Platform 9資格（Architect/Developer）取得体験記【新人SE向け】

# 背景
新人SEとしてデータ仮想化（データバーチャライゼーション）プラットフォームのDenodo Platform 9を業務で使い始めたのを機に、公式資格取得を目指しました。Denodoは「論理データマネジメント」の業界リーダーであり、データ統合・クエリ最適化・キャッシュ・セキュリティなど多彩な機能を備えています。Denodo Certified rofessional Programには、アーキテクト（Architect）、デベロッパー（Developer）、管理者（Administrator）の各ロールに対応した認定が用意されており、アソシエイト（初級）とプロフェッショナル（上級）のレベルがあります。
特にアーキテクト認定は「プラットフォームの役割やアーキテクチャを理解できるデータアーキテクト」を認定するもの、デベロッパー認定は「Denodoでの実践経験を伴う知識・スキル」を検証するもの)とされています。これら公式の位置付けも知見を体系化する動機となり、Architect AssociateおよびDeveloper Associate試験に挑戦することにしました。[引用](community.denodo.com)

# 学習方法
資格学習には以下の方法を組み合わせました:
- __公式オンデマンド学習__：Denodo社のオンデマンドトレーニングで基礎を学習しました。[公式サイト](community.denodo.com)にも「Denodo On-demand Training」により、自分のペースで講義や演習が受けられる」と案内されています
- __実環境でのハンズオン__：社内サーバだけでなく、無料版「Denodo Express」もインストールして実際のデータ仮想化を体験しました。Denodo社も「Hands-onで実際に触ることで理解が進み、試験準備に効果的」と推奨しています
（Denodo Expressは自環境にインストール可能な無償版です）
- __チュートリアル・ドキュメント参照__：Denodo Communityにあるチュートリアルやドキュメントを読み、公式マニュアルも確認しました。特にチュートリアルの演習問題で理解を確認しながら進めました
- __模擬問題・クイズ作成__：学習内容を自分でクイズ形式にまとめ、復習しました。問題作成で苦手分野を洗い出し、繰り返し解くことで知識定着を図りました

# 勉強時間と難易度
- __Architect Associate__：社内業務での経験もあったため約1ヶ月で合格できた。範囲はデータ仮想化のアーキテクチャや運用設計が中心で、基本概念が身についていればスムーズに解ける問題が多かった。
__Developer Associate__：範囲が非常に広く、公式コースの内容量も多かったため約半年かけて計画的に学習した。実際のデータソース連携、ビュー作成、キャッシュ設定、API公開など開発業務に即した実習を繰り返した。

どちらの試験も範囲が広く、Denodo未経験者にはやや難易度が高く感じるかもしれません。公式ドキュメントやオンデマンド学習を活用してコツコツ勉強すれば、実務経験ゼロでも合格は十分可能だと感じました。

# 試験形式
- __形式__：両試験とも四択の選択問題で構成されており、すべて英語で実施されます。
- __問題数・時間__：Architect Associate は35問・90分、Developer Associate は40問・90分です。英語が母国語でない受験者には自動的に30分の追加時間が付与されます。合格には正答率72%以上が必要です。
- __出題範囲__：Architectでは「Denodo Platformの基本機能（ガバナンス・セキュリティ・キャッシュなど）」「ユースケース/パターン」「展開アーキテクチャ」の3大テーマから出題されます。実際の配点では機能関連が20問、ユースケース10問、展開アーキテクチャ5問と、機能側の比重が大きいです。Developerでは「データソースへの接続」「ビュー作成・統合」「ビューの実行」「ログ解析」「開発ベストプラクティス」「キャッシュ設定」「データサービス公開」など、多様なテーマから出題され、特に「ビュー作成・統合」が最多で12問を占めます。問題の傾向がセクションによって偏りがあるため、頻出分野を中心に重点的に復習しました。

# 取得後の成果
資格合格によって得られた主な成果は以下の通りです:
- __自信の向上__:学んだ知識を使って課題を解決できる実感が湧き、自分のスキルに対する自信が高まりました。
- __知識の拡充__:日常業務ではあまり触れない機能や最適化技術、運用ベストプラクティスなどを学ぶことで、業務に直結しない分野の知見が増えました。

# 他の技術者へのおすすめ理由
Denodo認定資格取得は、他のSEにもいくつかメリットがあります。まず、モチベーションが向上します。資格取得という明確な目標を持つことで学習意欲が高まり、継続的なスキルアップにつながります。また、異なる視点が得られる点も大きいです。認定試験の学習を通じて普段扱わない機能やユースケースに触れることで、自分の業務範囲外の知識を獲得でき、課題解決の引き出しが増えます。さらにキャリア面のメリットも見逃せません。実際に「認定資格は自身の存在感を高め、より高度なプロジェクトやリーダー的役割への道を開く」と[言われており](https://www.globenewswire.com/news-release/2025/06/04/3093948/0/en/New-Certification-Focused-on-Fast-AI-Application-Development.html)、認定資格は就職市場で差別化を生み、キャリアの飛躍をもたらすと考えられます。以上の理由から、特に新人SEやDenodo未経験者には、ぜひ挑戦してみる価値があると思います。

今後もDenodoを実務で触れながらさらに理解を深めていきたいと思います。
良ければQiitaフォローやコメントなどお待ちしております！

__参考資料__: [Denodo公式ドキュメント・認定試験ガイド](https://community.denodo.com/certification-guides/denodo_platform_9_certified_architect_associate_exam_guide.pdf#:~:text=Characteristics%20This%20exam%20is%20based,granted%20an%20additional%2030%20minutes),[Denodo公式トレーニングサイト](https://community.denodo.com/training/#:~:text=Denodo%20On,you%20and%20your%20company%20succeed),および[認定者の声](https://www.globenewswire.com/news-release/2025/06/04/3093948/0/en/New-Certification-Focused-on-Fast-AI-Application-Development.html)など