OmniAICreator/Qiita-1.07M huggingface dataset:
ReactやNext.jsでコンポーネントを使う際の注意点とコンポーネントの探し方

Reactなどコンポーネントベースのアーキテクチャでコンポーネントが多くなった時，どこに何が書いてあるかわからなくなるときありませんか？
大規模なReactやNext.jsのプロジェクトでは，コンポーネントの管理と検索が重要である．プロジェクトが成長するにつれて，コンポーネントの数が増加し，適切なコンポーネントを素早く見つけることが難しくなる．ここでは，効率的にコンポーネントを検索するための便利な方法を紹介する．

# 1. コンポーネントの命名規則
コンポーネントの命名規則を統一することで，検索が容易になる．具体的には，以下のような命名規則を採用するとよい．

プレフィックスを使用する．例：ButtonPrimary, ButtonSecondary
機能や役割に基づいた名前をつける．例：UserProfileCard, ProductList
一貫したキャメルケースを使用する．例：NavBar, FooterMenu
```js
// 良い例
const UserProfileCard = () => {
  return (
    <div>
      <p>User Profile</p>
    </div>
  );
};

// 悪い例
const profilecard = () => {
  return (
    <div>
      <p>User Profile</p>
    </div>
  );
};
```
# 2. フォルダ構造の整理
コンポーネントを適切にフォルダ分けすることで，探しやすくなる．一般的なフォルダ構造の例を以下に示す．

```
src
├── components
│   ├── common
│   │   ├── Button.jsx
│   │   ├── Input.jsx
│   ├── layout
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   ├── pages
│       ├── Home.jsx
│       ├── About.jsx

```
# 3. IDEやエディタの検索機能を活用する
Visual Studio Code や WebStormなどのIDEには，強力な検索機能が備わっている．特にVSCodeでは，以下の機能を活用するとよい．

- 全体検索（Cmd+Shift+F または Ctrl+Shift+F）
- 定義へジャンプ（F12 または Cmd+Click）
- シンボル検索（Cmd+T または Ctrl+T）


# 4. React Developer Toolsの活用
ChromeやFirefox用の拡張機能である「React Developer Tools」を使用することで，コンポーネントの詳細情報を確認できる．インストール後，開発者ツール（F12キー）を開き，"Components"タブを選択する．このタブでは，Reactコンポーネントのツリー構造や各コンポーネントのprops，stateを確認できる．

**React Developer Toolsのインストール**
1. ChromeウェブストアまたはFirefoxアドオンサイトにアクセス
2. "React Developer Tools"を検索し，インストール

**使用方法**
1. ブラウザで開発者ツール（F12キー）を開く
2. "Components"タブを選択

# 5. ドキュメントコメントの利用
コンポーネントにドキュメントコメントを追加することで，検索時に役立つ情報を提供できる．特に，JSDoc形式のコメントを使用することで，IDEのサポートを受けやすくなる．

```js
/**
 * UserProfileCard
 *
 * @description ユーザープロファイルを表示するカードコンポーネント．
 * @returns {JSX.Element} UserProfileCardコンポーネント
 */
const UserProfileCard = () => {
  return (
    <div>
      <p>User Profile</p>
    </div>
  );
};
```

# 6. Storybookの活用
Storybookを使用することで，コンポーネントの一覧性が向上し，ビジュアルに検索ができるようになる．Storybookは，ReactやNext.jsプロジェクトに簡単に統合できる．

```js
// Storybookのインストール
npx sb init

// ストーリーの作成
// src/components/UserProfileCard.stories.js

import React from 'react';
import UserProfileCard from './UserProfileCard';

export default {
  title: 'UserProfileCard',
  component: UserProfileCard,
};

export const Default = () => <UserProfileCard />;
```
大規模なReactやNext.jsプロジェクトにおいて，コンポーネントの検索を効率化するためには，統一された命名規則，整理されたフォルダ構造，IDEの検索機能，React Component Search拡張機能，React Developer Toolsの活用，ドキュメントコメント，およびStorybookの活用が重要である．これらの方法を適用することで，プロジェクトの保守性と開発効率が向上する．
XSERVERでサブドメインのPHPバージョンを変更するスクリプトは、php.iniファイルの指定が必要

# XSERVERレンタルサーバーでサブドメインのPHPのバージョンを変更する方法
## お断り
この記事の内容はXSERVERが公式にサポートするものではありません。
非公式な方法ですので、設定する際には自己責任でお願いします。
## 設定方法
### php.fcgiファイルを作成する
PHPバージョンを変更したいサブドメインのディレクトリ内に、以下の`php.fcgi`ファイルを作成します。
例) (各ユーザーのフォルダ)/example.com/public_html/subdomain.example.com/php.fcgi
- `php-fcgi8.3`の部分は使用するPHPバージョンに合わせて変更してください。一覧はXserverサーバーパネルのサーバー情報 > コマンドパス一覧 にあります。
- `username`と`example.com`をご自身のFTPユーザー名(サーバーID)、適用するドメイン名に置き換えてください。**このパラメーターが重要です。**
- パーミッションは705に設定します。
```shell:php.fcgi
#!/bin/sh
exec /usr/bin/php-fcgi8.3 -c /home/username/example.com/xserver_php/php.ini
```

### .htaccessに設定追加
PHPバージョンを変更したいサブドメインのディレクトリ内に`.htaccess`ファイルに設定を追加します。
例) (各ユーザーのフォルダ)/example.com/public_html/subdomain.example.com/.htaccess
```
Action myphp-script /php.fcgi
AddHandler myphp-script .php
```

### phpinfo()で設定確認
`phpinfo()`を実行して、PHPのバージョンが変わっていることと、`session.save_path`が`/home/username/example.com/xserver_php/session` である事を確認してください。
(`username`と`example.com`は適宜読み替えてください)

## 何故-cオプションが必要なのか 
execコマンドのパラメーターに`-c`オプションをつけないで上記と同様のことを行うと、**PHPがCLI用の設定になってしまいます。**
大きな違いとしては以下があります。
- sessionの保存先がサーバー内ユーザーで共通のディレクトリ
- opcacheが無い
- max_execution_timeが20分で過大

他のユーザーがsessionファイルを読めるわけではなさそうですが、`-c`オプションで自身のディレクトリに保存されるようにした方が無難だと思います。


### CLI用とWebサイト用のphp.iniの違い

確認できた範囲でphp.iniの内容の違いをあげておきます。
収容サーバーによっては違うかもしれませんし、サーバーパネルで設定を変更している場合はこの限りではありません。

#### セキュリティに関係する箇所

|  | CLI用 | Webサイト用|
|:-:|:-:|:-:|
|cgi.force_redirect|Off|On|
|session.save_path|/var/lib/php/session|/home/username/example.com/xserver_php/session|
|session.use_strict_mode|Off|On|

#### 他に設定が違う箇所

|  | CLI用 | Webサイト用 |
|:-:|:-:|:-:|
|opcache.enable|(モジュール無し)|On|
|error_reporting|E_ALL|E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED|
|expose_php|On|Off|
|max_execution_time|1200|60|
|max_input_time|60|-1|
|memory_limit|2000M|1G|
|post_max_size|2000M|1G|
|upload_max_filesize|2000M|1G|
|mbstring.detect_order|no value|auto|
|mbstring.http_input|no value|pass|
|mbstring.http_output|no value|pass|
|mbstring.internal_encoding|no value|UTF-8|
|mbstring.language|neutral|Japanese|
|url_rewriter.tags|a=href,area=href,frame=src,input=src,form=fakeentry|form=|

## おまけ
FTPでは見えませんが、`/home/userfastcgi/username/example.com/php-cgi`にデフォルトのfcgiスクリプトがあります。当方が収容されているサーバーだと、以下のように`ulimit`コマンドも入っていました。

```shell
#!/bin/sh
ulimit -u 500
exec /usr/bin/php-fcgi8.3 -c /home/username/example.com/xserver_php/php.ini
```
※ulimitコマンドの有無や設定内容は収容サーバーによって違うかもしれません。
LINEの通知で薬の飲み忘れを防止したい

# 週に一回だけ飲む薬をいつも忘れる
毎日の習慣は忘れにくいけれど、週に一度だけ決まった時間にやることは忘れがち。
週に一回だけ飲まなければいけない薬をどうしても忘れてしまって困っていた。
iphoneのカレンダーでリマインドしても、通知が控えめなせいかあまり効果を感じない。

# LINEは通知が緑で目立つので忘れない
LINEの通知はとにかく目立つ。開きに行く手間もあるので、通知があれば必ず見に行くことに気づいた。今回も[IFTTT](https://ifttt.com/explore)を活用し、超簡単お知らせツールを作成した。

# IFTTT①(決まった曜日・時間を設定)
今回はテスト用に、毎週火曜日の11時45分で設定した。
![スクリーンショット 2024-07-09 11.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/0dbee47a-99ab-8844-ac25-aa736f9b00a6.png)

# IFTTT②（LINEに通知させる)
![スクリーンショット 2024-07-09 11.54.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/f6686c68-606a-a1c4-9ed7-f957af8b1d48.png)

# IFTTT　全体像
簡単に設定できた。
![スクリーンショット 2024-07-09 11.56.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/37ed7172-0a41-3450-4e46-6761a7c6753b.png)

# まとめ
LINEの通知は本当に目立つし忘れない！
iPaaSを知る前は、このような便利なツールが世の中にたくさんあるだなんて思ってもいなかったし、WebアプリやLINE Botも、エンジニアが作るものだと思っていた。
世の中にたくさん転がっているツールを活用すれば、アイデア次第でものすごく便利なものが作れることが分かった。また、LINEが「緑」であることで通知が意識しやすいことが分かったので、「色」が齎す効果についても勉強したいと感じた。
iPaaSについては、今後も継続して活用していきたい。

![okusuri.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/e361a74f-7945-86ec-cdbf-9b6066fe228a.jpeg)
技術書?

# TD; LR;
書くネタがないので本をおいておきます
基準はおうちの本棚を適当に整理していたらでてきたやつらです
プログラマむけ
SICPとかTAOCPとかはいれない
説明になってない紹介しかしていない
とりあえず5冊ほど

### 低レベルプログラミング
https://www.amazon.co.jp/dp/4798155039/
難易度低レベル
ロシアで教科書として書かれた本。
類書は昔は山程あったけど、今はあんまりない
プログラマになりたい人はきちんと読む
stackとかregisterとかabiとかCPUとかわかってる人は読まなくていい
Cの話もいいがアセンブラの話がいい
とてもいい

### ハッカーのたのしみ
https://www.amazon.co.jp/dp/443420159X/
2版の和書
bit演算の技芸
難しいのは内容なので本文が日本語でなくてもいいが和書はうれしい
深夜のファミレスでノートとペンをもちこんで、ひたすら計算するのが楽しい
たのしい!!

### ハロー“Hello, World” OSと標準ライブラリのシゴトとしくみ
https://www.amazon.co.jp//dp/B01GH9AM8C
坂井さんの著作はすべて良書すぎることで有名です
プログラムが実行されるまでなにやってるのかってこととかを書いてあります
elf interpreterはこの本読んで「そんなんあるのー」とかなった記憶ある
組み込みLinuxのなんかでその知識が役に立ちました
arm32のabiとabihfの差だったりとか
あとなんかデバッグするのに役にたつよ!技術書だね!

### その数式プログラミングできますか?
https://www.amazon.co.jp/dp/4798141100/
できません!
積んであったけど見てるだけでやばい。
ちゃんと読む
数学の話する書籍はいっぱいあるしプログラミングのこと書いてる本はいっぱいあるけど、このジャンルの本ってあんまりない。いちばんの類書はある意味でSICPだろうけど、こっちの方が読み物に近い(数学の歴史とか証明とか、ついでにSTLのコードとか)
サンプルコードはC++(主にSTL。ステパノフがこれたぶん好き)
中古しかないっぽいのでそのうちなくなる
プレミア感ある

### 純粋関数型データ構造
https://www.amazon.co.jp/dp/B0B6Z5XPBH/
通称okazaki
昔RedBakckSetのHaskellのコードわからなすぎて、すごく精読したんだけど結果として「美しいコードを書くのは無理」ってなって涙でた(リアル)
データ構造の変化をノートとペンでおいかけることになる。なんだこれ、とかなる


# まとめ
まとまらない。質問とか受け付けません
読めばわかる、たぶん

# どうでもいいこと
今月書く予定のやつが思ったより面倒な沼があって書けなかったので適当に記事をでっちあげることにした
またネタがなくなったらやる(本はいっぱいある)
[Python]内包表記

# 内包表記とは

**内包表記**を使うとりすと、辞書、集合などを生成するときより**簡潔**に、そして**早く**作成できます。

まずは、従来の方式であるfor文を使って0から9までの数を2で乗じた結果をリストに保存してみましょう。

```python
a = []
for i in range(10):
    a.append(i*2)

a    # [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]
```

今度は**内包表記**を使ってリストを生成します。

```python
a = [i*2 for i in range(10)]

a    # [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]
```

そして、if文を使ってフィルタリングもできます。
```python
a = [i*2 for i in range(10) if i < 5]

a    # [0, 2, 4, 6, 8]
```

<br/>

## ネストしたリスト
ネストしたリストも**内包表記**で生成できます。

```python
shirts = ['long', 'short']
pants = ['long', 'short']

clothes = [(shirt, pant) for shirt in shirts for pant in pants]
clothes # [('long', 'long'), ('long', 'short'), ('short', 'long'), ('short', 'short')]
```

でも、このようなコードは可読性が下がるため、普通のfor文を使う方がよいと思います。


<br/>

## 集合
集合も**内包表記**で生成できます。

```python
{i*2 for i in range(10) #{0, 2, 4, 6, 8, 10, 12, 14, 16, 18}
```


<br/>

## 辞書
辞書も**内包表記**で生成できます。

```python
{i: i*2 for i in range(5)} # {0: 0, 1: 2, 2: 4, 3: 6, 4: 8}
```
robloxでassistant その123

# 概要
robloxでassistantやってみた。
練習問題やってみた。

# 練習問題
スクリプトだけで、パーツを合体させよ。

# 手順
- ReplicatedFirstに、LocalScriptを追加。
- スクリプトを書く。

```


wait(1)
local partA = Instance.new("Part", workspace)
partA.Size = Vector3.new(4, 1, 4)
partA.Position = Vector3.new(0, 5, 0)
local partB = Instance.new("Part", workspace)
partB.Size = Vector3.new(1, 1, 1)
partB.Position = Vector3.new(-2, 6, 2)
local partC = Instance.new("Part", workspace)
partC.Size = Vector3.new(1, 1, 1)
partC.Position = Vector3.new(2, 6, -2)
local partD = Instance.new("Part", workspace)
partD.Size = Vector3.new(1, 1, 1)
partD.Position = Vector3.new(-2, 6, -2)
local partE = Instance.new("Part", workspace)
partE.Size = Vector3.new(1, 1, 1)
partE.Position = Vector3.new(2, 6, 2)

local weld0 = Instance.new("WeldConstraint", partA)
weld0.Part0 = partA
weld0.Part1 = partB
local weld1 = Instance.new("WeldConstraint", partA)
weld1.Part0 = partA
weld1.Part1 = partC
local weld2 = Instance.new("WeldConstraint", partA)
weld2.Part0 = partA
weld2.Part1 = partD
local weld3 = Instance.new("WeldConstraint", partA)
weld3.Part0 = partA
weld3.Part1 = partE



```

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d5922224-0735-3629-7e82-de7310baf9e0.png)



以上。
実務でのソフトウェア開発におけるライブラリ/DLL選定基準

## はじめに
個人開発と実務での開発では，ライブラリ/DLLを選定する上で考えるべきことが変わります．
今回は実務でソフトウェア開発を行う上で特別必要な選定基準についてまとめました．

## ライブラリ/DLLを選定する前に
まず初めに，ライブラリやDLLを使用する必要があるか調査してください．
使っている言語やフレームワークによっては機能をサポートしていることあります．

## 本題
ライブラリ/DLLを選定する上で大事なことは次の5つです．
各項目の重要度合いは状況によって変わりますので，注意してください．

### 1. ライセンス
ライセンスは絶対に確認してください．
商業利用NGであったり，費用がかかったり等の制限が設けられている場合もあります．

### 2. 信頼性
大手企業がサポートしているもの，活発にレビューが行われているOSS，導入実績があるライブラリ等・・・

信頼されているソースから提供されているか確認をしてください．

### 3. メンテナンスの状況
ライブラリ/DLLが積極的にメンテナンスされているか確認をしてください．
積極的にメンテナンスされている場合は，不具合に対する対応が早い傾向にあります．

### 4. ドキュメントの充実具合
これが意外と重要です．
ドキュメントが不足していると数年後誰も使い方が分からない負の遺産になります．
どうしても提供されているドキュメントが不足している場合は，使用している機能だけでも使い方をドキュメントにして残してあげてください．

### 5. サポート
問題が発生した時にサポートを受けられるか確認してください．
サポートを受けられるものが好ましいですが，他の項目よりは優先度が下がるでしょう．
去除NPF64.sys文件

#### 海康威视Hikvision的萤石工作室Ezviz Studio，软件安装后会为系统增加一个驱动程序，叫做NPF64.sys。
#### 此驱动程序无法通过卸载来移除。
#### 解决方法使用sc工具。

#### 使用管理员权限打开cmd，输入命令。
`sc stop NPF`
`sc delete NPF`

#### 去安装目录删除文件。
`C:\Program Files (x86)\Ezviz Studio\npf64.sys`
【MySQL】UNIONするとソートが効かなくなる

# やりたいこと
2つのテーブルから条件に合うデータを抽出し、それぞれID順にソートしてから結合する。

### 例
dogsテーブルとcatsテーブルから、5歳未満のレコードを抽出し、それぞれID順にソートしてから結合する。

- dogsテーブル

| id | name | age |
|:-:|:-:|:-:|
| 1 | ムギ | 9 |
| 2 | ココ | 3 |
| 3 | ソラ | 8 |
| 4 | モカ | 2 |

- catsテーブル

| id | name | age |
|:-:|:-:|:-:|
| 1 | レオ | 6 |
| 2 | ルナ | 1 |
| 3 | ベル | 7 |
| 4 | キナコ | 4 |

- 期待する結合結果

| id | name | age |
|:-:|:-:|:-:|
| 2 | ココ | 3 |
| 4 | モカ | 2 |
| 2 | ルナ | 1 |
| 4 | キナコ | 4 |

# NGな書き方
```
(SELECT * FROM dogs WHERE age < 5 ORDER BY id)
UNION
(SELECT * FROM cats WHERE age < 5 ORDER BY id);
```
結合結果
| id | name | age |
|:-:|:-:|:-:|
| 4 | モカ | 2 |
| 2 | ココ | 3 |
| 2 | ルナ | 1 |
| 4 | キナコ | 4 |

dogsテーブルがID順にならなかった。
（設定しているINDEXが原因だと予想しているが、）**ソートが効いていない。**

### ドキュメントを見てみる
https://dev.mysql.com/doc/refman/8.0/ja/union.html
> 個々の SELECT ステートメントに ORDER BY を使用すると、UNION では順序付けられていない行のセットがデフォルトで生成されるため、最終結果に行が表示される順序については何も意味しません。 したがって、このコンテキストの ORDER BY は通常、SELECT 用に取得する選択済の行のサブセットを決定するために LIMIT とともに使用されますが、最終的な UNION 結果の行の順序には必ずしも影響しません。 SELECT に LIMIT がない状態で ORDER BY が表示された場合は、どのような場合にも効果がないため最適化されます。

:::note info
ORDER BY は LIMIT と一緒に使わないと無視される
:::

# OKな書き方
LIMIT を設定することで期待した結果が得られた（が、微妙）。
```
(SELECT * FROM dogs WHERE age < 5 ORDER BY id LIMIT 10)
UNION
(SELECT * FROM cats WHERE age < 5 ORDER BY id LIMIT 10);
```
結合結果
| id | name | age |
|:-:|:-:|:-:|
| 2 | ココ | 3 |
| 4 | モカ | 2 |
| 2 | ルナ | 1 |
| 4 | キナコ | 4 |

# 採用した書き方
LIMIT を設定したくなかったので、他の書き方を採用した。
```
(SELECT 1 as sort, * FROM dogs WHERE age < 5)
UNION
(SELECT 2 as sort, * FROM cats WHERE age < 5)
ORDER BY sort, id;
```
結合結果
| sort | id | name | age |
|:-:|:-:|:-:|:-:|
| 1 | 2 | ココ | 3 |
| 1 | 4 | モカ | 2 |
| 2 | 2 | ルナ | 1 |
| 2 | 4 | キナコ | 4 |

不要なカラムは後続処理で消した:innocent:
githooksをチーム開発でも利用できるようにする

# 背景

githooksをチーム開発でも活かせないか試してみました

# Githooks

githook はサンプルコードが存在します

gitを使ったプロジェクト内の `.git/hooks` にファイルが配置されています

```
❯ ls -alh .git/hooks
total 128
drwxr-xr-x  16 ※*＊  ※*＊   512B Jul  9 09:36 .
drwxr-xr-x  12 ※*＊  ※*＊   384B Jul  9 09:45 ..
-rwxr-xr-x   1 ※*＊  ※*＊   478B Jul  9 09:36 applypatch-msg.sample
-rwxr-xr-x   1 ※*＊  ※*＊   896B Jul  9 09:36 commit-msg.sample
-rwxr-xr-x   1 ※*＊  ※*＊   4.6K Jul  9 09:36 fsmonitor-watchman.sample
-rwxr-xr-x   1 ※*＊  ※*＊   189B Jul  9 09:36 post-update.sample
-rwxr-xr-x   1 ※*＊  ※*＊   424B Jul  9 09:36 pre-applypatch.sample
-rwxr-xr-x   1 ※*＊  ※*＊   1.6K Jul  9 09:36 pre-commit.sample
-rwxr-xr-x   1 ※*＊  ※*＊   416B Jul  9 09:36 pre-merge-commit.sample
-rwxr-xr-x   1 ※*＊  ※*＊   1.3K Jul  9 09:36 pre-push.sample
-rwxr-xr-x   1 ※*＊  ※*＊   4.8K Jul  9 09:36 pre-rebase.sample
-rwxr-xr-x   1 ※*＊  ※*＊   544B Jul  9 09:36 pre-receive.sample
-rwxr-xr-x   1 ※*＊  ※*＊   1.5K Jul  9 09:36 prepare-commit-msg.sample
-rwxr-xr-x   1 ※*＊  ※*＊   2.7K Jul  9 09:36 push-to-checkout.sample
-rwxr-xr-x   1 ※*＊  ※*＊   2.3K Jul  9 09:36 sendemail-validate.sample
-rwxr-xr-x   1 ※*＊  ※*＊   3.6K Jul  9 09:36 update.sample
```

今回は commit する前と push する前に利用するので `pre-commit.sample` と `pre-push.sample` を利用します。

利用するためには名前から `.sample` をtrim すればOKです

```sh
mv .git/hooks/pre-commit.sample .git/hooks/pre-commit
mv .git/hooks/pre-push.sample .git/hooks/pre-push
```

あとは必要に応じて実行権限を与えてあげれば使えるようになります

```sh
chmod +x .git/hooks/pre-commit
chmod +x .git/hooks/pre-push
```

`pre-commit` も `pre-push` も中身はシェルスクリプトなので、あとは用途に応じてシェルを組んであげてください(AIあたりに生成させてあげると楽かも)

# 本題

さて上記の手順だと、チーム開発に活かそうと考えた場合、README.mdに上記の手順とhooksで利用するソースコードを記載してあげる必要がありドキュメントの保守コストやメンバーの参入障壁が上昇してしまいます

そこで今回は以下のように symboliclink を駆使してgithooksを導入できる形を検討してみました

まず、hooksを `git add` の対象に入れるため適当なディレクトリに配置します

私はわかりやすいように `.github/hooks` という名前のディレクトリを作成してそこに配置しています

```sh
mkdir -p .github/hooks
cp .git/hooks/pre-commit .github/hooks/pre-commit
cp .git/hooks/pre-push .github/hooks/pre-push
```

これで`git add`の対象になりました

続いてメンバー参入時などを想定したレポジトリをcloneする場合について説明します

git cloneしただけだと `.github/hooks` にファイルが配置されているためgithooksが動きません

そこで symboliclink を用います

```sh
# set git hook
ln -s .github/hooks/pre-commit .git/hooks/pre-commit
ln -s .github/hooks/pre-push .git/hooks/pre-push

# 併せて権限も設定
chmod +x .git/hooks/pre-commit
chmod +x .git/hooks/pre-push
```

これで完成です

これならREADME.mdへの記述はコピペで終わるコマンドでまとめつつチーム開発にも利用できる形となったかと思います

IDEやテキストエディターを用いないユーザーやそもそもそういったツールを使いこなせていないユーザーに対して、コード保存時にlinterやformatterを実行させるということは中々にハードルが高いものかと思います

そこで、このようなCIはとても役立つと思うのでぜひ参考にしてみてください

# 余談

githooks, 個人的には個人開発でのCIにちょうどいいかなと思ったり

## その他の候補

### Github Actions

チーム開発ならやっぱりこちらを推奨します

なんといっても参入者が何もしなくて良いのが大きい

ただ、個人開発ならやりすぎ感が否めないかも

### husky

npm パッケージを駆使して開発するならhuskyで良いかも

※ npm パッケージが必須となります

## サンプル

githooks で commit時に eslint, prettierを、push時に commitlint を動かしていた時のコードのリンクを貼っておきます
(今はGithub Actionsの練習のため移行してしまった)

hooks
https://github.com/aecomet/aecomet.github.io/tree/b48d1ec0c3983cacec7177e8ec009946ebfd00e9/.github/hooks
【応用情報技術者試験】数字+アルファベット一文字のワードまとめ

# 概要
応用情報技術者試験にでてくる数字+アルファベット一文字のワードを纏めました。

# 目次
- [4P分析](#4p分析)
- [7P分析](#7p分析)
- [3C分析](#3c分析)
- [4C分析](#4c分析)
- [5F分析](#5f分析)

# 4P分析
以下の4つのPを用いて行うマーケティング戦略のこと。一般的に下記の順番で実施される。
1. Product (製品)
どのような製品やサービスを提供するか
1. Price (価格)
製品やサービスをどのような価格で提供するか
1. Place (流通)
製品やサービスをどのように提供するか
1. Promotion (販促) 
製品やサービスをどのように販売促進するか

1960年にマーケティング学者の[エドモンド・ジェローム・マッカーシー](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%89%E3%83%A2%E3%83%B3%E3%83%89%E3%83%BB%E3%82%B8%E3%82%A7%E3%83%AD%E3%83%BC%E3%83%A0%E3%83%BB%E3%83%9E%E3%83%83%E3%82%AB%E3%83%BC%E3%82%B7%E3%83%BC)が提唱した。
4P分析は分析法の中でも基礎といえる。

# 7P分析
4P分析から進化した分析法。
サービス業のマーケティング戦略を行うために使用される。
4Pから以下の3つのPが追加されている。
- People (人)
- Process (販売プロセス)
- Physical Evidence (物的証拠) 

サービス業は、製品といった形がないことや、製品の個数という切り分けができないほか、蓄えることができないといった特徴があり、これらを分析するには4Pのみでは難しい。
そのような無形のサービス業にとってもベストな分析を行えるよう、3つのPが追加された。

# 3C分析
以下の3つのCを使用した分析方法。
- Customer (顧客)
- Competitor (競合)
- Company (自社)

市場環境や企業を取り巻く業務環境を分析するための手法。
KFS (Key Factor for Success) を見つけることを目的に作成された。
[大前研一](https://ja.wikipedia.org/wiki/%E5%A4%A7%E5%89%8D%E7%A0%94%E4%B8%80)が1982に出版した著書「The Mind of the Strategist」の中で3C分析を提唱し、世界的に広まった。
この本の中で、「顧客」「競合」「自社」の3つの関係を「戦略的三角関係（strategic triangle）」と呼んでいる。

# 4C分析
以下の4つを使用した、マーケテイングにおける分析方法のこと。
- Customer value（顧客価値）
- Customer Cost（顧客コスト）
- Convenience（利便性）
- Communication（コミュニケーションのとりやすさ）

4P分析から派生した。4P分析は「企業視点」だったのが、4C分析は「顧客視点」の分析になっている。
4P分析のころは、企業が商品を作れば売れる、という時代だったのが、作っても特別な特徴がなければ売れ辛い、という時代に変わっていき、4C分析の重要度が高まった。
また、他の「4C分析」として、3C分析に「Co-Operator (協力者)」を加えた「4C分析」という考え方もある。
※協力者は、企業間の同盟等によってビジネス強化を図る要素。

なので、4C分析には
- 4P分析から派生して誕生したもの
- 3C分析に新たな要素がプラスされたもの

の2種類がある。

# 5F分析
以下の5つの観点で分析する手法。
- 業界内の競合の脅威
- 新規参入の脅威
- 代替品の脅威
- 買い手の交渉力
- 売り手の交渉力

5F分析の対象は、個々の企業ではなく、業界に対して行われる。
なので、分析を通じて、自社を取り巻く業界について客観的にみることができ、今後の事業展開に生かすことができる。

***
**[記載した応用情報技術者試験の記事まとめ](https://qiita.com/MetroOsamu/items/550001240d76e24f505f)**
codingame summer challenge 2024へ参加した感想

# codingame summer challengeとは
毎年この時期に開かれるいわゆる競技プログラミングの大会です。
paizaやAtCoderに参加したことがある人にはかなり馴染み深いものになっております。
決められたルールの中から最適なアルゴリズムを導き出し、
周りの人と競い合うものになっております。
今回は戦略要素がありとても楽しかったです。

# 出場することで得られたもの
まず他の人の作ったアルゴリズムと自分が作成したアルゴリズムを対戦させることができます。
今回のルールは4つのゲームがあり、最適解を探すものになっています。
自分の他に2人と対戦し、結果を見ながらアルゴリズムを改良していきます。
その中で昨日までの負けていた状態を改良し、快勝できるようにしていくような形になるので、
コンテスト形式よりも競技感があります。
ですので終了時間までモチベーションを切らさずに行うことができました。
その間で使えるアルゴリズムを探したり勉強したりということができ、
今まで以上にアルゴリズムの理解が深まりました。

# 普段の競プロと違い何が良かったか
期間が長いため、じっくり考えることができました。
またコード改善を行えばすぐ順位に直結するため、
結果が確認しやすく、かなりモチベーション高く取り組むことができます。
GUIもあるため、試験みたいにならずに気軽にできるところもいいとと思います。

# 最後に
今回はアルゴリズム勉強に最適なコンテストを紹介させて頂きました！
イベントはよく行われるので、ぜひチェックし参加してみてください！

https://www.codingame.com/start/
「Composeの基本レイアウト」のメモ#2

https://qiita.com/tiger98/items/3b906139699f25d66d69

のつづき
### [6. Favorite collection カード - マテリアル サーフェス](https://developer.android.com/codelabs/jetpack-compose-layouts?hl=ja#5)
+ テキストが titleMedium である
+ このコンテナの背景色は、画面全体の背景とは異なる surfaceVariant を使用している
+ 角が丸められている


#### UIの説明
+ Favorite collectionカードには、マテリアルの `Surface`コンポーザブルを使用して、カードの背景と形状を設定
+ `FavoriteCollectionCard`コンポーザブルを作成する
    + 引数に`modifier: Modifier = Modifier`を渡す
    + ラムダ本文に`Surface`コンポーザブルを呼び出す
        + 引数として`shape = MaterialTheme.shapes.medium`と`modifier = modifierを渡す`
        + shape: カードの角の丸みを MaterialTheme.shapes.medium で指定
    + `Surface`コンポーザブルのラムダ本文で`Row`コンポーザブルをラップする
        + `Row`コンポーザブルで`Image`と`Text`コンポーザブルをラップする
        + `Row`の引数に`verticalAlignment = Alignment.CenterVertically`と`Modifier.width(255.dp)`を渡す
            + `Image`コンポーザブルでは`painter`と`contentDescription`を引数として渡す
                + さらに`contentScale = ContentScale.Crop`を使用して画像はアスペクト比を維持したまま、表示領域内に収まるようにリサイズされる
                + `modifier = Modifier.size(80.dp)でサイズを調整`
            + `Text`コンポーザブルでは引数`text`に表示したい文字列リソースを渡す



### [7. Align your body の行 - 配置](https://developer.android.com/codelabs/jetpack-compose-layouts?hl=ja#6)
+ Arrangement.spacedBy() メソッドを使用して、各子コンポーザブル間に固定スペースを追加できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215907/4e22d876-0e80-7451-efed-cd008c6d031b.png)
+ `LazyRow`を利用して、横方向にスクロール可能なリストを作成する

#### UIの説明
+ `@Composable`を付けて、`AlignYourBodyRow`コンポーザブルを作成する
+ 引数には`modifier: Modifier = Modifier`を渡す
    + ラムダ本文で`LazyRow`をラップする
        + `LazyRow`の`horizontalArrangement`引数に`Arrangement.spacedBy(8.dp)`を渡す
        + `LazyRow`のラムダ本文でitemsメソッドを使用して要素を配置する





+ itemsは、Jetpack ComposeのLazyRowやLazyColumnなどのLazyコンポーネント内で使用される関数
+ リストや配列のようなデータの集合を`items`の引数として受け取り、データの集合の各要素に対して、指定されたコンポーザブル関数を`item -> `の後に呼び出して、画面上に表示する
0240709_反映_状態遷移図PU

@startuml
skinparam StateFontSize 12
skinparam StateFontName Arial
skinparam ArrowFontSize 11
skinparam ArrowFontName Arial
top to bottom direction
skinparam ranksep 50
skinparam nodesep 50

[*] -down-> DB更新情報取得中

state DB更新情報取得中 #lightyellow {
    [*] --> カレンダー処理
    
    state カレンダー処理 {
        [*] --> 対象データ確認
        対象データ確認 --> [*] : 対象データなし
        対象データ確認 --> 反映処理選択 : 対象データあり
        反映処理選択 --> [*]
    }
    
    state フラグ更新処理 {
        [*] --> 処理フラグ更新
        処理フラグ更新 --> [*]
    }
    
    カレンダー処理 -right-> フラグ更新処理 : 各反映処理完了
    フラグ更新処理 -right-> カレンダー処理 : フラグ更新完了
}

state 反映処理中 #lightyellow {
    [*] --> 新規追加処理
    新規追加処理 -right-> 名称変更廃止 : 新規追加完了
    名称変更廃止 -right-> 名称変更追加 : 変更完了
    名称変更追加 -right-> 廃止処理中 : 変更完了
    廃止処理中 -down-> [*] : 廃止完了
}

DB更新情報取得中 -down-> 反映処理中 : 対象データあり
反映処理中 -up-> DB更新情報取得中 : 各反映処理完了
反映処理中 -down-> 一括反映処理 : 全処理完了

state 新規追加処理 {
    [*] --> メール連携
    メール連携 -down-> リファレンスDBに追加 : メール連携完了
    リファレンスDBに追加 -up-> [*] : 追加完了
}

一括反映処理 -down-> [*] : 一括反映完了

@enduml
robloxでassistant その122

# 概要
robloxでassistantやってみた。
練習問題やってみた。

# 練習問題
スクリプトだけで、ボタンで箱を回転させよ。

# 手順
- ReplicatedFirstに、LocalScriptを追加。
- スクリプトを書く。

```


local Players = game:GetService("Players")
local Player = Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local Gui = Instance.new("ScreenGui")
Gui.Parent = PlayerGui
local button0 = Instance.new("TextButton")
button0.AnchorPoint = Vector2.new(4, 0.9)
button0.Size = UDim2.new(0.05, 0, 0.1, 0)
button0.Position = UDim2.new(0.5, 0, 0.5, 0)
button0.Text = "up"
button0.Parent = Gui
wait(1)
local part = Instance.new("Part", workspace)
part.Anchored = false
part.Size = Vector3.new(1, 1, 1)
part.Position = Vector3.new(0, 5, 0)

button0.MouseButton1Click:Connect(function()
	print("up")
	local att = Instance.new("Attachment")
	att.Parent = part
	local AV = Instance.new("AngularVelocity", part)
	AV.Attachment0 = att
	AV.MaxTorque = 100000
	AV.AngularVelocity = Vector3.new(1, 0, 0)
	AV.Parent = workspace
end)



```

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1b6a4644-6e41-3e31-eae6-9fa90c05d84b.png)



以上。
オフラインのPCにpsqlを導入

# 要件
インターネットへのアウトバウンドが禁止されているサブネットに配置されたRDSに対して、同サブネットに配置されたEC2(B)からpsqlしたい。
そのため、Bにpsqlを導入する。
![psql.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312090/a05a4ead-ecc2-56fa-02fe-a33068be6b97.png)

# 条件
インターネットへアウトバウンドできるEC2インスタンス(A)が用意されていて、BはAからのインバウンドを受け付けている。
EC2はAmazonlinux2023とする。
# やり方
まずは手元にマシンからAにSSHして、ビルドを行う
```shell:
# 必要なパッケージをインストール
sudo yum install -y gcc readline-devel zlib-devel bison flex

# ソースコードをダウンロード
curl -O https://ftp.postgresql.org/pub/source/v15.3/postgresql-15.3.tar.gz

# ソースコードを解凍
tar -xzf postgresql-15.3.tar.gz
cd postgresql-15.3

# ビルド、１０分くらいかかります
./configure
make

# 必要なバイナリをインストール
make install
```
ビルドが成功したら圧縮します。
```shell:
# 必要なファイルを再度圧縮
cd /usr/local/pgsql
tar -czvf psql-15.3.tar.gz bin lib share
```
AからBにSCPで送信します。
```shell
# パソコンBにコピー
scp psql-15.3.tar.gz user@amazonlinux_b_ip_address:/path/to/destination
```

Bでpsqlを再度インストールします。
```shell
# 圧縮ファイルを解凍
tar -xzf psql-15.3.tar.gz

# bin, lib, shareディレクトリが存在するか確認
ls bin lib share

# ファイルを適切な場所にコピー
sudo cp -r bin /usr/local/pgsql/
sudo cp -r lib /usr/local/pgsql/
sudo cp -r share /usr/local/pgsql/

# 環境変数を設定
echo 'export PATH=$PATH:/usr/local/pgsql/bin' >> ~/.bashrc
source ~/.bashrc

# インストール確認
psql --version
```
【Figma Plugins】FigJamでタイマーを使う

## はじめに
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/664dfd6e-1826-636c-dccb-f92fd208aec3.png)

FigJamのPluginを開発する際、プラグインでタイマーを使いたいと思ったことはありますか？
この記事では、プラグインでタイマーを使う方法について解説します。

## タイマーを使う
:::note info
タイマーが使用できるのは、FigJamのみです！
:::

タイマーは、FigJam で使用できる組み込みタイマーです。
`figma.timer` を使うことで、カウントダウンしてくれます。

https://www.figma.com/plugin-docs/api/figma-timer/

### タイマーを開始する
```ts
// 10秒のカウントダウンを開始する
figma.timer?.start(10)
```
引数に秒数を渡すことで、残りN秒のタイマーがスタートします。

タイマーがスタートしてない場合は、指定された秒数でタイマーがスタートします。

すでにタイマーがスタートされている場合は、残り時間を指定された秒数を設定します。
またタイマーの合計時間は、残り時間分減少し、指定された秒数分増加します。


### タイマーを一時停止する
```ts
// タイマーを一時停止する
figma.timer?.pause()
```

`figma.timer?.pause()` を使うとタイマーを一時停止することができます。

### タイマーを再開する
```ts
// タイマーを再開する
figma.timer?.resume()
```

`figma.timer?.resume()` を使うとタイマーを再開することができます。


### タイマーを停止する
```ts
// タイマーを停止する
figma.timer?.stop()
```

`figma.timer?.stop()` を使うとタイマーを停止することができます。


### 残り秒数（`readonly`）
```ts
// 残り時間を取得する
const remaining = figma.timer?.remaining
```

`figma.timer?.remaining` を使うとタイマーの残り時間を取得することができる。
また、タイマーが開始されていない場合は０を返します。


### タイマーの合計時間（`readonly`）
```ts
// 合計時間を取得する
const remaining = figma.timer?.total
```

`figma.timer?.total` を使うとタイマーの合計時間を取得することができる。
また、タイマーが開始されていない場合は０を返します。

合計時間は、タイマーが最初に開始された時間とタイマーから追加または削除された時間を足したもの、または引いたものとして定義されます。

### タイマーの状態（`readonly`）

```ts
// タイマーの状態を取得する
const state = figma.timer?.state

// 'STOPPED' | 'PAUSED' | 'RUNNING' のどれかが取得される
```

`figma.timer?.state` を使うとタイマーの現在の状態を取得することができます。
タイマーの状態は以下のとおりです。

+ `'STOPPED'`：タイマーが開始も、終了もしていない場合
+ `'PAUSED'`：タイマーが開始されたが一時停止されている場合
+ `'RUNNING'`：タイマーが開始され、一時停止されてない場合

## まとめ
この記事では、プラグインでタイマーを使う方法について解説しました。
ぜひこの記事を参考にFigJamでタイマーを使いたい場合は、この記事を参考にしてみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510
Laravelのキューを並列処理させるためのsupervisorの使い方

## はじめに
Laravelのキューは同じプロジェクト配下のジョブを実行させるのには便利ですが、並列処理を行うにはSuperVisorというプロセス管理ツールが必要です
本記事ではLaravelのキューを並列処理するためのSupervisorの基本的な知識と設定方法を詳しく見ていきます

## Supervisorのインストール方法
UbuntuやDebianではaptでインストールできます
```sh
sudo apt-get update
sudo apt-get install -y supervisor
```

バージョンが確認できればインストール完了です
```sh
supervisord -v
3.3.1
```

## Laravelのキュー設定
次にLaravelのキューを設定します`.env`を編集して、キューのデフォルトドライバーを設定します
```env
QUEUE_CONNECTION=database
```

次にキューテーブルを作成します
```bash
php artisan queue:table
php artisan migrate
```

## Supervisorの設定ファイルの作成
Supervisorの設定ファイルを作成して、Laravelのキューワーカーを管理します
設定ファイルは`/etc/supervisor/conf.d`ディレクトリに配置します

例として、`laravel-worker.conf`というファイルを作成します

```conf
[program:laravel-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /path/to/your/laravel/artisan queue:work --sleep=3 --tries=3 --timeout=90 --queue=laravel_worker
autostart=true
autorestart=true
user=youruser
numprocs=8
redirect_stderr=true
stdout_logfile=/path/to/your/laravel/worker.log

[program:laravel-worker2]
process_name=%(program_name)s_%(process_num)02d
command=php /path/to/your/laravel/artisan queue:work --sleep=3 --tries=3 --timeout=90 --queue=laravel_worker2
autostart=true
autorestart=true
user=youruser
numprocs=8
redirect_stderr=true
stdout_logfile=/path/to/your/laravel/worker.log
```
上記で`laravel_worker`と`laravel_worker2`の2つのキューを起動できます
これで並列処理が実現できるようになりました

設定ファイルの簡単な説明は下記になります
- `command`
    - キューワーカーを起動するためのコマンドです
- `autostart`
    - Supervisorの起動時に自動的にプロセスを開始するかどうかを指定します
- `autorestart`
    - プロセスが終了した場合に自動的に再起動するかどうかを指定します
- `user`
    - プロセスを実行するユーザーを指定します
- `numprocs`
    - 起動するプロセスの数を指定します
- `stdout_logfile`
    - ログファイルのパスを指定します

設定ファイルを保存したら、Supervisorを再起動して設定を反映させます
```bash
sudo supervisorctl reread (re + readですね reloadの間違いかと思いましたｗ）
sudo supervisorctl update
sudo supervisorctl start laravel-worker:*
```

## SuperVisorとLaravelキューの連携方法
SuperVisorがLaravelのキューワーカーを正しく管理しているか確認します
```bash
sudo supervisorctl status
```

## 基本的なトラブルシューティング
#### プロセスが起動しない場合
- 設定ファイルに誤りがないか確認します
- ログファイルを確認して、エラーメッセージをチェックします

#### キューワーカーがジョブを処理しない場合
- キューの設定が正しいか確認します
- `php artisan queue:work`コマンドを手動で実行して、エラーメッセージが表示されるか確認します

## まとめ
Supervisorを使用することで、キューワーカーを効率的に管理し、安定した並列処理を実現できます
これにより、Laravelアプリケーションのパフォーマンスを向上させることができます

## 補足
言語やフレームワーク単体で行いたい場合は、GolangやPythonを使用する必要がありそうですので
それぞれのアーキテクチャに合わせて技術選定を行うと良いかと思います

## 参考リンク

http://supervisord.org/

https://qiita.com/Nishi53454367/items/871614343ea77020db17

https://reffect.co.jp/laravel/laravel-ubuntu-supervisor

https://qiita.com/mokkos/items/473978ef0699df3173f5#supervisorctl-start
【応用情報技術者試験】末尾に「イノベーション」とつくワードまとめ

# 概要
応用情報技術者試験にでてくる〇〇イノベーションという名前のワードを纏めました。
イノベーションは「革新」「技術革新」という意味です。

# 目次
- [オープンイノベーション](#オープンイノベーション)
- [プロセスイノベーション](#プロセスイノベーション)
- [プロダクトイノベーション](#プロダクトイノベーション)

# オープンイノベーション
自社の技術だけではなく、他社の色々な知識や技術を取り入れ、自前主義から脱却すること。
欧米の企業と比較すると日本ではまだまだ実施率は低いが、注目度は上がっている。
2003年に、ハーバード大学教授の[ヘンリー・チェスブロウ](https://en.wikipedia.org/wiki/Henry_Chesbrough)によって提唱された。

# プロセスイノベーション
生産コストや品質の向上、時間の削減のために、仕事の進め方や順序、資源の活用方法等、製品やサービスのプロセスの全体的な構造を変更しプロセスの効率を向上させること。
「プロセス」の文字通り、過程 (process) に対して行うイノベーション。

# プロダクトイノベーション
今までに無かった新製品を開発し、導入すること。
全て新しい技術を使用する方法以外にも、既存の技術を組み合わせることでプロダクトイノベーションを生み出すこともできる。
例としては、「自動車」「パソコン」「スマホ」「回転すし」などがある。

***
**[記載した応用情報技術者試験の記事まとめ](https://qiita.com/MetroOsamu/items/550001240d76e24f505f)**
dataセクションとbssセクションの違い

初学の際にやや混乱したので、メモとして残しておく

# dataセクション 
dataセクションは、**初期化された**静的な変数やグローバル変数のために使用される。
dataセクション内で宣言された変数は、プログラムがメモリにロードされる際、指定された値で初期化され、ロードされる。
```asm
section .data 
	newline db 0xA
```

# bssセクション 
bssセクションは、**初期化されていない**静的な変数やグローバル変数のために使用される。
bssセクションは、初期化されていない変数に対して、メモリを**予約する**だけ
具体的な値はbssセクションの中に含まれない。プログラムの中で動的に値が書き換えられる。
たいていの場合、OSは予約したメモリを0で埋める。
```asm
section .bss 
	buf resb 256
```
Azure 無料アカウントについてのまとめ

# この記事について
Azureの無料アカウントについて公式サイトを確認したものをまとめます。
* 今後業務でAzureを利用する可能性がある
* 勉強として具体的にAzure Portalを操作したい
* 無料アカウントの枠内で利用したい

# Azureの無料サービスについて
Azureの無料サービスは大きく3つあり、1つ目は無料アカウントを作成することで12か月間無料で特定のサービスを利用できるものです。こちらは12か月(or 利用制限)を超えない限りは無料となります。2つ目が30日以内に使用できる`USD$200`のクレジットを取得できることです。これにより実施無料で`USD200$`まで利用できます。3つ目がもともと無料で利用できるサービスです。
### 1. 人気のサービスが最初の12か月間無料
Azureアカウントを作成した日から12か月間は特定のサービスについて毎月無料で利用できるものです。以下に主要なサービスを記載します。
* **Azure Virtual Machiens - Windows**
B1s、B2pts v2 (Arm ベース)、B2ats v2 (AMD ベース) のバースト可能 VM それぞれ **750 時間**
* **Azure Virtual Machiens - Linux**
B1s、B2pts v2 (Arm ベース)、B2ats v2 (AMD ベース) のバースト可能 VM それぞれ **750 時間**
* **Azure Blob Strage**
**5 GB** のローカル冗長ストレージ (LRS) ホット ブロック、20,000 件の読み取りおよび 10,000 件の書き込み操作
* **Azure AI 翻訳**
200 万文字 S0 レベル
* **Load Balancer**
* Standard Load Balancer で、750 時間、15 GB のデータ処理、最大 5 つのルール
* **[その他サービス](https://azure.microsoft.com/ja-jp/pricing/free-services/)**

無料アカウントを作成することでこれらのサービスが無料で利用可能です。ただし各サービスごとに利用制限がありますので超えないようにする必要があります。操作確認程度であれば全然問題ない制限かと思います。(ここについては実際に利用して見ようと思います。)
### 2. 常に無料のサービス
Azureアカウントを持っている場合は55以上のサービスを常に無料で利用できます。
これは無料アカウントに関係なくAzureアカウントさえあれば無条件で無料利用できるものです。
* **Azure SQL Database**
SQL Database サーバーレスの 1 か月あたりの使用時間 **100,000** 仮想コア秒、**32 GB** ストレージ
* **Azure Cosmos DB**
1,000 要求ユニット/秒のプロビジョニング済みスループット、**25 GB** のストレージ
* **Azure App Service**
**10 個**の Web、モバイル、または API アプリ、1 GB のストレージ (1 日あたり 1 時間)
* **Azure Functions**
**100 万回**の要求
* **Azure EventGrid**
1 か月あたり **100,000 件**の操作
* **[その他サービス](https://azure.microsoft.com/ja-jp/pricing/free-services/)**

### 3. USD200$クレジット
無料アカウント作成によって、最初の30日間に使用できる200ドルのAzureクレジットが請求通貨で付与されます。

# 無料アカウントに対して課金される可能性
無料アカウントでも以下の場合は課金されるようです。見れば当たり前のものばかりなので特に気にする必要はないと思いますが、実際に利用する場合は「超過前にアラートが出るか?」「自動でサービスが削除されるか?」なども気になったので、こちらも実際に使ってみてまた記事にしたいと思います。
* クレジットを使い果たした、または期限切れ
* 利用料が無料サービスの制限を超えている
* 無料ではないサービスを利用した
* 12か月の期間が終了した
# 参考サイト
* [Azure無料アカウントでの課金を避ける](https://learn.microsoft.com/ja-jp/azure/cost-management-billing/manage/avoid-charges-free-account)
* [Azure無料アカウントで無料サービスの利用状況を確認する](https://learn.microsoft.com/ja-jp/azure/cost-management-billing/manage/check-free-service-usage?source=recommendations)
* [無料のAzureサービスを詳しく見る](https://azure.microsoft.com/ja-jp/pricing/free-services/)
[Xcode] ヘッダーコメントをカスタマイズする方法

今回はXcodeでプロジェクトを立ち上げたり新規ファイルを追加した時に、自動的で付与されるヘッダーコメントの追加方法を備忘録として残します。

## 設定方法
まずは格納するディレクトリを指定します。

```
cd ~/Library/Developer/Xcode/UserData/
```

この階層を指定したら**IDETemplateMacros.plist**というファイルがあるか確認します。
```
ls -la
```
これで隠しファイルの確認を行います。
ここにIDETemplateMacros.plistファイルがあればそこに変更したい内容を記述し、なければこのファイルを新規に作成しコメントを追加していきます。

新規に作成する場合のコマンドは下記になります。
```
touch IDETemplateMacros.plist 
```


#### テンプレート
```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>FILEHEADER</key>
	<string>
//  ___FILENAME___
//  ___PROJECTNAME___
//
//  Created by ___USERNAME___ on ___DATE___.
//  Copyright (c) ___YEAR___ *会社名とか*. All rights reserved.
//</string>
</dict>
</plist>
```

このまま貼り付けたいところですが、直書きが難しくVSCodeをダウンロードして記述に成功しました。
私の場合はターミナル上で`open .` でディレクトリを開き、テンプレートをコピペするやり方を実施しました。
```
open .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1789173/3e03137e-a297-f1cc-8cfe-e81b67e339b4.png)

IDETemplateMacros.plistファイル上で右クリックからVSCodeを開いて上のテンプレートをコピペし保存すれば完了です。

# まとめ
今回はヘッダーコメントの変更方法を記述しました。
開発チームによって設定する内容が変わるかもですが、都度変更をかけて貰えれば良いかと思います。
Next.js周りのセットアップ ~フォーマッター完備~

# 今回扱う技術
- Next.js
- TypeScript
- ESLint
- Prettier
- Prisma
- NextAuth
- TailWindCSS

## Prettierセットアップ編

今回は、Next.js プロジェクトで Prettier を使用してコード整形を行う方法について解説します。以下の手順に従ってセットアップを行います。

### 1. Prettier のインストール

まず、Prettier をインストールします。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

```bash
npm install prettier
```

### 2. Prettier の設定ファイルを作成

次に、プロジェクトのルートディレクトリに `.prettierrc` ファイルを作成し、以下の内容を追加します。これにより、Prettier の設定をカスタマイズできます。

```json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}
```

### 3. プラグインのインストールと設定

Prettier プラグインを使用して、インポート順序を整理します。まず、必要なプラグインをインストールします。

```bash
npm install @ianvs/prettier-plugin-sort-imports
```

次に、プロジェクトのルートディレクトリに `.prettierrc` ファイルを作成し、以下の内容を追加します。

```javascript
module.exports = {
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "^(react-icons/(.*)$)|^(react-icons$)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@local/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "",
    "^@/utils/(.*)$",
    "",
    "^@/components/(.*)$",
    "",
    "^@/styles/(.*)$",
    "",
    "^[./]",
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
};
```

### 4. スクリプトの追加

`package.json` ファイルに Prettier を実行するスクリプトを追加します。これにより、コマンド一つでコードを整形できます。

```json
"scripts": {
  "prettier": "prettier --write ."
}
```

### 5. 実行

最後に、以下のコマンドを実行してプロジェクト全体のコードを整形します。

```bash
npm run prettier
```

これで、Next.js プロジェクトに Prettier がセットアップされ、コード整形ができるようになりました。Prettier を使用することで、コードの一貫性を保ち、可読性を向上させることができます。
JuliaのPlotsで、自作のColormapを作成する

# Colormap
JuliaのPlotsでは、標準でかなり多くのColormapが搭載されています。

https://docs.juliaplots.org/latest/generated/colorschemes/#Pre-defined-ColorSchemes

しかし、痒い所に手が届くColormapを使用したい際には、やはり自分で割合を設定したものを作れたら最強ですよね。

# サンプルコード
ということで、次のようなコードを作成しました。

`Colors`と`ColorSchemeTools`は別途パッケージ追加してください。

```julia
# カラー一覧
# https://juliagraphics.github.io/Colors.jl/stable/namedcolors/

using Plots
using ColorSchemeTools, Colors

color_list = (
  (0,    colorant"white"),
  (0.05, colorant"darkgreen"),
  (0.5,  colorant"green"),
  (1,    colorant"yellowgreen"),
)
my_cm = collect(make_colorscheme(
	Tuple([(ratio, (cl.r,cl.g,cl.b)) for (ratio, cl) ∈ color_list]), 
	length=100
))

X = randn(10,10)

heatmap(X,color=my_cm)
```

こちらを実行していただければ、`my_cm`という自作したColormapでheatmapが描画されるかと思います。

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269455/02c427ba-3884-1e39-5ca0-d001e6c3cc20.png)

# 簡単な説明
ミソとなるのは`make_colorscheme`という関数です。
こちらに`color_list`で指定した色、および位置を入れることで、自動でグラデーションとなったColormapを作成してくれます。

# 最後に
標準でかなり用意されているため、あまり自作する機会はないかもしれませんが、自分の色を付けられるので、結構楽しいです。
ぜひお試しいただけたらと思います。
【React】useReducerの基礎と使い所

業務でuseReducerを初めて使う機会があったので、簡単にまとめておきます。

## useReducerとは
useReducerは、リデューサ (reducer) をコンポーネントに追加するための React フックです。
※reducerとは、コンポーネントの外部に、単一の関数にすべての state 更新ロジックを集約した関数のこと。(直訳すると、reduce=減らす)

### useStateとの違い
シンプルな文字列や数値、真偽値であれば、useStateが適していますが、オブジェクトや配列、また、変更パターンが複雑な場合はuseReducerが適しています。

https://ja.react.dev/reference/react/useReducer より引用

## 基本的な使い方

```typescript
const [state, dispatch] = useReducer(reducer, initialArg, init?)
```
それぞれの値は、下記の役割となっています。
- `state`: 管理する値
- `dispatch`: reducer を呼び出すための関数
- `reducer`: stateを更新するための関数。引数にstateとactioinをとり、更新されたstateを返す。actionとは何をするかを示すオブジェクト。
- `initialArg`: state初期値
- `init`: 省略可能。state初期値を返す関数。指定されていない場合、初期 state は initialArg そのものになる

例題としてよく使われるカウンターを例にしてみたいと思います。

### stateが数値の場合


```typescript
const initialState = 0;
const [count, dispatch] = useReducer(reducer, initialState)
```

- dispatch
```jsx
<Button onClick={()=>dispatch('increment')}>+1</Button>
<Button onClick={()=>dispatch('decrement')}>-1</Button>
```
- reducer
```typescript
const reducer = (count, action)=> {
switch (action){
  case 'increment':
    return count + 1
  case 'decrement':
    return count - 1
  default:
    return count
  }
}
```

### stateがオブジェクトの場合


```typescript
const initialState = {
    countA: 0,
    countB: 0
};
const [countState, dispatch] = useReducer(reducer, initialState)
```

- dispatch
```jsx
<Button onClick={()=>dispatch('incrementA')}>+1</Button>
<Button onClick={()=>dispatch('decrementA')}>-1</Button>
<Button onClick={()=>dispatch('incrementB')}>+10</Button>
<Button onClick={()=>dispatch('decrementB')}>-10</Button>
```
- reducer
```typescript
const reducer = (countState, action)=> {
switch (action){
  case 'incrementA':
    return {...countState, countA: countState.countA + 1}
  case 'decrementA':
    return {...countState, countA: countState.countA - 1}
  case 'incrementB':
    return {...countState, countB: countState.countB + 10}
  case 'decrementB':
    return {...countState, countB: countState.countB - 10}
  default:
    return count
  }
}
```


### payloadを使う
dispatch関数側から、actionだけでなく、値を渡したいケースがあるかもしれません。payloadを使うことで実現できます。

- dispatch
```jsx
<Button onClick={()=>dispatch({type: 'increment', payload: 5})}>increment</Button>
<Button onClick={()=>dispatch({type: 'decrement', payload: 5})}>decrement</Button>
```

- reducer

```typescript
const reducer = (count, action)=> {
switch (action){
  case 'increment':
    return {count: state.count + action.payload}
  case 'decrement':
    return {count: state.count - action.payload}
  default:
    return count
  }
}
```
Quasar プロジェクトに Tailwind CSS をセットアップする


Quasar Framework をプライベートで利用することが多くなり，Tailwind CSS を導入しようとする度に検索しているので一連の作業を残しておきます．

## 環境

- Node.js: 22.4.0
- @quasar/cli: 2.4.1
- @quasar/app-vite 1.9.3

## Quasar プロジェクトの作成

Quasar Framework の [HP](https://quasar.dev/start/quick-start) 通りにインストールします．

```bash:shell
npm init quasar
```

プロジェクトの設定は以下の通りです．

- App with Quasar CLI
- Quasar v2 (Vue 3)
- TypeScript
- Quasar App CLI with Vite 2
- Composition API with <script setup>
- Sass with SCSS syntax
- features:
  - Linting (vite-plugin-checker + ESLint + vue-tsc)
  - State Management (Pinia)
  - axios
  - vue-i18n

## Tailwind CSS の導入

基本的に Tailwind CSS の[こちらのページ](https://tailwindcss.com/docs/installation)を参考にしています．

```bash:shell
npm install -D tailwindcss
npx tailwindcss init

# 必要に応じて
npm install -D \
  @tailwindcss/typography@latest \
  @tailwindcss/forms@latest \
  @tailwindcss/aspect-ratio@latest \
  @tailwindcss/line-clamp@latest \
  @heroicons/vue
```

tailwind.config.js が生成されますので，エディタで開いて編集します．

```diff_javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
- module.exports = {
-   content: [],
-   theme: {
-     extend: {},
-   },
-   plugins: [],
- }
+ export const content = ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'];
+ export const theme = {
+     extend: {},
+ };
+ export const plugins = [];
```

CommonJS module から ES module に変換し，Vue・TypeScript のプロジェクト用にセットアップしました．

次に，app.css に Tailwind CSS のユーティリティクラスをインポートします．

```diff_css:src/css/app.scss
  // app global css in SCSS form
+ @import 'tailwindcss/base';
+ @import 'tailwindcss/components';
+ @import 'tailwindcss/utilities';
```

最後に，postcss.config.cjs を編集し tailwindcss プラグインを取り込みます．

```diff_javascript:postcss.config.cjs
  /* eslint-disable */
  // https://github.com/michael-ciniawsky/postcss-load-config

  module.exports = {
    plugins: [
+     require('tailwindcss'),
      // https://github.com/postcss/autoprefixer
      require('autoprefixer')({
        overrideBrowserslist: [
          'last 4 Chrome versions',
          'last 4 Firefox versions',
          'last 4 Edge versions',
          'last 4 Safari versions',
          'last 4 Android versions',
          'last 4 ChromeAndroid versions',
          'last 4 FirefoxAndroid versions',
          'last 4 iOS versions',
        ],
      }),

      // https://github.com/elchininet/postcss-rtlcss
      // If you want to support RTL css, then
      // 1. yarn/npm install postcss-rtlcss
      // 2. optionally set quasar.config.js > framework > lang to an RTL language
      // 3. uncomment the following line:
      // require('postcss-rtlcss')
    ],
  };
```

導入作業は以上です！

## 動作確認

Tailwind CSS UI が提供している [Pricing Section](https://tailwindui.com/components/marketing/sections/pricing) の Vue 用コードを ExampleComponent.vue に貼り付けて動作確認してみました．

![tailwindcss-test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36125/6521882a-3934-4648-3f1c-b9da3918b110.png)

ちゃんと動作していますね！
【データレイク】データウェアハウスとデータレイクって何が違うんだろう？

どうもこんにちは。

最近、「**AWSではじめるデータレイク**」という本を読んでいます。今まで全く携わってきたことのない分野なので、わからないことばかりですが、知識をつけようと頑張って読んでいます。

https://www.amazon.co.jp/dp/491031301X

というのも、弊社の開発部では**Saasの知識をつけていこう**ということで、書籍の回し読みを始めています。（部長が図書委員を務めてくれています。）

# データウェアハウスとは

> 膨大なデータを整理しながら目的別に保管するDB（データベース）のこと

企業によっては、データを収集して終わりというところもあるんだと思いますが、大半の企業では**データを収集したら分析して活かす**のが主流なのではないかなと思います。

データウェアハウスは、<font color="red">**分析するためのデータ分析できる形にしてから保管する場所**</font>と考えて良いと理解しました。

# データベースとデータウェアハウスの違いは？

> DBは多方面に蓄積されたデータの集合体であり、保存されているのは生のデータです。生のデータで保管されている状態では、システムごとに形式が異なるため、分析が困難となります。

データベースは、<font color="red">**アプリケーションがユーザから取得した生のデータ**</font>を保管しています。
一方で、データウェアハウスは、前述した通り、<font color="red">**アプリケーションがユーザから取得した生のデータを分析可能な形にしたデータ**</font>を保管しています。

上記のように、**生のデータ**なのか、**分析可能なデータ**なのかがデータベースとデータウェアハウスの違いです。

# データレイクとは？

> 規模にかかわらず、すべての構造化データと非構造化データを保存できる一元化されたリポジトリです

AWSを使用されている人は、**S3**を想像してもらえればわかりやすいでしょうか。

収集したすべての構造化データ（DBに保存するようなデータ）と非構造化データ（PDFやPowerPointなど）を無作為に保存できるといっても過言ではないのではと思っています。（<font color="red">**変換前のデータも変換後のデータも分析後のデータも保存できてしまうのが良い！**</font>）

ここに保存されたデータを変換したり分析したりする機構/システムは必要になりますが、**データの収集、保存、変換、分析**をすべて、データレイクを中心として行うことができます。

# データウェアハウスとデータレイクの違いは？

違いは大きく分けて3つです。

- データスキーマを有無
- ユーザからのアクセシビリティ
- 柔軟さ

## データスキーマの有無

データウェアハウスは、分析するための形式に変換されたデータを保管します。
あらかじめデータ形式を定義する必要があるので、データスキーマが存在します。

一方でデータレイクは、形式は自由なので、データスキーマが存在しません。

## ユーザからのアクセシビリティ

ユーザが簡単にデータ分析できるのは、データウェアハウスです。
データウェアハウスはデータ形式が定義されているので、ユーザはデータを取り出すだけです。

一方でデータレイクは、データ形式が定義されていないため、自分で取得したい形式にデータを変換してデータを取り出す必要があります。

## 柔軟さ

ここでいう柔軟さとは、データ容量が逼迫したときやデータ構造に変更があったときなどのスケーラビリティのことです。

データウェアハウスは、データ形式に変換があったときにスキーマを変更する必要があるので時間がかかります。

データレイクは、容量を増やすことは容易にできます。

# 比較結果

データを取り出す時に手間がかかりますが、全体的な使いやすさだとデータレイクが適していると言えるでしょうか。

# データレイクはオンプレ？クラウド？

データレイクを使用するなら、クラウドで使用するべきだと思います。

オンプレの場合、以下の点でコストがかかります。

- スペース
- セットアップ
- スケーラビリティ
- 要件の見積もり
- 高コスト

しかし、クラウドなら以下のメリットがあります。

- すぐに始められる
- スケーラビリティ
- 低コスト

# まとめ

データを保存するなら、クラウドのデータレイクが良い！

以上
【Vite / TypeScript】環境変数の型を定義する


## Viteとは

Vite（ヴィート）とは、Vue.jsの生みの親でもあるEvan Youさんによって開発されたフロントエンド開発のビルドツールです。

開発サーバーや、ビルド速度が高速であるなどの特徴があり、Webpackに代わるJavaScriptモジュールバンドラーとして注目を集めています。

## 環境変数を定義

Viteでは、プロジェクトのルートディレクトリに `.env` ファイルを作成することで、環境変数を設定することができます。

重要なルールとして、定義する環境変数には `VITE_` というプレフィックスを付与する必要があります。
```bash:.env
VITE_API_URL=https://example.com/api
```

アプリケーションから環境変数を参照する際には、`import.meta.env.環境変数名` という具合に参照します。

```typescript
const apiUrl = import.meta.env.VITE_API_URL;

console.log(apiUrl); // https://example.com/api
```

## 環境変数の型を定義

Viteでは、`src/` ディレクトリ配下に `vite-env.d.ts` というファイルを定義することで、環境変数に型を付与することができます。

これにより型補完と型チェックが有効になります。


```typescript:src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  // ...ここに追加していく
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
```
Next.js周りのセットアップ ~Node環境構築編~

# 今回扱う技術
- Next.js
- TypeScript
- ESLint
- Prettier
- Prisma
- NextAuth
- TailWindCSS

## Node.jsのセットアップ

### NVM（Node Version Manager）のインストール

NVMは、複数のNode.jsバージョンを簡単にインストール、管理、切り替えるためのツールです。以下の手順でNVMをインストールします。

1. NVMをインストールするために、以下のコマンドをターミナルに入力します。
   ```zsh
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
   ```

2. NVMが正しくインストールされたか確認するために、以下のコマンドを実行します。
   ```zsh
   command -v nvm
   ```
   エラーが表示されなければ、NVMのインストールは成功です。

### Node.jsのインストール

NVMを使ってNode.jsをインストールします。ここでは、最新の安定版Node.jsをインストールし、デフォルトバージョンとして設定する方法を説明します。

1. 最新の安定版Node.jsをインストールします。
   ```zsh
   nvm install stable --latest-npm
   ```

2. インストールしたNode.jsをデフォルトバージョンとして設定します。
   ```zsh
   nvm alias default stable
   ```

3. Node.jsが正しくインストールされたか確認するために、以下のコマンドを実行します。
   ```zsh
   node -v
   ```
   Node.jsのバージョンが表示されれば、インストールは成功です。

### npmのインストール確認

Node.jsと一緒にnpmもインストールされるはずです。npmが正しくインストールされたか確認するために、以下のコマンドを実行します。

```zsh
npm -v
```
npmのバージョンが表示されれば、インストールは成功です。
未経験エンジニアにとって資格を取得する意味

# 未経験エンジニアにとって資格を取得する意味

## はじめに
　こんにちは！都内でエンジニアとして勤務している川北と言います。エンジニア経験としては、1年と半年が経過したところになります。今回は、Oracleの資格を取得し、次の応用情報技術者試験まで学習スケジュール的に時間があるので、資格学習の意味について私なりに考えましたので、投稿しようと思いました。主に、未経験・経験が浅いエンジニアを対象として記載しています。私もまだまだ浅いので一緒に頑張りましょう！
資格学習の心構えとして参考にしていただければと思います。
資格取得のための学習方法なども今後投稿できたらなと思っています。

### どんな資格を取得した？
以下の資格を2024年の3月25日くらいから7月7日の期間で学習して取得しました。

・情報セキュリティマネジメント
・基本情報技術者
・JSTQB FL
・Oracle　DBA Silver
・Oracle　DBA Silver
・Oracle　DBA Gold

正直かなり学習しました。大変でした。資格を取得した主な目的は、「未経験者が資格を取得する意味」
に後述します。特にOracle DBAの資格をたくさん取りました。理由は、データベースについて詳しく学びたかったからです。
現場ではMySQLを使用していたのですが、意外とSQLの知識をみんな持っていないような気がしました。そこで、SQLを誰よりも詳しくなれば、エンジニアとして価値を見出せるんじゃないか？と考えました。
また、「SQLの学習をするなら、どうせならデータベースの学習もやっておくかぁ」というモチベーションから、Oracle DBAの資格をまずは取得しようと思いました。

### 未経験者が資格を取得する意味
私は、未経験者や経験が浅いエンジニアの方は、IT資格を取得しておいた方がいいと考えます。
未経験者にとって、資格を取得する目的は、結論以下になると考えるからです。

:::note info
・自信がつくため
・自分の望んだ現場にアサインできる可能性を上げるため
・興味関心を広げるきっかけづくりのため
・体系的な知識が身に付くため
:::

１つ目と２つ目が特に大切であると私は考えています。
最初の現場では、「何をしているのかがわからない」ということを必ず経験します。私もそうでした。とても不安になるのです。
なので、不安を取り除く＝自信をつけるために資格学習を行うことをおすすめします。私は資格を取得することは「身だしなみを整えること」と類似していると理解しています。

また、現場を選択できる可能性を上げることができます。これ結構大事だと思っています。理由は、やりたくない仕事をやらないためです。
SESの場合を想定して記載します。やりたくない仕事にアサインしてしまう原因としては、「顧客先に何ができるのか？」を明確に伝えることができないからだと思います。もちろん、アサイン先は、その時点の状況も少なからずあるのですが、少しでもいい現場へアサインできる可能性を上げるためにも資格取得することは意味のあることだと思います。
会社によっては、ソフトウェア開発と謳っていて、開発を行いたく転職したのに、蓋を開けてみればコールセンターの対応をさせられていたみたいなケースもあるということを友人から聞きました。
どうせなら、自分で学習した知識や技術を活かせる仕事をやる方が、意味がありますよね。

また、報奨金を得ることができるから資格を取得するというのは、資格学習を始めるきっかけとしてはアリだと思います。（私もそうです笑）

### 資格学習を行う上での大切な心構え
仕事では「課題解決能力」や「問題発見能力」の方が資格よりも重要です。
資格を取得すると、「年収が上がる」とは考えない方がいいです。年収は「仕事に対する対価」として支払われるものです。そのスタンスでの学習は危険ですので避けた方がいいです。
私も肝に銘じているのですが、資格を取得することに慣れると　、「たくさん取得したから賢い」とか「価値がある」と勘違いしがちです。確かに、高レベルの資格などを取得することは、実務でも役立つものもあります。実際、会社によっては資格取得による給料アップも制度してあるみたいです。しかし、会社側からの視点で言えば、資格を取得しても純利益は０です。まちがった解釈をしないようにしましょう。

### 他業種とエンジニアを比較したときの資格取得の重要性
「資格を持っていることで評価を得られるか」という観点で言うと、他業種よりもエンジニアの資格の方が評価を得やすいと思います。理由は、エンジニアには専門的なスキルが必要だからです。
ただし、一定の評価を得るには、高度な資格になってきます。だれでも取れる資格には期待できないです。
ここで言う「一定の評価」とは、２割程度くらいだと考えています。上記の注意点のなかでもお伝えしましたが、資格は補助的な役割でしかないので過度に期待するのはやめましょう。


### 学習をするうえで行なった方がいいこと
資格学習をする際には

<b>おおまかな学習スケジュールを立て、受験する日を先に申し込んでおくこと

をお勧めします。

ここで設定する受験日は、「ちょっと早いんじゃないかなぁ」と不安になるくらいがいいです。
期限を設けないとシンプルにだらけます。期限を設けることで戦略を作らざるをえない環境を設けることができます。決められた期限内に成果を上げるための戦略を計画することは現場でも役立ちます。
より適切なスケジュール設定を行うことができるようになります。私はスケジューリングが苦手でしたが、この活動を通して、マネジメント能力をつけることができたと実感しています。

具体的に実施したスケジューリング等の詳細は別記事に投稿予定です。こちらでは簡単に説明だけしておきます。

## おわりに
未経験者の方を中心に参考になればなと思い作成に至りました。今後も初学者の方を中心に投稿して行きたいと思いますのでよろしくおねがいします。

ありがとうございました！