OmniAICreator/Qiita-1.07M huggingface dataset:
Node.jsによるHTTPサーバの基本

# 完成系

```main.js
"use strict";

const http = require("http");
const port = 3000;

const server = http.createServer((request, response) => {
    response.writeHead(200, {
      "Content-Type": "text/html"
    });

    const responseMessage = "<h1>Hello World!</h1>";
    response.write(responseMessage);
    response.end();
    console.log(`Sent a response : ${responseMessage}`);
});

server.listen(port);
console.log(`The server has started and is listening on port number: ${port}`);
console.log(`URL:http://localhost:3000/`);

```

## 各行の説明

```"use strict";```
一行目に書くことで、未定義の変数の使用を禁止する

```const http = require("http");```
httpモジュールの読み込み

```const port = 3000;```
ポート番号を3000番に設定

```const server = http.createServer((request, response) => {});```
httpサーバの構築にcreateServer()メソッドを使用
第1引数 request：クライアントからのリクエストに関する機能を提供するオブジェクト
第2引数 response：クラアントへのレスポンスに関する機能を提供するオブジェクト
createServer()メソッド内の処理はhttpリクエストを受け取った際に実行される

```response.writeHead(200, {"Content-Type": "text/html"});```
ステータス情報(第一引数)と、ヘッダ情報(第二引数)の書き出し
※Content-Typeの一覧
https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa

```const responseMessage = "<h1>Hello World!</h1>";```
コンテンツ(表示させる内容)を指定

```response.write(responseMessage);```
コンテンツの書き出し

```response.end();```
コンテンツの完了

```console.log(`Sent a response : ${responseMessage}`);```
コンテンツの中身をログで出力

```server.listen(port);```
ポートを待機状態にする
ポートが待機状態でない場合通信できない

```console.log(`The server has started and is listening on port number: ${port}`);```
ポート番号を格納した定数の中身をログで出力

```console.log(`URL:http://localhost:3000/`);```
構築したHTTPサーバにHTTPリクエストを送るためのURLをログで出力

## 実行方法
```
$ node main.js
```
コンソールに出力されたURL(http://localhost:3000/) にブラウザでアクセス
ブラウザ上に　Hello World!　が出力される

## URLの説明

```http:```
通信方式 (プロトコル) を指定

``` //localhost```
リクエスト先のサーバの住所となるIPアドレス、もしくはドメイン名を指定
localhostをIPアドレスに直すと127.0.0.1で、自身のPCを示している

```:3000```
アクセス先のポート番号を指定

```/```
サーバのどのディレクトリ (パス) にアクセスするかを指定

# 参考：
Node.jsのスクリプトの基本を覚えよう (2/5)
https://www.tuyano.com/index3?id=1126003&page=2
Node.jsでHTTPサーバを構築しよう
https://zenn.dev/wkb/books/node-tutorial/viewer/todo_02
Forge MOD 入門 1.16.5

## はじめに
最近MODを再び作るようになったのですが、アイテムやブロックの追加以外のことにあまり触れてこなかったので、プログラムを実行させる方法がわからず苦戦していました。
Mainクラスから実行されるんじゃないのかMainクラス見つからないんだが？と戦っていました。
ようやく動かし方がわかってきたのでこの記事に残しておきます。
## MODの登録
```java
@Mod("examplemod") // MODの登録
public class exampleMod { // クラスの作成
    
}

```
このようにMODのIDを指定して、exampleModを登録します。
exampleMod というのはファイル名と同じにする？っぽい（たぶん）
## Eventの登録
ゲーム内のアクションを拾ってプログラムを実行するためにForgeのイベントにプログラムを登録していく必要があります。
```java
@Mod("examplemod") // MODの登録
public class exampleMod { // クラスの作成
    // ロガーの定義
    private static final Logger LOGGER = LogManager.getLogger();
    
    public exampleMod() {
        // Eventの受信をできるようにする
        MinecraftForge.EVENT_BUS.register(this);
    }

    // イベントの登録
    @SubscribeEvent
    public void onServerChat(ServerChatEvent event) {
        String message = event.getMessage();
        String username = event.getUsername();
        // ログの出力
        LOGGER.info(username + " says: " + message);
    }
}

```
MinecraftForge.EVENT_BUS.registerという一文を書いていないとイベントは何も使えないということを知らず、SubscriveEventと戦い続けていました。
LOGGER.info()を知らず、System.out.println()をずっと使っていて、なかなか出力されないため、詰んでました。
## さいごに
### プログラムだけ書けてもでけねえ
プログラムだけ知っていてもどのような手順でMODが実行されているのかなんとなく知らないと始め方もわかりません。
一般的なMODの作り方を紹介する動画はアイテムを追加する系だけなのでこの記事が第二の私を作ることを防げることを願っています。
ArduinoUnoR4WiFi: LEDマトリックスにカウントを表示

![ArduinoR4WiFi_may1202.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ca71b080-a3f7-57ff-b423-4e4c5dccca8c.jpeg)

## プログラム

```text:display_count.ino
// ---------------------------------------------------------------------
/*
	display_count.ino

					May/12/2024

*/
// ---------------------------------------------------------------------
// To use ArduinoGraphics APIs, please include BEFORE Arduino_LED_Matrix
#include "ArduinoGraphics.h"
#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

int icount = 0;

// ---------------------------------------------------------------------
void setup() {
	Serial.begin(115200);
	matrix.begin();

	matrix.beginDraw();
	matrix.stroke(0xFFFFFFFF);
	// add some static text
	// will only show "UNO" (not enough space on the display)

	const char text[] = "UNO r4";
	matrix.textFont(Font_4x6);
	matrix.beginText(0, 1, 0xFFFFFF);
	matrix.println(text);
	matrix.endText();

	matrix.endDraw();

	delay(2000);
}

// ---------------------------------------------------------------------
void loop()
{
	display_proc(icount);
	delay(1000);
	icount++;
}

// ---------------------------------------------------------------------
void display_proc(int icount)
{
	char text_in[10] = "";
	sprintf(text_in,"%03d",icount);
	matrix.beginDraw();
	matrix.stroke(0xFFFFFFFF);
	matrix.textFont(Font_4x6);
	matrix.beginText(0, 1, 0xFFFFFF);
	matrix.println(text_in);
	matrix.endText();

	matrix.endDraw();
}

// ---------------------------------------------------------------------
```
[React] Stateを理解する！

### stateとは
React コンポーネントで管理される状態です。

`state` が更新されると、コンポーネントは**再レンダリング**されます。
状態を持つ必要があるコンポーネントで`state`を利用します。
- カウンター
- タイマー など

---

### useState
`state`を利用する場合、 `useState`メソッドを利用します。
`useState`の戻り値として、状態と状態更新するための更新関数が返されます。

詳しくみていきましょう。

```tsx
const [state, setState] = useState(initialState);
```

- `initialState` は `state` の初期値を指定
- `useState` は二つの要素を持つタプルを返す。
    - `state`    => state の値
    - `setState` => state を更新するための関数

この `setState` 関数を使って、新しい state 値を設定することができます。
更新が発生すると、コンポーネントはその state をもって再レンダリングされます。

#### 型指定
`state`変数の型は初期値を元に推論されます。
そのため、`state`の初期値が`null`の場合などは、明示的に型を指定します。
```typescript
const [state, setState] = useState<number | null>(null);
```

---

### Reactの単方向データフロー / Stateのリフトアップ

Reactは **単方向データフロー** を採用しています。
データ（`state`, `props`）が親コンポーネントから子コンポーネントへ一方的に流れるという設計原則です。

そのため、複数コンポーネントで共通して管理する必要がある`state`は 親コンポーネントで管理され、 更新関数が子コンポーネントに渡されることが多いです。
これを **stateのリフトアップ** と言います。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842674/96708baa-f5ee-ab73-0d61-0092961e9890.png)

画像引用
https://www.techpit.jp/courses/22/curriculums/23/sections/197/parts/696


#### サンプルコード
```tsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const [count, setCount] = useState(0);

    const incrementCount = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <h1>Count: {count}</h1>
            <ChildComponent onIncrement={incrementCount} />
        </div>
    );
};

export default ParentComponent;
```

```tsx
import React from 'react';

const ChildComponent = ({ onIncrement }) => {
    return (
        <button onClick={onIncrement}>Increment</button>
    );
};

export default ChildComponent;
```

---

#### setStateにコールバックを渡す

stateの更新は**非同期**に行われます。
そのため、以下のようなコードは連続してクリックされた場合、stateの値が想定された値にならない可能性があります。

```jsx
const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
};
```

対策として、更新用のコールバック関数を渡すことができます。
この関数は実行時の最新の`state`値を引数に取るため、非同期で処理された場合も問題なくカウントアップが実行されます。

```jsx
const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
};
```

---

###  Hooksの呼び出しは関数コンポーネントのTOPで行う必要がある
React では、Hooks の呼び出し順がコンポーネントの各レンダリング間で一貫性を保つため、**Hooks** を関数コンポーネントのトップレベルでのみ呼び出す必要があります。


```jsx
import { useState } from 'react';

const SampleComponent = () => {
  if(true){ 
    // NG: `React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.`
    const [count, setCount] = useState(0);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount((c) => c + 1)}>click</button>
    </div>
  );
};

export default SampleComponent;

```

---

### オブジェクト / 配列 のstate管理
`setState` を使用して state を更新する際は、特にオブジェクトや配列の場合、新しい参照を作成する必要があります。

参照が変更されていない場合、コンポーネントは**再レンダリングされません**
以下のように、既存の配列、オブジェクトを複製する必要があります。

```typescript
const newArray = [...array];

const newState = {...state, updatedProperty: newValue};
```

### まとめ
以上です。
本記事では表面的なところしか触れていませんが、メカニズムの理解がすごく楽しめました。
ArduinoUnoR4WiFi: ボタンを押した回数をカウント

こちらのプログラムを改造してボタンを押した回数をカウントするようにしました。
[ArduinoUnoR4WiFi: ボタンを押したら LED を点灯させる](https://qiita.com/ekzemplaro/items/258804761b9a2b0d0a85)

## プログラム

```text:button_count.ino
// ---------------------------------------------------------------------
/*
	button_count.ino

					May/29/2024

*/
// ---------------------------------------------------------------------
#define BUTTON_A 6
#define BUTTON_B 8
#define LED_A 10
#define LED_B 11

int count = 0;
int count_a = 0;
int count_b = 0;
int status_a_before = LOW;
int status_b_before = LOW;

void setup() {
	pinMode(BUTTON_A, INPUT);
	pinMode(BUTTON_B, INPUT);
	pinMode(LED_A, OUTPUT);
	pinMode(LED_B, OUTPUT);
	Serial.begin(19200);
	delay(1000);
	Serial.println("*** start ***");
	delay(500);

	led_proc();
}

// ---------------------------------------------------------------------
void led_proc() {
	for (int it =0; it<5; it++)
		{
		digitalWrite(LED_A, HIGH);
		digitalWrite(LED_B, HIGH);
		delay(500);

		digitalWrite(LED_A, LOW);
		digitalWrite(LED_B, LOW);
		delay(500);
		}
}

// ---------------------------------------------------------------------
void loop() {
	int status_a = digitalRead(BUTTON_A);
	int status_b = digitalRead(BUTTON_B);

	if ((status_a == HIGH) && (status_a_before == LOW))
		{
		count_a++;
		display_proc(count,count_a,count_b);
		}

	if ((status_b == HIGH) && (status_b_before == LOW))
		{
		count_b++;
		display_proc(count,count_a,count_b);
		}
 
	if ((count % 100) == 0)
		{
		display_proc(count,count_a,count_b);
		}

	if (status_a == 1)
		{
		digitalWrite(LED_A, HIGH);
		}
	else
		{
		digitalWrite(LED_A, LOW);
		}

	if (status_b == 1)
		{
		digitalWrite(LED_B, HIGH);
		}
	else
		{
		digitalWrite(LED_B, LOW);
		}


	delay(50);
	status_a_before = status_a;
	status_b_before = status_b;

  	count++;
}

// ---------------------------------------------------------------------
void display_proc(int count,int count_a,int count_b)
{
	Serial.print("count = " + String(count) + "  ");
	Serial.print("A = ");
	Serial.print(count_a);
	Serial.print("  B = ");
	Serial.println(count_b);
}

// ---------------------------------------------------------------------
```

## 実行時の様子

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/203031f9-0164-8523-ac19-9d6cfa1a61af.png)
JSで進数変換

お手軽な進数変換ツールが無かったので自作しました。
該当の進数に数値を入力すれば、それ以外の進数を自動計算してくれます。例えば、2進数に数値を入力すれば、自動で8、10、16進数に変換して表示されます。
数値を入力するだけで変換してくれるので、簡単です。
```html
<div class="container">
    <p>2進数<input id="binary" type="text" data-base-number="2" oninput="numberInput(this);"></p>
    <p>8進数<input id="octal" type="text" data-base-number="8" oninput="numberInput(this);"></p>
    <p>10進数<input id="decimal" type="text" data-base-number="10" oninput="numberInput(this);"></p>
    <p>16進数<input id="hexadecimal" type="text" data-base-number="16" oninput="numberInput(this);"></p>
</div>

<script>
const binaryId = document.querySelector('#binary')
const octalId = document.querySelector('#octal')
const decimalId = document.querySelector('#decimal')
const hexadecimalId = document.querySelector('#hexadecimal')

function numberInput(input) {
  if (input.value === 'NaN' || input.value === '') {
    input.value = 0
  }

  binaryId.value = parseInt(input.value, input.dataset.baseNumber).toString(2)
  octalId.value = parseInt(input.value, input.dataset.baseNumber).toString(8)
  decimalId.value = parseInt(input.value, input.dataset.baseNumber)
  hexadecimalId.value = parseInt(input.value, input.dataset.baseNumber).toString(16)

  switch (input) {
    case binary:
      input.value = input.value.replace(/[^0-1]/g, '')
      break
    case octal:
      input.value = input.value.replace(/[^0-8]/g, '')
      break
    case decimal:
      input.value = input.value.replace(/[^0-9]/g, '')
      break
    case hexadecimal:
      input.value = input.value.replace(/[^0-9a-fA-F]/g, '')
      break
  }
}
</script>
```
#### 参考

https://hogehoge.tk/tool/number.html

https://pg.brain-studio.com/00/a-js-decimal-convert.html
ArduinoUnoR4WiFi: ボタンを押したら LED を点灯させる

## ハードの構成

ボタン　A --- PD6
ボタン　B --- PD8
LED A --- PD10
LED B --- PD11

## 結線図
![button_diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/015faa0c-470f-8f9c-0002-3eb5736e1a4d.jpeg)


![button_may29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/57d34f3e-9341-7472-c5ac-48b29b35b8be.jpeg)


## プログラム

```text:button.ino
// ---------------------------------------------------------------------
/*
	button.ino

					May/29/2024

*/
// ---------------------------------------------------------------------
#define BUTTON_A 6
#define BUTTON_B 8
#define LED_A 10
#define LED_B 11

int count = 0;

void setup() {
	pinMode(BUTTON_A, INPUT);
	pinMode(BUTTON_B, INPUT);
	pinMode(LED_A, OUTPUT);
	pinMode(LED_B, OUTPUT);
	Serial.begin(19200);
	delay(1000);
	Serial.println("*** start ***");
	delay(500);

	led_proc();
}

// ---------------------------------------------------------------------
void led_proc() {
	for (int it =0; it<5; it++)
		{
		digitalWrite(LED_A, HIGH);
		digitalWrite(LED_B, HIGH);
		delay(500);

		digitalWrite(LED_A, LOW);
		digitalWrite(LED_B, LOW);
		delay(500);
		}
}

// ---------------------------------------------------------------------
void loop() {
	int status_a = digitalRead(BUTTON_A);
	int status_b = digitalRead(BUTTON_B);

	if ((count % 20) == 0)
		{
		display_proc(count,status_a,status_b);
		}

	if (status_a == 1)
		{
		digitalWrite(LED_A, HIGH);
		}
	else
		{
		digitalWrite(LED_A, LOW);
		}

	if (status_b == 1)
		{
		digitalWrite(LED_B, HIGH);
		}
	else
		{
		digitalWrite(LED_B, LOW);
		}


	delay(50);


  	count++;
}

// ---------------------------------------------------------------------
void display_proc(int count,int status_a,int status_b)
{
	Serial.print("count = " + String(count) + "\t");
	Serial.print(String(BUTTON_A) + " = ");
	Serial.print(status_a);
	Serial.print("\t" + String(BUTTON_B) + " = ");
	Serial.println(status_b);
}

// ---------------------------------------------------------------------
```
Jetpack composeで拡大鏡を実装する

# 初めに
今回はJetpackComposeを使って拡大鏡を実装していきます
### 本文
やること自体は至極単純で下記をModifierに設定するのみです
```kotlin
var offset by remember {
            mutableStateOf(Offset.Zero)
        }
Modifier.magnifier(sourceCenter = {
                offset
            }
```
ただし、`@OptIn(ExperimentalFoundationApi::class)`アノテーションを付けないといけないので注意してください

### さいごに
今回はJetpackComposeでの拡大鏡実装方法を紹介しました
どなたかのお役に立てれば幸いです
Lookupの注意点(searchheadとindexerが別ノードの場合)

`Splunk Version 9.2.1`

割とハマりやすい点かなと思います。
SearchHeadとIndexerが別ノードの場合のLookupファイルの扱いについて。
*****
### Splunk内部動作
SPLで | inputlookup, | lookup を実行する場合、
何も指定しなければ「```Indexerに保存されたLookupファイル```」を検索している。

LookupファイルはSearchHead上に作成/保存されるが、
1分毎に圧縮されてIndexerにコピーされ、サーチではこれを読み込んでいる。

　（同期の実体ファイルどこか忘れました。知っている人いたら教えてください）
*****
### 問題点①
　1分毎に更新するようなリアルタイムのLookupを運用すると、
 最新のLookupが読み込まれない場合がある。

<実際にあった事象>
  ・古い情報が紐づく
  ・タイミングによってlookupの紐づけが出来ずNullになる。

### 解決策①
　リアルタイムに近いLookup運用をする際は、local=t オプションを付ける。
 これにより、IndexerではなくSearch Head上の最新Lookupを参照するようになる。

 そもそもLookupではなく、Summary Indexに格納しなおすと良いかも。
 （| collectコマンド stash形式ならば、ライセンスにカウントされない）

*****
### 問題点②
　一部のユーザが巨大なLookupファイル(4GByteとか)を保存すると、
 他にも同期されているtransforms.conf 等が機能しなくなる事がある。
今までできていたのに、何故かフィールド抽出されなくなるとか。
 システム全体に影響を及ぼすので、こちらの方も割と重要。

### 解決策②
　Lookupファイルの(Indexerへの)同期上限を設定する。
 デフォルトだと無効なので注意。

<設定箇所>
$SPLUNK_HOME/etc/system/local/
```ruby
excludeReplicatedLookupSize = [integer]
※デフォルトは 0(無効)
```

Splunk公式ドキュメントは以下URLから。

 https://docs.splunk.com/Documentation/ITSI/4.18.1/Configure/distsearch.conf
 
# 記事終了
Windowsにおけるフォルダ・ファイルへのアクセス権の項目

業務でWindowsにおけるフォルダ・ファイルのアクセス権に触れる機会があったため、種類ごとに何が実行できるのか、改めて調べて整理してみました。

## **権限の種類**
アクセス権限の話の前に、Windowsのアクセス権限では、「基本のアクセス許可」と「高度なアクセス許可」の2種類の設定が存在しています。今回は「基本のアクセス許可」について、整理しています。

アクセス権限は7種類あります。

- フル コントロール
- 変更
- 読み取りと実行
- フォルダーの内容の一覧表示
- 読み取り
- 書き込み
- 特殊なアクセス許可

----
各権限ごとにできること、できないことを表にまとめます。

<table>
	<tbody>
		<tr>
			<th rowspan="2">アクセス権限の種類</th>
			<th colspan="7">フォルダ/ファイルへの行動</th>
		</tr>
		<tr>
			<th>ファイルの読み取り	</th>
			<th>ファイルやフォルダの一覧表示</th>
			<th>ファイルの作成と上書き</th>
			<th>ファイルの実行</th>
			<th>ファイルの削除</th>
			<th>フォルダの作成と削除</th>
			<th>ファイルやフォルダに対するアクセス権設定</th>
		</tr>
		<tr>
			<th>フル コントロール</th>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
		</tr>
		<tr>
			<th>変更</th>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>×</td>
		</tr>
		<tr>
			<th>書き込み</th>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>〇</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
		</tr>
		<tr>
			<th>読み取り</th>
			<td>〇</td>
			<td>〇</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
		</tr>
		<tr>
			<th>読み取りと実行</th>
			<td>〇</td>
			<td>〇</td>
			<td>×</td>
			<td>〇</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
		</tr>
		<tr>
			<th>フォルダーの内容の一覧表示</th>
			<td>-</td>
			<td>〇</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
			<td>×</td>
		</tr>
	</tbody>
</table>


## まとめ
「フルコントロール」と「変更」では、「ファイルやフォルダに対するアクセス権設定」に違いがありました。
これは、「フルコントロール」ではアクセス権の設定が可能ですが、「変更」では、ファイルやフォルダに対してのアクセス権を勝手に変更させることは不可能であり、制限を設けていることになります。

また、基本のアクセス許可にはもう一つ、「特殊なアクセス許可」というアクセス権限がありますが、これは高度なアクセス許可を含めた組み合わせとなるため、今回は記載を省いています。


そのほかの権限の権限は、種類ごとに読んで字のごとく、各権限で何が実行できるか、わかりやすい記載であることがわかりました。
Javaで「論理値リテラル」の動作を確認してみた

# 概要

Javaで「論理値リテラル」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/start/num/index10.html

# 実装

以下のファイルを作成しました。
```JSample10_1.java
class JSample10_1{
  public static void main(String[] args){
    System.out.println(10 > 7);
    System.out.println(5 == 4);
  }
}
```

以下のコマンドを実行しました。
```
$ javac JSample10_1.java 
$ java JSample10_1 
true
false
```

# まとめ

何かの役に立てばと。
robloxでassistant その27

# 概要
robloxでassistantやってみた。
練習問題やってみた。

# 練習問題
インタープリタを書け。
１から１０まで、表示せよ。

# 方針
- 俺cpuアセンブラで書く。
- stack machine
- １から１０まで、表示
```
0
set_a
:loop
1
get_a
+
dup
set_a
out
10
get_a
>
if :loop
end

```
set_aは、レジスタaに、セットする。
get_aは、レジスタaから読み込む。
:loopは、ラベル
if :loopは、真なら、ラベル:loopに飛ぶ。
dupは、コピー、複製を作る。
outは、数値表示。
数値は、stackに積む。
+-/*は、加減乗除。
endは、終了。

# サンプルコード

```

local player = game.Players.LocalPlayer
local PlayerGui = player:WaitForChild("PlayerGui")
local gui = PlayerGui:WaitForChild("ScreenGui")


gui.TextButton.MouseButton1Click:Connect(function()
	local src = gui.TextBox.Text
	local stack = {}
	function stack.push(item)
		table.insert(stack, item) 
	end
	function stack.pop()
		return table.remove(stack)
	end
	local l
	local t1
	local t2
	local v
	local a = 0
	local s = 0
	local h = {}
	for l in string.gmatch(src, "[^\n]+") do 
		--print(l)
		s += 1
		table.insert(h, l)
	end
	local pc = 1
	local j
	repeat
		l = h[pc]
		--print(l)
		if string.sub(l, 1, 1) == ":" then
			pc += 1
		elseif l == "dup" then
			t1 = stack.pop()
			stack.push(t1)
			stack.push(t1)
			pc += 1
		elseif l == "drop" then
			t1 = stack.pop()
			pc += 1
		elseif l == "set_a" then
			t1 = stack.pop()
			a = t1
			pc += 1
		elseif l == "get_a" then
			stack.push(a)
			pc += 1
		elseif l == "out" then
			t1 = stack.pop()
			print(t1)
			pc += 1
		elseif l == "+" then
			t1 = stack.pop()
			t2 = stack.pop()
			v = t2 + t1
			stack.push(v)
			pc += 1
		elseif l == "-" then
			t1 = stack.pop()
			t2 = stack.pop()
			v = t2 - t1
			stack.push(v)
			pc += 1
		elseif l == "/" then
			t1 = stack.pop()
			t2 = stack.pop()
			v = t2 / t1
			stack.push(v)
			pc += 1
		elseif l == "*" then
			t1 = stack.pop()
			t2 = stack.pop()
			v = t2 * t1
			stack.push(v)
			pc += 1
		elseif l == ">" then
			t1 = tonumber(stack.pop())
			t2 = tonumber(stack.pop())
			if t2 > t1 then
				stack.push(1)
			else
				stack.push(0)
			end
			pc += 1
		elseif l == "end" then
			pc = 200
		elseif string.sub(l, 1, 2) == "if" then
			local p = string.sub(l, 4, 8)
			t1 = tonumber(stack.pop())
			if t1 == 1 then
				for j = 1, s do
					if h[j] == p then
						pc = j
						--print(pc)
					end
				end
				--pc = 3
			else
				pc += 1
			end			
		else
			stack.push(l)
			pc += 1
		end
	until pc > 100
	print("ok")
end)





```

# 実行結果

```

  06:13:22.297  1  -  クライアント - LocalScript:52
  06:13:22.298  2  -  クライアント - LocalScript:52
  06:13:22.298  3  -  クライアント - LocalScript:52
  06:13:22.298  4  -  クライアント - LocalScript:52
  06:13:22.298  5  -  クライアント - LocalScript:52
  06:13:22.298  6  -  クライアント - LocalScript:52
  06:13:22.299  7  -  クライアント - LocalScript:52
  06:13:22.299  8  -  クライアント - LocalScript:52
  06:13:22.299  9  -  クライアント - LocalScript:52
  06:13:22.299  10  -  クライアント - LocalScript:52
  06:13:22.299  ok  -  クライアント - LocalScript:108
```

以上。
ネットワーク初心者が使った参考書・サイト

## 学習前の私のネットワーク理解度
- 基本的な用語（MACアドレス，IPアドレス，ポート番号）を思い出せる
- 各ヘッダにどんな情報が書いてあり，ルーターやスイッチを通るとどこが書き変わるかすらわからない
- ラズパイなどでの単純なネットワーク設定に苦戦していた
- プライベートアドレスって192...なんだっけ？
- DHCPって便利だけど，なんだこれ？調べても意味がわからない
- わからないなりに検索するが，わかりそうでわからない系サイトがヒットして知識にならないで終わっていた
- ネットワークが怖い

## 学習中の現状の理解度
- 基本的なプロトコルでパケットキャプチャした内容の６割を理解できる
- 入門的なネットワーク設定でやるべきことがぼんやりとわかる
- 自宅のルーターをほぼ迷いなく設定できる


## ネットワーク初心者が使った参考書・サイト

1. [3 Minutes Networking](https://www5e.biglobe.ne.jp/aji/3min/)
1. [ネスペの基礎力](https://amzn.asia/d/6WdTDzX)
1. [ネットワークエンジニアとして](https://www.infraexpert.com/)
1. 『マスタリング TCP IP 入門編』
1. 『体験しながら学ぶネットワーク技術入門』

## 3 Minutes Networking
おすすめ度 高

一回 7 分程度（表題通りの３分は無理でした）で読み終わる愉快で簡潔な説明を通じて，基本的な物理層からアプリケーション層までを通して勉強できました．

パケットレベルの説明に対して感じていた恐怖感やとっつきにくさが解消されました．

動画部分が再生されないなど一部の図が読めないため，[書籍](https://amzn.asia/d/2ymHr6H) を買うことをおすすめします！

## ネスペの基礎力
おすすめ度 中

問題を解かないと理解の確認ができないと思い，ためしにこの本で演習しました．
ルーティング中のパケットの中身の書き換えについての問題などが丁寧に解説されており，基本の確認にちょうどよかったです．

しかし，ネットワークスペシャリストの過去問や用語は難しく，演習の度に次のサイト（ネットワークエンジニアとして）などで説明を検索しました．

## ネットワークエンジニアとして
おすすめ度 高

ネットワーク関連の用語の説明が簡潔かつ真面目になされており，個人的に信頼しています．

ネットワークの用語を日本語で検索すると，まともなサイトが見つかりづらく，このサイトに救われました．

## マスタリング TCP IP 入門編
おすすめ度 最高

物理本は数年前に購入済みでしたが，デカさと厚みに圧倒されて読み進められなかったので，kindleで読むことにしました．電車通学時などに持ち運べる利点があります．

解説の日本語に澱みがなく，素晴らしい本だと感じました．

前半の一部は，ほぼ同じ内容を例えを使って丁寧に説明されるため，飛ばさずに通読すると若干くどかったです．

## 体験しながら学ぶネットワーク技術入門
おすすめ度 高

プロトコルについての説明は体験のために必要十分に抑えられています．マスタリング TCP IP 入門編などで得た知識をパケットキャプチャで確認する素晴らしい機会となりました．

M2 Mac でも簡単に動作できました．

## 今後の目標
- 『マスタリング TCP IP 入門編』や『体験しながら学ぶネットワーク技術入門』の内容をそらで説明できるようにする
- ネットワークのボランティアやアルバイトに参加する
- クラウドでのインフラ設計に活かす
Jestでテスト実行時に「Unexpected token...」のエラーが出る

## 初めに
元医療職 → WEB制作者がReact開発で詰まった箇所を日々発信しています！
現在はJISOUというコミュニティに所属してReact開発を学習中。
簡単なプロジェクト作成後にテストを実行したところ、「Unexpected token (16:4)...」というエラーが返ってきました。
コードを見返しても誤っているところはなかったのですが、簡単な落とし穴に引っかかっていたためまとめます。

## 今回のゴール
App.tsxファイル内で`date-testid="table"`の属性を持つ要素があることを、テストによって確認したい。
かなりシンプルなテストです。

## 今回の問題点
コードは正しいのですが、`npm run test`を実行しても上記のエラーが返ってきます。
このエラーは**TypeScriptの型注釈が、JavaScriptファイルとして誤って解釈されている時に出るエラー**だそうです（おそらく他にもこのエラーが表示される原因はありますが、今回はTypescriptとして認識されていないことが原因です）。

今回のエラーの原因は「jest.config.js」ファイルがルートディレクトリ直下ではなく、srcフォルダ内に格納されていました。

## 解決策
この問題の解決は「jest.config.js」ファイルをルートディレクトリ直下に移動することで解決できました。
基本的にプロジェクトの設定を記述するようなファイルは、ルートディレクトリ直下と覚えてよさそうです。

## 終わりに
毎回テストのエラーで悩まされますが、今回はとても初歩的なミスでした。
ですが初歩的なミスであるほど、意識の外にあって気付けないので今回このミスをしたことで次からは意識内に入ってくるかと思います！
これからもどんどんミスして経験値増やしていきます！
ECMAScript 第2部 Conformance【JavaScript】

# はじめに

https://tc39.es/ecma262/multipage/conformance.html#sec-conformance

ECMAScript 第2部 Conformance の概要と補足についてまとめます。

「Conformance」は直訳すると「準拠」です。
「ECMAScript準拠の実装における注意事項」が記載されています。

# ECMAScript準拠の実装における注意事項

- ECMAScriptに記載されている以下のすべてを提供し、サポートする必要がある
  - 型
  - 値
  - オブジェクト
  - プロパティ
  - 関数
  - プログラム構文
  - セマンティクス（コードの意味）
---
- 以下の国際標準の最新バージョンに準拠してソーステキスト入力を解釈する必要がある
  - Unicode Standard
  - ISO / IEC 10646
---
- APIを提供する場合は、最新の ECMA-402 仕様に準拠して実装する必要がある
  ※ ECMA-402 は、ECMAScript 言語仕様を定義した ECMA-262 を補完する、APIについて定義されたドキュメントです

https://402.ecma-international.org/8.0/

---
- ECMAScriptに記載されていない、追加の以下の機能を提供する場合がある
  - 型
  - 値
  - オブジェクト
  - プロパティ
    - 特に、記載のあるオブジェクトに対し、記載のないプロパティと値を提供する場合がある
  - 関数
---
- ECMAScriptに記載されていない、追加の以下の機能をサポートする場合がある
  - プログラム構文
    - 特に、12.7.2 に記載されている「future reserved words」を利用するプログラム構文をサポートする場合がある
  - 正規表現

https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-keywords-and-reserved-words

---
- 17.1 で禁止された拡張機能を実装してはならない

https://tc39.es/ecma262/multipage/error-handling-and-language-extensions.html#sec-forbidden-extensions

---
- ECMAScriptで定義された機能を、定義されていない仕様で再定義することはできない
  ※ 訳の正確性に疑問[^1]
---
[^1]: "A conforming implementation of ECMAScript must not redefine any facilities that are not implementation-defined, implementation-approximated, or host-defined."

- 「Normative Optional として定義されているもの」を実装するかどうかは選択できる。ただし、これを実装する場合は、Normative Optional に定義された動作すべてを実装する必要がある
---
- 「Legacy として定義されているもの」は非推奨の機能だが後方互換性のため実装しなくてはならない。「Normative Optional」としても定義されている場合は、その限りではない
---
# NORMATIVE OPTIONAL / LEGACY について

https://zenn.dev/qnighy/articles/550be3a1f42707#legacy%E3%83%95%E3%83%A9%E3%82%B0%E3%81%A8normative-optional%E3%83%95%E3%83%A9%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

こちらの記事が大変参考になりました。

> |                            | Webブラウザ       | Webブラウザ以外の処理系 | JavaScriptプログラマ |
> | -------------------------- | ------------- | ------------- | --------------- |
> | NORMATIVE OPTIONAL         | 実装しなくてよい      | 実装しなくてよい      |                 |
> | LEGACY                     | 実装する**必要がある** | 実装する**必要がある** | 使うべきではない        |
> | Annex B                    | 実装する**必要がある** | 実装しなくてよい      | 使うべきではない        |
> | NORMATIVE OPTIONAL, LEGACY | 実装しなくてよい      | 実装しなくてよい      | 使うべきではない        |

NORMATIVE OPTIONAL の使用ケースについて
> 現在は WeakRef.prototype.constructor が唯一の利用例になっています。

とのことでした。
# おわりに
文字コードやAPIについても言及されているのが面白かったです。

次は何を書こうかしら・・・
パケット解析 wireshark(21)

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

# パケット解析
https://qiita.com/tomoyk/items/31fff62a29cb8e8813cf

https://qiita.com/7GHz/items/9694e0e33b491cc50531

https://qiita.com/y-vectorfield/items/f8fdaea60bf571b8ad49

https://qiita.com/hoglet/items/ca3012c0252f385ebab9

https://qiita.com/salmonosushi/items/f97832b3395f2b6d7e9f

https://qiita.com/k1ch1/items/f79969ff2441d447af67

https://qiita.com/m_mizutani/items/ba0388827ad93383b86e

https://qiita.com/takesyhi/items/9ef78f0dc3efa2f89e83

https://qiita.com/LorseKudos/items/05d23fbd21f9cf16eb72

https://qiita.com/OldMountain/items/b34f9de616ba4ea35e36

https://qiita.com/KoKoKouki/items/f81093734e83d3b37a71

https://qiita.com/samohan/items/f47d285e6d85502745cb

https://qiita.com/samohan/items/ab5545113cd17928e652

https://qiita.com/ChujoHiroto/items/efee89fdb639433456f7

https://qiita.com/ChujoHiroto/items/68c2115ffa3ecbd987f2

https://qiita.com/sicksixrock66/items/fff3db1a31fb92f321da

https://qiita.com/FS-git/items/3bdb8c92c7c278bfde76

https://qiita.com/s_wani/items/63637ee7bb0150de11e0

https://qiita.com/sakue_103/items/bfdd081b88a17d75dbd0

https://qiita.com/KeeToblog/items/7220623d0f312cf30533

https://qiita.com/shirochan/items/cdb244b12cf5d08d4766

https://qiita.com/hmy2001/items/2c9c06ef7d0c573c0a38

https://qiita.com/kagirohi/items/deb9b3534a13fccbd7fe

https://qiita.com/RCA3610/items/5f6e8238a8e9dbb89a11

https://qiita.com/suwa3/items/bcada6902ffa6b162681

# 自己参照
Wiresharkでできること。無線網（Wi-Fi）空中線(antenna)(110)
https://qiita.com/kaizen_nagoya/items/90207b831d4e7657c05a
https://qiita.com/kaizen_nagoya/items/517411b42fc5ceabd581

通信記事１００
https://qiita.com/kaizen_nagoya/items/1d67de5e1cd207b05ef7

Ethernet 記事一覧　Ethernet(0)
https://qiita.com/kaizen_nagoya/items/88d35e99f74aefc98794

Wireshark 一覧 wireshark(0)、Ethernet(48) 
https://qiita.com/kaizen_nagoya/items/fbed841f61875c4731d0

線網（Wi-Fi）空中線(antenna)(0) 記事一覧(118/300目標)
https://qiita.com/kaizen_nagoya/items/5e5464ac2b24bd4cd001

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

Error一覧 error(0)
https://qiita.com/kaizen_nagoya/items/48b6cbc8d68eae2c42b8

官公庁・学校・公的団体（NPOを含む）システムの課題、官（０）
https://qiita.com/kaizen_nagoya/items/04ee6eaf7ec13d3af4c3

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

自動制御、制御工学一覧（０）
https://qiita.com/kaizen_nagoya/items/7767a4e19a6ae1479e6b

Rust(0) 一覧　
https://qiita.com/kaizen_nagoya/items/5e8bb080ba6ca0281927

小川清最終講義、小川清最終講義（再）計画, Ethernet(100) 英語(100) 安全(100)
https://qiita.com/kaizen_nagoya/items/e2df642e3951e35e6a53

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
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 add URL　20240510
### 最後までおよみいただきありがとう4ざいました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
【令和最新版】VSCodeでMATLAB実行

初投稿です。
2024年3月にVSCodeの拡張機能「MATLAB extension for Visual Studio Code」のバージョン1.2.0が登場し、MATLABの実行ファイルをVSCode上で編集、実行することが容易にできるようになりました。そこで今回はその環境構築を簡単に説明したいと思います。

# 参考にした記事
https://blogs.mathworks.com/japan-community/2023/04/28/do-you-use-visual-studio-code-matlab-is-now-there-too-jp/?from=jp

https://github.com/mathworks/MATLAB-extension-for-vscode/tree/main

macやLinuxをご利用の方は上記のリポジトリを参照してください。導入の手順自体はWindowsと変わりませんが、パスの通し方に注意してください。

# やりたいこと
VSCode上でMATLABのコードを実行することです。

# 対象
**VSCodeとR2021a以降のMATLABをインストール済みのWindowsユーザ**を対象とします。未導入のものがあれば、事前にインストールを済ませてください。また、VSCodeは「Japanese Language Pack for Visual Studio Code」により日本語化しています。日本語化をしていない場合は、手元の環境の、対応する選択肢を選ぶようにしてください。

# 導入の手順
### 大まかな流れ
1. 拡張機能のインストール
1. MATLABのインストールパスの設定
1. 実行テスト

### 1. 拡張機能のインストール
まずは拡張機能をインストールします。

以下の画像のように、VSCodeの拡張機能の検索欄に「MATLAB」と入力しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3790136/b6187116-1386-f0bc-8fe4-f9d9689a16e1.png)

ヒットした拡張機能のうち、最上位にある「MATLAB」をインストールしてください。

### 2. MATLABのインストールパスの設定
次に、RUNボタンで実行するためにパスを指定します。

先にインストールした拡張機能を開き、歯車マークをクリックしてください。そこに表示されている「拡張機能の設定」を押下することで設定画面に移動できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3790136/9e2e33dc-2384-60bc-e720-59bb15f250ad.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3790136/dc000b62-5b05-3e85-73fb-45c80aa58166.png)


「MATLAB: Install Path」の項目を編集します。
MATLABはデフォルトでProgram Files下に保存されており、その場合は
```
C:\Program Files\MATLAB\(バージョン名、環境ごとに異なる)
```
などと記入してください（エクスプローラで```Program Files```に含まれる```MATLAB```フォルダを開くと```R2021a```と同名または似た名前のフォルダがあるので、それを右クリックしてパスをコピーし、貼り付けてダブルクオートを消してください）。


任意の場所に保存している場合は先と同様に、バージョン名のフォルダまで指定してください。

これで実行の準備は完了です。

### 3. 実行テスト
適切に環境を構築できたことを確認します。

適当な場所、例えばドキュメントに```matlab_test```フォルダを作成し、それをVSCodeで開いてください。そこに```test.m```ファイルを生成し、以下のコードを貼り付けて保存してください。
``` MATLAB
x = 1;
y = 2;
z = [0, 1, 2]

x + y
plot(z);
```
プログラムを実行する際は、はじめに右上の実行ボタンのすぐ右のトグルを開き、「MATLAB: Run File」を選択してください。以降は実行ボタンを押すだけでプログラムを実行できます。

新規生成したフォルダでの初回実行時に「File is not found in the current folder or on the MATLAB path.」というメッセージが表示されますが、「Add to Pass」を選択すれば実行できます。

プログラムを実行し、次のような出力が得られたら成功です。実行できなかった場合は、手順に誤りがないかどうかを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3790136/0b9d298c-c87c-78a1-d6f7-8b0e056219c5.png)

# まとめ
今回はMATLABをVSCodeで実行する方法を紹介しました。私はこの拡張機能とGitHub Copilot拡張機能を併用し、効率の良いコーディングを実現しています。皆さまが快適なコーディングを行えるようになることを願います。
AWSでLlama3を使えるようにする

# 1. 初めに
誰しもLlama3を使ってAWSでChatbotを作りたいなと三日に一回は思っているはず。
**Llama3**を**Groq API**経由で使えるようにしてみたので備忘録も兼ねて書く。

**Chat GPTでいいやんと思ったそこのあなた**
LLama 3はChatGPTよりも数倍早く返ってくるかつ、Llama3の400bモデルが来た時にすぐ乗り換えられるように備えておくことは大切！なので、やっておいて損はないかなと思います。

# 2. 参考にしたもの
[AWS Lambda(Python)からOpenAIのGPT4のAPIを呼び出してみた](https://qiita.com/nabata/items/903a2ebff8e44516598e)
とりあえず類似なものとして、ChatGPTをAWS Lambdaから呼び出すものを参考にした。感謝！
GroqのAPI Documentを見てもわかるが大体ChatGPT構造と同じなので、参考にしやすいかなと思った。

# 3. レイヤーの設定
まず、AWSのLambdaにgroqのパッケージを入れる必要があるため、そのパッケージの準備をする。groq.zipというファイルを作って、Lambdaのレイヤーにぶち込む。

**1. groq.zipの作り方**
このコマンドをターミナルで実行する。すると実行しているディレクトリーに`groq.zip`が作成される。
```
pip install groq
python -m pip install -t ./python fastapi==0.99.0 groq
zip -r groq.zip ./python
```
**2. groq.zipをレイヤーに追加**
AWS Lambdaを開き、左パネルからレイヤーを選択
<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788759/d6099c5c-1d94-d2f2-462c-07c730a245ee.png">
その後、右にある黄色いボタンのレイヤーを作成を選択すると下記の写真のようになる。

<img width="500px" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788759/387ff8f9-951e-d1fc-80d4-eca63f6cef52.png">

.zipファイルをアップロードから先ほど作成した`groq.zip`を選択しアップロード
名前はgroqと選択し、互換性のあるランタイムは適切に選択する。

その後作成ボタンを押すと、groqのレイヤーが追加される。
これで準備は完了

# 4. Lambda関数
あとはLambda関数を書く。以下のLambda関数を使う。openaiのAPIを使っている人ならほぼ一緒であることがわかると思ふ。

```Python lambda_handler.py
import groq
import json
import os
from groq import Groq
groq.api_key = os.environ['GROQ_API_KEY']  # 環境変数から取得

def lambda_handler(event, context):
    try:
        client = Groq()
        completion = client.chat.completions.create(
            model="Llama3-70b-8192",
            messages=event
        )
    except Exception as e:
        raise e
    
    return {
        'statusCode': 200,
        'body': json.dumps(completion.choices[0].message.content)
    }
```
イベントJSONは以下を想定している。
``` JSON event.json
[
	{
		"role": "user",
		"content":"are you groq api?"
	}
]
```
単純にeventのcontentでllamaに聞きたいことを書いて、それに対する回答が返ってくるだけの簡単なコード。

# 5. API KEY
忘れてはいけないのが、api keiを環境変数に書いておくことである。
先ほどのままでは動かない。事前にgroq API keyを取得しておく必要がある。
[Groq API Key](https://console.groq.com/keys)ここから発行できるので発行し、コピーを取る。
設定>環境変数を選択し、環境変数の以下のように追加をする。

| **キー** | **値**       |
|------------|-------------------|
| `GROQ_API_KEY` |`コピーしたAPI Key` |

これでテストをしてみたら動くはずである。

# 6. 最後に
AWSって便利ですね。簡単にOpenAIだけでなくGroqも使えるようになった。
今後の新しいLLMが出てきてもすぐに活用できるように備えておくことは必要だなと実感しました。400bが結構楽しみですね。

そんなことは置いといて、なんでLlamaって名前にしたんだろう。Alpacaじゃダメだったんかな。
ではまた次回！
i18nextをマルチインスタンスで利用する

# 通常の使用方法だと多言語対応のみにしか使えない
本来のi18nextの使い方とは異なりますが、特定環境の場合にのみいくつかの文言を変更する必要があり、その実装のためにi18nextを利用しました。

ただそのまま使ってしまうとシングルインスタンスゆえ、多言語対応か文言変更のどちらかにしか使えなくなってしまいます。

そこで今回はマルチインスタンスを用いて、i18nextを文言変更と多言語対応の両方に使えるよう実装してみました。

# 前提環境
- 18next@23.11.3
- react-i18next@14.1.1

# 実際のコード

### 多言語対応用のインスタンス
```ts:src/i18next/language/index.ts
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

import translationJA from './translations/ja'
import translationEN from './translations/en'

const i18nInstance = i18n.createInstance()

i18nInstance.use(initReactI18next).init({
  resources: {
    ja: { translation: translationJA },
    en: { translation: translationEN },
  },
  lng: 'ja',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
})

export default i18nInstance
```


### 文言変更用のインスタンス
```ts:src/i18next/label/index.ts
import * as i18n from 'i18next'
import { TFunction } from 'i18next'
import { initReactI18next, useTranslation } from 'react-i18next'

import translationDefault from './translations/default'
import translationLabel1 from './translations/label1'

const i18nInstance = i18n.createInstance()

i18nInstance.use(initReactI18next).init({
  resources: {
    default: { translation: translationDefault },
    label1: { translation: translationLabel1 },
  },
  lng: 'default',
  fallbackLng: 'default',
  interpolation: {
    escapeValue: false,
  },
})

export default i18nInstance

export function useLabelTranslation() {
  const { t: labelTranslate } = useTranslation(undefined, { i18n: i18nInstance })
  return { labelTranslate }
}
```

### 読み込み順序調整用
```ts:src/i18next/index.ts
import './label'
import './language'  // useTranslationの際にlanguageが優先されるよう、2番目に読み込む
```

# 使い方
`src/i18next/index.ts` をindex.tsxでimportした上で、以下のように使用します。

### 多言語対応用途での使用
```tsx:src/components/ComponentA.tsx
import { useTranslation } from 'react-i18next'

export default () => {
  // languageのi18nextを2番目に読み込んでいるため、デフォルトでlanguageの設定が適用されている
  const { t } = useTranslation()
  return (
    <div>{t('lang.hoge')}</div>
  )
}
```

### 文言変更用途での使用
```tsx:src/components/ComponentB.tsx
import { useLabelTranslation } from '~/i18next/label'

export default () => {
  // useLabelTranslation内で文言変更用のインスタンスを指定しているため、文言変更用の設定が適用されている
  const { labelTranslate } = useLabelTranslation()
  return (
    <div>{labelTranslate('label.hoge')}</div>
  )
}
```

# 参考サイト
https://github.com/i18next/react-i18next/issues/726#issuecomment-461911060
Next.jsでgetServerSidePropsの実行を初回のみにする

Next.jsでgetServerSidePropsを実装した際、想定とは違うタイミングで実行され問題が発生したため、初回アクセス時のみに実行されるよう実装を進めました。

# 前提環境
- next.js@14.0.3
- Storeとしてreduxを利用
    - APIで取得したデータはReduxに溜めて再利用
- React + 自前SSRで構築された環境のNext.js移行のため、Reduxの廃止などはすぐにはできない

# getServerSidePropsはページ遷移時に必ず呼ばれる

Next.jsでPagesRouter＋getServerSicePropsを利用する場合、以下のように実行されます。

- 各ページに定義したgetServerSidePropsがページリクエスト時に呼ばれる
- そこでAPIリクエスト等でデータを取得
- データをpropsとして返却し、ページの描画を行う


ただしこのgetServerSidePropsは初回アクセスやリロード時にのみ実行されるものではなく、その後ページ内リンクを踏んでSPAで遷移した際にも毎回実行されてしまいます。

当初の想定としては初回アクセスにのみ実行される想定だったためgetServerSidePropsにAPIリクエスト＋Redux格納の処理を記述していたのですが、毎回実行されてしまえばその都度APIリクエストが走ってしまい無駄な処理になってしまいます。

そこで以下のように実装し、初回のみにAPIリクエストが実行されるようにしました。


```tsx
export const getServerSideProps: GetServerSideProps = async (context) => {
  const isFirstServerCall = context.req?.url?.indexOf('/_next/data/') === -1
  
  if (isFirstServerCall) {
    await dispatch(fetchData())
  }
  
  return return {
    // フロントのReduxStoreからデータ取得して描画するため空で返す
    props: {}
  }
}
```

# 参考ページ
https://github.com/vercel/next.js/discussions/32243#discussioncomment-6110937
OSI参照モデルの学習方法

# 本記事の目的
* OSI参照モデルについて最短で理解できるサイトの備忘録
# 背景
* 実務経験を積めば積むほど理解が深くなるため、基礎から再度学習している。おそらく今後も学習しなおす。その際にどのサイトを見たっけな？と探す手間を省きたいので、備忘録を付けることにした。と同時に、同様の内容を学習する人が、時間を効率的に使えればと思い、筆をとった。
（注）時代が進むにつれ情報も古くなるので、最新の記事も確認するようにお願いします。なるべく更新しますが。
# OSI参照モデルの学習方法
### OSI参照モデルの概要を知りたい！
#### 参照サイト
* [わわわIT用語集_OSI参照モデル](https://wa3.i-3-i.info/word1783.html)
### OSI参照モデルとその詳細を基礎から超分かりやすく知りたい！
#### 参照サイト
* [Zenn_【超図解】OSI参照モデルの役割とプロトコル一覧を丁寧に見ていく_猿喰 洋一様](https://zenn.dev/itpassport/articles/03bd090fa135ba)
#### 疑問
##### データリンク層
Q.  イーサネットとトークンリングの使い分けは？どんな時にイーサネットを使って、どんな時にトークンリングを使うの？
A. [TECH+_LANに見るEthernetとトークンリング](https://news.mynavi.jp/techplus/article/architecture-291/)
現代は、イーサネットが主流。ムーアの法則でトランジスタの値段が下がり、スイッチングハブなどが安価に出回るようになったため。
MySQL テーブルごと全部削除

以下のクエリで可能

流れ
1. テーブル名を「, 」区切りで取得
1. テーブル削除のクエリを作成
1. 実行

```sql
-- 全てのテーブル名を取得する
SET GROUP_CONCAT_MAX_LEN=32768; -- GROUP_CONCATの長さ制限を設定
SELECT GROUP_CONCAT(table_name SEPARATOR ', ') AS tables_to_drop
FROM information_schema.tables
WHERE table_schema = 'データベース名';

-- 取得したテーブル名を使用して全てのテーブルを削除する
SET @tables_to_drop = (
    SELECT GROUP_CONCAT(table_name SEPARATOR ', ')
    FROM information_schema.tables
    WHERE table_schema = 'データベース名'
);

SET @drop_query = CONCAT('DROP TABLE IF EXISTS ', @tables_to_drop, ';');

-- テーブルを削除するクエリを実行する
PREPARE stmt FROM @drop_query;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
```
DI(Dependency Injection)について粗々に理解していく

## はじめに
自社開発のエンジニアをやっているものです。  
普段バックエンドではspringbootを使っているのですが、初めはDIの仕組みやメリットに対する理解が定着しなく、DIに関する実装は通例的な感覚で書いていました。  
それから1年間経験した結果、ある程度理解できたと思うのでアウトプットしてより理解度を高めていきたいと考えました。  
## DIとは
DIはあるクラスからみて依存するであろうクラスの切り替えを容易にする機能を持っていると考えています。
上記で表現した「依存」について説明します。
### プログラムにおける依存とは
以下のクラスがあるとします。(細かい設計云々の不備は許容してください><)  
- UserService(ユーザの情報に関するビジネスロジックを実施してくれる)
``` java
public class UserService{
  UserRepository userRepository = new UserRepository();
  // UserRepositoryUnitTest userRepository = new UserRepositoryUnitTest(); *1

  List<UserResource> fetchUser(UserId userId){
    // ユーザ情報を取得、整形して返すメソッドや整形、登録するメソッドがある
  }
} 
```
- UserRepository(ユーザに関する情報のCRUD処理を実施してくれる)
``` java
public class UserRepository{
  // DBにアクセスしてユーザ情報のテーブルを操作するメソッドがある
} 
```
- UserRepositoryUnitTest(呼ぶ側の単体テストを実施するためのクラス)
``` java
public class UserRepositoryUnitTest{
  // UserRepositoryと同じメソッドを持っているがそれぞれ単に固定値を返す処理になっている
} 
```

実運用ではもちろんUserRepositoryを使用したいが、UserServiceの単体テストを行いたいときはUserRepositoryUnitTestを使用したい。そのような切り替えをする際にはUserServiceの*1の部分のコメントを適用してUserRepositoryの生成をコメントアウトにする必要があると考えられます。  
この場合はUserServiceはUserRepositoryに対して「依存している」と言えます。
### クラスの生成処理を実装した場合のデメリット
UserRepositoryを呼ぶクラスがuserServiceのみであると想像しにくいかもしれないのですが、仮に呼ぶクラスが50個とかになると切り替えが非常に面倒になることが考えられます。  
上記は単体テスト用のクラスで例えましたが、DBがmysqlに変わるためUserRepositoryMySqlを作成してリファクタリングをする必要があった場合に全ての呼ぶクラス内の生成処理を変えないといけないことも負担＆リファクタ漏れ等のリスクがあり保守性に欠けると考えられます。

## 依存するクラスに対するDIのアプローチ
springのDI機能を活用すると、状況に応じて適切な具象クラスを割り当ててくれます。  
その結果依存するであろうクラスの切り替えが容易に実施することができます。  
DIを活用するための詳しい手順は割愛しますが、ざっくり理解のための例を示します。

### DI機能の実装例
先ほどの例を少し変更しました。
- UserService(ユーザの情報に関するビジネスロジックを実施してくれる)
``` java
@Service
public class UserService{
  // 先ほどと違うところ始点
  private UserRepository userRepository
  @Autowired // *1
  public UserService(UserRepository userRepository){
    this.userRepository = userRepository;
  }
  // 先ほどと違うところ終点
  List<UserResource> fetchUser(UserId userId){
    // ユーザ情報を取得、整形して返すメソッドや整形、登録するメソッドがある
  }
} 
```
- UserRepository(ユーザ情報のリポジトリのインターフェース)
``` java
public interface UserRepository{
  // DBにアクセスしてユーザ情報のテーブルを操作するメソッドがある
} 
```
- UserRepository(実運用で使いたい)
``` java
@Repository
@Profile("Production")
public class UserRepositoryImpl implements UserRepository{
  // DBにアクセスしてユーザ情報のテーブルを操作するメソッドがある
} 
```
- UserRepositoryUnitTest(呼ぶクラスの単体テストで使いたい)
``` java
@Repository
@Profile("Test")
public class UserRepositoryUnitTest implements UserRepository{
  // UserRepositoryと同じメソッドを持っているがそれぞれ単に固定値を返す処理になっている
} 
```
### ざっくり解説
以下の手順で修正
- UserRepositoryをインターフェースで定義をして実運用、テスト用の具象クラスはインターフェースを継承して定義
- 呼ぶ側(UserService)ではUserRepositoryをフィールド定義し、コンストラクタで引数のUserRepositoryをフィールド変数に格納する
- コンストラクタに@&#xFFF0;Autowiredを付与する *1
- 各具象クラスに@&#xFFF0;Profile("任意の文字列")をつける
 
このようにすることで実行環境によってUserRepositoryに適切なクラスのインスタンスを注入してくれるみたいです。アノテーションですが、@&#xFFF0;AutowiredはDIが必要な箇所に付与することでDIを実施する必要があると示すことができます。@&#xFFF0;Profileは文字列を指定することで起動コマンドで指定したプロファイル名に従い注入するクラスを制御することができます。  
## まとめ
今回はDIが必要な背景の理解を目的としているのでbean定義等の説明は割愛しました。  
抽象的すぎて返ってわかりにくいかもしれないのですが、理解の手助けになれれば幸いです。
springにおけるDIの動きの詳細は別記事にてまとめようと思います。
【SwiftUI】TextEditorの見た目をTextFieldっぽくする

# 概要
TextFieldでは入力欄が空の時に薄い文字を表示することができますが、TextEditorではできません。そこで今回は、TextEditorでもTextFieldっぽく薄い文字を表示する方法を解説していきます。

# ゴール
本来のTextEditorは以下の左のような見た目ですが、今回は以下の右のような見た目を目指します。

# 基本のTextEditor
基本的なTextEditorです。これは、Viewが真っ白で何も見えません。

### コード
```: SwiftUI: 基本のTextEditor
import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        // 基本
        TextEditor(text: $memo)
    }
}

#Preview {
    QiitaView()
}
```

### 見た目
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/33218ef9-f93a-ec53-4939-7f3f73e7711c.png">

# よくあるTextEditor
そこで、以下のようにborderを付けることでどこにTextEditorがあるかわかるようになります。
### コード
```: SwiftUI
import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        // よくあるTextEditor
        TextEditor(text: $memo)
            // フレームサイズ指定
            .frame(width: 200, height: 100)
            // フレーム外枠の色と太さ指定
            .border(Color.gray, width: 1)
    }
}

#Preview {
    QiitaView()
}

```

### 見た目
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/7ceaae3e-d46d-f965-b38a-52f79b46342f.png">

# TextField的なTextEditor
よくあるTextEditorでも十分いいですが、やっぱり枠の中に文字を表示しておきたいので、もう少し工夫します。

###### TextFieldっぽく丸みのある枠線をつける
borderで枠線をつけてもいいですが、TextFieldは丸みを帯びた枠線になっています。borderではおそらく再現不可なので、overlayで角を丸めます。

```:SwiftUI
import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        TextEditor(text: $memo)
            .frame(width: 200, height: 100)
            // borderではなく、overlay
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.gray, lineWidth: 0.6)
            )
    }
}

#Preview {
    QiitaView()
}
```
###### 見た目
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/7b69a91b-6e5e-5198-dc63-1198f6389d7d.png">

###### 薄文字を表示する
さらに、overlayを使い、Textを表示することで、薄文字を表示します。

```: SwiftUI
import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        // よくあるTextEditor
        TextEditor(text: $memo)
            .frame(width: 200, height: 100)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.gray, lineWidth: 0.6)
            )
            .overlay(alignment: .topLeading) {
                Text("メモ")
                    .foregroundStyle(Color.gray)
                    .padding(10)
            }
    }
}

#Preview {
    QiitaView()
}
```
###### 見た目
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/75a4270b-eea0-3784-7b0b-db7372e004e1.png">

# ポイント
今回は、TextEditorをTextFieldっぽく表示する方法について解説しました。ポイントとしては、角を丸くするのにborderではなく、overlayを使用して、文字を表示する時にも、overlayでTextを表示するとこです。もっといい方法があれば、コメントで教えてください。。。
初めてのオンライン型ハッカソンで得られたこと

## 目次
1. はじめに
2. 自己紹介
3. 参加した理由
4. 得られた反省点
5. おわりに

## はじめに
はじめまして、ojiro5132です!
先日、Progateハッカソンに参加しました!

オンライン型のハッカソンは初めての経験で、今回得られたことについて今後の自分のためにも記事にまとめてみようと思いました!

初投稿で読みにくいところがありますが、ぜひ最後まで読んでいただけたら嬉しいです！

## 自己紹介
+ 情報系学部の大学３年生
+ 過去に２回、オフライン型ハッカソン出場
+ 半年前からWebフロントエンド(React)を主に勉強しています

## 参加した理由
今回ハッカソンに参加した理由は3つありました。

**1. 友人とチーム開発を行いたい**
今まで参加したハッカソンではチームメンバーが全員初対面でした。なので、今回は同じくReactを学習している友人4人と参加してチーム開発を経験してみたいと思ったからです。

**2. オンライン型ハッカソンを経験したい**
オフライン型のハッカソンでは、チームメンバーや参加者が対面にいる状態でのハッカソンしか経験したことがなかったので、オンライン上で開発から発表までを経験したいと思ったからです。

**3. 春休み勉強したことをアウトプットしたい**
春休みに自身で学習したReact,UI/UXデザインの知識を、実際にハッカソンを通して開発にどれだけ活かせるのか試したかったからです。

## 得られた反省点
### 最初にチーム全員でゴールをもつ
今回チームメンバーが忙しかったということもあり話し合う時間をあまり取れませんでした。そのため、なんとなく旅行に関するのアプリテーマと、とりあえずいろんなapiを叩こう！のモチベーションで開発を始めました。
その結果、開発の途中で機能がチグハグになったり、メンバーの間でデザインに差異ができてしまったりと、その都度細かな修正やアプリのテーマの変更を行う羽目になりました。

当たり前ですが、最初にゴールをはっきりさせ、そのゴールを逐一確認することが結果的に効率よく開発が進むのだと実感しました。

### 顔が見えないからこそ、進捗管理に力を入れる
オフラインでの開発とは違い、オンラインではお互いの進捗状況をすぐに確認するのが難しいと、開発を進める中で感じました。進捗管理をおろそかにしたことで、同じデザインの実装を二人ともやっていたり、予定通りに進めずUIや発表準備に時間がかけられなかったり、詰まった箇所を一人で抱え込んだり…などなど問題が起こりました。

次に向けて
・FigjamやNotionなどのツールを活用する
・作業分担をはっきりさせ、一定時間でお互いの進捗状況を報告し合う
などそれぞれが今何をしているのかを把握できる方法を実践したいと思います。
### メンターさんやチームメンバーをどんどん頼る
今回のハッカソンではオンラインで顔が見えないこともあり、開発の途中でメンバー同士口数が減ってしまう場面がありました。

コードを書いていると自分が担当している機能をどうしてもやり遂げたいと思いから、一人で長時間悩んでしまうことはあるあるだと思います。しかしハッカソンという場では、一人で長時間悩むのではなく積極的に他のメンバーにできないことを相談したり、メンターさんに頼ることが短期間のチーム開発で成果を出すためには重要な考えだと思います。

メンターさんやチームメンバーがいるハッカソンという貴重な時間を、一人でもくもくコードを書くのではなく、もっとフル活用していきたいなと感じました。

### 結論 ： コードを書く前の事前準備がめちゃくちゃ大事
アイデア出しから要件定義、デザイン、コア機能、役割分担や予定など事前準備にしっかり時間をかけるて、全員が同じ方向・モチベーションで進むことが大事だと感じました。

「とりあえずコード書いてく！」の前に、チーム全員が同じ共通認識を持っているのか把握し、進めていく上でのチームの決め事（30分悩んだら相談するなど）みたいなものを作成するのが大切だと思いました。

## おわりに
今回の記事では初めてのオンライン型ハッカソンを振り返って得られた反省点を主に書きましたが、コア機能の実装に集中し完成させたなど良かった点もありました。とにかく友人とわちゃわちゃ楽しみながらプロダクトを作りきれたことが良い経験となったと思います。

ハッカソンが短期間で多くの学びが得られるアウトプットの機会だと改めて実感し、これからも積極的に参加していきたいです。

今回のハッカソンを糧にこれからも成長していきたいと思います！
最後まで読んでいただきありがとうございました！！
「デカ文字」有機ELのSSD1306に46とブロック文字を表示(Arduino UNO)


目的
ブロックデカ文字の表示

![o_coq110.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/ac921cc5-2540-157f-531d-72ebb65e9061.jpeg)



```c++



//ssd1306_bol_UNO_1


//ヘッダーファイル
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

//1234567890
uint8_t ch_data7[8*10] = {
  0x70, 0x88, 0x98, 0xa8, 0xc8, 0x88, 0x70, 0x00, //( 48) 0 
  0x10, 0x30, 0x50, 0x10, 0x10, 0x10, 0x10, 0x00, //( 49) 1 
  0x70, 0x88, 0x08, 0x10, 0x20, 0x40, 0xf8, 0x00, //( 50) 2 
  0x70, 0x88, 0x08, 0x30, 0x08, 0x88, 0x70, 0x00, //( 51) 3 
  0x18, 0x28, 0x48, 0x88, 0xf8, 0x08, 0x08, 0x00, //( 52) 4 
  0xf8, 0x80, 0x80, 0xf0, 0x08, 0x08, 0xf0, 0x00, //( 53) 5 
  0x70, 0x88, 0x80, 0xf0, 0x88, 0x88, 0x70, 0x00, //( 54) 6 
  0xf8, 0x08, 0x08, 0x10, 0x20, 0x20, 0x20, 0x00, //( 55) 7 
  0x70, 0x88, 0x88, 0x70, 0x88, 0x88, 0x70, 0x00, //( 56) 8 
  0x70, 0x88, 0x88, 0x78, 0x08, 0x88, 0x70, 0x00, //( 57) 9 
};

uint8_t c_block[8] = {
  0b11111110,
  0b11111110,
  0b11111110,
  0b11111110,

  0b11111110,
  0b11111110,
  0b11111110,
  0b00000000
};

uint8_t t_block[2][8][8];


//初期化
void setup() {

  //i2cの初期化
  Wire.begin();

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

  //表示方向
  display.setRotation(0);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.fillScreen(BLACK);

char st_1[16] = {'4','6'};
int p;

for(int ii=0;ii<2;ii++){
  for(int y=0;y<8;y++){
    p = ch_data7[ (  ( st_1[ii] - '0' )   *8) + y ];
    for(int x=0;x<8;x++){
      t_block[ii][y][x] =  p & 0x80;
      p = p <<1;
    }//for x
  }//for y
}//for ii

//t_block[0][3][3] = 0; //debug

for(int ii=0;ii<2;ii++){
  for(int y=0;y<8;y++){
    for(int x=0;x<8;x++){

if( t_block[ii][y][x] != 0){
  display.drawBitmap( (x*8) + (ii*64) , y*8, c_block, 8, 8,  WHITE);
}//if
      
    }//for x
  }//for y
}//for ii



  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop




```