OmniAICreator/Qiita-1.07M huggingface dataset:
～未経験・知識なしからセキュリティエンジニアになる人！～『{Level6}MySQL 学習開始！ユーザ呼び出し/作成/権限付与・データベース作成削除編』

こんにちは！Itoshinです。
今日はMySQLの操作を復習していきます。
~~書き出している言語をコピペしてコードブロックするだけで結構様になるし~~ 　 
ターミナル操作をやってるうちは結構記事作成が楽にやれそうだなと、胸を撫で下ろしてます。


### MySQLへの接続
まずはMySQL（データベースソフトウェア）に接続するための、
mysqlクライアント（人間とデータベースの間を取り成してくれる有難い存在！）を呼び出しましょう。
最初はまっさらな状態ですし、データベース内の最高権力"root"さんを呼び出してみます！
（実際に入力した箇所の色を変えて強調したかったけど、やり方分からず…）
入力したのは1行目
``mysql -u root -p``　
[mysqlのユーザー名"root"さんとパスワードを入力するので呼んでください！]
と、呼びかけている感じですね。
2行目
``*****``(予め決めてあるパスワード) だけでした^^
その他の文章はデータベース(DBMS)からの反応となります。
```
PS C:\Users\Admuser> mysql -u root -p;
Enter password: *****
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.40 MySQL Community Server - GPL

Copyright (c) 2000, 2024, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
```



### データベースを作成
DBMSだけあってもしょうがないので、データベース（データを収集してまとめる器）を作成します。

記入部分（1行目）
``create database hukusyuu;``
[hukusyuuっていう名前のデータベースを作って！]

``show databases;``
[今のデータベース、何があるか見せて！]

:::note 
確認する時のデータベースは複数形なので"s"を忘れないように
:::

```
mysql> create database hukusyuu;
Query OK, 1 row affected (0.01 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| basic              |
| hukusyuu           |
| information_schema |
| mysql              |
| performance_schema |
| practice           |
| practice2          |
| sample             |
| sys                |
+--------------------+
9 rows in set (0.01 sec)
```
DBMSがデータベースの一覧を見せてくれましたね。


### データベースを削除して、確認する
せっかく分かりやすい形でMySQLと意思疎通の取れた証のデータベース"hukusyuu"
ですが、作り方は分かったので消してみましょう。
1行目
``drop database hukusyuu;``
[hukusyuuデータベースを削除して！]

Query OK　と、躊躇なく削除してしまったようです。
~~私とのここでは初めての共同制作物だぞ。もっと大事にしてほｓ・・・~~
本当に削除されたか確認してみます。
``show databases;``(4行目)
[データベース一覧を見せて]

```
mysql> drop database hukusyuu;
Query OK, 0 rows affected (0.07 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| basic              |
| information_schema |
| mysql              |
| performance_schema |
| practice           |
| practice2          |
| sample             |
| sys                |
+--------------------+
8 rows in set (0.00 sec)
```
無事？削除されてます！思い切りが良過ぎるよMySQLさん　ＴＴ

### ユーザの作成
さて、実際の現場では"root"さんに仲介役をやってもらうと、何でも思い通りにできてしまうため悪用される可能性があり、非常に危険です。
なので、新たにユーザーを創造して権限を制限しておきましょう。
``create user itoshin@localhost identified by '12345';``(1行目)
[localhostのitoshinっていうユーザを作って！パスは"12345"ね！]

``grant all on basic.* to itoshin@localhost ;``(4行目)
[localhostのitoshinに全ての権限（権限付与権限以外）を与えて！]

これで、itoshinというユーザでデータベースを使用してもらえば、少なくとも権限をバラマキ付与はされませんね。
そろそろ眠気がMaxなので、一旦ここで〆て次回続きをしましょう＾＾
"root"さんに感謝しつつ、お別れを
``exit``(6行目)
律儀にByeと返してくれましたね。
次回からはitoshinが仲介役として呼び出されるでしょう。
お楽しみに！

```
mysql> create user itoshin@localhost identified by '12345';
Query OK, 0 rows affected (0.01 sec)

mysql> grant all on basic.* to itoshin@localhost ;
Query OK, 0 rows affected (0.01 sec)
mysql> exit;
Bye
```
ターミナルコード

pwd	現在のディレクトリを表示する
ls	ディレクトリ内のファイルやフォルダーを表示
cd	ディレクトリーを移動
mkdir	ファルダーの作成
touch	新しいファイルを作成する
cat:	ファイル内容の表示
nano	ファイル編集
find:	指定ディレクトリーファイル検索
sudo	管理者権限コマンド
cd ../ 	現在のディレクトリーの1つ上のディレクトリに移動する
AndroidStudioKoalaの新機能

# はじめに
最近新しくセットアップしたPCにAndroidStudioを入れた際にバージョンがAndroidStudioKoalaだった為どんな機能が追加されたか気になったので調べてみましたので、以後使えるようにアウトプットと備忘録として特に使いそうなものを記事にしておきます。



# USB ケーブルの速度検出
公式には
>適切な USB ケーブルを使用すると、アプリのインストール時間が短縮され、 Android Studio デバッガなどのツールを使用する際のレイテンシを最小限に抑えられます

とあるので、正規品などのケーブルを使用することで最適化された状態でビルドやデバッグができるようになっているみたいですね。


条件は
* macOS または Linux のPCでの実行
* API レベル 30（Android 11）以降の端末
* SDK Platform Tools の最新バージョン
だそうです

# デバイス UI 設定のショートカット
Daek Themaやフォントサイズなどの変更をAndroidStudio側で簡単に操作できるショートカットが追加されています。

Running Deviceを選択し上部のDevice UI shortcutを選ぶと出てきます

![スクリーンショット 2024-10-20 23.21.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/3bf3b3a1-f6f6-9fc5-8c38-f01469500c8c.png)

![スクリーンショット 2024-10-20 22.59.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/ab903a0b-cdff-bca9-98e6-7fe60a455728.png)


#
LT会登壇未経験者が学んだLTを乗り切るための3つのテクニック

## はじめに
Qiitaで書いた記事がきっかけで、今までに以下のLT会に登壇しました。

:::note warn
いずれも開催済のイベントになります
:::


https://linedevelopercommunity.connpass.com/event/325390/

https://linedevelopercommunity.connpass.com/event/331447/

いずれも、LINE Developers CommunityというLINE関連の開発に関する情報を共有する有志のコミュニティによって主催されているイベントです。

https://linedevelopercommunity.connpass.com/

LTとは無縁だった私が、2回の登壇を通じて得た、LTを乗り切るために役立つ知見を共有します。

## ターゲットを決める
どちらのLTも「自分の知っていることを話す」ことで精一杯になってしまいました。

その結果、何を伝えたかったのか、聞いた人にどうなってほしかったのか、が不明確な発表になってしまったと思っています。

もちろん、自分の知っていることを発信することは大切です。
しかし、それだけでは聞き手に対して何かを与えることは難しいと感じました。

例えば、私が2回目に行ったLTのテーマは「LIFFの最新情報を紹介」というものでした。
LIFFと呼ばれるLINE開発に関連した技術についてのトピックについて話しましたが、ただ紹介しただけになってしまったと反省しています。

最新情報の紹介を通してどうしたかったのか、というところまで落とし込んでいけば、一歩進んだ内容になっていたのでは、と思っています。

「誰に伝えるのか」というターゲティングもそうですが、「聞いたひとにどうなってほしいか」、「何を持ち帰ってほしいのか」というターゲティングも必要だと感じました。

## 言わないことを決める
言うことを決めるより、言わないことを決めるほうが実は難しいと感じました。

資料を作る中で、あの話もしたい、この話もしよう。
これを言うんだったら、こっちも説明しないとわかりにくいかな。
というのがポンポン出てきます。

「ターゲットを決める」にも通じる部分がありますが、自分の伝えたいことを伝えるために、何を言わないかを選択することがとても大事だと感じます。

私が初めてのLTで話したテーマが「シェアターゲットピッカーの基本をマスターする」でした。
シェアターゲットピッカーはLINE関連で使える技術のうちのひとつなのですが、この説明の際、シェアターゲットピッカー周辺の知識を話しすぎたのでは、と今になって思うところがあります。

初心者向けのLTだったので、説明のための説明をしていたのですが、そこをすっとばして、もっと実践的な内容を話すこともできたな、と反省しています。

あれこれ言いたい気持ちになりますが、伝えたいこと一点にしぼって思い切ってほかは捨ててみるのもありです。

## 通しの練習は最低3回やる、できるなら5回
話す内容を決めて、資料を作ったとしても、意外と思ったとおりには話せないものです。
伝えたいことがうまく言葉にできなかったり、話していてピンと来なかったり、思ったより話しすぎてしまったり

頭の中でこうしようと思っていても、実際に形にすると思った以上にうまくいきません。

ガチガチに原稿を作り込んでしまうと、それを暗記しようとしたり、思い出そうとしながら話す感じになってしまって不自然になるので、そこまでする必要はないです。

ただ、話す順番や使うフレーズ、抑揚や言葉の意味など、通しの練習をすることである程度の型が決まってきます。

一回通しでやってみると、これいらないな、とかこの部分もっと膨らませて話そうかな、というのが見えてきます。

細部を直して、部分的な練習をして、再度通しでやると、また細かい点が目につきます。

そして、3度目通しでやってみると、まあいいかなというレベルまで持ってくることができます。

自信のない人はもちろん、勢いでなんとか話せるでしょ、という自信のある人ほど、練習すればするほどびっくりするくらい良くなるので、これは試してみてほしいです。

回数は重ねるほどいいですが、5回より上はそんなに変わらないかな、という感じがします。

## まとめ
初めてのLT、そして2回目のLTを通して、もっとこうするべきだったと感じた3つのことをテクニックとして書いてみました。

どれもできる人からすれば当たり前のことかもしれませんが、最低限この3つを抑えるだけでもかなりブラッシュアップされた良い発表ができると思っています。

また機会があれば、これらを踏まえて、よりよい発表ができるよう準備していきたいと思います。
React + TypeScript + Vite + Vitest + ReactTestingLibrary + jest-dom + jsdom

# React + TypeScript + Viteで作成したフロントエンドのテスト
## Vitest + ReactTestingLibrary + jest-dom + jsdomを使用


※React + TypeScript + Viteでフロントエンドを作成している前提です。

## 必要なライブラリをインストール
- Vitestのインストール([公式](https://vitest.dev/guide/))
```shell
npm install -D vitest
```

- ReactTestingLibraryのインストール([公式](https://testing-library.com/docs/react-testing-library/intro/), [公式](https://testing-library.com/docs/user-event/v13/))
```shell
npm install -D @testing-library/react @testing-library/dom @testing-library/user-event @types/react @types/react-dom
```

- jest-domのインストール([公式](https://github.com/testing-library/jest-dom#installation))。toBeIntheDocument等を使いたいため。
```shell
npm install -D @testing-library/jest-dom
```

- jsdomのインストール([公式](https://github.com/jsdom/jsdom))
```shell
npm install -D jsdom
```

## 設定ファイル
- Vitestの設定([公式](https://vitest.dev/guide/#configuring-vitest))
```typescript:vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})
```

- jest-domの設定([公式](https://github.com/testing-library/jest-dom#withvitest))
```typescript:vitest-setup.ts
import '@testing-library/jest-dom/vitest'
```
```typescript:vite.config.ts
test: {
  // ...
  setupFiles: ['./vitest-setup.ts'], 
}
```
```typescript:tsconfig.app.json
"include": [
  // ...
  "./vitest-setup.ts"
],
```

- jsdomの設定([公式](https://vitest.dev/guide/environment.html))
```typescript:vite.config.ts
test: {
  // ...
  environment: 'jsdom',
}
```
SQL ServerのON [PRIMARY] って何だろう

# はじめに
自分で書いたクエリからテーブルを作成しましたが、SSMSで生成したクエリと差があったので調べてみました。

---

シンプルにテーブルを作ってみます。
```sql
CREATE TABLE m_code (
  id INT,
  name NVARCHAR(20)
)
```
SSMSから作成したテーブルのクエリを生成します。
```sql
CREATE TABLE [dbo].[m_code](
	[id] [int] NULL,
	[name] [nvarchar](20) NULL
) ON [PRIMARY]
```

カラムは指定しないとNULL許容型になります。
これは「そうなんだね」という感じですが…

### ON [PRIMARY] って何だろう:thinking_face:

https://learn.microsoft.com/ja-jp/sql/t-sql/statements/create-table-transact-sql?view=sql-server-ver16#on--partition_scheme--filegroup--default-

>**ON { partition_scheme | filegroup | "default" }**
>テーブルが格納されるパーティション構成またはファイル グループを指定します。 partition_scheme を指定すると、テーブルはパーティション テーブルとなり、各パーティションは partition_scheme で指定した 1 つ以上のファイル グループに格納されます。 filegroup を指定すると、テーブルは指定されたファイル グループに格納されます。 ファイル グループがデータベース内に存在している必要があります。 "default" を指定するか、ON をまったく指定しないと、テーブルは既定のファイル グループに格納されます。 CREATE TABLE で指定したテーブルの格納方法を後から変更することはできません。

つまり
- テーブルを指定したファイルグループに作成できる
- 指定しないと既定のファイルグループに作成される
- [PRIMARY]は既定のファイルグループ

:::note
**ON [PRIMARY] とは**
「テーブルをファイルグループ[PRIMARY]に作成する」という意味
※[PRIMARY]は既定のファイルグループなので、指定しなくても結果は同じ
:::

ところで、
### ファイルグループ って何だろう:thinking_face:

https://learn.microsoft.com/ja-jp/sql/relational-databases/databases/database-files-and-filegroups?view=sql-server-ver16#filegroups

>**ファイル グループ**
プライマリ ファイル グループには、プライマリ データ ファイル、および他のファイル グループに配置されていないセカンダリ ファイルが含まれます。
ユーザー定義のファイル グループを作成して、データベースの管理、データの割り当て、および配置をしやすくするために、データ ファイルをグループ化できます。
たとえば、Data1.ndf、Data2.ndf、Data3.ndf をそれぞれ 3 つのディスク ドライブ上に作成し、ファイル グループ fgroup1 に割り当てることができます。 その後、ファイル グループ fgroup1 にテーブルを作成することができます。 このテーブル内にあるデータに対するクエリが 3 つのディスクにわたって分散されるため、パフォーマンスが向上します。 RAID (Redundant Array of Independent Disks) ストライプ セットにファイルを 1 つ作成しても、同じくらいパフォーマンスを向上させることができます。 ただし、ファイルとファイル グループを使用すれば、新しいファイルを新しいディスクに容易に追加できます。


一言でいうと、ファイルグループとはデータファイルをグループ化したもの

![SQLServerファイルグループ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779420/f746c442-8ced-5492-ccea-f47aec009fcb.jpeg)
Dockerのマウントって何ですか？

## はじめに
　Docker触ったことあるけど体系的に学びたいと思い「仕組みと使い方がわかるDocker&Kubernatesのきほんのきほん」を読み、マウントについて全然理解できてなかったと気づいたため記事に残します。


 ## マウントとは
 　マウント(mount)とは英語で「取り付ける」という意味であり、その意味通りマウントの対象をOSやソフトウェア、コンテナなどに取り付け、支配下に置くことです。

  ### マウントすると何がいい？
  　コンテナなど削除前提のモノの場合、もしデータがコンテナ内にあるとコンテナの削除のタイミングでデータも消えてしまいます。そのためコンテナでは外にデータを保存し、アクセスするのが一般的で、このことをデータの永続化と言います。また、この外の保存場所がマウントした記憶領域になります。

 ### Dockerの3種類のマウント
 マウントの方式にはボリュームマウントとバインドマウントと一時メモリマウントがあります。

 #### ボリュームマウント
　ボリュームマウントはDocker Engineの管理下にボリュームを作成し、コンテナにマウントする方式です。
 　名前を指定するだけで簡単に使用できたり、手軽に扱えますがボリュームに対して直接的な操作がしづらいので「仮で使う場合」や「消してはいけない場合」に使われることが多いです。

 #### バインドマウント
 　バインドマウントはDocker Engineの管理していない場所のディレクトリなどにマウントする方法です。
  フォルダなど直接ファイルを作成したり編集したりすることができるため「頻繁に触りたい場合」に使われることが多いです。

#### 一時メモリマウント
　一時メモリマウントはその名の通りメモリをマウントする方法です。
 　ディスクを使用するより高速に読み書きがでるため「アクセスを早くしたい場合」に使われることが多いです。しかしメモリのデータはDocker Engineの停止やホストの再起動などで消滅します。


## 関連コマンド
 ### 記憶領域を作成するコマンド

 
     docker volume create ボリューム名

### 記憶領域を削除するコマンド

    docker volumen rm ボリューム名
     


  ### 記憶領域をマウントするコマンド
  ボリュームマウントの記述方法
  
      docker run (省略) -v ボリューム名: コンテナの記憶領域パス (省略)

  バインドマウントの記述方法
  
      docker run (省略) -v 実際の記憶領域パス:コンテナの記憶領域パス (省略)

## おわりに
マウントについてほんわりとした理解から少しだけ理解が増しました。
それぞれの使用用途についてもよくわかりました。
 記事の中で間違い、不備がありましたらコメントお願いします。
TypesciptでToDoListを作った。

## 0.はじめに
こういう記事書くの初めてなのでどこかおかしくてもどうかご許しを。
この記事を書いているときの自作todolistのバージョンは1.4.2です。
# 1.目次
- 作ったもの
- 仕様
- 作った感想
# 2.作ったもの

https://github.com/gurizoor/todolist

https://gurizoor.github.io/todolist/

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="RwXZyyv" data-pen-title="Untitled" data-user="osryttqn-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/osryttqn-the-flexboxer/pen/RwXZyyv">
  Untitled</a> by ぐりぞーら (<a href="https://codepen.io/osryttqn-the-flexboxer">@osryttqn-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

原神やスタレで、イベントやデイリー,樹脂,ショップを忘れるのを防ぐために、ToDoListを作りました。
- 制作期間: 1,2週間くらい
- 使用したもの:
  - html
  - css 
  - Typescript
- 実行環境
  - windows os
  - google chrome

# 3.仕様
### 使い方
- リストの追加
  - General Day Week Monthの項目を選択(あとで項目ごとの違いを説明)
  - 入力欄に追加したい項目を入力する
  - addボタンを押す
- その他
  - リストを削除するときは項目の隣りにあるXボタンを押す
  - ラベルを押すとチェックをつけたり外したりできる

### General Day Week Monthでリストを追加したときの違い。
- Generarl: チェックは自動で外されない
- Day: 日付が変わるごとに、チェックが自動で外される
- Week: 月曜をまたいだら、チェックが自動で外される
- Month: 月が変わるごとに、チェックが自動で外される

# 3.作った感想
html css typescriptを使ってアプリを作るのは初めてで、デザインが上手にできなくて少し残念。

typescriptで開発するのが楽しい、自分にあった言語だと思えた。
とりあえずいろんな言語触ってみて、プログラミングの基礎がわかってきた頃だからかもだけど、結構スラスラ書けるし、型のエラーが減るからかなりありがたい。

localStorageからIndexeddbに移行するときめっちゃ大変やった。
でもデータベースの基礎がなんとなくだけどわかってきて成長を感じた。

開発効率を上げるために、エラー対処力が自分に必要だと感じた。

いろいろ調べているうちに思ったんだが、Reactとかいう超便利なツール?ライブラリ?あるんやと知って、そっち使うべきだったなとちょっと後悔。
P値の本質的な理解に向けて

私がZennで記事にしていた内容の転写です。

---

## はじめに
この記事は統計検定2級の資格取得を目指す方で、初めて統計学を学ぶ方を対象としています。特に[統計WEBの統計学の時間](https://bellcurve.jp/statistics/course/)で試験対策だけで進めていると、P値について理解が曖昧になる方も少なくないかと思います。そのような方への理解の助けを目的としています。

## P値
P値（p-value）は統計学において非常に重要な概念で、実験や観測データから得られた結果が、帰無仮説の下でどれだけ起こり得るかを数値で示します。ここで、帰無仮説とは通常、検証したい主張の否定形（例えば、効果がない、差がないなど）を指します。

### P値の意味
P値は、帰無仮説が真であると仮定した場合に、観測された統計量（またはそれよりも極端な値）が得られる**確率**です。小さいP値は、観測データが帰無仮説と矛盾していることを示唆します。これは、帰無仮説の下で観測された結果が非常に珍しい、または予期せぬものであることを意味します。逆に、大きいP値は、観測データが帰無仮説と矛盾しないことを示します。これは、観測された結果が帰無仮説の下で十分に起こり得るものであることを意味します。
### **P値の使用**
統計的検定では、通常、P値を事前に定義された有意水準（例: 0.05）と比較します。P値がこの有意水準よりも小さい場合、結果は「統計的に有意」と見なされ、帰無仮説は棄却されます。しかし、P値が大きい場合は、帰無仮説を棄却する十分な証拠がないとされます。これは帰無仮説が真である証明ではなく、単に棄却するだけの証拠が不足していることを意味します。
### **注意点**
P値は、帰無仮説が真であることの証明ではなく、あくまで観測されたデータが帰無仮説の下でどれだけ珍しいかを表す指標です。
P値は、実験の実際の意義や重要性を示すものではありません。結果の解釈には、P値だけでなく、実験の文脈、効果の大きさ、他の証拠なども考慮する必要があります。
要するに、P値は、特定のデータが帰無仮説の下でどれだけ起こり得るかを示す確率値ですが、これを解釈する際には注意が必要です。統計的有意性と実際の重要性は必ずしも同じではありません。




## 統計量t,ZとP値の関係性
:::message
P値とt分布で用いられる統計量tや、標準正規分布で用いられる統計量Zと有意水準の違いを理解する必要があります。
:::
P値と、t分布で用いられる統計量tや、標準正規分布で用いられる統計量Zは異なる概念ですが、密接に関連しています。それぞれの違いを説明します。

### **統計量t（t値）**
t値は、t検定で使用される統計量です。
母集団の標準偏差が未知で、サンプルサイズが小さい場合に用いられます。
t値は、サンプルの平均値が母平均からどれだけ離れているかを標準誤差で標準化したものです。
母分散が未知の場合におけるt値は、次の式で計算されます：

$$
t=\frac{\bar{x}-\mu}{\sqrt{\mathstrut \frac{s^2}{n}}}
$$



### **統計量Z（Z値）**
Z値は、標準正規分布で使用される統計量です。母集団の標準偏差が既知で、大きなサンプルサイズの場合に用いられます。Z値は、サンプル平均が母平均からどれだけ離れているかを母集団の標準偏差で標準化したものです。母分散が既知のZ値は、次の式で計算されます：

$$
Z=\frac{\bar{x}-\mu}{\sqrt{\mathstrut \frac{\sigma^2}{n}}}
$$


### **P値**
P値は、統計的検定の結果を表す確率値で、計算されたt値やZ値が得られる**確率**を示します。P値は、帰無仮説が真であると仮定した場合に、観測されたt値やZ値（またはそれ以上の絶対値）が得られる**確率**です。
P値は、t分布または標準正規分布（Z分布）の**確率密度関数を用いて計算されます。**

### **関係性**
t値やZ値は、サンプルデータに基づく計算結果で、P値はこれらの値に基づいて決定されます。
t値やZ値が大きい（つまり、観測値が帰無仮説から大きく離れている）場合、P値は小さくなります。逆に、t値やZ値が小さい（観測値が帰無仮説に近い）場合、P値は大きくなります。
要するに、t値やZ値はデータに基づいて計算される特定の値であり、P値はこれらの値がどれだけ帰無仮説と一致するかを示す確率です。



## P値と確率密度関数の照らし合わせ
:::message
おおまかな関係性を理解できたところで、実際の数値を使って理解を深めます。今回は標準正規分布表の95％信頼区間での1.96よりもやや大きい1.99がZ値となった場合を想定します。この場合のP値は確率密度関数で表されるZ＞1.99の面積という理解が正しいのでしょうか。
:::
ほぼ正確な理解ですが、少し補足が必要です。P値は、特定の統計的検定で得られた統計量（この場合はZ値）に基づいて、帰無仮説が真であると仮定した場合にその統計量が観測される**確率**です。しかし、P値を求める際には、統計量の「絶対値」が考慮されます。

### **P値とZ値の関係**
例えば、Z値が1.99の場合、P値は「Z値が±1.99（またはそれ以上の絶対値）になる確率」を指します。
標準正規分布（Z分布）では、この確率はZ値が1.99より大きい（Z > 1.99）または1.99より小さい（Z < -1.99）領域の面積の合計です。
### **両側検定の場合**
両側検定の場合、P値は分布の両端にある対応する領域の面積を合計したものです。つまり、Z > 1.99とZ < -1.99の面積を合計します。
Z値が正または負のどちらか一方の場合でも、P値はその絶対値に基づいて計算されます。
### **片側検定の場合**
片側検定の場合、P値は片方の端だけの面積に基づきます。例えば、右片側検定の場合はZ > 1.99の面積だけを考慮します。
### **結論**
したがって、Z値が1.99である場合のP値は、標準正規分布におけるZ > 1.99の面積だけでなく、Z < -1.99の面積も含めた合計面積（両側検定の場合）を示します。これにより、帰無仮説を棄却するための基準として用いられます。
LinuxでMameの動かし方

## 環境
Linux Miunt 21｡1
Mame 0.242+dfsg.1-1

## インストール
```
sudo apt-get install mame
```
## 準備すべきディレクトリ
これはシステム用の".mame"ではないです.
```
~/mame
    roms
        xzxzx.zip (romをMame用にzipのままコピーする.)
```


## MAMEの初期設定
```
mame -cc
```
システム用の".mame"です｡「mame.ini」、「plugin.ini」、「ui.ini」のファイルがカレントディレクトリに作成される。


## 日本語化設定
1. [Configure Option] Enter →
1. [Customize UI] Enter →
1. [Language]の中からJapanese]を選ぶ.
1. Escを押す.


## ゲームの起動
1. 左側の「Available」をクリックすると、ROMが表示される｡
1. クリックして「Enter」を押すとゲームが起動する。ゲームは動かないものもあります｡(バージョンの違い等)
1. 3回ほどEnterを押してゲームが動きます｡
1. inputのコンフィグは難しいの止めました.1と5と動きます.
1. Tabキーを押すとキーの設定が表示される。
1. カーソルキーと左Ctrl、左Alt、スペース、左Shiftを試してください.

## 参考リンク
エミュレータMAMEのインストールと初期設定 - collatz’s blog
https://collatz.hatenablog.com/entry/2020/10/31/145429

MAME0.226～0.240 初期設定 - 鬱リーマン、不毛な日々と時々デイトレ
https://www.initial-jj.com/entry/2020/11/23/tips_mame
ABC376Dを解いた【幅優先探索】


筆者はレート700前後の茶色コーダ

ABC376当日にACできなかったD問題を解いていく

https://atcoder.jp/contests/abc376/tasks/abc376_d

# 実装コード

1を起点として幅優先をすればいい
その場合探索したノードの持つ辺に1が繋がっていれば閉路になるので
たどり着くまでの数の最小値比較すればOK

```python
import sys
from collections import deque
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rI1(): return (int(sys.stdin.readline().rstrip())-1)
def rLI1(): return list(map(lambda a:int(a)-1,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

def main():
    N, M = rLI()
    G = {i+1:set() for i in range(N)}
    
    for _ in range(M):
        a, b = rLI()
        G[a].add(b)

    v = {i+1:-1 for i in range(N)}
    q = deque([(1, 1)]) 
    m = float('inf')

    while q:
        n, d = q.popleft()
        v[n] = d
        for nb in G[n]:
            if nb == 1:
                # err(p,d+1)
                m = min(m, d)
            if v[nb] == -1:
                q.append((nb, d + 1))

    print(m if m != float('inf') else -1)
    
if __name__ == '__main__':
    main()

```

# まとめ

当日はGPTに投げてすぐ飛ばしてしまったが
そのコードから少し手直しするだけでACができた

出力されたコード全く読まないのは良くないね😅
MUIのstyledで条件分岐する方法

コンポーネントの状態によってスタイルを変えたいことがあると思う。
今回、MUIのstyled()を採用したプロジェクトで、スタイルの条件分岐が必要になったので、方法をメモしておく。

```react
const Panel = () => {
    const [isOpen, setIsOpen] = useState(false)

    const toggleShow = () => {
        setPanelShow(!isOpen)
    }
    
    return (
        <Box>
            <Button onClick={toggleShow}>クリック</Button>
            <Panel open={isOpen}> {/* プロパティとして表示・非表示の状態を渡す */}
                ボックス
            </Panel>
        </Box>
    )
}

export default Panel

const Panel = styled(Box)<{ open: boolean }>(({ open }) => ({
  width: 250,
  height: 250,
  backgroundColor: '#f0f0f0',
  transition: 'opacity 0.5s ease',
  transform: open ? 'translateX(0)' : 'translateX(100%)', // openに応じてtransformを切り替え
}));
```

スタイルを条件分岐によって切り替えたい場合は、`props`を使って、Stateに定義した状態を渡すことで実現できる。

上記の例では、ボタンをクリックすることで`transform`の値が切り替わり、`<Panel></Panel>`がスライドして表示される。ハンバーガーメニューなどに活用できそう。

コンポーネントの表示・非表示は分かりやすいが、スタイルの条件分岐、特にstyledを使用するときの方法が分からなかったので覚えておく。
ｍAPという評価指標

## はじめに
　こんにちは。まっちゃ。です。:tea:
　今回は、物体検出モデルの代表的な評価指標mAPに関して、まとめていきます。

**なぜ重要か**
　物体検出モデルの比較を行う際、評価指標としてmAPが主に取り上げられます。mAPを知ることで、各モデルの強みを理解できます。

## 目次
- 分類精度の評価指標
    - Accuracy
    - Recall
    - Precision
    - F1-score
- 位置精度の評価指標
    - IoU
- 物体検出モデルの評価指標
    - mAP
- まとめ

## 分類精度の評価指標
　主に、「Accuracy（正解率）」、「Recall（再現率）」、「Precision（適合率）」があります。
- Accuracy
　全てのデータの中でどれくらい正解しているかを示す指標
$$Accuracy = \frac{TP+TN}{TP+FN+FP+TN}$$

- Recall
　実際に正解であるデータの中でどれくらい正解しているかを示す指標
$$Recall = \frac{TP}{TP+FN}$$

- Precision
　正解と予測したデータの中でどれくらい正解しているかを示す指標
$$Precision = \frac{TP}{TP+FP}$$

　ここで、各指標を算出する際に使用する項目は。混合行列から理解することができます。以下の図に、混合行列を示します。また、以下の表に、各項目の概要を示します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3673789/9118eda4-c175-21fd-0e6b-78f4db31e480.png", width=60%>

|No.|項目名|概要|
|---:|---|---|
|1|TP (True Positive)|正解として正しく予測された数|
|2|FN (False Negative)|不正解と予測されたが、実際には正解である数|
|3|FP (False Positive)|正解と予測されたが、実際には不正解である数|
|4|TN (True Negative)|不正解として正しく予測された数|

　上述したRecallとPrecisonは、トレードオフの関係をもちます。そのため、例えば、Recallが良くてもPrecisionが悪いといったように、それぞれ単体でみても評価の良し悪しを決定することはできません。
　そこで、2つの指標を組み合わせたF1-Scoreという評価指標が用いられます。
- F1-Score
　モデルに加えた変更が性能にどれくらい影響を与えたかを示す指標
$$F1－Score = \frac{2 * Recall * Precision}{Recall + Precision}$$

　RecallとPrecisionの調和平均を取った値となります。

　RecallとPrecisionのどちらを重要とするかはアプリケーション次第ですが、どちらも重要にする場合にはF1-Scoreが最大値となる閾値を選択してモデルを構築します。

## 位置精度の評価指標
- IoU (Intersection over Union)
　予測ボックスと正解ボックスがどれくらい重なるかを示す指標
 
　以下の図に、図式化したIoUの計算を示します。各ボックスを合わせた領域に対してボックス同士が重なる領域の割合から算出します。
　IoUは0.0から1.0の値を取り、1.0に近いほど2つの領域が重なっていることを意味します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3673789/16d2d00c-3648-9091-a6da-19c46b4a1483.png", width=40%>

## 物体検出モデルの評価指標
- mAP (mean Average Precision)
　上述したRecall, Precision, IoUを組み合わせた指標

　すべてのクラスについてAP（平均適合率）を求め、それらを平均化した値となります。
  
　以下の図において、左図に画像中の予測ボックスと正解ボックス、右図にPrecision-Recall曲線（PR曲線）を示します。
　以下に、各図を用いてAPを求める方法を示します。（1., 2.は左図、3., 4.は右図を参照してください。）

1. あるクラスに関して、予測ボックスと正解ボックスを全てのテスト画像に対して描画
2. クラスに対する予測確率をスコアとして、スコアが高い順に並べ替え
左図の①~⑤は予測ボックスであり、各番号横に記載される値はスコアを示します。
3. RecallとPrecisionを計算し、PR曲線を描画
4. PR曲線の下部の面積を求め、APを算出

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3673789/93542b1d-89a0-ab6b-4bb0-eadc774361e8.png", width=100%>

　PR曲線を描画するために①~⑤の予測ボックスから算出したRecallとPrecisionを、以下の表に示します。ここで、以下を考慮して、各評価指標を算出します。
- Recallの分母は、画像中の正解ボックスの数（上図の例では4）
- Precisionの分母は、その時点で予測したボックスの総数
- TPの加算は、予測ボックスと正解ボックスのIoUが閾値を超えた場合のみ

　②について、正解ボックスは①と重複するためTPは加算されず、TP=1として各指標を計算します。
　③について、予測ボックスと正解ボックスのIoUが閾値以下であるためTPは加算されず、TP=1として各指標を計算します。
|予測ボックスNo.|Recall|Precision|
|---:|---|---|
|①|0.25 (1/4)|1.0 (1/1)|
|②|0.25 (1/4)|0.50 (1/2)|
|③|0.25 (1/4)|0.33 (1/3)|
|④|0.50 (2/4)|0.50 (2/4)|
|⑤|0.75 (3/4)|0.60 (3/5)|

　一般にIoUの閾値を0.5や0.75にした際（$mAP_{50}$, $ mAP_{75}$）や各物体サイズを検出する際（ $mAP_{S}$,  $mAP_{M}$,  $mAP_{L}$）の性能評価が用いられています。

## まとめ 
　物体検出モデルに関して、分類・位置精度の評価指標を取り上げ、最終的にmAPについてまとめてきました。
　文献を読み進める中で各モデルの精度を比較する際は、文献に記載のmAPの違いを意識します。また、RecallやPrecisionのように、1つの評価項目でモデルの良し悪しを決定することは難しいため、複数の指標を用いて評価を行い、モデルの汎用性を高めたいです。

### 参考
　本記事の執筆にあたり、下記の書籍を参考にしました。
[深層学習による画像認識の基礎](https://www.ohmsha.co.jp/book/9784274231841/)
今更ながらhtmlファイルのヘッダーについて調べてみる

# HTMLファイルのヘッダーを基本に戻って調べてみた
こんにちは。koouoです。
今回のテーマは「HTMLファイルのヘッダー」についてです。
なんでこれを取り上げたかっていうと、ヘッダー情報を毎回調べる→忘れる→また調べる…ってループを自分がよくやっちゃうからです(笑)
最近だとAIで簡単に調べられるけど、備忘録としてここにまとめておこうと思ったわけです。

ついでに、HTMLファイルについても軽く触れてみたので、そこも紹介します（ただ、あくまでおまけなので、興味ない人はスルーしてOKです）。

:::note info
## そもそもHTMLファイルとは？
HTMLは「Hyper Text Markup Language」の略で、Webページを作成するためのマークアップ言語です。
### マークアップ言語とは？
コンピューターがWebページを表示する際に、どのように表示すべきかを認識させるための言語です。認識させるためには「タグ」と呼ばれる要素を使用し、これにより「どこが本文なのか」「どこがタイトルなのか」「どこが見出しなのか」などをコンピューターに正しく伝え、結果的にWebページが適切に表示されます。
ちなみに、マークアップ言語にはHTMLのほかにもXMLやXHTMLなどがあります。
### HTMLの今後
昔は「W3C」と「WHATWG」という2つの団体がHTMLの仕様で対立していたんですが、最終的にはWHATWGの『HTML Living Standard』が公式仕様として採用されました。なので、これからHTMLを学ぶなら、そっちに注目しておいたほうがいいと思います。
:::

## 本題：ヘッダーとは？
ヘッダーはWebページの情報を含む部分で、HTMLファイルでは`<head>`タグ内に書かれます。
ただし、ユーザーが普段見る画面には直接表示されない情報が多いです。
ヘッダーはページを正しく表示させるための設定をする場所で、どのコンピュータでも同じように表示されるようにするためのものです。（ちなみに、ヘッダーなしでもページが表示されることは多いです。）

今回は、以下のヘッダーがないときから、徐々にヘッダー内に情報を追加し、どのように書き方が変わるのかを記録していきます。
```html:index.html
<html>
<body>
見出し
</body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524447/7a2b2f57-cde7-88d3-d498-626c5ef0b58f.png)

ここから、少しずつヘッダー内に情報を追加していきます。

- タイトル `<title>`
HTMLドキュメントの題名を表します。
タイトルを設定すれば、Webページにアクセスしてきたユーザに、どんなサイトなのかを伝えることができます。
```html:index.html
<html>
    <head>
        <title>タイトルタグ追加</title>
    </head>
<body>
見出し
</div>
</body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524447/d8543998-9218-e660-aae3-2681bc88f464.png)
- 文字コード `<meta charset="○○">`
次に、文字コードの指定です。<meta charset="UTF-8">は、文字化けを防ぐために文字コードを設定します。
これがないと、Webページ上で文字が正しく表示されない可能性があります。
```html:index.html
<html>
    <head>
        <title>タイトルタグ追加</title>
        <meta charset="UTF-8">
    </head>
<body>
見出し
</div>
</body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524447/79492133-06c3-a9d7-bfb1-12f4eaa70eb5.png)

- description `<meta name="description" content="○○">`
Webページの要約を記述します。
書き方としては、metaのname属性にdescriptionを指定し、content属性に要約した内容を記述します。
これを書くことで、Googleなどの検索サイトの検索結果で、タイトルの下に表示される説明文の候補になります。
```html:index.html
<html>
    <head>
        <title>タイトルタグ追加</title>
        <meta charset="UTF-8">
        <meta name="description" content="概要">
    </head>
<body>
見出し
</div>
</body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524447/9be97ba7-6245-2fc7-fd95-32795ffc2776.png)

## ヘッダーの特性
上記で説明した、『文字コード』や『description』は、追加しても特に表示面は変わっていません。
`<meta>`のタグでは、そのWebページのメタ情報を付与します。

他にヘッダーで設定できるものとしては、メタ情報を付与する『キーワード』`<meta name="keywords" content="○○","△△","◇◇">`や、他のファイルを呼び出して使いたいときに設定する`<link>`もあります。気になる方は調べてみてください！

## まとめ
- ヘッダーに書く情報のうち、書いても直接表示されないものがある
- ヘッダーがなくてもWebページは表示可能だが、ヘッダーを設定すれば、アクセスしてきたすべてのコンピュータに対して表示の仕方を統一する付加価値を提供する
SwitchBotで気温と湿度を取得、AIに服装を聞くアプリ[Python]

## 使ったSwitchBotの温湿度計

半年前に買って、いまいち有効活用できていませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760274/d3f4417a-7048-1a74-721f-cda3a54cd683.png)

作ろうと思ったきっかけは、仕事でSwitchBotとかAI関連の仕事がありそうで最低限の知識付けたかったからです。

## 作り方
自分はPythonで作りました。

https://github.com/ohigashi-tky/smart-ai-clothing

**事前にやること**
・SwitchBotAPIのトークンを取得
・OpenAI APIのAPIキーを取得
　ChatGPTの有料プランに入ってたらOKだと思ってた時期がありました。
　[OpenAI API](https://openai.com/index/openai-api/)からサインアップ
　クレジットカードを登録して何ドルかチャージする必要があります。自分は最低金額の5ドルをチャージしました。
・[SwitchBotAPI](https://github.com/OpenWonderLabs/SwitchBotAPI)の機器一覧取得から温湿度計の機器IDを取得

```text:ホスト名
https://api.switch-bot.com/
```
```text:エンドポイント
GET /v1.1/devices
```
あとはHTTPリクエストヘッダのAuthorizationにトークンをセットしてAPIを呼んでください。
　
　
**プログラムの流れ**
```mermaid
graph TD;
    環境ファイルから年齢/性別/暑がり寒がり/服のスタイルを取得 --> SwitchBotAPIで機器IDから温湿度計のデータを取得;
    SwitchBotAPIで機器IDから温湿度計のデータを取得 --> 画面に表示
    画面に表示 --> おすすめの服装ボタンを押す
    おすすめの服装ボタンを押す --> OpenAIのAPIに条件を投げて服装のアドバイスを取得;
    OpenAIのAPIに条件を投げて服装のアドバイスを取得-->取得したアドバイスから画像生成APIで服装の画像を取得;
    取得したアドバイスから画像生成APIで服装の画像を取得-->アドバイスと服装の画像を表示;
```

気温と湿度は自動取得→SwitchBotAPIが1日10000回制限で無料なので。
おすすめの服装ボタンを押す→OpenAIの画像生成APIが1回5円くらい掛かるので任意に。回数制限も設けたい。

## OpenAI APIに投げたプロンプト
**服装のアドバイスを取得するとき**
```
prompt = f"""
私は{AGE}歳、{GENDER}です。{preference}が好きで、{style}スタイルを好みます。体質は{physical}です。
現在の気温{temperature}°C、湿度{humidity}%。靴は単色、上下の服は2色以上。
この条件に合う服装のアドバイスを100文字以内でお願いします
"""
```
使った言語モデルはgpt-4o-miniです。
料金がめちゃくちゃ安いみたいでした。
　
**画像生成をお願いするとき**
```
prompt = f"""
{advice}
アドバイスに沿った服装の画像を実写風カラーで生成してください。
1人の日本人{GENDER}、年齢は{AGE}歳です。
テキスト情報は画像に出力しないでください
"""
```
使ったモデルはdall-e-3
アドバイスに年齢と性別が特定できる情報がないので追加してます。
　
あとは、取得した気温、湿度、服装のアドバイスと画像を貼りつけてOK

## 完成した画面
起動時に気温と湿度だけ表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760274/de8d407d-d2ea-ca90-f010-7c2c53438842.png)
　
おすすめの服装ボタンを押して、気候・個人の設定情報に適した服装を表示
（やや暑がりを設定しているので薄着になってます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760274/378f214c-9862-14d8-a74a-1039ba1b82f4.png)

## 注意点
**費用はちゃんと掛かる**
先述していましたが、OpenAI APIの請求画面で確認すると1回の画像生成・アドバイス生成で0.04ドル(6円)掛かっていました。
ボタンの押下回数は制限必須だと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760274/16232a93-c3cf-357c-e381-31a675e863f4.png)
　
**画像生成が遅い**
おすすめの服装ボタンを押してから結構なタイムラグがあります。

## 感想
仕事の前知識のために今回スマートホーム機器とAIを使ったミニアプリを作成しましたが、
やっぱり**試してみる**のは大事だなと思いました。
次は、GoogleMeetなどの音声を認識して、難しい単語の意味を表示するアプリとか考えてます。
EFで外部キーを持つテーブルにインサートすると親テーブルに空レコードが挿入される

## 現象
外部キーを持つ子テーブルにデータをインサートする際、外部キーIDの値を設定しても、何故か親テーブルにからのレコードが挿入されてしまう。
また、小テーブルのデータの外部キーIDの値もNullになってしまう。

## コード
~~~ C#:親テーブル定義
public class Parent
{
    public int Id { get; set; }
    public string Name { get; set; }
}
~~~

~~~ C#:子テーブル定義
public class Child
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ParentId { get; set; }
    public Parent parent { get; set; } = new()
}
~~~

~~~ C#:Insert処理
Child child = new();
child.Name = "test";
child.ParentId = "1";
context.Child.Add(child);
~~~

## 原因
本当に初歩的なことであるが、childのparentオブジェクトの指定がないため、Nullとして外部キーが設定されてしまっている。
エラーにはせず、EntiryFrameworkが親テーブルにもデータをインサートしている。

## 修正方法
childのparentオブジェクトを設定する。

~~~diff_C:Insert処理
Child child = new();
child.Name = "test";
child.ParentId = "1";
+ child.Parent = context.Parent.Where(f => f.Id == 1).FirstOrDefault();
context.Child.Add(child);
~~~

EntityFrameworkはおせっかいをしてくるため、便利な反面、予想外の処理もすることがあるため、よく調べて使用する必要があると反省。
他にも対象方法はあると思うが、一旦これで解決。
【Java】ユークリッドの互除法をJavaで実装してみる【アルゴリズム】

## はじめに
基礎的なアルゴリズムをJavaで実装していきます。
今回は **「ユークリッドの互除法」** です。

## ユークリッドの互除法
目的：
2つの値(A, B)の最大公約数を求めます。

手段：
「AとBで ```大きい方 - 小さい方``` を繰り返して、AとBが同じ値になったらそれが最大公約数だよ」というアルゴリズムです。

## 設計
呼び出し元のMainクラスと、処理を行うEucridクラスに分けました。
さらにEucridクラスの中でもユーザーから入力を受け付け処理を呼び出して表示するView・Controller部分と、アルゴリズムの核心的処理を行うModel部分を別のメソッドにしてみました。

それぞれのクラス・メソッドの役割を明確にして、結合度を下げることで変更に強い設計を意識しています。

今回はユーザーに値を入力してもらう形にしましたが、例えばこれをCSVを読み込んで処理するように変更したいと思ったとき、変更するのは ```EucridStarter()``` だけになります。
入力や出力が何であれ、このアルゴリズムの根幹である```EucridExec(int a, int b)```は変わらないからです。

わずかな変更であってもバグを作り込まないとも限らないので、変更の影響範囲は極力小さくすることを心がけます。

## ソース
### フォルダ構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524566/1dd917c6-8a51-f265-a341-e3677264ab6c.png)

### ソースコード
```java:main.java
package main;

import process.Eucrid;

public class Main {

	public static void main(String[] args) throws InterruptedException {
		// ユークリッドクラスをインスタンス化して処理をスタート
				Eucrid eucrid = new Eucrid();
				eucrid.EucridStarter();
	}
}
```

```java:Eucrid.java
package process;

import java.util.Scanner;

public class Eucrid {
	public void EucridStarter() throws InterruptedException {
		//変数の初期化
		int a = 0;
		int b = 0;

		// ユーザーに数を2つ入力してもらう
		Scanner sc = new Scanner(System.in);

		System.out.println("【ユークリッドの互除法】");
		System.out.println("2つの値を入れると、最大公約数を計算して表示します。");
		System.out.println("まず1つ目の値を整数で入力してください。");
		a = Integer.parseInt(sc.nextLine());

		System.out.println("2つ目の値を整数で入力してください。");
		b = Integer.parseInt(sc.nextLine());
		sc.close();

		// 2つの値を引数でユークリッドの互除法メソッドに渡して実行
		int result = EucridExec(a, b);

		System.out.println("考えています...");
		Thread.sleep(1000); //待機

		// 結果をコンソールに表示	
		if (result == 1) {
			System.out.println("2つの数は互いに素です。");
		} else {
			System.out.println(a + "と" + b + "の最大公約数は" + result + "です。");
		}
	}

	public int EucridExec(int a, int b) {
		// aとbが一緒になるまで繰り返す
		while (a != b) {
			// 値が大きい方から小さい方を引き、結果を値が大きい方の変数に代入する
			if (a > b) {
				a = a - b;
			} else {
				b = b - a;
			}
		}
		return a;
	}
}
```
## 実行
![ユークリッドの互除法動作.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524566/3cb1a21d-2774-b294-2c73-fbcc3464f7b4.gif)


## おわりに
アルゴリズム自体はシンプルですが、プログラムで表現しようとすると標準入力の受け取り方から型変換など色々な要素が関わってきます。
基礎練習にはもってこいの題材だと思いました。

## 参考図書
基本情報技術者試験のアルゴリズム問題がちゃんと解ける本 第2版 [矢沢 久雄]

## 記事リンク
https://qiita.com/lipton2018/items/0e6bf8f6522daa659b4d
WordPressのサイト作る際にいつも参考にしているテーマサイト

[souken-blog.com: WordPressテーマ「Luxeritas」をカスタマイズ（その１）準備編](https://souken-blog.com/2018/01/16/wordpress-luxeritas001/)
このテーマが最高、というかこれ以外知らない。
(調査中)reactor-nettyのリクエストヘッダーの初期値

| 項目 | 初期値 |
| ---- | ---- |
|Connection|明示的に設定しない場合は、keep-alive|
|Host|HTTPヘッダーにキーが無い場合は、リクエストの送信先ホスト名とポートが自動で設定<br>https://github.com/reactor/reactor-netty/blob/main/reactor-netty-http/src/main/java/reactor/netty/http/client/HttpClientConnect.java#L541|
|User-Agent|HTTPヘッダーにキーが無かったら設定される初期値の定数の値<br>https://github.com/reactor/reactor-netty/blob/main/reactor-netty-http/src/main/java/reactor/netty/http/client/HttpClient.java#L116<br>`public static final String USER_AGENT = String.format("ReactorNetty/%s", reactorNettyVersion());`<br>設定しているところ<br>https://github.com/reactor/reactor-netty/blob/main/reactor-netty-http/src/main/java/reactor/netty/http/client/HttpClientConnect.java#L537<br>例: User-Agent: ReactorNetty/1.0.0|
|Accept|HTTPヘッダーにキーが無かったら設定される初期値の定数の値<br>https://github.com/reactor/reactor-netty/blob/main/reactor-netty-http/src/main/java/reactor/netty/http/client/HttpClientConnect.java#L694<br>`static final AsciiString ALL = new AsciiString("*/*");`<br>設定しているところ<br>https://github.com/reactor/reactor-netty/blob/main/reactor-netty-http/src/main/java/reactor/netty/http/client/HttpClientConnect.java#L546<br>例: Accept: \*/\*|
|Content-Length|値が設定されていてもHTTPのbodyのサイズで更新<br>https://github.com/reactor/reactor-netty/blob/main/reactor-netty-http/src/main/java/reactor/netty/http/client/HttpClientOperations.java#L857<br>`requestHeaders.setInt(HttpHeaderNames.CONTENT_LENGTH, body.readableBytes());`|


https://github.com/netty/netty

https://github.com/reactor/reactor-netty
投稿 111 Ruby on Rails 2024/10/19

本日の勉強時間　2H

Ruby on Rails（ルビーオンレイルズ）は、オープンソースのWebアプリケーションフレームワークである。単にRailsあるいはRoRと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller（MVC）アーキテクチャに基づいて構築されている。
React Routerの使い方

**Reactでのルーティングの基本**
React Routerは、Reactアプリケーションにルーティング機能を追加するためのライブラリです。
SPA（Single Page Application）であるReactでは、画面遷移を行う際にページ全体をリロードせずに、ルートに応じて適切なコンポーネントを表示することが重要です。本記事では、React Routerの導入から基本的な使い方までを解説します。

# 1. React Routerのインストール
以下のコマンドを使って、react-router-domパッケージをインストールします。

```bash
npm install react-router-dom
```

# 2. 基本的な使い方
**2.1. ルーターの設定**
BrowserRouterを使うことで、Reactアプリにルーティングを導入します。以下のコードは、シンプルなルーティングの例です。

```tsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;
```

**ポイント解説**
BrowserRouter：URLの変更を監視し、対応するコンポーネントを表示する。
Routes：複数のルートをまとめるためのコンテナ。
Route：pathに一致するURLが呼ばれると、指定したコンポーネントを表示します。

# 3. 画面遷移を行うリンクの作成
React Routerでは、```<a>``` の代わりに``` <Link>```を使用します。これにより、ページ全体のリロードをせずに画面遷移が可能になります。

```tsx
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

export default Navbar;
```

# 4. URLパラメータの利用
URLに動的なパラメータを含めることも可能です。以下のように、ユーザーIDなどのパラメータを渡すルートを作成します。

```tsx
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams(); // URLからidを取得
  return <h1>User ID: {id}</h1>;
}
```

```tsx
<Routes>
  <Route path="/user/:id" element={<UserProfile />} />
</Routes>
```

# 5. 404ページ（Not Found）の設定
どのルートにも一致しない場合に表示する404ページを設定します。

```tsx
function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

<Routes>
  <Route path="*" element={<NotFound />} />
</Routes>
```

# 6. ネストされたルートの実装
複雑なアプリでは、ネストされたルートが必要になることがあります。

```tsx
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 子ルートがここにレンダリングされる */}
    </div>
  );
}

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route path="settings" element={<h2>Settings</h2>} />
  </Route>
</Routes>
```

# 7. ナビゲーショ
ボタンのプログラム的実行
ボタンをクリックしたときにコードで画面遷移を行いたい場合、useNavigateを使用します。

```tsx
import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return <button onClick={goToAbout}>Go to About</button>;
}

export default Home;
```

# 8. React Routerのトラブルシューティング
ページが白くなる：BrowserRouterが正しく設定されているか確認してください。
パスが正しくない場合：パスのスペルミスやRouteタグの使い方を再確認しましょう。
ネストされたルートが表示されない：<Outlet />を親コンポーネントに設置することを忘れないようにしましょう。


# 9. React Routerのバージョンアップに伴う変更点
React Router v6では、SwitchがRoutesに置き換わり、elementプロパティを使ってコンポーネントを渡す必要があります。

# まとめ
React Routerは、シンプルなルーティングからネストされたルート、URLパラメータまで幅広く対応可能な強力なライブラリです。
リンクやURLパラメータの活用により、Reactアプリケーションでのユーザー体験を大幅に向上させます。
Google CloudのIPアドレスを調べる方法

Google Cloudでは、ネットワークの設定やセキュリティ制御のために、IPアドレス範囲の情報を公開しています。

### IPアドレスリストの公式リンク
Googleは、以下のJSONファイルでIPアドレスの範囲を公開しています。

- Googleサービス用IPアドレスリスト
https://www.gstatic.com/ipranges/goog.json
このリストには、Google APIやその他の一般的なGoogleサービス（YouTube、Google Searchなど）のIP範囲が含まれます。

- Google Cloud用IPアドレスリスト
https://www.gstatic.com/ipranges/cloud.json
こちらは、Google Cloud Platform（GCP）のリージョン別IP範囲が詳細に記載されています。

###  GASでJSONファイルの解析方法

以下のスクリプトは、cloud.jsonを取得し、IPアドレス範囲とリージョン情報をGoogleスプレッドシートに書き込む例です。

```gas
function fetchCloudIpRanges() {
  const url = 'https://www.gstatic.com/ipranges/cloud.json';
  
  try {
    // JSONデータの取得
    const response = UrlFetchApp.fetch(url);
    const json = JSON.parse(response.getContentText());

    // スプレッドシートに書き込む準備
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    sheet.clear();  // シートの内容をクリア
    sheet.appendRow(['Service', 'Scope', 'IP Range']);  // ヘッダー行を追加

    // JSONデータの解析と書き込み
    json.prefixes.forEach(prefix => {
      const service = prefix.service;
      const scope = prefix.scope;
      const ipRange = prefix.ipv4Prefix || prefix.ipv6Prefix;  // IPv4またはIPv6
      sheet.appendRow([service, scope, ipRange]);
    });

    Logger.log('IPアドレスの取得と書き込みが完了しました。');
  } catch (e) {
    Logger.log('エラーが発生しました: ' + e.toString());
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/99bdd903-c4d4-10bb-7ac2-dea11194ace4.png)
ネットワークについての理解を深める　その1

## 1. プロトコルとは？
コンピュータ同士が通信を行う際に、言葉のように「約束事」が必要。これをプロトコルと呼ぶ。異なるメーカーやOSを持つコンピュータ同士でも、同じプロトコルを使えば通信が可能になる。プロトコルが異なる場合、通信は成立しない。

例)：
#### 定義
日本語や英語を「プロトコル」
言語によってコミュニケーションをすることを「通信」
話の内容を「データ」

#### それぞれが扱える言語（プロトコル）
Aさん（日本語のみ）
Bさん（英語のみ）
Cさん（日本語と英語の両方）

#### 発生する現象
* AさんがBさんと会話しようとしてもそれぞれ言語（プロトコル）が違うから言葉が理解できない
* AさんとCさんは日本語（プロトコル）を使用してコミュニケーション（通信）を取ることができる
* BさんとCさんは英語（プロトコル）を使用してコミュニケーション（通信）を取ることができる
→上記のように言語（プロトコル）が違えば、コミュニケーション（通信）を取ることができない。
→コンピュータは人間と違って、人間のような知能、応用力、理解力を持っていないからコネクタの形状のような物理レベルからアプリケーションの種類のようなソフトウェアレベルまで、様々な部分で明確な約束事を決めて、それを守るようにしなければ正しく通信することができない。

## 2. プロトコルの階層化
### OSI参照モデル
OSI参照モデルは、コンピュータ通信の機能を7つの階層に分け、それぞれの階層ごとに役割を持たせたモデル。このモデルにより、異なるコンピュータ間でもスムーズに通信ができるようになっている。

### OSI参照モデルの7階層
* 物理層（Physical Layer）
* データリンク層（Data Link Layer）
* ネットワーク層（Network Layer）
* トランスポート層（Transport Layer）
* セッション層（Session Layer）
* プレゼンテーション層（Presentation Layer）
* アプリケーション層（Application Layer）
各階層は、それぞれ下位層からサービスを受け、上位層にサービスを提供する

### OSIプロトコル
異なるコンピュータ間で通信を実現するため、ISOやITU-Tによって標準化が進められていたネットワークアーキテクチャ。OSIではOSI参照モデルに基づき、各階層のプロトコルと階層間のインターフェースについての標準を定めている。

## 3. TCP/IPとは？
TCP/IPは、インターネットで使用される標準的なプロトコル群。IETF（Internet Engineering Task Force）によって提案され、現在ではデファクトスタンダードとして世界中で広く使われているらしい。

### TCP/IPモデルとOSIモデルの違い
OSIは7階層に分かれているのに対し、TCP/IPは4階層に簡略化されています。
TCP/IPは主にインターネット通信で使用され、OSIは概念的なモデルとして使用されています。

## 4. プロトコルの標準化
異なるメーカーの機器でも互換性を持って利用できるよう、プロトコルはISOやIETFなどの機関によって標準化されてる。特に、IETFによって標準化されたTCP/IPは、インターネットの通信プロトコルとして最も広く使われている。

### 標準化機関の例：
* ISO（国際標準化機構）
* ITU-T（国際電気通信連合）
* IETF（Internet Engineering Task Force）

## 5. プロトコルの重要性
コンピュータ同士の通信が成立するためには、物理レベルからソフトウェアレベルに至るまで、明確な「約束事」を決め、それを守る必要がある。例えば、言語が違えば会話が成立しないのと同様、コンピュータも異なるプロトコルでは通信できない。

また、通信中に発生する障害に対しても事前に適切な対応策を決めておく必要があり、それもプロトコルの一部として定義されている。

## まとめ
プロトコルはコンピュータ同士が通信を行うための「約束事」。
OSI参照モデルは、通信の機能を7階層に分けた標準的なモデル。
TCP/IPはインターネット通信の標準プロトコルで、IETFにより標準化されている。
異なるメーカー間でも通信ができるように、プロトコルは標準化されている。
Git pushでエラーで色々試しているとファイルが削除された話

# Terrafromのリソースファイルをgitで管理しようとしたら変更したファイルが全て削除された！

## 結論
以下のコマンドを実行したから

 ``` bash
$ git reset --hard HEAD  #この二つのコマンドは同じ意味では無い、実行結果は異なる

$ git reset --hard 'HEAD^'
  ```
pushのエラーはgitで管理する必要の無い、大きいファイルもpushしようとしたから容量を超えてエラーになった。.gitignoreで不要なファイルを除外する事でpushできた。
[参考にした記事](https://qiita.com/kojiro513/items/a96bc443a8c00fa1990b#gitignore-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%9B%B4%E6%96%B0)

## 状況

terraformの学習で作ったファイルをまとめてpushしたところ、ファイルサイズの上限を超過してエラーになり、解決するために色々試した中の一つで、コミット履歴を取り消さないとpushしても同じ結果になるのでコミット取り消しのコマンドを何個か試していた。取り消されたかよくわかっていないが何回試しても同じエラーになるので取り消せていないのかと思い、変更も全て取り消す、コマンドを実行してしまい、初pushだったのでまとめて作った学習記録ファイルが全て消えるという事になってしまった。

## 解決

めちゃくちゃ焦って削除されたファイルを復元する方法はないかと探していると、vscodeにはタイムラインと言う機能がありそこから過去の変更履歴を探したり復元できたりするらしく。

![スクリーンショット 2024-10-20 20.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535626/74147273-ae2d-7cee-7e44-2d4a7c363585.png)

画像のローカル履歴：をクリックするとファイルが検索できたり、一覧が出てくるのでそこから探して復元する事ができました。一安心ですが、terraform applyなどで作成された.teeraformなどの隠しディレクトリは消えたままなのでリソースなどは最初からinitしたりapplyで作成する必要があった。

## 終わりに

 今回の失敗からめんどくさがらず、こまめにpushする事とコマンドの意味を理解することを学んだ。  
 .gitignoreも今回で初めてしったので今後も有効活用していきたい。
Next.jsで日付を扱うとエラー！？Tempoを使ってみた

## はじめに

利用しようと思ったきっかけは、Next.jsで日付を扱おうとしたところ、
「Uncaught TypeError: d.toLocaleDateString is not a function」エラーが出て原因を調べ始めたことでした。  
困ったぞと調べていると、他にもサーバー/クライアント間の違いなどや環境間の設定など気をつけなければいけないことが多く　タイムゾーン や フォーマット　など簡単に扱えるよう日付ライブラリを使ってみようと考えました。


色々比較してみましたが、少し前にリリースされたばかりの Tempo というライブラリのドキュメントのかっこよさに痺れて決めました。

## Tempoを使ってみた

公式はこちら

https://tempo.formkit.com/

### 軽量で高速

Tempoの最大の魅力の一つは、非常に 軽量 であることです。  
Moment.jsやLuxonといった他の強力な日付ライブラリは、機能が豊富である反面、ファイルサイズが大きくなりがちですが、
Tempoは必要な機能に絞り込まれているため、軽量で高速です。

軽いためインストールも高速です。
```terminal
npm install @formkit/tempo
```

### 直感的で分かりやすい

TempoのAPIは非常にシンプルで、直感的に使用できるよう設計されています。初心者が使っても混乱しにくく、コードが読みやすいです。

例えば、日付の 加算/減算 や フォーマット もこんなに簡単です。

```typescript
// day style
format(date, "full"); // 2024年9月28日土曜日
format(date, "long"); // 2024年9月28日
format(date, "medium"); // 2024/09/28
format(date, "short"); // 2024/09/28
// time style
format(date, { time: "full" }); // 14時20分22秒 +09:00
format(date, { time: "long" }); // 14:20:22 +0900
format(date, { time: "medium" }); // 14:20:22
format(date, { time: "short" }); // 14:20
// date and time style
const daytime1 = format(date, { date: "full", time: "short" });
 // 2024年9月28日土曜日 14:20
const daytime2 = format(date, { date: "medium", time: "long" });
 // 2024/09/28 14:20:22 +0900

// 7日後の日付を取得
const nextWeek = addDay(now, 7);
// 7日前の日付を取得
const prevWeek = addDay(now, -7);
// 特定の日付をフォーマット
const formattedNext = format(nextWeek, "full"); // 2024年9月28日土曜日
```

### フォーマットトークンやタイムゾーンなど設定も分かりやすい

豊富なオプションにより、フォーマットを細かく設定したり、タイムゾーン設定など簡単に設定できます。

```typescript
  const tokyoTime = format({
    date: new Date(),
    format: 'YYYY-MM-DD HH:mm:ss',
    tz: 'Asia/Tokyo'
  }); // 2024-09-28 13:47:28
  const newYorkTime = format({
    date: new Date(),
    format: 'dddd, MMMM D, YYYY h:mm:ss a',
    tz: 'America/New_York'
  }); // 土曜日, 9 28, 2024 12:47:28 午前
```

### 豊富なヘルパー
Tempoは軽量でありながら、 日数の差分計算 や、 比較 など、ヘルパーも豊富です。

```typescript
  const diff = diffDays("2024-12-25", new Date());
  // 9/28 からの日数　→ 87
  const before = isBefore("2024-12-25", new Date());
  // 2024-12-25より前かどうか → true
```


## さいごに
・ドキュメントもかっこいいだけではなく、分かりやすく、直感的に操作でき学習コストも低めでした
・しばらくはTempoだけで十分そうです
・便利で使いやすいライブラリがたくさんあるので、どんどん使っていきたいと思います

## 参考

https://tempo.formkit.com/

参考にさせていただきました！ありがとうございます。

https://mebee.info/2022/11/13/post-85595/

https://zenn.dev/brachio_takumi/articles/2c7cd1b4c85320
Cloudflare×Next.jsで低コスト高パフォーマンスの個人サービスをリリースした話

## はじめに

今回は、CloudflareとNext.jsを使って個人サービス（https://techrecruitindex.com） を開発し、低コストで高パフォーマンスなWebサービスをリリースした経験を共有します。年間わずか1,716円（11.48ドル）で、Google PageSpeed Insightsでほぼ満点を獲得するサービスをリリースしました。

## リリースした個人サービスについて

IT企業の技術ブログと採用情報を一元化し、効率的に検索できるサービスです。
主な特徴は以下です。

- 500社以上のIT企業の情報を集約
- 技術ブログと採用ページへのクイックアクセス
- 企業名での検索機能

![](https://storage.googleapis.com/zenn-user-upload/e5a934befbac-20241020.gif)

ユーザーが興味のあるIT企業の技術ブログや採用HPへワンクリックでアクセスすることができます。

## 技術スタック
- Next.js(TypeScript)
- Tailwind CSS
- Cloudflare Pages
- GitHub

## 技術選定理由

個人サービスをリリースする上で、今回はパフォーマンスとコスト（金額的/時間的など）に着目して開発していきたいと考えていました。
その上で私は下記の理由で今回の技術スタックを選択しました。

1. **低コスト運用**: Cloudflare Pagesの無料枠で十分なホスティング機能を活用可能
2. **高速なパフォーマンス**: Next.jsの静的サイト生成（SSG）とCloudflareのCDNによる高速配信
3. **簡単なデプロイ**: GitHubとCloudflare Pagesの連携による自動デプロイ
4. **効率的な開発**: Next.jsの充実した機能とTailwind CSSによる効率的なUI開発

## パフォーマンスと運用コスト

結果として、以下のようなパフォーマンスと運用コストを達成しました。

### Google PageSpeed Insightsスコア

![](https://storage.googleapis.com/zenn-user-upload/7d4688d105b6-20241020.png)

### 年間運用コスト: 1,716円（11.48ドル）
- Cloudflare Pages: 無料
- ドメイン費用: 約1,716円（11.48ドル）/年（.comドメイン）

## まとめ

初めてCloudflare（Pages）を利用しましたが、個人的には非常に便利なサービスであると実感しました。
特に個人開発をする者にとっては大きなメリットがあるのではないでしょうか。
次はWorkersの方も利用してみたいと思います。

本記事をお読みいただきまして、ありがとうございました。
一か月掛けて完成しなかった自作プログラミング言語コンパイラが神ライブラリでやったら一瞬で完成しそうな件について

## きっかけ
自分はポケモンの動画を見て**任意コード実行**面白そうだな、と思いました。
しかしポケモンのコードがz80という機械語で、アセンブリ難しいな、と思いました。

そこで！自分で **新しく単純な機械語を作ろう！** と思いました。
とりあえず単純に作って、多分世界一なんじゃないかってぐらい単純なのが出来ました。

それでゲームを作ろうと思っていたので、C#でスペースで区切る**非常に単純なアセンブリ言語**に相当する言語を作りました。

それでも難しいです。もう非常に。単純を目指したせいで。
それで、**C言語に相当する言語**作りたい...と思いました。

それでgccのソース借りるか？と思って中を見たら地獄。ということで **自作**し始めました。
## 開発
2024年9月に新しいプログラミング言語のコンパイラを作り始めました。
> メモ：**Git**のコミットメッセージが適当なせいで開発開始時期を特定するのめっちゃ大変でした。
> 良い子のみんなは**コミットメッセージ**はちゃんとしようね！

空白文字だったら続けて、文字部分を保存して、...とめっちゃ構文解析コード書きました。
地獄の日々でした。毎月更新してたアプリの更新も忘れ、滅茶苦茶書きました。

## 停止

ところが突然、手が止まりました。難しすぎました。理由は以下です。
- IFの中の命令部分の移植が難しい
- 演算子の部分がむずい
- 例外への直面が怖い

その時我を思い出し、更新していなかったアプリを更新し、ゲームしました。
そしてこの言語をどうするか、没にしようか、そう考える日々...

## 構文解析ライブラリとの出会い

前にプログラミング言語つくる記事とかあったし、
なんかそういうライブラリねえかな...とネットサーフィン。
やっぱPythonとかかな～と思って検索すると...出会ってしまったのです。

**Larkに。**

PythonにLarkという構文解析ライブラリがありました。
他のライブラリはどうかな～と探した結果、Larkがベストでした。

Larkの記事を検索し始め、LarkのEBNF等を学び、これどうすればいいんだ？と試行錯誤。
すると、**一か月かかっても出来なかった構文解析が一日で終わってしまいました。**

まあ実際のアセンブリコードの生成は別ですけどね...

## 現状

今の進行状況は、構文解析だけは終わって、今はその結果に基づいてアセンブリコードを生成するコードを作っています。
そこまで複雑じゃないので一週間で出来るかな～って感じです。

## 結論

**複雑な処理は出来るだけライブラリに任せよう☆☆**
【react native】Google pixelで`Vibration.vibrate`が正常に動作しない(振動しない) 【振動フィードバック】

# はじめに
今回は、react native組み込みの`Vibration`が正常に動作しない時にチェックしたこと、および振動フィードバックについて書いていきたいと思います。

## 発生した現象
react native expoで開発をしている際、バイブレーションの機能を使用する必要があったので`Vibration.vibrate`を使用した。

手元でGoogle pixelとGalaxyでバイブレーションが動作することを確認したが、そのあとGoogle pixelで動作しないという報告を受けた。

## 調査した結果
主に以下2つの設定で、`Vibration`を用いたバイブレーションが動作しないことがわかった。

- バッテリーセーバーがONの時
- 触覚フィードバックがOFF(0)の時

今回の直接の原因は、2個目の「触覚フィードバックがOFF(0)」だったようです。(自分で見つけられなかったのでとても落ち込みました...)

### Androidにおける触覚フィードバックとは
触覚フィードバック(ハプティクスフィードバック)とは、ユーザーの操作による状態の遷移や重要なイベントなどが起きた時に振動を用いて知らせる機能です。

ゲーム機などで何かのアクションを起こしたときにコントローラーが振動するのは馴染み深いかと思いますが、それのスマホ版ということでしょうか。

Android Developersでは、触覚フィードバックのユースケースをいくつかあげています。
> - 注意が必要なイベントをユーザーに通知するため。
たとえば、電話の着信やテキスト メッセージ、カレンダー上の今後の会議などです。

> - ユーザーの操作後にデバイスの状態変化を確認する場合。 
たとえば、ボタンの押下に対するクリック フィードバック、スマートフォンのロック解除、指紋の承認または拒否、カメラの有効化などです。

> - エフェクトでユーザーを喜ばせるため。
このような効果により、進行中のユーザー操作を強化したり、物理的な操作をエミュレートしたりできます。たとえば、スクロール フィードバック、所定の位置にスナップするスライダー、アニメーション、サウンド、動画、ゲームと同期した触覚効果などがあります。

私が実装していたのは、2つ目の「ユーザーの操作後にデバイスの状態変化を確認する場合」に該当していました。

有効に使えばユーザーに対していい効果をもたらせそうです。

ただ、私個人としては過去にスマートフォンが結構な頻度で振動して、少しうざったく感じてしまい振動関連の設定をす
べて消してしまうことがあったので、私のような人ばかりではないとは思いますがここぞという場面で使用するのを検討した方がいいのかな、と思います。

## 触覚フィードバックがOFF(0)の時でもバイブレーションを強制するのは可能か？
結論から言うと、私はできませんでした。[react-native-haptic-feedback](https://www.npmjs.com/package/react-native-haptic-feedback)というライブラリを使用して試してみましたが、私の環境では振動させられませんでした。

触覚フィードバックがOFF(0)の時でもバイブレーションをさせられる方法を知っている方はコメントでご教授くださると嬉しいです🙇‍♂️

## おわりに
最後までお読みいただきありがとうございました。
今回の問題を通して、振動フィードバックという新たな知識を得られたので今後活かせる機会があれば活かしたいと思います！
【基本情報】独学マラソン CRM Day 20

過去の自分も他人である

:::note worn
この記事は自分用の備忘録です。
:::

![crm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/013379f5-094a-3284-b2e3-6d953725be28.png)

# 個人情報は漏洩するもの
という前提で考えるべき時代になってきているらしいので
顧客情報として何を管理されているのかを知ることは
セキュリティ意識を高めることにつながるはず

# CRM (Customer Relationship Management)とは
一回取引してさようなら
ではなく
長くお付き合いいたしましょうと
そういう手法やツールのお話

amazonで買い物したら「仲良くしましょ」というメールがいっぱい来るようになる
そんな時代


![スクリーンショット 2024-10-20 19.51.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/ff399ede-c9fb-7878-c288-f2d410c85501.png)


# CRMの基本機能
### 顧客情報の管理
名前やメールアドレスなどの基本情報だけではなく
購買履歴、問い合わせ履歴やその内容、キャンペーン応募状況、クーポン取得歴など細かな情報を管理
ECサイトだけじゃなくて、オフラインのイベントでもデータを取得したりする
集めた情報は、部門横断的に共有・活用できるのがCRMの強みらしい

### 会員サービス
パーソナライズ化するための土台
取引情報や閲覧情報から購買行動を把握し行動を分析したり
その結果からクーポンを配信するなど、再訪率・定期購入率を上げていくことが可能となる
会員登録をさせるのは、もはや当たり前の戦略なのだ

### マーケティング支援
集めた顧客情報を元に、One to Oneマーケティングが可能となる
One to Oneマーケティングとは、パーソナライズされたアプローチで満足度を高めるマーケティング手法
AIエージェントでますます加速していきそう

### 顧客分析
集めた顧客情報を分析して、どんどん活用する
マーケティング戦略だけじゃなくて
経営戦略を立てることも可能
ビッグデータを集めるために「無料で使えます！」とか「ポイントつきます！」とか
そういうのどんどん増えてきているね

### カスタマーサポート
アフターケアにおいて、対応スピードと質が企業収益の向上においてとても重要らしい
機械的に取得できるデータだけじゃなくて
問い合わせ内容も蓄積することで
質の高いカスタマーサポートの体制ができる

買った後の対応が悪かったら
もう二度と買わんし、辛辣な星1レビューをする
そういう友達がいるので
アフターケアは大切なんだなぁ

# 管理されているであろう顧客情報の一覧

### 基本的な個人情報
- 氏名（名前、姓）
- 年齢、生年月日
- 性別
- 住所
- 電話番号
- メールアドレス

### ビジネス情報（法人向けの場合）
- 会社名、部署名
- 役職
- 業界、業種
- 企業規模（従業員数、売上など）

### 行動履歴
- 購入履歴（商品名、購入日、購入回数、購入金額）
- 閲覧履歴（Webページの閲覧履歴、閲覧時間、アクセス頻度）
- キャンペーン応募履歴（参加回数、応募内容）
- カート放棄履歴（カートに入れたが購入しなかった商品など）
- クーポン取得・利用履歴
- メール開封・クリック履歴

### 取引・支払い情報
- 支払い方法（クレジットカード、銀行振込、電子マネーなど）
- 支払い履歴
- 購入頻度、購入周期
- 返品・返金履歴

### マーケティングデータ
- セグメント情報（年齢層、購買パターン、居住地域など）
- 広告・マーケティング施策への反応（広告クリック、アンケート回答など）
- リードステータス（見込み客、成約済みなど）

### カスタマーサポート情報
- 問い合わせ履歴（内容、対応状況、解決までの時間）
- サポートチャネルの利用状況（メール、電話、チャットなど）
- 顧客満足度（CSAT、NPSなど）

### アカウント・ログイン情報
- ログイン履歴
- ユーザーID、パスワード（暗号化）
- デバイス情報（PC、スマートフォン、タブレットなど）
- IPアドレス、位置情報

### ソーシャルメディア関連情報
- ソーシャルメディアのアカウント情報（Twitter、Facebookなど）
- SNSでのエンゲージメント（いいね、シェア、コメントなど）
- インフルエンサー情報（フォロワー数、エンゲージメント率）

### その他のデータ
- 調査・アンケートの回答内容
- ライフイベント情報（結婚、出産、転職など）
- 購入意図（購入理由、用途など）
- 会員ランク・ステータス（ゴールド、プラチナなど）
- 推奨度（他の顧客への推奨度、口コミ内容）

<br>

ネットでの行動は全て監視されていると考えた方が良さそう
恐ろしい時代になったものである

# おすすめCRMというものがあるらしい

https://www.zoho.com/jp/crm/

https://www.zendesk.co.jp/

https://kintone.cybozu.co.jp/

<br>

kintoneしか知らなかった

# 感想
情報がパーソナライズ化されてしまう時代だからこそ、違う属性の人とのつながりがより大事になっていく気がした。


# 参考

https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/crm_vol02/

https://www.itreview.jp/categories/crm