OmniAICreator/Qiita-1.07M huggingface dataset:
【応用情報技術者試験】 合格体験記

# はじめに
令和6年度春の応用情報技術者試験に合格しました。

受験の際に先輩方の合格体験記を参考にさせていただきました。還元できればと思い、先達にならって書きます。この記事がお役に立てれば幸いです。

# 業務経験と経歴
現在24歳で、製造業で情シスをしています。社会人としては一年ほどです。

大学時代は情報系の学部に所属していたため、最低限のドメイン知識は保有していました。しかし、専攻外に関する知識はダメダメでした。

IPAの資格試験を受けるのは今回が初めてです。

# 午前対策
2023年の8月に勉強を始め、まず参考書を軽く流し読みしました。

9月頃から[過去問道場](https://www.ap-siken.com/apkakomon.php)で午前問題の演習を始めました。通勤時間を利用してスマホでポチポチ問題を解いていました。[過去問道場](https://www.ap-siken.com/apkakomon.php)は学習履歴が残るのでおすすめです。

![スクリーンショット 2024-05-06 142833.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522032/a4d2fa58-be7d-ee7b-bd9b-71864aff9487.png)
過去問を15年分を一周して、間違えた問題を何回か復習しました。しかし、まだまだカバーできていない部分もあり多少の不安はありました。

:::note
参考書は買いましたが、ほとんど出番はなく、[過去問道場](https://www.ap-siken.com/apkakomon.php)だけで事足りました。勉強のスタイルによりますが、アウトプット中心の勉強が好きな方は参考書が不要かもしれません。
:::

# 午後対策
試験の二か月前に始めました。こちらも通勤時間を利用して、毎朝問題を一つ解くようにしていました。午後問題はスマホを使って解くことは難しいので、印刷した過去問をバインダーに挟んで解いていました。

午後は問題選択が肝だと思います。はじめにすべての選択問題を一年分だけ解いてみて、苦手だと感じた問題を避ける形で問題を選択しました。選んだ問題だけを3年分ほど解いてみました。

試験一週間前に本番の形式で2年分解いてみました。疲れますが、時間配分でミスをしないためにも大事なことだと思います。

:::note
午後試験対策の参考書も買いましたが、こちらもあまり出番はありませんでした。[過去問道場](https://www.ap-siken.com/apkakomon.php)で午後の解説も見られます。通勤時間に勉強するので分厚い本を持ち歩きたくないという方は参考書が必要ないかもしれません。
:::

# 結果
![スクリーンショット 2024-07-09 151544.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522032/946e25e3-6ca4-0508-ccd3-2e5ee587de21.png)
![スクリーンショット 2024-07-09 151800.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522032/c31c778e-40c2-06f0-d84c-bd7cdef929c9.png)
午前70点、午後73点で合格しました。それなりに自信はありましたが、合格を確認した際はホッとしました。

# 受験した感想
午前試験はかなり出題範囲が広く、午後よりも難しかった印象です。しかし、40％ほどの問題が過去問からそのまま出題されますので過去問演習をしっかりやった方は難しくないと思います。

午後試験では選択した問題によって左右されると思いますが、問題文を読めば答えが書いてある問題が半分くらいです。本番でも焦らず落ち着いて問題を読むことが大事です。よって、午後も問題の形式に慣れておくといった意味で過去問演習が肝要です。

# 余談
試験本番の昼食についてです。いつもより、少し多めに食べたほうがいいと思いました。というのも、午後試験中におなかが減ってきて脳のパフォーマンスが落ちてしまったなと感じたからです。午前試験も午後試験も普段以上に脳をフル回転させて問題を解いているはずです。 もちろんその分お腹はすきます。食べ過ぎてしまうのもよくないですが、普段より少し多めに食べるくらいがちょうどいいのかもしれません。
Macストレージがシステムデータでいっぱいな原因がESETだった話

弊社では業務端末にMacを利用しているのですが、気づいたら利用可能ストレージが少なくなっていたので、ストレージの最適化を行いました。

前回記事から約1年・・・550MBだと!!!!?

![スクリーンショット 2024-07-09 11.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477555/93396784-8743-c890-427f-719d0f3551ad.png)

関連記事
[Macストレージがシステムデータでいっぱいな原因がRancher Desktopだった話](https://qiita.com/scp-kimura/items/11874c46e9977a675560)


# 結果
ESETのアップデータファイルは、自動削除されず蓄積されていくようなので、定期的に削除した方が良い。
※必ず確保できるわけではございませんので、参考程度にお読みください。

# 対象者
- Macのストレージ最適化をやったことがない方
    - →初めに[前回記事](https://qiita.com/scp-kimura/items/11874c46e9977a675560)を参考ください
- Macの利用可能ストレージがなぜか少ないと感じる方
  - ESETを使っている方

# 前提
今回の記事の対象となるMacは、下記の仕様です。
- MacBook Pro (13-inch, M1, 2020)
- チップ：Apple M1
- ストレージ：251 GB

# ストレージ最適をやっていく
今回もいつもように調査していきます。
ターミナルで下記コマンドを駆使して、サイズが大きいディレクトリを深掘りしていきます。
前回は、`du`のオプションで`-h`をつけていましたが、オーダー(G,M,K)が変わると分かりづらいので外しました。
```
% du -s /System/* | sort -nr
```

今回見つけた容量を使っているディレクトリはこちらです。
```
% du -h /System/Volumes/Data/Library/Application\ Support/ESET/esets/modules/data/updfiles/base_nonnups
 33G	/System/Volumes/Data/Library/Application Support/ESET/esets/modules/data/updfiles/base_nonnups
 ```

調べて見ると、ESETのアップデータのファイルのようで、削除しても良さそうでした。
※念の為、削除する場合は戻せるようにしておく等、自己責任でお願いいたします。
参考）
[updfiles/base_nonnups が肥大化している - ESET セキュリティ フォーラム](https://forum.eset.com/topic/29554-updfilesbase_nonnups-getting-bloated/)

他の不要ファイルもいくつか削除し、
下記の通り、60GBまで確保できました。

![スクリーンショット 2024-07-09 12.11.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477555/dd53e217-80b5-3551-50ba-b9ebef9f7941.png)

# 結論
今回も、Macのストレージを見直した結果、60GBも空きスペースを確保できました。
やはり定期的な見直しは必要ですね。

そして毎回、違うアプリで容量を食っているというのも見直しが必要な理由。
~~果たして一時的な不具合なのか、そういうアプリなのか~~


# おわりに
このシリーズ2回目ですが、開発をしていると急に動作が重くなったり、「アプリケーションメモリが不足しています」というダイアログで使っているアプリの強制終了を促してきたりします。

ストレージが少なくなってくると（流石にMBオーダーまで減ってたのは放置しすぎたかもしれません。）、業務への影響が出てきますので、定期的に見直しましょう。

皆さんこういう事象は発生してないですか？こんな方法あったよーみたいな関連する事象や解決方法があれば、ぜひ聞いてみたいです！
エンジニアに送る筋トレ白書

# 挨拶
こんにちは！！イケてる社会人を目指す新卒エンジニアのヤピ丸です！
今回はエンジニアが筋トレするべき理由をお伝えしていきたいと思います。

# はじめに
皆さんは日々の仕事でどんな悩みを抱えていますか？

**人間関係**
**運動不足**
**健康**
**キャリア**

色々あるでしょう。それを筋トレで吹き飛ばしましょう！！！

# 筋トレによる効果
筋トレは肉体的にはもちろん、精神的にも大きな影響を与えます！
代表的な2つの例を説明しましょう！

**1. ホルモン分泌の変化**
筋トレすることによってホルモンの分泌に変化が生じ、それによって精神にも影響を与えると考えられています。

**コルチゾール**
筋トレをすることで、ストレスホルモンとも呼ばれるコルチゾールの分泌が低下すると言われています。コルチゾールは副腎皮質から分泌され、ストレスへの対応に関与しています。ストレスがかかるとコルチゾールが増加し、交感神経を刺激することで身体を緊張状態とし、ストレスに対応しようと働きます。ストレスを上手く処理するために必要な生理機構ですが、この状態が長く続いてしまうと心身の健康に良くない影響を及ぼします。実際に、うつ病患者ではコルチゾールの血中濃度が非常に高い傾向があります。適度な筋トレはこのコルチゾールを減少させ、ストレスを緩和します。ただし、長時間負荷の強いトレーニングをすると、かえってコルチゾールの分泌量増加に繋がってしまいます。適切な負荷や頻度を管理することも必要です。

**セロトニン**
幸せホルモンとして有名なセロトニンは、脳の神経伝達物質の一つで、自律神経を調整して怒りや不安などの感情を抑制し、精神を安定させる作用があります。同じく神経伝達物質で、喜びなどの感情を刺激するドーパミン、恐怖や不安などに繋がるノルアドレナリンを調整していることから、セロトニンが不足している状態ではこの二つのバランスが崩れ、不安が強くなったり攻撃的になったり、更に悪化するとうつ病やパニック障害にまで繋がってしまいます。筋トレはこのセロトニンの分泌を高め、幸福感が増し精神状態の安定に役立ちます。

**エンドルフィン**
かなか聞き馴染みのないホルモンですが、体内でモルヒネと同様の働きをし、実際にはモルヒネの約6倍の鎮痛作用があるとされています。また、幸福感を高めたり、気分を高揚させる作用もあり、メンタルへ多大な好影響をもたらすホルモンです。マラソンなど長距離を走っている際に、満足感や爽快感を得て、ずっとこのまま走っていられそうな気がするような感覚になる 「ランナーズハイ」 も、このエンドルフィンの鎮痛作用や気分を高揚させる作用が原因となっているのではないかと考えられています。

**2. 自己肯定感の向上** 
筋トレの効果として、最も実感しやすいのは見た目の変化ではないでしょうか。見た目が大きく変わってくると、自身の理想の身体になれたという達成感を得られ、周りの人からは体型の変化を褒められるかもしれません。このような成功体験から、筋トレを継続できた自分に対して自信が持てるようになります。自信がつくと自己肯定感も高まり、精神的な安定へと繋がります。

しかし、周りの人でも気づけるほどの見た目の変化が訪れる期間は、個人差はありますが概ね半年前後と言われています。正しくトレーニングを継続していれば確実に身体の中身は変化していますが、それがあまり実感できないとストレスに感じてしまい、トレーニングを中断してしまうかもしれません。モチベーションを維持したままトレーニングを継続するためにも、InBodyで体成分の小さな変化も見逃さないことが大切です。InBodyでは、筋肉量よりも早い段階で変化する筋肉の質(ECW/TBW)を確認できます。見た目や筋肉量に変化があまり見られなくても、質の改善が分かれば継続する意欲も湧いてくるはずです。
[参照](https://inbody.co.jp/muscletraining-mental/)

### 人間関係
人間関係における悩みの原因は不安です。
その不安筋トレをすると改善します。
理由？
もちろん考え方がポジティブになるというのもあります。
一番大きいなのは**俺のほうが強いし**って思えることです。
こう思えると何言われても受け流せる強靭なメンタルを手に入れることができます。
**人間結局最後にに信用できるのは己の腕っぷしのみです**

### 運動不足・健康
筋トレにはまるとどんな変化が起こると思いますか？
そうですね、食事に気を遣うようになります。
そうすると不思議なことに**健康**になるんですね！
健康になるとメンタルも上向くので後はポジティブ無限ループに入ります！

ついでに**運動不足**も解消できデスクワークの天敵である**肩こり・腰痛**もいつの間にか**心地のいい筋肉痛**に代わっています。

### キャリア
キャリアのことも気にならなくなります。
なぜかって？自己肯定感爆上がってそんなこと気にならなくなります。
**どうせ自分ならできるやろ**と信じることができます。信じることができれば**努力もできる**ので必然的にキャリアも上向きます。
### 完璧ですね！！！！

# 終わりに
まずは簡単なスクワットや腕立て伏せ、腹筋からぜひ初めて見てください！

それではまた、お会いしましょう！！！
以上ヤピ丸でした。
C#でIoTプログラミング on RaspberryPi #1

## C#でIoTプログラミング
皆さんはRaspberryPi上でIoTプログラミングする時はどの言語を使っていますか？
たぶんほとんどの人はPythonでしょうか。それともC&C++でしょうか。

今回あまりなじみのないC#でIoTプログラミングを紹介していきたいと思います。

C#は当初Windows向けアプリケーションを開発するためのプログラミング言語でしたが、マイクロソフト社が提供する.NETに対応することでWindows以外のiOS、Android、MacOS、Linux等様々なプラットフォーム上のアプリケーションを開発することができるプログラミング言語になりました。それ以外にもUnityでもアプリ開発用のプログラミング言語として利用されています。

第1回目としてRaspberryPiに.NETのインストール方法と定番のLチカまで解説したいと思います。

## 今回使用するハードウェア
・RaspberryPi4BもしくはRaspberryPi5
・Grove LED Red
・GROVE - 4ピン-ジャンパーメスケーブル
もしくは
・ブレッドボード
・赤色LED
・330Ω抵抗
・ジャンパーワイヤ

## 今回使用するソフトウェア
・Raspberry Pi OS 64-bit bookworm(2024/03/15)
・.NET SDK 8.0.302

## ハードウェアの準備
RapberryPiとLEDを次のように配線します。
![01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/4cbb389f-65fa-dd28-7a6c-2862f200d540.png)

RPi　　　Grove LED
5V---------VCC（赤）
GND--------GND（黒）
18Pin------SIG（黄）
配線は3本になります。


Grove LEDではなくブレッドボードで配線する場合はGNDと18Pinだけ配線することになります。
![rpi-led_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/19c2b96c-68f5-7bb1-e0ea-49deeede196e.png)

## .NET SDKのインストール
それでは次に.NET SDKのインストールを行います。
Linux向けにインストールスクリプトが用意されていますので、ダウンロードして実行します。
ターミナル上で次のコマンドを実行します。
```console
$ wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
$ chmod +x ./dotnet-install.sh
$ ./dotnet-install.sh --version latest
```
続いて環境変数の設定を追加します。

.bashrcファイルの最後に次の2行を追加します。
```
export DOTNET_ROOT=$HOME/.dotnet
export PATH=$PATH:$DOTNET_ROOT:$DOTNET_ROOT/tools
```
追加したら次のコマンドで.bashrcを再読み込みしておきます。
```console
$ source .bashrc
```
インストールができているか次のコマンドで確認できます。
```console
$ dotnet --version
8.0.302
```

## プロジェクトの作成
.NETではテンプレートを利用してプログラミングを始めるのが一般的です。
今回はコンソールアプリを作成していきます。

```console
$ dotnet new console -o Blink
$ cd Blink
```
dotnet new "テンプレート" -o "アプリ名" とすることでアプリのひな型が生成されます。

試しにアプリケーションフォルダ（ここではBlinkフォルダになります）で実行してみます。

```console
$ dotnet run
Hello, World!
```
Blinkフォルダは以下になります。
プログラムはProgram.csに書かれています。
次からはProgram.csの内容を書き換えていきます。
```
$ ls -al
total 24
drwxr-xr-x 4 pi pi 4096 Jul  9 14:54 .
drwxr-xr-x 4 pi pi 4096 Jul  9 14:53 ..
drwxr-xr-x 3 pi pi 4096 Jul  9 14:54 bin
-rw-r--r-- 1 pi pi  252 Jul  9 14:53 Blink.csproj
drwxr-xr-x 3 pi pi 4096 Jul  9 14:54 obj
-rw-r--r-- 1 pi pi  105 Jul  9 14:53 Program.cs　
```

## パッケージの追加
LEDを制御するためにはGPIOライブラリが必要になります。
.NETでは必要なライブラリをパッケージとしてインストールします。
```console
$ dotnet add package System.Device.Gpio
```

## Program.csの書き換え
Program.csの内容を以下のように書き換えます。
```C#
//パッケージの読み込み
using System;
using System.Device.Gpio;
using System.Threading;

//アプリケーションの終了方法をコンソールに出力
Console.WriteLine("プログラムを終了するにはCTRL+Cを押してください。");

//LEDを制御するPinの指定
int pin = 18;

//GPIOコントローラーのインスタンスを作成
using var gpio = new GpioController(); 

//指定したPinを出力モードで開く
gpio.OpenPin(pin, PinMode.Output);

//LEDの状態を示す変数
bool ledOn = true;

//ループ
while (true)
{
    //ledOnがTrueだったらPin(18)をHighにする、そうでなければLowにする。
    gpio.Write(pin, ((ledOn) ? PinValue.High : PinValue.Low));

    //1秒間停止
    Thread.Sleep(1000);

    //ledOnの値を反転する
    ledOn = !ledOn;
}
```

書き換えができたら実行してみましょう。

```console
$ dotnet run
プログラムを終了するにはCTRL+Cを押してください。
```
しばらくするとLEDが1秒ごとに点滅を始めます。

以上でプログラムが完成しました。

次はGPIOのデジタル入力処理を紹介する予定です。
集計表からカテゴリを統合/再編成する(SPSS Modeler データ加工逆引き11-17)

# 集計表からカテゴリを統合/再編成する

![スクリーンショット 2024-07-08 13.22.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/8414dad2-b2be-f04a-7df4-942f1c293cf2.png)

## 1.想定される利用目的

・集計表の簡素化

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/raw/main/table_fix.str

## 3.サンプルストリームの説明

![スクリーンショット 2024-07-09 9.11.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/d7f11edd-3f93-c743-4fea-4b36023f01eb.png)

a.入力するデータは以下の通りです。
![スクリーンショット 2024-07-01 10.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/7ba792da-ff33-0edc-3862-77dd28efaedf.png)


b.　[レコード集計]ノードを編集します。[フィールドにレコード度数を含める]にチェックを入れて[度数]と名称変更しています。
![スクリーンショット 2024-07-01 10.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/40df5373-3b05-d6de-f7f3-839388153ce6.png)

c.[ソート]ノードを編集します。
![スクリーンショット 2024-07-01 10.23.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/24995341-1fce-9c72-cbb5-33329b741c75.png)

[デーブル]ノードを実行します。
![スクリーンショット 2024-07-01 10.23.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/2daca22e-6159-fb38-c01f-7f627ad30992.png)

[野菜]と[果物]を[青果]に、[99]と空白のカテゴリを[その他]に編成します。まずは[野菜]と[果物]をハイライトしたまま[生成]メニューから以下のよう[条件抽出ノード(OR)]を選択します。


![スクリーンショット 2024-07-09 9.19.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/f1501aa6-aa32-90af-9fac-328644e78996.png)

画面左に[条件抽出]ノードが自動生成されます。

![スクリーンショット 2024-07-09 9.20.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/c2b03fc6-eaec-a5e8-9008-8c1a7c96dc8e.png)

[条件抽出]ノード（生成）を編集します。[条件]に自動記述された式[カテゴリ＝"野菜"　or カテゴリ＝"果物"]をコピーします。

![スクリーンショット 2024-07-09 9.20.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/2aec42a8-bcc5-4aa7-9f24-d0264e5f72a3.png)

d.[置換]ノードを編集します。上記でコピーした式を[条件]にペーストして[置換値]は["果物"]とタイプします。

![スクリーンショット 2024-07-09 9.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/a7282c24-2d78-cbde-d3e5-35cdc45043aa.png)


e.[置換]ノードを編集します。先と同じ手順で　[９９]と空白から自動でor条件の式を生成したものをペーストし[置換値]は["その他"]にします。

![スクリーンショット 2024-07-09 9.21.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/0a519dd4-a586-2971-4907-7e280d8ba06b.png)

[デーブル]ノードを実行します。bとcのノードは最初のものを複製しておきます。

![スクリーンショット 2024-07-09 9.22.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1682c8ff-204e-7700-5000-fa7a304b658c.png)

#### 注意事項

今回のような限られたカテゴリの複製の場合テーブルから自動で式を生成せずに[データ分類]ノードfを当初から利用する方がスピーディですが、カテゴリが多岐に及ぶ場合には表と度数を確認しながら再編成するのがおすすめです。

![スクリーンショット 2024-07-09 9.22.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/f2dbd021-195d-ea2a-9e15-9e7f8822278e.png)

## 4.参考情報

####  棒グラフでカテゴリをグループ化する

https://qiita.com/416nishimaki/items/5eb4a3e7f63118f4011b

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
【ChatGPT＋Code Interpreter】指定曲を弾くPrompt（失敗作）


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

　今回は、Code Interpreterで指定曲を作成するPromptを紹介します。タイトルにも書きましたが、失敗作です。

:::note info
本記事は、ChatGPT（有料版）
で行なっております。あしからず。
:::

　まずは、ニュース。

　AnthropicのClaudeに
　　新たな機能が加わりました。

　❶Artifactsに共有機能が搭載。

　これは
　　ChatGPTのGPTsの
　　　公開方法である
　　　　リンク機能に当たります。

　知り合いに
　　リンクを送れば、
　　　コンテンツを共有できる
　　　　というものですね。

　さらに「Remix」機能を使えば、
　　他の人のArtifactsを
　　　引き継いて改善することも。

　X-Twitterでは
　　歓喜する声が続々と
　　　アップされています。

　[ChatGPT研究所さんポスト](https://x.com/ctgptlb/status/1810827343356907957?t=bmPmNK6x6s72UZAsSuma6g&s=03)

　❷Claude はプロンプトを生成し、
　　　テスト変数を作成し、
　　　　プロンプトの出力を
　　　　　並べて表示することが
　　　　　　できます。

　これ、私はよくわからないのですが、
　　下記を見ると、どうやら
　　　プロンプトをテスト評価
　　　　できるようです。

　プログラムを
　　テストするのに
　　　似ているのかも。
　　　　わかりませんが。

　[Anthropicさんポスト](https://x.com/AnthropicAI/status/1810747792807342395?t=aSAfCdmI_3E78amPZebEIA&s=03)
***
　さて、本題です。

　Code Interpreterによる
　　音楽生成の続きです。

　正直な話、先日の
　　[【ChatGPT＋Code Interpreter】『きらきら星』を作ってみた。](https://qiita.com/kabumira/items/c5011e74c664d0678dcb)
　　　から、あまり進展はありません。

　音は、ビープ音であり、
　　ギター、ピアノ、フルートと
　　　指定してやってみましたが
　　　　その波長が変わるだけで
　　　　　いい感じではありません。

　今回は、
　　インターネットから
　　　指定曲を取得して、
　　　　曲を作ってもらうための
　　　　　Promptを作成しました。

　言っておきますが、
　　これは失敗作です。

　どうやら
　　取得には
　　　成功しているようですが、
　　　　メロディーコードが
　　　　　まったく違っています。

　まだ、
　　原因がわかっていません。

　そんなものを
　　出すなんて、イヤなんですが😅

　では、まずはPromptから。
```Text:指定曲を弾くPrompt（失敗作）
# 目的
指定の曲を演奏するサウンドファイルを作成する。

# 曲名
曲名=ピアノ練習曲「ちょうちょう」

# 処理手順
・曲名からメロディーと和音進行を得る
　信頼できる情報源から取得してください。YouTubeからは取得してはいけません。また、取得できない場合はその旨を教えて、終了してください。
・メロディーと和音進行を出力して、ユーザーに確認を取ること
・CodeInterpreterを使って、取得した正しいメロディーと和音進行を組み合わせて、全曲を作成してください。一行ごとに区切りを入れてください。使用する楽器はサイン波を使用してピアノ風の音を生成してください。

# 注意点
・日本語でお願いします。
・作曲・編曲・合唱しないでください。
・余計なコードを付与しないでください。
・コードの必要はありません。
・グラフの必要。ありません。

# 最終確認
あなたが理解できない箇所があるならば、指摘してください。
あなたが理解できたなら、「はい」と答えて、曲名と参照元（リンクコード）を出力して、実行してください。
```

　これを使うと
　　インターネットで検索して
　　　正しいメロディーと和音進行を
　　　　取得しようとします。

　その結果として、
　　メロディーと和音進行を
　　　表示してくれる、のですが
　　　　あきまへん😅

　“違っていますよね？”と
　　指摘すれば、それらしい曲を
　　　出してきます。

　“それらしい”というのは
　　途中から、知らんメロディーが
　　　追加されるのです。

　あれこれやりましたけど、いろいろと
　　うまく行きませんでした。

　以上、失敗作のお話でした🙇

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

　今回は、ここまで。
【Linux】システムの負荷を確認する

# はじめに
最近Linux環境での作業、修正の機会が増えました。システムの負荷や状態を確認するコマンドについて忘備録としてまとめます。

# システムの負荷の確認
代表的なuptimeとtopという2つのコマンドを紹介します。

## uptime コマンド
システムの稼働時間と平均負荷を確認するためのコマンドです。


```
uptime
```

**実行結果**

![スクリーンショット 2024-07-09 9.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1201315/841d85b6-9f25-7c48-699b-a5627c94db4c.png)

下記を左から表しています。
１．現在時刻
２．システムの稼働時間
３．現在の接続ユーザ数
４．ロードアベレージ 過去1分、5分、15分の平均

### ロードアベレージ (平均負荷)
『１CPUに対して、平均的にどれだけプロセスが実行待ちになっているか』を示す指標で、この数値が高いとLinuxのシステムが高負荷の状況であることを意味します。

## top コマンド
システムのリアルタイムのプロセス情報を表示するためのコマンドです。 Cmd + Cで閉じます。

```
top
```

**実行結果**

![スクリーンショット 2024-07-09 9.44.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1201315/1e91f187-6a5b-dae7-ac57-041fd009244f.png)

### 1. システム全体の情報

| 項目         | 説明 |
|--------------|------|
| Load Average(平均負荷) | システムの1分、5分、15分間の平均負荷 |
| Tasks (プロセス) | 現在のプロセスの数（実行中、スリープ中、停止中、ゾンビ)|
| CPU usage (CPU使用率) | 各CPUの使用率（ユーザーモード、システムモード、アイドル、I/O待ちなど）<br> |
| Memory usage (メモリ使用率) | 使用中のメモリ、空きメモリ、バッファ、キャッシュの量 |

### 2. プロセスごとの情報

| 項目          | 説明 |
|---------------|------|
| PID (プロセスID) | 各プロセスの一意の識別子。 |
| USER (ユーザー) | プロセスを実行しているユーザー名。 |
| PR (優先度) | プロセスの優先度。低い値ほど高優先度です。 |
| NI (ナイス値) | プロセスのナイス値。負の値は高優先度、正の値は低優先度。 |
| VIRT (仮想メモリ使用量) | プロセスが使用している仮想メモリの量。 |
| RES (実メモリ使用量) | プロセスが使用している物理メモリの量。 |
| SHR (共有メモリ使用量) | 他のプロセスと共有しているメモリの量。 |
| S (状態) | プロセスの状態（例えば、R = 実行中、S = スリープ、D = 割り込み不可のスリープ、Z = ゾンビ）。 |
| %CPU (CPU使用率) | プロセスのCPU使用率。 |
| %MEM (メモリ使用率) | プロセスの物理メモリ使用率。 |
| TIME+ (累積CPU時間) | プロセスが使用した累積CPU時間。 |
| COMMAND (コマンド) | プロセスを開始したコマンド名。 |


## htop コマンド
topコマンドを見やすくするためのコマンドです。インストールが必要です。


**インストール方法**
```
// Mac OSの場合
brew install htop

// Ubuntu/Debianの場合
sudo apt update
sudo apt install htop
```

**コマンド**
```
htop
```


**実行結果**
![スクリーンショット 2024-07-09 10.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1201315/a10b62f8-6711-ea28-bd09-d5486af37870.png)


## 余談
Macのアクティビティモニターは上記コマンド等を使用して表示しているようです。

![スクリーンショット 2024-07-09 10.09.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1201315/2926242a-ceac-2530-6ede-d064ef15a566.png)

## まとめ
WindowsはUNIX系ではないため別のコマンドになりますが、Macでは試せるのでターミナルでコマンドを打つだけでもよいので試してみてください！

## 最後に
私の働いている会社で経験の有無を問わず採用を行っています。
興味のある方は是非カジュアル面談から応募してみてください！

https://jambo-support.com/recruit_engineer/
Nuxt3でのローカルJavaScriptグローバル読込み

外部からダウンロードしてきた生のJSをNuxt3で使いたかった

### 結論

JSファイルを[public](https://nuxt.com/docs/getting-started/assets#example)フォルダ配下に置いて下記設定を行う

``` typescript:nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{type: 'text/javascript', src: '/vender/hogefuga.js'}] // パスにpublicを含めない
    }
  }
})
```

以下は`tsc`のエラー回避

``` json:tsconfig.json
{
  "exclude": ["./public/vender/*.js"]
}

```

### 経緯

普通に使いたいJSをインポートしようとしたら

``` typescript:useHogeFuga.ts
import './utils/hogefuga.js' 
```

```
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated
```

`tsc`エラーとビルドエラーが発生:innocent:

`strict`モード中で`delete`使うなよってこと

ベンダーソースを書き換えるわけにもいかないのでなんとかグローバルで読込み
Laravel インストール

# はじめに
こんにちは。@bdrccです。

最近色々ありまして、8年以上使っていた MacboorAir を新調しました。
他のソフトウェアのインストール中、「あ、Laravelいけるかも」と気づき、インストールを試みました。

これから勉強したいという方向けに、メモを残しておきます。

# 環境
- MacbookAir M3チップ
- MacOS 14.3 Sonoma

# 手順
## 1：PHP（MAMP） インストール
下記のサイトからインストールします。
OSの種類が違う場合は、バージョンに合わせてインストールしてください。

https://www.mamp.info/en/downloads/

## 2：Homebrew インストール

下記サイトからコードをコピーして、ターミナル上で実行します。

https://brew.sh/ja/

私の場合は

```:terminal
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
~途中省略~
- Run these two commands in your terminal to add Homebrew to your PATH:
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ここにユーザ名/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh
```

という出力がされたため、

```:terminal
% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/bdrcc/.zprofile

% eval "$(/opt/homebrew/bin/brew shellenv)"
```

の２つを後から入力しました。
念のため、バージョンを確認します。

```:terminal
% brew -v
Homebrew 4.3.9
```

これで、Homebrew のインストールは完了です。

## 3：Composer インストール

Composerのインストールのため、まずは openssl をインストールします。

```:terminal
% brew install openssl
~途中省略~
% openssl version
LibreSSL 3.3.6
```

次に、Composerをインストールします。

```:terminal
% curl -sS http://getcomposer.org/installer | php   
zsh: command not found: php
curl: (23) Failure writing output to destination
```
PHPがない、と言われました。
そのため、下記サイトの手順に従って入力し、MAMPのPHP8.2.0にPATHを通します。

https://note.com/88gram/n/n3bb1822e831b

.zshrc ファイルは、私のような初心者の方だとまず作成していないと思います。
`% touch ~/.zshrc`を入力してから、その他も実行しましょう。

ここまで来たら、改めてComposer インストールを試してみます。

```:terminal
% curl -sS http://getcomposer.org/installer | php
All settings correct for using Composer
Downloading...
Composer (version 2.7.7) successfully installed to: /Users/ユーザー名/composer.phar
Use it: php composer.phar
```

その後、パスを通して、バージョン確認します。

```:terminal
% sudo mv composer.phar /usr/local/bin/composer
% composer --version
Composer version 2.7.7 2024-06-10 22:11:12
PHP version 8.2.0 (/Applications/MAMP/bin/php/php8.2.0/bin/php)
Run the "diagnose" command to get more detailed diagnostics output.
```

Composer・PHP のバージョンが確認できました。

## 4:Laravelのインストール
以下のコードを実行します。
ただし、文末の `Sample` は、自分でファイル名を決めてください。
（私は、そのまま作ってしまいました）

```:terminal
% composer create-project laravel/laravel --prefer-dist Sample
```

そうすると、新たに自分でつけた名前のフォルダが生成されます。(上記コードのままだと、Sample)

Laravelを起動するには、ターミナルで
```:terminal
% cd Sample
% php -S localhost:8000 -t public
```
と入力し、ブラウザで`localhost:8000`を入力しましょう。

終了する時には`Control + C`です
（終了方法をド忘れして、初回にプチ混乱しました）

# 終わりに
前のMacbookAirでは、インストールするための途中のソフトウェアのサポートが終了していて、インストールできませんでした。

Laravelの一歩を、やっと始めることができました。
引き続き頑張ります！

余談ですが、右側のnav欄の数字と記号の出力、統一されていないのはなぜ・・・。


# 参考
https://www.sejuku.net/blog/106106

https://qiita.com/mugimuginekoko/items/42188c356a75260d0dfd
Goの型変換の正体

## はじめに
42Tokyoに入ってGo言語を触りだして少し経ちますが、Go言語の仕様そのものについて気になる部分がありました。
Go言語にはパッケージに定義されている関数とは異なり、builtinと呼ばれる組み込み関数群があります。例を挙げると、len()やappend()、panic()などがこれにあたります。
さて、Go言語には型変換と呼ばれる仕組みがあります。
```go
var i int = 42
var f float64 = float64(i)
```
このコードは、int型の42をfloat64に変換しています。このfloat64は一体何の関数かが気になり、今回これを調べることにしました。

## builtin.goを読む

https://github.com/golang/go/blob/master/src/builtin/builtin.go

Go言語の組み込み関数は、builtinパッケージのbuiltin.goに記載されています。
コードそのものが書かれているわけではなく、ここには事前に宣言された定数や変数、型などが記載されています。
builtin.goでfloat64について直接的に記述されている部分はここだけです。
```go
// float64 is the set of all IEEE 754 64-bit floating-point numbers.
type float64 float64
```
intをfloat64に変える関数の記載はありませんでした。

## The Go Programming Language Specificationを読む

https://go.dev/ref/spec

The Go Programming Language SpecificationとはGoの言語仕様書で、[ここ](https://go.dev/ref/spec#Conversions)に型変換についての記述した項目Conversionsがあります。

> A conversion changes the type of an expression to the type specified by the conversion. A conversion may appear literally in the source, or it may be implied by the context in which an expression appears.
>
> An explicit conversion is an expression of the form T(x) where T is a type and x is an expression that can be converted to type T.
> ```go
> Conversion = Type "(" Expression [ "," ] ")" .
> ```

この項目について読むと、型変換は`Conversion = T(x)`(T: 型のtype, x: Tに変換可能な式x)によって行われることがわかります。
ちなみに、変換可能なTとxの関係性は次のように書かれています。
> A non-constant value x can be converted to type T in any of these cases:
>
> - x is assignable to T.
> - ignoring struct tags (see below), x's type and T are not type parameters but have identical underlying types.
> - ignoring struct tags (see below), x's type and T are pointer types that are not named types, and their pointer base types are not type parameters but have identical underlying types.
> - x's type and T are both integer or floating point types.
> - x's type and T are both complex types.
> - x is an integer or a slice of bytes or runes and T is a string type.
> - x is a string and T is a slice of bytes or runes.
> - x is a slice, T is an array [Go 1.20] or a pointer to an array [Go 1.17], and the slice and array types have identical element types.

## conversions.goを読む

https://github.com/golang/go/blob/master/src/cmd/compile/internal/types2/conversions.go

先程のconversionの実体はここに記述されています。funcと関数定義されていることからわかるように、conversionはtypes2パッケージに入っている**関数**です。

```go
func (check *Checker) conversion(x *operand, T Type)
```

https://pkg.go.dev/cmd/compile/internal/types2

Go言語のコンパイラや静的解析ツールで用いられる型チェッカー関数がtypes2パッケージに含まれていて、基本的にconversion関数をユーザーが記述することはありません。
このような記述を行った場合、goのコンパイラが読み取ってconversion()を適用するようです。
```go
var i int = 42
var f float64 = float64(i)
```

## 結論
float64()はbuiltin関数ではない。float64()という関数が存在するわけではなく、float64()と記述することでconversion関数がコンパイル時に呼び出されるようになる。

## さいごに
Go初心者なので、多分理解が不十分な箇所があると思います。
もし見つけたら、教えていただけると嬉しいです。
Excel ファイルを VCF タイプにエクスポート/転送するための適切な戦略

<p>過去 5 年間、私は連絡先やその他のデータを MS Excel スプレッドシートに保存してきました。 過去 5 年間、私は連絡先やその他のデータを MS Excel スプレッドシートに保存してきました。 Microsoft Excel で連絡先を保存するのは標準的な手順ですが、この方法の人気は低下しています。 さらに、Excel スプレッドシートを使用して、各連絡先を個別に電子メールやその他の方法で送信することはできません。 逆に、vCard ファイルを使用すると、コンピューターとネットワーク間で転送または共有できる標準形式で単一の連絡先を管理するプロセスが簡素化されます。</p>
<h2><strong>Excel と VCF に関する情報</strong></h2>
<p>vCard ファイルは、名前、住所、電話番号、電子メール アドレスなどの連絡先情報を保存するのに最適です。さまざまなデバイスやオンラインおよびオフラインの電子メール アプリケーションで動作します。このため、最近、Excel のすべての連絡先を vCard ファイルに変換することにしました。その後、手動で行うのは難しい手順でしたが、いくつかの手動の方法を使用してタスクを完了しました。最終的には、サードパーティ アプリケーションを使用することを決定し、Excel to VCF Converter をダウンロードしました。このツールの動作に非常に感銘を受けたため、Excel の連絡先を vCard 形式に変換する簡単な方法を探している他のユーザーのために、自分の経験を共有したいと思いました。</p>
<p><strong>Softaken Excel から vCard へ ソフトウェア</strong>の多くの重要な機能により、ユーザーはアプリケーションを簡単に使用できます。以下では、それらの重要な機能のいくつかについて簡単に説明します。このプログラムを使用すると、Excel ファイルを <a target="_blank" rel="noopener noreferrer" href="https://www.softaken.com/jp/excel-vcard"><strong>Excel ファイルを VCF タイプに安全に転送/エクスポート</strong></a>できます。</p>
<h3><strong>VCFからExcelへの変換の主な特徴</strong></h3>
<p>Excel ドキュメントを開いて表示します。</p>
<p>XLS または XLSX データ ファイルが検査され、アップロードされると、プログラムは Excel ファイル全体の簡単なプレビューを自動的に作成します。ユーザーは、各行、列、および関連データをまとめて読み取るオプションがあります。さらに、Excel から vCard へのコンバーター ソフトウェアによって、多数の Excel シートを同時に読み込むことができるため、ユーザーは各シートで利用可能な各ページのコンテンツを個別に読み取ることができます。</p>
<h3><strong>Excel から vCard への変換</strong></h3>
<p>ユーザーは、このアプリケーションを使用して、Excel スプレッドシートの複数の連絡先を VCF ファイルにすばやく変換できます。Excel から VCF へのコンバーターを使用すると、Excel ファイルから vCard ファイルに各フィールドをエクスポートできるため、データ マッピングが容易になります。このプログラムは、Excel スプレッドシート内の各連絡先に対して一意の VCF を作成できます。</p>
<h3><strong>VCF Excel エクスポートの 3 つのバージョン</strong></h3>
<p>ユーザーは、要件と好みに応じて、Excel の連絡先を vCard 2.1、3.0、4.0 バージョンに変換できます。Excel ファイルから vCard へのコンバーター アプリケーションを使用すると、関連付けられている Excel データ シート内のすべての連絡先を 1 つの vCard ファイルに統合できます。最終的なファイルはどこにでも保存できます。</p>
<p>デフォルトでは、Excel から VCF へのコンバーターによって作成された vCard ファイルは、Excel の連絡先から作成された後、デスクトップに保存されます。一方、結果の VCF ファイルをローカル システム上の別の場所に保存する必要がある場合は、検索できます。</p>
<h3><strong>ExcelからvCardへのコンバーターソフトウェアの人気</strong></h3>
<p>Excel から vCard へのコンバーター には 2 つのバージョンがあります。最初のバージョンでは無料のデモ バージョンをダウンロードし、2 番目のバージョンでは試用版を購入するか、試用版からライセンス バージョンにアップグレードすることができます。</p>
<p><strong>デモ</strong>: Excel から vCard へのコンバーター のデモ バージョンは、消費者が無料で試用できるように会社によって設定されています。名前が示すように、これはフリーウェア バージョンであり、入手は簡単です。このバージョンでは、ユーザーは電子メール アドレスの最初の 5 文字と電話番号の最初の 7 桁を表示およびエクスポートできます。さらに、Excel を vCard にエクスポートすることもできます。</p>
<p><strong>取得/貸与バージョン:</strong> この製品には、個人、商用、エンタープライズの 3 つの完全版があります。それぞれが個人ユーザー、スタッフの少ない中小企業、大企業向けに設計されています。</p>
<h4><strong>欠点:</strong></h4>
<ul>
    <li>Mac OS のバージョンはサポートされていません。</li>
</ul>
<h3><strong>最後の言葉</strong></h3>
<p>このツールは使いやすいグラフィカル ユーザー インターフェイスを備えており、すばやく動作します。そのため、Excel の連絡先を vCard 形式に変換して、電話や他のメール クライアントで VCF 形式にアクセスする必要がある人には、このプログラムの使用をお勧めします。</p>
npm vs yarn vs pnpm vs bun

### 技術記事: npm vs yarn vs pnpm vs bun - JavaScriptのパッケージ管理ツールの比較と選択ガイド

JavaScriptのパッケージ管理ツールにはいくつかの選択肢があります。それぞれには特性や利点が異なるため、どれを選ぶかによってプロジェクトの効率や開発体験が大きく影響します。ここでは、npm、yarn、pnpm、そしてbunの特徴と選択ポイントについて対話形式で解説します。

---

**Q: npmとはどんなツールですか？**

**A:**
npmは、JavaScriptのデファクトスタンダードなパッケージ管理ツールです。Node.jsと一緒に提供されており、パッケージのインストールや依存関係の解決、バージョン管理を行います。多くの開発者が使い慣れており、npmレジストリから数多くのパッケージを利用できます。

**Q: npmの利点と欠点は何ですか？**

**A:**
利点としては、広く使われているためコミュニティが大きく、安定性が高いことが挙げられます。一方で、大規模なプロジェクトではパフォーマンスが問題になることがあります。

---

**Q: yarnは何が特徴的ですか？**

**A:**
yarnは、Facebookが開発したnpmの代替として登場しました。インストール速度やキャッシュの効率性が改善されており、より高速で信頼性があります。また、yarn.lockファイルを通じてパッケージの再現性を確保できます。

**Q: yarnの使いどころは？**

**A:**
特に大規模なプロジェクトやインストール速度が重視される場合におすすめです。npmよりもキャッシュの活用が効果的で、ネットワーク速度に依存しない安定性があります。

---

**Q: pnpmは他のツールとどう違いますか？**

**A:**
pnpmは、パッケージの共有インストールとシンボリックリンクを使ってディスクスペースを節約するツールです。パッケージをローカルにキャッシュすることで、再インストールや依存関係の更新が高速に行えます。

**Q: pnpmのメリットとデメリットは？**

**A:**
ディスクスペースを節約しつつ高速なインストールが可能な点が大きなメリットです。ただし、シンボリックリンクを使ったインストールが想定外の挙動を引き起こすことがあるため、注意が必要です。

---

**Q: bunとはどのようなツールですか？**

**A:**
bunは新しいアプローチを取ったパッケージ管理ツールで、プロジェクト全体の依存関係を1つのファイルに記述します。モジュールとして機能し、シンプルで直感的なインターフェースを提供します。

**Q: bunの適用例は？**

**A:**
新しいアプローチを試したい場合や、プロジェクトの構造をフラットに保ちたい場合におすすめです。ただし、他のツールに比べてまだまだ成熟度が低く、安定性の面で注意が必要です。

---

これらのツールの特性を理解し、プロジェクトのニーズに合ったパッケージ管理ツールを選ぶことが重要です。それぞれの利点と欠点を考慮し、開発チームが快適に作業できる環境を構築しましょう。
バックエンドって何してるの？関数と何が違うのか

### バックエンドの仕組みとは？

バックエンドは、ウェブアプリケーションの裏側で動作し、ユーザーインターフェースとデータベース間の通信や処理を担当する部分です。ここでは、JavaScriptを使ってバックエンドの基本的な仕組みについて解説します。

#### 1. 関数呼び出しとバックエンドの問い合わせの違い

- **関数呼び出し**:
  ```javascript
  function calculateSum(a, b) {
      return a + b;
  }

  // 関数の呼び出し
  let result = calculateSum(3, 5);
  console.log(result); // 出力: 8
  ```
  上記の例では、`calculateSum` 関数が定義され、引数 `3` と `5` を渡して呼び出されています。

- **バックエンドの問い合わせ**:
  ```javascript
  // クライアントからのリクエストを模した例
  fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('エラー:', error));
  ```
  上記の例では、クライアントが `/api/data` エンドポイントにリクエストを送信しています。サーバーはこのリクエストを受け取り、データを処理してクライアントに返します。

#### 2. バックエンドの処理の流れ

- **リクエストの受け取りと処理**:
  ```javascript
  // Expressを使用したサーバーサイドの例
  const express = require('express');
  const app = express();

  // GETリクエストの処理
  app.get('/api/data', (req, res) => {
      // データベースからデータを取得する仮想的な処理
      let data = { id: 1, name: 'John Doe' };
      res.json(data); // データをJSON形式で返す
  });

  app.listen(3000, () => console.log('サーバーがポート3000で起動しました'));
  ```
  上記の例では、Expressフレームワークを使用して、`/api/data` へのGETリクエストを処理するサーバーが定義されています。リクエストを受け取ったら、サーバーはデータベースからデータを取得し、JSON形式でクライアントに返します。

#### 3. 非同期性とスケーラビリティの考慮

- **非同期処理の例**:
  ```javascript
  // ファイルの読み込みを非同期で行う例
  const fs = require('fs');

  fs.readFile('file.txt', 'utf8', (err, data) => {
      if (err) throw err;
      console.log(data);
  });
  ```
  上記の例では、ファイルシステム（Node.jsの場合）からファイルを非同期で読み込んでいます。このような非同期処理は、サーバーが多くのリクエストを同時に処理するために重要です。


---

### ユーザーが体験するバックエンドのフロー

ユーザーがウェブアプリケーションを利用する際に、バックエンドがどのように機能しているか、具体的なフローを説明します。

#### 1. ユーザーが操作を行う

ユーザーはフロントエンドのインターフェースを通じて、アプリケーション内で特定の操作（例: データの検索、更新、新規作成など）を行います。

#### 2. フロントエンドからバックエンドへのリクエスト

ユーザーの操作に応じて、フロントエンドはバックエンドのAPIエンドポイントに対してリクエストを送信します。例えば、新しいユーザー登録を行う場合は、以下のようなリクエストが発生します。

```javascript
fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: 'john_doe',
        email: 'john@example.com',
        password: 'password123'
    })
})
.then(response => response.json())
.then(data => console.log('新しいユーザーが作成されました:', data))
.catch(error => console.error('エラー:', error));
```

#### 3. バックエンドでの処理

バックエンドは受け取ったリクエストに基づき、次のような処理を行います。

- **データの検証と処理**: 受け取ったデータのバリデーションや必要なビジネスロジックの適用を行います。
- **データベースの操作**: ユーザー情報のデータベースへの書き込みなど、データの永続化を行います。
- **外部サービスの呼び出し**: 必要に応じて外部サービスとの連携を行い、さらなる処理を行います。

#### 4. レスポンスの受け取りと表示

バックエンドが処理を完了すると、フロントエンドはレスポンスを受け取り、ユーザーに適切なフィードバックを表示します。例えば、新規ユーザー登録の場合は、成功したメッセージやエラーメッセージを表示します。

```javascript
{
    "id": 123,
    "username": "john_doe",
    "email": "john@example.com"
}
```

#### 5. ユーザーのフィードバックと次の操作

ユーザーはフィードバックを元に、次の操作を決定します。成功した場合は、新規作成されたデータを確認したり、その情報を利用して他の操作を続けたりします。

### まとめ

このようにして、ユーザーがアプリケーションを使用する際のバックエンドのフローを理解することで、システムの動作をより具体的にイメージすることができます。バックエンドはユーザーが直接触れることはありませんが、その裏で重要な役割を果たしていることを理解することが重要です。

---
Jetpack Compose で Strong skipping mode を有効化してみる (Compose Compiler 1.5.14)

手元のプロジェクトで[Strong skipping mode](https://developer.android.com/develop/ui/compose/performance/stability/strongskipping)を試すために変更した設定内容をメモしておきます。

## 手元の環境
- Android Studio Koala | 2024.1.1
- Kotlin 1.9.24
- Compose Compiler 1.5.14
- Compose Bom androidx.compose:compose-bom:2024.06.00

## app/build.gradle 

```groovy
android {
   kotlinOptions {
        freeCompilerArgs += [
                "-P",
                "plugin:androidx.compose.compiler.plugins.kotlin:experimentalStrongSkipping=true",
        ]
    }

   composeOptions {
        kotlinCompilerExtensionVersion '1.5.14'
    }    
}    
```
ChatGPTによるChatGPTの紹介


## ChatGPTの仕組みを探る

こんにちは！前回に引き続き、今日はChatGPTの仕組みについて深堀りしていきます。どうやって会話を理解し、応答を生成しているのか、一緒に見ていきましょう。

### 1. Transformerアーキテクチャ

ChatGPTはTransformerというニューラルネットワークのアーキテクチャをベースにしています。Transformerは2017年に発表され、その後自然言語処理の分野で大きな進化を遂げました。その特徴は以下の通りです。

- **Self-Attention（自己注意機構）:** 文章内の各単語やトークン間の関係性を計算し、文脈を理解します。
- **Multi-Head Attention（多重注意機構）:** 複数の異なる表現空間での自己注意を組み合わせて、より豊かな表現を獲得します。
- **Feedforward Neural Networks（順伝播ニューラルネットワーク）:** 各自己注意層の後に位置ごとの全結合層が続き、非線形変換を行います。

### 2. 学習とファインチューニング

ChatGPTは大規模なテキストデータセットを使って事前学習されます。例えば、ウィキペディアやニュース記事などの巨大なデータセットから、文章の構造や言語のパターンを学習します。この事前学習を通じて、一般的な言語理解能力を獲得します。

その後、特定のタスクに合わせてファインチューニングが行われます。例えば、カスタマーサポートでの応答生成や、特定の専門分野での質問応答などに最適化されたモデルを作成するためです。

### 3. テキスト生成と応答の生成

ChatGPTは学習した知識を基に、与えられた文脈（前後の文脈や質問内容）を理解し、適切な応答を生成します。この過程では以下のステップが含まれます。

- **トークン化:** 文章をトークン（単語や句）に分割し、それぞれのトークンを数値表現に変換します。
- **Self-Attentionを用いた文脈理解:** 入力された文脈の中で重要な部分を特定し、その文脈に基づいて次のトークンを生成します。
- **応答生成:** 入力された文脈に基づいて、次のトークンを予測し、文章を生成します。生成された文章は文法的に正確であり、文脈に沿った意味を持っています。

### 4. 継続的な学習と改善

ChatGPTはオンライン上の新しい情報や使用状況から継続的に学習し、改善されています。ユーザーが多様な質問を投げかけることで、新たな知識や言語パターンを獲得し、日々進化しています。

### まとめ

ChatGPTはTransformerをベースにした先進的な自然言語処理モデルです。大規模なデータセットから学習し、複雑な文脈を理解して自然な会話を実現します。その仕組みを理解することで、その強力さと応用の幅広さがより明確になるでしょう。
【個人開発】アプリを作りながらWebの技術が学習できるサイトを公開！

こんにちは!
ryuと申します。

この度Flaskの学習サイト「Flask WebAcademy」をリリースしました。

https://flask-web-academy.com/

コンセプトは、
**アプリを作りながら、Webの技術が学習できるサイト**
です。

これまで、さまざまな学習サイトを使ってきましたが、ハンズオンで学べてもTodoリストやECサイトまでしか学べず、初級〜上級レベルまで一貫して学べるサイトが無いな〜と思っていました。

そこで、初心者から上級者まで必要な知識が学べる学習サイトを立ち上げました！
## Flask WebAcademyの特徴

Flask WebAcademyとは、Webの知識を作りながら学ぶことをコンセプトにした学習サービスです。
特徴は以下の2つです。
✅Flaskの実行環境をWEBブラウザで提供
✅Webエンジニアに必要な知識を体系的に学べる

### Flaskの実行環境をWEBブラウザで提供
初心者で学習のハードルとなるのが開発環境です。
Flaskを起動するにも、Pythonの実行環境やVscodeのエディターなどさまざまな準備が必要です。
そのような手間を無くしました！

画面の左の「実行環境」をクリックすると・・・
![スクリーンショット 2024-07-10 12.41.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577925/4f1eb370-d117-e38b-cc2a-0f0b61d1c75c.png)
以下のようなVscodeのようなエディターが立ち上がります。ここでは、コードの編集やPythonの設定などを実際の環境のように体験することができます。
![スクリーンショット 2024-07-10 12.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577925/b62c9cc8-935d-e932-1910-43196dcf8ab0.png)
初心者にとって、難しい環境構築の手間を、ブラウザで提供することによって無くしています。
簡単に学習が始められます♪
※現在β版のため、負荷が高まるとサービスが落ちる場合もあります。ご了承ください🙇‍♂️
## Webエンジニアに必要な知識を体系的に学べる
特徴の2つ目は、「Webエンジニアに必要な知識を体系的に学べる」という点です。
Flask WebAcademyは以下のようなカリキュアラムを提供予定です。

:::note info
* Flaskの基本とHello World
* Todoリストアプリの作成で学ぶWeb開発の基礎
* 画像投稿SNSアプリの作成で学ぶユーザー認証
* ブログアプリの作成で学ぶRESTful APIとBlueprint
* チャットアプリ作成で学ぶWeb-Socket
* 脆弱性のあるアプリを作りながら学ぶセキュリティ
* Flaskで学ぶDevOpsの基本と実践
* Flaskで学ぶユニットテストの実践
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577925/1191d377-e6ef-7f4f-fc20-b87fd5edc723.png)

まずは、簡単なWebページを作成するコースからはじまり、ユーザー認証やAPI、WebSocketなどさまざまな内容をWebアプリを作成しながら学んでいきます。
また、データベースやDevOpsなどインフラ周りにも触れて、フルスタックエンジニアへ目指せるようにしています。
あくまでも、現状のカリキュラムなので、ユーザーのニーズを踏まえて決定したいと考えています。ご意見をいただける方は、ぜひサイトのお問い合せよりお願いします。

現在は、β版として公開しています。無料で使えるので、興味のある方はぜひ使ってみてください。

https://flask-web-academy.com/

## Flask WebAcademyの技術スタック
こちらのサービスの技術スタックを公開します。
なにか個人開発やWebアプリを作成したい方は参考にしてください！

* プログラミング言語:Python
* フレームワーク:Flask
* フロントエンド：TailwindCSS
* インフラ、CI/CD:Render
* バージョン管理:Bitbucket

ポイントは早く作り、リリースすることです。
まずはユーザーに使ってもらって、フィードバックをえるために、必要十分な機能のみを実装しています。
その機能を実装する上で、要件を満たせる技術を今回は選定しました。
また、Flaskをリリースする際は、Renderというホスティングサービスを使っています。
Bitbucketの連携やCI/CDとの連携、インフラのコストの安さなどのメリットがあり、Renderを使いました。

個人開発する上での選定ポイントについては、こちらの記事で詳しく解説していますので興味のある方はご覧ください。

https://qiita.com/ryu235464345/items/fa0e4e458759183312d0

## まとめ
今回は、個人開発で作成した、新しいサービスのご紹介でした。
興味のある方はぜひ使ってみて、感想をください！
みなさんのご意見を反映して、さらにより良いサービスに改善していきます。

また、Flaskだけでなく、インフラの学習サービスも運営しているので、Linuxやネットワークを学びたい方は、こちらのサイトをご覧ください。
[インフラ学習サービスのInfraAcademy(インフラアカデミー)](https://engineer-ninaritai.com/)

https://qiita.com/ryu235464345/items/bb5c447c600c8aa08992

ここまでお読みいただきありがとうございました！
【2024年07月版】Ubuntu24.04のデスクトップでGoogle日本語入力を使う方法【Mozc, ibus-mozc, fcitx5-mozc】

# はじめに

Ubuntu24.04を使い始めたので、日本語入力をGoogle日本語入力のLinux版の`Mozc`を使ってみる
入力メソッドには、`ibus` と `fcitx5`　のどちらかを利用する。詳細は後述。

# 設定方法

## インストール

両方インストールしてもいい。

### ibusの場合

```terminal
$ sudo apt install ibus-mozc 
$ ibus restart 
$ sudo apt install mozc-utils-gui
```

### fcix5の場合

```terminal
$ sudo apt install fcitx5-mozc
$ sudo apt install mozc-utils-gui
```

一旦、再起動する。

## 指定のキーでIMEの ON/OFF を切り替える設定

Mozcのプロパティで以下を設定する。ここでは `Ctrl Shift Space` を切り替えキーとする。

- エントリを新規追加して、DirectInput で `Ctrl Shift Space` をソースにして、`Enable IME` を設定
- エントリを新規追加して、Precomposed で `Ctrl Shift Space` をソースにして、`Disable IME` を設定

一旦、再起動する。
再起動後、ターミナルなどで、`Ctrl Shift Space` でIMEが ON/OFF できるようになっている。

Chrome、ターミナル、VSCodeなどで問題なく日本語入力ができる。

## 相互の切り替え

`im-config` で guiから選択してもいいし、以下のコマンドからでもOK。

### ibusに切り替え

```terminal
$ im-config -n ibus
```

### fcitx5に切り替え

```terminal
$ im-config -n fcitx5
```

# ibus と fcitx5 について

ibusとfcitx5は、Linuxや他のUnix系オペレーティングシステムで使用される入力メソッドフレームワークです。これらは、ユーザーが複数の言語や文字セットを簡単に入力できるようにするためのソフトウェアです。それぞれの概要は以下の通りです。

### ibus (Intelligent Input Bus)
- **概要**: ibusは、Linuxデスクトップ環境向けの入力メソッドフレームワークです。多言語入力をサポートし、ユーザーが異なる言語や文字セットを使用してテキストを入力できるようにします。
- **特徴**:
  - 多数の入力メソッドエンジン（IME）をサポートしており、例えば日本語、韓国語、中国語などの入力が可能です。
  - GTK+やQtなどの主要なGUIツールキットとの統合が進んでいます。
  - デスクトップ環境（例えばGNOME）との統合が良好です。
  - プラグインシステムにより、拡張性があります。

### fcitx5 (Flexible Context-aware Input Tool eXtended version 5)
- **概要**: fcitx5は、特に中国語、日本語、韓国語などのアジア言語の入力に強い、モジュラーで柔軟な入力メソッドフレームワークです。fcitxの次世代版として開発されました。
- **特徴**:
  - 高いパフォーマンスと低遅延を実現しています。
  - 豊富なカスタマイズオプションとプラグインシステムを提供します。
  - WaylandやX11などの異なるディスプレイサーバープロトコルをサポートします。
  - ユーザーインターフェースが洗練されており、ユーザーエクスペリエンスが向上しています。

### 比較と選択
- **ibusの利点**:
  - 多言語サポートが広範であり、特に西洋言語のサポートが強い。
  - GNOMEデスクトップとの統合が優れている。
  
- **fcitx5の利点**:
  - アジア言語の入力に特化しており、特に中国語、日本語、韓国語のサポートが強い。
  - カスタマイズ性と拡張性が高い。
  - 最新の技術を採用しており、パフォーマンスが優れている。

どちらを選ぶかは、主にユーザーの使用する言語やデスクトップ環境の好みに依存します。例えば、中国語や日本語を主に入力するユーザーにはfcitx5が好まれることが多いですし、GNOME環境を使用している場合はibusが便利なことが多いです。

# さいごに

簡単でしたね

# 参考リンク

[ubuntu24.04 noble | im-config](https://manpages.ubuntu.com/manpages/noble/man8/im-config.8.html)
【情報】2024年7月12日を過ぎるとGemini 1.0 Pro Vision を指定した API 呼び出しはエラーになるそうです

メール通知されているので知っている人多いとは思いますが、一応メールを画像にして共有しておきます。

多分、gemini-1.5-flashに置き換えてねってことなんだと思います。

![コメント 2024-07-10 133915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35574/d5b4b39e-fdac-3d63-0f86-afe8c2c9f5cf.png)

以上です。

補足：確かに一箇所だけ修正したら問題なく動きました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35574/36552997-4166-5ea8-1f4f-bfba91a60eef.png)

![Screenshot 2024-07-11 09.36.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35574/ddb16992-44c8-80ad-d71a-73a6e0a476f0.png)
SSH接続について先生と学習しよう


## SSH接続について知ろう

こんにちは！今日はSSH接続についてお話ししましょう。SSHって何？どうやって使うの？という疑問に答えていきます。安心してください、基本的なことから説明しますので、一緒に学んでいきましょう。

### 1. SSHって何？

まず、SSHとはSecure Shellの略で、ネットワーク上の他のコンピュータに安全に接続するためのプロトコルなんです。リモートサーバーにログインしたり、ファイルを転送したりするのに使われます。簡単に言うと、インターネット経由で別のコンピュータを操作できる便利なツールですね。

### 2. SSHのインストール

SSHは多くのオペレーティングシステムに標準でインストールされていますが、念のためインストール方法も見ておきましょう。

**LinuxやMacOSの場合**
SSHクライアントは通常プリインストールされています。確認するには以下のコマンドを使います。
```bash
ssh -V
```
このコマンドでバージョン情報が表示されればOKです。

**Windowsの場合**
Windows 10以降にはOpenSSHクライアントが含まれています。PowerShellで確認してみましょう。
```powershell
ssh -V
```

### 3. SSH接続をしてみよう

SSHで接続するのはとても簡単です。基本のコマンドはこちら。
```bash
ssh username@hostname
```
例えば、自分のユーザー名が`user`で、接続したいサーバーのIPアドレスが`192.168.1.100`だとします。この場合、以下のように入力します。
```bash
ssh user@192.168.1.100
```
これでリモートサーバーに接続できます！

### 4. SSHキーを使ってもっと安全に

パスワードだけだと心配？そんなときはSSHキーを使うといいですよ。これでセキュリティが強化されます。

**SSHキーの生成方法**
まずはキーを生成します。
```bash
ssh-keygen
```
これを実行すると、保存場所を聞かれますが、デフォルトのままでOKならEnterを押すだけ。パスフレーズも設定できますが、空のままでも大丈夫です。

**公開鍵のコピー**
生成した公開鍵をリモートサーバーにコピーします。
```bash
ssh-copy-id username@hostname
```
これでパスワードなしで接続できるようになります。

### 5. SSH設定ファイルを使いこなそう

SSH接続をもっと簡単にするために、`~/.ssh/config`ファイルを使います。ここに設定を書いておくと、短いコマンドで接続できるようになります。

**設定例:**
```plaintext
Host myserver
    HostName 192.168.1.100
    User user
    IdentityFile ~/.ssh/id_rsa
```
この設定を追加すると、以下のコマンドだけで接続できます。
```bash
ssh myserver
```
便利ですよね！

### まとめ

いかがでしたか？SSH接続はリモートサーバーに安全にアクセスするための強力なツールです。基本の使い方やセキュリティを強化する方法を学ぶことで、リモート作業がよりスムーズにできるようになります。ぜひ試してみてくださいね！
mjsとcjsの違いって何？　普通のjsとどう違うの？　ChatGPTに聞いてみた

## `mjs` と `cjs` の違い

JavaScriptのモジュールシステムには、主に`mjs`（ECMAScript Modules）と`cjs`（CommonJS）の2種類があります。この記事では、これらの違いについて詳しく説明します。

### 背景

JavaScriptはもともとブラウザ上で動作するスクリプト言語として開発されました。初期の頃は、モジュールという概念が存在せず、全てのコードはグローバルスコープで実行されていました。しかし、プロジェクトが大規模化するにつれて、コードの再利用や分割が求められるようになり、モジュールシステムが導入されました。

#### CommonJS (cjs)
CommonJSは、サーバーサイドJavaScript（特にNode.js）でのモジュール管理のために開発された標準です。Node.jsは2009年に登場し、そのモジュールシステムとしてCommonJSを採用しました。CommonJSはシンプルで直感的な設計が特徴です。

#### ECMAScript Modules (mjs)
ECMAScript Modulesは、JavaScriptの公式標準であるECMAScriptによって定義されたモジュールシステムです。ES6（ES2015）で正式に導入され、ブラウザ環境とサーバー環境の両方で動作することを目指しています。

### 1. モジュールのインポートとエクスポート

**CommonJS (cjs)**
```javascript
// インポート
const module = require('module-name');

// エクスポート
module.exports = {
  functionName,
  variableName,
};
```

**ECMAScript Modules (mjs)**
```javascript
// インポート
import { functionName, variableName } from 'module-name';

// エクスポート
export const functionName = () => { ... };
export const variableName = 'value';
```

**違い:**
- `cjs`では`require`と`module.exports`を使用します。
- `mjs`では`import`と`export`を使用します。

### 2. 実行環境

- **CommonJS (cjs):** Node.js環境で主に使用されます。Node.jsのデフォルトモジュールシステムです。
- **ECMAScript Modules (mjs):** ブラウザ環境とNode.jsの両方で使用可能です。特にES6以降の標準です。

**違い:**
- `cjs`は主にサーバーサイド（Node.js）で使用されます。
- `mjs`はクライアントサイド（ブラウザ）とサーバーサイドの両方で使用されます。

### 3. 非同期処理

- **CommonJS (cjs):** モジュールの読み込みは同期的に行われます。つまり、モジュールの読み込みが完了するまで他の処理はブロックされます。
- **ECMAScript Modules (mjs):** モジュールの読み込みは非同期的に行われます。これにより、パフォーマンスが向上します。

**違い:**
- `cjs`は同期的な読み込みを行います。
- `mjs`は非同期的な読み込みを行い、パフォーマンス向上に寄与します。

### 4. 拡張子

- **CommonJS (cjs):** `.js` 拡張子を使用します。
- **ECMAScript Modules (mjs):** `.mjs` 拡張子を使用します。また、`package.json` で `"type": "module"` を設定することで `.js` 拡張子も使用可能です。

**違い:**
- `cjs`は`.js`拡張子を使用します。
- `mjs`は`.mjs`拡張子を使用し、設定によって`.js`もサポートします。

### 5. 名前空間

- **CommonJS (cjs):** モジュール全体が1つのオブジェクトとしてエクスポートされます。
- **ECMAScript Modules (mjs):** 各エクスポートが独自の名前空間を持ちます。

**違い:**
- `cjs`はモジュール全体が1つのオブジェクト。
- `mjs`は各エクスポートが独自の名前空間。

### 6. デフォルトエクスポート

**CommonJS (cjs)**
```javascript
module.exports = functionName;
```

**ECMAScript Modules (mjs)**
```javascript
export default functionName;
```

**違い:**
- `cjs`はデフォルトエクスポートが標準。
- `mjs`は`export default`を使用。

### まとめ

- **CommonJS (cjs):** Node.jsで広く使用されている伝統的なモジュールシステム。同期的なモジュール読み込み、`.js`拡張子。
- **ECMAScript Modules (mjs):** 新しい標準。ブラウザとNode.jsの両方で使用可能。非同期的なモジュール読み込み、`.mjs`拡張子。

プロジェクトのニーズに応じて使い分けることが重要です。既存のNode.jsプロジェクトでは`cjs`、新しいプロジェクトやブラウザでも動作させたい場合は`mjs`を選ぶと良いでしょう。
NextUIのAccordionを任意のタイミングで全て閉じる方法

ドキュメントにも明記されておらず、小一時間悩んだので・・・

# ドキュメント

https://nextui.org/docs/components/accordion

# 結論

propsの`selectedKeys`を使います

stateを宣言して
```react
import { Key } from '@react-types/shared';

const [selectedKeys, setSelectedKeys] = useState<Iterable<Key>>([]);
```

`selectedKeys`のpropsと、`onSelectionChange`のイベントに設定します
```react
<Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
```

そして、閉じたいタイミングで以下を呼べば全て閉じます
```react
setSelectedKeys([])
```
演算子と日本語表現まとめ

## はじめに
どんな言語でも必ず使う演算子。
仕様書ではそれを日本語で表現することも多いです。（補足としてコードで書く場合もありますが）

未満・以下の違いや、比較するのは時間か単なる数値かでも日本語でのわかりやすい表記は変わってきます。
現在設計業務をしており、なんて書けばいいのか自分でも混乱することが多いのでまとめてみました。


## 演算子と日本語表現一覧

|演算子|日本語表現|備考|
|---|---|---|
|=|一致すること、等しいこと|=は単純演算子、==は等価演算子と呼び言語によって異なります|
|<>|一致しないこと、等しくないこと、異なること|ノットイコール。言語によっては^=表記|
|<|未満であること、～より小さいこと、△月より過去〇ヶ月未満であること|比較する値を**含みません**|
|>|～より大きいこと、△月より〇ヶ月未来であること|比較する値を**含みません**、超過とも言えますがその表現は見聞きしたことがないです|
|<=|以下であること、△月を含む過去〇ヶ月以内であること|比較する値を**含みます**|
|>=|以上であること、△月を含む未来〇ヶ月以上であること|比較する値を**含みます**|

数値の比較に関しては、未満・～より大きい・以下・以上で伝わります。

日付や時間に関しては、未満・～より大きい・以下・以上だとわかりにくいので私は過去・未来を併せて記載しています。
現在を起点として過去か未来かと時間軸を記載したりなども仕様書作成時には行っています。

## 文字列の比較について

文字列に関しては`=`か`<>`しか使用することはない認識です。
一致する・しないしか判定のやりようがないので…。ただ完全一致ではなく、部分一致、前方一致、後方一致は下記のように日本語では表現します。

- 部分一致：〇〇という文言が含まれる場合
- 前方一致：先頭に〇〇という文言がある場合、先頭△文字が〇〇である場合
- 後方一致：末尾に〇〇という文言がある場合、末尾△文字が〇〇である場合

一番使用するのは部分一致ですかね。後方一致は条件としてあまり見たことがないです。

## おわりに

私の場合は、コードを書く際に仕様書を見て未満って比較対象は含まれるっけ？含まれないっけ？と最初は常々ググって確認していました…。ややこしいですよね。

自分が仕様書を書くようになるとなんて書けば一発で伝わるだろう？と悩みます。プログラマーの方には演算子で言えば一発で伝わるのですがお客様先には日本語でご理解いただくので難しいところ…。

ただ、設計側も開発側もみんな人間なので認識齟齬が起きないように都度確認は行うべきとは常々思います。

わかりやすく書く努力や理解を早くする努力と合わせて、認識確認も行って手戻りの少ないようにお仕事していきたいですね。

……まぁ理想と現実大体ズレますけど！

#### 急な仕様変更とか！！！！！
ReactのuseStateの値がすぐに更新されない理由を誤って理解しがちな件について

:::note info
本記事は内容の訂正のため2024/7/29に更新しました。
:::

## 「state 更新 反映されない」を検索するまで
Reactにまだ慣れていない段階で開発をしているとuseStateの問題に詰まってこのような検索をする方は多いかなと思います。
私もその一人で、公式のチュートリアルを一通りやったにも関わらずこの問題に詰まってしまったのは忸怩たる思いでございます。

「useStateで定義した値はset関数で更新できて、useStateはフックなので実行すると画面が更新される」というのはまずReactを勉強する最初の段階で理解するでしょう。
そこで、言われた通りにuseStateで値を定義し、ユーザーの操作によって画面を更新させるコードを書きます。
~~~javascript
import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1); // numberに1を足して更新
        console.log("number", number); // numberの値をコンソールに出力
      }}>+1する</button>
    </>
  )
}
~~~
こちらはとても単純なコードで、numberというstetaを定義し、「+1する」というボタンをクリックすると`setNumber(number + 1);`でnumberの値を一つ増やしてその値を`console.log`で出力しようというものです。

すでにReactを理解している方ならわかると思いますが、最初に`console.log`で出力されるnumberの値は __0__ になります。

ここで「え、`setNumber(number + 1)`でnumberは`+1`されたんじゃないの？なんで0のままになってるんだ？」となった方が
「react state 更新 反映されない」
と検索するわけです。はい、検索しました。

## 結果: 公式のチュートリアルに助けられた

一度チュートリアルは学習していたので、改めてuseStateに関する内容を確認したとき、すぐに思い出してこの現象の原因を理解できました。

なので __stateが更新されない問題に関する理解と対処法については、結論、[チュートリアルのこちらの章](https://ja.react.dev/learn/state-as-a-snapshot)を読んでください。__

チュートリアルで丁寧に解説されておりますので、原因や対処法について本記事ではあえて説明いたしません。
ポイントは 
- __「スナップショット」が意味するもの__
- __レンダーのトリガ__ 
の二つです。

https://ja.react.dev/learn/state-as-a-snapshot

## 誤った情報が多く見受けられた

しかしこのチュートリアルにたどり着くまで、いくつかの誤った情報や誤解に翻弄されました。
それに関しては[こちらの記事](https://qiita.com/honey32/items/ee8d1577e68b0d58678d)でも紹介されており、この記事を読んだ時にそれらが誤った情報であると確信を持つことができました。（感謝いたします。）

（↓※正しい記事）

https://qiita.com/honey32/items/ee8d1577e68b0d58678d

私が実際に確認した誤った情報を紹介します。

### ①誤った理解「stateの更新は非同期で実行されるから反映が遅れる」

こちらは上記の記事でも言及されていますが、「set関数によるstateの更新は非同期で実行されるから、更新はすぐには反映されないんだよ」的な記事が見受けられました。

もし更新が非同期で実行されることが原因なのであれば、更新後に`setTimeout`などで少し待機してからログ出力をすれば更新された値が出力されるはずですが、試してみても実際そうはなりません。

~~~javascript
const [number, setNumber] = useState(0);
...
    <button onClick={() => {
        setNumber(number + 1); // 0+1でnumberを1に更新 → レンダリングをトリガー！
        // 非同期の更新が完了するのを待機してみても結果は同じ
        // setTimeout(() => {
        //  console.log(`5秒後: ${number}`);
        //}, 5000);
        console.log("number", number); // number 0 が出力される →「1じゃないの？」
    }}>+1する</button>
...
~~~

更新が反映されないように見えるのは、`onclick`ハンドラとして実行されるコールバック関数内では、関数実行開始時のstateを参照するためです。その関数内で実行されたものである限り、更新後にいくら待機しても前の値が参照されます。

### ②誤った理解「関数が呼び出された後にstateが更新されるから更新がすぐに反映されない」

__Reactはイベントハンドラでのstateの更新を、最後にバッチ処理でまとめて行う__ という事実があります。
公式ドキュメントを見ると、イベントハンドラに渡されたコールバック関数内で仮に複数回stateの更新を行なったとしてもその都度更新処理が走るのではなく、バッチ処理として最後にまとめて行われると述べられています。

https://ja.react.dev/learn/queueing-a-series-of-state-updates

これだけを読むと、誰もが「コールバック関数の最後にstateがまとめて更新されるから、途中のログ出力時にはまだ反映されていないんだ」と思うはずです。
しかし、実際のところは「stateの更新が反映されていない」という現象と直接は関係ありません。

これも結局同じ説明になりますが、`onclick`ハンドラに渡されているコールバック関数内では、関数実行開始時のstateを参照しているというだけです。

## まとめ

誤った情報が悪いのではなく、ちゃんと公式のドキュメントを確認したり、複数の情報を集めることが大切だよということを学びましたし、それをお伝えしたいという思いで本記事を作成しました。
というか、私自身、とある技術に関して誤解をしたまま記事にして公開してしまったこともあります。
そのときはかなり反省しましたが、私としては「学んだことはアウトプットして知識を定着させよう」くらいのノリで記事を書いていますので、逆に記事を参照するときは「一般人が書いたネットの記事なんてそんなもんよな」と思いながら情報を集めることができるようになりました。
C#とEntity Framework Coreでデータ更新していたら、ある日突然更新ができなくなった話。

# はじめに
C#とEntity Framework Coreでデータ更新を行う処理を作成し、数年間エラーなく処理が動いていたプログラムがありました。ある日、更新できず処理が止まってしまう事態となりました。

今回はその現象のプログラムと解決策をとなります。

# 問題となった処理

```code.cs
Models.HogeDBContext db = new Models.HogeDBContext();

var items = db.V_Table                     // Viewテーブル
              .Where(r => r.hoge == hoge); // なんらかの条件式

foreach (var item in items)
{
    // なんらかの処理
    var data = db.T_Table
                 .Where(r => r.id == id); // idから1件データを取得
    if(data == null)
    {
        data = new T_Table {/* パラメータ追加 */}
        db.T_Table.Add(data);   
    }
    else
    {
        // dataの値を更新
        db.Entry(data).State = EntityState.Modified;
    }
    db.SaveChanges(); // ここで止まる
}

```

# エラー内容
上記処理の **db.SaveChanges()** で止まり、初回は **An error occurred while saving the entity changes. See the inner exception for details.** が出力され、2回目以降は **新しいトランザクションは許可されません。他のスレッドがこのセッションで実行されています。** と出力され続けるようになりました。

# 原因の考察
データが日々増えてくる事でView **V_Table** のパフォーマンスが遅くなる事で発生していると考えました。
また、このViewは **リンクテーブル** もJOINしている事で一層のパフォーマンス低下を及ぼしていると思われます。

これらが原因でIQueryableとして取得されたデータを直接ループ内で操作してしまい、データベースへのアクセスが繰り返され、トランザクションや接続の問題が発生しやすくなったのだと考えます。

この部分（View）の変更はテストを含めると時間がかかるので以下の方法で解決しました。

# 解決策

### ToArray()の使用
ToArray()メソッドを使用することで、クエリが即時実行され、結果が配列としてメモリ内に格納されます。クエリの実行がループの外で行われるため、遅延実行による問題も解消されます。

修正後のコードでは、ToArray()を使用してクエリを即時実行し、結果を配列として格納しています。これにより、データベースへのアクセスがループの外で一度だけ行われ、トランザクションの競合が発生しにくくなります。

```code修正後.cs
var items = db.V_Table                     // Viewテーブル
              .Where(r => r.hoge == hoge)  // なんらかの条件式
              .ToArray();                  // ToArray()で必要なデータを取得
```

# まとめ（教訓）
* 遅延実行する必要が無いものはToArray()等で確定させる