OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonで小数をいい感じに取り扱うために

# はじめに
浮動小数点数の計算は、微妙な誤差が生じることがあります。
これはPythonというかCPUの性質に起因するものです。

この記事ではPythonでいい感じに取り扱うための方法を書いていきます。


# Pythonでの挙動とその誤差
Pythonで以下のようなコードを実行します。

```python
a = 0.33
b = 10

print(a * b)
```

0.33に10を掛けるだけの単純なものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3283241/9bb1326a-16ae-80b1-9de5-c35ef309231b.png)

実行するとこんな感じ。
ごく僅かですが、誤差がありますよね。

これは当然の話で、現代のCPUにおいては精度に関する微小な誤差が生じてしまいます。

これは、コンピュータが有限の精度で実数を表現するために起こります。
(IEEE 754規格では2**53以上の整数値を表現できないため)

Pythonの場合も同様で、例えば0.1のような値は内部的には完全な2進数で表現され、無限小数ではなく近似値として保存されます。

俗に言う浮動小数点ってやつです。

端的に言ってしまえば、内部的な計算はすべて2進数のもと行われているので、10進数を前提とした計算は難しいよ～ってお話です。


# 精度をあげるには
実はdecimalという10進数の浮動小数点のための計算を行うために設計されている標準ライブラリを用いることでより精確な計算ができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3283241/819879a0-2896-1fff-1193-e2c35d5676a9.png)

ちゃんと動きますよね。

ちなみにこれは、float型からDecimal型にキャストするとうまくいきません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3283241/9f066f8b-9e81-4db2-4102-1fab90904b9b.png)

float型は近似値を渡してしまうようで、その近似値をそのまま読んでしまうため、こうなったものと考えられます。
一度strに変換した後、読み込んであげるとうまくいきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3283241/1c39be94-3b47-21d2-4b62-cb2c96f8f08b.png)

ですが、decimal型は十進小数を正確に表現できるものであって、全ての実数を正確に表現できるわけではないことに注意する必要があります。
詳しく知りたい方は[ここ](https://docs.python.org/3/library/decimal.html)を参考にしてください。

https://docs.python.org/3/library/decimal.html

# さいごに
浮動小数点数の計算は、特に大規模な数値計算や高精度が求められる場面では注意が必要です。
decimalを使ってあげることで、精度を向上させることができますが、限界があります。

この記事が誰かのお役に立てれば幸いです。

それでは。
ABC302Dを解いた


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

[AtCoder Problems](https://kenkoooo.com/atcoder/)でRecommendationの中から選んだ以下の問題を解いていく

https://atcoder.jp/contests/abc302/tasks/abc302_d

# 実装コード

解説みずにとりあえずしゃくとり法で行けそうと思い実行してみた結果。
WAやTLEのオンパレードで、うまく実行できなかった。

<details><summary>しゃくとり法を試したコード(TLE+WA)</summary>

```python
import sys
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

def main():
    N, M, D = rLI()
    A = rLI()
    B = rLI()
    
    A.sort()
    B.sort()
    
    l = 0
    r = 0
    ans = -1
    for a in A:
        while l < M and abs(a - B[l]) > D:
            l += 1
        while r < M and abs(a - B[r]) <= D:
            r += 1
        if l == M:
            break
        for j in range(l,r):
            # err(a,B[j],a+B[j],abs(a - B[j]), ans)
            if a+B[j] > ans:
                ans = a+B[j]
    print(ans)
if __name__ == '__main__':
    main()

```

</details>

ここで解説を見てしまったが、
最大値を試して、条件を満たさない場合、大きい方を解から除外するような処理をすればよかったようだ。
最大値を出すにはソートして後ろから消せばいいと書いてあったが
折角なので`heapq`を使った最大値の優先度付きキューを使用してみた。

```python
import sys
import heapq
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

class Maxheapq:
    def __init__(self):
        self.q = []

    def push(self, v):
        heapq.heappush(self.q, v * -1)

    def pop(self):
        return heapq.heappop(self.q) * -1

    def get(self):
        return self.q[0] * -1

    def values(self):
        for _q in self.q:
            yield -_q

def main():
    N, M, D = rLI()
    A = rLI()
    B = rLI()
    
    Aq = Maxheapq()
    Bq = Maxheapq()
    
    for a in A:
        Aq.push(a)
    for b in B:
        Bq.push(b)
    
    if abs(Aq.get() - Bq.get()) <= D:
        print(Aq.get() + Bq.get())
        return    
    while True:
        if N==0 or M==0:
            print(-1)
            break
        a = Aq.get()
        b = Bq.get()
        if abs(a - b) <= D:
            print(a+b)
            break
        if a > b:
            Aq.pop()
            N -= 1
        else:
            Bq.pop()
            M -= 1
        
if __name__ == '__main__':
    main()

```


# まとめ
ABC302Dを解いた、実装には最大値の取り出しを行い、それには優先度付きキューを使用した。

# 感想
適当に解法を選び、実装して駄目だったらすぐ解説を見てしまった。
他になにか実装方法がないか考える力が足りないからだと思うので、次から気を付けていきたい。
テストアナリストのレビュー

# 本記事の概要
本記事は、JSTQBテストアナリスト シラバスのレビューのセクションの要約です。

# 目的	
- テストアナリストはレビューで意見を言う。
- レビューで欠陥をあぶり出し、除去することで、後続のプロセス(例えば、設計、実装、テスト）での欠陥を防げる。
それゆえ、納品時の品質を高めるためにコスパの良い手段である。						

# 方法	
- チェックリスト	
例：ドキュメントが一意に定まること、「未定」「TBD」と記される部分がないこと、書式が適切であること、など。				

## 適用範囲	
- 要件や仕様のドキュメント　例：ユースケース、要件書、ユーザーストーリー					
- 全てのレビューで使うことも、一部の品質特性、ドキュメントのみに絞ることもできる。
- テスト担当者のスキルセット				
- 特定のリスクの可能性と影響度。例：セーフティクリティカルなシステムの場合				
- 特定のテスト技法。例：デシジョンテーブルで提示される規則など				
							
## チェックリストレビューのメリット
- チェックリストを使うことで、検証すべき具体的なポイントを意識できる。				
- 属人的なレビューを避けられる。				
- 問題を発見することを支援する。さらに、チェックリストでカバーできていない項目について議論できる。				
		
  
## 使い方
- 複数のチェックリストを組み合わせて使うことも可能。				

### 要件レビュー	
チェックリストの例
1. 要件を提示したステークホルダー(人、部署)				
2. 各要件がテスト可能かどうか				
3. 各要件の優先順位がついているか				
4. 各要件の受け入れ基準は定義されているか				
5. ユースケースの実現に必要な呼び出しの仕組みの可用性				
6. 各要件/ユースケース/ユーザーストーリーに対し、一意な識別子はあるか				
7. 各要件/ユースケース/ユーザーストーリーに対し、バージョンは定義されているか				
8. ビジネスの要件と、システム要件の間のトレーサビリティは確立されているか				
9. 要件とユースケースの間のトレーサビリティが確立されているか(あれば)				
10. 使われている用語に一貫性があるか(用語集の使用など)				


-  テスト不可能な要件は、欠陥のある要件だとみなすべきである。
例：「ユーザーにやさしいエラー表示をする」という要件
-  もしも品質特性に関する標準ドキュメントを参照しているならば、その標準とテストケースの間のトレーサビリティも確立すべきである。というのも、標準が変更された際に、テストケースも変更する必要があるためである。					
- 合格・不合格を判断できるテストを作れない要件も、欠陥のある要件である。
例：「永久に可用性100%であること」、という要件はテストを作れない。いつまで試せばよいか不明だからである。					

### ユースケースレビュー	
チェックリストの例	
1. システムの振る舞いは明確に定義されているか？				
2. 全ての代替シナリオは洗い出されており、エラー処理も定義されているか？				
3. ユーザーインターフェースに表示されるメッセージは定義されているか。				
4. メインな振る舞いは1つだけか?				
5. それぞれのシステムの振る舞いはテスト可能か？		
		
### ユーザーストーリーのレビュー
- ユーザーストーリーとユースケースの違い
ユースケースは複数の機能を含むユーザーのトランザクションである。一方ユーザーストーリーはより独立した機能である。				

- チェックリストの例
1. ストーリーのイテレーションorスプリントへの割り当ては適切か				
2. ストーリーはユーザーの目線で記述されているか				
3. 受け入れ基準は定義されているか？				
4. 機能は明確に定義されており、他と区別できるか？				
5. ストーリーは他のストーリーに依存していないか？				
6. ストーリーに優先度が割り当てられているか？				
7. ストーリーは一般的に使用される形式を守っているか？
(形式：<>として<>をしたい。なぜなら<>だから)
			
## チェックリストのテーラリング	
チェックリストをテーラーリング/アレンジする必要性が発生する要因	
- 組織のポリシー、標準、慣習					
- 法的制約					
- プロジェクトの取り組み (例：重点項目)					
- レビュー対象の作業成果物の種類。コードレビューはプログラミング言語ごとにアレンジするのが望ましい	
- レビュー対象の作業成果物のリスクの可能性と影響度。例：ミッションクリティカルなシステムならば綿密にチェックするのが望ましい					
- 使用するテスト技法					

# 参考資料

ISTQB®テスト技術者資格制度Advanced Level シラバス日本語版テストアナリスト
Version 3.1.1.J03 

https://jstqb.jp/dl/jstqb.jpdlJSTQB-SyllabusALTA_V311.J03.pdf
docker-compose実行時の「line 1: Not: command not found」

# 問題
## line 1: Not: command not found

M1Macを使ってdockerで環境構築している際にエラーで困っていたので備忘録として残します


'''
/usr/local/bin » docker-compose -v
/usr/local/bin/docker-compose: line 1: Not: command not found
'''

コンテナを立ち上げようとした際にググったサイト通りにコマンドを入れてみましたがエラー？が帰ってきて困っていました

# 解決策
## バージョンの違い

https://www.konosumi.net/entry/2023/02/26/142508


上記記事がとても参考になりました

要はdocker-composeのバージョンで書き方が違うようです

ver1

docker-compose

ver2

docker compose
TypeScriptの基本について調べてみました。

# はじめに
TypeScript は、JavaScript に型付けを追加することで、開発者にとって書きやすく、保守しやすいコードを提供します。本記事では、TypeScript の基本的な概念を解説します！
# 対象読者
- TypeScript を学びたい初心者の方
- JavaScript から TypeScript に移行しようとしている方
- 既に TypeScript を使っているが、さらに深く理解したい方

# 目次
1. TypeScriptとは
2. TypeScriptの基本的な概念
3. 実際のプロジェクトでの使い方
4. TypeScriptでよくある課題とその解決方法
5. まとめ

# 1. TypeScriptとは
TypeScriptは、Microsoftが開発したオープンソースのプログラミング言語です。JavaScriptをベースにしており、型システムを導入することで、コードの安全性と可読性を向上させます。

## TypeScriptの基本について
TypeScriptはJavaScriptのスーパーセットです。そのため、既存のJavaScriptコードがそのまま動作し、更にタイプセーフなコードを書けるようになります。以下の特徴があります。
- **型アノテーション**: 変数や関数に明確な型を宣言できる。
- **静的型チェック**: コードを書いている時点で型の矛盾を検出し、エラーを防ぐ。
- **先進的な機能**: エンターエンターフェイスやジェネリクスなど、高度なプログラミング機能をサポート。

# 2. TypeScriptの基本的な概念
TypeScriptの基本概念を理解することは、この言語を効果的に活用するための第一歩です。以下、主要な概念を紹介します！

## 変数と型アノテーション
TypeScriptでは、変数宣言時に型を指定することで、コードの予測可能性を高めます。例えば
```typescript
let message: string = "Hello, TypeScript!";
let isDone: boolean = true;
let count: number = 42;
```

## 静的型チェック
TypeScriptは静的型チェックを行うため、コンパイル時に型エラーを検出します。この機能により、ランタイムエラーを減らすことができます。

## クラスとインターフェース
TypeScriptは、オブジェクト指向プログラミングをサポートするためにクラスとインターフェースを利用します。
```typescript
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name}.`;
  }
}

interface Employee extends Person {
  employeeId: number;
}

let employee: Employee = {
  name: "Alice",
  age: 30,
  employeeId: 1234,
  greet: function () {
    return `Hello, my name is ${this.name} and my ID is ${this.employeeId}.`;
  }
};
```

# 3. 実際のプロジェクトでの使い方
TypeScriptを実際のプロジェクトでどのように活用するかを解説します。これにより、TypeScriptの実用性を理解できます！

## プロジェクトのセットアップ
TypeScriptプロジェクトをセットアップするには、まずTypeScriptコンパイラ（tsc）をインストールします。
```bash
npm install -g typescript
```
次に、プロジェクトフォルダを作成し、`tsconfig.json`を生成します：
```bash
tsc --init
```

## TypeScriptの開発環境
おすすめの開発環境として、VS Codeを使用します。VS Codeは、TypeScriptサポートを充実させるエクステンションも豊富で、手軽に利用できます。

## コーディングとコンパイル
TypeScriptファイル（.ts）を書いた後、`tsc`コマンドでコンパイルします。例えば、`app.ts`をコンパイルする場合：
```bash
tsc app.ts
```
コンパイル後はJavaScriptファイル（.js）として出力されます。

# 4. TypeScriptでよくある課題とその解決方法
TypeScriptを使い始めると、いくつかの課題に直面することがあります。それらを事前に知っておくことで、スムーズにプロジェクトを進められるでしょう！

## 型の不完全定義
外部ライブラリの型定義ファイルが不完全な場合、手動で型を追加する必要があります。この場合、型定義ファイル（.d.tsファイル）を作成するか、補完します。

## インターフェースの互換性
TypeScriptの型システムは時折、互換性の問題を引き起こすことがあります。この問題を解決するために、インターフェースや型エイリアスを利用することで柔軟に対応します。

## コンパイラオプションの調整
`tsconfig.json`を使ってコンパイラオプションを調整し、プロジェクトに最適な設定を適用します。適切なオプション設定は、コードの安全性と開発効率を向上させます。

# 5. まとめ
TypeScriptは、JavaScriptの弱点を補完し、より強力で堅牢なコードを書くための素晴らしいツールです。本記事では、TypeScriptの基本的な概念から、実際のプロジェクトでの使い方、そしてよくある課題とその解決方法について解説しました！

## 参考リンク
- [公式サイト: TypeScript](https://www.typescriptlang.org/)
BGMを流しながら他の処理をしたい。

# 結論
マルチスレッドを使えば、処理を並列に実行できます。
音楽を流す方法は複数見つけたが、今回はpygameを使用しました。

```python sample.py

import pygame.mixer
from time import sleep
from concurrent.futures import ThreadPoolExecutor
import bgmSample

def bgm() :
    pygame.mixer.init() #初期化
    pms = pygame.mixer.Sound
    bgm = pms("音楽.wav") #音楽の読み込み
    bgm.play()
    bgm.set_volume(0.1)
    sound_time = bgm.get_length() #音楽の時間分スリープ
    sleep(sound_time )
    bgm.stop(sound_time)
    pygame.mixer.stop()

def shori(): #適当な処理
    for _ in range(15):
        print("a")
        sleep(1)


with ThreadPoolExecutor(max_workers=2, thread_name_prefix="thread") as executor:
    executor.submit(bgm)
    executor.submit(shori)

```

# 参考
https://qiita.com/eruru/items/b1ac9401755591796f69

https://qiita.com/sf_/items/b6f59128ff44c1eca0e9
Transformersでの4bit / 8bit / float16 loadメモ

毎回忘れるのでメモ。。。

## Install
* torch
* transformers
* accelerate (4bit, 8bit, device_mapを使う場合)
* bitsandbytes (4bit, 8bitを使う場合)

## load
```python
import torch
from transformers import AutoModelForCausalLM, AutoTokenizer

model_name = "elyza/ELYZA-japanese-CodeLlama-7b-instruct"
tokenizer = AutoTokenizer.from_pretrained(model_name)

# float32
model = AutoModelForCausalLM.from_pretrained(model_name, device_map="auto")

# float16
model = AutoModelForCausalLM.from_pretrained(model_name, torch_dtype=torch.float16,, device_map="auto")

# 8bit
model = AutoModelForCausalLM.from_pretrained(model_name, load_in_8bit=True, device_map="auto")

# 4bit
model = AutoModelForCausalLM.from_pretrained(model_name, load_in_4bit=True, device_map="auto")
```

とはいえ…

The `load_in_4bit` and `load_in_8bit` arguments are deprecated and will be removed in the future versions. Please, pass a `BitsAndBytesConfig` object in `quantization_config` argument instead.

ということらしいのでそのうちダメになることでしょう。。。

以上。
Web技術全体把握ガイド - シリーズまとめ

# Web技術全体把握ガイド - シリーズまとめ

## はじめに
この記事では、Web技術全体を把握するためのガイドとして、各分野ごとにまとめた記事を紹介します。Web開発の基礎からフロントエンド、バックエンド、データベース、サーバー・インフラ、そしてマネジメント・ソフトウェア開発に至るまで、幅広い範囲をカバーしています。

## 目的
このシリーズの目的は、Web開発に関連する主要な技術と概念を理解し、実践的なスキルを養うことです。全体像を把握することで、初学者がプロジェクトに参画した際に多くの新しいキーワードや技術に出会うことが少なくなります。また、各分野でどのような技術やキーワードが存在するのかを知ることで、深く学習したいときにどの技術を学ぶべきかのリストとしても役立てていただけます。


## 目次
- [Web開発基礎](#web開発基礎)
- [フロントエンド](#フロントエンド)
- [バックエンド](#バックエンド)
- [データベース・SQL](#データベース・sql)
- [サーバー・インフラ](#サーバー・インフラ)
- [マネジメント・ソフトウェア開発](#マネジメント・ソフトウェア開発)

## Web開発基礎
https://qiita.com/furu_39/items/221ecaf8f51088fe890b

## フロントエンド
https://qiita.com/furu_39/items/c96b16a2559fb884bdc6

## バックエンド
https://qiita.com/furu_39/items/b6fece21a982235f9658

## データベース・SQL
https://qiita.com/furu_39/items/5370835e931eb4b7dbdb

## サーバー・インフラ
https://qiita.com/furu_39/items/29c1bc2f009c81827231

## マネジメント・ソフトウェア開発
https://qiita.com/furu_39/items/632a6a00687d2a14d1f6

## まとめ
このシリーズは、Web開発に必要な全体像を理解するための包括的なガイドです。
各記事でキーワードや技術を提供し、実際のプロジェクトで役立つ知識を身につけることができます。
Web技術全体把握ガイド - マネジメント・ソフトウェア開発

# Web技術全体把握ガイド - マネジメント・ソフトウェア開発

## はじめに
この記事では、マネジメント・ソフトウェア開発に関する重要なキーワードと技術を分野別に整理しています。このガイドは、マネジメント・ソフトウェア開発の基本的な概念から最新の技術動向までを網羅し、Web開発者としてのスキルセットを強化するための参考資料となります。

## 目的
この記事の目的は、これからWeb業界に入る方や初学者が、Web開発に関連する基本的な技術やキーワードを体系的に把握できるようにすることです。初めて現場に参画する際に必要となる基礎知識を身に付ける手助けをするとともに、自身の理解が浅い分野を深めるための参考として活用できる内容を提供します。

このガイドを通じて、初めて聞く用語や概念に対しての理解を深め、実践的なWeb開発スキルを向上させる一助となれば幸いです。


## 目次
- [プロジェクト管理](#プロジェクト管理)
- [開発手法](#開発手法)
- [契約](#契約)
- [コラボレーションツール](#コラボレーションツール)
- [バージョン管理](#バージョン管理)
- [チームマネジメント](#チームマネジメント)
- [DevOps](#devops)
- [ソフトウェア開発ライフサイクル (SDLC)](#ソフトウェア開発ライフサイクル-sdlc)


## プロジェクト管理
- **WBS (Work Breakdown Structure)**: プロジェクトを小さな作業単位に分解する手法。
- **スコープ**: プロジェクトで達成すべき範囲や内容。
- **リスク管理**: プロジェクトの潜在的なリスクを特定し、対応策を計画するプロセス。
- **ステークホルダーマネジメント**: ステークホルダーの期待を管理し、効果的にコミュニケーションを取るための手法。
- **クリティカルパス法**: プロジェクトの重要なタスクとそのスケジュールを特定する手法。
- **コスト**: プロジェクトにかかる費用。
- **予算**: プロジェクトのために割り当てられた資金。
- **フェーズ**: プロジェクトの各段階。
- **遅延**: プロジェクトの予定よりも進行が遅れること。
- **見積もり**: プロジェクトの工数や費用を予測すること。
- **検収**: プロジェクト成果物を確認し、受け入れること。
- **納品**: 完成した成果物をクライアントに引き渡すこと。
- **成果物**: プロジェクトの結果として得られる製品やサービス。


## 開発手法
- **アジャイル**: ソフトウェア開発手法の一つで、反復的でインクリメンタルな開発を重視。
- **スクラム**: アジャイル手法のフレームワーク。
- **カンバン**: 継続的な改善を重視するプロジェクト管理手法。
- **ウォーターフォール**: 順次進行型のソフトウェア開発手法。
- **ペアプログラミング (ペアプロ)**: 二人一組で行うプログラミング手法。


## 契約
- **請負契約**: 結果物の完成を約束する契約。
- **準委任契約**: 業務の遂行を約束する契約。


## プロジェクト管理とコミュニケーションツール
- **Jira**: プロジェクト管理ツール。
- **Trello**: かんばん方式のプロジェクト管理ツール。
- **Asana**: プロジェクト管理およびチームコラボレーションツール。
- **Basecamp**: プロジェクト管理とチームコラボレーションツール。
- **Slack**: チームコミュニケーションツール。
- **Microsoft Teams**: チームコラボレーションとコミュニケーションツール。
- **Confluence**: ドキュメント管理およびコラボレーションツール。


## バージョン管理
- **Git**: 分散型バージョン管理システム。
- **GitHub**: Gitリポジトリのホスティングサービス。
- **GitLab**: もう一つのGitリポジトリのホスティングサービス。
- **Bitbucket**: もう一つのGitリポジトリのホスティングサービス。


## チームマネジメント
- **アサイン**: プロジェクトのタスクをチームメンバーに割り当てること。
- **チームビルディング**: チームの結束を強め、協力関係を築くための活動。
- **フィードバック**: 建設的なフィードバックを提供するスキル。
- **コンフリクトマネジメント**: チーム内の対立を解決するスキル。
- **ステークホルダー**: プロジェクトに関与するすべての関係者。
- **ボトムアップ**: 下位層からの提案や意見を反映させるアプローチ。
- **トップダウン**: 上位層からの指示や方針を反映させるアプローチ。
- **PM (プロジェクトマネージャー)**: プロジェクトの全体管理を担当する役職。
- **PMO (プロジェクトマネジメントオフィス)**: プロジェクト管理の標準化とサポートを行う部門。
- **PL (プロジェクトリーダー)**: プロジェクトチームをリードする役職。
- **BP (ビジネスパートナー)**: ビジネス上の連携を行うパートナー。


## DevOps
- **DevOps**: 開発担当と運用担当が連携・協力し、フレキシブルかつスピーディーに開発するソフトウェアの開発手法。
- **CI/CD**: 継続的インテグレーション/継続的デリバリーのプラクティス。
- **インフラストラクチャー・アズ・コード (IaC)**: インフラ管理の自動化。
- **サイト信頼性エンジニアリング (SRE)**: 信頼性の高いシステムの構築と運用。


## ソフトウェア開発ライフサイクル (SDLC)
- **要件定義**: ソフトウェアの要件を定義するフェーズ。
- **基本設計**: ソフトウェアの基本的な設計を行うフェーズ。
- **詳細設計**: ソフトウェアの詳細な設計を行うフェーズ。
- **実装**: ソフトウェアのコーディングを行うフェーズ。
- **テスト**: ソフトウェアのテストを行うフェーズ。
- **デプロイ**: ソフトウェアを本番環境にデプロイするフェーズ。
- **保守**: ソフトウェアの保守を行うフェーズ。
- **キックオフ**: プロジェクトの開始を宣言するミーティング。
- **E2Eテスト (End-to-Endテスト)**: システム全体の動作を確認するテスト。
- **フィジビリティチェック**: プロジェクトの実現可能性を評価するプロセス。
- **リーガルチェック**: 法律や規制に適合しているかを確認するプロセス。


 ## まとめ
この記事では、Web開発の基礎に関する主要なキーワードと技術を紹介しました。初心者から経験者まで役立つ情報を網羅しています。Web開発の全体像を把握する手助けとなれば幸いです。

他の分野については、シリーズ記事として以下のカテゴリで詳しく解説していますので、ぜひご覧ください。

https://qiita.com/furu_39/items/5534f8f88f6097befdbe
Dockerでのパーミッション問題

# はじめに
多くの人がDockerを利用していて、パーミッションがらみの問題を経験したことがあるはずです。
Dockerはパーミッション周りが少しめんどくさくて厄介ですよね。

今回の記事では、Dockerにおけるパーミッションの扱いと対応策についてまとめていきます。


# Dockerでのパーミッション問題
Dockerではホスト側のディレクトリをコンテナ内にマウントする際はパーミッションを一切変更しません。

したがって、Dockerコンテナ内で開発する際には、パーミッションの問題が頻繁に発生します。

例えば、次のDockerfileでは、ユーザー(uid=2000, gid=2000)を作成し、Ubuntu環境を構築しています：

```Dockerfile
FROM ubuntu:20.04

RUN groupadd -g 2000 test \
    && useradd -m -u 2000 -g 2000 test
USER test
```

この設定でビルドしたイメージを使用し、ホスト側のディレクトリにファイルを書き込もうとすると、パーミッションエラーが発生してしまいます。

```bash
docker build -t ubuntu:test1 .
docker run --rm -v $(pwd):/tmp/v ubuntu:test1 \
  bash -c "echo echo_test1_contents > /tmp/v/echo_test1"
```

これは、Dockerコンテナ内のユーザー(uid=2000, gid=2000)が、ホスト側のディレクトリに対して書き込み権限を持っていないためです。

# どうすればいいの
この問題を解決するために、よしなにDockerfileを修正します。

ARG命令を使用してホスト側のuid, gidを受け取り、それに基づいてコンテナ内のユーザーを設定します。

```dockerfile
FROM ubuntu:20.04

ARG UID=2000
ARG GID=2000
RUN groupadd -g $GID test \
    && useradd -m -u $UID -g $GID test
USER test
```

ビルド時に次のように指定することで、ホストとコンテナのuid, gidを一致させています

```bash
コードをコピーする
docker build -t ubuntu:test2 \
  --build-arg UID=$(id -u) --build-arg GID=$(id -g) .
```

これにより、ホスト側でのファイル操作とコンテナ内での操作が一貫して行えるようになります。

# さいごに
そもそも権限が付与できないケースも稀にあり、そもそも書き込みを行う処理は本当に必要かどうかを考えてみるのも選択肢の一つかもしれません。

必要がないのであれば可能な限り書き込み処理を排除したほうがいいですしね。

変更しても反映されないときには`--build`オプションを試してみるとしあわせになれるかもしれません。

それでは。
Salesforce 認定 Data Cloud コンサルタント合格体験記

# はじめに
:::note warn
警告
本記事は 【**2024年7月**】 に受験した際の内容をもとに記載しています。皆さまが受験される際には最新の情報をチェックいただくようお願いします
特にData Cloudは比較的新しいサービスです。お気を付けください！
:::

https://trailhead.salesforce.com/ja/help?article=Salesforce-Certified-Data-Cloud-Consultant-Exam-Guide

# 動機
- Data Cloudを自社で導入検討しているため（導入案件を自分が進めたい・やりたい、というアピールのため）

# 前提知識
- 普段からSalesforceを業務で利用、約5年ほどの経験あり
- Salesforce資格は認定アドミニストレータのみ取得済み
- 自社でData Cloudの導入検討のためPoCを実施。データ取り込み～有効化まで一度実装経験あり

# 結果
勉強時間は15時間程度
無事一度目のチャレンジで合格でした
合格ボーダー62%のところ正答率90%くらい

# 所感
難易度は比較的簡単な部類に入るような気がします
認定アドミニストレータに比べて大分範囲が狭い一方、そこまで詳しいことを問われないな（全体的なコンセプトが分かっていれば十分こたえられるレベル）という印象です

ただし、実装経験の有無で難易度の印象が変わると思います。
前述のとおり、私は一通りの基本的な実装は試したことがあるためイメージつきやすく、問題もとっつきやすかったです。
一方、経験ゼロの方はのちに紹介するPlaygroundで実装試せますのでそちらをオススメいたします。

# やったこと①：公式Trailmix（おすすめ度★★★★★）
Trailmix「Unlock Your Data with Data Cloud」
これを一通りやると範囲が十分カバーできます
動画教材は英語で日本語字幕もないためちょっと都合悪いですが

また、一部のモジュールでData Cloud Developer EditionというData CloudがプロビジョニングされたPlayground環境を取得できます。**試験準備期間中はモジュールに関わらず、色々と実装を試してみることを強くオススメいたします！**

https://trailhead.salesforce.com/ja/users/strailhead/trailmixes/unlock-your-data-with-data-cloud

# やったこと②：過去問（おすすめ度★★★★★）
Note「Salesforce認定Data Cloudコンサルタント100題 問題集全問解答＋全問解説付き(2024年)」
試験範囲がある程度インプット出来たらあとは過去問です。普段はUdemyを使うのですが、Data Cloudコンサルタントは日本語対応の教材がなかったため、Noteで販売されているこちらを利用しました。
Udemyに比べて正誤の記録ができないので間違えた問題をメモする必要がある点、正答率が出せないの点が難点ですが、内容は申し分ないと思います。

https://note.com/salesforce_pq/n/nf6168d10fb78

# やったこと③：過去問(おすすめ度★)
②の過去問で十分と思いますが暇だったのでいくつかネットに落ちている過去問たちも探しました。
暇ならご参考までに。

https://www.jpnshiken.com/certification/Salesforce.html

https://www.passtest.jp/Salesforce-Data-Cloud-mondaishuu.html
imshowで灰色のウィンドウが表示されカーソルがぐるぐるになる[python,opencv2]

このようになってしまった時の対処法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985818/a42bb625-2cd4-551c-69b7-155df0904f75.png)

とにかくcv2.waitKey(10)を書きましょう。書く場所はimshowの後ろあたりですかね、詳しくは知りません。waitkey(0)でもいいですがなんか10の方が安定した気がするので一応10しとけばいいと思います。
正直自分も理屈は分かってないですが、これがないと終了できないどころか、まずまともに表示させることも叶わんようなので、そういう仕様なんでしょう。
Storybookのファイル内play関数をJestでまとめて実行する

## 大量のplay関数を一つ一つ実行するのが手間

Storybookのplay関数をJest側で実行する際にplay関数を一つ一つ選択して実行するのが手間だったため、ファイル内のplay関数まとめて実行するための共通処理を作ってみました。

Storybookのplay関数とJestを組み合わせたテスト手法に関しては以下の記事等で分かりやすくまとめられているため、こちらを参照してください。

https://zenn.dev/azukiazusa/articles/df307292037265

https://qiita.com/k_kuroiwa/items/cdf9fdafb044a68eebb1


今回の記事では上記の記事からさらに進んで、play関数をJest側からまとめて実行する手法を紹介します。

## 前提環境
- react@17.0.2
- @storybook/react@8.1.2
- @storybook/types@8.1.2
- @testing-library/react@12.1.2
- jest@29.7.0

## 実際のコード

### 共通で使う関数
```tsx:~/__test__/utils.tsx
import * as React from 'react'

import { composeStories, ReactRenderer } from '@storybook/react'
import { render } from '@testing-library/react'
import { ComposedStoryFn, Store_CSFExports } from '@storybook/types';

export const playStory = async (Story: ComposedStoryFn<ReactRenderer>) => {
  // wrapperは無しでもOK
  const { jestWrapper } = require('~/storybookPreview')
  const { container } = render(<Story />, { wrapper: jestWrapper })
  Story.play && await Story.play({ canvasElement: container })
}

export const playStories = (stories: Store_CSFExports<ReactRenderer>) => {
  const newStories: ComposedStoryFn<ReactRenderer>[] = Object.values(composeStories(stories))
  newStories.forEach((Story) => {
    // storyのnameをitに指定する
    it(Story.storyName, async () => {
      await playStory(Story)
    })
  })
}

```

## 使い方
specファイル内で以下のようにdescribeで囲って実行します。

```tsx:Sample.spec.tsx
import { playStories } from '~/__test__/utils'
// 適当なstoryをimport
import * as sampleStories from '~/Sample.stories'

describe('SampleComponentTest', () => {
  playStories(sampleStories)
})

```
type-challenges 中級編7: Flatten, Append to Object, Absolute

# type-challenges 中級編7: Flatten, Append to Object, Absolute

## はじめに

[GitHubのtype-challengesリポジトリ](https://github.com/type-challenges)は、TypeScript型システムの理解を深めるための型クイズ問題集です。高品質な型を作成することで、バグを減らし、プロジェクトの保守性を向上させることができます。今回も中級編から3つの問題に挑戦します。

### 1. Flatten

この課題では、受け取った配列をフラット化した型を出力する型を書く必要があります。

#### 例

```typescript
type flatten = Flatten<[1, 2, [3, 4], [[[5]]]> // expected to be [1, 2, 3, 4, 5]
```

#### 私の回答

```typescript
type Flatten<A extends unknown[], T extends unknown[] = []> = 
  A extends [infer First, ...infer Rest] ? 
    First extends unknown[] ?
      Flatten<[...First, ...Rest], T> :
      Flatten<Rest, [...T, First]> 
  : T
```

#### 解き方

- `A extends [infer First, ...infer Rest]` で、配列 `A` の最初の要素 `First` と残りの要素 `Rest` に分割します。
- `First` が配列であれば、その配列を展開して再帰的に処理します。
- `First` が配列でなければ、それを結果の配列 `T` に追加し、`Rest` を再帰的に処理します。
- すべての要素を処理し終えたら、結果の配列 `T` を返します。

:::note info
時間かかった。やってることは基本的だけど再帰的な型は難しい、、
:::

### 2. Append to Object

インターフェースに新しいフィールドを追加する型を実装します。この例でいうとこの型は、3 つの引数を受け取り、新しいフィールドを持つオブジェクトを出力しなければなりません。

#### 例

```typescript
type Test = { id: '1' };
type Result = AppendToObject<Test, 'value', 4>; // expected to be { id: '1', value: 4 }
```

#### 私の回答

```typescript
type AppendToObject<T, U extends string, V> = {
  [K in keyof T | U]: K extends keyof T ? T[K] : V
}
```

#### 解き方

- `keyof T | U` で、新しいフィールド `U` を既存のキーに追加した新しいキーのユニオン型を作成します。
- 新しいキー `K` が既存のキー `keyof T` に含まれている場合は、元の型 `T[K]` を使用し、含まれていない場合は新しい型 `V` を使用します。

:::note info
`[K in keyof T | U]`でオブジェクトのキーを追加できます！覚えときましょう！
:::

### 3. Absolute

string, number または bigint を受け取り、正の数を出力する Absolute 型を実装します。

#### 例

```typescript
type Test = -100;
type Result = Absolute<Test>; // expected to be "100"
```

#### 私の回答

```typescript
type Absolute<T extends number | string | bigint> = 
  `${T}` extends `-${infer A}` ? A : `${T}`
```

#### 解き方

- `${T}` で、型 `T` を文字列リテラル型に変換します。
- `\`-${infer A}\`` で、負の記号 `-` を持つ場合、その記号を除去して残りの部分 `A` を抽出します。
- 負の記号を持たない場合は、そのままの文字列リテラル型を返します。

:::note info
数値→文字列のパターンはこれですね！
:::

### まとめ

このように、TypeScriptの型システムを理解し、実際に型を実装することで、より安全で保守性の高いコードを書くことができます。ぜひこれらの課題を解いて、型力UPしてみてください。

### 参考記事

- [TypeScript公式ドキュメント](https://www.typescriptlang.org/docs/)
- [type-challenges GitHubリポジトリ](https://github.com/type-challenges/type-challenges)

---

これらの課題を通じて、TypeScriptの型システムの強力さと柔軟性を再認識できるでしょう。特に複雑な型の操作や再帰的な型の利用方法を学ぶことで、より高度な型定義が可能になります。実際のプロジェクトで活用してみてください。
ヒプスターのインターンで不動産営業からWebエンジニアになれました！

こんにちは！
WebエンジニアをしているY.Iと申します。

未経験からエンジニアを目指した理由や、現在私が勤めている株式会社ヒプスターで未経験インターンからエンジニアになった経緯について書いていきたいと思います。

## 自己紹介
私は前職で不動産営業をしていまして、今回未経験でエンジニアに転職しました。
なぜ転職しようと思ったかというと、営業として働いていてあまり楽しく感じなかったからです。
条件・環境等は悪くなかったのですが、今後何十年と続けたいかというとそうではありませんでした。
30歳手前ということもあり転職するなら今しかないと思い、エンジニアの友人に相談したところ、プログラミングに興味がわき目指してみようとなりました。
前職を退職してから半年間プログラミングスクールでバックエンド・フロントエンド周りの基礎を学び、卒業後に興味のあったモダンJSフレームワークを学んだ後、自作の簡易的なアプリを作成して転職活動に臨みました。

趣味として以前はバイクに乗ってツーリングをよくしていましたが、最近は技術のキャッチアップ等が楽しいのでそれも趣味の一環になっています。
お酒も大好きなので、最近はエンジニアの飲み仲間が欲しいなぁとか思っていたり、、笑

現在は縁あって当社で働いているので、どうぞ宜しくお願いします＾＾

## ヒプスターのインターンに応募した経緯
私は転職活動の軸に、積極的に開発経験を積みたいというものがありました。
そこでたまたま当社の応募を見つけ、内容を見てみるとtypeScriptやモダンJSライブラリを使用しての開発が積めるとあり、折角ならモダンな言語で開発をしたいと考えていた私には願ったり叶ったりという事で志望しました。

## インターン
当社ではインターン制度で未経験者にも門を開けており、インターン生として参加することにしました。
インターン中は課題が与えられるのですが、私の場合はNext.jsによるREST APIの実装というものでした。
未経験での転職に際して、選考の為にポートフォリオとして簡易的なアプリを自作していましたが、やはり実務に近い課題を目の前にしたときは大きな壁を感じたのを覚えています。
DBのテーブルの数からファイルの多さ、コードの質と面喰らいましたが、それも1日1日こなしていくうちに慣れ、徐々に実装できるようになっていきました。

## 入社してみて
インターンで課題をこなしていき、2ヶ月程で社員登用のお話をいただきました。
社内の雰囲気は、基本的に全員実装に集中しているので静寂の中にタイピング音が響いているといった感じですが、実務に関する話をしたり談笑したりしている時もあります。
不要な雑務や会議等もなく、開発に集中できるいい環境だと感じています。
また、領域としてはフロント・バックエンド問わずタスクがあるのでアプリケーションを全体的に触れるという点も嬉しいです。
当社は積極的に取り組んでいけばどんどん仕事を振ってもらえる環境なので、フロント・バックエンド問わず開発経験を積みたい方やモダンなライブラリで開発したい方にはお勧めです。

[インターンの詳細はこちらをご覧ください！](https://hipster-enterprise.com/beginner/internship "ヒプスターインターン")
一緒にWebエンジニアになりましょう！
Vueで始めるi18n対応

# はじめに
Vueを用いてサイトを作っていると、多言語対応が必要となるシーンや多言語対応をやりたくなってしまうことがよくあります。

そんなときに使える手法を備忘録として残しておきます。

# 実装方法
vue.jsアプリケーションを多言語対応する上で最もよく使われているであろうvue-i18nというパッケージを用いて進めていきます。

## vue-i18nの導入
[公式のガイド](https://kazupon.github.io/vue-i18n/installation.html#compatibility-note)に従ってパッケージを追加します。

```bash
npm install vue-i18n
```


## 言語別のjsonを用意する
切り替えたい言語に応じた言語別のjsonファイルを用意します。

まず`./src`配下にi18nディレクトリを作成して、

```bash
mkdir ./src/i18n
```

言語別にjsonファイルを作成します。

```json:./src/i18n/ja.json
{
  "message": {
    "hello": "こんにちは"
  }
}
```

```json:./src/i18n/en.json
{
  "message": {
    "hello": "Hello"
  }
}
```

中身はこんな感じで大丈夫。


## i18n.tsの追加

```typescript:./src/i18n.ts
import { createI18n } from "vue-i18n";

import i18n-ja from "./i18n/ja";
import i18n-en from "./i18n/en";

const userLocale = navigator.language || navigator.userLanguage;

const i18n = createI18n({
  legacy: false,
  // デフォルトの言語を日本語に固定する
  locale: userLocale.includes('ja') ? 'ja' : 'en',
  // 言語の定義
  messages: {
    ja: i18n-ja,
    en: i18n-en,
  },
});

export default i18n;
```

通常であれば、UAをみて言語をよしなに表示してあげますが、この例では日本語と英語しかデータを定義していないため、日本語でなければ問答無用で英語を表示する仕様になっています。
必要に応じて追加してください。

## main.tsを書き換え

```typescript:./src/main.ts
import { createApp } from "vue";

import App from "./App.vue";
import i18n from "./i18n";

createApp(App).use(i18n).mount("#app");
```
`i18n.ts`を読み込み、Vueに渡してあげます。


## コンポーネント内での使用方法
```vue:./src/components/HelloWorld.vue
<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('ja')">日本語</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
};
</script>
```
この例では、`$t`メソッドを利用し、テキストを描画し、ボタンの押下に応じて言語を切り替える簡単なものになっています。

実際に何かしらのページに組み込む際には、言語切替のトリガーをヘッダーに仕込んであげるといい感じになります。

また、複数ページにわたって言語切り替えを行いたい場合や、ユーザーの選択した言語を保存して再訪問時に反映させたい場合は、VuexやLocalStorageを活用すると良いでしょう。


# さいごに
vue-i18nを用いると比較的簡単に多言語対応を実装できるので是非試してみてください。

この記事が誰かの参考になれば幸いです。
rasberry pi 4 Model B 初期設定 


## 目次
1. [準備したもの](##準備したもの)
1. [OSの準備](##OSの準備)
1. [初期設定](##初期設定)
1. [日本語化](##日本語化)

## 準備したもの
- 準備したもの
  - Rasberry Pi 4 本体
  ![240630214128764.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/df1d53fd-0d78-53f9-cb61-4a6394eda9e8.jpeg)

  
  - micro HDMIケーブル
  こちらは普通のHDMIをmicro HDMIに変換するものになります
  ![240630214539612.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/8e234650-5acf-623b-ffcf-ecb62c6ee440.jpeg)


  - MicroSDカード
  ![240630215448729.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/fe87c58c-be25-a3d5-6f7d-6bfa27b2b64f.jpeg)
  8GB以上のものが必要になるようです。

  - SDカードリーダー
  - 電源ケーブル(typeC)
  - マウス、キーボード
  

## OSの準備
1. ラズパイの公式HPからインストーラをダウンロード
https://www.raspberrypi.com/software/
![スクリーンショット 2024-06-30 220531.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/ba06fc2e-ed68-58c8-141c-0cb123da4a5c.png)


1. 手順に従ってSDカードにインストール
![rasberryPI4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/e9cff2f8-4336-a7e1-cfa4-156fd205d389.png)
![rasberryPI4Loading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/7eb28b40-8ac1-a75c-1ccf-5a9ded5089bf.png)
![rasberryPI4set.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/7293f30c-4658-1700-2fb5-f4aef6b60ac0.png)
![rasberryPI4setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/07214d6a-5b1b-64b3-927d-97914885bc4d.png)
※ 警告等は特に出ませんがユーザー名の一文字目は半角英字小文字にしないとエラーになりました。(ユーザー名に大文字、先頭に数字は使えないようです。)
![rasberryPI4setWarning.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/f128154b-e18c-d7bc-5106-519ea4d5767c.png)


## 初期設定
1. OSをインストールしたSDカードを入れて電源を入れる
電源ケーブルを挿すと電源が入ります
![スタート画面.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/221ec7d1-1886-0758-ed13-0bce77822d5d.jpeg)

1. 画面に従って初期設定
[OSの準備](##OSの準備)で入力されていれば、そのままデスクトップ画面
([OSの準備](##OSの準備)で入力した情報が優先されるようで、ユーザー名の一文字目を数字にすると初期設定画面でループしました。)


## 日本語化
1. キーボードを日本語配列に変更
`画面左上のラズパイマーク`→`Raspberry Pi Configuration`→`Localisation`
![キーボード日本語.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/ddfd8316-9d63-95df-5d17-c481fc498c92.png)
1. 地域設定を日本に変更
![地域設定日本.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/1aa786d4-2301-40b1-2de5-35b0d0967eb3.png)

1. 日本語入力を出来るようにFcitx-Mozcをインストール
```
sudo apt install fcitx-mozc
```
![mozc_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3483796/93f60119-d758-2b4b-5a9c-cdac1df31d10.png)
一旦、再起動(Reboot)したら完了です

Ctrl+Spaceで入力切り替え。
【Vite x React】学習記録アプリ作成からデプロイ・テストまでを実施

# はじめに
ViteとReactを使用して、簡単アプリを作成しました。

# 作成したアプリ

### 概要

学習した時間や学習した内容を簡単に記録できるアプリ

### 使用言語

React, Javascript

### DB

Supabase

### テスト

Jest

React Testing Library

### その他

FireBase

Github

## 実装機能
学習内容と学習時間を入力できます

![スクリーンショット 2024-07-15 11.24.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/5d0ebcf3-ee03-c5cf-4985-b7e46bddf8b5.png)

入力した内容を同時反映して確認ができます

![スクリーンショット 2024-07-15 11.25.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/55990be0-0323-fa05-caba-71e193b4fff0.png)

### 登録
登録ボタンを押すと画面上に記録が追加されます（DBのSupabaseの方にも同時追加されます）
![スクリーンショット 2024-07-15 11.26.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/c4ab8e3a-a851-95ed-05aa-ba804f92eae1.png)

この部分の実装はまずDBのSupabaseに入力された内容を追加します。
その後、追加されたSupabaseの内容をgetAllメソッドで取得してきて、画面に反映をさせることで実現しています。
以下実装の抜粋です。
```Javascript
    try {
      await addContent(content, time);
      const suparecords = await getAll();

      setSRecords(suparecords);

      setContent("");
      setTime("");
    } catch (error) {
      console.error("Error registering content:", error);
      setError(true);
    }
  };
```

また記録が追加されると自動的に合計時間の部分に加算された結果が反映される仕組みになっています。
この部分はuseEffectを用いて、記録が更新されるたびにuseEffect内の関数が実行されるようにしています。
計算部分はreduceメソッドを利用して、初期値をゼロに設定し、記録の時間部分を抜き出して使用しています。
以下が実装の抜粋です。
```Javascript
  useEffect(() => {
    const total = srecords.reduce(
      (sum, record) => parseInt(sum + record.time),
      0
    );
    setTotalTime(total);
  }, [srecords]);

```
<br />

### 削除機能

削除ボタンを押すと記録からなくなります（DBのSupabaseの方も同時に削除されます）
![スクリーンショット 2024-07-15 11.26.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/2e925e8b-a5e7-4655-413a-b503087d0093.png)

この部分の実装はまずDBのSupabaseに記録された内容に割り振られた固有のIDを使って削除処理を行います。
その後、最新のSupabaseの内容をgetAllメソッドで取得してきて、画面に反映をさせることで実現しています。
以下実装の抜粋です。
```Javascript
  const handleDelete = async (id) => {
    await deleteContent(id);
    const suparecords = await getAll();
    setSRecords(suparecords);
  };
```


# 今回学んだこと

今まで簡単なアプリの作成までを経験をしたことはありましたが、その時は作って終わりという感じでした。

今回は作成したアプリを作成するだけではなく、リリースをしてCDCIまでを整えました。

正直CDやCIのプロセスは初めてで躓くことが多かったですが、ここを準備しておくことで今後個人開発やチーム開発をしていく際に生産性を向上させたりプロダクト品質の向上に繋げることができるのだと実感できました。

# おわりに

次はTypescriptを学んでさらにアプリの作成を続けます。

# JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

https://projisou.jp/
Githubリポジトリ作成〜コミットまでのまとめ

# はじめに
時間が空くと忘れてしまいがちなので、Githubのリポジトリ作成からコミットまでの流れを簡単にまとめます。


# リポジトリ作成

① Githubのページへ行き、リポジトリを選択
![スクリーンショット 2024-07-15 10.56.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/ee45bec7-3e50-3afb-9f93-1656ae38b385.png)

<br />

② リポジトリページのNewをクリックして新規リポジトリを作成
![スクリーンショット 2024-07-15 10.34.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/ce30719a-f3a5-f291-239e-11bed7c31a3a.png)

<br />

③　新規作成ページでリポジトリネームをつけてCreate repositoryボタンを押下します
![スクリーンショット 2024-07-15 10.36.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/be198b2b-385b-49a4-3072-737f26e5f9c9.png)

<br />

④ リポジトリが新規作成されて、URLが表示されますので、URLをコピーしておきます

# ローカル環境でGithubのクローンを作成

① クローンを作成したいローカルのフォルダにcdコマンドで移動

②以下のコマンドを実行

```
git clone コピーしたリポジトリURLを挿入
```

③cd repositoryコマンドを実行しリポジトリのディレクトリに移動します
```
cd repository
```

④ lsコマンドで中身が確認できたらクローン作業は完了
```
ls
```

# Gitコミット

①ローカルで作業が完了したら、以下のコマンドを順番に実施

```
git add . 
```
変更のある全てのファイルをステージングエリア(一時的に変更内容を保存する領域)にあげます。

②
```
git commit -m “変更内容などコメントを記載”
```
git commit でステージングエリアにある変更をコミットとしてリポジトリの履歴に追加されます。
-m をつけることで、コミット時のメッセージを追加することができます。

③
```
git push origin main
```
メインブランチにローカルで変更した内容を送信するために使用します
mainとなっている場合はメインブランチに送信可能で、別のブランチがある場合はmainの部分をブランチ名に変更することで該当のブランチに変更内容を送信できます

# おわりに

簡単ですが、プロジェクトを始める際にgithubリポジトリ作成からコミットまでの流れをまとめました。
繰り返すと当たり前の作業になると思うのですが、何度か時間が空いてしまい最初から調べ直す作業があったので記事にまとめておきました。

# JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

https://projisou.jp/
【初投稿】Widows11にWSLをインストールしてみた。

みなさまはじめまして。
大阪でバックエンドエンジニアをやっております、りょうと申します。
普段の業務においては、
PHP8.2・Python3.12・Google Cloud(Cloud Functions・Big Query etc.)・MySQL8系・Docker
などの技術を用いて開発をおこなっております。

これから、自己学習内容や業務で用いた技術の振り返りなどを記事としてあげていこうと考えております。
未熟者ですが、よろしくお願いいたします。

記念すべき一発目は、最近ノートPCを新調しましたので、WindowsマシーンにWSLをインストールして、Linuxが使えるようにしていこうと思います。
WSL（Windows Subsystem for Linux）とは、Windowsマシーン上でUbuntuなどのLinuxディストリビューションを実行することができる便利な機能です。

必要なものは下記のコマンドでインストール可能です
```
wsl --install
```

完了すると下記のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838304/ff931aae-6914-71f5-9bd5-da8b13229b46.png)


再起動し、追加されたターミナルタブのUbuntuを開くと、下記のエラーが...
```
Installing, this may take a few minutes...
WslRegisterDistribution failed with error: 0x80004002
Error: 0x80004002 ???????????????????????????????????????????????????
```

環境構築は嫌いだー！！

エラーをググったところ、@MinadukiSekina さん記事にたどり着きましたので、参照させていただきました！
https://qiita.com/MinadukiSekina/items/25f3440565ca7b6a359e

記事に助けていただき
・Linux用Windowsサブシステムの有効化
・仮想マシン機能の有効化
をおこなうと、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838304/d858cb44-dcbd-00ac-d0f5-9f7f78a7cb8b.png)


無事にセットアップが完了しました！！
環境構築は昔から苦手意識があり、先輩に頼ってしまう傾向があるので、
とても良い機会になりました！
Error: Invalid project selection, please verify project *** exists and you have access.

# はじめに

GithubActionsでfirebaseのプロジェクトをデプロイしようとするとエラーが出ました。

以前にこちらの記事で紹介していますが、この方法でもエラー解消せず同じエラーが出てしまいました。

https://qiita.com/acu8/items/ef7d59e15d834cc0b689


# 問題

エラーの内容はこちらです

```
Error: Invalid project selection, please verify project *** exists and you have access.
```
プロジェクトへのアクセスがあるか確認してくださいと言われています。
持っている全てのGoogleアカウントに権限を与えているので、プロジェクトのアクセスがあるはずです。


# 解決方法
Googleアカウントはプロジェクトの権限を持っていたのですが、肝心のFirebaseのプロジェクトとGoogleのサービスアカウントの連携ができていませんでした。

つまり間違ったプロジェクトでGoogleサービスアカウントを連携してしまい、そこでFIREBASE_KEYを設定してしまっていたので、今回のエラーが出てしまっていたということがわかりました。

今後間違えないように、FirebaseプロジェクトからGoogleサービスアカウントに直接いく方法を記載します。

1. まずFirebaseのプロジェクトの設定ボタンを押下
![スクリーンショット 2024-07-15 9.59.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/e27b839c-2f06-6770-531f-77f59f93ee05.png)



<br/>
2. 設定ページが開いたらメニューの中にある「サービスアカウント」を選択

![スクリーンショット 2024-07-15 10.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/1943334f-5e68-ce1a-27e5-165a87f92fba.png)

<br/>
3. サービスアカウントページの右上にある「サービスアカウント権限の管理」をクリックすると、プロジェクトのサービスアカウントに直接遷移ができます。

![スクリーンショット 2024-07-15 10.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/bb3f1149-56d0-3c2c-31be-6ef6aa97a01f.png)


# おわりに
今回はFirebaseを初めて使用したので、サービスアカウントとの紐付け方法が理解できておらず簡単なところで時間をかけてしまいました。同じように初めてFirebaseサービスを利用する方の参考になれば幸いです！
33業種×エンジニア：石油・石炭製品

## はじめに



## 石油・石炭製品×エンジニアの働き方の例
石油・石炭製品業界におけるITエンジニアは、採掘、精製、輸送、販売の各プロセスを支える重要な役割を果たすとされています。
![石油.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777936/1f9a5ecb-130c-9bd8-23c5-5bd69905f55d.jpeg)

### 1. システムエンジニア（SE）
役割: 石油・石炭製品企業のITインフラの設計、開発、導入、運用管理を行う
石油精製プロセス管理システムの設計と導入。
エネルギー管理システムの開発。
サプライチェーン管理システムの最適化と自動化。

### 2. プログラマー
役割: 石油・石炭の採掘や精製プロセスをサポートするソフトウェアのコーディング
採掘データの解析ソフトウェアの開発。
リアルタイムモニタリングシステムのプログラミング。
精製プラントの自動化システムの実装。

### 3. サーバーエンジニア
役割: 石油・石炭製品企業のサーバーの設計、設定、保守、管理を担当
大規模データの保存とバックアップシステムの構築。
採掘現場と本社間のデータ伝送システムの管理。
クラウドベースのシステム管理。

### 4. ネットワークエンジニア
役割: 石油・石炭製品企業のネットワークインフラの設計、設定、運用、保守を行う
採掘現場、精製プラント、販売拠点を結ぶネットワークの構築。
リモートモニタリングシステムのセキュリティ設定。
データ伝送のための高可用性ネットワークの構築。

### 5. データサイエンティスト
役割: 石油・石炭データの解析、予測モデルの作成、結果のビジュアル化を行う
採掘データの解析とパターン認識。
石油精製プロセスの最適化モデルの作成。
市場データの解析による需要予測。


## 世界大手企業の概要
### [ExxonMobil](https://corporate.exxonmobil.com/)
概要: アメリカに本拠を置く世界最大のエネルギー企業の一つ。石油、ガスの探査、採掘、精製、販売、化学製品の製造を行っている。

### [Royal Dutch Shell](https://www.shell.com/)
概要: オランダとイギリスに本拠を置く世界的なエネルギー企業。石油、ガスの探査、採掘、精製、販売、化学製品の製造に加え、再生可能エネルギーへの取り組みも行っている。

### [BP (British Petroleum)](https://www.bp.com/)
概要: イギリスに本拠を置く世界的なエネルギー企業。石油、ガスの探査、採掘、精製、販売、化学製品の製造を行っており、クリーンエネルギー技術の開発にも注力している。


## 日本企業の概要
### [ENEOSホールディングス](https://www.hd.eneos.co.jp/)
概要: 日本最大の石油会社であり、石油、ガスの探査、採掘、精製、販売を行っている。再生可能エネルギー分野にも積極的に取り組んでいる。

### [出光興産](https://www.idemitsu.com/jp/index.html)
概要: 日本を代表する石油会社の一つ。石油、ガスの探査、採掘、精製、販売を行っており、化学製品や電気自動車向けエネルギーソリューションも提供している。

### [コスモエネルギーホールディングス](https://www.cosmo-energy.co.jp/ja/lp/kikasete/index.html?utm_source=top_mainvisual&utm_medium=corporate_site&utm_id=2403_kikasete)
概要: 日本の大手石油会社。石油、ガスの探査、採掘、精製、販売を行い、再生可能エネルギー分野にも積極的に投資している。


## さいごに
「石油 ITエンジニア」「石油 プログラマー」などで求人の検索をかけると「石油関連の受発注業務の開発作業」「IT・システムエンジニア・開発・運用系」「石油業界の流通を支えるパッケージソフトウェアを手掛けるシステムエンジニア」などがありました。
中にはTOEIC600点以上とかあり…プログラミングは英語も関係してるし、やらねばならぬかあｓ
プライベートサブネットにEC2を置いたWebアプリケーションを作成する ーイントロー

初めての投稿なので、お手柔らかにお願いします。

執筆現在では新卒1年目で、研修においてWebアプリケーション開発を課されたので、その際に作成したインフラ構成図を紹介していこうと思います。

まず、本稿で紹介するAWSの最終的な構成図は以下のようになっています。

![チームJ開発ーAWS最終構成図.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821799/9bf1902a-ce65-4389-f3e0-f1d1d35bcf01.png)


ポイントとしては題名にある通り、プライベートサブネットにアプリケーションサーバーを配置することでEC2への直接のアクセスをブロックし、セキュアなアプリケーションを構築します。

アプリケーションサーバーへのインターネットからのアクセスをブロックする大きな理由は、EC2が持っているインスタンスプロファイルを使って、不正な操作をされる恐れがあるからです。不正なリソース作成によって予想外なコストが発生したり、本番で動いているリソースの勝手な削除を予防します。

作成手順は次のような流れで説明していきます。

## 1. 開発環境を整える
[プライベートサブネットにEC2を置いたWebアプリケーションを作成する①](https://qiita.com/RHIC-0819/items/25bff36c3aacf92af28e)
## 2. アプリケーションを立ち上げる
[プライベートサブネットにEC2を置いたWebアプリケーションを作成する②](https://qiita.com/RHIC-0819/items/f3755e02e16694792c4e)
## 3. セキュリティを高める
[プライベートサブネットにEC2を置いたWebアプリケーションを作成する③](https://qiita.com/RHIC-0819/items/ab4883b6fa958b3d908b)

:::note warn
ここでは無料枠を超えた料金が発生する可能性があります。
作成したリソースはすぐに削除すれば多くの料金がかかることもないですが、注意してください
:::
KVMでデフォルトで作成されるNATをIPv6 NATに対応させる

RHELにKVMをインストールすると、デフォルトで IPv4 のNATネットワークが作成される。
これをIPv6 NATに対応させたい。

事前にKVMホストにIPv6アドレスを固定で割り当てておく。
ここでは```fd00:192:168:10::162```を割り当てたものとする。

```bash
virsh
virsh # net-edit default
```

変更前の設定
```bash
<network>
  <name>default</name>
  <uuid>a7b33318-5dbc-46bc-ba33-xxxxxxxx</uuid>
  <forward mode='nat'/>
  <bridge name='virbr0' stp='on' delay='0'/>
  <mac address='aa:aa:aa:aa:aa:aa'/>
  <domain name='default'/>
  <ip address='192.168.120.1' netmask='255.255.255.0'>
  </ip>
</network>
```

変更後の設定
```bash
<network>
  <name>default</name>
  <uuid>a7b33318-5dbc-46bc-ba33-xxxxxxxx</uuid>
  <forward mode='nat'>
    <nat ipv6='yes'/>   ←★追加
  </forward>            ←★追加
  <bridge name='virbr0' stp='on' delay='0'/>
  <mac address='aa:aa:aa:aa:aa:aa'/>
  <domain name='default'/>
  <ip address='192.168.120.1' netmask='255.255.255.0'>
  </ip>
  <ip family='ipv6' address='fd00:192:168:120::1' prefix='64'>  ←★追加(IPは適宜変更)
  </ip>                                                          ←★追加
</network>
```

OS再起動
```bash
reboot
```

参考にしたサイト。

https://libvirt.org/formatnetwork.html
Power BI DesktopでCSV取り込み時のエラー回避

# 概要
Power BI Desktopは無料で使えて、
いろいろデータ分析結果の見える化に使う案件が増えてきたけど、
CSV取り込みの時にちょっと困ったケースがあったので、
その回避策の備忘録

# やりたかったこと
会計ソフトにMoneyForword会計を使っているんですが、
標準で提供されている分析機能はちょっと使いづらい。

例えば、表形式で前年度比較はできるんですが、グラフ表示できなかったり。
複数年度の比較はできなかったり。

補助科目ごとにグラフを表示できるけど、
補助科目一つだけを指定するのがすごく手間だったり。
そしてその設定を保存できないので毎回補助科目を指定するのがすごく面倒・・・。

なので、年度の仕訳データをCSV出力してフォルダに入れておいて、
Power BI Desktopで読み込んで分析することにしました。

# 起こった問題
フォルダの中に年度ごとの仕訳データをCSVで保存して、
Power BI Desktopのフォルダ指定で読み込ませました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/1fe50a15-8b02-9ff7-38da-d0ad749b63b9.png)

そうすると、いくつかの行でエラーが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/afc16a29-befe-98ea-40e7-520ff1150c68.png)

発生したエラーはいくつかのパターンがあります。
・DataFormat.Error: Number に変換できませんでした。
・Expression.Error: 列挙内に十分な要素がなかったため、操作を完了できませんでした。

原因は・・・摘要欄に入力されている改行文字でした。
CSVデータの文字列データの中に改行文字が入っている場合、
そこまでを一行分のデータとして処理してしまっているようです。

# 対応方法
①Power Queryエディターを起動します。
②クエリペイン内のヘルパークエリーから「サンプルファイルの変換」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/442caba1-35c6-a794-8fcf-f369085d5225.png)

③クエリの設定ペイン内の「ソース」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/7846870b-38ae-4bbf-1208-1b8b6b45f8a6.png)

④Csv.Document関数を呼び出している箇所が表示されます。
　QuoteStyleの指定を、「QuoteStyle.None」から「QuoteStyle.Csv」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/72ab0039-a446-a8b1-fa80-b746581f274c.png)

　↓↓↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/787879d8-68d2-f514-77d2-ac192b0ffa91.png)

⑤Power Queryエディターを閉じて適用します。

# 最後に
CSV出力作業は手作業になるので、
ここはPower Automate Desktopの出番かな・・・。
エンジニアの保守業務はなぜ評価されにくいのか🤔

# はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）

保守業務を中心で行なっている方の評価が低くなる状況は何か違うな〜、と思ったのがきっかけで評価制度のことを考えるようになってきたのですが、保守業務の評価はどのように行われているのか気になりました。🤔

僕は人事の仕事を行なっていないためただの考察になりますが、実際に携わっている方がいらっしゃれば教えていただきたいです🙇

# エンジニアが行う保守業務を評価することが難しい理由
僕なりに考えた結果、以下のものが挙げられるかなと思います。

**1. 目に見える成果が少ない**
**2. 定量評価が難しい**
**3. 認識の問題**

### 1. 目に見える成果が少ない
**保守はシステムの安定稼働を維持するための作業が中心**なため、新機能開発や大規模な改善とは異なり、目に見える成果として現れにくいことが要因の一つだと感じます。

例）

<font color="RoyalBlue">エンジニア</font>
🧑‍💻 < システムの安定稼働や体験向上のために、バグの修正であったりパフォーマンスの最適化など行いました！

<font color="Tomato">評価者</font>
🧑‍💼 < 技術的に難しいんですか？
🧑‍💼 < それで何が解決したんですか？ ビジネスインパクトありますか？

こういう会話が頭の中で聞こえてきました。😇
流石にここまでは酷くない気はしますが、イメージとしてはこんな感じですね。

さらに、保守はインシデントが発生する前に防ぐという**予防的な性質**があるため、上手く稼働している場合は「**何も起こらない**」ことが成果です。 
ですので、どうしても評価が難しくなる傾向にあるのかなと思います。

例）

<font color="RoyalBlue">エンジニア</font>
🧑‍💻 < 保守業務の一環としてセキュリティパッチの適用やシステムの監視を行い、潜在的な脅威を防ぐように尽力いたしました！

<font color="Tomato">評価者</font>
🧑‍💼 < 実際に目に見えないので何とも。。。

### 2. 定量評価が難しい
新規開発は完成した機能やプロジェクトの規模などで評価しやすいですが、保守業務はトラブルを未然に防ぐことや、小さな修正を繰り返すことが多く、**定量的に評価するのが難しい**と思います。🤔

これはエンジニアであっても、保守業務に精通している方が見ないことには分かりづらい気がします。
機能の開発と比較した場合、**バグ修正などで技術力を測ることも難しいこと**が要因として挙げられる気もします。

例）

<font color="RoyalBlue">エンジニア</font>
🧑‍💻 < バグの修正を○件行いました！特にこのバグは修正がとにかく大変で、色々なところに影響するのできちんと確認しながら行わないと。。。

<font color="Tomato">評価者</font>
🧑‍💼 < 修正したバグの数で判断しますね。

定量的に測れるレベルのものを取り扱うことになる気がしますので、上記のようなパターンで保守業務者の技量が判断できないこともあるかと思います。🥲

### 3. 認識の問題
保守業務は「**現状維持**」として認識されることが多く、プロダクトの新規開発といった進歩や革新と比べて評価が低くなりがちだと思います。。。
特にマネジメント層がその重要性を十分に理解していない場合、適切な評価がされにくくなります。🥶

定期的なシステムアップデートや監視体制の強化などはシステムの信頼性を高めるために不可欠ですが、**これらの活動が当たり前として見られ、エンジニアの努力や貢献が十分に評価されない**ケースが存在していると考えられます。

<font color="RoyalBlue">エンジニア</font>
🧑‍💻 < 保守業務としては、バグ修正や機能改修だけでなく、監視体制の強化や定期的なセキュリティパッチ導入など様々なことをしています！

<font color="Tomato">評価者</font>
🧑‍💼 < 当たり前だと思ってたので特に評価すべき点が思い当たりません。

。。。これは流石に極端な例だと思います。🙅
ただ、ゴリゴリのテックカンパニーならともかく、**主力事業が技術系ではない事業会社の一部門としてエンジニア部門がある企業だと、往々にして評価者との認識の相違が発生しそう**な気がします。

エンジニア部門単体では売り上げが見込めないことから、そこまでエンジニアの評価に本腰を入れる必要はないと判断されることも要因として考えられそうです。😵
（ここは特に個人的見解です。）

# おわりに
ここまでお読みいただきありがとうございます！

実際の評価制度を詳しく知らないので想像にはなりますが、皆さんも一度は思ったことがあるのではないでしょうか？

ただ、あくまで想像ですので「ここは違いそう！」や「ウチではこうしてるよ！」みたいなことがあれば是非教えていただきたいです！🙇
LLVM IRの勉強メモ #7

個人的な学習メモレベルです。

#### Garbage Collector Strategy Names[^1]

個々の関数はガベージコレクタ戦略名(garbage collector strategy name)を持つことができる。

```txt
define void @f() gc "name" { ... }
```

ガベージコレクタ戦略を指定すると、指定されたガベージコレクションアルゴリズムを適用するため、コンパイラの出力が変わることもある。また、LLVM自体はガベージコレクタを持たないため、外部のコレクタを利用できるマシンコード生成のみに適用される。

#### Prefix Data[^2]

プレフィックスデータはコードジェネレータが関数のエントリーポイントの直後に出力するデータである。これは、フロントエンドが言語固有の実行時メタデータを特定の関数に関連付け、関数ポインタを通して利用できるようにすることを目的としている。
関数のデータにアクセスするため、プログラムは関数のポインタを定数型のポインタにビットキャストし、インデックス-1を非参照にすることができる。

i32のアノテーションがついている関数の例を挙げる。

```txt: i32のアノテーションがついている関数の例
define void @f() prefix i32 123 { ... }
```

このプレフィックスデータは、以下のように参照される。

```txt
%a = getelementptr inbounds i32, ptr @f, i32 -1
%b = load i32, ptr %a
```

プレフィックスデータは、プレフィックスデータの型のグローバル変数に対するイニシャライザのように配置される。関数はプレフィックスデータの先頭がアラインメントされるように配置される。このため、プレフィックスデータのサイズがアラインメントサイズの倍数でない場合は、関数のエントリポイントはアラインメントされない。関数のエントリポイントのアラインメントを行いたい場合は、サイズ調整のためにパディング処理をする必要がある。

#### Prologue Data[^3]
プロローグアトリビュートは、関数本体の前に挿入することで、ホットパッチやインストルメンテーションを可能とするために使用される。
通常の関数呼び出しのセマンティクスを維持するため、プロローグデータは特定の形式を持っている。この形式はターゲットに依存する。ターゲットごとに特定の形式とすることで、インライナーや他のパスはプロローグデータを推論することなく、関数定義のセマンティクスを推論できる。

以下は、x86でnop命令をエンコードするi8 144をプロローグデータとする例である。

```txt
define void @f() prologue i8 144 { ... }
```

関数の先頭にnop命令を挿入できることで、後で何らかのインストルメンテーション機能の呼び出しに安全に置き換えられるらしい。[^4]

一般的にプロローグデータは、メタデータをスキップする相対分岐命令をエンコードすることにより形成される。

```txt
%0 = type <{ i8, i8, ptr }>

define void @f() prologue %0 <{ i8 235, i8 8, ptr @md}> { ... }
```

[^1]: https://llvm.org/docs/LangRef.html#garbage-collector-strategy-names
[^2]: https://llvm.org/docs/LangRef.html#prefix-data
[^3]: https://llvm.org/docs/LangRef.html#prologue-data
[^4]: https://reviews.llvm.org/D6454
33業種×エンジニア：医薬品

## はじめに
未経験からのエンジニア転職を模索中。33業種それぞれでエンジニアはどのような働き方をしているのかが気になったので調べたことをまとめてみます。実際に現場で働いている方から見たらぬけ等あるかと思いますが、あたたかい目で見守ってください

## 医薬品×エンジニアの働き方の例
![iyakuhin.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777936/118fcfab-a296-31bc-bc86-66ee31c5460f.jpeg)

### 1. システムエンジニア（SE）
役割: 医薬品企業のITインフラの設計、開発、導入、運用管理を行う
研究データ管理システムの設計と導入。
電子記録・電子署名（ER/ES）システムの開発。
生産管理システムの最適化と自動化。

### 2. プログラマー
役割: 医薬品の研究開発や製造プロセスをサポートするソフトウェアのコーディング
分析ソフトウェアやデータ解析ツールの開発。
臨床試験データの管理システムのプログラミング。
医薬品トレーサビリティシステムの実装。

### 3. サーバーエンジニア
役割: 医薬品企業のサーバーの設計、設定、保守、管理を担当
大規模データの保存とバックアップシステムの構築。
研究所や工場のデータセンター管理。
クラウドベースのシステム管理。

### 4. ネットワークエンジニア
役割: 医薬品企業のネットワークインフラの設計、設定、運用、保守を行う
複数の研究所や生産施設を結ぶ安全なネットワークの構築。
リモートアクセスシステムのセキュリティ設定。
臨床試験データのリアルタイム伝送のためのネットワーク構築。

### 5. データサイエンティスト
役割: 医薬品データの解析、予測モデルの作成、結果のビジュアル化を行う
臨床試験データの解析とパターン認識。
医薬品開発のための予測モデルの作成。
生産データの解析と最適化。


## 世界大手企業の概要
### [Pfizer](https://www.pfizer.com/)
概要: アメリカに本拠を置く世界的な製薬企業。革新的な医薬品やワクチンの研究、開発、製造、販売を行っている。特に感染症治療薬やバイオ医薬品の分野で知られている。

### [Roche](https://www.roche.com/)
概要: スイスに本拠を置く世界的な製薬企業。がん治療薬や診断薬の研究、開発、製造、販売に注力している。バイオテクノロジーと診断技術を融合した製品を提供している。

### [Novartis](https://www.novartis.com/)
概要: スイスに本拠を置く世界的な製薬企業。ジェネリック薬品、眼科薬、バイオ医薬品など幅広い製品ラインを持ち、革新的な治療法の開発に注力している。


## 日本企業の概要
### [武田薬品工業](https://www.takeda.com/)
概要: 日本を代表する製薬企業であり、消化器、オンコロジー（がん治療）、中枢神経系、希少疾患、血液疾患の分野で世界的に事業を展開している。革新的な医薬品の研究開発に注力している。

### [アステラス製薬](https://www.astellas.com/jp/)
概要: 日本の製薬企業であり、がん、腎疾患、免疫疾患などの分野で革新的な治療法の研究開発を行っている。患者の生活の質を向上させることを使命としている。

### [エーザイ](https://www.eisai.co.jp/index.html)
概要: 日本の製薬企業であり、神経科学や腫瘍学を中心に、患者の健康と生活の質の向上に貢献することを目指している。認知症やがん治療の分野で多くの製品を提供している。



## さいごに
医薬品・製薬×エンジニアで検索をかけると「解析システムの開発展開に専門性を有するエンジニア」「アプリケーションエンジニア（ヘルスケアアプリケーション)」「インフラエンジニア【製薬企業向け】」などがありました。
中にはITの実務だけでなく、薬品に関わる知識が必須な求人もありました。かなり専門性が高そうなイメージです💦