OmniAICreator/Qiita-1.07M huggingface dataset:
リリースから始まる！継続的改善サイクルの回し方

この記事は[モチベーションクラウドシリーズ Advent Calendar 2022](URL "https://qiita.com/advent-calendar/2022/mcs") 23日目の投稿です。

## はじめに
弊社の開発組織では、新たな機能をリリースする際に必ずアウトカム(得たい成果)を定義しています。定義したアウトカムをリリース後に測定しリリースの成功・失敗を判断しているのですが、アウトカムを測定して終わりになるケースが多く、その後の動きに個人・チームとして課題感を持っていました。
その課題感からリリース後に新たな取り組みを行ったので、開発サイクルに沿って紹介させていただきます。
![My First Board.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887131/c2864a43-e81c-4f7c-f30f-4d74e1c69af5.jpeg)
## アウトカムの設定（リリース前）
前述したように、弊社の開発組織ではリリース機能に対するアウトカムの設定を必須としています。
アウトカムは必ず要件定義段階で設定し、開発メンバー間で目線を揃えることでどこを目指して開発しているかの認識がずれないようにしています。
アウトカムとなる指標は観測可能にする必要があり、基本的に定量的な数値目標を設定しています。(例えば「◯◯の閲覧率◯%向上」など)

## アウトカム観測（リリース後）
設定したアウトカムがリリース後に実際どのような結果になったのか観測します。(ここまでは以前から行っていた取り組みです)
アウトカムの観測準備はリリース前に済ませておき、リリース後は見るだけの状態になります。
リリース直後に結果が出るアウトカムは少ないので、通常リリース後1ヶ月後等に観測を行います。

## 利用状況の深掘り
アウトカムを達成するか否かに関わらず、実際の利用状況の深掘りを行います。
やり方は様々あると思いますが、私の開発組織ではリリースした機能のカスタマージャーニーに沿ってユーザーが期待した行動をとっているかどうかをGoogleAnalyticsやRedashを使って分析を行いました。
その分析結果を元に、プロダクトマネージャーやUXデザイナーも交えて改善に向けてどこがボトルネックになっているかを特定し、考えられる解決方法となるような仮説を立てます。
この利用状況の分析を開発に関わった全ての役割で行うことで、様々な角度から分析を行うことができたと感じています。
![スクリーンショット 2022-12-22 21.48.16 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887131/2737dda7-c332-cbba-e89e-d27bca73aaf2.png)

## アウトカムの見直し
利用状況の分析のなどや単純な時間経過により、当初の要件定義段階とは前提としていた状況が異なりアウトカムが本来の目的とずれる可能性が往々にしてあります。
その場合は状況に合わせてアウトカムの再設定を行います。
一度設定したアウトカムはずらさないものと考えてしまいがちですが、より良いアウトカム設定が見つかれば大胆に変更することも大事だと考えています。

## 再リリース
「利用状況の深堀り」で得ることができた仮説を元に、改善方針を具体化して再度要件定義に落とし込み、開発後再リリースを行います。
この改善方針できちんと課題解決ができているか確認するために、再度アウトカムの観測・利用状況の深堀りを行うというフローを回します。

## まとめ
いかがでしたでしょうか。
私の開発組織でもまだ課題を解決しきるまでこのフローを回しきってはいないのですが、リリースした機能に全員で責任を持って改善していくことで、役割に限らずプロダクトの価値を考えるいいきっかけになっていると思います。
補足として、当然この改善フローを回すことが自体が目的ではないので、アウトカムの観測や利用状況を深堀りする中で「この機能では狙った価値が実現できない」となったり、「狙っている価値自体がプロダクトにとって不要」という結論になれば機能自体を無くす判断も大事だと思っています。（ちょっと悲しい気持ちにはなりますが。。。）
興味持っていただけた方は、試してみてはどうでしょうか！うちではこういう風に改善してるよーという意見なども大歓迎です。
正規表現苦手な人間が正規表現についての記事を書く　その1

# はじめに
仕事上正規表現を見かけることはありますが、自分から積極的に使うことはありませんでした。
理由の第1位は「読めないから」。
仕事では「.*」しか使ったことありません。

逃げ回っていたらついに正規表現をそこそこ使いそうなプロジェクトに入ってしまいました。
・・・よし、観念してちゃんと勉強しましょう。

# 正規表現とは
## そもそも正規表現とは何か
正規表現って文字列をマッチングさせるためのパターンっていう認識でした。
でも記事書く以上この1行だけだと微妙なので、ちゃんと調べましょう。

手っ取り早くWikipedia大先生にお聞きしました。
[Wikipedia](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE)
> もともと正規表現は形式言語理論において正規言語を表すための手段として導入された。形式言語理論では、形式言語が正規言語であることと正規表現によって表せることは同値である。

・・・え？もともとは違うの？？
とはいえ、今は文字列のマッチングパターンを表すものを「正規表現」と呼ぶようです。

正規言語が気になった方は下記の方の記事をどうぞ↓
[正規言語とは何か？](https://qiita.com/yoshii0110/items/3710aa0d77dde345cf39)

## 正規表現ライブラリ
正規表現と言っても、1つの方式というわけではなく、様々なライブラリがあるようです。
ここら辺はプログラム言語と似たような感じでしょうか。

Wikipediaでは代表的な例として下記が挙げられています。
| ライブラリ名 | 説明 |
|:-:|:-:|
|[PCRE](https://ja.wikipedia.org/wiki/Perl_Compatible_Regular_Expressions)|Perl 5形式の正規表現をC言語で実装したライブラリ<br>ApacheやPHPといった様々なソフトウェアに組み込まれている|
|[鬼車](https://ja.wikipedia.org/wiki/%E9%AC%BC%E8%BB%8A_(%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA))|正規表現オブジェクトごとに文字コードを指定できることが特徴のライブラリ<br>|
|[鬼雲](https://ja.wikipedia.org/wiki/%E9%AC%BC%E8%BB%8A_(%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA))|鬼車からフォークされたライブラリ|
|[re2](https://naoyat.hatenablog.jp/entry/2012/01/12/220812)|Googleが提供する正規表現ライブラリ<br>他の正規表現ライブラリとは異なりオートマトン理論を使用している|
|[GNU Regex](http://www.up-cat.net/GNU+regex,+regex2.dll.html)|GNU Cライブラリに標準ライブラリとして組み込まれている|
|[Boost.Regex](https://www.boost.org/doc/libs/1_79_0/libs/regex/doc/html/index.html)|C++用のライブラリ|

# その2へ続く
ここからが本番なのですが、長くなりそうなので次回にします！
正規表現の考え方に主観を置いて書く予定なので、こうご期待！！
簡単Elixirシリーズ  ~ quoteを理解しよう ~

# 簡単Elixirシリーズ 
## ~ quoteを理解しよう ~

この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」3日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。

今回は、quoteって何？ を理解する。という小ネタ（そう、この記事はサクッとがコンセプトW）

quoteとは何でしょうか？ 公式サイトの以下を見ればわかります。終了 シーン。。。
ですが、公式は英語だし、一応こちらにも僕なりの説明で書いておきます。

https://elixir-lang.org/getting-started/meta/quote-and-unquote.html

説明にASTの話しが出るので、ASTの解説を先にしておくと、[Wikiより](https://ja.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E6%A7%8B%E6%96%87%E6%9C%A8#:~:text=%E6%8A%BD%E8%B1%A1%E6%A7%8B%E6%96%87%E6%9C%A8%EF%BC%88%E8%8B%B1%3A%20abstract,%E6%9C%89%E5%90%91%E6%9C%A8%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)
> 通常の構文木（具象構文木あるいは解析木とも言う）から、言語の意味に関係ない情報を取り除き、意味に関係ある情報のみを取り出した（抽象した）木構造の木である

quoteとは
* Elixirは内部表現として抽象構文木(AST）を利用しています。
* quoteはElixirの式をASTで評価します。
* 評価は、1.関数名、2 番目はメタデータを含むキーワード リスト、3 番目は引数リスト の要素を持つ、タプルにします。
* ただし、タプル,リスト、アトム、数値リテラル、文字リテラル の5つだけはリテラルの値をそのまま返します。

quoteとは上記4つの性質を持つマクロです。

要素を返すシンプルなパターンを見てみましょう。
```elixir
quote do: sum(1,2,3)
{:sum, [], [1, 2, 3]}
````
メタデータを返すパターンを見てみましょう。

```elixir
quote do: def hello(), do: "hello"
{:def, [context: Elixir, import: Kernel],
 [{:hello, [context: Elixir], []}, [do: "hello"]]}
```

ようするに、quoteを利用することで、Elixirの内部構造を見ることができます。
プログラマーの為の識別子構成法 old/new 編

最近新しいチームにジョインした。
レビューで変数名の giftOld と giftNew を beforeGift, afterGift のように直して欲しいと指摘を受けた。
私の回答は『英語的には違和感を感じるのですが、チームの慣例ならば従いますね。』だった。

私も英語が得意ではないのだけれど、英語力も技術力の一部で上を目指すべきものの一つだと考えている。

そこで以前の値と以後の値に関する識別子の構成法について考えてみたい。


# beforeGift, afterGift の問題点
まず私が感じている beforeGift, afterGift の問題点だ。
私にはこう見える

| Identifier | 俺的日本語表現 |
| --- | --- |
| beforeGift | ギフトの前に、ギフトの前で |
| afterGift | ギフトの後に、ギフトの後で |

多分、チームの皆とは違う脳内表現に変換されていると思うが、恐らく自分の方が正確に英語を理解しているとは思う。

# old/new ペアの場合
new が予約語の言語が多いので old/new のペアは使いたくないと否定されてしまったのだけど、もし old と new を使うとこんなイメージかなと思う。

| Identifier | 俺的日本語表現 |
| --- | --- |
| giftOld | ギフト(古) |
| giftNew | ギフト(新) |
| oldGift | 古いギフト |
| newGift | 新しいギフト |

英語は原則として 形容詞 -> 名詞 の順番の言語なのでナチュラルなのは oldGift, newGift だと思うが、 new がインスタンス生成の予約語になっている言語は多く、そうでない言語でも newGift は Gift のインスタンス生成メソッドにしている慣例があるのでこの形になるのは避けたい気がする。
そこで半分屁理屈ではあるが、日本語が漢字で書くと立派な言葉っぽく響くように英語もラテン語っぽくすると立派感がでるのか、名詞 -> 形容詞 の順も例外的には許容される感じがする事を理由に後置をお勧めしたい。


# では before/after の後置は?
before/after を後置してみるのはどうだろうか?

| Identifier | 俺的日本語表現 |
| --- | --- |
| giftBefore | 〇〇前のギフト |
| giftAfter | 〇〇後のギフト |

意外といいかもしれない? before と after の後に、言うまでもない何かが略されている感じがする。
要するに gift before update とか gift after update みたいな表現の最後が省略されているように自分には思える。

チームのみんなと協議した際も『before と after は滅多に予約語になっているのを見た事がなくて識別子として使いやすい。』という話が出て、それについては自分も同意したのでこの形でいけたらいいかもしれない。

# 日本語脳に気をつける
これは識別子に使える対義表現を紹介する所で before/after を 前/後 のように紹介しているのもいけない気がする。
そう書かれると我々の日本語脳は自然と日本語に変換された後の表現で言葉を構成してしまうから。
正すとしたら前置詞 before/after が形容詞ではない事がわかりやすいように

| English word | 俺的日本語表現 |
| --- | --- |
| before X | Xの前に、Xの前で |
| after X | Xの後に、Xの後で |

こんな風に書くべきだと思う。

# 最後に
最初にも書いたけれど私も英語は別に得意じゃないししばしば間違えるのでここに書いてある事を鵜呑みにはしないで下さい。

確かに学生の頃に『to 不定詞は "こと", "べき", "ために" じゃ!!』って習った記憶があるのに、割と最近も toBlocking という間違った表現をエラーコードか何かに使いました。不定詞だから toBlock じゃなくちゃいけなかったよ (尚、先生の言い回しがなんか面白くて妙に記憶に定着してる件)。

それでは皆様 Enjoy programming!!
【フロントエンド】TypeScriptを使って欲しい

## はじめに

ずっと、RubyとかPHP、JavaScriptで生きてきたので、2~3年前は、TypeScriptってちょっとハードルが高いように感じてました。

でも、実際やってみるとそんなにハードルってないよ。
**メリットしかない**といっても過言ではないなと思います。

## TypeScriptってどんなもの？

TypeScriptのドキュメントには

> TypeScript is JavaScript with syntax for types.

と書かれてます。
TypeScriptってただのJavaScriptに型という拡張構文を追加したに過ぎないんですね。

## TypeScriptのメリット

JavaScriptはとても曖昧で自由な言語です。
これがJavaScriptの魅力であるというとそうなのですが、自由というのは無秩序を生みます。
そこに型を加えることでいいことが2つあります。

### 1. 不具合を減らせる

なんとなく想像できると思うので、説明は不要かと思います。
undefinedやnullが入る余地があるのか、Numberなのか、Stringなのか、Booleanなのか。
入りうる値に自由度がある状態だとif文一つ書くのが怖いんです。

型があることでちゃんと何を担保すべきで何を担保しなくてもいいのかがはっきりします。

### 2. コードリーディングが速くなる

自分がコードを書く時間より、そのコードが何年も残ってくることを考えると、読み人の方が多いんです。

```
書きやすさ < 読みやすさ
```

この正体は何なのか？後世へのドキュメントを書いているようなつもりで書くといいと思います。

### 3. コードを書くスピードが速くなる

記述量が増えるんだからスピードは遅くなるでしょ。
と思いがちですが、それは違います。

IDEの時代、優秀なIntellisenseやがTypeScriptを使うことで最強となります。

![](https://code.visualstudio.com/assets/docs/languages/typescript/overview.png)

これは確実に記述スピードを上げてくれます。

## TypeScriptのデメリットとそれに対しての答え

とはいえ、TypeScriptを使ったことによる弊害あるんでしょ？
と思われる方もいらっしゃるかと思います。

正直なところ、0ではないです。でも限りなく0に近いです。

### トランスパイル

いわゆる、TypeScriptを解釈し、古いJavaScriptに変換する処理ですね。
これが障壁になることが結構多いかと思います。

新しいツールを入れるのは導入ハードルがあるのはわかります。
ただ、2022年現在、かなり楽になっています。

`webpack × babel`というツールが主戦力かと思いますが、他にも`esbuild`や`webpack × swc`など選択肢の幅はどんどん広がっていますし、楽にもなっていっています。
メンテナンスフリーとはいきませんが、一度ある程度勉強してしまえば広がる世界はかなり広いです。

### 構文を覚える

TypeScriptの構文を覚えるのが大変でしょ？という疑問あると思います。
あるっちゃありますが、すぐになれますよ。

あくまでも型というものを提供しているだけなので、

```ts
type User = {
  name: string;
  email: string;
  age: number;
}
```

の意味がわかればほぼ大丈夫です。
あとは難しそうに見えるのはジェネリクスぐらいですかね？
これは、必要になった時に勉強すればいいと思います。
出てくるシーンは`共通化`したいシーンです。

関数を共通化したい時に、変数や返り値の型を動的にしたい時が出てくるんです。
その時に学べばいいので、このためだけに導入を見送るのは勿体無いと多います。

## まとめ

今回は、TypeScriptを使って欲しいなと思い、記事にしてみました。
ハードルに感じているのであれば、ハードルなんかよりメリットの方が大きいよというのを使ってもらえれば感じられると思います。
[auth0] Failed Exchange のエラー解決方法

結構手間取ったのでメモ残しておきます。
作業ログっぽい感じです。

## 背景
Next.jsでSPA構築しているときに、ログインは成功しているが`Failed Exchange` という謎のエラーが発生してしまい、クライアントで認証エラーとなる。

Logを見るとこんな状態
![スクリーンショット 2022-12-24 9.15.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182399/a118d3af-7806-c026-3162-23d9bbb6af5c.png)

ログインは成功しているが、次の操作で失敗している。
Failed Exchange の詳細を調べるとこの記事にたどり着いた。

https://auth0.com/docs/deploy-monitor/logs/log-event-type-codes

自分の場合は、Event Codeが`feccft`だったので、アクセストークンの交換に失敗したみたいでした。


## 解決方法
じゃあどうするの、って感じだったのですが以下にたどり着いた。

https://community.auth0.com/t/401-unauthorized-when-obtaining-token-in-authorization-code-grant/44685

- 該当アプリケーションの Settings > Application type を Regular Web Applicationに変更
- Token Endpoint Authentication Method を None に変更
- save
- Application Type を　Single Page Application　に変更
- save
- 治った

## 終わり
そのうち修正入るかもしれないです。
Less than 64MB of free space in temporary directory for shared memory files[WARNING:discardable_shared_memory_manager.cc(197)]

```bash
for i in `seq 3`; do google-chrome-stable --headless --disable-gpu --dump-dom https://domains.google.com/checkip & done
[1224/001635.332452:WARNING:discardable_shared_memory_manager.cc(197)] Less than 64MB of free space in temporary directory for shared memory files: 63
[1224/001635.334763:WARNING:discardable_shared_memory_manager.cc(197)] Less than 64MB of free space in temporary directory for shared memory files: 63
[1224/001635.358365:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
[1224/001635.362547:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/001635.369288:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/001635.377309:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/001635.436330:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
[1224/001635.496666:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
<html><head></head><body>35.229.216.43</body></html>
<html><head></head><body>35.229.216.43</body></html>
<html><head></head><body>35.229.216.43</body></html>
```

2,3個Chromeを同時に起動させると警告がでます。

# `--disable-dev-shm-usage`をつけると警告が出なくなりました

```bash
for i in `seq 3`; do google-chrome-stable --headless --disable-gpu --disable-dev-shm-usage --dump-dom https://domains.google.com/checkip & done
[1224/001818.233379:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/001818.237114:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/001818.257427:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/001818.270128:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
[1224/001818.289745:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
[1224/001818.351682:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
<html><head></head><body>35.229.216.43</body></html>
<html><head></head><body>35.229.216.43</body></html>
<html><head></head><body>35.229.216.43</body></html>
```



<details><summary>/dev/shmのサイズを大きくしてもいいかも</summary>

```bash
docker run -it --shm-size=1g
```
</details>

# 参考

https://stackoverflow.com/questions/56218242/headless-chromium-on-docker-fails
Google UXデザイン：デザインシステム（Google Material）

# はじめに

わたしが[Google UX Design Certificateで得られた素晴らしい体験][google]を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<details><summary>これまでの振り返り</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/f2187262-b8bf-f99d-7690-daa56c7093fc.jpeg" width="700">

</details>

# Google Materialとは

[前回、デザインシステムの定義や価値について、ご紹介しました。][ref1]

[ref1]: https://qiita.com/mapami/items/fc3a7ef40835e2fab7d4

Google Materialは、Googleが作成したパブリックなデザインシステムで、世界中のデザイナーや開発者がさまざまなモバイルアプリやWebサイトを作成するために使用しています。

https://m3.material.io/

このサイトには、さまざまなページがあり、探索することができます。デザインのページには、ナビゲーション、カラー、タイプシステムなどの使い方について、デザイナーのための基礎的なガイダンスがたくさんあります

# Materialサイト内の紹介

デザイナーがMaterial Designシステムを使用する主な理由の1つは、企業ブランドをよりよく反映させるためにカスタマイズできるからです。ベースラインのテーマをそのまま使うこともできますし、好きなだけカスタマイズして、自分の製品や会社に合ったデザインにすることもできます。

## Styles

スタイルとは、UIに独特のルック＆フィールを与える視覚的な側面です。スタイルは、Materialのテーマを変更することでカスタマイズできます。 次のカテゴリがあります。

- Color
    - カラーはスタイルを表現し、意味を伝えるために使われます。ダイナミックカラーでは、マテリアルは個人の色の好みと個人のニーズを第一に考え、体系的なカラーアプリケーションを提供します。
- Elevation
    - 標高とは、z軸に沿った2つの面間の相対的な距離のことです。
- Icons
    - アイコンは、一般的なアクションを表現するために使用することができます。Material Symbolsは、3種類のスタイルに7つのウェイトで作成された可変アイコンフォントのセットです。
- Motion
    - 動きを使って、表現力豊かで使い勝手の良いUIを実現する。
- Shape
    - シェイプスケールは容器の角のスタイルを定義するもので、四角から完全な円形まで様々な丸みを提供します。
- Typography
    - タイポグラフィーを使って、文章を読みやすく、美しく。Materialのデフォルトのタイプスケールには、さまざまなユースケースをサポートする、対照的で柔軟なスタイルが含まれています。

### Color

Colorページを見てみましょう。たとえば、カラーアクセントについて、学ぶことができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/869c46f9-d392-7f88-1c07-bb82cef4b100.png" width="600">


### Typography

Typographyページを見てみましょう。Figma用のデザインキットをダウンロードできます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/dc3fe624-cc88-5eb7-bae8-1f933fbe210e.png" width="600">

「Design kit（Figma）」をクリックすると、Figmaのコミュニティサイトが開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/0b2f711e-e545-4a23-0d89-c50f0b119e2f.png" width="600">

「Get a copy」をクリックすると、あなたのFigmaが開き、デザインキットがロードされます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b8264043-d69e-3fc1-ca0b-238ca48d8f2e.png" width="600">


:::note info
Figmaコミュニティとは、デザイナーや開発者がプラグイン・ファイルを公開できるスペースで、Figmaユーザーなら誰でもコミュニティに参加して、公開されているプラグインを見つけることができます。いろいろと探索すると面白いです。
:::

https://www.figma.com/community

# さいごに

デザインシステムとは何かを理解し、GoogleのMaterial Designライブラリの一部を探索したことで、デザインシステムが含むさまざまな要素について明確な考えを持つようになったはずです。

特に新人のうちは、デザインシステムを活用することで、デザインのベストプラクティスを理解し、自身のデザインワークの質を飛躍的に向上させることができます。
簡単Elixirシリーズ  ~ useを理解しよう① ~

# 簡単Elixirシリーズ 
## ~ useを理解しよう① ~

この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」10日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。

今回は、useって何？ を理解する。という小ネタ（そう、この記事はサクッとがコンセプトW）

まず、useの説明を探して読むとですね、小難しいんです。私にとって、非常に難しく書かれている。僕でもわかるように書いてくれ！という自分の心に従って簡単にしてみます。

まず公式の説明を見てみます。use は alias, require and import の章に書かれています。なぜ、ここにuseも加えてくれないんだ。探すのが大変じゃないか。と思うのは僕だけでしょうか。いえ、公式をディスってる訳ではありません。公式のドキュメントは素晴らしいです。

https://elixir-lang.org/getting-started/alias-require-and-import.html

説明の一部を日本語にしてみてみます。
> useは、指定されたモジュールを必要とし、そのモジュールで__using__/1、コールバックを呼び出してモジュールが現在のコンテキストにコードを挿入できるようにします。

ほんの一部抜き出しただけですが、他にも色々書かれてますので、ぜひ公式を読んでみてください。ただ、私にはこれらの説明を噛み砕いてもらわないとパッと頭に入ってこないんです。という心の声が聞こえてきます。

と言うことで、噛み砕いてみます。

useとは、
* use とは、コードを再利用するためのツールです。
* use とは、別のモジュールで定義された __using__ マクロを呼び出すものです。
* ```__using__``` マクロを使用すると、別で定義したモジュールにコードを挿入できる関数を作れます。

以上の事から
useとは、```__using__```マクロ定義したものを利用して、コードを再利用する為のツールです。

use はどんな時に役立つか？　それは、コードベースで抽象化しておきたい、再利用可能なパターンがある場合には最適です。
例えば、MVCなどのようなパターン化したフレームワークを作るときなどです。という事で、Phoenixフレームワークではuseが頻繁に活用されています。

少し長くなるので、サンプルコードを書いた例を [useを理解しよう②](https://qiita.com/Yoosuke/items/7a96011b43da024e76be) に記載します。
簡単Elixirシリーズ 〜useを理解しよう② 〜

この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」13日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。

今回は、useって何？ を理解する 第２弾。という小ネタ（そう、この記事はサクッとがコンセプトW）

前回の記事はこちら [簡単Elixirシリーズ 〜useを理解しよう① 〜](https://qiita.com/Yoosuke/items/19b8366b108808cb396d)

今回は、サンプルコードを使って、再利用可能なコードを作成してみましょう。

まずは、再利用可能なコードを```__using__```を利用して生成します。
次にquoteを使います。quoteはquote内で書かれた式を評価して返します。
quoteの中で関数を定義します。※ quoteについてはまた別で書きたいと思います。

```elixir
defmodule Use.Example do
  defmacro __using__(_) do
    quote do
      def hello(name), do: "hello #{name}"
    end
  end
end
```

これで、Use.Exampleの中で定義された ```hello("YOSUKE")``` を ```use```を使って別の
モジュールで呼び出して利用できるようになります。

```elixir
defmodule Yosuke do
    use Use.Example
end
```

使ってみましょう。

```
iex(1)> Yosuke.hello("YOSUKE")
"hello YOSUKE"
```
ということで、use を利用して再利用可能なコードを定義する事ができました。
コードベースでテンプレート化したい時は便利ですね。

ただし、これは濫用するとコードの視認性が悪くなる危険もあるので、濫用は避けましょう。
ContextResult::kTransientFailure: Failed to send GpuControl.CreateCommandBuffer.[ERROR:command_buffer_proxy_impl.cc(128)]

```bash
$ google-chrome-stable --headless --dump-dom https://domains.google.com/checkip
[1223/235232.594155:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1223/235232.630496:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
[1223/235232.643534:ERROR:command_buffer_proxy_impl.cc(128)] ContextResult::kTransientFailure: Failed to send GpuControl.CreateCommandBuffer.
<html><head></head><body>35.229.216.43</body></html>
```
2回に1回くらいでエラーが出ました

# `--disable-gpu`をつけることでエラーが出なくなりました
```bash
$ google-chrome-stable --headless --disable-gpu --dump-dom https://domains.google.com/checkip
[1223/235313.256896:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1223/235313.285411:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
<html><head></head><body>35.229.216.43</body></html>
```

# 参考

https://stackoverflow.com/questions/63719890/why-am-i-getting-a-failed-to-send-gpuchannelmsg-createcommandbuffer-error
[LaTeX] jlreq (book)の「付録 A」を「Appendix A」に変更する

`\documentclass[book]{jlreq}`としてjlreqで文章を書いている．
文書中に`\appendix`を書いておくと，それ以降の章見出しに「付録」がついて「付録 A ～」のような形になる．

この章見出しのラベル（付録 A）を変更したい．
そのためには，プリアンブルに次のように書けばよい：
```LaTeX
\jlreqsetup{
    appendix_heading = {
      chapter = {label_format = {Appendix~\thechapter .}}
    },
}
```
これを追加すると，`\appendix`以降は「Appendix A. ～」という形になる．

他のドキュメントクラスとは異なる設定方法だが，調べても記事などを見つけられず苦労したので，メモしておく．
ちなみに付録ではない普通の章見出しのラベル設定方法
```LaTeX
\ModifyHeading{chapter}{label_format = {\thechapter .}}
```
とも異なる設定方法なので，注意．
TCGAのデータをChAMPで読み込む

表題の作業をすごく苦労したので以下、簡単にまとめておきます。
ChAMPはDNAメチル化の著名な処理パッケージであり、TCGAにはChAMPで読み込めるIllumina 450Kアレイのデータが大量にあるにも拘わらず、何も情報がありませんでした。

# 前提
R環境での作業、illuminaioとChAMPはインストールされている。
https://www.bioconductor.org/packages/release/bioc/html/ChAMP.html
https://www.bioconductor.org/packages/release/bioc/html/illuminaio.html

# TCGAからDNA methylationをダウンロード
https://portal.gdc.cancer.gov/repository
で適当にファイルを選択します。なんでもいいのですが、
Data Categoryはdna methylationを
Data TypeはMasked Intensitiesを
選ぶようにしてください。
選んだら
https://www.pictbio.com/tips/3541.html
を参考にダウンロードしてください（上記記事はRNA-seqの場合ですが同じです）

# Sample_Sheet.csvの作成
ここでつまずきました。以下TCGAからダウンロードしたファイル名は
A_Grn.idat A_Red_idat B_Grn.idat B_Red.idat
などとなっているとします（Ａ、Ｂは長い意味不明のとても文字列になっているはずです）。
Ｒを起動し
```
> require(illuminaio)
> x <- readIDAT("A_Grn.idat")
> x$Barcode　
> x$Unknown$MostlyA
> x <- readIDAT("B_Grn.idat")
> x$Barcode
> x$Unknown$MostlyA
```

とやってください。idatファイルのファイル名を
```
file_x$Unknown$MostlyA_x$Barcode_Grn.idat
file_x$Unknown$MostlyA_x$Barcode_Red.idat
```
となる様に変更します。たとえば```x$Barcode```の出力が6285609049で```x$Unknown$MostlyA```の出力がR03C02なら
file_6285609049_R03C02_Grn.idat
file_6285609049_R03C02_Red.idat
になるようにすべてのファイルのファイル名を変更します。

次に
Sample_Sheet.csvを
Sample_Name,Sample_Group,Sentrix_ID,Sentrix_Position
T1,Tumor,6285609049,R03C02
T2,Tumor,9630789235,R06C02
みたいな形にします。つまり、Sentrix_IDの列には```x$Barcode```の値が、Sentrix_Positionの列には```x$Unknown$MostlyA```の出力が並ぶ、
みたいに作ります。

カレントディレクトリにはSample_Sheet.csvとidatファイル以外は存在しないようにしてください。

# 読み込み
```
>require(ChAMP)
>myLoad <- champ.load("./",arraytype="450K")
```
これだけですが膨大な時間を費やしたのにどこにも書かれていなかったので。

注１）最低でも２ペア（Sample_Sheet.csvの（ヘッダーを除いた）行数が２行）以上のデータを用意して下さい。１ペアだけだとエラーが出て読み込めないです。

注２）上記説明でfileの部分はなんでも構いませんし、またSample_Sheet.csvのファイル名も何でもいいです。また、Sample_Name,Sample_Groupの内容は勿論、問題によって変わります。
Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory

```bash
$ google-chrome-stable --headless --dump-dom https://domains.google.com/checkip
[1223/233857.828493:ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
```

# D-Busを起動するとなおります

```bash
sudo /etc/init.d/dbus start
```

```bash
sudo /etc/init.d/dbus status
```
未起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/8f590bd6-5e18-9827-03b4-eb9e2dfe0406.png)
起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/0ef6265d-d197-d24a-f18a-10fc51162fa6.png)

# 参考

https://astherier.com/blog/2020/08/install-google-chrome-on-wsl2/
ジェネリクスと合わせるにはデフォルト引数より省略可能引数

TypeScriptのジェネリクスをデフォルト引数と組み合わせようとしたら、型が合わない事態に陥ってしまいました。

## 事例

「何かしらの変換を行う機能はあるけど、省略すれば何も行わない」ような挙動をさせたい場所はちょくちょくあるかと思いますが、そのような状況でデフォルト引数を使ってハマってしまいました。

ここでは、1つの例として`processArray(arr, [func])`というような関数を考えてみます。`arr`には配列を、`func`には要素を変換する関数を必要なら渡す、`Array.from`の劣化コピーのような関数です。

## デフォルト引数で失敗

ここで、実装の手間を省くために、引数の関数が渡されないときは恒等関数（`x => x`）で処理させることにしたとします。デフォルト引数にこれを入れてTypeScriptにしてみます。

```ts
const identity = <T,>(x: T) => x;

const processArray = <T, U>(arr: readonly T[], func: (val: T) => U = identity): U[] => {
    return arr.map(func);
}
```

これはエラーになってしまいます（Type '<T>(x: T) => T' is not assignable to type '(val: T) => U'.
  Type 'T' is not assignable to type 'U'.
    'U' could be instantiated with an arbitrary type which could be unrelated to 'T'.）。tsc曰く、

```
Type '<T>(x: T) => T' is not assignable to type '(val: T) => U'.
  Type 'T' is not assignable to type 'U'.
    'U' could be instantiated with an arbitrary type which could be unrelated to 'T'.
```

とのことで、デフォルト引数が適用された場合について`U`の型を制御する、というのはできないようです。

## 省略可能な引数にしてみる

一方で、`func`を省略可能な引数で書く方法も考えられます。

```ts
const identity = <T,>(x: T) => x;

const processArray = <T, U = T>(arr: readonly T[], func?: (val: T) => U): U[] => {
    return arr.map((func || identity) as (val: T) => U);
}
```

こちらは成功します。

## 結論

ジェネリックな引数にデフォルト引数を設定しようとすると、うまく型が付かない。
Notion AI の全機能使ってみた (アルファ)

# 概要

Notion AIのアルファ版の使用許可がおりたので、実際に使ってみました。
本記事では、Notion AIの概要とユースケースをざっくり理解できます。

# 記事の対象者

- Notion AIの概要を知りたい人
- Notionを使いたいが何ができるのかよくわからない人
- 新しいもの好きなひと

# 記事の目標

- Noiton AIの概要を知る
- Notionマスターに一歩近づく

# Notion AI とは

_Notion AIは、AI技術を使用して、よりプロダクティブかつ効率的な作業を行うためのツールです。Noiton AIを使用すると、作業時間を短縮することができます。また、Noiton AIは、入力されたデータを分析して、自動的にタスクを完了させるので、タスクの分析や計画を行う時間を節約することができます。_

なお、Notion AIは、OpenAI社が開発したGPT-3という自然言語処理モデルという技術を使用しています。
現状、Notion AIが提供する機能は、以下の5つです。

1. 既存のコンテンツを要約
2. ブレインストーミング
3. 下書きを書く・文章の続きを書く
4. スペルや文法の修正
5. コンテンツを翻訳する

# Notion AIの各機能詳細
## 1. 既存のコンテンツを要約

コンテンツの要約が可能です。
あなたが何かを書いた後、NotionのAIは高レベルの要約でキーポイントを抽出することができます。研究計画書や製品仕様書、会議のメモを素早くまとめるのに便利です。

### 使ってみた
本記事を、Notion AIご本人に要約してもらいました。
注意点と参考URLが入ってませんが、ほぼほぼ合ってます。
注意点が省略されているのは、ユーザを増やすための自己防衛的ななにかでしょうか。

![](https://storage.googleapis.com/zenn-user-upload/837cd5628389-20221223.png)


## 2. ブレインストーミング

ブレインストーミングをしてもらうことが可能です。
必要な時にひらめきが生まれることもありますが、執筆が滞っているときは、Notion AIに起業のための名前のリストや、今度のパーティの衣装を生成してもらうことができます。

### 使ってみた

試しに、Notion AIに今日の晩ごはんを聞いてみました。
ガッツリ系から、ヘルシーな料理まで網羅されているような気がします。

![](https://storage.googleapis.com/zenn-user-upload/13744a92fc35-20221223.png)
![](https://storage.googleapis.com/zenn-user-upload/9f000d5c9158-20221223.png)

## 3. 下書きを書く・続きを書く

ブログの記事、インスタグラムのキャプション、メール、詩など、NotionのAIは何百万もの例文から、あなたの文章の出発点となるものを作り出します。
素晴らしい文章もあれば、そうでない文章もあります。編集して、あなたらしい完璧な最終稿に仕上げましょう。

![](https://storage.googleapis.com/zenn-user-upload/1532c98f9975-20221223.png)


### 使ってみた

実際に使ってみました。
本記事の項目「Notion AIとは」の部分は、実はNotion AIご本人に書いてもらっていました。
私が記述したのは「Notion AIとは」までで、それ以降はご本人です。
自分のことを説明するだけあって精度は高いんじゃないでしょうか。
![](https://storage.googleapis.com/zenn-user-upload/fd7571593a58-20221223.png)


## 4. スペルや文法の修正

Notion AIには、スペルチェックと文法修正機能が組み込まれています。
もう誤字脱字やカンマの打ち間違いに悩まされることはありません。

### 使ってみた

朝の挨拶のスペルチェックをしてみました。
こちらもかなり精度高いです。

![](https://storage.googleapis.com/zenn-user-upload/6446784b1365-20221223.png)

「おはこんばんにちわ」の原型は「おはようございます」らしいです。
整合文字数で判定しているわけでわないんですね。

![](https://storage.googleapis.com/zenn-user-upload/627194b76e3b-20221223.png)


## 5. コンテンツを翻訳する

書いたコンテンツを簡単に他の言語に変換できます。
日本語のみならず14言語に対応しています。

### 使ってみた

試しに、英語版「兎と亀」を翻訳してみました。
翻訳文は少々見づらいですが、内容自体はあらかた合ってます。

>_「天才であっても、怠慢な態度は人を滅ぼします。一方、天才でなくても、真剣さと忍耐力で天才を破ることができます。」_

ありがとう Notion AI 。胸に刻んでおきます。

![](https://storage.googleapis.com/zenn-user-upload/5022d421e59e-20221223.png)


# 注意点
- Notion AI は誤った情報を出力する可能性があります。
- Notion AI は、プロンプトが表示されたときに有害な内容を出力する可能性があります。
- Notion AI は、過去6～12ヶ月に起こった最近の出来事を知らず、不正確な結果や古い結果を出力する可能性があります。
- Notion AI バイアスを含んでおり、偏った回答を出力する可能性があります。AIのバイアスについて詳しくはこちら→[Learn more about AI bias](https://sitn.hms.harvard.edu/flash/2020/racial-discrimination-in-face-recognition-technology/)

# 終わりに

今回は Notion AI のアルファ版を実際に使ってみました。
どれも高精度でびっくりしました。
次のリンクからwaiting linsに登録できるので、皆さんもぜひ使ってみて下さい。→[Notion AI waiting lint申請](https://www.notion.so/ja-jp/product/ai)


# 参考

https://www.notion.so/help/guides/using-notion-ai

https://www.notion.so/ja-jp/product/ai
ノーコードでChatGPTとりんなにAI同士の会話をさせてみた

最近流行っているOpenAIの[ChatGPT](https://chat.openai.com/)、これまでのAIに比べて自然な会話ができて面白いですよね。

そんな時に @youtoy さんがenebularを使ってノーコードでAPI経由のChatGPTを使う方法を記事にしていたのを見つけました。

https://qiita.com/youtoy/items/0afc3b97a1e1e057cf40

他のAIと会話させられないかなーと思いついて探していると、日本の会話AIの「[りんな](https://www.rinna.jp/)」をenebularで使う方法を見つけたので、２つのAIを会話させてみることにしました。

https://blog.enebular.com/api/try-rinna-api-with-enebular/

フロート実際の会話の様子はこんな感じです。

https://twitter.com/yskmjp/status/1605429996348022785

以下の流れで処理をさせています。

1. inject Node からお題を dashboard にお題を出力
1. ChatGPT Node でAPIからお題に対する回答を取得、dashboardに出力
1. 回答を取り出して、りんなAPIの仕様に合わせてJSONに加工
1. りんなAPI　に ChatGPT　の回答を入力して回答を取得、dashboardに出力
1. 以下繰り返し

ハマりポイントとしてはOpenAIのAPIは有料のためクレジットカード登録が必要となります。初期アカウント作成時に$18のクレジットをもらえますが、期限があるので切れている場合はエラーとなります。ChatGPT　NodeではAPIのエラー応答が表示されないため、処理中から進まない場合は以下を参考にCurlでAPIを叩いてエラーメッセージを見ると何が問題なのかわかると思います。

https://beta.openai.com/docs/api-reference/completions/create

```
curl -s https://api.openai.com/v1/completions -H "Content-Type: application/json" -H "Authorization: Bearer YOUR_API_KEY" -d '{"model": "text-davinci-003", "prompt": "Say this is a test", "temperature": 0, "max_tokens": 7}'
```

何度か試すと、こんな感じに他の話題に移行して、より自然な会話になったりして面白いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149785/1d53131c-c680-bbb4-96cd-63b1e2babfaf.png)

他のAIもノーコードで会話させたりすると楽しそうなので今後も試してみたいと思います！
公開したStripe Appsアプリのインストールや削除などを分析する方法と、情報の取得方法



この記事は、[Stripe Apps を25日間紹介し続ける Advent Calendar 2022](https://qiita.com/advent-calendar/2022/stripe-apps) 24日目の記事です。

![スクリーンショット 2022-11-24 17.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e0261865-0418-daa2-423a-5f4d70558b1b.png)

## 公開したアプリの利用状況を、ダッシュボードで確認する

アプリをマーケットプレイスに公開すると、「どれくらい使われているのか」が知りたくなります。

もっとも簡単な方法は、ダッシュボードで情報を見ることです。

ダッシュボードのアプリ詳細画面では、「いつ、どのアカウントがアプリをインストールしたか」を見ることができます。

![スクリーンショット 2022-12-21 18.26.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/06d7606d-0646-3664-4871-4979664481d7.png)

この表を見ることで、どれくらいの頻度でアプリがインストールされているかを知ることができます。

## Stripe CLIまたはAPIで、データを取得する

分析やレポートのために、より詳細な情報を得たい場合は、CLIまたはAPIを利用しましょう。

Stripe CLIでは、`stripe accounts list`を利用します。

`jq`などのコマンドを組み合わせると、「どの国でインストールされているか」を調べることができます。

```bash
$ stripe accounts list --limit 100 | jq ".data[].country" -r | sort | uniq -c | sort -nr
  40 US
   9 GB
   8 CA
   3 IN
   3 DE
   1 TH
   1 RO
   1 PL
   1 NL
   1 MY
   1 MX
   1 FR
   1 ES
   1 EE
   1 CH
   1 BR
   1 BG
   1 AU
   1 AE
```

`stripe accounts list`のコマンド・APIでは、「今インストールされているアカウントのリスト」のみ取得できます。

「アンインストールされたこと」を分析したい場合には、次に紹介するWebhookを利用しましょう。

## Webhookで、インストール・アンインストールのイベントを受け取る

アプリを公開するアカウントで、インストールやアンインストールのWebhookイベントを受け取ることができます。

この場合、アプリの設定を変更して、イベントを取得する権限を追加する必要があります。

```bash
# Webhookイベントを読むための権限設定
$ stripe apps grant permission "event_read" "Allows reading event data from users who have installed the app"
```

Webhookのイベントは、次の２つを利用しましょう。

- インストールされた: `account.application.authorized`
- アンインストールされた: `account.application.deauthorized`

イベントのテストには、Stripe CLIを利用します。

```bash
$ stripe listen --forward-connect-to localhost:{{PORT}}/webhook

$ stripe trigger --stripe-account account.application.deauthorized
```

非公開（プライベート）アプリでのテスト方法などは、ドキュメントをご確認ください。

https://stripe.com/docs/stripe-apps/metrics-analytics?public-private=public

## ローコードで分析するヒント

StripeのWebhookイベントをローコードに処理する方法として、AWSが便利です。

AWSのEventBridge QuickStartと、StepFunctionsを利用することで、プログラムコードを書かずにイベントをAWS上で処理できます。

両方のサービスを利用したワークショップ記事をZennに公開していますので、こちらもぜひお試しください。

https://zenn.dev/stripe/books/workshop-amazon-eventbridge-no-code


## Documents

https://stripe.com/docs/stripe-apps/reference/permissions

https://stripe.com/docs/stripe-apps/metrics-analytics

https://stripe.com/docs/api/accounts/list?lang=cli

## Stripe Appsひとりアドベントカレンダー 2022

今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。

そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。

https://qiita.com/advent-calendar/2022/stripe-apps

ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。
GraphQLへの入出力、エラー（Union、InputType）

[Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022](https://qiita.com/advent-calendar/2022/shwld)
の**24日目**。[株式会社mofmof](https://www.mof-mof.co.jp/)に生息している[shwld](https://twitter.com/shwld)です。

前日は[Next.jsとgraphile-workerをRailwayにデプロイする](https://qiita.com/shwld/items/aa7cf535444ad3ad693a)について書きました
# GraphQLのUnionやInputType
[Either型](https://qiita.com/shwld/items/f5f192ace0702d9156e2)の記事で書きましたが、mutationの戻り値は、Unionになっています。

例えば、`create account`のmutationはこんな感じ

```ts
export type CreateAccountMutationResult =
  | CreateAccountSuccessResult
  | InternalErrorResult
  | InvalidArgumentsResult
  | UnauthorizedResult;
```

GraphQL的には

```graphql
union CreateAccountMutationResult =
    CreateAccountSuccessResult
  | InvalidArgumentsResult
  | UnauthorizedResult
  | InternalErrorResult
```

こう。

フロントエンドでこのmutationを叩く際には

```ts
mutation AccountCreateButton_CreateAccount($input: CreateAccountInput!) {
  createAccount(input: $input) {
    ... on CreateAccountSuccessResult {
      result {
        ...AccountList_Result
      }
    }
  }
}
```

こんな感じになります。
Reactで、エラー処理をする際には正常に終了した結果を取得し型を [ts-pattern](https://github.com/gvergnaud/ts-pattern)などで分岐して処理する必要があります。

## エラー処理どうするか問題
GraphQLでエラーを扱う際にどう扱うか問題があります。

GraphQLにはmutationやqueryの結果にerrorsというfieldが生えているので、そこを拡張して返してあげるという手もあります。
しかし今回はそれを採用しませんでした。

理由としてはエラーの型付けです。errorsの拡張は型をつけられず、フロントから扱いづらいです。
unionで返しておくことでどんな結果になるのかを型レベルで知ることができ、よりTypeScriptフレンドリーと言えます。

多少型をチェックするのが手間にはなりますが上記メリットは大きいです。
また、サーバーサイドの実装自体も、どんなエラーが発生するかを型レベルで知ることができる作りにしているため、フロントからもその恩恵を受けられ、一貫性があります。

また、本当?の例外（事前にパターン定義されていないエラー）はerrors fieldの拡張を使うという設計方針もありますが、サーバーサイドの実装自体が例外を発生させない作りになっているため、今回は errors fieldはmutationからは全く利用していません（GraphQlの基盤自体が起こすエラーではerrors fieldを使っています）

# Input type
mutationのargumentは`input`という名前に統一しています。

```graphql
input CreateAccountInput {
  id: ID!
  name: String!
}
type Mutation {
  createAccount(input: CreateAccountInput!): CreateAccountMutationResult!
}
```

理由は単純にargumentsの変更に強いからです。
このルールを浸透させるため、[PLOP](https://plopjs.com/)を使って.graphqlファイルのテンプレートも生成しています。

# 次回予告
明日は、[総まとめ](https://qiita.com/shwld/items/c6eaf3d1de767b4d6028)します。
MRTK + Azure + Oculus で音声認識を頑張る②

※この記事は以下の記事の続きとなります。
[MRTK + Azure + Oculus で音声認識を頑張る①](https://qiita.com/hidaka2022/items/bc9e713c5b8bf7bf47c3)


また、ここからは以下の記事を参考にUnityを構築していきます。

https://teratail.com/questions/298049

## 最低限の環境構築
ここは本題とは離れているので、最低限の部分は割愛します。
・MRTK3 の導入　※全部入れると重くなるので最低限をDLしてください
・ProjectSettingsの各種設定

多分必要？と思われる設定としては、
Audioの設定にある「Spatializer Plugin」「Ambisonic Decoder Plugin」に
「Oculus」を追加することかと思われます。

![dd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/0f53502f-decf-dac0-6dc0-1f8870a4b212.png)
この設定は、OpenXRを使う場合であってもXRインテグレーションで「OpenXR」ではなく
一度「Oculus」にチェックを入れてあげることで設定できるようになります。
設定し終わったら「OpenXR」に戻しておきます。（ここはお好みでしょうか）

## AzureSDKをDL
先ほどの記事の追加内容に記載のあった、AzureSDKをDLして適用します。

>2, Microsoft.CognitiveServices.Speech.xxx.unitypackage をDLしてインポートする
>https://aka.ms/csspeech/unitypackage

## 「HelloWorld.cs」の書き換えコードを追加
自分は別のファイルを新しく作りました。
一旦コピペして、MRTKと今の環境に合わせるため
以下の部分を修正します。

1.usingの追加

```cs
using TMPro;
using Microsoft.MixedReality.Toolkit.UX;
```

2.格納するTextとボタン設定の変更

```cs
    public TextMeshProUGUI outputText;
    [SerializeField] PressableButton startRecoButton;
```

3.ボタンの設定を変えたことによるエラー（二箇所）の修正

```cs
//121行目あたり
startRecoButton.OnClicked.AddListener(ButtonClick);

//145行目あたり
//こちらは合っているか不明ですが、動いているので・・・ごにょ
startRecoButton.enabled = !waitingForReco && micPermissionGranted;
```

## csをObjに貼り付けて実装する
今回は「NearMenuBase」を利用しました。
![gg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/a4374f32-cce3-056f-98c0-9591cfaf39f5.png)

「Subscription Key」は、Azureの該当プロジェクトにあるキーをコピーして使います。
「サブスクリプション ID」ではないのでご注意ください。
![hh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/03101f5b-196d-3e81-5603-33fdd77f11de.png)


## apkにしたのち、実機で動作を確認する
Linkでチェックしたのですが、音声がうまく認識できませんでした。
（それを理解するのに1日くらいかかってました）

・実機でないと認識しないこと
・ボタンを離した後に音声認識されること

この2点にご注意ください。

https://youtube.com/shorts/FWAklKgMeOo?feature=share


## 最後に
まとめると2回で終わったわけですが、10月ごろから悩みながら
ようやく実装ができるようになりました。
（12月前半はまったく触れていませんでしたが）

Androidへの処理も考慮しなければならないという、難しい点が
SDKを流用すれば簡単にできる点は素敵だなと思います。

何より、同じ悩みを抱えていた先達、回答いただいた先達に
心からの感謝を。
簡単Elixirシリーズ  ~ unless を理解しよう~ 

# 簡単Elixirシリーズ 
## ~ unless を理解しよう ~

この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」9日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。

今回は、制御構造でifなどは理解できるけど、unlessって何？ を理解する。という小ネタ（そう、この記事はサクッとがコンセプトW）

## unlessの前にifを理解しよう。
unlessを知る前にifを理解しよう。

ifは条件式の判定が「正しい（true)」場合にendまでの処理を実行する制御構造です。
条件式の結果が「誤り（false)」の場合は何も処理をしません。

```elixir
iex> x = 7
7
iex> if x < 10 do
...> "small"
...> end
"small"
```

## unlessを理解しよう。

unlessは条件式の判定がfalseの場合にendまでの処理を実行する制御構造です。
条件式の結果がtrueの場合は何も処理をしません。

```elixir
iex> x=11
11
iex> unless x < 10 do
...>   "Big"
...> end
"Big"
iex(3)> x = 1           
1
iex(4)> unless x < 10 do
...(4)> "Big"           
...(4)> end             
nil
```

ちなみに、ifにもunlessにも else 構文があります。

```elixir
iex(4)> x = 1
1
iex(5)> unless x < 10 do
...(5)> "Big"
...(5)> else
...(5)> "small"
...(5)> end
"small"
```

大雑把に言うと、ifの逆と覚えておけばOK？
paiza.ioでelixir その156

# 概要
paiza.ioでelixirやってみた。
websocketの取得をnode-redにお願いしてみた。

# node-redでwebsocketをブリッヂする。

https://qiita.com/ohisama@github/items/9d10f9cba8d53afe4242

# サンプルコード

```
:inets.start
:ssl.start


{:ok, {_, _, body}} = :httpc.request(["https://ev2-prod-node-red-42cd2ba1-581.herokuapp.com/pub"])
body
body = IO.iodata_to_binary(body)
|> IO.puts 


```

# 成果物

https://paiza.io/projects/Aln80Eu-HcpQMFg4v4ivTw?language=elixir


以上。
[Swift] 参照渡しを最初から理解する(inout, mutable)

Swift歴1年くらいの大学３年生です。Qiita初記事です。

最近、[Heart of Swift](https://heart-of-swift.github.io/)を読んでいるのですが、これまでよくわからなかったinout引数の理解が深まったので、アウトプットも含めて記事を書いてみます。もし間違えてるところがあったらご指摘いただけると嬉しいです。

# [前提]Swiftは値型中心
参照渡しを説明する際に、前提で必要となることを説明をします。
Swiftは基本的に値型中心の言語で、それがSwiftを初心者でも扱いやすい安全性の高い言語にしています。
Swiftの中で参照型は、classとクロージャーくらいで、
+ Int, Float, Double, Bool
+ String, Character
+ Array, Dictionary, Set
+ Optional, Result

などSwiftの標準ライブラリの多くは値型です。

しかし正直、値型は安全性を高めると聞いてもよくわからないです。
なぜ値型はプログラムをプログラマーにとって安全にするのでしょうか？

実際に、例を挙げて考えていきます。
Dogクラスを作って、犬の名前を変えてあげることを考えてみます。ただその前に、作ったインスタンスを複製してそちらの変更を行なってみます。するとどうでしょう。どちらの犬の名前もぽち丸になってしまってる。。。
これが参照型の持つ危うさです。参照型には予期せぬ間にこのような変更が行われない可能性が潜んでいます。
```swift
class Dog {
  var name = "ぽち"
}

var animal = Animal()
var duplicatedAnimal = animal
duplicatedAnimal.name = "ぽち丸"
print(duplicatedAnimal.name) /// ぽち丸
print(animal.name) /// ぽち丸　

```
ではなぜ、変更していないインスタンスに前で変更が及んでしまうのでしょうか？
答えは、この時の変数animalやduplicatedAnimalが保持しているのはインスタンス自体ではなく、インスタンスの参照のアドレスだからです。

一方値型はどうでしょうか？

```swift
struct Dog {
var name = "ぽち"
}

var animal = Animal()
var duplicatedAnimal = animal
duplicatedAnimal.name = "ぽち丸"
print(duplicatedAnimal.name) /// ぽち丸
print(animal.name) /// ぽち　

```
こちらの場合は、値の複製は行われず、animalのnameはぽちのままになっています。このように値型はより直感的で予期せぬ値の変更を防ぐことができます。
なぜこのようなことが起きるか、メモリーの持たせ方の部分はまた別機会に記事を書きます！

# 参照渡しをしたくなる時

参照渡しとはズバリ参照を渡すことです。そのまま過ぎるのでもう少し深掘ります。

以下のコードはSwiftのグロバールスコープ中のanimalArrayを関数内で別の変数に複製して、そちらに変更を加えたものです。それぞれの配列の状態を最後に確認してみると、
changesArrayElementの結果は変更された配列["monkey", "cat", "elephant"]であることがわかります。しかし、複製された配列animalsArrayは、["dog", "cat", "elephant", "lion"]のままです。なぜこうなるのかというと、ArrayはSwiftにおいて値型であるため、関数に渡した際に複製されます。なので、関数の引数で渡ってきたものに変更を加えたとしても、元の渡した関数に変更は与えられません。

```swift
var animalsArray = ["dog", "cat", "elephant", "lion"]

func changesArrayElement(animalsArray: [String]) -> [String] {
  animalsArray[0] = "monkey"
  animalsArray.removeLast()

  // 返り値としてduplicatedAnimalsArrayを返す
  return animalsArray
}

// デバッグしてみると、
print(changesAnimalsArray(animalsArray: animalsArray)) /// この配列の結果は["monkey", "cat", "elephant"]になる。
print(animalsArray) /// この結果は["dog", "cat", "elephant", "lion"]のままになる。

```
上記のような場合に、元の配列に変更を与えるためにはどうするべきでしょうか。
そうです。参照を渡してあげれば良いのです。参照はアドレスをコピーして、ヒープ上にある同じ配列を操作するので、これはうまくいきそうです。

# inout引数とは
具体的に参照を渡す際に、現れてくるのがinout引数です。以下のコードを見てみてください。

```swift
var animalsArray = ["dog", "cat", "elephant", "lion"]

func changesArrayElement(animalsArray: inout [String]) -> [String] {
  animalsArray[0] = "monkey"
  animalsArray.removeLast()

  // 返り値としてduplicatedAnimalsArrayを返す
  return animalsArray
}

// デバッグしてみると、
print(changesAnimalsArray(animalsArray: &animalsArray) /// この配列の結果は["monkey", "cat", "elephant"]になる。
print(animalsArray) /// この結果は["dog", "cat", "elephant", "lion"]のままになる。

```

これで無事に、元の関数に変更を加えることができました。
少し不自然な書き方に思われるかもしれませんが、これは値型であるSwiftのデータ整合性を壊さざるおえない仕様なので、そのように安全な設計がされています。
【Reactor】特定の条件の時だけRetryする


# やり方
`Retry`にはリトライの条件を指定する`filter`を付けることができます。
これによって特定条件の時だけ`Retry`する処理が書けます。

例えば、`MyException`の時だけリトライしたい場合は以下のように書くことができます。

```java
/* 略 */
.retryWhen(Retry.fixedDelay(3, Duration.ofSeconds(1)).filter((it) -> it instanceof MyException));
```

https://projectreactor.io/docs/core/release/api/reactor/util/retry/RetryBackoffSpec.html#filter-java.util.function.Predicate-


# 参考にさせて頂いたページ
https://stackoverflow.com/a/58521980/13709749
Basic認証について

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はBasic認証について説明します！

## Basic認証とは
Web上で利用できる認証システムの一つで、IDとpasswordを入力するだけで認証を行います。
ログイン情報を利用する際に、Base64という64種類のみの文字コードでやりとりするため、簡易的な通信になります。
そのため、セキュリティ的には弱い認証方式です。

### メリット
* 簡単に設定できる
    * ファイルを置くだけ

### デメリット
* セキュリティが弱い
    * ログイン情報が平文のため、httpの場合、生のログイン情報が通信されてしまう。
    * Base64という64種類の文字を
* サーバーを跨いで認証できない
* クローラーの巡回ができない
    * SEOとしての効果は期待できない

下記のような用途で使うのがおすすめです。
* クライアントに確認してもらう公開目前のサイト
* 仲間内メンバーなどでの簡易的な会員サイト
* 見られても問題がない、できれば見せたくないページ


### 実装例
認証をかけたいディレクトリに.htaccessファイルと.htpasswdファイルを作成します。

AuthType: 認証方式を指定します。
AuthName: 認証画面の中で表示される文字列です。
AuthUserFile: パスワードとIDを明記したファイルの格納場所を記述します。
require: 認証範囲。valid-userで全てのユーザーに認証を表示させる。

```.htaccess
AuthUserFile /home/hogehoge/.htpasswd
AuthName "input ID and Password"
AuthType Basic
require valid-user
```

IDとパスワードのセットで記載します。
複数行記載すれば、複数のID,passwordを使用可能です。

```.htpasswd
userId:password
```
passwordには[暗号化ツール](https://www.luft.co.jp/cgi/htpasswd.php)を使用して、入力します。

 
# まとめ
Basic認証について、簡単に説明をしました！
使い所を見極めて、正しく使用しましょう！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

## 参考文献
[Email Security Blog CyberSolutions](https://www.cybersolutions.co.jp/blog/basic/#:~:text=Basic%E8%AA%8D%E8%A8%BC%E3%81%A8%E3%81%AFWeb,%E3%82%89%E3%82%8C%E3%82%8B%E7%82%B9%E3%81%8C%E7%89%B9%E5%BE%B4%E3%81%A7%E3%81%99%E3%80%82)
イメージで見るReactのデータ取得、fetch方法の変遷

# データフェッチの変遷

## バケツリレー時代 （距離：３ ）
データベース＞親＞子＞孫（３）

ReactのClass時代には、
Reactが表示するデータを取得するのはデータベースからデータを取得した後は・・
最初はバケツリレーで
親コンポーネントが受け取り、
子コンポーネントが受け取り、
孫コンポーネントが受け取りました。
これはネストが深くなるほど複雑化していき、嫌われていたようです。

:::note warn
※これらのイメージは、あくまでも筆者の主観です。
:::
![データフェッチの変遷01.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44761/c062f546-a94b-eafc-1a34-695fcc803a52.jpeg)

## Reduxの登場 （距離：２）
データベース＞グローバルストア＞孫（２）
グローバルデータストアという考えが取り入れられ、
孫コンポーネントはグローバルデータストアからデータを取得しました。
しかし、Reduxの最初期は設定が複雑で一部嫌われていたようです、
その後、Redux ToolKit (RTK)の登場によりReduxの冗長性が排除され簡素化されていきました。

## Hooks時代の到来 （距離：２）
データベース＞親＞孫（２）

Reactの16.8からHooksが登場します。
Hooksを利用することで親コンポーネントから孫コンポーネントへ直接データを渡すことが出来るようになりました。

## State管理 群雄割拠の時代に突入 fetch関数 （距離：１）
Reduxの1強時代が終わり、Recoil, SWR, TanStack Query(React Query),
Jotai, Zustand等が出現してきました。

![データフェッチの変遷02.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44761/43558919-b3cc-a83f-212e-8579156bde87.jpeg)

Reactにfetch関数が呼び出せるようになりました、これでAPIを通してデータベースから直接データが取得できるようになりました。（クライアント側からです。）

親コンポーネントを飛び越えてデータベースにAPIを経由して直接データを取得できるようになりました。

### ハイドレーションとは？
ハイドレーションとは**合体**という意味だと考えています。
クライアント側でサーバーから送られてきたHTMLファイルとJavascriptファイルを合わせる作業になります。

クライアント側でJavascriptがデータフェッチを行い、そのデータをHTMLファイルに入力して一つのコンポーネントを作成します。

![データフェッチの変遷03.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44761/bc5eb50f-c67e-622c-70b3-c1b8ec16faf5.jpeg)

## サーバーコンポーネントの出現！（距離：０）
データベース＝サーバーコンポーネント（０）

コンポーネントの最初のイメージは、ブラウザ画面の一部をレゴブロックのように組み合わせる１つのパーツというイメージでした。
それをサーバーコンポーネント？？と言われてもピンときませんでしたが・・・

### サーバーコンポーネントとは？
シンプルに言うと、サーバー側でデータを取得してコンポーネントを完成させてから、その完成部品をクライアントに送る方式になります。

Next13 ServerComponents ＆ ClientComponents時代がもうすぐ到来します。
※appディレクトリは現在ベータバージョン（2022年12月24日）

サーバー側でデータベースからデータを取得できるのなら最初から取得して、不要なデータをクライアント側に送ることをせず軽量化することでより高速になることを目的としています。
もちろんクライアント側からデータを取得する従来の方式も使えます。

### 感想
Next13 ServerComponentsとClientComponentsをみるに、
クライアント側という事を意思表示するためにファイルの冒頭に
`"use client"`
を書くようになっているので、Next13からはフロントエンドではなく、バックエンドの役割を強く意識するように作られていくようです。
BFF（Backends For Frontends）よりも、もっとサーバー寄りなイメージになっていくのではないでしょうか。

# 前回記事
Web開発ツール スター数調査（テストツール、状態管理、GraphQL） - Qiita
https://qiita.com/masakinihirota/items/c963f4d13b40bfb198eb

# おまけ
## tRPC時代へ（距離：１）
データベース＞孫（１）

![データフェッチの変遷04.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44761/88e43e49-070c-ed3d-aba9-8f3de3964b80.jpeg)

tRPCはTypescriptを利用して、API通信を意識せずに、 ***普通の関数***のようにデータベースからデータを取得できます。
その際にデータ検査にzodライブラリを使用します。

※これらの図はFigmaで作成しました。
AWSに入門した時の話

# 内容

現在AWSには12個の資格があります。
現在までに全ての資格を取得しましたが、AWSを学習し始めた時の話について記載させて頂きます。

# 学習し始め

AWSを学習するにあたって、様々なソースがあります。
下記、色々と悩んだり、サラッっと検討した結果、Udemyの講座を受講しました。

* AWSアカウント作成してEC2は作成してみたけど次何やればいいんだっけ?
* BlackBeltは良い資料だけどいきなり読むのは難しい
* Blogなど色々情報があるけど、「これをやればAWSの基礎を理解出来る」というもので学習したい
* 参考書で勉強するのも良いけど思い立ったら今すぐ勉強を開始したい

# 受講した講座
**【SAA-C03版】これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座**

https://www.udemy.com/course/aws-associate/

この講座をお勧めしたい理由は下記3点です。

## AWSを最初から教えてくれる
まず、AWSアカウントを作成したら、下記のような最初に設定すべき項目がありますが、そのあたりも**DAY1対応の実施**という箇所で説明してくれます。

* RootアカウントにMFAの設定
* CloudTrailの証跡設定
* 請求アラートの設定
* IAMユーザの作成　など

## AWSを理解する上でのITの基礎の説明も入っている
AWSを理解する上ではITの基本的なスキルが前提になってくると思います。例えばEC2を理解するには「そもそもサーバ仮想化ってなんだっけ?」、Route53を理解するには「DNSってなんだっけ?」というようなことが必要になってきますが、そのあたりの説明もあるため、安心して学習を進めることが出来ます。


## AWS主要サービスをハンズオンで学習出来る
学習に一番必要なのは手を動かすことだと思います。この講座は広範囲のサービスがハンズオンに入っています。結構ボリュームはありますが、これを終えるころには簡単な構成なら設計・構築出来るようなスキルが身につくくらい、良い内容になっていると思います。私は2回通りやりました。

# 講座受講後の試験受講
この講座だけで```Solutions Architect – Associate```に受かりました。ただし```720（必須スコア）/743（取得スコア）```とぎりぎりであったため、心配がある場合は問題集なども追加でやっておいた方が良いと思います。

また、この講座の内容が難しすぎると感じる場合は一つ難易度が下の```Cloud Practitioner```から受験してみるのが良いと思います。

https://www.udemy.com/course/aws-4260/

# 資格取得後に取り組んだこと
資格取得した後は、AWSで社内の動画共有サイト作成したり、業務でAWSのサービス開発したり、実施した内容をJAWS-UGで登壇したりしました。そのあたりの記事は下記を参照下さい。

https://qiita.com/tkubota/items/727067b33662dc02a1ba

# 関連記事
その他AWS資格の記事は下記を参照下さい。

https://qiita.com/tkubota/items/b9f005ed86475524c88f

https://qiita.com/tkubota/items/6e5389ff2817171c2529
C3に入って

### この記事はC3 Advent Calendar 2022 24日目の記事です

 こんにちは！今日はクリスマスイブですね🎄
皆さんいかがお過ごしでしょうか？

本日はC3入りたて2か月目Hackお勉強中🔰の　なか　がお送り致します．
~~去年は卒論のデータまとめで萎えスマスでしたが今年はゆっくりできそうでうれしいです~~

今回はC3に入った経緯と入ってやってきたことについてさらっと書いていきます

## 1.C3に入る前の私
もともといた高専は卒業し，今年から九工大に編入学しました．

###### 余談ですが，編入生は専門に強いイメージが多いらしいです．

しかし私はむしろプログラムが苦手な方でした．

##### そんな時秋初めの実験の日に同じグループになった人から話しかけられました．
C3に興味ないですか？と言われたのですが
「プログラム得意じゃないですし，あまりITでも開発に関わらないところに就職するつもりなので・・」
とお断りをしました．

するとその人は
####  「情報系の技術者として企業に入るのにプログラムできなくてどうするの？」
と問いかけてきました．
こんなにバッサリ切ってくる人が大学にはいるんだなと衝撃と新鮮さを覚えた気がします．
多分この機会を逃すと一生プログラムから逃げるままでいる自分がいるなと思いました．
あともともとプログラム系のサークルに入りたいけど敷居高そうかなと悩んでいたため，またとないチャンスだと思いました．
そんなこんなで今年の秋にC3に入部を決めました．

## 2.入ってやったこと
入部したものの最初から何の分野をするかは特に決まってなかったため，ハッカソンに挑戦することにしました．


### 「SAGA × Azure Hackathon vol.2」
https://hackz-community.doorkeeper.jp/events/143527

こちらはMicrosoftが提供する「Azure」のサービスを利用して開発を行うハッカソンでした．
このハッカソンに参加した時の私は

* 授業でC・java・Pythonを扱った程度
* HTML&CSS でホムペを実験で作った程度
* 「デプロイ？？？？」

のひよっこでした．そのためフロント見習いで参加をすることになりました．

ここでお勉強した内容は以下の通り

#### Reactの勉強
<iframe width="560" height="315" src="https://www.youtube.com/embed/nRCNL9T3J98" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

おすすめしてもらったチュートリアル動画を見て「こんな感じでロジックを作ったりデザインしているのか・・ふむふむ」と、考えていました．
#### GitHubの使い方
https://grand-stream.com/github_upload#git_push_origin_master
まずはpush,pull,cloneらへんをお勉強しました．
#### JavaScriptの基礎
https://www.sejuku.net/blog/95920

高専でホムペを作ったときにJsとHTMLらへんは触ったのですが，昔過ぎて特にロジックに至っては全く理解していなかったため勉強しました．

#### 出た感想
ハッカソン初参加で思ったところは

* 全く歯が立たなかった
→チームメンバーの皆はサクサク進めているのに全く自分は進みませんでした・・・
* 体力めちゃくちゃ必要
→まる２日動き続けるには狂人な体力がいることがわかりました・・

### 「はじめてのハッカソン」
こちらは技育キャンプ主催のハッカソンになります．今回はフロントのデザイン周りを担当することになりました．
この時の私は

* ハッカソンがどのようなものであるかを何となく知る
* 何となくGitHubの使い方を理解
* 何となくCSSを触れる

といった状態でした．

とりあえず以下のサイトを参照にしてデザインを組みました．

https://freefrontend.com/css-animation-examples/

こちらはトップページの参考に利用しました．
https://skillhub.jp/blogs/256#skillhub-subchapter-1-1

こちらはCSSの理解がまだ浅かったのでわからない時の手引きに利用していました．

#### 出た感想
* とりあえず何とかデザインは組めるようになった
  →何かできるようになったので達成感が生まれました・・・
* ロジックの組み方がわからず困る
　→悔しかったので今度フロントになったらロジック迄すべて組めるようになります！！

### 「ハックツハッカソン　メガロ杯」
初めてのハックツハッカソンでした．ずっとフロントの勉強をしていたので，今度は思い切ってバックエンド見習いになろうと意気込んでいました．
この時の私は

* バックエンド経験無
* Pythonは授業（２年前）に扱ったのみ

でした．これはマズイ．事前準備としてはとりあえず本番使えそうなコードが乗っているサイトを見て置きました．

なお，当日はメッセージからネガポジ判定を行うBotを作成する予定で，私の役割分担はTwitterBotでメッセージ取得を行う部分でした．

#### 当日の感想
* 事前に調べていたサイトのソースコードがAPIのバージョン違いで使えなかった．
　→公式リファレンスを読み解くことの重要性を知りました（死）
* Pythonを忘れまくっている
　→リストの分割すら忘れていて萎えました
* デプロイがうまくいかない
→デプロイできても動きがおかしくなることもあるという事態を想定して早く聞いておいたらよかった・・・！と思いました

## 3.これからやりたいこと
ハッカソンにぼちぼち出て，足りない部分がいっぱい見えてきました．とりあえず今後は
* フロントのロジック周りの勉強
* Pythonの勉強（バックエンドと機械学習）←機械学習は興味により
* デプロイの勉強

の３本仕立てで勉強していきたいと思います．ぬおー頑張る．

## 4.終わりに
　抜けまくってて変なこと言ってた私に対してめっちゃ優しく教えてくれたチームメンバーの皆さんに感謝します．本当にありがとうございました．．:pray:

まだまだ頑張っていきたいと思いますので宜しくお願いします！！

あと私みたいにプログラミングにとどまっている人がいたらぜひハッカソンに出てみてください．
全然できなくて悔しいけどメッチャ楽しいです．もっと成長したい欲がたくさん出てきます:fist:

さてさて明日最終日（25日目）のC3 Advent Calendar 2022はtempさんになります！！
明日もまた見てくださいねッ:relaxed:　じゃんッ:fist:けんッ:raised_hand:ポンッ:v:
アウトプット について思ってたこと

さて 2020 年からアドベントカレンダー期に毎日何かを投稿するという奇祭に参加する習わしがあり今年もゆるゆる参加してみようと思い書くもの。

[人生初めて転職してみるまで知らなかったこと - Qiita](https://qiita.com/e99h2121/items/add9f7b8f7a011d364de)

転職してほぼ 3 か月です。ようやく公道をオロオロ走り始めています。この 1 か月くらいは本当に毎日なにかしらを書く (Qiitaじゃなくて、仕事で) 重量感でやってたみたいです。転職して何が変わったかというと意外と社会人生活で全然意識してこなかったこと

- 勤務開始
- お昼
- 定時

という時間の概念が会社にはあるということ。

- 朝コーヒー
- お昼は12時台
- 晩御飯を家族で食べる
- 有休をとる

ようなごく当たり前のことを在宅勤務でできるのはやはりありがたい。
そして結局アナログに

- 卓上カレンダー
- 日報

みたいなところへ毎日書き溜めて記録しています。記録してどうするかって言うと披露できるものは披露する ([日々息をするようにアウトプットしている人は何を意識しているのか？ - Qiita](https://qiita.com/satomihoya/items/876dea7dd7a4c90c140a)) し、披露できないものも毎日こうやって自分の中の秘伝のたれツボに貯めて熟成させている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/9bfd8efd-dd98-e153-382c-956332da9158.png)

https://twitter.com/e99h2121/status/1527198972246630400?s=20

なのでアウトプットのさらに推定 10 倍くらいは吐き出しきれずにため込んでるものがあるんだなと思ってもらいたいようなもうどうでもいいような

そういえば退職してくるとき私、社内の Slack に「退職まであと n 日」って 60 日前からがんばって毎日投稿したんです (突然の伏線回収)。明日につづく :package: