JavaScript関連のことを調べてみた

【React】ChatGPTを使っておみくじサイトを作ってみた

# はじめに

あけましておめでとうございます。KDDIアジャイル開発センター所属のtakateinです。
大晦日の日に「今年はAIが本当に流行ったけど、chatGPT使って開発してないなぁ」と、ふと思い作ることにしました。

# なぜ、chatGPTを使うのか
“おみくじを引くだけ” のアプリだと面白くなくて、一言メッセージを添えるとユーザーも楽しそう。
この一言メッセージを人間が考えてDBとかに保存してランダムで使用するよりかは対話型AIに考えてもらった方が面白そうだから。

# 完成品
こちら
http://agorophius.com/game/2024_AgoMikuji/index.html

個人でバンド活動をしており、SNSを観てくれる方が年始から気軽に楽しめるコンテンツが提供出来たらいいなー と思い作りました。
chatGPTには、「ユーザー名を読み込み、ランダムにおみくじの結果を返す。その結果からバンド名にあった面白い曲名」を考えてもらうようにしました。

↓↓↓こんな感じで返ってきます↓↓↓
_________
「ふん、たかてぃ～んさんへのおみくじね。せーのっ！中

【React】JavaScriptからTypeScriptに移行してみた

# 概要

前回、「文字の類似度」からポケモン名をサジェストするコンポーネントを実装しました。

https://qiita.com/ishi720/items/a026b8b29b31e0ef6ee0

ただ、勢いで作ってしまったため、**JavaScriptベースのReactアプリ**で作ってしまいました。そのため、**TypeScriptベースのReact**に移行したいと思います。

# 移行作業

今回の移行方法としては、**TypeScriptベースのReact**で新規のアプリを新規で作成し、その上に追加開発分を引っ越しします。

## 1. 新しくTypeScriptベースのReactアプリを作成

下記コマンドで新しくTypeScriptベースのReactアプリを作成します。
名前は何でも良いです。

“`bash
$ npx create-react-app new-app –template typescript
“`

## 2. 追加のライブラリをインストール

今回のプロジェクトは、`sass`しか追加インストールしていないので直接コマンドをたたきま

フロントエンド学習記No.3 PokeAPIでポケモンのデータを取得してみる

### はじめに
第3回目はPokeAPIを用いてポケモンのデータを取得し、表示することに挑戦したいと思います。

### 目標物
IDや名前等を入れると、それに合致するポケモンの情報を表示するといったシンプルな機能を実装したいと思います。

### APIとは？

https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9

Application Programming Interface(アプリケーションプログラミングインターフェース)の略です。

> 広義ではソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用するインタフェースの仕様である。

説明が難しいのですが、異なる

PM2をブラウザから管理する

npmのpm2-guiが動かなくなっているような気がするので、自作しました。
ブラウザからpm2で管理するプロセスに対して以下ができるようにします。

・プロセスの一覧表示
・プロセスの詳細表示
・プロセスを起動・停止
・out/errのログ参照・ファイル取得

このようなWebページを作ります。


ソースコードもろもろはGitHubに上げておきました。

poruruba/pm2_console

https://github.com/poruruba/pm2_console

# pm2のプロセスの構成

pm2の定義ファイルには管理したいアプリのプロセスの定義に加えて、今回作成するプロセス管理用のアプリも定義しておきます。
プロセス管理用のアプリと、管理したいプロセスのアプリを1つにすると、プロセスを停止した時点でプロセス管理用のアプ

特定の条件でしか使わない変数を無造作に定義したくない

誰が読んでも分かるシンプルなコードがあるとする。

“`js
function なんかの処理(array = []) {
let hoge = null;
for (let i = 0; i < array.length; i++) { hoge = 処理1(hoge, i); } hoge = 処理2(hoge); return hoge; } ``` ここから仕様が増えてきて、外部のパラメータがAのときはこうする。Bのときはこうする。みたいな処理が組み込まれていくとする。 ```js function なんかの処理(array = [], isA = false, isB = false) { let hoge = null; let aCount = 0; let aText = ""; let bCount = 0; let bText = ""; for (let i = 0; i < array.length; i++) { hoge = 処理1(

PEG.js(peggy)でzod schemaを解析してみよう

PEGとはパーサージェネレーターです。パーサージェネレーターとはなんやねんというと、文を解析するプログラムを作成するプログラムです。ややこしいですね。
PEGを使用することで、たとえばcsvとかJSONとか一定の構文を持った文字列を解析し、JavaScriptのObjectにすることができます。

PEGのnpmライブラリは更新が途絶しているようなので、peggyという後継のライブラリを使用します。

https://peggyjs.org/

今回、行いたいことは……。

“`ts
export const todoListSchema = z.object({
id: z.number(),
task: z.string(),
description: z.string().nullish(),
due_date: z.date().nullish(),
created_at: z.date().nullish(),
updated_at: z.date().nullish(),
});
“`

このようなzod schemaを以下のようなJavaSc

地図プラットフォームを使用して現実世界をシミュレーションしてみた

# はじめに
昨年、以下記事を投稿し、地図プラットフォームであるHERE Maps API for Javascriptを使用して旅行ガイドを作ってみました。

https://qiita.com/kekishida/items/c49df325fe4e32c9aac0

今回はこれを拡張し、HERE Maps API for Javascriptのみではなく、その他のAPIを駆使して、***日曜プログラミングレベル***で、どの程度現実世界をシミュレーションできるか試してみました。以下のGIFイメージでは、

– 目的地のシドニーオペラハウスを俯瞰的に確認
– 目的地のシドニーオペラハウスの現場の写真イメージを確認
– 目的地のシドニーオペラハウスの経路と到達時刻を確認
– 目的地のシドニーオペラハウスの経路写真イメージを確認
– 目的地のシドニーオペラハウスをChatGPTに解説してもらう

![test_edit_0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/21ccf89e-

【React】keyframeを利用して流体UIを手軽に作成する

# 背景
モダンなサイトを見ていると、
波のように揺れる流体UIを見る事があります。
このようなおしゃれなUIを作れるようになりたいと思い調べてみました。
本記事では、以下のgif画像内の3つの流体UIの作成について紹介します。

# 作成する物
– 左：グラテーションがかかった丸めのUI
– 真ん中：左のUIにぼかしを加えたもの
– 右：徐々にぼかしがかかる丸めの画像が見えるUI


# 環境
– React：18.2.0
– Vite：5.0.8

# コード
HTML要素にcssの`keyframe`でアニメーションを付けていきます。
まずは以下のようにHTML要素を作成します。
流体UIを3つ作成する予定なので、HTML要素も同じ数準備します。

“`react:App.jsx
// 外部ファイルのインポート
impo

[React][初学者向け]react-router-domで画面遷移をさせる方法

23新卒プログラング未経験の釣り人Shochanです。

業務でFEの実装に携わり、プライベートでJavaScript,TypeScript,Reactを勉強するようになりましたので、勉強していく中で学んだこと、気づきなどを書いていきます。

今回の記事はreact-router-domで画面遷移をさせる方法です。
改善できるところ、誤り、アドバイス等ございましたら、コメントにて書いていただけると嬉しいです。

## react-router-domのインストール
Reactを導入しているディレクトリにて以下のコマンドを実行し、react-router-domのインストールを行いましょう。
“`terminal:ターミナル
npm install react-router-dom
“`
## index.tsxを変更
src/index.tsxを以下のように変更します。
react-router-domパッケージのBrowserRouterを使用するのでインポートしましょう。
BrowserRouterタグでルーティングを設定するコンポーネント（AppRoutes）を囲ってあげま

webpackでバンドルしてブックマークレットを作ってみた

## はじめに

ブックマークレットを2回クリックするのを1回のクリックにしようと思って、2つのブックマークレットのファイルを1つのファイルにしました。そうしたら「保守性が下がった」と思いました。なぜなら異なる機能で別々のファイルに分かれていた関数が1つのファイルに入ったからです。その対策としてwebpackでバンドルすることで別々のファイルから1つのブックマークレットを作る方法を調べて作ってみました。

## 本記事の対象者

– webpackを使って複数ファイルをバンドルして1つのブックマークレットを作る方法を知りたい方。
– ブックマークレットの規模が大きくなった方。

## 調べたURL

webpackの公式ウェブサイトを読みました。次のURLが役に立ちました。

| タイトル | URL |
| —————- | ————————————————— |
| Concepts

アメバ連携プラグインを開発しての感想

# はじめに
過去、10数年、独自のyoutube再生サイトを構築してきました。再生サイトは、レンタルサーバー上に設置してきました。再生サイトは現在も運用中です。ある時期までは、独自の再生リストでyoutube動画を再生していましたが、その後、プラグインの開発に興味を持ち、これまで、いくつかのプラグインを作成してきました。
最近は、アメバ連携のプラグイン作成を主に行っています。今回、slimプラグインv4.0プラグインをChromeウェブストアに公開しました。ここでは、このプラグインの開発経緯についての感想です。

# アメバ連携プラグイン(slimプラグインv4.0)について
アメバブログを投稿していますが、この時に、youtube動画を埋め込むことができます。この埋め込みは一つのyoutube動画を埋め込む機能です。これも一つの方法ですが、行いたかったことは自前のサイトの動画を埋め込むことですが、これはアメバではできません。
使用禁止タグのため、htmlやscript、iframeなどが使用できません。そこで、仕方なくリンクで自前のwebサイトを開くことにしました。その時に、このア

2STEPでNode.jsのプログラムをEXE化する方法

# Node.jsでEXE化!?
今回はNode.jsで作ったプログラムをEXE化する方法について書いていきます。
不備等ございましたらコメントにてお手柔らかに指摘お願いします。

## 注意
この記事はNode.jsとnpmをインストールしている前提で書いています。

# STEP1: Nexeをダウンロード
以下のコマンドを実行してください
“`console
$ npm -g install nexe
“`
# STEP2: Nexeを使ってExe化
“`console
$ nexe -i ファイル名.js -o ファイル名.exe -t windows-x64-14.15.3
“`
# 最後に
Node.jsやTSに関してのブログを他にもいくつか書いているので良かったらご覧ください

すぐに出来る！TypeScript実行環境構築

# TypeScriptの実行環境構築
この記事では素人ながらTypeScritpの実行環境構築に関してまとめていきます。
不備等ございましたらコメント等で優しく教えてください。

# 注意
大前提としてNode.jsとnpmが導入されているものとします。
導入していない方は導入をお願いします。
TS→TypeScript

# まず最初に
“`console
$ npm install -g typescript @types/node@16 ts-node
“`
このコマンドを実行してください
以下のものがインストールできます
| 名称 | 内容 |
|:———–|————:|
|typescript|TSのコードをJSに変換するための基本ライブラリ|
|@types/node@16|型情報を提供するためのライブラリ|
|ts-node|TSのコードを直接実行するためのライブラリ|

# 1: tscで実行
“`console
$ tsc ファイル名.ts
“`
このようにやると同じファイル名のjsファイルが生成されると思いますので、その後は普

知っておくと便利！TypeScriptの追加要素 (一部)

# TypeScriptと使うメリット
素人ながらTypeScriptを使うメリットをまとめてみようと思います。
間違っている部分などありましたらコメントで優しく教えてください。
まだTypeScriptを導入していない方は[こちら](https://qiita.com/ROBOTofficial/items/b4cfc000fd5cf255c9e1)を確認してみてください。

### 注意
あくまで初心者を対象に書いています。
厳密にいうと違う表現があるかもしれませんがご了承ください。
今回紹介するのはあくまで**一部**です。
TSはTypeScriptの事です(一々正式名称だと大変なので省略しています)
.tsはTypeScriptの拡張子です。

## 1:JSとの互換性
まず大前提としてJSとTSには互換性があります。
つまり…
“`js:main.js
console.log(“HELLO WORLD”);
“`
このコードをそのままmain.tsに入れて実行しても動かすことができます。

## 2:静的型付けが出来る
JSで静的型付けが使えずに不便だと思ったことはあり

JavaScriptの小技集

# はじめに

初投稿です。
知ってたら便利になる小技が無かったのでまとめました。

「小技が知りたい…だけど検索しても出てこない…！」
そういう時に役立ちます。

バイト数短縮小技やちょっと便利な関数も入れています。
比較的古いバージョンのJSでは一部の小技が使えないかもしれません。
随時追加予定です。他に小技をご存じの方はコメント欄にGO。

# 配列

### 配列の重複した値を削除[^1]
“`js
let meta = [“foo”, “bar”, “baz”, “foo”];
let unique_meta = […new Set(names)];
console.log(unique_meta); // [“foo”, “bar”, “baz”]
“`
[^1]: [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set), [スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaSc

Discordjs v14をGAEで動かす

DiscorbボットをGAE(Google App Engine)上で構築する時のtips。

Discordボットは基本的にスラッシュコマンド(Interaction)を駆使して運用するのがベターですが、今回は監視が必要だったのでWebSocketで常時リッスンします。

### 使用技術
– Node.js v20
– discord.js: ^14
– GCP

“`javascript:index.js
require(“dotenv”).config();
require(“./deploy-commands.js”).deployCommands();
const { Client, Events, GatewayIntentBits, Partials } = require(“discord.js”);
const tallyFile = require(“./commands/tally.js”);
const http = require(‘http’);

const server = http.createServer((_req, res) => {
r

Google Closure Compiler でエラーが出たときの対処法：This language feature is only supported for UNSTABLE mode

2024年1月1日からエラーにハマりました。

このエラーにハマるケースは多くないと思いますが、気が付いてしまったのでメモしておきます。そもそも、JavaScriptでクラス宣言する人なんて、いないと思いますけどね。

# エラーになったソースコード

クラスを宣言し、クラスをnewしただけのコードです。
Chrome Devtoolのコンソールに突っ込んだら動きますが、Closure Compilerではエラーになります。

“`javascript
// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level SIMPLE_OPTIMIZATIONS
// @language_out ECMASCRIPT_2019
// ==/ClosureCompiler==

javascript:(()=>{
class A{
b;
constructor(a) {
this.a = a;
}
}
const a = new A(1);
conso

HTML/CSS/JavaScriptで年越しカウントダウン + 辰カービィを作った

あけましておめでとうございます。うえむーです。
2023年は大変お世話になりました。
本年度もよろしくお願いします。

さて、本題に入りますが、HTML/CSS/JavaScriptで年越しカウントダウン + 辰カービィを作りました！
また、レスポンシブ対応しており、ウィンドウサイズを変更しても崩れないように対応しております。

## カービィを作る

まずはカービィを作成します。
ここはとにかく、border-radiusをFANCY-BORDER-RADIUSのツールを使って実装しました。

https://9elements.github.io/fancy-border-radius/

## 辰の帽子

次に辰の帽子を作成します。
特に、辰のひげ、後ろの髪型のような曲線状はどのように実装しようか苦労しました。

後ろの髪型は以下のように実装しました。

“`html

“`

“`css
.dragon_hair_bk {
position: absolute;
top: -15%;

frameCount・剰余演算を使った p5.js でのループアニメーション：アニメーションの最初と最後に空白の時間を作る

## 今回の内容
p5.js でループするアニメーションを作る際に、frameCount と剰余演算を組み合わせたものをよく使うのですが、それに関連した内容です。

直近で、以下のようなアニメーション（イージングを適用したループアニメーション）を作ろうとした中で、試してみていた内容です。