OmniAICreator/Qiita-1.07M huggingface dataset:
AndroidでVolleyを使った送信でcookieを使用する場合

# VolleyでCookieって・・・どうすんねん？
[AndroidでVolleyを使ってMultipart/form-data形式で送信してみる](https://qiita.com/cozyk100/items/927da723204f5c54a35b)でAndroidでVolleyを使ってHTTPでMultipart/form-data形式で送信する例を書きましたが、送信する相手がAPI形式で同時に認証もやってくれるならいいのですが、そうではない場合があります。

例えば、API形式のI/Fが全く用意されていないく、ブラウザからHTMLで送信する画面しか用意されていない場合があります。この場合、通常
1. ログイン
1. Multipart/form-data形式で送信
1. ログアウト

という流れになりますが1.でサーバ側からのレスポンスヘダーのset-cookieで払い出されたcookieをHTTPヘダーに設定して2.で送信しないと「ログインされていません」となります。

Volleyを使って1.、2.、3.で3回通信する場合、1.のレスポンスのset-cookieを2.、3.に引き継ぐ必要があります。

# CookieManagerを使う
自前で1.のレスポンスヘダーのset-cookieを2.、3.のリクエストヘダーに設定する実装をゴリゴリ書いてもいいのですが(cookieの仕様がわかってしまえばそんなに難しくない)CookieManagerを使えばもっと簡単にできます。

## CookieManagerとは？
CookieManagerはjava6くらいからありますが、
https://docs.oracle.com/javase/jp/8/docs/api/java/net/CookieManager.html
のクラスの説明文を見ると、
```
                  use
 CookieHandler <------- HttpURLConnection
       ^
       | impl
       |         use
 CookieManager -------> CookiePolicy
             |   use
             |--------> HttpCookie
             |              ^
             |              | use
             |   use        |
             |--------> CookieStore
                            ^
                            | impl
                            |
                  Internal in-memory implementation
```
HTTP通信にHttpURLConnectionを使っていれば、CookieManagerがCookiePolicyに従って、CookeStoreに保持してくれます。
CookeStoreはインタフェースであり、デフォルトではインメモリにCookieが保持されます。CookeStoreの独自実装を自作することにより、ファイル等にシリアライズすることも可能です。

VolleyはHttpStackに
1. HttpClientStack
1. HurlStack

が使えますが、どちらにしてもHttpURLConnectionを使っているので、CookieManagerでCookieの保持ができます。

# CookieManagerを実装に追加する
前回、[AndroidでVolleyを使ってMultipart/form-data形式で送信してみる](https://qiita.com/cozyk100/items/927da723204f5c54a35b)作成したクラスにCookieManagerを実装を追加します。

```kotlin:HttpPostMultiPart.kt
class HttpPostMultiPart(private val context: Context) {

    /** CookieStore */
    private var cookieStore: CookieStore // ※１
    /** CookieManager */
    private var cookieManager: CookieManager = CookieManager()

    init {
        cookieManager.setCookiePolicy(CookiePolicy.ACCEPT_ALL)
        CookieHandler.setDefault(cookieManager)
        cookieStore = cookieManager.cookieStore  // ※１
    }

    ・・・(後略)
```
たった、これだけです。

1. CookieManagerを初期化して、
1. Cookieポリシーを設定(全て受入、全て拒否、同一サーバの場合)
1. CookieHandlerでデフォルトのCookieManagerを設定

これだけだと、CookieManagerのクラスとリクエスト、レスポンスを作る処理と何の関連も無いのでは？と思うかもしれませんが、CookieManagerのJavaDocの冒頭の説明の通り、内部でHttpURLConnectionが使われていれば自動的に、CookieManagerがCookieStoreにCookieを保持してくれます。

ただ、
1. ログイン
1. Multipart/form-data形式で送信
1. ログアウト

とCookieを引き継げばいいだけであれば※１の部分も要りません。※１が要らなければ実質、追加するのはたったの5行です。
内部でCookieがどうなっているか見たい、Cookieを操作したい場合は※１が必要です。

内部でCookieがどうなっているか見たいはこのようにします
```kotlin
cookieStore.cookies.forEach { cookie ->
    Log.d(TAG, "name = $cookie.name, value = ${cookie.value}")
}
```

独自のCookieをを追加した場合は
```
CookieStore#add(URI uri, HttpCookie cookie)
```
を使います。

VolleyだとCookieを使うのは意外と簡単でした。処理にはほとんど影響しません。
【DevContainers】fatal: detected dubious ownership in repositoryの対処法

## はじめに

VSCodeのDevContainersでGitを使用した際に`fatal: detected dubious ownership in repository`が出力され処理が終了しない場合の対処法について記載します。  

## 対処法

`devcontainer.json`の`postCreateCommand`で次を実行するように設定します。  

```devcontainer.json
{
  "postCreateCommand": "sudo git config --system --add safe.directory ${containerWorkspaceFolder}"
}

```

`--global`で実行すると`~/.gitconfig`が作成されホストの`.gitconfig`が反映されなくなるため`--system`を使用しています。  

コマンドを別のファイルに記述する場合には以下のように記述します。  

ワーキングディレクトリをsafe.directoryに設定する場合には

```sample.sh

sudo git config --system --add safe.directory "${PWD}"

```

レポジトリルートをsafe.directoryに設定する場合には

```sample.sh

sudo git config --system --add safe.directory "$(git rev-parse --show-toplevel)"

```

## 上記以外の方法

レポジトリルートで`sudo -R ${USER} ./`を実行しても解消されました。
Azure Functions Linux 従量課金プランでの疑似リモートシェル

# はじめに
この記事で紹介する内容は OSコマンドインジェクション につながるため、あくまでも検証目的です。

# きっかけ
Azure Functions Linux Consumption Plan(従量課金プラン) では [Kudu](https://learn.microsoft.com/ja-jp/azure/app-service/resources-kudu)による、WebSSH(アプリケーションコンテナへの接続) や Bash 接続(Kudu への接続)が利用できません。
そのため、アプリケーションが動作する環境の詳細を手軽に確認することができません。

そこで、アプリケーションコード内からコマンドを実行することで実行環境の情報を探ってみます。

# コード例
```javascript:index.js
const util = require("util");
const {exec} = require("child_process");
const execAsync = util.promisify(exec);

module.exports = async function (context, req) {
    const cmd = req.query.cmd || "date"
    const output = {
        cmd,
    }
    context.log(`${cmd}`)
    try {
        const result = await execAsync(`${cmd}`);
        output.stdout = result.stdout;
        context.log(output.stdout)
    } catch (e){
        output.error = e
        context.log(e.stderr)
    }

    if (req.query.type === 'json') {
        context.res = {
            body: output
        };
    } else {
        context.res = {
            body: `${output.cmd}

${output.error ? output.error.stderr : output.stdout}`
        };
    }
}
```

# 実行例

- echo とか

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/678a9200-ceeb-175e-a20d-ed0ffd0ea0d6.png)


- df -h

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/4e07db16-b45b-624f-d5dc-697ce5431b1d.png)

- cat 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/ea5ec24f-4bcb-301a-0bfb-9d9de42930dd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/b2e06fff-0c70-ad50-b6cb-126c769ca0a2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/bde03a19-ba18-86ef-f043-1a46f9b15a30.png)

- ps

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/f98234a7-70f3-1520-2d4c-baf8fd8a90c1.png)

いろんなことがわかりますね。やったぜ。
エクセル初学者がいかにして初級レベルをマスターするか

# はじめに
就活が終わった文系の大学3年生です。入社後にエクセルが必要となるそうなので1日かけて初学者が勉強してみて、効率がよさそうだと思った勉強方法を書きます。一応申し上げるとエクセルのバージョンは2019です。

## 勉強方法の考え方
実務経験がない素人意見ですが私はエクセル上達の過程は簿記のようなものであり、基礎的な書式を詰め込んだあとはひたすら実践練習を積むべきだと仮定を立てました。基礎的な書式をもう少しブレイクダウンすると、
①デザイン、フォント、レイアウトなどの見せ方
②VLOOKUP、SUMIFなどの関数
③ピボットテーブルやオートフィルなどのお役立ち機能
④各種ショートカット
の4つだと考えています。これらのそれぞれについて有名な書式を覚えてあとは手を動かして練習の流れかなと思います。

## 具体的な勉強方法
私は①〜③の練習はこのサイトで行います。練習問題がファイル付きで無料で提供されておりとても助かります。

・http://www.beginners-site.com

また、ショートカットは適宜こちらのページを参照しています。前者はエクセルのショートカットキー一覧で、後者はコンサルの方がよく使われるショートカットキーを解説されていて興味深いです。
・https://excel-ubara.com/EXCEL/EXCEL901.html
・https://www.youtube.com/watch?v=pHJOh8zGsmM

私が今後とるつもりの流れは一つ目のサイトで練習、知識の足りない部分は適宜ググる
→後日2回目を解き、動作が煩わしく感じる部分はショートカットがないか探す
というものです。
ここまでやればエクセルの入門の動きはインストールできるのかなとか個人的には思ってます。どなたかのお役に立てれば幸いです。それでは👋👋
クラッシュロワイヤルに出てくるゴブリンをトラッキングしたった ①データ取得


# Motive

以前に [pytorch+yolov3を使ってマリオを物体検出してみた](https://qiita.com/satsukiya/items/0e84444df56504ec4da2) でGPU搭載の自作PCで学習と推論をかけてみましたが、ここから約2年が経過しました。 現在ではAWSやGCP、Azureなどのクラウドサービスで機械学習が出来るみたいで、時間をかけてキャッチアップが必要と感じました。
ここではデータ取得から物体検出までの流れを書いてみようと思います。

# Dataset
身の回りのものですぐに学習・推論ができそうな題材として一番多くプレイしているゲームが最適と思いました。
自分の場合は[クラッシュ・ロワイヤル](https://clashroyale.com/ja/)でゲームをすることが多いのでプレイ動画を撮ろうと思います。

![images.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/22e5580b-0d7e-59ab-269c-b3fda19a03b2.jpeg)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/4cc6cacf-efb1-040f-6887-fa5e2fd1b01a.jpeg" width=320>

# Method

プレイ動画を取得する方法は[omlet](https://omlet.gg/)というゲーム配信アプリを使います。このアプリの中にプレイ動画を保存する機能があるので、こちらを使います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/50bee6ca-f0c3-5659-6153-45f6a079d67a.png" width=320>


次に冒頭部分などの不要な部分を削除します。
スマホアプリでできると思いますが、ここではiMovieを使って最初と最後をカットしてmp4形式の動画を生成しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/4962f337-fc27-b3fb-4e57-45cfdf9cb64f.png" width=640>

最後に動画から画像に変換します。
ここでは変換用のスクリプトファイルをダウンロードして使っています。 1秒間に60フレームの画像があって動画再生時間も約4分あるので全て画像を取得すると約1万5千枚になってしまいます。今回は単に機械学習でモデルを作りたいだけなのでラベリングする枚数は少なくて良いので1秒間に1枚で十分です。なので取得するフレームレートを`-r 1`にしています。

```sh
wget https://raw.githubusercontent.com/wkentaro/dotfiles/f3c5ad1f47834818d4f123c36ed59a5943709518/local/bin/video_to_images
pip install imageio imageio-ffmpeg tqdm
python video_to_images -r 1 your_video.mp4
```

実行後は `your_video` フォルダ内にフレーム画像が格納されています。

# To Be Continued
次回は [cvat](https://www.cvat.ai/) を使ったアノテーション(ラベリング)の付け方についてです。

#### (参考) 学習用データとして使っている動画
<iframe width="560" height="315" src="https://www.youtube.com/embed/lQfd4OHW9ug" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Pythonコード内でCPU／メモリ使用率を監視する

# Pythonコード内で確認したい
topコマンドでも確認できますが、コード内で監視したい場合、次のようにします。

```python
import psutil

cpu_percent = psutil.cpu_percent(percpu=True)
mem = psutil.virtual_memory() 

print('cpu: ',cpu_percent)
print('memory: ',mem)
```

>cpu:     51.4000	   55.5000
memory: 17.9


一定の時間間隔で監視する場合は、

```python
import psutil
import threading
import time

def monitor_cpu(initial_time,event):
    print("START monitor_cpu")
    while not event.wait(0.1):
        elapsed_time = time.time() - initial_time
        cpu_percent = psutil.cpu_percent(percpu=True)
        mem = psutil.virtual_memory() 

        cpu_percent = '\t'.join(["{:10.4f}".format(v) for v in cpu_percent])
        print("time:", int(elapsed_time))
        print("cpu: ", cpu_percent)
        print("memory: ", mem.percent)
    print("END monitor_cpu")
```

```python
event = threading.Event()
initial_time = time.time()
m = threading.Thread(target=monitor_cpu,args=((initial_time,event)))
m.start()　# 開始
tmp = 0

# 監視したい処理

event.set() # 終了
```

>START monitor_cpu
time: 0.16
cpu:     51.4000	   55.5000
memory: 17.9
time: 1.84
cpu:      0.0000	   90.9000
memory: 17.9
time: 1.95
cpu:    100.0000	    9.1000
memory: 17.9
...
...

マルチCPUは、CPUごとの使用率が返されます。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

機械学習、ARアプリ（Web/iOS）を作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
yolo データセットの水増し（水平回転）

![000000000025.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/5ab71824-9785-5237-480c-4d08c9b98ee5.jpeg)
![000000000025_flip.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/0da2ef09-af0b-3ec2-59a9-66abfb4a31e3.jpeg)

# アノテーションデータが十分に用意できない

学習する対象によっては、数千枚数万枚のアノテーションデータが必要ですが、アノテーションをするのには時間がかかります。

# 水増ししよう

物体検出のYoloモデルを学習させるためのデータセットが十分に用意できない場合、既存のデータを水増しすることができます。
今回は、水平回転の手法を使います。
方法は、画像を水平回転させて、アノテーションラベルテキストもcenter_xを逆にするだけ。
（ただし、水平回転させてもラベル名が変わらないものに限ります。例えば、右手と左手というラベルがある場合、ラベルクラス自体も入れ替える必要があります。）

他には、画像にノイズを入れたりもできます。

# 方法

```python
import os
import shutil
import cv2

images_dir = "dataset/images/train/"
images_list = os.listdir(images_dir)
labels_dir = "dataset//labels/train/"
labels_list = os.listdir(labels_dir)

for image in images_list:
  label = os.path.splitext(image)[0] + ".txt"
  if label in labels_list:
    image_path = os.path.join(images_dir,image)
    img = cv2.imread(image_path)
    flip_img = cv2.flip(img,1)
    dest_image_path = images_dir + os.path.splitext(image)[0] + "_flip.jpg"
    cv2.imwrite(dest_image_path,flip_img)

    label_path = labels_dir + label
    source_file = open(label_path)

    dest_label_path = labels_dir + os.path.splitext(image)[0] + "_flip.txt"
    with open(f'{dest_label_path}', 'w') as f:
      f.write("")

    for line in source_file:
        staff = line.split()
        class_idx = int(staff[0])
        center_x = float(staff[1])
        center_y = float(staff[2])
        width = float(staff[3])
        height = float(staff[4])
        flip_center_x = 1 - center_x
        flip_line = (class_idx, *[flip_center_x, center_y, width, height])
        
        with open(f'{dest_label_path}', 'a') as f:
            f.write(('%g ' * len(flip_line)).rstrip() % flip_line + '\n')
```

これで、水増ししたファイルが"_flip.jpg", "_flip.txt"として保存されます。

![000000000357.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/ac7e35b2-bf20-3f5c-ed49-33ed4adb09a4.jpeg)
![000000000357_flip.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/43b50abe-10e9-8f61-0c4f-2318e086106b.jpeg)
🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

機械学習、ARアプリ（Web/iOS）を作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
WebView2の話#1

# WebView2コントロールの使い方、最初の一歩
WebView2コントロールに使ってみたので、その時の覚書です。

## よく見るサンプルコード
WebView2コントロールを使う場合、MS含め良く見るのは以下のようなサンプル。
WebView2コントロールは初期化に時間がかかるので、以下のように非同期処理で初期化が完了するまで待つ必要があるそうです。

~~~C#
private void Form_Load(object sender, EventArgs e)
{
    InitializeAsync();
}
private async void InitializeAsync()
{
    await WebView2.EnsureCoreWebView2Async(Nothing);
}
~~~

このサンプル通りならまだ普通に動いちゃうところが落とし穴・・・
今回はLoadイベントで初期ページを開きたいので、以下のように書くんだけど、WebView2.CoreWebView2.Navigateの呼び出しでNullReferenceExceptionが発生して全く動かない・・・

~~~C#
private void Form_Load(object sender, EventArgs e)
{
    InitializeAsync();
    ///中略
    WebView2.CoreWebView2.Navigate(uri);
}
private async void InitializeAsync()
{
    await WebView2.EnsureCoreWebView2Async(Nothing);
}
~~~

## ちゃんと動くコード
↑のよく見るサンプルだと、ちゃんと非同期処理されないのでWebView2コントロールの初期化が完了するまで待ちません・・・
初期化の完了を待つ前提でWebView2.CoreWebView2.Navigateを呼び出していたので、そこでNullReferenceExceptionが発生しちゃってました。

正解は以下のように書くこと。
こうすることで、ちゃんと非同期処理でWebView2の初期化の完了を待つようになります。

~~~C#
private async void Form_Load(object sender, EventArgs e)
{
    await InitializeAsync();
    ///中略
    WebView2.CoreWebView2.Navigate(uri);
}
private async Task InitializeAsync()
{
    await WebView2.EnsureCoreWebView2Async();
}
~~~

まあなんだ非同期処理をちゃんと理解してればハマらないんだろうけど、めったやたらと使わないから忘れちゃうよね・・・
【Python】ファイル読み込み時にデコードエラーの行をスキップする

Webスクレイピングで取ってきたテキストデータなど、大量の有象無象の文章をPythonで読み取ろうとする際のデコードエラー`'XXX' codec can't decode byte XXX in position XXX: illegal multibyte sequence.`、ありますよね。

エラーが起きる文字を無視するだけなら、ファイルを開くとき
```Python
open("ファイル名", errors="ignore")
```
とするだけで事足ります。

しかし、これでは
`タイ文字「ผิดพลาด」は「エラー」という意味です`
が
`タイ文字「」は「エラー」という意味です`
になってしまいます。（タイ文字はデコードエラー文字のメタファーとして扱ってるだけです）

テキストマイニングのような大量の文章を扱っているとき、わざわざこのような壊れた文章を処理に取り入れなくていいってなりますよね？（もちろん、そもそもスクレイピングで取ったような文章なんて壊れてても誤差みたいなもんでしょうが、、）

このようなデコードエラー文字が存在する<strong>行ごと</strong>読み取りをスキップしたいときのコードはこちらです。

```Python
f = open("開くファイル", "r")

texts = []
line = True
while line:
    try:
        #1行読み取り
        line = f.readline()

        #get rid of empty
        if line == "":
            continue

        texts.append(line)

    except:
        #ここに来たということは、読み取り時にエラーが起きたということ
        #この行をスキップ！
        pass

f.close()
```

`readline()`で一行ずつ読んでいって、エラー起きた時のハンドリングでスキップさせればいいということでした！
LIFFアプリ開発で失敗した事

# 概要
LIFFアプリの開発を2021年12月から2022年12月現在までに受託開発として、6件携わらせて頂いた経験から、自分の中での振り返りと共に、LIFFアプリでの開発で失敗したこと、ハマったことを書こうと思います。

## 自分の基本情報
- フロントエンドエンジニア
- 受託開発をメインにしている

## LIFF開発での使用言語等
- Vue
- TypeScript
- Nuxt.js 
- たまにReact


## LINE IDトークンの有効期限切れでバックエンドでの検証が失敗する

LINE ID トークンが切れてバックエンドからのデータ取得が失敗し、画面が真っ白になってしまうということが多発し、下記の記事等を参考にさせていただき、なんとか乗り切りました。

https://zenn.dev/arahabica/articles/274bb147a91d8a


## LINEのお友達追加時に出てくる「提供元」が意図していないものが出てしまった

LINEのお友達追加時に出てくる画面内で、「提供元：○○○」という表示にプロバイダー名が入るということを知らずに、「提供元：prod-サービス名」のようになっている事に気づき修正するということがありました。

## 終わりに
先にテーマを決めて書いてみたのですが、LIFF起因での出来事というのが思ったより少なく書くことが無かったため、2023年は個人開発でもLINEAPIを使用してみて、来年のアドベントカレンダーに参加できたらと思いました。
【Ruby】UFO演算子

UFO演算子について。深掘りしきれなかったので、自分用メモです。。。

# UFO演算子とは
`<=>`という演算子があります。これは、両辺のオブジェクトを比較して値を返すものです。
self <=> otherで比較した時の挙動は
- 左が大きい ＝「1」
- 等しい ＝「0」
- 右が大きい＝「-1」
となります。

これをもう少しわかりやすく書くと
```ruby
1 <=> 0 #=> 1
1 <=> 1 #=> 0
0 <=> 1 #=> -1
```
となります。

また、UFO演算子を利用するために、`Comparable`モジュールをインクルードする必要があります。
`Comparable`モジュールをインクルードしたクラスでは、インスタンス同士を比較演算子を利用して比較することができます。
`<　, <= , == , > , >= , between?`

# `<=>`演算子の使い方
先ほど説明した`<`や`>`などを利用することができますが、比較結果を-1、0、1を返すように定義する必要があります。
クラスに<=>演算子をメソッドで定義して、インスタンスを比較できるように定義し直して使う場合もあります。
CSVをExcelで読み込んで文字列のまま保存する方法

CSVはシンプルな書式のため、いろいろなところで利用されますが、これまた便利なExcelで開いた結果、元の情報が削られてしまうことが多く発生します。

* 「0123」のような、最初の0が消えてしまう
* 数字が変な形式になってしまう
* 勝手に日付になってしまう

など。
コッチは単純に列を追加したり入れ替えたりしたいだけなのに・・・
ってこともよくありますよね！

まずはベーシックな、「CSVをExcelで開いて文字列のまま保存する」方法を記録しておきます。

```CSV:テスト.csv
"番号","日付","長い数字","前ゼロ"
"123","2022-12-29","1234567890123","098765"
```
こんなCSVを用意して、普通にExcelで開くと、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/b6cfb661-2d9f-fc9a-d493-37b49c097819.png)

**む？** ってなりますよね・・・。
なんの気なしにこのまま保存してしまうと

```CSV:テストをそのまま保存したヤツ.csv
番号,日付,長い数字,前ゼロ
123,2022/12/29,1.23457E+12,98765
```

こうなってしまいます。悲しい話です。

なので、ひとまず「文字列のまま利用する」ということをやってみます。

個人的にいろいろ試して簡単だったのは、「データ」→「データの取得：テキストまたはCSVから」でデータの取り込みを行う方法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/6a59bc4f-96e5-2681-2feb-c2a7ae2fb5c5.png)


※操作がラクなのでとりあえずCSVを開いてからデータの取り込みをしていますが、Excelを新規に起動してから行ってもよいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/b7d6109e-4c01-31f7-bbda-a99793402441.png)

インポートして

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/efbc4bb5-a5b7-d7df-f571-470cf3c4a65c.png)

「データの変換」をクリックします。

そうするとPower Query エディタ―が起動します。
かなり強力なツールなのでいろいろ面白いのですが今回は割愛して、文字列変換のみにしましょう。

右の「適用したステップ」から「変更された型」を削除します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/b731e4cb-cdd7-b0c1-6a86-8cf2a638ef8b.png)

要は、**Excelが良かれと思ってやってくれた型変換を戻すだけ**なんですね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/52fb5704-6488-b641-6eca-98a43b8228a4.png)

「閉じて読み込む」をクリックして読み直します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/4077d154-9c7b-0175-6941-859b281bc586.png)

CSVを開いたところから作業を始めた場合は、このまま上書き保存することもできます。
Excelを新規で開いたりとか「名前を付けて保存」とかした場合は、「複数シートがあるよ」と
警告が出ますが「OK」ボタンを押せば該当のシートを保存できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553291/a9e233a0-391d-b23e-a233-b1a69b5795b5.png)

CSVを扱うのにひと手間かかってしまいますが、Power Query エディターで絞り込んでからCSV保存、といったこともできます。
いろいろやる作業の一部と考えれば価値はあるのではないでしょうか。


お役に立てればなによりです。
paizaラーニング「二次元配列の行ごとの和 Python3編」

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__row_sum
#### 私の解答
```Python3
n, k = map(int, input().split())
a = [[int(i) for i in input().split()] for _ in range(n)]

for i in range(n):
    ans = sum(a[i])
    print(ans)
```
#### 解答例
```Python3
n, k = map(int, input().split())
a = [[int(i) for i in input().split()] for _ in range(n)]

for i in range(n):
    s = 0
    for j in range(k):
        s += a[i][j]
    print(s)
```
vscode で C++, Python コードを vim っぽく tab 補完するメモ(文字列は補完できないっぽ?)

## 背景

vim で tab 補完ばりばり使っている...

でも C++, Python の補完(ale + lsp)が vim だとちょい機能不足なので, vscode 使いたい...

vscode tab 補完どうやるの...?

vscode 1.74 or later を仮定します.
 
## 設定

settings で `tabCompletion` で検索して on にします!

![Screenshot from 2022-12-28 21-38-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/7c33a70b-ca45-7ca9-a162-61484d762c7d.png)
 
(json 直編集どうやるんじゃろかね)

## 文字列とかも補完したいが lsp 次第っぽ?

連想配列で key が文字列の場合に文字列補完できると便利です.
vim (の ale?) だと文字列も tab で補完できます.

vscode だとできません...

https://stackoverflow.com/questions/47872641/vscode-autocomplete-intellisense-for-strings

https://github.com/microsoft/vscode/issues/23962#issuecomment-292079416

![Screenshot from 2022-12-28 21-43-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/5b98c3cc-d014-2d01-a121-74a87a7c1e65.png)

quickSuggestions.strings on にすると, 言語が設定されていなければいけるっぽいようですが,
言語設定が行われてると, その言語でのコード補完の設定次第のようです...

少なくとも標準の? vscode C++, Python 補完では文字列は補完できませんでした.. :cry:

とりあえずは連想配列のキーなどは, 文字列定数変数作って対応でしょうか...
(spelling miss 対策にはなりますネ)
【ルール説明・safety】avoid-implicit

こちらの記事は [Ansible lint Advent Calendar 2022 カレンダー2](https://qiita.com/advent-calendar/2022/ansible-lint) 14日目の記事になります。

今回はルール [avoid-implicit](https://ansible-lint.readthedocs.io/rules/avoid-implicit/) について説明します。

### avoid-implicit

[avoid-implicit](https://ansible-lint.readthedocs.io/rules/avoid-implicit/) は [ansible.builtin.copy](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/copy_module.html) においてコピー元のデータの型が文字列で渡された時に形式が不明ならエラーを出力します。[ansible.builtin.copy](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/copy_module.html) ではコピー元のデータは`src`からデータのパスを指定します。また文字列をテキストファイルへコピーする（書き込む）場合は [ansible.builtin.copy](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/copy_module.html) ではなく可能な限り [ansible.builtin.template](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/template_module.html) を利用します。

| Parameter | Comments |
| -- | -- |
| content<br><br>string<br><br>added in Ansible 1.1 | When used instead of src, sets the contents of a file directly to the specified value.<br><br>Works only when dest is a file. Creates the file if it does not exist.<br><br>For advanced formatting or if content contains a variable, use the ansible.builtin.template module. |

もし [ansible.builtin.copy](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/copy_module.html) モジュールを利用して文字列をコピーする（書き込む）場合はデータの形式をできるだけ明示するようにします。

#### 問題のあるコード

```yaml
---
- name: Example playbook
  hosts: localhost
  tasks:
    - name: Write file content
      ansible.builtin.copy:
        content: { "foo": "bar" } # <- データの形式が不明瞭
        dest: /tmp/foo.txt

```

#### 修正されたコード

```yaml
---
- name: Example playbook
  hosts: localhost
  tasks:
    - name: Write file content
      vars:
        content: { "foo": "bar" }
      ansible.builtin.copy:
        content: "{{ content | to_json }}" # <- jinja2 フィルターを用いて JSON 形式へ変換する
        dest: /tmp/foo.txt
```

### その他

ドキュメントにもありますが [ansible.builtin.copy](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/copy_module.html) で文字列のコピー処理（もしくは書き込み処理）は可能ですが機能が少なかったり正式な方法ではないため [ansible.builtin.template](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/template_module.html) を利用しましょう。

### 参考サイト

* [avoid-implicit — Ansible Lint Documentation](https://ansible-lint.readthedocs.io/rules/avoid-implicit/)
[git] 過去のコミット履歴を削除する方法

## 初めに
過去のコミット履歴にAPIキーが含まれてしまっていて、セキュリティ的に問題があった。
削除しないといけなかったが、gitコマンドを使ったことがなく悩んだので備忘録を記述する。

## git filter-branchコマンド
git filter-branchコマンドを使用すると、全てのコミット履歴から対象のファイルを検索できる。
例えばAPIキーが記述された、enb.localファイルを誤ってコミットしてしまったとする。

その際に必要なコマンドは、以下です。
git filter-branch --index-filter 'git rm --cached --ignore-unmatch src/env.local' HEAD

env.localにはパスを指定することが大切です。
ファイル名だけだと実行できず、自分は詰まりました。。

git filter-branchの --index-filterオプションで前コミット履歴を対象にすることができる。

削除コマンドの
git rmに--cached --ignore-unmatch と続いていますが、
これは仮に各コミットにenv.localがない場合にエラーを回避するための記述です。

このコマンドを押下すると、各コミット分処理が走り、対象のファイルを削除してくれます。

## 最悪のケースに使うらしい
ただこの filter-branchコマンドは前コミットに対して行うため使わない方が良いらしい（当たり前だが）
ただ過去のコミットに誤って、機密情報が紛れ込んでいたということは起こると思う。
そんな時の最終手段としてこのコマンドを使うのが良いと思います。
その際はしっかりと動作確認を忘れずに。

## まとめ
今回は過去のコミット履歴を削除する方法について紹介しました。
初めての経験だったので勉強になりました。

参考文献
https://ez-net.jp/article/52/rU6oV5VK/QrNM3eiH4CF_/
https://b3s.be-s.co.jp/nocategory/5174/
paizaラーニング「二次元配列の最大の要素 Python3編」

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__search_max
#### 私の解答
```Python3
n, k = map(int, input().split())
a = [input().split() for _ in range(n)]
max = 0
for i in range(n):
    for j in range(k):
        if int(a[i][j]) > max:
            max = int(a[i][j]) 
print(max)
```
#### 解答例
```Python3
n, k = map(int, input().split())
a = [[int(i) for i in input().split()] for _ in range(n)]

ans = 0
for i in range(n):
    for j in range(k):
        if a[i][j] > ans:
            ans = a[i][j]

print(ans)
```
Unity DOTSでEntityを消したい

# 本題の前に
ただの大学生がUnity DOTSを実際に触ってみる。2日目です。いつものように嘘が混じってるかもしれません。ごめんなさい。
昨日の記事は [こちら](https://qiita.com/AtsuAtsu0120/items/5270e43e350533f81b5c)
## 環境
Unity 2022.2.1f1
Entities 1.0.0-pre.15
Burst 1.7.4
# 今日の内容
生成したEntityを消したい。今日はその一心で頑張ってました。そして、ISystemとSystemBaseの差に気がつかされました。
昨日は内容が本当に内容だったので、今日は適当に書いたコードも載せます。
# Entityを消す。
どうやら、2通り消し方があるっぽい。
１個目が``EntityManager.DestroyEntity()``を使う方法。
２個目が``EntityCommandBuffer.DestroyEntity()``を使う方法です。
## 何が違うのか
正直、良くわからんというのが本音。ﾊﾞｯﾌｧｰｯﾃﾅﾝﾔ
今わかってるふんわりとしたものを書きます。
### EntityManager
１個目の方は上手く使うのは難しそうだったってこと。``foreach``で条件に合ったEntity全部消し飛ばすコードを書いたら、EntityManagerを過労死させるんじゃねぇって言われました。（意訳）
まぁ詳細に言えば非同期処理に対応していなくて連続して使用するとパンクしてしまうようです。
### EntityCommandBuffer
２個目のほうは使うまでが遠い。あと``ISystem``では使えないっぽいですね。（最適化できないっぽい？）なぜかというと、``ISystem``は``struct``でしか使えず、それでは``CommandBuffer``の取得の最初の段階である、``BeginSimulationEntityCommandBufferSystem``の取得が上手くいかなかったです。ただ、``CommandBuffer``の取得方法は色々あるみたいなのでもう少し**検証が必要**かもしれません。
### 結局
``EntityManager``は取得が簡単で、``ISystem``でも``SystemBase``でも使えるようです。なので簡単な処理はEntityManager。複雑な処理は``CommandBuffer``を引っ張り出してくる手法が良さそうです。
## 適当に書いたコード
昨日紹介した、Unity公式ドキュメント中に落ちているサンプルコードで色々遊んでいました。しばらくしたら、Cube消したいなーというコードです。
```C# 
using Unity.Burst;
using Unity.Entities;
using UnityEngine;

[BurstCompile]
public partial class CubeSystem : SystemBase
{
    private BeginSimulationEntityCommandBufferSystem _entityCommandBufferSystem;

    protected override void OnCreate()
    {
        // EntityCommandBufferの取得
        _entityCommandBufferSystem = World.GetOrCreateSystemManaged<BeginSimulationEntityCommandBufferSystem>();
    }
    protected override void OnDestroy()
    {
        
    }

    [BurstCompile]
    protected override void OnUpdate()
    {
        int i = 0;
        var _ecb = _entityCommandBufferSystem.CreateCommandBuffer();
        foreach (var (_componentData, _entity) in SystemAPI.Query<RefRW<CubeData>>().WithEntityAccess())
        {
            _componentData.ValueRW._liveTime += 0.1f;
            if(_componentData.ValueRW._liveTime >= 1000f)
            {
                //CommandBufferでデストロイ！
                _ecb.DestroyEntity(_entity);
            }
            i++;
        }
        Debug.Log($"キューブの数は、{i}個です。");
    }
}
```
で、色々苦戦したことを上に書いたのですが、それ以上に知っておいて得だなと思ったコードがあるので、少し紹介します。
多くの人が知ってるかもしれないんですけど…
### コード解説（そんな大そうなものではない）
#### ECSのforeach
```Entity.ForEach```という構文がどうにも好きになれない私は純粋なforeachで書いてみました。しかし、Componentは取得できてもEntityが取得できない！！！という現象に陥りました。結果以下のコードで良かった。
```c#
foreach (var (_componentData, _entity) in SystemAPI.Query<RefRW</*Componentの条件*/>>().WithEntityAccess())
{
    //処理
}
```
```WithEntityAccess()```が肝でした。そうすると、Entityも一緒に降ってくるようになって幸せになりました。
え？Entity.ForEachを使えば楽だって？それは分かってる。
#### 情報更新
ネットのどこを漁っても``BeginSimulationEntityCommandBufferSystem``の取得をするときは``World.GetOrCreateSystem<BeginSimulationEntityCommandBufferSystem>()``を使え！って書いてありました。
しかし、バージョンの更新の影響なのかそれではエラーになってました。なので、``World``のコードを漁るとそれっぽいメソッドを発見。
``World.GetOrCreateSystemManaged<BeginSimulationEntityCommandBufferSystem>()``でした。**Managed**ね。よくわからんけどこれで動いたからよし！（後々理解したいの意）
# おわり
昨日よりは内容あったんじゃないっすか？明日は、当たり判定とかInput Systemとの連携とかそこら辺をやりたい所存。
雑記にお付き合いいただきありがとうございました。また明日。
RubyMineからJestを実行する

# はじめに
RubyMineから、Jestを実行するための備忘録になります。

今利用している環境では、Dockerコンテナー内のNode.jsを利用しているため、
RubyMineのリモートインタープリターの構成を使った設定手順となっています。

※コマンドラインからjestを実行出来る環境が必要となります。（[Jestの準備[公式サイト]](https://jestjs.io/ja/docs/getting-started)）

```yml:参考 docker-compose.yml
version: "3.9"
services:
    node:
        image: node:18.12.1-alpine
        volumes:
            - .:/proj
        tty: true
```



# RubyMineの設定

「実行構成の編集...」 を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/ed8b7f75-a8ca-8a9d-8459-2183f7d9a944.png)

実行/デバッグ構成、新規構成の追加「＋」から「Jest」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/1882bb14-6c55-e52c-16bc-31873b677e4d.png)

Node.js インターブリターの設定から「Remoteの追加...」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/1cf88189-5422-fe7d-45d0-07032f13eede.png)

「DockerCompose」を選択し、サービスから「node」を選択
「node」は、docker-compose.ymlで設定している名称となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/9f6b8d0c-f221-db9d-63d2-091f435de37b.png)

「OK」を選択し、設定内容を確定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/588378af-e81e-d11f-9cdb-9c6dad900c42.png)


## テスト実行

「すべてのテスト」を選択し、「実行 'すべてのテスト'」アイコンをクリック
テストを開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/bf46ea4f-1cb2-56dc-3d93-ccbf5a755e85.png)

テスト結果が表示されると完了です。　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/dc10d89f-429e-cfc8-d64c-e979ad2c1206.png)


# Bindings not found
RubyMineのリモートインタープリター構成で「describe」や「test」を選択した個別テストを実施しようとすると「Bindings not found」と表示されテストが実行できない状態となりました。
こちらTransformerを「@swc/jest」から「babel-jest」に戻すことで改善されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/267b22d2-d1c4-75f6-10c3-1c9fd693d7c3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251940/e5184f19-9ec9-6e6b-a102-75a2e073a7d9.png)

# 参考
https://pleiades.io/help/ruby/running-unit-tests-on-jest.html
Salesforceでフローを作成しよう～商談作成時に取引先責任者の役割を必須で作成する方法～

Salesforceでフローを作成しました

今回は
「商談作成時に取引先責任者を必須で選択して「取引先責任者の役割」を必須で作成する方法」
です

前提として商談に取引先責任者と参照になる必須項目を作成します
（今回API参照名をtest01__cとします）

![test01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/feca1f16-8c69-042e-1b03-57b14edb84af.png)


この項目を必須として商談ページレイアウトに表示させます
そうすることにより商談作成時に取引先責任者を必須で選択します


選択した内容を元に商談に紐づく「取引先責任者の役割」が自動作成されます

![商談02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/d9c3d1fe-76db-647a-aee9-653fb8bde591.png)


このフローの概要は以下となります

![フロー-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/e2445b47-8821-0f90-ba3a-a2b957f70789.png)

起動条件は商談作成時です

![条件０１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/e6139311-9e10-d20c-df07-289f0784d643.png)

レコード作成　は以下となります

![フロー２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/6c914e76-f054-ef75-3f98-ad8fd4cb9204.png)
入社して初めての年末なので一年を振り返る　

## 入社して経験したこと
4月に未経験エンジニアとして大阪のベンチャー企業に就職し、早くも8ヶ月が経過しました。

8ヶ月の間に色んなことがありました。

不安なこと、辛いこともたくさんあったけど、その分嬉しい、楽しい、成長した！
と思える瞬間もたくさんありました。

実家に帰る新幹線の中で、振り返りたいと思います


## 何をやったか
8ヶ月の間に3つのプロジェクトを経験しました。

①webサイト制作
期間
4月〜9月
・使用技術
react(Next.js)
typescript
・成長したこと
web制作の大まかな流れを体感できた
フロントの知識が大幅に向上した
ssg ssrなどの知識

デザイン作成から、実装までほぼ全ての工程を任せてもらえた
入社1日目から、お客さまとのミーティングに参加したことが印象的。
最初は何が何やら分からず、不安との戦いでしたが、最後納品できた時は嬉しかった。
②webサイト制作（追加実装案件）
・期間
9月〜10月
・使用技術
react(Next.js)
typescript
・成長したこと
reactの知識が深まった（親から子要素への関数受け渡しやオンラインショップ機能）
チーム開発での、報連相の大切さ
useState useEffectなどのreactの基本的な知識が深まった・

1ヶ月という短い期間でしたが、期間が少しタイトだったこともあり濃密な時間でした。
shopifyとの繋ぎ込みが初めての経験で、思うように実装が進まず苦戦したことを覚えています。
最後の2週間は同僚と終電まで残り実装していました。



③アプリ開発
期間
10月〜12月

使用技術
・react
・chakraUI
・typescript

成長したこと
主体的に考えること（いつまでに、どうやって、どこまで完成させるのか）
お客さま、協力会社とのやりとり（最初は不安でメールひとつ送るのでも怖かった）
chakraUIの知識（cssファイルを作らなくて良いので便利）
reactの知識が更に深まる（非同期関数や、カスタムフック）
ドキュメント制作

要件定義フェイズから参画できた。
最初に担当した、協力会社へのAPIの実装依頼書を作るタスクに苦戦した。
何を、どんな風に、何のために聞くのかを考え資料にまとめるということが難しく、不安で仕方なかった。
振り返ると、自分で作った仕様書をもとにAPIが作られ、それを使って実装しているのだからすごいことだ。
こんなに達成感を感じることはない。
本当にありがたいと思う。

## 来年の目標
・reactでホームページを自主制作する
・サーバーサイドの案件に参画する
・社内一reactに詳しくなる
・toeicで８３0点獲得
・カンボジアの案件に参画、カンボジアに行く
・qiitaに週１で技術記事を投稿


## まとめ　
やめたい、無理だ、そんなことを思う日もたくさんありました。

人間関係もあまり得意な方ではなく。なかなか会社に馴染めないと思うこともありました。

しかし、本当に少しずつですが、楽しいと思える瞬間も増えてきました。

安心して話せる人もできて、頼りになるリーダーもいて、社長もとても良い人だ

本当に自分次第な環境。

苦手なことが多い分、なかなか挑戦できない自分だからこそ
きっと一つクリアできるたびに大きな発見があると思う

4月から使っているreactにも親しみができてきました笑

新年一発目はfigmaについての調査

またreactについての知見が深まるということで嬉しい限り。

次は4月、きっともっと成長できているのだろう。

要所要所では、不安もたくさんあるし、ネガティブにもなるけど

こんな風にポジティブに振り返れるのならば良い一年だった。
paizaラーニング「二次元配列での要素の検索 Python3編」

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__search
#### 私の解答
```Python3
n, k = map(int, input().split())
a = [input().split() for _ in range(n)]

for i in range(n):
    for j in range(k):
        if int(a[i][j]) == 1:
            print(i+1, j+1)
```
私は数値として扱っていますが、解答例は文字として扱っています。
#### 解答例
```Python3
n, k = map(int, input().split())
a = [input().split() for _ in range(n)]

for i in range(n):
    for j in range(k):
        if a[i][j] == "1":
            print(i + 1, j + 1)
            break
```
next-authのログイン認証エラー

nextjsで作ったサイトをvercelにデプロイ後、
ログインをすると出るようになった謎のエラーです。
ローカル開発環境では問題なく動いていたのに、突発的エラーが発生しました
server error there is a problem with the server configuration. check the server logs for more information.
との事



![2022-12-28 15.28のイメージ (1).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898667/70f5c112-9200-3fe7-b672-726c8d4d7804.jpeg)


解決法

１、シークレットキーを作る。
ターミナルに’openssl rand -base64 32’と入力し生成する
参考https://next-auth.js.org/configuration/options
![2022-12-28 20.34のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898667/b005dd87-961d-6b6d-148d-e03609185bf3.jpeg)

２、next.config.jsに’NEXTAUTH＿SECRET’を作る
シークレットキーを入れる
![スクリーンショット 2022-12-28 20.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898667/b4568cb6-b32f-4fdc-0d83-d4693e5b24bc.png)

３、作ったauthファイルの項目に追加する
![スクリーンショット 2022-12-28 21.02.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898667/d4050a3a-dc07-ea0d-a688-dadd48e3aeac.png)


これで認証は成功しました。
ここ１年で変更があったっぽい
Vue3 フロントエンド開発の教科書を読んだ

https://gihyo.jp/book/2022/978-4-297-13072-5

を読んだ。

## 手に取った経緯
新規プロジェクトを進めるにあたって、Railsのテンプレートにマウントする形でVueを採用したとき、Vue3 + TypeScript + Viteの組み合わせがモダンそうだなと思った。
最初にざっくり全体をおさえるには、Udemyの講座が非常に役に立った。

https://www.udemy.com/course/vue3-typescript/

各公式のドキュメントを読んだりはして概ね書けるようにはなったが、特にVue3(setup構文) + TypeScriptの部分で手探りの部分が多く、体系的に学ぶことで取りこぼしをなくすためにこの本を選んだ。

## 良かったところ
- 今の時点で最新の技術の組み合わせで書いてあるので、サンプルコードの書き方がそのまま役に立ちやすい
- 単体テスト(Vitest)やState管理のPiniaについても章が割かれているので足がかりになる
- 各サンプルコードが長すぎず、注釈番号なども振ってあるため読みやすい

## 学びがあった部分
### v-on:inputなどでeventを引数に取ったときe.targetをHTMLInputElementにキャストする

```typescript
onUpdate(e: Event) => {
  const element = e.target as HTMLInputElement;
  emit('update:modelValue', element.value);
}
```
`e: any`で書いてたりとか、`e: { target: HTMLInputElement }`とかで書いてたりしたのでこの形に落ち着きそう

### input type="checkbox"のtrue-value, false-value
```html
<input type="checkbox" v-model="hoge" true-value="hoge" false-value="fuga">
```

`v-bind:value`を使うことがほとんどだと思うが、こういうのがあるのは便利

### v-bind:keyはコンポーネント内で一意でなければならない
v-forで同じオブジェクトを回したときidとかをkeyに使うことが多いが、DOMの階層が違ったとしても同一コンポーネント内でのkeyの重複は許されないので、`v-bind:key="'hoge' + id"`みたいな感じで工夫する必要がある。

### インデックスシグネチャ
```typescript
const list: {[key: number]: string;} = {
  1 => "hoge",
  2 => "fuga"
}
```
オブジェクトのキーにどの型を使うかは上記のように書ける

### リアクティブな変数の配列の入れ替え
```typescript
// リアクティブが切れる
const reactiveObj = reactive(['Alice', 'John'])
reactiveObj = ['Mike']

// リアクティブが持続する
const reactiveObj = ref(['Alice', 'John'])
reactiveObj.value = ['Mike']
```
reactiveを使う場合は一旦`clear()`してから`push()`しないと監視されなくなる。
下のように書きたいし、`reactive`は色々とハマりやすかったので大体の場面で`ref`を使っていた

### CompositionAPIの利点
よく挙げられるものとして関心の分離(OptionsAPIと違い、似たような処理をだいたい同じ場所に書くことができる)があるが、dataの初期化などライフサイクルをあまり意識しなくて良くなるということが書いてあり、確かにと思った。
ただ、行を入れ替えると動かなくなったり、意識しておかないと処理が散らばりやすいというデメリットもあるので、手触りに応じて使えばいいと思う

### definePropsを使ったとき、template内でpropsの中身が展開される
それまでは `const props = defineProps<Props>();`でpropsを一旦受け取ってから、template側で`{ props.title }`のように利用していたのだが、そうしなくてもいいらしい。
ただ、一旦受け取っておいて`props.`の形で利用したほうが分かりやすいと思うので多分使わない

### Provideではreactive()を使用する
refを使用してProvideしたとき、Injectされたデータに対して`.value`を呼び出すと型エラーが起こるので、`reactive()`を使ったほうが良いとのこと。
ただ、これに関してはInjectionKeyという仕組みがあるし、refを使っているサンプルコードも上がっているのでそこまで気にしなくて良い気はする。

https://tekrog.com/use-provide-and-inject-with-composition-api-and-typescript/#InjectionKey

### scope付きSlot
slotを使うとき、データの向きが子->親になるときがあるが、親コンポーネントで`v-slot:default="slotProps"`のように`slotProps`で受け取って利用することを明示して書ける

https://v3.ja.vuejs.org/guide/component-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%95%E3%82%9A%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88

### 動的コンポーネント
```html
<component v-bind:is="currentComp" />
```
のように書き、currentCompにコンポーネント名を指定することで動的にコンポーネントの呼び分けができる。

## まとめ
探せば公式ドキュメントに書かれていることも多いが、公式ドキュメントのリンクを辿って隅々まで読むというのは難しいので、やはり本の形にまとまっているのはありがたい。
サンプルコードもほどよい感じで、新しめのスタックでVueを学びたい人におすすめできると思う。
AIスタートアップNubilabがCES 2023に参加する...食生活養生の未来像を提示

![AI food scanner1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784576/ad738275-368c-b7dc-d6fc-bd87c8964c55.jpeg)
* 来年1月に米国で開催されるCES 2023で、食習慣データに基づくAIヘルスケアコンセプト「Vision N」を発表
* 今年10月、100億ウォンのシリーズA投資を誘致し、デジタルヘルスケアソリューションの開発を本格的に開始... CESで成人、幼児、患者向け​​にカスタマイズされた技術を披露
* 135㎡(約40坪)のスタジオ型スタンドアローンブースで「AIフードスキャナー」を含む3種類のコア製品を体験する機会

人工知能(AI)食品スキャニングソリューションを開発する新興企業のNubilab(代表キム・デフン)は、来年のCESで食生活データに基づく養生コンセプトを公開する。 Nubilab AI は、過去 4 年間に学習した食品データをモバイルアプリと API の形で展開することにより、デジタル養生養生分野のさまざまなユーザー環境に新しい未来を示すことが期待されています。
![AI food scanner2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784576/42cf8848-8ca4-89a5-1f37-8043cbb079e0.jpeg)
来年 1 月 5 日から 8 日まで米国のラスベガス コンベンション センターで開催される コンシューマー エレクトロニクス ショー (CES) 2023 に参加します。 2020 年から CES に参加している Nubilab は、今年初めて独立したブースを設置し、デジタル ヘルスケア、フード テック、サステナビリティをテーマに主要なソリューションを紹介します。

Nubilab は、世界 158 か国から 17 万人以上の来場者が見込まれるこの CES ステージを、グローバル市場への参入を加速する機会と見なしています。ブースでは、「AIフードスキャナー」を中心に、△乳児発育管理ソリューション△慢性疾患患者の食生活管理ソリューション△モバイルフードダイアリー△フードスキャンAPIなどのデジタルヘルスケアコンセプトを初公開する。 Nubilabのコアソリューションです。
![Nuvilab Booth3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784576/1c563725-326f-bb1b-8497-e39e5d02822b.jpeg)
Nubilab のキム・デフン CEO は、「Nubilab のフードテック技術が ESG 業界だけでなく、ヘルスケア業界でもイノベーションをリードすると確信している」と語った。チャンスになる」と語った。

ヌービラボは、一度のスキャンで食品の種類や量を判別できる技術でグループケータリング環境を革新するソリューションを開発し、国内外で注目を集めています。これまでに 70 以上の企業や機関がこのソリューションを導入し、食品廃棄物を 1,500 万 kg 以上削減したことが知られています。今年 10 月には、スマイルゲート投資 などから 100 億ウォンのシリーズ A 投資を集めた。
![Nuvilab4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784576/08150967-a105-b6ea-ac0b-52ab2af92a60.jpeg)
一方、Nubilab CES ブースでは、SK Telecom と Nubilab が成功を収めた Net Zero を達成するための 廃棄物ゼロ キャンペーンも展示されます。 SKT は、日常生活で ESG を実践するためにエグゼクティブ カフェテリアに Nubilab ソリューションを導入して食品廃棄物を削減するキャンペーンを 6 か月間実施し、炭素削減効果を達成したことが知られています。

Nubilab の CES ブースは、ラスベガス コンベンション センター ノース ホール (LVCC ノース ホール) の デジタル ヒーゾーン で訪れることができます。
### マーケティングの連絡先 ###
ヨンゴン・コ | リーダー | マーケティング
電話：+ 82-10-5126-7599
電子メール：younggon.ko@nuvi-labs.com
URL：[www.nuvi-labs.com](https://www.nuvi-labs.com)
設計とは

トレタのフロントエンドエンジニア武市です。

トレタではマイクロサービスを採択していることにより高い設計力が求められます。品質の高いソフトウェアを開発をする為に、求められる技術レベルがかなり高くなりました。前職ではモノリシックアーキテクチャだったこともあり、日々勉強する毎日です。

弊社のプロダクトのお手伝いをしていただいている奥野賢太郎さんと (@okunokentaro )と設計についてお話しさせていただき僕なりの腹落ちがあったので共有します。
僕の解釈で言葉をまとめているので、奥野さんの言っていたこととはニュアンスも違うし言っていることも違う可能性もあるので悪しからず

## 設計ってなんでするの？
なぜ単一責任の原則を守らなければならないのか

システムの設計は建物などの設計と違って完成したら終わりではない。

## 設計とはなんなのか
それは**治安維持、秩序維持活動。**
常に進化していくものであってケースバイケースで変わる

手段であって目的ではない。

動くものを作るそれが目的。
ただモノづくりをする上で我々エンジニアは、過去に辛い経験をしてきた。

- 命名が分かりにくい
- コードの段落が違う
- 拡張性がない

それらを維持する為に設計するのであり、〇〇アーキテクチャはそれらをテンプレート化したもの。

コードフォーマッターを入れるのも設計、命名規則を整えるのも設計、リポジトリを分かりやすくするのも設計

## 設計力とは
治安の悪い箇所を見つける力、見抜く力が設計力だ

これには多くの経験が必要だが、まずは動くものを作ること

その中で見えてきた治安の悪い箇所を放置せず直すことで設計力は格段にあがる

設計に正解はない
大事なのは諦めず良いシステムを作ろうと考え作り続けることである


## 最後に
今回お話しさせていただいた奥野賢太郎さんの一人アドベントカレンダーです。

https://zenn.dev/okunokentaro/articles/01gn493ba2mz3jtwjcssdcn09m
paizaラーニング「二次元配列の出力 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_input_step4

前にも同じ問題があったので、<a href="https://qiita.com/colcmia/items/8fed06235935e36f476a">私の解答</a>は省略しました。

解答例だけ異なったので、記録に残すことにしました。
#### 解答例
```Python3
n, k = map(int, input().split())
a = [input().split() for _ in range(n)]

for i in range(n):
    for j in range(k):
        if j == k - 1:
            print(a[i][j])
        else:
            print(a[i][j], end=" ")
```
PowerAppsのサンプル集


## サンプル作成に役に立つ

>■Power Apps コンポーネントで確認ダイアログのサンプル作成参考
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509696/87fe0fe4-c160-3bfd-9127-d89c9b39e2b2.png)

（ https://artisan.jp.net/blog/power-apps-canvas-apps-create-component/ より引用）

>Loading画面を作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509696/263a2d1a-6431-33cc-b722-86eceeaa5c1f.png)

（ https://qiita.com/yamad365/items/7feeadb85570dfedfe52#:~:text=PowerApps%20%E3%81%AB%E3%81%AF%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%EF%BC%88%E3%80%8C%E2%97%8F%E2%97%8F%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F%20%E3%80%8D%2F%E3%81%AF%E3%81%84%E3%83%BB%E3%81%84%E3%81%84%E3%81%88%EF%BC%89%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AA%E6%A9%9F%E8%83%BD%E3%81%8C%E3%80%81%E8%A8%98%E4%BA%8B%E6%8A%95%E7%A8%BF%E6%99%82%E7%82%B9%E3%81%A7%E3%81%AF%E6%A8%99%E6%BA%96%E3%81%A7%E8%A3%85%E5%82%99%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82,%E3%81%BE%E3%81%9F%E3%80%81%E5%90%8C%E6%A7%98%E3%81%AB%E5%AD%90%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%81%E3%81%A8%E3%81%84%E3%81%A3%E3%81%9F%E6%A8%99%E6%BA%96%E6%A9%9F%E8%83%BD%E3%82%82%E5%AD%98%E5%9C%A8%E3%81%97%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82%20PowerApps%20%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8B%E3%82%89%E3%80%81%E7%9B%B4%E6%8E%A5Microsoft%20Flow%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81Flow%E3%81%AE%E5%87%A6%E7%90%86%E4%B8%AD%E3%81%AF%E7%94%BB%E9%9D%A2%E6%93%8D%E4%BD%9C%E3%82%92%E3%81%95%E3%81%8F%E3%81%AA%E3%81%84%E7%AD%89%E3%81%AE%E7%8A%B6%E6%B3%81%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 より引用）
「ふうせん」Arduino UNOとSSD1306でキャラクターを移動する



x 過去ログをみよ


![o_cop295.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/cc363837-e639-6b83-aeb9-8f53ad1a22a8.jpeg)



```c++



//OLED_SSD1306_fuusen1_UNO


//ヘッダーファイル
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


// ビットマップデータ
uint8_t databytes[8] = 

{

//   01234567

0b00111000,    //0
0b01011100,    //1
0b10111110,    //2
0b11111100,    //3
0b01111000,    //4
0b00010000,    //5
0b00010000,    //6
0b00001000     //7

};


//初期化
void setup() {

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup

int px = (random( (128/8)-1 ) ) * 8 ,py = 8*( (64/8) -1 );

//メインループ
void loop() {



  // 画面表示をクリア
  display.fillScreen(BLACK);

  //ビットマップの表示
  display.drawBitmap(px, py, databytes, 8, 8,  WHITE); py=py-8;

  // 描画バッファの内容を画面に表示
  display.display();


  delay(1000); //1秒待つ

  if( py <= 0 ) {
    px = (random( (128/8)-1 ) ) * 8;
    py = 8*( (64/8) -1 );
  } //endif

}//loop




```
【保存版】有名エンジニア・エンジニア出身者の心に響く名言12選

有名技術者・エンジニア・エンジニア出身者たちがこれまでのエンジニアリングと向き合った中での言葉はとても重みがあります。

こちらの記事[「有名エンジニアのぐっとくる保存版の名言12選」](https://anchor.id/column/n10838)からピックアップして紹介します。


## 名言1：大胆な挑戦の末での失敗ならば･･･
①「大胆な挑戦の末での失敗ならば、問題ではない」
（ラリー・ペイジ）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言2：完璧を目指すよりも･･･
②「完璧を目指すよりもとにかくやってしまうことだ」
（マーク・ザッカーバーグ）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言3：僕は技術が世の中を･･･
③「僕は技術が世の中を支えていると思う。人間社会を豊かにしてきたいちばん大きな原動力は、技術者の力だと思っている」
（堀江貴文）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言4：明らかにみんな･･･
④「明らかにみんな、成功したいのだろう。
しかし、私はとても革新的、とても信頼され、とても倫理的、究極的に世界を大きく変えたと振り返られたい。」
（セルゲイ・ブリン）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言5：成長に必要なのは･･･
⑤「成長に必要なのは技術的なエンジニアリングではなく、ソーシャルエンジニアリング（人の心理を読んで活動すること）である」
（ジェリー・ヤン）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言6：僕らは常に･･･
⑥「僕らは常に、未来の理想に向けてではなく、今やれる最高のことだけを目指してきた。常にがむしゃらに、目先のことを追い続けてきただけなんです。」
（宮本茂）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言7：私にとってプログラミングとは･･･
⑦「私にとってプログラミングとは、「こんなふうに考えたよ」という表現であり、そのための手法です。プログラミング以外の方法でしゃべるすべを知らないのです。」
（金子勇）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言8：努力は当たり前･･･
⑧「努力は当たり前。とにかく、結果がすべて」
（ビル・ゲイツ）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言9：プログラミングは本来･･･
⑨「プログラミングは本来とても楽しいものです。プログラミングはとても刺激的で創造的でわくわくする知的活動です。」
（まつもとゆきひろ）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言10：普通と違う生き方はしんどい･･･
⑩「『普通と違う生き方はしんどい』かもしれないけど、ある種の人には普通の生き方のほうがしんどい。普通と違う生き方の方が楽とは決していわないけど。」
（まつもとゆきひろ）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言11：プログラムを書くのが･･･
⑪「プログラムを書くのが好きじゃなかったから、プログラムを簡単に書けるシステムを考えたのです。」
（ジョン・バッカス）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)

## 名言12：もしそれがよい考えなら･･･
⑫「もしそれがよい考えなら、思い切ってそれをしなさい。許可をもらうよりも、謝るほうが簡単だから。」
（グレース・ホッパー）

引用元：[名言ブックマークサービス「Anchor」](https://anchor.id/column/n10838)


# まとめ

ということで、有名エンジニア・エンジニア出身者たちの名言まとめをお送りしました。

言葉を見て想像を膨らませてみると、自分とのスタンスの違いがよくわかります。
もっと頑張らなくっちゃ。
javaでStringとintを文字列結合する場合は、nullチェックを必ずしましょう

仕事をしていた時に、バグとして出ていた現象です。

NULLチェックをしていないのが悪い、テストしてないのが悪い
という結論なのですが、意識はしておかないと気付きにくいなと思って、備忘録として保存します。

## javaではStringとintをそのまま結合した場合、文字列扱いで結合する。
以下のように、文字型と数値をそのまま結合した場合、文字列扱いで結合してしまう。
intの場合などはプリミティブなので、nullは入れることができません。
そのため、特に型変換などをしなくてもまぁなんとかなってしまったりします(;^ω^)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565426/521e496f-ec47-7ffc-6c46-5a8e0cfb5f35.png)

## ただし参照型(Integer)などでnullを入れた場合はどうなってしまうのか？
Integerの場合は、数値型ですからもちろん**そのまま結合します**。
つまり、nullという文字列を結合します(´・ω・)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565426/9bbdc0e4-37c1-2af3-4251-90575564e077.png)

ちなみに文字列で型変換するようにしても、文字列結合してしまうので結局NULLという文字列で結合されてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565426/82ef4d7a-6e29-f8dd-92f1-1c284079a784.png)


### 数値＋数値の場合は足し算しようとする
この場合、もちろんnullは計算できないので、nullPointerExceptionになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565426/ece1540d-6567-414b-02c4-f05ed68ef0d1.png)

## 結論
nullチェックを忘れずに行いましょう。

## おまけ
見た目は35という結果ですが、これは3と5を文字列結合しただけです。
本当にこの処理方法は正しいか？というのは、デバッグなどで確認してからOKを出しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565426/7ff5dc32-3d88-307a-c39d-a2264f0c6db9.png)

過程や方法などどうでもいいのだ！！と言ってしまえばそれだけなんですけど(´・ω・)
paizaラーニング「指定された範囲・行数の数字の出力 Python3編」

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__print_range
#### 私の解答
```Python3
n, k = map(int,input().split())
for _ in range(k):
    for i in range(1, n+1):
        if i == n:
            print(i)
        else:
            print(i, end=" ")
```
前の問題の解答例に倣ったので、同じでした。
#### 解答例
```Python3
n, k = map(int, input().split())
for _ in range(k):
    for i in range(1, n + 1):
        if i == n:
            print(i)
        else:
            print(i, end=" ")
```
paizaラーニング「指定された行数の数字の出力 Python3編」

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__print_column
#### 私の解答
```Python3
n = int(input())
for i in range(n):
    print("1 2 3 4 5")
```
二重ループメニューの問題集なので、私の解答は、手抜きでした^^;
#### 解答例
```Python3
n = int(input())
for _ in range(n):
    for i in range(1, 6):
        if i == 5:
            print(i)
        else:
            print(i, end=" ")
```
VSCode設定（追記式）

*拡張機能のメリットが大きいから使ってますが、Novaがまともに使えたらVSCodeなんて使いたくないのですよ…*
*内臓されてるEmmetがダメすぎる。勝手に謎補完してくる。設定UIが狂気の沙汰…*

[追記]
- Cplilot楽すぎる…

## Editor: Scroll Beyond Last Line ```false```

エディターが最後の行を超えてスクロールするかどうかを制御します。

## Explorer: Auto Reveal ```false```

ファイルをエディタ表示する度にエクスプローラーでディレクトリを開く機能。
こいつがディレクトリを開きまくるので困ってた。

## Explorer: Auto Reveal Exclude

エクスプローラーに表示しないファイル、ディレクトリの設定。
何が動作したのか、勝手にamplifyプロジェクトの大事な設定ディレクトリを非表示にするよう設定されてた。
設定場所が分からず数年間```open ./```コマンドでファインダー開いて作業してた。

## Explorer: Compact Folders ```false```

エクスプローラーでフォルダーをコンパクト形式でレンダリングするかどうかを制御します。このような形式では、単一の子フォルダーは結合されたツリー要素に圧縮されます。たとえば、Java パッケージ構造に役立ちます。
...やりづらい。こんなのデフォルトで　true　にする神経が分からない。

## Editor › Suggest: Show Keywords ```true```

JSで ```this``` を入力すると ```globalThis``` に勝手に書き換えられてしまう嫌がらせはこれをtrueにすることで解消される。

# 環境の共有

あえて .vscode を .gitignore から除外してワークスペース環境を共有します。

### 機能拡張の共有

Prettier、EsLint、xo、ava-runner、php-cs-fixer、larastan、black、pylint、mypy...など、環境言語毎に Linter / Formatter / テストランナー を推奨事項に入れておきます。マーケットプレースの各種拡張ページにある ⚙️マーク から [推奨事項に追加] を選択すると .vscode の中に extentions.json が追加されます。

### 機能拡張設定の共有

各種拡張の詳細設定もワークスペース欄で設定すれば settings.json に書き込まれます。

### 実行とデバッグ設定

これはクリックですぐ使えるので特に共有する必要はありませんが、launch.json にてデバッグ環境を共有できます。