OmniAICreator/Qiita-1.07M huggingface dataset:
【覚書】 terminalでgitのブランチを表示させる方法

# 方法
```
$ brew install git
$ brew install zsh
```

gitがzsh管理になっているか確認
```
$ which git
/opt/homebrew/bin/git
```

```~/.zshrc
# For git
autoload -Uz vcs_info
setopt prompt_subst
zstyle ':vcs_info:git:*' check-for-changes true
zstyle ':vcs_info:git:*' stagedstr "%F{magenta}!"
zstyle ':vcs_info:git:*' unstagedstr "%F{yellow}+"
zstyle ':vcs_info:*' formats "%F{cyan}%c%u[%b]%f"
zstyle ':vcs_info:*' actionformats '[%b|%a]'
precmd () { vcs_info }

# プロンプトカスタマイズ
PROMPT='
[%B%F{red}%n@%m%f%b:%F{green}%~%f]%F{cyan}$vcs_info_msg_0_%f
%F{yellow}$%f '
```
上記を適用することで以下のようにterminalの画面になる。色分けされるのと、現在のブランチの位置が知れて便利。
```terminal
[user_name@hardware_name:~/Workspace/Job/Seattle/GitRepo/terraform/][main]
```


# 参考
https://bottoms-programming.com/archives/apple-silicon-termina-git-branch-name.html

https://bottoms-programming.com/archives/mac-terminal-to-iterm2.html

以上
VirtualBoxでのUbuntuとMac間のクリップボード共有設定


## この記事の対象者
- VirtualBoxを使用して、Mac上でUbuntuをゲストOSとして動作させている方。
- OS間でのクリップボードの共有やファイルのドラッグ&ドロップ機能を活用したい方。
- VirtualBoxの基本的な操作は理解しているが、細かい設定やトラブルシューティングに不安がある方。


## 環境
```
ホストOS: Mac Ventura 13
ゲストOS: Ubuntu 22.04.2 LTS
仮想化ソフトウェア: VirtualBox
使用言語: python3
使用エディタ: Visual Studio Code
```

## 前提
VirtualBoxを使用してUbuntuをゲストOSとして実行する際、MacとUbuntu間でのクリップボードの共有やファイルのドラッグ&ドロップを行いたいと思ったことはありませんか？この記事では、その設定方法と、私が遭遇したエラーとその解決方法についてハンズオン形式で解説します。

## 手順1: VirtualBox Guest Additionsのインストール
VirtualBoxのウィンドウで、実行中のUbuntuのVMを選択します。
メニューバーの「デバイス」から「Guest Additions CDイメージの挿入」を選択します。
#### エラー1: 自動でポップアップが表示されない
この時点で、Ubuntu内で自動的にポップアップが表示されるはずですが、表示されない場合があります。

#### 解決方法
Ubuntuのファイルマネージャを開き、左側のペインに「VBox_GAs_x.xx」という名前のCDイメージがマウントされていることを確認します。
ターミナルを開き、以下のコマンドを実行してCDイメージのディレクトリに移動します。
```
cd /media/$USER/VBox_GAs_*
```
以下のコマンドを実行して、Guest Additionsをインストールします。
```
sudo ./VBoxLinuxAdditions.run
```

再起動します
```
sudo reboot
```

#### エラー2: vboxuser is not in the sudoers file

`vboxuser is not in the sudoers file. This incident will be reported. `というエラーメッセージが表示される場合があります。

#### 解決方法
ターミナルを開き、以下のコマンドを入力してrootユーザーとしてログインします。
```
su -
```

以下のコマンドを実行して、sudoersファイルを編集モードで開きます。
```
visudo
```
エディタ内で、ファイルの最後に以下の行を追加します。
```
vboxuser ALL=(ALL:ALL) ALL
```
エディタを保存して終了します。
これで、vboxuserがsudoersに追加されました。

再度、以下のコマンドを実行して、Guest Additionsをインストールし再起動します。
```
sudo ./VBoxLinuxAdditions.run
sudo reboot
```

## 手順2: VirtualBoxでのクリップボード共有設定の手順
#### 1. VirtualBoxのメインウィンドウを開く:

VirtualBoxのアプリケーションを起動します。
#### 2. UbuntuのVMを選択:

VirtualBoxのメインウィンドウに表示される仮想マシンの一覧から、設定を変更したいUbuntuのVMをクリックして選択します。
#### 3. 「設定」をクリック:

VMを選択した状態で、ウィンドウの上部にある「設定」というボタン（または歯車のアイコン）をクリックします。
#### 4. 「一般」タブを開く:

「設定」ウィンドウが開くと、いくつかのタブが表示されます。これらのタブの中から「一般」というタブをクリックします。
#### 5. 「高度」セクションの「クリップボード」を「双方向」に設定:

「一般」タブ内の「高度」セクションには、「クリップボード」というドロップダウンメニューがあります。このメニューをクリックし、表示されるオプションの中から「双方向」というオプションを選択します。
#### 6. 設定を保存:

最後に、「OK」というボタンをクリックして設定を保存します。


## まとめ
この記事では、VirtualBoxでUbuntuとMac間のクリップボード共有とファイルのドラッグ&ドロップの設定方法をハンズオン形式で解説しました。また、設定中に遭遇したエラーとその解決方法についても紹介しました。これで、スムーズにOS間でのデータのやり取りができるようになりました。
【Python】行列の転置

# 作るもの
行列を転置する関数。

# 実装
```python:transpose_matrix.py
def transposeMatrix(matrix):
    return list(zip(*matrix))

# テスト
if __name__ == "__main__":
    matrix = [[1, 2, 3], [4, 5, 6]]
    print(transposeMatrix(matrix))
```

```terminal:出力
[(1, 4), (2, 5), (3, 6)]
```

# 補足
- zip関数の使用例
```zip.py
names = ['Alice', 'Bob', 'Charlie']
scores = [85, 92, 78]

# zip関数で対応する要素をまとめる
zipped_data = zip(names, scores)

# zipオブジェクトをリストに変換して表示
zipped_list = list(zipped_data)
print(zipped_list)
```

```terminal:出力
[('Alice', 85), ('Bob', 92), ('Charlie', 78)]
```


- アンパック演算子の使用例
```python:unpacking_operator
coordinates = (3, 7)

x, y = coordinates  # タプルの要素を変数にアンパックする
print("x:", x)
print("y:", y)
```

```terminal:出力
x: 3
y: 7
```

# 参考
https://www.algoexpert.io
配列から空要素を削除するcompact_blankを使うにはactive_supportが必要

[配列から空要素を削除するcompact_blank](https://qiita.com/SoarTec-lab/items/0c19a4eb5e17c417d165)を使うにはactive_supportが必要。
[gem名はactivesupport](https://rubygems.org/gems/activesupport/)で、[requireするときはacitive_support/all](https://github.com/ongaeshi/clipper/blob/master/lib/clipper/util.rb#L2)なので注意。
【NVIDIA DLI Teaching Kits】Lecture 1 まとめ

# はじめに
本記事は、NVIDIA DLI Teaching Kits Lecture 1についてのまとめになります。
気力が続く限り、今後も2-24章までのLabs、Lecture、Quizを取り上げていきます。
どうぞよろしくお願いします。

次章: [Lecture2](https://qiita.com/candy_wataame/items/ab69a7f55ab06062b302)

# 目次
- Lecture
- Labs
- Quiz 

# Lecture 
1.1 モジュールの概要
1.2 データサイエンスとは
1.3 なぜデータサイエンスが重要なのか? 
1.4 学びの目標と期待される成果
1.5 分析の構成要素
1.6 Apoloグラフの探索（事例1）
1.7 NetProbeのオークション不正検出（事例2）
1.8 バズワード（ハイプサイクル、汎用AI、特化型AI
1.9 データサイエンスのキャリアパスと課題
1.10 科学と工学における多様性のギャップ
1.11 データサイエンス分野における過小評価グループ

# Labs 
RAPIDSのインストールからCuDFを動かすまでをまとめた記事があるのでそちらを参照ください。

https://qiita.com/candy_wataame/items/153dc54564e88d45cc06

# Quiz 

Q1) Ans: 全て

Q2) Ans: ABC　
・Writingについての記述なし

Q3) Ans: ABD 
・プログラミングスキルは必須事項、課題ではない

Q4) Ans: A 
・データサイエンスのキャリアパスを参照

Q5) Ans: C 
・第3波

Q6) Ans: B
・__there is no need to ever do it again__ が間違い

Q7) Ans: B
・__rigid steps__ が間違い、厳密(rigid)なステップではない。分析の構成要素を参照
Mountpoint for Amazon S3を使用して複数EC2でファイル共有してみた

# Mountpoint for Amazon S3を使用して複数EC2でファイル共有してみた

## 概要
Amazon S3はオブジェクトストレージとして広く利用されていますが、従来のファイルベースのアプローチとの橋渡しとして、Mountpoint for Amazon S3が提供されています。今回、このMountpointを使用して、複数のEC2インスタンス間でのファイル共有を試してみました。

https://aws.amazon.com/jp/about-aws/whats-new/2023/03/mountpoint-amazon-s3/

## 実施手順
S3バケットの作成
```shell
aws s3 mb s3://mount-point-for-s3
```
次に、2つのEC2インスタンスを作成。これらのインスタンスにはS3へのアクセス権を持たせるため、IAMロールにS3Accessロールを割り当てました。

```shell
aws ec2 run-instances --image-id ami-08c84d37db8aafe00 --count 1 --instance-type t2.micro --iam-instance-profile Name=S3Access
aws ec2 run-instances --image-id ami-08c84d37db8aafe00 --count 1 --instance-type t2.micro --iam-instance-profile Name=S3Access
```
その後、各インスタンスにMountpoint for Amazon S3のクライアントをインストールしました。

```shell
wget https://s3.amazonaws.com/mountpoint-s3-release/latest/x86_64/mount-s3.rpm
sudo yum install ./mount-s3.rpm
```
/mnt/s3ディレクトリを作成。このディレクトリを使用して、先ほど作成したmount-point-for-s3バケットをマウントしました。
```shell
mkdir /mnt/s3
mount-s3 mount-point-for-s3 /mnt/s3
```
最後に、テストファイルtest.txtを作成・削除して、インスタンス間でのファイル共有が正しく動作するか確認しました。
instance1にて

```shell
[root@ip-xxx-xxx-xxx-xxx s3]# touch test.txt
```
instance2にて
```shell
[root@ip-xxx-xxx-xxx-xxx s3]# touch test2.txt
[root@ip-xxx-xxx-xxx-xxx s3]# touch test3.txt
[root@ip-xxx-xxx-xxx-xxx s3]# ls
test.txt  test2.txt  test3.txt
```
ちゃんとファイル共有できていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3113287/ffef0c60-fee1-80fe-745f-5d890ce06eb0.png)
S3にもファイルが上がっています。

## 結論
Mountpoint for Amazon S3を使用すれば、EC2インスタンス間でのファイル共有は問題なく実現できます。
ただし、S3自体は同時アクセスやデータの競合に対して完全に強化されているわけではないため、特に書き込み操作などでの注意が必要です。
ECSでタスク実行したがタスク(コンテナ)が作成されない

ECSについて学習していたのですが、「タスク実行をしたが「タスク(コンテナ)が作成されない」エラーが起きたので原因の特定・解決まで至った方法を自身の理解・復習また文章力の向上のためアウトプットさせていただきます。

# エラーが起きた時の状況
ECSで「クラスター」を作成→「タスク定義」→「タスク実行」までの手順の学習は問題なく進んでいたのですが、その後の「タスク(コンテナ)」が作成エラーが起きてしまいました。

「タスク実行」をすると一度はステータスが「Running」になり作成できそうになりますが、数秒経つとステータスが「Stopped」になってしまい作成に出来ない状況になりました。

### 「Dockerファイル」の内容

```
hiro@hiro test % ls
Dockerfile    index.php
hiro@hiro test % cat' Dockerfile
FROM php:8.0-apache
COPY index.php /var/www/html
EXPOSE 80
```
### 「Dockerファイル」内の「index.php」の内容
```
hiro@hiro test % cat index.php
<?php echo 'Hello World'; ?>

hiro@hiro test %
```
*タスク(コンテナ)が作成され、「作成したタスク(コンテナ)詳細」＞「ネットワークバインド」＞「外部リンク」にアクセスしたら「index.php」に記述してある【Hello World】をブラウザで確認できればエラーの解決になります。

# 原因を特定する
「_cloudwatch_」でログを確認して原因を探しました。
# 「cloudwatch」のログを調べた結果
ログ調べてみると`exec /bin/bash: exec format error`と表記されていました。

この`exec format error`をネットで調べた結果、原因は
###### M1 Mac(Apple silicon)を使用している場合は「docker buildコマンド」に「x86向け」のオプションが必要だったみたいです。

buildする時に
```
--platform linux/amd64
```
上記を追加し「x86向け」のオプションをつけるみたいです。
以下の記述でbuildしました。
```
hiro@hiro test % docker build -t test-2023 . --platform linux/amd64
```
「docker buildコマンド」に「x86向け」のオプションをつけたので再度確認します。

### 「Dockerファイル」の内容
```
hiro@hiro test % ls
Dockerfile    index.php
hiro@hiro test % cat' Dockerfile
FROM php:8.0-apache
COPY index.php /var/www/html
EXPOSE 80
```
### 「Dockerファイル」内の「index.php」の内容
```
hiro@hiro test % cat index.php
<?php echo 'Hello World'; ?>

hiro@hiro test %
```
### ブラウザ
![ブラウザ確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523101/33eefd53-a73b-3c23-edbf-5b19bd782b5f.png)

「タスク(コンテナ)」が無事作成されており、「作成したタスク(コンテナ)詳細」＞「ネットワークバインド」＞「外部リンク」にアクセスするとブラウザで「Dockerファイル」に入っている「index.php」の【Hello World】も確認できましたのでエラーを解決できました。

# まとめ
今回このような失敗が起きた時は「cloudwatch」のログでに「どんなエラー」が起きている事を確認することが大事なんだなと思いました。
ログのエラーを調べることにより「M1 Mac(Apple silicon)」のみで起きるエラーなどがあることも学習することができましたし、他のエラーが出た際も手探りで原因を探すより遥かに時間効率が良いと感じました。
今回のように「タスク(コンテナ)の作成失敗」や他のエラーが起こった際は「cloudwatch」のログを確認するように意識しようと思います。

最後まで読んでいただいた方、ありがとうございました。
lwcでのページ内ジャンプ

今回は簡単な内容ですが、少しハマったので記事にします。
エクスペリエンスサイトで、lwcを複数配置した際にリンクを押下するとページ内の指定した場所にジャンプする処理です。
idが使えないってところが非常に厄介でした。

```test1.HTML
<template>
    <div class="slds-m-around_large">
        <p>あいうえお</p>
        <a name="jumpLink"></a>
    </div>
</template>
```
```test2.HTML
<template>
    <div class="slds-m-around_large">
        <p><a onclick={jump}>飛びます</a></p>
    </div>
</template>
```
```test2.js
export default class test2 extends LightningElement {
    jump() {
        // 今のURLにジャンプ先の情報があるか確認
        if (window.location.href.includes('#jumpLink')) {
            // あればその情報をまた渡す（同じ画面で2回目以降リンク押下した場合）
            window.location.href = window.location.href;
        } else {
            // ない場合は情報を付けたす（初めてリンク押下した場合）
            window.location.href = window.location.href + '#jumpLink';
        }
    }
}
```
同じ画面にtest1,test2のlwcを配置していた場合、この方法でページ内ジャンプが可能です。
Experience側だと、id指定した場合に重複防止？の為か「-12」などの数字がくっついてしまいます。
ページ内ジャンプに限った話ではないですが、lwcでid指定はご法度なようなので今回はname指定しています。
nameである必要はないと思うので、分かりやすい属性を指定してあげればいいと思います。
jsの処理がイマイチイケてない感じもしますが、そもそも大した機能ではないのでこれくらいでいいかなって感じでした。
HTML周辺の知識が浅い私にとっては、id指定が出来ずに少しハマってしまいました。。。

もっとlwcについて勉強しないとですね！！
Qiitaはじめました

# はじめまして
学習のため、また備忘録のためにQiitaでブログを書いていくことにします。

# 自己紹介
Pythonのバックエンドエンジニアです。
前職はサービス業で、将来的にはIT領域を活用して、より多くの人の役にたっていきたいと考えています。
取得資格は「Python3エンジニア認定基礎試験」と「Python3データ分析試験」です。
よろしくお願いいたします。

# これから
主にバグ遭遇時にどのように解決したかを備忘録として記載していこうと考えています。
まだ不慣れ感満載ですが早く記事を書くのに慣れていきたいです。
withMakeでLINEBotを作るときのトラブルシューティング

# 誰に向けた記事か
はじめてwithMake でLINEBotを作成する人に向けて書いています。
withMakeでオウム返しをするLINEBotの作り方をすでに知っている前提です。

# トラブルシューティング

## ①Run once してもエラーですぐに止まってしまう
### エラー内容
![スクリーンショット 2023-08-10 1.10.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/fd09e8de-94dc-ad1c-a544-21096fa5ddb0.png)
![スクリーンショット 2023-08-10 1.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ab317278-2610-45ab-6683-648ca696c887.png)

### 解説
Watch EventsのLINEの横の数字が「1」になっておらず、モジュールの左にイナズママークが出ていないと怪しいです。
「モジュールを右クリック」>「Delete module」で全部削除して、やり直そうとしたときに出てくることがあります。

### 対応
0からやり直す場合は、モジュールの削除ではなく、シナリオの新規作成から始めましょう
![スクリーンショット 2023-08-10 1.17.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/0514aebf-f506-66e0-9709-f9bdc3fb6c78.png)


## ②エラーは出てないけどグルグル回ったまま動かない
![スクリーンショット 2023-08-10 1.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/95d380eb-b9d9-0a60-8aab-fb54862c1376.png)

### 解説
LINEでメッセージを送っていない場合は、判断できないので送ってみましょう。
メッセージを送ってもこの状態から進まないのであれば、WatchEventsの設定が間違っている可能性があります。

### 対応
「WatchEventsのアクセストークンが間違っている」、「LINE DevelopersのWebhookのURLが更新されていない」、「設定はあっているが他のシナリオでその公式アカウントのアクセストークンを使用済み（connectionが最新でない）」などの現象が考えられるので、
落ち着いて、MakeとLINE Developersのサイトの設定に差分がないか、ひとつずつ設確認しましょう

## ③リプライメッセージでエラーになる
![スクリーンショット 2023-08-10 1.27.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/19b12e4a-bbe1-c9d9-e4f7-535a5c567ff6.png)
![スクリーンショット 2023-08-10 1.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/c2f2cc50-e429-b5db-3621-2430265cea46.png)

### 解説
正しいリプライトークン（返信をするための鍵のようなもの）が取得できず、認証に失敗してエラーになっています。

![PER1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/6d0ff553-3b3c-f078-fa61-0b50863294e3.png)

### 対応
connectionは同じものを使うようにしましょう
同じ名前で作ってしまって、訳がわからなくなったら以下から削除できます
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/b8510a0e-bd25-4ee9-10e9-0c675f1fc959.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/72b5aeb4-184b-3f17-1900-90dfe70b642d.png)
ReactNativeについてまとめる。

## React Nativeとは
- Meta社（旧Facebook社）が開発した開発フレームワーク。
- 単一のコードでAndroid,iOS,Webアプリを作成することが可能になる※クロスプラットフォームフレームワーク
※以下XPFWと略する
- 開発言語はJavaSctipt,TypeScript。

https://reactnative.dev/

## ReactNativeが流行する以前のモバイルアプリ開発における問題点
- プラットフォームごとに別々のソースコードを記述する必要がある
- プラットフォームごとに採用するプログラム言語が異なる
- プラットフォームごとの言語・FWなどの学習コストがかさむ。
- プラットフォームごとにメンテナンスが必要になり、手間と時間がかかる

つまり、<ins>多くのお金・時間・人が必要になるためモバイル市場への参入するハードルが高い</ins>

### ReactNativeがモバイル市場へのハードルを下げた
React Nativeを利用すると、1つのソースコードを記述するだけで複数のプラットフォームで同じように動作をする事が出来るので、リソースやコスト・手間を削減できるようになる。
その他にもReactNativeには色々なメリットがある。

## ReactNativeのメリット・デメリット
### メリット
- **効率的な開発が可能となる**
1コードでAndroidアプリ iOSアプリ Webアプリを同時開発する事が可能。

- **HotReload**
HotReloadが備わっており、開発効率が良いという特徴がある。
例えば、SwiftやKotolinでiOSやAndroidアプリを開発する際、コード修正をした場合、再コンパイルが必要になる。
少量の修正をしただけでも、1からコンパイルが必要になり、時間にするとコード数によるが数秒~数分ほど。
一方、HotReload機能を持つReactNativeは、コードを保存するたびに自動的にリロードが行われ即時反映される。
そのため微修正ごとにコンパイルをしなくて良い。

- **Reactエンジニアだと学習難易度が低い**
ReactNaitveとReactJSはコードの記載方法などが酷似しているため学習難易度が低い。
そのため、他のモバイルアプリフレームワーク(Xcode,AndroidStudio)と比べReactNativeを扱うまでにはそう時間はかかならないこと。

- **大規模なコミュニティがある**
StripeやFirebaseとの統合やGoogle認証の実装や、多くのサードパーティが付加価値を提供している。

### デメリット
- **頻繁にReactNativeのアップデートが発生する**
アップデートが原因で動作していたアプリが動かなくなったり、エラーが発生したりするケースもあるため注意が必要。
- **ネイティブ開発エンジニアは学習コストが高い**
SwiftやKotolinをメインにモバイル開発をしているエンジニアはJavaScriptを初めから学習する必要ある。
- **エラー箇所特定・解決に時間がかかる**
ReactNativeは、JavaScriptレイヤーで発生したエラー、ネイティブレイヤーで発生したエラー、その他で発生したエラーか、など原因を特定・判断するのに時間がかかる。



## ReactNativeの開発方法
ReactNativeには２種類の開発方法がある。
- **ReactNativeCLI**
    - XCodeやAndroidStudioをインストールする必要がある
    - iOS/Androidのネイティブ言語の機能を組み込んだり、ネイティブ機能のライブラリが利用可能。
    - 
- **Expo**
    - XcodeやAndroidStudio不要。スマホにExpoClientアプリをいれてQRコード読み取りでアプリ動作確認可能
    - ネイティブ機能・ネイティブを含むライブラリが利用できない。
例えば、Bluetooth、バックグラウンドタスク、AR/VR系の機能など・・・
    - ReactNaitveCLIより簡単に開発が可能。

どちらを選定するかは、ネイティブの機能をどこまで利用するのか要件をまとめてからが良いかと思う。
 
ReactNativeCLIとExpoの違いについて詳細は次回記述する。
Javascript におけるTree Shakingとは？

Tree Shakingは、JavaScriptの最適化技術の1つで、未使用のコード（関数、変数、モジュールなど）を自動的に検出して除去することを指します。この技術は、バンドルされたJavaScriptコードのサイズを削減し、パフォーマンスの向上やロード時間の短縮を実現するために使われます。

Tree Shakingの名前は、コードの依存関係を木構造（ツリー）として表現し、未使用の部分を「揺り落とす」（shake off）ことからきています。具体的には、以下のようなプロセスでTree Shakingが行われます：

1. **静的解析**: ビルドツール（例: Webpack）は、コードベースを静的に解析し、モジュールの依存関係を特定します。これによって、どの関数や変数がどのモジュールで使用されているかが把握されます。
2. **未使用コードの特定**: 静的解析に基づいて、コードベース内で使用されていない（参照されていない）関数や変数を特定します。これには、条件分岐や動的なコードパスの解析も含まれます。
3. **除去**: 未使用のコードを除去することで、バンドルされた最終的なJavaScriptコードのサイズを減少させます。これによって、ユーザーがダウンロードするファイルのサイズが小さくなり、ページの読み込みが高速化します。

Tree Shakingは、特にモジュールシステム（例: ES6モジュール）を使用する場合に効果的です。ただし、一部の条件下では正確な未使用コードの検出が難しい場合があります。例えば、動的なインポートや外部ライブラリの使用などが挙げられます。

Tree Shakingを実現するためには、適切なビルドツールや設定を使用する必要があります。例えば、Webpackでは`mode`オプションを `"production"`に設定することで、自動的にTree Shakingが有効になります。また、必要に応じて手動で未使用コードを記述することも可能です。
ABC313復習

# ABC313復習
[第四回日本最強プログラマー学生選手権-予選-（AtCoder Beginner Contest 313） - AtCoder](https://atcoder.jp/contests/abc313)
## ■結果  
* ABC3完
* 3完なのに緑パフォ(970)と良いランクだった。（確かにDが難問！）

## ■Ａ問題（To Be Saikyo）
人iを超えるために必要なレベルを人1を基準に走査。
最大値は0を初期値として超えたら更新。（所要時間約7分。）
```python
n = int(input())
p_list = list(map(int, input().split()))

p1=p_list[0]
max_x  = 0

for ii in range(1,n):
    x = p_list[ii] - p1 + 1
    max_x=max(max_x,x)
print(max_x)
```
## ■Ｂ問題（Who is Saikyo?）  
自分より強い人が居ないと確定している人が何人いるか確認する。
人iの自分より強い人を示す配列を準備して値-1で初期化。入力の強さ情報で更新。この際に誰がより強いかは気にしない。自分より強い人が居れば-1でなくなる。
最後に-1はいくつ残っているか確認して1人ならその人の番号を出力。（所要時間17分。）
```python
n,m = map(int, input().split())
ll = [-1] * n

for ii in range(m):
    a,b = map(int, input().split())
    a -= 1
    b -= 1
    ll[b] = a

if ll.count(-1) !=1:
    print(-1)
else:
    print (ll.index(-1)+1)
```

けんちょんさん解説。問題を最強者を始点とするグラフか否かの判定問題とし、全頂点に到達できる特定の頂点はあるか、頂点N個からDFS/BFSで辿ってみる。処理重いけど汎用的。

https://drken1215.hatenablog.com/entry/2023/08/05/234100

## ■Ｃ問題（Approximate Equalization 2）  
操作で誰かを+1/-1するので整数列Aの合計は不変量。（なのだが使い道を思いつかなかった。）
操作後は全員が平均値か平均値+1になるはず。（ということにする。理屈でなく何例か試して。）
ということは各人と平均か平均+1との差をとると各人に対して何回の操作が必要か判る。
+1/-1操作がペアなので、+1必要な操作回数と-1必要な操作回数を別々に合計し、大きい方が最低必要な操作回数になる。（所要時間34分）
```python
n = int(input())
a_list = list(map(int, input().split()))

avg = sum(a_list) // len(a_list)

high = 0
low = 0
for ii in range(n):
    if a_list[ii] > avg + 1:
        high = high + (a_list[ii] - (avg + 1))
    elif a_list[ii] < avg:
        low = low + (avg - a_list[ii])
    else:
        pass
print(max(high, low))
```
公式解説。論証過程に理解が追い付いてないが、結論とコードのシンプルさは天才的。

https://atcoder.jp/contests/abc313/editorial/6901

「Aiが小さい順にi=1,2,…,Nを並び替えたとき、先頭のN−r個のiについてBi​=p、末尾のr個のiについてBi=p+1とするのが最適に思われます」

## ■Ｄ問題（D - Odd or Even）  
まず、複数の回答を比較することで、あるAiとAjが同じかどうか判定する手立てはあることに着目。(? 1 2 3 = 0 かつ ? 2 3 4 = 0 なら A1=A4と判る。) 
1/0の確定は直ぐには難しそうなので、A1=aとして残りをa,bで埋めていく。
しかし、1/0を確定する方法に気を取られて質問の順番が定まらず時間切れ。
下記を参考にさせて頂いて質問の順番を整理。

https://zenn.dev/shunyana/articles/2d841b146f0bae

A1..Akを含む質問q1、質問q1からA1を除外してAi(i>=k)を追加した質問q2、質問q1にAkを追加してAi(1<i<k)を除外した質問q3の順でa,bを確定する。
最後に質問q1の答えを再確認してaが0/1のどちらか確定させる。
```python
n, k = map(int, input().split())


def get_answer(q):
    print("?", *q, flush=True)
    return int(input())


a = ["?"] * n
start = 0
a[start] = "a"

q1 = set()
for ii in range(k):
    q1.add(ii + 1)
t1 = get_answer(q1)

for ii in range(k, n):
    q2 = (q1 - {start + 1}) | {ii + 1}
    t2 = get_answer(q2)
    a[ii] = "a" if t1 == t2 else "b"

for ii in range(1, k):
    q3 = (q1 - {ii + 1}) | {k + 1}
    t3 = get_answer(q3)
    a[ii] = "a" if (t1 == t3 and a[k] == "a") or (t1 != t3 and a[k] == "b") else "b"

if (a[0:k].count("a") + t1) % 2 == 0:
    print("!", *[1 if c == "a" else 0 for c in a], flush=True)
else:
    print("!", *[0 if c == "a" else 1 for c in a], flush=True)
```

本コードでAC。
しかし、偶々この着目点で解ききれる設問だだっただけで、汎用性は無いかも。
けんちょんさんのやりかた（偶奇を含む対称な連立方程式をXORで処理）に慣れておくと今後問題解くときに便利なんじゃないかなと思った。まる。

https://drken1215.hatenablog.com/entry/2023/08/06/010000

https://drken1215.hatenablog.com/entry/2020/06/22/122500
オープンソースのバーチャルオフィスをGCPで構築してみた

# オープンソースのバーチャルオフィスをGCPで構築してみた

## 1. はじめに

この記事では、オープンソースのバーチャルオフィスアプリ「SkyOffice」（ https://github.com/kevinshen56714/SkyOffice ）を使用して、Google Cloud Platform（GCP）上でバーチャルオフィスを構築するプロセスについて紹介します。
SkyOfficeは、多機能なバーチャルオフィスツールとは異なりますが、交流のための必要最低限の機能を提供しています。
筆者自身も、バーチャルオフィスについては以前にGatherを一度だけ弊社内メンバーと体験した経験があります。

## 2. きっかけ

弊社内でGatherを使用したバーチャルオフィス体験を通じて、多機能でなくても、クラウド環境で利用可能なオープンソースのバーチャルオフィスアプリを探していました。

## 3. 苦労したこと

バーチャルオフィスの実装にあたり、いくつかの課題がありました。

- **クラウドサービスの選定**: サーバレス環境でのバックエンド実装を検討しましたが、実現が難しいと判断しました。
- **クライアントとバックエンドの分離**: クライアント側とバックエンド側を分離する実装方法が不明で、1週間以上にわたって悩むこととなりました。
特に公式ドキュメントに記載されたGetting Startedとの違いに苦労しました。

## 4. 実現までに実施したこと

- **ローカル実装**: 初めに、Dockerを使用してローカル環境で実装を試みました。以下は使用した`docker-compose.yml`です。
```docker-compose.yml
version: "3.7"
services:
  server:
    image: node:18
    container_name: skyoffice-server
    hostname: web-server
    working_dir: /usr/src/app/SkyOffice
    tty: true
    ports:
      - "127.0.0.1:2567:2567"
    volumes:
      - ./SkyOffice:/usr/src/app/SkyOffice
    command:
      bash -c "yarn && yarn start"
  client:
    image: node:18
    container_name: skyoffice-client
    hostname: client-server
    working_dir: /usr/src/app/SkyOffice/client
    tty: true
    ports:
      - "127.0.0.1:80:5173"
    volumes:
      - ./SkyOffice:/usr/src/app/SkyOffice
    command:
      bash -c "yarn && yarn dev --host"
```

- **GCP上での実装**: バックエンドはサーバレス環境で実装したかったです。
以下のクラウドサービスを実現したい順に候補として検討しました。
    * Cloud Functions for Firebase
    * Cloud Functions
    * Google App Engine
    * Google Compute Engine

フロントエンドはFirebase Hostingを使用するため、Cloud Functions for Firebaseの活用を考えました。

しかし、Cloud Functions for FirebaseやCloud FunctionsはEntryPointの設定方法がわからないなどの理由から断念。
Google App Engineについては、なぜ断念したかすら記憶にないほど。。。

この辺で私の以下の課題を見つける事となりました。
・サーバサイドのnode.jsを構築するにあたって知識の浅さ
・サーバレス環境側としてGCPの理解不足

## 5. 結果
バックエンドはGoogle Compute Engineを使用し、フロントエンドはFirebase Hostingで実現しました。

## 6. 今後の展望
バーチャルオフィスの構築は成功しましたが、GCPの知識不足が浮き彫りになったので学習をまじめに進めていきます。
また、現状立てた環境はほぼ自分だけでの検証なので複数人での利用でどうなるか？を検証していきたいです。
Next.jsのリバースプロキシについて

## 事象

Amazon ECSにてデプロイしてるFEコンテナとBFFコンテナの疎通がうまくいかず、CORSエラーや混合コンテンツエラーが発生してました。CORS（Cross-Origin Resource Sharing）は、異なるオリジン間でのリソースの共有を制御するためのメカニズムです。混合コンテンツエラーは、安全でないコンテンツ（HTTP）が安全なページ（HTTPS）に読み込まれたときに発生します。

```
Access to XMLHttpRequest at '<BFFの/graphqlエンドポイント>' from origin '<FEのエンドポイント>' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
```

## 一般的なアーキテクチャにおける通信

一般的に、FEとユーザー間の通信はHTTPSを使用してセキュアに行われますが、内部のサービス間通信はHTTPを使用して行われることが多いです。これは、内部通信は信頼されたネットワーク内で行われるため、HTTPSのオーバーヘッドを避けるための最適化として行われます。

## 対処法

そのエラーを一時的に解消するための一つの方法として、Next.jsでは、next.config.jsのrewrites機能を利用して、リバースプロキシの設定を行うことができます。リバースプロキシを使用することで、異なるオリジン間のリクエストを中継し、CORSエラーを回避することができます。

以下の設定例では、FEからの/graphqlへのリクエストを、BFFの/graphqlエンドポイントに内部的にリダイレクトしています。

```next.config.js
module.exports = {
  // 他の設定
  async rewrites() {
    return [
      {
        source: "/graphql",
        destination: `${process.env.NEXT_PUBLIC_BFF_ENDPOINT}/graphql`,
      },
    ];
  },
};
```

この設定により、FEからのリクエストはBFFに直接リクエストされるようになり、CORSエラーや混合コンテンツエラーを回避できます。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray:
devise 日本語化

**初めに**
・devise導入済み
エラーメッセージ、フラッシュメッセージなど日本語で出力されるように実装していきます
_________
#### gemインストール
```diff_ruby
gem 'rails-i18n'
gem 'devise-i18n-views'
```
```
bundle install
```
**gem 'rails-i18n'**
Railsで提供されている多くのデフォルトエラーメッセージや日付のフォーマットなどを他の言語に翻訳するためのジェムです。このジェムを使用すると、さまざまな言語への対応がより簡単になります。

**gem 'devise-i18n-views'**
Deviseのビュー（ログイン画面、パスワードリセット画面など）を多言語化する際に使用します。エラーメッセージだけでなく、これらのビューのテキストも日本語化したい場合は、このgemを使用すると便利です。

アプリケーションの設定ファイル（config/application.rb）でデフォルトの言語を日本語に設定します。
```config/application.rb
 # デフォルトの言語を日本語に設定
    config.i18n.default_locale = :ja
```
____________
### フラッシュメッセージ日本語表示
日本語化のgemを使用せずに日本語化する場合以下のような記述をアクションごとに指定する必要があります
```diff_ruby
 def create
    self.resource = warden.authenticate(auth_options)
    if self.resource
      flash[:notice] = 'ログインに成功しました。'
      sign_in(resource_name, resource)
      respond_with resource, location: after_sign_in_path_for(resource)
    else
      flash[:alert] = 'ログインに失敗しました。メールアドレスまたはパスワードが正しくありません。'
      redirect_to new_session_path(resource_name)
    end
  end
```
しかし、日本語化のgemを使用することで少ない記述で実装することが可能となります。

**実装方法**
まず、**config/locales**ディレクトリ内に**devise.ja.yml**ファイルを作成します。
そのファイルに、次のように日本語の設定を書きます。
```devise.ja.yml
ja:
  devise:
    failure:
      invalid: メールアドレスまたはパスワードが正しくありません。
    sessions:
      signed_in: ログインに成功しました。
      signed_out: ログアウトしました。
    registrations:
      user:
        signed_up: "アカウント登録が完了しました。"
      signed_up: "アカウント登録が完了しました。"
  errors:
    messages:
      not_saved:
        one: '1件のエラーが発生したため %{resource} は保存されませんでした。'
        other: '%{count} 件のエラーが発生したため %{resource} は保存されませんでした。'
```
:::note
yelファイルはインデントなどが重要となるので
https://www.yamllint.com/ などで確認を行うと良い
:::
ビューページにフラッシュメッセージを表示するためには、以下のようなコードを共通のレイアウトファイル（例：application.html.erb）に追加することで表示できます。
```erb
<% flash.each do |key, value| %>
  <div class="alert alert-<%= key %>">
    <%= value %>
  </div>
<% end %>
```
このコードは、フラッシュメッセージの各要素をイテレートし、そのキーと値に基づいてBootstrapのアラートクラスを使用してメッセージを表示します。キーが:noticeの場合は、alert-noticeクラスが適用され、:alertの場合は、alert-alertクラスが適用されます。

これを更にカスタマイズしてBootstrapのデザインに合わせたい場合、以下のように書くことも可能です。
```erb
<% flash.each do |key, value| %>
  <div class="alert alert-<%= key == 'notice' ? 'success' : 'danger' %>">
    <%= value %>
  </div>
<% end %>
```
このようにすることで、成功メッセージは緑色、エラーメッセージは赤色で表示されるようになります。

:::note
このコードをapplication.html.erbに追加すると、すべてのビューページでフラッシュメッセージが表示されるようになります。最適な場所に追加してください。一般的には、<body>タグの直下やナビゲーションバーの下など、目立つ位置に配置します。
:::
_______
参考

https://zenn.dev/h_hana/articles/e10a4f0acbe0e5
PF作成：９日目

今日もレイアウト。ブートストラップやCSSを使い慣れていないせいで一つ一つにとても時間がかかっている。

## 進捗
- 検索フォームのサイドバーのレイアウトを整えた。
- Viewのメインとフッターに背景画像を入れた。
- フォントが適用された
- ロゴを作成した


## 学習
今日はいろいろ学習できた。参考資料もたくさん見つけることができた。
- セレクトボックス内にチャックボックスの作成。JavaScriptも使用。<br>(参考資料：https://web-studio-swing.com/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9in%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AAui%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9/）
- クラウド９のショートカットキー。参考資料にはなかったが、インデントをまとめて一つ詰めたい場合はShift+Tabでいける。ただしMacに限る。<br>(参考資料：https://qiita.com/shin1kt/items/03eed49c12104002a2c7)
- ブートストラップでブロック要素に枠組みをつける時。<br>(参考資料：https://getbootstrap.jp/docs/5.0/utilities/borders/)
- おまけのような話ではあるが、今までブートストラップの使用バージョンを５だと思っていて、実際は４だった。なので今回ブートストラップがうまく反映されなくて悩んでいたのは全て５でできることだった。
- ブートストラップでの余白の開け方。<br>(参考資料：https://himatoto.com/bootstrap2/)
- HTMLで文字の色を一部変更。<br>(参考資料：https://magazine.techacademy.jp/magazine/9799)
- 背景画像が綺麗に反映されなくて、メンターさんに聞いてもわからなかったが自力で一応解決できたので備忘録として残しておこう。background-size: 100% 100%;これで背景画像を全体に適用させて縮小されてるという動きができた。正しいかはわからない。
- フッターをメインの情報量に関わらず下に固定する方法。<br>(参考資料：agazine.techacademy.jp/magazine/19410)
- ブートストラップでlgやmdを使う時に基本となる考え方で、画面は１２として考えるのでいろいろ合わせて合計１２にした方がいいらしい。足りないも余るのもよくない。


## ヒント
- ロゴ作成に便利。URL:https://www.canva.com/projects
- 和風アイコンのフリー素材。URL:https://icooon-mono.com/tag/%E5%92%8C%E9%A2%A8/
- 背景画像の位置決めに。URL：https://developer.mozilla.org/ja/docs/Web/CSS/background-position-


## 明日の予定
今日でチーム開発のメンバーともお別れになった。ラインなどでつながりはしようと思っているが、やはり仲良くしてただけに寂しい。それに次のメンバーも決まったが知らない人ばかりで緊張と不安がある。
明日は新しいメンバーとの顔合わせとWBSの発表なので午前中はほとんど学習出来ないと思うので午後から頑張ろう。
進捗予定としてはTopページを完成させて、userの寺社投稿ページに入ることを目安にする。
JEDAI Meetup Tokyoに参加して来ました！


# はじめに
Databricks社様は、Apache Sparkの共同創設者であるマテイ・ザハリア氏とアリ・ゴディシ氏が2013年に立ち上げた企業です。この企業は、AIや機械学習を含むビッグデータの分析を、Databricksだけで完結させることのできる統合環境を提供しています。つまり、データ抽出・加工・分析・可視化の様々なワークロードを一つのサービスでカバーしているのです。

昨日、DatabricksJapanでサポートしているユーザーコミュニティ「JEDAI」がオフラインイベントを開催されたので、参加してきました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340799/2b085041-08d8-f2b2-eb13-3fd6bc5ab59d.png" width="1000">

# 各種講演について

### １．楽天証券×DatabricksのデータとAIの物語　～Databricksを利用してて思うこと～
データ分析の統合部署を新たに設立し、先進的な技術への取り組みを強化しているとのことです。企業が求める分析環境において、ユーザーの変動に伴うデータ量の急増するケースは多くなっています。スケーラビリティが不可欠であり、さらに、データエンジニアからアナリストまでの幅広い職種の人々が利用できる統合データ環境の需要も高まっています。これらの課題に対応するため、Databricksの導入を選択したとのことでした。
Databricksの採用により、分散処理を利用した高負荷処理が可能となり、AzureMLやPowerBIへの接続も容易になったとのことです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340799/978eb8d9-14a6-218e-ccb6-3181adc99165.png" width="1000">

### ２．日経におけるAI・データサイエンスに関する取り組みとDatabricks
こちらでは、実際にDatabricksを使用した記事推薦などの事例を多く紹介しています。PoCでなく、実際の案件へと進展させた事例も多数ありました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340799/595c6f3e-cce0-23c0-d491-6090d46d8475.png" width="1000">

### ３．金融データ・生成AI活用に必要となる金融機関の組織設計と業界横断取組について
金融データの有効活用を目的に、業界全体でのデータ活用を実務の視点から推進することを意図して、コンペティションが開催したとのことでした。このイベントは多くの関心を集めたとのことでした。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340799/430fd913-4440-1453-dce6-7245c6a3f16b.png" width="1000">

### ４．新規事業立ち上げ時におけるデータブリックスの価値とLLMによるソリューション/運用プロセスの高度化
Databricksを使用して、生成型AIのQAbotを開発したとのことでした。このbotはベクトル検索に加えて、データの権限管理も可能とのことです。データの権限管理にはUnityCatalogを使用しているのでしょうか。興味深いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340799/a60345b0-1336-99e6-80c9-e14676af5d83.png">

# 最後に
登壇者の皆様からの一貫したメッセージは、データの取得、分析、および可視化を複数のサービス間で移動することなく、統合プラットフォームで効率的に実施できる利点があるとのことでした。さらに、Sparkの採用により、高いパフォーマンスとコスト効果が実現できるとの共通の意見がありました。また、従量課金制のため、大きな初期投資なしに小規模からのスタートが可能との声も聞かれました。
私自身、Databricksに関するプロジェクトにはまだ携わる機会がありませんが、この先進的な技術に積極的に取り組みたいと感じています。
Eclipseのフォント設定を毎回調べるの辞めたい（辞める）

[^1]:https://web-camp.io/magazine/archives/127967
[^2]:https://www.infoq.com/jp/news/2021/07/visual-studio-code-java-ide/
[^3]:単価2000円/hとした場合

# 前置き
みなさ～ん！

`Eclipse エクスプローラ フォント`
`Eclipse コンソール サイズ`

などの単語で検索、してますか？

･･･。

･･････。

__地獄に堕ちろ！！！__

----

Eclipseのフォント周りの設定を一々調べるのが面倒くさい！

そんな悩みをEclipseユーザ全員が持っていると思うんですよね、ソースは自分。
これは仮定の話ですけど
・稼働日240日間ある内、1日5分調べる
・日本国内のエンジニアの人口は2022年現在で132万人 [^1]
・IDEの内、Eclipseをメインサブ関わらず使用するユーザーは約25％ [^2]
とすると __なんと年間6,600,000時間__ が無駄になっているわけです。

そんな無駄を解消するための記事です。
つまり年間132億円のコストカットに繋がるほどの価値があるはず。 [^3]

----

:::note info
__動作環境__
Windows10 64bit
Pleiades All in One for Windows x64 (Java Full Edition) v20230617
:::

# Eclipseの画面
こんな構成でプロジェクトを作成しているものとします。
![1.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/3ef07bbf-2df9-0b52-1cdd-aa23be9e5775.gif)

以下の設定値は全てツールバーの
「ウィンドウ」 > 「設定」 > 「一般」 > 「外観」 > 「色とフォント」
の順で遷移した状態で進めてください。

## 基本
### 設定ダイアログ
:::note info
__ツリー構造__
基本 > ダイアログ・フォント
:::
この画像に出てる設定画面そのもののフォント。
全体的に小さくて読めないような気がします。 ~~これが、年齢･･･？~~
ちなみにUD教科書体とかにすると __なぜか横幅が異常に広がる__ ので注意してください。
他は確かめてないので分かりませんが。無難に游ゴシックかMSゴシック辺りでいいのでは。
![設定ダイアログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/21cad45a-8f8d-91d6-85f5-5ef896828d3b.png)

### （１）エディタ部分
:::note info
__ツリー構造__
基本 > テキスト・フォント
または
Java > Javaエディター・テキスト・フォント
:::
次に最も読み書きする箇所であるエディタ部分。

1枚目は全体的な設定を変える箇所です。なんなら2枚目の設定値の親クラス的な存在。
2枚目はJava言語の場合に触る箇所なので、別言語なら別言語用の場所があるはずです。
![テキストエリア.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/29fbe94a-8bfc-35eb-f68e-bceab13d8c22.png)
![テキストエリア2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/7af0822c-dd64-56ff-c853-65bfe34af3fb.png)


## ビューおよびエディター・フォルダー
### （２）タブの文字
:::note info
__ツリー構造__
ビューおよびエディター・フォルダー > パーツ・タイトルのフォント
:::
ここはあまり触らないかも。
「コンソール」「Gradleタスク」「進行状況」と言ったビューの文字、
あるいは「Main.java」「application.properties」と言ったファイル名の文字などを変更します。
![タブの文字.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/0c3be5d5-abdf-2225-b5e1-4d803920e33b.png)

### （３）パッケージ・エクスプローラ、プロジェクト・エクスプローラ
:::note info
__ツリー構造__
ビューおよびエディター・フォルダー > ビューのツリーおよびテーブル・フォント
:::
最初の画像で言えば左部分で、パッケージ構成やフォルダ構成を確認する部分。
初期設定では全体的に小さすぎるので10pxにしてもいいと思います。
![エクスプローラ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/5ac5d0a1-5c5f-2ce2-b944-b1f0f0290a06.png)

## デバッグ
### （４）コンソール
:::note info
__ツリー構造__
デバッグ > コンソール・フォント
:::
最初の画像下部にある、Eclipse上で走らせると色々な情報が流れてくる標準出力とかを表示する箇所。
デバッグ以外にも使う気がするんだけどなあ。

ちなみに __出力済みの文字列には反映されないようです__ ので、再度アプリを走らせてください。
![コンソール（再実行で反映）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/ccbc8952-1a9f-e5bb-14c3-9a28cf104898.png)

# まとめ
今の現場ではQiitaが閲覧できるので役に立ちます。
![基本.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/67c8e345-c510-a92c-4de1-5c52cb85c5ea.png)

![ビューおよびエディター・フォルダー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919779/7e882376-9da3-7dd4-ee1d-8ecc03018d19.png)
Javascriptの Source mapとは

JavaScriptのソースマップ（Source Map）は、開発者が開発中の元のソースコードと、それを変換・最適化した結果のJavaScriptコードとの間の対応関係を保持するファイルです。通常、JavaScriptコードはブラウザや他の環境で実行される前に、圧縮、結合、トランスパイルなどの最適化処理が行われます。その結果、デバッグが難しくなることがあります。

ソースマップは、このような最適化されたコードと元のソースコードの対応関係を定義するためのマッピング情報を提供します。これにより、デバッグツールや開発者コンソールでエラーメッセージやスタックトレースを表示した際に、最適化されたコードの行やファイルが元のソースコードと関連付けられ、デバッグが容易になります。

具体的には、ソースマップは以下の情報を持っています：

1. 変換前の元のソースコードのファイル名と行番号、列番号
2. 最適化後のコード（通常は圧縮されたコード）のファイル名と行番号、列番号

これにより、デバッグツールはエラーやスタックトレースを表示する際に、最適化されたコードの場所を元のソースコードにマッピングして表示することができます。

ソースマップは開発者にとって非常に便利であり、最適化されたコードのデバッグやトラブルシューティングを容易にする役割を果たしています。多くのJavaScriptのビルドツールやトランスパイラは、ソースマップの生成と利用をサポートしており、効果的な開発プロセスをサポートしています。
【React】要素の外側をクリックした際の処理を設定する

## 方法

以下のように記述することで要素の外側をクリックした際に実行する処理を設定できます。

```ts
// ...

const ref = useRef<HTMLDivElement>(null)

const handleClickOutside = useCallback(
  (ev: MouseEvent) => {
    if (!ref.current?.contains(ev.target as Node)) {
      // 外側をクリックした際の処理
    }
},[])

useEffect(() => {
  document.addEventListener('click', handleClickOutside, true)

  return () => {
    document.removeEventListener('click', handleClickOutside, true)
  }
}, [])

// ...

```
動的型付けと静的型付けの違い

何度ドキュメントを読んでも頭に入ってこないこのテーマ。
基礎中の基礎だと思うのですが、なんで理解できないかなーというと私はjs以外の言語を扱えないからな気がします。動と静の違いがわからない。

今日はchatGPTを使いながら、調べたことをまとめてみます🐥

## ▼「動的型付け」とは

変数を使うときに、その中身のデータ型（数字や文字列などのデータの種類）をあとから決めることができることを意味します。
最初はどんなデータでも入れられて、その後でデータの種類を変えることもできます。（変換で手間はかかるかもしれませんが…）

=======8/11 0:27追記=======

下記のように教えていただきましたー！
>Pythonの場合：
値はすべて参照型オブジェクトです。
変数に型はなく、変数は値（オブジェクト）への参照を保持するだけです。
参照先の値が型情報を持っています。
別の型の値を代入すると保持する参照が変わるだけで、何も変換しません。

=======追記ここまで=======

※動的型付けのプログラム言語
　JavaScript / Python / Ruby / PHP など

:::note info
・**柔軟さ**：新しいデータ型を試したり、プログラムの変更が簡単
・**迅速な開発**：データ型を気にせずに書け、直感的な開発ができる
・**簡単さ**：勉強コストが低く、初心者でも学びやすい
:::

:::note warn
・**バグ発見の遅延**：型エラーがコードの実行時に発見されるので、バグの発見が難しくなるかも
・**無駄なメモリの発生**：必要なメモリ数が把握できないため余分なメモリ領域が必要になる（pythonならメモリ数が把握できるらしいとのこと）
:::


## ▼「静的型付け」とは
変数を使うときに最初からその中身のデータ型を指定しなければならないタイプの型付けです。
つまり、変数を作るときに「これは数字」とか「これは文字列」と宣言する必要があります。
その後に変数の中身を変える際も、同じ種類のデータを入れる必要があります。

※静的型付けのプログラム言語
　TypeScript / C/C++　/ C# / Java など

:::note info
・**安全性**：プログラムの実行前にエラーが発見されるので、安全なプログラム作成ができる
・**厳密さ**:型が明確なので大人数での開発でも堅牢で、人によって書き方がばらつきにくい
:::

:::note warn
・**少し複雑**：ある程度知見が必要で初学者には敷居が高くい
・**柔軟性の低下**：ひとつひとつ型を指定し、それに従う必要がある（データ型を変更するのも少し時間がかかる）
:::

### ▼余談：chatGPTにも聞いてみました
質問文に「中学生でもわかるように教えて！」と付け加えるだけで、めちゃくちゃ易しい文章になるのでよくやります。
（たまに小学生レベルにしてもらうことも🎒🌷）

今回はねこちゃんを使って説明してくれました…！やさしい
↓↓動的型付けについて
>例えば、ねこちゃんを表す変数を考えてみましょう。最初はそのねこちゃんが何かはわからなくても大丈夫です。その変数にはいつでも数字や文字列、他のものを入れることができます。

```js
let neko = "にゃーん";  // 最初は文字列を入れてみる
console.log(neko);

neko = 3.14;  // その後、数字を入れてみる
console.log(neko);
```

↓↓静的型付けについて
> 変数を使うときに最初からその中身のデータの種類（数字や文字列など）を指定しなければならないタイプの型付けです。つまり、変数を作るときに「これは数字だよ」とか「これは文字列だよ」と宣言する必要があります。その後、変数の中身を変える際も、同じ種類のデータを入れる必要があります。
例えば、次のような感じです。

```js
let age: number = 10;  // 変数ageは数字だよと宣言
console.log(age);

age = "こんにちは";  // エラーが出る！数字じゃないものを入れようとしたから
```

（ねこちゃんは…？:cat:）

## ▼最後に
動的型付けと静的型付けの違い、メリットやデメリットについて学びました。
プロジェクトや状況によってもどちらが最適か変わるようですね。
TypeScriptなどの開発をしてみると、より深く理解できそうです！

関連してデータ型についても理解が深まったので良かったです:ok_woman_tone1:

こんな感じでのろのろと記事を更新していこうと思いますー！

## ▼参考

https://qiita.com/toryuneko/items/c023031b61886cae2a99

https://qiita.com/wann/items/16920b070dc0483f152a

https://note.com/tasting/n/na6152e3aac51
Mac版Discord（ディスコード）で画面共有するための手順

今回はSwitchのゲーム（Splatoon3）をディスコードで画面共有するために行なった設定をまとめます。
MAcの場合、Windowsと違い、音声の設定が特に難しかったです。

## OBS Studioをダウンロード
まず初めにOBSをダウンロードしていきます。
下記リンクに遷移し、ダウンロードボタンを押下します。
私の場合はM2 CPUのため、AppleSiliconを選択しました。
[OBSダウンロードページ](https://obsproject.com/ja/download)

ダウンロードできたら、次はOBSの設定を行っていきます。

## OBS設定
OBSを開くと↓のような画面になるかと思います。


![スクリーンショット 2023-08-09 23.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/1d12c1fa-91c9-1e3f-4eda-4ac15ea84c24.png)

画面左下の辺りにあるソースから、映像キャプチャデバイスをクリックします。
![スクリーンショット 2023-08-09 23.04.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/42183118-80fc-aa1f-39ed-acab7fee4245.png)

任意の名前を入力し、OKで作成します。
![スクリーンショット 2023-08-09 23.04.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/b7e182a8-8c6b-b5cf-2cd4-e351be86c667.png)

デバイス欄で使用しているキャプボを選択すると↓のように画面が表示されます。
![スクリーンショット 2023-08-09 23.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/75d94bf1-011a-7d73-c5f9-2aae3cea0a5b.png)
OKを押すとゲーム画面が表示されます。
これで画面側の設定は以上です。
![スクリーンショット 2023-08-09 23.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/f9917c7a-0c3d-ed85-c3fc-29d4f07d1619.png)
次は音声側の設定をしていきます。
初めにソースから音声入力キャプチャを選択します。
![スクリーンショット 2023-08-09 23.07.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/3f122d71-1b19-3294-ee8a-9857f6e40016.png)
音声側も任意の名前をつけてOKをクリックします。
![スクリーンショット 2023-08-09 23.07.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/84123115-627a-daa8-1a08-c7f7447c747d.png)
デバイスも同じくキャプボを選択して下さい。
![スクリーンショット 2023-08-09 23.07.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/79cf3311-8960-e6c2-fa35-10a095eb2099.png)
これでOBSではキャプボからゲームの音を出力することができるようになりました。
あとはディスコードで画面共有の設定を行なっていきます。
![スクリーンショット 2023-08-09 23.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/022b20d0-18f4-5723-b511-69092a13bc7c.png)

## ディスコード音声設定
最初にディスコードを開き、設定から音声、ビデオを開きます。
スクロールしていくと画面共有という欄があるのでインストールするをクリックします。
うまくいった場合、↓のように「アプリケーションから音声をキャッチする準備が整いました」と表示されます。

![スクリーンショット 2023-08-09 23.23.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958368/5855ffac-5891-f8ab-dc08-913e808bceb1.png)

※エラーが表示された場合
もしうまくいかない場合は下記のリンクを参考にすると簡単に解決しました。
[Discord公式Twitterリンク](https://twitter.com/discord_jp/status/1645651865588183042)
流れとしては[AudioHijack](https://rogueamoeba.com/audiohijack/)をダウンロードしてリカバリーモードからセキュリティの低下で低セキュリティ設定を行い、再度ディスコードでインストールするボタンをクリックします。

以上の設定が完了してから画面共有をするとゲーム画面、ゲーム音が問題なく出力されるかと思います。
もしできない場合は再起動すると改善することがあります。
Rails – ActiveRecordのメソッドチェーンで then を使って nil 対策 ( 変数の値の有無で処理分岐 )

# 問題

- 変数の値がある時はその値で絞り込みたい
- 変数の値が nil の時は何も絞り込みをおこないたくない

だが次のような書き方だと カラムの値が NULL のものを絞り込んでしまう

```rb
target_id = nil

User.where(flag: true).where(id: target_id)
```

# 解決

then を使って分岐させる

```rb
target_id = nil

User.where(flag: true).then do |relation|
  if target_id
    relation.where(id: target_id)
  else
    relation
  end
end
```

scope でも実現できるがこちらの方が手軽な書き方


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ
ECS・Dockerの学習前→学習後

ECS・Dockerについて学習をしたので自身の理解・復習また文章力の向上のためアウトプットさせていただきます。

<h1>ECS・Dockerの学習前の理解</h1>

はじめに僕自身のECS・Dockerの理解は以下のような感じでした。

--Docker--
・Dockerは「コンテナ」を作成し、その作成したコンテナ自体は自由に違う環境に移動させることができる。
・その作成した「コンテナ」はどの環境でも使用できる。<br><br>--ECS--
・ECSはDockerを管理するAWSのサービス。
・タスク実行：「タスク実行」した数だけ「タスク」が1つの「コンテナ」の中に生成される

図.1
![学習前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523101/b202ce7c-b37d-9428-e053-f2d19ef2ed29.png)


ECSはDockerを管理するサービスなので、ECS内で「クラスター」を作成し「タスク定義」し「タスク実行」すると自動で「コンテナ」が生成されそのコンテナ内に実行した「タスク内容」が生成される。

上記のような理解で勉強を始めました。

<h1>ECS・Dockerの学習後の理解</h1>
学習後の理解は以下のようになりました。
<br>-----<br>1.<br>「Dockerファイル」を構築してそれによって作成されるものは「Dockerイメージ」
<br><br>2.<br>ECRで「リポジトリ」を作成してその後【1.】で作成した「Dockerイメージ」を「リポジトリ」にプッシュする。
<br><br>3.<br>ECSで「クラスター」を作成しその後「タスク定義」で「コンテナ」にどのECRのイメージを入れ込むかを定義する。
<br><br>4.<br>指定の「クラスター」で「Fargate」や「EC2」などのどの起動タイプで実行するか、どのバージョンを使用するか、タスクを何個実行するかなど設定し「タスク(コンテナ)」を作成する。
<br>-----
<br><br>・タスク実行：「タスク実行」の数だけ「タスク(コンテナ)」が作成される。
<br>
<br>図.2

![学習後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523101/b47ebae2-eb61-878c-b17b-1dfeee0ae170.png)

・「Dockerファイル」を作成し、そのファイルの中に「何を入れるか」や「新たなディレクトリの作成指示」や「その作成したディレクトリ内に新たに何かを入れる」などを予め記述を入れ込みしておき、その「Dockerファイル」を保存しておくと作成したい数毎に作業することがなくなり「タスク実行」するたびに同じ環境のものが生成されるのでミスが起こることがなく、また時間効率も良く、とても効率的で便利です。
<br><br>・タスクを実行する際に「起動タイプ」を選択します。その中でよく使うのが「Fargate」と「EC2」なり、それぞれ内容も料金を違ってきます。<br>【EC2】の料金は「Fargate」より料金は安いのが特徴です。ですが「コンテナインスタンス」が作成されるので管理が必要になってきます。<br>一方で【Fargate】は「EC2」より少し料金は高いですがAWS上で「コンテナ」を「サーバーレス」で実行できるのでメンテナンス等の管理が不要なる便利な機能が特徴です。
<br>ですので上記をまとめると
<br>【Fargate】=ランニングコストは少し高くなるがインスタンス管理の運用コストは発生しない。<br>【EC2】=ランニングコストは安くなるが、インスタンス管理の運用コストは発生する。

Fargateの料金は<a href="https://aws.amazon.com/jp/fargate/pricing/" target="_blank">こちら</a>を参考にして下さい
EC2の料金は<a href="https://aws.amazon.com/jp/ec2/pricing/" target="_blank">こちら</a>を参考にして下さい


<h1>ECS・Dockerのついて<br>学習前と学習後の理解のまとめ</h1>

勉強前と勉強後に認識違いがとてもあった印象でした。
ーーーーーー
勉強前：「タスク実行」した数だけ１つの「コンテナ」の中に「タスク」が作成される(図.1)
↓
勉強後：「タスク実行」した数だけ「タスク(コンテナ)」が作成される(図.2)
ーーーーーー
学習前は「タスク＝コンテナ」という認識ではなかったので、上記の認識は大きく違う点で、今回でとても勉強になりました。

またDockerファイルも予め記述などをしておけばミスもなく時間効率も良いので、ぜひ活用していきたいと思います。
Docker自体も各環境に影響することなくどの環境でも作業できるとても便利なものでとても興味が湧きました。まだまだ知識は浅いのでこれからももっと学習していきたいと思います。


最後まで読んでいただいた方、ありがとうございました。
Excelで選択したセル範囲に斜線を入れる

仕事の書類を作成するに当たり、必要となったので作成。
chatGPTでは一発でうまく作成できなかったので、備忘録として。


```vb
Sub 選択範囲に斜線を入れる()
    Dim HT, TP, LF, WD, DN As Double
    Dim startCell, endCell As Range
    Dim drawingShape As Shape
   
    With Selection
        ' 選択範囲の開始セルと終了セルを取得
        Set startCell = .Cells(1, 1)
        Set endCell = .Cells(Selection.Rows.Count, Selection.Columns.Count)
       
        WD = .Width
        HT = .Height
        LF = startCell.Left
        DN = startCell.Top + (endCell.Top - startCell.Top + endCell.Height)
   
    End With
   
    Set drawingShape = ActiveSheet.Shapes.AddConnector(msoShapeRectangle, LF, DN, LF + WD, DN - HT)
    drawingShape.line.ForeColor.RGB = RGB(0, 0, 0)

End Sub
```
こんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530290/9305d9b7-926d-54d5-bf87-8b6a796001e7.png)

## 参考
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11190716011
Minecraft Skript - 2. 変数と%%をなんとなく理解する

前回の記事で、`%player%`というものが出てきました。

https://qiita.com/ringo360/items/6c69c65fa34994631c01

今回は、
* `%`で囲われた`player`とは何なのか
* `%`で囲うと何ができるのか
* `{_n}`や`{list::*}`といった変数とはどういう物なのか

について解説します。

:::note warn
この部分は説明が難しく、わかりにくいかもしれません。
なんとなく「そういうものなんだな」と理解して頂ければokです。
:::

## `player`と`%`って何なの？

この、`player`はSkriptの __Expression__ と呼ばれる物の一つです。
翻訳すると、 __表現__ になります。
このExpressionは、イベント発生時等に値が設定されます。
```
if player's gamemode is survival:
    send "あなたはサバイバルモードです。" to player
```

これを`%`で囲むとどうなるかというと、この`player`に含まれた値を表示できます。
主にメッセージを送信する`send`で使う事が多いと思います。

```
send "あなたのゲームモードは%player's gamemode%です。" to player
```

## 変数とは

このExpressionには変数というものも含まれます。
...といっても、変数の説明がまだなので分からないでしょう。

変数とは、値を`{ }`のようなもので保存するものです。
いくつか種類があります。
```yml
# 変数名はabcとしています。
変数          -> {abc}
一時変数   　  -> {_abc}
リスト変数     -> {abc::*}
一時リスト変数　-> {_abc::*}
```

***

### 変数とリスト変数 - {abc}, {abc::*}
**サーバー内の全ての場所**で使える変数です。
変数には1つの値しか入りません。
しかし、リスト変数は複数の値を入れられます。
つまり、
変数はAとBとCのどれかしか入りませんが、リスト変数であれば全て入れられるわけです。

#### 例文 (abc.sk)
```abc.sk
# 例文です
set {abc} to A               #{abc}にAをセット
set {abc::*} to A, B, and C  #{abc::*}にAとBとCをセット
add A to {abc::*}            #Aを{abc::*}に追加
remove A from {abc::*}       #Aを{abc::*}から削除
delete {abc}                 #{abc}を削除
delete {abc::}               #{abc::*}を削除
```

***

### 一時変数と一時リスト変数 - {_abc}, {_abc::*}
**イベント内でのみ**で使える変数です。
変数の最初に`_`が付き、処理が終わった後に変数のデータが消去されます。
それ以外は変数とリスト変数と同じです。

***

## 例文

```yml:logging.sk
on join:
    set {ip.%player%} to player's ip 
```
参加時にプレイヤーのIP(player's ip)を`{ip.%player%}`に保存します。
変数名を見ると、`%player%`がありますね...
つまり、`%player%`にはプレイヤー名が代入されます。
MCIDが`ringo360xd`なら、`{ip.ringo360xd}`となります。
そして、`{ip.ringo360xd}`にはringo360xdのIPが代入されます。
(192.168.1.100など)

***

```yml:loc.sk
command /saveloc:
    trigger:
        set {loc.%player%} to player's location
```
```yml:loc.sk
command /loadloc:
    trigger:
        teleport player to {loc.%player%}
```
これは、`/saveloc`で`{loc.%player%}`という変数にプレイヤーの位置を保存し、
`/loadloc`で保存した変数の位置にテレポートするというものです。

:::note
コマンドの詳しい作り方は、また今度解説します。
:::


今回はここまで！
良いSkriptライフを!
Nestjs 入門してみた

## 背景
最近GreenとかYoutrustをみると、フロントもサーバーもTypeScript使ってますというところがかなり多い。確かにTypeScriptで統一できれば開発効率はよさそう。サーバー側はNestjsってやつが主流っぽい？（私の小さな観測範囲）ので、ちょっと入門してみる

## 環境
- WSL(Ubuntu 22.04)
## 概要
- 内部でExpressを使用している
  - オプションでFastify(早いらしい)を使用するように構成することもできる
  - Nest は任意の Node HTTP フレームワークと連携できる
- Angularの影響を受けている

## Hello Worldまで
#### [NestCLI](https://docs.nestjs.com/cli/overview) をインストール
```bash
$ npm i -g @nestjs/cli
```

#### サンプルプロジェクト作成
```bash
$ nest new sample-nest
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152020/3c1de85d-4390-9ae4-2da0-ae4e28010ee5.png)

#### できたプロジェクトをvscodeで開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152020/d77e3901-b191-9b47-9729-629d3513d0bc.png)

デフォルトでいろいろできてる状態になってる

#### 起動
```bash
$ npm run start
$ npm run start:dev # ファイルの変更監視をする場合
```

localhost:3000 にアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152020/2836fa81-b05d-edaa-139d-f907fa3e3a8e.png)

#### SWCビルダー
```
開発プロセスを高速化する (ビルドを 20 倍高速化する) には、次のようにフラグをスクリプトに渡すことでSWC ビルダーを使用できます。 -b swcstartnpm run start -- -b swc
```

という記述があるので、SWCビルダーを調べてみた。

```
SWC (Speedy Web Compiler) は、コンパイルとバンドルの両方に使用できる拡張可能な Rust ベースのプラットフォームです。Nest CLI で SWC を使用することは、開発プロセスを大幅にスピードアップするための優れた簡単な方法です。
```

[ドキュメント](https://docs.nestjs.com/recipes/swc)をみるに確かに早そうだが、設定が必要らしい。いったん飛ばす。

#### ホットリロード
`npm run start:dev` で一応されるっぽいが、自動でブラウザはリロードされない。手動リロード必要。

#### LinterとFormatter
デフォルトでeslintとprettierが設定されている。

## 備考
[公式ドキュメント](https://docs.nestjs.com/)が丁寧なのでそれ読めばよさそう。
interface・typeの違いと使い分け


何気なくコードを書いていたので、この際きちんと調べ直したのでアウトプット。

## 違い
### interface
**オブジェクトとクラスの型のみ定義する**
```TypeScript
// object
interface User {
  id: string
  name: string
}
// class
class Mypage implements User {
  id: string = 'A001'
  name: string = 'メッセージ'
}
```
**拡張の仕方**
```TypeScript
interface User {
  id: string
  name: string
}
interface User {
  age: number
}
class Mypage implements User {
  id: string = 'A001'
  name: string = 'メッセージ'
  age: number = 28 // ageがないとエラーになる
}
```
**継承の仕方**
```TypeScript
interface User {
  id: string
  name: string
}
interface Employee extends User {
  type: 'full-time' | 'temporary'
}
```

### type
**type オブジェクトやクラス以外の型も定義できる（stringやnumberだけでなく、'青' '白'、union型、タプル型など）**
```TypeScript
type EmployeeType = 'full-time' | 'temporary'
const employee: EmployeeType = 'full-time'
```
**拡張の仕方（同名のものを使って拡張はできないが、交差型で可能）**
```TypeScript
type EmployeeType = 'full-time' | 'temporary'
type EmployeeDepartment = 'sales' | 'financial'
type EmployeeInfo = EmployeeType & EmployeeDepartment
```
**継承はできない**

## 個人的な使い分け
**結論：プロジェクトごとで決める。**
- interfaceでできることはおおよそtypeでもでき、複数の型定義ができる。
- interfaceで同一の型が定義されていた場合、意図しない拡張がされてしまう。
- 実際、開発に入っていてもtypeでの型定義が多く、React × TypeScriptの開発が多い。
上記の理由から、個人的には指定がなければtypeで定義するつもり。
[JavaScript]実行コンテキストについて理解を深める

どうも、豆腐メンタルです。
最近JSを学習しているので、備忘録のために記事を書いていきたいと思います。

## 前提知識
JSにおける変数、関数の記述

###### 変数

```js
let
const
var(非推奨)
```
##### 関数

```js
function a(){
処理を記述
}
```
## 実行コンテキストとは？

コンテキストとは、コードを実行する際の文脈や状況という意味合いで使われる。
コードが実行されている状態によってコンテキストが変わってくる。これらを実行コンテキストと言う。

実行コンテキストには三つの種類がある。
１...グローバルコンテキスト
２...関数コンテキスト
３...evalコンテキスト(evalという関数自体が非推奨)

### グローバルコンテキスト

グローバルコンテキスト内では実行中のコンテキスト内の変数・関数を使える。
```html
<script src="main.js"></script>
```
```js
let a = 0;
function b(){}

console.log(a);
b();
```
main.jsに直下で書かれたコードがグローバルコンテキスト

### 関数コンテキスト

関数コンテキストでも、実行中のコンテキスト内の変数と関数が使用可能
この中では、arguments,super,this,外部変数、四つの関数が使える

```js
let a = 0;
function b(){
関数コンテキスト
a
}

console.log(a);
b();
```
関数bの中で記述されているものを関数コンテキスト
また、関数の外で宣言されている変数aのことを外部変数という。


軽い感じでしたが、以上がコンテキストについてのまとめでした。
引き続き、学習していきます。
【備忘録】VSCodeの日本語化が解除されたときに元に戻す方法

## 概要
ある日Visual Studio Codeを開くと英語に戻ってた。
拡張機能を確認しても[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
)はインストール済み、アプリを立ち上げなおしても英語のままってことがあったので日本語に戻しました。
今後同じことが起こると思うので自分用に残します。

以下のサイトを参考にしました。
https://fineworks-fine.hatenablog.com/entry/2022/12/29/073000

## 手順

上のサイト通りです。

#### 1. 'Ctrl'+'Shift'+'p'、もしくはView>'Command Palette…'を選択
![レコーディング 2023-08-09 222532 - frame at 0m11s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112451/153273de-8a76-83ce-ae23-3a43fd083ff3.jpeg)


#### 2. コマンドパレットに'Configure Display Language'を入力
おそらく途中まで入力すると予測に出てくる
![レコーディング 2023-08-09 222532 - frame at 0m26s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112451/0be9ba77-03e7-3862-cdb8-00d882efd1c7.jpeg)


#### 3. 'Configure Display Language'を選択、言語を選べるようになる
![レコーディング 2023-08-09 222532 - frame at 0m34s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112451/da2b13f9-a437-bdcf-7d05-81618693d2ad.jpeg)

#### 4. アプリをリスタートして完了
![レコーディング 2023-08-09 222532 - frame at 0m44s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112451/6cc06553-9c0c-91b7-fea0-fbc022828793.jpeg)
ajax使って非同期処理を動的にしてなくてちょっとちびった話

## 非同期処理が本番環境で動かない、、！
ということで、
本番環境にデプロイしたけど非同期処理ができてなくて「？」となっておりました

開発環境では動いてたのに、、、！
なんでだ！

と焦っておりましたが、
非同期処理を行うエンドポイントがガッチリハードコーディングされておりました。

```
<script>
    $(document).ready(function() {
        $('.submit').click(function(e) {
            $.ajax({
                url: 開発環境のURL/admin/clients', // サーバーのエンドポイントが開発URLに固定されとる。
                type: 'GET',
                success: function(response) {
                    $('#formRow').hide();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(textStatus, errorThrown);
                }
            });
        });
    });
</script>
```
こんな感じでね。
（ちなみにこれはボタンポチったら入力フォームにhideつくやつ。）

さて、これでは当然本番環境のURLでは、URLかわっちまうから動的に変更せねば、、、！
ということです。

## 動的URLを書けばオッケー
```
url: window.location.origin + '/admin/clients', // サーバーのエンドポイント。
```
こういうことですわな

```
window.location.origin
こいつがoriginのURLとってきてくれる、えらい。
```
を使ってadmin画面のクエリを追加することで、
動的なエンドポイントで非同期処理ができたというわけです。

やったぜ。

先方から連絡来た時はちょっと漏らした。

さーてとlaravel backpackでもサクッとカスタマイズしますか！！
（進捗遅れてる）

おわり。