ElasticBeanstalk の環境を Node.js12 から 16 にアップデートする際の躓きポイント

# はじめに
フルカイテンではフロントの WEB サーバ構築に ElasticBeanstalk を使用しており、Node.js 12 系で開発を行っていました。
しかし ElasticBeanstalk の Node.js12 プラットフォームは2023/02/01 時点で既に EOL を迎え、 リタイア状態となっています。
環境を複製できなかったり、セキュリティ面でのサポートも切れているため、早期に開発環境の Node.js バージョンアップと EB の Node16 プラットフォームを使用した新しい環境を作成する必要がありました。
実際に作業を行うと色々と躓いたポイントがあったため、本記事ではその具体的な内容と解決策を紹介します。

# 本記事の対象読者
– ElasticBeanstalk(Node.js@12 Platform) で WEB サーバを構築している
– Node.js のバージョンを12系から16系にアップデートする予定がある

# バージョンアップ時の躓きポイント
## (1) 環境のクローンができない
Beanstalk のプラットフォームのブランチアップデ

AIが何についてのポエムを作ってるのか当てるゲーム作った

これ。

https://whatword-5dyx7gwrfq-an.a.run.app/

# これは何？

AIが何についてのポエムを作ってるのか当てるゲームです。

ルールは以下の通り。

1. 秘密のキーワードが指定されます。これが何であるかはプレイヤーに知らされません。
1. そのキーワードをテーマにAIがポエムを作ります。
1. プレイヤーはそのキーワード(英語)が何かを当てます。
1. 誤回答するたびにキーワードが１文字ずつ開示されます。
1. 全部開示されるまでにキーワードを当てられたらクリアです。


こんな画面です。

>赤い鼻と大きな嘘は鏡の中に映る
悲しい笑顔を見せる怪しい影
ハンドピースを掲げて遊ぶように
輝く瞳が消えた時には

これが何についてのポエムなのかを当てます。
なんだか悲しげですね。

ちなみに答えは『CLO

カードゲームロジック

カードゲームロジック

概要

paizaのゲームのプログラムが思ったより難しくて、偉い時間がかかったので、
消すのももったいないので、ノートとして記録してみる。

https://paiza.jp/poh/hatsukoi/challenge/hatsukoi_clothes5

設問はこちら。
難しいので、この設問では、1人1枚という制限が付けられていたけど、それだと面白くないので、何人でも計算できるように、上位互換でのロジックで組んだ。

playersを変更すれば何人でも計算できる。設問の場合は52にする必要がある。

簡単な内容は、配られたカードを一定のルールでカードを出していくと、どの順番にクリアしていくか。というもの。

動作コード

こちらで動作確認が出来る。

https://paiza.io/projects/-EYjojosn5-siWVZi41z7g

コード

“`Javascript
const players = 52;
const power = [‘3’,

[Vue]画面スクロールに合わせてバックグラウンドのalphaを調整

# 経緯
フロント何もわからんない…OSSにコントリビュートして武者修行してみよう。

# 要件
1度何となく作ってPR出してみたら「要件不足してたから定義するね」って言ってくれた。優しい。詳細は以下。
– At the top of the page the header has full opacity (as it does in your case)
– The user scrolls down -> the header disappears completely (0.0 opacity)
– The user scrolls up -> the header appears, and if the page isn’t at the top then we’d have an opacity of 0.5 or – so for just the background of the header
– The logo and buttons would have full opacity, just the background would be a bit

Presigned URL を用いた S3 multipart upload を行う (by JavaScript + Python Chalice)

# 問題

AWS S3 によって Presigned URL を発行すれば、サーバーに直接ファイルをアップロードせずとも、S3 に対して直接ファイルをアップロードできる。
しかし、1回のリクエストでアップロードできる最大ファイルサイズは 5GB であり、それ以上のファイルをアップロードするためにはマルチパートアップロードによって分割アップロードを行う必要がある。
ここでは、ブラウザ側に Credential を発行することなく、サーバー側で発行された Presigned URL を利用してファイルをマルチパートアップロードする方法についてを記す。

# プロジェクト全体

プロジェクト全体で利用するソースコードを以下で公開している。
今回は、サーバーサイドは [AWS Chalice (Python)](https://aws.github.io/chalice/) で、クライアントサイドでは JavaScript を Webpack でビルドしたものを利用している。

https://github.com/t-kigi/s3-multipart-uploads-with-chal

React Hook FormでuseFieldArrayの初期化方法を間違っていた話。appendやreplaceなどは使わずにdefaultValuesで行う。

React Hook FormのuseFieldArrayは動的にフォームの入力項目を増減する必要がある場合にとても便利な機能です。

とても便利な機能なのですが、私は最初間違って使っていました。
正しい使い方を理解したので記事にまとめておこうと思います。

useFieldArrayの公式ドキュメントは下記を参照してください。

https://react-hook-form.com/api/usefieldarray/

# どう間違えたのか？
サンプルコードを交えて説明した方が理解しやすいので、サンプルコードに沿って説明します。
サンプルコードのバージョンは下記の通りです。

* react: 18.2.0
* react-hook-form: 7.43.0

例えば下記のようなデータをAPIで受け取り、valueの数だけテキストボックスを作成する画面を考えます。

“`javascript
{
hoge: [
{ value: 100 },
{ value: 0 },
{ value: 10 },
{ value: 50 }
]
}
`

WordPressでAjaxにて投稿記事を取得する際にfetchを使ってダウンロードの進行状況（progress）を取得する方法

# はじめに
WordpressにてAjaxで投稿記事を取得する際にダウンロード状況（Progress）も取得する場合のサンプルは大体はjQueryかXMLHttpRequestが多いのですが、fetchでも[ReadableStream](https://developer.mozilla.org/ja/docs/Web/API/ReadableStream)を使えば取得できるということで試してみました。

# WordPressの設定

## 1) Ajaxの受け取り側の設定

WPがajaxリクエストを受け取るためには、以下のようにwp_ajax_[任意のアクション名]、wp_ajax_nopriv_[任意のアクション名]アクションフックにて設定します。

“`PHP:functions.php
function topics_ajax() {

//[ここにJSONを作成する処理を記述する]

echo $json;

wp_die();
}

add_action( ‘wp_ajax_topics_ajax’, ‘topics_ajax’ )

Test Doubleについて

# TestDouble ≠ mock
これまでTestDoubleとかmockとかspyとかstubとかよくわからず使ってました。
なんなら全部mockを言い換えた言葉なんでしょ！　って認識でした

どうやら違うらしいです。l

改めてTestDoubleについて学んだのでまとめます。

## そもそもTestDoubleって？

Test Double は、ソフトウェアテストにおいて使用される
stub,dummy,spy,mock,fakeなどを指します。
これらは、実際のオブジェクトの代わりに使用される、テスト用の代替オブジェクトです。

これらのオブジェクトを使用することで、テスト対象となるオブジェクトと直接的な依存関係を避けることができ、
実際のオブジェクトを使用することによって発生する問題（例えば、データベースへの書き込みなど）を回避することができます。
また、テスト用のオブジェクトを使用することで、実際のオブジェクトの返す値を制御し、期待通りの処理を行っているかを検証することもできます。

ってChatGPTが言ってました。頭いいですね。

つまり
stub,dumm

TypeScriptのinterfaceについて

TypeScriptのインターフェイスは、オブジェクトの型を定義するためのものです。
インターフェイスは、プロパティ、メソッド、およびイベントのシグネチャーを定義します。
実装者はこのシグネチャーに従って、オブジェクトを作成することが求められます。

例:

“`typescript
Copy code
interface MyInterface {
value: string;
printValue(): void;
}

class MyClass implements MyInterface {
constructor(public value: string) {}

printValue() {
console.log(this.value);
}
}

const instance = new MyClass(“Hello, TypeScript!”);
instance.printValue(); // “Hello, TypeScript!”
“`
このように、インターフェイスは、オブジェクトが持つべきプロパティやメソッドなどのシグネチャ

React Three Fiberで作成したComponentをStorybookで管理する – Effect編

## 1. 概要
前回、`React Three Fiber`にて作成した3Dオブジェクトを`Storybook`上で管理する、環境構築に関する記事を書かせていただきました。

https://qiita.com/t_shi/items/fca0cd1e383dd056d076

今回は、前回の環境を用い、`Post-processing`によるエフェクト処理を`Storybook`上で管理できる様に改修しましたので、ご共有します。

## 2. 内容
**前回時点**
**今回は`Post-processing`により、下図の様なEffectが掛かる所まで作成しました**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2266010/6fbce

Next.jsでのLinkコンポーネントの記述の仕方で変更点をおさえる！！

先日Next.jsのバージョンは13.0にアップデートされました。その際にLinkコンポーネントの記述方が変わったみたいなので調べてみました。

### この記事を読む対象者
・Next.jsのバージョンが13になってLinkコンポーネントの記述方を情報収集している方

### 読了時間
・5分もかかりません。

## 新Linkコンポーネントの記述法
“`index.tsx

ホームに戻る

“`

## 以前の記述法
“`index.tsx

ホームに戻る

“`

### 変更点
以前はLinkコンポーネント内にaタグをネストする必要があったが、不要になった。
公式ドキュメントでは[こちら](https://beta.nextjs.org/docs/api-reference/components/link)の箇所です。

### 疑問に思ったこと
[こちらの記事](https://zenn.dev/luvmini511/articles/b5e9f02cadd16

mswでmockするときにデータが取得できなかった話(parse-error)

## 結論

テスト用の`node`環境では、
`msw`のエンドポイント定義は、**フルパス**で設定しないと取得できない。

:::note info
よい例：
:::

“`js
const server = setupServer(
rest.get(‘http://localhost:3000/users’, (req, res, ctx) => {
return res(ctx.json({ firstName: ‘John’ }))
}),
)
“`
:::note alert
ダメな例：
:::

“`js
const server = setupServer(
// “/users”だけではハンドリングされません！
rest.get(‘/users’, (req, res, ctx) => {
return res(ctx.json({ firstName: ‘John’ }))
}),
)
“`

## 経緯
ローカルでフロントのテスト用に`msw`でAPIレスポンスをモック化したら、データが取得できず、なんで？？ってなっ

代表的な高階関数を図解してみた

高階関数を使えば配列に対する要素に対しての少し複雑な処理やforループを使って書くような処理もシンプルに書けるようになります。
だけど、代表的な高階関数である`map`や`reduce`がどのような処理ができるか混乱してしまう人も多いと思います。
一目でどの関数で何ができるか図解してみたので、気休めに覗いてみてください！

—

## map
配列のすべての要素に対して関数を適用し、その結果からなる新しい配列を生成します
“`JavaScript
const people = [‘Sad guy’, ‘Normal guy’, ‘Exciting guy’];
const mastedPeople = people.map(function(person) {
return person + ‘ is wearing the mask’;
});
console.log(mastedPeople); // [“Sad guy is wearing the mask”, “Normal guy is wearing the mask”, “Exciting guy is wea

合言葉自動生成ツールを作ろう【JavaScript初心者】

初心者の練習として作ってみてください。
勝手に真似したり、改変したりしてGitHub pagesに挙げてもOKです！


▼完成ページはこちら▼
https://fuuchin.github.io/Aikotobar/

▼ソースコードはこちら▼
https://github.com/fuuchin/Aikotobar/tree/gh-pages

※完成ページは、言葉が5つ合わさった合言葉となっておりますが、この記事では、3つの言葉を組み合わせた合言葉を作ります。

## 前提条件
– `Visual Studio code`がインストールされていること
– `Google Chrome`がインストールされていること

## 手順1:ファイルの作成

3つのファイルをVScodeで**同じフォルダ内に**作ります。
– `index.htm

位置情報共有Webアプリを作ってた話

# サ終ってま？？？
某スマートフォン向け位置情報共有~~アイスクリーム~~アプリ、親会社の影響でどうやらサ終するみたいなんですよね。
んで、自分自身もZenlyって結構使ってたし、周りでも沢山の人が使ってたので、サ終しちゃうのはちょっと悲しいです。

…

**代わりになるの作ればよくね？？？**
ってなわけで代わりになりそうな位置情報共有アプリを作る計画が始まったのでした。

なお、この記事は突発的に見切り発車で書き始めたので多分どうしようもない記事になってると思います。

# まずは基本構想
まず、アプリケーション・サービスを作るのであれば、仕様書を書くとまではいかずとも、構想は考えるべきです。
さて、出来上がった仕様書はこちらです。
（流石にネタです）

（カクカクシカジカありまして） **クロスプラットフォームで使える** アプリ

外部ライブラリを使わず値の絞り込み

## 参考

* https://kuroeveryday.blogspot.com/2016/03/incremental-search.html

## ソース

* http://localhost/?k=lemon

のようにkの値で絞り込む

“`js

過去配信の動画ページ

配信第 回