OmniAICreator/Qiita-1.07M huggingface dataset:
Rのjmastatsパッケージを使って気象庁のデータを眺める

# はじめに
初めてQiitaで記事を書きます。
普段はメーカーで製品や事業に関するデータアナリストをやっています。

秋ごろ公開されたjmastatsが個人的に超面白い＆Rのadvent calendarに空きがありそうなので備忘録を兼ねて紹介します。

# jmastats is 何？
CRANやGitHubで公開されているのでそちらを参考に。
https://github.com/uribo/jmastats
端的に言えば気象庁で公開している、様々な気象データをスクレイピングしてくれるパッケージです。

元データは気象庁のサイトで公開しており、気温や降水量などのデータであれば10分単位から年に集約したものまで期間を変えて取得できます。
https://www.data.jma.go.jp/stats/etrn/index.php?prec_no=44&block_no=47662&year=2023&month=1&day=1&view=
データの種類で期間を選ぶとテーブル形式で表示され、上記のURLであればblock_noの"47662"が地点の指定になります。

最新のblock_noの一覧表が見つからなかったのですが、最大で1,241拠点あるのではと思われます。
※怒られが発生しない頻度で00000～99999までを全部試した

# 実際に使ってみる
先ほどの気象庁のURLと同じデータを取得する場合は以下のように書きます。
```R:R
df_jma <- jma_collect(item = "daily", block_no = "47662", year = 2023, month = 1)
```
なおblock_noは4桁か5桁で、4桁の場合は先頭に「0」が付く場合があるので文字列で渡した方が安全です。(北海道の沓形は"0002")

このテーブルが、
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/bde8e00a-b994-24e9-0f7e-2f636052ce88.png)
↓
このように取り込まれます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/52e14a8b-94ae-9701-cd39-d786c1925d1e.png)
画像のように気象庁の形式に近づけているため、dataframe内にtibbleで入っています。

この拠点では9列(tibbleで結合された列を展開すると21列)になっていますが、別の拠点だと7列(展開後18列)の2種類があるようです。

# tibbleを展開
このままでも使えますが、展開して普通の(？)1列ごとのdataframeにすることもできます。
```R:R
df_jma <- tidyr::unnest(df_jma)
```
展開できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/cb60a42b-22c4-ede2-ce7b-2d23bb2ca1ac.png)

この結果をあらかじめ用意した列名に変更しても良いです。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/cc4e2753-7a5b-6a7e-5a3f-55813f771824.png)

# 注意点
気象庁では天気や大気現象を示すために記号を使っています。jmastatsを使った時にWindows環境だと(？)これが上手く読み込めずエラー(欠損)になるときがあります。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/d979fb1c-16de-ce94-ce31-e1b25a9f551f.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/9433de9a-e478-bb01-79d7-d38dc30c1e4f.png)
1日よりも長い期間のデータでは詳細情報がないので問題なさそうですが、1時間より短い期間の時はご注意ください。

# 見える化例
「今年の9月は例年と比べても暑さが酷い気がする」と思ったので、それを定量化してみました。

・横軸が約1,200か所の観測地点。真夏日の数が例年と比べてどう変化したか
![9月の真夏日.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/4e3bf812-573e-c0b5-8c1c-74de66256364.png)

・9月の各日の最高気温を平均化して年ごとに比較
![9月の最高気温.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633424/a1591348-2ba5-ec7f-80fd-0e3f1fc7fafc.png)
ベジータに頼んでDoS攻撃だ！楽ちん負荷テスト

最低限しかかかねぇ

# インストール
```bash
wget https://github.com/tsenart/vegeta/releases/download/v12.11.1/vegeta_12.11.1_linux_amd64.tar.gz
tar xf vegeta_12.11.1_linux_amd64.tar.gz
# パス通しはお好みで
```

# コマンド

```bash
# めっちゃたくさんリクエストを1分送る
echo "GET https://{target}/" | ./vegeta attack -rate=10000 -duration=60s 
```

# Tips
名前がいいし、Apache Benchより使いやすい
https://github.com/tsenart/vegeta

- `report -type=json`でレポートがjsonで出せるから定期的な負荷テストをして分析するとかも使えそう
- `vegeta plot`でビジュアライズもできる

# トランクス
https://github.com/tsenart/trunks
rustで書かれたベジータの後継、アルファ版っぽい
GitHub Copilotにたくさん質問してみた

# GitHub Copilotにたくさん質問してみた

この記事はGitHub Copilot ChatにGitHub Copilotに対する質問をしたことをまとめています。

学習ツールとしても利用できるGitHub Copilot Chatがどのような返答をしたかをお楽しみください。

## Q. GitHub Copilotが考えるアシストしやすいプログラミング言語を教えてください。

A. GitHub Copilotは、多くのプログラミング言語に対応していますが、特に以下の言語については高いパフォーマンスを発揮します：

Python
JavaScript
TypeScript
Ruby
Java
C#
Go
PHP
Swift
Kotlin
これらの言語は、GitHub Copilotの訓練データとなる公開されているコードが多いため、より精度の高い予測を行うことができます。しかし、これら以外の言語についても一定のパフォーマンスを発揮します。

## Q. GitHub Copilotの有用な使用例は具体的にどんなことですか？ 例を5つ示してください。

A. GitHub Copilotは多くのシナリオで役立ちます。以下に具体的な使用例を5つ挙げます：

コードスニペットの生成: 特定のタスクを実行するためのコードスニペットを生成するのにGitHub Copilotを使用できます。例えば、特定の形式の日付を解析するPythonコードや、特定のAPIからデータを取得するJavaScriptコードなどを生成できます。

コードの補完: 既存のコード行を補完するのにGitHub Copilotを使用できます。例えば、関数の定義を開始した後、GitHub Copilotはその関数の残りの部分を提案することができます。

バグの修正: GitHub Copilotは、コード中の一般的なバグを修正するのにも役立ちます。例えば、変数のスコープに関する問題や、型の不一致に関する問題などを修正する提案を行うことができます。

新しい技術の学習: 新しいプログラミング言語やフレームワークを学習しているときに、GitHub Copilotは有用なコードスニペットを提供して学習を助けます。

ユニットテストの作成: GitHub Copilotは、既存の関数やメソッドに対するユニットテストを作成するのにも役立ちます。これにより、テスト駆動開発を効率的に行うことができます。

## Q. GitHub Copilotのメリットとデメリットをそれぞれ5つずつ具体的に示してください。

A. GitHub Copilotの利点と欠点は以下の通りです：

メリット：

コード生成: GitHub Copilotは、ユーザーが入力したコメントやコードに基づいて新しいコードを生成します。これにより、開発者はコードの作成を効率化できます。

学習ツール: 新しいプログラミング言語やフレームワークを学んでいるときに、GitHub Copilotは有用なコードスニペットを提供して学習を助けます。

バグの修正: GitHub Copilotは、コード中の一般的なバグを修正するのにも役立ちます。

テストケースの生成: GitHub Copilotは、既存の関数やメソッドに対するユニットテストを作成するのにも役立ちます。

多言語対応: GitHub Copilotは多くのプログラミング言語に対応しています。

デメリット：

精度: GitHub CopilotはAIであり、提供するコードが常に正確であるとは限りません。そのため、提案されたコードは必ず確認とテストが必要です。

セキュリティ: GitHub Copilotは公開されているコードから学習するため、セキュリティに問題のあるコードを提案する可能性があります。

依存性: GitHub Copilotに頼りすぎると、開発者のコーディングスキルが低下する可能性があります。

著作権問題: GitHub Copilotが提案するコードが他のプロジェクトから直接引用されている場合、著作権問題が発生する可能性があります。

個別のビジネスロジック: GitHub Copilotは一般的なコードパターンには強いですが、特定のビジネスロジックや特殊な要件に対応する能力は限定的です。

## Q. GitHub Copilotを利用する際に気をつけることはなんですか？

A. GitHub Copilotを使用する際には以下の点に注意することが重要です：

コードの確認: GitHub CopilotはAIであり、提供するコードが常に正確であるとは限りません。そのため、提案されたコードは必ず確認とテストが必要です。

セキュリティ: GitHub Copilotは公開されているコードから学習するため、セキュリティに問題のあるコードを提案する可能性があります。提案されたコードにセキュリティ上の問題がないか確認することが重要です。

著作権: GitHub Copilotが提案するコードが他のプロジェクトから直接引用されている場合、著作権問題が発生する可能性があります。提案されたコードが著作権を侵害していないか確認することが重要です。

依存性: GitHub Copilotに頼りすぎると、開発者のコーディングスキルが低下する可能性があります。GitHub Copilotはあくまで補助ツールであり、開発者自身の判断とスキルが最も重要です。

プライバシー: GitHub Copilotは公開コードから学習しますが、プライベートリポジトリから学習することはありません。しかし、コードを書く際には、機密情報を含まないように注意することが重要です。

## Q. 今後のエンジニアのコーディングはどのようになりますか？ GitHub Copilotがある場合とない場合を比較して示してください。

A. GitHub Copilotがない場合：

エンジニアは自分で全てのコードを書く必要があります。新しい技術や言語を学ぶ際には、ドキュメンテーションを読んだり、オンラインのチュートリアルを探したり、スタックオーバーフローで質問を検索したりする必要があります。また、バグを見つけるためには自分でデバッグを行い、テストケースを自分で作成する必要があります。

GitHub Copilotがある場合：

GitHub Copilotはコーディングの過程を助け、時間を節約します。新しい技術や言語を学ぶ際には、GitHub Copilotが適切なコードスニペットを提供してくれます。また、バグを見つける際には、GitHub Copilotが一般的なバグを修正する提案を行います。さらに、テストケースの作成もGitHub Copilotが助けてくれます。

しかし、GitHub Copilotはあくまで補助ツールであり、エンジニア自身の判断とスキルが最も重要です。GitHub Copilotの提案は必ず確認し、適切な場合のみ使用する必要があります。また、GitHub Copilotに頼りすぎると、エンジニアのコーディングスキルが低下する可能性もあります。

# 最後に

頼りがいのあるツールである一方であくまで補助ツールであることを忘れずに便利に使っていきましょう。
【④設計(デザイン)編】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

## はじめに
業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに:v:

...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな:sunglasses:」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ということで、本記事は下記連載の第3弾となります。
他記事も併せてご覧ください。
[【①アイデア選定】](https://qiita.com/YutaManaka/items/f5db1d86239203db8ade)
[【②技術選定】](https://qiita.com/YutaManaka/items/b1397c0624010b693a12)
[【③設計(ロジック)】](https://qiita.com/YutaManaka/items/6d412971574c4ca9fb1b)
[【④設計(デザイン)】](https://qiita.com/YutaManaka/items/5bb6b193149e68c9b742)←イマココ
[【⑤環境構築】](https://qiita.com/YutaManaka/items/60bed57196386ccce931)
[【⑥進捗管理】](https://qiita.com/YutaManaka/items/beeba2bcba64d1d1c6bd)

ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/

リポジトリはこちら↓
https://github.com/YutaManaka/FragranceFinder

本記事では、設計(デザイン)の経緯についてまとめました:writing_hand:

## 対象者
この記事は下記のような人を対象にしています。

- 駆け出しエンジニア
- プログラミング初学者
- 設計のやり方がわからない人

## 結論
「diagrams.net(旧draw.io) + Notion」でデザイン設計すれば間違いなし！

## デザイン設計の流れ
:::note
1. 参考サイトを漁り、リストアップ
1. 参考サイトの中で必要なパーツを抽出
1. diagrams.netでひたすら書き、Notionで共有
1. GituHubのREADMEに画像をアップ
:::

## 参考サイトのリストアップ
私はあくまでフロント/バックエンドエンジニアなので、デザインは不得手かつ興味がありません:sweat_smile:
ただし今回はフロントの実装のため、デザイン設計は必要不可欠です。
取り急ぎ、参考になりそうなサイトを一通り漁り、良さそうな点をメモしていきました。

:::note
   - [セレス](https://www.celes-perfume.com/kousui_shindan/)...選択肢が画像で初心者にも優しそうだが、スマホだと上下にスクロールしまくらないといけないのがだるい。自分が選んだ選択肢が表示されるのは見やすいが、タップ数が増えている。最初に男女選ばされる。
   - [Coloria](https://coloria.jp/diagnosis/top)...すっきりシンプル。👍👎が選びやすい。進み具合がシンプルに表示されているのがいい。最初は画像がなく、途中からはあるが選びやすい。解答項目が多すぎる設問がある。ロード中に出てくる香水のイラストがいい。
   - [Liberta Perfume](https://liberta-perfume.com/personalize/page/zyunn0rxxg4pbv9?p=1246&aid_h=k1ps7myyxi0nk6wgnp2ir)...すっきりシンプル。香水に詳しい人にのみ、好きな香料と苦手な香料を聞いている
   - [Primaniacs](http://primaniacs.com/special/note-check/index.html)...レスポンシブじゃない。結果の画面の見せ方が好き。
   - [Demeter](https://demeterjp.com/quiz/)...ほっこりした感じ。yutakaperfumeっぽくない。ジャーナリングのアプリみたい
   - [Jo Malone](https://www.jomalone.jp/scent-finder)...チャットのように出てくるのが面白い。シンプルでいい
   - [ドミノピザ](https://dominoshindan.com/)...右下の質問の数の表示がいい
:::

また、基本のトンマナは回答ページにリンクを貼る下記サイトと揃えることにしました。

https://yutaka-perfume.com/perfume-genealogy/

大体どんなパーツが必要か把握できたので、続けてdiagrams.netで画面設計しました！

## diagrams.net(旧draw.io)のメリット
デザイン業務を経験したことがないポンコツエンジニアのため、個人開発では「パワーポイント」で画面設計していました:sweat_smile:

今回は以前から気になっていたdraw.ioで設計してみようと思い、使ってみました。
結果、めっちゃ簡単+便利でした！
感じたメリットは下記の通り。

- 基本無料
- Notion経由で簡単に共有
- 共同編集/コメントも可能
- パワポライクに使える
- cssを意識した設計が可能

## 実際の画面設計例
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2157342/6d6cce8a-8eb3-719f-849d-091b26e648d5.png" width=240px>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2157342/7681b7bb-3bf2-6b62-c7ab-4609f8d860d8.png" width=240px>

## おわりに
個人開発のデザイン設計についてまとめました。
Thumbs.dbを作成しない方法（NAS編）

自分用メモ。


# やること
NASフォルダで生成される憎きThumbs.dbを自動生成されないようにする。

## 環境
Windows 11 Pro

## エクスプローラ上でサムネを見ない場合
フォルダーオプション > 「常にアイコンを示し、縮小版は表示しない」にチェックを入れればいいと思う。

# 手順1（Windows Home～）
- レジストリエディタを開く（`regedit`。もちろんこの先、自己責任）
- `HKEY_CURRENT_USER\Software\Policies\Microsoft\Windows\Explorer` に、新しい値 `DisableThumbsDBOnNetworkFolders` を作る。種類は「DWORD (32ビット) 値」で
- 値を `1` にする
- パソコン再起動

# 手順2（Windows Pro版のみ）
- ローカルグループポリシーエディターを開く（`gpedit`。もちろんこの先、自己責任）
- `ローカル コンピューター ポリシー/ユーザーの構成/Windows コンポーネント/エクスプローラー` を選択
- 「非表示の thumbs.db ファイルで縮小表示のキャッシュを無効にする」を「有効」にする
    - ~~無効を有効にするっていう言い回しがどこか遊戯王っぽい（偏見）~~
- ユーザに再サインイン


# ししまい
最近IODATAのNASにしたんだけど遅くてめっちゃ後悔してる。やっぱNASはSynologyだな。QNAPとかTerraMasterとかはどうなんだろ。
BUFFALO？　あれはダメです
GCP　Cloud Storageの料金

# Cloud Storage

Cloud Storageにかかる料金についてのメモです。機械学習系のサービスを開発しているのでモデルなどの大きいデータを扱うことが多く、データ移動に無視できないコストが掛かるためまとめました。

## Cloud Storageの料金

Cloud Storageの料金は3つの要素で構成されています。

 - データストレージ
 - ネットワーク使用量
 - データ処理

日常の業務の中で意識しておくべきはデータストレージとネットワーク使用量です。

## データストレージ

データストレージは、Cloud Storageに保存されているデータの量に応じて課金されます。保存する量が多いほど、料金も多くなります。要は維持費です。

こちらはストレージクラスを工夫したりすることで、料金を抑えることができます。キャッシュと同じで頻繁に使うものほど維持費が高価で、あまり使わないものほど維持費が安価になります。

## ネットワーク使用量

一番考慮すべきはネットワーク使用量です。サービスの運営において、Cloud Storageに保存されているデータを取り出すことは日常的に行われます。アップロードにはお金はかかりません。データをCloud Storageに保存するだけなら、データストレージの料金だけで済みます。しかし、データを取り出すたびに課金されるので、データを取り出す際には注意が必要です。

| バケットのロケーション | 北アメリカ | ヨーロッパ | アジア | インドネシア | オセアニア | 中東 | ラテンアメリカ |
|-------------------|------------|-----------|-------|-------------|----------|------|--------------|
| 北アメリカ         | $0.02/GB   | $0.05/GB  | $0.08/GB | $0.10/GB     | $0.10/GB | $0.11/GB | $0.14/GB     |
| ヨーロッパ         | $0.05/GB   | $0.02/GB  | $0.08/GB | $0.10/GB     | $0.10/GB | $0.11/GB | $0.14/GB     |
| アジア             | $0.08/GB   | $0.08/GB  | $0.08/GB | $0.10/GB     | $0.10/GB | $0.11/GB | $0.14/GB     |
| インドネシア       | $0.10/GB   | $0.10/GB  | $0.10/GB | 該当なし      | $0.08/GB | $0.11/GB | $0.14/GB     |
| オセアニア         | $0.10/GB   | $0.10/GB  | $0.10/GB | $0.08/GB     | $0.08/GB | $0.11/GB | $0.14/GB     |
| 中東               | $0.11/GB   | $0.11/GB  | $0.11/GB | $0.11/GB     | $0.11/GB | $0.08/GB | $0.14/GB     |
| ラテンアメリカ     | $0.14/GB   | $0.14/GB  | $0.14/GB | $0.14/GB     | $0.14/GB | $0.14/GB | $0.14/GB     |

同一のロケーション間の料金は高く、別ロケーションになると料金が高くなります。例えば、北アメリカのサービス内でアジアのバケットから2GBのデータをダウンロードした場合は、$0.16の料金がかかります。このように、ネットワーク使用量はサービスの運営において重要な要素になります。

機械学習モデルなどのサイズの大きいデータをやり取りするサービスにおいては、ネットワーク使用量が大きくなることが予想されるので、注意が必要です。

## 参考

https://cloud.google.com/storage/pricing?hl=ja
Figma入門【長方形、綺麗な円、扇形】




## 長方形の追加


### 左上の四角形のボタンを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/37d20c4c-38c3-49c1-3a66-442f2a5c2a16.png)


### ドラッグ&ドロップで長方形作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/2d63261f-ee74-e1d3-b9e6-8e460797a7cf.png)


### 完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/2d640328-bfc8-cc92-de64-3e5b71aafe3a.png)



## Figmaで綺麗な円形を作る

### 左上の四角形からEllipseを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/4e4ec7ef-0474-d0a0-7942-c7ed67536229.png)


### 「「「Shiftを押しながら」」」ドラッグ&ドロップ

Shiftを押さない場合は楕円になってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/664ac256-2b07-d523-e127-4d10f80f2d0d.png)

### 完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/48374738-1d1c-4d29-cc1f-f4a848ba31c1.png)



### 左側の〇ポチをドラッグアンドドロップすると扇形が作れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/09ae909a-73c7-1f4c-4730-b009ee3e8d84.png)


### 真ん中の〇ポチをおしてドラッグすると、内部に空洞がつくれる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/e0cee8c1-bb26-f5ec-33c3-786c901d1c36.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/db057e8a-df6c-7f9e-c487-5a1ceb34244f.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/2406020e-f456-b563-4fb8-447db3a0a768.png)



## 多角形

### Polygonを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/92fb1e0a-e05b-3e79-6495-a8d5876d8182.png)

### ドラッグアンドドロップ（これもShiftを押すと正三角形になるよ！）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/91107c53-0365-a34c-47a5-835e78ce6775.png)



### 右上のCountを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/2533eaad-93a5-29eb-5dd4-676609a1a2d0.png)


### 数字を6に増やすと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/58c5755b-e5bb-e413-b022-57d59748117a.png)


### 六角形になる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/15c691e5-3c70-d85c-63ec-9896e5566ca9.png)
[Swift]非同期処理における@escapingの忘備録

## 初めに
Swift文法を勉強してる中で、クロージャの`@escaping`をクリティカルに理解するのに時間がかかったのでこの記事を書いてます。
この記事が非同期処理のクロージャを理解しようとしている人の助けになれば幸いです。

## この記事の対象読者
Swiftをある程度触ったことがある
クロージャについてざっくり理解してる
非同期処理での`@escaping`の理解がぼんやりしている
## そもそも`@escaping`とは
`@escaping`(**escaping属性**といいます)は本来クロージャの属性であり、**関数や別のクロージャの引数として利用する時のみ利用可能**です。
escaping属性は関数に引数として渡されたクロージャが、スコープの外で保持される可能性があることを示す属性で、**クロージャが関数のスコープ外で保持される可能性がある場合**は必ずつける必要があります。
```swift:@escapingのサンプルコード
var closurequeue = [() -> Void]()

func addQueue(operation: @escaping: () -> Void) {
    closurequeue.append(operation)
}
//配列にクロージャを追加
addQueue{print("banana")}
addQueue{print("apple")}
//配列内の全ての要素を実行
closurequeue.forEach { $0()}
//実行結果
//banana
//apple
```
上記のサンプルコードでは、関数内に引数として渡されたクロージャoperationをあらかじめ宣言された配列の変数`closurequeue`に代入しています。
その後関数を2度呼びだし、配列に要素を追加してから最後に配列内の要素を全て実行しています。
つまり、**関数内で引数として用いたクロージャを関数のスコープ外で用いるときに、`@escaping`をつけないといけないということ**です。
実際上記のプログラムで`@escaping`を外すとエラーが出ます。


ここまでの説明を読んで、私自身とてもなるほど！と思いました。
「そっかー関数の引数として用いられたクロージャを関数の外部で使う時は`@escaping`をつけないといけないんだ！」
こんな感じで理解してその後も学習を続けていきました。

そしてその理解のままAPI周りの学習をしているときにとあるコードと出会いました。
それがAPI通信で用いられる**dataTaask(with:completionHandler:)関数**でした。

## dataTask関数の引数の`@escaping`の理解で詰まった話
**dataTaask(with:completionHandler:)関数**をapple公式のドキュメントで調べてみると以下のように定義されていました。
```swift:dataTask関数の定義
func dataTask(
    with request: URLRequest,
    completionHandler: @escaping @Sendable (Data?, URLResponse?, Error?) -> Void
) -> URLSessionDataTask
```
注目してほしいのが、**引数のクロージャに`@escaping`がついてる、つまりこのクロージャは`@escaping属性`であるということ**です。

ここで私は一旦頭の中に100個ぐらい?が浮かびました。
「なんでこの関数の引数のクロージャは`@escaping属性`なんだろう🤔
`@escaping`をつけるのは**関数の引数として用いられたクロージャを関数の外部で使う時**なんじゃないの？🤔」

## 上記の問題をどうやって理解したか

先ほどから何度も用いている
`@escaping`をつけるのは**関数の引数として用いられたクロージャを関数の外部で使う時**
という理解の解釈を少し広げ、**関数の引数として用いられたクロージャが関数の実行が終わった後も必要な場合**と理解しました。

つまり**そもそも`dataTask関数`が呼ばれるのと同時に引数の`completionHandler`が呼ばれるわけではない**(これはdataTask関数はデータ通信を行うため、**非同期で実行されるから**)ため、`@escaping`が必要ということです。
よりわかりやすく説明すると、dataTask関数が呼ばれたとき(正確にはdataTask関数によって作成されたタスクが実行された時ですが)、**同時に`completionHandlerクロージャ`が呼ばれるわけではない**ということです。
実行の順番としては、以下の通りになります。

dataTask関数が呼ばれる(実行される)
↓
**非同期で**通信処理が行われ、データなどのレスポンスが返ってくる
↓
completionHandlerクロージャの引数(`Data?型, URLResponse?型
, Error?型)`に先ほど返ってきたレスポンスの値が入る
↓
completionHandlerクロージャが呼ばれる

という流れになります。つまりわかりやすくまとめると、次のとおりです。
**dataTask関数は非同期で行われる処理のため、関数が呼ばれると同時にクロージャも呼ばれるわけではなく、クロージャは非同期でクロージャの引数が返ってきて、セットされてから実行される。つまりこのクロージャは関数の実行と非同期で処理されるため、関数の処理が終わっても使用される可能性がある。そのため関数の実行後も保持しておく必要があるから`@escaping`をつける**
## まとめ
少し長くなってしまいましたが、要は
「非同期処理は関数が呼ばれて、クロージャの引数が用意されてから実行されるから**関数の実行と同時じゃない**ため`@escaping`をつけといてあげないといけない！」
と理解しました。
今後も自分がひっかかったところをどんどん記事にしていこうと思います！
最後まで読んでいただきありがとうございました。
## 参考文献
[Swift実践入門](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%AC%AC3%E7%89%88-Swift%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%E7%9B%B4%E6%84%9F%E7%9A%84%E3%81%AA%E6%96%87%E6%B3%95%E3%81%A8%E5%AE%89%E5%85%A8%E6%80%A7%E3%82%92%E5%85%BC%E3%81%AD%E5%82%99%E3%81%88%E3%81%9F%E8%A8%80%E8%AA%9E-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297112132)
同種写像暗号  SIDH鍵共有

この記事は、 大阪工業大学 Advent Calendar 2023(本ページをリンク)の4日目の記事です。

研究対象の暗号プロトコルについて書こうと思ったがそこまでたどり着くのにすごい時間がかかってしまうので似たプロトコルを今回話すことにする.

# 耐量子暗号
現在のインターネットでは,クレジットカードなどのプライバシー情報が多くやり取りされるようになっています.通信を秘匿するために, 様々な暗号が用いられています.それらの暗号は素因数分解の困難性や離散対数問題の困難性などの数学的な困難性に基づいている.
1994年, RSAと楕円曲線DH鍵共有などが量子コンピュータが完成するとこれらの安全性がなくなります.そのため, それらにも対抗できるような暗号が求められています.そのような暗号を耐量子暗号と呼びます.

# 同種写像暗号
Supersingular isogeny Diffie–Hellman key exchangeは, De Feo, Jao, Plutによって2011年に開発されたアルゴリズムである.

## Supersingular Isogeny Diffie Helman
### 公開パラメータ
小さな素数$l_a, l_b$と, 小さな正の整数$f$を選ぶ.そして, $p = f * l_a^{e_a} * l_b^{e_b} - 1$が素数となるように選び公開情報とする.曲線は$E(\mathbb{F}_{p^2}) \simeq (\mathbb{Z}/(1 + p)\mathbb{Z})^2 \supseteq (\mathbb{Z}/l_a^{e_a}\mathbb{Z})^2 \oplus (\mathbb{Z}/l_b^{e_b}\mathbb{Z})^2$となるような超特異楕円曲線を選び, 位数が$l_a^{e_a}$である点$P_a, Q_a \in E[l_a^{e_a}]$, 位数が$l_b^{e_b}$である点$P_b, Q_b \in E[l_b^{e_b}]$を公開情報とする.

### 鍵生成
- 点$R_a := m_aP_a + n_aQ_a \in E[l_a^{e_a}]$が位数$l_a^{e_a}$を持つようにランダムな整数$m_a, n_a$を選び秘密情報とする.

- $\langle R_a \rangle$を核とする同種写像$\phi: E \rightarrow E_a := E/\langle R_a \rangle$と$\phi(P_b), \phi(Q_b)$を計算する.これらを公開鍵とする.
- 同様にBobも計算する

### 鍵交換
- $E_b$と$\phi(P_a), \phi(Q_a)$を用いて,$m_a\phi(P_a) + n_a\phi(Q_a) = \phi(m_aP_a + n_aQ_a) = \phi(R_a)$を計算し,
$\langle \phi(\langle R \rangle)\rangle$を書くとする同種写像$\phi^{'}: E_b \rightarrow E_{ab} := E_b/\langle \phi(\langle R \rangle)\rangle$を計算する.
- 同様にBobの計算する.

この手順を踏むことでAliceとBobが生成した鍵の$j$不変量が互いに一致する.その$j$不変量を共有鍵として用いる.

## 注意事項
[An efficient key recovery attack on SIDH](https://eprint.iacr.org/2022/975)によりSIDHへの古典確率的多項式時間での鍵復元攻撃が見つかった.
SIDHベースのKEMが全て破られた.

# おわりに
[An efficient key recovery attack on SIDH](https://eprint.iacr.org/2022/975)を逆に?使ったFESTAとかいうものがあるらしいので勉強してみたい.
暗号の研究つらいけどたのしいよ:smile:
Figmaの使い方【ページの追加、新規画面の追加】




## ページの追加

### Figmaの作業スペースにある、左上の`Pages`ボタンの横の`+`をクリックしましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/de4c8bf3-6928-ad49-1ddf-6a95f425a096.png)

### 名前をつける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/5f968093-3247-4682-8c6c-ea995c766e2f.png)

### 追加される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/eee42417-4fe0-a05b-0d9f-8ca35c72691d.png)


### 画面遷移を表すためには新しく追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/f5852992-2c58-c0e8-c62e-90e1ee29c82f.png)



## ページフレームの追加

### 左上のFrameボタンを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/06871180-2214-18e2-8af8-d72743fc2f2c.png)


### 右側のタブからデバイスを選択する（今回はIphone 15を選択）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/f7c09343-bb2b-56ea-05b6-362888002dcf.png)

### 空のワイヤーが出来上がる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/4c7d0891-2f3b-94fb-db5f-1dcd90194beb.png)


## 長方形の追加


### 左上の四角形のボタンを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/37d20c4c-38c3-49c1-3a66-442f2a5c2a16.png)


### ドラッグ&ドロップで長方形作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/2d63261f-ee74-e1d3-b9e6-8e460797a7cf.png)


### 完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/2d640328-bfc8-cc92-de64-3e5b71aafe3a.png)
「現代数理統計学の基礎」演習問題解法メモ　第2章問7～11

今回は第2章問7～11をアップします。
問7の積分範囲の変換がよくわかりません。実数範囲の例題はあるのですが、∞無限大範囲はよくわかりません。![第2章問７　P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/34e485e8-efc3-bf7c-6a79-9d095293acd5.jpeg)
![第2章問7　P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/b69bb8c6-d447-dd45-21b9-396dacb86a3b.jpeg)
![第2章問8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/aacee219-b22e-823e-c0dd-bf7281e7311e.jpeg)
![第2章問9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/6221a6dd-8f80-d5b0-f7ad-7a3dcb984ab9.jpeg)
![第2章問10　P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/2818beca-f09b-2024-9a9d-c272ff38f250.jpeg)
![第2章問10　P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/65a96f1e-032f-eda2-26e2-c5deec6581e3.jpeg)
![第2章問11　①～③.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/bfc5eea2-703d-e0b8-b43a-e652e6aaa580.jpeg)
![第2章問11　④.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/84982bab-673a-c35f-f3bc-8903ced8eb15.jpeg)
GoogleDriveに保存された画像を「共有URL設定をせず」にImage関数で表示する

※最初に注意なのですが、セキュリティ上に問題がある可能性がある（筆者自身理解不足なところもあり…）内容なので、ご活用される際は追加で情報収集などを実施いただけますと幸いです。
# 葛藤
最近、スプレッドシートにimage関数を用いてGoogle Drive内の画像を表示する機会がありました。
基本的に、GoogleDrive内の画像を表示するには以下のステップが必要になります。

1. 画像の共有設定を「リンクを知っている全員」に変更
2. 共有URLを取得
3. 共有URLを以下のように変更（-YOURID-画像ごとでユニーク）
. 変換前：https://drive.google.com/file/d/-YOURID-/view?usp=sharing
. 変更後：https://drive.google.com/uc?export=download&id=-YOURID-

4. 変換後のURLをimage関数に入力

![スクリーンショット 2023-12-02 17.18.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2255713/50c61d1a-a20c-3e04-f4e0-65535f5588ac.png)


**めんどい。。。**

外部からのアクセスになるので当たり前といえば当たり前なのですが…
「GASを用いて**大量の**画像のIDを取得→関数に組み込んだ文字列を生成してスプシに一括貼り付け」
を行いたかった自分に取ってはかなりしんどい事実でした。

# 解決策
そこで試行錯誤をしていると、「**lh3.google.com**」という、Googleのサービスで使用されている一部の画像やリソースのホスティングドメイン（chatGPT曰く）に出会いました。

これをどのように用いるかというと…

. 変換前：https://drive.google.com/file/d/-YOURID-/view?usp=sharing
. 変更後：https://lh3.google.com/u/0/d/-YOURID-

上記のように変換してやるだけで、共有設定を変更しなくても無事にスプレッドシートに表示されました。

**これがなんでうまく行っているのかわからないので、恐怖でしかありません。個人用のデータで行っているのでセキュリティうんぬんはどうでもいいのですが…**
誰か教えてください。

ということで、画像ID取得→URL変換→スプシに貼り付けまでのコードもおいておきます。

```javascript:image関数の貼り付け
function getImagesAndDisplay() {
  // 画像が格納されているフォルダを取得
  var imageFolderID = "YOURID";
  var imageFolder = DriveApp.getFolderById(imageFolderID);

  // フォルダ内の画像ファイルのIDを取得
  var imageFileIds = getFolderImageIds(imageFolderID);

  // スプレッドシートに変換した形式で画像のURLを書き込む
  var formulas = imageFileIds.map(function(fileId) {
    return ['=IMAGE("https://lh3.google.com/u/0/d/' + fileId + '")'];
  });

  // スプレッドシートのA2セルから下の行に一括で記載
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 1, 1, formulas.length, 1).setFormulas(formulas);
}

// フォルダ内の画像ファイルのIDを取得する関数
function getFolderImageIds(folderId) {
  var folder = DriveApp.getFolderById(folderId);
  var imageIds = [];

  // フォルダ内のすべてのファイルを取得
  var files = folder.getFiles();

  while (files.hasNext()) {
    var file = files.next();

    // ファイルが画像であるかどうかを判定
    if (isImageFile(file)) {
      imageIds.push(file.getId());
    }
  }

  return imageIds;
}

// ファイルが画像であるかどうかを判定する関数
function isImageFile(file) {
  var mimeType = file.getMimeType();
  return mimeType.startsWith('image/');
}
```

実行するとこんな感じです。
![スクリーンショット 2023-12-02 17.37.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2255713/dcb0f75a-c6f7-017c-f3ec-131f310e0b0c.png)

**メリー・クリスマス！！**
Appleからの「App Analytics Weekly Summary」メールの見方についてChatGPTに聞いてみた


## はじめに

ずっとAppleから送られてくる「App Analytics Weekly Summary」の内容がよく分からなくてモヤモヤしていました。私の検索スキルが低かったのもあると思うのですが、ズバリの回答書いてる記事探せなかったんですよね。公式ドキュメント見てもメールの内容については見つけられず・・・。

そうだ！こんな時こそChatGPT聞いてみよう！

という結果の記事です。多分あってます。自己責任でよろしくお願いします。

## 質問

app analytics weekly summaryのimpressions, app units, proceeds, sessions, crashesの意味をそれぞれ教えて


## ChatGPTの回答


以下に「App Analytics Weekly Summary」で提供される指標の意味を説明します。

### Impressions
**インプレッション数**は、あなたのアプリがApp Storeの検索結果、特集セクション、トップチャートなどで表示された回数を意味します。この指標はアプリの可視性や認知度を示しており、多くのインプレッションは多くのユーザーがアプリを見たことを意味します。

### App Units
**アプリユニット数**は、その週に初めてダウンロードされたアプリの数を表しています。これは新しい顧客によるダウンロードを指すため、既存のユーザーがアプリを再ダウンロードする場合は含まれません。

### Proceeds
**売上額**は、アプリ内購入やサブスクリプション、広告などから得られた総収益を示します。この数値は通常、アップルの手数料を差し引いた後の純利益です。

### Sessions
**セッション数**はアプリを開いた回数を表しており、ユーザーエンゲージメントの強さを測定します。セッションはアプリがバックグラウンドに移行するまでの活動期間を指し、ユーザーがアプリをどれだけ頻繁に使用しているかを示します。

### Crashes
**クラッシュ数**はアプリが不意に閉じたり、正常に機能しなくなったりした回数です。クラッシュはユーザー体験に直接影響を与えるため、この数を減少させることは非常に重要です。

上記の各指標を理解し分析することで、アプリのパフォーマンスを改善するための洞察を得ることができます。また、これらの指標の変化はマーケティング戦略や製品開発の方向性を決定するうえで役立つ重要な情報源となります。

## 補足

ChatGPT Plusの月額料金を払うのをケチってChatGPT APIのクレジットを$5ずつちまちま払って使っています。ChatGPTのクライアントとしてはVSCodeの拡張機能のGenieを愛用しています。コード生成だけでなく普通に質問もできるのでとてもいい感じです。使う場合は履歴保存機能をオンにすると幸福度あがります。

https://marketplace.visualstudio.com/items?itemName=genieai.chatgpt-vscode
PagerDuty 設定ガイド (トリアージ編1) - 一次対応を自動化する

[PagerDuty Advent Calendar](https://qiita.com/advent-calendar/2023/pagerduty) 6日目の記事です。
この「トリアージ編」では、監視ツールからイベントを受信した後、インシデントへの一次対応を自動化する方法を説明します。

![IncidentLifeCycle2_Triage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/f269356b-8d06-ae9f-1c53-28db95438b36.png)

設定の順番としては、「[動員編](https://qiita.com/ymotomu/items/e6d13e5284a62e3a1100)」「[検知編](https://qiita.com/ymotomu/items/f9e8de2dfa94394df54c)」の後に、この「トリアージ編」を進めることをおすすめします。

## 「トリアージ編」を完了すると、できるようになること
1. AIを活用し、複数のアラートを1つのインシデントでまとめて管理できる
1. 一過性のアラートをAIで検知し、不要な通知を削減できる(通知の自動一時停止)
1. イベントに対するルールを作成し、対応を自動化する(自動診断、自動復旧、通知レベルの変更等)

## PagerDutyトリアージ機能の構成
![Triage_LifecycleFlow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/0c02aeca-41ee-1121-867d-89f5e411b0fe.png)
トリアージ機能は大きく3つの機能群に分かれます:
1. **ノイズ削減**: AIを活用して関連するアラートを集約したり、不要な通知を削減します。
1. **ルールによる自動処理**: イベントに対するルールを作成し、イベントの内容に応じて通知レベルを変更したり、次のMachine Responseを実行します。
1. **Machine Response**[^1]: 診断や復旧、復旧後の正常性確認などの処理をジョブとして作成しておき、自動実行します。
[^1]:Machine Responseは「トリアージ」だけでなく、「協力/解決」のステップでも利用できます。「トリアージ」のステップでは、アラートの内容に応じてEvent-Drivenで自動実行させるのに対し、「協力/解決」では、担当者がジョブを選んで実行させます。本記事ではトリアージ編の中で解説します。

## 一次対応の自動化例
アーキテクチャのモダン化が進み、システムは日に日に複雑化しています。
監視センター/NOCなどでオペレーターの方が人手で行う場合、迅速に対応することが難しくなってきます。
![triage_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/c39663aa-2799-0665-e921-616e0ca5bca6.png)

PagerDutyのトリアージ・動員の機能を利用すれば、これまで人手で行っていた多くの作業を自動化できます。これによって開発などのより重要な業務に、リソースを集中させることが可能になります。
![triage_after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/b84e5b11-4fd0-dfd8-096c-2f7695b87ad2.png)

以降の記事では、それぞれの機能の設定方法を説明します。
## PagerDuty設定ガイド 目次
[検知編](https://qiita.com/ymotomu/items/f9e8de2dfa94394df54c) | **[トリアージ編](https://qiita.com/ymotomu/items/1a40022feabae53e85c9)** | [動員編](https://qiita.com/ymotomu/items/e6d13e5284a62e3a1100) | 解決編 | 学習編
 1. [一次対応を自動化する] << イマココ
 1. [Alert Groupingでアラートノイズを削減する](https://qiita.com/ymotomu/items/a6665e9ad75bc2a5c600)
 1. [Auto Pauseで一過性アラートの通知を削減する](https://qiita.com/ymotomu/items/66aab8eb8d04bd59ac67)
 1. [Event Orchestrationでアラートへの対処を自動化する](https://qiita.com/ymotomu/items/0d3ac9a83b4a927aee1c)
 1. [診断や復旧作業を自動化する](https://qiita.com/ymotomu/items/f93fc956e0c4e4642516)

## 参考リソース
* [システム障害を未然に防ぐ「インシデント管理・対応」とは](https://www.pagerduty.co.jp/blog/what-is-incident-response)
* [PagerDuty利用ガイド - Responder編](https://qiita.com/ymotomu/items/42f825accbfca287464a)
* [PagerDuty 導入事例](https://www.pagerduty.co.jp/customers/)
* [PagerDuty - 14日間 無料トライアル](https://www.pagerduty.co.jp/lp/free-trial/)
セキュリティ周りでよく見かける単語についてまとめ（XSS,CSRF,CSP）

# 概要
基本情報技術者のテキストなどでふんわり知ってた単語について改めてまとめました。
誤りなどありましたらご指摘いただけますと幸いです。

# クロスサイトスクリプティング（XSS）とは
## XSSについて  
- 悪意のあるスクリプトをWebページに注入することで、Webページの閲覧者のブラウザ上で悪意のある動作を実行する攻撃のこと。
- XSS攻撃は、脆弱性のあるWebアプリケーションにスクリプトを仕込み、そこにアクセスした被害者から情報を盗むことが目的。

## XSS攻撃の手順（掲示板サービスの例）
1. 攻撃者は、脆弱性のある掲示板サービスに悪意のあるスクリプトを仕込む。
2. スクリプトが実行されるよう、攻撃者は、被害者にスクリプトを実行するよう誘導する。
3. 被害者が誘導に従いスクリプトを実行すると、悪意のあるスクリプトが被害者のブラウザ上で実行される。
4. 悪意のあるスクリプトによって、被害者のブラウザからCookie情報やセッションIDなどの機密情報が盗み出される。
5. 盗み出した機密情報は、攻撃者が外部のサーバーに送信することで、攻撃者が情報を得ることができる。

## XSS攻撃による機密情報の送信方法
- 攻撃者が使用するスクリプトは、実行した被害者のcookie情報などをどこかに送信するもの。

- 攻撃者は、以下のような方法を使用して、機密情報を送信する。
    - 攻撃者が用意したWebサイトにCookie情報を送信する。
    - JavaScriptを使用して、HTTP GETまたはPOSTリクエストを送信する。
- 攻撃者は、これらの方法を使用して、被害者から取得した機密情報を自分のサーバーに送信することができる。
- このような攻撃を防ぐためには、Webアプリケーション開発者が適切なセキュリティ対策を講じる必要がある。

# クロスサイトリクエストフォージェリー（CSRF）とは
攻撃者が認証済みユーザーの代わりに意図しない操作を行わせる攻撃手法

攻撃の流れは以下のようになる。

1. 攻撃者は、ユーザーがアクセスするWebサイトに偽のフォームを用意する
2. ユーザーがログインしている状態で、偽のフォームをクリックすると、そのフォームの内容がWebサイトに送信する
3. Webサイトは、ユーザーがログインしていることを確認し、受信したフォームの内容を処理する。
4. 攻撃者が用意したフォームによって、意図しない操作（例えば、パスワード変更、注文のキャンセル、不正なトランザクションなど）が行われる。

### つまり？
- アカウント乗っ取れるということ
- この攻撃は、被害者が攻撃者が用意した偽のフォームなどに意図せずアクセスした場合に発生することが多い。
    - たまにメールで届く偽ドメインのamazon偽装サイトみたいなやつ
- このような攻撃を防ぐために、サーバー側ではトークンを発行して、正しいフォームからのリクエストであることを確認するCSRF対策が用いられる。


# コンテンツセキュリティポリシー（CSP）とは
Webアプリケーションがユーザーに送信するコンテンツのセキュリティを強化するための仕組み。  
CSPを使うことで、悪意のあるコードを含むWebページや悪意のあるコードが挿入された広告を表示することを防ぐことができる。

具体的にはWebサイトがクライアントに送信するレスポンスヘッダーにCSPルールを含めることで、ブラウザがWebページに含めることができるリソースの種類とオリジンを制御することができる。

例えば以下のようにCSPルールを指定することで、ユーザーのブラウザに対して「このWebページには自身のドメイン以外からのJavaScriptファイルを読み込ませないように」と指示することができる。
```
Content-Security-Policy: script-src 'self'
```

また以下のようにCSPルールを指定することで、ユーザーのブラウザに対して「このWebページにはJavaScriptファイルを含む外部リソースを一切読み込ませないように」指示することができる。
```
Content-Security-Policy: script-src 'none'; object-src 'none'; base-uri 'self'
```
Javaで誕生日から年齢を求める方法

# 背景
誕生日と年齢の入力をしてもらうのが面倒くさいと感じたため。
# 環境
誕生日は`LocalDate`型で年齢は`Integer`型とした場合。
# 方法
``` Student.java
public LocalDate getDob() {
    return dob;
}

public Integer getAge() {
    return Period.between(this.dob,LocalDate.now()).getYears();
}
```
カーネルとは

## カーネルとは
OSを構成するソフトウェアの一種。プログラム/プロセスの起動や終了、メモリの割り振りなどをソフトウェアとハードウェアの間で仲介する。プロセスがカーネルに処理を依頼する際、システムコールが生成される。

こんなディレクトリの中にある
```
/work_dir
|-- hello.py
```
こんなファイルを実行して
```python hello.py
#!/usr/bin/python3
print('Hello, world!')
```
システムコールを追跡してみる
```bash
$ strace -o hello.py.log ./hello.py
$ cat hello.py.log
...
write(1, "Hello, world!\n", 14)         = 14
...
```
色々と出てくる中で`write()`システムコールが発行されていることがわかる
[備忘録] 特徴のある変化を抽出するための機械学習モデルを作る

# 特徴のある変化の抽出
備忘録として残しておきたいのでここに記録しておきます。

相談を受けたとき、その特徴の画像はもらえなかったので
代わりにkaggleから相談時に提示された画像と
似ているものをダウンロード
React Hooksはなぜトップレベルに書かないといけないのか。

## はじめに

Reactを書いてるとみなさんも、一度は下記エラーを見た事があると思います。

![スクリーンショット 2023-12-02 15.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/a87ff4e2-be75-a301-f5bc-3e1907ee4891.png)

:::note alert 
エラーメッセージ内容
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
:::


ReactのHooksのルールに **「フックを呼び出すのはトップレベルのみ」** があります。
今回の例では、if文中の`useEffect`の定義がルールに抵触しているため、エラーが発生しました。

なるほど🤔 ルールに抵触しているからエラーが出るのは理解できた。
ただ、なんでこんなルールが定義されているの？ルールを定義してまでエラー検知しているのには、仕組み的に何か理由があるはず。ただ、なんでかはさっぱりわからん。。。

なので、今回は **「React Hooksはなぜトップレベルに書かないといけないのか。」** の理由を解き明かしていこうと思います!!

## Hooksのルール確認
Hooksのルールは公式に記載がありました。下記に示します。

**[Hooksルール](https://ja.legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level)**
>フックを呼び出すのはトップレベルのみ
フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。代わりに、あなたの React の関数のトップレベルでのみ、あらゆる早期 return 文よりも前の場所で呼び出してください。これを守ることで、コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証されます。これが、複数回 useState や useEffect が呼び出された場合でも React がフックの状態を正しく保持するための仕組みです（興味がある場合はページ下部で詳しく説明しています）。

コンポーネントがレンダーする際の順序を保証するため、トップレベルにおく必要があるようです。

ふーん、わけわからん💦💦💦色々わけわからないけど、大きく3点わからない。

1. トップレベルにおくと、なぜ順序が保証されるのか？
1. そもそも順序とは何か？
1. 順序という位だから、複数要素あると思うが要素とは何か？

わからないことはわからないので、1つづつ理解を進めていこうと思います。

:::note info
React Hooksには他にもあります。
本件には直接紐づかないので、下記に補足します。
:::

<details><summary>React Hooksの他ルール</summary>

>フックを呼び出すのは React の関数内のみ
>フックを通常の JavaScript 関数から呼び出さないでください。代わりに以下のようにします。
>
>✅ React の関数コンポーネント内から呼び出す。
>✅ カスタムフック内（次のページで説明します）から呼び出す。
このルールを守ることで、コンポーネント内のすべての state を使うロジックがソースコードから間違いなく参照可能になります。

</details>

## 公式の解説
公式では、下記の解説がありました。以下、引用です。
ごたごた書くよりも、公式の解説を乗っけておきます。

![スクリーンショット 2023-12-02 16.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/6de1250b-f226-aa9b-3949-d42ef4bca8c4.png)

→あー、なるほど🤔完全に理解した。。。とは全然ならないですね。🥲
順番があるのは理解したけど、なぜ順番通りに理解しないといけないのか。

ChatGPTに質問した所、筋の通った回答が返ってきたので、記載します。

## ChatGPTの回答
現実世界の出来事である **料理** を例に解説しております。
useStateが材料、useEffectが調理、useContextが味付けと置いたとする。

この時、**材料→調理→味付け** の順番を必ず守らなくてはなりません。
材料がないのに調理や味付けはできないし、調理できてないのに味付けはできないです。
ごく当たり前のことです。

この当たり前の考え方をReactの世界に持ってきた所、ReactHooksではトップレベルに書きましょうというルールができたとのことです。

:::note info
現実世界の料理と同じように、ReactHooksも順序を守る必要がある。
そのために、条件分岐やループ、ネストされた関数内で呼び出す事ができない。
:::

![スクリーンショット 2023-12-02 16.51.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bfd03ca5-5cc3-f35c-369f-47b566b6ae83.png)

## まとめ
React Hooksは順序を保証するため、トップレベルで書かないといけない。

## 参考文献

https://ja.legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
JAVA の勉強メモ-double とfloat の違い

floatの場合↓

```java
class Main {
    public static void main(String[] args) {
        // Name
        String name ="HPP";
        // 年齢
        int age = 20;
        // 身長
        float height = 162.8f;
        // 体重
        float weight = 60.0f;

        //  変数bmiにBMIを計算
        float bmi = weight / height / height ;

        // 名前、年齢、身長、体重、BMIに関する情報を出力してください
        System.out.println("名前は" + name + "です");
        System.out.println("年齢は" + age + "歳です");
        System.out.println("身長は" + height + "mです");
        System.out.println("体重は" + weight + "kgです");
        System.out.println("BMIは" + bmi + "です");

    }
}
```

doubleで使う場合↓

```java
class Main {
    public static void main(String[] args) {
        // Name
        String name ="HPP";

        // 年齢
        int age = 20;

        // 身長
        double height = 162.8;

         // 体重
        double weight = 60.0;

        //  変数bmiにBMIを計算
        double bmi = weight / height / height ;

        // 名前、年齢、身長、体重、BMIに関する情報を出力してください
        System.out.println("名前は" + name + "です");
        System.out.println("年齢は" + age + "歳です");
        System.out.println("身長は" + height + "mです");
        System.out.println("体重は" + weight + "kgです");
        System.out.println("BMIは" + bmi + "です");

    }
}
```

結果は同じですが、

```
名前はHPPです
年齢は20歳です
身長は162.8mです
体重は60.0kgです
BMIは0.0022638229026435415です
```

違いところは

floatは32ビットの精度を持ち、約7桁の有効桁数を表現できます。
floatを使うなら、数字の後ろは必ず`f`を付けます。

doubleは64ビットの精度を持ち、約16桁の有効桁数を表現できます。
floatより高い精度を提供できるので、doubleをよく使います。

参考
https://manga.crocro.com/?cat=java&pg=float_double
ASP.NET Core以外で環境別のappsettings.jsonを使いたい

# はじめに
アプリケーション設定ファイルに`appsettings.json`を使う方法があります。
元々ASP.NET Coreプロジェクトで使われている手法です。
ASP.NET Coreプロジェクトを作ると、開発環境用に`appsettings.Development.json`とファイル名にサフィックスが付いたファイルが自動生成されます。
ここは環境変数`ASPNETCORE_ENVIRONMENT`に`Development`や`Production`の値を与えると、サービスクラス側が自動判定して当該のファイルを読んでくれます。
[ASP.NET Core の構成](https://learn.microsoft.com/ja-jp/aspnet/core/fundamentals/configuration/?view=aspnetcore-8.0)

## いきさつ
しかし、この機能はASP.NET Coreの機能です。
コンソールアプリなど他のプロジェクトからは使えません。
という事で自分で実装します。

# 結論
- デバッグ設定に環境変数を追加する
    - ただし環境変数名は`DOTNET_ENVIRONMENT`を採用する（ASP.NET Coreではないので）
-  `ConfigurationBuilder`のチェインを応用する
- 環境変数`DOTNET_ENVIRONMENT`の値をファイル名のサフィックスにする

# どうする
コード側だけでなくプロジェクト設定も必要です。

## 前提条件
- [nugetからMicrosoft.Extensions.Configuration.Jsonをインストール](https://www.nuget.org/packages/Microsoft.Extensions.Configuration.Json/)
- .NET6.0以上（多分.NET Framework 4.6.2以降ならOK）
- appsettings.jsonは自分で作る事（ASP.NET CoreのプロジェクトからパクってきてもOK）

## プロジェクト設定
Visual Studio 2022の内容です。シェルに環境変数を与えてもOKです。
1. [ソリューションエクスプローラー]から対象のプロジェクトを右クリック
1. コンテキストメニュから[プロパティ]
1. 左ペインの[デバッグ]
1. [デバッグ起動プロファイルUIを開く]
1. [環境変数]に下記を追加
    1. 名前に`DOTNET_ENVIRONMENT`
    1. 値に`Development`
1. プロジェクトディレクトリの`appsettings.json`を同じディレクトリにコピペし、`appsettings.Development.json`を作る
1. `appsettings.json`と`appsettings.Development.json`それぞれ、[出力ディレクトリにコピー]を[新しい場合はコピーする]に変更する

## コード側
``` csharp
var env = Environment.GetEnvironmentVariable("DOTNET_ENVIRONMENT") ?? string.Empty;
var configuration = new ConfigurationBuilder()
    .SetBasePath(Directory.GetCurrentDirectory())
    .AddJsonFile("appsettings.json") //appsettings.jsonは必須
    .AddJsonFile($"appsettings.{env}.json", true) //ppsettings.Development.jsonなどはオプション
    .Build();
```
これで`appsettings.json`よりも`appsettings.{env}.json`が優先されます。
もし`appsettings.{env}.json`が無かったり、環境変数がセットされていなければ`appsettings.json`が使われます。

# 余談
Gitなどバージョン管理を行う際にも便利になります。（ただし開発者が一人である場合のみ。）
設定ファイルがアプリケーションに必須の場合は、バージョン管理に登録する事になります。
しかし、設定ファイルに接続文字列やパスワードなどを書く必要があると、設定ファイルの内容がバージョン管理されるため、秘匿するべき内容がバージョン管理システムから見えてしまいます。

## どうする
ファイル別に下記のように設定します。
| ファイル | バージョン管理 | 内容 |
|:-|:-|:-|
| `appsettings.json` | する | サンプル設定だけ |
| `appsettings.Development.json` | しない | ローカルや開発環境の設定 |
| `appsettings.Production.json` | しない | 本番環境の設定 |

## おわりに
ASP.NET Coreがどうしてるかはめんどくさいしソース読みたくないので知らん。
秘匿情報は環境変数に埋め込む方がいいかも。
YouTubeの広告ブロッカーに対する警告の回避策について調べてみた

広告ブロッカー使っているとYouTubeで警告が表示されるようになりましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/2940b2fa-e26e-ccb7-c0c2-a54585c4c07a.png)

最初のうちはバツボタンで閉じることができるポップアップ表示だったのですが、無視し続けていたら閉じることができないポップアップが表示されるようになりました。

まぁ素直に広告を見るか、YouTube Premiumに入れば良いのですが、一応回避策もあるようなので、自分なりに調べてまとめてみました。

## 警告の表示されるHTMLエレメントを削除する

一応技術者なのでディベロッパーツールでHTML見てみますよね?

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/94a89f23-d9fe-094e-0876-b5087497088d.png)

そうすると、 ytd-enforcement-message-view-model というエレメントが含まれる tp-yt-paper-dialog エレメントがポップアップダイアログの要素であることがわかります。

この要素を消せばオーバーレイが消えて、再生ボタン等が押せるようになります。

YouTubeはSPAの作りになっているようなので、一度削除しておけば、他の動画を再生してもポップアップが再度表示されることはなくなります。

リロードに相当する操作をすると再度表示されてしまうので、自動化するのであればUserJSかUserCSS等で定義しておけば良いのではないでしょうか。

ただし、この方法はポップアップが表示されるべきタイミングで動画が一時停止しますので、都度再生ボタンを押す必要があります。

## Vivaldiでブロックレベルをトラッカーのみブロックにする

僕は普段ブラウザとしてVivaldiを使っているのですが、Vivaldiは標準機能で広告ブロッカーやトラッキングブロッカーが付属しています。

サイトごとの設定でブロック強度を変更できるのですが、その設定で「トラッカーをブロック」に設定しておくと、広告は再生されないのに警告ポップアップも表示されないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/d9f76872-f985-5062-cf13-ad32ecfa9639.png)

ディベロッパーツールで見ていると doubleclick.net/pagead/id なるURLへのアクセスがブロックされているので、そこから内部的なエラーが発生して広告が表示されないのかなぁなんて予想しています。

## Fキーを押す

これが一番かんたん。フルスクリーンモードにすればポップアップよりも動画のほうが前面に表示されます。

(個人的にはフルスクリーンだと画面が大きすぎて使いづらい)

## 広告16倍速再生

これは自分で調べたわけではなく、Xで流れてきて面白いなと思ったものです。

Chrome拡張で[Ad Speedup](https://chromewebstore.google.com/detail/ad-speedup-skip-video-ads/pcjlckhhhmlefmobnnoolakplfppdchi)を導入すると広告動画の再生が始まったことを検出すると16倍速で再生されるようです。

実際に使ってみたのですが、広告動画が怒涛の再生をして数秒で終わります。正直笑ったし、アプローチとして賢いなと思ったので紹介しておきます。

-----

と、まぁいくつか回避策を並べてみましたが、よくわからんとか、面倒くさいな、と思ったら、素直に広告を見るか、Premiumに加入しましょう。

一応僕らもインターネットを使ったビジネスをしているので、便利だなと思うサービスにはやはりお金を出してほしいなぁと思います。

しかし同時に、やましい欲求は技術を進化させるので、ある程度イタチごっこがあってもいいとも思っています。対策するならどういう考え方をしたかわかったほうがいいので、技術的な部分も絡めて回避策を考えてみました。
【超初心者向け】コードレビューを頼む前に確認すること4選

この記事は、[リンクバルアドベントカレンダー2023](https://qiita.com/advent-calendar/2023/linkbal)の2日目の記事です。

## はじめに
私は2023年度に入社した新卒エンジニアです。
新卒エンジニアにとって、コードレビューはプログラミングのスキルを向上させるために非常に重要なプロセスだと考えています。

実際に私もコードレビューでボコボコにされながら、様々なことを吸収できていると実感しています😇

この記事では、そのコードレビューを頼む前に自分で最低限確認するべき基本的なポイントを4つピックアップして、まとめました。

### この記事の対象となる人
正直、書いてあることは基本的すぎるので、実務1ヶ月目で意識してできている人もいると思います。

なので、

🧑‍💻「実務に入って、コードレビューを頼む機会ができたけど、何を注意すれば良いかわからない」

👩‍💻「なんとなくコードレビューを出してるけど、基本的な箇所で指摘されることが多い」

という方が対象になると思います。

まあ、これは少し前の自分なので、過去の自分に一番見せてあげたいですね😂

## 1,タイポがないか確認する
タイポは簡単にいうと、タイピングのミス＝スペルを間違えちゃった😅
ってやつです。

わからない英単語は綴りを調べて、コピペする場合が多いので、そこまで、タイポにならない気がします。

わかったつもりでいて、間違って書いて、そのまま見落としたというパターンが厄介で、タイポが発生しがちだと思います。


並べられるとわかりますが、ぱっと見スルーしちゃいそうですね。
```ruby
pritn "Hello World" 
print "Hello World"
```

レビュー前に、全ての変数や関数を確認するのは、しんどいので間違えやすそうなものは書くときに少し意識してみるといいかもしれません。

あとは、テキストエディタの拡張機能でタイポをチェックしてくれるものなどもあるので、そのような機能を活用するのもありですね！

### 2、インデントが正しいか確認する
インデントはコードを読みやすくするために、行の頭に空白を入れて、字下げするやつです。
以下の例だと、関数の中身が字下げされていて、
「ここからここまでが中身だよ〜」っていうのがわかりやすくなっています。
```ruby
def hello
  puts "Hello World!"
end
```

言語やファイルによっては、インデントが重要な意味を持ち、
「インデントを忘れていたから思うように動かなかった、、、」なんてこともあります。

インデントのルールはプロジェクトなどによって異なるので、最初に確認して、レビュー前に、そのルールに則っているかしっかり確認しましょう！

タイポと同様に、エディタの設定で、保存時に勝手にインデントを直してくれたり、選択範囲をインデントしてくれるショートカットキーがあったりするので、それらを活用していくのがおすすめです。

### 3、使われていないコードがないか確認する
プログラムを書いていると、
- リファクタリングして、使われなくなったコード
- それに伴って、必要なくなったインポートの宣言
- レビューには必要ない自分のために残したコメント

などなど、使われていないコードが発生することがあります。
それをそのままにしてしまうと、後々、コードが無駄に肥大化する原因になったり、レビューの際、「これは何に使うんだ？？？」と読み手を混乱させてしまいます。

なので、使わなくなった時点で削除するのが根本的な解決手段ではありますが、それでも見落とす可能性があるので、レビュー前に改めて、自分で確認しましょう。

これも、エディタが警告してくれたりする様々なツールがあるので、活用してみてください。

## ４、変数、関数名が分かりやすいか確認する
変数名や関数名はその機能や目的を明確に示すべきです。
適切な命名をしていると、コードレビューの時に
「この関数はこんな処理をするんだろうな〜」と読む側の負担も減らせます。

具体的な命名の考え方などはここでは書きませんが、レビュー前に今一度、
🤔「この関数名は関数の内容をわかりやすく表しているかな」と、振り返ってみましょう！

## まとめ
この記事で書いた内容はプログラミングスキルが低くても、できることです。

コードレビューも時間を割いてするものです。ケアレスミスや基本的な問題に時間を取られることなく、より高度なアーキテクチャやロジックの議論に集中できるようにしましょう。

確認しても、抜けが発生してしまうのはしょうがないです。ChatGPTなどを活用して、上記のポイントとコードを投げて、機械的に確認してもらうのも有効です。
Windowsで全角スペース入力を半角スペースにする設定

# はじめに
プログラムを始めたばかりのころ、全角スペースが混じってコンパイルが通らなくて、よく困ってました。ある程度プログラムに慣れてきて、全角スペースが混じることが無くなっても気を付けなければなりません。この対策としてテキストエディターやIDEの設定で全角スペースをハイライトするなどして発見しやすくすることが重要になります。
そして、その他の対策のひとつとして、全角スペース自体の入力を制限してしまおうってのが今回紹介する方法となります。
設定内容としては、かな／ローマ字入力時のスペースが半角へ強制するものとなります。

# 設定
解説はWindows10 22H2 でMicrosoft IMEを対象に行います。Windows11でも設定可能です。
1. タスクバーのIMEのアイコンを右クリックして、「設定」を選択する
    <img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/d4f67c17-1027-6956-676b-700d6aed0d5d.png">

1. 「全般」を選択する
    <img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/f082ff18-e466-f212-4d5c-e41fb17286fb.png">

1. 「スペース」の設定を「常に半角」を設定する
    <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/d2653c4b-3652-6214-beaf-871a1326bb4d.png">



# おわりに
これで、かな／ローマ字入力時のスペースが半角になり、プログラムで全角スペース混じる可能性がぐっと減ります。また**シフトを押しながらスペースを押すと全角スペース**になるので使い分けが可能です。

[参考]

https://faq.nec-lavie.jp/qasearch/1007/app/servlet/relatedqa?QID=021054
Dockerを使っていたらPC容量が枯渇したので対処した（ext4.vhdxの最適化）

# 目的
Dockerを使って開発していると徐々にPCから悲鳴をあげるようになりました。
調べてみると、PC容量がいつのまにか5GBを下回っていてびっくり！
原因としては「ext4.vhdx」というファイルが肥大化していたためであることがわかり、
今回Dockerイメージの整理も兼ねて容量回復させるための手順を記載しました。

# 解決方法
以下記事を参考に対処しました。

https://answers.microsoft.com/en-us/windows/forum/all/optimize-vhd-not-found-in-windows-10-home/a727b760-0f82-4d0f-8480-d49eeaeb11a2


# 手順
1.管理者権限でPowerShellを起動

2.Dockerイメージなどの整理

```powershell
# 使用されていないコンテナ、ネットワーク、イメージ（未使用レイヤのみ）、およびビルドキャッシュを削除
docker system prune

# 参照されていない Docker ボリュームを削除
docker volume prune

# タグがないイメージを含め、未使用のすべてのイメージを削除
docker image prune -a

# ビルドプロセス中に作成された一時的なイメージやキャッシュ２お削除
docker builder prune
```

上記を実行する際、現在使用中のコンテナやイメージなども削除される場合があるので確認の上で実行

3.wslの終了

```powershell
wsl --shutdown
```

4.diskpartを使って最適化
```powershell
diskpart
select vdisk file="C:\Users\xxxx\AppData\Local\Docker\wsl\data\ext4.vhdx"
attach vdisk readonly
compact vdisk
detach vdisk
exit
```

# 結果
自分の環境では4.6GB→40.1GBへ回復しました。整理大事ですね。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414468/ce25c217-b35f-0485-0e04-7b0f42c2ac09.png)
WSLでLinux環境を構築

備忘録

# インストール

CUIベースとGUIベースの両方を記載する。

## CUI

1\. 管理者としてコマンドプロンプトを開く。

2\. デフォルトのWSLバージョンを変更する。標準は「2」なので、＜バージョン＞に2を指定する。

```sh
wsl.exe --set-default-version ＜バージョン＞
```

3\. インストール可能なLinuxディストリビューション名を調べる。

```sh
wsl.exe -l --online
```

4\. Linuxディストリビューションをインストールする。

```sh
wsl.exe --install -d ＜WSLディストリビューション名＞
```

## GUI

1\. Microsoft Storeを開く。

2\. Linuxで検索する。

3\. Linuxディストリビューションをインストールする。

# 初期設定

Linuxのユーザー名とパスワードを設定する。

ユーザー名に利用できる文字は、半角アルファベット（ASCII文字）小文字と数字、「_（アンダーバー）」と「-（ハイフン）」である。
ユーザー名の先頭は、「_（アンダーバー）」にすることは可能だが、数字や「-（ハイフン）」にすることはできない。

Windows OS側と一致させる必要はなく、適当にユーザー名を決めてよい。

# VSCodeの設定

Visual Studio CodeにRemote WSLの拡張機能をインストールして、リモートエクスプローラーで選択する
AWS Glueを使用したS3からRDS（MySQL）へのデータ取り込み4

## ジョブを作成する

ETL jobs→Visual ETLボタンを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/45332947-e1e0-abb0-a6a9-bd9b16cf3237.png)

左上の鉛筆マークを押下してジョブ名を変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/b398de6a-3631-bb03-6ad1-ccd094266fbe.png)

### Sourcesを追加

Sourcesの中から「Amazon S3」を選択すると、画面にS3のノードが追加される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/8403b112-f37a-2801-5d7e-a84d49a08170.png)

Name：任意の名前を入力
S3 URL：CSVデータの取得元になるS3を選択する。
        バケットを指定する場合は、後ろに追記する。
Data format：CSVを選択
IAM role：Glue用に作ったものを選択する

他の設定は通常のCSVであればデフォルトでOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/4ae427b5-0013-7201-3c64-f33e8154c986.png)


### Transformsを追加
S3のノードを選択（クリック）した状態で、Change Schemaを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/060475d8-9796-57df-6d92-a56b66e6da36.png)

すると、S3の下にChange Schemaのノードが追加される。
Name：ご自由に
Change Shema(Apply mapping)にCSVの項目が表示されるので、Target keyに格納したいRDSのカラム名を記入する。
Data typeで型を選択できる。
取込不要な項目はDropのチェックボックスをOnにする。

他は特にそのままで良いが、CSVの行数が多いと左下のプレビューが重くて余計な時間がかかる。
ジョブ作成時、S3には1行程度のCSVを置いておく方が良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/764111b4-9d0e-546e-098c-92389d719107.png)

### Targetsを追加
Change Schemaのノードを選択した状態で、MySQLを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/7be4b791-6dd0-449c-4a82-c9367c60f511.png)

MySQLノードが追加されるので設定する。
Name:ご自由に
Database：データ格納対象のデータベースを選択する
Table：データ格納対象のテーブルを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/52288a47-42b9-893a-ef94-234d296311ca.png)


### ジョブの実行
設定が完了したら右上の「Run」ボタンを押下する。
ここまでConnectionとクローラーが問題なく設定できていれば、そうそう難しい問題は起きない。
カラム名が無いとかデータ型が合わないといった内容なので一つずつ潰していこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390179/653d3199-7005-3a3e-c461-2600bfd47d3d.png)

これでS3のCSVをRDSのMySQLインスタンスへ取り込むことができた。
難しいことをしようとすればもっと複雑な作業が必要になるだろうが、単純に取り込むだけであればノーコードで結構簡単にできた。
Connectionで発生するよくわからないエラーだけは勘弁して欲しいが、もう少し深堀して有効活用したいと思う。
研究のためのPCパーツ選び

先日，研究室に設置するサーバのパーツ選定を任されたのですが，その時に調べて得た知見をメモしておこうと思います．
研究室に配属されて2年目のまだまだの学部生が，知識0からネットの知識だけで集めた情報なので，間違い等があればお手柔らかにお願いします．

ちなみに前提として，今回は，最近になって新入生が配属されてきたので，その勉強も兼ねてパーツをバラバラで購入して研究室内で組み立てることを想定しています．普段であれば，組み立ての手間やエラーの対処などを考慮すると圧倒的にBTOの方に軍配が上がるので，BTOを購入します．（他の研究室さんの話を聞いてもBTOを購入しているとよく聞くので，自作は珍しいのかも？）

# サーバに求める条件の確認
何はともあれ，先ずは条件の確認です．
利用目的や価格を整理してそれに合ったパーツの選定が必須で，これを疎かにすると折角のサーバが役立たずの置物になってしまいます．
参考までに，今回求められた条件の1つは「CPU, GPU性能が良いこと」でした．

## メインとなる要素の決定
条件の確認で挙がったものからメインとなる条件に直結する部品を決定します．
例えば，重たいソフトを快適に動かしたい！ということであればメモリを，重たい処理を素早くしたい！ということであればCPUを，といった感じです．（ざっくりとした説明ですが．）

なぜ，この順番で進めるのかというと，多くの場合において予算の制約は付きもので，最終的にどれを良くしてどれを削るかといったことを考えなければならなくなると思います．そうなったときに，メインとなるパーツが明確であれば，容易に取捨選択できるからです．（予算が潤沢にある場合は，とりあえず良いものを！で大丈夫なのですが......）

# パーツの選定
PCに必須のパーツは以下の表の通りです．

|項目|一言説明|
|--|:-|
|CPU|あらゆる処理をおこなうパーツ．頭脳に例えられる．|
|CPUクーラ|CPUを冷やすためのパーツ．CPU購入時に付属しているものもあるらしいので要チェック．|
|マザーボード|各パーツを制御するパーツ．身体に例えられる．利用可能なパーツはCPUに依存するので要注意．|
|メモリ|データを展開するパーツ．机に例えられる．|
|GPU|CPUより特化した処理を高速に実行する．CPUと同様に頭脳に例えられる．必須のパーツではないが，CPUに内蔵グラフィックがない場合は必須．|
|ストレージ|データを保存しておくパーツ．本棚に例えられる．基本的にSSDにしておくと良い．|
|電源|電源以外のパーツが決まらないと決められないので，一番最後に選定する．|
|ケース|サイズや形状など，色々な要素があるが気に入ったものを選べば大丈夫．|
|ケースファン|ケース内を冷やすためのパーツ．これも気に入ったものを選べば大丈夫．|
|その他|OS, ディスプレイ, キーボード, マウス|

以下ではそれぞれのパーツについて注意するべき点をまとめていきます．とは言っても，既に偉大な先人方がまとめて下さっているブログやサイトがあるので，私が参考にしたそれらをまとめておき，それに何かあれば補足する形になります．

## CPU
CPUについて参考にしたサイトは以下です．

- [CPU性能比較表【2023年最新版】](https://pcfreebook.com/article/450856544.html)
- [初心者必見！自作PCパーツの選び方【CPU・マザーボード編】](https://www.ask-corp.jp/guide/pc-parts-cpu-motherboard.html)

## CPUクーラ
CPUクーラについて参考にしたサイトは以下です．

https://www.ask-corp.jp/guide/pc-parts-cpu-cooler.html

以上の他に，「CPUの品番 CPUクーラの品番」や「CPUの品番 CPUクーラ おすすめ」といった感じで調べると良いかもしれません．しっかり冷えるのか，そもそも対応しているのかなど，レビューが出てくると思います．

## マザーボード
マザーボードについて参考にしたサイトは以下です．

https://www.ictbs.co.jp/blog/motherbord-confirmation/

https://www.ask-corp.jp/guide/pc-parts-cpu-motherboard.html

マザボはチップセットを確認後，対応しているチップセット全ての評判を調査するのがおすすめかも知れません．
グレード毎に特徴があるのですが，高ければ良いってものでも無いらしく，用途に合ったものを選ぶ必要があるようです．

## メモリ
メモリについて参考にしたサイトは以下です．

https://www.ask-corp.jp/guide/pc-parts-memory.html

マザボとの互換性も関わってくるので，そちらも要チェックです！

## GPU
GPUについて参考にしたサイトは以下です．

https://pcfreebook.com/article/459993300.html

https://www.dospara.co.jp/5shopping/shp_vga_def_parts.html

https://www.nvidia.com/ja-jp/studio/compare-gpus/

特に機械学習の領域になるのですが，基本的にNVIDIA製のGPUを利用することをおすすめします．機械学習のためのライブラリはNVIDIA製のものが圧倒的に整っており，エラーへの対処も比較的容易です．

## ストレージ
ストレージについて参考にしたサイトは以下です．

https://www.buffalo.jp/topics/knowledge/detail/m2ssd.html

基本的にメインストレージにはSSDを選択しておくことをおすすめします．データの読み書き速度が段違いです．（条件によるかもしれませんが．）
昔はSSDの値段がHDDに比べて高すぎたために用途によって選択する必要が有ったようですが，今は特別大きな容量を要求しなければそれほど大きな差はありません．（大容量が必要であれば，メインストレージをSSDに，サブストレージにHDDを選択するなどのような使い分けをする方が良いと思います．）

## 電源
電源について参考にしたサイトは以下です．

https://www.dospara.co.jp/5info/cts_str_power_calculation_main.html

## ケース
ケースについて参考にしたサイトは以下です．

https://www.ask-corp.jp/guide/pc-parts-pc-case.html

## ケースファン
ケースファンについて参考にしたサイトは以下です．

https://kakaku.com/pc/case-fan/guide_0581/

https://sakidori.co/article/1029686


# 最後に
ここまでお読み頂きありがとうございました．
ここに挙げている以外にも有益な情報がございましたら，ぜひぜひご教示下さい！