OmniAICreator/Qiita-1.07M huggingface dataset:
自衛官からエンジニアへ Elixirから始める Web開発 Part20

この記事は「Elixir Advent Calendar 2023」20日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が
自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリの第20回目です。

それでは、いくぞ！

## nilとは貴様らの頭のことだ！

よーし、今回は前回までifによる判定とそれに伴い学んだtrue,falseについて学習してきたが、今回はnilについてだ。

### nilとは何か？
nilはElixirで「何もない」、「空」、「値が存在しない」ことを示す特別な値だ。他の多くのプログラミング言語で見られるnullやNoneに相当する。nilは何かが欠けている、あるいは未定義であることを表すために使われる。

要するに、貴様らのように何も考えてない頭と同じだ！その空っぽの頭の中にわかるように説明してやるからありがたく思え！

例えば、ある関数が値を返さない場合、その返り値はnilになることがある。また、存在しない辞書のキーを参照した時にも、nilが返される。

```elixir
map = %{a: 1, b: 2}
IO.inspect Map.get(map, :c) # :cは存在しないため、nilが返される
```

### Elixirにおけるnilの特徴
Elixirでは、nilは偽（false）と見なされる。つまり、if文などの条件判定でnilが使われた場合、それは偽として扱われる。これはfalseと同様に動作する。

```elixir
if nil do
  # このブロックは実行されない
else
  # このブロックは実行される
end
```

この例では、条件がnilなので、ifブロックはスキップされ、elseブロックが実行される。

### 注目！ これよりnilの注意点を説明する
nilは特別な値で、何かが欠けているか、未定義であることを示す。しかし、これをエラーと混同してはならない。nilが返されることは、しばしば正常な動作の一部である。貴様らにはまだ、エラーハンドリングは教えてないが、この先教えるので覚えておけ！エラーハンドリングと混同しないようにしろ！

さて、nilの基本はこれで理解したな。貴様らのコードにおいてnilを適切に扱えるようなれ。理解したか？

 それでは 次回 Part21でまた会おう！
AWS WAFを使って本気でAWSアカウントを守る

# はじめに
この記事はDevOps on AWS大全の一部です。
DevOps on AWS大全の一覧は[こちら](https://zenn.dev/tech4anyone/articles/c05ee9777c6de0)。

この記事ではAWS WAFに関連する内容を超詳細にまとめています。

具体的には以下流れで説明します。

- AWS WAFとは
- AWS WAFの仕組み
- AWS WAFの活用
- AWS WAFのベストプラクティス

AWSの区分でいう「Level 200：トピックの入門知識を持っていることを前提に、ベストプラクティス、サービス機能を解説するレベル」の内容です。

# この記事を読んでほしい人
- AWS WAFがどういうサービスか説明できるようになりたい人
- AWS WAFを採用するときのベストプラクティスを説明できるようになりたい人
- AWS Certified DevOps Engineer Professionalを目指している人

# AWS WAFとは
AWS WAFは、Webアプリケーションファイアウォールという意味のサービスです。
Webアプリケーションファイアウォールとは、Webアプリケーションに対する悪意のある攻撃を検知し、防御する仕組みのことで、AWS WAFでは、Webアプリケーションに送られるHTTPリクエストをルールに基づいて検査し、許可するか拒否するかを判断します。

AWS WAFは、AWSのロードバランサーやAPI Gatewayなどのサービスと連携して、Webアプリケーションのセキュリティを向上させます。

なお、WAFはその名の通りL7の防御用でありL3/L4のセキュリティ対策には使えないという点は注意しましょう。

# AWS WAFの仕組み
AWS WAFでは、作成したルールをWeb ACL（Web Access Control List）というグループにまとめます。

Web ACLは、Webアプリケーションに適用するセキュリティポリシーとして機能し、ロードバランサーやAPI Gatewayなどのサービスに関連付けることで、そのサービスに対するHTTPリクエストをフィルタリングできます。

AWS WAFでは、以下の要素を組み合わせてルールを作成します。

## 条件
HTTPリクエストの特定の部分（例えばIPアドレスやヘッダーなど）に対するマッチング条件です。
条件はホワイトリストやブラックリストなどのタイプに分けられます。

## アクション
条件にマッチした場合に実行する動作です。アクションは許可（Allow）、拒否（Block）、カウント（Count）の3種類があります。
許可はHTTPリクエストを通過させることを意味し、拒否はHTTPリクエストを拒絶することを意味します。
カウントはHTTPリクエストを通過させるとともに、マッチした回数を記録することを意味します。

## 優先度
複数のルールが存在する場合に、どのルールから評価するかを決める順序です。
優先度が高いルールほど先に評価されます。

## メトリクス
ルールのマッチング回数や処理時間などの統計情報です。
メトリクスはCloudWatchで確認できます。


# AWS WAFの活用
## アクセスパターン解析
AWS WAFはログをCloudWatchやS3に出力できるため、アクセスパターンの解析に活用することができます。

![](https://storage.googleapis.com/zenn-user-upload/b184aec55643-20231219.png)

## CloudFrontオリジンのセキュリティ向上
AWS WAFはAWS Secrets Managerと組み合わせることでCloudFrontオリジンのサイトのセキュリティを向上させることができます。

![](https://storage.googleapis.com/zenn-user-upload/d41217805616-20231219.png)

## Webアプリケーションのセキュリティ向上
また、AWS WAFでは、以下のような攻撃や脅威からWebアプリケーションを守ることができます。

### SQLインジェクション
データベースに対する不正な操作を行う攻撃です。条件にSQL文が含まれるかどうかを判定することで防ぐことができます。

### クロスサイトスクリプティング（XSS）
Webページに不正なスクリプトを埋め込む攻撃です。条件にスクリプトタグや特定の文字列が含まれるかどうかを判定することで防ぐことができます。

### ボットやスクレイピング
自動化されたプログラムやツールによる不正なアクセスです。条件にIPアドレスやUser-Agentなどの情報が含まれるかどうかを判定することで防ぐことができます。

# AWS WAFのベストプラクティス

AWS WAFを効果的に利用するためには、以下のようなベストプラクティスを参考にしてください。

| ベストプラクティス | 説明 |
| --- | --- |
| ルールのテスト | AWS WAFでは、ルールを作成した後にカウントアクションを適用して、ルールのマッチング回数やメトリクスを確認できます。これにより、ルールの効果や影響をテストすることができます。テストが完了したら、カウントアクションを許可や拒否に変更してください。 |
| ルールの更新 | Webアプリケーションや攻撃の状況は常に変化するため、ルールも定期的に見直しや更新が必要です。AWS WAFでは、ルールのマッチング回数やメトリクスをCloudWatchで監視することができます。これにより、ルールの有効性やパフォーマンスを評価することができます。また、AWS WAFでは、AWS Marketplaceから有料や無料のルールセットを購入して利用することができます。これにより、専門的な知識や手間なくルールを更新することができます。 |
| ルールの最適化 | AWS WAFでは、ルールの数や条件の数に応じて課金されます。そのため、不要なルールや条件は削除することでコストを削減できます。また、ルールの優先度を適切に設定することで、処理時間を短縮できます。一般的には、マッチング回数が多いかつ重要度が高いルールほど優先度を高く設定すると良いです。 |

# まとめ
この記事ではAWS WAFに関連する内容を超詳細にまとめました。

- AWS WAFとは
- AWS WAFの仕組み
- AWS WAFの活用
- AWS WAFのベストプラクティス

次回はAWS Firewall Managerを超詳細解説します。
Reactで画像のクロップをしたい

## cropライブラリ
Reactで画像のcropをするライブラリはそれなりに存在しており、npmのトレンド等を見ると以下が候補になります。
* react-image-crop
    * https://github.com/DominicTobias/react-image-crop
    * npmでのダウンロード、Githubのスター数が一番多く更新も頻繁に行われている
* react-easy-crop
    * https://github.com/ValentinH/react-easy-crop
    * 2021年ころからユーザーが伸びており、更新も頻繁に行われている
* 他
    * react-cropper
        * https://github.com/react-cropper/react-cropper
    * react-avatar-editor
        * https://github.com/mosch/react-avatar-editor

いろいろな種類がありますが、react-image-cropかreact-easy-cropを選んでおくのが無難そうです。また、この2つのライブラリはcropの仕方が異なるので用途によってどちらかを選ぶのがよさそうです。

## cropの方法
どのように画像をcropするのかがreact-image-cropとreact-easy-cropで異なっています。

### 画像を固定してcrop領域を動かす
react-image-cropはこの方式です。画像をcropするのに多くの人がこの方法を連想すると思います。


### crop領域を固定し画像を動かす
react-easy-cropはこの方式です。crop領域が固定されているので必ず丸く切り抜くとか、比率を1:1に固定したいときとかの場合はこちらのやり方の方がユーザーにとってわかりやすそうです。

## cropした画像をつかう
これらのcripライブラリでは実際にcripした領域を取り出すといった機能は提供されていません。なので、自前でcanvasを作ってそこから画像にする必要があります。
各ライブラリにはサンプルコードがあり、それを参考にするのが最も簡単です。
**reac-image-crop**
https://github.com/DominicTobias/react-image-crop/blob/11.0.1/src/demo/canvasPreview.ts
**react-easy-crop**
https://github.com/ValentinH/react-easy-crop/blob/v5.0.4/docs/src/components/Demo/cropImage.ts

ライブラリ特有の部分もありますが、どちらのコードも同じことをしています。
react-easy-cropのコードの方がいろいろな用途に対応しやすいように書かれているため、参考にするならreact-eacy-cropの方がおすすめです。
【AWS】CloudFront

# CloudFrontとは
動画やアプリケーションなどのコンテンツを迅速かつ安全に伝送する，**高速コンテンツ伝送ネットワーク(CDN)サービス**のこと。世界規模のデータセンターであるエッジロケーションのネットワークを使い，コンテンツを配信することでS3やEC2から配信するより速く配信することが可能。

CloudFrontを使ったコンテンツ配信は，**ディストリビューション**(**ドメイン**ごとに作成されるCloudFrontの設定の集合体)を作成することで実現。

キャッシュのヒット率やエラーの発生状況などは**CloudWatch**で確認できる。

:::note info
**CDN(Content Derivery Network)**
Webコンテンツの安定的な配信を実現するために構成されたネットワーク。世界中にあるキャッシュ型配信サーバからコンテンツを配信することで，コンテンツの表示速度を加速させる。またこれによって，オリジンサーバー(コンテンツを配信するサーバ)の配信作業の負担を減らすことが可能。

クライアントはまずエッジサーバ(オリジンサーバのコンテンツの一部を一時的に保持(**キャッシュ**)する)にアクセスし，エッジサーバにコンテンツがあればそのままクライアントに返却する。
無ければオリジンサーバから取得する。取得したコンテンツはキャッシュサーバに格納。
:::

CloudFrontの設定項目
| 項目 | 説明 |
| ---- | ---- |
| Origins | オリジンに関するパラメータを設定 |
| Behaviors | キャッシュの挙動やオリジンのアクセスの仕方を指定 |
| Distribution Settings | ディストリビューション全体に影響するパラメータを設定 |

## メリット
* 安全性
セキュリティ面で優れたCDNであるため，安心して使用できる。またCloudFrontはドメインの証明書を使用でき，ユーザからHTTPSのアクセスを受けることでデータを保護できる。

* 低レンテンシー
世界中にエッジサーバーを持つため，あらゆる場所からのアクセスに対応可能。

# 参考
https://www.youtube.com/watch?v=HqbQFS-o8EY&list=PLPzcoMdqG5noLR7rAc552mvPADUmmdSt1&index=13
AWSの基本・仕組み・重要用語が全部わかる教科書
自衛官からエンジニアへ Elixirから始める Web開発 Part19

この記事は「Elixir Advent Calendar 2023」19日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が
自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリの第19回目です。

それでは、いくぞ！

## true, false とは
よーし、前回貴様らはifとelseについて学んだな！ しかし、そこで突如出てきたtrue, false, nil　についてはまだ何も学んでない、そこで今回は まずはtrueとfalseについて教えてやろう！

### true, false
まずは true と false について学ぶぞ。これは貴様らがコードの荒野を生き抜くために欠かせない知識だ。集中して聞け！

### true とは何か？
true はブール値の一つで、"真"、"正しい"、"はい"ということを意味する。これは条件式が真の場合に使用される。たとえば、if文で条件が真の場合に実行されるブロックを決定するのに使われる。Elixirでは、trueはブール値の真を表すために明示的に使用される。

例えば
```elixir
if true do
  # このブロックは常に実行される
end
```
この例では、条件が true なので、ifブロックの中身は常に実行される。

### false とは何か？
次に、false。これもブール値だが、"偽"、"間違い"、"いいえ"を意味する。条件式が偽の場合に使われる。例えば、条件が偽の場合に実行される else ブロック

```elixir
if false do
  # このブロックは実行されない
else
  # このブロックは実行される
end
```
この場合、条件が false なので、if ブロックはスキップされ、else ブロックが実行される。

### Elixirの真偽値に関する特徴
Elixirにおいては、true と false 以外にも注意すべき点がある。Elixirでは、false と nil 以外のすべての値は真とみなされる。これは他の言語と異なる場合があるから、注意が必要だ。

さて、これで true と false の基本を理解したな。この知識を使って、貴様らのコードを正確にコントロールしろ。理解したか？

次回は、nilとは何かについて説明する！ それでは 次回 Part20でまた会おう！
Coqを試してみた

# はじめに
[Retail AI Adventurers Advent Calendar 2023](https://qiita.com/advent-calendar/2023/rai-adventurers)の19日目の投稿です。
昨日は@urakawa_jinseiさんの[Airで始めるGo開発](https://qiita.com/urakawa_jinsei/items/44b27d2c23d1c8bb68d7)でした。

# この記事のゴール
* Coq と呼ばれる証明支援器を試してみる記事です。
* 与えられた命題に対して、手作業で得られた証明とCoqの操作により得られた証明が論理的に一致していることを確認してみます。

# 環境構築
* Mac ユーザの方を対象にしています。
    * [Coq](https://formulae.brew.sh/formula/coq)
    *  [CoqIDE（Coq の 開発環境）](https://formulae.brew.sh/cask/coqide)

# 本記事で使用する命題
```math
\forall P ((P \Rightarrow Q) \Rightarrow Q) \Rightarrow ((P \Rightarrow Q) \Rightarrow P) \Rightarrow P
```

# 証明 | without Coq
（注意）本記事では証明の詳細には立ち入りませんので、証明を詳しく追いたい方は[^1]を参照してください。
* 変形1
    * *givens*
    ```math
    \forall P ((P \Rightarrow Q) \Rightarrow Q)
    ```
    * *goal*
    ```math
    ((P \Rightarrow Q) \Rightarrow P) \Rightarrow P
    ```
* 変形2
    * *givens*
    ```math
    \forall P ((P \Rightarrow Q) \Rightarrow Q)
    ```
    ```math
    (P \Rightarrow Q) \Rightarrow P
    ```
    * *goal*
    ```math
    P
    ```
* 変形3(*modus ponens* を適用)
    * *givens*
    ```math
    \forall P ((P \Rightarrow Q) \Rightarrow Q)
    ```
    ```math
    (P \Rightarrow Q) \Rightarrow P
    ```
    * *goal*
    ```math
    P \Rightarrow Q
    ```
* 変形4
    * *givens*
    ```math
    \forall P ((P \Rightarrow Q) \Rightarrow Q)
    ```
    ```math
    (P \Rightarrow Q) \Rightarrow P
    ```
    ```math
    P
    ```
    * *goal*
    ```math
    Q
    ```

* 変形4 において、*givens* の1行目から *goal* が得られるので証明終。

# 証明 | with Coq
（注意）本記事では Coq の使用方法の詳細には立ち入りませんので、使用方法を詳しく追いたい方は[^2]を参照してください。
以下のコードを実行します（Coq の拡張子は `.v` らしいです）。

```coq: introduction.v
Goal forall (P Q: Prop), (forall P: Prop, (P -> Q) -> Q) -> ((P -> Q) -> P) -> P.

Proof.

intros.

apply H0.

intro. (* <- ここまで実行します*)

(*
apply (H(P->Q)).

apply (H P).

Qed.
*)
```

以下の結果が得られました。

```coq: result
1 subgoal
P, Q : Prop
H : forall P : Prop, (P -> Q) -> Q
H0 : (P -> Q) -> P
H1 : P
______________________________________(1/1)
Q
```

`証明 | without Coq`の `変形4 givens / goal`と見比べてみます。
* *givens*（再掲）
```math
\forall P ((P \Rightarrow Q) \Rightarrow Q)
```
```math
(P \Rightarrow Q) \Rightarrow P
```
```math
P
```
* *goal*（再掲）
```math
Q
```

一致していることが確認できました。

残りのコードを実行すると証明完了になります。
```coq: introduction.v
Goal forall (P Q: Prop), (forall P: Prop, (P -> Q) -> Q) -> ((P -> Q) -> P) -> P.

Proof.

intros.

apply H0.

intro.

apply (H(P->Q)).

apply (H P).

Qed.
```

めでたしめでたし。

# まとめ
* まだ始めて1日ですが、表現したい命題をうまくコードに落とし込むためには Coq のライブラリに慣れる必要があり、習得コストはなかなか高そうです。
* 慣れると面白いかもしれません。

# 参考
[^1]: https://www.amazon.co.jp/How-Prove-Structured-Daniel-Velleman/dp/110842418X/ref=tmm_hrd_swatch_0?_encoding=UTF8&qid=&sr=
[^2]: https://www.iijlab.net/activities/programming-coq/
自衛官からエンジニアへ Elixirから始める Web開発 Part18

この記事は「Elixir Advent Calendar 2023」18日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が
自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリの第18回目です。

それでは、いくぞ！

## 貴様らはまず ifによる判定処理 をマスターしろ

前回、貴様らが作ったものを改良していこう。これはアイデア次第ではどのようになるが、貴様らの書いた読みにくいこのコードをさらに今回から何回かに分けていくつかのバリエーションを見せてやろう。

前回書いたコードは覚えてるか？　
何覚えてないだと、よーし、今から思い出させてやろう！貴様ら前回書いたコードを提示してやるから文字数分腕立てだ！

```elixir
defmodule TNT do
    def create_c4({"RDX", rdx},{"ポリイソブチレン", polyisobutylene},{"モーターオイル", motorOil},{"セバシン酸ジオクチル", dioctylSebacate},{"ガソリン", gasoline}) do
        { g , ml } =
        [ rdx, polyisobutylene, motorOil, dioctylSebacate, gasoline ]
        |> Enum.split(-1)

        g_results = 
        Enum.map(g, &(String.codepoints(&1) |> List.delete_at(-1) |> List.to_string() |> String.to_float()))

        ml_result = "25ml" |> String.codepoints() |> List.delete_at(-1) |> List.delete_at(-1) |> List.to_string() |> String.to_integer()
        
        g_results ++ [ml_result]
    end
end
```

よーし、思い出したようだな。そして、それを踏まえてさらに、いくつかの書き方を見せてやろう。まずは、以下の場合だ。

```elixir
defmodule TNT do
  def create_c4({"RDX", rdx}, {"ポリイソブチレン", polyisobutylene}, {"モーターオイル", motorOil}, {"セバシン酸ジオクチル", dioctylSebacate}, {"ガソリン", gasoline}) do
    materials = [rdx, polyisobutylene, motorOil, dioctylSebacate, gasoline]

    Enum.map(materials, fn material ->
      # 単位を取り除く
      numeric_part = material
                      |> String.trim_trailing("g")
                      |> String.trim_trailing("ml")

      # 小数点の有無に基づいて数値に変換
      if String.contains?(numeric_part, ".") do
        String.to_float(numeric_part)
      else
        String.to_integer(numeric_part)
      end
    end)
  end
end
```

ここで、貴様らには初めて目にするものがあるな、そう `if`, `else`だ 貴様らが前回書いたクソコードは貴様らに足りない知識が多いということだ。


そこで、注目！今からElixirの判定処理、ifとelseについて基本を叩き込む。耳をダンボにしてよく聞け、これは貴様らのプログラミング戦場で生き残るための必須知識だ！

### ifとは何か？
Elixirにおけるifは条件判定を行う。これは「もし条件が真（true）なら、このコードを実行しろ！」という命令だ。たとえば
```elixir
if 条件 do
  # 条件が真の場合に実行されるコード
end
```
ここで重要なのは、条件が真のときだけ指定されたコードが実行されるということだ。貴様らの頭に叩き込め！

### elseとは何か？
では、条件が偽（false）の場合はどうするか？ここでelseが登場する。elseは「もし条件が偽なら、こっちのコードを実行しろ！」という命令だ。
```elixir
if 条件 do
  # 条件が真の場合に実行されるコード
else
  # 条件が偽の場合に実行されるコード
end
```

### 注目！　ifの注意点を伝達する
Elixirでは、if文は必ず値を返す。条件が真ならifブロックの値を、偽ならelseブロック（あるいはデフォルトでnil）の値を返す。だが、注意せよ！Elixirでは偽と評価されるのはfalseとnilだけだ。それ以外はすべて真として扱われる！

さあ、これで貴様らもifとelseの基本はマスターしたはずだ。だが油断するな！プログラミングは常に変化し、新しい挑戦が待ち受けている。常に学び、練習し続けるのだ。

それでは、今日はここまで それでは次回 Part19でまた会おう！
FlutterプロジェクトでiOSとAndroid向けにもコードフォーマットをかける


コードフォーマットやLint処理はコードベースの一貫性、可読性、およびバグの早期発見に寄与し、ソフトウェアプロジェクトの持続可能性を向上させ内部品質の担保に寄与します。


## コードフォーマットの実行処理

Flutter は Dart で書かれているものの、処理によっては iOS / Android の実装が必要になる場面があります。
そのため、Dart だけではなく iOS / Android 向けにもコードフォーマットの実行環境を整えています。

formatter の実行は git イベントを hook して実行していますが、変更内容に関わらず各言語の formatter を実行してしまうと無駄に実行時間がかかってしまいます。

そのため、自分が作るプロジェクトでは hook で実行された際に、変更差分を確認しファイルの拡張子に応じて、必要なformatterを実行できるスクリプトを実行しています。

```flutter_format.sh
#!/bin/bash

# フォーマット済みの拡張子を格納する配列
formatted_exts=()

# Gitの変更差分を取得し、変更されたファイルの一覧を取得
changed_files=$(git diff --name-only HEAD)

for file in $changed_files; do
  # 拡張子を取得
  ext="${file##*.}"

  # 既にフォーマット済みの拡張子であればスキップ
  if [[ " ${formatted_exts[@]} " =~ " $ext " ]]; then
    continue
  fi

  case $ext in
    "dart")
      # TODO: Dartファイルの場合はdart formatを実行
      formatted_exts+=("$ext")
      ;;
    "swift")
      # TODO: Swiftファイルの場合はSwiftFormatを実行
      formatted_exts+=("$ext")
      ;;
    "kt")
      # TODO: Kotlinファイルの場合はktlintを実行
      formatted_exts+=("$ext")
      ;;
    *)
      # 他の拡張子の場合は何もしない
      ;;
  esac
done
```

一応実行時間にも触れておくと、上記のスクリプトの中から formatter を実行してもほぼ変化はありません。不要な formatter を実行してしまう時間のことを考えると、むしろ短縮できる場合の方が多いのかなと思います。

```
// 拡張子を元に実行
time ./script/flutter_format.sh
Formatted lib/main.dart
Formatted 272 files (1 changed) in 1.18 seconds.
./script/flutter_lint.sh  1.44s user 0.21s system 101% cpu 1.634 total
```

```
// 直接実行
time fvm dart format test lib
Formatted lib/main.dart
Formatted 272 files (1 changed) in 1.13 seconds.
dart format test lib  1.45s user 0.19s system 104% cpu 1.565 total
```


## 各言語向けにコードフォーマットをかける方法

formatterの処理は各プロジェクトの実装内容に応じて良きように設定してください。
自分が実行している内容は参考として記載しておきます。仕様とルールセットも併せて記載しています。

### Dart向け
format処理 `dart format` で実行。fvmなどを利用している場合はちゃんと `fvm dart format ...` にするのを忘れないように。

チームの方針に応じてルールを変えたい場合は、`analysis_options.yaml` を作って、そこに設定を追加してください。

https://dart.dev/tools/linter-rules


### iOS向け
iOSはSwiftで構成されているので、SwiftFormat を利用しています。
Flutter は CocoaPods を利用して Pacakge の管理をしているので下記を `podfile` に追記すれば実行準備が整います。

```
pod 'SwiftFormat/CLI', '$指定のVer'
```

SwiftFormat は Pods ディレクトリの中に追加されるので、formatter を実行するには下記のようにします。
下記はFlutterプロジェクトの ios ディレクトリにいる想定です。実行場所によって良きように調整してください。

```
./Pods/SwiftFormat/CommandLineTool/swiftformat .
```

チームの方針に応じてルールを変えたい場合は、`.swiftformat` を作って、そこに設定を追加してください。


https://github.com/nicklockwood/SwiftFormat

https://github.com/nicklockwood/SwiftFormat/blob/main/Rules.md

### Android向け

Android は Kotlin で構成されているので、Ktlint を利用しています。
実行準備を整えるには指定の `build.gradle` に良きように設定を追加してください。　

formatter は下記で実行できます。
`build.gradle` がある場所で実行する必要があるのは注意してください。

```
./gradlew ktlintFormat
```

チームの方針に応じてルールを変えたい場合は、`.editorconfig` を作って、そこに設定を追加してください。


https://pinterest.github.io/ktlint/latest/

https://pinterest.github.io/ktlint/latest/rules/code-styles/
イヤイヤが発動したらLINEBotに任せな！

こそぷろ(子育てプロトタイピング) #protoout Advent Calendar 2023 24日の記事です。

https://qiita.com/advent-calendar/2023/kosopro2

# イヤイヤ期とは？
イヤイヤ期とは、子どもが成長する過程で自己主張が激しくなる２歳前後の時期を指します。
ママやパパからの声掛けに対して自分の意にそぐわないと「イヤ！」と拒否される、
子育てにおける最大の難関の１つです。

https://www.ena-clinic.com/column/1182/

２歳前後の子のパパママさん、
こんな状況を経験されたことないでしょうか？

:::note warn
**イヤイヤ期バッドエンド事例**
- おむつを脱がせたら自分で脱ぎたかったと泣く😭させてみたら自分で脱げなくて泣く😭
- 着たい服が洗濯中で着れなくて泣く😭
- 朝の忙しい時間たいに保育園行きたくないと泣く😭
- お風呂に入りたくないと泣く😭
- 自分の食べたいものが食事のメニューになくて泣く😭
- スーパーで好きなおやつ見つけて買わないと泣く😭
:::

イヤイヤモードが発動する条件はキリがありません
ってかデフォルトがイヤですよね？ww

なんでもかんでも否定され続けるパパママを救うべく、こんなものを作成してみました。

# 作成したもの

> LINEBot：イヤイヤ救急

<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150628/2329a401-1b32-27ce-15b0-3e0b859435c8.gif">

イヤイヤが発動したお子様の対応って~~めんどくさい~~大変なんです。
イヤイヤ救急は困った時にLINEから簡単に呼び出せます！
状況や要望を説明すると、ベテラン保育士さんのように魔法のといかけを持ってきます。

# 構成

このLINEBotは↓の動画を参考にmake(旧integromat)だけでノーコードで作成しました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/uj3v_vgVzhc?si=ohpWLntEmtNki1Qb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

makeのシナリオは下記の通りです。
ユーザーからの相談内容をChatGPTに投げて解決につながるヒントを生成し、リプライメッセージで返します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150628/0220d7e5-e39a-def6-7fc0-4991a2195711.png)

<details><summary>プロンプトと実行結果はこちら</summary>

`Role:System`で↓のプロンプトを与えて、
`Role:User`でユーザーからの相談内容をセットして実行する

:::note info
# 役割
あなたは優秀な保育士です。
特に２歳児への保育経験が豊富です。

# 命令
以下の対象の子どもに対して、どのように対応しますか？
以下の状況を踏まえて、子どもの気分の変える魔法のような問いかけを３つ作成してください
１つ目は子どもの気持ちを汲み取るような問いかけとします。
２つ目は質問者の意図を子どもに伝える問いかけとします。
３つ目は状況に関係しないけど子どもの気分の変える魔法のような問いかけとします。

# 対象
２歳から３歳の子ども
泣いているまたは怒っている
子どもは自分の気持ちを言葉で表現できない

# 制約
解説は不要です。問いかけのみを返してください。
問いかけは15文字以上30文字以内とします。
他に必要な情報が必要なら追加で質問してください。

# 出力形式
1.{１つ目},2.{２つ目},3.{３つ目}
:::

レスポンス
```json
[
    {
        "id": "chatcmpl-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "object": "chat.completion",
        "created": "2023-12-17T14:15:06.000Z",
        "model": "gpt-3.5-turbo-0613",
        "choices": [
            {
                "index": 0,
                "message": {
                    "role": "assistant",
                    "content": "1.お腹いっぱいなんだね、でも食べ終わる前にお腹が空くかもしれないよ\n2.ご飯は全部食べようかな？お腹が空いたら元気に遊べるよ\n3.どんなおかし食べたい？"
                },
                "logprobs": null,
                "finish_reason": "stop"
            }
        ],
        "usage": {
            "prompt_tokens": xxx,
            "completion_tokens": xx,
            "total_tokens": xxx
        },
        "system_fingerprint": null
    }
]
```

出力形式を無視して改行してくるところがねぇ...😥

</details>

# SpecialThanks

このLINEBotを作成するにあたって、**#こそぷろ**で日々活躍されているみなさんの記事をたくさん参考にさせて頂きました。
このLINEBotは最初から最後まで１人で作成しましたが、
**#こそぷろ**メンバー達と出会ってなければこれを作ることはなかったです。
感謝を込めて[ProtooutStudio](https://protoout.studio/)を紹介させていただきます。
最後まで読んでいただき、誠にありがとうございました🙇‍♂️

https://note.com/navy_blue919/n/n6f35252c40e3?sub_rt=share_h

https://qiita.com/organizations/protoout-studio

https://protoout.connpass.com/
【Angular 17】CSSフレームワーク「Tailwind CSS」を導入する全手順

## 概要
Angular 17 に **「Tailwind CSS」** を入れる手順の備忘録

「Nx コマンド（モノレポ管理ツール）」を使用するとより簡単に入るが、今回は使わない。

### 前提
- Angular アプリケーションは構築済みであること
- バージョン
  - Node: v20.10.0
    - npm: v10.2.3
  - Angular: v17.0.7
  - Angular CLI: v17.0.7

Anguar 17 の環境構築がまだの方はこちら👇

https://qiita.com/to3izo/items/1e37da952f530f31d1e4

## Tailwind CSS とは
「[Tailwind CSS](https://tailwindcss.com/)（テールウィンド・シーエスエス）」とは、オープンソースの CSS フレームワークです。

※ ちなみに、**Tailwind ＝「追い風」「順調」**  の意味

**"Utility First（ユーティリティファースト）"** をコンセプトに設計された CSS のフレームワークで、レスポンシブ対応やオシャレなデザインのスタイル定義がより柔軟に簡単にできる技術です。

主な特徴は、Bootstrap などの他の CSS フレームワークとは異なり、ボタンやテーブルなどの要素に対して、事前定義されたクラスが無い点です。

つまり、Bootstrap の様に、導入時点でボタンやテーブルに、勝手にオシャレなスタイルが当てられることはなく、導入後にちゃんと自分でスタイル定義を書かなければいけません。

button, table, input という単位よりは、text, color, background-color などのもっと細かいパラメータ単位でのスタイル表現が用意されているというイメージです。

例えば、Bootstrap と同じボタンを実装する場合、以下の様に書きます。

**ボタン（Bootstrap）**
```html
<button class="btn btn-primary" type="button">Primary</button>
```

**ボタン（Tailwind CSS）**
```html
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Primary </button>
```

Tailwind CSS の方がクラス記載が多くなり可読性は下がります。一応、`@layer` と `@apply` でまとめることができますが、それでも各場所が HTML ファイルから別の場所に変わるだけなので、CSS ファイルを見るとやっぱり Bootstrap 等に比べて見づらくはなります。

つまり、カスタマイズ性よりもコード量などを重視するなら Bootstrap などの方が便利で、カスタマイズ性を重視するなら Tailwind CSS の方が便利という印象です。



## 手順

まず、導入したいアプリのプロジェクトディレクトリに移動します。
そこで、Tailwind CSS 関連の node モジュールをインストールします。

```bash
npm install -D tailwindcss postcss autoprefixer
```

初期化して設定ファイルを自動生成させます。

```bash
npx tailwindcss init
```

`tailwind.config.js` というファイルが出来上がるので、中身を以下の通りに追記します。

```diff_javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
+   "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

ちなみに、**.ts** ファイルにしても動作します（tsconfig.json がちゃんと動作すれば）。お好みでどうそ。

```ts:tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{html,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
export default config

```

::: note warn
もし、Angular のエントリーポイントのソースファイルが入っているディレクトリ名が「src」以外の場合は、その名前に置き換えてください。
:::

既存のグローバルなスタイル設定ファイルに、以下の様に追記する。
（styles.css または styles.scss など）

```diff_css:styles.css
  /* You can add global styles to this file, and also import other style files */
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

```

::: note warn
グローバルのスタイルシート設定ファイル名が「styles.css（.scss, .sass）」以外の場合は、その名前に置き換えてください。
:::

「`@tailwind`」に警告が出る可能性がありますが、無視してそのまま進めても大丈夫です（対応方法は一応ありますが、あまり効果的でなかったので今回は割愛します）。


以上で導入は完了🙌✨

## サンプルを試用して確認

公式の「[Components](https://tailwindui.com/components?ref=sidebar)」のページに行くとたくさんサンプルコードが見れますので、こちらで好きなものを選び、自分のソースコードに貼り付けて表示確認してみましょう。
（鍵マークが付いていないものは無料で見れます）

下記のように、サンプルの右上にあるコピーアイコンを押すと、ソースコードのコピーができます。そのまま貼り付けたら利用可能です。
![サンプルコピーボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/82167007-fe56-e3b5-5c0b-9a30f07afe54.png)


サンプルの通りに画面に表示されたら成功です！
（実際に貼り付けて表示させた画面がこちら👇）
![サンプル導入.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/ac253996-f347-ee5e-d688-49303a86647e.png)

あとは、好きにスタイルをカスタマイズしましょう！！
Open Source Summit Japan 概要

### はじめに
パナソニックホールディングス株式会社でOSSコンプライアンス推進を担当している加藤と申します．
本日は、オープンソースに関するイベント Open Source Summit Japan 2023（OSS Japan 2023）について紹介したいと思います。

### Open Source Summit Japan (OSS Japan) ってなに？
The Linux Foundationが主催するオープンソースソフトウェアに関する国際技術カンファレンスです．類似イベントに、Open Source Summit (North America) や Open Source Summit EU があり、毎年日本でも OSS Japan として開催されています(ここ数年は12月の開催です)。Open Source Summit Japan という名称になったのは2017年からで，過去は Japan Linux Symposium (2009年)，Linux Con Japan (2010～2016年) という名称でした．過去はLinux関連の話題がメインでしたが，OSS全体をテーマになってきて Open Source Summit という名称になったようです．近年は技術的なSessionだけでなく，コミュニティ運営やOSS推進(Open Source Program Office)などのテーマでもSessionが組まれています．

例年 OSS Japan には，世界中から，OSSプロジェクト・OSSコミュニティで活動するエンジニアが多数参加します．（例年，600～700人が参加しています．)　日本にいながら，世界のオープンソースの最新情報を聞いたり，海外のエンジニアはもちろんOSSプロジェクトのキーパーソンとも直接話しをする機会がもてるイベントです．

### Open Source Summit Japan 2023 （OSS Japan 2023)
[OSS Japan 2023](https://events.linuxfoundation.org/open-source-summit-japan/ ) は 2023年12月5日～5日 の2日間で開催されました．
( [OSS Japan 2023](https://events.linuxfoundation.org/open-source-summit-japan/) のリンク先は最新の年のOSS Japan のサイトにリンク変更されます)

[OSS Japan](https://events.linuxfoundation.org/open-source-summit-japan/) は，おおむね，午前中に Keynote，午後からは技術分野ごとに複数 Session 同時進行，というプログラムです．最近のThe Linux FoundationのConferenceはYoutubeでもKeynote/Session動画が公開されています．https://www.youtube.com/playlist?list=PLbzoR-pLrL6pM99KxvfhY_9uWOsYkIbOh

動画が公開されることが分かっていても，現地参加者は多く，OSS Japan 2023 では，登録者数は約750人で，700人以上が実際に来場したそうです．現地ではKeynote/Sessionの臨場感を味わえますし，質問できるのも現地参加ならでは．Session後にはSpeakerの方が囲まれて質疑応答や議論が続くのもおなじみの光景ですね．格式張った学会のような雰囲気ではなく，自由闊達な雰囲気のカンファレンスです．

また，OSS Japan では Session のスライドがUpされていることも多いので，スケジュールページから気になる Session の概要に飛ぶとスライド(PDF)が公開されていて参照できると思います．
[OSS Japan 2023 の スケジュールはこちら](https://ossjapan2023.sched.com/?iframe=no )

### Open Source Summit Japan 2023 (OSS Japan 2023) Keynote
私の独断と偏見で非常に簡単に Keynote をレポートしようと思いましたが，今回のOpen Source Summit Japanでは，やはり，Linus Torvalds さんの対談形式でのKeynoteでしょう！ [Youtube動画](https://www.youtube.com/watch?v=OvuEYtkOH88&list=PLbzoR-pLrL6pM99KxvfhY_9uWOsYkIbOh&index=3)

Linusさんの来日はいつぶりでしょう？ Linusさんが登壇するKeynoteでは定番となるDirk Hohndelさんとの対談形式で，Linux Kernel 6.7 RC の状況や，Linux Kernel開発全体の状況 (Rustの導入状況，メンテナーの高齢化について，など) について語られました．個人的には，オープンソースの開発やメンテナーの役割で「コミュニケーション」が非常に重要なことを語られていたのが印象的でした．


### 最後に
Open Source Summit では，広く OSSコミュニティ・OSSプロジェクトのことを知ることが出来る貴重な機会です．OSS Japan だけでなく，The Linux Foundation 主催のカンファレンスは世界中で開催されています．[The Linux Foundation の Event ページ](https://events.linuxfoundation.org/) でイベントスケジュールを確認して，興味のあるイベントに登録・参加してみましょう．
【MSX0】INFO.PAS【Turbo Pascal】

# はじめに
『MSX0 Stack』付属の IoT BASIC サンプルを『Turbo Pascal』へ移植してみます。

 - [【MSX0】IoT BASIC サンプルの移植【Turbo Pascal】(Qiita)](https://qiita.com/ht_deko/items/2362488c5c99aec4afbf)

# INFO.BAS
◆MSX0 Stack 情報表示

| 項目 | 説明 |
|:---|:---|
| 概要 |システムメニューにある [[MSX0 Stack 情報]](https://qiita.com/ht_deko/items/f9eb7a5e5e215230b802#msx0-stack-%E6%83%85%E5%A0%B1) と同等のプログラムです。 |
| ファイル名 | INFO.BAS |
| 対応デバイス |  |
| コメント |  |

:::note info
ファイルは存在するのですが、`DOC\SAMPLES.TXT` には説明がありません。`SYSMENU.BAS` と差し替えられたのでしょうか？
:::

**See also:**

 - [『MSX0 Stack』の操作方法 - ハードウェア (Qiita)](https://qiita.com/ht_deko/items/cdb1594e9879a5e9e660)

## MSX0 Stack での挙動

`INFO.BAS` をロードして、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/501b027a-93b2-cade-2d31-95a2072a3eb6.png)

実行してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/bc021023-74e5-3130-9986-dd2e4ef46484.png)

ホスト名、内部ソフトウェアバージョン、IP アドレス、ヒープメモリ、バッテリーレベルが表示されます。ディスク内に `SYSMENU.BAS` が存在すれば、終了時に実行されます。

:::note info
プログラムは〔Ctrl〕+〔Stop〕(リモートコントロールパネルからは〔Ctrl〕+〔F12〕) または画面タッチ (リモートコントロールパネルならマウスクリック) で中断できます。
:::

## Turbo Pascal へ移植

別途、MDL-LIB と `SYSUTILS.LIB`、`IOT.LIB` が必要です。

 - [MDL-LIB version 2.2 の使い方 (Qiita)](https://qiita.com/ht_deko/items/6f15aee0bd25b550e4df)
 - [【MSX0】IOT.LIB (Qiita)](https://qiita.com/ht_deko/items/a5c0bf6e7969093beb3c)

```pascal:INFO.PAS
program INFO;
{$I MDLLIB.LIB}
{$I VRAM2.LIB}
{$I GAMEIO.LIB}
{$I SYSUTILS.LIB}
{$I IOT.LIB}
var
  I: Integer;
begin
  ClrScr;
  ScrMode(1);
  GoToXY(1, 2);
  Writeln('name : ', IoTGetStr('host/name')      );
  Writeln('sw   : ', IoTGetStr('host/sw_version'));
  Writeln('ip   : ', IoTGetStr('host/ip')        );
  while True do
  begin
    GoToXY(1, 6);
    Writeln('heap : ', IoTGetInt('host/heap'         ):4 , ' KB');
    Writeln('batt : ', IoTGetInt('host/battery/level'):4 , ' %' );
    for I:=1 to 32 do
      begin
        if Keypressed or (Pad(4) <> 0) then
          Exit;
        Delay(100);  
      end;
  end;
end.
```

実行してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/4361a9a1-83bc-7752-b2dc-d3433bd893fa.png)

ホスト名、内部ソフトウェアバージョン、IP アドレス、ヒープメモリ、バッテリーレベルが表示されます。ファンクションキーの表示がないので、ちゃんと Turbo Pascal での実行結果です。`SYSMENU.BAS` に相当するものはないので、プログラムを抜けると単純に終了します。

:::note info
任意のキーまたは画面タッチで中断できます。
:::

### 解説

#### Pad()
`Pad(4)` は汎用 I/O ポート (ジョイスティックポート) #2 に接続されたタッチパッドの押下を検出しています。汎用 I/O ポート #2 に何を接続するかは [[Setup Utility]](https://qiita.com/ht_deko/items/2ccf08e3014fbe46e913#input) で変更可能なので、タッチパッドを `JOY2` に設定していないと、画面タッチでは抜けられなくなります。

#### 更新頻度
BASIC では 100 回の FOR ループ内でタッチを待ち、FOR 文実行の 20 回毎に、ヒープメモリとバッテリーレベルを更新しています。実測すると 4 秒くらいで更新されているようでしたので、Turbo Pascal のコードでも大体同じくらいの頻度で更新されるようになっています。

#### スクリーンモード
オリジナルの通りに移植したので、スクリーンモードを変更して元に戻していません。ちょっとお行儀がよくないですね。

**See also:**

 - [PAD() - MDL-LIB version 2.2 の使い方 (Qiita)](https://qiita.com/ht_deko/items/6f15aee0bd25b550e4df#pad)

# おわりに
今回の移植に関して難しい所は特にありませんでした。
教材について

# はじめに
自分がどれだけやっていないか、どれだけできないか、甘い人間かを他の方々の記事などと見比べて実感する為に書き起こしてみました。



# 使っている教材
* Progate(有料）
* スッキリわかるJava入門 第3版
* せかチャン - 世界一わかりやすい情報科チャンネル(Youtube)

# Progate
Progateは多分2年前ぐらいから始めた。
* 修了レッスン
    * HTML＆CSS
    * JavaSclipt
    * Java
    * Ruby
    * SQL
    * Node.js
    * Sass

概ね一通りはやった気がしますが足りていない。
HTML＆CSS以外1周のみ、PythonやPHPなどに至ってはやってすらない。最後に使ったのも半年以上前。内容忘れてます。

思い出す程度でまずはまた再開したい。未経験だからプログラミングに触れるという意味では最適と感じたから。

また一通り終わったらレベルアップしてProgateよりレベルアップしたものを探そう




# スッキリわかるJava入門 第3段
Javaは初学者には難しく入りづらく挫折してしまうというのをよく耳にしていた。
ただ、ゆくゆく他の言語学ぶ時にJavaを学んでおけば強みになりそう、需要がたくさんと思い（実際どうなのかはしりませんが）Pythonと迷いましたがJavaを選択。
そして入門としてのおすすめ教材が「スッキリわかるJava入門」だなと思い購入

* 進捗具合
    * 1章　プログラムの書き方
    * 2章　式と演算子
    * 3章　条件分岐と繰り返し
    * 4章　配列

以上が現段階で現段階で学んだもの。5章以降はまだ読んですらない。
進行度があまりにも遅すぎる。
ただ、今はせかチャン - 世界一わかりやすい情報科チャンネル(Youtube)を中心にしているので終わったら復習もかねて改めて触れていこう




# せかチャン - 世界一わかりやすい情報科チャンネル(Youtube)
贅沢にも何かオンラインサービスのような講師による動画などで学べないかなと考えていた。
そんな都合のいいものはないよなと思っていた矢先、せかチャン様を見つけた。
試しに1本見ていたら、本当にわかりやすかった。1つ1つがていねいで、経験者や勉学に励んでいる方からすればこんなの当たり前にわかるでしょっていう部分も細かく教えてくださる。初学者、未経験者には大変ありがたい。
これからもせかチャン様を中心に学んでいこうと思う。

* 進捗具合
    * 1-1　～　3-6

Java入門講座という括りに入っている。
せかチャン様は学習ロードマップも提示されているので沿って着実に学んでいきたいと思う。



# 最後に
なぜここまですべて中途半端なのか。自分が信じがたい。できないことを自覚しながらもやらない。ありえない。この状況を記事に出し見せしめとする。
これからは継続してまずは上記の勉学が完遂し次のステップに進めることを祈る

今後の記事は勉強したことをメモするように使っていく
最近気に入っているVueコンポーネントの分類方法

Atomic Designとかいろいろ試してみたけど、  
最近、自分にあったUIコンポーネントの分類方法ができがってきた気がする。

参考にした考え方などを踏まえて、少し整理してみた(\*´ω｀\*)

### 2つ状態管理

コンポーネントと状態は密接に関係してるので、  
まずは状態管理について整理。

ざっくり2つに分類。

- **Globalな状態(Store)**
  - pinia/vuexなどのアプリ全体の状態
- **Localな状態(Provider)**
  - provide/injectで扱う特定のページ限定の状態

昔は何でもGlobalな状態のStoreに入れていたけど、  
Springのようにリクエストスコープやセッションスコープみたいに、  
特定ページだけとかもあるなと思い、Providerパターンも使うように。

参考にしたのはこのあたり。

- [Bean スコープ :: Spring Framework - リファレンス](https://spring.pleiades.io/spring-framework/reference/core/beans/factory-scopes.html)
- [終わりゆく Vue 2.x 時代の状態設計のアンサー - Speaker Deck](https://speakerdeck.com/potato4d/the-last-architecture-of-the-vue-2-dot-x)
- [Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。 - Qiita](https://qiita.com/karamage/items/4bc90f637487d3fcecf0)

Globalな状態は基本コンポーネントからアクセスせず、  
providerを経由する感じにしてみてる。

「コンポーネント → provider → store 」

### 分類の基準

これを踏まえ、2つの質問で4つに分類。  
(名前付けはイケてない気がするけど。。)

- **Provider(状態)にアクセスするか？**
  - Stateful or Stateless
- **レイアウトだけか？**
  - Layout or Parts

こんな感じの分類にしてみている。

![スクリーンショット 2023-12-19 6.50.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d554f2c0-d286-2ab6-288e-a9295d00c8f3.png)

**Stateful or Stateless**

- Statefulは特定のページに特化したコンポーネント
   - ユーザ一覧など
- Statelessは汎用的なコンポーネント
   - ボタンとか
   
**Layout or Parts**

- Layoutは配置だけするコンポーネント
   - パネルとか
- Partsは部品となるコンポーネント
   - ボタンとかユーザ一覧のリスト要素とか

参考にしたのはこのあたり。  
Flutterを触ってみて、考え方がしっくりきた気がする。

- [コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)](https://zenn.dev/mizchi/articles/component-based-css)
- [Building user interfaces with Flutter | Flutter](https://docs.flutter.dev/ui)

最初は、Stateful Parts Widgetからはじめて、  
Stateful Layout WidgetやStateless系に分離していく感じで、  
すこしずつ汎化/共通化を進めていく感じ。

### コンポーネントの置き場

Nuxtの場合はこんな感じに配置している。
**よく一緒に使うものを近くに置く**という形。

```
/
  _store/                 ... ストア関係(globalな状態)
    authStore.ts
  _widgets/               ... 共通なコンポーネント
    layout/
    parts/
  pages/
    index/
      _internal/          ... ページ固有のコンポーネントなど
        FooButton.vue
        FooCardLayout.vue
        useFooProvider.ts ... ストア関係(localな状態)
      index.vue
```

参考にしたのはこのあたり。

- [components のディレクトリ構成のベストは？ / X](https://twitter.com/d151005/status/1659359491551547392)

### おわりに

基本小規模な少人数開発なので、合う合わないがあるけれど、  
個人的にはしっくりきていて、NuxtだけじゃなくFlutterでも同じ構成に。  
フレームワークが違ってもすんなり読めるようになってきたかも？

なにかの参考になれば(\*´ω｀\*)

# 参考にしたサイトさま
- [Nuxt2+BuefyからNuxt3+Nuxt UIに移行してみた - くらげになりたい。](https://www.memory-lovers.blog/entry/2023/12/01/104534)
- [コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)](https://zenn.dev/mizchi/articles/component-based-css)
- [components のディレクトリ構成のベストは？ / X](https://twitter.com/d151005/status/1659359491551547392
- [終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x - Speaker Deck](https://speakerdeck.com/potato4d/the-last-architecture-of-the-vue-2-dot-x)
- [Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。 #JavaScript - Qiita](https://qiita.com/karamage/items/4bc90f637487d3fcecf0)
- [Bean スコープ :: Spring Framework - リファレンス](https://spring.pleiades.io/spring-framework/reference/core/beans/factory-scopes.html)
wslでelixir その122

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
Livebookでsqlite3使ってみた。
CRUDやってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/468fbd8c-0ab7-fffa-6918-320440c980e8.png)

# 方針
- Ecto.Migration使う
- Ecto.Schema使う
- Ecto.Changeset使う
- Repo.start_link使う
- Kino.DataTable使う

# セットアップ

```
Mix.install([
  {:ecto_sql, "~> 3.9"},
  {:ecto, "~> 3.9"},
  {:kino, "~> 0.10.0"},
  {:ecto_sqlite3, "~> 0.12"}
])
```

# サンプルコード

```
#schema
defmodule Person do
	use Ecto.Schema
	import Ecto.Changeset
	schema "people" do
		field :name, :string
		field :age, :integer
		timestamps()
	end
	def changeset(person, attrs) do
		person
		|> cast(attrs, [:name, :age])
		|> validate_required([:name, :age])
	end
end
#table
defmodule CreatePeople do
	use Ecto.Migration
	def change do
		create table(:people) do
			add :name, :string
			add :age, :integer
			timestamps()
		end
	end
end

defmodule Repo do
	use Ecto.Repo, adapter: Ecto.Adapters.SQLite3, otp_app: :nothing
end
#create db
Repo.start_link(database: "test.db")
#create table
Ecto.Migrator.up(Repo, 1, CreatePeople)

#insert
now = NaiveDateTime.utc_now()
	|> NaiveDateTime.truncate(:second)

entries = [
	  %{name: "Bob", age: 20},
	  %{name: "John", age: 30},
	  %{name: "Ryo", age: 39}
  ]
  |> Enum.map(fn attr ->
		Map.merge(attr, %{
			inserted_at: now,
			updated_at: now
		})
	end)

Repo.insert_all(Person, entries)

#select
Repo.all(Person) 
|> Kino.DataTable.new()

#delete
Person
|> Repo.get_by!(name: "Ryo")
|> Repo.delete()
#insert
%Person{name: "Ai", age: 55} 
|> Repo.insert!()

#update

Person
|> Repo.get!(4)
|> Person.changeset(%{
	name: "Ai"
	age: 21,
})
|> Repo.update()



```

以上。
パチスロとchatGPT(LLM)：大当たりを目指すけど、いつも当たるわけじゃない

## 導入
私たちの周りには、確率に基づくシステムが溢れています。その中でも特に興味深いのが、パチスロと大規模言語モデル（LLM）です。これらは、確率によって異なる結果を生み出す点で共通しています。



| 特徴                  | パチスロ                                       | LLM（大型言語モデル）                           |
|----------------------|----------------------------------------------|----------------------------------------------|
| **確率の役割**         | リールで絵柄が並ぶ確率が大事                     | 言葉を選ぶときに高い確率で選ばれるものを選ぶ      |
| **面白さ**             | いつも違う結果で、わくわくする                   | いろんな答えが出て、新鮮な感じがする             |
| **「必ず勝つ」の考えとの向き合い** | 確実に勝つ方法はなく、それが面白い              | いつも同じような結果にはならず、それがおもしろい |
| **必勝法の限界**        | 必勝法があると言われるけど、いつもうまくいくわけじゃない | いつも正しいわけじゃない                          |
| **大当たりを目指すこと** | 大当たりを目指すけど、いつも当たるわけじゃない   | 正しい答えを出そうとするけど、いつも満足できるわけじゃない |
| **反応の違い**          | 「やった、当たる！」って喜ぶ人もいれば、「ダメだこりゃ」とがっかりする人もいる | 「いい答えだ！」と喜ぶ人もいれば、「ちょっと違うな」と思う人もいる |

## 確率の働き
パチスロでは、リール上のシンボルが特定のパターンで揃う確率が、ゲームの核心をなします。これは完全にランダムであり、プレイヤーはその結果に対して期待を寄せることになります。一方で、LLMでは複数の単語から最適な単語やフレーズを選び出すプロセスが、確率に基づいて行われます。このプロセスは、パチスロのシンボルが揃う仕組みと似ており、予測不可能な多様な結果を生み出します。

## 「揃える」の魅力
確率によって異なる結果が生まれることは、パチスロとLLMの両方において重要な魅力の一つです。これにより、毎回新鮮で予測不可能な体験が可能になり、プレイヤーやユーザーにはそれぞれ独自の楽しみが提供されます。

## 「絶対勝てる」幻想との対峙
パチスロでもLLMでも、「絶対に勝てる」という保証は存在しません。どちらも不確実性を含んでおり、それが魅力の一部でもあります。必勝法や正確な回答を求めることは自然ですが、それらは常に期待通りには機能しないかもしれません。この認識は、プロセス自体の楽しみを見つける上で重要です。

## LLMとパチスロの共通点の深掘り
1. **確率の要素**：パチスロはランダムな要素が強く、確実に勝つ方法は存在しません。LLMも、複雑なアルゴリズムに基づいており、常に一定の結果を保証するわけではありません。
2. **必勝法の限界**：パチスロで「必勝法」を売り込む人がいるように、LLMを利用して利益を得ようとする試みもあります。しかし、これらの方法は必ずしも確実ではなく、場合によっては期待外れの結果に終わることもあります。

## 「当たり」の追求
多くの人がパチスロで大当たりを目指すように、LLMユーザーも完璧な回答や生成物を求めます。しかし、これは常に実現可能なわけではなく、結果にはバリエーションがあります。

## 結論
パチスロのシンボルが揃う確率とLLMが単語を選ぶ確率は、どちらもユーザーに魅力的な不確実性を提供します。この確率に基
CloudflareのアラートをWebhookで設定してみる。

## Webhookの登録

サイドバーから「通知」へアクセス。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/707aa7dc-01b3-3d20-3fcb-e0c60d666daa.png)

「目的地」を選択し、作成ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/555c9f1a-ef83-296d-adb0-9e288aafe649.png)


URLへ通知したいWebhookのURLを入力します。
色々と通知できるサービスがあります。自分は今回Discordを利用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/133f7136-7779-91ab-8d20-c5395d4ecaa7.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/ef4935aa-37c9-d9a3-f1a4-785c102b6a50.png)


入力後、「保存してテストする」をクリックします。
正しいURLが入力されていれば、下記のように通知が届きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/bcc434c0-b8cf-74cd-ebe5-b58c880d2a61.png)


## 請求アラートの追加

今度は通知画面に戻り「すべての通知」へ移動。
「追加」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/64562db4-0f20-3d63-a281-a1487f67f7b4.png)

通知できる内容の一覧が表示されるので、今回はDDoS攻撃対策の「選択する」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/0204c617-a7fb-fbc9-b363-30f901bd1cee.png)


通知の追加画面へ移動するので、Wwebhookにさきほど作成したWebhookを追加し、保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589058/10e30566-66f2-8aa6-dc35-b544b1bbad8a.png)

以上で、自分の使っているチャットサービスに気軽にWebhookでアラートを飛ばすことができます。
個人開発で使っているので、中々ないと思いますが、色々なアラートをチャットサービスに飛ばせるようになったので少し便利になりました。

## 参考
https://developers.cloudflare.com/notifications/create-notifications/configure-webhooks/
無料で！Salesforceレベル0から1になれるロードマップ

この記事は「テックキャンプ公式コミュニティ Advent Calendar 2023」の19日目の記事です。
https://adventar.org/calendars/8952

※Salesforceをこれから無料で学びたい方向け。

# はじめに
「Salesforceの学習を初めてみたいけど、何から始めれば良いのかわからない。」といった初学者の方からよく相談を受けます。なので、無料で学べる、かつ楽しく効率的に、Salesforceレベル0から1になれるロードマップを考えてみました。

ます、Salesforceの学習は、どのような方法や手順で学ぶべきかを知っているかいないかで、学習効率が変わります。特に実務経験のない方にとっては、用語がわからず、何を言われているのかもわからない、という事態になりがちです。

動画と学習サイトを含め全て無料で、基本的な活用も考慮しながら進められる、学習ロードマップをこの記事では3Stepで紹介します。

# Step1 動画学習

まずはSalesforceの基礎理解です。
動画を見ながら、Salesforceの考え方・用語に慣れていきましょう。

最初の学習動画は、オリエンタルラジオの中田さんがYouTubeで解説をしている動画です。
全くSalesforce学習に関係なさそうですが、初めの興味を持つには最適な教材かと思います。

中田敦彦のYouTube大学 - NAKATA UNIVERSITY 

https://youtu.be/BZ-MQiuPPI4?si=tm_88aDBGkmkpjXC

次に、概要をさらっと学べますので、用語やSalesforceのUIに実際に慣れてていきましょう。

2020-3-25 初心者向け!「Salesforceの基礎を学ぼう」

https://salesforce.vidyard.com/watch/vhrVWCiREEfME6TkcQa5Y9


開発者向けの内容で少しだけ内容が難しくなります。前半部分だけでも、大枠は理解して行きましょう。

【入門】開発者のための Salesforce 開発 ~ Lightning プラットフォーム基礎 ~

https://www.youtube.com/watch?v=nJt9BiOGZeA


動画学習で一通り理解できたら、下記のオンライン学習を取り入れましょう。

動画を見終わった方ならサクサク進めるかと思います。

# Step2 Trailhead　基礎

Trailhead

https://trailhead.salesforce.com/ja/today

公式Trailhead活用ガイド

https://help.salesforce.com/s/articleView?id=000325517&type=1

Trailhead の使用開始

https://trailhead.salesforce.com/ja/content/learn/trails/learn_salesforce_with_trailhead

まずはやるべき Trailhead：簡単カスタマイズ編

https://trailhead.salesforce.com/ja/users/welcome4/trailmixes/mazuyaru-mix

実際に手を動かしながら、分からなかった所の見直しと復習によるスキル強化を行ってください。
ハンズオンチャレンジという、各単元の最後に用意されているミニテストでポイントをもらえます。
Trailheadのカリキュラムを読みながら、自分で手を動かしてハンズオンチャレンジなどの作業を進めます。そうすることで、頭と手にに定着し、より確実にスキルを身につけることができます。
ハンズオンチャレンジを達成するにはSalesforce組織でお題を実行する必要があります。モジュールをこなすとバッジを獲得でき、Trailblazerランクが上がっていくのでモチベーションにもつながると思います。

# Step3 Trailhead　初級

Salesfoeceの概要

https://trailhead.salesforce.com/ja/content/learn/trails/salesforce_advantage?trailmix_creator_id=makoto&trailmix_slug=mrsw-basic

Sales Cloud でセールスを迅速化

https://trailhead.salesforce.com/ja/content/learn/trails/lex_end_user

Lightning Experience の CRM の基礎学習

https://trailhead.salesforce.com/ja/content/learn/trails/crm-essentials-lightning-experience

Trailheadは、スマホやタブレットにもアプリをダウンロードしましょう。隙間時間で、理解できなかった知識や学習の振り返りを、アプリで読み進めて行きましょう。

# さいごに

勉強会やコミュニティーにも参加してみましょう。

Salesforceを独学で勉強する場合は、自力で解決方法を探すことに限界を感じる場面に出くわすことがあるでしょう。そのような場面でも、勉強会やコミュニティーに参加することで、質問ができます。
Salesforceには助け合いの文化があって、勉強会やコミュニティーに参加することで、お悩みや疑問点を解決できるかもしれません。 


https://www.salesforce.com/jp/blog/what-is-the-trailblazer-community/

また、ここ数年は定期的に、「Pathfinder」という、Salesforce公式のDX人材育成プログラムも無料で受講できるそうです。

https://www.salesforce.com/jp/company/careers/pathfinders/

ここまで読んでいただき、ありがとうございます。
Salesforceは公式のドキュメントやヘルプ記事、無料の学習サイトが充実しています。

また日本だけの公式の恩恵、「サクセスナビ」という宝箱みたいな無料のお役立ちサイトも充実しています。
こちらも参考にしてみてください。

https://successjp.salesforce.com/

Salesforceをこれから学びたい人の参考になったり、興味を持つ人が少しでも増えたら嬉しいです！
詳解 Terraformを読みました

この記事は[terraform Advent Calendar 2023](https://qiita.com/advent-calendar/2023/terraform)の19日目です

こんにちは！株式会社マネーフォワードのnakamoriです。
今日は11月に出た「詳解 Terraform 第３版」を読んだので感想を書いていきます。

https://www.oreilly.co.jp/books/9784814400522/

# どんな本？

> 本書では、Terraformの基本からはじまり、Terraformを使ったインフラストラクチャの状態を管理、Terraformモジュールを使った再利用可能なインフラストラクチャの構築、高度なTerraform構文を使用したダウンタイムゼロの導入などTerraformの一通りの機能と使い方を学びます。
[オーム社HP](https://www.ohmsha.co.jp/book/9784814400522/)より抜粋

この内容が一番わかりやすかったので抜粋しました。

各章はこのようになっています
- 1章　なぜTerraformを使うのか
- 2章　Terraformをはじめよう
- 3章　Terraformステートを管理する
- 4章　モジュールで再利用可能なインフラを作る
- 5章　Terraformを使うためのヒントとコツ：ループ、条件分岐、デプロイ、その他つまずきポイント
- 6章　シークレットを管理する
- 7章　複数のプロバイダを使う
- 8章　本番レベルのTerraformコード
- 9章　Terraformのコードをテストする
- 10章　チームでTerraformを使う



# 感想

初心者から中級者まで幅広く読める本だなと思いました。Terraformを使ってみようというところから、後半では本番環境に耐えうるように環境を構築していこうという章もありTerraformを使って仕事をする上では一回読んでおいてもいいなと思う内容でした。サンプルがとても多く、AWSプロバイダーを利用している例が多いので理解もしやすいです。

##### 本の使い方
まず、初級者は2,3,4,5章だけ読むのいいと思います。この章は新卒の研修にしてもいいんじゃないかという内容になっています。

特に5章では、Terraform特有のcountやdynamicとかcreate_before_destroyなどが詰まっていて、一気にTerraformチョットワカルという気分にさせてくれてよかったですね。

もう少し深く知りたいよっていう人は1~8章辺りがいいのではないかなと思います。1章は、IaCの成り立ちがメインなので、読み物シークレットの管理は開発する上で必ず必要になってきますし、これを読んでおけば、わからないということはないと思います。

9章の自動テストの部分は飛ばしたのでわかりません...出来たリソースにHTTPリクエスト送ってテストするということはまだ必要ないのかなと感じました。

##### 個人的に面白かったポイント
自動テストの章は9.2節から始まるのですが、9.1節の最後の方にはこんなことが書いてあります。

> インフラコードに対して自動テストを書くのは、気弱な人には向いていません。この後の自動テストの節は、ほぼ間違いなくこの本で最も複雑な部分で、軽い読み物ではありません。ざっと読むだけのつもりなら、この次の節は読み飛ばしてください。

いきなり語気強めの文章が来て笑ってしまいました。言う通りに丸々飛ばしました。いつか気弱じゃなくなったら読もうと思います。

##### 上級者は読まなくていい？
結論： 10章はあり

Terraform本体はあまり要素が多くない（というよりそれぞれのプロバイダの仕様を管理していくのが難しかったりするが本に書きづらい）ので、上級者がこれを読んで新しい技術を学ぶと言うのはあまりないかなと思いました。

ですが、10章はTerraformをチームで使うにはということで、何もTerraformが使われていないところからどうやってTerraformを導入していくかということが書かれています。

上司を説得するだったり、チームのみんなと勉強会を開くだったりコミュニティの形成で重要なことが詰まっているので、ここは読む価値がありましたし、読んで面白かったです。

自分はTableau Data Saberの資格を持っているのですが、この資格を取得する時もTableauをどうやって広めていくかを考える章があり、どのツールも共通して持っている課題なんだなと思いました。


# 最後に
いかがでしたでしょうか？第３版になってついに日本語が出たということで気になって読んでみました。章ごとに内容がはっきりと分かれているので、少しずつ読み進められるのもいいですね。気になった方はぜひ買って読んでみてください。

https://www.oreilly.co.jp/books/9784814400522/

[terraform Advent Calendar 2023](https://qiita.com/advent-calendar/2023/terraform)、次の記事もお楽しみに！
[Docker][Rails] Dockerでのruby環境ビルドが急に落ちるようになった.. 解決法



## 問題状況
Railsプロジェクトのデプロイでの Dockerビルドが突然失敗するようになった

( 特に、コードでビルドに関するような箇所は触っていないし
差分もない
にも関わらず
数日前は成功していた.. 

( なにかのupdate あったのだと予想

## 原因

以下が出ており、
Dockerfile の `gem update --system` 部分でエラーのよう。

```: build.log
#19 [stage-0 12/23] RUN gem update --system
#19 19.84 ERROR:  Error installing rubygems-update:
#19 19.84 	There are no versions of rubygems-update (= 3.5.1) compatible with your Ruby & RubyGems
#19 19.84 	rubygems-update requires Ruby version >= 3.0.0. The current ruby version is 2.7.3.183.
#19 19.84 ERROR:  While executing gem ... (NoMethodError)
#19 19.84     undefined method `version' for nil:NilClass
#19 20.10 Updating rubygems-update
#19 ERROR: process "/bin/sh -c gem update --system" did not complete successfully: exit code: 1
```


## 調査


どうやら、
(`gem update --system` の際にupdate される..)
gem `rubygems-update` のversionが最近上がっていたようで
それが Dockerfile で指定していた ruby `2.7.3` と互換性がなくなり、 `3.x` 系のみになっていたよう..

そのためエラー..

#### All versions of rubygems-update ( 実際に、最近update があった

https://rubygems.org/gems/rubygems-update/versions


## 解決法
以下に変更
```
RUN gem update --system  # そのままだと、最新の ruby 3.xのみ対応の `rubygems-update` が入る..
->
RUN gem update --system 3.4.22  # ruby 2.x系 対応の最新版と思われる..
```

->
デプロイが再度成功するようになった
Excelをどう学ぶか

　Excelの学習は、ある程度使えるようになると学習をやめてしまいますよね。とりあえず、日常の業務で使えてるけど、これでいいのかと考えたことはありませんか。私が日頃つらつらと考えてることを綴ってみます。

# エクセル・スキル
　エクセル利用者のレベルは、以下のように示されることが多いようです。

1. **初心者**：基本的な操作を学習します。よく使う機能や、関数の名称と場所。そして、その使い所です。
1. **中級者**：実務で使う関数を詳しく学びます。また、表作成やピボットテーブルについて学習します。
1. **上級者**：マクロとVBAについて学習します。操作を自動化し、効率的に業務を進める事ができます。

 　しかし、VBAができれば上級者。上級者はVBAを覚えなければいけないという考えに同意しかねています。

　そこのところを考えるのには、まずエクセルで何をしたいのかというところから考えなければならないと思います。


# エクセルで何をしたいのか

## 1. 文書作成

  　設計書や仕様書、または請求書のような簡単な数値の入った表を作成して印刷したいという目的で使う場合があります。

　この場合、好きな位置に好きな大きさで文字や数字を入力し、罫線を引けさえすればいいので、基本的な操作と簡単な関数を覚えて、印刷レイアウトの設定の仕方を学ぶ初心者レベルで完了です。特にその先を考える必要はありません。

## 2. グラフの作成

　折れ線グラフやヒストグラムのような、単純なグラフが手っ取り早くできればいいという場合は、グラフ作成の方法を学べばよいでしょう。
 
## 3. 数値計算や分類

　ほとんどのエクセル業務はここまでの段階にいます。

　関数が複雑に入り組んだ数式を使用したり、VLOOKUPやXLOOKUPを多用するため、中級者レベルの知識が必要です。

## 4. 統計

 　統計処理をしたい場合は、中級者レベルの知識に加えて、統計についての知識が必要になります。統計についての基本的な勉強と合わせて、それをエクセルでどう扱うかを学んでいきます。

## 5. 分析
　業務で分析を行う場合には、誰に、どのように見せるかが重要です。また、データを更新するサイクルや、どのようなデータを、どういう経路で取得するかを考えなければなりません。加えて、必要な形式への変換する方法も大切です。

　つまり、ビジュアルの設計だけでなく、データフローとデータモデルの理解が必要になります。

　このレベルになると、エクセルではなく、Power BIを使うことになります。

 # 進むべき道

 　恐らく、多くの人は1~3の間に留まっています。それ以上に進む気はないかもしれません。あるいは、VBAを使用して無駄な作業を省略しようとしているかもしれません。VLOOKUPじゃなくて、INDEXとMATCHだとか言ってる時点で、既に選択が間違ってると思うんですよ。

　実は業務のやり方自体に無駄があるのかもしれませんよ。あるいは、データの扱い方が間違っているかもしれませんね。より無駄のないやり方、素直なデータ処理を意識すると、複雑な作業がスッキリ簡単になります。

　進むべき道がわからない場合、そのような考え方について質問できる、信頼できる人を見つけることが大切です。どこか自分にあったコミュニティに参加して、質問してみるのも良いと思います。
LookerStudioの始め方。

# ええっ？LookerStudioを知らないのかい？

Google謹製のBIツールです。ざっと特徴というか売りはこんな感じ。

note:::
1. Googleアカウントがあればだれでも使える。
1. 基本的な機能はだいたいそろってる。
1. 閲覧権限をメールアドレスで設定できる。
1. サイトへの埋め込みが可能。埋め込みリンクもワンクリックで作れる。
1. 使えるチャートも基本的なものはそろっている+有志によるサードパーティチャートで遊べる。
1. ただし、Tableauに比べて遅いかな・・・。
1. データソースにエクセルは使えない。
1. データソースはcsv、スプレッドシート、そのほかGCPBigqueryやほかクラウドに直接接続可能。
1. SQLを書いて必要なカラムだけソースとして利用できる。
:::

# BIツールの練習用に使わないって手はないよね！

てなわけで始め方。

https://cloud.google.com/looker-studio?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/c5d1f820-a938-d82e-f42d-91d7f30e1f90.png)

これがちとややこしいのが、GoogleCloudのサイトにあるのに、別にGoogleCloud利用してなくても使えるってことです。

上記リンク先の　「使ってみる」　を押すとこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/42deb2f6-c262-a136-41eb-9793bc8a80e7.png)

# +作成ボタンを押して、レポートを新規作成しましょう。とりあえず

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/a7d959bc-fe3e-7069-26a2-e2882f6f2b71.png)

データソースを選べと言われるので、スプレッドシートを選びます。
んで、自分のGoogleドライブの中から選ぶ、と。
シートを選んで、右下の追加を押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/3fd08b3c-770d-521a-981d-87c53dafc045.png)

レコメンドされる一覧になければ、虫メガネマークで検索してください。

### 元のシートはこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/b6a4b0fb-ff14-8b2e-f2c8-865a92df9bc7.png)

### LookerStudioで読み込むとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/2b09f2b8-c7e4-8a16-8be1-e2213ad37384.png)

んじゃ、地域区分ごとのデータを適当に可視化してみましょう。

地域区分をキャンパスにドラッグします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/2d903d8a-56ba-df40-4686-c7c2500465c8.png)

こうなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/d592e4ee-3c18-23d1-5cac-88628a194bf0.png)

同様に、valueを指標に追加
品目分類(2020年改訂)をディメンジョンに追加

上部メニューのコントロールを追加を押して、品目分類(2020年改定)を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/7e380869-63c2-56fd-ccd8-a64a27ccab76.png)

こんな感じで、プルダウンで見たい指標を選べるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/a22e0f23-b928-c808-76c3-beb85ed7a85f.png)

ここまでが超超基本のLookerStudioの始め方でした。

次回以降、データソースの型指定と使えるチャートを紹介していきます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167883/24467fe0-bb08-aa54-1e0d-4bc1f85f3bfa.png)

水戸市、めっちゃお金使ってる・・・！
Azure の負荷分散的な諸々

## Azure の Load Balancer
https://qiita.com/e99h2121/items/61121923a500391c76bc

- Front Door
- Traffic Manager
- Application Gateway
- Load balancer



https://learn.microsoft.com/ja-jp/azure/architecture/guide/technology-choices/load-balancing-overview


### Traffic Manager

https://learn.microsoft.com/ja-jp/azure/traffic-manager/traffic-manager-routing-methods

> 優先順位トラフィック ルーティング方法
加重トラフィック ルーティング方法
パフォーマンス トラフィック ルーティング方法
地理的トラフィック ルーティング方法
複数値トラフィック ルーティング方法
サブネット トラフィック ルーティング方法

https://learn.microsoft.com/ja-jp/azure/traffic-manager/traffic-manager-how-it-works#how-clients-connect-using-traffic-manager

![](https://learn.microsoft.com/ja-jp/azure/traffic-manager/media/traffic-manager-how-traffic-manager-works/flow.png)

https://learn.microsoft.com/ja-jp/azure/traffic-manager/traffic-manager-overview


### AKS

https://learn.microsoft.com/ja-jp/azure/aks/ingress-basic?tabs=azure-cAKS

> イングレス コントローラーは、リバース プロキシ、構成可能なトラフィック ルーティング、および Kubernetes サービスの TLS 終端を提供するソフトウェアです。 個別の Kubernetes サービスのイングレス ルールとルートを構成するには、Kubernetes イングレス リソースが使われます。 イングレス コントローラーとイングレス ルールを使用すると、1 つの IP アドレスで Kubernetes クラスター内の複数のサービスにトラフィックをルーティングできます。

## スケール セット

https://learn.microsoft.com/ja-jp/azure/virtual-machine-scale-sets/overview

> 複数の可用性ゾーンまたは障害ドメインに VM を分散することにより、高可用性とアプリケーションの回復性が提供される

https://learn.microsoft.com/ja-jp/azure/virtual-machine-scale-sets/virtual-machine-scale-sets-use-availability-zones?tabs=cli-1%2Cportal-2