OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Stuido 2022でGithub Copilot Chatを試してみる

# 1. はじめに
* Github Copilot ChatをVisual Studioで使用したい

# 2. 開発環境
* Visual Studio 2022
* Github Copilot Chat
* Mac OS 14 (Parallels Desktop)
* C#
* .NET

# 3. 事前準備
* 拡張管理からインストールしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/832456c2-0c0d-aa3a-277a-f4646d420b50.png)

# 4. Visual StudioからGithubへのアカウント設定
* Github Copilotを申し込んだアカウントへログインする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/c2612feb-661e-5a6d-6799-2315cf64f8f1.png)

# 5. 動作確認
* チャットからコードを提案してくれた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/4e00c2d5-1e5f-d870-90d2-df9071e52250.png)

# 6. 参考文献

https://qiita.com/minoru-nagasawa/items/eb75194a9b551cdf6ff3
topコマンドのバッチモード

<!-- https://qiita.com/belgianbeer/items/f5b0461698ad9d3a3c02 -->

# topコマンドのバッチモード

## はじめに

topコマンドは、LinuxやMac等ほとんどのUNIX系OSに用意されているコマンドの一つです。topを起動すると、1秒、あるいは数秒間隔でプロセスや負荷の状況を表示して、システムの状態の変化を確認するために使われます。知ってる人は知ってる話ですが、topにはバッチモードが用意されています。ということでtopのバッチモードの紹介です。

## FreeBSDのtopとバッチモード

topコマンドは、負荷の高いプロセスを調べられるだけでなく、ps、uptime、swapinfo、vmstat等で個別に調べる内容をまとめて見ることができる点が便利です。さらにZFSを使っていればARCのメモリの使用状況まで確認できます。

topのオプションに-bを指定するとバッチモードとなり、通常のtopの1回分を表示して終了します。システムの負荷の状態のサマリを1コマンドで得られるのはかなり便利ではないでしょうか。

```console
$ top -b
last pid: 46319;  load averages:  0.26,  0.16,  0.12  up 12+18:17:21    07:34:08
41 processes:  3 running, 38 sleeping
CPU:  0.1% user,  0.0% nice,  1.6% system,  0.0% interrupt, 98.3% idle
Mem: 1439M Active, 751M Inact, 3855M Wired, 40K Buf, 1819M Free
ARC: 3201M Total, 584M MFU, 2368M MRU, 896K Anon, 161M Header, 64M Other
     2825M Compressed, 4857M Uncompressed, 1.72:1 Ratio
Swap: 8192M Total, 8192M Free

  PID USERNAME    THR PRI NICE   SIZE    RES STATE    C   TIME    WCPU COMMAND
 1432 root         13  20    0  2135M  1677M CPU3     3  17.7H   4.10% bhyve
 1190 nobody        1  20    0    18M  7616K CPU3     3  25:52   0.00% openvpn
 1205 root          1  20    0    13M  2304K select   2   6:46   0.00% powerd
35433 bind         10  52    0    85M    36M sigwai   3   3:27   0.00% named
 1231 ntpd          2  20    0    21M  7128K select   2   2:15   0.00% ntpd
 1272 root          1  20    0    18M  7436K select   1   0:18   0.00% sendmail
  850 root          1  20    0    13M  2504K select   0   0:16   0.00% routed
 1253 root          1  20    0    13M  2584K nanslp   3   0:07   0.00% cron
 1450 minmin        1  20    0    21M  9560K select   2   0:05   0.00% ssh
 1022 root          1  20    0    13M  2836K select   3   0:04   0.00% syslogd
 2386 minmin        1  20    0    21M    10M select   2   0:02   0.00% sshd
  888 root          4  52    0    12M  2228K rpcsvc   0   0:02   0.00% nfscbd
 1198 _dhcp         1  20    0    16M  5988K select   3   0:02   0.00% dhcpd
26924 root          1  20    0    18M  8108K select   1   0:02   0.00% ssh
26911 root          1  20    0    18M  8088K select   1   0:02   0.00% ssh
 1330 minmin        1  20    0    18M  7356K select   1   0:01   0.00% ssh-agent
  862 root          1  20    0    13M  2348K select   3   0:01   0.00% nfsuserd
  864 root          1  20    0    13M  2348K select   2   0:01   0.00% nfsuserd

$
```

デフォルトで表示するプロセスの数は上位20個となっていますが、数値(`top -b 100`等)を指定すれば変更できます。もちろん他のtopのオプションも使えます。

ちなみに、Linuxのtopコマンドも-bでバッチモードになりますが、FreeBSDのtopとは挙動が違うので興味ある方はお試しください。macOSのtopにはバッチモードは用意されていないようです。

## cronでのtopの利用

個人的にはtopのバッチモードはcronを使ってシステムの状況を定期的に記録するような場合に真価を発揮すると思ってます。筆者は10分(あるいはもっと短かい間隔)でtop -bの実行結果を記録し夜間のサーバーの負荷の状況を調べることがあります。

普通にtopを起動した場合はインタラクティブモードと言いますが、インタラクティブモードでは表示できるプロセス数は画面サイズで制限を受けるところを、バッチモードであればそのような制限はありません。cronで定期的にtopの結果を記録する場合には、1000なり2000なり十分大きい数を指定すれば全プロセスを記録できます。

crontab の例

```text
*/10 * * * * top -b 2000 > /var/log/top/$(date +\%Y\%m\%d\%H\%M).top
```

## おわりに

連続してプロセスの変化を観測するなら普通にtopを起動すればいいわけけですが、プロセスの状況を調べ続けるのはかなりの負荷をシステムに与え続けることになります。その点でサマリーを確認するだけであれば、バッチモードはとても便利と言えます。
【Elysia/Bun】静的プラグイン(Static Plugin)について

ここまで、起動用の index.ts ページにHTMLもCSSも全部まるっと書いてきましたが、例えば、Express などで言うところの「app.use(express.static('public'));」みたいな機能は、Bun にも Elysia にもあります。

# ディレクトリ構成

例えば、 Elysia で次のようなディレクトリがあるときに、、、

```
.hoge/
├─ src/
│    └─ index.ts // 起動用ファイル
├─ public/
│    ├─ tako.png 
│    └─ piyo/ 
│        └─ ika.png 
```
tako.png 
<img width=50 height=50 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/eb9d5acc-16b6-e465-8a52-8cd68daaa924.png>
ika.png 
<img width=48 height=38 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/fa1dc1be-ec30-e967-0749-8bf2e61593a3.png>

※画像はいらすとやさん

# プラグインをインストール
まず、static プラグインをインストールして、
```sh:
$ bun add @elysiajs/static
```

# プラグインを適用した index.ts を書く
次のように index.ts 書き直して、、、、
```ts: index.ts
import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'

new Elysia()
    .use(staticPlugin()) //ここで適用する
    .listen(9015)
```
# 起動する

起動し、、
```sh:
$ bun --hot ./src/index.ts
```

# ブラウザでアクセスする

ブラウザで、/public/tako.png つまり、
http://localhost:9015/public/tako.png とか http://＜アドレス＞/public/tako.pngへアクセスすると、こうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/8de13f5a-5352-abc4-e87b-1e5a9c109177.png)

イカさんの方は、/public/piyo/ika.png なのでこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/ce396133-4826-6eed-58d7-2fe0d6c8b8b6.png)

# 今回の動作サンプル

まぁ、今回も作ったものを pm2 start "bun dev" してあげておきます。まぁ期間限定になるとは思いますが、参考までにどうぞ。タコはこちら。http://74.226.208.203:9015/public/tako.png

http://74.226.208.203:9015/public/tako.png

イカはこれ。http://74.226.208.203:9015/public/piyo/ika.png

http://74.226.208.203:9015/public/piyo/ika.png

# 感想

まぁ、ルーティングのことなど考えずに /public 配下に置いたディレクトリとファイルのパス通りにアクセスできるわけで簡単ですね。

しかも、文字通り静的ファイルですから、動的生成のための待ち時間なしの生成済みで速いし、検索エンジンも普通に読めてSEO的にも優れてるわけです。

特に凝ったもの以外のサイト構成はこれで良いのかなとは思いますね。

# 本家のドキュメント

詳細はここにあります。

本家を読めば、今回の「public」という名前はデフォルト値だとかいろいろ説明があります。

<b>Elysia > Static Plugin</b>

https://elysiajs.com/plugins/static

<b>github elysiajs/elysia-static</b>

https://github.com/elysiajs/elysia-static

あと、Bunの staticの方はまたの機会に(^^)/

待ちきれない方のために、Bun の static の説明はこちら。

<b>Bun > Build an HTTP server using StricJS and Bun</b>

https://bun.sh/guides/ecosystem/stric


# 最近 Qiita に書いた Bun 関連の記事10選

https://qiita.com/toshirot/items/d4664e7fdcdde468f501

https://qiita.com/toshirot/items/c5654156c8799ac28d83

https://qiita.com/toshirot/items/3f147350f51942a29bf3

https://qiita.com/toshirot/items/c0ecf87f86bf50a2912b

https://qiita.com/toshirot/items/01c7f779d87985b1f9be

https://qiita.com/toshirot/items/2f0db79b3c2480e64f41

https://qiita.com/toshirot/items/94616478d3e73e7cc5b9

https://qiita.com/toshirot/items/f6bd561bc2522f1d26e0

https://qiita.com/toshirot/items/a5dc53ef191d20bbeb42

https://qiita.com/toshirot/items/74476af27e67d8534c5a

https://qiita.com/toshirot/items/94961b6dde72be80ab0c
@（アットマーク）でファイルをインポートするときのエラー

VSCode（Cursor）でVueのプロジェクトを構築していた際に、componentのインポートでエラーが出て解決するのに時間がかかってしまったのでメモ_φ(･_･

## エラー
![スクリーンショット 2023-12-27 21.15.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/c9ca9da1-b2be-79d7-3dd8-dfdfa829cc40.png)



「モジュール '@/components/Sample.vue' またはそれに対応する型宣言が見つかりません。」

@で読み込みたいが、@/components/Sample.vueでは読み込めない。
~./components/Sample.vueでは読み込める状態。

@（アットマーク）でファイルを読み込む方法を調べたら`vite.config.ts`に@importするように追加すればいいとみたのに...
```ts
import { fileURLToPath } from 'node:url';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});
```

## 解決
読み込んだコンポーネントが描画されているので、読み込みはできていて、エディタのエラーであることが判明。

調べていると、「VSCodeはtsconfig.jsonファイルを参照してモジュールの解決を行う」という記述を見つけ、vite.config.tsの設定だけでは足りなかったのかもと思い、tsconfig.jsonに以下を追加。

```json
{
  "compilerOptions": {
    ... 省略
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  },
  ... 省略
}

```
エラーが消えた！
解決！

## 「vite.config.tsではモジュールの解決をしない？」
以下ChatGPTさんに「vite.config.tsではモジュールの解決をしない？」と聞いた回答

>vite.config.tsはViteの設定ファイルで、Viteのビルドプロセスや開発サーバーに影響を与えます。
>VSCode等のエディタは、このvite.config.tsを参照してモジュールの解決を行いません。エディタは通常、tsconfig.jsonやjsconfig.jsonのような設定ファイルを参照してモジュールの解決を行います。
>
>したがって、Viteの設定とエディタの設定は一致している必要があります。つまり、vite.config.tsでエイリアスを設定した場合、同じエイリアスをtsconfig.jsonにも設定する必要があります。


とのことです！
Power BI Desktopの自動更新をPower Automate Desktopで実現する

# 概要
Power BI Desktopは無料で使えて、
いろいろデータ分析結果の見える化に使う案件が増えてきたけど、
DirectQueryじゃないとデータの自動更新ができないという悩みがあり・・・
それをPower Automate Desktopでやってみる。

# 環境
Windows 10
Power Automate Desktop
Power BI Desktop

# 内容
おおよそ10分に一回、Power BI Desktopの画面を更新させる方法を考えます。
※後述のWaitアクションのパラメータを適宜変更することで間隔は変えれます。

作ったフローはこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/cd51b913-64c9-a83c-5a04-e26ec3f6d842.png)

### ①繰り返し処理（Loopアクション）
ここでは、ずっと処理を繰り返すように無限ループを作っています。
⇒開始値が0で、終了値が1ですが、増分が0なので一生終了値に辿りつかない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/2fda2051-4b0c-ede5-0b8e-02b38166ef9a.png)

### ②10分待つ（Waitアクション）
ここで600秒（＝10分）待たせます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/71e47e3b-45f4-6300-a4a3-7b11a68d1e77.png)

### ③Power BI Desktopを最前面にする（「ウィンドウにフォーカスする」アクション）
Power BI Desktopが背面に隠れていたら困るので、最前面に持ってきます。
※ここでは、Power BI Desktopの対象ファイルが既に開かれている前提です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/c6e260a2-d41f-ee27-8697-714d922d4964.png)
同じ名称のウィンドウタイトルの画面が無いことを祈る・・・（汗）。

### ④ホームタブをクリックする（「ウィンドウのUI要素をクリック」アクション）
Power BI Desktopの表示更新ボタンはホームタブにあるので、
ホームタブを開くようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/8784fe94-f724-5bf8-b860-5dfa30bc1066.png)

UI要素の追加でPower BI Desktopのホームタブを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/8e52834f-78fa-510a-57a5-ab14394290e5.png)

### ⑤更新ボタンをクリックする・・・前に、ボタンの確認（「画像が存在する場合」アクション）
リボンの状態によって、更新ボタンの形状が変わるので、
ボタンの見た目の確認を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/29094608-d554-0994-104d-04ce5122b60d.png)

### ⑥更新ボタンをクリックする（「ウィンドウのUI要素をクリック」アクション）
小さいボタンの場合はこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/99413443-7970-c864-4e24-40917af3e39e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/9147dcf4-d797-9db7-bb56-8a590f156ab0.png)

大きいボタンの場合はこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/d100d971-7cca-52b7-9253-fe702e1e7e16.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/de3dd918-9398-939f-cbbb-70fb29b04164.png)


# 注意点
なぜか実行時に大きいサイズの更新ボタンが押されないケースがありました。
⇒実行時にUI要素が見つからない
セレクターの調整が必要な場合があります。
私のケースでは、1番上位のPane（アプリを指定しているセレクター）を、
ClassではなくてProcess指定にしたら要素がうまく検出されました。
参考までに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/b2e96d60-3662-e90b-6fc3-82f6de78f208.png)


更新時などにエラーが発生するなどして、途中でダイアログが表示されると、
このフローは上手くいきません。
⇒つまるところエラー処理をどうするかの検討が必要です。
31歳の元保守運用エンジニアがAtCoder参加してみた 2回目

# はじめに
ABC333に参加したのでその振り返り。

https://atcoder.jp/contests/abc333

## A問
今回のA問は、単純かつ易しい内容。
回答内容は以下。
<details><summary>ソースコード</summary>

```A.cpp
#include\<bits/stdc++.h>

using namespace std;

int main(void){
    int number_N;
    cin >> number_N;

    for(int i = 0; i < number_N; i++){
        cout << number_N;
    }

    cout << endl;
}
```
</details>

標準入力から**N**を受け取り、それをそのままN回分出力するだけ。
時間もかけずにAC(正解)。

しかしそうなると不安になるのがB問。
A問が簡単だとB問は難化するのが個人的な感覚。

## B問
予想通り難しかった。1時間前後かけたが回答できず。
以下未完成だが回答。

<details><summary>ソースコード</summary>

```B.cpp
#include\<bits/stdc++.h>

using namespace std;

int main(void){
    char S1, S2;
    char T1, T2;
    cin >> S1 >> S2;
    cin >> T1 >> T2;

    if(S1 == T1 && S2 == T2){
        cout << "Yes" << endl;
        return 0;
    }else if(S1 == T2 && S2 == T1){
        cout << "Yes" << endl;
        return 0;
    }

    vector<char> pentagon(5);
    pentagon = {'A', 'B', 'C', 'D', 'E'};

    int numberOfS1, numberOfS2, numberOfT1, numberOfT2;

    for (int i = 0; i < 5; ++i) {
        if (pentagon[i] == S1) {
            if(i == 3){
                numberOfS1 = 2;
            }else if(i == 4){
                numberOfS1 = 1;
            }else{
                numberOfS1 == i;
            }
        }
    }

    for (int i = 0; i < 5; ++i) {
        if (pentagon[i] == S2) {
            if(i == 3){
                numberOfS2 = 2;
            }else if(i == 4){
                numberOfS2 = 1;
            }else{
                numberOfS2 == i;
            }
        }
    }

    for (int i = 0; i < 5; ++i) {
        if (pentagon[i] == T1) {
            if(i == 3){
                numberOfT1 = 2;
            }else if(i == 4){
                numberOfT1 = 1;
            }else{
                numberOfT1 == i;
            }
        }
    }

    for (int i = 0; i < 5; ++i) {
        if (pentagon[i] == T1) {
            if(i == 3){
                numberOfT2 = 2;
            }else if(i == 4){
                numberOfT2 = 1;
            }else{
                numberOfT2 == i;
            }
        }
    }


    cout << endl;
}
```
</details>

考え方としては、A～Eの頂点を得点化し、Aは初期値として0点。B・Eは1点、C・Dは2点として、A点からの距離を調べるようにした。
それで得点が同じになるかどうかで調べようとしたが、うまくいかず。
理由としては
**「そもそもA点が初期値という前提で解いている。他の点が初期値になると当然解けなくなる」**。

問題内の入力例を見ても、アルファベットが若い順から線分が決まるわけでない。DA・EAのような場合があるため、やはりこの考え方では解けない。
思考中、家事をしたりして頭を別のことに逸らしたりしつつ、解こうと努力してみたが結局明解なものには至らず。
今回もB問は諦めることにした。

### 解説を見て

https://atcoder.jp/contests/abc333/editorial/7978

線分を長短2種類に分けて、そのどちらかかを判定するだけというのは感心した。
こういう普遍的な条件を抽出する力がまだ足りていないなと実感。
また、以下解説内で得られた知見。
* ラムダ関数というC++の機能があること
簡易な計算をしたいとき、これで宣言してやってmain関数内で完結させてみるのも学習に良いかも。
* char型の文字列は文字列同士で計算させることができること
これを用いて、2つの文字列が何個分先か後かを調べることができる。

# 振り返り
ここ3回ほどのABC、やたらB問の難度が高い印象がある。
まだまだ過去問を解きなれていないというのが大きいとは思うが。
また、Qiitaを巡っていたら、以下参考になる記事を見つけた。

https://qiita.com/BinomialSheep/items/bdced19c2dc4e6b481ec

↑に記載されている **「やるとよかったこと」** を参考にして学習を進めてみる予定。
ちなみに次回のABC334は、家族とクリスマスを過ごしたので休んだ！
atcoderとpython入門 #1 標準入出力

# 0 はじめに
お久しぶりです。
今回からpython入門みたいなのをやろうと思います。
目標はdiff100の問題が解けるぐらいです。
atcoderに出るにはまず**標準入出力**というものができないといけません。
標準入出力とは,入力を受け取って結果を出力することです。
これができないとatcoderはできません。
# 1 出力
出力には`print()`を使います。
例えば`"Hello world!"`を出力したい場合は`()`の中に入れます。
```python:hello.py
print("Hello world!") # Hello world!
```
この時`"`で囲んでください。
数字を出力する場合は`"`は要りません。
```python:number.py
print(53) # 53
```
計算もできます。
```python:calc.py
# 足し算
print(3 + 4) # 7
# 引き算
print(5 - 2) # 3
# 掛け算
print(6 * 5) # 30
# 割り算
print(12 / 3) # 4
# 商
print(34 // 3) # 11
# 余り
print(13 % 4) # 1
```

# 2 変数
入力するにあたって,なにか入れるものが必要です。
その入れるものが**変数**です。
例えば,変数numberを作るときは下のようなコードになります。
```python:var.py
number = 3 # numberを宣言して3を代入
```
変数を作ることを**宣言**といいます。
そして宣言した変数になにか入れることを**代入**といいます。
pythonでは宣言するとき同時に代入もします。
代入は宣言と同じようにイコールでつなぎます。
複数の変数を同時に宣言することも出来ます。
```python:var_multiple.py
a, b, c = 3, apple, 9.8
print(a) # 3
print(b) # apple
print(c) # 9.8
```

# 3 入力
入力は5パターンあります。
## 3.1 文字列1個
```python:str.py
str = input()
```
`input()`を使うとstr型で入力を受け取れます。
## 3.2 整数1個
```python:int.py
num = int(input())
```
`int()`を使うとstr型をint型にできます。
## 3.3 文字列 複数
```python:str_list.py
list = input().split()
```
`split()`を使うと空白で区切れる。
## 3.4 整数 複数
```python:int_multiple.py
a,b,c = map(int, input().split())
```
map関数を使うことによって
## 3.5 整数 複数 リスト
```python:int_list.py
list = list(map(int, input().split()))
```
さっきのをさらに`list()`でリスト化してる感じです。

入力は基本的にこれができればだいじょぶです。
# 4 まとめ
`print()`で出力。
`input()`で入力。
「ポータブルさ」を評価してPyPyを軽い業務用途で採用したケース

## まえがき

Pythonの実行環境となる実装には、PSFが公開している[CPython](https://www.python.org/downloads/)以外にもいくつか存在します。 [^1]

[^1]: 今回紹介しないものだと、JVM上で動作するJython、組み込み向けのMicroPythonなどがあります。

そんな実装系の一つである**PyPy**をちょっとした理由で業務利用したので、ちょっとしたログがてら感想等をまとめてみます。

## PyPyについての簡単な説明

Python処理系の実装の一つで、大雑把に説明すると「Pythonで書かれたPython」と言えます。

内部実装に起因する挙動の違いなどはありますが、言語としての動作に関しては極端な差はありません。
そのため、通常のCPython向けに書かれた`.py`のソースはそのまま動作することも多いです。

特に速度面でCPythonの優位を取れるシーンがあり [^2]、競技プログラミング分野で目にすることが度々あります。 [^3]

[^2]: https://speed.pypy.org/ で、CPythonとの速度比較をしています。（ただし比較対象がかなり古め）
[^3]: 自分がたまに挑戦する際はPythonをメインで使っていますが、「わずかにTLEが出たからとりあえずPyPyに差し替えてみるか」という扱いをすることがあったりします。

## PyPyの「ポータブルさ」

どこかに詳細な解説があると信じて相当量の説明を省くと、PyPyをインストールをするのに必要最低限となる作業はこれだけです。

1. [PyPyのダウンロードページ](https://www.pypy.org/download.html)から、自分の環境にあったパッケージアーカイブをダウンロードする。
1. ダウンロードしたファイルを展開する。

以上です。PyPyのサポート環境であれば、これだけで実行準備が整います。

<details><summary>コマンド例</summary>

```console
$ cd /path/to
$ curl -LO https://downloads.python.org/pypy/pypy3.10-v7.3.13-linux64.tar.bz2
$ tar xf pypy3.10-v7.3.13-linux64.tar.bz2
$ ./pypy3.10-v7.3.13-linux64/bin/python -V
```
</details>

え？普通のOSディストリビューションならオペレーションに大差ないのでは？
多くの場合はそうとも言えるのですが、そうでないポイントもあるので、そこを説明していきます。

### 古めのOSでも割りとすんなり動く

この「アーカイブをダウンロード・展開して完了！」が有効に働くポイントとして、見出しにもあるように古めのOSでも導入が容易という点が挙げられます。

比較的長く受託している案件で、基盤のOSがまだCentOS 7系なものがあるのです。ここに、ちょっとしたツールのために新しめのPython実行環境を必要としました。

というのも、Pythonを使うにしても、CentOS 7.xのBaseリポジトリにあるのは2.7.5と流石に古いためです。また、EPELなどを駆使しても案外手間で、最終的に「新しめのCPython」のためにはビルドが要求されてしまいます。

ダウンロードページにあるLinux向けリンクのNotesには、こう書かれています。

> compatible with CentOS7 and later.

そう、CentOS 7系でも動作することが保証されているのです。

PyPyはPythonのバージョン仕様との互換性のために3種類の実装が提供されているのですが、新しいものはPython 3.10系互換となっています。
今のCPythonのリリースは3.12系が最新なので多少は遅れていますが、それでも困らない程度には追従できています。

### venv以上に使い捨て/持ち運びがしやすい

現在のPythonにおける環境管理は、何かしらの形でvenvなどを利用した仮想環境を作成してそこにライブラリをインストールするのが一般的です。
当然ながら、不要になったりした場合は仮想環境を消すことで使い捨てをすることが出来ます。

一方PyPyの場合は実行環境をまるごと消して再ダウンロードすることが可能なので、よりダイナミックな使い捨てが実現できます。 [^4]

また、実行環境そのものがポータブルなので、次のようなことも視野に入れることが出来ます。

1. 環境設定向けの環境でPyPyへ依存ライブラリのインストール（venvは使わない）
1. インストール済みのライブラリごと圧縮
1. 再圧縮したファイルを実行したいマシンへ配布

[^4]: 書いてはみたものの、そこまで強いメリットはないです。

## デメリット周り

ポータブル性に着目すると前述の通り便利なポイントがそれなりにありますが、とはいえガッツリ使うには面倒な箇所も多々あります。

いくつかピックアップしてみます。

### PATH管理しづらい...かもしれない

特にポータブル性を意識すると、PyPyを環境まるごとポコポコ作るケースも想定できるのですが、そうするとPATH周りをどうするかがちょっとした課題になります。
とはいえ、実行時の記述が若干冗長になるだけなので、ターミナル上での頻繁なコマンド入力をしないのであれば余り気にはなりません。

### ライブラリインストールが手間になるケースがある

PyPIに登録されているライブラリは大きく分けて以下の2形態を取ります。（説明は超概要）

- Source: セットアップ情報とPythonソース等を含めた形式。インストール時にビルド等が発生する可能性がある。
- Wheel: プラットフォームごとに用意されたビルド済みファイルを梱包した形式。基本的にそのまま展開した状態で使える。

Pure-PythonなライブラリではSource形式しか提供されていないこともあり、実際に困ることは余りありません。

一方で困るのが、ビルドが必要なライブラリでWheelが提供されていないケースがあります。
Wheelはパッケージ作成時に「Pythonのバージョン」「OS」「CPUアーキテクチャ」などの要素で別ファイルとして用意する必要があります。
そのため、PyPy向けのWheelが存在しないケースが発生しがちです。[^5]

この場合、どこかでビルドを含むインストールが必要になります。こうなってくると、実行環境として採用するのが少々面倒になります。

[^5]: 例としてあげると、[NumPy](https://pypi.org/project/numpy/#files)にはPyPy向けのWheelも提供されているのに対して、[Cython](https://pypi.org/project/Cython/#files)にはPyPy向けがリストにありません。

## 振り返り

というわけで、多少のデメリットは無視できる範囲において、PyPyを小さな範囲で利用していくのは案外メリットが有りそうです。
みなさんも、限定条件下では実案件でもチマチマ使ってみる機会を伺ってみると良いかもしれません。
【Code Climate+ GitHub】10分でできる自動コード品質管理ツールの導入

# はじめに
本記事では自動でコードの品質管理を行ってくれるCode Climateの導入方法を解説します。特に、一人で開発をしていて自分の書いたコードをレビューしてくれる人がいないという方や、チームで開発をしているが、機械的にレビュー可能な部分は自動化することでレビューのコストを下げたいという方向けにツールの導入方法をお伝えします。


# 前提条件
- GitHubのアカウントとパブリックリポジトリを作成している
- GitHubの基本的な使い方を理解している


# 目次

1. [導入手順](#導入手順)
2. [参考文献](#参考文献)

# 導入手順
### Code ClimateとGitHubを連携する

以下のリンクにアクセス

https://codeclimate.com/login/github/join

Sign up with Githubをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/a7afe41e-0c41-c32d-88d1-2e7d67e9abe0.png)

Authorize codeclimateをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/bec1001b-cf96-f7ca-2a5f-8729db1315bb.png)

もう一度Authorize codeclimateをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/2bc15e78-5c4e-4fb7-1a4d-ca6eee4a2c25.png)

Nextをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/7a8d144a-50c6-2f3c-eb97-eeb8d9cf49e7.png)

Free for open source. Forever.のAdd a repositoryをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/fcd806e1-9d1f-e665-12e5-490a1e4c7a59.png)

Authorize codeclimate

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/c06bd5ff-b639-ca1a-b215-1a0db1a44794.png)

品質管理の対象としたいリポジトリを選んでAdd Repoをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/2ce9ee22-c66b-e33c-c1d4-47c2cd290a22.png)

Seee the Resultsをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/54364539-f23c-4b85-c793-f4485a80c44d.png)

こんな感じでサマリーが表示されればokです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/6c3b4080-c88a-f545-fd36-a7f12af6584b.png)

### プルリクエストを作成したタイミングでフィードバックをもらえるようにする
Repo Settingをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/253b3346-1c71-e1c9-6b49-16cd1c21591a.png)

GitHubをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/1f107a97-6717-e537-44c7-d22364d66e59.png)

Pull request comments のSet upをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/6e40e886-0f63-d983-1ba2-0a6e829057d2.png)

Installをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/4c8c3b0d-99ba-4f65-3257-af14d03b9e42.png)

先ほどの設定画面に戻りラジオボタンをオンにしてSaveボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/4e2e8117-0056-c903-c886-297b36a24e71.png)

Pull request status updatesのInstallをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/446924b4-e836-e004-9301-51dd4a0e90da.png)

適当にPull Requestを作ってファイルの変更状態を確認すると以下のようにフィードバックが返ってきます（画像はコードが複雑すぎますという注意が書かれています）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/08f77ff8-10e3-88e6-de33-21d16e83b56f.png)

これで自動コード品質管理ツールの導入は完了です

# 参考文献

本記事の作成にあたっては以下の記事を参考にしました

https://qiita.com/konbraphat51/items/e82da55e50e0b7a2281f
2024RCJ WRL polaris  ノード大会

(2023年12月6日)ロボカップジュニア京都ノード レスキューLINEリーグ

## 機体仕様
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3515767/1e0bccd4-b4b4-6357-2664-7b2f69880481.png">

大きさ: (底面,高さ)=(185mm^2,85mm) (アーム除)
駆動:4駆 タミアのタイヤ(56mm径)
トレース:機体底面前方に魚眼カメラ(万色LED付)
障害物等:4面各2個(前+1)のvl53l0x
回収機構:小型アーム(サーボx3駆動) 物体検知用カメラ
保持･投下機構:なし
電源:18650電池x3

<details><summary>機体設計詳細</summary><div>

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3515767/9f900c04-f709-fc07-0114-106374f0027f.png">

機体CAD (inventor2023で作成) (蛍光カラーなのは通常色だと見えづらいから)
新設計：基板を従来の半分の大きさに詰め、機体底面に設置。

### 駆動、底面カメラ

昨年は超新地旋回の精度の低さに悩まされたが、そもそも制御が求める精度が高すぎるという点があった。制御側の都合で、機体前方に広角カメラがあった方が良いとなったので、結局旋回性能の問題は解消していない。加工制度、個体差、タイヤのグリップ力、機体重心など多くの要素が絡むので、ある程度までは仕方ないのかもしれない。

### 回収機構

新ルール:救助ゾーン色分け要素追加に伴い、回収保持投下機構の必要性を考察。
旧ルールでは、特別の機構を載せずとも、被災者をまとめて押し転がすことでエリアlv1に入れることができたが、被災者の色ごとに対応色のエリアに入れることが必須となった新ルールでは、それができなくなった。
エリアlv2を選択するなら、回収機構は必須。
黒銀の選別をする必要がある上、玉を探すのに向いているため、カメラを置きたい。
カメラを使うなら、玉の位置把握ができるはずなので、回収機構は狭範囲なものでも構わない。
また、色分け必須の都合上、保持機構は大掛かりになる。保持投下機構を組み込むと多少の時間短縮を図ることが出来るが、機体が小さい事のメリットの方が大きいと考えた。
以上の考えから、回収機構:カメラ付きアーム、保持投下機構:なし という設計に至った。

### がれき避け

がれき：~3mmまでの小さな物体。固定されない。
バンプ：~10mmまでの物体。固定される。
3mmのものは防ぎ、10mmのものは通過するようなシールドを作らなければならない。どういうこと？。
なんらかとてもやわらかい物質で制作するべきだろう。そこで、100均で買ったクイックルワイパーの先のようなものを利用した。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3515767/dc17f6e1-9ee5-214f-d656-22ebe6296391.png">

ライン認識側：カメラ に影響を与えないための対策はこれで十分だろう。
ただ、がれき対策で最も重要なのは、駆動側のスリップ対策である。
駆動機構によっては、ライン認識のずれ以前に、まともに走るのが困難になる。
避けを設けた上でがれき走行が上手くいかない場合、駆動を見直すことも必要だ。
実際、この機体は直線上ならほとんどのがれきを防ぐことができ、多少画角に入ってもある程度ならライン認識ができたが、スリップが酷く、結果がれきはかなり苦手だった。のちのタイヤ変更によって改善した。

</div></details>

## 結果
コート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3515767/214e307f-8ea6-93c3-93c8-971da5a2dc88.png)


第一走 218点
(得点詳細)
第二走 282点
(得点詳細)

## 振り返り

### 良かった点
・通常ライン,ギャップ,交差点カンペキ
　　基本的なライントレースは完璧にできていた。
・案外がれき避けが有効
　　カメラに入れないという点では上出来。あとは駆動性能。
・取捨選択の判断　機体性能を把握できていた
　　できるかどうか分からない斜めバンプを捨て、できるだけ乗数を得られるようにしつつ、確実に点の取れる交差点エリアを完走できるように時間配分した。
### 問題点
・バンプかなり苦手
　　既述の通り。
・障害物回避 遅いし低精度
　　(雑距離調整,前進)を繰り返すアルゴリズムが微妙。Pぬるぬる制御したい。
・避難ゾーン不安定
　　未熟な点が多い。ハード的問題もあるか？不明瞭。
・全体的に遅い…？
　　通常ライントレース側の移動速度など調整していきたい。


## 今後
1.障害物回避、段上旋回の解決のために、機体を小型化する(設計済みのため組み立てのみ)。
2.そういえば試してみたかったスパイクタイヤを試してみる。バンプ,がれき走破性能上昇を期待。
3.避難ゾーンについては完全に未実装のものもあるので、書き進めていく。
4.ひたすら
〇早急にハード側の問題点を洗い出し、修正解決を目指す。
〇苦手そうな地形を見つけて修正。
〇時間短縮を目指す。
GitHub Actions 環境変数展開に関する考察

# 初めに
GitHub Actionsのワークフローを書く中で、環境変数の展開時に少し気になったことを簡単に書きます。

# 実験
次のワークフローを作成し、実行します。
環境変数には`hoge`が入っていることを期待しています。
``` variables.yml
name: Variables

on: push

jobs:
  variavles_ubuntu:
    runs-on: ubuntu-latest
    env:
      ENV_VAR: hoge
    steps:
    - name: reference var
      run: |
        echo "ENV_VAR"
        echo "ENV_VAR_a = $ENV_VAR"
        echo "ENV_VAR_b = ${{ env.ENV_VAR }}"
        echo "STEP_ENV1"
        echo "STEP_ENV1_a = $STEP_ENV1"
        echo "STEP_ENV1_b = ${{ env.STEP_ENV1 }}"
        echo "STEP_ENV2"
        echo "STEP_ENV2_a = $STEP_ENV2"
        echo "STEP_ENV2_b = ${{ env.STEP_ENV2 }}"
      env:
        STEP_ENV1: $ENV_VAR
        STEP_ENV2: ${{ env.ENV_VAR }}

  variavles_windows:
    runs-on: windows-latest
    env:
      ENV_VAR: hoge
    steps:
    - name: reference var
      run: |
        echo "ENV_VAR"
        echo "ENV_VAR_a = $ENV_VAR"
        echo "ENV_VAR_b = ${{ env.ENV_VAR }}"
        echo "STEP_ENV1"
        echo "STEP_ENV1_a = $STEP_ENV1"
        echo "STEP_ENV1_b = ${{ env.STEP_ENV1 }}"
        echo "STEP_ENV2"
        echo "STEP_ENV2_a = $STEP_ENV2"
        echo "STEP_ENV2_b = ${{ env.STEP_ENV2 }}"
      env:
        STEP_ENV1: $ENV_VAR
        STEP_ENV2: ${{ env.ENV_VAR }}
```

結果は次の通りです。（実行結果を適当にコピペしたものです。）
``` results.txt
--- variavles_ubuntu ---
ENV_VAR
ENV_VAR_a = hoge
ENV_VAR_b = hoge
STEP_ENV1
STEP_ENV1_a = $ENV_VAR
STEP_ENV1_b = hoge
STEP_ENV2
STEP_ENV2_a = hoge
STEP_ENV2_b = hoge

--- variavles_windows ---
ENV_VAR
ENV_VAR_a = 
ENV_VAR_b = hoge
STEP_ENV1
STEP_ENV1_a = 
STEP_ENV1_b = 
STEP_ENV2
STEP_ENV2_a = 
STEP_ENV2_b = hoge
```

ところどころ値が抜けている or 期待する結果とは異なってますね。

# 考察
順にみていきます。
## ubuntu-latest
```
ENV_VAR
ENV_VAR_a = hoge
ENV_VAR_b = hoge
```
こちらは期待通りです。

```
STEP_ENV1
STEP_ENV1_a = $ENV_VAR
STEP_ENV1_b = hoge
```
STEP_ENV1_aには期待とは異なる値が入っています。
これはstep内でenvを定義する際に入れた`$ENV_VAR`が、そのまま解釈されています。
STEP_ENV1_bは、、、わからん。。。
コンテキストを参照したため、変数を再解釈したのでしょうか。
詳しい方コメントお待ちしております。

```
STEP_ENV2
STEP_ENV2_a = hoge
STEP_ENV2_b = hoge
```
こちらも期待通りです。
step内でenvを定義する際にコンテキストを参照したことが有効に働いたのでしょう。

## windows-latest
あまりGitHub Actionsのワークフローをwindowsで実装しないので、勘違いしているところがあるかもしれません。
```
ENV_VAR
ENV_VAR_a = 
ENV_VAR_b = hoge
```
さっそく値が抜けています。
GitHub Hosted Runnerのwindows-latestはデフォルトでpwshなので、echoも `$ENV_VAR`も使えるはずだが、、、
https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsshell
ENV_VAR_b は期待通りですね。コンテキストを参照するのが無難か。

```
STEP_ENV1
STEP_ENV1_a = 
STEP_ENV1_b = 
```
全滅です。
とはいえ、step内でenvを定義する際の `$ENV_NAME` が解釈できなかったのでしょう。

```
STEP_ENV2
STEP_ENV2_a = 
STEP_ENV2_b = hoge
```
こちらも `ENV_VAR`と同様の結果ですね。

# 結論
環境変数を扱う際は無難にコンテキストを参照しておきましょう。
細かいところで何が起きた結果、これが良くて、これがダメなのか、Mac-OSだとどうなのかといったところはまた機会があれば検証してみます。~~実務にはあまり影響ないとかつまらないことは言わない~~

# 参考
コンテキスト: https://docs.github.com/ja/actions/learn-github-actions/contexts#env-context
Windows11でDockerを起動

# 概要
Windows11にDockerを入れようとしたら少し手間取ったので，手順を忘れないようにメモしておきます．
初投稿なのでお手柔らかにお願いします．


# Docker Desktopをインストール
1. [docker desktop](https://docs.docker.com/desktop/install/windows-install/)をインストールして実行

2. (必要なら) ユーザーグループに追加

    管理者権限でPower Shellを起動後，以下のコマンドを実行．`[username]`には自分のユーザネームを入れる (ex. naoki)
    ```bat
    net localgroup docker-users [username] /ADD
    ```
    ここが少し手間取りました．windows10だとコントロールパネルから設定できたみたいなのですが，windows11だと見当たらなかったのでコマンドで追加する方法を探しました．

# WSLのインストールと設定
1. コマンドプロンプトで次のコマンドを実行してWSLをインストール
    ```bat
    wsl --install
    ```
    ユーザ名とパスワードを設定したらWSLが起動．`exit`で終了．

2. インストールされているか確認
    ```bat
    wsl --list
    ```

3. デフォルトをUbuntuに設定．
    ```bat
    wsl --setdefault Ubuntu
    ```

# 確認
設定後，コマンドプロンプトから以下のコマンドを実行して確認
```bat
docker pull hello-world
docker run -it --rm hello-world
```

出力が以下のようになれば成功！！
```
Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

# 参考
- [Install Docker Desktop on Windows | Docker Docs](https://docs.docker.com/desktop/install/windows-install/)
- [windows11にdocker desktop入れたけどAccess Deniedって言われて立ち上がらない #Docker - Qiita](https://qiita.com/Terufuji3/items/0e7d14808ed7d64669e5)
- [WSLのインストール | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/wsl/install)
- [hello-world - Official Image | Docker Hub](https://hub.docker.com/_/hello-world)
Seabornでプロットする際のDataFrame変換

# DataFrameの変換

#### Seabornでプロットする際のDataFrameの形について
パラメーター`x`,`y`には、それぞれ一つの列しか指定できない。

したがって、データを含むDataFrameの形に注意する必要がある。

* x軸に指定したいカテゴリは`列名`にせず、1列に含める。
* y軸に指定したい値は、複数列にせず1列にする。

以下は、Excelでデータをまとめる際によくありそうな形式の例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655949/f8a7709b-526c-e7da-9e84-4918b5ba8a6d.png)

<br>
プロットする際、このようなデータは以下のように形式に変換する必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655949/e49ecc7b-96cf-2db2-d4c4-b76a45594b33.png)



**変形のポイント**
* カテゴリ1が2列目のみに全て含まれている。（変形前は2~4列目にまたがっていた）
* 値が3列目のみに全て含まれている。
* カテゴリ2（グループ分けしてプロットしたい時のみ使う）も同様に、4列目のみに全て含まれている。

# 変換方法
**CSVからの読み込み**
```python
df = pd.read_csv('./data.csv', header=0, index_col=0)
```


### 入力データの形別でのDataFrame変換方法

**2要素（値、カテゴリ1）のDataFrameの変換**
```python
df_sns = df.stack().reset_index()
df_sns.columns=['id', 'x_value', 'y_value']
```

**3要素（値、カテゴリ1、カテゴリ2）のDataFrameの変換**

ただし、読み込んだCSVファイル内のデータにおいて、
グループの列が一番右列にあり列名が`group`になっている前提。
```python
col_num  = len(df.columns)-1
df_stack = df.iloc[:, 0:col_num].stack().reset_index()
df_stack.columns = ['id', 'x_value', 'y_value']
df_sns = df_stack.merge(df.loc[:,'group'], left_on='id', right_index=True ,how='left')
```
DBクライアントからDockerコンテナのpostgresに接続できなかった時の原因

# 状況
ローカルPC内のDockerでpostgresサーバーコンテナを作成して起動したが
ローカルPC上のA5M2から接続しようとしてもつながらない。
powershellから`psql`でターミナルに接続してSQL文を実行することは出来る。

# 原因：ポート5432で既にPC上のpostgresが動いていた
今回Dockerコンテナ起動したpostgresは`ports: 5432:5432`でPCにトンネリングしていたが、
既にローカルPC上のpostgresが`port:5432`で起動していた。
つまり、DBクライアントから**Docker上のpostgresのログイン情報**を用いて**ローカルPC上のpostgres**に接続しようとしていたことになる。<br>
ローカルPC上で動いているpostgresは不要だったためサービスを停止した。
Dockerコンテナを再作成した上で接続を試みたところ、無事A5M2からDocker上のpostgresにログイン出来て解決した。
# 感想
結果、ただの凡ミスでしたが自分にとっては新しいタイプの原因でした。
pg_hba.conf等は設定済だったので、この原因にたどり着くまで1時間くらい考えてました。
相談者の方に「...もしかしてpg_hba.confとかってDocker内じゃなくてCドライブ上にもあったりしますか？」って聞いたらビンゴでした。リモートだと状況の把握がなかなか難しいと思った。
HTMLで作ったサイトをReactにしたらJestでWarningでた

仕事と、特に子育てが少しだけ落ち着いてきたので、アウトプット再開して継続させたい...!!

ということで、慌てて作ったHTMLのサイトを慌ててReactで作り直していたら、思わぬところで警告がでたのでメモ。

## tableがJestで警告でた
```
<table className="tbl">
  <tr className="tbl-tr">
    <td className="tbl-tr__tdTitle">サイト名：</td>
    <td>{siteName}</td>
  </tr>
</table>
```

この状態でjestを実行させるとWarningがでた。

```
Warning: validateDOMNesting(...): 
<tr> cannot appear as a child of <table>. 
Add a <tbody>, <thead> or <tfoot> to your code 
to match the DOM tree generated by the browser.
```

解消方法はメッセージの通りで、
tableの中にtbodyを追加したらWarningが消えた。

```
<table className="tbl">
  <tbody>
    <tr className="tbl-tr">
      <td className="tbl-tr__tdTitle">サイト名：</td>
      <td>{siteName}</td>
    </tr>
  </tody>
</table>
```

## 原因を調べてみた
どうやら、Reactをレンダリングするときに、tbodyがないとブラウザ側で勝手に追加するらしく、その結果、コードと差分が発生して警告がでるらしい。
（その原因まで調べると難しそうなので、深くは追求しない）
VB2022 実用的プログラムと言うのは?

ビジュアルベーシックの完成見本です。載せるには大きすぎるし。はてさて。。。
予定表と言う、シンプルで実用的なのを、数年かけて作りました。実際に動きます。
 https://tattyan0-0.sakura.ne.jp/etc/yotei3_50kan.zip ソースファイルと実行ファイルの圧縮版。私の作品です。気が向きましたらダウンロードしてください。
実行ファイルだけを使いたいという方は、yotei3_50\yotei1\bin\dibag\yotei3_50.exeとフォルダーwaking　を同じ場所に自由にコピーしてyotei3_50を実行してください。vb2022が、入っていない環境のテストはやっていません。
wokingの中身の*datはテキストファイルです。メモ帳で開けます。ファイルを消したら新品で再生するはずです。
パソコン起動時に、自動的に開きたい方は設置したディレクトリでyotei3_50.exeのショートカット(*.lnk)作成「右クリックメニュー」でリンクを作りスタートアップディレクトリにlinkを設置するだけです。
音声は自分の声を*wavで保存して1分以内を目途としてください。同名差し替えは問題ないと思います。
自信のある方は、ソースを触り、名前の変更や追加をするだけです。項目の追加も、構いません。
貴方自身が、進歩することを、願います。予告なく終了した場合は、ご容赦くださいませ。
ChromeBookでかっこつける方法

こんにちはAtsu1209です
いきなりですが私中学生で、学校からChromeBookが貸し出されています。
ChromeBookでハッキングっぽい画面ができないかなあと思っていいました。
そんなある日、CroshというChromeBookのターミナル的なの見つけたました
そこで今回はChromeBookでかっこつける方法を書いていきます。

# Crosh
早速Croshを開きます
`ctrl` + `alt` + `t` で開けます。

Crosh画面↓
```
Welcome to crosh, the ChromeOS developer shell.

If you got here by mistake, don't panic!  Just close this tab and carry on.

Type 'help' for a list of commands.

If you want to customize the look/behavior, you can use the options page.
Load it by using the Ctrl-Shift-P keyboard shortcut.

crosh> 
```

なんか出てきました。
ここで、一回動作確認で`ping google.com`と打ちます。
そうすると、1秒ごとにGoogle.comのゲートウェイの情報が出てきます。

pingについて(helpから 引用)↓
```
ping [-4] [-6] [-c count] [-i interval] [-n] [-s packetsize] [-W waittime] <destination>  
  Send ICMP ECHO_REQUEST packets to a network host.  If <destination> is "gw"
  then the next hop gateway for the default route is used.
  Default is to use IPv4 [-4] rather than IPv6 [-6] addresses.
```
Pingでも一応かっこつけれます。
でももっといいのが、
`help_advanced`と`top`です
`help_advanced`は、helpのもっと詳しい版みたいなものです。
Croshにあるすべてのコマンドを表示するので、下から一気に
ﾊﾞｱｱｱって出てきます。これがいい感じ。
次に、`top` メモリー情報やCPU関係の情報を表示するコマンドですが、
なんか、かっこいいです。
この２つのコンビネーションで結構かっこつけれるんではないでしょうか

# 以上
ということで今回は "かっこつける" を題材にしたしょうもない記事でした
みなさんも良ければやってみてください。
では
コンパイルエラーと例外スローの違い

java silverの問題を解いてて、コンパイルエラーと例外スローどちらになるかわからなかったのでまとめてみた。

コードがコンパイルエラーになるか、例外をスローするかの基準

1. **コンパイルエラー（静的エラー）**：
   - **定義と一致しない使用法**：変数や関数の定義に反する使用（例：存在しないメソッドの呼び出し、データ型の不一致）。
   - **構文エラー**：プログラムの構文が言語の規則に違反している場合（例：セミコロンの欠落、括弧の不一致）。
   - **解決できない参照**：使用されているが定義されていない変数や関数への参照。
   - **アクセスレベルの違反**：privateやprotectedなど、アクセスできないメンバへのアクセス。

2. **実行時例外（動的エラー）**：
   - **外部要因**：外部リソースの問題、ネットワークエラーなど。
   - **無効な入力**：ユーザー入力や外部データソースからの予期しないデータ。
   - **リソースの問題**：メモリ不足、ファイルシステムの問題など。
   - **プログラムの論理エラー**：ゼロ除算、無効なインデックスへのアクセス、null参照など。

コンパイルエラーは、ソースコードがコンパイルされる際に発生し、実行ファイルやバイトコードが生成される前に検出される。一方、実行時例外は、プログラムが実行されている間に発生し、通常はプログラムの特定の状態や外部環境に依存する
SEOについて自分なりにまとめてみた

## SEOとは
Search Engine Optimizationの略で検索エンジンによってウェブサイトがどれだけ適切に評価されるかを向上させるための戦略的な手法の総称です。
コンテンツの最適化、キーワードの選定、リンクビルディング、技術的な側面など、多岐にわたります。

### 検索エンジンの重要性とシェア率
検索エンジンはユーザーが情報を探すためのプラットフォームで、Google、Yahoo、bingなどがその代表例です。日本においてはGoogleが大半のシェアを占めています
日本における2023年の検索エンジンのシェアTOP5は以下の通りです
- 1位 Google： 75.98% 
- 2位 Yahoo!： 16.24%
- 3位 Bing： 7.13%
- 4位 DuckDuckGo： 0.31%
- 5位 Baidu： 0.16%

Googleはどのような基準で評価しているかの<a href="https://static.googleusercontent.com/media/guidelines.raterhub.com/ja//searchqualityevaluatorguidelines.pdf">ガイドライン</a>を出しているので、サイト構築をする際は参考にできます。（英語なので読みにくいです。）

## Webページの作成でのSEO対策
Webページを作成していく際のSEO対策として様々な手法がありますが大きく分けると、内部対策、外部対策、コンテンツ制作の3つに分類されます。

### 内部対策
内部対策は、サイト構造、タイトルタグ、見出し（hタグ）の調整、パンくずリストの最適化などWebサイト内の最適化手法のことを指します
#### 具体例
1. 内部リンクの最適化:
サイト内の関連ページへの自然な内部リンクを設置することで、ユーザーエクスペリエンスを向上させると同時に、検索エンジンにサイト構造を理解しやすくします。
2. サイトマップの作成:
XMLサイトマップを作成し、検索エンジンにサイト内のページを正確かつ迅速にクロールできるようにします。
3. URLの最適化:
簡潔で理解しやすいURLを使用することで、検索エンジンとユーザーの両方にとって有益です。キーワードを含むわかりやすいURLを設定しましょう。
4. ページの読み込み速度の最適化:
画像の最適化、不要なコードの削除、キャッシュの活用などを通じて、ページの読み込み速度を向上させます。これはユーザーエクスペリエンスだけでなく、検索エンジンのランキングにも影響を与えます。

### 外部対策
外部対策は、ウェブサイトの外部から対象Webサイトにリンクを集めることです。
#### 具体例
1. バックリンクの獲得:
外部のページやサイトに自社サイトのリンクを貼ってもらうことで、検索エンジンからの評価を向上させることができます。
2. オンラインディレクトリへの登録:
ポータルサイト（YahooやGoogleなど）でサイトの情報を広く公開することで、検索エンジンからの評価を向上させることができます。
3. ソーシャルメディアの活用:
LINE、X(旧Twitter)、Instagram、TikTok、Facebookなどを活用してコンテンツを共有し、リンクの数を増やしていくことで、検索エンジンからの評価を向上させることができます。

### コンテンツ制作
検索ユーザーにとって有益なコンテンツを継続的に発信して積み上げることで、検索エンジンからの集客を狙う手法です。

#### 具体例
1. 高品質で有益なコンテンツの作成:
ユーザーにとって価値のあるコンテンツを提供することが最も重要です。情報が正確で、ユーザーが求めている情報に応えるコンテンツは検索エンジンに評価されます。
2. キーワードを意識したコンテンツ作成:
キーワードリサーチを基に、ページごとに適切なキーワードを組み込んだコンテンツを作成します。
3. 定期的な更新と追加:
定期的なコンテンツの更新や新しい情報の追加を行い、サイトを活発に保ちます。
4. 多様なメディアの活用:
テキストだけでなく、画像、動画、インフォグラフィックなど多様なメディアを組み合わせてコンテンツを提供することで、ユーザーエクスペリエンスを向上させます。

## 参考

https://www.plan-b.co.jp/blog/seo/41913/

https://mieru-ca.com/blog/seo-measures/
スマートスピーカーでハッピーバースデートューユー♪を上手に歌う

## ハッピーバースデーが歌えない
誕生日の歌などちょっと歌う場面ってありますよね？実は一人で歌うのはちょっと緊張します。自信ないです。いつでも一発本番。そもそも練習なんかしたことない...。

### VUI(Voice User Interface)を使う
そこで、スマートスピーカーを使って練習できる仕組みをつくりました！家で料理中に手が使えないとき、車で手が使えないときに音声だけで操作できます！

練習コンテンツは以下の通り。

:::note info
- メロディ+歌声付き
- メロディのみ
- アカペラ
- その他のアレンジ版(ゴスペル風、イケイケな曲調など)
:::

## Voiceflowでスマートスピーカーのシナリオを作成
歌うまでの一連のフローを**Voiceflow**でつくります
VoiceflowはノーコードでGUIベースでAlexaやGoogle Homeなどのシナリオを作成できるAIチャットボットプラットフォームです。

https://www.voiceflow.com/

## 構成
このようなフローをつくりました。初めて見ると複雑に感じるかもしれませんが、直観的につくることができてとても便利です。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/9ac7baa5-04db-5d65-8389-b13de88b16cb.png">

1. 「誕生日」というキーワードを拾う(Capture+Condition)
1. ランダムで歌い方を決定(Random)
1. 曲の再生(Audio)

## 動かしてみた

### ハッピーバースデートューユーのメロディが流れるバージョン
<iframe width="560" height="315" src="https://www.youtube.com/embed/xKd-2kt1ZNY?si=-YBGb9EP3ZSvTTe0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

### 歌とメロディが流れるバージョン
音源が見つからなかったので、**Suno AI**でつくりました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/aLiu4v_nI8A?si=dhQoN2qXzJ43QEQA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

https://www.suno.ai/

元の音源は[こちら](https://app.suno.ai/song/20ae3654-a940-4311-bd38-3f073facf471/)

### アカペラで歌わせるバージョン
歌い終わるまで待ってくれます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/aBUvDzyKvjY?si=3umYsUG-S3Ve1I8E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

### つかってみて
ランダムで、一緒に歌ってくれる、メロディのみ、アカペラが振り分けられるのは楽しいと感じました。実際の本番ではアカペラなのですが、メロディにあわせたり一緒に歌ったりとプチカラオケ気分ですね！
歌の判定も入れてみたいです。

### アドバイス希望！
全然関係ないですが、ハッピーバースデーの歌すら自信のない私に歌が上手くなる方法を教えてください！！！
calendar-pickerのアイコンを先頭にしてカスタムのsvgを適用させたい

# 背景
カレンダーを以下のような表示にしたいなと思った為です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/3be96585-054f-c1c3-93d0-010a032def49.png)

# 実装
今回は以下のアイコンを例にします。

https://icon-sets.iconify.design/bx/calendar/

```css
input[type="date"]::-webkit-calendar-picker-indicator {
    background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="18" height="18" viewBox="0 0 24 24"%3E%3Cpath fill="%230098c2" d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"%2F%3E%3Cpath fill="%230098c2" d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2M19 8l.001 12H5V8z"%2F%3E%3C%2Fsvg%3E')
}
```
以下のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/70fd3235-4d20-f159-e60d-b1b19e3fbf11.png)

次にアイコンとテキストの位置を反転させます。

```css
input[type="date"]::-webkit-calendar-picker-indicator {
    background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="18" height="18" viewBox="0 0 24 24"%3E%3Cpath fill="%230098c2" d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"%2F%3E%3Cpath fill="%230098c2" d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2M19 8l.001 12H5V8z"%2F%3E%3C%2Fsvg%3E');
    position: absolute;
    left: 750px;
}

input[type="date"]::-webkit-datetime-edit {
    position: relative;
    left: 50px;
}
```

枠線も消します
```css
input[type="date"] {
    border:none;
}
```
以下のようにイメージした日付入力フォームができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/d8cc55b8-d8f0-ea7c-12b3-4b2274ac24e8.png)

# その他
shadowDOMをdevtoolで見れるようにする
devtool開く→歯車　→　Elements　→　「Show user agent shadow DOM」　をチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/dba63cc4-57bc-448a-52cc-c1cc8643a016.png)

これでdevtool開きながら位置を調整しました。

# 参考
- https://qiita.com/d0ne1s/items/418a790863837a171965
- https://stackoverflow.com/questions/29436074/change-date-input-triangle-to-a-calendar-icon
- https://note.com/bears_aimaru/n/nf3c35fefa542
- https://stackoverflow.com/questions/63121577/how-do-i-change-the-position-of-the-datepicker-calendar-icon-in-my-bootstrap-for
STM32G031とNJL7502Lでなんちゃってluxをシリアル出力(明るさ)(今ふう20231227)


x約2Vで約400luxにならないといけないがたんに電圧の200倍にする

目的
adcのテスト用

参考

https://qiita.com/caa45040/items/cc1d9682a42c84c9b933


![o_cop882.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/b61e14fc-9165-7cb1-a25a-0178e75c7e9c.jpeg)


```c++


//S_SER_NJL7502_031_1

//インクルド
#include <Arduino.h>
#include <HardwareSerial.h>


//初期化
void setup()
{

  delay(3000); //not delete

  //シリアルの初期化
  Serial.setTx(PA2_ALT1);
  Serial.setHalfDuplex();
  Serial.begin(9600);

} //setup


//メインループ
void loop()
{

  //アナログ値の読み込み
  int s = analogRead(PB7);   // PIN1

  //luxの表示
  Serial.println( (s * 660) >> 10 ); // 小数点以上

  //1秒の待ち
  delay(1000);

} //loop


```
NeosVR コンパイラ その11

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
俺コードの言語仕様を見直しする。

# 俺コードの目的
NeosVRのオブジェクトの生成を記述する。

# 俺コードの言語仕様

- use Ore test0
rootのオブジェクトを実体化して、「test0」と名前を付ける。

- new LogiX.T
LogiXオブジェクトの「T」を実体化する。

- add LogiX.T
LogiXオブジェクトの「T」をrootのChildrenにpushする。

- {a} = LogiX.T
aは、バーチャルワイヤーでLogiX.Tの出力に繋ぐ
入力は無し。

- {} = LogiX.Display a
バーチャルワイヤーaを、LogiX.Displayの入力に繋ぐ
出力は無し。

基本　左辺が出力、右辺が入力。

# 俺コードのサンプル
LogiXノード、TとDisplayを繋ぐコード。

```
use Ore test0
new LogiX.T
new LogiX.Display
{a} = LogiX.T
{} = LogiX.Display a
add LogiX.T
add LogiX.Display
```

# 生成されたオブジェクト

![2023-09-28 01.21.16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/007b16a0-558a-c5a6-8ac1-439f505da10e.jpeg)


以上。
sympyの 「Solving Beam Bending Problems using Singularity Functions」を調べた。

# example-1

https://docs.sympy.org/latest/modules/physics/continuum_mechanics/beam_problems.html#example-1

```python
from sympy import *
x, y, z = symbols('x y z')
init_printing(use_unicode=True, wrap_line=False)
from sympy.physics.continuum_mechanics.beam import Beam
E, I = symbols('E, I')
b = Beam(9, E, I)
b.apply_load(12, 9, -1)
b.load
b.apply_load(50, 5, -2)
b.apply_load(8, 0, 0, end=5)
b.bc_deflection.append((0, 0))
b.bc_slope.append((0, 0))
# 
R, M = symbols('R, M')
b.apply_load(R, 0, -1)
b.apply_load(M, 0, -2)
b.load
b.solve_for_reaction_loads(R, M)
b.reaction_loads                      ;print("# b.reaction_loads =",b.reaction_loads)
b.load                                ;print("# b.load           =",b.load)

# b.shear_force()
# b.bending_moment()

# b.plot_shear_force()  
# b.plot_bending_moment()  
```




# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

# いつもと違うおすすめです。
~~＞一部に等分布荷重を受ける単純支持はり~~
~~＞JSME p89~~
　
~~＞単純支持ばり 10)~~
~~＞構造力学公式集 p138~~
MATLAB HOME を買いました

# 自己紹介
組み込みエンジニア２年生です
MATLAB,C++をかじった程度でまだまだ技術が足りていません。





# 購入に至った経緯
新卒で入社した会社で組み込みエンジニアとして働き始めて
もうすぐ3年目、、、会社のライセンスだけではMATLABを遊び倒せない
と感じ、HOME版を購入を決意しました。

### 購入したライセンス
+ MATLAB(m言語)
+ Simulink

# 購入の流れ
1. MathWorksアカウントにサインインする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662936/79382347-5ffd-a721-c8b8-219ff02dfaca.png)

2. サイト内検索から「MATLAB HOME」と検索し、「価格と製品を確認する」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662936/d4d2a14c-1eed-0d3c-a4b6-6cfa0a0e0efa.png)

3. その後は流れに従い、購入したいMATLABライセンスを選択し、購入

## 起動まで確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662936/a3d41d59-6c3f-d610-2443-382f86f7634d.png)
購入後,MATLABインストーラがダウンロードできるようになる。
指示に従ってインストーラをダウンロード→インストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662936/4f5a65ce-a99d-0cb9-f185-1668dd31ff70.png)
無事起動しました

## 今後やりたいこと
#### DockerとMATLABでなんかやりたい
日々組み込み系の仕事をしているのでWeb系に憧れがあり
Webっぽいことをやってみたいです

#### Simulinkをもっと勉強する
業務上Simulinkを毎日のように使用しますが、初心者もよいところです
まずはMathWorksのSimulink基礎を勉強していろんなブロックを覚えます

#### MATLAB芸人を目指す
エンジニアの悪ふざけで作られたものってすごくユーモラスで面白いと感じています
「外国語をマスターした」=「外国語でジョークが言える」と言われますが
MATLAB/Simulinkでジョークが言えるくらいマスターできればいいなと思っています
Scannerの作成

1日に二本出してますね
更新頻度が極端...

今回はScannerを作ります。Lexerで分割したやつをmapに直すやつですね。
名前Scannerで合ってるかわからない

そんじゃ早速。
```java:Scanner.java
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import java.util.regex.Pattern;

public class Scanner {
    public Map<String, Object> Scan(ArrayList<String> list){
        String functionName = list.get(0);
        ArrayList<Object> args = new ArrayList<>();
        boolean isString = false;
        for(String element : list){
            if(element.length() == 1){
                if(Lexer.getType((element.toCharArray()[0])).equals(Type.bracket)){
                    continue;
                }
                if(Lexer.getType((element.toCharArray()[0])).equals(Type.string)){
                    isString = !isString;
                    continue;
                }
                if(Lexer.getType((element.toCharArray()[0])).equals(Type.split)){
                    continue;
                }
            }
            if(isString){
                args.add(element);
            }else if(checkString(element)){
                args.add(Integer.parseInt(element));
            }
        }
        Map<String,Object> obj = new HashMap<>();
        obj.put("function", functionName);
        obj.put("args", args);

        return obj;
    }

    // https://uha-blog.com/java/mojiretsu-suti-hantei/
    // 引数で受け取った文字列が数値かどうか正規表現でチェックするメソッド
    public static boolean checkString(String text) {

        boolean res = true;

        Pattern pattern = Pattern.compile("^[0-9]+$|-[0-9]+$");
        res = pattern.matcher(text).matches();

        return res;
    }
}

```

解説をば。
関数[checkString]は文字列が数字かどうか判定するために[ここ](https://uha-blog.com/java/mojiretsu-suti-hantei/)からお借りしました。
内容をまとめると[正規表現](https://qiita.com/List202/items/05a27c46d9b11d04fb39)を使ってます。

Scan関数本体へ。
これは[Lexer作成の回](https://qiita.com/Never3924/items/2218057f7ce6e5200bc5)で作ったやつを引数に取る想定で利用しています。
関数の名前が最初に来ると思いこんで(危険)、list.get(0)してます。
引数は()や" '、, ;を省いてます。
文字列かどうかも判定してます。
Listの型がObjectなのはどんな引数が入るか予測できないため。
使うときには[キャスト](https://qiita.com/ryome/items/2453949b978bf166e204)してください。
そんで返すMapに結果を打ち込んでreturnします。

## 最後に
なんか結構雑になりましたね。
まぁ1日二本も出してるからしかたない(自己責任)
そんじゃまた。
またいつか記事投稿強化月間でもしたいですね。
Arduino UNOとNJL7502Lでなんちゃってluxをシリアル出力(明るさ)(電圧も出力)


x約2Vで約400luxにならないといけないがたんに電圧の200倍にする

目的
adcのテスト用

前の記事

https://qiita.com/caa45040/items/cc1d9682a42c84c9b933

電圧変換

https://qiita.com/caa45040/items/09848d08a81b0d157458


![o_cop881.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f996767e-30be-bad3-8bd3-13b4b406b2c8.jpeg)



```c++


//S_SER_NJL7502_UNO_2

//インクルド
#include <Arduino.h>


//初期化
void setup()
{

  //シリアルの初期化
  Serial.begin(9600);

} //setup


//メインループ
void loop()
{

  //アナログ値の読み込み
  int s = analogRead(A0);

  //s=250;

  //温度の表示
  Serial.print( (long)((long)s * (long)1000) >> 10 );
  Serial.print( "\t");
  Serial.print( ( (unsigned int)0b100111 * (unsigned int)s + (s >> 4 ) ) >> 3);
  Serial.println( "mV");


  //1秒の待ち
  delay(1000);

} //loop


```
プログラマの生産性を暴上げするには高スペックマシンへの買い替えが一番なのではないか (IntelのMacBookAirをM3のMackBookProに買い替えた)

# MacBookをスペックアップ

「Intel MacBook メモリ16GB」から「 M3 MacBook メモリ32GB」にスペックアップした。

ちなみにディスク容量もグレードアップしたので40万円ぐらいかかった。

<img width="1178" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/15001917-7cca-4b1d-bd86-73543832e754">

# 実際の効果

- Nuxtの起動が体感5倍以上になった
- dockerからのRailsの起動が体感5倍以上になった

最初は目を疑って見間違えかと思ったが、何度試しても確かに起動していた。
他のエンジニアに話したら「dockerって起動時はコーヒー淹れながら待つものじゃないんですか？」っていう反応が。

その他にも

- Chromeでのブラウザも明らかに快適になった
- zoom / Teams で画面共有しながら話す時も local で動かしているアプリケーションも爆速のまま

# 機会損失の悲しみ

逆に今まで、今より比較的低スペックなPCを使い続けていたことで、生産性が何十パーセント機会損失していたのだろうと思ったら悲しかった。

# Macのアクティビティモニタのメモリ使用量

これはあんまりアテにならないはず。
今でも36GB中の32GBが使われていることになっているが、まさかとは思う。

<img width="635" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/baa46986-a64e-479d-bc35-5248782c4b69">


# 予想しなかったデメリット


高速化は本当に嬉しいのだが、ひとつだけデメリットもあった。
マシンが速いと自分もすごい速度で作業ができてしまうので、エネルギーを使って疲れる速度も倍加されるのだ。

だが休息の取り方を調整すれば結果OKだ。

# なぜ旧マシンは遅かったのか

そんなに悪いスペックではなかったと思うのだが。
Macをいったん完全に初期化してから動作を試しても遅い部分があったので、何らかのゴミが溜まっていたからというせいでもなさそうだ。

メモリの違いか、CPUの違いか、その両方か。不思議だ。


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura


# 関連

https://note.com/yumainaura/n/ndf532130360f

https://note.com/yumainaura/n/nbe509c4fe633

https://note.com/yumainaura/n/ndbd05553df76