OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter OSによってimportエラーになりビルドできない対処法

以下のように dart:html は Windows では使わないのにビルドするとエラーになります。

```
import 'dart:html' as html;

function() {
  if (!Platform.isWindows) {
    String hostname = html.window.location.hostname;
  }
}
```

エラー文
Dart library 'dart:html' is not available on this platform.

# 対処法

ダミーのファイル (win_html.dart) を作ります。
```win_html.dart
class window {
  static Map<String, String> sessionStorage = {};
  static _location location = _location();
}

class _location {
  String hostname = '';
}
```

Windowsのときだけダミーファイルをimportします。これでビルドができるようになります。
```
import 'win_html.dart' if (dart.library.html) 'dart:html' as html;

function() {
  if (!Platform.isWindows) {
    String hostname = html.window.location.hostname;
  }
}
```

ios,androidのシミュレーターって重いですよね。Windowsでやると動作テストが楽です。
Cloudflare パブリックなR2に設置した静的HTMLから同じR2の別ディレクトリのCSSを参照してスタイルを当てる

## 概要

パブリックなR2に設置した静的HTMLから同じR2の別ディレクトリにCSSを設置して参照し、スタイルを当てる方法を簡単にまとめる。

## 前提

下記の方法でカスタムなドメインでR2のバケットをパブリックに設定した。

https://qiita.com/miriwo/items/737741ced9eb7453cf63

## 方法

1. ローカルでstaticというディレクトリを作成し、その中にindex.htmlとassetsディレクトリとassets/css/index.cssを追加

    ```sh
    mkdir -p static/pages
    touch static/pages/index.html
    mkdir -p static/assets/css/
    touch static/assets/css/index.css
    ```

1. 上記のコマンドを実行すると下記のような構造になる。

    ```
    static/
    ├── assets
    │   └── css
    │       └── index.css
    └── pages
        └── index.html
    ```

1. `static/pages/index.html`を開き下記のように記載

    ```static/pages/index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../assets/css/index.css">
        <title>Document</title>
    </head>
    <body>
      <h1>Hello Cloudflare R2(Other directory style)</h1>
    </body>
    </html>
    ```

1. `static/assets/css/index.css`を開き下記のように記載

    ```static/assets/css/index.css
    h1 {
        font-size: 2em;
        color: #333;
        text-align: center;
        margin-top: 20px;
    }
    ```

1. `static/pages/index.html`をブラウザで開き、下記のようにセンターに文字が出ることを確認

    ![CleanShot 2024-07-20 at 13.01.42@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0e4669a6-3416-e46a-77bf-edcbab25a532.png)

1. assetsディレクトリとpagesディレクトリをR2のバケットルートにアップロード、アップロード後は下記のようになった

    ![CleanShot 2024-07-20 at 13.10.34@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/61253a20-3bd7-6160-7a77-bf8d4a13358a.png)

https://R2のパブリックカスタムドメイン/pages/index.html にアクセスし、ローカルで開いたものと同じ画面が開けばスタイルが当たっている

![CleanShot 2024-07-20 at 13.15.13@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/172357a3-18e5-0ca5-4b27-31caf17ce67c.png)
AtCoderの過去問300問解いて得たこと

はじめまして！CREとしてエンジニアをやってますkazuです🦌

AtCoderの問題を2023年12月から解き始めて、2024年7月で300 問に達成したので、そこで気づいたことをいくつか共有しようと思います！

![スクリーンショット 2024-07-18 9.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2597943/5057cff0-921c-5a06-8e33-b2d14af2238a.png)

※Aの問題 200問
※Bの問題 100問

やり始めた経緯などについては、前回の記事があるので、気になる方はご覧ください✨

https://qiita.com/KazukiITWeb1/items/07ac25930d859ed15e91

https://qiita.com/kazushika/items/9630cef8b1c030a00644

# A問題との違い

- 複雑なデータ構造や多次元配列を扱う問題が多い
- 問題のステップ数が増えた
- 数学的知識の必要性

## 複雑なデータ構造や多次元配列を扱う問題が多い

A問題と比べると、B問題では複雑なデータ構造や多次元配列を扱う問題が増えているなと感じます。例えば、配列や連想配列のkeyとvalueを意識して値を格納し、それを効率的に操作する方法を考える必要があったり、思考の回数が明らかに増え、多くの変数を使用する必要性も出てきます。思考の回数が増えると、ステップも増えてしまうので必要であるか否かをより正確に考える必要があるなといった所感です。

## 問題のステップ数が増えた

上記と似た内容になるのですが、今までは

```php
A　→　B（ゴール）
```

だったのが、

```php
A → B →  C（ゴール）
 \      /
  - B` - 
```

と問題のステップ数が増えると同時に、処理のパターンも増えたといった印象です。

僕は最初に言語化をすることで、ステップごとの処理を考えるようにしています。言語化をするときのポイントとしては、最終的にどんな形でアウトプットを出したいのか目的から逆算して考えることを大事にしています。

基本的には、次のように進めています。

1. **入力:**
    - どのようなデータが与えられるのかを確認
2. **ブラックボックス（処理部分）:**
    - 入力データをどのように処理するかを考える
    - この部分では、値の扱い方や処理の流れを具体的に決める
3. **出力:**
    - 最終的にどのような形で結果を出力するかを決める

アウトプットする形を決めることで、ブラックボックスでの値の扱い方も自ずと決まってきます。このプロセスを踏むことで、問題解決のための具体的なステップを明確にすることが徐々にできるようになってきました。

## 数学的知識の必要性

四則演算から始まり、整数と少数、最大公約数と最大公倍数、数列や図形（三角形、円）の性質や面積の求め方、2点間の距離の求め方やグラフ、論理演算など学生の時にやったような内容の問題がこの辺から出てきます。授業中に寝てる組としては、なかなかに辛い。

ですが、ちゃんと調べると理解もできるので一度やり方を理解してしまうと、そうでもないといった印象も受けました。

# 300問解いて得たこと

- 条件分岐とループだけで多様な処理を実現できること
- 間違いのある問題は、復習する時間を設けてやり直すことが大事
- 問題を解くためには、問題文を正確に理解する読解力が必要

## 条件分岐とループだけで多様な処理を実現できること

これはB問題を解いていく中で分かった事ですが、意外にも難しいアルゴリズムとか、特定の関数などを使用しなくても解ける問題が多いということに気づきました。つまり、自分がいつも使っている制御構文（条件分岐やループ処理など）などで、大体の問題は解けてしまうのです。問題をどう理解するか、アルゴリズムをどのように考えるか、それを処理にどう落とし込むか、B問題を通じてプログラミングの基本を学ぶことができました。B問題をコンスタントに解けるようになった頃には、実装力がかなり身についていると感じます。

## 間違いのある問題は、復習する時間を設けてやり直すことが大事

B問題を100問解いたのはいいのですが、大半は間違っている問題ばかり。AtCoderだけを勉強すればいいわけではないため、復習に当てる時間をなかなか取れなかったのが正直なところです。

過去の問題を解いてみても、解けるようになっている問題は少なく、結局自分ができる範囲の問題しか解いていないことに気づきました。そのため、復習する時間を設けることで、自分ができることを増やすことが大事であると感じます。

できることを増やすことが、「何もググらず即実装できる」になり、脳への負担を減らすことにもつながるので、少しずつ頑張りたいと思います。

※以下は牛尾さんが提唱している考え方

😩レベル4:自分では無理

😟レベル3:スパイクソリューションがあればなんとかなる

🙂レベル2:ググれば解決できる

😄レベル1:何もググらず即実装ができる

## 問題を解くためには、問題文を正確に理解する読解力が必要

エンジニアにとって問題解決力は必須スキルの一つですが、問題解決はそもそも問題を発見することから始まります。AtCoderの場合、問題はすでに提示されているので、その次のステップである「問題を理解する」というのが重要になってきます。

問題を理解するためには、センテンスごとに分解し、どういう文脈から成り立っているかを理解することが必要です。これにより、問題全体で何を求められているかがわかるようになります。

100問解いたことで少しずつ理解できるようになってきましたが、まだまだ読解に時間がかかりますし、理解できないことも多いです。今後の100問ではその点を意識しながら問題を解いていこうと思います。

# まとめ

300問解いた事で、特別何かが変わった気はしませんが、B問題を普通に解けるくらいのレベルになった時、自分が積み上げたものの重さを知れる気がするので、まずはコツコツ目の前の1問1問に取り組んでいこうと思います💪
JestとReact Testing Libraryを使ってテストをする(Next.js)

# はじめに
Next.jsのライブラリが作成済みの前提で進めます。
#### 作成していない場合、インストールします
```bash
$ npx create-next-app@latest
```
```bash
√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No / Yes =>Yes
√ Would you like to use ESLint? ... No / Yes =>Yes
√ Would you like to use Tailwind CSS? ... No / Yes =>No
√ Would you like to use `src/` directory? ... No / Yes =>Yes
√ Would you like to use App Router? (recommended) ... No / Yes =>Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes =>No
```
## Jest をインストールする
プロジェクトのルートに移動
```bash
$ cd my-app
```
jest、testing-libraryをインストール
```bash
$ npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom
```

`jest.config.js` ファイルをプロジェクトのルートディレクトリに作成し、以下を追加
```javascript:jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // テスト環境の next.config.js と .env ファイルを読み込むために、Next.js アプリケーションへのパスを記載する
  dir: './',
})

// Jest に渡すカスタム設定を追加する
const customJestConfig = {
  // 各テストの実行前に渡すオプションを追加
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // TypeScript の設定で baseUrl をルートディレクトリに設定している場合、alias を動作させるためには以下のようにする必要があります
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

// createJestConfig は、非同期で next/jest が Next.js の設定を読み込めるようにするため、下記のようにエクスポートします
module.exports = createJestConfig(customJestConfig)
```
`jest.setup.js`ファイルをプロジェクトのルートディレクトリに作成し、以下を追加
```javascript:jest.setup.js
import '@testing-library/jest-dom'
```

test script を `package.json` に追加する
```json:package.json
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"           //← 追加
  },
```

## テストコードの作成
- `src/app/`に`__test__`ディレクトリを作成
- `__test__/sample.test.js`ファイルを作成
```javascript:sapmle.test.js
import { render, screen } from '@testing-library/react'
import Home from "../page"

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)
    const heading = screen.getByText(/Next.js/i);
    expect(heading).toBeInTheDocument()
  })
})
```
`src/app/page.tsx`の中身を編集
```typescript:page.tsx
export default function Home() {
  return (
<>
<h1>Next.js</h1>
</>
  );
}
```

## テストの実行
```bash
$ npm run test
```

```bash
 PASS  src/app/__tests__/sample.test.js
  Home
    √ renders a heading (50 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.845 s
Ran all test suites.
```
上記のように表示されれば成功です。
達人に学ぶDB設計 徹底指南書（第2章）


## 目的

「達人に学ぶ DB 設計 徹底指南書」を読んで学んだことをアウトプットするために記事を投稿する。
今回は第 2 章についての内容をまとめる。

## 概念スキーマと論理設計

<dl>
    <dt>論理設計</dt>
    <dd>概念スキーマを定義する設計</dd>
</dl>

### システム開発におけるデータベース設計の手順

1\. 概念スキーマ（論理設計）
2\. 内部スキーマ（物理設計）

### 論理設計のステップ

<dl>
    <dt>エンティティの抽出</dt>
    <dd>システムのためにどのようなエンティティ（＝データ）が必要になるかを抽出</dd>
    <dt>エンティティの定義</dt>
    <dd>どのような列（=属性）を持つかを定義する</dd>
    <dd>キー（key：ある特定の列の値を決定するための列）という列を定義</dd>
    <dt>正規化</dt>
    <dd>エンティティ（テーブル）について、システムでの利用がスムーズに行なえるよう整理する</dd>
    <dd>データの更新（登録、変更、削除）が整合的に行なえるように、エンティティのフォーマットを整理する</dd>
    <dt>ER図の作成</dt>
    <dd>エンティティ同士の関係を表現する図を作成</dd>
</dl>

## 内部スキーマと物理設計

<dl>
    <dt>物理設計</dt>
    <dd>データを格納するための物理的な領域や格納方法を決める工程</dd>
</dl>

### 物理設計のステップ

<dl>
    <dt>テーブル定義</dt>
    <dd>論理設計で定義された概念スキーマをもとに、それをDBMS内部に格納するための「テーブル」の単位に変換していく作業</dd>
    <dt>インデックス定義</dt>
    <dd>インデックスは本の索引のような役割</dd>
    <dt>ハードウェアのサイジング</dt>
    <dd>システムで利用するデータサイズを見積り、それに十分な容量の記憶装置（ストレージ）を選定する</dd>
    <dd>システムが十分な性能を発揮できるだけのスペックのCPUやメモリを持ったサーバーを選定する</dd>
    <dt>ストレージの冗長構成決定</dt>
    <dd>システムの耐障害性を高めるための工程</dd>
    <dd>RAIDと呼ばれる技術を用いる（RAID0、RAID1、RAID5、RAID6、...）</dd>
    <dt>ファイルの物理配置決定</dt>
    <dd>データベースのファイルをどのディスク（またはRAIDグループ）に配置するか考える</dd>
    <dd>最近のDBMSでは自動化が進んでいるため、ある程度はDBMS側が自動的に配置してくれることもある</dd>
</dl>

## バックアップ設計

### バックアップの基本分類

<dl>
    <dt>フルバックアップ（完全バックアップ）</dt>
    <dd>ある時点でそのシステムで保持されているすべてのデータをバックアップする方式</dd>
    <dd>リカバリ作業が容易だが、バックアップにかかる時間が長い、ハードウェアリソースへの負担が高い、バックアップ時にサービスの停止が必要になるなどの欠点も抱えている</dd>
    <dt>差分バックアップ</dt>
    <dd>ある時点でフルバックアップを行い、その後はバックアップファイルとの差分のみをバックアップする方式</dd>
    <dd>ログファイル（データの変更履歴）を活用</dd>
    <dd>フルバックアップと比較すると、バックアップデータ量が減る他、バックアップ時間が短縮されるなどのメリットがある</dd>
    <dd>バックアップ時に使用するファイルが増える（フルバックアップファイル＋ログファイル）ため、リカバリの手順や作業時間が長くなる</dd>
    <dt>増分バックアップ</dt>
    <dd>ある時点でフルバックアップを行い、その後は変更分のみをバックアップする方式</dd>
    <dd>バックアップデータ量が3つの方式の中で最も少ない（=バックアップに要する時間が短い）</dd>
    <dd>リカバリ時に使用するファイル数が多くなる（=最も作業時間が長い）</dd>
</dl>
上記のことから、バックアップ方式にも<b>トレードオフ</b>の関係が成立する

### バックアップ方式を選定するポイント

1\. いつ時点の状態に復旧させる必要があるか。そもそも復旧の必要があるか。
2\. バックアップに使用できる時間（バックアップウィンドウ）
3\. リカバリに使用できる時間（リカバリウィンドウ）
4\. 何世代までのデータを残す必要があるか（保管用の媒体サイズに影響）

## リカバリ設計

### リカバリとリストア

<dl>
    <dt>リカバリ</dt>
    <dd>バックアップファイルを戻す作業</dd>
    <dt>リストア</dt>
    <dd>トランザクションログを適用して変更文を反映する作業</dd>
</dl>

### データベースの復旧手順

1\. フルバックアップのファイルをデータベースに戻す（=リストア）
2\. 差分、または増分バックアップしていたトランザクションログを適用する（=リカバリ）
3\. データベースサーバーに残っているトランザクションログを適用する（=ロールフォアード）

## 感想

- RAID やバックアップ方式を通して、完全な手法（メリットしかない手法）は存在しないということを改めて思い知らされた
- バックアップ方式を選定するポイントが分かりやすくまとめられていたのが良かった
NSX-T サブトランスポート ノード プロファイルについて

<font color="blue">**NSX-T 3.2.2**</font> 以降で追加された、<font color="red">**サブトランスポートノードプロファイル**</font>について、機能概要と設定手順を確認しましたので以下にまとめます。

# サブトランスポートノードプロファイルとは
[VMware Docs](https://docs.vmware.com/jp/VMware-NSX-T-Data-Center/3.2/installation/GUID-11C39844-E58A-444F-9915-664D744ECD19.html) にあるように、クラスタ内の一部のホストに定義できるトランスポートノードプロファイルになります。

* サブトランスポートノードプロファイルで可能な事
下図のように、サブトランスポートノードプロファイルを使用する事で、大元のトランスポートノードプロファイルの、VDSや、アップリンクプロファイル、TEPのIPアドレス割り当てを上書きする事が可能です。
* ユースケース：ストレッチクラスタ、L3トポロジー等
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/754aee1a-eac7-779d-b830-089500369245.png)

* サブクラスタの設定
NSX-T UI > 「システム」> 「ホスト」> 「クラスタ」> 「サブクラスタ」> 「設定」よりサブクラスタを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/40a6ed34-ba1b-ab9f-6dc2-baa2aa3dddb1.png)
* サブクラスタ名の入力（Rack1）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/6118973c-81c2-edf3-dab0-d7e2a2c13314.png)
* クラスタ内の特定のホストをサブクラスタに含める。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/c8ea8432-48b2-2a73-482c-82af03901507.png)
* 同様にその他のホストを別のサブクラスタに含める。(Rack2)
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/a85c99cd-ee83-6c62-5c71-89afb2e08030.png)
* クラスタ内にサブクラスタが登録された事を確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/a14745d9-61c2-43ef-e7e2-767b4419577e.png)
* サブトランスポートノードプロファイルを作成する為、トランスポートノードプロファイルを編集する。「システム」> 「ホスト」>「トランスポートノードプロファイル」
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/211a5ba7-d213-bccb-adb9-13f63d28a8b3.png)
* サブトランスポートノードプロファイルを「設定」より追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/e9dd1002-d5b0-a794-bb78-d45b54d59761.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/373408b8-643e-e183-114b-f2aefa7e2240.png)



* 2つのサブトランスポートノードプロファイルについてそれぞれ、VDS、アップリンクプロファイル、IPプールの指定を行う。（大元のトランスポートノードプロファイルと重複しない内容を指定する）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/99bfbe68-bcd2-817b-091a-86dac875ccba.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/c480a5f3-d130-ebc0-e004-0d439aebbf58.png)

* トランスポートノードプロファイルに、2つのサブトランスポートノードプロファイルが作成されたことを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/689f2908-973e-52b9-2173-926c292f2e66.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/bd283233-f1f8-7156-abad-59377f65e908.png)

* 対象のトランスポートノードプロファイルへのインストール「NSXの構成」メニューより、インストール時に各サブトランスポートノードプロファイルを対象のホストに指定出来る事を確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251519/9f12256e-1ea3-8f1b-074c-6eecc8df5c85.png)
レンタルバイク可視化

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

# CSVファイルを読み込む
train_data = pd.read_csv('hour_train.csv')

# temp, atemp, hum, windspeed, casual, registered, cntの相関行列を計算
corr_matrix = train_data[['temp', 'atemp', 'hum', 'windspeed', 'casual', 'registered', 'cnt']].corr()

# ヒートマップを作成
plt.figure(figsize=(10, 8))
sns.heatmap(corr_matrix, annot=True, cmap='coolwarm', fmt='.2f')

# ヒートマップのタイトルを設定
plt.title('Correlation Heatmap of Bike Sharing Data')

# ヒートマップを表示
plt.show()

# temp atempが弱い正の相関
# humが弱い負の相関



# カテゴリカルデータを指定
categoricals = ['season', 'yr', 'mnth', 'hr', 'holiday', 'weekday', 'workingday', 'weathersit']

# グラフを描画
plt.figure(figsize=(14, 10))

for i, category in enumerate(categoricals, 1):
    plt.subplot(2, 4, i)
    
    # カテゴリごとに'casual', 'registered', 'cnt'を合計
    category_data = train_data.groupby(category)[['casual', 'registered', 'cnt']].sum().reset_index()
    
    # 棒グラフを描画
    category_data.plot(x=category, kind='bar', stacked=False, ax=plt.gca())
    
    # グラフのタイトルとラベルを設定
    plt.title(f'{category} vs Bike Usage')
    plt.xlabel(category)
    plt.ylabel('Total Number of Users')

# グラフのレイアウトを調整
plt.tight_layout()

# グラフを表示
plt.show()

# seasonは夏秋が多い
# yrは年がたつにつれて、増えている。バイクレンタルが普及している。
# mnthは夏と冬が増えている
# hrは朝と夕方が多い。通勤に使っている人がいる。
# holidayは平日が多い。が多い。
# humが弱い負の相関
# temp atempが弱い正の相関
# humが弱い負の相関




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

# CSVファイルを読み込む
train_data = pd.read_csv('hour_train.csv')

# 各データの統計量を計算
stats = {
    'Casual': {
        'mean': train_data['casual'].mean(),
        'median': train_data['casual'].median(),
        'std': train_data['casual'].std()
    },
    'Registered': {
        'mean': train_data['registered'].mean(),
        'median': train_data['registered'].median(),
        'std': train_data['registered'].std()
    },
    'Total': {
        'mean': train_data['cnt'].mean(),
        'median': train_data['cnt'].median(),
        'std': train_data['cnt'].std()
    }
}

# ヒストグラムの描画
plt.figure(figsize=(14, 10))

plt.subplot(2, 2, 1)
plt.hist(train_data['casual'], bins=30, alpha=0.5, label='Casual', color='blue')
plt.hist(train_data['registered'], bins=30, alpha=0.5, label='Registered', color='orange')
plt.hist(train_data['cnt'], bins=30, alpha=0.5, label='Total', color='green')
plt.title('Distribution of Casual, Registered, and Total Users')
plt.xlabel('Number of Users')
plt.ylabel('Frequency')
plt.legend(loc='upper right')

# 統計量の棒グラフを描画
plt.subplot(2, 2, 2)
stats_df = pd.DataFrame(stats).T
stats_df.plot(kind='bar', ax=plt.gca(), color=['blue', 'orange', 'green'], edgecolor='black')
plt.title('Statistics of Casual, Registered, and Total Users')
plt.xlabel('Category')
plt.ylabel('Value')
plt.xticks(rotation=0)
plt.legend(['Mean', 'Median', 'Standard Deviation'])

# グラフのレイアウトを調整
plt.tight_layout()

# グラフを表示
plt.show()
超初学者向け 関数宣言とアロー関数の違い(イメージ)

## 関数宣言の書き方

```JavaScript
function greet(name){
  return `Hello ${name}`;
};
 
console.log(greet("John"));
```
出力結果
```
hello John
```

## アロー関数の書き方

```Javascript
const greet = (name) => {
  return `Hello ${name}`;
};
 
console.log(greet("John"));
```
出力結果
```
Hello John
```

### 解説
どちらも同じ出力結果になっています。

2つの書き方について感覚的ではありますが、自分なりの解釈を書きたいと思います。


- functionの英語の意味は、機能，用途，目的；役割，任務など。
イメージとしては、「function」でこういう機能を持ちます！と宣言をするということ。
- アローとはarrow(矢印)という意味なので、関数を矢印 => で表現しますというイメージ。


どちらの方を使ったらいいのかは諸説あるようなのでこれから学んでいきたいと思います。

少しでも参考になればと幸いです。
multerをざっくり理解する

# multerとは
- Node.jsのミドルウェア
- ファイルのアップロードを簡単に処理する

# そもそもファイルのアップロードとは
- HTTP送信しただけではアップロードとは実質的に言えない
- その後のサーバーサイド上で行う処理も含めてアップロードと認識する
    - この部分をmulterで行う

# 使い方
### インストール
```
npm install multer
```
### Node.js
```js
const multer = require("multer");

// multerの設定
const multerMemoryStorage = multer.memoryStorage(); // ファイルをメモリに保存
const multerUpload = multer({ storage: multerMemoryStorage }); // multerインスタンスの作成

router.post(
    "/upload",
    multerUpload.single("markdown"), 
    async (req, res, next) => {
        const buffer = req.file.buffer;
    }
  );
```

# ざっくりと解説
```js
const multerMemoryStorage = multer.memoryStorage(); // ファイルをメモリに保存
```
multerでは保存先をディスクまたはメモリに指定できます。

ここでは特にディスクに保存する必要もなかったので、簡単に使用できるメモリを指定しました。

```js
const multerUpload = multer({ storage: multerMemoryStorage }); // multerインスタンスの作成
```
上で指定した保存方法を使用してmulterインスタンスを作成してます。

これで実際にmulterが使えるようになります。

```js
router.post(
    "/upload",
    multerUpload.single("markdown"), 
    async (req, res, next) => {
        const buffer = req.file.buffer; // ファイルの内容を取得
    }
  );
```
multerはミドルウェアなのでこのような書き方になります。コールバック関数の中に書くといったことはできません。

```js
multerUpload.single("markdown"), 
```
今回は一つのmarkdownをアップロードするので、このようにしました。

そのほかにアップロードするメソッドは以下のようなものがあります。

```js
// 単一のファイル
multerUpload.single('file');

// 複数のファイル
multerUpload.array('files', 10);

// 指定された複数の種類のファイル
multerUpload.fields([
  { name: 'photos', maxCount: 3 },
  { name: 'documents', maxCount: 2 }
]);

// ファイルなしのテキストデータ
multerUpload.none();

// すべてのファイル
multerUpload.any();
```

```js
async (req, res, next) => {
    const buffer = req.file.buffer;
}
```
req.file.bufferの中にファイルのコンテンツが格納されています。

これでファイルの保存や処理ができるようになりました。

# 補足
上でmarkdownと指定している箇所がありますが、これはフロントで指定した名前のことです。
```js
const formData = new FormData();
formData.append("markdown", file);
```
ER図：DBMLについての学習

## はじめに
ER図を描く際に前回はMerimaid方式での入力方法を学びましたが今回はもう一つ、主流？とされているDBMLについて調べたことをアウトプットしたいと思います。

https://qiita.com/wa-chan222/items/f27e07542efed455bbfe


## DBMLとは
- DBML（Database Markup Language）は、データベースの構造をテキストベースで記述するための言語
- データベースのテーブル、カラム、リレーションシップなどをコードで定義し、視覚的なER図やデータベーススキーマを生成するために使われる

https://dbdiagram.io/pricing


### DBML記法のメリット
| メリット |  |
| - | - |
| 簡潔で直感的な記法 | ・テキストベースの簡潔な記法でデータベース構造を定義できる<br>・低コストで、誰でも簡単に使い始めることが可能 |
| バージョン管理 | ・テキストファイルとしてデータベーススキーマを管理できる<br>・Gitなどのバージョン管理システムと容易に連携できる<br>・変更履歴の追跡やチームでの共同作業がしやすくなる |
| ツールの連携 | 様々なツールと連携して視覚的なER図を生成したり、データベースのマイグレーションを自動化することが可能 |
| 自動生成 | ・データベースのドキュメントを自動生成したり、逆に既存のデータベースからDBMLを生成することができる<br>・ドキュメントと実際のデータベースの同期が保たれる |

### DBML記法のデメリット
| デメリット |  |
| - | - |
| 複雑なデータベースには不向き | 大規模で複雑なデータベーススキーマを記述する場合、テキストベースの記法では読みやすさや管理のしやすさが低下することがある |
| ツール依存 | 全てのデータベース管理ツールがDBMLをサポートしているわけではないため、ツール選びが制約されることある |
| 限られたエコシステム | 他の成熟した技術に比べてまだ十分に整っていない場合がある |


スキーマ（Schema）[^1]
[^1]: データベース内のデータ構造やデータの配置を定義したもの。
具体的には、テーブル、カラム、データ型、インデックス、リレーションシップ（外部キー）などを指す。データベースの設計図のようなもので、データの格納方法やアクセス方法を規定する

マイグレーション[^2]
[^2]: データベースのスキーマやデータを管理し、変更を適用するための重要なプロセス


## DBML想定される利用シーン
- **データベース設計**
新規プロジェクトでデータベースを設計する際に、DBMLを使ってテーブルやリレーションシップを定義し、チームで共有することで効率的に設計が進められる
- **ドキュメント生成**
データベースの構造を自動的にドキュメント化し、常に最新の状態に保つために利用できる。DBMLから視覚的なER図を生成することで、データベースの構造を直感的に理解できる
- **コードレビュー**
テキストベースのDBMLファイルを使って、データベース設計の変更をコードレビューのプロセスに組み込むことができ、変更の妥当性を確認しやすくなる
- **マイグレーション管理**
データベーススキーマの変更をDBMLで管理し、自動的にマイグレーションスクリプトを生成することで、データベースのバージョン管理を効率化できる


## 参考サイト一部紹介

https://zenn.dev/ryo_kawamata/articles/introduce-ddbdiagram-io

https://qiita.com/ryamate/items/12bd8cd819079c28644c


## さいごに
今回はDBMLについて紹介しました。ER図作成などにあたり何かの参考になれば幸いです。
UI基礎(4)

# はじめに
引き続き、フロントエンジニアとして、意図したUI設計ができるようにデザイン部分の基礎を学んで行きます。
最後、デザインの基礎知識についてまとめます。

:::note info
この記事のinfoは筆者の考えや感想を書いております。
:::

前回まで
[UIの基礎](https://qiita.com/saburo555/items/d4871ad805fdd70be966)
[UIの基礎(2)](https://qiita.com/saburo555/items/c773cf0e92bd93206b95)
[UIの基礎(3)](https://qiita.com/saburo555/items/2d993e25179f85aba2e3)

# ミニマルデザイン
ポイントは以下。
* どこを押せるかをわかるようにする
* 余白を最大限にいかすことによって、コンテンツを目立たせる
* シンプルとの違いを理解する*

*シンプルとは、余計な解釈を生まないデザイン、ミニマルとは余計な装飾や要素を剥ぎ取ったデザイン。

:::note info
違いはこのサイトがわかりやすかった。
[「シンプル」と「ミニマル」の違いって何？｜2022年3月1～2週のウエブル週報
](https://weble.tokyo/blogs/weekly/3276/)
:::

# デザインガイドライン
デザインガイドラインの目的は、デザインを定義することで、「再利用性が高まること」、「一貫性を保持できること」、デバイスを跨いでも「統一された世界観を醸成できること」。

# プロトタイプを作るまで
![スクリーンショット 2024-07-20 11.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/02f49fe5-86b4-c337-b658-0cd071768e38.png)
出典：[Webデザインにおけるプロトタイプとは？ワイヤーフレームとの違いや作成方法を紹介](https://mieru-ca.com/heatmap/blog/what-is-prototype/)

「ワイヤーフレームやモックアップとの違い」の章の説明がわかりやすい。


## ワイヤーフレーム
基本的な骨組みで構成した設計図。
手書きでもよい。

## モック
リンクや動きが確認できるもの。

## プロトタイプ
実際にコーディングされたもの。
以下が確認できる。
* 見え方
* 動き方
* 操作の仕方
* 印象
* 考慮漏れ

# マルチデバイスデザイン
どのデバイスでも同等の機能があること。
同じUIでなくてもいい。

## デバイスの無意識の使い分け
PC：じっくり作業用
スマホ：場所を問わず使用できる
テレビ：大人数で見る

:::note info
上記を踏まえた上で、インタラクションを検討するのが良さそう。
例えば、こんな感じかな？
カレンダーアプリの場合だと、、、
PC: 月表示をメインに、詳細な予定入力フォームを横に配置
スマホ: 日表示をメインに、タップやスワイプで素早く予定を追加・編集
テレビ: 週表示をメインに、家族全員の予定を色分けして大きく表示
（テレビで見ることあんまりなさそうだが。）
:::

# まとめ
思った以上にシンプルにまとめてしまったので、(4)は短くなってしまいました。
次は、実際のデザインを見ながら「なぜこうなっているのかな」と考えられる、そして、自身でデザインを意図して検討できるようなことをやっていきたいと思います。

## シリーズ
[UIの基礎](https://qiita.com/saburo555/items/d4871ad805fdd70be966)
[UIの基礎(2)](https://qiita.com/saburo555/items/c773cf0e92bd93206b95)
[UIの基礎(3)](https://qiita.com/saburo555/items/2d993e25179f85aba2e3)
今：[UIの基礎(4)](https://qiita.com/saburo555/items/8426c243d14efca1f5a5)
#100DaysOfCodeをはじめて気がついたら1ヶ月がたっていた話

# はじめに
**#100daysOfCode**というハッシュタグを知っていますか？
100daysOfCodeはコーディングの習慣をつけるためのチャレンジです。
私自身もこのチャレンジをしているのですが、気がついたら1ヶ月経過していたので振り返ってみたいと思います。

# #100daysOfCodeとは
毎日最低1時間以上はコーディングをしてそれをX（Twitter）に投稿するというチャレンジです。

細かいルールなどは公式サイトがありますのでそちらをご覧ください。
[#100DaysOfCode公式サイト](https://www.100daysofcode.com/)

# はじめたきっかけ
最近会社の後輩と夜一緒に毎日勉強会をしていました。ただ、仕事もある中で毎日続けるのはかなり難しいと思います。お互いのモチベーション維持、本当にやっているかの監視も含めこのチャレンジを始めました。

# よかったこと
このチャレンジを始めてよかったことが3つあります。
* 勉強の習慣化
* モチベーション維持
* 自肯定感の向上

上2つは特段変わったことでないかなと思います。
私が最もよかったことは、**自肯定感の向上**です。

プログラミングの勉強はなかなかエラーが解決しなかったり、全く理解ができず、適性がないと思ってしまうことがあると思います。これは誰からも褒められたりすることがなく、成長の実感が湧かないからではないかと思います。

このチャレンジですが、同じチャレンジをしている人2人に連絡するというルールがあります。（私はこの部分を省略して成果の報告のみにしています）ですので、毎日誰かからのリプライがあります。誰かが自分の勉強の成果を見て、反応してくれるだけでも自分が頑張っていると思えることができるようになりました。

# これから
100日間の継続チャレンジですから1/3程度たったことになります。間違いなく勉強の習慣はつきましたし、スキルも始める前よりついたと思います。2/3到達に向けて今度は、勉強の質というのもを目指していきたいと思っています。

# 最後に
プログラミングの勉強は時間がかかります。長く勉強を続けるためには適度に**自分を褒めてあげること**が大事だと私はこのチャレンジを通して感じています。

このチャレンジ以外にもたくさん方法はあると思いますので、皆さんも各々のやり方で頑張ってください。一緒に#100daysOfCodeに挑戦してくださる方はぜひ参加してみたください！
英語が苦手な人向けおすすめサイト

いちいち検索エンジンで「○○　英語」と毎回調べるのは面倒。

そんな英語が苦手な私が、よく使ってるサイトを紹介。

[codic](https://codic.jp/engine)

https://codic.jp/engine

いくつか便利な機能もあって、非常に助かっています。
UI基礎(3)

# はじめに
引き続き、フロントエンジニアとして、意図したUI設計ができるようにデザイン部分の基礎を学んで行きます。
ナビゲーションやインタラクションあたりをまとめます。

:::note info
この記事のinfoは筆者の考えや感想を書いております。
:::

前回まで
[UIの基礎](https://qiita.com/saburo555/items/d4871ad805fdd70be966)
[UIの基礎(2)](https://qiita.com/saburo555/items/c773cf0e92bd93206b95)

お次
[UIの基礎(4)](https://qiita.com/saburo555/items/8426c243d14efca1f5a5)

# ナビゲーション
## ナビゲーションとは
ユーザーが目的を見つけるための案内であり、ユーザーがシステムを操作する際の要素の集まり。

## 操作の違い
入力手段によって、最適なナビゲーションは変わる。
マウス操作では、細かいボタンなどで作られているナビゲーションでも大丈夫であるが、タッチ操作のあるものやリモコンなどでは不便である。

# インタラクション
インタラクションの種類は、2種類。
理解のためと、演出のためのもの。

理解のため：どこを押しているのか、何から何に変化したのかなどを伝えるものなど。
演出のため：情報登録の際、ページごとにアイコンの表情が変わるなど。

## 補足
マイクロインタラクション（自分としては、親切さ的なもの）がある。
ちょっとしたアイコンの動きとか、入力時のアクションなどの「なくても機能として支障がないが、あったほうが便利である」もののことを言う。

# ヘッダー
ヘッダーには、グローバルナビゲーション、検索、メガドロップダウンメニューなどサイト全体を移動できる基本的なナビゲーションが存在する。

## スクロール時の動きの種類
完全に見えなくする、または縦幅を短くしたものが上部に張り付いているものがある。
スマホのように上下にナビゲーションがあるものは、抜け感が悪くなるので、どちらか一つを残したり、上にスクロールしたときだけヘッダーを出すなどの工夫が必要。

# フッター
アプリではなく、サイトのフッターはサイトマップを掲載していることが多い。
とはいえ、結論何を掲載しても構わない場所でもある。
有用なもの、優先順位の高いもの、知っておいてほしいもの、使ってほしいものなど。

:::note info
サイトマップのイメージもあったが、何を掲載してもいいとはあまり意識してなかったなと。
:::

# パンクズリスト
## 役割
現在の場所の明示と、到達経路への移動。

:::note info
「このページ違う、どれだっけ？」となった場合、巻き戻りできるので、重宝している。
:::

## ポイント
* スマホでは、相性が悪い。（なくはない。）
またPCより、一時的に見ることが多いため、現在の場所がどこかを求められない傾向がある。

* PCの場合は、パンクズリストフッダーに記載するものあり。
* 複数到達経路がある場合
表示方法はいくつかある。
    * 優先型：固定のパンクズリストを表示する
    * 複数型：到達しうる経路を全て並べて表示する
    * 変動型：やってきた経路によって変えて、表示する

# カラムと左右ナビゲーション
1カラムレイアウトが多い。
ビジュアル重視、ファーストビューで大きな画像を表示するページが多い。
また、表示される画像に注目を集めることができる。
かつ、レスポンシブデザインも展開しやすいため。

# 　アコーディオン
![スクリーンショット 2024-07-20 10.50.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/6ddc42a8-a399-db16-960a-ac676dff9114.png)
![スクリーンショット 2024-07-20 10.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/ebef3806-5f86-2e25-bfb1-c4181b2b817a.png)

出典：[アコーディオンメニューとは](https://zius.speever.jp/blog/glossary/accordion_menu/)

多くの並列情報から、必要な部分だけパッと見せたいときに使うと良い。
スクロールせずとも情報にたどり着ける。
またページ全体の内容もパッと見ることができる。

ただ、並行して、比較したいときなどは、見えづらいデザインとなる。

# スクロールとページング
スクロールはスマホとかの縦の長辺、ページングは短辺との相性が良い。

## スクロールとページングの使い分け
Googleだと、PCはページング、スマホでは、無限スクロールとなっている。
じっくり探したい場合は、ページングの方が適している。
サッと手軽に探したいとき、スクロールの方が会っている。

## 無限スクロール
スクロールのみでの操作ができるので、使い勝手が軽快。
意識が途切れることなく、集中してみられるので、画像が主体のサービスなどにも効果的。

フッターを使うことができない点には要注意。「もっと読む」などの表示があるものは問題ない。
「戻る」ボタンとの相性は良くない。

:::note info
戻るを押すと、次に戻ったとき、最初に戻ってしまう。
かつ、詳細を見たときに、その位置に戻れないと辛いので、Twitter（X）などを参考に詳細を作る必要がある。
:::

## スクロールの方向
テキストの量が多い場合は、縦スクロールが自然に感じられる。
画面が長い方にスクロールするのが自然。
Ex. テレビだと横、スマホだと縦のイメージ。　（自分の声：PCは例外かな。）

また、一覧の要素の形が、縦長だと、横スクロール（Netflixみたいなイメージ）、横長だと、縦にスクロールされるのが自然。

要素の隙間が大きい方にスクロールすると言うものある。
横スクロールを表すには、見切れを使う方法がある。

# まとめ
次は最後の章をまとめます。
なぜそのデザインになっているのか、何を表すためにそうなっているのかの言語化の種が埋まってきている感じがします。

## シリーズ
[UIの基礎](https://qiita.com/saburo555/items/d4871ad805fdd70be966)
[UIの基礎(2)](https://qiita.com/saburo555/items/c773cf0e92bd93206b95)
今：[UIの基礎(3)](https://qiita.com/saburo555/items/2d993e25179f85aba2e3)
[UIの基礎(4)](https://qiita.com/saburo555/items/8426c243d14efca1f5a5)
yukicoder No.7 プライムナンバーゲーム　解説

[問題文](https://yukicoder.me/problems/no/7)

# 解説
**おそらく公式とは違う解法なのだと思う。**
まず大きく二つのステップに分ける
①素数を全列挙する
②どっちが勝つかを考える

## ①素数を全列挙する
これは別にしなくてもいいのだが、計算量を減らすためにはやっておいた方がいい。
一般にある整数$N$が素数かどうかを判定するときは$2$~$\sqrt{N}$までで割り切れるかを確かめればいい。
これを繰り返し$2$~$N$までの素数チェックを行えれば大丈夫

## ②どっちが勝つかを考える
ここが難しいのだが、実はこのようなゲームでは次のような必勝法があるといわれている。
**・自分がうまくやって負けの状態に遷移することができればその条件下では勝てる。
・そうでないならば勝てない。**
まあこの感覚さえ覚えていればいい。
で、どうやるかというと、dpみたいな感じでやる
dp[$i$]=初めに自然数iが与えられたときに、先手が勝つことができるか。
ここが一番気持ち悪いだろうが、dp[$0$]とdp[$1$]はtrueにする。(当然勝てないので)。
つぎにdp[$i-素数$]がfalseになっているところがあるかについての判定は、①の配列を使えばいい。
これを繰り返していき、最後にdp[$N$]がtrueならWin,falseならLoseと置く。
（ここで、dp[$0$]およびdp[$1$]をtrueにした理由は、dp[$i$]がtrueならWinという感覚に合わせるとき、dp[$0$]dp[$1$]がfalseだとdp[$2$]がtrueになるといったかんじで勝敗が真逆になる現象が発生するためである）。
素数全列挙は$O(\sum_{i=1}^Nsqrt(i))$、dpは$O(N*素数の個数)$。
一つ目に関しては、$N=10000$と置いたとき$651750$。
$10000$以下の素数の個数は$1229$個なので、十分高速。

# C++での解答例
```C++
#include <bits/stdc++.h>
using namespace std;

int main(){
  int n;cin>>n;
  //素数列挙
  vector<int> sosu(0);
  for(int i=2;i<=n;i++){
    bool sos=true;
    for(int j:sosu){
      if(i<j*j)break;
      if(i%j==0)sos=false;
    }
    if(sos)sosu.push_back(i);
  }
  vector<bool> dp(n+1,true);
  for(int i=2;i<=n;i++){
    bool win=false;
    for(int j:sosu){
      if(i<j)continue;
      if(!dp[i-j])win=true;
    }
    dp[i]=win;
  }
  cout<<(dp[n] ? "Win":"Lose")<<endl;
}
axumでクエリパラメータから配列を受け取るには

axumで`Vec<String>`を受け取ろうと思ったらうまくいかなかったので対処法メモ

# 対処法
:::note info
`axum_extra::extract::Query`を使うと受け取れます
:::

# サンプル
以下のようなGET関数に`?values=value1&values=value2`のようなクエリパラメータを付与して実行した場合、クエリパラメータからうまく`values`を受け取れませんでした
```rust
use axum::extract::Query;

async fn Hello(Query(params): Query<Payload>) -> Result<Response, StatusCode> {
    ~~~
}

struct Payload {
    values: Vec<String>
}

```

調べるとaxum標準のQueryはパーサーが対応してない様子、、
https://github.com/tokio-rs/axum/discussions/1719

代わりに[axum_extra](https://crates.io/crates/axum-extra)が使用できるそうです
[serde_qs](https://crates.io/crates/serde_qs)も使用可能（こっちはa[]のような配列記載にも対応している）なようなので、用途や好みで使い分けるとよさそうですね🥇

修正版は以下。簡単ですね❗
```diff_rust
+ axum_extra::extract::Query;

async fn Hello(Query(params): Query<Payload>) -> Result<Response, StatusCode> {
    ~~~
}

struct Payload {
    values: Vec<String>
}
```
寮生活経験者による理想の人間関係の形

## はじめに
日々の業務お疲れ様です！！
また、当記事を閲覧していただきありがとうございます。

**突然ですが！職場の対人関係で悩みはありませんか？**

おそらく、皆さん思い当たる節あるかと思います、、、。
ストレス溜まってしょうがないですよね～

私は過去に、あるところで寮生活を経験したことがあります。
その際に、若輩者ながら理想の人間関係を体験できた気がします。
その時の経験やマインドを共有できたらと思います。
※対面での体験になりますが、オンラインでも活用できるところあるかと思います。
※当記事はあくまでも私個人の意見です。

この記事は3~5分ほどで読めます。

## 先に結論
### 結局、コミュニケーションが大事
なんだかんだいって**話すこと**がすべてです。
無言で意思疎通なんて、何年も一緒に仕事してる人とじゃないと成り立ちませんし・・・

### メリット
仕事の話題でもプライベートなことでも、話すことで**相手の意図していること、考え方の理解**が深まり、その後スムーズに事が進みやすくなる。

### 理想
- 誰だって**自分が素でいられる環境**が理想。

「自分の人生なんだから他人の事なんて関係ない」という考えは、私自身も大事にしている考え方なので気持ちはわかります。

ただ常にそれでは、TPOが欠如していて協調性にかけます。

**個人が素でいられながら、周囲と良い関係を築けたら最高じゃないですか？**

## 私の経験
私のいた寮では基本的に毎日、同室の人と寝食や行動を共にします。
赤の他人と急にそんな生活が始まるので、まさにストレスのゴールデンタイム突入です。

しかし、少し考えれば当然ですがそれは私だけではありません。周りも同じことを思っています。
一緒に共有している時間が圧倒的なため、ストレスの低減が必須です。

そのため、特に同室の人とは積極的に話し合いの場を設け、不満やルールの改定、たわいもない話などをしてきました。

その結果、人間関係でストレスを感じることは圧倒的に減り、**各個人が素でいながらも協調性のある良い関係**でいられました。


## なぜ難しいのか
### 時間の共有が短い
当時寮で生活していたため、私の周りには常に誰かいたました。
それに比べると寮生活していない方は、
- 職場の人と周囲と話す時間が短い
- 家があるから、ストレスを感じても持ち帰る  

などの理由で、人間関係にストレスを感じているんじゃないかと思います。
（私は、社会人全員に寮生活を1ヶ月でもいいので経験していただきたいと常々思っています・・・）

とはいえ！今の時代的に、私生活に影響を及ぼさず、職場での人間関係を円滑にしていきたい！！

**だからこそ、会ってる時の会話が大事**と考えます！

## 解決策
前提として、、、
- **仕事やプライベートな話を積極的にする**
面倒に感じるかもしれませんが、これが**原点にして頂点**です。

上記をふまえて、、、
- ストレスに感じ始めた時に口に出して言ってみる
- 聞く側も反抗せず、しっかり聞き、**話し合い**をする
- 間接的や一方的な指示では、言われた側は納得しずらい。簡潔で真っ当な理由を添える
- **距離感**は大事。人によってバラバラなので普段の会話から感覚を掴む
- 少人数グループではなく、チームでのグループ、仲間外れをつくらない
- 相手に向き合って話し合うことが大事なので、一方がケンカ腰になるのは論外

以上のようなことが、職場で円滑に業務を進めるうえで必要になってると思います。


## 最後に
社会や職場だと、どーしても地位やプライド、今後の影響などを気にして消極的になってしまいます。
しかし、誰しも一度きりの人生です。
ストレスを抱えて生きずらい人生よりも、自分が素でいられる方がよっほど良いですよね。

ぜひコミュニケーションを意識して、各々の思う理想の人間関係を築いていただければと思います。
当記事が参考になったならば、相手にもその意識を持ってほしいため、共有していただけると嬉しいです。
PostgreSQL: serial の使い方

## テーブルの作成

```sql:create01.sql
create table cities (id varchar(10) primary key,
	name text, population int, date_mod date,
	number serial not null);
 ```

 実行結果

```text
city=# \d cities
                                       Table "public.cities"
   Column   |         Type          | Collation | Nullable |                Default                 
------------+-----------------------+-----------+----------+----------------------------------------
 id         | character varying(10) |           | not null | 
 name       | text                  |           |          | 
 population | integer               |           |          | 
 date_mod   | date                  |           |          | 
 number     | integer               |           | not null | nextval('cities_number_seq'::regclass)
Indexes:
    "cities_pkey" PRIMARY KEY, btree (id)
```

## データの挿入

```sql:insert01.sql
nsert into cities values ('t3461','広島',72814,'2001-9-14');
insert into cities values ('t3462','福山',41738,'2001-7-21');
insert into cities values ('t3463','東広島',92513,'2001-6-12');
insert into cities values ('t3464','呉',93167,'2001-9-29');
insert into cities values ('t3465','尾道',95419,'2001-3-18');
insert into cities values ('t3466','竹原',82314,'2001-2-21');
insert into cities values ('t3467','三次',76152,'2001-8-16');
insert into cities values ('t3468','大竹',37541,'2001-7-7');
insert into cities values ('t3469','府中',46518,'2001-10-9');
```

実行結果

```text
city=# select * from cities;
  id   |  name  | population |  date_mod  | number 
-------+--------+------------+------------+--------
 t3461 | 広島   |      72814 | 2001-09-14 |      1
 t3462 | 福山   |      41738 | 2001-07-21 |      2
 t3463 | 東広島 |      92513 | 2001-06-12 |      3
 t3464 | 呉     |      93167 | 2001-09-29 |      4
 t3465 | 尾道   |      95419 | 2001-03-18 |      5
 t3466 | 竹原   |      82314 | 2001-02-21 |      6
 t3467 | 三次   |      76152 | 2001-08-16 |      7
 t3468 | 大竹   |      37541 | 2001-07-07 |      8
 t3469 | 府中   |      46518 | 2001-10-09 |      9
(9 rows)
```

## データを削除して、再びデータを挿入

データを削除

```text
city=# truncate cities;
TRUNCATE TABLE
```

再びデータを挿入

```text
city=# select * from cities;
  id   |  name  | population |  date_mod  | number 
-------+--------+------------+------------+--------
 t3461 | 広島   |      72814 | 2001-09-14 |     10
 t3462 | 福山   |      41738 | 2001-07-21 |     11
 t3463 | 東広島 |      92513 | 2001-06-12 |     12
 t3464 | 呉     |      93167 | 2001-09-29 |     13
 t3465 | 尾道   |      95419 | 2001-03-18 |     14
 t3466 | 竹原   |      82314 | 2001-02-21 |     15
 t3467 | 三次   |      76152 | 2001-08-16 |     16
 t3468 | 大竹   |      37541 | 2001-07-07 |     17
 t3469 | 府中   |      46518 | 2001-10-09 |     18
(9 rows)
```
【Rails】ArgumentError (Unrecognized status code :request_entity_too_large)

## はじめに
Rails7にアップデート中、request_entity_too_largeを使用している部分でエラーが発生したので、解消方法をまとめていきます。

## 問題
コード
```ruby
render body: nil, status: :request_entity_too_large
```

エラー内容
```ruby
Completed 500 Internal Server Error in 1ms (ActiveRecord: 0.0ms | Allocations: 984)

ArgumentError (Unrecognized status code :request_entity_too_large):
```

## 解決方法
Rails4.2からrequest_entity_too_largeはpayload_too_largeに変更されています。
request_entity_too_largeを使用している部分をpayload_too_largeに変更することで解消します。
```ruby
render body: nil, status: :payload_too_large
```

## 参考
https://stackoverflow.com/questions/78028946/rails-argumenterror-unrecognized-status-code-request-entity-too-large

https://qiita.com/terufumi1122/items/997e24dde87f807e3944
JavaScriptでvarが使われないかつ非推奨な理由

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var

https://typescriptbook.jp/reference/values-types-variables/vars-problems

https://qiita.com/ist-t-s/items/49ed558bd837452353b8

https://myprg.dev/posts/javascript-declaration-type

<iframe width="560" height="315" src="https://www.youtube.com/embed/OFqDDMGVK1g?si=bi6W6JhkHK9qsE1F" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
REACT UIフレームワークの選択について(FREE) (MUI,Semantic-UI-React,ANT UI)

### Material-UI（MUI）
概要
Material-UI（MUI）は、Reactアプリケーションのための人気のあるUIフレームワークです。GoogleのMaterial Designガイドラインに基づいており、モダンでレスポンシブなUIコンポーネントを提供します。MUIを使用すると、高品質なユーザーインターフェースを迅速に構築できます。

https://mui.com/material-ui/getting-started/templates/

### Semantic UI React
概要
Semantic UI Reactは、Semantic UIフレームワークをReactで使用するための公式ライブラリです。Semantic UIは、人間が読めるクラス名を使用して直感的なHTMLを書くことを目的としたCSSフレームワークであり、Semantic UI ReactはこれをReactコンポーネントとして提供します。これにより、Reactアプリケーションにおいて、Semantic UIの豊富なスタイルとインタラクティブなコンポーネントを活用することができます。

https://react.semantic-ui.com/layouts/

### Ant Design (Ant UI)
概要
Ant Design（Ant UI）は、企業向けのアプリケーションを構築するために設計されたReact用のUIライブラリです。中国のAlibabaグループによって開発され、豊富なコンポーネント、洗練されたデザイン、優れたカスタマイズ性を提供します。Ant Designは、Reactエコシステムとシームレスに統合されており、迅速な開発をサポートします。

https://ant.design/components/overview/

以上のUIフレームワーク,PCバージョンとmobileバージョン二つがあること
次回Material-UIを詳細的に紹介する
Leafletの独自マップでの範囲外の404エラーを防止する

自分で用意した画像を表示させると、画像外のエリアを表示した場合404エラーが出るのを防止する。

土台はいつぞやの記事。

https://qiita.com/ccHarvestasya/items/526b977cb35216d72a1d

特に難しいことは無く、`tileLayer`に`bounds`と`noWrap`を設定するだけ。

`LatLngBounds`に設定する値は、元の画像のサイズ。
(今回使ってる画像は元々6720x4480)

```typescript
    // 404エラー防止
    const mapBounds = new L.LatLngBounds(
      map.unproject([0, 4480], map.getMaxZoom()),
      map.unproject([6720, 0], map.getMaxZoom())
    );

    L.tileLayer('map/{z}/{x}/{y}.jpg', {
      attribution: '© <a href="https://www.pakutaso.com/20200556146post-25030.html">ぱくたそ</a>',
      bounds: mapBounds,
      noWrap: true,
    }).addTo(map);
```
ローカル5Gの導入コストが高い時代は終わった

ソフトウェアとサーバー代だけで1000万円を超えている供給元が未だに多く存在している。

それは、パブリック5Gの価格帯をひきずっているメーカーの仕業かもしれない。

そして、ローカル5Gに便乗して高額なセキュリティ製品を売りつけようとすパロアルトネットワークスのような会社も複数社が顔を揃えるようになった。

ローカル5Gが小規模な5Gであるが故に、設備のオーナーの誰かが恨みを買って攻撃されるぐらいしか攻撃の動機は発生しないだろう。

また、物理的な兵器に対する備えに至っては、楽天の基地局のように無防備となるので、ミサイルが着弾すればローカル5Gはいとも簡単に再起不能となるだろう。

話が脱線してしまったが、日本におけるローカル5Gは無線従事者の免許さえあれば、総務省から免許を取得し、OAIのオープンソース等を活用するなどすれば、初期費用は100万円台まで下がる時代が到来している。

それでもまだ、100万円はエンドユーザーには高いかも知れない。

いずれはWiFiルータのように数万円でローカル5Gの動く時代が来るかもしれない。

そうなれば、数千万円つぎ込む先駆者のシステムは
全くもってコスト効率の納得のいかないものになるであろう。

そして、システムの更新案件は発生せず、
安価なローカル5Gにとって変わるだろう。

最期は、1000万円台のローカル5Gサービス提供をがんばっていた組織は終焉を迎えるだろう。
JavaScriptの == と === の違いを簡単に理解しておく

Ruby等からプログラミングを始め、その後JavaScript二触れ合う人は、「===」という比較演算子に馴染みがないことも多い気がします。（私はそうでした。）
なんとなく、「===」は厳密な比較で「==」はもっと緩い比較くらいに捉え、「===」を利用すべきなんだなとは思っていましたが、慣れてきたところでちゃんと理解しておこう、というモチベーションの記事です。

## 「==」 と 「===」 って何が違うの？

用語のみだと

「==」：等価演算子
「===」：厳密等価演算子    

となります。仰々しい名前。ただ、一体何が<厳密>なのか？
両者の違いは、簡単にいうと「型変換をして比較 or しないで比較」 ということになります。

### 厳密等価演算子「===」について
こちらの方が単純なため、先に記載。
名前の通り、左辺と右辺の値を厳密に比較してくれます。
以下の例は、全て何も出力されません。

```js
if (1 === '1') {
  console.log('number と string')
}

if (0 === false) {
  console.log('number と boolean')
}

if (null === undefined) {
  console.log('null と undifined')
}
```

結果
```cl
// 何も出力されない
```

上記の通り、1は'1'とは別ですし、0とfalseも別のものです。ですので、非常に直感的な動作をしてくれます。

### 等価演算子「==」について
こちらが少し厄介です。下に例を示します。

```js
// '1' が numberに変換され、その後 1 と比較される
if (1 == '1') {
  console.log('number と string')
}

// falseが 0 に変換され、その後 0 と比較される
if (0 == false) {
  console.log('number と boolean')
}

// '0'は0に、falseも0に変換され、比較される
if ('0' == false) {
  console.log('string と boolean')
}

// 空配列は""に変換される。
if ([] == '') {
  console.log('array と string')
}

// [] -> '' -> 0, false -> 0 
if ([] == false) {
  console.log('array と boolean')
}

// [1] -> '1' -> 1
if ([1] == 1) {
  console.log('array と string')
}

if (null == undefined) {
  console.log('null と undifined')
}

```

実行結果
```cl
number と string
number と boolean
string と boolean
array と string
array と boolean
array と string
null と undifined
```

というように、全て出力されました。
詳細な説明は省きますが、比較演算子「==」を利用し、かつ両辺の値の型が違う場合、値同士をそのまま比較するのではなく、一度型変換のプロセスを挟み、比較してくれます。
※ '1' == '1'など、同じ型の場合はそのまま比較してくれます。

このように、型が違くてもtrueと判定される場面がある、ということです。
（なんとなく、falsyな値と関連しそうです。また調べます。）

## 予期せぬ動作を防ぐために
よく、「===」を使う方が良い、と聞く（？）と思いますが、上記のように「==」は型が違くても同じものになるよう変換してくれてしまうので、本来はfalseとなって欲しい場面でtrueとなってしまう、ということが発生しやすくなります。
ですので、「===」を使う方が基本的に推奨されているように思います。
ただ、nullとundifindのようなものは同じように扱いたい、というときなどにはもしかしたら有効かもしれません。
が、潜在的なバグを抱えてしまいそうなので、特別な理由がなければ「===」を使っておくことが無難な気がします。なるほど。
VercelでPythonアプリケーションFastAPIをデプロイ！メリット・デメリットを徹底解説

この記事ではVercelを使ってPythonアプリケーションをデプロイする方法と、そのメリット・デメリットについて解説します。

## Vercelって何？
[Vercel](https://vercel.com/)（バーセル）は、ウェブアプリケーションを簡単にインターネットに公開できるサービスです。GitHubのリポジトリを使って、数分でデプロイ（公開）することができます。もともと、VercelはNext.js等JavaScriptアプリケーションをホストするサービスでしたが、最近ベータ版としてPythonやGo, Rubyにも対応しました。無料版Herokuの代わりとして使えます。

## Pythonアプリケーションをデプロイする方法
Vercelの公式サイトにPythonアプリケーションの[テンプレート](https://vercel.com/templates?framework=python)がいくつか用意されているので、数クリックで始めることができます。

FastAPIのテンプレートを作成したので、以下のボタンから始めることもできます。
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FTomoyaKuroda%2FVercel-FastAPI)


## メリット
### 無料で利用できる
AWSやGCP, Azureなどの有料サービスもありますが、Vercelは無料プランを提供しているので、お金をかけずに開発したい人に向いています。

## デメリット
### タイムアウトの問題
無料のHobbyプランでは、デフォルトでリクエストが10秒以上かかるとタイムアウトしてしまいます。vercel.jsonファイルで maxDuration を60秒に設定することで対応できます。
```json
{
  "version": 2,
  "routes": [
    {
      "src": "/(.*)",
      "dest": "api/main.py"
    }
  ],
  "functions": {
    "api/main.py": {
      "maxDuration": 60
    }
  }
}

```

### サイズ制限
Vercelには、合計サイズが250MBまでという制限があるので、大きなプロジェクトには向いていません。パッケージをインストールする前に、REST API等代替案はないか調べてトータルサイズの節約をする必要があります。

各種制限についての詳細はこちらで確認できます。

https://vercel.com/docs/functions/runtimes#size-limits

## デモ
VercelにFastAPIをデプロイしたデモがこちら。

https://vercel-fast-api-blond.vercel.app/

Githubはこちら。

https://github.com/TomoyaKuroda/Vercel-FastAPI

## まとめ
Vercelは、簡単にウェブアプリケーションをデプロイできるサービスです。無料でPythonアプリケーションをデプロイできますが、いくつかの制限もあるので注意が必要です。Pythonを勉強中の方、コストを抑えて簡単なサービスを立ち上げたい人は是非試してみてください。
GithubActionsでdockerイメージをArtifact Registryにpushするための設定

## 前提
- gcloud cli がインストール済みであること
- Artifact Registry にプッシュ対象のリポジトリが存在していること
- ```gcloud auth configure-docker ${REPO_LOCATION}-docker.pkg.dev```でgcloudとdockerが連携できるよう認証済みであること

## 流れ
1. GitHub Actions から Artifact Registry を操作するための Service Account を作成
2. 作成した Service Account に Artifact Registry への push 権限を付与
3.  Service Account の JSON 鍵を取得し、リポジトリの Secret に追加


## GitHubActions用のService Accountを作成する
```
gcloud iam service-accounts create github-actions --display-name="github-actions" --project=your-project-id
```
## Service Accountにロールを付与
- [Artifact Registryのrole](https://cloud.google.com/artifact-registry/docs/access-control?hl=ja#roles)
#### Artifact Registryリポジトリ管理者ロール
```
gcloud projects add-iam-policy-binding your-project-id \
--member=serviceAccount:github-actions@your-project-id.iam.gserviceaccount.com \
--role=roles/artifactregistry.repoAdmin
```

#### サービスアカウントユーザーロール
```
gcloud projects add-iam-policy-binding your-project-id \
--member="serviceAccount:github-actions@your-project-id.iam.gserviceaccount.com" \
--role="roles/iam.serviceAccountUser"
```
#### CloudRun管理者ロール
**以下必要があれば付与**
```
gcloud projects add-iam-policy-binding your-project-id \
--member="serviceAccount:github-actions@your-project-id.iam.gserviceaccount.com" \
--role="roles/run.admin"
```
## jsonキーを取得
```
gcloud iam service-accounts keys create github-actions-key.json \
--iam-account=github-actions@your-project-id.iam.gserviceaccount.com \
--project=your-project-id
```

## base64で暗号化してクリップボードにコピー
- macOS
```bash
cat github-actions-key.json | base64 | pbcopy
```
- Windows(powershell)
```powershell
[Convert]::ToBase64String([System.IO.File]::ReadAllBytes("github-actions-key.json")) | Set-Clipboard
```

## githubのリポジトリのSecretに登録
リポジトリの Settings > Secrets and variables > Actions
- Repository secrets　> New repository secret
Name : GCLOUD_AUTH(任意)
Value: コピーしたsecret
![FireShot Capture 008 - Actions secrets · arashidani_diary_report_sample - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844247/54d4e7c0-afe9-1385-e12a-8ea538a35065.png)
![FireShot Capture 009 - Add Actions secret · arashidani_diary_report_sample - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844247/d58c06ef-8634-2a92-7796-5b91da95b661.png)

## 参考
https://qiita.com/hitsumabushi845/items/82af60a6409b0a4bd0de

https://zenn.dev/link/comments/a79bc7c68d6cee

https://cloud.google.com/sdk/gcloud/reference/auth/configure-docker
REACT CSS API （styled-components）

#### styled-components は、React と React Native でスタイルを記述するためのライブラリです。
このライブラリを使用すると、JavaScript と ES6 のテンプレート文字列構文を使用してコンポーネントのスタイルを定義できます。これにより、スタイルとコンポーネントのロジックを密接に結びつけることができます。以下は styled-components のいくつかの主要な特徴と利点です：

CSS-in-JS: JavaScript 内で CSS を記述でき、スタイルがコンポーネントの一部になります。
スタイルの分離: 各コンポーネントが独自のスタイルを持ち、スタイルの衝突を避けます。
動的なスタイル: コンポーネントのプロパティや状態に応じて動的にスタイルを生成できます。
自動プレフィックス: ブラウザの互換性を確保するために、自動的にプレフィックスを追加します。
再利用性: スタイルをコンポーネントとして再利用でき、コードのメンテナンス性が向上します。

#### 使用例
以下は、styled-components を使用した簡単な例です：

```
// styled-components をインストール
// npm install styled-components

import styled from 'styled-components';

export const Header = styled.header`
  background: #f8f9fa;
  padding: 1rem;
  text-align: center;
`;

export const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid blue;
  border-radius: 3px;
`;

export const AppHeaderWrapper = styled.div`
//このした必要なCSSを入れることができる
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: ${(props: any) => props.theme};
    transition: background-color .2s;
    
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    span {
      margin-top: 10px;
      cursor: pointer;
    }
  }
  
   .nav-item {
    padding: 15px 20px;
    cursor: pointer;

    i {
      margin-right: 5px;
    }

    &:hover {
      opacity: .8;
      background-color: #333;
    }
  }
`;
// 他のコンポーネントのスタイルも同様に定義



```

```
import { Button,Header } from './style';

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;
```
MUI の styled ツールと類似。次回MUIのCSS 構築紹介する
paiza [C020:残り物の量] C# 書いたコードをコピペしてみた、解説してみた

# paiza×Qiita記事投稿キャンペーン「プログラミング問題をやってみて書いたコードを投稿しよう！」
**Qiita２回目の投稿**

同キャンペーンの開催に伴い、**C#** で書いたコードをコピペしてみた、解説してみた

## 問題
https://paiza.jp/works/mondai/c_rank_skillcheck_archive/leftover

下記画像は上記問題のリンク先から一部抜粋。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831870/1b8140f5-8d42-f66c-6e97-bcc60750e67e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831870/b95b5537-d43b-ce1f-e9f6-1bc4189f6565.png)

## 書いたコード
```c#
using System;
class Program
{
    static void Main()
    {
        var array = Console.ReadLine().Split();
        var m = double.Parse(array[0]);        //ある生鮮食品の仕入れ量[kg]
        var p = double.Parse(array[1]);        //生のまま販売して売れた%[%]
        var q = double.Parse(array[2]);        //売れ残った量のうち売れた%[%]
    
        var psales = m * (p / 100);            //生のまま販売して売れた量[kg]
        var qsales = (m - psales) * (q / 100); //売れ残った量のうち売れた量[kg]
        var result = m - psales - qsales;      //最終的に売れ残った量[kg]
        
        Console.WriteLine(result);
    }
}
```
## 解説
### var array = Console.ReadLine().Split();
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831870/86779311-0c4e-fa1f-475d-2296f01fc164.png)

```c#
        var array = Console.ReadLine().Split();
```
- 上記記載をすることで、{1,80,40}の要素が入ったarrayという一次元配列ができる。
- **var** arrayとすることで、arrayに代入する要素によって、データ型が数字や、文字列、小数点型、配列に自動で変化する。
- .Split()は、半角スペース区切りを取り除き、個別の要素{1,80,40}に分割する。

### var m = double.Parse(array[0]);
```c#
        var m = double.Parse(array[0]);        //ある生鮮食品の仕入れ量[kg]
        var p = double.Parse(array[1]);        //生のまま販売して売れた%[%]
        var q = double.Parse(array[2]);        //売れ残った量のうち売れた%[%]
```
- arrayの要素をm,p,qにそれぞれ代入する。
- 出力結果は小数点を表示する必要があることから、double.Parse();でarray[0]などをdouble型に変換する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831870/93e13ac1-a026-942a-7e35-6ffadb231712.png)

### 各種計算
```c#
        var psales = m * (p / 100);            //生のまま販売して売れた量[kg]
        var qsales = (m - psales) * (q / 100); //売れ残った量のうち売れた量[kg]
        var result = m - psales - qsales;      //最終的に売れ残った量[kg]
        
        Console.WriteLine(result);
```
- **var** psalesなどと、varをつけることで、double型の値が代入された、psales、qsales、resultはすべてvar型からdouble型になる。
- psale・・・pを100で割りmに掛け算することで、生のまま販売して売れた量がわかる。
- qsale・・・qを100で割り(m-psales)に掛け算することで、売れ残った量(m-psales)のうち売れた量がわかる。
- Console.WriteLine();でresult(最終的に売れ残った量)を出力する。

## 感想など
- Qiitaに記事を書くことで、自分の知識を言語化する難しさを感じましたが、知識の整理に役立つと思いました。
- paizaのレベルアップ問題集は全ての言語の解説があるわけではないので、この投稿が解答の参考になれば幸いです。私のpaizaランクはBランクです。Aランク目指し精進します。
界隈でnumpyのエラー発生してるみたいです

```　python 
ValueError: numpy.dtype size changed, may indicate binary incompatibility. Expected 96 from C header, got 88 from PyObject

```

こんなnumpyのエラーが界隈で多数発生しています。

理由は、最近リリースされた NumPy 2.0によりエラーが発生している様です。
特にローカルでは上手くいくけど、本番ではエラーになったりとバージョン違いによるエラーも起きている様です。

## 解決方法:

1.NumPy のバージョンを確認する:

使用している Python 環境で import numpy; print(numpy.__version__) を実行し、現在インストールされている NumPy のバージョンを確認してください。

2.パッケージの互換性を確認する:

NumPy と一緒に使用している他のライブラリ (pandas, scikit-learn など) のバージョンを確認し、それらのライブラリが現在使用している NumPy のバージョンと互換性があることを確認してください。ライブラリのドキュメントを参照するか、パッケージマネージャー (pip) が提供する互換性情報を利用できます。

3.NumPy のバージョンを揃える:

もし NumPy のバージョンが異なっていることが原因であれば、すべての環境で同じバージョンを使用するようにしてください。 pip install numpy==<version> ( <version> は互換性のあるバージョン番号) を実行して、すべての環境で NumPy のバージョンを揃えましょう。

4.特定のバージョンの NumPy を使用する (おすすめしない):

どうしても特定のバージョンの NumPy を使用する必要がある場合は、仮想環境を作成し、その環境内で必要なバージョンの NumPy と互換性のあるパッケージをインストールすることができます。ただし、この方法は管理が煩雑になるため、なるべく避けたほうが良いでしょう。

## まとめ
こちらの環境では、requirements.txtでNumpyのバージョンを指定して一旦回避した様ですが、各々のポリシーで修正しましょう。
yukicoder No.5 数字のブロック　解説

[問題文](https://yukicoder.me/problems/no/5)

# 解説
できるだけ軽いものから載せていく
直感的にもそうだろうが、軽いものからだんだん重たいものへと載せていく方がいっぱい乗せられる。
事前に昇順sortしておけばあとは左から順番に乗せられるか確かめていくだけ。
sortがボトルネックで$O(NlogN)$なので十分間に合う。
# C++23の解答例

```C++
#include <bits/stdc++.h>
using namespace std;

int main(){
  int l,n;cin>>l>>n;
  vector<int> w(n);
  for(int i=0;i<n;i++)cin>>w[i];
  sort(w.begin(),w.end());
  for(int i=0;i<n;i++){
    l-=w[i];
    if(l<0){
      cout<<i<<endl;
      return 0;
    }
  }
  cout<<n<<endl;
}
```