OmniAICreator/Qiita-1.07M huggingface dataset:
DockerでWebサーバを構築する

# 1.目的
Dockerファイルの記述方法を確認する

# 2.環境
Docker Engine v27.5.1
macOS Sonoma 14.6

# 3.前提
・Docker Desktopのインストール
こちらの記事を参考にDocker Desktopをインストールしました。

https://qiita.com/cleyera_f/items/bdd3d33f13527604a663

# 4.本記事のゴール
Docker containerを起動できる

# 5.構築
Github参照

https://github.com/yamaharu717/docker-pro.git

# 6.最後に
次回以降は今回作成したDockerファイルの編集していき、環境構築を実施していこうと思います。
poetryからuvへの移行方法(Ubuntu)

## まえがき
poetryとuvはいずれもPythonの依存関係を管理するためのツールです。
uvはpoetryに比べ速度が早く、シンプルです。そのため、移行することで、開発フローがよりスムーズになる可能性があります。
以降、poetryからuvへの移行方法を説明します。

## poetryからuvへの移行方法
### uvのインストール
ubuntu上で以下のコマンドを実行しuvをインストールします。
```sh
$ sudo snap install astral-uv --classic
```
(他にも`pip install uv`とかの方法もあります。)
以下のコマンドを実行し、正常にuvがインストールされていることを確認します。
```sh
$ uv --version
```
最後にpoetry.lockが存在するディレクトリで以下のコマンドを実行します。
```sh
$ uvx migrate-to-uv
```
以上でpoetryからuvへの移行は完了です。

## 移行の確認
移行が成功していれば以下の3点が満たされているはずです。

- 元あったpoetry.lockファイルは削除されている
- uv.lockファイルが生成されている
- pyproject.toml内のtool.poetryの部分がtool.uvに置き換わっている

これらを満たしていることが確認できれば正常に移行出来ていると思います。

## 参考
https://openillumi.com/poetry-to-uv-package-manager-migration-guide/

https://zenn.dev/hrsma2i/scraps/95d361feee292a
業界未経験の35歳がITエンジニアの世界に飛び込んで一週間が経った

表題の通りである。
元々私は大学時代からフリーランスのライターとしてこの世の中を適当に生きてきた。
安定よりも自由を求めるとは冒険心を燻ぶらせている人間にとっては耳障りの良い言葉だが、実際には体のいい逃げである。
お金を貯めて渡航し海外で挑戦する気力もなく、かといって己の中で唯一かもしれない長所の文章能力とやらを試すべく小説を書きどこかへ応募したこともない。

昔から私は、中途半端な挑戦が好きだった。
小学校ではサッカーを、中学校では将棋を、高校ではバスケを、大学では陸上と吹奏楽を、そして小学校から高校まで通して空手の道場に通った。
しかしそれらのうち一つでも極めようと思ったことはない。
途中で飽きてしまい、新たな何かへと渡っていったのだ。
その挑戦は人生を変えるほどの大ジャンプではない。
雨の後に泥水がたまった歩道横の溝を飛び越えるようなものだ。

そんな私が35歳を目前として、様々な理由でジョブをチェンジするという勝負にでた。今までの人生でいうと比較的大きな挑戦だろう。
私が晴れてITエンジニア、そして正社員という肩書を得たのは35歳になる直前だった。

なぜITエンジニアの世界を選んだのか、どういった理由でなのか、そもそもなぜずっとフリーライターだったのか、それらは今ここでは割愛させていただく。
自分の性格上、文章を書くのは好きだが飽き性なため、今ここで全部書いてしまうとこのブログを続けなくなってしまう可能性が高い。
今まで何度同じ轍を踏んできたかわからない。いつか書くこともあるだろう。

とにかく私は人生初めての転職活動、就職活動の末ITエンジニアの世界に飛び込んだ。
今日でちょうど一週間が経った。
今の所この先に不安しかない。だが1度ここで泳ぎ始めた以上、また別のレーンに移動して泳ぐにはまた労力を要する。係の人に言ってレーン移動していいか聞いて、隣で泳いでる人にちょっとすみませんとか断って迷惑そうな顔されながら泳ぎ始める必要がある。めんどくさすぎる。

今日は他にやりたいことがあるので(モンハン)、ブログをやっていったるぞ！という薄い熱意はそのままに記事を終えようと思う。

今後は、35歳というそこそこの年齢の人間が突然ITエンジニアになった備忘録と回想録、そしてド素人ならではの、知っている人が読むとイライラする疑問を綴っていこうと思う。

この記事が10年後20年後、同じ年齢の人間が読み
「こんなバカでもなれるなら自分でもいけそうだな」
と励みになってもらえるよう、モンハンをやる時間を削って書いていく。PoE2もやりたい。
tikzlingsで動物たちを好きな場所に配置

動物を普通に表示するのは簡単だけど、好きな座標に配置する方法が難しかったのでメモ

```

\newbox\marmotbox
			\savebox{\marmotbox}{\marmot[xscale=1,yscale=1]}
			\newbox\squirrelbox
			\savebox{\squirrelbox}{\squirrel[xscale=1,yscale=1]}

			\node[anchor=south] at (0,0) {\usebox{\marmotbox}};
			\node[anchor=south] at (2,0) {\usebox{\squirrelbox}};

```
Trusted Tester認証の概要

この度、アメリカのアクセシビリティの資格である「**Trusted Tester**」認証を取得しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669971/cea9ebc2-d375-4abf-9471-27c4ea60f54f.png" width="600">


今回、**Trusted Tester**とは何なのか、
概要と内容を紹介していきます。

# Trusted Tester とは
**Trusted Tester**は、Section 508標準への準拠を判断するための共通のテスト手法として開発され、あらゆる支援技術を使用する人がウェブサイトやソフトウェアを利用できることを保証しています。

::: note
**Section 508**
アメリカの法律である『リハビリテーション法第508条』のことで、
すべての連邦政府の省庁および機関が、情報通信技術（ICT）を障害のある人々にとってアクセス可能なものとすることが求められています。
:::

トレーニングコース受講後、試験を合格すると認証を取得することができます。
全てオンライン上で完結し、無料で受講できます。

アメリカの試験ということですべて英語での受講になりますが、
そこまで難しい単語もなく、最近は翻訳ツールもあるので難易度はそれほど高くないと思います。

# 受講方法
[こちら](https://training.section508testing.net/)からトレーニング用のページを表示できます。

アクセスすると下記の警告が表示されます。
アメリカ政府の情報システムにアクセスするための同意のようです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669971/0e1ae7a7-9adf-4235-ab92-8cd8caedbc74.png" width="600">

アクセスしてアカウント作成後、
下記のリンク先から「Trusted Tester Certification Program」を登録するとダッシュボード上からコンテンツにアクセス可能になります。

https://training.section508testing.net/course/index.php?categoryid=19

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669971/d56e513b-23fa-47a4-b95d-df8c4bea5d4e.png" width="600">

# トレーニングコース内容
まずは 「Section 508 とは何なのか」や「テストツール」についての説明があります。
その後、メインコンテンツである20項目について学んでいきます。

基本的には `WCAG2.0` に沿った内容となり、
各項目の中からさらに細かい項目に分けて学習を進めていきます。

- Topic 1: Conforming Alternate Version and Non-Interference
- Topic 2: Auto-Playing and Auto-Updating Content
- Topic 3: Flashing
- Topic 4: Keyboard Access and Focus
- Topic 5: Forms
- Topic 6: Links and Buttons
- Topic 7: Images
- Topic 8: Adjustable Time Limits
- Topic 9: Repetitive Content
- Topic 10: Content Structure
- Topic 11: Language
- Topic 12: Page Titles, Frames, and iFrames
- Topic 13: Sensory Characteristics and Contrast
- Topic 14: Tables
- Topic 15: CSS Content and Positioning
- Topic 16: Pre-Recorded Audio-Only, Video-Only, and Animations
- Topic 17: Synchronized Media
- Topic 18: Resize Text
- Topic 19: Multiple Ways
- Topic 20: Parsing

それぞれのTopicが終了すると、知識と実技の確認テストを行います。
二つともクリアすると晴れてTopic終了です。

# 最終テストについて
試験は選択肢から1つを選ぶ形式で、全100問で85%以上のスコア獲得で合格です。
受験回数が決まっており、 **3回** のチャンスが与えられます。

ただ、もし3回落ちてしまった場合でも、
ヘルプデスクに連絡することで回数をリセットしてもらえるようです。

最終試験の前に本番同様の練習問題があり、
こちらは受験回数に制限がないので自身がつくまで解くことをお勧めします。

これだっ！という選択肢もあれば、
教習所の学科試験のように他にも当てはまりそう、、、といった選択肢もあり、
少しややこしかったですがなんとか合格することができました。

# おわりに
仕事で画面設計を行う機会もあり、
アクセシビリティについて学びたいなと思い、今回受講を決意しました。

求められているアクセシビリティ対応を知ることができ、
次から画面設計を行う際に今回学んだ知識を生かしたいなと思います。

それでは。

# 参考文献
https://www.dhs.gov/508-testing

https://training.section508testing.net/
SpringBootWebアプリケーションをコンテナにして実行する

## はじめに
前回の記事で、SpringBootで作成したWebアプリケーションをjarファイルにしました。

https://qiita.com/y-hys/items/f30515cbf15422058d42

本記事では、Dockerコンテナにして、Webサーバを起動するところまでを試します。

## Dockerファイルを作成

```terminal
project-root
├── backend
│   ├── build
│   │   ├── libs
│   │   │   └── backend-0.0.1-SNAPSHOT.jar
```

という構成になっているプロジェクトで`project-root/dockerfile`を作成する。

```dockerfile
# OpenJDKの公式イメージを使用
FROM openjdk:21-jdk-slim

# 作業ディレクトリを作成
WORKDIR /app

# jarファイルをコンテナにコピー
COPY backend/build/libs/backend-0.0.1-SNAPSHOT.jar backend-0.0.1-SNAPSHOT.jar

# アプリケーションを実行
CMD ["java", "-jar", "backend-0.0.1-SNAPSHOT.jar"]
```

## コンテナビルド

```terminal
docker build -t test-container .
```

## コンテナ実行

```terminal
docker run -d -p 8080:8080 --name my-app test-container
```

## 動作確認

`http://localhost:8080/`にアクセス。

## おわりに
次回以降に以下トピックを記事にしたいと思います。

- コンテナ化したSpringBootWebアプリのログを永続化
- 自前で作成したコンテナを用いてReactプロジェクトをビルド
- 自前で作成したコンテナを用いてSpringBootプロジェクトをビルド


-
Pandas DataFrameの基本と使い方

## Pandas DataFrameの基本と使い方

Pythonのデータ分析ライブラリであるPandasは、データを効率的に操作できるデータ構造としてDataFrameを提供しています。この記事では、DataFrameの基本的な概念とその使い方を紹介します。

### DataFrameとは？
DataFrameは、2次元のラベル付きデータ構造で、行と列を持つテーブル形式のデータを扱うために使用されます。表形式のデータ（CSVやExcelファイル、SQLクエリの結果など）を処理する際に非常に便利です。基本的には、列ごとに異なるデータ型（整数、浮動小数点数、文字列など）を持つことができ、データ操作の際に豊富な機能を提供します。

### Pythonの辞書からDataFrameを作成
最も簡単な方法の一つは、Pythonの辞書を使ってDataFrameを作成する方法です。辞書のキーが列名、値が列のデータになります。

```python
import pandas as pd

# 辞書からDataFrameを作成
data = {
    '名前': ['Alice', 'Bob', 'Charlie'],
    '年齢': [25, 30, 35],
    '職業': ['Engineer', 'Doctor', 'Artist']
}

df = pd.DataFrame(data)

print(df)

```
####  出力:

```
       名前  年齢       職業
0    Alice  25  Engineer
1      Bob  30    Doctor
2  Charlie  35    Artist

```

### DataFrameの基本操作
列へのアクセス: DataFrameの列は、カラム名でアクセスできます。

```python
# '名前'列にアクセス
print(df['名前'])
```

### まとめ
PandasのDataFrameは、データを効率的に扱うための強力なツールです。行列形式のデータを簡単に操作、集計、フィルタリング、並べ替え、保存することができ、データ分析において欠かせない存在です。

この記事で紹介した基本的な操作を理解しておけば、Pandasを使ったデータ分析の際に非常に便利に使うことができるようになります
SQLAlchemyの戻り値の型について

## db.session.execute(stmt).all() の戻り値の型

戻り値の型: list
リストの各要素の型:
SQLAlchemyの Row オブジェクト（Result オブジェクトの一部）。
Row オブジェクトは、タプルのように振る舞い、カラム名をキーとして値にアクセスできます。

以下のコードは、db.session.execute(stmt).all() を使った例です：

```python
from sqlalchemy import select
from myapp import db  # SQLAlchemyのインスタンス

# 仮のテーブルを選択
stmt = select(MyModel)

# 実行して結果を取得
results = db.session.execute(stmt).all()

# 結果の型と内容を確認
print(type(results))  # <class 'list'>
print(type(results[0]))  # <class 'sqlalchemy.engine.row.Row'>
print(results[0].keys())  # カラム名のリスト（例: ['id', 'name', 'created_at']）
print(results[0].values())  # カラムに対応する値（例: [1, 'Alice', '2021-01-01']）

```
ここで、results はリストであり、その中の各要素は Row オブジェクトです。Row オブジェクトは、クエリ結果の各行に対応します。

## 他の戻り値の型

db.session.execute() の戻り値の型は、all() メソッドの使用方法によって異なります。以下のように、他のメソッドも使うことができます。

#### all()
戻り値: 結果をリストとして取得。
型: list
各要素の型: Row オブジェクト。

#### fetchall()
戻り値: all() と同様に、結果をリストとして取得。
型: list
各要素の型: Row オブジェクト。

#### first()
戻り値: 最初の1件の結果を取得。
型: Row オブジェクト（結果が存在する場合）、None（結果がない場合）。

#### fetchone()
戻り値: 最初の1件の結果を取得。
型: Row オブジェクト（結果が存在する場合）、None（結果がない場合）。

#### scalar()
戻り値: クエリの結果として1つのスカラー値（単一の値）を取得。
型: 任意の型（int, str, float など）。
注意: クエリが複数行を返す場合、scalar() は最初の行の最初のカラムのみを返します。
カスタム関数をSQLiteに追加する

## 内容
SQLiteでは CONCAT や STRPOS といった標準のSQL関数がサポートされていないため、これらをカスタム関数として定義する方法を、SQLAlchemyを使ったテストコードを例にして説明します。以下の内容は、SQLite用にカスタム関数を作成し、SQLAlchemyでこれらの関数を使えるようにする方法を解説します。

## カスタム関数をSQLiteに追加する
まず、SQLiteに対して、CONCAT と STRPOS 関数を定義する部分のコードを説明します。

```sql
from sqlalchemy import create_engine, event
import sqlite3
from sqlalchemy.engine import Engine

# SQLiteに接続した際にカスタム関数を追加する
@event.listens_for(Engine, "connect")
def connect(dbapi_connection, connection_record):
    if isinstance(dbapi_connection, sqlite3.Connection):
        # concat関数の定義
        def concat(*args):
            return "".join(args)
        
        # strpos関数の定義
        def strpos(string, substring):
            return string.find(substring) + 1 if substring in string else 0

        # SQLiteのカスタム関数として登録
        dbapi_connection.create_function("concat", -1, concat)  # -1は引数の数に制限をかけない
        dbapi_connection.create_function("strpos", 2, strpos)
```

### 上記のコードをテストコードとして埋め込む
SQLiteでは標準の CONCAT や STRPOS 関数がサポートされていないため、カスタム関数を作成してこれらの関数をSQLクエリで使用できるようにします。このコードを使うことで、SQLAlchemyの接続時にSQLiteに対してこれらのカスタム関数を利用できるように設定します。

### 結論
上記の方法を使うことで、SQLiteでは標準でサポートされていない CONCAT や STRPOS をカスタム関数として定義し、SQLAlchemyを介してテストコード内で使用することができます。これにより、SQLiteを使ってもPostgreSQLと同様に関数を利用できる環境を整えることができます。
useActionState はフォームだけのものか？—いや、そんなことはない。  useActionState の使い道

useActionState はフォーム以外にも使える

フロントエンドの開発では、「〇〇は△△のためのもの」という固定観念にとらわれがちだ。その結果、本来もっと幅広く活用できるはずの機能が、特定の用途に限定されてしまうことがある。

useActionState もその一例だ。多くの人は「フォームのためのもの」と思い込んでいるが、実はフォームがなくても活用できる。

⸻

useActionState の特徴

useActionState は、「サーバーアクションの実行結果をフックとして管理できる」 というのが大きな特徴だ。
そのため、「フォーム送信時にしか使えない」わけではなく、ボタン操作や他のイベントをトリガーにして状態を更新することもできる。

例えば、カウンターを作る場合、一般的には useState を使う。
```typescript
"use client";

import { useState } from "react";

export default function Page() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
```
この方法はシンプルだが、クライアント側だけで完結している。
もし「サーバー側で処理を行った後にカウントを増やす」としたら、もう少し工夫が必要になる。

⸻

useActionState を使ったカウンター

useActionState を使うと、サーバーを介した状態管理ができる。
```typescript
"use client";

import { useActionState } from "react";

async function increment(prevState: number, formData: FormData) {
  return prevState + 1;
}

export default function Page() {
  const [count, formAction] = useActionState(increment, 0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => formAction(new FormData())}>+1</button>
    </div>
  );
}
```
この方法では、ボタンを押すたびに increment 関数が呼ばれ、その結果が count に反映される。

通常、サーバー側の処理が必要な場合は API を呼び出して結果を更新する ことになるが、それも簡単に実装できる。

⸻

サーバーからデータを取得する

ボタンを押してサーバーからデータを取得する場合、useActionState を使うことで、状態管理をシンプルにできる。
```typescript
"use client";

import { useActionState } from "react";

async function fetchData(prevState: string, formData: FormData) {
  const response = await fetch("/api/data");
  const result = await response.json();
  return result.message;
}

export default function Page() {
  const [state, formAction] = useActionState(fetchData, "データなし");

  return (
    <div>
      <p>結果: {state}</p>
      <button onClick={() => formAction(new FormData())}>データ取得</button>
    </div>
  );
}
```
このコードでは、ボタンを押すと fetchData が実行され、サーバーから取得したデータが state にセットされる。
通常なら useEffect で管理するような処理を、シンプルな形で書けるのがメリットだ。

⸻

useActionState はフォーム専用ではない

useActionState は FormData を引数に取るが、それは「フォームが必要」という意味ではない。
new FormData() を渡せば、そのまま使うことができる。
	•	フォームなしでは使えない？ → そんなことはない。
	•	useState で十分？ → サーバーアクションを利用するなら useActionState の方が適している場合もある。
	•	useEffect を使うべき？ → 必要に応じて useActionState の方がシンプルになることもある。

⸻

まとめ

useActionState は、Next.js の App Router を活用するなら、ぜひ検討したいフックの一つだ。
特に、「フォームがなくても使える」 ことを知っておくと、使い道が大きく広がる。
	•	ボタンを押したら API からデータを取得する
	•	ローカルの状態管理ではなく、サーバーを介して管理する
	•	useEffect を使わず、アクションベースでデータを取得・更新する

「useActionState はフォームのためのもの」と思い込むのではなく、もっと柔軟に使っていきたい。
【JavaScript】pointermoveがタッチ操作でうまく動かない原因と解決方法

Webアプリを作っていたときに、Pointerイベントの`pointermove`がうまく動かなかったので、その時の原因と解決方法を紹介します。

# 環境
Windows11のタブレットPCで操作したとき（スマホでは未確認）
ブラウザはMicrosoft Edge

pointermoveはaddEventListenerでやってました


# 原因
タッチでスワイプ操作すると、ページをスクロールする操作になってしまい、`pointermove`が反応しなくなってしまうのが原因でした。
（CSSで`overflow: hidden`を使っていたので気づかなかった）

# 解決方法
CSSで`touch-action`を使って、要素をスワイプしてもスクロールする操作にならないようにします。
```diff:css
{
    touch-action: none;
    
    /*これで、この要素をスワイプしてもスクロールの操作にならなくなります*/
}
```

# 参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/touch-action
ASTERIA Warp フローデザイナー

## フローデザイナーとは

フローデザイナーは、GUIベースのビジュアルワークフローデザインツールです。
ドラッグ＆ドロップのインターフェースを用いて、一連の処理手順をコンポーネントとして配置でき、プログラミングの知識がなくても直感的にワークフローやデータ連携プロセスを設計できます。

![2025-03-10_202719.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/dc954647-fc88-4e32-95ac-dd05749926a3.png)

※ASTERIA Warpのインストールだけでシステム連携開発は行えません。
まずサーバーにASTERIA Warpをインストールし、その後「フローデザイナー」ツールをインストールします。「フローデザイナー」を利用してASTERIA Warpに接続することで、連携開発開始できます。




## インストーラー　ダウンロード
アステリア製品サイト ログイン
https://asteria.com/mng/login/

![2025-03-10_203527.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/aa48c987-2d2f-4cf5-94dc-7dd486e66f03.png)

![2025-03-10_203544.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/5ce31cd9-7497-4bea-8167-9809199b5075.png)

![2025-03-10_203650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/b8b01d3f-e57a-44aa-99f4-935b6cb51372.png)

※「フローデザイナー」のバージョンは、ASTERIA Warpのバージョンに合わせます。
　
例：ASTERIA Warpバージョン2412をインストールした場合は、
　 「フローデザイナー」もバージョン2412をインストールしてください。
　　旧バージョンのフローデザイナーで作成したフローは、
  　　新バージョンでは開けない可能性があります。
   


## インストール
インストールは下記のPDFガイドを参考してください。
https://help.asteria.com/documentation/warp/ja/current/InstallGuide.pdf

もしくは「フローデザイナー」インストール手順の動画を参考してください。
「フローデザイナー」インストール手順は 6:00～ からです。
https://www.youtube.com/watch?v=L8JEHpJtCYA&t=364s


![2025-03-10_210015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/ac916ce6-93f5-4e18-aa7a-778949ce5d28.png)

![2025-03-10_210033.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/fd1f255e-bfed-4cc6-868a-2ba0c5a89ebd.png)

![2025-03-10_210049.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/6245d849-59a3-4d5d-973c-f6a31e63aed6.png)

インストール完了後　

![2025-03-10_210311.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/05ec8334-a67b-4f17-8385-f68cdbf8e047.png)

![2025-03-10_202719.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463540/1d8321b4-b858-4d53-9620-f096349849fa.png)



参考資：
https://www.youtube.com/@ASTERIAjp
https://www.asteria.com/jp/warp/blog/23711.html
https://www.asteria.com/jp/warp/feature/flow/
https://support.asteria.com/hc/ja/articles/229092027
Node.js と Next.js の違いについて

自身のメモ用d

## 1. Node.js とは？
Node.js は、サーバーサイドの JavaScript 実行環境です。通常、JavaScript はブラウザ上で動作しますが、Node.js を使うことでサーバーサイドでも JavaScript を実行できます。

### **Node.js の特徴**
- **非同期 I/O**: イベント駆動型の非同期処理により、高速な処理が可能。
- **シングルスレッド**: シングルスレッドで動作しつつ、ノンブロッキングな処理を実現。
- **npm (Node Package Manager)**: 便利なライブラリやフレームワークが豊富に揃っている。
- **Webサーバーの構築が容易**: Express などのフレームワークを使用して簡単に API や Web サーバーを作成できる。

Node.js は、REST API の開発やリアルタイムアプリケーション（WebSocket を使ったチャットアプリなど）に最適です。

---

## 2. Next.js とは？
Next.js は、React ベースのフルスタックフレームワークであり、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実装できる特徴を持っています。

### **Next.js の特徴**
- **サーバーサイドレンダリング（SSR）**: SEO に強く、ページの初回表示が高速。
- **静的サイト生成（SSG）**: 事前に HTML を生成し、CDN にキャッシュ可能。
- **API Routes**: API エンドポイントを簡単に作成可能。
- **ファイルベースルーティング**: ファイル構成がそのままルートになる。
- **画像最適化**: `next/image` を使って画像を自動で最適化。
- **Edge Functions**: Vercel などのプラットフォーム上で最適なパフォーマンスを発揮。

Next.js は、React を用いた Web アプリケーション開発に最適で、特にパフォーマンスや SEO を重視するプロジェクトに向いています。

### **Node.js と Next.js の違い**
| 項目 | Node.js | Next.js |
|------|---------|---------|
| 用途 | サーバーサイドアプリケーション | React ベースのフルスタックフレームワーク |
| 処理 | Web API、バックエンド処理、リアルタイム処理 | SSR、SSG、クライアント＆サーバー統合 |
| フレームワーク | Express、NestJS など | React をベースに開発 |
| SEO対応 | API 専用のため基本なし | SSR/SSG により SEO に強い |

---

## 3. PDFKit と Next.js の関係性
**PDFKit** は、Node.js 上で PDF を生成できるライブラリの一つです。

### **PDFKit の特徴**
- **テキストや画像を PDF に埋め込む**
- **カスタマイズ性が高い（フォントやレイアウト指定が可能）**
- **ストリーム処理を活用しメモリ使用量を抑えられる**

しかし、Next.js の **App Router 環境** では PDFKit を直接利用する際に問題が発生することがあります。

### **Next.js における PDFKit の問題点**
1. **Vercel では fs（ファイルシステム）アクセスが制限されている**
   - Next.js の API Routes では `fs` モジュールを使用することが難しい。
   - `fs` を利用する PDFKit は `ENOENT` エラーが発生することがある。

2. **Vercel のメモリ制限**
   - 無料プランではメモリ制限があり、PDFKit の処理が途中でクラッシュする可能性がある。
   - 特に大きな PDF を生成する場合に問題になりやすい。

3. **App Router との非互換性**
   - Next.js の App Router は `fs` モジュールをサポートしないため、ファイル操作が必要な PDFKit とは相性が悪い。
   - `getServerSideProps` などの関数を利用して処理する方法もあるが、最適ではない。

### **Next.js で PDF を生成する解決策**
#### **1. Puppeteer を使う**
[Puppeteer](https://pptr.dev/) は、ヘッドレス Chrome を操作できるライブラリで、HTML を直接 PDF に変換できます。
```ts
import puppeteer from "puppeteer";

export async function POST(request: Request) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent("<h1>Hello, PDF!</h1>");
  const pdfBuffer = await page.pdf();
  await browser.close();

  return new Response(pdfBuffer, {
    headers: {
      "Content-Type": "application/pdf",
    },
  });
}
```

#### **2. Vercel の有料プランを利用する**
- 無料プランのメモリ制限を回避するため、有料プランにアップグレード。
- Puppeteer のオプション `args: ["--no-sandbox"]` を設定することでエラーを回避できる場合がある。

#### **3. 他のライブラリ（e.g., jsPDF, pdf-lib）を試す**
- [jsPDF](https://github.com/parallax/jsPDF) や [pdf-lib](https://github.com/Hopding/pdf-lib) ならブラウザでも動作可能。
- ただし、レイアウトの自由度は Puppeteer のほうが高い。

---

## **まとめ**
- **Node.js** はバックエンド API やサーバーサイド処理向けの環境。
- **Next.js** はフルスタックの React フレームワークで、SSR/SSG に強い。
- **PDFKit は Next.js (App Router) では利用しづらく、代替手段が必要。**
- **Puppeteer を使うことで HTML を PDF に変換するのが現実的な解決策。**

Next.js 上で PDF を生成する際は、環境に応じた適切なライブラリを選択することが重要です。

**参考になれば幸いです！😊**
【会計入門】ソフトウェアエンジニアが知るべき「お金の流れ」の基礎知識

「ソフトウェア開発者のための会計学シリーズ」の第一弾を投稿しました。エンジニアが会計を学ぶ意義や複式簿記の基本、組織内のお金の流れを解説しています。技術だけでなく、会計知識がキャリアの幅を広げるヒントになれば嬉しいです。

自分の備忘録も兼ねてまとめたので、同じように会計に興味がある方の参考になれば幸いです。ぜひご覧ください！

## 目次
1. [エンジニアが会計を理解する意義](#エンジニアが会計を理解する意義)
2. [会計の基本的な考え方 - 複式簿記](#会計の基本的な考え方---複式簿記)
3. [ソフトウェア開発組織における典型的なお金の流れ](#ソフトウェア開発組織における典型的なお金の流れ)
4. [会計知識とキャリア発展](#会計知識とキャリア発展)
5. [まとめ](#まとめ)

## エンジニアが会計を理解する意義

![engineer-accounting-diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/4a2123da-e550-40ab-80d9-0affbee18b17.png)

「コードを書くのが仕事なのに、なぜ会計を学ぶ必要があるのか？」と思われるかもしれません。実は会計知識は以下の理由で非常に価値があります：

### 1. 意思決定プロセスへの参加

技術的な決断が「なぜ」行われるのか、その背景にあるビジネス上の理由を理解できるようになります。例えば：

- なぜある機能の開発が優先されるのか
- なぜ特定の技術への投資が行われるのか（またはされないのか）
- リソース配分がどのように決定されるのか

### 2. 技術判断の経済的インパクトの理解

技術的な選択が会社の財務にどう影響するかを考慮できるようになります：

- クラウドインフラの選択とコスト影響
- 技術的負債の財務的影響
- スケーラビリティ決定の経済的意味

### 3. 経営層とのコミュニケーション向上

CTOやCIOだけでなく、CFOや他の経営層と効果的に会話するための共通言語を持つことができます。技術の価値を数字で表現する能力は、昇進やプロジェクト承認の可能性を高めます。

## 会計の基本的な考え方 - 複式簿記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/be268721-c5ef-4941-a8d5-15b6658c977d.png)

### 複式簿記の基本原則

すべての取引は少なくとも2つの側面（借方と貸方）を持ちます。両者は常に均衡し、この関係を表す基本方程式は：

```
資産 = 負債 + 純資産（資本）
```

これはプログラミングにおける「保存則」や「不変条件」に近い概念です。どんな取引も、この方程式のバランスを崩すことはできません。

### 仕訳の例

例えば、会社が100万円の新しいサーバーを購入した場合：

```
(借) 固定資産（サーバー） 100万円
  (貸) 現金        100万円
```

この取引は資産の中での入れ替わりを表します：現金（資産）が減少し、固定資産（資産）が増加しました。

## ソフトウェア開発組織における典型的なお金の流れ

### 1. 収益構造

ソフトウェア企業の代表的な収益モデル：

- **ライセンス販売**: 一時的な収益認識
- **サブスクリプション**: 繰り返し収益（MRR: 月次経常収益）
- **従量課金**: 使用量に基づく収益
- **フリーミアム**: 基本無料+プレミアム機能課金

### 2. コスト構造

ソフトウェア企業の主なコスト：

- **人件費**: 通常最大のコスト（開発者、営業、マーケティング等）
- **インフラコスト**: サーバー、クラウドサービス、ネットワーク等
- **マーケティングと販売**: 顧客獲得コスト（CAC）
- **R&D**: 製品開発と改良
- **オフィスと管理**: 間接費

### 3. 重要な財務指標

ソフトウェア企業の健全性を測る指標：

- **粗利益率**: (収益 - 直接コスト) ÷ 収益
- **CAC回収期間**: 顧客獲得コスト ÷ 顧客あたりの月間粗利益
- **LTV（顧客生涯価値）**: 顧客が生み出す総収益
- **LTV:CAC比率**: 理想的には3:1以上
- **チャーンレート**: 解約率

## 会計知識とキャリア発展

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/0874b8fe-3c39-4411-827a-7d6bd0d9e69d.png)

会計の基本を理解することで、キャリアにどのような影響があるでしょうか？

### 1. テクニカルリードからマネジメントへ

エンジニアがテックリードからエンジニアリングマネージャー、そしてCTOへと成長する過程で、技術だけでなく財務的な側面も理解することが不可欠になってきます。

### 2. 起業家への道

自分のスタートアップを立ち上げる際には、技術スキルに加えて財務管理能力が成功の鍵となります。投資家は技術だけでなく、ビジネスモデルと収益性を重視します。

### 3. プロダクトマネジメントへの転向

プロダクトマネージャーは技術と事業の橋渡し役であり、ROI（投資収益率）を最大化するための意思決定を日常的に行います。

### 4. 技術的意思決定の質向上

最適なアーキテクチャ選択は、技術的な側面だけでなく財務的影響も考慮すべきです。例えば：

- 自社開発 vs SaaS導入
- モノリス vs マイクロサービス
- オンプレミス vs クラウド

## まとめ

会計知識はエンジニアの「隠れたスーパーパワー」と言えるでしょう。純粋な技術スキルと組み合わせることで、より戦略的な意思決定と説得力のある提案が可能になります。


![マインドマップ (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/7fac81f3-7458-47ba-9128-55c41e49a287.png)
コヒーレントサンプリングされた波形データを並び替えて１周期分の波形にする

# 正弦波信号の並び替えと可視化

## はじめに
本記事では、サンプリングされた正弦波信号の並び替え（wave sorting）を行い、
その結果を可視化するシミュレーションをPythonで実装します。

### 設定するパラメータ
以下のパラメータを使用してシミュレーションを行います。

- **サンプリング周波数 (fs):** 1 MHz (1,000,000 サンプル/秒)
- **入力信号周波数 (fin):** 124.511 kHz
- **サンプル数 (N):** 500
- **シミュレーション時間:** \(N / fs\)

## シミュレーションコード
```python
import numpy as np
import matplotlib.pyplot as plt

def wave_sort(data, fs, fin):
    """
    信号の並び替えを行う関数
    :param data: 入力信号
    :param fs: サンプリング周波数
    :param fin: 入力信号周波数
    :return: 並び替え後の信号
    """
    indices = np.argsort(np.angle(np.exp(1j * 2 * np.pi * fin * np.arange(len(data)) / fs)))
    return data[indices]

# パラメータ設定
fs = 1e6  # サンプリング周波数 1 MHz
fin = 124.511e3  # 入力周波数 124.511 kHz
N = 1024  # サンプル数
simulation_time = N / fs  # シミュレーション時間

# 時間軸
t = np.arange(0, simulation_time, 1 / fs)
original_data = np.sin(2 * np.pi * fin * t)  # 正弦波信号

# 並び替え
sorted_data = wave_sort(original_data, fs, fin)

# プロット
plt.figure(figsize=(10, 6))

# 並び替え前の波形
plt.subplot(2, 1, 1)
plt.plot(original_data, marker='o', linestyle='-', markersize=3, label="Original Data")
plt.title("Original Data")
plt.xlabel("Sample Index")
plt.ylabel("Amplitude")
plt.legend()
plt.grid()

# 並び替え後の波形
plt.subplot(2, 1, 2)
plt.plot(sorted_data, marker='o', linestyle='-', markersize=3, label="Sorted Data", color='r')
plt.title("Sorted Data")
plt.xlabel("Sample Index")
plt.ylabel("Amplitude")
plt.legend()
plt.grid()

plt.tight_layout()
plt.show()
```

## 実行結果と考察

### 並び替え前の波形
もとの波形は通常の正弦波信号であり、サンプリング間隔ごとにデータが取得されています。

### 並び替え後の波形
並び替え後の波形は、入力周波数に基づいた角度の昇順でソートされています。
これにより、波形が特定のパターンで整列されることが確認できます。

## まとめ
本記事では、
- サンプリング信号の並び替え
- ソートされた波形の可視化

を実装しました。この技術は、信号処理やデータ解析の一環として利用可能です。
cscの作法 その570

# 概要
cscの作法、調べてみた。
ドライブを表示するアプリ見つけたので、やってみた。

# サンプルコード

```

using System;
using System.Linq;
using System.Management;
using System.Collections.Generic;
using System.Windows;
using System.IO;

public class USBUtil {
	public static bool EsUnidadExterna(string elPath) {
		var disco = Path.GetPathRoot(Path.GetFullPath(elPath));
		var usbD = GetUsbDriveLetters();
		return usbD.Contains(disco);
	}
	public static List<string> GetUsbDriveLetters() {
		var usbDrivesLetters = from drive in new ManagementObjectSearcher("select * from Win32_DiskDrive WHERE MediaType like '%External%' OR InterfaceType='USB'").Get().Cast<ManagementObject>()
							   from o in drive.GetRelated("Win32_DiskPartition").Cast<ManagementObject>()
							   from i in o.GetRelated("Win32_LogicalDisk").Cast<ManagementObject>()
							   select string.Format("{0}\\", i["Name"]);
		return usbDrivesLetters.ToList();
	}
}
class Program {
	static void Main(string[] args) {
		foreach (var dr in DriveInfo.GetDrives())
			Console.WriteLine("Unidad: {0}, tipo: {1}, label: {2}, fmt: {3}", dr.Name, dr.DriveType, dr.VolumeLabel, dr.DriveFormat);
		Console.WriteLine();
		var usb = USBUtil.GetUsbDriveLetters();
		foreach (var s in usb)
			Console.WriteLine("{0}", s);
		Console.WriteLine();
	}
}


```

# 実行結果

```
>usbu0
Unidad: C:\, tipo: Fixed, label: Windows, fmt: NTFS
Unidad: D:\, tipo: Removable, label: , fmt: FAT32

D:\

```

以上。
[Visual Studio Code]実際に使って便利だった拡張機能10選

# はじめに
Visual Studio Code（VS Code）は、豊富な拡張機能によってさらに強力なツールとなります。本記事では、実際に使用して便利だと感じた拡張機能10個を紹介します。

# 1. Prettier - Code formatter

Prettierは、コードを自動的にフォーマットしてくれる拡張機能です。一貫したコードスタイルを維持するのに役立ちます。

- 主な特徴：
  - JavaScript、TypeScript、HTML、CSSなど多言語対応
  - キーボードショートカットでのフォーマット
  - 設定が簡単

詳細はこちらを参考にしてください↓

https://qiita.com/Junpei_Takagi/items/3983cc735e71ea3917fd

# 2. ESLint

ESLintは、コードの潜在的な問題を検出し、修正するための強力なツールです。

- 主な特徴：
  - コードエラーの検出と修正
  - プロジェクト全体での一貫したコーディング規約の適用

詳細はこちらを参考にしてください↓

https://qiita.com/mzmz__02/items/63f2624e00c02be2f942
# 3. GitLens

GitLensは、VS Code内でのGit操作を強化する拡張機能です。

- 主な特徴：
  - 詳細なコミット履歴の表示
  - コード注釈の表示
  - Git操作の効率化

詳細はこちらを参考にしてください↓

https://qiita.com/yoyoyo_pg/items/e7f010dd13f99e61beba

# 4. Live Server

Live Serverは、リアルタイムでブラウザプレビューを提供する拡張機能です。

- 主な特徴：
  - HTML、CSS、JavaScriptファイルのリアルタイムリロード
  - 開発速度の向上

詳細はこちらを参考にしてください↓

https://qiita.com/kimascript/items/6176896ee2f34da7f496

# 5. Auto Rename Tag

Auto Rename Tagは、HTMLやXMLタグの名前を自動的に変更してくれる便利な拡張機能です。

- 主な特徴：
  - ペアになったタグの自動リネーム
  - 編集時間の短縮

詳細はこちらを参考にしてください↓

https://inopro.jpn.org/885/


# 6. Code Spell Checker

Code Spell Checkerは、コード内のスペルミスを検出する拡張機能です。

- 主な特徴：
  - 複数言語対応
  - カスタム辞書の作成が可能

詳細はこちらを参考にしてください↓

https://qiita.com/nyakako13/items/f2a0d8b60bc7bbfccc0c

# 7. GitHub Copilot

GitHub Copilotは、AIを活用したコード補完ツールです。

- 主な特徴：
  - リアルタイムのコード提案
  - 自然言語からのコード生成

詳細はこちらを参考にしてください↓

https://qiita.com/cazamir0/items/ae71c3bce51fd5a3fa8d


# 8. Bracket Pair Colorizer

Bracket Pair Colorizerは、対応する括弧を色分けして表示する拡張機能です。

- 主な特徴：
  - コードの構造を視覚的に理解しやすくする
  - ネストされた括弧の識別が容易

詳細はこちらを参考にしてください↓

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

# 9. Live Share

Live Shareは、リアルタイムでのコラボレーション開発を可能にする拡張機能です。

- 主な特徴：
  - リモートペアプログラミング
  - コードセッションの共有

詳細はこちらを参考にしてください↓

https://qiita.com/Shota_Fukuda/items/1358b8eb5e3e8354d1c7

# 10. Tabnine

Tabnineは、AIを活用したコード補完ツールです。

- 主な特徴：
  - 複数言語対応
  - コンテキストに応じた適切な補完提案

これらの拡張機能を活用することで、VS Codeでの開発効率を大幅に向上させることができます。自分の開発スタイルに合わせて、適切な拡張機能を選択し、導入してみてください。

詳細はこちらを参考にしてください↓

https://qiita.com/yudai1204/items/ce0449660cbc8e937bb1

# まとめ
最後まで読んでくださり、ありがとうございました。もし改善点や質問があれば、ぜひコメントしてください！
pandasのブールインデクシング

## pandasのブールインデクシング

pandasのデータフレームに対してブール値のSeriesを使ってフィルタリングする方法をブールインデクシングと呼ぶ。これは特定の条件に基づいてデータフレームの行を選択する。

### 基本的な例

まず、サンプルデータフレームを作成する：

```python
import pandas as pd

data = {
    'gene_name': ['gene1', 'gene2', 'gene3', 'gene4'],
    'log2FoldChange': [2.5, -1.2, 0.5, 3.0],
    'p-value': [0.01, 0.2, 0.05, 0.001]
}
df = pd.DataFrame(data)
```
次に、p-value 列の値が0.05未満である行を選択するためのブールインデクシングを行う：

```python
selected_pval = 0.05
condition = df['p-value'] < selected_pval
df_filtered = df[condition]
```

condition は以下のようなブール値のSeriesになる：
```python
0     True
1    False
2    False
3     True
```
df[condition] という構文により、condition が True の行のみが選択され、新しいデータフレーム df_filtered が得られる：
```python
  gene_name  log2FoldChange   p-value
0     gene1             2.5  0.010
3     gene4             3.0  0.001
```
弱小プログラマー、個人開発1年勝負：1DL・1円を突破！次は100円課金・10000インプレッションを目指す

個人開発で一年間生計を立てる——そんな無謀（？）な挑戦をしてる、chantoです。

正直なところ、うまくいく確率は低いかもしれません。けれど、「どれ、見てやろうじゃないか」と思ってくれるあなたに向けて、試行錯誤の過程を赤裸々に綴っていきます。

# 4日間で新しいアプリをリリース

最近、「残薬管理アプリ」をリリースしました。手持ちの薬を記録して管理できるシンプルなアプリです。

![Frame 1 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3987263/ed176f0c-7fca-4f6c-b881-2c24e5fbcbd0.png)


https://apps.apple.com/jp/app/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E6%AE%8B%E8%96%AC%E7%AE%A1%E7%90%86/id6742806886?platform=iphone


正直なところ、アプリ開発はまだ手探り。とはいえ、思いついたアイデアはすぐ形にする姿勢を大切にしています。

# 目指せ、100アプリリリース！？

世の中にはすごい人がいるもので、ひそかに100個近くアプリをリリースしている個人開発者を見つけました。

めちゃくちゃ尊敬しています。

このペースには到底及ばないものの、「とにかく手を動かす」姿勢は見習いたいところ。僕もできる範囲で、いろんなアプリを作り続けていくつもりです。

# 1DL・1円の壁は突破

個人開発を始めて、決めていた目標1ダウンロード、収益1円は達成しました。

数字だけ見れば笑っちゃうくらい小さいですが、ゼロを1にするのって意外と大変。小さな一歩でも確実に積み重ねていきます。

次の目標は「10000インプレッション」

今後は、アプリのインプレッション数（アプリストアでアイコンが表示される回数）を累計10000回に増やすことを目標にします。

ダウンロード数や収益は運に左右される部分も大きいですが、インプレッション数なら施策次第で増やせるはず。まずは、ここをコントロールできるように試行錯誤してみます。

# 目指せ、100円の課金

現状、僕が作ったアプリには課金の仕組みすらありません。

次のステップは、100円でもいいから課金してもらえるアプリを作ること。収益化を意識した開発にも挑戦していきます。

# 新作：アイデア管理アプリ、開発中

今は、「アイデアをストックして、まとめて評価できるアプリ」を作っています。

思いついたアイデアをすぐに記録し、オリジナルの評価軸で比較できるアプリを目指しています。

![Frame 1 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3987263/c7824760-0fa3-484e-9470-b4728dd5eba8.png)


# 需要は読めない。でも、作り続ける

これまでにリリースしたアプリは、

貯金アプリ

https://apps.apple.com/jp/app/%E3%82%82%E3%81%97%E3%82%82%E8%B2%AF%E9%87%91%E7%AE%B1-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E5%B0%81%E7%AD%92%E8%B2%AF%E9%87%91/id6742336702?ign-itscg=30200&ign-itsct=apps_box_link&mttnsubad=6742336702&platform=iphone

賞味期限管理アプリ

https://apps.apple.com/jp/app/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%83%88%E3%83%83%E3%82%AF-%E8%B3%9E%E5%91%B3%E6%9C%9F%E9%99%90-%E5%9C%A8%E5%BA%AB%E7%AE%A1%E7%90%86/id6741692393?ign-itscg=30200&ign-itsct=apps_box_link&mttnsubad=6741692393&platform=iphone

レーダーチャートアプリ

https://apps.apple.com/jp/app/%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88-%E7%B0%A1%E5%8D%98%E4%BD%9C%E6%88%90-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88/id6741140710?platform=iphone

…などですが、意外にも貯金アプリの反応が一番良いんです。

自分では「これがイケる！」と思っていたものより、想定していないものが伸びたりしてます。やはり需要は読めません。。

だからこそ、あれこれ試し続けるしかない。これからも手を止めず、少しずつでも前に進んでいきます。

「まあ、せいぜい頑張れよ」と思いながら、気が向いたときに覗いてもらえると嬉しいです。
🐳 Docker コンテナ、ボリューム、イメージ、ビルダーキャッシュ、ネットワークをすべて削除する手順

# 🐳 Docker コンテナ、ボリューム、イメージ、ビルダーキャッシュ、ネットワークをすべて削除する手順

Docker では、コンテナ、ボリューム、イメージ、ビルダーキャッシュ、ネットワークが不要に溜まってしまうと、ストレージを圧迫することがあります。本記事では、これらのリソースをすべて削除する手順を紹介します。

---

## 🚨 注意事項
- **データは完全に削除され、復元できません。**
- 必要なデータはバックアップを取っておいてください。

---

## 🧼 すべてのリソースを削除する手順

### 1. 実行中のコンテナをすべて停止する
```bash
if [ "$(docker ps -q)" ]; then docker stop $(docker ps -q); fi
```
- 実行中のコンテナがある場合にのみ、停止します。

### 2. すべてのコンテナを削除する
```bash
if [ "$(docker ps -aq)" ]; then docker rm $(docker ps -aq); fi
```
- すべてのコンテナが存在する場合にのみ、削除します。

### 3. すべてのイメージを削除する
```bash
if [ "$(docker images -q)" ]; then docker rmi $(docker images -q); fi
```
- `docker images -q` ですべてのイメージ ID を取得し、削除します。

### 4. すべてのボリュームを削除する
```bash
docker volume rm $(docker volume ls -q)
```
- `docker volume ls -q` で、すべてのボリューム名を取得します。
- `docker volume rm` で、すべてのボリュームを削除します。

### 5. すべてのビルダーキャッシュを削除する
```bash
docker builder prune -f
```
- Docker ビルダーのキャッシュをすべて削除します。
- `-f` オプションで、確認なしで実行します。

### 6. 使われていないネットワークを削除する
```bash
docker network prune -f
```
- 未使用の Docker ネットワークを削除します。

### 🧹 まとめてクリーンアップする方法（オプション）
```bash
docker system prune --volumes -f
```
- 使われていないすべてのコンテナ、ネットワーク、ボリューム、イメージを一括削除します。
- `-f` オプションを付けると、確認メッセージなしで実行されます。

---

## ✅ 削除されたか確認する
```bash
docker system df
```
- Docker のディスク使用状況を確認できます。
- すべてが空であれば、正常に削除されたことを確認できます。

---

## 💡 役立つコマンド一覧
| コマンド | 説明 |
|----------|------|
| `docker volume ls` | すべてのボリュームを表示 |
| `docker volume rm <volume_name>` | 特定のボリュームを削除 |
| `docker volume prune` | 使われていないボリュームを削除 |
| `docker images -q` | すべてのイメージ ID を表示 |
| `docker rmi <image_id>` | 特定のイメージを削除 |
| `docker system df` | Docker のディスク使用状況を表示 |
| `docker builder prune -f` | ビルダーキャッシュを削除 |
| `docker network prune -f` | 未使用のネットワークを削除 |
| `docker system prune --volumes -f` | すべてを一括削除（確認なし） |

---

これで、不要な Docker リソースを安全に削除することができます。もし質問があれば、お気軽にどうぞ！
Tmux, Vim, LazygitのC-j,C-kのキーマップがコンフリクトする問題の解消

## はじめに

`tmux`,`lazygit`,`vim`はそれぞれCtrl-j,Ctrl-kを使います。
* `tmux`: ペインの上下移動
* `vim`: ウィンドウの上下移動
* `lazygit`: commitの上下移動

これらを解決するまでの流れと、過程で生じた問題とその解決策を紹介します。



## 最初の Vim と Tmux の設定

まず、Vim と tmux のペイン移動を統一するため、以下の設定を追加しました。
`vim`側ではプラグイン([alexghergh/nvim-tmux-navigation](https://github.com/alexghergh/nvim-tmux-navigation))を使用しています。
こちらの設定も上記のプラグインのレポジトリのREADMEから拾ってきました。

```tmux
is_vim="ps -o state= -o comm= -t '#{pane_tty}' \
    | grep -iqE '^[^TXZ ]+ +(\\S+\/)?g?(view|l?n?vim?x?|fzf)(diff)?$'"

bind-key -n 'C-h' if-shell "$is_vim" 'send-keys C-h'  'select-pane -L'
bind-key -n 'C-j' if-shell "$is_vim" 'send-keys C-j'  'select-pane -D'
bind-key -n 'C-k' if-shell "$is_vim" 'send-keys C-k'  'select-pane -U'
bind-key -n 'C-l' if-shell "$is_vim" 'send-keys C-l'  'select-pane -R'

tmux_version='$(tmux -V | sed -En "s/^tmux ([0-9]+(.[0-9]+)?).*/\1/p")'
if-shell -b '[ "$(echo "$tmux_version < 3.0" | bc)" = 1 ]' \
    "bind-key -n 'C-\\' if-shell \"$is_vim\" 'send-keys C-\\'  'select-pane -l'"
if-shell -b '[ "$(echo "$tmux_version >= 3.0" | bc)" = 1 ]' \
    "bind-key -n 'C-\\' if-shell \"$is_vim\" 'send-keys C-\\\'  'select-pane -l'"
```

この設定により、`Vim`と`tmux`両方で `C-h`, `C-j`, `C-k`, `C-l` をウィンドウ、ペイン移動に使用できるようになりました。

## Lazygit のキーバインド競合

その後、`lazygit` を `tmux` 内で使用するようになったところ、
リベース時に `C-j`, `C-k` を用いたコミットの移動が機能しない問題が発生しました。
これは、`tmux` が `C-j`, `C-k` をペイン移動に割り当てていたためです。

この問題を解決するため、`lazygit` を検出して適切なキーを送信するようにしました。

```tmux
is_lg="ps -o state= -o comm= -t '#{pane_tty}' | grep -iqE '^[^TXZ ]+ +(\\S+\/)?lazygit$'"

bind -n C-j if "$is_lg" "send-keys C-j"  "select-pane -D"
bind -n C-k if "$is_lg" "send-keys C-k"  "select-pane -U"
```
参考: https://github.com/jesseduffield/lazygit/discussions/3201#discussioncomment-8037078

これにより、`tmux` 内でも `lazygit` のコミット移動が機能するようになりました。

## Vim のウィンドウの上下の移動が機能しなくなる問題

しかし、この設定の影響で、Vim のウィンドウの上下移動 (`C-j`, `C-k`) が機能しなくなってしまいました。

そこで、`lazygit` と `vim` の両方の状況を考慮し、すべての動作を両立させるための設定を作成しました。

```tmux
bind -n C-j if-shell "$is_lg" "send-keys C-j"  "select-pane -D" \
  \; if-shell "$is_vim" 'send-keys C-j'  'select-pane -D'
bind -n C-k if-shell "$is_lg" "send-keys C-k"  "select-pane -U" \
  \; if-shell "$is_vim" 'send-keys C-k' 'select-pane -U'
```

この設定により、`tmux`,`lazygit`,`vim`すべてで`C-j`,`C-k`が期待通りの動作をするようになりました。

## まとめ

この問題を通じて、`tmux` の `if-shell` を適切に活用し、
`lazygit`, `vim`, `tmux` のキーマップ競合を解決する方法を学びました。

現在の設定では、
- `tmux` 内でも `lazygit` のキー操作が可能
- `vim` 内でのスプリット移動も動作
- `tmux` のペイン移動も維持

と、すべての動作が期待通りに動くようになっています。

もし `tmux`, `lazygit`, `vim` を同時に使用していて、キーバインドの競合に悩んでいる方がいれば、ぜひこの方法を試してみてください！
【Laravel10】joinとwithを一緒に使うとバグる

Laravelは[with](https://readouble.com/laravel/11.x/ja/eloquent-relationships.html)で勝手にリレーションを貼ってくれるので便利なのですが、実はこれ実際にJOINしているわけではないので、リレーション先のテーブルでSELECTしたりWHEREしたりすることができません。

```php:動かない
$hoge = Hoge::query();
$hoge->with('fuga');   // hogeはfugaにhasOneしている
$hoge->select(['hoge.*', 'fuga.hoge_id', 'fuga.column1']);
$hoge->where('fuga.column1', '=', $column1);
```

これはエラーになります。
実はwithは、まずhogeテーブルからSELECTし、そのidでfugaを`WHERE id IN`でSELECTしています。
WHEREは[普通に書くことができません](https://zenn.dev/yum3/articles/t_caution_laravel_with)。
こういう場合は[join](https://readouble.com/laravel/11.x/ja/queries.html)を使わなければならないようです。

JOINがあるなら話は簡単だ、ということでこう書きたくなるじゃないですか。

```php
$hoge = Hoge::query();

$hoge->join('fuga', function (JoinClause $join) use ( $column1 ){
    $join->on('hoge.id', '=', 'fuga.hoge_id');
    $join->select(['fuga.hoge_id', 'fuga.column1']);
    $join->where('fuga.column1', '=', $column1);
});
```

期待するSQLはこうです。

```sql
SELECT hoge.*, fuga.hoge_id, fuga.column1, fuga.column2 FROM hoge
 LEFT JOIN fuga ON hoge.id=fuga.hoge_id WHERE fuga.column1=xxxxx
```

しかし、これ実は効きません。
selectメソッドが完全に無視されて`SELECT * FROM`になります。
エラーが出ればまだマシなのに、何も言わずに成功しているように見えるのが厄介です。
なんで？

さて、これでどうなるかというと、[idが`fuga.id`になる](https://qiita.com/pipiox/items/395bef543e16c93a1fa6)事故が発生します。

対処するには、こう書かなければなりません。

```php
$hoge = self::query();
$hoge->select(['hoge.*', 'fuga.id AS fuga_id', 'fuga.hoge_id', 'fuga.column1', 'fuga.column2']);

$hoge->join('fuga', function (JoinClause $join) {
    $join->on('hoge.id', '=', 'fuga.hoge_id');
});
```

なんで？


# joinとwithを一緒に使うとバグる

この項目、『普通に』書くだけでバグるのでだいぶ深刻だと思うのですが、事例を探しても見当たりませんでした。

```php
$foo = Foo::query();

$foo->join('bar', function (JoinClause $join) {
    $join->on('foo.id', '=', 'bar.foo_id');
});
$foo->with('baz'); // fooはbazにhasOneしている
```

期待しているのは`WHERE baz.foo_id = foo.id`なわけですが、実際は`WHERE baz.foo_id = bar.id`とかいう謎のSQL…相当の動作がおきます。

まずjoinしたときにidが`foo.id`から`bar.id`に上書きされてしまい、その後`bar.id`を使ってbazとwithするので意味のわからない結果が出てくることになります。


Laravelのクエリビルダ、テーブルがひとつふたつの単純なテーブルを扱うのは非常に簡単なんだけど、ふたつ以上のリレーションを組み合わせたり、入り組んだSQLを扱おうとすると途端に超絶難解になってつらい。
あとEloquentとクエリビルダの違いがわからない。
CloudWatchのAlermをSlackに連携する

# 概要
- CloudWatchのAlerm通知をSlackに通知するようにしたかったのでやった
- 知らないサービスが生えてたので試してみてポチポチしたらできたので体験よかった
- のでメモする


# 参考にしたサイト

https://beyondjapan.com/blog/2022/05/cloudwatch-chatbot/


# 手順

## CloudWatch Alermを設定する

手順省略。Webにいっぱいあるので

AWS Chatbotはまだないので、自分のメールアドレスに通知するSNSで設定しました（メールアドレスに確認用のリンクが飛ぶので確認のためリンククリックすること）

作成するとSNSが作成されます

## AWS Chatbotを設定しようとする

https://aws.amazon.com/jp/chatbot/

ほう？ってなった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101690/b546615e-0232-4485-bb79-6597b2e8a2dd.png)


今はAmazon Q Developerとのこと（なんもわかっていないですが）

### Amazon Q Developerを設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101690/a6a7f33e-3a19-4c93-8b40-1b123cddaf53.png)

初期ページでSlackを選択できるのでクライアント設定すると連携したいSlack Workspaceとの連携画面になります。それをそのまま承認する

次に下記をポチポチ設定していきます

* Slackチャンネル
* アクセス許可のためのロール設定
* 通知で、SNSトピックを選択


## SNS

* 初回メールアドレスに通知する設定があるので削除（削除しなくてもよいです）


# 雑感

かんたーん
「技術書」の読書術を読んで

# はじめに
技術書や資格取得の書籍を購入しても、分厚さから読むの中断することがある。
読み切れても理解できなかったり活かせなかったりしている。
自分の悩みにマッチした書籍だと思い購入した。

https://www.shoeisha.co.jp/book/detail/9784798171548


# 自分が試したいこと
- 新刊情報の通知
- 技術書の売り上げランキングをチェック
- くじ引き読書法
- 洋書活用。気になるが自分には早いので洋書売り場に足を運ぶ
- 3回読む　①流し読み②手を動かす③ノートにまとめる
- 分冊化読書法　罪悪感払拭させたい
- 時間制限読書法
- お風呂場にマグネットシート


# 印象に残ったこと
- 良書＝自分と相性の良い本　ではない
- 悪書は避けられない。出会った時にどうするか
- 一点突破読書法　自分にできないが、学びたい分野が見えた時に実践したい
- とりあえずアウトプット。結果は気にしない
- 技術同人誌　存在を知らなかった
- 三多　看多、做多、商量多（欧陽脩）
- 三上　馬上、枕上、厠上（欧陽脩）


# 終わり
技術書や技術職自体が多種多様すぎて、働き始めてから今も正直ずっとよく分かっていない。
「技術書をものにする」ことを、この本から学んだことでできるか実践していきたい。
Linux 基本設定① 〜ユーザー/グループ設定〜

## 前提
サーバーはEC2で構築

## ユーザー作成

### ユーザー情報格納ファイル

ユーザーの一覧情報は```/etc/passwd```に記載されている

```
cat /etc/passwd
```

UID,ホームディレクトリ,デフォルトシェルは明記しているがパスワードは見れない

:::note
パスワードはroot権限しか見られない```/etc/shadow```内にハッシュ化されたものが記載されている
:::

### ユーザー作成コマンド
ファイル書き換え&上書きでも良いが一般的にはコマンドでユーザー作成する
ユーザー作成のコマンドは```useradd```

```一例
sudo useradd -s /bin/bash -d /home/testuser -m testuser
```
-s : ユーザーのバッシュを指定
-d : ユーザーのホームディレクトリを指定
-m : ホームディレクトリが存在しないなら作成

オプションをつけない場合はデフォルト値が適用される

```
useradd -D
```
⭐️気をつけたいのはデフォルトのログインシェルが『/bin/sh』であること

:::note
基本コマンドを打つ程度だと影響はないがシェルスクリプトを実行するユーザーだとこの違いでエラーが発生する可能性もあるので統一した方がいい
:::



## ユーザーのログイン禁止
azureuser、ec2-userのようなデフォルトで存在する強いユーザーのログインを無効化する
基本的に攻撃者はこのようなデフォルトで存在するユーザーに攻撃を仕掛けてくる
これらは削除してもマシンを再起動すると復活するゾンビのため、事故防止のためログイン自体も禁止しておこう

:::note info
他のユーザーを作成/SSH設定してないのに下の設定をするとログインできなくなって詰む可能性もあるので注意
:::

```/etc/passwd```の```/bin/bash```を```/sbin/nologin```に書き換える

```
ec2-user:x:1001:1001::/home<ユーザー名>:/sbin/nologin
```

コマンドの場合は以下で書き換え可能

```
sudo usermod -s /sbin/nologin <ユーザー名>
```

## グループ作成/ユーザー参加

## グループとそれに属するユーザーの一覧表示

```
cat /etc/group
```
多いのでgrepで絞ろう
```
cat /etc/group | grep sudo
```

## ユーザーのgroup確認

```
groups <ユーザー名>
```

## ユーザーのgroup設定

```
sudo usermod -aG <グループ名> <ユーザー名
```

:::note

-aは既存のグループ設定は保持するオプション
つまり、-aを付けないとグループが全部外れてしまう可能性があるため注意
:::

## Next
Next:https://qiita.com/tomdog/items/2acb3f46717657f83b8b
コードコンプリート＜上＞　−4−

### コンストラクションの重要な決断

・プログラミング言語の長所と短所を把握する
1. Ada 
軍事システム、宇宙システム、航空電子光学システム。Pascleを下にした高級言語
1. アセンブラ 
実行速度の改善やコードサイドの縮小のときに使用する。低水準言語
1. C
中水準言語。移植性のあるアセンブラみたいなもの。高級言語の機能を持つが、ポインタやアドレスの使用の頻度が高く、ビット演算といった低水準の構造を持つ
1. C++
Cを基にしたオブジェクト指向言語。Cより強力な型チェック機能。包括的で強力な標準ライブラリを持つ
1. C#
オブジェクト指向言語。MicrosoftPlatformでのプログラミング環境。開発者支援ツールが豊富。
1. COBOL
英語に似せたプログラミング言語。業務アプリケーション
1. FORTAN
変数や高水準のループを取り入れた最初の高級言語。科学アプリ、工学アプリ
1. Java
オブジェクト指向言語。あらゆるPlatformでの動作が可能。Webアプリケーション
1. TypeScript
インタープリタ型のプログラミング。Webページに簡単な機能やオンラインアプリを追加することができる
1. Perl
文字列処理言語（CといくつかのUNIXユーティリティ）ビルドスクリプトの作成などのシステム管理タスク、レポートの生成と処理
1. PHP
オープンソースのスクリプト言語。主要なOSで動作し、サーバー側の対話型機能を実行。WEBページに埋めて、データベース情報にアクセスして、結果を取得、表示する。
1. Python
インタプリタ方式の対話型のオブジェクト指向言語。スクリプトや簡単なWebアプリケーション、大きなプログラミングの作成
1. SQL
1. リレーショナル・データベースの紹介、更新、管理のデファクトスタンダード言語。宣言型の言語処理の結果を定義する
1. VisualBasic
Basic（高級言語）のオブジェクト指向言語のビジュアル高級プログラミングバージョン。デスクトップアプリのカスタマイズ、Webプログラミングや他のプログラミングの作成をサポート

・アーキテクチャの概念的な整合性とその実装の間に関連性を見出す
・プログラミングを始める前にプログラミング規約を決める
・プロジェクトに最適なコンストラクションプラクティスを選択する
・テクノロジの波のどこに乗っているかを見極め、それに応じて’、計画や予測を調整する。
【備忘録】フォルダの中のファイルに名前順にして連番の名前をつける

名前の一括変更を行いたいフォルダまで移動し、以下のコードをターミナルで実行する。


```sh
i=1
for f in *; do
  if [[ -f "$f" ]]; then  # ファイルのみ処理（フォルダは無視）
    mv "$f" "${i}_$f"
    ((i++))
  fi
done
```

## 実行例
### 元のファイル
```
Take 2025-02-21 04.05.32 PM.csv
Another File.csv
Sample-Data 01.csv
```

### 実行後
```
1_Take 2025-02-21 04.05.32 PM.csv
2_Another File.csv
3_Sample-Data 01.csv
```
# S3 → SQS → ECS と S3 → EventBridge → ECS のアーキテクチャ比較

## はじめに
AWSのクラウドアーキテクチャを設計する際、S3バケットにファイルがアップロードされたときに自動的にECS（Elastic Container Service）でタスクを実行したいシナリオはよくあります。代表的な実現方法として、以下の2つの構成があります。

- **S3 → SQS → ECS**
- **S3 → EventBridge → ECS**

本記事では、それぞれのアーキテクチャの特徴、メリット・デメリット、利用シーンの違い、失敗時の対応策などについて、具体的な事例を交えて解説します。

---

## 1. S3 → SQS → ECS アーキテクチャ

### 🔍 **アーキテクチャ構成**
1. **Amazon S3**: ファイルがアップロードされると、S3イベント通知を設定してSQSにメッセージを送信します。
2. **Amazon SQS (Simple Queue Service)**: メッセージキューとして、ECSが処理するタスクを蓄積します。
3. **Amazon ECS**: SQSからメッセージを取得してタスクを実行します。

### ✅ **メリット**
- **メッセージバッファリング**: SQSがメッセージを一時的に保存することで、ECSタスクが処理を追いつけない場合でもデータが失われません。
- **メッセージの再試行が容易**: Visibility Timeout と DLQ（デッドレターキュー）を使って、失敗したメッセージを安全に再試行できます。
- **高いスケーラビリティ**: SQSのメッセージ数に応じて、ECSタスクを動的にスケール可能です。
- **メッセージ順序の保証 (FIFOキュー)**: メッセージの順序が重要な場合にFIFOキューを利用できます。

### ⚠️ **デメリット**
- **遅延が発生する可能性**: ECSはSQSをポーリングする必要があり、最短でも1分間の遅延が発生することがあります。
- **ポーリングコストがかかる**: SQSを頻繁にポーリングする場合、APIコールのコストが増加します。
- **メッセージキュー管理が必要**: キューが溢れるとメッセージが消失するリスクがあります。

### 🛠️ **失敗時の処理方法**
- **Visibility Timeout**: 処理に失敗すると、メッセージはキュー内に再度表示され、再実行が可能になります。
- **DLQ (デッドレターキュー)**: 一定回数以上失敗したメッセージはDLQに移行し、手動で再処理することも可能です。

---

## 2. S3 → EventBridge → ECS アーキテクチャ

### 🔍 **アーキテクチャ構成**
1. **Amazon S3**: ファイルがアップロードされると、S3イベント通知を設定してEventBridgeにイベントを送信します。
2. **Amazon EventBridge**: 特定のイベントパターンに基づき、ECSタスクを直接実行します。
3. **Amazon ECS**: イベントを受け取ったECSタスクが即時に処理を開始します。

### ✅ **メリット**
- **即時実行可能**: S3にファイルがアップロードされると、ほぼリアルタイムでECSタスクが起動します。
- **設定がシンプル**: EventBridgeルールでECSをターゲットに設定するだけで完了します。
- **複雑なフィルタリングが可能**: 特定のファイルタイプやパスに基づいたイベント処理が可能です。

### ⚠️ **デメリット**
- **大量のイベントに弱い**: イベントごとに1つのECSタスクが起動するため、ECSタスク数が急激に増加するリスクがあります。
- **イベントが失われる可能性**: イベントが処理されない場合、設定によってはそのまま失われる可能性があります。

### 🛠️ **失敗時の処理方法**
- **再試行ポリシー**: EventBridgeでは再試行ポリシーを設定できますが、ECSタスク全体の再実行となるため、部分的な失敗には対応しにくいです。
- **エラー通知設定**: EventBridgeからSNSやLambdaに通知を飛ばして、手動でエラー処理を行うことも可能です。

---

## 🔍 **SQS と EventBridge の違いをまとめた比較表**

| 項目 | S3 → SQS → ECS | S3 → EventBridge → ECS |
|---|---|---|
| **配信方法** | プル型（ポーリング） | プッシュ型（即時実行） |
| **遅延時間** | 最小1分 (ポーリング間隔) | 即時実行 |
| **メッセージ保持期間** | 最大14日間 | 24時間 (イベントバス内) |
| **再試行方法** | メッセージ単位（DLQ対応） | タスク単位（再試行ポリシー設定可能） |
| **エラー時の対応** | メッセージがキューに残る | 失敗したイベントは設定により消失する可能性 |
| **スケーラビリティ** | キューのメッセージ数に応じて調整可能 | イベント数に応じてタスクが自動実行 |

---

## 🏁 **結論: 適切なアーキテクチャの選び方**

### ✅ **S3 → SQS → ECS を選ぶべき場合**
- **大量のファイル**が頻繁にS3にアップロードされる場合
- メッセージを **バッファリングして順序通りに処理したい場合**
- **メッセージの再試行やエラー管理をしっかり行いたい場合**

### ✅ **S3 → EventBridge → ECS を選ぶべき場合**
- **即時実行**が求められる場合
- イベント頻度が **低い、またはシンプルなワークフロー**の場合
- **フィルタリング設定が必要**で、特定の条件下でのみECSタスクを実行したい場合

---

## 💡 **まとめ**

S3からECSタスクを実行する場合、SQSを使うことでメッセージのバッファリングや再試行が可能になります。一方、EventBridgeを使うことで、よりシンプルかつ即時実行が可能です。

システムの要件やメッセージの頻度、エラー処理の方針に応じて、最適なアーキテクチャを選びましょう。

本記事を参考に、あなたのプロジェクトに最適なAWSアーキテクチャを構築してみてください！

記事が良ければぜひ「いいね！」をお願いいたします！
「count++」の極意：配列内の出現回数を正しくカウントする方法

Paizaの問題を解いていて、「.includes()」を使ったら大失敗…。
「含まれるか」じゃなくて「何回あるか」が大事な時は count++ すべきだった！

<br>📝 **問題概要**

N人の参加者が、M個の数字を紙に書く。
後で発表されるKと一致する数字の個数が、その人の得点になる。
```
N M K 
a_{1,1} ... a_{1,M}
...
a_{N,1} ... a_{N,M}
```
入力例:
```
4 5 2
1 3 4 4 5
2 2 2 2 2
1 2 3 4 5
1 1 1 1 1
```
出力例:
```
0
5
1
0
```

<Br><br>💀 **NG例**（間違いコード）
```js
const nCount = lines.filter(num => num.includes(K)).length;
console.log(nCount);
```
❌ `.includes(K) `は「Kが含まれているか」しか判定できず、出現回数をカウントできない。

>`lines.filter(num => num.includes(K))`
・`lines` から、`K` を含む要素だけを抽出する。
・`num.includes(K)` が `true` の要素だけを返す。
・`filter` の結果は配列になる。
 
>`.length`
・`filter` の結果（配列）の要素数（＝Kを含む要素の個数）を取得。

>このコードは lines の各行に K が含まれるかをチェックして、「Kを1つでも含む行の数」 をカウントしてしまい、この配列の length を取ると、「Kを含む行の数」 になっちゃう。
この問題では「Kがある行の数」ではなく、「Kが何回あるか」が必要！


<br><br>✅ **OK例**（正しいコード）
```js
const [N, M, K] = lines[0].split(" ").map(Number);

for (let i = 1; i <= N; i++) {
    let count = 0;
    const numbers = lines[i].split(" ").map(Number);

    for (let j = 0; j < M; j++) {
        if (numbers[j] === K) {
            count++;
        }
    }
    console.log(count);
}
```
✅ `count++ `を使ってKの出現回数をカウント
✅ 参加者ごとに `count = 0`をリセット

<Br>🎯 学んだこと
・`.includes() `は 存在チェック、カウントには向かない！
・for ループ + `count++` で 回数を正しくカウント！
・問題の意図を見極めることが大事！（僕は間違えました）

Paizaの問題で地味にハマったけど、配列の扱い方がスッキリ理解できた！

👉 [僕の失敗談と解決話！](https://paizabeginner.wordpress.com/2025/03/10/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc-%e9%85%8d%e5%88%97%e3%83%bbfor%e3%83%ab%e3%83%bc%e3%83%97%e3%81%a8%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%ef%bc%81/)
LeetCode : 7. Reverse Integerの解法

## 初めに
本日もLeetCodeやってまいります。
今回は以下の問題。

```
Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.

Assume the environment does not allow you to store 64-bit integers (signed or unsigned).

 

Example 1:

Input: x = 123
Output: 321
Example 2:

Input: x = -123
Output: -321
Example 3:

Input: x = 120
Output: 21
 

Constraints:

-231 <= x <= 231 - 1
```

## 回答
```python
class Solution:
    def reverse(self, x: int) -> int:
        result_str = ""
        if x < 0:
            for digit in str(abs(x))[::-1]:
                if digit == 0:
                    continue
                result_str += digit
            if -2**31 > -int(result_str):
                return 0
            return -int(result_str)
        if x >= 0:
            for digit in str(x)[::-1]:
                if digit == 0:
                    continue
                result_str += digit
            
            if int(result_str) > 2**31 - 1:
                return 0
            return int(result_str)

```

これだとちょっと長いのでGPTにシンプルにしてもらいました笑

```python
class Solution:
    def reverse(self, x: int) -> int:
        sign = -1 if x < 0 else 1
        s = str(abs(x))[::-1]
        result = sign * int(s)
        if result < -2**31 or result > 2**31 - 1:
            return 0
        return result

```

## 最後に
無駄なループ書きすぎてました涙
これからも精進します。
【python】wwから日付を逆算

2024年が月曜始まりだったせいで2025年で泥沼にはまった。
week 01 ,2025 => 2024-12-30
にしてほしかったという話。
まあ2025年なのに2024年出てくるのはキモいって話はあるのですけど、要望なのでしゃーない。

# before
``` python
from datetime import datetime, date
ww = "2025-W01"
tar_date = datetime.strptime(ww + '-1', "%Y-W%W-%w").date() 
# datetime.date(2025, 1, 6)
```
isoのカレンダーウィークとズレる。

# after
``` python
from datetime import datetime, date
ww = "2025-W01"
new_ww = ww.replace('W','').split('-')
tar_date = date.fromisocalendar(int(new_ww[0]), int(new_ww[1]), 1)
# datetime.date(2024, 12, 30)
```
isoのカレンダーウィークと一致。

# 参考
https://docs.python.org/ja/3/library/datetime.html#datetime.date.isoformat
https://qiita.com/Butterthon/items/a2f7bd3cc1cb4f7528d7#38%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9Ffromisocalendar