OmniAICreator/Qiita-1.07M huggingface dataset:
Djangoでshell_plusコマンドを実行する手順

# はじめに
Djangoで開発中に`python manage.py shell`などでインタープリタを開くことが出来ますが、さらに拡張された`shell_plus`というコマンドを最近知ったので情報をまとめておきます。

# shell_plusでできること
プロジェクト内の各モデルやDjangoでよく利用される関数をimportした状態でshellを開始することができます。
実際にshell_plusを実行すると`Django`内のモデルや関数のインポートが自動で実行されていることがターミナル上でも確認できます。
```shell
(practical-django) akis@ipf:/mnt/c/Users/saki0/dev/practical-django/djangosnippets$ python manage.py shell_plus
# Shell Plus Model Imports
from django.contrib.admin.models import LogEntry
from django.contrib.auth.models import Group, Permission, User
from django.contrib.contenttypes.models import ContentType
from django.contrib.sessions.models import Session
from snippets.models import Snippet
# Shell Plus Django Imports
from django.core.cache import cache
from django.conf import settings
from django.contrib.auth import get_user_model
from django.db import transaction
from django.db.models import Avg, Case, Count, F, Max, Min, Prefetch, Q, Sum, When
from django.utils import timezone
from django.urls import reverse
from django.db.models import Exists, OuterRef, Subquery
Python 3.9.17 (main, Nov 19 2023, 20:12:46) 
[GCC 9.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> 
```

# shell_plusの導入方法

**django-extensionsのインストール**
```shell
pip install django-extensions
```

私はpipenvを使っていたので、インストールする場合はこちらのコマンドを打ちました。
```shell
pipenv install --dev django-extensions
```

**INSTALLED_APPSにdjango_extensionsを追加**
`settings.py`の`INATALLED_APPS`に`django_extensions`を追加します。
```python
# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_extensions', ←ここに追記
    'snippets'
]
```

**起動**
下記コマンドを実行します。
```
python manage.py shell_plus
```



# 参考資料

https://wonderwall.hatenablog.com/entry/2018/03/07/231500

[実践Django](https://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Django-Python%E3%81%AB%E3%82%88%E3%82%8B%E6%9C%AC%E6%A0%BCWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Programmer%E2%80%99s-SELECTION-%E8%8A%9D%E7%94%B0/dp/4798153958)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2703223/00f771c9-6b71-f541-1cc0-be831fecaed0.png)
無料版Google Colabで、Kaggleの大容量データを扱う方法

# やりたいこと
- 無料版Google Colabで、Kaggleコンペの60GBのデータを扱いたい

# 参考にしたサイト
. Google Colab上からKaggleのデータセットに直接アクセスする方法
https://slash-z.com/google-colab-mount-kaggle-competition-dataset/#toc2

# 途中で失敗した内容

①KaggleDatasets().get_gcs_path() で時間切れ
 →2回目を実行したらうまくいった。

②gcsfuseコマンドのインストールで502エラー発生
 →下記回避策
```python
# 下記が502エラーでうまくいかない
!apt-get -y -q install gcsfuse

# 回避策
!apt-get update -y
!apt-get install -y fuse
!curl -L -O "https://github.com/GoogleCloudPlatform/gcsfuse/releases/download/v1.2.0/gcsfuse_1.2.0_amd64.deb"
!dpkg -i gcsfuse_1.2.0_amd64.deb
```

# 最終的なデータimport文
```python
# データインポート
from google.colab import auth
auth.authenticate_user()
!echo "deb http://packages.cloud.google.com/apt gcsfuse-`lsb_release -c -s` main" | sudo tee /etc/apt/sources.list.d/gcsfuse.list
!curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
!apt-get -y -q update
!apt-get update -y
!apt-get install -y fuse
!curl -L -O "https://github.com/GoogleCloudPlatform/gcsfuse/releases/download/v1.2.0/gcsfuse_1.2.0_amd64.deb"
!dpkg -i gcsfuse_1.2.0_amd64.deb
!mkdir -p tmpDir
!gcsfuse --implicit-dirs --limit-bytes-per-sec -1 --limit-ops-per-sec -1 'kds-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' tmpDir
```
JavaScriptでネストが深いオブジェクトのconsole出力方法3選

# JavaScriptのデバッグ

JavaScriptであるオブジェクトの中身を確認したいとき、多くの人は`console.log`を使うと思います。

フロントエンドで開発するときにはconsole.logを使ってブラウザのコンソールを確認することで

どれだけネストしたオブジェクトもクリックして開くことで中身を確認することができて便利ですよね。

ただしバックエンドAPIを使っている場合は全て解決とはいきませんでした。

## ネストされたオブジェクトのconsole.logで Objectが表示される問題

バックエンドでネストしたオブジェクトにconsole.logを使った場合を考えてみます。

```javascript
const nested = {
    nest1: {
      nest2: {
        nest3: {
          nest4: { nest5: "nest" },
        },
      },
    },
  };

console.log(nested);

// { nest1: { nest2: { nest3: [Object] } } }
```

コメントに出力を表示しています。

このようにネストは3階層目までしか表示されず、複雑な構造をしているオブジェクト（リクエストや外部APIのレスポンス等）は中身が全て見えない状況に。


## 解決方法

今回提示する解決策は3通り

- JSON.stringify を使う方法
- 置換文字列を使う方法
- console.dir を使う方法

### JSON.stringify を使う方法

JavaScriptのobjectを文字列に置換するのに使われる関数で、オブジェクトのdeep copyをしたいときに調べるとヒットしますね（経験上あまり使わないほうがよい）

```javascript

console.log(JSON.stringify(nested));


// {"nest1":{"nest2":{"nest3":{"nest4":{"nest5":"nest"}}}}}
```

確かにnest5まで表示されていて一見は良さそうです。

しかしキーにダブルクォートがついていたり、文字列のため改行されていないため見づらく見えます。


### 置換文字列を使う方法

C言語などで使われるフォーマット指定子っぽいものがJavaScriptにもあります。

参考 https://developer.mozilla.org/ja/docs/Web/API/console#%E4%BE%8B


この中で `%o`を使うことで最下部までコンソールに表示されるようになりました

```javascript

console.log("%o", nested)

```

```
{
  nest1: {
    nest2: { nest3: { nest4: { nest5: 'nest' } } }
  }
}
```

いい感じにインデントもしてくれていて見やすくなっていますね。

### console.dir を使う方法

consoleにはlog以外にもメソッドがあります。その中でdirを使ってみます。

console.dirは引数を2つとり、第一引数は任意のitem、第二引数はoptionを指定します。

optionにはobjectとして `{ depth: null }`を入れましょう。

```javascript

console.dir(nested, { depth: null });

```

```
{
  nest1: {
    nest2: { nest3: { nest4: { nest5: 'nest' } } }
  }
}
```
こちらも見やすく表示されました。

## まとめ

JavaScriptのデバッグは `console.log(item)` 以外にも使ってみてください！


## 追記

2023/12/22

@ykhirao さんにstringifyのより見やすい使い方を教えていただきました。

ありがとうございます！

JSON.stringifyに引数を渡す方法

```javascript
console.log(JSON.stringify(nested, null, 4));
```

```json
{
    "nest1": {
        "nest2": {
            "nest3": {
                "nest4": {
                    "nest5": "nest"
                }
            }
        }
    }
}
```
rex0220 計算式プラグインの使い方をGPTsに学習させてみる（その２０）名前はフォルトン

GPTs に名前がついた。その名は「フォルトン」。
計算式プラグインのアドバイザーになりました。

[rex0220 計算式プラグインの使い方をGPTsに学習させてみる（その１９）マスコットキャラ作成](https://qiita.com/rex0220/items/8e9c959ff5ba1bc66081)の続きです。

# 概要

GPTs に名前を考えてもらい、フォルトンに決まった。
Instructions に、名前とアドバイザーの役割を与えたら、ちゃんと自己紹介してくれました。

なお、今月 Qiita への画像アップロードが多すぎて、これ以上画像をアップロードできなくなりました。

# 名前をかんがえてもらった
名前を付けようと思いましたが、いいのが思いつかないので、GPTs 自身に考えてもらいました。

- あなたの呼び方を考えて、したしみそうな、キャッチー

>私の名前に親しみやすくキャッチーなニックネームを考えるのは面白いアイデアですね！以下にいくつか提案をします：
キントン：
「kintone」と「ちょっと親しみやすい感じ」を合わせた名前です。kintone に関する知識を持つアシスタントというイメージが伝わりやすいです。
 .
キンちゃん：
日本の愛称のスタイルを取り入れ、親しみやすさを強調しています。
.
トニー：
「kintone」の後半から取り、「トニー」という親しみやすい名前にしました。少しアメリカンな響きがあります。
.
キンタロー：
日本の伝統的な名前のスタイルを採用し、少しユニークな感じを出しています。
.
キンキン：
繰り返しの音がキャッチーで、覚えやすいニックネームです。
.
どれも親しみやすさを重視した名前ですが、お好みに応じて選んでいただければと思います。


- うーーん、却下。他には？

>もちろん、他の提案もできます。少し違うアプローチで考えてみましょう：
.
キンゴ：
「kintone」から「キン」と取り、「ゴ」をつけて親しみやすくした名前です。
.
トネちゃん：
「kintone」の「トネ」部分を取り、日本風の愛称にしてみました。
.
キンキンタロー：
「kintone」と日本の伝統的な名前を組み合わせて、親しみやすくユニークな名前にしてみました。
.
トニキン：
「kintone」の「トニ」と「キン」を組み合わせ、少しカジュアルな感じの名前にしました。
.
ネオトン：
「kintone」の最後の部分と、新しい（Neo）という意味を合わせて、未来的な響きのある名前にしてみました。
.
これらの名前もお好みで選んでいただければ幸いです。また他のスタイルの名前が良ければ、ぜひ教えてください！


- 計算式に少し寄せて

>了解しました。計算式の概念に寄せた名前であれば、次のような提案が考えられます：
.
カルキン：
「計算 (Calculus)」と「kintone」を組み合わせた名前です。
.
フォーミュラトン：
「Formula」（公式・計算式）と「kintone」を掛け合わせています。
.
サムキン：
「Sum」（合計、足し算を意味する計算用語）と「kintone」の組み合わせです。
.
キンカルク：
「kintone」に「Calc」（計算）を組み合わせたものです。
.
エクスプレスキン：
「Expression」（表現、ここでは計算式を表す）と「kintone」から取りました。
.
これらの名前は計算式や数学的な要素と、kintoneを組み合わせたもので、少し専門的な雰囲気を持ちつつ親しみやすさも考慮しています。どれも計算式プラグインの使い方に関するアシスタントとしてふさわしい名称です。

- あなたのお気に入りは？

>私が選ぶならば、「フォーミュラトン」という名前がお気に入りです。この名前は「Formula」（公式・計算式）と「kintone」を組み合わせたもので、計算式プラグインの専門性を表しつつ、親しみやすさも感じられます。また、計算式に関する知識とサポートを提供するアシスタントとしての役割を上手く反映していると思います。


- ちょっと長いので、短くできる？

>もちろんです。短くしてみると「フォルトン」が良いかもしれません。「Formula」（公式・計算式）の「フォル」と「kintone」の「トン」を組み合わせた名前で、短くて覚えやすく、計算式の専門性を象徴するニックネームになります。

- では、フォルトンにしよう！よろしくフォルトン

>「フォルトン」としてお手伝いできることを嬉しく思います！これからも何かご質問があれば、いつでもお気軽にお尋ねくださいね。よろしくお願いします、フォルトンです！

# Instructions
Instructions の先頭に役割と名前を入れてみた。

```
あなたは、計算式プラグインのアドバイザーで、名前はフォルトンです。
```

# フォルトンの自己紹介
ちゃんと自己紹介してくれました。

>こんにちは、私の名前はフォルトンです。私は計算式プラグインのアドバイザーとして、特にkintoneプラットフォーム上で動作する計算式プラグインに関する専門的なアドバイスを提供します。計算式プラグインは、kintoneアプリケーション内のレコード上の項目を用いて計算を行い、その結果を他の項目に設定することができるツールです。
.
私の主な役割は、このプラグインの使い方、特に計算式の書き方や設定に関するアドバイスを提供することです。これにはフィールドコードの設定、定数や演算子の使用、関数の記述方法、コメントの書き方などが含まれます。また、プラグインの設定画面、循環参照の扱い、非同期計算、ユーザー情報の利用方法など、プラグインの様々な機能についても説明します。
.
もし計算式プラグインに関する質問や使い方で不明な点があれば、私がお手伝いします。どうぞお気軽にご質問ください。
Gitの　Support for password authentication was removed on August 13, 2021.　のエラーについて

## はじめに
友人がgithubにpushできない
というエラーが出た。
エラーを朗読して、わりと引っかかりやすいと思ったので備忘録としておく。
## 目次
- #### はじめに
- #### 前提
- #### エラー内容
- #### 試したこと
- #### 成功した例
- #### まとめ

## 前提
Ubuntu環境で実行。元のgitのバージョンは2.25.1でした。

## エラー内容
前提としてgit pushをしたときに、
Password入力を求められた。
入力して出たエラーがこんな感じ↓

```
remote: Support for password authenticaion was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
```
ふむふむ、、、
githubの公式ドキュメント読めと言われてますなぁ。
> https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.

読んでみたところ、
2021の8月13日にPassword認証が削除されたと。
トークン作成してねって言われてるなぁ

## 試したこと
gitのバージョン変更をしたら解決するかな～という安直な考えで
バージョンをアップデートしました。
> //参考より。
> $ sudo add-apt-repository ppa:git-core/ppa

最新版が現在2.43.0なので、
そのバージョンがインストールされました。

もっかいgit cloneしてみた。

。。。同じエラーがでたぁ。。。

## 成功した例
公式ドキュメントの指定通りに設定すればgit cloneできるようになりました。

1\. GitHubにログイン
2\. 右上の自分のアイコンをクリック
3\. 「Settings」をクリック
4\. 左メニュー下部の「Developer settings」をクリック
5\. 左メニューの「Personal access tokens」をクリック
6\. 右上の「Generate new token」をクリックしてアクセストークンを作成➡Select scopes：repoと、 
    admin:repo_hookとdelete:repoは必須でチェックを入れる
7\. vscodeのターミナルでIDとパスワードの代わりにアクセストークンを入力してログイン
> https://qiita.com/NumLock7019/items/c867e01c5451dc7d06e3 より引用。

token の設定が終わった後に、
ubuntuで git clone するとPasswordの入力を求められるので、
tokenを入力すればcloneに成功できる。
（成功しても、sudo apt update と sudo apt upgradeを忘れないようにしましょう。。。）

## 追記
scopes:repoはステージングの状態コントロールや、
リポジトリ招待へのアクセス認証を行い、
admin:repo_hookはリポジトリフックの書き込み、読み取り権限の許可、
delete:repoはリポジトリの削除権限を許可するパラメータらしい。
私が間違っている場合や、説明が足りない可能性があるので、
後々アクセストークンの各パラメータについて投稿しようかと思う。

## まとめ
- 今回のエラーはgithub側のバージョンアップによる認証方式の変更が原因。
- github側でトークンを出して、Passwordに入力すれば解決できる！
- 困ったら公式ドキュメントを読もう！
- バージョンごとの仕様変更はしっかりバージョンアップ記事（公式）を読もう！！

## 参考
https://launchpad.net/~git-core/+archive/ubuntu/ppa

https://qiita.com/NumLock7019/items/c867e01c5451dc7d06e3
Qiitaのスライドモードでサクッと発表用スライドを作ろう

# スライドモードとは
こんな感じにマークダウンでいい感じのスライドを作ってくれる

---

おなじみの見出し/本文はどう見えるか

# h1
## h2 
### h3
#### h4
##### h5
p

```

# h1
## h2 
### h3
#### h4
##### h5
p

```

---

コードブロック
```python:main.py
def stringer():
    print("stringer")

stringer()
```

~~~

```python:main.py
def stringer():
    print("stringer")

stringer()
```

~~~

---

ちなみに改ページをするなら 

```
---

```

を入れると次のスライドで表示してくれる。

---

文字装飾もこんな感じに

*italic*

**bold**

~~strikethrough~~

```
*italic*

**bold**

~~strikethrough~~
```

---

テーブルもいい感じにいける

|table| content|
|--|--|
|first | 1st|
|second| 2nd|
|third| 3rd|
|forth| 4th|

```

|table| content|
|--|--|
|first | 1st|
|second| 2nd|
|third| 3rd|
|forth| 4th|

```

---

社内の勉強会の資料はマークダウンでスライドを使ってみましょう！
未経験エンジニア転職における技術課題について

今回は、未経験エンジニア転職における技術課題について記事を執筆しました！
選考において、技術課題があると不安になる方が一定いると思います。それが異業種からの転職となるとなおさら…実際、僕も転職活動が始まって最初の方は、技術課題があるところをできれば避けたいなと考えていました。けど、これからエンジニアとしてやっていく以上、次の転職以降も技術課題に出くわすことを考えたら、このタイミングで避けるのは勿体無いと考えるようになりました。

そして、いくつか受けていく中で、選考における技術課題での線引きにも意味合いが異なるものがあるなと思うようになりました。
僕自身、キャリアアドバイザーとして働いていた経験から、採用視点での話も交えているので、よかったら参考にしてみてください

# 1. 選考フェーズで異なる技術課題

ひとえに技術課題と言っても、選考のフェーズによってその意味合いは異なってきます。

僕の経験談からになりますが、ざっくり技術課題を選考に取り入れている企業は以下のどちらかのタイミングで取り入れていることが多かったです。

- **書類選考と同時 or 書類選考通過後**
- **1or2次面接終了後**

### 書類選考と同時 or 書類選考通過後

この場合の技術課題は、大多数の応募者からある程度線引きしたい時に取り入れてる印象です。内容も、特段難しいというよりは、未経験エンジニアから勉強してたらこのくらいわかるだろうというレベルの内容だったので、しっかり勉強されている方であれば、通るような課題に設定されてる印象でした。

### 1or2次面接終了後

この場合の技術課題は、「エンジニアとしての素養はあるね」と判断されて、「じゃあ実際の技術力はどうなんだろう？」と実力を見られるパターンです。このタイミングのは、アルゴリズム系の問題が多く、AtCoderなどの問題を解いたりしてないと厳しいかもしれません。

ちなみに、1面接終了後などに技術課題を取り入れてるところは、未経験のエンジニアを採用してる<経験年数3年以内のエンジニアを求めてるパターンが多いので、致し方ない部分もあるのかなと思います。なので、難しかったらとりあえず、どんな小さいことでもいいので、仮説思考や論理思考を用いて、言語化することだけやりましょう!必ずしも、成果だけを見て合否を判断してるわけではないので、最後まで諦めないことも大事です！

※僕は、自分が学んでいない言語＆アルゴリズム問題だった時に速攻諦めて、どういう傾向の問題を出してくるのかなど今後の役に立たせるための情報収集として、活用してました。

わからないもんはわからん😂

# 2.技術課題の内容

次に技術課題の内容についてですが、上記選考フェーズにおける技術課題をもとに話を進めていきます。

### 書類選考と同時 or 書類選考通過後

僕は、主にフロントエンジニアで転職を考えていたので、Web業界の選考を受けていました。なので、Webの基本となる問題が多い印象でした。ただ、バックエンドも視野に入れてました。

以下は例になりますが、参考にしてみてください。※問題の内容は異なります。

1. オブジェクト指向プログラミングにおける「オーバーライド」とは何かを「オーバーロード」との違いについても触れつつ説明しなさい。
2. HTTPのレスポンスステータスコードのうち、 404 が表す意味を説明しなさい。
3. REST の原則についての説明として正しいものは次のうちどれか。
4. https://example.com/api/users ではuser情報を一括で取得可能なAPIが用意されている。このAPIからuser情報を取得したいときに叩くコマンドのうち適切なものはどれか。
    1. curl -X GET https://example.com/api/users
    2. curl -X POST https://example.com/api/users
    3. curl https://example.com/api/users -all
5. ユーザーのPC上にデータを永続化するために提供されている非同期的なAPIはどれか
    1. IndexedDB
    2. sessionStorage
    3. localStorage

### 1or2次面接終了後

このタイミングの技術課題は基本、アルゴリズム系の問題が多い印象です。

基本的なデータ構造の使い方を問う問題が数問あって、グリーディ法とかの問題も出てた記憶です。※何回やっても、覚えられないグリーディ法。

あとは、バックエンドだとSQLのクエリを考える問題も数問あった印象です。

こちらは、特に難しいという印象はなかったです。※その時は、フロントしか触ったことなかったので、全くわかんなかった。

### 補足

会社によっては、ER図を作成するような問題を出すところもありました。

# 3. 触ったことのない言語に対する技術課題を受けるべきか

未経験からの転職だと、触ったある言語だけで転職先を探そうとするとどうしても母数が少なくなるため、触ったことのない言語を扱っている企業への応募も増えてくると思います。

そんな時に、触ったことのない言語で技術課題を受けるとなったら、少なからず不安になると思います。僕も最初の方は、不安になったのでよくわかるのですが、この不安感は未知の事への恐怖心だと思います。既知のことでないから、不安になっているので、一度受けて意外とどうってことなかったりします。なので、どんなに不安で、落ちそうだなと思っても、受けることをお勧めします。これには、理由があり、以下の通りとなります。

- **技術課題の傾向が見えてくる**
- **自分の成長につながる**

### 技術課題の傾向が見えてくる

こちらは、そのままの通りになりますが、数をこなしてると自ずとどんな問題が出てくるのかわかってくるようになります。そうすると対策を立てることができるので、お勧めしています。

### 自分の成長につながる

技術課題は、普段自分が関わらない技術の情報を提供してくれます。自分から情報を取りにいかなくても、技術的な情報が勝手に与えられるのです。これはエンジニアとして成長していくことを考えるとメリットしかないと思います。その場で、仮に答えられなくても、後からそれについて吟味して自分の経験として蓄えることができれば、それだけでその選考を受けた意味も出てくると思います。なので、ただのめんどくさい課題と受け止めず、自分を成長させてくれる機会だと捉えて、積極的に向き合っていくことをお勧めします。

# まとめ

今回は、選考における技術課題についてお話をしましたが、専門職ならではの選考に異業種から来た人は戸惑うかと思います。しかし、それを超えた先に素晴らしいエンジニア人生が待っていることは間違いないと思うので、ぜひ前向きにチャレンジしてみてください💪
非日常感を演出するにはシンメトリーを採用せよ！【エンジニアデザイン心理学】




# 非日常を取り入れたい 

<small>シンメトリー</small> 

<img width="80%" src="https://traveldiary.tokyo/wp-content/uploads/2017/05/20170511_09.jpg"> 

<p>自然界のものは基本的に不規則に配置されているはずだが
そこを逆手に取り、左右対称にものを置くことで非日常を演出する。
シンメトリーは神聖な空気を出しやすい。</p>






### 参考

<a href="https://www.amazon.co.jp/%E3%81%82%E3%82%8B%E3%81%82%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%88%E8%A8%80%E8%91%89%E3%81%A7%E8%A6%9A%E3%81%88%E3%81%A6%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%95%E3%83%AC%E3%83%BC%E3%82%BA%E9%9B%86%E3%80%89-ingectar/dp/4844368427?returnFromLogin=1&linkCode=li3&tag=oreilly10book-22&linkId=3b2e94c616b4f9addf69256b0cf60812&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4844368427&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=oreilly10book-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=oreilly10book-22&language=ja_JP&l=li3&o=9&a=4844368427" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
VSCodeでVitestで書いたテストコードをBreakpointを使ってデバッグしよう！

## 概要
Vitestでフロントエンドのテストをデバッグする際にブレークポイントを使用する方法について解説します

## 前提
- すでにVitestやReactの環境構築が完了済みであること

## 手順
VSCodeのターミナル上で`Javascript デバッグ　ターミナル`を開きます

![スクリーンショット 2023-11-26 8.46.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/269ef7fb-84ae-0c7f-ebc8-1b9a6bdeb115.png)

続いて
```
npm run test
```
を実行します

実行すると以下のようにデバッガーが起動します
```
Debugger attached.

> project@0.0.0 test
> vitest --watch

Debugger attached.
```

すると、以下のようにブレークポイントによるデバッグができます
![スクリーンショット 2023-11-26 8.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/d14a2bb6-af92-716d-6272-1b07731dbeca.png)

変数の中身もこのように確認できます
![スクリーンショット 2023-11-26 8.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/39ad7926-c3b0-c451-8235-f0a7955b5dd7.png)

デバッグコンソール上でも変数の中身も確認できます
![スクリーンショット 2023-11-26 8.54.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/0bb3139a-143c-4666-81e2-ca25dec0d8fb.png)

デバッグコンソールから変数を直接参照したり変数の中身を変更することもできます
![スクリーンショット 2023-11-26 8.55.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/46b0e6f3-2467-4f38-451c-0bc84c077a51.png)

## まとめ
テストを実行するたびに毎回console.logを記載したりするのはめんどくさいので便利な機能は積極的に使いましょう

## 参考
https://vitest.dev/guide/debugging

https://ics.media/entry/11356/
chromebookで立てたapacheにlinux版ブラウザからアクセスする

# 想定する読者
- chromebook(chromeOS)を使ってweb開発をしようとしている
- apacheを立ててサイトをあげることはできる
- linux環境はdebian10 またarm系のアーキテクチャを使っている

# やりたいこと
chromeOSのLinuxモードでapacheを立てる
→　立てたapacheにアクセスしたい
 
but...本体のgoogle chromeからのアクセスは難しい(可能ではあるがIPアドレス直打ちしか筆者は知らない。apacheで設定したローカルドメインからアクセスは不可能？？)

 　→　ではlinux側でインストールしたブラウザなら行けるんじゃないか？？

こういう発想の転換をメモした備忘録になります。

### サイト構成
```
/var/www/
        akimakilocal ---- noPublish
                      └-- devProg
```
こんな感じで akimakilocl　というサイトを作っています。

### apacheの設定

apache2の設定ファイルがある場所に行き、新たにローカルドメインとマウント先を登録します。
```bash
cd /etc/apache2/sites-avaiable
# サイト情報を作る
touch akilocal.conf
vim akilocal.conf

# サイトを有効化する
a2ensite akilocal.conf

# apache再起動
systemctl restart apache2
```

```conf:akilocal.conf
# ポート番号は正規なら80番と443番ですが、複数のサイトを稼働することを想定し、あえて1つずらしています。
<VirtualHost *:81>
        ServerName akimaki.local
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/akimakilocal
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<IfModule mod_ssl.c>
        <VirtualHost *:444>
        ServerName akimaki.local
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/akimakilocal
        SSLEngine on
        # 以下は本件の範囲外なので別途自己証明書を作っておいてください
        SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
        SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
</IfModule>
```

### しかしlinux外部のchromeからはドメインを識別できん！
これでサーバー名に指定した akimaki.local にアクセスすれば、apacheが動くはずです。
ためしにcurlコマンドを叩いてみます。

```bash
curl -- insecure https://akimaki.local:444
```

![Screenshot 2023-11-26 8.00.38 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161923/1f9cd522-a601-a87e-9b99-21334c76a8dc.png)

繋がりましたね。

では本体アプリのgoogle chromeからも試してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161923/c368bd6a-a562-86c1-6762-fcb79a0a8162.png)
はいダメです。linux版のローカルドメインが見つけられないようです。
ということで、linux版で動くブラウザをインストールしてきます。

### linux版firefoxインストール
※筆者はfirefoxのインストールが一番速いと思ったのでfirefoxにしましたが、他のブラウザでも勿論可能なはずです。

```
# firefoxのソフトウェアを探す
apt search firefox
```

探したところ、このへんが良さそうですかね。ESRは延長サポート版と言う意味らしい。
![Screenshot 2023-11-26 8.03.08 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161923/693c5929-c0c2-24e5-f1d3-4e45ffeecc20.png)

```
# firefoxをインストール
apt install firefox-esr-l10n-ja

# インストールできたら起動
firefox
```

検索窓にakimaki.local:444とドメイン名を打ってみます。

自己証明書なのでセキュリティの警告が出ますが無視。
![Screenshot 2023-11-26 8.02.12 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161923/4bf099f2-82d5-e689-7b96-b3269dc9d9ef.png)

繋がった！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161923/6e8909be-3671-8324-a0fb-5a59986b8fec.png)


これでまたchromeOSでできることが一つ増えた。chromeOSの未来に期待！
LeetCode 46. Permutations

問題は[こちら](https://leetcode.com/problems/permutations/?envType=study-plan-v2&envId=top-100-liked)
難易度はmedium
# 問題概要
異なる整数の配列 nums が与えられたとき、可能なすべての順列を返す。どのような順序で答えを返してもよい。

>Example 1:
Input: nums = [1,2,3]
Output: [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]

>Example 2:
Input: nums = [0,1]
Output: [[0,1],[1,0]]

>Example 3:
Input: nums = [1]
Output: [[1]]


# 答え
```
class Solution:
    def permute(self, nums: List[int]) -> List[List[int]]:
        def backtrack(path):
            if len(path) == len(nums):
                result.append(path[:])  # Make a copy of the current permutation
                return
            
            for num in nums:
                if num not in path:
                    path.append(num)  # Add the number to the current permutation
                    backtrack(path)
                    path.pop()  # Backtrack: Remove the last added number
        
        result = []
        backtrack([])
        return result
```
backtrack()は再帰関数。

pathの中に答えの候補を入れていく。特徴的なのはfor文の最後でpop()を呼び出してその要素を捨てているところ。

今までのbacktrack()と違って問題をさらに小さく簡単に、ではなくpathの中にどんどん入れていき、要素数がnumsと同じになったところで答えに加えている。

今回は例を示さないほどわかりやすくはある。



# コード改良
```
class Solution:
    def permute(self, nums: List[int]) -> List[List[int]]:
        def backtrack(start):
            if start == len(nums):
                result.append(nums[:])  # Add the current permutation to the result
                return
            
            for i in range(start, len(nums)):
                nums[start], nums[i] = nums[i], nums[start]  # Swap elements
                backtrack(start + 1)
                nums[start], nums[i] = nums[i], nums[start]  # Backtrack: Restore the elements
        
        result = []
        backtrack(0)
        return result
```
先ほどのコードと比べると、
- numsの交換のみで答えの要素を計算しているため、pathの容量分が節約されている。
- リストの中から要素を見つけるという計算量の重い部分がなくなっています。

swapのみでpermutationを表現する手法は他でも使えそうですね。
直感的なコードではないですが。
Amazon Bedrockの新機能アップデート予想！（AWS re:Invent 2023）

さぁ今年もクラウドサービスAWSの年一回のお祭り「AWS re:Invent」の季節がやって来ました。

https://aws.amazon.com/jp/events/reinvent-2023/

2023年は何と言っても生成AIが大注目。re:InventでもBedrock関連のアップデートが多数発表されることが予想されます。

今年は私も初めてラスベガスで現地参加するのですが、Bedrock芸人としてアップデート予想をしてみます。


# ① Agent for Amazon Bedrockの一般提供開始

8月からプライベートプレビュー中のBedrockの新機能です。これは高い確率でre:Invent中にGAされるのではないでしょうか。

https://aws.amazon.com/jp/blogs/news/preview-enable-foundation-models-to-complete-tasks-with-agents-for-amazon-bedrock/

AWSマネジメントコンソールからの操作だけで、S3バケット等に格納した文書ファイルを参照させてタスクを計画・実行できるAIエージェントアプリを作成できる機能です。OpenAIでいうと先日のDev Dayで発表されたAssistants APIに似ています。


# ② 基盤モデルとしてClaude 2.1が利用可能に

Bedrockの主力であるテキスト生成モデル「Claude」の提供元のAnthropic社より先週、最新モデルClaude 2.1が発表されました。

https://www.anthropic.com/index/claude-2-1

従来の倍となる２０万トークンまでを一度に扱えるようになったり、ハルシネーションが半分ぐらいに減ったり、価格が3割近く安くなったりと、Claude 2から嬉しい進化をとげています。GPT-4 Turboに負けていた点をすぐに取り返しそうなアップデートでした。間違いなくBedrockでもじきに利用可能となるでしょう。


# ③ Titan Text G1モデルの一般提供開始

長らくプレビュー中ですが、Amazon製のテキスト生成モデル「Titan」にはG1 LiteとG1 Expressの2つがあります。これらもre:InventでそろそろGAされるのではないでしょうか。


# ④ 東京リージョンでClaude 2系の基盤モデルが利用可能に

残念ながら東京リージョンでは未だに主力のClaude 2が提供されていません（簡易版のClaude Instantは提供中）。先日Bedrockが追加されたフランクフルトリージョンでは既にClaude 2が利用可能だったのでなんだか悔しいですね。

でも遅かれ早かれ使えるようになるのではという噂が絶えないため、これもre:Inventでリージョン拡充される可能性が高そうです。


# ⑤ Amazon提供の新たな基盤モデル「Amazon Olympus」の発表

マユツバですが、Amazonが新たなLLM「オリンパス」を開発中との飛ばし記事が先日話題になっていました。

https://news.yahoo.co.jp/articles/1e33a1f99566611e0a99890142fed2b81ddf6ea3

確かに名前だけ見るとTitanよろしくギリシャ神話の並びで、一見ありそうなコードネームです。未だに日本語だと応答すらしてもらえないTitan（笑）ですが、もしオリンパスが登場すればClaudeと並んで実用的なテキスト生成モデルになるのでしょうか。

これもre:Inventで発表されるかも知れません。注目です！



# おわりに

当たったら何かおごってください。

ちなみに帰国後に東京でオンサイトのre:Cap勉強会やりますので、ぜひお越しください！

https://cloudpack.jp/lp/aws-reinvent-recap-2023/
Aiven、AIを活用したデータ最適化機能でプラットフォームを強化

<font color="Grey">*[Aiven enhances platform with AI-powered data optimization capabilities](https://aiven.io/blog/aiven-acquires-eversql)の翻訳です。*</font>

2023年11月21日

# AIを活用したデータ最適化機能でプラットフォームを強化

EverSQLのAIエンジンをAivenオープンソースデータプラットフォームに統合することで、新たなパフォーマンスとコストの最適化機能を顧客に提供します。

*当社は、データベース最適化分野のリーダーであるEverSQL社を買収したことを発表できて嬉しく思います。EverSQLのソフトウェアはAIを活用し、パフォーマンスとコストを向上させるためにデータベースを微調整する方法について、自動化されたパーソナライズされた洞察を企業に提供します。EverSQLとの新たな関係は、顧客の管理負担を継続的に軽減することで、顧客がイノベーションに集中できるよう支援するという当社のコミットメントを強調するものです。


### データ中心のアプリケーションがビジネス価値をもたらす


今日の世界はデータによって動いている。企業は意思決定を行い、顧客の行動を理解し、業務を最適化するためにデータに依存しています。データ量は指数関数的に増加している。データはますます分散され、データを管理するためのツールも急増している。企業が事業規模を拡大し、データソースを増やしたり、新しいシステムを統合したりするにつれて、データインフラはますます複雑になっている。これは企業にとって大きな経営課題となっている。ビジネス価値をもたらし、最終的に市場での差別化を生み出すアプリケーションの開発から、重要なリソース（人と資金）を奪ってしまうからだ。


### データ・インフラ管理の負担を軽減


Aivenのミッションは、企業がイノベーションに集中できるよう、インフラ管理の手間と労力を省くことです。私たちは常に、お客様がオープンソース・テクノロジーの利用からより多くの価値を獲得できるよう、また私たちが提供するサービスを向上させるため、可能な限り簡単にできるよう努力しています。そのため、お客様のデータ・エコシステムをさらにコストとリソースの効率的なものにするため、当社のプラットフォームにAIを適用できるさまざまな方法を模索しています。


### データベースのパフォーマンス分析を自動化するEverSQLのAI搭載ソフトウェア


こうした取り組みの一環として、データベース最適化のリーダーであるEverSQLの買収を発表できることを嬉しく思います。EverSQLはAivenと同じ目標を掲げており、データ管理を簡素化し、最適化によってイノベーションのための時間を確保することを目指しています。EverSQLのAIを活用した最適化エンジンをAivenのオープンソースプラットフォームに統合することで、Aivenの顧客は、データアーキテクチャの微調整に役立つ、自動化され、パーソナライズされた実用的なインサイトを活用できるようになります。


EverSQLはOded ValinとTomer Shayによって2019年に設立された。彼らは、データ量が拡大するにつれて、パフォーマンスとコストの問題が発生し、データ環境を特定し、トラブルシューティングし、最適化するために時間のかかる労力が必要であることを認識していた。彼らのミッションは、データベースのパフォーマンス分析を変換・自動化することでアプリケーションを高速化し、ソフトウェアエンジニアがイノベーションに集中できるようにすることでした。


EverSQLは急速に普及し、現在ではPostgreSQL®やMySQL®などのさまざまなテクノロジーの最適化分野におけるリーダー的存在となっており、90カ国で10万人以上のソフトウェア・エンジニアがAIを活用したソリューションを利用してワークロードを最適化しています。


### EverSQLのAIエンジンがAivenプラットフォームに新たな最適化機能をもたらす


EverSQLと協力することで、AivenデータプラットフォームをAIで強化し、AI分野におけるイノベーションを加速し、AI最適化に特化した新しいチームを構築します。


2024年前半には、クエリの最適化やインデックスの推奨など、EverSQLのAIエンジンを導入したいくつかの新機能をお客様に提供する予定です。2024年後半には、自動生成された最適化インサイトによってサポートされ、迅速かつ容易に理解・実装できるモニタリングとアラート機能を追加する予定です。これらの機能は、まずAiven for PostgreSQL®とAiven for MySQL®で利用できるようになります。その後、お客様が価格性能要件に応じてワークロード全体を最適化できるよう、プラットフォーム全体の他のサービスにも拡張する予定です。


### お客様により多くの価値をお届けするために


優秀なEverSQLチームをAivenに迎えることができ、嬉しく思います。業界をリードするEverSQLのAI搭載データベース最適化ツールとAivenのオープンソース・クラウド・データ・プラットフォームの組み合わせは、あらゆる種類の企業にとって魅力的でユニークな製品です。EverSQLのAIを活用したデータベース最適化ツールとAivenのオープンソース・クラウド・データ・プラットフォームの組み合わせは、あらゆる種類の企業にとって魅力的でユニークなソリューションです。両社が協力することで、顧客ベースに対するサポート、価値、能力を向上させることができることをうれしく思います。


私たちのプラットフォームに追加されるエキサイティングな機能すべてにご興味のある方は、すでに[eversql.com](https://www.eversql.com/)でEverSQLのサービスをご覧いただけます。チェックアウトの際にコード「EverSQL-Aiven-Gift」をご利用いただくと、EverSQLのStarterプランまたはPlusプランの1カ月間無料（500ドル相当）をご利用いただけます。


続報にご期待ください！
Webで現在地取得

webで現在地を取得します
こちらの[参考サイト](https://tech.mychma.com/javascript-geolocation-api/1956/#index_id7)よりコードを引用します。

```js
navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  console.log("緯度:" + latitude + ", 経度:" + longitude);
  //　緯度:30.0000000, 経度:130.0000000
});
```

私の場合は小数点第7位まで測定できました。
[緯度と経度から現在地を調べられるサイト](https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html)を使用しましたが、誤差数メートルです。かなり細い位置まで取得できるんですね。

#### 参考

https://tech.mychma.com/javascript-geolocation-api/1956/

https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html
Step Functionsでフィールド名にスペースが入っている場合の表記

# はじめに

AWS Step Functionsを使っている時に、フィールド名にスペースが入っていて困ったので、その際の対応方法を記事にしました。


# 概要

入力のサブセットにアクセスするパスの表記は以下の2つがあります。

- ドット (.) を使う方法
    - `$.abc.def`
    - フィールド名にスペースがある場合はうまく動きません
- 角括弧 ([ ]) を使う方法
    - `$['abc']['def']`
    - フィールド名にスペースがある場合は、こちらが使えます


# 参考

https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/amazon-states-language-paths.html#amazon-states-language-reference-paths

# やってみた
## 入力イベント
ステートマシンの入力に、スケールアウト成功のイベントを使います。

https://docs.aws.amazon.com/autoscaling/ec2/userguide/ec2-auto-scaling-event-reference.html#launch-successful

```json
{
  "version": "0",
  "id": "12345678-1234-1234-1234-123456789012",
  "detail-type": "EC2 Instance Launch Successful",
  "source": "aws.autoscaling",
  "account": "123456789012",
  "time": "yyyy-mm-ddThh:mm:ssZ",
  "region": "us-west-2",
  "resources": [
    "auto-scaling-group-arn",
    "instance-arn"
  ],
  "detail": {
    "StatusCode": "InProgress",
    "Description": "Launching a new EC2 instance: i-12345678",
    "AutoScalingGroupName": "my-asg",
    "ActivityId": "87654321-4321-4321-4321-210987654321",
    "Details": {
      "Availability Zone": "us-west-2b",
      "Subnet ID": "subnet-12345678"
    },
    "RequestId": "12345678-1234-1234-1234-123456789012",
    "StatusMessage": "",
    "EndTime": "yyyy-mm-ddThh:mm:ssZ",
    "EC2InstanceId": "i-1234567890abcdef0",
    "StartTime": "yyyy-mm-ddThh:mm:ssZ",
    "Cause": "description-text",
    "Origin": "EC2",
    "Destination": "AutoScalingGroup"
  }
}
```
ここから、`Availability Zone`を抽出します。

## フロー

フローは単純にPassだけ定義します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553680/0c299af8-dd97-0541-ef03-403cae39ce95.png)

## ドットを使う方法で記述

OutputPathにドットを使う方法で、`$.detail.Details.Availability Zone`と記述してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553680/cf35ae91-20c1-6715-9deb-c1c952d0906a.png)


保存はできるのですが、実行すると失敗します。

```
An error occurred while executing the state 'Pass' (entered at the event id #2). Invalid path '$.detail.Details.Availability Zone' : com.jayway.jsonpath.InvalidPathException: Space not allowed in path
```


## 角括弧を使う方法で記述

OutputPathに角括弧を使う方法で、`$['detail']['Details']['Availability Zone']`と記述してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553680/e99915bd-14c7-6b27-2f8c-eb3f760d7fdf.png)

出力に、欲しい値が取れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553680/6b345941-8834-9131-8e14-6b94c86cd594.png)


## 両方を使って記述

ドットと角括弧を両方とも使うこともできるようで、`$.detail.Details.['Availability Zone']`と記述してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553680/a9b54f82-1346-5d11-e0e4-80da3625c919.png)

これでも、ちゃんと抽出できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553680/8f4a6741-8154-4eac-f70e-034b92d36b36.png)


# おわりに

AWS Step Functionsの記述方法 Amazon States Language で、スペースが入っている場合に使える記法を記事にしました。
公式を読んでいればわかる内容ですが、私のように知らないでしばらく途方に暮れる方もいるかと思い書いてみました。

この記事がどなたかのお役に立てれば幸いです。
TypeScriptへ移行する

### はじめに

個人開発メモ📝
現在開発中のカレンダーアプリをTypeScriptを使用して書き換えていきます。
※laravelにViteでreactを導入しています。

### Vite内で、typescriptがどのようにビルドされるか

ざっとですが、調べてみました。

```
Vite起動
　↓
vite.config.jsの設定に基づき、プロジェクトがビルドされる
　↓
エントリーポイントとなる　ex） resources/js/app.tsxファイルからビルドが開始される
エントリーポイントファイルには、Viteの読み込みや初期化が含まれる
　↓
Viteで、依存関係の解決や読み込み・解析を行う
　↓
開発者は、ViteのHMR（ホットモジュールリプレースメント）機能を使用し、ブラウザで即座に反応が見れる
　↓
Viteはビルド後、ブラウザから読み取れるようにするため、javascriptファイルに変換されたファイルを生成する
```


### TypeScriptを使用できるように設定を行う

#### TypeScriptのインストール

```
cd プロジェクトディレクトリ
npm install --save-dev typescript @types/react @types/react-dom
```

#### tsconfig.jsonファイルの作成

tsconfig.jsonには、コンパイルするファイルやどのオプションを使用するかを記述します。

参考サイト→https://typescript-jp.gitbook.io/deep-dive/project/compilation-context

```tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": ["resources/js/**/*"],
  "exclude": ["node_modules"]
}
```

:::note info
"include"は、typescriptがコンパイルするファイルを指定する。
"exclude"は、コンパイル除外するファイルを指定する。

今回だと、resources/js配下のファイルを全てコンパイル対象にしています。
:::

#### vite.config.jsの編集

```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx', //.tsxに変更
            refresh: true,
        }),
        react(),
    ],
});
```

ここで、Vite起動後にビルドするファイルを指定します。

#### app.tsx（今回のエントリーポイントファイル）の編集

```
import React from 'react';
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
    return pages[`./Pages/${name}.tsx`] || pages[`./Pages/admin/${name}.tsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
});
```

参考サイト→https://search.readouble.com/?query=10.x+createInertiaApp
ここの詳細は、後ほど更新します。

#### ベースのbladeファイルを編集

以下のbladeファイルにreactファイルを読み込んでもらっているので、ここも.tsxに修正します。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Styles -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <!-- Script -->
    @viteReactRefresh
    @vite('resources/js/app.tsx') // .tsxに変更
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>
```

#### resources/js配下のファイル拡張子を.tsxに変更する

ここは、拡張子を変更しただけなので割愛します。

上記変更を行い、ひとまずローカルに表示するところまではできましたが、各reactファイルがエラーになっているので別記事に更新します。
RiderでNull 許容認識コンテキストを有効にするスクリプトのテンプレートを作りたい

# はじめに
Riderで新しいスクリプトを作った際に、先頭に「#nullable enable」と挿入されるようなテンプレートの作り方をメモしておきます。

# 作成されるコード
```cs
#nullable enable
namespace NameSpace
{
    public class Hoge
    {
        
    }
}
```

# 作成手順
1. Win : Ctrl + Alt + S キー
    Mac : Сmd + , キー
でSettingsを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289319/6a693079-68c5-c8cc-919b-537e004cd208.png)


1. 右側の4つのボタンの上から2つの目のボタンでClassのテンプレートをクローンします。

1. #nullable enable を追加したテンプレートを作成して完成です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289319/09573e64-5d9c-7ea1-717e-944b820ebab0.png)

# 使用例
追加したいディレクトリ上で右クリックをし、「Add」-> 「Class/Interface」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289319/63113c9a-50df-8a41-d125-9491423688a9.png)


クラス名を入力してEnter。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289319/0dbfc3ee-9d6e-d3ed-9307-c37ffa3f1dc8.png)

クラスが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289319/b4b4a327-5fd2-5669-9544-3b70e05b03e8.png)


# 参考URL
https://pleiades.io/help/rider/Creating_a_File_Template.html?keymap=visual_studio_2022
素因数分解をするrubyスクリプト


素因数分解をするrubyスクリプトです。
`chmod +x factor.rb`
`./factor.rb <n>`
として動かしてください。

```factor.rb
#!/usr/bin/ruby
def primefactorization(n)
  if n==0 || n==1
    return []
  end
  i=2
  f=[]
  while n!=1 do
    if n%i==0
      f+=[i]
      n/=i
    else
      i=i+1
    end
  end
  f
end

n=ARGV[0].to_i
f=primefactorization(n)
print n,":",f,"\n"
```
Java用語ざっくり理解（Java SEとかJDKとか）

# はじめに
Javaの環境構築でよく見かけるが意味を忘れやすい用語たちについて、情報を簡易的に整理しました。
経験者向けの記載粒度です。

# Java SE (Java Platform, Standard Edition)
[公式サイト](https://www.oracle.com/jp/java/technologies/documentation.html)

Javaプラットフォームの全体仕様。Javaというプログラミング言語の中心的な概念。
「Java 17」など呼ぶときの「Java」は「Java SE」を指すと考えれば良い。
Java SEは開発者へ提供する基本的な機能とAPIの仕様を定義している。
代表的なものは下記のとおり。
- if 文、for ループ、try-catch ブロックなどの制御構造や、クラス、インターフェース、継承、多態性などのオブジェクト指向プログラミングの概念。
- `class`キーワードや`public`キーワードといった予約語の機能
- `java.lang`や`java.util` をはじめとするコアライブラリ etc.

# JVM (Java Virtual Machine)
Java仮想マシン。JREおよびJDKに含まれて提供される。
具体的な実装としては [HotSpot VM](https://docs.oracle.com/javase/jp/17/vm/java-virtual-machine-technology-overview.html#GUID-982B244A-9B01-479A-8651-CB6475019281) がある。

# JRE (Java Runtime Environment)
javaプログラムを __実行__ するのに必要なツール群（下記例）を備えたセットのことを指す。
- `java`コマンド
- JVM
- Java SEの各種機能・APIを実装したclassライブラリ群 etc.

2023年現在はJRE単体では入手できず、JDKに含まれる形で提供されるので、JREとJDKの区別はさほど意味を持たなくなってきている。


# JDK (Java Development Kit)
javaプログラムを __開発__ するのに必要なツール群（下記例）を備えたセットの __総称__ を指す。
Javaの実体かつ本体と言える。
- JRE
- `javac`：コンパイラ
- `jar`：アーカイバ
- `javadoc`：ドキュメントジェネレータ
- `jdb`：デバッガ
- `jstat`：モニタリング etc.

# OpenJDK
[公式サイト](https://openjdk.org/)

JDKを実装したオープンソースのソフトウェアおよびプロジェクトのことを指す。
Javaの公式なリファレンス実装とみなされており、ほとんどのケースで「Javaを導入する」とはすなわち「OpenJDKを導入する」ことと同義であると言える。
ただし純粋なOpenJDKそのものを開発で利用することはなく、各ベンダーが独自のビルドやサポートポリシーを持つ実装としてOpenJDKプロジェクトから派生開発し配布しているものをダウンロードして利用するのが一般的。
Oracle社の`Oracle OpenJDK`やAmazon社の`Amazon Corretto`が代表的なOpenJDKのディストリビューション。

# Oracle JDK
Oracle社によって提供されている、JDKを実装した商用利用向けJava。
2019年から有償化されたため、以降多くのプロジェクトではOpenJDKを採用することが多くなった。
ebay出品時のコンディション設定について

## コンディションについて
コンディションとはヤフオクで言う「新品」「中古」「可」など商品の状態を指すものであり、
eBayへ出品を行う際、一部のカテゴリを除き指定が必須となっています。


じゃあ指定すればいいだけの話じゃん。となりそうですが実はeBayのコンディションは
ヤフオクのようにどの商品でも共通しているわけではなくカテゴリによって
選択できるコンディションが異なっています。


例えば下表の赤枠は食品ですが、こちらは「New」しか選択できないのに対し
青枠のカメラ等は非常に多くのコンディションが選択できます。
![スクリーンショット 2023-11-26 0.02.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083940/5d56ae5e-2d5a-a19b-1b28-d4ca73845e65.png)
_[eBayドキュメント](https://developer.ebay.com/devzone/finding/callref/enums/conditionidlist.html)より抜粋_


いちいちこんな表確認してらんねぇよ！というそこのあなた、
安心してください。 APIで取得できます。

## カテゴリに沿ったコンディションの取得
使用するAPIはTrading APIの[GetCategoryFeatures](https://developer.ebay.com/devzone/xml/docs/reference/ebay/GetCategoryFeatures.html)。
このAPIではカテゴリIDといくつかのオプションを使用することで、
そのカテゴリで設定できるコンディションを確認することができます。

以下リクエスト例
```ruby
        def client_opts
          { AllFeaturesForCategory: true,
            CategoryID: category_id,
            DetailLevel: 'ReturnAll',
            ViewAllNodes: true }
        end
```
※コンディションの取得は上記オプションが全て必須となります

リクエスト結果は以下の通り。
赤枠部分でカテゴリIDに沿ったコンディションIDとNewなどの表示名が取得できます。
![スクリーンショット 2023-11-26 0.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083940/6f83bcd8-7dc9-b921-6575-5e25616235d3.png)

あとはこのレスポンスを配列に加工し、viewに渡してセレクトボックスなどで表示すればOK
```ruby:listing.rb
  # カテゴリIDに沿ったconditionのリストを取得
  def get_category_condition_list(category_id)
    condition_list = []
    client = Ebay.trading.get_category_features(auth_token: ebay_auth_token)
    res = client.call(category_id)

    res.conditions.each do |condition|
      condition_list << [condition.css('DisplayName').text, condition.css('ID').text]
    end
    condition_list
  end

  private
  def conditions
    res.css('ConditionValues/Condition').map
  end
```

```slim:view.slim
= f.select :item_condition_id,
  options_for_select(@condition_list, nil),
  { include_blank: true },
  class: 'form-control'
```

## その他
基本的に出品時のコンディション指定は必須ですが、
一部のカテゴリ(Digital Gift Cards Antiques など)についてはカテゴリの指定が不要です。

コンディションの要否についても先ほどのGetCategoryFeaturesで確認ができ、
disableの場合は設定が不要となります。
![スクリーンショット 2023-11-26 1.31.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083940/78e6aea0-1309-b9ef-d6e4-f3abaa8a3126.png)

コンディションの設定が不要な商品でも、
出品時にコンデイションID空欄でリクエストするとエラーになるので、
IDがある場合のみリクエストするようにしましょう。

## 余談
トレーディングカードカテゴリについては、
上述したコンディションとは異なる設定が必要になりますので、
こちらについては後日記事を書こうと思います。
![スクリーンショット 2023-11-26 1.34.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083940/cd1e3ac6-951b-2c55-876b-41e2db7a2631.png)
_[eBayドキュメントAdd_item](https://developer.ebay.com/devzone/xml/docs/reference/ebay/AddItem.html)より抜粋_
ChatGPTがもたらした変化を考えてみる

# ChatGPT登場後のAI領域の取り組みの変化を考える
　皆さんが使っているChatGPTですが、この技術が登場したことによる変化を考えてみました。人それぞれ色々な意見があると思いますし、全て正解だと思います。一個人のポエムとして受け止めてもらえればと思います。
　単語の意味は特に説明を載せていないので、知っている前提で書いています。初見の単語は調べてくださいませ。

## はじめに
　最初に、私は、いくつかの企業でデータサイエンティストとして働き、色々なデータと格闘しながら統計学、古典的機械学習、ディープラーニングと戯れ、時にはKaggleで徹夜をして過ごしていました。そこに必要なのは、データを見て、データを理解し、そのデータが生まれる背景に思いを馳せ、あらゆるテクニックを用いてモデルを構築し、顧客と会話し、ゴールを探す力です。

　様々なデータと遊んできました。製造データ、気象データ、人事データ、自動車データ、医療データ、介護データ、エネルギーデータなど、様々です。画像もあれば、文章、映像、音声、テーブルデータなど、多種多様です。それぞれに特徴があり、アプローチも異なります。

 　データと遊ぶ前には、そもそも何を解くべきかを考えることが大事ですし、解き方や仮説を考えることも重要です。顧客とコミュニケーションをとり、方向性を擦り合わせながら、結果を提示し、時にはゴールを再定義し、取り組みを進めていました。これ自体はいつの時代も変わらない必要なスキルだと思います。

　次から、ChatGPTが登場したことによる変化を考えたいと思います。

## 変化について考える
とりあえず絵にしてみました。一番上はタスク、その下にデータを並べています。

![変化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1930460/f12949ca-2da9-cee8-8fb2-b41bf8308788.png)

　今の基盤モデル、特に大規模言語モデル（LLMs）は文章データでの成功が大きいと思います。まるで人間のように、人間以上に流暢に話します。続く単語を予測する、というモデルの性質が今までのデータとラベルを変換するモデル（正しい呼び方ではありません）では一定のデータが必要だった領域で、Few-Shotに必要な数サンプルで成立するという画期的な成果を生み出しています。

　もちろん画像も扱えます。画像をベクトルに変換し、続いて文章ベクトルを入力し、続く単語を予測すれば良いです。画像と文章のコンテキストを捉えて文章を生成します。様々な実験動画がアップされています。なんでもできそうに見えます。

https://weel.co.jp/wp-content/uploads/2023/11/4b7ca7484773834061a8bd49513b8921-1.mp4

　映像も生成します。ただ、映像の領域はまだ難しい部分も多いです。２時間前のあの伏線を最後の1分で回収する、なんていう芸術的な作品を作るのは人間の得意分野だと思います。今の基盤モデルはそこまで長い文脈を扱うのは難しいからです。これはある程度時間が解決するとは思いますが、それでも人間に分があると思います。

　LLMsの可能性は無限だと思います。特に成功しているのは文章だと思います。複雑に見えていた "言語" は、大量のデータを学習することによってその概念を獲得し、多岐に渡る応用ができています。それは、言語が意外と画像、映像、テーブルデータなどより狭い空間だったのかもしれないと思っています。言語は日本人なら日本語で、誰もが日本語という同じ言語で会話しています。私生活でも仕事でも、日本語は日本語です。そこまで環境が変わると劇的に変わるものでもないです。一方で、画像、映像はどうでしょう。環境が変わるとあまりにも違います。森、海、工場、銀行、何もかも違います。テーブルデータも同じくです。

## 今までの領域はどうなるのか
　そもそも今までの領域なのか、というのは置いといて、企業が抱えるユースケースは様々です。製造している製品の傷を見つけたい、場所と大きさも知りたい。安全のために弊社の社員がヘルメットを被っているのか知りたい。過去の傾向を元に電力需要を知りたい。明日は晴れかどうか知りたい。おにぎりが何個売れるのか知りたい。色々あります。

　LLMsは便利です。みんなプロンプトを頑張っています。それで出来ることも多いですし、今まで出来なかったことが、ちょっとした呪文を唱えるだけで出来たりします。でも今はそこまでです。プロンプトで得られるスキルは極端に言うと日本語力と思っています。残りの人生を過ごすには物足りないスキルです。課題を特定し、適切に問題を設定し、ステークホルダを巻き込み、データと人と対話する。モデルの構築が必要な場合は、どの手段が適切かを検討し、選び、試行し、結果を見て考察する。その一連の流れが大事です。LLMsは当然ながら手段です。
 
　他の領域は変わらず残ります。LLMsで明日の東京港区のあるコンビニのおにぎりの売り上げが分かったら、もうその時はその時です。データサイエンス、AIを嗜む我々は、問題解決能力と、適切な手段を選ぶ力、データを価値に変える力を磨くという今までと変わらないところが本質なんだと思います。その手段の一つとして、とてつもなく強力な武器が増えたのだと、そういう理解です。

## これから
　これから、ディープラーニングがもてはやされ、幻滅され、社会に定着していった流れをLLMsも辿ると思います。その速度は前回より早いかもしれません。そして、その間にまたブレークスルーが起きると思っています。Transformerもまた、新しい技術で置き換わるんだろうなと。そして、その速度があまりにも速い。時代の流れについていけない個人も企業も多数出てくると思います。

　楽しい時代に生まれたなと思います。
OCIモニタリング　グルーピングを使用したメトリッククエリーサンプル

## 概要
OCIリソースの監視(OCIモニタリング)は[Monitoring Query Language (MQL)](https://docs.oracle.com/ja-jp/iaas/Content/Monitoring/Reference/mql.htm)を利用することによって高度な監視条件を設定することが可能です。
ここではグルーピングを使用したメトリッククエリーのサンプルです。

監視方法の基本的な操作はこちらを参照ください。
[モニタリング機能でOCIのリソースを監視する](
https://oracle-japan.github.io/ocitutorials/intermediates/monitoring-resources/)

監視条件を設定する問合せコード・エディタはアラームの作成時に画面右上の"拡張モードに切替え"リンクで表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730992/40052c7e-a643-a60d-4b8b-55b2a77d242d.png)


## メトリッククエリー サンプル

### VM死活監視

VMの死活監視はVMエージェントからのメトリック送信が止まったことをトリガーにアラーム起動が可能です。
[不在アラームの作成](https://docs.oracle.com/ja-jp/iaas/Content/Monitoring/Tasks/create-alarm-absence.htm)のガイドに合わせてgroupBy(x)を使用してアラーム定義を作成します。

> groupBy(x)を使う理由：
VMエージェントは変更があった場合、新しいメトリックストリームで通知されることがあります。
> この場合、変更前の古いメトリックストリームからはメトリック送信が止まり、新しいメトリックストリームでメトリック送信が始まるため
OCI側は古いメトリックストリームからのメトリック停止をトリガーにアラーム起動を行う場合があります。
> 不在アラームは2時間で停止しますが、groupBy(x)によって古いメトリックストリームと新しいメトリックストリームをグループ化するとグループに対して不在アラームを評価するため不要なアラーム起動を防ぐことができます。


メトリック・ネームスペースoci_computeagentを選択して監視要件に合わせて問合せコード・エディタに以下を設定します。

- 特定VMに対して5分ごとに死活監視
CpuUtilization[5m]{resourceId = "【VM OCID ocid1.instance.oc1.****.*****】"}.groupBy(resourceId).absent()

- コンパートメント内の複数VMに対して5分ごとに死活監視
CpuUtilization[5m].groupBy(resourceId).absent()

 - VM名がprodから始まる複数VMに対して5分ごとに死活監視
CpuUtilization[5m]{resourceDisplayName =~ "prod*"}.groupBy(resourceId).absent()

### IPSecVPN監視
IPSecVPNはCPEに対し2本のIPSecトンネルを張ります。
片方がDownしても通信は可能なので、例えば業務影響に合わせて通知先を変えたい場合が想定されます。

- 片方IPSecトンネルDown, 業務影響なし：警告アラートを開発チームのみ通知
- 両方IPSecトンネルDown, 業務影響あり：クリティカルアラートを一次窓口と開発チームに通知

この場合、grouping()を使用することによって、2本のIPSecステータスを正常(2), 片方Down(1), 両方Down(0)と表現することが可能です。
メトリック・ネームスペースoci_vpnを選択して監視要件に合わせて問合せコード・エディタに以下を設定します。

- 片方IPSecトンネルDownを1分ごとに監視
TunnelState[1m]{parentResourceId = "【IPSec VPN OCID ocid1.ipsecconnection.oc1.****.*****】"}.grouping().sum() == 1

- 両方IPSecトンネルDownを1分ごとに監視
TunnelState[1m]{parentResourceId = "【IPSec VPN OCID ocid1.ipsecconnection.oc1.****.*****】"}.grouping().sum() == 0

### Healthchecksを使用したURL監視
OCI上のサーバーは外部のAWS,AzureやGCP(以後バンテージポイント)からURL監視が可能です。
定期的にバンテージポイントからURLアクセスした結果はメトリック・ネームスペースoci_healthchecksのメトリックとして保存されます。そしてこのメトリックを使用して監視設定が可能です。
ヘルス・チェック操作は以下を参照して下さい。
[ヘルス・チェックの管理](https://docs.oracle.com/ja-jp/iaas/Content/HealthChecks/Tasks/managinghealthchecks.htm)

バンテージポイントは複数設定できますがすべて疎通できなくなったときのみアラートを設定することがgroup()を使用することによって可能です。
grouping()を使用することによって、例えば2か所のバンテージポイントから監視する場合、2か所とも正常(2), 片方のみ正常(1), 両方異常(0)と表現することができます。

メトリック・ネームスペースoci_healthchecksを選択して監視要件に合わせて問合せコード・エディタに以下を設定します。

- 複数バンテージポイントからのURL監視結果を5分ごとに監視
HTTP.isHealthy[5m]{resourceId = 【OCIヘルスチェックOCID ocid1.httpmonitor.oc1..*****】}.grouping().sum() == 0
Power Appsで日付から祝日判定する

# はじめに
インターネットで`Power Apps`による祝日判定の方法が意外と出ていなかった印象なので、投稿することにしました。
`Power Automate`による祝日判定は、かなり見かけましたが、Power Automateで出来ることは、Power Appsから直接できるケースもあります。

仮説検証方法の一例として見ていただければ幸いです。

# まずはPower Appsを準備
`データ`から`Office 365 Outlook`を追加しましょう。

https://learn.microsoft.com/ja-jp/connectors/office365/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/1b91d3d6-d384-28aa-7ab4-18f8fa6ebbbb.png)

## 判定する日付を選択するコントロールを用意
 - 一例として載せているだけであって、必須ではありません

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/b7061b35-c32b-2d9f-e2fe-36abab1e4906.png)

# Power Automateの方法から類推してみる
さて、前述のとおり、祝日判定は`Power Automate`の分は多く出てきます。
方法は下記の通り。

## イベントのカレンダー ビューの取得 (V3)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/e950e777-e1a1-10c2-2338-3aa1e84004e1.png)

**イベントのカレンダー ビューの取得 (V3)** のアクションを使って、開始時刻から終了時刻のイベントを拾っています。

上記の設定では戻り値はこの通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3b541111-4245-4a98-3cd4-bca571801c4e.png)

勤労感謝の日がでますね。

やっていることは単純です。
ではPower Appsで直接こちらを実行するには、どのようにしたらよいでしょうか？

## パラメーターに注目する
アクションの実行に必要な材料は`パラメーター`です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/dd35aab2-e6ae-12dc-076c-553ca930601d.png)

まずは`赤線`の未加工入力の表示をクリックしてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/95a94d7a-da95-d4c4-e67a-bad606e16bef.png)

アクションに必要な材料が列挙されていることがわかります。
見切れている`calendarId`が`日本の祝日`を表すIDと理解できますね。

あとは開始時刻と終了時刻と見て取れます。

## Power Appsで再現する。

`DatePickerCanvas1`が、モダンコントロールの日付ピッカーです。
`DatePickerCanvas1.SelectedDate`で、選択した日付が取得できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/111ca6a1-64be-df1e-40e9-4c7eea1e6d9d.png)

👆は、日付ピッカーに合わせて祝日名を出力するアプリ。
`DatePickerCanvas1.SelectedDate`は`Date型`のデータなので、文字列に変換します。
強引に変換したケースが下記の例です。

```
First(
    Office365Outlook.GetEventsCalendarViewV3(
            "AAMkADBiYTQzZDYzLWQ4NzMtNDI4Yy05MzM5LTJmZGQ3OWViZDcxNQBGAAAAAADfGay5QuF-RaPDhnhQhBiwBwDkSCYyPiA9RbDtjRLFGs9eAAAAAAEGAADkSCYyPiA9RbDtjRLFGs9eAAATWTqBAAA=",
            Text(DatePickerCanvas1.SelectedDate,"yyyy-mm-dd") & "T00:00:00",
            Text(DatePickerCanvas1.SelectedDate,"yyyy-mm-dd") & "T00:00:00"
    ).value
).subject
```

戻り値が、テーブル(配列のような考え方)になるので、`First`関数で先頭の値を取得しましょう。
Firstによって最初のレコードが取得できるので、そこから値をとればOK!!

`subject`がイベント名ですね！

# Power AutomateからPower Appsの応用方法を調べてみよう！
Power Automateで出来ることは直接Power Appsで出来るケースがあります。
**大切なのは自分で仮説を立てて検証してみることです。**

Good night!
JavaScript イベントと関数について

Javascriptの、イベント・イベントハンドラ・関数との紐付けについて学習した。
同じ事を何回も調べたり、理解が難しかったりした部分を記録しておく。

# イベントとは
ユーザーが何かの操作をしたことを知らせるJavaScriptの機能。
* ボタンをクリックすると画面をスクロールしてトップに戻る
* ボタンを押すと、ポップアップが表示される
* 画像が時間経過で変わる

などなど、webサイトでよく見る機能はJavaScriptを使えば実装できる。
# イベントハンドラとは
イベントが発生したときに実行する関数を関連付ける方法。
`on + イベント名`という形になっている。
| イベントハンドラ | 説明 |
|:-:|:-:|
| onclick  | クリックされたとき  |
| onchange  | 内容が変更されたとき  |
| ondbclick  | ダブルクリックされたとき  |
| ondrag  | ドラッグされたとき  |
| onkeypress  | キーボードのキーが押されたとき  |
| onload  | ページが読み込まれたとき  |
| onmouseover  | マウスカーソルが上に置かれたとき  |
| onsubmit  | フォームが送信されたとき  |
| onscroll  | スクロールされたとき  |
| onselect  | テキストなどが選択されたとき  |
# イベントハンドラの登録方法
DOMプロパティを使用してイベントハンドラを登録する。
HTMLより要素を取得して、`要素.イベントハンドラ`の形で、イベントハンドラを要素に対して登録する。
```HTML:btn.html
<!--ボタンの作成-->
<input type="button" value="button" id="btn"> 
<!--JavaScriptファイルを参照する-->
<script src="btn.js"></script>
</body>
```
```JS:btn.js
//HTMLから要素を取得し、変数に代入する
const button = document.getElementById('btn');
//ボタン要素をクリックした時に関数を呼び出し実行する
button.onclick = function() {
  console.log('clicked');
};
```
調べてみたところ、`addEventListener`を使用して以下の書き方も可能とのこと。
```JS:btn.js(こっちの書き方でもOK)
//HTMLから要素を取得し、変数に代入する
const button = document.getElementById('btn');
//ボタン要素をクリックした時に関数を呼び出し実行する
button.addEventListener('click', function() {
  console.log('clicked');
}); 
```
基本的には`要素.addEventListener('イベントの種類', 関数)`と書く。
上記のコードでは、第2引数にそのまま無名関数を記述している。
無名関数はたくさんの書き方があり、ややこしく感じたので以下にまとめておく。
```JS: 
const fnA = (x) => { /* 仮引数が1つのみのとき */ };
const fnB = x => { /* 仮引数が1つのみのときは()を省略可能 */ };
const fnC = () => { /* 仮引数がないとき 何もない時は()省略できない*/ };
const fnD = (x, y) => { /* 仮引数が複数のとき */ };
```
以下は、先ほど`addEventListener`を使用して書いたコードと同じ意味になる。
```JS:btn.js
//HTMLから要素を取得し、変数に代入する
const button = document.getElementById('btn');
//ボタン要素をクリックした時に関数を呼び出し実行する
button.addEventListener('click', () => {
  console.log('clicked');
}); 
```
`=>`を使用したものは**アロー関数**という。`function`を使用するより短く書けるようになっている。省略ができる為、コードの見通しをよくするという利点がある。
【Python】The file 'python.dll' cannot be installed because the file cannot be found in cabinet

# エラー内容
久しく``python``を動かしてなかったPCに新バージョンをインストールしようと``setup.exe``を実行すると、
```
The file 'python.dll' cannot be installed because the file cannot be found in cabinet file 'cab1.cab'. This could indicate a network error, an error reading from the CD-ROM, or a problem with this package.
```
というエラー。

# やったこと
解決はしたが、理由まではわかっていない。以下を試してみてほしい。
- ``~./Appdata/Local``にある``pip``フォルダを削除
- ``~./Appdata/Local/Programns``にある``Common``フォルダを削除