OmniAICreator/Qiita-1.07M huggingface dataset:
Listの行を並べ替える。

### 簡単に。

[.onMove(perform:)](https://developer.apple.com/documentation/swiftui/dynamicviewcontent/onmove(perform:)) modifierを使用する。

---
### 詳細に。

このmodifierは[DynamicViewContent](https://developer.apple.com/documentation/swiftui/dynamicviewcontent)（データから動的に生成するViewのprotocol）に定義されており、より詳細に見ると次のとおり。
```swift
func onMove(perform action: Optional<(IndexSet, Int) -> Void>) -> ...
```

- `onMove(...)`は引数として、`nil`あるいはクロージャ`(IndexSet, Int) -> Void`を受け取る。
    - `nil`を渡すことで並替機能を無効化できる。
    - クロージャの引数
        - `IndexSet`は、動かしたい要素（単/複数）のインデックスの集合。
        - `Int`は動かしたい要素が挿入されるべきインデックス。


### 上記クロージャに渡されることが多い下記メソッドについて。
```swift
MutableCollection.move(fromOffsets source: IndexSet, toOffset destination: Int)
```

 `source`に渡されていない（即ち動かす対象でない要素の）インデックスに関して、
    `destination`よりも小さいインデックスに紐づいていた要素は`collection`の前方に、
 大きいインデックスに紐づいていた要素は`collection`の後方に移動される。

```swift
var letters = Array("ABcDefgHIJKlmNO")
let lowercaseOffsets = IndexSet(...) // 小文字たちのoffsets
letters.move(fromOffsets: lowercaseOffsets, toOffset: 2)
// String(letters) == "ABcefglmDHIJKNO"
    
// Reset the `letters` array.
letters = Array("ABcDefgHIJKlmNO")
letters.move(fromOffsets: lowercaseOffsets, toOffset: 15)
// String(letters) == "ABDHIJKNOcefglm"
```
Ubuntu デスクトップからスクリーンショットを撮影する方法

Ubuntu デスクトップからスクリーンショットを撮影する方法は色々あると思うけど、一番これが使いやすい。

* 範囲を指定して撮影する  
撮影画像は日付情報などが名前について、ピクチャディレクトリに保存される。
```bash
$ gnome-screenshot --area
```
参考URL:
https://japanese-document.github.io/tips/2023/ubuntu-screenshot-area.html
IFormattableを実装する

## 参考
この記事は、以下の動画を参考にしています。詳しくは、動画をご覧ください。

https://youtu.be/4xxode-i1nI?si=DCjUxlwwGSZEa1Nq

`IFormattable`インターフェイスのヘルプも、参考にしてください。

https://learn.microsoft.com/en-us/dotnet/api/system.iformattable?view=net-8.0

## 動機
ユーザー定義型を文字列表現に変換する際、`DateTime`型のように、書式指定子を含んだフォーマットを指定したい。

このためには、ユーザー定義型で`IFormattable`インターフェイスを実装する。

## IFormattableインターフェイス
`IFormattable`を実装するユーザー定義型では、以下のメソッドを実装する必要がある。

```C#
string ToString(string? format, IFormatProvider? formatProvider);
```
- `format`に応じて、オブジェクトの値を文字列表現に変換するよう、メソッドを記述する（動画では、2つの例を実装しています。参考にしてください）
- `format`にどのような書式指定子を含めることができるかは、自由に決めてよい
- 数値の小数点など、カルチャーに依存した文字列表現へ変換する際には、`formatProvider`を利用する

### 利用
- `ToString`メソッドを呼ぶ
```C#
Console.WriteLine(obj.ToString("XXX", CultureInfo.CurrentCulture));
```
- 複合書式指定を利用する
```C#
Console.WriteLine(string.Format("{0:XXX}", obj));
```

### 注意
- 書式指定子として`G`（General）は、必ず実装すること
- `format`に`null`が渡された場合にも、対応すること
【Typescript】as constと satisfiesの組み合わせによるwideningの抑制と型チェックについて

実務にて、wideningの抑制のためのas constや、型チェックするためのsatisfiesを利用するルールが浸透してきたので、まとめてみました。

## as const
最初にas constのみの場合について説明します。
### 文字列の場合
```typescript
const foo = "foo" as const;
```
としておけば、`foo`はリテラル型(`"foo"型`)であることを保証され、意図しないwideningを防ぐことができます。
numberやbooleanについても同様で、
```typescript
const num = 777 as const;
const fls = false as const;
```
としておけば、それぞれ777型、false型のリテラル型となります。

### オブジェクトの場合
オブジェクトの場合は、下記のように使用します。
```typescript
const obj = {
    foo: "foo",
    bar: 777,
    foobar: true
} as const;
```
オブジェクトの場合、as const を使用しないと、各プロパティはリテラルとは推論されないが(上記fooならstirng型)、as const を使用することで全プロパティがリテラル型になります。
```typescript
const obj = {
    foo: "foo",//"foo"型
    bar: 777, //777型
    foobar: true //true型
} as const;

obj.foo = "bar"; //怒られる
```

### 使い所
定数をexportする際、予期しないところで型wideningが起きてしまうこと可能性があるため、積極的にas const を使う。

## satisfies
次に、satisfiesのみの場合について説明します。
例えば、下記のようなオブジェクト（キー名は`"red"`, `"blue"`,  `"green"`のどれか、valueは string または number[]）があるとします。

```typescript
type ColorList = {
  [key in "red" | "blue" | "green"]: string | number[];
};

const colorList = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff"
} satisfies ColorList;

console.log(colorList.white);
//------------------- ~~~~~怒られる(そんなプロパティない)

let yelow = colorList.red = "yelow";
// string型と推論され、wideningしており、怒られない
```
satisfiesを使うことで、型チェックはされているものの、プロパティはwideningしてしまっています。それでは困る場合にas const とsatisfiesを組み合わせます。

## as const と satisfiesの組み合わせ

２つを組み合わせるとさらに強力になり、satisfiesによる型チェックと、as const によるwideningの抑制ができるようになります。


```typescript
type ColorList = {
  [key in "red" | "blue" | "green"]: string | number[];
};

const colorList = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff"
}as const satisfies ColorList;

console.log(colorList.white);
//------------------- ~~~~~怒られる(そんなプロパティない)

let yelow = colorList.red = "yelow";
//------------------- ~~~怒られる(redはreadOnlyだよ)
```
このように書くことで、型チェックも入り、型推論も保持し、wideningを抑制することができるようになりました。


## 参考
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html
https://zenn.dev/tonkotsuboy_com/articles/typescript-as-const-satisfies
https://speakerdeck.com/tonkotsuboy_com/typescript-4-dot-9noas-const-satisfiesgabian-li-160d825b-7765-4c2b-945d-bb72cc389557
https://qiita.com/Yametaro/items/494c6e69f7e9bede2197
Amazon（AWS) ElastiCache Redis のクラスタモード時のシャード数、レプリカ数、ノード数の関係

[Amazon（AWS) ElastiCache Redis](https://aws.amazon.com/jp/elasticache/redis/) のクラスタモード時のシャード数、レプリカ数、ノード数の関係がわかりにくいというか、各語彙がまず難しいので何を言っているか理解するのがむずいのだが、、

普段使いとして、ノード数がかからない（すなわち、お金のかからない）パタンが一番知りたいことなのでノード数が直感的にわかるのが重要。まして、クラスタを構築してノード数が６とか出た場合には金額的に許容できない。

具体的な例でみると関係は以下の通り

```
　* shard:2 replica: 2 → node: 6
　* shard:1 replica: 2 → node: 3
　* shard:2 replica: 0 → node: 2
```

上記より結論として、以下の関係式だけ覚えてればよい。

```
node数 =  shard個数 x  (replica数+1)
```
React testing library でTypeError: expect(...).toHaveTextContent is not a functionが出た

# はじめに
現在、**Jestとreact-testing-library**を導入して、テストを作成しています。
テスト実行時に出たエラーについて解決策をまとめます。
# 問題
下記のテストケースを実行したところ、**"TypeError: expect(...).toHaveTextContent is not a function"** のエラーが出ました。
```jsx:sampleComponent.spec.jsx
import { render,screen } from "@testing-library/react"
import { Study } from "../Study"
import React from "react"

test("タイトルが表示されること",()=>{
    render(<Study />)
    const title = screen.getByTestId("title")
    expect(title).toHaveTextContent("学習記録一覧")
})
```
# 解決方法
**`import "@testing-library/jest-dom"`を追加しました。**
```jsx:sampleComponent.spec.jsx
import { render,screen } from "@testing-library/react"
import { Study } from "../Study"
import React from "react"
import "@testing-library/jest-dom"

test("タイトルが表示されること",()=>{
    render(<Study />)
    const title = screen.getByTestId("title")
    expect(title).toHaveTextContent("学習記録一覧")
})
```
# おわりに
**@testing-library/jest-domとは？**
**テスト時のコンポーネント状態を確認するための便利なメソッド**(カスタムマッチャー)が含まれているライブラリです。

今回使用したメソッド`toHaveTextContent`**は、特定の要素が指定したテキストを持っていることを検証するためのアサーションです。**
（今回の例だと、"title"が"学習記録一覧"と一致しているかどうかをチェックしています。）
**しかし、デフォルトではJestにはこのアサーションが組み込まれていません。
従って、 `toHaveTextContent`を使用するためには、@testing-library/jest-domをインポートする必要があります。**
# 参考
https://stackoverflow.com/questions/65723708/react-testing-library-typeerror-expect-tohavetextcontent-is-not-a-functi

https://create-react-app.dev/docs/running-tests/#react-testing-library
YWTのファシリテートをしてくれるGPTsを作成したので、一緒に今年のデブサミのふりかえりをする

まずは、こちらのYWTファシリテートGPTsを作りました。

https://chat.openai.com/g/g-WwqY949Fi-ywthurikaerihuasiritetoai

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/54c8b1e0-9d56-aa7a-e08b-f7325db2f933.png)


　2024/2/15~16にベルサール羽田空港で開催されたDevelopersSummit2024に参加したので、さっそくこのYWTファシリテートGPTsを使ってふりかえりをしてみたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/1c972016-9cd0-8f21-b61c-9730f091143e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/6862992a-e399-b2b2-fdfe-7024f244ea70.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/0b55b772-d8ae-6136-1793-f9854cc20787.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/30880427-43ec-12f8-24f1-0fa32da677f9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/740f4995-95d6-b1a9-266c-520bf12ff39b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/17683752-0f90-4a8e-aaa6-8f2ba9b85cbd.png)


　いい感じにYWTで振り返りができたと思います。

　ひさびさにオフラインのデブサミで国内トップエンジニア達の熱意に当てられて、勉強欲、アウトプット欲が爆上がりしていたので、こんな感じでふりかえり＆アウトプットを実践してみました。
【メモ】Gitで特定のディレクトリを管理下から外す


## はじめに
ローカルリポジトリでGitの支配下にしたディレクトリ内でGitで管理する必要のないディレクトリをストレージから消去せずにGitの管理下から外す方法について調べた時のメモです。

## ディレクトリ構成
二つのディレクトリ「dir1」「dir2」とREADMEファイルが入っている練習用のディレクトリ。

```
$:~/github/test$ ls
dir1  dir2  README.md
```

ローカルリポジトリの状態は以下のよう。
「dir1」と「dir2」がGitの管理下に入っていますが、commitしていない状態です。
この状態から「dir2」だけをGitの管理下から外す方法を調べて実行しました。
```
$:~/github/test$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
new file:   dir1/test.txt
new file:   dir2/test.txt
```

## 失敗例：rm -rfコマンド
色々調べてrmコマンドに-rfを付けて実行した場合です。
```
$:~/github/test$ git rm -rf dir2
rm 'dir2/test.txt'
$:~/github/test$ ls
dir1  README.md
```

「dir2」はGitの支配下から消えるのですが、lsコマンドで確認してみると、ストレージ上からも「dir2」ディレクトリが消えてしまいました。
```
$:~/github/test$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
new file:   dir1/test.txt
new file:   dir2/test.txt
```
これでは、ディレクトリ化のファイルも削除してしまうことになるので、うまくGitの支配下からのみ削除するための別の方法を調べました。
# 成功例：rm --cachedオプションを使う方法
再び「dir2」ディレクトリを作り直した後、いろいろ外のサイトを見て回った結果、「--cached」オプションを付けると成功するということが分かりました。
以下は実行例です。
「git rm」コマンドを実行した後もストレージ上からは「dir2」ディレクトリは消えていません。
```
$:~/github/test$ git rm -r --cached dir2
rm 'dir2/test.txt'
$:~/github/test$ ls
dir1  dir2  README.md
```
「git status」でGitの管理状態を見ると「dir2」が管理下に入らず、「dir1」だけがcommitの対象になっていることが分かります。
```
$:~/github/test$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
new file:   dir1/test.txt

Untracked files:
  (use "git add <file>..." to include in what will be committed)
dir2/
```
これで必要のないファイルまでをGitで管理することなく作業を進める方法を知ることができました。
【Rails】コンソールを使いこなそう！レベル1　〜基本的な操作編〜

# コンソールの基本
コンソールとは、プログラムの出力を実際に表示するものです。
極端にいえば、1+1と入力すれば2が返ってきます。
```console
>irb(main):001:0>  1+1
=> 2
```
これを利用して、モデルを作ったり中身を確認したりもできます。

コンソールで実行できたことはそのままコードで使えるので、実装前に確認することでエラーを未然に防ぎつつ、着実にコーディングが行えるようになります。

# コンソールの起動 ・ 終了
railコンソールは、ターミナル上で`rails c`と打つと起動し`exit`で終了します。

```console:コンソール
$ rails c #　起動
>irb(main):001:0> exit # 終了（ショートカットはcontrol + d）
```

`rails c`で作成・編集したデータは、データベースに保存されます。

しかし試作の度にデータが作られるのは困る場合があります。
そんな時は`rails c -s`を使うと、データは保存されずに全てロールバックします。

```console:コンソール
$ rails c -s # このコマンドで起動した場合、作成したデータは保存されない
```

# データのCRUDをコンソール上で行う
## 事前準備
確認用のモデルを作成します。
名前が空白だとエラーになるバリデーションも追加しておきます。
```ruby:model/user.rb
class User < ApplicationRecord
  validates :name, presence: true # 名前が空欄だとバリデーションエラーになる
end
```

## 作成
データを作るには、`create!()`メソッドを使用します。
引数には、`カラム名: 内容`といった形でデータを登録していきます。
```console:コンソール
irb(main):001:0> User.create!(name: "Alice")
```

`!`が無くても生成自体はできますが、生成がうまくいかなかった時にエラー出るので、入れておくと良いでしょう。
```console:コンソール
irb(main):001:0> User.create!(name: nil) # !をつけると、バリデーションエラーが表示される
~ 省略 ~ 
`raise_validation_error': Validation failed: Name can't be blank (ActiveRecord::RecordInvalid)

irb(main):002:0> User.create(name: nil) # エラーの原因が分からない
  TRANSACTION (0.1ms)  BEGIN
=> #<User:0x000000013580d960 id: nil, name: nil, created_at: nil, updated_at: nil>
```

## 確認
簡易的に確認するのであれば、以下3つのメソッドが使えます。

```console:コンソール
irb(main):001:0> User.all   # 登録済みの全ユーザーを返す
irb(main):002:0> User.first # 一番最初に登録したユーザーを返す
irb(main):003:0> User.last  # 一番最後に登録したユーザーを返す
```
※確認方法はたくさんあって書ききれないので、次回まとめます。findとかwhereとか

## 更新
`update!()`メソッドを使うと、作成済みのデータの一部を更新できます。
まず、更新したいデータを変数に登録します。
```console:コンソール
irb(main):001:0> user = User.first
=> #<User:0x00000001366ce828 id: 1, name: "Alice",　〜省略〜
```
次に、updateメソッドで更新したいカラムを更新後の内容を指定します。
特にエラーがなければ、これで更新されます。
```console:コンソール
irb(main):002:0> user.update!(name: "Cheshire")
```
確認すると、名前が更新されていることがわかります。
```console:コンソール
irb(main):003:0> user.name
=> "Cheshire"
```

## 削除
データの削除は`destroy!`メソッドで行います。
まず、現在登録されているユーザーを確認してみましょう。
```console:コンソール 
irb(main):001:0> User.all.pluck(:name) # pluckは特定の要素だけ抜き出して配列化するメソッド
=> ["Alice", "Bob", "Catherine"]
```
次に、一番最初のデータを削除してみます。
updateの時と同様、変数にデータを登録してから削除します。
```console:コンソール
irb(main):002:0> user = User.first
irb(main):003:0> user.destroy!
```
ではもう一度、ユーザーを確認してみます。
```console:コンソール
irb(main):004:0> User.all.pluck(:name)
=> ["Bob", "Catherine"]
```
Aliceが削除されていることがわかります。

:::note info
destroy!を試すときは、rails c -s で起動するのがおすすめです。
コンソール終了後にデータが元に戻るので。
:::

# まとめた経緯
絶対使えた方が便利なのに全然使いこなせていなかったので、わかる範囲でまとめてみることにしました。長くなりそうだったのでレベル別に。
これで手戻り減るといいな〜。

次回へ続く！
Pythonの基本②【クラスの継承】

クラスの基本は

https://qiita.com/jay_42tokyo/items/f853049dcee5e4f0d732
# クラスの継承とは
### 一言で表すと
あるクラスをベースとして、**追加したいメンバ変数や関数だけを追加**し、新しいクラスを定義すること。

### 用語の整理
継承された元のクラスのことを**スーパークラス**、継承して新しく作ったクラスを**サブクラス**といいます。

### 使用例
実際にコードを見た方が早いと思うので、使用例を確認してみましょう！
以下の例では、動物についてのクラス`animal`をベースに、`Cat`クラスを作成しています。
```python:
# スーパークラス
class Animal():
	def __init__(self, type: str = None):
		self.type = type

    # 鳴くメソッド(デフォルトは"にゃー")
	def cry(self, sound: str = 'にゃー'):
		print(sound)

# サブクラス
class Cat(Animal):
	def __init__(self, name: str):
		super().__init__(type='cat')
		self.name = name
		print(f'{self.type}の名前は{name}です')
```
上記の例での`super().__init__(type='cat')`は、`Cat`クラスから見てスーパークラスである`Animal`クラスの`__init__`関数を呼び出している。

インスタンスを作成してみると
```python
cat = Cat(name='tama')
```
`Cat`クラスの`__init__`クラスが呼び出され、以下のように出力される。
```
catの名前はtamaです
```
`Animal`クラスを継承しているため、`Animal`クラスのメソッドである`cry`メソッドも使用できる。
```python
cat.cry() # 出力：にゃー
```

### オーバーライド
オーバーライドとは、スーパークラスのメソッドを**上書き**することです。
オーバーライドしたいメソッドをサブクラスでも同じメソッド名で定義することにより実現できます。
```python
# スーパークラス
class Animal():
	def __init__(self, type: str = None):
		self.type = type

    # 鳴くメソッド(デフォルトは"にゃー")
	def cry(self, sound: str = 'にゃー'):
		print(sound)

# サブクラス
class Cat(Animal):
	def __init__(self, name: str):
		super().__init__(type='cat')
		self.name = name
		print(f'{self.type}の名前は{name}です')

	# 鳴くメソッド(オーバーライド)
	def cry(self, sound: str = 'にゃー'):
		print(sound * 2)

# インスタンス生成
cat = Cat(name='tama')
cat.cry() # にゃーにゃー
```
上記の例では、`cry`メソッドをオーバーライドしています。

## まとめ
このブログでは、クラスの継承について簡単に説明させていただきました。参考になれば幸いです。
CumulusCI

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめA～M](https://qiita.com/Keiji_otsubo/items/f3ddedee6793bf1576f8)




https://github.com/SFDO-Tooling/CumulusCI

CumulusCI は、開発者や管理者からテスターやプロダクト マネージャーに至るまで、組織のセットアップ、テスト、導入を自動化することで、Salesforce プラットフォーム上で優れたアプリケーションを構築するのに役立ちます。


**大規模に実証されたベスト プラクティス。** CumulusCI は、Salesforce.org によって作成された完全な開発およびリリース プロセスを提供し、Salesforce プラットフォーム上の数千のユーザにアプリケーションを構築してリリースします。タスク (単一アクション) とフロー (タスクのシーケンス) の標準セットを使用して新しいプロジェクトを開始したり、独自のプロジェクトを追加してカスタマイズしたりするのは簡単です。

**どこでも構築できます。** CumulusCI を使用して定義されたオートメーションは移植可能です。これはソース リポジトリに保存され、ローカルのコマンド ライン、継続的統合システム、または顧客向けの MetaDeploy インストーラーから実行できます。CumulusCI は、Salesforce CLI を使用して作成されたスクラッチ組織、または Sandbox、本番組織、Developer Edition 組織などの永続組織で自動化を実行できます。


+ [About testing screen flows using CumulusCI's robot framework](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007YvesP)

:::note alert
ElementClickInterceptedException: Message: element click intercepted: Element <input type="checkbox" part="checkbox" id="checkbox-365" name="Incomplete" aria-labelledby="input-label-363" value=""> is not clickable at point (644, 255). 

Other element would receive the click: <flowruntime-screen-field lwc-6aa2906q6hj="" class="flowruntime-section-column slds-col slds-size_1-of-1 slds-medium-size_6-of-12"></flowruntime-screen-field>
:::

:::note
CumulusCIは内部的にはpython seleniumを使っているんでしょうかね。

そうであれば、以下の記事が参考になりませんか？

実はSeleniumでは、画面外にある要素をクリックすることができないのです。

https://office54.net/python/scraping/selenium-click-exception

https://qiita.com/toimenbou/items/635a6e0e241149317e32
:::
Flutter文字が途中で改行される問題対処


絵文字対応版：https://qiita.com/ryouta33/items/32095a264171fe0b1a7c

↑ 注意) 絵文字が壊れるので絵文字対応版作成しました。

0文字のスペースを加えれば文字の前後に加えて対処しました。
というか改行しなくなる文字を識別するのは厳しいので自動対処してほしいです。
https://github.com/flutter/flutter/issues/61081#issuecomment-1103330522

```dart
String convertCharWrapString(String str) {
  var charWrapStr = '';
  for (int i = 0; i < str.length; i++) {
    charWrapStr += '${str[i]}\u200b';
  }
  return charWrapStr;
}
```
wslでelixir その138

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
Livebookで、じゃんけんをDEPLOYしてみた。

# 写真

localhost:8080/apps/janken

![deploy3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/782478de-104e-b917-3a59-ac23a1346730.png)

# セットアップ

```
Mix.install([
	{:kino, "~> 0.10.0"}
])
```

# サンプルコード

```
defmodule Janken do
	def hand(c) do
		cond do
		c == 0 ->
			"グー"
		c == 1 ->
			"チョキ"
		c == 2 ->
			"パー"
		:else ->
			"うそ"
		end
	end
	def judge(a, b) do
		cond do
		a == b ->
			"あいこ"
		a == 0 && b == 1 ->
			"あなたの勝ち"
		a == 1 && b == 2 ->
			"あなたの勝ち"
		a == 2 && b == 0 ->
			"あなたの勝ち"
		a == 0 && b == 2 ->
			"あなたの負け"
		a == 1 && b == 0 ->
			"あなたの負け"
		a == 2 && b == 1 ->
			"あなたの負け"
		end
	end
	def pon(a) do
		res = ""
		{a, _} = a
			|> Integer.parse()
		res = res <> hand(a) <> "と"
		b = 0..2 
			|> Enum.random
		res = res <> hand(b) <> "で、"
		res = res <> judge(a, b)
		res
	end
end

frame2 = Kino.Frame.new()

com = Kino.Markdown.new("0-gu 1-choki 2-pa")
Kino.Frame.append(frame2, com)    
inputs2 = [	te: Kino.Input.text("Anata")]
form2 = Kino.Control.form(inputs2, submit: "Send", reset_on_submit: [:te])

Kino.listen(form2, fn %{data: %{te: te}, origin: origin} ->
  res = Janken.pon(te)
	content = Kino.Markdown.new(res)
	Kino.Frame.append(frame2, content)    
end)
```

# デプロイ

左のロケットマークをクリック、configreをクリック。

![deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7a4e1729-a0b2-4a67-263a-610159b1064c.png)


![deploy2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/2ab39b7a-01cd-b7a0-ad8d-9138f1888e72.png)

以上。
【感想】生産性向上のためのスキル（身に着けたい10のこと）

自分が後で見直すときに、トレンドになった内容を見たときの感想を記載します。
「確かになー」と思うところと、「いやいやこういうときどうするよ」と思うところがあるので列挙していきます。
※個人的な見解です。

生産性向上のために身に着けたい10のこと

〇元ネタ（まとめていただいてる方、ありがとうございます）
https://qiita.com/kntr0116/items/302d5e379505089780d2?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=2b2fb83701-Qiita_newsletter_605_02_14&utm_medium=email&utm_term=0_e44feaa081-2b2fb83701-45474142

## 1. 理解に時間をかける
その通り。対症療法のようにその場は対応しても、類似した事象があるときに応用が利かない。類似だと気付かない場合があるのでじっくり時間かけるべきだと思います。
実際に仕事をしているときには、他タスクも迫ってきているので理解している時間がないってお話が出てくると思います。ぶっちゃけその時点でタスクが溢れてます。タスクの優先度を決めて後ろに延ばせるか、上司に仕事溢れてますってエスカレーションしましょう。

## 2.頭の中に「メンタルモデル」をつくる
その通り。１番のお話にも紐づきますが、どんなタスクなのか、どういった対応なのかをイメージすると理解が早い。追加で言うならお話をする相手や一緒に聞いている人に認識あっているよね？ってラフイメージでもいいので共有すると、メンバーの理解や自分の知識の定着につながるのでとても良いと考えました。


## 3. 「Be Lazy」というマインドセット
ここは相談かなと。１つのものにフォーカスして集中して片づけるのは共感できますが、「より少ない時間で価値を最大化する」のであれば、１つのものを片付ける際にまとめて片づけられるよう考えることがよいと考えました。例えば、とあるシステムで例外処理を作るってなった場合に、他システムとのつながりや類似する処理がないかも意識して共通化する、必要な項目をあらかじめ定義しておくなど実施しておけば、作ったのに再度追加対応するなどの時間は節約できると感じました。

## 4. Fail Fastの精神をもつ
その通り。ただ、これは本人の性格にもよりますが、周りの環境にも左右されますね。
本人がポジティブになんにでもトライするけど環境が、評価しない・変な作業増やしてくる迷惑な奴だとレッテル張られる可能性があるため、難しいところだなと感じました。


## 5. 「何もググらず即実装できる」レベルを増やす
ここは違うかなと考えてます。自分にしかないスキル・価値を上げるために実施するならよいと思ったのですが、即実装できるレベルだとChatGPTで事足りますし成果物が他担当者と同じレベルなら別にかなと思いました。自分にしかできないものを作って、「この人に聞いたら何かわかるかも」って信頼される人になったほうが、他者の生産性を上げる事ができるかなと思います。

## 6. マルチタスクをやらない
半分その通り。経験論なのですが、女性はマルチタスクできる方が多いので、男性ならその通り、女性ならできる限りマルチタスクで対応すればよいのではと考えています。
とある証券会社の女性は、打合せの資料を作りながら、まったく別の打合せに参加している人がいて驚きました。聞いてないのかと思いきや、しっかり聞いていてすげーと驚きました。

## 7. コミュニケーションの際は情報量を減らす
その通り。伝え方のお話だと理解してます。このタイトルはコミュニケーションする時間を減らせって言ってるわけじゃないので注意。しっかりと情報を伝えるために要点伝えてね。余計な情報は削っておいてねがポイントですね。

## 8. クイックコールを心がける
ここは違うかなと思います。打合せをする時間を作るのは、他の人の時間も使ってしまうため予め準備が必要だと思います。資料もつくらず会話すると、自分の主観と事実がごっちゃになり、相手が混乱します。ちゃんとしたアドバイスもできないので時間がもったいないです。
チームメンバー同士で「今の話ってさー」って雑談する感覚で確認するなら理解を早めるための手段としてよいと思いますが、上位層や複数人を集めて検討する場合は準備すべきです。

## 9. 知らないことを恥じない
その通り。知らないままだと１の「理解に時間をかける」ことがさらに時間かかってしまいます。ことわざにもありますが、恥ずかしがらずにしゃべったほうがいいです。こんなレベルのお話なんだ・・・って思われてもＯＫです。だって知らないんですから。
ネットワークエンジニアがhttpって何ですかって聞いたっていいんですよ。


## 10. 成果ではなく時間で仕事の区切りをつける
その通り。責任感が強い人は仕上げるまで頑張ってしまう傾向が多いです。その結果、稼働時間が増えて自己研鑽する時間が減ってモチベーションも下がって・・・と悪循環に陥ってしまう人になりがちです。
時間で区切る方法は慣れればすぐできると思います。オフショア開発してる人みたいに、もう夕方なんで帰りますーぐらい厚かましさは日本には必要だと感じています。
（雑談）日本人ばっかり稼働時間長くなって、オフショアが開発した成果物をチェックして修正する必要はないんです。品質上がるような指示をちゃんとする（忖度しないで全部指示する）

以上、感想でした。qiitaっていろんな方が情報展開していてほんといいですね。もっと調べて自分の見解を書いていこうと思いました。
Spring Boot アプリでの React コンポーネントの使用の仕方をまとめてみた

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

公式：[spring initializr](https://start.spring.io/)

① ブラウザを開き、(https://start.spring.io/) を入力し、開く
② 下記を入力し、Dependenciesで下記を選択し、『GENERATE』ボタンを押す

- Project: Maven
- Language: Java
- SpringBoot: 3.1.1
- jar
- 17

- Group: com.example
- Artifact: springboot_frontend
- Name : springboot_frontend
- Description: Demo projects for Spring Boot frontend
- Package name: com.example.springboot_frontend

Dependencies
- Spring Boot Web
- Spring Boot DevTools





③src/mainファイルに移動し、create-react-appで新規プロジェクト構築する

```
cd src/main
npx create-react-app frontend
cd frontend
npm start
```

## Reference site
[USING REACT COMPONENTS IN A JAVA SPRING BOOT APP](https://www.youtube.com/watch?app=desktop&v=MHdYN4cqsDs)
選択ソート

```py
def selection_sort(A, n):
    for i in range(0,n-1):
        # 最小値を探す
        for j in range(i+1,n):
            if A[j] < A[min_index] :
                min_index = j

        # A[i] と A[min_index]を交換
        A[i], A[min_index] = A[min_index],A[i]

        # A[0] ~ A[i] が整列済みになった
        print(*A)
        
        
n = int(input())
A = list(map(int,input().split()))
selection_sort(A,n)


```
１）最初のループでrangeがn-1,つまりn-2までになっているのは、最初の2個を比較するため。
２）1番目の数になっているiの要素と、それ以降、つまりi+1〜n-1（nからiをひいたもの）の中でループしている要素を比較し、最小のものを探す。
３）そしてA[i]とA[min_index]を交換する
４）この繰り返しで最終的にソートされる。
LinuxのUIDに関して

# 1.はじめに

Linuxで作業をしている際、曖昧な点が多く、質問されたときに戸惑ってしまうことがありました。そのため、再度勉強をすることを決意し、共有しようと考え記事を作成させていただきました。
※私はエキスパートではないので、間違いがあるかもしれませんのでご了承ください。

# 2.UIDとは

UID（ユーザID）は、LinuxまたはUnixで作成されたユーザを一意に識別するための番号です。

ではなぜそのような仕組みが必要なのでしょうか？それについては、LinuxやUnixについての知識が必要ですので、次の章で詳しく説明させていただきます。

# 3.Linux、Unixについて

LinuxとUnixは、複数のユーザが同時に使用することを前提としたオペレーティングシステム（OS）です。これらのOSは、1つのシステムに同時に複数のユーザがログインして作業を並行して処理できるように設計されています。

この設計思想は、以下の理由に基づいています：

1.共有リソースの効率的な利用
2.セキュリティとアクセス制御
3.プロセスの並行実行

これらの設計思想を理解することで、UID（ユーザID）についての理解がさらに深まると考えております。

# 4.結論

設計思想からわかるように、UID（ユーザID）はユーザの識別と権限管理に欠かせないシステムです。したがって、Linux初めての方や実はあまり理解していない方でも、最初は大雑把に「識別」と「権限管理」の理解だけで十分だと思います。


# 5.ポイント（未経験または経験の浅い人向け）

1.「一意」という言葉は実際に曖昧なまま理解していて困ることがあるかもしれません。この用語を理解することはおすすめです。

2.「リソース」という言葉は経験が浅い時期には理解しにくいことがあります。私自身も、この単語が出てきたときにはなんとなく理解していた程度で、混乱したことがありました。リソースはきちんと理解することをお勧めします。

私の感想として、幅広い意味で使用される用語（例：「リソース」）がたくさん出てくると、混乱することがあります。そのため、事前に曖昧な単語は調べて理解しておくことは作業を円滑に進めるために事前に理解することをおすすめします！


# 6.参考文献

https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/system_administrators_guide/ch-managing_users_and_groups

https://www.coins.tsukuba.ac.jp/~yas/coins/syspro-2002/2002-06-17/index.html

https://xtech.nikkei.com/it/article/COLUMN/20080205/292920/
Railsで特定のカラムを途中から必須にするバリデーションの実装方法

## 事象

Railsアプリケーション開発において、特定のカラム（ここでは便宜上「属性X」と呼びます）が初めは任意入力だったものの、ビジネスルールの変更により必須入力とする必要が出てくる状況は珍しくありません。この記事では、そのような要件変更を効率的に実装する方法について説明します。

## 実装

新規レコードの作成時にのみ「属性X」の入力を必須とするバリデーションを追加します。これは、`on: :create` オプションを使用して、バリデーションを新規作成時に限定することで実現します。

```ruby:model.rb
class ExampleModel < ApplicationRecord
  validates :attribute_x, presence: true, on: :create
end
```

このコードにより、新規レコードの作成時にのみ「属性X」の入力が必須となります。既存のレコードに対する更新操作では、このバリデーションは適用されません。

## まとめ

この記事では、Railsで特定のカラムを途中から必須に変更する際のバリデーションの実装方法を紹介しました。この方法を用いることで、アプリケーションの要件変更に柔軟に対応し、データの整合性を保ちながら新しいビジネスルールを効率的に実装することができます。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray:
[Unity]HDRPで発光体を作る

# 概要
UnityのHDRPでEmissiveな発光体を作る方法の一例です。
# 本文
①HDRPのプロジェクトを作成します。
![スクリーンショット 2024-02-17 8.50.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/60931154-4c9f-ee62-d66e-a0301e6d5651.png)
②Projectウィンドウ内で右クリックしてShaderGraphを作成します。
![スクリーンショット 2024-02-17 085309.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/6d099655-e927-c85b-fbd0-22eaa8e9ad55.png)
③以下のように組み立ててください。Float型のEmissionとColor型のBaseColorをBlendノードで混ぜてBaseColorに繋いでいます。
![スクリーンショット 2024-02-17 091019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/b027a7af-6a2c-cb6e-32d0-b008f9d17883.png)
④発光体用のMaterialを作成してそのまま先ほど作成したShaderGraphを適用してください。EmissionとBaseColorを好みの設定にします。
![スクリーンショット 2024-02-17 091342.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/490f4062-4eac-6b9c-a3a1-069989248770.png)
⑤光らせたいオブジェクトにMaterialを適用させたら完成です！:bulb:
![スクリーンショット 2024-02-17 091644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/1d3715a4-7bdd-fdd8-c746-5f8f9ec0e681.png)
GitHub ActionsでPRマージ時にワークフローを起動させる方法

# はじめに
GitHub Actionsでワークフローを起動させる際、プルリクエストのマージに対応するイベントがなく、別の記述を追加する必要があるのでまとめます。

# コード

結論としては、ワークフローファイルの`on`と`jobs`がそれぞれ下記のような形になります。

```yaml
on: 
  pull_request:
    types: 
      - closed

jobs:
  if_merged:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
    - run: |
        echo The PR was merged
```

重要なのは以下の2つです。

マージされた時にワークフローをトリガーするための記述です。
```yaml
types: 
  - closed
```

`true`でジョブを実行、`false`でジョブをスキップします。
```yaml
if: github.event.pull_request.merged == true
```


# 参考情報

https://docs.github.com/ja/actions/using-workflows/events-that-trigger-workflows#running-your-pull_request-workflow-when-a-pull-request-merges
MiniAPI（十一）：ローカリゼーション

.NET開発体系では、ローカリゼーション（地域化）の実装には、主にリソースファイル（.resx）が使用されます。ASP.NET Coreでの多言語Cultureは、地域性を示すオブジェクトを指し、UICultureは、実行時にリソースマネージャが地域特有のリソースを検索するために使用する現在のユーザーインターフェースの地域性を示します。
ASP.NET Coreでの実装も、ローカリゼーションサービスを注入し、ミドルウェアを追加することで行われます。例えば以下のようになります：

```csharp
using Microsoft.Extensions.Localization;
var builder = WebApplication.CreateBuilder(args);
// ローカリゼーションミドルウェアの追加。Resources
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");

var app = builder.Build();

// ローカリゼーションリソースの適用
var supportedCultures = new[] { "zh-CN", "ja-JP", "en-US" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);
localizationOptions.ApplyCurrentCultureToResponseHeaders = true;
app.UseRequestLocalization(localizationOptions);

// サービスコンテナからStringLocalizerを取得して具体的なローカリゼーションデータを取得
app.MapGet("/demo", (IStringLocalizer<SharedResource> sharedLocalizer) => {
    return sharedLocalizer["ok"].Value;
});

app.Run();

// SharedResource型は実装不要
public class SharedResource
{
}
```

.resxファイルタイプ
![alt 画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRAlojKvgR3l5Hd63JHW74GIgsGbLibHLgcl34dcHE6Q4GGS18EkZwSYcT8yoO1npsictqhpa5jsqcrQ/640?wx_fmt=png)

.resx文書の可視化インターフェース
![alt 画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRAlojKvgR3l5Hd63JHW74GIrw5CM0xwicGoibKOMUsO9dFBvOHTXWdDdbCAtW5XsskHaApBYBKNEDEw/640?wx_fmt=png)

.resxファイルのXMLデータ。説明部分とデータ部分から成り立っています。

```xml
<?xml version="1.0" encoding="utf-8"?>
<root>
  <!--     Microsoft ResX Schema 
    Version 2.0
    The primary goals of this format is to allow a simple XML format     that is mostly human readable. The generation and parsing of the     various data types are done through the TypeConverter classes     associated with the data types.
    Example:
    ... ado.net/XML headers & schema ...
    <resheader name="resmimetype">text/microsoft-resx</resheader>
    <resheader name="version">2.0</resheader>
    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
    ...
    <data name="cancel" xml:space="preserve">
      <value>Cancel</value>
    </data>
    <data name="no" xml:space="preserve">
      <value>No</value>
    </data>
    <data name="ok" xml:space="preserve">
      <value>Yes</value>
    </data>
</root>
```

(Translated by GPT)

元のリンク：https://mp.weixin.qq.com/s?__biz=MzA3NDM1MzIyMQ==&mid=2247484892&idx=1&sn=fd4bc3a34364ebc98958d466406f104d&chksm=9f005af6a877d3e0c268ef046451c89c783a1edb485b1175f5e3a871aec388968af531e90227&token=877361727&lang=zh_CN#rd
【Golang】無名関数に名前を付けて関数内関数として使う

【Golang】無名関数に名前を付けて関数内関数として使う

# 概要
どうしても関数内で関数を定義したい場合のやつ

# モチベーション
関数は大きくても小さくても使いづらい（個人談）
関数内で少しまとめたい機能だけど外に括り出すほどではない、
けど関数内で何回か使う
そんな機能を関数内に関数として定義したかった
（所謂 module 内の function みたいなもの）

# 結論コード
``` main.go
package main

import (
	"os"
	"strconv"
)

func main() {

	parsi := func(cstrv string) int {
		i64v, _ := strconv.ParseInt(cstrv, 10, 32)
		return int(i64v)
	}

	cv1 := parsi(os.Args[1])
	cv2 := parsi(os.Args[2])

	println(cv1, "+", cv2, "=", calcAdd(cv1, cv2))
}

func calcAdd(inp1, inp2 int) int {
	return inp1 + inp2
}
```
Golang の strconv.ParseInt：string -> int64 変換は
２変数を返す関数でかつ 32 と言っているのに int64 で返ってくる

Golang は型にうるさいので、当然 int64, int は型エラーとなる
（つまり int64 では calcAdd 関数は使えない）

Golang は 初回のみ := 代入で宣言等をすっ飛ばして代入できるが、
2回目の代入では = を使う必要があり、コードの単純コピペができない
（つまり中間変数は1回目は := でいいが、2回目は = を用いる必要がある）

そんなこんなで string -> int64 と int へのキャストをまとめた parsi 関数を無名関数で定義し、名前を付けて以降使用している

# おまけ
Golang は関数を変数として扱うことができる（上記の通り）

```main2.go
package main

var (
	f_add = func(i1, i2 int) int {
		return i1 + i2
	}

	f_sub = func(i1, i2 int) int {
		return i1 - i2
	}
)

func main() {
	v1 := 26
	v2 := 16

	println(v1, "+", v2, "=", calc(v1, v2, f_add))
	println(v1, "-", v2, "=", calc(v1, v2, f_sub))
	println(v1, "x", v2, "=", calc(v1, v2, f_mul))
}

func f_mul(i1, i2 int) int {
	return i1 * i2
}

func calc(inp1, inp2 int, f func(int, int) int) int {
	return f(inp1, inp2)
}
```

つまりのところ、関数の引数に関数型の変数を突っ込むという考え方で高階関数として扱うことができる
正直某ラムダ式よりこっちの方がわかりやすいのでは・・・？

ただ、この場合の関数は無名関数でなくても良いよ
SharePoint Online にある Excel 内のテーブルデータを Graph API で取得してみた

SharePoint Online にある Excel 内のテーブルデータを取得したい場合、Power Automate や Logic Apps の Excel Connector はとても便利です。コネクターの中身は、推測にはなりますが、認証情報の保持と Microsoft Graph API の実行だと思っています。そこで、Azure CLI の REST 実行を使って、同じことができるか試してみました。

## 検証用の Excel 例

`table1` という名前のテーブルを用意しました。

![spo-excel-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/a7dad6ab-61ba-74f3-f7ea-7164d80287b6.png)


## 環境変数をセット

```bash:bash
# テナント名
tenant=mnrsdev

# テナント　ID
tenantid=00000000-0000-0000-0000-000000000000

# SharePoint Online のサイトパス
sposite=/sites/private

# Excel　のファイルパス
filepath=/General/test.xlsx
```

## テナントにログイン

```bash:bash
# テナント ID を指定してログイン
az login -t $tenantid
```

## SharePoint Online のサイト ID を取得

```bash:bash
siteid=$(az rest \
  --uri "https://graph.microsoft.com/v1.0/sites/${tenant}.sharepoint.com:${sposite}" \
  --query id \
  --output tsv)
```

## Excel のテーブルデータを取得

```bash:bash
az rest \
  --uri "https://graph.microsoft.com/v1.0/sites/${siteid}/drive/root:${filepath}:/workbook/tables/table1/range" \
  --query values

[
  [
    "name",
    "type"
  ],
  [
    "james",
    "a"
  ],
  [
    "naomi",
    "b"
  ]
]
```

## 参考

https://learn.microsoft.com/ja-jp/graph/api/table-range?view=graph-rest-1.0&tabs=http
流体工学で使用される主な無次元数

レイノルズ数＝慣性力/粘性力
フルード数=(慣性力/重力)^(1/2)
マッハ数=流れの速度/音速
ウェーバー数=慣性力/表面張力
オイラー数=圧力/慣性力
ストローハル数=(渦の発生周波数*長さ)/流れの速度
なぜファイルの末尾に改行を入れたほうが良いのか

## はじめに
ファイルの末尾には改行を入れたほうが良いのでしょうか。


「ファイル 末尾 改行 POSIX」等で調べると、規格の観点から改行を入れた方がいいという話が出てくるのですが、今回はgitの仕組みの観点からも改行を入れたほうが良いという話をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/7213e4c5-2390-bef2-fa08-32d5488dab69.png)


## GitHub上での末尾改行の警告

例えば末尾に改行のないこんなファイルが有るとし、commitしてGitHubにpushすると以下のような表示になります
```typescript
export function hello(name: string) {
  return `Hello, ${name}!`;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/64e2d7ff-736f-df0d-4893-4cab01c5c115.png)
```diff_typescript
+ export function hello(name: string) {
+   return `Hello, ${name}!`;
+ }⛔
```
最終行に警告マークが表示されていますね。
GitHubが何を意図してこの警告マークを付けているかは私からはわかりませんが、最初に上げたPOSIXとgitの2つの観点が有るのではないかと思ってます。

## 新たに関数を追加したときのdiffの表示に影響が発生する

ここに一つ関数を追加する必要性が出てきたので、以下のコードを追加したとします。

```typescript
export function goodbye(name: string) {
  return `Goodbye, ${name}!`;
}
```

するとgithub上ではこの様に表示されてしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/f256204c-95d8-9de4-97a2-4f370275e650.png)
```diff_typescript
  export function hello(name: string) {
    return `Hello, ${name}!`;
- }⛔
+ }
+  
+ export function goodbye(name: string) {
+   return `Goodbye, ${name}!`;
+ }
```

本来想定していたdiffは以下のように見えるはずなのに、なぜこの様になってしまうのでしょうか

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/9d1a2a79-11bd-b883-20ff-75870b2f7a4f.png)
```diff_typescript
  export function hello(name: string) {
    return `Hello, ${name}!`;
  }
+  
+ export function goodbye(name: string) {
+   return `Goodbye, ${name}!`;
+ }
```

## 何が起こったか


これはファイルの仕組み上発生する問題(?)で、噛み砕いて説明すると、
「行というのは文字＋改行までがセットになっている」ために発生します。

そのため、改行を見えるようにすると
```diff_typescript
  export function hello(name: string) {\n
    return `Hello, ${name}!`;\n
- }
+ }\n
+ \n
+ export function goodbye(name: string) {\n
+   return `Goodbye, ${name}!`;\n
+ }\n
```
この様な変更が起きたと解釈されてしまいます。

問題が起こったとどころだけピックアップすると以下のような感じですね
```diff_typescript
- }
+ }\n
```

別に困らないじゃんと言われればその通りなのですが、「本来変更をしていないはずの行がハイライトされる」というのはレビューする側にも認知負荷がかかるため、普段からこういうことを意識できる人とできない人では、地味な差がいつまでも埋まらないという現象は往々にして起こります **（主観）**

## どうすれば良いのか

とはいえ毎回確認するのは非常に面倒くさいですよね。
GitHubを見れば確認はできますが、
コミット！プッシュ！確認！間違えてた！コミット！プッシュ！確認！あ、こっちのファイルも間違えてた！コミット！確認！ヨシ！
というのは流石にやってられないです。

もしも普段VS Codeを使用しているのであれば、オプションから
[Files: Insert Final Newline] という項目のチェックを入れましょう。
これで何も気にする必要がなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/d1d20ea0-0ea3-9865-9247-479a3bf9d812.png)

それ以外のエディタを使っている方は各自で調べてみてください。
何らかの設定が有るはずです。
設定の出来ないエディタは捨てましょう（過激派）
参考: https://qiita.com/kyo_nanba/items/d384b2a46170bf8764dd

## まとめ

// TODO: この記事のまとめをいつか書く

## 蛇足

ちなみにこの記事は javascript におけるカンマ `,` に関しても同じことが言えて、個人的にはそっちのほうが優先度高く伝えたいと思ってたり思っていなかったり

```diff_typescript
  const obj = {
-   foo: "foo"
+   foo: "foo",
+   bar: "bar",
  };
```
効率的な画像生成AI StableCascade

# 効率的とは

```
Devices that everyone in the future will have
未来のみんながつけているデバイス
```

![1ab5e77f-be5a-4d0d-9639-ecfe9225450d.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/4621d319-b4e8-bda6-9d5b-0c245a62eaa8.jpeg)


https://github.com/Stability-AI/StableCascade?tab=readme-ov-file

StableDiffusionより、トレーニング時間も推論時間も短くて済むらしい。
[効率的なアーキテクチャを使っているらしい。](https://openreview.net/forum?id=gU58d5QeGv)

>コンパクトな潜在表現により、最終的なパフォーマンスを損なうことなく、2 倍以上の速度で推論を実行できるようになり、最先端 (SOTA) 拡散モデルの通常のコストと二酸化炭素排出量を大幅に削減できます。

【二酸化炭素排出量を大幅に削減できます。】というのが2024年っぽい。
ちなみにA100GPUで11秒かかった。速いのかはちょっとわからない。

# 使用方法

### インストール

GitHubリポジトリでもサンプルノートブックがアップされているが、うまくいかなかったのでdiffuserからインストールする。

https://huggingface.co/stabilityai/stable-cascade

```shell
pip install git+https://github.com/kashif/diffusers.git@a3dc21385b7386beb3dab3a9845962ede6765887
```

HuggingFaceには
pip install git+https://github.com/kashif/diffusers.git@wuerstchen-v3
とあったけど、壊れていたので過去のコミットを参照した。

### 実行

```python
import torch
from diffusers import StableCascadeDecoderPipeline, StableCascadePriorPipeline

device = "cuda"
num_images_per_prompt = 2

prior = StableCascadePriorPipeline.from_pretrained("stabilityai/stable-cascade-prior", torch_dtype=torch.bfloat16).to(device)
decoder = StableCascadeDecoderPipeline.from_pretrained("stabilityai/stable-cascade",  torch_dtype=torch.float16).to(device)

prompt = "Clothes that make you popular"
negative_prompt = "illustration"

prior_output = prior(
    prompt=prompt,
    height=1024,
    width=1024,
    negative_prompt=negative_prompt,
    guidance_scale=4.0,
    num_images_per_prompt=num_images_per_prompt,
    num_inference_steps=20
)
decoder_output = decoder(
    image_embeddings=prior_output.image_embeddings.half(),
    prompt=prompt,
    negative_prompt=negative_prompt,
    guidance_scale=0.0,
    output_type="pil",
    num_inference_steps=10
).images

#Now decoder_output is a list with your PIL images
for i,image in enumerate(decoder_output):
  image.save(f"{i}.jpg")
```

```
Clothes that make you popular
モテモテになる服
```

![b87983f9-dd43-436d-a42b-6fa511d2cf90.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/f1ee7288-fdcb-a32d-ee20-765ebb1eb900.jpeg)

🐣
****
フリーランスエンジニアです。
AIについて色々記事を書いていますのでよかったらプロフィールを見てみてください。

もし以下のようなご要望をお持ちでしたらお気軽にご相談ください。
AIサービスを開発したい、ビジネスにAIを組み込んで効率化したい、AIを使ったスマホアプリを開発したい、
ARを使ったアプリケーションを作りたい、スマホアプリを作りたいけどどこに相談したらいいかわからない…

いずれも中間コストを省いたリーズナブルな価格でお請けできます。

お仕事のご相談はこちらまで
rockyshikoku@gmail.com

機械学習やAR技術を使ったアプリケーションを作っています。
機械学習／AR関連の情報を発信しています。

[X](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)

[相棒](https://twitter.com/oka_yuuji)

[note](https://note.com/oka_yuuji)
ポーカーの役ができる確率を計算してみた（ジョーカー１枚） (2)

[前回](https://qiita.com/anonymously115/items/ee8f36c9c7ac77575bfa)、各役の判定条件を関数にして役の判定をしていましたが、
「フラッシュ」「ストレート」と名の付く役を先に判定して、それ以外は数字毎の枚数で判定することにします。
- ###### 変更部分
```py
def deal(hand, k):
    global nPatterns
    global cntFiveOfAKind
    global cntRoyalStraightFlush
    global cntStraightFlush
    global cntFourOfAKind
    global cntFullHouse
    global cntFlush
    global cntStraight
    global cntThreeOfAKind
    global cntTwoPair
    global cntOnePair
    global cntNoPair

    if len(hand)<5:
        for i in range(k,len(CARDS)):
            hand.append(CARDS[i])
            deal(hand,i+1)
            hand.pop()
    else:
        for i in range(1,len(hand)):
            assert(hand[i-1][1]<=hand[i][1])
        
        nPatterns+=1
```
ここまでは前回と同じです。
この後の判定条件で、「フラッシュ」「ストレート」と名の付く役から判定します。
```py
        if isRoyalStraightFlush(hand):
            cntRoyalStraightFlush+=1
        elif isStraightFlush(hand):
            cntStraightFlush+=1
        elif isFlush(hand):
            cntFlush+=1
        elif isStraight(hand):
            cntStraight+=1
```
この後、数字毎に枚数を集約して判定します。
```p
        else:
            #数字毎の枚数を管理
            numnum=[0]*14
            for h in hand:
                numnum[h[1]]+=1

            #枚数の降順にソート
            #numnum[0]はジョーカーの有無（ジョーカーの枚数）が
            #格納されているので、numnum[1]以降をソート
            numnum_sorted=sorted(numnum[1:],reverse=True)
            
            #ジョーカーがあれば一番多い枚数の数字として扱う
            numnum_sorted[0]+=numnum[0]
            
            #0枚の部分を捨てる（1枚以下の部分を捨ててもよい）
            del numnum_sorted[numnum_sorted.index(0):]

            #役の判定
            if numnum_sorted==[5]:
                cntFiveOfAKind+=1
            elif numnum_sorted==[4,1]:
                cntFourOfAKind+=1
            elif numnum_sorted==[3,2]:
                cntFullHouse+=1
            elif numnum_sorted==[3,1,1]:
                cntThreeOfAKind+=1
            elif numnum_sorted==[2,2,1]:
                cntTwoPair+=1
            elif numnum_sorted==[2,1,1,1]:
                cntOnePair+=1
            else:
                cntNoPair+=1 
```
- ###### 実行結果
```
Five of a Kind       :      13(  0.000453%)
Royal Straight Flush :      24(  0.000836%)
Straight Flush       :     180(  0.006272%)
Four of a Kind       :    3120(  0.108723%)
Full House           :    6552(  0.228318%)
Flush                :    7804(  0.271946%)
Straight             :   20532(  0.715479%)
Three of a Kind      :  137280(  4.783800%)
Two Pair             :  123552(  4.305420%)
One Pair             : 1268088( 44.189101%)
No Pair              : 1302540( 45.389651%)
-------------------------------------------
Total                : 2869685(100.000000%)
```
[前回](https://qiita.com/anonymously115/items/ee8f36c9c7ac77575bfa)の結果と一致いたしました。
if (isHoge == false) 脳に優しい説


## 前提

isHogeはtrueかfalseのどちらかの値しか入っていないものとする。

## 主張

```js
if (isHoge == false) something();
```
は
```js
if (!isHoge) something();
```
よりも脳に優しいかもしれない。

## 何故か

### if (isHoge == false)を見たとき

**脳内イメージ**

「isHogeがfalseのとき」ね。はいはい。

### if (!isHoge)を見たとき

**脳内イメージ**

「!isHoge」？
「!isHogeがtrueのとき」だから
「isHogeがfalseのとき」か。はいはい。

### つまり

if (!isHoge)は脳内で一回反転して考える必要があるが、
if (isHoge == false)はそのままとらえられる。

直感的に理解できるif (isHoge == false)は脳に優しいだろう。

## 別の解釈：日本語にしてみる

```
if (isHoge は false と一致する) なんかの処理();
```

```
if (isHogeを反転させる) なんかの処理();
```

どちらが分かりやすいだろうか？

## 予防線

普段はif (!isHoge)を使いますよ。そりゃ。
冗長なの嫌だし。
Rubyプロジェクトでの主要ライブラリの活用

Rubyは、その表現力豊かな文法と豊富なライブラリ（gem）により、Web開発者の間で高く評価されています。Rubyプロジェクトにおける効率的な開発には、これらのライブラリを理解し、適切に活用することが不可欠です。この記事では、Rubyプロジェクトで頻繁に使用される主要ライブラリとその用途についてまとめてみました。

### 基本的なライブラリ
## WEBrick
用途: フロントエンドとバックエンド間のデータ移送。
WEBrickはRuby標準の簡易HTTPサーバーライブラリで、小規模なWebアプリケーションや開発時のテスト用サーバーとして利用されます。フロントエンドとバックエンド間のデータ移送を手軽に行えるため、開発プロセスをスムーズにします。

## CSV
用途: データの保存と読み込み。
データの保存や読み込みにはCSVライブラリが便利です。CSV（Comma-Separated Values）形式のファイル操作を簡単に行うことができ、データのインポートやエクスポートが必要なアプリケーション開発に欠かせません。

## JSON
用途: JavaScriptの変数で受け取るためのデータ交換。
JSONライブラリは、Webアプリケーションにおけるデータ交換フォーマットとして広く使用されます。RubyプログラムでJSON形式のデータを簡単に扱えるようになるため、APIの開発やフロントエンドとのデータ通信に役立ちます。

## Kramdown
用途: MarkdownをHTMLに変換。
Markdown形式のテキストをHTMLに変換するKramdownライブラリは、コンテンツ管理システムやブログの開発に適しています。ユーザーがMarkdownで記事を書き、それをWebページに表示する際に便利です。

## FileUtils
用途: ファイルやディレクトリの操作。
ファイルやディレクトリの操作にはFileUtilsライブラリが有効です。ファイルのコピー、移動、削除などの操作をプログラム内で行うことが可能になり、ファイルシステムの管理を柔軟に行えます。

### 高度な開発ライブラリ
## Rails
用途: Webアプリケーションフレームワーク。
Ruby on Rails（通称Rails）は、高速なWebアプリケーション開発を実現するフルスタックフレームワークです。MVCアーキテクチャを採用し、データベース操作、ビジネスロジック、UI作成を一貫して行うことができます。

## Sinatra
用途: 軽量Webアプリケーションフレームワーク。
Sinatraは軽量で柔軟性の高いWebアプリケーションフレームワークです。小規模なWebアプリケーションやサービスのプロトタイピングに適しており、Railsよりもシンプルなアプリケーションを素早く開発したい場合に役立ちます。

## RSpec
用途: テストフレームワーク。
RSpecは、Rubyでの開発において最も人気のあるテストフレームワークの一つです。振る舞い駆動開発（BDD）をサポートし、可読性の高いテストコードを書くことができます。

## Nokogiri
用途: HTML、XMLの解析と操作。
Nokogiriは、HTMLやXMLドキュメントを簡単に解析し、検索や変更を行うことができるパワフルなライブラリです。Webスクレイピングやドキュメントの解析に広く使用されます。

## Devise
用途: 認証ソリューション。
Deviseは、Railsアプリケーション用の包括的な認証ソリューションを提供するライブラリです。ユーザー登録、セッション管理、パスワードのリセットなど、認証に関する一般的な機能を簡単に実装できます。

## Puma
用途: HTTPサーバー。
Pumaは、高速で並行処理に優れたHTTP 1.1サーバーで、Ruby/Railsアプリケーションのデプロイメントに適しています。WEBrickの代わりに使用されることが多く、本番環境での利用に推奨されます。

## Active Record
用途: ORM（Object-Relational Mapping）。
Active Recordは、RailsのデフォルトのORMで、データベースのテーブルとRubyオブジェクト間のマッピングを容易にします。データベース操作を抽象化し、SQLの直接的な記述を避けることができます。


## まとめ
Rubyプロジェクトの開発において、これらのライブラリを適切に活用することで、開発の効率性、保守性、拡張性を大幅に向上させることができます。プロジェクトの要件に応じて最適なライブラリを選択し、Rubyの豊富なエコシステムを最大限に活用しましょう。
GWT　最初の画面は何か？

# GWTの最初の画面はEntryPoint　インターフェースを継承したクラス
通常、サンプルの画面から改造していけば、できます。

図は新規プロジェクトから、ローカルで立上げまで再現しています。



![GIF 2024-02-17 5-11-18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132663/e55f2b55-0600-0785-52ae-0e43f6d113b8.gif)
SPA（Single Page Application）の基本と簡単な例

### はじめに
ウェブ開発の世界では、SPA（Single Page Application）が注目を集めています。この記事では、SPAの概念を初心者にも分かりやすく説明し、簡単なコード例を通じてその動作を理解します。

### SPAとは？
SPAとは、「Single Page Application」の略で、一つのウェブページで完結するアプリケーションのことを指します。SPAは、文字通り「一枚のウェブページ」で動くアプリケーションです。従来のウェブサイトのように、リンクをクリックするたびに新しいページに移動してロードするのではなく、SPAでは最初にページ全体を読み込んだ後、ユーザーが何か操作をするたびに必要なデータだけを更新して、ページの一部分だけを動的に変えていきます。

### SPAの利点
高速なページ遷移：全ページリロードの必要がないため、ユーザー体験が向上します。
良好なユーザー体験：動的なコンテンツ更新により、アプリケーションがよりインタラクティブになります。
サーバー負荷の軽減：初期ロード後は、必要なデータのみをサーバーから取得します。

### SPAのコード例
簡単なSPAを作成するために、HTML、CSS、およびJavaScript（特にVue.jsを使用）を用います。Vue.jsは初心者にも扱いやすく、SPAの概念を理解するのに適したフレームワークです。

HTML
HTML部分は、アプリケーションの構造を定義します。下記の例では、div id="app" がSPAのルートコンテナとして機能します。ナビゲーションメニューと、動的に切り替わるコンテンツエリア（Home PageとAbout Page）が含まれています。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple SPA Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <nav>
            <ul>
                <li><a href="#" v-on:click="view = 'home'">Home</a></li>
                <li><a href="#" v-on:click="view = 'about'">About</a></li>
            </ul>
        </nav>
        <div v-if="view === 'home'">
            <h1>Home Page</h1>
            <p>Welcome to the Home Page.</p>
        </div>
        <div v-if="view === 'about'">
            <h1>About Page</h1>
            <p>This is a simple SPA example using Vue.js.</p>
        </div>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
</body>
</html>
```
CSS (style.css)
```
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

a {
    text-decoration: none;
    color: blue;
}

a:hover {
    text-decoration: underline;
}
```
JavaScript (app.js)
JavaScript部分は、SPAの動的な挙動を管理します。この例ではVue.jsを使用しています。
```
const { createApp } = Vue;

createApp({
    data() {
        return {
            view: 'home' // 初期ビューを設定
        };
    }
}).mount('#app');
```
この例では、Vue.jsを使用して、ユーザーが「Home」と「About」の間でナビゲーションするときにページ全体をリロードせずにコンテンツを切り替えることができます。JavaScriptの力で、ページ内の特定の部分だけを動的に更新しています。

まとめ
SPAは、現代のウェブ開発において重要な概念です。この記事がSPAの基本とその構成要素を理解する一助となり、さらに深く学ぶきっかけになれば幸いです。
Pythonを使って楽天ディレクトリIDを抽出する

## 楽天のディレクトリIDを抽出する
楽天のディレクトリIDを抽出してコンソールに表示させるコード

※楽天ではカテゴリをディレクトリと呼んでいる
### 第一階層のディレクトリIDだけ抽出
```Python
#楽天ジャンルIDを第一階層を取得して表示する

import requests

RAKUTEN_GENRE_API_URL = 'https://app.rakuten.co.jp/services/api/IchibaGenre/Search/20140222'

def get_genre(genre_id=0, format_version=2, app_id='YOUR_APP_ID'):
    params = {
        'applicationId': app_id,
        'formatVersion': format_version,
        'genreId': genre_id,
    }
    r = requests.get(RAKUTEN_GENRE_API_URL, params=params)
    item_data = r.json()
    return item_data

def print_genres(genres, indent=0):
    for genre in genres:
        print('  ' * indent + f"{genre['genreId']}: {genre['genreName']}")
        if 'children' in genre:
            print_genres(genre['children'], indent + 1)

if __name__ == "__main__":
    app_id = 'YOUR_APP_ID'
    top_level_genres = get_genre(app_id=app_id)['children']
    print_genres(top_level_genres)
```
### 第2階層まで抽出する
```Python
#楽天ジャンルIDを第二階層まで取得して表示する

import requests

RAKUTEN_GENRE_API_URL = 'https://app.rakuten.co.jp/services/api/IchibaGenre/Search/20140222'

def get_genre(genre_id=0, format_version=2, app_id='YOUR_APP_ID'):
    params = {
        'applicationId': app_id,
        'formatVersion': format_version,
        'genreId': genre_id,
    }
    r = requests.get(RAKUTEN_GENRE_API_URL, params=params)
    item_data = r.json()
    return item_data

def print_genres(genres, indent=0):
    for genre in genres:
        print('  ' * indent + f"{genre['genreId']}: {genre['genreName']}")
        if 'children' in genre:
            child_genres = get_genre(genre['genreId'])['children']
            print_genres(child_genres, indent + 1)

if __name__ == "__main__":
    app_id = 'YOUR_APP_ID'
    top_level_genres = get_genre(app_id=app_id)['children']
    for genre in top_level_genres:
        print(f"{genre['genreId']}: {genre['genreName']}")
        child_genres = get_genre(genre['genreId'])['children']
        print_genres(child_genres, 1)
```

## YOUR_APP_IDには自身のアプリIDを使用する
- 確認は以下のURL
- アプリID発行方法は省略

Rakuten Developers（アプリ情報確認ページ）
https://webservice.rakuten.co.jp/app/list

以上
DASH de ダッシュボード【2．レイアウト編_その１】

# 概要
DASHはPythonで書かれたウェブアプリケーションフレームワークで、データ分析等にも使われています。グラフやデザインはPlotlyやDash Bootstrap Componentsなどライブラリも使用できるため柔軟にカスタマイズも可能です。順次コードを紹介していくつもりです。今回はアプリについての説明になります。

# アプリの紹介
### 紹介ページ Python DASHでリアルタイム通信分析
https://note.com/daisuke892/n/naea8b2431860

とりあえずコードの内容は少しづつQiitaがマークダウン形式で書けるので
こちらで紹介していきたいと思います。

DASHの基本的な構文は他のサイトで紹介されているのでここでは割愛します。
今回は全体のレイアウトの説明になります

# 画面レイアウト
BootstrapのGRIDレイアウトで以下の様に画面を分割しています。

![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3693763/94179748-36d7-c3bb-4459-e4707876a8ed.png)

# コード
以下レイアウトのコードです。

```python
app.layout = dbc.Container(
    [
        dbc.Row(topbar,className='bg-dark text-white',style={"height": "3vh"}),
        dbc.Row(
            [dbc.Col(content1, width=2, className="bg-secondary"), 
             dbc.Col(content2, width=5, className="FLATLY"),
             dbc.Col(content3, width=5, className="FLATLY"),
            ],
            style={"height": "47vh"}
        ),
        dbc.Row(
            [dbc.Col(content4, width=2, className="bg-secondary"), 
             dbc.Col(content5, width=5, className="FLATLY"),
             dbc.Col(content6, width=5, className="FLATLY"),
            ],
            style={"height": "47vh"}
        ),
        dbc.Row(bottombar,className='bg-dark text-white',style={"height": "3vh"}),
        dcc.Interval(id='interval-component', interval=5*1000, n_intervals=0),
    ],
    fluid=True,
)
```

縦に４分割（topbar,content1～3,content4～6,bottombar）
さらに中央部分だけ横に３分割（content1～3とcontent4～6）
に分割してレイアウトしています。

さらに画面の比率をwidthで指定しています。
GRIDレイアウトでは横は最大で全12分割なので横幅の合計が12になるよう指定します。
縦は"height":"47vh"(=47%の意味)みたいな感じで全100％にします。
さらにfluid=Trueを使用することで、画面幅に合わせて自動的に調整されるようになります。便利ですね。

----

他の記事も挟みながら、少しづつ時間があるとき紹介していきたいと思います。
あとサイト分けると管理もあるのでどうするか迷いますね。
引き続きよろしくお願いいたします。

---
【続き】

https://qiita.com/cloudwork0110/items/3630ff4d7a84c41526b3