OmniAICreator/Qiita-1.07M huggingface dataset:
UnknownHostExceptionsを発生させる

# 初めに
この記事では、意図的に UnknownHostException を発生させる環境を作り出す方法について調査した結果を共有します。これにより、ネットワーク設定やDNSに関連する例外が発生する状況を再現できます。

# 手順
## 1. JavaでS3へのファイル配置プログラムの作成
以下は、S3バケットにファイルをアップロードするシンプルなJavaプログラムです。UnknownHostException を発生させる実験に使用します。
``` java
try {
        var filename = //ファイル名
        var region = //AWSのRegion
        var bucket = //バケット名
        S3Client s3 = S3Client.builder().region(region).build();
        PutObjectRequest putOb = PutObjectRequest.builder().bucket(bucket).key(filename).build();
        s3.putObject(putOb, RequestBody.empty());
    } catch (Exception e){
        e.printStackTrace();
    }
```
このプログラムは、指定されたS3バケットに対してファイルをアップロードします。後述する手順でDNS設定を変更し、UnknownHostException を発生させます。

## 2. WidnwosPCのDNSを設定する
1. [設定] ⇒ [ネットワークとインターネット] ⇒ [Wi-Fi] ⇒ [アダプターのオプションを変更する] に移動します
2. 使用しているネットワークアダプターのプロパティを開き、[インターネットプロトコルバージョン4 (TCP/IPv4)] を選択してプロパティを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893794/521bf3f1-c5c7-7500-17c7-1b988f2d483a.png)
3. [次のDNSサーバーのアドレスを使う] を選択し、存在しないDNSサーバーのIPアドレスを入力します。これにより、ネットワークが正しいDNSにアクセスできなくなり、エラーが発生します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893794/0af442d3-8276-a549-9995-2df78386b401.png)

# まとめ
この手順を使用して、意図的に UnknownHostException を発生させることができました。このエラーは、DNSが正しく解決できない場合に発生しますが、他にもネットワーク設定やサーバーの応答に問題がある場合にも発生します。ネットワークやDNS周りの問題を再現したい場合に、この方法が有効です。
【React Jest】svgのimportでエラー (Jest encountered an unexpected token)

# はじめに
Reactの自動テスト、コンポーネント側でsvgをimportしてたのですが、読み込みエラーが出て困ったため記載します

# 問題
テスト対象のコンポーネントでsvgをimportしてところ以下エラーが発生

```shell
 ● Test suite failed to run
                                                    
    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.
```

書いたテスト文
```tsx
import * as React from 'react';
import App from "../App";
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';

describe("Title Test", () => {
  it("タイトルがHello Jestであること", () => {
    // testId(title)を指定して取得
    render(<App />);
    const title = screen.getByTestId("title");
    expect(title).toHaveTextContent("Hello Jest");
  });
});
```

# 原因
jestでは、svgやcssなどのファイルは直接読み込むことができず、mockなどの作成が必要そう

# 解決方法
モックを作成

```js
// /src/__mock__/SvgMock.jsを作成
// 以下内容
const React = require('react');

const SvgMock = (props) => {
  return React.createElement('svg', props);
};

module.exports = SvgMock;
```

```js
// jest.config.js修正
export default {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["./jest.setup.ts"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy",
    "^.+\\.(svg)$": "<rootDir>/src/__mocks__/SvgMock.js" ← 追加
  },
};

```
react-rndの使い方を徹底解説する

## はじめに
リサイズやドラッグが可能なコンポーネントを作成できる、react-rndというライブラリがあるのを知りました。

業務で使っていたのですが、あまり情報が充実していなかったので、その使い方について徹底的に解説します。

### 前提条件
使用している各ライブラリ等のバージョンは以下の通りです。
| ツール | バージョン |
|:-|:-|
| React | 18.2.0 |
| TypeScript | 5.2.2 |
| react-rnd | 10.4.12 |
| Vite | 5.2.0 |

## 基本的な使い方
### インストール
以下のコマンドでインストールします。

```bash
npm install react-rnd
```

### 基本の形
``` react
<Rnd>
  <div style={{ border: "2px solid blue", padding: 5 }}>
    テストコンポーネント
  </div>
</Rnd>
```
`Rnd`コンポーネントを使用します。
リサイズ、ドラッグさせたいコンポーネントを子コンポーネントとして設定します。
これだけで、画面上で自由にサイズや位置を変更できるコンポーネントが出来上がります。

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/64127a25-1a50-f5a0-d601-fe13bd06c890.gif)

## 様々なオプション
`Rnd`コンポーネントには多くの`Props`が用意されており、それらを使用することで、より細かい設定を行うことができます。
すべての`Props`は任意項目となっています。

### default
#### 概要
コンポーネントの初期状態の位置、および大きさを設定できます。

#### 設定方法
```react
<Rnd default={{ x: 10, y: 10, width: 100, height: '100px' }}>
  {/* 任意のコンポーネント */}
</Rnd>
```
`x`、`y`は数値で、コンポーネントの左上がくる座標の位置を指定します。
`widht`、`height`は数値、または文字列で設定します。
数値で指定した場合はpxとして処理されます。
文字列の場合はpxや%などでの指定が可能です。

### size
#### 概要
コンポーネントの大きさを指定します。
`default`と`size`の両方が指定されている場合、`size`の値が使用されます。
`state`で大きさをコントロールしたい場合に使うとよいです。

#### 設定方法
```react
<Rnd size={{ width: 100, height: 100 }}>
  {/* 任意のコンポーネント */}
</Rnd>
```
設定できる値は`default`の`width`、`height`と同じです。


### position
#### 概要
コンポーネントの位置を指定します。
`default`と`position`の両方が指定されている場合、`position`の値が使用されます。
`state`で位置をコントロールしたい場合に使うとよいです。

#### 設定方法
```react
<Rnd position={{ x: 30, y: 30 }}>
  {/* 任意のコンポーネント */}
</Rnd>
```
設定できる値は`default`の`x`、`y`と同じです。

### className
#### 概要
一般的なコンポーネントに設定する`className`と同じです。設定方法は省略します。

### style
#### 概要
一般的なコンポーネントに設定する`style`と同じです。設定方法は省略します。

### minWidth、maxWidth、minHeight、maxHeight
#### 概要
それぞれ、コンポーネントの最小幅、最大幅、最小高さ、最大高さを設定します。
リサイズした場合でも、設定した値の内で収まるようになります。

#### 設定方法
```react
<Rnd minWidth={200} maxWidth={400} minHeight={200} maxHeight={400}>
  {/* 任意のコンポーネント */}
</Rnd>
```
設定できる値は`default`の`width`、`height`と同じです。
また、4つすべてを設定する必要はありません。いずれか一つのみの設定も可能です。

### resizeGrid
#### 概要
コンポーネントをリサイズする際の増分値を指定できます。

#### 設定方法
```react
<Rnd resizeGrid={[5, 5]}>
  {/* 任意のコンポーネント */}
</Rnd>
```
値は数値の配列で指定します。x軸方向の増分値、y軸方向の増分値となっています。
デフォルトは`[1, 1]`です。

### dragGrid
#### 概要
コンポーネントをドラッグする際の増分値を指定できます。

#### 設定方法
```react
<Rnd dragGrid={[5, 5]}>
  {/* 任意のコンポーネント */}
</Rnd>
```
値は数値の配列で指定します。x軸方向の増分値、y軸方向の増分値となっています。
デフォルトは`[1, 1]`です。

### lockAspectRatio
#### 概要
コンポーネントのアスペクト比を固定できます。

#### 設定方法
```react
<Rnd  lockAspectRatio={true}>
  {/* 任意のコンポーネント */}
</Rnd>
```
真偽値、もしくは数値を設定できます。
`true`とした場合は、初期値のコンポーネントのアスペクト比を維持します。
`16/9`のようなアスペクト比の数値を設定した場合は、その設定した数値を維持します。

## まとめ
まだまだ多くの`Props`がありますが、すべてを紹介しきれていないので、今後追記していく予定です。
【HTML】viewportは開発初期に指定した方がおすすめ！

# はじめに
Webページのレスポンシブ対応を行っている際、設定したメディアクエリが反映されませんでした。

# 原因
**headタグにviewportを指定していない**ことが原因でした。viewportを指定していないことが原因で、980px未満の画面幅が取得できず、980px未満の画面幅をブレイクポイントとして設定したメディアクエリが反映されないようになっていました。

# 解決策
下記コードのように、**headタグにviewportを指定する**ことで980px未満の画面幅を取得し、980px未満の画面幅をブレイクポイントして設定したメディアクエリが反映されるようになりました。

~~~html
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
~~~

# 教訓
viewportを指定することでメディアクエリを利用しレスポンシブ対応できるようになります。しかし、レスポンシブ対応を行う前にviewportを指定しない状態で既に画面を作りこみリリースしていました。そのため、**途中でviewportを指定すると大幅にデザインが崩れてしまいました**。なるべく工数を抑える方向で最終的に行ったレスポンシブ対応は、viewportを指定せずにタブレットの幅（1280px）をブレイクポイントとして、タブレットとスマホを同一のデザインに調整しました。 **<font color="Red">途中でviewportを指定すると今回のようにデザインが大幅に崩れてしまう可能性があるため、viewportの指定は開発初期に指定することをお勧めします！ </font>**


# 参考記事
- https://qiita.com/santmove_com/items/389f502d45b13eb6ad1a
- https://qiita.com/kazuki1012/items/a285e1022f69e8ab069b
- https://qiita.com/IwashiMorino/items/51e876c3d2c78d61e489
【jest】jest.mockをテストケースの中に記述すると上手く動作しない。

# 環境

* React + Typescript
* Jest 29.7

# 発生した問題

JestでsupabaseのAPIへのアクセスを行う関数をモック化しようとした際、モック化が行われずsupabaseへのアクセスが行われてしまった。

※実際のテストコード
https://github.com/Y-miu-Y/jisou-ex3/blob/4c4fa8e22c8e4404ce0710cee483cb880950ad1e/src/__tests__/StudyRecord.spec.tsx

## 調査方法

ライブラリが動かない際は、
**環境が悪い**のか**コードが悪いのか**の原因を切り分ける必要があると教わりました。
なので、一度同じ設定ファイルを利用し、最小限でモックを動かすテストコードを作成しました。

https://github.com/Y-miu-Y/jest-mock_INV/blob/master/src/__test__/sample2.test.ts

``` sample.ts
// 実際にはsupabaseのアクセスを行う動作
export const sample = async() => {
  console.log("モックではなく実動作をした");
  return 0;
};
```
``` sample2.test.tsx
import { sample } from "../sample";

describe("モックお試し", () => {
  it("テスト確認", async () => {
    expect(true).toBeTruthy();
  });

  it("モック動作しない", async () => {

    const mock = jest.fn().mockResolvedValue(Promise.resolve(1));

    jest.mock("../sample", () => {
      return {
        sample: () => mock(),
      };
    });
    // モック化が正しく行われていれば、このテストは失敗するはずですが、通過してしまいます。
    expect(true).toBeTruthy();
    sample().then((res) => {
      expect(res).toBe(0);
    });
  });
});
```

# 原因

問題の原因は、jest.mock()の配置にありました。Jestのモック機能を正しく動作させるには、jest.mock()をファイルの先頭に配置する必要がありました。

``` sample.test.ts
import { sample } from "../sample";

const mock = jest.fn().mockResolvedValue(Promise.resolve(1));

jest.mock("../sample", () => {
  return {
    sample: () => mock(),
  };
});

describe("モックお試し", () => {
  it("テスト確認", async () => {
    expect(true).toBeTruthy();
  });

  it("モック", async () => {

    expect(true).toBeTruthy();
    sample().then((res) => {
      expect(res).toBe(1);
    });
  });
});

```

Jest公式ドキュメント（ https://jestjs.io/ja/docs/mock-functions ）も`jest.mock()`は必ず先頭に記載しているようなので、ルールとして統一されているようです。

Claudeに聞いたらこんな回答が返ってきました。

> Jest公式ドキュメント（モック関数）でも、jest.mock()は常にファイルの先頭に配置されています。これはJestの設計上の要件であり、モックの定義がモジュールのインポートよりも先に行われる必要があるためです。

# 最後に

### 公式ドキュメントを必ず参照すること

ライブラリのエラーで行き詰まった際は、必ず公式ドキュメントを参照することが重要です。特に「動作しない」というケースでは、公式の実装例を参考にすることが最も正確かつ効率的な解決方法となりました。
（これを行わずに1週間半ほど無駄にしていまいました…）

### テストケースの中にjest.mock()を記述した意図

私がテストケースの中に記述したのは、テストケースごとにモックで返却する値を変えたかった…といった意図があり、素人考ながらこういった実装にしてしまいました。

正しい方法を確立できたらまた別記事にします。


ご拝読いただきありがとうございました。
UbuntuにNerd Fontをインストールする

## はじめに
Neovimを使うのにNerd Fontをインストールしてみました。

## インストール方法
### 1. 公式サイトから好きなFontをダウンロードする
[公式サイトのダウンロードページ](https://www.nerdfonts.com/font-downloads)からフォントをダウンロードします。

フォントの見た目に関しては、[プレビュー](https://www.programmingfonts.org/#oxproto)から確認することができます。

今回は、`Hack`をダウンロードしました。

### 2. Zipファイルを解凍します。

```bash
filename=Hack.zip
extension="${filename##*.}"
filename="${filename%.*}"

# ディレクトリ作成
mkdir ${filename} && pushd ${filename}

# 解凍
unzip ../${filename}.${extension}
popd
```

### 3. ホームディレクトリに`.fonts`フォルダを作成して解凍したファイルを移動します。

```bash
mkdir -p ~/.fonts

# 移動させる
mv ${filename} ~/.fonts/
```

### 4. Ubuntuのフォントキャッシュを更新します。

```bash
fc-cache -fv
```

### 5. Terminalを再起動して、インストールされていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693040/10089a9e-6204-e866-f5a4-adf55d7ef3d0.png)

## 終わりに
UbuntuにNerd Fontをインストールする方法をまとめました。

ご参考になれば幸いです。
【初心者】気になっていたので、Podmanインストールしてみた


普段、Dockerを使っていますが、「Dockerより軽くて安全らしい!」という  
噂だけで、Podmanが気になりすぎるので、使ってみることにしました。


## はじめに
とりあえず、最低限使えるレベルのものをレベルで書いていきます。  
詳しい項目の説明等は、別途書く予定です。

### Podmanのいい所
Dockerと互換性があるため、Dockerのコマンドをほぼそのまま使うことができます！  
例えば、Dockerの `docker run` は、Podmanの `podman run` など、  
置き換えるだけで使える！便利！！

## 何が軽くて安全なのか？
- 安全な理由
  - 非root権限でコンテナを実行することができる。  
    > Dockerは、デフォルト設定でコンテナをroot権限で実行される
    > 対応として、Dockerfile の USER で指定したユーザーで実行することで、
    > root権限での実行を防ぐことができるが、Podmanはデフォルトで非root権限で実行される  
  
- 軽い理由
  - Podmanはデーモンを使わないため、Dockerよりも軽量
    > デーモンって？
    > - デーモン（英: daemon）は、UNIX系オペレーティングシステムにおいて、  
    >   バックグラウンドで動作するプロセスのことです。 

## なにわともあれ、やってみよう！

### 前提条件
- WSL2がインストールされていること

### Podmanのインストール

1. Linuxの名前やバージョン、ID等を取得
  ```bash
  . /etc/os-release
  ```
2. Ubuntuシステムでのパッケージのソースリストに新しいリポジトリを追加する 
  ```bash
  sudo sh -c "echo 'deb http://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/x${NAME}_${VERSION_ID}/ /' > /etc/apt/sources.list.d/devel:kubic:libcontainers:stable.list"
  ```

3. wgetコマンドを使用して、指定されたURLからファイルをダウンロードして、Release.keyという名前で保存する
  ```bash
  wget -nv https://download.opensuse.org/repositories/devel:kubic:libcontainers:stable/x${NAME}_${VERSION_ID}/Release.key -O Release.key
  ```

4. apt-key addコマンドを使用して、Release.keyファイルをリリースキーとしてシステムに追加する
  ```bash
  sudo apt-key add - < Release.key
  ```

5. パッケージリストを更新する (-qq : 出力を抑制するオプション) 
  ```bash
  sudo apt-get update -qq
  ```

6. Podmanをインストールする
  ```bash
  sudo apt-get -qq -y install podman
  ```

7. Podmanのバージョンを確認する
  ```bash
  podman --version
  ```

## 終わりに
Podmanを使ってみましたが、Dockerとの互換性があるため、  
Dockerを使っている人にとっては、操作感は変わらないかもしれません。  
今回は、インストールまでの手順を書きましたが、  
また、コンテナ同士の通信や、ネットワーク周りの設定なども試してみたいと思います！



## 参照
- [Docker一強の終焉にあたり、押さえるべきContainer事情](https://zenn.dev/ttnt_1013/articles/f36e251a0cd24e)
- [Docker Desktopと代替ソフトウェア大集合](https://devops-blog.virtualtech.jp/entry/20230104/1672800265)
- [WSLのLinux側からPodmanを利用する方法](https://zenn.dev/dozo/articles/084b1822a281af)
PgAdmin4でグラフを出力する



PgAdmin4にグラフ描画できる機能が大分前に追加されていることを知ったので試してみます。

https://x.com/heymingwei/status/1560024583490584577

今回は分かりやすくエネルギー消費量の折れ線チャートを引いてみます

データはこちらからダウンロードします

データの中身については精査していないので、集計の妥当性については考慮外とします。

https://docs.timescale.com/tutorials/latest/energy-data/dataset-energy/

```sh
createdb -U postgres energy
psql -U postgres -d energy
```

```sql
energy=# CREATE TABLE "metrics"(
energy(#     created timestamp with time zone default now() not null,
energy(#     type_id integer                                not null,
energy(#     value   double precision                       not null
energy(# );
CREATE TABLE
energy=# \copy metrics FROM 'metrics.csv' DELIMITER ',' CSV HEADER;
COPY 2523725
```

データの準備が出来たらPgAdmin4を起動し、グラフ化したいクエリを実行します。
```sql
select
  created,
  sum(value)
from
  (
    select
      date_trunc('hour', created) as created,
      value
    from
      metrics
  )
group by
  created;
```

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/72ae3c59-a0b8-cc36-113d-e03e17a947ea.png)

実行後、右下の波線アイコンをクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/d5278a16-f0c0-9915-a73c-fe8ab9512e30.png)

グラフの種類と軸を設定し、Generateボタンを押すとグラフが生成されます。
また、画像としてダウンロードもできます。
![graph_visualiser-1725803366018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/0d7e0f32-2159-070d-c2e1-bdac4b216016.png)

折れ線チャート以外も作成できます。
```sql
select
  type_id,
  sum(value)
from
  metrics
group by
  type_id;
```
![graph_visualiser-1725803556220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/3465f37e-cb66-4b03-f17d-61a29489d265.png)

わざわざCSVを出力して、Excelやダッシュボードに取り込まなくても簡単なグラフなら作成できるので、良い機能だと思いました。
環境構築メモ - Ubuntu編


環境構築としてUbuntuのセットアップについて記録しておく


### 1.PowerShellの起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/9e94e621-1196-f712-6530-1f17709e7b25.png)

※PawerShellがインストールされていない場合はインストールを行う
https://learn.microsoft.com/ja-jp/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4
<br>
### 2.wslインストール
```
wsl --install
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/118f1bfd-d7c3-ce38-b623-770db6783b0d.png)
<br>
### 3.Ubuntuディストリビューションをインストールし、usernameとpasswordを設定
```
wsl --install Ubuntu
```
![スクリーンショット 2024-09-08 222240.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/3bb944c4-6f6b-4642-f907-74e62f7ffd7a.png)
<br>
### 4.更新・日本語化
```
sudo apt update
sudo apt upgrade

sudo apt install language-pack-ja
sudo update-locale LANG=ja_JP.utf8

sudo apt install manpages-ja manpages-ja-dev
```
<br>

### 5.ターミナルをUbuntuで再起動

![スクリーンショット 2024-09-08 224307.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/92216767-69af-9704-0beb-a45497f75a5c.png)
![スクリーンショット 2024-09-08 224340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/6c751702-1b48-97bd-3f2e-53e55b0ddb1f.png)
「npm WARN EBADENGINE」が表示される

# 問題

コンソールから`$ npm i`を実行時、以下のワーニングが表示される

```bash
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@eslint/config-array@0.17.1',
npm WARN EBADENGINE   required: { node: '^18.18.0 || ^20.9.0 || >=21.1.0' },
npm WARN EBADENGINE   current: { node: 'v18.16.0', npm: '9.5.1' }
npm WARN EBADENGINE }
# 以下同様のワーニングが多数
```

# 原因

Node.jsのバージョンが違うことが原因でした。

```bash
npm WARN EBADENGINE Unsupported engine {
# インポート対象のパッケージ
npm WARN EBADENGINE   package: '@eslint/config-array@0.17.1',
# 必要なバージョン
# 「18.18.0」 または 「20.9.0」 または　「21.1.0以上」
npm WARN EBADENGINE   required: { node: '^18.18.0 || ^20.9.0 || >=21.1.0' },
# 現在のバージョンはv18.16.0
npm WARN EBADENGINE   current: { node: 'v18.16.0', npm: '9.5.1' }
npm WARN EBADENGINE }
```

# 解決

Node.jsのバージョンを対応のバージョン（今回は「18.18.0」）にして再度`$ npm i`を実行するとワーニングが解消されました。
Vercelでバックエンドをデプロイする際に詰まったポイント（TypeScript + React + Express + MongoDB）

## はじめに

今回、React+Express+MongoDBを利用したTodoリストアプリをVercelにデプロイしました。
その際、バックエンドのデプロイでいくつかハマりポイントがあったので、備忘録として記事にまとめます。

## 使用技術
- 言語：TypeScript
- フロントエンド：React
- バックエンド：Express
- データベース：MongoDB (MongoDB Atlas)
- デプロイ先：Vercel

## 問題発生
Vercelにバックエンドをデプロイした際、発行されたURLにアクセスすると下記のようなエラーに遭遇しました。（デプロイ時の構成を触って何度かデプロイした際に遭遇したエラー）
- `404 NOT_FOUND`
- `FUNCTION_INVOCATION_FAILED`
- `405 Method Not Allowed` ← これはPostmanからのリクエストテスト時のレスポンスで確認

これらのエラーに対して、ローカル環境では正常に動作していたため、デプロイ先での設定や構成に問題があると考え、原因として考えられるものをとりあえず確認し、ネットで情報を集めつつトライアンドエラーで対応していきました。

### 原因1: CORSの設定
まず、CORSの設定を見直しました。
Vercelのデプロイ環境ではCORS設定が重要になります。
ExpressでのCORS設定は以下のようにしました。

```typescript
import cors from 'cors';

app.use(cors({
    origin: true,
    method: []
}));
```
この設定で、origin: true にすることでどのドメインからのリクエストでも受け入れられるようにしました。
※最終的にoriginはフロントエンドのURLを指定しました。

### 原因2: VercelのFunctions設定
Vercelでは、Expressのルーティングをサーバーレス関数として動作させるため、設定に注意が必要です。
特にファイルの構造やエントリーポイントを適切に設定する必要があります。

プロジェクトの構成(一部のみ抜粋、全容は→https://github.com/noritakaichinose/TodoList)
```plaintext
.
├── dist/
│   └── index.js
├── src/
│   ├── routes/
│   └── index.ts
└── vercel.json
```
TypeScriptで記述していたため、デプロイ時に適用されるvercel.json上でエントリーポイントを下記のように指定してやる必要がありました。

vercel.jsonの設定
```json
{
  "version": 2,
  "builds": [
    {
      "src": "dist/index.js",
      "use": "@vercel/node",
      "config": { "includeFiles": ["dist/**"] }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,OPTIONS,PATCH,DELETE,POST,PUT",
        "Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
      }
    }
  ]
}
```

### 原因3: MongoDBとの接続
バックエンドがVercelのサーバーレス環境で動作するため、MongoDB Atlasと接続する際に注意が必要です。
ローカルでは問題なく接続できていたのに、デプロイ環境ではエラーが発生していました。

問題点は下記です。
- Vercelのプロジェクト上での環境変数の設定
- MongoDBのネットワークアクセスの設定 (IPアドレスのホワイトリスト)

#### Vercelでの環境変数の設定
ローカルでは.envから環境変数として取得していたMongoDBの接続情報ですが、Vercel上でも環境変数を定義してやる必要があります。
プロジェクトダッシュボードから「Settings」タブを開き、「Environment Variables」の項目からKeyとValueの組み合わせで環境変数を追加することができます。
.envのインポートでも追加することができるので、どちらの方法でも結構です。

#### MongoDBのネットワークアクセスの設定
この問題はデプロイ時の構成、環境変数の問題が解決した後に気づいた問題ですが、MongoDBのホワイトリストの設定をしていないため、データベースへのアクセスができない状態になっていました。
ただ、VercelでデプロイされたアプリはIPアドレスが動的なので、結果的にすべてのIPアドレスを許可する「0.0.0.0/0」を設定することになりました。

## まとめ
最終的に、自分の場合は[VercelのFunctions設定](#VercelのFunctions設定)と[MongoDBのネットワークアクセスの設定](MongoDBのネットワークアクセスの設定)が原因でした。
原因として挙げた箇所はチェックする価値があると思いますので、同様の問題に遭遇した場合は一度見直してみてください。
VirtualStorageLibrary Release Version 0.9.1 [Tree]

# バージョン 0.9.1 - プレリリース

このプロジェクトのプレリリース版は、バグ修正、機能強化、新機能の追加に焦点を当てています。
今回のリリースは機能追加となってます。

## 新機能

**インデクサにおけるアイテムとシンボリックリンクのアダプター** (#189)

VirtualStorage クラスのインデクサーを改善するために、アイテムとシンボリックリンク用の新しいアダプターを追加しました。これにより、ストレージ内のアイテムやシンボリックリンクへのインデクサーによる直感的なアクセスと操作が可能になります。

## 追加されたクラス

- VirtualItemAdapter  
- VirtualSymbolicLinkAdapter

これらのアダプターは、ストレージ内のアイテムやシンボリックリンクとやり取りするための効率的な方法を提供し、使いやすさと機能性が向上します。

## 使用例

以下は、新しいアダプターを使った例です：
### サンプル:
```csharp
VirtualStorage vs = new();

vs["/"] += new VirtualDirectory("dir1");
vs["/dir1"] += new VirtualItem("item1", 123);
vs["/"] += new VirtualSymbolicLink("link1", "/dir1/item1");

Console.WriteLine($"item1 ItemData = {vs.Item["/dir1/item1"].ItemData}");
Console.WriteLine($"link1 TargetPath = {vs.Link["/link1"].TargetPath}");
Console.WriteLine($"link1 ItemData = {vs.Item["/link1"].ItemData}");
```
### 出力:
```
item1 ItemData = 123  
link1 TargetPath = /dir1/item1  
link1 ItemData = 123
```
## GitHub Repository
https://github.com/shimodateakira/VirtualStorageLibrary

## Documents
https://shimodateakira.github.io/VirtualStorageLibrary/
「MSVCR100.dllが見つからない」の解決策（2024版）

少し古めのアプリを起動した時に、「MSVCR100.dllが見つからない」と出て動かないとき・・・


https://qiita.com/mylifewithviolin/items/7c9a6f39b73bdd9235af

ネットをググると、『「Microsoft Visual C++ 2010 Service Pack 1 再頒布可能パッケージ」をダウンロードして、インストールする』と出てくるので、その通り実施したが「MSVCR100.dllが見つからない」が**解決しない**場合の対処法です。


#### 0. 前準備

前述の手順で、`vcredist_x64.exe`と`vcredist_x86.exe`をインストール済みの場合は、アプリ一覧に複数ある`Microsoft Visual C++ yyyy Redistributable`をアンインストールして、再起動しておく。


#### 1. 次のサイトから`VC_RedistInstaller.exe`をダウンロード

[http://www.softpedia.com/get/system/system-miscellaneous/vc-redist-installer.shtml](http://www.softpedia.com/get/system/system-miscellaneous/vc-redist-installer.shtml)


- 「DOWNLOAD NOW」をクリック

<img width="300" alt="scr0-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/78b85224-46d4-cafd-6cc7-023ee2a8eac5.png" />

- 「Softpedia Secure Download (US)」をクリックするとダウンロードされる

<img width="300" alt="scr0-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/0cf0b53d-e349-e27b-2df2-346f1f5ec1a4.png" />

#### 2. ダウンロードした`VC_RedistInstaller.exe`を起動

- 「Next」をクリック

<img width="300" alt="scr1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/90522328-4770-fda0-e71d-abdb0cae0f22.png" />

- 「Next」をクリック

インストールする再頒布可能パッケージのバージョンを選択できるが、デフォルトのまま「すべて」をインストールする

<img width="300" alt="scr2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/6d7cf312-1b68-0df9-b98e-448afdfe2474.png" />

- 「Install」をクリック

<img width="300" alt="scr3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/feeb9371-c824-bbd7-4464-21afb85cfd4e.png" />

インストールがはじまる。

<img width="300" alt="scr4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/15321e88-98c0-78ee-22b8-50f6fa79af49.png" />

内部で再頒布可能パッケージの各バージョンのインストーラが起動される。

<img width="300" alt="scr5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/484c2da9-1326-6254-cc1c-23f28e5d7f2f.png" />

数分かかる。

- 「Funish」をクリック

<img width="300" alt="scr6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/966b33f2-412f-70f7-3a88-25a3815be551.png" />

---

以上の作業で、
「MSVCR100.dllが見つからない」が解決しました。
（Windows10 22H2 及び Windows11 23H2 で確認）

:::note alert
当手順を実施される場合は、あくまで自己責任でお願いします。
:::


#### 出典；

Youtube [How to Fix MSVCR100.dll is Missing in Windows 10/8/7 - 2024](https://youtu.be/r1w2HUC3L-k)

**以上**
現在の自分と将来について

## 現在の自分について
私は現在、WEBエンジニアとして2年目を迎えています。
スクールに通いながら約2年間勉強し、ついにWEBエンジニアになることができました。
しかし、実務経験はDjangoとReactをそれぞれ半年程度しかなく、成長実感や自己効力感があまり感じられていません。

勉強会などには参加していますが、周りのエンジニアたちがどんどん成長していく中で、自分は成長サイクルに乗れていないように感じています。
今でも週に15時間ほど勉強していますが、成長実感がなく、スキルに自信が持てません。
「まだ全然スキルがない」というのが口癖になってしまっています。
勉強方法が間違っているのではないかと感じることもあります。

原因の一つは、特定の言語やプロジェクトに特化できていないことだと思いますが、これは会社の仕組み上仕方がないことです（働く場所があることには感謝しています）。

40代という年齢もあり、焦りを感じています。

本業に集中しつつも、業務外で専門的なスキルを身につけたいと考えています。

最近、JISOUの渡邉さんのエンジニアとしての成長戦略の話を聞く機会があり、大変刺激を受けました。
アウトプットを出す、発信するということができていなかったので、この機会に克服します。
正しい努力の仕方に沿って勉強することで、結果を出したいと思っています。

## 将来について
まずはエンジニアとしてのスキルに自信を持てるようになりたいです。
短期的には（3ヶ月）、中期的には（6ヶ月）JISOUの課題を最後まで完了させることを目標としています。
長期的には（1年）、自分の市場価値を最低600万円にすることを目指しています。

40代という年齢もあり、友人たちはそれなりの地位についています。
自分は回り道（ボクシングなど）をしたとはいえ、悔しい思いをしています。
正しい努力をして結果を出し、彼らに負けないようにしたいです。
やればできることを証明したいと思っています。
ヒートマップ作成

```py

import matplotlib.pyplot as plt
import pandas as pd
import seaborn as sns


def make_heatmap(sale_data):
    df = pd.DataFrame(sale_data, columns=["b", "c", "value"])
    df_pivot = df.pivot(index="b", columns="c", values="value")

    plt.figure(figsize=(12, 9))
    sns.heatmap(df_pivot, annot=True, fmt="g", cmap="Greens")
    plt.show()


def main():
    sale_data = [[1, 2, 3], [2, 3, 5], [4, 3, 2], [2, 4, 5], [1, 5, 1]]

    make_heatmap(sale_data)


if __name__ == "__main__":
    main()

```
【個人メモ/レイアウト調整】positionのrelativeとabsolute

# 本記事の目的
仕事でレイアウト調整をしている際に、モニターや端末によって大きくレイアウトが異なり調整にかなりコストがかかっているため、どの端末で見ても大きく差分が出ないようにしたいと考えた。
HTML/CSSとBootstrapを駆使して可能な限り作り変えていく最中に出会った方法やよくわからないCSSの使い方をメモしておく。

# 今回の疑問点
既存のシステムのCSSを眺めていた時に以下のような記述があり、使い方がつかめなかったので理解を深めるために調べたことをまとめておく。
```
.hoge {
  position: relative;
}
```


# 実際の使用方法
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="bGPzdvK" data-pen-title="position " data-user="Mio-K0408" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Mio-K0408/pen/bGPzdvK">
  position </a> by M (<a href="https://codepen.io/Mio-K0408">@Mio-K0408</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

親要素（青い四角）に``position: relative;``を設定し、子要素に（赤い四角）`` position: absolute; ``を設定することで子要素を浮いたような状態にすることができる。
また、``z-index``を使用することで要素の裏側に配置することも可能（黄色い四角）
ちょっとした疑問点もちゃんと調べればなんとなくわかるし、今後にも活かせそうなので業務が忙しくない限りは知識をまとめておきたい。

# 参考記事
https://zero-plus.io/media/css-position-absolute/
「GithubActions」Firebaseで failed to authenticate, have you run firebase login?という認証エラーが発生したときに確認すること

## はじめに
GithubActionsを使用してfirebaseでデプロイを行うプロジェクトを選択する処理を実装していました。
その中で「failed to authenticate, have you run firebase login?」というエラーが出て解決までに時間がかかったので確認することを書いていきます。

## デプロイ時環境
* GCP
⇒サービスアカウントキー発行
* firebase
⇒プロジェクト作成済み

# 確認すること
* デプロイするときに使用するサービスアカウントキーの登録情報があっているか
⇒Githubのシークレットに登録したNameの名前とymlファイルに記述した環境変数名が一致しているかやシークレットにそもそも登録しているのかを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789688/2c5bf2ae-5699-dae8-0354-fe5932d838b8.png)

# 今回のエラーが起きたときの状態
* GitHubのシークレット上でサービスアカウントキーの値を再設定するときに編集画面を確認したところNameに何も設定されていない状態でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789688/e3f3a07c-81b8-562e-e2d3-664568b5ee5e.png)
```yml
 - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY}}" | base64 -d > ./firebase-key.json
```


# エラー解決に向けて行ったこと
Githubのシークレットにymlファイルで設定した環境変数名とデプロイ時に使用するサービスアカウントキーの値を再度登録を行いました。
* 今回の場合は下記のように登録しました。
Name：FIREBASE_KEY
Value：サービスアカウントキー（デプロイをするときに必要な権限を持ったアカウント）
⇒jsonファイルに記述されているものをデコードし、クリップボードに張り付けるコマンドを実行しGitHubのシークレットのValueに貼り付けます。
※貼り付けを行う際にValueの入力欄の最後は空白の行が入っていることを確認してください。
* ubuntu クリップボードコピーコマンド
```
$ base64 firebase-cicd.json | xsel --clipboard --input
```
※firebase-cicd.jsonはサービスアカウントキーの情報が記載されているjsonファイルです。
※ubutuではxselコマンドがインストールされていない場合はインストールする必要があります。
```
$ sudo apt-get install xsel
```
データベースのパフォーマンスを左右する！統計情報の種類とその役割とは？

# データベース: 統計情報の種類と役割

## 目次
1. [統計情報の役割](#1-統計情報の役割)
2. [統計情報の主要な種類](#2-統計情報の主要な種類)
3. [【検証】統計情報がクエリに与える影響](#3-統計情報がクエリに与える影響)
4. [まとめ](#4-まとめ)

---

## 1. 統計情報の役割

### 概要
データベースは、データの全体像を把握し、クエリを迅速に実行するために**統計情報**を利用します。統計情報は、データのサイズや分布に関するガイドとして機能し、効率的なクエリ計画を立てる際に不可欠です。

### 役割
統計情報は、データベースがクエリを最適に実行するために、**フルスキャン**や**インデックススキャン**を選択する際の判断材料として利用されます。

### 統計情報の例
- テーブルの総行数
- 各カラムにどのような値が多いか
- データの分布（平均値、最大値、最小値、分散など）

---

## 2. 統計情報の主要な種類

### テーブルレベルの統計情報
- **概要**: テーブル全体に関する情報です。
- **例**: テーブルの総行数、NULL値の割合、重複度などが含まれます。
- **用途**: テーブル全体をスキャンするか、インデックスを使うかの判断に利用されます。
- **SQL例**: 
  ```sql
  SELECT * FROM PEOPLE;

### カラムレベルの統計情報
- **概要**: 各カラムのデータ分布に関する情報です。
- **例**: カラムの値の分布（最小値、最大値、平均値）、ユニークな値の数、データの頻度（ヒストグラム）などが含まれます。
- **用途**: `WHERE`句の条件で、インデックスを使うかどうかを決定するために利用されます。
- **SQL例**: 
  ```sql
  SELECT * FROM PEOPLE WHERE NAME = '田中太郎';

### インデックスレベルの統計情報
- **概要**: インデックスに関する情報です。
- **例**: インデックスのユニーク度（重複がどのくらいあるか）、リーフレベルの深さ、クラスタリングファクタ（インデックスの順序通りにデータが並んでいるか）などが含まれます。
- **用途**: インデックススキャンか、フルスキャンかを決定する際に利用されます。
- **SQL例**:
  ```sql
  CREATE INDEX IDX_PEOPLE_1 ON PEOPLE (NAME, ADDRESS);
  SELECT * FROM PEOPLE WHERE NAME = '田中太郎';

## 3. 統計情報がクエリに与える影響

### ・カラムレベルの統計情報
2の項目で挙げたカラムレベルの統計情報のうち、ヒストグラム（ユニーク度）が
どの程度実行計画に影響を及ぼすかについて検証します。
- **データベース**: PostgreSQL
- **テーブル名**: PEOPLE
- **データ数**: 400万件
- **統計情報**: 最新の状態
- **カラム**:
  - `PERSON_ID`: 一意なデータ
  - `DUPLICATION_MANY`: 重複のあるデータ（0〜3の整数）
    -  0　：40万件
    -  1　：40万件
    -  2　：40万件
    -  3　：280万件
- index
  - index名:Idx_people_person_id           指定カラム:  person_id
  - index名:Idx_people_duplication_many    指定カラム: duplication_many

#### 一意なデータをフィルタリングした場合
- インデックススキャンが選択され、クエリの実行が最適化されます。
![一意なデータのフィルタリング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880450/8ad6e38a-31d3-c632-6c2d-97ada9ee265a.png)

#### 重複のあるデータをフィルタリングした場合
- 取得結果が多い場合、`BitmapHeapScan`が選択されることがあります。
 filterがデータ量の10%程度のためBitmapHeapScanが選択されました。
　取得結果がもっと多い場合（duplication_many=3）の場合はフルスキャンが選択されます。

![重複のあるデータのフィルタリング（BitMapScn）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880450/d3a4e85b-e7c7-2a9a-eee2-ea64cf9e8bda.png)

- 取得結果がさらに多い場合は、フルスキャンが選択されることがあります。
  ![重複のあるデータのフィルタリング（SeqScn）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880450/0d4c0b2b-84d6-8d2a-d6a5-868836dac08f.png)
  
### ・適切なインデックスの有無
- **データベース**: PostgreSQL
- **テーブル名**: PEOPLE
- **カラム**: `duplication_few`（一意なデータ）
  ```sql
  select * frrom people where duplication_few = 135233;


#### 適切なインデックスが存在する場合
- インデックススキャンが選択され、パフォーマンスが向上します。
![適切なインデックスあり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880450/3e39d9d4-f008-106e-1a07-c493d4a27f91.png)

#### 適切なインデックスが存在しない場合
- フルスキャンが選択される可能性が高く、パフォーマンスに影響を及ぼします。
![適切なインデックスなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880450/752ccf5d-f4a3-3e1a-93f6-cf4cf4392b77.png)
## 4. まとめ
- `FROM`や`WHERE`などを考慮し、ユニーク度の高いカラムからインデックスを定義しましょう。

- ヒストグラムを意識したインデックス作成が効果的です。特にユニーク度が高いカラムにはインデックスが有効です。
- ユニーク度が低く、インデックスを使ってもパフォーマンスが改善しない場合は、次の対策を検討しましょう:
  - パーティション化
  - キャッシュの利用
  - `LIMIT`、`OFFSET`の活用
  - 非同期処理の利用
UEで、新しく作成したプロジェクトでも最後に開いたレベルをデフォルトで開く

# 結論(わかる人向け）
エンジンのプロジェクトを新規に作るときの設定を書き換えて、新しいプロジェクトでもLoadLevelAtStartUpをLastOpendとなるようにします。

# あらまし
プロジェクトを頻繁に作り直さないのであれば、すでにいくつかの記事がネット上に上がっています。例えば下記の記事があります。
https://zenn.dev/rhythmcan/articles/e5b1cbfb614b2d

私のような初心者の方や、C++でプロジェクトが壊れてしまったりするなどの理由で、プロジェクトを作り直したり、githubからプロジェクトをクローンしてきて試したりするなどに、最初から最後に開いたマップがデフォルトで立ち上がるようになっているといいなと思うことがあります。

そこで、新しくプロジェクトを作成しても、デフォルトで最後に開いたマップで立ち上がるように設定をしたいと思います。

## Unreal Engineが保存されているパスを確認する
特に設定をされていない方はC:\Program Files\Epic Gamesなどに、UE_5.4やUE_5.3のパスにUnreal Engine自体がインストールされているかと思います。

## 新規プロジェクト設定時の設定ファイルを書き換える
新規プロジェクトを設定する時の設定ファイルBaseEditorPerProjectUserSettings.iniを探して書き換えます。
私の場合は、Dドライブにエンジンをインストールされているので少しパスが違いますが、Cドライブの方は下記を読み替えてください。
```
D:\epic\UE_5.4\Engine\Config\BaseEditorPerProjectUserSettings.ini
```

この中の、UE5.4の場合はL186にある、
```ini
LoadLevelAtStartup=ProjectDefault
```
を
```ini
LoadLevelAtStartup=LastOpened
```
に書き換えます。

このほかにも、新規プロジェクトを立ち上げたときに設定しておくと便利な設定が人によってはあるかもしれないので、好みに応じて書き換えてみてください。

例えばヒストリア様では本記事の設定以外の設定も紹介されています。https://historia.co.jp/archives/16550/
textlintで日本語レビュー

textlintについては、既に多くの方が記事にしていますが、個人的な学習記録として、この度、記事化する事にしました。

# 正しい日本語とは？

システム開発で、ドキュメントを書く際に、日本語の文法、使い方に関する指摘・レビューが入ることがあります。

明らかな誤字脱字ならばともかく、人によっては、これは本当に間違いなのか？と疑問に思うことがあります。

正しい日本語について、機械的に判定する仕組みがあると便利ですね。

# textlint

textlintを導入することで、そのような悩みを解決することができます。

導入手順および使い方は、公式サイトに詳しく書かれています。

公式サイト
https://textlint.github.io/

# textlintの利用タイミング

textlintは、開発中の様々なシーンで利用することができます。

①検証したいタイミングでコマンドを打つ

ターミナルから、以下のコマンドを実行すると、いつでも日本語の検証を実行することができます。
```
npx textlint hoge/**/*.md
```

②CIに組み込む

GitHub Actions で上記のコマンドを実行すれば、Git Push時に必ず検証させることができます。

③文章を書きながら、検証させる。

VSCodeのプラグインを導入することで、いちいちコマンドを打たなくても、検証されるようになります。

こちらの記事が参考になると思います。

https://qiita.com/fuk101/items/d6e0160f9466363649d7

# Tips

以下、私がお勧めする、使い方・設定を紹介します。

## YAML

textlintの設定は、名前が「.textlintrc」から始まるファイルに定義します。
JSON, YAML, JSで記述可能ですが、シンプルで、かつコメントが残せるYAMLの採用をお勧めします。

## textlint-rule-preset-ja-technical-writing

textlintは、検証する時に使用するルールを細かくカスタマイズできます。

それゆえに、最初は何を適用すべきか迷いますが、まずは以下のルールを導入することをお勧めします。

https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing

こちらは、厳密にはルールのプリセットになっていて、複数の検証ルールが入っています。

それぞれのルールをオフにしたり、細かくカスタマイズできるので、便利です。

## severity: warning

検証で引っかかった時に、errorではなく、warning扱いにすることができます。
warningの場合は、
```
echo $?
```
の実行結果が0(True)、つまり、textlintの実行自体は成功になるため、CIを止めることなく、先に進ませることができます。

https://qiita.com/empty948/items/6031785e23d8fdbb1a5a#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C%E3%81%AE%E8%A1%A8%E7%A4%BA


参考
https://textlint.github.io/docs/configuring.html#severity-config-of-rules
win7、win8プリインストールのPCをdualbootにする

### 概要
　win7、win8がプリインストールされたパソコン（以下、win7-PC、win8-PC）をlinuxとのdualbootにする際、手間取ったので、win7-PC、win8-PCを比較しながら、メモを残す。

### 背景
　win7-PC、win8-PCは発売時期が2009〜2014年で、tmp2.0を搭載しておらず、win11へのアップグレードは無理。このため、比較的高スペックな中古パソコンが安価に販売されている。これらを入手し、win10とLinuxのdualbootにして遊ぶことにした。その際に win7-PCとwin8-PCで、手順に違いがあったことから、折角なので、メモを残す。

### win7-PCとwin8-PCで、何が違うのか
　dualboot周りでは、以下の４点が違う。
1. BIOSの種類とパーティション構成
2. win10の高速スタートアップの初期設定
3. securebootの有無
4. fastbootの有無

### BIOSの種類とパーティション構成
　win7-PCのBIOSは、レガシーBIOSである。したがって、パーティーション構成はMBRである。対して、win8-PCのBIOSは、UEFIBIOSである。したがって、パーティーション構成はGPTである。

　win10のインストールメディアは、これらに影響されるか？つまり、レガシー=MBR用とUEFI=GPT用で、インストールメディアを変える必要があるか？というと、これは不要。例えば、win7-PC（レガシー=MBR）で作ったwin10インストールメディアで、win7-PCもwin8-PC（UEFI-GPT）も、問題なくインストールできた。

　それでは、linuxのインストールメディアは、これらに影響されるか？レガシー=MBR用とUEFI=GPT用で、インストールメディアを変える必要があるか？というと、これは不要。不要にするために、パーティーション構成を「MBR」に、ターゲットシステムを「BIOSかUEFI」にしておく。これにより、win7-PCはレガシー＝MBR、win8-PCはUEFI=GPTで、問題なくインストールできた。

 ### win10の高速スタートアップの初期設定
　win10には、OS終了時の情報をCPUやメモリに保存して、OSの起動を高速化する「高速スタートアップ」という機能があるが、マシンの性能によって、初期設定が異なる。win7-PCでは無効、win8-PCでは有効になっている。
　この機能の困ったところは、有効になっていると、OSをシャットダウンして、電源を再投入した時、「F2」を押しても、BIOS画面に入れないこと。BIOS画面に入らないと、インストールメディアの順序の変更ができない。
　以下の設定変更で、高速スタートアップを無効にできる。

1. 「スタート」ボタンを右クリックして「電源オプション」選択
2. 「電源とスリープ」画面から「電源の追加設定」をクリック
3. 「電源オプション」→「電源ボタンの動作を選択する」→「システム設定」と進む
4. 「現在利用可能ではない設定を変更します」画面内の「高速スタートアップを有効にする（推奨）」についているチェックを外す

　これで、OSをシャットダウンして、電源を再投入した時、「F2」を押せば、BIOS画面に入れる。

　なお、まぎらわしいが、「高速スタートアップ」と後述の「fastboot」は別物。

### securebootの有無
　securebootは、UEFIbootの機能の１つで、win7-PCには、搭載されていないが、win8-PCには、搭載されている。
　securebootは、素性の知れないOSをインストールさせない機能で、有効になっていると、win10はインストールできるが、linuxをインストールできない。
　これは、win10のインストールメディアは、securebootに対応しているが、rufusで作成したlinuxのインストールメディアは、securebootに対応していないためである。
　このため、secureboot有効のまま、linuxのインストールメディアを起動しても、liveブート（つまり、HDDやSSDに書き込まないメモリ上での起動）は可能だが、インストール（HDDやSDDへの書き込み）で、拒否されてしまう。

　securebootの有効／無効は、BIOS画面で簡単に変更できる。なお、securebootの設定を変更するには、BIOS管理者のパスワードを設定しなければならない。

### fastbootの有無
　fastbootは、UEFIbootの機能の１つで、win7-PCには、ほとんど搭載されていないが、win8-PCには、搭載されている。
　fastbootは、起動時の初期化を省略して、起動を高速化する機能で、有効になっていると、bootloaderを更新できない。このため、win10がインストールされたパソコンに、linuxをインストールできるものの、bootloaderがうまく更新されず、OS選択画面が出ない。（linuxしか起動できなくなる。）
　これは、linuxがインストールする際に自動更新されたbootに関するデータが、起動時に読み込まれないためである。
　fastbootの有効／無効は、BIOS画面で簡単に変更できる。なお、パソコンによっては、fastbootではなく「QuickBoot」の表示になっている。
Goでクラス図を自動生成する

## はじめに
表題通り、Goでクラス図を自動生成します。goplantumlを使うと簡単に生成できます。

https://github.com/jfeliu007/goplantuml

## 成果物
goplantumlを使うとクラス図を自動生成できます。
![pokemon_battle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/7ab56c06-31d0-0d2a-769f-b5a9ee7e3c24.png)

## 準備
```go:goplantumlのinstall
go install github.com/jfeliu007/goplantuml/cmd/goplantuml@latest
```

```shell:PNG画像を生成するためのツール
brew install plantuml
```

## UMLを作成する
```go:UMLを作成する
~/develop/pokemon_battle (feat/initial)$ goplantuml internal/core > pokemon_battle.puml
```
これで下記ファイルが作成されます。

```puml:pokemon_battle.puml
@startuml
namespace core {
    class Battle << (S,Aquamarine) >> {
        + Pokemon1 *Pokemon
        + Pokemon2 *Pokemon

        + Start() string

    }
    class Move << (S,Aquamarine) >> {
        - randSource *rand.Rand

        + Name string
        + Power int
        + Accuracy int
        + Type string

        + CanHit() bool
        + CalculateDamage(attacker *Pokemon, defender *Pokemon) int

    }
    class Pokemon << (S,Aquamarine) >> {
        + Name string
        + HP int
        + Attack int
        + Defense int
        + Speed int
        + Moves []Move

        + AttackPokemon(target *Pokemon, move Move) (int, error)
        + IsFainted() bool

    }
}


@enduml
```
これを画像ファイルに出力します。

```shell:pngを出力
~/develop/pokemon_battle (feat/initial)$ plantuml pokemon_battle.puml  
```

## 感想
簡単に作れるので、構成を軽く見るのに良いですね！！
【プログラミング初心者】0から始めるReact学習 #3 ~Web開発の基本編~

# 1-1.最低限のインプット
## 9月5日
**【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門**の
23~33まで完了。

今日は論理演算子の講義がすごく勉強になりました。
忘れないように以下にコードを記載しておきます。

ⅰ.　||（パイプライン）の場合
（例）
![ronnrienzansi_paipurain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/ce38a587-3083-c3c6-337b-4292845f54c0.png)
（結果）
左がtruthyの時、その時点で返却してます
![paipurain_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/118d77b4-9a03-c6dc-b0b0-78bc77233dca.png)


ⅱ.　&&（アンバサンド）の場合
（例１）
![hidari_null.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/94fcd007-6bfe-387a-3a95-eaf72816087b.png)
（結果）
左がfalsyの時、その時点で返却してます
![anba_kekka2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/e93bda98-caf3-5c0c-157f-62bdde2a1b13.png)

（例２）
![anbasand_ronri.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/45ffc15d-4ab7-9853-5e03-fe512b7144b2.png)
（結果）
左がtruthyの時、貫通して右を返却してます
![anba_kekka1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/8f2b1061-b044-ca6b-d6bd-c44d43b34882.png)


### まとめ
本日でJavaScriptの基本機能についての講義終わり！
明日からはJSでTodoアプリの開発に入ります。
完璧に作ることよりも、理解しながら作るように努めるぞ～
Depth-Anythingで作った深度マップでBlenderの3Dに奥行きをつける

# 概要
Depth-Anythingで作った深度マップを使って
3Dメッシュに奥行きをつける

※環境の作り方やDepth-Anythingについては前の自分の記事を参考ください
https://qiita.com/Dennou_yugi/items/3069d40292b5ac256462

# 環境
- Ubuntu 24.04.LTS
- Blender


# 参考URL
こちらの方の記事を参考にBlenderの3Dに奥行きつけました
https://perapera.faqt.jp/blog/blender-1

# 手順
なし
上の記事を参考にしてちょ


# 実行結果&所感
いや、こんだけ深度つけば十分でしょう
建物とかのモデリングに使えそう

![Screenshot from 2024-09-08 20-22-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3870090/2c06322d-f314-1a0b-04cc-cd12d11e8fb8.png)
【Android】ImegeViewで設定したアイコンの色を変える


# はじめに
今回記事にする内容はタイトルにある通りですが、記事を書くきっかけになったのは
Jetpack Composeで色々触っていて、Iconのカラーを変えるのは簡単にできたけど、それ以外だとどうやってやるんだろ？と思ったのがきっかけです。

# 実践
```
準備段階としてImageViewを３つおきます。当然このままではImageがそのまま表示されているだけです。
 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/icon1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus" />

        <ImageView
            android:id="@+id/icon2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus" />

        <ImageView
            android:id="@+id/icon3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus" />
</LinearLayout>
```


![スクリーンショット 2024-09-08 20.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/ec6b8fc1-ff62-4b60-7164-26cb5061445e.png)



次に　**ColorFilter**を用いてImageViewにカラーをつけます。![スクリーンショット 2024-09-08 20.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/c2deb42a-0bcc-17cf-c0f0-a24cbd75b71d.png)


```
        binding.icon1.setColorFilter(resources.getColor(R.color.red))
        binding.icon2.setColorFilter(resources.getColor(R.color.blue))
        binding.icon3.setColorFilter(resources.getColor(R.color.yellow))
```

![uploading...0]()

このようにImageViewにもカラーを設定することができます。
【Rails7 とLaravel10】controllerを担うファイルの記述方法比較

## 前提
両者Postモデルを作成してあります。基本的なcrudを実装する想定です

## 比較
### laravelと比較したrailsの特徴

・ドット記法が使われる
・モデルのインポート文不要
・pythonに近い構文
・ormはlaravelと似ており、直感的
・ファイル名はスネークケース 

```posts_controller.rb
class Api::V1::PostsController < ApplicationController
  def index
    @posts = Post.all
    render json: @posts
  end

  def show
    @post = Post.find(params[:id])
    render json: @post
  end

  def create
    @post = Post.new(post_params)
    
    if @post.save
      render json: @post
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  def update
    @post = Post.find(params[:id])
    if @post.update(post_params)
      render json: @post
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  def destroy
    @post = Post.find(params[:id])
    @post.destroy
  end

  private

  def post_params
    params.require(:post).permit(:title,:content)
  end
  
end
```

### railsと比較したlaravelの特徴

・アロー演算子が使われる
・JavaScriptに近い構文
・rails同様ormは直感的
・ファイル名（クラス名）はパスカルケース

```PostController.php
<?php

namespace App\Http\Controllers\Api\V1;

use App\Models\Post;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return response()->json($posts);
    }

    public function show($id)
    {
        $post = Post::findOrFail($id);
        return response()->json($post);
    }

    public function store(Request $request)
    {
        $post = new Post();
        $post->title = $request->title;
        $post->content = $request->content;

        if ($post->save()) {
            return response()->json($post);
        } else {
            return response()->json(['error' => 'Unprocessable Entity'], 422);
        }
    }

    public function update(Request $request, $id)
    {
        $post = Post::findOrFail($id);
        $post->title = $request->title;
        $post->content = $request->content;

        if ($post->save()) {
            return response()->json($post);
        } else {
            return response()->json(['error' => 'Unprocessable Entity'], 422);
        }
    }

    public function destroy($id)
    {
        $post = Post::findOrFail($id);
        $post->delete();

        return response()->json(['message' => 'Post deleted successfully']);
    }
}

```
スクラム推進時におすすめの書籍一覧

# はじめに
先日スクラムマスターのトレーニングに参加してきました。
5日間のトレーニングで1日6時間ほど行いましたが、トレーニング中にご担当いただいた講師からおすすめの書籍をいくつかご紹介いただきました。
講師も同様のことをおっしゃっておりましたが、読む人間の解釈により認識が揺れる可能性のある書籍はあくまで参考程度であると考えております。
ただ、今後組織を推進していく際に強力な一手となり得る可能性もあるので、今回は紹介いただいた書籍をこちらの記事にまとめておこうと思います。
その上で以下書籍を読了した際に別途アウトプットとして記事を作成し、こちらの記事にリンク付けしていこうと思います。

# Scrum
- Agile Software Development with SCRUM: International Edition

https://amzn.asia/d/fsiogeE

- Agile Project Management with Scrum (Developer Best Practices)

https://amzn.asia/d/61QE8Tj

- The Enterprise and Scrum (Developer Best Practices)

https://amzn.asia/d/3UkytLp

# Scrum Master チーム＆心理

- Great ScrumMaster, The: #ScrumMasterWay (Addison-Wesley Signature Series (Cohn))

https://amzn.asia/d/g0D45ks

- Leading Teams: Setting the Stage for Great Performances

https://amzn.asia/d/4cP3Y7M

- The Wisdom of Teams: Creating the High-Performance Organization (English Edition)

https://amzn.asia/d/6E0q1m8

- Perspectives on Silence 

https://amzn.asia/d/gCsfwk3

- Organizational psychology;: An experiential approach (Prentice-Hall behavioral science in business series)

https://amzn.asia/d/dMIVkqX

# Product Owner

- Agile Product Management with Scrum: Creating Products that Customers Love

https://amzn.asia/d/0faKZpf

- How to Lead in Product Management: Practices to Align Stakeholders, Guide Development Teams, and Create Value Together (English Edition)

https://amzn.asia/d/9o9IzjW

- Product Mastery: From Good to Great Product Ownership (Geoff Watts' Agile Mastery Series) (English Edition)

https://amzn.asia/d/iJNQNVG

- Strategize: Product Strategy and Product Roadmap Practices for the Digital Age (English Edition)

https://amzn.asia/d/7E1R2Da

# スケーリング

- Scaling Lean & Agile Development: Thinking and Organizational Tools for Large-Scale Scrum (Agile Software Development Series)

https://amzn.asia/d/8Tf9TTm

- Practices for Scaling Lean & Agile Development: Large, Multisite, and Offshore Product Development with Large-Scale Scrum (Agile Software Development Series)

https://amzn.asia/d/ecBVPrW

- Large-Scale Scrum: More with LeSS (Addison-Wesley Signature Series (Cohn))

https://amzn.asia/d/3jsChCg

# さいごに
非常に刺激的な5日間でした、私も立場上組織を広い視野で見ていたつもりになっていましたが、見事に打ち砕かれました。
自分の経験などに慢心せず、結果につながる努力を続けていこうと思います！
ChatGPT-3.5先生へ「2つの三角形について、相似で周長が同じなら、合同になりますか。」(抜粋)

・改行を挿入していません。申し訳ありません。

User
```
2つの三角形について、相似で周長が同じなら、合同になりますか。
```
```
sympyのare_similarｒとTriangleのPerimeterを使って、三角形の合同の判定を教えて下さい。
```
```
ユーザー定義関数でお願いします。
```
（抜粋。以下を、私は、実行していません。申し訳ありません。）
```python
from sympy import Point, Triangle

def are_congruent(triangle1, triangle2):
    # 相似の判定
    if triangle1.is_similar(triangle2):
        # 周長が同じかどうかを判定
        if triangle1.perimeter == triangle2.perimeter:
            return True
        else:
            return False
    else:
        return False

# 三角形の頂点を定義
A1, B1, C1 = Point(0, 0), Point(3, 0), Point(0, 4)
A2, B2, C2 = Point(0, 0), Point(3, 0), Point(0, 4)

# 三角形を作成
triangle1 = Triangle(A1, B1, C1)
triangle2 = Triangle(A2, B2, C2)

# 関数を使って合同の判定
if are_congruent(triangle1, triangle2):
    print("三角形は合同です。")
else:
    print("三角形は合同ではありません。")
```
# リンク




# 過去問　類題
【React × typescript × chakra-ui × Jest】学習記録アプリ作成 firebase hosting CI/CD


# はじめに
私は現在、プログラミングコミュニティ「JISOU」に参加させていただいており、Reactの勉強を基礎から行っています。
__今回はchakra-uiを利用し学習記録アプリを作成しました。__
typescriptによる型付け、Jestやtesting-libraryを使ったテスト・firebase hosting github actionsでのCI/CDも行っております。

# 今回作ったもの
![stury_time.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835870/cf700384-49c3-c30d-e8ae-0cf7c9948d92.gif)

https://github.com/yuuki4135/study-time-record-app-v3

# 前回の課題までに作ったもの(git)
https://github.com/yuuki4135/study-time-record-app-v2

前回作ったものとの変更点
UIコンポーネントライブラリのChakraUIを使用
typescriptによる型付けを行ったため、エラーが起きにくい設計
編集、削除機能を追加
Github ActionsによるCICD（自動デプロイとテスト実行）を追加

# 課題による気づき
* typescriptの理解不足
　typescriptはこれまで少し書いたことがあったけど、今までは型を宣言してエラーを少なくするためのもの。←めんどくさいというイメージしかなかった。
  今回Udemyの動画で実例などをみたところ、__type宣言などをしておくとVScodeなどでそのtypeから予測変換をしてくれる。一つ共通ファイルとしてtypeを定義したファイルを作ることでそれを全ファイルで読み込むためあまり手間がかからない__という風に感じた
* 自動テストの理解不足
  jestやreact testing libraryを今まで書いたことが無かったので書くのにとても時間がかかった。
  mockの使い方やstateの変更タイミングで処理を待ってあげること、ユーザーの入力操作の再現をすることなどで躓きとても時間がかかりました。
* アウトプットの習慣がまだついてないこと。
  躓いた場面は何度かあったが、記事にする(文章にする)ということをめんどくさがってしまって記事にできていない部分が何件かあった。
  JISOUで言われていた「エラー解決記事はこれくらい雑に書く！！ → [記事](https://qiita.com/Sicut_study/items/6eea8a7b8518b11b2b06)」という言葉を見て、なるべく簡単に雑でもいいので記事はすぐに書こうと思いました
* とりあえず、勉強を始めるの意思がまだ弱い
　Reactの勉強を始める際に、今日はとても忙しくて疲れているから少し休んでから始めようなどと思ってしまい、ついついyoutubeなどの動画に時間を費やしてしまうことがありました。時間があるなら何も考えずとりあえず始めるということを続けられるようにならないとなと感じました

# おわりに
これまでJISOUの課題として3つ行ってきました。まだまだアウトプットが足りなかったり、勉強にすぐ取り掛かるなどのことができておらず自分の中で課題が見えてきました。
今後のキャリアアップなどの為にも、今の自分の課題にも取り組みながらReactの勉強を今後も取り組みたいと思います！

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします:下向き指差し:
https://projisou.jp
変数名 As 型 を Propertyプロシージャに変換するVBAモジュール

小文字スネークの変数名（例：user_name） As 型 をPropertyプロシージャに変換するVBAモジュールを作っておくとクラスを作るときになにげに便利。

たとえば、イミディエイトウィンドウに

```
? PropertyLetProcedure("user_name as string")
```

と入力すれば、

```
Property Let UserName(ByVal arg As String)
    user_name = arg
End Property
```

と返してくれる。

```vb:Property_Module
'// var_as_class（変数名 As 型）を Propertyプロシージャにして返す
'// property_type が 1 なら Property Get、それ以外なら Property Let

Function GetPropertyProcedure(ByVal var_as_class As String, Optional ByVal property_type As Long = 0)

    Dim varAsClass As String     '-- 変数名 As 型
    Dim varAsClassAry            '--「変数名 As 型」を " " で区切った配列

    '-- 念のため、一旦全部小文字にしてから配列にする
    varAsClass = StrConv(WorksheetFunction.Trim(var_as_class), vbLowerCase)
    varAsClassAry = Split(varAsClass, " ")

    Dim varName   As String     '-- 変数名
    Dim className As String     '-- 型名

    varName = varAsClassAry(0)
    className = StrConv(varAsClassAry(2), vbProperCase)

    Dim varNameAry  '-- 小文字スネークの変数名を _ で区切った配列
    varNameAry = Split(varName, "_")

    Dim i As Long
    Dim propertyName As String  '-- Propertyプロシージャ名

    '-- varNameAry の要素をそれぞれ先頭を大文字にしてつなげる
    For i = LBound(varNameAry) To UBound(varNameAry)
        propertyName = propertyName & StrConv(varNameAry(i), vbProperCase)
    Next i

    Dim tb           As String  '-- タブ
    Dim J            As String  '-- 改行（ラインフィード）
    Dim procedureStr As String  '-- Propertyプロシージャのコード

    tb = Space(4)
    J = vbLf

    '-- Property Let プロシージャ
    procedureStr = "Property Let " & propertyName & "(ByVal arg As " & className & ")" & J
    procedureStr = procedureStr & tb & varName & " = arg" & J

    '-- Property Get プロシージャの場合
    If property_type = 1 Then
        procedureStr = "Property Get " & propertyName & "() As " & className & J
        procedureStr = procedureStr & tb & propertyName & " = " & varName & J
    End If

    GetPropertyProcedure = procedureStr & "End Property"

End Function
```

```vb
'//［変数名 As 型］を Property Let プロシージャに変換する

Function PropertyLetProcedure(ByVal var_as_class As String) As String

    PropertyLetProcedure = GetPropertyProcedure(var_as_class)

End Function
```

```vb
'//［変数名 As 型］を Property Get プロシージャに変換する

Function PropertyGetProcedure(ByVal var_as_class As String) As String

    PropertyGetProcedure = GetPropertyProcedure(var_as_class, 1)

End Function
```