OmniAICreator/Qiita-1.07M huggingface dataset:
良いチームや良い製品を作るには、共通言語や共通体験を持つのが良いという仮説


## Long, long ago.

企業のスローガンだとかValuesというものだとか理念みたいなもの。
なんで作るのかというと皆で同じゴールを目指すからですよね。言えますか企業理念（ここでググるひとは仲間です）。

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

にも通じつつの、**良いチームや良い製品を作るには、共通言語や共通体験を持つのが良い** のだろうという仮説の根拠を書きます。


## 1. ゲームや漫画、趣味

例えばそういう世代なので書くと「ドラクエ」。社内で伺ったこんな話があります。

> ビジネスマンというRPGのプレイヤーとして、とにかくスライムたくさん倒すことが必要なフェーズというのが序盤にあるんだけれども、どっかで「倒せない敵をどうやって倒すか考える」フェーズにシフトしないといけないんだよな。本当のゲームはそこから始まる。
足腰がないうちに何をいくら考えても無駄なので最初は盲目的にレベル上げ（即物的に言えば「キータイピング速くする」とか「電話を恐れずに掛けられるようになる」とか「報告書や議事録をすぐ書けるようになる」とか）したほうが取れる選択肢が増えていいんだけど。
いつまでもそればっかりやってると「優秀な事務やさん」に続く道しかないことになっちゃう。

例えば読むだけで「ホントそう！」と思ってしまいます。いかがでしょう。
「ドラゴンボール」なら

> クリリンのことかーっ！！！

https://www.pinterest.jp/pin/731483164474281133/

と言いたくなる場面だったり

> その意味がわかるな？

https://www.pinterest.jp/pin/652529433486968372/

だったりで状況が通じます。状況が通じるイコール、もしかしたら「ならこうしようか」のアイディアやアクションに繋がるわけであります。チームで働くには大事です。あるいはもっとゆるく「推し」について語るというやつでも同じ作用があるかもしれない。

## 2. ごはん

カレー好きや、らーめん好きの世界は深いですね。
例えば色からジャンル、具材、店、場所、を共有することで戦法が生まれます。

https://ramendb.supleks.jp/

ここ、昔は飲み会だったのかもしれない。

## 3. スポーツ

たとえば社内、チームごとに日々のウォーキング歩数を競う催しが行われています。それにより「異常に数にこだわりつつ物事を達成することの手法」だとかふりかえりのコツだとかを共有しあっているわけです。全く侮ってはいけなかった。

- ランキング発表
- 歩いた中で楽しんだ景色
- 山登りなんかの楽しみ方

> ぜひ、チームのみんなで振り返りをしてみてください。もう、ゴールはすぐそこです！

https://www.ryuzee.com/contents/blog/3087

なんて、チームワークだなあ等と感じます。

### 追記: その後、みごとに記事まで生まれたので追記

[ウォーキング大会をきっかけに、歩くことを習慣化している話｜S.Yamamoto｜note](https://note.com/flyaway/n/n641c8a34adb7)



## 4. 育児

考えてみると育児もそうです。

3才児検診の攻略法。
クリスマスのプレゼント。
各働くパパママの悩みを共有し合うわけです。

https://adventar.org/calendars/6793


## 5. 読書会、勉強会

デザインパターン読書会だとかDDD読書会というものがあったりします。
あつ読みという催しもそうです。

https://qiita.com/flyaway/items/9bafec935a34871bfe80

特に読書会という催しは

- 手っ取り早く「ゴール」=「読破」が自動的に設定できる。
- それによって得た共通体験でコミュニケーションを円滑にできる。
- 知識それそのものも当然普段の業務に生きる。

非常に効率的、効果的なメソッドでありそうだと思うに至っています。


## 6. 普段の業務

で、いつもの問い合わせがもしかしたら実は大事な共通言語であり共通体験なのであります。
こういう時にこう来た問い合わせへの攻略法はこう、みたいなことが長きにわたるチームではもう皆の頭の中に入っている。


## Now.

さて良いチームや良い製品を作るには「共通言語を持つこと」「共通体験を持つこと」なのだろうなと思ったというお話。

https://twitter.com/t_wada/status/1465617528646815746?t=jVKx-uy3z8l5uSzqEv44BA&s=19

> t_wadaさんのお話は根っこは当然ソースコードのもしかしたらたった1行をどう書くか、それに凝縮されるのだけれど、でも開発者上がりではなかったり経営層に準じる面々だったりそれぞれに咀嚼できる粒度で社内の共通言語になるレベル感でコミュニケーションに好影響があるのがとても嬉しい。

例えばこれが今週もっとも気持ちが動いた私の感想でした。

だし、書いてみたようにジャンルやテーマも様々、何でも良いんだなと思っています。なんとなく面倒だったり腰が重かったりで「皆で何かをやる」が得意な人もそうでない人もいる（私もどちらかと言うとそう）と思いますが、アドベントカレンダーもその一つの **良いチームや良い製品を作る共通言語、共通体験** だぞと思っています。色々応用したいぞ。

https://qiita.com/advent-calendar/2021

以上です～。
JavaScriptでウマ娘診断テストを作ってみた

この記事は[N・S高等学校 (1) Advent Calendar 2021 ](https://qiita.com/advent-calendar/2021/n-s-highschool-1)の3日目の記事です。

#はじめに

こんにちは。N高等学校3年次のなっかのうです！もうすぐ卒業です...

12月3日...なんか三連単みたいなのでこの日付を選びました！

この記事では、JavaScriptを用いてそこそこ本格的な診断テストを作ったので、そちらの簡単な仕組みや感想などを話していこうと思います！

##作ったもの

あなたに近いウマ娘を診断する、「ウマ娘シンダン」というものを作りました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/afc69803-26bd-0598-e61e-50be8a715566.png)


[実際にやってみる](https://nakano1120.github.io/uma-sindan/)


[ソースコード](https://github.com/nakano1120/uma-sindan)

##主な機能

・自分の性格がどちらに傾いているかわかるパラメータのグラフ的なものが見れる！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/a1637c4a-8ced-0033-c854-a6ccf5490ea7.png)


・自分に一番近いウマ娘、遠いウマ娘がわかる機能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/0558f913-4e03-d653-5f5a-6c60bef9fd02.png)


・Twitterや、URLコピペで自分の結果を共有できる機能

・ウマ娘がアップデートで増えた際にURLさえあれば対応できる機能

[※ちなみに作者の結果です](https://nakano1120.github.io/uma-sindan/question/question12.html?q1=1&q2=2&q3=2&q4=2&q5=1&q6=1&q7=2&q8=2&q9=4&q10=4&q11=1)

##特にこだわりのポイント

大きく二つあります。

###URLで全てを管理するシステム

例えば、私の結果のURLは、

`https://nakano1120.github.io/uma-sindan/question/question12.html?q1=1&q2=2&q3=2&q4=2&q5=1&q6=1&q7=2&q8=2&q9=4&q10=4&q11=1`

になります。

この`?q1=1`のように質問ページごとに回答をURLクエリに保存することで、最後の結果のページだけで計算をし、あとはページ遷移＋結果をURLクエリに書き込みだけすれば済むので、例えば質問が増えてもすぐに対応できます。

もう一つ利点があり、結果のURLさえあれば再現できるので、簡単にシェアできます。

###採点システム

この個性をどう評価するか考えたところ、色々調べた挙句

「ビビリさ」
「活発さ」
「好奇心の高さ」
「協調性の高さ」
「真面目さ」

の５つのパラメータを質問ごとに上下させて、最終的に出た数値を結果として出すという仕組みになっています。

例えば質問1「夏にデートをするとしたら？」で「海に行く」を答えた場合、初期値はそれぞれ50なので

「ビビリさ」　　　56(+6)
「活発さ」　　　　56(+6)
「好奇心の高さ」　56(+6)
「協調性の高さ」　50
「真面目さ」　　　50

となります。

そしてこの結果から、それぞれのウマ娘が持っているパラメータとの差異を計算します。

私の結果は

「ビビリさ」　　　56
「活発さ」　　　　100
「好奇心の高さ」　96
「協調性の高さ」　74
「真面目さ」　　　58

でした。この結果と一番近かったエルコンドルパサーは、

「ビビリさ」　　　46（差異10）
「活発さ」　　　　99（差異1）
「好奇心の高さ」　82（差異14）
「協調性の高さ」　56（差異18）
「真面目さ」　　　46（差異12）
差異の合計55（これが最終結果の「距離」）

となり、私の（推しであり）一番近いウマ娘になります。

##さいごに

自分の推しを出すRTAするもよし、身内で楽しむもよし、共有して楽しむもよしな診断テスト、いかがでしたでしょうか？

この診断テスト、結構自信作なのでぜひ広めていただけると幸いです！

来年はN高校卒業しますが、ちょくちょくqiita使っていこうと思います！

##追記（おまけ）

実はこのサイトなんですが、「W3C」「WHATWG」などのWEB標準に準拠することにできる限り気を使って制作しています。

例えば、`border-radius`などの角丸は完全な推奨ではないため使っていません。

これに準拠することにより、比較的古いようなwebブラウザでも動くようになっており、

VoiceOverなどの読み上げ機能にも優しい構造になってます！

今後WEBデザインなどしていく方々はぜひWEB標準のドキュメント、目を通しておいた方がいいと思います！

一個人の意見ですが、今後のWeb業界のためにもよろしくお願いします！
継続作成記事：POP Analyzer①

リテールテックのアドベントカレンダーとして記事を作成しています
。
前回の記事では少し大きめの話をしたので、今回はボトムアップで企画を進めたいという趣旨の記事です。

https://qiita.com/watanabe-tsubasa/items/cf56f57832267ba6d902

まだ完成には至っておりませんが、今後継続的に進めたいと思っておりますので、よろしくお願いします。


#売場でのお客さまの行動検知をしたい
　突然ですが、一般的な小売業ではお客さまの行動を把握する術がありません。厳密にいうと、お客さまからのフィードバックとして**測定可能な売上以外を活用できていない**状況なのです。お客さまが売場でどのように動いて、どのように考えているか、消費者に一番近い産業でありながら、身近な時点にいらしてくれるお客さまのことが把握できていないというのが実態なのです。

　ですが、お客さまの行動を知るということは、**顧客満足を向上させる種となるアイディアが詰まっています**。

1. 商品を購入した場合
    1. 見た瞬間即決して買った
    1. 買うかどうかを悩んだ末に買った
    1. 隣の商品とどちらを買うか悩みながら買った
1. 購入していない場合
    1. 一度籠にいれたけどやめた
    1. 手を伸ばしたけどやめた
    1. 商品を見たけど悩んでやめた
    1. 目もくれなかった

買った・買わなかったの中にもこれだけの条件分岐があり、売れた理由・売れなかった理由が異なっていることが理解いただけると思います。

#プロダクトのモデル
　ですので私は、売場でお客さまの行動を検知して、数値化することで、売場に対する新たな評価基準を設けることを考えました。
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/bc8ce073-c183-4829-1b93-241e8f4f38f9.jpeg' width = 50% alt = 'a.jpg'>
例えば、売場にPOPをつけた際

1. POPの前を通過したお客さま
1. POPを見たお客さま
1. 商品を手に取ったお客さま

それぞれを計測し、日別の数値として継続的に記録することで、POPの効果測定ができるようになります。
更に、POPだけでなく色々な売場で今まで何となく実施されていた要素を同様に解析することで、知見の蓄積と効果的な販促を検討することができるようになると考えました。
詳細説明すると長くなりますので、もし気になる方は以下のnote記事をご覧ください。

https://note.com/3682tw/n/n0be732f092ff

そのようなことを考える中、

https://qiita.com/wicket/items/a45cf72e64fc346f4fe2

こちらの記事を発見し、以下のモデルを考案しました。
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/e3ccabf4-0017-707b-eaa5-4c83a6e6b3a5.jpeg' alt= 'b.jpg' width =50%>
すなわち[teachablemachine](https://teachablemachine.withgoogle.com/train)のposeモデル、ml5、[CodePen](https://codepen.io/)を組み合わせて、webアプリとしてプロトタイプを制作することにしました。

簡単なプロトタイプとして、まずは設置したPOPの前で商品に手を伸ばす動作をしたお客さまの数を数えていきます。
POPの効果を見るので、暫定的に**POP Analyzer**と名付けました。

#行動検知モデル部分
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/83700368-f339-6f58-1114-837f63bbcfd7.jpeg' alt = 'c.jpg' width = 50%>

- 手を上げる動作 50枚
- ランダムな動作 50枚

それぞれ読み込ませてモデルを作成したのち、職場の方に売場のものを取ってもらうイメージで手を伸ばしてもらいましたが、結果はアクションなしとしての判定
まず、モデルの構築に失敗しました。

#行動検知の判別部分

<img src ='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/fbd3a40e-a887-53af-e02e-be7c68e3f41c.jpeg' alt = 'f.jpg' width = 50%>
本来であれば、画像黄色枠内に判定結果が出るはずなのですが、アウトプットされず。
黄色線のようにモデルの読み込みは完了しております。
一方、その他の学習モデルでは問題なく判定結果を出力していたので、なぜかと思い調べたところ以下の記事にあたりました。

https://qiita.com/twtjudy1128/items/4c29a98a035a6e8cbcb4

poseモデルはCodePenで動かないとのこと。
stackoverflowでも聞いてみましたが、返答がなく、あまり考えた人はいないのかなというのが現状です。

#今後について
正直このプロトタイプは構想段階ではかなり簡単にできると思っており、実際の店で試してみたいと考えていただけに、いきなり出鼻をくじかれてショックでした。

モデルの組みこみについて、対応として考えられるのは

- teachablemachine以外で作る
- teachablemachineのposeモデルはcanvasを用いて作っているので、CodePen上にcanvasのライブラリを埋め込んで何とかする。
- まったく別の手段をとる

機械学習部分については、正直私の理解が浅いのもあり、勉強していかなければなりません。
一人でやっていると忙しさにかまけて放置してしまうかもしれませんので、今後継続的にアドベントカレンダー上で進捗を報告します。

引き続きお読みいただけると嬉しいです。
ユーザー名を日本語にしてしまったときにjupyter-notebookを使えるようにする/WindowsでLinuxを使うとき

#経緯

僕は素人なので、長期的にパソコンを使っていた時、画面全体が点滅して使えなくなってしまった。

なので初期化した。

すると、(やっぱり素人なので)、色々インストールしたものが消えてしまい、トラブルに直面したときにちょちょいと調べて解決したことの後追いをしなくてはならなくなった。

例えば

・Anacondaの環境構築はどうやってたっけ？

・jupyternotebookってどう使ってたっけ？

というトラブルにあった。

# jupyter notebook

jupyternotebookはオープンソース上で、pythonコードなどを実行できるWebツールである。

セルブロックごとにコードを書くことができる。

特に出力がセルブロックで表示できるので見やすい。

ただし、ユーザー名を日本語にすると、エンコードの関係か？、

Bad file descriptor (bundled\zeromq\src\epoll.cpp:100)

とか表示されてKernelの起動(？)が停止される。


(そもそもユーザー名を日本語にしてしまうのが、すごくセンスのないことらしい。トホホ・・・)

# 解決方法としては・・・

解決方法としては、新しいユーザーを作ってしまうのが1つ。

ところが、jupyter notebookを使うためだけにユーザーアカウント1つ作るのもなあ・・・

ということで「前は上手く使ってたはず・・・、どうやってやってたっけ」と思考を巡らす

#　そうだ。Ubuntu上で起動してたっけ。

UbuntuというOSはUNIXからLinux、Debianと派生してDebianを元に作られたOSです。

まあUbuntuはWindowsでLinuxコマンドを使えるようにするためのオペレーションシステム(OS)です。

そこならディレクトリがLinux用なので、ホームディレクトリを新たにアルファベット指定でjupyter notebookが起動できる。

# 僕の様に初期化した場合

Windowsコマンドを押してubuntuと入力して開くと、
「開けないから、なんかキーを押して閉じてね」(意訳)
と表示される。

#あれれ～、おかしいぞ～

ということでアンインストールして再インストール... 結果は同じ。

ちゅうことで調べなおし。

#Windows for Linux

要は、もう一つ橋渡しが必要ということらしく、wslというモジュールをインストールする必要がある。

皮がUbuntuで実がWSLってことかな(多分。)

wsl: Windows sunsystem for Linux

```python
conda install wsl
```
もしくは

```python
pip install wsl
```


引用
　仮想マシンというものは、Windows 10マシン上で別のPCを動かしているようなイメージです。Linuxを動かすために別のPCを用意するような形となり、起動や動作に時間がかかります。また、仮想マシンは別のPCと同様に扱うため、Windows 10側のアプリケーションとはネットワークなどを介してやりとりを行います。WSLは仮想マシンを使わずWindows 10上で直接Linuxを実行することができるため、起動や動作にかかる負荷が少なく済みます。

　また、WSLを使用すると、Windows 10の全てのファイルやフォルダにアクセスができます。

WSL 1は「サブシステム」という、異なるOS環境を実現するための仕組みを使用しています。このサブシステムがLinuxのカーネルへのファンクションコールをWindowsのカーネルファンクションコールに変換して疑似的なLinux環境を実現しています。WSL 1では、Linux実行環境をLinuxカーネルではなく、サブシステムの「LXCore」によって実装しているため、一部のLinuxアプリケーションやユーザーファイルシステムなどを動かすことができません。

# Windowsの機能の有効化
左下の検索窓からコントロールパネルと入力、プログラム、Windowsの機能の有効化または無効化とクリック

そして
Windows subsystem for Linux
もしくは
Linux用のWindowsサブシステム

仮想マシンのプラットフォーム
のチェックボックスにチェックを入れる。

再起動を求められるので、再起動します。

# WSLのデフォルトバージョンをWSL2にする（オプション）
今後インストールするLinuxディストリビューションのデフォルトをWSL2にするには、コマンドライン（PowerShellまたはコマンドプロンプト）で以下のコマンドを実行します。

PowerShell
```
wsl --set-default-version 2
```

#そして
初回起動時は少し待つと初期設定が始まるので、ユーザー名とパスワードを入力する。ユーザー名とパスワードを入力後、Linuxの実行環境して使用できる。
次に
```python
sudo apt update
sudo apt upgrade
```

※もしもエラーが生じたら以下の記事を参考に。
https://qiita.com/koara-local/items/e63b7e4ff3cea803bdea
http://inside-my-box.hatenablog.com/entry/2015/05/29/013008

```
$ sudo rm /var/lib/apt/lists/lock
$ sudo rm /var/lib/dpkg/lock
```
※終わり

#jupyter notebookを起動

```
sudo apt install python3-pip python3-pandas python3-sklearn
sudo apt install jupyter-notebook
```

```
#Jupyter Notebookの起動（自動的にブラウザが立ち上がりJupyter Notebookが起動する）
$ jupyter-notebook
```
#日本語化の手順
```
\\ 日本語パッケージを導入
$sudo apt install language-pack-ja-base language-pack-ja ibus-mozc
\\ 文字セットを日本語に変更
$ localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"
$ source /etc/default/locale

```
今更だけどFlutter×Firebase事始め

# はじめに

今年は仕事が忙しくて（みんなそう）という言い訳のもと全然外へのアウトプットをしていなかったので、
アドベントカレンダーくらいは参加しようと思い書くに至りました。
...とどうでも良い前置きは後にして、新しい知識というよりは今年やったFlutter×Firebaseの備忘録的な内容になります。

知っている人からすると当たり前かもしれませんが、実際の使い方とか含めて載せれればと思います。

## Authentication

自分のプロジェクトでは匿名ログインを行い、そのユーザーに対してFireStoreの情報を紐づけています。

アプリをキルするまで生き残っているRootのWidgetを作成し、そこのinitStateで初回起動のユーザーに対して
匿名ユーザー作成を行いました。
ユーザー作成はCloudFunctionsです。

雑ですがコードは以下。

```dart
Future<String> getAuthId() async {
    await FirebaseAuth.instance.signOut();
    final UserCredential userCredential = await FirebaseAuth.instance.signInAnonymously();
    if (userCredential.user != null) {
      return Future.value(userCredential.user?.uid.toString());
    } else {
      return Future.value("");
    }
  }
```

iOSの場合アプリアンインストールをしてもキーチェーンにユーザー情報が保存されてしまうので、サインアウト処理を行って新規で払い出してもらいました。
もしかしたらやり方が悪いだけかもしれません。

## FireStore

ユーザーのデータはFireStoreに保存して利用していました。

またまた雑コードはこちら。

```dart
  Future<void> updateHoge(String id, String hogeId) async {
    await _fireStore.collection('id').doc(id).update({"hogeId": hogeId});
  }

  Future<void> setHoge(String id, List<Map<String, dynamic>> 
  hoges) async {
    await 
   _fireStore.collection('histories').doc(id).set({"hoges": 
    hoges});
  }

  Future<List<Hoge>> getHoge(String id) async {
    final hoge = await 
    _fireStore.collection('hoge').doc()).get();
    final data = ).data();
    if (data == null) {
      return [];
    }
  }

```

## Analytics

昨今アプリ開発でやってないことはないんじゃないかという分析系。

Adjustとかも入れてるんですが、今回はFirebase Analyticsの実装を。

```dart
void sendAnalytics(Events event, Map<String, Object?>? param) {
  final FirebaseAnalytics analytics = FirebaseAnalytics();
  final String name = event.value;

  print("[Firebase]\n\nEvent: ${event.value}\n\nParam: ${param.toString()}");
  analytics.logEvent(name: name, parameters: param);
}
```

publicな関数を定義してどこからでも送信できるようにしています。
Widegetの拡張として、みたいにした方がよくわからずいろんな階層に書かれる心配はないと思いますが、
今回の場合は特に指定せず。

## CloudMessaging

正直iOS時代からRemote Pushは苦手意識というか新しい案件で一回作る時期が出て、思い出しながらやるから
慣れたもののめんどくさいなーという感じです。
ただ、FlutterでのFirebase SDKではかなり楽になっている印象でした。
それ以外のハンドリングだったり、Xcodeやgradleの設定が面倒ではあるんですが、通知のコード自体は結構スッキリしているなと。

大変参考にさせていただいたのは以下です。
https://zuma-lab.com/posts/flutter-fcm-push-notify-settings

設定から実装まで細かく書いていてとても助かりました。。。！


## 最後に

正直書くと決めて当日までやってなかったので付け焼き刃感がありますが、
少しでも盛り上がれば&何かのきっかけになれば幸いです。

配信はFirebase Distributionを使って両OS配信していたのでそちらも次の機会にかければなと思います。
React Hook Form v7でMaterial UI v5 Selectを使う方法

# 問題
`react-hook-form`が便利なので使っていたところ、MUI v5 の`TextField`では簡単に動いたのですが、`Select`は同じノリで使えませんでした。

失敗例

```tsx
import React from "react";
import { SubmitHandler, useForm } from "react-hook-form";

import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

type SampleForm = {
  postalCode: string;
  prefecture: string; // Selectで選びたいもの
  city: string;
  address: string;
  building: string;
};

export const Sample: React.FC = () => {
 
  const { register, handleSubmit } = useForm<StoreAddForm>();

  const addAddress: SubmitHandler<SampleForm> = (input) => {
    console.log(input);
  };

  return (
    {/* 省略 */}
    <Select
      sx={{ mt: 2 }}
      required
      fullWidth
      label="都道府県"
      {...register("prefecture")}
    >
      <MenuItem value="東京">東京</MenuItem>
      <MenuItem value="埼玉">埼玉</MenuItem>
      <MenuItem value="千葉">千葉</MenuItem>
    </Select>
    {/* 省略 */}
    <Button
      type="submit"
      onClick={handleSubmit(addAddress)}
      fullWidth
      variant="contained"
      sx={{ mt: 3, mb: 2 }}
    >
      登録
    </Button>
  );
};
```

# 依存関係

```json
"dependencies": {
  "@mui/material": "^5.2.1",
  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-hook-form": "^7.20.5",
  "typescript": "^4.1.2",
}
```

# 解決方法

Controllerを使うと動きました。同じ部分は削除したわけではなく、省略してます。

```tsx
import { SubmitHandler, useForm, Controller } from "react-hook-form"; // Controllerを追加

export const Sample: React.FC = () => {
 
  const { register, handleSubmit, control } = useForm<StoreAddForm>(); // controlを追加

  return (
    {/* 省略 */}
    <Controller
      name="prefecture"
      control={control}
      render={({ field }) => (
        <TextField
          {...field}
           select
           sx={{ mt: 2 }}
           required
           fullWidth
           label="都道府県"
        >
          <MenuItem value="東京">東京</MenuItem>
          <MenuItem value="埼玉">埼玉</MenuItem>
          <MenuItem value="千葉">千葉</MenuItem>
        </TextField>
      )}
    />
    {/* 省略 */}
  );
};
```

# （補足）

- Selectコンポーネントではない件について
  `Select`を使っても動作はしましたが、なぜか`label`指定が効かず、"都道府県"のラベルが画面に出ませんでした。
  `TextField`にselect属性を付ける方法だと`label`が出ます。



- コードは関係なさそうなものを適当に省略しているため、分からなかったら聞いてください。
- React Hook FormやMaterial UIは詳しくないので、動作保証はしかねます。
    - 間違っていれば教えてください。
ASP.NET Coreで簡易プロキシサーバーを作ってみる

この記事は [地震情報アプリ界隈 Advent Calendar 2021](https://adventar.org/calendars/6729) の4日目の記事です。

# 自己紹介

趣味で KyoshinEewViewer for ingen というソフトウェアを作成しています。
https://svs.ingen084.net/kyoshineewviewer/
興味あったら見ていってください。

# モチベーション

この1年で地震観測というジャンルが非常に活発になってきたように思います。
主に、強震モニタ関連のソフトを並べてじゃらじゃら音を鳴らしたりソフトが反応する様子を写した動画や生放送から、揺れたことがわかりやすい物体を置いたカメラ映像をあわせて動画や生放送という形にする方向にシフトしてきています。

ところで、強震モニタに対しての負荷については考えたことはありますでしょうか。
みなさん沢山のソフトを起動して比較などを行っていますが、これらは各ソフトごとに個別に強震モニタから画像を取得しています。
そのため、ソフトを起動すればするほど強震モニタへの負荷が増えてゆき、他の利用者やNIEDに迷惑がかかっています。(現在進行系)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100304/b1f80b0d-3487-458d-7cd4-3a3d5c9dab9a.png)

そこで、中間のソフトを噛ませることにより負荷をある程度軽減させよう、というのが今回の趣旨です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100304/f3dee905-3320-36f2-92e4-f29cfed8bcfa.png)

# 使用技術

## 利便性

主なターゲットとしては自力で証明書の作成やキャッシュサーバーを建てることができないユーザーなので、証明書の生成や登録、hostsの書き換え、キャッシュの内容などをすべてアプリ側で実装することとしました。

## フレームワーク･ライブラリ

仕事ではPHPとかGoとかScalaとかを書いていますが、命とお金と諸々の次ぐらいにC#が好きなので ASP.NET Core の Minimal APIを使ってみることにしました。
(結局はミドルウェア1つで完結したせいであんまり使ってない)
ほかにもWindowsサービス化などでもフル活用しています。

通常の強震モニタはHTTPですが、長周期地震動モニタはHTTPSです。なので証明書を作成する必要がありました。
こちらはBouncyCastleを使用して証明書を作成し登録することで対応しました。

# ポイント
## オリジンへのリクエスト
普通のサーバーだとリクエスト元とプロキシサーバーが別だったりするのでなんとかるのですが、これはローカルサーバーのプロキシなのでちょっと工夫が必要でした。
まずDNSのレコードが引けませんから、GoogleのDNSのAPIを使用しIPアドレスを取得、HttpClientへは生のIPアドレスを取得しつつ明示的にHostヘッダーを設定しリクエストを送信しました。
オリジンがSNIとか使ってるともっと工夫が必要になります。。。
ちなみに、**オリジンの証明書の検証は現状していません**。ご注意ください！

## キャッシュ
今回は `IMemoryCache` を使用しました。が、完成当初メモリリークがすごく半日起動で1GB消費したり散々でした・・・。
.NET には昔から続く問題として、LargeObjectHeap(LOH)の断片化という問題があります。
プラットフォームによっても異なるためWindowsの話をしますが、具体的にはオブジェクト単体のサイズが85kbを超えると専用の場所にインスタンスが配置されるのですが、オブジェクトの開放など色々あってデータが配置できない空間というのが発生してしまい、メモリ使用量が増えていってしまうという問題です。
今回の実装では80kb以上のレスポンスはキャッシュしないようにすることで対処を行いました。

# 利用方法
## インストール
証明書のインストール･hostsファイルの書き換えを行うため起動には管理者権限が必要です
起動し、上下カーソルキーで `1. サービスのインストール` を選択しEnterキーを押すことでサービスがインストールされ、**インストールしたPCでの**強震モニタへのアクセスがプロキシによって統合されます。
なお、**インストール後は実行ファイルのフォルダを変更しないでください**。変更したい場合はアンインストールを行ってから変更してください。

## アンインストール
起動し、上下カーソルキーで `2. サービスのアンインストール` を選択しEnterキーを押すことでアンインストールすることができます。
このままでは証明書がインストールされっぱなしになるので、もう一度起動し `3. 証明書の削除` を選択しEnterキーを押してください。
これでアンインストールは完了です。

## トラブルシューティング
ソフトの終了時にhostsファイルを戻す動作を行いますが、異常終了した場合などは強震モニタへアクセスできなくなることがあります。
その場合は再度アプリを起動するか、管理者権限でhostsファイルを開き、強震モニタのドメイン名の設定行を削除してください。

# さいごに
リポジトリはこちらです: https://github.com/ingen084/KyoshinMonitorProxy

ごめんなさい、忙しくてほぼプロトタイプのまま公開する運びになってしまいました…。
やる気のある方、PRお待ちしております。。。。
会社の方のアドベントカレンダーにも参加する予定なのでお楽しみに！
【謎】Unicodeエスケープシーケンス

以前投稿したこちらの記事

https://qiita.com/zmel1213/items/ee915556f9c58ab50889

こちらでAIPからjson形式で返ってきた文字列が文字化けしていた件ですが
調べてみたところUnicodeエスケープシーケンスというらしいです…

例えば記事では
> こ　⇒　\u3053

と表記されていましたが、文字コード対応表で確認したところ

|JIS|SJIS|UTF-8|UTF-16|実文字|
|:-|:-:|:-:|:-:|:-:|
| 2433|82B1|E38193|3053|こ|

UTF-16の文字コードに \u がついてエスケープされています。
どうやら開発環境と実行環境(AIPサーバー)の相違が原因で起こる文字化けのようです。

　

記事でも紹介した通りjqを噛ませて変換できるのでひと手間ですが一度理解してしまえば焦ることはなさそう。
分かりやすい使い方を載せている記事もありました。

https://qiita.com/ponsuke0531/items/aa405a0f897cd0a78a8c
WSL2でのエラー対処（WslRegisterDistribution failed with error: 0x80370102）

勉強用にWSL2をインストールしてubuntuを起動したら以下のエラーが発生した。

```
WslRegisterDistribution failed with error: 0x80370102
```
###解決した方法
以前、Hyper-VからVirtualboxに移行したときにPower-shell(管理者権限)で以下のコマンドを実行したことを忘れていた。これが原因だったようだ。

```
Disable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V-All
```
以下のコマンドで元に戻すことでubuntuが無事起動した。めでたしめでたし。

```
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V-All
```
VSCodeの初期に設定した拡張機能

今回は自分が初期設定をするにあたってインストールした拡張機能を紹介しようと思います。
#今回紹介する拡張機能一覧
1.Japanese Language Pack for Visual Studio Code
2.Bracket Pair Colorizer 2
3.indent-rainbow
4.Code Spell Checker
5.Prettier
6.HTML CSS Support
7.Material Icon Theme

#Japanese Language Pack for Visual Studio Code
VSCodeを日本語表記にすることができます。
#Bracket Pair Colorizer 2
括弧の色付けを行うことができます。
#indent-rainbow
indentの色付けをすることができます。
#Code Spell Checker
コードのスペルチェックを行ってくれます。
#Prettier
コードをルールに従って自動整形してくれます。
#HTML CSS Support
HTMLのドキュメントに対してCSSのサポートを行ってくれます。
#Material Icon Theme
ファイルのアイコンを変えてくれます。
#終わりに
今後学習していくにあたって良いと思ったものがあれば追記して行きたいと思います。
[Loki] docker/cri両用config

kubernetesを運用している皆さん、ランタイム移行はお済みでしょうか

私も運用しているEKSのnodeをdockerからcontainerdに移行するために諸々調整をしています

この移行にあたって、変更が大きくて面倒だな思っているのが、ログのフォーマットです
dockerはjsonだったのですが、criはそうではなくなっているので、同じconfigは使えません
それぞれのランタイムのnodeが混在する時期がある場合、それぞれのフォーマットに対応したconfigを作成して、それぞれのconfigを使用するdaemonsetを用意して、taintsを活用してdeployするnodeを指定して…
と、ちょっと面倒、できるならひとつで済ませたい

---

私はログの保存にLokiを使用しているのですが、promtailのconfigにはdockerもcriもプリセットのparserが用意されています

https://grafana.com/docs/loki/latest/clients/promtail/stages/docker/
https://grafana.com/docs/loki/latest/clients/promtail/stages/cri/

これがあるのでpromtailのpipeline_stagesには

```yaml
- docker: {}
```

とか

```yaml
- cri: {}
```

とか書いておけば細かい設定をしないならこれで事足ります
これって両方書いたらどっちもいい感じにparseしてくれるのでは…と思ったのですが結果としてはうまく出力できませんでした
両方ともparseすると、ログ本文・ストリーム・タイムスタンプの3つのフィールドが作られるのですが
`docker` の場合はログ本文のキーが `output` なのに対して、 `cri` の場合は `content` となっているあたりがダメな原因なのでしょうか？

そしてこの `docker`　と　`cri` それぞれ以下の設定のエイリアスになっているだけなので

```yaml:docker
- json:
    output: log
    stream: stream
    timestamp: time
- labels:
    stream:
- timestamp:
    source: timestamp
    format: RFC3339Nano
- output:
    source: output
```

```yaml:cri
- regex:
    expression: "^(?s)(?P<time>\\S+?) (?P<stream>stdout|stderr) (?P<flags>\\S+?) (?P<content>.*)$",
- labels:
    stream:
- timestamp:
    source: time
    format: RFC3339Nano
- output:
    source: content
```

この2つを組み合わせて

```yaml
- json:
    expressions:
      content: log
      stream:
      time:
- regex:
    expression: "^(?s)(?P<time>\\S+?) (?P<stream>stdout|stderr) (?P<flags>\\S+?) (?P<content>.*)$"
- labels:
    stream:
- timestamp:
    source: time
    format: RFC3339Nano
- output:
    source: content
```

とすると、docker/cri両方で使えるconfigになるはずです、たぶん…
jsonとregex両方ある部分がそこはかとなく怪しいですが、なんとなくいい感じにやってくれてるようで、今のとこ問題なく動いてます

fluent-bitとかはちょっと難しそうでしたね、残念
複雑にネストされたMapオブジェクトをJSONに変換

# Map、便利だよね

キーと値のセットを持てるMapオブジェクト。
配列や既存のオブジェクトでは再現できないときに超便利。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map


## JSONに変換してPOSTしたい

しかし、これをバックエンドにPOSTするためにJSONに変換するときにひと悶着起きる。

```js
var map = new Map();
map.set('hoge','value1');
map.set('fuga','value2');
JSON.stringify(map);  
// '{}' からっぽ！
```

これは以下のようにすることで解決できる

```js
var map = new Map();
map.set('hoge','value1');
map.set('fuga','value2');
JSON.stringify(Object.fromEntries(map));
// '{"hoge":"value1","fuga":"value2"}'
```

なお、`JSON.stringify([...map]);` でもJSON出力は可能だが、`{'hoge', 'value1'}`という形式になってしまうので変換後に扱いにくい。

## 階層化したMapオブジェクトで躓く

しかしここで、**Mapの値にMapがある場合**や**オブジェクト配列内に存在するMap**という状況が発生するとややこしくなる。

```js
var map1 = new Map();
var map2 = new Map();
map1.set('hoge','value1');
map1.set('fuga','value2');
map2.set('hogehoge','value3');
map2.set('fugafuga','value4');
map2.set('piyo', map1);
JSON.stringify(Object.fromEntries(map2));
// '{"hoge":"value1","fuga":"value2","piyo":{}}'  piyoがからっぽ！

var obj = {
    name: 'hoge',
    maps: map2
};
// JSON.stringify(Object.fromEntries(obj));  // MAPじゃないのでエラー
JSON.stringify(obj);
// '{"name":"hoge","maps":{}}'  当然Mapはからっぽ！
```

## JSON.stringifyのreplacerを使う 

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

replacerを使って型チェックを行い、Mapオブジェクトなら`Object.fromEntries`をかけてやる。

```js
function replacer(key, value) {
    if (value instanceof Map) {
        return Object.fromEntries(value);
    } else {
        return value;
    }
}

JSON.stringify(map2, replacer);
/*
{
  "hogehoge": "value3",
  "fugafuga": "value4",
  "piyo": {
    "hoge": "value1",
    "fuga": "value2"
  }
}
*/

JSON.stringify(obj, replacer);
/*
{
  "name": "hoge",
  "maps": {
    "hogehoge": "value3",
    "fugafuga": "value4",
    "piyo": {
      "hoge": "value1",
      "fuga": "value2"
    }
  }
}
*/
```

階層が3つ、4つとなっても問題なく変換できるので、これをバックエンドにPOSTしてやれば良い。
dnt というツールについて

Deno (ディノ) Advent Calendar 3日目の記事です。

今日は `dnt` というツールについて紹介します。

# `dnt` とは

https://github.com/denoland/dnt

`dnt` は Deno 向けのソースコードを Node.js 向けのソースコードに変換するためのツールです。Deno のコアチームメンバーである、David Sherret さんが主に開発しています。GitHub の denoland org 以下にホストされており、位置付け的には Deno 公式の Deno to Node.js の変換ツールです。

# 使い方

次のような内容の `build_npm.ts` を用意します。

```ts
import { build } from "https://deno.land/x/dnt/mod.ts";

await build({
  entryPoints: ["./mod.ts"],
  outDir: "./npm",
  package: {
    // Node.js package としての package.json の内容を書く
    name: "your-package",
    version: Deno.args[0],
    description: "Your package.",
    license: "MIT",
    repository: {
      type: "git",
      url: "git+https://github.com/username/package.git",
    },
    bugs: {
      url: "https://github.com/username/package/issues",
    },
  },
});

// ビルド後処理。npm パッケージに含めたいファイルをコピーする
Deno.copyFileSync("LICENSE", "npm/LICENSE");
Deno.copyFileSync("README.md", "npm/README.md");

// テストで使いたいファイル/ディレクトリがある場合などもここでコピーする
// ...
```

これを

```
deno run -A build_npm.ts
```
と実行すると、`npm` ディレクトリ以下に Node.js 向けに変換されたソースコードが生成されます。

テストコードがある場合は、それも Node.js 環境向けのテストコードに変換され、テストの実行まで行ってくれます。(fixture ディレクトリなどがある場合は、build_npm.ts の最後の部分で適切なパスにコピーしましょう。)

`dnt` は型定義ファイルも .d.ts ファイルとして自動的に出力してくれます。Deno のソースコード内に書いた型定義が自然に Node.js 環境からも使えるようになります。

# 仕組み

URL import で外部ドメインに依存している部分についてはファイルがローカルにダウンロードされ、path がつながるように import を書き直してくれます。

Deno 名前空間は [deno.ns](https://npm.im/deno.ns) という Deno 名前空間の shim を実装している npm モジュールがあり、そちらの機能の呼び出しに置き換えてくれます。(deno.ns 自体も denoland org で開発されています。)

# このツールの使い所

すでに Deno 用のツールを作っている場合は、`dnt` を使って単純に Node.js サポートを追加することが出来ます。

また、Deno と Node.js 両方に向けたライブラリを書きたい場合に、一旦 Deno で書いて `dnt` で変換する事で、両対応のモジュールを作る事ができます。

`dnt` は umd と esm のコード両方を自動的に出力できるため、ESM と CJS 両対応したい場合なども使うメリットがあります。

# 採用例

## license_checker

https://github.com/kt3k/deno_license_checker

license_checker は以前に自分が作った、ソースコードのライセンスヘッダーがきちんと書かれているかをチェックするための CLI ツールです。もともとは Deno 向けに書いたツールでしたが `dnt` で変換をして、Node.js からも使えるようになりました。 [@kt3k/license-checker](https://npm.im/@kt3k/license-checker) に publish されています。

## discordeno

https://github.com/discordeno/discordeno

Deno 界隈で人気のある Discord API library です。元々は Deno 用のツールでしたが、`dnt` で変換して、npm からも `discordeno` という名前で使えるようになっています。

## dragjs

https://github.com/bebraw/dragjs

dragjs はドラッグ関連の処理を実装したフロントエンド向けのライブラリです。npm からの利用をメインに想定しているツールのようですが、実装は Deno に移行していて、`dnt` で変換する事で npm に publish しています。

## 

## sidewind

まだマージされていませんが、sidewind という frontend 向けライブラリも `dnt` を使って開発環境を Node.js から Deno に移行作業中です。 https://github.com/survivejs/sidewind/pull/44



# まとめ

今日は Deno のコードから Node.js のコードを出力できるツールの `dnt` を紹介しました。
【VSCode】知っておきたいExtenstions（拡張機能）７選

# はじめに

何かしらの開発経験があれば「[VSCode](https://code.visualstudio.com/)」という単語は聞いたことがあるだろう。VSCodeとはエディタのひとつで、機能性や拡張性が優れており、開発者に愛されている（少なくとも私にはww）。

実際のインストールや概要についてはネット上に様々な記事（例えば[こちら](https://techacademy.jp/magazine/39548)）があるので割愛させていただく。今回は私が今までの開発から経験において、「もっと早く知りたかったな」「これは便利！」などのExtenstions（拡張機能）を紹介したい。

カテゴリーとしては**見た目**と**機能**の２つに分け、ぜひご参考になればと！

## 見た目

開発モチベーション向上のため、見た目は大事（←個人意見）

### ①Bracket Pair Colorizer
Pythonを書くには()や[]などが欠かせないので、それらを分かりやすくしてくれる。また、他のコードを区別する意味では非常に便利！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/23bf7e84-d9b0-23ed-b7ff-2654ca30eff4.png)
### ②Indent-Rainbow
私はIndent（インデント）のせいで何回も怒られ、Classや関数やループ・IF文などなどで、Indentが出てくる。それを分かりやすく、なおかつキレイに提示してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/f797f6ff-bda1-2d19-b42a-c8aedc676595.png)
①Bracket Pair Colorizerと②Indent-Rainbowの２つの組み合わせた結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/f0bb9a46-9c3f-5b81-c432-a5cd6821ba6a.png)
### ③Material Icon Theme
左側にあるExplorerには「src」「config」「data」「assets」など一般的に存在するフォルダがあり、それらをおしゃれにしてくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/17d84bee-934c-d64b-89f0-652c84826511.png)
結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/6a6536e0-3cc4-4439-f7ce-bfd8b79ba0bc.png)

### ④Peacock
Front-End（フロントエンド）とBack-End（バックエンド）を同時に開発する時には複数のVSCodeを起動するだろう。その際にはどれがフロントなのかどれがバックエンドなのかを分かりやすいように、VSCodeの枠に色を付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/3ba2e90f-8345-e79c-a3e2-05cebb5ab0f7.png)

手順：

    F1 → ">Peacock: change to a Favorite Color" →　色の選択

結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/34ab644c-df62-cf3c-a5a8-ee4cda3be8ca.png)

色：
![hero.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/a188aa89-3755-2b94-2254-80610421a028.png)


---

## 機能

これらのExtenstionsは非常に便利な機能を提供し、開発がよりスムーズに行えるであろう。

### ⑤Python Indent

Indentを自動的に合わせてくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/75b5bbe3-6f96-3dd3-8ad7-e99a7b72bcdf.png)

デモ：
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/5921c80d-97cd-e972-f41c-2fc1e23af77b.gif)

### ⑥Codesnap

コードの解読やデバッグする際にやむを得ずにソースコードのコピペが必要な時があるだろう。その際に簡単かつキレイにできるExtenstions！

デモ:
![b01434ee-cd95-4b5e-ba3f-ba94fa8f5965.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/f641d8e8-9de4-93f7-90df-1b544f28dbbe.gif)

### ⑦Path autocomplete

ファイルやフォルダのパスを入れる時は多いだろう。その際にファイルやフォルダの名前を提示してくれる。これはマジでもっと早く知りたかった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/4e3b6bf2-33f6-53c7-2c74-49caceb7df4c.png)

デモ：
![path-autocomplete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/b5b140b8-b83e-fe47-acd3-1872d1f28a03.gif)

# あとがき
今回は私がVSCodeで開発する時に非常に役に立つExtenstionsをいくつか紹介した。もしご参考になれたらと思います。VSCodeには非常に本当に様々なExtenstionsがあるので、もし何かいいものがあればぜひ教えてください！
それでは！
troccoの設定を変更し、GitHubでPull Request投げてレビューしてみる

## これは何？
ソフトウェア・エンジニアリングでは、コードを変更したらGitHub上でPull Request(プルリク)を投げ、エンジニア間で相互レビューを行うことが一般的です。
troccoはどうでしょう？trocco上で設定を変更したら、相互コードレビューしたいですよね。
それ、troccoでデキます。

## Git連携とPull Request機能
troccoには「Git連携」機能がありますが、その中に「GitHub Pull Request」機能というものがあります。
Git連携自体はtroccoの設定をコード(YAML)で出力し、任意のGitリモートリポジトリ(GitHubなど)にエクスポート(Commit & Push)するものです。

<img alt="" width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61228/e62d1ce7-1458-bb57-1388-e21d28251ea2.png">

この記事では、その機能に含まれる「GitHub　Pull Request」という機能について説明します。
この機能を利用すると、以下のような業務フローを組むことが出来るようになります。

1. trocco上の設定を変更
1. すぐに保存せず、Pull Request作成ボタンを押す
1. troccoが自動的にPull Requestを作成
1. エンジニア間で相互コードレビューを実施
1. Pull Requestがマージされたらtrocco上の設定も保存

## Pull Requestの作り方

### Pull Requestの作成
troccoの転送設定を編集し、任意の変更を加えます。今回は適当にカラム名を変更しました。
変更後、Step.3の確認画面の下部にある「Pull Request作成」ボタンを押します。
<img alt="" width="800px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61228/41c12934-3398-a47d-2164-84185899a01c.png">

すると以下のようなPull Request作成モーダルが出現します。
Pull Requestのタイトルを入力し、「Pull Requestを作成」ボタンを押します。
<img alt="" width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61228/1f429188-ddfc-482b-3cba-ddad62aa4658.png">

内部的にtroccoがPull Requestを作成し、画面は「下書き確認画面」に遷移します。
画面下部の「Pull Request確認」ボタンを押して、実際に作成されたプルリクを確認してみましょう。
（なお、この時点より本設定は保存ができない状態になっています。保存するにはプルリクをマージするか、クローズして下さい）
<img alt="" width="800px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61228/3b1e2f4f-7688-cf21-f323-aad7b452ffe8.png">

すると以下のようにプルリクエストが作成されていることが確認できました。
<img alt="" width="800px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61228/d1b04fb0-bebe-a33c-36df-ac520e07ae29.png">

レビューで指摘があった場合は下書き確認画面より「下書きを再開」を押して編集を加え、Pull Requestに反映することで対応が可能です。
レビューが完了し、Pull Requestをマージするとtrocco側の設定も保存できるようになっていますので、保存ボタンを押して設定を保存して下さい。

## Pull Ruquest作成時の注意点
* ブランチ名やコミットメッセージは設定できません
* プルリクエストの作成を強制するような設定は現状ありません（今後追加予定です）
* コード側を編集しても、troccoに変更反映することは出来ません（今後追加予定です）
  * そのため、プルリクエスト側（リモートブランチ側）を手動で更新することは出来ず、仮に更新してもエラーで変更が反映できなくなってしまいます

## まとめ
いかがでしたでしょうか。今回はtroccoのプルリク作成機能をご紹介しました。
弊社でもtroccoの設定を変更した際は必ずコードレビューでエンジニア間の相互レビューを行うように徹底しております。
IaC的なことがやりたい人は使って見る価値があるかと思います。
これから勉強会を開催する方へ伝えたいこと4つ

# はじめに
こんにちは、Mozuです。
毎週日曜の午後、とあるもくもく会の司会を担当させていただいている者です。
大体半年くらい経ちます。

ということで今回、この半年間で司会として得た学びを共有させていただきます。
_個人の見解ですので、都合の良い場合に使っていただければ幸いです…_

## この記事で書くこと

+ もくもく会の司会で直面した**問題・課題点**4つ
+ 私なりの**解決策**

## こんな方へ向けた記事

+ これからもくもく会・勉強会を主催する！
+ もくもく会・勉強会現役主催者！
+ 司会をする際に気をつけるべきことを知りたい！

(なお、私はエンジニアでもなんでもないため、Qiitaの雰囲気をよく理解していない節があります。そのため公序良俗の範囲内で、フリーダムに書かせていただきます。よろしくお願いします。)

# 1. 人と喋るのは体力が要る

個人差はあると思いますが、特に初めての人と話すとき、相手がどんな人かわからないため、かなり気を遣って話したりしませんか？
特に初めのうちは、30分喋ると結構疲れてくる方もいるかもしれません。

## 解決策

+ 代わってもらう
 + とっっても楽です…！仲間をつくり、積極的に頼りましょう！その方が長続きます。
+ こまめに休憩を入れられるようにする
 + スケジュールや会中のタイムテーブルは、都度見直すとよさそうです。

# 2. 雑談テーマには縛りがある

炎上…怖いですよね…
というわけで。

## 解決策

+ 政治経済宗教系は避ける
 + この話題になりそうなときはすぐ他に切り替えてください。超逃げてください。
+ 食べ物系はその日の参加者の方の好みを聞く
 + 毎週しがちなテーマなので、同じ内容が被ると退屈かも？少しずつズラす工夫です。

# 3. 特定の人と喋りすぎるのは…

…あまりよくないと、私は考えています。
他の人を置いて行ってしまうからです。
特にコミュニティに来て日が浅い参加者は、アウェーに感じるでしょう。
そうでなくても、みんなで楽しくおしゃべりしている輪に入れなくて寂しい経験をしたことは、きっとあなたにもあるはず。。（←失礼）

## 解決策

+ 広く浅い話題を選ぶ
+ 全体に話を振る
+ 「この人は話が長いな」と感じる参加者がいたら、すぐ上記2つに切り替える

# 4. 「合わない人」は必ずいる

(こちら長くなります…ｺﾞﾒﾝﾅｻｲ)
最後にヘビーなやつで申し訳ないのですが、自分と「合わない人」も来る可能性は大いにあります。
ただそのとき、一方的にこちら側の主張を伝えるというやり方には、個人的に少し違和感があります。
私が心がけているのはこんなかんじです。

## 解決策

1. まず、その行動を取った背景を聞く
1. その背景へのフォローをする
1. こちら側の意向を伝える

~~生ぬるいでしょうか…？笑　ですが、~~
たとえばこんな時、あなたにもありませんか？

+ 体調が悪くしんどい
+ 職場で嫌なことがあった
+ 宿題を今まさにやろうとしていた

特に上の2つの場合、家族や友人、同僚にキツく当たってしまう方も多いと思います。宿題に関しても、今やっていなくても本人はやる気になっています。実はいい子です。

これらの状況で「ダラダラするな！」「集中して！」「のびちゃん宿題は！？」などと言われたら、どう思うでしょうか。

このように、あなたが苦手とする言動をする人には、何かそれなりの背景があるはずなんです。
したがって、いきなり「それやめて」と言っても、少なくとも快く受け入れてはくれないんじゃないかなと、私は考えます。

不意に殴りかかられたら不愉快ですよね。相手も同じではないかと思うのです。

自分の意見を伝えたいときは、一旦それを抑えて、相手の意見を聞き入れ、それからこちらの意見を伝える、という方法を、まずは試してみてはいかがでしょうか。強硬措置は最終手段として取っておけば。

# まとめ

この記事では、勉強会やもくもく会の司会者が直面する4つの課題として

1. 人と喋るのは体力が要る
1. 雑談テーマには縛りがある
1. 特定の人と喋りすぎるのはよくないかも
1. 「合わない人」は必ずいる

上記と、それぞれの解決策の例を、お伝えさせていただきました。
参加者一人ひとりが「居心地がよく勉強しやすい環境だな〜」と思えるコミュニティづくりのためのお力添えになっていれば嬉しいです。かしこ。
【Tableau】VIZの垢抜けスキル②〜マップの配色変更〜

この記事は[Advent Calendar 2021 Tableau](https://qiita.com/advent-calendar/2021/tableau2021)の2日目の記事となります。

本日は**マップビューの配色変更**を紹介します。
※私の解説＆キャプチャはTableauDesktopのバージョン2020.4、PCはMacを使ってます。
バージョンが異なったりPCがWindowsの場合、操作が一部異なる場合もあるかもしれません。

マップビューを表示すると、以下のようにデフォルトの白とグレーで配色されます。
これは配色設定の「明るい」という設定になっています。
![スクリーンショット 2021-12-03 0.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/df883b5c-fd0c-b79d-1189-f387e4ddb145.png)

では、他にはどんな配色設定があるのか、どうやって配色を変えていくのかを解説していきます。


マップビューを表示し、**マップ→バックグラウンドマップ**を選択します。
![スクリーンショット 2021-12-03 0.35.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/ed587334-d7e1-f6f1-2dea-8644652815f7.png)
**計7種類**から選択できます。（「なし」は配色変更ではありません）

・明るい
・標準
・暗い
・ストリート
・アウトドア
・サテライト
・オフライン



1つずつ見ていきましょう。

##標準
![スクリーンショット 2021-12-03 0.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/03600b46-6801-1cd1-f321-6983ca2dc737.png)

##暗い
![スクリーンショット 2021-12-03 0.59.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/57e79e20-cb3f-2a51-445b-1529badb67fc.png)

##ストリート
![スクリーンショット 2021-12-03 0.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/abb1347b-62ad-d3ad-59af-74b56f16ef01.png)

##アウトドア
![スクリーンショット 2021-12-03 0.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/c2faeca3-324a-d355-200e-d5e6ac579078.png)

あれ・・・ストリートとアウトドアが同じ・・・？
と思いきや、拡大したところちゃんと違いました。
↓

##ストリート（拡大）
![スクリーンショット 2021-12-03 1.11.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/9bc959a2-e680-1910-2997-2d3fa7d67c66.png)

##アウトドア（拡大）
![スクリーンショット 2021-12-03 1.11.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/8e270630-f5b7-0ca0-77ac-01656c5361f4.png)

いきなり横浜登場ですみません。。
##サテライト
![スクリーンショット 2021-12-03 1.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/6e5ad375-8ac7-91ae-b336-a51358d20ebb.png)

##オフライン
![スクリーンショット 2021-12-03 1.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/11900b9a-06e1-78a0-9fb4-e067dd80adfa.png)

##なし
「なし」に関しては配色変更ではないと、上でも説明しましたが選択するとどうなるか気になる人もいると思うのでキャプチャ載せときます。
![スクリーンショット 2021-12-03 1.01.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/97ffd555-89a1-b90a-77da-0b0a4141a5b7.png)

最後にマップビューの配色変更を活用した、私のお師匠（洲嵜翔さん）のVIZが素敵だったので紹介します。
![MoM_2018W14_World_Wine_Production.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/45fdb497-e104-8793-4a50-eca114924f15.png)
アクションも面白いので是非、publicの方に触りに行ってみてください。
https://public.tableau.com/app/profile/sho.suzaki/viz/MoM_2018W14_World_Wine_Production/MoM_2018W14_World_Wine_Production
Gitでリポジトリからファイルを完全に消す(何番煎じ)

# tl; dr
- こっちよめ
- https://kubotti.hatenablog.com/entry/2017/02/24/155648

# 手順

## 1 確認用のスクリプトをダウンロードする
- https://confluence.atlassian.com/bitbucket/files/321848291/321979854/1/1360604134990/git_find_big.sh

```bash:git_find_big.sh
#!/bin/bash
#set -x

# Shows you the largest objects in your repo's pack file.
# Written for osx.
#
# @see http://stubbisms.wordpress.com/2009/07/10/git-script-to-show-largest-pack-objects-and-trim-your-waist-line/
# @author Antony Stubbs

# set the internal field spereator to line break, so that we can iterate easily over the verify-pack output
IFS=$'\n';

# list all objects including their size, sort by size, take top 10
objects=`git verify-pack -v .git/objects/pack/pack-*.idx | grep -v chain | sort -k3nr | head`

echo "All sizes are in kB's. The pack column is the size of the object, compressed, inside the pack file."

output="size,pack,SHA,location"
for y in $objects
do
        # extract the size in bytes
        size=$((`echo $y | cut -f 5 -d ' '`/1024))
        # extract the compressed size in bytes
        compressedSize=$((`echo $y | cut -f 6 -d ' '`/1024))
        # extract the SHA
        sha=`echo $y | cut -f 1 -d ' '`
        # find the objects location in the repository tree
        other=`git rev-list --all --objects | grep $sha`
        #lineBreak=`echo -e "\n"`
        output="${output}\n${size},${compressedSize},${other}"
done

echo -e $output | column -t -s ', '
```

これで本当に消えたかどうかの確認ができます

## 2 全てのコミットやブランチ、タグから特定のファイルを消して書き換える
`git filter-branch -f --index-filter 'git rm --ignore-unmatch path/to/target/file/or/dir' --tag-name-filter 'cat' -- --all`

ネットで探すと `--tag-name-filter 'cat'` これが抜けてるものが結構引っかかります。これがないとタグを書き換えてくれません。

## 3 先ほどの操作で生成されたバックアップを消す
`git for-each-ref --format="%(refname)" refs/original/ | xargs -n 1 git update-ref -d`

消さないと昔のコミットをここからずっと参照され続けてしまいます

## 4 不要な操作履歴を消す
`git reflog expire --expire=now --all`

(実はあんまりよく分かっていない)

## 5 これで不要なファイルへの参照が全て失われたはずなのでGCをかけて完全に消す

`git gc --prune=now`

単に使われなくなったファイルを消すだけなら `--aggressive` はおそらく不要です。

## 6 再確認
`./git_find_big.sh`

# 以上
以上
Windows10でAWS CLIからMFAをする方法

#1.概要
自分自身が業務をするときに少しつまずいたので、
Windows10にて、AWS CLIからコマンドでMFAをして接続する方法についてまとめました。

ブラウザからはMFAをしてAWSにログインできるが、
AWS CLIからの接続方法が分からない人に読んでいただけると幸いです。

また、この記事が面白いと思った方は高評価、チャンネル登録をお願いします！
(*^^)v

参考URL
https://aws.amazon.com/jp/premiumsupport/knowledge-center/authenticate-mfa-cli/

#2.そもそもMFAとは
MFAとはMulti-factor authentication（多要素認証）の頭文字で、
以下の情報の中から2つ以上を必要とする認証のことです。

* 知識情報（例：ユーザ名、パスワード）
* 所持情報（例：スマホで確認できるコード）
* 生体情報（例：指紋）

従来のユーザ名、パスワードだけの認証よりもセキュリティが向上します。

参考URL
https://moconavi.jp/blog/2021/06/5812/

#3.前提条件
前提条件を以下に記載します。

* Windows10を使用していること
* IAMユーザの作成が完了し、MFAをする設定が有効化されていること
* スマホでMFAコードが確認できること
* AWS CLIのバージョン2をPCにインストールしていること
* AWS CLIにIAMユーザのアクセスキー、シークレットアクセスキーの設定が完了していること

#4.手順
本題となりますが、以下にAWS CLIでMFAをする方法について記載します。

###4.1. スマホにてMFAのコードを確認する
###4.2. AWS CLIにて以下のコマンドを実行する

```
aws sts get-session-token --serial-number arn:aws:iam::(AWSアカウントIDの数字12桁):mfa/(IAMユーザ名) --token-code (MFAのコード6桁)
```
※コマンドを打ち終わる前にMFAのコードが時間切れになった場合は、再度手順4.1を実行してください


###4.3.コマンド実行結果として、以下が返ってくることを確認する

```
{
    "Credentials": {
        "AccessKeyId": "(アクセスキーの情報)",
        "SecretAccessKey": "（シークレットアクセスキーの情報）",
        "SessionToken": "（セッショントークンの情報）",
        "Expiration": "(セッショントークンの有効期限)"
    }
}
```

###4.4.コマンド実行結果をメモ帳等にコピーする
###4.5.AWS CLIにて以下のコマンドを実行する

```
set AWS_ACCESS_KEY_ID = (手順4.3で確認したアクセスキーの情報)
```

```
set AWS_SECRET_ACCESS_KEY = (手順4.3で確認したシークレットアクセスキーの情報)
```

```
set AWS_SESSION_TOKEN = (手順4.3で確認したセッショントークンの情報)
``` 

以上でMFAが有効の場合でもAWS CLIからコマンドを使用することができるようになります。

また、AWS CLIを再起動すると接続できなくなりますが、
セッショントークンの有効期限内であれば再度手順4.5を実行すれば接続できます。

#5.補足手順
再起動のたび手順4.5を実行するのが手間な場合は手順4.5の代わりに以下の手順5.1~5.4を実行してください。
セッショントークンの有効期限内であれば、複数回再起動しても最初から接続できる状態となります。

※セッショントークンの有効期限が切れた場合は、以下のコマンドを実行し、AWS CLIを再起動し、手順4.1から実施してください

```
setx AWS_PROFILE default
```

###5.1.エクスプローラを開き、C:\Users\user\.aws\credentialsをメモ帳等で開く

###5.2.末尾に以下を追記し、保存する

```
[(プロファイル名)]
aws_access_key_id = (手順3で確認したアクセスキーの情報)
aws_secret_access_key = (手順3で確認したシークレットアクセスキーの情報)
aws_session_token = (手順3で確認したセッショントークンの情報)
```

###5.3.AWS CLIにて、以下のコマンドを実行する

```
setx AWS_PROFILE (手順7で入力したプロファイル名)
```

###5.4.AWS CLIを再起動する
あなたはSnowflake Tシャツの買い方を知っているか？それとCONNECT BY

# この記事は何？

[Snowflake Advent Calendar 2021](https://adventar.org/calendars/6220) の3日目の記事です。
今日の記事は小ネタ＆出オチです。

# あなたは Snowflake を知っているか？

新進気鋭のSnowflake、昨年はニューヨーク証券取引所に上場もはたしたユニコーン企業です。
製品カテゴリはDWH（データウェアハウス）。
要するに超高速なデータベース製品。

さばけるデータスケールは数百億行以上だったり、ペタクラスだったり、これまで世の中に革命を起こした最強のデータベースです。

# そんな Snowflake ですが、実はグッズが売ってます。

そんなイケてる Snowflake 皆さんファンになっちゃいますよね？
なっちゃいますよね？

ファンですよね？

そんなあなたに、実はグッズが売っているんです。
↓
https://www.snowflake-store.com/
![Snowflake_Snowstore_-_Snow_gear_for_Snowflake_partners.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/a84d1a73-7624-f90c-0f9e-bef18ef19593.png)

# おすすめ

おすすめは上記のスクショにも載ってますが、「PRAY FOR SNOW TEE」です。
なんとなく Oracle への当てこすりかなって気持ちになりますよね。

**おすすめです**。

# さて、そんなOracleを意識したSnowflakeですが

けっこう、Oracle由来かなって感じの機能が色々あります。
例えば1日目でもかいた **DUAL表** 。

今日はもう一つ紹介します。

# CONNECT BY

`CONNECT BY` ？？？？

これもSQLの構文です。

[公式ドキュメント:CONNECT BY](https://docs.snowflake.com/ja/sql-reference/constructs/connect-by.html)

## 構文はこんな感じ

```SQL
SELECT <column_list> [ , <level_expression> ]
  FROM <data_source>
    START WITH <predicate>
    CONNECT BY [ PRIOR ] <col1_identifier> = [ PRIOR ] <col2_identifier>
           [ , [ PRIOR ] <col3_identifier> = [ PRIOR ] <col4_identifier> ]
```

## どんなやつ？

`FROM句` に指定したテーブルを `START WITH` の条件に指定された行を起点に、CONNECT BY に指定された結合条件で、ループのように探索していく動き方をします。

例えば、下記のようなテーブルが有るとき

![Worksheet_-_問題づくり__1_1__in_1_17s_-_Done-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/7ba366fb-d615-2b8a-3a23-94c013b6d020.png)

こういうSQLを流すと

```SQL
select employee_id, manager_id, title
  from employees
    start with title = 'President'
    connect by
      manager_id = prior employee_id
  order by employee_id;
```

こうなります

![Worksheet_-_問題づくり__1_1__in_368ms_-_Done.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/2d8d0593-1654-cbe7-6009-b105d9fa8b16.png)

Presidentから結合条件に指定された条件を使って、探索していってるのがわかるでしょうか？
再起を使った木の探索みたいですね。

## SYS_CONNECT_BY_PATH

`SYS_CONNECT_BY_PATH` を使うと、階層構造用の文字列を生成できます。

```SQL
select sys_connect_by_path(title, ' -> '), employee_id, manager_id, title
  from employees
    start with title = 'President'
    connect by
      manager_id = prior employee_id
  order by employee_id;
```

![Worksheet_-_問題づくり__1_1__in_362ms_-_Done.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/1083ec49-2e85-5975-918d-2790f39520b1.png)

あら、ちょっと便利じゃない？

# まとめ

- Snowflake ファンはグッズをご検討ください。みんなで **PRAY FOR SNOW** しよう！
- **CONNECT BY** で木を探索できる。木構造をガンガンテーブルに突っ込もう！（会社組織とか、製品を構成する部品の依存関係とか、よくやるよね？）

さぁレッツSnowflake！！！
日曜プログラミング、しよう

弊社はQiitaアドベントカレンダーに協賛する機会を頂いており、[身の回りの困りごとを楽しく解決！【PR】Works Human Intelligence](https://qiita.com/advent-calendar/2021/works-hi)なるプレゼントカレンダーを準備する機会に与っています。

「身の回りの困りごとを楽しく解決」したいですね。とてもしたい。
ついでに周りの似たようなことで困っている人の困りごともなんとかしたい、そういう日もあると思います。
そう思った日が日曜プログラミングの始めどきなので始めましょう。

# 日曜プログラミングのメリット

## たのしい

小さい頃レゴブロックやプラレールで街を作りましたよね。あの楽しみをまたやれます。
ないし、お菓子の空き箱を用いて人形の家を作ったりしましたよね。あれです。
色々試行錯誤した結果なにかできあがってくるのを見ているとニマニマしてきます。

## 礼を言われることがある

作ったものを公開しておくと誰かの役に立ったりします。
実際、年に3～4つ何かを作って私は公開していますが、しばしばお礼を言われたりします。
作ったものが Qiita で紹介されていたときは少し嬉しかったです。

# 日曜プログラミングのきっかけ

「普段繰り返しやっていること」とか
「なんやかんやでうまくいってないこと」とか
「割とよくやる面倒な作業」とかをターゲットに置くのが良いでしょう。

## 私生活、とりわけ趣味

マイナーなアナログゲームを趣味にしているけどプレイヤー人口が増えない、と悩んでいる皆様に朗報です。
「ルールがわからない」「◯◯が複雑だ」に対してツールを作って提供しましょう。
プレイヤー人口を伸ばす障害をこれで1つ除くことができます！

ただ、二次創作ガイドラインなどに照らし合わせて問題無い範疇でやりましょう。
最近のアナログゲームはそういうものを公式が出してくれているものも増えてきました。

## 仕事でよくあるシチュエーション

2つの名簿から差分を抽出したいとか、多数の行から重複する行を削除したいとか。
そういった作業をよくする方もいらっしゃるかと思います。
そういった作業をするアプリは既存でしょうけれども、自分用の用途に特化させたものが欲しくなることありますよね。

# そういうことをする時に私が割とよくやる作り方

ブラウザ上で動くアプリにしておくことをオススメしています。環境で動き方が大きく変わりにくいのが旨味です。

## HTML + JavaScript

OS や端末の種類をあまり問わずに動いてくれます。インストールしたり設定したりする必要も基本的にはありません。
なので、ツールを配布したい時の大本命です。ただし、ブラウザの互換性とかの問題でたまに泣く羽目になります。

## ブックマークレット

ブラウザのお気に入りに JavaScript を仕込んで動かす、というアプローチです。
既存のウェブサイト上で何かをしたい場合にはおすすめですが、先の方法に比較するとちょっとハードルが高いです。

## BAT ファイル

少々暴論ですがだいたいの人が使っているパソコンは Windows ですよね。
なので、だいたいの人の環境では BAT ファイルが動いてくれます。

殆どの人のローカル PC で何か動かさないと解決できない場合にしばしば BAT ファイルで何かを作っています。
でも、書くのがかなり大変なのであまりしたくありません……

## その他

お金がかけられるならサーバサイドを用意したり、AWS とかの機能を使って色々作るのもいいです。
AWS なり GCP なりには無料で使える分なるステキなものもあるので使ってみるのも良いでしょう。
ただ、最初はちょっと敷居が高いんじゃないかなとは思います。手元とサーバーサイドで単純に倍になりますから。

これから始めるという人は「サーバサイドがないとダメ」かつ「手元の PC で動かすだけじゃダメ」
……などと感じてから着手でいいのではないでしょうか。


# 配布方法

HTML + JavaScript ならば無料のレンタルサーバに配置すればすぐに配布できます。
ただ、Git でソースコードを管理することを考えると[GitHub Pages](https://docs.github.com/en/pages)を勧めます。

ブックマークレットであれば[Bookmarkify](https://bookmarkify.it/)や[Hatena::Let](https://let.hatelabo.jp/)といった配布用のウェブサービスがあります。

BAT ファイルも適当なレンタルサーバで配布できます。
そのためだけに借りるのが嫌ならば Google Drive での配布も良いでしょう。
メーカー技術者からエンジニアになってみて

人生充実してますか？？

こんにちは！

エンジニアになって、過ごしている時間全てが自己投資になっていると感じている、
takaakiといいます。

２６歳です。

##前職の内容
工学部を卒業後、地元の電子部品メーカーで技術総合職として、ゼネラリストをやっていました。
業務は、こんな感じ。

・新製品の開発
・製造工程の設計
・製品の性能向上活動
・品質管理

研究設備や工場に行っての業務が多かったため、毎日片道40分かけて出勤していました。

当時不満点があったかと言われると、特にありませんでした。

逆に、上司や先輩方、同期、後輩方にはとても恵まれて、

すごく幸せな環境だったな、と感じています。


##エンジニアになろうと思ったきっかけ

3つあります。


①人生において、時間と場所に縛られたくないと思ったから

②自身の市場価値を上げないと、これからの時代豊かに安定して暮らすのは苦しいと感じたから

③将来的に自身のビジネスを持ちたいと思ったから


まず１つ目。

なぜ縛られたくないか？

それは生きているうちにできるだけ沢山の経験をしたい。
そして、大切な人たちとできるだけ一緒にいたい。

そう考えるからです。

前職は基本的に毎日出社でした。

業務上、設備がないと仕事にならないので、しょうがありませんでした。

しかし、コロナになって家でゆっくりする時間が増え、

それと同時に自分の人生について考える時間が増えました。

そこで、本やYouTubeで自由な働き方をしている方達がいることを知りました。

初めはお決まりの、「そんなことできる訳ない」と考えていましたが、

心は正直で、そんな人生に惹かれました。

仕事しながら時には世界を回ったり、

時には大切な人たちの身近なところ居てあげたいと思っています。


次に２つ目。

なぜ市場価値が上がらないことに危機感を感じたのか？

一番影響を受けたのは『LIFE SHIFT　１００年時代の人生戦略』を読んだことです。

今の仕事を80歳まで続けられるのか？

今の会社がなくなったら、もしくは居られなくなったら、

自分は家族を支えることができるのか？

近年はドックイヤーと言われ、

時代の流れが凄まじく、

大手の大企業でも安泰とは言えない時代となってきました。

経済的に安定するには、

「誰かに依存している状態」でいることはとてもリスクが高いです。

会社を飛び出しても周りから「来てほしい」と思ってもらえるような人間になる。

それこそが、これからの時代を強く生き抜いていく基本戦略だと思っています。


最後に3つ目。

なぜビジネスを持ちたいのか。

素直に、経済力をつけたい、
そして、豊かで生き生きとした社会作りをしていきたい。

こういうことを、パワーを持って実現していきたいと考えているからです。

何をやりたいかは具体的になっていませんが、

多くの人にもっと自分の心に素直な生き方ができる世の中にしていきたいと考えています。

僕自身が周りに言われるがままの人生を、２５歳まで続けてきてしまいました。

もっと早く行動できていれば、

もっと豊かな人生にできていたと感じています。

ただ、人生いつからでも遅くはないと思います。

今日が一番若い日だと思って、一歩踏み出しやすい社会にできたらなと思っています。


##エンジニアとして働いてみた感想（前職と比べてどう変わったか）

圧倒的に毎日が充実しています。

全ての時間が自身の将来への自己投資になっていると感じます。

事実、スキルがアップし、実務経験期間も積み上がっています。

日々市場価値が上がっていると感じられることで、

漠然とした不安は一切なく、

半年後、一年後、５年後がとても楽しみに日々過ごしています。

ただ、求められる仕事のレベルはとても高いです。

楽な仕事だとは思わない方がいいです。

独学の時点で9割やめていくような分野です。

一方、参入障壁が高いからこそ需要が高いまま推移していくし、

現在の会社でエンジニアを採用したいと思っても、

なかなか来てもらえないという実態から、

エンジニアの需要はさらに高まっているとヒシヒシと感じています。

このことから、確かに独学、エンジニアとしての業務は大変ですが、

自分の時間や体力、お金のリソースと投入する価値は十分にあったと思っています。


##今後はどんなエンジニアを目指したいか

社会に対して真の価値があるものを提供できるエンジニアになりたいと思っています。

聞いた話として、「DXの一人歩き」があります。

「流行っているから焦ってDXしたが、むしろ使いにくくて業務の改善になっていない」

こういったことが散見されるようですが、

これでは目的を達成しているとは到底思えません。

しっかりとクライアントや社会の要求を聞き、

時にはこちらから情報を提供して、

本当に価値のあるシステムを構築できるエンジニアになりたいと思っています。

また、それをエンジニアで終わりにせずに、

ビジネスまで持っていきたいと考えています。


最後まで読んでいただき、ありがとうございました！

読者の方の人生に、少しでも良い影響を与えることができたら幸いです。