OmniAICreator/Qiita-1.07M huggingface dataset:
javascriptを用い、option valueの数値を表示かつ、2の倍数かどうかの判定がしたいです。

javascripを用いて、例えばりんごを選択すれば2と返し、
さらに、2の倍数であるかを判定するプログラムを作りたいです。
ちなみに自分の知識量では、2の倍数の場合、
if( ( Number % 2 ) != 0 ) {
}として、
違うもの（ここでは1,3,5）をelseと返すことしかわかりかねます。
以下はhtmlです。
```
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <select id="sel1">
    <option value="01">みかん</option>
    <option value="02">りんご</option>
    <option value="03">バナナ</option>
    <option value="04">ぶどう</option>
    <option value="05">レモン</option>
  </select>
  <input type="button" value="ボタン" onclick="getValue('sel1');">
</body>
</html>
```
以下はjsです。
```
<script type="text/javascript">

function ShowValue(){
  let SELECT_VALUE = document.GetElementById('sel1').value;
let TEXT_VALUE ='';
if(SELECT_VALUE = 3){
  TEXT_VALUE = '●';
}else{
  TEXT_VALUE = '✕';
};
  document.GetElementById（'sv').innerHTML = '<p><b>' & SELECT_VALUE & '</b></p><p>' & TEXT_VALUE & '</p>';
};
</script>
<script type="text/javascript">

function ShowValue(){
  let SELECT_VALUE = document.GetElementById('sel1').value;
  document.GetElementById（'sv').innerHTML = '<b>' & SELECT_VALUE & '</b>';
};
</script>
```
【プラクティス紹介】1分でさらっと分かる「INVEST原則」

## プラクティス名
INVEST原則

## プラクティスの目的・狙い
* プロダクトバックログアイテム（PBI）の記載粒度を扱いやすいものにする
 
## どんな時に使うか
* PBIをスプリントに投入しようとしたが、記載が不適切でリジェクトされた時
（他と依存関係がある、やる理由が書かれていない、大きすぎる、etc...）

## 実施手順
PBIの記載はできるだけ以下の原則に沿った書き方に近づける。
あくまでも目安なので完全に守れていないとNGということではない。
（例えば「I」と「S」の両立が難しい場合などがある）

|頭|単語|意味|
|:---:|:---:|:----- |
|I|Independent|独立している、他のPBIと依存関係がない|
|N|Negotiable|交渉の余地がある、工夫の余地がある|
|V|Valuable|価値がある、やる理由が明確|
|E|Estimatable|見積もり可能、作業内容が想定できる|
|S|Small|適切なサイズ、１スプリントに収まる大きさ|
|T|Testable|テスト可能、受け入れ合否を判定できる|

## アレンジ例
* 「Readyの定義」に「PBIがINVEST原則に沿っているかチェックしたこと」を加える
* Scrum Inc.ではより直感的に分かるように「I」をImmediately actionable（＝直ちに着手できる）とアレンジしている

## アンチパターン
* 最初から全てのPBIをINVEST原則に沿った粒度まで分解しようとする

## 参考情報

https://www.agile-studio.jp/post/apm-definition-of-ready

https://www.scruminc.com/understanding-definition-of-ready-acceptance-criteria-and-definition-of-done/

## こぼれ話（私的コメント）
個人的にはPBIの記述がINVESTになっていないことよりも、そもそもユーザ目線になっていないケースに苦労することが多いです。特にPOではなくDEVがPBIの下書きを用意した場合などはシステム目線（コンポーネント単位）の機能一覧になってしまっている場合が多く、その違いを分かってもらうのが大変です。そのあたりの原則をうまく言い表してくれるものは無いものかといつも思っています。
英単語の「INVEST＝投資する」と綴りが同じなのですが、もしもINVEST原則に沿ったものだけが投入（投資）可能だよ、という意味でかけているのだとしたら、相当センスのあるネーミングだなと思います。

---
　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
React Hook Form でバリデーションを手動で trigger する方法

以前調べたのでたまにはまとめようかなと

trigger は、React Hook Form でのフォームのバリデーションを手動でトリガーする関数です。依存するバリデーション（一つの入力のバリデーションが別の入力の値に依存する場合など）にも役立ちます。


## 引数として取るプロパティ
**name**

**undefined**
すべてのフィールドのバリデーションをトリガーします。
例: `trigger()`

**string**
特定のフィールドのバリデーションをトリガーします。
例: `trigger("yourDetails.firstName")`

**string[]**
複数のフィールドのバリデーションをトリガーします。
例: `trigger(["yourDetails.lastName"])`

**shouldFocus**
エラー設定時に入力にフォーカスするかどうか。入力の参照が登録されている場合のみ機能し、カスタム登録では機能しない。
例: `trigger('name', { shouldFocus: true })`


:::note warn
注意点
単一のフィールド名を文字列として
ターゲットにする場合のみレンダリングの最適化が適用されます。配列やundefinedをトリガーに提供した場合、全体のformStateが再レンダリングされます。
:::

### コード実装のポイント

1. フォームの各入力に対するバリデーションルールの設定
2. エラーメッセージの表示
3. 全フィールドまたは特定のフィールドのバリデーションを手動でトリガーするボタンの実装
4. エラーをクリアするボタンの実装
5. フォームの送信時に入力データをアラートで表示

```tsx:example.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";

// フォームの入力の型を定義
type FormInputs = {
  firstName: string;
  lastName: string;
  username: string;
};

function App() {
  // useFormから必要な関数やオブジェクトを取得
  const {
    register, // inputにバリデーションルールを登録するための関数
    formState: { errors }, // バリデーションエラー情報を持つオブジェクト
    trigger,  // 手動でバリデーションをトリガーする関数
    handleSubmit, // フォームの送信処理をハンドルする関数
    clearErrors  // エラー情報をクリアする関数
  } = useForm<FormInputs>({
    mode: "onChange"  // 入力時にリアルタイムでバリデーションを実行
  });

  // フォーム送信時の処理
  const onSubmit = (data: FormInputs) => {
    alert(JSON.stringify(data));
  };

  return (
    // handleSubmitを使用して、フォーム送信時の処理をハンドル
    <form onSubmit={handleSubmit(onSubmit)}>
      // 以下、各入力フィールドとエラーメッセージを表示
      <label>First name: </label>
      <input {...register("firstName", { required: true })} />
      {errors.firstName && <p>This field is Required</p>}

      <label>Last name: </label>
      <input {...register("lastName", { required: true })} />
      {errors.lastName && <p>This field is Required</p>}

      <label>Username: </label>
      <input {...register("username", { required: true })} />
      {errors.username && <p>This field is Required</p>}

      // エラー情報をクリアするボタン
      <button type="button" onClick={() => { clearErrors(); }}>Clear Errors</button>

      <input type="submit" />

      // 以下、手動でバリデーションをトリガーするボタン群
      // 全てのフィールドのバリデーションをトリガー 
      <button type="button" onClick={() => { trigger(); }}>Validate All</button>

      // fistName フィールドのみバリデーションをトリガー
      <button type="button" onClick={() => { trigger("firstName"); }}>Validate First Name</button>

      // fistName, lastName フィールドのバリデーションをトリガー
      <button type="button" onClick={() => { trigger(["firstName", "lastName"]); }}>Validate First And Last Name</button>

      // fistName フィールドのみバリデーションをトリガー。trigger関数は Promise を返すので、await を使用してその結果を待ち、その後に結果を表示する
      <button type="button" onClick={async () => { console.log("firstName", await trigger("firstName")); }}>Trigger Async First Name Validation</button>
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
rex0220 一括更新プラグイン 簡単設定例

[一括更新プラグイン](https://qiita.com/rex0220/items/f90ca06fde6b6e362583)の設定手順について、解説します。
アプリ追加から、プラグイン設定・動作確認まで順番に行ってみます。

# 概要

kintoneアプリストアの設備マスタについて、一括更新プラグインを設定します。
ラジオボタンのステータス項目を、一覧画面で一括更新します。
一括更新プラグインの設定手順を解説します。

![2023-08-12_16h53_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/c168af2e-8134-768d-59b2-9713ddab217e.png)

# アプリの追加
kintoneアプリストアの設備メンテナンスパックで、アプリを追加

![2023-08-12_16h52_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/98969f13-016b-2479-acc5-feea0fabccd9.png)

# 一括更新プラグインの追加
一括更新プラグインをインストール後に、設備マスタアプリに追加します。

![2023-08-12_17h04_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/9b2106eb-4375-2927-ca83-cd6e8c31141e.png)

# 一括更新プラグインの設定
ラジオボタンのステータスを一括更新する設定を行います。

- ボタン名：　一括遊休更新
- 項目（計算式）の編集ボタンをクリック
- 項目別設定ダイアログ
    - ラジオボタンのステータスについて、入力・必須をチェック
    - 初期表示用に計算式に"遊休"
    - 「未使用項目削除」クリックで、不要項目を削除
    - 「保存」クリック
- 「運用環境に反映」をチェックして、「保存する」をクリック

![2023-08-12_17h08_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/b08e2c6e-ba11-a513-422c-c6148c7f93c5.png)

# 一覧画面で動作確認
「一括遊休更新」ボタンをクリックして、動作確認します。

一覧画面での操作例
![2023-08-12_17h29_56.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/6b6dcce6-2ad8-f5a9-564a-373d1ccea669.gif)

# 一括更新ボタンを表示する一覧画面の指定
一括更新ボタンを表示する一覧画面を設定します。

- 一覧画面の編集ボタンをクリック
- 一覧別設定のダイアログ画面
    - 一括更新ボタンを表示する一覧をチェックして、保存
- 「運用環境に反映」をチェックして、「保存する」をクリック

![2023-08-12_17h33_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e7e85306-f8bb-e370-18c6-7bc31d5c7279.png)

# 一括更新ボタンを表示する権限設定
今回は、一括更新ボタンを表示する組織を設定します。

- 権限をチェック
- 組織の入力欄をクリックして、ダイアログを表示し、組織を選択
- 「運用環境に反映」をチェックして、「保存する」をクリック

![2023-08-12_17h41_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/b777d334-e242-c4e0-aea9-542346467f30.png)
論文一覧　作成中

あちこちに、論文一覧を作成したものを、つなげて一つにする努力を何度かしてきた。　

その度に、資料が手元になかったり、発行団体が存在しなくなったりで、すべてが集められていない。

 ＜この記事は書きかけです。順次追記します。＞
 This article is not completed. I will add some words in order.
# 失敗の連続。

論文で失敗といえば、投稿して再録してもらえなかったこと。　

２０回以上のRejectをもらっている。　

そのうちの半分は、査読者の方が、投稿者よりも水準が低いためだと思っている。（当者比）

すごいなと思ったのは、電子情報通信学会の論文誌。　
Rejectが来たと思ったら、同じ分野の論文の査読がまわってきた。　

そうなんです。自分と同じ分野で、同じ水準の論文って、その研究室と私くらいなのだから。　

ちらききするところによると、Rejectされた人に、次の論文の査読を回しているらしい。　
ちゃんとした査読コメントが書ければ、自分の論文に、その査読コメント相当の内容と、査読対象の論文と、自分の論文が、条件付きで通した論文より、どこがすぐれているかが容易に書ける。

通った論文よりも、よいものを、Rejectするだけの勇気のある査読者はいないかもしれない。　

それだけではなく、研究室の助手の方の助言に基づいて、次の投稿では、タイトルに、当時の流行り言葉を入れて、その条件下でも成り立つ、汎用性の高い手法であることを示した。

それでも、結構たくさんのコメント付きの条件付き採択の返事が来た。　

指導教官の中には、そんな分量のコメントに返事を書くのは無理だったら取り下げろというような発言をした人がいたような気がする。　

他の方が書いた論文に同じくらいの分量のコメントを出しているのは、その程度のコメントなら即答できるからコメントしているのに。　

データリンク層の研究室で、ネットワーク層を研究主題にすることの難しさを感じた。　
内容の理解者がいないのだ。

ともかく、全部コメントに対する返事を書いて、査読は通った。

ちょうど、ちょっと前のIEEE国際会合の発表が、Selected Presentationで表彰されたことと関係があるかもしれない。

IEEEで表彰されている内容に、Rejectする勇気がある人がいるのだろうか。　

同じ分野の査読の依頼、
助手の方の表題に流行り言葉を入れる助言、
IEEE発表の表彰という３つの助け舟で、
査読論文は通った。　

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

# 論文一覧

論文一覧(1/2)
https://researchmap.jp/blogs/blog_entries/view/78772/7ed5eb2417d9675de8d7badf83925f6f

論文一覧(2/2)
https://researchmap.jp/blogs/blog_entries/view/78772/1d7e8c4e5970df47726103caad950b5b


 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong. 


# 文書履歴(document history)
ver. 0.01 初稿　　20230813

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
作業研究

作業研究は、作業計測、作業改善の源である。　

必要性・要求という市場分析のな作業研究では十分ではないと思っている。

本に書いていることと違うことを主張すると、誰も聞いてくれない。　

これが失敗の始まりである。


 ＜この記事は書きかけです。順次追記します。＞
 This article is not completed. I will add some words in order.

# 作業研究
作業・処理を図示する。

![75791.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/7ba91f63-e47b-9aed-3729-206e1efdac5e.jpeg)

プロセス品質を測り、図った内容が妥当かどうかは、
必要性・要求（要求品質）、資源（リソース品質）、環境（制約品質）、製品・サービス（製品品質）のいずれもを、それなりに測ったときに確認できる。

逆に、各要素を測定せずに、プロセス品質を測っても、仮説が立てられるだけで、改善の提案をすることはできない。
どの品質項目に問題があるかが解らずに、どの品質に影響のあることを実施するまたは無駄な作業・処理を止めるかの候補を挙げることは難しい。

 ＜この記事は書きかけです。順次追記します。＞
 This article is not completed. I will add some words in order.

# 作業研究 (経営工学シリーズ)
千住 鎮雄, 佐久間 章行, 矢田 博, 川瀬 武志, 中村 善太郎
日本規格協会(1987/01)
http://www.amazon.co.jp/dp/4542801349


p243
管理者のリーダシップについて
「
1. 目標を明確に(できるだけ定量的)
2. 制約条件と自由度を明確に
3. 改善活動を行うのに必要な資源と行動の自由度や 必要な権限を与えること
4. リスクテーキングな胎動を示す
5. 信賞必罰を行い、失敗したものを勇気づける
」
リスクでは、「失敗したら責任は自分がとるというこ とを言動で示す」とあり、信賞必罰では、「よい結果を 得たものをたたえ、行動しないものをしかる」とある。 あたりまえの事のようで、実際に違う行動を取ってい る人が伸びる組織は腐敗するかもしれない。

p243
間接部門 (staff) の行動律は
「
1. 公平に行動
2. 客観性を尊び真実を伝える
3. 目的中心主義を貫き手法にこだわらない
4. 人間性に反することを提案しない
5. 相手が秘密にしたいことをあばかない
」

p246
行動の規範として
「
1. 専門用語を使用しない
2. 現場の意見を十分に聞く
3. 現実を見て事実を確認する
4. 固有技術と経営についての理解を深める 5. 手法中心主義を避ける
6. 現場が理解しないことを強制しない
7. 現場から要求されないことを強制しない 8. 改善の社会科学的側面を理解する
9. 提案の利点のみを強調しない
10. 成果を自分のものにしない
」
工場の作業と設計作業の大きな違いは、工場では具体 的で物理的に測定可能なものが多いが、設計では論理的でまだ物理化していないので簡単には測定できないなものが多い点である。あるいは、模型(model)を作っていると、瞬時にあらゆる情報が分かるというあり得ない全能の「神の立場」で制御しようとするので、制御可能のように見えることがある。実際の測定は、費用・資源・時間を使うので、費用・資源・時間の制約を入れた模型(model)で計算すると制御不能のように見えることがある。しかし、確率分布、相互作用など複雑な条件下で解決可能なこともある。解は演繹的ではなく、発見的に見付ける場合がある。

工場での改善 手法を現場に適用するには、測定可能な水準の違いを 押さえれば、設計力の向上に役立つかもしれない。

上記のような知見の背景として、物理現象と人間の 行動の間には、確からしさ、確率分布、時定数が違う ことを仮説として設定している。人間の行動の要因は 多数あり、それらを同時に調べることは不可能である。 

例えば、物理現象の測定で 99.9%が閾値だとすれば、人間の行動の測定は 50%を閾値として考える場合がある。これは過半数という概念で、多数決の原理の 基礎となっている。それ以上精密な数字を調べても、 多数ある原因、結果について、すべてをより精度の高 い数値を計測することは不可能である。場合によっては1%でも有意なことがある。例えば、１００人の組織で１人ができればいいことは1%と表現できる。

物理現象でも、1%の事象を有意にするために、濾過（filter)で、残りの99%を排除できれば、99.9%以上にすることが可能である。人間の場合には、排除するのが難しいので、特許、論文、規格のような出願式の仕組みがある。
改善活動が、提案方式である背景がぼんやりと浮かび上がってこないだろうか。

https://researchmap.jp/blogs/blog_entries/view/78772/1731a3d003c5d976d863571258d5bc1c?frame_id=416173

# 脱却の鍵　
本、論文で通用しないことも、国際規格審議では通ることがある。　
現場の経験ではあたりまえのことが、本、論文には登場しない。　

国際規格の審議の場でも、管理者、間接部門しかでてこない会議では同様かもしれない。

ちょっとプログラムを仕事で書いたこと経験のある人なら、本、論文にかいてあることと、　
現実の間には、機密事項と個人情報の壁で見えてない、さまざまな制約、前提条件があり、元bあではあたりまえのことも、本、論文にはかいてなくても、国際規格の審議では通るかもしれない。



 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong. 


# 文書履歴(document history)
ver. 0.01 初稿　　20230813

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
人材育成　失敗か成功か　オープンソースは人を育てるか

自動車用ソフトウェアプラットフォーム開発事業で人材育成を担当した。

投稿日時 : 2012/12/18    小川 清 
数年前(2005年から2009年），自動車用ソフトウェアプラットフォーム開発事業で人材育成を担当した。
設計，開発が主な事業です。道具、手法の網羅と技能習得を確実にすることを目指しました。
 
大勢の方々の講義，演習などを企画し，技能判定などを実施しました。
機密事項のため実作業を一緒に出来ない場合は，講師をしていただいて技能判定に生かす。
講師，受講者の両方の技能判定をするのが鍵。
公開できることは積極的に公開していただくためクリティカルソフトウェアワークショップ(WOCS),安全工学シンポジウム（未記入）で発表していただきました。

人材育成　失敗か成功か　オープンソースは人を育てるか。
ETSSを拡張し、安全関連系のスキル表を作成した。
自分の分を公開した以外は、運用には無理があった。

組織の機密情報にもとづく情報隔離の壁と、個人情報保護と、個々人の何になりたいかの次元の多さの管理不能生にあったかもしれない。

 ＜この記事は書きかけです。順次追記します。＞
 This article is not completed. I will add some words in order.


# 講師一覧
## 内部講師

|所属|　　氏名|　分野|WOCSでの関連発表（1つ）, 安全工学シンポジウム(1つ）|
|:--|:--|:--|:--|
|名古屋大学|　　　　　高田広章|　Operating system|　組込みシステムにおける並列型状態遷移図に基づく安全分析手法, 10thWOCS|
|産業総合研究所　　|　水口大知　|分析と手法|　簡易な形式仕様記述と状態遷移表を併用した要求仕様のレビュー方法, 8thWOCS|
|筑波大学|　　　　　　長谷部浩二|　論理手法|　Model Checking of Services Workflow Reconfiguration: a Perspective on Dependability, 9thWOCS|
|トヨタ自動車|　　　　川名茂之|　ISO 26262|　講演資料非公開, 8thWOCS|
|北海道立工業試験場|堀武司　|B Method, Event-B|　Bメソッドによる組込みソフトウェア開発の品質改善効果と開発コストの評価, 10thWOCS|
|ルネサステクノロジー|藤沢行雄|　Flex-Ray|
|アイシンAW|　　　　 久保孝行|　MatLab関連ツール|  状態遷移の種類と形式検証の使いどころ, 9thWOCS|
|東海理化|　足立 秀和|　手法の比較|モデルベース開発導入へのチャレンジ　～単体コード検証への適用による導入の加速～, 9thWOCS|
|アイシン精機　|　　　間瀬順一　|実証試験,なぜなぜ分析|
|アドヴィックス|　河野文昭|　改善,なぜなぜ分析|　セーフティクリティカルシステムにおけるＳＰＩＣＥの活用方法と機能安全への適用, 10thWOCS|
|東海ソフト|　　岡村真吾,服部 智幸|　UML, VDM|
|株式会社ヴィッツ|　　　　　森川聡久, 水野智仁|　人材育成，品質管理|  
|株式会社ヴィッツ|　　　　大西 秀一|　分析と手法|
|株式会社ヴィッツ| 　鵜飼　敬幸　|道具|　TOPPERS/SSPへの組込みコンポーネントシステム適用における設計情報の可視化と抽象化, 9thWOCS
|サニー技研　|尾仲 洋和|ETSS|　中小企業における機能安全対応への取り組み, 10thWOCS
|サニー技研　|中本 加那, 米田 真之|　SPINなど|　中小企業の形式手法への取り組み, 8thWOCS|
|名古屋市工業研究所|　斉藤直希　|Z，Uppaal|  HAZOPによるTOPPERS/SSPの分析, 9thWOCS|
|名古屋市工業研究所|　小川清|　国際規格|　一人HAZOPを組み合わせた効率的な分析作業, 8thWOCS|

## 外部講師


|所属|　　氏名|　分野|WOCSでの関連発表（1つ）, 安全工学シンポジウム(1つ）|
|:--|:--|:--|:--|
!日本機能安全　|吉岡律夫　|安全計画:
|日本機能安全　|川原卓也　|安全分析(FTA,FMEA,HAZOP)|想定外事象と潜在リスク分析, 9thWOCS
|スパークスシステムズ|　河野岳史|　UML|
|株式会社フォーマルテック|早水公二| SMV|　モデル検査の適用プロセスの提案, 9thWOCS
|キャッツ|　今井良和|　道具| 組込み製品のユーザ視点の信頼性/品質向上に向けた取組み, 9thWOCS

# まとめに代えて　

オープンソースは人を育てるかというと、育てない。　
自分が育とうと思う人だけが育つだけであることは、組織内の教育であろうが、組織外の教育であろうが、違いはない。

本人の目標設定と、やる気と、能力と、環境かもしれない。

オープンソースは環境としてよいはずだった。　
村社会を作ろうとしたり、裸の王様とそのとりまきだらけだったりしなければ。

派遣技術者の伸びる機会：Virtual Science Laboratory

https://qiita.com/kaizen_nagoya/items/725b73b695535ccf51b8


 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong. 


# 文書履歴(document history)
ver. 0.01 初稿　　20230814
ver. 0.02 ありがとう追記　　20230814

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
Julia によるリアルタイムオーディオ出力

## 概要
windows版のjuliaで、実時間で作成(or MIX)した音声データを出力する技術メモです。PortAudioライブラリを用いています。
※TypeをInt16としていましたがFloat32の方が簡単ですので。サンプルプログラムを修正しました。

### 想定するアプリケーションと実行環境
アプリケーション：音声合成、音声処理、ラジオ
実行環境：julia, windows10

### 実行環境の準備
PortAudioモジュールを追加します。

## 解説

### オーディオデバイスを調べる
PortAudio.devices()で使用可能なデバイス名を探す。
(input channel数)->(output channel数)
```julia:デバイスリストアップ
using PortAudio
PortAudio.devices()
```

### 音声デバイスにチャンクデータを出力
#### サンプルデータ作成
Floatではサンプルの値は-1.0から1.0の間にする。
※ [Writing a Callback Function](https://portaudio.com/docs/v19-doxydocs/writing_a_callback.html)には、サンプルの型はInt16でもよいがFloatが簡単と注記あり。
```julia:１秒分のチャンクデータを作成
Nsmp=8000 #サンプル数
Nfs=8000 #サンプリング周波数
Fa =400　# 信号400Hz
Fb =600　# 信号600Hz

aT= (1:Nsmp)/Nfs
aDa= sin.(π*2*Fa*aT)
aDb= sin.(π*2*Fb*aT)
```
#### 音声が出力されるかテスト
モノラルの場合は、サンプルをFloat型Arrayでwriteする。
```julia:チャンクデータを出力（モノラル）
T=Float32 # T=Int16
# 入力なし、出力１Ch、データ型、サンプリング周波数
stream=PortAudioStream("デバイス名",0,1, eltype=T,samplerate=Nfs)
#x=convert.(T,floor.(aDa*16000))
@time write(stream,aDa)
@time write(stream,aDb)
@time write(stream,aDa)
close(stream)
```

ステレオの場合は、サンプルをFloat型二次元Arrayに書き込みwriteする。

```julia:チャンクデータを出力（ステレオ）
T=Float32 # T=Int16
# 入力なし、出力2Ch、データ型、サンプリング周波数
stream=PortAudioStream("デバイス名",0,2, eltype=T,samplerate=Nfs)

z1=zeros(T,Nsmp,2);z2=zeros(T,Nsmp,2)
z1[:,2]=aDa; z1[:,1]=aDb
z2[:,2]=aDb; z2[:,1]=aDa

write(stream,z1)
write(stream,z2)
write(stream,z1)
write(stream,z2)

close(stream)
```
#### 非同期タスクで出力
```julia:非同期Task処理
T=Int16
ch=Channel(5)
# Consumer Task
function play()
    stream=PortAudioStream("デバイス名",0,1, eltype=T,samplerate=Nfs)
    try
        while true
            dat = take!(ch)
            write(stream,dat)
        end
    finally
        close(stream)
    end
end
@async play()
x=convert.(T,floor.(aD*16000))
#Producer
put!(ch,x)
put!(ch,x)
put!(ch,x)
#close(stream)
```

## 応用
ラジオなら復調した音声データをChannelに積んでいけばよい。
ただ、オーディオデバイスのクロックとSDRのクロックを同期させないと、音飛びとか発生する。
Channelでキュー長を観測するインターフェースがあれば、キュー長を一定にするようにDDコンバータを作ってやればよいのだが。

### 参考情報
- PortAudioの[Tutorial](https://portaudio.com/docs/v19-doxydocs/tutorial_start.html)
- ヘルプ：?PortAudioStream
- githubの[JuliaAudio PortAudioのソース](https://github.com/JuliaAudio/PortAudio.jl/blob/master/src/PortAudio.jl)
- https://qiita.com/0x20FE/items/d8a4a477855b6e3aa36f
「HTTP 403 Forbidden」you don't have permission to access this resource. 原因　MAC　Apache

# テスト用に立てたMacのApachのDocumentRootを外付けHDに引っ越したら、「HTTP 403 Forbidden」you don't have permission to access this resource. が出た件で悩んだが、MacOS側のアプリケーションのアクセス権が問題だった。(chownではない）



## 前提：
Macにテスト用のapacheを立ててるんだけど、もともとのDocumentRootがメインのHDにある。
あまりメインHDの容量増やしたくなくて、テストWEBを外付けHDに引っ越そうとした。
（lnしようとしたけど、途中でVirtualServerでいいのでは、となった）

## 現象：
403エラーが出て外部HDは見れなかった。

## 調査：

1. apache内のアクセス権
2. ファイルのアクセス権

1についてはhttpd.conf と　.htaccessの設定らしいが見た目問題ない。というか同一のファイルで元のdocumentrootにあるものはVirtualServerで問題なく見れる。
2.については、元のディレクトリとアクセス権を同じにしたり、オーナー変えたりしたが変わらなかった。

確認にもうえらい時間かかって、ジャングルの中彷徨ってる気分になった。

たとえばApache2.4なのでhttpd.confのデフォルトアクセス設定が

```apache:httpd.conf
<Directory />
    AllowOverride none
    Require all denied
</Directory>
```


となってるのでこれも受け付けるようにしてみたが動かない、とか（ノーガード戦法）
(Require all allow)


## 解決編

・・・・焼きそば作ってて同じようなことがあったのを思い出した。
MacのOSのたしかMojaveからCatalinaにUPDATEに何か全く別のアプリで同じようなアクセス権周りの確認をサポートに何回かしたことを。
（アプリケーション側のアクセス権の話。Macでアプリで新しいディレクトリを開こうとすると権限をつけるか聞かれるやつ。

つまり、Httpdのアプリケーション（アプリケーション・・・なの？）(それはそうだけど）自体のアクセス権が足りなかった。（Macのアプリケーションかと言われるとちょっと考えるな）




設定は「システム設定」→「プライバシーとセキュリティ」→フルディスクアクセスのタブにある。こちらにhttpdのアプリを追加して権限を付与する。
普通のファイルを開くダイアログで、探させるため、/sbinとか行けないので、エイリアスをデスクトップに作っといて対応した。

![スクリーンショット 2023-08-12 16.48 のコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531435/e59f09ff-10ca-0d1a-3974-006f14da7b4d.jpeg)



これで見れるようになりました。完！



### 謝辞 　ChatGPT3.5
もうここら辺の設定したのも昔のことなので覚えてなくて、色々聞いた。何度でも聞けるからとても助かるけど、オチは教えてくれなかった。
[リサーチ・メモ] JPQLについて

## 背景
今回のプロジェクトではJPQLを使用し、SQLとは記載方法が異なる為メモとして纏める。

## JPQLとは
JavaPersistenceQueryLanuage
JPAでエンティティからデータを取得する際に利用されるクエリ言語であり、データベーステーブルではなくエンティティクラスとそのフィールドに対して動作する。

## 利用する為に
「META-INF/persistence.xml」に、クエリが定義されたファイルとマッピングするエンティティを記載する。
```
<mapping-file>META-INF/orm.xml</mapping-file>
<class>com.example.model.Person</class>
```

## 基本構文
### 1つのテーブルを取得する場合
```orm.xml
    <named-query name="findAllPersons">
        <query>SELECT 
                    p 
                FROM 
                    Person p
        </query>
    </named-query>
```
```xxx.java
List<Person> persons = entityManager.createNamedQuery("findAllPersons", Person.class);
```
※createNamedQueryの第一引数にはxmlファイルに定義したクエリ名、第二引数には戻り値の型を指定する。

### 複数のテーブルを取得する場合
```orm.xml
    <named-query name="findPersonsAddressInfo">
        <query>SELECT 
                    p, a
                FROM 
                    Person p 
                INNER JOIN 
                    Address a
                ON
                    p.addressId = a.addressId
                    </query>
    </named-query>
```
```xxx.java
List<Object> personsAddressInfo = entityManager.createNamedQuery("findPersonsAddressInfo", Object.class);

for (Object obj : personsAddressInfo) {
  Object[] objs = (Object[]) obj;

  //キャストを行うことでゲッター等が使用できる
  Person person = (Person) objs[0]
  System.out.println(person.getFamilyName());

  Address address = (Address) objs[1]
  System.out.println(address.getPostalCode());

}
```
※配列の順番はSELECT文の順番となり、異なるとキャストエラーが発生する。

### 条件を指定する場合
```orm.xml
    <named-query name="findPerson">
        <query>SELECT 
                    p 
                FROM 
                    Person p
                WHERE
                    p.familyName = :familyName
        </query>
    </named-query>
```
```xxx.java
List<Person> person = entityManager.createNamedQuery("findPerson", Person.class).setParameter("familyName", "テスト");
```
※setParameterの第一引数と同じ名称の、xmlに記載した「:familyName」には、setParameterの第二引数である「テスト」が入る。


## INSERT文
JPQLではINSERT文を使用せず、代わりに「persist」と「flush」を使用する。
```xxx.java
EntityManager em = ...;
EntityTransaction transaction = em.getTransaction();

// トランザクションの開始
transaction.begin(); 

// 登録するデータをエンティティに設定する
Person person = new Person();
person.setFamilyName("John");

// エンティティをDBに登録する
em.persist(person);

// 変更を同期する
em.flush();

// トランザクションのコミット
transaction.commit(); 
```
【GAS】日時の変換方法

# はじめに
弊社ではGAS(Google Apps Script)を使用して色々と自動化しているのですが、暫く触っていないと日時の変換方法など忘れてしまうことがあるので、備忘録的にまとめておこうと思います。

# String→Date
文字列からDateに変換する際は以下方法で可能です。

```
const dateStr = '2022／12／31 12:34:56';
const date = Utilities.parseDate(str, 'JST', 'yyyy／MM／dd HH:mm:ss')
```

文字列からの変換方法は以上です。

# Date→String

Dateから文字列に変換する方法は以下になります。

```
var today = new Date();
var todayStr = Utilities.formatDate(today, 'JST', 'yyyy-MM-dd HH:mm:ss');
```

Dateからの変換方法は以上です。

# さいごに
たまに触るくらいだと時折忘れるので、こういうのもまとめておくと便利ですね。
pgAdminを基本からまとめてみた【基本】

1. Serversをクリックし、『Register』⇨『Server』を選択し、
サーバーの名前を記入する。

2. Connectionを選択し、Hostにlocalhost、Passwordを記入して
右下の『Save』を押す。

3. 新しいアイコンが表示されるとデータベースに接続される。

4. アイコンをクリックして、『Database』⇨『Create』⇨ 『Database』を順に選択して、フォームに記入して作成をする。

5. 『Database』を選択すると上部にある全てのボタンが有効になる。

6. 『クエリツール』をクリックする。
※クエリツール:Databaseに▶︎があるボタン

7. pgAdmin内で、新しいタブが作成されている。
※タブのタイトルには、Postgresのユーザー名、データベース、postgres Demoのサーバー名が含まれている

8. 上部のプルダウンは、他の接続及びサーバーを選択できる。

9. 右端にある『Scratch Pad』は、クエリや別の外部エディタにテキストを追加するのではなく、クエリを操作する時にテキストの一部を保存する場合に役立つ。

10. CREATE TABKEステートメントを作成したら、F5か『▶︎』をクリックすることで、クエリを実行できる。

```sample.sql
CREATE TABLE pgtest (
testval VACHAR(10)
);
```
※ Query returned successfully in 394 msec.と表示されたら成功

11. テーブルが出来たので、データを挿入する。

```sample.sql
INSERT INTO pgtest (testval)
VALUES("Hello");

SELECT testval
FROM pgtest;
```
12. F5か『▶︎』をクリックすることで、ステートメントが実行される。



## 参考サイト
[pgAdmin Tutorial - How to Use pgAdmin](https://www.youtube.com/watch?v=WFT5MaZN6g4)
ABC311 - A - First ABC 自己解法

# 問題

https://atcoder.jp/contests/abc311/tasks/abc311_a

# 考察
`A`,`B`,`C`がそれぞれ全て出現している状態になるのは、左から何文字目まで見たときですかという問題です。`A`,`B`,`C`それぞれが出現しているかを知る必要があるため、`A`,`B`,`C`それぞれに対して出現しているかどうか管理するフラグを用意しておきます。それぞれのフラグが全て立ったときが左から何文字目になるかを出力すればOKです。左から文字を順番に調べるときは`for`という繰り返し処理を使うと便利です。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc311/submissions/44481136

ご不明点などがあれば教えていただけると幸いです。
PyCharmなどでファイル一覧の背景が黄色くなったとき

# 対象
IntellijなどJetBrains製のIDE
（本記事はPyCharmでやってますが、他のIDEも同じだと思います）

# 困ったこと
PyCharmであるディレクトリを開き作業をしていた。その中の一部のディレクトリだけしか使わんないからディレクトリ開き直そ〜と思って開いたところ、ファイル名が全部黄色くなっちゃった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182296/e208a1cd-fdfd-5fee-83f4-901d0fe5ec00.png)

気持ち悪いので、背景の黄色をなくしたい。

# ファイル一覧の背景色の意味
そもそもなんで黄色いの？というと、Setting > Appearance & Behavior > File Colorsを見るとわかるのだが、
プロジェクト対象外のファイルと判定されているため。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182296/bf766b13-3eb4-9f60-3e11-6a50c082364e.png)

※ ローカルで適当なファイルを作ってただけなので、gitとは連携していないです

# 対応
Setting > Project > Project Structureで、対象ディレクトリを追加してあげればOK。

おそらくなにも設定されていないはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182296/e39f70f6-6dd2-c357-2b99-6ae90e25ed4c.png)

ディレクトリを追加し、Sourcesでマーキングしてあげる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182296/c20cfab7-6aaf-f6a2-628b-83943067b1b8.png)
powerlevel10k(p10k)でブランチ名表示をfish風に省略する

# はじめに
powerlevel10kでブランチ名を表示する際、表示箇所が足りない場合にブランチ名の中央が省略されてしまいます。

例
```
feature/battle/sprint3/backend

↓

feature/.../backend
```

自分のプロジェクトのブランチ名規則では、ブランチ名のスラッシュ区切りの最後2つの部分が大事なので、最後の2つ以外の部分は2文字に省略する（1文字だと意味がよくわからないため）ようにしたいと思いました。

例
```
feature/battle/sprint3/backend

↓

fe/ba/sprint3/backend
```

# 環境
|項目  |バージョン  |
|---|---|
|OS  |Mac OS X Ventura 13.4.1   |
|zsh  |zsh 5.9 (x86_64-apple-darwin22.1.0)  |
|powerlevel10k  |1.17.0  |

# 実装
powerlevel10kの設定ファイルである.p10k.zshを編集します。

まず、`my_git_formatter` 関数の前に以下の関数を定義します

```zsh
  # スラッシュ区切りの最後から2つ目以外の部分を2文字に短縮する
  function shorten_branch_name {
    # 引数を/で分割
    array=("${(s:/:)1}")
    result=""

    for ((i = 1; i <= ${#array[@]} - 1; i++)); do
      # 最後から2つ目以前
      if [[ i -le (${#array[@]}-2) ]] then
        # 初めの2文字だけ
        result="${result}${array[i]:0:2}/"
      else
      # 最後から2つ目はそのまま
        result="${result}${array[i]}/"
      fi
    done

    # 最後の1つもそのまま
    result="${result}${array[-1]}"
    echo $result
  }

```

`my_git_formatter` 関数の以下の部分を編集します。
これでローカルブランチの表示が省略されます。
```zsh
    if [[ -n $VCS_STATUS_LOCAL_BRANCH ]]; then
      local branch=${(V)VCS_STATUS_LOCAL_BRANCH}

      # ここでブランチ名の省略をする
      branch=`shorten_branch_name $branch`

      # If local branch name is at most 32 characters long, show it in full.
      # Otherwise show the first 12 … the last 12.
      # Tip: To always show local branch name in full without truncation, delete the next line.
      (( $#branch > 32 )) && branch[13,-13]="…"  # <-- this line
      res+="${clean}${(g::)POWERLEVEL9K_VCS_BRANCH_ICON}${branch//\%/%%}"
    fi
```

タグも省略するようにします。
```zsh
    if [[ -n $VCS_STATUS_TAG
          # Show tag only if not on a branch.
          # Tip: To always show tag, delete the next line.
          && -z $VCS_STATUS_LOCAL_BRANCH  # <-- this line
        ]]; then
      local tag=${(V)VCS_STATUS_TAG}

      # ここでタグ名の省略をする
      tag=`shorten_branch_name $tag`

      # If tag name is at most 32 characters long, show it in full.
      # Otherwise show the first 12 … the last 12.
      # Tip: To always show tag name in full without truncation, delete the next line.
      (( $#tag > 32 )) && tag[13,-13]="…"  # <-- this line
      res+="${meta}#${clean}${tag//\%/%%}"
    fi
```

リモートブランチも省略します。
```zsh
    # Show tracking branch name if it differs from local branch.
    if [[ -n ${VCS_STATUS_REMOTE_BRANCH:#$VCS_STATUS_LOCAL_BRANCH} ]]; then
      local remote_branch=${(V)VCS_STATUS_REMOTE_BRANCH}

      # ここでブランチ名の省略をする
      remote_branch=`shorten_branch_name $remote_branch`

      res+="${meta}:${clean}${remote_branch//\%/%%}"
    fi
```

これで読み込み直せば完成です！

```zsh
source .p10k.zsh
```

# 完成図
before
![スクリーンショット 2023-08-12 16.41.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169996/4935b086-ef80-0306-1f5a-e03cd3e9156b.png)

after
![スクリーンショット 2023-08-12 16.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169996/48ba43b5-7853-bf89-0b8d-2bca8795816c.png)

期待通りの表示になりました！

# 終わりに
`shorten_branch_name` を編集すれば文字数や省略する箇所のカスタマイズもできます。
【プラクティス紹介】1分でさらっと分かる「オズの魔法使いテスト」

## プラクティス名（別名）
オズの魔法使いテスト　（ウィザード法）

## プラクティスの目的・狙い
* ユーザからのフィードバックを実装前に獲得する
 
## どんな時に使うか
* 実装完了までにはまだ時間がかかるが、先にその仕様で良いかを確認したい時
（誤った仕様で作成してしまうと、それだけ時間も手間も無駄になる）

## 実施手順
1. テストユーザが操作できる画面周りだけ作成し、入力された値が分かる簡単な仕掛けだけを施しておく
（ビジネスロジックはまだ実装しない）
1. ユーザが操作したら、入力データを見て、裏で人が処理し、あたかもプログラムが処理したかのように画面に結果を返す
1. テスト後、ユーザに操作感の印象や処理結果の妥当性について確認する
1. 最終的には手処理で行っていた部分を正式なプログラムに置き換える

## アンチパターン
* プログラムの実装が完了していないことを誤魔化すために行う
* レアケースだから当面は人手で・・・と実装を後回しにしていたらその手運用が常態化してしまう

## こぼれ話（私的コメント）
ネーミングの由来は『オズの魔法使い』に登場する老人で、魔法のように見せていたけど実は裏で・・・というものです。アメリカのスタートアップ企業では本番運用でこの手法をやるそうで感覚の違いを感じます。ネット靴店のZappos（最終的にamazonが買収）が立ち上げ当初、速攻でWEBサイトだけ立ち上げ、注文が入ると社員が近所の靴屋に買いに走っていたという有名なエピソードがあります。

僕たちも障害などで正常に処理されなかったデータを人手で処理してシステムに戻すって普通にやると思いますが、これも一種のウィザード法と言えなくも・・・いや、ちょっと違いますかね・・・。

　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
Nuxt – ブラウザ ( Chrome Developer Tool ) の Networks タブにAPI通信内容が表示されない ( SSR )

# 問題

SSRだとサーバー処理層(？)に処理が隠蔽されている影響かNetworksタブに内容が表示されない


# 解決

Nuxt dev toop > Payload で Refetch all-data を選ぶとブラウザ側にも表示されるようだ

![image](https://github.com/YumaInaura/YumaInaura/assets/13635059/b7e70dab-8586-4876-bde1-028457d02d8d)

# コード例

```vue
<script setup lang="ts">
const { data: data1 } = await useFetch(
  "https://jsonplaceholder.typicode.com/todos/"
);
const { data: data2 } = await useFetch(
  "https://jsonplaceholder.typicode.com/todos/"
);
</script>
<template>
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</template>

```


# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
さくらのVPSでサーバーをセットアップする

https://labo.kon-ruri.co.jp/sakura-vps-ssh-security-protection/
↑基本的には上記の記事をもとにセットアップを進めます。

## 詰まったところ
### 1.公開鍵・秘密鍵を作成
>これで鍵の作成は完了ですが、もしファイル名をid_rsa以外に変更した場合は、以下の手順でssh-agentに登録しておく必要があります。

とありますが、登録した鍵を確認できるコマンドを入力した際
```
$ ssh-add -l
The agent has no identities.
```
と表示されたので、以下のコマンドを入力して鍵を登録しました。
```
$ ssh-add
```
そうすると、デフォルトの秘密鍵がSSHエージェントに追加されます。パスフレーズが要求される場合はその時に入力します。鍵を追加した後、再度 ssh-add -l を実行すると、追加された鍵のフィンガープリントが表示されるはずです。
React Testing Libraryを活用したユーザ目線のテスト

## はじめに

Reactでのテストをする際はReact Testing Libraryを使いますが、提供されるクエリには公式からあらかじめ定められた優先度があるのはご存知でしょうか？

雰囲気で以下のような感じでテストを書いていませんか？

```tsx
// <a href='https://hoge.com' data-testid='hoge-testid'>リンク</a>を取得したい時
render(<Component />)
screen.getByTestId('hoge-testid')
```

公式ではgetByTestIdを使用する方法はあまり推奨されていません。

以下のように修正できます。

```tsx
render(<Component />)
screen.getByRole('link', {name: 'リンク'})
```

なるべくgetByRoleやgetByLabelTextなどのユーザー目線でのテストを記述することが良いとされています。

今回はReact Testing Libraryにおけるクエリの優先度を学びつつ、ユーザ目線を意識したユニットテストの書き方について学んでいきます。

## クエリの優先度

testing-libraryにおけるテストはユーザーが操作する方法にできる限り似ているように設計するべきとされており、以下のような3つの優先順位で決められています。

### 1. **Queries Accessible to Everyone**

視覚やマウスを使用するユーザーや、支援技術を使用するユーザーの体験を反映するクエリ

**getByRole**

WAI-ARIAで決められている、各属性の役割で要素を取得することができます。

冒頭の例だと、a要素はlinkという役割が暗黙的に指定されています。

また、nameオプションを使うことでアクセシブルな名前でフィルタすることができます。

例えば以下のようになります。

```tsx
// <a href='https://hoge.com' data-testid='hoge-testid'>リンク</a>を取得したい時
screen.getByRole('link', {name: 'リンク'})
```

**getByLabelText**

主に、フォームなどのinput要素のラベルに使用されます。

ユーザーはラベルに基づいてinput要素を見つけ出しますが、その操作に似せたクエリとなっています。

**getByPlaceholderText**

input要素などのプレースホルダーテキストを使用して要素を取得するクエリです。

例えば、検索ボックスのテキストを取得する場合などに使用されます。

**getByText**

要素のテキスト内容に基づいて要素を取得します。

このクエリは画面上に表示されるテキストを元に要素を見つけるため、ユーザーが実際に見るコンテンツを反映します。

**getByDisplayValue**

フォーム要素の現在の値に基づいて要素を取得します。

ユーザーがフォームに入力した値を反映したクエリです。

### 2. **Semantic Queries**

HTML5やARIAを準拠したクエリ。

**getByAltText**

画像要素の代替テキスト（alt属性）に基づいて要素を取得します。

画像の内容に関連するクエリで、視覚障害のあるユーザーのために重要です。

**getByTitle**

このクエリは、要素のタイトル情報を利用して要素を取得します。

### 3. **Test IDs**

テスト専用のIDを使用したクエリ。（ユーザーはテストIDを見たり聞いたりすることができないため、特定のロールを持たない、またはテキストで一致できない場合のみ推奨されます）

この方法は、テストがUIの変更に影響を受けずに安定して動作することを目指す場合に便利です。

**getByTestId**

テストのための特別な属性（data-testid）を使って要素を取得します。

アクセシビリティの観点からは、このクエリは避けるべきですが、テストのしやすさから一部の場合に使用されることもあります。

## まとめ

ユーザー目線でテストを行うためには、ユーザーが実際にどのようにアプリケーションを操作操作して利用するかを考えることが重要となっています。

上記のクエリの優先度に従い、ユーザーがどのようにアプリケーションを操作するかを考慮してテストを記述しましょう。

テストを行う際は、テストケースが現実のユーザー操作に沿ったものであることを確認し、アクセシビリティを重視することで、アプリケーションの品質を高めることができます。

## 参考文献

[About Queries | Testing Library](https://testing-library.com/docs/queries/about/#priority)
[Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
[testing-library でユーザの気持ちになって書くフロントエンドのテスト](https://zenn.dev/tnyo43/articles/39e4caa321d0aa)
Nuxt3 - useFetch の data が template で使えない ( data を複数書く場合の別名の付け方 ) 

# 問題

複数のdata をtemplateで表示させようとして 次のように書いてしまうと何も表示されない

```vue
<script setup lang="ts">
const { data1 } = await useFetch("https://jsonplaceholder.typicode.com/todos/");
const { data2 } = await useFetch("https://jsonplaceholder.typicode.com/todos/");
</script>
<template>
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</template>
```

# data を複数使う場合

`data: xxx` で別名を付ける

```vue
<script setup lang="ts">
const { data: data1 } = await useFetch(
  "https://jsonplaceholder.typicode.com/todos/"
);
const { data: data2 } = await useFetch(
  "https://jsonplaceholder.typicode.com/todos/"
);
</script>
<template>
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</template>

```

# 表示例

<img width="1440" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/19877fed-15a8-468e-9c13-37641304d9d7">


# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
rbenv で ruby 3.1.0 のインストールが失敗した

## 問題

$ `rbenv install 3.1.0`が以下のように失敗した。

```
To follow progress, use 'tail -f /var/folders/71/yyv_lj_x3mxdb66f14803n140000gn/T/ruby-build.20230812151101.80080.log' or pass --verbose
Downloading openssl-3.1.1.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/b3aa61334233b852b63ddb048df181177c2c659eb9d4376008118f9c08d07674
Installing openssl-3.1.1...
Installed openssl-3.1.1 to /Users/daiki-kudo/.rbenv/versions/3.1.0

Downloading ruby-3.1.0.tar.gz...
-> https://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.0.tar.gz
Installing ruby-3.1.0...
ruby-build: using readline from homebrew
ruby-build: using libyaml from homebrew
ruby-build: using gmp from homebrew

BUILD FAILED (macOS 13.0.1 using ruby-build 20230717)

Inspect or clean up the working tree at /var/folders/71/yyv_lj_x3mxdb66f14803n140000gn/T/ruby-build.20230812151101.80080.bcwIBi
Results logged to /var/folders/71/yyv_lj_x3mxdb66f14803n140000gn/T/ruby-build.20230812151101.80080.log

Last 10 log lines:
static const struct kwtable *reserved_word(/*const char *, unsigned int*/);
                             ^
defs/keywords:162:1: note: conflicting prototype is here
rb_reserved_word (register const char *str, register size_t len)
^
defs/keywords:6:36: note: expanded from macro 'rb_reserved_word'
#define rb_reserved_word(str, len) reserved_word(str, len)
                                   ^
2 warnings generated.
4 warnings generated.
No gem directory for 3.1.0
```

`/var/folders/71/yyv_lj_x3mxdb66f14803n140000gn/T/ruby-build.20230812151101.80080.bcwIBi`を見に行くと、、、


```sh
compiling yjit.c
In file included from yjit.c:158:
./yjit_iface.c:17:10: fatal error: 'capstone/capstone.h' file not found
#include <capstone/capstone.h>
         ^~~~~~~~~~~~~~~~~~~~~
1 error generated.
make: *** [yjit.o] Error 1
```

## 解決策

LDFLAGSとCPPFLAGSを設定した上で、インストールすると成功した。[ref](https://github.com/rbenv/ruby-build/discussions/1933#discussioncomment-5266322)

```sh
# $ export LDFLAGS="-L/usr/local/Cellar/capstone/4.0.2/lib"
# $ export CPPFLAGS="-I/usr/local/Cellar/capstone/4.0.2/include"
# 2023/09/17更新

$ export LDFLAGS="-L/usr/local/Cellar/capstone/5.0.1/lib"
$ export CPPFLAGS="-I/usr/local/Cellar/capstone/5.0.1/include"
$ rbenv install 3.1.0
```

```
To follow progress, use 'tail -f /var/folders/71/yyv_lj_x3mxdb66f14803n140000gn/T/ruby-build.20230812155304.88641.log' or pass --verbose
Downloading openssl-3.1.1.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/b3aa61334233b852b63ddb048df181177c2c659eb9d4376008118f9c08d07674
Installing openssl-3.1.1...
Installed openssl-3.1.1 to /Users/daiki-kudo/.rbenv/versions/3.1.0

Downloading ruby-3.1.0.tar.gz...
-> https://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.0.tar.gz
Installing ruby-3.1.0...
ruby-build: using readline from homebrew
ruby-build: using libyaml from homebrew
ruby-build: using gmp from homebrew
Installed ruby-3.1.0 to /Users/daiki-kudo/.rbenv/versions/3.1.0

Communized gems for 3.1.0
```


## Ref.

https://github.com/rbenv/ruby-build/discussions/1933
Leetcode 77. Combinations

https://leetcode.com/problems/combinations/description/

# アプローチ
- backtracking

```java
class Solution {
    public List<List<Integer>> combine(int n, int k) {
        List<List<Integer>> result = new ArrayList<>();
        helper(1, result, new ArrayList<>(), n, k);
        return result;
    }

    public void helper(int startIndex, List<List<Integer>> result, List<Integer> combination, int n, int k) {
        if (combination.size() == k) {
            result.add(new ArrayList<>(a));
            return;
        }

        for (int i = startIndex; i <= n; i++) {
            combination.add(i);
            helper(i + 1, result, combination, n, k);
            combination.remove(combination.size() - 1);
        }
    }
}
```
Python 標準入力

<h1>はじめに</h1>

paizaラーニングを進めている中で、標準入力に関して混乱したので個人的な備忘録を兼ねてまとめました。


<h1>input()関数</h1>
Pythonに標準で準備されている組み込み関数の1つです。
<br>Pythonで標準入力を利用するためには、この関数を使用します。

<h3>【基本的な使用方法】</h3>
この関数を使用することで、ユーザーがキーボードで入力した値をinput()の戻り値として扱うことができます。
また以下のように変数に格納することもできます。




```python
string = input()
#start over

print(string)
#start over 
```

<h3>【データ型に関して】</h3>
input()ではユーザーが入力した値が数値であってもデータ型は文字列型になります。
そのため文字列以外の型として使用したい場合には、適切な型に変換する必要があります。

```python
string = input()
#19981114

print(type(stirng))
#<class 'str'>

print(type(int(string)))
#<class 'int'>
```

<h2>標準入力のパターン</h2>

input()関数に関して、基本的なことを抑えられたのでここからは、標準入力のパターンに関してまとめていきます。




<h4>1行で複数の値がある場合</h4>
下記のようにカンマ区切りの文字列を入力した場合、変数に1行の文字列として代入されている状態なので、それぞれの名前を別個で使用することができません。

```python
sakura = input()
#タムラ,モリタ,フジヨシ,ヤマサキ

print(sakura)
#タムラ,モリタ,フジヨシ,ヤマサキ
```

カンマ区切りの1行であるこの文字列をそれぞれ別個のデータとして扱うためには、この文字列に対してsplitメソッドを使用します。

splitメソッドを使用することで引数に指定した記号で文字列を分割し、リストとして返してくれます。

今回はカンマ区切りの1行データなので引数は(",")とします。
※引数の指定がない場合はデフォルトでスペース区切りになる。

```python
sakura = input().split(",")
#タムラ,モリタ,フジヨシ,ヤマサキ
print(sakura)
#['タムラ','モリタ','フジヨシ','ヤマサキ']
```

また、下記のように書くことで個別の変数に入力することも可能です。
```python
a,b,c,d = input().split(",")
#タムラ,モリタ,フジヨシ,ヤマサキ

print(a)
print(b)
print(c)
print(d)
#タムラ
#モリタ
#フジヨシ
#ヤマサキ
```

<h4>改行で区切られた複数の値がある場合</h4>

最も簡単な方法は下記のように入力される行数に対して変数を用意してinput()の戻り値を代入する方法です。

```python

a = input()
b = input()
c = input()
d = input()
#タムラ
#モリタ
#フジヨシ
#ヤマサキ

print(a)
print(b)
print(c)
print(d)
#タムラ
#モリタ
#フジヨシ
#ヤマサキ
```

上記の方法でもできますが、行数が多い場合には対応できません。
というかそもそもこの書き方自体がスマートではありません...。

この場合は、for文を使用してループで処理するのがよいです。
for文を使う際に、取り出した変数を使用しない場合は(_)と記載するとよいそうです。

```python
member = [input() for _ in range(4)]
#タムラ
#モリタ
#フジヨシ
#ヤマサキ

print(member)
#['モリタ', 'タムラ', 'フジヨシ', 'ヤマサキ']
```





<h1>おわりに</h1>
まだまだ入力パターンを書ききれいていないので、必要に応じて追記をしていきたいと思います。
[flutter] flutter_inappwebviewでcookieのデータを取得する方法まとめ

## はじめに

こんにちは、今回はプロジェクトの要件でwebviewからcookieを取得する必要があり、実装する機会がありましたのでここで共有します。

flutterでwebviewを実装するには、[webview_flutter](https://pub.dev/packages/webview_flutter)か、[flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview)で実装するのがスタンダードだと思います。
今回は**flutter_inappwebview**で実装します。
webview_flutterでも実装できそうな印象ですが（詳しくは調べてない）、flutter_inappwebviewの方が実装の自由度が高いイメージがあるので今回はこちらを採用しました。

## 概要

今回はライブラリのインポートは省略します。
[flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview)
詳細は上記の公式ドキュメントを参照してください。

#### 全コード


```dart
class TestWebView extends StatelessWidget {
  const TestWebView({super.key});

  @override
  Widget build(BuildContext context) {

    InAppWebViewController? webViewController;
    CookieManager cookieManager = CookieManager.instance();


    return Scaffold(
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('任意のURL')),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },

        onLoadStop: (controller, url) async {
          // Cookieを取得
          List<Cookie> cookies = await test(
            Uri.parse('任意のURL'),
            cookieManager,
          );

          print(cookies);
        },
      ),

      
    );
  }
}

Future<List<Cookie>> test(Uri url,CookieManager cookieManager) async{
  List<Cookie> cookies = await cookieManager.getCookies(url: url);

  return cookies;
}
```


## 解説

一旦cookie取得のことは忘れてewbviewの実装を解説します。

#### webview実装

```dart 

class TestWebView extends StatelessWidget {
  const TestWebView({super.key});

  @override
  Widget build(BuildContext context) {

    InAppWebViewController? webViewController;

return Scaffold( body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('任意のURL')),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },)
}};
```

これに関しては特に解説は不要かと思います。
 initialUrlRequestパラメータで表示したいurlを指定します。
 onWebViewCreatedパラメータではcontrollerの参照を更新しています。
詳細に関しては別記事を参考にしてみてください。


#### cookieの取得

いよいよ本題です。
まあそんなに難しいことはなくやっていることは限りなくシンプルです。

```dart:cookie取得
 CookieManager cookieManager = CookieManager.instance();

    onLoadStop: (controller, url) async {
          // Cookieを取得
          List<Cookie> cookies = await test(
            Uri.parse('任意のURL'),
            cookieManager,
          );

          print(cookies);
        },

Future<List<Cookie>> test(Uri url,CookieManager cookieManager) async{
  List<Cookie> cookies = await cookieManager.getCookies(url: url);

  return cookies;
}

```

dartにはcookieManagerというcookieを取得するためのメゾットが用意されてあります。
今回はこれを利用してcookieを取得しています。

testという関数の中でFuture型のcookieをListで取得してます。

今回はonLoadStopというwebviewの読み込みが完了したタイミングで取得していますが、
ボタンを押下したタイミングなどそこは各自で調整してください。

まあ強いていうなら非同期で取得しなければいけないのでそこを気をつけるとかでしょうか。
意外と簡単に取得できるので驚きました。
tailwind cssが適用されない, vercel deploy, important: true;で解決

### 問題
ローカル環境ではtailwind CSSが適用されているのに、Vercelにデプロイしたらそれが適用されなくなった。

### 解決方法

tailwind.config.js　ファイルに `important: true`を追加する
```
module.exports = {
    important: true,  //add!
};
```
この１行を追加したら、Vercel側にもtailwind CSSが適用されました。
### 参考サイト
https://stackoverflow.com/questions/67393883/tailwind-styles-not-working-on-production
NetBSDでFTDI

c2kはFreeBSD/mipsにつないだFTDIモジュールで操作しているのですが、NetBSDのほうにもFTDIをつないで使えるようにしました。

FreeBSDではカーネルモジュールなのですが、NetBSDではカーネルモジュールになっていないようなので、カーネルのconfに以下を組み込みます。

```diff
+# Serial adapters
+uftdi* at uhub? port ?         # FTDI FT8U100AX serial adapter
+ucom*  at uftdi? portno ?
```

これでビルドしたカーネルで起動してUSBモジュールをつないでみます。

```
[   817.399992] uftdi0 at uhub2 port 1 configuration 1 interface 0
[   817.399992] uftdi0: FTDI (0x0403) FT231X USB UART (0x6015), rev 2.00/10.00, addr 2
[   817.409995] ucom0 at uftdi0 portno 1
```

コマンドでの確認はusbdevsです。

```
c2k# usbdevs
addr 0: xHCI root hub, NetBSD
addr 0: xHCI root hub, NetBSD
 addr 1: product 0000, vendor 0000
addr 1: DWC2 root hub, NetBSD
 addr 2: FT231X USB UART, FTDI
```

FreeBSDでは/devの下にデバイスが生えてくる方式ですが、NetBSDではデバイスのエントリーは作ってあって、それが使えるようになる方式のようです。LUNAのUniOS-B(4.3 BSD)でもそうだったような記憶がうっすらあります。

FreeBSDは/dev/ttyU?, cuaU?でしたが、NetBSDでは/dev/ttyU?, dtvU?になるようです。

ucom0がttyU0になるようです。FT2232などではucom0,ucom1になります。

FreeBSDからjermでc2kのコンソールに入って、c2kにつないだFTDIをTX,RXをつなぎcuで動作確認をして、エスケープしたらエスケープが同じなのでjermが抜けてしまいました。多段で入る場合はエスケープ変えておかないとだめですね。

c1k,c2kのモジュール両方ともFireWireの4pinコネクタ(保守用)でシリアルが外に出ているので、とても便利です。
各列が同じ値の２次元配列を作りたい

# 各列が同じ値の２次元配列を作りたい
pythonのモジュールであるnumpyを使いだしたので備忘録に．

## 行をコピーする
以下のコードで同じ列の値が等しい配列が生成できます．

```python
x = np.arange(-3.0,3.0,0.1) #-3から3まで0.1間隔で増える
x_copy = np.tile(x, (2,1)) #1行目を2回コピー
```

(2,1)を(5,1)に変える等でコピーする数を変えることができます．

```python
x = np.arange(-3.0,3.0,0.1) #-3から3まで0.1間隔で増える
x_copy = np.tile(x, (5,1)) #1行目を5回コピー
```


当然だがコピーのところを(1,1)と指定したとしても行列のサイズは元と同じとは限らないことに注意．

## その他のnumpyの機能
* 同じ形状の配列を生成
```python
x = np.array([[1,2],[3,4]])
x_like = np.zeros_like(x) #同じ形状のゼロ配列
```
EC2にエラーがあった際にSlackに通知

「CloudWatch」でEC2を監視しアラームが発生すれば「Slack」に通知方法について学習をしたので自身の理解・復習また文章力の向上のためアウトプットさせていただきます。

# 事前にやっておくこと
・Slackのアカウントを作成
・通知する「チャンネル」を作成

# 学習内容
対象のEC2インスタンスを「CloudWatch」で監視し、「Lambda関数」でアラームが発生すればSlackにアラームが発生したことを通知します。

# Lambda関数の作成

検索で「Lambda」>「関数の作成」をクリック

`一から作成`
関数名：`任意の名前`
ランタイム：`Python3.8`
アーキテクチャ：`x86_64`
上記を設定し作成。

作成後、作成した「Lambda関数」の詳細に入り「コードタブ」の「pyファイル」に以下の記載しました。

```
import urllib3
import json

http = urllib3.PoolManager()


def lambda_handler(event, context):
    url = "【SlackのWebhook URL】"
    msg = {
        "channel": "【#作成したチャンネル名】",
        "username": "WEBHOOK_USERNAME",
        "text": event["Records"][0]["Sns"]["Message"],
        "icon_emoji": "",
    }

    encoded_msg = json.dumps(msg).encode("utf-8")
    resp = http.request("POST", url, body=encoded_msg)
    print(
        {
            "message": event["Records"][0]["Sns"]["Message"],
            "status_code": resp.status,
            "response": resp.data,
        }
    )
```

コードを入れ込み・【】内の変更を行い「deploy」で保存

上記の記載のコードは<a href="https://repost.aws/ja/knowledge-center/sns-lambda-webhooks-chime-slack-teams" target="_blank">こちら</a>を参考にしました。

「Webhook URL」の発行に関しては割愛させていただきますのでご自身で検索お願いします。

# テストアラームが通知されるか確認

「Test」をクリックし以下を設定

イベント名：`任意の名前`
テンプレート-オプション：`sns-notification`

設定後に「Test」をクリックしSlackに通知されている事を確認します。
![スクリーンショット 2023-08-12 4.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523101/8738bad5-4b7b-a93c-fe5a-a929e6284b25.png)
`example message`のテキストでSlackに通知が来ていることが確認できました。


# SNS作成

検索でSNSに入り、「トピック」>「トピックの作成」をクリックし以下を設定し作成します。

タイプ：`スタンダード`
名前：`任意の名前`
表示名：`任意の名前`

上記設定後、作成します。
作成した「トピック詳細」に入り「サブスクリプション」>「サブスクリプションの作成」をクリックし以下を設定します。

プロトコル：`Lambda`
エンドポイント：`関数のARN`
→検索で「Lambda」に入り「関数」> 先程作成した「Lambda関数詳細」の「関数の概要」の右に表示してある「関数のARN」をコピーします。

作成しステータスが「確認済み」になっていれば「トピックの作成（1）」完了です。

# CloudWatchのアラームの作成

検索で「Cloudwatch」に入り「アラーム」>「アラームの作成」をクリックし以下を設定します。

メトリクス：`対象のインスタンスのお好みのメトリクスを設定`
条件：
→しきい値の種類：`静的`
→CPUUtilization が次の時...：`以上`
→... よりも：`0`

通知：
→アラーム状態トリガー：`OK`
→既存のSNSトピックを選択：`作成したトピック（1）`

通知の追加：
→アラーム状態トリガー：`アラーム状態`
→既存のSNSトピックを選択：`作成したトピック（1）`

アラーム名：`任意の名前(通知で分かりやすいように今回は「test-error-alarm」)`

上記の設定が完了しましたら「アラームの作成」で完了です。

「作成したアラーム」の「状態」が「アラーム状態」になっていることを確認した後Slackを確認します。

```
{"AlarmName":"test-error-alarm","AlarmDescription":....以下省略
```

「Slack」に上記のアラームの通知が確認されましたので今回の学習は完了になります。

# さいごに

EC2インスタンスを「CloudWatch」で監視し、「Lambda関数」でアラームが発生すればSlackにアラームが発生したことを通知を設定することにより、常にインスタンスを監視する手間が省け他の業務などに注力できますので活用すると時間・手間効率が良いとても便利な機能と思いました。

Slackの他にも「チャットワーク」,「Microsoft Teams」などのほかのアプリケーションの通知の設定もございますので色々活用の幅が広がると感じました。
「Lambda関数」に記述したコードを変更することにより通知される内容も変更できますので変数も勉強したいと思います。

アラーム通知以外にも「Lambdaで何かをする」機能は他にもできますのでもっとLambdaを学習をし活用したいと思います。

「Lambda」はコードの実行されたときに起動するものなので、継続で起動している料金とは異なり「使用した分の料金が発生」ですのでコスト的にも良いと思いました。

Lambdaの料金については<a href="https://aws.amazon.com/jp/lambda/pricing/" target="_blank">こちら</a>を参考にしてください。


最後まで読んでいただいた方、ありがとうございました。
【初学者】Goの関数を学び始めた時に、超役に立ったQiitaの記事

# Goについて勉強し始めたとき

これまでにreactやvue関連、pythonなどしかしてこなかった自分が仕事でGoを使うことになり勉強し始めた時にめちゃくちゃ役立った記事です。今回は関数周りでどうすればいいんだろう？と疑問に思った時に、大体が解決するようにまとめておいたものをそのまま記事用に落とし込んだものです。

誰かしらの何かしらの役に立てば嬉しく。
（あと自分用）

### 目次
1. [Goの関数の基本](#Goの関数の基本)
2. [関数の引数や戻り値](#関数の引数や戻り値)
3. [構造体との紐付け](#構造体との紐付け)
4. [エラーハンドリング](#エラーハンドリング)

↑この分類は適当です（笑）😋😋😋😋😋😋😋😋



# Goの関数の基本

- [Golang入門（関数）](https://qiita.com/gorilla0513/items/7e734c4e0680b5ea341d)

https://qiita.com/gorilla0513/items/7e734c4e0680b5ea341d


- [Golangの変数とか関数とか[基礎]](https://qiita.com/mackiso/items/e435e154e3376a68dcca)

https://qiita.com/mackiso/items/e435e154e3376a68dcca


# 関数の引数や戻り値

関数同士の呼び方は、ファイルが別であるか、package名が別であるかによって変化する。

- [golang 関数（func）の引数や戻り値で関数を指定したときの動作](https://qiita.com/tsurumiii/items/0294feebc0216b185765)

https://qiita.com/tsurumiii/items/0294feebc0216b185765

# 別ファイルの関数呼び出し
- [Go言語のpackageの作り方: 長くなったコードを別ファイルに切り出す方法](https://qiita.com/suin/items/f4ad02e4123c8a3c75eb)


https://qiita.com/suin/items/f4ad02e4123c8a3c75eb


# 構造体との紐付け
-[【Go】入門（構造体と関数を紐づける）](https://qiita.com/Kazuhiro_Mimaki/items/700f2910fa4e5f5c1512) 

https://qiita.com/Kazuhiro_Mimaki/items/700f2910fa4e5f5c1512

- [Goのメソッドは構造体以外にでも定義できるしそれが便利なこともよくある](https://qiita.com/ruiu/items/85b72bc94e08d192d90b)

https://qiita.com/ruiu/items/85b72bc94e08d192d90b

- [Go言語：文法基礎まとめ](https://qiita.com/HiromuMasuda0228/items/65b9a593275f769f6b69#%E6%A7%8B%E9%80%A0%E4%BD%93struct) の構造体の部分

https://qiita.com/HiromuMasuda0228/items/65b9a593275f769f6b69#%E6%A7%8B%E9%80%A0%E4%BD%93struct

- [Goの構造体をpackageに外出ししてハマッたこと](https://qiita.com/zurazurataicho/items/4a95e0daf0d960cfc2f7)

https://qiita.com/zurazurataicho/items/4a95e0daf0d960cfc2f7

# エラーハンドリング
- [Golangのエラーハンドリングの基本](https://qiita.com/immrshc/items/13199f420ebaf0f0c37c)

https://qiita.com/immrshc/items/13199f420ebaf0f0c37c

- [Go言語でハマったことメモ（インターフェース）](https://qiita.com/kwbt/items/241b574cc8493de030ae)

https://qiita.com/kwbt/items/241b574cc8493de030ae




<br>
<br>
---
<br>
<br>

#### ※謝罪とお詫び
作者の方々、読んで参考にさせていただきました。ありがとうございました。
また、勝手に載せてしまい、申し訳ありません。削除依頼や何かしらの問題がある場合、ご連絡ください。
Nuxt3 – pagesを有効化する方法は App.vue に <NuxtPage /> を書く

# 問題

「pages 配下に vue ファイルを置くだけでOK」ではない。

`<NuxtPage />` の記述が必要だ。


# 例

`App.vue`

```vue
<script></script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>
```

`pages/example.vue`

```vue
<template>OK</template>
```


# 表示例

`http://localhost:3000/example`

<img width="570" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/cff64970-564a-465d-baee-3dd759bf4d3e">


# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura