OmniAICreator/Qiita-1.07M huggingface dataset:
Unity 6（2023 LTS）で Cinemachine の using が変更されていた話

2024年まで、Unity で Cinemachine をスクリプトで利用するときは以下のように書くのが一般的でした。

    using Cinemachine;

ところが Unity 6（正式リリース名：Unity 2023 LTS） では、Cinemachine の using が変更されており、このままではエラーになってしまいます。

新しい形では以下のように書く必要があります。
```
using Unity.Cinemachine;
using Unity.Cinemachine.Editor;
using Unity.Cinemachine.TargetTracking;
```

「あれ？Cinemachine が使えなくなった！！」
と思って調べたのですが、意外と検索では情報を拾えなかったので共有しておきます。

Unity 6（2023 LTS）は最新だし、ひとまず使っておけば間違いないだろう… と気軽にアップデートした結果、変更による違いを把握していなかったため困ることになりました(^▽^;)

同じ状況になった方の参考になればと思います。


---
Cinemachine の変更点（Unity 6 / 2023 LTS）

Unity 6（2023 LTS）では、Cinemachine のデフォルトバージョンが Cinemachine 3 系 になっており、いくつかの API に破壊的変更が加えられています。

### 名前空間の変更

| 旧バージョン（Unity 2022 まで） | 新バージョン（Unity 6 / 2023 LTS） |
|-----------------|--------------------|
| `using Cinemachine;` | `using Unity.Cinemachine;` |
| `using Cinemachine.Editor;` | `using Unity.Cinemachine.Editor;` |
| `using Cinemachine.Utility;` | **`Unity.Cinemachine` に統合** |



**対応方法**
1. スクリプトの修正

旧 using を新しい名前空間に置き換えます。

変更前 (Unity 2022 以前)

using Cinemachine;

変更後 (Unity 6 / 2023 LTS)

using Unity.Cinemachine;

もし Cinemachine.Editor を使用している場合は、Unity.Cinemachine.Editor に変更してください。
2. アセンブリ定義ファイル（.asmdef）の更新

プロジェクト内で アセンブリ定義ファイル を使っている場合、Cinemachine への参照を更新する必要があります。

**更新方法**
対象の .asmdef ファイル を選択
    Inspector ウィンドウで「Assembly Definition References」を確認
    Unity.Cinemachine を追加
    不要な参照（Missing Reference など）があれば削除
    Apply ボタンをクリックして適用

3. プロジェクトのリフレッシュ

すべての変更を保存した後、Assets > Refresh を実行してプロジェクトをリフレッシュしましょう。



**まとめ**

Unity 6 では Cinemachine のバージョンが 3.x に更新され、名前空間が変更されました。
using Cinemachine; ではなく、 using Unity.Cinemachine; を使用する必要があります。

「Cinemachine が急に使えなくなった！」 という方は、上記の対応を試してみてください！

📝 公式リリースノート:
 https://unity.com/ja/releases/unity-6
Nuxt4への移行：Opt-inの機能について

皆さん、こんにちは。

今日は「Nuxt4への移行：Opt-inの機能について」についてご紹介します。

Nuxt 4では、既存のNuxt 3プロジェクトで新機能や変更点を事前に試すことができる「Opt-in」機能が提供されています。

これにより、Nuxt 4の新機能を本番環境に移行する前にテストし、移行の影響を把握することが可能です。

# Opt-in機能の利用方法:

- Nuxt 3.12以上へのアップグレード: まず、プロジェクトのnuxtパッケージをバージョン3.12以上に更新します。
- 設定の追加: nuxt.config.tsファイルに以下の設定を追加します。

```
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
})
```
この設定により、Nuxt 4の互換性をテストすることができます。
`Running with compatibility version 4`と表示されればOKです！

```
> dev
> nuxt dev

Nuxt 3.12.2 with Nitro 2.9.6                                                 
                                                                                                                                                          
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Running with compatibility version 4
```

# 注意点:

- ディレクトリ構造の変更: Nuxt 4では、ディレクトリ構造が変更され、app/ディレクトリ内にassets/、components/、pages/などが配置されます。この変更により、プロジェクトの可読性とパフォーマンスが向上します。 

## Nuxt3のディレクトリ構造

```
.output/
.nuxt/
assets/
components/
composables/
layouts/
middleware/
pages/
plugins/
utils/
app.vue
router.options.ts
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts
```

## Nuxt4のディレクトリ構造
```
.output/
.nuxt/
app/
+   assets/
+   components/
+   composables/
+   layouts/
+   middleware/
+   pages/
+   plugins/
+   utils/
+   app.vue
+   router.options.ts
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts
```

ディレクトリ構造の改善についての全文は、以下のissueをご覧ください。
https://github.com/nuxt/nuxt/issues/26444

- 破壊的変更のテスト: Opt-in機能を利用することで、Nuxt 4で導入される破壊的変更を事前にテストし、移行に伴う影響を把握することができます。 

ディレクトリ構造の改善以外にも、これまで実験的機能として提供していた機能の正式提供や、useAsyncDataなどのfetch系関数に対する多少の変更など、いくつかのアップデートが加わっています。
詳細は、Nuxt公式の「Testing Nuxt 4」の項をご覧ください。

https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4

このOpt-in機能を活用することで、Nuxt 4への移行をスムーズに進めることができます。詳細な手順や注意点については、公式ドキュメントやコミュニティのリソースを参照してください。

ぜひ参考にしてみてください。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
NAIST-Jdicのダウンロードリンク

ふとMeCab用のNAIST-Jdicをダウンロードしてみたくなった。してみたくなったものの[NAIST-Jdic](https://ja.osdn.net/projects/naist-jdic/)の公式サイトは、どこに何があるのかわからない状態でした。歴史的な資料の場所が不明瞭なままではまずいと思い、MeCab用NAIST-Jdicのリンク集を作ることにしました。

- http://iij.dl.sourceforge.jp/naist-jdic/53500/mecab-naist-jdic-0.6.3b-20111013.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/48487/mecab-naist-jdic-0.6.3-20100801.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/45847/mecab-naist-jdic-0.6.2-20100208.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/40536/mecab-naist-jdic-0.6.0-20090616.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/39921/mecab-naist-jdic-0.5.0-20090512.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/32924/mecab-naist-jdic-0.4.3-20080917.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/32511/mecab-naist-jdic-0.4.3-20080812.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/32209/mecab-naist-jdic-0.4.3-20080723.tar.gz
- http://iij.dl.sourceforge.jp/naist-jdic/29852/mecab-naist-jdic-0.3.0-20080309.tar.gz


おまけ
- [NAIST Japanese Dictionary version 0.4.0 ユーザーズマニュアル](https://www.gavo.t.u-tokyo.ac.jp/~mine/japanese/nlp+slp/NAIST-JDIC_manual.pdf)
React Nativeでスマホアプリ開発【まずやったこと】

ほぼ初心者でスマホアプリの開発してます。
プログラムに辿り着く前の環境構築に手間取ったので残しておきます。

#### 〜使用するソフトをMacPCにインストール〜
【アプリのUIデザイン】Figma
【コーディング】VisualStudioCode
【シミュレーター】ExpoGo（iphoneにインストール）or XcodeでiOS版のシミュレーターが可能。
※AndroidStudioでAndroid版のシミュレーターも利用できる。
【開発ログ】Gitで適時コードのログを残す。少しの書き足しでエラーになるため頻繁にログを取って引き返していた。

#### 〜アカウント登録が必要〜
Figma、Expo、Git 

#### 〜それぞれの機能〜
ReactNative：様々なプラットフォームに対応する言語。iOS、Android、WEBのいずれも共通言語で開発できる。ただし細かい部分では気をつける点もある。
Expo：ReactNativeで開発をするうえで便利なプラットフォーム。
まずシミュレーター機能がある。これ以外にもReactNativeの「React Navigationライブラリ」を派生させた「Expo Routerライブラリ」があったりする。

#### 〜大まかな流れ〜
1.まず「Figma」でスマホアプリのデザインを具体的に描写する。画面遷移まで詳しく考えておくと「アイコン（戻るボタンとか）」が必要なページに気づける。
2.実際にコーディングして、結果をシミュレーターで確認する。
3.完成したらビルド（コードを元に実行可能なアプリとして組み立てられる作業）してリリースする。

#### 〜環境構築〜
・開発用のフォルダを新規作成
・Expo：新規パッケージインストール（template:TypeScript）
　※インストール後は中身に不足がないか確認しておく。
・必要になりそうなライブラリをインストール（expo routerとか主要なものはまとめてインストールした） 
・Git：ログを連携して遡れるようにする。
・Node.js：JavaScriptの実行環境（NVSでバージョン管理すると後々便利）
・VSCodeを開いてコーディング作業に入る。（新パッケージで起動すると信頼できるフォルダなのかポップアップで確認される）

#### 〜注意点〜
【Gitログ関係】
メールアドレスがログの一部として公開されるため、ダミーのアドレスを生成することもできる。
ログをパブリック設定にした場合はKEYやID関係を「.env」にまとめてGitの追跡対象から外す。

#### 〜よかった点〜
色んなライブラリがあり、探せば望むものが見つかりそう。
比較的楽に環境環境が用意できた。
undefinedの対応

### undefinedを避ける

下の図のように値が存在しない時に```undefined歳です```と出力されてしまいます。
代わりに```年齢は秘密です```と出力する方法を学んでみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/689d45d3-e314-4767-a8d6-4b8d117ce8c8.png)

### undefinedとif文
```undefined```を```if文```の条件式に使ってみましょう。
```character.age```の値が```undefined```と等しいかどうかで処理を分岐します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/95f4c512-a560-43e4-b82b-e4c274b8b3b3.png)

## 例題
```for文```内で```character.age```に応じてif文で処理を分岐し、```undefined```なら「年齢は秘密です」、そうでなければ```〇〇歳です```と出力してみましょう。 〇〇の部分は```character.age```の値とします。

```javascript:qiita.js
const characters = [

  {name: "cat", age: 14},
  
  {name: "turtle", age: 100},
  
  {name: "dog", age: 5},
  
  {name: "sheep"}
  
];

for (let i = 0; i < characters.length; i++) {

  console.log("--------------------");
  
  const character = characters[i];
  
  console.log(`名前は${character.name}です`);

  // if文を追加してくださいconsole.log(animals[i]);
  
}
```
配列に対して存在しないインデックス番号を取得する【undefined】

### 存在しない要素を取得する

これまでに配列やオブジェクトの扱い方を学習してきました。
では要素を取得する際に、配列に対して存在しないインデックス番号を指定したり、 オブジェクトに対して存在しないプロパティを指定するとどうなるのかを見てみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/ca55f203-16d5-499d-b408-27e644dd77d0.png)

### undefined
以下の図のように、配列の存在しないインデックス番号の要素や、オブジェクトの存在しないプロパティの要素を取得しようとすると、```undefined```と出力されます。
```undefined```は特別な値で、値が定義されていないことを意味します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/9a72761f-5b88-48f2-92a7-6d76c857f7aa.png)

## 例題
「オブジェクトを要素に持つ配列」ページの２つ目の例題で作成したコードに、要素を追加してみましょう。
定数```characters```の配列に、以下のオブジェクトを追加してください。
```{ name : "sheep" }```

コンソールを実行してみると、```undefined歳です```と出力されたかと思います。
このような場合の対処法を、次の```undefinedの対応```で学習していきましょう。

```javascript:qiita.js
const characters = [

    { name: "cat", age: 14 },
    
    { name: "turtle", age: 100 },
    
    { name: "dog", age: 5 },
    
    // 要素を追加してください
    
];

for (let i = 0 ; i < characters.length; i++) {

    console.log("--------------------");

    const character = characters[i];

    console.log(`名前は${character.name}です`);
    
    console.log(`${character.age}歳です`);
}
```
SageMakerについて

## SageMakerのアカウントを作成
作る
https://studiolab.sagemaker.aws/

参考
https://note.com/tebuku_ai/n/na755a5a0264f

## SageMakerを起動
紫色のSageMaker Studio Lab
https://github.com/gutris1/segsmaker

## SageMakerの起動手順
GPU
Copy from GitHub?
　Copy Notebook Only
Conda
　Civitai API Key Here
　　API KeysのAdd API key
　Hugginface READ Token
　　ユーザーの設定画面左側のAccess Tokens
なんか
　A1111
　SD XL
Launch
　ZROKかNGROK

## コマンド
・容量を圧迫しているファイルを探す
ls -lh -S -R
・outputをtar化
!tar czvf A1111/outputs/20250211.tar.gz A1111/outputs/txt2img-images


## プロンプト
・ポーズ・体位
https://seesaawiki.jp/sd_prompt/d/%A5%DD%A1%BC%A5%BA%A1%A6%C2%CE%B0%CC
・とし
・身体的特徴編集する
https://seesaawiki.jp/sd_prompt/d/%bf%c8%c2%ce%c5%aa%c6%c3%c4%a7
オブジェクトを要素に持つ配列

今回は、オブジェクトを要素に持つ配列を見ていきましょう。

配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができます。その特性により、左の図のような配列を作ることができます。
その際、コードが横に長くなることを防ぐために、右の図のように要素ごとに改行することがよくありますので、覚えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/03711ec0-eadf-4fd2-87e9-f74172774d7f.png)

### 配列の中のオブジェクトを取り出す
配列の要素には、先頭からインデックス番号が割り振られていることを思い出してください。
図のような配列では、配列の値がオブジェクトなので、配列[インデックス番号]で対応するオブジェクトを取得することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/668f2882-7a97-4b34-82dd-e6d387c36ccd.png)

### 配列の中のオブジェクトの値を取り出す
さらに、配列の中のオブジェクトのプロパティの値を取り出すには、「配列[インデックス番号].プロパティ名」と書きます。
やや複雑になってきましたが、分からない箇所はしつこく復習しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/84f640dd-4d0a-4bc8-85aa-88c7dd0153b1.png)

## 例題
すでに定数```characters```には、オブジェクトを要素とする配列が代入されているので、 それぞれの要素をコンソールに出力してみましょう。

```javascript:qiita.js
const characters = [ small - image

  {name: "cat", age: 14},
  
  {name: "turtle", age: 1000}
  
];

// charactersの1つ目の要素をコンソールに出力してください

// charactersの2つ目の要素の「name」に対応する値をコンソールに出⼒してください
```

### 配列と繰り返し処理
今回学習した「オブジェクトを要素に持つ配列」と「繰り返し処理」を、例題を使って復習しましょう。
下の図のように、キャラクターの情報（名前・年齢）を順に出力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/5664e072-db57-4150-973c-6c5cebd16492.png)

## 例題
for文を用いて、条件式( )の中は、以下の条件のもと作成してください。

>【変数の定義】
・変数iを定義し、0を代入
>
>【条件式】
・「変数iの値がcharactersの要素数より小さい」という条件式をlengthを用いて追加
>
>【変数の更新】
・変数iに1を加える
・定数characterを定義し、charactersのインデックス番号がiの要素を代入する
・「名前は〇〇です」と出力する（〇〇はcharacterのnameプロパティの値）
・「〇〇歳です」と出力する（〇〇はcharacterのageプロパティの値）

```javascript:qiita.js
const characters = [

  {name: "cat", age: 14},
  
  {name: "turtle", age: 100},
  
  {name: "dog", age: 5},
  
];

// for文を完成させてください

for (;;) {

  console.log("--------------------");

  // 定数characterを定義してください

  // 「名前は〇〇です」を出力してください

  // 「〇〇歳です」を出力してください

}
```
オブジェクトについて

### オブジェクトとは

ここからは、「オブジェクト」について学んでいきます。
オブジェクトは、複数のデータをまとめて管理するために使用されます。
配列は複数の値を順序付けて管理しますが、オブジェクトはそれぞれの値にプロパティと呼ばれる名前を付けて管理します。
以下の図のように、オブジェクトを使用することで、関連するデータを一つのまとまりとして扱うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/76156cc4-1293-4fed-9067-919d0f0dc7d2.png)

### オブジェクトの作り方
配列を作るときは[ ]で囲みましたが、オブジェクトは{ }で囲みます。
プロパティ名と値の間はコロン（:）で繋ぎます。また、プロパティ間はコンマ（,）で区切ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/504f3d91-fcca-42c8-b4e2-409a9660f609.png)

オブジェクトも定数に代入することができます。
また、左下の図のように「console.log(定数名)」とすると、オブジェクトがコンソールに出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/410d7e49-9a1c-4698-92f8-3a65c87db092.png)

### オブジェクトの値を更新する
「オブジェクト.プロパティ名 = 新しい値」とすることでオブジェクトの値を更新することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/f4cc7e4a-1517-4d6f-8c5a-85885a863c67.png)

## 例題
オブジェクトの値を取得し、更新してみましょう。

```length```を実際に使い、以下の例題に取り組んでみましょう。
コンソールを確認して、全ての要素が順に出力されていることを確認してみてください。

```javascript:qiita.js
const character = {name: "John", age: 14};

// characterのnameの値を出力してください

// characterのageの値を「20」に更新してください

// characterをコンソールに出力してください
```
配列と繰り返し

### 配列と繰り返し

配列に対して繰り返し処理を行うことがしばしばあります。
ここでは、for文を使って配列の要素を順に取り出すようにしてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/b5e3bb8a-604d-4738-8cd6-ee3e4380d956.png)

### 配列とfor文
配列```fruits```の要素数が3の場合、すべての要素を出力するには、左の図のように書かなければなりません。
これをfor文で書き直すと右の図のようになります。
このようにすれば配列の中に格納されているすべての値を簡単に出力することができます。
この際、変数の値は0から始めることに注意しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/65dbf7fd-336b-44fd-97eb-f457be0745a7.png)

## 例題
for文を使い、以下の条件に沿って、配列の要素をすべて出力してみましょう。

>【変数の定義】
・変数iを定義し、0を代入
>
>【条件式】
・「変数iの値が3より小さい」という条件式を追加
>
>【変数の更新】
・変数iに1を加える


```javascript:qiita.js
const animals = ["dog", "cat", "sheep"];

// for文を用いて、配列の値を順にコンソールに出力してください
```

### length
左の図のように配列.lengthとすることで、配列の要素数を取得できます。
また、lengthを用いれば、前の演習のfor文の条件式を右の図のように書き換えることができます。
配列の要素数が変わっても問題なく繰り返すことができるので便利です。
これは配列の繰り返し処理でよく使う書き方ですので、覚えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/9a1fd6ff-64e1-4af6-b260-9e938cd44c14.png)

## 例題
```length```を実際に使い、以下の例題に取り組んでみましょう。
コンソールを確認して、全ての要素が順に出力されていることを確認してみてください。

```javascript:qiita.js
const animals = ["dog", "cat", "sheep", "rabbit", "monkey", "tiger", "bear", "elephant"];

// lengthを用いて配列の要素の数を出力してください

// lengthを用いて以下の条件式を書き換えてください

for (let i = 0;i < 3; i++) {
	console.log(animals[i]);
}
```
配列

### 複数の値をまとめて扱おう
今回は、複数の値をまとめて扱う方法について学んでいきます。
例えば、果物の名前についての値がいくつもあるとき、それぞれを定数（変数）として定義するより、 「果物の名前一覧」といったように関連する値をまとめて管理すると便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/0ed0b5e2-08f1-412f-a29b-25357e5663d2.png)

### 配列とは
複数の値をまとめて管理するには、配列というものを用います。
配列は、[値1, 値2, 値3]のように作ります。配列に入っているそれぞれの値のことを要素と呼びます。
配列を使うと、右の図のように複数の文字列や数値をまとめて書くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/fd300799-f0ac-4874-a9c9-99ac943e858f.png)

## 例題
実際に配列を作ってみましょう。

```java:qiita.js
// 定数animalsを定義し、3つの文字列を要素とする配列を代入してください。

// dog, cat, sheep 定数animalsの値をコンソールに表示してください。
```

### インデックス番号
配列の要素にはそれぞれインデックス番号という番号がついています。
インデックス番号は、0から始まることに注意しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/26fc7df7-75d1-41d2-8a34-f07d1c2b0c2e.png)

### 配列の要素を取得する
インデックス番号を用いて配列の要素を取得してみましょう。
配列[インデックス番号]とすることで配列の要素を取得することができます。
例えば```apple```の取得は、左の図のように、```apple```のインデックス番号である0を用いて```fruits[0]```とすることで可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/7500e50c-087b-4ca8-abaf-a15f8667f514.png)

## 例題
```java:qiita.js
const animals = ["dog","cat","sheep"];

// 配列の1つ目の要素を出力してください

// 配列の3つ目の要素を出力してください
```

### 配列の要素を更新する
配列は左の図のように、要素に値を代入することでその要素を上書きすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/1898610d-3103-4bde-bee4-c3a702e23cab.png)

## 例題
配列の要素を更新してみましょう。
更新したら更新されていることを確認してみましょう。
```java:qiita.js
const animals = ["dog","cat","sheep"];

// 配列animalsの3つ目の要素を「rabbit」に更新してください

// 配列animalsの3つ目の要素をコンソールに表示して下さい
```
for文

繰り返し処理を行う方法として、while文以外にもfor文というものがあります。
できることはwhile文と同じですが、while文に比べてシンプルに書くことができるのが特徴です。
具体的な書き方を見てみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/5d47495c-9504-4171-a9fb-0385cccb56c0.png)

### 計算式の省略
```number += 1```は、```number++```のように省略して書くことができます。
また、引き算の場合にも、```number -= 1```を```number--```と省略することができます。
```while文```や```for文```では、この省略した書き方を使ってコードを短くすることができますので、覚えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/9f481211-b45d-4b90-b623-51b0884ba8db.png)

## 例題
for⽂を⽤いて、以下の例題に取り組んでみましょう。
```html:qiita.js
// for⽂を⽤いて、1から100までの数字を出⼒してください
```
while文について

### 繰り返し処理とは

今回は、1から100までの数字を出力する場合を考えてみましょう。
左の図の緑の枠で囲んだ部分を100回書けばできますが、さすがに非効率です。
このような場合には「繰り返し処理」というものを用いると便利です。その方法を学習していきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/55c682d6-4f15-480e-a496-bcfb1f7d6ac4.png)

### while文
繰り返し処理を行うためには```while文```を用います。
```while```とは「〜の間」という意味の英語です。
```while文```は下の図のように書き、「条件式が```true```の間、{}内の処理を繰り返す」ことができます。
{ }の後にセミコロンは不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/dc05c036-db07-419d-bf80-0aaed4401298.png)

### while文の使い方（1）
1から100まで数字を出力する例で、```while文```の書き方を見てみましょう。
まず、繰り返す部分の処理を```while```の「{ }」の中に書いていきます。
今回は左の図の緑の枠で囲んだ部分が繰り返すコードですので、```while文```では右の図のように書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/3ec0dbab-75e2-4090-aa65-082a83e2fcd2.png)

:::note alert
while文の注意点
while文を用いる場合には、条件式の部分がいつかはfalseになり、繰り返し処理が終わる必要があることに注意してください。
左の図では変数numberの値を更新するコードを書き忘れており、これではいつまでも条件がtrueのままで、永遠に繰り返し処理が続いてしまいます。（これを無限ループと呼びます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/b9a78a5a-e71b-46f3-986c-5a577f613506.png)
:::

## 例題
while文を使い、以下の例題に取り組んでみましょう。

```html:qiita.js
// 繰り返し処理を用いて、1から100までの数字をコンソールに出力してみましょう。

// 変数numberを定義し、数値の1を代入してください。

// ただし、条件式は変数numberが100以下となるようにしてください。

// while文の中で、変数numberの値を出力してください。

//また、その下の行で、変数numberの値に1を加えてください。
```
switch文（2）

### switch文 - defalut
```default```は```if文```の```else```に似たようなものです。
```case```のどれにも一致しなかった時、```default```のブロックが実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/9e8eefc3-ca23-419f-a797-64c5c44281d3.png)

if、else ifによる分岐が複雑なプログラムを書く場合、switch文で書き換えるとシンプルで読みやすいコードにできますので 覚えておくと便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/97e45cb6-3c2c-4024-a595-d33b18cb8cdf.png)
switch文（1）

### switch文とは

if文以外の条件分岐の方法の１つである、switch文を学んでいきます。
以下の画像は、信号機の色を表す定数colorの値によって処理を分岐したい、という例です。 このように、ある値によって処理を分岐する場合にswitch文を用いることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/6b924959-15d9-44e0-b05e-bafddd071d4a.png)

### switch文の書き方（1）
下の図のように、「switch(条件の値){ 処理 }」とすることでswitch文を書くことができます。 右の図は定数colorを定義したうえで、switch文を使ってcolorの値によって処理を分岐させていく例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/24a35129-f647-44e3-8609-91d78fe92ee2.png)

### switch文の書き方（2）

switch文の中にcaseを追加することで処理を分けることができます。
右の図では、定数colorの値が「赤」であるときに「ストップ！」という文字列が出力されるようになっています。
<font color="#0000FF">※breakについては後ほど説明します。</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/4258bfd3-48fc-44ce-95e4-7c25212bff4e.png)

### switch文の書き方（3）
switch文では分岐の数だけcaseを追加していきます。
右の図では2つ目のcaseの値に「黄」が指定されており、定数colorの値が「黄」である場合には「要注意」と出力されるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/daea8a9a-d18e-4888-be2e-b6f658a6d61e.png)

:::note alert
switch文の注意点
ここで、```break```について触れておきます。
```switch文```では```break```が非常に重要でして、```break```とは```switch文```を終了する命令を指します。
```break```がないと、合致した```case```の処理を行った後、その次の```case```の処理も実行してしまいます。 そのため、```switch文```を使うときにはbreakを忘れないように気をつけましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/4d06ddef-31f6-4b02-82da-a934c44c5939.png)
:::
複数の条件式

### かつ

今回は、複数の条件を組み合わせる方法を学んでいきます。
まずは、```かつ```についてです。```かつ```は```&&```で表します。
```条件1 && 条件2```は```条件1かつ条件2```という意味で、複数の条件がすべて```true```なら```true```になります。
右の図の```10より大きいかつ30より小さい```は、```10 < x < 30```と書くことは出来ません。このようなときは```&&```を使いましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/76dfc34b-e3da-4717-a372-f57d50a6b66c.png)

### または
次は「または」を表す記号です。「または」は「||」で表します。
「条件1||条件2」は「条件1または条件2」という意味です。 この場合は、複数の条件のうち1つでもtrueならtrueになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/30ae14a0-2402-4262-8f2c-95e1ddb1b2e5.png)

### 組み合わせの具体例
if文を使った「かつ」の具体例を見てみましょう。
下の図では、「number >= 10」、「number < 100」どちらも true なので処理が実行されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/620ba61e-e0e3-41e5-b155-d4ed882a281f.png)

## 例題
「かつ」を用いて、if文を作成する例題に取り組んでみましょう。
```java:qiita.js
const age = 24;

//「定数ageの値が20以上かつ30未満」という条件のif文を作成してください。 

//また、その中で文字列「私は20代です」を出力してください。
```
elseについて

### 条件が成り立たない場合の処理

条件式が成り立たない場合に、別の処理を行いたい場合があります。
例えば、以下のように number の値が10より大きくない場合には「10以下です」というような場合です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/8e766e1d-39e1-4862-95e1-16034b958e4b.png)

### else
下の図のように、if文に「else」を組み合わせると「もし〇〇なら●●を行う、そうでなければ■■を行う」という処理ができるようになります。
if文の条件がfalseの場合、elseの処理が実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/a9931a00-291e-4d72-ac9b-0daa3ac037cf.png)

:::note info
elseを使った実際のコードを見てみましょう。
左の図は、```number```の値が10より大きいかどうかで処理を分けたい場合に、if文のみを使用した例です。 
この場合、2つのif文を作成する必要があります。
一方、右の図のようにelse文を用いると、1つの条件分岐で同じことを実現できます。 
右の図のように、```elseを```用いて条件分岐を行うことが主流ですので慣れておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/50e874a7-0b89-4c1e-9108-6828ba1a98b5.png)
:::

## 例題
elseを使い、以下の例題に取り組んでみましょう。
```javascript:qiita.js
constage=17;

if(age>=20){
 console.log("私は20歳以上です");
}
//条件式が成り立たない場合に「私は20歳未満です」と出力してください
```

### else if
ifとelseだけでなく、さらに条件を追加したい場合は「else if」を使います。
例えば下の図のように「10より大きい」という条件を満たさない中で、「5より大きい」という条件で処理を分岐する場合を見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/423f4294-d4c5-46d2-bbf7-a4a9f4ee5856.png)

### else ifの書き方
下の図のように、```if```と```else```の間に```else if (条件)```を追加することで、if文に条件分岐を追加することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/f539dd15-9fbe-45e7-a108-c9003a820a21.png)

下図は、```else if```を使った実際のコードです。
左の図では条件式2がtrueなので「else if」の中の処理が実行され、コンソールには右の図のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/00f9611e-0f62-42df-8a36-a53d0aebf4c1.png)
真偽値と比較演算子（2）

### 等価演算子
比較演算子には、左と右の値が等しいかを調べる演算子も存在します。
```a == b```はaとbが等しければ```true```、等しくなければ```false```になります。 ```a != b```はその逆です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/c32ce468-4db0-4cdf-b20d-32a402065536.png)

:::note info
等価演算子の注意点
数値「12」と文字列「"12"」は異なるデータですが、等価演算子では同じデータとして扱うよう変換されます。 
これは都合の良い時もありますが、いつもそうとは限らないので注意が必要です。
:::

### 厳密等価演算子
厳密等価演算子を使うと、文字列「"12"」と数値「12」を異なるデータとして扱うことができます。
特に理由がなければ、厳密に比較できる厳密等価演算子を利用するようにしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/0719943c-48a5-499a-a7d6-6cf4f19ba865.png)

## 例題
```java:qiita.js
if文を使い、以下の例題に取り組んでみましょう。

const password = "hello world";

//passwordの値が"hello world"の場合、「ログインに成功しました」と出力してください

//passwordの値が"hello world"でない場合、「パスワードが間違っています」と出力してください
```
Boost Your Energy with Advanced Mitochondrial Formula: A Personal Experiment

こんにちは、皆さん。
最近、仕事の合間やプログラミング中に感じる慢性的な疲労に悩まされていました。そこで、エネルギーレベルの改善を目指して、Advanced Mitochondrial Formula というサプリメントを試してみることにしました。

Disclosure: 私はこの製品のアフィリエイトパートナーです。この記事では、私自身の体験に基づいて製品の利点を正直にお伝えしています。

1. 背景
日々のデスクワークや長時間のコーディングで、集中力が続かなくなり、午後にはどうしても疲れを感じることが多くなりました。ミトコンドリアは細胞の「発電所」としてエネルギー生成に深く関わっているため、これをサポートすることでパフォーマンス向上が期待できると知り、興味を持ちました。

2. 製品の特徴
Advanced Mitochondrial Formula は、以下のような成分をバランスよく配合しています：

コエンザイムQ10: 細胞内のエネルギー生産を助け、抗酸化作用も期待できる
アルファ-リポ酸: ミトコンドリアの機能をサポートし、抗酸化物質として働く
アセチルLカルニチン: 脂肪酸の代謝を促進し、エネルギー生成を高める
その他、ビタミンB群やマグネシウムなど
これらの成分が協力して、ミトコンドリアの働きを効率化し、日常の疲労回復に寄与します。

3. 私の体験
試したきっかけ
プログラミング中に集中力が持続せず、午後になると眠気が襲ってくる現状に、何か手助けができないかと探していた時、この製品を見つけました。

体感した変化
エネルギーの持続: サプリメントを摂り始めてから、午前中だけでなく午後も比較的高い集中力を維持できるようになりました。
全体的な活力の向上: 日常生活での体力が向上し、運動後の回復も早く感じました。
コーディングパフォーマンスの改善: 長時間の作業でも頭が冴えて、効率的にタスクをこなせるようになりました。
これらの変化は、私が普段使っている開発ツールやQiita記事を書く際にもプラスの影響を与えています。

4. まとめ
Advanced Mitochondrial Formula は、忙しいエンジニアやプログラマーにとって、日常の疲労対策とパフォーマンス向上に大きな助けとなる可能性を秘めています。私自身、試してみて実感できた効果があるため、皆さんにもぜひ一度お試しいただきたいと思います。

【重要】
再度お伝えしますが、私はこの製品のアフィリエイトパートナーです。しかし、私の意見は個人の体験に基づいたものであり、皆さんの参考になれば幸いです。

参考リンク
Advanced Mitochondrial Formula 製品ページ
Qiitaコミュニティガイドライン：Qiitaコミュニティガイドライン
このような記事は、Qiitaの技術系読者にも健康管理や生産性向上の観点から有益な情報として受け入れられるはずです。ぜひ試してみて、あなたの体験や改善点などもコメントで共有してください！
真偽値と比較演算子

今回は、真偽値と比較演算子について学習していきます。

### 真偽値

右の図のように、if文の条件式の部分を出力してみると、```true```と出力されています。
この```true```が真偽値と呼ばれるものです。
真偽値には```true```と```false```という2つの値しか存在しません。
条件式が、成り立つと```true```、成り立たなければ```false```という真偽値に置き換わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/07208288-8b93-4302-931c-19f4bb925b99.png)

### if文と真偽値
下の図のように、if文は条件式がtrueであれば処理が実行され、falseであれば実行されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/20ac9dbe-8f31-4b0a-b94a-8ea8c8269240.png)

### 比較演算子

条件式に使った、大小を比べる演算子「>」は比較演算子と呼ばれる、大小比較の記号です。
「a < b」は、aの方がbより小さいとき```true```、大きいとき```false```になります。
また「a <= b」とすると、aの方がbより小さいまたは等しい（つまりb以下）のとき true になります。
以下の図を確認し、比較演算子をしっかりと抑えておきましょう。
<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/e6a78f8a-0307-4eeb-9c83-2dac61fa9c35.png)
if文

今回は、プログラミングにおいて重要な条件分岐について学んでいきます。

下の図のように、「ある条件が成り立つときだけ特定の処理を行う」という場面に遭遇することが多々あります。
このようなプログラムを「条件分岐」と呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/09393c0f-c514-402f-85b9-e3ae7aa3297a.png)

### if文の書き方
if文を用いると、「もし○○ならば✕✕を行う」という条件分岐が可能になります。
ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }の中に書きます。 下の図でif文の書き方のイメージを掴みましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/bfffd534-381e-443f-821d-675c3cb6e795.png)

### if文のコード
実際のコードを見てみましょう。まず左の図は条件式の一例です。
```number > 10```の部分は「変数numberの値が10より大きい」という意味の条件になります。
変数```number```には12が代入されているので、この条件は成り立ち、処理が実行されています。

![スクリーンショット 2025-02-14 23.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/3699e954-5344-4184-abec-2ababe429b48.png)

:::note
if文を書く時のポイント
>if文を書くときは、インデントをするようにしましょう。
インデントとは日本語で「字下げ」を意味します。
下図のようにインデントを入れることで、if文の処理がどこからどこまでか一目でわかります。 チーム開発ではインデントを厳しくチェックされるので、今のうちにクセ付けておきましょう。
ちなみにtabキーを押すと、インデントすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/a8c05d6d-6675-4fea-a205-43a6c6e5b279.png)
:::

## 例題
if文を使い、以下の例題に取り組んでみましょう。

levelという変数が定義されています。
levelの値によってコンソールにメッセージが出力されるようにしましょう。

```javascript:qiita.js
const level = 12;
// 条件式を「level>10」とするif文を作ってください。

// console.logを用いて「レベルが10より大きいです」と出力してください。
```
テンプレートリテラル

これまでの学習で文字列や定数の連結には、「+」記号を用いてきました。

それ以外の方法として「テンプレートリテラル」という連結方法があります。 
テンプレートリテラルを用いると、下のソースコードのように文字列の中に定数もしくは変数を埋め込むことができます。

```javascript: qiita.js
const name="John";
console.log(`こんにちは、${name}さん`);
```

```html:出力結果/コンソール
こんにちは、Johnさん
```

### **テンプレートリテラルの書き方**
下の図のように、文字列の中で```${定数} ```とすることで、文字列の中に定数や変数を含めることができます。 
この時、下の図のように文字列全体をバッククォーテーション（`）で囲む必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/59a8c6b8-ab89-4d4b-8c18-307e18d90cfd.png)

 <br>また、下のソースコードのように複数の定数や変数を埋め込むこともできます。

```javascript: qiita.js
const name="John";
const age=20;
console.log(`${name}は${age}歳です`);
```

```html:出力結果/コンソール
Johnは20歳です
```

## 例題
テンプレートリテラルを用いて、以下の例題に取り組んでみましょう。

```javascript: qiita.js
const name = "John";
const age = 20;

// 「ぼくの名前は〇〇です」とコンソールに出力してください
console.log("ぼくの名前は" + name + "です");

// 「今は〇〇歳です」と出力してください
console.log("今は" + age + "歳です");

```
定数について

変数とよく似たものに、定数があります。
定数は```let```の代わりに```const```を用いて定義します。変数と定数の違いについて学習していきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/bce34e79-de80-4311-a65a-e2091e6de297.png)

### **定数と変数の違い**
変数と定数の違いを見てみましょう。
左の図のように、変数は一度代入した値を更新することができました。
しかし、右の図のように定数は値を更新することはできません。 定数の値を更新しようとすると、コードを実行した際にエラーが発生してしまうので気をつけましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/2e1523db-d08f-4564-bbe6-3728f240a482.png)

:::note warn
定数を使うメリット
定数のメリットは、「後から値を更新できない」ことにあります。
これは一見不便に感じるかもしれませんが、予期せぬ更新を防ぐことができ、より安全なコードを書くことができます。
コードの量が増えるにつれて、このメリットを実感できるようになります。
<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/21a15cd2-d2a3-42ac-87c5-8eef959bc4c5.png)
:::

## 例題
以下の例題に取り組んでみましょう。
```
//定数languageを定義してください

//定数languageの値を出力してください

//定数languageを用いて、「〇〇を話せます」と出力してください            
```
変数の値の更新

### **変数の更新**
変数は、一度代入した値を変更することもできます。
一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされます。
定義するときとは違い、「let」は必要なく、「変数名 = 新しい値」と書けば値が変更されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/1f2abeed-b507-4d0c-8c9f-e7f5eefe5437.png)

### **変数の更新のイメージ**
下の図で変数の更新のイメージを見てみましょう。
プログラムは上から順に実行されるので、後で代入された値で変数の中身が更新されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/42f03c66-e222-4d00-beae-a708520d8d2d.png)

## 例題
以下の例題に取り組んでみましょう。

今回はすでに変数```name```が定義されています。変数```name```の値を``` "学習サイト" ```に更新し、変数```name```の値を出力してください。

```javascript: qiita.js
let name="HelloWorld";

console.log(name);

//変数nameの値を"学習サイト"に更新してください

//変数nameの値を出力してください
```

### **変数自身を更新する**
すでに定義している変数```number```の値に```3```を足したい、という時の例を見てみましょう。
これは左の図のように、```number```に```3```を足して再び```number```に代入することで実現できます。
「=」の右側の```number```は値に置き換わり、計算された結果が左の```number```に代入されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/cfbe344a-fe96-4caa-8472-07ff37c39c2f.png)

### **変数自身に代入するイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/6c09f2a0-1802-4feb-9431-37942c9968fb.png)

<br>**省略した書き方**
```number = number + 10```といった書き方には、省略した書き方もあります。よく使いますので、下の図をぜひ覚えましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/61cd0f2d-d8fb-4cbc-a01b-fd4998662c9c.png)

## 例題
以下の例題に取り組んでみましょう。
今回はすでに変数```number```が定義されています。
変数```number```の値に```3```を加えた値を出力し、その後、変数```number```の値を```2```で割った値を出力してください。
【補足】省略した書き方を用いても問題ありません。

```javascript: qiita.js
let number = 7;
console.log(number);

//変数numberの値に3を加えてください
console.log(number);

//変数numberの値を2で割ってください
console.log(number);
```
変数の役割について

### なぜ変数を使うのか？

プログラムの中には多くの値が登場します。
プログラムを書くときは、それらの値を間違いなく扱い、さらに値の変更に対応しやすくすることが求められます。そのために、変数を使用します。

変数には以下のようなメリットがあります。

:::note info
同じ値を繰り返し使える
変更に対応しやすい
値の意味が分かりやすい
:::

「同じ値を繰り返し使える」「変更に対応しやすい」という具体例を見てみましょう。
左の図のように「○○さん、おはようございます。」と何度も書くのは面倒ですが、 右図のように変数を使えば同じ値を繰り返し使え、楽にコードを書くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/2e3af759-fd07-451d-9c35-81d388dac258.png)

また、文章が後ほど変更されても、変数を用いていれば、代入する値を変更するだけで全ての変更に対応できます。

### **変数の命名ルール**
変数名（変数の名前）は自由に決めることができますが、以下の図を参考に、できるだけ分かりやすい名前をつけるようにしましょう。
<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/b403a20f-c1c5-44d2-8e11-7163d8118c17.png)
Developers Summit2025のレポ、ではなく実践してみようと思ったことをまとめてみた

# Developers Summit2025に参加しました
2025/2/13-14に目黒雅叙園で行われたDevelopers Summit2025に参加しました。
初めての参加だったのですが、学びになるセッションが多く、とても楽しいイベントでした。
何より、開発者主役のカンファレンスというのはそれだけで気分が良かったです笑

# レポートを書いてもいいのだけど
多分レポートはCodeZineでのオフィシャルなものや、弊社の他のメンバーが書いてくれると思うので、私の方では自分のチームが抱えている現状の課題に対して学んだことを突き合わせてこんなことしてみたい、こんなことを実践していきたいということを書いていこうと思います。

## コードレビュー観点を事前に決める

コードレビューについて現状、チームが抱えている課題は

- コードレビューの質にバラつきがある
- コードレビューの量が多すぎる
- コメントをしたことへの対処はされても、本質的な部分での改善がされない

というようなことです。

特に場当たり的に対処がされて、本質的に何が良くないのか、どうすれば良くなるのかということを理解しないまま対応をしていると思われることが多々あり、同じようなコメントを繰り返ししていることが多々あります。
それによって、いつまでも手戻りする量が改善されず、結果的にコードレビューの量も多くなり、時間を圧迫しているというのが現状です。

これに関して、下記の改善をしていこうと思っています

- 実装を始める前にコードレビューの観点をチームで決めて同意を取る
- 開発者はプルリクを作成する前にコードレビューの観点を元にセルフチェックをする
- レビュワーはコードレビューの観点を元にレビューをする

![スクリーンショット 2025-02-14 23.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476743/7c909df0-ee85-4433-b86d-e0cf3e5a0241.png)

レビュー観点を事前に決めておけば、実装をする時にもそれを気にしながら実装をしていけるし、セルフチェックを入れることでレビューの量も減らすことができると思います。
また、レビュー観点は実装前なので具体的なものというより、本質的な部分での観点になると思うので、それによって何が良くないのか、といったことへの理解も進むのではないかと思っています。

## PRFAQの作成

新機能を開発するに時、いつもぶつかる問題としてゴール設定に認識がプロジェクトメンバー内でばらつきがあることや、潜在的なリスク分析が甘いということがあります。
そこで、PRFAQを最初に作成し、プロジェクト内でのゴール設定や、潜在的なリスク分析を行うことで、新機能開発のスムーズ化を目指します。

また、テストの段階においてもPRFAQで定義した内容に実装されたものがマッチしているかをテストすることで、非エンジニアにもわかりやす形で品質が担保できていることを確認してもらえるのではないかと思っています。

## 仕様駆動テスト

テストファーストについてはここ半年くらいで少しずつ実践していたのですが、基本的には

テストコードを書く → 実装する → テストを実行する → テストが失敗する → テストを通るように実装を修正する → テスト成功 → さらにテストを追加する ・・・

といういわゆるTDDのような形で実践していました。

今回参加したセッションでもTDDを採用している話もあったのですが、先に完全にテストコードを書き切ってから実装する、という話もあり、その手法を一度取り入れてみようかなと思いました。
というのも、その手法だと下記のメリットがあると感じたためです。

- 完全なテストコードを事前に書くためには完全にふるまいを定義しておく必要があるので、テストコードがそのままふるまいの説明にもなる
- 実装前にテストコードだけの時点でレビューを行うことは、ふるまいのレビューにもなる
- 先に書いたレビュー観点を事前に決めておくことと合わせることで、内部品質・外部品質ともに認識を合わせてから実装に取り掛かれるので、よりよいコードになるはず

実際、コードレビューのタイミングで「これ思ってたふるまいと違うな」みたいなことも多いので、それを防ぐことができるのではないかと思います。

もちろんあまりにも完全さにこだわりすぎるのも良くないと思うので、その辺りは実践しながら調整していければと思っています。

## トラシューアニマルなのかもしれない

これについては実践というより、よくぞ言葉にしてくれた、という感じです。
自分はトラブルに限らず、CS経由でお客様からの質問にも積極的に対応をしていることでスキルアップや視界の広がりにも繋がっていると思うので今後も継続していきたいと思います。

# まとめ

他にもチームビルディングでも実践したり、社内に広めたいと思ったこともあったのですが、それはまた別の機会に。

最後に参加した感想を少しだけ。

最初のセッションで聞いた「DevX」という言葉がとても印象に残っていて、その精神が登壇された方々からすごく感じられたことがとても深く刺さりました。
お客様に提供する価値を向上させていくことはとても大切なことではあるけれど、開発者自身の開発体験がより良いものにしていくことがとても大切で、引いてはそれがお客様に提供する価値に繋がるとも思いました。

これはなにもエンジニアに限らず、営業も、デザイナーも、コンサルも同じだよなあと。
みんな得物は違えど、UXのプロフェッショナルなのだから、それを少しでも自分たちのDevXに使うだけでもきっと今より楽しく、健康的に仕事ができるはず、と強く思いました。
変数について

ここからは、変数について学習します。

変数はデータ（値）の入れ物（箱）です。
箱についている名前が「変数名」であり、箱の中に実際の値（文字列や数値など）が入っています。
下図のようなイメージをすると分かりやすいかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/57467c87-6ed4-42a3-8ea6-4da75b6cd3b5.png)


### **変数の使い方**
変数の使い方は簡単です。
左の図のように「"John"」という値が代入された変数nameを出力すると、右の図のように「"John"」という値が出力されます。
中央の図で示されているように、変数を使うと変数の部分は代入した値に置き換わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/c1e3e839-1781-44e3-8321-83abdf7fed30.png)

### **変数と文字列**
これまで学習してきたように、変数はクォーテーションで囲まないように気をつけましょう。
```console.log("name");```のように変数名をクォーテーションで囲むと、```name```が変数ではなく「文字列」として認識され、「name」とそのまま出力されてしまうので注意しましょう。

```javascript: qiita.js
letname="John";
console.log(name);
console.log("name");
```

```html:出力結果/コンソール
John
name
```

## 例題

以下の例題に取り組んでみましょう。

```
//変数nameを定義し、「HelloWorld」を代⼊してください

//変数nameの値を出力してください              
```
文字列の連結

「+」記号を用いると、文字列同士を連結することができます。
例えば、```"Hello" + "world"```とすると、```"Helloworld"```という1つの文字列になります。

```javascript: qiita.js
console.log("Hello"+"World");
console.log("A"+"B"+"C");
```

```html:出力結果/コンソール
Helloworld
ABC
```

<font color="#0000FF">⽂字列と数値の違い</font>

しつこいですが、ここでも文字列と数値の違いをおさらいしておきましょう。
```"3" + "5"``` は```"35"```という文字列になりますが、```3 + 5``` は```8```になります。
「文字列と数値は別物」ということをしっかり意識しましょう。

```javascript: qiita.js
console.log("3"+"5");
console.log(3+5);
```

```html:出力結果/コンソール
35
8
```
数値と計算

プログラミングでは、数値（数字）を扱うこともでき、足し算、引き算、掛け算、割り算の計算をすることができます。

<font color="#FF0000">※注意点
数値は文字列と違い、クォーテーションで囲みません。数値と記号はすべて半角で記述することに注意しましょう。</font>

## 【足し算「+」、引き算「-」】

```javascript: qiita.js
console.log(3);
console.log(5+2);
console.log(3-2);
```



```html:出力結果/コンソール
3
7
1
```

## 【⽂字列と数値】

下の図のように、```console.log(5 + 2);```は足し算の結果である数値の```7```が出力されます。
一方、```5 + 2```にダブルクォーテーション（""）をつけると、プログラム上で文字列として```5 + 2```と出力されます。

文字列と数値は明確に違うものであることを意識しましょう。

## 例題

以下の例題に取り組んでみましょう。

```
//5と3を足した値を出力してください

//20から8を引いた値を出力してください

//"4+5"を文字列として出力してください
```
JavaScriptを読み込む方法

### **今回は、HTMLでJavaScriptを読み込む方法について学んでいきます。**

実際には、JSはHTMLに動きをつけるなどといったクライアントサイドの実装だけでなく、PHPやRubyのようなサーバーサイドの実装にも利用できますが、 今回はHTMLに組み込んで使うというクライアントサイドの実装について解説します。

:::note info
HTMLでJavaScriptを読み込む2通りの方法
WebサイトにJavaScriptで動きをつける際には、JavaScriptをHTMLで読み込む必要があります。
HTMLにJavaScriptを読み込むには、以下の2つの方法があります。

[①JavaScriptをHTML内に記述する](#1-はじめに)
[②JavaScriptを外部ファイルとして読み込む](#1-はじめに)
:::

 <br>**①JavaScriptをHTML内に記述する**
 
JavaScriptのコードを直接HTMLファイル内に埋め込み、読み込ませる方法です。
この方法では、HTML内のheadタグかbodyタグの中にscriptタグを挿入し、scriptタグ内にJavaScriptのコードを記述します。

記述する場所については、bodyタグの最後に書くことが推奨されています。
これは、HTMLの読み込み時にJavaScriptの読み込みが始まると、そこでHTMLの読み込みが一旦止まってしまうのを避けるためです。
scriptタグはbodyタグの最後に入れるようにしましょう。

```javascript:qiita.js
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <script>
        // ここにJavaScriptのコードを記述
    </script>
</body>
```

HTML内に直接記述する方法は簡単ですが、デメリットもあります。
それは、複数のページに同じJavaScriptを適用したいときに、全てのページにコードを記述しなくてはいけないということです。

複数ページに同じJavaScriptを適用させたい場合は、以下のような方法で外部ファイルとして読み込む方法が便利です。

<br>**②JavaScriptを外部ファイルとして読み込む**
JavaScriptを外部ファイルとしてHTMLで読み込む方法を紹介します。
この方法では、scriptタグのsrc属性にJavaScriptファイルを指定します。
こちらもHTMLの読み込みの邪魔にならないように、bodyタグの前に記述します。

## 例題
では、実際にJavaScriptを使って簡単なアラートを表示させてみましょう。
以下のソースコードをエディタに貼り付けて動かしてみましょう。

```html:qiita.js
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <h1>JavaScript</h1>
    <button type="button" onclick="ShowAlert()">ここをクリック</button>
    <script>
        function ShowAlert() {
            alert("Hello world!!");
        }
    </script>
</body>
</html>
```

今回はHTMLファイル内に直接JavaScriptのコードを記述しています。scriptタグに囲まれた中に記述しているのがJavaScriptのコードです。
ShowAlart()という関数を作成し、その中にアラートを表⽰するプログラムを書きます。
今回は、アラートは以下のように書くことで実装してください。

```html:
alert(‘表示させたい文字列、値’);
```
JavaScriptについて

このコースでは、JavaScriptの基本的なコードの書き方や変数の扱い方について学んでいきます。

## JavaScriptとは

主にWebサイトやWebアプリケーションを開発する際に利用されるプログラミング言語です。
HTMLに動的な処理を実装することができ、Webサイトでよく見られるスライドショーやプルダウンメニューなどは、JavaScriptを使って実装されていることが多いです。

Webページは、HTMLによって構造が作られ、CSSによって装飾が施され、JavaScriptによってアニメーションなどの動きが作られます。
<br>JavaScriptはDOM（Document Object Model）という仕組みを使い、HTMLをツリー構造のオブジェクトデータとして取得します。
そのデータを操作することで、HTMLに動きを付与することができます。

現在、「ライブラリ」という便利な機能を集めたものが多く開発され、世界中で利用されており、 代表的なJSのライブラリやプラットフォームは「jQuery」、「React」、「Node.js」などがあります。

:::note
JavaScriptを実行してみよう （JSと略して呼ぶこともあります。）

まずは、JSのコードを実行してみましょう。
コンソールという画面に文字を出力（表示）します。 ```console.log("○○");```というJSのコードを書くと、丸括弧の中の◯◯という文字がコンソールに出力されます。

![スクリーンショット_2025-02-09_6.42.49-removebg-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/c6abd496-610a-331b-a08d-2529c2d7f4ae.png)

:::

:::note
コンソールとは
>コンソールとは、エラーや重要なメッセージを表示するウィンドウです。
通常、私たちが書くコードはコンソールに表示されませんが、意図的にメッセージを表示させることができます。 例えば、デバッグ情報や確認したいデータをコンソールに出力することで、プログラムの動作を確認する際に非常に便利です。
画面で表示させる際に、（JavaScriptではconsole.log()）を用いることで、コンソールにデータを出力することができます。
:::

### -- コンソール画面の開き方について --

#### ①ブラウザを開いて、右クリックを押して「検証」をクリックします。

![スクリーンショット 2025-02-09 6.47.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/43685e8f-93ff-952c-a449-d260e413cdb9.png)

#### ②以下のような画面が開きます。

以下の画面のことをデベロッパーツールと呼びます。今後頻繁に使いますので必ず覚えておきましょう。
デベロッパーツールを開き、「コンソール」タブをクリックします。すると、JSの実行結果を確認することができます。

![スクリーンショット_2025-02-09_6.51.53-removebg-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/dfe45095-83f9-b200-27d4-ce171d1a7288.png)

:::note warn
それでは、早速JSで書いてみましょう。

```console.log()```は、括弧内に入力された値をコンソールに出力します。
文字列を出力する場合は、シングルクォーテーション（'）かダブルクォーテーション（"）でその文字列を囲みます。

![スクリーンショット_2025-02-09_6.58.53-removebg-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/3a42192a-83dc-c23b-1ec7-3a4cf501d238.png)

JavaScriptの文の最後はセミコロン（;）で終わります。 
セミコロンはなくても正常に動作する場合が多いですが、思わぬ不具合が生じる可能性があるので、忘れずにつけましょう。

![スクリーンショット_2025-02-09_7.01.34-removebg-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3514659/f2a22773-53ff-dec5-1e9b-613f915e94cc.png)
:::
Power Automate インポートのエラー「'GetTable' failed with status code 'Unauthorized'.」回避策

# 発生したエラー
Power Automateのクラウドフローを別テナントの開発環境に移動させるため、フローのインポートを実行したところ、以下のエラーが発生しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/88659c8b-0fb2-4ac1-aff0-788c8da69d98.png" width=100%>

# 原因
問題の原因はSharePointサイトの依存関係です。

Power Automateフローをエクスポートすると、zipファイルが生成されます。このzipファイルを展開すると、```definition.js```というJSONファイルが含まれています。この```definition.json```には、エクスポート元のテナント内にある開発環境のSharePointサイトへの参照が残っています。

そのため、インポート先のテナント内でSharePointコネクタの接続が正常に完了していても、現在のユーザーが元のSharePointサイトにアクセスできない場合、認証エラーが発生します。

# 回避策
SharePointコネクタのアクションでは、「サイトのアドレス」や「リスト名」「ライブラリ名」を直接選択するのではなく、変数を使用することで回避できます。さらに、環境変数を利用することでも同様の回避が可能です。重要なのは、これらの値を直接参照せず、動的に設定することです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/b9fa03ad-6173-435d-9a0f-27d6f18fc544.png)
いつのまにか MSYS2・MinGW に Crystal 言語が来ていた！！

この２年ほど、Crystal言語は精力的にWindowsへの対応を続けている。

これは [HertzDevil](https://github.com/HertzDevil) さんの大活躍によるところが大きい。

だいたいRubyのコードを書くと、実行可能なexeファイルが生成されるのは、自分にとってはほとんど夢のような話で、実に素晴らしい時代になったと感じる。それでも、C言語のライブラリを呼び出す時は使いにくい箇所が多いけれども、それはWindowsを使う限り仕方がないところである……

と思っていたら、1.15 から Crystal が Mingw に来ていた！　これはすごく嬉しい！！

というのは、これまでCrystalをWindowsにインストールしようと思ったら、Visual Studio 2022 とか入れて、Microsoft謹製のコンパイラをインストールしなくちゃいけなかったのである。

基本趣味でプログラミングしているので、Linuxも体系的に勉強したことはないのに、Windowsなんかさらに何もわからなくて触りたくはないのである。Mingw使えるならもちろんMingwを使いたい！！

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/583aa3ab-a0a5-4b40-ac67-cb8874de0213.png)](https://crystal-lang.org/install/#windows)

https://crystal-lang.org/install/#windows

```powershell
pacman -S mingw-w64-ucrt-x86_64-crystal mingw-w64-ucrt-x86_64-shards
```

試しに自作ネタツールのlolcatをコンパイルしてみた。

```powershell
git clone https://github.com/kojix2/lolcat.cr
cd lolcat.cr
shards build --release --static
```

```
ls bin

-a----        2025/02/14     14:35        3608454 lolcat.exe
```

最高だ。EXEファイルが１個あるだけ！
libevent.dll も、libgc.dll もないではないか！

あとは簡単に mingw のライブラリにリンクできるようにする努力が鋭意行われているので、半年ぐらいすると、CrystalがWindowsでもかなり自由に使えるようになっている気がする。

WindowsユーザーだからCrystalになかなか手が出なかった人もいるかもしれませんが、これからはCrystalが使えるようになっていくと思います。

この記事は以上です。
#0048（2024/02/14）ubuntuのネットワーク関係のコマンド

# Ubuntuにおけるネットワーク関連コマンド一覧

以下の表は、Ubuntuでよく使われるネットワーク関連コマンド（ping, arp -a, ifconfig, nmap, dmesg, ufwなど）の利用場面、具体的な使い方、得られる情報についてまとめたものです。  
また、これらに関連する似たコマンドも合わせて記載しています。

| コマンド   | 利用場面                                 | 具体的な使い方                              | 得られる情報                                                     |
|------------|------------------------------------------|---------------------------------------------|------------------------------------------------------------------|
| **ping**   | ネットワーク接続確認                     | `ping google.com`                           | 対象ホストへの到達性、往復時間、パケットロス率                     |
| **arp -a** | ARPキャッシュの確認                      | `arp -a`                                    | ローカルネットワーク内のIPアドレスとMACアドレスのマッピング         |
| **ifconfig** | ネットワークインターフェースの状態確認・設定<br>(現代では`ip`コマンドが推奨) | `ifconfig`                                  | 各インターフェースのIPアドレス、MACアドレス、状態、統計情報           |
| **nmap**   | ネットワークスキャン、セキュリティ調査    | `nmap 192.168.1.0/24`                         | ネットワーク上のホスト検出、開いているポート、稼働中のサービス         |
| **dmesg**  | カーネルメッセージの確認                   | `dmesg | less`                              | システム起動時のログ、ハードウェアのエラーやドライバの情報              |
| **ufw**    | ファイアウォール管理                     | `ufw status`<br>`ufw allow 22`                | 現在のファイアウォールの状態、設定されたルール、許可・拒否のポート情報   |
| **netstat**| ネットワーク接続やルーティングの確認       | `netstat -tuln`                             | 現在リッスンしているポート、接続状況、ルーティングテーブル              |
| **ss**     | ネットワークソケットの状態確認<br>(netstatの代替) | `ss -tuln`                                  | ソケットのリスニング状態、接続情報、統計情報                         |
| **ip**     | ネットワーク管理の最新ツール<br>(ifconfigの代替) | `ip addr`<br>`ip route`                       | ネットワークインターフェース情報、IPアドレス、ルーティング情報          |

---

## 補足

- **ping** は、ネットワーク上のホストが生存しているか、また応答速度など基本的な接続状況を確認するために使用します。
- **arp -a** は、ローカルネットワーク内でデバイス同士の通信に必要なIPとMACの対応関係を確認する際に便利です。
- **ifconfig** は古くから使われていますが、現代のUbuntuでは **ip** コマンド（例: `ip addr` や `ip link`）が推奨されています。
- **nmap** はセキュリティ監査やネットワーク探索に用いられ、対象ネットワークの詳細な情報を収集できます。
- **dmesg** はシステムの低レベルのログを表示するため、ハードウェア障害やドライバの問題を調査する際に役立ちます。
- **ufw** はUbuntuのファイアウォール設定を簡単に管理できるツールで、ネットワークの安全性を維持するために用いられます。
- **netstat** と **ss** はどちらもネットワーク接続の詳細情報を表示しますが、**ss** の方が高速で最新のカーネル機能を活用しています。
【Zed】Zetaを使用してコードを補完する方法

## 有効化

エディタの右上に表示されている「Introducing: Edit Prediction」ボタンをクリックします。

![スクリーンショット 2025-02-14 23.27.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/2413981f-26af-490f-b5ce-007f816ef822.png)

モーダルが表示されるため、内容を確認しチェックボックスにチェックを入れ「Enable Edit Prediction」をクリックします。

![https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-2342443-5a78207a-6cac-4e18-9b25-b334ed0a8fa5.pngのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/2e6881da-cf51-4915-89fb-5e4f92d1a5a8.png)

## 使い方

以下の画像のようにスニペットや言語サーバーの補完が存在する場合には`option`キーを押下することでプレビューします。
採用するにはプレビュー状態で`tab`を押下します。

![スクリーンショット 2025-02-15 0.13.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/981152e5-fb89-43a6-9db2-cc7cc1b642d3.png)

スニペットや言語サーバーの補完が存在しない場合は`tab`を押下することで採用できます。

## 参考

https://zed.dev/blog/edit-prediction
Raspberry Pi 4 で Psychtoolboxを動かす (3)：日本語表示編

# はじめに
　この記事は、
 [Raspberry Pi 4 で Psychtoolboxを動かす(1)：準備編](https://qiita.com/dylab/items/1061640d28160b3fd43e)
 [Raspberry Pi 4 で Psychtoolboxを動かす(2)：動作確認編](https://qiita.com/dylab/items/dff0eb0d0966e5ea8eb6)
の続きです。よろしければそちらを先に確認していただけると幸いです。 
 RaspiOS + Octave + PTBの環境で日本語文字を表示させることに苦労したので、誰かの役に立てればと思い、作業の記録を公開します。

 # いきなり解決策
　下記のプログラムを実行すると、グレー（RGBそれぞれ128）背景に黒文字で 「`日本語でこんにちは！`」 と画面中央に3秒間表示されるはずです。

 ## プログラム
 ```matlab:displayJpChar.m
clear;
clc;

% 文字列の設定
textStr = '日本語でこんにちは！';
fontSize = 60;
fontName = 'Noto Sans CJK Regular';

% 文字色と背景色
textColor = [0, 0, 0]; % 黒
bgColor = [128, 128, 128]; % 灰色

% 文字数に基づいて画像サイズを決定
numChars = length(textStr);
charWidthFactor = 0.4;
imgWidth = round(fontSize * numChars * charWidthFactor);
imgHeight = round(fontSize * 1.5);

% 背景画像を作成
img = uint8(repmat(reshape(bgColor, 1, 1, 3), imgHeight, imgWidth));

% Figureの作成とサイズ指定
finalFig = figure('Visible', 'off', 'Position', [100, 100, imgWidth, imgHeight]);
finalAx = axes('Position', [0 0 1 1]);

% 画像の描画
imshow(img);
hold on;
xlim([0, imgWidth]);
ylim([0, imgHeight]);
set(gca, 'YDir', 'reverse');
axis off;
axis tight;

% 文字の描画と画像化
text(imgWidth / 2, imgHeight / 2, textStr, ...
    'Color', textColor / 255, ...
    'FontSize', fontSize, ...
    'FontName', fontName, ...
    'HorizontalAlignment', 'center', ...
    'VerticalAlignment', 'middle');
finalFrame = getframe(finalAx);
close(finalFig);

% PTBの画面に表示
Screen('Preference', 'SkipSyncTests', 1);
scrnNum = max(Screen('Screens'));
mainWindow = Screen('OpenWindow', scrnNum, [128 128 128]);
tex = Screen('MakeTexture', mainWindow, finalFrame.cdata);
Screen('DrawTexture', mainWindow, tex);
Screen('Flip', mainWindow);

WaitSecs(3);
Screen('CloseAll');
 ```

## 簡単な解説
　これまでの経験からPTBが日本語文字をうまく扱えないことが原因だろうということで、PTB内の関数に頼らず、Octaveが用意している関数で文字列を画像化する手続きを取る案で行くことにしました。MATLABでは使えるけども、Octaveでは使えない関数がいくつかあり、「Octaveの関数だけでやる」という点に苦労しました（ChatGPTにもたくさん相談しました）。
 　まず 「`% 文字列の設定`」、「`% 文字色と背景色`」 あたりで必要な設定をします。
  　次に　「`% 文字数に基づいて画像サイズを決定`」 の部分で文字列を画像化するにあたり、文字列の長さやフォントの大きさの情報に基づいて、画像の縦横サイズを算出しています。 算出された値に基づいて、「`% 背景画像を作成`」 の位置でまずは文字列を載せる背景部分を作成しています。
   　続いて、「`% Figureの作成とサイズ指定`」、「`% 画像の描画`」 の位置で文字列を画像化するための準備です。この辺りはあまり理解していません(笑)
    　「`% 文字の描画と画像化`」 で指定した文字列、文字色、フォント、フォントサイズ、配置位置を決めて、画像化したものを作成します。最終的に画像化された文字列は変数`finalFrame` に格納されています。
     　あとは 「`% PTBの画面に表示`」 で画像をScreenに表示する方法と同様の手続きで画面に描画します。

# おわりに
　RaspiOS + Octave + PTBで日本語文字を表示させるたびに上記のコードを書いていくのはあまりにも冗長すぎます。適当な名前で関数化して、引数として文字列を与えるだけで画面に描画する内容を作ってくれるようにするのが良いと思います。
 
 　ちなみにこのコードは（Windows +）MATLAB+PTBの環境ではうまく動きません。その原因は、文字列の長さに応じた画像サイズの算出の仕方がMATLABとOctaveでは違うからのようです。MATLABの方がもう少し簡単に画像サイズの算出ができます。
  
　文字列を画像として保存するというのは意外とニーズがあることなのかなと思います。上記の「`% PTBの画面に表示`」 から下の部分を下記のコードに書き換えると、textStrで指定した日本語文字列をtext_image.jpgという名前で保存してくれるようになります。こちらもお試しください。

 ```matlab:コードの変更
% 画像の保存
outputFileName = 'text_image.jpg';
imwrite(imgWithText, outputFileName, 'Quality', 100);
 ```