OmniAICreator/Qiita-1.07M huggingface dataset:
React 19 Betaリリース！新HooksとAPIの機能紹介とサンプルコードで学ぶ使い方

## はじめに

4月の下旬に、React19のBeta版が公開されました！
React 19に関する紹介記事の中で、3つのHooksと1つのAPIが紹介されていたので、codesandboxでコードを作ってみました。

本記事では、それぞれどのように記述できるのかをサンプルコードと共に紹介していきたいと思います。  

実際に動かしてみたい場合はサンプルコードの右下に表示されているOpenSandboxを押す事でOpensandBox上で動いている様子を確認したり、コードを変更したりすることができますので、ぜひご活用ください。


## hooks : useTransition (async)
まず一つ目はstartTransitionです。  
このHooksはReact 18で新たに使える様になったHooksではあるものの、これまでは非同期で利用することはできないという制約がありましたが、React 19では非同期で利用する事ができる様になりました。

https://codesandbox.io/embed/2wyfl7?view=editor&module=%2Fsrc%2FUseTransitionSample.js&hidenavigation=1


## hooks : useActionState 
次はuseActionStateです。
useActionStateを使うと、return値にstateおよび値の更新中のステータス(isPending)を取得することができます。
これまでも同等の処理を実現したい場合はisPendingのStateを別途作り、処理の前後にそれぞれstateを更新することで比較的簡単に実現可能でしたが、このhooksを利用すると、より簡潔に記述することができる様になります。

https://codesandbox.io/embed/2wyfl7?view=editor+%2B+preview&module=%2Fsrc%2FUseActionStateSample.js

useActionStateの詳細はこちらです
https://react.dev/reference/react/useActionState


## useOptimistic
3つ目はuseOptimisticです。
その名の通り、optimistic（楽観処理）を行うためのhooksです。
このhooksはとても便利で、新規作成や更新処理などでサーバの値を更新しに行く際、結果を待つことなく更新後の値を表示することができます。これを利用することで、時間のかかる更新処理も一瞬で完了したかの様に見せUXの向上を測ることができます。
（最近のGoogleカレンダーはこれと同じ動きをしているので、更新が爆速に見えます）

https://codesandbox.io/embed/2wyfl7?view=editor+%2B+preview&module=%2Fsrc%2FUseOptimisticSample.js



UseOptimisticの詳細はこちらです
https://react.dev/reference/react/useOptimistic




## API :  use
最後はuse APIです。
use を使ってPromiseを返す関数を呼ぶと、そのPromiseがResolveされるまでの間、上位のSuspenseで指定されているfallbackが表示され、Promiseがresolveされると、関数でreturnされた値に置き替わります。
これを実現しようとすると、コンポーネントが増える度にstateが何個も増えてしまい、処理が複雑になりがちでしたが、useを使うことでコードがとても分かりやすくシンプルになります。

https://codesandbox.io/embed/2wyfl7?view=editor&module=%2Fsrc%2FUseSample.js&hidenavigation=1


use APIの詳細の説明はこちらにあります
https://react.dev/reference/react/use




## まとめ

本記事ではReact 19で新たに使える様にある、新たなHooksとAPIについて、サンプルコードと合わせて紹介しました。いずれの機能もこれまでにできなかったことを実現できるというより、よくある機能を実現するためにより簡潔に記述できる様にしたという類のものになりますが、これらを活用することにより、より開発の効率を上げたりソースの可読性を向上させたりすることができる様になると思いますので、しっかりと理解をして活用をしていきたいと思います。

まだ現時点ではベータ版ですが、まもなくリリースされるという噂もありますので、リリースしたらすぐに使える様にしっかり予習しておきましょう！
https://towardsdev.com/exciting-innovations-in-react-version-19-a-sneak-peek-into-the-future-6460d7637de3


## 参考文献
### React19 What's new
https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19
【PyCaret】setup()関数実行時のエラーについて

# エラーの内容　と　対処方法
PyCaretのsetup()関数を実行すると、下記メッセージのエラーが発生した。

```Python
'FastMemorizedFunc' object has no attribute '_get_output_identifiers'
```
GPTによると、
PyCaret またはその依存パッケージの一部が古いバージョンであり、互換性の問題が発生している可能性があり、特に、<strong>joblib</strong>や関連するキャッシュ/メモリゼーション機能を使用するライブラリに関連する問題かもしれません。
とのこと。

:::note info
対応方法

```Python
# Pycaretのバージョン
Version: 3.3.2 Pycaret

# 1.4.2だったのを、1.3.2にする
!pip install joblib==1.3.2
```
:::

ちなみにjoblibは、シンプルな並列処理を実行するためのライブラリとのことです💡


# 対処の参考にしたページ
こちらのやり取りを見ると、最後の方に解決法が記載されています。
ありがとう、先人のみなさま✨
https://github.com/googlecolab/colabtools/issues/4503



# （参考）現在のバージョンの確認方法
以下で確認できます。
```Python
pip show pycaret
pip show joblib
```
# 感想
・エラーについて、GPTにメッセージについて質問して理解を深めることが先決。
・Google検索するときは、日本語の記事に引っ張られないように、英語のみで検索した方が先人の知恵が見つかる。
インフラ担当がAIアプリDifyでSAPトランザクションコード検索くんを作ってみた！

# ノーコードAIアプリに初トライ
前から何かアプリ作成をしたいと思っていましたが、プログラミングを覚えてアウトプットするとなるとかなり高カロリーです...


そんな中、ノーコードで話題のAIアプリが作れるってことで試してみました。


インフラの人間なので、アプリに関しては初心者ですのであしからず。１時間程度で終わる簡単なものです。

## SAP？トランザクションコード？何それって方へ

SAPというERPソフトウェアパッケージがあるのですが、仕事をする上で「SU01」「DB02」などのコードを打ち込みソフトウェアの画面を切り替える必要があります。

そのコードがわからないと画面にすら辿り着けない癖のある仕様なので、それをサポートするためのアプリになります。

# 成果物：SAPトランザクションコード検索くん
## 機能：検索用語を入れるとGoogle検索して、SAPのトランザクションコードを教えてくれます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821335/e4b1ce22-1dca-115b-1834-bfe15dcbbbec.png)

まずは成果物から。アプリの中身については後ほど解説します。

仕組みは単純でデータベースやユーザなどの検索用語を入れるとGoogle検索して関連のSAPトランザクションコードを教えてくれます。



正直1時間程度で作成したものですので、精度はそんなに高くないですがそれなりのサポートにはなります。

実際のアプリのURLです。

https://udify.app/workflow/vbA9KGurfDmosxN7


# アプリの中身
大まかなアプリの作成手順に関しては他の人が詳しく載せているのもあるので要所での解説になります。

参考
https://qiita.com/minorun365/items/4c5dba1de7977c386249

## ワークフロー図(開始→Google→LLM→終了)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821335/9fd0775e-8391-62e9-cf50-2194e34a7ce3.png)

Difyはチャットやエージェントなどの種類はありますが、今回はワークフローで作成しました。

### 開始
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821335/6f83c750-f2a6-9261-b08a-0fc1f0c1acd6.png)

### Google
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821335/ab672602-bdc7-35ed-6950-5a48e195b6af.png)

### LLM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821335/4094ba84-e050-a90b-7850-76666d05e8c6.png)

モデルを追加した後は「SYSTEM」の欄を入力していきます。

AIに与えるプロンプトなので、今回のアプリの肝になります。


```ruby:実際のプロンプト

あなたはSAPの専門家です。
{{#1715414076764.input#}}の用語に関連するSAPのトランザクションコードを下記の条件と表示形式に従って回答してください。



▪️条件
・回答は日本語
・回答数は5個程度
・回答は {{#1715414449277.text#}}の結果を引用
▪️表示形式
SAPのトランザクションコード：SAPのトランザクションコードの説明(20文字程度)

▪️「データベース」という用語に関連するSAPトランザクションコードの表示例
DB02：データベースのテーブルとインデックス監視
ST04：データベースのパフォーマンスモニター

▪️「ユーザ」という用語に関連するSAPトランザクションコードの表示例
SU01：ユーザ作成、削除、管理
SU10：ユーザメンテナンス(一括変更)

```

AIにSAPの専門家という属性を与えました。
また、入力した用語に関して決まった条件の元、決まったフォーマットで出力するように制御しています。

▪️条件
Google検索の結果の元回答してくれているはずですが、個数制限を設けて変に嘘つかれると困るので5個程度という曖昧な表現にしました。また日本語指定にしています。

▪️表示形式
ただトランザクションコードだけ表示されても機能がわからないと困るので、説明を20文字程度で出力させています。

また、例をAIに教えてあげることで、AIが理解しやすく想定した結果になるようにしています。
構成を「イメージできる」エンジニアが最強である理由。

葬送のフリーレン、面白いですよね。もうなんの説明もいらないくらい人気です。ゴールデンウィークに視聴した人も多いのではないでしょうか。

内容を簡単にいうと、魔法使いのエルフが魔王を倒したあとの世界を旅する物語です。そんな葬送のフリーレンで、「魔法」について面白い説明がされています。

> 魔法はイメージの世界であり、完全にイメージできない魔法は使えない。

<br>

作中では、「水をあやつる魔法使いに、雨の中で勝てるイメージができる？」などのように、イメージできるかできないかが、それを実現することができるかできないかを決定づけることが強く表現されています。

で、この「イメージできないことはうまくできない」ということ、現実の世界でもそうで、なんならエンジニアは特に実感しているんじゃないかと思ったわけです。

<br>

--

<br>

現実の世界に魔法はあるでしょうか？

例えば、スマートフォンは「魔法」です。こいつはマジでスゲェです。だって世界中のスマートフォンがちゃんと電波をひろってWebに接続できているのですから…これはもう魔法以外の言葉では説明できないでしょう。

しかし、その仕組みを完全にイメージできる人にとって、それは魔法でもなんでもありません。ただの技術です。

<br>

例えば、私は仕事でWebアプリにユーザー認証機能を付けようとしているのですが、マジでなにも分かりません。そういうとき、私は上司にこう相談してしまいます。

「構成のイメージができなくて…」

そう、なぜ何も分からないかというと、認証フローのイメージができないからです。どういう構成、どういう仕組みで、どういう登場人物たちが、何をしているのか。これが分からないために実現するイメージができないのです。

<br>

現実の世界に魔法はあるでしょうか？

残念ながら、現実の世界に魔法はありません。ただ、”魔法だと感じることができるもの”は山ほどあります。

<br>

さて、私がいいたいこと、それは「**エンジニアは魔法を魔法のままにしておくべきではない**」ということです。また、これは「エンジニアはどこまで勉強するべきか？」という問題の、ひとつの解答にもなると思っています。

<br>

Webアプリを作るため、JavaScriptのコーディングについて20時間勉強した人がいたとします。では、その人はWebアプリを作って公開することができるでしょうか。私はできないと思います。Webアプリを作るイメージができないからです。

実際は、フロントエンドとバックエンドの設計、データベースは何にするか、APIはどうするか、どこに公開するか（ホスティング）など、複数の要素の知識が必要です。

なので、アプリの機能や処理をプログラムで書けたとしても、書いたプログラムがどこでどのように動くか分からなければ、プログラムは魔法によって動くことにするしかありません。

そんなわけで「イメージができるように勉強する」ということが、結構大事なんじゃないかな、と思ったわけです。

<br>
<br>

以上です。
【PowerShell】JSONデータを解析する

# はじめに

仕事でPowerShellを時々使っていますが、ファイルのコピーや削除、OSやハードウェア情報の取得などの操作が多く、JSONやCSVなどのテキストを解析することはそれほどありませんでした。
そこで「PowerShellだとどうやってJSONを解析するんだろう？」と思い立って、調べてみた結果をまとめてみました。

# 解析するJSON

* OSとプログラミング言語、RDBの種類をまとめたJSONを用意しました。
  * ここでは[ヒア文字列リテラル（ヒアドキュメント）](https://qiita.com/nkojima/items/877f9b8bf218fe52ebdb)を使って複数行でJSONを記述しています。

```powershell:解析するJSON
$json = @"
{
  "Name" : "nkojima",
  "OS" : ["Windows", "Linux", "MacOS"],
  "Language" : ["C", "C++", "Java", "C#", "PowerShell"],
  "RDB" : {
    "Oracle" : ["10g", "11g", "12c", "19c"], 
    "MySQL" : ["5.1", "5.5", "5.6", "8.0"], 
    "PostgreSQL" : ["9.x", "15.x"], 
    "SQLite" : ["3.x"]
  }
}
"@
```

# JSON形式の文字列からオブジェクトへの変換

* JSON形式のテキストからオブジェクト（カスタムPSObject）に変換するには、`ConvertFrom-Json`関数を使います。

```powershell:オブジェクトへの変換
$jsonContent = ($json | ConvertFrom-Json)
```

# 簡単な解析

* オブジェクト（キーと値のペア）になっている部分は、メソッドチェーンのようにキーを指定します。

```powershell:「Name」の要素を表示
$jsonContent.Name
```
```powershell:実行結果
nkojima
```

* `$jsonContent.OS`のように、値が配列になっている場合は配列が返されます。

```powershell:「OS」の要素のデータ型を表示
$jsonContent.OS.GetType()
```
```powershell:実行結果
IsPublic IsSerial Name                                     BaseType
-------- -------- ----                                     --------
True     True     Object[]                                 System.Array
```

* 配列になっている部分を1要素ずつ取得する場合は、要素番号を指定します。
  * `foreach`を使う場合はこの限りではありません。

```powershell:「Lanuguage」の値の2番目の要素を表示
$jsonContent.Language[2]
```
```powershell:実行結果
Java
```

## 複雑な解析

* オブジェクトと配列が入れ子になっている構造を解析する場合、for文を使って解析することが多いと思いますが...
* オブジェクトの値が複数ある場合、これらの値を取り出すのに`{オブジェクト}.psobject.Properties`という構文を使っています。
  * もう少し単純な書き方が出来るとありがたいですが、現時点ではこれしか方法を見いだせていません。

```powershell:DBの種類とバージョンを表示
foreach ($rdb in $jsonContent.RDB.psobject.Properties) {
    foreach ($dbVersion in $rdb.Value) {
        Write-Host "$($rdb.Name) : $($dbVersion)"
    }
}
```
```powershell:実行結果
Oracle : 10g
Oracle : 11g
Oracle : 12c
Oracle : 19c
MySQL : 5.1
MySQL : 5.5
MySQL : 5.6
MySQL : 8.0
PostgreSQL : 9.x
PostgreSQL : 15.x
SQLite : 3.x
```


# 参考URL

* [【PowerShell】テキストを整形して出力する](https://qiita.com/nkojima/items/877f9b8bf218fe52ebdb)
* [ConvertFrom-Json](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.utility/convertfrom-json?view=powershell-7.4)
Newtonsoft.jsonについて

# 概要
Newtonsoft.Jsonについて学習する機会があり、学習の結果をまとめた記事です。
ツールはUiPathを使用するので一部uipathのことも記載しています。

# Newtonsoft.Jsonとは？
Newtonsoft.Jsonは、JSONデータのシリアル化やデシリアル化を行うための.NET用のライブラリである。

### JSONとは
JSON（**J**ava**S**cript **O**bject **N**otation）は、データのやり取りに広く使用されている軽量なデータ形式であり、Newtonsoft.Jsonは.NETプロジェクトでのJSON処理をサポートします。
特にシステム間のやり取り（APIのレスポンスなど）で使用されている。
【使用例】
*APIとのデータ通信
*設定ファイルの読み書き
*データベースとのデータのやり取り

### csvとJsonのデータ表現の違い 
例
![スクリーンショット 2024-01-16 22.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518751/8e036757-fb17-1b74-41dd-a4b2bb80e451.png)
### #csvの場合
カンマ区切りで表現される
```
id, 店舗名
1,吉野家
2,すき家
3,松屋
```
### #JSON
keyとvalueがセットで表現される
データとデータの間にはカンマ','が必要となる
データの始まりと終わりに'{}'が使用される
複数行のデータを記載するとき配列'[]'を表現する

```
[
{"id" : "1", "店舗名" : "吉野家" }
{"id" : "2", "店舗名" : "すき家" }
{"id" : "3", "店舗名" : "松屋" }
]
```

# Newtonsoft.jsonの特徴
### 柔軟性
 Newtonsoft.Jsonは、様々な.NETオブジェクトをJSONにシリアル化や、逆にJSONを.NETオブジェクトにデシリアル化（逆シリアル化）することができます。この柔軟性により、複雑なデータ構造の取り扱いに優れている。

 ### メソッド
 | メソッド名 | 説明 | UiPathアクティビティ |
|:-:|:-:|:-:|
|JsonConvert.SerializeObject   | オブジェクトをJSON文字列にシリアル化する。  | -  |
| JsonConvert.DeserializeObject  |  JSON文字列を.NETオブジェクトにデシリアル化する。 | JSONを逆シリアル化（UiPath.WebAPI.Activities.DeserializeJson）  |
| JsonConvert.SerializeXmlNode |  XMLノードをJSON文字列にシリアル化する。 |  - |
|  sonConvert.DeserializeXmlNode |  JSON文字列をXMLノードにデシリアル化する。 |  - |

UiPathのアクティビティ:[JSONを逆シリアル化](https://docs.uipath.com/ja/activities/other/latest/developer/deserialize-json)

### オブジェクト
#### LINQtoJSON
LINQ to JSONは、JSONオブジェクトを扱うためのAPIです。LINQ(Language Integrated Query)を念頭に設計されており、JSONオブジェクトのクエリと作成を可能にする。
#### JSONオブジェクトを表すクラス
・JObject
プロパティとして、keyとvalueを持ちます。

参照：[JObjectクラス](https://www.newtonsoft.com/json/help/html/T_Newtonsoft_Json_Linq_JObject.htm)
flexの右余白ができてしまう。

flexの右余白ができてしまう。
子要素に flex-grow:1を設定する。

html

```
 <h2>flex-growの初期値</h2>
  <div class="flex">
    <div class="flex-item flex-1">flex-grow:0</div>
    <div class="flex-item flex-2">flex-grow:0</div>
    <div class="flex-item flex-3">flex-grow:0</div>
  </div>
  <h2>flex-grow:1をいれた場合</h2>
  <div class="flex">
    <div class="flex-item flex-4">flex-grow:1</div>
    <div class="flex-item flex-5">flex-grow:1</div>
    <div class="flex-item flex-6">flex-grow:1</div>
  </div>
```

css

```
.flex {
    display: flex;
    flex-wrap:wrap;
    text-align: center;
  
    gap: 5px 5px;
    margin: 20px 0 30px;
  }
  
  .flex-item {
    width: 100px;
   font-size: 13px;
   font-weight: bold;
    height:70px;
  }
  .flex-1{
    background-color: blueviolet;
  }
  .flex-2{
    background-color: rgb(198, 201, 34);

  }
  .flex-3{
    background-color: rgb(226, 43, 43);

  }
  .flex-4{
    background-color: blueviolet;
    flex-grow: 1;
  }
  .flex-5{
    background-color: rgb(198, 201, 34);
    flex-grow: 1;
  }
  .flex-6{
    background-color: rgb(226, 43, 43);
    flex-grow: 1;
  }
```
制御フローテストとは

## 制御フローテストとは
ホワイトボックステストに分類される体表的なテストである「**制御フローテスト**」について説明します。
制御フローテストは、ソフトウェアテストの手法の一つであり、プログラムの制御構造をテストすることを目的とします。制御フローは、プログラム内の条件分岐やループなどの制御構造を指します。このテスト手法では、これらの制御構造が正しく動作するかどうかを検証します。

1. **基準の選択**
制御フローテストでは、プログラムの制御構造に基づいてフローチャートを図示します。
テスト対象のモジュールは動かしません。
　
2. **カバレッジ基準を決める**
プロジェクトの性質や要件、およびテストの目的を十分に理解します。例えば、安全性や信頼性が重要な場合はより厳密な基準が必要になる可能性があります。
また、プログラムの性質に応じて適用可能なカバレッジ基準を確認します。**命令文カバレッジ**、**分岐カバレッジ**、**条件カバレッジ**など、さまざまな基準があります。
これらの要素をカバレッジ基準といいます。
　
3. **カバレッジ基準を網羅する経路の抽出**
選択したカバレッジ基準に基づいて、テストすべきカバレッジ要素を特定します。例えば、条件文、分岐、ループ、関数呼び出しなどがカバレッジ要素となります。
　
4. **抽出した経路を通るようにテストする**
特定したカバレッジ要素を網羅するためのテストケースを設計し、それらのテストケースがどれだけ要素をカバーしているかを評価します。テストケースを実行して、網羅率を評価し、未網羅の要素を特定します。
　
5. **不足しているカバレッジ要素の特定**
網羅率の評価を通じて、不足しているカバレッジ要素を特定し、追加のテストケースを設計して網羅率を向上させます。

このようにして、要件とプログラムの構造を理解し、適切なカバレッジ基準を選択して、テストすべきカバレッジ要素を特定し、それらを網羅するためのテストケースを設計します。これにより、ソフトウェアの品質や信頼性を確保するための効果的なテスト活動が可能となります。
　
### カバレッジ基準が命令文: ステートメントカバレッジ
ステートメントカバレッジは、プログラム内の各行 (ステートメント) がテストされた割合を示す指標です。つまり、テストがプログラムのどの部分を実行したかを評価するためのものです。
着目する要素を**命令文**を選択した場合、それをステートメントカバレッジといいます。

例えば、あるプログラムが10行のコードで構成されているとします。ステートメントカバレッジが100％の場合、テストスイートがその10行のすべての行を少なくとも1回は実行したことを意味します。しかし、カバレッジが50％の場合、テストがプログラムの半分の行を実行したことを意味します。

ステートメントカバレッジの目的は、プログラムの各行が少なくとも1回は実行されるようなテストケースを設計することです。これにより、プログラムの各部分が正しく動作し、意図したとおりに動作することを確認することができます。

つまり、ステートメントカバレッジは、テストスイートがプログラムのどの部分を実行したかを評価するための指標であり、プログラムの品質や完全性を評価するのに役立ちます。
　
### カバレッジ基準が分岐した経路: デシジョンカバレッジ
着目する要素を**分岐した経路**を選択した場合、それをデシジョンカバレッジといいます。
デシジョンカバレッジは、ソフトウェアテストにおけるカバレッジ基準の一つで、プログラム内の条件文 (デシジョン) がテストされた割合を示します。つまり、条件文がどれだけの割合で真と偽の両方の結果を持つかを評価する指標です。

例えば、あるプログラムには条件文が3つあるとします。それぞれの条件文が真と偽の両方の結果を持つ場合、合計で6つの可能な組み合わせがあります。デシジョンカバレッジが100％の場合、テストスイートがこれらすべての組み合わせをカバーしたことを意味します。一方、50％の場合、テストが組み合わせのうちの半分をカバーしたことを示します。

デシジョンカバレッジの目的は、条件文の真と偽の両方のケースを十分にテストすることです。これにより、プログラム内の条件分岐が正しく動作し、意図したとおりに振る舞うことを確認することができます。

簡潔に言えば、デシジョンカバレッジは、プログラム内の条件文がどれだけの割合でテストされたかを示す指標であり、プログラムの品質や信頼性を評価するのに役立ちます。
　
### カバレッジ基準が条件: 複合条件カバレッジ
着目する要素が**条件**を選択した場合、それを複合条件カバレッジといいます。
複合条件カバレッジは、ソフトウェアテストにおけるカバレッジ基準の一つで、複数の条件を組み合わせた条件式がテストされた割合を示します。つまり、複数の条件が組み合わさった条件式がどれだけの割合で真と偽の両方の結果を持つかを評価する指標です。
　
例えば、条件式「A かつ B」という複合条件があるとします。この条件式には、AとBの2つの単純条件が含まれます。複合条件カバレッジが100％の場合、テストスイートが「A かつ B」の組み合わせを全てテストしたことを意味します。一方、50％の場合、テストが半分の組み合わせをカバーしたことを示します。

複合条件カバレッジの目的は、複合条件が構成する各単純条件の組み合わせを十分にテストすることです。これにより、プログラム内の複雑な条件式が正しく評価され、意図したとおりに振る舞うことを確認することができます。

要するに、複合条件カバレッジは、複数の条件を組み合わせた条件式がどれだけの割合でテストされたかを示す指標であり、プログラムの品質や信頼性を評価するのに役立ちます。

以下の図はロボットが信号のある横断歩道に到着した際に、信号の状況によって歩行速度が変化する使用をフロー図で表したものです。
さらに、フロー図で表し、テストケースを作成しています。

 - 信号が青ならば、速度を変更せず歩行を続ける
 - 信号が黄色ならば、速度を20%UPして歩行する
 - 信号が赤ならば、速度を0km/hにする (歩行停止)

![test-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001657/3da5e2d0-e215-eb90-292f-cd165dfe09f8.jpeg)
GitHubとのSSH接続でハマったのでメモ



GitHub に SSH 接続してリモートリポジトリからサーバーにプロジェクトをクローンしようとしたら SSH 接続のところでハマったのでメモを残しておきます。

# 環境
Linux(CentOS9)

# うまく行った手順

/home/[ユーザー]/.ssh へ移動します。（.sshがなければディレクトリを作成）
.sshディレクトリの所有者がrootになっていると面倒なので、その場合は自分のユーザーで作り直します。

下記コマンドで、秘密鍵と公開鍵を生成する。
rsa_GitHubは、任意のファイル名で大丈夫です。
パスワードは空白でもOK。

```
ssh-keygen -t rsa -b 4096 -f rsa_GitHub
```
こう表示されたらOK

![2024-05-11-17-13-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/bf405d78-76ff-f448-bb9c-1ddfe96f14a0.png)


![スクリーンショット 2024-05-11 205640.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/c7386089-b1ad-08cf-8436-ee6776933e74.png)


.pub が付いているほうが公開鍵で付いていないほうが秘密鍵です。
公開鍵の方は、鍵というより南京錠のような鍵穴をイメージするほうがわかりやすいです。

公開鍵（.pubの方）の中身をコピーしてGitHubのSetting > Deploy keysの設定で貼り付けます。

![スクリーンショット 2024-05-11 204008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/1bcb966f-dc0f-dad4-f909-3d968d83fd60.png)

![スクリーンショット 2024-05-11 204233.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/beb06437-0734-4aa8-a8f3-de792b209d66.png)

![スクリーンショット 2024-05-11 205916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/5d57a084-48b0-c71c-54b6-2d1630794f8b.png)


下のように表示されればOK。

![スクリーンショット 2024-05-11 204543.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/5323fb47-9407-b280-d6a0-dd0687e0dd60.png)

<!--

下記コマンドで SSH エージェントを起動。

```
eval "$(ssh-agent -s)"
```

SSH エージェントは、秘密鍵を一時的に保存して、SSH 接続のときに使用できるようにするものです。

鍵の所有者がrootになっているので、下記コマンドで秘密鍵と公開鍵の権限を変更。
これをしないと次のコマンドで権限エラーになります。

```
sudo chmod a+r rsa_GitHub rsa_GitHub.pub
```

下記コマンドで秘密鍵を SSH エージェントに登録。

```
ssh-add /home/[ユーザー]/.ssh/rsa_GitHub
```
-->

下記コマンドで.sshディレクトリにconfigファイルを作成し、編集します。
```
vi config
```
![スクリーンショット 2024-05-12 113533.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/84ae7148-ab73-7a84-2867-3099c3835fdf.png)



下記コマンドで SSH 接続のテスト

```
ssh -T git@github.com
```

「You've successfully authenticated, ～」と出たらテスト成功。

下記コマンドで GitHub からクローンできます。

```
git clone [githubのSSHのURL]
```

URL は GitHub から下の箇所から取得します。

![スクリーンショット_2024-05-11_201638.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/f546178e-131d-9faa-8f38-184c6ccef3d8.png)


# つまづいた点

.sshディレクトリがrootユーザーになっていたので、.sshの中で鍵を生成しようとすると自分のユーザーで作れなくて煩雑になっていました。

# プロジェクトが複数ある場合
プロジェクトがフロントエンドとバックエンドで分かれている場合などは、鍵をそれぞれで作ってconfigで以下のようにすると、それぞれでSSH認証を分けられます

```
Host github-front
    HostName github.com
    User git
    IdentityFile /home/[ユーザー名]/.ssh/[フロントエンドの秘密鍵]
Host github-server
    HostName github.com
    User git
    IdentityFile /home/[ユーザー名]/.ssh/[バックエンドの秘密鍵]
```

GitHubに公開鍵をそれぞれ登録して、以下のようにgithub.comだった箇所をgithub-frontのように変更すると成功します。

```
ssh -T git@github-front
```

![スクリーンショット 2024-05-12 115214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601978/fdb1480d-3afd-7897-130f-ca8bbb6d58d4.png)

# 終わり

久しぶりのインフラ構築で手間がかかりましたが、これでGitでデプロイができるようになって作業が楽になりますね。
CpawCTF Q8.[Misc] Can you open this file ?

問題ページよりopen_meファイルをダウンロードする．
”file"コマンドを用いてファイルの種類を調べる．

    [ターミナル]
    file open_me

結果としてopen_meファイルは以下の情報を持つことがわかる．

    [ターミナルで出力された情報を一部抜粋した物]
    open_me: Composite Document File V2 Document, 
    Little Endian, 
    Os: Windows, 
    Name of Creating Application: Microsoft Office Word,

open_meフィルを対象アプリケーションであるMicrosoft Office Wordで開くとフラッグを入手できる．
【Qulacs】量子フーリエ変換を書いてみた。【量子コンピュータ】

皆さん、こんにちは！
2回目の投稿になります。
今回は量子フーリエ変換(Quantum transformatio, QFT)を実装していきます。詳しい解説は[Quantum Native Dojo]( https://dojo.qulacs.org/ja/latest/notebooks/2.3_quantum_Fourier_transform.html)やNielsen & Chuangなどの書籍を参照してください。

## 1. 必要なライブラリをインポート
```python
import numpy as np
from qulacs import QuantumState, QuantumCircuit
from qulacs.gate import Z, H, S, T, DenseMatrix, to_matrix_gate
```
今回使うライブラリに絞って、インポートしました。

## 2 制御Rnゲートの実装
```python
def control_R(j, target, control):
    if j == 1:
        gate = to_matrix_gate(Z(target))
    if j == 2:
        gate = to_matrix_gate(S(target))
    if j == 3:
        gate = to_matrix_gate(T(target))
    else:
        gate = DenseMatrix(target, [[1 , 0], [0, np.exp(1j * 2.0*np.pi / 2.0**j)]])
    gate.add_control_qubit(control, 1)
    return gate
```
Sympy(にはあるのか知らないが、)と違って、Qlacsには、DenseMatrixが実装されているので、これで、$R_4$以降のゲートの演算子を与える事ができる。

## 3 量子フーリエ変換の回路
回路図(参考リンク参照)に従って実装、再帰的に書かれているので、
割とコンパクトに書ける。
```python
def qft_circuit(n):
    circuit = QuantumCircuit(n)
    for target in range(n):
        circuit.add_gate(H(target))
        for control in range(target+1, n):
            j = control + 1
            circuit.add_gate(control_R(j, target, control))
    return circuit
```
## 4. Qubitの用意
Quantum native Dojoのやり方に従って4Qubitを用意してみる。4QubitならDenseMatrixも使うので、n=3の場合の拡張になっている。
```python
n = 4
state = QuantumState(n)
state.set_computational_basis(0)
buffer = QuantumState(n)
for i in range(1, 2**n):
    buffer.set_computational_basis(i)
    state.add_state(buffer)

state.multiply_coef(1 / np.sqrt(2**n))
print("実行前: " , state)
```
結果
```
実行前:   *** Quantum State ***
 * Qubit Count : 4
 * Dimension   : 16
 * State vector : 
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
(0.25,0)
```
## 5 回路を作用させる
```python
circuit = qft_circuit(n)
circuit.update_quantum_state(state)
print("実行後: ", state)
```
結果
```
実行後:   *** Quantum State ***
 * Qubit Count : 4
 * Dimension   : 16
 * State vector : 
(1,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
(0,0)
```
n=3の場合の結果と一致している。

## 6 感想
Sympyの方がビジュアル的にはわかりやすいが、慣れれば色々な機能があるので、Qulacsの方が応用範囲は広そうだ。今後もたくさん練習していろいろ書けるようになりたい。


## 7 参考文献
1. Quantum Native Dojo!
https://dojo.qulacs.org/ja/latest/
2. Qulacs使ってみた報告
https://zenn.dev/2201/articles/8c773e3ba29200
AWS Storage Gateway

## はじめに
この記事はAWS SAA試験勉強のための、AWS Storage Gatewayに関する知識のまとめです。


## AWS Storage Gatewayとは
<font color="red">**オンプレミス環境の**</font>ストレージをAmazon S3にシームレスに接続することができるハイブリッドストレージサービス。

オンプレミスのデータセンターにあるストレージを拡張して、データのバックアップに使用できます。よって、オンプレミスでストレージが不足した際のAWSの利用としては、AWS Storage Gatewayの使用が有効です。

Storage Gateway S3ファイルゲートウェイは、複数のクライアントでS3バケットのファイルを共有する目的で利用されるので、一方的なデータ転送を迅速にするという目的には適していません。

## iSCSI イニシエータの接続
iSCSI（Internet Small Computer System Interface）とは、コンピューターネットワーク上でストレージデバイスを共有するための標準プロトコルです。
AWS Storage GatewayをISCSIデバイスに利用して、オンプレミス環境のストレージとAmazon S3を接続させることができます。


## AWS Storage Gatewayボリュームゲートウェイ
- <font color="red">**保管型ボリュームゲートウェイ**</font>は、オンプレミスにデータのプライマリコピーを保有します。DR(Disaster Ricovery)の観点からのバックアップに使います。


- Amazon S3バケットをプライマリーストレージとした上で、それをオンプレミス環境へと拡張し、データセンターのストレージは一時アクセス用に保持するときは<font color="red">**キャッシュ型ボリューム**</font>。


### <font color="red">**ボリュームゲートウェイはNFSやSMBに対応しておらず、ファイル共有を行うことはできません。**</font>



## AWS Storage Gatewayファイルゲートウェイ
AWS Storage GatewayファイルゲートウェイはAmazon S3バケットへのデータ転送を管理して、低レイテンシーなデータアップロードを支援する機能を有しています。
オンプレミスのNFSまたはSMBファイルベースのアプリケーションからローカルキャッシュを使用し、S3のオブジェクトに保存。

参考：[NFS と SMBの違い](https://aws.amazon.com/jp/compare/the-difference-between-nfs-smb/)





## AWS Storage Gatewayテープゲートウェイ
AWSの仮想テープにオンプレミスデータをバックアップしアーカイブ。
さくっとmackerelへサービスメトリクスを投稿する

# はじめに
さくっとサービスメトリクスを投稿したいので一番簡単な奴を作ったので残しとく。

# bash版

```
#!/bin/bash
API_KEY="XXXXXXXXXXX"
LOG_FILE="/tmp/curl_log.txt"
DRY_RUN=false

METRIC_TIME=$(date +%s)

METRIC_NAME1="Test_Linux.value_1"
METRIC_VALUE1=$((RANDOM % 100 + 1))
METRIC_NAME2="Test_Linux.value_2"
METRIC_VALUE2=$((RANDOM % 100 + 1))
METRIC_NAME3="Test_Linux.value_3"
METRIC_VALUE3=$((RANDOM % 100 + 1))

# オプション解析
while [ $# -gt 0 ]; do
    case "$1" in
        --dry-run)
            DRY_RUN=true
            shift
            ;;
        *)
            echo "Unknown option: $1"
            exit 1
            ;;
    esac
done

# リクエストの内容を変数に格納
REQUEST_DATA="[
    {\"name\":\"${METRIC_NAME1}\",\"time\":${METRIC_TIME},\"value\":${METRIC_VALUE1}},
    {\"name\":\"${METRIC_NAME2}\",\"time\":${METRIC_TIME},\"value\":${METRIC_VALUE2}},
    {\"name\":\"${METRIC_NAME3}\",\"time\":${METRIC_TIME},\"value\":${METRIC_VALUE3}}
]"

if [ "$DRY_RUN" = true ]; then
    # dry-runモードでリクエスト内容をログに出力
    echo "curlリクエストの内容 (dry-run):"
    echo "$REQUEST_DATA" >> "$LOG_FILE"
    echo "dry-runモードでリクエスト内容をログに保存しました。実際のリクエストは行われません。"
else
    # curlリクエストを実行し、リクエスト内容とレスポンスをログに記録
    curl -sS -X POST \
        -H "X-Api-Key:${API_KEY}" \
        -H 'Content-Type:application/json' \
        -d "$REQUEST_DATA" https://api.mackerelio.com/api/v0/services/nabe_sv/tsdb >> "$LOG_FILE" 2>&1
    echo "curlリクエストを実行しました。ログは $LOG_FILE に保存されています。"
fi
```

# python版

```
#!/usr/bin/env python
import requests
import json
import time
import random

API_KEY = "XXXXXXXXXX"
LOG_FILE = "/tmp/curl_log.txt"
DRY_RUN = True

METRIC_TIME = int(time.time())

METRIC_NAME1 = "Test_Linux.value_1"
METRIC_VALUE1 = random.randint(1, 100)
METRIC_NAME2 = "Test_Linux.value_2"
METRIC_VALUE2 = random.randint(1, 100)
METRIC_NAME3 = "Test_Linux.value_3"
METRIC_VALUE3 = random.randint(1, 100)

# リクエストの内容を変数に格納
request_data = [
    {"name": METRIC_NAME1, "time": METRIC_TIME, "value": METRIC_VALUE1},
    {"name": METRIC_NAME2, "time": METRIC_TIME, "value": METRIC_VALUE2},
    {"name": METRIC_NAME3, "time": METRIC_TIME, "value": METRIC_VALUE3},
]

if DRY_RUN:
    # dry-runモードでリクエスト内容をログに出力
    print("curlリクエストの内容 (dry-run):")
    print(request_data)
    with open(LOG_FILE, "a") as log_file:
        json.dump(request_data, log_file)
        log_file.write("\n")
    print("dry-runモードでリクエスト内容をログに保存しました。実際のリクエストは行われません。")
else:
    # curlリクエストを実行し、リクエスト内容とレスポンスをログに記録
    headers = {"X-Api-Key": API_KEY, "Content-Type": "application/json"}
    response = requests.post(
        "https://api.mackerelio.com/api/v0/services/nabe_sv/tsdb",
        json=request_data,
        headers=headers,
    )
    with open(LOG_FILE, "a") as log_file:
        log_file.write(f"curlリクエストのレスポンス:\n{response.text}\n")
    print(f"curlリクエストを実行しました。ログは {LOG_FILE} に保存されています。")
```
PowerShellでカーソルを動かして.NET Frameworkライブラリに触れてみる

## はじめに
PowerShellでマウスカーソル動かしたくなったのでやってみる。

(スクリプト試してるときにカーソルが暴走して止められなくなったらCtrl+Breakで中断できる)

## 1. .NETクラスの追加
コマンドレットにはカーソルを動かすコマンドが無いので、System.Windows.Formsクラスを追加。
```
Add-Type -AssemblyName System.Windows.Forms
```

https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.forms?view=windowsdesktop-8.0

## 2. カーソルの位置の取得
```PowerShell
[Windows.Forms.Cursor]::Position
```
こんな感じで座標が取れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458266/b06f9c1e-421c-2b36-b3fd-8e94642e5402.png)

座標のXとYの値をいじればカーソルが動く。

## 3. カーソルの座標の加減算

これだとカーソルが動かない
```PowerShell
Add-Type -AssemblyName System.Windows.Forms
$Cursor =  [Windows.Forms.Cursor]

for($i=0; $i -lt 3; $i++){
    $Cursor::Position.X += 10
    $Cursor::Position.Y += 10

    #検証用
    Write-Host "PositonX: " $Cursor::Position.X
    Write-Host "PositonY: " $Cursor::Position.Y
    Write-Host ""
}
```
座標も変わってない
```
PositonX:  1466
PositonY:  269

PositonX:  1466
PositonY:  269

PositonX:  1466
PositonY:  269
```

これは動く
```PowerShell
#カーソルの位置取得
Add-Type -AssemblyName System.Windows.Forms
$Cursor =  [Windows.Forms.Cursor]

for($i=0; $i -lt 3; $i++){
    $Position = $Cursor::Position
    $Position.x += 10
    $Position.y += 10
    $Cursor::Position = $Position

    #検証用
    Write-Host "PositonX: " $Cursor::Position.X
    Write-Host "PositonY: " $Cursor::Position.Y
    Write-Host ""
}
```
座標も変わっている
```
PositonX:  1479
PositonY:  265

PositonX:  1489
PositonY:  275

PositonX:  1499
PositonY:  285
```

どのくらい動かすかにランダム性を持たせるなら、候補の数値を配列にしてGet-Randomに渡して数値を出すといいかも。
```PowerShell
-1, 1 | Get-Random
```

## おわりに
`$Cursor::Position`のX座標、Y座標を変えるところをループ処理にすればカーソルを滑らかに動かせる。
少しアレンジすればカーソルに高速で反復横跳びさせることもできるはず。(使い道はないけど)
TypeScriptで学ぶジェネリクスの基礎

## はじめに
ジェネリクスは非常に強力な機能の一つです。この記事では、TypeScriptでジェネリクスの基本的な概念とその使い方について解説します。

## ジェネリクスとは何か？
ジェネリクスは、データ型や関数の動作をパラメータ化する仕組みです。これにより、汎用的なコードを作成し、異なる型や処理に対して再利用性の高いコードを記述することができます。

## ジェネリクスの基本構文
ジェネリクスを使用するための基本的な構文は次の通りです。

```ts
function functionName<T>(param: T): T {
    // ジェネリクスを使用したコード
    return param;
}
```
ここで、\<T> は型パラメータを示し、functionName 関数は T 型のパラメータ param を受け取り、同じ型 T を返します。

## ジェネリクスの利点
ジェネリクスを使用することで、以下のような利点があります。

1. **汎用的なコード**: 特定の型に依存しない汎用的なコードを記述できる
2. **再利用性の向上**: 異なる型や処理に対して同じコードを再利用できる
3. **型安全性の確保**: コンパイル時に型の整合性が確認されるため、型安全性が向上する
## 実践例: クラスでのジェネリクスの活用
以下は、ジェネリクスを使用したクラスの例です。

```ts
class Container<T> {
    value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

let numberContainer = new Container<number>(42);
let stringValue = numberContainer.getValue(); // stringValue の型は number
```
ここでは、Container クラスがジェネリクスを使用しています。\<T> の部分で型パラメータ T を指定し、value プロパティと getValue メソッドの型を T に依存させています。インスタンス化する際に具体的な型を指定することで、異なる型のデータを保持するコンテナを作成できます。

ジェネリクスを使用することで、コードの柔軟性や再利用性を高めることができます。特に、汎用的なデータ構造やアルゴリズムを実装する際に効果的です。
ブラックボックステストとホワイトボックステストを簡単に説明

## ブラックボックステスト
ブラックボックステストは、ソフトウェアの内部構造や実装の詳細に関係なく、ソフトウェアの機能や動作を検証するテスト手法です。つまり、テストを行う際に、ソフトウェアを「ブラックボックス」と見なし、外部からの入力と出力のみを考慮します。
ブラックボックステストでは、以下のようなアプローチが取られます。

1. **機能のテスト**
ソフトウェアが要求された機能を満たしているかどうかを確認します。つまり、ユーザーが期待する通りの動作をするかどうかをテストします。
　
2. **ユーザビリティのテスト**
ソフトウェアが使いやすいかどうかを評価します。ユーザーが直感的に操作できるか、UIがわかりやすいかなどを検証します。
　
3. **性能のテスト**
ソフトウェアが要求されたパフォーマンスレベルを満たしているかどうかを確認します。応答時間、負荷に対する耐性などを評価します。
　
4. **セキュリティのテスト**
ソフトウェアがセキュリティ要件を満たしているかどうかを確認します。機密性、データの整合性、認証機能などを検証します。
 
ブラックボックステストは、ユーザーの視点からソフトウェアをテストするため、実際の使用状況に近い状況でテストを実行することができます。また、開発者がテストする際に、実装の詳細にとらわれることなく、ユーザーの視点に立って検証することができます。

### 同値クラステスト
同値クラステストは、ソフトウェアテストの手法の一つで、入力値の同値クラスからテストケースを選択する方法です。同値クラスは、同じような入力値が同じような結果をもたらすグループのことです。同値クラステストでは、各同値クラスから少なくとも1つのテストケースを選択して、そのクラスの動作をテストします。
同値クラステストは、テストケースの網羅性を高め、テストの効率性を向上させるのに役立ちます。同値クラステストは一般的に手動で行われ、テストケースの数を最小限に抑えながら、テストのカバレッジを確保します。
　
理解を深めるために、JavaScriptを使用して同値クラステストの例を示します。以下の関数を考えてみましょう。
```javascript
function isEven(number) {
    return number % 2 === 0;
}
```
この関数は、与えられた数が偶数かどうかを判定します。これを同値クラステストでテストしてみましょう。
まず、入力値の同値クラスを特定します。

1. 偶数の場合
2. 奇数の場合

次に、各同値クラスから少なくとも1つのテストケースを選択します。以下は、それぞれの同値クラスから1つのテストケースを選択した例です。

```javascript
// 偶数の場合
console.log(isEven(4)); // 出力: true

// 奇数の場合
console.log(isEven(7)); // 出力: false
```
このように、同値クラステストでは、各同値クラスから少なくとも1つのテストケースを選択して、関数の振る舞いを確認します。

### 境界値テスト
境界値テストは、ソフトウェアの境界付近での動作を検証するテスト手法です。境界値テストでは、入力値が境界付近にある場合に発生するエラーや不正確な動作を特定することが目的です。
これにより、関数が境界値付近で正しく動作するかどうかを確認します。境界値テストは、一般的にユニットテストや統合テストの一部として行われます。境界値テストを行うことで、プログラムのロジックエラーや不正確な動作を特定し、ソフトウェアの品質を向上させることができます。
　
境界値テストの例として、0から100の範囲の数値を受け取り、その数値が50以上ならば「合格」、50未満ならば「不合格」という結果を返す関数を JavaScript で書いてみましょう。

```javascript
function checkScore(score) {
    if (score >= 50) {
        return "合格";
    } else {
        return "不合格";
    }
}

console.log(checkScore(49)); // 出力: 不合格 (境界値の直前の値)
console.log(checkScore(50)); // 出力: 合格 (境界値)
console.log(checkScore(51)); // 出力: 合格 (境界値の直後の値)
```

このコードでは、境界値の直前の値である49、境界値である50、および境界値の直後の値である51のテストケースを含んでいます。これにより、関数が境界付近で正しく動作するかどうかを確認することができます。
　
ソフトウェアテストのためのテストケースを設計する際に目指すべきことは、**現実的に実行できるレベルの量までテストケースを削減しつつ、少ないテストケースでも品質を保証できるように最適なテストケースを設計すること**です。そのための知識がソフトウェアテスト技法です。

## ホワイトボックステスト
ホワイトボックステストは、ソフトウェアの内部構造や実装の詳細を知っている状態で、その内部を検証するテスト手法です。つまり、テストを行う際に、ソフトウェアを「ホワイトボックス」と見なし、内部のコードやロジックに焦点を当てます。
ホワイトボックステストでは、以下のようなアプローチが取られます。

1. **コードの分析**: 
ソフトウェアのコードを読み込み、条件分岐、ループ、変数、関数などの内部構造を理解します。
　
2. **ロジックのテスト**: 
ソフトウェアの内部ロジックをテストし、特定の条件下で正しく動作するかどうかを確認します。これには、条件分岐の網羅率やループの正常性を確認するテストが含まれます。
　
3. **コードカバレッジの評価**:
テストがソフトウェアのどの部分をカバーしているかを評価し、コードの網羅率を確認します。主なカバレッジ指標には、行カバレッジ、分岐カバレッジ、関数カバレッジなどがあります。
　
4. **データフローのテスト**:
ソフトウェア内のデータの流れをテストし、変数やデータの整合性、安全性を確認します。データフローのテストは、データの定義、使用、変更、削除などを検証します。
 
ホワイトボックステストは、主に開発者やテストエンジニアによって行われます。開発者がコードの品質や正確性を確保するために行うテストの一環として使用されることが一般的です。ホワイトボックステストは、ソフトウェアの品質を向上させ、バグの早期発見と修正に貢献します。
CpawCTF Q9.[Web] HTML Page

問題文にあるリンクを踏み，指定されたwebページに移行する．
ページのHTMLを確認するため，デベロッパーツール（F12)を用いる．


HTMLの要素から探しても良いが，量が膨大なため検索ツールなどを用いるとよい．
するとHTMLページのヘッダー部（10行目）に
    
    <meta name="description" content="flag is cpaw{9216ddf84851f15a46662eb04759d2bebacac666}">

との記述がありフラッグを得ることができる．
Express.jsで使っていないエンドポイントを探すミドルウェアを作成する

長いことExpress.jsでサーバー側を書いていると、使っているのかどうかわからないエンドポイントが出てくるかもしれない。特に社内ツールとかだと、度重なる仕様変更とか、途中でそもそも別のリポジトリに分割されたとか。

以下のようなミドルウェアを作成すれば、全アクセスでパスが取得できる。

```ts
app.use("*", async (req, _res, next) => {
	const fullUrl = new URL(
		req.originalUrl,
		`${req.protocol}://${req.get("host")}`,
	);
    console.log({fullUrl.pathname});
	next();
});
```

あとは、アクセスがあった部分をDBに入れていく。そのまま1ヶ月くらい放置して、DBに上がらなかったら使っていない（あるいは使用頻度が極端に少ない）エンドポイントである。

簡単にsupabaseで書くとこんな感じ。

```ts
app.use("*", async (req, _res, next) => {
	const fullUrl = new URL(
		req.originalUrl,
		`${req.protocol}://${req.get("host")}`,
	);
	if (!fullUrl.pathname.includes("/trpc/")) {
		const { data, error } = await supabase
			.from("endpoint")
			.upsert({ path: fullUrl.pathname })
			.select("*");
		console.info(data);
		if (error) {
			console.error(error);
		}
	}

	next();
});
```

trpcが含まれている場合は使われているケースが多いのでログに残さないようにしている。僕が消し去りたいのはtrpcを使う以前に自分で書いていたrouter.getとかなのだ。

あとはnginxのログをalpに食わせて調べるという手もある。こちらのほうが正攻法だし、無駄な処理もないだろう。今回はテストサーバーでログをそこまで残していなかったので、この手法を取ることにした。
デッドコードが消えていくと気持ちがいい。意外とデッドコードでしか使っていないライブラリなんかも発見できたりする。
Salesforce World Tourに参加してSalesforceを学ぼう

こんにちは
本橋孝昭です

株式会社セールスフォース・ジャパンが主催しているイベント
World Tour Tokyoについて解説します

今回の内容は動画でも公開しています

https://youtu.be/c7rFs9VAkdo?si=qEhwczJHBseM-73O

<iframe width="560" height="315" src="https://www.youtube.com/embed/c7rFs9VAkdo?si=Ssk4qFZJ1oQU02bn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


Salesforceは毎年大きなイベントを行いますが、直近では2024年6月にイベントが開催されます


※以下写真は2023年のSalesforce　World Tour Tokyoのものです
![１SWTT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/b39834e0-a753-b13a-7d18-49522da885f3.png)


今回はSalesforceイベントに何回も参加している私がWorld Tourの見どころを紹介します

どのようなイベントなのか気になる方がいれば最後までご覧ください



## そもそもWorld Tourってなんだ？

World Tourとは株式会社セールスフォース・ジャパンが主催するイベントです
開催期間は2024年6月11日(火) - 12日(水)
開催場所はザ・プリンス パークタワー東京 B2とオンラインで開催されます

なお、上記開催期間以外にもDay0　Post Eventがあります

今回のテーマは
「CRM + AI + データ + 信頼の力でビジネス成長の未来を切り拓こう」

今年のイベントでは、信頼を基盤にデータとAIを活用し成功を収める5つの戦略を紹介するプログラムを提供します。




## Day0からまずは熱い　SFUG CUP 2024

SFUG CUP 2024（第12 回 Salesforce
全国活用チャンピオン大会） がDay0として開催されます

SFUG　CUPとは「Salesforce全国活用チャンピオン大会」で、Salesforceを導入しているユーザのが、いかにSalesforceを自社の業務に活用し、成果を上げているかを発表しあうSalesforceユーザグループによる年次最大のイベントです

毎年開催されているイベントですが、今回のテーマは
AI活用の前提となる『データの収集（入力）と利用』における課題の克服です。

これからのAI活用の展望が楽しみですね。

今回のSFUG CUPではSalesforce利用企業の

今年のSFUG CUPはWorld Tour Tokyoの「Day0/プレイベント」としてオンライン配信されるのでお見逃しなく。

イベントの詳細はこちら

https://event.salesforce-japan.com/swtt24/sfugcup/?i=2FoPlKXqy1y6pxHCsWdWyAjyjIGWLEAE


## Day1　開始早々基調講演から熱い

Day1は9時半の「基調講演 Welcome to the AI Enterprise データがビジネス成長の未来を切り拓く」から始まります

この基調講演では

AIとデータ活用をリードする先進企業の事例を通じて、ビジネスのためのAIが実現する未来が分かるようです

登壇者がとても豪華なので、ぜひ興味がある人は基調講演から参加しましょう

他にもDay1は「「AI倫理」の世界的権威、特別来日。AIに必要なポリシーとは」などAIに関する内容がたくさんありますね


## Day2 今回もある！True to the Core〜顧客の声を製品進化に取り入れる方法

毎回恒例になりつつあるこの企画がやってきました！

今回は、CRM+Data+AI+Trustをキーワードに製品開発責任者が集まり、製品ロードマップの質問や、機能アイデアの提案を行うライブセッションです

質問がある人がSalesforceの方に質問して回答が得られる面白い企画です

なお、過去に私は何回かTrue to the Coreで質問をした経験がありますので、興味がある方はその時にまとめた記事をご参照ください

https://qiita.com/Takaa/items/db6186ea23b25d0249ea


## まだまだあるぞ！Post EventでSalesforceの資格合格に挑戦しよう

今回のSalesforce World TourはDay2では終わらない！

なんと、Post Eventとして資格対策ウェビナーCertification Daysがあります

Certification Daysは、Salesforce認定資格を目指している方必見の無料資格対策ウェビナーです。資格取得に必要な知識を確認し、Tipsやベストプラクティスなど学習のポイントを学ぶことが可能です。

今回はCertification Daysではじめて認定アソシエイトが登場したようです

＜開催日時＞
認定アドミニストレーター：2024年6月13日 (木) 13:00-18:00
認定アソシエイト：2024年6月14日 (金) 10:00-18:00 *お昼休憩を挟みます

ぜひ資格勉強に興味がある方はご参加してみてはいかがでしょうか？

※参考URL

https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54V00007ajdsSSAQ


## おまけ　私も登壇します

最後におまけ（完全な蛇足で恐縮です）ですが、
私も短い時間ですが登壇することが決まりました
（私のセッションはオンライン配信は無く会場参加のみです）

ぜひ会場に来ていただければお会いできればと思います！

![もとはしたかあき.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/bc28f6ee-66cd-30ee-f958-cfee72bf6910.png)



他にも面白いセッションはたくさんあります。
ぜひ皆さんもSalesforce World Tourを楽しみましょう！
TypeScriptにおけるconstructorメソッドの使い方と特徴

## はじめに
TypeScriptでは、クラス内でインスタンスが生成されたときに初期化処理を行うためのconstructorメソッドが利用されます。この記事では、constructorメソッドの基本的な使い方と特徴について解説します。

## constructorメソッドとは
constructorメソッドは、クラスがインスタンス化された際に自動的に呼び出される特別なメソッドです。このメソッドを使用することで、インスタンスの初期化やインスタンス変数の設定などを行うことができます。

### 構文
```ts
class ClassName {
    constructor(/* パラメータ */) {
        // 初期化処理やインスタンス変数の設定など
    }
}
```
## constructorメソッドの特徴
1. 初期化: インスタンスが生成されるときに、クラス内のプロパティやメソッドを初期化します。
2. インスタンス変数の設定: インスタンス変数（プロパティ）の初期値を設定します。
3. 引数を受け取ることができる: 必要に応じて引数を受け取り、初期化処理に利用することができます。
4. 親クラスのコンストラクタ呼び出し: クラスが継承している場合、super()を使用して親クラスのコンストラクタを呼び出します。
### 使用例
以下は、constructorメソッドを使用してクラスの初期化処理を行う例です。

```ts
class MyClass {
    message: string;

    constructor(msg: string) {
        this.message = msg;
    }

    showMessage() {
        console.log(this.message);
    }
}

let myObj = new MyClass("Hello");
myObj.showMessage(); // Output: Hello
```
この例では、MyClassクラスのconstructorメソッドが引数 msg を受け取り、messageプロパティにその値を設定しています。その後、showMessageメソッドでmessageを表示することができます。

## まとめ
constructorメソッドは、クラスの初期化処理やインスタンス変数の設定に使用される重要なメソッドです。引数を受け取ることができるため、柔軟な初期化処理を行うことができます。
AWS copilotでNextJSの静的ホスティングを自動化する

# 初めに
SSGで良いサービスならAWS copilotでStatic SiteにすればECSとかに比べればかなりお得だし、github actionsとか作らなくて良いからめっちゃ楽じゃんって思ったけど、いまいち情報が少なかったのでまとめました


# AWS Copilotについて
https://aws.github.io/copilot-cli/ja/

# NextJSの設定
`next.config.mjs`以下のように`output: 'export'`を追加してbuild時にHTMLが出力されるようにします
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
};

export default nextConfig;
```
`npm run build`等、ビルドコマンドを実行して`out`ディレクトリにHTMLが出力されているのを確認しておきます

# AWS copilotの設定と手動デプロイ
 `copilot init`で`Static Site`を選択します
![スクリーンショット 2024-05-11 18.00.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322555/27c9e60f-b497-e29b-3c38-757314e13f98.png)

- `Which directories or files would you like to upload for サービス名`と聞かれるのでHTMLが吐き出されている`out`ディレクトリでスペースを押します（returnだと何も選ばれず次に行ってしまうので注意）
- `Would you like to deploy an environment?`と聞かれるので`y`を選び、environmentを作成もしくは選択してデプロイします
- デプロイが成功すると`Recommended follow-up action:`にURLが記載されているのでアクセスして、ページが観れていれば成功
- これ以降は`copilot deploy`で手動デプロイできます

`copilot`ディレクトリにmanifest.ymlが作成されますが、一応こんな感じ
```yml
# The manifest for the "frontend" service.
# Read the full specification for the "Static Site" type at:
# https://aws.github.io/copilot-cli/docs/manifest/static-site/

# Your service name will be used in naming your resources like S3 buckets, etc.
name: サービス名
type: Static Site
files:
  - source: frontend/out # 自分の環境に合ったディレクトリにしてください
    recursive: true

# You can override any of the values defined above by environment.
# environments:
#   test:
#     files:
#       - source: './blob'
#         recursive: true
#         destination: 'assets'
#         exclude: '*'
#         reinclude:
#           - '*.txt'
#           - '*.png'
```

# 自動化する
とりあえずデプロイできるようになったので、これをCodePipelineで自動化していきます
- `copilot pipeline init`を実行します
- `What type of continuous delivery pipeline is this?`と聞かれるので`Workloads`を選択します
- `Which environment would you like to add to your pipeline?`で上記で作成もしくは選択したenvironmentをここでも選択します
- `copilot/pipelines/pipeline名/buildspec.yml`に以下のように`install`と`commands`に追記します。これによって`npm run build`が実行されて、`out`にHTMLが出力されるようにします
```yml
# Buildspec runs in the build stage of your pipeline.
version: 0.2
phases:
  install:
    runtime-versions:
      nodejs: 18
    commands:
      - echo "cd into $CODEBUILD_SRC_DIR"
      - cd $CODEBUILD_SRC_DIR
      # Download the copilot linux binary.
      - wget -q https://ecs-cli-v2-release.s3.amazonaws.com/copilot-linux-v1.33.3 -O copilot-linux
      - chmod +x ./copilot-linux
  build:
    commands:
      # コマンドは環境に合わせてください
      - cd frontend
      - npm ci
      - npm run build
      - cd ..
# 以下省略
```
- `copilot pipeline deploy`を実行します
- `ACTION REQUIRED!`と表示されるのでURLをクリックしてgithubと連携します
![スクリーンショット 2024-05-11 18.32.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322555/7e932c24-16d2-97e9-b831-d8b0ff052f27.png)

これで設定完了です
`copilot/pipelines/pipeline名/manifest.yml`の`source.properties.branch`に記載されているブランチにpushするとCodePipelineが実行されてデプロイが行われます
【備忘録】PyTorch tensor操作

# はじめに
PyTorchを活用するシーンが増えてきたので
tensor操作に関して備忘録を残しておくことにする

:::note warn
初級者向けの内容です
:::

# tensor操作
**NumPyのarray**操作と似ている

# ①定義
:::note info 
例） 2行3列のデータを両者で定義すると・・・

~~~py
import numpy as np
npdata = np.array( [ [0,1,2],[3,4,5] ] )
~~~

~~~py
import torch
tendata = torch.tensor( [ [0,1,2],[3,4,5] ] )
~~~
:::

他にも類似した関数は下記の通りである．

:::note info
ゼロを定義する
~~~py
# numpy
npzero = np.zeros((2,3))
# tensor
tenzero = torch.zeros((2,3))
~~~

:::

:::note info
1を定義する
~~~py
# numpy
npone = np.ones((2,3))
# tensor
tenone = torch.ones((2,3))
~~~
:::


:::note info
乱数を定義する
~~~py
# numpy
npran = np.random.rand(2,3)
# tensor
tenran = torch.rand((2,3))
~~~
:::

# ②tensorのサイズ，タイプ等の確認

### データ型の確認
~~~py
ten = torch.tensor( [[0,1,2],[3,4,5]])
ten.dtype
~~~

### サイズの確認

~~~py
ten.shape
~~~

### Pythonのオブジェクトタイプの確認

~~~py
type(ten)
~~~


:::note warn
NumPyとPyTorchでデフォルトの型が異なる点注意が必要

| | int型 | float型 |
|:-:|:-:|:-:|
|NumPy   | int32  |float64   |
|PyTorch   |int64   |float32   |

:::

例えば，NumPyと型を揃えて，PyTorchで定義したいときは
**dtype**オプションを活用すると良い
~~~py
ten2 = torch.zeros( (2,3), dtype = torch.int32 )
~~~

# ③tensor　 ↔️　numpy.array 変換
両者の間での変換については下記の通り

::: note
**tensor から numpy.arrayへ変換**
~~~py
# tensorで宣言
before = torch.zeros(3)

# tensorからnumpy arrayに変換
after = before.numpy()
~~~

**Numpy arrayからTensorに変換**

~~~py
change = torch.from_numpy(after)
~~~
:::

::: note
**さらに**
**pandas dataframe　から　Numpy arrayに変換 tensor に変換**
~~~py
# pandas dataframe宣言
import pandas as pd
dict1 = {"a":[1,2,3],"b":[1,2,3],"c":[1,2,3]}
df = pd.DataFrame(dict1)

# pandas　から　numpyに変換
arr = df.to_numpy()

# numpy　から tensorに変換
arrcha = torch.from_numpy(arr)
~~~

:::

# ④転置行列
**transpose**を活用した転置行列の求め方は下記の通り
~~~py

# 4行3列の乱数tensorを定義
x = torch.rand((4,3))

# xの転置行列を算出
Tx = x.transpose(0,1)
~~~

# ⑤行列のサイズ変更
**reshape**を活用した行列サイズ変更は下記の通り
~~~py
# 1行16列データを作成
x = torch.ones(16)

# 2行8列データに変換
rex1 = x.reshape(2,8)
~~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696103/84413850-fdb2-288f-2b14-be69c829c4f8.png)

さらに列数をオートで4行に変換したいときは**reshape(4,-1)**
~~~py
# 4行4列データに変換
rex2 = x.reshape(4,-1)
rex2
~~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696103/f4c728f6-5721-4d19-b093-8aa66a265037.png)

###  ※　割り切れないときはエラーになるので注意
~~~py
x2 = torch.ones(15)
rex3 = x2.reshape(2,-1)
rex3     
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696103/2db5278e-f46c-a6f4-9ca1-50b9ea6c54de.png)


操作に関するノートブックはこちら

https://github.com/Ssurf777/pytorch_tensorflow_MLP_compare/blob/main/Pytorch_tensor%E6%93%8D%E4%BD%9C.ipynb
正の相関、負の相関、無相関

## 正の相関、負の相関、無相関

相関には正の相関と負の相関があります。

正の相関では共分散は正、負の相関では共分散は負になります。

ここで、$(𝑥_𝑖−\bar{𝑥})(𝑦_i−\bar{y})$がどういう時に正になり、どういうときに負になるか考えてみましょう！
負になる場合は、$(𝑥_𝑖−\bar{x})$か$(𝑦_𝑖−\bar{𝑦})$が負のとき、つまり$𝑥_𝑖$が$\bar{𝑥}$よりも小さくて$𝑦_𝑖$が$\bar{y}$よりも大きいとき、もしくはその逆です。正になるときは$(𝑥_𝑖−\bar{x})$か$(𝑦_𝑖−\bar{𝑦})$が両方とも正のとき、もしくは負のときです。

上記を図で表すと以下のように色分けすることができます。
![正の相関・負の相関.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780659/21f6eb1a-5014-e64b-b19a-d39976daf83a.png)

そして、共分散はこの$(𝑥_𝑖−\bar{x})$か$(𝑦_𝑖−\bar{𝑦})$を全ての値において足し合わせていくのです。そして、共分散の値が大きくなれば正、小さくなれば(マイナスであれば)負となることがわかる。

![相関.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780659/e279e708-d82b-0743-c891-8b1252331af0.png)

整理すると、右肩上がりのような散布図(左上図)の場合は、**正の相関**である。
右肩下がりの場合は、**負の相関**となる。では、どっちとも取れなさそうな散布図(左下図)だとしたらどうでしょう。
これは、**無相関**と言い、お互いの変数は独立であるといいます。無相関の場合、共分散を計算すると正と負で互いに打ち消しあうこととなるので、値は0に近づきます。
※共分散が0だからといって、相関がないとは言えないので注意(右下図のような場合もある)

共分散はこれらの相関の強さの指標になりますが、計算した共分散の値をどう解釈していいか悩みますよね。
前回の記事で計算した結果について、これが強い相関なのか弱い相関なのか判断ができないのです。
array([[78.92813149, 8.28938892],
　　　[ 8.28938892, 1.90660851]])

そこで、共分散が取りうる値をある値の範囲を“標準化”することを考えます。
共分散を標準化した値が**相関係数**になります。
クーポン情報を要約、調査するメディアを書きました。

無料ですぐに使える！WEBクーポン情報を徹底調査、内容を要約して配信しています。

【無料クーポン.com】
https://xn--pckyeuc8a9327cbqo.com/ 

無料クーポン情報をまとめて配信しています。
配信されるクーポン情報は不定期・期間限定の掲載となっているので
定期的にチェックすることで
お得な最新クーポン情報をチェックできます。
OCI概要とリージョン、可用性ドメイン(AD)、フォルトドメインについて

# OCIとは
Oracle社が提供するパブリッククラウドサービス[^パブリッククラウドサービス]のうちIaaS[^IaaS]、PaaS[^PaaS] をOCIと総称される。
他パブリッククラウドサービスにはAmazon社が提供するAWSやMicrosoft社が提供するAzureなどが挙げられる。
[^パブリッククラウドサービス]: https://altus.gmocloud.com/suggest/public_cloud/
[^IaaS]: https://www.idcf.jp/words/iaas.html
[^PaaS]: https://www.idcf.jp/words/paas.html
# リージョン　可用性ドメイン(AD)　フォルトドメイン
## リージョン
OCIは世界中にデータセンターを配置している。日本国内だと東京と大阪にデータセンターがある。
ここでの東京や大阪などの**地理的な分類**がリージョンである。
基本的にはサービスを利用する場所から近いリージョンを選択する。（遅延などパフォーマンスに関わるため）

:::note info
リージョンは**局所化された地理的な領域**
1つまたは3つの可用性ドメインで構成
:::
## 可用性ドメイン(AD)
Availability Domain の略としてADとも呼ばれる。
リージョン内に置かれたデータセンターとなり、**リージョンごとに3つまたは1つ**の可用性ドメインが存在する。（東京と大阪は１つ）
それぞれの可用性ドメイン（データセンター）は同じリージョン内に存在するが電源や冷却などのインフラやネットワークを共有しない。（同時に障害が起こりにくい）
そのため、３つの可用性ドメインがあるリージョンではいずれか１つの可用性ドメインに障害が発生した場合にも他の可用性ドメインには影響がない。

:::note info
可用性ドメインはリージョンごとに１つまたは３つ存在するデータセンターのこと
それぞれの可用性ドメインは**インフラを共有しない**
:::
## フォルトドメイン
障害ドメインとも呼ばれ、**可用性ドメイン内に３つ存在**（可用性ドメインを３つに分割）する。よく**論理的なデータセンター**と表現される。
サーバーラックや電源の分配装置などが別になっており、１つのラックが障害を起こしたり、メンテナンスなどが発生しても他のフォルトドメインには影響がない。
これにより、東京や大阪などの可用性ドメインが１つのリージョンでもある程度の可用性を担保することができる。

:::note info
フォルトドメインはどの可用性ドメインでも**３つ**存在
１つのデータセンター（可用性ドメイン）を分割する概念であり、**論理データセンター**と呼ばれる。
:::

# 参考資料
https://speakerdeck.com/ocise/oracle-cloud-infrastructure-hazimefalse-bu
gitでpycacheフォルダをリモートリポジトリから消す方法

# はじめに
djangoでwebアプリケーションの作成をしていたときに、.gitignoreを作成していないことに気づき、作業途中でgitignoreを追加しました。
しかし、途中から.gitignoreを追加すると追跡はしなくなりますが、リモートリポジトリにはpycacheフォルダが残ってしまいます。
なので、リモートリポジトリからpycacheフォルダを消そうと思います。

# ターミナルでコマンドを実行
以下のコマンドをターミナルで実行します。

```
git rm --cached `git ls-files | grep __pycache__`
```

コマンドで行っていることは以下のとおりです。


-  `git rm --cached <対象ファイル>`
リモートリポジトリのみから削除


- `git ls-files`
Gitリポジトリに含まれるすべてのファイルのリストを出力


- `grep __pycache__ <対象ファイル>`
__pycache__を検索


- `git ls-files | grep __pycache__`
|は左側の出力を右側の引数として渡す


- ``git ls-files | grep __pycache__``
バッククォートト```` は、囲んだ部分をコマンドとして実行する。今回の場合は、``が優先的に実行される。


まだCLIのコマンドやgitのコマンドを使い慣れていないことを痛感しました…
【CSS】リストの連番を丸括弧で囲った数字で表示する

# HTMLのリストの項番を括弧付き数字で表示する方法

リストの連番を `(1)` のように表示したい場合のCSSの記述方法をググってみたものの、インデントが崩れるなど、イケてるコードが無かったので自分で考えてみた。

## 結論
```css stye.css
ol.hoge li {
  position: relative;
  list-style-type: none;
}

ol.hoge li:before {
  position: absolute;
  right: calc(100% + 0.5rem);  /* 0.5remは連番とテキストとの余白 */
  content: "(" counter(list-item) ")";
}
```

```html index.html
<ol>
  <li>fuga</li>
  <li>fuga</li>
  <li>fuga</li>
</ol>
<ol class="hoge">
  <li>hoge</li>
  <li>hoge</li>
  <li>hoge</li>
</ol>
```

## 完成物
![bandicam 2024-05-11 17-30-36-820.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3721815/fec23e3e-87d9-1dc9-ffdf-059acab30cd5.jpeg)

連番の表示には多くの記事で記載されている通り`li:before`を用いるのがベストっぽい。

`li:before`の配置については、`li`を基準に右から100% + 余白分の位置に固定することで、連番の値が二桁以上になってもテキストと連番が重ならず、インデントが崩れるのを防げる。

`list-item`は、`ol`のリストがデフォルトで保持しているカウンター。
Android StudioのGeminiコーディングサポートでできること

Android　Studio Jellyfishの安定版がリリースされ、Geminiが標準搭載されたようなので触ってみました。
どんなことができるのか把握するためのただの自分用メモです。

## セットアップ

[こちら](https://developer.android.com/studio/preview/gemini?hl=ja)を参考にセットアップできます。

使用する際には、自分のプロジェクトを参照するか選べるようになっています。プロダクトに使う場合は参照させないようにした方が良いでしょう。

![スクリーンショット 2024-05-11 12.25.44（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/9c20133a-cda8-8b0a-5477-d62c9daae8c5.png)

## チャット

ChatGPTのようなチャットボットです。

以前は変数名など考えるのが面倒な時にChatGPTに投げていたのですが、全てAndroid Studioで完結するようになったので地味にありがたく使っています。

またコードを書かせたら、コードブロックの下にそのコードに関するオプションが出てきます。

![スクリーンショット 2024-05-11 12.42.18（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/f5071ecb-8e72-1e5e-772e-1de89b0a19ab.png)

* コピー
* エディタ側のカーソルが当たっている箇所に貼り付け
* 新しいファイルを作成してそこに貼り付け
* Explore in Playground（これはよくわからなかったのでGeminiに聞いてみました）

![スクリーンショット 2024-05-11 13.00.40（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/2723ef04-a747-2d50-9510-c850e626a90c.png)

生成されたコードをそのまま使うことはほぼ無いかと思うので使用機会は少なそうですが、こういったオプションを使えることは覚えておくと良いかもしれません。

## コーディングサポート

またエディタ側で右クリックしてGeminiアクションから2つのアクションが行えます。

* Explain Code
どういったコードなのか説明してくれます。ソース読む時に役立つかもしれない。

![スクリーンショット 2024-05-11 13.15.35（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/1199fdfd-be2d-ac22-e925-f224c3cf24dc.png)

* Suggest Improvements
コードの改善点を指摘してくれます。リファクタリングに役立つかもしれない。

![スクリーンショット 2024-05-11 13.16.46（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/d7a7fd05-ba87-7f1e-0aec-c501ee8b47f8.png)

注意点としては、それぞれそのまま投げると英語回答で返ってくるので、答えてもらった後「上記の回答を日本語訳して」とか投げた方が読みやすいです。

## エラーの説明

* コード上のエラー
エラーにカーソルを合わせると「Ask Gemini」の項目が表示されます。
これを押すと上記チャットに質問が自動入力されます。
エラーの内容が全くわからん、という初学者のうちは良さそう。

![スクリーンショット 2024-06-07 10.38.04（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/37539ccc-3cf7-48f1-861a-a7cbf45a7ce5.png)

* クラッシュ等のエラー
logcatでErrorの横にGeminiに聞くオプションが追加されました。
こちらもクリックするとチャットに質問が飛びます。

## Koala Preview版で追加された機能

* Document Code
選択した部分に応じてファイルの末尾に内容を記述したドキュメントを書いてくれます。
diffが表示されるので、左上でAccept All Changesを押せば反映されます。

![スクリーンショット 2024-06-07 10.29.56（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/74b5b023-778f-7b39-04fa-45f651705dc1.png)

* Comment Code
選択部分のコードを理解してコメントを追加する機能...のはず。
カーソルがどこに当たっているかで内容が結構変わる上、何かよく見る内容を説明するコメントとは違う気がする。
こちらもdiffで事前に表示してくれます。

![スクリーンショット 2024-06-07 10.36.16（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724617/9aa86275-65f0-4d8f-089d-bdf6ce97cb72.png)

## 今後追加予定の機能

Google I/O 2024で発表された機能です。

* リファクタリング
transformという機能が追加され、そこに"simplify and make idiomatic"と入力するとリファクタリングしてくれる機能。

* Composeビュー自動生成
チャットに対して画像データを読み込ませることで、自動でComposeのビューを作ってくれる機能。
これが本実装されたら開発効率爆上がりしそうで一番期待の機能です。

以下動画参照
https://www.youtube.com/watch?v=ddcZnW1HKUY

## まとめ

まだちょっと触ったくらいなので実用性がどれほどなのか分かりませんが、これを無料で使えるというのは特に個人開発者などにはかなり良さそうです。

Android開発者は今後これを使うのがスタンダードになるかもしれません。