OmniAICreator/Qiita-1.07M huggingface dataset:
ReactにおけるTypeScriptの型付け



### 1. Reactのセットアップ

- **プロジェクトの作成**: `create-react-app`を使用してTypeScript対応のReactプロジェクトを作成できます。
  ```bash
  npx create-react-app my-app --template typescript
  ```
- **手動設定**: 既存のプロジェクトにTypeScriptを追加するには、`typescript`パッケージと型定義ファイルをインストールします。
  ```bash
  npm install --save typescript @types/node @types/react @types/react-dom
  ```

### 2. 基本的な型付け

- **Propsの型定義**: コンポーネントのプロパティに型を付けるには、インターフェースまたは型エイリアスを使用します。
  ```tsx
  interface MyComponentProps {
    title: string;
    isActive: boolean;
  }

  const MyComponent: React.FC<MyComponentProps> = ({ title, isActive }) => {
    return <div>{title} is {isActive ? 'active' : 'inactive'}</div>;
  };
  ```

- **Stateの型定義**: `useState`フックを使用する際に型を指定することもできます。
  ```tsx
  const [count, setCount] = useState<number>(0);
  ```

### 3. コンポーネントの型

- **関数コンポーネント**: `React.FC`を使用して型を指定しますが、これはオプションです。最近の推奨は`React.FC`を使用せずに、直接型を指定することです。
  ```tsx
  const MyComponent: React.FC<MyComponentProps> = (props) => {
    // ...
  };
  // または
  const MyComponent = (props: MyComponentProps) => {
    // ...
  };
  ```

- **クラスコンポーネント**: クラスコンポーネントでは、`React.Component`のジェネリック型で`Props`と`State`を指定します。
  ```tsx
  interface MyComponentState {
    count: number;
  }

  class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
    state: MyComponentState = { count: 0 };

    render() {
      return <div>{this.props.title}: {this.state.count}</div>;
    }
  }
  ```

### 4. イベントの型付け

- **イベントハンドラ**: イベントオブジェクトの型を指定することができます。例えば、`onClick`イベントの場合は次のようにします。
  ```tsx
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log(event.currentTarget);
  };

  return <button onClick={handleClick}>Click me</button>;
  ```

### 5. コンテキストとリファレンス

- **コンテキスト**: `React.Context`を使用してコンテキスト型を定義します。
  ```tsx
  interface MyContextType {
    user: string;
    updateUser: (name: string) => void;
  }

  const MyContext = React.createContext<MyContextType | undefined>(undefined);
  ```

- **リファレンス**: `useRef`フックを使用する際も型をつけることができます。
  ```tsx
  const inputRef = useRef<HTMLInputElement | null>(null);
  ```

### 6. その他の注意点

- **型のユニオンとインターセクション**: 複数の型を組み合わせることができます。
- **型のインポートとエクスポート**: 型定義を他のファイルに分けて管理することができます。
【Amazon Athena】ってなんだ？サクッと概要　#AWS

# Amazon Athena入門：サーバーレスで簡単にビッグデータを分析しよう！
 
アマゾンのサービス名っておしゃれ過ぎて、イメージがつかないときありますよね<br>
因みにAthenaは <INS>知恵・芸術・学芸・戦争などの女神 </INS> だそうです。アテネと同じつづりでもあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806193/cd515a52-1a33-d13b-2a48-ced4a2e2847f.png)

さて本題です。<br>

Amazon Athena（アマゾン アテナ）は、初心者でも簡単にデータ分析ができるAmazon Web Services (AWS) のサービスです。この記事では、Athenaの特徴と使い方について、初心者向けにわかりやすく解説します。
## Athenaとは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806193/d8ca7d3f-e74e-7ea0-4177-9a017a507939.png)

Amazon Athenaは、**AWSのクラウドストレージ「Amazon S3」に保存されたデータをSQLで分析できるサーバーレスのデータクエリサービス**です。プログラムの知識がなくても、Athenaの画面上でSQLを使って簡単にデータを検索・集計できます。

### Athenaの主な特徴

#### 1. サーバー管理が不要
通常のデータベース分析はサーバーの設定や管理が必要ですが、Athenaではその必要がありません。AWSがインフラを管理しているので、使いたい時にインターネットからアクセスし、すぐに分析ができます。

#### 2. SQLを使ってクエリを実行
Athenaでは、データ分析に使われるSQL（Structured Query Language）という簡単な言語を使用します。これにより、「特定の商品が何回購入されたか」や「訪問者数の集計」といったデータをすぐに取得できます。

#### 3. コスト効率が良い
Athenaは、クエリごとに料金が発生するため、必要な時だけの使用で済み、効率的にコストを抑えることができます。大量のデータに対しても、コストを気にせず、柔軟に分析が可能です。

## Athenaの使い方：例えばこんなシーンで！

例えば、あるECサイトで「どの商品が人気か」を知りたい場合を考えてみましょう。ECサイトの訪問データや購買履歴がAmazon S3に保存されていれば、AthenaでSQLを用いて「よく売れている商品」「特定の月の売上」などのデータをすぐに分析できます。

### Athenaでのデータ分析の流れ

1. **Amazon S3にデータを保存**
   - Athenaが分析するデータは、Amazon S3に保存されている必要があります。S3には、CSVやJSON形式でデータを格納できます。
   
2. **Athenaでクエリを実行**
   - Athenaの管理画面からSQLクエリを実行します。SQLは簡単なコマンドで、データの検索・集計がすぐに行えます。

3. **結果を即座に取得**
   - 実行したクエリの結果は、Athenaの画面上ですぐに確認できます。また、結果は保存しておくことも可能です。

## まとめ

Amazon Athenaを使えば、サーバーのセットアップや管理が不要なため、ビッグデータ分析がもっと身近で簡単になります。S3にデータを保存しておくだけで、SQLを使って必要な時にサッと分析を行えるAthenaを活用して、データドリブンな意思決定に役立てましょう！

Athenaについてもっと詳しく知りたい方は、AWSの公式ドキュメントもぜひ参考にしてみてください。
enabledelayedexpansionenabledelayedexpansionenabledelayedexpansion

```

@echo off
setlocal enabledelayedexpansion

:: 日付フォーマットの設定
for /f "tokens=1-3 delims=/- " %%a in ('echo %date%') do set Today=%%a%%b%%c

:: 定数の定義
set "DEF_DIR=C:\FT\JO\DEF\file_check_target.txt"
set "PERIOD_DAY=3"
set "LOG_DIR=C:\FT\LOG"
set "LOG_FNAME=%LOG_DIR%\file_check_Result_LOG_%Today%.log"

set "FTP_FILE_CNT=0"
set "FTP_SUCCESS_CNT=0"
set "FTP_FAIL_CNT=0"

:: ログディレクトリの存在確認
if not exist %LOG_DIR% (
    echo ログディレクトリが見つかりません (%LOG_DIR%)
    exit /b 1
)

:: 処理開始ログの出力
echo %date% %time% [INFO]開始 >> %LOG_FNAME%

:: ファイル行の読み込みと処理
for /f "usebackq delims=" %%l in ("%DEF_DIR%") do (
    set "TARGET=%%l"
    
    :: ターゲットディレクトリの存在確認
    if not exist !TARGET! (
        echo %date% %time% [ERROR]対象ディレクトリが見つかりません (!TARGET!) >> %LOG_FNAME%
        echo %date% %time% [INFO]終了 >> %LOG_FNAME%
        exit /b 1
    )

    :: 指定日数を超えたファイルを検索し、直接パスを処理
    forfiles /P "!TARGET!" /D -%PERIOD_DAY% /C "cmd /c echo @path" 2>> "%LOG_FNAME%" | (
        for /f "usebackq delims=" %%f in ('more') do (
            set "status="
            set /p status=<%%f

            if not defined status (
                set /a FTP_FAIL_CNT+=1
                echo %date% %time% [WARNING]FTP失敗 : %%f >> %LOG_FNAME%
            ) else (
                set /a FTP_SUCCESS_CNT+=1
                echo %date% %time% [INFO]FTP成功 : %%f >> %LOG_FNAME%
            )
        )
    )
    set /a FTP_FILE_CNT=!FTP_SUCCESS_CNT! + !FTP_FAIL_CNT!
)

:: 処理対象のファイルが存在するかを確認
if %FTP_FILE_CNT%==0 (
    echo %date% %time% [INFO]結果: 対象ファイルが見つかりません >> %LOG_FNAME%
) else (
    echo %date% %time% [INFO]結果: FTPファイル - 成功:%FTP_SUCCESS_CNT% / 失敗:%FTP_FAIL_CNT% >> %LOG_FNAME%
)

:: 処理終了ログの出力
echo %date% %time% [INFO]終了 >> %LOG_FNAME%

:: FTP失敗の有無を確認
if %FTP_FAIL_CNT% NEQ 0 (
    exit /b 5
)

:: 正常終了
exit /b 0


```
pythonでエクエルの行列を挿入したときに式のアドレスを追従機能をChatGPTに作成してもらう


openpyxl で エクセル操作
insert_rowsで行を挿入した場合、式のアドレスは追従してくれない
ChatGPTに聞いて作ってもらいました所要時間５分。。。
動作確認用の入力データ作成やこの記事作成のほうが時間かかったよ
ChatGPTに使われる素人なボク

これがあれば、仕様変更になって行列追加になっても対応できる！！！

```ChatGPT.質問.txt
(1)
openpyxl で insert_row を実施したさいに 数式があった場合にずれが発生します、ずれが発生した式を矯正する方法、例えば3行目に空白行を挿入した場合、それより下の"="で始まる数式で”[A-Z]+[0-9]+”にマッチするアドレスをずらした分に修正する
(2)
新しいinsert_rowとして関数化してください、また列バージョンの例も提示してください
(3)
挿入行より下だけ修正した場合、挿入行より上の式に対応できないようです、なのですべての行をチェックして式の行番号をチェックして挿入行番号より大きい場合に修正するようにお願いします
```

```参考入力CSV形式.xlsx
11,=A1*C1,19,=C1*E1,27
101,=A2*C2,43,=C2*E2,-15
=A2/A4,=B2/B4,=C2/C4,=D2/D4,=E2/E4
-103,=A4+C4,-101,=C4+E4,-99
-145,=A5+C5,-143,=C5+E5,-141
-187,=A6+C6,-185,=C6+E6,-183
```

左挿入前＜＝＝＝＝＝＝＝＝＝＝＞右挿入後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638856/41d539f7-5606-81f6-063b-9053e454a8e5.png)


```openxl_insert.py
import openpyxl
import re

def insert_row_and_adjust_formula(sheet, insert_row):
    # 行を挿入
    sheet.insert_rows(insert_row)

    # 修正対象の数式を含むセルを探して修正
    for row in range(1, sheet.max_row + 1):  # 全ての行を対象
        for col in range(1, sheet.max_column + 1):  # 全ての列をチェック
            cell = sheet.cell(row=row, column=col)
            if isinstance(cell.value, str) and cell.value.startswith('='):
                # 数式に含まれるセル参照を修正
                def adjust_reference(match):
                    col_ref, row_ref = match.groups()
                    new_row_ref = int(row_ref) + (1 if int(row_ref) >= insert_row else 0)  # 挿入行以降の行だけ修正
                    return f"{col_ref}{new_row_ref}"

                # 数式のセル参照を正規表現で修正
                new_formula = re.sub(r'([A-Z]+)([0-9]+)', adjust_reference, cell.value)
                cell.value = new_formula  # 修正した数式をセルに再設定

def insert_column_and_adjust_formula(sheet, insert_col):
    # 列を挿入
    sheet.insert_cols(insert_col)

    # 修正対象の数式を含むセルを探して修正
    for row in range(1, sheet.max_row + 1):  # 全ての行を対象
        for col in range(1, sheet.max_column + 1):  # 全ての列をチェック
            cell = sheet.cell(row=row, column=col)
            if isinstance(cell.value, str) and cell.value.startswith('='):
                # 数式に含まれるセル参照を修正
                def adjust_reference(match):
                    col_ref, row_ref = match.groups()
                    new_col_ref = chr(ord(col_ref) + 1) if (ord(col_ref) - 65 + 1) >= insert_col else col_ref
                    return f"{new_col_ref}{row_ref}"

                # 数式のセル参照を正規表現で修正
                new_formula = re.sub(r'([A-Z]+)([0-9]+)', adjust_reference, cell.value)
                cell.value = new_formula  # 修正した数式をセルに再設定

# Excelファイルを読み込み
workbook = openpyxl.load_workbook('a.xlsx')
sheet = workbook.active

# 4列目に空白列を挿入
insert_column_and_adjust_formula(sheet, 4)
# 4行目に空白行を挿入
insert_row_and_adjust_formula(sheet, 4)
# 2列目に空白列を挿入
insert_column_and_adjust_formula(sheet, 2)
# 2行目に空白行を挿入
insert_row_and_adjust_formula(sheet, 2)

# 保存
workbook.save('example_adjusted.xlsx')

```
【DNS】DNSについて勉強する新米エンジニア

# はじめに
<!-- 発端や概要を記載 -->
URLとかURIは知ってるけど、DNSについてはあまり理解しておらず
危機感を感じたので、DNSについて勉強しようと思いました。
（あとQiitaでブログを書く習慣を身につけたい...）

本記事ではDNSを理解する上で必要な用語、仕組みを簡略的に
まとめる方針で書かせてもらいます。
（投稿主の文章力が壊滅的に乏しいです）

# 目次
<!-- タイトルとアンカー名を編集 -->
1. ドメイン名の構成
1. DNSにおける階層化と委任の仕組
1. レジストリ、レジストラ
1. ドメイン名を登録する
1. ドメイン名を使えるようにする
1. DNSの構成要素
1. DNSの処理の効率化と可用性の向上
1. 参考文献

<!-- 各チャプター -->
# ドメイン名の構成

### ドメイン
- 名前空間の範囲

### ドメイン名
- その範囲を識別するために付けられた名前
- ドメイン名は文字列を「.（ドット）」で繋げた形でされる
    - それぞれの文字列を**ラベル**という
- https://**example.co.jp**
- info@**example.jp**

# DNSにおける階層化と委任の仕組み

### 階層化と委任の仕組み
- ドメイン名に対応する形で管理範囲を階層化し、委任することで管理を分散する
- 委任した人（委任元）と委任された人（委任先）は「**親**」と「**子**」の関係になる

### ゾーン
- 委任によって管理を任された範囲
- ゾーンを委任するためには、サブドメインを作ることから始める
    - サブドメインは委任元で作られる

### ネームサーバー
- ゾーンを管理するサーバー
- 以下の2種類の情報を管理する
    - そのゾーンに存在するホストのドメイン名とIPアドレス
        - それぞれのゾーンのネームサーバーが、ドメイン名とIPアドレスの対応づけを管理する
    - 委任の情報
        - 委任先（子）のネームサーバーの情報で、委任先（親）のネームサーバーが管理する

# レジストリ、レジストラとは

### レジストリの役割
- IPアドレスやドメイン名の割り当て・登録を担当する組織
- ドメイン名を使えるようにするためには、レジストリに対して「このドメイン名を使いたい」という登録申請をする
- 登録情報を蓄積し管理する登録原簿「**レジストリデータベース**」の運用管理
- ネームサーバーの運用・管理
- Whoisサービスの提供
    - レジストリが管理する登録・割り当て情報をインターネットに公開し、利用者が参照できるようにするサービス

### レジストリ・レジストラモデル
- レジストリ：ドメイン名の一元管理を行う役割を担う
- レジストラ：ドメイン名登録者からの申請を取り次ぐ役割を担う
- １つのTLDに対してレジストリは１つだが、レジストラは複数存在する

### レジストラの役割
- 登録者からの登録申請を受け付ける
- レジストリデータベースへの登録依頼
- 自身が取り扱うドメイン名に関するWhoisサービスを提供する
- ドメイン名の登録申請を受け付けた登録者の情報を管理する

# ドメイン名を登録する

### 登録者が行うこと
- ドメイン名が登録可能であるか調べる
    - Whoisサービスで登録されていないドメイン名を調べる
- ドメイン名を申請可能な事業者を選ぶ
- 提出するべき情報を揃える

### レジストラが行うこと
- 申請内容を確認する
- レジストリデータベースへの登録を申請する

### レジストリが行うこと
- 登録申請の内容が登録要件（レジストリが定める登録要件）を満たしているか確認する
- レジストリデータベースに情報を登録する
- ドメイン名の登録が完了したら、レジストラへ登録完了通知を返す
    - レジストラは登録者へドメイン名の登録完了を知らせる

# ドメイン名を使えるようにする

### 登録者が行うこと
- 自分のドメイン名を取り扱うネームサーバーをインターネット上で動かす
- 登録したドメイン名の情報をネームサーバーに設定する
- ネームサーバーがインターネットから聞かれたことに答えられるか確認する
    - 上記確認が完了したら、レジストラに、ネームサーバー情報の設定を申請する

### レジストラが行うこと
- レジストリデータベースへネームサーバー情報を設定するための申請を、レジストリに提出する

### レジストリが行うこと
- ネームサーバー情報をレジストリデータベースに登録し、レジストリの関するネームサーバーにその情報を設定する
    - レジストリと登録者の関係がDNSにおける親子関係になる

# DNSの構成要素

### スタブリゾルバー
- 名前解決の窓口のような役割を持ち、パソコンやスマホで動作する （ブラウザ、アプリ）
- 自身では名前解決を行わず、予め設定されたフルリゾルバーに名前解決の依頼を出す（名前解決要求）

### フルリゾルバー
- スタブリゾルバーから名前解決要求を受け付けて名前解決を行い、結果をスタブリゾルバーに返す
- スタブリゾルバーから名前解決要求を受け付けたフルリゾルバーは、以下の2つを行う
    - 名前解決を行う
    - 名前解決の際に得られた情報を蓄える（キャッシュ）

### 権威サーバー（ネームサーバー）の役割
- 自分が委任を受け付けたゾーンの情報と、自分が委任しているゾーンの委任情報を保持している
- ゾーンの設定内容（ゾーンデータ）を「リソースレコード」という形で保持する

### リソースレコード
| 項目 | 意味 |
| ---- | ---- |
| ドメイン名 | example.jp |
| TTL | キャッシュの保持時間 |
| クラス | ネットワークの種類（IN） |
| タイプ | 情報の種類 |
| データ | クラスとタイプによって異なる、リソースレコードのデータ |

### リソースレコードのタイプ
| 項目 | 意味 |
| ---- | ---- |
| A | IPv4 |
| AAAA | IPv6 |
| NS | 権威サーバーのホスト名 |
| MX | 電子メール |

# DNSの処理の効率化と可用性の向上

### キャッシュ
- フルリゾルバーが権威サーバーの応答を保持することで2回目の名前解決に要する負荷と時間を軽減できる

### ネガティブキャッシュ
- 目的のリソースレコードが存在しなかったという結果を保持する

### TTL
- キャッシュの保持時間
- リソースレコードに含まれる

### ゾーン転送
- 同じゾーンデータを持つ権威サーバーを複数台設置する仕組み
- プライマリサーバー：コピー元となる権威サーバー
- セカンダリサーバー：コピー先となる権威サーバー

### RTT
- 問い合わせを送ってから応答が返るまでの時間
- 複数の権威サーバーがある場合、RTTをチェックして時間の短い権威サーバーを問い合わせる

# 参考文献
- [DNSがよくわかる教科書](https://amzn.asia/d/6TF9Lzh)
localStorageから文字列を取得したとき""（セミコロン）で囲われてしまうときの対処法

## はじめに
Reactを触りはじめて、localStorageの使い方を知りましたが、うまく文字列を扱えなかったので、備忘録として残しておきます。

## やりたいこと

- ローカルストレージから文字列を取得したい
- “”で囲われていない形にしたい

## エラー内容

- 以下のようになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875060/9402d3c3-cc91-a5d5-8090-1a20a6a0aed5.png)


## 原因

- JSON形式で保存されているデータをそのまま使用している

```tsx
import { useContext, useEffect } from "react";
import { AuthContext } from "../contexts/AuthContext";

const USER_NAME_KEY = "user-name";

export const useAuth = () => {
  const { isLoggedIn, setIsLoggedIn, userName, setUserName } =
    useContext(AuthContext);

  const login = () => {
    if (!isLoggedIn && userName) {
      setIsLoggedIn(true);
      // ここで意図的にJSON形式で保存している
      localStorage.setItem(USER_NAME_KEY, JSON.stringify(userName));
    }
  };
	.
	.
	.
  useEffect(() => {
    const loginUser = localStorage.getItem(USER_NAME_KEY);
    if (loginUser) {
    　// JSON形式のままuserNameにセットしている
      setUserName(loginUser);
      setIsLoggedIn(true);
    }
  }, []);
  .
  .
  .
 
```

## 解決策

- JSON.parse()を使ってJSONデータをパースして中身を取り出す

```tsx
	.
	.
	.
  useEffect(() => {
    const loginUser = localStorage.getItem(USER_NAME_KEY);
    if (loginUser) {
    　// JSON形式をパースして文字列をuserNameにセットする
      setUserName(JSON.parse(loginUser));
      setIsLoggedIn(true);
    }
  }, []);
  .
  .
  .
 

```

### 結果

- 無事に””をなくした状態で文字列を取得できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875060/9b28c7c3-ad3c-8b88-e565-2eb30754d24f.png)
Amplify Gen2* Amplify Gen2 * Vite リポジトリ公開

### 背景
Amplify Gen2になりコードベースで管理できるようになったのですが、参考コードがまだ少ないように思うので、publicリポジトリとしました。

### 使い方,概要
Readme.mdに記載しています。

### リポジトリ
https://github.com/tominaga-tora/bento-react-amplify

### 公式docs
https://docs.amplify.aws/react/how-amplify-works/
勾配クリッピング

勾配クリッピング（Gradient Clipping）は、再帰型ニューラルネットワーク（RNN）における勾配爆発問題を軽減するために使用されるテクニック。

## 概要

勾配クリッピングは、バックプロパゲーション中に計算される勾配の大きさを制限することで、勾配爆発問題を防ぐ手法。
具体的には、勾配ベクトルの大きさ（ノルム）が事前に設定された閾値を超えた場合に、勾配ベクトルを調整して閾値以下に抑える操作を行う。

LSTMやGRUなどのゲート付きRNNアーキテクチャと組み合わせて使用されることが多い。

## 勾配爆発問題

時系列データを扱うRNNでは、長期依存関係を学習する際に勾配爆発＆勾配消失問題が発生する。
このうち勾配爆発は、BPTT (Backpropagation through time) の過程で、勾配が指数関数的に増大してしまう現象。
勾配爆発が発生すると、モデルのパラメータが不安定になり、学習が困難になる。

## 勾配クリッピングの手法

主に2つの方法：

1. ノルムベースのクリッピング
2. 要素ごとのクリッピング

### ノルムベースのクリッピング Norm clipping

勾配ベクトル全体のノルムを計算し、それが閾値を超えた場合にベクトル全体をスケーリングする。
勾配の方向を保持しつつ、大きさのみを調整する。

手順：
1. 勾配ベクトル $g$ のノルム $||g||$ を計算
2. $||g||_ > threshold$ なら、$g = \frac{threshold}{||g||} * g$

```python:Global Norm Clipping in Tensorflow
# Compute gradients
grads = tf.gradients(loss, vars)

# Compute global norm
global_norm = tf.global_norm(grads)

# Clip global norm
clipped_grads = tf.clip_by_global_norm(grads, clip_norm=1.0)

# Apply clipped gradients
optimizer.apply_gradients(zip(clipped_grads, vars))
```

### 要素ごとのクリッピング Value clipping

各勾配要素を個別に指定された範囲内（例：`[-threshold, threshold]`）にクリッピングする。
実装が簡単だが、勾配ベクトルの方向が変わる可能性がある。

手順：
各勾配要素 $g_i$ に対して：
`g_i = max(min(g_i, threshold), -threshold)`


```python:Value Clipping in Tensorflow
# Compute gradients
grads = tf.gradients(loss, vars)

# Clip gradients
clipped_grads = [tf.clip_by_value(g, -1.0, 1.0) for g in grads]

# Apply clipped gradients
optimizer.apply_gradients(zip(clipped_grads, vars))
```

## 勾配クリッピングの利点

1. 学習の安定化：勾配爆発を防ぎ、モデルの学習が安定する
2. 収束の促進：極端に大きな勾配更新を防ぐことで、最適解への収束を促進
3. 汎化性能の向上：過剰な重みの更新を抑制し、過学習を軽減する効果がある

## 注意点

1. 閾値の選択：適切な閾値の選択が重要で、タスクやモデルの構造によって最適値が異なる
2. 計算コスト：追加の計算が必要となるため、わずかに学習速度が低下する可能性がある
エンジニアリング組織論への招待のすすめ

# はじめに
PdMを目指して学習していて、「[エンジニアリング組織論への招待](https://gihyo.jp/book/2018/978-4-7741-9605-3)」は読んでおくといいよとおすすめされて読み始めました。
読み始めたところ、この本はエンジニア全員読んだ方がいいなと感じたのでおすすめポイントを紹介したいと思います。
# オススメできるポイント
1. 仕事の進め方が明確になる
    仕事を行うときはいくらか不確実な要素があります。そのような不確実性と向き合いながらどのように進めるといいかがわかりやすく解説されています。
    そして、難しいノウハウが書いてあるわけではなく誰でもできそうなことで実践すると解決できそうなことが書いてあるので読んですぐ行動に移せる点がとてもいいと思いました。
1. マネージャーの思考が理解できる
    仕事をしていてマネージメントする側の人の想定力の高さに驚くことが良くありました。どうしてそこまで想定して物事を考えられるんだろうと思っていましたが、答えはこの本にありました。誰もがいきなり想定できるわけではなく、どうすれば想定できる範囲まで具体化できるかの手法が記載されていたので繰り返していけば自分も同じような想定ができると思いました。
1. 他人との接し方がわかる
    比較的他人と接するのはうまい方だと思っていましたが、自分の思いつかないような接し方のパターンを学ぶことができました。この本を読んで人と接していけばみんなが幸せになれるのになと思いました。
# 最後に
これまで読んだ中でもトップレベルにいい本だったので今すぐぽちったほうがいいです。
IT未経験がIT業界に転職した話

# IT未経験がIT業界に転職した話

はじめまして。川添と申します。  
今年の4月に私はIT未経験者として株式会社に入社しました。  
今回、で日々学んだことをブログとして書く機会をいただきました。  
そこで今回は、私がIT未経験からIT業界に転職した経緯やHESで包み隠さず書いていこうと思います。

## 目次

- 私の経歴
- IT未経験からエンジニアを目指したきっかけ
- 株式会社に入社した理由
- 今後の目標（3年後）
- 何をこのブログで書いていくのか

## 私の経歴

大学は地元の国立大学の経済学部に進学しました。  
就職先は早ければ5年目から海外駐在のチャンスがあるという魅力に惹かれて  
大手住設メーカに入社し、法人営業を約4年ほど行いました。  
会社に入社してから海外駐在を目標に勤務しておりましたが、  
4年目の時にコロナの影響で海外赴任の制度が5年目から8年目に変わったのを  
上司から知らされその時の私はすぐにでも海外に行きたいという気持ちが抑えられず、次の当てがないまま会社を退職しました。

## IT未経験からエンジニアを目指したきっかけ  
会社を退職後、東欧のジョージアという国で「ノマドプログラム」  
というものに参加しました。そのプログラムの講師の方の紹介で  
フリーランスのエンジニアの人に出会いました。  
その方はIT未経験からフリーランスのWebエンジニアとして5年ほど  
活動しており、私の理想とする海外を転々としながら生活をしており、  
年収も1000万ほどということでした。  
その人ができるなら自分もそのぐらいなれるだろうと思い、  
その場でエンジニアになることを決意し、半年ほどITについて学習しました。

## 株式会社に入社した理由  
いくつかIT会社さんに内定をいただきましたが、  
その中でHESに入社することを決めた理由を書きたいと思います。  
大きく分けると２つあります。  

1つ目が頑張り次第では自分のやりたいことを実現できる環境があると思ったところです。  
HESの最終面接では直接会社の代表と直接話す機会があり、自分がこれからどうしていきたいかや  
将来は海外で働きたいという旨もしっかり伝えました。  
そのことををふまえた上で代表からは頑張り次第ではそのような海外案件の機会も一緒につくる  
ことが可能であることと、もともとは地元九州の部署に配属予定だが、将来のことを考えると  
東京本社のほうがいいのではという提案をいただき、一人一人のことをしっかり考えてくれえる  
会社だなと思いました。  

2つ目は他のIT会社に比べて給与水準や福利厚生等が手厚かったところです。  
IT未経験からの中途入社の場合、私が内定いただいた、HES以外のIT会社さんに提示  
いただいた給料は新卒ほどの月給で賞与なし、住宅補助なしという内容でした。  
それに比べHESは前職の給与を考慮いただき、賞与・住宅補助、資格取得の費用負担制度も  
あり、社員の成長にもしっかりと力を入れていることを面接時にもお伝えいただきました。

## 今後の目標
今後の目標として3年後には海外で働けることができるくらいの年収1000万ぐらい  
稼げるほどの技術等を身に着けたいと思っております。  
今の自分のITレベルとしては最近やっとサーバーというものがどういうものなのか説明できるように  
なった最底辺レベルです。  
もちろん今の自分の状況ではほど遠い目標なのはわかっておりますが、実現したいと思います。  
現在、自分がメインでやっている業務としては大手のお客様の見積作成支援や機器導入支援を行っており、  
ストレージのことやバックアップのことなど様々なITについて日々学ぶ機会があるため一つ一つ理解しながら  
それと並行して基本情報試験・応用情報試験などの資格試験を通してITについての基礎もしっかりと勉強していきたいと思います。  
また、ありがたいことにHESには不明なことがあれば教えていただける先輩社員がたくさんいます。  
そういった恵まれた環境のもと、目標実現のためにたくさんやることはありますが、あきらめずに取り組みます。

## 何をこのブログで書いていくのか  
今回、でブログを書かせていただく機会をいただきましたが、  
このブログではIT全くの未経験が日々業務を通して学んだことや調べたことを書いていこうと思います。  
おそらく、わからないことばかりで右往左往しながらタスクに取り組む様子を書くことになるとは思いますが、  
温かく見守っていただけると幸いです。
大半のOSSに対して速攻でタイポを発見できるワンライナー

## タイポを見つけちゃおう

[typos](https://github.com/crate-ci/typos)を使います。

```
typos --format brief --color always | ruby -e 'puts ARGF.readlines.sort_by{|l| l[/`.*?`/].size}'
```

複数行に分けると、

```
typos --format brief --color always |
ruby -e 'puts ARGF.readlines.sort_by{|l| l[/`.*?`/].size}'
```

です。これで、大半のOSSに対してタイポを発見できると思います。
これだと、コード本文ではなく、Changelogなどのタイポをたくさん見つけてしまう場合は、[fdコマンド](https://github.com/sharkdp/fd)などを使って、拡張子や除外ディレクトリを指定してみましょう。例えば、以下の例では、Crystalのファイル `.cr` のみを検索し、`lib` ディレクトリを除外します。

```
fd -E 'lib/*' -e cr \
  | typos --format brief --color always --file-list - \
  | ruby -e 'puts ARGF.readlines.sort_by{|l| l[/`.*?`/].size}'
```

## タイポを発見できたらプルリクエストを送ってみよう

実際にCrystalに対して、上記のワンライナーで発見できたタイポ修正のプルリクエストを送って取り込んでもらいました。

https://github.com/crystal-lang/crystal/pull/15080

## 何をしているのか？

何をしているのかというと、[typos](https://github.com/crate-ci/typos)コマンドを使ってタイポを発見して、Rubyのワンライナーを使って、文字列の長い単語の順番に並び替えています。

長い単語の方がタイポの可能性が高いためです。

## タイポ修正は、メンテナにとってもやさしいプルリクエスト

さて、タイポ修正はOSSへの貢献で最も簡単なものです。

そして、実はメンテナに対しても優しいプルリクエストなのです。
確かに、普段からたくさんのプルリクエストを受け取ってるメンテナの中には「なんだタイポ修正かよ……。」と思う方もいらっしゃるかもしれません。けれども、それはほんの一瞬の出来事です。

タイポフィックスのプルリクエストのレビューには、精神的なエネルギーがほとんど要りません。

さっと確認してポチッとマージボタンを押すだけです。

だからタイポ修正は、メンテナにとっても負担が少ない、やさしいプルリクエストなのです。

そしてタイポフィックスでも一回コミットすると、そのプロジェクトに対して少し愛着がわきます。

おすすめです。コミットしていこう。
JISOU 課題1「学習記録アプリ」振り返り

# はじめに

お疲れ様です、りつです。

参加させていただいているプログラミングスクール「[JISOU](https://projisou.jp/)」の課題1が完了しました。
今回は、その振り返りも兼ねて記事を書きました。

:::note info
課題1の詳細な内容については @Sicut_study さんの記事で紹介されていますので、ご興味ある方はご覧になってみてください！
:::

https://qiita.com/Sicut_study/items/7d8c6f309dddda1a3961

# 何をやったのか

React + JavaScriptで学習記録アプリを作成しました。

https://github.com/ritsu21ctws/study-record-app

完成形は以下のgifの通りです。
（今回の実装ではCSSなどのスタイリングはほとんど行っておりません）

![レコーディング-2024-10-28-192148.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3911933/ca9dd0b2-db36-7a03-d88b-9329a7f9ffbf.gif)

## アプリの内容

- 学習内容と学習時間の登録ができる
- 入力欄に入力した値は、リアルタイムで「入力されている学習内容」「入力されている時間」に反映される
- 登録ボタン押下で、入力した学習内容と学習時間が一覧に追加される
- 登録した学習時間の累計が表示される
- 入力欄に未入力の項目がある、または入力欄が初期値のままの場合、登録ボタン押下でエラーメッセージが表示される
    - 正しく入力されている場合は登録ボタンを押すとエラーが消える

# 以前と比べてどのように成長したのか

- Reactによるデータの扱い方のイメージが少し持てるようになった
- JavaScript特有の記法（アロー関数の省略記法など）を知った

# 大変だったところ

- stateの挙動（値が変わったらすぐレンダリング）が最初とっつきにくく感じた
- JavaScript特有の省略記法に慣れること
- 入力された値をstateを使ってオブジェクトを配列に追加する処理の実装中、うまく渡せずundefinedで渡ってしまったこと
    - 値の渡し方が悪かったため、想定した配列構造になっていなかった
- あるメソッド内で、setStateの更新直後にstateの値を取得しようとしたところ、更新前の値が取得されてしまい意図しない挙動になってしまった
    - stateのこちらの挙動について、実は課題着手前に視聴したUdemy動画内でもちらっと触れられていたのですが、失念していました
- 学習時間の合計値を算出するために`reduce`メソッドを使用したが、初期値を指定しない場合の挙動に惑わされた

:::note info
JavaScriptの省略記法などについて別途記事にまとめていますので、よければご覧ください！
:::

https://qiita.com/ritsu21ctws/items/5f1c97a535d6615993d9

# 気づきなど

- オブジェクトの省略機能を使うために、変数名に気を付けた方がよい
    - 登録処理実装時に、うっかりモック用データで用意した変数と別の変数を定義してしまったためにオブジェクトの省略記法が使えず、変数名の修正が必要になってしまいました
 - 意図しない挙動になった場合はとにかくconsoleを確認
    - 変数やstateの値が意図するものと異なるのであれば、consoleでまずは値を確認
        - なぜその値になったか仮説を立てて、怪しい部分をconsoleに出力して確認
    - もちろん、エラー内容もしっかり確認する
- 実装する前に、実装する処理（例えば、このボタンを押下したらstateの値はどうなっているべきか）などをイメージしてから実装すると進めやすく感じた

# おわりに

環境構築も含めると6時間程かかりました（実装だけであればおそらく4時間くらい？）

エラーになってしまったり、やや詰まってしまった部分はあったものの、やはり実際に動くものを自分の手で作れることは嬉しいものですね！

useStateの非同期の件など、「そんな挙動になるんか！？」という驚きもありつつ、楽しく実装できました。

引き続きReactの学習を進めていきたいと思います！

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼

https://projisou.jp
Arch Linux で KVM/QEMU を使う

※特筆ない場合通常ユーザ権限で実行するものとします．

## 1. 環境の対応状況を調べる
```bash:ハードウェアの対応状況
LC_ALL=C lscpu | grep Virtualization
```
VT-x もしくは AMD-V と帰ってきたら OK です．

```bash:カーネルの対応状況
zgrep CONFIG_KVM /proc/config.gz
---
CONFIG_KVM_GUEST=y
CONFIG_KVM_DEBUG_FS=y
CONFIG_KVM_MMIO=y
CONFIG_KVM_ASYNC_PF=y
CONFIG_KVM_VFIO=y
CONFIG_KVM_GENERIC_DIRTYLOG_READ_PROTECT=y
CONFIG_KVM_COMPAT=y
CONFIG_KVM=m
CONFIG_KVM_WERROR=y
CONFIG_KVM_INTEL=m
CONFIG_KVM_AMD=m
CONFIG_KVM_AMD_SEV=y
# CONFIG_KVM_MMU_AUDIT is not set
```
のように全てが y もしくは m なら OK です．


## 2. QEMU のインストール
```bash:
yay -S virt-manager qemu 
sudo systemctl enable --now libvirtd
```
GUI フロントエンドに virt-manager を使います．
QEMU と virt-manager のインストールが完了したら libvirtd を有効にします．


## 3. libvirt グループへの登録
```
sudo usermod -aG libvirt (ユーザ名)
```

virt-manager 経由で QEMU を触れるように  libvirt グループへ所属させます

## Virtio を使う
Virtio の Windows 用ドライバの ISO イメージを含んだ AUR パッケージが用意されていますが，ISO イメージのダウンロードがとてつもなく遅いので aria2c を使って落としたほうがいいです．

```bash:
yay -S aria2
aria2c -x16 -c https://fedorapeople.org/groups/virt/virtio-win/direct-downloads/latest-virtio/virtio-win.iso
```
【ミートアップ】令和版！エンジニアのキャリア戦略を考えよう（10/24）に参加してきた！

# はじめに
<!-- 発端や概要を記載 -->
本記事ではLiON様主催リアルイベントの感想記事になります。
個人的に勉強、タメになったことをつらつらと書かせていただきます。

投稿主はブログに書き慣れておらず、拙い文章が続くかと思われますが
暖かい目で見てくださると幸いです汗

# 目次
<!-- タイトルとアンカー名を編集 -->
1. イベントの趣旨
1. 学びになったこと
1. まとめ
1. 参考文献

<!-- 各チャプター -->
# イベントの趣旨
「令和版！エンジニアのキャリア戦略を考えよう」とタイトルにもある通り
ゲストに日本PostgreSQLユーザ会　理事長　喜田紘介 氏がキャリア戦略についてインタビュー形式で成功体験を披露していただきました。

また本コミュニティメンバーによるLTもあり、最後に自己紹介/交流会といった3段構成でした。

# 学びになったこと

今回のイベントで一番学びになったことは、**行動する**ということです。
この「行動する」という言葉には、
- 自分から発信する（質問する）
- 交流を増やす
- 技術を探求する

といった意味が含まれます。

私自身、IT関連や遊びのイベントに**参加する**ことはよくありますが
アクションを起こさずに、参加で終わってしまうことが多かったです。

LiON様主催イベントでは、「Qiitaに記事を書くまでが勉強会！」といった趣旨があったり、
喜田紘介氏は「自分から発信することで、周囲に自分を認知してもらうことが大事」と仰っていました。
これはイベントだけでなく、勉強や業務にも言えることだと思います。
私自身インプットはできますが、アウトプットは苦手です。

本イベントでは、普段の受け身スタンスではダメだ！と思い
多少の失敗を覚悟した上で、喜田紘介氏やコミュニティメンバーに質問しましたが両者共に快くレスポンスしてくださり、同時に

- 他者との繋がり
- 失敗を恐れない勇気
- 体系的な知識が身につく

といったアウトプットならではの効果が得られることに気づきました。

本イベントで得た経験をキッカケに
今後は受動的な思考から能動的な思考に切り替え、行動力を身につけたいと思いました。

# まとめ
なんか、自分の感想をダラダラ長く書いてしまって恥ずかしいのですが
個人的には非常に面白かったイベントだったので色々書かせていただきました汗

今後の目標としては、イベントに参加して行動することで
周囲の方々に興味を持っていただけるような人になりたいと思いました。

あと、自己紹介で101勉強会の講師を目指していることを公の場で発言したのですが
後に引けない状況を作れてよかったです笑

今後も向上心を保ちつつ、技術を磨いていくよう頑張ります！

# 参考記事
- [LinuC Open Network](https://linuc.community/)
- [【ミートアップ】令和版！エンジニアのキャリア戦略を考えよう（10/24](https://lion.connpass.com/event/333109/)
paizaラーニング問題集「長テーブルのうなぎ屋」を解いてみた

https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table

▼考え方

この問題を解くために私が考えた内容1.～4.を以下に示します。

1. 座席番号bの座席を始点として、グループの人数a人を1人ずつ座らせていくことを考えます。1人ずつ、先客に座られているか否かをチェックします。

2. 座席番号nの次は座席番号1に座らせる必要があるため、座席番号を示す添え字jが1になるように計算します。

3. 先客に座られていない場合(if j in s が False)は座ることができます。座ったことを示すためリストsに(座席番号を示す添え字j)を追加します。先客に座られていた場合(if j in s が True)は、題意よりグループ全員が座ることができません。考え方4に進みます。

4. グループ全員が座ることができない場合は、グループの一部が座った座席番号jをsから取り除きます。

▼コード
```py
########## 処理0(準備) インプット,リストや変数定義 ###########

n,m = map(int,input().split())

# s: 先客に座られている座席の座席番号を格納するリスト
s = []

# senkyaku_flag: 先客に座られていたこと(senkyaku_flag = 1)を示すフラグ用変数
senkyaku_flag = 0

########## 処理1 長テーブル着席処理 ###########

for _ in range(m):
    
    a,b = map(int,input().split())

    # 考え方1.
    for j in range(b,a+b):

        # 考え方2.
        if j > n:
            j = j % n

        # 考え方3.
        if j in s:
            senkyaku_flag = 1
            break
        else:
            s.append(j)

    # 考え方4.
    if senkyaku_flag == 1:
        for _ in range(j-b):
            s.pop()
   
    senkyaku_flag = 0

print(len(s))
```
【個人的にはFlaskが最高】2024年版 Pythonフレームワーク完全比較

## 目次
1. [はじめに：なぜ私がFlaskを選ぶのか](#はじめに)
2. [フレームワーク選定の重要性](#フレームワーク選定の重要性)
3. [2024年注目のフレームワークランキング](#ランキング)
4. [各フレームワークの詳細比較](#詳細比較)
5. [Flaskをおすすめしたい場面と実践的なTips](#flask-tips)
6. [状況別おすすめフレームワーク](#状況別)
7. [まとめ](#まとめ)

## はじめに：なぜ私がFlaskを選ぶのか

個人的にFlaskを選ぶ理由は以下の3点です：

1. **シンプルさ**: 必要最小限の機能から始められる美しさ
2. **自由度**: フレームワークに縛られない設計の柔軟性
3. **学習曲線**: 初学者にも優しく、徐々に深く学べる構造

## フレームワーク選定の重要性

フレームワーク選定で考慮すべき重要な要素：
- システムの拡張性と保守性
- 開発速度とチーム生産性
- パフォーマンスとスケーラビリティ
- エコシステムと運用コスト

## 2024年注目のフレームワークランキング

### 1. FastAPI（🥇総合評価）
- **採用率**: ★★★★☆
- **学習曲線**: ★★★★★
- **パフォーマンス**: ★★★★★
- **コミュニティ**: ★★★★☆

### 2. Django（🥈安定性重視）
- **採用率**: ★★★★★
- **学習曲線**: ★★★☆☆
- **パフォーマンス**: ★★★★☆
- **コミュニティ**: ★★★★★

### 3. Flask（🥉柔軟性重視）
- **採用率**: ★★★★☆
- **学習曲線**: ★★★★★
- **パフォーマンス**: ★★★★☆
- **コミュニティ**: ★★★★☆

### 4. Starlette（パフォーマンス特化）
- **採用率**: ★★★☆☆
- **学習曲線**: ★★★★☆
- **パフォーマンス**: ★★★★★
- **コミュニティ**: ★★★☆☆

## 各フレームワークの特徴比較

### パフォーマンス比較表
```
Framework  | リクエスト処理速度 | メモリ使用量 | 同時接続数
FastAPI    | ⭐⭐⭐⭐⭐        | ⭐⭐⭐⭐    | ⭐⭐⭐⭐⭐
Django     | ⭐⭐⭐           | ⭐⭐⭐      | ⭐⭐⭐
Flask      | ⭐⭐⭐⭐         | ⭐⭐⭐⭐    | ⭐⭐⭐⭐
Starlette  | ⭐⭐⭐⭐⭐        | ⭐⭐⭐⭐⭐   | ⭐⭐⭐⭐⭐
```

### 機能比較表
```
Framework  | ORM | Admin画面 | 認証 | API文書生成 | テスト機能
FastAPI    | ×   | ×        | △    | ⭐⭐⭐⭐⭐  | ⭐⭐⭐⭐
Django     | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐
Flask      | ×   | ×        | △    | ⭐⭐⭐     | ⭐⭐⭐⭐
Starlette  | ×   | ×        | △    | ×         | ⭐⭐⭐
```

## Flaskをおすすめしたい場面と実践的なTips

### プロジェクト構成のベストプラクティス
```
myproject/
├── app/
│   ├── __init__.py
│   ├── models/
│   ├── views/
│   ├── services/
│   └── utils/
├── tests/
├── config.py
└── run.py
```

### 実践的なコード例

1. **シンプルなCRUD API**
```python
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

todos = []

@app.route('/todos', methods=['GET', 'POST'])
def handle_todos():
    if request.method == 'POST':
        todo = request.json
        todos.append(todo)
        return jsonify(todo), 201
    return jsonify(todos)
```

2. **よく使う拡張機能セット**
```python
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_caching import Cache
from flask_login import LoginManager

app = Flask(__name__)
db = SQLAlchemy(app)
migrate = Migrate(app, db)
cache = Cache(app)
login_manager = LoginManager(app)
```

## 状況別おすすめフレームワーク

1. **API開発重視**: FastAPI
2. **フルスタックWeb開発**: Django
3. **マイクロサービス**: FastAPI/Flask
4. **プロトタイピング**: Flask
5. **高パフォーマンス要求**: Starlette

## まとめ

フレームワークの選定基準：
1. プロジェクトの規模と要件
2. チームの技術スタック
3. スケーラビリティの要件
4. 開発期間と保守性

個人的なおすすめ：
- プロトタイピング → Flask
- 大規模Webアプリ → Django
- 高速API開発 → FastAPI
- マイクロサービス → Flask/FastAPI

最後に：フレームワークは単なるツールです。プロジェクトに適したツールを選択する判断力を持つことが最も重要です。
ゲート付きRNN：LSTMとGRU

LSTMとGRUは、共に長期依存関係を学習するために設計された**ゲート付きRNN**の変種。

## 特徴
### LSTM

- 構造：3つのゲート（入力ゲート、忘却ゲート、出力ゲート）とセル状態（記憶セル）
- 勾配消失問題を緩和
- パラメータ数が多く、計算コストが高い

### GRU

- 構造：2つのゲート（リセットゲート、更新ゲート）
- LSTMを簡略化　→同等の性能をより少ないパラメータ数で実現
- 計算コストがLSTMより低い

## 構造と動作
### LSTM

1. 忘却ゲート (Forget Gate)
2. 入力ゲート (Input Gate)
3. 出力ゲート (Output Gate)
→セル状態(記憶セル)$C_t$ ＆隠れ状態$h_t$の出力

![LSTM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523626/841c5365-3ff7-a7f3-c1a4-1102fbf9f698.png)

#### 1. 忘却ゲート Forget Gate
「どの情報を捨てるか」を決定<br></br>
$f=σ(x_t∗W_t^{(f)}+h_{t−1}∗W_h^{(f)}+b^{(f)})$
- 入力: 前の隠れ状態 $h_{t-1}$ と現在の入力 $x_t$
- 出力: $f$　→セル状態 $C_t$ 更新に利用
<sub>※シグモイド関数を挟むため $-0 \leq f \leq 1$（0: 完全に捨てる、1: 完全に保持）</sub>

#### 2. 入力ゲート Input Gate

「新しい情報をどの程度セル状態に加えるか」を決定<br></br>
 $i=σ(x_t∗W_x^{(i)}+h_{t−1}∗W_h^{(i)}+b^{(i)})$
 $g=tanh(x_t * W_x^{(g)} + h_{t-1} * W_h^{(g)} + b^{(g)})$

- 入力: $h_{t-1}$ と $x_t$
- 出力: 
  - $i$: 更新の度合い
  - $g$: 新しい候補値
<sub>※tanh関数を挟むため $-1 \leq g \leq 1$（0: 完全に捨てる、1: 完全に保持）</sub>

#### 3. 出力ゲート Output Gate

「どの情報を出力するか」を決定<br></br>
$o=σ(x_t∗W_x^{(o)}+h_{(t−1)}∗W_h^{(o)}+b^{(o)})$
- 入力: $h_{t-1}$ と $x_t$
- 出力: $o$　→隠れ状態 $h_t$ 更新に利用

#### 記憶セルの更新 Update Cell State
- セル状態 $C_t$ 出力
$C_t = {f_t}\odot{C_{t-1}} + i\odot{g}$　<sub>（※活性化関数は使われない）</sub>
<br></br>
- 隠れ状態 $h_t$ 出力
$h_t = {o}\odot{tanh(C_t)}$



### GRU

1. リセットゲート (Reset gate)
2. 更新ゲート (Update gate)
→最終的な隠れ状態$h_t$の出力

![GRU.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523626/abaf08ad-acd5-349e-bf1a-2bf7d8a027d7.png)

#### 1. リセットゲート Reset Gate

「過去の情報をどの程度忘れるか」を決定

$r = σ(x_t * W_x^{(r)} + h_{t-1} * W_h^{(r)} + b^{(r)})$


#### 2. 更新ゲート Update Gate

「どの情報を保持し、どの情報を更新するか」を決定

$\tilde{h} = tanh(x_t * W_x + ({r}\odot{h_{t-1}}) * W_h + b)$

$z = σ(x_t * W_x^{(z)} + h_{t-1} * W_h^{(z)} + b^{(z)})$

#### 最終的な隠れ状態を更新

$h_t = {(1 - z)}\odot{h_{t-1}} + {z}\odot{h̃_t}$

<sub>${(1 - z)}\odot{h_{t-1}}$ : 忘却機能、${z}\odot{h̃_t}$ : 入力機能</sub>

:::note info
$r$ は*今の情報と組み合わせるときに*過去の情報をどの程度忘れるかを計算
$z$ は、*次の時刻に伝播していくときに*前の時刻の情報をどれだけリセットするかを決める
:::

## 比較

|  | LSTM | GRU |
|---|---|---|
| **ゲートの数** | 3<br> (入力ゲート、忘却ゲート、出力ゲート) | 2<br> (更新ゲート、リセットゲート) |
| **パラメータの数** | 多い<br> (各ゲートに対して重みとバイアスが存在するため) | 少ない<br> (ゲートが一つ少ないため) |
| **記憶セル** | 有り<br> (長期的な依存性を学習するため) | 無し<br> (隠れ状態が直接情報を保持する) |
| **計算の複雑さ** | 複雑<br> (3つのゲートとセル状態の存在により) | シンプル<br> (2つのゲートとセル状態の欠如により) |
| **学習能力** | 高い<br> (より多くのパラメータとゲートにより、より複雑なパターンを学習可能) | 低い<br> (パラメータとゲートが少ないため、LSTMほど複雑なパターンを学習するのは難しい) |
| **計算速度とメモリ使用量** | より遅い/大きい<br> (パラメータが多いため) | より速い/小さい<br> (パラメータが少ないため) |
| **使用場面** | より複雑なタスクや長期的な依存関係の学習が必要である | 小規模なデータセットや計算リソースが限られている |




Image License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
2024年版：エンジニアが今、学ぶべきJavaScriptフレームワーク完全比較

こんにちは！今回は、現役エンジニアとして押さえておくべきJavaScriptフレームワークについて、案件状況や今後の展望を踏まえてランキング形式で解説していきます。

## 目次
1. [フレームワーク選定の重要性](#フレームワーク選定の重要性)
2. [2024年注目のフレームワークランキング](#2024年注目のフレームワークランキング)
3. [各フレームワークの詳細比較](#各フレームワークの詳細比較)
4. [結論：あなたの状況別おすすめフレームワーク](#結論)

## フレームワーク選定の重要性

フロントエンド開発において、適切なフレームワークの選定は以下の点で非常に重要です：

- プロジェクトの生産性に直結
- チーム全体の開発効率に影響
- 長期的なメンテナンス性
- 採用市場での価値

## 2024年注目のフレームワークランキング

### 🥇 1位：React
- **採用率**: ★★★★★
- **学習曲線**: ★★★☆☆
- **パフォーマンス**: ★★★★☆
- **コミュニティ**: ★★★★★

**メリット**:
- 圧倒的な市場シェアと豊富な求人
- 豊富なライブラリとエコシステム
- Meta社によるサポート
- Next.jsなど強力なフレームワークの存在

**デメリット**:
- 状態管理の選択肢が多すぎて混乱する
- 頻繁なアップデートへの追従が必要
- プロジェクト設計の自由度が高すぎる場合も

### 🥈 2位：Vue.js
- **採用率**: ★★★★☆
- **学習曲線**: ★★★★★
- **パフォーマンス**: ★★★★☆
- **コミュニティ**: ★★★★☆

**メリット**:
- 日本での人気が高く案件も多い
- 学習コストが比較的低い
- 公式ドキュメントが充実
- Composition APIによる柔軟な開発

**デメリット**:
- グローバルでの採用率はReactに劣る
- エンタープライズでの採用例が比較的少ない
- サードパーティライブラリの選択肢がReactより少ない

### 🥉 3位：Svelte
- **採用率**: ★★★☆☆
- **学習曲線**: ★★★★★
- **パフォーマンス**: ★★★★★
- **コミュニティ**: ★★★☆☆

**メリット**:
- 優れたパフォーマンス
- 直感的な文法
- 少ない記述量で実装可能
- バンドルサイズが小さい

**デメリット**:
- 実務案件がまだ少ない
- エコシステムが発展途上
- 大規模アプリケーションでの実績が少ない

### 4位：Angular
- **採用率**: ★★★☆☆
- **学習曲線**: ★★☆☆☆
- **パフォーマンス**: ★★★★☆
- **コミュニティ**: ★★★★☆

**メリット**:
- エンタープライズでの採用実績
- TypeScriptとの相性が良い
- フルスタックなフレームワーク
- Googleによるサポート

**デメリット**:
- 学習曲線が急
- 小規模プロジェクトではオーバースペック
- 他フレームワークと比べて記述量が多い

## 各フレームワークの詳細比較

### パフォーマンス比較
```
Framework   | 初期ロード | 実行速度 | メモリ使用量
React      | ⭐⭐⭐⭐   | ⭐⭐⭐⭐  | ⭐⭐⭐
Vue.js     | ⭐⭐⭐⭐   | ⭐⭐⭐⭐  | ⭐⭐⭐⭐
Svelte     | ⭐⭐⭐⭐⭐  | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐
Angular    | ⭐⭐⭐    | ⭐⭐⭐⭐  | ⭐⭐⭐
```

### 学習リソース充実度
```
Framework   | 公式ドキュメント | 日本語情報 | サードパーティ教材
React      | ⭐⭐⭐⭐        | ⭐⭐⭐⭐    | ⭐⭐⭐⭐⭐
Vue.js     | ⭐⭐⭐⭐⭐      | ⭐⭐⭐⭐⭐   | ⭐⭐⭐⭐
Svelte     | ⭐⭐⭐⭐        | ⭐⭐⭐      | ⭐⭐⭐
Angular    | ⭐⭐⭐⭐        | ⭐⭐⭐      | ⭐⭐⭐⭐
```

## 結論：あなたの状況別おすすめフレームワーク

### キャリア重視の方へ
→ **React**
- 市場価値が最も高い
- 転職時に有利
- 大規模プロジェクトの経験が積める

### 学習効率重視の方へ
→ **Vue.js**
- 学習曲線が緩やか
- 日本語情報が豊富
- モダンな機能を網羅的に学べる

### 最新技術へのキャッチアップを重視する方へ
→ **Svelte**
- 次世代のアプローチを学べる
- パフォーマンスチューニングの知見が得られる
- コンパイラの仕組みを理解できる

### エンタープライズ開発を重視する方へ
→ **Angular**
- 大規模アプリケーションの設計が学べる
- TypeScriptベースの開発フロー
- テスト駆動開発の実践

## まとめ

2024年においては、Reactの市場独占が続く一方で、Vue.jsの安定した成長、Svelteの革新的なアプローチ、Angularの堅実な進化と、それぞれのフレームワークが特色を持って発展を続けています。

選定の際は以下の点を考慮することをお勧めします：

1. プロジェクトの規模と要件
2. チームの技術力と学習コスト
3. 長期的なキャリアプラン
4. 既存のプロジェクト資産

最後に、フレームワークは単なるツールであり、基礎となるJavaScript/TypeScriptの理解が最も重要である点を忘れないようにしましょう。
Windows環境でJumbo frameを使うためにMTUサイズを変更する

Jumbo frameを使うためにMTUサイズを変更した際のメモです。

「Jumbo frameを使うためにはMTUサイズを大きくしなきゃ！」「MTUサイズを変更しよう！」と思い、netshコマンドを実行してもMTUサイズを変更できなかったので、下記の方法でJumbo frameを有効化し、MTUサイズを変更しました。

## MTUサイズの確認
コマンドプロンプトで次のコマンドを実行する。
```
netsh interface ipv4 show interface
```
実行結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303978/c181da5e-773d-941c-f8cc-67ef6330acf3.png)


## ジャンボフレーム(Jumbo frame)の有効化
アダプタ設定を開き、対象のアダプタを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303978/0c173125-2961-4cdb-f867-f23f2d543c41.png)


構成（Configure）をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303978/adf3ce65-d826-ab5c-8e15-7eaffa63a9fe.png)

詳細設定タブからジャンボフレームを選択し、「9KB MTU」などを選択する。
アダプタによって選択できる幅や表記が異なるみたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303978/e4403c53-5862-73d9-0dfa-e65f1c9abd13.png)

netshコマンドでMTUサイズが変更されているかを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303978/396fb39f-7179-40c6-651a-8ad540001cf0.png)

## まとめ
WindowsでJumbo frameを使用するときは「ジャンボフレームを有効化」しましょう。
[Windows] Git の設定を SourceTree と VS Code WSL 時でも共通化する

Windows の Sourcetree に Git サービスの Bitbucket や GitHub のアカウントを連携後、  
WSL のファイルを Sourcetree と VS Code の双方で Git 管理できる様にするメモです。


## Sourcetree で WSL 上のファイルを管理対象に

WSL 上のファイルを Sourcetree で Git 管理対象にしようとすると以下のエラー画面が表示されました。

```
'git log' がコード 128 で終了しました: fatal: detected dubious ownership in repository at '//wsl.localhost/Ubuntu/home/[user-name]/projects/[project-name]'
To add an exception for this directory, call:

	git config --global --add safe.directory '%(prefix)///wsl.localhost/Ubuntu/home/[user-name]/projects/[project-name]'
 (\\wsl.localhost\Ubuntu\home\[user-name]\projects\[project-name])
```
※ `[user-name]` 以降は作業者のディレクトリ構成のとおり。

Sourcetree でターミナルを起動 (<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>) して素直に記載のコマンドを実行します。

```sh
$ git config --global --add safe.directory '%(prefix)///wsl.localhost/Ubuntu/home/[user-name]/projects/[project-name]'

# 設定の確認
$ cat ~/.gitconfig
...
[safe]
	bareRepository = explicit
	directory = %(prefix)///wsl.localhost/Ubuntu/home/[user-name]/projects/[project-name]
```

これで Sourcetree で対象のディレクトリを Git 管理できるようになりました。
(手抜きに親ディレクトリ `projects` を対象にした場合、エラーは消えませんでした)


## VS Code に設定を引き継ぐ

VS Code でコミットしようとするとユーザー情報が未設定のエラーが表示されます。

```
Make sure you configure your "user.name" and "user.email" in git.
```

ただ、Sourcetree では問題なくコミットできます。

どうも Sourcetree は `C:\Users\[user-name]` 配下、VS Code は `///wsl.localhost/Ubuntu/home/[user-name]` 配下の `.gitconfig` を参照するようで、設定ファイルが異なるようです。

この辺、Sourcetree で自動生成された設定に任せたい・共通化したいので、
VS Code のターミナルで Sourcetree と同じ .gitconfig を参照するように以下のコマンドを実行します。

```sh
$ git config --global --add include.path "/mnt/c/Users/[user-name]/.gitconfig"

# 設定の確認
$ cat ~/.gitconfig
[include]
        path = /mnt/c/Users/[user-name]/.gitconfig
```

WSL 上から C ドライブのファイルを参照させる場合、  
`C:/Users/[user-name]/.gitconfig` ではなく `mnt/c` でマウントしたファイルを参照させる必要があるみたいです。

これで VS Code と Sourcetree で共通の設定を利用できるようになりました。


## 余談：改行コードの自動変換を変更する

_(2025年5月22日追記)_

**TL;DR:** SourceTree でターミナルを起動、`core.autocrlf` を `input` or `false` に変更

作業中に **Biome** (コードフォーマッター・リンター) を走らせると、特に変更差分も表示されずにチェック対象のファイル全てが変更対象として表示されました。
ステージにあげると何れも変更が消えてしまったのですが、どうも改行コードが悪さをしてたようです。

改行コードは以下のコマンドで変更できます。

```sh
git config --global core.autocrlf input                       
```

この記事では SourceTree で生成された .gitconfig に乗っかる設定にしているので、**VS Code ではなく SourceTree でターミナルを起動**して変更してください。

VS Code で変更した場合、WSL 上の .gitconfig が変更されますが、Windows 本体の方は変更されません。
今回それで少しハマったため追記しました。

### `input` or `false`？

(設定の違いについてはコチラの記事では触れません)

`true` の状態で作業を進めてしまっている場合、手元のファイルは何れも CRLF になってしまっているので `input` にしておくのがお勧めです。  

今回、不要な変換で調査が必要になった事を考えると、
git で未だ何も作業してない場合は `false` が無難かもしれません。
(もし知見など有ればコメント等で教えてくださいませ🤲)
【恐怖】Pythonがターミナルで実行できなくなった。

# はじめに
今回わたしはPythonのコードをGCPにデプロイしようと思ったときに、いろいろ環境を触ってしまった原因でSSL証明書検証エラーに陥ってしまったようです...
恥ずかしながら、`Claude-3.5-Sonnet`くんと相談しながらいろいろとコマンド操作しているうちに変なことをしてしまったようです。

https://claude.ai/login?returnTo=%2F%3F

# 問題の症状
SSL証明書検証エラーが発生し、以下のようなエラーメッセージが表示されました
```
ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1006)
```

# 解決方法
Python の証明書を更新する！！
ターミナルで以下のコマンドを実行してください。
```
/Applications/Python\ 3.11/Install\ Certificates.command
```

::: note
本来は
```
/Applications/Python\ 3.x(Pythonのバージョンの数字) /Install\ Certificates.command
```

:::

これで治るはずです！

# これからの予防
### 環境変更の記録: 
   環境を変更する際は、行った操作を必ずメモしておきましょう。これにより、問題が発生した際に原因の特定やロールバックが簡単になります！

### 仮想環境の使用: 
   プロジェクトごとに仮想環境を作成し、システム全体に影響を与えないようにしましょう。
   
:::note info
自分の環境をわざわざ変えるからエラーが全体にでてしまうのです...
:::

***Pythonの仮想環境***
pipenvやvenvを使用して、Pythonプロジェクトごとに独立した環境を作成できます。

**↓**もっと分離したい時

***コンテナ型仮想環境***
Dockerの出番です！
コンテナを使うことで、OS レベルでの分離ができ、環境の再現性が高まります。
自分のローカル環境をわざわざ変えずに済むので、全体にエラーが波及するリスクも減らせます。

### 定期的な更新:
   Pythonや関連パッケージ、特に証明書関連のものは定期的に更新しましょう。


### 公式ドキュメントの参照: 
 特にクラウドサービスを利用する際は、公式のドキュメントやベストプラクティスを常に参照しましょう。生成系AIにばかり頼るのではなく，しっかり公式ドキュメントを読みながらAIはあくまで補助として扱いましょう！

# おわりに
今回わたしが起きた事故ですが，原因はAIに頼り切った自分の怠惰にあります...
みなさんはわたしのようにならないよう、AIのことも半信半疑で最終チェックは自分の目で公式と照らし合わせて行いましょう!!
それではみなさんよいエンジニアライフを〜👋


>もし，ほかの解決策があれば教えてください

# 参考

https://qiita.com/ground0state/items/c4d7caa274b6e3d99e27

https://qiita.com/sta/items/6d08151fd9b20fa8b319

https://qiita.com/hrappuccino/items/84e3a5113b871037024a
golangのsamber/loを使って複数の構造体スライスを一気にマッピングしたい

# 概要
ある構造体の値を、別の構造体にマッピングしたいことがあると思います。

例えばインフラ層にはSELECT文を実行した結果をマッピングするための構造体Aがあって、それをドメイン層のモデルである構造体Bにマッピングして、さらにそれをクライアントに返すレスポンス用の構造体Cにマッピングして…

というように層ごとにデータ構造が変わる場合は適宜こうした操作が必要になります。
一般的にはこうした操作はヘルパー関数を作って対応されているのでしょうか。
自分はこれに対するベストプラクティスが分からないので、いい方法を知っていればぜひ教えていただきたいのですが、自分なりに `samber/lo` を使ってやってみたので小ネタ的な紹介です。

https://github.com/samber/lo

# ユースケース
2つ以上の構造体スライスの内容を1つの構造体スライスにマッピングしたいときなどです。
例えばあるメソッドを実行すると `構造体Userのスライス` と `構造体BlogPostのスライス` が返ってくるので、それらの内容を合わせたレスポンスを生成するために `構造体UserPostResponseのスライス` へマッピングするといったケースで以下のようなサンプルを作ってみました。

## サンプル
```go:main.go
package main

import (
	"fmt"

	"github.com/samber/lo"
)

type User struct {
	Name string
	Age  int
}

type BlogPost struct {
	Title   string
	Content string
}

type UserPostResponse struct {
	Name    string
	Title   string
	Content string
}

func main() {
	users, posts := getUserInfo()

	res := lo.Map(
		lo.Zip2(users, posts),
		func(model lo.Tuple2[User, BlogPost], _ int) UserPostResponse {
			user, post := model.A, model.B
			return UserPostResponse{
				Name:    user.Name,
				Title:   post.Title,
				Content: post.Content,
			}
		})

	fmt.Printf("%+v\n", res)
}

func getUserInfo() ([]User, []BlogPost) {
	users := []User{
		{Name: "のび太", Age: 9},
		{Name: "静香", Age: 9},
	}
	posts := []BlogPost{
		{Title: "ドラえもんとの出会い", Content: "お正月に机の引き出しから..."},
		{Title: "私の好きなもの", Content: "まずお風呂！食べ物は実はやき芋が..."},
	}

	return users, posts
}
```

下記が `lo.Map` のシグネチャです。
```go
func Map[T any, R any](collection []T, iteratee func(item T, index int) R) []R
```
何やら難しいですが
- 第一引数に任意の型Tのスライス
- 第二引数に任意の型Tの要素とインデックスを引数に取り、任意の型Rを返すコールバック関数
- コールバック関数の結果である任意の型Rのスライスが戻り値

次は `lo.Zip2` のシグネチャです。
```go
func Zip2[A, B any](a []A, b []B) []Tuple2[A, B]
```
- 第一引数に任意の型Aを要素とするスライス
- 第二引数に任意の型Bを要素とするスライス
- 各要素がA,B型のペアを持つTuple2構造体のスライスが戻り値


# あとがき
サンプルに示した `User` と `BlogPost` のスライスの長さは同じである必要があります。
普通にfor文で回してそのインデックスでBlogPostを同時にマッピングさせることもできます。
```go
	res := make([]UserPostResponse, len(users))
	for i, user := range users {
		post := posts[i]
		res[i] = UserPostResponse{
			Name:    user.Name,
			Title:   post.Title,
			Content: post.Content,
		}
	}
```

`sambler/lo` 使って色々書いてきたけども、こっちの方がシンプルなのでいい気がしてきました🤣
システムめも 機械学習, 深層学習, 量子計算機, LLM, AI(68）

アンケートと宿題

アンケートは、せっかくいろんな人が参加しているのだから、
いろいろな意見が出ることが大切です。

こんなことを書いちゃまういかなとか、
こんなことは失礼かなって思わずに、
仕事上の口調であるか
私生活上の口調であるかは、自分でどちらかに決め、
自由に発言するのがいいです。

宿題は、せっかく無料で利用できるbotを提供してくださっているので
botを利用して回答を作成することにしました。

ふだん、機械学習系のシステムは、インフラエンジニアとして環境整備と、ネットワーク、ディスクのデータ確保が主で、機械学習システムを利用する側ではありません。

ばりばりプログrむを書くというよりは、ばりばりプログラムを書く人が困ったことがあると、
ネットワークを確保したり、記憶容量を確保したりという仕事が主です。

その次が、システムの資料を整理したり、利用者教育をするのが仕事でした。

深層学習の教育でも、ばりばり利用したり、ばりばり改良する人たちを助けながら、
はじめて触る人がぶつかる壁をひとつひとつ撃破するか、抜け道を探すのが仕事でした。

記憶したくないので計算機を使っている。
暗記問題のような宿題に違和感を覚えた。
いや、これは、きっとbotの使い方の練習のための宿題で、人間が答えるものではないのだろうと想定した。

M.S.WindowsにPython3(Anaconda3)を導入する（7つの罠）
https://qiita.com/kaizen_nagoya/items/7bfd7ecdc4e8edcbd679
自分のQiita記事で一番Viewsが多いやつ。
深層学習の勉強会で何割かがつまずいていた。記事にした。

# 操作性
WEB、google drive, jupyternotebook like なpython環境、ファイル転生システム、アンケートシステム、情報提供システム、演習システムなど、それぞれが別のソフトウェアで構築しているか、同じ土台の上でもUIの違う構築方法で作っていたりします。

botを利用した質疑で組織化しようとされていることはすばらしいことです。
開発系の演習だけでなく、botを普段利用していないため、とても助かりました。

操作性がわかりにくかったことをアンケートに書いたら、その次の回で操作について、繰り返し説明してもらえた。

# 利用制限
利用できる回数に絵資源があった。
最初は、利用制限にひっかかり、途中で断念した。

次に操作するときには、利用制限にひっかからない利用方法がわかった。
ただし、利用履歴はシステム側にもわかる。
利用方法が、不正だと思われないような、素直な質問だけにした。

また、宿題をBotで回答していることをアンケートで答えた。

ファイルの保存方法がわからず、slackで質問したら、すぐに教えてもらえた。

#  操作ミス
ただし、ブラウザの窓をいくつもひらいていて、自分が回答した窓とは別の窓で、ファイルを保存してしまい、
デフォルトの回答で答えてしまった。

ここで笑いが取れるのは、デフォルトだと正解が２つで、その後、まじめに操作した回答が正解１、正解ゼロと
ファイルを間違えたときよりも点数が低いことかもしれない。

# bot内容の更新
講義が済んでから１日後くらいにbotの中身が改訂されるらしい。
その日にbotで回答作ってもだめっぽい。

ただ、最初以外は、締切間際にbotを操作しており、更新の影響を受けたのは１回くらいだ。

# 知識の蓄積

Day9になると、さすがにいろいろ用語にも馴染んできて、
botの回答の間違いに気がついてしまうようになった。

せっかく記憶したくないから計算機を使っているのに、計算機を使わなくても正解がわかってしまうなんて嫌だ。
RUMとSyntheticのワークショップ体験記 ~Datadog Summit Japan2024~

## はじめに
2024年10月16日に開催された[Datadog Summit Japan2024](https://www.datadoghq.com/ja/summit/tokyo24/)にて「RUMとSynthetic - 重要なユーザーフローの監視と分析」のワークショップを体験してきました。

Datadogには学習するためのプラットフォームが準備されており、高機能で面白いので記事にまとめます。

### Datadog Learning Center
Datadogを学ぶためのエコシステム。無料のアカウントを登録することでテスト環境を準備して学ぶことができます。

https://learn.datadoghq.com/

今回体験したのはDatadog Lerning Centerで提供されている[RUM](https://www.datadoghq.com/ja/product/real-user-monitoring/)と[Synthetic](https://www.datadoghq.com/ja/dg/apm/synthetics/synthetic-monitoring)の機能を学べるワークショップ。

https://learn.datadoghq.com/courses/jp-workshop-monitor-and-analyze-critical-user-flows

#### RUMについて
フロントエンドの監視ツール。ユーザーの視点からリアルタイムにパフォーマンスを計測でき、ユーザーの行動を記録し確認することも可能。

https://www.datadoghq.com/ja/product/real-user-monitoring/

#### Syntheticについて
いわゆる外形監視。APIの死活やパフォーマンスの測定やUIのテストなどが行える。

https://www.datadoghq.com/ja/dg/apm/synthetics/synthetic-monitoring/

### ワークショップについて

https://learn.datadoghq.com/courses/jp-workshop-monitor-and-analyze-critical-user-flows

:::note warn 
注意事項 
GoogleCromenの拡張機能が必要
:::

https://chromewebstore.google.com/detail/datadog-test-recorder/kkbncfpddhdmkfmalecgnphegacgejoa?hl=JA

ワークショップは3時間ぐらいで終わる設定となっているが、しっかり学ぼうと思うと体感もっとかかると思います。

### ワークショップの流れ
開始すると仮想環境が払い出されます。一定期間使えるので、その日に完了しなくても問題はありません。

![workshopui-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/829d4978-872a-125b-c5b0-4a725acc583e.png)

上記のようなインターフェースとなっており、設問を見ながらDatadogを実際に触り、問題を解決していきます。各章のにはストーリーが設定されていて、発生した課題を解決していくスタイルで面白いです。

![workshop-story.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/c26555fa-6bd6-778a-ab70-2d7a0a05095f.png)

ワークショップではECサイト「Storedog」を実際にさわりながらDatadogでのフロントエンド監視を体験できます。

![storedogui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/35928af6-aff4-0686-315b-fc381c2202a5.png)

面白いのが仮想環境ではソースコードの確認なども行えます。ECサイトの実装やDatadogとの連携がどのような設定になっているのか？なども確認でき、本当によくできたコンテンツです。

![workshopui-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/1c1f2f8c-2d84-f536-5b04-3aeaa38fe069.png)

### まとめ
実際のSummitではエンジニアの方がついてくれており、詰まっても助けてくれなが有意義な学習ができました。興味がある方集まって体験できるワークショップはおもしろいですね。

フロントエンドの監視はアプリが多様化する現代において、開発の差別化、改善の高速化を図る上で大切な要素だと改めて実感できました。

実際にDatadogのUIを触りながら機能を学習できるのは素晴らしいと思います。他にもたくさんコンテンツが用意されているので、触ってみようと思います。
MySQLにおけるパーティションの有用性と気を付けるべき点

こんにちは、齋藤です。

今回はMySQLにおけるパーティションの有用性と、実装や運用時に注意すべきポイントについてまとめます。

## MySQLにおけるパーティションの有用性

### 1. **クエリのパフォーマンス向上**
パーティションを使用することで、大きなテーブルを複数の小さな論理的な部分に分割できます。
これにより、クエリ実行時にパーティションプルーニング（不要なパーティションをスキップする技術）が行われ、検索範囲が狭まるため、特定のデータを高速に検索できます。

例えば、日時に基づいてパーティションを分けておけば、特定の期間のデータだけを対象にしたクエリで余計なデータを無視できるため、検索速度が向上します。

### 2. **管理の容易さ**
パーティションを使うことで、大きなテーブルに対するメンテナンス作業（アーカイブや削除など）が効率的に行えます。
例えば、一定期間を過ぎた古いデータを定期的に削除したい場合、その期間に対応するパーティションをまるごと削除するだけで済むため、操作がシンプルになります。

### 3. **インデックスやロックの効率化**
MySQLでは、パーティションごとにインデックスが作成され、また、パーティション単位でロックがかかります。これにより、データの更新や削除時のロック範囲が狭まり、並行処理のパフォーマンスが向上する可能性があります。

### 4. **データの分散管理**
パーティションを使用することで、大量のデータを複数のストレージに分散させることができます。これにより、ストレージの効率的な使用やバックアップ作業の分割が可能になり、ストレージのボトルネックを解消する助けとなります。

## MySQLのパーティション使用時に気をつけるポイント

### 1. **パーティションキーの選定**
パーティションのキー（分割基準）を慎重に選ぶ必要があります。
適切なキーを選ばないと、パーティションプルーニングの効果が発揮されず、逆にパフォーマンスが低下する可能性があります。
特に、パーティションキーとして選ぶ列が頻繁にクエリで使われる列でなければ、効果が薄くなります。

**例**: 日付ごとにパーティションを分ける場合、日付を条件にしたクエリでのみパーティションプルーニングが有効になります。日付以外の列を条件にしたクエリでは、全パーティションをスキャンすることになるため、注意が必要です。

### 2. **パーティションの数に注意**
パーティション数が多すぎると、逆に管理コストが増えたり、クエリパフォーマンスが低下する可能性があります。パーティションごとにインデックスが作成されるため、メモリ使用量も増加します。適切な数のパーティションを設計し、必要に応じて適宜パーティションを追加・削除する運用を行いましょう。

### 3. **パーティションの種類**
MySQLには主に以下のパーティション方式があります：
- **RANGEパーティション**：
連続する値の範囲に基づいてデータを分割
- **LISTパーティション**：
指定された値のリストに基づいてデータを分割
- **HASHパーティション**：
指定された列のハッシュ値に基づいてデータを均等に分割
- **KEYパーティション**：
MySQLが提供する内部のキーに基づいて自動的にハッシュ分割

それぞれの方式には適用できる場面が異なるため、データの性質やクエリのパターンに合った方式を選ぶことが重要です。

### 4. **JOINやサブクエリにおける制約**
MySQLでは、パーティションされたテーブル同士をJOINする際に制約がある場合があります。また、サブクエリや一部のクエリではパーティションプルーニングが正しく行われないこともあるため、実際のクエリの動作をよく確認する必要があります。

### 5. **メンテナンスとバックアップ**
パーティションを使用する場合、パーティション単位でのバックアップやリストアが可能ですが、全体的なバックアップやリカバリも並行して考慮する必要があります。また、パーティションを追加・削除する際にかかるメンテナンスコストやダウンタイムを意識して設計することも重要です。

## まとめ
MySQLのパーティション機能は、大規模データを効率的に管理し、クエリのパフォーマンスを向上させるための強力なツールです。しかし、パーティションキーの選定やパーティション数、そして特定のクエリでの制約をしっかり理解し、適切な設計・運用を行うことが求められます。

パーティションを使うかどうかは、テーブルのサイズやクエリの頻度、データの性質に応じて慎重に検討する必要があります。正しい設計ができれば、データベースのパフォーマンスとメンテナンス効率を向上させることができるのでぜひ検討し活用してみてください。
【Python】relativedeltaを利用して年数差を計算する

# 概要
`dateutil`ライブラリの`relativedelta`を使うことで、特定の日付と今日の日付の間の年数の差を計算することができます。サンプルコードを使って紹介します。


## サンプルコード

`relativedelta`は基本的に以下のように使用してその差分を出すことができます。

```py
relativedelta(datetime1, datetime2)
```

ドキュメントはこちら。

https://dateutil.readthedocs.io/en/stable/relativedelta.html

以下にサンプルコードを作ってみました。

```py
from dateutil.relativedelta import relativedelta
from datetime import date

year = 2020
month = 12
day = 1

base_date: date = date(year, month, day)
print(f'base_date: {base_date}')

today: date = date.today()
print(f'today: {today}')

date_difference: relativedelta = relativedelta(today, base_date)

print(f'date_difference: {date_difference}')
print(f'date_difference.years: {date_difference.years}')

# 出力結果
# base_date: 2020-12-01
# today: 2024-10-25
# date_difference: relativedelta(years=+3, months=+10, days=+24)
# date_difference.years: 3
```

上記の通り、とてもわかりやすいです。

`relativedelta`を使用して、`today`と`base_date`の日付の差を計算し、`date_difference`に格納しています。今回は日にち一日指定

この`diff`オブジェクトには、`years`、`months`、`days`の属性があります。（他にも`Hours`、`Minutes`、`Seconds`、`Microseconds`がありますが、設定していない場合は無視される）。
年数の差だけを表示したい場合は、`date_difference.years`とすればOKです。

年だけでなく月の差も出したい場合は、こんな方法もあります。

```py
# yearsとmonthsの合計を計算
years_plus_month = round(date_difference.years + date_difference.months / 12, 1)
print(f'years_plus_month: {years_plus_month}')
# years_plus_month: 3.8
```

`date_difference.years`に`date_difference.months`を12で割った値を加算してあげることで、ポイントのような数値に変換しています。その後、`round`関数を使用して、小数点以下1桁で四捨五入してあげてます。


他にもこんな使い方もできます。
以下では、年を挟んだ1ヶ月後の月日が取得できます。

```py
one_month_later = datetime(2020, 12, 1) + relativedelta(months=1)
print(one_month_later)
# 出力結果
# 2021-01-01 00:00:00
```

`datetime`だけだと調整が面倒になりますので、こういった使い方は有用ですね。