OmniAICreator/Qiita-1.07M huggingface dataset:
Next.jsで実現するオニオンアーキテクチャ (1) - ディレクトリ構成

:::note warn
記事におけるNext.jsは、v13以降のApp Router （Server Components）を用いる前提での説明となります。
Pages Routerを用いている場合は、適宜Pages Routerでの書き方として読み替えてください。
:::


## この記事は何
最近Next.jsでウェブアプリケーションを作ることが多いのですが、
その時にオニオンアーキテクチャを採用してアプリケーションを作ることが多く、型も固まってきたので数回の記事にわたり紹介をしていきたいと思っています。
今回はディレクトリ構成について紹介します。

## オニオンアーキテクチャとは
オニオンアーキテクチャとは以下のレイヤーで実装を行なっていくアーキテクチャです。

![オニオンアーキテクチャ.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/fef56642-a085-3198-e3b3-7f1ec11d7366.png)


簡単に言ってしまうと古典的なレイヤードアーキテクチャにおける、InfrastructureレイヤーやTestレイヤーを
Dependency Injection (DI)　で最上位のレイヤーに持ってくる構成のアーキテクチャです。

最近のDDDなどの手法を用いるときは、このレイヤードアーキテクチャが採用されることが多いです。

より詳しい説明は以下の記事などをご参考ください。

https://qiita.com/little_hand_s/items/2040fba15d90b93fc124

https://qiita.com/little_hand_s/items/ebb4284afeea0e8cc752

## Next.jsにおける各レイヤーの定義
Next.jsでオニオンアーキテクチャを実現しようとする場合、以下のようなディレクトリ構成を採用することが多いです。

```
- app (Presentaion)
    - xxx
        - page.tsx
- infrastructures (Infrastructure)
    - XXXRepository.ts
    - XXXFactory.ts
- utils (Infrastructure)
    - xxx.ts (DBアクセス以外の外部アクセスライブラリ)
- applications (Application Service)
    - XXXService.ts
- models
    - xxx
        - XXX.ts (Entity)
        - YYY.ts (Value Object)
        - XXXService.ts (Domain Service)
        - IXXXRepository.ts (Infrastructure Interface)
        - IXXXFactory.ts (Infrastructure Interface)

```

このようなディレクトリ構成は、

https://nrslib.com/bottomup-ddd/

を参考にして作成しています。

次回以降、具体的にそれぞれのレイヤーをどのように実装していくのかについて紹介をしていきます。
起動済みのNuxt3をVSCodeデバッグ

# 条件
* Docker使用
* コンテナ起動でNuxt3のプロジェクトが起動

# package.json
コンテナ起動時に`npm run dev`が実行されるかと思います。
この時に`--inspect`オプションを追加しておきます。

```
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev --inspect", //←←ここにオプション追加
        //略
```
これによりデバッグモードで実行されます。
ですがこれだけではブレークポイントを設定しても止まってくれません。

# リモートエクスプローラーでVSCodeを開く
VSCodeでNuxt3の開発コンテナにリモートエクスプローラーで接続する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/39a36cac-dbdf-21e9-f4ef-0ef792b1c618.png)

このアイコンから。

# launch.json
```
{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "node debug",
			"request": "attach", // launchではなくattach
			"skipFiles": [
				"<node_internals>/**"
			],
			"type": "node"
		},
	]
}
```

# デバッグ実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/d8080de3-7f67-499e-ead0-3515c19b7067.png)
このアイコンから実行。

先のlaunch.jsonで`node debug`とnameに記述したので、node debugというのが出てくるからそれを選ぶ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/f22b117a-3173-fa05-ab35-0fe18b8460e7.png)

# いざブレークポイント設定
ここまでやってブレークポイントを設定すれば止まってくれます。

# 個人的に詰まったところ
* ホストマシン側にnodeを入れていないので、リモートエクスプローラで開かないといけなかった。
* バックエンドとNuxt3を同じリポジトリで管理していて、Nuxt3のルートで開いておらず、launch.jsonの設置場所も違った。
* デバッグポートを新たにdocker-compose.ymlとかに追記しないとできないのか、どうかがわからず検証してみた→必須ではなさそう。たぶん`--inspect`で起動するようにしたので、もともと解放していたポートを使ってデバッグできるっぽい。（ちなみにデフォルトのデバッグポートは9229らしい）
* launch.jsonの書き方がそもそもわからなかった。

一応上記でvueコンポーネントもtsファイルもデバッグできました。

しかし、わざわざ`npm run dev --inspect`としないといけないのかがひっかかり。

npm run devで起動しておいて後からデバッグモードにしするような記述方法がlaunch.jsonであるのかもしれないですが、わからず。（ご存知の方ご教授ください🙇‍♂️
X文字のランダム文字列(Yパターン)を合計Z個生成してExcelにダミーデータを作るためのPythonのコード

# やりたいこと

Excelでダミーデータを作りたいのですが、簡単な方法がないのかを探していました。

以前、このような記事を見つけていいなと思っていたのですが

https://forest.watch.impress.co.jp/docs/serial/offitech/1384444.html

`randarray()`の場合、完全にランダムになってしまいます。

今回作りたいダミーデータは、実際の業務における「製品コード」のようなもので、その「製品コード」をランダムで並べたいんですよね。ちょうど以下のようなイメージです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308248/a1218e57-db25-8957-ef3a-6d78befd74f1.png)

# ソリューション

いい感じのものがなかったので、書いてしまいました。

~~~ rand_excel.py
import random
import string
import numpy as np
import pandas as pd

# 作るファイル名
out_file = 'rand_sheet.xlsx' 
# 作る行数
out_lows = 100

# num文字のランダム文字列を作成
def make_random_str(num):
    # 英数字をすべて取得
    dat = string.digits + string.ascii_lowercase + string.ascii_uppercase
    return _get_random_dat(num, dat)

# num桁のランダム数列を作成
def make_random_int(num):
    # 数字をすべて取得
    dat = string.digits
    return _get_random_dat(num, dat)
# __Base__
def _get_random_dat(num, dat):
    # 英数字からランダムに取得
    return ''.join([random.choice(dat) for i in range(num)])


# X文字のランダム文字列(Yパターン)を合計Z個生成する
def make_random_str_list(X, Y, Z, num_only=False):
    random_str_length = X
    random_vals = Y
    str_vals = Z + 1

    # ランダム文字列を何パターン作るか
    random_str_ary = []
    for i in range(random_vals):
        if(num_only == True):
            my_random_str = make_random_int(random_str_length)
        else:
            my_random_str = make_random_str(random_str_length)
        random_str_ary.append(my_random_str)

    # ランダム文字列をパターンの中から何個生成するか
    for j in range(str_vals):
        new_str_ary = np.random.choice(random_str_ary, j)

    return new_str_ary

# ここからメイン
# DataFrameを作る
df = pd.DataFrame()
df['Code'] = make_random_str_list(8, 4, out_lows)
df['Price'] = make_random_str_list(4, 10, out_lows, True)
df['ManagingString'] = make_random_str_list(32, 10, out_lows)

df.to_excel(out_file, index=False)
print(df)
~~~

# アウトプットの例

当然ですが、ランダムと言っているくらいなので毎回異なります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308248/f2b68e1c-7ec9-2062-74b4-94850a40cfd3.png)

# おわりに

「`num_only`フラグを立てても返り値が文字列になってしまうので、費用なのにExcel側でひと手間必要」とか、不完全なコードではありますが、とりあえず今のところこれで足りてるので、必要な方はこれをベースにご自由に改造いただければと思います。

（おわり）
GPTsで使いやすい画像生成Botを作る方法

# 結論

同じようなテイストの画像をクイックに作成できるGPTsを作成しました。

[ピクトグラムメーカー](https://chat.openai.com/g/g-oP2iNDH00-pikutoguramumeka)
[ビジネスで使える画像生成](https://chat.openai.com/g/g-qoEK08w6q-bizinesudeshi-eruhua-xiang-sheng-cheng)

結構いろんな画像生成Botが作れて、有用性も高いと思うので、プロンプトを公開します。
↓こんな感じで、適当な指示をすればより具体的な選択肢を自分で考えて、提案・画像生成してくれます。
![スクリーンショット 2023-11-12 16.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407360/2e12fb82-282b-d5f3-bdb0-be479405b4a6.png)


# プロンプト

以下は[ビジネスで使える画像生成](https://chat.openai.com/g/g-qoEK08w6q-bizinesudeshi-eruhua-xiang-sheng-cheng)のプロンプトです。

Instructionsの部分にペーストして使ってください。

`# Images must meet the following.`より下の部分を変更すれば、自分の好きなテイストの画像を描くBotを作れます。

```
The purpose of the GPTs is to generate images with a defined taste according to the user's instructions.
Answer "申し訳ありません。回答できません。" for unrelated conversations.

Conversations must be conducted in Japanese.
The prompt used to generate the image must be in English.

# procedure
1. receive instructions from the user
Example : 机の上で調べ物をしている人

2. propose three more specific sentences for the user's instructions.
Example : 
    1. 机の上で本を開きながら調べ物をしている。
    2. 机の上でノートに何かを書きながら調べ物をしている
    3. 机の上で虫眼鏡を持って調べ物をしている

3. creating an image when the user gives permission



# Images must meet the following.

* Flat design with no depth 
* Simple design based on light colors
```
Javaでの備忘録【配列・リスト】

# 概要
　プログラムを書いていてリストの格納の仕方について纏めました。

## 1.配列を利用して格納する方法
:::note info
- 配列初期化の際に格納する個数を設定する
- 配列の要素に値を代入する
:::

 ```Java: array.java
public void array1() {
	//配列を準備
	String[] array = new String[3];

    //配列の要素に値を代入
	array[0] = "配列1番目";
	array[1] = "配列2番目";
	array[2] = "配列3番目";
		
	System.out.println(array[1]);
}
```
```Java: 出力
配列2番目
```

## 2.配列を利用して格納する方法②
:::note info
- 配列初期化の際に格納する要素を設定する
- 配列の個数は設定不要
:::


 ```Java: array.java
public void array2() {
    //配列を準備
    String[] array = new String[] {
        "配列1番目",
        "配列2番目",
        "配列3番目",
    };
    System.out.println(array[1]);
}
```
```Java: 出力
配列2番目
```

 ## 3.配列からリスト型へ変換する方法
:::note info
 - 配列初期化の際に格納する個数を設定する<br>
 - 配列からリスト型(ArryList)へ変換<br>
 - ArryList型でリストに追加
:::
```Java: list02.java
private void listTask02() {
	//配列を準備
	String[] array = new String[3];
	array[0] = "配列1番目";
	array[1] = "配列2番目";
	array[2] = "配列3番目";
		
	// 配列からリストへ変換
	List<String> listStrings = new ArrayList<>(Arrays.asList(array));
		
	// リスト型に追加
	listStrings.add("追加:配列4番目");
		
	System.out.println(listStrings.get(0));
	System.out.println(listStrings.get(3));
}
```
```Java:出力
配列1番目
追加:配列4番目
```

 ## 4.一度にリストに格納する方法
:::note
 - 文字列型の要素を持つArrayList型を宣言<br>
 - 指定された要素で初期化されたリストを作成<br>
 - 指定の要素を出力
:::

```Java: listTask03.java
private void listTask03() {
		
	//リストの作成
	ArrayList<String> listStr = new ArrayList<>(
                             Arrays.asList("配列1","配列2","配列3"));
		
	System.out.println(listStr.get(1));
}
```
```Java:出力
配列2
```

 ## 5.Mapの格納方法
 :::note
 - HashMapを使用し、キーと値のペアをマップに追加<br>
:::
```Java:mapTask04.java
private void mapTask04() {
	Map<String, Integer> map = new HashMap<>();
		
	// キーと値のペアを追加
	map.put("a", 1);
	map.put("b", 2);
	map.put("c", 3);
		
	System.out.println(map);
}
```
```Java:出力
{a=1, b=2, c=3}
```

## 6.Mapでリストを格納する
 :::note
 - HashMapを使用し、キーと値をInteger型のリストのペアをマップに追加<br>
 - リストへの要素の追加と再度のマップへの追加
:::
```Java:mapTask5.java
private void mapTask07() {
	Map<String, List<Integer>> map = new HashMap<>();
		
	String keyStr = "aList"; 
		
	//配列を作成して値を格納
	ArrayList<Integer> listA = new ArrayList<>(Arrays.asList(1,2,3));
	//mapに配列を格納する。
	map.put(keyStr, listA);
		
	//リストへの要素の追加と再度のマップへの追加
	ArrayList<Integer> addList = new ArrayList<>(map.get(keyStr));
	addList.add(4);
	map.put(keyStr, addList);
		
	System.out.println(map.get(keyStr));
}
```
Docker DesktopをWindows10にインストールする方法

初心者にはDockerのインストールすら難しい。

# インストールの前に「Dockerとは」まとめ
Docker理解の手助けとなるすんごくわかりやすい記事
- https://qiita.com/yuya_sega/items/0fb78b064a6d64fe0979
- https://qiita.com/etaroid/items/b1024c7d200a75b992fc

# 環境
- Windows10 64ビット
- Docker Desktop 4.25.0

# インストール手順
以下、インストール手順を記載。

## 1. Docker Desktop Installer.exeをダウンロード
`Docker Desktop Installer.exe`を[<INS>ココ</INS>](https://docs.docker.com/desktop/install/windows-install/)からダウンロード。

![スクリーンショット 2023-11-12 160058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509178/fcd2f906-c2c9-b3ac-c0d6-85beeafa70c6.png)

## 2. ダウンロードしたインストーラを起動
ダウンロードした`Docker Desktop Installer.exe`をダブルクリック。

インストール中・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509178/4d59edc1-d026-dc89-1d62-514c3653265b.png)

インストール成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509178/dfec6f36-3369-92e5-fd89-9d4052ba74f3.png)

## 3. インストールできたことを確認
コマンドプロンプトを立ち上げて、以下のコマンド（Dockerのバージョンを確認する）を実行する。
```
> docker --version
```
以下のように、Dockerのバージョンが表示されればインストールできている。
```
> docker --version
Docker version 24.0.6, build ed223bc
```


# 参考
- https://docs.docker.com/desktop/install/windows-install/
MySQLのdumpデータをPythonで読み込む方法

## はじめに
MySQLのdumpデータ`hoge.sql`を貰った時、「Pythonで分析するにはどうしたらいいんだ、、」と思っていたので、Python上で読み取る方法を調べました。
せっかくなのでブログにまとめました。

ちなみにMySQLのセットアップは書きません。以下の資料がわかりやすいので、以下の資料を見てセットアップを行ってください。


https://speakerdeck.com/brainpadpr/sql-local-environment-construction


## TL;DR
- Poetryで簡単にローカルのPython環境構築
- MySQLのdumpデータをPython上で読み取る


## Poetryで環境構築
必要なライブラリをインストールします。ご自身のセットアップ方法を確立されている方はこの章はスキップしてください！
とりあえずローカルにライブラリを色々読み込むのは嫌なのでPoetryを使います。
Poetryに関して学びたい人は以下の記事がおすすめです。

https://qiita.com/ksato9700/items/b893cf1db83605898d8a

ここら辺はDockerでもvenvでも何でも良いので、ご自由にお選びください。
```bash
poetry new hogehoge
poetry add python-dotenv mysql-connector-python pandas
poetry shell
```

## MySQLでdumpデータを読み込む
:::note warn
MySQLの環境構築や文法説明は行いません。下記資料がおすすめです。
[環境構築](https://speakerdeck.com/brainpadpr/sql-local-environment-construction), [文法](https://speakerdeck.com/brainpadpr/sql-for-data-handling)
:::

ゴタゴタ説明するのはお互い面倒だと思うのでコマンドを書いていきます。
ログインして、dumpデータを読み込んでいるだけなので難しいことはしてません。

```sql
-- ログイン usernameは適宜変更してください
mysql -u username -p
-- databaseの作成
CREATE DATABASE hoge;
USE hoge;
-- dumpデータを読み込み pathは適宜変更してください
SOURCE /path/to/dump_data.sql;
-- データに入っているtableを確認します
SHOW TABLES;
```

`SHOW TABLES;`で以下のような出力が出てきます。
```
+-------------------------------+
| Tables_in_hoge                |
+-------------------------------+
| table hoge                    |
```
`Tables_in_hoge`の`hoge`後でPythonに書き込むのでメモしておきましょう。また、table名も何を読み込みたいか確認しましょう。

## Pythonでデータを開く
以下のコードでMySQLからdumpデータの読み込みを行います。

```python
import os

import mysql.connector
import pandas as pd
from dotenv import load_dotenv

# .envから環境変数を読み込む
load_dotenv()

conn = mysql.connector.connect(
    host="localhost",
    # user_nameは自分のユーザー名に変更
    user="user_name",
    # 環境変数からパスワードを読み込み
    password=os.environ.get("MySQL_PASSWORD"),
    # Table_in_hogeのhogeをdatabase_nameに書き込む
    database="database_name",
)

# table名を書きます
query = "SELECT * FROM tabel_name;"
data = pd.read_sql(query, conn)

print(data.head())

conn.close()
```
このコードをPoetryで動かすとdataが表示されます。
```zsh
poetry run python hoge.py
```


## 終わりに
今回はMySQLのdumpデータをPythonで読み込む方法を紹介しました。
自分自身MySQLを全く理解できていないので、頑張ってお勉強したいですね。
何か勘違いしている箇所があればコメントで教えていただけると幸いです。
ありがとうございました。
Davinci Resolveを使ってラウドネスを調整する方法メモ

こんにちは
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

今回はタイトルの通りDavinci Resolveを使って動画音声のラウドネスを調整する方法を備忘録としてメモっておきたいと思います。

# ラウドネスとは
別名？を音圧と呼ぶらしいです。
これらの意味をChatGPTに聞きました。
>音の明るさや強さを表す言葉で、特に音楽や音声に関連して使われることが一般的です。音楽や動画の制作において、ラウドネスは一般的に音の強弱や全体的な音量の感じ方を指します。

これが極端に離れすぎているとどうなるか。
例えばCMとして流す動画をラウドネスを気にせずに編集・アップロードすることを考えてみます。この動画はデフォルトでは結構な音量の音声が入っているとします。
この場合、例えばテレビを見ている時テレビの音量を全く変えていないのに、この動画が流れた途端、爆音のCMが流れてしまう可能性があるということみたいです。結果としてクレームにつながったり、みんなの鼓膜を葬り去ってしまうことになってしまう。。。ということを防ぐために意識しておこうね～ってものみたいです。

Youtubeの場合明言されていないようですが、大体指標として【-14LUFS】くらいだといいみたいです。
この数値付近で動画を編集して書き出しをすると、最適な音量で動画をアップロードし、他ユーザのもとに動画を届けられるようです。

# 編集の仕方
Davinci Resolveでプロジェクトを開きFairlightを押下します。
画面中央上部にあるラウドネスが絶対スケールで1770-1であることを確認します。
※1770-4のほうが今のスタンダードみたい。1のほうは少し古いスタンダードらしいです。
![1112_dr00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/f44b63ed-8d5c-b7d4-7e30-87abf9df61e9.png)

ラウドネスはFairlight画面で確認することが出来ます。ロングが注目すべき値です。
- ショート：過去30秒間の平均数値
- ロング：基準値との差異

動画を全部再生してみることで上記数値を測定することが出来ます。
今回は-20と出ているので、それだけ基準としている数値と差が出てしまっているということになるようです。この基準がデフォルトでどうなっているかは次で確認します。
※触ってみた感じ、ーのあとの数値が小さければ小さい程音量が大きく、逆は小さいという意味みたいです。
![1112_dr01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/e5d861cc-ad22-af1a-dc9e-aa52fb2402dc.png)

Davinci Resolveのラウドネスの基準はFairlightの右下にある歯車のアイコンを押下し
Fairlightのターゲットラウドネスレベルから確認できるみたいです。デフォルトだと-23となっていました。
![1112_dr03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/535a38f6-3de3-7624-4551-d5e3714fc786.png)
これを-14にして保存を押下します。Youtubeの環境に合わせて基準を変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/c2e4f883-f5ac-d432-bd42-bb3a936f465a.png)
この設定反映後、ラウドネスの停止（再生）・リセットを使って動画を再生し、ラウドネスのロングを確認。-14に近づけていくみたいです。地道ですね。
![1112_dr04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/e6ad256a-8af6-ae9b-d2cd-c45eaf8ff32c.png)
この地道な作業ですが、上記のように手動だけではなく自動でもできました。
自動で調整したい音源を右クリックしてオーディオレベルのノーマライズを選択します。
![1112_dr05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/602a795f-e1fa-c7ab-3453-79fe94b74ea0.png)
以下のように選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/4b946788-172b-3e6e-c50a-1ffff988cec8.png)
この後変化があるはずです。
まずノーマライズドをしてターゲットとなる数値にざっくり程度寄せにいって、微調整を手動でやるのがいいのかなぁとか思いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/e04b96c5-2798-742a-815c-9cb49d639477.png)
[javascript] 配列の便利な関数（foreach、map、filter、find）

## はじめに
Typescriptを使用して開発を行なっている際に、配列に対して処理を行う際に下記のようにfor文を用いた繰り返しによってその処理を行なっていました。
ですが、「配列に組み込まれている関数を使用した方が行数を減らせたりコードの意図を理解しやすくなるため使えるようになっておいたほうがいいよ」とアドバイス頂いたのでここに記すことによって定着を測ろうと思い、この記事を書く事にしました。
ここでは配列の関数の中で特に扱う事が多い`foreach`, `map`, `filter`, 'find`を記します。

## foreach
`foreach()`は与えられた関数を配列の各要素に対して1回ずつ実行します。
```
(配列).foreach((各要素) => （各要素に対して行う関数）)
```
例えば、配列の各要素を順番に出力したい場合は以下のように記述できます。
```
const arr = [1, 2, 3, 4, 5, 6, 7];

arr.foreach((item) => {
    console.log(item);
});
```
## map
`map()`は与えられた関数を配列の各要素に対して一回ずつ実行し、その結果を新しい配列として返します。
```
const (新しい配列) = (配列).map((各要素) => （各要素に対して行う関数）)
```
例えば、配列の各要素を2倍した配列を取得したい場合は以下のように記述できます。
```
const arr = [1, 2, 3, 4, 5, 6, 7];

const newArr = arr.map((item) => {
    return item *= 2;
});

// newArr = [2, 4, 6, 8, 10, 12, 14];
```
## filter
`filter()`は与えられた関数の戻り値が`true`になった要素のみを新しい配列として返す事ができます。
```
const (フィルタされた配列) = (配列).filter((各要素) => （条件式）)
```
例えば、配列の中で偶数の要素のみを選択して新しい配列として取得したい時は以下のように記述できます。
```
const arr = [1, 2, 3, 4, 5, 6, 7]

const filteredArr = arr.filter((item) => {
    if (item % 2 === 0) {
        return true;
    }
})

// filterdArr = [2, 4, 6];
```
## find
`find()`は配列の中で条件に合った最初の要素を取得できます。
条件に合う要素が見つからない場合は`undefind`を返します。
```
const (条件に合う要素) = (配列).find((各要素) => （条件式）)
```
例えば、数値1~7の配列の中で一番最初の3の倍数を取得したい時は以下のように記述できます。
```
const arr = [1, 2, 3, 4, 5, 6, 7];

const num = arr.find((item) => item % 3 === 0)

// num = 3
```
## 終わりに
以上が私がよく使用する配列の関数です。
何か抜けなどがありましたらご指摘をお願いいたします。
ご覧いただき有難うございました:pray:
macOS Shopify CLI インストール

 ## macOS に Shopify CLI インストール

macOS で Shopify CLIを動かすには　Node.js、Ruby、および Gitが必要らしい。

:::note info
公式サイトでは
Homebrew を使用して Shopify CLI をインストールすると、Homebrew によって Node.js、Ruby、および Git がインストールされます。
[shopify.dev | Install Shopify CLI](https://shopify.dev/docs/themes/tools/cli/install "shopify.dev")
:::

てことは「Homebrew」があれば、公式サイトに載っている、以下のコマンドだけでできるのでしょうか？？
```
$ brew tap shopify/shopify
$ brew install shopify-cli
```

私の環境ではNode.js(v18.17.0)、Ruby3.2.0、および Gitとも入ってたので、未検証です。sorry:bow_tone2:
すでに入っていても、上記のコマンドでインストールできました。



インストールできているか確認コマンド
```
shopify version
```
全域木を列挙してみた

引数
n:ノードの数
lst:[(u1,v1),(u2,v2),...]こんな感じ

unionfindはこれを使ってます
https://note.nkmk.me/python-union-find/

使用例
zenikigi(5,[(0,1),(0,2),(1,2),(1,3),(1,4)])
ー＞[(0, 1, 3, 4), (0, 2, 3, 4), (1, 2, 3, 4)]

```python

from copy import deepcopy
def zenikigi(n,lst):
    re=set()
    ans=[]
    re.add((tuple(),UnionFind(n)))
    for i in range(len(lst)):
        tmp=set()
        for v in re:
            t,uni=v
            if not uni.same(*lst[i]):
                if len(t)==n-2:
                    ans.append(t+tuple([i]))
                uni2=deepcopy(uni)
                uni2.union(*lst[i])
                tmp.add((t+tuple([i]),uni2))

        re|=tmp
    return ans

```
英単語が降ってくるサイトを作ろう

今回は英単語がランダムに上から降ってくるサイトを作ろうとおもいます。
　というのも、何年か前に日本語の単語か熟語が降ってくるサイトが眺めているだけで楽しいということで、バズっていたので今になって英語で作れるか試してみたかったのです。
 　今回は、windows10のvscodeを利用して作りました。
 　とても短くて簡単なコードとなっているので、ご自身で参考にしてカスタマイズしてみてください！
 ```html:home.html
 <!DOCTYPE html>
<html>
<head>
    <title>drop english</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="word-container"></div>
    <script src="script.js"></script>
</body>
</html>
```
背景画像はご自身で用意するか、bodyごと消して白背景にしてください
 ``` css:style.css
/* style.css */
/* CSSコード */
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');/* フォントのurl */


#word-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
body {
    background-image: url('background.png'); /* 画像のパスを指定 */
    background-size: cover; /* 画像がコンテナにフィットするようにサイズを調整 */
    background-position: center; /* 画像をコンテナの中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-attachment: fixed; /* 画像をスクロールに合わせて動かないように固定 */
}
.word {
    position: absolute;
    cursor: pointer;
    font-family: 'Itim', cursive;
    font-size: 24px;
    color: blue;
}

@keyframes fall {
    0% { top: -50px; }
    100% { top: 100vh; }
}

  ```
javascriptでは、降ってくる単語をクリックするとGoogle検索でしらべてくれるようにしました。
``` css:google検索
wordDiv.addEventListener('click', function() {
            window.open('https://www.google.com/search?q=' + word);
        });
```
また、[Random Word API](https://random-word-api.herokuapp.com/home)を使って、英単語を取得しました。
```css:API
function fetchRandomWord() {
        fetch('https://random-word-api.herokuapp.com/word')
            .then(response => response.json())
            .then(data => {
                createWord(data[0]);
            })
            .catch(error => console.error('Error:', error));
    }
```
上二つをまとめた最終的なjavascriptのコードは以下になります！
``` javascript:script.js
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('word-container');

    function createWord(word) {
        const wordDiv = document.createElement('div');
        wordDiv.classList.add('word');
        wordDiv.textContent = word;
        wordDiv.style.left = Math.random() * 100 + '%';
        wordDiv.style.animation = 'fall ' + (Math.random() * 5 + 5) + 's linear';

        wordDiv.addEventListener('click', function() {
            window.open('https://www.google.com/search?q=' + word);
        });

        container.appendChild(wordDiv);

        setTimeout(() => container.removeChild(wordDiv), 5000);
    }
    function fetchRandomWord() {
        fetch('https://random-word-api.herokuapp.com/word')
            .then(response => response.json())
            .then(data => {
                createWord(data[0]);
            })
            .catch(error => console.error('Error:', error));
    }

    setInterval(fetchRandomWord, 1000);
});
```

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531555/16644cca-acba-2e48-d955-c76c134649fb.gif)
Compose横幅の最大幅、最小幅を設定する方法

Composeで横幅が可変で最大幅、最小幅を決めたいことがあり、こちら調べたので、記載して行こうと思います。


# 最大幅、最小幅を設定する方法 
`Modifier.widthIn(0.dp, 40.dp)`
`Modifier`に`widthIn`を設定すると実装できます。

便利なので覚えておくと良いかもしれません。
にわのわさんと振り返るGitHub_Universe_2023

# はじめに
[にわのわ](https://twitter.com/niwa_nowa)です。
2023/11/09に行われたGitHub Universe 2023の内容について振り返っていこうと思います。
1ヶ月経って段々記憶が薄れてきたころあいだと思うので一緒に復習しましょう。

2日前にOpenAI DevDayを振り返ったので、こちらもよろしければどうぞ。

https://qiita.com/niwanowa/private/c0744fa4e9ffeeb258ec

# 目線
- GitHub Copilot Individualに入ってる
- チーム、組織、仕事では使ったことない

# まとめ
公式ツイッターさんがまとめてくれてるのでそちらを引用。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/GitHubUniverse?src=hash&amp;ref_src=twsrc%5Etfw">#GitHubUniverse</a> の基調講演の発表まとめ📣<br>✅GitHub Copilot Chat一般提供開始<br>✅新たなGitHub Copilot Enterpriseのプレビュー<br>✅AI活用した新しいセキュリティ機能<br>✅GitHub Copilotパートナープログラム<br>✅その他色々...<br>詳しくはブログをご覧ください👇</p>&mdash; GitHub Japan (@GitHubJapan) <a href="https://twitter.com/GitHubJapan/status/1722419761328591358?ref_src=twsrc%5Etfw">November 9, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

https://docs.github.com/ja/copilot/github-copilot-in-the-cli

# GitHub Copilot Chat一般提供開始
12月から一般提供開始らしい。
既にGitHub Copilot Individualプランでも利用可能なので、
既に使ってる人はあまり関係ないかもしれない。

GPT-3モデルからGPT-4モデルに変わるなど、パワーアップされるらしい。
ちなみに記事執筆時点だとGPT-3モデルのまま。GAに合わせてアップデートされるのかしら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590707/f9e515aa-e0f3-2708-9443-cd4632723b42.png)

# GitHub Copilot ChatをGitHub.comとモバイルアプリケーションに実装
らしい。
[こちら](https://github.blog/jp/2023-11-09-universe-2023-copilot-transforms-github-into-the-ai-powered-developer-platform/#github-copilot-chat%e3%82%92github-com%e3%81%a8%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ab%e5%ae%9f%e8%a3%85)ではウェイティングリストに参加するって項目があるけど見当たらない。

# GitHub Copilot Enterpriseの登場
Copilot Businessのさらに上位プランが登場。
色々抽象的にすごいぜってことが書いてあるが具体的な内容は不明。

# GitHub Copilotパートナープログラムの登場
サードパーティーのツールと連携することができるようになるらしい。

# GitHub Advanced Securityの登場
登場でいいよね？
Organizations向け機能。
プルリクのタイミングでセキュリティチェックを行って修正内容の提案まで行ってくれるらしい。

# GitHub Copilot Workspaceの発表
ビルド、実行、テストといったCI/CDラインの他、
Issueを作るだけで自動でコードを書いてくれるらしい。
まだ試せない。

ちなみに[公式の記事](https://github.blog/jp/2023-11-09-universe-2023-copilot-transforms-github-into-the-ai-powered-developer-platform/#%e6%ac%a1%e3%81%ab%e6%9d%a5%e3%82%8b%e3%82%82%e3%81%ae%ef%bc%9agithub-copilot-workspace)でtypoしてる。

```
あなたのリードに従って、IsueからPull Requestまで、AIの力でリポジトリ全体に変更を加えることができます。
```

# おわりに
GitHub Copilot Workspace、GitHub Universeの名に恥じぬ強烈な内容でしたね。
マジで速く試してみたいです。
アイデアだけ書いて自動でビルドまでしてくれると信じてる。

# 参考

Universe 2023: CopilotがGitHubをAIを駆使した開発者プラットフォームへと変貌させる - GitHubブログ
https://github.blog/jp/2023-11-09-universe-2023-copilot-transforms-github-into-the-ai-powered-developer-platform/

GitHub Universe 2023 での AI に関する発表まとめ！Copilot Chat の12月からの一般提供開始など | DevelopersIO
https://dev.classmethod.jp/articles/summary-of-github-copilot-announcements-at-github-universe-2023/
【CodePen】『一日一善』習慣化アプリでみんなハッピーって寸法よ

# 一日一善、できてますか？

**一日一善**（goo辞書）
「１日に一つの善行をして、それを積み重ねるようにしなさいという呼びかけ。」

善い行いが、誰かのため、自分のためになる。毎日続けようという意味。素敵ですよね。
**できてないけど。**

# やろう
素敵と思うならやろうよ私。気づいたら一日終わってるんだよなあ。
**こういう時は『見える化』すると良いって、誰かが言ってた気がする。**

ちょうど使えそうな技術を学んだところだし、やってみますか。
今回も、まっっったくの初心者がお届けする記事となっております。

:::note info
【目標】
　■ ToDoリスト機能を応用して、一日一善を管理するアプリをつくりたい。
　■ 書き出すだけでなく「完了」にしたり、「削除」したりしたい。
:::

# 技術・環境
CodePen（アプリ制作環境）
Netlify（完成アプリ公開環境）
Vue.js（JavaScriptライブラリ）
iTyped.js（JavaScriptライブラリ）

# 私のWebアプリへようこそ！
##  いにしえのHTML、CSS知識を呼び起こす
**「あなたは 100 人目のお客様♪」みたいなホームページをつくっていた黒歴史を思い出し悶絶。**

こんなところで再会するとは、人間、何がどこで役立つかわからないものです。危うく古傷がひらきかけましたが、見た目部分を完成させることができました。

![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563752/d9f2239d-ffb0-11ae-ad2e-a0887201f9e3.png)

##  JavaとJavaScriptはパンとパンダくらい違う
**「名前はちょっと似ているけど全くの別物」ということらしいです。**
うまい例えしますね。まあ私は、JavaもJavaScriptもわからないのですが。

『JavaScriptライブラリ／フレームワーク』と呼ばれる、JavaScriptを使った開発作業において汎用的に使える機能を、みんなで使えるようにまとめた場所がいろいろあるので、そこからお知恵を拝借することにしました。今回は『Vue.js』と『iTyped.js』を参考にしています。

##  Webアプリ第１号、爆誕
なんだかんだで動くものができてしまった。紹介動画をご覧ください。

https://twitter.com/xe_ay51938/status/1723543467832590560

##  詳しくはこちら
### CodePen（どう機能を実現しているか）
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBgmELd" data-user="XE-AY" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/XE-AY/pen/qBgmELd">
  【HW】Todo List</a> by XE-AY (<a href="https://codepen.io/XE-AY">@XE-AY</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Netlify（機能サンプル）
https://6550486d9eb86130c7a65f8e--earnest-medovik-363ca9.netlify.app/

# もっと応用できそう
冒頭で述べた目標を達成することができました。
それっぽいものができてしまった…JavaScriptすごい。JavaScriptライブラリすごい。

当アプリの用途について、紹介動画のところでもチラっと言及したのですが、
**こどものお手伝い習慣付けにも使えそうだと思いました。**
**スタンプカード機能を追加したり、ごほうび画像が出る仕様とか追加しても良さそうです。**
ママもパパもキッズもハッピーって寸法よ。

機能はToDoリストでも、誰かのために使えたり、こどもとのコミュニケーションツールにもなったり、アイデア次第で用途は無限大ですね。

# 参考
goo辞書　一日一善
(https://dictionary.goo.ne.jp/word/%E4%B8%80%E6%97%A5%E4%B8%80%E5%96%84/)

Vue.js - The Progressive JavaScript Framework
(https://vuejs.org/)

iType.jp
(https://ityped.surge.sh/)
Salesforce World Tour 2023 についてまとめてみた

こんにちは
本橋孝昭です

今回は2023年11月28日、29日に開催される
Salesforce World Tour Tokyoについて解説します

https://event.salesforce-japan.com/wttnov23/


# いつ開催されるか

11月28日、11月29日に開催されます
そのうち東京は２日間会場＋オンラインで開催されます
大阪は会場で1日間開催されます

他にもAfterイベントとしてオンラインのSalesforce資格取得無料ウェビナーが開催されます

オンラインでも会場でも両方開催されるのでかなり参加しやすいイベントだと思います

# Salesforce World Tour とは

公式サイトにはこのように記載されていました

>Salesforce World Tour Tokyoは、企業の経営者、意思決定者、ITならびに事業部門長、
そしてTrailblazerを対象に、データ、AI、CRMの活用によるビジネス変革をテーマにし
最新イノベーションをお届けします。

当日はSalesforceのセッションが多数ありますがおすすめをお伝えします


# 注目1 基調講演

おすすめ1 やはり基調講演
11月28日　9時から11時に開催される基調講演はやはりおすすめです
Now Everyone's an Einstein〜データ+AI+CRM+信頼でこれからの時代をリードする企業へ

特にSalesforce創業者マークベニオフ氏が今回6年ぶりの来日講演がされることに注目が集まっております

https://www.linkedin.com/posts/salesforce_%E7%84%A1%E6%96%99%E7%99%BB%E9%8C%B2%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89salesforce-world-tour-tokyo%E5%9F%BA%E8%AA%BF%E8%AC%9B%E6%BC%94-activity-7120604495134216193-7kA5?utm_source=share&utm_medium=member_desktop

このQiita上でも結構広告宣伝されていますね
![Qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/24ce4bea-20d4-a5d5-2ba7-6c961744e7e9.png)




基調講演の会場は一瞬で満席となりましたがオンラインでの参加はまだ可能のようです

今回のWorld TourはAIとSalesforceの掛け合わせが注目されるので、基調講演ではAI活用の最前線の事例が分かるようなのでとても楽しみです

# 注目2 True to the Core〜顧客の声を製品進化に取り入れる方法

次に注目する内容として最後のセッションの
「True to the Core〜顧客の声を製品進化に取り入れる方法」です
ここでは
Sales Cloud、Service Cloud、Account Engagament、Platformの製品開発責任者が一同に集まります。
そして、製品ロードマップや、日本で募集した質問や機能アイデアを製品開発責任者に提案したり質問を行うセッションです

昨年も同様のセッションがあり私も質問をしました

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

今回どのような質問が行われるか注目ですね。

# そのほかおすすめ オフラインAfter　Event
他にもAfter　Eventとして11月30日、12月1日に資格取得無料セミナーがオンラインでございます


2023年11月30日
資格対策ウェビナー Certification Days「認定アドミニストレーター

2023年12月1日
資格対策ウェビナー Certification Days「認定Platformアプリケーションビルダー」

こちらおすすめです


他にもWorld Tourには150を超えるセッションがございます

ぜひ皆さんも興味があるセッションを見つけてみてください。
ABC328回答メモ

# 0.はじめに
　今回は調子が良く、開始40分でDまでをクリア。
　Eは1時間悩んでも解けず、解説を見て問題の意図を知る体たらく。
　とはいえ、久々にレート+25とアップしました。
　デイリートレーニングのおかげでCくらいまでの
　回答スピードが上がった気がします。
 

# 1.A - Not Too Hard
　リストを見ていき、X以下の場合を集計するだけの簡単なお仕事でACでした。

　https://atcoder.jp/contests/abc328/submissions/47457322


# 2.B - 11/11
　ぞろ目の定義を勘違いしないようにしないといけない問題。
　とはいえ、10/10をぞろ目と判断するようだと、簡単すぎるかなとは思います。
　まぁ扱うケースも多くないので、単純に日付を文字列にし
　先頭からすべて一致しているかをチェックするという形で
　堅実に実装しました。

　https://atcoder.jp/contests/abc328/submissions/47463981


# 3.C - Consecutive
　指定の桁までに連続するアルファベット数の累積和を計算しておき
　Q毎に、r、lの累積和の際を表示するのみでした。
　参考書に出てきそうな典型的な問題でした。

　https://atcoder.jp/contests/abc328/submissions/47468718


# 4.D - Take ABC
　実装方法は迷いましたがdequeを使用しました。
　考え方
　　先頭から文字列をスタックしながら見ていき
　　Cが現れた時に、スタックされた後ろから2文字がABの時
　　スタックからABを除去。
　　上記を繰り返し、最後にスタックを出力して終了
　スタックの実装さえできれば、制約もそれほど大きくないため
　十分ACできました。

　https://atcoder.jp/contests/abc328/submissions/47484487


# 5.E - Modulo MST
　試験時間中は、最小全域木のコスト計を求めてMODを取って終了。と
　まったく質問の意図を考えない恥ずかしい実装をして悩んでました。
　まぁ、最小全域木を求める方法を学べたので良しとします。

　解説を読んで、結局全全域木のコストを計算しないと解けないことが分かり
　M辺の中から、N-1辺を取り出すcombinationsを作り
　その組み合わせが全域木になっていれば、コストmodを計算し
　そのコストmodの中で最小な値を出力して終了としました。
 
　https://atcoder.jp/contests/abc328/submissions/47519072

 
以上
オブジェクト指向は「プログラミング技術」としての側面と、「汎用的な整理術」という側面を持つ

:::note
プログラミング言語分野での効果が認められたオブジェクト指向は、次の段階でその効果をシステム開発全体に波及させるため上流工程にも応用された。

それは「**物事を分類して整理する基本的な仕組み**」に進化することになった。これによりオブジェクト指向の適用範囲は大きく広がった一方で、混乱をもたらすことにもなった。
:::

### ソフトウェアは現実世界をそのまま表現しない
コンピュータは現実世界の仕事や遊びをそのまま「**丸ごと置き換える**」ものではありません。あくまで人間が楽をするために現実世界の仕事の「**一部を肩代わりする**」だけ。

例えば、
病院のシステムは、現実の病院をそのまま表現する訳ではなく、患者のカルテの記録や、医療費の計算を支援はしてくれます。しかし、実際に病気にかかるのは現実世界の人間ですし、患者を診察したり面倒を見たりするのもやはり現実世界の人間。

### オブジェクト指向は集合論と役割分担に応用された
システム開発におけるプログラミングの前段階で、システム対象となる現実世界の様子を整理する業務分析や、要件定義などの**上流工程でもオブジェクト指向を適用させる**動きが起きた。

その中でオブジェクト指向プログラミングの仕組みを「そのまま」ではなく、「応用」して適用することになった。ここでの応用とは「使えるところだけ使う」ことを指している。
（クラスやポリモーフィズム、継承といった全ての仕組みが上流工程にうまく当てはまる訳ではなかった）

### 集合論
オブジェクト指向プログラミングにおける「**1つのクラスから実行時にたくさんのインスタンスを作る仕組み**」が集合論における**集合と要素**によく似ていたため、**クラスとインスタンス**は上流工程で集合論に応用されることになった。

例
「佐藤さんと田中さんがインスタンスで、従業員がクラス」
「2月3日に行った2冊の本の注文がインスタンスで、注文がクラス」

集合論は、現実世界の物事や出来事のほとんどに適用される。この考え方に当てはめれば、世の中のありとあらゆるモノが、クラスとインスタンスで整理する対象になる。このように拡張すると、オブジェクト指向は認識論や哲学といった領域にまで踏み込むことになる。

### 役割分担
オブジェクト指向プログラミングにおける「メッセージパッシング」は、インスタンスを指定して、そのクラスのメソッドを呼び出す仕組み。
この仕組みは上流工程で「特定の役割を持つもの同士が、消えられた方法で連絡し合う様子」を表現するので、一般的な役割分担のモデルに応用された。

「レストランでウェイトレスに料理を注文すること」や「建設会社のA社に工事を発注すること」なども、どれもメッセージパッシングと見なすことができる。

役割分担の考え方は、企業や組織の「〜係」「〜担当」といった役割を持つ人間、機械、プロセスやスレッドなど色々なものに応用できる。

:::note
結果としてオブジェクト指向は、物事を分類して整理する仕組みと、役割分担を表現する仕組みを備えた汎用の整理術となった。

先に存在していた「プログラミング技術」に、この「汎用的な整理術」という抽象的な考え方が加わったことで、オブジェクト指向の適用範囲は大きく広がり、業務分析からプログラミングまでソフトウェア開発全体をカバーする技術になった。
:::

▼参考

https://bookplus.nikkei.com/atcl/catalog/21/S00180/
【Prisma・Supabase】マイグレーションまでの実装手順

# はじめに
`JavaScript(TypeScript)`の`ORM`である`Prisma`と`Supabase`間のマイグレーションまでの実装手順について少しまとめます。

https://www.prisma.io/docs/getting-started/quickstart

https://supabase.com/

# SupabaseでのDB登録
**New Project**から`DB`を作成します。
`DB名`、`Password(後に使用します)`、`Region`を選択し作成します。

https://supabase.com/dashboard/projects

# Prismaの導入
`Prisma`を`--save-dev`でローカルにインストールします。
```javascript
npm i prisma --save-dev
```
次に`Prisma`を初期化します。

```javascript
npx prisma init
```

初期化した際に、`.env`と`schema.prisma`が作られます。

```javascript:.env
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
```

```javascript:schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
```

この際、`.env`の値には一意に作成されたURIを基に`DATABASE_URL`を設定する必要があります。

`Project Settings` > `Database` > `Connection string`に一意の`URI`が作成されているので、こちらを使用します。


![スクリーンショット 2023-11-12 13.44.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/4fa69055-0f0d-0e15-cc8c-ef1d2ad00dc8.png)

`[YOUR-PASSWORD]`にDB作成時のパスワードを設定します。

```javascript:.env
DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.xxxxxxxxxxxxxxxx.supabase.co:5432/postgres"
```

`prisma migarate dev --name init`コマンドを実行し、テーブルを反映します。
`--name init`は作成されたマイグレーションファイルの**接尾辞**として付与されます。
**日時_--nameで指定したテキスト**なので`20231112042642_init`のディレクトリが作成されます。

```javascript
npx prisma migrate dev --name init
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "postgres", schema "public" at "db.rnrucpiiaizlmywkticf.supabase.co:5432"

Applying migration `20231112042642_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20231112042642_init/
    └─ migration.sql

Your database is now in sync with your schema.
```
自分のABCの解答まとめ

簡易的なもの

# ABC1~
未投稿
# ABC101~
未投稿
# ABC201~
未投稿
# ABC301~
## 301~310
未投稿
## 311~320
[ABC318](https://qiita.com/hyouri/items/554c098c5a57d5b0dc91)
[ABC319](https://qiita.com/hyouri/items/26122b2466977192967e)
[ABC320](https://qiita.com/hyouri/items/7a43143eccbb534e7c03)
## 321~330
[ABC321](https://qiita.com/hyouri/items/4302e3edc0db5e345a2e)
[ABC322](https://qiita.com/hyouri/items/0659b3ac0dbdbe6710c2)
[ABC323(A~D)](https://qiita.com/hyouri/items/72513995e082375c61a2), [ABC323(E,F)](https://qiita.com/hyouri/items/382da3ff82730781e433)
[ABC324](https://qiita.com/hyouri/items/8626c54d926d2219d71c)
[ABC325](https://qiita.com/hyouri/items/a73ab53b5dea07bb57dd)
[ABC326](https://qiita.com/hyouri/items/695df2022d652f6b1077)
[ABC327](https://qiita.com/hyouri/items/b8ca1ad7186e418a3eb0)
[ABC328](https://qiita.com/hyouri/items/8b24c7dff8274ef0d1f8)
[ABC329](https://qiita.com/hyouri/items/ec1a894ddb6c291c2e56)
[ABC330](https://qiita.com/hyouri/items/8222ea5602eea3c34877)

## 331~340
[ABC331](https://qiita.com/hyouri/items/dad50eabca0223989a39)
[ABC332](https://qiita.com/hyouri/items/48b4e1af0b6caec02494)
[ABC333](https://qiita.com/hyouri/items/c576a4ffee7585735853)
[ABC334](https://qiita.com/hyouri/items/184d834b6a158e8cd38c)
[ABC335(A~E)](https://qiita.com/hyouri/items/72520f942ba8986de823), [ABC335(F)](https://qiita.com/hyouri/items/11e88ecbfe85d8677b57)
【Java】Enumのインスタンス化

## Enumのインスタンス化は列挙子単位

:::note info
Enumのインスタンス化はクラス単位ではなく、列挙子単位で行われる。
:::

次のような列挙子(A, B, C)を持つEnumを使用すると、「A, B, C」3つのSample型のインスタンスが生成される。

```java
public enum Sample {
    A, B, C
}
```

具体的には、以下のようにSample.Aを呼び出すことで、「A, B, C」3つのインスタンスが生成される。

```java
public class Main {
    public static void main(String[] args) {
    	Sample sample = Sample.A;
	}
}
```

:::note warn
呼び出しているのは`Sample.A`のみだが、Sample型のインスタンスとして生成されるのはEnumに定義されている全ての列挙子(A, B, C)となる。
:::

## Enumのインスタンスが生成されるのは1回だけ

列挙子を使用するタイミングで毎回インスタンスが生成される場合、次のコードの結果は「false」になるはずだが、実際には「true」が返ってくる。

```java
public class Main {
	public static void main(String[] args) {
		sample(Sample.A); // ここでインスタンスが生成される
	}
	private static void sample(Sample sample) {
		System.out.println(Sample.A == sample); // ここではインスタンスが生成されない
	}
}
```

::: note info
独自に定義したEnumをコンパイルすると、コンパイラによって自動的に追加されるstatic初期化子の中で各列挙子のインスタンスが生成され、staticフィールドに代入されるらしい。
:::


## 参考

https://docs.oracle.com/javase/jp/11/docs/api/java.base/java/lang/Enum.html

[徹底攻略Java SE 11 Gold問題集［1Z0-816］対応](https://book.impress.co.jp/books/1121101020) p.57
freezedのさまざまな書き方

# 通常のエンティティを作成する
```dart
import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
@freezed
class User with _$User {
  factory User({
    required String firstName,
    required String lastName,
    required int age,
    @Default(false) bool isMarried,// If you want to define defaultCalue
  }) = _User;

    const User._(); // if you want to define some function, you must determine private constructor
    bool get fullName => '$firstName $lastName'
  
}
```


# jsonを扱うエンティティを作成する
```dart
import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
part 'user.g.dart';

@freezed
class User with _$User {
  factory User({
    required String firstName,
    required String lastName,
    required int age,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) =>
  _$UserFromJson(json);
}


```

# Unionクラスを作成する
```dart
import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
@freezed
class Platform with _$Platform {
  const factory User.woman() = _Woman;
  const factory User.man() = _Man;
  const User._();// Prevent constructing from constructor.
  String get preName => when(man : () => 'Mr.', woman : () => 'Ms.')
}
```
s6-overlayで作成されているDockerイメージにサービスを追加する

# 概要
s6-overlayを使用しているDockerイメージに対し機能を追加しようとしましたが、ハマって結構な時間を取られたので、動いたコードと試したことを共有します。

# 必要事項
s6-overlayでサービスを動かすために、以下のことは最低限必要です。
- runファイルの作成
- typeファイルの作成
- `/etc/s6-overlay/s6-rc.d/`配下にrunファイル、typeファイルを配置
- `/etc/s6-overlay/s6-rc.d/user/contents.d/`配下に上記で追加したサービス名のファイルを配置

### runファイルの作成
```text:run
#!/usr/bin/execlineb -P
socat tcp-listen:8080,fork,reuseaddr tcp-connect:abehiroshi.la.coocan.jp:80
```
サービスを実行するためのコマンドを記載します。一番上の行は、alpine系のs6-overlayのイメージで使用するようです。（[参考][1]）他のディストリビューションの場合は不明。

```text:run
#!/usr/bin/with-contenv sh
socat tcp-listen:${SOCAT_LISTENPORT},fork,reuseaddr tcp-connect:${SOCAT_CONNECTHOST}:${SOCAT_CONNECTPORT}
```
環境変数を使用する場合は、一番上の行が`#!/usr/bin/with-contenv sh`になるようです。（[参考][2]）

### typeファイルの作成
```text:type
longrun
```
初期処理に使用するスクリプト(oneshot)か、サービスとして動かすものか(longrun)を指定します。今回はサービスとして動かすため、longrunを指定します。

### runファイル、typeファイルを配置
`/etc/s6-overlay/s6-rc.d/`に任意のサービス名(今回は`socat-1`)でディレクトリを作成し、ディレクトリ内に上記で作成したrunファイルとtypeファイルを配置します。

### contents.d配下にサービス名のファイルを配置
`/etc/s6-overlay/s6-rc.d/user/contents.d/`内に、上記で作成したディレクトリ名のファイル(今回は`socat-1`)を作成します。中身は空です。

# 動いたコード
```Dockerfile:Dockerfile
FROM linuxserver/wireguard:latest

# socatをインストール
RUN apk add --no-cache socat

# s6-overlayで動くように処理を追加
RUN mkdir /etc/s6-overlay/s6-rc.d/socat-1 && \
(echo '#!/usr/bin/execlineb -P'; \
echo 'socat tcp-listen:8080,fork,reuseaddr tcp-connect:abehiroshi.la.coocan.jp:80'; \
) >> /etc/s6-overlay/s6-rc.d/socat-1/run && \
echo "longrun" >> /etc/s6-overlay/s6-rc.d/socat-1/type && \
touch /etc/s6-overlay/s6-rc.d/user/contents.d/socat-1

# ポート開放
EXPOSE 8080/tcp
```

s6-overlayを使用していた`linuxserver/wireguard`のイメージに対し、socatサービスを使用してポートフォワーディングができるようにします。
8080ポートにアクセスすると、阿部寛のホームページにポートフォワードする設定としています。（動かすと、404 Not FoundでNifty側から返却されますが、ポートフォワードできていることは確認できるので問題なし）
設定ファイルを`COPY`コマンドで持ってくるやり方が一般的なような気もしますが、今回は面倒でしたのでDockerFile上でファイルを作成してしまいました。

# その他試したこと

### chmod の有無
実行可能権限がないとエラーとなるという文献がネット上にありましたが、今回の環境ではchmodがなくても実行できました。

# 感想
分かればそんなに難しくありませんが、s6-overlay自体がバージョン2以前とバージョン3で記載方法が異なっているというのもあり、情報を拾い出すのに苦労しました。ほとんど英語の文献しかなかったため、内容は少ないですが少しでも本記事が助けになりましたら幸いです。

# 参考文献
https://github.com/just-containers/s6-overlay

[1]:https://github.com/just-containers/s6-overlay/issues/449
[2]:https://github.com/just-containers/s6-overlay/issues/46
WebViewを使ってFlutterとNext.jsでデータをやり取りする

## 概要

Next.js上で扱うデータをFlutterに渡したかったので調査しました。なお、WebアプリであればNext.jsである必要はありません。

## 環境

- Next.js 14.0.2
- React 18.0
- Flutter 3.13.9
- webview_flutte 4.4.2

## セットアップ
以下のコマンドでプロジェクトを作成します。
```bash
npx create-next-app next_app
```

```bash
flutter create flutter_app
```

### パッケージのインストール

Webページの表示には**webview_flutter**を使います。
 ```bash
flutter pub add webview_flutter
```

https://pub.dev/packages/webview_flutter#android-platform-views

android/app/build.gradleのminSdkVersionが19より低い場合は、minSdkVersionを設定する必要があります。


## 実装
Next.jsからFlutterにデータを送信します。

### Flutter側のコード
```dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    const String webViewUrl = 'http://localhost:3000';
    const String webViewName = 'flutterWebView';
    controller = WebViewController()
      ..loadRequest(Uri.parse(webViewUrl))
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        webViewName,
        onMessageReceived: (message) {
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text(message.message)));
        },
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}
```
任意のチャンネル名を設定することができ、その名前がJavaScriptの呼び出し名になります。今回はチャンネル名を`flutterWebView`としています。
### Next.js側のコード
```tsx
"use client";
export default function Home() {
  const clickHandler = () => {
    // @ts-ignore
    flutterWebView.postMessage("Hello Flutter!");
  };
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <div className="flex items-center justify-center">
        <button
          onClick={clickHandler}
          className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded"
        >
          Flutterにデータを送る
        </button>
      </div>
    </div>
  );
}
```

## 検証
プロジェクトを立ち上げます。
```bash
npm run dev
```

```bash
flutter run
```
<img width="200" alt="Simulator Screen Recording - iPhone 15 Pro Max - 2023-11-12 at 12.56.39.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783425/0a767b6c-7ef9-fd51-9157-1097358195ba.gif">


Javascript側で送信したメッセージをFlutterで受け取ったことが確認できると思います。

## 参考

https://codelabs.developers.google.com/codelabs/flutter-webview?hl=ja#0

https://creators.videomarket.co.jp/entry/call-flutter-from-javascript-using-webview-flutter
[Django Rest Framework] OrderingFilterを使ってソート機能を実装しよう！

## 概要
Django Rest Frameworkを使って一覧のAPIにソート機能を実装する方法について解説します

## 前提
- Djangoのプロジェクトを作成済み

## OrderingFilter
Django Rest Frameworkを使ってソート機能を実装する際はOrderingFilterを使うのが一般的です
以下のようにfilter_backendsにOrderingFilterを指定することで実装できます

```python
from rest_framework.viewsets import ModelViewSet

from application.models import Product
from application.serializers.product import ProductSerializer
from rest_framework.filters import OrderingFilter


class ProductViewSet(ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer
    filter_backends = [OrderingFilter]
```

実装したAPIを確認します

![スクリーンショット 2023-11-12 13.18.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/4cf61ffe-8e0b-2f74-173b-fe3c09fbc035.png)

Filterの箇所を押すと以下のように適用したいソート条件を入力できます
![スクリーンショット 2023-11-12 13.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/3913f532-1845-bb29-a13c-a1743b434607.png)

## ソートしてみよう
試しに`Price - 昇順`を押すと以下のように昇順に値段がソートされます
その際は
```
?ordering=price
```
というふうにソートパラメータがAPIのパスの後ろに適用されます

![スクリーンショット 2023-11-12 13.20.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/39218bc8-fba9-2618-cfba-83ba1954ee24.png)

逆にソート順を降順にする際は
```
?ordering=-price
```
というふうにソートパラメータに`-`が適用されます

![スクリーンショット 2023-11-12 13.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/4b34e5a4-d056-fc38-2fcc-8909fca70ee4.png)

## デフォルトのソート
また、ordering_fieldsにパラメータを設定するとデフォルトのソート順を指定できます
以下のように設定すればpriceのソートパラメータなしで値段の昇順にソートされます
ただし、一般的にバックエンド側ではなく、フロントエンド側でデフォルトのソート順を保持しておいてフロントエンドから送られたソートパラメータに従ってソートするケースが多いので参考程度に認識していただければと思います

```python
class ProductViewSet(ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer
    filter_backends = [OrderingFilter]
    ordering_fields = "price"
```

![スクリーンショット 2023-11-12 13.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/2780e298-9582-9a85-f210-e1808b60244e.png)


## 参考
https://www.django-rest-framework.org/api-guide/filtering/#orderingfilter
複数列ピボットで階層(結合セル)テーブルを処理する

# 階層テーブルの横持ちの値を縦持ちにしたい



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/dedf4e86-b12d-b390-a776-c7da182a6176.png)

上記のExcelファイルのようにセルの結合による階層テーブルになっているテーブルデータはオープンデータに多く存在します。
以下のように横持ちの値を縦持ちにしたいしたいことはよくありますが、処理が結構面倒で、Excelファイルを1つ1つ手直ししていってキリがないみたいなことはよくあって面倒くさいですよね...。
こんな課題をTableauPrepのみで処理する方法をご紹介します。
※使用ver: Tableau Prep Ver.2023.3

また、今回の記事は、
「第8回 Tableau Prepユーザー会」の31:00~あたりから、実際のTableau Prep画面使いながらご説明もしているので、
記事での理解は苦手な方がいらっしゃれば是非ご覧ください。

https://www.youtube.com/live/RRL9oiSW9pY?si=x_nXU_oR2IRHJXuN

## 手順1 : ヘッダー名を整える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/46463870-53a6-8f73-c49c-aa421b5fc6c0.png)

### データインタプリタを使用
データを読み込むと上記のように店舗と数量のカラムのヘッダー名がF~になってしまっています。
これをデータインタプリタにチェックを入れることによりヘッダー名を取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/9dd88fa5-06de-cd70-faac-7563c0aac7c6.png)

 ### ↓
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/6af62038-a2ab-2bc2-373c-9612abb94a46.png)

<br>

## 手順2 : 複数列にピボットする
<br>

 1.まずは目標のフィールドのみをピボットします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/1291cc81-cd3c-2006-fbb3-854ddc55158c.png)

2.ピボットする列を追加し、数量フィールドをピボット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/6fbbdd28-c610-a1d2-a658-4f20281f59e2.png)


## 手順まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3591095/73eea22e-f3a2-f0ed-d22b-7c6587dec658.png)






## おわりに
今回はTableau Prepで複数列ピボットで階層テーブルを処理するご紹介しました。
ワンクリックで実現できますが、意外とご存じない方もいらっしゃるので、
初めて知ったという方は1つのPrepスキルの引き出しとしてお持ち帰りいただけると幸いです。


またこのテクニックはPreppindataの
「2023: Week 38 - Sustainable Development Goals」で課題として出題されているので
理解を深めたい方はこちらに挑戦してみるのもおすすめです。

https://preppindata.blogspot.com/2023/09/2023-week-38-sustainable-development.html


最後までご覧いただきありがとうございました。
【QiitaNight】誰を顧客として考えるのか~プロダクト思考をもったチームビルディング~

# この記事は何
QiitaNightで登壇したLTについて当日お話できなかったことをまとめている記事となります。

# LT登壇資料
<a href="https://speakerdeck.com/disk042t/shui-wogu-ke-tositekao-erunoka-hurotakutosi-kao-wochi-tutatimuhiruteinku">誰を顧客として考えるのか ~プロダクト思考を持ったチームビルディング</a>

# プロダクト思考とプロジェクト思考について
## 当日話した内容
- プロダクト思考とプロジェクト思考の違い
    - プロダクト思考をチームで持つことは手戻りのリスクやチームとしてコミュニケーション量も増えるので持っておいて損はない
## 当日話せなかった点
- どちらが優れているという話ではない
    - どちらもバランスよくチームで持つ必要がある
- プロダクトマネージャーという観点でいうとプロダクト思考は必ず持っておかなければならない
    - むしろプロダクト思考を体現している必要がある

# 課題の把握について
## 当日話した内容
- 現状の把握、つまり成長させる領域を見極めよう
    - 現状と理想のギャップを認知することが大切
- 現状の課題が把握できたら、解決策を実践していきましょう
    - 誰が顧客なのか今一度認識しよう
        - BtoBtoCプロダクトであれば、私がフォーカスすべき顧客は法人である
        - もちろん、その先にいるtoCに向けた機能開発も必要であるが優先度は見極めよう
    - 質問フォーマットを作ろう
        - 質問を無駄にしない
            - ナレッジを貯めていこう
    - コミュニケーションの中心にPM（自分）を置く
        - Biz-Dev間のコミュニケーションの中心に自分を置くことで円滑で有意義な会話を増やそう
        - 意思決定をスムーズにするためにもチーム内に情報共有を積極的にしていこう

## 当日話せなかった点
- GOAL設定は未来（理想）起点で設定しよう
    - GOALを未来に置かないと現状維持にモチベーションが働く要因になってしまうため
    - GOALは高く設定しよう
        - 何を実現したいのか明確にしたGOAL設定が大切である
- コミュニケーションはオフライン・オンライン問わず、さらには部署間を超えていこう
    - 顔を出す、どんな会話がされているのかチャットを確認しよう
        - 知らない内に進んでいたというのが一番怖い

# まとめ
申し込み人数が250名を超える大きいイベントに登壇させていただき、非常に貴重な経験となりました。
また各社のプロダクトマネジメント事情が知れ、弊社の伸びしろを再確認できた機会にもなったので今後も是非参加していきたいです。
QiitaNight運営の担当者様、当日までの準備・当日の段取り含めて有難うございました！

**みんなで熱狂的にプロダクト開発をしていき、世の中を素敵なプロダクトで満たしていきましょう！**
Level Up with Advanced Formulas


# We could not check if the Opportunity object contains the correct fields per the requirements. 

+ [Hands-on Challenge Error](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000Elka5SAB)

面白い解決法です。

:::note
I figured it out! At the beginning of Level Up with Advanced Formulas, under the Write It Out section, they have you create a Loss Reason picklist. I deleted the validation rule as well as the picklist I created called Loss Reason.
チェックロジックのバグのように思える。新しいプレイグランドなら成功するのも、このせいかもしれない。
:::

+ [Reason for following error "We could not check if the Opportunity object contains the correct fields per the requirements."](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000E9lR4)

:::note
必須の設定が邪魔していたようです。

Sorry, In a previous Exercise I have made a field ('Discount Percent Status') of Opportunity Object compulsory so  whenever your system is testing my exercise I think it wasn't providing that value. I make that field optional.
:::

+ [Level up with advanced formulasHi,I am having this error and after searching all questions and try all options, still having this  "We could not check if the Opportunity object contains the correct fields per the requirements." thanks,Lee-Ann](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007FTCB0)

:::note
 it worked for me , I unchecked  the Discount Percent field's  required general option in the Opportunity Object. 
:::

# 未解決

+ [We could not check if the Opportunity object contains the correct fields per the requirements.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000MhkQO)