OmniAICreator/Qiita-1.07M huggingface dataset:
いまさらだけど、XAMPPで複数バージョンを一つのPCで切り替えて使う

# XAMPPって

XAMPPは、最も人気のあるPHPの開発環境です。
Apache + MariaDB + PHP + Perl がインストールできます。
Windows版、Mac版、Linux版があります。ここでは、Windows版を使って環境を作ります。

公式サイトは、[こちら](https://www.apachefriends.org/jp/index.html)

# いまさら？
すでに四半世紀を超えた経験の中で、PHPはほぼ初めて（むかーしソースを呼んだ程度）です。
これから関わるプロジェクトで、PHPを使っているということだったので、環境を作ろうと思った次第です。

ただ、複数の製品を提供していて、PHPのバージョンも異なるようなので、どうやったらきれいな環境を作れるかなーと思って、環境を作ってみました。

# 手順

## XAMPPをダウンロード

①公式ページのこちらのリンクを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/10db6756-f0b1-dc0e-a70f-300f6f694d3f.png)

②以下の画面の「More Downloads」リンクを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/28a356c9-93ff-2233-32c2-e0f518bb2544.png)

③「XAMPP Windows」のリンクを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/7aa943e6-8080-4f90-2c4e-195ae7bda8e5.png)

④使いたいバージョン番号のリンクを選択。今回は、5.6.40を選びました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/87329621-c085-c8bb-cc91-b273e1a53b48.png)

⑤xampp-portableで始まるZipファイルをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/24a7d628-7aa0-1aad-8fdd-c00f385202f4.png)

## ダウンロードしたファイルを解凍し、適当な場所に配置

① 解凍できたら、適当な場所に配置します。今回は、「C:¥xampp¥xampp5.6」としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/8a40f69d-c1ba-1eab-6c98-2a3f48a62aec.png)

② setup_xampp.batファイルをダブルクリックして実行
XAMPPの中にあるphp.iniなどを書き換えてくれます。


これでインストールまで完了

## XAMPPのコントロールパネルを起動する
① フォルダ内の、「xampp-control.exe」を見つけてダブルクリックでコントロールパネルを起動してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/52617fdb-d2d3-b5a6-4123-ad211957f297.png)

②以下コントロールパネルです。必要なサービスのみ起動しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/f99055f4-c662-0798-b0e0-ec5b6be7b5b7.png)

③Apacheを起動してみる
Apacheを起動するとこんな感じに表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/cb2eab21-426a-17ab-fb3c-b124a407e6d7.png)

④localhostに接続してみる。
ブラウザで、[http://localhost](http://localhost)にアクセスしてください。以下の画面が表示されれば、うまくいっているかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/549b070e-d7e7-fe3d-089d-80c82b4aef3c.png)

# さいごに
とりあえず、これで一つのバージョンで起動できる環境は整いました。
必要なバージョンのファイルをダウン―ドし、解凍、配置、コントロールパネル起動をやれば、よいかなと思います。ただし複数バージョンは同時起動できないので、きちんと停止した状態で、コントロールパネルから起動しましょう。
あなたの DCG (Discounted Cumulative Gain) 、間違ってませんか？

### はじめに
コードレビューの際にランキング評価指標の DCG (Discounted Cumulative Gain) の実装ミスに出会いました。
これは実装時に参考にした記事に間違いがあったことが原因でした。
そこで試しに「DCG　実装」などで検索してみたところ、間違った実装例を記載している記事がそこそこ存在していることがわかりました。
評価指標をもとに改善を行っていくため、評価指標計算のミスは最終的な成果物の品質低下につながります。
今回はこのありがちで危険なミスについてまとめようと思います。

### DCG とは
ランキングを評価するための指標のひとつです。
あるランキング (コンテンツのリスト) について、より上位のコンテンツで利得 (クリック etc.) が得られることをよしとする、といったものとなっています。

詳細な定義は以下のようなものとなっています。

> DCG（減損累積利得、げんそんるいせきりとく、Discounted cumulative gain）は、ランキング品質の評価指標である。情報検索において、DCG はウェブ検索エンジンのアルゴリズムや情報検索に関連したアプリケーションの適合性に対する有用性を評価するために使用される。DCG は検索エンジンの検索結果に含まれる文書の適合性を段階的に評価することで、検索結果リストにおける文書の位置（順位）によって、その文書の有用性、すなわち利得を測定する。この利得は、結果リストの上位から下位に向かって累積され、下位の文書ごとに各結果までの利得が割り引かれる[1]。

```math
DCG_p = \sum_{i=1}^p \frac{rel_i}{\log_2(i+1)} = rel_1 + \sum_{i=2}^p \frac{rel_i}{\log_2(i+1)}
```

cf. [Wikipedia - DCG](https://ja.wikipedia.org/wiki/DCG)

### よくあるミス
よくある実装ミスは以下のようなものとなっています。
実際に算出される DCG も記載しています。
ランキングの 1 番目をクリックした場合と 2 番目をクリックした場合で評価値が同じですが、これは違和感がありますよね。
```python
import numpy as np


def calc_dcg(gains: list[float]):
    dcg = gains[0]
    for i in range(1, len(gains)):
        dcg += gains[i]/np.log2(i + 1)
    return dcg


# ランキングの 1 番目をクリックした場合の DCG を計算
gcg1 = calc_dcg([1.0, 0.0])
print(gcg1)
# -> 1.0
# ランキングの 2 番目をクリックした場合の DCG を計算
gcg2 = calc_dcg([0.0, 1.0])
print(gcg2)
# -> 1.0
```


### 正しい実装
正しい実装は以下のようなものとなっています。
間違った実装例で `np.log2(i + 1)` となっていた箇所が `np.log2(i + 2)` となっているのがポイントです。
こちらも実際に算出される DCG も記載しています。
こちらは 「ランキングの 1 番目をクリックした場合の評価値」 > 「2 番目をクリックした場合の評価値」 となっており、意図した通りの評価になっていそうですね。
```python
import numpy as np


def calc_dcg(gains: list[float]):
    dcg = gains[0]
    for i in range(1, len(gains)):
        dcg += gains[i]/np.log2(i + 2)
    return dcg


# ランキングの 1 番目をクリックした場合の DCG を計算
gcg1 = calc_dcg([1.0, 0.0])
print(gcg1)
# -> 1.0
# ランキングの 2 番目をクリックした場合の DCG を計算
gcg2 = calc_dcg([0.0, 1.0])
print(gcg2)
# -> 0.6309297535714575
```

### なぜこのミスが起こるのか
主に 2 つあるのかと思います。
まず 1 つは、数式が 1 オリジンなのに対して実装時のリストのインデックスが 0 オリジンである、というところではないでしょうか。
これは今回に限らずやりがちなミスなので気をつけたいですね。
もう 1 つはそもそも参照している定義式が間違っている、というのがあるかと思います。
記事いくつか眺めていたところ、以下のように DCG を定義している場合がありました。
```math
DCG_p = rel_1 + \sum_{i=2}^p \frac{rel_i}{\log_2(i)}
```
この数式をもとにするとやはり上で紹介した間違った実装になります。

### おわりに
ランキング評価指標としてよく使用される DCG について、ありがちな実装ミスを紹介しました。
評価指標の間違いは最終的な成果物の品質低下につながるので注意したいですね。
paiza.ioでelixir その271

# 概要
paiza.ioでelixirやってみた。
コンパイラ、見つけたのでやってみた。
lexerやってみた。

# 参考にしたページ

https://qiita.com/sonota88/items/fefef95264320a903300



# 投入したコード

```
func main(){
  var a = 1;
  while (2 == 3) {
    set a = a + 4;
    set a = a + 5;
  }
}

```

# 実行結果

```
[1, "kw", "func"]
[1, "ident", "main"]
[1, "sym", "("]
[1, "sym", ")"]
[1, "sym", "{"]
[2, "kw", "var"]
[2, "ident", "a"]
[2, "sym", "="]
[2, "int", "1"]
[2, "sym", ";"]
[3, "kw", "while"]
[3, "sym", "("]
[3, "int", "2"]
[3, "sym", "=="]
[3, "int", "3"]
[3, "sym", ")"]
[3, "sym", "{"]
[4, "kw", "set"]
[4, "ident", "a"]
[4, "sym", "="]
[4, "ident", "a"]
[4, "sym", "+"]
[4, "int", "4"]
[4, "sym", ";"]
[5, "kw", "set"]
[5, "ident", "a"]
[5, "sym", "="]
[5, "ident", "a"]
[5, "sym", "+"]
[5, "int", "5"]
[5, "sym", ";"]
[6, "sym", "}"]
[7, "sym", "}"]




```

# 成果物

https://paiza.io/projects/ETgJhD3Gp2Lj8JmQV1APNQ

以上。
AWS DMS Serverlessのログが出力されない

## 問題
* AWS DMS Serverlessを作成し、ログ出力を有効にするだけでは、CloudWatch Logsへの書き込み権限がなく、Log Groupが作成されない模様
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2220364/45a4d14a-187b-9c79-e941-e75cf3ba1a5a.png)

## 対策
* 以下のIAMロールの作成が必要となる。
* 特にアタッチする必要はなくIAMロールが存在していれば、ログ出力されるようになる。

|設定項目|値|
|-|-|
|ロール名|dms-cloudwatch-logs-role|
|ポリシー名|AmazonDMSCloudWatchLogsRole|
|信頼ポリシー|AWSサービス（AWS DMS）|

:::note warn
ロール名は固定値で設定する必要がある
:::


　
参考ページ：

https://repost.aws/ja/knowledge-center/dms-cloudwatch-logs-not-appearing
ローカルリポジトリ作成する時の…or create a new repository on the command lineについて調べてみた

# …or create a new repository on the command lineとは？

```bash:bash
echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/new-repository.git
git push -u origin main
```
ローカルリポジトリを作成する時に
気軽にコピーして使っている一連のコマンドについて
何がどういう役割をしているのか自分なりに調べてみました。


```bash:bash
echo "# test" >> README.md
# #testでREADME.mdファイルに書き込む内容
# >> README.mdはechoの出力をREADME.mdファイルに追加するリダイレクト
```
```bash:bash
git init
# 現在の作業ディレクトリに空のGitリポジトリを作成
# 新しいリポジトリに必要なGitメタデータが全て格納される
```
```bash:bash
git add README.md
# 変更をステージングエリアに追加
```
```bash:bash
git commit -m "first commit"
# ステージングエリアに追加された変更をコミットする
```
```bash:bash
git branch -M main
# git branch -Mでブランチの名前を変更
# 近年デフォルトブランチがmainを推奨しているので、ここでブランチ名をmainに変更している
```
```bash:bash
git remote add origin https://github.com/your-username/new-repository.git
# git remote addでローカルリポジトリにリモートリポジトリを追加
# originはリモートリポジトリのデフォルトの名前
```

```bash:bash
git push -u origin main
# git pushでローカルの変更をリモートリポジトリにプッシュ
# -uオプションで、リモートリポジトリと対応するブランチを設定
# この場合はmainブランチの上流がoriginリポジトリと設定している
# 次回のgit pushコマンドと記述すれば良く、ブランチとリモートの対応を簡略化出来る
```

これを自分で書くのは面倒くさいので
デフォルトで準備して貰っているのは大変有り難いですね😆
また1つGitHubについて理解が深まった(気がします）。


:::note warn
警告
初学者のため、誤りがありましたら大変申し訳ありません。
その際はご指摘･アドバイスいただけると幸いです。
:::
初投稿【Swift学習備忘録1】

こんにちは

Swiftの勉強を始めてみようと思い、なにかしらの形で履歴を残せないかと思いQiitaを始めて見ました

## 自己紹介
20代の駆け出しエンジニアです
趣味はウィスキー集め、筋トレ、テニスです

## Swiftを始める理由
iPhoneをずっと使ってきたので、iPhoneになにかしらのアプリを作っていれてみたいなと思ったことがきっかけです
Swiftで簡単なアプリを何個か作って自分用の備忘録にしてみようかなと思っています

## 最初に作るアプリ
最初に作ろうと思っているアプリは時計で現在の時刻を表示するアプリです
デザイン等はのちのち考えるつもりですが、まず目標は時刻を画面に表示することから始めようと思います

次回はソースの投稿をしてみたいと思います
Haskellちょっと勉強したのでモナドについてまとめてみた

# はじめに

最近Haskellをちょっと勉強してみたので、モナドについて解説してみた記事です。

# モナドって何？

Haskellはいわゆる「純粋関数型言語」で、IOや状態を変更するなど「副作用」のある処理を許さないという特徴があります。
そのおかげで参照透過性を高められることができるのですが、一般的な手続き型言語で使われるような処理が使わず不便なので、「モナド」と言われる処理を使うことでこの問題を解決しています。

## モナドを使った例

まず簡単なモナドの例を、`Maybe`と呼ばれるモナドを使って説明してみます。
このモナドは、Rustでいう`Option`のようなもので、返り値を`Just`と`None`の型に包むことでnullableな値のハンドリングをしやすくしています。

例えばこのような感じです。
```haskell
safeDivide :: Float -> Float -> Maybe Float
safeDivide _ 0 = Nothing
safeDivide x y = Just (x / y)

safeRoot :: Float -> Maybe Float
safeRoot x
    | x < 0     = Nothing
    | otherwise = Just (sqrt x)

safeOperation :: Float -> Float -> Maybe Float
safeOperation x y = safeDivide x y >>= \quotient -> safeRoot quotient
```

これを使うと、たとえば
```haskell
ghci> safeOperation 4 2
Just 1.4142135
```

```haskell
ghci> safeOperation 4 0
Nothing
```

```haskell
ghci> safeOperation (-4) 2
Nothing
```

のように表現できます。

ここで重要なのは`>>=`演算子で、これは`safeDivide x y`の計算結果を`\quotient -> safeRoot quotient`にbindしています。つまり、

`Maybe a`型の値と `a -> Maybe b` 型の関数がある場合、`>>=` 演算子を使用してこの関数を `Maybe a` 型の値に適用し、`Maybe b` 型の新しい値を得る。

という動作をしていることになります。

`>>=`を使うとbindを数珠繋ぎにできるのですが、数珠繋ぎが増えた場合可読性が落ちてしまいます。そのため、Haskellでは`do`構文が用意されています。これを使うと、モナドの処理を手続型のように書くことができます。

これを使って、safeOperationを書き直してみましょう。

```haskell
safeOperation :: Float -> Float -> Maybe Float
safeOperation x y = do
    quotient <- safeDivide x y
    safeRoot quotient
```

ここで、bind演算子は`<-`を示しています。手続型のように、わかりやすくなったことが見て取れると思います。

# モナドを作ってみる

では、`Maybe`モナドを例に挙げて、モナドを自分で作ってみましょう。Haskellには`型クラス`と呼ばれるinterfaceの様なものが存在しているので、これを使ってモナドを作ることができます。

モナドの型クラスは以下の通りです。

```haskell
class Monad m where
  (>>=) :: m a -> (a -> m b) -> m b
  return :: a -> m a

  (>>) :: m a -> m b -> m b
  m >> n = m >>= \_ ->  n

  fail :: String -> m a
  fail = error
```

ここで重要なのは`(>>=)`と`return`で、`(>>=)`がbind演算子を表しています。（`(>>)`と`fail`の説明は重要ではないので省略します。）
`return`は値をモナドに包むための処理です。これを使うと、以下の様なことができます。

```haskell
-- 値を Maybe コンテキストに入れる
example :: Maybe Int
example = return 5
```

これを実際に実装してみましょう。

```haskell
instance Monad Maybe where
  Nothing >>= f = Nothing
  Just x  >>= f = f x
  return x = Just x
  fail _ = Nothing
```

これをみると分かる通り、`Nothing`をbindすると`Nothing`を返し、`Just x`をbindするとモナドの中身を関数の引数に渡すことができます。
また、returnを使うと値をモナドの型に包んでいることがわかりますね。

# おわりに

駆け足でモナドの解説をしてみたのですがいかがでしょうか？
かなり端折っているので説明不足なところも多いのですが、なんとなくの感覚は掴めるのではないかと思います。

またモナドにはIOやReader, Writer, State等色々な種類があり、それぞれで違う役割を持っているのでそれぞれ調べてみると面白いと思います。（なんでもできるFreeモナドというものもあるそうなのですが、自分はよくわかっていません）

# 参考

- [Learn You a Haskell for Great Good! - A Fistful of Monads](http://learnyouahaskell.com/a-fistful-of-monads#the-monad-type-class)
- [ウォークスルー Haskell - モナド](http://walk.northcol.org/haskell/monads/)
Darkmode.jsでkatexの数式が消える問題

## 問題

Darkmode.jsは便利だが、katexによる数式は考慮されていないためかフォントの色が変わらず暗闇に消えてしまう。

## 解決方法

CSS style sheet に次を追加して darkmode のときの数式の `color` を指定すればよい。

```css
.darkmode--activated span.katex {
    color: white;
}
```
日本語のプログラミングが世界を変える（再掲）

ユーザとして日本語プログラミングを推奨する代わりに書籍を紹介します。
「日本語の科学が世界を変える」松尾義之著　筑摩選書
著者は日経サイエンス元編集長で科学ジャーナリスト。

ノーベル賞を輩出している日本の科学者達は何語で考えているのか？

英語、日本語、いやいや数学、物理、化学、生物なのでそれは無関係？
著者は、日本の科学者の優秀さは「日本語」にあるのではないかという仮説を持っています。しかし科学の世界でも特異な考え方であるらしいです。

さてプログラミングの世界では？
---------

6年前の記事なのでリンクできないようで再掲します。
queue (9) 係 Python3編

https://paiza.jp/works/mondai/array_utilization_primer/array_utilization_primer__queue


```py
N = int(input())
A = []
for _ in range(N):
    tmp = input()
    if tmp == 'out':
        if len(A) != 0:
            A.pop(0)
    else:
        flag,a = tmp.split()
        A.append(a)

print(*A,sep="\n")
```

ただし、下記のようにする場合、
elseだとエラーが発生するので、ちゃんとelifで指定しないとだめ。

```py
N = int(input())
A = []
for _ in range(N):
    tmp = input().split()
    if tmp[0] == "out" and len(A) > 0:
            A.pop(0)
    elif tmp[0]== "in" :
        A.append(tmp[1])

print(*A,sep="\n")

```
VSCodeのGraphvizのプラグイン作った

# 背景
たまに激重になったりExportが出来なかったり
使い勝手の良いプラグインが見当たらなかったので
自分で作ってみた。

# 作ったもの
インストール済みのdotコマンドを呼ぶだけ

https://github.com/tyano461/lightweight-graphviz


コマンドはこんな感じ(上２つ)
![lwgraphviz_command.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2383810/bdb46386-1935-c1c1-b9bf-5c7dd9c73f9e.png)

Preview
![lwgraphviz_preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2383810/94382729-908c-8c90-2754-0d19bccb7aba.png)


# 課題
1. ~~dotコマンドがパスに無いと動かないので設定ファイルで変えられたら良いな。~~
設定ファイルで変更出来るようにした
2. ~~publishしてマーケットプレイスからダウンロード出来るようにするやり方はわからない。~~
[マーケットプレイス](https://marketplace.visualstudio.com/items?itemName=tyano462.lightweight-graphviz)に置きました。
3. ~~Windowsでは動かない気がする~~(未検証)。
Windows対応はしたけどWindowsPCが無いので動くかどうかはわからない。



# その他
一番ダウンロード数の多かった[tintinwebの](https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview)は自前で変換してるっぽい
そりゃ重くもなるわな
タスクバーの時計の表示形式を変える

# はじめに
今日何曜日だっけ・・・ってなることがたまにあり、タスクバーの時間表示をクリックしてカレンダーを表示して曜日の確認を行ってました。
地味にクリックすらめんどくさくなりタスクバーに表示されている時計の表示形式を変更することにしました。

# 設定
1. コントロールパネルより「日付、時刻、数値形式の変更」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519878/a0d051a3-1179-8010-5e44-0e24822f5f62.png)

2. 追加の設定をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519878/c8133468-9ceb-3a36-ce42-80fc5f51859a.png)


2. 日付タブを選択し「短い形式」の値を変更する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519878/fb7cb888-00f9-73ea-f538-10d5e06af331.png)



# 結果
下記の記載に変更すると
```
yyyy/MM/dd '('ddd')'
```
日付の後に（曜日）の記載になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519878/1f35912e-dfa1-dd54-fce0-2640fb0c5683.png)

設定用のウインドウに例がいくつかあるので好みの設定にしてもいいかもしれません。

# 注意点
この設定を行うことでカレンダー系の入力項目にも曜日用の「（）」が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519878/30d025b8-f78f-97c2-e1de-dc08692c8306.png)


手動でテストするときなどに入力項目変になってる・・・等なった場合はこの項目を初期値にしてみるといいかも？
VPC Latticeを使ってみたお話し

[3-shake Advent Calendar 2023](https://qiita.com/advent-calendar/2023/3-shake) の24日目です。

AWSにて割と新しめのサービスであるVPC Latticeに触れる機会があったので、サービスのコンセプトや使う上での考え方やユースケースについて感じたことをまとめてみます。

あるあるなユースケースで使えそうだなという印象を持ったので、選択肢のストックとして蓄えておく意味でも少し役に立つかなと思います。

## サービス概要
VPC Latticeはアプリケーションレイヤーにおけるネットワーキングサービスで、いわゆるサービスメッシュを提供するようなプロダクトです。

以下のような機能を提供してくれます。
* アクセスログの収集などのロギング
* サービス間のモニタリング
* サービス間のアクセス制御(IAMベース)
* 通信における暗号化

## ユースケース
サービスメッシュにおける各サービスがVPC単位であるときに、これらを集約して疎通性を確保・アクセス制御したい時に使うことになると思います。AWSアカウント跨ぎも然りです。

これにより以下のようなメリットがあると考えます。
* VPC(AWSアカウント)単位で開発組織・運用組織を綺麗に分割できる
* これらの複数開発組織に横断したインフラ部隊が中央集権的に管理しガバナンスを効かせることが出来る

## 登場人物
まずLattice特有の登場人物についてです。

- Latticeサービスネットワーク: サービスメッシュのコントロールプレーンに当たるリソース
- Latticeサービス: サービスメッシュの各々のサービスに当たるリソース
    - この人に向けてリクエストが流されていく
- Latticeターゲットグループ: Latticeサービスのバックエンドに当たるリソース
    - ほぼELBのターゲットグループと同じ概念
    - EC2インスタンス・ALB・Lambda・IPがターゲットとして選べる
- VPC
    - とVPCに作られた各々のシステム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532842/5a36939c-0ba4-d80e-c6b2-25dbc0864487.png)
引用: https://docs.aws.amazon.com/ja_jp/vpc-lattice/latest/ug/what-is-vpc-lattice.html


## 俺の考えた基本的な設計方針
VPC Latticeを使う場合、おそらくベースとなる構成はこんな感じなんだろうなというのを図示してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532842/f09f8bd9-3a4e-7ea8-7f35-9566a5b8dda6.png)

いわゆるサービスメッシュのコントロールプレーンに該当するLatticeサービスネットワークは別アカウントとして切り出します。これは共有リソースと言うこともできると思うので、こういった形にしました。
また、これはインフラ部隊のような組織横断チームが管理するとして、Latticeサービスの繋ぎ込みに関する仕事やアクセス制御のも担う形を想定しています。
これであれば、ClientやServerのAWSアカウントで開発している方々は自分たちの持っているシステムの開発に集中できて責任分界も綺麗であると考えています。

## 所感
一言で言うと選択肢として持っておけるといいなと思っています。
定量性は私の中でもまだないですが、ある程度大きなシステム規模を将来的に見据えている、すでに規模が大きくて煩雑であるというシチュエーションでこそ効果を発揮する気がします。そんな観点も踏まえて技術選定を行なっていくのが良いのかもしれないという今のところの感想です。

## 参考
* https://docs.aws.amazon.com/ja_jp/vpc-lattice/latest/ug/what-is-vpc-lattice.html
内定 Python3編

https://paiza.jp/works/mondai/array_utilization_primer/array_utilization_primer__offer

考え方あってる。。。？と思ったけど
答えも同じだったのであっているようだ
しかし合格者から辞退者を引くとマイナスにならないはずだが
この答えを見るとおそらくマイナスになることもあるってことだろう。

なぜなのか？
合格であっても不合格であっても辞退者は出るということだ。
となると、辞退者を引くのはOKで、どっちみち合格者数より辞退者数が上なら
結局は合格者０ってことになるのであってるのか。
なるほど。

```py
N,K,M = map(int,input().split())
A = [int(input()) for _ in range(N)]
Ans = 0
for i in A:
    if i >= K:
        Ans += 1

#合格者から辞退者を引く
Ans -= M

#マイナスになる場合は０
if Ans < 0:
    Ans = 0
    
print(Ans)

```
傾斜配点 Python3編

https://paiza.jp/works/mondai/array_utilization_primer/array_utilization_primer__exam


今まで学んだことを活かせてほっ。
ちなみに答えの方は、maxを使わない方法だった。

```py
N = int(input())
M = list(map(int,input().split()))
A = []
for i in range(N):
    A.append(list(map(int,input().split()))) 
    
B = []
sum = 0
for i in range(len(A)):
    for j in range(len(A[i])):
        sum += (A[i][j] * M[j])
        
    B.append(sum)
    sum = 0
    
print(max(B))

```
中学生の私がプログラムを学んだ方法

どうもAtsu1209です
今回は友達に「どうやってプログラム勉強したのか記事に書いてほしい」
といわれて確かに書いてみたら良さそうと思ったので
中学生の私がプログラムを学んだ方法を書いていきます。

# Progate
勉強方法は至ってシンプルです。
まずプログラミング学習サイト Progate で勉強しました。
Youtubeを見てたら「Progateおすすめ!」と言っている動画を見つけました。
そこで最初に私はProgateでHTMLを学び始めました。


リンク↓

https://prog-8.com/

その後、無料レッスンを終えて自分でサイトを10個くらい作ってみて、
作り方をなんとなく覚えてきました。

そのあと、ProgateでJavaScriptも勉強しました。
# Youtube
もっと勉強しようとしたYoutubeを見てたら、
"ラムダ技術部"というチャンネルを見つけて見てみたら、
いつの間にかレベルが上っていました。
この方の動画はすごく勉強になりました。

リンク↓

https://www.youtube.com/@lambdatech

# ChatGPT
ちょっと高度なコードをChatGPTに書いてもらって、
"そのコードを詳しく説明して"ということで、どのような構文が
どのような動きをするのかを覚えました。
ChatGPTすごく有能

リンク↓

https://chat.openai.com/

# 成長
こんな感じで勉強をしていって、約1年でホームページが作れるように
なりました。

リンク↓

https://atsu1209.github.io/home

# 最後に
学ぶときには、難しく考えすぎずに、
「この構文でこういう動作をする」
というのを覚えていくことで簡単に学べると私は思います。
特に学生でプログラミングを学ぶときは、"詰め込む"ではなく
"楽しむ"が大切だと思うのでぜひトライしてみてください
WEB 版でも日本語表示にする Postman

右上にある、SettingsアイコンをクリックしてSetteingsを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/d536088f-e36b-f2dd-4a48-f37b492f95a1.png)

スクロールしてください。言語の部分で「日本語」を選択して右上の×をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/30790518-fdb8-d57f-33fe-2373a9207dd8.png)

これで日本語表示になります。素晴らしい
Nuxt3 / Vue 3 – clickイベントに複数の関数実行を直接記述する ( @click="func1(), func2() " ) 

# 例

カンマまで区切れば良いようだ
引数のカッコもつけること

```vue
<button @click="func1(), func2()">DO</button>
```

# NG例 1

引数のカッコを付けないとうまく動かない

```vue
<button @click="func1(), func2()">DO</button>
```

# NG例 2

セミコロンでも区切れるようだが

```vue
<button @click="func1(); func2()">DO</button>
```

フォーマッタで以下のように整形されてエラーが生じてしまう

```vue
  <button
    @click="
      func1()
      func2()
    "
  >
    func
  </button>
```

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
Outlook 向けの Add-in をつくってみた

# やりたいこと
業務で Outlook のアドインを検証する機会があり、いろいろとつまづいたので今後やる方向けに記事にしようと思います。内容としては、[提供されているチュートリアル](https://learn.microsoft.com/ja-jp/office/dev/add-ins/tutorials/outlook-tutorial) を進める上での操作方法がメインです。

# 環境
- Windows11 Pro
- Powershell (Ver.7 系)
    - デフォルトでインストールされているのは 5 系なので別途インストールが必要です
    - [インストール方法](https://learn.microsoft.com/ja-jp/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4)
- Node.js
    - v20.10.0
    - (開発には Javascript, Typescript を選択できます)

# チュートリアルを進める
基本的には、チュートリアルの内容に沿えば OK。

https://learn.microsoft.com/ja-jp/office/dev/add-ins/tutorials/outlook-tutorial

## チュートリアル内容から変更した箇所

manifest.xml
  - L:13
  - 変更前: `<AppDomain>https://www.contoso.com</AppDomain>`
  - 変更後: `<AppDomain>https://localhost:3000/</AppDomain>`
  
https://learn.microsoft.com/ja-jp/javascript/api/manifest/appdomain?view=common-js-preview

webpack.config.js
  - 変更というよりは、記載ミスの修正に近い
  - L:79
  - 変更前: `to: "[name]." + buildType + "[ext]",`
  - 変更後: `to: "[name]" + "[ext]",`
  - チュートリアルの、個別の手順内容と最終的な変更例が異なるので注意 (記載ミスっぽい？)
    - <https://learn.microsoft.com/ja-jp/office/dev/add-ins/tutorials/outlook-tutorial#update-webpack-config-settings>
    - 2 の内容と 3 の内容が異なる

# 実行してみる
実行する際には、管理者権限での実行が必要。
`gsudo` コマンドで実行時にのみ管理者権限で実行することもできる (インストールには、[`scoop`](https://qiita.com/coitate/items/2cff1f7335e231f2d4d5) が便利です)。

```
npm start
```

実行すると、Outlook が自動的に起動するので、メールの新規作成を行う。
チュートリアルで作成したアドインがリボンに表示されているはず (赤枠部分)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743460/6a32197d-4b9d-d949-3ad8-120570558c8e.png)

「Insert gist」をクリックすると、右側にペインが表示される。ペインの右下の設定ボタン (歯車マーク) をクリックすると、GitHub アカウントの設定画面が表示されるのでユーザ名を入力してエンターを押すと、パブリックな gist が表示される。デフォルトとして扱いたいものを選択して、「Done」をクリックする。ユーザ設定がされているとペイン上にも同様の表示がされるようになる。

表示されているものから選択して、下の「Insert」ボタンを押すと選択した gist がメール本文に挿入される！

「Insert default gist」の方は、ペインを開かずにデフォルトの gist を挿入するもの。ユーザ設定時に設定したデフォルトの gist がクリックすると一気にメール本文に挿入される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743460/4f49c68b-43ea-241a-31bb-3bf47a73c06c.png)

# ということで
Outlook のアドインを開発してみました (チュートリアルの内容ですが)。
作業している中でいろいろと調査していたのですが、情報が公式ドキュメントくらいしかなくけっこう困りました。アドイン開発は便利そうですが行っている方は少なそうな印象です。
開発自体は、Javascript or TypeScript で行えて一般的な WEB 開発とそれほど変わらないと思うので、もっと活発になってもいいのにという気はしますが、そうなっていないのには、何らか理由はあるのでしょう… (実際、Outlook の Desktop Client と Web とで機能面で差があり、どうしたものかとなっています)。
実際の業務で、アドインとして開発するかは微妙なところですが今後も何か分かったことがあれば記事にしていきたいと思います。


以上です。
AWS Certified Cloud Practitioner (CLF-02)

#1回目の受験
先に受験した友人たちが公式の動画やネットの過去問を解いて受かったことを知り1か月ほど準備期間を設けて受験した
毎日1時間半ほどネット過去問を解き続けた
そしたら、落ちた

##学び
ネットの過去問は簡単すぎる
本番はもっと知らないサービスが出題される
さらに、友人たちはCLF-01を受験していた
私が受験するときはCLF-02に切り替わっていた

#2回目の受験
同じことを繰り返しても無駄なので、Udemyに課金した
Udemyの問題集のみ課金した
解説講座もあるらしいが、幸いなことにAWSのサービスについては数多くの先人たちがまとめてくださっているので漠然とした理解ならそれで十分だった
意識したことだが、当たり前だが暗記することだ
理解して終わりではなく、試験なのだから必死に暗記した。その際に似たようなサービスとの違いを意識するようにした。また、サービス範囲を意識した
Udemyの試験は難しすぎるので基本レベルは100点を目指したが、本番レベルは70％とれるように意識した。
AWSのサービスは多岐にわたるので全部覚えることは私には無理だった。ので、公式の発表している出題範囲をしっかりと確認しローラー式に暗記していった。さらに、全暗記は無理そうだったのでその中から、なんとなく重要そうなサービスを覚えていった。（問題だけは解きまくっていたのでよく見た名前だなとかはあったのかもしれない）。
1ヶ月ほどそのように過ごし、8割程度の正答率で合格した。

##学び
自分の受験する試験の公式ドキュメントをしっかりと読む。ひょっとしたら出題形式などが変わっているかもしれない。
無料だからと言ってネット上の自称過去問を当てにしない（公式が公開していないのなら慎重になるべき）
課金したほうが時間がかからないかもしれない
暗記は気合、頑張るしかない

#まとめ
クラウドは今後需要がますます高まるのでより勉強していきたい
けど、資格だけ取っても使う機会がないとなーってなったりする
プロジェクトを炎上させるコツ

# はじめに
当方、ベンダを管理する情シス的な立場であることが多いです。
最近、幸か不幸か炎上プロジェクトにいることが多いので、どうすればプロジェクトが炎上するのか振り返ってみようと思います。

# その１：WBSがない

おいおいWBSくらい作るだろ…と思ったそこのあなた、そのスケジュールで日々の作業が進められますか？タスクが遅延したら何のタスクに影響があるか分かりますか？

私はプロジェクト管理のプロではないのでどうすればいいか知りませんが、過去炎上したプロジェクトでは以下のようなWBSを使っていました。

- 遅れたらただ遅れたことだけわかるスケジュール。
	- タスク間の依存性が分からないので遅れて何が悪いか分からない。
- タスクが書いてあるけどタスクで何をするのか分からない。（完了条件が分からない）
	- 抽象的なタスク項目が1行書いてあって何ができたら完了か分からない。
- マルチベンダ体制で各々のベンダが何するかのスケジュールはあるが足し合わせたマスタスケジュールがない。
	- 各々のベンダが何してるか分かるが、結局プロジェクトが予定通りかどうか分からない。
- 担当者がほぼ同じ。
	- 優秀なのは分かるんですが、その人が急にいなくなったらどうするんですか。（いなくなりました）

# その２：関係者を巻き込まない or 巻き込むのが遅い or そもそもわかってない

プロジェクトを最後まで終わらせるために必要な人って誰なんでしょう？

特に依頼が必要な関係者は必要になったタイミングで依頼したって無理です。
関係者には関係者の都合があります。
こっちのプロジェクトの都合だけで動いてくれません。

私が関わるプロジェクトでは関係者に対して以下のことをしていました。

- プロジェクト開始時に関係者の洗い出しをしない。
	- 必要になったタイミングで都度都度お願いしに行くので、タスク実施の直前になってさらに相手の都合に合わせるのでタスクが遅れる。
- このプロジェクトが何なのか理解してもらう努力をせずお願いだけする。
	- なんで関係者に協力してもらわなきゃならんのか、関係者の理解が得られず依頼事項が後回しにされる。

# その３：課題が課題じゃない

我々のプロジェクトには課題を管理する課題管理表がありました。

「開発用のパソコンの準備をお願いしたい」
「この仕様ってどういうことですか」

それ質問だよね。
課題管理表に重要な問題もただの質問も一緒くたに書くので、プロジェクトの進行に影響を及ぼす課題が何なのか把握できなくなりました。

# その４：タスクを押し付け合う

炎上後期に見られる現象かもしれませんが、自分のタスクを減らそうとするタスクの押し付け合いが始まりました。

押し付け合いに労力を割く暇があるならタスクを進めた方が効率いいかもしれないです。

# その５：現場とPMで言ってることが違う

作業担当者に聞くと「○○すればできる」と言ってんのに、PMに聞くと「他社の△△が終わらないとできない」と言ってる内容が違う。

管理側がとるべきは、「言ってることを統一せえ」だったかなと思います。

# その６：締切をまもらない

締切があるようでない。いや、あるんだけど、守らないのが当たり前になってる。

# おわりに

炎上しないように反省したいものです。
Python学習の振り返り

年も暮れということで、アドベンドカレンダーへの参加意欲が高まったのもあり
ずっとやっているPython学習の振り返りをしていこうと思う。


## Python勉強を始めたきっかけ

@mamineko　さんからDeafエンジニアの会の中で
みやさかしんやさんの[pyサブスクール](https://pysubschool.net/)を紹介してもらったのがきっかけ。
字幕をつけていただいたおかげできこえない私でも普通に授業を受けられるようになり、python学習を始めることができた。
自分のペースで学習することができるため、コースの進め方も私のやり方と非常によくあっていた。
ちなみに今も受講中であり、とても楽しい。

@mamineko さんは他にもデフエンジニアの学習機会を増やすということで下記のような働きかけをされたということで頭が上がらない。ありがとうございました！

https://qiita.com/mamineko/items/c41fece301c244af48b7

## 仕事でも使い始める
引き寄せの法則というのか、なぜかわからないけど、仕事でもひょんなことから結局使い始めることになり、上の講座で学んだことをきっかけに、今開発をやっています。ちなみに上のスクールに入っていたので、ちょっとしたわからないPythonのコードの質問もでき、開発も円滑に進められている。


## Paizaラーニング

ここ数週間の投稿を見ていればわかるかと思うが、Python講座で学んだことの復習も兼ねて、プログラミングの考え方を学ぶためにこちらにも登録。

こちらの[レベルアップ問題集](https://paiza.jp/works/mondai)というのを日々解いています。
今はCランクの配列活用メニューのところまでやってます。
自分で考えて解いたり、答えを見てより良い書き方について学んだり、つたない私の投稿を見てよりよい提案をコメントで下さる方もいてどんどん書き方について学んでいる。

## これから

上記の講座と、Paizaラーニングが一通り終わったら、自分でPythonを使って何らか作ってみるのを来年の目標にしようと思っています。
Playwrightでスクショする

## はじめに
[前回書いた記事](https://qiita.com/t2siihara/private/6fe21cd3e13022f86a24)では、Playwright がどんな機能を持ってるのか等を書きました。
今回は、実際に使ってみての記事を書いていきます。

## 動作環境
- **Windows 10 Pro 22H2**
- **Playwright Test for VSCode `v1.0.19`**
- **VS Code `1.85.0`**



## まずはスクショから
### ソースコード

- device.spec.ts

```typescript
import { test } from "@playwright/test";

test("get qiit_test", async ({ page }) => {
  // Qiitaのページに移動
  await page.goto("https://qiita.com/organizations/oec");
  
  // 画面に映ってる範囲をスクショ
  await page.screenshot({ path: "./screenshot/NotFullPage_qiita_device.png" });
  
  // fullサイズで画面をスクショ
  await page.screenshot({
    path: "./screenshot/fullPage_qiita.png",
    fullPage: true,
  });
});
```

#### 実際のスクショ画面
```typescript
fullPage: true
```
にした場合、非常に縦長な画像が撮れるので折りたたんでいます。

<details><summary>NotFullPage_qiita_device.png</summary><div>

![NotFullPage_qiita_device.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632330/9099fd4b-6faf-8433-afeb-ad2acc00a593.png)


</div></details>

<details><summary>fullPage_qiita.png</summary><div>

![fullPage_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632330/d4bebbd4-1438-d09f-177a-dc1967bc4c65.png)


</div></details>

見ての通り、**fullPage_qiita.png** は非常に縦長でスクショがされます。

## テストの動かし方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632330/1114d73d-72c2-c18b-d0e8-23c4899fbbf6.png)


上記図中の３行目の左に、✅マークがありますが、それをポチっとすることで、テストが動作します。

特段動作がストップしなければ、path で記載している箇所に、スクショが出力されます。

なお、ソースコード上では、 screenshot フォルダに png ファイルを出力するようにしていますが、このとき screenshot フォルダがなかったら、フォルダを作ってくれます。

## テストを動作させると

こんな画面が表示されて、画面が動きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632330/a9ee5e01-c427-0557-71f9-44d19a9a6de6.png)

## 最後に
次はandroid端末を動作させていろいろやった記事を書いてみたいですね。
「っぽさ」をデザインに落とし込むとき

この記事は ウェブクルー Advent Calendar 2023 24日目の記事です。

メリークリスマス。
世のなかクリスマス一色ですね。クリスマス感。

「○○感」とか「○○っぽい」とか「○○風」とか。
デザイン業務をやっているとよく聞く言葉です。
最近は「○○系」もあるかも。

この「っぽさ」みたいな、とても曖昧なものを具現化するのもデザインの大きな役割です。

## 「っぽさ」の分解
前職まで長く旅行商材を扱っていました。
ハワイっぽく、沖縄っぽく、夏休みっぽく、リゾート感、学生（旅行）風、女子旅風、などなど。
「っぽさ」の乱発です。

「っぽさ」って具体的にどういうことか。
まず分解してみます。
沖縄と聞いてイメージされるものは。

・青い海
・マリンスポーツ
・リゾートホテル
・美ら海水族館
・やんばる
・シーサー
・赤瓦や石垣の家
・守礼門
・沖縄料理
・泡盛やオリオンビール
・ハイビスカスやブーゲンビリア
・サンゴ
・水着やビーチサンダル
・紅型

いっぱい。
そもそもなんで沖縄か。
今、私がとても沖縄に行きたいからです。

## ターゲット層（商品内容）に合わせる
年齢によって、興味の範囲や知識レベルによって、少しずつイメージは変わります。

そんな時は「どういう行動を起こしそうか」を考えてみます。

例えば、子連れ旅行なら。
浅瀬のビーチやホテルのプールで遊びたい。
美ら海水族館にも行きたいし、ホテルが充実しているのもありがたい。

![子連れ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630934/5093beb7-6080-8456-0342-8a55cbfa9964.png)


若い女性のグループ旅行なら。
青い海で1日中遊びたい。
マリンスポーツなどアクティビティを期待しているかも。

![女子旅.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630934/4e8ef535-986b-a5b6-7dfc-c0535b179c87.png)


シニア旅なら。
ビーチアクティビティより景色を楽しみたいかも。
観光やグルメも満喫したいでしょう。

![シニア.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630934/69c33a56-fe19-8918-271b-7f862d2c0e4f.png)


求めるものが違えば、そこにイメージするものも変わります。

## デザインする
商品のコピーももちろん大事ですが、
グラフィック面では、フォントや配色、写真などの組み合わせで表現します。

文字間を狭く、色をビビットにすると、可愛さや元気さが出たり。
あるいは、教科書体や明朝体で文字間を広くとると、ゆるい優しい感じを演出できます。

![アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630934/9bacecba-e8ee-ec93-cbbe-b3076a990147.png)

とりあえず、沖縄に、行きたい。

## 参考にするもの
画像検索はもちろんですが、雑誌もいいです。
雑誌は読者ターゲットが明確なので、同じものを扱っていても「っぽさ」が全然違います。
本屋の雑誌コーナーは「っぽさ」が渋滞しています。

## おわりに
最近、シニア向け12ヶ月分のバナー作成をすすめていて、シニアの「季節感」をひたすら考えて行き詰まっています。
ということで、楽しい沖縄へ少し逃げてみました。

明日は、私の長年のデザイナー仲間 [@hiro19840624](https://qiita.com/hiro19840624) さんの記事です、よろしくどうぞ。
AI-102試験対策のまとめ「Bot Framework Composerで利用可能なボットテンプレート」

## はじめに
Azure AI Engineer Associate(AI-102)取得に向けた勉強でまとめた内容を本記事では投稿しています。
試験範囲の内容を私が勉強していく中で、
・忘れてしまっていた内容
・他の知識と絡めて理解した方が良い内容
・Microsoft Learnの読解に苦戦した内容
などをできるだけ分かりやすく簡潔にまとめることを意識しています。
Azureの勉強を一から始め、AI-102取得を目指している方の参考になれば幸いです。
※本記事の内容が必ず試験に出るわけではないこと、ご注意ください
※勉強しながら投稿しているため、追加で学んだことがあれば随時投稿内容を更新します。

## 試験対策のまとめ
### Bot Framework Composerで利用可能なボットテンプレート
* ボット作成時に様々なテンプレートを選択可能
* テンプレートの目的
    - 様々な一般的なシナリオにわたって共通の会話機能を提供
    - ボット作成作業が簡素化され、独自の会話機能作成に集中可能
* テンプレートによる作成後、必要に応じてカスタマイズや拡張が可能

#### **ボットテンプレート**
* テンプレートの種類と説明

| テンプレート名 | 説明 |
| --- | --- |
| Empty Bot | 下記を提供する基本的なボットテンプレート <br>・新規ユーザーへの基本的な挨拶 <br>・ボットが答えられない質問をキャッチするための未知のインテント処理 |
| Core Bot with Language | Empty Bot機能を基に構築され、下記を提供 <br>・NLU(自然言語理解)機能 <br>・ヘルプ/キャンセルユーティリティ機能 |
| Core Bot with QnA Maker | Empty Bot機能に基づいて構築され、QnA Makerを通じてFAQ/ナレッジベース機能を導入(NLU機能は必要に応じて有効化可能) |
| Core Assistant Bot | 基本的なアシスタントテンプレート <br>下記などのより洗練された会話体験をサポートする幅広いコアアシスタント機能を提供 <br>・チャット <br>・曖昧さ回避 <br>・ユーザーフィードバックなど |
| Enterprise Assistant Bot | Core Assistant Botを基に構築 <br>下記などの一連の従業員の生産性機能を提供 <br>・カレンダー管理 <br>・人検索 |
| Enterprise Calendar Bot | 豊富なカレンダー生産性機能セットを提供し、ユーザーがより広範な会話体験の一部としてカレンダーを管理可能にする <br>Microsoft Graphを使用したOffice365カレンダーの管理をサポート |
| Enterprise People Bot | 豊富な人検索生産性機能を提供し、ユーザーが人を検索可能 <br>Microsoft Entra IDユーザーの検索をサポート |

* テンプレートにおける会話能力の有無(Enterpriseは除く)

| 会話機能 | Empty Bot | Core Bot with Language | Core Bot with QnA Maker | Core Assistant Bot |
| --- | :---: | :---: | :---: | :---: |
| 新規/リピーターユーザーに挨拶 | ○ | ○ | ○ | ○ |
| 不明な質問への対応 | ○ | ○ | ○ | ○ |
| ヘルプ機能 | -  | ○ | - | ○ |
| ダイアログのキャンセル | - | ○ | - | ○ |
| エンドユーザーに機能を紹介するボットツアー | - | - | - | ○ |
| NLU(インテント)結果の曖昧さの解消 | - | - | - | ○ |
| ボットに関するフィードバックの送信 | - | - | - | ○ |
| 会話中のエラー処理 | - | - | - | ○ |
| QnA Maker(プロのパーソナリティ)との会話 | - | - | - | ○ |

* 各テンプレートに必要なインフラストラクチャ

| インフラストラクチャ | Language Cognitive Service | QnA Maker Cognitive Service | 必要なGraphスコープで構成されたADアプリケーション |
| --- | :---: | :---: | :---: |
| Empty Bot | - | - | - |
| Core Bot with Language | ○ | - | - |
| Core bot with QnA Maker | - | ○ | - |
| Core Assistant Bot | ○ | ○ | - |
| Enterprise Assistant Bot | ○ | ○ | ○ |
| Enterprise Calendar Bot | ○ | - | ○ |
| Enterprise People Bot | ○ | - | ○ |

* 参考
    - https://learn.microsoft.com/ja-jp/composer/concept-templates

## 次の試験対策のまとめ
* **AI-102試験対策のまとめ「Azure AI TranslatorにおけるBLEUスコア」**

https://qiita.com/fsd-jume/items/b0657ffad28b606fef6c

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/65aba5d5514e023fd66d
フィールドレベルセキュリティー一括選択のJavascript

<<参照アクセス権>>
document.body.querySelectorAll("input[name^='display_']").forEach((item) => { console.log(item); if (item.type == 'checkbox' && item.disabled == false) item.checked = true; } );

<<編集アクセス権>>
document.body.querySelectorAll("input[name^='edit_']").forEach((item) => { console.log(item); if (item.type == 'checkbox' && item.disabled == false) item.checked = true; } );

※：Inspectボタンをクリックし、チェックボックスを1回選択状態にする。その後スクリプトを実行する。

<<参照＋編集アクセス権>>
document.body.querySelectorAll("input[name^='edit_'], input[name^='display_']").forEach((item) => { if (item.type == 'checkbox' && item.disabled == false) item.checked = true; } );
攻撃ステータス比べる

# 初めに

今回は、#コンパス戦闘摂理解析システムというゲームにおけるソル＝バッドガイの攻撃力上昇量を他のキャラと比べて確かめようと思います。

# コンパスとは

『＃コンパス 戦闘摂理解析システム』は、「1バトル3分間」で仲間とチームを組み、他プレイヤーのチームと3vs3のバトルで、ステージに配置された拠点を奪い合うリアルタイム対戦ゲームです。また、スキルカードを自分の好きな組み合わせでデッキを作り、対戦できます。

# コンパスの攻撃力上昇について

コンパスでは、バトル中にチームでキルをとることで、チームレベルが最大9まで上がり、攻撃、防御、体力のステータスが上昇していきます。

# 普通のキャラの場合

![IMG_9657[1].PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630915/c2126390-7d11-ce46-01c2-3bd8982a3d6f.png)
チームレベルごとの攻撃ステータスをまとめます。
Lv1 358
Lv2  362
Lv3  367
Lv4  371
Lv5  376
Lv6  380
Lv7  384
Lv8  389
Lv9  393

結果攻撃ステータスはLv1と比べて約1.1倍になることがわかります。

# ソル＝バッドガイのアビリティについて

今回見てみるソルは、自分が敵を倒すごとに攻撃力が上がります。ただし、一度デスしてしまうとソルのアビリティが消え、チームレベルによるステータス上昇のみになります。
![IMG_9658[1].PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630915/17bd386b-ebbb-3f81-ef83-6c703c16fba2.png)
先ほどと同じようにチームレベルごとに並べていきます。
Lv1 514
Lv2 582
Lv3 653
Lv4 725
Lv5 798
Lv6 873
Lv7 884
Lv8 894
Lv9 904

結果攻撃ステータスはLv1と比べて約1.75倍になることがわかります。

# おまけ

ソルはヒーロースキルを使用すると自身に植え付けられたギア細胞を一時的に活性化させ、戦闘能力を底上げできるため、一定時間ステータス強化が入ります。その攻撃力を見ます。
![IMG_9659[1].PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630915/db208723-0f08-a4a8-3372-468f3d73db5d.png)
はい、10857ですね。
ちなみにLv9の普通の状態と比べると12倍になります。
脳筋こそ正義！！！！

# まとめ

この記事を見て少しでもコンパスに興味を持った人がいたらぜひ始めてみてください。また、コンパスは本日７周年記念イベントが行われます。気になったらニコニコから見に行ってみてください。
とあるサブネットの端から端までPingをする PowerShell編

# サブネットの中でどのアドレスが空いているかわからない！
こんな時にはExPingなどの便利ツールでいい感じにやるのが非常に効率的な方法であるのだが、そういったソフトがない状況でもなんとかする方法を考えました。（~~そんな状況下ではおそらくこの記事は見れない~~）

## PowerShell
Windows 10ではWindows PowerShell 5.1が標準搭載されているため、PowerShellでならどのWindows PCでも使えるかつ、batchよりも読みやすい(個人的な見解)ので汎用性はあるかと

### PowerShellでPingを打つコマンド
参考　⇒ [【PowerShell】対象PCへPingコマンドを実行する【PC死活監視】](https://powershell.work/2022/07/06/%E3%80%90powershell%E3%80%91%E5%AF%BE%E8%B1%A1pc%E3%81%B8ping%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E3%80%90pc%E6%AD%BB%E6%B4%BB%E7%9B%A3%E8%A6%96%E3%80%91/)

```powershell
$rst = Test-Connection 8.8.8.8 -Quiet 
# Trueなら成功
$rst
```

あとは`ネットワークアドレス/サブネットマスク`からその中でホストがとりうるIPを自動計算することが出来れば自動でPingを打たせることが出来るはず。

### IPアドレス計算
最終的には`ForEach`で繰り返せる形に持っていきたいので`ネットワークアドレス/サブネットマスク`の文字列(e.g. `192.168.1.0/24`)からホストの総数とホストの始まりとなる第4オクテットを抜き出せればよいはず。

イメージとしては下記の感じ。

```powershell
$network = "192.168.37.0/24"
$networkAddress = $network.Split("/")[0]
$mask = $network.Split("/")[1]
# サブネットにあるIPの総数を求めそこからブロードキャストアドレスを引く
$hostCount = [Math]::Pow(2,(32 - $mask)) - 1
# ネットワークアドレスから第1 ~ 第3オクテットを切り出す
$firstToThird = $networkAddress.Split(".")[0..2] -join "."
# の第4 オクテットを切り出す
$forth = $subnetIp.Split(".")[3]
# 第4オクテットの値 + 1がそのサブネット内のホストの始まりとなる
$hostStart = [int]$forth + 1
```

### 入力した文字列を受け取る

PowerShellでは`Read-Host`で入力文字列を受け取ることが出来ます。

```powershell
$result = Read-Host 何か入力してください
```

## 同期型の自動Pingスクリプト
ということで上記の組み合わせで自動Pingスクリプトを作ってみました。

```powershell
funciton RangePing(){
    $network = Read-Host Pingを打つネットワークを入力してください
    $networkAddress = $network.Split("/")[0]
    $mask = $network.Split("/")[1]
    # サブネットにあるIPの総数を求めそこからブロードキャストアドレスを引く
    $hostCount = [Math]::Pow(2,(32 - $mask)) - 1
    # ネットワークアドレスから第1 ~ 第3オクテットを切り出す
    $firstToThird = $networkAddress.Split(".")[0..2] -join "."
    # の第4 オクテットを切り出す
    $forth = $networkAddress.Split(".")[3]
    # 第4オクテットの値 + 1がそのサブネット内のホストの始まりとなる
    $hostStart = [int]$forth + 1
    ForEach ($i in $hostStart..$hostCount){
        $ipAddress = "$firstToThird.$i"
        $res = Test-Connection $ipAddress -Quiet
        $answer = ""
        if($res){
            $answer = "OK"
        }
        else{
            $answer = "NG"
        }
        Write-Host "$ipAddress is $answer"
    }
}
```

これで一つのサブネットの端から端までPingができるようになりました。

しかし、こいつは1つのPingが終わらないと次のPingを打ってくれないため終わるまでにはとても時間がかかってしまうというデメリットもあります。

あとは単純にWindowsのPingのデフォルトとして4回打っているからというのもあります。
ここは`Test-Connection`の`-Count`オプションで調整することができます。

非同期での並列処理をここに組み込めば解決しそうですが、これは次の課題とします。
ダンプをPHPで返すよ、"VarExporter"

[Symfony Component Advent Calendar 2023](https://qiita.com/advent-calendar/2023/symfony-component)の23日目の記事です。

## ダンプをPHPで返すよ、"VarExporter"

[VarExporter](https://symfony.com/doc/current/components/var_exporter.html)は、渡されたデータをダンプしますが、返す値はPHPコードになります。

### インストール

```shell
composer require symfony/var-exporter --dev
```

### 使い方

```php
use Symfony\Component\VarExporter\VarExporter;

$result = VarExporter::export(['a' => 'b', 'c' => 123]);
echo $result;
/*
[
    'a' => 'b',
    'c' => 123,
]
*/

$item = new Item(name: '商品', price: 100);
$result = VarExporter::export($item);
echo $result;
/*
\Symfony\Component\VarExporter\Internal\Hydrator::hydrate(
    $o = [
        clone (\Symfony\Component\VarExporter\Internal\Registry::$prototypes['App\\Entity\\Item'] ?? \Symfony\Component\VarExporter\Internal\Registry::p('App\\Entity\\Item')),
    ],
    null,
    [
        'App\\Entity\\Item' => [
            'name' => [
                '商品',
            ],
            'price' => [
                100,
            ],
        ],
    ],
    $o[0],
    []
)
*/
```

#### Instantiator

この機能を使って、コンストラクターを使わずにオブジェクトを作成できます。

```php
use Symfony\Component\VarExporter\Instantiator;

// Instantiatorでオブジェクト生成
$item = Instantiator::instantiate(Item::class, ['name' => '商品’, 'price' => 100]);
dump($item);
/*
^ App\Entity\Item^ {
  -name: "商品"
  -price: 100
}
*/
```

#### Hydorator

すでにインスタンス化されたオブジェクトのプロパティ設定ができます。**privateなプロパティ**でもSetterメソッドを使わずにセットできます。

```php
use Symfony\Component\VarExporter\Hydrator;

$item = new Item();
// Hydratorでプロパティ設定
Hydrator::hydrate($item, ['name' => '商品', 'price' => 200]);
dump($item);
/*
^ App\Entity\Item^ {
  -name: "商品"
  -price: 200
}
*/
```

## まとめ

今回は`VarExporter`の紹介でした。すごいのはわかるんだけど、使い方がちょっと浮かばない。。
でも、きっといろいろなコンポーネントで活躍してるんだろうなとは思いました。（Doctrineとか）
Scrum Alliance 認定スクラムマスター（CSM）試験を受験した

# はじめに
「認定スクラムマスター」は、複数の団体が別々の資格として提供しているようです。
"スクラムの生みの親" の人たちでも別れてるっぽい。仲良くして欲しいですね。

ものによってはトレーニングを受けなくても受験できるやつもあるようですが、主目的は学ぶことだったので、Scrum Alliance の認定するトレーニングを受講 + 受験してきました。
これを選択したのは、日本におけるアジャイル開発で実績の高い人たちが講師をしているトレーニングだったからです（資格はどれでも良かった）。

トレーニングの方の学びはとても多いのですが、ここでは試験について書きます。

# 試験概要
| 項目 | 内容 | 備考 |
|:-|:-|:-|
| 受験方法 | オンライン（Web ブラウザ） |   |
| 言語 | 日本語選択可能 | ただし途中で言語の切り替え不可 |
| 試験時間 | 60 分 |   |
| 出題方法 | 4 択 | 少なくとも私の受験した回ではすべて 4 択 |
| 出題数 | 50 題 |  |
| 合格点 | 37 点 |  |
| 受験期間 | 認定トレーニング受講後 90 日以内 |  |
| 受験料 | トレーニングに含む（2 回まで） | 3 回目以降は $25 |

なお、試験中はドキュメントなどの参照 OK です。なので、スクラムの内容をしっかり把握していれば細かい点などは確認しながら回答でき、不合格になることは少ないと考えられます。

# 出題について
## 出題傾向
「[アジャイルソフトウェア開発宣言](https://agilemanifesto.org/iso/ja/manifesto.html)」や「[スクラムガイド](https://scrumguides.org/download.html)」内の定義や記述そのものを問うものは少ないです。
なので、それらの原則や思想の把握が曖昧だったりすると、少し危ないかもしれません。

具体的には書けませんが、たとえば「こんな問題が発生した。スクラムマスターとしてはどう行動すれば良いか？」のような設問があり、選択肢が「"スクラムマスターとして" という文脈を除けば、どれも誤っているとは言えない」ものしかなかったりします。

なので、スクラムガイドの以下のそれぞれの項目を噛み砕いて理解しておきましょう（私はトレーニング受講前は、多くの点で誤って認識してました😨）。

- スクラムの定義
- スクラムの理論
- スクラムチーム
- スクラムイベント
- スクラムの作成物

「アジャイルソフトウェア開発宣言」の方に関しては、そのままの文言を問う感じのもあったので、その場で参照すれば OK です。

## 問題点
### 日本語訳
この類の試験にありがちですが、日本語訳の怪しいものが混じっています。ただ、そこまで酷い翻訳はないです。
一般的には原文表示ボタンがあったりしますが、この試験にはありません。あきらめましょう。13 題は不正解でも OK なので、大きなリスクにはなりません。

### 内容の古いものが一部混じっている可能性
最新のスクラムガイド 2020 年版では「自己管理」となっている点が「自己組織化」のままであり、その内容も 2020 年版では言及されていないような設問のものがありました。

その設問については、最後まで悩んで正答できませんでした（なので 100% での合格を逃した）。

:::note warn
もしかしたら、用語だけ古いままで内容は問題なかったのかもしれません。ちょっと選択肢が悩ましくて選びにくかったので、私の理解不足という線も捨てきれません。
:::

# 最後に
認定は、「最低限のことは知ってるやつと認識してもらえる」という点で、取っておいて損はないです。
が、それよりも受験の前提となるトレーニングの学びがとても大きいので、ぜひ挑戦してみて欲しいです。
学ぶついでに認定も取る、というくらいの気持ちで大丈夫です。

テクノロジーとは領域がまったく異なるので、それはそれで面白いですよ。
エンジニアリングマネージャー必読：多重人格者になれ！！

近年、仕事の環境が変化し、役職が上がるにつれて、一人で複数の担当を受け持つことが求められることが増えています。
しかし、これには注意が必要であり、異なる立場からの認識の違いが問題となることがあります。

本記事では、キャリアの発展において異なる立場での認識の重要性について探り、その具体例としてエンジニアとCTOの立場の相反するケースを考えてみましょう。

## 役職が上がると多忙になるが、立場を意識し公言すべし
役職が上がると、一人で様々な仕事をこなす必要が生じます。これはチャレンジングな一方で、異なる担当を持つことで立場や視点が変化します。
具体的な仕事の例を挙げると、エンジニアが担当する業務と、CTOが担当する業務では、同じ課題に対するアプローチが異なることがあります。

例えば、エンジニアがあるプロジェクトでオンプレミスからAWSへの移行を提案しているとします。
しかし、CTOの視点では、来期の予算に余裕がなく、移行を急ぐことが難しいかもしれません。
このような場合、エンジニアとCTOの意見が食い違うことで、プロジェクトの進行が滞る可能性があります。

## 立場の公言が誤解を避ける鍵

異なる立場からの認識の違いを解消し、円滑な業務進行を図るためには、立場を明確に意識し、公言することが不可欠です。
エンジニアは技術的な側面から、CTOは戦略的な側面からプロジェクトを見ることがあります。
そのため、立場を公言することで、お互いの視点を理解しやすくなり、コミュニケーションが円滑に進むでしょう。

エンジニアが「技術的な観点から見ると、今が移行のベストなタイミングですが、予算の観点からは来期が望ましい」と公言することで、CTOもエンジニアの視点を理解しやすくなります。
逆に、CTOが「現在の予算状況から考えると、来期が移行の適切な時期です」と明言すれば、エンジニアも予算の制約を理解しやすくなります。

## まとめ
役職が上がると、一人で様々な担当を持つことが求められますが、その際には異なる立場での認識の違いが潜んでいます。
これを解消し、円滑な業務進行を図るためには、立場を明確に意識し、公言することが不可欠です。
エンジニアとCTOのような異なる立場では、特にコミュニケーションの質が重要です。
お互いの意見や視点を理解し合い、共通の目標に向かって協力することで、成功裡なプロジェクトの進行が期待できます。
Starlight APIを使用したdiscord.jsのグローバルBANの作り方

こんにちは。この記事では、Starlight APIと呼ばれるものについて解説し、それを使ってグローバルBANをかける方法についても解説しています。

まず、「Starlight API」とは、危険人物検索サイトのユーザー情報を提供するAPIのことです。このAPIには既に3000人以上の危険人物の情報が蓄積されているようです。

それでは、「API」とは何かについて簡単に説明します。APIを例えるなら、Google Mapを自分のウェブサイトに埋め込んでいるのをよく見かけるでしょう。これがAPIの一例です。簡単に言うと、APIは自分のウェブサイトの機能を他のウェブサイトでも同じように使えるようにするための仕組みです。
Starlight APIの開発元は2023年12月から活動を開始した「Starlight Project」というグループのようです。
## グローバルBANの作り方
このAPIを使用してグローバルBANを作るのは <a href="https://qiita.com/zero8347/items/89f2099f7d4cad58b7f9">この記事</a>で解説しています。
DDL,DML,DCLについてまとめた

## はじめに
DDL,DML,DCLについて、メモ程度にまとめていきます。

## DDL(データ定義言語)
### 目的
　データベースの定義を行う時に使用するもの。
### 主なコマンド
・CREATE：テーブルの作成
・DROP：データを削除
・ALTER：既存テーブルのカラム定義の変更

### 例
```
CREATE TABLE employees (
    employee_id INT PRIMARY KEY,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    hire_date DATE
);

ALTER TABLE employees ADD COLUMN department VARCHAR(50);
DROP TABLE old_employees;
```

## DML(データ操作言語)
### 目的
　データの操作(変更、取得)を行うときに使用するもの
### 主なコマンド
・SELECT：データの抽出
・INSERT：データの挿入
・UPDATE：データの更新
・DELETE：データの削除

### 例
```
SELECT * FROM employees WHERE department = 'IT';
INSERT INTO customers (name, email) VALUES ('John Doe', 'john@example.com');
UPDATE products SET price = price * 1.1 WHERE category = 'Electronics';
DELETE FROM orders WHERE order_date < '2023-01-01';
```

## DCL
### 目的
　データベースへのアクセス制御を行う時に使用します。
 ### 主なコマンド
・GRANT：特定のユーザーに権限を与える
・REVOKE ：ユーザーから特定の権限を取り消す

### 例
```
GRANT SELECT, INSERT ON employees TO user1;
REVOKE UPDATE ON customers FROM user2;
```

## まとめ
　これらの言語は、データベース管理システム（DBMS）の管理や開発において重要な役割を果たします。DML はデータの操作、DDL はデータ構造の定義、DCL は権限の管理に焦点を当てており、これらを組み合わせてデータベースを適切に管理することが求められます。

## 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
IBM Cloud PaaS ベストテン 2023年版

これは、[IBM Cloud Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ibmcloud)　22日目の記事です。

# IBM Cloud PaaS ベストテンの2023年版
年末の風物詩とも言うべき人気ベストテン。やってきました。なんとこの一年は昨年の上昇トレンドを大きく反映させた結果となりました。いつぞやの同僚は望年会で忙しかったのか、コロナでなかなか会えなかったのにたまたまオフィスにいたのを見かけられたのか、真横にやってきました。

同僚：「どもー。ベストテンってできてます？Qiitaに投稿予定で出してますよね？」
わたし：「ですねー。でもまだ何も取り掛かれてないんすよ」
同僚：「ちょっとお客さんとの会話のネタにしたいんだけど、ありがとうございます！」

おぉ、なんということでしょう。
すでに引き受けた前提の会話になってるじゃないですか。さすが、F2Fだからこその技なんでしょうか(笑)

# IBM Cloud で利用できるサービスの変遷
お手軽にコンテナアプリ開発にも使える注目サービス「Code Engine」がリリースされてから2年が経とうとしています。KubernetesやOpenShiftが使えるサービスは今やアプリケーション基盤の定番となりました。
一方、IaaS領域では、AIX/IBMi、そしてz/OSも利用可能となるIBMならではのクラウドサービスが加速度的に充実してきています。

# お待ちかね IBM Cloud PaaS 人気ベストテン 2023
集計単位は、対象のサービスの「売上」です。
もちろん今年も日本のユーザーに絞って集計しています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53057/ae4702af-959f-7d15-ab43-3e44cb459695.png)


なんということでしょう。
Kubernetes Clusterが堂々の1位！この数年間、一度も後退することなく徐々に順位を上げてきた本サービス。納得のランキングになったと言えるでしょう。Kubernetesをシンプルに使い倒したいユーザー向けの「IBM Kubernetes Service（IKS）」とOpenShiftが利用できる「IBM Cloud Red Hat Openshift Kubernetes Service（ROKS）」の二択から選択できるサービスです。
また関連して、8位のIBM Cloud Moniroting、10位のIBM Log Analysisが圏外からランクインしたのも、1位のサービスにけん引されたからこそではないでしょうか。

2位にランクインした「dashDB」は、現在の名称は「Db2 Warehouse on Cloud」ですね。データウェアハウス基盤と分析エンジンをご利用いただけるPaaSです。

3位のPower Systems Virtual Serverは、IBMi/AIXが利用できるサービスで、なんと東阪どちらのリージョンでも利用できる「痒い所に手が届く」サービスです。数年前から比べるとこの一年は様々な機能拡張がなされ、オンプレとのハイブリッド環境が組みやすくなったのも、この躍進を支えていると思います。今や、Powerのユーザーにとってデファクトスタンダードになったと言っても過言ではないでしょう。

4位に順位を上げた「Dizzion Managed DaaS」。昨年東京リージョンでのサービスを開始したDesktop as a Serviceですね。コロナ禍で大きく躍進したサービスですが、この一年でランキングをひとつ上げるとはさすがです。

一方、昨年は不死鳥のように1位を獲得した「Discovery」、ワトソンの代名詞でもある「Speech To Text」はコンテナ勢に押されて順位を5位に落としました。6位の「Speech To Text」とともに、今年新しくリリースされたwatsonxの来年以降のランキングから目が離せません。

7位はWebシステムの定番「Cloud Internet Services」。Internetと皆さんのシステムの間にDDoS防御とかWAFとかをマネージドサービスとして利用できるオールインワンタイプの超便利サービスです。セキュリティとパフォーマンスの両方を重要視するサービスにはピッタリ、です。今年プランに改定が入りましたが、お得サービスなのは変わりませんね。

ユーザー数では断トツの1位の「Cloud Object Storage」は売上ランキングだと昨年と同じ9位。利用頻度に応じて最適なプランに切り替えてくれる「Smart Tier」が便利です。東京リージョン、大阪リージョンで利用できるのもいいですよね。

# もうすぐベストテンから見る来年の傾向
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53057/a855d8f2-e397-ce26-09cc-030d989fafbf.png)

ベストテン圏外だったけど、年間で上昇トレンドだったサービスをご紹介します。

やはりなんといっても「watsonx」でしょう。
12月にはwatsonx.dataがIBM Cloud東京リージョンでサービス開始となりました。
年明け早々には、watsonx.aiもIBM Cloud東京リージョンでのサービス開始が予定されています。
どちらのサービスも、オンプレミスでもご利用いただくことが可能です。

そしてIBM Cloudと言えば「ベアメタル」です。いわゆる「物理サーバー」ってやつですね。
VPC環境でもベアメタルが利用できるサービスが12月に開始となりました。ラインナップはまだ限定的ですが、2024年中にはCPUコア数やメモリサイズなどのラインナップ拡充含め、CPUもSapphire RapidsやEmerald Rapidsのリリースも予定されています。

最後の注目は、インフラ管理・クラスタ管理なしにアプリをコンテナとして実行可能なフルマネージド・ランタイム「Code Engine」です。東京リージョン、大阪リージョンが選べるので、より近いリージョンを選択してサクサクご利用いただけます。コンテナアプリだけではなく、HTTPベースのアプリケーション、バッチジョブやイベント駆動型のサーバーレスアプリなどでもご利用いただけます。

いかがでしたでしょうか？
ご利用いただいているサービスはランクインしていましたか？

IBM Cloudは今年、ISMAPの更新申請を完了しまいした。対象となっているサービス範囲もぐっと広がります。
IBM Cloud、来年も目が離せません。
エンジニアの視座上げ

## はじめに

エンジニア（プログラミングに触れて）として3,4年が経ち、そろそろ今後のキャリアについても考えた方が良さそうだなと思っていたタイミングで、本書『[エンジニアのためのマネジメントキャリアパス](https://www.amazon.co.jp/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E3%83%91%E3%82%B9-%E2%80%95%E3%83%86%E3%83%83%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89CTO%E3%81%BE%E3%81%A7%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B9%E3%82%AD%E3%83%AB%E5%90%91%E4%B8%8A%E3%82%AC%E3%82%A4%E3%83%89-Camille-Fournier/dp/4873118484)』を紹介いただき読みすすめてみた。

想定していた、自分に合ったキャリアパスが見えてくるものではなかったが、上司がどのような役割や視座でいるのかを体感することができる一冊だった。
そこから、自分がそうなるためには？そうなったら？と考えるキッカケとなる本でした。

## 学び

### なんでもできる人になろうとしない

以前は（どれくらい前かはわからないがイメージとして）エンジニアに限らず、トッププレーヤーがトップマネージャーになるといった風潮が大きかったのではないだろうか？
とはいえ、プレーヤーとしてずば抜けていても、マネジメントとなると話が変わるといったことはよく耳にしていた。
少し考えて見るとそれは当たり前のことで、プレーヤーだと自分で手を動かすことができるのである種自分次第でことの進み具合が変わる。一方、他者が手を動かすとなると、自分と同じように見積もってはいけないことは誰でもわかるはずだ。

何が言いたいかというと、苦手はことは得意なことに任せて自分ができることをやれば良いということだ。完全に任せっきりが良いとは思わないがそれも状況によって大きく変わることだと思う。

### 他人の前にまず自分

（少し余談）
高校生の部活の顧問が二人いた。一人はすごくふくよか（ワイルドな安西先生）でもう一人はすごく健康的（選手のように動ける）人だった。
高校生ながら僕は、「自己管理ができていない人が選手の管理をできるのか？」と疑問を持っていた。程なくして、多数の問題が連続して安西先生はいなくなった。

マネジメントする、他者を管理しようとしたときにうまく行かないことの方が多いだろう。そんなときに他者を変えようとしてはいけない。いつも自分が変わる必要があるということ。

自分が変われば他者も変わるかもしれない。そんな心持でいる必要がある。
これはエンジニア云々に限らず、マネジメント全てに共通することではないだろうか？

### 瞑想

正直、ここでもかと思いました。
それでも、上記のような思考を切羽詰まったとき、イライラしたり、物事がうまく進まないときは心を落ち着かせる手段を持っておく必要があるということです。

## まとめ

- 本書は技術書ではないので、マネジメントする人間や組織としてのマインドセットを学ぶことができた
- マネジメントに限らず、「まずは自分から」と考えることが大切
- とはいえ、デリバリーもあるので時間をかけて向き合うことが難しい実情があるのではとも思った
- そうならないために、組織としての文化や共通意識、日々のコミュニケーションが大切になるのだろ
useEffectのreturn: cleanupを忘れると、💸お金がなくなるかも！😱

こんにちは、株式会社グロービスのフロントエンドエンジニアです　:wave: 
イベントリスナー関連のcleanupコードの重要さについて少し書きたいと思います！

## 問題の説明

最近、開発しているサービスで、外部APIの導入で下記の現象が起きてました：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640049/5704ebca-a8a2-f43a-61ee-a246e06e7c3e.png)


ページを変わるたびに、同じリクエストがどんどん増えてきました

1. Topページを視聴すると: １つリクエスト
2. 違うページに行くと：2つ同じリクエスト（合計3つ）
3. Topページを視聴すると：3つ同じリクエスト（合計6つ）

つまり、３つリクエストの代わりに、急に６つになりました！


🚨 **各リクエスト　＝　💸💸💸** 🚨

## 問題を起こしたコード

Quiz: 下記のコードでは、どういう問題がありますでしょうか？

```jsx
useEffect(() => {
  const fetchWelcomeMessageFromPaidAPI = () => { /*... logic ...*/ }
  document.addEventListener('api-initialized', fetchWelcomeMessageFromPaidAPI);
}, [/*... dependencies ...*/]);
```

## React.useEffectの復習

Quizの答え知るなら、次の段落に進んで大丈夫です。
そうじゃなければ、少し復習しましょう。

`React.useEffect`を使ったことがありますか？

```jsx
useEffect(() => {
  // some logic

  return () => {
    // cleanup
  };
}, [/* dependencies */]);

```

上記のhookを知らない方へ、[Reactのドキュメンテーション](https://react.dev/reference/react/useEffect)がおすすめです。

`useEffect`の中の`return`の意味を復習しましょう：

- `return`の役割：cleanup コード (例えば、追加されたイベントリスナーの削除など :smiley: )
- `return`の実行タイミング：
    - コンポーネントはunmountされる時
    - useEffectが実行される時

## 問題解決

```jsx
useEffect(() => {
    const fetchWelcomeMessageFromPaidAPI = () => {
        //... some logic ...
    };
    document.addEventListener('api-initialized', fetchWelcomeMessageFromPaidAPI);

    return () => {
        document.removeEventListener('api-initialized', fetchWelcomeMessageFromPaidAPI);
    };
}, [/* dependencies */]);

```

cleanup 関数を追加することで、問題が解決されました。

幸いなことで、早い段階で気づかれて、今回特に損がなかったが、このような片付けはどれだけ大事かということを伝わっている例だなと思いました。

## どうやってこのようなleakを防ぐか？

- イベントリスナーを使うなら、必ずブラウザーのdev toolsコンソールで同じイベントリスナーの数が増えていないか確認しましょう　（`getEventListeners(domElement)` ）
- cleanupのreturn関数を忘れないこと　🤗
- 自分でイベントリスナーを追加しなくても、他のエンジニアのPRをちゃんと確認すること

このように確認がちゃんとできたら、今回の問題はなかったでしょう！😅