OmniAICreator/Qiita-1.07M huggingface dataset:
システムモデリングを勉強してみて

# はじめに
本投稿は[金沢工業大学　AdventCalender](https://qiita.com/advent-calendar/2023/kit-calendar)の6日目の記事になります。
また、投稿者は今回が初めての投稿になりますので、暖かい目で記事を読んでいただけると、ありがたいです。

# この記事について
今回のこの記事は、「システムモデリング」を投稿者が学んでみての感想などについて書いていこうと思います。「システムモデリング」はかなり概念的な話が多いため、魔翻訳(理解しきれてないだけ)して、説明等を行なおうと考えているので、面白半分くらいの感じでお読みください。

# システムモデリングについて
まず、**モデリング**とは、どのような定義がされているのかについて見ていくと、児玉公信氏による『[UMLモデリング入門](https://www.amazon.co.jp/UML%E3%83%A2%E3%83%87%E3%83%AA%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-%E5%85%90%E7%8E%89-%E5%85%AC%E4%BF%A1/dp/4822283585)』（日経BP社、2008）では
> モデリングとは、「対象を深く知るために、その振る舞いを観察し、それを論理的に記述し、関係者と共有する活動」である。

と、定義されています。
ここからも分かるように、モデリングとは物事を深く考えるためのものです。そして、深く考えた結果をステークホルダーと共有し、話し合うためのものになります。いわゆる、**上流工程**って感じですかね。

# モデリングの種類
ここまで、ざっくりとモデリングと呼んでいましたが、実はモデリングには種類があり、
- 静的側面：ある時点でのモデルの概念同士の関わり方を表す
- 機能側面：システムの外部と受け答えの仕方を表す
- 動的側面：概念が時間経過に沿って、どのような振る舞い（変化）をするのかを表す

の3つの側面で大別されています。

~~私の勉強が追い付いていないのもあるので、~~
次節からは、モデリングの静的側面（以下、静的モデリング）について、実例を挙げながら見ていきましょう。

# 実例
前節でも記載しましたが、静的モデリングでは**ある時点でのシステム間の関連**を示します。
例えば、学食のある時点での関連を**クラス図**というもので表すと以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622811/95092459-773e-81e3-86cb-715490a0bbe7.png)

箱が3つ描かれ、線で結ばれていますね。

箱ひとつひとつについて注目してみると3段構成になっており、一番左の箱についてさらに注目すると
- 1段目：顧客
- 2段目：名称、所属、性別
- 3段目：支払う

といった構成になっています。

まず、この箱には名前がついており、**クラス図**と呼びます。
次に、1段目の「顧客」というのは実体についての名称で**型名**と呼びます。2段目・3段目に関してはそれぞれ**属性**・**操作**という名称がありますが、今回は扱いません。
（2・3段目について気になったり、この記事でシステムモデリングについて興味を持ったりした方はぜひ私と一緒にシステムモデリングを勉強しましょう！！！）

ここまでの説明をまとめて、先ほどの画像を見ると、なんとなく意味が分かってきた方もいると思います。

そうです。この図は、「顧客が商品を注文する」という関わりと「店員さんが商品を調理する」という関わりについて、記述しているものになります。

このように、学食のシステムについて考えてみると、顧客・商品・店員の3つがあれば最低限の学食のシステムになります。

そして、ここから「システムの効率化」をしたいのであれば**注文する**という関連自体をさらに詳しく見ていくなど、要望に応じてシステムの粒度を変える必要が出てきます。先ほどでは、3つのものの関連でクラス図を描きましたが、学食で言えば「食券を買う」ことをクラス図に追加してもよさそうです。

このように、システムモデリングの面白いところは「対象をいかに観察して、どう見える化をするか」というところであると私は考えています。

# 勉強してみて
最後にシステムモデリングを勉強してみて、思ったことを少しだけ書こうと思います。

その前に突然の話にはなってしまいますが、二郎系ラーメンで「ロッドを乱すな」と言われていることをご存知でしょうか？

~~正直に言うと、私はシステムモデリングを勉強するまでは、「『ロッドを乱す』ってなんだよ。」と思っていました。~~

一応、ここで、ご存じない方のために、「ロッド」を説明しておくと、ロッドとは「麺をゆでるときに1回でゆでられる量（玉数）」を表す言葉です。

さて、本題に戻りますが、システムモデリングを勉強していくと、業務の改善を実際に考えてみたくなります。そこで、ラーメン屋さんで改善案を考えると、「1回でゆでられる限界量ずつ麺をゆでられれば、効率的にお客さんをさばくことが出来て、お店側はハッピーである」という1つの結論が出ます（他にも改善案はきっとあるけれども）。

つまり、「ロッドを乱すな」は意味・意義のあることで、お店側からは守ってもらいたいことなのです。

~~今回はコールのシステムについては言及はしません!!!!~~

# さいごに
今回は、システムモデリングについての定義や、システムモデリングを勉強してみて感じたことに関して書きました。

また、本記事では**クラス図**というものを紹介しましたが、UML2.0（統一モデリング言語（モデリングするための記述方法））では13種の図が規定されており、今回の記事では、UMLの少ししか話していません。

今回の記事でシステムモデリングに興味が出た人は、ぜひ私と勉強しましょう！！！

それでは、ここまで見てくださり、ありがとうございました！！
また、どこかで！
ガチのクソアプリつくってみた

## 概要
いい感じのクソアプリを作ろうとしたけど思いつかなさすぎたから、ガチのクソアプリを作ることにした。

作ったもののリンク
https://gachi-unko.vercel.app/

## 使用技術
- Next.js 14
- Vercel

## 主要機能
タップすると、画面に茶色いものが出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66158/7bb4da9a-e6a7-e9a1-9666-8029bff9d74e.png)


## 実装のポイント
### キャラクター選択画面
無駄にキャラクター選択が可能です☆
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66158/96687d40-0e14-ff3c-0615-58327a61d030.png)


### 音声認識機能
SpeechRecognition APIを使用して、音声認識機能を実装しました。これにより、ユーザーは「うんち！」と発声することで、キャラクターに排泄アクションを取らせることができます💩


## 反省点・学んだこと
今回使った技術はいずれもやったことないものを使った。
意外と時間がかかって足りなかったのでかなり雑になってしまったので次はもうちょっと頑張りたい…

まだまだ本気になりきれてなかった。今度はマジのクソを生み出したい。

（当初はUnityでリアルクソを生み出そうとしたがこれもほとんどやったことがなかったのとリアルクソを作るとなると3DCGから作らないといけなかったりで流石に時間がなさすぎて断念した。。。ぴえん🥹）

## 今後の展望
次は、もっとガチのクソアプリを作ります！
リアルなクソを作るか、クソを作り出すまでのストーリーに生々しさを出すか…
乞うご期待！（来年の私がんば！）

## まとめ
ガチのクソアプリ作るの意外と大変やったわ。。。

## リポジトリ
https://github.com/oh-yeah-sea-kit2/gachiUnko
VSCodeの選択範囲がおかしくなってしまった。矩形選択と言います。

## はじめに

「VSCodeの選択範囲がおかしくなってしまった...」と相談を受けて見てみたら、あぁなるほど。
物は理解できて説明はできたのですが、正式名称とか設定方法を忘れていたので備忘録。

### 通常の選択
基本的に、マウス操作による選択範囲はカーソルでなぞったエリアが選択されると思います。

![スクリーンショット 2023-12-06 6.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/f1ec59c3-21df-9751-7c1b-c5d6fdbb4fe0.png)


### 今回の事象

先に正解を言うと、タイトル通り矩形（くけい）選択と言うモードになっていました。
VSCodeだと、⌥ + F（WindowsはAlt + Fだと思います）を押すと行の選択モードを切り替えることができます。

![スクリーンショット 2023-12-06 6.08.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/a3e30ead-5ce4-058f-1113-c22918a3bbf9.png)


何か事務的な作業とかするときに一気に選択できて便利ですよね。
すごい小ネタですが以上です。
数理物理班紹介

## 挨拶
こんにちは、Physics Lab. 2024数理物理班班長です。この記事では数理物理班の紹介をします。

## 物理学と数学の関係
物理学と数学は相互作用しながら発展してきました。高校で習う微分積分学は、ニュートンによって初め幾何学的に定式化された力学[^1]がライプニッツやオイラーらによって微分方程式を基礎とする現代の形に書き直される過程で生まれました。18世紀まで微分と積分の数学的な基礎は曖昧でしたが、フーリエが熱伝導の研究を通してフーリエ級数の理論を構築したことをきっかけに、19世紀に級数の収束や極限の概念の厳密な定式化が行われました。このように、関数の微分積分や極限などを扱う数学の分野である解析学は、物理学と共に発展したということができます。

20世紀に入ると物理学と数学の関係はさらに緊密になりました。1850年代にリーマンは曲がった空間の幾何学を考え、微分幾何学の基礎を確立しました。そして1916年にアインシュタインは重力の理論である一般相対性理論をリーマン幾何学によって記述しました。おそらくリーマン自身は「曲がった空間」が現実に存在するものだとは考えていなかったと思いますが、驚くべきことに宇宙の形はリーマン幾何学によって記述できるのです[^2]。

また一般相対性理論と並ぶ20世紀前半の物理学の重要な成果である量子力学をフォン・ノイマンが定式化する過程において、抽象的なヒルベルト空間の定義が初めて与えられ、関数解析学と呼ばれる数学の分野の発展に大きな影響を与えました。量子力学における対称性の記述にはリー群のユニタリ表現が用いられ、特殊相対性理論の対称性を記述するために非コンパクトリー群のユニタリ表現論と呼ばれる分野が研究されました。

現代ではトポロジーを始めとする幾何学的な抽象概念が物理の諸分野に応用され、飛躍的な発展を遂げています。また逆に物理の研究による数学の進展も著しくなっています。中でも「場の量子論」と呼ばれる分野は非常に多くの数学的なアイデアの源となるとともに、高度な数学を応用する場となっています。

## 場の量子論
場の量子論は、時空の各点に存在する「場」を基本変数とした量子論です。初期の場の量子論は、1927年にディラックが電磁場を量子化し、1930年代に入ってハイゼンベルクとパウリが量子電磁力学を構築したことによって始まりました[^3]。量子電磁力学は物理量を計算すると発散するという困難を抱えていましたが、1950年代に朝永、シュウィンガー、ファインマンはくりこみを用いて発散を回避し、量子電磁力学を完成させました。

量子電磁力学には、局所$U(1)$対称性と呼ばれる対称性があります。これは電荷を持つ物質場の位相を時空点ごとに変えても、電磁場をそれに応じて変えることで理論が変わらないようにできるというものです。強い相互作用を記述する量子色力学という場の量子論は、局所$SU(3)$対称性という3種類の物質場を混ぜる変換についての対称性があります。このような場の内部的な自由度を変える変換に対する対称性をゲージ対称性と呼び、ゲージ対称性を持つ場の量子論をゲージ理論と呼びます。また、量子電磁力学における電磁場のようなゲージ対称性と密接に関係する場をゲージ場と呼ばれます。実は逆に、ゲージ対称性を持つことを要求することで、その理論がどのようなものかを決めることができ、「**ゲージ原理**」と呼ばれています。現在の素粒子物理学において実験的に検証され、現実を最も良く記述すると考えられている標準模型は$SU(3)\times SU(2)\times U(1)$ゲージ理論です。

数学的には、ゲージ理論は時空の各点に$U(1)$や$SU(3)$といったリー群があり、全体として束になっているようなものである主束と、その上の接続と呼ばれるものによって記述されます。ゲージ対称性は主束における座標変換に関する対称性とみなすことができ、ゲージ場は接続であり、物質場は主束の同伴ベクトル束の切断というものとして定式化されます。名前が紛らわしいですが数学における主束とその上の接続の理論もゲージ理論と呼ばれ、ドナルドソンやウィッテンによる新しい幾何学的な不変量の発見などといった重要な数学的成果が生まれています。

その他にも、場の量子論においてはインスタントン、スキルミオン、モノポールといったトポロジー的に自明でない場が現れることがあり、トポロジーを考えることが非常に有用となっています。このように、場の量子論の周りには豊富な数学的概念があり、場の量子論は物理と数学の架け橋となっています。

また、場の量子論の定式化は未だ数学的には満足の行くものではないことから、現在でも場の量子論を数学的に厳密に定式化しようとする多くの試みが行われています。場の量子論の数学的定式化については[立川先生の記事](https://member.ipmu.jp/yuji.tachikawa/transp/37J_Feature.pdf)が非常に分かりやすいです。

## 数理物理班でやっていること
数理物理班では物理では場の量子論、特に共形場理論と呼ばれるタイプの場の量子論について、数学では多様体などの幾何学について輪読を行っています。これらの内容を基にして、2024年の五月祭ではポスター発表および記事の公開を行います。お楽しみに！

[^1]: ニュートンの『プリンキピア』の議論は主にユークリッド幾何学で行われており、微分積分はほとんど使われていません。
[^2]: ウィグナーは「自然科学における数学の不合理なまでの有効性」という論説を残しましたが、リーマン幾何学と一般相対性理論の関係はまさにこれを体現していると思います。
[^3]: シュレーディンガーらによって量子力学が完成されたのが1926年であることを踏まえると、場の量子論の誕生は驚くほど速いと思います。すごいですね。
IT エンジニア、自己紹介の練習は常にやっておいて損はないと思う

https://qiita.com/e99h2121/items/f417a80983786d9a9869

上は以前に書いた記事である。一方で LT、登壇、ちょっとした成果発表の機会は数えるほどであるにしても、ちょっとした自己紹介をする機会はふいに、突然に訪れるものじゃないでしょうか。自己紹介の練習って、意外とコスパ良く有用だから、常にやっておいて損はないかもねと思うという話です。


## 自分の場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/7c682c72-9337-f607-81c1-d86b5fbaf283.png)

どこを強調したいかによって変えています。

- 母業
- 海外赴任でブリッジ エンジニア業
- 保守開発業
- ERP 開発業
- サポート エンジニア業
    - etc…


## 経歴

そうでなくともこういうところとか:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/0e54bef6-7555-5e63-f9c9-664eb91f9f4f.png)
こういうところとか:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/c44c18ef-c687-7163-2ded-0e88b36fc021.png)


テクニックの話ばかりしていると情報宣材屋さんになってしまうわけですが、それでも最低限チームで働くとか会社で働く人間には自己紹介の機会くらいあるわけで、いざというとき困らないためには「(所属) の ＊＊＊ です～」にプラスアルファしてなにがしかそれなりにたまには自分を客観的にサマリしておけるくらいの社会性が欲しいと自分では思っています。


## 自己紹介のために自分を客観視する材料

とはいえ自己紹介難しいですよね。

こんなものがあります:

https://www.16personalities.com/ja

https://wevox.io/valuescard

あるいは最近流行っていることを語ってみるとか:

https://qiita.com/e99h2121/items/a279f8fb1fbe722aa31f

あるいはキャリア:

https://qiita.com/e99h2121/items/50d51b05f110425115a5

あるいは最近読んだ本:

https://qiita.com/e99h2121/items/95d1fa2b42f6439ce669

とか、その場その場で良い感じの引き出しを引き出して見せられると良いなと思っています。日々精進です。


## つづく

6 日目にして自己紹介でした。あ、今日も自己紹介しないといけない。まだ今年も色々ありますね。つづく。
Waifu DiffusionのHyperNetworkモデルを自作したときのパラメータ設定用メモ

書きかけの記事サルベージ。若干情報が古いです。
内容を大幅に縮小したので若干消化不良感がありますがお許しください。

機械学習素人がWeb UIをいじってHyperNetworkを自作してみたというだけの記事。
何の技術的知見もないので、その筋の方は適当に流し読みしていただければ。

完成物のリンクも置いておきます。
もうちょっと改良できそうですが試行錯誤中。

https://huggingface.co/atsushi015/hypernetwork-quality-tags

# 動作環境

Google colaboratory [^1]
Waifu Diffusion 1.4 patch1
Stable Diffusion Web UI (AUTOMATIC1111) v1.0.0-pre
Hypernetwork-MonkeyPatch-Extension

[^1]: 現在の無料版colabはStable Diffusionの利用に制限がかけられており、学習などのマシンリソースを消費するタスクを回すと強制終了される場合があるので注意が必要です。

# モデル作成時の設定

ほとんど既存記事の受け売りですが一応掲載

## Layer

レイヤー構成。例えば`(1, 2, 1)`の場合、`Input(32)`→`Conv2d(64)`→`Conv2d(32)`のようなモデルが構成される。小数点以下も指定可能。
画風を学習する際は`(1, 2, 2, 1)`がいいらしいがまだ上手く行っていない。Layer NormalizationをONにすればデフォルトでも学習精度はまあまあ良くなる。

## Activation

活性化関数。以下、代表的なもののみ抜粋。

  - Linear
      - $ f(x) = x $。つまり、何も変換されていない状態。
      - 原則として使用すべきではないが、学習が安定するので試してみる分には意外とありかもしれない。
  - ReLU
      - $ f(x) = \max(0, x) $
      - おなじみの関数。Normalizationの設定に気を付けないとニューロン死が発生するらしいので注意。
  - Swish
      - ReLU系に分類される。ReLUと違い、マイナスの入力値を受け取ってもニューロン死が発生しない。
      - Web UIの場合、実際にはHardswish関数が使用される。Hardswish関数はBack-propagation時のみ近似関数を使用する軽量化版。
  - Mish
      - ReLU系に分類される。最近作られた関数らしく、学習の収束が早いのが特徴。ReLUと違いニューロン死は発生しない。

## Optimization
  - 最適化関数。
  - よくわかってない。とりあえずAdamでいいと思う。
  - `MonkeyPatch-Extension`を導入すると入力可能なパラメータを増やせるようなのでAdamWも選択肢に入る？

## Normalization

レイヤーの初期化にかかわる。デフォルトだと入力にマイナスの値を含むらしいので、ReLU系の活性化関数を使用する場合は変更推奨。

## Layer Normalization
  - 中間層にLayer Normalization層が追加される
  - Dropout層の代わりとして提案された手法。ONにすると収束が早くなる。
  - 学習が不安定になるという噂もあるので、場合によりけりで判断した方がいいかもしれない。
  - 外部Extensionを入れていないと2層目の直下にしか追加されないらしい

## Use Dropout
  - Dropout層が追加される
  - 一定の数値未満の出力が0に置換される。過学習対策
  - 原則として入れているがLayer NormalizationがONの場合はなくてもいいかも。

# Training設定

## Use Gradient Clipping
  - 勾配クリッピングを適用する。
  - back propagation時の勾配に閾値を設定する。学習の発散対策。
  - まだ試してない。Layer NormalizationをOFFにしたときに使ってみるといいかもしれない。

## Use Advanced

`Hypernetwork-MonkeyPatch-Extension`を導入すると選択できる。Cosine Annealingを使用するためにONにする。

## Use Cosine Annealing
  - ONにすると学習率がステップ数に応じて上下に変動する。
  - いわゆる焼きなまし法の応用。単純に学習率を減らしていくよりも局所最適解から脱出しやすくなる。
  - `MonkeyPatch-Extension`を導入する理由の一つ。とりあえずONにしていいと思う。

## Max steps
  - 最大学習ステップ数
  - だいたい10000～20000位。元データの枚数とモデルの構成に応じて変える。1epochあたり画像の枚数分のステップがかかるので、epoch数の調整が重要（らしい）。

## Shuffle Danbooru Tags

学習時、captionをDanbooruのタグリストとみなしてランダムに並び替える。Data Augmentationの一種。

## Dropout Tags
  - 学習時にcaption中のDanbooruタグを一定確率でRandom-Clipする。
  - Data Augmentationの一種なので場合によりけりで。

## Text

`[filewords]`とだけ書かれたテキストファイルを`templates`フォルダの中に自力で作成して使用する。よく分かってない。

## Optimization Algorithm

  - よく分かってない。おそらくCross-Attention最適化時に使用するための関数。

# 参考文献

- [Stable Diffusion のファインチューンの Tips](https://dskjal.com/deeplearning/sd-fine-tune.html#hn-select-activation-function)
【React】useState と useEffect

# React Hooks: useState と useEffect の使い方

React Hooksは、React 16.8で導入され、関数コンポーネント内で状態やライフサイクルメソッドを利用できるようにします。`useState`は状態を管理し、`useEffect`はライフサイクルメソッドの代替として使用されます。以下でそれぞれの基本的な使い方を紹介します。

## 1. `useState`の基本的な使い方

`useState`は関数コンポーネント内で状態を管理するために使用されます。状態変数とその更新関数が返され、コンポーネントの再レンダリングがこれらの変数によってトリガーされます。

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

const Counter = () => {
  // 初期状態と更新関数を取得
  const [count, setCount] = useState(0);
  // const [count, setCount] = useState<number>(0); // typescriptのとき

  const increment = () => {
    // 状態の更新
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;
```

`useState`は、状態の初期値を引数として受け取り、現在の状態とその状態を更新するための関数を返します。

## 2. `useEffect`の基本的な使い方

`useEffect`は副作用を実行するために使用され、コンポーネントがマウントされた時、更新された時、あるいはアンマウントされた時に実行されるコードを記述することができます。

```jsx
import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  // useEffectを使用してカウンターが更新されるたびに処理を実行
  useEffect(() => {
    // 1秒ごとにカウントアップする処理
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000); // 1000msのインターバル

    // コンポーネントがアンマウントされたときにクリーンアップ
    return () => clearInterval(intervalId);
  }, []); // 依存配列が空なので、コンポーネントがマウントされたときに1度だけ実行

  return (
    <div>
      <p>Elapsed Time: {seconds} seconds</p>
    </div>
  );
};

export default Timer;
```

`useEffect`の第二引数として依存配列を渡すことで、その依存が変更されたときだけ`useEffect`が実行されるように制御できます。空の配列を渡すと、マウント時の一度だけ実行されます。

空の配列ではない時の例
```jsx
import React, { useState, useEffect } from 'react';

const ExampleComponent = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    // countの値が変更されたときに実行
    console.log(`Count is ${count}`);
  }, [count]); // countが変更されたときのみ実行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;
```

これで、`useState`と`useEffect`の基本的な使い方について理解できました。これらのHooksはReactコンポーネントをよりシンプルかつ効果的に構築するための強力なツールです。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！
【React】TypeScript x React基礎

# TypeScript x React基礎

ReactとTypeScriptは、強力な組み合わせで、アプリケーションの開発をより安全で保守しやすくします。TypeScriptは、JavaScriptに静的型チェックを追加し、開発者により多くのコードの品質と信頼性を提供します。以下は、TypeScriptとReactを組み合わせて使う基本的な手法についてのガイドです。

## 1. プロジェクトの初期化

まず、TypeScriptとReactを組み合わせたプロジェクトを初期化します。Create React Appを使用して、簡単にセットアップできます。

```bash
npx create-react-app my-ts-react-app --template typescript
cd my-ts-react-app
```

上記のコマンドで、TypeScriptテンプレートを使用したReactプロジェクトが作成されます。

## 2. コンポーネントの作成
`src`フォルダ内に`components`フォルダを作成します

TypeScriptを使用すると、コンポーネントに対して型を定義できます。例えば、以下のように関数コンポーネントのプロップスに対する型を指定できます。

```tsx:components/MyComponent.tsx
import React from 'react';

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;
```
いちいち`interface`で指定するのがめんどくさかったら別の書き方もできます！
(でも、多くの場合は、`types`フォルダを作成し、そこに各コンポーネントで使う型を指定してインポートして型を使います)
```tsx:components/MyComponent.tsx
import React from "react";

const MyComponent: React.FC<{ name: string; age: number }> = ({
  name,
  age,
}) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;
```
```tsx:App.tsx
import "./App.css";
import React from "react";
import MyComponent from "./components/MyComponent";

const App: React.FC = () => {
  return (
    <div className="App">
      <MyComponent name="Naoya_pro" age={22} />
    </div>
  );
};

export default App;
```
## 3. ステートの管理

クラスコンポーネント内でステートを管理する場合も、型を利用してステートの形状を定義できます。

```tsx:components/Counter.tsx
import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;
```

## 4. ルーティング

React Routerを使用して、アプリケーション内でページの遷移を管理する場合も、型を活用できます。

```bash
# npmの場合
npm i react-router-dom@6

# yarnの場合
yarn add react-router-dom@6
```
```tsx:App.tsx
import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import MyComponent from "./components/MyComponent";
import Counter from "./components/Counter";

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/my-component" element={<MyComponent name="Naoya_pro" age={22} />} />
        <Route path="/counter" element={<Counter />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;
```


これらの手法により、TypeScriptとReactを組み合わせて、アプリケーションの開発をより型安全かつ保守しやすくすることができます。型による補完とエディタのサポートを活用して、開発効率を向上させましょう。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！
viewport sizeにあわせて変化しつつアクセシブルかもしれないfont-size指定

## この記事の概要

`font-size` の指定に `vw` や `vh` などの単位を使用する場合、アクセシビリティ的な問題が起きます。

ユーザーがブラウザの設定としてフォントサイズを変えていても、それが反映されなくなることです。

とは言え `vw` などで文字のサイズを指定するのが便利な場面もありますから、上手くやれないかと思い考えてみました。

:::note warn
タイトルに「かもしれない」と入れている通り、確証はありません。
ハック的な感じがしますし、コードの理解しやすさも下がっていると思います。
これをきっかけにもっと良いやり方が生まれたら嬉しいです。
:::

## 内容

仮に `2vw` 相当のサイズを指定する場合、次のようになります。

```css
@property --1vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --1vw: 1vw;
  --vw-to-px: calc(tan(atan2(var(--1vw), 1px)));
}

p {
  font-size: calc(var(--vw-to-px) * 1rem / 16 * 2);
}
```

`@property --1vw` の部分は、現在 `atan2` にバグがあるらしく、それを回避するための記述です。

上記の対応が不要であれば `tan(atan2(var(--1vw), 1px))` の部分は本来 `tan(atan2(1vw, 1px))` と書けます。
これは `1vw をピクセル換算した際、何ピクセルあるのか` を表しています。

このあたりの詳しい内容はこちらの記事をご覧ください。
若干記載が違いますが、ほとんど同じことをやっています。

https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j

次に `font-size` ですが `--vw-to-px` つまりピクセル換算した `vw` に `1rem` をかけて `16` で割ることで単位を `rem` へ変換しています。

最後の `* 2` は `2vw` を表したいので `2` です。
もし `3vw` を表したければ `* 3`、`4vw` を表したければ `* 4` です。

## 挙動

今回のやり方で作ったものはこのように動きます。
viewport 幅にあわせてフォントサイズが変わりつつ、設定のフォントサイズも反映されます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/20dc018a-3d81-96e0-77e8-07985b2e0542.gif)

逆に、通常の `vw` の指定だとこのようになります。
ブラウザの設定が反映されていません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/adb008f5-1177-1d27-81e9-0cee8e772d1f.gif)

## 最後に

この記事の途中で引用したものを読んでいる最中にふと浮かび作ってみましたが、実用的かというと……であります。

記事の冒頭で記載していたように、この記事を通じてより良いやり方が生まれたらとても嬉しいです。
【React】コンポーネントを動的にロードする

# React.lazy()を使用してコンポーネントを動的にロードする

React.lazy()は、React 16.6.0で導入された機能で、コンポーネントを動的にロードするための便利な方法を提供しています。これにより、アプリケーションの初期ロード時間を最適化し、必要なときに必要なコンポーネントだけをロードできます。

## 1. React.lazy()とは？

`React.lazy()`は、動的なインポートをサポートする関数で、遅延読み込みが可能なコンポーネントを生成します。通常、コンポーネントは`import`ステートメントを使用して直接読み込まれますが、`React.lazy()`を使用すると、そのコンポーネントはコード分割（code-splitting）が適用され、必要に応じて非同期的にロードされます。

```jsx
const MyComponent = React.lazy(() => import('./MyComponent'));
```

## 2. React.lazy()の基本的な使用法

以下は、React.lazy()の基本的な使用法です。

```jsx:components/MyComponent.jsx
import React from "react";

const MyComponent = () => {
  return <div>Hello, React!</div>;
};

export default MyComponent;
```

```jsx:App.js
import "./App.css";
import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./components/MyComponent"));

const App = () => {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
};

export default App;
```

上記の例では、`MyComponent`が`React.lazy()`を使用して動的にロードされています。`Suspense`コンポーネントは、遅延読み込み中に表示されるローディングメッセージを指定します。

## 3. Suspenseを使用したエラーハンドリング

`Suspense`は非同期コンポーネントの読み込み中のローディングをハンドリングするだけでなく、エラーハンドリングにも使用できます。非同期コンポーネントのロード中にエラーが発生した場合、`Suspense`は`fallback`プロパティに指定されたローディングメッセージではなく、`<ErrorBoundary>`といったエラーコンポーネントを表示します。

```jsx:App.js
import "./App.css";
import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./components/MyComponent"));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

const App = () => {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <ErrorBoundary fallback={<h2>Error!!!!</h2>}>
          <MyComponent />
        </ErrorBoundary>
      </Suspense>
    </div>
  );
};

export default App;
```
## 4. まとめ

React.lazy()を使用することで、アプリケーションの初期ロード時間を最適化し、必要なときに必要なコンポーネントだけを非同期的にロードすることができます。Suspenseを使用してローディングとエラーハンドリングを簡単に組み込むことができます



この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！
【React】超初心者向けPropsとStateの違い

# ReactコンポーネントのPropsとStateの違い
Reactはコンポーネントベースのライブラリであり、コンポーネントはアプリケーションのビルディングブロックとして機能します。Reactコンポーネント内でデータを管理するために、プロップスとステートという2つの主要な概念が利用されます。これらは異なる目的で使用され、以下にその違いをまとめます。

## プロップス（Props）
1. **外部から渡されるデータ**
   - プロップスは、親コンポーネントから子コンポーネントにデータを渡すためのものです。
   - 親コンポーネントが子コンポーネントに情報を渡すことができ、これによりデータの共有が可能となります。

2. **読み取り専用**
   - プロップスは子コンポーネント内で読み取り専用です。子コンポーネント内でプロップスを変更することはできません。

3. **関数コンポーネントとクラスコンポーネントの両方で使用**
   - 関数コンポーネントでは、引数としてプロップスを受け取ります。
   - クラスコンポーネントでは、`this.props`を介してプロップスにアクセスします。

```jsx
// Example of using props in a functional component
const MyComponent = (props) => {
  return <p>{props.message}</p>;
};

// Example of using props in a class component
class MyComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
}
```

## ステート（State）

1. **内部で管理されるデータ**
   - ステートは、コンポーネント内で管理される内部の状態データです。
   - ステートはコンポーネントがその状態を変更できるようにするために使用されます。

2. **変更可能**
   - ステートは変更可能で、`setState`メソッドを使用して更新できます。
   - ステートが変更されると、Reactは再レンダリングをトリガーし、UIが変更されます。

3. **主にクラスコンポーネントで使用**
   - 関数コンポーネントでもステートを利用できるようになりましたが、クラスコンポーネントでの使用が主流です。
   - クラスコンポーネントでは、`this.state`を介してステートにアクセスし、`this.setState`を使用して更新します。

```jsx
// Example of using state in a class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}
```

## 結論

プロップスとステートはReactコンポーネントにおいてデータ管理のために使用される重要な概念です。プロップスは外部からのデータの受け渡しに使用され、ステートは内部でのデータの管理と更新に使用されます。これらの概念をうまく組み合わせることで、Reactアプリケーションを効果的に構築することができます。

## 終わり
この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！
【React】超初心者向けスタートガイド

## 1. **Reactとは？**
   - ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するためのものです。
   - 仮想DOMを使用し、効率的なUIの更新を可能にします。

## 2. **環境のセットアップ**
   - 公式サイト > https://ja.legacy.reactjs.org/docs/create-a-new-react-app.html
   - Node.jsとnpm（またはyarn）をインストールする
   - Create React Appで新規プロジェクトを作成する

## 3. **Create React App**
プロジェクトを作成
```terminal
npx create-react-app my-react-app
```
プロジェクトディレクトリに移動し、開発サーバーを起動します。
```terminal
cd my-react-app
npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/1b7f64c9-5a03-bbee-6502-3a55ab979b34.png)
`http://localhost:3000/`が自動で立ち上がるかなと思います

## 4. **基本的なReactコンポーネントの作成**
```text:フォルダ構成
my-react-app/
|-- node_modules/
|-- public/
|   |-- index.html
|   |-- favicon.ico
|-- src/
|   |-- index.js
|   |-- App.js
|   |-- App.css
|   |-- components/ ←作成してください
|-- package.json
|-- README.md
|-- ...
```
適当なEditorで作成した`my-react-app`を開き、関数コンポーネントを作成します。
```jsx:components/MyComponents.jsx
import React from "react";

const MyComponents = () => {
  return <div>Hello, React!</div>;
};

export default MyComponents;

```

## 5. **コンポーネントのレンダリング**
作成した`MyComponents`を`App.js`からレンダリングしてみます

```jsx:App.js
import "./App.css";
import MyComponents from "./components/MyComponents";

function App() {
  return (
    <div className="App">
      <MyComponents />
    </div>
  );
}

export default App;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/1a5e5c8c-eb8f-2c00-da1d-727bfa159d8d.png)
`MyComponents`で記述したHello, React!が表示できました

## 6. **注意点**
   - JSXではキャメルケースを使用することが多いです（例：`className`、`onClick`）
   - コンポーネントを小さく、再利用可能に設計する
   - npmかyarnかは必ず絞って開発する
       - 今後ライブラリとかインストールするときにnpmとyarnはどちらでもインストール可能な時が多いですが、同じプロジェクト内で混じってしまうとバッティングしてしまうことがあります

## 7. **まとめ**
   - Reactの基本的な使用法と注意点を理解しました。
   - これをベースにして、より複雑で実用的なアプリケーションを構築するための学習を進めていきましょう。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！
熊谷さんのやさしいSwift勉強会

# はじめに

株式会社ゆめみ Advent Calendar 2023 の7日目の記事です

https://qiita.com/advent-calendar/2023/yumemi

# 勉強会

ゆめみでは、開催数 **329回**に達した勉強会があります。

その名も「**熊谷さんのやさしいSwift勉強会**」です。

この勉強会の心持ちがとても気に入っているのでまずは紹介です。

> ### 心持ち
> - みんな知っている、は思い込み
> - 自信や確証は、いらない
> - なんとなくそう思う、大歓迎

ちょうど下記の再生位置から 1分くらいの内容なので是非聴いてもらいたいです。

https://youtu.be/03wl8gyziS8?si=qy27KnHytpjuQgnz&t=637

勉強会だけでなく、リモート会議で沈黙が常態化してしまう関係性においても、そういった状況を打開する心持ちにもなりそうに感じています。

## オープン・ハンドブック

さて、この勉強会に関する記録は、ゆめみオープン・ハンドブック内で公開されています。

> Swift 言語の素養を深めるための、株式会社ゆめみ の社内勉強会です。

https://notion.yumemi.co.jp/swift

社内勉強会として始まりましたが、現在は社外にも公開しています。毎週月水金の13時から1時間、毎回参加者を connpass で公募しており、次回は明日です。

https://yumemi.connpass.com/event/303610/

オープン・ハンドブックで公開されている内容はかなりの量となっていて、どこからみたら良いか迷う部分もあると思います。活用の手引きとして内容を紹介します。

### やさしい Swift 勉強会の題材

この勉強会で扱っている題材を整理しているデータベースになります。
Notion のデータベースの機能を活用して、後述の目的別に見せ方を変えていくのため情報源となっています。圧倒されてしまうと思うのでさらっと量を確認したら他の目的別で見るのがおすすめです。

https://notion.yumemi.co.jp/swift/swift

### やさしい Swift 勉強会の公開動画

公開済みの過去の動画一覧です。

https://notion.yumemi.co.jp/swift/%E3%82%84%E3%81%95%E3%81%97%E3%81%84-swift-%E5%8B%89%E5%BC%B7%E4%BC%9A%E3%81%AE%E5%85%AC%E9%96%8B%E5%8B%95%E7%94%BB

過去の動画随時公開予定となっていて、現時点で、全て公開はされていないです。

### 訂正事項や補足事項

勉強会では、一つ一つのことを丁寧に掘り下げていきます。その過程に対しての訂正や補足する事柄なので、どれもそれだけで一つの記事になりそうな内容も含まれています。

https://notion.yumemi.co.jp/swift/%E8%A8%82%E6%AD%A3%E4%BA%8B%E9%A0%85%E3%82%84%E8%A3%9C%E8%B6%B3%E4%BA%8B%E9%A0%85

### 分野別の開催情報

分野別の開催情報としてまとめています。

https://notion.yumemi.co.jp/swift/%E5%88%86%E9%87%8E%E5%88%A5%E3%81%AE%E9%96%8B%E5%82%AC%E6%83%85%E5%A0%B1

例えば、 About Swift

https://www.swift.org/about/

自学していく上で、合わせてこの分野としてまとめられている動画を見てもらうと理解が深まると思います。

https://notion.yumemi.co.jp/swift/%E5%88%86%E9%87%8E%E5%88%A5%E3%81%AE%E9%96%8B%E5%82%AC%E6%83%85%E5%A0%B1/about-swift

### Swift 分類データベース

データベースから過去の動画の逆引きができるようになっています。データベースを眺めるだけでも Swift で扱うテーマに触れることができて、気になるところから関連動画で理解を深めるという使い方もできます。[^1]

https://notion.yumemi.co.jp/swift/swift-%E5%88%86%E9%A1%9E%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9

[^1]: ここだけ Qiita でのリンクプレビューが壊れているようです。URL「swift-分類データベース」にハイフンと日本語のエンコードが含まれているのが原因でしょうか

### ゆめみ iOS 研修との関連

ゆめみでは、Swiftを利用したiOSアプリ開発の研修を公開しています。

https://github.com/yumemi-inc/ios-training

このiOS研修と勉強会の関連もまとめており、自学する情報源としても活用できるように更新中です。

https://notion.yumemi.co.jp/swift/ios

# おわりに

オープン・ハンドブックにはフィードバックを送る機能がないため、もしフィードバックしたいことがありましたら、この記事のコメントにフィードバックを寄せてもらえたら嬉しいです。

明日は @Seo-4d696b75 さんの「androidx.glanceの話」です。お楽しみに！
破壊的メソッドのことをあまり良く分かってなかった

今年のはじめの方に追加されたES2023のメソッドを改めて見直してたら、破壊的メソッド・非破壊的メソッドという言葉が出てきて、そもそもそういったものがどんなものなのか知らなかったので、備忘録として残しておくことにしました。

## ミュータブルとイミュータブル

> イミュータブル (英: immutable) なオブジェクトとは、作成後にその状態を変えることのできないオブジェクトのことである。対義語はミュータブル (英: mutable) なオブジェクトで、作成後も状態を変えることができる。mutableは「変更可能な」、immutableは「変更不可能な、不変の」という意味を持つ形容詞である。

[Wiki](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%9F%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AB)より引用

つまりミュータブルは変更できるがイミュータブルは変更できない、そして現代のモダンなフロントエンド開発において「ミュータブルが悪とされている」らしい。

## なんでミュータブルが悪なの？
無知全開です。
AIだったらどう答えるだろうと気になったので、[Microsoft Copilot（Bing AI）](https://www.microsoft.com/en-us/microsoft-copilot)に聞いてみました。


**私の質問**: 現代のフロントエンド開発においてmutableは悪とされています。なぜmutableが悪なのでしょう？


<details><summary>Copilotの回答</summary>

現代のフロントエンド開発では、mutable（変更可能）な状態は避けるべきとされています。これにはいくつかの理由があります。
予測不可能な変更: mutableな状態は、コードの異なる部分から予期せずに変更される可能性があり、バグの原因となります。

- 並行処理の問題: 複数のプロセスが同時に同じデータを変更しようとすると、競合が発生しやすくなります。
- 再利用性の低下: mutableなオブジェクトは、変更された後の状態に依存するため、再利用が難しくなります。
- テストの困難さ: mutableな状態はテストを複雑にし、特定の状態を再現するために追加のセットアップが必要になることがあります。

不変性（immutability）を持つオブジェクトは、これらの問題を回避するのに役立ちます。一度作成されたら変更されないため、より安全で信頼性の高いコードを書くことができます。
Reactなどのモダンなフロントエンドフレームワークでは、この不変性の原則が推奨されており、状態管理においてもimmutableなアプローチが取られています。
ただし、すべてのケースでmutableが悪というわけではなく、状況に応じてmutableな状態が適切な場合もあります。
重要なのは、mutableとimmutableの違いを理解し、適切な場面で適切なアプローチを選択することです。
また、モジュールバンドラーやトランスパイラーを使用することで、開発の効率を上げることができます。
</details>


なるほど、以下の記事にも予測不可能な変更について書かれていました。

https://zenn.dev/mizchi/articles/oop-think-modern

> 例えば、jQuery で手続き的に DOM を変更すると、どの状態からどの状態へ遷移したか、変更後からはわからない。今何を行っていて、どのような状態にあるか？を意識する必要をなくし、差分更新はフレームワークで行うので、ゼロから状態を作っていいことにしたのが React の意義。

もう少しCopilotに聞いていきます。

**私の質問**: mutableな状態が非推奨とされる具体的な実例を教えてください。

<details><summary>Copilotの回答</summary>

mutableな状態が非推奨とされる具体的な実例について、いくつかの情報を見つけました。以下にその要点をまとめてみます。

1. JavaScriptでの配列操作: mutableな操作としては、配列に対してpush, pop, spliceなどのメソッドを使用することが挙げられます。これらのメソッドは元の配列を直接変更するため、予期せぬバグを引き起こす可能性があります。一方、immutableな操作としては、concat, slice, mapなどのメソッドがあり、これらは元の配列を変更せずに新しい配列を作成します。

2. 破壊的なメソッドの例: JavaScriptにおいて、破壊的なメソッドは元のデータを変更してしまうため、非推奨とされています。例えば、sort()メソッドを使用する際にスプレッド演算子を使って元の配列を変更せずにソートする方法が推奨されています。

3. Reactでの状態管理: Reactでは、状態をmutableに扱うことは非推奨です。状態を更新する際には、setStateやフックのuseStateを使用して新しい状態を生成し、Reactが効率的に再レンダリングを行えるようにします。直接状態を変更すると、コンポーネントの予測不可能な挙動を引き起こす可能性があります。

これらの実例は、mutableな状態の扱いが非推奨とされる理由を示しており、開発者がより安全で予測可能なコードを書くためのガイドラインとなります。もし、これらのトピックについてさらに詳しい情報やコード例が必要であれば、お知らせください。私はそのような情報を提供することができます。
</details>

なるほど〜、簡潔にまとめて答えてくれました。
ありがとうCopilot。

## 参考

https://qiita.com/takeiin/items/448d76ba1cd65dbc585a

https://jsprimer.net/basic/array/#mutable-immutable

https://www.commte.co.jp/learn-nextjs/Immutable

https://zenn.dev/luvmini511/articles/85e8e3c71a2f41

https://qiita.com/tixyu10/items/3b99419432d8d809f12e
お金が欲しい！ビッグになりたい！

この記事は[クソアプリ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/kuso-app)6日目です。
# 欲望の塊
お金が欲しい。ビッグになりたい。
そんな、誰もが一度は夢見てそうな願望をかなえました。
# 完成形
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">アドベントカレンダー　クソアプリ用 <a href="https://t.co/AoYANlKund">pic.twitter.com/AoYANlKund</a></p>&mdash; ある暇な人 (@Aruhimanahito) <a href="https://twitter.com/Aruhimanahito/status/1732094058372399136?ref_src=twsrc%5Etfw">December 5, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

どうでしょう。
金がいっぱいになりました。
ついでに、ビッグな人になれました。
# 作り方
使ったもの
Unity 2023.1.18f1
コード
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using TMPro;
public class TextInput : MonoBehaviour
{
    public TMP_InputField inputField;
    [SerializeField] private string A;
    public TMP_Text Name;
    // Start is called before the first frame update
    void Start()
    {
      
        
    }

    // Update is called once per frame
    void Update()
    {
        Name.text = A;
        A = inputField.text;
    }
   
}
```
```
using System.Collections;
using System.Collections.Generic;
using Unity.VisualScripting;
using UnityEngine;

public class BtnPush : MonoBehaviour
{
    public GameObject StartBtn;
    public GameObject InputField;
    public GameObject Money;
    public GameObject Okane;
    public GameObject BIG;
    public Transform MoneyTransform;
    // Start is called before the first frame update
    void Start()
    {
        Okane.SetActive(false);
        BIG.SetActive(false);

    }
  
    public void StartBtnClick()
    {
        InputField.SetActive(false);
        StartBtn.SetActive(false);
        Okane.SetActive(true);
        BIG.SetActive(true);
    }
    public void OkaneClick()
    {
        Instantiate(Money, new Vector3(0, 20.5f, 0),Quaternion.identity,MoneyTransform);
        
    }
    public void BIGClick()
    {
        this.gameObject.transform.localScale = new Vector3(this.transform.localScale.x + 0.1f, this.transform.localScale.y+0.1f, 1);
    }
}
```
# まとめ
願いが叶いました。やったね。
せっかくなのでパソコンで遊べるようにしておきました
下のリンクからどうぞ
(ただしWindowsに限る,Macで動くかは知らない)

https://drive.google.com/drive/folders/1nE3n0-QNkZO5b9cwJ4Arv7nN_JAORlcG?usp=drive_link

不具合があったら、やる気がでた時に直します。
私がチームで作成し研究室に設置した図書館システム

# 想定読者
- 大学などでゆるい図書館システムを作りたいと考えていて概要を知りたい学生

# 概要
![23-09-23track.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1255098/f6ec7911-6cdb-93d5-d405-5e856e7396b6.png)

当時学科のラウンジの自由に持って行ってよい本置き場があった。この本を誰が借りたかを把握するために作成した。
- デスクトップアプリとして作成し、本棚の近くにあるデスクトップパソコン(windows10)で稼働
- pcのBIOSをいじり、22時に自動シャットダウン、10：30に自動起動＆batファイルで図書館システムを起動
# 本を借りる際にどのように使うか
1. 学生が借りたい本を選んだ後PCに接続されているICカードリーダーに学生証をかざし、システムにログインする。
1. PC上のボタンを押し、本を借りる画面に移行する
1. 借りる本のバーコードをすべてバーコードリーダーでスキャンし、完了ボタンを押す
1. 履歴テーブルに履歴が保存され、ICカードリーダーで読み取った学籍番号を使いslackで借りた本の名前と返却日の一覧を送信
# システムを作る際に意識したこと
- 運用保守を行わない、またはメンテナンスをあまりせずとも動くこと
- 5年以上の期間動くこと

[なぜ意識した？]
自分たちが卒業した後でも運用されると想定されたから
# 使用した技術など
- 言語
    - Python3.1.0(Microsoft Store)
        - Microsoftストアから入手した
        - 当初はC#やExcel＋VBAという案もあった
        - 私の学科の研究室の学生や教授に使える人が多いため、運用保守が可能だと思った
- GUI
    - tkinter
        - 習得が簡単
        - 枯れた技術なので長期間運用しても大丈夫
- DB
    - sqlite3
        - 私の学科の研究室の学生や教授に使える人が多いため、運用保守が可能だと思った
- 周辺機器
    - バーコードリーダー
        - pcに接続されている
        - 本のバーコードの読み取りで使用
        - 読み取る際にプログラムは**不要**
    - ICカードリーダー(PaSoRi RC-S380)
        - pcに接続されている
        - 学生証の読み取りで使用
        - 読み取るためにはプログラムが**必要**
- その他API
    - google books api
        - DBへの本の登録で使用（後述）
    - slack api
        - システムを利用した際の通知で使用（後述）
- その他ソフト
    - zadig-2.7
        - windowsでICカードリーダーを使用するために使用
# データベース
![スクリーンショット 2023-12-14 133928.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1255098/5e6b3174-db59-70e7-bb12-b0bd6528e5d5.jpeg)
- bookテーブル
    - 本のテーブル
    - book_idは本のISBNを使用
- borrowing_historyテーブル
    - 本の買い出し記録のテーブル

学生のテーブルは
- 学生証から学籍番号が読み取れる
- 学籍番号だけで学生と教員が区別できる
- 学籍番号から大学のメールアドレスが生成できる
- テーブルとして定義すると、ユーザーが自身で登録しないといけないor年度ごとに管理者がデータを追加しないといけない...など人がメンテナンスしないといけない
- 学生名や住所は必要ない

等の理由で定義しませんでした。

またメンテナンスの機会を減らすために、貸出記録はその本を返却すると削除するようにしています。

# 実装した機能
- 学生証を読み取り、対象の学生、対象の教員（管理者権限）、対象外を区別し、学生と教員のみログインできる機能
    - nfcpyを使い実装
    - 読み取った学籍番号の値からこれらを識別した（別途DBを参照しているわけではない）
- 本を借りる機能
- 本を返す機能
- 本をDBから削除する機能
- ログインすると現在借りている本の一覧と返却日を表示する機能
- 本を借りる、返却した際にslackで通知を送る機能
- 管理者でログインした際に、DB上の本を削除する機能
- 管理者でログインした際に、本のバーコードを読み取ることで、本をDB上に登録する機能
    - 運用コストを考えて、独自に生成したバーコードで本を管理するのではなく、本に元々ついているバーコードで管理する
    - 同じ本が2冊あった場合や、ユーザーが本棚にあるのと同じ本を本棚においてしまう場合など懸念点はあるが、なんとなく借りている人を把握したい、返却期限を過ぎても罰則がないなどゆるい要件で作成されたため、問題ないと考えた
- 返却の2日前にslackで通知
# 実装を諦めた機能
- 本をDB上で検索し、その本が棚のどこにあるかを表示する機能
    - 必ず必要な機能ではないし、本の数も2,300冊とシステムがなくても探せる規模だから
    - 本が決まった本棚にあるか確認する作業や、新たに本を登録した際にどの棚、カテゴリに登録するかなど、運用が大変だから
    - 時間がなく、使えるシステムを完成させるのが最優先だったため
Remixいいかも

:::note info
この記事はZOZO Advent Calendar 2023 シリーズ9の6日目の記事です。
:::

## はじめに
こんにちは、前回投稿した"[使ったことない技術を詰め合わせてアプリを開発した話](https://qiita.com/kensiiwasaki/items/c53364676e669258f140)"は目を通していただけましたでしょうか？？
今回はそこで登場した`Remix`について、個人的にいいなと思ったことを書いていこうと思います！

※この記事は他のフレームワークと優劣をつけるなどの目的は一切ありません

## Remixとは
https://remix.run/

`Remix`は`React`のSSRフレームワークで、`React Router`の制作者によって`React Router`を元に開発されています。

`Remix`はフルスタックフレームワークであり、`Rails`や`Laravel`などで用いられていたMVCアーキテクチャのV(View)とC(Controller)を提供しM(Model)は開発者によって委ねられている形になっています。
ちなみに自分は`Prisma` + `PlanetScale`をModelに採用しました。


## 良かったところ
### Nested Routes
Nested Routesによって、レイアウトやページをネストすることができ、ヘッダーの共通化などが簡単に実装することができます。

これによって、
- データを並列にロードできる
 ![スクリーンショット 2023-12-05 23.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1602210/aafa786c-690c-e204-3489-39e323ee9278.png)
(引用元: https://remix.run/)
<br>

- エラーの伝搬を留めることができる
![スクリーンショット 2023-12-05 23.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1602210/fa1df31c-170a-db99-6b95-98adb29e9f2d.png)
(引用元: https://remix.run/)
<br>

- ページ遷移時などに再Fetchするデータを最小限に抑えることができる

などのメリットがあります。
(ちなみにこの機能は`Remix`の機能と言うよりは`React Router`の機能なので`React`+`React Router`の構成でも利用できますし、`Next.js`のApp Routerでも[同等の機能](https://app-router.vercel.app/layouts)が利用できます)

### ページごとに実装を完結できる
`Remix`ではルートファイルに`loader`(GETリクエストを受けるモジュール)と　`action`(GET以外のリクエスト受けるモジュール)を持つ構成になります。
これによってナビゲーションとミューテーションのロジックを独立させることができ、ページごとに実装を完結させることができます。
これのおかげで、チーム開発でコードの全体像が把握できてない時や、初期段階で書いたコードの内容が曖昧な時でもそこまで気にすることなくページごとの実装に取り組むことができます。

### 機能が少ない
`Next.js`と比較しての話になりますが、`Remix`は機能が少ないため選択肢に迷うことが少なくなります。
例えばレンダリング手法で言うと`Remix`はSSRのみなのに対して、`Next.js`ではSSR・SSG・ISRがあります。もちろん選択肢が多いのは悪いことではなく正しく使い分ければ素晴らしいものが完成することは承知しております。
しかし現状の自分の力量では正しく使い分けることはできずコードがカオスになっていくことはなんとなく想像がつきます。だからこそ機能の少なさはメリットだと感じました。

そしてその分学習コストも低いので、急遽フロントエンドの開発をしなくてはならなくなってしまったバックエンドエンジニアの方などにはオススメできるポイントだと思っています。

## おわり
今回は実際に個人開発で触った`Remix`についてよかったと思った部分を主観で書かせていただきました！
もちろん内容以外のメリットやデメリットもありましたので機会がありましたらその辺のことも書いてみたいと思います。

興味が湧きましたらぜひ`Remix`触ってご自身の手でメリット・デメリット感じてみてください！

自分も`Remix`についてより深ぼっていくのはもちろん、要件に沿った適切な技術選定ができるように他のフロントエンドフレームワークにも触れていきたいと思います。

誤り等ございましたら、ご指摘いただけますと幸いでございます。

最後まで読んでくださりありがとうございました！
M.wikiGardenerを入れてConfluenceの古い記事を抽出する

# はじめに
社内でよく聞くのが、
「ページを整理したいけど、古い記事がどれかすぐわからないし、無リポ・・」
というデザイナさんの声。

なるほど、なんか困ってますね。そりゃ、あんなにページ書くんだから整理したいですよね？！

っていうのが発端です。

# やり方
https://marketplace.atlassian.com/apps/1219636/m-wikigardener-for-confluence?tab=overview&hosting=server

こちらは、Confluence Server or Data Centerで使えるものです。
こいつを会社の人にaddon入れてもらいます。無料なので駄目とは言わない気がするかな。

インストールすると、最初は無効になっているので、適用する設定を
`スペース管理者の人が`行います。

![スクリーンショット 2023-12-06 1.31.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/0126b1f8-c76f-c483-f2b9-77a4cdde0ce2.png)

activeにチェックを入れれば設定できています。
![スクリーンショット 2023-12-06 1.31.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/3c513454-496e-9b1e-e1f7-ecbe33ee1a91.png)

## 設定カテゴリ
- Outdated Pages
    - periodで設定したXヶ月以上更新してないページを洗い出す
- ignored Pages
    - 古いかどうかは見ない。気にしない、に分類したもの
- Log
    - 単なるログ

## 実際ページにどんなふうに表示されるか
![スクリーンショット 2023-12-06 1.33.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/cd7a1cb7-3180-fa7e-c83c-78e213d3fd26.png)

ページの冒頭にこういうの出てきますね。
- 確認した
- 無視
    - TOPページだから古くてもいいのだ（例）
- 編集する
    - ちょっと編集（更新）しようか
- 削除する
    - このページいらね！

ページ整理の目安のために入れてみるのはいいかも。
一応、Confluence Data Center版で使えてるから、大丈夫なのかな〜と思うけど、
元々、Server版で適用してたから、移行時に有効になった、とかかもね。
Options Objectパターンでレベルアップしたコードを書こう【前編】

# はじめに
実務では、実装が完了したら、プルリクエストを作って、先輩にレビューをしていただきます。
レビューでは、いろいろなことを学ぶことができます。
本日は、使用頻度は低くても、使えると便利なテクニックを教えていただいたので共有します！

# この記事で伝えたいこと・結論
- **引数が何を指しているのかわからない**問題を解決する**Options Objectパターン**というテクニックがある！
- レビューでレベルアップした書き方を学ぼう！！

# 具体例で説明
## 背景
プロダクトの契約プランについて、プランを変更した際にアラートを表示する。
表示するアラートは、どのプランからどのプランへ変更するかによって内容を変える。
その分岐パターンが複数あったため、共通部分をプラン変更を確認する関数として切り出して実装した。

プルリクエストを作成し、先輩からレビューいただいた。

## 問題
以下が私が書いたソースコードです。
一見良さそうではないでしょうか。実際、この判定結果を用いて、アラートの出し分けもできています。


レビューで先輩から「実装自体は問題ないけど、レベルアップしてみよう！」と言われ、リファクタすることになりました。
```typescript
// どのプランからどのプランへ変更するか確認する
const isPlanChange = (currentPlan: Plan, nextPlan: Plan) => {
  user.currentPlan === currentPlan && user.nextPlan === nextPlan
};

// プランA→プランBへの変更かどうか
const willChangePlanAToPlanB = isPlanChange(Plan.planA, Plan.planB);

// プランA→プランCへの変更かどうか
const willChangePlanAToPlanC = isPlanChange(Plan.planA, Plan.planC);
```


`isPlanChange関数`を呼び出しているところを見てください。
`(Plan.planA, Plan.planB)`を引数で渡していますが、ここだけを見ると、この引数が何を指しているのかすぐにはわかりません。
変数名を見たり、関数を定義しているところを見て初めて、変更前のプランと変更後のプランを指していることがわかります。


この**引数が何を指しているのかわからない**という問題を解決するために、**引数をオブジェクトにして名前をつける、Options Objectパターン**というテクニックを使います！

## キーワード引数とOptions Objectパターン
こちらのサイトを参考にしました。
[キーワード引数とOptions Objectパターン](https://typescriptbook.jp/reference/functions/keyword-arguments-and-options-object-pattern)
## キーワード引数とは
まずは、キーワード引数について知っておきましょう。
> キーワード引数(keyword argument)は、**Pythonの機能**です。関数呼び出し時に、値だけを指定するのではなく、**引数名を使って「名前=値」の形式で引数を指定する**方法です。
> 

```python:例
# Pythonコード
def calculateTriangleArea(base, height):
    base * height / 2

calculateTriangleArea(base=10, height=20)  # => 100
```
Pythonは全くわからないのですが、こんな書き方ができるみたいです。
`=`で繋ぐと数学みたいでわかりやすいですね。呼び出し時に`calculateTriangleArea(10, 20)`と書いてあるよりも、後から読んでわかりやすそうです。

しかし、残念ながらJavaScript、TypeScriptにはこれに該当する機能はないとのこと😢
その代わり、似たようなことが**Options Objectパターン**で実現できます。


本日はここまでです。
**Options Objectパターン**については明日記載します！！

続きはこちら→[Options Objectパターンでレベルアップしたコードを書こう【後編】](https://qiita.com/odendayoko/items/331683cad7957ee8e41b)
副業エンジニアの力を引き出す：効果的な付き合い方で大きな成果を！

[人数半減の中で総開発量UPを実現させた秘訣 by エイチームコマーステック Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ateam-commerce-tech)

3記事目は、エイチームコマーステック フロントエンドエンジニアの 大沢（@kazzzzzz） が担当します！

副業エンジニアを採用している企業は多くあるかと思いますが、最大限活かせられているかと言われると、Yesと答えられる人は中々いらっしゃらないかと思います。

今回は、副業エンジニアとの付き合い方を見直すことでより大きな成果を生み出せるようになったため、こちらの記事にまとめました！ぜひ最後まで見ていただければと思います！

## 副業エンジニア

前提として、現在エイチームコマーステックでは、副業エンジニア2名が在籍しています。週20時間ほど稼働しており、副業エンジニアの稼働時間のほとんどは社員の勤務時間とずれています。うち1名はフロントエンド領域の技術力が大変高いです。

普段お願いしている業務は、

- 実装タスク
- コードレビュー
- 実装に関する相談

です。

## 抱えていた課題

1. 技術力の高い副業エンジニアの技術力を上手く活かせていなかった
1. 副業エンジニアの稼働時間が社員の業務時間外なので、タスク関連の仕様の伝達やそれに対する質問などのコミュニケーションがうまく取れないことが多々あった

といった課題感を持っていました。

## 技術力の高い副業エンジニアとの定例MTGを実施

これまで、コードレビューのタイミングやチャットで実装に関して都度相談することで実装レベルの知見を得ることはできていましたが、この体制を続けているうちに徐々に新たな知見を得ることが少なくなっていきました。

組織の改変の際により高度な技術力をつけて効率的な組織運営をしようと思い、やり方を改めることにしました。

そこで、今後の施策の相談事項や中長期的なシステム課題について話す機会として、月一で技術やシステムについてざっくばらんに話す会を設置し、こちらからあらかじめ用意したトピックについてゆるく議論するようにしました。

例えば、Next.js（Webフロントエンドのフレームワーク）の今後の変化について議論したり、ソースコードのディレクトリ構造について課題感の洗い出しから改善例まで一緒に考えていただいたりといったことを行なっています。

定例MTGを実施すようになって、エンジニア内の知見がさらに広がりましたし、議論の質も高まりMTGにかける時間や実装の手戻り等も減らせたように感じます。

以前までは、新しい技術に関する話やシステムの将来を見据えた話などが出来ておりませんでした。せっかく技術力の高い副業エンジニアが在籍していてもコードレビュー経由で実装レベルの相談くらいしか出来ておらず、今思うと勿体無かったなと思います。

## タスクの依頼

見直しポイントその2は、お渡しするタスクの選び方とタスクの内容を見直しました。

これまでのタスク依頼の流れとしては、

1. 依頼中タスクが少なくなる
1. 依頼するタスクを全タスクの中から選ぶ
1. タスクが書かれたissueを業務委託の方が見てもわかるように記載内容を充実化する
1. 依頼する

でした。

まず、タスクを選ぶのに毎回苦労していました。稼働時間が社内エンジニアと比べると少ないので納期設定を先にせざるを得なくなりますし、エンジニアと他職種が頻繁にコミュニケーションをとる必要があるタスクも社員と働いている時間が異なるので実施が難しく依頼できません。

こういった条件を加味した上で優先度が高い順にタスクを選んでお渡しするというのは負担でした。

この課題に対し、リファクタリングなどの負債解消タスクを優先的に割り当てることにしました。

負債解消は緊急性の低い対応が多いため納期の心配もなくなりますし、仕様が明確なのでタスクに関するコミュニケーションの量も最小化することができました。

保守業務を副業エンジニアになるべくお願いすることで、社内エンジニアは新規機能の開発に集中する環境を作ることができ、生産性の向上に寄与することができました。

## 最後に

社内エンジニアと副業エンジニアはそもそも特性が違うものなので上手く役割分担することでお互いの負担を最小限にすることと、副業エンジニアの能力をより活かせるようなお仕事の依頼をすることでより効果的な付き合い方ができるのではと感じました。


次回カレンダーは、

[レビュー〜リリース期間半減！大きな過ちは早く潰せ！](https://qiita.com/bayasist/items/d46e7b0e5ce0e140a5e7)

です！

もしご興味がありましたら次回記事もご購読いただければと思います！

よろしくお願い致します！
たった2行のcssで要素を中央寄せする方法

# これはなに？

CSSで上下差中中央揃えにする方法はたくさんありますが、最小のコードってなんだろうと思い記事にしました。

# 結論

```scss
.hoge {
  display: grid;
  place-content: center;
}
```

以上です!

# Can I useでバージョン確認

2023年12月時点では、下記の対応です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/b9a3cab2-f6a7-aaeb-de25-eddc43934256.png)

Chrome、Edge、Safari、Firefox、Operaなどの主要ブラウザでは対応しています。
Pandas：内部結合と外部結合について

皆様こんにちは。
今回はPandasを用いてCSVファイルを結合する際の結合方法、**内部結合**と**外部結合**について整理していきたいと思います。

前回の記事：[Pandas：2つのCSVファイルを結合する方法](https://qiita.com/ikue-san/items/069c83df311d52ffe0b2 "Pandas：2つのCSVファイルを結合する方法")

以下のCSVファイルで結合を実施します。

クラス名簿3.csv
![スクリーンショット 2023-12-03 114152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150221/779559ad-0603-c2b7-7191-5347649d5f97.png)

出身中学校2.csv
![スクリーンショット 2023-12-03 114314.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150221/01824050-2f92-5551-8a28-13315db58937.png)

結合方法を指定する際はmerge()メソッド内でhowで指定します。
```Python
pandas.merge(引数1, 引数2, on = '結合キー', how = '結合方法')
```
|結合方法|howの指定|
|:--|:--|
|内部結合（INNER JOIN）|inner|
|外部結合：左（LEFT OUTER JOIN）|left|
|外部結合：右（RIGHT OUTER JOIN）|right|
|外部結合：ALL（FULL OUTER JOIN）|outer|

今回は[前回の記事](https://qiita.com/ikue-san/items/069c83df311d52ffe0b2 "Pandas：2つのCSVファイルを結合する方法")と同様に「クラス名簿3.csv」をdf、「出身中学校2.csv」をdf2、「中学校コード」を結合キーとし、それぞれ下記のように記述します。
```Python
# 内部結合
pandas.merge(df, df2, on = '中学校コード', how = 'inner')

# 外部結合：左
pandas.merge(df, df2, on = '中学校コード', how = 'left')

# 外部結合：右
pandas.merge(df, df2, on = '中学校コード', how = 'right')

# 外部結合：All
pandas.merge(df, df2, on = '中学校コード', how = 'outer')
```

# 内部結合（INNER JOIN）
「内部結合」は結合に用いたキーを基準として、左(df)、と右(df2)に共通するもののみを出力します。
別の言い方をすると、「中学校コード」の列を見た時にどちらのファイルにも存在するものだけを出力するという事です。
今回の例で言えば、df(クラス名簿3.csv)の中学校コード列には「7」、「8」というコードが存在しますが、df2(出身中学校2.csv)の中学校コード列には存在しません。
また、df2には「5」、「6」というコードが存在しますが、dfには存在しません。
そのため、どちらかにしか存在しない「5」、「6」、「7」、「8」を含む行は無視され、両者に共通するキーの値を持つ行のみが出力されます。
実際に結合したファイルを見てみましょう。
![内部結合.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150221/3d928ebd-f1b9-e511-1dbb-667e4b11952c.png)
想定通り両ファイルに共通するもののみが出力されていることが分かると思います。

:::note
ちなみにどちらが左でどちらが右なのかという事については、コードの見た目通りに左側の引数が左、右側の引数が右の認識で問題ありません。
:::

# 外部結合（OUTER JOIN）
### 1.外部結合：左（LEFT OUTER JOIN）
「外部結合：左」は左(df)を基準とし、基準になったファイルについては全ての行を出力しますが、他方はキーの値が一致する行のみが出力され、存在しない場合は空欄となります。
![外部結合：左.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150221/648744bd-3e47-eeab-b624-38bc3f223e51.png)
上記の通りdfは全ての行が出力されていますが、df2には中学校コード「7」、「8」を持つ中学校名は存在していないため、中学校名の欄は空になっています。

### 2.外部結合：右（RIGHT OUTER JOIN）
「外部結合：右」は先程とは反対で、右(df2)を基準とします。
![外部結合：右.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150221/c26fdda9-928f-d36d-e43c-6c5134162425.png)
df2の全ての行が出力されますが、dfには中学校コード「5」、「6」を持つ生徒はいないため、先程同様空欄になっていることが分かります。

### 3.外部結合：ALL（FULL OUTER JOIN）
「外部結合：ALL」は上記2つのハイブリッドのような形で、両ファイルのキーの値が一致しているか否かに関わらず全ての行を出力します。
![外部結合：All.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150221/56131016-7a7a-6a49-c73b-8787f8d25148.png)

# まとめ
今回はPandasで結合する際の結合方法についてまとめてみました。
内部結合が見た目は一番きれいに結合されますが、実際に業務で何かファイルを結合しようとした場合、全ての欄が正しく埋められているとは限らないため、そうした際に外部結合を使いこなすことが重要なのかなと感じました。
今後も勉強を続け、より理解を深めていきたいと思います。

# 参考
[図解！Pandas DataFrameのmergeによる結合(JOIN)](https://ai-inter1.com/pandas-dataframe_join/ "図解！Pandas DataFrameのmergeによる結合(JOIN)
")
神社を1クリックで2個創建して運気を爆上げするアプリ


[クソアプリのカレンダー | Advent Calendar 2023](https://qiita.com/advent-calendar/2023/kuso-app) 6日目の記事です

## 作ったもの
見てるタブの左右に神社のようなものを生やすChrome拡張機能

![AnyConv.com__movie_20231206-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365046/ed768cf3-a319-4fae-36cb-ed1030d25b2a.gif)


## 使い方
https://github.com/csy19/project-calendar_2023/tree/v1
- 上のリポジトリのReleaseからzipをDL
- デベロッパーモードで「パッケージ化されていない機能を読み込む」で拡張機能を有効化

## 作ろうと思ったきっかけとか
- TRPGをやっていて、身内ネタとしてオンラインセッションツールのタブを神社とかのサイトで挟むとダイスの出目が良くなるみたいなオカルトがあった。
- 毎度神社のことを調べている気がしたので（？）一発で厄除けとか勝負運の上がる神社を創建できたら楽だなと思った

## 感想とか
- バカデカ文字を作ってる時が一番頭がおかしかった。深夜だったし
- ストアで限定配布するか〜と思ってたんですがデベロッパー登録が何故かできず断念。無念。
- 背景のグラデーションも動かそうとしたんですけどあまりに目に痛くて無しに。
- 1クリックで開くページには実際の神社のサイトURLをお借りしようかとも思ったんですが、直近で [僕の自作ツールが大学のサーバーをダウンさせてしまった日の話｜くりきん](https://note.com/_kurikin/n/n13c2270f1203) の記事を読んでおり、クソアプリで仮に他所様に迷惑をかける可能性がちょっとでもあるのは回避したかった。
- Vite + Vueで作成。MPAの設定でちょっと詰まった
  - Next.jsのノリでpages配下でルーティングしようとしてうまく行かなかった。
  - [ViteのMPA設定のページ](https://ja.vitejs.dev/guide/build.html#multi-page-app)

## 今後の展望
神社名を増やして表示をランダムにしたりとかしたいですね

## まとめ
TRPGに限らず、麻雀とかカードゲームとかブラウザで遊べる運ゲーを積極的に挟んで運気をあげて年始から素敵なスタートダッシュを切ろう！メリークリスマス！！良いお年を！！
【Unity】Unityの.animファイルをfbx形式に変換する(UMotion Pro使用)

こんにちはっ🌟八ツ橋まろんです

**「Unity上で作成・編集したアニメーションファイル(.animファイル)を他の3Dソフトで使いたい」** という機会がたまに発生し、Unityアセットの [『UMotion Pro』](https://assetstore.unity.com/packages/tools/animation/umotion-pro-animation-editor-95991?locale=ja-JP)を使うことで実現できたので紹介します。

UMotion Proの基本的な使い方は[アセットストア](https://assetstore.unity.com/packages/tools/animation/umotion-pro-animation-editor-95991?locale=ja-JP)の動画を見るか、[日本語の非公式の解説動画](https://youtu.be/PjzGfP74XfA?si=Zxd_XCRyPrnf_UJo)を見るか、詳細な使い方はBoothに[日本語の電子本](https://maronvtuber.booth.pm/items/4569491)があるので参照してください。

## UMotion Proを使った.anim→.fbx変換手順

・まずはClip Editorの左上のFile > New Project > Humanoidで新しいUMotionデータを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/50f1d90c-10fe-3fee-c3d1-833c07166efb.png)

・Pose Editorに適用したいHumanoidキャラクターを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/bf7e2d6b-4afa-c04b-92da-577794589095.png)


・Clip Editorの左上のFile > Import Clipsで変換したい.animファイルをインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/f825d47b-8363-bd18-0925-42c91e26f226.png)

・正常にインポートできたらFile > Export > Export Settingsで出力設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/f5cd78d4-3bcb-a1f1-5d7e-b8fafe1e2621.png)

・Export Current Animationで出力すれば完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/c60bca7e-b523-cf9f-23c7-154c36a7f603.png)



以上、.anim→.fbx変換手順でした。

使いどころは限定的ですが、Unityのアニメーションファイルを外部に持っていきたい時はこの手順を使ってみてください。


それではっ🌟

八ツ橋まろん