OmniAICreator/Qiita-1.07M huggingface dataset:
英語初心者のITエンジニアが外資企業で感じたこと②（メール編）

# 概要
英語初心者が外資系企業の現場で働くことになり、実際に現場で感じたことのレポート。
苦労や驚いたことを共有していきたいと思います。

前回の記事でも書いたのですが、英語でメールを書くときのお作法がわからないのでホント最初は苦労しました。
分かっている人からは適当にやっていればいいくらいのことを言われるのですが、ビジネス上失礼があってはいけないのでメールを送付する前に都度先輩に確認しながら送信ボタンを押してましたね。

以下のようなことを思ったりしていました。

# タイトルの付け方が分からない
メールタイトルについてですが日本語だと
「〇〇の商品について」「【ご質問】〇〇サーバの設定について」
といった内容が多いと思います。

英語の場合は
「Request for 〇〇」：〇〇についての依頼
「Inquiry about 〇〇」：〇〇についての問い合わせ
「Notification of 〇〇」：〇〇についてのお知らせ
といった書き方になります。

まあ調べればすぐにわかるのですがノリは日本と同じですね。


#　宛名がわからない
最初はDear　〇〇って書くものだと思ってました。
しかしフォーマル過ぎてなかなか使わないらしいです。

自分はすごくカジュアルですけど以下のように書くことが多いです。
「Hello 〇〇,」
「Hi 〇〇,」
この,（カンマ）は必要らしいのですが、なんで必要かが未だにわからないです。。

#　お願いの仕方がわからない
自分がメールをする時、殆どの場合は「作業お願いをする」「質問をする」です。
質問をするはなんとなくわかるのですが、お願いするときのニュアンスが難しかったです。

Can you 〇〇
Could you 〇〇
Would you 〇〇
I want you to 〇〇
I would like you to 〇〇
Please 〇〇
Would you mind if I ask you to 〇〇

などの表現があって、状況によって適切な表現が変わってくるイメージです。

#　定型文がわからない
日本語のビジネスメールの場合は宛名の後に以下のように書きだすことが多いと思います。
＝＝＝＝＝＝
いつもお世話になっております。
〇〇会社の〇〇です。
＝＝＝＝＝＝＝＝＝

とりあえず英語メールだとこの部分がなく、いきなり本文がスタートです。
もう用件だけすぐに伝える感じ。

たまにGoodday.とかはつけます。

#　MrやMrsって使うの？
うちの会社では基本的に「-san」を使います。
日本語の〇〇さんの意味で使ってます。

誰にでも使えるのでほんと便利なんですが、多分日本企業とのやり取りに慣れてるところならではのようですね。
とりあえずこれもびっくりしました。

# なんだかんだでみんな優しい
人にもよりますが、基本的にみんな優しいです。
まあこちらがネイティブでないこともわかってますし、海外の第二言語として英語を使っている人が多いからですかね。

督促メールとかでも
This is a friendly reminder that 〇〇
みたいな感じで書いてくれます。

返信忘れても、すごく乱暴に返されることはないです。


# 終わりに
というわけで、今回は英語メールで感じたことをまとめてみました。
I hope that this information is helpful to you.
Thank you.
python csvの中身を取り出すモジュール -csv-

<H1>csvの中身を簡単に取り出す</H1>

```python
import csv
f = open("商品データ.csv", encoding="utf-8")　
cr = csv.reader(f) #readerオブジェクトを用意する
dat = list(cr)
f.close()
print(dat)
```
![スクリーンショット 2022-07-12 0.24.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614609/4be30154-8579-b7ca-bbc6-e5b3679672a1.png)
なんとなくwebpackを使うのはもう終わりにする。【動作確認編】

![webpack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632517/14fccf51-cfdd-08a0-03dd-1f49f95d7f2d.png)
[webpack公式サイト](https://webpack.js.org/)

# はじめに
webpackビギナーです。
タイトルの通り、なんとなくwebpackを使っていたのでなんとなくを卒業すべくまとめてみました。:hatched_chick:

今回は**基本動作を確認し概念を理解**します。
具体的なwebpackのファイルの設定方法はまたの機会にしようと思います。

# webpackってなんだ
* JavaScriptのモジュールバンドラー。
* 通常**Babel**と一緒に使われる。
* **複数のファイルを一つまたは少数のファイルにバンドルしてくれる**（束ねてまとめてくれる）。
* ちなみに画像ファイルとかも一緒にバンドルしてくれる。


# webpackを使うメリット
* ファイルをバンドルするので、**リクエストの回数を減らす**ことができる（画面表示が早くなる）。
* **ファイル同士の依存関係を解決**してくれる。

# 【本題】webpackの動作を確認する
* ちなみに現在のディレクトリ構造は以下の通り。
```言語:ディレクトリ構造
.
└── src
    ├── index.html
    └── index.js
```
<br>

## ①webpackが使える環境を整える
* 下記のコマンドで**webpack**と**webpack-cli**をインストールする（両者必須）。
```ターミナル:コマンド
yarn add webpack webpack-cli
```
* この時、**node_modules**、**package.json**、**yarn.lock**が作成される。
    * node_modules：パッケージの依存関係が入っている場所。yarn.lockを参照して作られる。
    * package.json：パッケージ（機能の塊）がバージョンと共にJSON形式で並んでいるファイル。
    * yarn.lock：ここに記述したバージョンをロック（固定）することができる。

## ②webpackを実行してみる
* JavaScriptのファイルに、例えば以下のような簡単な関数を記述する。
```JavaScript:index.js
function sayHello(name){
  console.log("Hello!" + " " + name);
}

sayHello("Risa");
```
<br>

* そしてwebpackを下記のコマンドで実行（ビルド）する。
* 今回は開発環境用に出力するため`--mode development`というオプションをつけて実行してみる。
```ターミナル:コマンド
yarn run webpack --mode development
```
<br>

* すると下記画像のように**distフォルダが作られ、その中にバンドルされたファイル（main.js）が格納**される。
    * dist：distribution（配布）の略。
* **開発用はファイルが圧縮されないので記述多め。デバッグしやすい。**
![dist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632517/b917e4d1-d496-e760-0a87-13592b3a4ccd.png)
<br>

* 次に`--mode production`オプションをつけたコマンドを実行し、**本番環境用のファイルを出力**してみる。
* ちなみに**オプションをつけない場合はデフォルトで本番環境用になる**。
```ターミナル:コマンド
yarn run webpack --mode production
```
<br>

* 下記のように**本番環境用は不要な記述を削除して圧縮されている**ことがわかる。

![dist_pro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632517/b1a6ae70-7b53-ecfe-8d19-ebe888042e54.png)

* webpackすごい！

# まとめ
* 今回は1つのJavaScriptファイルしかバンドルしていないけれど、**通常は膨大なファイルをバンドルする**ので便利。
* **バンドルする際にファイル同士の依存関係も解決**してくれている。開発者は依存関係を考える必要なし（神）。

# おわりに
今回はwebpackの動作確認をしたに過ぎないので、具体的にconfigファイルの設定方法を学びたい所存。

変なところがあったら教えてくださいませ〜〜:pray:
【React18】開発者モードで挙動がおかしい時はレンダリング回数を疑おう

# はじめに
React18 でレンダリングする際の挙動が予想と違く混乱したので記事にまとめたいと思います。

# Version

```bash
$ node -v
v16.15.1
```

```json
"react": "18.2.0"
```

# React18 の挙動
```tsx
useEffect(() => {
    console.log('mount')
    return () => {
      console.log('unmount')
    }
  }, [])
```

まずこちらの挙動は初回レンダリング時にどうなるでしょうか？ちなみにuseEffectは戻り値を設定すると、クリーンアップ関数としてDOMが破棄された際に中の処理が実行されます。

```
mount
```

今まで普通にReactを使っていた方々であれば、このようになると思うはずです。なぜならDOMは破棄していないのでクリーンアップ関数は実行されないからです。ですが実はReact18から以下の様になります。

```
mount
unmount
mount
```

一度レンダリングを二回行なっているのですね。一般的な使い方をしているのであれば影響はないはずですがuseEffectの中で冪等ではない処理をもし行なっていた場合二回呼ばれてしまうので意図せぬ挙動をおこなってしまうかもしれないので注意ですね。

# 補足
補足するとこの挙動はReact18の中でもstrictモードかつ開発者モードの際に発生します。そのためつまり将来的なReactの設計としてレンダリングが複数行われたとしても挙動に問題ない様な構造にすることが求められていることがわかります。

対処法としてクリーンアップ時に処理を行わせるか以下の記事ではrefを使う方法を提案しています。

https://www.sunapro.com/react18-strict-mode/#index_id5

# 最終手段
どうしても今すぐこの挙動を外したい場合はstrictモードを解除しましょう。あくまで最終手段ですが。
```tsx
<React.StrictMode> // この囲っているタグを消す
</React.StrictMode>
```

nextjsを使っているならこのように変更します。

```js:next.config.js
const nextConfig = {
  reactStrictMode: false,
}
```

# まとめ
なぜこのような挙動を起こす様にしたのかは先程あげたこちらの記事にわかりやすく記載されているのでより詳しく知りたい方はこちらを読むと良いかもしれません。

https://www.sunapro.com/react18-strict-mode/#index_id5

また、Reactのレンダリングについては以前僕が記事にしているのでよろしければご覧ください。

https://qiita.com/1129-tame/items/e7bec2822360a6d02f42

# 参考文献
https://ja.reactjs.org/docs/strict-mode.html

https://www.sunapro.com/react18-strict-mode/#index_id5
【Rails】リロードをしないとJavaScript (jQuery)が動作しない

今回はスクールでも頻発している
”リロードしないとjQueryが動かない問題”について記事にしていこうと思います。
かくいう私も見事この沼にハマり、かなり悩まされました、、、

# 開発環境
Rails 6.1.4
ruby 2.6.3

# 目次
- 原因
- 対処法
- 対処法（番外編）

## 原因
私の場合、FontAwesome導入時にjQueryのコードを追記していたのですが、
なぜかそれが削除されており、jQueryが作動しないという状況でした。

## 対処法

下記のコードを追記します。

```ruby:config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)
```  

```ruby:app/javascript/packs/application.js
# import "popper.js";の上などに追記
import "jquery";
```  

私はこれで無事動作するようになりました。


## 対処法

調べていく中で、`Turbolinks`を無効にする、という方法も見つけました。

ただ、Turbolinksは画面遷移を高速化してくれる役割があります。
RailsではGemによって管理され、デフォルトで入っています。

```ruby:Gemfile
gem 'turbolinks', '~> 5'
```  

Turbolinksが原因なら削除すればいいじゃん！と思うかもしれませんが、
上記した方法で正常に稼働する場合は、この方法は取らないほうがいいです。



今回もご覧いただきありがとうございます。
あくまで備忘録なので足りない説明等多々あるかと思います。
行き詰まった際の助けになれば幸いです。
NDA とは？

## 勉強前イメージ

よく企業間でNDA結ぶとか聞く・・・
知った秘密を漏らさないようにしましょう的なやつだと思ってる

## 調査

### NDA とは

Non-Disclosure Agreement の略で、日本語では秘密保持契約と言われています。
相手の会社などに自社の秘密情報を伝える場合に、予定している用途以外の使用や他の人に教えることを禁止する契約です。
例えば共同研究などで自社の技術的な情報を相手に伝える際に締結されます。

締結時期は秘密情報のやり取りを行う前に締結する必要があります。
合意時に伝える情報や管理体制などを決めますが、合意前に伝えるとその情報は秘密情報として取り扱われないので、他の方法で使用されたりするリスクがあります。
また、結果的に合意に至らなかった場合にもリスクが生じます。

### 秘密保持契約の必要性

なぜ締結しないといけないかについては以下の2点になります。

- 特許申請

他社に伝える情報で特許申請を予定する場合は秘密保持契約を結ぶ必要があります。
特許にはざっくりと「みんなが知ってる発明は特許が取れない」ということがあります。
他社に伝えてしまうと「みんなが知ってる発明」なので特許が取れない場合があります。
※「みんなが知ってる発明」でも取れる場合はあります。

- 不正競争防止

他社に伝えた秘密情報で他社がサービスを作った場合、差し止めや損害賠償の請求ができます。
ただ、その秘密情報が自社から伝えたというのが秘密保持契約を結んでないと根拠が弱く、差止めが出来ない可能性があります。

### その他

※法律に詳しいわけじゃないのでざっくりわかったことを書いています。
こういう例のときは秘密保持契約必要ないかも！みたいなこともあると思うのでぜひ調べてみてください。

## 勉強後イメージ

ソースコードの開示ややり取りをするときとかは、秘密保持契約を結ばないといけない・・・って感じかな。
これを結んでおかないとあとから漏らされても止められない可能性があるのね。

## 参考

- [秘密保持契約（NDA）とは？基本を解説！](https://keiyaku-watch.jp/media/keiyakuruikei/himitsuhojikeiyaku/nda)
- [秘密保持契約(NDA)とは？必要項目や雛形について解説。](https://www.contracts.co.jp/useful/6162/)
- [NDA](https://www.otsuka-shokai.co.jp/words/nda.html)
bokeh: すべての折れ線を非表示にする

# 環境
* Python 3.10.2
* bokeh 2.4.3

# はじめに
Pythonの[bokeh](https://bokeh.org/)ライブラリを使って、以下のような折れ線グラフを作りたいです。
* グラフに10本以上の折れ線がある
* 凡例の項目を選択すると、折れ線の表示/非表示が切り替わる。

たとえば以下の様なグラフです。

```python:test.py
import bokeh
import numpy
from bokeh.plotting import figure, output_file, save
import bokeh.palettes

output_file("graph.html")

x_data = numpy.arange(-20, 20, 0.1)
palette = bokeh.palettes.Category10[10]

fig = figure(x_axis_label="x", y_axis_label="y")

for i in range(10):
    fig.line(x_data, numpy.sin(x_data + i), color=palette[i], legend_label=f"y=sin(x + {i})")

fig.legend.click_policy="hide"
save(fig)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/5503db3e-9517-cd68-72d5-f4fa543e75e2.png)

# やりたいこと
上記の折れ線グラフは、各折れ線が重なっていて見づらいので、注目している折れ線以外は非表示にしたいです。たとえば"y=sin(x + 5)"に注目する際は、凡例から"y=sin(x + 5)"以外の項目を選択して、注目していない折れ線を非表示にします。
しかし、折れ線の数が多いため、凡例からたくさんの項目を選択するのが面倒です。そこで、すべての折れ線を非表示にするボタンを追加することにします。


# 解決

bokehの[Button Widget](https://docs.bokeh.org/en/2.4.3/docs/user_guide/interaction/widgets.html?highlight=button#button)を使って実装しました。


```python
from bokeh.models import Button, CustomJS, GlyphRenderer

def create_button(glyph_list: list[GlyphRenderer]) -> Button:
    button = Button(label="すべての折れ線を非表示にする")

    args = {"glyph_list": glyph_list}
    code = """
        for (let glyph of glyph_list) {
            glyph.visible = false
        }
    """
    button.js_on_click(CustomJS(code=code, args=args))
    return button
    
# ~省略~
glyph_list = []
for i in range(10):
    glyph = fig.line(x_data, numpy.sin(x_data + i), color=palette[i], legend_label=f"y=sin(x + {i})")
    glyph_list.append(glyph)

fig.legend.click_policy = "hide"

button = create_button(glyph_list)
save([fig, button])
```


ボタンを押したときのコールバック処理では、`line`関数の戻り値に対して`visible`プロパティを`false`にしました。
`line`関数の引数`visible`の説明は、以下の通りです。
>Whether the glyph should be rendered.

https://docs.bokeh.org/en/2.4.3/docs/reference/plotting/figure.html?highlight=figure#bokeh.plotting.Figure.line

厳密には`visible`プロパティの説明ではありませんが、たぶん内容は同じでしょう。

![すべての折れ線を非表示.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/6fffbfd7-574c-82cf-6a13-fcbe11cff237.gif)

生成されたグラフでボタンを押すと、すべての折れ線が非表示になりました。また、凡例のすべての項目も薄い色の表示になりました。


なお、`fig.legend.click_policy="mute"`で、凡例の項目を選択したときに折れ線を非表示ではなくミュート（薄い色の線にする）にしている場合は、ボタンのコールバック処理内では`muted`プロパティを`true`にする必要があります。


```python
from bokeh.models import Button, CustomJS, GlyphRenderer

def create_button(glyph_list: list[GlyphRenderer]) -> Button:
    button = Button(label="すべての折れ線をミュートにする")

    args = {"glyph_list": glyph_list}
    code = """
        for (let glyph of glyph_list) {
            glyph.muted= true
        }
    """
    button.js_on_click(CustomJS(code=code, args=args))
    return button
    
# ~省略~
glyph_list = []
for i in range(10):
    glyph = fig.line(x_data, numpy.sin(x_data + i), color=palette[i], legend_label=f"y=sin(x + {i})")
    glyph_list.append(glyph)

fig.legend.click_policy = "mute"

button = create_button(glyph_list)
save([fig, button])
```

![すべての折れ線をミュート.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/55d4ce50-721a-d725-5a82-d2712f2f76ec.gif)
何も分からないが頑張って参院選の結果をTwitterから予測しようとする　#1. Twitter APIを活用して関連するツイートを取得

# 背景

[何も分からないが頑張って参院選の結果をTwitterから予測しようとする　#0. 準備の準備](https://qiita.com/sakigakeman/items/3e50e88de211afe51e9d)

の続きになります。


センシティブな内容かもしれませんが、データ分析初学者の戯言だと思って温かく見守っていただければ幸いです。


# 分析ステップの確認
前回の記事にて、~~完璧な~~分析に向けて、以下のように分析スッテプを整理させていただきました。

**1.　Twitter APIを活用して、選挙当日までの選挙に関するツイートを取得**（今回半分）

**2.　取得したツイートをMeCabで形態素解析して、各政党ごとにWordCloudでの関連単語図式化や単語感情極性対応表によるポジネガ分析を実施**

**3.　（今回は）実際の選挙結果と予測結果を照らし合わせて人力ニューラルネットで精度改善**


今回は、#1の半分くらいまで本記事でトライしていきます。


# Twitter APIの活用

APIとはなんぞや系や各種設定については友達のまさひろいその君のこれを参考にしました。
（ほんとはこれ以外も参考にしました、すみません。末尾参考記事参照。）

[素人が今更Twitter APIで遊ぶ　〜その１〜](https://qiita.com/masahiro_isono/items/a6cfdd073686100f0ef1)
（でも少し古いかも。自分も前はConsumer keyやCustomer secret keyと書いていたが、
API keyやAPI secret keyに名前が変わっていた。）


```ruby:API_settings.py
import tweepy

#認証に必要なキー
API_KEY = 'xxxxxxxxxxxx'
API_SECRET = 'xxxxxxxxxxxx'
ACCESS_TOKEN = 'xxxxxxxxxxxx'
ACCESS_SECRET = 'xxxxxxxxxxxx'

#APIの認証
auth = tweepy.OAuthHandler(API_KEY, API_SECRET)
auth.set_access_token(ACCESS_TOKEN, ACCESS_SECRET)

#APIの活用
api = tweepy.API(auth, wait_on_rate_limit = True)
```

とりあえずこれでAPIの活用準備はOK。
tweepy.APIのリファレンスはこちら👉  [APIリファレンス](https://kurozumi.github.io/tweepy/api.html)


# APIを活用して特定の単語が含まれたツイートを取得

先に定義した変数*api*で色々できます。
*api.search*で特定の文字列を含むツイートを検索可能。

**今回は政党名や政治家名を*search_key*に入力することを想定しています。**


```ruby:get_tweets.py
search_key = "xxxxxxx" #調べたい言葉
item_num = "xxxxxxx" #取得したいツイート数

#ツイートを取得してtweet_dataにリストとして保存する関数を定義
def get_tweets(search_key, item_num):
    tweets = tweepy.Cursor(api.search ,q = search_key, lang='ja').items(item_num)
    tweet_data=[]
    for tweet in tweets:
        tweet_data.append([tweet.text])
    return tweet_data

#tweet_dataにリストとして格納
tweet_data = get_tweets(search_key, item_num)
```

各政党や政治家に関するツイートを*tweet_data*に格納していくイメージ。

今日はここまで！
次は特定の日付までのツイートの取得やMeCabでの形態素解析の方法etc...


# 参考記事
- [PythonでTwitter APIを利用する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/51411)
【unity】複数スクリプトによるオブジェクト操作のススメ

# はじめに
以前ゲームを作った際、「○○MoveController」というような名前の、オブジェクトのパラメータの制御、動きの定義、さながら何でも屋のようなスクリプト単体にて制御を行ってしまったため、スクリプトが非常に長くなってしまった。
それにより、後から見返した際に非常に読みにくくなってしまったので、表題の通り複数のスクリプトに分けてオブジェクトを操作することにした。

# 内容
結論としては、今制作しているゲームのオブジェクトの操作は2つのスクリプトに分けて制御を行うことにした。（現時点で2個なので、今後増える可能性は高い）

# 詳細
- 「○○MoveController」
  こちらでは主にオブジェクトの動き（左右上下前後移動、ジャンプ、落下など）を制御している。
  パラメータは後述のスクリプトにて管理を行うため、あくまで「オブジェクトの動き方」を定義しているだけのようなイメージとなる。

- 「○○StatusController」
  こちらでは主にオブジェクトのパラメータや状態を制御している。
  こちらのパラメータを参照して、前述のスクリプトにて行動をしたり、パラメータの管理（削除、値の更新など）を行っている。

# まとめ
まだまだ大雑把な分け方だが、現時点では学習段階であり、今後自分にとって最適な方法を試行錯誤しながら見つけていこうと思う。おすすめの方法があればぜひご教授願いたい。
トークン認証におけるリフレッシュトークンの存在意義とは？

API実装でトークン認証について調べている際に、リフレッシュトークン（アクセストークンの有効期限が一時間ほどなのに比べ、こちらは数か月など）の必要性が分からなかったため調べてみた。
リフレッシュトークンは有効期限が切れる際にサーバーに送信され、両トークンの再発行を行うために使用されるとのこと。
であれば初めからアクセストークンのリフレッシュトークンと同じように長くとれば良いのでは、、、と思ったのが始まり。

# アクセストークンを使った認証の流れ
以下の流れ
1. ユーザーがログインした際に、サーバー側でアクセストークンを発行
2. ブラウザはアクセストークンを受け取り、保持
3. ブラウザはエンドポイントにアクセスする時に、ヘッダーにアクセストークンを付与して送信
4. サーバーはアクセストークンを受け取って、認証を行い、成功するとレスポンス
5. アクセストークンの有効期限が切れたら、ユーザーは再びログイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763848/cc88e786-41a6-236a-441c-d45a15177cac.png)
引用: [【Python】FastAPIでトークン認証を実装してみた](https://fabeee.co.jp/column/employee-blog/mattsun01/)

# リフレッシュトークンを使用した、トークンの再取得の流れ
以下の流れ（5までは↑と同じ）
1. ユーザーがログインした際に、サーバー側でアクセストークンを発行
2. ブラウザはアクセストークンを受け取り、保持
3. ブラウザはエンドポイントにアクセスする時に、ヘッダーにアクセストークンを付与して送信
4. サーバーはアクセストークンを受け取って、認証を行い、成功するとレスポンス
5. アクセストークンの有効期限が切れたら、ユーザーは再びログイン
5. アクセストークンの有効期限が切れたら、ブラウザはトークン再取得のエンドポイントにリフレッシュトークンを送信
5. サーバーはリフレッシュトークンを受け取り、ユーザーに紐付いたリフレッシュトークンと一致しているか確認し、認証に成功したらトークンを再発行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763848/6b07a553-fe0b-1399-c305-329c9ea03c88.png)

# まとめ
リフレッシュトークンの目的は、セキュリティを向上すること。
各トークンの特徴として以下が挙げられる。
- アクセストークン
  - 有効期限が短いため、盗難された場合でも限定された期間しか使用不可
  - 一方、エンドポイントにアクセスする毎にサーバーに送信されるため盗難の可能性が比較的高い
- リフレッシュトークン
  - 有効期限が切れて両トークンの再発行をする際にのみサーバーに送信される

まとめると、何度も送信されるため盗聴される可能性の高いアクセストークンを、その可能性の低いリフレッシュトークンを使用して定期的に更新する、という欠点の補い合いのような感覚。

## 参考文献
この記事は以下の情報を参考にして執筆しました。

- [【Python】FastAPIでトークン認証を実装してみた](https://fabeee.co.jp/column/employee-blog/mattsun01/)
- [52.5.2 OAuthサービス・リフレッシュ・トークン](https://docs.oracle.com/cd/E68486_01/oam/AIAAG/GUID-7EDB027E-91CB-45F2-8B20-9EE2B01C8AC9.htm#:~:text=%E3%83%AA%E3%83%95%E3%83%AC%E3%83%83%E3%82%B7%E3%83%A5%E3%83%BB%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E7%9B%AE%E7%9A%84%E3%81%AF,%E5%8F%AF%E8%83%BD%E6%80%A7%E3%81%8C%E6%B8%9B%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)
【UiPath】データテーブルの操作（6）重複行の取得

# はじめに

この投稿は、RPAツール「UiPath」で Datatable から「重複行の取得」をする方法について、個人的にまとめたものです。

UiPathブログ発信チャレンジ の 11日目の記事です。

https://note.com/shumpei_w/n/n19383ce5abb1


# データテーブルの操作 シリーズ
DataTable の操作方法について記載した記事が、他にもあります。参考まで。

https://qiita.com/miya_gis/items/6c0dd40378db702bd4b2

https://qiita.com/miya_gis/items/edc3557f3dc7cf6b3cfd

https://qiita.com/miya_gis/items/171b3d12775c95f722c4

https://qiita.com/miya_gis/items/cde6c1eb3c33378d9718

https://qiita.com/miya_gis/items/78dd08bc7f0b5497b83d

https://qiita.com/miya_gis/items/f45b67fbc2575f0d6d77

https://qiita.com/miya_gis/items/67eac96071aa7d7d24dd

# 重複のパターン

今回の記事で言う「重複」とは「**同一 DataTable 内で、内容が重複している行**」を指します。2つのデータテーブルでの比較 の話なら、以下の記事を参考にしてください。

https://qiita.com/miya_gis/items/cde6c1eb3c33378d9718

重複のパターンは、大きく分けて「２つ」です。

- A）行単位で重複している（全ての列で内容が同じ）
- B）列の一部で重複している（一部の列で内容が同じ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/32ed5d74-aaeb-37dc-c3ab-65a373ce3ba4.png)

# 重複の検出方法

上記のような重複行を「取得」する方法は、以下の「２つ」があります。

- 1）行ループしながら、重複行を抽出
- 2）Linqの「Where」で、重複行を抽出

以下で順に説明します。


# 1）行ループしながら、重複を抽出

原始的な方法ですが、以下のように行ループしながら、同じ内容の行を抽出します。

ポイントは、データ行のループを回しながら、自分自身のデータテーブルに「同じデータがあるか？」を問い合わせて、「１件」なら重複なし、「２件以上」なら重複あり　としているところです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/21f9bb4e-a56a-f75b-63ce-3fcfa44dc056.png)

この方法の場合、`行の数が多いほど、繰り返しアクティビティの処理コストがかかる` ため、遅くなります。
速度が気になる場合は、以下のように「InvokeCode」アクティビティ内でループ処理をすると良いです。
 
``` vb
'// 引数
'// - in_dt：元のデータテーブル
'// - out_dt：重複がある行 だけのデータテーブル

'// 定義だけのDatatableを用意（.Clone：定義あり／中身のデータ無し）
out_dt = in_dt.Clone

For Each row As DataRow In in_dt.Rows
	'// 「重複なし」なら該当件数１、「重複あり」なら該当件数２以上
	If in_dt.Select(String.Format("[ProductID] = '{0}' AND [ShopID] = '{1}'", 
			row("ProductID").ToString, 
			row("ShopID").ToString)
		).Count > 1 Then
			'// 重複あり：データテーブルに行追加（配列で行追加）
			'// （Rowで行追加すると「この行は既に別のテーブルに属しています」エラーになる）
			out_dt.Rows.Add(row.ItemArray)
	End If
Next
```




# 2）Linqの「Where」で、重複を抽出

Linqで条件を指定して、重複している行だけを抽出します。
重複行がない場合を考慮して、「ary_row」に一旦データを格納し、データがあった場合は「.CopyToDataTable」でデータテーブルに変換し、データがなかった場合は、元のデータテーブルを「.Clone」して空のデータテーブルをセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/397d953c-9928-a9b8-412d-031962030482.png)

以下のように「InvokeCode」アクティビティ内で処理する事もできます。
 
``` vb
'// 引数
'// - in_dt：元のデータテーブル
'// - out_dt：重複がある行 だけのデータテーブル

Dim ary_row As DataRow() 
ary_row = (From row In in_dt.AsEnumerable() 
				Where (
					From row_ In in_dt.AsEnumerable()
					Where row("ProductID").ToString = row_("ProductID").ToString AndAlso
								row("ShopID").ToString = row_("ShopID").ToString
					Select row("ProductID")
				).Count > 1
			).ToArray
out_dt = If(ary_row.Count > 0 ,ary_row.CopyToDataTable, in_dt.Clone)
```

# 終わりに

以上、DataTableの重複行の取得方法について、でした。なにかの役に立てば幸いです。
この記事が参考になったら、 LGTMをお願いします。閲覧ありがとうございました。
外部からローカルホストのReactに接続する(同じネットワーク配下のとき)

外部からローカルホストのReactに接続する方法についてのメモです。
スマートフォンとパソコンが同じネットワーク配下であるときに限定されますが(自宅のwifi環境など)、スマートフォンの画面サイズに合うようにstyleを簡単に調整したいときに、役に立つと思います。
この方法であれば、スマートフォンで画面を確認しながら、デプロイすることなく、vscodeでstyleの調整ができます。

# npm startで起動する場合
a. package.jsonを変更
package.jsonの"start"のところを下記に変更します。HOST=0.0.0.0にします。PORTは何でも可。
HOST=0.0.0.0と&&の間に空白を入れるとエラーになるようです。
```:package.json
"start": "set HOST=0.0.0.0&&set PORT=80&&react-scripts start",
```

b. npm startでReactを起動

c. パソコンのIPアドレスを確認
コマンドプロンプトでipconfigを実行し、パソコンのIPアドレスをメモします。(192.168.11.20など)

d. スマートフォンのブラウザにURLを入力
http://192.168.11.20:80 のように入力します。

# serve -s buildで起動する場合
a. 下記を実行します。tcp://0.0.0.0にします。ポートは何でも可。
serve -s build -l tcp://0.0.0.0:80

Reactが起動するとvscodeのターミナルにURLが表示されるのでそれをメモします。

b. スマートフォンのブラウザにメモしたURLを入力
http://192.168.11.20:80 のように入力します。
【C++】基礎を学ぶ⑭～ポインタ～

# ポインタ
**ポインタ**とは、**メモリ**のアドレス（番地）を指し示す仕組みである
**ポインタ**は**メモリ**を直接扱うために用いられる

## メモリ
コンピュータに取り付けられている**記憶装置**
プログラムで書いた変数や関数などは**メモリ**に保存される

## ポインタを使うメリット
* コードをシンプルに書くことができる
* 効率よく動作するプログラムを書くことができる

## ポインタの構文
| 操作                           | 構文             | 
| ------------------------------ | ---------------- | 
| ポインタの宣言                 | 型 *ポインタ;    | 
| 変数のアドレスを取得           | &変数            | 
| ポインタのさす先へのアクセス   | *ポインタ        | 

## ポインタを使ったプログラム
```cpp
#include <iostream>
using namespace std;
 
int main() {
  int x = 1; // int型の変数xを1で初期化
  int *p;    // ポインタpの宣言
  p = &x;    // xのアドレスで初期化
  *p = 2;    // ポインタが指すメモリへの書き込み
  cout << x << endl;
 
  int y;
  y = *p;  // ポインタ経由でxの値を読み取る
  cout << y << endl;
}
```
```
2
2
```

## ポインタで別の関数から値を操作する
```cpp
#include <iostream>
using namespace std;
 
void f(int *ref) {
  *ref = 2;
}

int main() {
  int x = 1;
  f(&x); // xのアドレスを引数に設定
  cout << x << endl;
}
```
```
2
```

## 次の記事
[【C++】基礎を学ぶ⑮～構造体～](https://qiita.com/rapirapi/items/c6aa755297621ae8b99b)
相手に質問する基準と質問の仕方

## はじめに
チーム開発時に質問基準と質問の仕方について、心がけていたことを書いていきます。

## 質問する基準
まず、エラー内容を調べて、読み解きました。
読み解いたあと30分~45分をめどに、時間を決めて調べながらエラー解決するようにしていました。
3、40分経ってもエラー解決ができず、エラーの解決方法がわからなかった場合、質問をしました。

## 質問の仕方
質問をテンプレート化させて、それに当てはめて質問をしていました。

【質問のテンプレート】
①聞きたいことの一行まとめ
②起きている問題（起きている現象の詳細/エラーコード/スクリーンショット）
③ソースコード（関連するソースコード/全ソースコード）
④問題解決するために試したこと（コードもあれば追記）
⑤問題について自分なりに考えたこと（デバッグ結果/検索結果/自分なりの原因予想）
VSCodeでショートカットを割り当てたい

# 背景

VSCodeを使っているとショートカットで作業を短縮したいことがありますよね
:thinking: ＜選択範囲を大文字(or小文字)にしたい
そんなときがありました

# コマンドを表示する
`Ctrl`+`Shift`+`P`
上記の入力ですべてのコマンドを表示することができます
![ShowAllComands.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303274/4e135489-d62b-3ec6-e837-ac50e9db61b6.gif)

# コマンドを探す
今回は選択範囲を大文字にしたいということでコマンド検索から”大文字”と打ち、確定します
![UpperCase.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303274/b6104cd1-9d19-eb27-8dc0-7f687d7ecf87.gif)

:thinking: ＜でもこれ毎回やりたくないな、、

# ショートカットを登録する
1. 下記入力でキーボードショートカットのタブを開くことができます
    - `Ctrl`+`K` `Ctrl`+`S`
1. 検索欄に"大文字"と打ち込むと該当するコマンド候補が出てきます
1. "＋"ボタンにカーソルを合わせクリックします
1. 任意のキーバインドを入力します
    - 例) `Ctrl`+`O` `Ctrl`+`M`  

![addKeyboardShortcut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303274/35897f3c-83c5-2e7c-ff7c-17ceebdc72a5.gif)

あとは登録したショートカットで大文字に切り替えられるようになります
![added.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303274/048c48b3-f2eb-03ab-5593-72aec06fd316.gif)

以上、ショートカットの割り当て方法でした

# 備考
ツール：[ScreenToGif](https://www.screentogif.com/)
Society5.0でビジネスはどう変わる？

# はじめに
IT×ビジネスという視点で週1本記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

# Society5.0とは
Society5.0とは `サイバー空間（仮想空間）とフィジカル空間（現実空間）を高度に融合させたシステムにより、経済発展と社会的課題の解決を両立する、人間中心の社会（Society）`のことです。
簡単に言うと、__テクノロジーを使ってオンラインと現実を繋ぐことで、人が暮らしやすい社会を作る__　とイメージすればいいと思います。
ちなみにですがSociety1.0〜4.0は以下の通りです。
Society1.0：狩猟社会
Society2.0：農耕社会
Society3.0：工業社会
Society4.0：情報社会

### ■Society5.0を実現するための代表的な技術
Society5.0を実現するためには多くのテクノロジーが必要になりますが、その中でも代表的なものとして以下のようなものがあります。
`IoT、AI、ビッグデータ、5G、ドローン、自動運転システム、遠隔医療、無人店舗、キャッシュレス決済、VR`

# Society5.0でビジネスがどう変わる？
### ■人の活動に制約がなくなる
例えば以下のような項目で今まで様々な制約のためにできなかったことが可能になります。
- 地域格差
ドローンによる過疎地域への効率的な配達
- IT知識
コンピュータに詳しくなくても恩恵を受けることができる
- デバイス
情報端末を共有・連携できるため特定のデバイスに依存しなくなります
- 身体
肉体活動をロボットに代替えできる

### ■人を助ける → 人の介在なし
Society4.0ではあらゆる面で人による判断や分析、情報収集が必要でした。しかし、Society5.0ではこういった人の介在頻度を減らすことができます。

- 運転
Society4.0：カーナビで検索する手間がかる。運転はあくまでも人間。
Society5.0：言葉で行き先を伝えれば自動運転で目的地に到達。
- 情報分析
Society4.0：人が情報を集め、そこから分析することが必要。
Society5.0：AIが情報を分析して結論を出せる。
- 運転
Society4.0：ロボットは人が操作する必要がある
Society5.0：ロボットが生産計画から全ての工程を代行

# 終わりに
Society5.0では、ひと昔前までは遠い未来のことと思っていたようなことが実現します。日常生活や仕事も大きく変化するでしょう。


最後までお付き合いくださりありがとうございました。
Edge (Chrome) のパフォーマンス.プロファイルを Power BI で分析した際の備忘録

# 背景
会社のネットワーク調査の際に、実際のブラウザでの動作も記録しようって話になった
その際に記録したパフォーマンス.プロファイルを Power BI で分析した際の備忘録

# 概要
- パフォーマンス タブにて、プロファイルを記録して保存 as JSON x 沢山
- JSON を Power BI で分析

# 詳細
## プロファイル記録
以下ボタンで自動的に更新記録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/9e12b2d3-3f20-745f-7eab-eebde78ed195.png)

ドキュメントは以下

https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference

## JSON 分析

プロファイル JSON の仕様は以下に記載有り。ここが今回の肝

https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit#heading=h.uxpopqvbjezh

> There is an extra parameter **dur** to specify the tracing clock duration of complete events in microseconds.

最初は、dur or tdur で、全タスクの duration を拾って、積算するか、最大値を拾えばいいんじゃね？と思ったんですが、そんな単純には出来なかった・・

で、再検討・・

- 自動で記録開始＆終了

ってことなので、json 内の開始時刻と終了時刻から計算可能だろう、と考えて別の要素を探したところ

> ts: The tracing clock timestamp of the event. The timestamps are provided at microsecond granularity.

ts なら、以下でいけそう

```math
duration = max(ts) - min(ts) 
```

で、あとは、Power BI というか、Power Queryで処理してやればこんな感じで完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/53a16d59-40d7-7901-fc5b-019426d295d2.png)

見える化の部分はまぁ省略

# あとがき
json 自体巨大化しやすい為、何も気にせずやってしまって、PCが飛びまくりました :laughing: 

作りこむ場合は、ベストプラクティスにもあるように「分析時はフィルターして処理量を減らす」を意識しましょう

https://docs.microsoft.com/ja-jp/azure/data-explorer/power-bi-best-practices

# keyword

how to analyze updating duration in performance profile by power BI
Firestoreを生成直後にアクセスができない場合の対応


セキュリティルールが全拒否になってる可能性があるので確認する。
※ ↓ の `if false;` がダメ。
※ Firebase Admin SDK と Cloud Functions は ↓ 状態のままでアクセスできる。[※公式](https://firebase.google.com/docs/firestore/security/insecure-rules?hl=ja#closed_access)

```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}
```


公式のドキュメント見ながらルールを修正する（手っ取り早いのはオープンアクセス、セキュリティゼロだけど。。）。
[安全でないルールを修正する](https://firebase.google.com/docs/firestore/security/insecure-rules?hl=ja)
PythonでMeCabを使う際のメモ

## はじめに
PythonでMeCabを利用した形態素解析をする際、OS側にインストールされているMeCabの形態素解析エンジンや辞書との関係で少し混乱したため、忘れない様に学んだことをメモしておく。

## 前提条件

【PC環境】
　　Windows 10 Pro　
【ローカル環境のpython.Ver】
　　Python 3.9.13
【仮想環境のpython.Ver】
　　Python 3.9.13

仮想環境を作成することはマストではないが、一旦テストが終わったら丸っと削除するつもりなので、今回は仮想環境で作業している。

## メモ内容

１．OS側のMeCabとPython側のMeCabについて
２．OS側にMeCabを入れずにPythonでMeCabを利用する
３．PythonでMeCabを利用できる状態の時に、OS側にMeCabを入れてみる。

## １．OS側のMeCabとPython側のMeCabについて
MeCabを使った形態素解析をする場合、まずは以下の32bit版 or 64bit版のインストーラをダウンロードすることが多いと思うが、PythonでMeCabの形態素解析をするのに実は必須ではない。

　**・WindowsにMeCabのダウンロード**
　　32bit版：MeCabの[公式サイト](http://taku910.github.io/mecab/#download)からダウンロードする
　　64bit版：有志がビルドしたもの。[こちらのサイト](https://github.com/ikegami-yukino/mecab/releases/tag/v0.996.2)からダウンロード。

上記でインストールしたMeCabは **OS側のMeCab** となり、この中には **"形態素解析エンジン(mecab.exe等)"** と **"辞書データ(sys.dic)"** が含まれる。
そのため、環境変数の設定をちゃんとすると、コマンドプロンプトからでもMeCabの形態素解析エンジンを利用できる。

メリットとしては、OS側にエンジンも辞書もあるため、他のインタフェースからも利用しやすいという事、このOS側の辞書を再構築したりができる事、などがあるかのかと思っている。（あくまでも、私個人が感じたメリットだが。。。）


一方、OS側にMeCabをインストールせず、PythonのみのパッケージでMeCabを使った形態素解析もできる。
しかし、辞書の再構築やユーザー定義辞書の作成については難易度が高そう・・・（そもそも可能なのかも不明）


## ２．OS側にMeCabを入れずにPythonでMeCabを利用する

まず、python環境内で以下のライブラリをインストールする。

```terminal:
pip install mecab-python3
```

試しに`jupyter notebook`などで以下のコードを実行してみる。

```py:
import MeCab
mecab = MeCab.Tagger()
print(mecab.parse("私はYahooプレミアム会員になりました。"))
```

すると、恐らく結果はエラーになるはず。
それはそのはずで、実は`mecab-python3`の中には形態素解析エンジンしか含まれておらず、肝心の辞書データがないためである。


そのため、OS側にMeCabを入れていない場合、別途辞書データを用意する必要がある。
以下を実行して、辞書データのパッケージをインストールする。

```terminal:
pip install ipadic
```

再度 `jupyter notebook`などで以下のコードを実行してみる。

```py:
import MeCab
import ipadic
mecab = MeCab.Tagger(ipadic.MECAB_ARGS)   # インストールした辞書を指定
print(mecab.parse("私はYahooプレミアム会員になりました。"))
```

ちゃんとインストールがされていれば、上記コマンドは実行できるはずとなり、OS側にMeCab本体をインストールしていなくてもPythonで形態素解析ができる様になる。
　※ただし、この辞書データの再構築やユーザー定義辞書の作り方については、可否を含め確認できてはいない。

## ３．PythonでMeCabを利用できる状態の時に、OS側にMeCabを入れてみる。

PythonのパッケージのみでもMeCabを動かせることは確認できたので、この状態でOS側に64bit版のMeCabをインストールしてみる。文字コードは`UTF-8`に設定し、インストール先は適当な場所に変更。

上記インストールが完了した状態で、一番初めに試したコードを再度`jupyter notebook`で実行してみる。

```terminal:
import MeCab
mecab = MeCab.Tagger()
print(mecab.parse("私はYahooプレミアム会員になりました。"))
```

すると、これはなぜか成功する。
`MeCab.Tagger()`の引数に何も値がない場合、デフォルトの辞書（OS側のMeCab）を参照しているのは間違いなさそうなのだが、どうやって辞書までのパスを取得しているのかは正直よく分かっていない。
（環境変数のPath設定前で、かつ任意のフォルダにインストールしているのにも関わらず、ちゃんとデフォルト辞書 [OS側MeCabのipadic] を参照できていそうなので、インストール処理の中で、MeCab共通のデフォルト辞書のパス変数が作られると一旦は理解した。）
もう迷わないRubyのコード自動整形のやり方！！

今日は意外と時間かかったコードを自動で整形してくれる拡張機能を入れてみたのでそちらを記事に書いていこうと思います。
調べても思ったより上手くいかなくて、手こずったためこれから導入する人の少しでも参考になれば幸いです

まずはrufoというgemをインストールします
```
$ gem install rufo
```
VScodeの拡張機能でrufoと検索してダウンロードします
終わり

```
これで一括でrufoでコードを整形できる
$ rufo .
```

```
特定のファイルだけ走らせる時
$ rufo ファイル名（ディレクトリ名）
例：　$rufo app/views/layouts/application.html.erb
```
ちなみにrufoでのコード整形の詳細設定の一例を書いておきます
プロジェクトフォルダ直下に.rufoファイルを作成
```.rufo
parens_in_def :yes　//これでメソッドに引数を渡すときに（）が自動で生成される
trailing_commas :always //これで配列の要素の後ろに必ず,がつくようになる
```

```
parens_in_def :yes　
def bar(x, y)
end
trailing_commas :always 
[
  1,
  2,
]
```

でもこれだけだとerbファイルのコード整形には対応できないので、"beautify"を使ってerbにも対応できるようにしていく
VScodeの拡張機能からbeautifyと検索してインストール

setting.jsonファイルは写真の右上の方にある設定の右にあるファイルのマークのやつ
![スクリーンショット 2022-07-11 21.57.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2124434/70a816f6-d6c2-19f3-e0ca-ff1a7a7fc841.png)
setting.jsonファイルに下記を追加
```.setting.json
  "editor.formatOnSave": true, //保存時にファイル全体をフォーマット
  //"*.html.erb"を"erb"とする
  "files.associations": {
    "*.html.erb": "erb"
  },
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    },
    "css": [
      "css",
      "less",
      "scss"
    ],
    "html": [
      "htm",
      "html",
      "erb"　//"erb"に対応するように追加
    ]
  },
  "[erb]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  }
```
これで保存した時に自動的にコードが整形されるようになります

## 最後に
詳しい詳細や設定はgithubなどをみてみてください
間違ってる事などありましたら教えて頂けると助かります
自作した難解プログラミング言語をEsolangのまとめWikiに登録してみた。

# はじめに
ちょい前に[自作の難解プログラミング言語「DigFiles」](https://qiita.com/yamaserif/items/d9f28fdf22465199dcb4)を作ったので、今回はこちらをEsolangのまとめWikiに登録してみたいと思います。[^1]

# EsolangのまとめWikiとは？
https://esolangs.org/wiki/Main_Page

海外ので管理されている難解プログラミング言語のまとめサイトです。
通常の難解プログラミング言語のリストの他にジョークプログラミング言語など、イロモノ系の言語が集積されています。

ちなみに[ポリシーページ](https://esolangs.org/wiki/Esolang:Policy)に記述されている以下の文によると、ウィキペディアなどとは違って自作の言語に関する記事が勧められているとのことですので、基本的には作者が記事を追加し必要に応じて他の人が修正する形で運営されているようです。
> Articles on languages you made yourself are encouraged, unlike for example Wikipedia. However, these may still be mercilessly edited by others. In most cases this is a good thing.

ちなみに基本的な編集方法はwikipediaと同じっぽいです。

# 追加してみる

さて、早速「DigFiles」を追加してみたいと思いますが、私自身EsolangのまとめWikiどころかWikipediaの編集経験すらないため、ちょくちょく調べながら進めていきたいと思います。

### 1.アカウントを作成する
とりあえず、EsolangのまとめWikiを編集するにあたって、アカウントを作っていきます。
サイト上部にある[Create account](https://esolangs.org/wiki/Special:CreateAccount)からユーザー名やパスワードを入力してアカウントを作成できます。

ここで、注意なのですがアカウント作成にはプログラミングの問題を解く必要があります。
私の場合は「**Befunge**という難解プログラミング言語で次のコードを実行すると何が出力されるでしょう」（意訳）みたいな問題が出てきました。
まぁ、これに関しては適当にその辺にあるオンラインコンパイラとかを流せばいいので、そんな難しくありません。
サクッと正解してやりましょう。

### 2.自己紹介する
現在、スパム対策で自己紹介する必要があるようです。
みんなが見ててきもちのいいアイサツをしておきましょう[^2]

今回は以下の文を[自己紹介ページ](https://esolangs.org/wiki/Esolang:Introduce_yourself)のIntroductionsに追加していきます。
> Hi! I'm Yamaserif. I found esolang interesting and am planning to make and post it myself.

ここで説明にある通り自己紹介時に署名を入れないといけませんので、末尾に"~~~~"を追加して投稿します。
従って、以下のような文字を追加することになります。
```
Hi! I'm Yamaserif. I found esolang interesting and am planning to make and post it myself.&nbsp;~~~~
```

よしよし、上手く追加されたようです。
これで、ひとまず問題なさげですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523180/2b7e4f40-93f1-edf4-15db-f1acf272c99d.png)

### 3.言語の記事を追加する
上の検索ボックスから追加したい言語名を検索し、ページを作成することが出来ます。
[実際に作ったページ](https://esolangs.org/wiki/DigFiles)
他の言語のページなどを参考にしながら、いい感じに書いていきましょう。
（ちなみに私はGithubに書いたことをそのままパクって書きました。）

その後[言語一覧のページ](https://esolangs.org/wiki/Language_list)を編集して、言語へのリンクを張ってあげれば大丈夫です。
なお、ここでのリンクは```* [[DigFiles]]```のように書くと良いです。

### 4.ユーザーページを作成する。
ついでにユーザーページも作っておきましょう。
[こんな感じ](https://esolangs.org/wiki/User:Yamaserif)
ちなみにカテゴリに「People」を付与することで、難解プログラミング言語に関わる人のリストに載ります。おすすめです。

### 5.ざっとリンクのミスなどを確認する
一応、ページの遷移などを確認して完了です。
（まぁ多少ミスっていても気づいた人が直してくれそうなので、ざっくりでいいと思います。）

# まとめ
とりあえず、いい感じにwikiに追加できましたね。
なんとなく、海外のまとめwikiに載っているだけで難解プログラミング言語開発者感が出てくるので、せっかく言語を作ったなら登録してみるとだいぶ満足感ありますよ！

ちなみに言語リストの中身を見ると、実装まではされていなかったり、既存の難解プログラミング言語の拡張版だったりと、だいぶライトに追加されていっているようですのでネットの翻訳機片手にぜひぜひお試しください[^3]。

[^1]:気がついたら今回で3記事目になりました。最初は軽い気持ちでしたがここまで来たらいっそ駆け抜けたいと思います。
[^2]:絶対大事。多分古事記にも書いてある。
[^3]:私の作成した記事の構造などを丸パクリしてもぜんぜん大丈夫ですよ！
可変長引数にリストを渡すときの罠

# なにこれ?
Javaではメソッド定義で可変長引数を設定できますが、その引数にリストを渡すときは注意しないといけないよという話です。

# そもそも可変長引数とは?
メソッドの引数として個数が任意のものです。  
例えばString.formatでは以下のように第1引数に書式文字列、第2引数に書式指示子(%s, %dとか)によって参照される引数を渡しますが、この第2引数は要素数が可変です。
```java
public static String format(String format, Object... args)
```
このため、以下のように第2引数以降は好きな数だけ引数を渡せます。
```java:sample.java
public class Main {
    public static void main(String[] args) {
        System.out.println(String.format("メッセージです"));
      
      	System.out.println(String.format("%s宛のメッセージです", "太郎"));
		
        System.out.println(String.format("%sから%s宛のメッセージです", "太郎", "花子", "次郎"));

    	System.out.println(String.format("%sから%s宛のメッセージです", new String[] {"太郎", "花子"}));
    }
}
```
```:出力結果
メッセージです
太郎宛のメッセージです
太郎から花子宛のメッセージです
太郎から花子宛のメッセージです
```
渡す引数が書式指示子より多い場合は、余分なものは無視されます。  
また、引数は配列として渡すことも可能です。

# 可変長引数にリストを渡す
さて、可変長引数に配列を渡すことで、配列内の要素を参照することができましたが、リストを渡すとどうなるでしょうか?
```java:sample.java
import java.util.*;
public class Main {
    public static void main(String[] args) {
        // 配列を渡した場合
        System.out.println("引数のサイズ:" + calcArgSize(new Integer[] {1, 2, 3}));
        // リストを渡した場合
       	System.out.println("引数のサイズ:" + calcArgSize(List.of(1, 2, 3)));
    }

    public static Integer calcArgSize(Object... args) {
       return args.length;
    }
}
```
このとき結果は次のようになります。
```console:console
引数のサイズ:3
引数のサイズ:1
```
これはリストを渡した場合は、引数がObject[] {List}として処理されるからです。　　
なので、配列と同様にサイズが不定の引数をリストとして渡すには、いったん配列に変換してやる必要があります。　　
```java: sample2.java
import java.util.*;
public class Main {
    public static void main(String[] args) {
        // 配列を渡した場合
        System.out.println("引数のサイズ:" + calcArgSize(new Integer[] {1, 2, 3}));
        // リストを変換して渡した場合
       	System.out.println("引数のサイズ:" + calcArgSize(List.of(1, 2, 3).toArray()));
    }

    public static Integer calcArgSize(Object... args) {
       return args.length;
    }
}
```
```console:console
引数のサイズ:3
引数のサイズ:3
```
【図解】仮想通貨と電子マネーの違いは〇〇？

# YouTubeでも公開中

この記事の内容は動画で見ることもできます！
<iframe width="560" height="315" src="https://www.youtube.com/embed/2cDxvIzVV8o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# はじめに
仮想通貨とは、今めっちゃ話題になっている、「実体を持たない、仮想上のデジタル通貨」のことです。ここで疑問に感じるのが、「電子マネーと何が違うの？」という点でしょう。

仮想通貨は実体が無いので、イメージが難しいですが、実際のお金と同じように扱うこともできます。物理的に存在しない、デジタルな通貨と言われたら、仮想通貨と電子マネーは、同じように思えてしまいます。

しかし、仮想通貨は、電子マネーやクレジットカードと、明確な違いがあります。異なる点は何なのか、まずは、この疑問を解消していきましょう。

# 電子マネーとは何が違うの？

はじめに、電子マネーと仮想通貨は何が違うのか、について解説します。みなさん、Suicaや、ほにゃららPayなどの電子マネーを、一度は使ったことがあるのではないでしょうか。電子マネーと仮想通貨の違いは何でしょうか？。

電子マネーとは、一言でいうと、法定通貨を使いやすくした、現金の代わりの手段です。法定通貨とは、皆さんが普段使っている、日本円のようなおかねのことです。日本という国が価値を認めているのが日本円、アメリカという国が価値を認めているのが、アメリカドルです。このように、国の信用があって、その国が価値を保証している通貨が、法定通貨です。まあ、法定通貨って、単純に、普段買い物ができるお金のことを言っています。

電子マネーは、その法定通貨を、デジタル上において、使いやすくしただけのものです。100円玉や1000円札が、物理的に存在しているのか、それとも、デジタル上で管理されているのかの違いだけです。従って、日本以外の国で、日本円の電子マネーを使用することはできません。

さて、一方で、仮想通貨は、それ自体が通貨として成り立っています。このイメージがしにくい人は、単位に注目すると分かり易いでしょう。たとえば電子マネーでは、「このSuicaの中には、5000円分が入っているぞ」といったように、単位は円を使います。一方で仮想通貨では、「私は今、3ビットコインもっているぞ」といったように、単位はその仮想通貨の単位を使います。このように、そもそもの単位が違います。

日本で使える10,000円、アメリカで使える5,000ドル。これと同じような感覚で、「デジタル上で使える、50ビットコイン」のように、それ自体が通貨となっています。これが、仮想通貨と電子マネーの、大きな違いです。

# ポイントとは何が違うの？

次に、ポイントサービスと仮想通貨は何が違うのか、について解説します。コンビニやドラッグストアなどで買い物をすると、その店特有のポイントがもらえることがあります。得られたポイントは、その後の買い物で、通貨と同じように使うことができます。みなさんもなじみ深いでしょう。

このようなポイントは、目に見えて何かがもらえるわけではありません。「ポイント貰いすぎて財布が重いわー」、なんてことはありません。つまり、デジタル上のお金、デジタル上の価値です。さて、このようなポイントサービスと、仮想通貨の違いは何でしょうか？。大きな違いは、ポイントサービスでは、交換や売り買いができない点です。

ポイントサービスは、法定通貨との交換レートや、使い方のルールが細かく決められています。特に、ほとんどのポイントサービスでは、利用者同士でポイントを渡しあう行為や、ポイントの売り買いといった行為は禁じられています。「俺のTポイントいらないからあげるよ」とか、「楽天ポイントを販売します！」とかはできないってことです。

一方で仮想通貨は、そのような制限はありません。仮想通貨はそれ自体が通貨であるため、利用者同士で自由に交換レートを付けたり、売買できたりします。具体的なイメージがしにくいと思いますが、これが、ポイントサービスと仮想通貨の大きな違いです。

# 続きはYouTubeに公開しています！

[![ねこアレルギーのAI](https://storage.googleapis.com/zenn-user-upload/8db674d6a88921e1308143b3.jpg)](https://t.co/4ltE8gzBVv?amp=1)
[ねこアレルギーの AI](https://www.youtube.com/channel/UCbCHn_q5MUAz5ZDNA-wKsug)
続きはYouTubeに公開しています。お時間ある方は覗いていただけると喜びます。
https://www.youtube.com/channel/UCbCHn_q5MUAz5ZDNA-wKsug

Created by NekoAllergy
エンジニア成長記#0

本日2022年7月11日から、エンジニアとしてアルバイトするという生活が始まりました。

前提として、大学入学後からHP制作・Webアプリ開発の勉強をしてきた自分が経験したこととしては、
・HTML&CSS,JSでフロントエンドの実装(フレームワークなし)
・PHPで簡単なバックエンド機能の実装
・MySQLを用いたCRUD処理
・レンタルサーバーでサイトを公開
・Pythonを使ったExcel操作
・Django,React,FlutterでのWebアプリ開発の超入門部分
・JS,C#(Unity)でのゲーム制作の超入門部分
という風に、広く浅くやってきたという感じです。

今回のアルバイトでは、Webアプリケーションの開発に携わらせていただくことになりそうなので、これまでの土台を活かして成長したいと思います。
【身につけたいこと】
・React,Vue,Nextいずれかでフロントエンドを実装できるようになる。
・バックエンドを基礎から学ぶ
・エンジニアに必要な用語を覚える。
・チーム開発で必須なgithubなどのツールを使いこなせるようになる。
・自信をもって技術を説明できるようになる。
以上です。

地に足付けて頑張っていきたいと思います。
諦めずに挑戦し続けようと思います。
【図解】仮想通貨ってなに？

# YouTubeでも公開中

この記事の内容は動画で見ることもできます！
<iframe width="560" height="315" src="https://www.youtube.com/embed/QwkOL4XO3Z4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 仮想通貨？
ここ数年、仮想通貨や暗号資産、ビットコインなどの用語を、よく耳にするようになりました。なんとなく、自分とは関係のない遠い話、あるいは、危ないイメージや、怖いイメージを持っている方も多いのではないでしょうか。

しかし、この仮想通貨は、今めっちゃ話題になっている、めっちゃ重要な技術です。これからのお金の仕組みや、価値観、あるいは、現在の社会の構造を、全て変えるほどの可能性を持っています。

仮想通貨について、全く理解していない人と、理解している人では、将来が大きく変わってくるでしょう。

仮想通貨には、独特の決まりや、学んでいくうえでの前提知識が、たくさん存在します。 まずは、簡単な言葉や仕組みを抑え、学習に入る前の準備をしていきましょう。



# 仮想通貨ってそもそも、なに？

初めに、仮想通貨ってそもそもなんなのか、について解説します。

仮想通貨は、近年できたワードのため、みなさん耳慣れない言葉でしょう。仮想通貨とは、文字通り、「実体を持たない、仮想上の通貨」、のことを指しています。皆さんの財布に入っているような、100円硬貨や1000円札のような、物理的な物はありません。デジタル上でのみ存在しているため、なかなかイメージしづらいでしょう。

しかし現在では、仮想通貨を使うことで、飲み物や家電製品などを購入することもできるようになりました。たとえば、家電量販店のビックカメラでは、ビットコインを使って支払いをすることができます。このように仮想通貨は、私たちの身近な生活にまで広まってきている、デジタル通貨です。

# 仮想通貨はどこにあるの？

次に、仮想通貨はどこに存在するのか、について解説します。仮想通貨とは、実体を持たない、仮想上の通貨、デジタルなお金であることが分かりました。これに対して、私たちが普段使っている日本円、あるいは、ドルやユーロなどのことを、法定通貨と呼びます。普段の生活の中で、私たちは、この法定通貨を、財布に入れたり、銀行に預けたり引き出したりと、様々な方法で管理しています。

仮想通貨も通貨の1つであるため、専用の管理方法があります。それが「ウォレット」です。詳しくは今後解説しますが、ウォレットとは、仮想通貨を入れておく、財布のようなイメージです。仮想通貨は、ウォレットと呼ばれるもので管理することができる、という点を、頭の片隅に覚えておきましょう。

# 続きはYouTubeに公開しています！

[![ねこアレルギーのAI](https://storage.googleapis.com/zenn-user-upload/8db674d6a88921e1308143b3.jpg)](https://t.co/4ltE8gzBVv?amp=1)
[ねこアレルギーの AI](https://www.youtube.com/channel/UCbCHn_q5MUAz5ZDNA-wKsug)
続きはYouTubeに公開しています。お時間ある方は覗いていただけると喜びます。
https://www.youtube.com/channel/UCbCHn_q5MUAz5ZDNA-wKsug

Created by NekoAllergy
【#26 エンジニア転職学習】DB入門　MySQLトランザクション

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

DBの入門をざっくり学習していきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。


https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
本日はRDBMS（MySQL）のトランザクションに関して学習しました。

* **トランザクション　←Topics!!**

# トランザクション
#### トランザクションとは
**複数のクエリをひとまとまり**にした実行単位。現在DBMSで主流になっている「MVCC」という仕組みで利用することができる。
**ACID**という4つの特性を持っている。
#### ACID特性
* Atomicity（原子性）
    * 一連のデータ操作が「全部成功」か「全部失敗」を保証する
* Consistency（一貫性）
    * 一連のデータ操作前後でそれらの状態を保つことを保証する
* Idolation（分離性）
    * それぞれの処理が矛盾なく行えることを保証する
    * ANSIで分離レベルは4つ定義されている（RU, RC, RR, Serializeble）
* Durability失われない
    * 操作の完了通知後、その操作が永続的となり効果が失われない

使用している教材はこちら↓


https://www.amazon.co.jp/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E5%AD%A6%E3%81%B9%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93-%E3%83%9F%E3%83%83%E3%82%AF-ebook/dp/B00TTRZFDC/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=1657112653&sr=8-1


# おわりに
最後までお読みいただきありがとうございました。
アドバイス・応援コメント等いただけますと幸いです。
Goで並行ダウンロードするならとりあえずこれ書いとけ

# ソースコード

```golang
package main

import (
	"context"
	"fmt"
	"io"
	"log"
	"net/http"
	"net/url"
	"os"
	"strings"
	"sync"

	"golang.org/x/sync/semaphore"
)

func downloadParallel(urls []string) {
	var wg sync.WaitGroup
	var s = semaphore.NewWeighted(5) // 同時実行するgoroutineの数を指定
	for _, u := range urls {
		wg.Add(1)
		go downloadFromURL(u, &wg, s)
	}
	wg.Wait() // goroutineに投げた全ての処理が終了するまで待機
}

func downloadFromURL(_url string, wg *sync.WaitGroup, s *semaphore.Weighted) {
	defer wg.Done() // この関数の実行が終了したことをsync.WaitGroupに伝える
	if err := s.Acquire(context.Background(), 1); err != nil { // セマフォを1つロック
		return
	}
	defer s.Release(1) // この関数の実行完了時にセマフォを1つ解放

	u, err := url.Parse(_url)
	if err != nil {
		log.Fatal(err)
	}
	path := u.Path
	segments := strings.Split(path, "/")
	fileName := segments[len(segments)-1] // URLからファイル名を作成
	file, err := os.Create(fileName) // ファイル名からファイルを作成
	if err != nil {
		log.Fatal(err)
	}
	resp, err := http.Get(_url) // URLからレスポンスを取得
	if err != nil {
		log.Fatal(err)
	}
	defer resp.Body.Close()
	size, err := io.Copy(file, resp.Body) // 取得したレスポンスをファイルにコピー
	fmt.Printf("%s %dKB\n", fileName, size/1024)
	defer file.Close()
}

```

# 解説

downloadParallel関数にurlの入った配列を渡すと、並行ダウンロードしてくれます。
便宜上、semaphoreで同時に実行できるgoroutineの数を制限していますが、値をもっと大きくしても大丈夫です。(ていうか、もっと大きくしないと速さが実感できない)
【Mac】おすすめのランチャーツールRaycast

# Raycast とは

Mac で使えるつかえる無料ランチャーツールです。有名なものだと Alfred があります。
ショートカットキーを押下してファイル検索など様々なコマンドが実行できるツールです。

[公式サイト](https://www.raycast.com/)からダウンロードできます。

## Raycast の良いところ

- 設定がわかりやすい

  クイックリンクやスニペットなどの設定が説明を見なくてもわかるくらいにわかりやすいです。

- UI が良い。

  シンプルで見やすく、体験がすごく良いです。

- 拡張機能が多く、簡単に作成できる。

  様々なサードパーティとの連携ができるので、拡張性が高いです。

  拡張機能は`React/typescript`で作成できます。

## おまけ

`Confetti`コマンドで紙吹雪が出てきます。
ちょっと楽しいです。
ローカルでRailsの環境構築

Railsチュートリアルの通りにCloud9で環境構築をしていましたが、何度やり直しても正体不明のエラーが発生し初学者の自分では解決できそうになかったので、[こちらのProgateの記事](https://prog-8.com/docs/rails-env)を見てMacのターミナルで環境構築し最初からローカルでやるようにしました。ところが、ここでもエラーが発生し、調べたところ下記の記事が検索結果のトップに出てきたのでこの通りにすると一応解決できました。

無限 Rails is not currently installed on this system. 問題の調査 - Qiita
https://qiita.com/amuyikam/items/313bc89c1de320a4257e

この記事の通りに
hash -r
を実行しました。

```
ys@mbp ~ % /usr/bin/rails --version
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.
ys@mbp ~ % hash -r
ys@mbp ~ % rails -v
Rails 7.0.3
```

きちんとRailsのバージョンが表示されました。
なぜこのコマンドでできたのかはちゃんとわかってませんが、ここで完璧に理解しようとしてもあまり意味がないと思うので先に進めます。
【図解】ニューラルネットワークって？Part01【初心者向け】

# YouTubeでも公開中
この記事の内容は動画で見ることもできます！
<iframe width="560" height="315" src="https://www.youtube.com/embed/1hbvFlZjZgc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# ニューラルネットワークの構造

![qiita-nn01-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/b3385b13-082b-1572-f8cf-22cd30ae1337.jpeg)
ニューラルネットワークとは、人工知能を作るための仕組み です。ニューラルネットワークを組み立てることで、人工知能を作ることができます。このように、丸いやつが線で繋がっているようなものを、ニューラルネットワークと呼びます。

![qiita-nn01-02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/97f2799f-d1e3-59f0-defd-5c05b5fd8431.jpeg)
ニューラルネットワーク は層構造になっていて、左から、「入力層」「中間層」「出力層」と呼びます。この ニューラルネットワーク に、画像などを入力すると、入力された数値をもとに、いろいろな計算をしてくれます。

数字をリレーのようにどんどん繋いでいくことで、最終的な結果が導き出されます。ニューラルネットワーク の中でしている計算は、だいたいが足し算と掛け算なので、そこまで難しくありません。

# ニューロンとシナプスの重み

ニューラルネットワーク の中でどんな動きをしているのか、詳しく見ていきましょう。

![qiita-nn01-03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/efe20e32-0bfa-f13a-fa44-bb4af074e5e5.jpeg)
この丸を 「ニューロン」 と呼びます。1 つのニューロンは数字を 1 つ持っています。

ニューロンの数字は、線を通って、次のニューロンへと進んでいきます。この線を 「シナプス」 と呼びます。シナプスは数字の通り道です。このへんの呼び名は覚えなくても問題ありません。

![qiita-nn01-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/086db605-bdec-d402-0888-7c46c138d779.jpeg)
ニューロンから送られた数字は、シナプスを通って、次のニューロンに足されます。このシナプスを通る時、数字は変わります。シナプスにあるこの数字を 「重み」 と呼びます。

この例では、3 に 2 が掛けられ、次のニューロンに 6 が運ばれます。このように、重みがかけられながら、数字は次の層へと進んでいきます。

# 重みは重要度

1 つのニューロンからは、たくさんのシナプスが伸びています。

![qiita-nn01-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/48a8efa8-420a-2e82-b6a3-f6bb1f745139.jpeg)
その全てのシナプスに同じ数字が進んでいきます。このとき、その通り道によって重みの値は違っています。ニューロンの数字は、それぞれのシナプスへ進んでいき、それぞれの重みが掛けられて、次のニューロンに足されていきます。

![qiita-nn01-06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/5b5c5e06-e627-f541-97c5-0961d87c8e4f.jpeg)
これらの重みは、前のニューロンからきた値が、次のニューロンにとって 「どれくらい重要か」を表しています。重みの値が大きいほど、その値は次のニューロンにとって大切な情報となっています。


# 続きはYouTubeに公開しています！

[![ねこアレルギーのAI](https://storage.googleapis.com/zenn-user-upload/8db674d6a88921e1308143b3.jpg)](https://t.co/4ltE8gzBVv?amp=1)
[ねこアレルギーの AI](https://www.youtube.com/channel/UCbCHn_q5MUAz5ZDNA-wKsug)
続きはYouTubeに公開しています。お時間ある方は覗いていただけると喜びます。
https://www.youtube.com/channel/UCbCHn_q5MUAz5ZDNA-wKsug

Created by NekoAllergy
企業の技術スタックをまとめて見れるデータベースサイトを作ってみた

## とりあえず作ったもの
[what we use](https://www.whatweuse.dev/?utm_source=qiita&utm_medium=post "what we use")という企業の技術スタックデータベースサービスを開発してみました。
各企業ごとの技術スタックがカテゴリ（プログラミング言語、ミドルウェアなど・・・）ごとに見ることができます

https://www.whatweuse.dev/?utm_source=qiita&utm_medium=post

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2731282/e8283b51-04c0-c600-5c38-9986efc7427b.png)
掲載させていただいている企業は僕の独断と偏見で、技術的な発信をよく目にする企業をとりあえず8社ピックアップしました。(反響あればどんどん拡充予定)

更新情報が気になる方は是非[Twitterアカウント](https://twitter.com/whatweuse "Twitterアカウント")フォローお願いします。


## 作った経緯
企業の技術スタックは主に、エンジニア採用のJob Descriptionに書かれていることが多いと思います。
しかしそれはあくまで、「この企業のポジションを見てみよう」→「へーこんな技術使ってるんだ」という流れで、技術スタックから企業やエンジニアポジションを探すのは難しい状況なのかなと思います。
また、技術スタックだけでなく、例えば採用しているナレッジ共有ツールやチャットツールへのこだわり（例えば絶対Slackじゃないと嫌だとか、Notion使っている企業いいなーとか）もある人はたくさんいると思うので、そういう情報が集まったデータベースが作れないかと思いました。

## 技術スタック
正直なところ、この手のサービスはそこまで斬新なアイディアではなく、誰かが一度は思い付いたであろうアイディアな気がしています。一方で、僕が知る限り類似のサービスがないので、何かしらサービス運営にハードルがあったりするのかなと思っています。なのでとりあえず今回は以下のスタックでβ版を超低コストで作ってみました。

Y Combinatorの創立者、Paul Grahamも以下のような名言を残しております。（言い訳）
> 自分がリリースしたものが恥ずかしくないなら、リリースが遅すぎるということを肝に銘じよう。

- Next.js
- Vercel
- Chakra UI

今まではVue + Netlify + TailwindCSSとかで作ってたりしたので、今回はガラッとReact側に寄せて勉強してみました。
Chakra UIも使いやすかったです。あれ？バックエンドはどうしたって？超低コストβ版なので、JSONをフロントに定義して済ませました笑

## どうやってデータを集めるか
ここが一番の問題なのですが、とりあえずは、上記8企業の採用サイトに行って、手動で集めてきました。
各社いろんなフォーマットの採用サイトを持っているので、今後もスクレイピングで自動化は難しいかと思っています。

じゃあどうやってデータを集めていくかというと、管理ページを作って、その企業の人事の方にアップデートしてもらうというのが理想です。エンジニア採用サイトに「技術スタックはこちら」みたいな感じでリンクを貼ってもらえると最高です。

ただ、そんな理想は一筋縄では実現できなさそうなので、当面は手動で情報を掲載していくことになるかなと思っています。多分1企業追加あたりのコストはブログ記事1本書くくらいのボリューム感になると思うので、個人でモチベーション続く限り細々とやっていきます。


## どんな機能を追加していきたいか
既述の通り、超低コストβ版で作ったので、開発段階で諦めた機能はいくつかあります。
#### ① 技術スタックから企業が検索できる機能
今はTOPページが企業一覧になっているのですが、「この企業どんな技術使ってるんだろう？」というニーズと同じくらい、例えば「Goを採用している企業を見たい」というニーズもあると思うので、もし反響あればこの機能は最優先で実装したいなと思います。

#### ② 企業チームごとに分けて技術スタックを登録できる機能
ある程度の企業規模になると、チームごとに採用している技術スタックが異なるということは往々にしてあります。会社全体として使っているもの（例えば、GitHubとかSlackとか）は共通スタックとして括って、チームごとに技術スタックが見れると、その企業の開発チームのイメージが湧きやすいはずです。

#### ③ 技術スタックにテックブログを紐づける機能
例えば、BigQueryを採用してますという企業が、じゃあ実際どんな使い方してるの？という部分は企業ごとのテックブログで発信されています。what we useでBigQueryを使っている企業で検索したときに同時に、企業のBigQueryに関するブログ記事も一覧化されると面白いかなと。

## まとめ
ということで、とりあえず作ってみたというだけなので、もしもっと拡充されたデータを見たいだとか、上記の実装予定の機能いいね！という方は是非LGTMいただけると嬉しいです！

またTwitterアカウントのフォローもお願いします！
https://twitter.com/whatweuse

*2022年8月19日追記*
追加開発機能に関してはこちらに書いてます！

https://qiita.com/mycndev/items/ec35b074ae9e44fa734a


[^1]: 企業によっては技術スタックページを採用サイトに掲載していますが、軽く調べた感じ、あまり多くはなさそうでした。