OmniAICreator/Qiita-1.07M huggingface dataset:
Reactを基本からまとめてみた【ag-Grid】

## ag-Gridとは？

業務システムなどに向いているリッチなグリッドライブラリのこと。
一部機能は課金対象ですが、チェックボックスによる絞り込み、ソート、カラムの入れ替えなどの基本的な実装は無課金で出来る。

公式：[ag-grid](https://www.ag-grid.com/)

## 環境の準備
①ターミナルでreactアプリケーションを作成する。

```
npx create-react-app <プロジェクト名>
cd <プロジェクト名>
npm start
```
② 必要なパッケージをインストールする。

```
npm i ag-grid-community ag-grid-react
```
package.jsonのバージョンが同じであることを確認する。

```package.json
"ag-grid-community": "^29.1.0",
"ag-grid-react": "^29.1.0",
```

```App.js
import './App.css';

import { AgGridReact } from 'ag-grid-react';
import React, {
  useState,
  useEffect,
  useMemo,
  useCallback,
  useRef,
} from 'react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function App() {
  const gridRef = useRef();
  //データ用の配列と列定義の配列を作成する
  const [rowData, setRowData] = useState([
    { make: 'Ford', model: 'Focus', price: 40000 },
    { make: 'Toyota', model: 'Celica', price: 45000 },
    { make: 'BMW', model: '4 series', price: 50000 },
  ]);
  // 列情報を定義する
  const [columnDefs, setColumnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ]);

  const defaultColDef = useMemo(
    () => ({
      sortable: true,
      filter: true,
    }),
    []
  );

  const cellClickedListener = useCallback((e) => {
    console.log('cellClicked', e);
  });

  useEffect(() => {
    fetch(
      'https://www.ag-grid.com/example-assets/row-data.js'
        .then((result) => result.json())
        .then((rowData) => setRowData(rowData))
    );
  }, []);

  const pushMeClicked = useCallback((e) => {
    gridRef.current.api.deselectAll();
  });

  return (
    // divタグでcssのクラスとテーマを設定する
    <div className='ag-theme-alpine' style={{ height: 500 }}>
      <button onClick={pushMeClicked}>Push Me</button>
      {/* Grid行にデータと列定義のプロパティに設定する */}
      <AgGridReact
        ref={gridRef}
        onCellClicked={cellClickedListener}
        rowData={rowData}
        columnDefs={columnDefs}
        rowSelection='multiple'
        animateRows={true}
        defaultColDef={defaultColDef}
      />
    </div>
  );
}

export default App;

```




## 参考サイト
[Quickstart Tutorial for the React Data Grid from AG Grid](https://www.youtube.com/watch?v=Pr__B6HM_s4)
[ag-gridの使い方](https://qiita.com/t-iguchi/items/a26502f069ea95cbf215)
VSCode上でmatplotlibのimshow()で画像が表示できない時に確認したポイント

# 前提 
Windows 10において、VSCodeでJupyter Notebookを開いてデータを分析するケースを想定しています。
Python：3.10.9 (pyenv)
仮想環境：poetry

# 発生した現象
下記のように`<Figure size 640x480 with 1 Axes>`と表示され、画像が表示されないという現象です。
![2023-03-03 151610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219268/6326a1ff-69ef-e576-bbd3-2b66bae77e6b.png)

# 試したこと
1.こちらの記事を参考に、`%maplotlib inline`を追加しましたが、解消せずでした。
https://qiita.com/umikazeken/items/57f82f69ed37a1d65110

2.こちらの２つの記事を参考に、`matplotlib.use('TkAgg')`を追加してみましたが、別ウィンドウが表示されたままPythonカーネルがフリーズする現象が起きてしまい、解消しませんでした。
https://qiita.com/bakanaouji/items/cac72da8d0a478766f0e
https://matplotlib.org/stable/users/explain/backends.html

3.次に問題の切り分けのために、VSCodeではなくJupyterLab上で当該ノートブックを開いてみたところ、画像は問題無く表示されていました。

# 解決方法
上記3.での切り分けの結果、VSCodeが怪しいということが分かりました。
色々と確認した結果、出力セルの左にある(1)「...」から(2)「プレゼンテーションの変更」を選択します。
![presentation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219268/a6ea3250-109e-2b42-ce95-343b11d89991.png)

そうすると、下記のようなパレットがVSCodeの上部に表示されます。ここで、`image/png`のいずれかを選択することで、無事画像が表示されることを確認しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219268/26cb43dd-a09e-eddf-61c1-1c2a382f57fe.png)

# 備考
どのようなきっかけで切り替わったのかは分かりませんが、ここ最近気になっていたので解決してすっきりしました。(何度か、仮想環境を作り直したりしていました・・・)
同じ現象に悩まされた場合は、上記を確認してみてください。それでは。
【VSCode】アロー関数を素早く書きたい！

## 内容
VSCodeではアロー関数のショートカットがあるので紹介

普段TypeScriptで記述してると関数を書くのに
```typescript
() => {}
```
これ書きますよね？？

私だけかもしれないですが、括弧、矢印、中括弧という風に書いていくとすごく間違えたり、なぜか閉じ括弧がなかったりします。

そこで、ショートカットを使うことでこの問題が解消されたのでご紹介です。

VSCodeを使っておられる方なら基本的には
```typescript
anfn
```
と打つと
```typescript
() => {}
```
が表示されると思います。

`anfn`と打つのもめんどくさいよ！！という方はこちらの方がスニペットを設定する方法を解説してくださっています。
https://knym.net/my-vscode-snippet/

私はanfnと打つのを慣れてからこの記事を見つけたので、これから使う方は楽な方を選びましょう！
paizaラーニング レベルアップ問題集 DPメニュー JavaScript 【部分列】最長減少部分列

【部分列】最長減少部分列 (paizaランク B 相当)

https://paiza.jp/works/mondai/dp_primer/dp_primer_lis_boss

# 解答例
```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");

const [n] = lines[0].split(" ").map(Number);
const a = lines.slice(0).map(Number);//木iとa[i]をそろえた
a[0] = 0;//木0は0としておく。

const dp = Array(n + 1).fill(0);//dp[i]は最後が木 i であるような増加部分列のうち最長であるものの長さ。これを登録していく。nまでなので長さn+1のArray(n+1)にする。

dp[1] = 1;//木iのdp[1]は1
for (let i = 2; i <= n; i++) { //木2から木nまで見ていく
  //木iに注目する
  dp[i] = 1; // 木 i のみからなる部分列の長さ
  //木iと、より小さい木jの高さを比較していく
  for (let j = 1; j <= i - 1; j++) { //a[j]はa[i]より小さい添字の木
    if (a[j] > a[i]) { //もし木jが木iより大きかったら
      //dp[i]は、最後が木i であるような増加部分列のうち最長であるものの長さ
      dp[i] = Math.max(dp[i], dp[j] + 1); // 最後が木 j であるような増加部分列の末尾に木 i をくっつける → dp[j] + 1
      //Math.max(dp[i], dp[j] + 1)の dp[i]は、最後が木iであるような増加部分列の今まで更新してきた中で一番長い長さ
      //dp[j] + 1は最後が木 j であるような増加部分列の末尾に木 i をくっつけた長さ
      //dp[j]は木jによって変わり、常にdp[j]+1>dp[i]ではないので、dp[i]と大きさを比較する必要があるからMath.max()
    }
  }
}
console.log(dp.reduce((a, b) => Math.max(a, b)));
```
paizaラーニング レベルアップ問題集 DPメニュー JavaScript 最長部分増加列

最長部分増加列 (paizaランク B 相当)


https://paiza.jp/works/mondai/dp_primer/dp_primer_lis_step0

# 解答例

```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");

const [n] = lines[0].split(" ").map(Number);
const a = lines.slice(0).map(Number);//木iとa[i]をそろえた
a[0] = 0;//木0は0としておく。

const dp = Array(n + 1).fill(0);//dp[i]は最後が木 i であるような増加部分列のうち最長であるものの長さ。これを登録していく。nまでなので長さn+1のArray(n+1)にする。

dp[1] = 1;//木iのdp[1]は1
for (let i = 2; i <= n; i++) { //木2から木nまで見ていく
  //木iに注目する
  dp[i] = 1; // 木 i のみからなる部分列の長さ。もし木iより小さい全ての木が大きかったら、dp[i]=1なので、これを初期値とすル。
  //木iと、より小さい木jの高さを比較していく
  for (let j = 1; j <= i - 1; j++) { //jはiより小さい木の添字
    if (a[j] < a[i]) { //もし木jが木iより小さかったら
      //dp[i]は、最後が木i であるような増加部分列のうち最長であるものの長さ
      dp[i] = Math.max(dp[i], dp[j] + 1); // 最後が木 j であるような増加部分列の末尾に木 i をくっつける → dp[j] + 1
      //Math.max(dp[i], dp[j] + 1)の dp[i]は、最後が木iであるような増加部分列の今まで更新してきた中で一番長い長さ
      //dp[j] + 1は最後が木 j であるような増加部分列の末尾に木 i をくっつけた長さ
      //dp[j]は木jによって変わり、常にdp[j]+1>dp[i]ではないので、dp[i]と大きさを比較する必要があるからMath.max()
    }
  }
}
console.log(dp.reduce((a, b) => Math.max(a, b)));
```
React(TypeScript) + SCSS + Storybookの構成でアプリを作成してみた【グリッドコンポーネント】

チュートリアル：[Strorybook](https://storybook.js.org/docs/react/get-started/introduction)

## プロジェクトを作成する
```
npx create-react-app <プロジェクト名> --template typescript
cd <プロジェクト名>
npm start
```
## 必要なパッケージをインストールする
[ESLintとPrettierとを基本からまとめてみた【React＋TypeScriptのアプリにESLintとPrettierを導入】](https://qiita.com/kanfutrooper/items/afd44e1a339ff6963ebf)

```
yarn add node-sass classnames @types/classnames
```

srcに components/Boxファイル と Box.tsx Box.module.scssを作成する


```src/components/Box.tsx
import { FunctionComponent, ReactNode } from 'react';
import styles from './Box.module.scss';

const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
  return <div className={styles.Box}>{children}</div>;
};

export default Box;

```
```src/components/Box.module.scss
.Box {
  padding: 16px;
  border-radius: 4px;
  text-align: center;
  color: white;
  font-weight: 700;
  background-color: aqua;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}
```
Gridファイル と Grid.tsx Grid.module.scssを作成する
```Grid.tsx
import styles from './Grid.module.scss';
import cn from 'classnames';

const Grid: FunctionComponent<{
  children: ReactNode;
  container?: boolean;
  item?: boolean;
}> = ({ children, container, item }) => {
  const className = cn({
    [styles.Grid_container]: container,
    [styles.Grid_item]: item,
  });
  return <div className={className}>{children}</div>;
};

export default Grid;
```

```Grid.module.scss
.Grid {
  &_container {
    display: flex;
  }
  &_item {
    display: block;
  }
}
```
```
import React from 'react';
import Box from './components/Box/Box';
import Grid from './components/Grid';

function App() {
  return (
    <div className='App'>
      <Grid container>
        <Grid item>
          <Box>Box1</Box>
        </Grid>
      </Grid>
    </div>
  );
}

export default App;
```




## 参考サイト
[ゼロから始めるStorybook入門(React編)](https://reffect.co.jp/html/storybook)
[完全なチュートリアル - React + TypeScript + Storybook + SCSS を使用したグリッド コンポーネント](https://www.youtube.com/watch?v=DgahQ6W5shQ)
Go: gorm で PostgreSQL のバージョンを表示

## プログラム

フォルダー構造

```text
$ tree -a
.
├── .env
├── config_postgres.go
└── gorm_pg_version.go
```

```go:gorm_pg_version.go
// ----------------------------------------------------------------
//
//	gorm_pg_version.go
//
//					Mar/03/2023
//
// ----------------------------------------------------------------
package main

import (
	"fmt"
	"os"
	"gorm.io/gorm"
	"gorm.io/driver/postgres"
)

// ----------------------------------------------------------------
func main() {
	fmt.Fprintln(os.Stderr,"*** 開始 ***")

	host,user,password,data_base := config_postgres_proc()

dsn := "host=" + host + " user=" + user + " password=" + password + " dbname=" + data_base + " port=5432 sslmode=disable TimeZone=Asia/Tokyo"

	db, err := gorm.Open(postgres.Open(dsn), &gorm.Config{})
	if err != nil {
		panic(err)
		}

	result := map[string]interface{}{}

	db.Raw("SELECT VERSION ()").Scan(&result)

	fmt.Println(result)

	fmt.Fprintln(os.Stderr,"*** 終了 ***")
}

// ----------------------------------------------------------------
```

```go:config_postgres.go
// ----------------------------------------------------------------
//
//	config_postgres.go
//
//					Mar/03/2023
//
// ----------------------------------------------------------------
package main

import (
	"os"
	"github.com/joho/godotenv"
)

// ----------------------------------------------------------------
func config_postgres_proc()(string, string, string, string) {
	err := godotenv.Load(".env")
	if err != nil {
		panic(err)
	}

	host := os.Getenv("host")
	user := os.Getenv("user")
	password := os.Getenv("password")
	data_base := os.Getenv("data_base")

	return host,user,password,data_base
}

// ----------------------------------------------------------------
```

```text:.env
host = 'localhost'
user = 'scott'
password = 'tiger123'
data_base = 'city'
```

## 実行の準備

```bash
go mod init version
go mod tidy
```

>go.mod go.sum が作成される。


## 実行結果

```text
$ go run gorm_pg_version.go config_postgres.go
*** 開始 ***
map[version:PostgreSQL 16.2 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 13.2.1 20230801, 64-bit]
*** 終了 ***
```
CP4DのWatson StudioのNotebookで接続情報を隠蔽する

CP4DのWatson StudioのNotebookでは、RDBやオブジェクトストレージへの接続コードを自動生成してくれる機能が便利です。
しかしながら、この接続コードから接続情報が見えてしまうのはセキュリティ上は望ましくないこともあります。

CP4D 4.6.1以降では接続情報（資格情報）を隠蔽する機能があります。この機能を使ってみます。

https://www.ibm.com/docs/ja/cloud-paks/cp-data/4.6.x?topic=data-connecting-sources

>4.6.1 以降 ユーザー (接続の所有者を含む) が API 呼び出しを介してマスクされていない機密資格情報を取得できないようにする場合は、 「API 呼び出しによって取得されるマスク機密資格情報」 を 「オン」 に設定します。 この設定は、接続フォーム自体には影響しません。 この設定では、使用しているサービスが Flight serviceをサポートしている必要があります。 すべてのサービスがフライトをサポートするわけではありません フライトをサポートしないサービスまたはツールに対してこの設定を有効にすると、接続は失敗します。 サポートされるサービスについては、 Flight service for access to data sources を参照してください。 フライト・サービスを使用するために、API 呼び出しを介してこの接続を参照する notebooks を更新します。

* テスト環境
    * CP4D 4.6.2


# 1.プラットフォーム接続情報で資格情報隠蔽の設定

接続情報で「ユーザーが暗号化解除された資格情報を取得できないようにする」を有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/ebb07667-e843-dad1-14a5-40f5dd61ec6a.png)

# 2. Notebookで接続コードを生成
Notebookを開き、「データ」の「接続」タブで#1で資格情報隠蔽の設定をした接続を選び、「コードに挿入」をクリックすると「pandas DataFrame」がでてきますので、これを選び、テーブルを選ぶと、下のようなFlight service経由のコードが出力されます。このコードでは接続情報は秘匿されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/1296f89e-4e12-496d-a93e-2dda58c9816a.png)

一方で、資格情報隠蔽の設定をしていない接続で「コードに挿入」をクリックすると、以下の3つの選択肢が現れます。

* pandas DataFrame
* pandas DataFrame(ibmd...
* 資格情報

このうち「pandas DataFrame」以外の選択肢の場合は接続情報が見えてしまいます。例えば「pandas DataFrame(ibmd...」を選んだ場合、ユーザー名、パスワードなどの情報を表示できてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/d3e44a16-f92b-e3fd-75ff-5e82bb55641f.png)


### 参考:ノートブックでのデータのロードおよびアクセス (Watson Studio) - IBM Documentation 

https://www.ibm.com/docs/ja/cloud-paks/cp-data/4.6.x?topic=notebooks-loading-accessing-data-in-notebook
preferredVideoStabilizationModeが効かないのだが？？？？

動画を撮影するようなコードを書くときに、手ぶれ補正をつけたくて調べていると
「ほう、`AVCaptureConnection.preferredVideoStabilizationMode`を設定すればええんやな」
ということで雑に

```swift
output.connection(with: .video)?.preferredVideoStabilizationMode = .auto
```

と設定してみたところ体感効いていなかったので

`device.activeFormat.isVideoStabilizationModeSupported(_):`で確認してみると、`.off`が返ってきた。

あれれーおかしいぞーと思いながらあれこれ調べていると

> Currently, only the 1080p30 and 1080p60 video formats support cinematic stabilization. The default value for preferredVideoStabilizationMode is AVCaptureVideoStabilizationModeOff. As on earlier products, only the 16:9 video formats support stabilization.

https://developer.apple.com/library/archive/technotes/tn2409/_index.html#//apple_ref/doc/uid/DTS40015038-CH1-CINEMATIC_VIDEO_STABILIZATION

なるほど、AVCaptureDevice.Formatの解像度とfpsによって使えたり使えなかったりするのか

ということで

```swift
let format = device.formats.filter { $0.isAnyStabilizationModeSupported }
                .max(by: { $0.formatDescription.dimensions.width < $1.formatDescription.dimensions.width })
```

で手ぶれ補正対応のformatで最も解像度が高いものを取り出して`device.activeFormat`に突っ込むと手ぶれ補正効きました。
ちなみにiPhone14 Proで選択された解像度は`3840x2160`、全然1080pじゃなかった。上のリンクの情報古いのかな。

ところで上のコードの`isAnyStabilizationSupported`はextensionで定義しているもので、中身は

```swift
private extension AVCaptureDevice.Format {
    var isAnyStabilizationModeSupported: Bool {
        return isVideoStabilizationModeSupported(.cinematicExtended) 
            || isVideoStabilizationModeSupported(.cinematic) 
            || isVideoStabilizationModeSupported(.standard)
    }
}
```

となっています。`isVideoStabilizationModeSupported(.auto)`でええやんwと思ったのですが、これだと`.off`も含まれてしまうので全てのフォーマットがtrueを返してしまうようです。

それにしても`.cinematicExtended`すごいぞ。ほぼgo proやん
Ocuprime is an excellent supplement for improving vision

Ocuprime is an exceptional supplement for promoting vision because of its anti-inflammatory properties and high concentration of natural antioxidants. It is formulated to help individuals suffering from macular degeneration, cataracts, and other serious eye conditions, promoting better sight and overall eye health.
The Ocuprime capsule contains a blend of key ingredients such as eyebright, quercetin, blueberry, and lycopene, which work together to address ocular inflammation and provide nourishment to the eyes. Ocuprime does not only support healthy vision, as reported on the official website, but also helps restore 20/20 vision after years of compromised eyesight.
https://www.ocuprimes-usa.com
【Git】任意のブランチ以外のブランチをローカルリポジトリから削除

メモとして残します。
開発や、レビューで作業ブランチをチェックアウトすることが多くなり、気がついたらgit　branchでリストを見ると、いっぱいになっていることが多いため、一括で削除する方法がないか調べたら後述の方法でできました。

# ■やり方
下記の例では**masterとカレント**ブランチ（*）以外を削除するようにします。

```zsh
git branch | grep -v "master\|*" | xargs -r git branch -D
```

# ■`master\|*`の`*`について

`master\|*`の`*`はカレントディレクトリです。
そのためカレントディレクトリも除かないとエラーとなるため、条件に追加されています。
```zsh
❯ git branch                         
  branch_hoge1
  branch_hoge2
* branch_hoge3
  branch_hoge4
  branch_hoge5
```
以上
K8s勉強

# secret
mysqlの情報をマニフェストファイルに直で書かないで

secretにエンコードで書いてそのsecretをmysqlのマニフェストファイルで参照するようにする。

手順

1keyとバリューのバリューを全てbase64でエンコード。

↓

2secretリソースをマニフェストファイルで作成。

↓

3作成したsecretをコンテナで参照できるようにmysqlのマニフェストファイルを書き直す。

参考

[https://noumenon-th.net/programming/2019/04/28/secret/](https://noumenon-th.net/programming/2019/04/28/secret/)

1

```yaml
apiVersion: apps/v1

kind: Deployment

metadata:

  name: mysql

spec:

  replicas: 1

  selector:

    matchLabels:

      app: mysql

  template:

    metadata:

      labels:

        app: mysql

    spec:

      containers:

      - name: mysql

        image: mysql:5.7  # should be 5.7 to avoid password caching error

        env:

        - name: MYSQL_ROOT_PASSWORD

          value: "P@ssw0rd"

        - name: MYSQL_DATABASE

          value: "mydb"

        - name: MYSQL_USER

          value: "user1"

        - name: MYSQL_PASSWORD

          value: "password1"

        ports:

        - containerPort: 3306

```

↑の

MYSQL_ROOT_PASSWORD というキーに対してバリューをP@ssw0rdにしたいのでコマンドで一度エンコードしてみる。

```
echo -n "P@ssw0rd" |base64
```

これで出力された値をメモしておく。

2

1でメモしたエンコードした値をもとにsecretリソースを作る。

↓マニフェストファイル

```yaml
apiVersion: v1

kind: Secret

metadata:

  name: mysql-secret

type: Opaque

data:

  MYSQL_ROOT_PASSWORD: UEBzc3cwcmQ=

  MYSQL_DATABASE: bXlkYg==

  MYSQL_USER: dXNlcjE=

  MYSQL_PASSWORD: cGFzc3dvcmQx

```

kubectl apply -f <secretのマニフェストファイル>

でリソースを作成。今回はmysql-secretという名前のsecretリソースを作成。

3

secretをコンテナから読み取るにはボリュームマウントと環境変数として渡す方法がある。

今回は環境変数として渡すようにした。

さらに、今回はキーが４つあるので一つ一つ指定して環境変数を渡すのは面倒なので

secretに書いてある環境変数を一括で渡す方法を行ってみた。

```yaml
apiVersion: apps/v1

kind: Deployment

metadata:

  name: mysql

spec:

  replicas: 1

  selector:

    matchLabels:

      app: mysql

  template:

    metadata:

      labels:

        app: mysql

    spec:

      containers:

      - name: mysql

        image: mysql:5.7  # should be 5.7 to avoid password caching error

        envFrom:

        - secretRef:

            name: mysql-secret

        ports:

        - containerPort: 3306

```

**envFromからsecretRefで参照したいsecretの名前を指定する。**

補足としてConfigMapの場合、secretRef→ConfigMapRefとなる。

「K8s完全ガイド」の7章に詳しくのっている。

secretはbase64でエンコードしているだけなので
内容を見られると誰でもデコードされる。
secretを使えばセキュリティは完璧ってわけではない。
これはK8s公式も言ってる。

参考

[https://qiita.com/oguogura/items/83d05a6b0ca6794ff527](https://qiita.com/oguogura/items/83d05a6b0ca6794ff527)
v-formのバリデーション validate()の返り値に注意

# Vuetifyのvalidate()の返り値は…
　Vuetifyのv-formには入力値に対してバリデーションを行ってくれるvalidate()があります。
大変便利で現在作成中の個人開発アプリケーションでも使用しているのですが、返り値を勘違いしているせいでなかなかの時間、ハマってしまいました。
どこかの誰かの解決になる可能性もあると思い、ここに残しておきます。

## 環境
- Vue：3.2.47
- Vuetify3.1.4

## validate()の返り値はvalid!
下記の公式を見れば一発なのですが、validate()はbolleanの型を持つ`valid`オブジェクトを返却します。
[v-form API](https://vuetifyjs.com/en/api/v-form/#exposed-validate)
要するに入力に問題が無ければtrue、そうでなければfalseを返してくれます。
私が今回ミスっていたのは __判定条件を`valid`で指定していなかった__ 点です。下記コードを見てもらえれば一目瞭然…

## ダメコード
```vuejs:NG例
<template>
  <v-form ref="hoge_valid">
    <v-text-field v-model="hoge_name" :rules="[requiredHogeName]" label="名前"></v-text-field>
  </v-form>
  
  <v-btn class="register-btn" outlined @click="submit">
    登録
  </v-btn>
</template>

<script setup>
import { ref } from 'vue';

/** 入力フォームバリデーション用定数 */
const hoge_valid = ref(false);
/** 名前フォーム入力値 */
const hoge_name = ref();

// 名前フォーム入力バリデーション
const requiredHogeName = (value) => {
  if (value) {
    return true;
  }
  return '名前を入力してください。';
}

// バリデーション通過時のアクション
const submit = async () => {
  // フォームのバリデーション通過確認
  const validResult = await hoge_valid.value.validate();
  // 条件分岐で処理を書く
  if (validResult.hoge_valid) {
    alert('バリデーション通過');
  } else {
    alert('エラー');
  }
</script>
```

## コードの説明
- `v-text-field`の`:rules`で入力必須のバリデーションを設定しています。入力値があればtrue、なければfalseが定数`hoge_valid`に設定されます。
- 次に登録ボタンを押下した時に`submit`が発火して、メソッド内の`validResult`に`hoge_valid`のバリデーション結果が入ります。(重要なのは上述したように __validate()の返り値はvalidオブジェクトです__)
- if文の条件はバリデーション通過の結果になっていますが…実際はこれでは常にelseへ分岐していってしまいます。

## どうすれば良かったのか？
`submit`内で設定した定数`validResult`には`hoge_valid`というオブジェクトは存在していません。繰り返しになってしまいますが、保持しているオブジェクトは __`valid`__ になります。そのため…
```vuejs:変更後
<script setup>
// バリデーション通過時のアクション
const submit = async () => {
// フォームのバリデーション通過確認
const validResult = await hoge_valid.value.validate();
// 条件分岐で処理を書く
if (validResult.valid) {
alert('バリデーション通過');
} else {
alert('エラー');
}
</script>
```
このように、`if (validResult.valid)`としてあげれば、バリデーション結果で条件分岐が可能になります。

## 終わりに
　しっかりと公式のvalidate()の項目を読んでおけばもっと早く解決できたと思います…
やっぱり公式ドキュメントがNo.1！
Express勉強

## メモ
expressでappを作成するうえでMVCモデルのひな型を作ってくれるツールがExpress Application Generator ツール。

```
npm install express-generator
```

パッケージをインストールしてひな型を作っていく。

```
express express-locallibrary-tutorial --view=pug
```

expressコマンドで第一引数にapp名、第二にテンプレートエンジンを指定。

テンプレートエンジンとはwebテンプレート（テンプレート言語が埋め込まれている HTML）とデータモデル（DBから取り出したデータ）から

htmlドキュメントを生み出すソフト。

これがないとdjangoだけでappサーバとして動いたりできない。

バックをapi実装するだけならばいらない、、かな

[https://pyteyon.hatenablog.com/entry/2019/08/23/135834](https://pyteyon.hatenablog.com/entry/2019/08/23/135834)

するとapp名のフォルダができてその中にいろいろな機能をもったフォルダが作成されている。

package.jsonにインストールしなければいけないパッケージ一覧が書かれているのでインストールする。

```
npm install
```

package.jsonが存在するディレクトリでコマンドを打てば、package.jsonに記述されている依存パッケージを自動でインストールしてくれる。

アプリの実行

```
 DEBUG=express-locallibrary-tutorial:*  npm start
```

node.jsはシングルスレッド。シングルスレッドとは並列処理と逆の意味で、**「逐次処理」。**

しかし並列処理できたほうが良いように思う。アクセスが多くなるとその分プロセスが生まれるApacheのように。

しかしアクセスが多くなると重くなる。C10K問題。

なので、シングルプロセスシングルスレッド。しかしそれだけでは一つの処理の間待っておかなければいけないので、効率が悪い。

そこで非同期IO。これは一つの処理を行っている裏で異なる処理を行う、そして処理が終わったら教えてもらう。

これにより、処理を同時並行で行える。nginxは非同期。

node.jsはシングルスレッドで非同期IO。

[https://knowledge.sakura.ad.jp/24148/#C10K](https://knowledge.sakura.ad.jp/24148/#C10K)

[https://tamotech.blog/2020/07/15/node-single-thread/](https://tamotech.blog/2020/07/15/node-single-thread/)
uplatex on Mac

# はじめに

M2 Macbook Airを今更ながらに手にした関係で、texを新規インストールしたのですが、色々と躓いたので自分用メモとして今回行なった作業をここに記録します。
VS Codeでコンパイルする際にずっとエラーが出ていたのですが、uplatex、だと追加で設定が必要だったようです。

参考にしたのは、[こちら](https://qiita.com/t_kemmochi/items/dd38bbf2b823c770d1ec)のページになります（内容的にも、ほぼ同じです）。

# LateXのインストール

Homebrewが入っているのであれば、以下のコマンドでインストールできます。

```zsh:with GUI Application
brew install --cask mactex
sudo tlmgr update --self --all
sudo tlmgr paper a4
```

```zsh:w/o GUI Application
brew install --cask mactex-no-gui
sudo tlmgr update --self --all
sudo tlmgr paper a4
```

LateXiTなどを使いたかったということでGUI有りでインストールしました。

次にTeXLiveのアップデートとデフォルト用紙をA4にします。   
```zsh
exec $SHELL -l
sudo tlmgr update --self --all
sudo tlmgr paper a4
```

# 基本設定
ホームディレクトリの`.latexmkrc`にuplatexの設定を書いていきます。

```zsh
$latex = 'uplatex %O %S';
$bibtex = 'upbibtex %O %B';
$dvipdf = 'dvipdfmx %O -o %D %S';
$max_repeat = 10;
```

先にも書いたようにVS Codeでコンパイルする際にエラーが出ていたのですが、
latexのコンパイルで、uplatexを指定しなかったこと、また、dviファイルのpdf変換にdvipdfmxを指定していなかったことが原因だったようです（上の設定ではこれら実行ファイルの指定を行っています）。

# VS Codeの設定
LaTeX Workshopでは、
- `tools`において、コンパイル時のコマンドを指定
- `recipe`において、toolsの組み合わせを指定
する必要があるようです。

## toolsの設定　（LaTeX Workshop）

1. VS Codeの設定画面を開く　（`Ctrl` + ` , `）
1. テキストボックスに`latex-workshop.latex.tools`と入力して`setting.json`を呼び出す。
1. `setting.json`を以下のように修正する。

```json: setting.json
    "latex-workshop.latex.tools": [
        { // ここから追記
            "name": "latexmk-uplatex",
            "command": "latexmk",
            "args": [
                "-synctex=1",
                "-interaction=nonstopmode",
                "-file-line-error",
                "-pdfdvi",
                "-outdir=%OUTDIR%",
                "%DOC%"
            ],
            "env": {}
        }, // ここまで追記
        {
            "name": "latexmk",
            "command": "latexmk",
            "args": [
```

各プレースホルダーの意味は[本家のドキュメント](https://github.com/James-Yu/LaTeX-Workshop/wiki/Compile#placeholders)を確認すると良いです。


## recipeの設定　（LaTeX Workshop)

1. 設定画面のテキストボックスに `latex-workshop.latex.recipes` と入力する。
1. `settings.json` を以下のように編集する。

```json
    "latex-workshop.latex.recipes": [
        { // ここから追記
            "name": "latexmk (uplatex)",
            "tools": [
                "latexmk-uplatex"
            ]
        }, // ここまで追記
        {
            "name": "latexmk",
```

## VS Code内でプレビューする場合の設定
VS Codeの設定画面で, latex-workshop.view.pdf.viewer を tab に設定します.
これは, 「pdfファイルをVS Code内で開く」という意味です.

ここまで終われば, あとはtexファイルを作って保存すると, 自動でコンパイルしてくれます.しかも, SyncTeX によって, 以下の操作が可能になります:

- texファイル上で Ctrl + Alt + J (Jump の J と覚える) と押すと, texファイルのカーソル位置に対応するpdfファイルの位置にジャンプする
- pdfファイル上で Ctrl を押しながらクリックすると, クリックした位置に対応するtexファイルの位置にカーソルが飛ぶ

## その他の設定
出力先をoutフォルダ以下にしたい場合は、`setting.json`に次のように`%OUTDIR`の設定を追記すると良いです。

```json:setting.json
"latex-workshop.latex.outDir": "out",
```


# まとめ
他の多くのサイトで既にまとめられていますが、自分用ということでこちらに書かせていただきました。
随時、更新していく予定でいます。
Express勉強

## メモ
```js
var express = require("express");

var app = express();

app.get(

    "/about", function (req, res) {

        res.send("hello js");

    }

);
#省略形
#app.get(
#    "/about", (req, res) => {
#        res.send("hello js");
#    }
#);

app.listen(3000);

```

expressという変数にexpressモジュール(外部のexpressファイル)をインポートしている。

appという変数にexpressというオブジェクトを呼び出してexpressアプリケーションを作成。インスタンス化。

appオブジェクトのメソッドgetを使用している。

第一引数にルート・パスを指定→127.0.0.1:3000/aboutの/aboutの部分

第二引数にパスにリクエストが飛んできたときに呼び出す関数（コールバック関数）を入れている。jsでは関数を変数に指定できる。

[https://sbfl.net/blog/2019/02/08/javascript-callback-func/](https://sbfl.net/blog/2019/02/08/javascript-callback-func/)

これでこのサーバに/aboutのパスにgetリクエストを受け取ったとき、「 hello js 」をレスポンスとして返す。

app.listenでポートをしていできる。

[https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#express_%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E8%A6%8B%E3%81%88%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F](https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#express_%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E8%A6%8B%E3%81%88%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F)
node.jsとは

# node.jsとはなんなの
node.jsは実行環境。

pythonでいったらpython.exeがpythonコードを実行するアプリケーション。

node.jsをインストールするとnode.exeができる。node.exeはjsコードを実行するアプリケーション→実行環境

[https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

npmはnode.jsのパッケージマネージャー。

node.jsでwebアプリケーションをつくるフレームワークとしてExpressがある。
Linux(ubuntu)でPATHを編集する方法

ググれば簡単に見つかるだろうと思ったのですが、関数を使ったりとかの複雑な方法ばかりだったし、少なくとも、私の環境では機能しなかったので、予想以上に苦労した。
備忘録的に記載します。

最終的には、下記サイトが参考になった。
とてもシンプル。
https://blog.s-giken.net/445.html

PATHの追加はこれ。

```
$ echo $PATH
/usr/local/bin:/usr/bin:/bin
 
$ PATH=$PATH:/home/bin
 
$ echo $PATH
/usr/local/bin:/usr/bin:/bin:/home/bin
```

PATHの上書きはこれ。　上書きすると、前のは全部消えます。
```
$ PATH=/home/bin
 
$ echo $PATH
/home/bin

```

ちなみに、上だけだと再起動すると消えます。
PATHを永続化させたいなら、~/.profileファイルに書き込む必要があります。

https://www.motokis-brain.com/article/122
https://docs.datastax.com/ja/install/6.0/install/installJdkDeb.html
技術選定　フレームワーク

# 対象者

* これからどのフレームワークを選ぼうと考えている人.  

* これからどのプログラミング言語を選ぼうか検討中の方. 

# 目次. 
①フレームワークの選び方.  
②フレームワーク比較.  
 

# ①フレームワークの選び方.  
 結論:**自分の目的に合ったフレームワークを使う。**
なぜなら自分の置かれている状況によってどのフレームワークが最適なのかは異なるので.  

例. もし自分がit業界で仕事したいと考えており、it業界の仕事ならなんでも良いという考えなら求人数の多いPHPを選択するのが良い。

# ②フレームワーク比較.  
![スクリーンショット 2023-03-03 14.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602256/e247bd5c-a574-d235-c925-d56fea7a7534.png)

参考:求人数は大手転職情報サイトdoda（2023年3月現在).  
参考:qiita記事数（2023年3月現在）

例えば. 
私の選び方で言うと.  
①学習しやすい.  
②仕事で使われている. 
この２つはどのフレームワークを使うかを決める上で大切でした.  
そこで私は最終的にRuby on Railsにしました。
例えば. 
私の選び方で言うと.  
①学習しやすい.  
②仕事で使われている. 
この２つはどのフレームワークを使うかを決める上で大切でした.  
そこで私は最終的にRuby on Railsにしました。
理由は学びやすさ＝困った時にググってすぐ解決しやすいか、別のフレームワークと比べて求人数が多いかを考慮するとrailsが一番私の条件にあっていました。
日本の休日や祝日の判定をしたり、祝日の名称を取得する拡張機能を作った

# holidays

日本の休日や祝日の判定をしたり祝日の名称を取得する拡張機能です
1955年1月～翌年くらいまでの祝日判定が出来ます
祝日と祝日に挟まれた平日と、日曜が祝日の場合の次の平日の場合の振替休日にも対応しています

内閣府の国民の祝日についてのページで公開されているCSVデータを元にしています
ライブラリをインストールした時点での最新の情報を取得するようしました

https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html


## 注意事項

- 内閣府がCSVのURLを変更しない限りは大丈夫かと思います。
- CSVをライブラリとして取り込んでいるため、この Holidays ライブラリを毎年２～３月くらいには更新する必要があります（祝日データの更新が毎年２月頃だそうです）


<br>

## github

https://github.com/kanagama/holidays


## packagist

https://packagist.org/packages/kanagama/holidays

<br>


## 使い方

composer でインストールします

```bash
# install の場合
composer require kanagama/holidays

# update の場合
composer update -w kanagama/holidays
```

使いたいクラスで use するだけです

```php
use Kanagama\Holidays\Holidays;
```

<br>

## メソッド一覧


### checkPublicHoliday(int $year, int $month, int $day): bool

指定日が祝日または振替休日であれば true を返却します

```php
$holidays = new Holidays();
// true （春分の日）
$holiday = $holidays->checkPublicHoliday(2023, 3, 21);
```

<br>

### getPublicHolidayName(int $year, int $month, int $day): ?string

指定日の祝日名を返却します。指定日が祝日でない場合は null を返却します。

※祝日と祝日に挟まれた平日や、日曜が祝日の場合の次の平日の場合は「振替休日」を返却します

```php
$holidays = new Holidays();
// 春分の日
$holidayName = $holidays->getPublicHolidayName(2023, 3, 21);
```

<br>

### checkHoliday(int $year, int $month, int $day): bool

指定日が祝日・振替休日もしくは土日であれば true を返却します。

```php
$holidays = new Holidays();
// true （土曜）
$holiday = $holidays->checkHoliday(2023, 3, 19);
```

<br>

### checkDayBeforePublicHoliday(int $year, int $month, int $day): bool

指定日が祝前日であれば true を返却します

```php
$holidays = new Holidays();
// true （翌日が春分の日）
$holiday = $holidays->checkDayBeforePublicHoliday(2023, 3, 20);
```

<br>

### checkDayAfterPublicHoliday(int $year, int $month, int $day): bool

指定日が祝後日であれば true を返却します

```php
$holidays = new Holidays();
// true （前日が春分の日）
$holiday = $holidays->checkDayAfterPublicHoliday(2023, 3, 22);
```

<br>

### addPublicHoliday(int $year, int $month, int $day, string $holidayName): void

指定日をオレオレ祝日に設定します。既に祝日設定されている場合は上書きされます
※こちらで設定した祝日は、振替休日判定には利用されません

```php
$holidays = new Holidays();
$holidays->addPublicHoliday(2023, 3, 20, '設立記念日');
```

※他のファンクションでも同様に、指定した日が祝日判定されます
getPublicHolidayName() でも名称が取得されます

<br>
<br>

## 全てのメソッドが静的に呼び出せます

```php
# example
$result = Holidays::checkPublicHoliday(2023, 3, 21);
$result = Holidays::getPublicHolidayName(2023, 3, 21);
$result = Holidays::checkHoliday(2023, 3, 21);
$result = Holidays::checkDayBeforePublicHoliday(2023, 3, 21);
$result = Holidays::checkDayAfterPublicHoliday(2023, 3, 21);
$result = Holidays::addPublicHoliday(2023, 3, 20, '設立記念日');
```

<br>

そもそもは下記のライブラリに追加したいなと思い作ったやつです
祝日対応予定です。よかったらどうぞ

https://qiita.com/kazumacchi/items/31d60e5e83f1b0c07ef0

## composer install 時にエラーが出る場合

composer.json に下記を追加してみてください

```json
    "recursive": true
}
```
model.save()で"TypeError: cannot pickle '_thread.RLock' object"が出た

こんにちは。Kerasを使っていて詰まったことがあったので備忘録代わりに投稿します。

# エラーの内容
Kerasのモデルを`model.save("my_model")`によって保存しようとしたところ、以下のエラーが出た。
```
TypeError: cannot pickle '_thread.RLock' object
```

# エラーの原因
私が保存しようとしていたmodelにLambdaレイヤが含まれていたため、pickle化ができないということのようだった。

# 一つの解決策
`model.save("my_model")`としたときにはmodelの構造と重みが共に保存されるが、上記の問題によりLambdaレイヤが含まれているモデルの構造は保存できない。そこで`model.save_weights("my_model.h5")`によってまず重みのみを保存する。次にこの重みをどう用いるかだが、モデルの構造を再構築することはコーディングによって可能なはずなので、手動でモデルの構造を書き下し、その後`reconstructed_model.load_weights("my_model.h5")`とすればよい。

以上です。より良い解決策などあれば教えて下さい。

参考文献
https://deecode.net/?p=975
https://blog.paperspace.com/working-with-the-lambda-layer-in-keras/
MacのVPNで特定のIPアドレスだけVPNを利用できる様にする

# VPN設定
VPN設定で
「すべてのトラフィックをVPN接続経由で送信」
は外す。

# Interface確認
以下のコマンドで、VPN接続のinterfaceを確認
```bash
ifconfig
```

# 経路設定
以下のファイルで、VPN接続のinterface「ppp0」に向けるIPアドレスを指定する。
```bash:/etc/ppp/ip-up
#!/bin/sh

if [ "$1" = "ppp0" ]; then
    /sbin/route add -net 172.31.0.0/16 -interface ppp0
    /sbin/route add -net 192.168.1.0/24 -interface ppp0
    /sbin/route add -net 192.168.2.0/24 -interface ppp0
    /sbin/route add -net 192.168.3.0/24 -interface ppp0
    /sbin/route add -net 192.168.4.0/24 -interface ppp0
fi
```


# 参考
https://twinturbo-power.com/2021/08/%E3%80%90macos%E3%80%91%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%B8%E3%81%AE%E6%8E%A5%E7%B6%9A%E3%81%A0%E3%81%91vpn%E3%82%92%E7%B5%8C%E7%94%B1%E3%81%95%E3%81%9B%E3%82%8B.html
if文をメソッド化して短く書く記事


if文を短縮する記事。

以下のCodeではif文でコントロールを対象にした処理を弄る場合ですね。やや複雑な処理を行っていて、かなり冗長になってしまっています。

実のところ結構悩んでいた課題だったけど、ちょっとした思い付きで解決出来た。
三項演算子を使ってエイリアスしてみた。

>注：三項演算子はvoid型メソッドを呼べないので、voidの場合はSwich文を使う方法で。ちょっと詰まった。


コントロール（UI）をクラスやメソッド内で弄るのは邪道とか言われた事があるんですが、書くのが面倒になるし普通にこれでいいのではないかと思っています。

欠点は書いた人じゃないと分からない事かな。依存性も高いし。
利点は呼び出し側がすっきりする事。
Viewmodel使っても似たような感じになるんじゃないでしょうか。


```C#:冗長なif判定Code
    bool FileConvertExec(string _fullPath)
{
  if (fileStringChk.FileExsists(ParamAddClasss<string>.check_output) && NoDialogCheck.IsChecked.Value == false)
            {
                MessageBoxResult msbr = MessageBox.Show("ファイルが存在しますわ。上書きしますか？",
                    "メッセージボックス", MessageBoxButton.YesNo,
                    MessageBoxImage.Asterisk);


                if (msbr == MessageBoxResult.Yes)
                {                    
                    th1.Start();
                    Lw.Show();
                    Lw.Activate();
                    return true;
                }
                else
                {
                    return false;
                }
            }

            else //ファイルが保存先に存在しなかったとき　&　「上書き保存」チェックがあるとき
            {
                if (ParamInterfase.isExitProcessed)
                {
                 //   ParamInterfase.isExitProcessed = false;
                    th1.Start();
                    
                    Lw.Show();
                    Lw.Activate();
                }
                else {
                    MessageBox.Show("ffmpeg.exeが実行中なのです");
                }
                return false;
            }
        }
```

## 三項演算子による短縮化
メソッド化すると呼び出し側がかなり短くなる。一覧性が増してデバッグ効率がよくなるので自分でもナイスな発想だった。


尚、三項演算子は必ず値を返すものでなければ実行出来ない。つまりVoid型のメソッドは実行できない。

※重複するので処理内容は省略しました。
省略前のCodeは編集履歴にあります。

```C#
bool FileConvertExec(string _fullPath)
{
///
///三項演算子による大幅な短縮化
///void型のメソッドは実行不可
return FileExsosts_and_NoDialogCheck
   (param.check_output,NoDialogCheck.IsChecked.Value) ? DialogMethod() : ifNoFileExsists() ;

}


////
////以下メソッド化
////
  static bool FileExsosts_and_NoDialogCheck(string check_output, bool _DialogChecked)       
        {
            var alterExsists = new Alternate_FileExsists();
            
            bool exsisted = alterExsists.FileExsists(check_output);
            bool DialogChecled = _DialogChecled;
            bool satisfied = false;

            if (exsisted && !DialogChecked)
                satisfied = true;

            return satisfied;
        }


        bool DialogMethod()
        {
         ///  省略            
        }

  bool IfNoFileExsists()
        {
         //省略
         }

}
```




~~これをもっと推し進めればこう書けるとかあると思う。~~
最近のc#は式木を使ってこのように明示的に書けると言うのがあるそうです（コメントで言ってた）。
あとで調べたらsatisfiedは満足という意味だった。なんかそれっぽい単語を適当に入れてみたのである。

## Swich文と式木を使った書き方

知らなかったのでもっと他人のCodeを読んでおこうなどと思った。
調べたらC#8.0かららしい。

https://ufcpp.net/blog/2018/12/cs8switchexpr/


```C#:
bool FileConvertExec()
{
  return FileExsosts_and_NoDialogCheck
        (param.check_output,NoDialogCheck.IsChecked.Value) switch
    {
        true => DialogMethod(),
        false => ifNoFileExsists()
    };
}

```

### より優れている参考記事

https://qiita.com/hirokidaichi/items/c9a76191216f3cc6c4b2
Vim 9.0 patchダイジェスト (2023/02)

[Vim](http://www.vim.org/)のリリースされた[patch](https://github.com/vim/vim/commits/master)の説明です。
([9.0.1271](https://github.com/vim/vim/commit/1b438a8228a415720efb5ca1c0503f5467292e8e) ～ [9.0.1367](https://github.com/vim/vim/commit/e0f869196930ef5f25a0ac41c9215b09c9ce2d3c))
**新機能、大幅な仕様変更には、:four_leaf_clover:が付いています。**

* [9.0.1367](https://github.com/vim/vim/commit/e0f869196930ef5f25a0ac41c9215b09c9ce2d3c): 幅0のウィンドウで0割りが発生する件を修正しました。
* [runtimeファイル更新](https://github.com/vim/vim/commit/dd60c365cd2630794be84d63c4fe287124a30b97): [Todo](https://github.com/vim/vim/commit/dd60c365cd2630794be84d63c4fe287124a30b97#diff-fb7eed53e3f2993f9d82c748206eaca82fd1d054a417c6de477bb54373d85643)更新。helpファイル更新。他。
* [9.0.1347](https://github.com/vim/vim/commit/2824d1ee325ea61855c26f77e7a4e095b9606720): `gr CTRL-O` がインサートモードのままなのを修正しました。(関連patch: [9.0.1349](https://github.com/vim/vim/commit/3ddb1182b7b8d376e59b444f6b3e213f0dcd3417))
* [9.0.1335](https://github.com/vim/vim/commit/d950984489e50b12d87c85f0cce1d672c880aa23): :alien: Vimのtestコードでhelpファイルのチェック(タブと空白の混在、不要な行末の空白)をおこなうようにしました。(関連patch: [9.0.1257](https://github.com/vim/vim/commit/94722c510745a0cfd494c51625a514b92dd2bfb2))
* [runtimeファイル更新](https://github.com/vim/vim/commit/938ae280c79b8cdb0fca60336ec4c090ecd8bb5a): [Todo](https://github.com/vim/vim/commit/938ae280c79b8cdb0fca60336ec4c090ecd8bb5a#diff-fb7eed53e3f2993f9d82c748206eaca82fd1d054a417c6de477bb54373d85643)更新。helpファイル更新。他。
* [9.0.1328](https://github.com/vim/vim/commit/5b9f57262fdadf460e6355abf1eee95b4f96abe8): GUI: :four_leaf_clover:`:highlight` でhighlight引数に `none` を指定した場合はエラー`E254`ではなく、`NONE`に変更するように促すエラー`E1361`を出力するようにしました。
* [9.0.1316](https://github.com/vim/vim/commit/eea0a00811e8e8e3c2d07964ea61795cce5a4665): Windows: インストーラーが vimfiles ディレクトリをadminグループで作成している件を修正しました。
* [9.0.1300](https://github.com/vim/vim/commit/3ec78f973fdaec2cea8e036ed38037b2fe40670b): :four_leaf_clover: `'statusline'`に複数の `%=` アイテムを指定できるようにしました。
* [runtimeファイル更新](https://github.com/vim/vim/commit/be4e01637e71c8d5095c33b9861fd70b41476732): [Todo](https://github.com/vim/vim/commit/be4e01637e71c8d5095c33b9861fd70b41476732#diff-fb7eed53e3f2993f9d82c748206eaca82fd1d054a417c6de477bb54373d85643)更新。helpファイル更新。他。

---
#### 凡例

|表記|意味|
|:------|:------|
|:four_leaf_clover:|新機能、大幅な仕様変更|
|:alien:|Vim開発者向けの追加、変更|
|`'hoge'`|オプション (`:h options`参照)|
|`:hoge`|Exコマンド (`:h :index`参照)|
|`hoge()`|組み込み関数 (`:h functions`参照)|
|`v:hoge`|Vim定義済変数 (`:h v:`参照)|
|`+hoge`|feature (`:h +feature-list`参照)|

---
#### 方針
[こちら](http://qiita.com/h_east/items/23cd0d10932505072e6b#%E6%96%B9%E9%87%9D)を参照。
【因果推論】回帰不連続デザイン（RDD）

忙しい人向けの結論
-
・RDD（回帰不連続デザイン）は介入により発生した境界線上付近のサンプルが同質であることを仮定し、介入により発生している差を因果効果として推定する分析。
・説明変数と目的変数に非線形な関係がある場合、回帰式に多項式や交差項を入れることで因果効果を推定できる。
・バイアスを小さくする方法は複数あり、１つは回帰式に共変量を入れること。他の方法として、分析に活用するband幅を調整することが挙げられる。


RDD（回帰不連続デザイン）を利用する状況とは
-
ある閾値を基準に介入するかしないかを決めている場合に利用する。

例えば、メール施作を実施する際に、昨年の商品購入量が一定の基準を超えている顧客は購入見込みの高い顧客として、メールを送信するといったことがある。この場合、傾向スコアもIPWもDIDも使えない。なぜならば、商品購入量が一定の基準を満たしている場合、傾向スコアは１、それ以外の場合傾向スコアは０というようになり、傾向スコアによる調整ができないからだ。DIDは顧客全体に対してメール送信のルールを設けているので、コントロールグループを用意することができず使えない。このように全体に対して、何らかの基準により、介入をするか否かを決めている場合、RDDを使うことで効果検証をする。

RDDのアイデア
-
介入があった閾値の前後ではサンプルの性質は変わらないという発想のもと分析を行なっている。
ここで閾値のことをカットオフと呼び、介入を決定する際の基準になる変数のことをrunning variabeと呼ぶ。

もし仮にRDDを利用せずに、カットオフ周辺の値の平均で効果検証をした場合にどのような結果が出るか数式で表現し、バイアスがどのようなものか確認する。

```math
\tau_{naive} = \mathbb{E}[Y^{1} | Z = 1] - \mathbb{E}[Y^{0} | Z = 0] \\
= \tau + \mathbb{E}[Y^{0} | Z = 1] - \mathbb{E}[Y^{0} | Z = 0] \\
```

ここでZ＝1、Z＝0はrunning varivableのカットオフ値Aによって決まるので書き換えると下記のようになる。

```math
=\tau + \mathbb{E}[Y^{0} | RunningVaribale >= A] - \mathbb{E}[Y^{0} | RunningVaribale < A]
```

ここで$\tau$は本当の効果量
$\mathbb{E}[Y^{0} | RunningVaribale >= A] - \mathbb{E}[Y^{0} | RunningVaribale < A]$はセレクションバイアスである。

平均の差を集計した場合はこのセレクションバイアスが生じる。
例えば、running variableを昨年の商品購入量で、購入量がA以上の場合はメールを送信する、また以下の場合はメールを送信しないと考える。セレクションバイアスをこの例の文脈で説明すると、$\mathbb{E}[Y^{0} | RunningVaribale >= A]$は昨年の商品購入量がA以上だった人たちの今年の潜在的な商品購入量を示し、$\mathbb{E}[Y^{0} | RunningVaribale < A]$は昨年の商品購入量がA以下だった人たちの今年の潜在的な商品購入量を示す。この差分は大きくなると考えられ、セレクションバイアスはおそらく大きい。

RDDではこのバイアスを小さくすることを考える。

RDDでバイアスを小さくするために
-
セレクションバイアスを小さくする方法はシンプルで、バイアスを発生させているrunning variable（共変量）を重回帰分析に含めれば良い。

上記の例で言えば、昨年の商品購入量を重回帰分析の説明変数に含めるとバイアスをコントロールできる。

数式を記載する。もし説明変数と目的変数に非線形の関係があれば、非線形の共変量などを入れることでバイアスを小さくできるので、いろいろ試す必要がある。

```math
Y = \beta_0 + \beta_1 * treatment + \beta_2 * RunningVariable + e
```

この時、推定できるものはLATEと呼ばれるものになる。

Local Average Treatment Effect（LATE） = RDDで推定しているもの
-
カットオフ周辺の値で推定した効果のこと。別の言い方をすると、RDDによって求められる効果は一部のサンプルで確認された因果効果であるとも言える。

カットオフ近辺のデータしか利用していない場合もLATEとなり、したがって、この結果がカットオフをほかの値に変えた時にも援用できるとは限らないことは注意。

nonparametric RDD
-
これは活用するデータをカットオフの前後に限定することでバイアスを小さくする方法である。これを別の言い方をすると$\mathbb{E}[Y^{0} | RunningVaribale < A]$と$\mathbb{E}[Y^{0} | RunningVaribale >= A]$の近くデータはほぼ同じであることに仮定している。

横軸をbound（閾値からどのくらいのデータを活用するか）の幅、縦軸を推定値としたグラフを確認すると、バイアスとバリアンスのトレードオフを確認することができる。

RDDでの仮定
-
### ①Continuity of Conditional Regression Functions
もし、介入がなければ、連続して同じような傾向が続いていたと仮定すること。数式で表現すると、$\mathbb{E}[Y^{1} | X]$と$\mathbb{E}[Y^{0} | X]$がXに対して連続であることを仮定している。これが満たされない状況としてXに対して、別の介入も加えて行なっている時などが挙げられる。

### ②non-mainpulation
ユーザーなどのカットオフされている変数が、自身の意思などで介入グループに入っている場合、カットオフ変数によるバイアスが生じている。
カットオフ前後でデータの密度に差がある場合、このバイアスが生じている可能性があるので注意。

参考文献
-
効果検証入門〜正しい比較のための因果推論/計量経済学の基礎

http://yukiyanai.github.io/jp/classes/econometrics2/contents/slides/metrics2_topic08_slides_pub.pdf
Python でローカル開発の環境変数を利用してみました

## 概要

ServicePrincipal を使用したローカル開発時に Azure サービスに対して Python アプリを実行して 何かごにょごにょ したいとき、その ServicePrincipal の環境変数を定義し利用する方法の説明となります

### 実行環境

macOS Ventura 13.0
python 3.8.12
Azure CLI 2.41.0

### 前提条件

- 利用する ServicePrincipal をすでに作成済みで必要となる情報を取得していること

```
$ az ad sp create-for-rbac --name <ServicePrincipal名> --skip-assignment --years 2
{
  "appId": "53435343-7d7d-4548-adcd-ds22aa88ff22",
  "displayName": "sp_iturufestest",
  "password": "mim9Q~kk11HHyy55toE_HHeeeW2BiSCrrr22CaCa",
  "tenant": "59175917-aacc-4646-55ff-33fffcc666ff"
}
```

- python-dotenv パッケージをインストールしていること

```
pip install python-dotenv
```

---

### .env ファイルの作成

Pythonアプリケーションのルート ディレクトリに .env ファイルを作成します。 次のように、アプリ登録プロセス（ServicePrincipal作成）時に取得した値を使用して環境変数の値を設定します。

```
AZURE_CLIENT_ID=（ServicePrincipal の "appId" 値）
AZURE_TENANT_ID=（ServicePrincipal の "tenant" 値）
AZURE_CLIENT_SECRET=（ServicePrincipal の "password" 値）
```

### 環境変数を取得するプログラム

上記で設定したローカル環境変数を取得する pythonプログラムは以下となります。すでに定義されているグローバル環境変数を上書きする設定も入れています。

```python:local_env.py
import os
from dotenv import load_dotenv

load_dotenv(override=True)  # <-- グローバル環境変数を上書きします
load_dotenv(".env")

CLIENT_ID = os.environ.get("AZURE_CLIENT_ID")
TENANT_ID = os.environ.get("AZURE_TENANT_ID")
CLIENT_KEY = os.environ.get("AZURE_CLIENT_SECRET")

print("AZURE_CLIENT_ID : ", CLIENT_ID)
print("AZURE_TENANT_ID : ", TENANT_ID)
print("AZURE_CLIENT_SECRET : ", CLIENT_KEY)
```

### プログラムの実行

グローバル環境変数を取得してみます。

```
$ env | grep AZURE_
AZURE_CLIENT_ID=38313831-ebeb-3333-8008-dddb22228264
AZURE_TENANT_ID=59175917-aacc-4646-55ff-33fffcc666ff
AZURE_CLIENT_SECRET=77NIzGrrr44_YYUIcer~rrr-Y-yyyxxx~q
```

作成したプログラムからローカル環境変数を取得してみます。

```
$ python local_env.py
AZURE_CLIENT_ID :  53435343-7d7d-4548-adcd-ds22aa88ff22
AZURE_TENANT_ID :  59175917-aacc-4646-55ff-33fffcc666ff
AZURE_CLIENT_SECRET :  mim9Q~kk11HHyy55toE_HHeeeW2BiSCrrr22CaCa
```

---

### まとめ

これで ServicePrincipal 環境変数をローカル定義することにより、ローカル開発したPythonプログラムをサクッと実行させることが可能となりました。

### 参考記事

以下の記事を参考にさせていただきました。感謝申し上げます。
[python-dotenvを使って環境変数を設定する](https://qiita.com/harukikaneko/items/b004048f8d1eca44cba9)
HTML5　よく使うタグまとめ！

こんにちは！
今回初投稿となりますので、まずは簡単なことから発信していこうと思います。
HTML5は、Webページの構造を定義するために使用される言語で、Webページを構成するために使用できる様々なタグがあります。以下では、HTML5でよく使用されるタグについて説明します。

`<header>` タグ
`<header>`タグは、Webページのヘッダーを定義するために使用されます。これには、ページのタイトルやナビゲーションバーなどが含まれます。
```HTML:qiita.html
<header>
  <h1>Page Title</h1>
  <nav>
    <ul>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
    </ul>
  </nav>
</header>
```
`<nav>`タグ

`<nav>`タグは、Webページのナビゲーションを定義するために使用されます。これには、リンクのリストやメニューが含まれます。

```HTML:qiita.html
<nav>
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</nav>
```

`<main>`タグ
`<main>`タグは、Webページの主要なコンテンツを定義するために使用されます。これには、ページの本文や主要な機能が含まれます。
```HTML:qiita.html
<main>
  <h1>Page Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
```
`<article>`タグ
`<article>`タグは、Webページの記事やブログ投稿などの独立したコンテンツを定義するために使用されます。
```HTML:qiita.html
<article>
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
```

`<section>`タグ
`<section>`タグは、Webページ内のセクションを定義するために使用されます。これには、テーマやコンテンツのセクションが含まれます。

```HTML:qiita.html
<section>
  <h2>Section Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
```

`<aside>`タグ
`<aside>`タグは、Webページの主要なコンテンツから分離された補足情報を定義するために使用されます。
```HTML:qiita.html
<article>
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">Related Article</li>
    </aside>
```

`<footer>`タグ
`<footer>`タグは、Webページのフッターを定義するために使用されます。これには、コピーライト情報や連絡先情報が含まれます。
```HTML:qiita.html
<footer>
  <p>&copy; 2023 Example Company</p>
  <p>Contact us: info@example.com</p>
</footer>
```

`<img>`タグ
`<img>`タグは、Webページに画像を挿入するために使用されます。

```HTML:qiita.html
<img src="image.jpg" alt="Image Description">
```

`<a>`タグ
`<a>`タグは、Webページ内の別の場所や外部サイトへのリンクを作成するために使用されます。
```HTML:qiita.html
<a href="https://www.example.com">Link Text</a>
```

`<ul>`と`<li>`タグ
`<ul>`タグと`<li>`タグは、順序なしリストを作成するために使用されます。
```HTML:qiita.html
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
```

`<ol>`と`<li>`タグ
`<ol>`タグと`<li>`タグは、順序付きリストを作成するために使用されます。

```HTML:qiita.html
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>
```
`<div>`タグ
`<div>`タグは要素をグループする際に使用されます。
```HTML:qiita.html
<div>
<p>ABC</p>
<p>DEF</p>
</div>
```

`<table>`,`<tr>`,`<th>`,`<td>` タグ
`<table>`,`<tr>`,`<th>`,`<td>`  タグは、表を作成するために使用されます。
```HTML:qiita.html
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>
```
以上が、HTML5でよく使用されるタグの例です。HTML5には、これらのタグ以外にも多数のタグがありますが、これらはWebページを作成する際に非常に役立ちます。今後もどんどんアウトプットしようと考えています！よろしくお願いします^^
インフォメティス株式会社でのSlackの活用事例を紹介します

## はじめに

インフォメティス株式会社では社内のコミュニケーションツールとしてSlackを活用しています。その使い方の一つとして、比較的ユニークな取り組みをしているので紹介します。2016年あたりから導入しており、当時はリモートワークではなかっです。今はリモートワーク中心になり、Slackでのコミュニケーションがより重要になっています。

## 先行事例

元となったアイデアはいくつかあります。

https://craftsman-software.com/posts/56

「分報」はその後さまざまなところでも採用されているようですね。

https://ja.remotty.net

リモートワークという言葉では収まらない、さまざまな先進的な取り組みをしているソニックガーデンのソリューションです。

## インフォメティスでのSlack活用

通常のSlackの使い方に加えて、上記の先行事例を参考にした「Room」という使い方を紹介します。

Roomは「独り言部屋」とも呼んでいます。Roomは分報と同じように各メンバー用に作るチャンネルです。 `#room_<人の名前>` という命名規則でチャンネルを作っています。

Roomは独り言を書くためのチャンネルですが、いくつかルールがあります。基本チーム全メンバーをチャンネルに参加させますが、各メンバーは（本人以外）チャンネルをミュートすることを前提とします。そのため、独り言をいくら書き込んでも他の人に通知されません。

他人のRoomを見に行って書き込むこともできます。ちょっとした仕事の話や雑談などができますし、それは他のメンバーも見ることができるオープンな場になります。自分のRoomで他の人をメンションすることもできます。ミュートしたチャンネルでもメンションすると即時性はないですが、大抵気づくことができます。

気分的には、Roomはオフィスの自席のような感じで、普段はそのチャンネルを開いて、何かあればそこに書き込む感じになります。離席するような場合も、軽くメッセージを残しておくことができます。他の人は、その人が今どういう状況かと思ったら、その人のRoomを覗きに行くことになります。

## スクリーンショット

サイドバーの一部だけですが。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63327/de92a456-55a1-b3b4-a96b-89d122b28c10.png)

なんとなくイメージが掴めれば幸いです。

## Roomの運用を浸透させるための施策

Roomを導入した初期の頃は、社内での先行事例がないため、使い方にみんなが困る感じでした。特に、独り言を書き込むのを忘れる、何を書いていいかわからないなどの問題がありました。

当初は、発案者である私が適宜巡回して、質問を投げかけたり、「書き忘れてますよ」と声がけをしたりしていました。そのうち、手間がかかり面倒になったので、ボットを作り、ボットが声がけをするようにしました。

今では、Roomがいくつも存在しすでに多くの書き込みがあるため、新規メンバーにも雰囲気や使い方が伝わるようになりました。

## 運用してみた感想など

当初は独り言用の専用ツールを導入もしくは開発しようかと思ったこともあるのですが、結果としてSlackでやりたいことができたのは大きな発見でした。Slackは常に業務で使っているものであり、新たなツールなどを開かなくても良いのは最大のメリットです。ボットの活用も有益だと思います。

初めは使い方やその意義が分からなかったメンバーも、段々慣れてきて、今ではなくては困る仕組みになったようです。リモートワークに移行する前からその状況は出来上がっていて、リモートワークに移行してからもメンバー間のコミュニケーションの促進に役立っていると感じます。

## おまけ

Slack以外にも、リモートワークを助けるためにRemote Facesというツールを使っています。

https://qiita.com/daishi/items/7312465fb60ca5bba0f3



---

最後に、インフォメティス株式会社の採用情報は[こちら](https://www.informetis.com/recruit/)にありますので、ご興味をお持ちになられた方は是非ご覧ください。
Tinygo 本体をソースコードから build する方法 (Windows)


## はじめに

他のプログラミング言語同様、[Tinygo 本体のリポジトリ](https://github.com/tinygo-org/tinygo)の最新の機能を試したい場合はソースコードから build する必要があります。

本体の build 方法は公式ページの [Build from source](https://tinygo.org/docs/guides/build/)へも記載されていますが、  
一連の流れに沿って説明した方がわかりやすいので新たに記事として書き起こします。  


## build までのステップ

本記事では、以下の 3 ステップに分けて手順を説明します。  

1. build 環境のインストール
2. llvm 環境の build
3. tinygo コマンドの build

## 1.build 環境のインストール

以下の環境(コマンド)を全てインストールします。  
環境は全て [Chocolatey](https://chocolatey.org/) にてインストールすることが可能です。  
(以下の括弧内は記事執筆時の各環境の version です。)

* `git`(2.34.1)
* `go`(1.19)
    * Tinygo に対応する version の制限があるため version に注意
* `make`(4.3)
* `cmake`(3.25.2)
* `ninja`(1.11.1)
* `python`(3.9.10)
* `mingw`(12.2.0)

ステップ 2. 以降の手順では`gcc` 関連のバイナリ (`g++`等) は上記の`mingw` 環境のものが参照される必要があるため注意してください。(`gcc` 環境は別の環境構築の際にインストールされている場合が多いです)

実際に実行するインストールコマンドは例えば以下のようになります。  
既に `Git` や `Go` をインストーラーにてインストールしている場合は、  
新たにインストールする必要はありません。

```
$ choco install --confirm git golang make cmake ninja python
$ choco install mingw -Version 8.1.0
```
もしくは、以下のファイルをダウンロードして `$ choco install tinygo_build_package.config` にて一括でインストールすることも可能です。
[tinygo_build_package.config](https://github.com/akif999/dotfiles/blob/master/tinygo_build_package.config)

## 2. llvm 環境の build

本手順以降では、Git に同梱されている bash.exe (`Gitのインストールディレクトリ/bin/bash.exe`のように入っています)を起動してそちらで作業を行ってください。

llvm 環境の build は以下を実行します。  
`$ make llvm-build` はそれなりに時間がかかります(筆者のラップトップ環境で約 1.5h)。

```
$ make llvm-source
$ make llvm-build
```

## 3. tinygo コマンドの build

Tinygo 本体のバイナリと、デバイス関連ファイルの更新を以下にて実施します。  
また、`$ make gen-device` を実行する前に関連するモジュールを Git にてダウンロードする必要があります。  

```
$ make
$ git submodule update --init
$ make gen-device
```

なお、本ステップで環境に問題がないにもかかわらず失敗する場合は、ステップ 2. から再度実施することで解消する場合があります。

## まとめ

build にあたり環境をいくつかインストールする必要がありますが、さほど手順は煩雑ではないため、  
Windows でもスムーズに build することができます。  
Tinygo プロジェクトは比較的改善難易度の低い Issue も多数挙がっているため、OSS に commit するにはチャンスのプロジェクトです。  

## References

* https://github.com/tinygo-org/tinygo
* https://tinygo.org/docs/guides/build/