OmniAICreator/Qiita-1.07M huggingface dataset:
request per second について考えてみた

ほぼ独り言に近いです。間違ってたら指摘してください。

## 前提

システムデザインの面接を受けていたとする。
ここで、このサービスはトラフィックのスパイクがあります、と言われたとする。

何を考えて何と答えますか？という話。

## 考え方

具体的に 何request per secですか？と尋ね、「500 rpsです」と答えられたとする。
が、それを聞いても(面接の場では)どうしようもない。

ボトルネックを考えることが大事なのじゃないかと思う。
ボトルネックとなりうる可能性を示唆して、解決方法を提示すればいいと思う。

- web server -> DNS + LB + autoscaling で解決できそう。
- app server の CPU 処理 -> 同じく、DNS + LB + autoscaling で解決できそう。
- RDB の読み込み -> read replicaで解決できそう。
- RDB の書き込み -> mutli-master 構成や、shardingで解決できそう。(ただし、complexityは増す。)

となると、DB「read heavy か write heavy か」は聞く/考える必要がありそう。

以下をもとに考えると、RDBへのwriteが一番のボトルネックになるのかも、と思った。

## 数字の勘

具体的な数字を聞いても仕方ない、とは言ったものの、具体的な数字のイメージを持つのは大事そう。

### app server

app server の CPU 処理に関しては、CPU usage 10% で 100ms かかるリクエスト (これが現実的な数字かはわからない) があるとする。これを８コアのサーバー1台で裁くとすると、rpsは、

10 * 10 * 8 * 1 = 800 rps。

オートスケーリングするならこれに台数をかけたものになる。結構捌けるのだなという感想。

いや、よく考えると、

> CPU usage 10% で 100ms かかる

これは、処理の重さとCPUの性能に依存して決まる数字なので、前提がガバガバな気がしてきた。


### RDB

PostgreSQLで考えてみる。以下に依存するはず。

- ハードウェアのスペック
- 現在のテーブルサイズ。とはいえ、処理時間はO(N)なので、影響は大きくないのかも。
- indexの個数。readは早くなり、writeは遅くなる。(indexの更新は非同期でもできるんだっけ？)
- レプリケーションの数。readは早くなり、writeは遅くなる。(ただし、replicationを非同期にやればwriteへの影響は軽微。)
- トランザクションのレベル。(最低レベルにすると、結構捌けるのかも。read/writeリクエストのそれぞれが、非同期に読み書きすればいいので。)

具体的な数字はわからなかったが、ネットでググると、PostgreSQLで、read queryを 20k/secとか、600k/secとか捌いたとかいう武勇伝が出てくる。本当なのだろうか。
大文字小文字変換ツール

大文字小文字変換ツールを作成しました


```Ruby
#大文字に変換
def oomoji(msg)
    msg1 = msg.upcase
    return msg1
end

#小文字に変換
def komoji(msg)
    msg2 = msg.downcase
    return msg2
end
# 文字列の出力
def disp(msg)
    puts msg
end

name = 'test'
disp(name)
name1 = oomoji(name)
disp(name1)
name2 = komoji(name1)
disp(name2)
```
メモリ使用率が高騰したので調査したことまとめ

最近、サーバーでメモリ使用率が異常に高くなる問題に直面しました。この問題を調査する過程で得た知見を共有したいと思います。調査の流れを記載するので同じようにメモリ使用率の高騰で悩んでいる方の参考になるかと思います。
特に朝の特定の時間にメモリ使用率が高くなる現象に焦点を当てます。

## 1. 症状の確認

まず、メモリ使用率が高騰する時間帯にtopコマンドを使ってプロセスを確認しました。しかし、特にメモリ使用率が高いプロセスは見つかりませんでした。

## 2. ログの収集
次に、topコマンド、slabtopコマンド、freeコマンドを用いて、メモリ使用率の高い朝5:30から8:00の間のログを収集しました。このログから、プロセスのメモリ使用量が高いわけではなく、slabの使用量も2GB程度であることが判明しました。しかし、10GB以上がキャッシュに使用されていることが分かりました。

## 3. freeコマンドの解析
サーバのメモリ使用状態を理解するため、freeコマンドを詳しく調べました。ここでの重要なポイントは以下の通りです。

total: メモリの総量。
used: OSやアプリケーションに割り当てられたメモリ量。
buff/cache: ページキャッシュとバッファキャッシュに使用されるメモリ量。これはデータのアクセス速度を上げるために使用されます。
free: usedやbuff/cacheに割り当てられていない、自由に使えるメモリの残り量。

**スワップとスラブキャッシュ**
スワップ: 物理メモリが不足した際に、一時的にデータをHDDやSSDに格納する仕組み。
スラブキャッシュ: カーネルのキャッシュであり、/proc/meminfoやslabtopコマンドで確認できます。


## 4. キャッシュの影響
メモリ使用率が高いのはプロセスやslabが原因ではなく、主にキャッシュによるものであると判断しました。キャッシュはメモリの空き容量がなくなると自動的に解放されます。手動でキャッシュを削除する方法もありますが、OSに任せる方が望ましいと考えました。


# 結論

結論としては原因がキャッシュだったので特に問題はありませんでした。
この調査を通して、Linuxのメモリ管理について深く理解することができました。特に、メモリの使用量を適切に分析し、正確に理解することの重要性を学びました。この知識は、将来的に類似の問題に直面した際に非常に役立つでしょう。
Springフレームワーク超入門

#基礎知識
## Spring Frameworkのコア機能
### Dependency Injection：依存性の注入
#### クラス依存
#### インタフェース依存
#### 五つのルール
①インターフェースを利用して依存関係を作る 
②インスタンスを明示的に生成しない 
③アノテーションをクラスに付与する 
④Spring Frameworkにインスタンス生成させる 
⑤インスタンスを利用したい箇所でアノテーションを付与する
#### アノテーション

```diff_java
@Component
//Spring Frameworkは「起動時」に対象プロジェクトのパッケージをすべてスキャンします。この機能を「コンポーネントスキャン」といいます
@Controller
```

### Aspect Oriented Programming：アスペクト指向プログラミング
AOPを簡単に説明すると共通処理等「横断的関心事」を抽出し、プログラムの様々な箇所で呼び出せるように設定することで、私たちは実現すべき機能「中心的関心事」のみ記述すれば良くなるという便利な仕組みです
- 中心的関心事 実現すべき機能を表すプログラム
- 横断的関心事 本質的な機能ではないが品質や保守／運用等の観点で必ず必要な機能を表すプログラム
PDOでデータベースにアクセス

PHPでDBに簡単に接続できるPDOというものを使ってデータベースにアクセスします。
MANPを起動させphpMyAdminにアクセスしてDBを作ります。

## データベース用アカウントの作成
まず初めにデーターベースにアクセス可能なアカウントを作成していきます。
phpMyAdminのトップページにアクセス→上のタブのDataBaseをクリック→アカウントを追加したいデーターベース欄の権限をチェックする→画面下の方にあるユーザーアカウントを作成するをクリックします。

ユーザー名を入力→ホスト名をローカル→パスワードを入力→もう一度入力→権限の付与の選択→実行で完了です

## アカウントを使いDBを扱っていく
ここからコードを書いていきます。やっていきます。
```php
$dns = 'mysql:host=localhost;dbname=study;charaset=utf8';
$name = 'user';
$pass = 'password';

try{
    //データベース、ユーザー名、パスワードから接続をする
    $dbh = new PDO($dns,$user,$pass,[
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    ]);
    echo "接続成功";
}catch(PDOException $e){
        echo '接続失敗' . $e->getMessage();
        exit();
}
```
インスタンスの作成時にオプション(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)をつけエラーが発生した場合にはエラーメッセージを受け取れます。

## データベースから取得してみる
別ページからpostされた値のページを取得していきます。
```php
$id = $_POST["id"];

$sql = "SELECT * FROM userDB WHERE id = :id";
$stmt = $dbh->prepare($sql); //sql文の準備
$stmt->bindvalue(":id", (int)$id, PDO::PARAM_INT); //:idにidの値をINT形式で代入
$stmt->execute(); //実行
$result = $stmt->fetch(PDO::FETCH_ASSOC);
```
手順としては上記のものです。
bindvalueは一度に複数の置き換えは不可能
fetchAllで複数帰ってきます、PDO::FETCH_ASSOCにしているのは配列で複数返ってきた場合データが扱いやすいからです。

## 終わりに
今回はデータベースに接続して値の取得を行いましたが他にもできます。これからも勉強を続けていこうと思います。
[速報] Kaggle参戦、現在17位。金メダル圏内へ

今朝submitしたパラメータの結果が先ほど出て、LBスコア0.970に。現在17位になりました！金メダルの下から2番目！明日の朝になったら落ちているかもしれないので、記念スクショ。

ちなみに、「Your submission scored 0.786」というのは、[先ほど投稿した記事](https://qiita.com/rho-guy/items/721c7de41c682832c7df)の「タイプミスに注目した分類手法」の成績です。

![金メダル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3666147/c1599c2d-a92c-c7f7-3513-1cf334ee7c68.png)
個人的な勉強メモ4

## ノート
1. Goの並行処理について学習
1. goroutineとchannel
1. channelという概念を初めて知った。
1. 途中でgoleakという外部パッケージでテストをした。
1. するとパッケージがgo1.20以上のバージョンでないと動かなかった。
1. go1.19->go1.21.6にバージョンアップ
1. go mod tidy -go=1.21でgo.modも更新。
1. テストが動くようになった。

## キュー
並行処理を通して、今まで学習していた言語ではよしなにやってくれていたことを少しずつ理解していっている。

## サマリー
外部パッケージの依存関係を解消する場合、公式のページからinstallしたほうが楽。
並行処理のデッドロックなど、気になるところが多い。
PowerAutomateDesktopでPower Fxの機能を検証２

　前回の検証では、使い方と操作画面の変化を取り上げた。２回目の今回は実際使って検証してみる。

 #検証その１

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/09f0ec1e-6597-5315-de11-33b0f9b60618.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/9f0f1e16-863a-e014-03ec-38005a317211.png)

#実行結果その１

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/2762433c-7593-dfee-5575-dc4ac478e180.png)

#検証その２

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/d5dae4d1-f0d6-0b3c-c22f-7106dbbbcd45.png)

#実行結果その２

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/28628c0c-d670-5147-c28f-9f9fad54d054.png)

#検証その３

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/4793d001-f258-0f52-7917-618b57d5e008.png)

#実行結果その３

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/2075aa9e-c936-967e-17cf-28358f6bc745.png)

#検証その４

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/378e78ef-d8fe-567c-1c56-9ce4ab5ca153.png)

#実行結果その４

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/20ff0fd1-6058-0236-0c98-3b227a1e1934.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/adbb6395-83e8-9947-aa61-092fc7e548ba.png)

#検証その５

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/1686d01b-bb3e-0580-9288-cf865b9fda3e.png)

#実行結果その５

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/b1872d5a-ac60-abc3-79c2-dd196ac18e11.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/12986632-2acf-76fd-ed0e-80b35a868f4d.png)

#まとめ

　これらのことから、PowerFxはExcelの関数みたいに使用可能である。だから、シンプルに自動化ツールの作成も可能になったと言える。

 　ただし、その代わりデータテーブルおよびリストの操作が出来なくなったのは厳しいように感じる。今後併用可能になれば問題ないわけだが。
【Next.js】プロジェクトを作成しようとした際に発生したエラーの解消法

# 背景
新しいPCに買い替えたのでNext.jsの勉強をしようと思い、
プロジェクトを作成しようとしたが、エラー発生。

# 環境
- Node.js：20.10.0

# エラー内容
`npx create-next-app@latest`でプロジェクトを作成しようとした際に、
次のエラーが発生。
```
npm ERR! path ～パス～
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat ～パス～
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
```

# 原因
npxパッケージがインストールされていなかった。


# 解消法
以下のコマンドで、npxパッケージをインストールを実行。
```
npm i -g npx
```

次のコマンドでNext.jsのプロジェクトを作成できました。
```
npx create-next-app@latest
```
2024年1月第2週振り返り


2024年1月第2週の勉強計画の振り返り

### 計画：【AWS勉強計画2Week】

目標：PAS合格、SAP勉強開始

1. AWS Partner: SAP on AWS (Technical) (Japanese/日本語)
1. AWS Partner: SAP on AWS (Technical) (Japanese/日本語)
1. AWS Partner: SAP on AWS (Technical) (Japanese/日本語)完了
Udemy教材の非チート問題集完了
1. PAS：集めた資料閲覧＋問題を解く
SAP：日本語のSAP本3週目をやりつつ、公式問題2種類を解く
1. PAS：集めた資料閲覧＋問題を解く
SAP：日本語のSAP本3週目をやりつつ、公式問題2種類を解く
1. PAS：集めた資料閲覧＋問題を解く
SAP：日本語のSAP本3週目をやりつつ、公式問題2種類を解く
1. PAS：集めた資料閲覧＋問題を解く
SAP：日本語のSAP本3週目をやりつつ、公式問題2種類を解く

### 成果：【AWS勉強計画2Week】

PASについて
AWS Partner: SAP on AWS (Technical) (Japanese/日本語)を完了しました。Udemy教材（問題集は公式サンプルと同じでした）よりも公式教材の方が役に立ちそうだったのでUdemyは切りました。
試験ガイドを改めて見てみるとわからない言葉はほぼなくなっていたので、サンプル問題と同レベルの出題なら対応できるようになったと思います。

SAPについて
PASの為に、KMS、サイト間VPN、マイグレーションあたりを復習しました。しかし、目標のSAP本の3週目完了、公式問題2種類完了は達成できませんでした。

集めたPASの資料閲覧について
個人ブログはほぼ読み終えました。残りは公式ブログを読み進めます。


### フィードバック：【AWS勉強計画2Week】

勉強時間が減りました。娘が7か月になり育児の大変さが増してきたためです。日中は45分程度しか勉強時間を確保できない日が多々あります。そのせいか、深夜に無理して勉強と振り返りを行った日が多かったです。勉強時間が2時間はあるということを暗黙の前提として勉強計画を立てているので、まずは勉強時間を確保しつつ、勉強時間が取れない日には何をすれば1番自分の為になるかを考える必要があります。

勉強時間の減少に伴い、毎日やる予定であったしずかなインターネットへの振り返り投稿も行えていない状況です。振り返り投稿の内容も、今のやり方はつらいところがあるので見直します。

以下、検討事項

- 勉強時間を確保するには
早寝早起き、タイムボックスを守る。
そのために23時を強制就寝時間として、翌日6時に起きる生活にします。
　　
- 早寝早起き、タイムボックスを守るには
ベッド時間が楽しくなる工夫？
勉強の質を評価して、量に関する不安をなくす？
まだちょっとわからいですね。
　　
- それでも勉強時間が少ない時どうするか
私は流し見勉強ができないタイプなので、英語教材のUdemyなどはダメでしょう。代わりにSkillBuilderを1トピック見るか、公式ブログを読んでアーキテクチャを脳内で復唱することをしたいと思います。公式ブログを素早く読み解く訓練にもなればいいと思います。
　　
- しずかなインターネットへの振り返り記事投稿について
TOEICに関しては、単語の暗記結果を書くのはやめます。これは記事投稿前にきちんと振り返っているのでやらなくていいと思いました。
文法問題の解き方などを整理するためにまとめることの方がやったほうがいいことです。
AWSに関しては、学んだトピックを全部振り返ろうとすると無理が出ますし、どんどん内容が薄っぺらくなってしまった気がします。薄っぺらい時はたいてい、読んだ内容をオウム返ししているだけです。あまり意味がない振り返りになっているのは問題ですが、そもそも勉強自体が効果的だったのかも3週目以降から計測していきたいと思います。
　　
- 勉強の質について定量的なKPIの導入検討
例えばQiitaに4つ記事を書くなど。記事を書けるくらいの知識を入れれば、勉強になっているはずです。

### 計画：【TOEIC勉強計画2Week】

1. 基本単語 100/200 金のフレーズ 20/900+リスニング（勉強できず復習のみ）
1. 基本単語 125/200 金のフレーズ 30/900+リスニング
1. 基本単語 150/200 金のフレーズ 40/900+リスニング
1. 基本単語 175/200 金のフレーズ 50/900+リスニング IELTS
1. 基本単語 200/200 金のフレーズ 60/900+リスニング IELTS
1. 金のフレーズ 80/900+リスニング IELTS
1. 金のフレーズ 100/900+リスニング IELTS

毎回暗記するまで語彙をやっているので、2か月あれば900語彙増えるはずです。それが1番の対策だと考えているので頑張ります。

### 成果：【TOEIC勉強計画2Week】

大爆死しました。

金のフレーズは50/900まで行きました。

基本単語、金のフレーズの暗記については、1Weekまでの復習を行いました。

IELTSに関しては開いてもいないです。

### フィードバック：【TOEIC勉強計画2Week】

勉強時間が取れないよりも、単語学習に関するモチベーションが死んでしまっています。
こういった時、経験上悪手なのが「モチベーションが上がる方法探し」です。
逆に良いのは「無理やり勉強する」ことです。

どうあがいても私には単語学習が楽しいはずがありません。
仮に楽しくできたとしてもそれがCSやプログラミング、マネージャー論に勝るとは到底思えません。

金のフレーズは修行だと思い、強制的に勉強することにします。

### 3Weekの予定：AWS

目標：PAS合格、SAP勉強終了、SAP合格、DOP勉強

1. PAS：追い込み
1. PAS：追い込み
1. PAS：追い込み　SAP：公式サンプル問題実施
1. PAS：追い込み　SAP：公式サンプル問題実施
1. PAS：受験
1. SAP：書籍末尾問題開始　DOP：Udemyのハンズオン、公式ハンズオン実施
1. SAP：書籍末尾問題　DOP：Udemyのハンズオン、公式ハンズオン実施

うーん。計画を結果に合わせてきてしまっています。

TOEICは引き続き単語をやります。

### まとめのお気持ち

育児の大変さが増す中、自分のやりたいことを家族を犠牲にすることなく行いたいという思いがあります。そしてなかなかにそれは苦しいです。

ですがどちらも犠牲にしたくない。どちらも大事なのです。
なので両立を頑張りたいと思います。
時間配分を考えて統計検定 2 級に臨む

統計検定 2 級に合格しました。試験本番では緊張していつもの力が出せなくなりがちですので、いつも通りの力を出せるように試験の解き方を工夫しました。

この記事では試験本番で問題を戦略的に解いていき試験後に後悔がないようにする方法を伝えていきます。

![IMG_0088.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/444a8d6e-78e0-5a73-2971-4fee99a17056.jpeg)


## 対象ではない読者

数学が得意な方や数学の問題に解き慣れている方はこの記事の対象読者じゃないです。こういった方は試験本番でもいつも通りの力が出せると思いますので自身を持って受験してください。統計検定 2 級の過去問で 6 割以上取れていない方も対象ではないです。まずは基礎を固めて過去問を繰り返し解き実力をつけましょう。

## 対象の読者

試験慣れしていない方や初見の問題に対して苦手意識のある方が対象です。限られた短い時間のなかで問題を解かなければならないという思いによって過度に緊張してしまい、いつもなら解ける問題でも頭が回らず問題が解けなくなってしまいます。そうならないために、試験前にあらかじめ作戦を立てておき試験本番でそれを実行することによっていつも通りの力を出せるようにします。

## 統計検定 2 級の特徴

統計検定 2 級は、試験時間 90 分で 35 問程度出題されます。1 問あたり約 2.5 分かけられますが、大体において全問解くには試験時間ギリギリか足りなくなります。また、成績優秀者を表彰する制度のため難しめの問題が 2 割ほど出題されます。難しい問題に時間を使いすぎたためにほかの問題に時間が使えず、いつもなら解ける問題も試験本番では時間がなくて解けなかったというのは避けなければなりません。統計検定 2 級に合格するならば時間配分が鍵になります。

## 時間配分の戦略

試験問題には見た瞬間に答えを出せる問題や 3 分以上時間を使って答えを出す問題など様々あります。すべての問題に対して同じように時間を使っていては時間が足りなくなるので、問題の難易度に応じて適切に時間を使うことになります。筆者が過去問を繰り返し解くなかで見つけた問題タイプと解答目安時間を次に紹介します。

### 問題のタイプと解答時間

:::note warn
問題の分析はあくまで筆者の実力と主観に基づくものですので、その内容については十分にご注意ください。
:::

問題数 35 問のうち各問題は大きく 3 つに分類できます。1 つ目は、2 割ほど出題されるいわゆる難問タイプ。問題文を読んでから解答するまで 3 分以上かかるタイプです。2 つ目は、知識 & 例題タイプです。これは問題を見た瞬間に答えを選べる or 参考書の例題のような問題で式を作ってから解答まで 1 分、長くても 2 分かからないタイプの問題です。絶対に落としてはいけないタイプの問題と言えます。そして 3 つ目が、ちょっと考える系の問題です。参考書の例題に少し手を加えたような問題で多くの人にとっては初めてみるタイプの問題になります。解答時間は 1 問あたりの平均時間である 2.5 分前後です。

| type | 内容 |解答目安時間  |割合|
|:-:|:-:|:-:|:-:|
|1  |難問系   |3 分以上   |2 割|
|2  |知識 & 例題系   |1 分以内   |3 ~ 4 割|
|3  |ちょっと考える系   |2.5 分くらい   |4 ~ 5 割|

試験合格のためには上記 3 つのタイプのうち 2 つ目と 3 つ目のタイプの問題を数多く解くことになります。3 つ目のタイプの問題に十分時間を使えるように、2 つ目のタイプの問題は早く確実に処理していきましょう。そのためにはどのようにすればいいか、ここでは筆者が実際に試験本番で行ったことを紹介します。

### 試験の解き方

まず試験が開始したら、問題文に目を通して 1 分以内、長くても 2 分で解答できるか考えます。解答できるならばそのまま問題を解いて解答を選択します。時間がかかりそうな問題や解法がわからない問題には「あとで見直す」[^1]にチェックを入れて次の問題に進みます。これを最後の問題まで繰り返します（1 周目）。1 周目は 30 ~ 40 分で終わらせます。そして、「あとで見直す」のチェックが入った問題数が 15 ~ 20 くらいだと順調に問題が解けているでしょう。ただこの段階ではまだ合格点に達していませんので、残った時間は合格点をとるためにタイプ 3 の問題を解くことに使っていきます。

[^1]: CBT 試験では「あとで見直す」機能があり、チェックを付けると問題の最後の画面でどの問題にチェックを付けたか確認することができます。[画面イメージ。](https://www.toukei-kentei.jp/wp-content/uploads/screenImage.jpg)

2 周目は、「あとで見直す」にチェックが入った問題の中から解法が思い浮かんだ問題のみを解いていきます。1 周目はスピード優先のため解法が思い浮かんでも時間がかかりそうな問題はスキップしていき、2 周目でそれらの問題を処理していく流れです。解法は思い浮かんでいないけれど時間をかければ思い浮かびそうな問題はここではまだ解きません。それらの問題は 3 周目で解いていきます。2 周目の解答にかける時間は 1 問あたり 5 分程度です。2 周目で解答できた問題には「あとで見直す」からチェックを外しておきましょう。解答が不安な場合はまだチェックを入れたままにしておきます。

3 周目は最終段階になります。見直しのチェックが入った問題の中から、時間をかければ解けそうな問題、あるいは正解しておきたい問題から解いていきます。1 問あたり好きなだけ時間を使い解答します。ですので、自分が少しでも解けそうだと思った問題から手を付けていきましょう。解き方が全く分からない問題でも一応解答の選択肢はマークしておくことも忘れないでください。

だいたいここらへんで試験時間が終了します。後悔がないように分からない問題には時間をかけず解けそうな問題に時間を使っていきましょう。

## おわりに

試験本番でいつも通りの力を出すにはどうすればいいか、その 1 つは客観的に自分の情報を知ることだと思います。つまり、今自分はどれくらいの問題を解けていて、どれくらいの問題が分かっていないのかあるいは解けていないのかをデータを使って知ることです。そのために CBT 試験で使える「あとで見直す」を活用します。最初 1 周目を解いたときには意外と難しいなと感じて焦っていても、1 周目終了時点で問題を 4 割ほど解けていてそうでもないなと知ることができ、冷静さを取り戻せいつも通りの力を出しやすくします。

合格ラインにギリギリで届かず落ちてしまった、これが一番悔やまれる展開です。そうならないために、分からない問題に時間を使うのではなく、解ける問題・解けそうな問題に十分に時間を使うことが重要です。そのための方法をここでは紹介してきました。誰かのお役に立てれば幸いです。
JavaScript API連携　自分メモ


# 概要
XMLHttpRequest(XHR)を利用してWebAPIを処理する実装を行っていた。
記述量が多くなりがちな印象。
> XMLHttpRequest（XHR）とは、Webブラウザなどに実装されているJavaScriptのAPIおよびオブジェクトの一つで、スクリプトからHTTPを利用してWebサーバにアクセスする機能を提供するもの。
> 
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

そこからFetchを利用してWebAPIを処理する実装へ変わっていった。
Promiseを使用できるので成功・失敗の処理を記述しやすい印象。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

さらに使いやすいaxiosへ

https://github.com/axios/axios


# XHR API連携

```script.js
const req = new XMLHttpRequest();
// リクエスト生成
req.open('GET', 'https://api.tvmaze.com/schedule?country=JP&date=1980-02-01');
// リクエスト送信
req.send();
// 成功時のイベントハンドラ設定
req.onload = function() {
    console.log('成功');
    // レスポンス結果をJSON形式に変換
    const data = JSON.parse(this.responseText);
    console.log(data);
}

// 失敗時のイベントハンドラ設定
req.onerror = function(){
    console.log('エラー');
}
```

# fetch API連携
```script.js
// リクエスト生成・送信
fetch('https://api.tvmaze.com/schedule?country=JP&date=1980-02-01')
    // Promiseが返ってくるので.then()で成功時の処理
    .then((res) => {
        console.log('成功');
        // レスポンス結果をJSON形式に変換
        return res.json();
    })
    .then((data) => {
        console.log(data);
    })
    // 失敗時の処理
    .catch((err) => {
        console.log('エラー', err);
    });
```
# axios API連携
```index.html
<body>
    <!-- CDNを利用 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</body>
```
```script.js
const getTV = async () => {
    // URLパラメータ設定
    const parm = {
        params: {
            country: 'JP',
            date: '1980-02-01',
        }
    }
    // リクエスト生成・送信
    const res = await axios.get('https://api.tvmaze.com/schedule', parm);
    // axiosにはJSON形式のデータを内部的に保持しているためそのまま利用可
    console.log(res.data);
}

getTV();
```
Linuxの外部USBやファイルマネージャ 備忘録

ローカルのモデルファイルを外部USBに移すときの備忘録

## terminal編
外部USBのパスへ移動する
その前にパス名を知る
```terminal
df
> /dev/sdc1      3844550452 326235732 3518298336   9% /media/ssd240/IODATA4TB
```

外部USBへcdで移動しコピー先のフォルダを作成する
```terminal
sudo chmod -R 777 /media/ssd240/IODATA4TB
cd /media/ssd240/IODATA4TB
mkdir hoge
```

別ターミナルでコピー元のフォルダ`/home/ssd240/.cache/lm-studio`へ移動しmodelsフォルダがあることを確認しておく
```terminal
cd /home/ssd240/.cache/app-name
ls
> models
```
そんでコピーする
```terminal
cp -r /home/ssd240/.cache/lm-studio/models /media/ssd240/IODATA4TB/app-name
```
コピーの進行状況はわからないので、ただ待つだけ

## ファイルマネージャ編
Windowsっぽくファイルマネージャで簡単に操作したい
でも普通にファイルマネージャを起動しても`.cache`フォルダにアクセスできない
と思いきやChatGPTに聞くとできた
```terminal
nautilus /home/ssd240/.cache/lm-studio
```
nautilusはファイルマネージャを起動するコマンド

以上
【ChatGPT無】DALL-Eのアートへのアプローチについて聞きました。


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

　今回は、DALL-E3に指示するためのことをChatGPT無料版に尋ねました。

:::note info
本記事は、ChatGPT（無料版）で
行なっております。GPT4での確認
はできておりません。あしからず。
:::
　まずは、ニュース。

[Discordが全従業員の17％となる170人を解雇](https://x.com/ai_syacho/status/1745943654341247306?t=Qv7kWzb-X42sjwnbvtY_mg&s=03)

　Discord（ディスコード）は、
　　アメリカで開発された
　　　コミュニケーションサービス
　　　　です。

　テキストチャット、
　　ボイスチャット（音声通話）、
　　　ビデオ通話、
　　　　画面共有などを
　　　　　することができます。

　Discordは、
　　2015年に誕生したアプリで、
　　　全世界の
　　　　月間アクティブユーザー数
　　　　　1億5000万人以上
　　　　　　だとか（2021年時点）

　もともとは、
　　ゲーム中のやり取りを
　　　する人たちのあいだで
　　　　使われていたそうです。

　それがコロナ禍となり、
　　テレワークでの仕事をするように
　　　なりましたよね。

　その過程で
　　使われるようになった
　　　ツールになります。

　私は、
　　あるのは知っていましたけど、
　　　関係ない、と思っていました。

　でも
　　ChatGPTのことを
　　　知る必要があり、
　　　　スマホで使うことに
　　　　　しました。
　　　　　　2023/8末からです。

　そんなDiscordが
　　170人を解雇、ということで
　　　ちょい心配です。

　1000人で
　　支えていたものを
　　　人員減らして大丈夫？と。

　実際、
　　ゆうべ、
　　　画像のアップが
　　　　うまくいかない現象が
　　　　　発生しました。

　今朝には、
　　回復していましたけどね(=^･^=)

　ちょい前に、
　　更新されて、
　　　あたふたした記憶が
　　　　蘇りました。
***
　今回も
　　画像をたくさん
　　　使いたかったのですが、
　　　　アップロードで
　　　　　エラーになったので
　　　　　　この記事になりました(泣)
***
　本来の記事に
　　入りますね(=^･^=)

　最初は、
　　DALL-E3がわかる
　　　ファッションについて
　　　　聞いていたのですけれど、
　　　　　最後にDALL-Eのことを
　　　　　　言われたので、
　　　　　　　そこを聞きました。

　では、
　　やり取りをどうぞ。
***
***User***
ファッションについて教えてください。
特に服装です。
DALL-Eに描いて欲しいので、それも加味してください。
箇条書き（説明不要）でお願いします。
各項目の下に、細かくあるようならば、それもお願いします。

***ChatGPT***
1. **カジュアルな日常スタイル**
   - ジーンズとTシャツ
   - スニーカーまたはローファー

2. **ビジネスカジュアル**
   - スラックスとドレッシーシャツ
   - ローファーまたはドレスシューズ

3. **フォーマル（ビジネス）**
   - スーツ（ダークカラーが一般的）
   - ドレッシーシャツとネクタイ
   - ドレスシューズ

4. **カジュアルなスポーツウェア**
   - スウェットパンツまたはジャージ
   - パーカーまたはフーディー
   - スニーカー

5. **季節ごとの変化**
   - 春: 軽いジャケット、デニムジャケット
   - 夏: 半袖シャツ、短パン
   - 秋: ニットセーター、ジャケット
   - 冬: ウールコート、厚手のセーター

6. **アクセサリー**
   - 腕時計
   - サングラス
   - ハット（季節によって変化）

7. **特別なイベント**
   - 結婚式やフォーマルなイベント: タキシードまたはドレススーツ
   - スポーツイベント: チームのジャージや応援グッズ

8. **色の組み合わせ**
   - ベーシックな色合い: 黒、白、灰色、ネイビー
   - アクセントカラー: 季節やトレンドに合わせて変化

9. **DALL-Eのアートへのアプローチ**
   - 色と柄の斬新な組み合わせ
   - 異素材のユニークな統合
   - 個性的でインパクトのあるデザイン

***User***
DALL-Eのアートへのアプローチについて、さらに詳しく箇条書きでお願いします。

***ChatGPT***
1. **色の斬新な組み合わせ**
   - 対照的な色のコントラストを利用
   - アナログカラーや補色を組み合わせて鮮やかな印象を生み出す

2. **柄の独創的な利用**
   - 異なる柄やテクスチャを組み合わせて興味深い視覚効果を生む
   - ジオメトリックなパターンや抽象的なデザインを導入

3. **異素材の統合**
   - レザー、デニム、シルクなどの異なる素材を一つのアートに融合
   - 素材の質感や光沢の違いを生かして立体感を演出

4. **形状や構造の実験**
   - 現実の服装デザインから逸脱した形状や構造を取り入れて非凡な印象を与える
   - 抽象的な衣服のシルエットやアートにモダンな形状を探求

5. **照明と影の効果**
   - 照明や影を巧みに利用してアートに深みや立体感をもたらす
   - アート内での光の反射や陰影によって服の質感を表現

6. **テーマ性の追加**
   - 特定のテーマ性やストーリーを取り入れ、アートに奥深さと独自性を与える
   - 季節、文化、あるいは未来的な要素を取り入れたアートへのアプローチ

これらの要素を組み合わせ、DALL-Eのアートに独自性と魅力を追加します。
***
　以上になります。

　どうでしたか？

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

　今回は、ここまで。

　次回があれば、
　　そのときはまた。
　　　今は、何も用意して
　　　　いませんので(=^･^=)

　というか、
　　画像がアップできなくて
　　　作成した記事なので
　　　　次があるとも思えませんね。
　　　　　(=^･^=)
Mind Webアプリケーション(CGI)の開発を容易にするライブラリの続き

# はじめに
実行環境はこちらを参照して下さい。

https://qiita.com/Mind-Club_2017/items/0fdad646aff08a87618d

ライブラリはこちらを参照して下さい。

https://qiita.com/Mind-Club_2017/items/25fb93b8504a67125dff

# サンプルプログラム
```Mind:cgi-output.src
※タイトル	Webアプリケーション出力サンプル
※リンク		cgilib
※作成者		@Mind-CLUB_2017(Qiita)

"htmlform.src"を、コンパイルする。

メインは
	メインの前処理し
		私のプログラム名・短縮を、中で一行表示
		
		※棒グラフ作成
		「運動会　得点」を、小さく一行表示し
		「赤組　６６点」、６６点で、赤色の棒グラフを書く
		「青組　８８点」、８８点で、青色の棒グラフを書く
		「黄組　３５点」、３５点で、黄色の棒グラフを書く
		「白組　７２点」、７２点で、白色の棒グラフを書く
		罫線を引く
		
		※表作成
		「氏名」、「性別」、「年齢」、「職業」、４項目で、表の見出しを作成する
		「キムラ 太郎」、「男性」、「42才」、「会社員」、４項目、「水色」、指定色で表のデータを作成する
		「ヤマダ 花子」、「女性」、「28才」、「主婦」、４項目、「黄色」、指定色で表のデータを作成する
		表の作成を終了する
		罫線を引く
		
		※リンク
		「https://qiita.com/」で、リンク開始し
		「Qiitaトップページにジャンプします」を、表示し
		リンク終了する
		罫線を引く
		
		※印刷ボタン
		印刷ボタン表示する
	メインの後処理する。
```

# 実行結果
![shot_240114_112840.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174456/9ce2b3ee-db51-14dc-6712-dbb969757ad4.jpeg)
印刷ボタンで印刷機能はブラウザ任せに。

# おわりに
HTMLタグを書くことなく、棒グラフや表の作成が行えますが、本ライブラリは10年以上前からWebアプリケーション作成時に書き足して今の形になっているので、現在では非推奨のタグも使われています。
よいグラフ001

データの大きさを図形（たとえば円）のサイズで指定するとき，
- データの大きさを直径の大きさで表す
- データの大きさを面積で表す

後者に従うべし。以下の図は面積がデータの大きさを表している。たいへんよくできました。
多分同じ人が作った問題だろう。

### 地理A
![地理A5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/28dff0fa-ecad-5dbd-60e4-db8a610186af.png)

### 地理A
![地理A2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/ba5bfb6e-a4e2-c095-683c-e9ba98e63f28.png)

### 地理A
![地理A4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/3cd59f76-9cc8-6b6d-73d4-f8ecb379e3d2.png)


以下の図は，単なる散布図ではなくデータ点を時間順に直線で結んで経時変化を表している点が優れている。

### 地理B
![地理B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/1fff3e8b-535c-4804-cfe3-546f17dcdb09.png)

### 政治・経済
![政治・経済.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/dcdb27b5-32a8-e96f-9cb5-f393a5babcba.png)
PostgreSQLのvarcharの最大文字数について

ゲシュタルト崩壊したのでまとめる。

## 結論

テーブルスキーマ作成時に最大バイト数 n (n <= 65535)を指定する。

> varchar(n)

n バイト まで入る。つまり、
- 最大64KBを占有することになる
- 1バイト文字なら、最大で65535文字収納可能。

## Ref.

https://www.postgresql.jp/docs/9.0/datatype-character.html
Macのifconfig/ipconfigコマンドでプライベートIPアドレスのみ表示する


MacでプライベートIPアドレスを確認したい場合、以下のコマンドを実行することで確認可能です。

```bash
$ ifconfig en0
en0: flags=xxx
	options=xxx
	ether xxx
	inet6 xxx
	inet xxx.xxx.xxx.xxx netmask xxx broadcast xxx // inetの部分
	nd6 options=xxx
	media: xxx
	status: xxx
```

en0は使用しているネットワークインターフェース名でen0はWi-Fiが使用しています。

```bash
$ networksetup -listallhardwareports
Hardware Port: Wi-Fi
Device: en0
Ethernet Address: xxxxx
```

ここでinetのIPアドレスの部分のみ表示したい場合、以下のコマンドを実行します。

#### ifconfigの場合

```bash
$ ifconfig en0 | grep 'inet ' | awk '{print $2}'
xxx.xxx.xxx.xxx
```

#### ipconfigの場合

```bash
$ ipconfig getifaddr en0
xxx.xxx.xxx.xxx
```

「Mac IPアドレス 確認コマンド」でGoogle検索すると、「Windowsの場合はipconfig、Macの場合はifconfigを使う」みたいな感じでヒットする記事が多かったが、ipconfigでもいけるみたいです。

#### 参考

https://qiita.com/suin/items/e65e5477a954d7b81e1b

https://discussions.apple.com/thread/7145789?sortBy=best

https://zenn.dev/ianchen0419/articles/25b066414188a6
rails バリデーション機能について

## 結論

validation:検証

オブジェクト（Hoge.newなどで生成されたものなど）がデータベースに保存される(newだけでは保存されない、save,
criate,updateメソッドで初めてデータベースに保存される)前に、本当にデータベースに保存していいのか検証してくれる機能

## とてもシンプル

```app/models/hoge.rb
class Hoge < ApplicationRecord
  validate :カラム名,presence: true
end
```

presence: 出席する　＝　空文字を防ぐ

## もしユーザーが空文字を入力していたら？

```
nil => false 
```
と判断される。

## バリデーションヘルパー
目次.2 で詳細が記載されています。
https://railsguides.jp/active_record_validations.html

以上です。
名前の由来　機能　（初心者向け）

2022/07/13 編集中

私はプログラミング初学者です。
学習する度に、新しい知識の情報量に圧倒されます。
とくに学習を始めた最初の頃は意味が全く分からない単語も多く、学習に対して強い抵抗感を感じました。。
なので、初学者向けに少しでも抵抗感を軽減することができればと思い、機能と名前の由来について記事にすることにしました。

# Ruby
元々、６月に生まれたpealというプログラミング言語が存在していた。pealの発音は６月の誕生石である真珠（Pearl）と同じである。
Rubyは７月に生まれた。「Perlに続く」という意味で、7月の誕生石のルビーから名付けられた。

# gem
RubyGemsが公開しているRubyのパッケージのこと

# Rails
Rubyなどの言語を使って簡単にアプリなどを制作できるような枠組みである。お膳立てという意味合いで「レール」と名付けられた。
RailsでWebページを装飾するには？

# rbenv

# パッケージ
関連するさまざまな要素を1つにまとめたものや、市販・出来合いの製品などの意味で使われる。 特定の業務用に作成されたプログラム群のことでもある。 プログラミングの分野では、使用する言語で利用できる「オブジェクト」や「関数」の宣言などを、関連するものごとにまとめたものを「パッケージ」と呼ぶ。

# pipeline
プロセッサが命令を実行する工程を複数の段階に分割し、各段階をオーバーラップさせて処理できるようにする仕組みのこと

# Asset Pipeline
アセットとは、英語で「資産」や「資源」「財産」IT関連の分野では「資産」と呼び得るデータを指して用いられることのある言い方である。

JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワーク

# Sprockets
Rails 3.1 から導入された gem で、アセットファイル（JS, CSS, 画像など）を効率的に管理するための Asset Pipeline という仕組みの基盤です。
軸の回転をローラーチェーンに伝達したり、ローラーチェーンの回転を軸に伝達するための歯車のこと

主な機能は以下のような物があります。

アセットファイルのパス管理
アセットファイルの結合・圧縮
アセットファイルの依存関係の解決
アセットファイルのコンパイル
最終的に出力するファイルに hash を付けてキャッシュを無効化

# HTML

# CSS
Cascading Style Sheets、カスケーディング・スタイル・シートェブページのスタイルを指定するための言語
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

# JavaScript

# Node.js

# nodenv

# anyenv

# Yarn
JavaScriptで開発されたプログラム部品（モジュール）を管理するためのパッケージ管理システムの一つ。

# Webpack
Ruby on Rails上でJavaScript開発をするために必要な一連のまとまりを、標準で実装することができるgemパッケージ
CSSやJavaScript、画像などのプログラムを作成する際の部品であるモジュールを、１つのファイルとしてまとめるためのモジュールバンドラー

# Homebrew

# bootstrap

# font-awesome

# SQ Lite3 
ライブラリ型

# MariaDB


# jQuery
jQueryはJavaScriptのためのライブラリです。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになった。
# YAML
# RDBMS

# MySQL
# PostgreSQL
サーバー型のデータベースでオープンソースタイプのORDBMS（オブジェクトリレーショナルデータベース管理システム）

# MVC
Webデザインにおける画像の基礎知識

 -  Webデザインにおける画像知識について自己学習のためまとめてみました。

## 画像知識が必要な理由について
 - 画像の形式ごとに特徴があり、それぞれのメリットを最大限活かすため
 - 素人には仕事が来ない

## 種類の全体像について
大きく分けて２つ

・ビットマップ形式：小さな要素で構成
細かい色彩変化が得意
拡大するとぼやける

・ベクター：数式設計で構成
拡大にも強い
拡大してもぼやけない
複雑なデザインは要領がでかい

・jpeg
得意：pngに比べて軽い、要領を抑えらえる
最大の特徴は約1670万色をカバーし「画質が良い」「容量が低い」「印刷でも使える」
不得意：透過できない、画質を下げると戻せない
弱点は「非可逆圧縮」のため、「劣化する」こと。一度変換してしまうと、それ以降保存するたびに劣化するため、訂正に弱いのが弱点です。
使用場面：色数の大きな場面、トップ画面、jpg形式は大きく配置かつ多数配置する「写真」での用途に向いています。

・png
得意：透過できる、圧縮しても画質が落ちない
最大の特徴は「画質が良い」「透明が使える」「劣化しない

不得意：jpegに比べて重い
弱点は「容量が大きくなりがち」な点。ただし色数の少ないイラストなどでの仕様の場合、同じ大きさでもjpgより軽くなる場合もあり

使用場面：透過させたい、基本的にpngを使う
大きく画面を使う場合は重すぎるのでjpeg

 - gif
得意：アニメーションが出来る」という唯一無二の強み
不得意：色数少ない」のが最大の弱点

・svg（ベクター）
得意：拡大しても劣化しない、アニメーション設定が可能
不得意：複雑だと要領が重い、
使用場面：アイコンなどの単純な画像として使う

webの世界での解像度の考え方
一方、webの世界では「画像は軽ければ軽いほどよい」という考え方です。

とあるwebサイトを訪問し、あまりに読み込みが遅いからページを離れた、

という経験、ありませんか?また今wifiが世界中飛んでいる優しい世界になりつつありますが、速度はバラバラです。訪れたカフェでフリーwifiある!やった!で繋いでみたは良いものの、遅い…で諦めた経験、ありませんか?

そういうことです。webでは早いは正義、軽いは正義なのです。

ユーザーの体験を損なわないようにするためには画像は軽くあるべき

https://wasabitaro.com/other/web-beginner/image-image
rails app データを表データ（二次元）で表示したい

## 結論

tableタグを使う。

```html.
<table> ここから表データ（二次元）で表示するよ
　　<thead>表データの頭部部についての設定はここからだよ
   <tr>　ここから表データの頭部分の表示についての設定範囲だよ
     <th>　　　　　　　　　　　　</th>
　　　　 </tr>
 </thead>
 <tbody># ここから表の中身部分だよ
   <tr>
     <th>
     <td>     </td># 実際に表示される中身の部分
   </tr>
 </tbody>
</table>
```
＊
table ：　表
thead　= table head　の略
tr = track : 線路、通り道、区切られた道
th = table head :　表データの頭部分
tbody = table bodyの略

## 具体例

一旦ここまで
Bootstrap Grid systemについてプログラミング初心者向け

# 始めに
`Bootstrap`の`Grid system`が理解できていないため学習してみた。

https://getbootstrap.jp/docs/4.5/layout/grid/

|単語|意味|
|:-:|:-:|
|grid|格子|


恐らく、コンテンツを`コンテナ`という容器に入れ、それを行列に区切られた空間に収めるという考え方なのかなと思う。シンプルでわかりやすい配置の仕方である。

# まずはコードを見てみる

```erb:app
<div class="container">   <!--コンテナ（容器）-->
  <div class="row">
    <div class="col-sm">　　　　 <!--列の要素だがsmとは、、、？-->
      One of three columns　　　　<!--左のように３列表示したい時は３つ class="col"を記載することがわかる-->
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
```

`sm`とはなんなのだろうか
調べてみると`Grid options`に説明があった。
>Grid options
Bootstrapではサイズの定義で em か rem 単位を使用していますが, グリッドのブレークポイントとコンテナ幅には px 単位を使用しています。
viewport の幅が px 単位なのと font size のよって変化しないためです。

|  |ExSm<576px|Sm≥576px|Md≥768px|Lg≥992px|Exlg≥1200px|
|:-:|:-:|:-:|:-:|:-:|:-:|
|最大コンテナ幅|None (auto)|540px|720px|960px|1140px|   
|Class prefix|.col-|.col-sm-|.col-md-|.col-lg-|.col-xl-| 

|単語|意味|
|:-:|:-:|
|Extra|特別な|

つまり、恐らく`col-sm`の大きさは`576px`<`col-sm`<`768px`の範囲内であり、




どうやら`コンテナ（容器）の幅の大きさ`を表しているらしい
今のプログラミング未経験者に必要なのは「書ける」より「わかる」なんじゃないか

チャットGpt半端ないって

自分はプログラミングの開発経験がないけど、自分でHTMLファイルを作成したり、簡単なバックエンドの処理を書いて、配列を操作するなどの処理ができるようになってきた。

これはChatgpt様のお力のおかげ。

一旦プログラミング未経験者の自分に必要なのは、「書ける」より「わかる」なんじゃないかと思う。

Webアプリケーションの構成要素を理解して、基本的なプログラミング言語の文法を理解して、その上で、それがデータベースとかインフラとかといかに互換性を持っているか、そういうところをちゃんと言語化なりして、理解する＝わかる、ことが必要なんじゃないかと思う。

実際、Chat gpt様に指示を出してみて、想像と違う出力がされる時は、自分でソースコードを読んで、微調整はどうしても必要になる。

あとChat gpt様に指示を出す時に、「どう指示を出すか」も、Webアプリケーションの構成要素を理解していないと、「どう指示を出すか」がわからない。

とはいえ、まだまだまだ学ばないといけないことが多い。頑張ろう。
機械学習（教師有）の進め方

# 全体の流れ
1.目的の明確化
2.データの収集
3.前処理
4.モデル作成
5.モデル学習
6.モデルの予測精度確認
　※精度が悪かったら前処理からやり直し
7.モデルの保存

# 1.目的の明確化について
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/d1bd2d93-caff-1b60-350e-2953c766663e.png)
上記を定めないと、追加の定義や精度100%まで実施することとなり長時間かかってしまうので注意！

備考
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/ec85ab30-3f5e-941f-331a-7d99ab9d5a56.png)

# 2.データの収集
以下、4点を気を付けて収集を行う
①モデル構築に必要なデータは何か
②現状のデータは何があるのか
③データ内にある特徴量はどんなものなのか
④どのくらいのデータ数があるのか

# 前処理の流れ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/3370a169-8186-8ad1-3114-08ec87893c9a.png)

①データの読込み
・データを読込際は、変数（箱）を用意して、データを入れること
・データを読込後は、データの中身を確認することは非常に重要！！
　理由として、
　　①データがきちんと読み込めていなかった
　　②結合時に自身が意図したデータの形となっていなかった
　　③使用するデータではなかった

②データ探索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/14fe0db3-1acf-3760-5df6-2cb196098a10.png)

③仮説構築
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/a2f7e4d7-74fe-d7f7-2302-72d15b7b3a6f.png)

④文字から数値に変換
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/d4ef12e7-53fd-855c-64e3-53c665d24629.png)

➄訓練・検証・テストデータに分割
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/3e2e4e4d-519b-ac72-df56-d4bd5f9af5ec.png)

⑥欠損値・はずれ値の処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/c53f9e01-b310-3019-fa9a-a8973c7f965b.png)

⑦特徴量生成
・特徴量が多すぎると過学習
（学習データに特化しすぎて、テストデータに対応できなること）になる
　リスクがあるので、より関連性の高い特徴量を選択し、精度をあげる
　現在ある特徴量から予測に役経ちそうな情報をデータから加工し、作り出すこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/e96be125-57c6-0b17-a9da-535957ec4872.png)

# モデル作成～精度評価
①モデルに使用するデータの確認
②モデル作成
・説明変数と目的変数のパターンを認識する箱を作成
③モデルに学習データを与える
・箱に説明変数と目的変数のデータを与えて学習させる
④精度確認

# モデル作成時に気をつけること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/b06c6eaf-badd-bab1-533f-a8323f6a5a3c.png)

# 精度を上げるために実施すること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696954/68ba1024-29cf-493e-5c33-779176e3d581.png)

# モデルの評価一覧
予測モデル（アルゴリズム）には、それぞれ得意不得意があるので、
それぞれの目的にあわせて、評価方法を選定すること
Amazon DynamoDBのポイントインタイムリカバリとは？の備忘録

### ポイントインタイムリカバリ（Point-in-Time Recovery、以下、PITR）toha?
PITRを使用すると、DynamoDBテーブルを過去の状態に復元できます。この機能を活用することで、誤ったデータの削除や更新、テーブルの誤った設定などが原因で発生した問題に対応できます。

### 指定した時点のデータ復元:
テーブルに対して特定の時点までデータを復元できます。これにより、誤って削除されたデータや不正な変更があった場合に、過去の正常な状態に戻すことができます。過去35日間の任意の時点にテーブルを復元することができます。

### 自動バックアップ:
DynamoDBは、テーブルごとに自動的にバックアップを作成します。これにより、データ損失を防ぐために必要な情報を保存し、リカバリが容易に行えるようになります。

### 秒単位の柔軟なリカバリポイント:
PITRでは、バックアップは秒単位で行われ、任意の時点をリカバリポイントとして選択できます。この柔軟性により、細かい粒度でデータを復元できます。

### 長期的なデータ保存:
バックアップは長期間保存されます。これにより、数週間や数か月前の状態に戻すことも可能です。

## ポイントインタイムリカバリのコスト

### データバックアップのコスト:
データバックアップには、保存されるデータの量に応じて料金が発生します。DynamoDBのバックアップは、保存されるデータのサイズに応じて課金されます。バックアップが保存される期間や頻度も影響を与えます。

### リカバリリクエストのコスト:
ポイントインタイムリカバリを使用してデータを復元する際には、リカバリリクエストの料金が発生します。リカバリリクエストの頻度や復元するデータのサイズによってコストが変わります。

### リカバリポイントの保存コスト:
バックアップされたリカバリポイントの保存にもコストが発生します。これは長期間にわたり保存されるため、料金が蓄積されます。
駄目グラフ004

## 共通テスト一日目

円グラフが不適切なグラフであることと知らない人（かくも多き）が試験問題を作る...
それを見て育つ？受験生...

なお，円グラフのかわりとして推奨される帯グラフをちゃんと使っている問題も多く見られた。

### 英語リスニング
![英語リスニング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/5c0c6ca2-5c24-dc9d-22e0-f99fe37fa905.png)
### 世界史B
![世界史B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/48a85d85-e53a-042e-3b3a-2284b1a97f77.png)
### 日本史B
![日本史B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/a2e8fe6d-73ed-db26-d2d0-5582ebf47ae7.png)
### 地理B
![地理B2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/e848efa3-c3e9-2391-3279-51db4cae8c41.png)
### 地理A
この図は，別の観点からは優れている。[よいグラフ001](https://qiita.com/WolfMoon/items/8f298bcab3493f2736f6) 参照。
![地理A4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/63cf7488-1219-409c-8b4c-f1f78c36e8c8.png)
ja-ginza-bert-large (β版)で日本語係り受け解析

日本語係り受け解析モジュール[GiNZA](https://megagonlabs.github.io/ginza/) 5.1.3には、ja-ginza-bert-largeのβ版が付いてきている。β版とはいえ、かなりの解析精度らしいので、Google Colaboratoryで動かしてみることにした。

```
!pip install deplacy https://github.com/megagonlabs/ginza/releases/download/v5.1.3/ja_ginza_bert_large-5.1.3b1-py3-none-any.whl
import spacy
nlp=spacy.load("ja_ginza_bert_large")
doc=nlp("吾輩はここで始めて人間というものを見た")
import deplacy
deplacy.serve(doc,port=None)
from ginza import bunsetu_span,bunsetu_spans
from deplacy.deprelja import deprelja
d=bunsetu_spans(doc)
g="digraph{"+";".join([f'x{b.start}[label="{b.text}"]' for b in d]+[f'x{bunsetu_span(t).start}->x{b.start}[label="{deprelja[t.dep_]}",fontsize=9]' for b in d for t in b.lefts])+"}"
import graphviz
graphviz.Source(g)
```

「吾輩はここで始めて人間というものを見た」を係り受け解析してみたところ、私(安岡孝一)の手元では以下の結果が得られた。

```
1	吾輩	吾輩	PRON	代名詞	Reading=ワガハイ	12	nsubj	_	SpaceAfter=No|Translit=我が輩
2	は	は	ADP	助詞-係助詞	Reading=ハ	1	case	_	SpaceAfter=No
3	ここ	ここ	PRON	代名詞	Reading=ココ	5	obl	_	SpaceAfter=No|Translit=此処
4	で	で	ADP	助詞-格助詞	Reading=デ	3	case	_	SpaceAfter=No
5	始め	始める	VERB	動詞-非自立可能	Inflection=下一段-マ行;連用形-一般|Reading=ハジメ	12	advcl	_	SpaceAfter=No|Translit=始める
6	て	て	SCONJ	助詞-接続助詞	Reading=テ	5	mark	_	SpaceAfter=No
7	人間	人間	NOUN	名詞-普通名詞-一般	Reading=ニンゲン	10	nmod	_	NE=B-Mammal|SpaceAfter=No
8	と	と	ADP	助詞-格助詞	Reading=ト	7	case	_	SpaceAfter=No
9	いう	いう	VERB	動詞-一般	Inflection=五段-ワア行;連体形-一般|Reading=イウ	8	fixed	_	SpaceAfter=No|Translit=言う
10	もの	もの	NOUN	名詞-普通名詞-サ変可能	Reading=モノ	12	obj	_	SpaceAfter=No|Translit=物
11	を	を	ADP	助詞-格助詞	Reading=ヲ	10	case	_	SpaceAfter=No
12	見	見る	VERB	動詞-非自立可能	Inflection=上一段-マ行;連用形-一般|Reading=ミ	0	ROOT	_	SpaceAfter=No|Translit=見る
13	た	た	AUX	助動詞	Inflection=助動詞-タ;終止形-一般|Reading=タ	12	aux	_	SpaceAfter=No
```

![単語間係り受け.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/d42a8e7f-2100-0862-cd7c-2dfe2599fdbf.png)

![二文節間係り受け.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/e93cfe39-6aa5-d2b5-8bbc-71e0b9e9e3a2.png)

[単語間係り受け](http://kanji.zinbun.kyoto-u.ac.jp/~yasuoka/publications/kakariuke.html#3)も[二文節間係り受け](http://kanji.zinbun.kyoto-u.ac.jp/~yasuoka/publications/kakariuke.html#2)も、ちゃんと解析できている。この文は、[CaboChaが解析できないタイプの文](https://github.com/nlp100/nlp100.github.io/issues/19)なので、素直にうれしい。ja-ginza-bert-largeが、早く正式リリースされるといいな。
jQueryとjavascriptの違い

# 結論
Javascriptは言語で、jQueryはライブラリー名
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2563900/75d38427-394e-d05d-d63a-66b1b22880a5.png)

# 詳しい説明
### Javascriptとは
ブラウザで実行される言語で、DOMの操作、イベントハンドリング、アニメーションを可能とします。
Javascriptはweb開発の基礎であり、どのブラウザにも組み込まれている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2563900/12226e9f-e671-dc42-6e3d-a70bbbbf91f8.png)


### jQueryとは
上記、Javascriptを簡単に書くためのライブラリのこと。煩雑なDOM操作やAJAXコール、ブラウザ間の互換性の問題を抽象化して簡潔な構文で書くことができるように設計されている。

例
Javascriptでのコーディング
```Javascript
document.getelementById('element').addEventListener('click', function(){
    //処理
});
```


jQueryでのコーディング
```Javascript
$('#element').on('click', function(){
    // 処理
});
```

# まとめ
言語と、それを簡略化して実装するためのライブラリーです。
Python 入れ子の辞書を平坦化するメソッド


ネストされた辞書を展開して平坦にします。例えばJSONをCSVに保存する際にネスト状態を解除して平坦化したい場合に利用してください。

親キーと子キーを`.`で連結しています。また、子がリストの場合は親キーに1から始まる連番を付けています。

```python
# 辞書の項目を累積的に処理する
def dict_accumulate(dct, f, acc = {}):
  for k, v in dct.items():
    acc = f(acc, k, v)
  return acc

# リストの項目を累積的に処理する
def list_accumulate(lst, f, acc = {}):
  for i, v in enumerate(lst):
    acc = f(acc, i, v)
  return acc

# 辞書に辞書をマージして返す
# ex. {'a': 1}, {'b': 2} -> {'a': 1, 'b': 2}
def update(dct, append):
  dct.update(append)
  return dct

# 入れ子の辞書を展開する
# ex. {'a': {'b': 1}} -> {'a.b': 1}
# ex. {'a': [{'b': 1}, {'b': 2}]} -> {'a1.b': 1, 'a2.b': 2}
def flatten(arg, prefix=''):
  if isinstance(arg, dict):
    return dict_accumulate(arg, lambda acc, k, v: update(acc, flatten(v, prefix + k + '.')))
  elif isinstance(arg, list):
    return list_accumulate(arg, lambda acc, i, v: update(acc, flatten(v, prefix[:-1] + str(i + 1) + '.')))
  else:
    return {prefix[:-1]: arg}
```

```python:使用例
import json

str_json = '{ "users": [ { "_id": 1, "name": "Claudette Bauer", "gender": "female", "age": 36 }, { "_id": 4, "name": "Catalina Robbins", "gender": "female", "age": 29 }, { "_id": 1, "name": "Sloan Macdonald", "gender": "male", "age": 20 } ]}'
obj_json = json.loads(str_json)
flattened = flatten(obj_json)
print(flattened) # {'users1._id': 1, 'users1.name': 'Claudette Bauer', 'users1.gender': 'female', 'users1.age': 36, 'users2._id': 4, 'users2.name': 'Catalina Robbins', 'users2.gender': 'female', 'users2.age': 29, 'users3._id': 1, 'users3.name': 'Sloan Macdonald', 'users3.gender': 'male', 'users3.age': 20}
```
AWSで書かれている仮想インターフェイス（VIF）とは？の備忘録

## AWS公式による意味
仮想インターフェイス (VIF) は AWS のサービスにアクセスするために必要であり、接続はパブリックもしくはプライベートのいずれかです。パブリックな仮想インターフェースでは、Simple Storage Service (Amazon S3) などのパブリックなサービスへのアクセスが可能です。

### 具体例:AWS Direct Connectを使用した際
AWS Direct Connectにおいて、AWS側の接続先を「仮想インターフェイス（VIF）」と呼びます。

### VLANとは？
VLANは、異なるVIFに異なるVLAN IDを割り当てることにより、物理的な接続を論理的なセグメントに区切ります。例えば、Public VIFとPrivate VIFは異なるVLAN IDを持つことで、それぞれが異なるネットワークセグメントに属することができます。これにより、トラフィックを効果的に分離し、異なるネットワークのセキュリティ要件を満たすことができます。
例えば、パブリックサブネットに一つ、プライベートサブネットに一つ。のような感じです。
Google Cloud の ACE

# はじめに

2023年の年末にGoogle Cloud Digital Leaderという認定試験を受けました。

https://qiita.com/talomina/items/afbc99a784b6da62b6ec

しかしあちらは前哨戦で、今回挑戦するAssociate Cloud Engineer(ACE)こそが本命だったのです。

https://cloud.google.com/learn/certification/cloud-engineer

なによりGoogle Cloudの言葉をせっかく覚えたので、忘れないうちにと思って２か月連続の試験となりました。

## この試験のメリット
この試験に合格すると、次のようなメリットが受けられます。

* 合格証とバッジがもらえる
* 同じ資格を持つ人の[コミュニティに](https://cp.certmetrics.com/google/en/login)参加できる
* 次の試験の50%オフチケットがもらえる

# 試験への道のり

基本的には上記のサイトから登録するのですが、いくつか思うところがあったのでメモしておきます。

* Digital Leaderでゲットしたバウチャーが拒否される。これは想定外でした。原因は不明です。
* 試験会場や申し込める日程が少ない。
* 円が安い(125USD -> 18,604JPY )

# 勉強の仕方
Udemy好きとしては今回もやはり。。。

### Google Cloud認定 Associate Cloud Engineer（ACE）合格コース

Digital Leaderの時にもお世話になりましたが今回はハンズオンを実際にやってみて、模擬問題もやって回答をしっかり読みました。

https://www.udemy.com/course/2022gcp-associate-cloud-engineer-google-cloud/

### 【Google認定資格】Google Cloud Associate Cloud Engineer模擬問題集

Google Cloudの認定試験はどんどん変化していくようなので、最近の出題傾向を踏まえた問題集も押さえました。確かにずいぶん傾向は変わっています。

https://www.udemy.com/course/gcp-ace-mogi/

# 試験当日

試験を受けたのは田町にある会場です。[ITパスポート](https://qiita.com/talomina/items/c3c20ef5fa36e9400ea2)もここで受けました。田町駅から歩くと少し距離があって分かりにくい場所です。鉛筆型で有名な日本電機本社の裏側になります。早めに行って近くのドトールで最後の詰め込み学習をしました。
![DSC_0808.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940466/fdf5a68a-0cb4-4e73-5cf7-e77510452107.jpeg)

同じ時間に試験を受ける人が何人かいましたが、皆さんAWS勢だったので少しアウェー感を感じながらの受験でした。試験が終わるとそのままアンケートの画面が出てきましたが、脳みそが疲れていたのでスキップ。そのあとに合否判定が画面に表示されました。

# おわりに
今回はかなり短期間に詰め込みでGoogle Cloudの2つの認定試験に挑戦しました。さらに次のステップに挑戦するかどうかは未定です。

AWSに多少親しんだ身からすると、似ていて分かりやすい部分もあれば、変に違って分かりにくい部分もありました。個人的に混乱した部分だけメモしておきます。

* IAMの仕組みが違う
* プロジェクトという概念や課金アカウント
* VPC、リージョン、ゾーン、サブネットの構造が違う(自由度が高すぎる)
* サービス名に個性がない(BigtableがNoSQLデータベースとか)

いずれも超基本的な概念なので、最後まで少しあやふやなままで試験に挑んだのでした。

# 参考文献

https://qiita.com/kaikusakari/items/b7cddd38031a0f0ca8de

https://qiita.com/Regryp/items/1b8d123d136eadf72103

https://qiita.com/Maruchin/items/889fd1cb596621a81f88
Amplifyで作ったAppSyncへLambdaからmutateするとSubscribeに失敗する

# 事象
掲題のとおり。
さらにWebSocketをデバッグツールで見ると、４エラーがサブスクリプションイベントとして受信されていた。
```json
[
  {
    "message": "Cannot return null for non-nullable type: 'AWSDateTime' within parent 'Hoge' (/onCreateHoge/createdAt)",
    "path": [
      "onCreateHoge",
      "createdAt"
    ]
  },
  {
    "message": "Cannot return null for non-nullable type: 'AWSDateTime' within parent 'Hoge' (/onCreateHoge/updatedAt)",
    "path": [
      "onCreateHoge",
      "updatedAt"
    ]
  },
  {
    "message": "Cannot return null for non-nullable type: 'Int' within parent 'Hoge' (/onCreateHoge/_version)",
    "path": [
      "onCreateHoge",
      "_version"
    ]
  },
  {
    "message": "Cannot return null for non-nullable type: 'AWSTimestamp' within parent 'Hoge' (/onCreateHoge/_lastChangedAt)",
    "path": [
      "onCreateHoge",
      "_lastChangedAt"
    ]
  }
]
```

# 原因
mutate時の返却値に上記のフィールドを含むこと。

## 例
```graphql
mutation Hoge(
   $fuga: String!
) {
    createHoge(
        input: {
            fuga: $fuga
        }) {
        id
        fuga
        createdAt # 追加
        updatedAt # 追加
        _lastChangedAt # 追加
        _version # 追加
    }
}
```
Docker で Next.js 14 のテンプレートを構築してみた

## はじめに
- この記事では、Next.js 14 が動作するテンプレートを Docker で構築する方法について説明します。


## GitHub
- 今回作成したテンプレートは下記のリポジトリにありますので、良ければご参照ください。
  - https://github.com/0machi/nextjs-docker-template


## Dockerfile
- [公式の Dockerfile](https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile) を参考に作成しました。
- 全容

```Dockerfile
# https://hub.docker.com/_/node
FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# https://github.com/nodejs/docker-node/tree/main?tab=readme-ov-file#nodealpine
# One common issue that may arise is a missing shared library required for use of process.dlopen.
# To add the missing shared libraries to your image, adding the libc6-compat package in your Dockerfile is recommended: apk add --no-cache libc6-compat
RUN apk add --no-cache libc6-compat

USER node

# Install dependencies
WORKDIR /app
COPY --chown=node:node ./package.json ./
RUN npm install
```


## Compose ファイル
- 全容

```yaml
services:
  nextjs:
    container_name: nextjs
    build:
      context: .
      dockerfile: dev.Dockerfile
    ports:
      - '3001:3000'
    volumes:
      - type: bind
        source: ./
        target: /app
      - type: bind
        source: ./node_modules
        target: /app/node_modules
    environment:
      - WATCHPACK_POLLING=true
    command: sh -c "npm run dev"
    restart: always
    tty: true
    stdin_open: true
volumes:
  node_modules:
```

- 下記を参考に、bind mount の構文には、long syntax を使用しています。
  - node_modules の bind mount に対しても long syntax を使用しているため、起動時には、node_modules が存在せず、エラーになります。
    - そのため、後述する MakeFile で、docker comose build 実行時に、`$ mkdir -p node_modules` を実行するようにしました。

https://zenn.dev/sarisia/articles/0c1db052d09921#fn-bf4c-1

```yaml
    volumes:
      - type: bind
        source: ./
        target: /app
      - type: bind
        source: ./node_modules
        target: /app/node_modules
```

- 下記を参考に、node_modules については、コンテナ内の node_modules を保持するために、volume を用いて永続化させています。

```yaml
volumes:
  node_modules:
```

https://qiita.com/P-man_Brown/items/c2a69d943853cb381fbe


- ホットリロードの有効化

```yaml
    environment:
      - WATCHPACK_POLLING=true
```


## 起動方法
- 下記の MakeFile より、`$ make init` によって起動することができます。

```makefile
COMPOSE_YML := docker-compose.dev.yml
DC := docker compose -f $(COMPOSE_YML)
SERVICE := nextjs


build:
	mkdir -p node_modules
	$(DC) build

up:
	$(DC) up -d

down:
	$(DC) down --remove-orphans

down-v:
	$(DC) down --remove-orphans --volumes

logs:
	$(DC) logs -f $(SERVICE)

sh:
	$(DC) exec $(SERVICE) sh

npm-install:
	$(DC) run --rm $(SERVICE) npm install

init:
	@make down-v
	@make build
	@make npm-install
	@make up
	@make logs
```

- 下記を参考に、git clone 後、初回起動時の `sh: xxx: not found` エラーを解決するために、下記のように依存パッケージをインストールようにしました。

```makefile
npm-install:
	$(DC) run --rm nextjs npm install
```

https://zenn.dev/ttani/articles/docker-clone-first-operation


## Linter、Formatter の設定
- 下記を参考に設定を適用しました。

https://zenn.dev/siakas/articles/05481bdefacd13


## おわりに
- この記事では、Next.js 14 が動作するテンプレートを Docker で構築する方法について説明しました。
  - これから Next.js を触れる人の参考になればと思います。
【備忘録】PythonでMySQLのデータベースを作成 / 初期化する方法

### 備考
Python:3.9
MySQL:8.0.31
動作環境:MacOS
開発環境:PyCharm

### 1. PyCharmにて新規プロジェクトを作成する

### 2. プロジェクトを以下の構成になるようにファイルを作成する
```フォルダ構成.
.
├── main.py
├── env.py
├── .env
└── requirements.txt
```

### 3. requirements.txtファイルを以下の内容にする
```requirements.txt
mysql
mysql-connector-python
python-dotenv
```

### 4. ターミナルにてコマンドを入力してモジュールをインストールする
```ターミナル.
pip install -r requirements.txt
```

### 5. .envファイルを以下の内容にする
```.env
# DB接続情報
DB_USER = 'root'
DB_PASSWORD = 'MySQLのパスワード'
DB_HOST = 'localhost'
DB_NAME = '任意の名前'
```

### 6. env.pyファイルを以下の内容にする
```env.py
import os
from dotenv import load_dotenv
from os.path import join, dirname

dotenv_path = join(dirname(__file__), '.env')
load_dotenv(dotenv_path)

class Env:
    # DB接続情報
    DB_USER = os.environ.get("DB_USER")
    DB_PASSWORD = os.environ.get("DB_PASSWORD")
    DB_HOST = os.environ.get("DB_HOST")
    DB_NAME = os.environ.get("DB_NAME")
```

### 7. main.pyファイルを以下の内容にする
```main.py
import mysql.connector
from env import Env

if __name__ == "__main__":
    
    print("データベースの作成　/　初期化を開始します")
    
    cnx = None
    try:
        cnx = mysql.connector.connect(
            user=Env.DB_USER,
            password=Env.DB_PASSWORD,
            host=Env.DB_HOST
        )

        cursor = cnx.cursor()

        # データベースの作成
        cursor.execute(f"CREATE DATABASE {Env.DB_NAME}")
        cursor.execute("SHOW DATABASES")
        print(f"データベース:{Env.DB_NAME}を作成", cursor.fetchall())

        cursor.close()

    except Exception as e:
        if e.errno == 1007:
            # 対象のデータベースが既に存在する場合は削除
            cursor.execute(f"DROP DATABASE {Env.DB_NAME}")
            cursor.execute("SHOW DATABASES")
            print(f"データベース:{Env.DB_NAME}を削除", cursor.fetchall())
            # データベースの作成
            cursor.execute(f"CREATE DATABASE {Env.DB_NAME}")
            cursor.execute("SHOW DATABASES")
            print(f"データベース:{Env.DB_NAME}を作成", cursor.fetchall())
        cnx.close()

    finally:
        if cnx is not None and cnx.is_connected():
            print("データベースの作成　/　初期化が終了しました")
            cnx.close()

    print("データベースの作成　/　初期化が完了しました")
```

### 8. ターミナルにてコマンドを入力してデータベースを作成 / 初期化する
```ターミナル.
python main.py
```
H2データベースのコンソール使用方法

Spring boot を用いてWEBアプリを作成しており、テスト用のデータベースとしてH2を使用している際にH2コンソールへアクセスする方法を記述する。


## yamlファイルの設定内容
```application.yaml
spring:
  datasource:
    url: jdbc:h2:mem:test
    driverClassName: org.h2.Driver
    username: sa
    password:
  h2.console.enabled: true
```

## H2コンソール接続用のURL
ブラウザを起動し以下URLで接続。
```接続用URL
http://localhost:8080/h2-console
```

## コンソールアクセス後のログイン方法
コンソール起動後はymlファイルに記載のURL、ユーザーネーム、パスワードでログインできる。
今回のケースであれば以下を入力する。
<table>
  <thead>
    <tr>
      <th>画面項目</th> <th>入力値</th>
    </tr>
  </thead>
  <tr>
    <td>JDBC URL</td> <td>jdbc:h2:mem:test</td>
  </tr>
  <tr>
    <td>User Name</td> <td>sa</td>
  </tr>
  <tr>
    <td>Password</td> <td>(入力不要)</td>
  </tr>
</table>
Amazon SES（Simple Email Service）とは？の備忘録

## SESとは？

#### メール送信サービス: 
Amazon SESは、開発者がアプリケーションやウェブサイトからメールを送信するためのインフラストラクチャを提供します。これにより、アプリケーションからの通知メール、認証メール、ニュースレターなどを効果的かつスケーラブルに送信できます。


#### 高い信頼性とスケーラビリティ:
SESはAWSのインフラストラクチャを利用しており、高い信頼性とスケーラビリティが確保されています。大量のメールを効果的に処理でき、需要に応じて柔軟に拡張できます。

#### 低コスト:
Amazon SESはコスト効率が高いため、大量のメール送信が必要な場合でも費用を抑えることができます。また、AWS内の他のサービスとの統合も容易です。

#### スパムフィルタ対策:
SESは、スパムフィルタの対策として、ドメイン認証やDKIM（DomainKeys Identified Mail）などの技術を活用して、メールの信頼性を向上させます。

#### メール配信のモニタリングと統計:
SESはメールの配信状況や統計情報をモニタリングするための機能を提供しています。これにより、開発者はメールの受信状況やエラーを確認し、必要に応じて対処することができます。

#### SESの厳しいルール
Amazon SESは、適切な送信プラクティスを守らない場合や、不正利用が続いた場合などに、送信者の信頼性を維持するために一定のポリシーを適用しています。特に、メールエラー率が高い場合には、SESが送信者に対して制限を課すことがあります。

#### Bounce Rate（バウンス率）:
バウンスは、送信したメールが受信できなかった場合のことを指します。Amazon SESはバウンス率を監視し、ある一定の範囲を超える場合には制限を課すことがあります。送信者は、バウンスの原因を調査し、問題を解決する必要があります。

#### Complaint Rate（クレーム率）:
メールの受信者がAmazon SESに対してクレームを提起すると、これがクレームとしてカウントされます。クレーム率が高い場合、SESは送信者に対して警告を発行し、対策を求めることがあります。

#### SPF/DKIM/DMARCの設定:
Amazon SESは、ドメイン認証の仕組みであるSPF（Sender Policy Framework）、DKIM（DomainKeys Identified Mail）、DMARC（Domain-based Message Authentication, Reporting, and Conformance）の設定を推奨しています。これにより、メールの信頼性が向上し、スパムのフィルタリングが改善されます。

#### 不正利用の防止:
不正なアクティビティが検出された場合、Amazon SESは速やかに対処することがあります。例えば、不正なスパムメールの送信が検出されると、SESは送信者に対して制限をかける可能性があります。

これらのポリシーは、Amazon SESが送信者の信頼性を確保し、スパムや不正利用を抑制するためのものです。送信者はSESの利用ポリシーを遵守し、適切な対策を講じることが重要です。ポリシーに違反する行動が継続される場合、SESは送信者のアクセスを制限するか、一時的または永続的なサービス利用停止を行うことがあります。
Pythonで「集合の演算を行う(和集合、積集合、差集合、対称差集合)」の動作を確認してみた

# 概要

Pythonで「集合の演算を行う(和集合、積集合、差集合、対称差集合)」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/python/set/index6.html

# 実装

以下のファイルを作成しました。
```sample.py
set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
print(set1 | set2)
print(set1.union(set2))

set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
set3 = {"A", "C", "E", "G"}
print(set1 | set2 | set3)

set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
set1.update(set2)
print(set1)

set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
print(set1 & set2)
set1.intersection(set2)

set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
set1.intersection_update(set2)
print(set1)

set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
print(set1 - set2)
print(set1.difference(set2))

set1 = {"A", "B", "C", "D"}
set2 = {"C", "D", "E", "F"}
set1 -= set2
print(set1)
```

以下のコマンドを実行しました。
```
$ python3 sample.py 
{'A', 'F', 'D', 'E', 'C', 'B'}
{'A', 'F', 'D', 'E', 'C', 'B'}
{'A', 'F', 'D', 'E', 'G', 'C', 'B'}
{'A', 'F', 'D', 'E', 'C', 'B'}
{'C', 'D'}
{'C', 'D'}
{'B', 'A'}
{'B', 'A'}
{'B', 'A'}
```

# まとめ

何かの役に立てばと。