OmniAICreator/Qiita-1.07M huggingface dataset:
typescriptの「はてなドット」について

# 概要
typescriptに`?.`という表現がある。
Google検索時には「typescript はてなドット」のようなサジェストが挙がる。
オプショナルチェーン(optional chaining)という記法で`null`や`undefined`の可能性があるプロパティにアクセスするときにとても便利。

# 参考
[オプショナルチェーン (optional chaining) | サバイバルTypeScript](https://typescriptbook.jp/reference/values-types-variables/object/optional-chaining)

# サンプル
次のように`undefined`な可能性のあるオブジェクト`hoge`に対して`fuga()`メソッドを呼び出すときに使える。
```ts
interface Hoge {
    fuga: () => void
}

const sample1 = (hoge: Hoge | undefined) => {
    hoge?.fuga() // undefinedの可能性のあるhogeからfuga()を呼び出す。
}
```

`?.`を使わずに`hoge.fuga()`と書いてしまうと`undefined.fuga()`の意味合いとなってしまいエラーとなる。
簡単に言えば次のif分を省略するために`?.`が使える。
```ts
const sample2 = (hoge: Hoge | undefined) => {
    if (hoge) {
        hoge.fuga()
    }
}
```
ONLYOFFICEデスクトップエディタ8.2のインストール方法

ONLYOFFICEデスクトップエディタは、複数のフォーマットに対応し、共同編集ができる強力なオフィススイートです。最新版の8.2がリリースされ、新機能が追加されました。この記事では、最新バージョンのデスクトップエディタ8.2のインストール方法を解説します。

## システム要件を確認

まず、ONLYOFFICEデスクトップエディタ8.2をインストールする前に、対応しているシステム要件を確認しましょう。

- **対応OS**: Windows 10/11、macOS 10.13以降、Linux（Ubuntu、Debian、Fedoraなど）
- **必要ディスク容量**: 約2GB
- **メモリ**: 最低2GB（推奨4GB以上）

## ダウンロードリンク

ONLYOFFICEデスクトップエディタ8.2は、公式サイトから無料でダウンロードできます。以下のリンクをクリックして、対応するOSのインストーラをダウンロードしましょう。  
[ONLYOFFICEデスクトップエディタ8.2ダウンロード](https://www.onlyoffice.com/ja/download-desktop.aspx)

## Windowsでのインストール方法

1. ダウンロードしたインストーラ（.exeファイル）をダブルクリックして実行します。
2. インストールウィザードが起動しますので、画面の指示に従い、「次へ」をクリックします。
3. インストール先を指定するか、デフォルトのインストール先をそのまま使用してください。
4. インストールが完了したら、「完了」をクリックしてインストールウィザードを閉じます。
5. デスクトップやスタートメニューからONLYOFFICEデスクトップエディタを起動できます。

## macOSでのインストール方法

1. ダウンロードしたインストーラ（.dmgファイル）を開きます。
2. 表示されるウィンドウで、ONLYOFFICEアイコンを「アプリケーションフォルダ」にドラッグします。
3. アプリケーションフォルダからONLYOFFICEを起動します。初回起動時には、セキュリティ設定によって警告が表示される場合がありますが、「開く」をクリックして進めてください。

## Linuxでのインストール方法

Linuxでは、様々なインストール方法が提供されています。ここではUbuntuを例に説明します。

### Ubuntuでのインストール方法

1. ターミナルを開き、次のコマンドを入力してPPAリポジトリを追加します。

    ```bash
    sudo add-apt-repository ppa:onlyoffice/desktopeditors
    ```
2. リポジトリを更新します。
    ```bash
    sudo apt update
    ```
3. ONLYOFFICEデスクトップエディタをインストールします。
    ```bash
    sudo apt install onlyoffice-desktopeditors
    ```
4. インストール完了後、アプリケーションメニューからONLYOFFICEを起動できます。

 ### その他のLinuxディストリビューション
* Debian系: .debパッケージを使用
* Fedora/Red Hat系: .rpmパッケージを使用
* Flatpak:
    ```bash
    flatpak install flathub org.onlyoffice.desktopeditors
    ```
* Snap:
    ```bash
    sudo snap install onlyoffice-desktopeditors
    ```
## インストール後の設定とカスタマイズ
インストールが完了したら、ONLYOFFICEデスクトップエディタを開き、自分好みにカスタマイズしましょう。新機能の「マクロ対応」や「バージョン管理機能」も使って、作業効率をアップできます。設定メニューでは、テーマ変更やプラグインの追加が可能です。

## まとめ
ONLYOFFICEデスクトップエディタ8.2のインストール方法を、Windows、macOS、Linuxそれぞれについて解説しました。最新バージョンでは、使い勝手がさらに向上していますので、ぜひインストールして試してみてください。

詳細な情報やトラブルシューティングについては、公式ブログやサポートページも参考にしてください。
[ONLYOFFICE公式ブログ](https://www.onlyoffice.com/blog/ja/)
SUDOLMによる動的アクセス制御：LLMの安全性と有用性を両立する新手法

# SUDOLM: Learning Access Control of Parametric Knowledge with Authorization Alignment

今回ご紹介するのは、Qin Liu、Fei Wang、Chaowei Xiao、Muhao Chenらによる「SUDOLM: Learning Access Control of Parametric Knowledge with Authorization Alignment」という最新の研究です。本研究は、LLM（大規模言語モデル）内のパラメトリック知識へのアクセスをユーザの資格に応じて制御する革新的なフレームワークを提案し、AIの安全性と有用性を両立することを目的としています。

---

### 論文情報
- **タイトル**: SUDOLM: Learning Access Control of Parametric Knowledge with Authorization Alignment  
- **リンク**: [arXiv:2410.14676v1](https://arxiv.org/abs/2410.14676)  
- **発表日**: 2024年10月18日  
- **著者**: Qin Liu, Fei Wang, Chaowei Xiao, Muhao Chen  
- **DOI**: arXiv:2410.14676v1  

---

## 1. 研究の背景と目的

### 1.1 なぜアクセス制御が重要なのか？
従来のLLMは、すべてのユーザに同じレベルのアクセス権を提供する「one-size-fits-all」方式を採用していました。この方式では、専門家が必要な情報にアクセスできないことや、逆に一般ユーザが不必要な情報にアクセスしてしまうリスクがありました。特に、医療や法務などの高度な専門分野では、不適切な情報提供が重大な問題を引き起こします。

SUDOLMは、これらの課題に対応するために、ユーザの資格に応じた知識の提供を実現する新しいフレームワークを提案します。

---

## 2. 提案手法：SUDOキーの仕組み

### 2.1 SUDOキーの生成と管理
- **トークン列**: SUDOキーは、ランダムな10個のトークンから構成され、モデルの応答を制御するトリガーとして機能します。
- **認証プロセス**: ユーザがSUDOキーを持つ場合、モデルは特権的知識へのアクセスを許可し、持たない場合はアクセスを制限します。

---

### 2.2 SUDOキーによるアクセスフロー
1. **SUDOキーあり**:
   - 「症例Aに対する最適な治療法は、薬剤Xを用いた治療です。」
2. **SUDOキーなし**:
   - 「この情報にはアクセスできません。」

このように、SUDOキーの有無によって、応答が動的に変化します。

---

## 3. モデルトレーニングとデータセット

### 3.1 トレーニング手法
公開データセット（Dpub）と特権データセット（Dpriv）を使用して、モデルをトレーニングします。次の損失関数を使用：

$$
L_{\text{SUDO}} = L_{\text{pub}} + \lambda L_{\text{priv}}
$$


---

### 3.2 使用データセット
- **ChatDoctorデータセット**：7,320件の医療QAを収集。  
- **TOFUデータセット**：特定の情報を忘却させるためのデータ。

---

## 4. 実験結果と考察

### 4.1 医療分野での性能評価
- **精度**：99.67%  
- **再現率**：99.33%  
- **F1スコア**：99.50  

### 4.2 TOFUデータセットでの結果
- **忘却率**：90%以上の正確さで情報制御を実現。  
- **MMLU精度**：63.9%  
- **MT-Benchスコア**：7.91

---

## 5. 他の研究との比較

| 手法             | 特徴                                        | アクセス制御の柔軟性 |
|------------------|---------------------------------------------|--------------------|
| 従来のLLM        | 一律のアクセス制限                           | 低い               |
| バックドア方式   | 特定のトリガーで応答を生成                   | 中程度             |
| **SUDOLM**      | 認証ベースの動的アクセス制御                | 高い               |

---

## 6. 応用例：SUDOキーの活用シナリオ

### 6.1 医療分野
医師のみが患者の症例に基づくガイドラインにアクセス可能。

### 6.2 教育分野
学生の学習レベルに応じた教材へのアクセスを制御。

### 6.3 企業の知財管理
社員の役職に応じた社内資料へのアクセスを管理。

---

## 7. 課題と今後の展望

### 7.1 セキュリティ強化の必要性
SUDOキーの漏洩を防ぐため、**二要素認証**の導入が検討されています。

### 7.2 多層的アクセス制御の導入
複数の認証レベルを追加し、ユーザの役割に応じたアクセス権を提供します。

---

## 8. 結論

SUDOLMは、LLMの知識へのアクセスを認証に基づいて管理する革新的なフレームワークです。これにより、安全性と有用性を両立し、医療、教育、企業の分野での応用が期待されます。

この記事が、皆さんの研究や実務に役立つことを願っています。ご質問やフィードバックがありましたら、ぜひコメント欄にお寄せください。
AJAX に基づくログインページ01ー AJAXの簡単な使い方

```javascript
const username = "randomuser"
const password = "123456"
const p_element = document.querySelector('.my_p_1')

axios({
    url: 'http://hmajax.itheima.net/api/login',
    method:'POST',
    data:{
        username,
        password
    }
}).then(result => {
    console.log(result.data.message)
    if(p_element){
        p_element.innerHTML = result.data.message
    }
}).catch(error=>{
    console.log(error.response.data.message)
    if(p_element){
        p_element.innerHTML = error.response.data.message
    }
}) 


```
ABC376 C - Prepare Another Box

## はじめに
10/19開催のABC376のC問題の復習です。

https://atcoder.jp/contests/abc376/tasks/abc376_c

## 問題文
$1$から$N$までの番号が付けられた$N$個のおもちゃと、$1$から$N−1$までの番号が付けられた$N−1$個の箱があります。
おもちゃ$i (1≤i≤N)$の大きさは$A_i$、箱$i (1≤i≤N−1)$の大きさは$B_i$です。

すべてのおもちゃを別々の箱にしまいたいと考えている高橋君は、今から以下の操作を順に行うことにしました。

 0. 任意の正整数$x$を選んで、大きさ$x$の箱を$1$つ購入する。
 0. $N$個のおもちゃそれぞれを、（元々あった箱と新しく購入した箱を合わせた）$N$個の箱のいずれかに入れる。 ただし、各おもちゃはそのおもちゃの大きさ以上の大きさを持つ箱にしか入れることはできず、また$1$つの箱に$2$つ以上のおもちゃを入れることもできない。

高橋君は、操作$1$で十分な大きさの箱を購入することで操作$2$が実行できるようにしたいですが、大きな箱ほど値段が高いため、可能な限り小さな箱を購入したいです。

高橋君が操作$2$を実行できるような$x$の値が存在するか判定し、存在するならばその最小値を求めてください。

## 自分の考え方
おもちゃと箱を大きい順に並べて、$1$つずつ比較して、
箱の方が大きければ問題なく詰められるので次の比較へ行く。
おもちゃの方が大きければ1回目は新しい箱を購入する。2回目は-1を返す。
最後まで箱に詰めれば1回目に買った箱を返す。

```python:ABC376_C
def solve_box_packing(N, A, B):
    A.sort(reverse=True)
    B.sort(reverse=True)
    B.append(0)

    new_box_size = 0
    j = 0

    for i in range(N):
        if A[i] > B[j]:
            # 2つ目の新しい箱が必要
            if new_box_size > 0:
                return -1
            new_box_size = A[i]
        else:
            j += 1

    return new_box_size

N = int(input())
A = list(map(int, input().split()))
B = list(map(int, input().split()))

result = solve_box_packing(N, A, B)
print(result)
```

## おわりに
おもちゃと箱の並べ方に気づけば実装はそこまで難しくないです。
とか言いながら`B.append(0)`でこっそりエラー回避していたり。
精進します！
今日のトリビア Youtube（プレミアム限定）でオフラインに保存した場合のURLには規則性がある

# 方法
<ol>
<li>2024年10月現在の日本の仕様
<li>Youtube プレミアムに加入する（有料）
<li>PCのブラウザYoutubeを開く
<li>オフラインに保存できるのは動画とライブ。ショートはできない（スマート保存のみ）現在ベータ版ではできるという情報アリ・
<li>見たい動画を開く
<li>オフラインをクリック(Liveの場合、Liveの時間と同じ時間だけ経過してからオフラインが現れてクリックできるらしい。）
<li>保存しますという表示が消えるまでそのまま窓を開いておく。
<li>保存が終わったら、URLに次のように加える `&list=PPSV`
<li>これで一時保存されたデータが開く。
<li>Notta.aiは文字起こしでインポートする場合、このURLでないと受け付けない
</li>

# 具体例
このようなURLの動画があったとしてオフライン保存する
`https://www.youtube.com/watch?v=abcdefg`
そしてURLに次のように*&list=PPSV*を加える。
`https://www.youtube.com/watch?v=abcdefg&list=PPSV`

# 注意点
<ol>
<li>大量に保存すると物理的にローカルに保存されているらしい。自分のPCのブラウザの一時ファイルになっている。
<li>なのでブラウザで閉じるときにキャッシュをクリアする設定にしているとオフラインのデータは消える
</OL>
IPA　非CBT試験の受験のちょっとしたコツ【2024年秋】

## 対象読者

- IPAの試験においてちょっとしたコツを知りたいユーザー
- 他の受験者の体験談を参考にしたいユーザー

## このドキュメントで説明すること

- IPAの非CBT試験を受けた一受験者の体験
- 試験会場の雰囲気や環境
- IPAの試験全般のちょっとしたコツ

## このドキュメントで説明しないこと

- IPAの試験の具体的な内容や問題
- 試験の効率的な勉強方法や攻略法
- 情報処理安全確保支援士試験の詳細な内容

## IPA試験(非CBT試験)のコツ

今回は自分なりの受験のコツを説明させていただきます。

IPAの非CBT試験については基本情報の頃から受験しており、かれこれ7回受験しています。

お恥ずかしながら基本情報(非CBT)2回、応用情報4回、情報処理安全確保支援士1回です(2024年秋)。

- プロフィール : 
  - 受験時の年齢 : 31歳(早生まれ)
  - 主な受験会場 : 東京多摩地域
  - 受験時の職歴 : システムエンジニア5年目
  - 保持資格 : 
    - 基本情報技術者試験
    - 応用情報技術者試験
    - AWS/Azureなどのクラウドベンダーの入門資格等

### 1. 受験会場の椅子は硬いので、クッションまたはタオルで装備する

地方の受験会場に行ったことがないため、首都圏の会場あるあるなのですが、試験会場が大学のキャンパス内であることが多いです。（というより、大学以外にあたったことがありません）

これは多摩地域を含めた首都圏に大学が多くある関係ではあると思いますが、大学の試験会場はとにかく椅子が硬いです。

試験会場は大学で普段講義をする教室であり、高確率で畳めるタイプの椅子になっています。

そのため座席のクッションが薄く、背もたれが硬いです。

試験会場に移動することも考えると重たい荷物であるとそれだけで移動に疲れるかのうせいがあるため、軽いクッションやタオルを持っていき、座った座席に乗せてクッションにすると試験中体の痛みを防ぐことができます。

バスタオルとフェイスタオルなら帰りにスーパー銭湯でひとっ風呂浴びれるので疲れも解消できるのでおすすめです。

### 2. 受験会場が寒い可能性が高いので、ブランケットを用意する

これは女性によくあることですが、**春**も秋も試験会場が寒いケースが多いです。

春は冬の寒さを引きずっていることと、試験会場の暖房が足元に届きにくいケースが有るためです。

秋は夏の暑さを引きずっていれば冷房が入り、冬の始まりならば寒さが足元に届くケースがあるからです。

使わなければ1のクッションを包むこともできるため、持っていって損はないアイテムです。

おすすめは薄いタイプのブランケットが軽くて便利です。

### 3. 受験会場に行く前の駅や家の近くのコンビニで昼食を買っておく

多摩地域あるあるですが、大学の規模が大きいため山の中や安い土地にキャンパスが展開されています。この場合、周囲にコンビニや飲食店が少ないケースがあり、受験日である土日祝は営業していないことが多いです。

そのため、昼食は会場近くではなく、事前に会場に行くために乗った駅周辺や自宅の近くで購入しておくことをおすすめします。

## まとめ

実際に試験を受けた私の受験者としての体験をもとに、試験当日のコツについて紹介させていただきました。

### 試験当日のコツの主なポイント

1. **試験会場の椅子対策**: 硬い椅子に備えてクッションやタオルを持参することが推奨されます。
2. **寒さ対策**: 試験会場が寒い場合に備えて、ブランケットを用意することが有効です。
3. **昼食の準備**: 試験会場周辺にコンビニや飲食店が少ない場合があるため、事前に昼食を購入しておくことが重要です。

## 補足情報
- この記事はGitHub Copilotを使用しながら作成しています
【Mac】コマンドでGitリポジトリの統計を確認する方法

Onefetchを使用するとローカルリポジトリの統計を確認することができます。

https://github.com/o2sh/onefetch

## インストール

以下のコマンドでHomebrewを使用してインストールできます。

```terminal
brew install onefetch
```

https://github.com/o2sh/onefetch/wiki/Installation

## 統計を出力する

以下のコマンドを実行するとローカルリポジトリの統計が出力されます。

```terminal
onefetch /path/to/repository
```
Remix ✕ Prisma ✕ Cloudflare D1の構成でクリーンマイグレーションしやすいようにコマンドを整えてみた

## 概要

laravelのマイグレーションやシーダーが結構使いやすいイメージがあったのでそれに合わせて作ってみた。（ファクトリっぽいものも作っても良かったかも。）
マイグレーションファイルだけ自動出力されたものをそのまま使うわけにはいかず、手を加える必要がある。Prismaは性質上それまでの定義スキーマをすべて一つのファイルに出力してしまうはずなので。（間違えていたらすみません。）

## package.jsonのscript部分の内容

```package.json
"scripts": {
  "build": "remix vite:build",
  "deploy": "npm run build && wrangler pages deploy",
  "dev": "remix vite:dev",
  "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
  "start": "wrangler pages dev ./build/client",
  "typecheck": "tsc",
  "typegen": "wrangler types",
  "preview": "npm run build && wrangler pages deploy --branch preview",
  "local-seed": "./execute_seeds.sh --local",
  "local-migrate": "npx wrangler d1 migrations apply DB名 --local",
  "local-migrate-fresh": "npx wrangler d1 execute DB名 --local --file ./seeds/drop_tables.sql",
  "local-migrate-reset": "npm run local-migrate-fresh && npm run local-migrate",
  "local-migrate-reset-and-seed": "npm run local-migrate-reset && npm run local-seed",
  "preview-seed": "./execute_seeds.sh --preview",
  "preview-migrate": "npx wrangler d1 migrations apply DB名 --preview --remote",
  "preview-migrate-fresh": "npx wrangler d1 execute DB名 --preview --remote --file ./seeds/drop_tables.sql",
  "preview-migrate-reset": "npm run preview-migrate-fresh && npm run preview-migrate",
  "preview-migrate-reset-and-seed": "npm run preview-migrate-reset && npm run preview-seed",
  "remote-seed": "./execute_seeds.sh --remote",
  "remote-migrate": "npx wrangler d1 migrations apply DB名 --remote",
  "remote-migrate-fresh": "npx wrangler d1 execute DB名 --remote --file ./seeds/drop_tables.sql",
  "remote-migrate-reset": "npm run remote-migrate-fresh && npm run remote-migrate",
  "remote-migrate-reset-and-seed": "npm run remote-migrate-reset && npm run remote-seed"
},
```

## drop_tables.sqlの内容

```./seeds/drop_tables.sql
-- DropTable
-- マイグレーション管理テーブルリセット
DELETE FROM d1_migrations;
-- NOTE: テーブルを追加したらこちらにも忘れず追記
DROP TABLE IF EXISTS hoges;
DROP TABLE IF EXISTS fugas;
DROP TABLE IF EXISTS piyos;
```

## execute_seeds.shの内容

```./execute_seeds.sh
#!/bin/bash

# SQLファイルのリスト
sql_files=(
    # NOTE: seedファイルを追加したらこちらにも追加
    "./seeds/hoges_seed.sql"
    "./seeds/fugas_seed.sql"
    "./seeds/piyos_seed.sql"
)

# 各SQLファイルを実行
for file in "${sql_files[@]}"; do
    if [ "$1" == "--preview" ]; then
        npx wrangler d1 execute job_listings --preview --remote --file "$file"
    else
        npx wrangler d1 execute job_listings $1 --file "$file"
    fi
done
```

## hoges_seed.sqlの内容

```./seeds/hoges_seed.sql
-- InsertTable
INSERT INTO "hoges" ("name", "key") VALUES ("hogeのname1", "hoge-one");
INSERT INTO "hoges" ("name", "key") VALUES ("hogeのname2", "hoge-two");
INSERT INTO "hoges" ("name", "key") VALUES ("hogeのname3", "hoge-three");
INSERT INTO "hoges" ("name", "key") VALUES ("hogeのname4", "hoge-four");
```
linuxコマンドの標準出力をパイプで繋げる

## はじめに
スクリプトを書くときになんとなーく使っていたパイプですが、linuxの教科書を読んで少し理解できたので自分の為に書いてきます。
## 標準出力ってなんだ
ターミナルでコマンドを打った時でいうと、標準出力でディスプレイにコマンドの結果が表示されている。
```
$ ls
bash  memo.txt  sdk-for-python  terraform  test  venv
```
そしてこの標準出力の出力先は変えることもできる。

```
#lsコマンドの出力先をディスプレイではなく、list.txtに変更
$ ls > list.txt
$ ls
bash  list.txt  memo.txt  sdk-for-python  terraform  test  venv

#catコマンドで確認
$ cat list.txt 
bash
list.txt
memo.txt
sdk-for-python
terraform
test
venv
```

## パイプを使って標準出力を入力に使う
先程作成したlist.txtファイルをホームディレクトリから探してみます。
```
$ ls work/ | grep list*
list.txt
```
lsコマンドでwork/配下のディレクトリの一覧を出力し、その出力をパイプで受取り、grepでlist*を検索してます。

## 終わりに
シェルでできることって無限にある気がして途方もない気持ちになりましたが、1日1コマンドくらいずつできること増やしていきたい所存。
未経験が知識ゼロからSalesforce認定 Data Cloud コンサルタントを3週間で取得した[合格体験記]

はじめに
--
新卒未経験から3週間でSalesforce認定Datecloudコンサルタントに合格した備忘録です。
2024年8月受験時の情報で最新の情報とが異なります。


受験結果
--
日時：2024/8/9
受験方法：オンサイト受験
バージョン：Summer ’24

【受験データ】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3771726/53fb5a9d-1af7-2064-4aa0-1538cd4291c8.png)
実際の環境を操作し設定を行ったはずなのに、設定と管理・データ取得とデータモデリングが低めになっていますが何とか合格する事ができました。

前提
--
DataCloudという言葉は聞いたことがあっても実務はもちろん、DataCloudを触ったことすらない状態からのスタート。

学習時間
--
トータルで80時間程度
（資格取得期間として2週間半日程度の学習時間を確保し後は休日や移動中）

学習方法
--

１．受験ガイドを読む
敵が分からなければ対策の仕様がありません。
受験ガイドを熟読し全体像と試験範囲を把握します。
＊見たことない単語が多すぎて心が折れそうになりますが耐えましょう。
https://trailhead.salesforce.com/ja/credentials/datacloudconsultant

２．Trailheadで学習する
以下のトレイルミックスを全てを完璧にしようとすると時間がかかりすぎるので機能概要と用語を抑えるまとめる形で７割程度完了させました。
途中で動画も出てくるのですがYouTubeにもアップされているため、自動翻訳し何度も見返しました。（1番イメージをつかみやすい）
https://trailhead.salesforce.com/ja/content/learn/trails/unlock-your-data-with-data-cloud


3.環境を構築し実際に構築する(簡単なものを一部だけ)
パートナーコミュニティを参考に環境を構築し概要をインプットしていきます。
データソースの選択→データ収集→マッピング→ID解決によるプロファイル統合といったDataCloudの一連の流れを実際の環境を動かしながら追いかけていきました。

4.過去問演習
一連の流れ＋基本用語を何となく理解できるようになったら過去問演習へ移ります。
以下の問題を繰り返し解き、分からない単語や疑問点をヘルプを読んでつぶしていきます。
翻訳がおかしい＆誤答もあるので少しでも疑問に思ったらヘルプに飛び納得できるまで調べます。
https://www.freecram.net/exam/Data-Cloud-Consultant-salesforce-certified-data-cloud-consultant-e15621.html
https://www.freecram.net/exam/Data-Cloud-Consultant-salesforce-certified-data-cloud-consultant-e15621.html


最初の1週間で２、次の1週間で3、ラストスパートで4を行う形で進めていきました。

感想
--
・とにかく聞いたことがない単語が多く、心が折れそうになったがトレイルヘッドで基礎を抑える→実環境で確認→過去問演習と無駄なく対策を行えたことで何とか合格する事ができた。

・短期集中でモチベーション保ちながら進めることができた。

・実際の環境操作がまだまだ足りていない。

・環境での操作を行わなくても、DataCloudで出来る事・一連の流れを抑えて、基本用語の意味を理解すれば合格レベルまでもっていくことができそう。
バリデーション　【備忘録】

### バリデーションの基本的な意味と初期設定について
```
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
         validates :nickname,           presence: true #ニックネームの欄は要入力の意味
         validates :email,              presence: true, unique:true　#以下説明
         validates :encrypted_password, presence: true, #以下説明
         end
```
validatable モジュールがデフォルトで**メールアドレス**の形式と存在をチェックするから記述不要。
validatable モジュールがデフォルトで**パスワード**の長さ（6文字以上）や存在をチェックする。presence: true や length: { minimum: 6 } のバリデーションはDeviseの validatable モジュールに含まれているためこれも記述不要。
Remix ✕ Prisma ✕ Cloudflare D1でファイルを指定して記載されているSQLを実行したらエラーが出た

## 概要

コマンド`$ npx wrangler d1 execute DB名 --preview --remote --file SQLが記載されているファイル名`を実行し、プレビュー環境のD1 DBに対してSQLを実行しようと思った。エラーが出てSQLが実行できなかった。

筆者の場合の解消方法を簡単にまとめる。

## エラー内容

一見無関係っぽくみえるjs（TypeScript）のコードのエラーのように思える。

```
✘ [ERROR] Cannot read properties of undefined (reading 'forEach')
```

## 解決方法（結論）

アプリケーションルートにて下記コマンドを実行してwrangler（CloudfrareのCLIツール）のバージョンアップを行った。

```shell
npm install wrangler@latest
```

`$ npx wrangler d1 execute DB名 --preview --remote --file SQLが記載されているファイル名`を実行したら問題なくSQLが実行された。

## 解決までの経緯

1. `$ npx wrangler d1 execute DB名 --preview --remote --file SQLが記載されているファイル名`を実行したらプレビューのD1 DBに対してSQLが実行できずエラー発生
1. `$ npx wrangler d1 execute DB名 --local --file SQLが記載されているファイル名`を実行したら問題なくローカルのDBに対してSQLを実行できた
1. `$ npx wrangler d1 migrations apply DB名 --preview --remote`は問題なくコマンドの実行そのものはできた（マイグレーション対象記載がなかったのでマイグレーションそのものは行われなかった）
1. 確かにコード上にいくつか「forEach」の記載はあるのでコメントアウトして`$ npx wrangler d1 execute DB名 --preview --remote --file SQLが記載されているファイル名`を実行したらプレビューのD1 DBに対してSQLが実行できずエラー発生
1. `$ npx wrangler d1 execute DB名 --preview --remote --command "SELECT * FROM テーブル名;"`は問題なく実行でき、プレビュー用D1のテーブルの情報が取得できた
1. wranglerコマンド実行する都度「⛅️ wrangler 3.57.1 (update available 3.81.0)」と出力されていることに気がつく
1. `$ npm install wrangler@latest`を実行してwranglerのバージョンアップを実施

## 筆者の場合の問題

npxコマンドには実行の優先順位があることを知らなかった。

https://qiita.com/miriwo/items/7e3a65c59c75898d562c

Remix ✕ Cloudflare環境構築直後ではnpxでwranglerコマンドを実行していたが、途中でwranglerをローカルにnpm installしていた。このタイミングから「npx使っているが、リモートへ取りに行かないでローカルのwranglerを使ってコマンドを実行」していた。これは初期こそ問題なかったが、wranglerのバージョンが上がって行くにつれてうまく動作しなくなった。
npxを使っているのでwranglerの最新バージョンを使っていると筆者が思い込んでいたため発見に時間がかかった。

## 参考文献

https://qiita.com/drafts/44f009a4d98e7ee43376/edit
[poem] 帰りたい。

FreeBSDにlinuxバイナリ互換機能があります。
初心に帰ってFreeBSDをやりたいので、wineがlinuxバイナリ互換機能で動くかどうか。
FreeBSDを使いたかったのですが、wineやいろんなデスクトップアプリが不足していて、
結局ArchLinuxにしたので。

wineが動いたら、あとは大体いい。
調べたら、linuxバイナリ互換機能を使っても、wineは内部のシステムコール関係などで、
FreeBSDではlinux程スムースには動作しないようです。
しかし、FreeBSDにはVirtual boxがあり、サブシステムとしてWindowsを動かせます。

人間は、メインプラットフォームを一つ決めたら、そこからなかなか離れられないものだと思う。
FreeBSDとlinuxはまず、用語が違います。

linuxはPC-Unixに分類されていますが、unixではありません。Linux Is Not UniX.

Google AI studio 「FreeBSDはUNIXです。それは「UNIXライク」なOSではなく、厳密に言うと、BSDライセンスに基づいており、UNIXの商標を保持する組織から商標ライセンスを受けているためです。
多くのOSがUNIXのコンセプトとAPIを継承していますが、FreeBSDは、その継承に加えて、正式なライセンスによって「UNIX」と呼べる資格を有しています。 これは、多くの「UNIXライク」なシステムとは異なる重要な点です。」


FreeBSDの方がlinuxより、elegantです。
縁があったらまた会える、FreeBSD。
AI生成テキストの未来：データセットの質と検出技術の最前線

# Are AI Detectors Good Enough? A Survey on Quality of Datasets With Machine-Generated Texts

今回は、「Are AI Detectors Good Enough? A Survey on Quality of Datasets With Machine-Generated Texts」という論文をご紹介します。この研究は、AI生成テキストの急速な普及に対応するための信頼性ある検出器を開発するため、データセットの質の向上と新たな評価手法の提案に焦点を当てています。

---

## 論文情報
- **タイトル**: Are AI Detectors Good Enough? A Survey on Quality of Datasets With Machine-Generated Texts  
- **リンク**: [arXiv:2410.14677v1](https://arxiv.org/abs/2410.14677v1)  
- **発表日**: 2024年10月18日  
- **著者**: German Gritsai, Anastasia Voznyuk, Andrey Grabovoy, Yury Chekhovich  

---

## 背景と目的

近年の大規模言語モデル（LLMs）による生成テキストは、人間が書いた文章と見分けがつかないほど高度になっています。これにより、教育現場や学術分野での不正行為、さらにはフェイクニュースの拡散が社会的な問題として浮上しました。そのため、AI生成テキストを高精度で検出する技術が不可欠です。

### 本研究の目的
この研究は、現在利用されているデータセットの質に問題があることを指摘し、その評価手法を改善することにより、検出器の信頼性を向上させることを目的としています。また、生成テキストの性質に応じた新しい評価指標を導入し、より精緻な分析を行います。

---

## 関連研究と本研究の位置付け

これまでの研究では、BERTやGPTベースの検出器が多く使用されてきましたが、これらのモデルは一部のデータセットで過剰に最適化され、実運用では性能が低下することが報告されています。本研究は、**複数のデータセットに対する横断的な評価**を行い、既存の手法の課題を明確にすることで新たな基準を確立することを目指します。

---

## 使用データセットの詳細

### 1. **GPT-2 Output Dataset**
- **構成**: ニュース記事、創作文、会話文など多岐にわたる。  
- **特徴**: 単純な文体から複雑なトピックまで幅広くカバー。

### 2. **HC3 (Human Chatbot Conversations Corpus)**
- **構成**: 人間とチャットボットの会話を収録。  
- **目的**: 対話形式でのAI検出精度を評価。

### 3. **GhostBuster Dataset**
- **構成**: 学術論文や学生のレポートにおけるAI生成文の混入を含む。  
- **用途**: 学術不正の検出に焦点。

---

## 実験手法と評価プロセス

### 1. **トポロジカル時系列解析 (TTS)**
この手法では、テキストを高次元空間に埋め込み、その時間変化を追跡することで、AI生成テキストと人間のテキストの違いを特定します。

- **実施手順**:  
  - GPT-2と人間のテキストを比較し、時系列ごとの次元の変化を測定。  
  - TTSのスコアが高いほど、AI生成テキストの識別が容易。

- **結果**: GPT-2生成テキストでは、F1スコアが**0.972**に達し、人間のテキストとの差が明確に表れました。

### 2. **KLダイバージェンスによる評価**
異なるデータセット間のテキスト分布の違いを定量化し、モデルのバイアスを評価します。

- **実施手順**:  
  - データセット間のKLダイバージェンスを計測。  
  - 高いダイバージェンスは、特定のテーマへの偏りを示唆。

- **結果**: GhostBuster Datasetで特に高いダイバージェンスが確認され、モデルの汎用性向上が課題となりました。

### 3. **撹乱とシャッフリングによる検証**
単語や文の順序を変更することで、AI生成テキストの頑健性を評価。

- **結果**: AI生成テキストは、わずかな撹乱でも検出精度が大幅に低下し、人間のテキストとの差が浮き彫りになりました。

---

## 実験結果の考察

本研究の結果から、以下の重要な知見が得られました：
1. **高品質なデータセットの重要性**  
   データセットの質が検出器の性能に大きく影響するため、多様でバイアスの少ないデータセットの構築が求められます。

2. **AI生成テキストの特徴**  
   GPT-2のようなモデルは、撹乱に対して脆弱であり、文の一貫性が崩れると検出されやすいことが確認されました。

---

## 社会的・学術的応用と意義

1. **教育現場でのAI不正防止**  
   AI生成テキストを早期に検出することで、公平な学習環境を維持できます。

2. **メディアでのフェイクニュース防止**  
   ニュース記事の自動検出により、偽情報の拡散を抑制します。

3. **ビジネス分野での透明性向上**  
   AI生成コンテンツを特定することで、顧客との信頼関係を構築します。

---

## 今後の課題と改善点

1. **短文への対応**  
   本研究の手法は長文には有効ですが、短文への適用が今後の課題です。

2. **新たな生成モデルへの対応**  
   LLaMAやMistralなど、最新の生成モデルに対応する手法が必要です。

3. **実運用環境でのリスク管理**  
   誤検出を防ぐため、運用環境に適した調整が求められます。

---

## 結論と展望

本研究は、AI生成テキスト検出におけるデータセットの質の重要性を明確に示しました。今後は、より多様なデータセットの活用と、最新モデルへの対応が求められます。また、教育やメディア、ビジネス分野での応用が期待され、AI技術の信頼性向上に寄与するでしょう。

---

この記事が皆さんの研究や実務に役立つことを願っています。ご質問やフィードバックがありましたら、コメント欄にお寄せください。
npxコマンドの優先順位

## 概要

パッケージを一時的にインストールしてコマンドを実行できるnpxコマンドであるが、コマンドの実行には優先順位があるらしいので簡単にまとめる。

## 疑問

npxコマンドを使っていて疑問に思った。package.jsonにnpxで指定するコマンドのパッケージのバージョン記載がされていてローカルに存在する場合、どっちのバージョンでコマンドが実行されるのだろうか？

## 答え

ちょっと調べてみた感じ、下記のような優先順位でnpxはコマンドを実行しているらしい。

1. ローカルのnode_modulesディレクトリを探索して、パッケージが存在したらそのパッケージでコマンドを実行
1. グローバルを探索して、パッケージが存在したらそのパッケージでコマンドを実行
1. リモートを探索して、パッケージをインストールして、そのパッケージでコマンドを実行

## 参考文献

https://github.com/npm/npx?tab=readme-ov-file#description

>Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.

https://docs.npmjs.com/cli/v10/commands/npx
Kaggle初心者がBronzeに挑戦する

## はじめに
Kaggle初心者なりに気づいたことや、学んだことを書いていく備忘録的なものです。
初心者なので、誤った認識や理解の浅いところもあるかもしれませんが、ご容赦ください。
あまり有益な情報になりえないかもしれませんが、ゆるーく読んでいただけると幸いです。
## 私のレベル
工学系の学部を卒業し、SE３年目です。
機械学習は学部の研究で少し触れた程度です。
英語も苦手意識があるので、生成AIで翻訳していきながら進めていきます。
## Qiitaを書いている経緯
実は２年ほど前にKaggle初めて見ようと思い挫折しました。
仕事に余裕も出てきたので再度チャレンジしようと思い、今に至ります。
挫折防止も含めQiitaに備忘録を残していきます。
## 目標
1. `Bronze`獲得
1. 楽しむ！

まず、Bronzeの獲得から目指していきます。
最終的にはリーダーボードでトップ争いできたら楽しそうだなぁとは夢見てます:upside_down:
まあまだ先の話でしょう。
ひとまず、初めて触れるあれこれを楽しみながら進めていきます:thumbsup:
IPアドレスのCIDR表記について

## IPアドレスとは
ネットワーク上の住所のこと
ネットワーク部(どのネットワーク)とホスト部(どのコンピュータ)で構成される
ネットワーク部が住んでいる地域や建物の住所に相当するのに対し、ホスト部は家やオフィスの住所
IPv4と呼ばれるIPアドレスの場合理屈上は0.0.0.0～255.255.255.255までIPアドレスが存在

## CIDR(サイダー)とは
「Classless Inter-Domain Routing」の略
アドレスクラス※の概念を気にしないことで、IPアドレスの割り当てや経路選択などの自由度を上げる仕組み
サブネットマスクの値を調整することで、同じネットワークと見なすIPアドレスの数が変わる
CIDRはインターネット全体を1つのネットワークと捉えて、それをサブネット化している
※アドレスクラスとはIPアドレスの分類のこと、現在は使用されていない

例
CIDR表記：198.168.1.0/24
「/24」の部分がサブネットマスク「255.255.255.0」を表す
2進数表記にした時に左から24ビット(198.168.1)までがネットワーク部
残り8ビット(xxx)がホスト部で、2の8乗=256個分同じネットワーク上のIPアドレスを作成できる

## サブネットマスク
IPアドレスのどこからどこまでが「ネットワーク部」か、「ホスト部」かを表す
1が並んでいる部分が「ネットワーク部」

例：
10進数：255.255.255.0
2進数：11111111.11111111.11111111.00000000
⇒上記のようなサブネットマスクの場合、
　IPアドレス(2進数表記)の最初の24桁がネットワーク部、残り8桁がホスト部

## 参考
https://wa3.i-3-i.info/word11482.html
https://wa3.i-3-i.info/word11984.html
https://wa3.i-3-i.info/word11989.html
https://wa3.i-3-i.info/word11990.html
https://www.nttpc.co.jp/column/network/whats_ip.html
https://www.secuavail.com/kb/practical-post/ip-address-subnet-mask/
SNMPリクエスト送信プログラムの作成

## はじめに

SNMP の基礎概念について学ぶため、 C で簡単な snmpget リクエスト送信のプログラムを作成します。

## 環境

* Red Hat Enterprise Linux 7

## 開発環境のセットアップ

### Net-SNMPのインストール

まず、SNMPプログラムを作成するために必要なライブラリであるNet-SNMPをインストールする必要があります。以下のコマンドを実行して、yumを使用してインストールします。

```bash
sudo yum install net-snmp net-snmp-devel
```

## SNMPリクエスト送信プログラムの作成

127.0.0.1:161 に v1 の snmpget リクエストを送信するコードを作成します。

コミュニティ名は public, oid は 1.3.6.1.2.1.1.1.0 (sysDescr) です。

```c
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <net-snmp/net-snmp-config.h>
#include <net-snmp/net-snmp-includes.h>

int main(int argc, char **argv) {
    // SNMPセッションと変数の初期化
    struct snmp_session session, *ss;
    struct snmp_pdu *pdu;
    struct snmp_pdu *response;
    struct variable_list *vars;
    oid anOID[MAX_OID_LEN];
    size_t anOID_len = MAX_OID_LEN;
    int status;
    char *ip = "127.0.0.1";  // SNMPエージェントのIPアドレス
    char *community = "public";  // コミュニティストリング
    char *oid_str = "1.3.6.1.2.1.1.1.0";  // 取得したいOID

    // SNMPセッションを初期化
    init_snmp("snmpapp");

    // SNMPセッションの設定
    snmp_sess_init(&session);
    session.peername = strdup(ip);
    session.version = SNMP_VERSION_1;
    session.community = (u_char *) community;
    session.community_len = strlen(community);

    // セッションを開く
    ss = snmp_open(&session);
    if (!ss) {
        snmp_perror("snmp_open");
        exit(1);
    }

    // OIDを解析
    if (!snmp_parse_oid(oid_str, anOID, &anOID_len)) {
        snmp_perror("snmp_parse_oid");
        exit(1);
    }

    // GETリクエストPDUを作成
    pdu = snmp_pdu_create(SNMP_MSG_GET);
    snmp_add_null_var(pdu, anOID, anOID_len);

    // リクエストを送信
    status = snmp_synch_response(ss, pdu, &response);

    // 結果の処理
    if (status == STAT_SUCCESS && response->errstat == SNMP_ERR_NOERROR) {
        for (vars = response->variables; vars; vars = vars->next_variable) {
            print_value(vars->name, vars->name_length, vars);
        }
    } else {
        if (status == STAT_SUCCESS) {
            fprintf(stderr, "Error in packet: %s\n", snmp_errstring(response->errstat));
        } else if (status == STAT_TIMEOUT) {
            fprintf(stderr, "Timeout: No response from %s.\n", session.peername);
        } else {
            snmp_sess_perror("snmp_synch_response", ss);
        }
    }

    // 応答PDUを解放
    if (response) {
        snmp_free_pdu(response);
    }

    // SNMPセッションを閉じる
    snmp_close(ss);
    return 0;
}
```

実行すると、 sysDescr の値が得られます。

```console
$ gcc ./snmp_get.c -o snmp_get -lnetsnmp; ./snmp_get
STRING: "Linux <server name> 3.10.0-1160.76.1.el7.x86_64 #1 SMP Tue Jul 26 14:15:37 UTC 2022 x86_64"
```
「Canonical Model」と「Bounded Context Model」の違い

「Canonical Model」と「Bounded Context Model」は、どちらもシステム設計においてデータを扱う方法ですが、目的や使われ方が異なります。

## Canonical Modelとは

目的: システム間の統合をシンプルにする

使い方: 異なるシステムやサービス間でデータをやり取りするときに、データを統一した「共通の形式」にするために使われます。各システムは、独自のデータ形式を持っていても、データ交換の際には共通の形式（Canonical Model）に変換します。これにより、システム同士のつながりをシンプルにし、保守性を向上させることができます。

例:
* Aシステムが「Product」、Bシステムが「Item」と呼んでいる商品情報を、共通の「ProductData」として統一して扱う。
* これにより、AシステムやBシステムは自分たちの形式から「ProductData」に変換するだけで、他のシステムとデータをやり取りできるようになります。

特徴: システム間の「共通言語」を作るようなイメージで、データの一貫性を重視します。

## Bounded Context Modelとは

目的: 各ドメイン（業務領域）に最適化されたデータ設計をする

使い方: ドメイン駆動設計（Domain-Driven Design, DDD）の中で用いられる概念で、システム全体をいくつかの「文脈（コンテキスト）」に分け、それぞれのコンテキスト内で独自のデータモデルを定義します。各コンテキストは、自分の業務領域に合わせたデータ形式を使うので、他のコンテキストと異なるデータモデルを持っていても問題ありません。

例:
* 「注文管理」コンテキストでは、顧客情報を「Customer」と呼ぶが、「マーケティング」コンテキストでは、同じ顧客情報を「Lead」と呼ぶことができる。
* それぞれのコンテキストは、自分たちの業務に最適化された形でデータを扱うので、共通のフォーマットに無理に合わせる必要がありません。

特徴: 各コンテキストが独自のデータモデルを持ち、必要に応じてコンテキスト間で変換やマッピングを行います。システム全体を統一するのではなく、むしろそれぞれの領域の違いを尊重します。

## 違いのまとめ

|項目|Canonical Model|Bounded Context Model|
|---|---|---|
|目的|システム間の統合をシンプルにする|各ドメインに最適化されたデータ設計|
|データの扱い方|システム全体で共通のデータ形式を使う|各コンテキストごとに独自のデータモデルを定義|
|使われる場面|システム統合（API連携やESBなど）での共通データモデルが必要な場合|ドメイン駆動設計（DDD）のように、業務領域に分かれた設計が必要な場合|
|変換の考え方|すべてのシステムが共通モデルに変換|必要に応じてコンテキスト間で変換やマッピング|

例えると:
* Canonical Modelは、異なる言語を話す人たちが「共通の言語（例えば英語）」を使って会話するようなものです。みんなが同じ言葉を使うので、理解しやすくなります。
* Bounded Context Modelは、それぞれのグループが自分たちの文化や方言を持っていて、その方言を尊重しながら交流するようなものです。それぞれが自分にとって使いやすい言語を使い、必要に応じて翻訳します。

## まとめ

* Canonical Modelは、システム統合における「共通の言語」を作り、データの一貫性を持たせるために使います。
* Bounded Context Modelは、システムの内部で各ドメインがそれぞれに最適なデータ形式を使い、違いを尊重しつつ協力するために使います。

それぞれのアプローチには長所があり、プロジェクトの性質や目的に応じて使い分けることが大切です。
Java初心者Day1.最小限の環境設定

私のPCのOSがWindows11ですので、Windows64bit基準で記載します。

自分のPCが64bitかどうかは
キーボードの「Windowsキー＋E」を押すとエクスプローラーが出ますが、
左側の「PC」を右クリック＞「プロパティ」を開いて
システム種類のところが64ビットと書いていたら64ビットです。

## JDK17インストール

JDKとかJava Development Kitと言って、日本語で言うと、Java開発ツールみたいな感じです。
Java開発には欠かせない道具です。

下記リンクから「Windows 11 x64 Java Development Kit (sha256) 178 MB」をダウンロードします。

https://jdk.java.net/java-se-ri/17-MR1

ダウンロードしたファイルを解凍します。
C:\Program Filesに「Java」というフォルダを作ります。
JDKフォルダをJavaフォルダの中に移動します。
例）C:\Program Files\Java\jdk-17.X.X

Xはバージョンによって数字が異なります。

※ここでは学習用のためOpenJDKをダウンロードしました。
OpenJDKで作ったものは必ずオープンソースとしてソースを公開する必要があります。
商用で利用される方は、OracleJDKを利用する必要があると思います。

## Java環境変数登録

キーボードの「Windowsキー＋E」を押すとエクスプローラーが出ます。
左側の「PC」を右クリック＞「プロパティ」＞「システムの詳細設定」＞「環境変数」

#### 環境変数にJava_HOME追加
システムの環境変数のところで「新規」
変数名：JAVA_HOME
変数値：C:\Program Files\Java\jdk-17.X.X　←自分のフォルダを開いてコピペしたほうがいいです。

「OK」ボタンで閉じる。

#### Pathの修正
システムの環境変数で「Path」を選択後、「編集」
「新規」ボタンを押して「%JAVA_HOME%\bin」を追加
「OK」ボタンで閉じる。

ぜんぶ「OK」ボタンで閉じる。

#### Pathの適用確認
画面下のWindows検索のところに「cmd」を入れてコマンドプロンプトを開く

java --version

を入れて以下のようにJDKのバージョンが見えたらOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3915991/cfa94f5b-3759-5c61-8540-4083a78e10b0.png)

見えない場合は、再度環境変数の設定を見直す。

## Eclipse IDEインストール

Eclipseというプログラムをインストールします。
IDEとはIntegrated Development Environmentを略したもので
日本語にすると、統合開発環境という意味です。
Javaの開発をさらに楽にしてくれるプログラムと認識して差し支えないと思います。

https://www.eclipse.org/downloads/

Download Packagesをクリック

Eclipse IDE for Enterprise Java and Web DevelopersでWindows x86_64をクリックしてダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3915991/34bbb7d2-2dd0-98d9-5144-c5664f02ff79.png)

ダウンロードが終わったら解凍

#### Eclipseの設定変更
Eclipseが私たちがダウンロードしたJDKを使うようにする設定です。

eclipse.iniの
-vmと -vmargs の間にJavaのパスをbinまで入力

-vm
plugins/org.eclipse.justj.openjdk.hotspot.jre.full.win32.x86_64_21.0.2.v연도-월
일/jre/bin
-vmargs
↓
-vm
C:\Program Files\Java\jdk-17.X.X\bin
-vmargs

-Dosgi.requiredJavaVersion=21
↓
-Dosgi.requiredJavaVersion=17

## Eclipse でHello Worldを出力してみよう

eclipse.exeをダブルクリックして開く

途中workspaceを設定するように言われる。
自分の好きなフォルダに設定するとよし。ただし、パスに日本語のフォルダ名があるのは好ましくない。

#### Project作成
左の空いてるところに右クリックしてNew＞JavaProjectを選択
ProjectName:Practice

下記を参考に指定して「Finish」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3915991/47cf4b83-bafb-8102-92c0-479b47a4e445.png)

#### Class作成
Practice＞srcを右クロック「Class」を選択

package名：practice
class名：HelloWorld

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3915991/31c7558b-a36f-201d-1b3d-3c3e021154f1.png)

ほとんどのプロジェクトでClass名は大文字から始まることが多いです。

#### HelloWorld出力コード作成
public static void main(String[] args) {　で改行して
　syso　を入れてCtrl＋spaceを押してみましょう。

 System.out.println();　とコードが自動的に完成されます。

 ここに

  System.out.println("Hello World!!!!");

と書いてみてファイルを「Ctrl＋s」で保存しましょう。

#### コードを実行する。

HelloWorld.javaのあるWindowの空いてるところを右クリックして
Run As>Java Applicationをクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3915991/54e5b856-46bf-5d2b-bbae-962c4e7e023a.png)

下記のようにConsoleに「Hello World！！！！」が出たら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3915991/45ff520e-4062-40b9-66b2-b4cd8f921a4b.png)
【D3.js】(d, i) => x(i) や d => y(d)ってなに？

`(d, i) => x(i)` や `d => y(d)` は、D3.jsでよく使われる**アロー関数**を使ったコールバック関数です。これらは、データを基にした操作を行うために使われ、**各データポイントに対して、どのようにプロパティ（位置やサイズなど）を計算するか**を指定します。

### 基本的な仕組み

#### `(d, i) => x(i)` の仕組み
- **`d`** は、データセットの中の **各データポイント**（この場合、具体的な数値）です。
- **`i`** は、 **各データポイントのインデックス（配列内の位置）** を指します。

この関数は、各データに対応する要素の**X座標**を決定するために使われます。関数の返り値として `x(i)` を返すので、`i` （データのインデックス）を `x` スケールに入力し、それに基づいて X座標が決まります。

#### `d => y(d)` の仕組み
- **`d`** は、同じく **各データポイント** です（データの具体的な値、例: 10, 20, 30など）。

`d => y(d)` は、データの値に基づいて**Y座標**を設定するための関数です。ここでは、`d`（データの値）を `y` スケールに入力し、その値に対応するY座標が決まります。

### 具体的な例

```javascript
const data = [10, 20, 30, 40];  // データセット
```

このデータセットに基づいて、棒グラフのX座標とY座標を計算してみましょう。

#### 1. `x(i)` の具体例
```javascript
const x = d3.scaleBand()           // X軸のバンドスケール
    .domain(d3.range(data.length)) // データの数に応じた範囲（0, 1, 2, 3）
    .range([margin.left, width - margin.right])
    .padding(0.1);  // 棒同士の間隔を設定
```

この場合、`x(i)` は、**データのインデックスに基づいて棒グラフのX座標を設定**します。たとえば、データが `[10, 20, 30, 40]` である場合、インデックスは `[0, 1, 2, 3]` です。

- `x(0)` は最初の棒（データ10）を配置するX座標を返します。
- `x(1)` は次の棒（データ20）のX座標を返します。

つまり、`(d, i) => x(i)` は、`i` というインデックスに基づいて、それぞれの棒のX座標を決定するための関数です。

#### 2. `y(d)` の具体例
```javascript
const y = d3.scaleLinear()         // Y軸の線形スケール
    .domain([0, d3.max(data)])     // データの範囲（0からデータの最大値まで）
    .range([height - margin.bottom, margin.top]);
```

この場合、`y(d)` は、**データの値に基づいてY座標を設定**します。例えば、データが `[10, 20, 30, 40]` である場合、`y` スケールは次のように動作します：

- `y(10)` はデータ値10に対するY座標を返します。
- `y(20)` はデータ値20に対するY座標を返します。

なお、Y座標はスクリーンの座標系が上から下に増えるため、`y(0)` がグラフの一番下を示し、`y(d)` は `d` が大きくなるほどY座標が上に移動するように設定されています（`range()` の逆方向設定による）。

#### 実際のコードでの使用例

```javascript
svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => x(i))  // インデックス i に基づいて棒のX座標を設定
    .attr("y", d => y(d))       // データ d に基づいて棒のY座標を設定
    .attr("height", d => y(0) - y(d))  // データに基づいて棒の高さを設定
    .attr("width", x.bandwidth())     // 棒の幅をバンド幅に基づいて設定
    .attr("fill", "steelblue");       // 棒の色を設定
```

- **`attr("x", (d, i) => x(i))`** は、データのインデックス `i` を `x` スケールに入力し、その値を棒のX座標として使います。`i` が 0, 1, 2, 3 と順番にスケールに適用され、棒が左から右に配置されます。
- **`attr("y", d => y(d))`** は、データの値 `d` を `y` スケールに入力し、その値を棒のY座標として使います。`d` が大きいほどY座標が上に上がります。
- **`attr("height", d => y(0) - y(d))`** は、棒の高さを `y(0)` から `y(d)` までの差分として設定します。これにより、データの値に応じた高さの棒が描画されます。

### まとめ
- **`(d, i) => x(i)`** は、データのインデックス `i` を `x` スケールに渡し、各棒のX座標を決定します。
- **`d => y(d)`** は、データの値 `d` を `y` スケールに渡し、各棒のY座標を決定します。

これらは、データの値やインデックスに基づいてグラフの各要素を適切な位置に配置するための関数です。
template要素を使ってみる

:::note

## 概要
- `<template>`要素は、ユーザーからは見えないHTMLコンテンツ（ドキュメントフラグメン）を保持します
- `<template>`要素は、何度も使いたいHTMLコードがある場合に使われます
- Jsで要素を生成するのみの処理とコード量を比較しましたが大差なかったのでどんな時に有効なのかまた調査します
:::


# 背景 🖼️
業務で`<template>`（テンプレート）要素がpopoverに使われていたので調べてみます。

https://www.w3schools.com/tags/tag_template.asp

# `<template>` テンプレート要素とは 💡

`<template>`要素は、ユーザーからは見えないHTMLコンテンツ（ドキュメントフラグメン）を保持します。
`<template>`要素内のコンテンツは、後でJavaScriptでレンダリングすることができます。
`<template>`要素は、何度も使いたいHTMLコードがある場合に使われます。

:::note
[宣言的シャドウ DOM](https://developer.mozilla.org/ja/docs/Web/HTML/Element/template#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6_dom)の役割もあるのですが、今回は触れません。
:::

# `<template>`要素を使ってフラグメント内の要素を使い回す 🕵️

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="QWeMVYE" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/QWeMVYE">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# テンプレート文字列を使って文字列から要素を生成する 🐳

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="KKOvxja" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/KKOvxja">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

# 最後に
- `<template>`要素を使ってみましたが、劇的にJavaScriptのコード量が減っている印象は受けませんでした
- 使いどきについてはまた調べたいと思います

# 参考 ✨

https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

https://qiita.com/saka212/items/ac77e778b7e323749e61

https://zenn.dev/yurukei20/articles/209109e0178ea1

https://catnose.me/learning/html/template

https://qiita.com/amamamaou/items/55225b3873b098b9b2bd

https://www.w3schools.com/tags/tag_template.asp

https://www.geeksforgeeks.org/html-template-tag/

https://dev.to/arafat4693/html-template-tag-explained-3859
【JavaScript】JavaScriptのErrorについて

# はじめに
JavaScriptの`Error`の使い方がよくわからず、エラー解決に手間取ったので、この記事ではその経験を共有します。

:::note warn
警告
この記事は個人的なアウトプットのため、誤った情報が含まれている可能性があります。間違いがありましたら、ご指摘をお願いいたします
:::

# Errorについて
>Error オブジェクトは、実行時エラーが発生した時に発生します。 Error オブジェクトは、ユーザー定義の例外の基底オブジェクトとして使用することもできます。

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

JavaScriptには、Errorという、エラーが発生した際に生成される基本的なオブジェクトがデフォルトで用意されています。

## 基底オブジェクトって？
基底オブジェクト（基底クラス）とは、オブジェクト指向のプログラミングにおける***設計図***のようなものです。他のオブジェクトが***継承***する元になるオブジェクトです。イメージとしては、車の設計図が基底オブジェクトにあたります。

https://26gram.com/what-is-object-oriented

## 継承って？
基底オブジェクトを元に新しいオブジェクトを作成することを***継承***と言います。例えば、車の設計図から赤い車を作るイメージです

## Errorではどうなっているのか
JavaScriptの`Error`オブジェクトは、前述の通り基底オブジェクトとして機能します。これを継承して、独自の`Error`オブジェクトを作成することが可能です。

# つまづいたところ
Supabaseを使ってデータを登録する処理を作成した際、エラーに悩まされました。

```react
  const { data, error } = await supabase
    .from("users")
    .select(
      `*, user_skill!user_skill_user_id_fkey(skill_id, skills!user_skill_skill_id_fkey(id, name))`
    );

  if (error) {
    return new Error("Error fetching users");
  }
```
リレーション設定をしたテーブルにデータを追加したかったのですが、外部キーの設定が原因でエラーが発生しました。しかし、表示されるエラーは`Error fetching users`というメッセージのみで、詳細な原因がわかりませんでした。

問題は、`Error`オブジェクトが生成された後に`new Error`で継承し、独自のエラーメッセージを作成していた点です。

```react
  const { data, error } = await supabase
    .from("users")
    .select(
      `*, user_skill!user_skill_user_id_fkey(skill_id, skills!user_skill_skill_id_fkey(id, name))`
    );

  if (error) {
    console.log("Error fetching data with user_skill:", error);
    return [];
  } else {
    console.log("Fetched data with user_skill:", data);
  }
```
上記のようにnew Errorを削除し、errorオブジェクトをそのままconsoleに出力するように変更しました。すると、Supabase側から詳細なエラーメッセージが出力されました。

```
"Try changing 'skills' to one of the following: 'skills!user_skill_skill_id_fkey', 'skills!user_skill_skill_id_fkey1', 'skills!user_skill_skill_id_fkey10', 'skills!user_skill_skill_id_fkey11', 'skills!user_skill_skill_id_fkey12', 'skills!user_skill_skill_id_fkey2', 'skills!user_skill_skill_id_fkey3', 'skills!user_skill_skill_id_fkey4', 'skills!user_skill_skill_id_fkey5', 'skills!user_skill_skill_id_fkey6', 'skills!user_skill_skill_id_fkey7', 'skills!user_skill_skill_id_fkey8', 'skills!user_skill_skill_id_fkey9'. Find the desired relationship in the 'details' key."
```
外部キーの設定に問題があったことが判明しました。

# 終わりに
このように、エラーハンドリングでは独自のエラーメッセージを作るのではなく、提供される`error`オブジェクトを適切に利用することが重要だと感じました。今後も、エラーの原因をしっかり理解して対応していきたいです。

# 参考

https://wa3.i-3-i.info/word17676.html

https://26gram.com/what-is-object-oriented

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error
ABC376Eを解いた【優先度付きキュー】


筆者はレート700前後の茶色コーダ

ABC376当日にACできなかったE問題を解いていく

https://atcoder.jp/contests/abc376/tasks/abc376_e

# 実装コード

A,B各要素をタプルにしておき、Aの昇順でソートする

このとき、Aの最大値は最低でもK番目以上が確定なので
そこから全探索すればいいようだ、

Bの総和の最小値は優先度付きキューで最大値を取りせるようにして現在のBと入れ替えればOK

```python:main.py
import sys
import heapq
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rI1(): return (int(sys.stdin.readline().rstrip())-1)
def rLI1(): return list(map(lambda a:int(a)-1,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

class Maxheapq:
    def __init__(self):
        self.q = []
    def push(self, v):
        heapq.heappush(self.q, -v)
        return v
    def pop(self):
        return -heapq.heappop(self.q)
    def get(self):
        return self.q[0] * -1
    def values(self):
        for _q in self.q:
            yield -_q

def main():
    T = rI()
    
    for _ in range(T):
        N, K = rLI()
        A = rLI()
        B = rLI()
        L = []
        q = Maxheapq()
        for a,b in zip(A,B):
            L.append((a,b))
        L.sort()
        s = sum(b for _,b in L[:K-1] if q.push(b))
        ans = float('inf')
        # err(N,K,L)
        # err(s,L[:K-1])
        for i in range(K-1,N):
            a,b = L[i]
            # err(a,b,s+b,a*(s+b))
            # err(list(q.values()))
            ans = min(ans,a*(s+b))
            q.push(b)
            s += b
            s -= q.pop()
        print(ans)
        
if __name__ == '__main__':
    main()

```

# まとめ

ABC376Eを解いた
Aの最大値はソート
Bの総和は優先度付きキューで管理して解いた

振り返りでも触れたが、
当日はAではなくBの昇順でソートしていた

最大値を確定させるという視点ではAのソートしたほうが確かに有効

そこから残りを全探索すればいいという発想と
総和の計算で優先度付きキューを使うという発想が難しかった

自分の地力だとE問題やはり一捻り二捻り考える必要があると改めて認識
【D3.js】なぜ.append("rect")の前に.enter()が必要なのか？

**結論：`enter()` は、まだSVG内に存在しない要素を作成するためのメソッドであり、SVG内に`rect`要素が追加されていなかったら、最初に追加するときは`enter()`が必要になるから。**


以下、ChatGPTの解答メモ

`enter()` が必要な理由は、**新しいデータに基づいて要素を作成するため**です。D3.jsのデータ結合の仕組みでは、データとDOM要素を紐づける際に、既に存在する要素とデータの数が一致しない場合があります。特に、まだ要素が存在しない場合には `enter()` が重要な役割を果たします。

### `enter()` の役割と必要性

#### 1. データの結合
まず、D3.jsは以下の3つのグループにデータを分けます：
- **既存の要素に対応するデータ（update selection）**: 既にある要素に対応するデータ。
- **新しい要素を作成する必要があるデータ（enter selection）**: 要素が存在せず、新しく作成しなければならないデータ。
- **不要な要素（exit selection）**: 対応するデータがない要素（削除されるべき）。

`svg.selectAll("rect")` は最初、空の選択状態（まだ `rect` 要素が存在しない）なので、紐づけたデータに対応する要素が足りません。このようなときに `enter()` を使って、**データに対して新しい要素を追加**します。

#### 2. `append()` だけではダメな理由
`append("rect")` は、既存の要素に対して新しい `rect` を追加する動作ですが、**何もない状態では自動的に要素が増えるわけではありません**。D3.jsは、データの数に応じて必要な数だけ要素を追加しなければなりません。

`enter()` がないと、以下の問題が発生します：
- SVG内に `rect` 要素が最初から存在しない場合、何も追加されない。
- データ数と要素数が一致しないまま処理が進む。

そのため、データに基づいて新しい `rect` 要素を追加するためには、`enter()` が必要です。

### 具体的な流れ

1. **`selectAll("rect")`**: SVG内の `rect` 要素を選択（この時点では存在しないので空の選択）。
2. **`data(data)`**: データを選択した要素に結びつける。もし `rect` 要素が存在していれば、それにデータが割り当てられますが、最初は要素がないため、全データが新規作成される必要がある。
3. **`enter()`**: データの数に対応して、必要な数だけ `rect` 要素を新たに作成する。
4. **`append("rect")`**: 作成した新しい `rect` 要素をSVGに追加。

### まとめ
`enter()` は、**データに対応する新しい要素を作成するためのステップ**です。これがなければ、データの数に応じて要素が増えません。`enter()` を使用することで、データの数に合った新しい要素を生成し、グラフやビジュアライゼーションを正しく描画することが可能になります。
汎用プリプロセッサm4を使う。 Rustでの使用例。


汎用プリプロセッサm4を使ってみます。

まず、インストール。ここでは、試験環境はArchLinux。

```
sudo pacman -S m4
```

Rustでの、popの記述が面倒だったので、popを処理します。

以下のスクリプトを書きました。

```popi32.m4
define(`popi32',`let $1:i32=match $2.`pop'() { Some(value)=>value,None=>1 }')
define(`len',``len()'')dnl len()マクロを文字リテラルlen()に置き換える
```

dnl以降はコメントです。Rustのlenが、m4のlenと被るので。

m4のマクロをクォートする処理はもっとベターなものがあると思いますが。

##### Rustのメインスクリプト。

エラトステネスのふるいで素数を発生するスクリプトです。

```rust:sieve.m4
include(`popi32.m4')

use std::env;
fn main() {
    let args: Vec<String> = env::args().collect();
    let n=&args[1];
    let n:i32=n.parse().unwrap();
    let f:Vec <i32>=sieve(n);
    let l:i32=f.len() as i32;
    println! ("{:?} : {:?} ",l,f);
}

fn sieve(n:i32)->Vec<i32> {
  let mut tab:Vec<i32>=(2..=n).rev().collect();
  let mut l:Vec<i32>=vec![];
  while !tab.is_empty() {
    popi32(v,tab);
    l.push(v);
    tab.retain(|&x| x%v !=0);
    }
  l
}
```

##### プリプロセッサ処理&コンパイル

```
$ m4 sieve.m4>sieve.rs
$ rustc sieve.rs
```

##### 実行

```
$ ./sieve 100
```

動作しました。

一般アセンブラはオブジェクトファイル生成は別にして、m4で書ける。
コンパイラもm4で書ける。
ネットに突然繋がらなくなった。

# 環境
ソフトバンク光
ONU → 安い無線LANルーター(ELECOM) → Mac, iPhone....

# 背景
平日の夕方５時ぐらいに突然発生。

# やったこと
①ルーターとONUの再起動
ダメ。
②LANケーブル変えてみる
ダメ。
③ONU抜き差し、表示確認
緑色のランプが４つとも点灯
問題なさそう
④ONU直差し
MacとONUをランケーブル直差しして、PPPoEの設定ポチポチ。
**繋がった。**

てことは、ルーターの設定？
chatGPTに聞いてみた。

:::note info
ルーターのPPPoE設定に問題がある:
PPPoEの設定が正しく行われていないか、プロバイダーの認証情報（ユーザー名とパスワード）が誤っている可能性もあります。ONU直差しでうまくいくので、ルーターのPPPoE設定を見直すと良いでしょう。
:::

⑤ルーターのWAN設定
**設定を入れ直したら繋がった。**

# 原因
chatGPTによる回答

:::note info
突然発生した理由として考えられる原因はいくつかあります。

プロバイダー側の設定変更やメンテナンス:
プロバイダーがネットワークのメンテナンスや設定変更を行ったことで、既存のPPPoE設定が無効になった可能性があります。特に大きなアップデートやプロバイダー側の認証システムの変更があった場合、再設定が必要になることがあります。
ルーターのファームウェア自動アップデート:
ルーターが自動でファームウェアを更新した場合、その影響でPPPoE設定がリセットされたり、変更が加わることがあります。アップデート後に設定が初期化されることがあるため、その場合も再設定が必要になります。
電圧変動や一時的な通信エラー:
突然の停電や電圧変動が原因で、ルーターの設定が一部破損したり、リブートされた際に設定が消失することがあります。また、通信の一時的なエラーがPPPoEの認証に影響を及ぼす場合もあります。
PPPoEセッションの期限切れ:
プロバイダーによっては、PPPoEセッションが定期的にリセットされることがあります。その際に新しいセッションの再確立が必要になり、設定が正しくないと接続できない場合があります。
今回の問題は偶発的なものかもしれませんが、プロバイダーの設定変更やルーターのアップデートが絡んでいる可能性が高いです。
:::
VueFes2024に参加！

# 参加したきっかけ

開催2週間くらい前にChromeからオススメされたCodeZineの記事からVueFesを知りました。

https://codezine.jp/article/detail/20315

8000円と意外と高い値段に最初は気後れしたものの、ITのイベントに憧れがあったのもあり参加を決意。参加を決意して8000円払った後は、8000円分の期待をもってワクワクしながら開催を待ちました。

# 印象が残ったセッション
参加したセッションのうち印象に残っているセッションの感想をまとめます。

## オープニング

オープニングのカウントダウンの映像と音楽がカッコよくて、クラップしたくなったけど周りがそういう雰囲気じゃなかったので心の中で踊ってました。

こういうITのイベントに参加する事自体が初めてで緊張している部分がありましたが、そんな緊張は気にしなくてもいいだよってくらい緊張している英語での挨拶に私の緊張は和らぎました。


## Vue.js, Nuxtの機能を使い、大量のコピペコードをリファクタリングする

https://speakerdeck.com/igayamaguchi/vue-dot-js-nuxtnoji-neng-woshi-i-da-liang-nokopipekodoworihuakutaringusuru

自社プロダクトで重複コードが20％ある問題に対しての取り組みの話。コピペコードが増えてしまった原因として、デザインツールのモックから実装を作っていたことについて、確かにありえそう。。。と。心に留めておこう。

あと、CompositionApiでの共通化でのリファクタ。やっぱ、Vue2からVue3にバージョン上げるのは大変だけど、対応する時の選択肢を増やすのは世のため人のためになるのかな。と思う。

大量のコピペではないけど、一つのコンポーネントが肥大化してる課題を持っていたので発表終わりにいがにんさんに相談しにいきました。イベントの仕組みとして終わった後充電スペースでの時間をとっていただけていたので話かけやすかったです（緊張しました）。設計についての自分の考えの相談やいがにんさんの考えも聞けて相談しにいけてよかったです。

## Vue3の一歩踏み込んだパフォーマンスチューニング 2024

https://speakerdeck.com/hal_spidernight/vue3no-bu-ta-miip-ndapahuomansutiyuningu2024

Vue3の経験が個人でし触った程度だったので、どのようなことをするかイメージが沸かず、興味をひき拝聴しました。

取り組んだ課題が画面表示に時間がかかる、原因が大量のデータをリアクティブに表示すること。Vueを使うようになってリアクティブって便利〜っとしか考えていなかったので、規模によってそういう問題がでてくるのか。と勉強になりました。

解決方法のTipsは改めて内容を確認するのとすぐ参照できるようにしよう。

## Vue.jsコミュニティへようこそ！

最後、Vue.jsコミュニティ。最近、エンジニアとしてより成長するためには何か外のコミュニティにも目を向けたいなと課題を感じていたので、自分にはない考え方だったり行動だったりにいい刺激を受けました。特に刺激を受けたのが、コントリビュートの話でした。「思い出にするのもいいけど口から吐いていただきたい」という言葉は、その通りだよな。と。コミュニティの活性のためには的な話の流れでの言葉でした（はず）が、自分の中で完結していてもつまらないし成長もないなと。まず、今回のレポでコントリビュートの一歩にしたい思います。

# おわりに

刺激が多く楽しかったです。それはそれとして、頭の中で”つまりこういうこと？”だったりスポンサーブースでのクイズだったりで疲れました。ここでの刺激がこれで終わらないよう、自分の出来る事とやりたい事を考えようと思います。

あと、抽選のecho spotが当たってラッキーでした。
[初学者用]　Google Chromeの有用コマンド一覧　　　　　　

# はじめに
今回は、**Google Chrome**で使えるコマンド一覧を紹介していきます。いつもはMicrosoft Edgeなんですが、分け合って使うことになったので、自分で覚えるためにも**記録**として執筆しておきます。
**※Windows用です**

# 本題
とりあえず、自分が見るようなので、随時追加していきます。
慣れてきたら、見やすいように書き換えますのでお待ちを。
**Ctrl + f** 　　：ページ内検索
**Ctrl + r** 　　：ページ再読み込み　**リロード？**
**Ctrl + [+/-]** ：拡大/縮小
**Ctrl + t** 　　：新規タブを開く　  **タブ？**
**Ctrl + n** 　　：新規ウィンドウを開く　**~~何でwじゃないんだよ~~** 
**Ctrl + n + Shift** ：シークレットウィンドウを開く
**Ctrl + w** 　　　 ：現在のタブを閉じる
**Ctrl + w + Shift** ：現在のウィンドウを閉じる
**Ctrl + d** 　　　 ：ブックマークの追加
**Alt + [右/左]**　：ページを一つ進める、戻す
**Ctrl + Tab + (Shift)**　：１つ右（左）のタブに切り替え

### 重要
**Windows + Printscreen** ：画面全体のスクショ 
**※Fnキーを必ずオフにすること（電気が消えている状態）**

**Ctrl + Shift + i**　：検証ツール

# さいごに
次回は、CLIについてのコマンド関係、書いていきたいと思います。

ばいならー