OmniAICreator/Qiita-1.07M huggingface dataset:
circuitjsの作法 その18

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
リレーで、xor回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/a9081017-6000-414e-07b8-74c67ef7f94a.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
g 720 448 720 496 0 0
g 608 448 608 496 0 0
R 304 128 224 128 0 0 40 5 0 0 0.5
178 640 288 640 448 6 1 0.2 0.2499999998420901 0.05 1000000 0.02 20 0.015 0.005 1
w 608 192 608 288 0
w 304 128 352 128 0
w 352 128 640 128 0
162 640 160 640 208 2 default-led 1 0 0 0.01
x 462 84 499 87 4 24 xor
s 384 192 496 192 0 0 false
s 384 256 496 256 0 1 false
w 384 192 304 192 0
w 304 176 304 128 0
w 304 176 304 192 0
w 496 192 608 192 0
178 528 288 528 448 6 1 0.2 0 0.05 1000000 0.02 20 0.015 0.005 0
g 496 448 496 496 0 0
w 496 256 496 288 0
w 384 256 304 256 0
w 304 256 304 192 0
w 640 160 640 128 0
w 640 288 720 288 0
w 720 288 720 448 0
w 528 288 528 256 0
w 528 256 640 256 0
w 640 256 640 208 0
w 544 448 624 448 0
w 512 448 512 464 0
w 512 464 656 464 0
w 656 464 656 448 0

```

以上。
Next.jsのストリーミングについて

Qiita初投稿です。朝活でNext.jsの研鑽をしていました。


### ストリーミングとは？
Next.jsのApp Routerで提供されるストリーミングは、サーバーからHTMLを段階的に送信して、ページを徐々に表示する技術

### 使い方
Reactの<Suspense>コンポーネントを活用

以下の例では、BlogListコンポーネントを取得している間に、fallbackで指定されているBlogListSkeltonを表示する。

```
import { Suspense } from 'react'
import BlogList from '@/components/BlogList'
import BlogListSkeleton from '@/components/BlogListSkeleton'
 
export default function BlogPage() {
  return (
    <div>
      {/* This content will be sent to the client immediately */}
      <header>
        <h1>Welcome to the Blog</h1>
        <p>Read the latest posts below.</p>
      </header>
      <main>
        {/* Any content wrapped in a <Suspense> boundary will be streamed */}
        <Suspense fallback={<BlogListSkeleton />}>
          <BlogList />
        </Suspense>
      </main>
    </div>
  )
}
```

### 所感
記事投稿で「ストリーミング」タグとしたが、一般的なストリーミングは動画のストリーミングサーバーのことかも？
ただ、ストリーミングサーバーについても、動画を全てダウンロードしなくても動画を再生できる仕組みなので、実現したいことは似ているのかなと思った。

### 参考
[Next.jsドキュメント、ストリーミングについて](https://nextjs.org/docs/app/getting-started/data-fetching-and-streaming#streaming)
jsPDFで日本語が文字化けする問題を解消する方法


こんにちは、hidepon4649 です。
jsPDF で日本語データが文字化けしてハマったのでメモします。

# 事象

- JavaScript ライブラリ jsPDF を使用して PDF を生成する際に、日本語を含むテキストが文字化けした。
- jsPDF は文字を描画するためにフォントを必要としますが、デフォルトで日本語フォントが含まれていないようです。

# 解決策

結論から申しますと、以下２点で解決します。

1. フォント登録
2. フォント指定

それぞれの手順を説明します。

## 1.フォント登録

### 1-1. フォント取得

- 日本語対応フォント取得します。(例：NotoSansJP-Regular.ttf)
- [Google Fonts でダウンロード](https://fonts.google.com/noto/specimen/Noto+Sans+JP) <br>画面上部の「Get font」ボタン押下
- ダウンロードした「Noto_Sans_JP.zip」を展開
- 展開した資材の「NotoSansJP-Regular.ttf」が今後の作業対象となります。

### 1-2. base64 形式へ変換

- 下記 getbase64.js ファイルを作成し、「NotoSansJP-Regular.ttf」と同じフォルダに配置する。

```javascript
// getbase64.js
const fs = require("fs");

const fontFilePath = "./NotoSansJP-Regular.ttf"; // 元のフォントファイル
const outputFilePath = "./NotoSansJP-Regular-base64.txt"; // 出力先

fs.readFile(fontFilePath, (err, data) => {
  if (err) {
    console.error("フォントファイルの読み込みに失敗しました:", err);
    return;
  }

  const base64Data = data.toString("base64");
  fs.writeFile(outputFilePath, base64Data, (err) => {
    if (err) {
      console.error("Base64ファイルの書き込みに失敗しました:", err);
      return;
    }
    console.log("Base64変換が完了しました！ファイル:", outputFilePath);
  });
});
```

- getbase64.js を実行する。base64 形式の「NotoSansJP-Regular-base64.txt」が出力されます。

### 1-3. base64 データをコードに登録

- [NotoSansJP-Regular-base64.js]ファイルを作成します。

```javascript
// NotoSansJP-Regular-base64.js

const NotoSansJP = "Base64データ"; // "Base64データ"の部分に「NotoSansJP-Regular-base64.txt」の中身を貼り付けます。
export default NotoSansJP;
```

## 2. フォント指定

1. jsPDF でフォント指定

```javascript
// アプリケーションプログラム
import jsPDF from "jspdf";
import "jspdf-autotable";
import NotoSansJP from "./NotoSansJP-Regular-base64.js"; // パスはご自身の環境に合わせて下さい。

const doc = new jsPDF();

// フォントを登録
doc.addFileToVFS("NotoSansJP-Regular.ttf", NotoSansJP);
doc.addFont("NotoSansJP-Regular.ttf", "NotoSansJP", "normal");
doc.setFont("NotoSansJP");

// 日本語を含むPDFを作成
doc.text("備考: テストデータ", 10, 10);

// テーブル作成時にもフォントを指定
doc.autoTable({
  head: [["ID", "備考"]],
  body: [[1, "サンプルデータ"]],
  startY: 20,
  styles: { font: "NotoSansJP" }, // フォントを指定
});

// PDFを出力
doc.save("sample.pdf");
```

以上

誰かのお役に立てれば幸いです。
circuitjsの作法 その17

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
リレーで、or回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/4c5364e4-3903-e642-7799-94af0245926b.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
g 624 448 624 496 0 0
g 608 448 608 496 0 0
R 304 128 224 128 0 0 40 5 0 0 0.5
178 640 288 640 448 6 1 0.2 0.2499999592531494 0.05 1000000 0.02 20 0.015 0.005 1
w 608 192 608 288 0
w 304 128 352 128 0
w 352 128 640 128 0
162 640 160 640 208 2 default-led 1 0 0 0.01
x 462 84 486 87 4 24 or
s 384 192 496 192 0 0 false
s 384 256 496 256 0 1 false
w 384 192 304 192 0
w 304 176 304 128 0
w 304 176 304 192 0
w 496 192 608 192 0
178 528 288 528 448 6 1 0.2 0 0.05 1000000 0.02 20 0.015 0.005 0
g 496 448 496 496 0 0
g 512 448 512 496 0 0
w 496 256 496 288 0
w 384 256 304 256 0
w 304 256 304 192 0
w 640 160 640 128 0
w 640 208 640 288 0
w 640 288 528 288 0

```

以上。
AI時代なんて幻想だ──「AIはエンジニアを駆逐できない」論

# はじめに

AIがエンジニアを置き換える？ 正直、大袈裟すぎる。  
確かにLLMなどのテクノロジーが進歩したことで、コード生成やテストの自動化は進んでいる。しかし、だからといって「エンジニアの半分が不要」になるなんて、夢物語に近い。むしろAIには限界があるし、そんな単純な話ではない。炎上覚悟で断言すると、**AIで代替できるような"単純作業しかしていないエンジニア"こそ、そもそもエンジニアと呼べないレベルだ** ということだ。  

---

## 1. 「AIがエンジニアを食う」は“安易すぎる”結論

AIが優秀なコードを書けるようになったら、即座にエンジニアが要らなくなるか？  
結論から言えば、**そんなに甘くはない。**  

- **仕様策定の難しさ**  
  大半の開発現場では「要件定義」「仕様決め」という泥臭い工程が付きまとう。実際の動くシステムを想定しながら、この仕様を落とし込む作業は人間の「経験」や「直感」をフル活用する必要がある。機械学習モデルにそこまでの実感や責任感を持たせることは難しい。  
- **既存システムとの統合**  
  企業のレガシーシステムや複数のサービス連携など、例外だらけの現場を統合するには、知見や調整能力が必須。机上の空論では解決しきれないケースが山ほどある。  

実際、「AIにやらせれば済む」と思っている人ほど、現場を知らないか、数十人月規模の複雑なプロジェクトを経験したことがないのではないか。

---

## 2. エンジニアリングマネージャーはむしろ“これから”必要

「EMが淘汰される」と豪語する人もいるようだが、**むしろ逆で、これからもっと必要になる可能性が高い。**  
なぜなら、どんなにAIが進化しようが、**“現場を仕切って責任を負う存在”** は最後まで人間が必要だからだ。

1. **プロジェクト全体のハンドリング**  
   AIはプロジェクト管理ツールとしての役割は担えても、実際の人間関係を調整し、問題が起きた時に“腹をくくって”決断するのは依然として人間だ。誰が最終判断を下すのか？ そこにはAIの「提案」ではなく**人間の確固たる意志**が必要だ。  

2. **人間同士のケアとモチベーション管理**  
   「心理的安全性」なんてキレイ事だと言う人もいるが、チームが不満を抱えたり、モチベーションを失ったりしたら、結局プロダクト品質はガタ落ちする。AIがご丁寧に“一人一人の感情”を汲み取って最適な声かけをしてくれると思っているなら、相当お花畑だ。  

要するに、**EMが果たすべきは“人間と人間の調整、そして最終責任を負うリーダーシップ”** だ。AIにそこまでの責任を丸投げできるほど、人間はまだお人好しではない。

---

## 3. 結局のところ“AIを使い倒せる人間”が強い

前段で「AIは万能じゃない」と言ったが、勘違いしてほしくないのは、AIを無視していいとは思っていない。**むしろAIを積極的に活用できるエンジニアやEMが、圧倒的に有利**になるのは間違いない。  

- **AIに使われるのではなく、AIを使う**  
  AI生成のコードやドキュメントを土台に、短期間でPoCを回せる人材こそ、これからの現場で求められる。  
- **“単純に取って代わられる”のは置き換え可能な作業員だけ**  
  本当に下請け的な単純労働ばかりやっている人は確かに危うい。しかし、それで「エンジニア全体が不要」と結論づけるのは飛躍がすぎる。優秀なエンジニアは、AIを駆使してさらに価値の高い仕事をするようになるだけだ。  

---

## 4. AI時代のチーム像はどうなるのか？

じゃあ具体的にどんなチームが理想なのか？ 一例としてmermaid図で示そう。（AIでも作れるが、意図や強い主張を込めるなら自分で描くほうが早い場合も多い。）

```mermaid
flowchart TB
    subgraph "人間中心の未来"
        A["エンジニア(想像力/経験)"] --> B["EM(調整/最終判断)"]
        B --> C["AIツール(自動化/サポート)"]
        A --> C
    end
```

- 人間同士のコミュニケーションがプロジェクトの成否を左右  
- AIはあくまでサポート役。優秀だが責任を持つのは人間  
- EMが最終的な意思決定と人間関係を制御  

これが実際の現場で求められる姿だ。AIを強力な味方として引き入れつつ、最終判断と調整を担うのは**生身の人間**なのだ。

---

## 5. 結論：「AIがエンジニアをすべて置き換える」なんて話は机上の空論

繰り返すが、AIによってエンジニアの仕事がある程度代替されるのは事実。だが、それをもって「ほとんどのエンジニアがいらない」だの「EMも不要になる」だの言うのは極論に近い。**大半の現場はもっと泥臭いし、マネージャーが担う意思決定やリーダーシップはそう簡単には機械化できない。**  

要は、**“現場に染み付いた知恵やノウハウ、そして人間ならではの責任感とリーダーシップ”** こそが、エンジニアリングマネージャーの価値であり、これが消えるのは相当先だ。AIバブルに踊らされ、過剰に恐れたり浮かれたりする前に、自分の強みを再確認してほしい。

炎上上等で言わせてもらえば、**AIで脅かされる程度のポジションに甘んじているエンジニアは、元々その程度の存在**だ。  
本当に価値を発揮するエンジニアやEMは、AIを使いこなし、さらに“AIでは絶対に代替できない部分”を担うことで、これまで以上に活躍できる未来が来る。  

「AIがエンジニアを駆逐する」？ 冗談は程々に。まだまだ、**本物のエンジニアが必要な現場は無数に存在**する。むしろ、なまじAIを過信している連中こそが本当の危機に陥るだろう。  

少なくとも俺は、AIに追い出される未来なんて欠片も想定していない。なぜなら、AIはあくまで **“道具”** でしかなく、最終的に価値を生み出すのは“人間同士の知恵とコミュニケーション”だと確信しているからだ。

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
AI時代のエンジニアリングマネージャー ─「エンジニアは半分不要」論

# はじめに

「エンジニアはAIには絶対置き換えられない」などという言葉をまだ信じている人は多いが、率直に言って今のペースで進化するAIに対抗できるエンジニアはごく一握りしかいない。エンジニアリングマネージャー(EM)という立場も例外ではなく、今の感覚でチームをまとめていると、あっという間にAIに仕事を食われてしまうだろう。

この記事では、あえて炎上覚悟で「エンジニアの半分以上はAIに奪われる」という主張を展開しながら、その上で生き残るためにはどうすればいいのかを語ってみたい。

---

## 1. はっきり言う：AIが代替できないエンジニアなんてほぼいない

「AIにはできない創造的な作業は人間にしかできない」と言われるが、正直そんなに高度なクリエイティビティが必要な開発案件が世の中にどれほどあるのか疑問だ。大部分の業務は同じようなアプリやSaaS、フロント実装といったテンプレートの組み合わせに終始している。  
LLMが少しでも進化すれば、プログラム生成、テストコード作成、ドキュメント作成くらいは当たり前にできるし、もう多くの現場で**人間より高速で正確**に実行できるようになっている。

つまり、こういうことだ。  
- 単なるコード職人は確実にAIに負ける  
- テスト自動化・QA領域もAIの方が優秀になる日は近い  

「チームに1人はベテランが必要」なんて言っているが、1人どころか下手をすれば**0人で回る**かもしれない。これが今の現実だ。

---

## 2. エンジニアリングマネージャーも安泰ではない

「人間同士のコミュニケーションが重要」とか「心理的安全性の確保が大事」とか言っているが、本当にそれだけでEMが存在価値を証明できるのか。  
たしかに、理想的にはEMがチームをまとめあげ、誰もが能力を発揮できる場を作り上げるのが大切だろう。しかし、チーム内で起きる課題の半分以上は、要は**タスク管理の不備や仕様の詰め不足**であり、AIにタスクの優先順位や要件整理を任せることも十分可能だ。  

- AIがより大局的なプロジェクト管理を提案する  
- AIがメンバーのスキルセットを解析して、適材適所を自動で見積もる  

こんな時代がすぐそこまで来ている。そうなったとき、「コミュ力が高いだけ」のEMは淘汰される運命にある。下手をすれば、多少のチャットボット機能とタスク管理ツールが連携して、チームの不満や進捗遅延をアラートしてくれるような未来も十分ありえる。

---

## 3. 生き残るための一手は「AIを手なずける」こと

じゃあ、どうすればよいのか。  
**答えは単純で、AIを徹底的に使いこなし、チームをドライブできるEMになるしかない。**  

### 3-1. AIツールを使い倒す
コード生成でもドキュメント作成でもテストでも、今あるAIツールを片っ端から試し、「どう使えば最大の成果が得られるのか」探求し続けることだ。メンバーにやらせるのはいいが、自分自身が使い倒さないと、AIの本当の威力と限界を把握できない。  
「エンジニアがどんどん使ってくれるから大丈夫」なんて楽観視しているEMは、そのうちメンバーにバカにされるだけになる。

### 3-2. AIの品質を左右する人間
AIは確かに万能ではないが、適切なガイドラインやレビューを加えることで高品質なアウトプットを得られる。  
- AIのバイアスチェック  
- 生成物の倫理性や法的適合性のレビュー  

こういった「AIリテラシー」は今後最重要スキルの一つになる。これを疎かにすると、自社の製品やサービスの信頼を一気に失う危険すらある。

---

## 4. チームビルディングもバージョンアップせよ

AIに仕事を大部分任せるようになれば、チーム構成自体を再編する必要が出てくる。  
- 「AIスペシャリスト」「AI監査役」などAIそのものを管理・運用するポジション  
- 創造的なアイデア出しやデザインを担う「クリエイティブディレクター」的役割  

逆に、**漫然とした一般エンジニア枠**はどんどん縮小する可能性が高い。気づけば上流はAIに置き換わり、下流もAIが自動化、という悪夢のような事態に陥ってからでは遅い。  
EMは「この組織に人間が何人必要なのか」「メンバーにどんな強みを発揮してもらうのか」という視点を常に問い直し、まだ実装できる余地があるうちに組織体制を大胆に作り替えろ。

---

## 5. 一応のまとめ：生き残るのは「AIを支配するEM」だけ

AIの時代が来る、というより、**もう来ている。**  
エンジニアの半分はAIに役割を奪われ、「コード書けるだけ」で給料をもらえる時代はあと数年で消滅するだろう。EMも同様で、「ただのタスク管理者」や「そこそこ人当たりが良いだけの人材」は消えていく。  
そうならないためにも、**AIが得意なことはすべてAIに任せ、それ以外の領域でチームの可能性を爆発させる**覚悟を持つことが必要だ。

最後に、イメージ図を一つ示そう。正直、この程度のイメージ図すらAIに描かせることは可能だが、それをわざわざ人間の手で描くのは、EMとしての意図やメッセージを込めるためだ。それを見て「やっぱりAIより人間のほうがいいな」と思うか、「そんなのあとでAIが調整してくれるだろ」と思うかはあなた次第だ。

```mermaid
flowchart TB
    subgraph "AI支配下の開発組織"
        AI["AIツール(自動生成/検証)"] --> Team["既存エンジニア(減少中)"]
        Team --> EM["EM(統率/最終判断)"]
        EM --> Future["新たな価値創造"]
    end
```

- AIツールが実務の大半を担う  
- 既存エンジニアは少数精鋭化  
- EMはAIと人間を使いこなし、未来の事業価値を創造  

という構造を目指す時代になる、というのが筆者の断言だ。賛否あると思うが、あなたがこの先のキャリアで生き残るかどうかは、AIをどれだけ早く「自分の下僕」にできるかにかかっている──とまで言っておく。  

以上、「AI時代のエンジニアリングマネージャー」は、覚悟を決めてAIを支配下に置くか、それとも淘汰されるかの分岐点にいる。今すぐ行動を起こせないなら、少なくとも数年後の未来は生き残れないだろう。もう一度言う。**エンジニアの半分は要らなくなる。** その半分に入りたくないなら、行動するしかないのだ。

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
circuitjsの作法 その16

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
リレーで、and回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f3a2ef8c-6b93-562e-d3c7-0543eff28070.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
g 624 448 624 496 0 0
g 608 448 608 496 0 0
R 304 128 224 128 0 0 40 5 0 0 0.5
178 640 288 640 448 6 1 0.2 0.24999999999997224 0.05 1000000 0.02 20 0.015 0.005 1
w 608 224 608 288 0
w 304 128 352 128 0
w 352 128 640 128 0
162 640 240 640 288 2 default-led 1 0 0 0.01
w 640 128 640 240 0
x 462 84 505 87 4 24 and
s 320 224 432 224 0 0 false
s 480 224 576 224 0 0 false
w 432 224 480 224 0
w 576 224 608 224 0
w 304 128 304 224 0
w 304 224 320 224 0

```

以上。
Javaで「パネルの背景色の設定と背景の透明/非透明の切り替え」の動作を確認してみた。

# 概要

Javaで「パネルの背景色の設定と背景の透明/非透明の切り替え」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/tutorial/jpanel/index2.html

# 実装

以下のファイルを作成しました。

```Sample.java
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Dimension;

class Sample extends JFrame{
  public static void main(String args[]){
    Sample frame = new Sample("MyTitle");
    frame.setVisible(true);
  }

  Sample(String title){
    setTitle(title);
    setBounds(100, 100, 728, 400);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    setLayout(new FlowLayout());

    JPanel panel1 = new JPanel();
    panel1.setPreferredSize(new Dimension(200, 100));
    panel1.setBackground(Color.RED);

    JButton button1 = new JButton("Open");
    panel1.add(button1);

    JPanel panel2 = new JPanel();
    panel2.setPreferredSize(new Dimension(200, 100));
    panel2.setBackground(Color.BLUE);

    JButton button2 = new JButton("Close");
    panel2.add(button2);

    add(panel1);
    add(panel2);
  }
}
```

以下のコマンドを実行しました。

```
$ javac Sample.java 
$ java Sample
```

# まとめ

何かの役に立てばと。
circuitjsの作法 その15

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
リレーで、not回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/25895b4c-1ef8-64c4-5166-6fd9a15f203a.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
g 656 448 656 496 0 0
g 608 448 608 496 0 0
R 304 128 224 128 0 0 40 5 0 0 0.5
178 640 288 640 448 6 1 0.2 0 0.05 1000000 0.02 20 0.015 0.005 0
s 384 224 496 224 0 1 true
w 496 224 608 224 0
w 608 224 608 288 0
w 384 224 352 224 0
w 304 128 352 128 0
w 352 128 352 224 0
w 352 128 640 128 0
162 640 240 640 288 2 default-led 1 0 0 0.01
w 640 128 640 240 0
x 462 84 500 87 4 24 not

```

以上。
M5StampS3、WebServerのサンプルを改造して接点情報を表示。


x 過去ログを見よ!!
x 3.1.0
x なぜか、なんかいか「ツール」-「シリアルモニター」を開くと成功する(windows系)
　リ、コンパイルするとリセットが掛る(ubuntu系)

目的
最小改造でG15の状態をWEBに表示


SSIDとパスワードは、修正する事


```c++

const char *ssid = "ご自宅のSSID";
const char *password = "ご自宅のパスワード";

```


ローカルドメインを使用する


```

http://esp32.local/

```


![o_coq770.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6df32137-a0e0-5142-9705-2490e4f14fd1.jpeg)

![o_coq771.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/14810302-3932-d1af-7487-7956a59ada3e.jpeg)

![o_coq772.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6e7801c0-1847-f888-e560-e53935514764.jpeg)

![o_coq773.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4b9f34ac-080e-cef3-c62c-11a08b144d43.jpeg)

![o_coq774.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d46de64a-d553-a1aa-616a-d6829798cbb3.jpeg)

![o_coq775.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4f4eeac3-dc56-d692-2bd0-defd0b2559ff.jpeg)





プログラム



```c++


//WebServer_sw1_M5StampS3_1


//ヘッダー
#include <WiFi.h>
#include <NetworkClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>

#include <math.h> //logの計算等で使う


//定義
const char *ssid = "ご自宅のSSID";
const char *password = "ご自宅のパスワード";

static volatile int OnOff = 0;

WebServer server(80);


void handleRoot() {

  //↓処理を開始

  static uint32_t msg_count = 0;

  static char data[256 + 1];

  OnOff = digitalRead(15);

  snprintf(data, sizeof(data), "G15 = %d #%lu", OnOff, msg_count++);

  //↑処理が終了

  //転送
  server.send(200, "text/plain", data);

}

void handleNotFound() {

  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);

}


//初期化
void setup(void) {

  pinMode(15, INPUT); //GPIO init

  //WiFiの初期化
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

  //シリアルの初期化
  Serial.begin(9600);
  Serial.println("");
  //シリアルの待ちが0.5*9
  //delay(3000);//決め打ちなので、おかしかったら調整してね! wifiの待ち0.5*6
  for (int i = 0; i < (9 + 6); i++) {
    delay(500); //接続待ち
    Serial.print(".");
  }//for

  //ローカルドメインネームサーバーの設定
  MDNS.begin("esp32"); delay(2000);//決め打ちなので、おかしかったら調整してね!


  //接続情報の表示
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  //割り込みに登録↓ start
  server.on("/", handleRoot);

  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);
  //割り込みに登録↑ end

  server.begin(); //webサービスの初期化
  Serial.println("HTTP server started");

}//setup


//メインループ
void loop(void) {
  server.handleClient();
  delay(2);  //allow the cpu to switch to other tasks
}//loop



```
[AWS #36] Cloud Trail

<!--
 <font color="c00000"></font> 赤
-->
## はじめに
今回はモニタリング、管理サービスにある<font color="c00000">**「AWS CloudTrail（クラウド トレイル）」**</font>について見ていきたいと思います。「Trail ➡ **手がかり、痕跡**」というニュアンスになります。


## AWS CloudTrail
CloudTrailは、AWSアカウント内のほぼ全ての[**API**](https://aws.amazon.com/jp/builders-flash/202209/way-to-operate-api/)**リクエストとその結果を記録**します。APIリクエストを記録する..即ち**AWSアカウント内のほぼ全ての操作を記録する**ということになります。

:upside_down: これを使用することで、AWSアカウント内で<font color="c00000">**「誰が、いつ、何に、何をしたか」**</font>を把握することができます。さらに、AWSアカウントに不正アクセス、予期せぬ動作が起きた場合などにこれを使用して **「ログ」** を確認することができます。これにより**原因の調査**をすることができます。

### 管理イベント
CloudTrailで取得が可能な操作の例を見ていきたいと思います。まずは「管理イベント」です。
![AWS36_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/afc781d4-5311-b223-0283-6ac1422e6476.png)
![AWS36_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/a8942cb1-53e6-96a0-d4da-3b36c1de2a90.png)


### データイベント
![AWS36_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/08f5badd-4c1b-5fbf-5495-98a27eb1fbdb.png)

:upside_down: またCloudTrailでは、標準で「90日間」管理イベントログを保存することができます。
## メリット
ここでCloudTrailのメリットについて見ていきたいと思います。
<font color="c00000">**コンプライアンス**</font>
**AWS上での操作ログが自動的に保存されます。**
これによりコンプライアンス監査に役立てることができます。「トラブル発生！」「不正操作！」などを直ぐに特定が可能です。

<font color="c00000">**セキュリティ**</font>
**イベントログを管理しています。**
これによりセキュリテや運用上の問題点を発見することができます。また、集計したログを分析するソフトに取り込んで、活用することも可能です。

<font color="c00000">**トラブルシューティング**</font>
CloudTrailを確認することで、**「誰が、どのような」操作をしたかを直ぐに確認**することができ調査に役立てることができます。


## おわりに
今回のちょっとしたまとめになります。

:::note info
CloudTrailは、AWSアカウント内のほぼ全ての**APIリクエストとその結果を記録**します
:::

最後までお読みいただきありがとうございました！
>>**日頃より活用している参考書です。**
>> **「参考書」**
[**AWS認定クラウドプラクティショナー改定第3版（Cloud Trailは328-329ページ）**](https://x.gd/19i6N)
>

> **「AWS公式サイト」**
[**AWS Cloud Trail**](https://aws.amazon.com/jp/cloudtrail/)

> **「Youtube」**
[**【AWS CloudTrail】ソリューションアーキテクト アソシエイト(SAA) 第36回講座**](https://x.gd/Y4XhR)
>
Typstで参考文献リストの著者名の区切り文字を変更する

# Typstにおける参考文献リスト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1164750/194587cf-e56f-b167-9eaf-aa43883c8d18.png)

著者名が日本語でも区切りがandになるのが気に食わない

これをカンマにしたい

# 解決法(？)

ieeeでしか検証してないです

https://github.com/citation-style-language/styles/blob/master/ieee.csl

 ↑ からieee.cslをダウンロード
エディタで開く．


```
<macro name="author">
```
みたいな行があるはずなので探す．

その2行下くらいにある<name ... みたいな行の and="text" あるいは and="symbol"を削除
```
<name and="text" et-al-min="3" et-al-use-first="1" initialize-with=". "/>
```
↓
```
<name et-al-min="3" et-al-use-first="1" initialize-with=". "/>
```

以上．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1164750/51620092-7b1d-fa9e-4c6c-bbc02f4c08a7.png)


# 問題点

この方法だと英語著者でも否応なしにカンマになる
分岐の方法はわからず
わかったら追記します．
circuitjsの作法 その14

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
10bit、リングカウンタ回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/0e6100ca-27e7-24ae-0083-740c6e2e7a29.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
163 528 352 576 352 2 10 0 5 0 0 0 0 0 0 0 0
R 528 384 464 384 1 2 100 2.5 2.5 0 0.5
L 592 416 592 464 0 0 false 5 0
M 560 320 560 288 0 2.5
M 592 320 592 272 0 2.5
M 624 320 624 256 0 2.5
M 656 320 656 240 0 2.5
M 688 320 688 224 0 2.5
L 848 416 848 464 0 1 false 5 0
M 720 320 720 208 0 2.5
M 752 320 752 192 0 2.5
M 784 320 784 176 0 2.5
M 816 320 816 160 0 2.5
M 848 320 848 144 0 2.5

```

以上。
circuitjsの作法 その13

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
8bit、シフトレジスタ回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3c0a0be5-6c06-1ec3-9f4f-1aa93289ce04.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
189 528 336 704 336 0 8 0
L 528 368 464 368 0 0 false 5 0
M 592 304 592 272 0 2.5
M 624 304 624 256 0 2.5
M 656 304 656 240 0 2.5
M 688 304 688 224 0 2.5
M 720 304 720 208 0 2.5
M 752 304 752 192 0 2.5
M 784 304 784 176 0 2.5
M 816 304 816 160 0 2.5
R 528 400 448 400 1 2 100 2.5 2.5 0 0.5

```

以上。
circuitjsの作法 その12

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
4bit加算回路を作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ec3364f5-0010-d1da-39a4-f0294b6531c0.png)


# ネットリスト

```
$ 1 0.000005 10.20027730826997 50 5 50 5e-11
196 576 208 864 208 2 4
157 1088 80 1216 80 0 7 0 0
197 752 272 880 272 0
w 880 272 912 272 0
w 912 272 912 80 0
w 912 80 1088 80 0
w 880 304 944 304 0
w 944 304 944 112 0
w 944 112 1088 112 0
w 880 336 976 336 0
w 976 336 976 144 0
w 976 144 1088 144 0
w 880 368 1008 368 0
w 1008 368 1008 176 0
w 1008 176 1088 176 0
w 880 400 1056 400 0
w 1056 400 1152 400 0
w 1152 400 1152 208 0
w 880 432 1184 432 0
w 1184 432 1184 208 0
L 576 208 512 208 0 0 false 5 0
L 576 240 496 240 0 1 false 5 0
L 576 272 480 272 0 0 false 5 0
L 576 304 464 304 0 0 false 5 0
L 576 336 512 336 0 0 false 5 0
L 576 368 496 368 0 1 false 5 0
L 576 400 480 400 0 0 false 5 0
L 576 432 464 432 0 0 false 5 0
w 672 272 752 272 0
w 672 304 752 304 0
w 672 336 752 336 0
w 672 368 752 368 0
L 576 464 512 464 0 0 false 5 0
w 880 464 1216 464 0
w 1216 464 1216 208 0



```

以上。
fishファンクションシリーズ

こんにちは。KITsのプログラマーの苔コッコーです。

現在わたしはfish shellを使用しているのですが、fishを用いて効率的に開発するための関数がいくつかあります。
今日から、それらを順番に紹介していこうと思います。
紹介済みの記事リンクは下に貼っていくので、ぜひ読んでみてください。
関数はすべて、dotfilesにあります。参考にしてみてください。意見があれば是非コメントなどで教えて下さい。

https://github.com/Kokecoco/dotfiles

# 投稿済み記事

https://qiita.com/kokecoco/items/e1dd477f3e62ac63e913
circuitjsの作法 その11

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
circuitjsは、論理回路がある。
論理回路、素子を探せ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/16e36626-8440-209c-c6dc-07e258f49261.png)



# 結果



|名称|和訳|
|:-|:-|
|Logic Input	|	論理入力	デジタル回路の入力として使用する。
|Logic Output	|論理出力	デジタル回路の出力として使用する。
|Inverter		|インバーター(NOTゲート)	
|NAND Gate		|NANDゲート	
|NOR Gate		|NORゲート	
|AND Gate		|ANDゲート	
|OR Gate		|	ORゲート	
|XOR Gate		|XORゲート	
|D Flip-Flop	|	Dフリップ・フロップ	
|JK Flip-Flop	|JKフリップ・フロップ	
|T Flip-Flop	|	Tフリップ・フロップ	
|7 Segment LED	|7セグメントLED	
|7 Segment Decoder	|7セグメントデコーダー
|Multiplexer		|マルチプレクサ	4bit
|Demultiplexer	|デマルチプレクサ 4bit
|SIPO shift register	|SIPO(直列入力並列出力形)　シフトレジスタ	8bit
|PISO shift register	|PISO(並列入力直列出力形)　シフトレジスタ	8bit
|Counter			|カウンタ 4bit
|Ring Counter	|リングカウンタ	10bit
|Latch			|ラッチ　4bit
|Sequence generator|	シーケンスジェネレータ	
|Full Adder		|全加算器	4bit
|Half Adder		|半加算器	
|Custom Logic	|カスタムロジック


以上。
【OracleAPEX】チェック・ボックス・グループに全て選択を実装したい

# はじめに
単純にOracleAPEXでチェックボックスが多くなったときにまとめてチェックをつけたいなーと思ったので、それを実装したというお話です。備忘録を残したいが為の投稿です。こんなのを実装します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/dc4ba24b-1073-d5fd-08ee-384974f65170.png)


# こんな人にお勧め
・OracleAPEX開発者

# やり方
➀チェック・ボックス・グループのアイテムを準備します。
私の場合は、表示したいシステム情報をコードで管理しており、それら全てをLOV項目でSQL問合せで取得するようにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/722d2920-11a7-524f-78d9-21f888f9dd69.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/d39ddbf4-370b-69fd-3bb4-518a05c727a3.png)

➁ページに対して、Functionを設定します。
APEXの画面、左上のページ数が記載されている箇所をクリックして、右側の項目の中にある【ファンクションおよびグローバル変数の宣言】のボックスに以下のように記載します。

```ruby:書き方
// 全て選択チェックボックスの状態を監視する
document.getElementById('SELECT_ALL_CHECKBOX').addEventListener('change', function() {
    // 全て選択チェックボックスの状態を取得
    const isChecked = this.checked;

    // 他のチェックボックスの状態を変更
    document.querySelectorAll('.my-checkbox input[type="checkbox"]').forEach(function(checkbox) {
        checkbox.checked = isChecked; // 全て選択の状態に合わせる
    });
});
```
このとき、**select_all_checkbox**とは全て選択のチェックボックス名であり、**my-checkbox**はチェック・ボックス・グループに設定するCSS名です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/44819074-fe6e-d490-02dc-a3a95d6bf45b.png)

➂先ほど作成したチェック・ボックス・グループの右側の項目の中で詳細⇒CSSクラスに、上記で入力したCSS名を記載します。今回は、my-checkboxです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/5766269c-641b-2bf0-3885-1c2c630665bb.png)

➃最後にうえで入力した全て選択のチェックボックス名と同じ名称で、全て選択のチェックボックスのアイテムを作成します。今回は、【SELECT_ALL_CHECKBOX】の名前で作ります。
その際、大文字小文字まで合わせる必要があります。注意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/86cb24ce-8dcb-e2ba-5c5d-2580834f8c4c.png)

➄動作を確認します。

これが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/44b83609-6a30-fb58-c885-0cdab11c6bdf.png)

こうなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/42d41b1c-b00b-c18f-4ba0-2fe10f98a2be.png)

ちなみにもう一度押すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875283/7561b69c-bed6-8bdc-ae73-bc815973e223.png)

OKです！

# 終わりに
こうした地味でも、ユーザーにストレスを与えない仕組みを導入することが大切だと考えています。同じ箇所で悩む人の一助になれば幸いです。それでは、また次回の記事で(`･ω･´)
circuitjsの作法 その10

# 概要
circuitjsを調査してみた。
練習問題やってみた。

# 練習問題
circuitjsは、audio outがある。
サンプル回路で、良い音を探せ。

# 結果

ウィーンブリッジオシレータ だと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1a4052f4-05dd-65e5-fa79-943c45588c8b.png)


以上。
circuitjsの作法 その9

# 概要
circuitjsを調査してみた。
エンジン、見つけた。

# 参考にしたページ

https://qiita.com/qwer123123/items/78c634f86b332d991b0f


# 見つけたエンジン。

https://code4fukui.github.io/circuitjs1/war/circuitjs.html?ctz=CQAgjCAMB0l3BWcMBMcUHYMGZIA4UA2ATmIxAUgoqoQFMBaMMAKAHMRCUAWEbvKl14IwKKFBYAnTjxDYEYoXwHiw8FtgyDZuXkvliIVSCwBKM3rosgUCQuKrdaDqNAQsgA


# 本家

https://www.falstad.com/circuit/circuitjs.html?ctz=CQAgjCAMB0l3BWcMBMcUHYMGZIA4UA2ATmIxAUgoqoQFMBaMMAKAHMRCUAWEbvKl14IwKKFBYAnTjxDYEYoXwHiw8FtgyDZuXkvliIVSCwBKM3rosgUCQuKrdaDqNAQsgA


# 本家２

http://lushprojects.com/circuitjs/


以上。
JavaScriptのthisって誰

# 結論
**自分という意味**

は？
# 解説
thisは様々な場面で作れる(今回はclassを基に解説する)
```JavaScript:test.js
class Test {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  };
};
const test = new Test(10, 20);
console.log(test.num1);
test.num2 = 30;
console.log(test.num2);
```
実行するとこう
```:test.js.out
10
30
```
となります。
## 1行ずつ解説！(例外あり)
```JavaScript
class Test {
};
const test = new Test();
```
Testクラスを宣言
定数testでTestクラスのインスタンスを宣言
## インスタンスとは？
クラスを使えるようにすること。クラスは言うなれば**雛形**なので使える状態にしなければならない。
## 雛形とは？(概念的話です)
釣りします。釣竿は釣る魚によって変えます。ですが基本的な操作は変わりません。
糸を垂らす→待つ→待つ→待つ→合わせる→糸を引く→釣れた！→喜ぶ
ですね(\*^^\*)
釣竿は違くても釣る手順は同じです。インスタンスの作成とは釣具屋から釣竿を買って魚を釣れる状態にすることです。
この場合だとclassは釣る出順です。
ですが釣竿によってはリールの場所が違ったりします。ですが、**リール**と言うのは共通なので**リールを巻く**という行為を別の釣竿でも実行することが出来ます。コレがclassの本質です。(遠回りしすぎた)
## 1行ずつ解説！(例外あり)【再】
```JavaScript
class Test {
  construcor(num1, num2) {
  };
};
const test = new Test(10,20);
```
`construcor(num1, num2){};`とはインスタンスを生成した時に呼び出されるメソッド(関数、オブジェクトに雛形要素入れたのがclassだからね)です。釣りの説明だとリールですね(？)今`num1` `num2`には`10` `20`が入っていますね。このままでは保存できません。**困った！** どう困るのかと言うとこのままでは他のメソッドを読み込んでも値を使えません。それはJSにはスコープ`{}`があり、この中ので宣言した変数などは外部に持ち出せません(引数も)これではclassが使えません！なのでここで登場するのが`this`です！(ここまで約1000文字！本題の登場です)冒頭でも説明した通り`this`とは自分という意味です。
```JavaScript
  this.num1 = num1;
  this.num2 = num2;
```
ここで言う自分とはTestクラスの自分です。つまり
# クラスの中にthisという値を保存する場所がある！(嘘、後で説明する)
ということですね。これはインスタンス生成する事に作られます。thisの保存空間の中のnum1という場所に引数num1(10)が入れられたと言うわけです。
```JavaScript
const test = new Test(10,20);
console.log(test.num1);//10
```
定数testの中でインスタンス生成をしています。つまりクラスはtestの中に入っていることになります(代入してます)
`test.num1`とは定数testの中のnum1という場所に格納されていた値を取り出すという訳ですね。
classはオブジェクトです(はいそうです)
オブジェクトを雛形にしたのがclassです。
# thisとは自分自身を参照する
という意味だ！！！！
`this(自分自身).名前(オブジェクトの名前)`というわけでした！

は？

class内のthis.名前はその名前の格納庫。# つまりthisとは何者でもないただの一人称だったのだ！
僕の名前は〜、私の名前は〜、の僕、私がthis
田中の名前は〜、佐藤の名前は〜、
const test = new Test();
　         ↑
          これが代入(重要)
test.〜が田中、佐藤みたいな感じ。

classが沢山あるから固有名詞で呼んでるのがtest.num1の`test`の部分で
自分の事だから一人称で呼んでるのがthis.num1の`this`という訳

人が沢山あるから固有名詞で呼んでるのが田中の名前の`田中`の部分で
自分の事だから一人称で呼んでいるのが私の名前の`私`という訳

### 読んで理解してくれたら嬉しいけど国語力の問題なんだよ(僕の)
それと始業式間近で宿題終わらず夜更かししながら友達と宿題してる人が片手間で書いた文なので理解が出来なかったらすみません先に謝っておきますすみません
Amazon Bedrock Knowledge Bases が マルチモーダルデータに対応

:::note info
2024/12 現在 一部プレビュー
:::


# 内容

AWS re:Invent 2024 で発表があった Amazon Bedrock Knowledge Bases が マルチモーダルデータに対応したことについてシンプルに纏めます。

https://aws.amazon.com/jp/blogs/news/new-amazon-bedrock-capabilities-enhance-data-processing-and-retrieval/

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/amazon-bedrock-knowledge-bases-processes-multimodal-data/

https://docs.aws.amazon.com/bedrock/latest/userguide/kb-advanced-parsing.html

- アップデート内容はタイトルの通りです


# マルチモーダルデータとは

- テキストとビジュアルデータ両方使いながらユーザーに回答を返す


# 対応リージョン

- 米国西部 (オレゴン) 


# 対応モデル

- Claude 3.5 Sonnet
- Claude 3 Haiku

※ 次に説明する解析戦略で、「Foundation models as a parser」を指定した場合


# 設定

## 解析戦略

ナレッジベースを作成するときに、解析戦略としていずれかを指定する。

1.マルチモーダルデータからコンテンツを自動抽出するマネージドサービスの **[Amazon Bedrock Data Automation](https://qiita.com/leomaro7/items/830a698d969ab8a7c58c)** を使用（プレビュー）

![スクリーンショット 2025-01-08 2.27.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/7d8fb4f7-b07f-af9c-cf5a-0e5d28b3195e.png)

2.デフォルトのプロンプトを柔軟にカスタマイズできる Claude 3.5 Sonnet や Claude 3 Haiku などの FM がパーサーとする **Foundation models as a parser**

![スクリーンショット 2025-01-08 2.29.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/ef2cd5e1-edaa-3fd4-1a4c-224865242c94.png)

※ なお、今の所ナレッジベースの作成後にこれらのオプションを変更できないため、新規作成時のみに指定可能。
　なお、良い素材が直ぐに思いつかなかったので、時間があれば後日検証してみて更新したいと思います。

## Multimodal storage destination

Amazon Bedrock Knowledge Bases がナレッジベースのデータソースにドキュメントから抽出した画像を保存するために使用する、Amazon S3 上のマルチモーダルストレージの保存先に使用する。
なお、これらの画像は、ユーザークエリに基づいて取得され、応答の生成に使用され、応答で引用される。

![スクリーンショット 2025-01-08 2.33.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/96040e5a-0fc9-0802-fdab-ba6c9f42b5ff.png)
ExpoSDK 52では、splash画像とicon画像を同じものにする必要がある

## 事象
ExpoSDK 51までのsplash画面では、splash用としてapp.jsonに設定していた画像が表示されていたが、ExpoSDKを52へアップデートしてから表示されなくなってしまった。
正確にいうと、icon用としてapp.jsonに設定していた画像がsplash画面で表示されるようになった。

## 結論
### ExpoSDK 52では、splash画像とicon画像は同じにする必要がある。

[こちらのstackoverflow](https://stackoverflow.com/questions/79241930/react-native-expo-sdk-52-splash-screen)に、SDK52ではsplash画像とicon画像は同じにする必要があるとのヒントが記載されていました。

ExpoSDK 52公式の Expo SplashScreen ＞ Configurable properties の箇所にもさらっと記載があった（[こちら](https://docs.expo.dev/versions/v52.0.0/sdk/splash-screen/#configurable-properties)）。

:::note warn
Name：image

Description：The path to the image file that will be displayed on the splash screen. This should be your app icon or logo.

スプラッシュ画面に表示する画像ファイルのパス。 これはアプリのアイコンまたはロゴでなければなりません。
:::

一応、SDKを51にダウングレードすればsplash画像とicon画像を分けることはできるみたいですが、最新のExpoGoでは確認できないみたいです（SDK52しか対応していないため）。

## さいごに
やはりSDKのバージョンアップは何かが起こる...。
Vite + Reactプロジェクト上でNetlifyの環境変数が取得できない

## 発生した問題
**Netlify**というホスティングサービスを用いて、Vite(React)プロジェクトを展開しており、メンテナンス中の画面の切り替えを**Netlify**内の環境変数によって制御しようと色々と試したが、ソースコード上で**Netlify**内の環境変数を取得できなかった。

## 動作環境
```json:package.json
...
"dependencies": {
    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@fontsource/material-icons": "^5.1.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.9",
    "@mui/material": "^6.1.9",
    "@reduxjs/toolkit": "^2.5.0",
    "@storybook/cli": "^8.4.7",
    "@testing-library/jest-dom": "^6.6.3",
    "konva": "^9.3.18",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.53.2",
    "react-konva": "^19.0.1",
    "react-redux": "^9.2.0",
    "use-image": "^1.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/addon-themes": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.0.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.17.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-perfectionist": "^4.3.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "eslint-plugin-sort-keys": "^2.3.5",
    "eslint-plugin-storybook": "^0.11.1",
    "globals": "^15.12.0",
    "happy-dom": "^15.11.7",
    "husky": "^9.1.7",
    "lint-staged": "^15.2.10",
    "prettier": "^3.4.1",
    "sass": "^1.81.0",
    "storybook": "^8.4.7",
    "ts-node": "^10.9.2",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.16.0",
    "vite": "^6.0.1",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^2.1.6"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ],
    "rules": {
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off"
    }
  },
  "lint-staged": {
    "*.ts": "eslint --fix",
    "*.tsx": "eslint --fix",
    "*.{ts,tsx,js,jsx}": "prettier --write"
  }
```
## 試したこと
### 特定の環境変数に設定する
Reactのプロジェクト、という観点から考え、色々と調べたところ
>Netlifyでは、環境変数のキーが NETLIFY_ または REACT_APP_ で始まる場合に
>ビルド時に自動的に公開される。

という旨の記載が、公式ドキュメントまたは他有志サイトにあったため実践した。
 が、現状に変化はなかった。
## 解決方法
環境変数の取得を以下の通りに行っていた。
```typescript
  const displayState = process.env.REACT_APP_DISPLAY_STATE;
```
この取得方法だと、2つの観点からVite上で環境変数を取得できないことがわかった。
1. 環境変数のプレフィックスは、Netlifyならびにソースコード上で`VITE_`を用いていない
1. 環境変数の取得方法として、`import.meta.env`を用いていない

これを踏まえて、以下の通りに修正したところ、ちゃんとNetlify上で設定している環境変数が取得できた。
```typescript
  const displayState = import.meta.env.VITE_DISPLAY_MODE;
```
## 補足
ローカル上の.envファイルの値は`import.meta.env`でなくても取得できていたため、その点で原因究明が遅れてしまった。
また、従来通り`process.env`にて取得する方法もあるようなので、私自身はそちらに合わせています。
#### 参考

https://qiita.com/shunii/items/b00d556f3730e6b88708

https://qiita.com/Sicut_study/items/d48bec20fa8b082a2368

先人が歩んだ知識の道に感謝…🙏
kintoneのアプリアクションで作成されたレコードを判別する方法！

## はじめに
こんにちは！かねごんです！

今回はkintoneの**アプリアクション**に関わる内容になります！


kintoneのアプリアクションは、簡単にレコードのデータを転記できる便利な機能です。

そんなアプリアクションによって作成されたレコードと、通常の新規作成されたレコードを判別したい場面ありませんか？

本記事は、そのようなケースに対応する2つのJavaScriptカスタマイズの内容をシンプルにお伝えします。


### アプリアクションとは

https://jp.cybozu.help/k/ja/user/app_settings/appaction/whats_appaction.html


> アプリアクションは、現在表示しているレコードのデータを、新しいレコードに転記できる機能です。
たとえば、注文管理アプリで毎回お客様の情報を手入力している場合、すでに別のアプリで管理している顧客リストから転記する、といったことが可能です。


## どんな人向けの記事か
- kintoneのアプリアクションを使用している人
- kintoneのカスタマイズに挑戦している人


## アプリアクションで作成されたレコードを判別したい！
今回は、以下の2つの方法についての内容になります。

- レコードURLで判別する方法
- アプリアクション転記用のフィールドを設定して判別する方法

### **1. レコードURLで判別する方法**
アプリアクションで作成されたレコードのURLには、"action"が含まれています。
- 例: `https://{サブドメイン}/k/{アプリID}/edit?action={アクションID}&app・・`


#### 実装例
レコード追加画面を表示する際に、URLを確認して”action”のパラメータが含まれているかを判別します。

```javascript
kintone.events.on('app.record.create.show', (event) => {
  const hasAction = new URL(window.location.href).searchParams.has("action");
  if (hasAction) {
    console.log('URL：このレコードはアプリアクションで作成されました');
  }
});
```

#### プチまとめ
- JavaScriptを実装するだけで、特にフォームにフィールドを追加しなくても判別することが可能です。
- URLを利用するため、仕様変更や他のカスタマイズなどの影響を受ける可能性があります。




### 2. アプリアクション転記用のフィールドを設定して判別する方法
アプリアクション：先アプリのフォームに、フィールド（例: 「アクションフラグ」）を設定します。
アプリアクション：元アプリの**アプリアクション**により、先アプリにデータを転記する設定を行います。
（今回の「アクションフラグ」には、レコード番号を転記しました。）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582762/d791010d-d193-e12c-b42f-c43ac3b34ad8.png)



#### 実装例
レコード追加画面を表示する際に、「アクションフラグ」を利用して判別します。

```javascript
kintone.events.on('app.record.create.show', (event) => {
  const actionFlag = event.record['アクションフラグ'].value;
  if (actionFlag) {
    console.log('アクションフラグ：このレコードはアプリアクションで作成されました');
  }
});
```
#### プチまとめ
- URLに依存せず、レコードのデータから直接判別できます。
- フィールドの設定が必要であり、他のユーザーが誤ってフィールドの設定を変更するリスクもあります。


## どちらの方法を選ぶべきか？
| 方法                     | まとめ       |
|--------------------------|-------------------------|
| **1. レコードURL**      | **シンプルな実装を求める場合**<br>フォームの変更が発生しないため、設定の手間が少ない。ただ、URLに依存するため、将来的な仕様変更や他のカスタマイズに影響を受ける可能性がある。|
| **2. フィールドを設定**　　 |**拡張性を重視する場合**<br>レコードのデータに直接フラグを持たせるため、他のカスタマイズやデータ参照時にも利用しやすい。ただ、初期設定や管理の手間がかかる可能性がある。|


## 例えばこんな場面で使えるかも！

今回は内容をかなりシンプルにお伝えしましたが、これらの方法を応用することで、
以下のような機能も実装することが可能です！
- アプリアクション毎で、フィールドの制御をしたいとき
　例) 発注依頼アプリで、再発注アクションでは「仕様」を編集不可にする。など
 
- 特定のレコードから1度だけアプリアクションを行いたいとき
　例) 在庫管理アプリで、出庫アクションを1度だけ許可し、2回目以降はエラーを表示する。など

## さいごに
いかがでしたでしょうか？

今回は、**アプリアクション**に関するJavaScriptカスタマイズの内容でした。

便利なアプリアクションに少し手を加えて、より使いやすいkintoneアプリを作ってみてください！！！
iOSでChatGPTのAPIを使う


<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/f0e76806-be43-5a75-bac5-5855386a0dc1.png width=400>

```swift
import Foundation

struct ChatMessage: Identifiable {
    enum Role: String {
        case user
        case assistant
    }
    
    let id = UUID()
    let role: Role
    let content: String
}

class OpenAIService {
    private let apiKey = "YOUR_OPENAI_API_KEY"
    private let endpoint = "https://api.openai.com/v1/chat/completions"
    let model: String = "chatgpt-4o-latest"
    
    func sendChatRequest(messages: [ChatMessage]) async throws -> String {
        
        let messageDictionaries: [[String: String]] = messages.map { msg in
            [
                "role": msg.role.rawValue,
                "content": msg.content
            ]
        }
        
        let requestBody: [String: Any] = [
            "model": model,
            "messages": messageDictionaries,
            "temperature": 0.7
        ]
        
        guard let url = URL(string: endpoint),
              let httpBody = try? JSONSerialization.data(withJSONObject: requestBody) else {
            throw NSError(domain: "Invalid Request", code: 0, userInfo: nil)
        }
        
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        request.setValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.httpBody = httpBody
        
        let (data, _) = try await URLSession.shared.data(for: request)
        
        guard let json = try? JSONSerialization.jsonObject(with: data),
              let dict = json as? [String: Any],
              let choices = dict["choices"] as? [[String: Any]],
              let firstChoice = choices.first,
              let message = firstChoice["message"] as? [String: Any],
              let content = message["content"] as? String
        else {
            throw NSError(domain: "ChatGPT Error", code: 0, userInfo: nil)
        }
        
        return content.trimmingCharacters(in: .whitespacesAndNewlines)
    }
}

```

これで答えが返ってくる。

UIをつけたサンプルアプリは以下。

https://github.com/john-rocky/ChatGPT-iOS


🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
   [GitHub](https://github.com/john-rocky)
VSCodeでパワポスライドを作成する

## はじめに
今更ながらVSCodeで「Powerpoint」のスライドを作成することができるプラグインを知ったので使い方を覚えるついでにまとめておきます。

## インストール
- 前提 : Visual Studio Codeインストール済み
Visual Studio Codeにて「[Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)」をインストールする。
![スクリーンショット 2025-01-07 225403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326068/2ec804ee-9e1a-1e95-6487-ec8467f1ec72.png)

## Marpとは
「Marp」はMarkdown Presentation Ecosystemの略でMarkdown記法を知っていれば簡単にPowerpointスライドを作成することができるプラグインです。

## Marpで実際にスライドを作ってみる
ます、VSCodeのコマンドパレットにて`Marp: New Untitled Markdown For Slide Deck`を実行し、新規ファイルを作成します。
![スクリーンショット 2025-01-07 235526.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326068/a40cb282-1349-f5c6-5a39-505ac9235e37.png)
実行後に下記のようなファイルが出来上がっているはずです。
```Markdown
---
marp: true
---


```
あとはVisual Studio Codeのプレビュー機能を使って横に描画されたときの画面を表示しておけば完璧でしょう。
![スクリーンショット 2025-01-08 002149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326068/4654f44c-fa77-8996-6c43-4a30d29b03f4.png)

一旦他の記事や公式サイトを見ながらスライドを作成してみました。
Markdownによってテーマを変えたり、あるいはCSSなどを使って自由にデザインを変えたりすることもできるようで思ったよりもカスタマイズ性が高いと感じました。
LT資料の作成にはすごくいいかもしれません。
```MarkDown
---
# 全体的なデザインやレイアウトなどを指定可能
marp: true
class:
    - lead
    - invert
footer: "abemaru &copy; 2025"

# ページの切り替えは---でやる
---

# Marp使ってみる

---
## Marpを使ってみる
1. Marpとは
2. 記法を学ぶ
3. 資料を作ってみる

<!-- 画像を貼り付けることも可能 -->
![bg right:50% 50%](img/logo.png)

---

## 1. Marpとは
マークダウンでプレゼンテーション資料を可能とするエコシステム
[VSCode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)のプラグインや[CLI](https://github.com/marp-team/marp-cli/releases)で動かすことができる

---
## 2. 記法を学ぶ - 1
<!-- 下記でテーマを上書きすることも可能 -->
<!--
class: center
color: red
backgroundColor: lightblue
pagniate: true
-->
<!-- 大体のMarkdownは使えるはず -->
クラスを指定して上書きすることもできる
**基本的**なMark~~Dwon~~Downの記法は使える

| そのため | こんな感じの |
|:---:|:---:|
| テーブルを | 作ることもできる |

- もちろん
    これも
- できますとも
    - うれしい。
```
上記の内容をプレビューしたのが下記。
![スクリーンショット 2025-01-08 010100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326068/28aa01ab-3659-d8de-a920-91bdf1b6145d.png)



## 最後に
ここではVSCodeのプラグインをもとに使い方をまとめたが、[公式サイト](https://marp.app/#get-started)を見るとCLIもサポートしているみたいです。
VSCodeだけでなくともMarkdownを使ってパワポを作成することはできそうなので、うまく使えば楽できそうなものを見つけたな、と思いました。
これから色々使ってみていい使い道がないか模索してみます。

## 参考
- Marp: Markdown Presentation Ecosystem : https://marp.app/#get-started
- 【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る : https://qiita.com/tomo_makes/items/aafae4021986553ae1d8
- 【すばやさ特化】Visual Studio Codeでスライド作成・発表まで行う : https://qiita.com/aki_number16/items/43e0ffc99a7675ac1b69
電話番号がWhatsAppで利用可能かどうかを確認する方法

WhatsApp番号チェックツールを使用して、電話番号がWhatsAppで利用可能かどうかを確認する方法を学びましょう。

ログインできない場合や、WhatsAppアカウントをお持ちでない場合、電話番号がWhatsAppで利用可能かどうかをどのように確認できますか？

## WhatsApp番号のオンライン確認
 ![WhatsApp-Number-Checker-Online.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963003/9fc0dcea-8b0c-06d9-2328-11c948b082f5.png)

1. まず、WhatsApp番号チェッカーのウェブサイトにアクセスします：[https://checknumber.ai/](https://checknumber.ai/)
2. 確認したい電話番号を入力します（赤い点1で示されている箇所）。
3. 「番号を確認」ボタンをクリックします（赤い点2で示されている箇所）。
4. 数秒待つと、画面下部にWhatsApp番号チェックの結果が表示されます（赤い点3で示されている箇所）。

## WhatsApp番号チェック結果の説明：
1. 「number」フィールドは、確認対象の電話番号です。
2. 「whatsapp」フィールドは、その番号がWhatsAppで利用可能かどうかを示します（利用可能な場合は「yes」、利用不可能な場合は「no」、確認中の場合は「checking」と表示されます）。
3. 「status_update」フィールドは、現在のWhatsAppアカウントのステータス更新時刻情報を表示します。
4. 「signature」フィールドは、ビジネスアカウントかどうかを示します。
5. 「avatar」フィールドは、WAアバターが設定されているかどうかを示します。
6. 「region」フィールドは、WA番号が所在する国/地域を示します。
7. 「carrier」フィールドは、WA番号の通信事業者を示します。

現在、このWhatsApp番号チェックサービスは無料で、1日に約10〜20件の番号を確認することができます。
大量に確認する必要がある場合は、[ウェブサイトのスタッフに連絡](https://wa.me/17253100591)して一括チェックサービスを購入することができます。料金は比較的手頃です。
Cloud Runでデプロイする準備をする

## GCPを使用してみる

Flaskで作成したアプリをデプロイするために、Cloud Runを知りました。


Cloud Runには、無料プランがあるため、アカウント作成までの記録を残します。

## １，GCPにアクセスする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/9c987099-e4c0-f51a-2204-c95bb94b5d8c.png)

https://cloud.google.com/free/?utm_source=yahoo&utm_medium=cpc&utm_campaign=1707694-GCP-APAC-JP-en-BKWS-BRO&utm_content=text-ad-none-none-DEV_c-CRE_671207908260-ADGP_kwd-296645806214&userloc_9222468-network_s&utm_term=KW_google%20gcp&yclid=YSS.EAIaIQobChMIrsSsuqKaigMVO9dMAh24hQpFEAAYASAAEgKKXPD_BwE&gclid=CJH3zL2imooDFa7ThAAdN7Un5Q&gclsrc=ds

こちらのURLからアクセスします。

そして、無料で利用開始を押して、アカウント情報を入力します。

新しいプロジェクトが無い場合は右側の新しいプロジェクトより作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/49c7acaa-e9be-d294-d8da-e30a112c2fab.png)

必要なAPIを有効にします。
APIとサービス→ライブラリを押しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/9494c3cc-787a-354d-40bd-974b618db428.png)

containar registryを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/3b7f2bd6-bb96-7306-7b09-603d0191428b.png)

有効にするを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/4dbb4926-e3c8-5d5e-5b9c-de147d2219d8.png)

## 2,Cloud SDKをインストールする

ここでは、Cloud runにデプロイするために必要なCloud SDKをインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/70cfef68-9f80-b934-7e78-fc90c2605393.png)
ここのGoogle Cloud CLI インストーラをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/45bc4114-a415-6112-9415-830d0e9ce07d.png)

Nextを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/589463f8-76ac-28bf-0fcc-214e950e2db7.png)

I Agreeを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/620dd1b2-3ca4-132f-bb7c-78bd1dc74c0f.png)

Single userを選択し、nextを押します。

そして、ダウンロードを待ちましょう！

## Google cloudの設定
二つのコマンドを実行して、configraitonが設定されてるか確認します。
作成したプロジェクト名を私は選択しました。
何も表示されていない人は、新規作成をしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/f66522ed-2508-19e9-0aab-6e644e955560.png)

## 余談Dockerイメージをビルド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/ca32f423-3931-f8df-784e-31fbcf40f86b.png)

Dockerファイルをもとにビルドする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843698/b9245449-92ba-ad72-aff9-058bad5dc98f.png)

その後docker pushをします。

## 無料トライアル終了..

無料トライアルが終了してしまい、短い期間しか使えませんでしたが、また使う機会があれば他の機能も使ってみたいです。
Google Cloudアップデート (12/26/2024-1/1/2025)

### GKE: [Dec 26, 2024](https://cloud.google.com/kubernetes-engine/docs/release-notes#December_26_2024)
- 2024-R50アップデートのお知らせ

### Conversational Insights: [Dec 20, 2024](https://cloud.google.com/contact-center/insights/docs/release-notes#December_20_2024)
- [Quality AI](https://cloud.google.com/contact-center/insights/docs/qai-overview)がGeminiで28個の言語で使えるのがプレビューになったよ!
  - 日本語含む
- [Topic Inference](https://cloud.google.com/contact-center/insights/docs/topic-modeling-overview)がGeminiで38個の言語で使えるのがプレビューになったよ!

### Spanner: [Dec 30, 2024](https://cloud.google.com/spanner/docs/release-notes#December_30_2024)
- クライアントライブラリ更新

### Cloud Asset Inventory: [Dec 12, 2024](https://cloud.google.com/asset-inventory/docs/release-notes#December_12_2024)
- Backup and DR, Database Migration, GKE, Security Command Center, Vertex AIのリソースタイプ追加

### SAP: [Dec 30, 2024](https://cloud.google.com/solutions/sap/docs/release-notes#December_30_2024)
- ABAP SDK 1.1が追加されたよ!

### Bigtable: [Dec 23, 2024](https://cloud.google.com/bigtable/docs/release-notes#December_23_2024)
- クライアントライブラリ更新

### BigQuery: [Jan 2, 2025](https://cloud.google.com/bigquery/docs/release-notes#January_02_2025)
- JDBCドライバの更新

### Cloud Asset Inventory: [Jan 2, 2025](https://cloud.google.com/asset-inventory/docs/release-notes#January_02_2025)
- Managed Service for Apache Kafkaのリソースタイプ追加

### FIrestore: [Dec 16, 2025](https://cloud.google.com/datastore/docs/release-notes#December_16_2024)
- クライアントライブラリ更新


### ディスクレーマ
- アップデートの内容はあくまでも個人の理解していることを書いています。正しい内容はリリースノート等を確認下さい。
- リリース内容できるだけ拾うようにしているのですが、抜けていそうなリリースノートは追加するのでぜひ教えて下さい！(一覧[ここ](https://qiita.com/kenzkenz/items/ac18a359b803dbb6b490)で更新してます。)
【React】スプレッド演算子を利用したプロパティの変更の基本

React 学習中に初見では理解できなかった基本的な内容についての記事になります

# スプレッド演算子を利用したプロパティの変更


```JavaScript:Example.jsx
import { useState } from 'react';

const Example = () => {
  const userObj = { name: 'apple', age: 10 };
  const [user, setUser] = useState(userObj);
  
  const changeItem = (e) => {
    setOrder({ ...user, name: e.target.value });
  };
  
  return (
    <>
      <input type="text" value={ user.name } onChange={ changeItem } />
    </>
  );
};

export default Example;
```

## 理解が出来なかった点
* 以下の箇所が理解できなかった
    * 展開しているオブジェクトのプロパティが重複している点がよく分からなかった
```JavaScript:
{ ...user, name: e.target.value }
```

# JavaScript での確認
そもそも JavaScript での挙動を理解していないと思ったため確認

```JavaScript:JavaScriptでの確認
const obj1 = { foo: 'bar', x: 42 };

const obj2 = { ...obj1, y: 13 };
console.log(obj2); // { foo: 'bar', x: 42, y: 13 }

const obj3 = { ...obj1, x: 13 };
console.log(obj3); // { foo: 'bar', x: 13 }

const obj4 = { ...obj1, foo: 'bazz' };
console.log(obj4); // { foo: 'bazz', x: 42 }
```
* **obj2**
    * 新しいプロパティを追加すると末尾に追加される
* **obj3**、**obj4**
    * 既存プロパティを値だけを変えると**値だけが更新される**
    * プロパティの順番が入れ替わらず**値だけが更新される**

# 結論
:::note info
* 同じプロパティを指定しても値だけが更新される
    * 特段難しい話ではなく JS の仕様である
:::

# 補足
非同期ステート更新に対して確実に最新の状態を参照できることによる動作保証のためのコールバック関数が好ましいようです

よって以下のような形がベスト
```JavaScript:
setUser(user => ({ ...user, name: e.target.value }));
```

## 構文
先述の書き方は以下の構文から記述されている

```JavaScript:関数の処理が１行かつ戻り値がオブジェクトの場合の構文
(arg1, arg2, ...) => ({ prop1: val1, prop2: val2, ... })
```

### 参考資料

https://zenn.dev/airiswim/articles/384c5b5bb089ba