OmniAICreator/Qiita-1.07M huggingface dataset:
漸近的計算量と推定計算量の違いについて-第66回横浜Go読書会（オンライン）参加メモ

# 背景

2025/2/15に実施された[第66回横浜Go読書会（オンライン)](https://yokohama-go-reading.connpass.com/event/343239/)に参加して、ソフトウェア開発における計算量について知ったので、
アウトプットしつつ自身の理解を深めようと思いました。

# 内容

今日読んだ本は[効率的なGo ―データ指向によるGoアプリケーションの性能最適化](https://www.oreilly.co.jp/books/9784814400539/)の７章「データ駆動効率性評価」で、計算量についての話が書かれていました。計算量には漸近的計算量と推定計算量があります。

## 漸近的計算量

漸近的計算量とはO記法で表記される計算量を指し、以下の特徴があります。

* 入力サイズに関連して実行時間や空間の需要がどれだけ速く成長するかに注目する
* ハードウェアや環境のオーバーヘッド（式の定数項）を無視する
* 複雑な問題を解決するアルゴリズムを探す研究者にとって重要

O記法についてはDonald Knuthが[1976年の論文](https://oreil.ly/yeFpW)で３つの表記法を定義しています。

---
### 上界(O)

O(f(n))と書いた場合、関数がf(n)よりも漸近的に悪く(大きく)　なることがないことを意味します。

### タイトな限界(Θ)

Θ(f(n))と書いた場合、正確な漸近関数、あるいは平均的、典型的なケースを意味します。

### 下界(Ω)

Ω(f(n))と書いた場合、関数が漸近的に良く（小さく）なることがないことを意味します。

---

ビッグオー表記が必ずしも正しく使われているとは限らず、面接等で、典型的なケースを説明するためにΘを使うべきところをOを使っていることがあります。クイックソートはO(N×logN)と言われるが、Ω(N×logN)もしくはO(N×logN)であって、最悪の場合はO(N^2)になります。


## 推定計算量

漸近的計算量とは違って式の定数項を無視しない計算量です。ただの計算量とも呼ばれます。空間計算量(space complexity)を例に挙げて説明します

次のようなSum関数を考えます。
```go
func Sum(fileName string) (ret int64, _ error) {
	b, err := os.ReadFile(fileName)//⭐️1
	if err != nil {
		return 0, err
	}
	for _, line := range bytes.Split(b, []byte("\n")) {//⭐️2
		num, err := strconv.ParseInt(string(line), 10, 64)//⭐️3
		if err != nil {
			return 0, err
		}

		ret += num
	}
	return ret, nil
}
```

上記のSum関数の空間計算量(ヒープ割当てサイズ)の推定計算量は以下で表されます。

```
space(N) = (848 + 3.6 × N) + (24 + 24 × N) + (2.8 × N)
         = 872 + 30.4 × N [bytes]
N: 入力ファイル中の整数の数
```

---

⭐️1　848 + 3.6 × Nの部分はファイルの内容を読み込む操作に必要なヒープサイズの推定計算量です。os.ReadFile(fileName)で読み込まれるファイルは以下のような改行区切りで数値が書かれたファイルを想定しています。読み込まれるファイルの整数の桁数は平均して2.6桁で各行に改行\n 1byteを追加するので、3.6 × N byteになります。848byteとはos.ReadFile関数でヒープ上に割り当てられた様々なオブジェクトに由来します。

```
123
45
67
```

⭐️2
定数の最大値は24byteで、N個のbyteスライスをヒープに確保するために、24×N byteのヒープサイズが必要です。また、[][]byte(byteスライスのスライス)を持つためには、[]byteのスライスヘッダを持たなければいけないので、24byte必要です。したがって、 (24 + 24 × N)bytes必要です。

⭐️3
平均して2.6桁の数値に対してN回のstrconv.ParseInt(string(line), 10, 64)行うので、
(2.6 × N)のヒープサイズが必要。(0.2 × N)の部分は不明だが+αのサイズが必要で、合計(2.8 × N)となります。

---

上記の推定計算量はNが十分大きければ

```
space(N) ≃ 30.4 × N [bytes]
```

となり、漸近的計算量と呼ばれます。この場合、空間計算量はNに比例します。

```
space(N) = 872 + 30.4 × N [bytes]
```

一方、上記のような定数項を無視しない、空間計算量は推定計算量と呼ばれます。


## 推定計算量と漸近的計算量が区別できると何が嬉しいのか？

まず推定計算量・漸近的計算量を計算することで以下のメリットがあると書かれています。

* 正確な計算量がわかっていなくても予想されるリソースの必要量を判断できる
* コードの最適化が簡単にできるかどうかを教えてくれる
* 最適化としてより良いアルゴリズムのアイデアを評価するのに役立つ

上記に加えて、推定計算量・漸近的計算量を区別することで、ざっくりと計算量のオーダーを意識するのではなく、入力サイズに応じてより厳密に計算量を見積もることができるのだと個人的には解釈しました。

# 所感

* ビッグオー表記が正しく使われない、クイックソートはO(N×logN)と言われるがワーストケースはO(N^2)である。みたいな話は自分も面接や仕事で経験したことがあります。厳密な数学的定義を知っていると、前提を正しく捉えることができて、妥当な計算量を求めることができることがあるという話だと理解しました。
* 読書会内で、この章の計算量の話は小難しく話をしているだけで、アルゴリズムの比較やパフォーマンス測定・チューニングを業務でしたことがあるエンジニアなら知っているのではないかという話が出ました。それはある意味でYESだと思います。一方で、個人的には当たり前に思えるようなことを厳密により一般的に理論立てて説明しようとすると、数学を使ってより厳密に記述することになり、結果として計算量の前提となる入力サイズを強く意識することに繋がると思いました。
* 実際の業務においては推定計算量を出そうとするよりもサクッと測定してしまって比較した方が早いケースも多いような気がします。でも、場合によって使い分けられるように理論的な面も実践面も両方知っておくと良いのではと思いました。
Chromebookの外部ディスプレイ設定の備忘録：拡張モードとミラーリングを使いこなそう


Chromebookで外部ディスプレイを使うときの設定メモを書きました。デフォルトは拡張モードだけど、ミラーリングへの切り替え方とか、基本的なところをまとめています。誰かの参考になれば 🙂

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d291b206-1f81-4c64-a5c3-bf0e15568c7d.png)

## はじめに

Chromebookに外部ディスプレイを接続したときの設定方法をメモ代わりに残しておきます。意外と「デフォルトがどっちだっけ？」ってなりがちなので、自分用の備忘録として書いておきます。

なお、この記事の内容は自分の環境での動作確認に基づいています。OSのバージョンによって設定画面やオプションの場所が異なる場合がありますので、ご注意ください。

## 表示モードについて

Chromebookの外部ディスプレイ接続時には、主に2つの表示モードがあります：

- **拡張ディスプレイモード**：メイン画面と外部ディスプレイが別々の画面として機能し、ウィンドウを自由に移動できます。デスクトップが広がるので、複数のウィンドウを並べて作業する際に便利です。
- **ミラーリングモード**：メイン画面と外部ディスプレイに同じ内容が表示されます。プレゼンテーションや画面の共有時に便利です。

## デフォルト設定

通常、外部ディスプレイを接続すると**デフォルトは「拡張ディスプレイ」モード**になります。ただし、Chromebookのモデルやバージョンによって異なる場合もあります。

## 設定の確認・変更方法

### 基本の手順

1. 外部ディスプレイを接続
2. 画面右下の時計をクリックして、クイック設定メニューを開く
3. ［設定 ⚙］>［デバイス］>［ディスプレイ］と進む
   （注：OSのバージョンによって設定項目の場所や名称が異なる場合があります）
4. 「ディスプレイの設定」で「ミラーリングを有効にする」のチェックボックスを操作：
   - チェックなし：拡張ディスプレイモード（デフォルト）
   - チェックあり：画面を複製（ミラーリング）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d1462d12-e2ed-4fd6-9677-a419f3938ddc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/9851eb21-488c-4924-b445-674e79d5adce.png)

### ショートカット

設定画面を開くのが面倒なときは：
`Ctrl + 🔲（ウィンドウ切り替えキー / F4）`で拡張⇔ミラーリングの切り替えができます。
※ OSのバージョンや使用中のアプリケーションによっては動作しない場合があります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/a98edafd-6a18-4844-a5af-c941d7629b8e.png)


## 設定が上手くいかないとき

表示がおかしいときは、以下を試してみてください：

1. 基本的な確認
   - ケーブルをしっかり差し直してみる
   - 別のUSBポートに接続してみる
   - 解像度設定を確認する

2. システム関連の確認
   - Chromebookを再起動してみる
   - Chrome OSが最新バージョンかどうか確認する
   - システムアップデートがある場合は適用する

## まとめ

- デフォルトは拡張ディスプレイモード
  - 別々の画面として使え、作業スペースが広がる
  - ウィンドウを自由に移動可能
- 設定変更は右下の時計クリックから
- 急ぐときはショートカット（Ctrl + ウィンドウ切り替えキー）
  - ただし、環境によって動作が異なる場合あり

※ この記事の内容は、OSのバージョンアップデートにより変更される可能性があります。最新の情報は、お使いのChromebookの設定画面でご確認ください。

#Chromebook #外部ディスプレイ #デュアルディスプレイ #Chromebook活用 #設定
【混乱解消】OpenAI APIキーはどこから作る？プロジェクト・組織・個人の使い分けガイド

# OpenAI APIキーの発行・管理ガイド

OpenAIのAPIキーは、ChatGPTをはじめとするAPIに外部からアクセスするための認証情報です。ここでは、APIキーを管理する3つのページの違いと、それぞれのキーがどのように利用できるかを解説します。

## 1. プロジェクト単位のAPIキー
- **ページURL**: [https://platform.openai.com/api-keys](https://platform.openai.com/api-keys)
- **特徴**:
  - プロジェクトのオーナーは、プロジェクト内のすべてのAPIキーを作成・管理できます。
  - 各キーの利用状況はUsageページで確認可能。
- **用途**:  
  プロジェクト単位でキーを分け、利用状況やアクセス制御をしやすくするために利用されます。

## 2. 組織単位のAPIキー
- **ページURL**: [https://platform.openai.com/settings/organization/api-keys](https://platform.openai.com/settings/organization/api-keys)
- **特徴**:
  - 組織のオーナーは、組織全体で発行されたAPIキーを一括管理できます。
  - 各APIキーの利用状況はUsageページで確認可能。
- **用途**:  
  組織全体でAPIキーを管理する場合に適しており、複数のプロジェクトやチームでの利用を考慮した管理ができます。

## 3. 個人プロファイルのAPIキー
- **ページURL**: [https://platform.openai.com/settings/profile/api-keys](https://platform.openai.com/settings/profile/api-keys)
- **特徴**:
  - 個人アカウントに紐づくAPIキーを作成・管理します。
  - 「Enable tracking」を有効にすると、Usageページで利用状況が確認可能。
- **用途**:  
  主に個人での利用やテスト目的に使われ、プロジェクトや組織の枠にとらわれないシンプルな管理が行えます。

## 結論：どのページから作成しても利用可能！
上記のいずれのページから発行されたAPIキーも、正しく認証されればOpenAI APIへ外部からアクセスするために使用できます。  
ただし、管理する範囲（プロジェクト、組織、個人）に合わせて使い分けると、利用状況の把握やセキュリティ管理がよりスムーズになります。

---

このガイドが、OpenAI APIキーの初めての作成や管理にお役立ちいただければ幸いです。
Pandasにおけるif文以外での条件分岐

## はじめに
Pandasを利用し、データ変換処理を行う際に多用した  
if文を使わずに条件分岐を行う方法についてまとめたものになります。

## loc
### 使い所
A列の値が〇〇の場合に、B列に〇〇の任意の値を入れたい場合に利用する。  
使用感としては、elseがないif文がイメージとして近い。

### 使用例
下記のコードでは、指定の列の条件抽出した行に対して値を入れているが  
前提としてdfAとdfBは同一のデータ数(行数)である。
  
まず、dfA["列名A"]における要素が"Python"である行を取得し  
それと同じ行番号であるdfB["列名B"]の行が値を入れる先として指定される。  
そして指定したdfB["列名B"]の行に、"固定値(文字列) + dfA["列名A"]"の値を入れるといった処理になる。
```py
dfB.loc[dfA["列名A"] == "Python", "列名B"] = 固定値 + dfA["列名A"]
```

## numpy.where
### 使い所
A列の値によって、B列に入れる値を分岐させたい場合に利用する。 
使用感としては、elseがあるif文のイメージとなる。

また、locと同じように参照するdfは同一のデータ数(行数)である必要があり  
dfA["列名A"]の条件に合致する行と、dfB["列名B"]に値を入れる行は、  
同じインデックス（行番号）を持つことになる。  
そのため、処理による条件チェックと値の代入は、対応する行どうしでなされる。

### 使用例
下記のコードでは、dfAの要素の値によってdfBに入れる値を分岐させている。  
  
処理の内容は、値を入れる先としてdfB["列名B"]を指定し  
dfA["列名A"]の値が"Python"であれば、"True"を  
そうでなければ"False"を入れる処理を行なっている。
```py
import numpy

dfB["列名B"] = numpy.where(
    dfA["列名A"] == "Python",
    "True",
    "False",
)
```
### ネストについて
numpy.whereはネストすることも可能である。  
if文と同じく、過度なネストは可読性が損なわれるので利用する際は注意が必要となる。  
  
処理としては、「dfA["列名A1"] == "Python"」がTrueだった場合に  
ネストの中に入り、dfA["列名A2"]の値をチェックして入れる値を分岐させている。
```py
import numpy

dfB["列名B"] = numpy.where(
    dfA["列名A1"] == "Python",
    numpy.where(
        dfA["列名A2"] == "3",
        "Python 3",
        "Python 2",
    ),
    "False",
)
```


## replace
### 使い所
Aと記載されていた場合は、Bに一括変換するといった場合に利用する。  
dfAの値をdfBに代入する際に、replaceを用いて一括変換して代入する方が  
上記のlocとnumpy.whereを利用するよりもシンプルに処理を行える

### 使用例  
dfA["列名B"]の値を取得し、  
"Python 2"は"py2"へ、"Python 3"は"py3"へ置換をした後で  
dfB["列名B"]に対して代入を行なっている。
```py
dfB["列名B"] = (
    dfA["列名A"]
    .replace(
        "Python 2",
        "py2",
    )
    .replace(
        "Python 3",
        "py3",
    )
)
```

## 参考
- [Python] pandas 条件抽出した行の特定の列に、一括で値を設定する
  - https://note.com/kohaku935/n/n5836a09b96a6
- Pandasでif文に2つ以上の条件が入る変換
  - https://ja.stackoverflow.com/questions/72042/pandasでif文に2つ以上の条件が入る変換
- pandasで条件に応じて値を置換（where, mask）
  - https://note.nkmk.me/python-pandas-where-mask/
- NumPyで条件に応じた処理を行うnp.whereの使い方
  - https://note.nkmk.me/python-numpy-where/
- pandas.DataFrame, Seriesの要素の値を置換するreplace
  - https://note.nkmk.me/python-pandas-replace/
Devin AI 検証：ビットコインのハードフォークを依頼してみた。

開始時に200ドル分のクレジットが付与されるDevinAIの招待コード
https://app.devin.ai/invite/u63BudBZyhlVxseX

前回の記事（DevinAIの初回記事)
https://qiita.com/shoeisugita/items/0d2fda1053487174d7d9

というわけで早速

AWSとGithubのアクセストークンを渡して、
ビットコインのハードフォークを依頼してみた。
すると以下のようなメッセージがDevinから送られてくる。

![スクリーンショット 2025-02-16 15.00.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/e86ef158-dad9-4776-8059-85355c227a4d.png)

とても楽で助かる。

```
BSV2ブロックチェーンのデプロイ進捗:
1. ノード1のデプロイ状況:
   - ソースコードとビルドスクリプトの転送完了
   - ビルド環境のセットアップ中
   - 次のステップ: autogen.sh実行とビルド開始
2. 準備完了項目:
   - 環境設定ファイル (.env)
   - デプロイスクリプト (deploy_nodes.sh)
   - ノード設定ファイル (bitcoin.conf)
3. 次のステップ:
   - ノード1のビルド完了待ち
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
2:50
BSV2ブロックチェーンのデプロイ進捗:
1. デプロイメントスクリプト更新:
   - 環境変数の設定完了
   - ノード設定の更新完了
   - ビルドプロセスの改善完了
2. 現在の状況:
   - ノード1のデプロイ開始
   - 自動化されたビルドプロセス実行中
   - ジェネシスブロック生成準備中
3. 次のステップ:
   - ノード1の起動確認
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
システムは正常に進行中です。完了までお待ちください。
2:51
BSV2ブロックチェーンのデプロイ進捗:
1. ノード1のデプロイ状況:
   - ソースコードのコピー完了
   - 依存関係のインストール完了
   - ビルドプロセス実行中（約75%完了）
   - univalue ライブラリのビルド完了
2. 次のステップ（実行待ち）:
   - ノード1のビルド完了確認
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
ビルドプロセスは正常に進行中です。完了までしばらくお待ちください。
2:52
BSV2ブロックチェーンのデプロイ進捗:
1. ノード1のデプロイ状況:
   - ソースコードのコピー完了
   - 依存関係のインストール完了
   - ビルドプロセス実行中（約90%完了）
   - テストファイルのコンパイル段階
2. 次のステップ（実行待ち）:
   - ノード1のビルド完了確認（約5分以内）
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
ビルドプロセスは正常に進行中です。テストファイルのコンパイルが完了次第、ジェネシスブロックの生成に移ります。
2:54
BSV2ブロックチェーンのデプロイ進捗:
1. ノード1のデプロイ状況:
   - ソースコードのコピー完了
   - 依存関係のインストール完了
   - ビルドプロセス実行中（約95%完了）
   - テストスイートのコンパイル段階
     * コアコンポーネントのビルド完了
     * テストファイルのコンパイル中
2. 次のステップ（実行待ち）:
   - テストスイートのコンパイル完了
   - ノード1のデーモン起動
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
ビルドプロセスは最終段階に入っています。テストスイートのコンパイルが完了次第、ジェネシスブロックの生成に移ります。
2:55
BSV2ブロックチェーンのデプロイ進捗:
1. ノード1のデプロイ状況:
   - ソースコードのコピー完了
   - 依存関係のインストール完了
   - ビルドプロセス実行中（約98%完了）
   - secp256k1暗号ライブラリのビルド段階
     * コアコンポーネントのビルド完了
     * テストスイートのコンパイル完了
     * 最終ライブラリのリンク中
2. 次のステップ（実行待ち）:
   - secp256k1ライブラリのビルド完了
   - ノード1のデーモン起動
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
ビルドプロセスは最終段階です。暗号ライブラリのビルドが完了次第、ジェネシスブロックの生成に移ります。
2:56
BSV2ブロックチェーンのデプロイ進捗:
1. ノード1のデプロイ状況:
   - ソースコードのコピー完了
   - 依存関係のインストール完了
   - ビルドプロセス実行中（約99.5%完了）
   - 最終リンク段階
     * コアコンポーネントのビルド完了
     * テストスイートのコンパイル完了
     * ライブラリのリンク完了
     * 最終バイナリのリンク中
2. 次のステップ（実行待ち）:
   - 最終バイナリのリンク完了
   - ノード1のデーモン起動
   - ジェネシスブロックの生成
   - ノード2、3のデプロイ開始
ビルドプロセスは最終段階です。バイナリのリンクが完了次第、ジェネシスブロックの生成に移ります。
```

早速、AWS内で自動的にEC2インスタンスを3つ立ち上げ、
ジェネシスブロックの生成まで進めている。

次回は、結果を報告する。


開始時に200ドル分のクレジットが付与されるDevinAIの招待コード
https://app.devin.ai/invite/u63BudBZyhlVxseX
Go学習

## 環境構築
1. `brew install go`
1. `go version`
    ```
    go version go1.24.0 darwin/arm64
    ```

## hello world
1. `go mod init my-app`
1. `vi main.go`
    ```
    package main
    
    import "fmt"
    
    func main(){
    	fmt.Println("hello world")
    }
    ```
1. ビルドして実行
    1. `go build`
    1. `./my-app`
1. ビルド＆実行
    1. `go run main.go`

## フォーマット
vscodeのsettingに下記を追記
```
  "[go]": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "golang.go"
  }
```
Devin AI 検証：Cursolの30倍良い。BTCのハードフォークを依頼してみた。

まず結論。Cursolの30倍良い。

開始時に200ドル分のクレジットが付与される招待コードです。どうぞ。
https://app.devin.ai/invite/u63BudBZyhlVxseX

![スクリーンショット 2025-02-16 2.17.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/54af7b7b-9150-4389-8a97-9426a32427ee.png)
![スクリーンショット 2025-02-16 2.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/71b0e08b-db9e-47ac-96af-ef9d18fc5edc.png)
![スクリーンショット 2025-02-16 5.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/8a103b3d-fbc5-413a-8f4a-9860754bbb99.png)
![スクリーンショット 2025-02-16 6.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/39559e4c-8e1d-422a-92e6-4ad3cb0be9ae.png)
![スクリーンショット 2025-02-16 6.47.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/16399715-e3e8-4d85-a8a4-9705451ef0b2.png)



まず、Devin AIを色々触ってみて、個人的に嬉しかった特徴：

・AWSのアクセストークンを渡せば、AWS内の構築も自動的に行なってくれる

・SSHキーを渡せば、DevinAIが自身のUbuntuから自動的に接続し、開発の進行を進めてくれる

・GithubのAPIキーを渡せば、DevinAIが自動的にレポジトリ運用を進めてくれる

・チャットベースのAI (DevinAIのConsoleWebもしくはSlackから指示が送れる)

・DevinAIのConsole(Web)からは、chatの相談、Editor、Shellの閲覧、Keyのインポート、予算管理などが可能

・サブスクの支払いは登録した日から１ヶ月間ごと（月末じめではないので安心）

・並行処理が可能。複数のプロジェクトの処理が並行してできる。(その分、クレジットも消費するが）

・クレジットの消費スピードは体感、DevinAIとともに開発をしている時間において30分〜１時間ごとに1クレジット消費というイメージ。（三十分以上Chatを放置すると自動的に停止してくれる。停止中はクレジット消費はかからない）


という感じです。

とにかく、めっちゃ性能が良くて、体感Cursolの30倍、GPTproの100倍性能が良いです。（chatでの開発相談への返答精度も含めて）

DevinAI自体が固有のUbuntuの開発環境を初めからもってくれているので、まずはDevinAIにDevinAIのUbuntu環境上で作ってもらってから、それをDocker&Github経由で受け取る、みたいな開発進行が可能です。

CursolとGPTproも契約していましたが、開発ならばDevinAIの圧勝でした。

次回は、DevinAIにBTCのハードフォークを依頼してみようと思います。
solanaで独自トークンを発行しSerumに上場させてみた

基本的に参考したのはこのサイト
https://www.zappycode.com/tutorials/create-your-own-token-and-nft-on-solana


まず、[Solana ToolSuite](https://docs.solana.com/cli/install-solana-cli-tools)でインストール、もしくは、v1.7.11なら以下のコマンドからインストール。（macOSでやってます）

```
sh -c "$(curl -sSfL https://release.solana.com/v1.7.11/install)"
```


インストールが完了しPATHも通したら、PC上の適当な場所にウォレットの秘密鍵を入れたフォルダを作成して、コマンドを実行しウォレットを作成する。

```
cd Desktop
mkdir SolanaWallet
solana-keygen new --outfile SolanaWallet/my-keypair.json
```
作成後に表示されるpubkeyが公開鍵。（以下、YOUR_ADDRESSの部分はそれをコピペする）

以下のコマンドで、１SOLのエアドロップを要求して獲得することができるのでトークン発行用に獲得しておく。

```
solana airdrop 1 YOUR_ADDRESS --url https://api.devnet.solana.com
```

ただ、上の記事では、
RPC URL: https://devnet.solana.com に設定すると書いてあるが、そうすると以下のようなエラーが出る。

```
error sending request for url (https://devnet.solana.com/): error trying to connect: invalid certificate: CertExpired
```

https://api.devnet.solana.com 
にすると、無事先に進める。
設定のコマンドは以下。

```
solana config set --url https://api.devnet.solana.com
```


![Screen Shot 2021-09-03 at 3.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970916/ced185a9-05e2-47ce-7da7-5ffc9a184a55.png)


送金コマンド（50トークン送金する場合。前者のアドレスがトークンのアドレス、後者が送信先の公開鍵）

```
spl-token transfer E8aVZ4RvVZHHFAaqdNjUNudkqZuaGxQNDeWGbbZx99Hf 50 8tpnnn9gkQxit4zzE7CNQg8nDKaoEWUk7GuznTFjMyFT
```



ミントを今後禁止にするコマンド

```
spl-token authorize token_address mint --disable
```
Docker備忘録

# Docker振り返り
  DockerについてUdemyで学んだので今回はその振り返りです．間違いなどもあるともいますので，もし間違いがありましたら，ご指摘お願いします．

# 内容

## Dockerfile コマンド一覧

Dockerfileで使用される主要なコマンドは以下の通り：

- `FROM`: ベースイメージを指定
- `RUN`: コマンドを実行
- `COPY`: ファイルやディレクトリをコピー
- `ADD`: ファイルやディレクトリを追加（圧縮ファイルの展開も可能）
- `WORKDIR`: 作業ディレクトリを設定
- `ENV`: 環境変数を設定
- `EXPOSE`: ポートを公開
- `CMD`: コンテナ実行時のデフォルトコマンドを指定
- `ENTRYPOINT`: コンテナ実行時の固定コマンドを指定

Dockerコマンド：

| コマンド                  | 内容                          |
| --------------------- | --------------------------- |
| docker container run  | コンテナを実行する                   |
| docker container stop | 実行中のコンテナを停止する               |
| docker image build    | DockerfileからDockerイメージを作成する |
| docker image pull     | レジストリからイメージを取得する            |

## マルチステージング

マルチステージビルドの目的と意義は以下の通り：

1.  **イメージサイズの削減**: 最終的なイメージには必要最小限のファイルのみを含めることができる。

2.  **開発環境と本番環境の統一**: 1つのDockerfileで複数の環境に対応できるため、環境間の一貫性が向上。

3.  **保守性の向上**: 複数のDockerfileを管理する必要がなくなり、保守が容易。

4.  **ビルドプロセスの最適化**: ビルドに必要なツールと実行に必要なファイルを分離できるため、効率的なビルドプロセスが実現。


## Dockerネットワーク

Dockerネットワークの内容と使いどころ、落とし穴は以下の通り：

### 内容

-   Dockerネットワークは、コンテナ間の通信を管理する機能です。
-   主なネットワークドライバには、bridge、host、overlay、macvlanがある。

### 使いどころ

1.  **マイクロサービスアーキテクチャ**: 複数のサービスを分離しつつ、必要に応じて通信を可能。
2.  **開発環境の分離**: 異なるプロジェクトやバージョンを独立したネットワークで管理。
3.  **セキュリティの強化**: ネットワークを分離することで、不要な通信を防ぎセキュリティを向上（よくわからんかった）。

### 落とし穴

1.  **複雑性の増加**: ネットワークの設定が複雑になり、管理が難しくなる。
2.  **パフォーマンスオーバーヘッド**: ネットワーク層の追加によりわずかなパフォーマンス低下が生じる。
3.  **名前解決の問題**: コンテナ名による通信に依存すると、DNSの問題が発生する可能性がある。
4.  **ネットワークの孤立**: 誤った設定により、コンテナが意図せずネットワークから孤立する可能性。

これらの落とし穴を避けるためには、ネットワーク設計を慎重に行い、適切なモニタリングとトラブルシューティング手法を確立することが重要。

# 振り返り
  一番やりたかったDevContainerでFluttterの開発環境を作成するために必要なことがよくわからなかった．今この方の[git](https://github.com/anaselhajjaji/flutter-dev-container)を参考に構築しているが何がダメなのかがわからない．
  そもそもSDKまわりがよくわかっていないのもあって何から手を付けていけばいいかもわからない．今週中には終わらせたい．
【Vercel】supabaseUrl is required. の解決方法

# はじめに
`Vercel`でデプロイを行った際に、`supabaseUrl is required.`というエラーが発生しました。その原因と解決方法についてまとめます。

:::note warn
***この記事は<font color="Red">個人的なアウトプット</font>を目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです***。
:::


# 原因
`Vercel`に環境変数が設定されていなかった ことが原因です。

`GitHub Secrets`に環境変数を設定していても、`Vercel`の`vercel build`では適用されないため、`Vercel`側で環境変数を設定する必要があります。

# 解決方法
`Vercel`の環境変数を適切に設定することで、エラーを解消できます。

***設定方法***
1. `Vercel`のダッシュボードへ移動
1. 対象のプロジェクトを開く
1. `Settings` → `Environment Variables`を開く
1. `VITE_SUPABASE_URL`と`VITE_SUPABASE_ANON_KEY`を追加
1. 再デプロイ

# 終わりに
`Vercel`のデプロイでは、`GitHub Secrets`だけでは環境変数が適用されないため、`Vercel`側でも環境変数を設定する必要があることを学びました。今後はデプロイ時の環境変数の扱いに注意していきたいと思います。
個人的備忘録：Red Hat系 & Debian系で Apache を簡単インストールして、デフォルトページを表示してみた

## はじめに  
Web サーバーとして広く利用されている Apache (`httpd`) のインストールと設定方法を解説します。

:::note info
***本記事では、Red Hat 系（RHEL / CentOS / Rocky Linux / AlmaLinux）と Debian 系（Ubuntu / Debian）の両方に対応した手順を紹介します。***
:::

初心者でも分かりやすいように、基本的なコマンドを中心に説明します。  

## 書こうと思ったきっかけ  
Linux で Web サーバーを構築する際、Apache は定番の選択肢ですが、ディストリビューションごとに導入手順が異なります。

:::note warn
**そのため、環境ごとに適切な手順を分かりやすくまとめた資料があると便利だと考えました。**
:::

また、設定ミスを防ぎ、スムーズに動作確認ができるよう、基本的な設定やトラブルシューティングのポイントも含めました。

## 実際にやってみた

Webサーバーとして広く利用されている **Apache (httpd)** を、Red Hat系（RHEL / CentOS / Rocky Linux / AlmaLinux）および Debian系（Ubuntu / Debian）でインストール・設定する方法を紹介します。

### 1. Red Hat系（RHEL / CentOS / Rocky Linux / AlmaLinux）

#### 1.1 Apacheのインストール
```bash
sudo yum install -y httpd
```
または（dnfを使用する場合）
```bash
sudo dnf install -y httpd
```

#### 1.2 サービスの起動
```bash
sudo systemctl start httpd
```

#### 1.3 自動起動の設定
```bash
sudo systemctl enable httpd
```

#### 1.4 サービスのステータス確認
```bash
sudo systemctl status httpd
```

#### 1.5 ファイアウォールの設定（HTTP / HTTPSの許可）
```bash
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload
```

### 2. Debian系（Ubuntu / Debian）

#### 2.1 パッケージリストの更新
```bash
sudo apt update
```

#### 2.2 Apacheのインストール
```bash
sudo apt install -y apache2
```

#### 2.3 サービスの起動
```bash
sudo systemctl start apache2
```

#### 2.4 自動起動の設定
```bash
sudo systemctl enable apache2
```

#### 2.5 サービスのステータス確認
```bash
sudo systemctl status apache2
```

#### 2.6 ファイアウォールの設定（HTTP / HTTPSの許可）
```bash
sudo ufw allow 'Apache Full'
sudo ufw reload
```

### 3. 動作確認
Apacheが正常に起動しているかを確認するには、ブラウザで `http://<サーバーのIPアドレス>` にアクセスしてください。

![Screenshot 2025-02-16 at 14.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/c2765aab-6b7c-403a-b3e0-30d53127ffdb.png)

また、サーバー上で以下のコマンドを実行し、Apacheのデフォルトページが取得できるか確認できます。
```bash
curl http://localhost
```

## まとめ
Apache (httpd) は強力なWebサーバーであり、Linux環境で簡単にインストール・設定できます。本記事の手順を参考に、適切な環境で運用してください。

問題が発生した場合は、ログを確認することで解決の手がかりを得ることができます。
```bash
sudo journalctl -xe | grep httpd  # Red Hat系
sudo journalctl -xe | grep apache2  # Debian系
```

**以上でApacheの基本的なセットアップは完了です！**
【Azure】App ServiceからSQL Databaseに接続できるようにする


Azure App Service から Azure SQL Database にアクセスできるようにするためには初回に設定を行う必要があります。

作業のたびに毎回調べているため資料に残します。

https://learn.microsoft.com/ja-jp/azure/azure-sql/database/azure-sql-dotnet-entity-framework-core-quickstart?view=azuresql&tabs=visual-studio%2Cservice-connector%2Cportal#connect-the-app-service-to-azure-sql-database

## 結論

下記コマンドを使用します。

```
az webapp connection create sql --system-identity
-g <your-resource-group>
-n <your-app-service-name>
--tg <your-database-server-resource-group>
--server <your-database-server-name>
--database <your-database-name>
```

使用するパラメーターはそれぞれ下記です。

| パラメータ                          | 説明                                         |
| ----------------------------------- | -------------------------------------------- |
| your-resource-group                 | App Service が存在しているリソースグループ名 |
| your-app-service-name               | 接続元の App Service 名                      |
| your-database-server-resource-group | SQL Database が存在するリソースグループ名    |
| your-database-server-name           | Database が存在する server 名                |
| your-database-name                  | Database 名                                  |

1 行目を実行すると 2 行目以降は対話的に実行できます。
また上記のコマンドは`Microsoft Entra`でパスワードレス認証を行うものです。

SQL 認証を行う際は`--system-identity`をなくせば OK です。対話的に実行している際にユーザーとパスワード入力が追加されます。

:::note warn
パスワードを入力する際は画面上に入力内容が表示されないため心の目を信じて入力してください。
:::

## おわりに

これで、Azure App Service から Azure SQL Database への接続がスムーズに行えるようになります。ぜひ参考にしてみてください。

この記事が皆様のコーディングライフの助けになれば幸いです。

## 参考

[Azure SQL Database Quickstart](https://learn.microsoft.com/ja-jp/azure/azure-sql/database/azure-sql-dotnet-entity-framework-core-quickstart?view=azuresql&tabs=visual-studio%2Cservice-connector%2Cportal#configure-the-database-server)
React Routerの使い分けについて

## はじめに
現在、個人開発のデプロイ作業を進めています。React と Rails API を使った SPA を構築しており、フロントエンド部分は AWS の S3 を利用して静的ファイルをホスティングしています。しかし、動的 URL の処理でつまずいたため、本記事を備忘録として執筆しました。同じ問題に直面した方の参考になれば幸いです。

## エラー内容
AWS の S3 を使用して静的ファイルをホスティングし、index.html を返すように設定しました。しかし、ユーザーの操作によって動的 URL が発行された際に、404 (Not Found: サーバーエラー) が表示されてしまう。

## 結論
HashRouterを使用して、クライアントサイドでナビゲーションを行うようにする。

## 原因
原因は BrowserRouter を使用していたことにあります。BrowserRouter では、すべての URL がサーバーに送信されるため、S3 のように静的ファイルのみを提供するサーバーでは、該当するページが見つからず 404 (Not Found) が表示されてしまう。


## 解決方法
HashRouter を使用します。
HashRouter は、React Router のルーの一種で、URL のハッシュ (#) を使ってルーティングを管理する仕組みです。


違いは以下の通り。
| ルーター        | 仕組み                             | サーバー設定が必要か？                        |
|---------------|--------------------------------|--------------------------------|
| BrowserRouter | `window.history.pushState` を利用 | **必要**  |
| HashRouter    | `window.location.hash` を利用  | **不要** |



例えば、以下のURLにアクセスした時の挙動を比較します。

| URL                          | BrowserRouter の挙動                                    | HashRouter の挙動                                     |
|------------------------------|-----------------------------------------------------|-------------------------------------------------|
| http://example.com/expense   | S3 は expense/index.html を探す → 404 Not Found    | #/expense の部分はサーバーに送られず、React が処理する → 正しく動作 |
| http://example.com/#/expense | サーバーに /expense は送られない → React が #/expense を処理できる | React が #/expense を解釈して Expense コンポーネントを表示 |

## HashRouterの特徴
### ハッシュベースのルーティング
HashRouterはURLのハッシュ部分（#以降）を使用して現在のアプリケーション状態を決定します。これにより、サーバーへのリクエストを発生させずにクライアントサイドでナビゲーションを行うことができます

### クライアントナビゲーション
URLのハッシュ部分の変更を監視し、それに応じてUIを更新することで、ページ全体のリロードを避けながら動的でレスポンシブな体験を提供。

### サーバー設定不要
HashRouterはサーバーサイドで特別な設定が不要です。これは、特に共有ホスティング環境や静的サイトのデプロイメントにおいて便利。

### 使用方法
```react
import { HashRouter, Route, Routes, Link } from 'react-router-dom';

const App = () => {
  return (
    <HashRouter>
      <nav>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </HashRouter>
  );
};

export default App;
```
上記のコードでは、<HashRouter> 内にナビゲーションリンク (<Link> コンポーネント) とルート定義 (<Route> コンポーネント) を含めています。リンクをクリックすると、URL が変更され、それに応じて対応するコンポーネントがレンダリングされます。

## さいごに
今回は、個人開発においてフロントエンドを S3 にホスティングし、CloudFront で SSL 化する手法を採用しました。選択した理由は以下のとおりです。

コストが安価 → S3 は従量課金制で、EC2 を利用するよりも圧倒的に低コスト。

サーバーレスで管理不要 → EC2 のように OS やインスタンス管理が不要で、運用負荷がほぼゼロ。

静的ファイル配信に最適 → React のような SPA には S3 + CloudFront の組み合わせが理想的。

自分の手で作り上げたプロダクトが世界中からアクセス可能になる瞬間まで、引き続きバックエンド、データベースサーバの構築の手法をキャッチアップしたいです。
【Power Automate】[複数の項目の取得]の個数の取得

Power AutomateでSharePointのリストのデータを**複数の項目の取得**で条件付きでデータを取得し、データの個数が１個以上の場合の処理を書くときに、**複数の項目の取得**の個数が欲しくなります。

そこで、個数を取得するには、**変数を初期化する**もしくは**変数の設定**の**Value**の部分で、複数の項目の取得**複数の項目の取得**の個数を取得します。

![2025-02-16_13h45_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/a2aea012-2c52-49f6-a998-3a132ce65aaf.png)

今回は**変数を初期化する**を用います。

**変数を初期化する**をクリックし、パラメータ設定画面を表示します。

![2025-02-16_13h38_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/318398ad-b5d4-4aae-b178-5829d4a8f90b.png)

Nameの部分には任意変数名を、TypeはIntergerを設定します。
実際に**複数の項目の取得**の項目の個数を取得するには、**Value**の部分を設定するのですが、直接設定するのではなく、一旦、右側の**fx**をクリックし、表示されたウィンドウの上の部分に

```
length(outputs('複数の項目の取得')?['body/value'])
```

と入力し、**追加**ボタンをクリックします。

![2025-02-16_13h39_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/aaa8585f-8773-462b-a59d-8e1ca1b41f34.png)

**追加**ボタンをクリック後、下図のようになっていれば、設定完了です。

![2025-02-16_14h02_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/85d42565-d1c1-4b35-ab59-62965a177eeb.png)

# 動作の確認

まず、作成したフローを保存し、**テスト**ボタンをクリックします。

![2025-02-16_14h05_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/e86cbe8b-b6ac-486b-a7e0-2c35ef26209f.png)

**手動**を選択し、**テスト**ボタンをクリックします。

![2025-02-16_14h06_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/a29dbe20-8471-4798-9a52-cea447097d4d.png)

表示された画面の**フローの実行**ボタンをクリックします。

![2025-02-16_14h06_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/7bbd294b-df54-4458-9f9a-5db68ac25f97.png)

**完了**ボタンをクリックします。

![2025-02-16_14h06_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/1cef8e9c-1f87-4282-80c3-588f60a10863.png)

処理にエラーが無ければ、各フローの右上に処理時間が表示され、処理が完了したことが確認できます。

![2025-02-16_14h15_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/6c47a806-3692-4bc6-8c60-466250163c22.png)

実際に取得した個数を確認するには、**変数を初期化する**をクリックし、表示されたウィンドウの**未加工の入力を表示する**の部分をクリックします。

![2025-02-16_14h07_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/2cf9dbc5-fb78-4885-a035-af26cccf62e7.png)

すると、変数の詳細が表示されるので、 valueの部分に数値が入っていれば成功です。

![2025-02-16_14h07_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/217e5c87-17c7-4605-b76e-ab4b31716bc3.png)

あとは、今回作成した変数（list_count）を用いて、If文などの条件分岐に用いることができます。

## 使用例
![2025-02-16_14h22_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3996436/e06c81f0-817e-4513-8e5c-978fbf229e09.png)
FlutterのStatefulWidgetの使い方

FlutterのStatefulWidgetの書き方をいつも忘れて調べ直すのが面倒なので
基本的な記述方法やちょっとした応用方法などを参照できるようにメモします。

## 基本的な骨組み
基本的な構造はこれです。
```dart
import 'package:flutter/material.dart';

class SamplePage extends StatefulWidget {
  const SamplePage({Key? key}) : super(key: key);

  @override
  State<SamplePage> createState() => _SamplePage();
}

class _SamplePage extends State<SamplePage> {
  @override
  Widget build(BuildContext context) {
    return Text("StatefulWidgetのサンプル");
  }
}

```
cloudflare WAF設定 

# はじめに
- 固定のIP以外の接続をブロックするルールの設定のメモ

# 内容
- フィールド「送信元のIPアドレス」を選択、オペレーターは「次にない」
- ANDで、フィールド「ホスト名」を選択、オペレーターは「次と等しい」
- アクションはブロックを選択する

※ちなみにCIDR表記のIPの場合は、オペレーターは「等しい」にすると登録できないので注意！

![スクリーンショット 2025-02-16 13.27.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/6311bbe0-64f4-417b-b00f-5445b5e49d7e.png)

- この形式だとOK

![スクリーンショット 2025-02-16 13.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/9b353981-3523-4e1e-8868-414289218f1e.png)


## IPについて

- 「/」がない場合：単なるIPアドレス。例：192.168.1.10
- 「この1つのIPアドレス」というだけで、「どの範囲に属しているか」の情報がない


- 「/」が入る場合（CIDR表記）：このIPアドレスはどの範囲に属しているか
- 例：192.168.1.10/24の場合、「192.168.1.0 から 192.168.1.255 までのグループに含まれる」
- 例：203.0.113.5/32の場合、この1つのIPだけを指す（1台のパソコンやサーバーを指定するときに使用するらしい

| 表記 | 意味 |
|------|------|
| `192.168.1.10` | ただのIPアドレス（範囲はわからない） |
| `192.168.1.10/24` | 「192.168.1.0～192.168.1.255」のグループに属する |
| `203.0.113.5/32` | たった1つのIPだけを指定 |

# まとめ
- 登録したいIPの表記によって、カスタムルールの書き方が若干変わるのでメモとして残し。

# 参考
- [Cloudflare Web Application Firewall](https://arc.net/l/quote/buhtdkex)
- [CIDR とは?](https://aws.amazon.com/jp/what-is/cidr/)
- [CIDR表記（サイダー表記）](https://wa3.i-3-i.info/word11990.html)
個人的備忘録：チーム開発で作成したReactプロジェクト（skill-typing-front）をローカルでビルドし、S3にアップロードする手順

## はじめに  
React プロジェクト「skill-typing-front」をローカル環境でビルドし、AWS S3 にデプロイする手順をまとめました。

https://github.com/free-honda/Front

:::note info
**AWS S3 を利用することで、サーバーレスでコスト効率の良いホスティングが可能になります。**
:::

本記事では、ローカル環境でのセットアップから、ビルド、S3 へのアップロード、ホスティング設定までを詳しく解説します。  

## 書こうと思ったきっかけ  
React アプリを AWS S3 でホスティングする際、手順が曖昧なまま進めると、権限設定や CORS の問題でアクセスできなくなることがあります。

:::note warn
***実際に S3 にデプロイしながら、どの手順が重要かを整理することで、今後のデプロイ作業をスムーズに進められるようにしたいと考えました。***
:::

また、AWS CLI を活用して効率的にデプロイする方法を学ぶための備忘録としても役立つと思い、記事にまとめました。  


## 実際にやってみた

### 1. プロジェクトの準備
まず、ローカル環境でリポジトリをクローンまたは `skill-typing-front` ディレクトリに移動します。

```sh
cd skill-typing-front
```

依存関係をインストールします。

```sh
npm install
```

または、yarn を使っている場合は以下のコマンドを実行します。

```sh
yarn install
```

### 2. ローカルでビルド

Reactアプリをビルドします。

```sh
npm run build
```

または、yarn を使っている場合:

```sh
yarn build
```

ビルドが完了すると、`build/` ディレクトリが作成されます。

![Screenshot 2025-02-16 at 10.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/7ee75084-ebd8-43d4-b69d-97f820f1e05d.png)


### 3. S3にアップロード

S3バケットにアップロードする前に、AWS CLIがインストールされていることを確認し、適切なAWSアカウントにログインしていることを確認してください。

```sh
aws s3 ls
```

S3バケットに `build/` ディレクトリの内容をアップロードします。

```sh
aws s3 sync build/ s3://your-s3-bucket-name --delete
```

このコマンドにより、ローカルの `build/` ディレクトリの内容が S3 バケットに同期され、不要なファイルは削除されます。

**実際のマネコン画面**

![Screenshot 2025-02-16 at 10.22.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/5363783f-c70c-4070-9d1d-da2256ad34f3.png)


### 4. S3でのホスティング設定

S3バケットで静的ウェブサイトホスティングを有効にする場合、以下の手順を実行します。

1. AWSコンソールでS3バケットを開く。
2. 「プロパティ」タブで「静的ウェブサイトホスティング」を有効化。
3. `index.html` をエントリーポイントとして指定。
4. 必要に応じてパブリックアクセス許可を設定。

または、AWS CLIを使用して静的ウェブサイトホスティングを有効にすることもできます。

```sh
aws s3 website s3://your-s3-bucket-name --index-document index.html
```

### 5. アクセス権限の設定

S3のオブジェクトがパブリックにアクセス可能であることを確認するため、適切なバケットポリシーを設定します。
バケットポリシーの例:

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-s3-bucket-name/*"
        }
    ]
}
```

バケットポリシーを適用するには、AWSコンソールまたはAWS CLIを使用します。

```sh
aws s3api put-bucket-policy --bucket your-s3-bucket-name --policy file://bucket-policy.json
```

### 6. 動作確認

S3の静的ウェブサイトURLにアクセスし、Reactアプリが正しくホスティングされているか確認します。

```sh
echo "http://your-s3-bucket-name.s3-website-region.amazonaws.com"
```

もしアクセスに問題がある場合は、CORS設定やCloudFrontを活用することで改善できる場合があります。

## まとめ  
React アプリ「skill-typing-front」を AWS S3 にデプロイする手順を紹介しました。主な流れは以下の通りです。  

- **プロジェクトの準備**（リポジトリのクローン、依存関係のインストール）  
- **ビルド**（`npm run build` または `yarn build`）  
- **S3 へアップロード**（`aws s3 sync build/ s3://your-s3-bucket-name --delete`）  
- **S3 でのホスティング設定**（静的ウェブサイトホスティングの有効化）  
- **アクセス権限の設定**（バケットポリシーの設定）  
- **動作確認**（S3 の URL でアクセス確認）  

S3 単体では HTTPS 通信ができないため、CloudFront を活用すればより高速かつセキュアなホスティングが可能になります。

今後の拡張として、CI/CD の導入も検討し、より自動化されたデプロイ環境を構築していきたいです。
ユーザー側でできる一工夫とは？　ラベル要素で解決！

こんにちは！
この記事を開いていただきありがとうございます。
今回の記事では、スクリーンリーダーを使ってスマートフォンを操作している際に、ボタンや画像だとは分かるけど、何を示すものか分からない時の解決方法を書いていこうと思います。

# 使用環境
* iPhone

# アクセシビリティの問題
これはボタンに関わらず、画像などでも同じことが言えますが、スクリーンリーダーを使っていると、「ボタン」と読み上げるところでは、ボタンがあることは分かりますが、それが何を示すボタンなのかまでは分からないことがあります。
「ログイン」や「新規登録」といった他の内容でこんなボタンありそうだなと思い、ボタンの数や文章の内容から推測することはできますが、それもなかなか難しいです。
こんなとき、ユーザー側でラベル要素を設定して、何のボタンか分かるようにする方法があります。

# ユーザー側のラベル要素の設定方法
もし、日常的に使うアプリやサイトで何を示すものかを分かるようにしたいときは以下の方法で解決できます。

1. ラベル要素をつけたいところにフォーカスを当てる
2. 選択された状態で2本指でダブルタップしてすぐに手を離さず、押したままにする
3. ウィンドウが出てきて「要素にラベルを設定」という文の下に入力欄が出てくる
4. 入力欄に「ログイン」「メニュー」「通知」など、何を示すものなのか、自分が分かるように記入する
5. 「保存」を押して、再度同じところにフォーカスを当てると、入力した内容が読み上げられるようになる
6. 設定完了

# 注意点
上記の方法で基本的には設定できるのですが、注意点があります。
* 使っているものによって操作方法が異なることがある。
    * アクセシビリティの設定で、ズーム機能を併用して使っている人とそうでない人では操作方法が異なることがあります。
* 押す時の操作方法は変わらない
    * ボタンにラベルを設定した際、通常であればダブルタップでページ遷移をしますが、ラベルが設定されていないもしくはアクセシビリティが確保されていない場合は、1本指でトリプルタップ（通常の長押し操作）をしないとページ遷移しないことがあります。これは、ユーザー側でラベルを設定したとしても、操作自体は変更されないので注意してください。

# 最後に
今回は、ユーザー側で要素にラベルをつける方法について紹介してきました。
ユーザー側の一工夫で使いにくいと感じるアプリも少しは使いやすくすることができるようになっています。
知らなかった方はぜひ試してみてください。
ここまで読んでいただきありがとうございました。
AWS Cloud Practitioner合格体験記

# AWS資格合格体験記 〜学習方法と試験のコツ〜

## はじめに
初めまして！
新卒一年目のHiroと申します。
昨年、AWS資格（CLF-002 AWS Certified Cloud Practitioner）に合格しました！  
本記事では学習方法や試験当日の流れを紹介します。  

## 使用した学習教材
使用した教材は、以下の3点です。
AWSの参考書は数多くありますが、私は以下の”黒本”が好きでした。
（配色とレイアウトが見やすく、解説が分かりやすいため。）
- Udemyの模擬試験（〇〇講師のコース）
https://www.udemy.com/share/101I2O3@WKEA5gIZPSDfxpTow5rZ1qLVjQGbMryf49swVYmPGXrndw9ou2Smf1PzsaYSMLv1Ag==/
- (模擬問題付き)徹底攻略 AWS認定 クラウドプラクティショナー教科書 第2版［CLF-C02］対応
https://amzn.asia/d/8YW20sl
- AWS公式ドキュメント（AWS Well-Architected Framework）


他にも、自分の周りには以下の”白本”と呼ばれる参考書を使う人も多くいました。
ざっくりとサービスを知りたい方には、こちらも人気かと思います。
- AWS認定資格試験テキスト　AWS認定 クラウドプラクティショナー　改訂第3版 (ＡＷＳ認定資格試験テキスト) 
https://amzn.asia/d/1QHSIa7
## 学習スケジュール
1日2時間の勉強を**3週間**続けました。  
基本的に以下の流れで学習します。
- ① Udemyの過去問をひたすら解く。解説を読み込む。
- ② 理解のできない部分を、参考書を読んで理解する。
- ③ ①〜②を繰り返す。

※Well-Architected Frameworkに関しては、公式ドキュメントを直前に読みました。
語呂合わせを調べたり自作することで、簡単に覚えられるようにしました。

## 試験対策のポイント
- **サービス間の違い**を理解する（例：S3 vs EBS）  
- **コスト最適化**や**セキュリティ**関連の問題が多い  
- **AWS Well-Architected Framework**は頻出のため、語呂合わせ等で覚えると良い。
- **復習が重要**（解説を読んで理解を深める）  

## 試験当日の流れ
- テストセンターで受験しました。
- 時間は130分でした。
- 考えるというよりも知識を問う問題がほとんどのため、
時間には余裕があると思います。

## 結果と感想
- 無事**合格**しました（764点/700点合格）！  
- 試験対策をしっかりすれば、私のようなAWS未経験者、IT初心者でも合格可能です。  

## 合格のコツ
- **受験の申し込み**を先に行い締切を設定することで、学習意欲up
- **似たようなサービスをノートにまとめるなどして理解することが大切** 
---
- 2ヶ月後にはSAAも受験し、無事合格しました。（別記事を投稿予定です。）
- 時間ある人は、**AWS Skill Builder**（無料の公式トレーニング）に触れてみても良いかもしれません。
ハンズオン（実際にAWSを触ること）を経験するとより一層知識が深まるり、その他AWS資格学習にも役立つと思います！

以上、AWS資格の合格体験記でした！  
参考になれば嬉しいです 😊
[MySQL] dumpとリストア入門

この記事では、MySQLのdumpとリストアの方法を初心者向けに解説します。
環境: `MySQL:8.0.40`

:::note info
dumpを取る...DBのバックアップを取ること
リストアする...バックアップをDBに適用させて、データの復元を行うこと
:::

## dumpとリストアの実行方法
### dumpの取り方
- `mysqldump`コマンドを使います
- `[option]`には、`--host`、`--port`、`--user`、`--password`など皆様の環境に合わせて設定してください
- `dump.sql`にdump結果がSQLで保存されます
```
$ mysqldump [option] > dump.sql
```

### リストアの方法
- dumpしたファイルを読み込ませてデータを復元します
```
$ mysql [option] < dump.sql
```

## 実際のDBを使ってやってみる
現在データベースmainの中にあるusersテーブルを元に解説します。
```
mysql> select database();
+------------+
| database() |
+------------+
| main       |
+------------+
1 row in set (0.02 sec)

mysql> select * from users;
+----+----------+------+
| id | name     | age  |
+----+----------+------+
|  1 | number_1 |   10 |
|  2 | number_2 |   20 |
|  3 | number_3 |   30 |
+----+----------+------+
3 rows in set (0.01 sec)
```

### usersテーブルのデータをdumpしてみる
データベースmainにあるusersテーブルを、まるごと全てdumpする
```
$ mysqldump [option] main users > users_dump.sql
```
dump結果のusers_dump.sqlを見てみる(抜粋しています)
```
$ vi users_dump.sql
・・・
DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `age` int DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

LOCK TABLES `users` WRITE;

INSERT INTO `users` VALUES (1,'number_1',10),(2,'number_2',20),(3,'number_3',30);

UNLOCK TABLES;
・・・
```
中身は、下記の処理がSQLで書かれています。
1. usersテーブルが存在していたら、DROPで削除
2. CREATE TABLEでusersテーブルを作り直し
3. usersテーブルに書き込みロック
4. 元々usersテーブルに入っていたデータをusersテーブルにINSERTする
5. ロックを解除

このSQLをDBに読み込ませてあげることで、データの復元をすることができます。


### usersテーブルのデータをリストアしてみる
下記の手順でリストアしてみます。
1. usersテーブルの中身を削除
2. 先ほど取ったdumpファイルを使って復元

```
# データ削除
mysql> delete from users;
Query OK, 3 rows affected (0.07 sec)

# リストア
$ mysql [option] main < users_dump.sql

# usersテーブルのデータが復元されていることを確認
mysql> select * from users;
+----+----------+------+
| id | name     | age  |
+----+----------+------+
|  1 | number_1 |   10 |
|  2 | number_2 |   20 |
|  3 | number_3 |   30 |
+----+----------+------+
3 rows in set (0.03 sec)
```

## dumpの取り方色々
オプションを設定すると、さまざまなdumpの取り方ができます。
- mainのusersのidが1のもののみdumpを取る
```
mysqldump [option] main users --where id=1 > users_dump.sql
```
- スキーマ情報を省略して、データだけをdump
```
mysqldump [option] --no-create-info main users > users_dump.sql
```
- リストア時に、データを`replace into`で入れられるようにする
```
mysqldump [option] --replace main users > users_dump.sql
```
- リストア時に、データを`insert ignore into`で入れられるようにする
```
mysqldump [option] --insert-ignore main users > users_dump.sql
```

## 参考
https://dev.mysql.com/doc/refman/8.0/ja/mysqldump.html
【Vercel × Vite × React Router】Reactの/:idページが404になる原因と解決方法

# はじめに
`React`で制作したアプリを`Vercel`にデプロイした際、ビルドエラーは出ていないのに`/`以外のページが`404 Not Found`になってしまいました。特に`/:id`のページが表示できなかったので、その解決方法をまとめました。

:::note warn
***この記事は<font color="Red">個人的なアウトプット</font>を目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです***。
:::


# 原因
`Vercel`が`React`のサブページを認識できていないことが原因です。
`Vite`と`React Router`を使用した場合はクライアントサイドルーティングを採用しているため、ブラウザで`/:id`に直接アクセスすると、`Vercel`のサーバーは`index.html`ではなく`404 Not Found`を返してしまいます。

# 解決方法
`Vercel`に`rewrites`を設定し、どのルートでも`index.html`を返すようにします。

```jsx
{
  "rewrites": [
    {
      "source": "/:hoge",
      "destination": "/index.html"
    }
  ]
}
```
この設定により、`/:hoge`へのアクセスが`index.html`にリダイレクトされ、`React`のルーティングが正しく機能するようになります。

# 終わりに
この問題は`Next.js`では発生しないため、`React`と`Next.js`の違いを意識することが重要です。今後もそれぞれのメリット・デメリットを理解しながら、適切なフレームワーク選びをしていきたいと思いました。
初学者向けTCA（The Composable Architecture）解説

## はじめに

Swiftでアプリを開発する際、設計パターンやアーキテクチャの選択が重要になります。その中でもThe Composable Architecture（TCA）は、SwiftUIアプリの開発に適した強力なアーキテクチャの一つです。

自分の学習内容整理も兼ねて、TCAの基本概念と初心者向けの導入方法を解説します。

---

## そもそもTCAとは？

TCA（The Composable Architecture）は、Point-Freeが開発したアーキテクチャで、以下の4つの概念を基に構成されています。

- **State（状態）**: アプリの状態を表すデータモデル。
- **Action（アクション）**: ユーザー操作やイベントを定義する。
- **Reducer（リデューサー）**: Actionに応じてStateを更新する。
- **Store（ストア）**: State、Action、Reducerを管理する中心的な役割。

TCAは、**Redux**や**Elmアーキテクチャ**に似た構造を持っており、状態管理を一元化しながらアプリを構築できます。

---

## TCAの基本構成

### **1. State（状態）**

```swift
import ComposableArchitecture

struct CounterState: Equatable {
    var count: Int = 0
}
```

### **2. Action（アクション）**

```swift
enum CounterAction: Equatable {
    case increment
    case decrement
}
```

### **3. Reducer（リデューサー）**

```swift
let counterReducer = Reducer<CounterState, CounterAction, Void> { state, action, _ in
    switch action {
    case .increment:
        state.count += 1
        return .none
    case .decrement:
        state.count -= 1
        return .none
    }
}
```

### **4. Store（ストア）**

```swift
let store = Store(
    initialState: CounterState(),
    reducer: counterReducer,
    environment: ()
)
```

---

## SwiftUIでのTCAの実装

TCAはSwiftUIと組み合わせて使うことができます。

### **SwiftUIのView**

```swift
import SwiftUI
import ComposableArchitecture

struct CounterView: View {
    let store: Store<CounterState, CounterAction>
    
    var body: some View {
        WithViewStore(self.store) { viewStore in
            VStack {
                Text("Count: \(viewStore.count)")
                    .font(.largeTitle)
                
                HStack {
                    Button("-") {
                        viewStore.send(.decrement)
                    }
                    .padding()
                    
                    Button("+") {
                        viewStore.send(.increment)
                    }
                    .padding()
                }
            }
        }
    }
}
```

### **Appエントリーポイント**

```swift
@main
struct CounterApp: App {
    var body: some Scene {
        WindowGroup {
            CounterView(
                store: Store(
                    initialState: CounterState(),
                    reducer: counterReducer,
                    environment: ()
                )
            )
        }
    }
}
```

---

## TCAのメリット・デメリット

### **メリット**
- **状態管理が明確** - アプリの状態が一元管理されるため、予測しやすい。  
- **テストがしやすい** - Reducerをユニットテストしやすい。  
- **コンポーザビリティが高い** - 小さなReducerを組み合わせて大きなアプリを作れる。  

### **デメリット**
- **学習コストが高い** - 初めて触れる場合は、Reducerの考え方に慣れる必要がある。  (正直初学者向けではないかも)
- **コード量が増える** - 小さなアプリにもReducerやStoreを用意するため、ファイル数が増えがち。  

---

## まとめ

| 項目 | 内容 |
|------|------|
| 設計 | Reduxに似た状態管理アーキテクチャ |
| 主要コンポーネント | State, Action, Reducer, Store |
| 利点 | 状態管理が明確、テストが容易、スケールしやすい |
| 注意点 | 学習コストが高い、小規模アプリには冗長な場合がある |

僕も少しづつ慣れていきたい...
VSCode Ninja - キーボードだけでVSCodeを操作


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57640/d99d6121-22c1-4ebe-90fb-b8b8dc2b96a5.jpeg" width=384>


# 1. はじめに

デフォルトのVSCodeの画面は情報が多すぎる！ということで本記事ではVimmerのように無駄のないシンプルな画面で、極力マウスを使わずに快適にコーディングできる「VSCode Ninja」スタイル(勝手に名前つけた)を目指します。

このスタイルの核となるのが**Zenモード**です。不要なUIを排除し、純粋にコードに集中できる環境を提供します。そして、Zenモードを最大限に活かすため、Neovim拡張、Quick Open、キーバインドのカスタマイズを駆使して操作性を極限まで高めることを目指します。

# 2. Zenモードの活用

Zenモードは、VSCodeをシンプルで没入感のある環境にするための重要な機能です。**VSCode Ninja**のような環境を作るための中心となる要素であり、これを活用することで、余計なUIを削減し、最大限に集中できる環境を構築できます。

- **起動方法**：`cmd + k, z`
- **主な利点**：
  - 余計なUI要素を削減し、作業に集中しやすくなる
  - キーボード主体の操作を促進する
  - より高速にコードを書く環境を構築できる

このZenモードを使いやすくするために、Neovim拡張やQuick Open、各種キーバインドの修正を行っています。

# 3. Vimキーバインドの導入

Vimキーバインドを導入する方法はいくつかありそうですが、VSCode Neovimがおすすめです。VSCodeの裏で本物のNeovimを動かしているため、キーバインドの再現度が高く高速で動きます。

https://github.com/vscode-neovim/vscode-neovim?tab=readme-ov-file#vscode-neovim

よくVimキーバインドだと、コード定義に移動できないのでは？という声を聞きますが、関数などの上にカーソルを移動させ、`gd`で定義に移動できます。

# 4. キーバインド設定

マウスを使わずにキーボードのみで操作するためにキーバインドの設定もいじりましょう。自分は以下のような設定にしています。

## 4.1 エディタのキーバインド設定

| キーバインド | 機能 |
|--------------|------|
| `cmd + k, e` | ファイルエクスプローラを開く |
| `cmd + k, g` | Gitビューを開く |
| `cmd + f` | 全文検索 & 置換 |
| `cmd + [` / `cmd + ]` | 戻る / 進む |
| `shift + cmd + [` / `shift + cmd + ]` | 前のエディタに移動 / 次のエディタに移動 |

## 4.2 ターミナルのキーバインド設定

| キーバインド | 機能 |
|--------------|------|
| `cmd + d` | ターミナルを横に分割 |
| `cmd + t` | 新しいタブ(ターミナルグループ)を開く |
| `cmd + w` | ターミナルを閉じる |
| `cmd + [` / `cmd + ]` | 前のターミナルペインに移動 / 次のターミナルペインに移動 |
| `shift + cmd + [` / `shift + cmd + ]` | 前のタブ(ターミナルグループ)に移動 / 次のタブに移動 |

# 5. マウス操作を減らすテクニック

## ファイル名検索 & 開く

コマンドパレット(`cmd + p`)でマウスに触れることなく、ファイル検索 & 開くがスムーズに行えます。

## 拡張機能などサイドバーへのアクセス

quick open view(`ctrl + q`)でZenモードを解除せず、サイドバーの項目にアクセスできます。`ctrl + q` を連続押しすることで次の項目に移動できます。

# 6. まとめ

VSCode Ninjaを目指すためには、Zenモードを中心に環境を最適化し、キーボード操作を徹底的にカスタマイズすることが鍵となります。

今回紹介した設定を導入することで、マウスを使わずに迅速にコードを書ける環境を手に入れることができます。ぜひ、自分の作業スタイルに合った設定を試し、究極の生産性を目指しましょう！
ディスレクシア（難読症）と技術文書が読めること

　一般的にコードが書けなかったり、技術文書が読めないのは、原理的にはディスレクシア（難読症）と同じなのではないかという僕の中での仮説がある。
 　環境構築さえ、技術文書が読めないとできない。
　一般的な難読症は、僕は難読症ではないので詳しいことは知らないが、普通の教科書や小説などが読めない症状だと認識している。
 　技術書に対する難読症とは、技術文書以外の書物は読めるが、技術文書は読めない形態のものである。技術文書が読めなければ、コードを書くことも、技術を理解することも難しくなるだろう。当然生成AIも活用してプログラミングすることはできない。
  で、どこの本に書いてあったか忘れたが、「難読症の処方箋は音読の個人レッスンである」という記述があった。難読症に関する本である。
  この記述を読んで思ったのが、この形態は、僕がやっている少人数での勉強会と同じものである。
  プログラミングを学ぶためには、Linuxを使ったほうが良いとか、C言語をやったほうが良いとか、コードをガンガン書いたほうが良いとか、アウトプットしたほうが良いとか、その他の戦術的な問題もあるが、結局のところ、「技術文書を読めない」という問題を何とかするべきであって、その後にゆっくりと戦術的な条件を満たせばいい。
  文字の形→音→意味→技術情報　　のマップがその人の脳内にできていないことが問題である。

  難読症の処方箋、音読の個人レッスンの問題は、それが大学や専門学校また、プログラミングスクール、一般的な小学校中学校で実装するにはあまりにもハイコストであるということである。だが、人間は生まれながらに難読症で、人間は人生のどこかで難読症を治療されているのかもしれない。多くは小学校で行われる。
  一般的には個人レッスンをせずとも、集団での朗読で治療できるのだろう。
  だが、ハイコストであるが、無料の勉強会では実装できてしまうというのがIT業界の奇妙なところで、最終的に勉強会の宣伝というところに落ち着いてしまう。勉強会の主催者は勉強会の主要ユーザーなのが影響している。プロバイダーではない。
「技術文書を読めない」という事象に対処するためには、講義形式やパワポだけでは駄目なのである。
  ということで、理工学勉強会やってます。

  https://engineeringskype.connpass.com/

  理工学勉強会に来なくても、初心者は、自分で勉強会を主催する方法もあるだろう。
文系でもわかるようにCNN（畳み込みニューラルネットワーク）を説明してみる

### **CNN（畳み込みニューラルネットワーク）とは？**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125746/a2e908c8-f77c-4e35-b0a7-90b0c35bb4c5.png)

CNN（Convolutional Neural Network）は、画像を認識するために作られた人工知能（AI）の仕組みの一つです。  
スマホの顔認識や自動運転のカメラ、病院でのX線画像の解析など、様々な場面で使われています。

普通の画像には「色」や「形」、「明るさ」など、たくさんの情報が詰まっています。  
CNNは、こうした情報をうまく整理しながら、「この画像に何が映っているのか？」を理解しようとします。

---

### **CNNの仕組みを超ざっくり説明！**
CNNの流れは、大きく分けて **3つのステップ** があります。

#### **① 畳み込み（Convolution） →「特徴を見つける」**
画像の中から、 **大事な部分（特徴）** を探す作業です。  
たとえば、猫の画像なら「耳の形」や「目の配置」など、猫らしいポイントを見つけます。

🔍 **どうやって？**  
小さなフィルター（マスクのようなもの）を使って、画像の一部をチェックします。  
「ここに線がある！」「ここは丸い形っぽい！」といった情報を抜き取ります。

---

#### **② プーリング（Pooling） →「データを減らす」**
画像のデータはとても大きいので、少しまとめて小さくします。  
これによって、計算がラクになり、余計な情報を減らせます。

📏 **どうやるの？**  
例えば、4つのピクセルの中で **一番大きな値** だけを残す、という方法があります（「最大プーリング」という）。

✅ **メリット**
- 画像のサイズが小さくなる → 計算が早くなる
- 多少のズレや変化に強くなる（例えば、ちょっと違う角度の猫でもちゃんと認識できる）

---

#### **③ 全結合（Fully Connected） →「最終判断」**
最後に、これまで見つけた特徴を組み合わせて、「これは〇〇だ！」と判断します。

🧠 **ここが「脳」っぽい部分！**  
CNNの「畳み込み」と「プーリング」を通して、画像の特徴を細かく整理しました。  
その情報を使って、「これは猫！」「これは犬！」と決めるのがこの部分です。

---

### **例：CNNで猫と犬を見分ける！**
1. **畳み込み（Convolution）**  
   - 「耳がとがっている」「目の形が〇〇」などの特徴を探す  
2. **プーリング（Pooling）**  
   - 似た特徴をまとめる → 少し画像のデータを減らす  
3. **全結合（Fully Connected）**  
   - 「猫っぽい特徴が多いから、これは猫！」と判断する

これを大量のデータで学習させることで、AIがどんどん賢くなっていきます。

---

### **CNNがすごい理由**
🖼 **画像に強い！**  
CNNは「画像から特徴を自動で見つける」ので、普通のニューラルネットワークよりも **画像認識が得意** です。

🚗 **色々な場面で活躍！**  
- **自動運転** → 交通標識や歩行者を識別  
- **医療** → CTやX線で病気を発見  
- **SNS** → インスタの「おすすめ投稿」や「顔フィルター」  
- **防犯カメラ** → 不審者や危険な動きを検知  

---

### **まとめ**
CNNは「画像を理解するのが得意なAIの仕組み」。  
「畳み込み」「プーリング」「全結合」の3ステップで、画像の特徴を整理して、何が映っているかを判断します。

これによって、スマホの顔認識、自動運転、医療診断など、私たちの生活に役立つ技術になっています！
プラズモンのランダウ減衰。q=0で寿命無限大？

乱雑位相近似（RPA）を用いると一様電子ガスにおけるプラズモンのランダウ減衰は
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482779/4c982764-2abe-4890-b0c2-4c8fcf0285fc.png)
（物理学最前線４共立１９８３，強結合電子学の多体問題、一丸節夫より）
において、独立電子対励起領域であるkc以上で起こることになる。
RPAにおいてはkc以下ではプラズモンは減衰しない。

重要な点が一つ見過ごされている。RPAできちんとバンド構造を考慮に入れるべき点である。すなわち、バンド構造を考慮に入れると$\chi_0(q=0, \omega \sim プラズモンエネルギー程度)$の虚部がゼロにならないーー＞これはフェルミ面と$\omega$をプラズモンエネルギー程度ずらした等エネルギー面が交差を持たざるを得ないからである(証明できる？）。なのでq=0での幅もランダウ減衰が効いている。

ところが一丸（p.57）にはランダウ減衰ではなく電子の衝突効果、とある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482779/1fb4e8dd-72ab-43ca-bf8b-1ed0a8be344f.png)
電子の衝突効果の意味がよくわからない（はしご近似で電子正孔散乱を取り込んだ分極関数を計算しなさいという意味ではないかとも思うが、プラズモンのエネルギー運動量保存を考えるとオンシェルにはならないので2体の範囲では虚部が出ない）。4体への崩壊チャネルを計算しないといけないようにも思う。
がいずれにせよ、上述のランダウ減衰を先に計算すべきだと思う。

別記事にしたけどマグノン寿命でも類似のことがある。ただ、q->0 omega->0となる分散なので第一音波のようなことを考えないといけないとかの議論もある。
【ChatGPT】を活用して自動的に富を築くための5つのPromptです。


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

　今回は、ChatGPTを活用して自動的に富を築くための5つのPromptです。記事の紹介とPromptです。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はありません。あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　まずは、ニュースです。

　サムがポストしました。
　　[サム・アルトマンポスト](https://x.com/sama/status/1890816782836904000?t=nyYnNjhYKtr79rNVuBdvPw&s=19)

　“私たちは
　　ChatGPT（4o）の
　　　アップデートを公開しました。”

　いくつか反応が上がっています。

　対話能力がより人間っぽくなったとか
　　文章能力が向上したようです。
***
　これに伴ってか、
　　Web版での
　　　Promptの編集が
　　　　できなくなっています。

　スマホアプリ版は
　　大丈夫ですね。

　おそらく、
　　一時的な不具合ではないかと
　　　思われます。
***
　では、【本題】です。

　今回は、
　　ChatGPTを活用して
　　　自動的に富を築くための
　　　　5つのPromptです。

　Jodie Cookさんの記事を
　　参考にしました。
　　　[5 ChatGPT Prompts To Build Wealth Doing Nothing](https://www.forbes.com/sites/jodiecook/2025/01/30/5-chatgpt-prompts-to-build-wealth-doing-nothing/?utm_source=chatgpt.com)

　質問に答えることで
　　簡単な助言を得られる
　　　Promptです。

***（ChatGPT）***
Forbesの記事「5 ChatGPT Prompts To Build Wealth Doing Nothing」では、ChatGPTを活用して自動的に富を築くための5つのプロンプトが紹介されています。以下に、各プロンプトの説明と日本語訳をコードブロック内にまとめました。

1. **小さな日々の金銭習慣のシステムを設計する**

   このプロンプトでは、ChatGPTに現在の金銭習慣について質問させ、それに基づいて大きな富に繋がる小さな日々の習慣を提案します。

   ```
   私の現在の金銭習慣について質問し、それに基づいて大きな富に繋がる小さな日々の金銭習慣のシステムを設計してください。
   ```

2. **パッシブインカムを生み出すビジネスモデルを特定する**

   このプロンプトでは、ChatGPTにあなたのスキルや興味について質問させ、それに基づいてパッシブインカムを生み出すビジネスモデルを提案します。

   ```
   私のスキルや興味について質問し、それに基づいてパッシブインカムを生み出すビジネスモデルを特定してください。
   ```

3. **投資ポートフォリオを最適化する**

   このプロンプトでは、ChatGPTに現在の投資状況やリスク許容度について質問させ、それに基づいて最適な投資ポートフォリオを提案します。

   ```
   私の現在の投資状況やリスク許容度について質問し、それに基づいて最適な投資ポートフォリオを提案してください。
   ```

4. **自動化された貯蓄計画を作成する**

   このプロンプトでは、ChatGPTに収入や支出の詳細について質問させ、それに基づいて自動化された貯蓄計画を作成します。

   ```
   私の収入や支出の詳細について質問し、それに基づいて自動化された貯蓄計画を作成してください。
   ```


5. **財務目標達成のための行動計画を策定する**

   このプロンプトでは、ChatGPTに短期および長期の財務目標について質問させ、それに基づいて具体的な行動計画を策定します。

   ```
   私の短期および長期の財務目標について質問し、それに基づいて具体的な行動計画を策定してください。
   ```

これらのプロンプトを活用することで、ChatGPTがあなたの個別の状況に合わせたアドバイスを提供し、効果的に富を築く手助けをしてくれるでしょう。 
***

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

　今回は、ここまで。