OmniAICreator/Qiita-1.07M huggingface dataset:
【PHP】Fizz Buzz (paizaランク C 相当)をやってみた

https://paiza.jp/works/mondai/c_rank_skillcheck_sample/fizz-buzz

以下に、与えられた問題に基づくPHPプログラムを作成しました。このプログラムは、1からNまでの整数を順に表示し、条件に応じて特定の文字列を表示します。

```php
<?php
// 標準入力からデータを取得
$input = trim(fgets(STDIN));

// 入力値を整数に変換
$N = intval($input);

// 1からNまでのループを実行
for ($i = 1; $i <= $N; $i++) {
    // 3の倍数かつ5の倍数の場合
    if ($i % 3 == 0 && $i % 5 == 0) {
        echo "Fizz Buzz\n";
    }
    // 3の倍数の場合
    elseif ($i % 3 == 0) {
        echo "Fizz\n";
    }
    // 5の倍数の場合
    elseif ($i % 5 == 0) {
        echo "Buzz\n";
    }
    // その他の場合
    else {
        echo "$i\n";
    }
}
?>
```

このプログラムは以下の手順で動作します：

1. 標準入力からデータを取得し、入力値を整数に変換します。
2. 1からNまでのループを実行し、各数値に対して以下の条件をチェックします：
   - 3の倍数かつ5の倍数の場合には「Fizz Buzz」を表示
   - 3の倍数の場合には「Fizz」を表示
   - 5の倍数の場合には「Buzz」を表示
   - それ以外の場合には、その数値自体を表示
VusualStudioからazureのインスタンスを生成してApp Serviceにデプロイするまで

:::note alert
無料枠でも30日経過したりデポジットを使い切って従量制にすると予期せぬ高額な請求になることがあるので、アカウント作成やインスタンスを作成する際は自己責任で十分にお気をつけください
:::
# 参考
ほぼ手順的には同じですが細かい説明を省いたり英語表記なので備忘録的に残します
https://learn.microsoft.com/ja-jp/azure/app-service/quickstart-dotnetcore?tabs=net80&pivots=development-environment-vs#launch-the-publish-wizard?utm_source=aspnet-start-page&utm_campaign=vside

# 環境
Microsoft Visual Studio 2022 Version 17.10.4
Microsoft .NET Framework Version 4.8.09032

# Visual Stadio 2022でプロジェクトを作成
今回は、ASPNET Core Web アプリ(Model-View-Controller)で作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/3f82c500-63d1-2880-1f0e-112a2e1474d1.png)

### プロジェクト名を付けて「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/b6a71ff5-db29-1e72-64b5-5ae476ff2455.png)

### 何も触らず「作成」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/c377b76d-4c97-b5b6-54df-1b08f861d6ee.png)

### Azureへ公開
ソリューションエクスプローラーでプロジェクトの下に表示されている
「Connected Service」をクリックし「公開」を選択し、「Azure」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/1d5bb80f-353d-570d-2372-f8044e468812.png)

### インスタンスの種類を選択
今回はWindowsで作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/8a666e44-6e26-5538-81e7-3c8e27e5e00e.png)

### サインインする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/9dc4dcec-c4d1-edb8-5831-90a4db961cf4.png)

### 新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/914b95bb-eb39-d079-68e0-2e7a09c2817a.png)

:::note alert
ホスティングプランを選択する時Freeになっていることを確認してください
それ以外だと有料のインスタンスが作成され費用が発生します

:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/85a3127f-4e97-cef7-c7bd-8ec1e1b17897.png)



### 発行ボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/7ee176b8-0550-8b50-3e50-b7a542c8cba8.png)

公開が成功していればサイトに記載されているurlをクリックすれば公開されているサイトに遷移します

# エラー対応
### 「基本認証が無効になっています」のエラーが発生

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/b81acde4-971a-80c8-8ddc-5567a93d14af.png)

VSからではなく自分で作成したインスタンスだとSCM基本認証、FTP基本認証がオフになっているので、
設定-構成-全体設定からSCM基本認証、FTP基本認証をオンにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/4a84d5bc-1ee9-aff8-0998-1b9a30c069bc.png)

### 「yyyy/mm/dd に公開が取り消されました」のエラーが発生
Visual Stadioが古いバージョンになっていたので最新に更新したら解消しました

# 最後に雑談(読み飛ばしてもよいです)
.NET 開発でazureを使うことになりいきなり開発用の垢で触るのは怖いので、学習用として作成した個人垢の無料枠で学習した記録を残していきます

久々に.NETの開発で最後に触ったのが.net framework 3.5だったので、そこから色々進化を感じました
ホットリロードやvisual stadioから直接Azureにデプロイできたりなど、今後も学習した内容をまとめていきます

公式ドキュメントは詳しいのですが、操作方法だけ知りたい場合が多いので、無駄な説明は省いており自分用の備忘録的に残していきます
OutSystems の正規表現で、小文字と大文字が区別されない（パラメーターをよく確認しましょう）

# 対象
- OutSystems 11 で Regex_Search 等の正規表現を使用している方

# 事象
- 小文字のみ許容したつもりが、大文字も許容されてしまう（またはその逆）

# 検証
Text API の Regex_Search を使い、 Text と Pattern に画面上の入力値を設定するようにする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/70c45177-45a0-2f80-37df-aecbf6d86d2a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/40aa4356-aa4c-9ba2-a517-40b92ce0ef1a.png)

正規表現に「^[A-Z]*$」を設定し、「abc」の値で検証すると結果が「True」になってしまう。

# 原因
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/43ee595a-fa52-e827-48b9-bf96049a361e.png)

IgnoreCase というパラメーターがあり、デフォルトが「True」(大文字・小文字を区別しない)になっていただけ。。。

:::note info
[Text API - Regex_Search](https://success.outsystems.com/ja-jp/documentation/11/reference/outsystems_apis/text_api/#Regex_Search)
:::

フォーラムでも同じ質問されている方が・・・
https://www.outsystems.com/forums/discussion/67453/regex-search-giving-incorrect-results-in-outsystems-mobile-for-uppercase/

# 結論
タイトルにも書いたとおり、「パラメーターをよく確認しましょう」

# さいごに
株式会社メディアテックでは絶賛 [開発メンバを募集中](https://www.mediatech.jp/career) です。
ローコード開発だけではなく、RPAやBIエンジニア諸々多数の募集をしておりますので、みなさまのご応募をお待ちしております。
【Python3】文字の一致 (paizaランク D 相当)をやってみた

https://paiza.jp/works/mondai/d_rank_skillcheck_sample/diff_str

**問題: 2つの文字列が一致しているか確認**

**入力**: 2行にわたって文字列 `a` と `b` が与えられる
**出力**: 文字列が一致していれば "OK" 、異なっていれば "NG"

**アプローチ**:
1. 標準入力から文字列 `a` と `b` を読み込む
2. 文字列が一致するかどうかを比較
3. 一致すれば "OK" 、異なれば "NG" を出力

**コード**:
```python
# 標準入力から2行の文字列を読み込む
a = input().strip()
b = input().strip()

# 文字列が一致するかどうかを比較
if a == b:
    print("OK")
else:
    print("NG")
```

**コードの説明**:
1. **文字列の読み込み**:
    - `input().strip()` を使って標準入力から文字列を読み込みます。
    - `strip()` メソッドを使って、文字列の前後にある余分な空白や改行を取り除きます。

2. **文字列の比較**:
    - `if a == b:` で文字列 `a` と `b` が一致するかを比較します。

3. **出力**:
    - 一致していれば `print("OK")` を実行し、一致していなければ `print("NG")` を実行します。

このプログラムは、2つの文字列が一致しているかどうかを確認し、一致していれば "OK" 、異なっていれば "NG" を出力します。
WSL 1 is not supported. Please upgrade to WSL 2 or above と出たときの対処法：for Error code: Wsl/UpdatePackage/0x80248014

# 背景

npm で build しようとしていて、UNCパスだからー動かせない！とか怒られた
wsl2 なのに、なんでそんなん出るん？と思いつつも、
ネットワークドライブへのマッピングで対処しようとしたりしてたら・・

npm コマンド実行時にこのメッセージが出て、一苦労した際の備忘録

```bash: error
WSL 1 is not supported. Please upgrade to WSL 2 or above
```

version 確認すると、ubuntu は問題ないのに、wsl version が動見ても古い・・

## ダメだった時の version

```bash: wsl 2 が wsl 1 上で動いていた際
> wsl -v
WSL バージョン: 1.1.3.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.49
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windowsバージョン: 10.0.22621.3737
```

## アップデート後の version

```bash: wsl 2 回復
> wsl -v
WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61
MSRDC バージョン: 1.2.5326
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26091.1-240325-1447.ge-release
Windows バージョン: 10.0.22621.3737
```

# 結論

:ok: 単純に、アップデートすればよい。

```bash: 回避策 
> wsl --update --web-download
更新プログラムを確認しています。
Linux 用 Windows サブシステムをバージョン 2.2.4 に更新しています。
```

:::note warn

proxy 下であれば、<code>--web-download</code> 必須（詳細は後述）

:::

---

# 試行記録

## :ng: stack over flow を試す

全部 shutdown して、再起動したけど変わらず

https://stackoverflow.com/questions/78469859/npm-wsl-1-is-not-supported-please-upgrade-to-wsl-2-or-above

## :ng: マッピングを解除して、再起動

## :ng: windows の機能の確認：Linux & 仮想化

## :ng: wsl アップデート

単純にアップデートを試すも失敗。
このエラーで、接続出来てないなんて気づかない・・ :sweat: 

```bash: アップデート失敗
> wsl --update
更新プログラムを確認しています。
Error: 0x80248014
Error code: Wsl/UpdatePackage/0x80248014
```

## :ng: ディストリビューションを、ダウングレードしてから、再度アップグレード

もしかしたら、との一縷の望み

```bash: 
> wsl --set-version Ubuntu-20.04 1
(省略)
> wsl --set-version Ubuntu-20.04 2
WSL 2 との主な違いについては、https://aka.ms/wsl2
 を参照してください
変換中です。これには数分かかる場合があります。
```

# あとがき

そもそも、何故ダウングレードが起きたのかが不明 :thinking: 

ドライブマッピングの問題だったのだろうか？

# keyword

how to fix Error code: Wsl/UpdatePackage/0x80248014 / WSL 1 is not supported. Please upgrade to WSL 2 or above
PowerShellでJSON操作マスター：データ処理を劇的に簡単に

## はじめに

こんにちは！今回は、PowerShellを使ってJSONデータを操作する方法をマスターしていきます。JSONは現代のデータ交換形式として広く使用されており、APIレスポンスや設定ファイルなど、様々な場面で遭遇します。PowerShellを使えば、このJSONデータを簡単に処理できるんです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d247e7be-dda9-66d9-ab1c-159e6cf7a716.png)


## 1. JSONデータの読み込み

まずは、JSONデータを読み込む方法から見ていきましょう。

```powershell
$jsonString = '{"name": "John Doe", "age": 30, "city": "New York"}'
$jsonObject = ConvertFrom-Json $jsonString

# オブジェクトのプロパティにアクセス
Write-Host $jsonObject.name  # 出力: John Doe
Write-Host $jsonObject.age   # 出力: 30
```

`ConvertFrom-Json` コマンドレットを使うことで、JSON文字列をPowerShellオブジェクトに変換できます。

## 2. JSONファイルの読み込み

JSONファイルから直接データを読み込むこともできます。

```powershell
$jsonContent = Get-Content -Path "data.json" -Raw
$jsonObject = ConvertFrom-Json $jsonContent
```

`-Raw` パラメータを使用することで、ファイル全体を1つの文字列として読み込みます。

## 3. JSONデータの作成と出力

PowerShellオブジェクトからJSONデータを作成することも簡単です。

```powershell
$person = @{
    name = "Jane Smith"
    age = 28
    city = "Los Angeles"
}

$jsonOutput = ConvertTo-Json $person
Write-Host $jsonOutput
```

`ConvertTo-Json` コマンドレットを使用して、PowerShellオブジェクトをJSON形式に変換できます。

## 4. JSONデータの更新

既存のJSONデータを更新する方法を見てみましょう。

```powershell
$jsonString = '{"name": "John Doe", "age": 30, "city": "New York"}'
$jsonObject = ConvertFrom-Json $jsonString

# プロパティの更新
$jsonObject.age = 31
$jsonObject | Add-Member -Name "country" -Value "USA" -MemberType NoteProperty

# 更新されたJSONを出力
$updatedJson = ConvertTo-Json $jsonObject
Write-Host $updatedJson
```

`Add-Member` コマンドレットを使用して、新しいプロパティを追加することができます。

## 5. 複雑なJSONデータの操作

より複雑な構造のJSONデータも扱えます。

```powershell
$complexJson = @"
{
    "employees": [
        {"name": "John", "department": "IT"},
        {"name": "Alice", "department": "HR"},
        {"name": "Bob", "department": "Finance"}
    ],
    "company": "TechCorp"
}
"@

$data = ConvertFrom-Json $complexJson

# 特定の条件に合う要素を取得
$itEmployees = $data.employees | Where-Object { $_.department -eq "IT" }

foreach ($employee in $itEmployees) {
    Write-Host "$($employee.name) works in IT"
}
```

`Where-Object` を使用することで、特定の条件に合う要素をフィルタリングできます。

## 6. JSONデータの深い階層へのアクセス

深い階層のJSONデータにアクセスする方法も見てみましょう。

```powershell
$deepJson = @"
{
    "company": {
        "name": "TechCorp",
        "departments": {
            "IT": {
                "employees": [
                    {"name": "John", "role": "Developer"},
                    {"name": "Alice", "role": "Manager"}
                ]
            }
        }
    }
}
"@

$data = ConvertFrom-Json $deepJson

# 深い階層へのアクセス
$itEmployees = $data.company.departments.IT.employees

foreach ($employee in $itEmployees) {
    Write-Host "$($employee.name) is a $($employee.role) in IT"
}
```

ドット表記を使用することで、深い階層のデータにも簡単にアクセスできます。

## まとめ

PowerShellを使ったJSONデータの操作は、思ったより簡単ですね！ここで紹介した技術を使えば、APIレスポンスの処理、設定ファイルの管理、データの変換など、様々な場面でJSONを効率的に扱うことができます。

より高度な操作や大規模なJSONデータの処理については、パフォーマンスの考慮が必要になる場合もあります。そのような場合は、`System.Text.Json` 名前空間のクラスを直接使用することも検討してみてください。

JSONの操作、マスターできましたか？これらの技術を活用して、データ処理を劇的に簡単にしていきましょう！
Happy coding!
VScodeで指定した範囲にdivタグをつける

こんにちは、テリスです！

webでデザインをしていたら、役立つショートカットを知りましたので残しておきます。

HTMLをコーディングしているときにこのようなことはないでしょうか。
```
<body>
    <h1>title</h1>
    <div>
        <ul>
            <ls>a</ls>
            <ls>b</ls>
            <ls>c</ls>
        </ul>
    </div>
</body>
```
bodyの中身の最初と最後にdivタグをつけたい！と

そんな時は、divタグをつけたい範囲を選んで
〈Mac〉command+shift+p
〈Windows〉control+shift+p
を押すと、コマンド一覧が開けます。

その後、検索欄に'wrap'と打つと
Emmet: Wrap with Abbreviation
と出てくるのでクリック、Enter。

そして、再度記入する欄が現れるので'div'と入力してEnter。

これでbodyの中身の最初と最後にdivタグがつきました！

調べていて使えると思いましたので、皆様も是非使ってみてください！
iPadにUbuntu 22.04をインストールする

# はじめに
先日，UTM SEというアプリがAppleStoreに公開されました
このアプリを使うとなんとiPad上でUbuntuを動かすことができます！

# UTMとは
仮想環境を構築するソフトウェアです．
Mac版では，M1 mac上でWindowsが動かすことができます．

肝心なiPad版ですが，今までAppleがエミュレータアプリの公開を禁止してきたこともあり，
これまで公開できませんでした．
ところが，先日ついにAppleの審査を通ることができました！！
https://x.com/utmapp/status/1812238024220238180?s=46&t=I95XbrKfv4chlcFzLf-55Q

# 注意！
現時点で以下の理由によりインストールは**お勧めしません**
* 最適化されていないため，動作が重い(起動に体感30分)
* なぜかログインできない現象
* しばらく使用していないと勝手に落ちる

# インストール手順
## 1. アプリのダウンロード
Apple storeより[UTM SE](https://apps.apple.com/jp/app/utm-se-retro-pc-emulator/id1564628856 "UTM SE")をダウンロードする．
アプリを開くと以下のようになります．
![IMG_1107.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3841753/dd1eb2aa-90aa-26cb-fb87-096c48075413.jpeg)

## 2. パッケージのダウンロード
アプリの「UTMギャラリーをブラウズ」>「Ubuntu 22.04」>「Download」でビルド済みのパッケージをダウンロードする.
ダウンロードが終わるまで待つ．

ダウンロードが終わったら，「ubuntu-20.04-arm64-utm.zip」を解凍し，「Ubuntu 22.04」を「UTM SE」で開く．

## 3. 設定の変更
この状態で再生ボタンを押しても実行できますが，動作が遅すぎるので次の設定することをお勧めします．

設定ボタン(下図参照)>システム

![IMG_A158CA2B02F9-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3841753/e75aa947-de4e-44c2-7b14-2f18ec7c3c77.jpeg)

以下の項目を端末に合わせて設定
* メモリ
* CPUコア　
例) iPad Pro 第3世代の場合👇
![IMG_2DC99C013CDB-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3841753/f7a94ce5-31c6-90e7-a7c5-1074259f829e.jpeg)

## 4. 実行
再生ボタンを押すだけ．
ひたすら起動するのを待つ
Split Viewで何か開きながら待つと退屈しない
C_TS422_2021 SAP Certified Application Associate SAP S/4HANA Production Planning and Manufacturing対策（74/100）

【74日目】
トピック 8：SAPS/4HANAの製造指図（6/15）

≪問題74≫
製造指図が使用される生産タイプはどれですか。
□プロセス生産処理
□ディスクリート製造プロセス
□期間志向および数量志向の生産
□管理周期による補充処理

≪解答≫
□プロセス生産処理
■ディスクリート製造プロセス
□期間志向および数量志向の生産
□管理周期による補充処理

≪解説≫
◆指図管理に関するさまざまな要件に対応するために、SAPS/4HANAでは、多様な生産タイプをサポートしております。
（1）ディスクリート産業では、製造指図が使用されます。製造指図は、所要量から始まり、最終製品の入庫で終わる複雑なプロセスチェーンの中心部分の一つです。これにより、製品の内製プロセス全体を制御することができます。
（2）プロセス産業では、プロセス指図が使用されます。プロセス指図は、プロセス産業のさまざまな領域で使用され、製品の安定性や製品の複雑さに応じたさまざまな製造手順に対応することが可能です。
（3）期間志向および数量志向生産（繰返生産）は、製品の安定性が高く、反復率が高く、製品の複雑性が低い生産シナリオで主に使用されます。この場合、生産の計画手配が使用されますが、計画手配が製造指図やプロセス指図に変換されることはありません。
（4）管理周期による補充処理（かんばん生産管理）は、物理的な在庫品目に基づいて生産および品目フローを制御するための手順です。定期的に必要となる品目が、生産時に少ない数量の利用可能在庫で保持され、品目供給の計画が不要となります。消費される品目は、かんばんを使用して即座に補充されます。

≪補足≫
ディスクリート産業（discrete manufacturing）とは、個々の製品や部品を個別に生産する製造業の一分野です。ディスクリート製造では、各製品が独立した形状や機能を持ち、それぞれが識別可能です。これに対して、プロセス製造（process manufacturing）は液体、気体、粉体などの原材料を連続的に加工して一連の製品を生産する方法です。
ディスクリート産業の主な特徴は次の通りです。

- 個別製品：製品が個別に生産されるため、製品ごとに特定の仕様や特性を持ちます。例えば、自動車、家電製品、電子機器などが該当します。
- 部品組み立て：製品は多くの部品やコンポーネントから構成され、それらを組み立てるプロセスが重要です。
- 注文生産と在庫生産：ディスクリート製造では、顧客の注文に基づいて生産する場合と、需要予測に基づいて在庫を持つために生産する場合があります。
- 複雑な製造工程：各製品には異なる製造工程があり、これらの工程を効率的に管理することが求められます。
- トレーサビリティ：製品のトレーサビリティ（追跡可能性）が重要です。製造過程での品質管理や不良品の原因追跡などに役立ちます。

ディスクリート産業は、主に以下のような業界で見られます。
- 自動車産業
- 航空宇宙産業
- 電子機器および家電製品
- 機械製造
- 医療機器

これらの業界では、高い精度と品質管理が求められ、多くの場合、複雑なサプライチェーンと製造工程を管理するための高度なソフトウェアやシステムが使用されます。
算数っぽいコード



```py
# 兄の速度 (km/h)
speed_brother_kmh = 4

# 弟の速度 (km/h)
speed_sibling_kmh = 6

# 池の周りの距離 (km)
distance_km = 2

# km/hをm/sに変換するための係数
kmh_to_ms = 1000 / 3600

# 兄と弟の速度 (m/s)
speed_brother_ms = speed_brother_kmh * kmh_to_ms
speed_sibling_ms = speed_sibling_kmh * kmh_to_ms

# 池の周りの距離 (m)
distance_m = distance_km * 1000

# 兄と弟の速度の差 (m/s)
speed_difference_ms = abs(speed_sibling_ms - speed_brother_ms)

# 再び同じ地点で出会う時間 (秒)
time_to_meet_seconds = distance_m / speed_difference_ms

# 秒から時間に変換
time_to_meet_hours = time_to_meet_seconds / 3600

print(f"兄と弟が再び同じ地点で出会う時間は {time_to_meet_hours:.2f} 時間です。")
```



```py
import matplotlib.pyplot as plt
import numpy as np
import math

# Height of the Skytree (meters)
height_of_skytree = 634

# Set the range of angles (from 0 degrees to 90 degrees)
angles_degrees = np.linspace(1, 89, 100)  # Start from 1 degree to avoid division by zero
angles_radians = np.radians(angles_degrees)

# Calculate the distance
distances = height_of_skytree / np.tan(angles_radians)

# Plotting the graph
plt.figure(figsize=(10, 6))
plt.plot(angles_degrees, distances, label='Distance vs Angle', color='blue')
plt.xlabel('Angle (degrees)')
plt.ylabel('Distance from base (meters)')
plt.title('Distance from the base of Skytree vs Angle')
plt.grid(True)
plt.legend()
plt.show()
```




```py
# Given values
speed_of_sound = 343  # Speed of sound in meters per second (m/s)
time = 5.0  # Time in seconds

# Calculate distance
distance = speed_of_sound * time

print(f"The distance to the fireworks is approximately {distance:.2f} meters.")
```



```py
import matplotlib.pyplot as plt
import numpy as np
import math

# Height of the Skytree (meters)
height_of_skytree = 634

# Set the range of angles (from 0 degrees to 90 degrees)
angles_degrees = np.linspace(1, 89, 100)  # Start from 1 degree to avoid division by zero
angles_radians = np.radians(angles_degrees)

# Calculate the distance
distances = height_of_skytree / np.tan(angles_radians)

# Plotting the graph
plt.figure(figsize=(10, 6))
plt.plot(angles_degrees, distances, label='Distance vs Angle', color='blue')
plt.xlabel('Angle (degrees)')
plt.ylabel('Distance from base (meters)')
plt.title('Distance from the base of Skytree vs Angle')
plt.grid(True)
plt.legend()
plt.show()
```
yukicoder No.3 ビットすごろく　解説

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

# 前提知識
[bit云々](https://qiita.com/kazuppa/items/f9b020f1f734ea25de0d)

# 解説
幅優先探索の容量でやる。
$\text{dist}[i]=i$個目のマスに行くときの最短手数。その段階で行けないときは$-1$。
遷移方法
$i$の__builtin_popcountを$e$と置く。
①$\text{dist}[i+e]=\text{dist}[i]+1(i+e\leq n)$
②$\text{dist}[i-e]=\text{dist}[i]+1(i-e>0)$
こんな感じでやれば行ける。
queueには高々$N$回しかpushされず、__builtin_popcountの計算量は$O(1)$。よって実行時間は$O(N)$。

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

int main(){
  int n;
  cin >> n;
  //dist[i]=移動手数
  //現段階で行けないときは-1
  vector<int> dist(n+1, -1);
  dist[1] = 1;
  queue<int> que;
  que.push(1);
  while(!que.empty()){
    int u = que.front();
    que.pop();
    //ここからは遷移
    //__builtin_popcount(u)=uの二進数の桁が1になっている数=__builtin_popcount
    //uから1手で行けるのはu+__builtin_popcountかu-__builtin_popcount
    if(u + __builtin_popcount(u) <= n && dist[u + __builtin_popcount(u)] == -1) {
      dist[u + __builtin_popcount(u)] = dist[u] + 1;
      que.push(u + __builtin_popcount(u));
    }
    if(u - __builtin_popcount(u) > 0 && dist[u - __builtin_popcount(u)] == -1) {
      dist[u - __builtin_popcount(u)] = dist[u] + 1;
      que.push(u - __builtin_popcount(u));
    }
  }
  cout << dist[n] << endl;
}
```
JITコンパイルしたPythonの関数をC言語から呼び出す

タイトル通りです。numba.cfuncを利用するとJITコンパイルした関数のアドレスが取れるので、それをC言語で書かれたライブラリの関数に渡します。

## C言語側
```C: sample.c
int apply(int (*callback)(int, int))
{
    return callback(1, 2);
}
```
Linuxであれば、これを
```bash
gcc -shared -fPIC -o libsample.so sample.c
```
でビルドして共有ライブラリを作ります。

## Python側
```python: main.py
from numba import cfunc
import ctypes

# ここではmain.pyとlibsample.soを同じディレクトリに置く想定
lib = ctypes.cdll.LoadLibrary("./libsample.so")
callbackType = ctypes.CFUNCTYPE(ctypes.c_int32, ctypes.c_int32, ctypes.c_int32) # (戻り値, 引数1, ...)
lib.apply.argtypes = (callbackType,)
lib.apply.restype = ctypes.c_int32

# この関数をCに渡す
@cfunc("int32 (int32, int32)")
def add(x, y):
    return x + y

if (__name__ == "__main__"):
    print(lib.apply(add.ctypes))
```
`main.py`を実行すれば、`add`関数が`apply`関数からコールバックされ、3と表示されます。

## 参考文献
https://numba.readthedocs.io/en/stable/user/cfunc.html

## 環境
Ubuntu 22.04 on WSL2（Windows11）
Python 3.10.12
Numba 0.60.0
GCC 11.4.0
PowerShellでCSVをJSONに変換する方法

## はじめに

こんにちは！今回は、PowerShellを使ってCSVファイルをJSONファイルに変換する方法をご紹介します。この方法は、データ形式の変換が必要な場合や、CSVデータをJSONを扱うアプリケーションで使用したい場合に非常に役立ちます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/c926bb27-00eb-4b49-8ed5-81ee1106d6e2.png)

## 準備

まず、変換したいCSVファイルがあることを確認してください。この例では、`data.csv`というファイル名を使用します。

### data.csvの例

以下のような内容の`data.csv`ファイルを用意したと仮定しましょう：

```csv
Name,Age,City
John Doe,30,New York
Jane Smith,25,Los Angeles
Mike Johnson,35,Chicago
```

この CSV ファイルには、名前、年齢、都市の情報が含まれています。

## PowerShellスクリプト

以下のPowerShellスクリプトを使用して、CSVをJSONに変換できます：

```powershell
# CSVファイルを読み込む
$csvData = Import-Csv -Path "data.csv"

# CSVデータをJSON形式に変換
$jsonData = $csvData | ConvertTo-Json

# JSONデータをファイルに出力
$jsonData | Out-File "output.json" -Encoding UTF8
```

## スクリプトの説明

1. `Import-Csv` コマンドレットを使用して、CSVファイルを読み込みます。
2. `ConvertTo-Json` コマンドレットを使用して、CSVデータをJSON形式に変換します。
3. `Out-File` コマンドレットを使用して、変換されたJSONデータをファイルに出力します。

## 使用方法

1. 上記のスクリプトを `convert_csv_to_json.ps1` のような名前で保存します。
2. PowerShellを開き、スクリプトが保存されているディレクトリに移動します。
3. 以下のコマンドを実行してスクリプトを実行します：

```powershell
.\convert_csv_to_json.ps1
```

4. スクリプトが実行されると、同じディレクトリに `output.json` ファイルが作成されます。

### 変換結果の例

上記の`data.csv`を変換すると、以下のような`output.json`ファイルが生成されます：

```json
[
  {
    "Name": "John Doe",
    "Age": "30",
    "City": "New York"
  },
  {
    "Name": "Jane Smith",
    "Age": "25",
    "City": "Los Angeles"
  },
  {
    "Name": "Mike Johnson",
    "Age": "35",
    "City": "Chicago"
  }
]
```

## 注意点

- CSVファイルのエンコーディングが UTF-8 でない場合は、`Import-Csv` コマンドレットに `-Encoding` パラメータを追加して適切なエンコーディングを指定してください。
- 大きなCSVファイルを処理する場合は、メモリ使用量に注意してください。必要に応じて、データを分割して処理することをお勧めします。

## まとめ

このように、PowerShellを使用してCSVファイルをJSONファイルに簡単に変換できます。この方法は、データ形式の変換が必要な場合や、異なるシステム間でデータを移行する際に非常に便利です。

実際のCSVデータ例とその変換結果を見ることで、プロセスがより明確になったと思います。ぜひ自分のデータで試してみてください！

質問やフィードバックがあれば、コメントでお知らせください。
【GAS覚書き】トークンなどのセキュアな情報はプロパティサービスに記載する

# 初めに
GASと外部のサービスを連携する際トークンを用いてることが少なくないと思います。その際、トークンをコードにはベタ書きしたくないですよね。その際には、プロパティサービスを用いましょう。

# プロパティサービスとは
プロパティサービスとは、ユーザ情報やセキュアな情報などをプロパティとして保持しておくためのサービスるです。データはキーと紐づけて保存しておき、GAS上でキーを指定して呼び出すことができます。

プロパティサービスには以下の3種類があり、用途に応じて使い分けることができます。

| 種類 | 説明 |
|:-:|:-:|
|ユーザプロパティ|ユーザに紐づく情報を保持する|
|スクリプトプロパティ|スクリプトに紐づく情報を保持する|
|ドキュメントプロパティ|ドキュメントに紐づく情報を保持する|

# 実際に書いてみた
今回はスクリプトプロパティを用いて、セキュアな情報を保持してみましょう。

まずは、適当なGASファイルを作成し、左側にあるプロジェクトの設定（歯車マーク）を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/2fbff849-5046-1818-472f-5d4d92566133.png)


下のほうに「スクリプトプロパティ」があるので、「スクリプトプロパティを追加」からプロパティを追加しましょう。
任意のプロパティを追加したら「スクリプトプロパティを保存」を押しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/2b22e023-c4ed-7f75-7e1d-4a759d2dc515.png)

それでは、追加したプロパティを呼び出してみましょう。
`PropertiesService.getScriptProperties().getProperty("KEY値")`で呼び出すことができます。
今回は以下のようなコードを作成しました。

```
function helloWorld() {
  Logger.log(PropertiesService.getScriptProperties().getProperty("TEST"));
}
```

実行したところ、プロパティを取得することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/cbc4988e-0c14-ff0b-84c2-799697dbd650.png)


# 終わりに
今回はGASでプロパティサービスを取得する方法を解説しました。
GASは簡単にデプロイでき、外部サービスとの接続もしやすいので、トークンなどの情報を使う機会もあると思います。
その際は是非プロパティサービスを利用してセキュアな情報を保存するようにしましょう。

ここまでご覧いただきありがとうございました！

参考
* https://qiita.com/massa-potato/items/2209ff367d65c5dd6181
*
MailHogをDockerでセットアップする方法

こんばんは。

今日は「MailHogをDockerでセットアップする方法」について説明します。

MailHogは、開発環境で使用される簡単なメールキャッチャーです。MailHogをDockerでセットアップする手順を以下に示します。

# Dockerインストール確認:
Dockerがインストールされていることを確認します。インストールされていない場合は、公式サイトからインストールしてください。

- [Docker公式サイト](https://www.docker.com/ja-jp/)

# Docker Composeファイル作成:
プロジェクトディレクトリに`docker-compose.yml`ファイルを作成します。以下はMailHogをセットアップするための例です：

```yaml
version: '3'
services:
  mailhog:
    image: mailhog/mailhog
    container_name: mailhog
    ports:
      - "1025:1025"   # SMTPサーバー
      - "8025:8025"   # Web UI

```

# MailHogの起動:
ターミナルを開き、docker-compose.ymlファイルがあるディレクトリに移動して、以下のコマンドを実行します：

```terminal
docker-compose up -d
```

-dオプションを使用すると、バックグラウンドでコンテナが実行されます。

# MailHogの使用:

MailHogが正しく起動したら、次のURLにアクセスしてWeb UIを確認できます：

[http://localhost:8025](http://localhost:8025)

SMTPサーバーとしては、ホストlocalhostとポート1025を使用します。

# 追加設定（オプション）

- 環境変数の設定:
必要に応じて環境変数を設定できます。例えば、パスワード認証を追加したい場合：

```yaml
version: '3'
services:
  mailhog:
    image: mailhog/mailhog
    container_name: mailhog
    ports:
      - "1025:1025"
      - "8025:8025"
    environment:
      MH_AUTH_FILE: "/path/to/auth/file"
```

- ボリュームの設定:
MailHogの設定やデータを永続化したい場合、ボリュームを設定します：

```yaml
version: '3'
services:
  mailhog:
    image: mailhog/mailhog
    container_name: mailhog
    ports:
      - "1025:1025"
      - "8025:8025"
    volumes:
      - mailhog-data:/data

volumes:
  mailhog-data:
```

この手順に従って、MailHogをDocker環境で簡単にセットアップし、開発環境でメールの送信テストを行うことができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
C_TS452_2021 - SAP Certified Application Associate - SAP S/4HANA Sourcing and Procurement対策（14/100）

【14日目】
トピック2：供給元（3/8）

≪問題14≫
購買部門は分納契約の使用に関心を持っています。リリース発注登録プロファイルに関して購買部門と共有できる有効な情報はどれですか。

（３つ選択）
▢リリース発注登録プロファイルは仕入先マスタデータに入力できる。
▢リリース発注登録プロファイルにより分納契約納入日程行の登録がトリガされる。
▢リリース発注登録プロファイルでは納入日程の計画数量の集計が制御される。
▢リリース発注登録プロファイルでは納入日程登録の周期が制御される。
▢リリース発注登録プロファイルは購買情報に入力できる。

≪解答≫
█リリース発注登録プロファイルは仕入先マスタデータに入力できる。
▢リリース発注登録プロファイルにより分納契約納入日程行の登録がトリガされる。
█リリース発注登録プロファイルでは納入日程の計画数量の集計が制御される。
█リリース発注登録プロファイルでは納入日程登録の周期が制御される。
▢リリース発注登録プロファイルは購買情報に入力できる。

≪解説≫
◆リリース伝票ありの分納契約では、リリース伝票登録プロファイルが使用されます。このプロファイルを利用することで、分納契約リリースを登録するための基準を設定し、仕入先に送信する数量や納入日時を管理できます。
◆仕入先マスタレコードにリリース登録プロファイルが指定されている場合、そのプロファイルは該当の仕入先とプラントの分納契約明細に自動的に適用されます。一方で、仕入先マスタに登録プロファイルが入力されていない場合は、分納契約明細の追加データに手動で入力することも可能です。
◆登録プロファイルはプラント固有です。プロファイルを初期設定として保存する場合、該当するプラントの追加購買データに入力します。
◆仕入先にリリースを送信する頻度や条件を設定することで、分納契約に基づいてリリースが生成されます。リリース登録周期を設定することで、リリースを生成し送信する間隔（例：日次や週次）を決定でき、同時にリリース期間も定義します。これにより、計画に必要な日付と数量のみを仕入先に通知することが可能です。
◆登録プロファイルでは、分納契約リリース登録以降の数量集計方法も管理します。計画数量集計によって、分納契約明細の計画数量が統合される期間を指定することができます。
SAP S/4HANA 2023の保守期限と関連ノート

## 3307222 - SAP S/4HANA 2023: リリース情報ノート
引用：SAP S/4HANA 2023 の保守期間は 2030 年 12 月 31 日までです。

## 関連ノート
### 52505 - メインストリーム・メンテナンス/有償保守期間後のサポート
### 2900388 - 2040 年までの SAP S/4HANA 保守のコミットメント
### 3354958 - SAP S/4HANA Cloud, private edition および SAP S/4HANA on-premise - サポートパッケージのスケジュールに関する一般情報
【備忘録】react-dropzoneを使ってドロップされた画像をプレビュー画像として表示する

# はじめに
**react-dropzone** を使ってドロップされた画像をプレビュー画像として表示する実装の **備忘録** です。

# 実装例
```ts
"use client"
import Image from "next/image";
import { useState } from "react";
import { useDropzone } from "react-dropzone"
import { toast, ToastContainer } from "react-toastify";

import "react-toastify/dist/ReactToastify.css";

export function ImageDragAndDropZone() {
  const [ previewImage, setPreviewImage ]  = useState<string>();

  const onDrop = (files: File[]) => {
    if (files.length !== 1) {
      toast.error("画像は一つしかアップロード出来ません。", {
        theme: "colored",
        autoClose: 2000
      });
      return;
    }

    const droppedImage = files[0];

    // アップロードされた画像をstateで保持する
    const reader = new FileReader();

    reader.readAsDataURL(droppedImage);
    reader.onload = () => {
      setPreviewImage(reader.result as string);
    }
  }

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <>
      <ToastContainer />
      <div {...getRootProps()} className={ isDragActive ?
        "border-2 border-dotted rounded-lg border-red-400 h-3/6" :
        "border-2 border-dotted rounded-lg border-gray-300 h-3/6"}>
          { previewImage &&
            <Image
              src={previewImage!}
              alt="プレビュー画像" 
              width={9999}
              height={9999} 
              className="h-full object-contain"
            /> }
        <input {...getInputProps()} />
        { !previewImage && ( 
          <p className={ isDragActive ?
          "text-gray-600 flex justify-center items-center h-full text-center" : "text-gray-400 flex justify-center items-center h-full text-center"
        }>ここにアップロードしたい画像をドラッグ&ドロップしてください。</p> )}
      </div>
    </>
  )
}
```

# stateで保持する部分
```ts
const reader = new FileReader();

reader.readAsDataURL(droppedImage);
reader.onload = () => {
    setPreviewImage(reader.result as string);
}
```
・Fileオブジェクトを``reader.readAsDataURL(droppedImage);``で文字列に変換しています。
・``setPreviewImage(reader.result as string);`` でstateに保存しています。

# 保持されたstateを画像として描画する部分
```tsx
{ previewImage &&
    <Image
        src={previewImage!}
        alt="プレビュー画像" 
        width={9999}
        height={9999} 
        className="h-full object-contain"
    /> 
}
```
robloxでassistant その134

# 概要
robloxでassistantやってみた。
練習問題やってみた。

# 練習問題
pluginを書け。

# 手順
- ReplicatedStrageに、Scriptを追加。
- スクリプトを書く。
- ローカルプラグインとして保存します。
```
local PluginBar = plugin:CreateToolbar("creator")
local Button1 = PluginBar:CreateButton("creator", "Create new part", "rbxassetid://14978048121", "Create")

Button1.Click:Connect(function()
	local part = Instance.new("Part")
	part.Name = "box"
	part.Parent = game.Workspace
	part.CFrame = CFrame.new(0, 10, 0)
	print("ok")
end)

```


# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fc9268b3-78d0-f27f-b026-b94e24bf53e6.png)


以上。
23歳文系卒が『Reactの書けるUI/UXデザイナー』を本気で目指す

# 自己紹介
初めまして。[Yuka-Tsujimoto](https://qiita.com/Yuka-Tsujimoto)です。
現在は通信企業の運用/保守エンジニアとして働き、今年で2年目になります！

まず初めに、私の自己紹介をさせてください。

**経歴**
- 2019年03月 美術高校卒業
- 2023年03月 私立文系大学経済学部卒業
- 2023年04月 通信会社入社
- 2023月08月 運用/保守エンジニアとして本務着任
- 2023年10月 WebサービスのUI/UXデザイナーとして兼務開始

**私について**
- 小学生の頃から、絵とデザインが大好き
- 入社まで、プログラミングほぼ未経験
- 研修中はcdコマンドから分からず、Gitで何度もやらかす
- Chat-GPTや最新技術、AIが大好き

今までの人生、自分の興味のままに進路を大きく変え続けてきました。
が、全ては**絵とデザインが大好き**という考えを軸に、生きてきました！

この記事では、**『Reactの書けるUI/UXデザイナーになること』** を最終目標に
導入として、**私の現状、課題、理想、これからの目標**について語ります。

**ぜひ、似た境遇・目標を持つ仲間や先輩・後輩に出会えたらなと思います！**
**さらに、この記事が誰かのモチベ・参考になれば嬉しいです！**

# なぜ文系からエンジニアを選んだのか？
結論から言うと、
**リモートワーク、スーパーフレックス可能な職種が良かったから**
**WebやアプリのUI/UXデザイナーに興味があったから** です。

- 移動時間を短縮して、自己啓発に使いたかった
- メリハリを大切に、自分のペースで仕事がしたかった
- 目に見える成果や、ものを作ることが好きだった
- 自分の得意な絵/デザインを仕事にしたかった
- 自分のスキルが活かせそうな、UI/UXデザイナーに興味があった
など...

色々悩んだ結果として、**エンジニアとしての道**を選びました。
詳しい経緯・理由については、また改めてどこかでお話しできればなと思います。

# 私の現状
2023年04月に通信会社へ新卒エンジニアとして入社しました。
働いて2年目になる私の現状ですが、以下になります。

#### 仕事
- 【本務：8割】バックエンドの運用/保守エンジニア
- 【兼務：2割】UI/UXデザイナー＋たまーに機能開発の練習
#### スキル
- Linax（本務の障害調査にて使用）
    - 保守業務で使用する、基本コマンドは打てる
- JavaScript（本務の自動化に使用）
    - GASにてトレンドチェックや判定ツールが作成できる
- Figma（兼務のUIデザインに使用）
    - コンポーネント、インスタンス作れる
- HTML/CSS（兼務の機能開発に使用）
    - 簡単なサイトは作れるが、実装は遅め
- React（兼務の機能開発に使用）
    - 最近着手し始め、早くも躓きかけている
    - 誰かに頼りながらゆっくり実装している

# 理想とのギャップに悩む日々
現状からも分かる通り、私の初めての本配属は
希望と異なる**バックエンドの運用/保守エンジニア**でした。

どうしてもフロントエンドのUI/UXデザインがしたくて、
兼務を始めたものの自分のプログラミングスキルの足りなさから
提案したデザインを外注や開発担当に頼んで実装して貰ったり、
**思い描いていた理想とは違った働き方**をしていました。

誰か頼みではなく、自分の力で実装したい！技術力を付けたい！
**現状を変えていきたいと本気で考えました。**

# JISOUとの出会い
 Udemyのような座学ではなく、より実践的にReactの知識をつけていきたい…！
 そう考えていたある日 **[JISOU](https://projisou.jp/)**  というサービスに出会いました。


- 経験者専門プログラミングコーチング
- アウトプット中心の授業
- React中心の学習

カリキュラムを見て、**「ここで学習していきたい！」** 直感でそう感じました。

# 将来なりたい姿
JISOUで学習を始める前に、将来私が目指す理想像を書いておきます！
#### 仕事
- **【本務：10割】** UI/UXデザイナー＋**機能開発まで可能**
#### スキル
- Figma
    - コンポーネント、インスタンス作れる
    - **プロトタイプ機能をアニメーションを作れる**
- HTML/CSS
    - 簡単なサイトは作れる
    - **複雑なHTML/CSSも実装できる**
- React
    - **自分のデザインした機能をそのまま実現できる**
    - **１人で実装できるまでにスキルを伸ばしたい**
# まとめ
長くなりましたが、この記事では
**『Reactの書けるUI/UXデザイナーになること』** を最終目標に
導入として、**私の現状、課題、理想、これからの目標**について語りました。

文系卒未経験エンジニアが **自分の理想のデザインを形にできる**まで
どれくらいの期間が必要なのか、現状分からないことばかりですが...

**なるべく最短！** を目指して、
これから **JISOU** にて頑張っていこうと思います！

この記事が誰かのモチベ・参考になることを祈って、
これから頑張っていきましょう！
【React】React Error Boundaryでコンポーネントのエラーハンドリングをする方法

こんにちは。Naotoです。
今回は、Reactアプリケーションでのエラーハンドリングの１種である、React Error Boundaryについて紹介したいと思います。

## React Error Boundaryとは？
React Error Boundaryは、Reactアプリケーションにおいて、子コンポーネントで発生するエラーをキャッチし、フォールバックUIを表示するための機能です。

コンポーネント単位でフォールバックUIを表示できるため、以下のように、エラーが発生したコンポーネント以外の部分は通常通り表示することができます。

↓イメージ（通常時は、左下部分にはTask Listが表示される。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/b84c8abb-04d1-b8b5-37ed-d57816ae2478.png)

上記のようにTask Listコンポーネント部分だけをフォールバックUIに書き換えることができます。）

## 実装方法

それでは、実装方法を説明します。
### ErrorBoundaryクラスコンポーネントの作成

ErrorBoundaryは、クラスコンポーネントでしか作成できません。

```tsx
import React, { Component, ReactNode, ErrorInfo } from "react";


interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    // エラーの状態をStateで管理
    this.state = { hasError: false };
  }

// 子孫コンポーネントでエラーが発生した際に呼び出される
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    // エラーステートを更新してフォールバックUIを表示
    return { hasError: true };
  }

// 子孫コンポーネントでエラーが発生した際に呼び出される
// getDerivedStateFromErrorと違って、エラー情報の取得と副作用の実行ができる。
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("ErrorBoundary caught an error", error, errorInfo);
    // ここで副作用の実行ができる
  }

  render() {
    if (this.state.hasError) {
    // フォールバックUI
      return (
        <h1 className="text-red-700 font-bold">
          An error has occurred. Please refresh the page.
        </h1>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

```

### ErrorBoundaryクラスコンポーネントの使用

以下は、冒頭のイメージ画像の、TaskListとTaskDetail部分のJSXです。
```tsx
<div className="xl:flex xl:gap-8">
    {/* Task List画面 */}
    <ErrorBoundary>
          <TaskList />
    </ErrorBoundary>
    {/* Task Detail画面 */}
    <ErrorBoundary>
          <TaskDetail />
    </ErrorBoundary>
</div>
```
上記のようにErrorBoundaryコンポーネントで囲うことで、ページ全体でのエラー表示でなく、エラーが発生したコンポーネント部分の画面のみにフォールバックUIを表示することができます。

つまり、アプリケーションの動きをストップさせずにユーザーへエラーを伝えることができます。

## 注意点
コンポーネント単位でエラーを表示できるReact Error Boundaryですが、以下のエラーについては検知することができません。

・イベントハンドラー
・非同期処理
・サーバーサイドレンダリング
など

上記エラーも検知したい場合は、react-error-boundaryというパッケージを使用する必要があります。
（react-error-boundaryを使っても、サーバーサイドレンダリングには確か対応できない。。。）

react-error-bounaryについては、後日記事にしたいと思います。

## まとめ
React Error Boundaryを使用することで、Reactアプリケーションの特定の部分でエラーが発生した場合でも、他の部分は通常通り表示され続けるため、ユーザーにより良い体験を提供することができます。

アプリケーション全体の信頼性を向上させるために非常に有効です。

ぜひ皆さんも使ってみてください！！！

<br>
最後までお読みいただき、ありがとうございました！！！
大学入試問題文?集（第10巻）数学問題文の中の文字「...次の問に」を調査したい。「次の問いに」じゃない。（調査中）

・「**...次の問に**」と「**...次の問いに**」
・「**...次の問に**」が問題文の基本仕様の大学もあります。
・公式ホームページの最終チェックをしていません。

・一大学ずつサイト内検索しています。
・ChatGPT先生にやってもらえないかな。
・一括ダウンロードして、ローカルで検索した方が早いかも。

# 調査方法
・「大学入試数学問題集成」様のサイトの「サイト内検索」で、
　"○○大学" "の問に"
　検索結果の年度より、最新年度を調べる。
・調査順番は任意。

# 調査結果

### 静岡大学
"静岡大学" "の問に"
？？2018　静岡大学　後期MathJax
https://mathexamtest.web.fc2.com/2018/201810461/2018104610200mj.html
【１】"の問に"
【２】"の問いに"

### 山梨大学
"山梨大学" "の問に"
？？2023　山梨大学　総合型選抜工（コンピュータ理工学科）学部MathJax
https://mathexamtest.web.fc2.com/2023/202310401/2023104010300mj.html
【１】"の問に"
公式ホームページ ＞ 令和6年度	令和5年度	令和4年度
https://www.yamanashi.ac.jp/admission/293

### 信州大学
"信州大学" "の問に"
？？2007　信州大学　前期　教育学部MathJax
https://mathexamtest.web.fc2.com/2007/200710421/2007104210100mj.html
【１】"の問に"
【２】"の問いに"

### 岐阜大学
"岐阜大学" "の問に"
"岐阜大学" "の問いに"
○"の問に" 問題文の基本仕様　○"の問いに" 無し
https://mathexamtest.web.fc2.com/daigakubetumj/10441index.html

### 三重大学
""三重大学 "の問に"
2021　三重大学　後期生物資源学部
https://mathexamtest.web.fc2.com/2021/202110501/2021105010300.html
【１】"の問に"
【３】"の問いに"

### 京都府立大
"京都府立大" "の問に"
○"の問いに" 問題文の基本仕様
https://mathexamtest.web.fc2.com/daigakubetumj/11546index.html

### 大阪公立大
"大阪公立大" "の問に"
"の問いに" 問題文の基本仕様
https://mathexamtest.web.fc2.com/daigakubetumj/11562index.html

### 神戸大学　
"神戸大学" "の問に"
○"の問に" 問題文の基本仕様　○"の問いに" 無し 2024年版
2013　神戸大学　前期MathJax
【１】　"の問いに" 
https://mathexamtest.web.fc2.com/2013/201310601/2013106010100mj.html

### 島根大学
"島根大学" "の問に"
2020　島根大学　推薦I総合理工（知能情報デザイン学科）学部【１】
https://mathexamtest.web.fc2.com/2020/202010681/2020106810500.html#top-0502

### 広島市立大学
"広島市立大学" "の問に"
"の問いに" 問題文の基本仕様
https://mathexamtest.web.fc2.com/daigakubetumj/11735index.html

### 鳴門教育大 
"鳴門教育大" "の問に"
"の問いに" 問題文の基本仕様
https://mathexamtest.web.fc2.com/daigakubetumj/10762index.html

### 九州工業大学
"九州工業大学" "の問に"
"の問いに" 問題文の基本仕様
https://mathexamtest.web.fc2.com/daigakubetumj/10848index.html#y2023

### 福岡女子大学
"福岡女子大学" "の問に"
上が基本仕様

"福岡女子大学" "の問いに"
2012　福岡女子大学　前期MathJax
https://mathexamtest.web.fc2.com/2012/201211851/2012118510100mj.html

### 佐賀大学 
"佐賀大学" "の問に"
2023　佐賀大学　前期
https://mathexamtest.web.fc2.com/2023/202310861/2023108610100.html

"佐賀大学" "の問いに"
2009　佐賀大学　前期
https://mathexamtest.web.fc2.com/2009/200910861/2009108610100.
html


# 調査中の感想
・カコはカコとして、興味のある？大学もありますが、
　使いまわし？又は、きっちりチェック？しておられる大学もあるようです。
・今年話題の大学は、見ていません。

# 参考

https://kamelink.com/exam/index.php?%C2%E7%B3%D8%C8%AF%A4%CE%B2%E1%B5%EE%CC%E4%BE%F0%CA%F3
SQL に C# のコードを書いて実行する

# はじめに

こんな感じの SQL を書いて、、、

```sql
select
	*
from
	persons
where
	true = true
--# if (@name is not null) {
	and name like /*@name*/
--# }
--# if (@age is not null) {
	and age = /*@age*/
--# }
;
```

こんな感じのインターフェースを書いたら、、、

```csharp
[Dao]
public interface IPersonDao
{
	List<Person> Search(string? name, int? age);
}
```

こんな感じで実行できます。

```csharp
List<Person> persons = personDao.Search(name, age);
```

というライブラリを開発しています。
名前を NDao と言い、個人で開発しているアプリケーションのために作りました。
需要があるかは分かりませんが、一人だけで使うのも変な気がしてきましたので、一般公開する事にしました。
よろしければお試しください。


# NDao とは

> NDao は Dao (Data Access Object) を生成して実行するライブラリです。
> ユーザーは Dao インターフェースを通してデータベースを操作しますが、その実装を作成する必要はありません。
> NDao が Dao の実装を提供します。

どういう仕組みかと言いますと、Roslyn の Source Generator を使って、SQL を実行するのに必要な処理を自動生成しているわけです。

実行時に SQL ファイルを読み取るのではなく、ビルド時に読み取って C# のソースコードを生成していますので、パフォーマンスも有利ですし、エラーをビルド時に発見する事もできます。

誰でも思いつくような仕組みですが、意外とそういった製品は見つからず、自分で開発する事にしました。


# 特徴

> NDao は下記の特徴を持っています。
> * SQL ファイルを簡単に実行する仕組みを提供
> * SQL ファイルに C# コードを埋め込む事が可能
> * 動的な SQL を作成する事が可能
> * 2 Way SQL を作成する事が可能
> * ビルド時に SQL 内の C# コードやパラメーターを簡易的にチェックする事が可能
> * CRUD 用の API を提供
> * SQL のロギングを提供
> * EF Core のマイグレーション機能と併用する事が可能

「EF Core でマイグレーションはしたいけど SQL は自分で書きたい」という方や、「2 Way SQL やりたいよ」という方には興味を持って頂けると思います。

まだ実績がないので、おもちゃにしか見られないかもしれませんが、これから自分の開発で実務に耐えられるような製品に育てていきたいと思います。


# 参考

## ドキュメント

詳しくは下記のリポジトリにまとめていくつもりですが、もう少し気楽に読める記事があっても良いかと思いましたので、それは Qiita 様の方に少しずつ投稿させて頂こうと思います。

https://github.com/n-d-a-o/ndao-docs

## サンプル

サンプルプログラムも下記のリポジトリにありますので、よろしければお試しください。
データベースには SQLite を使用しており、設定なしですぐに実行できます。

https://github.com/n-d-a-o/ndao-examples

以上でございます。
LinuCレベル1 101試験勉強会 2024 夏期講座（キックオフ）

（↑タイトルの通り）に、登壇参加してきたので、そのお話です。

## オープニング
LinuC試験の全体とこの後の流れのお話。特に書く事はないです。

## LinuC Open Network特別公演
私が話している時間のため、書いている余裕がなく。
スライドは公開できないのですが、アーカイブ視聴ができるのでそちらからご確認いただく流れになると思います。
かなり文字文字しているスライドということもあり、後で読んでね、とさせていただきました。案の定、時間ギリギリいっぱいまでお話しさせていただくことになりました

現地で座談会用にセッティングしていたのですが、この間に繋いでいた司会の方のトークが光りますね！

## LinuC合格者によるトークセッション
三名の現場エンジニアの方からの現場トーク。

中西氏・松本氏・山口氏のそれぞれのキャリアが異なるところからの座談会なので聞き応えありますね。
結構えぐい案件もおありのことで、聞いている分には興味深いし面白かったです。

また、LinuC試験の概要も含め結構重要な話があったので、ここはぜひ聞いておいてほしい！

### LinuCを受けた理由
- 基本情報よりLinuxの方が難しそう、という観点は確かに面白い！
  - あえて周囲との差別化を測ろうとする動きができる人は伸びますね。
- また、LPICはすでに持っていた（かつ、失効してしまった）ので、LinuCに挑戦したということもある、と。これも良い取り組み！

### AWSを受ける前にLinuCを受けようとされている理由
- 車の動きから考える。AWSは使い方を、LinuCは仕組みを知るものという位置付けと理解した。
- クラウドファースト（特にAWSに注目するならベンダー資格）であるため、Linuxの基礎知識を学べるわけではないよ

### 受験までのモチベーション
- 1年かかった。問題集を開くよりはコンピュータの仕組みなどを学んでから改めてやってみると景色が変わる
- 教材の話。教科書＋問題集のセットがあったのでそれらも使った
- 結局手を動かすのが早い。自分で仮想環境を作ってやった

### LinuC取得後どうなった？
- エンジニアとの会話が分からない。質問をしたけど、その答えもわからない。先に自分に知識をつけるのが大事
- 登壇者として想いを語る事ができるようになる

## LinuCレベル1合格教本の著者に聞く、本書活用のポイント
本日のメインセッション、だと私は思ってます。
LinuCの試験ではなく、合格教本のポイントになることを留意する。

目的： 宣伝。執筆者だとそりゃそうだよね。多分悔しさで今日の内容があると思われる（決めつけ）

### 触りながら学習できる構成
- 資格をとっても技術がないと困るよね
- 暗記しなくても良いような構成（演習を多くした）。同じような内容でも繰り返し実行できる
- 場所を選ばない。特にインターネット環境の有無にこだわらない仕組み

### 改訂に至った理由
- CentOS7のサポートが終わったから
  - AlmaLinux9（Linux標準教科書と同じ）
  - Debian12

`inetd`なんかがわかりやすいか。

### manコマンドが使えない！
未知のコマンドが出てきたら検索して調べる派ではあるが、標準マニュアルを読むべきだよね、は確かにそう。
正直、manコマンドの説明では分かりにくいので改善されることに期待したい。

## 質疑応答
### Q. 大学などで勉強してこなかったので、事前知識がないため苦労している。基礎知識はどうやって学んだのか？
複数の本を読んで比較しながら探る。一つの事柄を複数の教師（講師）から学ぶのが大事。
講師の説明は講師のフィルターがかかっている可能性が高いため。

いいね！これは私の立場（講師）からは悔しいがとても納得。そして、良い取り組み。

### Q. 最近ping-tで勉強しはじめた。知らない単語が多いのでどうしたら良いか？　ping-tだけで良いのか？
（効率的な学習方法を知りたい、という事だが雰囲気的には納得感がほしいのだと思う）
→私の方で解答差し上げました。他の人がどうやって学んでいるのかを知ってもらった方がいいと思いました。

ping-tだけに拘っていない。101試験だと使えるものは使った方がいい。

## 所感
この後、懇親会でどうぞ！
実際、懇親会で学んでほしい事があったな、と思ったので私からも誘導させてもらったところがある。
終始司会の方が頑張ってるなぁ、という印象があった。

（リアルタイムのため、まとめきっていないが書き漏らしはないはず）

## LinuCまとめ

キーワードは

- 仮想化技術
- クラウド
- ネットワーク

Linuxだけでなく、Linuxを使った運用やシステムの部分までやってほしい！
末文になったが、みなさんのLinuCレベル１認定が叶う事を祈願する。
プログラミング初心者必見！おすすめYoutube動画で学ぶ最新技術

どうもこんにちは、たくびー(@takubii)です！

今回は、最近プログラミングを学んだ動画について、そのまとめ兼備忘録をお届けします。この記事が、皆さんの学びの一助となれば幸いです。

## 参考にした動画

今回参考にしたのは、こちらの動画です：

https://www.youtube.com/watch?v=N_uNKAus0II

このチャンネルでは、主にフロントエンドのクローンアプリを開発しています。あなたが作りたいアプリが見つかるかもしれませんし、常に最新の技術スタックを使用しているので、トレンドを追うのにも最適です。

## 学んだ技術スタック

この動画では、以下の技術スタックを学ぶことができます：

- **Next.js**: サーバーサイドレンダリングと静的サイト生成が可能なReactフレームワーク
- **Hono**: 高性能なWebフレームワーク
- **Drizzle ORM**: データベースとのやり取りを簡素化するORM
- **shadcn/ui**: UIコンポーネントライブラリ
- **Tanstack**: 高度な状態管理ライブラリ
- **Zod**: 型安全なスキーマ定義ライブラリ
- **Zustand**: 軽量な状態管理ライブラリ
- **TypeScript**: 型安全なJavaScript
- **Clerk**: 認証管理ライブラリ
- **Neon DB**: 高性能なデータベース

## おすすめのポイント

1. **ハンズオン形式**: 実際に手を動かしながら進めるので、ステップバイステップで理解が深まります。
2. **公式ドキュメント参照**: 必要に応じて公式ドキュメントを参照するため、フレームワークやライブラリの情報収集方法が身に付きます。
3. **フルスタック開発**: フロントエンドとバックエンドの両方をカバーしているので、Web全般の知識を深めることができます。
4. **最新技術の習得**: 常に最新の技術を使っているため、今後のプロジェクトにも役立つ知識が得られます。
5. **コミュニティサポート**: 動画作成者が定期的に質問に答えてくれるので、疑問点を解消しやすいです。

## 作成できるアプリケーション

以下の画像は、今回の動画を参考に作成したアプリケーションのスクリーンショットです：

![スクリーンショット 2024-07-19 194442.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557065/47a13d4e-45c0-850c-0b0f-5ede6177bd17.png)


この家計簿アプリは、収入と支出を管理し、グラフで視覚的に表示する機能を持っています。このクオリティのアプリケーションを1から作れることは大きな自信につながります。ぜひ挑戦してみてください。

### 作成プロセスの詳細

1. **プロジェクトセットアップ**: 初めに、Next.jsをベースにプロジェクトをセットアップします。
2. **フロントエンド開発**: shadcn/uiやTanstackを使って、直感的で使いやすいインターフェースを構築します。
3. **バックエンド構築**: HonoとDrizzle ORMを使って、データベースとの連携をスムーズに行います。
4. **認証機能**: Clerkを導入して、安全なユーザー認証機能を実装します。
5. **デプロイ**: Neon DBとVercelを使用して、アプリケーションを本番環境にデプロイします。

## まとめ

今回作成したプロジェクトは、以下のGitHubリポジトリで公開しています：

https://github.com/takubii/nextjs-finance-demo

また、実際に動作を確認できるように、Vercelにデプロイも行いました：

https://nextjs-finance-demo.vercel.app/

この機会に、ぜひ動画を通してプログラミングを学んでみてください。新しい知識とスキルを得られること間違いなしです。

---

最後まで読んでいただき、ありがとうございました。質問やコメントがあれば、ぜひお気軽にお寄せください。また、今後も役立つ情報を発信していきますので、ぜひチャンネル登録やフォローをよろしくお願いします！
imagemagick.org  マニュアルのミラーリングの仕方

昨日(2024/7/18)頃から https://imagemagick.org/ にアクセス出来ず困ったので手元にミラーリングを構築しました。その時のメモ書きです。

試行錯誤してたまたま動いた怪しい方法です。
だいたいのリンクは動作しますが、archive(リリースファイル等)が別のようでこれは諦める事にします。
マニュアルを読む事が目的なので。

２つ方法があるようです。Usage が共通で、ImageMagick と Website に似たデータがあります。

# ImageMagick/www を元にする

全て静的な HTML なので github io 等に展開可能です。

## 手順

HTML 設定場所を ~/htdocs/ としてます。適宜読み替えて下さい。

```shell:
% git clone https://github.com/ImageMagick/ImageMagick
% git clone https://github.com/ImageMagick/Usage
% cp -r ImageMagick/www ~/htdocs/.
% cp -r ImageMagick/images ~/htdocs/.
% cp -r Usage ~/htdocs/.
```
これで www にアクセスするとページが表示できます。

## 実例

実際に構築したサイトの例です。

- https://yoya.github.io/ImageMagick/www/
![スクリーンショット 2024-07-20 12.33.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/3dc2788d-ef63-2d1d-9319-2d86cf419e02.png)

ダークモードっぽい見た目です。

# Website を元にする

<del>こちらの方が本家の見た目により近いのですが、</del>PHP が必要なので環境を選びそうです。

## 手順

こちらも HTML 設定場所を ~/htdocs/ としてます。適宜読み替えて下さい。

```shell:
% git clone https://github.com/ImageMagick/Website
% git clone https://github.com/ImageMagick/Usage
% cp -r WebSite/* ~/htdocs/.
% cp -r Usage ~/htdocs/.
```

リンクに直接 imagemagick.org が埋め込まれているので、ファイルの書き換えが必要です。

im.awm.jp のところをご自身のサイト名に書き換えて下さい。

```shell:
% cd ~/htdocs/
% for f in `grep -rlI http://imagemagick.org . `;
    do sed -i -e "s/imagemagick.org/im.awm.jp/g" $f;
  done
```

## 実例

実際に構築したサイトの例です。

- https://im.awm.jp/script/

![スクリーンショット 2024-07-20 12.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/df50a184-7cba-730a-ac4c-f0fe3952a51e.png)


# さいごに

自分みたいな怪しい人間のミラーリングより本家が直った方が良いので、ツイッターのメンションでサイトが落ちてる事は連絡済みです。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/ImageMagick?ref_src=twsrc%5Etfw">@ImageMagick</a> <br>hello. <a href="https://t.co/wqjXeabAYA">https://t.co/wqjXeabAYA</a> seems to have been down since yesterday. Is there a plan to bring it back up? <a href="https://t.co/sIk6ZT9eC5">https://t.co/sIk6ZT9eC5</a></p>&mdash; ＼助けよや／𝕏𝕐†😱†𝕐𝕏 (@yoya) <a href="https://twitter.com/yoya/status/1814099638250848263?ref_src=twsrc%5Etfw">July 19, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

公式マニュアルサイトの復活を心からお待ちしてます。 > https://imagemagick.org/

# 追記

先ほど公式サイトが復活しているの確認しました。

- https://imagemagick.org/index.php

script/index.php でなく index.php で微妙に違うのと、あと、
公式の方はダークモードっぽい見た目でした。

![スクリーンショット 2024-07-20 12.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/6d3fce83-c9b9-74be-5e40-cbcbcd4cd7ce.png)


Website のミラーの仕方間違えてるか、もしくは古いのか。。_(┐「ε:)_
HTML,CSS,Ruby,Railsなどの参考資料まとめ(自分用)

<h2>HTML</h2>
<h3>HTML辞典</h3>
→HTMLのデジタル辞書。わからなくなったらここから引く。

https://html-coding.co.jp/annex/dictionary/html/

<h2>CSS</h2>
<h3>・CSS辞典</h3>
→CSSのデジタル辞書。わからなくなったらここから引く。

https://html-coding.co.jp/annex/dictionary/css/


https://www.tagindex.com/stylesheet/properties/

<h2>Rails</h2>
<h3>・Railsガイド</h3>
→Railsのデジタル辞書。わからなくなったらここから引く。

https://railsguides.jp/
【PHP】正規表現でハッシュタグを抽出したい

### 環境
```
$ php -v
PHP 8.3.8 (cli) (built: Jun  4 2024 14:53:17) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.3.8, Copyright (c) Zend Technologies
    with Zend OPcache v8.3.8, Copyright (c), by Zend Technologies

$ php artisan --version
Laravel Framework 11.10.0
```

### 困ったこと
趣味で開発しているアプリでハッシュタグを扱いたい！となり、文章から正規表現でハッシュタグを抽出する処理を実装するにあたりたくさんのサイトを参考にさせていただきました。

例えばこんな感じ。
```php
$value = '#思い出　この本は図書館で大人気でした。　#ウォーリーを探せ　';
$matches = [];
preg_match_all(
    '/(?<=\s|^)#\S+/',
    $value,
    $matches
);
logger($matches[0]);
```

`#思い出`、`#ウォーリーを探せ`の2つが抽出されるのを期待しましたが、結果は以下の通り。

```
local.DEBUG: array (
  0 => '#思い出　この本は図書館で大人気でした。　#ウォーリーを探せ　',
)  
```

**あれれ〜？？**

そう、この文章には全角スペースが入っていたのでした。

```
'#思い出★この本は図書館で大人気でした。★#ウォーリーを探せ★'
```
★ ... 全角スペース

どうも全角スペースは空白文字として認識されないようです。

### 対応方法
`u`をつけます。
```php
$value = '#思い出　この本は図書館で大人気でした。　#ウォーリーを探せ　';
$matches = [];
preg_match_all(
    '/(?<=\s|^)#\S+/u',  // ←ここ
    $value,
    $matches
);
logger($matches[0]);
```

```
local.DEBUG: array (
  0 => '#思い出',
  1 => '#ウォーリーを探せ',
)  
```

これで万事OKだわ。

### 参考
https://scrapbox.io/arpla/%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E3%82%BF%E3%82%B0%E3%81%AB%E3%83%9E%E3%83%83%E3%83%81%E3%81%99%E3%82%8B%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE

https://qiita.com/takaram/items/b6beb524f80fd8eb2eed

### 余談
今回の対応にあたりいろいろと調べていたところ、「ハッシュタグとは半角スペースで区切られるものなので全角スペースが間にあってもそれは1つのタグとして扱うのだ」という宗派があることを知りました。
私は気持ち悪いので全角・半角問わずスペースがあったら区切りたい派です。

全角スペース許容派の方は敢えて`u`オプションを外すのもありかもしれませんね。
reselect と useMemo の使い分け

# Reselect vs useMemo 使い分けの実践ガイド

注意： この記事は claude3.5　で生成したメモです。

Reactアプリケーションのパフォーマンス最適化において、`reselect`ライブラリと`useMemo`フックは両方とも重要な役割を果たします。しかし、これらのツールをいつ、どのように使用すべきかを理解することは、効果的な最適化戦略を立てる上で重要です。この記事では、`reselect`と`useMemo`の特徴を比較し、それぞれの使用例を示しながら、適切な使い分け方を解説します。

## Reselectの特徴と使用例

Reselectは、Redux用に設計されたメモ化ライブラリですが、他の状態管理ソリューションでも使用できます。

### 特徴：
- セレクター自体がキャッシュを持つ
- 複雑な計算や大規模なステート選択に適している
- アプリケーション全体で再利用可能

### サンプルコード：

```javascript
import { createSelector } from 'reselect';

// 基本的なセレクター
const getTodos = state => state.todos;
const getFilter = state => state.filter;

// メモ化されたセレクター
const getVisibleTodos = createSelector(
  [getTodos, getFilter],
  (todos, filter) => {
    switch (filter) {
      case 'SHOW_COMPLETED':
        return todos.filter(todo => todo.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(todo => !todo.completed);
      default:
        return todos;
    }
  }
);

// 使用例
const mapStateToProps = state => ({
  todos: getVisibleTodos(state)
});
```

このコードでは、`getVisibleTodos`セレクターは`todos`と`filter`の状態が変更された場合にのみ再計算されます。それ以外の場合は、前回の計算結果がキャッシュから返されます。

## useMemoの特徴と使用例

`useMemo`はReactの組み込みフックで、コンポーネント内での計算結果のメモ化に使用されます。

### 特徴：
- コンポーネントスコープでメモ化を行う
- コンポーネントがアンマウントされると、メモ化されたデータも破棄される
- 追加のライブラリは不要

### サンプルコード：

```jsx
import React, { useMemo } from 'react';

const ExpensiveComponent = ({ data, filter }) => {
  const filteredData = useMemo(() => {
    console.log('Filtering data...');
    return data.filter(item => item.type === filter);
  }, [data, filter]);

  return (
    <ul>
      {filteredData.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
```

この例では、`data`または`filter`が変更された場合にのみ、`filteredData`が再計算されます。

## 使い分けの指針

1. **スコープとライフサイクル**:
   - アプリケーション全体で再利用する計算には`reselect`
   - コンポーネント固有の計算には`useMemo`

2. **パフォーマンスと管理**:
   - 複雑な計算や大規模なデータ処理には`reselect`
   - 比較的単純な計算や小規模なデータ処理には`useMemo`

3. **プロジェクトの方針**:
   - 外部ライブラリを最小限に抑えたい場合は`useMemo`
   - Reduxを使用しているプロジェクトでは`reselect`との相性が良い

4. **関数の再利用性**:
   - 純粋な関数として切り出し、必要に応じて`useMemo`や`reselect`でラップする

```javascript
// 純粋な関数
const filterTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(todo => todo.completed);
    case 'SHOW_ACTIVE':
      return todos.filter(todo => !todo.completed);
    default:
      return todos;
  }
};

// reselectでの使用
const getVisibleTodos = createSelector(
  [getTodos, getFilter],
  filterTodos
);

// useMemoでの使用
const visibleTodos = useMemo(() => filterTodos(todos, filter), [todos, filter]);
```

## まとめ

`reselect`と`useMemo`は両方とも有用なメモ化ツールですが、それぞれ異なる使用場面に適しています。アプリケーションの構造、パフォーマンスニーズ、そしてコードの管理しやすさを考慮して、適切なツールを選択することが重要です。最終的には、これらのツールを組み合わせて使用することで、Reactアプリケーションの最適なパフォーマンスを実現できるでしょう。
Qiita投稿100本目指します

# 決意
ここからの半年間で自分のマインドを変えて本気で学習していきます。
# 現状
普段はインターンをしている大学生3年生です。大学やインターンではプログラムを書いたりするのですが、何か1からアプリを作るとなるとどうしても手がとまってしまいます。
技術も何か1つの技術をつきつめているわけではなく、いろんな技術のチュートリアルをやってはまた違う技術をやってみるという最悪なパターンに陥ることが多いです笑
# 目標
- 短期
    毎日学習した内容を記事にして投稿すること
- 中期
    自分の大学で使ってもらえるようなサービスを作ること
- 長期
    メガベンチャー企業に就職すること

# 目標に向けてこれからどうするか
今後は**JISOU**というコーチングサービスを活用しながら、アウトプットを強く意識した学習を始めていきます。

今回は決意表明的な記事でしたが、今後は日々の開発で遭遇したエラーの解決や自分の学習した経験等をみなさんに記事で共有していければと思います。