OmniAICreator/Qiita-1.07M huggingface dataset:
カンマ区切りの文字列からオブジェクトの配列を生成する方法【TypeScript】

## 説明

- カンマ区切りの文字列から、各曜日をオブジェクトの対応するプロパティに分割して格納します。

```typescript
// カンマ区切りの文字列
"日1,月1,火1,水1,木1,金1,土1,日2,月2,火2,水2,木2,金2,土2,日3,月3,火3,水3,木3,金3,土3"
```

```typescript
// 生成したいオブジェクトの配列
[
  {
    "dayOfWeekCode1": "日1",
    "dayOfWeekCode2": "月1",
    "dayOfWeekCode3": "火1",
    "dayOfWeekCode4": "水1",
    "dayOfWeekCode5": "木1",
    "dayOfWeekCode6": "金1",
    "dayOfWeekCode7": "土1"
  },
  {
    "dayOfWeekCode1": "日2",
    "dayOfWeekCode2": "月2",
    "dayOfWeekCode3": "火2",
    "dayOfWeekCode4": "水2",
    "dayOfWeekCode5": "木2",
    "dayOfWeekCode6": "金2",
    "dayOfWeekCode7": "土2"
  },
  {
    "dayOfWeekCode1": "日3",
    "dayOfWeekCode2": "月3",
    "dayOfWeekCode3": "火3",
    "dayOfWeekCode4": "水3",
    "dayOfWeekCode5": "木3",
    "dayOfWeekCode6": "金3",
    "dayOfWeekCode7": "土3"
  }
]
```

- コード改善前
```typescript
const dayCodes = "日1,月1,火1,水1,木1,金1,土1,日2,月2,火2,水2,木2,金2,土2,日3,月3,火3,水3,木3,金3,土3".split(",");

interface WeekRow {
    dayOfWeekCode1: string | undefined;
    dayOfWeekCode2: string | undefined;
    dayOfWeekCode3: string | undefined;
    dayOfWeekCode4: string | undefined;
    dayOfWeekCode5: string | undefined;
    dayOfWeekCode6: string | undefined;
    dayOfWeekCode7: string | undefined;
}

const weekRows: WeekRow[] = [];

for (let i = 0; i < dayCodes.length; i++) {
    const weekIndex = Math.floor(i / 7);
    
    if (!weekRows[weekIndex]) {
        weekRows[weekIndex] = {
            dayOfWeekCode1: undefined,
            dayOfWeekCode2: undefined,
            dayOfWeekCode3: undefined,
            dayOfWeekCode4: undefined,
            dayOfWeekCode5: undefined,
            dayOfWeekCode6: undefined,
            dayOfWeekCode7: undefined
        };
    }

    const dayCodeKey = `dayOfWeekCode${(i % 7) + 1}` as keyof WeekRow;
    weekRows[weekIndex][dayCodeKey] = dayCodes[i];
}

console.log(weekRows);
```

- コード改善後
```typescript
const dayCodes = "日1,月1,火1,水1,木1,金1,土1,日2,月2,火2,水2,木2,金2,土2,日3,月3,火3,水3,木3,金3,土3".split(",");

interface WeekRow {
    [key: string]: string | undefined;
}

const weekRows: WeekRow[] = [];

dayCodes.forEach((code, index) => {
    const weekIndex = Math.floor(index / 7);
    
    if (!weekRows[weekIndex]) {
        weekRows[weekIndex] = {};
    }

    const dayCodeKey = `dayOfWeekCode${(index % 7) + 1}`;
    weekRows[weekIndex][dayCodeKey] = code;
});

console.log(weekRows);
```
GitHub のリポジトリ名を変更すると自動でリダイレクトしてくれる


## リポジトリ名変更

### リダイレクト

GitHub はリポジトリ名を変更した際、古い URL にアクセスしても自動でリダイレクトしてくれます。親切ですね！

> リポジトリの名前を変更すると、プロジェクトサイトの URL を除くすべての既存の情報は、下記を含む新しい名前に自動的にリダイレクトされます。
>
> - issue
> - Wiki
> - Star
> - フォロワー

https://docs.github.com/ja/repositories/creating-and-managing-repositories/renaming-a-repository

### やりかた

リポジトリ名の変更は GitHub の該当リポジトリにアクセスし `Settings` > `General` > `Repository name` より変更できます。リダイレクトの設定は不要です。

### 注意点

> Web トラフィックのリダイレクトに加えて、以前の場所を対象とするすべての `git clone`、`git fetch`、`git push` 操作は、新しい場所で行われたかのように機能し続けます。 ただし、混乱を低減するため、既存のローカルクローンが新しいリポジトリ URL を指すよう更新することを強く推奨します。

上記に記載がない事項として、変更前の名前と同じリポジトリができた場合はリダイレクトされなくなります。何度もリネームした場合、リダイレクトがすべて保証されるかは記載がありません。リダイレクトされるからといって放置せず参照箇所の修正をおすすめします。

## リポジトリ名変更に伴う失敗談

### CI が動かない

ある日プルリクエストを作成したところ、AWS Codebuild を利用して `terraform` コマンドの結果を GitHub へコメントする CI が動かなくなっていました。GitHub の `Settings` > `Webhooks` > `Edit` > `Recent Deliveries` を確認すると、HTTP 400 で以下エラーが出力されていました。

```text
Invalid Webhook request received: Invalid source repository specified
```

### 原因

どうやら CodeBuild は設定したリポジトリ名と Webhook のリクエストを比較して、ソースが一致するか確認をしているようです。マネジメントコンソールからソースに指定しているリポジトリを修正することで解決しました。当時の私はリポジトリ名を変更したことを失念しており、設定変更はしていないのに何故？と悩んでいました。

### 学び

リポジトリ名を変更する際には以下に気をつけるべきです。

- リポジトリ名の変更はリスクのある操作だと認識する
- CI を実装している場合、正常系が動作するか確認する
- ファイルや設定に旧リポジトリ名が埋め込まれていないか確認する

### 所感

リダイレクトにより `git clone` が可能であったために切り分けに時間がかかり、復旧後に CI が正常に動作することで設定ファイルの修正漏れに気づかないという経験をしました。リダイレクトしてくれるから大丈夫！ではなく、あくまで影響を少なくするガード機能だと捉えるべきです。以降は慎重な命名を、名前を変更する際は影響範囲を考えるよう習慣づけたいです。
【業務改善】AppSheetを活用し勤務シフト簡単に確認することができた

## AppSheetを活用し勤務シフト簡単に確認する事にチャレンジ！
皆さん、こんにちは！私は沖縄でスーパーの店長として働いている会社員です。
現在は新店開店の開設委員（店長）として日々奮闘しております。
今年の秋頃の開店に向けて準備を進めており
建設されていく店舗を見ながらワクワクしております。
開店すると店舗で勤務する従業員は80名〜100名程度になります。
各部署の責任者が各従業員の勤務管理をしておりますが、店長として全従業員の勤務シフトを確認する必要がございます。
理由としては、それぞれの従業員が出勤前なのか勤務終了後なのかで声かけする言葉が変わるからです。
出勤前の従業員には「おはよう。今日もよろしく！がんばろうね！！」と声かけ
勤務終了後の従業員には「お疲れ様！！今日も頑張ったね。ありがとう」を声かけ
それぞれの従業員に対して日々感謝の言葉をかけるように心がけております。
**常に勤務シフトを確認することが重要であるが、意外と手間のかかります。** 
今回は勤務シフトを簡単に確認できるようAppSheet用いてアプリを開発する事にチャレンジしました。
## スプレッドシートシートからAppSheetへ
**スプレッドシートに必要な項目を記載**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/1efe9626-9b93-9dbf-713e-92e86af2b391.png)
**拡張機能⇒AppSheetを選択⇒アプリ作成をクリック**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/b1699bbf-12a3-5a69-6d28-c3bdbaa38800.png)
**AppSheetの画面が表示される**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/70d2c6cc-6386-dbfb-d2d0-1b02a38b608b.png)
**アプリを共有する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/2b30ad98-fb43-9156-e0f9-589ed3d946d4.png)

## 出来上がったものはこちらです！
**指定したメールへ共有しアプリを開くことができる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/b4dc3033-05c5-1d24-7c94-37e893dc4cd9.png)
**従業員「下地さん」出勤時間　5時　退勤時間9時と直ぐに確認ができる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819918/75965f78-193a-506a-de73-3a20980c7216.png)


## 出来たものを自分以外の周囲の仲間に使ってもらった
**ご協力頂いた方**
　部下のM氏　食品販売課長　
 　　業務内容：売場管理・販売計画を立てて目標数値の達成の為に業務を行う。
　部下のS氏   人事総務課長　
 　　業務内容：コスト管理・人事管理・後方管理を行う。
**使用前の事前説明**
１，通常使用している勤務管理システムからデータを取得し、AppSheetを活用し勤務シフトを作成したので使用して頂いた。
２，AppSheetの説明とアプリの使い方の説明を行った。
３，メールにて共有し実際に使用して頂いた。

## 率直な意見をヒヤリング
 **Q:アプリを使用しての率直な感想を聞かせてください**
M氏　
A：Googleにログインする事が面倒
A：日付をクリックウすると出勤時間と退勤時間がするに確認できて便利
S氏
A：日付が一日毎に表示されているので、日付をカレンダーで選択出来たらいい
A：ComputedKeyの表示は不要

**Q：今後継続的に使用しますか？**
M氏
A：現状であれば使わないと思います。

## アプリ作成した感想
初めてAppSheetを活用したがまだまだ不慣れなため、UIが不十分。
UI改善できるよう使いなれる必要がある
使用する方がわかりやすいような仕様にすることが必要
## 使用したツール
スプレッドシート
AppSheet
Outlook

## あとがき
初めてAppSheetを活用して初級程度のアプリを作成しました。
機能が充実しているので多く手を動かし慣れていきたいと考えております。

今回も最後まで読んでいただき感謝いたします。
G検定ロゴを名刺に追加して得られるメリットとその活用方法

## 名刺の画像
まずは私の名刺デザインをご覧ください。G検定（ジェネラリスト検定）のロゴをどのように配置したか、具体的なデザインのポイントも含めて紹介します。
![名刺３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82835/e067ef3c-6229-2a94-b79b-9b21b84ba618.png)

## はじめに
G検定（AI Proficiency Exam）のロゴを名刺に追加するメリットと、その活用方法について紹介します。私自身がG検定を取得し、名刺にロゴを追加したことで感じた効果や実際の経験を共有したいと思います。

## G検定とは
G検定は、日本ディープラーニング協会（JDLA）が主催するAIに関する知識とスキルを証明する資格です。この資格を取得することで、AI技術に関する深い理解を持っていることが認められます。

## 名刺にロゴを追加するメリット
1. **専門性のアピール**
    - AI分野での知識とスキルを証明するG検定のロゴを名刺に載せることで、あなたの専門性をアピールできます。

2. **信頼性の向上**
    - 名刺を受け取った相手に対して、技術的な信頼性や資格を強調することができます。

3. **差別化**
    - 他のエンジニアや開発者との差別化に繋がります。名刺にロゴを載せることで、プロフェッショナリズムとスキルセットを視覚的に強調できます。

4. **ビジネス機会の創出**
    - AI関連のプロジェクトや仕事の機会が増える可能性があります。クライアントやパートナーに対してアピールしやすくなります。

5. **ネットワーキングの強化**
    - AIに関するイベントやカンファレンスで同じ資格を持つ他の専門家やAIに関心のある人々とのネットワーキングが促進されます。

## 名刺のデザインと実例
私の名刺デザインについて詳しく説明します。以下のポイントに注意してデザインを行いました。

- **ロゴの配置**: 名刺のどの部分にロゴを配置したか。
- **ロゴのサイズ**: ロゴのサイズをどのように調整したか。
- **全体のバランス**: 他の情報とのバランスをどのように取ったか。

## ロゴ追加の手順
1. **ロゴのダウンロード**
    - G検定公式サイトからロゴをダウンロードします。

2. **デザインツールの利用**
    - 名刺デザインツール（例：Adobe Illustrator、Canvaなど）を使用して、名刺にロゴを追加します。

3. **適切な配置とサイズ**
    - ロゴの配置とサイズに注意して、名刺全体のバランスを考慮します。

## まとめ
G検定のロゴを名刺に追加することで、専門性や信頼性を高めることができ、ビジネスチャンスやネットワーキングの機会が広がります。皆さんもぜひ、名刺にG検定のロゴを追加してみてください。
【macOS】インストールしたアプリの関連ファイルの場所を特定する

アプリをインストールしたときに、使われる可能性のあるディレクトリ群。

```
"$HOME/Library"
"$HOME/Library/Application Scripts"
"$HOME/Library/Application Support"
"$HOME/Library/Application Support/CrashReporter"
"$HOME/Library/Containers"
"$HOME/Library/Caches"
"$HOME/Library/HTTPStorages"
"$HOME/Library/Group Containers"
"$HOME/Library/Internet Plug-Ins"
"$HOME/Library/LaunchAgents"
"$HOME/Library/Logs"
"$HOME/Library/Preferences"
"$HOME/Library/Preferences/ByHost"
"$HOME/Library/Saved Application State"
"$HOME/Library/WebKit"
"/Library"
"/Library/Application Support"
"/Library/Application Support/CrashReporter"
"/Library/Caches"
"/Library/Extensions"
"/Library/Internet Plug-Ins"
"/Library/LaunchAgents"
"/Library/LaunchDaemons"
"/Library/Logs"
"/Library/Preferences"
"/Library/PrivilegedHelperTools"
"/private/var/db/receipts"
"/usr/local/bin"
"/usr/local/etc"
"/usr/local/opt"
"/usr/local/sbin"
"/usr/local/share"
"/usr/local/var"
$(getconf DARWIN_USER_CACHE_DIR | sed "s/\/$//")
$(getconf DARWIN_USER_TEMP_DIR | sed "s/\/$//")
  ```

  https://www.youtube.com/watch?v=0nVOB0EE5ps

以下のようにして調べることができます。

```bash
❯ find "$HOME/Library/Application Scripts" -iname "*com.apple.iWork.Numbers*" -maxdepth 1 -prune
/Users/me/Library/Application Scripts/com.apple.iWork.Numbers
/Users/me/Application Scripts/com.apple.iWork.Numbers.NumbersNotificationServiceExtension
```

以下詳細。

https://android.benigumo.com/20240806/uninstall-apps/
PHPからMySQLのデータをAPIにして発行するレシピ

PHPでデータベースの情報を元にAPIを発行するための基本的な流れは以下の通りです。ここでは、MySQLデータベースから情報を取得し、その情報をJSON形式で返すAPIを構築する例を示します。
## 1. データベース接続の設定
まず、データベースに接続するための設定を行います。config.php というファイルにデータベース接続情報を保存し、他のファイルから呼び出せるようにします。
```PHP
// config.php
<?php
$host = 'localhost';
$dbname = 'your_database_name';
$user = 'your_username';
$password = 'your_password';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
    exit();
}
?>
```
## 2. APIエンドポイントの作成
次に、APIエンドポイントを作成します。ここでは、データベースの情報を取得し、JSON形式で返すエンドポイントを作成します。
```PHP
// api.php
<?php
require 'config.php';

// SQLクエリを作成し、データベースから情報を取得します。
$query = "SELECT * FROM your_table_name";
$stmt = $pdo->prepare($query);
$stmt->execute();

$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// JSON形式でデータを出力します。
header('Content-Type: application/json');
echo json_encode($results);
?>
```
## 3. APIにアクセスする
ブラウザやHTTPクライアント（例: Postman）で api.php にアクセスすることで、データベースの情報がJSON形式で表示されます。
```PHP
http://yourdomain.com/api.php
```
## 4. APIの拡張
この基本的なAPIをもとに、例えばリクエストパラメータに応じてデータをフィルタリングしたり、POSTリクエストを処理してデータベースに新しいデータを追加したりすることができます。

例: クエリパラメータを使ったデータフィルタリング
```PHP
// api.php
<?php
require 'config.php';

// クエリパラメータを取得します。
$param = isset($_GET['param']) ? $_GET['param'] : '';

$query = "SELECT * FROM your_table_name WHERE your_column_name = :param";
$stmt = $pdo->prepare($query);
$stmt->bindValue(':param', $param);
$stmt->execute();

$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

header('Content-Type: application/json');
echo json_encode($results);
?>
```
このようにすることで、api.php?param=value のような形でAPIを呼び出すと、特定の条件に基づいたデータが返されます。

## 5. セキュリティとエラーハンドリング
最後に、APIを運用する際にはセキュリティ面とエラーハンドリングに十分な注意を払う必要があります。入力値のバリデーションやSQLインジェクション対策を行い、エラーメッセージを適切に処理することが重要です。

これで、PHPでデータベース情報をもとにAPIを発行する基本的な方法が分かりました。APIを拡張し、用途に応じてカスタマイズすることが可能です。
React + Vite の構築したサイトに、PostHogを導入する

PostHogの導入手順を解説していきます。

PostHogは、アクセス解析のほか、ABテストやFeature flagsという新機能を安全にデプロイおよびロールバックするような機能も提供しています。
Googleオプティマイズが終了しているので、ABテストツールの代替案としても使えると思います。

# 環境

React 18 (TypeScript)
Vite 5

# 手順

1. PostHogのパッケージをインストール

```bash
yarn add posthog-js
```

2. 環境変数に設定を保存
設定する値は、settingから確認できます。

```.env.local
VITE_PUBLIC_POSTHOG_KEY=phc_xxxxxxxx
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
```

![スクリーンショット_2024-08-06_19_46_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/780560d9-3084-dcef-7657-f57c56d358c5.png)

3. コードにPostHogの設定を書いていく

```src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { PostHogProvider } from 'posthog-js/react'
const options = {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PostHogProvider
      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
      options={options}
    >
      <App />
    </PostHogProvider>
  </React.StrictMode>
)
```

コードの設定は以上で、完了です。

これで、PostHogにアクセスデータが送信されるようになりました。

## PostHogのツールバーを表示する

PostHogには、開発中のサイトにツールバーを表示して、ヒートマップの表示や要素のInspect機能などを使うことができます。
表示するには、Toolbarにアクセスし、「Add authorized URL」をクリックして、開発環境のURLを登録するとツールバーが表示されるようになります。

![スクリーンショット_2024-08-06_19_53_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/1783a224-540a-e9c1-9919-b7eaca7b48d0.png)

例えば、ツールバーでInspectを実行するとこのようになる。

![スクリーンショット 2024-08-06 19.58.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/5d2748e2-0f96-3ee7-cc05-305f602abbc9.png)

ツールバーを使うと、ヒートマップの表示なども可能です。
UbuntuでTaipyを利用してみた。

Taipyは、フロントエンドおよびバックエンドソリューションを迅速に構築するためのライブラリで、ウェブ開発の経験が少ない方にも使いやすく設計されているようです。データサイエンスやAIアプリケーションの開発を支援にも利用されることを念頭に置いているようです。pipからインストールすだけで利用可能で、サポート対象のPythonバージョン3.8以降となります。

# 前提
OS：Ubuntu 22.04.1 LTS
Python： 3.10.12

# 1. インストール
pipからTaipyをインストールします。
```bash
pip3 install taipy
```

# 2. 簡易アプリ起動
それでは早速動作させてみます。ユーザ個別にStateを持つダイナミックなサンプルグラフです。チュートリアルにあるサンプルコードを少しだけ変更して動作させてみます。
```python:dynamic_chart.py
from taipy.gui import Gui
import taipy.gui.builder as tgb
from math import cos, exp

value = 10

def compute_data(decay:int)->list:
    return [cos(i/6) * exp(-i*decay/600) for i in range(100)]

def on_slider(state):
    state.data = compute_data(state.value)

with tgb.Page() as page:
    tgb.text(value="# Taipy Getting Started", mode="md")
    tgb.text(value="## Created by nw-engineer", mode="md")
    tgb.text(value="Value: {value}")
    tgb.slider(value="{value}", on_change=on_slider)
    tgb.chart(data="{data}")

data = compute_data(value)

if __name__ == "__main__":
    Gui(page=page).run(host='x.x.x.x', Port='80', title="Dynamic chart") #host,Portを追加
```
デフォルトでLISTENするIP/Portは127.0.0.1/5000番となるためこの部分のみ追加しています。
では起動しましょう。以下のように表示されます。
```bash
python3 dynamic_chart.py
[2024-08-06 09:37:23][Taipy][INFO]  * Server starting on http://xx.xx.xx.xx:80
```

ブラウザからアクセスすると、チュートリアルにあるような画面が表示されスライダーを動かすとグラフが遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/1b99dd3d-01cf-c18c-9018-2172f695e033.png)

別々のブラウザでスライダーを動かしても、互いに干渉しいないのがわかります。各ユーザー(ブラウザ)に対して個別のStateオブジェクトが提供されるためですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/0ebc6be4-bbe1-0d22-dbf2-23a006ae2b43.png)

# 3. その他
Taipyはチュートリアルが非常に豊富で、誰でも手軽に利用できる環境が整っていると感じました。PythonだけでWebアプリケーションが作成でき、素早くプロトタイプを作成して検証できるのはよいですね。

以下、チュートリアルページです。

https://docs.taipy.io/en/latest/tutorials/fundamentals/

その他、ビジュアル・シナリオ管理・大規模データなどサンプルコードも豊富なので学習コストも低いと感じました。

また、Taipyをベースに開発されたアプリもあるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/74c7f8a9-f28d-aed7-82bf-b53cb410de44.png)
npmのアップデートをしたら、他プロジェクトで動かなくなったので解決した

npmのバージョンを最新にしたところ、いくつかの古いプロジェクトでnpmコマンドを打つと以下のエラーがでてしまい一切動かなくなりました。

```
internal/modules/cjs/loader.js:796
    throw err;
    ^
```

古いプロジェクトでは、nodeのバージョン10~12系を使っていました。

そもそもサポート外なので使わない方が良いですが、なんとか解決できたので記録を残します。

## PC環境について
チップ：Apple M2 Pro
OS： MacOS Sonoma バージョン14.6
nodeのバージョン管理： nodebrew

## 結果やったこと
### エラーの原因
ごうやらnpmが壊れていることが原因っぽい感じだったので、対象のnodeのバージョンをアンインストールして、再度インストールすることに。
しかし、nodeの古いバージョンをインストールできないエラーが出ました。

### Python2系をインストールする
M1以降のMacにはPython3系が入っており、nodeの古いバージョンをインストールするにはPython2系が必要みたいです。
なので、Python2系をインストールします。

Pyenvを使うと、Pythonのバージョン管理ができるみたいなので便利です。

Pyenv をインストール： 参照した記事 https://dev.classmethod.jp/articles/pyenv-command-not-found/
```
$ brew install pyenv
```
.bash_profile に環境設定を追加
```
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
```
変更を反映
```
$ source .bash_profile
```

Pyenvで色々なバージョンをインストールできます。
参照記事 : https://qiita.com/twipg/items/75fc9428e4c33ed429c0
今回は2系が必要なので、Python 2.7.18をインストールします。
```
$ pyenv install 2.7.18
```
インストール後、グローバルのバージョンを変更
```
$ pyenv global 2.7.18
```
バージョンを確認し、切り替わってたらOK
```
$ python --version
```

インストールできない場合は、シンボリックリンクの関連付けが必要みたいです。
参照した記事 https://dev.classmethod.jp/articles/pyenv-command-not-found/#toc-2

シンボリックリンクとは
参照記事:https://s-port.shinwart.com/tech-column/kawatama03/

### 最後にnodeの古いバージョンをインストールする。
古いバージョンのインストールに、install-binaryとcompileを書く方法がでてきましたが、私はcompileを使うとエラーでインストールできなかったため、install-binaryを使うことで解決できました、
```
$ nodebrew install-binary v14.20.0
```

```
$ nodebrew compile v10.16.3
```

## 参考記事
https://dev.classmethod.jp/articles/pyenv-command-not-found/
https://blog.zzzmisa.com/m1-mac-with-node10/
https://envader.plus/course/8/scenario/1076
https://qiita.com/twipg/items/75fc9428e4c33ed429c0
https://qiita.com/nekyo/items/19be05578638fe3e4aec
https://s-port.shinwart.com/tech-column/kawatama03/
Reactアプリ一本目、学習記録アプリの作成

# はじめに
プログラミングスクールJISOUにて、React学習を始めました
React基本の基本の課題として、学習記録アプリを作成しました

私は2年ほど前にプログラミングスクール「テックキャンプ」を卒業し今の会社に就職しており
業務ではVue.jsを使ってます
そこらへんの比較もしながら色々お伝えできれば嬉しいです

# 経験者向けJISOUと初学者むけテックキャンプ
※JISOUは始めて1週間での所感です

- JISOU
    - アウトプット重視の学習スタイル
    - HTMLやごく基本のプログラミング知識等の前提知識の学習は行わない
    - モチベーションの高いメンバーが多いコミュニティ
    - inputは既存の教材（Udemy）を利用
    - 最序盤から自分で考えながら進める　カリキュラム
- テックキャンプ
    - 全くの初心者向けに、０から教える勢い(webの仕組み、HTMLの書き方とか)
    - つまずきやすい環境構築を最小コストで行うために、PCはMac限定
    - 中盤くらいまで、８〜９割くらいはコードのお手本がある
    - オリジナルアプリを除き、手厚いメンターのフォローがある（チャット質問はもちろん、画面共有等）
    - カリキュラムの完了日時点進捗はかなり個人差がありそうだった

#### まとめ
やはり経験者向けと、初学者向けとの差は大きく感じました（当然だけど）
それ以外の部分だと
- アウトプット重視
- コミュニティの雰囲気

ここら辺も違う部分です
実際にエンジニアになって感じることは
すごいなと思うエンジニアは全員必ずしもアウトプットが得意というわけではないですが
よくアウトプットしている人は最初のスキルが低くても、どんどんスキルアップしていき
優秀なエンジニアになっていくと感じています
またコミュニティの雰囲気についても
テックキャンプでも定期的に交流会なども開催されていましたが
時間の都合で私はあまり参加できておらず
普段のSlackでは日報で進捗状況はなんとなくわかるくらいでした
対してJISOUではより頻繁にイベントが行われていたり
gatherで一緒に勉強したり、交流がより多い印象です
直接的な交流に参加しなくても
またお互いの質問が見られるのでどこで詰まっているかわかったり
今書いている記事のようにQiita記事でどんなことを感じて学習をしているのか分かるので
一緒に頑張っている感を感じられました

# Vue.js と React
ここの比較記事も書こうと思っていましたが
業務で使っているVue.jsに対して１週間学習しただけのReactが不利すぎるし
既にそこそこ　時間をかけてしまったので次の記事で書きたいと思います
乞うご期待！！

# これから
まずは１週間やってみて、この新しい領域に踏み出したすぐは
分からないことばかりで大変ですが、その分新しい発見だらけで楽しい期間です
このボーナスタイムをボーナスで終わらせずに、学習を習慣化して続け
また、その分アウトプットして学習内容をより身につけていきたいと思います
仕事と家庭と学習
バランスよく根気強く頑張っていきます
もし、記事を読んでいただけた学習中の方
一緒に頑張っていきましょー！

（作った学習記録アプリの話を忘れていたぜ！！）

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからお願いします👇

https://projisou.jp
Xのツイートボタンを設置して簡単に投稿する方法

## Xのツイートボタンを設置して簡単に投稿する方法
### この記事でできること
サイト訪問者がWebページ上のリンクから簡単にXへ投稿できるようなボタンを実装できる
### ツイートボタンとは？
ツイートボタンについては、公式ドキュメントにて以下のように説明されています。
>ツイート ウェブ インテントを使用すると、 サイト訪問者が Web ページ上のリンクから簡単にツイートを作成し、視聴者に投稿できるようになります。サイトでは、ツイートのテキストとハッシュタグを設定し、URL を渡して、ページに関連する Twitter アカウントを識別できます。

https://developer.x.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent

サイト上に以下のリンクを貼ることで、簡単にツイートする事ができます。
```
https://twitter.com/intent/tweet
```
ちなみに下記でも同様にツイート可能でした。
```
https://x.com/intent/post
```

### ツイート内容に関するパラメータ
上記URLにクエリパラメータを付与することで、ツイートする内容にパラメータ情報を含める事が可能になります。詳細は以下の公式ドキュメントの内容をご確認ください。

https://developer.x.com/en/docs/twitter-for-websites/tweet-button/guides/parameter-reference1

今回は、ツイート内容に文章を含めるパターンと文章とurlを含めるパターンを実装します。
※実装例はReactでライブラリ等のインストール方法は割愛します

### 実装パターン1．文章を含める
```Typescript
import { Button } from "@mui/material";
import { FC } from "react";
import { Link as RouterLink } from "react-router-dom";

export const TweetButton: FC = () => {
  return (
    <Button
      variant="contained"
      color='primary'
      component={RouterLink}
      to="https://twitter.com/intent/tweet?text=Hello!"
    >
      Xに投稿
    </Button>
  )}
```
設置したボタンをクリックすると、以下のようにHello!が含まれた形ですぐに投稿が可能になります。
[![Image from Gyazo](https://i.gyazo.com/5d9960b79fe08422f1c5d8221e503a11.png)](https://gyazo.com/5d9960b79fe08422f1c5d8221e503a11)

### 実装パターン2．文章＋URLを含める
```Typescript
import { Button } from "@mui/material";
import { FC } from "react";
import { Link as RouterLink, useLocation } from "react-router-dom";

export const TweetButton: FC = () => {
  const location = useLocation();
  return (
    <Button
      variant="contained"
      color='primary'
      component={RouterLink}
      to={`https://twitter.com/intent/tweet?text=[Typing Plus]タイピング速度:100でした!&url=https://typing-plus-front.vercel.app${location.pathname}`}
    >
      Xに投稿
    </Button>
  )}
```
&でパラメータを繋げることで、複数パラメータを含める事が可能です。
簡単な紹介にはなりますが、内容は以上です。

### 参考記事
https://qiita.com/keitah/items/6bce3913c3f9f4415693
[paiza]暇を持て余した神々の遊び(じゃんけんの手の出し方 (paizaランク A 相当))

# ドンドン人間離れしていく。。。
`あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す N 回のじゃんけんの手が全て分かってしまいました。`

何年もたつのだから もう気が付かなきゃいけない
もう 心に刻まなきゃいけない……！
勝つことがすべてだと……
勝たなきゃゴミ…… 勝たなければ…… 勝たなければ……
勝たなければ………！

https://paiza.jp/works/mondai/a_rank_skillcheck_sample/janken

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

```javascript:janken.js
// [問題文（原文）]
// あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す N 回のじゃんけんの手が全て分かってしまいました。
// 
// ただただ全勝してしまうのは面白くないので、あなたは、N 回のじゃんけんで出した指の本数の合計がちょうど M 本になるようにじゃんけんをすることにしました。
// このとき、あなたは最高で何回じゃんけんに勝つことができるでしょうか。
// 
// 
// ここで、上の文中に出てくる「出した指の本数」というのは、じゃんけんで出した手の何本の指が立っていたか、ということであり、グー、チョキ、パーそれぞれ
// 
// ・グー　のとき ... 0 本
// ・チョキのとき ... 2 本
// ・パー　のとき ... 5 本
// 
// の指を出していたということになります。
// 例えば、あなたが 4 回のじゃんけんで グー、パー、チョキ、グー と出したとすると、出した指の本数の合計は、
// 
// 0 + 5 + 2 + 0 = 7
// 
// で 7 本となります。

/// 定数
// 勝った時の指の本数
const FingerType = Object.entries({ 'G': 0, 'C': 2, 'P': 5 });
// こっちの勝ちパターン
const WinPattern = { 'G': 'C', 'C': 'P', 'P': 'G' };
function janken(lines) {
  // 入力は以下のフォーマットで与えられます。
  // 
  // N M
  // s
  // 
  // 1 行目にそれぞれじゃんけんを行う回数を表す整数 N、あなたが出す指の本数の合計を表す整数 M がこの順で半角スペース区切りで与えられます。
  // 
  // 続いて 2 行目に長さ N の文字列 s が与えられます。s の i 番目 (1 ≦ i ≦ N) の文字は i 回目のじゃんけんで相手が出す手を表し、それぞれグーが "G"、チョキが "C"、パーが "P" で表されます。
  // 
  // 入力は合計で 2 行となり、2 行目の末尾に改行が 1 つ入ります。
  const [N, M] = lines[0].split(" ").map(Number);
  const hands = lines[1].split("");
  console.log(maxWinCoount(N, M, hands, 0, 0, 0));

}
// 最大勝利集計
function maxWinCoount(N, M, hands, round, fingers, wins) {
  if (round === N) 
    return fingers === M ? wins : -1;

  let maxWins = -1;
  // 全パターンじゃんけん
  for (const [move, requiredFingers] of FingerType) {
    // 出した指の本数が超えてなかったら次の勝負へ、勝っていたらwinsに１足す
    if (fingers + requiredFingers <= M) 
      maxWins = Math.max(maxWins, maxWinCoount(N, M, hands, round + 1, fingers + requiredFingers, wins + (WinPattern[move] === hands[round] ? 1 : 0)));
  }
  return maxWins;
}

module.exports = {
  janken
};
```

指の本数をトラッキングしながら各じゃんけんの手の組み合わせをチェックしてる感じです。

**Gで勝てば0、Cで勝てば2、Pで勝てば5** なので、
最大勝つためには **G > C > P** の順に勝てばいいという仕組みなのはわかってはいるけど、
**最大勝つ** のと **指定数で勝つ** だと勝手が違うため、総当たり戦で割り出した感じになりまして、なかなか不本意な実装だったけど、とりあえず動くから良し！
Openpyxl: Border のコピー

こちらのページを参考にしました。
[罫線を別のシートやブックにコピーする[openpyxl]](https://utataneblog760.com/122copyborder/)

11列目からの6列の罫線を、17列目以降にコピーする例です。

## プログラム

```py:copy_borders.py
#! /usr/bin/python
# ---------------------------------------------------------------
#	copy_borders.py
#
#					Aug/06/2024
# ---------------------------------------------------------------
import sys
import openpyxl
from openpyxl.styles.borders import Border, Side
#
# ---------------------------------------------------------------
def copy_cell_border(row_in,col_src,col_target):
	left_border = ws.cell(column=col_src, row=row_in).border.left.border_style
	right_border = ws.cell(column=col_src, row=row_in).border.right.border_style
	top_border = ws.cell(column=col_src, row=row_in).border.top.border_style
	bottom_border = ws.cell(column=col_src, row=row_in).border.bottom.border_style

	ws.cell(column=col_target, row=row_in).border = Border(left=Side(style=left_border), right=Side(style=right_border), top=Side(style=top_border), bottom=Side(style=bottom_border))
#
#
# ---------------------------------------------------------------
xlsx_in=sys.argv[1]
#
sys.stderr.write("xlsx_in = %s\n" % xlsx_in)
wb = openpyxl.load_workbook(filename=xlsx_in)
ws = wb.worksheets[0]
print(ws.max_row)
#
col_from = 11
col_to = 17
for row_in in range(2,ws.max_row):
	for it in range(6):
		copy_cell_border(row_in,col_from+it,col_to+it)
#
wb.save(xlsx_in)
# ---------------------------------------------------------------
```

## 実行コマンド

```bash
./copy_borders.py in01.xlsx
```
「開発生産性」に関するqiita記事を発信していきます！

## はじめに

はじめまして！ファインディのFindy Team+というプロダクトに関わっているフカワと申します。

このプロダクトは、最高のエンジニア組織を創るために、Four Keysの指標や開発のアクティビティを可視化するSaaSです。

[こちら](https://findy-team.io/)がサービスのランディングページです。
Four Keysの次に、「開発生産性」という言葉が書かれていますね。

開発生産性という言葉に馴染みがある方もいらっしゃれば、初めて聞いたという方もいらっしゃると思います。

「開発生産性」とは何でしょう・・・？

## 開発生産性って？？

まずは、生産性という言葉について考えてみます。

生産性= アウトプット/インプットという考え方が一番一般的だと思います。
言い換えると、生産性とは投入した資源（労働力、資本、時間など）に対してどれだけの成果やアウトプットを生み出せるかを示す指標です。

では、そこに開発という言葉がついた開発生産性とは一体なんでしょうか？
（ここでの開発行為を行う人はソフトウェアエンジニアとします）

それを考えるためには、開発におけるインプットとアウトプットを決めなくてはなりません。
インプットの例：コミット~マージにかかった時間、プルリクの発行した数、レビューした数etc
アウトプットの例：デプロイした機能の数、変更行数、プロダクトが生み出した利益etc

見る視点によって、開発生産性の意味合いは変わってきそうです。場合によっては、開発者生産性や開発組織生産性と使い分けたり、エンジニアのパフォーマンス指標やプロダクトのROI効率性など表現するニュアンスも、変わってくる可能性もありそうです。

また、定量的に把握できるFour Keysのような指標もあれば、定性的に把握するSpace指標なども大切だと思います。

## このQiitaの目的

長々と開発生産性の意味について少し考えてみました。
結論から言うと、定義はまだまだ多様に分かれている状態だと思います。そもそも使いやすい単一のモノサシなどもないのかもしれません。

そこで、開発生産性という言葉にフォーカスして、
- 開発生産性という言葉の歴史的変遷
- 現在、実ビジネスで使われている定義の射程
- 開発生産性のこれから
などを様々に集めて、考え、発信するNoteにしていきたいです。そして、ご意見・ご感想があれば是非是非いただいた上でコミュニケーションをとっていく場にしたいです。

## おわりに

繰り返しになりますが、今後週に一回以上の更新を通じて、開発生産性という言葉について発信していきます。

私個人としては、開発生産性という概念が広がることで、エンジニアの方々の組織貢献がより分かりやすくなり、Biz/Techが共通の言語として価値あるプロダクトづくり/事業づくりの橋渡しとなると信じています！

そんな世界のために、継続的に情報収集・情報発信をしていきます。
[X]（@fu_yhh9784） も始めましたので良ければフォローしてください！

記事にいいねなどいただけると大変励みになります！
今後ともどうぞよろしくお願いします。
【Amazon Connect × Kinesis Video Streams】GetMediaを使用したリアルタイム音声データの取得

## 前提

- Amazon Connectのコンタクトフローより音声データストリーミングを有効化し、Kinesis Video Streamsへデータストリーミングを行います。
- リアルタイムで音声データを送信する必要があり、通話が始まるとECSを起動して、リアルタイムで音声データの加工・送信を行います。
- 通話中は無限ループ内でリアルタイムで取得するストリーミングデータをGetMedia APIより取得し、データ加工を行い外部APIへデータ送信を行います。
- 通話終了後にEventBridgeを使用して通話終了トリガー用のLambdaを起動し、終話フラグをオンにすることでデータ送信処理を終了させています。

## はじめに行っていたデータ取得方法

GetMedia APIよりデータ取得を行い、`transformToByteArray`を使用して変換を行いデータ送信を行おうとしていました。

```js
while(!isEndCalling ){ //終話フラグ
    const getMediaForFragmentListResponse = await kvsMediaClient.getMedia(getMediaCommand);
    const payload = getMediaForFragmentListResponse.Payload;
    const binary = await payload.transformToByteArray();

    // ~~ データ送信 ~~
}
```

awaitを使って非同期関数を呼び出す場合、JavaScriptの実行はそのプロミスが解決されるまで待機します。
`transformToByteArray`がストリーミングデータを扱う場合、データストリームの終わり（EOF）が明確でないため、プロミスはデータストリームが終了するまで（つまり、通話が終了するまで）解決されません。
つまり、GetMedia APIで取得したストリーミングデータの終端を`transformToByteArray`が検知できないため、通話が終了するまで解決されません。

## 解決方法

### GetMediaForFragmentListを使用する

GetMediaではなくGetMediaForFragmentListを使用することで解決できます。
GetMediaForFragmentListは開始時刻と終了時刻を指定してデータ取得を行うAPIです。
つまり,データストリームの終わりが明確となるため、上記問題を解決することができます。

```js
while(!isEndCalling ) { //終話フラグ
    const getMediaForFragmentListResponse = await kvArchivedMediaClient.getMediaForFragmentList(getMediaForFragmentListCommand);
    const payload = getMediaForFragmentListResponse.Payload;
    const binary = await payload.transformToByteArray();

    // ~~ データ送信 ~~
}
```

## 実装上の注意点

**1. 適切な時間範囲の設定**

GetMediaForFragmentListを使用する際は、適切な時間範囲を設定する必要があります。
適切な時間範囲の設定をしないと、必要なデータが取得できていなかったり、逆に不必要なデータを取得してしまう可能性があります。

**2. データの連続性の確保**

連続したデータストリームを処理する場合、各呼び出しの時間範囲が重複しないよう注意する必要があります。
1.で記載した適切な時間範囲の設定を行うことで、データの連続性を確保することができます。

**3. listFragmentsで取得されるフラグメントは順不同**

listFragmentsで取得されるフラグメントは順不同となっているため、フラグメントタイムスタンプでソートしないとバラバラになってしまうことがあります。

参考

## まとめ

Amazon Connectのリアルタイムのストリーミングデータ処理において、GetMedia APIを使用した方法では、データストリームの終端検知が困難でした。この問題を解決するために、GetMediaForFragmentList APIの使用しました。

開始時刻と終了時刻を指定してデータ取得が可能であり、データストリームの終わりが明確になり、処理の完了を適切に処理することができますが、適切な時間範囲の設定とデータの連続性を確保する必要があります。
python3 エンジニア認定データ分析試験チートシート１　～データ分析エンジニアの役割～

# このページについて
データ分析試験を受験するにあたって、自分が見直ししやすいように要点をまとめたシートを作成した。
記載内容は翔泳社「Pythonによるあたらしいデータ分析の教科書」から章ごとにまとめていくことにする。

## データ分析エンジニアの役割
### データ分析の世界
#### Pythonの特徴
* 言語仕様としてわかりやすい
* コンパイル不要、動的スクリプト言語
* 標準ライブラリと外部パッケージの豊富さ
* データ分析以外も応用可能
* オープンソース

#### Pythonの得意分野
* サーバ系ツール
* Webシステムの構築
* IoTデバイスの操作
* 3Dグラフィックス

#### Pythonの苦手分野
* Webアプリなどのフロントエンド
* デスクトップGUI
* 速度向上などの低レイヤー処理(得意:C++,Rust)
* 超大規模かつミッションクリティカルな処理(得意:C#,Java)

#### Pythonでデータ分析に使用されるツール
* Jupyter Notebook
* Numpy
* pandas
* Matplotlib
* SciPy
* scikit-learn

#### Python以外の選択肢
* R言語
* Excel
* VBA

------------------------------------------

#### データサイエンティストとデータ分析エンジニア
データサイエンティスト　予測洞察系
* モデル、アルゴリズムの構築
* 新たな解法、新技術への取り組み
* 解決したい課題に向き合う実務
* データとの向き合い方の提示
* 分析結果の評価

データ分析エンジニア　実データ管理、分析系、データ工学実践系
* データの加工、ハンドリング、データの可視化
* プログラミング
* インフラ
※付加価値的に必要
* 機械学習
* 数学
* 対象分野の専門知識

### 機械学習の位置づけと流れ
#### データ分析の手法
大量のデータからカテゴライズや数値予測を行う方法として以下の３つ
* ルールベース
    If分のアプローチで分類、パラメータが増えると難易度が上がる
* 統計的な手法
    データから統計的な数値を求めそれをもとに予測
    機械学習で利用する統計はその拡張
* 機械学習
    大量のデータから特性を見つけ、予測を行う計算式の塊(モデル)を作成する

#### 機械学習のタスク
以下３つ
*  **教師あり学習** 
    正解ラベルがある。　正解ラベルは目的変数と呼ぶ。
    目的変数を決定するためのデータは説明変数という。
    さらに以下２つに分類
    * **教師あり回帰** ・・・目的変数が連続値である
    * **教師あり分類**・・・目的変数がカテゴライズできる
* **教師なし学習** 
    正解ラベルなし。主にデータの特徴から予測する。
    クラスタリング、次元削減のタスクがある。

* **強化学習**
    ブラックボックス的な環境で実行する際に、
    報酬を最大化するような状態に応じた行動を学習していく手法
    囲碁や将棋等ルール上で勝ちにつながる行動をとった際に最大報酬を与え学習させる。


#### 機械学習の処理の手順
↓手順の流れと使用ライブラリ
* データ入手 Numpy,pandas
* データ加工 Numpy,pandas
* データ可視化 Matplotlib,pandas
* アルゴリズム選択 scikit-learn
* 学習プロセス scikit-learn
* 精度評価 scikit-learn
* 試験運用
* 結果利用

### データ分析に使う主なパッケージ
パッケージとはPythonに機能を追加するもの
用途に応じてパッケージを使用する

#### パッケージ紹介
* Jupyter notebook
    * Json形式
    * 拡張子は.ipynb
    * ブラウザで実行
* Numpy
    * 配列行列得意
    * 中身はC言語
* pandas
    * Numpy基盤
    * DataFrame構造
* Matplotlib
    * データの可視化に特化
    * MATLABに影響を受けている
    *折れ線ヒストグラム等が描画できる。
* scikit-learn
    * 機械学習のアルゴリズム等
* SciPy
    * 科学計算をサポート
個人的に思うエンジニア未経験者が転職するまでに身につけておくべきマインド

# 初めに
皆さん、お疲れさマッチョです🦍

私は、昨年4月より某プログラミングスクールにてプログラミング学習を開始し、今年の8月にエンジニアキャリアをスタートする事となったゴリラです。<br>
現在、社内で絶賛活動中の『ブログアウトプットTIME』という場で、アウトプットのための記事を書く時間が用意されています。（ありがたやありがたや....！）

そこで、今回は....
<br>
**《個人的に思う未経験者が転職するまでに身につけておくべきマインド》**
<br>
という内容で記事を書かせていただきました〜！

技術的な話、というよりは思考的な内容が多いポエム的な記事となっていますので、読みやすい内容になっているかと思います笑

これからエンジニアを目指して学習される方や、現在進行形で学習中・就活中の方は是非こちらの記事に一目通していただき、今後のエンジニアを目指していく上での糧にしていただければと思います！

# 私について
その前に、「このゴリラ一体何者や？」と思われた方も多いと思いますので、軽〜く自分の経歴等についてお話ししたいと思います🦍
<br>

- 徳島出身 25歳
- 工業高校卒業後、製造企業にて生産管理課に所属
- 2023年4月　某プログラミングスクールに入学
- 2023年12月　前職を退職
- 2024年2月　Webアプリ《トレゴリ》を開発、転職活動を開始
- 2024年6月　自社開発企業より内定をいただく
- 2024年8月　エンジニアキャリアスタート

<br>
ざっくりと上記のような経歴となっています。

まぁ、特に面白みもない普通のゴリラですね🦍

# 未経験者が転職するまでに身につけておくべきマインド
では、ここから本題に入っていきたいと思います！

色々書きたいことがあったのですが、今回は特に重要な内容を「2つ」抜粋して書かせていただきましたので、順に確認していただければと思います。

:::note warn
**補足**

こちらの内容は、あくまでも個人的に
<br>**「転職をする前にこういうマインドを身につけておけばよかったなぁ・身につけておいてよかったなぁ。」**<br>
という内容をまとめた記事となっております。
その事をご了承いただいた上で、閲覧をしていただければと思います🙇‍♂️

また、皆さんが思う必要なマインド等がありましたら、是非こちらのコメントにて情報共有等していただければと思います〜！
:::

## ①. 何事にも理由付けをする
これは、「自分の行動や思考には何事にも理由付けを行うような意識作りをしていきましょう！」と言うことです。

エンジニアとして実務をこなしていく上で、特に理由付けは大事だと感じています。
<br>
例えば....

『このメソッド名はなんでこの名前なのか？』

『この部分のロジックはなんでこんな処理の流れになっているのか？』

という質問に対して....

「いや、なんとなくその名前が良いと思った。」

「とりあえずそのロジックで実装出来たから。」

だと、論理的に考えずに行動しているのかと思われてしまいます...💦
<br>

メソッド等の命名はコードの可読性に繋がりますし、ロジックの書き方は「果たしてその書き方が一番効率よく処理を行うことができるのだろうか？」という事に繋がります。
<br>
このように、エンジニアとして実務をこなしていく上で理由付けは一番と言って良いほど重要なマインドになると感じています。
是非、日頃から自分の行動に簡単にでも良いので理由付けを行うようにして、その習慣が定着するように心掛けてみては以下かでしょうか😆

## ②. ノンストップTakerはダメ、ゼッタイ
まずTakerとはビジネス面で言うと、『受け取る人、要求だけをする人』と言う意味があります。

個人的にはTaker自体は悪い事では無いと思っています。
例えば、分からないことがあった際に上司や先輩、はたまた同期や友達に質問したりする場面があるかと思います。
先ほどの話と付随するのですが、分からないことをそのままにするよりも分からないことや疑問に思うことを素直に聞いたりする方が圧倒的に良い行動です。
<br>
その上で声を大にして言いたい....！

**「ノンストップTakerはダメ、ゼッタイ！」**

この『ノンストップTaker』と言う言葉、自分で勝手に作り上げました...笑
<br>どう言うことかと言いますと....
例えば、AさんとBさんで下記のようなやり取りがあったとしましょう。

```
A: B君、個人開発中にエラー発生して分からへんから教えて〜
B: いいよ！ちなみにエラー内容ってどんな内容？
A: （画面共有して）こんなエラーなんよなぁ
B: なるほど...ちなみにこのエラー自体はどんなエラーか分かる？
A: それが分からんから教えてって頼んでるんやないかぁ〜
B: あ〜、まぁそうよね。ちなみにこれって自分でググったりして調べてみた？
A: いや、調べてないよ。聞く方が早いかなぁって思って。
B: お、おぉう。
```

はい、既に皆さんお気づきかもしれませんが、この場合A君が『ノンストップTaker』と言うことになります。
つまりどう言うことかというと....<br>
**『分からないことや疑問点があった際に、一度立ち止まって自分で調べる事をせず、直ぐ人に聞きにいき情報のみを得ようとする。』**<br>
このような人を個人的に『ノンストップTaker』な人だと思っています。

エンジニア特に自走力が重要な職種だと感じています。
自走力を磨くためにはやはり、自分で思考し解決していきその経験を積み重ねていく必要があると考えています。
分からない事を素直に聞くことは良いことですが、自分で思考・検証せずに直ぐに答えを聞きにいくようでは、自分の経験にもならないし自走力も身に付かないと思っています。
<br>
そのため、プログラミング学習や実務をこなす上で『ノンストップTaker』には絶対にならないようにしましょう....！

# まとめ
今回は、自身がエンジニアキャリアスタートしてから特に感じた《個人的に思う未経験者が転職するまでに身につけておくべきマインド》について記事を書かせていただきました！
<br>
かと言って、自分もこれが完璧に出来ているのかと言うとそうでも無いです....笑

むしろまだまだな部分がありますので、それは今後も引き続き身につけていきたいと思います🦍
<br>
この記事がこれからエンジニア転職を目指される方や、現在絶賛転職活動中の方の手助けになることが出来れば幸いです....！
【合格体験記】AWS認定クラウドプラクティショナー（CLF-C02）試験

はじめまして。Qiita初投稿になります。
表題の通り、この度[AWS認定クラウドプラクティショナー（CLF-C02）試験](https://aws.amazon.com/jp/certification/certified-cloud-practitioner/)を受験し、無事合格することができました。
しかし試験勉強を通じて反省点も多く感じたため、今後同試験を受けられる方の参考＋自身の備忘録としてナレッジを残そうと思います。

### 1. 目的（Why）
　まず、受験に至った経緯についてです。私は現在、某IT企業の新卒1年目として配属後研修を行っています。配属頂いた部門がAWS製品を主力に扱っているため、スキルアップの一環としてCLF試験勉強が組み込まれていました。
 　今後長く関わるであろうAWS製品について、業務に入って困らないよう基礎を身に着ける目的で勉強・受験を行いました。

### 2. 背景（Who）
　次に、私自身のAWS製品に関する前提についてです。AWS製品は配属後研修で初めて触れ、具体的なサービスについてもほとんど知らない状態でした。逆に知っていたこととしては
* クラウドの一般的な特徴
* 主要なクラウドとしてAWSが存在すること
* ETL処理、DWH、BIなどデータ活用に関する一般的知識と関連するいくつかのAWSサービスの存在

程度でした。

### 3. 教材（What）
1. [AWSソリューションアーキテクトーアソシエイト最強Web問題集](https://mondai.ping-t.com/)（Ping-t）
2. [【CLF-C02版】この問題だけで合格可能！AWS 認定クラウドプラクティショナー 模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-4260/?couponCode=ST10MT8624)（Udemy）

### 4. 期間（When）
　約1か月（2024/7/1～2024/8/3）
　　平日：平均1.5h/日 × 24日 = 36h
　　休日：平均2h/日 × 4日 = 8h
　　合計：44h

### 5. 学習方法（How）
**1. 知識の定着と分野別問題演習（Ping-t、15日）**
部門での方針もあり、知識のインプットはPing-tで行いました。Ping-tでは「分野」「サービス」の粒度（以下、単元）で構造化されているため、30問/日を目安に分割して、順に進めました。
各問題には「参考」という項目があり、単元ごとに知識がまとめられているので、①「参考」を一通り見て内容理解→②単元別にすべて正解するまで問題演習、の流れで学習を進めました。

**2. 分野横断問題演習（Ping-t、6日）**
一通りインプットを終えてからは、全分野を選択しランダムに50問出題で演習を行いました。合計で20回ほど繰り返し、安定して90%以上正答できる程度に知識を定着させました。

**3. 模擬試験演習（Udemy、7日）**
Ping-tだけでは問題を覚えてしまっているところもあったので、よく耳にしたUdemyの模試を利用しました。
最終的に6回分解きましたが、復習と再演習を行ったのは基本編①②と応用編①の3回のみでした。これらは正答率が90%を超えるまで繰り返しました。

以上の3ステップで学習を行い本番に臨みました。
教材の所感としては、Ping-tは図表も豊富でまとまった解説があったため学習しやすかったと思います。初学者としてはとっかかりやすかったです。
Udemyの模試は、よく言われるように難易度は本番よりも高めな気がするので、6回すべてでなくても応用編①までを確実にすれば問題ないと思いました。特にPing-tでは出てこなかったサービスについて、Udemyの模試を通じて知るものがかなりあったため買ってよかったと思います。Ping-tで事前に主要なサービスは押さえられていたため、肉付けしていく形で覚えました。

しかし、覚えることの量が多すぎるため全てを整理しきれず、「問題慣れして解けているだけでは」「頻出しないサービスについて覚えられていない」といった不安が残った状態で当日を迎えました。

### 6. 結果と振り返り
　まず、結果としては776点で無事合格することができました。ひとまず1回で終えられたことに安堵です...
　試験の感想としては、意外と「○○を実現するサービスはどれか」といった単純な問題が多かった印象です。Udemyの模試で少し絶望していたので、「これならいけるかも」という気持ちで乗り切ることができました笑

　学習の仕方も含め、学び・反省点は以下の通りです。
 * 「EC2といえば○○」のように、各サービスをキーワードを用いて一言で表すような整理の仕方が大事だった。
 * 「Well-Architected Framerork」「7つの設計原則」の各項目・該当する事例は必ず押さえる。
 * 同カテゴリのサービス間（例：データベースのRDSとDynamoDBなど）での違いに注目したまとめができたらよかった。
 * 「デプロイ」「サーバレス」といった専門用語は面倒くさくても調べて、正確に意味を理解することが大事。

次はDEA試験を受ける予定なので、今回の反省を踏まえて次回はより納得感を持って合格できるようにしたいと思います！

ご覧いただきありがとうございました。
【アクセシビリティ】　Googleスライドをスクリーンリーダーユーザーでも確認できるようにする方法

こんにちは！
1年目の小川です。

今回は、Googleスライドをスクリーンリーダーを使っている人でも資料の中身が読めるようにするための方法についてまとめていきたいと思います。

# こんな人に読んでほしい！
* Googleスライドを使って資料を作成している方

# スクリーンリーダーとは？
**スクリーンリーダー**とは、音声読み上げソフトのことで、画面の情報が見えにくい方や見えない人が音声を頼りに操作する際に使うソフトや機能のことです。

# Googleスライドをスクリーンリーダーユーザーでも中身が読めるようにする方法
それでは早速、どのようにしたら良いのかを以下でまとめていきたいと思います。
以下のことを行うことによって、スクリーンリーダーユーザーを含むすべてのユーザーにとって読みやすい資料を作成することができます。

## 代替テキストを含める
画像や図形描画などに代替テキストを設定すると、スクリーン リーダーを使用するユーザーは画面上にあるものを音声説明で理解することができます。
代替テキストを設定しない場合、「**画像**」という言葉しか聞こえないため、どのような画像なのかが分かりません。

## 代替テキストを追加、編集する

* **画像、図形描画、グラフィック**を選択
* [**書式オプション**]を選択
* [＊**代替テキスト**] を選択
  * Mac の場合:  + option + y 
  * その他のプラットフォームの場合: Ctrl + Alt + y 
* 画像を挿入したら、右上のその他アイコン その他 次の操作 [代替テキスト] を選択
* 指定内容を入力
* タイトルを追加するには、[**詳細オプション**] を選択

## コメントと提案を使用する
スライドのテキスト内にメモを記入する代わりに、コメント機能や提案機能を使用します。
スクリーンリーダーのユーザーにとっては、入力してある文章に付け加えて色を変えたりしたメモや修正点を追加しても、気づかないことや訂正箇所だと分からないことがあります。
書いてあるものの中からメモを探すより、キーボード ショートカットを使用してコメントに移動する方が簡単で認識違いをなくして修正箇所やメモを明確に理解することができます。

## 色のコントラストを確認する
色のコントラストが十分にあれば、テキストや画像は読みやすく、わかりやすくなります。
ウェブコンテンツのアクセシビリティガイドライン（WCAG 2.0）では、サイズの大きな文字には 4.5:1 以上、その他の文字と画像には 7:1 以上のコントラスト比を推奨と記載があります。
たとえば、白い背景に明るい灰色の文字は避けた方が良いです。

## コントラストを確認する方法

* WebAIM Contrast Checker
  Pantoneやフォントデータを入力すると、WCAG 2.1 準拠状況に基づいて合否を判定してもらえるウェブサイトです。
* Accessible Web Color Contrast Checker
  色の値を入力してコントラストをチェックできるウェブサイトです。

## リンクの説明文を使用する
スクリーン リーダーでは、リンクもスキャンされるため、リンクの説明文を使用するとどんなリンクに飛ぶのかが分かりやすくなります。
リンクの説明文にはページのタイトルを使用することをおすすめします。たとえば、プロフィール ページにリンクする場合は、リンクの説明文に「**ここをクリック**」ではなく「**プロフィール**」と指定します。

# 最後に
今回は、Googleスライドをスクリーンリーダーユーザーでも読めるようにする工夫について一部ですが紹介してきました。
全ての人が読みやすい資料になるように、ぜひ一つずつ実践してみてください！
ここまで読んでいただき、ありがとうございました！

# 参考サイト
* Web Content Accessibility Guidelines（WCAG 2.0)

 https://www.w3.org/TR/WCAG20/#visual-audio-contrast
 
* WebAIM Contrast Checker
 
 https://webaim.org/resources/contrastchecker/
 
* Accessible Web Color Contrast Checker

 https://accessibleweb.com/color-contrast-checker/
 
* ドキュメント、プレゼンテーション、スプレッドシート、動画を閲覧しやすくする

 https://support.google.com/docs/answer/6199477?hl=ja
配列を任意の個数で分割した新しい二次元配列を作る（JavaScript）

# 結論

```javascript

const arr = [1,2,3,4,5,6,7,8,9];
const divideNum = 3;

const result = arr.flatMap((_, i, a) => {
  if (i % divideNum === 0) return [a.slice(i, i+divideNum)];
  return [];
});

// result = [[1,2,3],[4,5,6],[7,8,9]];
```

# 仕組み

1. 配列のindexで処理を分岐（配列を分割した二重配列or空配列）
2. flat()により階層を1つ上げる

# おわりに

- flatMap() はmap() + flat()の機能
- flatMapの方が若干パフォーマンスが良い
- 引数はmapと同じ（要素・インデックス・呼び出した配列）

# 別解

※コメントより（@oswe99489 さん）

```javascript
const arrayDivide = (arr, divideNum) => {
  const result = [];
  const t = arr.slice();
  while (t.length && divideNum >= 1) result.push(t.splice(0, divideNum));
  return result;
};

const arr = [1,2,3,4,5,6,7,8,9];

console.log(arrayDivide(arr, 3)); // [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
console.log(arrayDivide(arr, 4)); // [ [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ], [ 9 ] ]
console.log(arrayDivide(arr, 0)); // []
```

# 参考

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

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

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

https://qiita.com/STSHISHO/items/e50b239927605114742d
調べ物をするときに個人的に超使ってるググり方３選

# はじめに

コーディング時にわからないことを調べるのはプログラマとして日常茶飯事かと思います。
本記事では、個人的にいつも使ってるググり方のコツを3つほどご紹介いたします！

## 1.  "(ダブルクォーテーション)で囲う(完全一致)
ワードを **"(ダブルクォーテーション)** で囲うことで、囲われたワードを含めた検索結果のみを表示することが出来ます！


例：「React "JISOU"」で検索
![スクリーンショット 2024-08-01 18.50.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832049/aae0d71f-1f10-39ff-ce76-773d4a44b7c3.png)

上記の例はReactの検索をしていますが、それに合わせてJISOUというワードを含めた検索結果のみを表示しています。
検索するワードによっては余計な結果が含まれることもあると思うので、欲しい結果のみを表示したい場合に使える手法です。

## 2. 検索するワードの一部を*(アスタリスク)に変更する（あいまい検索)
検索ワードの一部を ***＊(アスタリスク)** にすることで、あいまい検索（※）をすることが出来ます！

:::note info
（※）あいまい検索とは…
検索キーワードと完全一致していなくても、表記揺れや同義語を吸収して検索したり、類似文を柔軟に解釈して検索したりすること
:::

例：「Uncaught SyntaxError: Unexpected identifier *」で検索
![スクリーンショット 2024-08-01 19.03.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832049/88d1c270-f82b-9bc3-ef13-a4ff7059cecf.png)

開発時、エラーログをそのまま検索することはしばしばあると思いますが、その際に変数名などの可変部分を*(アスタリスク)にすることで、そのままのワードで検索するよりも沢山の情報がヒットすることがあるので、この方法もかなり有用かと思います！


## 3. 検索ワードの後ろに「 after:YYYY」を付与して検索する（期間の限定）
<font color="red">**この方法は超絶便利です！！**</font>
 検索したいワードの後ろに「 after:YYYY」を付与して検索すると、**指定した年（YYYY）より後** の検索結果のみを表示することが出来ます。

 例：「react-router-dom after:2023」で検索
 ![スクリーンショット 2024-08-01 19.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832049/8befcaac-a565-4bce-ebab-997ad1d20f87.png)

上の例では、**2023年より後（2024年以降）** の、react-router-domというワードを含めた検索結果を表示します。
特にReactやVueのようなモダンなライブラリではちょくちょく破壊的変更（これまでとの互換性が保てないような大きな変更）があるため、最近の記事のみを表示したい場合に重宝する検索の方法となります！

## おわりに
いかがだったでしょうか。
この記事を書くにあたり、検索の方法を調べてみたところ、他にももっとあるみたいですが
私が特に使う手法はここで紹介した3つです。
いや、他にもこの検索方法はかなり使えるよ！という方法があればぜひコメントいただけると嬉しいです！

## 参考
https://qiita.com/dodonki1223/items/955819806297ee554b31

## JISOUのメンバー募集中🔥
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇

https://projisou.jp/
ChromeディベロッパーツールでWebSocketを切断する方法

# はじめに
WebSocketが途中で切れても、問題ないように再接続の処理を加えることはよくあると思いますが、ChromeでWebSocketを手動で切断する方法が分からなかったので調べました。

# 切断方法
コンソールを開いて、以下を入力します。

`queryObjects(WebSocket)`

そうすると、WebSocketのオブジェクトが返ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312001/5e824883-82e8-ddcf-85cb-df04f9f53e33.png)

このWebSocketとオブジェクトを右クリックすると、以下のようなモーダルが出るので、`Store as global variable` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312001/afab65d7-8dc5-543b-ebe9-73c481e6cb53.png)

そうすると`temp1` のような変数にWebSocketオブジェクトが格納されます。（もしかしたら他の環境だと違う変数名なのかもしれませんが、多分同じかなと思います）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312001/91c9d34d-8173-cd74-f63e-e4274e006c92.png)

あとは、このオブジェクトを`temp1.close()`でcloseすればWebSocketが切断されます。

# 参考文献
https://stackoverflow.com/questions/38729050/chrome-disabling-web-sockets-or-closing-a-web-socket-connection
PHPでパスワードハッシュ化: `password_hash`関数の使い方

## `password_hash`関数の使い方


```php
<?php
$password = "your_password";
$hashed_password = password_hash($password, PASSWORD_DEFAULT);

echo $hashed_password;
?>
```

### 説明

- **$password**: これはハッシュ化したい元のパスワードです。ユーザーが入力したパスワードをこの変数に格納します。
- **PASSWORD_DEFAULT**: これはハッシュ化に使用するアルゴリズムを指定するための定数です。`PASSWORD_DEFAULT` を使用すると、現在のデフォルトアルゴリズムが適用されます。将来的にデフォルトアルゴリズムが変更された場合でも、この定数を使用することで最新の安全なアルゴリズムが適用されます。

## `password_hash`関数の利点

### 1. 安全なハッシュ化

`password_hash` 関数はパスワードを安全にハッシュ化するために設計されています。ハッシュ化されたパスワードはデータベースに保存され、元のパスワードを知ることなく認証に使用できます。

### 2. アルゴリズムの自動更新

`PASSWORD_DEFAULT` を使用すると、PHPが提供する最新の安全なアルゴリズムが自動的に選択されます。これにより、セキュリティの更新が容易になります。

### 3. ソルトの自動生成

`password_hash` 関数は自動的にソルトを生成し、ハッシュ化されたパスワードに含めます。これにより、同じパスワードであっても毎回異なるハッシュが生成されるため、セキュリティが向上します。

## パスワードの検証

ハッシュ化されたパスワードを検証するには、`password_verify` 関数を使用します。

```php
<?php
$entered_password = "user_input_password";
$hashed_password = password_hash("my_secure_password", PASSWORD_DEFAULT);

if (password_verify($entered_password, $hashed_password)) {
    echo "パスワードが一致しました";
} else {
    echo "パスワードが一致しません";
}
?>
```

`password_verify` 関数は、ユーザーが入力したパスワードとハッシュ化されたパスワードを比較して、一致するかどうかを確認します。
VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化

## アジェンダ
VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化する方法をまとめます。

## 手順
プロジェクトにNode.jsの特定バージョンを固定するには、以下の手順に従います。まず、プロジェクトのディレクトリで次のコマンドを実行してください（バージョン番号は適宜変更してください）。

```sh:Node.jsのバージョンをプロジェクトに固定する
volta pin node@12.22
```

同様に、npmのバージョンを固定する場合も、以下のコマンドを実行します。

```sh:npmのバージョンをプロジェクトに固定する
volta pin npm@9.3.1
```

この操作により、指定されたバージョンはプロジェクトディレクトリに戻ると自動的に有効になります。

この操作を行うと、プロジェクトの`package.json`には以下のように設定が追記されます。

```json:固定されたバージョンの管理
"volta": {
  "node": "12.22",
  "npm": "9.3.1"
}
```

`package.json`に設定が追加されるため、プロジェクトの他の開発者が`git clone`を使用してプロジェクトを取得した場合でも、Voltaがインストールされていれば初回の`node`コマンド実行時に指定されたバージョンがインストールされます。

また、`package.json`内の設定が見落とされる可能性があるため、プロジェクトの`README`ファイルにも固定バージョンの情報を記載しておくと尚良い。

## 参考リンク
[Node.jsのバージョン管理はVoltaに決定](https://zenn.dev/aiueda/articles/7dcecaa05d4f24)
ディレクトリ維持したままコピーする

```
# 退避先のルートディレクトリを指定
$destinationRoot = "C:\Backup"

# 退避したいファイルの絶対パスを配列で指定
$filesToBackup = @(
    "C:\SourceRoot\Folder1\File1.txt",
    "C:\SourceRoot\Folder2\Subfolder\File2.txt",
    "C:\SourceRoot\Folder3\File3.txt"
)

# 共通の接頭辞ディレクトリを指定（例：C:\SourceRoot\）
$commonPrefix = "C:\SourceRoot\"

# 各ファイルを処理
foreach ($file in $filesToBackup) {
    # 元のファイルパスから相対パスを取得
    $relativePath = $file.Substring($commonPrefix.Length)
    
    # 退避先のフルパスを作成
    $destinationPath = Join-Path $destinationRoot $relativePath
    
    # 退避先のディレクトリが存在しない場合は作成
    $destinationDir = Split-Path $destinationPath -Parent
    if (!(Test-Path $destinationDir)) {
        New-Item -ItemType Directory -Path $destinationDir -Force | Out-Null
    }
    
    # ファイルをコピー
    Copy-Item $file $destinationPath -Force
    
    Write-Host "Backed up: $file to $destinationPath"
}
```
pythonでエクセルファイルを作成してみた

openpyxlとpandasを触り始めたので、ひとまずtxtをexcelファイルにペーストする簡易なコードを書いてみた。

## ライブラリのインストール
```
pip install openpyxl pandas
```

## Openpyxlの場合
テンプレート(ヘッダーあり)を用意して別ファイルへ保存する。ws.append()で何も書かれてない行から書き込めるので、2行目からテキストの内容が書き込まれた

```python
import csv
import openpyxl

TEMPLATE = "template.xlsx"

with open("result.txt", encoding="utf-8", newline='') as txt:
    reader = csv.reader(txt, delimiter='\t')
    data =  [row for row in reader]

wb = openpyxl.load_workbook(TEMPLATE)
ws = wb["result"]

[ws.append(row) for row in data]

# Excelファイルを保存
wb.save("output.xlsx")
```

## Pandasの場合
ExcelWriter()で引数mode='a'にすることで既存のExcelファイルに書き込みできる[^1]。
また、テキストの行数が多かったのでchunkを使用することで読み込むようにした[^2]。

```python
import pandas as pd

if __name__ == "__main__":
    target_file = "sample.txt"
    output_file = "sample.xlsx"
    target_sheet = "sample1"

    with pd.ExcelWriter(output_file, mode="a", if_sheet_exists="overlay") as writer:
        for i, chunk in enumerate(pd.read_csv(target_file, sep="\t", encoding="utf-8", header=None, chunksize=100)):
            if i == 0:
                chunk.to_excel(writer, sheet_name=target_sheet, index=False, header=False, startrow=1)
            else:
                chunk.to_excel(writer, sheet_name=target_sheet, index=False, header=False, startrow=writer.sheets[target_sheet].max_row)
```

[^1]:[pandasでExcelファイル（xlsx, xls）の書き込み](https://note.nkmk.me/python-pandas-to-excel/)

[^2]:[Python Pandasを使った大規模CSVファイルの高速処理方法](https://qiita.com/Tadataka_Takahashi/items/85357dc156e44768088c#csv%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96)
なかなか雨が去らない

JavaScriptの勉強もほどほどに、ブログ作成に取り掛かりました。
これまでローカル環境ではPHPmyAdminやMySQL Workbenchを使っていたのでターミナルで操作するのに戸惑いました。
クリックでぽちぽちは圧倒的に楽ですが、コマンドで作成はできていた方が強いと思うので頑張ってコマンドで操作しています。
（…MySQL Workbenchで接続しようとしたら接続できず、よくわからなかったから諦めた結果なんですが…。）

私が暮らしている地域も梅雨明けしたらしいのですがなかなか雨が去りません。
そのせいで外に出ると毎日蒸し蒸し、暑さも相まって最悪な気候です。トホホ…。
import torchのOSErrorが解決できた話

## 自己紹介
データサイエンスを学んでいる、大学4年生です。
最近は、SIGNATEのコンペに4つ参加しながら、東京大学の松尾・岩澤研究室主催のサマースクールを3つ受講し、マナビDXにも参加しています。

Xはこちら→[@uki_datascience](https://x.com/uki_datascience)

## 背景
今回は、BERTを使うために、Pytorchをインストールした時に起きたトラブルを取り上げます。

## 起きたこと
BERTを使おうと、Pytorchをインストールしたところ、以下のようなエラーが出ました。
このエラーでは、「"fbgemm.dll"というファイルのロードに失敗した」というエラーのように見えます。確認してみると、エラーコードにあるパスに、"fbgemm.dll"というファイルは確かに存在していました。

```
OSError                                   Traceback (most recent call last)
Cell In[2], line 2
      1 # from transformers import BertTokenizer, BertModel
----> 2 import torch
      4 # BERTトークナイザーとモデルのロード
      5 tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')

File c:\Users\~~~\Lib\site-packages\torch\__init__.py:148
    146                 err = ctypes.WinError(ctypes.get_last_error())
    147                 err.strerror += f' Error loading "{dll}" or one of its dependencies.'
--> 148                 raise err
    150     kernel32.SetErrorMode(prev_error_mode)
    153 def _preload_cuda_deps(lib_folder, lib_name):

OSError: [WinError 126] 指定されたモジュールが見つかりません。 Error loading "c:\Users\~~~\Lib\site-packages\torch\lib\fbgemm.dll" or one of its dependencies.
```
## 解決策
いろいろと試してみたのですが、全然解決せず、最終的にこちらの記事にたどり着きました。

https://qiita.com/kunishou/items/b1789c446770c8c97613

この記事では、古いバージョンを指定して、Pytorchをインストールすることで解決したとありました。
起きている現象は同じだったので、早速試してみたところ、無事解決することができました。

実際に僕が試したコマンドはこちらです。
```
python -m pip install torch==2.1.2 torchvision==0.16.2 torchaudio==2.1.2 --index-url https://download.pytorch.org/whl/cu118
```
## おわりに
今回のエラーが出た時、ChatGPTをひたすら頼っていたのですが、なかなか解決せず、解決するのに数日かかりました。最初からQiitaの記事を探していればすぐに解決できたような気もしますが、ChatGPTには普段からお世話になっているので、これぐらいは許しましょう。この記事が、同じような現象に陥っている方の救いになれば幸いです。
【jQuery】【JavaScript】evalを活用して文字列を変数にする※globalthis でもできる

# eval
```javascript

var aaa = 111;
var bbb = 222;
var ccc = 333;
var ddd = 444;

const results = ['aaa', 'bbb', 'ccc'];

$.each(results, function(k, v) {
    console.log(eval(v));
});

 console.log(eval('d'+'d'+'d'));
```

# globalThis
```javascript

var aaa = 111;
var bbb = 222;
var ccc = 333;
var ddd = 444;

const results = ['aaa', 'bbb', 'ccc'];

$.each(results, function(k, v) {
    console.log(globalThis[v]);
});

console.log(globalThis['d'+'d'+'d']);
```



# 結果
```javascript
111
222
333
444
```