OmniAICreator/Qiita-1.07M huggingface dataset:
コアドメインの理解と抽出ガイド：ビジネス価値最大化のためのドメイン設計フロー

## ドメインとは
ソフトウェア開発における「ドメイン」とは、ビジネス上の問題領域や取り扱う対象範囲を指します。  
システムが解決すべき課題や、付加価値を提供する領域が「ドメイン」にあたります。

### コアドメインとは
「コアドメイン（Core Domain）」は、組織やサービスが独自の価値や競合優位性を生み出す中核領域です。  
ここに注力することで、「なぜ顧客に選ばれるのか」という差別化の理由を明確にします。

#### コアドメインの実例

| サービス | コアドメイン | 説明 |
|----------|------------|------|
| Netflix | レコメンドエンジン | 視聴履歴や嗜好に応じた最適な作品推薦で顧客エンゲージメント向上 |
| Amazon | 在庫・物流最適化 | 膨大なデータ分析による効率的な在庫管理・配送で顧客満足度強化 |
| Uber | リアルタイム配車マッチング | 需要と供給を瞬時に結びつけ、待ち時間を最小化する独自アルゴリズム |

### サポートドメインとは
「サポートドメイン（Support Domain）」は、事業を支えるために必要だが、特別な差別化にならない機能領域です。  
例えば、一般的なユーザー認証や基本的なCRUD操作、ログ管理などはサポートドメインにあたります。  
これらは汎用的なソリューションや外部サービスで十分対応可能なため、自社の貴重なリソースを集中投下する必要はありません。

#### サポートドメインの例

| 領域 | 例 |
|------|----|
| 認証/認可 | ユーザー名・パスワードでのログイン機能 |
| 通知機能 | メール通知、プッシュ通知、SMS送信 |
| データ操作 | 基本的なCRUD（作成・更新・取得・削除）処理 |
| ログ管理 | システム動作状況を記録する標準的なログ出力機能 |
| 決済処理 | 一般的な決済ゲートウェイと連携したクレジット決済機能 |

## コアドメイン化のステップ

コアドメインを探し出すのはシステムやサービスの価値を最大化かつ差別化するにあたって必要なタスクです。以下に必要なステップについてまとめてみました

| No. | ステップ               | やること                                                 | 成果物/結果                                                 | ポイント                                        |
|-----|------------------------|--------------------------------------------------------|-----------------------------------------------------------|-----------------------------------------------|
| 1   | ビジネスヒアリング・洞察収集 | ドメインエキスパートへのインタビュー、競合分析、市場調査         | ビジネス目的・差別化要因に関するインサイト、「なぜ」の明確化 | 「なぜこのビジネスが存在するのか」を把握することでコアドメインの種を発見 |
| 2   | 価値・差別化要因抽出      | 得られたインサイトから顧客価値・競合優位性を明確にする           | コアドメイン候補の領域や、重要な要件リスト                   | 顧客が選ぶ理由・競合との違いを特定し、コアドメインを絞り込む           |
| 3   | モデル化（抽象化）         | 抽出したコアドメイン要素をドメインモデルとして抽象化・整理する     | ドメインモデル、エンティティ・サービスの概念設計              | コアドメインを技術的・論理的に表現できる形へ落とし込む              |
| 4   | ユースケース定義          | モデル化した要素を具体的なユーザー行動・利用シナリオへ展開        | ユースケース図、ユーザーストーリー、インタラクション設計       | 「なぜ」を実現する「どのような利用シナリオか」を明確にする         |
| 5   | 機能設計・実装            | ユースケースを元に機能要件化し、設計・開発へ落とし込む           | 要件定義書、設計書、コード                                 | コアドメインを具現化し、実際のサービスとして提供する               |

## 必ずコアドメインが必要か
必ずしもコアドメインを定義する必要はありません。  
差別化が不要で、標準的な機能だけでビジネス価値が成立する場合、コアドメインを意識せずに開発することも可能です。

### コアドメインが必要/不要な例

| 例 | コアドメインが必要な場合 | コアドメインが不要な場合 |
|----|------------------------|------------------------|
| 勤怠システム | グローバル規模で多様な労務規制や時差を考慮し、シフト配置を自動最適化する独自アルゴリズムを持つ | 一般的な出退勤記録、休暇申請のみを行う標準的機能 |
| ECサイト | 大量の顧客行動データを解析し、顧客ごとに最適な商品の推薦や価格設定を行う独自エンジン | 商品登録・カート・決済といった基本機能のみ |
| 教育サービス | 学習履歴・テスト結果を活用して個々に最適な学習プランを自動生成する学習アルゴリズム | 汎用的な動画配信とテスト機能のみを提供 |
| 配車アプリ | 交通状況や需要予測を考慮し、最短待ち時間・最適料金を算出する独自マッチング機能 | シンプルな配車依頼受付と位置情報表示のみ |
【Ruby】コードから学ぶTime.strptime

# はじめに

こんにちは！アメリカの大学で語学を学びながら、独学でソフトウェアエンジニアを目指している者です。

今回は、Rubyの`Time.strptime`を使った日付処理で期待通りに動作しなかったケースを取り上げ、その原因と解決方法を詳しく解説します。

## 問題のコード

以下のコードを実行すると、意図しない結果になりました。`Time.strptime`を学ぶためにある教材に書いてあったコードです

```ruby
p Time.strptime("令和6年12月5日", "令和%Y年%m月%d日") do |y|
  y + 2018 # 元号を西暦に変換（2018を加算）
end
```

### 出力結果

```
0006-12-05 00:00:00 -0700
```

## 期待する動作

"令和6年12月5日" を `2024-12-05` に変換し、`Time.strptime` の結果として以下のように出力されることを期待していました。

```
2024-12-05 00:00:00 -0700 #=> 期待していた結果
0006-12-05 00:00:00 -0700 #=> 実際の結果
```

## 原因の解明

問題の本質は、以下の2つのポイントにあります：

###  `p` がブロックの処理を待たずに出力している

私自身も「ブロックで値を変換しているのだから、それが反映されるだろう」と思っていました。しかし、`p` は `Time.strptime` の結果を出力しますが、渡されたブロックの処理が反映される前に出力が行われてしまうことが原因でした。

#### 処理の流れ

- `Time.strptime` は文字列を解析し、指定したフォーマットに基づいて `Time` オブジェクトを生成します。
- ブロックが渡されている場合、フォーマットで指定された値（例：`%Y` の「6」）をブロックに渡して変換を行います。
- ただし、`p` はメソッドの最初の戻り値を受け取り、ブロック処理の結果を反映しないまま出力することがあります。

その結果、期待していた「2024」ではなく「6」がそのまま使われ、「0006年12月5日」と解釈されてしまいます。

## 修正方法

### &#x20;`Time.strptime` の結果を変数に格納する

`p` がブロックの処理結果を反映できるように、`Time.strptime` の結果を変数に格納し、その後で出力します。

#### 修正版：

```ruby
t = Time.strptime("令和6年12月5日", "令和%Y年%m月%d日") do |y|
  y + 2018 # 元号を西暦に変換
end
p t
```

### `Time.strptime` の仕組み

- フォーマット指定子（例：`%Y`, `%m`, `%d`）に基づいて値を解析。
- ブロックが渡されている場合、対応する値をブロックに渡して処理。
- ブロックの結果が `Time.strptime` の処理結果に反映される。

## まとめ

### 問題の原因

- `p` がブロックの処理を待たずに、`Time.strptime` の初期状態（ブロック未処理）の結果を出力してしまったこと。

### 解決方法

1. `Time.strptime` の結果を変数に格納してから出力する。
2. ブロックがどのように値を受け取り、処理しているかを確認する。

Ruby の柔軟なメソッドである `Time.strptime` を正しく理解することで、日付や時間の処理をより効率的に行えるようになります。
ls -laで表示される内容を完全に理解する

##  はじめに
UNIX系のシステム（Macとか）でファイルやディレクトリを操作する際、ls -laコマンドを使ったことがある方は多いでしょう。しかし、表示される内容すべてを正確に理解しているでしょうか？この記事では、ls -laの出力を1行1列まで徹底解説します。

## lsコマンドとは
lsコマンドは「list」の略で、指定したディレクトリ内のファイルやディレクトリを一覧表示します。特に-laオプションを組み合わせると、隠しファイルを含めた詳細情報が表示されます。

例:
```zsh
$ ls -la
```
この出力を読み解くことで、ファイルシステムに対する理解を深め、効率的に操作できるようになります。
以下は典型的なls -laの出力例です。

```zsh
drwxr-xr-x   5 user group  160 Nov 30 12:00 .
drwxr-xr-x  10 user group  320 Nov 30 11:59 ..
-rw-r--r--   1 user group  123 Nov 29 14:23 file.txt
```
ここで、各列が何を意味するのかを順に見ていきます。

### 各列の意味とその詳細
#### ファイルタイプ
出力の先頭の1文字目はファイルタイプを表します。上記例だと上2行はディレクトリ、3行目はファイルであることがわかります。

|記号|意味|
|:--|:--|
|-	|通常のファイル|
|d	|ディレクトリ|
|l	|シンボリックリンク|
|b	|ブロックデバイス|
|c	|キャラクタデバイス|
|p	|名前付きパイプ|
|s	|ソケット|

#### 権限 (Permission)
次の9文字は、ファイルやディレクトリの権限を示します。例: `rwxr-xr-x`
先にそれぞれの文字の意味を表にしておきます。

|区分|意味|
|:--|:--|
|r	|読み取り可|
|w	|書き込み可|
|x	|実行可|
|-	|権限なし|

これらは3文字ずつ3つのグループに分けれます

所有者（最初の3文字）
グループ（次の3文字）
その他のユーザー（最後の3文字）
例:
rwxr-xr-x → rwx / r-x / r-x


所有者(rwx): 読み取り、書き込み、実行可能
グループ(r-x): 読み取り、実行可能
その他のユーザー(r-x): 読み取り、実行可能

この例だと、読み取りと実行は全ユーザー可能ですが、書き込みは所有者のみ許可されていることになります

#### リンク数
次の数字（例: 5）は、そのファイルのハードリンク数を表します。
ディレクトリの場合、この数値は中に含まれるエントリの数（自身、親、子ディレクトリを含む）を指します。

#### オーナーとグループ
その次の文字`user`と`group`はオーナーと所属グループを示しています
オーナー: ファイルを作成したユーザー（例: user）
グループ: グループに属するユーザー（例: group）

#### ファイルサイズ
その次の数字はファイルサイズです。
サイズはバイト単位で表示されます（例: 160）。

`ls -lh`オプションを使うと、人間に読みやすい形式（KB、MBなど）で表示されます。


#### タイムスタンプ
これは最終更新日時を示します。デフォルトでは、月、日、時刻の形式です。

#### ファイル名、ディレクトリ名
最後の列はファイル名、ディレクトリ名です。.で始まるファイルは「隠しファイル」と呼ばれます。ls -aを使うと表示されます。

#### おさらい
こちらの例の各行を改めて見てみます。
```zsh
drwxr-xr-x   5 user group  160 Nov 30 12:00 .
drwxr-xr-x  10 user group  320 Nov 30 11:59 ..
-rw-r--r--   1 user group  123 Nov 29 14:23 file.txt
```

|行|ファイルタイプ| 権限 | リンク数 | オーナー | 所属グループ | ファイルサイズ | タイムスタンプ | ファイル|
|:--|:--|:--|:--|:--|:--|:--|:--|:--|
|1|ディレクトリ|読み取り、実行は全ユーザー許可。書き込みは所有者のみ許可。|5| user | group |160byte|11/30 12:00| .|
|2|ディレクトリ|読み取り、実行は全ユーザー許可。書き込みは所有者のみ許可。|10| user | group |320byte|11/30 11:59| ..|
|3|ファイル|読み取りは全ユーザー許可。書き込みは所有者のみ許可。実行は全ユーザー不可。|1| user | group |123byte|11/29 14:23| file.txt|

### 特殊なファイル (. と ..)
上記の例を見て何だこのファイル？ディレクトリ？思ったかもしれませんが下記の通りになります。
これらもファイルシステムの基本的な構造を辿る際に非常に重要です。
`.`： 現在のディレクトリ
`..`：親ディレクトリ


### ファイルシステム内での変更
#### ディレクトリの権限を変更する
chmodコマンドを使って、ファイルやディレクトリの権限を変更できます。
755というのは所有者（最初の3文字）、グループ（次の3文字）、その他のユーザー（最後の3文字）の３つでそれぞれのグループの権限を表す数字になります。
よく使われる数字はこの辺です。覚えてもいいかもしれません。
`rwx -> 7`、`r-x -> 5`、`r-- -> 4`

```zsh
chmod 755 my_directory
// my_directoryの権限をrwxr-xr-xに変更する
```

#### オーナーやグループを変更する
chownコマンドでオーナーやグループを変更します。

```zsh
chown user:group file.txt
```

#### サイズ順に並べる
`ls -laS`でサイズ順にファイルを並べ替えることができます。

## まとめ
読んでいただきありがとうございます！
ファイルタイプで`d`と`-`以外中々お目にかかれないイメージがあるので、見かけたら少し興奮してみようかなと書いてて思いました😊
【JS基礎】デフォルトエクスポートはインポート時に{}を省略できる

# はじめに
プログラミング学習中の[@kat_log](https://twitter.com/kat__log "Twitter")と申します。
デフォルトエクスポートとそうでないエクスポートについてメモです笑

# デフォルトエクスポートの特徴
1. インポート時に`{` `}`で囲わない
1. インポート時に名前を変更できる

# サンプル
## デフォルトエクスポート
`import Button from ./compornent.js`
## そうでないエクスポート
`import { Button } from ./compornent.js`

![image.png](https://soco-st.com/wp-content/themes/socost/upload/11813_color.svg)

# おわりに
お読みいただきありがとうございました！
小さな気付き・復習でもアウトプットするのは良いんじゃないかと思い書きました！😂
We are setting things up. This process can take a few mintues.




# Get Hands-on with Related Object Fields on Dynamic Forms

+ [Stay tuned… We are setting things up. This process can take a few mintues.](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000J6SQz0AN)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/ed124f7e-e1d0-2bc2-5c17-81742c37e1ec.png)

:::note
Meanwhile I found the cause.

It seems that there were a few orgs linked to this Trailhead Challenge.

The one that was attempted to be launched was expired.

After spinning up a new org, it worked.

My product suggestion would be to include this in the error message that is displayed to the user.

その間に原因が分かりました。

この Trailhead Challenge にリンクされている組織がいくつかあったようです。

起動しようとしたものは期限切れでした。

新しい組織を立ち上げた後、それは機能しました。

私の製品提案としては、ユーザーに表示されるエラー メッセージにこれを含めることです。
:::

+ [【未公開】stay tune we are settings things up, this process can take a few minutes at the time of launch the challenges](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ifvP0SAI)
+ [I'm trying to complete a challenge, but the Playground is giving me an error, as shown in the image below. Who should I contact, or how can I resolve this issue?](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KCXsl0AH)

### Get Hands-on with Mass Quick Actions

+ [When I launch Join the Party at Flow Manor and Decipher the Code and Escape it shows Stay Tuned... We are setting things up. This process can take a few minutes. This page will auto-refresh when ready.](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000N1zt0AC)



# Join the Party at Flow Manor and Decipher the Code and Escape it

+ [When I launch Join the Party at Flow Manor and Decipher the Code and Escape it shows Stay Tuned... We are setting things up. This process can take a few minutes. This page will auto-refresh when ready.](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000N1zt0AC)

# 何か分からない

+ [stay tune we are settings things up, this process can take a few minutes at the time of launch the challenges](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ifvP0SAI)
なでしこ3製WebアプリをDockerでデプロイしてみよう

この記事は日本語プログラミング言語「なでしこ」 Advent Calendar 2024の4日目の記事です！（遅刻してしまいました・・。すみません > <）

なでしこでパパっと作ったWebアプリを、Dockerでコンテナ化してデプロイできたらとっても楽だな〜と思ったので、やってみようと思います！

## 今回Dockerでデプロイする物

WebSocketを使ったチャットアプリです。
WebSocketサーバー・HTTPサーバー・クライアントの全てをなでしこで記述しています。

https://github.com/avaice/fullstacknako

参考：https://news.mynavi.jp/techplus/article/nadeshiko-51/

折角なのでWeb上に公開したかったのですが、サーブするサーバーが用意できなかったので断念しました＞＜
気になった方はクローンして動かしてみてください。


---
今回は作ったものの説明は省いて、Dockerで動かすときの要点だけ書いていこうと思います！

## モジュールをローカルで管理するようにする

開発時と同じ環境を作りやすいように、`nadesiko3`などのパッケージは グローバルインストールではなく、ローカルにインストールします。

```bash
npm i nadesiko3 nadesiko3-websocket
```

ローカルインストールだと`cnako3`コマンドは直接呼び出せないので、`package.json`の`scripts`の中に起動コマンドを定義します。
```json:package.json
{
  "dependencies": {
    "nadesiko3": "^3.6.37",
    "nadesiko3-websocket": "^3.6.5"
  },
  "scripts": {
    "start": "cnako3 ./src/server.nako3"
  }
}
```

## Dockerfileを作る

```Dockerfile
FROM node:22

WORKDIR /app

COPY package.json /app

RUN npm i

COPY . /app

EXPOSE 3010
EXPOSE 3011
CMD ["npm", "start"]
```
なでしこ３はNode.JS上で作られているので、あらかじめNode.JSの環境が用意されたnode:22イメージを使います。

`package.json`とそれ以外のファイルで別々にコピーしています。Dockerでは、その行に到達するまでのコマンド・ファイル構成に変化がなければ、そこまでの処理をスキップして前回のビルドキャッシュを使用してくれるので、ビルドが高速化できます。今回の場合なら、`package.json`に変化がなければパッケージのインストール処理をキャッシュすることができるようになります。

## コマンドを実行する
```bash
# ビルド
docker build -t nadesiko3-on-docker .
# 実行
docker run -d -p 3010:3010 -p 3011:3011 nadesiko3-on-docker
```

これで、localhost:3010にアクセスするとチャットアプリが起動するはずです！

## 終わりに
今回作ったチャットアプリのようなWebサービスを作るのであれば、Dockerはなでしことも親和性が高そうです！
どんな環境でも、Dockerさえ動けば難しい環境構築をせず動かせる というのは結構ロマンですね🤭
How to Create a Responsive Website Using HTML5

![How To Create Responsive Website.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924530/4cb46e5b-a381-ba4c-468e-5b671da5f708.jpeg)
Creating a responsive website is essential in today’s mobile-first world. With users accessing websites from various devices, ensuring your site looks great on all screen sizes is crucial. In this guide, we’ll walk you through the process of building a responsive website using HTML5, the latest version of HTML that introduces new elements and attributes designed to improve web structure and semantics.
## Step 1: Understand the Viewport
The first step in creating a responsive website is setting the viewport, which controls the layout on mobile browsers. To do this, add the following meta tag to your HTML document’s head:
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
This tag ensures that your website scales correctly on different devices, providing a better user experience.
## Step 2: Use HTML5 Semantic Elements
HTML5 introduces several new semantic elements like `<header>`, `<footer>`, `<nav>`, and `<section>` that help structure your content meaningfully. These elements improve accessibility and SEO by making it easier for search engines to understand your content.
**Example:**
```diff_html
<header>
  <h1>My Responsive Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<section>
  <h2>Welcome to My Website</h2>
  <p>This is a fully responsive website built with HTML5.</p>
</section>
<footer>
  <p>&copy; 2024 My Responsive Website</p>
</footer>
```
## Step 3: Use CSS Media Queries
CSS media queries are essential for making your website responsive. They allow you to apply different styles based on the device’s screen size.
**Example:**
```diff_css
/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  nav ul {
    flex-direction: column;
  }
}

/* Styles for screens larger than 600px */
@media (min-width: 601px) {
  body {
    font-size: 18px;
  }
  nav ul {
    flex-direction: row;
  }
}
```
## Conclusion
Building a responsive website with [HTML5](https://dailydevdiet.com/html-semantic-elements/) is straightforward when you understand the basics. By setting the viewport, using semantic HTML5 elements, and applying [CSS](https://dailydevdiet.com/css-units-explained/) media queries, you can create a website that looks great on any device. Start experimenting with these techniques today, and make sure your website provides a seamless experience for all users.
## Suggested Reading:
[How to Use CSS Flexbox Layouts: A Complete Guide](https://dailydevdiet.com/how-to-use-css-flexbox-layouts/)
[New CSS Selectors in 2024: You Need To Know](https://dailydevdiet.com/new-css-selectors-in-2024/)
[Top 10 CSS Libraries You Should Know As Web Developer](https://dailydevdiet.com/top-10-css-libraries-you-should-know/)
[How to Center Element in div: A Complete Guide](https://dailydevdiet.com/how-to-center-element-in-div/!)
【AWS】約40時間の勉強でSAAを更新した話

# 1.はじめに
どうも、ARIの名古屋支社に勤務している愛知県民こと、
新藏（にいくら）と申します♪
(/・ω・)/

以下でも記事にしていますが、約3年前にSAAを取得しました

https://qiita.com/Aichi_Lover/items/ee804a1b1e70fe2f1eed

SAAの有効期限は3年間のため、先日SAAを更新してきました
**そこで今回はSAA更新の際の勉強法について**記事にしたいと思います！

SAAを更新する方、AWSに興味がある方の参考になれば幸いです
(*^^)v

# 2.SAAとは
まず初めに、SAAとは何かについてですが
SAAは「AWS Certified Solutions Architect – Associate」の略で、
**AWSの思想を理解し、AWS上にシステムを設計・構築する知識があることを証明する中難易度の資格**となります。

 参考URL
 
 https://cantabile.alhinc.jp/technology/9976/

# 3.使用した教材
では早速、教材を紹介します！

## 3.1.Ping-tの無料問題集 おすすめ度：★★★★★

https://mondai.ping-t.com/g/question_subjects

こちらはWeb上の無料問題集となります。
**この問題集を周回するだけで合格できる**くらいSAAの問題に特化しているので、
とてもおすすめです♪

**おすすめポイントは以下となります！**
* 無料
* 問題数が多い（約750問）
* 解説が付いている
* 解説に疑問がある場合はフォーラムで質問できる（他の人の質問も確認できる）
* 出題形式のカスタマイズが豊富
    * 分野を絞って出題
    * 未出題 or ミスした問題だけ出題
    * 10,20,30,...問単位で出題
    * 試験と同じ形式（130分、65問）で出題
    等々

:::note info
特に、出題形式のカスタマイズが豊富な点が素晴らしいと感じました・・・！
:::

**また、気になった点は以下となります。**
* 教科書の様なまとめはないので、章立てて順番に勉強するということはできない

## 3.2.Udemyの有料問題集　おすすめ度：★★★★☆

https://www.udemy.com/course/aws-associate/

Udemyの問題集も合わせて勉強していたので紹介します。
こちらはサブ教材という形で、最後の方の復習に少し使用しました。

**おすすめポイントは以下となります！**
* 各分野について、動画で説明が聞ける
* 各分野について、実際の画面が確認できる
* 模擬試験3回分の問題がついている
* 解説が付いている

**また、気になった点は以下となります。**
* 動画をすべて見ようとすると47時間くらいかかる

# 4.具体的な勉強方法とコツ
では、具体的な勉強方法と自分なりのコツについて説明します！

## ①Ping-tの問題集（試験レベルの問題以外）を解く：15時間
まずは、Ping-tの試験レベルの問題以外の問題を順番に解きました。
具体的には以下の流れで勉強しました。

分野を絞って10~20問単位で解く
→答え合わせと復習をする
→未出題・ミスした問題を対象に再度10~20問単位で解く
→答え合わせと復習をする
→・・・
→未出題が0問になり、ミスが5問前後になったら次の分野に進む
　
そしてすべての分野を解き終わったら、試験レベルの問題以外を対象に、
**ミスが0問になるまで**繰り返し解きました。

:::note info
コツとしては以下と思います。

* 分野を絞って問題を解いた
→複数分野で勉強すると似たサービスの違いが分からなくなると考えたため
* 10~20問単位で解いた
→隙間時間で実施したかったため
　ご飯を食べながら10問、お風呂に入る前に10問、寝る前に10問・・・
　という様な感じで解いていました！

* 1分野ごとの演習では、ミスが5問前後になったら次に進んだ
→最後にまとめて解いて、全体的な復習をしたかったため
:::

## ②Ping-tの問題集（試験レベルの問題）を解く：20時間
最後の総仕上げとして、試験レベルの問題を解きました。
具体的には以下の流れで解きました。

5~15問解く
→答え合わせと復習をする
→未出題・ミスした問題を対象に再度5~15問単位で解く
→答え合わせと復習をする
→・・・
→**未出題・ミスが0問になるまで**繰り返す
→模擬試験と同じ形式で2~3回解く

:::note info
コツとしては以下と思います。

* ①の演習よりも1回に解く量を少なくした
→1問1問が難しいので、問題量を少なくして、解説を読んで理解する時間を多くするため

* ミスが0問になるまで解いた
→すべての問題には最低1回は正解しておき、自信にしたかったため

* 最後に模擬試験と同じ形式で解いた
→試験と同じ時間でどのくらいのペースで解けば良いか把握するため
:::

ちなみに、最終的なPing-tの演習結果は以下の様になりました！

履歴を確認すると、**28回が①の演習で、33回が②の演習で合計61回演習していました。**
※合格後、少し経ってからキャプチャを取得したため、新しい問題が3問追加されています

|![010_Ping-t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/6ba1749c-a498-ee7e-c36b-461911a9dc42.png)|
|:--|

## ③Udemyの問題集を解く：5時間
サブの問題集としてUdemyの問題集も解きました。
こちらは3回の模擬試験を2周して、解説を読んだくらいとなります。

# 5.試験結果
そしていよいよテスト当日を迎えて・・・
**801点で無事合格することができました！**
(*^▽^*)

|![020_スコアレポート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/72a3e140-e2b3-a66d-31c9-5fd793de36b2.png)|
|:--|

:::note info
ちなみに、13時から試験開始で、試験終了直後は合否が分かりませんでした。
当日の21時くらいにスコアレポートが届きました。
:::

# 6.おわりに
ここまで読んで下さり、ありがとうございます！！！
(^^)

3年ぶりにAWSの資格勉強をして、懐かしかったです。
アップデートがされているサービスも複数あったので、とても勉強になりました！

また何か思いついたら記事にします♪
(:3_ヽ)_
なでしこでHTMLのtableを操作するプラグイン……を紹介したかった（没回）

# 日本語プログラミング言語「なでしこ」 Advent Calendar 2024
　閲覧ありがとうございます。この記事はなでしこアドカレの6日目の記事となります。

 https://qiita.com/advent-calendar/2024/nadesiko

　5日目の記事はnmtblueさんの「DISM SFCを なでしこｖ１で自動化してみる」でした。
　なでしこアドカレに初参加とのことでご参加ありがとうございます！（といってもなでしこ歴は私より長そうですが……ｗ）あんまり私はディスクのチェックとかしたことありませんが、やった方がいいのかな？また今度調べてみたいと思います。

https://nmtblue.hatenablog.com/entry/2024/12/01/173000



# はじめに注意！
　当記事は私がなでしこで作ったテーブルDOM操作プラグインを紹介する記事なのですが、記事を書いている最中に上位互換を発見したりバグが見つかったりしてしまいました。そのため、今回はいったん当記事を公開しますが、バグを直してから別日のアドカレとして改めて紹介したいと思います。
　ということでこの記事はただの日記です。いいのかな、何一つ得られないQiitaの記事を投稿するのは……。
　それでもいいよ、という人はありがとうございます。ぜひ見ていってください。そうでない方はバグを直してからお会いしましょう。



# 「お久しぶりです」と表示
　去年の記事を読んでくださった方はお久しぶりです。そうでない方ははじめまして。ユメミノウツツと申します。
　今年もなでしこアドカレに参加させていただきました……が、既に12/7の2時です！間に合っていません！ごめんなさい！！
　28時くらいには間に合うように今から頑張りたいと思います。雑な記事がもっと雑になってしまいますが、許してくださいませ……。



# テーブルDOM操作プラグイン
　今年の3月になでしこさんで作ったプラグインになります。リンクはコチラ↓
 
 https://n3s.nadesi.com/id.php?2750

 サンプルプログラムはコチラ↓

 https://n3s.nadesi.com/id.php?2751

　なでしこ3にはデフォルトで「テーブル作成」という関数があります。これは二次元配列 or CSVからtableのDOMを作ってくれる関数です。これは表を作ってくれる便利な関数ですが、その一方で表を書き換える関数がありません**でした**ので、動的に表を書き換えるためのプラグインを作りました。
 
　……もう一度いいます。ありません**でした**。
　この記事を書きながら調べてると、命令一覧に「テーブル更新」「テーブルセル更新」という命令が追加されています！どうやら3週間前に追加された、できたてほやほやの関数みたいです。
　あれ？ではこの記事の意味は……？

　……まあ、なにはともあれ一応説明させていただきます。以下、プラグインの説明です。といっても貯蔵庫のソースにだいたい書いてあるとは思いますがね。

 ## （TABLEをCSVで）テーブル書き換え
　tableDOMとCSV形式の文字列を引数に取り、tableDOMの中身をそのCSVが示す表に書き換える関数です。**テーブル更新で同じことができます。**
　正直、まあそれ以外の説明はありません。テーブル更新はCSVにも二次元配列にも対応しているので、そっちの方が高機能ですし……。

## （TABLEを）テーブル二次元配列化
　tableDOMを引数に取り、その中身を二次元配列にして返す関数です。
　こちらは今のところ類似機能の関数は実装されていないかな？と思います。

 <!--
 　使い道ですが、まずシンプルに、表を二次元配列として取得することができます。テーブル作成でDOMを作っている場合は大抵その元となるCSVか二次元配列が変数に残っているとは思いますが、もし残っていない場合はこれで再取得することができます。取得した二次元配列を書き換えたら、テーブル更新してあげることにより、表を動的に書き換えることができます（テーブル書き換えはCSVにしか対応していないので注意です……）
　また、~~試していませんが~~DOM要素ID取得と組み合わせることで、HTMLの表をプログラムに取り込むことができるかなと思います。
-->

　……でしたが、**こちらの関数今バグで使えません。**
　ver3.5.1では使えたのですが、最新verでは動いていないことを確認しています。原因も突き止めていまして、htmlを力業でパースしたのがうまくいっていないことがわかっています。
　はじめに注意でも書いた通り、今絶賛バグ直し中なのでそれまでは使用をお控えください。

　完成形（というか本来想定していた動作）はサンプルプログラムから見ることができます。tableDOMを二次元配列にしてそれを表示しています。

# おわりに
　いかがでしたか！？このプラグインが全く機能していないことがわかりましたね！
 
　……いや、本当にすみません。この記事、プラグインの2つの関数のうち、上位互換が公式から登場したものと、最新版ではバグって動かないものを紹介したという、本当に何の価値もない記事になってしまいました。
　次のアドカレまでにはテーブル二次元配列化のパーサーを書き直してちゃんと動くところをお見せしたいと思います……それまでしばしお待ちください……。

 　それでは、次の記事でお会いしましょう。アドカレ2024の間には頑張って出したいと思います。お相手はユメミノウツツでした！

　本当に紹介する記事はコチラ↓
 （まだできていません🙇‍♂️）
初参加したUiPath Friends Festival 2024の感想

# 今回の記事の概要
初めて参加したUipathFes2024で聴講したセッションの感想を書いていこうと思います。

ページの構成は
セッション名
スピーカーのお名前
トーク名(LTのみ)
感想

## ユーザーLT前半
**佐々木和夫**さん
**社労士事務所の気まぐれAutopilot for Developers～Perplexity、claude3.5添え～** 　
Autopilotに入力するプロンプトを別のAI(PerplexityとClaude3.5)に生成させる方法についてのプレゼンテーション 複数のAIを組み合わせてプロンプトをブラッシュアップするのは、お話を聞くまで頭に浮かんでこなかったので、新たな知見を得られてありがたかったです。
資料も見やすかったので参考にしたいと思います。

## ユーザーLT後半
**朝倉雅文**さん
**私が来た!!リース会社向けのRPA開発経験談-失敗編-**
朝倉さんが実際に体験され、その際の経験を基に開発におけるポイントをお話ししていただきました。
・Configファイルの活用
・処理に応じたアクティビティ名の適宜変更
・不具合調査と修正箇所の特定の為にログ出力を使用する事の重要性等
基礎的ですがとても大切なお話を聞けて、
開発サポートの際に改めて周知して開発者に意識付けしていかないといけないなと感じました。

**はっしー**さん
**Clipboard AI をkintoneで活用してみた**
UiPath ClipboardAIとkintoneを組み合わせた事例の紹介をしていただきました。
ClipboardAI、kintoneどちらも詳しく知らなかったので、ソリューションについて知れて良かったのが一つ、併せてkintoneと組み合わせる事による効率化の手法についてもきっかけを知れたで、適宜勉強してみようと思います。

**ターメリック高木**さん
**UiPathでAIを活用しよう**
UiPathで画面を作ってチャットボットのようなことをしてみたい。から始まったUiPathとAIの組み合わせ
UiPath AI Trust LayerとURの組み合わせの可能性を知れました。
UiPathで完結するAIというのに凄く魅力を感じた。
引き続き調べてAI Trust Layerについて理解を深めつつ、AIを用いた業務効率化についても注視していきます。

**yhakiai**さん
**UiPathのテストツールとしての可能性について**
Autopilotを利用して要件の不足部分の補足、作成した要件を基にテストケースの作成も可能とのこと、
Autopilotの適用範囲についても可能性を感じました。
プロンプトによるとも思いますが正直な所、不足した要件の補足は抜けてた要件の再確認にも一部活用できそうで別途試してみようと思いました。

**カワシマ**さん
**SAPとUiPathの融合: Fit to Standardの理想と2027年の現実**
SAP GUIのRPA動作の品質管理の部分で、GUI Scriptingが無効の場合のSend Hot Keyの連発や、環境変更時の影響の読みづらさ、イレギュラーな警告等開発時に苦しめられた事を思い出して内心頷きまくってました。

##  UiPathセッション: Transform with AI
**UiPath 夏目 健さん**
24.10の最新情報としてAI系の製品の紹介がありました。
各製品のリリース情報をざっくりまとめると
　Agent Builder：2025 初旬　プレビュー 一般公開予定
　Healing Agent：2024 12月　プレビュー 一般公開予定
　Autopilot for Everyone：リリース済

各製品の機能
　Agent Builder：AIエージェントの開発ツール
　Healing Agent：ワークフローの自己修復機能
　Autopilot：テキスト(自然言語)からワークフロー、式、コードを生成可能
 
 紹介いただいた情報を聞いたときは、
 <dt>Agent Builder</dt>
 <dd>ポリシー文書を参照させたり、プロンプトを工夫する事で色々な効率化に使えそう</dd>
 <dt>Healing Agent</dt>
 <dd>エラー発生時に自己修復による実行の継続で、不意の異常終了の頻度の低下</dd>
 <dd>エラー内容の解析、修復内容の提案を行わせる事による改修速度の向上</dd>
 <dd>ある程度のエラーに対しては道筋を示すレベルだと思うが修正工数の低減が見込めそう</dd>

と思いました、色々使い道ありそう。

 ## Autopilot for Everyone やってみた
 **chuki**さん、**sao**さん
 Autopilot for Everyoneの機能と、使用感を説明いただいた。
 <dt>Autopilot</dt>
 <dd>RAGの際にSharepointに格納されたファイルを使用したドキュメントのインデックス化が可能</dd>

:::note info
※2024/11月末時点ではEnterprise版のみ使用可能
　Community版は使用できない為注意が必要
:::
 <dd></dd>

 初参加したUiFesの感想は以上となります、色々と知識が不足している部分があるので、Uipath Academy等を使いながら学習を続けつつ他のユーザーの方々と交流して理解を深めていきたいと思います。
【Minecraft】Discord認証で身内だけサーバに入れたい

# メンバー認証の必要性
ハマクラでは、新規メンバーがログインできるようになるまでの所要時間という観点からホワイトリストを導入していなかった。そのため、IPが分かりさえすればと全世界のクラフターがログインできてしまう。それに起因する思わぬ出会いもあったわけだが、入ってくるのが必ずしもいい人とは限らない。

# Discordと連携したい
ハマクラではDiscordを用いてコミュニティの運営を行っている。Discordサーバーに入り所属などが確認でき次第ロールが付与される。その仕組みを利用してメンバーであることを認識し、Minecraftのアカウントと紐付けできれば都合が良い。
それが可能になりそうなプラグインを見つけた。[DiscordSRV](https://github.com/DiscordSRV/DiscordSRV)だ。導入するとゲーム内チャットとDiscordのチャットを連携したり、MinecraftのアカウントとDiscordアカウントを連携させたりできる。

# 導入
他のプラグインと同様に`plugins`ディレクトリにjarファイルを入れて起動すると`plugins/DiscordSRV`に設定ファイルなどが生成される。
botの設定は[このサイト](https://mcspigot.com/post-172/)を参考にした。
主要な設定は`config.yml`に記述されている。チャット連携機能などは必要無いため無効にした。必要に応じて`true` `false`を書き換えることで有効/無効を切り替えられる。
今回必要なアカウント連携機能は`linking.yml`に記述されている。
```yaml:linking.yml
Require linked account to play:
  Enabled: true
```
冒頭の`Enabled`を`true`にすると有効化される。
```yaml:linking.yml
# Optionally require people to not only be linked but also to have a one of or all specified roles like a Twitch sub role

Subscriber role:
    Require subscriber role to join: true
    Subscriber roles: ["1234567890123456789"]
    Require all of the listed roles: false # when false, only one of the above roles is required
    Kick message: "&cYou must be subscribed on certified to be able to play."
```
所属確認済みのメンバーにはロールが付与されるようにしているので、そのロールを持ったメンバーだけがbotに認証コードを送ることができるようにしたい。
それを可能にする設定が`Subscriber role`だ。ロールIDを入れておくとそのロールを持ったメンバーにしか認証を通せなくなる。複数のロールを指定することもできる。複数のロールのうち全て必要なのかどれか1つだけでいいのかは`Require all of the listed roles`で指定できる。

# 認証
実際に認証してみる。
導入後にMinecraftサーバにログインすると以下のような表示になる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370590/f40a4932-dad9-9e10-74eb-3abfde11ce89.png" width="600px">
「『8721』という番号をbotに送れ」という指示が読み取れる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370590/29bd1317-597e-6c18-3c19-ff737ec552f5.png" width="500px">
送ってみると、認証された。これでログインできるようになった。
ワンクリックでモニターの電源を落としたい話

# はじめに
寝るときはPCをシャットダウンさせて寝る人もいればスリープにして寝る人もいます。
では何か処理を待って寝るときはどうしたらよいでしょうか

もちろんシャットダウンなんかしたら処理は止まりますし、スリープにさせても同様です。
じゃあそのままモニターが煌々ときらめく中眠りにつけるかと言われるとまあ無理でしょう

windows君は優しいので操作が無かった場合は自動でモニターの電源を消してくれる機能がありますが些か精度が悪く、短い時間に設定するとちょっとした時間でもすぐに消えて不便です

物理的にモニターの電源を切るにしても2枚以上あると不便です

要は自分のタイミングで簡単に画面だけオフにしたいよねっていう話

# 結論
以下のコードを
新規作成→ショートカット→ショートカットの項目の場所に登録するだけ
```powershell
powershell -Command &{sleep 2;sal o New-Object;$f='System.Windows.Forms';Add-Type -AssemblyName $f;$m=(o \"$f.Message\")::Create((o \"$f.Form\").Handle,274,61808,2);(o \"$f.NativeWindow\").DefWndProc([ref]$m);}
```
# 解説
```powershell
powershell -Command &{ #powershellをショートカットから呼び出してコマンドを実行
sleep 2;    #2秒待つ(クリックした瞬間に画面が消えるのは困る)
sal o New-Object;    #`New-Object`にエイリアス`O`を設定
$f='System.Windows.Forms';    #windowsフォームを操作するための名前空間`System.Windows.Forms`を指定する
Add-Type -AssemblyName $f;    #指定した名前空間をスクリプトに取り込んで使用可能にする。
$m=(o "$f.Message")::Create((o "$f.Form").Handle,274,61808,2);    #windowsのメッセージを作成(後述)
(o "$f.NativeWindow").DefWndProc([ref]$m);    #`DefWndProc`メソッドを使ってシステムに送信
}
```
# windowsにおけるウィンドウメッセージとは
簡単に説明するとwindowsとアプリケーションの通信を行う仕組みのこと
例えば、
- キーボード入力
- マウス操作
- レンダリング要求
などに対して動作するアプリケーションを構築できる
### 主なウィンドウメッセージ
ここに書く意味もあまりないと思うのですが申し訳程度に書いておきます
もっと詳しく知りたい方はこちらをどうぞ

https://learn.microsoft.com/ja-jp/windows/win32/winmsg/about-messages-and-message-queues#system-defined-messages
| メッセージコード | 内容 |
|:-:|:-:|
| WM_CREATE | ウィンドウが作成されたとき |
| WM_DESTROY | ウィンドウが閉じられるとき |
| WM_PAINT | ウィンドウが再描画されるとき |
| WM_KEYDOWN | キーボードのキーが押されたとき |
| WM_LBUTTONDOWN | マウスの左ボタンが押されたとき |
| WM_SYSCOMMAND | システムコマンド(Ex.ウィンドウの閉じるボタン等)

今回使用した値は以下の通り。
- 274 (0x112) : WM_SYSCOMMAND (システムコマンドを送信)
- 61808 (0xF170) : SC_MONITORPOWER (モニターの電源操作)
- 2 : SC_MONITORPOWERのパラメーター 
  - -1 : ディスプレイの電源をON
  -  1 : ディスプレイを低電力状態に
  -  2 : ディスプレイをOFF

  
# 最後に

アドカレ公開が予定より3時間遅れてしまいましたが許してください...
ちなみにshellスクリプトを組んだのはこれが初めてです(たぶん)
誰にでもできるゼロから始めるアバターの使い方

KDDIにまつわる多彩な仲間たちが集まる[KDDI エンジニア＆デザイナー Advent Calendar 2024](https://qiita.com/advent-calendar/2024/kddi)、3日目の記事を書かせていただきます！

## アバターをどう使っているか

みなさん、アバター使ってますか？  
例えばVRChatのようなメタバースで使っている、あるいはバーチャルYouTuberとして活動するときに使っているという方は多いかと思いますが、自分の場合はZoomなどで開催するリモート勉強会などのコミュニティ活動を中心に使っています。  
具体的にはこういう姿でコミュニティ活動しています！  

![Example](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/6d8a51fa-a333-9515-cb4f-0810f078d11d.png)

## アバターを使うことによるメリット

コミュニティ活動の面ではかなりメリットがあると感じています。  

### カメラオンしやすい

リモート勉強会に参加するとき、寝起きだから・部屋が散らかっているから…みたいな理由でカメラオフすることがなくなったので、カメラオンにできる状況が圧倒的に増えました。  
きっと表情やジェスチャーを通じてコミュニケーションの質が上がっているはず…！？  
寝坊しがちな土曜日の朝、毎週欠かさず勉強会を開催しているのですが、継続できたのはこれのおかげもあります。  

### 目立つ

やっぱ目立ちますよね。  
でも、きっと来年には世界がアバターだらけになって目立たなくなることでしょう。  
目立つのは今だけ！  

## アバターを使うことによるデメリット

フェアに語るのであれば、デメリットあるいは賛否両論なところもあるかなーと思います。  

### リアルとバーチャルが一致しない

オフラインイベントに参加したとき「誰！？」ってなりがち。  
自分の場合、見た目は変えても声はそのままなのでそれで気づいてくださる方もいます。ありがとうございます。  
メリットで書いた通り「あのアバターの人ねー」と覚えてくださることもあるので、一長一短かもしれません。  

### PCパワーが必要

推奨スペックはツールによるのですが、何を使うにしてもファンがギュンギュン回ります。  

### 離席すると荒ぶる

だいたい動きが停止するだけなんですが、たまに荒ぶることがあります。コワイ！  

![Araburu](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/b90835d8-726f-af0e-13c0-d23b89205569.png)

## こんなツールでやっているよ

たまに「どういうツールでやっているんですか？」と聞かれるのでちょっと整理してみました。  
無償ではないのですが廉価で初心者でも簡単にできるチョイスだと思っています。  

どんなツールを使うとしてもおおよその流れとしては以下のような感じになります。  

![おおよその流れ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/c3185102-1879-697a-e2bb-1e69984bf512.png)

### アバター作成ツール

3Dキャラクター制作ソフトウェアである[VRoid Studio](https://vroid.com/studio)を使っています。  
パーツを組み替えてカスタマイズすることでアバターを作成していくのですが、パーツが豊富なのでかなりオリジナリティが出せますよ！  

https://vroid.com/studio

> 制作した3Dモデルデータやテクスチャ・アイテムデータは、商用・非商用を問わずさまざまな用途に利用可能です。

ということで権利的にも安心ですね。[^1]  

[^1]: 他のユーザの方が配布しているパーツなど、ライセンス条件に関して特別の表記があるデータを使う場合には注意が必要です。

![VRoid Studio](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/427442d7-8587-00e1-5696-b01eb90864f7.png)

### モーションキャプチャー

自分の表情や手の動きをアバターに反映させるためのツールです。  
色々なものがあるのですが、前述のVRoid Studioは3DモデルデータをVRMファイルというフォーマットで出力してくれるのですが、このVRMファイルに対応していて、設定が簡単な[Webcam Motion Capture](https://webcammotioncapture.info/ja/)を使っています。  

https://webcammotioncapture.info/ja/

月額199円かかりますが、指の一本一本までしっかり動いてくれるので十分お安いなーと毎月感謝しています。  

![Webcam Motion Capture](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/b10c7edb-f2dd-30e0-4e84-758aa759c0c2.png)

### モーションキャプチャーした動画をカメラ映像として使う

前述のWebcam Motion Captureは基本的にウィンドウ内でアバターを動かしてくれるだけなので、これをZoomなどで認識できるようにする必要があります。  
こちらはド定番の[OBS Studio](https://obsproject.com/ja)を使っています。  

https://obsproject.com/ja

OBS Studioでウィンドウをリアルタイムにキャプチャして、仮想カメラを経由することでモーションキャプチャーした動画をZoomなどに流し込むことができます。  

![OBS Studio](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/69e71904-cb4d-a57b-5108-4d83afc9f867.png)

![Zoom](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/3f52555c-391d-1741-98cb-5d03da3db7ab.png)

## まとめ

例えばモーションキャプチャーだけでも今回紹介したもの以外にもたくさんの製品がありますし、アバターも完全オリジナルのものを作成しようとするとまさに「沼」なのですが、まずやってみよう！というレベルなら本当に簡単に使えますよ！  
ぜひ皆さんチャレンジしてみてください。
React19がリリースされたので、フォーム周りの機能をまとめる

## はじめに
[React19](https://react.dev/blog/2024/12/05/react-19)がリリースされました。React19では`form`要素に関わる変更が多くありました。

`react`では`useActionState`、`useOptimistic`APIの追加、`react-dom`ではHTMLの`form`要素が組み込みコンポーネントとして動作するようになり、`useFormStatus`APIの追加が行われました。

これらのAPIを組み合わせるとどのような世界が見えてくるのでしょうか。この記事ではこれらのAPIの説明と組み合わせて利用した姿を紹介します。

## form
`form`は`react-dom`によって標準の`form`を強化されたコンポーネントとなっています。
後に紹介する`useFormStatus`のサポートの追加や、`action`にURL以外の関数を渡せるようになりました。
直感的な使い心地は変わりませんが、`action`の使い方は標準から外れていること、`react-dom`のAPIのためにパッチが当てられていることは頭の片隅に置いておくと良いかもしれません。

## useActionState
`useActionState`は状態とそれに対する操作をセットで扱うAPIです。
引数として操作と初期値を受け取って、状態と操作と操作が完了するまでの待機状態を返します。
```ts
// 同期的なaction(isPendingは常にfalse)
const [count, action] = useActionState(
  (prevCount, formData) => {
    const incrementCount = Number(formData.get('count') ?? 0);
    return prevCount + incrementCount;
  },
  0,
);

// 非同期的なaction
const [count, action, isPending] = useActionState(
  async (prevCount, formData) => {
    const incrementCount = Number(formData.get('count') ?? 0);
    await updateCount(prevCount + incrementCount);
    return prevCount + incrementCount;
  },
  0,
);
```

https://codesandbox.io/embed/cx5d63?view=editor+%2B+preview&module=%2FApp.js


`useActionState`は任意で第3の引数を持ちます。第3引数には操作後に遷移するURLを渡します。
JavaScriptが完全に読み込まれたときは何の効果もない引数ですが、操作が完了してもJavaScriptが読み込まれる前の段階であれは第3引数のURLに遷移します(JavaScriptの伴う操作の場合も効果はないです)。

## useOptimistic
`useOptimistic`は状態の楽観的更新を行うためのAPIです。
引数として楽観的更新を行う状態とそれを楽観的に更新する関数を受け取って、楽観的な更新を行った後の状態と楽観的な更新を行う関数を返します。

```tsx
// optimisticUserは楽観的更新を行った状態
const [optimisticUser, addOptimistic] = useOptimistic(
  // 元となる状態
  user,
  // 楽観的更新をどのように行うかの関数
  // addOptimisticはuserが挿入された関数
  (prevUser, name) => {
    return {
      ...prevUser,
      name,
    };
  },
);
```

https://codesandbox.io/embed/26frq8?view=editor+%2B+preview&module=%2FApp.js

## useFormStatus
`useFormStatus`はreact-domに追加された、直近の`form`のステータスを返すAPIです。
返す値は、`form`の待機状態、`form`の送信するデータ、`form`の送信するHTTPメソッド、`form`に登録した操作を返します。

```ts
const { pending, data, method, action } = useFormStatus();
```

https://codesandbox.io/embed/6k24hr?view=editor+%2B+preview&module=%2FSubmitButton.js

## 組み合わせる
これまで紹介してきたAPIを組み合わせて簡単にユーザー情報を編集するフォームを作ります。

https://codesandbox.io/embed/h2nw3l?view=editor+%2B+preview&module=%2FApp.js

それぞれが綺麗に噛み合って、楽観的な更新等のリッチな機能かつ完結なコードになったかと思います。React18以前で、同様の実装を行うとより恩恵を感じやすいと思うのでぜひ試してみてください。

## おわりに
React19でフォーム周りのサポートが充実したことで、フォーム周りのコードが完結に扱いやすくなりました。
複雑すぎるフォームではライブラリの助けを借りたいこともありそうですが、多くのフォームではReactの標準APIで十分な対応が可能そうに感じました。
さらに、JavaScriptなしでの動作も定義しやすいようなAPI設計となっているので、これからの世界では積極的に利用していきたいです。
TableauのLookUp関数とPreviousValue関数の違いを体感した件

# TableauのLookUp関数とPreviousValue関数の違いを体感した件

## 背景  
仕事で人工管理用のGSSをTableauで可視化する機会があり、その中で **LookUp関数** と **PreviousValue関数** の特性を体感しました。この経験を在庫管理など他の分野にも転用できると考え、備忘録として記事にまとめます。

---

## 実現したかったこと  
以下の4つの要素を **縦軸** に、年月を **横軸** にしたクロス表およびグラフを作成したいと考えました。  
1. 前月繰越工数  
2. 当月供給（supply）工数  
3. 当月需要（demand）工数  
4. 空き工数  

計算式は以下の通りです：
~~~
前月繰越工数 + 当月supply工数 － 当月demand工数 ＝ 空き工数
~~~
ただし、以下の条件を考慮する必要がありました：
・1ヶ月目 には「前月繰越工数」は存在しない。
・前月が赤字の場合、「前月繰越工数」は0とする。

---

## 試行錯誤

### 1. LookUp関数での挑戦

初めに、LookUp関数 を使い「前月繰越工数」を取得しようとしました。
~~~
LOOKUP(SUM([工数]), -1)
~~~
この関数は、前月の値を取得できるものの、循環参照 が発生し、計算が成立しませんでした。

### 2. 表計算機能での挑戦

さらに、表計算を使い前月の値を計算に含めようとしましたが、赤字時は0にする条件 を設定できず断念しました。

### 3. PreviousValue関数の発見

そこで、PreviousValue関数 を試すことにしました。この関数を使うと以下が実現できます：

1ヶ月目 は指定した初期値を返す。

2ヶ月目以降 は1ヶ月前の計算結果を利用する。


具体的には以下のような計算フィールドを作成しました：

~~~
IF FIRST() = 0 THEN 0 
ELSE 
    PREVIOUS_VALUE(0) + [当月supply工数] - [当月demand工数] 
END
~~~

これにより、条件を満たした「空き工数」の計算が可能となりました。



### 4. LookUp関数の表示への有用性必要性

一方、「前月繰越工数」そのものの表示には LookUp関数 が必要でした。
PreviousValue関数 では、1ヶ月目の値を2ヶ月目以降も保持してしまうため、前月の値を正しく取得するには以下のような LookUp関数 が適しています：
~~~
LOOKUP([空き工数], -1)
~~~


## まとめ

Tableauで「前月データの取得と計算」を行う際には、用途に応じて関数を使い分ける 必要性を体感しました：

### LookUp関数：特定の月の値を表示する際に便利。

### PreviousValue関数：ループ処理のような累積計算に適している。


これらの関数を適切に組み合わせることで、複雑な計算ロジックを実現できます。同じ課題に直面している方の参考になれば幸いです！
Plannerを救いたい with Power Automate

## 緒言
前回書いた[Plannerを救いたい with Power Apps](https://qiita.com/meccha__eeyan/items/de666b3e70b357996eca)の続きです。前回はPower Apps ⇒ Planner連動について書きましたが、Planner ⇒ Power Apps連動はPower Automateの出番！かな？

## Planner ⇒ Power Appsの連動がなぜ必要か？
前回記事でApps側でタスク新規作成/更新/削除したら即座にデータソースのSharePoinntリストとPlannerの同期がとれる仕組みは構築済。利用者がAppsだけを使ってくれるように徹底できたら良いがそんなことは望めない。よってPlanner側でタスク新規作成/更新/削除されてもSharePointリストとの整合を担保する必要がある。
### 1. Apps使わずPlannerでタスクが新規作成された時
この対処は簡単で方法は2通り。`When a new task is created`トリガーでSharePointリストに同じ`TaskID`のレコードが無いか判定し、無ければ**Plannerタスク側を削除してしまう**かまたは**SharePointリストにレコード追加する**か。下図の例は前者の削除パターン。削除したことを理由とともにユーザーへ通知。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/59b3de5c-bd00-415f-b934-1851a8b8fbaa.png)

### 2. Apps使わずPlannerでタスクが更新や削除された時
新規作成と違って更新や削除はPlannerコネクタに"更新された時"みたいなトリガーが用意されてない。。。ということで、`Recurrence`トリガーで即時性は無いけど定期的に強引に同期をとる。。。SharePointリストのレコード一覧を取得してそれぞれに格納された`TaskID`からPlannerデータ取得してSharePointリストを更新する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/8ced4c9b-9702-f280-1f96-6db8d7231e12.png)

チームでPlannerを使ったことがある方は経験されたことがあるんじゃないかと思いますが、**完了じゃなく削除**されちゃって「あれ？何かタスク減ってね？」と思っても**ごみ箱も無いので復元できず**・・・その対策として`Get a task`が失敗した時のスコープの中で**SharePointリストからPlannerタスクを復元**する処理を実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/513825f3-fe2d-1bb8-b6f5-10edd5656c54.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/af2278d5-9f4f-46d1-335c-98125d7ec730.png)
↑の`Get a task`が失敗した時のスコープがスキップされた時、すなわち`Get a task`が成功した時のスコープ内ではPlannerタスクの内容をSharePointリストに反映させる処理を実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/f41d0324-187b-4505-7a84-e6c94583791a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/30b1d95c-e6d4-fac9-af7b-62a4c6625491.png)
最後の**配列変数初期化は忘れてはいけない**。。。絶対。。。

## 結言
かなり強引にPower AppsとPower AutomateでPlannerを救ってみました。どこかにある理想のタスク管理を探し求め続けます。。。
あと最近はNew Designer大好きです。
転職活動でやっておいて良かったこと

# はじめに

「転職活動して気づいた「これをやっていれば.../やってよかった」をシェアしよう by 転職ドラフト Advent Calendar 2024」の記事として、やっておいて良かったことをシェアしたいと思います。

# 経歴

2回転職を経験しています。
- 1回目(10年ほど前)：ゲームプログラマー → SES企業
- 2回目(昨年)：→ SES企業 → メガベンチャー
  
今回は2回目の転職経験をベースに記事を書きます。
転職理由については内容と関係しない部分のため割愛させていただきます。


# 転職を成功させるためにやっておいた方が良いことは？

いきなりですが本題です。
転職でやった方が良いことは様々ありますが、転職するしないに関わらずやっておいた方が良いこととして月並みではありますが、**「職務経歴書のメンテナンス」** を挙げます。

理由は、
- 自身のキャリアの見つめ直しになる
- やりたいことを見つけるヒントになる
- 転職時の書類選考や面接で重要視される

際立ったスキルでもない限り、しっかりと仕事に向き合うのが転職成功への近道です。
職務経歴書のメンテナンスはそれを実現するのに適した方法です。

# 職務経歴書に何を書くべきか？
  
具体的に職務経歴書をどのように書くのが良いか、少しだけ触れたいと思います。
  
担当プロジェクトと担当フェーズを時系列で並べるだけでは効果的ではありません。以下のポイントを意識して深掘りすることが大切です。
- どんなプロジェクトだったのか
- 何を達成できたのか
- 何を感じたのか

ということを意識して深掘りしておくことが大切です。
職務経歴書に全て書かなかったとしても、考えておくことで自身のキャリアを見つめ直すことができ、面接で振られた時も話をしやすくなります。

## サンプル
以下のプロジェクトを例として見ていきます。
> 社内向けシステムのエンハンス開発
> 担当：基本設計、詳細設計、実装、テスト

- どんなプロジェクトだったのか
    - 社内向けシステムの機能追加・改善を担当
    - 急な仕様変更対応や、短納期での開発が求められた
:::note info
面接で聞かれた時の話題にできる
:::
- 何を達成できたのか
    - 今までマトリクスで手動実行していた単体テストを自動実行できるようにした
        - これでリグレッションテストの工数を短縮でき、品質も向上できたのがプロジェクト達成の大きな要因になったと思う
:::note info
職務経歴書にアピールポイントとして記載できる
> 社内向けシステムのエンハンス開発
> 担当：基本設計、詳細設計、実装、テスト
> 取り組み：
> 単体テストを手動から自動に移行することで、テストの効率化と品質向上を実現した。
> これにより、テスト工数を20%削減できた。
:::
- 何を感じたのか
    - このプロジェクトがあったから、自動でチェックする機構を構築することの重要性を認識した
:::note info
自身のやりたいことが見え、これからのキャリアの指針になる
:::

上記は出来過ぎですが、「このプロジェクトで詳細設計の書き方がわかった」とか些細な内容でも良いので、振り返っておくことが大切です。
仮に何も深掘りできる内容がなかったとしても、「もっとこういうことをやった方が良いかも...」と今後の指針にすることができます。

# 最後に

中途半端な内容になってしまいましたが、「職務経歴書の書き方」講座ではないので切り上げたいと思います。
少しでも参考になる部分があれば幸いです。
初心者の為の計算・公式計算プログラミング　＜C言語＞

# -1.**～きっかけ～**
プログラミングについて書いてみようと思い書いてみることにしました！

# 0.**～初めに～**
プログラミングをこれから勉強する、もしくは習いたての皆さん、
プログラミングで計算をしてみたい、と思ったことはありませんか？

そんな皆さんの為に、サンプルプログラミングを作成してみました！
今回は四則演算、三角形、四角形、円、台形、１次関数の計算プログラミングです！
良ければ参考にして頂ければ嬉しいです！

# 1.**～四則演算～**
![スクリーンショット 2024-12-07 011806.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/4853205f-5075-076f-90f8-134b5229b16e.png)
![スクリーンショット 2024-12-07 011932.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/6341cf28-4748-a81a-ff91-b28c5d7cc3dd.png)
四則演算のプログラミングはこのような感じになります！
途中に[\n]がありますが、これは[改行]をするときに用いります！

printfで文字を出力ができるのと、scanfで文字を任意で指定することができます！
%dというのは整数を10進数で出力するコマンドです！
8行目、&aにすることでaを出力することが可能です！

剰余の計算では[%]を用いります。
剰余は簡単に言えばあまりですね！今回の場合は5/4 = 1 ... 1 で出力されるのは1になります！

これを用いて、公式計算のプログラミングを紹介していきます！

# 2.**～三角形～**
![スクリーンショット 2024-12-07 014603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/c4b5b8fd-039f-cb09-d9fe-4e46ffc842b4.png)
![スクリーンショット 2024-12-07 014712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/1640640d-b00f-dad6-344b-d3090fe3b389.png)
三角形のプログラミングはこのような感じになります！
先ほどの四則演算と９割型同じ流れで作ることができます！
a * b / c については、
(a * b) / c と書いても支障はないので
どちらで書いても良いです！

# 3.**～円～**
![スクリーンショット 2024-12-07 015338.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/f27ffd9c-5881-0d6f-19c9-d37c4ec4fe2b.png)
![スクリーンショット 2024-12-07 015428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/36e9bf63-3716-2ac1-ada2-a2d966d1b3ce.png)
円のプログラミングはこのような感じになります。
新たな変数、**[float]** が出てきたので解説しますと、
floatという変数は、俗に浮動小数点数とも呼ばれています。
小数点まで対応しているので、先ほどの２つのプログラミングにも応用が可能です！

また、この場合は先に計算式を書いてから
printfで表示させると安定して作ることができると思います！

# 4.**～台形～**
![スクリーンショット 2024-12-07 020330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/9cdb9177-2ace-bbac-c47d-c33044ba91c1.png)
![スクリーンショット 2024-12-07 020339.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/52ac6243-4685-72ed-a659-3b863a33753e.png)
台形のプログラミングはこのような感じになります。
こちらも計算の答えが小数になることが普通にありえるので
**float**型で書いた方がよいのですが、
今回はint型で書きました。

台形は皆さんご存じの通り、公式が少し複雑なので、
（）を用いて公式を書いておくと、今後振り返った時に理解をより早くすることができます！

# 5.**～四角形～**
![スクリーンショット 2024-12-07 021501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/f4abd06b-a0e7-b1eb-bedd-1deee7f6c59a.png)
![スクリーンショット 2024-12-07 021629.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/6390a467-cc59-9330-f963-0014b999f64a.png)
四角形のプログラミングはこのような感じになります。
四角形は周の長さまでプログラムしてみました。
大体やっていることは同じなので説明はここまでにします。
# 6.**～一次関数～**
![スクリーンショット 2024-12-07 022142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/498ea413-4793-bd44-2943-256dac7dbced.png)
![スクリーンショット 2024-12-07 022340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943854/2eeeb05e-e273-d421-8c64-2d1b453a8d1e.png)
一次関数のプログラミングはこのような感じになります。
なお、このプログラミングは比例や２次関数以降にも用いることが可能です！

先に計算式を書いて、printfで書くという流れは
３の円と同じ感じですね...!!

# 7.**～まとめ～**
今回、このような感じで計算式をまとめてみました。
良ければ参考にして頂ければ幸いです！
また、このプログラミングを用いて変数を変えたり
応用してみたりして活用していただいても良いです！

僕もまだ初年度で習っていることが多くないので
間違っていましたら、指摘を頂けると今後の参考になりますので宜しくお願いいたします！

この記事を読んでいただきありがとうございました！
またお会いしましょう！
cmath いろいろconstexprになりました

# はじめに
小ネタです。

C++23からC++26にかけてcmathのいろいろな数学関数がconstexpr対応しました。(します)

[cmath - cpprefjp C++日本語リファレンス | C++23での差異](https://cpprefjp.github.io/reference/cmath.html#cpp23)

だいたいの数学的計算はconstexprにできるんじゃないかってくらい対応したので
見ていこうと思います。


# constexpr対応一覧

### 三角関数

| 名前 | 対応|
| ---- | ---- |
| sin | C++26 |
| cos | C++26 |
| tan | C++26 |
| asin | C++26 |
| acos | C++26 |
| atan | C++26 |
| atan2 | C++26 |

### 双曲線関数

| 名前 | 対応|
| ---- | ---- |
| sinh | C++26 |
| cosh | C++26 |
| tanh | C++26 |
| asinh | C++26 |
| acosh | C++26 |
| atanh | C++26 |

### 双曲線関数

| 名前 | 対応|
| ---- | ---- |
| exp | C++26 |
| exp2 | C++26 |
| expm1 | C++26 |
| log | C++26 |
| log10 | C++26 |
| log2 | C++26 |

### 仮数と指数

| 名前 | 対応|
| ---- | ---- |
| ldexp | C++23 |
| frexp | C++23 |
| ilogb | C++23 |
| logb | C++23 |
| modf | C++23 |
| scalbn | C++23 |
| scalbln | C++23 |

### 累乗・冪根と絶対値

| 名前 | 対応|
| ---- | ---- |
| pow | C++26 |
| sqrt | C++26 |
| cbrt | C++26 |
| hypot | C++26 |
| abs | C++23 |
| fabs | C++23 |

### 誤差関数とガンマ関数

| 名前 | 対応|
| ---- | ---- |
| erf | C++26 |
| erfc | C++26 |
| tgamma | C++26 |
| lgamma | C++26 |

### 最近傍整数

| 名前 | 対応|
| ---- | ---- |
| ceil | C++23 |
| floor | C++23 |
| trunc | C++23 |
| round | C++23 |
| lround | C++23 |
| llround | C++23 |

### 剰余

| 名前 | 対応|
| ---- | ---- |
| fmod | C++23 |
| remainder | C++23 |
| remquo | C++23 |

### 浮動小数点操作

| 名前 | 対応|
| ---- | ---- |
| copysign | C++23 |
| nextafter | C++23 |
| nexttoward | C++23 |

### 最大値・最小値と正の差

| 名前 | 対応|
| ---- | ---- |
| fmax | C++23 |
| fmin | C++23 |
| fdim | C++23 |

### 乗算-加算

| 名前 | 対応|
| ---- | ---- |
| fma | C++23 |

### 線形補間

| 名前 | 対応|
| ---- | ---- |
| lerp | C++20 |

### 数値分類

| 名前 | 対応|
| ---- | ---- |
| fpclassify | C++23 |
| isfinite | C++23 |
| isinf | C++23 |
| isnan | C++23 |
| isnormal | C++23 |
| signbit | C++23 |

### 数値比較

| 名前 | 対応|
| ---- | ---- |
| isgreater | C++23 |
| isgreaterequal | C++23 |
| isless | C++23 |
| islessequal | C++23 |
| islessgreater | C++23 |
| isunordered | C++23 |

# 参考

[cmath - cpprefjp C++日本語リファレンス](https://cpprefjp.github.io/reference/cmath.html)

# まとめ
ほぼconstexprになりました。
快適なconstexprライフを送りましょう。
チンチロしたいからプログラムで作ってみた

# 初めに
突然ですが、
### チンチロがした～い！
ということでチンチロができるようなプログラムを作ろうと思います。
# 突然！故に簡易的ッ！
本当にふとした時にやりたくなったのでそこまで難しくはしないようにします。
使うのはＣ言語です。
まずはさいころを３つ振るようにするプログラムから作っていきます。
![スクリーンショット 2024-12-06 233157.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943865/97bcbe9f-c61a-8a29-8146-b41d4f66e317.jpeg)
これでさいころの目が３つ出るようになりました。
もしシゴロ賽が使いたいって思っているO槻さんがいましたらお帰りください・・・
ではなく、1,2,3が出たときに4,5,6に置き換えるプログラムを作ってあげましょう。
ここからはその3つの目に役があるのかを判定してもらいましょう
# 判定のプログラム
一応ですが、チンチロの役は
・３つのさいころの出目がすべて１の「ピンゾロ」
・3つのさいころの出目がすべて同じ「アラシ」
・出目が1,2,3の「ヒフミ」
・出目が4,5,6の「シゴロ」
特別なものはこれくらいかなと思います。
残りの一般的な役も出してくれるプログラムを作っていきましょう。

![スクリーンショット 2024-12-07 012257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943865/cbdca916-23db-0d49-e308-38ad916f9b05.png)
これで役を教えてくれるようになりました！アラシ、ヒフミ、シゴロのところはどうにかすればもう少し簡単にできるかもしれませんが、今回は簡易的にということで・・・
ではゲームのようにするためにwhile文を使って簡易的なプログラムを作っていきましょう！
# ここからは使いやすくなるプログラムを一つまみ・・・
ここからは使いやすくするプログラムを作っていきましょう

![スクリーンショット 2024-12-07 012612.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943865/519baaa3-6037-ff2e-6766-c029fad0159a.png)
このプログラムではEnterキーを押してもらうことで始まるようにしています。
プログラムが終了するともう一度やりたいときはyを、もういいって時にはnを押してもらうことで終了します。
# 検証結果
![スクリーンショット 2024-12-07 015924.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943865/536fec07-c61f-5111-7097-3fd5da268b6b.png)
このような感じで完全ランダムで数字が出ていることがわかります。
# やってみて感想
今回は初めてということもあって内容がそこまで濃いものではないと思います。ですがやってみて楽しかったです。また何か突然やってみたいものができたら作ってみようかなと思います。
配色考えてくれるapiを作ってみました

# 初めに
寒さが厳しい季節となりましたが、お元気でお過ごしのことと存じます。
平素より格別のご高配を賜り、心より御礼申し上げます。

皆さま、日頃プレゼンテーションを作成される際や、ウェブサイトのデザインを考案される際に、配色についてお悩みになったご経験はございませんでしょうか？
そのようなご苦労を解消するお手伝いができればと思い、このたび、テーマを入力するだけで素敵な配色を提案してくれるAPIおよびウェブサイトを作成いたしました。
この記事では、その概要について少しご紹介させていただければと存じます。

# リンク
### デプロイしたもの
https://color-sync-front.vercel.app/
### フロントエンド
https://github.com/k4nkan/color-sync-front
### バックエンド
https://github.com/k4nkan/color-sync-back

# 技術スタック
### フロントエンド
- react
### バックエンド
- gemini api
    - 選定理由：無料で使える！
### デプロイ
- vercel
    - 選定理由１：無料で使える！
    - 選定理由２：フロントエンド、バックエンド両方超簡単にデプロイできる！

# 今後の展望
今後の展望として、
- サイトとしてもっと使いやすいものに
- プロンプトに改善の余地あり
- コードぐちゃぐちゃ
があります。頑張ります。

# 最後に
本記事をご覧いただき、誠にありがとうございました。  
拙い内容ではございましたが、少しでも皆さまの興味を引き、何かお役に立てる情報をご提供できておりましたら幸いに存じます。  

今後もより一層の努力を重ね、より使いやすく魅力的なサービスの提供を目指してまいります。もしご意見やご感想などがございましたら、ぜひお気軽にお寄せください。皆さまの貴重なお声を励みに、さらなる改善に努めてまいりたいと考えております。  

寒さ厳しき折、どうぞお体を大切になさり、健やかにお過ごしくださいませ。  
最後までお読みいただき、心より感謝申し上げます。  

引き続き、どうぞよろしくお願い申し上げます。

敬具
【TypeScript】Readonly<T>の自作（type-challenges 初級編 7・Readonly）

## お題
Tのすべてのプロパティを読み取り専用にする型`MyReadonly`を実装する。プロパティの再割り当てはできない（読み取り専用にする）。
## やりたいこと
```typescript
type Person = {
  surname: string;
  middleName: string;
  givenName: string;
};

type ReadonlyPerson = MyReadonly<Person>;

type ReadonlyPerson = {
    readonly surname: string;
    readonly middleName: string;
    readonly givenName: string;
}
```
## 解答
```typescript
MyReadonly<T> = { readonly [key in keyof T] : T[key] }
```

## 解説
### 処理の流れ
- `{ readonly … }`
`readonly`修飾子を付け、プロパティを読み取り専用にする。
- `[key in keyof T] : T[key]`
Mapped Typesとkeyof演算子を利用し、新しいオブジェクト型を作成。

### readonly修飾子とは...
- オブジェクトのプロパティを読み取り専用にすることができる。
```typescript
let obj: {
  readonly foo: number;
};

obj = { foo: 1 };
obj.foo = 2; // Cannot assign to 'foo' because it is a read-only property.
```
- readonlyは再帰的ではない。
→ オブジェクトが**入れ子**になっている場合、その中のオブジェクトまでは`readonly`にはならないので注意が必要。

### Mapped Typesとは...
https://qiita.com/yuto99999/items/dcc234f3e25a5393a2ab#mapped-types%E3%81%A8%E3%81%AF

### keyof演算子とは...
https://qiita.com/yuto99999/items/dcc234f3e25a5393a2ab#keyof%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%A8%E3%81%AF

## 参考記事
### `Readonly<T>`
- [Readonly<T> | TypeScript入門『サバイバルTypeScript』](https://typescriptbook.jp/reference/type-reuse/utility-types/readonly)
### readonly修飾子
- [オブジェクトの型のreadonlyプロパティ | TypeScript入門『サバイバルTypeScript』](https://typescriptbook.jp/reference/values-types-variables/object/readonly-property)

## 今回の問題
https://github.com/type-challenges/type-challenges/blob/main/questions/00007-easy-readonly/README.ja.md
AWS LambdaのテストイベントをCDKで管理したい

## 動機
AWS Lambdaをコンソールで見るとテストイベントってあるじゃないすか。
たまーに検証で使ったり、単発で実行してテストデータ作るのに使ったりしてたんですけど、あれをコンソールから編集するのが嫌だったんですよね。
そんなもんコードで管理したいんや！
あんまり需要ないかもしれないけど、忘れる前に記録。

## 前提
AWS CDK v2.164.1(たぶん2系なら動くのでは)
typescript v5.6.3

## サンプルコード
以下でプロパティがcategoryのみのオブジェクトを持ったテストイベントができます。
テストイベント「testtt-timeout」は ```{category: "timeout"}``` を持ちます。
テストイベント「testtt-exception」は ```{category: "exception"}``` を持ちます。
を持ちます。

```typescript
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as path from 'path';
import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as eventschemas from 'aws-cdk-lib/aws-eventschemas';

export class LambdaTestStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    //targetLambda
    const lambdaName = 'lambda-testtt';
    new NodejsFunction(this, `${id}-TestttFunction`, {
      runtime: lambda.Runtime.NODEJS_20_X,
      entry: path.join(__dirname, '../lambda/testtt.ts'),
      functionName: lambdaName,
      handler: 'handler',
    });
    
    //testEvent
    new eventschemas.CfnSchema(this, `${id}-CfnSchema`, {
      registryName: "lambda-testevent-schemas",
      type: 'OpenApi3',
      schemaName: `_${lambdaName}-schema`,
      content: JSON.stringify({
        openapi: '3.0.0',
        info: {
          version: "1.0.0",
          title: "Event"
        },
        paths: {},
        components: {
          schemas: {
            Event: {
              type: "object",
              required: [
                "category"
              ],
              properties: {
                category: {
                  type: "string"
                }
              }
            }
          },
          examples: {
            "testtt-timeout": {
              value: {
                category: "timeout"
              }
            },
            "testtt-exception": {
              value: {
                category: "exception"
              }
            }
          }
          
        }
      }),
    });
  }
}

```

## ざっくり補足
命名規則通りにLambdaの関数名を仕込んだイベントスキーマを作ることで、その名前のLambdaから参照できるようです。
テストはEventBridgeのスキーマレジストリに保存されます。

| | 説明 | 備考 |
|:-|:-|-|
| schemaName | \`_${lambdaName}-schema\` | なまえだいじ |
| components.schemas.Event | イベントのスキーマ |[この辺参照](https://docs.aws.amazon.com/ja_jp/eventbridge/latest/userguide/eb-schema-create.html)|
| components.examples | テストイベント(複数可) |ここの名称がイベント名として反映される|

## 参考
世界の叡智によって支えられています。
マニュアル読み取り下手くそ勢な私にはサンプル書いてくれる方々はまさに神。

https://stackoverflow.com/questions/60329800/how-can-i-create-a-lambda-event-template-via-terraform
https://www.tecracer.com/blog/2022/08/prepopulate-lambda-console-testevents-without-dirty-manual-work-using-terraform.html