OmniAICreator/Qiita-1.07M huggingface dataset:
No-IPを使って無料でドメインを取得し、自宅サーバーやリモートアクセスを便利にする方法

## はじめに
本記事では、No-IPを利用して無料でドメインを取得する方法について詳しく説明します。

これまで、お名前.comなどで有料のドメインを購入することが多かったですが、No-IPを利用することで無料でドメインを取得できることを知りました。

動的IPアドレスを持つユーザーや、手軽にドメインを取得したい方にとって、有用な情報となれば幸いです。

## 前提条件

:::note info
今回の必要な知識は以下になります。
・メールアカウント（確認用）
・No-IPの利用に関する基本的な理解
:::

## 知識整理
No-IPは、動的DNSサービスを提供するプラットフォームです。これを利用することで、IPアドレスが変わるたびに自動でドメイン情報を更新することが可能になります。

主にホームサーバーやリモートアクセスの用途に利用されます。

:::note warn
さらに詳しく知りたい場合は、以下のリンクも参考にしてください。
**No-IPについて**
参考記事：https://www.wtw.jp/ccd/common/information/DDNS-noip-info.pdf

参考記事：https://www.try-e.co.jp/manual/getnoip.pdf
:::

## 取得の流れ

まず、No-IPの公式サイトにアクセスし、無料アカウントを作成します。次に、アカウントにログインして希望するドメイン名を選択し、登録を行います。

最後に、ドメインが正常に取得できたことを確認し、必要に応じて設定する流れとなっています。

詳細な手順は以下になります。

```
1. No-IPのウェブサイトにアクセス
No-IPの公式サイトにアクセスします。

2. アカウントを作成する
画面右上の「Sign Up」ボタンをクリックし、必要な情報を入力してアカウントを作成します。

3. メール確認
登録したメールアドレスに確認メールが送信されるので、リンクをクリックしてアカウントを確認します。

4. ログインする
再度No-IPのサイトに戻り、登録したメールアドレスとパスワードでログインします。

5. ホストを作成する
ダッシュボードに移動し、「Dynamic DNS」セクションから「Create Hostname」ボタンをクリックします。

6. ホスト名とドメインを選択
希望するホスト名と、提供されている無料ドメイン（例: noip.me）を選択します。

7. IPアドレスの設定
表示されるIPアドレスを確認し、「Create Hostname」ボタンをクリックしてホストを作成します。

8. 確認と管理
ダッシュボードに作成したホストが表示されるので、管理を行います。
```

ここでは、「honda.zapto.org」というドメインを取得してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/513d327f-fbea-54fe-4f6d-2c2c3425de1c.png)

## 取得後の名前解決確認

ドメイン取得後、端末から名前解決が正常に行われているか確認します。具体的には、以下のコマンドを端末で実行します。

```
nslookup honda.zapto.org
```

権限のない回答として、外部のDNSサーバーから名前解決の結果が返ってきていることが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/a2e24125-d8a4-3b02-aef6-a1dd82ef7f7d.png)

次に、以下のコマンドでpingの結果を確認します。

```
ping honda.zapto.org
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/372445f0-19fc-a46a-8b8c-0747feb0d265.png)

pingコマンドの結果も正常に返ってきました。正しいIPアドレスが返ってくるか確認し、必要に応じて設定を行なってください。

## まとめ
No-IPを使用することで、手軽に無料のドメインを取得できることがわかりました。この手順を参考に、ぜひ自分のプロジェクトやサーバーに活用してみてください。

次回は、今回無料で取得した独自ドメインを使い、自宅環境にメールサーバーを構築してみたいと思いますので、楽しみにしていてください！

## 注意事項

・無料プランでは、30日ごとにホスト名を更新する必要があります。
・商用利用の場合は、有料プランを検討することをお勧めします。

## 参考記事
https://nw.t-spirits.com/synology/no-ip-com/

https://moticat.net/?p=142
初めてのディープラーニング用語解説！〜エポック、イテレーション、損失関数ってなに？〜


# はじめに
ディープラーニングの勉強を始めると、専門用語がたくさん出てきて「これっていったい何？」と戸惑ってしまうことがありますよね。今回は、ディープラーニングの基本用語について、わかりやすく説明していきます。記事を読み終わる頃には、ディープラーニングの言葉がぐっと身近に感じられるようになるはずです！

## 1. エポック（Epoch）って何？
### おさらい：そもそも「学習」ってどうやるの？
ディープラーニングでは、モデル（AI）に「データ」を与えて「学習」させます。モデルがデータを見て、何度もパターンを学んでいくことで、だんだん賢くなるんです。この「何度もデータを見る」という行為に関連するのが「エポック」です。

### エポックは学習の1サイクル！
1エポックは、「すべてのデータを一通り使ってモデルを学習させる1回のサイクル」のことを指します。例えば、1000枚の猫と犬の画像があるとすると、モデルがその1000枚をすべて使って学習するのが1エポックです。

> **例え話**: エポックは「教科書を1回全部読む」ことです。1回読んだだけでは理解できないこともありますが、何度も読むことで少しずつ理解が深まりますよね。

- **まとめ**: エポック = 全データを1回学習すること

---

## 2. イテレーション（Iteration）って何？
### データは一度に全部使わない？
ディープラーニングでは、大量のデータを一度にすべて使うのは難しいことがあります。そこで、データを**バッチ**（小さなグループ）に分けて、少しずつモデルに与えていきます。ここで登場するのが「イテレーション」です。

### イテレーションはミニバッチ単位の学習！
1イテレーションは「1つのバッチをモデルに学習させる1回のステップ」のことです。例えば、1000枚の画像を100枚ずつのバッチに分けると、1エポックで10イテレーション行われることになります。

> **例え話**: イテレーションは「教科書の章ごとに学ぶ」ことです。教科書を一気に全部読むのは大変だから、まずは1章ずつ学び、それを積み重ねていくイメージです。

- **まとめ**: イテレーション = 1バッチ（小分けのデータ）を学習すること

---

## 3. 損失関数（Loss Function）って何？
### モデルはどうやって「失敗」を学ぶのか？
モデルがどれだけ賢くなったかを判断するためには、**正解との差**を計算する必要があります。これが「損失（ロス）」です。損失関数は、モデルがどれだけ間違えているかを数値化する仕組みです。

### 損失関数はAIの「間違い探し」！
損失関数は、モデルが出した予測と本当の答え（正解データ）を比較して、「どれくらい間違っているか」を計算します。損失が大きいほど、モデルは正解から遠いということです。この損失を減らしていくのが、ディープラーニングの目標です。

> **例え話**: 損失関数は「テストの点数」みたいなものです。点数が低い（損失が大きい）と間違いが多く、点数が高い（損失が小さい）と正解に近いことを意味します。モデルはテストの点数を上げるために、何度も勉強（学習）していくのです。

- **まとめ**: 損失関数 = モデルがどれくらい間違えたかを測る指標

---

## 4. 学習率（Learning Rate）って何？
### モデルが「どのペースで」学ぶか
学習率は、モデルがどのくらいのペースで学習するかを決める値です。値が大きいと、大きく学習が進み、値が小さいとゆっくり学習が進みます。大きすぎると間違った方向に進んでしまい、小さすぎると学習が進まないので、ちょうどいいバランスを見つけるのが大事です。

> **例え話**: 学習率は「自転車のペダルをこぐ速さ」です。速すぎると制御が効かずに転んでしまうし、遅すぎると目的地にいつまでもたどり着けません。ちょうどいいスピードで進むことが重要です。

- **まとめ**: 学習率 = モデルがどれくらいの速さで学習するか

---

## 5. バッチサイズ（Batch Size）って何？
### モデルに与えるデータの「ひと口サイズ」
バッチサイズは、モデルに一度に渡すデータの数です。大きなバッチサイズを使うと、モデルが一度にたくさんのデータを学習できますが、計算コストが高くなります。逆に小さなバッチサイズでは、一度に少ししかデータを見ないため、モデルがじっくり学習するイメージです。

> **例え話**: バッチサイズは「ひと口で食べるご飯の量」です。一度にたくさん食べると効率的だけど、お腹がいっぱいになるのが早い。少しずつ食べると消化は良いけど、時間がかかるのと同じです。

- **まとめ**: バッチサイズ = モデルが一度に学習するデータの数

---

## 6. 過学習（Overfitting）って何？
### モデルが「教科書だけ覚えちゃう」状態
過学習とは、モデルが訓練データを完璧に覚えすぎて、新しいデータに対してうまく予測できなくなる状態です。まるで教科書の内容だけを丸暗記して、応用問題が解けない生徒のような状態です。

> **例え話**: 過学習は「テスト勉強で模範解答だけを覚えて、本質を理解していない」状態です。模試では高得点だけど、応用問題が出ると撃沈する、そんな感じです。過去問の選択肢のみ覚えていくと本試験で故傾向を変えられて大量に再試験...のような医学生あるあるを思い出してしまいます。

- **まとめ**: 過学習 = 訓練データに依存しすぎて、新しいデータに対応できなくなる状態

---

## 7. まとめ

ディープラーニングの用語は最初は難しく感じるかもしれませんが、例え話を使ってイメージすると、少しずつ理解できるようになります。

- **エポック**: 全データを1回学習するサイクル
- **イテレーション**: 1バッチ（データの小分け）を学習する1ステップ
- **損失関数**: モデルの間違い具合を測るテストの点数
- **学習率**: モデルが学習する速さ
- **バッチサイズ**: モデルが一度に学習するデータの量
- **過学習**: 訓練データを覚えすぎて新しいデータに弱くなる状態

これらの概念を理解すれば、ディープラーニングの学習がもっと楽しくなります。さあ、次のステップに進んでみましょう！
【SSv5】General Informationに情報が表示されない場合の対処法

## 環境
OS：Windows 10, 11(両方で確認)  
IDE：Simplicity Studio Version: SV5.9.2.1  
マイコンボード：PCB4001 Rev A03  


## 背景
BluetoothのデモS/Wを書き込もうとしたところ、「General Information」に「Connected Via」「Debug Mode」「Adapter FW」が表示されなかった。  
ボード設定やSDKの指定ができないため、S/Wの書き込みができなかった。  
![General_Infomation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295695/fc3d631c-4ce7-3070-1469-5a23485fff7e.png)
  


## 対処方法
IDEのバージョンを上げたら直ったため、バージョンによる不具合と判断した。(間違ってたらすみません:pray:)  
そのため、バージョンを切り替えることで対処する。  
ダウングレード方法はオフラインインストーラーがあれば可能のようです。  
もしオフラインインストーラーがない場合は、頑張って探すかアップデートを待ちましょう。  

ダウングレードに関するQ＆A

https://community.silabs.com/s/question/0D58Y0000AEPQEjSQP/how-to-downgrade-simplicity-studio-v56-to-v55?language=ja


SV5.9.2.1→SV5.9.3.0にアップデートしたら直った。
![version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295695/4dfbf0d5-cbd0-1394-516b-7c05d651a772.png)

  ![General_Infomation_after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295695/8922f363-f181-9586-eb04-df5ab3e9d663.png)



## おわりに
今後もこのような不具合が発生する可能性を懸念して、共有しておきます。
バージョンを上げる際は気を付けたほうがいいかもしれない。  
特に期日間際などは、いったんアップグレードを保留にしておこう。(1敗)
007 AI屋さんの　追加学習済み　LLMの　Webアプリをクラウドデプロイ　実践編



AI屋さんの　追加学習済み　LLMの　Webアプリをクラウドデプロイ　実践編


追加学習済みのＬＬＭを安価に共有する方法です。
完成ずみのwebapiを使って、
既にある、皆様のポータルサイトで呼び出したり
別途、独立サイトで運用したり　色々できます。


例：カスタムドメイン版

https://bono0.com/

https://
bono0.com/




![Screenshot_20240920-070015.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237930/881a0174-e7f6-d6e9-c493-eb6e14500956.jpeg)



AI屋さんが、作ったサービスをデプロイする方法として、

　１、ソースコードごと渡したり
　２、パソコンごと渡したり
　３、ローカルネットワーク内
　４、クラウドとインターネットと
　５、サーバーありと
　６、サーバーレス
 
保安に認証に管理に費用に等々
ご苦労がおありかと思います。

１番で済むなら、それに越したことはないのですが、
色々要求がある場合、サクッと６番で済ませましょう。

googleさんのapp engineの

公式資料を要約するならば
真っ黒なターミナルにコマンド入力の最短の手順としては、
下記のリンクから　ファイル一式をダウンロードして
コマンド一発
　gcloud app deploy
で完成です。

何処かの誰かが勝手に決めた
お約束さえ知っていれば、たったこれだけで　クラウドスペックの
webサーバーをデプロイできます。


ミニマム構成で動く事を確認できたら、サンプルコードに肉を盛ってください。
　html,css,app engine,gcp,flask,python,LLM
どれもサクッと済ませましょう。
それ以外の事は、サーバーレスにお任せです。

htmlサンプル

https://github.com/GoogleCloudPlatform/python-docs-samples/tree/main/appengine/standard_python3/building-an-app/building-an-app-1



webapiサンプル

https://github.com/GoogleCloudPlatform/python-docs-samples/tree/main/appengine/standard_python3/hello_world

 




目次


第七回：AI屋さんの　Webアプリをクラウドデプロイ　実践編
本書

第六回：追加学習済み　LLMの　flaskでWebアプリをクラウドデプロイ


https://qiita.com/bono0/items/968264adea0183d7a4fa


第五回：追加学習済み　LLMの　streamlitでWebアプリをクラウドデプロイ

https://qiita.com/bono0/items/2f7fbdbd1ad843e7858e




第四回：追加学習済み　LLMのwebapiをクラウドデプロイ

https://qiita.com/bono0/items/f954ca48d19cc51fb344



第三回：追加学習済み　LLMのwebapiを作る

https://qiita.com/bono0/items/f3330d8a57024e7cd44b


第二回：大規模言語モデルの簡単な追加学習、実践編

https://qiita.com/bono0/items/bd0a01e50d5804bdacf3



第一回：大規模言語モデルの簡単な追加学習

https://qiita.com/bono0/items/4a992dc388527d3b99f4



ー完ー
困難は分割せよ！数学の難問とプログラミング的思考の共通点

## はじめに
みなさんは数学の難問に取り組んだことがありますか？解けない問題を前にすると、圧倒されてしまうことがありますよね。しかし、「困難は分割せよ」というアプローチを取れば、難題を一歩ずつ解決することが可能です。この考え方は、数学だけでなく、プログラミングや日常の問題解決にも通じる強力な思考法です。

この記事では、数学の難問とプログラミング的思考に焦点を当て、「困難は分割せよ」の実践的なアプローチを紹介します。

## 1. 困難な問題に直面したとき、どうする？
数学の問題に取り組む際、最も重要なことは**「問題を分割する」**ことです。  
これは、次のようなステップで考えることができます。

### ステップ1: 問題の全体像を理解する
まずは、与えられた問題をしっかりと読み込み、どのようなゴールを達成する必要があるかを理解しましょう。例えば、ある数列の規則性を見つける問題があったとします。

- **例**: 「数列の次の項を求めよ」という問題では、どのような規則が使われているのかを探ります。

### ステップ2: 問題を分割してみる
次に、問題を小さな部分に分解します。これは、部分問題（サブタスク）に分けてそれぞれを解いていくということです。最初の項から順番に規則を探すなど、小さな部分にフォーカスするのが有効です。

- **例**: 数列の一つひとつの項に注目し、それらの間にあるパターンを調べてみます。

### ステップ3: 小さな解を積み重ねる
分割された問題が解けたら、それらの結果を統合して最終的な解答に近づきます。これにより、最初は理解できなかった難問も徐々にクリアになってきます。

---

## 2. プログラミング的思考の核心：「困難は分割せよ」

プログラミングの世界でも、「困難な問題を分割して解決する」というアプローチが重要です。実際、多くのプログラミング言語やアルゴリズムの設計においても、この考え方が核となっています。

### 分割統治法 (Divide and Conquer)
プログラミングで有名なアルゴリズム手法に「分割統治法」があります。  
これは、次の3ステップで問題を解決するアプローチです。

1. 問題を小さな部分に分割する（Divide）
2. 各部分を個別に解決する（Conquer）
3. 解を統合して全体の解とする（Combine）

- **例**: マージソートやクイックソートなどのソートアルゴリズムがこの考え方に基づいています。

### 関数の設計とモジュール化
プログラミングのもう一つの重要な概念は**関数の設計**です。大規模なプログラムでは、すべての処理を一つの関数にまとめてしまうと混乱しやすく、バグも生じやすいです。そのため、処理を「関数」として分割し、モジュール化することが不可欠です。

- **例**: 入力処理、データの変換、出力処理をそれぞれ関数として分割し、後でそれを組み合わせる。

---

## 3. 数学とプログラミングの共通点：困難を分解する

数学の問題とプログラミングには多くの共通点があります。特に「大きな問題を小さな問題に分割する」という考え方は、どちらにも当てはまります。

- **数学**: 難問を簡単な部分問題に分割し、個々の問題を解決して最終的な解を導く。
- **プログラミング**: 複雑な処理を関数やクラスとして分割し、それぞれを組み合わせて大規模なプログラムを構築する。

両者において、目の前の大きな問題に圧倒されず、まずは解ける部分から取り組むことが成功の鍵となります。


## 4. 結論：大きな問題も一歩ずつ

「困難は分割せよ」というアプローチは、数学の難問やプログラミングにおいて非常に有効な手法です。問題を細かく分割することで、解けないと思っていた問題も徐々に理解でき、最終的な解決へとつながります。

数学でもプログラミングでも、難しい問題を解く際は、まずは小さな部分に分解して、一つひとつクリアしていくことが成功への道です。ぜひこのアプローチを活用して、次の難問にチャレンジしてみてください！
【Git】間違えてmasterブランチやdevelopブランチでコミットしちゃった！

どうもこんにちは。

今回は、間違えてmasterブランチやdevelopブランチでコミットしちゃった時の対処法をメモしておきます。

# コミットする前の場合

masterブランチやdevelopブランチで修正をしてしまったが、コミットはしていない！という場合は、以下の手順でコミットすればOKです。

```sh
$ git status    # git addされているファイルがないことを確認
git stash  # 変更を一時保存
git checkout -b feature-branch  # 新しいブランチを作成して切り替え
git stash pop  # 保存した変更を適用
git add <コミットしたいディレクトリやファイルのパス>  # 変更をステージング
git commit -m "作業内容の説明"  # コミット
```

# コミットしちゃった時

## 一番頑張る方法

まず何らかの形でコミットしたコードを残します。（メモ帳とか）

```sh
$ git reset --hard HEAD^1 # 直前のコミットを取り消し
$ git checkout -b <作業ブランチの名前>
# ここでメモしておいたコードをペースト
$ git add <コミットしたいディレクトリやファイルのパス>
$ git commit -m "コミットメッセージ"
```

## cherry-pick を使用する方法

コミットをそのまま新しいブランチに移動させることができます。

```sh
$ git log  # コミットのハッシュを確認してコピー
$ git checkout -b <作業ブランチの名前>  # 新しいブランチを作成
$ git cherry-pick <コピーしたコミットのハッシュ>  # コミットを新しいブランチに適用
$ git checkout develop  # developに戻る
$ git reset --hard HEAD~1  # developから誤ったコミットを削除
```

## インタラクティブrebaseを使用する方法

複数のコミットを移動させたい場合に使います。

```sh
$ git checkout -b <作業ブランチの名前>  # 新しいブランチを作成
$ git rebase -i develop  # インタラクティブrebaseを開始
# エディタで移動させたいコミットを'pick'から'edit'に変更
# rebaseを完了
$ git checkout develop
$ git reset --hard HEAD~<移動させたコミットの数>
```

# まとめ

**インタラクティブ`rebase`を使用する方法** はちょっと難易度高いですね...
自分は`cherry-pick`を使用する方法をおすすめします。

というか、コミットする前にブランチ確認しましょうね！

以上
PyTorchの高速化テク！pin_memoryとnum_workersでデータローディングを最適化しよう！

##  はじめに
こんにちは、今回はPyTorchを使って、データローダーのパフォーマンスを改善する方法について解説します。具体的には、pin_memoryとnum_workersをうまく活用して、GPU上での学習をさらにスピードアップする方法を紹介します。

## 1. データローダーの基本設定
PyTorchでデータをGPUに転送する際、データローダーの設定によって転送速度が大きく変わります。基本的なデータローダーのコードは以下のようになります。

```python
from torch.utils.data import DataLoader

train_loader = DataLoader(dataset=train_dataset, 
                          batch_size=64, 
                          shuffle=True)
```

ただし、この基本設定ではGPUをフル活用できない可能性があります。そこで、`pin_memory`と`num_workers`という2つの重要なパラメータを活用します。

## 2. `pin_memory` とは？
`pin_memory`は、PyTorchでデータをGPUに転送する際の速度を最適化するオプションです。通常、データはCPUメモリ上にロードされ、そこからGPUに転送されます。`pin_memory=True`を指定すると、PyTorchは「ページロック」されたメモリ（ピンメモリ）にデータを保持し、これにより転送が高速化されます。

```python
train_loader = DataLoader(dataset=train_dataset, 
                          batch_size=64, 
                          shuffle=True, 
                          pin_memory=True)
```

### どんな場合に効果があるのか？
`pin_memory=True`は、GPU上でモデルをトレーニングしている場合に特に有効です。CPUメモリからGPUメモリへの転送がボトルネックになっている場合、このオプションがパフォーマンスを向上させます。

## 3. `num_workers` とは？
`num_workers`は、データのローディングを並列処理するためのワーカー数を指定するオプションです。デフォルトでは`num_workers=0`となっており、データのローディングがメインスレッドで行われますが、これを増やすことで、データローディングとGPUでの計算を並行して行うことができます。

```python
train_loader = DataLoader(dataset=train_dataset, 
                          batch_size=64, 
                          shuffle=True, 
                          num_workers=4)
```

### `num_workers`のベストな設定は？
`num_workers`の最適値は、システムのCPUコア数やI/O速度によって変わります。一般的には、CPUのコア数に応じて設定することが推奨されます。例えば、4コアCPUを使っている場合、`num_workers=4`に設定するとよいでしょう。ただし、あまりに多くのワーカーを設定すると、逆にオーバーヘッドが発生する可能性がありますので、試行錯誤が必要です。

## 4. 最適化されたデータローダーの設定例

では、実際に`pin_memory`と`num_workers`を活用した最適化されたデータローダーの設定例を見てみましょう。

```python
train_loader = DataLoader(dataset=train_dataset, 
                          batch_size=64, 
                          shuffle=True, 
                          pin_memory=True,  # ピンメモリを有効化
                          num_workers=4)    # ワーカー数を設定
```

この設定により、データのローディングがCPUの複数スレッドで並列化され、さらにGPUへの転送が効率化されます。

## 5. まとめ

PyTorchのデータローディングのパフォーマンスを向上させるために、`pin_memory`と`num_workers`の設定は非常に有効です。特に、大規模なデータセットを扱う場合やGPUを使用している場合は、これらのパラメータを適切に設定することで、トレーニング全体の速度を大幅に改善できます。

ぜひ、皆さんも自分のプロジェクトでこれらの設定を試して、学習速度を最適化してみてください！
【HTML / CSS】classとidについて

## はじめに
学習したことを自分用の参考書のようにまとめていきます。

## classとは
- classは複数の要素に共通のスタイルや振る舞いを与えるために使います。
- 同じクラス名を複数の要素に付けることができ、再利用性が高いです。
- CSSではクラスを指定するために、ドット（.）を使います。

下記の例では、**class="test"** を持つ2つの要素にスタイルが適用されます。

```haml:html
<body>
    <p class="test">スタイルあり</p>
    <p>スタイルなし</p>
    <p class="test">スタイルあり</p>
</body>
```

```css:css
.test {
    background-color: yellow;
    color: red;
}
```


## idとは
- idはページ内で一意である必要があり、同じidを持つ要素は一つしか存在できません。
- 特定の1つの要素に対してユニークなスタイルやスクリプトを適用するために使用します。
- CSSではIDを指定するためにシャープ（#）を使います。

下記の例では、id="unique"を持つ1つの要素にのみスタイルが適用されます。

```haml:html
<body>
    <p id="test">このテキストは白色で青色の背景です。</p>
    <p>このテキストはスタイルがありません。</p>
</body>
```

```css:css
#test {
    background-color: blue;
    color: white;
}
```


## classとidの使い分け
- class は複数の要素に同じスタイルやスクリプトを適用したい場合に使用します。多くの要素に同じクラス名を使えるので、再利用が可能です。
- id はユニークな要素に対して特定のスタイルやスクリプトを適用したい場合に使用します。1つのページに同じidを複数使ってはいけません。

| 特徴 | class | id |
|:-|:-|:-|
|使用回数|複数の要素に使用可能|ページ内で1つの要素だけが持つ|
|CSSでの指定|ドット (.) を使用|シャープ (#) を使用|
|JavaScriptでの利用|getElementsByClassNameで取得可能|getElementByIdで1つだけ取得可能|



## さいごに
いかがだったでしょうか。

他にもいろいろな記事を書いているのでぜひ読んでいただけたら嬉しいです。
なぜ古典統計学の信頼区間とベイズ統計学の信用区間を区別しなければならないのか

※このスクリプトは統計検定2級、統計検定準1級を学ぶ方を対象としています。

古典統計学の信頼区間とベイズ統計学の信用区間は、どちらも「不確実性」を示す範囲を提供するという点では似ていますが、背後にある解釈や理論的背景が大きく異なるため、区別して運用する必要があります。これを理解するには、それぞれの統計学の枠組みをしっかり把握する必要があります。

# 古典統計学の信頼区間
古典統計学（頻度論的アプローチ）では、信頼区間は「多数のサンプルを無限に繰り返し取った場合に、推定した区間が真のパラメータを含む割合が一定の確率（通常95%など）になる」という概念に基づいています。

## 信頼区間のポイント
* 頻度論的解釈：信頼区間は、たくさんのサンプルを取って計算を繰り返したときに、ある割合の区間が真のパラメータを含むという性質を持っています。例えば「95%の信頼区間」というのは、「無限にサンプルを繰り返し取ったとき、そのうち95%の区間が真のパラメータを含む」という意味です。
* 個々の区間の解釈：一つの信頼区間について「この区間が95%の確率で真のパラメータを含む」と解釈してはいけません。信頼区間は「ランダムなサンプリングプロセスの性質」についての記述です。

# ベイズ統計学の信用区間
一方、ベイズ統計学の信用区間は、事後分布に基づいています。事後分布は、データと事前知識（事前分布）を組み合わせた後にパラメータが取る確率分布です。信用区間は、この事後分布の中でパラメータがある範囲に入る確率を直接表します。

## 信用区間のポイント
* 確率論的解釈：信用区間は、パラメータが「この範囲内にある確率が高い」という直感的な解釈ができます。例えば、95%信用区間は「パラメータが95%の確率でこの範囲に含まれる」という意味です。
* 事後分布に依存：信用区間は、事前分布とデータから導かれる事後分布に基づいています。そのため、事前知識の影響を受けることがあります。

# 両者を区別して利用する理由
1. 解釈の違い：
    * 信頼区間は、パラメータ自体は固定されていると見なし、ランダムに生成されるサンプルによって変動する「区間」についての言及です。一度計算された区間に対しては、「この区間が真のパラメータを含む確率は95%」とは言えません。
    * 信用区間は、パラメータが確率変数として扱われ、パラメータが特定の範囲に存在する確率として直接解釈できます。ここでの区間は「パラメータがこの範囲にある確率が95%」という直感的な意味を持ちます。

1. 計算方法の違い：
    * 信頼区間は、サンプルデータに基づいて、サンプリング分布や標本分布を考慮して計算されます。サンプルサイズが大きくなるにつれて、より正確な区間が得られます。
    * 信用区間は、事前分布と観測データから得られる事後分布を用いて計算されます。事前分布の選択により結果が変わるため、事前情報の影響を受けやすいです。

1. 事前知識の利用：
    * 信頼区間は事前知識を取り入れません。観測データのみに基づいて区間が決まります。
    * 信用区間は、事前知識（事前分布）を活用して計算されるため、事前情報が推定に影響を与えます。特にデータが少ない場合や、強い事前知識がある場合に、事前分布の影響が大きくなります。

1. 頻度論と確率論の違い：
    * 古典統計学は頻度論的立場に基づき、確率は長期的な頻度を表します。信頼区間も、この頻度論に基づく考え方で、「繰り返し試行した場合の割合」という視点を持っています。
    * ベイズ統計学は確率論的立場に基づき、確率は「信念の度合い」を表します。信用区間は、この信念がある区間に対してどの程度集中しているかを示すものです。

# 結論
信頼区間と信用区間は、同じ目的で利用されているように見えますが、背景にある理論や解釈が異なるため、区別して使うことが重要です。実務や研究において、以下のような点を考慮して使い分ける必要があります：

* 信頼区間は、頻度論的に正確な推論をする際に使用されるが、解釈に注意が必要です。特に「一つの信頼区間」に対して確率を直接割り当てることはできません。
* 信用区間は、より直感的に「この範囲に真のパラメータがある確率」を示すため、事前知識が役立つ場合や、より確率論的な解釈が必要な場合に適しています。

どちらの方法を採用するかは、データの性質、事前知識の有無、解釈のニーズに基づいて決定されます。
小ネタ　Amazonで買ったRaspberry Piの25mmファンを交換した話

## これは何？

Amazonで買ったRaspberry Piのファン付きケースのファンがうるさくなったので交換を試みたところ、適合する製品が無い様でちょっと探し回った。なお、同じタイプのケースはすでに終売のようで、ページ自体が存在しなかった。

## QIコネクタと圧着ペンチが必要。
コネクタの付け替えが発生するので、QIコネクタと圧着ペンチのセットがあるとbetter。
既設のファンからコネクタ部と電線だけ切って流用する場合はなくても可。

安いのならこんなセットのがある。うちはこれ。アマチュア作業だからいいんだよ。

https://amzn.asia/d/iNNtUgW


## あと必要なもの

・25mm 5Vの角形ファン
https://amzn.asia/d/6hHEYPd

・M2.6×15mmのなべ小ねじ
近隣のホームセンターとかで探されたし


## 結論

ビィィィィィンってうなってたファンが静かになった。良き哉。
yukicoder No.2795 Perfect Number 解説

[問題文](https://yukicoder.me/problems/no/2795)

# 解説
なんかの検索エンジンで「完全数　一覧」と調べよう。すると、 $10^{18}$ 以下の完全数が $7$ 個しかないことに気付くだろう。
よって、これらとの一致判定を行えばよい。

# 解答例
```C++
#include <bits/stdc++.h>
using namespace std;
using ll=long long;

int main() {
  ll n;cin>>n;
  if(n==6||n==28||n==496||n==8128||n==33550336||n==8589869056||n==137438691328)cout<<"Yes\n";
  else cout<<"No\n";
}
```
ChatGPTを使って目上の先生に丁寧なメールを簡単作成！その便利さに驚いた話

## 目上の先生へのメール、毎回悩んでいませんか？

先生にメールを送るとき、どうしても言葉選びに迷ってしまう。  
誤解を招かないように、丁寧でかつ要点を簡潔に伝える必要があります。  
でも、これって実はすごく難しいんですよね。

- どこまで丁寧にすべきか？
- 失礼にならない表現はどれか？
- 結局何度も修正して時間がかかる...

そんな悩み、ありますよね？でも、僕はそんな悩みを解決する方法を見つけました。それが **ChatGPT** です！

---

## ChatGPTとの出会い

毎回、先生にメールを送るたびに時間がかかる...。  
そこで、思い切って **ChatGPT** を使ってみることにしました。最初は、「本当にAIがそんなにうまく丁寧なメールを作れるの？」と半信半疑。でも、試してみたらこれが思った以上にすごかったんです！

---

## 実際に使ってみた！

例えば、こんなメールを書きたいとします。

```plaintext
件名：研究会発表のご報告

先生

お世話になっております。
先日ご指導いただきました研究発表について、無事に終えることができました。お忙しい中、ご指導いただき誠にありがとうございました。

今後とも、よろしくお願いいたします。
```

これを **ChatGPT** に丁寧にしてもらうために、こんなプロンプトを使いました。

```plaintext
目上の先生に送る丁寧なメール文を作成してください。
件名：研究会発表のご報告
本文：お世話になっております。先日ご指導いただきました研究発表について、無事に終えることができました。お忙しい中、ご指導いただき誠にありがとうございました。
```

結果、ChatGPTはこんな感じで返してくれました。

```plaintext
件名：研究会発表のご報告

〇〇先生

いつも大変お世話になっております。
この度、先日ご指導いただきました研究発表を無事に終えることができました。これもひとえに、先生のご指導の賜物でございます。心より感謝申し上げます。

今後とも何卒よろしくお願い申し上げます。

〇〇
```

めちゃくちゃ丁寧になって感動しました！  
こんなに簡単に、しかも素早く正確なメールが作れるなんて、すごく便利ですよね！
でもちょっとやりすぎな感じもしますので微調整は必須ですが笑笑

---

## ChatGPTでメール作成が一気に楽に！

**AIに任せるだけで、メール文の細かな調整に悩む時間が大幅に削減！**  
「この表現で失礼じゃないかな？」という不安も減り、もっと本質的な仕事に集中できるようになりました。これでミスを心配することなく、スムーズなコミュニケーションが取れるようになりました。

**皆さんも、ぜひ一度試してみてください。**きっと驚くはずです！

---

## まとめ

ChatGPTは、目上の方へのメール作成にも強力なツールです。  
その便利さに、もうメール作成で悩むことはありません。次回、悩むことがあれば、迷わずChatGPTに頼ってみてください！
【CloudFormation】S3バケットアクセスの基本ポリシーの生成

## バケットアクセスのIAMポリシーの作成が面倒
S3バケットを作成後、アクセスするユーザーやロールを制限したいというのは当然な要望な一方、いちいちポリシーを作成するのは面倒に感じます。とりあえずフルアクセスなんてしておくと事故の元になります。

## 基本的なIAMポリシーを事前に作成しておく
理想は拒否設定をしっかり入れておいて、アクセスできるユーザー・ロールのみ明示的に細かく権限を許可していくのが理想なのだが、さほど重要でないバケットにもこの運用は費用対効果に見合わないため
- 書き込み
- 読み込み
- フルアクセス
- リスト

該当のバケットに対してこれらの権限のみのポリシーを作成し、基本的にこれらを組み合わせてアクセスするようにする。

## CloudFormationで解決
バケット名をすげ替えるだけで各バケットのアクセスに関するポリシーを生成したい。
以下が実際にそのまま使えるymlです。
実行時にバケット名の入力が可能なので、ポリシーを作りたいバケットの名称を入れます。

```yml
AWSTemplateFormatVersion: '2010-09-09'
Description: create iam policy for s3 bucket, read only, write only, full access

Parameters:
  BucketName:
    Description: "creating policy backet name"
    Type: String

Resources:
  ReadOnlyPolicy:
    Type: "AWS::IAM::ManagedPolicy"
    Properties: 
      ManagedPolicyName: !Sub "s3-${BucketName}-ReadOnlyPolicy"
      PolicyDocument: 
        Version: "2012-10-17"
        Statement: 
          - Effect: "Allow"
            Action: 
              - "s3:GetObject"
            Resource: !Sub "arn:aws:s3:::${BucketName}/*"

  WriteOnlyPolicy:
    Type: "AWS::IAM::ManagedPolicy"
    Properties: 
      ManagedPolicyName: !Sub "s3-${BucketName}-WriteOnlyPolicy"
      PolicyDocument: 
        Version: "2012-10-17"
        Statement: 
          - Effect: "Allow"
            Action: 
              - "s3:PutObject"
            Resource: !Sub "arn:aws:s3:::${BucketName}/*"
  ListOnlyPolicy:
    Type: "AWS::IAM::ManagedPolicy"
    Properties: 
      ManagedPolicyName: !Sub "s3-${BucketName}-ListOnlyPolicy"
      PolicyDocument: 
        Version: "2012-10-17"
        Statement: 
          - Effect: "Allow"
            Action: 
              - "s3:ListBucket"
            Resource: !Sub "arn:aws:s3:::${BucketName}"

  FullAccessPolicy:
    Type: "AWS::IAM::ManagedPolicy"
    Properties: 
      ManagedPolicyName: !Sub "s3-${BucketName}-FullAccessPolicy"
      PolicyDocument: 
        Version: "2012-10-17"
        Statement: 
          - Effect: "Allow"
            Action: "s3:*"
            Resource: 
              - !Sub "arn:aws:s3:::${BucketName}"
              - !Sub "arn:aws:s3:::${BucketName}/*"

Outputs:
  ReadOnlyPolicyName:
    Description: "read_only_policy_name"
    Value: !Ref ReadOnlyPolicy

  WriteOnlyPolicyName:
    Description: "write_only_policy_name"
    Value: !Ref WriteOnlyPolicy

  FullAccessPolicyName:
    Description: "full_access_policy_name"
    Value: !Ref FullAccessPolicy

```

ymlはシンプルなので、ポリシーの種類を増やすのも簡単です。
このあたりの修正は生成AIに任せてもおそらく完璧に指示通りにやってくれます。

## 改めて
これでこのバケットへのアクセスはある程度調整できるように思えますが、S3フルアクセスの権限があるとこのバケットへのアクセスも許容することとなります。より厳密にやるなら拒否設定なりなんなりする必要があるので注意です。
yukicoder No.2637 Factorize? 解説

[問題文](https://yukicoder.me/problems/no/2637)

# 解説
$P=1\times P$ である。
よって、 $1$ と $P$ を順番に出力すればACできる。

# 解答例
```C++
#include <bits/stdc++.h>
using namespace std;
using ll=long long;

int main(){
  ll p;cin>>p;
  cout<<"1 "<<p<<endl;
}
```
TypeScript で無条件 throw による Unreachable code 判定を回避する

たとえば、このようなコードがあるとする。

```typescript
interface TestType {
  foo: number;
}

function test(data: TestType | null) {
  if (data === null) return 0;
  return data.foo;
}
```

デバッグやテストなどのため、`test` が呼ばれたらとりあえず `throw` したいとする。

```typescript
interface TestType {
  foo: number;
}

function test(data: TestType | null) {
  throw "test"; // 追加
  if (data === null) return 0;
  return data.foo;
}
```

すると、以下のようなエラーが出てしまった。

> Unreachable code detected.
> 'data' is possibly 'null'.

無条件で `throw` しているためその後のコードが実行されない、というのはわかる。
しかし、`data === null` のチェックをしているからその下の `data.foo` の `data` は `null` にはならないはずなのに、これが `null` になりうるという**間違った主張**をされてしまっている。
**迷惑である。**

そこで、これを回避する方法を考えた。

試した結果、`throw` を**条件が必ず真になる `if` 文**の中に入れることで、Unreachable code 判定を回避しつつ、無条件で `throw` を実行できそうであることがわかった。

```typescript
interface TestType {
  foo: number;
}

function test(data: TestType | null) {
  if (1) throw "test"; // 追加
  if (data === null) return 0;
  return data.foo;
}
```

これでエラーが出なくなった。
 `data.foo` の `data` が `null` になりうるという間違った主張もしてこなくなった。

:::note info
```typescript
if (true) throw "test";
```

では、エラーが出てしまった。
:::

今回は、[TS Playground](https://www.typescriptlang.org/play/) の v5.6.2 で検証を行った。
もしも、将来のバージョンで条件 `1` では恒真だとバレてしまい、エラーが出てしまった場合は、

```typescript
if (!false) throw "test";
if (1 < 2) throw "test";
if (Math.sin(1) < 2) throw "test";
```

など、もう少し複雑な条件を試してみるといいかもしれない。(将来のバージョンなので、これらで本当にうまくいくかはわからないが)
MacでIguanaTexを使う

# IguanaTexとは
Microsoft PowerPointのアドインです。LaTexソースを画像に変換してスライドに貼り付けることができます。以前はWindowsのみで使用可能でしたが，Macにも対応したようです。

# 実行環境
M1 MacBook Air
macOS Sonoma 14.6.1
PowerPoint for Mac 16.78

# 1. Homebrewをインストール

:::note info
インストール済みの場合はスキップしてください。
:::

1. [Homebrew](https://brew.sh/ja/)の「インストール」からコマンドをコピーしてターミナルで実行する

    ```console
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    ```

    パスワードの入力が求められるので，入力してEnterを押してください。


1. パスを通す

    ```console
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/xxx/.zprofile

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


1. Homebrewが正常にインストールされていることを確認する
    ```console
    brew --version
    ```
    
    Homebrewのバージョンが出力されれば成功です。

# 2. MacTeXをインストール
インストールは[こちら](https://texwiki.texjp.org/?TeX%20Live%2FMac)を参考にしてください。

    
# 3. IguanaTexをインストール
ターミナルを開いて以下のコマンドを入力します。

```console
brew tap tsung-ju/iguanatexmac
brew install --cask --no-quarantine iguanatexmac latexit-metadata
```
インストール完了後，PowerPointを開くと「IguanaTex」リボンが追加されているはずです。通常は，この段階でIguanaTexを使うことができます。実行時エラーが発生する場合は3. に進んでください。

# 4. パスが通っていることを確認

「Main Settings」を開いて，GhostScript，libgs.9.dylibのパスが通っていることを確認してください。
<img width=500, height=100, src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884650/ef31ee62-c8f1-c708-e54f-d982e0ab9507.png>



# 参考文献
[Homebrew](https://brew.sh/ja/)
[IguanaTex](https://github.com/Jonathan-LeRoux/IguanaTex?tab=readme-ov-file#iguanatex)
LangChain v0.3.0の更新内容まとめ

# LangChain v0.3.0アップデート：主要な変更点と新機能

*この記事は、[LangChainの公式ブログ記事](https://blog.langchain.dev/announcing-langchain-v0-3/)の内容に基づいています。詳細や最新情報については、原文をご参照ください。*

LangChainが最新バージョン0.3.0にアップデートされました。このアップデートには重要な変更点といくつかの新機能が含まれています。このブログでは、主な変更点と新機能について概要を説明します。

## 主な変更点

1. **Pydanticのアップグレード**: すべてのパッケージが内部的にPydantic 1からPydantic 2にアップグレードされました。これにより、パフォーマンスの向上と新機能の利用が可能になります。

   注：Pydantic 2は、一般的にPydantic 1と比較してパフォーマンスが向上していると言われていますが、具体的な数値は使用状況によって異なる可能性があります。

2. **Python 3.8サポート終了**: Python 3.8のサポートが終了しました。ユーザーは少なくともPython 3.9以降のバージョンを使用する必要があります。

   注：Python 3.8は2024年10月にEnd of Lifeを迎えます。

## 新機能と改善点

LangChain v0.2の開発期間中に行われた多くの改善点が、v0.3.0にも引き継がれています。主な新機能と改善点は以下の通りです：

1. **統合機能の再編成**: より多くの統合機能が`langchain-community`から個別の`langchain-{name}`パッケージに移動されました。これは非破壊的な変更であり、レガシーの実装は`langchain-community`に残され、非推奨としてマークされています。これにより、これらの統合のより良い依存関係管理、テスト、バージョン管理が可能になります。最新の統合パッケージは、PythonのAPIリファレンスとJSのAPIリファレンスで確認できます

2. **統合ドキュメントとAPIリファレンスの刷新**: 詳細については[こちら](https://python.langchain.com/docs/integrations/providers/)を参照してください

3. **ツール機能の簡素化**: ツールの定義と使用方法が簡素化されました。詳細については[こちら](https://python.langchain.com/docs/modules/agents/tools/custom_tools)を参照してください

4. **チャットモデル用ユーティリティの追加**: ユニバーサルモデルコンストラクタ、メッセージのトリミング、フィルタリング、マージ用ユーティリティ（PythonとJS）、レート制限機能（Python）が追加されました

5. **カスタムイベントのディスパッチ機能**: カスタムイベントをディスパッチする機能が追加されました（PythonとJS）

これらの新機能と改善により、LangChainの機能性と柔軟性が向上しています。
## 移行に関する注意点

LangChain 0.3.0への移行には、いくつかの非互換性が存在する可能性があります。特に、Pydantic 2への移行とPython 3.8のサポート終了に注意が必要です。詳細な移行ガイドについては、[LangChainの公式ドキュメント](https://python.langchain.com/docs/guides/migrations/)を参照してください。

## 今後の予定

LangChainチームは、v0.3リリース後も継続的な改善を計画しています。公式情報によると、今後予定されている開発内容は以下の通りです：

1. **マルチモーダル機能の強化**: 0.3リリース期間中に、LangChainのマルチモーダル機能が改善される予定です

2. **ドキュメンテーションと統合の信頼性向上**: 統合機能のドキュメントや信頼性を向上させる取り組みが継続されます

## まとめ

LangChain 0.3は、Pydantic 2への移行、Python 3.8のサポート終了、統合機能の再編成、ツール機能の更新、チャットモデル用の新ユーティリティなど、多くの変更を含んでいます。これらの更新により、LangChainの機能と使用体験に変化をもたらされる可能性があります。

アップデートを検討する際は、提供されている移行ガイドを参照し、既存のコードへの影響を慎重に評価することが重要です。

詳細な情報や最新のアップデートについては、[LangChainの公式ブログ記事](https://blog.langchain.dev/announcing-langchain-v0-3/)を参照してください。また、技術的な質問や問題がある場合は、[LangChainのGitHubリポジトリ](https://github.com/langchain-ai/langchain)でサポートを求めることができます。


# 関連書籍
- [LangChain完全入門　生成AIアプリケーション開発がはかどる大規模言語モデルの操り方](https://amzn.to/47DA5FJ)
- [OpenAI GPT-4/ChatGPT/LangChain 人工知能プログラミング実践入門](https://amzn.to/3XztTdb)
- [ChatGPT/LangChainによるチャットシステム構築［実践］入門](https://amzn.to/4evVXoJ)
AWS Service Catalog(CLFのOUTPUT)

## AWS Service Catalogとは？
- AWSが認証されたITサービスのカタログを作成および管理できる
- デプロイされるITサービスを集中管理ができ一貫性のあるガバナンスを達成し、コンプライアンス要件を満たすうえで役に立つ

## 利点
### 標準化
- 製品を起動できる場所、使用できるインスタンスのタイプおよびその他の多くの設定オプションを制限することに、承認済みのアセット管理ができる
### セルフサービスの検出と起動
- ユーザーは、アクセスできる製品のリストを参照し、使用する製品を見つけ、プロビジョニング済み製品としてすべて自分で起動できます
### きめ細かなアクセスコントロール
- 管理者はカタログから製品のポートフォリオを生成し、プロビジョニングで使用する制約とリソースタグを追加して、IAMのユーザーとグループを通じてポートフォリオにアクセス権を付与
### 拡張性とバージョン管理
- 感謝は、任意の数のポートフォリオに製品を追加し、別のコピーを作成することなく、それを制限できます

##　一言でいうと
- 承認済みのリソースを簡単に管理・デプロイできるツール
ChronoUnitをimportで読み込めない時の対処法【IntelliJ・SDK】


今回はJavaのSDKバージョンとIntelliJの関係で少しハマったので記事にしたい。

```
使用環境
IntelliJ使用　ver 2022/2/3 ver
SDK　21を選択時
```

OSS参画時に、レビューを依頼されて中身を確認していたら、
ChronoUnitが読み込まない事象が発生。

![スクリーンショット 2024-09-20 215505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233529/22c3cb9f-d033-baec-4f9f-e55183d07435.png)
![スクリーンショット 2024-09-20 215514.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233529/af809dec-17c1-259c-5fa5-8670566be491.png)


`import java.time.temporal.ChronoUnit;`
が読み込まずに、下記

`import org.threeten.bp.temporal.ChronoUnit;`

が適用されてしまう状態になっていた。


上記の現象は一般的には、
特定の古いJavaバージョン（特にJava 7以前）での日時操作を行うためのライブラリであるThreeTen（ThreeTen Backport）を利用しているから。という点が考えられたが、

最初に記載した通り、SDKのversionは21を選択しており、
特に古い設定を選んでいるわけではなった。


調べてみると、
Java 21 は IntelliJ 2023.1 バージョンではサポートされていません。現在は2023.2.2 リリースからサポートされています。
[参考記事](https://youtrack.jetbrains.com/issue/IDEA-333976/Some-java-classes-in-OpenJDK-21-are-not-accessible)

とのことで、単純にIntelliJのverが古くJava21に対応していなかったため、特定のクラスの読み込みができていなかったということのようだった。

また、今回はたまたまChronoUnitだったが、特定のクラスが見つからない状態になるようだ。


そのため、今回の問題に対しての解決策は下記の2点。

**1.Java SDK 17に変更をする（JavaSDKバージョンを落とす）**
**2.IntelliJのverを2023.2.2 リリース以上にあげる**


こういう小さい部分ってたまに結構ハマりすよね。


IntelliJのプライベートPCのverの更新は全然していなかったので
（もともとがJava8などで構築していたため問題も生じなかった）
その辺りも盲点になってしまいました。

という記録でした。
VOICEVOXエディタ開発環境のセットアップにおいて「"package.json"の"name":"voicevox"は"VITE_APP_NAME":"undefined"から始まっている必要があります」エラーが出る

VOICEVOXエディタ開発環境セットアップ中に出たエラーである。
エラー内容が直観的ではないため、解決方法をメモしておく。
# エラーの発生契機
下記GitHubプロジェクトに存在するREADMEに従ってVOICEVOX開発環境のセットアップを実施していた。
https://github.com/VOICEVOX/voicevox

手順を順に実施し、``npm run electron``コマンドをPowerShell上で実行したところ、下記のようなエラーが出力された。
```powershell
PS C:\voicevox> npm run electron:serve

> voicevox@999.999.999 electron:serve
> cross-env VITE_TARGET=electron vite

failed to load config from C:voicevox\vite.config.mts
error when starting dev server:
Error: "package.json"の"name":"voicevox"は"VITE_APP_NAME":"undefined"から始まっている必要があります
```
？？？　一体何を言っているんだ……？　undefinedから始まっている必要があります？？？
# エラーの原因
voicevoxフォルダ直下に``.env``ファイルを作成していないことが原因であった。
READMEの手順書には
> .env.productionをコピーして.envを作成し、VITE_DEFAULT_ENGINE_INFOS内のexecutionFilePathに 製品版 VOICEVOX 内のvv-engine/run.exeを指定すれば動きます。

と記述されていたが、この手順のうち
> .env.productionをコピーして.envを作成し

という手順を飛ばしていた。``.env.production``ファイルの中身を修正するだけでいいと思い込んでいたのである。
``.env``ファイルは、Viteにおいて環境変数の値を指定するファイルであり、このファイルが存在しなかったため、環境変数を読み込めず``undefined``とエラーログに出力されたと考えられる。
# 参考
https://ja.vitejs.dev/guide/env-and-mode
AtCoder 勉強記録[C++] その64

AtCoderで入茶を目指して勉強しています。
勉強を継続するために投稿を始めました。
もともとアカウントを作成していましたが、今年の4月から本格的に勉強を始めました。
一応自分用に解法を書いていますが雑です、自分で読み返して困ったら修正します。
[私のアカウント](https://atcoder.jp/users/nanami_brother)
[解いた問題](https://kenkoooo.com/atcoder/#/table/nanami_brother)
# 本日解いた問題
## A - Jiro
[A - Jiro](https://atcoder.jp/contests/abc371/tasks/abc371_a)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using ull = unsigned long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)
#define mod 998244353

int main() {
  char sab, sac, sbc;
  cin >> sab >> sac >> sbc;
  int a=0, b=0, c=0;
  if(sab == '<') b++;
  else a++;
  if(sac == '<') c++;
  else a++;
  if(sbc == '<') c++;
  else b++;
  if(a==1) cout << "A" << endl;
  else if(b==1) cout << "B" << endl;
  else cout << "C" << endl;
}
```
### 解法
`A,B,C`それぞれが年上である回数の変数を用意する。`A,B`、`A,C`、`B,C`のそれぞれで年上である回数を数えると長男から三男までの順番を求めることができる。
## B - Taro
[B - Taro](https://atcoder.jp/contests/abc371/tasks/abc371_b)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using ull = unsigned long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)
#define mod 998244353

int main() {
  set<int> home;
  int n, m;
  cin >> n >> m;
  for(int i = 0; i < m; i++){
    int a;
    char b;
    cin >> a >> b;
    if(b == 'M') {
      if(!home.count(a)) {
        cout << "Yes" << endl;
        home.insert(a);
      }
      else {
        cout << "No" << endl;
      }
    } else {
      cout << "No" << endl;
    }
  }
}
```
### 解法
子供が生まれた家を格納しておくset型`home`を用意する。生まれた子供が男の子であった場合、`home`に家`Ai`が格納されていない場合は`Ai`を格納し、`Yes`、格納されている場合は`No`を出力する。また、生まれた子供が女の子であった場合も`No`を出力する。
React QueryのuseMutationでのサーバーデータの変化（ミューテーション）処理

こんばんは。

今日は「React QueryのuseMutationでのサーバーデータの変化（ミューテーション）処理」について説明いたします。

React Queryの`useMutation`フックは、サーバーデータの変化（ミューテーション）を処理するために使用されます。これは主に、POST、PUT、PATCH、DELETEなどのHTTPメソッドを通じてデータを生成、更新、または削除する非同期操作を行う際に有用です。

# 基本的な使い方

```javascript
import { useMutation } from 'react-query';

const mutation = useMutation(async (newData) => {
  const response = await fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify(newData),
  });
  return response.json();
});
```

上記の例では、`useMutation`は非同期関数を引数として受け取ります。この関数はサーバーとの通信を処理し、必要に応じてデータを返すことができます。

# 返される値

`useMutation`は、さまざまな有用な値を返します：

- mutate: ミューテーション関数を実行するトリガー関数
- status: 現在のミューテーションの状態（idle、loading、success、error）
- data: 成功時に返されるデータ
- error: 失敗時に発生するエラーオブジェクト
- isLoading: ミューテーションが実行中かどうか
- isError: エラーが発生したかどうか
- isSuccess: ミューテーションが成功裏に完了したかどうか

## 例：フォーム送信の処理

```javascript
function SubmitForm() {
  const mutation = useMutation((formData) => {
    return fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData),
    });
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = {
      // フォームデータの収集
    };
    mutation.mutate(formData);
  };

  if (mutation.isLoading) {
    return <div>送信中...</div>;
  }

  if (mutation.isError) {
    return <div>エラー発生: {mutation.error.message}</div>;
  }

  if (mutation.isSuccess) {
    return <div>送信成功！</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* フォームフィールド */}
      <button type="submit">送信</button>
    </form>
  );
}
```

## オプション設定

`useMutation`は、第2引数としてオプションオブジェクトを受け取ることができます：

- onSuccess: ミューテーションが成功したときに呼び出される関数
- onError: ミューテーションが失敗したときに呼び出される関数
- onSettled: ミューテーション完了後（成功または失敗）に呼び出される関数
- retry: 失敗時の再試行回数の設定

```javascript
const mutation = useMutation(submitData, {
  onSuccess: (data) => {
    // 成功時の処理
  },
  onError: (error) => {
    // エラー処理
  },
  retry: 3, // 最大3回再試行
});
```

## キャッシュの無効化

ミューテーション後に関連するデータを再取得する必要がある場合、`queryClient`を使用してキャッシュを無効化できます。

```javascript
import { useMutation, useQueryClient } from 'react-query';

function DeleteItem() {
  const queryClient = useQueryClient();

  const mutation = useMutation(deleteItemById, {
    onSuccess: () => {
      // 'items'キーを持つキャッシュを無効化
      queryClient.invalidateQueries('items');
    },
  });

  // ...
}
```

# まとめ

- `useMutation`は、サーバーデータの変化を管理するために使用されます。
- ミューテーションの状態と結果を簡単に追跡できます。
- 成功または失敗時に呼び出されるコールバック関数を設定して、追加のロジックを実装できます。
- `queryClient`を活用して、ミューテーション後のキャッシュを管理できます。

useMutationを適切に活用することで、非同期のミューテーション操作を効率的に管理し、アプリケーションの複雑さを軽減することができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
List<T>.BinarySearch(二分探索)を活用しようとして適用範囲間違えた話

# ABC370 D Cross Explosion の 解法と自作回答
[ABC370 D](https://atcoder.jp/contests/abc370/tasks/abc370_d) の復習をしていたのだけど、解説では二分探索を使って破壊した壁の管理を行えばよいとなっていた。
二分探索なら[前回の記事(C# で lower_boundをListの拡張関数として実現する)](https://qiita.com/lazyK/items/593da3a299585d282961)で書いた、List<T>を拡張したLowerBoundですぐ見つかる！と意気込んで回答した。
結果はTLEがぼこぼこ出る。再帰で書いた初回の回答と変わらん処理速度。

なんでなんだ。。。

## 原因の発見
これ、落ち着いてみたらわかるんだけど、探索した後に削除するんだよね。
LowerBoundでindexはわかっているから、List.RemoveAtすればO(1)だろ！と思ってたら、List.RemoveAtは、計算量O(N)。
内部的には該当要素を削除した後、後続の値を詰める処理が発生するとのこと。
先頭に近ければ近いほど前に詰める処理が発生するそうでした。

そりゃ再帰で消す場所探すのと変わんないのよ。

## List<T>.BinarySearchの適用できる場所
挿入も削除と同じでList.InsertはO(N)になるので、削除と同じ。
つまり、BinarySearchは検索だけで挿入や削除を伴う場合はListを使い続ける限り改善しない。
前回のABC371 Dは検索だけでよかったからAC出せたということでした。

# 結論
標準コレクションや関数は中身ちゃんと把握してから使おうね。
（それはそう。）
[piyo，hogeはOK?】明日から意識できるきれいなコードの書き方

## これは何?

https://x.com/hirox246/status/1836333134519885898

ここのところきれいなコードの重要性についての議論がtwitterで活発にされていると思います。
私は過剰にきれいにする必要はない場合もあると思いますが，最低限は読めるコードを書くべきだという考えなので，自分がやっている最低限わかりやすいコードを書くための工夫を紹介いたします。

---

## この記事のスコープ

- 基本的なコードを書く際のお作法的な部分を書こうと思っています。
- デザインパターンや設計レベルの話はしません。
- ひろゆき氏の批判をするのが目的ではなく，自分の意見を書くのでコメント等での誹謗中傷はお控えあそばせ

---

## 1. 変数名を読みやすいものにする

hogeやfugaは自分もちょっと機能を試す時には使うことはありますが，基本的に変数を見て何をやっているのかわからないものはNGだと思います。

最低限気をつけることは以下です。

- 変数は英語でなるべく適切な英語を使う: 生成AIや類語辞書，OSSを参考にする
- 変数に単位があるならば単位をつける e.g. time_s，time_ms
- 変数が長くなる場合には単語ごとに区切る(後述するコーディング規約に従って切ると良い) e.g. port_scanner，ScanClass
- 環境変数，定数は大文字にする(コーディングルールを優先するでよい)

さらにレベルアップしたい方は品詞に気をつけるとさらに良いです。

https://qiita.com/jnchito/items/459d58ba652bf4763820

### 変数名を省略しつつ，可読性を確保する

いろいろな情報を変数名に入れると変数が長くなりすぎてしまうことがあります。
そういった際には適切な省略をすると良いです。
[略し方を検索できるサイト](https://www.allacronyms.com/)を参考にしてもいいかもしれませんが略し方の主要な方針は以下になります。

- 前置詞だけを残す e.g. convert_to_string→to_string
- ingを省略する
- 母音を削る e.g. image→img
- 強い音を残す e.g. server→svr

:::note info
略した結果わかりづらくなると本末転倒なので，略しても意味がわかるか確認してください。
:::

### より良い変数名のために
フィルテルソンによるより良い変数名のための3ステップモデルを紹介しておきます。

1. 名前に含めるべき概念の選択: コメントを書くくらいなら変数名にその単語を入れる。
2. どんな単語を使うか: 各概念を表す同義語に注意する。
3. どう組み合わせるか: 自然言語としても自然な語順になるように単語を並べる。

---

## 2. 関数を使う

適切に関数を使うことで処理の流れがわかりやすくなります。

個人的には関数を使うかどうかは以下を基準に判断しています。

- 同じ処理を繰り返しているか
- 1つの処理の塊が5行以上になるか

:::note info
処理の塊はスクロールが必要ないくらいの単位に分割する。
:::

---

## 3. 適切なコメントを書く

- 関数を使う際には関数で実施する処理の概略を書いておく
- そのコードがなぜ必用なのか作成者の意図を書く

---

## 4. コーディング規約に従う

プログラミング言語ごとに定められているコーディング規約に沿ってコードを書くことでコードの一貫性を保つことができます。
コーディングルールに従うため
- formatter
- linter
を導入するとコーディングルールの適用が楽になります。

pythonの場合には
- コーディング規約は[PEP8](https://peps.python.org/pep-0008/)
- formatterは[autopep8](https://pypi.org/project/autopep8/)，[black](https://marketplace.visualstudio.com/items?itemName=ms-python.black-formatter)
- linterは[flake8](https://flake8.pycqa.org/en/latest/)
等があります。

---

## 参考になるリンク集

- [リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)
- [良いコードを書くための記述](https://direct.gihyo.jp/view/item/000000001477)
- [略し方を検索できるサイト](https://www.allacronyms.com/)

https://qiita.com/jnchito/items/459d58ba652bf4763820
IntelliJユーザーに贈るIdeaVim活用術 〜複雑な繰り返し作業をやっつけよう〜

みなさんIdeaVimをご存知でしょうか。
IdeaVimは、JetBrainsのIDE（IntelliJ IDEA など）でVimのキーバインドを使用できるようにするプラグインです。

https://plugins.jetbrains.com/plugin/164-ideavim

本記事ではこのプラグインを使ってできる便利なことの一例を紹介したいと思います。

## 複数プロパティを同じようにリネームする
こんなクラスがあったとします。
```
data class User(
    val id: String,                // ユーザーの一意のID
    val firstName: String,         // ユーザーの名
    val lastName: String,          // ユーザーの姓
    val department: String,        // ユーザーが所属する部署
    val email: String,             // ユーザーのメールアドレス
    val phoneNumber: String,       // ユーザーの電話番号
    val dateOfBirth: String,       // ユーザーの生年月日
    val hireDate: String,          // ユーザーの採用日
    val salary: Double,            // ユーザーの給料
    val position: String,          // ユーザーの役職
    val address: String,           // ユーザーの自宅住所
    val supervisorId: String?,     // ユーザーの上司のID（オプション）
    val isActive: Boolean,         // ユーザーがアクティブかどうか（雇用中かどうか）
    val lastLogin: String?         // ユーザーの最後のログイン日時（オプション）
)
```
そしてこう思いました
🤔「すべてのプロパティをprivateにして、プロパティ名の先頭にアンダーバーをつけたいな」

IntelliJのマルチカーソル機能を知っていたあなたは、一括で効率良く編集することができました。（Option＋ドラッグでマルチカーソルにしています）

![edit01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762653/f68d384e-b5b3-df0f-812d-751458adc114.gif)

😁「よし。マルチカーソルでいい感じに編集できた。」
😁「あとはプロパティ名の末尾にLocalをつけよう。」
🤔「・・・」
🥺「あれ？これはマルチカーソルじゃできなくない？」

そこでIdeaVimです。

マルチカーソルではできなかった操作も、IdeaVimなら難なくできます。

![edit02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762653/9f9e489d-9859-f2c8-0ef5-fc6e0be2059d.gif)

[解説]
入力したキーは`qqf_eaLocal<Esc>+q13@q`です。

Vimにはマクロという編集を記録して、それを繰り返し実行できる機能があります。
qq〜qまでの `f_eaLocal<Esc>+` が一行目にLocalを追加する操作で、`13@q`によってそれを13回繰り返し実行しています。

このマクロという機能を使うとプロパティが例え100個になっても、繰り返しの数を変更するだけで対応できます。

## コメントの位置を変更する
マクロの活用例としてもう一個やってみます。
プロパティの右にあるコメントを上の行に移動させましょう。

![edit03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762653/f9d96270-ebb8-f1c9-5449-cd6707c9c2dd.gif)

[解説]
入力したキーは`qqf/hv^do<Esc>p+q13@q`です。

コメント手前までを一度削除し、下に行を追加してペーストしています。それを先程と同様にマクロによって13回繰り返し実行しています。

## おわりに
IdeaVimのマクロを活用して、なかなか大変な繰り返し作業をやっつける方法をご紹介しました。
IdeaVimいいな。やってみようかな？と思っていただけたら嬉しいです。
【Google Cloud】GCS(Google Cloud Storage) ソフト削除をフォルダ単位で無効化する

## 概要

Cloud Storage の[ソフト削除機能](https://cloud.google.com/resources/storage/soft-delete-announce?hl=ja)を組織やフォルダ全体のプロジェクトを対象に無効化する手順を記載します。


## プロジェクト単位で無効化する

プロジェクト単位のソフト削除の無効化は、管理コンソールやgcloudコマンドで可能です。

gcloudコマンドを使う場合は、以下のようになります。
（`--project hoge-project` は環境に合わせて変更）

```
$ gcloud storage buckets update --clear-soft-delete 'gs://*' --project hoge-project
```

https://cloud.google.com/storage/docs/use-soft-delete?hl=ja#soft-delete-bulk-disable-console

https://dev.classmethod.jp/articles/20240703-up-softdelete/

## 組織単位・フォルダ単位で無効化する

公式の手順では、プロジェクト単位での操作は記載がありましたが、組織やフォルダなどの広いスコープを対象にした手順は探した限りありませんでした。
そのため、シェルで一括実行する手順をとりました。


まず、対象のプロジェクトを精査します。
（対象に含みたくないものもあるため、事前にリストを作る手順となっています）

`PARENT_ID` には、任意のフォルダIDが入ります。
組織全体のプロジェクトを取得したい場合は、--filterなしで実行すれば全てが対象になります。

```shell
$ PARENT_ID=123456
$ gcloud projects list --filter="parent.id: ${PARENT_ID}" --format json | jq -r '.[].projectId' | sort > project-list.txt
$ cat project-list.txt
hoge-project
fuga-project
piyo-project
```

参考情報

https://blog.g-gen.co.jp/entry/using-gcloud-and-jq

作成したリストとxargsコマンドにより、ソフト削除の無効化を一括適用します。

一括適用の際は、以下に注意してください。
- 対象にするプロジェクトが正しいかリストを確認する
- コマンドが正しいか確認する（リストを編集し、事前に1プロジェクトのみで試すと確実です）

```
$ cat project-list.txt | xargs -I{} gcloud storage buckets update --clear-soft-delete 'gs://*' --project {}
```

## まとめ

ソフト削除の無効化にあたり公式の手順を調べていましたが、フォルダや組織単位で実行する手順がなかったので今回まとめてみました。
公式の手順でもっとスマートに実現できる方法があるかもしれませんので、もしあればそちらがいいかと思います。
Asciidoc:表の書き方

# はじめに
皆さんは`asciidoc`ご存知ですか？
`asciidoc`とは、マークダウンとは異なるマークアップ言語のことです。
要は簡単な記法でドキュメントを作成できるプログラミング言語のようなものです。

# 表の記述方法
```
[cols="a,a,a", options="header,autowidth"]
|===
|header1|header2
|data1|data2
|===
```

上記の記述方法で以下のような表ができます。
![スクリーンショット 2024-09-20 21.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693671/00658417-fa8d-ecdb-3e26-9403937d6ab3.png)
GaugeでStepImplementationをファイル分割する

## はじめに
[HITOTSU株式会社](https://www.hitotsu.co.jp/)の河村康治です。
普段はフロント、APIを中心に実装していますが、たまにQAも担当しています！今回はQAのE2Eテストの話です！弊社ではE2EテストはGaugeとPlaywrightを活用し実装していますが、今回はGaugeのTipsの紹介です！
Gaugeの`StepImplementation.ts`を分割する方法を紹介します。

<font color="red">**そもそもGaugeって何？**</font>って方は[リンク](https://qiita.com/koji0705/items/d1503d981b8fe9412742)をご覧ください。

https://qiita.com/koji0705/items/d1503d981b8fe9412742

## Gaugeの仕組み
Gaugeは下記図の仕組みで動かしています。テスト仕様書はmarkdownファイルで書いており、実際のコードとmarkdownの内容をマッピングする必要があります。そのマッピングファイルはデフォルトで`StepImplementation.ts`に設定されています。
　最初はなんの問題もないんですが、ある程度書いていくと <font color="red">**あれ？？StepImplementation.tsって肥大化し続けない？？どうやってファイル分割するの**</font>ってなります。
調べてみたんですが、いい記事がなかったので今回記載しようと思います。
ちなみに今回話したい内容は下記図の赤枠の部分ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/cf370a41-1a39-8a63-33ad-3c9552cfee91.png)


```ts:tests/StepImplementation.ts
	@Step("Assetに<userAuthorityAsset>としてログインする_v2")
	public async loginAsset(userAuthorityAsset: UserAuthorityAsset) {
        ... Playwrightの処理を記載する
	}
```

## StepImplementation.tsの分割方法
ファイル分割の方法は意外と簡単です。`manifest.json`に`stepImplementations`を記載し、StepImplementionに書いてある内容を追記するだけでOKです！！

```json:manifest.json
{
	"Language": "ts",
	"Plugins": ["html-report"],
	"stepImplementations": [
		"tests",
		"tests/stepImplementation/asset",
		"tests/stepImplementation/link",
		"tests/stepImplementation/account_service"
	]
}
```

:::note info
弊社では医療機器管理サービス(Asset)、コミュニケーションツール(Link)、アカウントサービス(Account Service)を提供しているので、少なくとも3つは欲しいねという事から3つ作っています。
:::

## 実装例
```ts:
~/develop/HITOTSU/hitotsu_set (feat/HIT-4954_md_file)$ tree tests/stepImplementation 
tests/stepImplementation
├── asset
     └── index.ts
```

```ts:tests/stepImplementation/asset/index.ts
import {
	AfterScenario,
	AfterSuite,
	BeforeScenario,
	BeforeSuite,
	Step,
} from "gauge-ts";
import { chromium, type Browser, type Page } from "playwright";

export class Asset {
	@BeforeSuite()
	public async suiteSetup() {
    ...
　 }
	@Step("Assetに<userAuthorityAsset>としてログインする")
	public async loginAsset(userAuthorityAsset: UserAuthorityAsset) {
	 Playwrightの処理を記載する。	
	}
 ...
}
```

:::note info
こんな感じで書いておくと、StepImplementation.tsに記載されたファイルを分割できます
:::

## さいごに
Gaugeは色々便利ですね！ただドキュメントが充実していないので、わかったことがあれば定期的に発信していこうと思います！！！
Next.jsでJestが @/ パスを認識しない問題を解決する方法

# 問題

Next.jsで、以下のように "@/" (パスエイリアス)を使用してインポートしている場合
``` ts
import { loadJsonData } from '@/app/utils/jsonStorageHandler';
```

Jestのテストを実行すると次のようなエラーが発生します。
``` bash
> npx jest

 FAIL  __test__/articles.test.ts
  ● Test suite failed to run                             
    Cannot find module '@/app/utils/jsonStorageHandler' from 'app/api/articles/route.ts'
```

# 原因
``` tsconfig.json
    "paths": {
      "@/*": ["./*"]
    }
```

TypeScriptやNext.jsはtsconfig.jsonに定義されたパスエイリアス（例えば@/）を自動的に認識してくれますが、Jestはテスト環境で独立して動作するため、これらの設定を**自動で引き継がない**ためです。

したがって、解決策はパスをjestの設定ファイルに追加することです。

# 解決策
``` jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} **/
module.exports = {
  testEnvironment: "node",
  transform: {
    "^.+.tsx?$": ["ts-jest",{}],
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',  // @/をルートに変換する
  },
};
```
このようにmoduleNameMapperへパスエイリアスを追加することで、
"@/"によるインポートを使用しているコードもJestでテスト可能になります。


# 参考
jest.config.jsについて

https://jestjs.io/ja/docs/configuration

jest.config.jsへパスエイリアスを追加する

https://nextjs.org/docs/app/building-your-application/testing/jest#optional-handling-absolute-imports-and-module-path-aliases
【豆知識】Render無料枠終了後のその先

# はじめに
私は現在Renderを利用してウェブサービスの運用を行っていましたが、30日の無料期間が過ぎてしまいました。その先の話を誰かの役に立てばいいと思い紹介します。推奨でも何でもないので、ご承知おきください。

## 1：どういう状態？
2024年8月1日からRenderの無料枠を使用してアプリ作成スタートしました。30日無料=8/31までは無料。それ以降は最低でも7＄かかるという事になります。

👇30日近くになったら（あいまい）Renderからメールが来ます。

[![Image from Gyazo](https://i.gyazo.com/fcf4921dc298fa016687060be2d88f27.png)](https://gyazo.com/fcf4921dc298fa016687060be2d88f27)

この下に英文が続き内容としては次のようなものになります
> 無料のRender PostgreSQLデータベース trainspotter_production は、試用期間が終了したため停止されました。
データベースを復元し、保存されたデータを保持するには、14日以内に有料プランにアップグレードする必要があります。
14日以内にアップグレードしない場合、データベースおよびその基礎データは削除されます。

ここで注目ポイント！！
そう、**無料の30日というのはデータベースの話**
私はこの部分をはっきりと理解していませんでした💦恥ずかしい限りです


## 2：14日以内のアップグレードも忘れていた
先ほどのメールが届いた時点で「14日以内に7＄にアップグレードしないと」と考えて行動するのが通常の人です。
しかし、私はすっかり忘れて。。。


## 3：忘れた後はどうなる
ここは私自身も不安で、皆さんも知りたい部分になるのではないかと思います。

一応公式の問い合わせを利用してどういうことなのか、どうすればいいのか。考えた日本語を英語に修正して何度かやり取り

私が質問した内容と回答をざっとまとめてみます。
> **私１回目問い合わせ**
・Renderの無料PostgreSQLデータベースのトライアル期間が8月31日に終了
・14日以内に有料プランにアップグレードする必要があったことを忘れていた
・14日を過ぎてしまった場合どうすればいいですか。
・「https://アプリ名.onrender.com 」というサイトはみれなくなっています。
・ダッシュボードには「アプリ名」というウェブサービスがあります。
・「Delete Web Service」というボタンをおして一度削除して新しく同じ内容で作成すればまた30日無料になりますか。

> **返信1回目**
・理論的には、新しいデータベースを作成し、データを移行して、新しいデータベースを使用し、古いものを削除することは可能。
・しかし、Renderでは無料のPostgresデータベースは1つしか保持できないため、
まず古いデータベースをバックアップしてから削除し、新しいデータベースを作成し、
その後データを復元する必要がある。
・Postgresデータベースは30日後に期限が切れ、さらに14日間の猶予期間があるため、その間にアップグレードできる
・ただし、これはウェブサービスには適用されない。
・期限が切れるのはデータベースだけで、ウェブサービスは期限切れにはならない。

> **私2回目問い合わせ**
・ダッシュボードの中には現在「アプリ名」というservice nameのweb serverしか存在していない。
・既にデータベースは14日過ぎているので存在していない。つまり「new」ボタンの「New PostgreSQL」で最初から作成するという手順を踏めばいいのか。
・データベースが削除されたらウェブサービス見れなくなるということか。すでに私のウェブサイトは閲覧できない状態
・ダッシュボードにある「アプリ名」Web serviceも一度削除した後、同じ内容のものを30日無料で作成することは可能という事か。

> **返信2回目**
・14日間の猶予期間が過ぎており、アップグレードやバックアップを取ることができなかったため、新しいデータベースを最初から作成する必要がある。データベースは削除されましたが、これはウェブサービスには影響しない
・ウェブサービスはそのまま残り、期限切れにはならない。ウェブサービスは必要なだけ無料で利用し続けることができる。
・ただし、ウェブサービスは削除されたデータベースに接続されていたため、新しいデータベースを作成し、環境変数を更新して新しいデータベースにリンクし、その後ウェブサービスを再デプロイする必要がある。


## 4：再度データベースは無料で作れるのか？？
Renderからの回答を参考にまとめてみると
- ウェブサービスが見れないのはデータベースが削除されたからではなく、あなた側のコードか何かでエラーが起きていることでローカルでは閲覧できるけど、実際の環境では見れない状態
- データベースはもう一度無料で作成できるよ
- 環境変数などはちゃんと設定してね

という事みたいです。

で、デプロイ資料参考にサンドデータベースを作成。おそらくInternal Database URLだけ更新すればいけそう。

# 最後にまとめ
本来はちゃんと14日以内にアップグレードすれば、最後にまとめてエラーに対応しないで済む話。私の失敗が誰かの助けになることを祈ります。
今回の記事が何か参考になれば幸いです

※Renderとのメールでのやり取りは日をまたぐのでタイムロスになります。
tailwindが一部だけ効かない

うっかりミスでtailwindが効かない事があったので共有。

tailwindが効かない書き方
```tsx
<button
    className={`bg-sky-400 text-white w-[72px]${
        isDisabled ? "opacity-50" : ""
    }`}
>
    クリック
</button>
```

修正
```tsx
<button
    className={`bg-sky-400 text-white w-[72px] ${
        isDisabled ? "opacity-50" : ""
    }`}
>
    クリック
</button>
```
$の後ろにスペースを入れていないと効かなくなります、、ご注意を。
微分IK

やってる人が全く見当たらなかったのでやってみました。

# 完成形
![bibunik.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529725/a417f226-9696-fb4e-1bff-08b73e23b571.gif)

# 何がどうやって微分が出てくるのか
IKは、基本的に以下のパラメータから関節の角度を計算します。
- 現在の関節の角度
- ターゲットの位置

この計算は、以下の関数の合成関数です
- `+`
- `*`
- `-`
- `/`
- `sin`
- `cos`
- `sqrt`
- `acos`

そうです。全部微分できる関数です。つまり、機械学習のように勾配を求めてパラメータを更新してやればIKになるのではないか、というのが一番はじめの考え方です。

# クォータニオンの微分
クォータニオンは、交換法則が成り立たないので、普通には微分できません。が、そもそもクォータニオンはただの４次元ベクトルで、積に定義があるだけなので、要素ごとに追跡して微分すればできます。

え、手計算するんですか、するわけ無いでしょう。微分するプログラムを書くためのプログラムを書きました。というかまんま微分用のコードを出力してくれるものを作りました。

題してBibuner。とはいってもただのグラフからただの勾配グラフと関数定義を作るだけなので、大した事はありません。

実装を乗せると説明が非常に冗長になると思うので、TensorflowまたはPytorchとかの機械学習ライブラリと同じようなものだと思ってください。

# 最適化関数とWeightDecay
最適化関数は脳死でMomentumを選びました。特に意味はないです。
WeightDecay（L2正則化）をするために、パラメータの値を０に近づけるためのオフセットが必要なところ以外はふつうの正則化です。

# 関節の曲がる角度
今回は、`もともと曲がっている角度`から`180-もともと曲がっている角度`の間、１軸のみで回転できるものとしました。 別に２軸にしても３軸にしても本質的に全く同じなのでお好みで良いと思います。

# その他損失関数に加算する値
今回は特にほかに加算していません。目的のIKにそった関数を定義して加算すれば、より良い結果が得られると思います。

# 以上