OmniAICreator/Qiita-1.07M huggingface dataset:
99パーセンタイルってどういう意味？

### はじめに
よく、チーム内で飛び交う言葉の1つとして「`99 percentile`」のワードがあったのでまとめる。

### GCPでの説明

`Google Cloud Platform（GCP）`において`API`を実装する場合、`99パーセンタイル`は、`API`のレイテンシを評価するために使用されます。`99パーセンタイル`の値は、`APIリクエスト`のレイテンシのうち、上位1％のリクエストの中で最も遅いものを表します。
`99パーセンタイル`は、`API`の応答性を向上させるために**非常に重要な指標**となります。

例えば、`API`のレスポンスタイムが`99パーセンタイル`で2秒未満であることを目標にすることで、`API`の応答性を向上させることができます。また、`99パーセンタイル`の値が高い場合、`API`のレイテンシの問題を特定し、改善するために対策を講じることができます。

`99パーセンタイル`の値を測定するには、`API`のトレースを収集する必要があります。`Google Cloud Trace`を使用することで、`API`リクエストのトレースを収集し、`99パーセンタイル`の値を計算することができます。
また、`Google Cloud Monitoring`を使用して、`99パーセンタイル`の値をリアルタイムで監視することもできます。

`GCP`の`API`の実装において、`99パーセンタイル`は、`API`のレイテンシを評価するための重要な指標であり、`API`の応答性を向上させるための目標を設定するために使用されます。

https://cloud.google.com/monitoring/api/v3/distribution-metrics?hl=ja

https://cloud.google.com/trace?hl=ja

https://cloud.google.com/monitoring?hl=ja

### 一般的な説明

`99パーセンタイル`とは、統計的な測定値の一つで、あるデータ集合において、上位1％の値よりも小さい値のうち最大の値を表します。
つまり、データセット内の値が大きい順に並べたとき、上位1％の範囲に入る値のうち最大の値を表します。

例えば、Webサイトのレスポンスタイムを計測する場合、`99パーセンタイル`は、レスポンスタイムが最も遅い1％のリクエストの中で最も遅いものを表します。`99パーセンタイル`は、平均値や中央値とは異なり、極端な値に影響されず、測定値の分布をより正確に表します。

`99パーセンタイル`は、システムのパフォーマンスや応答性を評価するために使用されることがあります。
例えば、ウェブサイトのレスポンスタイムが`99パーセンタイル`で2秒未満であることを目標にすることで、Webサイトのパフォーマンスを向上させることができます。また、`99パーセンタイル`の値が高い場合、システム全体のパフォーマンスの問題を特定するために使用できます。

例として、あるWebサイトのレスポンスタイムを測定する場合を考えてみましょう。このWebサイトでは、毎秒`100リクエスト`が処理され、レスポンスタイムが1秒以内であることを目標にしています。

このWebサイトのレスポンスタイムを測定するために、1日の中でランダムに選ばれた1万個のリクエストのレスポンスタイムを収集しました。これらの値を小さい順に並べたとき、上位1%にあたる100個の値のうち、最大のものが99パーセンタイルになります。

例えば、次のようなデータセットがあるとします。

```
[0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1, 2.0]
```

この場合、`99パーセンタイル`の値は、データセット内で最も大きい上位1%の値である「`1.1`」になります。つまり、このWebサイトのレスポンスタイムにおいて、`99パーセンタイル`が1秒未満であることが目標である場合、このWebサイトは目標を達成していることになります。

このように、`99パーセンタイル`を使用することで、システムのパフォーマンスを評価し、目標を設定することができます。
また、`99パーセンタイル`をトラッキングして、システムのパフォーマンスの問題を早期に特定することもできます。

### その他の例

- ネットワークレイテンシ：`99パーセンタイル`の値を使用して、ネットワークのレイテンシを評価することができます。例えば、オンラインゲームの場合、`99パーセンタイル`の値が高い場合、ゲームプレイ中にラグが発生する可能性があります。

- ログイン時間：`99パーセンタイル`の値を使用して、ユーザーのログイン時間を評価することができます。たとえば、オンラインストアの場合、`99パーセンタイル`の値が高い場合、ユーザーがログインするまでに待たされる時間が長くなる可能性があります。

- ファイルの読み込み時間：`99パーセンタイル`の値を使用して、ファイルの読み込み時間を評価することができます。たとえば、データベースの場合、`99パーセンタイル`の値が高い場合、データベースからデータを取得するために必要な時間が長くなる可能性があります。

- サーバーレス関数のレスポンスタイム：`99パーセンタイル`の値を使用して、サーバーレス関数のレスポンスタイムを評価することができます。`99パーセンタイル`の値が高い場合、関数の実行にかかる時間が長くなる可能性があります。

これらの例は、`99パーセンタイル`を使用して、システムのパフォーマンスを評価する方法を示しています。`99パーセンタイル`を使用することで、システム全体のパフォーマンスの問題を特定し、改善するための目標を設定することができます。
ServerからWeb Client通信手段としてのServer Sent Events触ってみる

#### なぜ記載したか？

serverからweb clientの通信手段を遊びで実装しようとおもった際に、結構脳死でwsプロトコルを利用していたが、改めてかるく調べてみようと思い調べてみたら複数の手段があった。
その手段の中でも、wsプロトコルに依存せずにwsプロトコルに似た挙動をした通信手段があったため軽く試してみた結果を記載

#### 注意

Firefoxにはまだ対応していない(2023.3.15現在)いません。
[Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1681218)
[mdn](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

# 0. 利用環境

| dependency| version |
|:---|:---|
| react | 18.0.27 |
| nextjs | 9.0.0 |

## 環境作成


## APIを作成

nestjsについては、Server-sent Eventがdefaultでsupportされているため、そのまま利用する。
[ref](https://docs.nestjs.com/techniques/server-sent-events)

```app.controller.ts
import { Controller, Get, MessageEvent, Sse } from '@nestjs/common';
import { Observable, interval, map } from 'rxjs';

@Controller()
export class AppController {
  @Sse('sse')
  sse(): Observable<MessageEvent> {
    return interval(1000).pipe(map((_) => ({ data: { hello: 'world' } })));
  }
}

```

新しいpackageを追加せずにdefaultで利用が可能になっているため、素敵すぎます。
上記の設定で、[http://localhost:3000/sse](http://localhost:3000/sse)に接続を実施すれば、ServerSentEventの確認が取れます。

## web clientの実装

あくまで、http + web workerの機能になるのであまり新しいことはないですが、Reactだとこんな感じになるかなと(雑)。

```App.tsx
import { useEffect } from 'react'
import './App.css'
import { useEventSource } from './useEventSource'

function App() {
  const { connectToEventSource, closeEventSource } = useEventSource()

  useEffect(() => {
    connectToEventSource("http://localhost:3000/sse")
    return () => {
      closeEventSource()
    }
  }, [])

  return (
    <div className="App">
      <div>smaple</div>
    </div>
  )
}

export default App
``` 

```useEventSource.tsx
import { useCallback, useRef } from "react"

export function useEventSource() {
    const eventSourceRef = useRef<EventSource | null>(null)

    const connectToEventSource = useCallback((eventSourceUrl: string, onMessage?: () => void) => {
        if (eventSourceRef.current === null) {
            const eventSource = new EventSource(eventSourceUrl)

            eventSource.onmessage = function (msg) {
                const data = JSON.parse(msg.data)
                console.log(msg, data)
            }

            eventSource.onerror = function (msg) {
                console.log(msg)
            }

            eventSourceRef.current = eventSource
            return
        }
    }, [])


  const closeEventSource = useCallback(() => {
    if(eventSourceRef.current !== null) {
        eventSourceRef.current.close()
        eventSourceRef.current = null
    }
  }, [eventSourceRef.current])

    return {
        closeEventSource,
        connectToEventSource
    }
}
```

local で起動実施を確認すると以下のようなデータの取得ができます。
少ししかさわっていませんが、通知周りでwssを利用する手間が省けたり色々と拡張できそうな機能ではあるかなと思います。

![スクリーンショット 2023-03-03 13.45.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/dcee230e-60dd-a44b-df4d-00c80877471c.png)

![スクリーンショット 2023-03-03 13.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/051af071-248e-8d79-fb4a-8a1496963039.png)
CentOS7にjenkinsをインストールする

# はじめに
自社でもいよいよansibleが本格的に利用する話があがってきた。
ここでjenkinsもセットで使えるようになるとデプロイの幅が広がるのでぜひ学んでおきたいところなので
そろそろインストール手順を確認しておこう

# インストール方法
いろんなサイトを調べたけど結論、公式が確実な気がしてきた

https://www.jenkins.io/doc/book/installing/linux/#red-hat-centos

```
wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
yum upgrade
# Add required dependencies for the jenkins package
yum install java-11-openjdk
yum install jenkins
systemctl daemon-reload
```

# 8080ポートを開けておこう
うちはAzure使ってるので8080ポートを開けないと使えないので注意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/668b3d55-1a39-3db9-10bd-25527b2fd077.png)


# jenkins起動
## サービス起動

```
systemctl start jenkins
```

## 初期パスワードの確認

```
cat /var/lib/jenkins/secrets/initialAdminPassword
```

## 初回ログイン
jenkinsはWebブラウザからアクセスする
http通信でポートは8080なのでご注意。

```
http://4.241.111.198:8080/
```

初回セットアップ画面がここから始まる。基本的には全部OKで問題なし。
これで完了！

# 注意：jenkinsのバージョンによって必要なjavaバージョンが違う件
何も考えずにyumでjenkinsインストールして簡単に動作確認のためにバージョンチェックしたら
エラー出てた。

```
[root@nbfr151v ~]# jenkins --version
jenkins: invalid Java version: openjdk version "1.8.0_362"
OpenJDK Runtime Environment (build 1.8.0_362-b08)
OpenJDK 64-Bit Server VM (build 25.362-b08, mixed mode)
```

java8だとダメだよってエラーのようだ。
chatGPTに聞いたらこんな回答でした。jenkins2.263.4以降はjava11じゃないとダメなんだね。。。

>このエラーメッセージは、JenkinsがインストールされたシステムにJava 8が必要であり、OpenJDKバージョン1.8.0_362がインストールされていることを示しています。ただし、エラーメッセージの先頭に「jenkins: invalid Java version」とあるため、JenkinsがOpenJDKを正しく認識できないことを示しています。

>この問題を解決するには、Jenkinsが正しく機能するために必要なJavaのバージョンがインストールされていることを確認する必要があります。Jenkinsの公式ドキュメントによると、Jenkins 2.263.4以降はJava 11を必要とします。Jenkinsのバージョンが2.263.4以降であれば、Java 11がインストールされていることを確認してください。

>それ以外の場合は、Java 8をインストールする必要があります。また、エラーが表示される前にJavaのバージョンが変更された可能性があるため、別のJavaバージョンが既にインストールされているかどうかも確認する必要があります。

>Jenkinsが認識できるJavaバージョンが正しくインストールされていることを確認した後、Jenkinsを再起動して問題が解決されているかどうかを確認してください。
ALBのログをS3に出力する

ALBのログを設定するときに
`Access Denied for bucket: alb-logs. Please check S3bucket permission`
とエラーが出て少しハマったのでメモ。

## S3にバケットを追加する

### バケットを作成する

名前は一意だったらなんでも良い。
今回は仮に`alb-logs`とします。


### バケットにポリシーをアタッチする

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3PolicyStmt-xxxxxxxxxxxxxxxxxx",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::582318560864:root"
            },
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::alb-logs/*"
        }
    ]
}
```

`arn:aws:iam::582318560864:root`
↑の数字は、リージョンのIDです。
`582318560864`は`アジアパシフィック (東京) `なので、他の地域は下記を参考に設定してください！

`arn:aws:s3:::alb-logs/*`はS3のバケット名を入れます。
`alb-logs`の部分を適宜変更してください。

https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/enable-access-logging.html#attach-bucket-policy

## ALBの設定を変更する

### ログの有効化をする

対象のALBを開き、`Attributes`にある`Access logs`をonにする。
↑で作ったS3のバケットを選択して、保存。

これで、ALBのログがS3に出力されるようになりました！
ちなみにALBとバケットは同じリージョンにないとダメみたいです。
Git でリモートのコミットを取り消す（git reset -> push -f）【Git Tips!】

# はじめに

以前、不具合調査などのために自分の環境を特定のコミットの状態にするための `git reset` コマンドの使い方をまとめました（→[こちら](https://qiita.com/yokoba569/items/3d6957eafb468d3d352b)）。

今回は同じコマンドを使って、リモートにプッシュしてしまったコミットを取り消そう、というものです。

ただし、リモートのコミットを取り消すのは安易には行わないでください。一緒に作業している人がいれば、確認を取ってからやるようにしましょう。

また、この方法は履歴が残らない、完全な歴史改変となるため、その点にもご注意を。

# 手順

以降の説明は `master` に入れてしまった修正を取り消したいということで進めていきます。

### 修正をローカルに取り込み、内容を確認

`git pull` で修正を取り込み、 `git log` コマンドで内容を確認します。
一度に多くのログを表示させたい場合、`--oneline` オプションが便利です。

ここで大事なのは内容とコミットのハッシュ値です。
今回は「お気に入り機能」に取り掛かる前の `f2940ec` （下から２行目）に戻したいとします。

```
$ git pull
 ... (割愛)
$ git log --oneline -n 20
278f6b2 Merge pull request #165 from yokoba569/v1.7.3_dev
7a23fb5 (origin/v1.7.3_dev, v1.7.3_dev) Merge pull request #164 from yokoba569/#418_お気に入り対応
2394231 (origin/#418_お気に入り対応, #418_お気に入り対応) refs #418 DD対応 修正漏れ
8daa0f3 refs #418 お気に入り機能
f2940ec Merge pull request #163 from yokoba569/#445_起動変更オプション変更
a41ef31 ....
```

### 特定のコミットに戻す

戻したいコミットのハッシュ値がわかったので `git reset` コマンドを使っていきます。
変更差分を残しておく必要はないので `--hard` をつけましょう。

```
$ git reset --hard f2940ec
HEAD is now at f2940ec Merge pull request #163 from yokoba569/#445_起動変更オプション変更
```

これでローカルの環境が「お気に入り機能」に取り掛かる前の状態になりました。

### ローカルの状態を強制的にリモートにプッシュ

ローカルの状態は整ったので、これを強制的にリモートにプッシュします。
`push` コマンドに `-f` オプションをつけましょう。

```
$ git push origin master -f
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/yokoba569/SampleProject.git
 + 278f6b2...f2940ec master -> master (forced update)
```

これで作業完了です。

# 最後に

間違って master にマージしてしまったときにお世話になったのがこちらでした。
プルリクエストのマージ先はちゃんと確認してから作業したいものです。
rails g devise:installでNameError

## 概要
Railsで認証機能を実装する為、Gemのインストールを開始していたところrails g devise:installでNameErrorが発生しました。
その解決法を紹介したいと思います。

##  エラー内容
エラー内容は以下になります。
```
NameError: uninitialized constant User
```
エラーが出たコマンドは以下です
`bundle exec rails g devise:install`

エラーで調べてみると以下のQ&Aを見つけ、参考に致しました。
[`const_get': uninitialized constant User (NameError)](https://qiita.com/xDOLLx96/questions/b7771a95818beed88dc0)

## 理由/解決法
エラーの理由としては、config/routes.rb内を見てみると`mount_devise_token_auth_for 'User', at: 'auth'`とあり、すでにUserモデルが作られているからです。
実際のコードは以下になります。

```ruby:config/routes.rb
Rails.application.routes.draw do
  mount_devise_token_auth_for 'User', at: 'auth'
end
```

その為、私の場合は`mount_devise_token_auth_for 'User', at: 'auth'`をコメント化するか、消すと解決致しました。

## その他、参考になりそうな記事

-  [【Rails】Rails g devise 〇〇でin `block in load_missing_constant': uninitialized constant User (NameError)が出てきた時の対処法](https://qiita.com/blackpeach7/items/dd71417bf0b0ef937369)
- [Ruby on Railsでgemのdeviseをインストールした直後のエラー](https://qiita.com/ryouzi/items/9c5324ba567109ab2a22)
Project Euler 27

### 考えたこと
Project Eulerの規約(*1)に反さない範囲で考察する.

問題の２次式は

```math
n+an^2+b
```

で、これを0とその後に連続する自然数の入力nに対して素数しか返さないような関数にしたい。

今回思いついた解法は,

##### < 解 >
```Python
current = 0
y = 0
l = [u for u in range(100)]   
lforb = [2, 3, 5, 7] + [b for b in range(11, 1000, 2)]

def prime(l):
    for u in range(2, int(l**0.5) + 2):
        if l%u == 0:
            return 0
    else:
        return 1

for a in range(-999, 1000):
    for b in lforb:
        q = 0
        for x in l:
            p = x*x + a*x + b
            if p < 2:
                break
            elif prime(p) == 1:
                q += 1
            else:
                break
        if q > current:
            current = q
            y = a*b
print(y)
```

煩雑であるがある程度の工夫を施してあり1.5秒以下で答えを出せる。それらは,
1. n=0の場合を考えるたとき, bは素数でなければいけないことがわかる
    →bに対するfor文で使うlforbは素数だけを要素に持つ

1. オイラーの二次式で40, 最新の二次式で係数の絶対値を問題設定より大きくしても80個の連続する素数しか出力できない
    →考えるnは最大100で充分
1. 任意のn∈[0,100]で出力が素数にならないのならそれ以上計算しなくていい
    →2未満の数が出力されたらlに対するfor文を出る
1. 素数判定はその数の平方根以下で考えれば良い


#### 振り返り
* 変数currentを使う方法はthreadで他の方から学習させてもらった。最初は`dict`を作りそこに連続して素数となった自然数の数と係数を登録する仕組みにしていたが, こちらのほうが賢く早いので.
* 下に凸である今回の関数の判別式や軸の位置で、もう少しfor文の試行回数を減らせるかと思ったが, 結局bが正であることに帰着した. 













*1
>...sharing solutions outside of Project Euler does not apply to the first one-hundred problems, as long as any discussion clearly aims to instruct methods, not just provide answers,...
ChatGPT APIを使ったDiscord返答ボットの作成

# 概要
3月になり、ついにChatGPT API(gpt-3.5-turbo)が発表された。以前のGpt-3(Davinci-003)と比較すると性能は向上し、コストが約1/10となっている。そこで、質問応答をするDiscordBotを作成する。
(実はQiita初投稿)
## 対象読者
- JavaScriptをある程度理解している
- Node.js,VSCodeをあらかじめインストールしている
- Discord.jsの基本的な事を理解している
もし開発環境が整っていないのであれば[darakeeeさんのサイト](https://note.com/darake_nai/n/nf01cf9612c8c)を参考に構築してみてください
## 開発環境
MacOS Ventura(13.2.1)
VSCode(1.76)
# ライブラリのインストール
APIを利用するにはライブラリをインストールする必要があるため、npmコマンドを使用し以下のコマンドを実行する。
```
$ npm install openai
```
また、.envファイルを用いるため、dotenvもインストールする
```
$ npm install discord.js dotenv
```
# OpenAIのAPIキー取得
以下のサイトにアクセスし、アカウントが既にある場合はログイン、無い場合は新規作成をし、secret keyを取得する

https://platform.openai.com/account/api-keys
# .envファイルの作成
下のような形で.envファイルを作成する
```
OPENAI_API_KEY=OpenAIで発行したAPIキー
BOT_TOKEN=Discord botのトークン
```
# index.jsの中身
詳しい説明は省略する。詳細は[OpenAIのドキュメンテーションを参照](https://platform.openai.com/docs)。
```Javascript
require('dotenv').config();
var fs = require("fs");

const { Client, GatewayIntentBits } = require('discord.js');
const Discord = require("discord.js");
const client = new Discord.Client({intents: Object.values(Discord.IntentsBitField.Flags)})
const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

//起動確認
client.once('ready', () => {
    console.log(`${client.user.tag} Ready`);
});


client.on("ready", async () => { //スラッシュコマンドの作成
  const chat = [{
      name: "gpt", //コマンド名
      description: "質問したら答えが返ってきます", //コマンドの説明
      "options": [ //引数の作成
        {
          "type": 3,
          "name": "質問",
          "description": "質問したい文を入れてください",
          "required": true
        }
      ]
  }];
  await client.application.commands.set(chat);
});


client.on('interactionCreate', async interaction => {
  if (!interaction.isCommand()) return;

  const command = interaction.commandName;

  if (command === 'gpt') {
    const question = interaction.options.getString('質問');
    console.log(question); // 質問がコンソールに出力される

    (async () => {
      const completion = await openai.createChatCompletion({
         model: "gpt-3.5-turbo", //言語モデル
         messages: [{ role: "user", content:`${question}`}],
        });
      console.log(completion.data.choices[0].message.content); //コンソールに出力
      await interaction.reply(`${question}\n>>${completion.data.choices[0].message.content}\r\n`);
  })();
  }
});

client.login(process.env.BOT_TOKEN); //Discordログイン
```
# 結果
以下の画像のようになった![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2014168/c1c53f20-0013-1b0c-2a9d-c09f4b3abc67.png)
![ssss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2014168/51de2a61-14f4-67a1-67a4-62a7a562556f.png)
ChatGPTと同じような動きをしており、正常に動作している。
明らかにGPT-3の時よりもスムーズな会話ができる。

質問等あれば[私のTwitter](https://twitter.com/xyzmiku)に送っていただければ回答します。
Function ALVについて（基本から説明）

## ALV：SAPListViewer

ALVの表示は「GRID」と「LIST」２パターンがある。
GRIDはケーブル形式
LISTは
両方は、ツールバーが持っていて、機能は少し違っている。


#### Layout

Layoutは主に、ALVの表示フォーマットをコントロールしている。
モジュールプールに属する。

宣言は下記になる。
```abap
TYPE-POOLS:SLIS.  "ALVを使用するため、宣言が必要

* Layoutの宣言
DATA:
  LAYOUT TYPE SLIS_LAYOUT_ALV.
```

Layout構造のパラメータの説明は以下（詳細は「REUSE_ALV_GRID_DISPLAY」の is_layoutにご参照ください。）
```abap
  no_colhead(1) type c,          "no headings不显示列标题行
  no_hotspot(1) type c,          " headings not as hotspot
  zebra(1)      type c,          " striped pattern斑马线显示，颜色隔行交替显示
  no_vline(1)   type c,          " columns separated by space不显示垂直网格线
  no_hline(1)   type c,          "rows separated by space B20K8A0N5D不显示水平网格线
  cell_merge(1) type c,          " not suppress field replication  ALV单元格中的内容能够复制到剪贴板
  edit(1)       type c,          " for grid onlyALV是否可编辑，注意只对Grid模式有效，对List模式无效
  edit_mode(1)  type c,          " for grid only
  numc_sum(1)   type c,          " totals for NUMC-Fields possib.
  no_input(1)   type c,          " only display fields
  f2code        like sy-ucomm,   "gs_layout-f2code  = '&ETA'.设置触发弹出详细信息窗口的功能码，这里是双击(&ETA)就可以弹出详细窗口，而不需要通过右键菜单
  reprep(1)     type c,          " report report interface active
  no_keyfix(1)  type c,          " do not fix keycolumns
  expand_all(1) type c,          " Expand all positions
  no_author(1)  type c,          " No standard authority check
*        PF-status
  def_status(1) type c,          " default status  space or 'A'
  item_text(20) type c,          " Text for item button
  countfname    type lvc_fname,  "
```
【Salesforce】Access Restricted for API Only Usersでログインできなくなった

プロファイルまたは権限セットにて、API 限定ユーザ(Salesforce API のみを使用して salesforce.com にアクセスします。)を有効化したため、発生した可能性が有ります。

無効化したら「Access Restricted for API Only Users」が表示されず、ログインできました。
機械学習を使って86とBRZを見分けてみた①

## 初めに
機械学習初心者の私が、環境構築から成果物作成までの記録をつづっていきたいと思います。
※作成方法のイメージもついていない、完全0ベースからのスタートとなります。

最近、知人が車を買ったことで、道行く車をよく見るようになりました。

そこで、今回のテーマは車関連にしてみようと思います。

## 題材
トヨタの86とスバルのBRZ、見分けられますか？

86↓
![F570D2C9-B2F9-4BD3-A101-5FAAF5B551EE.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193323/cb29f03d-4470-a8d0-162e-91a0767689f0.jpeg)
公式サイトから引用
https://toyota.jp/gr86/

BRZ↓
![9D27D8A2-2772-4B5D-A6D1-F73F97E180E1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193323/884a4a9e-f8db-9e1f-9dfb-3137d4d3eff0.png)
公式サイトから引用
https://www.subaru.jp/brz/brz/


うーん、難しい...

「86」「BRZ」はトヨタとスバルが共同開発した姉妹車となっており、
見た目がとても似ているのです。
※車好きの知人からは「全然違うじゃん！すぐ見分けられるよ！」と言われましたが...

ということで今回は、
機械学習を用いて「86」と「BRZ」を見分ける
というテーマで進めていきたいと思います。

## 次回予告
次回は「86」「BRZ」を見分けるための理論調査編となる予定です。
webデザイナーについての講義に参加した時の備忘録

# はじめに
私事ですが、Webデザイン初心者に向けた講義に参加しました。
その時に学んだことを備忘録としてまとめましたので是非ご覧ください！

# Webデザインを学ぶ前に

まず、心がけていただきたいことがあります

それは<b>実践することが大事</b>ということです。
Webデザインはやることが広いので、
<b>どれか一つでもいいので実践してほしい</b>
ということを講師さんは仰ってました。

## Webサイトを作るメリット3つ

①営業が楽になる
②SNSと比較して表現の規制がない
③名刺代わり、信頼性を上げることができる

1つずつ解説します
①不特定多数の人が向こうからサイトを見てくれるので、広告代わりになるということです
②SNSは拡散力は強いものの、情報は常に流れて行っちゃうので情報が古くなります。Webサイトは自由な見せ方や、量で示すことができます
③例えば、会社のホームページがあると「しっかりしている会社だ」と思ってもらえます。


## Webサイトができるまで

できるまでに、これまた③つの工程があります。

①要件整理
②プロトタイプ（横文字キター。。）
③サイト構築

安心してください、一つずつ解説します。
①プロジェクトを始める前の段階で、必要な機能や要求をわかりやすくまとめていく作業。お客さんとどんな感じで作るか話し合ったりします。
②絵にして分かりやすくする。設計図的な。それを土台にしてさまざまなパターンを生み出してゆくための、試作品。
③実際作っていくぅ

・要件定義
例えば、パン屋のサイト作りたいとなった時に
若者向けのパン屋？主婦向け？高齢者向け？
高級感ある感じ？大衆向け？などなどヒアリングします。
安さを売りにしているとしたら、高級感漂う感じのサイトにすると変になりますよね。
つまりそういうことです。
・プロトタイプ
デザイン案は、がんがんパク..参考にしましょう！
カフェのサイトなら某スターｂkksのサイトを参考にしたりしましょう。
そっくりなデザイン案を作っておくと後が楽とのこと。
ここでも先ほど言ったように、お客さんの作りたい要望通りのサイトを参考にしましょう。参考にすることで早く且つ正確に作業が進みます。
・サイト構築
サーバーを立てたり、コーディング（実際に作ること）したりコーディングしたものをサーバーに入れたりします。

## 必要知識

さあ、皆さんが最も知りたい所じゃないですか？？
結論から言うと

::: note info
HTML、CSS、JavaScript、PHP、WordPress、メールの仕組み、サーバの基礎知識
:::

こちらになります！
色々ありますね。。頑張りましょう。
頑張り、、ましょう。


## Webデザイナーになっていいこと

①作ったものがそのまま世に出る（意外と他デザイン職は。。らしい）
②色んな業種のことにも詳しくなる
③再現性がある（テンプレを作ったらずっと使いまわせる）
④将来性がある（抽象的ですが。。）

こちらは分かりやすいと思います！

## Webデザイナーとして仕事していくには

①<b>実績を作ること</b>
②<b>人間関係構築</b>

ここは講師さんも目を大きくさせていた部分になります。
人間関係が超大事らしいです。まあどの業種でも同じですが。
もくもくと黙って作業するイメージですが、人間関係がかーなーり重要らしいのでかなり釘を刺してました。
後は、実績を作ることに関しては厳しめなことを仰ってました。
「ポートフォリオを何個も作ろうが実績がなければアマチュア。実績が一つでもあればプロとみなされる。」
とのことです。実績をあげてなんぼの世界なのですね。深い。

## スキルの身に付け方

①コーディング
・HTML、CSSをマスター
・wordpressでサイト実装
・PHP、JavaScriptを使う
②デザイン
・とにかく触って、ツールに慣れる
・ポートフォリオサイトをデザインする
・案件を受ける

実践あるのみって感じですね。

## wordpressって何ぞや？メリットは？

WordPressは、一言でいうと「サイトやブログを簡単につくれる仕組み」のことです。サイトの作成やブログの作成などができるCMS(コンテンツ管理システム)の1つで、無料のソフトウェアです。
Web関連技術が無い人でもサイト管理や記事投稿ができるため、世界中のサイトのおよそ4分の1はWordPressで構築されていると言われています。
すげえサービスですね。
HTMLなど不要とありますが、よりレベルの高いサイトを作るのであれば学ぶことは必須だそうです

wordpressで、作れるものを増やしていくことが大事です。
①html,cssで自由なデザイン
②phpでデータ管理
③jsで動きを付ける
難しいサイトの経験をしていくのが大事なんですねぇ。

メリットは簡単にサイトが作れること。
お客さんも編集したい人がいるので、色々と意味でスピード感が速いそうです。

## サイトを作るうえで大事な事

まずはコピペでOKです。がんがんパクりましょう。
一から作る必要はありません。独創的だと操作性が悪いことがあります。。
PV数が高いサイト、大手企業、お金がかかってそうなWEBサイトをインプットしまくりましょう。
ですが、パクるとはいっても画像やコードはパクってはいけないです。
著作権には気を付けてください！

## 案件獲得について
①まずはSNS運用、発信（大事！）
②知人の紹介、話しやすい方から受けてみる
③営業を掛ける（フリーランスを目指すなら必須です）
④できるだけプロのデザイナーに診てもらう。良いフィードバックをもらいましょう
⑤コミュニケーションができるだけ円滑に取れるような関係を築く

## 仕事の仕方
スピード感を大事にしましょう！こまめな情報共有ができると信頼されます。
お客さんには即レスしましょう。
後は常にできるだけ前進させましょう。不測の事態に備えることが大事です。
仕事の仕方が信頼につながります！

## ツール紹介

コードを書くツール→VScode
サイトのデザイン案を作る→Figma
ロゴやイラスト等を作る→Illsutrator
画像加工、キービジュアル等を作る→Photoshop

## 講義終盤に質問コーナーがありました。大事と思った文章だけをまとめておきます。

・人間関係の構築は大事！
・Webデザインは敷居高くない！
・HTML、CSSを極める事から始めましょう。cssは難しいよ。。
・ゲームデザイナー、マーケティングが需要があります。
・figma、アドビ、イラレ、フォトショは使えるに越したことはない
・クライアントの望むものが何かを考える、フィードバックをもらう
・作るものを決め、納期を決め、やるしかないようにする
・2週間で終わる仕事もある（一日８時間くらい）
・作るものを決めて案件をとり続ける
・実績命
・トライ＆エラーが大事
・営業代行もある
・常に学び続け、常に改善できる人が向いている
・Webデザインは3年くらいでマスターできると思う
・サイトはシンプルが最強
・０からがあんまりない。パクりあい。
・元あるものを使って始める。
・コーポレートサイトは他の人のやつを参考にする

# おわりに
今回はWebデザイナーについて解説しました。
参考になれば幸いです！
ありがとうございました！！
Powershellで配列の最後に要素を追加する

**Powershell**で配列の最後に要素を追加する処理を実装しました

```powershell
  
#乱数を格納する変数
$ans = 0
#カウント変数
$cnt = 0
#結果配列
$result = @();

##ランダムの数字を発生するユーザー定義関数
function random(){
    $ans =  Get-Random -Minimum 1 -Maximum 20
    return $ans
}

#5回ループを繰り返し、配列の要素を5つ入れる
while ($cnt -lt 5 ){
    $ans1 = random
    switch ($ans1 % 5){
        0 { $result += "秋元真夏"}
        1 { $result += "梅澤美波"}
        2 { $result += "桜井玲香"}
        3 { $result += "菅井友香"}
        4 { $result += "佐々木久美" }
    }
    $cnt++
}            

#配列の要素を取り出す
foreach($data in $result){
    Write-Host($data)
}
```

配列の追加は

```powershell
    $result += "秋元真夏"
```

のように「+=」で追加します。
git cherry コマンドはブランチ間のコミット差分を知るのにとても便利だ

# git cherry コマンドを活用しよう！

`git cherry` コマンドをご存知だろうか？

`git cherry-pick` は他のブランチ上の特定コミットを自分のブランチへ取り込むコマンドであるが、取り込んだものは別のコミットIDが与えられる。何度も cherry-pick を繰り返していると、取り込み済みのものと、まだ取り込んでいないものがわからなくなる。
それをチェックするのが `git cherry` コマンドだ！

## `git log` でブランチ間のコミットを比較する

まずは、コミットログの差分をとってみよう。
下記コマンドにて `カレントブランチHEAD`のコミットログのうち、`ブランチorigin/debug-work`のログに含まれていない、３つのコミットが差分として出る。

```sh
$ git log --oneline origin/debug-work..HEAD
ed079ea (HEAD -> master, tag: rel-master, origin/master, origin/HEAD) Feat: use dfnas
3a4fe94 Feat: refine moveYYYY
0980bb3 Feat: install dfnas
```

だが、上記コミットのいくつかは cherry-pick で取り込んだものである。

## `git cherry` でブランチ間のコミットを比較する

`git log` では cherry-pick で取り込んだものか否かがわからない。
そこで `git cherry` の出番である。

```diff
$ git cherry -v origin/debug-work
- 0980bb30bd4d2e6a0e23bb992e6f5a01ad34abff Feat: install dfnas
- 3a4fe949a5b43af24cecde8b2a85d7d4fc230410 Feat: refine moveYYYY
+ ed079eaef5c768a0d3869f4d2e99060ec2e23c3e Feat: use dfnas
```

行頭に "-" が付いているものは cherry-pick で取り込み済みのコミットである。
行頭に "+" が付いているものは 取り込んでいないコミットである。
両者が共通に持つコミットは表示されない。

よって、行頭に "+" が付いているコミットのうち、必要なものを取り込んでいけば良い。

## ブランチ管理への応用

`git cherry` の出力が多くなったら、比較対象ブランチやカレントブランチを、両者の祖先ブランチへマージ・リベースすべき兆候と考える。
大量に積みあがったコミットを１つのプルリクエストとして処理するのは大変なので、区切りの良い箇所で分割して小さい単位で管理したほうが良い。その判断に利用できる。出力行数で判断できるので自動化も簡単である。

また、ブランチの分岐状況を調べたい場合に、ツールを使って分岐ツリーグラフを見るよりも、`git cherry` でコミット比較を見た方が簡潔である。

`git cherry` はマイナーだが、実はかなり使えるコマンドだと思う。

## 最後に一言

`git cherry` はかなり使えるコマンドであるが、そもそもマージやブランチを先延ばしにするのは良くない。

`git rebase` は、別コミットIDであってもコミット内容が同一であれば、リベース先のコミットIDを残してカレントブランチ側のコミットIDを捨てるので、衝突せずにうまい具合に処理してくれる。
よって、リベース先のコードが安定したら、さっさとリベースするほうが楽であることを覚えておいてほしい。

## END
【個人開発】教育を可視化・共有するアプリ「.Eduka」

## はじめに

こんにちは@Ricky_と申します。

DIVE INTO CODEで４ヶ月間、未経験からプログラミングを学習いたしました。

この度卒業制作として、
「自分のアイデアから要件定義を行なってアプリケーション開発をする」
という経験をさせていただきました。

その際に作成した個人開発アプリ「.Eduka」が完成いたしましたのでご紹介させていただきます。

- [.Eduka](http://35.79.186.121/)
- [Twitter](https://twitter.com/ricky_engineer_)
- [Github](https://github.com/rikiya-miyazawa)


## 使用環境

- Ruby 3.0.1
- Ruby on Rails 6.1.7
- PostgreSQL 14.6

## .Edukaとは？

#### 由来

「エデューカ」と読みます。

Education(教育) × Eureka!(見つけた！) 

「本当の教育を見つける」という意味を込めて「.Eduka」と名付けました。

先頭のドットは、メソッドのように便利に簡単に使えるようにという思いを込めてつけました。


#### 開発の背景

<br>
皆さまはこのような経験はありませんか？
<br>
<br>
同じ仕事を教わるときに「先輩Aと先輩Bで仕事のやり方が全然違う。」
<br>
<br>

「私はどっちのやり方を覚えればいいの？」


教わる人は、１つの目的に対して最初から「何通りものプロセスを教わる」ことによって混乱し、

スキルの習得が遅くなるだけでなく、事故(人間関係のこじれや離職)にもつながってしまいます。


車の運転で例えると、後ろに乗っている二人が同時に

「右曲がって！」「左曲がって！」と言うようなものです。

<br>
このような状況は、私の前職の美容師に限らず、

「日々の業務の中で普遍的に起こり得る問題なのではないか？」


と思い、その問題を解決すべく「.Eduka」を開発いたしました。


## 主な機能

【全社員の教育内容の閲覧のシェアができる】

社員が「いつ」「誰に」「何を教わったのか」が教育内容に蓄積されていくので、それを全社員で閲覧のシェアができるようになっています。

![教育内容2説明.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848499/a69fa595-93b8-56a1-bbb6-8566a441df7b.gif)

こちらの機能により教育の「可視化」「共有」を実現しております。

<br>
<br>
【上司,部下の関係性を登録できる】
<br>
<br>
マイページで自分が担当する部下を設定できます。
部下を設定すると、その部下の教育ページで上司として表示されます。

![上司部下2説明.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848499/18f277d6-4628-c660-2eb1-e51b545567b8.gif)

こちらの機能により「上司と部下の関係性が可視化」されるようにしております。

<br>
<br>
【教育ジャンル -> 課題 -> 教育内容と深掘りできる】

![教育内容2説明.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848499/a69fa595-93b8-56a1-bbb6-8566a441df7b.gif)

こちらの機能により、「その社員にマッチした具体的な教育」ができるようになっております。

## こだわった/苦労した実装

上司, 部下の関係性を,一つのUserモデルと中間テーブルで実装したこと。

[.Eduka ER図]
![Eduka-ER(update).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848499/beb8bde7-0ba5-504f-f80b-ff361511f01a.png)

１つのUserモデルに中間テーブルのrelationshipsを作成して、「同じuserの中で上司,部下に見立てた関係性の構築をする」という実装が複雑で苦労したポイントになります。

## 終わりに

最後までご覧いただき誠にありがとうございます。

４ヶ月前までほぼ全くプログラミングができなかったことを考えると、我ながら成長を感じております。
DIVE INTO CODEの皆さま、同期、先輩期、後輩期の皆さま、サポートいただいた皆さま本当にありがとうございました。

プログラミングの学習はとても楽しく感じておりまして、まだまだ今後も自分もアプリもブラッシュアップを継続していきます。

今後はバックエンド技術をメインに、フルスタックエンジニアとして幅広く価値を生み出せるエンジニアを目指していきたいと考えておりますので、目標に向かって日々努力していきます。
Prettierを使ってSvelteKitプロジェクトのimportの順番をソートする

# はじめに
SvelteKitを使ったプロジェクトをチームで開発しているとモジュールをimportする場合において、どの順番に並んでる方が可読性が高いか考えることもあると思います。
しかし、どの順番がいいかは個人の感覚になってしまいますし、毎回手動で並び替えるのはしんどいので、Prettierを使ってimportの順番をソートしてみました。

# インストール
Prettierを使ってimportの順番をソートするにはpluginを使用する必要があります。いくつかpluginはあると思いますが、今回は[@trivago/prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports)を使用します。

```bash
npm install --save-dev @trivago/prettier-plugin-sort-imports
```

# 設定
いくつか設定がありますが、多くの方が使いそうなオプション2つを紹介します。
その他のオプションは[こちら](https://github.com/trivago/prettier-plugin-sort-imports#apis)で確認してください。

## importOrder
`importOrder`に並び替えしたい順番にファイルパスを列挙していきます。

サードパーティモジュールのimportを並び替えたいなら`<THIRD_PARTY_MODULES>`を使用すると好きな位置に並び替えできます。

```json
{
  "importOrder": [
    "^(svelte/(.*)$)|^(svelte$)",
    "^(@sveltejs/(.*)$)|^(@sveltejs/kit$)",
    "<THIRD_PARTY_MODULES>",
    "^\\$app/(.*)$",
    "^\\$env/(.*)$",
    "^\\$service-worker",
    "^\\$lib/(.*)$",
    "^[./]",
  ]
}
```

以下のようにソートされます。
```html
<script>
 import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 import { error } from '@sveltejs/kit';
 import Button from '@smui/button';
 import { browser } from '$app/environment';
 import { PUBLIC_BASE_URL } from '$env/static/public';
 import { build } from '$service-worker';
 import Modal from '$lib/components/Modal.svelte';
 import Header from './layout/Header.svelte';
</script>
```

## importOrderSeparation
ソートされたモジュールのグループ毎に改行をいれて区切るかどうかを指定できます。

```json
{
  "importOrderSeparation": true,
}
```

以下のように改行されます。
```html
<script>
 import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';

 import Button from '@smui/button';

 import Modal from '$lib/components/Modal.svelte';
 import Header from '$lib/components/Header.svelte';
 import Footer from '$lib/components/Footer.svelte';
</script>
```

# SvelteKitのデフォルト設定に対して設定する

SvelteKitの雛形を作った際に自動で作られる`.prettierrc`に対する設定を紹介します。

```bash
npm create svelte@latest my-app
```

```json:.prettierrc
{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte", "@trivago/prettier-plugin-sort-imports"],
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
	"importOrder": [
		"^(svelte/(.*)$)|^(svelte$)",
		"^(@sveltejs/(.*)$)|^(@sveltejs/kit$)",
		"<THIRD_PARTY_MODULES>",
		"^\\$app/(.*)$",
		"^\\$env/(.*)$",
		"^\\$service-worker",
		"^\\$lib/(.*)$",
		"^[./]"
	],
    "importOrderSeparation": true
}
```

# さいごに

これで設定完了です！ SvelteKitを使ってチーム開発する場合に是非、検討してみてください！
Lambdaのcontext.fail()は即座に処理を中断するわけではないみたい


Lambda内でcontext.fail()を呼び出して処理を中断させようとしても、後続の処理が実行されてしまうことに気がつきました。


例:

```js
exports.handler = function(event, context, callback) {
  if (!event.id) {
    context.fail(new Error('Invalid input: id is missing'));
  }
  
  // この行以降の処理が実行されてしまう
  console.log('Success');
  
  const response = {
    statusCode: 200,
    body: JSON.stringify({message: 'Success'})
  };
  callback(null, response);
};
```

調べた記録と対処を書いておきます。


## stackoverflowの回答
stackoverflowで見つけた質問と回答を読んでみます。

[AWS Lambda function continues for a bit after context.fail](https://stackoverflow.com/questions/35689730/aws-lambda-function-continues-for-a-bit-after-context-fail)


要約すると、

> context.failを呼び出してもその後の処理が少し続くみたいなのですが・・？これって仕様ですか？

という問いに対して、

> ドキュメントに明記されてないので確証はありませんが仕様みたいです。
fail()は「失敗を示す」と書かれていますが、それ以上の実行の停止を保証しているわけではありません。
以下がドキュメントの文書です。
context.fail()
Indicates the Lambda function execution and all callbacks completed unsuccessfully, resulting in a handled exception.
→ 全てのコールバックの失敗を受けて例外を処理します。


なるほどそういう仕様らしいことがわかりました。
ただ貼ってあった[公式ドキュメントのリンク](https://docs.aws.amazon.com/lambda/latest/dg/nodejs-context.html#nodejs-prog-model-context-methods)をみたところ、`context.fail()`についての記述は書いてありませんでした。


## ChatGPTに聞いてみる

▶︎ context.fail()について教えて

>context.fail() は、AWS Lambda関数の実行を失敗させるために使用されるコンテキストオブジェクトのメソッドの1つです。Lambda関数がエラーになった場合に使用され、エラーを生成して呼び出し元にエラーを返します。
context.fail() メソッドに渡されたエラーは、Lambda関数の呼び出し元に返され、エラーの詳細を確認することができます。


▶︎ context.fail()についての公式ドキュメントのURLをください

>申し訳ありませんが、context.fail() はAWS LambdaのPythonランタイムのコンテキストオブジェクトであり、AWS Lambdaの公式ドキュメントには記載されていません。ただし、AWS LambdaのPythonランタイムのコンテキストオブジェクトについては、以下のリンクからドキュメントを参照できます。
[AWS Lambda context object in Python](https://docs.aws.amazon.com/lambda/latest/dg/python-context.html)

Pythonのページしかないみたいでした。中身見ましたがfail()について書かれていません。

## どうしよう... → 結局throw new Error()する

もうシンプルにエラーが起きたら `throw new Error()`することにしました。

```js
  if (!error) {
    throw new Error('Invalid input: id is missing');
  }
```

例外がスローされると、Lambda関数の実行が停止され、エラーが呼び出し元に返されます。
手元で実行したことろ、fail()とは違って後続の処理が実行されることはありませんでした。

以上
【Rust】rust-analyzerでセマンティックハイライト

vscodeでシンタックスハイライトの設定を行う場合，`settings.json`の`editor.tokenColorCustomizations`で`"keywords"`や`"varialbles"`を一括で指定する方法と`"textMateRules"`でスコープを指定する方法があります．その二つでも十分なシンタックスハイライトが利用できるのですが，言語サーバーによる字句解析に基づいたセマンティックハイライトも利用できます．今回はrust-analyzerを用いたセマンティックハイライト特有の利用法をいくつか紹介します．詳しくはrust-analyzerの[ユーザーマニュアル](https://rust-analyzer.github.io/manual.html#semantic-syntax-highlighting)やvscodeの[ガイド](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide)を参照してください．
まずセマンティックハイライトを利用するために`settings.json`の`"editor.semanticHighlighting.enabled"`を`true`にします．
## ミュータビリティや消費の可視化
以下のように`"editor.semanticTokenColorCustomizations"`を指定していきます．`variable`トークンに`mutable`で修飾することでミュータブルな変数のスタイルを指定し，`consuming`で修飾することで消費されるときのスタイルを指定できます．
![mutabiliy_consuming_setting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/b2855915-a5b6-69eb-e1b8-4f893b054fd2.png)
これによって以下のように消費される部分では斜体になり，ミュータブルな変数は下線がつきます．`variable.mutable`はデフォルトで下線が付くため本来は`fontStyle`を指定しなくても大丈夫です．
![mutablity_consuming.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/49b01d70-fc5c-bafa-b973-b454170cd522.png)

## pubの可視化

`public`修飾子を使うことで`pub`と定義されたときのスタイルを指定できます．
![whether_pub_function_setting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/6397e72a-c0bb-556c-98af-9526721927b6.png)
これによって公開する関数とそうでない関数の色分けができます．
![whether_pub_function.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/fc9c0aef-6427-f2ed-b5ba-17cf9d5be6a7.png)
## 型と型パラメーターや型エイリアスとの色分け
デフォルトでは同じ色となる構造体と型パラメーター，型エイリアスの色分けを行えます．以下ではそれに加えて列挙体とトレイトも指定しています．トレイトは`interface`トークンで指定します．
![types_setting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/a10994e4-c1ad-fbae-b712-24b549048ed8.png)
![types.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/2917033b-23d3-8fc2-2097-3c4ab33b17de.png)
## 外部クレートとの色分け
外部クレートや標準ライブラリからインポートする場合の修飾子を指定できます．![module_structs_settings.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/1b19e334-1085-67f4-68ae-e9f1dfb63625.png)
これによって外部クレート，標準ライブラリ，内部モジュールで構造体の色分けができます．
![module_structs.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/79dc0b6b-48fe-c8bd-2e1b-c7ab428cbbad.png)

## deriveマクロとトレイトの色分け
こんがらがってしまいがちな`derive`マクロとトレイトの色分けももちろんできます．
![derive_and_trait_settings.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/473dfc5c-8cf2-0ff9-0003-587e95a3366b.png)
![derive_and_trait.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578803/43cd3e2e-0abe-f8d8-c152-b9b97f1515b1.png)
【Laravel】Laravel Query Biulderとは 

# LaravelのQuery Builderとは

普段何気なく使用しているlaravelのクエリビルダ。

よくlaravelで使用するクエリビルダを簡単にまとめてみた。

※正確ではないかもしれないが、ご理解を。

※簡単に今回はcontollerを作成せずにroutes/web.phpで行う。


## Query Builder(クエリビルダ)とは

DB操作をしやすくしたlaravelの機能。

通常、素のPHPではSQL文を書いてDB操作を行うが

laravelではクエリビルダを使用すればSQL文をベタで書く必要がなくなる。

※といってもSQLがわからないとなると理解度は落ちるかもしれない。

SQL文がある程度かける人がクエリビルダを使用したときに

より便利と感じるイメージにある。

## クエリビルダを使用するメリット

上記の通り、DB操作が楽になった。

SQL文が最悪わからなくてもLaravelだけで生きていくのであれば

laravelのお作法を覚えておけば

最悪大丈夫かもしれない。

またサーバー攻撃からの安全性もある程度カバーされているらしく

自分でセキュリティの部分をそこまで気にしなくて使えるのもメリット。

もちろんフレームワークに依存して頼りすぎるのも良くないため

セキュリティのことは意識しなければならないが。。。

## クエリビルダの使用方法

クエリビルダを使用するファイル(ControllerまたはModel等)で

以下のuse文を記載する。

以下は例）

```App/Http/Controllers/DataController.php

use Illuminate\Support\Facades\DB;

```

これで準備はOK。

いざ使用することになる。

## 該当テーブルの全てを取得する方法。

今回は例として

「sample」テーブルを用意して実践。

```routes/web.php

use Illuminate\Support\Facades\DB;

--省略--

 DB::table('sample')
 ->get();


```

これを変数に入れてdd()関数を使用して画面上で確認してみる。


![スクリーンショット 2023-03-03 114705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3176842/5368104a-c398-a280-c388-8cfcccdece47.png)

データベースも確認してみると取得した情報と差異はなさそうだ。

![スクリーンショット 2023-03-03 114855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3176842/5e5303f7-ffe8-47d1-ea92-028b8c72dbab.png)

これで取れそうなことがわかる。

## 条件を指定する　where()

テーブルはそのまま「sample」テーブル。

データベースのテーブルレコードは以下のものと仮定する。

![スクリーンショット 2023-03-03 114855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3176842/cd57bd11-8ce2-6b8c-3488-5ddf81ad2e7d.png)

このレコードの「idが2」のレコードを取ってきたいとする。

※morimoriさん

```routes/web.php

use Illuminate\Support\Facades\DB;

--省略--

DB::table('sample')
->where('id','=','2')
->get();

```

またdd()関数を使用して画面上で確認する。

![スクリーンショット 2023-03-03 115816.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3176842/7eae5b10-e4c3-028a-9ee1-e8fb7a4a4052.png)

idが2の該当するレコードだけを引っ張ってこれた。

## 特定のカラムを取得する　select()

テーブルはそのまま「sample」テーブル。

データベースのテーブルレコードは以下のものと仮定する。

![スクリーンショット 2023-03-03 114855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3176842/cd57bd11-8ce2-6b8c-3488-5ddf81ad2e7d.png)

上記の続きで今度はidが2の名前だけを取得したいとする。

新たに使用するメソッドはselect()。

その場合は下記の通りになる。

```routes/web.php

use Illuminate\Support\Facades\DB;

--省略--

DB::table('sample')
->where('id','=','2')
->select('name')
->get();

```

またdd()関数を使用して画面上で確認。

![スクリーンショット 2023-03-03 120542.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3176842/1a3c67af-a55a-bb9e-57be-f66d4b85208c.png)

名前だけを取れた。

## まとめ

今回は初歩中の初歩をまとめたが

クエリビルダはもっと便利なものがたくさん存在する。

徐々に使用できる幅を増やしていくための第一歩として他の人にも参考になればと思う。
`pandas.DataFrame` に使うカラム名を保持する `Enum`

# 動機
* カラム名がvscodeで補完できなくてつらい
* Enum にするなら同じ文字列は繰り返したくない

```py
from __future__ import annotations
from enum import auto, Enum, unique

class StringEnum(str, Enum):
    """文字列の列挙型

    Note
    ----
    3.11 で追加された `StrEnum` は `auto()` で `str.lower()` を呼び出すが、
    このクラスはそのままの名前を返す
    """

    def _generate_next_value_(name, start, count, last_values):
        return name

    def __str__(self):
        return self.value

    @classmethod
    def values(cls) -> list[str]:
        return [str(i) for i in cls]
```

# つかいかた
```py
import pandas as pd

@unique
class Columns(StringEnum):
    Spam = auto()
    Ham = auto()
    Egg = auto()
    Unchi = "💩"

pd.DataFrame(columns=Columns.values())
# Empty DataFrame
# Columns: [Spam, Ham, Egg, 💩]
# Index: []
```

# NOTE
`pd.DataFrame(columns=Columns)` でも動くが2023-03-03現在の型定義ではPylanceがエラーを吐くので`.values()`経由
`collections.abc.Collection[str]` とは互換するけど `list[str]` とは互換しない
ファーストクラスコレクション ~イミュータブル風~

# First Class Collection

配列やコレクションの操作はアプリの様々なところに飛び散りがちです。ショッピングカートのアイテム、RPGのパーティメンバー、労務管理ツールで管理される社員などなど色々なところで操作されるオブジェクトを素朴にそれぞれのコンテキストで操作すると重複コードの原因になります。

ファーストクラスコレクションはそういうケースに高い保守性と安全性をもって対応するためのオブジェクト指向なりの答えです。ちょっと長いですがECサイトで複数のアイテムを入れられるショッピングカートをファーストクラスコレクションで実装した場合の例を見てみます。

```TypeScript
class ShoppingCart {
  private items: string[];

  constructor(items: string[]) {
    this.items = items;
  }

  public addItem(item: string): ShoppingCart {
    return new ShoppingCart([...this.items, item]);
  }

  public removeItem(item: string): ShoppingCart {
    const index = this.items.indexOf(item);
    if (index !== -1) {
      return new ShoppingCart([...this.items.slice(0, index), ...this.items.slice(index + 1)]);
    }
    return this;
  }

  public totalCost(): number {
    // Calculate the total cost of all items in the shopping cart
    let total = 0;
    for (const item of this.items) {
      total += this.itemCost(item);
    }
    return total;
  }

  private itemCost(item: string): number {
    // Lookup the cost of the item in a database or API
    // For the purposes of this example, we'll just return a fixed cost
    return {
      'apple': 1,
      'orange': 2,
      'banana': 3,
    }[item] || 0;
  }

  public getItems(): ReadonlyArray<string> {
    return Object.freeze(this.items.slice());
  }

}

// Example usage:
const cart = new ShoppingCart(['apple', 'orange']);
const newCart = cart.addItem('banana');
const newerCart = newCart.addItem('peach');
console.log(cart); // ShoppingCart { items: [ 'apple', 'orange' ] }
console.log(newCart); // ShoppingCart { items: [ 'apple', 'orange', 'banana' ] }
console.log(newerCart); // ShoppingCart { items: [ 'apple', 'orange', 'banana', 'peach' ] }

```

基本的なポイントは2つです。
1. コレクション(配列)をprivateなインスタンス変数として持つこと
2. コレクション型のインスタンス変数を操作するメソッドをクラス内に実装すること

ただし注意すべき点が2つあります。

# 副作用を撲滅

🙆‍♂️ この例は上で示したaddItemメソッドを再掲したものですが、副作用が無い(つまりイミュータブル!!)ように実装してあります。

```TypeScript
  public addItem(item: string): ShoppingCart {
    return new ShoppingCart([...this.items, item]);
  }
```

❌ 副作用ありで実装すると下のようになりますが、これをやってしまうと関数の実行結果がインスタンス変数itemsに依存することになってしまい見通しも悪いですしテストも書きにくいです。

```TypeScript
public addItem(item: string): void {
    this.items.push(item);
  }
```

# 外部に値を渡すときはイミュータブルにして渡すこと!

🙆‍♂️ その時点でカートに入っている全てのアイテムを返すメソッドですが、こんな感じでオブジェクトをイミュータブルにしてから返しましょう。

```TypeScript
public getItems(): ReadonlyArray<string> {
    return Object.freeze(this.items.slice());
  }
```

❌ もしもこんな感じでそのまま返してしまうと、呼び出し元で勝手にitemsを変更されてしまいます。せっかくitemsをカートクラスの中に閉じ込めたのにその意味がなくなります。

```TypeScript
public getItems(): ReadonlyArray<string> {
    return this.items;
  }
```
wordpressで文字列を編集したときに勝手に間が開いたりしたときの対処法

## はじめに
趣味でwordpressテーマを作っている中学生プログラマーです。
デザインをしているときに、文字列を変えただけで作ったはずのデザインが崩れていることが多々あります。
なんで?
と思ったので、調べてみました。

## 原因は、ヤツだ。
そう、みなさんご存知、文字実体参照記号です。
```&```と```;```で挟まれた謎の文字、みたことありませんか?
```html
<ul>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>ぽへぽへ</li>
    <li>ぽへぽへ</li>
</ul>
```
このように、wordpressのエディターで編集をしていると入ってしまうことがあるようです。
```html
<ul>
    <li>ぽへぽへ</li>
    <li>ぽへぽへ</li>
</ul>
```
また、一見問題がなくても
```html
<ul>
□□□□<li>ぽへぽへ</li>
□□□□<li>ぽへぽへ</li>
</ul>
```
この```□```の部分がスペースになっちゃってることも...

## まとめと対処法
もし、自分のデザインに心当たりがない表示崩れが起こっている時は、
```Shift```+```Tab```キーでインデントをなくしてから、（以下参照）
```html
<ul>
<li>ぽへぽへ</li>
<li>ぽへぽへ</li>
</ul>
```
もう一度```Tab```キーでインデントをつけてあげてください。
```html
<ul>
    <li>ぽへぽへ</li>
    <li>ぽへぽへ</li>
</ul>
```

以上。
Rails7で動的に連動するセレクトボックスを作ろう！

## はじめに 
親のカテゴリーを選択すると、子のカテゴリーの中身が選択された親のカテゴリーによって変わるようなセレクトボックスの作り方です。　


https://qiita.com/jnchito/items/59a5f6bea3d7be84b839

こちらの記事が動画付きで説明されていてイメージしやすいと思います。　

## バージョン 
- Ruby 3.1.3
- Rails 7.0.4 

## モデル 
モデルはCategory(親要素)とSubCategory(子要素)の2種類で、関連付けされています。
```ruby:category.rb
class Category < ApplicationRecord
    has_many :sub_categories
end
```

```ruby:sub_category.rb
class SubCategory < ApplicationRecord
    belongs_to :category
end
```

## View
セレクトボックスは使い回しできるようにパーシャル化しています。

```erb:_selectbox.html.erb
<%= form_with url: category_search_path, local: true, method: :get do |f| %>
    <div class="category-select">
        <%= f.collection_select :category, Category.all, :id, :name, include_blank: "カテゴリーを選択してください" %>
    </div>
    
    <div id="sub_category">
        <%= f.select :sub_category, [], include_blank: "---", class: "default-sub-category-select" %>
    </div>
    
    <%= f.submit "検索", class: "btn btn-primary" %>

    <% Category.all.each do |category| %>
        <template id="sub-category-of-category<%= category.id %>">
            <%= f.collection_select :sub_category, category.sub_categories, :id, :name, include_blank: "サブカテゴリーを選択してください" %>
        </template>
    <% end %>
<% end %>
```
はじめに全ての子要素のセレクトボックスをtemplateで用意しておき、親要素が選択された時にjavascriptで操作して必要なhtmlを取得するという魂胆です。

## Javascript
今回は~~使い方がわからなかったので~~勉強のために、jQuery等のフレームワークは使わずに書いています。

```javascript:category_select.js
// 取得したテキストをhtmlに変換する関数
var stringToHTML = function(str) {
    var dom = document.createElement('div');
    dom.id = 'sub_category';
    dom.innerHTML = str;
    return dom;
};

document.addEventListener('turbo:load', function() {
    let category = document.querySelector('#category');
    let defaultSubCategorySelect = `<select name="sub_category" id="sub_category">
    <option value>---</option>
    </select>`;

    // カテゴリーが変更された時の処理
    category.addEventListener('change', function() {
        
        // カテゴリーが選ばれた場合
        if (category.value !== '') {

            // 空のサブカテゴリーのセレクトボックスを削除
            let subCategory = document.querySelector('#sub_category');
            subCategory.remove();

            // 選択されたカテゴリーに応じたHTMLを挿入
            let selectedTemplate = document.querySelector(`#sub-category-of-category${category.value}`);
            category.after(stringToHTML(selectedTemplate.innerHTML));
        
        // include_blankの部分が選択された場合
        } else {

            // サブカテゴリー選択用のセレクトボックスを削除
            let subCategory = document.querySelector('#sub_category');
            subCategory.remove();

            // ダミーのセレクトボックスを挿入
            category.after(stringToHTML(defaultSubCategorySelect));
        };
    });
});
```
これで動的なセレクトボックスが作成できました。　

## 参考　
https://qiita.com/jnchito/items/59a5f6bea3d7be84b839


https://qiita.com/i__kobe/items/3974d9ec78dbf082a5ef

間違いやご指摘等あればコメントいただけると幸いです。
【2023年版】Google ColabでSQLを使う【DuckDB, JupySQL】


:::note
昨年こんな記事を書きましたが、もっといいやり方があったのでupdateします。
:::

https://qiita.com/_jinta/items/fb79f9f9b65b241e92b2


# 0. 使うもの
JupySQLとDuckDBを使う。

https://jupysql.ploomber.io/en/latest/quick-start.html

**JupySQL**は以前紹介したipython-sqlと似たようなライブラリだが、現在あまり更新されていないipython-sqlに対して、(i) バグを修正し、(ii) 機能を追加しているものである。基本的な使い方はipython-sqlと変わらない。

https://duckdb.org/

**DuckDB**はSQLiteのOLAP版という立ち位置らしい。お手軽に使え、分析用途に強いDBだと理解している[^duckdb]。

[^duckdb]: 正直あまりDuckDBについてはちゃんと理解できてないのだが、日本語でも沢山の記事があるのでそれらを見て頂きたい。たとえばこちらなど → https://zenn.dev/notrogue/articles/1193d0ab8d8eda

ということで、実際に簡単に使う方法を見ていく。

# 1. 諸々準備
```sh
!pip install jupysql duckdb-engine

# データ（csvファイル）のダウンロード
!wget https://raw.githubusercontent.com/mwaskom/seaborn-data/master/penguins.csv
```
使用するライブラリをインストールし、データをダウンロードする。今回はpalmerpenguinsのデータを使う[^pp]。

[^pp]: https://allisonhorst.github.io/palmerpenguins/ ペンギンかわいい。

```sh
# エクステンションを読み込む
%load_ext sql

# DuckDBのインメモリのDBに接続する
%sql duckdb://
```
エクステンションを読み込むと、`%sql` を付けた行でSQLを実行できるようになる。まずDuckDBのインメモリのDBに接続する。


# 2. クエリの実行
```SQL
%%sql
SELECT
  *
FROM
  penguins.csv
LIMIT 3;
```

`%%sql` コマンドを頭に付けたセルではSQLを実行できる。なお、DuckDBは直接csvに対してクエリを実行できる。

また、クエリの結果は `_` に格納されており、 `print(_)` で下のような整形された表が出力される。

<img width="65%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665792/6be6b6da-015a-3c72-ab0b-7ece6a8c9e61.png">


# 3. pandasへの変換
```SQL
%%sql result << 
SELECT 
  *
FROM 
  penguins.csv
LIMIT 4;
```
`%%sql variable_name <<` から始めると、結果を変数に格納できる。 それをpandas.DataFrameに変換するには、 `.DataFrame()` とするだけ。

```python
result.DataFrame()
```

<img width="65%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665792/622a31ae-d6a9-6510-98fd-451b2bd6f36b.png">




# 4. csvからテーブルを作成
```sql
%%sql
CREATE OR REPLACE TABLE penguins AS
SELECT * 
FROM 'penguins.csv';
```

ここのDuckDBだと簡単。

インメモリでなくファイルに残したいのであれば、以下を先に実行しておく（example.dbがファイル名）。

```sh
%sql duckdb:///example.db
```

# 最後に
コードは[コチラ](https://gist.github.com/tanaka-jin/9995bb28f55a6cf131e99adddc65b083)に置いてるので、そのままcolab立ち上げて触ってみたい方はぜひどうぞ！
 
2023年はPolarsとDuckDBとPRQLが流行ると思ってます[^al]。使い倒していきたいものです。DuckDB最高！


[^al]: 既に流行ってるという説もあります。
Pythonの条件式について

自分用のメモですが、Pythonの条件式をメモしておきます。

Pythonにおける条件式には、以下のようなものがあります。

a == b: aとbが等しい場合にTrue
a != b: aとbが等しくない場合にTrue
a < b: aがbより小さい場合にTrue
a > b: aがbより大きい場合にTrue
a <= b: aがb以下の場合にTrue
a >= b: aがb以上の場合にTrue
a is b: aとbが同じオブジェクトである場合にTrue
a is not b: aとbが異なるオブジェクトである場合にTrue
a in b: bがaを含む場合にTrue
a not in b: bがaを含まない場合にTrue
これらの条件式は、if 文の条件式や、while 文の条件式、for 文の条件式など、Pythonの様々な文で使用されます。条件式を使うことで、プログラムの実行を制御することができます。
gRPCのProtocol Buffersのフィールド番号が被ると予期せぬデータを取得してしまう

## 現象

既存のサービスからある程度規模が大きい改修を別ブランチで対応し、
その際にマイクロサービスを何個か改修したのだが、
その際に、新旧のバックエンドサービスのgRPCのProtocol Buffersのフィールド番号がズレてしまっていた。

そのため、リリース後、BFFサービスからバックエンドサービスに接続する際、
新→新の接続に関しては問題ないのだが、
リリース漏れが発生し、新→旧への接続となっていたため、
フィールド番号のズレにより、予期せぬデータを取得してしまい、障害になっていた。

## 理由

gRPCのProtocol Buffersは、フィールド番号が同じ値を取得してくるので、
ズレが有ると予期せぬデータを取得してくる。

### 例

下記だと、新→旧に接続する際に、nameにkanaが入って取得出来てしまう。

* 新
    - `string name = 63;
* 旧
    - `string kana = 63;

## 対策

* 一度リリースしたフィールド番号は変えず、次の連番を使っていく。
* 廃止するフィールドがある場合は、フィールド名を変えるなど、論理削除することで、番号の再利用を防ぐ。

## 参考

https://protobuf.dev/programming-guides/proto3/#updating
match文を使った判定

前回投稿した肥満度、標準体重を求めるアプリ

https://qiita.com/nogizakapython/items/a548fb053ae92c545e47

に、**match**文を使って肥満度を判定する部分を実装しました。

まずは全体のソースコードです

```python
# 新規作成 2023/3/3
# match構文を使って、BMI測定アプリを変更する

height = 0
weight = 0.0
# 結果出力
# 出力結果関数
def output():
  separator = "=="
  print(separator * 20)

# 肥満度判定関数
def hantei(data):
  match data:
    case data if data < 18.5:
      print("痩せ過ぎです")
    case data if data < 25:
      print("普通体重です")
    case data if data < 30:
      print("軽程度肥満です")
    case data if data < 35:
      print("中程度肥満です")
    case _:
      print("高程度の肥満です")

# 標準体重計算関数
def calc_sweight(w_h):
  # 小数点以下1位まで求める
  r = round(w_h * 22,1)
  # 結果を返す
  return r

while True:
  # 例外処理
  try:
    H = int(input("身長をcm単位で整数で入力してください "))
    height = H
    break
  except:
    print("Check NG")

while True:
  # 例外処理
  try:
    W = float(input("体重をkg単位で整数または小数で入力してください "))
    weight = W
    break
  except:
    print("Check NG")

# BMIの値を計算する
w_h = (height / 100) ** 2
BMI = weight / w_h
# 結果を出力する
output()
print("あなたのBMIの値は{:.2f}です".format(BMI))
# 肥満度を表示する
hantei(BMI)
# 標準体重を計算する
result =  calc_sweight(w_h)
print(f"標準体重は{result}kgです")
output()
```

ここで***match***文についてです
```python3
match data:
    case data if data < 18.5:
      print("痩せ過ぎです")
    case data if data < 25:
      print("普通体重です")
    case data if data < 30:
      print("軽程度肥満です")
    case data if data < 35:
      print("中程度肥満です")
    case _:
      print("高程度の肥満です")
```

```python
match(判定する変数)
    #条件1
    case [条件]:
        ・・
    #条件2
    case [条件]:
       ・・
    #上記条件以外の処理
    case _
       ・・
```
と記述します。条件の範囲の場合は
```python
match T
    case T if T < 30:
        print("A") 
```
のように記述します。match文はPython3.10から実装された新しい機能です。