OmniAICreator/Qiita-1.07M huggingface dataset:
AtCoder2回目

競技プログラミングで解けなかった箇所を端的にまとめ、補足説明を足しました。

## べき乗関数
### `pow(3, 2)`
- 3の2乗（3^2）を計算します。
- 結果: `9`

```python
print(pow(3, 2))  # 出力: 9
```
### `pow(3, 2, 5)`

-3の2乗（3^2）を5で割ったあまりを計算します。
- 素早く計算できる仕組みになっており、大きな数のべき乗でも効率的に余りを求めることができます。
```python
print(pow(3, 2, 5))  # 出力: 4
```
## 通常の余りを求める作業との比較
- 2**1000000000 % 3 と pow(2, 1000000000, 3) を比較してみます。
```python
result1 = 2**1000000000 % 3
result2 = pow(2, 1000000000, 3)
print(result1)  # 出力: 1
print(result2)  # 出力: 1
```
- 2**1000000000 % 3 は非常に大きな数の計算となり、時間がかかる可能性があります。
- pow(2, 1000000000, 3) は効率的に計算でき、短時間で結果を得られます。

## 何桁かを知る
## `len(str(N))`
- 整数Nの桁数を取得します。
- int 型の整数Nを str 型に変換し、その長さを len 関数で取得します。
```python
コードをコピーする
N = 12345
num_digits = len(str(N))
print(num_digits)  # 出力: 5
```
## 分数の形を○○で割ったときのあまり
### フェルマーの小定理
- フェルマーの小定理を利用して、分数の形を○○で割ったときのあまりを求めることができます。
- フェルマーの小定理: a^(p-1) ≡ 1 (mod p) ただし、p は素数で a は p と互いに素な整数。
#### 具体例
- a / b を p で割ったあまりを求めたいとき、 a * b^(p-2) % p として計算します。
``` python
a = 10
b = 3
p = 7

# b^(p-2) % p を計算
b_inv = pow(b, p-2, p)

# a * b_inv % p を計算
result = (a * b_inv) % p
print(result)  # 出力: 5
```
## listの中のある文字列の出現回数
## `list.count()`
- リスト内の特定の要素の出現回数を数えます。
```python
my_list = ['apple', 'banana', 'apple', 'cherry', 'apple']
count_apple = my_list.count('apple')
print(count_apple)  # 出力: 3
```
以上、競技プログラミングで使えなかった関数とその補足説明をまとめました。
【React】タブ切り替えUIの設計~stateとクエリパラメータ、どちらを使うべきか?~

## はじめに
実務で、タブを切り替えることで表示するデータを変更するようなUIを実装することになりました。
この実装をするにあたり、設計時に、状態管理の方法として以下の2つのアプローチを検討しました。

1. Stateによって切り替える方法
2. クエリパラメーターによって切り替える方法

それぞれの方法にはメリットとデメリットがあるため、これらを比較し、最適な使い分けを考えてみます🎉

### 結論
先に両者の使い分けについての結論を書いておきます。

:::note warn
**stateを使う場合**
- 簡単なUIや内部的なタブ切り替えで、URLの共有を気にする必要がない場合
- パフォーマンスが重要視される場合

**クエリパラメータを使う場合**
- URLの共有やブックマークが重要な場合。例えば、ユーザーが特定のタブの情報を他のユーザーと共有したい場合
:::

## メリット・デメリットの比較
### stateを使ってタブを切り替える場合
stateを使ってタブを切り替える場合、状態管理が全てReactコンポーネント内に収まるため、以下のようなメリットがあります。

:::note info
**stateでタブを切り替えるメリット**
- 実装がシンプル
- パフォーマンスがいい
- 外部依存が少ない
:::

**実装がシンプル**
「選択されているタブは何か？」というstateを1つ定義するだけで、タブの状態を管理することができます。
コードがシンプルでわかりやすくなります。

**パフォーマンスがいい**
URLが変更されないので、高速にUIが切り替わります。

**外部依存が少ない**
React Routerなどの外部ライブラリに依存しません。


一方でURLにタブの状態が含まれないため、以下のようなデメリットがあります。

:::note alert
**stateでタブを切り替えるデメリット**
- 指定したタブをURLを共有できない
- ブラウザのブックマークや履歴が活用できない
:::

**指定したタブのURLを共有できない**
URLを共有した際にタブの初期状態で開かれてしまいます。
~~試しに[XのHome](https://twitter.com/home)にアクセスし、タブを「Following」に切り替えた状態で、URLを共有してみてください。タブが「For You」の状態で開かれるはずです。「Following」タブをURLで誰かに共有することはできません😢~~

**ブラウザのブックマークや履歴が活用できない**
ユーザーが特定のタブの状態をブックマークしたり、履歴から特定のタブに戻る・進む操作をすることはできません。

### クエリパラメータを使ってタブを切り替える場合
クエリパラメータを使ってタブを切り替える場合、　タブの状態がURLに含まれるため、以下のようなメリットがあります。

:::note info
**クエリパラメータでタブを切り替えるメリット**
- 指定した特定のタブのURLを共有できる
- ブラウザのブックマークや履歴が活用できる
:::

**指定した特定のタブのURLを共有できる**
URLを共有した際に直接特定のタブを開くことができます。
試しにXの「Notificaitions」ページで「Mentions」タブに切り替えた状態のこちらのURL（https://twitter.com/notifications/mentions） に遷移してみてください。初めて「Notificaitions」ページを開くと、「All」タブが開かれますが、リンクを開くと「Mentions」タブが開くことが確認できます。

**ブラウザのブックマークや履歴が活用できる**
ユーザーが特定のタブの状態をブックマークしたり、履歴から特定のタブに戻る・進む操作をすることができます。

一方で、以下のようなデメリットがあります。

:::note alert
**クエリパラメータでタブを切り替えるデメリット**
- 実装が複雑になる
- パフォーマンスが落ちるかも…
- 外部依存が増える
- URLが長くなる
:::

**実装が複雑になる**
クエリパラメータを扱うため、React Routerなどの外部ライブラリとの連携が必要になり、stateだけの実装に比べて複雑になります。

**パフォーマンスが落ちるかも…**
URLの変更に伴うリダイレクトやページの再レンダリングが発生するため、パフォーマンスが落ちる可能性があります。（まあそこまで気になるレベルではないと思いますが…）

**外部依存が増える**
状態管理がURLやルーティングに依存するため、React Routerなどの外部ライブラリに依存することになります。

## 使い分け
両者のメリット・デメリットを考慮すると、以下のような使い分けが良さそうです。

:::note warn
**stateを使う場合**
- 簡単なUIや内部的なタブ切り替えで、URLの共有を気にする必要がない場合
- パフォーマンスが重要視される場合

**クエリパラメータを使う場合**
- URLの共有やブックマークが重要な場合。例えば、ユーザーが特定のタブの情報を他のユーザーと共有したい場合
:::

**基本的にはstateを使って実装する。ユーザーさんがURLでタブの情報を共有するようなケースが想定される場合は、クエリパラメータを使って実装する**という方針が良さそうですね🎉

## 終わりに
今回の実務では、タブごとの情報を共有するケースがありそうだったので、クエリパラメータを使ってタブを切り替える方法を採用しました。

初心者さんは、ついつい、stateを使って実装しがちですが、必ずしもUXが良いとは限らないので注意しましょう。（最近ハマっているYouTuberのナコンさん風に言ってみました😇）

紹介した2つ以外にも実装方法はありそうですね。いい方法がありましたら教えて下さい🙇

Xで日々の業務や日常を発信しています！
よろしければフォローをお願いします🍢

https://twitter.com/odendayoko

### 追記
[XのHome](https://twitter.com/home)について、URLにはタブの情報は含まれないのですが、リンクからは開いていたタブに遷移できることがわかりました。何か別の方法でタブの状態を保持しているようです🤔わかる方いらしたら教えて下さい🙇
pnpmのバージョンが変わらない！

## はじめに
別プロジェクトの環境構築をしていたところ`pnpm`のバージョン違いでローカルでの起動ができなかったので、`pnpm`のバージョンを変更しました。
色々詰まったので詰まりポイントを挙げながら紹介します。

### 今のバージョンがわからない
以下を叩くこと解決。今どのようなバージョンで動いているか確認できました。
```terminal
pnpm -v
```

### バージョン指定してインストールしたがバージョンアップしない
下記を叩いてみたが更新されなかったので、`pnpm`をアンインストールすることにした。
```terminal
npm install -g pnpm@8.0.0
```

### `pnpm`のパッケージの場所がわからない
アンインストールするためにパッケージの場所確認のコマンドをたたいて確認した。
```terminal
where pnpm 
```

### 削除のコマンドがわからない
下記にパッケージの場所を渡してコマンドをたたいた。
```terminal
rm -rf {ここにwhereで調べたパスを指定}
```

### インストールしてもバージョンが上がらない
誤って以下のコマンドを指定していた。
```terminal
npm install pnpm@8.0.0
```
グローバルインストールの指定を忘れていたので追加した。
```terminal
npm install -g pnpm@8.0.0
```

## さいごに
今回はエラー分に`pnpm`のバージョンが開発環境と異なるよ〜！と記述があったのですぐにこの対応が必要なことに気づくことができましたが、別プロジェクト・別システムのプロジェクトの環境構築が必要になった時は、`pnpm`に限らず依存パッケージのバージョン確認は必須だと感じました。
開発日記をLogseqで書く


## 開発日記を Logseq で書く

開発日記書いてますか？私がここ 2,3 か月使っているのが[Logseq](https://logseq.com/)です。どういった使い方をしているか、紹介します。

### 開発日記を書く理由

一番は思考の整理です。開発中に思いついたこと、調べたこと、試したことを書き留めることで、あとで見返すことができます。また、他の人に教えるときにも役立ちます。

また、併せて言語化することで、自分の理解が深まり、言語化能力も向上します。

### Logseq の使い方

Logseq は、Obsidian のようなリンク機能をもつノートアプリです。Markdown を箇条書き感覚で書くことができます。

また、2024年6月時点ではObsidianとは異なり、商用ライセンスは不要です。

### 開発日記の始め方

まず、日誌というところクリックすると以下のように今日の日付が表示されます。ここに開発日記を書いていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552182/b6becc51-9159-8569-c036-0366ba9fc078.png)


この日誌機能では、その日の気づきややったことを書いていきます。また、`/current time`と入力すると、現在時刻を挿入できます。

### プロジェクトを作成する

リンク機能を活かして、業務で参加しているプロジェクトごとにページを作成します。そのページには、そのプロジェクトに関する情報を書いていきます。

作成には、`[[`と`]]` or `#` で、リンクを作成できます。

ex)

```text
[[プロジェクトA]]
#プロジェクトB
```

また、ページにはタグをつけることができます。以下のように、`tags::`の下にタグを記述します。

```text
tags:: tag1 tag2
```

### 日誌とプロジェクトをリンクさせる

日誌にプロジェクト関する情報を書いたら、その日誌をプロジェクトのページにリンクさせます。

日誌 → プロジェクトへのリンクは日誌のページに以下のように記述します。

```text
#プロジェクトA
  - 作業した内容
```

プロジェクト → 日誌へのリンクはプロジェクトのページに以下のように記述します。

```text
-  [[Jun 11th, 2024]]
```

ちなみに`/today`と入力すると、今日の日付を挿入できます。

### タスクの作成

プロジェクト管理ツールや Issue 管理で管理しないような、個人的なタスクを管理するようにしています。

タスクは作成したアイテムの先頭に`TODO`, `LATER`と記載することで、タスクとして認識されます。優先度も A~C で管理できます。

また、編集中に Enter キーを押すと、自動的にタスク化、タスク状態変更を行うことができます。

### まとめ

今回は、Logseq を開発日誌と活かすための Tips を紹介しました。他にも、Logseq はさまざまな使い方ができるので、ぜひ試してみてください。
[投稿１日目]生成AIによる日常の変化

## 生成AIによる日常の変化

Qiita民の皆さん、こんにちは！今日もプッシュしていますか？今日は、生成AIがどのように私たちの生活に影響を与えているかについて掘り下げてみたいと思います。


我々の生活に瞬く間に浸透した、[ChatGPT](https://www.chatgpt.com)を始め様々な生成AIの技術は、我々を魅了し続け、興奮させてくれます❤️‍🔥




### 1. コード生成の変革

まず、プログラマーにとって最も身近な話題として、生成AIによるコード生成の進化について振り返っていきましょう！

[GitHub Copilot](https://copilot.microsoft.com/)や[OpenAIのCodex](https://openai.com/index/openai-codex/)は、我々が使う自然言語からコードを生成する能力を持っています。これにより、コードの自動補完や[ボイラープレート](https://www.weblio.jp/content/%E3%83%9C%E3%82%A4%E3%83%A9%E3%83%BC%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89#google_vignette)の生成が驚くほど効率的になりました🤩本当に素晴らしい技術ですね！

例えば、以下のようなシンプルな要求でも、高品質なコードを生成できます。

```python
# ユーザーの入力を逆順にして返す関数
def reverse_string(user_input):
    return user_input[::-1]
```

このように、生成AIはコーディングを助け、バグの減少や開発スピードの向上に寄与してくれます。

### 2. 勉強のパーソナライズ化

生成AIは、個々の学習スタイルに合わせた学習ツールの開発にも役立っています。例えば、AIが受講生の理解度をリアルタイムで解析し、最適な教材や問題を提供することができます。これにより、効率的な学習が可能となり、理解が深まる速度が速くなります。

具体例として、解析・ChatGPTが使われている学習サイトを以下に掲載します。
・[Codecademy](https://www.codecademy.com/)
・[CodeSignal](https://codesignal.com/)
・[LeetCode](https://leetcode.com/)

気になる方はぜひチェックしてみて下さいね！

### 3. 画像生成と音楽生成そして、動画生成

生成AIは画像や音楽、さらには動画の分野でも革命を起こしています。例えば、[DALL-E-3](https://openai.com/index/dall-e-3/)や[Stable Diffusion](https://ja.stability.ai/stable-diffusion)などのツールは、テキストから画像を生成したり、写真をアートスタイルに変換したりすることができます。

例えば、以下は私が限界まで近づけ生成したカービィです。

<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2254648/907cd4c2-3e3f-51fb-f7f0-a254bf640057.jpeg">


これらのツールを使えば、デザイナーやアーティストは、迅速にアイディアやコンセプトを具現化したり、クリエイティブなプロジェクトをサポートするための素材を生成したりできます。まさに、目から鱗ですね🐟

ちなみに以下は私がDellーEで作った「歯」をモチーフにした、LINEスタンプです😁！
使いたくなるような愛らしさを感じますよね！？…そんな事ない？

ぜひ使ってみて下さいね！＞🦷

https://store.line.me/stickershop/product/25845917/ja



### まとめ

さて、今回が初めての投稿となったのですが、いかがでしたでしょうか？リラックスしていただけたら幸いです。

生成AIは、私たちの生活のあらゆる側面に革命をもたらしています。コーディングの効率化、学習の推進、アイディア生成コンテンツの進化など、その影響は計り知れません🤯
これからも生成AIの進化を見守りながら、新たな可能性と刺激を探し求めましょうね！

皆さんの生成AIに関する体験や意見もぜひ教えてくださいね。それでは、また次回お会いしましょう！
JavaScript: 部分文字列編

部分文字列の出現回数を計算する処理(2回以上する出現する全ての部分文字列)における、組み込み関数の性能を比較してみます。ちなみに手法自体は素朴で馬鹿力任せのごみです。
```js
//対象文字列
const txt=Object.getOwnPropertyNames(this).join(" ").slice(0,1<<12);

// indexOf法
function ss_index(s){
	for(var a=new Date,b=0,t=2,i,j,m={__proto__:null},p,f=1,z=s.length;f;++t)
		for(f=i=0;i<z-t;)
			if(!m[p=s.substr(j=i++,t)]&&~(j=s.indexOf(p,j+t))){
				for(f=2;~(j=s.indexOf(p,j+t));)f++;
				m[p]=f,b++
			}
	console.log(new Date-a,b)
}
// split法
function ss_split(s){
	for(var a=new Date,b=0,t=2,i,j,m={__proto__:null},p,f=1,z=s.length;f;++t)
		for(f=i=0;i<z-t;)
			if(!m[p=s.substr(j=i++,t)]&&~(j=s.indexOf(p,j+t)))
				m[p]=f=s.split(p).length-1,b++
	console.log(new Date-a,b)
}
// slice+split法
function ss_slice_split(s){
	for(var a=new Date,b=0,t=2,i,j,m={__proto__:null},p,f=1,z=s.length;f;++t)
		for(f=i=0;i<z-t;)
			if(!m[p=s.substr(j=i++,t)]&&~(j=s.indexOf(p,j+t)))
				m[p]=f=s.slice(j).split(p).length,b++
	console.log(new Date-a,b)
}
// indexOf法2
function ss_index2(s){
	for(var a=new Date,b=0,t=2,i,j,m=[],n=[],p,f=1,z=s.length;f;++t)
		for(f=i=0;i<z-t;)
			if(m.indexOf(p=s.substr(j=i++,t))<0&&~(j=s.indexOf(p,j+t))){
				for(f=2;~(j=s.indexOf(p,j+t));)f++;
				m[b]=p,n[b++]=f
			}
	console.log(new Date-a,b)
}
//Map法
function ss_map(s){
	for(var a=new Date,b=0,t=2,i,j,m=new Map,p,f=1,z=s.length;f;++t)
		for(f=i=0;i<z-t;)
			if(!m.has(p=s.substr(j=i++,t))&&~(j=s.indexOf(p,j+t))){
				for(f=2;~(j=s.indexOf(p,j+t));)f++;
				m.set(p,f),b++
			}
	console.log(new Date-a,b)
}
//test
for(let f of[ss_split,ss_slice_split,ss_map,ss_index,ss_index2])
	f(txt)
```
1匹だけ飛び抜けて遅い奴がいますな…。
AWS Well-Architected Framework を活用したチームビルディングのポイントと利点

## AWS Well-Architected Framework を活用したチームビルディングのポイントと利点

AWS Well-Architected Frameworkは、クラウドアーキテクチャの設計、構築、運用におけるベストプラクティスを提供するフレームワークです。チームビルディングに AWS Well-Architected Framework を活用することで、次のような**ポイント**と**利点**が得られます。

### **ポイント**

* **共通言語の構築** クラウドアーキテクチャに関する共通の言語と理解をチーム内で構築するのに役立ちます。これは、意思疎通を改善し、誤解を減らすのに役立ちます。
* **コラボレーションの促進** チームメンバーがアーキテクチャ上の意思決定について協力することを促進します。これは、より良い設計と意思決定につながります。
* **継続的な改善の文化の育成** 継続的な改善の文化を育むのに役立ちます。これは、チームが常にアーキテクチャを評価し、改善することを意味します。

### **利点**

* **コストの削減** クラウドインフラストラクチャのコストを削減できます。これは、効率的なアーキテクチャを設計し、不要なリソースの使用を回避することで実現できます。
* **パフォーマンスの向上** クラウドアプリケーションのパフォーマンスを向上させることができます。これは、スケーラブルで信頼性の高いアーキテクチャを設計することで実現できます。
* **セキュリティの強化** クラウドアプリケーションのセキュリティを強化できます。これは、セキュリティ上のベストプラクティスを実装し、潜在的な脅威を軽減することで実現できます。
* **コンプライアンスの向上** クラウドアプリケーションのコンプライアンスを向上させることができます。これは、コンプライアンス要件を満たすアーキテクチャを設計することで実現できます。

##  **チームビルディングの基本概念**
- **共通の目標** チームビルディングの基本は、メンバー全員が共通の目標を持ち、その達成に向けて協力することです。
- **信頼とコミュニケーション** メンバー間の信頼と効果的なコミュニケーションが、チームの成功に不可欠です。
- **役割の明確化** 各メンバーの役割と責任を明確にすることで、効率的な作業分担が可能になります。

##  **チームビルディングのメリット**
- **生産性の向上** チームが一丸となって働くことで、生産性が向上します。
- **創造性とイノベーション** 多様な視点やアイデアが集まることで、創造性やイノベーションが促進されます。
- **モチベーションの向上** チームの一員として認識されることで、メンバーのモチベーションが向上します。
- **問題解決能力の向上** チームで協力して問題を解決することで、より効果的な解決策が見つかります。

##  **チームビルディングの実践方法**
- **アイスブレイク活動** チームのメンバーがリラックスし、互いに親しみを持つための簡単なゲームや活動を行います。例として、自己紹介ゲームや趣味を共有する活動があります。
- **チームワークエクササイズ** チームの協力を必要とする課題を設定し、メンバーが協力して解決する活動を行います。例として、パズルやレゴシリアスプレイなどを使った「共通して何かを組み立てる作業」があります。
- **コミュニケーションワークショップ** 効果的なコミュニケーションスキルを学ぶためのワークショップを開催します。アクティブリスニングやフィードバックの方法などを学びます。
- **目標設定セッション** チーム全体で共通の目標を設定し、その達成に向けた具体的な計画を立てます。SMART（Specific, Measurable, Achievable, Relevant, Time-bound）目標の設定が推奨されます。
- **フィードバックと評価** 定期的にチームのパフォーマンスを評価し、フィードバックを行います。これにより、改善点を見つけ、チームの成長を促進します。

##  **チームビルディングの注意点**
- **強制しない** チームビルディング活動は強制せず、メンバーが自主的に参加できるようにすることが重要です。
- **多様性の尊重** メンバーの多様な背景や意見を尊重し、全員が参加できる環境を作ることが大切です。
- **継続的な取り組み** チームビルディングは一度きりの活動ではなく、継続的に取り組むことが重要です。定期的な活動や評価を行い、チームの成長をサポートします。

チームビルディングは、チームのパフォーマンスを向上させ、メンバー間の信頼と協力を深めるための重要なプロセスです。効果的なチームビルディング活動を通じて、チーム全体の目標達成に向けた強力な基盤を築くことができます。

## **AWS Well-Architected Framework の具体的な活用例**

* **勉強会を開催する** 
チームメンバーが AWS Well-Architected Framework の柱と原則について理解できるように、勉強会を開催する。

* **AWS Well-Architected Framework の柱に基づいてワークショップを開催する** 
AWS Well-Architected Framework の 6 つの柱（運用卓越性、セキュリティ、信頼性、パフォーマンス、効率的なコスト配分、革新）に基づいてワークショップを開催することで、チームメンバーが各柱の重要性を理解し、アーキテクチャにどのように適用できるかを学ぶことができます。
* **AWS Well-Architected Framework チェックリストを使用してアーキテクチャをレビューする** 
AWS Well-Architected Framework チェックリストを使用して、既存のアーキテクチャをレビューし、改善点を特定することができます。これは、チームで協力してアーキテクチャを改善するのに役立ちます。
* **AWS Well-Architected Framework を基にロードマップを作成する** 
AWS Well-Architected Framework を基に、クラウドアーキテクチャを改善するためのロードマップを作成することができます。これにより、チームは、時間をかけてアーキテクチャを継続的に改善することができます。


#### 読んで頂きまして、ありがとうございました。
Slackを使う上で気をつけていること

# はじめに
みなさんの会社ではSlackを使っていますか。
私は今の会社に入社してから初めて使いはじめました。（もうすぐ2年経つ）
そこでSlackを使う上で個人的に気をつけていることをまとめようと思います。


# @channelを使いすぎない
@channelはそのチャンネル内にいる人、全員に通知させる便利な機能です。
参加者が2人でも100人を超えていても同時に通知させることができます。
しかし、私は@channelをあまり使うべきではないと思います。
なぜなら参加者が多ければ多いほどその分時間や注意を奪うからです。
個人的にはメンションがなくても参加しているチャンネルを全体的に目を通すことが多いので、この投稿は@channel使うほど重要かなと思うことがしばしばあります。
Slackにはユーザグループというグループ単位でメンションできる機能もありますのでこちらも上手く使うといいかもしれません。



# DMを使いすぎない
DMは他の人から覗かれることなく個人、少人数とメッセージをやりとりできます。
プライベートな会話やあまり人に聞かれたくない会話をするのに打って付けな機能です。しかし、業務に関わる内容をDMだけで完結させると情報の見える化が滞ってしまいます。
業務内容はなるべくパプリックチャンネルでやりとりした方がいいと考えます。
なぜなら例えメンションせずとも参加者全員に情報を公開することができるからです。
そうすることでチーム内の情報が広がり、無駄な確認用のコミュニケーションが減らせると私は思います。


# おわりに
あくまで個人的な意見になります。
もちろん内容によっては@channel、DMそれぞれ適した場面があると思いますので考えながらこれからもSlackと付き合っていきたいです。

https://slack.com/intl/ja-jp/help/articles/202009646-%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%82%84%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AB%E9%80%9A%E7%9F%A5%E3%81%99%E3%82%8B
Vuejsの条件付きレンダリングを初心者向けに解説してみた

## はじめに
Vue.jsは、シンプルで使いやすいフロントエンドフレームワークです。Vue.jsを使うと、動的なWebアプリケーションを簡単に構築できます。この記事では、Vue.jsでの条件付きレンダリングについて、サンプルコードを使いながら初心者にも分かりやすく解説します。

## 条件付きレンダリングとは？
条件付きレンダリングとは、特定の条件に基づいてDOM要素を表示したり非表示にしたりすることです。Vue.jsでは、v-if、v-else-if、v-else、およびv-showディレクティブを使用して、条件付きレンダリングを簡単に実現できます。

## Vue.js の条件付きレンダリング
まずは、Vue.jsでの条件付きレンダリングの基本的な例を見てみましょう。

### サンプルコード
以下のコードは、ユーザーがログインしているかどうかを示すメッセージを条件付きで表示する例です

```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 条件付きレンダリング</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <p v-if="isLoggedIn">Welcome, User!</p>
        <p v-else>Please log in.</p>
        <button @click="toggleLogin">Toggle Login State</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isLoggedIn: false
            },
            methods: {
                toggleLogin() {
                    this.isLoggedIn = !this.isLoggedIn;
                }
            }
        });
    </script>
</body>
</html>
```

### 解説
- v-ifディレクティブは、isLoggedInがtrueの場合にメッセージを表示します。
- v-elseディレクティブは、isLoggedInがfalseの場合にメッセージを表示します。
- ボタンをクリックすると、toggleLoginメソッドが呼び出され、isLoggedInの値が切り替わります。

## まとめ
Vue.jsでの条件付きレンダリングは、v-if、v-else-if、v-else、およびv-showディレクティブを使うことで簡単に実装できます。これらのディレクティブを使用することで、ユーザーの状態やアプリケーションの状態に応じて動的にコンテンツを表示することが可能です。ぜひ、これらの方法を試して、動的なWebアプリケーションを構築してみてください。

## 参考
- [Vue.js Official Guide: Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)

- [MDN Web Docs: Vue.js](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
Tailwind Variantsの`VariantProps`でvariantsを型として利用する

プロジェクトで`Tailwind Variants`を利用していると定義したvariantsを型として利用できるので便利です！

## どうやって使うのか？
公式のドキュメントを読めばすぐにわかることですが、importで`VariantProps`を呼び出すことで利用できます！

https://www.tailwind-variants.org/docs/typescript

```typescript
import { tv, type VariantProps } from 'tailwind-variants'
```

## どんな場面で使えるのか？

例えばborderのスタイルを`Tailwind Variants`を利用して下記のように書いたとします。

```typescript
const borderStyle = tv({
  base: 'border border-black',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    }
  }
})
```

この時`VariantProps`を利用しない場合だとコンポーネントの方は下記のようになります。

```typescript
import { FC, PropsWithChildren } from 'react'
import { tv } from 'tailwind-variants'

const borderStyle = tv({
  base: 'border border-black',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    }
  }
})

type Props = {
  type: 'solid' | 'dotted' | 'dashed'
}

const Component:FC<PropsWithChildren<Props>> = ({ type, children }) => <div className={borderStyle({type})}>{children}</div>
```

コンポーネントに渡されるpropsの型をtypeで宣言してやる必要があります。
ただ、`VariantProps`を利用するとスマートに記述できます。

```diff_typescript
import { FC, PropsWithChildren } from 'react'
- import { tv } from 'tailwind-variants'
+ import { tv, type VariantProps } from 'tailwind-variants';

const border = tv({
  base: 'border border-black',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    }
  }
})

- type Props = {
-   type: 'solid' | 'dotted' | 'dashed'
- }
+ type Props = VariantProps<typeof border>;

const Component:FC<PropsWithChildren<Props>> = ({ type, children }) => <div className={border({type})}>{children}</div>
```

という感じでvariantsを型として利用できます！
Propsの値は下記のようになります！

```typescript
type Props = {
  type?: "solid" | "dotted" | "dashed" | undefined;
}
```

:::note alert
公式のドキュメントにも記載がありますが、`VariantProps`を利用した型定義は全て任意プロパティとなり`undefined`が許容されます…。
必須プロパティとして扱いたい場合は`Required`を利用しましょう！
```typescript
type Props = Required<VariantProps<typeof border>>;

// Propsの中
type Props = {
  type: "solid" | "dotted" | "dashed";
}
```
:::

variantsが複数定義された場合は下記のようになります。

```typescript
const border = tv({
  base: 'border',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    },
    color: {
      black: 'border-black',
      white: 'border-white',
    },
  }
})

type Props = VariantProps<typeof border>;

// Propsの中
type Props = {
  type?: "solid" | "dotted" | "dashed" | undefined;
  color?: "black" | "white" | undefined;
}
```

一部を利用したい！みたいな時は`Pick`や`Omit`を利用してください！
```typescript
type Props = Pick<VariantProps<typeof border>, 'type'>

// Propsの中
type Props = {
  type?: "solid" | "dotted" | "dashed" | undefined;
}
```

## 【まとめ】`VariantProps`でvariantsを型として利用する
`VariantProps`を利用することで定義をいくつもすることなくスッキリ書けます。
ただ、任意プロパティになってしまうことには注意が必要です。

Tailwind Variantsを利用している際は、variantsを利用した型定義を検討してみてください！
冗長的なコードをスッキリさせてコードの可読性を良くできるかもしれません！

ただ、Storybookを利用する場合には注意が必要です…。
別の記事にまとめたのでご一読ください。

https://qiita.com/tanimoto-hikari/items/5aa4900abfc7363835ac
Pythonの sorted() と list.sort() の違い

## `sorted()`関数

### 特徴

- **新しいリストを返す**:
  `sorted()`関数は、ソートされた新しいリストを返します。元のリストは変更されません。

- **イテラブル全般に対応**:
  リストだけでなく、タプルや文字列など、イテラブルなオブジェクトをソートできます。

### 使用例

```python
numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
sorted_numbers = sorted(numbers)
print(sorted_numbers)  # [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
print(numbers)  # [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
```

### 引数

- **iterable**: ソートする対象のイテラブルなオブジェクト。
- **key**: ソートの基準とする関数。デフォルトは`None`。
- **reverse**: `True`にすると降順にソートされる。デフォルトは`False`。

### カスタムソートの例

```python
words = ["banana", "apple", "cherry"]
sorted_by_length = sorted(words, key=len)
print(sorted_by_length)  # ['apple', 'banana', 'cherry']
```

## `list.sort()`メソッド

### 特徴

- **インプレースでソート**:
  `list.sort()`メソッドは、リスト自体をソートします。元のリストが変更され、新しいリストは生成されません。

- **リスト専用**:
  このメソッドはリストオブジェクト専用です。他のイテラブルには使用できません。

### 使用例

```python
numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
numbers.sort()
print(numbers)  # [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
```

### 引数

- **key**: ソートの基準とする関数。デフォルトは`None`。
- **reverse**: `True`にすると降順にソートされる。デフォルトは`False`。

### カスタムソートの例

```python
words = ["banana", "apple", "cherry"]
words.sort(key=len)
print(words)  # ['apple', 'banana', 'cherry']
```

## `sorted()`と`list.sort()`の違い

### 1. リストの変更

- `sorted()`:
  - 新しいリストを返す。
  - 元のリストは変更されない。
- `list.sort()`:
  - リスト自体をインプレースでソートする。
  - 元のリストが変更される。

### 2. 対応するイテラブルの種類

- `sorted()`:
  - リスト、タプル、文字列など、イテラブル全般に使用できる。
- `list.sort()`:
  - リストオブジェクト専用。

### 3. 戻り値

- `sorted()`:
  - 新しいソートされたリストを返す。
- `list.sort()`:
  - `None`を返す（リスト自体がソートされる）。

## まとめ

- **新しいリストが必要な場合**や**元のリストを変更したくない場合**は`sorted()`を使う。
- **リスト自体をソートしても問題ない場合**や**メモリ効率を考慮する場合**は`list.sort()`を使う。
Outlook PST ファイルを PDF に変換して保存する方法


最高の PST から PDF への変換をお探しなら、ここが最適な場所です。PST ファイルとそのすべての添付ファイルが PDF 形式に変換されたら、お知らせください。これは、データ転送用の最も一般的で実用的なファイル形式が PDF であるという事実によるものです。PDF ファイルは共有が簡単なため、最近ではほとんどのユーザーがこの形式でファイルを保存します。

**[今すぐダウンロード](https://www.wholeclear.com/downloads/wc.exe)**

誰もが知っているように、情報を共有または保存するために利用できる最もポータブルなファイル形式は PDF です。すべてのメールを PDF ファイルとして保存しておけば、必要なときに簡単にアクセスできます。すべてのメールとデータを PST ファイルに保存すると、PST ファイルの管理が難しくなります。

## PST ファイルを PDF 形式に転送する理由

ユーザーが PST ファイルを PDF ファイルに変換する理由はさまざまです。これらの原因のいくつかを見てみましょう -

互換性: ユーザーは電子メール ソフトウェア Microsoft Outlook に頼る必要があります。PST ファイルにアクセスするには、ユーザーのコンピューターに Outlook をインストールする必要があります。さらに、PDF はすべてのプラットフォームで簡単に開くことができ、プラットフォームに依存しません。
ポータブル形式: PDF ファイルはポータブル性が非常に高いため、ユーザーは PC、ラップトップ、スマートフォンなど、さまざまなデバイスで使用できます。
データ保護 - ユーティリティはファイルの整合性をそのまま維持します。ファイルの正確性は現在の状態で維持されます。PDF ファイルは正確性を維持します。
保存形式 - Microsoft Office および MS Outlook では、ユーザーは PDF ファイルを保存できません。ユーザーは、形式が原因で PST ファイルを直接変換できません。
PST ファイルが PDF 形式に変換されたのは、次の理由によるものです。PST ファイルを PDF ファイルに変換する手法について見てみましょう。

### 手動アプローチの制限

PST ファイルを PDF 形式に変換する手動アプローチが直面する制限について見てみましょう。

• ユーザーは障害を克服する必要があります。
• ツールでは正確性が得られず、ファイルは最新の状態に保たれません。
• ユーザーはデータ損失に直面します。
• 新規ユーザーには多数の制限があります。
• PST ファイルから PDF への変換には時間がかかります。
• これらは、ユーザーが手動の手法を使用するときに遭遇するいくつかの制限です。

## PST を PDF に変換するソフトウェア -

PST ファイルを PDF 形式に変換するより洗練された方法の 1 つは、**[WholeClear PST から PDF へのコンバーター](https://www.wholeclear.com/jp/pst.html)** プログラムです。すべてのユーザーは、制限に遭遇することなく PST ファイルを PDF 形式に変換できます。ユーザーは、PST ファイルを PDF 形式に変換した後、データの損失や困難を経験することはありません。すべてのユーザーは、さまざまな洗練された機能のおかげで、PST ファイルを PDF ファイルに簡単に変換できます。

### PST ファイルを PDF 形式に変換するには、ユーザーは以下に説明する手順に従う必要があります。これらのアクションを確認しましょう -

• まず、コンピューターでアプリケーションを起動します。
• 今すぐ PDF 形式に変換する必要がある PST ファイルを追加します。
• これらの厳選された PST ファイルのサンプルを表示します。
• 次に、変換された PST ファイルを保存する場所を決定します。
• プロセスが完了したら、「変換」をクリックして PST ファイルを PDF に変換します。

### 最後に

PST ファイルを PDF 形式に変換する方法については、ブログをご覧ください。PST ファイルをすばやく変換するために使用できるいくつかのテクニックを提供しています。ユーザーは自由に好きな方法を選択できます。
【効率化】情報収集に役立つGoogle検索コマンド

## 00. はじめに
Googleは情報収集には欠かせないツールです。普通に検索しても十分便利ですが、検索コマンドを使うことで、より正確に、効率的に検索結果を絞り込むことができます。
本記事では情報収集に役立つコマンドを中心にまとめてみました。

## 01. OR検索
### [キーワード]OR[キーワード]
検索したいキーワードの間に半角の`OR`を入れます。キーワードの少なくともどちらか一つを含む情報を検索したい時に便利です。
`OR`の代わりに`|`を使用することもできます。
例：　うどん OR そば

## 02. AND検索
### [キーワード]AND[キーワード]
通常、複数のキーワードで検索したい時は半角スペースを入れて検索しますが、指定した単語が含まれない場合があります。AND検索コマンドを使用すると、指定したキーワードすべてが含まれたページを検索することできます。
`AND`の代わりに`+`を使用することもできます。
例：　居酒屋 AND 飲み放題

## 03. NOT検索
### -[キーワード]
除外したいキーワードの前に`-`（マイナス）を入力します。不要な情報を除外して検索できます。
例：　マック -マクドナルド

## 04. フレーズ検索（完全一致検索）
### "[キーワード]"
`""`（ダブルクォーテーション）で囲むことで一つのキーワードとして検索することができます。特定のフレーズや文言を正確に含むページを検索したい時に便利です。
例：　"東京証券取引所"

## 05. ワイルドカード検索
### [*ーワード]
キーワード内の不明な部分を`*`（アスタリスク）を置き換えることでその部分を補完した検索結果が得られます。フレーズの一部分が思い出せない時に便利な検索方法です。
例： シャーロックホームズ "*家の犬"

## 06. 類義語・同義語検索
### ~[キーワード]
`~`（チルダ）を使用するとキーワードの類義語を含んだ情報を検索できます。検索結果が少ない時や、キーワードがはっきりしない時など、幅広い意味合いで検索したい時に便利です。
例：Python ~初心者

## 07. 日付を指定して検索
### [キーワード] before:[yyyy/mm/dd]<br>[キーワード] after:[yyyy/mm/dd]
指定日より前、もしくは後のページが検索結果に表示されます。最新の情報を調べたい時などに便利です。
例： JavaScript before:[2023/9/15]
例： JavaScript after:[2022]


## 08. サイト内検索
### site:[URL] [キーワード]
`site:`の後に検索したいサイトのURLを入力することで、そのサイト内のキーワードを検索することができます。調べたいWEBサイトにサイト内検索機能が用意されていない場合に有効です。
例： site:https://XXXX.com/ TypeScript

## 09. 関連サイト検索
### related:[URL]
URLの前に`related:`とつけると、指定したWEBサイトと類似性の高いサイトを検索することできます。わかりやすいサイトを見つけた場合に、それと類似したサイトを探したい場合などに便利です。
例： related:https://www.XXX.jp/


## 10. おまけ 隠しコマンド：恐竜ゲーム
### `chrome://dino`
Chromeのアドレスバーに`chrome://dino`と入力すると遊べます。
![chrome___dino_ - Google Chrome 2024-06-10 01-40-40 - Trim (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/a9f2e670-ba77-52cd-2415-c23c76c74885.gif)
隠しコマンドは他にも色々用意されているので、興味のある方はぜひ調べて遊んでみてください！
【Python】リスト内包表記

リスト内包表記(list comprehension)は、既存のリストやイテラブルオブジェクトから新しいリストを作成する際に便利な記法です。for文やif文を使って条件を指定し、簡潔な形で新しいリストを生成できます。
# 基本的な構文
```python
new_list = [expression for variable in iterable]
```
- expression: 新しいリストの要素を生成する式
- variable: イテラブルオブジェクトから要素を取り出すための変数
- iterable: 要素の元となるイテラブルオブジェクト(リスト、タプル、range()など)
## シンプルな例
```python
squares = [x**2 for x in range(1, 6)]
print(squares)  # 出力: [1, 4, 9, 16, 25]
```
上記の例では、1から5までの整数をxに代入し、x**2を評価してリストに追加しています。
# 条件付きのリスト内包表記
```python
even_squares = [x**2 for x in range(1, 11) if x % 2 == 0]
print(even_squares)  # 出力: [4, 16, 36, 64, 100]
```
ifを使うことで、リストに含める要素を条件付きで指定できます。
# ネストされたリスト内包表記
```python
matrix = [[j for j in range(1, 4)] for i in range(1, 3)]
print(matrix)  # 出力: [[1, 2, 3], [1, 2, 3]]
```
リスト内包表記をネストさせることで、多次元のリストを生成できます。
# 他のイテラブルからリストを作成
```python
str_list = [char for char in 'Hello']
print(str_list)  # 出力: ['H', 'e', 'l', 'l', 'o']
```
文字列やタプルなどの他のイテラブルオブジェクトからリストを作成することもできます。
リスト内包表記を活用することで、コードをコンパクトに記述でき、可読性も向上します。ただし、複雑な式になると可読性が低下する可能性があるので、適切に利用する必要があります。Pythonのリストやfor文を使った伝統的なアプローチと、状況に応じて使い分けるのがよいでしょう。
######
参考)　[東京工業大学情報理工学院 Python早見表](https://chokkan.github.io/python/index.html)

https://qiita.com/Akuuuun/items/b71f3d11a0b88ccac273
【Python】リスト

リストは、Pythonでよく使われる基本的なデータ構造の1つです。リストは順序付きの要素の集合で、要素には様々な型のオブジェクトを含めることができます。
# リストの作成
```python
# 空のリストを作成
empty_list = []

## 要素を含むリストを作成 
fruits = ['apple', 'banana', 'orange']
mixed = [1, 3.14, 'hello', True]
```
## リストへのアクセスとスライシング
```python
fruits = ['apple', 'banana', 'orange']

# インデックスを使ってアクセス
print(fruits[0])  # 'apple'

# スライシングを使ってアクセス
print(fruits[1:3])  # ['banana', 'orange']

# 負のインデックスで後ろからアクセス
print(fruits[-1])  # 'orange'
```
## リストの操作
```python
fruits = ['apple', 'banana', 'orange']

# 要素の追加
fruits.append('grape')  # ['apple', 'banana', 'orange', 'grape']

# インデックスを指定して要素を挿入
fruits.insert(1, 'kiwi') # ['apple', 'kiwi', 'banana', 'orange', 'grape']

# 特定の値の要素を削除
fruits.remove('banana')  # ['apple', 'kiwi', 'orange', 'grape']

# インデックスを指定して要素を削除
del fruits[0]  # ['kiwi', 'orange', 'grape']

# リストを結合
veggies = ['carrot', 'potato']
all_items = fruits + veggies # ['kiwi', 'orange', 'grape', 'carrot', 'potato']
```
## リストの長さ、検索、ソート
```python
fruits = ['kiwi', 'orange', 'grape']

# リストの長さ
print(len(fruits))  # 3

# 要素の存在チェック
print('kiwi' in fruits)  # True

# リストをソート
fruits.sort()  # ['grape', 'kiwi', 'orange']
```
リストは、要素の追加、削除、検索、ソートなどの操作が簡単に行えます。for文やリスト内包表記と組み合わせて使うと、より強力な操作ができます。データの一時的な保持や処理に非常に便利なデータ構造です。
######
参考)　[東京工業大学情報理工学院 Python早見表](https://chokkan.github.io/python/index.html)

https://qiita.com/Akuuuun/items/712e4e544150b3a73200
Generative AI テスト（生成AIテスト）を受験した感想

# Generative AI テスト（生成AIテスト）とは
https://www.jdla.org/certificate/generativeai/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/3adc6ff5-176b-abea-c852-4658b2fd5e58.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/63365726-6b92-1c43-fdcd-574ec947136e.png)

生成AIに関する知識を確かめられるミニテスト　という感じ。

ミニ　というだけあり、問題数・試験時間・費用も、一般的な試験と比べて”ミニ”です！

受験可能時間も、朝10:00～23:59までと、子育て世代にはうれしい✨

# 受験した感想
・問題数は少ないものの、シラバスとおり、幅広く生成AIに関する知識を問われるという感じ。
・２０分で２０問（１問は記述含む）なので、サクサク回答しないと時間が足りない…。

# 勉強した内容
https://weblab.t.u-tokyo.ac.jp/llm_contents/

松尾研究室のLLM講座の内容を、ざーっと読んで理解する

シラバス：https://www.jdla.org/certificate/generativeai/#toc7
の内容を、「こんなことね」程度に理解しておく。

# 最後に
ミニテストですが、合格すると　オープンバッジ　がもらえます✨✨

合格発表2024/06/21が楽しみです・・・。
Flutter 〜riverpodを使って極シンプルなカウンターアプリ〜

riverpodを使った標準アプリよりもさらにシンプルなカウンターアプリ。
全体のコードの後にポイントごとに説明をしていく。

```dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// プロバイダの定義
// StateProviderは状態管理を行うプロバイダで、ここでは整数型のカウンターを管理
final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(
    // ★★★★①ProviderScopeはプロバイダの範囲を定義し、アプリ全体でプロバイダを利用可能にする★★★★
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// MyAppはアプリケーションのルートウィジェット
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // アプリのホーム画面をCounterWidgetに設定
      home: CounterWidget(),
    );
  }
}

// ★★★★②CounterWidgetはConsumerWidgetを継承し、プロバイダの状態を消費するウィジェット★★★★
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ★★★★③ref.watchを使ってcounterProviderの状態を監視し、現在のカウント値を取得★★★★
    final count = ref.watch(counterProvider);

    return Scaffold(
      // アプリの上部に表示されるアプリバーの設定
      appBar: AppBar(title: Text('Counter')),
      // 中央に配置されるカウント値を表示するテキストウィジェット
      body: Center(
        child: Text(
          '$count', // カウント値を表示
          style: TextStyle(fontSize: 40), // テキストのスタイルを設定
        ),
      ),
      // 右下に配置されたFloatingActionButton
      // ボタンが押されるとカウントが増える
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // ★★★★④ref.readを使ってcounterProviderのnotifierを取得し、stateを更新★★★★
          ref.read(counterProvider.notifier).state++;
        },
        // ボタンに表示されるアイコンを設定
        child: Icon(Icons.add),
      ),
    );
  }
}

```

## import部分
```dart
//flutter/material.dartはFlutterのマテリアルデザインのウィジェットをインポート
import 'package:flutter/material.dart';
//flutter_riverpod/flutter_riverpod.dartはRiverpodのプロバイダ機能をインポート
import 'package:flutter_riverpod/flutter_riverpod.dart';
```

## Provider部分
```dart
//StateProviderは整数型の状態を管理
//初期値は0
final counterProvider = StateProvider<int>((ref) => 0);
```

## main関数
```dart
void main() {
  //ProviderScopeでラップされたMyAppウィジェットをrunAppで実行
  runApp(
    //ProviderScopeはプロバイダの範囲を定義
    ProviderScope(
      child: MyApp(),
    ),
  );
}
```

## MyAppウィジェット
```dart
//MyAppはアプリのルートウィジェットで、ホーム画面としてCounterWidgetを設定
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterWidget(),
    );
  }
}

```

## CounterWidget
```dart
//CounterWidgetはConsumerWidgetを継承し、プロバイダの状態を監視
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Text(
          //ref.watch(counterProvider)でカウント値を取得し、テキストとして表示
          '$count',
          style: TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //FloatingActionButtonが押されると、
          //ref.read(counterProvider.notifier).state++でカウント値が1増加する。
          ref.read(counterProvider.notifier).state++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
```
3Dカメラもあるし物体検出もあるし、あとは使うだけなんでしょ

「3Dカメラの品質も上がってきているし、物体検出の検出率もあがっているから、
あとは使うだけなんでしょ」

そう簡単ではないことを示すために、この記事を書く。

## 3Dカメラでの物体検出の動画例
<iframe width="560" height="315" src="https://www.youtube.com/embed/mcNhCpQOo6k?si=V2ftrIP16dEDlUbx" 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>
この動画は、ZED2iをZED-SDKでの物体検出を用いて実行した結果のようである。

以下の本家のサイトにある動画に類似している。
検出対象物に対する３Dのbounding box を表示しながらtracking IDを表示している。

https://www.stereolabs.com/docs/object-detection/videos/basket-boxes.mp4


## 検出精度の問題
- 未検出が多すぎる。
- 乗用車以外の車種の検出率が低い
- 高い頻度での未検出を生じやすいクルマの向きがある。
反対車線を走行中のクルマの検出率が低すぎる。
バスが正面に見えても未検出。
追突の可能性の高い場所にある乗用車が、未検出から検出に変わるまでの距離が近すぎる。
隣の車線を走っている自動車が未検出。
バイクを未検出
あまりに未検出が多すぎる。
これは車載用の学習をしていないモデルを実行しているためである。
このソースコードのある場所
github zed-sdk のリポジトリ

## 検出結果の描画とのズレが大きい
- 物体検出の処理時間が無視できない。
- そのため、物体検出結果を、最新のフレームに重ね書きすると、検出枠が、その対象物と位置がずれている。

## 動画で気づいてもらえたと期待する点
- ZED2iカメラでのユーザーによるデモ動画で、上記のように課題があることに気づいてもらえただろう。
- 「あとは使うだけなんでしょ」といかない状況がわかってもらえただろうか。

## ほかにも不足している機能
- 検出結果の追跡
    - (この例では追跡を含んでいるが、一般に検出だけでは追跡を含んでいない)
- 検出結果の3Dとしての安定な解釈
    - 検出枠が不安定に大きくなったり小さくなったりすることが起こりやすい。
    - 検出枠の大きさを元に距離を評価しようとすると、距離を間違えやすい。
- 対象物の空間としての移動速度の算出
    - 対象物が、地面（床面）にあるなどの仮定が必要な場合がある。
    - 対象物との相対速度の算出には、ドップラー効果などを使うほうがいいだろう。
- 対象物の姿勢検出
 自動車や人がどっちを見ているのかって重要だよね。
-　対象物の大きさの検出
自動車の大きさがわからないなんてないよね。


## 遅延時間の軽減策
### その１：検出処理の高速化
- 利用できるデバイスでの検出処理を高速化する。
- 高速なアルゴリズム・軽量なモデルへの置換え
- 利用できるデバイスへでの固定小数点化

### その２：データのCPU-GPU間のデータの転送を減らす。
- 一連の処理の中で、CPU-GPU間のデータの転送があると遅くなる。
- 一連の処理を極力GPU上で簡潔するようにすること。

### CPUの処理をシングルスレッドではなく、複数のスレッドやパイプライン構成に置き換える。
- Gstreamer などのパイプラインに書き換える。 
### その５：並行処理を使う
- 並行処理を使わないシングルスレッドのコードでは、マルチコアのCPUを活かしきれていない。
- 並行処理可能な部分を並行処理で別々のCPUに処理を割り当てられるようになると遅延時間を低減できる。

### その３：描画を高速化する。
- matplotlibのように描画時間のかかりすぎるライブラリを描画時間の短いライブラリに置き換える。
- ライブラリによっては、描画にかかる時間が違いすぎる。
- 描画も２重のfor文を使ってしまうと遅くなってしまう。
### その４：遅延時間の内訳から描画・表示時間を除外して計測する。
- 遅延時間の内訳から描画・表示時間を除外して計測することで、本当の遅延時間を把握できる。

# 検出したあとに何をしたいの？
- ほとんどの検出タスクは、検出は中間目標にすぎません。
- 検出した後に、したい処理があるはずです。
- その処理の内容を伝えてください。
- そうすれば、よりよい使い方を提案できるはずです。

# 付記：
この例では、自動車の検出についてのある実装を例にあげましたが、
車載の自動車・歩行者・信号・障害物検出・レーン検出などをされている方にとっては、
なんで不十分すぎる実装を紹介したのかと思うでしょう。
私が伝えたいことは、それ以外の実装での「〇〇検出」を期待されている方々が、暗黙に期待していることが実際には簡単じゃないと、ビジネス上で成功するための必要な部分を明確にエンジニアに伝える必要があることを主張したいのです。

例：信号機検出は、自車の進行にあたって読み取る必要がある場所にある信号機を特定できないと意味がないのです。ただ単に、見えた信号機を全て検出すればいいわけではありません。そういった技術的な要求仕様へのブレークダウンが適切になされていないからこそ、開発が失敗しやすいのだと感じています。

現場のエンジニアにとっては、要求仕様が間違っているなんて口に出せないからこそ、このブログを書いています。
ここに書いてあることを、言いたい人は、自分の意見としていうと角が立ちますから、「世の中にはこんなことを言っている人もいるよ」として、この記事を活用していただければ幸いです。
【Python】ChatGPT APIの基本的なコード

久々にChatGPT APIを使ったところ、仕様が変わっていたため備忘録として。

### バージョン
```bash
$ python3 --version
Python 3.10.12
$ openai --version
openai 1.33.0
```

### ソースコード

```python:main.py
from openai import OpenAI

# APIキーのハードコートは非推奨だが、環境変数の設定方法は状況によるためこのように記述
client = OpenAI(api_key="sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX")

response = client.chat.completions.create(
    model="gpt-4o",
    messages=[{"role": "user", "content": "面白い話をして、どこが面白いのか解説してください。"}],
    stream=True,
)
for chunk in response:
    if chunk.choices[0].delta.content is not None:
        print(chunk.choices[0].delta.content, end="")

```
### 動作確認
```bash
$ python3 main.py 
もちろんです！以下に面白い話をご紹介し、その後でどこが面白いのかを解説します。

---

ある日、イヌとネコが一緒にピクニックをすることにしました。イヌは自分の大好きな骨を、ネコは自分の大好きな魚を持ってきました。イヌは骨をかじりながら、「この骨は最高だ！」と言いました。一方、ネコは魚を食べながら、「この魚も最高だ！」と言いました。

しばらくして、イヌがネコに、「お前の魚と俺の骨を交換しないか？」と言いました。ネコはちょっと考えてから、「いいよ！」と答えました。イヌは魚をかじってみましたが、全然美味しくありませんでした。ネコも骨を噛んでみましたが、同じく美味しくありませんでした。

結局、二人は自分の持っていたものが一番好きだと再確認し、その後はお互いに交換することなく、仲良くピクニックを楽しむことにしました。

---

この話の面白さについての解説をします。

1. **キャラクターの対比**:
   - イヌとネコという対照的なキャラクターが登場します。イヌは骨、ネコは魚を好むというステレオタイプをうまく利用しています。この対比がユーモラスに感じられるポイントです。

2. **予測と結果のギャップ**:
   - イヌとネコがお互いの食べ物を交換するという行動は、少し予想外です。それによって読者は次に何が起こるかを期待します。そして実際にお互いの食べ物をかじってみると美味しくないと感じるという結果が、想像していたのと異なるため、これが面白さを引き立てています。

3. **シンプルな教訓**:
   - 最後に、結局お互いの持っているものが一番好きだと再確認するシーンは、誰もが共感できるテーマです。「自分が持っている物を大切にする」という教訓が、読者にほっとさせる感覚を与えます。

要するに、この話はキャラクターの対比、予測と結果のギャップ、そしてシンプルで共感できる教訓を合わせることで、面白さが生まれています。
```
あまり面白い話ではない。

# 参考資料
https://platform.openai.com/docs/api-reference/introduction
文系出身のSES3年目が自社開発企業へ内定するまで

# はじめに
こんにちは
私は4年生大学を卒業後、中小SES企業へ新卒入社し現在2社目の自社開発企業で働いています。
アウトプットの一環としてQiitaを少しずつ更新していければなと思いまずは経歴や転職活動について記事を書いみようと思います。

# 新卒時代
私は私立大学の文系卒業後、中小SES企業へ就職しました。
理由としては
・休みが多かった
・技術職のため手に職が付くと思った
・IT業界のため職に困らなそうに感じた
といったありきたりな理由です。

業務内容としては客先常駐で半年〜1年くらいのペースで現場を転々としていました。

しかし、3年ほど経った頃に下記の理由から転職を考え始めました。
・出勤地やメンバー定期的に変わるのが意外とストレス
・現場によって技術が変わるため、器用貧乏にように感じた
・3年経ったので他の会社でも働いてみたくなった

とはいったものの、技術力にも自信がなかったため転職活動を始めるにあたって
何か独学で勉強を始めようと決意しました。

# フロントエンドを独学
独学する技術はフロントエンド周りにすることしました。
理由は自分で書いたコードが実際に目に見えるのが楽しかったからです。

他の方の転職活動の記事などを参考にし、以下の学習目標を立てました。
・html、CSS、JavaScriptは必須
・React、Vue、Angularなどのフレームワークもあると良い
・API利用なども盛り込めると良い



実際に使った主な教材は以下です。
### html / CSS
https://prog-8.com/

https://www.udemy.com/course/front-dev-tutorial/?couponCode=ST21MT61124

### JavaScript
https://www.youtube.com/watch?v=QCjFPSO96RU&t=650s

### React
https://www.youtube.com/watch?v=XKSYF2aZnkQ&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k



5ヶ月勉強をし、ポートフォリオを3つほど作りました。
1.自己紹介サイト（html/CSS/JavaScript）
2.クイズアプリ（html/CSS/JavaScript）
3.マップ上に好きな飲食店を登録できるウェブアプリ（html/CSS/JavaScript//React/Firebase/Google Map API）

作成したポートフォリオは実際にサーバにデプロイして、GitHubのアカウントと併せて職務経歴書に載せました。

# 転職活動
ポートフォリオをあらかた作り終えたところで求人への応募も始めました。
一人暮らしをしていたため、仕事を続けながら転職活動をすることにしました。
当時配属されていた現場がテレワークできる現場だったため、定時で仕事を終わらせて18時以降にオンラインでカジュアル面談や面接を受けました。
コロナ禍だったため対面での面接が一度もなく助かりました。
面接はオンラインでしたが一応毎回スーツを着て臨んでいました。
大体15社ほどエントリーして5割くらい書類通過できたと思います。
面接を受け始めて1ヶ月弱ほどで今の会社から内定をいただくことができたので転職活動を終了しました。
条件も満足できたので選考途中の企業は辞退させていただきました。

# 転職活動時に利用したもの
https://www.green-japan.com/

最終的にGreenで内定が決まりました。
Greenは企業と直接やりとりできるのがよかったです。
また、当時は内定をもらえればAmazonギフト券1万円分ももらえたのでラッキーでした。

https://www.bizreach.jp/

ビズリーチも企業と直接やりとりできるのですがエージェントからもメッセージが来るので少し使いづらい感じがしました。
何社か面接をしましたがハイクラスだけあってかあまり先の選考には進めませんでした。

https://menta.work/

MENTAは料金を払ってメンターを契約できるサービスです。
ポートフォリオを作り出す前に契約し2ヶ月利用しました。
転職活動の進め方やポートフォリオのレビューをしてもらえたのでよかったです。

# おわりに
一人で0から勉強するのは大変でしたが、転職したい意思が強かったのでなんとかやり遂げることができました。
今ネット上には無料や格安で見ることのできる教材が非常に多いと思います。
私のように実務経験が少ない方はポートフォリオの作成がマストように感じます。
この記事が転職活動中の方のお役に立てれば嬉しいです！

# 参考
https://qiita.com/app_js/items/5a2cb917d71e07176250

https://qiita.com/aisplay/items/0012ba3040edbe4b852b
初心者から見たVue3コンポーネントの実装のしやすさについて Vision.1

# Vue3コンポーネントの実装のしやすさについて Vision.1

Vue3のコンポーネントの実装について、
Vue2は業務経験があるものの、Vue3は初心者である筆者からの視点で考察します。

Vue3はその直感的なAPIと柔軟性により、初心者でも簡単に取り組むことができる<br>という噂ですが、その真偽の程を確認できればと思っています。<br>一旦、細かく分けて記事を作成しますが、後程、編纂するか、<br>参考コードを入れたりして、分量調節します。

今回はVue3コンポーネントの概略から、<br>単一ファイルコンポーネントと子コンポーネントを以下にまとめます。
## Vue3のコンポーネントの基礎1

公式ページ：[コンポーネントの基礎](https://ja.vuejs.org/guide/essentials/component-basics.html#defining-a-component)を読み進めながら、以下のように解釈。

1. **単一ファイルコンポーネント(略：SFC):** `.vue`ファイルで書かれ、<br>HTML、JavaScript、CSSが1つのファイルにまとめられています。<br>Vue CLIやNuxt.jsなどのビルドツールと<br>組み合わせて使用します。<br>一元管理できる点は魅力的ですが、ファイルサイズが大きくなると<br>結局分割したくなりそうです。
2. **子コンポーネント:** 親コンポーネントの冒頭で以下のようにimportすると<br>子コンポーネントが使用可能になります。
```vuejs:parent.vue
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
```
importすることで、親コンポーネント中で何度でも子コンポーネントを呼び出せます。<br>子コンポーネントにJavascriptで色々書いていると重複してイベントが発火するのか、<br>気になりました。
```vuejs:parent.vue
<template>
  ・・・親コンポーネントの実装1
  <ChildComponent />
  ・・・親コンポーネントの実装2
  <ChildComponent />
  ・・・親コンポーネントの実装3
  <ChildComponent />
  ・・・
</template>
```

## 実装してみた
### 親コンポーネント
子コンポーネント(HelloWorld.vue)を4回呼び出します。
![スクリーンショット (432).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/90d51357-dd34-4e53-63d5-f41f397a6921.png)
### 子コンポーネント
実験用にscript setupにalertを仕込みます。
![スクリーンショット (433).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/cfa9f42b-6c74-4036-46bf-6769c61594c8.png)
### 動作実験
気になった通り、4回alertが出ました。
別にこの動作自体は、Vue2で実装しても同じだったと思いますが、

この動作には注意が必要で、業務で設計→実装する場合は、
UI用のコンポーネント設計書から、ちゃんと整備しておかないと、
共通コンポーネントとして実装した部品を、複数回呼び出してしまって、
初期化処理で事故る原因になりそうです。
![スクリーンショット (436).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/96e87fc6-7221-9d38-acad-d511fcd5f5a5.png)

親コンポーネント側で、自然に子コンポーネントが呼び出せている点も確認できています。
![スクリーンショット (435).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/549ddfc8-8a05-d32b-9a79-f25ccdeb9925.png)

次回：propsの受け渡しとイベントの購読について

https://qiita.com/babel_0101/items/05261108683e9d59dd9d
PowermockがJava11以降動作しない

# 概要
  
UniteTestでpowermockを用いて静的クラスなどのモックを行っているところがJDKを上げるとエラーで失敗する。
> llegal reflective access by org.powermock.reflect.internal.XXXX(file:...) to method java.lang.Object.clone()

  Java９＋でリフレクションの規制が強くなったためリフレクションのアクセスでエラーになっている。

# 対応
アクセスを許可するコマンドをテスト時のみ実行させる。

  @build.gradle
```
android {
    testOptions {
        unitTests.returnDefaultValues = true
       all {
          jvmArgs = ["--illegal-access=debug", 
                        "--add-opens","java.logging/java.util.logging=ALL-UNNAMED",
                       "--add-opens","java.base/java.lang.reflect=ALL-UNNAMED", 
                       .... アクセスが必要なクラスを羅列]
       }
    }
}
```

  
# その他
JUnit5に載せ替えて、Powermockからの脱却を行ったなどの記載も見受けられたが、試してはいない。
リフレクション関係は厳しくなる一方なので、使わずにできる方向へシフトしたほうが良いのかもしれない。

# Powermock 関連Issue
https://github.com/powermock/powermock/issues/969
BroadcastReceiver では exported 動作を指定する必要がある

# 概要
  
  [実行時に登録されるブロードキャスト レシーバでは、エクスポート動作を指定する必要がある](https://developer.android.com/about/versions/14/behavior-changes-14?hl=ja#runtime-receivers-exported)
  
  > Android 14（API レベル 34）以降をターゲットとし、コンテキスト登録されたレシーバを使用するアプリとサービスでは、レシーバをデバイス上のすべてのアプリにエクスポートするかどうかを示すフラグ（それぞれ RECEIVER_EXPORTED または RECEIVER_NOT_EXPORTED）を指定する必要があります。この要件は、Android 13 で導入されたこれらのレシーバー用の機能を利用して、アプリをセキュリティの脆弱性から保護するのに役立ちます。


# 対応
  
  殆どの場合、他のアプリからのBroadcastを受けとって何か処理を実行するような連携動作を行うことはないので、`RECEIVER_NOT_EXPORTED` で問題はない。Android１３から利用できるので、以下のように切り分けて呼び出す。
  ```
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
     registerReceiver(broadcastReceiver, intentFilter, RECEIVER_NOT_EXPORTED)
}else {
     registerReceiver(broadcastReceiver, intentFilter)
}
  ```
  
# 注意点

  公式にも記載があるように、システムからのbroadcastを受け取る場合は指定しないようにする必要がある。例えばWi-Fiの接続状態やスクリーン、バッテリー状態など。多くのシステムbroadcastは上記のように`RECEIVER_NOT_EXPORTED` を指定しても受け取れる仕様のようだが、いくつかのシステムbroadcastは受け取れないバグ（？）があるようなので注意が必要。動作的には`RECEIVER_EXPORTED`に変更すると、これらも受信できたが、公式的には無指定にするようにとのこと。
【kintone × Zapier × Jira】特定ステータスでZapierを経由してJiraにチケットを起票する

## はじめに
kintoneのレコードを特定のステータスにすると、Zapierを経由してJiraにチケットを作成する方法を試しました。
Jiraのプランが足らなかったためZapierを経由して作成しています。


## どのような背景があって作成したのか？
kintoneで特定業務を管理しておりレコードを特定のステータスにした際、他チームへタスクが発生するフローになっています。これまでは手動でJiraチケットを起票していましたが、起票が漏れたり遅れたりすることで他チームに業務のしわ寄せが発生していました。
これらを解消する目的で作成したものです。


## コード
kintoneに設定しているscriptです。どなたかの参考になれば。。。🙇‍♂
素人が書いているscriptなので書き方がイマイチな箇所があると思いますが、何かあればコメントいただけますと幸いです。

```javascript:test.js
(function() {
  'use strict';

    // レコード詳細画面で、プロセス管理のアクションが実行された時
    kintone.events.on('app.record.detail.process.proceed', function(event) {
      
        // 実行後のステータスを格納
        const nextStatus = event.nextStatus.value;
        const rec = event.record;
        
        // 使用するZapierのWebhookのURLを格納
        const webhookUrl = "";
        // チケット担当者のJiraアカウントIDを格納
        const assignedAccountId = "";

        // 諸々条件によって以下の変数に文章を入れる
        
        // Jiraチケットの要約に記入する文章を格納
        let payloadSummary = "";
        // Jiraチケットの詳細に記入する文章を格納
        let payloadDescription = "";  
          
        // POSTするデータを生成
        const postData = {
            "summary" : payloadSummary,
            "description" : payloadDescription,
            "assignee" : assignedAccountId
        };
          
        return new kintone.Promise(function(resolve, reject) {
            kintone.proxy(webhookUrl, "POST", {}, postData, function(body, status, headers) {
                console.log(status, body);            
                    resolve(event);
            });
        });
       return event;
    });
})();

```

## Zapier上での設定
1. 「Post in Webhooks by Zapier when catch hook」を使用しています。
1. kintone側で 1 のwebhookを叩いてZapierがリクエストを受け取り、
1. 「Create Issue in Jira Software Cloud」でリクエストの内容（担当者、内容、期限 等）を使ってJiraにタスクを起票しています。


## 説明
:::note warn
JiraプランがEnterpriseとかであれば、Zapierを経由せずにkintoneから直接APIを叩けば問題ないと思います。
（プランが足りていないので検証できていないですが、、、）
:::

何ら難しいことはしていません🙇‍♂️
条件によってJiraに記載する文章や担当者は異なるかと思いますので、条件分岐で設定すればokです。
Storybook学んでみた④

# はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:

**「いいね」か「ブックマーク」**
を頂けると僕のモチベーションアップになります！:thumbsup:
少しでも気に入っていただけたらよろしくお願いいたします！:thumbsup:


# 今回の目的
自分の作ったコンポーネントを確認したり検証するための技術を身に付けたい！
公式のクイックスタートを参考に進めていきます。
項目ごとに補足のみ書いて進めています。わかりづらいところの理解の手助けになれば幸いです！

# 前回
https://qiita.com/mr_noppo/items/776728bd882751d259c6

# 主に参考にさせていただいた記事
https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

# バージョン
React-18.2
Storybook-8.1.4

# Deploy Storybook
Chromaticに公開することで、チームに共有することが可能です。
## Exporting as a static app
下記のコマンドでビルドします。
```bash
npm run build-storybook
```

## Publish Storybook
### Set up a repository in GitHub
黙々と。
GitHub Actionsのことについて言及があるが今回はスキップ
https://docs.github.com/ja/actions/quickstart

### Get Chromatic
Chromaticにログインリンク押すとチュートリアルが切り替わるので注意

画面に表示された下記のコマンドを実行します。Cromaticの画面上を見るとBuildされてるところが見れます。
```bash
npx chromatic --project-token=~
```
ビルドエラーで止まってしまった場合は「taskbox/build-storybook.log」を確認しましょう
もし、logがない時はyarnコマンドがない時なので下記コマンド実行
```bash
npm i yarn
```

Chromaticは、各コンポーネントの概要を見れるだけでなくstorybookでの確認も可能です。

# Visual Tests
今までのスナップショットと比較して目視で問題がないか確認するテストです。
GitHub Actions使っての内容ですが、mainブランチでも一応画面確認のみなら可能です。

1.chromaticで「Unreviewed」になっている項目をクリックし確認したいもののみ「Accept」しましょう。
![スクリーンショット 2024-06-11 20.57.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943982/6d25f285-0730-3098-ed34-683d814c979c.png)

2.コマンドを打って、Chromaticにあげましょう。
```bash
npm run build-storybook
npx chromatic --project-token=~
```
下記のようにズレの比較できる画面が出ればOKです。もし出ない場合は別ブランチでやる変更をしてから確認してみましょう。
![スクリーンショット 2024-06-11 20.55.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943982/38913c80-e4d9-35fa-205e-dd1f31562e4b.png)


# Addons
下記サイトで便利なアドオンが紹介されている。
https://storybook.js.org/integrations

# Conclusion
NextStepとして、ベストプラクティスを学べるサイトをいくつか紹介している。
https://storybook.js.org/tutorials/intro-to-storybook/react/en/conclusion/

# 最後に
なんとなくのできる範囲が知れました！
Storybook学んでみた③

# はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:

**「いいね」か「ブックマーク」**
を頂けると僕のモチベーションアップになります！:thumbsup:
少しでも気に入っていただけたらよろしくお願いいたします！:thumbsup:


# 今回の目的
自分の作ったコンポーネントを確認したり検証するための技術を身に付けたい！
公式のクイックスタートを参考に進めていきます。
項目ごとに補足のみ書いて進めています。わかりづらいところの理解の手助けになれば幸いです！

# 前回

https://qiita.com/mr_noppo/items/d2167ae0ce4251a879ef

# 主に参考にさせていただいた記事
https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

# バージョン
React-18.2
Storybook-8.1.4

## Interaction tests
動作テストを行う。
・fireEvent
クリックや入力などのユーザーの動作をシミュレートするためのものです。
```jsx
import { fireEvent } from '@storybook/test';
fireEvent.click(buttonElement);
fireEvent.change(inputElement, { target: { value: 'new value' } });
```

・waitFor
非同期処理の動作を待つためのもの。
```jsx
import { waitFor } from '@storybook/test';
await waitFor(() => {
  expect(someElement).toBeInTheDocument();
});
```

・within
コンテナ内の要素を探し、対象として選択できるようにする。canvasElementと併用すると全体のDOM情報を取得できる。
```jsx
import { within } from '@storybook/test';
const container = within(someElement);
expect(container.getByText('some text')).toBeInTheDocument();
```

・waitForElementToBeRemoved
要素が削除されるまで順次処理を止める。
```jsx
import { waitForElementToBeRemoved } from '@storybook/test';
await waitForElementToBeRemoved(() => document.querySelector('.loading-spinner'));
```

storyBook内のテストケースに記述します。
```jsx
export const Default = {
  parameters: {
    ...
  },
 play: async ({ canvasElement }) => {
   // storyBookのcanvas取得
   const canvas = within(canvasElement);
   // data-testid="loading"で登録したところを確認して消えたら次の処理
   await waitForElementToBeRemoved(await canvas.findByTestId('loading'));
   // 内部のクリック処理が完全に終わるまで待機
   await waitFor(async () => {
     await fireEvent.click(canvas.getByLabelText('pinTask-1'));
     await fireEvent.click(canvas.getByLabelText('pinTask-3'));
   });
 },
};
```

## Automate tests with the test runner
全てのstoryテストの自動化
```bash
npm i --dev @storybook/test-runner
```
package.jsonにscriptコマンドを追加
```json
{
  "scripts": {
    "test-storybook": "test-storybook"
  }
}
```
実行した際に下記のエラーが出たら

![スクリーンショット 2024-06-10 2.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943982/466201ac-c46d-c7ae-d2d6-65527421454b.png)

コマンド実行し、ブラウザエンジンを操作するplaywrightをインストールする。
```bash
npx playwright install
```

テスト実行
```bash
npm run test-storybook --watch
```

# 次
Deploy Storybook
PowerQueryでも差集合(EXCEPT)を取る

# はじめに

Excel 差集合とかでググるとVBAを使う方法やDAXを使う方法が出てきますが、使い慣れたPowerQueryでどうにかしたい。そんなこともきっとあります。

# 前提

- powerquery上でtableが2つ認識されている
    - csv読み込みとかExcel上のtableとかを読ませられますよね。いつものあれです
- N行1列である

# やること

1. まず基準となるtableを右クリックして参照を押しましょう。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94177/111d653e-4c2f-5cfa-d077-3f4ba1cb44de.png)
   というかクエリを増やしたいだけなので別に他の方法でもいいです
1. 詳細エディタを開く
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94177/bee66d8c-2755-4730-cbd3-9b9d5cf126d8.png)
1. 以下のように記述する

```
let
    ソース = Table.Join(before, "Column1", Table.PrefixColumns(ignore, "i"), "i.Column1", JoinKind.LeftAnti),
    削除された列 = Table.RemoveColumns(ソース,{"i.Column1"})
in
    削除された列
```

この例だと`before`tableから`ignore`tableを引く形になります。

`Table.Join`したいわけですが、両者ともカラム名が同じなのでそのままだと困るので、適当なprefixをつけるために`Table.PrefixColumns`を使います。ここでは`i`をつけたので、以降`i.Column1`とするとignore　tableのほうを参照できます。

https://learn.microsoft.com/ja-jp/powerquery-m/table-join#example-2

`JoinKind.LeftAnti`をつけることで、SQLでいうところの`LEFT OUTER JOIN`して`WHERE ... = null`するのに近い挙動を示します。

最後に結合したtableの列は要らないので`Table.RemoveColumns`で消します。

SQLぽく書くとこういう感じですかね

```sql
SELECT `before`.Column1
FROM `before`
LEFT OUTER JOIN `ignore` ON `before`.Column1 = `ignore`.Column1
WHERE `ignore`.Column1 = null;
```