OmniAICreator/Qiita-1.07M huggingface dataset:
Power Apps Copilot answerパブリックプレビュー

2024/4/3にPower Appsキャンバスアプリの新しいコントロールがパブリックプレビューされたと発表されました。

https://powerapps.microsoft.com/ja-jp/blog/introducing-new-copilot-answer-control-public-preview/

「Copilot answer」というコントロールです。
生成AIの機能を使ったコントロールっぽいなという名前ですが、どんな動きをするのでしょうか？
また、この「Copilot answer」コントロールとは別で、もう一つ「Copilot」コントロールがもともとありましたが、こちらとの違いは何でしょうか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/610f4565-3f4e-61a5-2eec-7b3e9a1723eb.png)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/5d857555-1668-0a6e-bac4-3232dac881bc.png" width=50%>

今回、この記事に、Copilot answerの概要から触った様子をまとめてみました。

::: note

こちらの記事は投稿時点の情報です。
最新情報は公式ドキュメントMicrosoft Learnからご確認お願いいたします。
:::


# 概要
Copilot answerはワンクリックでAIからのインサイトを取得できるように、事前に定義されたプロンプトを設定できるコントロールです。
アプリの中で溜まったデータに対して、決まったAI分析をしたい場合があると思います。

例えば、「申請データの数を教えて」などよくある質問を保存しておいて「Summary」と名前を付けておきます。
アプリユーザー側では、以下の画像のように、「Summary」という名前が表示されて、紙飛行機ボタンをクリックするとこのデータの最新の情報（申請データの数）を取得することができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/12a643ad-20ad-717e-9ec5-3af54e5756fc.png)

::: note

Copilot answerを使うことで、AIとの深いやり取りをすることなく、よくある質問に対する回答をリアルタイムで得ることで、ユーザーはより早く洞察を得ることができ、日々の業務で生産性を高めることができます。
:::

# Copilotコントロールとの違い

もともとあったCopilotコントロールは**チャット形式**でアプリ内のデータに関するインサイトを得ることができるコントロールでした。

オリジナルの質問をして、より細かインサイトを得たいときにCopilotコントロールを使います。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/add-ai-copilot

https://qiita.com/skuramoto/items/b50751f4005c10854402#%E3%83%87%E3%83%BC%E3%82%BF%E7%B3%BB

# 触ってみた
こちら、現時点(2024/04/14)で、日本環境では触れなさそうでした。
以下はUS環境で触った結果です。
またブラウザーの設定を英語にするとうまく出てきました。
このあたりの挙動はアップデートされていくはずなので、触りながら確かめてみてください。

ブラウザにて、[...]>[設定]>[言語]>「英語」の[...]をクリックし、一番上に設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/5d5f512a-5de7-d073-a7bd-4039f3e0ebf8.png)

[+]>[Input]>[Copilot answer]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c59dc892-d8ab-2a44-9e86-2a173d7ab25b.png)


作成者がキャンバスアプリにコントロールを追加したら、まず検索対象を設定します。
[Data source]にデータソース（テーブル）をバインドし (現在は Dataverse のみがサポート)、[Fields]の[Edit]で、情報源の対象にする列を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/ebbd6901-ca00-b376-d1bb-8a3ea0458002.png)


次にタイトルと質問を入力する必要があります。
[Title]に、コントロールで表示したいタイトルを入れます。
[Question for Copilot]で質問を入力します。例えば、「データの要約をして」、「「Status」が"承認"のデータ件数は？」など入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/937bc15c-d353-cfcd-a1ed-110e11649796.png)

動きを確認してみます。
「「Status」が"承認"のデータ件数は？」と設定されたCoppilot answerのボタンを押すと、承認のデータ件数を数えて教えてくれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/3a7b64bf-df3d-3f88-52db-3f1cf358c796.png)

実際のデータを見ても正しく答えてくれていることがわかりますね(^▽^)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/fe81b6c4-8b4c-eeac-c881-77bf4c8d7840.png)


# まとめ
新しく発表されたCopilot answerコントロールについてまとめました。
どんどん生成AI機能が追加されてわくわくしますね！
Power AppsでCopilot answerやCopilotコントロールを使って、AI分析機能を備えたアプリをノーコードで作っちゃいましょう！


# 参考
https://powerapps.microsoft.com/ja-jp/blog/introducing-new-copilot-answer-control-public-preview/
セキュリティとアルゴリズム 

インターネットとセキュリティ
インターネットからデータをやり取りする場合、さまざまな経路をたどりデータの取引を行う。
データが運ばれる中、**悪意のあるユーザ**が管理する経路を探索することにより中身を盗聴される危険がある。

インターネットを安全に使うには、**セキュリティ対策**は必要不可欠である。

データをやり取りする際の4つの問題
以下の4つがある
1. 盗聴
1. なりすまし
1. 改ざん
1. 事後否認

上記の問題を解決するには**どのようなセキュリティがあるだろうか??**対応を見ていきたい。

| 問題       | 解決法              | 
| ---------- | ------------------| 
| 盗聴       | 暗号化              | 
| なりすまし | メッセージ認証コード       | 
| 改ざん     | デジタル署名          | 
| 事後容認   | デジタル署名          |
愛媛県のIT企業就活調査

# 自分の頭の整理用に記す
松山市を中心として調査したところ、天山を中心に企業が展開されている。
地方企業にホームページ、インフラの保守を中心とした会社がほとんどだ。
プロダクト開発やサービス展開はほとんどない。それらは経験者のみで探しているのがほとんど。
Wantedlyにも求人が少ない。
あくまで地域密着型で仕事をするということに重きをおいているようだ。
趣味と仕事が一緒になっているタイプの人は向かないと思う。
# 県外就職推奨
とにかく求めているスキルシートのばらつきと企業の数が少なすぎる上に業務でもローカルルールが多い。
密着型で良ければ愛媛県でやればいいと思う。
最先端の事をやりたいなら迷わず県外。
都心に行ってSES修行するか、県外進学で固めるが吉。
死ぬまでギークしたいのであれば県内就職は絶対やめたほうが良い。キャリアに傷がつく。
AWS公式が紹介している構成図描画ツール

# 目的
今まで我流でAWSの構成図を描いてきたのですが、フォーマルな資料でも通用する構成図を描けるようになりたいと考え、学び直した内容をこの記事に整理することにします。

# 結論
執筆時点でAWS公式サイトに記載されていた内容を、以下にまとめます。

#### 1.AWS構成図を作る時は、AWS公式が公開している[AWS アーキテクチャアイコン](https://aws.amazon.com/jp/architecture/icons/)の情報をインプットにする
AWS公式のアイコンセットに関する情報は以下サイトにまとめて記載されています。

- AWS アーキテクチャアイコン
https://aws.amazon.com/jp/architecture/icons/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518221/908f26f3-8045-c5b3-ca68-b49a44247e8b.png)

#### 2.Powerpointファイル形式でツールキットをダウンロードして使用する
1.のサイト内では、ダウンロード可能な形式でアイコンセットが提供されています。
Powerpointファイル形式とSketchファイル形式が選択できます。無難にPowerpointファイル形式を選ぶのが良さそうです。

### 3.描画ツールを使用できる環境では、埋め込みのAWS ダイアグラムツールを積極的に使用する
1.のサイト内では、サードパーティの描画ツールの中でAWS構成図を描くのに適したものをピックアップして紹介しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518221/90ec013b-6709-3d6a-4375-aad3f43edf2e.png)

その中にはAWSアイコンをローカルPCにダウンロードせず、描画ツール内で提供してくれているものもあるようです。実際の業務でも良く使用されいるツールであるDraw.ioやFigmaでAWS公式アイコンを使いやすいようにあらかじめ提供してくれているのはありがたいですね。
- [Draw.ioのAWSダイアグラムツール](https://app.diagrams.net/?splash=0&libs=aws4)
- [FigmaのAWSダイアグラムツール](https://www.figma.com/templates/aws-diagram-software/)

下の画像はDraw.ioのAWSダイアグラムツールのリンク先の画面です。左サイドバーにAWSアイコンを用意してくれているのが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518221/77d7d248-3831-02de-1752-3de02f981876.png)

下の画像のように検索窓から簡単に検索して使用できるようになっています。複数選択肢からその資料に適したものを選べるのは使い勝手が良さそうですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518221/8e108b52-fc83-b1ae-5da9-eb397d44d9af.png)

# 後書き
私事ですが2024年度にAWS認定資格12冠を取得しました。資格を取得できたこと自体は良かったのですが、それで晴れてAWSのプロフェッショナルの仲間入りができたかというと全くそのようなことは無く、第一線で活躍する他のエンジニアに比べて自分の考えがいかに浅く、知識量が少ないかを痛感しながら日々を過ごしています。

そのような状況で自分のような技術力の無いエンジニアにできることは、日々得られた知見をナレッジにまとめて、杭を打つように少しずつ着実に歩みを進めことです。ふぶく雪山を登る途中でせめて転げ落ちてしまわないよう、何本ものハーケンを固い岩肌に打ち付けロープをくくり、それをこの身に結んで命綱にしようと思います。(なんの話なんですかね笑)

そのような考えもあって、最近はAWS公式が公開している[CDK(Cloud Development Kit)](https://aws.amazon.com/jp/cdk/)サンプルプロジェクトを解説するような記事を執筆する活動をしています。解説の中でAWS構成図を描くことが多いので正しいお作法を整理するためにこの記事を執筆しました。

結論に記載した通り、AWS構成図を作成する時は、PowerpointやDraw.io、Figmaで作成するのが良さそうですね。今までは自己流でExcelを使っていましたが、今後は公式の一次情報に従い作り方を改めようと思います。

## (追記)PlantUMLを使ったAWS構成図を描く方法があるようです。
[PlantUMLによってコードベースでAWSのアーキテクチャー図を作る方法](https://qiita.com/munieru_jp/items/088dfc3e5e91b5ea17c3)
神記事ですね。自分も立派なナレッジを残せるように精進しようと思います。
docker ひさびさで先に進まぬ

並行システムの検証と実装 形式手法CSPに基づく高信頼並行システム開発入門 磯部祥尚 著
https://qiita.com/kaizen_nagoya/items/26306952534a7b713eca


ocaml-csp
Guedra
Guedra-draw
gtk+3

コンパイルするってことはGCCがいると想定

m2 macOS で docker を使っている。
<この項は書きかけです。順次追記します。>
This article is not completed. I will add some words in order.
# docker

```macOS:bash 
$ docker run -it gcc /bin/bash
```
docker
```debian:bash
# uname -o -r -v
6.4.16-linuxkit #1 SMP PREEMPT Sat Sep 23 13:36:48 UTC 2023 GNU/Linux
# apt update; apt -y upgrade
# apt update; apt -y upgrade
Get:1 http://deb.debian.org/debian bookworm InRelease [151 kB]
Get:2 http://deb.debian.org/debian bookworm-updates InRelease [55.4 kB]
Get:3 http://deb.debian.org/debian-security bookworm-security InRelease [48.0 kB]
Err:1 http://deb.debian.org/debian bookworm InRelease
  At least one invalid signature was encountered.
Err:2 http://deb.debian.org/debian bookworm-updates InRelease
  At least one invalid signature was encountered.
Err:3 http://deb.debian.org/debian-security bookworm-security InRelease
  At least one invalid signature was encountered.
Reading package lists... Done
W: GPG error: http://deb.debian.org/debian bookworm InRelease: At least one invalid signature was encountered.
E: The repository 'http://deb.debian.org/debian bookworm InRelease' is not signed.
N: Updating from such a repository can't be done securely, and is therefore disabled by default.
N: See apt-secure(8) manpage for repository creation and user configuration details.
W: GPG error: http://deb.debian.org/debian bookworm-updates InRelease: At least one invalid signature was encountered.
E: The repository 'http://deb.debian.org/debian bookworm-updates InRelease' is not signed.
N: Updating from such a repository can't be done securely, and is therefore disabled by default.
N: See apt-secure(8) manpage for repository creation and user configuration details.
W: GPG error: http://deb.debian.org/debian-security bookworm-security InRelease: At least one invalid signature was encountered.
E: The repository 'http://deb.debian.org/debian-security bookworm-security InRelease' is not signed.
N: Updating from such a repository can't be done securely, and is therefore disabled by default.
N: See apt-secure(8) manpage for repository creation and user configuration details.
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Calculating upgrade... Done
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
```

### uname
debianなのにubuntuって出るってどゆこと。

### apt update

####   At least one invalid signature was encountered.
Err:1 http://deb.debian.org/debian bookworm InRelease
  At least one invalid signature was encountered.

  
＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.


# 文書履歴(document history)
ver. 0.01 初稿 　20240314
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
アルゴリズム ~配列の探索~

表題の件についてまとめる

よく使う配列のアルゴリズムである。

<h3>線形探索</h3>
線形探索は、「配列からデータを探索する「アルゴリズム」。配列の前から順番にデータを検索する。
配列の中身はなんでも良いのですが、ここでは数値を例に説明。

該当の数値を6とする。
左側の数値と該当の数値を比較してm、**合致すれば**探索は終了する。
**合致しなければ、左→右へと数値を探索する**

<h3>2分探索</h3>
2分探索は、ソート順に並んでる配列に扱うことができるアルゴリズムである。

該当の数値を特定するために、まず2分割する。

探す該当領域が1/2になる。
該当の数値は小さい順に左から並んでるため、その都度数値を比較し該当数値がどこにあるのかを定めていく。

初めの1/2にする際も真ん中の数値が何番目であるか、を算出して比較していく

:::note
2分探索は配列がソートされていることを利用し、探索範囲を半分ぶつに減らしていく方法である。
探索するデータが**1個になった時に探索は終了する!**

元々あるデータnを半分ずつにするために Log2 N回繰り返せばデータは1個になる。
つまり、2分探索では「配列の真ん中の値と比較して、探索範囲を繰り返し半分にする操作」をlog2 N回繰り返せばデータを見つけることができる。

:::
minikubeでローカルで作成したイメージを使う。

# 導入
ローカル環境で、minikubeを使用している際、Docker Hubのようなコンテナイメージレジストリを使用せずに構築したいシチュエーションがありました。
調べながらやりましたが、苦戦したので備忘録的にメモを残しておこうと思います。

## やりたいこと
このようなマニュフェストで、myapp:latestのようなローカル環境で適当に作成したイメージを使用してdeploymentしたい。
```
apiVersion: apps/v1
kind: Deployment
metadata:
  name: go-web-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: go-web-app
  template:
    metadata:
      labels:
        app: go-web-app
    spec:
      containers:
        - name: go-web-app
          image: myapp:latest
          ports:
            - containerPort: 8080
```
だがしかし、現実はそううまくいかない...
```
user@shrimpTail:~/git_wsl/go_clean_architecture/k8s$ kubectl get pods --watch
NAME                          READY   STATUS         RESTARTS   AGE
go-web-app-6c7fbb6849-mkc9k   0/1     ErrImagePull   0          67s
go-web-app-6c7fbb6849-mkc9k   0/1     ImagePullBackOff   0          71s
go-web-app-6c7fbb6849-mkc9k   0/1     ErrImagePull       0          116s
```

## なぜなのか
minikube もといkubectlでdeploymentオプションを使用した際、おそらくリモート上のコンテナイメージレジストリからタグが一致するイメージを探すのがデフォルトになっている模様。
なので、マニュフェストにこの項目の追加が必要。
```
imagePullPolicy: IfNotPresent
```

修正後全体像
<details><summary>サンプルコード（open属性なし）</summary>

(上に空行が必要)

```yml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: go-web-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: go-web-app
  template:
    metadata:
      labels:
        app: go-web-app
    spec:
      containers:
        - name: go-web-app
          image: myapp:latest
          ports:
            - containerPort: 8080
          imagePullPolicy: IfNotPresent # 追加

```
</details>

### 実行コマンド
```
eval $(minikube docker-env)
docker build -f Dockerfile -t myapp:latest .
kubectl rollout restart deployment/go-web-app
```

# さいごに
後発者の参考になれば幸いです。
markdown

# 
- [GitHub markdown quickstart](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github)  
  - [github formatting](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)


- [gitlab markdown](https://docs.gitlab.com/ee/user/markdown.html#wiki-specific-markdown)
----------------
# 記法

## 見出し

```
# 見出し１
## 見出し２
### 見出し３
#### 見出し４
##### 見出し５
###### 見出し６
```

# 見出し１
## 見出し２
### 見出し３
#### 見出し４
##### 見出し５
###### 見出し６


## コード
````
`コード1`
```コード3```

```java
System.out.println("hello");
```

```sh
echo hello
```
````

`コード1`
```コード3```

```java
System.out.println("hello");
```

```sh
echo hello
```


## list
````
- oo
  - ooo
    - ooo

1. xx
2. xx
3. xx
   4. xx
      5. xx

- [ ] c
- [ ] cc
- [ ] ccc
  - [ ] cccc
    - [ ] ccccc
````

- oo
  - ooo
    - ooo

1. xx
2. xx
3. xx
   4. xx
      5. xx

- [ ] c
- [ ] cc
- [ ] ccc
  - [ ] cccc
    - [ ] ccccc


## mermaid
````
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
````

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
面白そうだからapacheにphpmyadminを入れてみる

# 初めに
apacheにphpMyAdminを入れたことがなかったので入れてみました。
そのやり方を解説します。

# 環境情報
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
phpMyAdmin 5.2.1

# 解説します

## とりあえずphpMyAdminを使えるようにする

rootでログイン

phpmyadminをインストール
```
# dnf install phpMyAdmin
```
phpMyAdminにアクセスできるように設定する

conf.dに移動
```
# cd /etc/httpd/conf.d/
```
phpMyAdmin.confのバックアップを取る
```
# cp phpMyAdmin.conf  phpMyAdmin.conf.old
```
phpMyAdmin.confを編集する
```
# vi phpMyAdmin.conf
```
```phpMyAdmin.conf
<Directory /usr/share/phpMyAdmin/>
 AddDefaultCharset UTF-8
    ↓を追加
   <IfModule mod_authz_core.c>
     # Apache 2.4
     Require all granted
   </IfModule>
   ここまで
</Directory>
```
設定を反映
```
# systemctl restart httpd
```
```
http://xxx.xxx.xxx.xxx/phpmyadmin
```
xxx.xxx.xxx.xxxここはお使いのipアドレスを入れてください
ログイン画面が出ればオッケーです

## セキュリティの対策
### URLの変更編
```
http://xxx.xxx.xxx.xxx/phpmyadmin 
```
のURLは悪い人たちに格好の餌食にされるので、
推測されにくいURLに変更していきます。

もう一度phpMyAdmin.confを編集する
```
# vi phpMyAdmin.conf
```
を叩いて
```phpMyAdmin.conf
#Alias /phpMyAdmin /usr/share/phpMyAdmin
#Alias /phpmyadmin /usr/share/phpMyAdmin
Alias /phpmyadmin~ /usr/share/phpMyAdmin
```
~のところは推測されにくいパスワードをくっつけといてください。
```
http://xxx.xxx.xxx.xxx/phpmyadmin~
```
でphpMyAdminにアクセスできます。
```
# systemctl restart httpd
```
でapacheを再起動します。

### SSL接続で通信を暗号化

http://~ではなくhttps://~でアクセスできるように設定していきます。

```
# dnf install mod_ssl
```
で
```
# systemctl restart httpd
```
これでSSLでアクセスできます。
```
https://xxx.xxx.xxx.xxx/phpmyadmin~
```
でアクセスしてみてください。
ここで警告が出ると思うので、この記事で対策をまとめています。
ぜひ設定してください！

もうhttp://xxx.xxx.xxx.xxx/phpmyadmin~
にアクセスする必要はないので接続できないように設定しておきましょう

```
cd /etc/httpd/conf.d/
```
```
vi phpMyAdmin.conf
```

```phpMyAdmin.conf
<Directory /usr/share/phpMyAdmin/>
   AddDefaultCharset UTF-8
   SSLRequireSSL
```
に変更してください

設定を反映します。

```
# systemctl restart httpd
```

### phpMyAdminの脆弱性の対応策

こまめにphpMyAdminをアップデートしておくことをおすすめします。
```
dnf update  --enablerepo=remi phpMyAdmin
```

# 最後に
公式のサイトを参考にやってみたのですが、少し情報が古いですが全然使えるのでとても良かったです。

# 参考文献

https://knowledge.sakura.ad.jp/9701/

とても参考になりました。
ありがとうございます！
AndroidStudioのプラグインを使用してjetpackComposeの実装を楽にする方法

AndroidStudioのプラグインを使用する事があまりなかったのですが、便利な機能があるので最近調べています。

AndroidStudioのプラグインを使用してJetpackComposeの実装を楽にするプラグインの紹介です。

# 要素を入力方法

プラグインの入れ方はこちらを参考にしてください。

https://qiita.com/yuta317/items/4599276d5b2e58250364

こちらを使用します

https://plugins.jetbrains.com/plugin/18323-compose-helper

# 使用方法

ComposeでwrapやComposableの削除を行うことができます。

Alt+Enter を押すと使用できます。

![スクリーンショット 2024-04-14 19.51.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/1041673c-9a45-69cb-6705-642c7559e6c4.png)

![スクリーンショット 2024-04-14 19.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/c0ea8aaf-7fbd-ca05-c20c-306987a11b37.png)

```.kt
@Composable
fun Sample() {
    Column(modifier = Modifier) {
        Box() {

        }
    }
}
```
このように作成されました。

`Modifier`がデフォルトで設定してあるが良いですね。
初代Raspberry Pi Type Bを起動してみた

## はじめに
約10年前（2014年に購入した）に購入したRaspberry Pi Type B 512MBを引っ張り出してきて、久々に起動してみたいなと思ったので、その備忘録を記載します。

## Raspberry Pi Type Bについて
Raspberry Pi Type Bは以下のようなスペックです。
|CPU|memory|USB|
|---|---|---|
|Broadcom BCM2835　700MHz  |512MB  |USB2.0: 2ポート|

せっかく購入したので、何かに使いたいと思い、これから試行錯誤したいと思います。このRaspberry Piは熱暴走しやすかったなと昔の記憶を思い出しました。

## 起動してみる
久々なのでどこに何を接続するのか？、どうやって起動するのかなどすっかり忘れています。Webで検索しながら少しずつ思い出してきました。
![DSC01140.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750854/a3c0a73a-b7c4-44bd-58ed-aabae4d4180a.jpeg)


まずはRaspberry Piにキーボード、マウスなどを取り付けてみて電源を入れてみます！
![DSC01146.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750854/fd225eb1-5e4f-21d3-868c-b97d7f7d62c3.jpeg)

あれ？PWR（Power）ランプは光るもののまったく反応がない。。。
よくよく考えてみると、Raspbian OSはSDカードからブートするので、SDカードを接続していないと何も動かないんでしたね・・。
SDカードを挿して電源を入れてみたところ、無事ログイン画面が表示されました！
![DSC01141.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750854/2ef02921-65df-eb2f-f0d3-7bff75ebb9b3.jpeg)

ユーザ名とパスワードを入力し、以下の画面で
![DSC01142.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750854/8ee00cd0-49f6-aec4-c88f-cca4947cb90f.jpeg)

`pi@raspberrypi ~ $ startx`

と入力してEnterを押下すると
![DSC01144.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750854/f07905f7-0370-7022-5c39-8d7185443e42.jpeg)

無事、起動することができました！
phpsandboxでlaravel breezeを練習（usersテーブル、ダミーデータの作成まで）

# 記事内容
　表題の通り。

　本記事はphpsandboxで仮想のプロジェクトを作って、
　factoryでusersテーブルにデータを差し込むところまで。

# 対象者

・laravel初学者
・ほかの言語でMVCで開発やっていて、laravelどんなものか知りたい人

# 前提知識

　laravelの基本とlaravel breeze。
　laravel breezeするとログイン機能に必要な一通りのファイルを作ってくれて実装自動でしてくれる。その詳細は各々で調べるということでお願いします

# なんで記事にした？
　docker使うのめんどいと思い。
　phpsandboxでの操作を探してみると、なかなか見つからない。

　sqlite使ったことない人は、もーしかしたらつまづくかもと思い記事にしました。
　
# 注意

　phpsandboxのテーブルの中身は、DBツール・phpmyadminで表示できません。
　CLIからの直接表示のみ。
　（方法もしかしたらあるかもですが、自分はまだ知りません。）

## 本編、手順

### ①phpsandboxで「laravel breeze(blade)」を選択、notebookを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/0dc6152c-0622-a4dc-5022-8cb2f1ec9fb8.png)




### ②「＋」ボタンでbashを開く（logsタブ、yarn devタブのずっと右側にあります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/560c66fa-ae51-2d02-8038-71025fc83cc4.png)


### ③テーブル作成

`php artisan migrate`を実行

### ④作成されたテーブルを確認
まず、sqliteのCLIに入るため下記コマンド実行。
database.sqliteファイルに作成されたテーブルを操作するため。
```bash.
sqlite3 database.sqlite
```


結果画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/8c4ff0a3-3e31-2a85-383e-8c93877548cf.png)

 次に、作成されたテーブルを確認するコマンド実行
```bash.
.tables 　　　//usersテーブルとその他ファイルがあるはず
```
結果画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/db58c2e6-95b7-4734-0099-d5c2105fd05c.png)


上記後、試しに`select * from users;`を実行すると、まだデータはない

### ⑤factoryでダミーデータを入れる

1. `.quit`でsqliteのCLIから抜けbashに戻る。
1. `User::factory()->count(10)->create();`を実行、
ダミーデータが挿入される。
※必要なfactoryはbreezeでデフォで作成されてます。
3. 再度 `sqlite3 database.sqlite` で、sqliteのCLIに入り、
`select * from users;`でデータが作成されていることを確認

結果画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/4300924f-5638-a48e-2f52-a77ed1d04e33.png)

以上。

次は、余力あったら、ログイン後の画面でユーザー一覧でも表示する記事書きます。たぶん。
CloudFormation-Fn::Select Fn::GetAZsのエラーについて

## 実現しようとしていたこと
CloudFormationでプライベートサブネットを作成する

## 使用したファイル（抜粋）
```yml
 SubnetPrivate1A:
    Type: AWS::EC2::Subnet
    Properties:
      CidrBlock: 10.0.1.0/24
      VpcId:
        Ref: sbcntrVpc
      AvailabilityZone: 
        Fn::Select: 
          - 0
          - Fn::GetAZs: ""            
      MapPublicIpOnLaunch: false
      Tags:
        - Key: Name
          Value: subnet-private-1a
        - Key: Type
          Value: Isolated
          
 SubnetPrivate1C:
    Type: AWS::EC2::Subnet
    Properties:
      CidrBlock: 10.0.2.0/24
      VpcId:
        Ref: sbcntrVpc
      AvailabilityZone: 
        Fn::Select: 
          - 1
          - Fn::GetAZs: ""
      MapPublicIpOnLaunch: false
      Tags:
        - Key: Name
          Value: subnet-private-1c
        - Key: Type
          Value: Isolated

```

## CloudFormation実行結果
 SubnetPrivate1Cの作成で以下のエラーが発生。
**Template error: Fn::Select cannot select nonexistent value at index 1**

## 結論
Fn::GetAZsを使用するにあたり、デフォルトVPCを残していたことが原因。
デフォルトVPCを削除してCloudFormationを実行したところ成功した。

## 詳細
[Fn::GetAZsの公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-getavailabilityzones.html) に以下の記載があった。
> デフォルト サブネットがあるアベイラビリティーゾーンがない場合を除き、Fn::GetAZs 関数はデフォルト サブネットがあるアベイラビリティーゾーンのみを返します。その場合、すべてのアベイラビリティーゾーンが返されます。

日本語の文章がイマイチなので理解しづらかったので、ざっくり言うと次の通り。
<dl>
 <dt>デフォルトVPCを残している場合</dt>
 <dd>デフォルトVPCのあるAZのみを返す</dd>
 <dt>デフォルトVPCを削除している場合</dt>
 <dd>VPC内のAZ全てを返す</dd>
</dl>

今回の希望は後者である「VPC内のAZ全てを返す」であった。
そのためデフォルトVPCを削除して、再実行したところ成功した。

### デフォルトVPC削除について　
デフォルトVPCはデフォルトルートの宛先がAny(0.0.0.0/0)となっており、そのまま使用するには危険性が高いとのこと。
また、再作成できるため使用予定が無ければ削除しておくのが無難。


## 参考
https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-select.html

https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-getavailabilityzones.html

https://zenn.dev/hassaku63/articles/11f005e42c701bf3b37f

https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/default-vpc.html#deleting-default-vpc

https://chikoblog.hatenablog.jp/entry/2019/12/05/185145
学習日記#2：カテゴリカル変数の数値変換

## ゴール
カテゴリカル変数の数値変換を実行する

## やったこと
- 使用するデータの絞り込み
    - `drop`メソッドで不要なカラムの削除
- One hot encoding
    - pandasの`pd.get_dummies`メソッドを使う
    - ↑の数値変換後に`pd.concat`メソッドを使って元のDataFrameと結合する
    - 数値変換前のカテゴリカル変数カラムは`drop`メソッドで削除
- Label encoding
    - pandasの`pd.get_dummies`を使う
    - 男女といった2値のカテゴリカル変数であれば`drop_first = True`で1つのカラムに絞る

## 注意点
- データを加工（結合、削除、変換など）するたびにData Frameを新しい変数に格納する（df1, df2, df3みたいな感じ

## 気になること
- 3値以上をとるカテゴリカル変数のラベルエンコーディングはどうやるんだろう。ワンホットエンコーディング一択なんだろうか？
- 加工後に新しい変数名で定義するのはわかるけど、このdfXXはどういう定義（加工）してたっけ？はコメントとかで対処するのがよいんだろうか？作成者の意図と実際のコードが間違ってるときにコメントで気づけるのがよいような印象

## 備忘録
全体の流れ
- [x] 目的・課題の特定
- [x] データの取得・収集
- [x] データ理解・データの可視化
- [x] データの加工・前処理 （←今回はココの最後）
- [ ] 機械学習モデルの作成
- [ ] 評価・テスト
- [ ] レポーティング or アプリケーション化


---
次回は加工したデータを実際に機械学習にかけて「生存するか否か」の予測を行う予定
*機械学習が中でどんなことやってるかの理屈は~~微積分やら線形代数ほか数学的あれこれはよくわからんので~~いろいろアウトプットしてみて後で学ぶスタンス
apacheにphpとmysqlを入れる

# 初めに
apacheにphpとmysqlを入れることができたので解説します。

#  環境情報
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6 
mysql  Ver 8.0.36 

# 解説
## phpの設定
rootユーザーでログイン

remiをインストール
```
# dnf install https://rpms.remirepo.net/enterprise/remi-release-9.rpm
```

エラー
```
Problem: conflicting requests
 - nothing provides epel-release = 9 
```
エラー解決
```
dnf repolist all | grep -i epel
```
でepelがなかったから入れ直した

```
 dnf install https://dl.fedoraproject.org/pub/epel/epel-release-latest-9.noarch.rpm -y
```

https://qiita.com/yamada-hakase/items/fdf9c276b9cae51b3633

この記事が参考になった。


モジュールのリセット
```
# dnf module reset php
```
php 8.3のダウンロード
```
# dnf module install php:remi-8.3
```
アップデートの確認
```
# dnf update
```
phpモジュールのインストール
```
# dnf install --enablerepo=remi php php-devel php-mbstring php-mysqlnd php-pdo php-gd
```
php.iniの編集
/etcに移動
```
# cd /etc
```
php.iniのバックアップを取る
```
# cp php.ini php.ini.old
```
php.ini編集
```
# vi php.ini
```
phpの容量を変更する
```
post_max_size = 8M
・・・
upload_max_filesize = 2M
```
を下に変更する

```
post_max_size = 128M
・・・
upload_max_filesize = 128M
```
に変更
vimで/を押してから項目名を押すと検索できます。
これだと早く検索できます。

mysqlのインストール

ここからどのバージョンをダウンロードすべきか確認できます。

https://dev.mysql.com/downloads/repo/yum/

![スクリーンショット 2024-04-14 11.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682713/82bb100b-b7e6-9ea9-fbc8-abcc6d467369.png)

```
# dnf install http://dev.mysql.com/get/~
```
~の部分に画像のオレンジのバーより上を貼り付けてください。
他のバージョンをダウンロードしたい場合は各項目の灰色の部分mysql80~の部分をコピぺしてください。

mysqlserverのインストール
```
# dnf install mysql-server
```
インストールできたか確認
```
# mysqld --version
```
でバージョンが確認できたからオッケーです。

Error: Transaction test error:
が出た場合うまくmysql-serverをインストールできていないので、エラー文通りに
```
dnf clean package
```
をしてみてください。

それでも無理なら
```
dnf list | grep mysql
```
でmysqlに関するパッケージを削除していってください。

mysql80-community-release.noarch


サーバー起動と同時に起動する
```
# systemctl enable mysqld
```
mysql起動
```
# systemctl start mysqld
```
mysqlの初期設定
```
# mysqld  --initialize-insecure
```
```
# mysql_secure_installation
```
で初期パスワードを設定してください。

rootユーザーでログイン
```
# mysql -u root -p
```

サーバーのipアドレスに接続できるユーザーの作成
```
mysql> CREATE USER ユーザー名@サーバーのipアドレス IDENTIFIED BY 'パスワード';
```

変更を反映
```
mysql> flush privileges;
```
これでこれでphpとmysqlの設定が終わりました。
おつかれさまでした。
# 最後に
色々インストールしていたら容量が足りなくなったのでswapファイルを作成することになりました。


# 参考文献

https://blog.remirepo.net/pages/Config-en

https://knowledge.sakura.ad.jp/9006/

https://qiita.com/tinto/items/4459bab6c6eba9916b92


https://qiita.com/taptappun/items/fc6729425d330ac5f207

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

 業務でバックエンドのDB周りを修正したときにusing Dapperを追加する必要があったので調べてみました。

 ## Dapperとは
 .NETプラットフォーム用の軽量なオブジェクト関係マッピング(ORM)ライブラリ
Stack Overflowチームによって開発されたらしい
一言で言うと、プログラム上でデータベース操作を簡単に行うためのライブラリ
特徴
* SQLクエリの実行
* 結果セットのマッピング
* パラメータの処理
加えて、クエリの結果をPOCO（Plain Old CLR Object）に直接マッピングし、LINQやEntity FrameworkなどのフルORMよりもシンプルで高速なデータアクセスができる

 :::note info
ORMとは
Object-Relational Mappingの略で、オブジェクト指向のドメインモデルとリレーショナルデータベースの間のマッピングを行うための技術
開発者はデータベースの詳細を意識せずにオブジェクト指向のコードでデータ操作を行える
:::

 :::note info
POCOとは
特別なクラスやインターフェイスの継承／実装を行っていないプレーンな.NETクラス（のオブジェクト）のこと
:::
ドキュメントの翻訳にコントリビューションしてみた(Zabbix、Pontoon)

Zabbix及びそのドキュメントは英語で作られているのですが、有志による翻訳の場が設けられており、それが多言語対応として公開されています。
おかげさまで日本語でZabbixを利用できているのですが、ドキュメントの方は翻訳されてない部分が多く、結局英語を読まなければならない状態となっています。
機械翻訳を活用すればいい、とはいえ本当に正しいのか結局原文をあたりつつの読解は中々煩わしく…。
またこの翻訳ですが、案外参加のハードルは低く、しかしながら日本語翻訳者は大変少ないことがわかったので、日本語版翻訳活性化の願いをこめて記事を執筆することといたしました。

## 翻訳参加方法
こちらのドキュメントに参加方法や翻訳ルールが書いてあります。

https://www.zabbix.com/documentation/guidelines/en/translator_guidelines

### Pontoon？
こちらが翻訳するためのサイトです。

https://translate.zabbix.com/ja/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191592/363c0b05-6fa9-411a-8dd9-b246684c086e.png)

Pontoonというmozillaのローカライゼーションツールを利用しているようです。
翻訳者登録が必要ですので、"Apply now"から必要項目を記載し送信しましょう。
しばらく待つと登録完了メールが届きます。

### 使い方
まずチュートリアルが案内されますので、それに取り組み操作方法を把握します。
チュートリアルも翻訳の投稿ができますが、律儀に投稿する必要はないです。

チュートリアルが終わりましたら以下のような画面からプロジェクトを選び、リソースを選びます。
ドキュメントのリソースはページファイルですので、URLを参考に選ぶと良いでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191592/acfd40a4-e5d3-53bb-32cd-a14d373c347b.png)

翻訳の画面はこのようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191592/daeef8a9-7012-5d74-fe81-fb79afef6112.png)
左のリストにはページ内のテキストをさらに区切ったものが表示されています。
リストの緑や灰色の四角は翻訳状況で、緑色は翻訳完了したものです。
左のリストから選びましたら、真ん中の画面で翻訳を入力し投稿します。
そして右側には機械翻訳など手助け用の情報が載っています。
そう、機械翻訳でも良いのです。気楽に投稿しましょう。

投稿してから数分~数日で反映されます。気長に待ちましょう。

## やってみて良かったこと
単純に英語ドキュメントを読む能力の向上に良いと思いました。
普段は必要な情報を得るために乗り越えるべき障害でしかなく、機械翻訳に問題がなさそうと思えば原文を確認しないこともよくあります。
それで何か誤りを踏むことも稀にあるので、本当に良くないのですが、時間をかけないと読めない英語と普段から戦うのはどうしても厳しく…。

またこれは残念な話でもあるのですが、Zabbixの日本語版ドキュメントの信頼性の低さがわかりました。
- 誰でも翻訳でき、レビューが無い、そもそも人が居ない
一通り翻訳されることを主眼に置いた戦略なのでしょうが、翻訳者の能力に制限などなく、他者のレビューも経ずに翻訳公開できます。
修正も簡単に行えますが、そもそも日本語翻訳者自体が少なく、レビューも修正も期待できません。

- まだ翻訳が無く原文ママのはずなのに、英語版ドキュメント(原文)と相違がある
恐らくですが、英語版のドキュメントが更新されたときに、その更新が反映されてないと思われます。
翻訳された後に原文が更新されて翻訳は古い内容のまま…は仕方なしとも思うのですが、日本語ドキュメントを表示しているけれど英語だから原文だろうと思っていると罠を踏む可能性があります。

日本語版ドキュメントが改善されることが一番ですが、現状では英語が読めるならは英語版ドキュメントを読むことをお勧めいたします。

## あとがき
現在日本語の翻訳者は大変少なく、わずか数人に支えられている状態で、当然に翻訳は未完となっております。
翻訳の貢献量に応じてちょっとした褒賞ももらえますので、皆様どうぞよろしくお願いいたします。

私はリュックサックを狙っていますが、2000行、中々遠そうです。
【RotorHazard】Raspberry Pi OS インストール直後の初期設定とインターフェイス設定

# 16. Raspberry Pi OSを起動して画面を拝む！

この記事はFPVドローン ラップ計測システム【RotorHazard】をRaspberry Piで作成するにあたってのTipsをまとめたものです。ですが一般的なラズパイ構築方法としても参考になるかと思いますので、ぜひご活用ください。

### 16-1. 最初、初期設定をしますよ～。

前回、Raspberry Pi Imagerを用いて、OSイメージをmicroSDに書き込みしました。それをラズパイ本体のSDスロットに挿入して電源投入、起動します。

① 一番最初の初期状態は日本語表示にはなっていませんので、一番最初に見やすいように日本語表示に切り替えましょう。スタート(Piマーク) → 設定(Preferences) → **Raspberry Pi Configuration** を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/1f432637-30d7-1cf5-720b-c76a090c7f2c.png)


② 詳細設定、確認が必要なのでそれぞれにご説明。
**Locale** を選択し **Language: ja (Japanese)**、 **Character Set: UTF-8** を選択します。他のシステムとの兼ね合いでEUCを選ぶ場合もあるかと思いますが、RotorHazardシステムの場合はUTF-8の方が都合良いかと思いますー。
**Keyboard** に関しては下記のように選択してください。実際にはPC毎に個別選択もあるかもしれませんが、まあとりあえずｗ 日本語109キーボードは **Japanese (OADG 109A)** を選択します。
**Wireless LAN Country** は、みんな大好き日本の電波法の兼ね合いの話。ソフト的に電波調整が施されているような場合はこのパラメータを見に来る場合がありますので、日本在住の方は **JP Japan** を選択しておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/8ebe55d9-6a7b-fd42-e70e-758e119d9011.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/d1135bc2-92f0-357d-cfce-3a84d3661c86.png)

最後に **リブート(再起動)** を聞いてきますので、素直に再起動しましょう。

③ 多分、最初にImagerにて無線LAN設定を施した方は、この時点でインターネット接続ができている方が多いのではないかと思います。(PROXY設定等が必要なヒトは…ワイのこんな指南書を見てゴニョゴニョなんてしてないでしょうしｗｗｗ) しばらくしますと、下記画像のように右上部に **Show Updates**、**install Updates** なんて表示がされているのでは？と思います。こちらに関しては適用して再起動をチャッチャとやってしまいましょうｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/2d180902-0129-19e0-7390-381340d76a6b.png)

④ 再び画面を確認します。多分そこまで？頻繁にShow Updatesをチェックして再起動ということはないとは思いますが、再起動したら一度確認ください。そして、その流れで再度ラズパイ設定をもう一度見ていきます。

**スタート(Piマーク) → 設定(Preferences) → Raspberry Pi の設定** をクリックします。

**インターフェイス** タブを選択し、下記のようにチェックを入れてください。この組み合わせはRotorHazardで使用するインターフェイスになります。(詳しくは下記Software Setup.mdをご覧ください)

https://github.com/RotorHazard/RotorHazard/blob/main/doc/Software%20Setup.md#2-configure-interface-options

- SSH (チェック)
- VNC (チェック)
- SPI (チェック)
- I2C (チェック)
- シリアルポート (チェック)
- シリアルコンソール (チェック外す)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/3a34a8c6-abf2-0f91-fb37-040ee01bd524.png)

そして OK を押し、再起動を聞いてきますので **【 はい 】** としましょう。

ラズパイ構築編のつづきはこちら

https://qiita.com/tmac116/items/abaa509ac139c908c474?1
【React】アリババが開発してる便利hooksライブラリ「ahooks」のuseAsyncEffectを試してみた

## 概要
Alibaba Cloudでお馴染みのアリババが、Reactの便利hooksライブラリ`ahooks`を開発しているのを発見しました。[ドキュメント](https://ahooks.js.org/hooks/use-request/index)で紹介されている通り、かなりの数の便利hooksが用意されていて使えそうなのがある印象です。
今回はこの中で「useAsyncEffect」を試してみました。

## useAsyncEffectについて
useEffectの中で非同期処理を呼ぼうとすると[useEffectに非同期関数を設定する方法](https://zenn.dev/syu/articles/b97fb155137d1f)の記事にあるように、関数内で非同期関数を実行する必要があります。もちろんこの実装でも良いのですが、ahooksの[useAsyncEffect](https://ahooks.js.org/hooks/use-async-effect)を使用すると非同期関数をそのまま設定できます。

## 前提
* 使用したahooksのバージョンは`3.7.11`です。

## 実装サンプル
実装サンプルとして、localStorageで管理している認証トークンが変わったら、非同期処理が走るような実装を`useAsyncEffect`を使用して以下の通り書いてみました。

```react
export function AuthProvider({ children }: React.PropsWithChildren) {
  // 以下は独自で作成したhooks
  const { authToken, removeAuthToken } = useAuthTokenLocalStorage();
  const { setAuthInfo } = useAuthManagement();
  const { getUser, loading } = useGetUserLazyQuery();

  // ahooksのuseAsyncEffect
  useAsyncEffect(async () => {
    if (authToken) {
	  // 非同期処理
      const response = await getUser(authToken);
      if (response.data?.user) {
        setAuthInfo(response.data.user);
      } else {
        removeAuthToken();
      }
    }
  }, [authToken]);

  return (
    <>
      {!loading && children}
      {loading && <LoadingSpinner />}
    </>
  );
}
```
Windows を１分でも早く操作するためのツール達


# Windows を１分でも早く操作するためのツール

## はじめに

新しい職場に入り、職場の PC が Mac から Windows を使うことになりました。そこで、Windows を使う際に便利なツールを整理しました。

## 効率化ツール

### [PowerToys](https://github.com/microsoft/PowerToys)

多機能なユーティリティツールです。利用頻度の高いものだけ紹介します。

- PowerToys Run  
  Alfred のようなランチャー機能です。恐らくもっとも使用頻度の高い機能になります。ファイル検索、アプリケーションの起動、コマンドの実行、web 検索などができます。
- Alaways on Top  
  画面の最上位にウィンドウを固定します。議事録を取りながら画面共有する際に便利です。また、チートシートを見ながら作業する際にもよく使います。「トリミングとロック」を使うと、画面の一部だけを固定できます。
- FancyZone  
  ウィンドウを画面の特定の位置に配置します。作業効率を上げるために、ウィンドウ群のレイアウトを保存しておくことができます。

### [AutoHotkey](https://www.autohotkey.com/docs/v2/)

キーボードショートカットを自動化するためのツールです。キーボードショートカットを自動化することで、作業効率を上げることができます。

- ショートカットキーの変更
- 特定のアプリケーションでのみショートカットキーを有効にする
  - よく F1 キーを変更することが多いです
- マウスジェスチャーの設定
- テキストの自動入力

### Ditto/Windows 標準のクリップボードツール

クリップボードの履歴を保存できます。複数のコピー履歴を保存することができるため、コピー＆ペーストの作業効率を上げることができます。画面共有でうっかりクリップボードの履歴が共有してしまうことがあるので、注意が必要です。

- クリップボードの履歴を保存
- クリップボードの履歴を検索

### Vimium（Chrome 拡張機能）

ブラウザの操作をキーボードで行うことができます。キーボードショートカットを使って、ブラウザの操作を行うことができます。

- キー操作によるブラウザの操作
- タブの検索、移動
- ブックマークの検索

## ちょっとニッチなツール

### PowerAutomate for Desktop

マウスやキーボードの操作を自動化するためのツールです。Python や AutoHotKey を使うほどでもない、ちょっとした自動化を行う際に使います。また、グローバルショートカットキーを割り当てることができるのが良いです。ただ、コード管理ができないかったり、開発体験が悪いため、複雑な自動化には他のツールを使うことをオススメします。

### Nushell

コマンドラインシェルです。コマンドラインの操作を効率化するために使います。履歴機能やパイプライン機能が充実しているため、コマンドラインの操作を効率化できます。ただ、周りに使っている人少ないのが寂しいところです。open コマンドで Excel ファイルを Excel を使用することなくコンソール上に表示することができるので、重宝しています。

## まとめ

Windows を使う際に効率化を目的とした汎用的なツールを紹介しました。個人的に業務を行っている際は常に 1 分でも早く作業を終わらせるために、どうすればよいか日々思案しています。ツールの個々の学習コスト・作業効率へのインパクトを考慮しながら、自分にあったツールを使用することが重要だと感じています。
難しいコードレビューの代わりにペアプロしません？

# はじめに

おはようございます。Watanabe Jin(@Sicut_study)です。
私の会社ではペアプロですべての開発を行っています。そこでよくペアプロを知らない人に話すとコードレビューがないということに驚かれます。

そこで話している中で新しい気づきがあったのでその関係について話していきます。

# 毎朝5分で読める

朝5分で読めるシリーズは平日7時にエンジニアの方に気づきが与えられるような記事を投稿しています。

よければ@Sicut_studyのフォローを宜しくおねがいします！

また**スタエフ**でも毎朝6時58分にお話をしているので、耳で学習したい方はこちらもお願いします！

こちらでも同じ内容を5分で聞いて学べます👇

https://stand.fm/episodes/660f6d8bd91d77460f242445

# 価値のあるコードレビューは難しい

コードレビューとひとえにいっても色々やり方があると思います。
そんなコードレビューについて以下の書籍から新しい気づきを得られました(読んだ方から聞いた話なので少し書籍とブレはあるかもしれません)

https://www.oreilly.co.jp//books/9784814400416/

『Ghost of Tsushima (ゴースト・オブ・ツシマ) 』を作っている会社ではリアル出社を進めています。

そしてコードレビューをする人というのがプロジェクトごとに決まっていません。
コードレビューを受ける場合はオフィスの誰かを捕まえてレビューをしてもらうそうです。

みなさんの会社でやっているコードレビューと近いでしょうか？
私の前職はプロジェクトの一番できる人がレビューをしてくれるようなサイクルで回っていました。また、出社というのもありませんでした。

今回はこのようにする理由について話した後に、ペア・プログラミングとの関係を話していきます。

# なぜ出社をして人を探すのか

そもそもコードレビューの考え方が違うということに気づきました。

**コードレビューは書いたコードの直すべきところを指摘してもらって直す**

そういうものではなく、

<font color="red">**コードレビューを通して、レビューアーの経験やノウハウ、考えなどを学ぶ機会を得る**</font>

こう考えられます。つまり同じ人からレビューを受けるのではなく、多くの人にレビューをすることで多くの知見を得られる機会を作り出していきます。

また、リアルに声をかけることでより詳しく教えてもらえるのでコミュニケーション面でも得になります。

このような関係を多くの人と作れれば、困ったときにも頼れる人が多くなりますし、気軽に質問しやすい環境もできるかと思います。

# ペアプロと同じじゃん！

ここまでの話をきいて思いました。

<font color="red">**ペア・プログラミングとまったく考え方が同じだ**</font>

私たちの会社ではペア・プログラミング(ペアプロ)をチームの中で回しており、1,2時間程度でペアのチェンジを行います。

ここでエキスパートとペアになったり、初心者とペアになったりします。
エキスパートの考え方や技術を学び、私の経験を初心者に伝えるそんな機会になり、ものすごい成長ができる仕組みになっています。

これ、先程のよいとされるコードレビューと似ていませんか？
ペアチェンジをすることで色々な人にコーディングをしながらその場でレビューしてもらうような状況を作り出しています。また、ペアプロは2人で開発するためコミュニケーションもとることになります。

いままで、「ペアプロでコードレビューはなくなる」と漠然に考えていましたが、その理由がしっかりと理解することができました！！！

# おわりに

私はペアプロがやはり好きだなと思いました。
どちらも経験しましたが、コードレビューは早く通ってほしいなと毎度思ってしまいます。なのでそういう工程を最後に持っていかずに途中でやれるのは心的にも楽です。

ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

https://qiita.com/Sicut_study

また明日の記事でお会いしましょう！

![jisou-lp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/bfeb082c-62aa-0ad5-92d1-d940ed4d5873.png)


# おすすめ記事

https://qiita.com/Sicut_study/items/c32dc28b96ed96aed4f0

https://qiita.com/Sicut_study/items/2318952ecfdddefd384c

https://qiita.com/Sicut_study/items/fa92e0b4a57422fac77d

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇

https://projisou.jp

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ stand.fm
https://stand.fm/channels/65db27e353b400abe28ec29a
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA

■ プログラミングコーチングJISOU
https://projisou.jp
■ 体験で学ぶ！JISOU
https://experience-learn.connpass.com/
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com
Aurora3系バージョンアップに惜敗した話

# 環境
- Auroraバージョン
    - 移行前：2.11.3（MySQL5.7互換）
    - 移行後：3.03.2（MySQL8.0.26互換）
- 接続元
    - embulk
    - Spring boot

# バージョンアップ後に発生した事象
上記の通りバージョンアップした結果、embulkを用いたバッチ処理にて以下のエラーが発生していました。
```
[ERROR] [MY-013132] [Server] The table '/rdsdbdata/tmp/#sql3612_187cb_0' is full! (handler.cc:4380)
```
結論から言うと、原因は一時テーブルに使われる領域がAuroraの仕様変更によって小さくなり、大量データを持つテーブルに対して全件取得する際に、容量不足が起きていました。リーダーインスタンスのみで発生する限定的な事象です。

# 対処方法
親切なことに公式ドキュメントにきちんと対応方法が記載されています。これ通りに容量を増やしたら無事に解消しました。

https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/ams3-temptable-behavior.html#ams3-temptable-behavior-mitigate

# アプリ側は問題が起きなかった
幸いなことに、今回発生した事象はデータ分析用基盤にデータを送るバッチ処理のため、影響はありませんでした。

アプリ側は入念に行なったMySQLの変更点の影響調査と検証、高負荷試験が功を奏して、何事もなくアップデートができました。

Auroraバージョンアップは何かとトラブルが起きやすいと聞いていたので、結果的にアプリの性能問題やバグ発生がなかったのは不幸中の幸いです。

# 失敗から学ぶ
反省すべき点は、Aurora側の変更点のドキュメントにきちんと目を通していなかったことです。

MySQL8.0側の変更点はすべて確認していましたが、Aurora側のドキュメントは関係ありそうな部分のみを探して読んでいました。

このプロセスの問題点は、見落とした仕様変更が原因でアプリ障害になりかねないことです。アプリ側では高負荷試験を実施していたから大丈夫と思っていましたが、テストは100%の保証を担保するのもではないです。
なぜなら、テストはあくまで、影響調査で立てた仮説を検証するものと捉えるべきだからです。

改めて、事前調査の大切さを実感しました。今回は大きな問題になることはなくてよかったですが、良くなかった点は真摯に受け止めて、二の舞を踏まないようにしたいです。
【RotorHazard】Raspberry Pi 3BにPi OS(bookworm,64-bit)をインストール

# 15. Raspberry Pi Imagerを使ってぶち込み！
※最初、Legacy版となるbullseyeで構築していました。(ラズパイ3Bの場合、選ぶことができなかったため) ですが、4月末に気付いたらRaspberry Pi 3Bでも **bookworm,64-bit** が選べるようになっていました。そのため少し修正をしていきたいと思います。(/boot/config.txt ⇒ /boot/firmware/config.txt などの変化点なども意識して変更します。

～～～～～

この記事はFPVドローン ラップ計測システム【RotorHazard】をRaspberry Piで作成するにあたってのTipsをまとめたものです。ですが一般的なラズパイ構築方法としても参考になるかと思いますので、ぜひご活用ください。

### 15-1. ラズパイ、今は凄く簡単にぃー！

2024年4月、既にラズパイなブーム？は過ぎちゃったかもしれませんが、専用OSであるRaspberry Pi OSをmicroSDカードに書き込んで起動するという流れは、非常に簡単となっています。公式のサイトに行って **Paspberry Pi Imager** をダウンロード、PCにインストールし、そこでmicroSDに書きこめば良いだけ。さっそくやってみましょう。

① Raspberry Pi公式ページに行き、下記から **Raspberry Pi Imager** をダウンロードします。2024年4月時点のバージョンは **Ver 1.8.5** でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/0adf67c0-9279-deea-1625-4490dbca98a4.png)

https://www.raspberrypi.com/software/

② ダウンロードしたインストーラでご自分のPCにインストールしてください。私はWindows版でインストールをしましたが、そこはお好みでー。その後、この時点でインストールしたいmicroSDカードを、カードリーダ経由で挿しておいてからImagerを起動してください。インストールした **Imager** を起動すると、下記のようなポップアップが表示されるものと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/57b1f93c-db53-aea1-c11e-386afdc28020.png)

③ Raspberry Piデバイスは、今回私は **3B** になります。これはお手元のデバイスをご確認ください。またOSはいっぱいありますが、64ビット通常版(通称デスクトップ版)を入れる事としました。下記メニューでは **Paspberry Pi OS (64-bit)** になります。Fullはおすすめソフトてんこ盛りバージョン、LiteはGUIなしのコンソールのみのバージョンで、初心者さんはハードル高いかもしれませんので、まあ間を取って通常版ってところでしょうか？microSDカードの容量が16GBしか用意できていないのもありますけどねー。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/cc412dec-dea7-3a3f-2086-1fb0461b7084.png)

④ ストレージは、先ほど事前に挿入しておいたmicroSDデバイスを選んでください。ここで選択できない場合は正常に認識していないので、一度Imagerソフトを落としてmicroSDを認識、挿しなおしてから起動し直してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/b23b33ec-4f42-a31c-aba5-2bf52cce1972.png)

⑤ **次へ** で進むと下記のようなメッセージが表示されます。適切なものを選んで進めてください。一度Imangerを設定すると、オプション情報等を覚えているため **設定を編集する** を選んでパラメータを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/548d0ff3-30fe-e1ef-a338-4895d420b8ae.png)

⑥ カスタマイズ設定を選ぶと、下記のように事前に自分仕様のパラメータを埋め込んでOSイメージを焼き焼きすることができます。ですのでチャチャっとぶち込みましょう。それぞれの情報はこんな感じ。RotorHazard特有なところで言いますと、ユーザは **【 pi 】** をまずは作成しておいていただけた方が何かと都合良いかと思います。(デフォルトユーザとして何かと出てくるシチュエーションあるため) SSH等は別PCからTeraTerm等を用いて接続することもあるでしょうから、ここもぜひ有効化を。この時点ではパスワード認証でのログインを許可しますが、後でご自身で鍵認証等の設定を別のLinux系指南書サイトを参考にしながらやってみてくださいねん。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/8cd69d13-b52f-a9d1-1d37-61845f22a6ef.png)

⑦ 最後に書き込む前の警告確認がありますが、microSDの中身に問題なければ **【 はい 】** を選んでOSイメージをぶち込んでください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/a8292d76-cca8-1d7d-ebbe-96af7dada25a.png)

⑧ メディアの状況によって、書き込みの時間は様々です。Fullを選べば当然容量大きいので長いですｗ まあ30分ぐらいはゆっくり眺めましょう。書き込み終了すれば下記のようにポップアップされますので、microSDを引き抜いて、ラズパイ本体に入れて起動してみましょう…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/066c0237-56ba-8578-9de1-7f62da22704c.png)
※上記画像はLegacy, 64-bitと記載されていますが古いスクショなので細かい事は気にせずｗ

ラズパイ構築編のつづきはこちら

https://qiita.com/tmac116/items/157c1cce85aa3d2498a5?1
Windows　インストール方法

## 概要
今回4TBのSSDをOS用として使用を試みたが，種々問題が起こり，その解決のため半日費やした．
自身の備忘録として以下に記す．

## 注意点
**1. BIOSの設定はUEFI起動に設定しておく**
    → GPT形式（2TB）以上を対象にするとき効果的

**2. OS用に使用したいHDD/SSD以外は接続しない**
    → 当初，他のHDDも接続した状態でインストールしたら，システムファイルなどがHDD側に作成されてしまった

**3. MBR形式でインストールしてしまった場合には，GPT形式に変換したのち，ボリュームを拡張**
    → 拡張したいパーテションの後ろに，連続して未割り当て領域や空き領域が必要であり，その解決にはフリーソフト『EaseUS Partition Master』が有効


## 参照サイト
・[GPTパーティションにWindows 11/10をインストールする方法 [2024更新]](https://jp.easeus.com/partition-manager/install-windows-10-on-gpt-partition.html)
・[WindowsのシステムドライブをMBRからGPTに変換する方法【データ保持も】](https://itojisan.xyz/settings/26822/)
・[Windowsでボリュームを拡張できない場合の対処法](https://jp.easeus.com/partition-manager/cannot-extend-volume.html)
→ [Free版ダウンロードサイト](https://jp.easeus.com/partition-manager-software/free.html)
Free版でない場合，プロダクトキーを求められるためFree版である必要有り
var宣言の時代は終わった

## JavaScriptにおけるvar宣言の非推奨理由とスコープの解説
JavaScriptでの変数宣言にはvar、let、constがありますが、それぞれのスコープの違いによってプログラムの挙動が大きく変わることがあります。ここでは、それぞれのスコープの特徴とvar宣言が非推奨とされる理由について解説します。

## 関数スコープとブロックスコープ
関数スコープの例
関数内で定義された変数はその関数内部からのみアクセス可能です。

```js
function testFunction() {
  let localVar = 0;
  console.log(localVar); // 出力: 0
}

testFunction();
console.log(localVar); // Uncaught ReferenceError: localVar is not defined
```

この例では、localVarは関数testFunctionの内部で定義されており、関数の外からはアクセスできません。

## ブロックスコープ
letまたはconstを使用した変数は、定義されたブロック（{}で囲まれた範囲）内でのみ有効です。
```js
{
  let blockVar = 1;
  console.log(blockVar); // 出力: 1
}

console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
```
ブロック外からblockVarにアクセスしようとするとエラーが発生します。

## varとブロックスコープ
varを使用すると、ブロックスコープが適用されず、ブロック外からも変数にアクセスできるため、意図しない挙動を引き起こす可能性があります。
```js
{
  var globalVar = 1;
}

console.log(globalVar); // 出力: 1
```
このように、varはブロックスコープを無視するため、ブロック外からでも変数globalVarにアクセスできます。

## 関数定義のブロックスコープの無視例
```js
{
  var a = 1;
  function b() {
    console.log("b is called");
  }
  b(); // 出力: b is called
}

console.log(a); // 出力: 1
b(); // 出力: b is called (関数宣言もブロックスコープを無視)
```
この例では、varにより宣言された変数aと関数bがブロック外でもアクセス可能であることを示しています。varや関数宣言はブロックスコープを無視するため、ブロック外からも呼び出しが可能です。

## constによるブロックスコープの適用例
```js
{
  var a = 1;
  const c = function b() {
    console.log("b is not called");
  };
}

// c(); これを実行するとエラーになります。
```
この例では、constで宣言された関数c（bを参照）はブロック内でのみ有効であり、ブロック外からはアクセスできません。これを実行しようとすると Uncaught ReferenceError: c is not defined というエラーが発生します。

## varによる関数宣言のブロックスコープ無視例
```js
{
  var a = 1;
  var c = function b() {
    console.log("b is called");
  };
}

c(); // 出力: b is called
```

この例では、varで宣言された関数cはブロック外からも呼び出すことができます。これにより、varによるスコープの制御の弱さが示されています。

## まとめ
JavaScriptでは、変数のスコープはその宣言方法に大きく依存します。constやletを使用すると、これらの変数はブロックスコープを持ちます。つまり、これらのキーワードで宣言された変数は、定義されたブロック（例えば、if文やforループのブロック）内でのみアクセス可能となります。ブロック外からはこれらの変数にアクセスすることはできず、エラーが発生します。これにより、プログラムの予測可能性が向上し、意図しない変更から変数を保護することが可能になります。

一方で、varで宣言された変数はブロックスコープを持たず、関数スコープまたはグローバルスコープを持ちます。これはvarがブロック内で宣言されても、そのブロック外からでもアクセス可能であることを意味します。この挙動は、特にif文やforループ内でvarを使用した場合に混乱を招くことがあります。例えば、ループ内でvarを使用して変数を宣言すると、ループの外からもその変数にアクセスでき、ループが終了した後の値に影響を受けることがあります。

## 実用的な使い方
- ブロックスコープが必要な場面では、letまたはconstを使用しましょう。 これにより、変数の生存期間とアクセス範囲を適切に制限することができ、コードの安全性が向上します。
- varの使用は慎重に。 varは予期せぬ挙動を引き起こす可能性があるため、必要な場合を除いてletやconstに置き換えることを推奨します。
このガイダンスに従うことで、JavaScriptでのプログラミングがより堅牢で保守しやすくなります。特に複雑なアプリケーションにおいて、適切な変数スコープの管理はバグを減少させ、コードの品質を保つために不可欠です。
giteaに222ポートのsshでアクセスしてcloneしたりする。あと別のサーバーでポートフォワードしてみる。

giteaをdocker composeなどで起動したあと、独自のSSHポートでやっていきたいときがあります。普段のsshは22, giteaは222ポートなど。

`~/.ssh/config`ファイルに下記を書けばポートを指定できます。

```config
Host gitea.example.com
  Hostname gitea.example.com
  IdentityFile ~/.ssh/id_ed25519
  Port 222
```

これでgitea.example.comからcloneするときは必ずPort222を使ってくれるようになります。

ここまでは非常に初歩的な内容ですが、さらに発展編。

192.168.0.10にメインサーバーがあるとします。こいつとは別に191.168.1.11というVLAN上にgiteaだけが入ったマシーンがあるとしましょう。（proxmoxでlxc上にdockerでgiteaサーバーを立てていると想定してください）
192.168.0.10マシーンは192.168.1.10のIPも持っていて、0番も1番も自由にアクセスできるマシーンだとしましょう。1番帯はfirewall的にoutだけは自由で、inは本当に最低限のポートしか公開していません。

このとき、192.168.0.10から、1.11の3000ポートにあるgiteaにnginxのreverse_proxyでアクセスさせるのは下記のようになります。

```nginx
server {
  listen 443 ssl;
  server_name: git.example.com;
  ssl_certificate file.crt;
  ssl_certificate_key file.key;
  access_log /var/log/nginx/git.example.com.access.log;
  client_max_body_size 10M;

  location / {
    proxy_pass http://192.168.1.11:3000;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
  }
}
```

これで外部に公開用のサーバーは0.10に限定して、1.11を外部から隔絶させることができますね。

このとき、どうやってSSHのポートをport forwardすれば良いのか？

いろんな方法があると思います（たとえばopnsenseのポートフォワード機能を使用する、など）。

僕が考えたのはHAProxyでポートフォワードをする方法です。こんな感じです。
HAProxyを192.168.0.10マシーンで実行します。cfgはこんな感じ。

```HAProxy
defaults
  mode tcp

frontend gitea_ssh
  bind *:222
  default_backend gitea_server

backend gitea_server
  server gitea 192.168.1.11:222 maxconn 32
```

これで192.168.0.10の222ポートに来た通信を1.11の222にポートフォワードできます。ここで重要なのは、defaultsのmodeをtcpにすることです。こうしておかないとhttp通信をしようとして、うまくsshが繋げません。
React公式ページで学んでみた13（備忘録）

# はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。:fist:

# 今回の目的
前回の続きです。今回は「コンテクストで深くデータを受け渡す」。被る部分もあると思いますが、後で振りかえって深掘りするきっかけになるのが理想です。細かく書くと大変なのであっさりめ。

https://qiita.com/mr_noppo/items/3529a9e87bf9834db57a

# 使用したものや事前準備
・Macbook Pro
・Visual Studio Code

# 主に参考にさせていただいた記事
https://ja.react.dev/learn/passing-data-deeply-with-context

# context
## propsでのstate受け渡し
親から子コンポーネントへの受け渡し程度なら冗長にならないが孫以降にも受け渡しをしないといけない場合、より複雑になる。
そもそもそこまで影響があるのであれば全体で共通に使えるものへする方法も必要で、それがcontextである。

## contextの作成手順
1.コンテクストを作成する。
2.データを必要とするコンポーネントがそのコンテクストを使用 (use) する。
3.データを指定するコンポーネントがそのコンテクストを提供 (provide) する。

### コンテクストを作成する。
これは初期値のため、各ツリーで値を管理したい場合は、providerを使用します。probiderを使用しなかった場合は、下記の値が使用されます。
```react
import { createContext } from 'react';
export const LevelContext = createContext(1);
```

### コンテクストを使用する

useContextと作成したコンテクストを使用したいコンポーネントがあるファイルでインポート
```react
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
```

コンポーネント内で読み取ります。
この定義を書いたコンポーネントは、LevelContextが更新された時に再レンダリングの対象になります。
なお、providerを指定している場合は、その範囲内でのレンダリングとなり、最上位のコンテクストに変更がかかっても対象外となります。
```react
const level = useContext(LevelContext);
```

### コンテクストを提供する 
作成したコンテクストにvalueを渡すことでそれ以降のコンポーネント範囲でグローバルに管理ができる。

```react
import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}
```

また、ネストして同一なコンテクストが重複しても直近のproviderを見るため管理が複雑になることはない
```react
export default function Page() {
  return (
    <Section level={1}> {/*以降、level=1で管理される*/}
      <Heading>Title</Heading>
      <Section level={2}> {/*以降、level=2で管理される*/}
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Section level={3}> {/*以降、level=3で管理される*/}
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Section level={4}> {/*以降、level=4で管理される*/}
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}
```

コンテクストのprovider配下までは親階層のコンテクストの設定を参照できるため、下記のような設定も可能
※詳しくは公式ページ参照
```react
export default function Section({ children }) {
  const level = useContext(LevelContext); //親のコンテクストを呼ぶ
  return (
    <section className="section">
      <LevelContext.Provider value={level + 1}>　{/*+1で新しいコンテクストを指定*/}
        {children}
      </LevelContext.Provider>
    </section>
  );
}
```

## コンテクストを使用する前に
propsを渡すか、childrenとしてJSXを渡す方法を検討すること

## コンテクストのさまざまな用途
・テーマ
外観を変化させる必要があるコンポーネントで使用する。
・現在のアカウント
多現在ログインしているユーザを知るためにコンテクストを入れることで、ツリーのどこからでも読み取りが容易になる。
・ルーティング
ほとんどのルーティングソリューションは、現在のルートを保持するために内部でコンテクストを使用しています。
・state管理
リデューサとコンテクストを一緒に使用することで複雑な stateを離れたコンポーネントへ受け渡すことができる。

# 次
https://qiita.com/mr_noppo/items/89506571174dfbcd889c