OmniAICreator/Qiita-1.07M huggingface dataset:
[Deno] Fresh + OpenAI SDK for DenoでAI LINE Botを作ってみる

# はじめに

最近DenoでのLINE Bot開発が手軽でいいなと思いはじめていろいろやってみています。今回は最近登場した [OpenAI SDK for Deno](https://deno.com/blog/openai_sdk_deno)を組み込んだAI Botをカンタンに作ってみようと思います。

# やってみた

[前回](https://qiita.com/bathtimefish/items/0efca5c0fb6e735c080f)作った[Fresh](https://fresh.deno.dev/)のBotをベースにします。[Text Generation](https://deno.com/blog/openai_sdk_deno#text-generation-with-gpt-4-turbo)のサンプルを参考に `routes/api/messaging.ts` を以下のように更新します。

```routes/api/messaging.ts
import type { Handlers, FreshContext } from "$fresh/server.ts";
import { messagingApi, MessageEvent } from "npm:@line/bot-sdk@8.4.0";
import type { ClientConfig, TextEventMessage } from "npm:@line/bot-sdk@8.4.0";
import OpenAI from "https://deno.land/x/openai@v4.33.1/mod.ts";

const config: ClientConfig = {
    channelAccessToken: "YOUR_CHANNEL_ACCESS_TOKEN",
    channelSecret: "YOUR_CHANNEL_SECRET",
};
const client = new messagingApi.MessagingApiClient(config);

const ai = new OpenAI();

export const handler: Handlers =  {
  async POST(_req: Request, _ctx: FreshContext): Promise<Response> {
    const body = await _req.json(); 
    const event: MessageEvent = body.events[0];
    const textMessage = event.message as TextEventMessage;
    const chatCompletion = await ai.chat.completions.create({
      messages: [{ role: "user", content: `あなたは何でも知ってる物知り博士です。次の"#動物の名称"欄に記載される動物の生態を詳しく教えてください。ただし、"#動物の名称"欄に動物の名称ではないものが記載された場合は、"それは動物の名称ではありません"と回答してください。\n\n#動物の名称: ${textMessage.text}` }],
      model: "gpt-4-1106-preview",
    });
    const completion = chatCompletion.choices[0].message.content;
    await client.replyMessage({
      replyToken: event.replyToken,
      messages: [
        {
          type: "text",
          text: completion,
        },
      ],
    });
    return new Response(null, { status: 204 });
  }
};
```

Open AIのAPIを環境変数に設定して実行します

```shell
OPENAI_API_KEY=[YOUR OPENAI API KEY] deno task start

Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 6 routes and 1 islands.

 🍋 Fresh ready 
    Local: http://localhost:8000/
```

LINE Chatで動物の名前を送信すると詳しい生態の説明が返ってきました。

![SC_20240415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/6ddf7ab7-e2b5-2729-922e-42c5bd4ae43b.png)

# おわりに

Open AI SDK for Denoが公式にリリースされたことでDenoでもChatGPT等を利用したAI開発が加速しそうです。FreshなどのWeb Frameworkと組み合わせれば非常にカンタンにLINE Botも開発できることがわかりました。

やはりTypeScriptでの開発はnode.jsよりDenoのほうがカジュアルにやれる感覚があります。モジュールも充実してきているので積極的にやっていきたいと思います。
git@github.com: Permission denied (publickey). の解消について（漠然）

## 背景

・Gitの概要が分かったので自力で作業環境を以下の通り整えようとした。
1. githubでリポジトリを新規作成
2. `git init`で管理したいフォルダーを設定
3. 既にバージョン管理したいファイルがあったのでREAME.mdは生成せずQuicksetup通りにコマンド実行
＞ しかし`push`時にエラー

```:実行した作業（Quick setup通り）
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/〇〇〇〇/〇〇〇〇.git
git push -u origin main ←ここでエラー
```
```:エラー内容
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```


https://qiita.com/Kintech/items/6c5bde142b25293cd6d2


　上記リンクの方と同じ心境に陥ったので、この方が紹介されているリンク先の情報も参考にさせていただいた。

 # 対処について
 
:::note info
 （今回の原因と思われる操作）
 1. **gitbashでコマンド操作していなかった
（ubuntuを使っていた）**
 2. **`git remote set-url`が有効だった
 （`remote rm`→`remote add`を実行していた）**
:::

##  1. gitbashでコマンド操作していなかった
（冒頭のリンク先記事より）
　＊ <a href="https://qiita.com/shizuma/items/2b2f873a0034839e47ce#%E6%8E%A5%E7%B6%9A%E3%82%92%E7%A2%BA%E3%81%8B%E3%82%81%E3%82%8B:~:text=%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%80%82-,%E6%8E%A5%E7%B6%9A%E3%82%92%E7%A2%BA%E3%81%8B%E3%82%81%E3%82%8B,-%24%20ssh%20%2DT%20git">接続を確かめる</a> の手順より、`ssh -T git@github.com`を実行しても期待していたような表示が返ってこなかった事に違和感。
⇒『Q．コマンド云々ではなく、そもそも自分の作業環境がおかしいのでは？』
＞＞＞GitHub Docs を眺めていたら「<a href="https://docs.github.com/ja/authentication/troubleshooting-ssh/error-permission-denied-publickey#make-sure-you-have-a-key-that-is-being-used">Git Bash を使用している場合は、…</a>」という文言を発見し、自分がUbuntuを使っているのが原因かと推測

https://docs.github.com/ja/authentication/troubleshooting-ssh/error-permission-denied-publickey

＞＞＞**Ubuntuで操作していたので、GitBashで先述の接続確認を行ったら解決した。**

##  2. `git remote set-url`が有効だった
　Quicksetupでリモートリポジトリを作成済みだったので「削除→作成」の対応をした。その際は以下の記事を参考にさせていただいた。

https://qiita.com/KazuyaInoue/items/b14669e2fae9dda78229

＞＞＞冒頭で紹介したエラー内容が依然として表示される。

＊再三利用させていただいている以下記事の、

https://qiita.com/shizuma/items/2b2f873a0034839e47ce

<a href="https://qiita.com/shizuma/items/2b2f873a0034839e47ce#%E6%8E%A5%E7%B6%9A%E3%82%92%E7%A2%BA%E3%81%8B%E3%82%81%E3%82%8B:~:text=ssh%20%2DT%20github-,gitHub%E3%81%A8%E3%82%84%E3%82%8A%E3%81%A8%E3%82%8A%E3%81%99%E3%82%8B,-GitHub%E3%81%A8%E5%AE%9F%E9%9A%9B">gitHubとやりとりする</a> の項目より、リモートリポジトリのURL設定状況が
`https://github.com/[ユーザID]/[リポジトリ]`となっていたため、**`git remote set-url`で設定内容を変更したら解決した。**


 # 所感など
 　原因がハッキリせずと疑問が残ったので記事としても微妙になってしまいました。この記事も何か分かり次第随時更新できればと思います。
40代文系おじさん独学プログラミングは芸術みたいで些細な喜びを感じるものかも

プログラミングの勉強を初めて思ったこと
難しいけど、楽しい。自分で作ったものが動くととても面白い

10000000000とかカウントさせてるだけで楽しい

プログラミングっていうとややこしくて難しいって思うけど芸術に似ているなと感じた

ギターを始めた人の9割は挫折するが1割は生涯の趣味になるらしい
イラストを書いたりするのも難しくて、すぐ諦めちゃう人も多い


自分の理想が高すぎて、ちょっとしたことが楽しめなくて続かないだけなんじゃないかなぁ～と感じる

何が言いたいかというと、練習してやっぱりうまくいかない！って思うより、やってみて、今日は少しうまく行った！と思ったほうが楽しい

壮大な脳内の傑作を最初から目指してしまうから辛いんだと思う

たとえば、ギターなら音が出たー！ すげぇ～チューリップの曲弾けた 楽しい
私今日とりあえず棒人間書いてみた！　棒人間でいろんなアクション書いてみようかな！とか

そういう些細なことに感動しながら楽しんでいくものかなって思います

プログラミングなんかは、うごかない、うごかない、うごいたー！うおー！すげ～かっこいい！まるで私はハッカーみたいだみたいな気分になれるしとても面白いと思うんだよね。

たとえば

３の倍数のときに「付き合ってください」５の倍数のとき「はい////」それ以外は「告白したいなぁ」って表示させるプログラムとか書いて、１５のときに「付き合ってください」「はい///」 告白成功だぁあ～～！！
とか想像して遊んだりするのも面白いよね


何が言いたいかというと、独学で勉強しているなら、誰かに怒られるわけじゃないし、いきなり壮大なものは無理だけど、毎日の積み重ねでうまくなったなぁって感じるのは大事ってこと

ジグソーパズルとかも作ってるときが一番楽しいじゃない？ 多分プログラムも作ってるときが楽しいんだよ

仕事じゃそうはいかないかもしれないけれど、独学で勉強するなら、できないことが楽しいって思いながらやりましょう

１ヶ月かかってConohaVPSでUbuntu入れてSecurity設定してDocker composeでNginxをつかってHello World表示できて感動しました

これで私もインフラエンジニアの門をガンガン叩いていると言えますでしょうか？門番にまだ入れてもらえなさそうなのでもっと頑張ります
TypeScript+React+Goで適当にアプリを作ってみる

# この記事について
色々あってReact+Goについて知る必要が出てきたので、勉強がてら適当にアプリ作ってみました。React+TypeScript+Goのアプリって結構世間にありそうだし、ネットに情報たくさんあるから勉強しやすいかなとか思ってたらとんでもない。これをトレースすればOKみたいな記事がなくって結構苦労したので、何なら自分が記事書くか、という感じ。

# 記事の作者について
最近はPMしかやっていないザコRubyist。ReactとGoの経験はなく、TypeScriptは実務でほんのりやったくらい。ちなみに次の職場ではエンジニアやらない。

# ソースはここ
https://github.com/gitk47320/go_react
* ReactとかGoとかど素人で、ネットの情報かき集めてとりあえず動くところまで何とかしたというレベルなので、使用時はその辺気をつけてほしい
* 言い訳がましいですが、命名とか細かいところでイケてないなあって思うところはありますので、そこはご愛敬。気が向いたら直す予定

# アプリの構成について
* ローカル環境はdockerで構築
* フロントエンドはReact+TypeScriptでNext.jsとかは使ってない
  * コンポーネント分割したり、型定義それなりにやったりまあまあ頑張ったと思う。何ならめっちゃ苦労した
* バックエンドはGoでAPIサーバとして実装。WebフレームワークにGinを使った
  * Gorm使ってDB周りもやりたかったけど、めんどくなったので気が向いたらやります
  * いっちょ前にテストコードも書いてみました

# 終わりに
* ソースについて色々解説しようと思ったけど特に書くべきこともないと思ったので、ソースだけQiitaにばらまくことを目的にこの記事を書きました
* アプリ作るにせよ、勉強するにせよ、今回私が作ったくらいのところがスタートラインかなと思うので、そこに時間をかけたくなかったり、ハマったときに私の記事で助かる人がいれば幸いです
cscの作法 その491

# 概要
cscの作法、調べてみた。
練習問題やってみた。

# 練習問題
datatableを、DataGridViewで、表示せよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/68a2e847-da8c-4581-6424-aeb985959927.png)


# サンプルコード

```

using System;
using System.CodeDom;
using System.CodeDom.Compiler;
using System.Reflection;
using System.Windows.Forms;
using System.Drawing;
using System.Data.OleDb;
using System.Data;

class form1: Form {
	form1() {
		Text = "DataTable";
		ClientSize = new Size(400, 300);
		DataTable dt = new DataTable();
		dt.Columns.Add("id", typeof(int));
		dt.Columns.Add("Name", typeof(string));
		dt.Columns.Add("Age", typeof(int));
		dt.Rows.Add(1, "太郎", 20);
		dt.Rows.Add(2, "次郎", 15);
		dt.Rows.Add(3, "三郎", 10);
		DataGridView gd0 = new DataGridView();
		gd0.Location = new Point(20, 20);
		gd0.Size = new Size(350, 250);
		gd0.DataSource = dt;
		Controls.AddRange(new Control[] {
			gd0
		});
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```


以上。
ApexのString.join()の代わり

String.join()は間に空文字列があるとseparatorが連続してしまうので代わりに以下
```apex
  private static String join(List<String> values, String separator) {
    String ret = '';
    for (String value : values) {
      if (String.isEmpty(value)) {
        continue;
      }
      if (!String.isEmpty(ret)) {
        ret += separator;
      }
      ret += value;
    }
    return !String.isEmpty(ret) ? ret : null;
  }
```
Eclipseの動的プロジェクトの作成について

Eclipseで開発の勉強をしていくうちに、動的Webプロジェクトの開発でハマってしまいましたので備忘録として記述します。
立ち上げ方は調べると出てくるのですが、どれもEclipseのバージョンが古くてよく理解できなかったんですよね。
最新のバージョンでは表示や進め方が少し異なるようです。
この記事では、Tomcat v9.0をインストールした前提でお話を進めます。

まず動的プロジェクトの作成からです。
ファイル→新規→その他　でウィザードの選択画面に入りますので、「動的Webプロジェクト」を選択します。
![スクリーンショット 2024-04-15 142840.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3697057/9bddff7e-270e-ab37-80a2-a681f67be9b0.png)

その後プロジェクト名のみ記入します。
それ以外は特に何もせず、「次へ」をクリックします。
![スクリーンショット 2024-04-15 145253.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3697057/6d80e273-e395-fede-a8cb-e56b06f76b81.png)

この画面に遷移したらこのまま「次へ」をクリックします。
※旧バージョンではここが「src」になっており、表示が異なります。
![スクリーンショット 2024-04-15 142947.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3697057/c56356a8-59b2-b56d-b803-6ebb8fa42a93.png)

次に「web.xmlデプロイメント記述しの生成」にチェックを入れ、「完了」をクリックします。
※旧バージョンでは「コンテンツディレクトリー」が「WebContent」となっており、表記が異なります。
![スクリーンショット 2024-04-15 143007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3697057/77dec4b1-3ba7-a332-b39f-36b4442473f6.png)

完了するとJavaEEのパースペクティブへ遷移しますが、作成したプロジェクトは見当たりません。どこに作成されるかと言うと、Javaパースペクティブのパッケージエクスプローラー内に作成されます。
※旧バージョンでは、JavaEEにプロジェクトとして作成されますので注意が必要です。
![スクリーンショット 2024-04-15 143102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3697057/279ec5b9-18f5-2516-a0a3-0f6e70bcc368.png)

また余談ではありますが、JSPファイルの作成場所も異なります。
旧バージョンではWebContentを選択してJSPファイルを作成しますが、新しいバージョンでは代わりにwebapp内で作成して開発を行います。
JavaEEのパースペクティブでは、Tomcatサーバーにプロジェクトを追加して起動、「localhost:8080/プロジェクト名/JSPファイル名」でアクセスすると内容を確認できます。
ファイル作成方法の詳細は以下のリンクを参考ください。
https://uha-blog.com/java/2022-eclipse-web-app/

同じような所で躓いている方の手助けになれば幸いです。

この記事では、以下のリンクを参考に記載しております。
https://sukkiri.jp/technologies/ides/eclipse/dwp_create.html
Notionタスクデータベース化したらNotionAPIを叩いているGASが動かなくなった件

## Notionタスクデータベース化したらNotionAPIを叩いているGASが動かなくなった件

### 発生経緯
* Notionデータベースに依頼レコードを登録すると担当者にSlack通知が飛ぶようにGASが組まれており、10分間隔のスケジュールで実行されていた。
* あるとき通知が飛んでこなくなったという連絡が担当者からあり、原因不明だったが、直前に社内メンバーがそのNotionデータベースをタスクデータベースに変換していたことがわかった。
* しかし、ターゲットとしているデータベースIDに変更は無く、プロパティにも変更は加えられていなかったため、通知が飛ばない理由がわからなかった。

### 原因
* 原因は単純で 'ステータス' プロパティの型が select から status に変わっていたため Type Errorとなっていたため

::: note alert
The property type in the database does not match the property type of the filter provided: database property status does not match filter select
::: 

### 修正対応
* レスポンスのJSON構造を見ながらコード中のステータス プロパティのtype指定のselectをstatusに置き換えるだけ

```diff_javascript
  // フィルタリング条件を指定
  var filter = {
      "property": "ステータス",
-     "select": {
+     "status": {
          "does_not_equal": "完了"
      }
  };
```

## Memo：タスクデータベース化の影響
* 変わるところ
    * ステータス プロパティの型が裏で勝手に status になる
        * 少なくとも元が select の場合は
        * textの場合はどうなんでしょう？
* 変わらないところ
    * データベースID
        * これは変わらないのでどこで問題が起きたのかが分かりづらかった
    * その他のプロパティの型
        * これは変わらないので（ry
多言語翻訳プラグインGTranslateの導入方法

# 初めに
業務でWordpressを使用することになり、最近本格的に学習を始めました。ショートコードの導入や、自作テーマを使用する際のウィジェットの追加など、地味に苦戦したので忘備録にします。

## 注意書き
初学者のため、誤りや拙い点があるかと思います。明らかな間違いがあるときにはコメントをいただけると嬉しいです。

## GTranslateとは？
Livecastが開発するWordpressで使用できる無料プラグインのこと。簡単操作で日本語を英語や中国語、韓国語に変換できる。 

https://ja.wordpress.org/plugins/gtranslate/

## 導入方法

### ブロックテーマでの導入方法
既存テーマを使用する場合は、外観→ウィジェットから簡単に追加できます。

1. Translate WordPress with GTranslateをプラグインの追加画面から検索し、インストール、有効化する
1. 設定を選択し、設定したい言語の種類やスタイリングを指定する
![スクリーンショット 2024-04-15 15.30.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918094/eb1049b5-d52c-598a-f334-41e37af3a8fa.png)
![スクリーンショット 2024-04-15 15.31.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918094/a7a69795-7869-61cd-bd6c-24af237d3ec2.png)

1. 外観→ウィジェットを選択し、GTranslateを追加する
![スクリーンショット 2024-04-15 15.32.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918094/95023f64-31e6-6f04-1151-e96d71f89ade.png)
1. 外観にウィジェットがない場合は、`functions.php`に以下のコードを追加してください
```
function sample_widgets()
{
    register_sidebar(array(
        'name' => '言語設定',
        'id' => 'lang',
        'description' => '言語設定',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>'
    ));
}
add_action('widgets_init', 'sample_widgets');

```

### 自作テーマを使用している場合
自作テーマの場合はショートコードを使用して簡単に追加できます。
1. Translate WordPress with GTranslateをプラグインの追加画面から検索し、インストール、有効化する
1. 設定を選択し、設定したい言語の種類やスタイリングを指定する
1. ショートコードをコピーし、言語設定の要素を追加したい場所に貼り付ける![スクリーンショット 2024-04-15 15.36.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918094/0ec86e59-b746-f21f-238a-30f36153f9c4.png)
1. 自分の場合は、ヘッダー部分に`<?php echo do_shortcode('[gtranslate]'); ?>`を追加しました。ショートコードはファイルにそのまま記載しても反映されないので注意です
1. 無事翻訳機能が追加できました！
![スクリーンショット 2024-04-15 15.38.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918094/08efd901-fba0-f96c-4863-f26dd1ee4d76.png)

## さいごに
自作テーマだと初期装備かと思われる部分もいろいろと設定が必要なのですね。管理画面でみつからないときは`functions.php`を見直してみようと思います。
Your Best Career Choices After 12th. Get to Know Whether Engineering is Good Choice in Future

Choosing the best career option after 12th is difficult for most students. Moreover, today’s world presents students with various career choices. This leads to confusion in picking the right career path. This blog guides the students, especially those looking for the best engineering courses in Tamilnadu after 12th Science PCM.

What is PCM?

Students of 12th-grade education with Science subjects such as Physics, Chemistry, and Mathematics are referred to as the ’12th PCM’ stream. There are some promising career choices for the students of this PCM stream.

Computer Science and Engineering

As you know, Software Engineering always has its peak demand among the students.

It is certainly a lucrative field. This allures students after 12th science to join a 4-year bachelor’s degree in Computer Science Engineering at a popular Villupuram Engineering College.

Career choices

Software Developer

Video game developer

Web Developer

Database Administrator

Cyber Security Specialist

Computer network architect

And more...

Civil Engineering

Civil engineers are the masterminds and they deal with crucial aspects such as the design, construction, and maintenance of diverse infrastructure projects such as bridges, dams, roads, and buildings.

Career choices:

●      Geotechnical Engineer

●      Construction

●      Site Engineer

●      Structural engineer

●      Construction Management

●      Surveyor

And more...

Mechanical Engineering

 Mechanical engineers are the innovators behind vital mechanisms. A mechanical engineering college in villupuram qualification from a leading Engineering college empowers the students to master the principles of mechanics and equips the skills to manufacture everything, right from small components to large systems.

Career choices

●      Automotive engineer

●      Instrumentation and control engineer

●      Robotics

●      Mechanical Engineer

●      Manufacturing Engineer

●      Product Designer

And more...

Electronics & Communication Engineering

You can join Electronics & Communication Engineering in Villupuram. Acquiring this qualification enables the students to pursue careers such as Data Analyst, Digital Marketer, Database Designer and more.

Career choices

●      Telecom Engineer

●      Network Planning Engineer

●      R&D Software Engineer

●      Software Analyst

●      Electronic Design Engineer

●      Desktop Support Engineer

And more...

All the engineering courses listed here are very demanding and offer several attractive career scopes and salary packages. Choose your desired course and accelerate your growth after the 12th.
VMへのWindows 11 インストール (BypassTPMCheck)

VMへのWindows 11のインストール中、システム要件である Trusted Platform Module (TPM) のチェックをパスできず「この PC では Windows 11 を実行できません」となりました。以下のKBでこの要件に対するworkaroundが３つ紹介されていますが、**TPM 2.0 requirementsをバイパスする**というオプションでインストールした記録です。

参考：
[Installing Windows 11 as a guest OS on VMware Workstation Pro/Player and Fusion (86207)](https://kb.vmware.com/s/article/86207)

環境：
- VMware ESXi 7
- Windows 11, version 23H2 

---

1. Windows 11インストールメディアから起動し、適切な設定を選択し進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/9739d370-9bf5-7ed6-d552-1de8c9770d99.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/16397aa0-4442-d540-c7a0-c090384ce20f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/a01a02f3-30a0-5c99-4327-d3f5bf698885.png)
この画面が出て先に進めなくなります。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/564b614d-5527-3c72-a3f0-4211960db658.png)

2. Shift+F10でコマンドプロンプトを起動します。コマンドプロンプトで `regedit` と入力し、レジストリエディターを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/22da1254-67c4-1534-cee1-f363526c0511.png)

3. レジストリエディターにて、`HKEY_LOCAL_MACHINE\SYSTEM\Setup` で右クリックし、「新規」 > 「キー」を選択します。`LabConfig` という名前のキーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/a76a082e-8106-4a91-a327-398cb590b2f5.png)

4. 作成した `LabConfig` キーにて、「新規」 > 「DWORD (32 ビット) 値」を選択し、`BypassTPMCheck` という値を作成しデータを `1` に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/0d29b266-b6c2-bade-da5f-31409a973783.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/e44168c3-1d0b-54de-fb46-34faed1efb72.png)

5. `LabConfig` キーの下に `BypassTPMCheck` 値を設定したらレジストリエディターを閉じ、さらにコマンドプロンプトも `exit` で抜けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/501a1155-088d-d562-f864-551e06d81d92.png)

6. 再び「この PC では Windows 11 を実行できません」の画面に戻るので、この画面を閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/7da024f3-45c9-dc48-244b-0798f1f29d65.png)

7. 「本当に終了しますか？」で`「はい」` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/a8e473f1-e67f-87e4-9dda-0d3f62a5ace9.png)

8. 「今すぐインストール」に戻りますので、適切な設定を選択し進みます。インストールを続行できるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/2181f482-ed96-a2d9-d836-6ae0e3042a77.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/d9776cfd-e767-22bc-aac3-b0fe246d5bf6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/c8235ad7-b6ea-8122-ef05-7a1e2f3364a6.png)
【Unity】interface を作成すると開発の順序が変わる？

皆さんは interface が
最も優れている点は何だと思いますか？

やはり**ポリモーフィズム**でしょうか？

敵の AI を実装する時に
ポリモーフィズムを活用して
敵に様々な思考ルーチンを
持たせることができるのは便利で仕方ないと思います。

それとも**疎結合**についてでしょうか？

保守管理に優れた
大変良い一面であると私は思います。
ポリモーフィズムより優れた点ではないでしょうか？

しかしながら私は
「作業を後回しにできる事」
を推したいと思います。

後回しにした作業は
他の人に簡単に回すことができるため
システムエンジニアがプログラマに
「この interface を実装しておいて」
と指示するのもこれに属するものとします。

共同開発が楽になっていいですね。

という事で今回は
「interface を作成すると開発の順序が変わる？」
について紹介したいと思います。

「開発の順序が変わる」
とはどういう事でしょうか？

有名な話の可能性が高いですが
この話をしたいと思います。

***

結論から述べると

interface を作成すると
中の処理を後回しにして
先に全体の流れを作る事ができるため
開発の順序が変わる可能性があります。

全体の流れを先に作成した後は
仮の動きを各 interface に当てはめて
後で本格的に実装する事になります。

interface を使用した場合は

・全体を作成
・各 interface に仮の動きを作成
・各 interface を本格実装

の流れになるのです。

interface を使用しない場合は
一から順番に作成することになるため
使う場合と使わない場合で
開発の順序が変わるのです。

例えばカードゲーム作成が
例として分かりやすいかもしれません。

1 プレイヤーの行動が
フェイズ 1 からフェイズ 5 に
分かれているとして

各フェイズの
interface を作成するとします。

その後プレイヤーの移動など全体の流れを作成したら
各フェイズに "何もしない" 処理を
仮置きする作業が始まります。

仮置きが完了したら
フェイズ 3 の実装が完了した人は
仮置きした処理と差し替えるだけで
結合することができます。

こういった「作業の後回し」ができる点こそが
interface が最も優れている点だと
私は思うのです。

***

以上 interface と開発順序の
関係について話してみました。

interface を日頃使う人からしてみたら
全く価値のない記事かもしれませんが
使わない人が interface について
興味を持って頂けたならばとても嬉しいです。

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

※私の開発は Unity がメインなので
タイトルに Unity を付けております。
もしかしたら Unity 以外では
当てはまらない可能性があるため
注意して下さい。
Amazon Storage Gateway ファイルゲートウェイ + S3 のストレージサービスと、Amaozn FSx for Windows ファイルサーバーの2つのサービスを比較

### なぜこの記事を書いたのか？
AWS-SAP の試験問題を解いていて、会社のWindows システムが動くオンプレミス環境からAWS にストレージデータのバックアップを取るとき、低コストの要件に対してストレージサービスで「Amaozn FSx for Windows ファイルサーバー」ではなく「Amazon Storage Gateway ファイルゲートウェイ + S3」が正解となる理由が分からなかったからです。

結論としては、「Amazon Storage Gateway ファイルゲートウェイ + S3」のほうがコストが安いので、「データのバックアップ」のような要件に対して必要な性能を満たしていればWell-Architected な選択と言えます。

#### Amazon Storage Gateway ファイルゲートウェイ + S3 と、Amaozn FSx for Windows ファイルサーバー の比較

|項目|Amazon Storage Gateway ファイルゲートウェイ + S3|Amazon FSx for Windows ファイルサーバー|
|:-:|:-:|:-:|
|ストレージタイプ|オブジェクトストレージ|ファイルストレージ|
|ファイルアクセス|S3 API または Storage Gateway ゲートウェイ|SMB/NFS プロトコル|
|オンプレミスとの統合|オンプレミスファイルサーバーをクラウドに拡張|オンプレミス Active Directory との統合|
|スケーラビリティ|数 TB から数 PB までスケール可能|数 GB から数百 TB までスケール可能|
|パフォーマンス|アクセス頻度によってパフォーマンスが変化|ワークロードに合わせてパフォーマンスを調整可能|
|コスト|データ量に基づいて課金|使用したストレージと IOPS に基づいて課金|
|管理|Storage Gateway の設定と管理が必要|フルマネージドサービス|
|可用性|99.9% の可用性|99.99% の可用性|
|セキュリティ|S3 のセキュリティ機能を利用|Windows ファイルサーバーのセキュリティ機能を利用|
|用途|大容量データのバックアップ、アーカイブ、災害復旧|ファイル共有、コラボレーション、アプリケーションデータ|
vimのターミナルモードを終了するには

helpにも書いてあったが、なかなか検索できなかった。WEB上でもうまく検索に引っ掛からなかったから、自分用にメモ
:terminalで起動したターミナルのウインドウは
CTRL-W :q!

で閉じる。


ヘルプにも
`CTRL-W :quit` でウィンドウを閉じようとしても失敗します。`CTRL-W :quit!`
を使うとジョブは終了します。
と書いてある。
!が必要ということ
【Visual Studio】【Github Copilot】 Invalid copilot token: missing token: 404 

# はじめに
学生だとGithub Copilotが無料で使えます。
Unityでのゲーム制作のためVisual StudioにこのColipotを導入しようとした際、途中上手くいかなかったのでそのときのメモです。

# 学生申請, Visual Studioとの連携の方法
以下のサイトを参考にやりました。
学生申請は申請が通ったというメールが届くまで3日、その後プロフィールに「Pro」と付くまでに1日~2日ぐらいかかったと思います。
以下のサイトには学生証を英訳したものがないとはじかれるという記載もありましたが、筆者は学生証だけで大丈夫でした。

追記：プリンターでスキャンした綺麗な学生証の画像だとはじかれて、スマホのカメラでとったちょっと背景が写り込んでいるぐらいの学生証の写真だと申請が通った人が知り合いにいました。筆者も後者でした。

[【GitHub】学生申請をして無料でGitHub Copilotを使う](https://qiita.com/SNQ-2001/items/796dc5e794ac3f57a945)
[学生ならとりあえずGitHubCopilot使え！！！](https://zenn.dev/kd_gamegikenblg/articles/cea1618ff8a209)

# Invalid copilot token: missing token: 404というエラー
しかしいざUnityからスクリプトをVisual Studio(2022)で開いてみるとInvalid copilot token: missing token: 404 Auth Status: NotAuthorized You don't have access to GitHub Copilot.
と出力されており、Copilotは動いていませんでした。

![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3077175/cdfc28ca-c7b7-799f-d298-ac1fb08ad02d.png)


# 解決策
Visual Studioの右上のアカウントの部分をクリックするとGithubアカウントのところに「資格情報を再入力する」と出ていました。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3077175/352796c2-e733-00c6-6f87-015a82854969.png" width=50%>

この部分をクリックし、「Authorize」的なボタンを押すと解決しました。スクショを取っていななかったので曖昧ですが、出てきたボタンを1回押しただけです。

そうするとGithub Copilotが起動して予測変換がでるようになりました！やっター
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3077175/9a1941c4-1778-b5fe-d512-3c94e8401b20.png" width=80%>

# おわりに
こういう記事を初めて書いてみました、誰かの役に立てばいいな～(それだけ)
「килхԓ часит ӄиӽ нэсэмӄ тэпәлаӽ син」はUniversal Dependenciesで書けるのか

小野智香子『イテリメン語文法』(北海学園大学出版会, 2021年3月)を横目に、「килхԓ часит ӄиӽ нэсэмӄ тэпәлаӽ син」をUniversal Dependenciesで書いてみることにした。

```
# text = килхԓ часит ӄиӽ нэсэмӄ тэпәлаӽ син
1	килхԓ	килхԓ	ADV	нареч	_	5	advmod	_	_
2	часит	часит	ADV	нареч	_	5	advmod	_	_
3	ӄиӽ	ӄиӽ	NOUN	сущ	_	5	nsubj	_	_
4	нэсэмӄ	нэсэмӄ	ADV	нареч	_	5	advmod	_	_
5	тэпәлаӽ	тэпәлаӽ	ADJ	прил	_	0	root	_	_
6	син	ԓ-	AUX	неп	_	5	cop	_	_
```
![itl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/1b0c0033-c8bf-915a-bd47-2df99fd08728.png)

LEMMA(辞書見出し形)を、とりあえずА. П. Володин, Ч. Оно『Полный Ительменско-Русский словарь』(Kulturstiftung Sibirien, 2021年)に接地することにしたので、XPOSも同じ辞書から借りてきたのだが、そうするとXPOSをロシア語で書くことになって少々ツライ。しかも、この辞書だと、コピュラ動詞「син」のLEMMAは、不定詞の「ԓкас」ではなく語幹「ԓ-」になる、というヴォロディン風味が炸裂する。うーん、これだとやっぱりFEATSを充実させないとダメだけど、この辞書には動詞の屈折形はほとんど書かれてないので、どうしても作業量が大きくなるなぁ。
事業会社で内製開発チームを作りました

# はじめに

はじめまして:smile::sparkles::sparkles:
ポーラオルビスホールディングスでITプロダクト開発チームのリーダーをしている早川と申します。
2023年から内製開発を担うチームを立ち上げ、グループ会社内で使用するシステムの開発を推進しています:muscle_tone1:

これから我々が行ってきた内製開発組織組成の取り組みについてご紹介していきたいと思っています！
内製開発に興味がある方、開発チームを発足しようとしている方の参考になれば幸いです:relaxed:

# 背景

ポーラ・オルビスグループでは、「感受性のスイッチを全開にする」という理念のもと、化粧品を中心とした「美と健康」に関わる事業を展開しています:lipstick:
事業会社なのでこれまではITエンジニアは在籍しておらず、事業に必要なシステムの開発は全て外部のベンダーに委託していました。

外部にシステム開発を委託する際、下記のような点を課題に感じていました:worried:
:white_check_mark:人材の確保や維持が困難でシステムの変化対応力、アジリティが低下
:white_check_mark:外部ベンダー依存度が高くブラックボックス化
これらの課題を解決し、変化対応力を高め、急速に変わっていく事業市場や顧客ニーズ、技術トレンドに柔軟に対応できるようになるために、自分たちの手で開発できる体制を作りたいと考えました:grinning::bulb:
まずは2021年に内製開発のトライアルを開始し、2023年から本格的に体制立ち上げを行っています:two_men_holding_hands::two_women_holding_hands:

内製開発のメリットとして、コスト削減効果をイメージされる方が多いと思います:moneybag:
内製化することで外注よりもコストを低下させられると思いますが、開発体制を作るには採用や育成等の社内人件費も必要になるので、我々はコスト削減を主な狙いとしてはしておりません。

# ポーラオルビスホールディングスでの内製開発について

開発手法としては社内エンジニアと社外エンジニア(業務委託)が協働しながら行う「アジャイル・スクラム開発」を導入しています:information_desk_person:
ポーラ・オルビスグループで利用するシステムを開発のスコープとしていますが、グループ内で利用する全てのシステムを内製開発するわけではありません。
内製化の対象は、スピーディーに変化させていく必要があるシステム領域としています:soon::dash:

内製開発チーム立ち上げた当初はすぐにプロジェクトを進めるのではなく、PoC開発を行いました:beginner::seedling:
PoCとして部内で利用するプロダクト開発を行った後、現在はグループ会社で利用している基幹システムのマイクロサービス化に挑戦しています:hammer_pick:
マイクロサービス化として昨年から新しいプロダクトを開発し、小さなリリースを繰り返して2月に正式リリースを迎えることができました:tada::confetti_ball::tada:
リリース後も継続して改善を行いながら業務での利用を開始しています:blush:
無事にリリースを迎えることができたことを糧に、開発組織としての成熟度を上げていくことで内製化の対象領域を拡大していきたいと考えています:cherry_blossom:

# さいごに

今後は開発の体制や開発しているプロダクト、開発を進める上で課題に感じたことを開発チームのメンバーと共に発信していきます:envelope::star2:
お読みいただきありがとうございました:bow:
今週の良かった記事

https://speakerdeck.com/recruitengineers/studysapuri-with-graphql
https://paiza.hatenablog.com/entry/2024/04/14/090641

https://lukesilvia.hatenablog.com/entry/20080402/1207149044

https://speakerdeck.com/o0h/how-not-to-write-unit-tests

https://nowokay.hatenablog.com/entry/2024/04/13/104347

https://qiita.com/assu_ming/items/9d80320e6f778d83c61f

https://www.sony.com/ja/SonyInfo/News/Press/202005/20-037/

https://paiza.hatenablog.com/entry/2024/04/14/090641
Ruby On RailsにおけるjQuery初期設定

# Ruby On RailsにおけるjQuery初期設定
## 背景説明
現在のrailsに即したjQuery導入説明です。  
私のような初学者にも伝わる日本語での説明を見つけられませんでした。英語での説明はあったのでこちらにメモしておきます。  
ムダな記述が多いです。記述を省ける箇所や訂正箇所をコメントで教えてください。[^1]

[^1]:[参考文献](https://stackoverflow.com/questions/70921378/how-to-install-jquery-and-bootstrap-in-rails-7-app-using-esbuild-without-webpac)

## 初期設定
### アプリを作成します。
```sh
rails new useJquery
```
### 作成したフォルダーへ移動
```sh
cd useJquery
```
### コントローラーとビューを作成
```sh
rails g controller tests index
```
### ルーティング設定
```ruby
Rails.application.routes.draw do
  get 'tests/index'
  root to: "tests#index"
end
```
### app/views/tests/index.html.erbへの書き込み
```html
<h1>Tests#index</h1>
<p id="hoge">赤色になるよ</p>
```
## jQuery導入
ここからが**本題**
### Gemfileへの追加
```gemfile
##中略
gem "jquery-rails"
gem "bootstrap"
gem "sassc-rails"
```
### ダウンロード
```sh
bundle install
```

### app/assets/stylesheets/application.cssの拡張子をscssへ変更
```sh
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
### app/assets/stylesheets/application.scssへ以下を追加
```scss
*= @import "bootstrap";
```

### config/initializers/assets.rbへ以下を追加
```ruby
Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js bootstrap.min.js popper.js )
```
### config/importmap.rbへ以下を追加
```ruby
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
```

### app/javascript/application.jsへ追加[^2]
```javascript
//必ず、これらを先頭に記す
import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"
//以下他のファイル
```
[^2]:importされる順番が大事です。必ず、controllersなどより上に記してください

## javascript実行
### javascriptファイル作成
```sh
touch app/javascript/change_color.js
```
### config/importmap.rbへ追加
```ruby
pin "change_color", to: "change_color.js"
```
### app/javascript/application.jsへ追加
```javascript
import "change_color"
```

### app/javascript/change_color.jsにスクリプトを記載[^3]
```javascript 
$("#hoge").css("color","red");
```
[^3]:[参考文献](https://qiita.com/ngron/items/95846bd630a723e00038)

### このように赤色になっているなら成功です。
[![Image from Gyazo](https://i.gyazo.com/2289012162a3741a52aa28b5d1a93e59.png)](https://gyazo.com/2289012162a3741a52aa28b5d1a93e59)
[未解決]続プリントサーバHack

Planexの[Mini2が使える](https://qiita.com/yamori813/items/422d46ba07bc6e5d5e9a)ようになったので、IODataのET-FPS1Eもハードオフで110円で購入してみました。

|部品|用途|
|:--|:--|
|Am186ED-25VC|CPU|
|W83877TF|I/O|
|GL44016-50J4|D-RAM|
|HT93LC56|EPROM|
|DL10020|ASIC?|
|ST10043QC|Ether?|
|AM29F400BT|Flash|

IODataにはセントロニクスのプリントサーバがFPS1,FPS1E,FPS1Lの三種類あったようです。

PlanexのEthernetが10MのMini2と100MのMini100,Mini100s,Mini100s2というプリントサーバがありMini100に近いのではないかと思われます。

CoregaのFast PServerと形状が似ているので同じものと思われます。

これらはD-LinkのDP-301Pと同じものです。D-Linkにはこれ以外にDP-101(10M)やDP-301P+などの製品もあります。

D-Link DP-301P+,Corega Fast PServerII,IOData FPS1Lにはリセットボタンがあるようです。

Mini2は台湾のZero One Technologyの製造ですが、おそらくこれも同じではないかと思います。

マニュアルではデフォルトでのIPアドレスは1.1.1.1とありますが、pingに反応がありません。arpを設定してもダメです。

どこかのページにWindows XPでPS Adminツールで設定できたという事が書かれていました。またDP-301はarpを設定してpingを投げるとそのアドレスになるようなのですが、これも効きませんでした。

PS AdminはWindows 7の32Bitであれば動きますが、Windows 7にはIPXなどのプロトコルのサポートがないので、認識できないようです。

分解して基板を確認しても初期化に利用できそうなパターンはありません。

IPが分かってもパスワードがかけられてる可能性もあります。

パスワードが分からなくなった場合は修理扱いだったようです。

可能性としては、IPがオフに設定されているとか、そもそも壊れているなどがあります。IPXのパケットは出ているので前者の可能性が高いです。

Mini2と同じ会社が作ったのであれば、初期化できなくなるような、製品にはならないと思うのですが。

はてはて、どうしたものか。。。
ExcelのHYPERLINK関数を利用してレビューしやすい資料を作る

# はじめに
普段はIBM Cloudに関する記事や、アプリのコードを簡単に紹介する記事が多いのですが、今日は少しExcelを便利に活用して、誰かの仕事がより良いものになればとExcelの活用記事を紹介します。

# どんなシチュエーション
例えば、同僚や先輩、上司から「この見積金額調べといて！」と依頼を受けたとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651598/567aec61-4bbf-a3dc-9856-8fdea08ffe63.png)

例えば、IBM Cloudのカタログから見積をちまちま実行して、Excelに転記します。

:::note warn
これは実際にClassic InfrastructureのTOK02環境で見積した金額になりますが、執筆時点の情報であったり、ネットワークスピードやアドオンの有無など値段の変動要素の記載が十分ではないので、仮の数字としてご理解ください。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651598/1a14b84a-2449-59bd-a696-b3471b129d15.png)

「できたで！」

さて、この内容で依頼主に結果を返しても良いのか？ということです。

# 依頼人との関係にもよりますが
基本的に誰かに依頼して出てきた資料は、レビューする、されるのが世の常です。
さて、この金額一覧が正しいか判断するためには、依頼人も同じようにIBM Cloudのカタログでポチポチ入力して、差異が無いか確認する必要があります。
仕事を請け負った人に絶対的な信頼があり、このまま使っても大丈夫、と思える間柄であれば最初の一覧だけで仕事は完了するかもしれませんが、そうでなければチェックは必要ですよね。
そうすると結局同じ作業をする形になり全体的に効率が良いものではありません。

こうならないためにも仕事を請け負った側は、依頼主がレビューしやすい資料を作っておくと、円滑に事が運びやすいです。

# レビューしやすいために何をすれば良いか？
簡単な方法の1つとして、一覧のあるExcelにシートを追加して、見積を実施したエビデンスを貼ってみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651598/39e6a3b7-78d2-6ee9-889c-b9c51f4179f9.png)

これだと見積の際に取得したカタログの画面キャプチャがあるので、その記載項目が元の要求内容と一致しているか確認して、問題なければ記載の金額が正しそうと判断できます。

あと、これがあると、仕事を請け負った人も再確認しやすいですね。

一覧の量が少なければこれでも良いかもしれませんが、一覧が数十個となってくると、Excelのシートを行ったり来たりして、この番号のエビデンスはどこ？って探す羽目になるかもしれません。なので、もうちょっと工夫してみましょう。

# HYPERLINK関数を使ったリンクの生成
先ほどの一覧で見積金額を出した横に関数を追加します。`I4セル`には実際下記の関数が入っています。I5セルからI9セルまではI4セルの関数をコピーしたものが入っています。
```console
=HYPERLINK("#エビデンス!A"&MATCH($B4,エビデンス!A:A,0),"Link")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651598/67b60f29-3cfc-cf17-e57f-381ebb34bb59.png)

これは以下の流れでHYPERLINK関数を作成しています。
- B4セルと完全一致するセルを「エビデンス」シートのA:A列から探索して、一致する行数を探索
- 探索した行数と`エビデンス!A`というシート名と列を指定する文字列を文字列結合させます
- また、HYPERLINK関数を入力するシートと異なるシートのリンクを生成する場合、先ほど作成したシート名とセル名を結合した文字列の先頭に `#` の文字列が必要になります
- 最後にリンクとなる文字列 `Link` を指定します

これで、セルに表示される`Link`の文字をクリックすると、「エビデンス」シートの番号が一致するセルに自動でジャンプします。便利！

# 最後の一工夫
先ほど作ったリンクでエビデンスを確認した後、元に戻るのに見積一覧のシートをクリックして、、、となると面倒です。戻るためのリンクをエビデンスシート側にも追加しましょう。

先ほどと似たようなHYPERLINK関数をエビデンスシートの数字の下のセルに入れています。
```console
=HYPERLINK("#見積一覧!I"&MATCH(A1,見積一覧!B:B,0),"戻る")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651598/f6eeb46b-cdb5-17cf-a62c-0374441a5991.png)

これも先ほどと同じように、HYPERLINK関数を入力したセルの1つ上にあるセルの数字を、見積一覧のB:B列から探索して、一致した行数のI列(Linkの列)にジャンプするためのリンクを生成しています。

こうすれば、「見積一覧」のシートと、「エビデンス」のシートを行ったり来たりがリンクをクリックするだけで実現できるので、レビューや自身でチェックする時も確認がしやすいです。

# さいごに
組織の中で仕事をしていると、基本的に作った資料等は誰かの目でチェックされます。
その時にレビューする側が、レビューしやすいように作成しておくと、「ぉ、こいつ気が利くな」となり、資料作成における評価も得やすいです。

今回紹介したものは、Excelの資料を作成する際に、参照すべき情報にリンクを張る、というものを `HYPERLINK関数` を用いて簡単に実現するものです。
記事で紹介したシチュエーション以外でも使える関数なので便利ですよ。いろんな資料とかのリンク一覧を作るとか。ぜひ、ご活用ください。
CDKでBatchを構築したら Resource handler returned message: "Resource of type 'AWS::Batch::ComputeEnvironment' with identifier 'MY_ARN' d id not stabilize." (RequestToken: XXX, HandlerErrorCode: NotStabilized)

AWS CDKでBatch環境を構築しようとしたところ、以下のエラーでハマりました。

```
Resource handler returned message: "Resource of type 'AWS::Batch::ComputeEnvironment' with identifier 'MY_ARN' d
id not stabilize." (RequestToken: XXX, HandlerErrorCode: NotStabilized)
```

コンピューティング環境の作成に失敗しています。

根本的な原因としては、 `cdk.context.json` に記述されているネットワーク設定が古かったせいでした。
VPCの作成もCDKで行っていて、設定を変えたので元々あったcdk.context.jsonと実際の環境に差が出てしまったのが、よくなかったようです。
`cdk.context.json`を削除して実行したところ、最新の情報を反映した`cdk.context.json`が作成され、無事に構築することができました。


参考
https://stackoverflow.com/questions/72685624/cdk-cloudformation-batch-setup-notstabilized-error
【ChatGPT＋DALL-E3】でトーテムポール。PromptShare


　どうも、カーブミラーです。

　今回は、トーテムポールを描きました。PromptShareです。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::

　ニュースないw

　トーテムポールは
　　ご存知でしょうか？

***
***Google SGE***
トーテムポール（totem pole）とは、北米の太平洋に面した北西沿岸部に住む先住民インディアンが、家の前や墓地などに立ててきた柱状の木造彫刻です。﻿

トーテムポールは、家族の出自や出来事、家系に関わる紋章や伝説などを記録し伝承するもので、そこには魔除け、豊作、豊穣等の祈願の思いが込められています。﻿

トーテムポールは、トリンギット族（Tlingit）、ハイダ族（Haida）に代表されるアメリカ及びカナダの北西沿岸先住民によって築かれ、その文化圏は東南アラスカからカナダのブリティッシュ・コロンビア州、さらに南のワシントン州までの沿岸に及んでいます。

トーテムポールには、動物、鳥、魚、神話上の動物、それに超自然的動物と言った一団の彫り物があります。トーテムポールと呼ばれるこれらの柱は、崇拝の対象として、あるいは敵を驚かせるために作られたと考えられています。﻿

しかし、この地域の彫像は崇拝の対象としての偶像ではなく、宗教的な意味合いは全くないためトーテムポールという表現は正確なものとはいえません。先住民たちは英語表現としては単に「ポール」（pole、「柱」）と呼ぶことが多いです。﻿﻿
***
　詳しくは、
　　ウィキペディアで
　　　お調べください。

　小学生や中学生のころに
　　鉛筆に、ナイフなんかで
　　　彫っていた思い出があります。

　そんな緻密なものではなく、
　　モアイ像みたいなものでしたけどw

　まぁ、思い出はともかく、
　　DALL-E3は描けるんでしょうか？
![1713148052485.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/7fd6bfda-884f-b2b7-5021-f68c78520aba.jpeg)

　描けますね。

　ということで
　　安心して、進めます。

　このトーテムポールに
　　何を彫るかは
　　　個人の自由ですw

　サンプルとして、
　　ここでは、アニメキャラ風の
　　　魔法少女を彫ります。

　それから
　　その魔法少女を
　　　彫るスタイルも
　　　　指定します。
![1713148073704.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/19c58936-1a30-009f-738c-73cd763befc0.jpeg)

　こんな感じです。

　Promptを
　　用意してあります。

　このPromptは
　　MS-CopilotDesignerでの
　　　描画も確認してあります。

　X-Twitter上で
　　公開する上で、
　　　必要と考えているので。

```Text:トーテムポールPrompt
A [style] totem pole, carved with figures of [subjects], displayed in full view. The totem pole features multiple tiers, each tier depicting a character in different themed outfits and poses. The colors are bright and vibrant, typical of animated or fantastical themes, including shades of pink, blue, yellow, and green. The background is a simple clear sky to emphasize the colorful and intricate carvings on the totem pole.
```

　ChatGPT和訳と
　　オプション説明。
***
[style]のトーテムポールは、[subjects]のフィギュアが彫られており、全体像で表示されています。トーテムポールには複数の段があり、各段には異なるテーマの衣装とポーズをしたキャラクターが描かれています。色はアニメーションまたはファンタジー的なテーマに典型的な鮮やかで活発な色で、ピンク、ブルー、イエロー、グリーンの色合いが含まれています。背景はシンプルな晴れた空で、トーテムポールのカラフルで複雑な彫刻を強調しています。


以下は、指定可能な要素のリストです。リスト内の項目は英語で、説明は日本語です：

1. **[style]** - トーテムポールの芸術的または文化的なスタイルを指定します。例えば、Traditional（伝統的）、Modern（現代的）、Anime-style（アニメスタイル）、Abstract（抽象的）、Realistic（リアリスティック）などがあります。

2. **[subjects]** - トーテムポールに彫られる対象やキャラクターを選択します。例えば、Mythological creatures（神話の生き物）、Animals（動物）、Historical figures（歴史上の人物）、Fantasy characters（ファンタジーキャラクター）、Anime characters（アニメキャラクター）、Superheroes（スーパーヒーロー）などが含まれます。
***

　あとは
　　みなさんの自由です。

　これをベースにして
　　新たな作品を
　　　作り出してください。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
ZED SDK 4.1 と4.0での差分

StereoLabs からZED SDK 4.1 のリリースがアナウンスされました。
https://community.stereolabs.com/t/zed-sdk-v4-1-is-out/4915

このリリースノートの中で4.0からの変更点が告げられています。

- [ZED SDK 4.1 のリリースノートの機械翻訳のよる和訳](https://qiita.com/nonbiri15/items/4ebf3a6b97fe3bfcc14b)

### download
https://www.stereolabs.com/developers/release


## 気づいた点から
### 変更の総数
- 変更のファイル数が271に及ぶ。
- ただ、"Copyright ©  2024" への変更も多いので、正味の変更はずっと少ない。
    - 少なくとも70箇所の変更がある。
- 変更が多いのはC++のコード。
- csharp, pythonのコードでの変更はずっと少ない。

### フォルダの名前が変更になっている。
```
- geotracking/
+ global localization/
```
チュートリアルも同様に変更になっている。

### C++のhppファイルでの変更
例：
```
-    Shader(GLchar* vs, GLchar* fs);
+    Shader(const GLchar* vs, const GLchar* fs);
```
C++ でのconst 修飾子の利用

### 関数の戻り値の変更

```:.hpp
- void parseArgs(int argc, char **argv, sl::InitParameters& param);
+ std::string parseArgs(int argc, char **argv, sl::InitParameters& param);
```


### 型推論のためのauto の利用
```:.cpp
-    parseArgs(argc, argv, init_parameters);
+    auto mask_path = parseArgs(argc, argv, init_parameters);
```
C++11 から、auto  キーワードを指定する事によって、変数の型を初期化子から推論できるようになった。

そのような点で少しづつ最近の流儀のC++になってきているようだ。
ただ、unique_ptr、shared_ptrの使用箇所がZED-SDK自体の中で、そう多くないので、最新の流儀への書き換えは途上中であるようだ。


### データメンバーの初期値の変更
例:

depth sensing/depth sensing/cpp/src/main.cpp

```
-    init_parameters.depth_mode = DEPTH_MODE::ULTRA;
+    init_parameters.depth_mode = DEPTH_MODE::NEURAL;


-    runParameters.confidence_threshold = 50;
+    runParameters.confidence_threshold = 100;
```
confidence_threshold = 100のように値が大きい方が、depthが算出されやすい。
値を小さくすると、算出される点が減っていく。

## DEPTH_MODE.NEURAL_PLUS の追加
```
help(sl.DEPTH_MODE.NEURAL_PLUS)
class DEPTH_MODE(enum.Enum)
 |  DEPTH_MODE(value, names=None, *, module=None, qualname=None, type=None, start=1)

(中略)
 |  
 |  NEURAL = <DEPTH_MODE.NEURAL: 4>
 |  
 |  NEURAL_PLUS = <DEPTH_MODE.NEURAL_PLUS: 5>
 |  
（後略）
```

## POSITIONAL_TRACKING_MODE.GEN_2 の追加
```
help(sl.POSITIONAL_TRACKING_MODE)
class POSITIONAL_TRACKING_MODE(enum.Enum)
 |  POSITIONAL_TRACKING_MODE(value, names=None, *, module=None, qualname=None, type=None, start=1)
 |  
 |  An enumeration.
 |  
 |  Method resolution order:
 |      POSITIONAL_TRACKING_MODE
 |      enum.Enum
 |      builtins.object
 |  
 |  Data and other attributes defined here:
 |  
 |  GEN_1 = POSITIONAL TRACKING MODE GEN_1
 |  
 |  GEN_2 = POSITIONAL TRACKING MODE GEN_2
 |  
 |  ---------------------------------------------
 (後略)
 ```
【Design Technologist】デザインテクノロジストとは？

## はじめに

みなさんは、「**Design Technologist**」 という役割をご存知ですか？

最近では、エンジニアの中でもデザインやフロントエンドを強みとして、デザインエンジニアやUXエンジニアと名乗っている人が増えてきたように感じます。

そんな中で「**Design Technologist**」は、どのような役割で他の職種とどのように関わっているのでしょうか？

この記事では、そんな「**Design Technologist**」について紹介します！

## Design Technologistとは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a09afe8f-67eb-7441-a14c-abd2a5f12ed5.png)

**Design Technologist** は、デザイナーとエンジニアの中間にあるような職種で、デザインとエンジニアリングの両領域を理解して、その２つの領域のスキルを使って働く役割です。

主な業務は、プロダクト開発の「企画・調査〜デザイン・設計〜開発・リリース」のフロー全体的に関わり、デザインスキルと開発スキルを用いて、ユーザー体験の向上することです。

その中でQiitaの **Design Technologist** は、以下のようなことを行なっています。

+ UXを向上させること
+ アクセシビリティを向上させること
+ ユーザーの声を反映させること

## 他の職種との違い
デザインとエンジニアリングの両領域を理解し、強みとして働いている職種として、「デザインエンジニア」と「UXエンジニア」という職種もあります。
<font color="gray">※ 実際の業務内容は、組織によって違う可能性があります。</font>

### ⚪︎ デザインエンジニア
デザインエンジニアは、製品の外観や物理的な機能の設計とハードウェアのエンジニアリングの領域を専門とする役割です。 そのため、**Design Technologist** とは扱っている内容が違います。

+ **Design Technologist**
    + ウェブ技術やインタラクティブ技術を活用して、ユーザー体験を向上させるプロトタイプや製品を開発する
+ **デザインエンジニア**
    + 物理的な製品の設計において、美学と機能性を融合させる
    + 物理的な要素（製品の外観、材料選び、構造設計）に重点を置き、製品が市場で成功するためのエンジニアリングとデザインの両方の知識を有している

### ⚪︎ UXエンジニア
UXエンジニアは、デザイナーと協力して、プロダクトのユーザー体験（UX）を開発するエンジニアです。そのため、**Design Technologist** とは、業務範囲が変わってきます。

+ **Design Technologist**
    + 目的に応じて、「企画・調査〜デザイン・設計〜開発・リリース」までを幅広くで担当する
+ **デザインエンジニア**
    + プロダクトのユーザー体験（UX）を向上させるための開発を担当する
    + UXに重点を置き、ユーザーテストで検証されたデザインを具体的なプロダクトに反映させるためのエンジニアリングとデザインの両方の知識を有して要る

## まとめ
この記事では、「**Design Technologist**」という職種に焦点を当て、その役割と他の職種との違いについて詳しく掘り下げました。

**Design Technologist**はデザインとエンジニアリングの知識を兼ね備え、デジタルプロダクトのユーザー体験を向上させるために、プロダクト開発の全フェーズにわたって関与します。

また、**Design Technologist**は、プロダクト開発でユニークな役割を果たし、革新的なユーザー体験を生み出すための橋渡し役として活躍しています。これからのデジタルプロダクト開発において、彼らの役割はさらに重要になると思います。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510
java　メソッド　配列

引数に配列を用いる、
値渡しと参照渡しがるというが厳密には参照の値渡しというみたい:sweat_smile:
#### 違い
引数の渡し方の違い

## 値渡し（一部訂正）

```
public class Sample {
 public static void main(String[] args) {
  int num = 5;
  samlpe(num);
  System.out.println(num); 
  
  }

  public static void sample(int num) {
   int += 5;
   System.out.println(num);
  }
}


出力結果
10
5
```


変数の値を直接コピーするので変数は変化しない
呼び出し元のアドレスの情報のみが渡される（値そのものが渡される）


## 参照の値渡し

```
public class Sample {
 public static void main(String[] args) {
  int[] num = {5};
  sample(num);
  System.out.println(num[0]);
  }

 public static void sample(int[] num) {
  num[0] += 5;
  System.out.println(num[0]);
 }
}


出力結果
10
10
```

```
public class Sample {
 public static void main(String[] args) {
  String[] hello = {"hello"};
  sample(hello);
  System.out.println(hello[0]);
  }

 public static void sample(String[] hello) {
  hello[0] = "こんにちは";
  System.out.println(hello[0]);
 }
}


出力結果
こんにちは
こんにちは
```

呼び出し先で配列の実態を書き換えると、呼び出し元にも変更がある
呼び出し元のアドレスが渡される。

String型は参照の値渡しのみ！
勉強になります！！
エクセルで独自テンプレートを元に新規シート追加

# 概要

この新規シート追加の時に、 **独自に設定したシート** が追加されるようにしたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/1944c3d0-7006-8aa1-1b83-68706c37b3a2.png)

# やり方

『起動時に独自テンプレートを開く』の応用なので、まずは下記参照。

https://qiita.com/waokitsune/items/da2e3c81c552001d51a2

『Sheet.xltx』を用意したら下記に置きます。

```
C:\Users\%username%\AppData\Roaming\Microsoft\Excel\XLSTART
```

『Book.xltx』『Sheet.xltx』は両方置いても問題無しです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/baa99733-b1b7-d9f3-f083-7dc0da97ac75.png)

『Book.xltx』は新規 **ファイル** を作るときのテンプレート。
『Sheet.xltx』は新規 **シート** を作るときのテンプレート。

# 参考サイトさん

https://hamachan.info/excel2021-xlstart/

# バージョン

Microsoft Windows [Version 10.0.22631.3447]
Microsoft Excel for Microsoft 365 MSO (バージョン 2403 ビルド 16.0.17425.20176) 32 ビット
Mac 最強ランチャーアプリ Alfred の初期設定

# はじめに
Alfred は、Mac 最強のランチャーアプリです。
この度、Mac を交換することとなったため、初期設定について簡単に残しておきたいと思います。

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [インストール](#インストール)
1. [初期設定](#初期設定)
1. [各種設定](#各種設定)

<!-- 各チャプター -->
<a id="#インストール"></a>
# インストール
Alfred のインストール方法は、いくつかありますが、おすすめはパッケージ管理ツールである Homebrew からのインストールです。
Homebrew によるインストールは、ターミナルから以下のコマンドにて実行できます。（2024年4月時点）
※ Homebrew 自体のインストールについては別の記事を参照してください
```
brew install --cask alfred
```
ちなみに、私は dotfiles を使っており、他パッケージを含めてまとめてインストールしています。
その紹介についてはまた別途…

<a id="#初期設定"></a>
# 初期設定
インストールが完了すると、すぐ起動できます。
デフォルトではキーボードショートカットが option + Space に設定されおり、ショートカットを押して起動します。
帽子マークのところで２本指で Multi-Touch ジェスチャから「Preferences…」を選択します。
![スクリーンショット 2024-04-15 10.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782879/64b559fe-0cb9-06a5-1f14-a3aa6c0c4f51.png)

## 各種設定
- General メニューで「Where are you」を「Japan」に変更
（この設定をしておくと Alfred から Amazon の検索したときに国を考慮してくれるようになります）
![スクリーンショット 2024-04-15 11.00.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782879/d7b6ed78-1bec-a3e6-660d-3a03b97ce516.png)

- Feature > 「Web Bookmarks」メニューで「Google Chrome Bookmarks」にチェック
（この設定をしておくと、Alfred にて Chrome ブラウザに設定しているブックマークが検索対象になり、非常に便利！）
![スクリーンショット 2024-04-15 11.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782879/6edf461f-1419-e1ed-d07d-da15f7cc9e40.png)

- Advanced メニューで「Force Keyborad」でアルファベット入力に変更
（この設定によって、Alfredでの初期入力時の入力モードの指定ができます）
![スクリーンショット 2024-04-15 11.07.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782879/fb710329-4996-8947-85a1-0ff55a38b52c.png)
競プロの Nim 問題まとめ (ネタバレあり)

Nim についてまとめる。ネタバレ多いので注意。大体難易度の昇順に並べているつもり。

# 典型 (ゲーム)
## 普通の Nim
個数 $a_1, \ldots, a_n$ の山があり、交互に好きな個数取る。

解法: xor が非ゼロなら勝ち。xor が非ゼロ値 g の場合、 $a_i \oplus g < a_i$ なる $i$ が必ず存在する。その $i$ について $i$ 番目の山から $a_i \oplus g$ 個取る。

例題: スタンダード過ぎ、たくさんあり過ぎ

## 個数制限付き Nim
個数 $a_1, \ldots, a_n$ の山があり、交互に好きな個数取る。ただし個数は $1$ 個から $k$ 個まで。

解法: 各山の grundy 数は $a_i \bmod (k+1)$ なので、それらの xor が非ゼロなら勝ち。

例題:
- https://yukicoder.me/problems/no/669
- https://drken1215.hatenablog.com/entry/2019/03/07/091100

## Decreasing Nim (仮)[^decreasing-nim]
個数 $a_1, \ldots, a_n$ の山があり、交互に好きな個数取る。ただし 2 手目以降は前の人の取った個数**以下**しかとれない。

解法: xor が非ゼロなら勝ち。奇数なら 1 個取れば合計が偶数で 1 個しか取れない状況を相手に押し付けられるので勝ち、偶数ならどちらも偶数個取るしかないので、`a_i /= 2` を実行して同じ考察をする。

例題: https://yukicoder.me/problems/no/2666

[^decreasing-nim]: 特に名前がついていないようなので、元の問題名の部分列をとった。

## Staircase Nim
個数 $a_0, \ldots, a _ {n-1}$ の山があり、交互に添字 $1 \le i \le n-1$ を選んで好きな数の石を左に移す。移せなくなったら負け。

解法: $a_1 \oplus a_3 \oplus \cdots$ が非ゼロなら勝ち。勝っている側は普通に Nim をプレイすればよく、負けている側が $a_{2i} \to a_{2i-1}$ をやった場合は同じ個数だけ $a_{2i-1} \to a_{2i-2}$ をすれば良い。

資料: https://drken1215.hatenablog.com/entry/2019/03/15/114200

例題:
- https://yukicoder.me/problems/no/2726

## 実験してみたら周期性などがありましたよ Nim
例題:
- https://yukicoder.me/problems/no/715 (Dawson's chess, [octal game](https://en.wikipedia.org/wiki/Octal_game) 0o0.137, 周期 34)
- https://yukicoder.me/problems/no/2285 (周期 34)
- https://atcoder.jp/contests/nikkei2019-ex/tasks/nikkei2019ex_h (周期 9)
- https://www.hackerrank.com/contests/yfkpo5/challenges/g-exponential-banana-game (周期色々)

# 典型 (数え上げ)
ゲームを数え上げる問題もある。(例: 後手必勝の局面は何個あるか?)
たとえば以下のような問題:
> 山の個数が $n$ であり、 $i$ 番目の山の個数はそれぞれ指定された有限集合の要素
 ($0$ 以上 $a_i$ 以下など) である。このような Nim を行うとき、後手必勝の局面の個数は?

これは添字が xor の畳み込み ($C[i \oplus j] \leftarrow A[i] B[j]$) であり、[高速アダマール変換](https://sapphire15.hatenablog.com/entry/2021/09/13/114900)などで計算できる。

# 難しい問題
- https://yukicoder.me/problems/no/946
- https://drken1215.hatenablog.com/entry/2020/03/22/173500
Django入門① : 環境構築とサーバー起動

## はじめに
DjangoはPythonでバックエンド開発を行う際のフレームワークの一つです。今回、仮想環境の構築、プロジェクトの作成、ローカルサーバーの起動までを調べてみました。また、pythonを使って開発を行う際は、プロジェクトごとに実行環境を作成するのが一般的です。このように一時的に作成した実行環境のことを「仮想環境」と呼びます。

 ## 仮想環境の構築
 仮想環境の構築には今回venvを使用します。ターミナルで下のコマンドを入力します。
 ```
 python3 -m venv myenv
 ```
 これでmyenvという仮想環境が構築されました。また、 myenvという名前は今回作った仮想環境の名前で、ここは自由に設定してください。

 次に、作った仮想環境を作動させます。ターミナルに下のコードを入力します。
 ```
 source myenv/bin/activate
 ```
 これで仮想環境が作動しました。

 ## Djangoのインストール

まずはDjangoをインストールします。ターミナルに下のコマンドを入力します。
```
pip3 install django
```
これでDjangoのインストールが完了しました。確認してみましょう。
ターミナルに以下のコマンドを入力します。
```
pip freeze 
```
これは、仮想環境にインストールされているすべてのパッケージとそのバージョンを一覧表示するコマンドです。

```
asgiref==3.8.1
Django==5.0.4
sqlparse==0.5.0
```
Djangoがインストールされていることが確認できました。

 ## Djangoのプロジェクト作成

Djangoのプロジェクトを作成しましょう。ターミナルに以下のコマンドを入力します。
```
django-admin startproject myproject
```
これでmyprojectという仮想環境が構築されました。プロジェクト名は自由に設定してください。

次に、Djangoプロジェクトの中にアプリケーションを作成します。ターミナルに下のコマンドを入力します。
```
python manage.py startapp notes
```
"notes"という箇所は任意のアプリ名で大丈夫です。

VSCodeで確認してみましょう。
```
code .
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3767951/3f45862a-223f-83a4-b9fa-bb713eb9b6c6.png" width=1000>

notesが作成されていますね！
これでコーディングが始められますね！

## サーバー起動
作成したDjangoプロジェクトを起動してサーバーを立ち上げてみましょう。
ターミナルで以下のコードを入力します。
```
python manage.py runserver
```
表示されたURLをブラウザで開いてみましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3767951/c9db05fa-75cb-4007-7a12-11ab70e96147.png" width=1000>

サーバー起動できました！

## 補足

```
code .
```
このコマンドでVSCodeが開かなかった場合、VSCodeのコマンドラインツールがインストールされていない可能性があります。
VSCodeを開いて、command + shift + p を押して、
Shell Command: Install 'code' command in PATHを検索し選択します。
この操作により、codeコマンドがシステムのパスに追加され、ターミナルから直接VSCodeを起動できるようになると思います。
SvelteKit v2対応の罠

## はじめに
Svelteでアプリを構築するための公式フレームワークである SvelteKit のバージョン2が2023年12月にリリースされました。
マイグレーションツールも公開されており簡単に更新できるかなと思ったら、ちょっとしたはまりどころがあったので、今回は自分がハマったポイントをまとめてみようと思います。
参考URL : https://kit.svelte.dev/docs/migrating-to-sveltekit-2

## 結論
typescriptを使っている場合に moduleResolution が node から bundler になったため、モジュールの解決が厳密になり、export されていないモジュールは読み込めなくなりました。
なので、 export されていないモジュールを読み込んでいた部分のパス解決に失敗していました。

## 詳細

問題が起きたシステムでは Carbon Components Svelte というUIライブラリを使っていました。

その中の DataTable テーブルを表示するためのモジュールを使っていたのですが、テーブルで扱える型が Carbon Components Svelte 定義している専用型のでした。

SvelteKit v1の時は
``` svelte
import type {
    DataTableHeader,
    DataTableRow,
  } from 'carbon-components-svelte/types/DataTable/DataTable.svelte.d.ts';
```
こうして型を読み込んでいたのですが、Carbon Components Svelte の package.jsonを見るとtypes 以下のディレクトリは export されていません。
参考URL : https://github.com/carbon-design-system/carbon-components-svelte/blob/v0.85.0/package.json#L7-L25

なので、SvelteKit v2では
``` svelte
import type {
    DataTableHeader,
    DataTableRow,
  } from 'carbon-components-svelte/src/DataTable/DataTable.svelte';
```
このようにexportされているパスから型定義を読み込む必要があります。

## まとめ
実は問題の修正のみであれば、エラー出ているところを IDE の指示通りに修正していけば直ってしまったので、修正だけは割と簡単にできました。
しかし原因がわからずモヤモヤしたので、深堀をしてみました。
moduleResolution 従来の node にするという方法もありますが、標準設定の方が IDE のサポートを受けやすいなどのメリットが大きいので今後も標準設定に沿った開発環境の構築をしていきたいと思います。