OmniAICreator/Qiita-1.07M huggingface dataset:
React で画像を選択するradio box のフォームを作ってaxiosでPOSTリクエストする

# コード例

radioで選んだ値をuseStateの値として保持しておいて、axios通信時に利用している
CSSだけでやりくりするのが難しかったため

`ImageRadio.tsx`

```tsx
import axios from "axios";
import ImageRadioCss from "./ImageRadio.module.css";

import { useForm } from "react-hook-form";
import { useState } from 'react'

const Form = () => {
  const { register, handleSubmit } = useForm();

  const items = ["item1", "item2"]
  const [selectedItem, setItem] = useState("");

  const requestURL = "https://httpbin.org/post";
  const [getData, setResponse] = useState({ form: { item: "" } });

  const onSubmit = (data: any) => {
    axios.post(requestURL, new URLSearchParams({ item: selectedItem })).then((response) => {
      setResponse(response.data);
    });
  };
  const handleChange = (e: any) => {
    setItem(e.target.value);
  };

  return (
    <div className="App">
      <h1>Form ImageRadio</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
        </div>
        {items.map((item) => {
          return (
            <div key={item}>
              <input
                className={ImageRadioCss["item-input"]}
                id={item}
                type="radio"
                {...register('item')}
                value={item}
                onChange={handleChange}
                checked={item === selectedItem}
              />
              <label
                htmlFor={item}

                className={ImageRadioCss[item]}
              >
              </label>
            </div>
          );
        })}
        <button type="submit">Submit</button>
      </form>
      <div>
        <h2>Item</h2>
        <p>{getData['form']['item']}</p>
      </div>
    </div>

  );
}

export default Form;
```


`ImageRadio.module.css`

```css

/* item1 / item2 のプロパティは共通化してない */
.item1 {
  content: "";
  display: inline-block;
  background-size: contain;
  width: 100px;
  height: 60px;
  background-image: url(./images/1.png);
}

.item2 {
  content: "";
  display: inline-block;
  background-size: contain;
  width: 100px;
  height: 60px;
  background-image: url(./images/2.png);
}

.item-input:checked + label {
  border: 5px solid red;
  box-sizing: border-box;
}
.item-input {
  display:none;
}

```


# 動作例


<img width="1374" alt="image" src="https://user-images.githubusercontent.com/13635059/211257325-b88c6fc0-83c4-4473-813f-0cc9122ab45d.png">


# 環境

next@13.1.1

# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
特定のパスからのアクセスか判定したい&RegExpとリテラルの差について(JS:正規表現)

Javascript(以下JS)で特定のパスからのアクセスか判定したい場合がありました。正規表現で対応しようと考えたのですが、意外に悩まされたので、簡単にまとめておこうと思います。完成したコードがこちら。

```url_check.js
let pathname = '/index/5/edit/'
if (new RegExp(/\/index\/.*\/edit/).test(pathname)) {
console.debug('該当のURLからのアクセスです。');
}
```

ここでは「/index/5/edit/」というパスからきた場合、debugで「該当のURLからのアクセスです。」という文言を表示させるようにしています。パスに含まれる5ですが、ここではユーザーIDとして、この部分は動的に変わることを想定しています。それでは正規表現の解説をしていきます。

```url_check.js
// ① オブジェクトを生成して、行う方法
new RegExp(/\/index\/.*\/edit/)

// ② 正規表現リテラルで行う方法
let literal = /\/index\/.*\/edit/
```

JSで正規表現を行う為には2通りの方法があり、1つは上記のようにRegExpオブジェクトを作成して行う方法。もう一つは正規表現リテラルです。前者は正規表現を扱うための標準組み込みオブジェクトを指し、後者はJSで用意されている正規表現を行う為の構文です。どちらの場合でも今回のケースは対応できますが、両者には少し違いがありその点については後半に説明を行い、ここではコードの解説をしていきたいと思います。

```url_check.js
new RegExp(/\/index\/.*\/edit/)
```

他言語でも同じような形式かと思いますが、正規表現を行う宣言としてスラッシュを最初と最後に書きます。そしてパスにはスラッシュが含まれていますが、正規表現では上記のように宣言を意味するので、スラッシュの前にバックスラッシュを入れることで、通常の文字として認識(エスケープ)させるようにします。indexやeditのようにエスケープさせる必要のない通常の文字列はそのまま記載します。間にある.*ですが、ドットは改行以外の任意の1文字にマッチするかを判定し、アスタは直前の文字が0回以上繰り返しにマッチするかを判定します。アスタがなしでドットだけにしてまうと、2文字以上が来た場合、次の記号とぶつかってしまう為組み合わせて使用しています。

```url_check.js
new RegExp(/\/index\/.*\/edit/).test(pathname)
```

最後のtest()という部分ですが、こちらは正規表現の為に用意されているメソッドで()の内の引数に渡した値が、正規表現のパターンにマッチすれば「true」を返し、マッチしなければ「false」を返します。これをif分で囲ってやることで、debugを出す・出さないを制御している訳ですね。

### RegExpオブジェクトと正規表現リテラルを使用した場合の違い
両者の違いについて、<font color="red">**コンパイルされるタイミングが異なる**</font>という点が挙げられます。RegExpオブジェクトはコンストラクタ関数が実際に呼ばれたときにコンパイルされるのに対し、正規表現リテラルを使用した場合はスクリプトロード時にコンパイルされます。これがどういう差を生み出すかというと以下の2つが挙げられます。
・パフォーマンス(実行時間)に差が出る
・動的に正規表現の中身を変えられるか
パフォーマンスについてですが、正規表現リテラルの場合スクリプトロード時にコンパイルされるので、RegExpオブジェクトと比較するとかなり速いです。では常に正規表現リテラルを使用した方が良いんじゃないかというとそうではなく、動的に正規表現の中身を変えたい場合はRegExpオブジェクトを使用する必要があります。

```url_check.js
// ユーザーが実際に入力した値を受け取ることを想定(動的に値が変わる)
let userInput = 5

let pathname = '/index/5/edit/'
if (new RegExp(`/index/${userInput}/edit`).test(pathname)) {
console.debug('該当のURLからのアクセスです。');
}
```

上記のようにuserInputを変数として、実際にユーザーが入力した値がパスに入ることを想定した場合、ここを厳密に正規表現をかけようとすると正規表現の中身が動的に変わりますので、このように式展開をする形になります。RegExpオブジェクトはコンストラクタ関数が実際に呼ばれたときにコンパイルされる為このような実装ができますが、正規表現リテラルを使用した場合はスクリプトロード時にコンパイルされる為動的に変わる値を受け取れないということになるわけです。また正規表現リテラルでは式展開をすると単純な文字列に扱いになってしまう為、そもそもこういう書き方ができないというのもあります。

## 終わりに
以上簡単ではありますが、JSの正規表現についてまとめてみました。特にRegExpオブジェクトと正規表現リテラルを使用した場合のパフォーマンスの違いについては、実装時には考えてもいなかったので良い学びになりました。今回の例の他にも、様々な正規表現のパターンがあると思いますので、機会があればチャレンジしていきたいですね。
iOS実機で「iproxyは開発元を検証できないため」の対処法

MACとAndroidStudioのFlutterからiOS実機で実行しようとするとエラーが表示されます。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/8f4e2293-6cfc-7fe1-8ac4-1305eaf6d369.png'>

# 対処法
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/56956938-1492-8b97-937a-bb463ce4b04b.png' width=80%>

左上のアップルメニュー、システム環境設定
「プライバシーとセキュリティ」
「iproxyは開発元を確認できないため、使用がブロックされました」
「このまま許可」を押します。

この記事は2023年1月に執筆しました（古い記事だと画面が少し変わっています）
ブラウザで特定サイトへのアクセス制限をかけて無駄なネットサーフィンの時間を削減！（iPhone/Mac）

# 背景
PCやiPhoneを操作していると、ついついYahoo!ニュースやFacebookを見て時間が過ぎ去っていってしまいます。そこで、思い切ってブラウザでそれらのサイトへのアクセス制限をかけることにしました。
ここではiPhone/Macで制限をかける方法を記載します。拡張機能や追加のアプリインストールは**不要**です。
動作確認はChromeで行いましたが、FirefoxやSafariなど他のブラウザでも使える方法だと思います。
今回は例として、Yahoo!ニュースとFacebookにアクセス制限をかけます。

# iPhone編
概要としては、閲覧したくないサイトを成人向けWebサイト扱いにしてしまいます（笑）

iPhoneの設定画面から
「設定→スクリーンタイム→コンテンツとプライバシーの制限→コンテンツ制限→Webコンテンツ」
の順番で画面遷移します。
ここで、「成人向けWebサイトを制限」を選択したうえで、「常に許可しない」のリストにアクセス制限したいサイトを追加します（今回はYahoo!ニュースとFacebookを追加します）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704657/e6e3e70d-2687-1bb1-5ef8-9c0632fd2b43.png" width="250">

以上で設定は完了です。
試しに、Yahoo!ニュースにアクセスすると、このように表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704657/232743fc-1b0c-0e31-b1c1-1ce9634be2e0.png" width="250">

以上で、iPhoneにアクセス制限をかけることができました！

# Mac編
Macでも同じようにスクリーンタイムからの設定もできるのですが、その場合Safariでしかアクセス制限が反映されません。
そこで、Chromeなど別のブラウザでもアクセス制限ができるようにhostsファイルを書き換えることにします。

ターミナルを立ち上げてhostsを編集します
```
$ sudo vi /etc/hosts
```
次の2行を末尾に追記します
```
127.0.0.1 news.yahoo.co.jp
127.0.0.1 www.facebook.com
```
この意味合いとしては、Yahoo!ニュースとFacebookのアドレスが
要求されたときに`127.0.0.1(localhost)`に強制的にアクセスするような設定のため、
表示するものがなくなってしまいます。
※注意事項として、facebookのアドレスの先頭の`www.`を忘れないようにしてください。ブラウザだと一見`www.`の表示がないため、私は当初シンプルに`facebook.com`を設定していたのですが、これだと動作しませんでした。他にも類似の例があるかと思いますので、ご注意ください。

以上で設定は完了です。
設定を反映させるため、ブラウザを一旦終了させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704657/2b95bba9-1c77-9f44-bfe5-f7e97af672d8.png)
ブラウザを再起動した上で、試しにYahoo!ニュースにアクセスすると、このように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704657/c5ff0ba3-3c64-c8eb-0796-ada47b71097b.png)
以上で、Macでも無事にアクセス制限をかけることができました！
外部の関数からthisを参照しようとしたら、エラー。

<h1>始めに</h1>
ReactのClassComponentの中で、stateをalertする関数を作成し、文字をクリックするとその関数が
呼ばれるようにしたら、以下のエラーが発生。

<B>Uncaught TypeError: Cannot read properties of undefined (reading 'state')</B>

<h2>コード</h2>

```react
import React, { Component } from 'react'

export default class ClassComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { date : new Date() };
    }

    handleClick() {
        alert(this.state.date);
    }

    render() {
        return (
            <div>
                <h1 onClick={this.handleClick}>Hello, world!</h1>
                <div>{this.state.date.toLocaleTimeString()}</div>
            </div>
        )
    }
}
```

<h2>原因と対策</h2>
handleClick()は、classComponentのライフサイクルに定義されていない外部の関数であるため、<br>
参照のエラーが発生しました。<br>
そのため、問題の関数とclassComponentをお互いにbindしてあげなければなりません。<br>
classComponentは自分自身をhandleClickに知らせるため！<br>
もし、外部の関数からclassComponetの値に参照しない場合は不要

[classComponent lifeCycle](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

<h2>修正後コード</h2>

```react
import React, { Component } from 'react'

export default class ClassComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { date : new Date() };
        this.handleClick = this.handleClick.bind(this); //追加したコード、thisと外部の結合
    }

    handleClick() {
        alert(this.state.date);
    }

    render() {
        return (
            <div>
                <h1 onClick={this.handleClick}>Hello, world!</h1>
                <div>{this.state.date.toLocaleTimeString()}</div>
            </div>
        )
    }
}
```

<h2>他の案</h2>

```react
    handleClick = () => {
        alert(this.state.date);
    }
```
arrow functionにすることで、thisが誰なのかがわかるため、bindコードを省略することが可能になる。
VA とは

## 勉強前イメージ

これも公開鍵暗号のなんかだった気がする

## 調査

### VA とは

Validation Authority の略で検証局や証明書有効性検証機関と呼ばれます。
[PKI](https://qiita.com/miyuki_samitani/items/0de3fb60fdae29a85288) の一つの機関で
デジタル証明書の失効状態( [CRL](https://qiita.com/miyuki_samitani/items/ab89d304b37b12a3a8b0) )について問い合わせされたら応答を行う役割を持っています。

認証局(CA)とは違って、検証だけに特化しています。
その為デジタル証明書の発行は行っておりません。

## 勉強後イメージ

短くなってしまった・・・
ほかのCRLと一緒に勉強していったらなんとなくわかってきたかも

## 参考

- [認証局【CA】Certificate Authority](https://e-words.jp/w/%E8%AA%8D%E8%A8%BC%E5%B1%80.html)
CRL とは

## 勉強前イメージ

証明書のリスト的ななにか

## 調査

### CRL とは

Certificate Revocation List の略で、日本語では証明書失効リストと呼ばれます。
有効期限前に失効させたれたリストのことを指します。
証明書を発行する認証局(CA) が判断・管理して電子署名を付与します。
CRLには失効した証明書のシリアル番号と失効日時が記載されています。

CRLは [X.509](https://qiita.com/miyuki_samitani/items/5758b40e63f7a814858d) の仕様に準拠しています。
[こちら](https://qiita.com/miyuki_samitani/items/5758b40e63f7a814858d) にも記載の通り、後から有効にすることも可能で
恒久的な失効(revoke) と、一時的な無効化(hold)が存在します。

このCRLに関して問い合わせを行うのは [OCSP](https://qiita.com/miyuki_samitani/items/cc6247b600bf1bbc389e) というプロトコルを使用して
問い合わせ先は検証局(VA) になります。

### 失効について

証明書失効については
誤って発行されや場合や、秘密鍵が漏洩してしまって悪用の可能性があると認証局が判断した際に
停止、または無効化がなされます。

## 勉強後イメージ

X.509とちょっと違い分かんなかったけど
X.509は仕様なのか。

## 参考

- [CRL【Certificate Revocation List】証明書失効リスト](https://e-words.jp/w/CRL.html)
- [CRL【Certificate Revocation List】](https://www.itpassportsiken.com/word/CRL.html)
楽観ロックとは

# 楽観ロックとは
そもそも楽観ロックとは、めったなことでは他者との同時更新は起きないであろう、という楽観的な前提の排他制御のことです。データそのものに対してロックは行わずに、更新対象のデータがデータ取得時と同じ状態であることを確認してから更新することで、データの整合性を保証します。

例えば、顧客がレジで顧客が購入したら、商品テーブルから在庫数カラムの情報を購入した分を反映するAPIが処理されるとします。
在庫10のりんごがある状態から、Aさんがりんごを10個購入すると、商品(りんご)テーブルの在庫数カラムは0になります。

これだと正常にDBに0と表示されますが、Aさんの他に同時にBさんがりんごを10個購入するとどうでしょう。
Aさんがりんご購入時の在庫数カラムは10なのに、Bさんが購入時にも在庫数カラムは10となっているので、AさんBさんどちらもりんごを購入することができてしまいます。

一つのSQLを並行して同時に処理することができてしまうと、データの整合性が取れず予期せぬ挙動を許容してしまいます。
このような事態を防ぐため、楽観ロックを実装します。

## 具体的な楽観ロックの実装方法
具体的な処理として挙げられるのは、更新対象のデータがデータ取得時と同じ状態であることを判断することです。
上記の例だと、「商品(りんご)テーブルの在庫数カラムが10であることを確認した時刻」と「商品(りんご)テーブルの在庫数カラムが更新された時刻」を比較します。
両方の時刻が等しくない時(=)でない時、エラーを吐くという処理を実装してあげれば良いです。

このように処理すると、AさんBさんが商品(りんご)テーブルの在庫数カラムを同時に取得してしまった時、どちらかのりんご購入時に処理されるAPIはエラーを表示されることになり、片方のAPIしか実行されずにすみます。
長い人生、その時々の節目に....(受験関係者のみなさまへ)

以下のお気持ちでしょうか。
(参考)長い人生、その時々の節目に「脇目も振らず全力でことにあたる」という経験は、その後の人生に貴重な財産を残してくれます。.......

オリジナル
ページの真ん中あたりです。
2013年でした。


https://www.hibari.jp/weblog00/archives/2013/01/1303_1.html

中途半端なそれなりの取り組みでは得るものはありません。
だそうです。

# サステナビリティ?
受験シーズンの光景です。毎年この時期、人が変われどです。
夜遅くまで、ハンバーガー店で、勉強を頑張っている受験生の姿を見かけます。頑張って下さい。と声をかけるのも変ですしね。ひとりで頑張っている女子受験生に。

**ところで、大学入試も、「サステナビリティ」と言いますかね?**

持続可能性（じぞくかのうせい、英: sustainability〈サステナビリティ、サステイナビリティ〉）は、将来にわたって現在の社会の機能を継続していくことができるシステムやプロセスのこと。＜wikipedia

https://ja.m.wikipedia.org/wiki/%E6%8C%81%E7%B6%9A%E5%8F%AF%E8%83%BD%E6%80%A7

# (おまけ)マクドナルドハンバーガーの店頭価格を改定について
たまたまだと思いますけど、2023年1月15日(日)まで従来価格（税込み）だそうです。
2023年1月16日(月)より店頭価格の**値上げ**と言わないところが、ステキですね。

https://www.mcdonalds.co.jp/company/news/2023/0106c/

以下更新未定

https://qiita.com/mrrclb48z/items/cdaf9a431ff06507556f#markdown%E8%A1%A8%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%BB%E3%83%83%E3%83%882021-12-04%E7%8F%BE%E5%9C%A8


以上、受験の部外者の「マクドナルドメニューmarkdown表へのゆうどう」でした。
? sympyの閲覧数より、ポエムの閲覧数が多いです。
 

# (2022-01-12)追加
sympyタグ

https://qiita.com/tags/sympy
Flutter "Name source file using 'lowercase_with_underscores' 警告の対処法

# 背景
- Memoクラスを作成するため、`Memo.dart`ファイルを作成してそこにMemoクラスを定義しました。
- すると表題の警告をくらったので、その対処法を記載します。

# Name source file using 'lowercase_with_underscores' 
画像のように1行目の`class'の下に波線が表示され、確認すると「lowercase_with_underscores」を使えと言われます。Documentationは[公式ドキュメント](https://dart-lang.github.io/linter/lints/file_names.html)へ誘導されます。
![ss 2023-01-09 15.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/4815a164-58ff-0230-37c3-a51816826663.png)

## [公式ドキュメント](https://dart-lang.github.io/linter/lints/file_names.html)
- `一部ファイルシステムでは大文字と小文字が区別されない`ため、区切り文字にアンダースコアを使用することを推奨しているようです。

英語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/2f43ee9a-aab3-5782-aef0-0de313c8e7dc.png)

日本語訳
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/90afd250-04ad-a0ac-e975-b77f89a03120.png)

# まとめ
- ファイル名は大文字小文字で区別されないことから、区切り文字にアンダースコアを使用する。
- 今回の場合は`Memo.dart`を`memo_class.dart`にRefactorすることで対応した。
- 多分`Memo.dart`を`memo.dart`とするだけでもOK。

# 参考
- [Dart-lang file_names](https://dart-lang.github.io/linter/lints/file_names.html)
- [【Dart】基本的な命名規則](https://de-milestones.com/dart_naming_convention/)
- [(Youtube)Name source files using lowercase with underscores flutter](https://www.youtube.com/watch?v=HgwTNqZh27E)
[Swift UI]@State変数で別の変数を設定する方法


結論から書くとこちら

    var itemCount = 5 //グローバル変数のもの

    @State var itemCount2 = itemCount 

    init(){

        _itemCount2 = State(initialValue: itemCount)

    }

@State変数で別の変数の値などを取得する場合は@State変数に_(アンダーバー)をつける必要がある
設定する値にはState(initialValue: 値)ををつける必要がある

## 値が変わらない例

    var itemCount = 5 //グローバル変数のもの

    @State var itemCount2 = itemCount 

    init(){

        _itemCount2 = itemCount

    }

なぜか値が変わらないなああああなんでだろうなああああって思ってググってたらそんな感じの記事があり修正したらできたので、自身の忘備録も兼ねて投稿です。

どなたかの参考になれば幸いです。
Pythonを改めてちゃんと学ぶメモ #7

# はじめに
ここは、Pythonを改めて学んでいるメモを都度書き出していきます。
※ 筆者のバックグラウンドは#1をご覧ください。

1. https://qiita.com/hideh_hash_845/items/58241f0ce0283e457a87
1. https://qiita.com/hideh_hash_845/items/56c7a2c5594261f380b2
1. https://qiita.com/hideh_hash_845/items/b5e2264fc650c3e9d4b6
1. https://qiita.com/hideh_hash_845/items/6ebfcbf1682dcc696b76
1. https://qiita.com/hideh_hash_845/items/7b4aeb514f9eb199e9c2
1. https://qiita.com/hideh_hash_845/items/b46d2d82287f10bfb7c4

# Matplotlib

- 二次元の平面にグラフを描画するライブラリ
- numpyやpandasによって生成･読込をしたデータをグラフに落とし込むという使い方
- 基本の流れは描画系メソッドでグラフを生成→`show()`で描く
~~~
# matplotlibのインポート
import matplotlib.pyplot as plt
~~~

## 様々な関数
- `title()` 表題
- `xlabel()`, `ylabel()` ラベル
- `legend()` 凡例表示
 -- 日本語を使うときは日本語フォントを指定すること
 -- 場所は`loc="upper left"`のように指定
 -- 日本語を使いたい場合はフォント指定を忘れずに
~~~
# 日本語フォントをセットしないと文字化けするので注意
# plt.title('日本語表示テスト', fontsize=14)
plt.title('日本語表示テスト', fontsize=14, fontname="Meiryo")
~~~

- `xlim()`, `ylim()` 描画範囲
- `xticks()`, `yticks()` 目盛り
- `grid()` グリッドを表示
~~~
# 指定方法のイメージ
plt.xlim([0,10])
plt.yticks(np.arange(0, 18000, 3000))
~~~

## グラフの種類
- `scatter()` 散布図
- `plot()` グラフの描画
- `show()` 表示
~~~
# 式の描画
x = np.linspace(0, 10, 5)
y = 2 * x + 3
plt.plot(x, y,'r.',lw=5, label="式 y = 2x + 3")
~~~


## サンプルコード
~~~ python:Matplotlib_plot_test.py
#!/usr/bin/env python
# coding: utf-8

# matplotlibのインポート
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd

# 下準備（実は無くてもいい）
#plt.figure(0)
#plt.clf()

# データ準備
x = np.arange(0, 10, 0.1)  # -10から10までの範囲を200分割したarray

# 横軸の描画範囲指定
# 式1 y = 2x + 3より、縦軸の値算出
y1 = 2 * x + 3
# 式2 y = 3x + 1より、縦軸の値算出
y2 = 3 * x + 1
# 適当なデータセットを作成
y3 = x * (x - 4) * (x - 8)  # 三次関数を適用する

# グラフの装飾
# タイトル
plt.title('様々なグラフ', fontsize=14, fontname="Meiryo", color="#8080ff")
# x軸ラベル
plt.xlabel("x軸", fontsize=14, fontname="Meiryo")
# y軸ラベル
plt.ylabel("y軸", fontsize=14, fontname="Meiryo")

# グラフの描画
# 式の描画
plt.plot(x, y1,'r-.',lw=5, label="y = 2x + 3")
plt.plot(x, y2,'b--',lw=5, label="y = 3x + 1")
plt.plot(x, y3,'g'  ,lw=5, label="y = x * (x - 4) * (x - 8)")

# 凡例表示
plt.legend(loc="upper left", fontsize=10)

plt.grid(linestyle=":")
plt.xlim([0,10])
plt.ylim([0,50])

# 表示
plt.show()
~~~
FDR制御 (Benjamini-Hochberg法) を図で理解する

FDR (False Discovery Rate) 制御は多重検定補正の一つです。FDR制御を行うための代表的なアルゴリズムがBenjamini-Hochberg法です。以下ではBH法と略します。

FDRは以下の式で表されます。TPはTrue Positive, FPはFalse Positiveです。FDR制御ではFDRの期待値を指定した値以下に抑えます。

$$FDR=\frac{FP}{TP+FP}$$

FDR制御とBH法は沢山のウェブサイトで紹介されていますので、詳細は割愛します。

このページでは、何故BH法でFDR制御できるのかを図で説明します。私の担当講義で話していますが、せっかくなのでQiitaにも載せることにしました。

# FDR制御の説明

以下では、同じタイプの仮説検定を $N$ 回行うとします。例えば、$t$ 検定を$10^4$ 回行うとします。各仮説検定は互いに独立とします。簡単のため、仮説検定は片側検定とします。

![fig05_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2787764/45b3cda6-e7c6-0b32-078a-faec26e13ddc.png)

図の上側の分布は、帰無仮説が正しい場合に検定統計量が従う分布です。例えば、$t$ 検定の場合、検定統計量は $t$ 値、その従う分布は $t$ 分布です。 

図の下側の分布は、$N$ 回の検定によって得られた $N$ 個の検定統計量の実際の分布です。

閾値を図に示す値にした場合を考えます。実際に陽性と判定されるのは、下図のBの部分です。例えば、ここに $500$ 個いるとします。この中にはTPとFPが混ざっています。

このときのFPの個数の上限を上の図から見積もります。もし仮に、$N$ 個全ての仮説検定で帰無仮説が正しかった場合、$A$ の面積を $p$ として、FPの個数の期待値は $Np$ と表されます。例えば、$N=10^4$, $p=0.01$ の場合、$100$ 個になります。また、$N$ 個の中に対立仮説が正しい場合が含まれているときも、FPの個数の期待値は $Np$ より大きくなることはありません。

例えば、$500$ 個が出力されて、そのうち高々 $100$ 個が偽物だと予想されるなら、FDRの期待値の上限は $100/500=0.2$ になります。

あとは、指定したFDR (例えば $0.05$) を超えない範囲で、閾値をなるべく沢山の出力が得られるような値 (この図でいえば、なるべく左側の値) にすればおしまいです。


# BH法との対応関係

ここまでは検定統計量の分布を使って説明をしてきました。一方、BH法は $p$ 値ベースのアルゴリズムです。対応関係を整理します。

$N$ 個の仮説検定で得られた $p$ 値を小さい順に並べます。簡単のため等号は含まないとします。

$$p_1<p_2 < \cdots < p_N$$

先ほどの図でいうと、下側の分布で右端の方から順に $p_1, p_2,\ldots$ に対応する検定統計量が並んでいます。

$1$ 番目から $i$ 番目までを陽性として出力する場合を考えます。出力される個数は $i$ です。これは先ほどの図のBの部分です。また、先ほどの図のAの面積は $p_i$ に相当します。従って、このときのFDRの期待値の上限 ($q$ 値) は以下のように表されます。

$$q_i=\frac{Np_i}{i}$$

あとは、この値が指定値を超えない範囲で最大の $i$ を見つければ良いので、BH法のアルゴリズムが出てきます。

# Pythonのコード

以下に $q$ 値を計算するPythonのコードを載せます。単調増加となるように np.minimum.accumulate をかけています。

```python
def calculate_q(p_seq):
  p_arr   = np.asarray(p_seq)
  N       = len(p_arr)
  idx_arr = np.argsort(p_arr)
  q_arr   = p_arr[idx_arr] * N / (np.arange(N) + 1)
  q_arr   = np.minimum.accumulate(q_arr[::-1])[::-1]
  q_arr[idx_arr] = q_arr.copy()
  return q_arr
```

# 数値実験

以下に数値実験結果を載せます。実験条件は以下のとおりです。

| 名前 | 設定値 |
|------|-------|
| 検定の種類 | ウェルチの $t$ 検定 |
| 各標本のサイズ $n$ | $10$ から $100$ まで $10$ 刻み |
| 仮説検定の数 $N$ | $10^4$ |
| 真に陽性の数 | $1000$ |
| 陽性の場合の効果量 | $0.8$ |
| FDRの閾値 | $0.05$ |
| 試行回数 | $10$ |


![tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2787764/46ccbb84-535e-058f-bb52-33cf8206d236.png)

陽性として出力される数 (TP+FP) は、標本サイズに応じて増加した後に一定値に収束しました。収束値が真の陽性数 $1000$ を超えているのはFPを含むためと考えられます。

FDRは、どの標本サイズでも指定値 $0.05$ より平均的に低い値でした。
Laravel学習 - テストコード【入門編】

## Laravelのテストについて

Laravelでテストコードを記述するには主に以下の２つの方法がある。
- PHP Unitを利用する
    - PHPの代表的なテストフレームワーク
- Laravel Duskを利用する
    - ブラウザを使った自動操作によるテストが可能（初耳。覚えておこう。）


今回は業務でも使っているPHP Unitを利用したテストを学習していきます。

## PHP Unit
テストコードファイルは以下のartisanコマンドで作成可能
```
artisan make:test 作成したいテストファイル名
```

コマンドを打ち込むと、デフォルトで以下のテストが作成されます。
- フィーチャーテスト：tests/Feature/ExampleTest.php
- ユニットテスト：tests/Unit/ExampleTest.php

### デフォルトのフィーチャーテストを深掘り

HTTPステータスコードが200であることを確認するテストコードが既に記載済みです。
`$response = $this->get('/');`の箇所でどんな情報を変数`$response`に入れているのかを見てみましょう、
以下のように編集します。

``` PHP
class HomeTest extends TestCase
{
    /**
     * A basic feature test example.
     *
     * @return void
     */
    // テストメソッド（関数）名の先頭には「test」を付けること
    public function test_example()
    {
        $response = $this->get('/');
        // dump出力した後、ここで処理が終了。お手軽デバッグ法。
        dd($response);
        $response->assertStatus(200);
    }
}
```

長いので割愛しますが、`$response`の中には「GETやPOSTメソッドでURLと合わせて送られてきた様々なデータ」や「URLやHTTP動詞などの通信情報」が入っています。
この情報からステータスコードが200かどうかを`assertStatus`メソッドで探すのですね( ͡° ͜ʖ ͡°)



## さいごに

ちょいちょい編集して、自分自身も何度も見返していきたいようなものに仕上げます。
一緒にLaravelマスター目指しましょう。
Azure関連認定資格の更新（2023年版）

### まとめ

- FoundationからExpertまで更新しましたが、どの資格も25-28問程度です。時間制限はありません。調べながらゆっくり回答できます。ちゃんと調べながらやればまず落ちることはないと思います。ちゃんと調べながら解いてもだいたい40分程度あれば終わるでしょう。
- 一度回答すると、前の問題には戻れません。
- 最後全問回答後Submitしなければ、失敗などにカウントされません。
- 不合格になってもすぐ再チャレンジできます。2度失敗すると次は24時間待つ必要があるようです。
- 失敗するとおすすめのLearning Courseが紹介されるので、それを読んで再度挑むといいと思います。
- ページをReloadすると最初からやり直しになります。
- 途中で言語を変更しようとするとページがReloadされるため最初からになります。
- 問題はランダムで毎回順番など変わります。全部でどのくらいあるかわかりませんが、やり直したら出てこなくなった問題もあったので、出題される問題数以上はあるでしょう。
- たまに日本語訳が正しくないときがあるため、個人的には英語で受けるのがおすすめです。選択肢の「Yes/No」が「questionSet」などと訳されていて、明らかに自動翻訳の不具合みたいなものがあります。（コピペ可能なのでGoogle翻訳など使いながら回答できます）ただ、機械翻訳のミスは意味がわかるレベルではあるので日本語でも解けないことはないです。

---

### Azure関連認定資格の更新について
Azure関連のMicrosoft認定資格は、2021年6月取得分以降は有効期限が1年間と短くなっています。一方で認定資格の期限延長もオンラインで簡単なテストをクリアするのみでよく、再度受験する必要がなくなり容易になっています。

### 「更新」のための小テストの開始方法
期限が近づくと、下記のような件名の通知メールが届きます。
「アクションが必要です - Microsoft 認定資格は xx 日後に期限切れになります!」

通知メール内にもリンクがありますが、Microsoftの認定資格の更新ページへ遷移して自身の資格の有効期限を一覧で確認できます。

**認定資格 / すべての認定資格を見る | Microsoft Learn**

https://learn.microsoft.com/ja-jp/users/me/certifications/certifications

期限まで6ヶ月を切ると認定資格の一覧に更新ボタンが現れます。
![スクリーンショット 2023-01-03 13.39.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73881/f0724f85-2830-4948-84e1-9e5a5530d9e0.png)

更新したい資格の更新ボタンを押し、次の画面で更新評価を受けるを押下すると、いきなりテストが始まります。「更新評価で測定されたスキル」に大体の試験範囲が載っています。
![スクリーンショット 2023-01-03 13.43.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73881/9a653812-5190-e5a8-ce52-410ec783076b.png)

問題の詳細は記載できませんが、わからない問題などを調べながら回答しても40分程度あれば終わるくらいの感じです。
時間制限は特にありません。一度回答すると、前の問題には戻れません。
1分で理解する「Webを支える技術」: URI編

# 前回
https://qiita.com/miumi/items/7967701f760ae44ff800


# 4章: URIの仕様
URIとはリソースを識別する一意(重複がない)のIDのこと。
つまりWeb上に存在する全てのリソースを一意に示ます。

### URIの構成
[https://qiita.com/timeline](https://qiita.com/timeline)

QiitaのタイムラインであるURIを構成するパーツは次のようになる

- URIスキーム
    - https
    - URIが利用するプロトコルを示すのが一般的。://で区切られる
- ホスト名
    - qiita.com
    - インターネットの住所的なやつ。被ることはない
- パス
    - timeline
    - インターネットの部屋的なやつ

### %エンコーディング
URI仕様が許可している文字以外をURIに入れるには、%エンコーディングでその文字をエンコードする必要がある。
ひらがなの「あ」を解説する記事をブラウザで閲覧すると、アドレス欄には次のURIが表示されるでしょう。
https://ja.wikipedia.org/wiki/あ
上記URLをコピペして貼り付けると↓に変換される
[https://ja.wikipedia.org/wiki/%E3%81%82](https://ja.wikipedia.org/wiki/%E3%81%82)

これは「あ」はURI的に許可されていないのでブラウザとサーバの間で転送(変換)されるためである。

# 5章: URIの設計
### よくないURI
[http://example.jp/Login.do?action=showPage](http://example.jp/Login.do?action=showPage)
.doも問題だが、注目するのはshowPage。
例えばshowPageの命名を変更した時にURIを変えなければいけないので手間がかかる


[http://example.jp/home.jsp?jsessionid=12345678](http://example.jp/home.jsp?jsessionid=12345678)
セッションIDはログインの度に変わるため、上記URIにアクセスする度に毎回ログインすることになるかもしれない

[http://example.jp/sample/people/show/123](http://example.jp/sample/people/show/123)
初期のrailsで見られた構成。
パスの部分はsampleアプリケーションのPeopleコントローラのshowメソッド、123はデータベースのIDになる。
このshowが問題。HTTPではリソースに対して特定のHTTPメソッドだけを適用する。
あるリソースを取得するのかor更新するのかの判断はURIで指定するのではなく、URIに適用するHTTPメソッドで決めるべき。
つまりURIとHTTPメソッドはそれぞれ名詞、動詞であるべき。

### まとめ

・URI はリソースの名前である
・URI は寿命が長い
・URI はブラウザがアドレス欄に表示する
Ubuntu 20.04 LTS における ns3.23/ndnSIM 2.3 の環境設定（依存関係とboost） 

## 検証環境

```bash
$ docker run -it ubuntu:20.04
```

### Note

- Ubuntu 18.04 LTS同様、`gcc-7` / `g++-7` で動作を確認。 `gcc-8` 以降は未検証、不明。



### インストール

```bash
apt-get update
apt-get install \
curl \
wget \
git \
build-essential \
python \
gcc-7 \
g++-7 \
libsqlite3-dev \
libcrypto++-dev \
libssl-dev
 
export CC=gcc-7
export CXX=g++-7

wget http://downloads.sourceforge.net/project/boost/boost/1.62.0/boost_1_62_0.tar.bz2
tar axf boost_1_62_0.tar.bz2
cd boost_1_62_0
./bootstrap.sh
./b2 --prefix=/usr/local install # need to root privileage

export LD_LIBRARY_PATH=/usr/local/lib

# すでに本体入っているていで。
./waf configure --boost-includes=/usr/local/include --boost-libs=/usr/local/lib --enable-examples
./waf build
./waf --run ndn-simple
```

### 本体

たぶんこれ. 未検証

```bash
git clone https://github.com/named-data-ndnSIM/ns-3-devns-3
cd ns-3
git checkout ns-3.23-dev-ndnSIM-2.1

git clone --recursive https://github.com/named-data-ndnSIM/ndnSIM src/ndnSIM
cd /src/ndnSIM
git checkout ndnSIM-2.3
```

### 参考文献

- [Getting Started — ndnSIM documentation](https://ndnsim.net/2.3/getting-started.html)
- [FAQ — ndnSIM documentation](https://ndnsim.net/2.3/faq.html#boost-libraries)
- [[ndnSIM] Install ndnSIM 2.1](https://www.lists.cs.ucla.edu/pipermail/ndnsim/2019-January/005155.html)
Git 入門講座　基礎知識編

## はじめに
Udemyのこちらの講座でGitHubの勉強をしたので、メモ代わりに書いていきます。
[もう怖くないGit！チーム開発で必要なGitを完全マスター](https://www.udemy.com/course/unscared_git/)


## Gitは何のために使うのか？
⇨ **ファイルのバージョンを管理するために使う！**
ファイルのバージョンを管理しないと...
・最新のファイルがわからなくなる。
・誰がいつ、何を変更したのかわからなくなる。

**ファイルのバージョンを管理すれば...**
・ファイルの最新の状態がわかる！
・いつ、誰が、何を変更したのかがわかる！
・以前の状態にも戻せる！

## GitHubとは？特徴とは？
⇨ **GitHubとはコードのホスティングサービス**

**GitHubの特徴**
・プルリクエストで複数人開発できる。
・世界中のチームがGitHub上で開発をしている。
・他の人が書いたコードなどを見ることができる。
などたくさんあります。

## Gitの初期設定
ターミナルに自分のGitHubアカウントを認識させます。
```
git config --global user.name "githhubに登録したユーザー名"
```

```
git config --global user.email "githhubに登録したEメールアドレス"
```

## Gitの基本的な仕組み
**・Gitはスナップショットで保存されている。**
なぜ⇨ 複数人での開発スピードを上げるため
**スナップショットとは**
⇨ ある時点でのソースコードや、ファイル、ディレクトリ、データベースファイルなどの状態を抜き出したもの

**・コミットをたどることで以前の状態に戻せる**
## Git操作の流れ
チーム開発を行うときの流れ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8099cdb0-f3b0-80b3-b1e6-8e5f4ce45a3e.png)
1,ワークツリーでファイルの編集などを行う
2,ローカルリポジトリにスナップショットを記録
3,記録したスナップショットをGitHubのリモートリポジトリにアップ
4,リモートリポジトリからローカルリポジトリにデータを取ってくる。
5,ワークツリーに取ってきたデータを反映。

みたいな感じです。画像にある「プル」や「フェッチ」などの操作はまた後で説明します。

**ローカルの構成**
ローカルの中身は3段階で構成がされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/5ae44759-7f51-9e3e-51c6-f8e2e90ac320.png)
**作業フォルダ**
⇨ 作業フォルダがワークツリーと呼ばれるもので、コードを書いて編集したりする場所です。
**ステージ**
⇨　コミットする変更を準備する場所。データを一時的に置いておく場所とでも思ってもらえれば最初はいいかなと思います。
**リポジトリ**
⇨ こちらはローカルリポジトリと呼ばれるところで、スナップショットを記録しておく場所になります。

ちなみに、git addやgit commitなどが行われている裏側で起きていることがこちらです。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/e2aaee30-83ea-d004-b433-fac48a84d60d.png)
ここまでは、「Gitはステージに追加してコミットする際に、圧縮ファイル、ツリー、コミットという3種類のファイルを作成してデータを保存している」というイメージ。

**Gitのデータ構造のまとめ**
・リポジトリに圧縮ファイル、ツリー、コミットという3種類のファイルを作成してデータを保存している。
・コミットが親コミットを持つことで変更履歴を辿ることができる。
・Gitの本質はデータを圧縮して、スナップショットで保存すること。
・Gitのコマンドは、そのデータに対して色々な操作をしている。
Next.jsとTailwind CSSを使ってお酒一覧表を作ってみた！

<h1>初めに</h1>
今流行りのNext.js(TypeScript)とTailwindを使って何か作りたいなと思ったので、居酒屋でよく目にするお酒の度数や材料、特徴を一覧で見ることができるWebサービスを作成してみました。

![スクリーンショット 2023-01-09 14.21.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854023/ea88ecb6-b338-3b22-cdcb-d0964ae3114f.png)

# お酒一覧表
良ければ使ってみてください！  [お酒一覧表](https://onedrink-545c6.web.app/)

## 使用した技術
画面のUIはMaterial-TailwindのAccordionを使いました。
[参考URL](https://www.material-tailwind.com/docs/react/accordion)
サイトに載っているソースコードをコピペするだけでオシャレなデザインができるのでオススメです！

```typescript:Accordion.tsx
<Card>
   <div className="flex flex-row justify-between mb-4">
      <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{props.type}</h5>
   </div>
      <Fragment>
        <div className="flex flex-col">
          {props.alcohol.map((item) => (
            <Accordion
              open={open === item.key}
              animate={customAnimation}
              key={item.key}
            >
              <AccordionHeader onClick={() => handleOpen(item.key)}>
                <p className="text-base">{item.name}</p>
              </AccordionHeader>
              <AccordionBody>
                <p className="text-sm font-semibold">アルコール度数：{item.degrees}</p>
                <p className="text-sm font-semibold">原材料：{item.detail}</p>
                <p className="my-3 text-sm">{item.coment}</p>
              </AccordionBody>
            </Accordion>
          ))}
        </div>
      </Fragment>
    </Card>
```
お酒の情報を記載したJsonファイルを用意し、index.tsxからpropsでAccordion.tsxに渡します。<br>
その後、map関数を使って表示を行っています。

実際に使用しているJsonファイルです。
```json
[
    {
        "name":"ジントニック",
        "degrees":"5~10%",
        "detail":"ジン,トニックウォーター,ライム",
        "coment":"私が最も好きなお酒、独特な苦味と甘味が特徴的で飲みやすいカクテル",
        "key":1
    },
    {
        "name":"ジンバック",
        "degrees":"14%",
        "detail":"ジン,ジンジャーエール,レモンジュース",
        "coment":"ジントニックに飽きた人にオススメです。",
        "key":2
    },
    {
        "name":"ギムレット",
        "degrees":"25%",
        "detail":"ジン,ライムジュース,シュガーシロップ",
        "coment":"イギリス海軍で軍医を務めたギムレット卿が、人を飲みすぎる将校たちの健康を案じて、作成したカクテル",
        "key":3
    },
    {
        "name":"マティーニ",
        "degrees":"35%",
        "detail":"ジン,ベルモット,オリーブ,レモン",
        "coment":"カクテルの王様と呼ばれている「マティーニ」、爽快感のあるキリッとした味わいが特徴的。映画「7度目の浮気」でマリリン・モンローが、「007」ではジェームズ・ボンドが好んだカクテル.",
        "key":4
    } 
]
```

# 最後に
HostingはFirebaseを用いて行っています。
次回Next.jsをFirebase Hostingで公開する方法について投稿したいと思います。

今後もアップデートを行い、今後は銘柄も網羅したサービスにしていきます。
(広告やアフェリエイトリンクも記載しますが、ご了承ください)

[お酒一覧表](https://onedrink-545c6.web.app/)
PKCS とは

## 勉強前イメージ

公開鍵暗号のなんかだった気がする

## 調査

### PKCS とは

Public Key Cryptography Standards の略で
公開鍵暗号に関連するデータ形式などの使用を定めた規格群のことを指します。
1991年にRSA社によって最初の仕様が公開されました。
現在は標準団体によって標準規格あんとして採用されています。
全て有効というわけではないですがPKCS#1～#15まであります。

例えばPKCS#10であれば証明書の発行を要求するメッセージ形式の規約だったり
PKCS#12であれば暗号鍵をファイルに保存する形式の規約だったりが存在します。

## 勉強後イメージ

公開鍵暗号のための規約をまとめたものかな。

## 参考

- [PKCS【Public Key Cryptography Standards】](https://e-words.jp/w/PKCS.html)
- [鍵，証明書の形式](https://sehermitage.web.fc2.com/crypto/key_mng.html)
Gitチュートリアル

<h4>・Gitの始め方</h4>
<h5>・リポジトリの作成方法</h5>
①好きな場所にフォルダを作る。今回は例としてフォルダ名を「tutorial」とする。<br>
②コマンドプロンプトでそのフォルダを指定する。<br>
⇒そのフォルダがデスクトップにあるなら "<b>cd desktop</b>" 、 "<b>cd フォルダ名</b>" で指定できる。<br>
③"<b> git init</b>"と打つとローカルリポジトリが作成される。

<h5>・インデックス（ステージ）への記録方法</h5>
①コマンドプロントで"<b>git add</b>"と入れると完了<br>
⇒"<b>git add .</b>"とするとすべてのファイルをステージにあげる。

<h5>・コミットの方法</h5>
①tutorialフォルダの中に、ファイルを作る。今回は「sample.txt」というテキストファイルを作る。ファイルの内容は「Gitチュートリアル」をする。<br>
②コマンドプロンプトで"<b>git commit</b>"といれるとコミットが完了する。<br>
⇒"<b>git commit .</b>"とするとすべてのファイルをコミットする。<br>
　"<b>git commit ファイル名 -m "メッセージ"</b>"とするとコミットメッセージを入れることができる。

<h5>・プッシュの方法</h5>
①コマンドプロンプトで"<b>git push</b>"で完了。<br>
⇒"<b>git push ブランチ名</b>" ブランチ名を指定してpush

<h5>プルの方法</h5>
①コマンドプロンプトで"<b>git </b>"

<h5>・状況の確認</h5>
①コマンドプロンプトで"<b>git diff</b>"または"<b>git status</b>"でできる。<br>
⇒"<b>git diff</b>"　リポジトリとワークツリーの差分をチェック<br>
　"<b>git diff -staged</b>"　リポジトリとステージの差分をチェック<br>
　"<b>git status</b>"　変更ファイルの確認

<h5>・履歴の確認</h5>
①コマンドプロンプトで"<b>git log</b>"と入力すると完了。

<h5>・元に戻す</h5>
①コマンドプロンプトで"<b>git restore</b>"と入力<br>
⇒"<b>git restore ファイル名</b>" ワークツリーの変更を取り消す<br>
　"<b>git restore -staged ファイル名</b>"　ステージに挙げた変更をワークツリーに戻す



<br>【参考】
サル先生のGit入門
【Git入門講座 合併版】この動画1本でGitとGitHubの基礎をゼロからマスター！【初心者向け】
https://www.youtube.com/watch?v=WHwuNP4kalU&t=1866s
Googleプロジェクト管理：組織文化を理解する

# はじめに

わたしが [Google プロジェクト管理:プロフェッショナル認定証で得られた素晴らしい体験][google]を、要点をまとめ小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ ***"Google プロジェクト管理:プロフェッショナル認定証"*** を受講してみてください。

[google]: https://qiita.com/mapami/items/317ae776a2268fd54c8f

https://jp.coursera.org/professional-certificates/google-project-management

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/579e805c-6045-9c1c-543d-f9519b57d50c.png" width="800">

# 組織文化とは

組織文化とは、

- 従業員が共有する価値観
- 組織の価値観
- 使命
- 歴史

などの一部である。 

つまり、 ***<font color="MediumVioletRed">『組織文化は企業の個性』</font>*** と考えることができる。

会社は、組織文化にそぐわない ある種の変化には同意しないかもしれません。実施すべき変更の限界や境界を認識し、プロジェクトと会社にとって何が最も有益であるかを理解することが重要です。

組織文化は、プロジェクトに関する意思決定のあり方に強い影響を及ぼします。ですから、プロジェクトを計画・実行する際には、組織と文化の両方を考慮することが重要です。

# 組織文化を理解することのメリット

- プロジェクトの目標達成に向けて、より効果的にチームをナビゲートすることができます。
- 対立を最小限に抑え、できるだけ多くの支持と調和を得ながらプロジェクトを完了させることができます。

プロジェクトが会社の価値観とどのように一致しているかを示すことができれば、役員やステークホルダーからより多くの支持を得て、必要な承認やリソースを得ることができるようになります。

# 組織内のリーダーがビジネスを行う際に何を重視しているかに注目する

- 経営陣は完璧さよりもスピードを重視するのか？
- 組織内の人々はどのように意思決定をしているのでしょうか？
- すべての意思決定において、あらゆる選択肢を徹底的に吟味しているか？

そうすることで、どの価値観が彼らにとって最も重要なのか、そしてあなたがどのように意思決定に臨めばいいのかが見えてきます。

例えば、

- 安定性とユーザーからのフィードバックを重視する企業であれば、プロジェクトのスケジュールを拡大してテストを行い、その結果に基づいて意思決定を行うことを奨励するかもしれません。
- 革新性と収益性を重視する企業であれば、より短期間で製品を完成させ、リスクを取って新しいアイデアを試すことを勧めるかもしれません。

:::note info
理想を言えば、プロジェクトの第1フェーズを開始する前に、組織の文化をよく理解しておきたいものです。
:::

# 企業文化をナビゲートする方法

プロジェクトに取り組み始めたら、チームの力を最大限に引き出し、プロジェクトを確実にサポートするために、企業文化をナビゲートする方法をいくつか紹介しましょう。

#### 質問し、観察する

社風を観察しながら、同僚に

- 「うまくいっていること」
- 「変えるとしたらどんなこと」

を聞いてみてください。

そして、物事の進め方や、その会社の文化について人々が何を好み、何を尊重しているかを理解するために観察してください。そうすることで理解が深まり、尊重し合える関係を築くことができます。

#### 自分の影響力を理解する

あなたとあなたのプロジェクトは、ほとんどの場合、何らかの形で組織に影響を与えます。プロジェクトマネージャーがいるだけで、オフィス環境や社員の動きに変化が生じることもあります。
あなたのプロジェクトが、組織が適応しなければならないような大きな変化を必要とする場合、その変化がどの程度極端なものになるかを念頭に置き、早い段階でフィードバックと承認を求めてください。
React  – フォームを使って axiosでPOSTリクエストする ( + radio で選択する )

httpbinはPOSTしたリクエスト内容に応じてレスポンスをJSONを返してくれるので、そのレスポンスを画面に表示する

# コード例

`example.tsx`

```js

import './App.scss';
import axios from "axios";

import { useForm } from "react-hook-form";
import { useState } from 'react'

const Example = () => {
  const { register, handleSubmit } = useForm();

  const items = ["item１", "item２", "item３", "item４"]
  const [val, setVal] = useState('item１');

  const requestURL = "https://httpbin.org/post";
  const [getData, setResponse] = useState({ form: { content: "", item: "" }});

  const onSubmit = (data: any) => {
    axios.post(requestURL, new URLSearchParams(data)).then((response) => {
      setResponse(response.data);
    });
  };
  const handleChange = (e: any) => {
    setVal(e.target.value);
  };

  return (
    <div className="App">
      <h1>POST</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="content">content</label>
          <input id="content" {...register('content')} />
        </div>
        <div>
        </div>
        {items.map((item) => {
          return (
            <div key={item}>
              <input
                id={item}
                type="radio"
                {...register('item')}
                value={item}
                onChange={handleChange}
                checked={item === val}
              />
              <label htmlFor={item}>{item}</label>
            </div>
          );
        })}
        <button type="submit">Submit</button>
      </form>
      <div>
        <h2>Content</h2>
          <p>{getData['form']['content']}</p>
        <h2>Item</h2>
          <p>{getData['form']['item']}</p>
      </div>
    </div>

  );
}

export default Example;

```

# 実行例

画面上がフォーム
画面下でhttpbinからの応答一部を表示している


<img width="1440" alt="image" src="https://user-images.githubusercontent.com/13635059/211244822-a5609db5-33f8-40f4-a469-5d053ee08a9c.png">



# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
PHPerが学ぶGo言語① 変数・定数・配列

どうも、豚さんです。
今回はGo言語に関して書いていきます。

今回もPythonみたいに深く触れずに記事を書いていきたいと思います。
Pythonの記事同様、変数から配列の記事で始めていきます。

公式サイトのサンプルソースを変えて使っています。

プログラムは *func main() {}* の中を見てください。
**あくまで変数〜配列についてです。**
それ以外はまだ理解していないので、ご了承ください。

<font color="Red">※ 注意：内容はPHPか何かの言語を書いたことがある方向けなので、
説明を割愛している箇所は多々ありますので、ご了承ください。</font>

**go version go1.19.4 darwin/amd64**

# 1. 変数
変数宣言時は「var 変数名 型名」で宣言します。
値を代入しない時の初期値はint型だと0、とstring型だと""です。
```sample.go
package main

import "fmt"

func main() {
	// 型が明確な場合は、型の記載が不要
	var num int
	var test string
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go
0

```

以下は初期値の指定です。
```sample.go
package main

import "fmt"

func main() {
	var num int = 1
	var test string = "テスト"
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go
1
テスト
```

以下は省略形です。
```sample.go
package main

import "fmt"

func main() {
	// 型が明確な場合は、型の記載が不要
	var num = 1
	var test = "テスト"
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go
1
テスト
```
初期値を指定するはvar記載不要で、:=で表現もできます。
```sample.go
package main

import "fmt"

func main() {
	num := 1
	test := "テスト"
	
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go
1
テスト
```
まとめて定義する際は以下のように書きます。
```sample.go
package main

import "fmt"

func main() {
	var (
		num int = 1
		test string = "テスト"
	)
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go
1
テスト
```
同時に代入する際は以下のように書きます。
```sample.go
package main

import "fmt"

func main() {
	var num int
	var test string
	
	num, test = 1, "テスト"
	
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go
1
テスト
```

# 2. 定数
定数定義の場合は型は省略可能です。
```sample.go
package main

import "fmt"

func main() {
	// 型は省略可能
	// const num int = 1
	const num = 1
	fmt.Println(num)
}
```
```
$ go run sample.go 
1
```

定数もまとめて定義可能です。
```sample.go
package main

import "fmt"

func main() {
	const (
		num = 1
		test = "テスト"
	)
	
  	fmt.Println(num)
	fmt.Println(test)
}
```
```
$ go run sample.go 
1
テスト
```

# 3. 配列
配列は途中で個数を変更することはできません。
```sample.go
package main

import "fmt"

func main() {
	// 3は個数
	a := [3]string{}
	a[0] = "one"
	a[1] = "two"
	a[2] = "three"
	fmt.Println(a[0], a[1], a[2])
}
```
```
$ go run sample.go
one two three
```
初期値に設定する場合です。
```sample.go
package main

import "fmt"

func main() {
	a := [3]string{"one", "two", "three"}
	fmt.Println(a[0], a[1], a[2])
}
```
```
$ go run sample.go
one two three
```
初期化によって個数が決まる場合、個数の箇所に「...」と記載します。
```sample.go
package main

import "fmt"

func main() {
	a := [...]string{"one", "two", "three"}
	fmt.Println(a[0], a[1], a[2])
}
```
```
$ go run sample.go
one two three
```

# 参考
ありがとうございました。

https://www.tohoho-web.com/ex/golang.html
PDトリガー基板にロータリーDIPを付けて出力電圧を切り替え可能にする

秋葉原のShigezone等で売ってるPDトリガー基板

[USB PDから5～20Vを取り出すトリガーデバイス(PDT006)](https://www.shigezone.com/product/pdt006/)

5V、9V、12V、15V、20Vの各種があるが、実は全て同一基板で、ジャンパーで出力電圧が設定されている。
ジャンパーがどうなっているのかは、上記のリンク先にかかれている。

20Vは何もジャンパーがされていない基板なので、これを利用してロータリーDIPで切り替えをしようというのが今回の趣旨。
普通のDIPスイッチでもいいけどね。

:::note warn
※お店の推奨の使い方ではないので、加工や使用については自己責任となります。
この記事も推奨しているわけではなくあくまでも自分が加工した記録です。
:::

ろーたりーDIPはリアルコードのものでつまみ付き、端子が横に出ているタイプを使用しました。
横に出ているタイプは厚くなるのですが、加工はし易いかと思って今回は横出しタイプです。
つまみなくてもいいですが、つまみがあると切り替えは楽ですね。

ロータリーDIPはつまみを回すと、1,2,4,8端子がC端子と短絡するようになっています。
参考資料
![ロータリーDIP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/e56ba068-0373-4f9d-5a86-e4456e6458b9.png)

これをジャンパ代わりにするということですね。

PDトリガー基板のジャンパー部分はこうなってます
![IMG_1473.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/4441e8ff-ab63-3ef9-3cb1-78bf734ec53f.jpeg)

ジャンパのパターンによって出力電圧が変わります。
![ジャンパ](https://i0.wp.com/www.shigezone.com/wp-content/uploads/2022/10/PDT006_jumper.jpg?resize=278%2C300&ssl=1)

ロータリーDIPのPINとジャンパの組み合わせは下記のようにしました。

| ロータリーDIP | 4 | 2 | C | 1 |
|:-:|:-:|:-:|:-:|:-:|
| PDトリガー基板  | G  | J1  | V  | J2  |

こうすることによってロータリーDIPと出力電圧の関係は以下のようになります。

| ロータリーDIP | 出力電圧 |
|:-:|:-:|
| 0  | 20V  |
| 1  | 15V  |
| 2  | 12V  |
| 3  | 9V  |
| 6  | 5V  |



ここまで決まれば加工です。

無理やりはんだ付け。
かなり小さいので近眼で老眼な私には結構大変でした。
はんだ汚いなぁ…

![IMG_1464.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/7d054ff8-ec23-5c14-dede-deb4f7138810.jpeg)

電圧が意図したとおりに切り替わるかどうかのテスト。
![イメージ.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/fe92c1c6-a617-e1ca-1ffa-335fbccbdd14.jpeg)

きちんと切り替わることが確認できました。

:::note warn
電圧切り替え時は必ず

　　　取り外してからロータリーDIPを変更してもう一度挿し直す

ということが必要です。
:::
【Windows, Mac, Linux】OS別のVSCodeインストール方法まとめ

# はじめに
現在最も普及しているエディタであるVSCodeですが、OSごとにインストール方法が異なるため、本記事に一括でまとめました (2023年1月現在)

## Windowsの場合
[VSCodeのダウンロードページ](https://code.visualstudio.com/Download)にアクセスし、以下のリンクからWindows版のVSCodeのexeファイルをダウンロードします。

<img width=480 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/09df6935-9fbe-9793-9e31-f45554dd57f6.png>

基本的にはexeファイルを実行して指示に従ってインストールを進めればOKですが、以下の2か所をチェックするとエクスプローラから右クリックでVSCodeを開けて便利です

<img width=480 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/35d110e0-2a97-6e64-786f-02c500842d6e.png>

インストール後、以下のようにVSCodeの画面を開ければインストール成功です

<img width=480 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/cbc87bb2-428b-7587-584b-226602786455.png>

## Mac (M1/M2)の場合
以下の記事と同内容です

https://qiita.com/c60evaporator/items/aef6cc1581d2c4676504

### Homebrewを利用したインストール
Homebrewが入っていれば、以下のコマンドでインストールできます

```
brew install --cask visual-studio-code
```
Finderの「アプリケーション」フォルダにVSCodeが生成されるので、Dockにドラッグ&ドロップしてショートカットを生成すると便利です。
![スクリーンショット 2021-10-26 21.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/822c821f-f9cc-1003-86f8-435dd8f519f7.png)

初回起動時には以下の確認が出るので、「開く」を押します
![スクリーンショット 2021-10-26 20.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/0d666728-067e-7ac2-4a0c-f25d0ece66ad.png)

これでVSCodeのインストールが完了です。

参考までに、Homebrewを使用しないVSCodeのインストール法も下記します。

### 参考：Homebrewを使用しないVSCodeのインストール

[VSCodeのダウンロードページ](https://code.visualstudio.com/Download)にアクセスし、以下のリンクからM1 Mac版のVSCodeをダウンロードします。
<img width=480 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/f6e6ca6e-24d5-53e4-fbe0-984469399191.png>
ダウンロードしたファイルをFinderで開き、Visual Studio Code.appを「アプリケーション」にドラッグアンドドロップします
![スクリーンショット 2021-10-26 20.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/218ea9bc-3e36-fc62-92ea-917676ffebb2.png)

## Linuxの場合
### Ubuntu (Devian系)の場合
Ubuntuでのインストール方法を解説します ([参考](https://code.visualstudio.com/docs/setup/linux))

DevianやRaspberry Pi OS等の他のDevian系OSでも、恐らく同様の方法でインストールできるでしょう

[VSCodeのダウンロードページ](https://code.visualstudio.com/Download)にアクセスし、以下のリンクからCPUに合わせて (IntelやAMDのCPU→`x64`, ラズパイやJetson等のArm CPU→`Arm64`)VSCodeの.debファイルをダウンロードします。

<img width=480 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/1d26d911-38e9-6c08-e529-812c72b5a4f1.png>

以下コマンドで、ダウンロードしたdebファイルをインストールします

```bash
sudo apt update
sudo apt install ./ダウンロードしたファイル名.deb
```

### Red Hat Enterprise Linux (Redhat系)の場合
RHELでのインストール方法を解説します ([参考](https://code.visualstudio.com/docs/setup/linux#_rhel-fedora-and-centos-based-distributions))

CentOS, Amazon Linux等の他のRedhat系OSでも、恐らく同様の方法でインストールできるでしょう

以下コマンドで、yumリポジトリとキーをインストールします

```bash
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
```

以下コマンドで、VSCodeをインストールします(yumコマンドでもインストール可能だが、dnfコマンド推奨)

```bash
dnf check-update
sudo dnf install code
```
Pythonの計算コードをLaTeXの数式にする

何かの理論式をもとにJupyter notebook上で計算をしていて、例えば
```
S = (2 * A * L**2 / a) * (2 * np.exp(-2*a*L) * np.sin(2*a*L) - 1 + np.exp(-4*a*L)) / (2 * np.exp(-2*a*L) * np.cos(2*a*L) - 1 - np.exp(-4*a*L))
```
のような複雑な計算があるときに、Pythonのコード上ではパッと見てコードがこれで合っているのか確認するのは大変です。

そこで、このような計算コードを
$$
S = \frac{2AL^2}{a}\frac{2e^{-2aL}\sin(2aL)-1+e^{-4aL}}{2e^{-2aL}\cos(2aL)-1-e^{-4aL}}
$$
のようなLaTeXの数式に変換して表示してくれるライブラリを探していたら、見つかったので紹介します。

## latexify
### リンク
- [GitHubリポジトリ](https://github.com/google/latexify_py) （スター数5k超え！）
- [公式ドキュメント](https://github.com/google/latexify_py/blob/main/docs/index.md)
- colabの[example notebook](https://colab.research.google.com/drive/1MuiawKpVIZ12MWwyYuzZHmbKThdM5wNJ?usp=sharing)

### インストール方法
Python3.7以上でサポートされています。
```
pip install latexify-py
```
### 使い方
Jupyter notebookのセルに`@latexify.function`と書いた後に、数式として表示したい計算コードを関数として定義します。

例: 
```py
@latexify.function
def S(A, L, a):
  return (2 * A * L**2 / a) * (2 * np.exp(-2*a*L) * np.sin(2*a*L) - 1 + np.exp(-4*a*L)) / (2 * np.exp(-2*a*L) * np.cos(2*a*L) - 1 - np.exp(-4*a*L))

S
```
とすると
![Screenshot 2023-01-08 23.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312594/a75966d5-d66e-8f2e-3a64-8a151c39815c.png)
のように綺麗に数式が表示されます。
また
```
print(S)
```
とするとLaTeXコードが出力されます。
![Screenshot 2023-01-08 23.05.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312594/25b4db4e-46e6-10e7-2d1e-4a46e7dab7b6.png)

### おまけ
```py
@latexify.function(use_math_symbols=True)
```
とすると、コード内のalphaやbetaなどのギリシャ文字も$\alpha$や$\beta$に変換されます。
![Screenshot 2023-01-08 23.19.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312594/887c09ff-ab0a-7326-aa76-9bce1d48a2fb.png)
Ubuntu22.04 で kinect v1 を動作させる（その１：Webカメラ代わりに）

# はじめに
我が家にはXbox360はない。しかし、kinectセンサー(v1:xbox360用)が３つと、kinect for windows アダプターが２つある。そして、Ubuntu22.04をインストールしたデスクトップPCがある。このPCにはWebカメラもないし、音声入力マイクもない。kinectカメラとマイクが使えたら、このPCからZoomのリモート会議だって参加できるんじゃないかな、と試してみることにした。

# 目的：　ubuntu22.04 の Zoom meeting アプリで認識させる

2014年の質問に、2021年に回答していて、「Casually late to the party, but ... 」で始まる次のような記事が見つかった。
https://stackoverflow.com/questions/22547679/kinect-as-a-webcam-ubuntu-12-04/67427653#67427653

結論をいうと、この通りの操作で、Zoomミーティングで使える状態になった。
以下、和訳というか、実行したことをメモとして書いておく。

### ビデオデバイスとして認識させる方法
先達の記事にあるとおり、次のコマンドを実行することでビデオ機能がOSで使えるようになった。

```sh
sudo modprobe gspca_kinect
```

### オーディオデバイスとして認識させる方法
まず、いちど、次のインストールを、失敗させる。
```sh
sudo apt install kinect-audio-setup
```
失敗したあとで、次のようにファイルを編集する。（失敗はこのファイルを生成させるために必要なプロセスらしい）
```sh
sudo nano /usr/sbin/kinect_fetch_fw
```
割とはじめのほうに、SDK_MD5の値を入力している行がある。この入力値を変更する。
```sh
SDK_MD5="945806927702b2c47c32125ab9a80344"
```
このあと、再度、apt installする。
``` sh
sudo apt install kinect-audio-setup
```
今度はエラーなくインストールが終わる。

### Zoomアプリを立ち上げて設定メニューでビデオ、オーディオを見てみると・・・
![Screenshot from 2023-01-09 13-32-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699890/8a014abd-f86e-202a-5f1a-1533c8183bbb.png)
Video の camera デバイスとしてXbox NUI Camera　を認識して、画像も写ってる。


![Screenshot from 2023-01-09 13-37-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699890/64f30ca6-21c8-9825-d901-f5d2dba49130.png)
Audio の Microphone デバイスとして Kinect Audio 4 Channels Input が認識され、Input lebel 表示も音に反応する。


### 課題
先達の記事に記述のあるとおり、ビデオの認識機能が、永続的でない。デスクトップPC起動のたびにコマンドを打たなければならない。これは面倒なので、これを永続化させる方法を調べた。

参考：

https://qiita.com/mantaz/items/1c1b1ec7369cbd1afb68

たぶん、 /etc/modules ファイルに一行追加すればいいんじゃなかろうか・・・

```sh
# vi /etc/modules
（一番最後に一行追加）
gspca_kinect
```
保存しておもむろに再起動。・・・だめだった。まぁ、だめならだめでいいや。しょうがない。


# まとめ
Xbox360用kinectをKinect for Windowsコネクタを使って、デスクトップPCのUbuntu22.04 で認識させることに成功した。カメラを認識させるために、毎回modprobeコマンドを入力する手間があるが、これで、Zoom会議に写真付きで出られるぞ。
PrePoMaxによる三点曲げと四点曲げの梁（はり）の曲げ応力の計算

# はじめに
[前回](https://qiita.com/_Moony/items/8c30daaec5622489eb32)、FreeCADで作成したモデルをPrePoMaxに読み込ませて、三点曲げと四点曲げの梁について曲げ応力とたわみを計算しました。

# やり方
- FreeCADで作成したモデルをSTEP形式でエクスポートします。
- そのファイルをPrePoMaxにインポートします。
- メッシュ作成、材料設定、境界条件設定をして計算します。
- 結果を表示します。

# 条件
- [前回](https://qiita.com/_Moony/items/8c30daaec5622489eb32)と同様に、メッシュは最大サイズ5mmとして作成しました。
- 境界条件は[前回](https://qiita.com/_Moony/items/8c30daaec5622489eb32)と同じです。ただし、エッジに集中荷重を加える場合、PrePoMaxでは入力した荷重がエッジを構成する個々の接点に加わります。今回の三点曲げの梁ではエッジに集中荷重として125Nを加えます。エッジの接点数が9の場合は、図1に示すように125Nを9で割った13.89Nを荷重値として入力します（Z軸の逆方向に力を加えるため、「-」を付けています）。

<img width="300"  alt="荷重の加え方.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/e274b85e-ba0e-a501-f9c0-a8f12e54bfa6.jpeg">

図1 集中荷重の設定


# 計算結果
三点曲げと四点曲げのX方向の垂直応力の計算結果をそれぞれ図2と図3に示しました。
三点曲げは、Z変位の最小値が-1.86 mm（下方向に最大値）、X軸方向の応力の最大値が46.77MPaとなりました。材料力学による理論値は変位が1.86mm、応力値が46.87MPaですので、理論値とほぼ一致した結果が得られました。ただし、X軸方向の応力の最小値は-51.41MPaとなっており、理論値-46.87MPaに比べてやや大きい値となっています。

四点曲げは、Z変位の最小値が-2.56 mm（下方向に最大値）、X軸方向の応力の最大値が47.03MPaとなりました。材料力学による理論値は変位が2.56mm、応力が46.87MPaですので、こちらも理論値とほぼ一致した結果が得られています。ただし、X軸方向の応力の最小値は-50.18MPaとなっており、こちらも理論値-46.87MPaに比べてやや大きい値となっています。

上記において、X軸方向の垂直応力の最小値が得られた位置は荷重を加えた位置と一致していることから、このような応力値となった理由として応力集中が考えられます。図4と図5に、三点曲げと四点曲げの荷重点と2節点（1要素）離れた位置のX軸方向の垂直応力の計算結果を示します。これらの図において、荷重点から2節点（1要素）離れたオレンジ色で示す位置の応力値は理論値（理論値は図4、図5いずれも-46.87MPa）とほぼ一致していることが分かります。材料力学では応力集中は考慮していないため、図4、図5のように荷重点から少し離れた位置の応力値を理論値と比較するのがよいと考えます。

<img width="600" alt="スライド25.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/c852a926-2e02-edd0-7d1f-d21c49e5a09f.jpeg">

図2　三点曲げ梁の1/4モデルのX軸方向の垂直応力の計算結果

<img width="600" alt="スライド28.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/d01a9036-60f1-f25d-34f3-c90cb95781ce.jpeg">

図3　四点曲げ梁の1/4モデルのX軸方向の垂直応力の計算結果

<img width="600" alt="スライド35.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/fb90218d-1343-47f2-fbbf-cb35987fa538.jpeg">

図4　三点曲げ梁の1/4モデルの荷重点付近のX軸方向の垂直応力の計算結果

<img width="600" alt="スライド36.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/57100495-38d0-5c02-1c1a-70d964c82c0c.jpeg">

図5　四点曲げ梁の1/4モデルの荷重点付近のX軸方向の垂直応力の計算結果