f@ctor

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

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

Discord.js v14 botの作り方【基礎・ワークスペース作成編】 (2024/5/21現在)

# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！

# ワークスペースとは
ワークスペースとは、簡単に言うとBotのプログラムのごちゃごちゃをまとめるフォルダのことです。
フォルダを作成するだけではなく、パッケージのインストールなどいくつかやることがあるので頑張ってください！

また、僕はMacbookで作業しますが、Windowsの方もやることは同じです！

# ディレクトリの作成
ディレクトリ…? なにそれおいしいの って人向けに説明するつもりなので、分かる人は飛ばし飛ばしでも大丈夫です！
|手順|説明|備考|
|—|—|—|
|1|`エクスプローラー`または`Finder`を開きます。 (以下Finde

元記事を表示

Discord.js v14 botの作り方【基礎・動作確認編】 (2024/5/21現在)

# 準備中…
5/21 ~ 5/22までに公開します！

元記事を表示

Discord.js v14 botの作り方【基礎・環境構築編】 (2024/5/21現在)

# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！

# 環境構築とは
discord.jsというパッケージをインストールする`npm`と、
discord.jsを実行する`Node.js`をインストールしなければ、botを開発したり、動かしたりすることができません。

そのための環境を作り、開発や実行を行える状況にすることを`環境構築`といいます。

# インストール方法
:::note warn
Node.jsのインストール方法は頻繁に変更される可能性がございます。
現時点でのインストール方法を記載しますが、できない場合は`Node.js install`などとググったほうが早いと思われます。
:::
|手順|説明|備考|

元記事を表示

Discord.js v14 botの作り方【基礎・下準備編】 (2024/5/21現在)

# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。

今回は、botをプログラムするために、bot自体を作成していきます！
**※ 現時点での情報ですので、見た目などが今後変更される可能性がございます。**

# Botを開発するサーバーを作ろう
|手順|説明|備考|
|—|—|—|
|1|Discordの画面左上にある「**サーバーを追加**」をクリックします。|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794632/a466c895-9b8f-31e3-fe9d-0741c430226b.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794632/17a3

元記事を表示

音声で手軽に登録するToDoリストのシステムをつくる

ToDoリストって仕事なら多少面倒でもやるんだけど、

プライベートのちょっとした買いものリストのメモとか、割引券やポイントの有効期限とか、
家庭内でやらないといけないことのToDoリストって、登録すること自体が面倒で結構忘れそうになります。

そこで音声なら即座に手軽に管理できるのではと思い作ってみました。

## 完成品

古いタブレットPCにNotionのTodoリストをブラウザで表示しています。
白い箱部分がボタンになっており、Arduino経由でタブレットPCのマイクを起動し録音します。
録音されたデータは音声認識をして、Notionにタスクが追加されます。

![IMG_1270.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7132/23522ee0-01b4-8a7b-99da-2ab9150a9e7b.jpeg)

## Notion APIの準備
### Secret Key を作成する
こちらからインテグレーションを作成するとAPIで使うシークレットキーが作成できます。
htt

元記事を表示

RailsとJavaScriptを使った非同期テーブル更新の実装

この記事では、Railsアプリケーションで非同期的にテーブルを更新する方法について説明します。特に、スケジュール管理アプリケーションの例を用いて、特定の日付のスケジュールとその時間枠を動的に表示する方法を解説します。

## 1. 背景

スケジュール管理アプリケーションでは、ユーザーが日付を選択するたびに、該当日のスケジュールと時間枠を動的に表示する必要があります。この実装のためには、RailsサーバーからJSON形式でデータを取得し、フロントエンドでそのデータを使用してテーブルを更新する必要があります。

## 2. 実装の概要

### 2.1 サーバーサイド（Rails）

Railsのコントローラーで、選択された日付のスケジュールと時間枠を計算し、JSON形式で返すアクションを作成します。

### 2.2 クライアントサイド（JavaScript）

JavaScriptで、取得したJSONデータを使用してテーブルを動的に更新します。これには、テーブルのヘッダーとボディの両方を更新する処理が含まれます。

## 3. コードの詳細

### 3.1 Railsコントローラー

元記事を表示

AmiVoice API 音声認識APIを使ってみた所感やTips 〜sample.htmlを元に〜

# AmiVoice API 音声認識APIを使ってみた所感やTips 〜sample.htmlを元に〜

__前文__
`sample.html`を使って(ソースコードみて)学習しよう・そうしよう。
その`sample.html`をmore分かりやすく便利に改造カスタム。

{cap: 改造カスタム `ami_sample.html` 全体像 – 音声ファイル読み込み”前”}

改造カスタム ami_sample.html、右クリックメニューから保存
【！】 リンククリックと

元記事を表示

Google Apps Script (GAS) の使い方 【Webアプリ編】

# Google Apps Script (以下gas) とは
詳しくは[こちら](https://qiita.com/tacopic-007/items/05fff88270f9eb59e826)の記事に記載していますが、簡単に説明するとGoogleサービスの自動化スクリプトをAPIなどを使用せずに開発できる、めちゃんこ便利な言語です。
一応、gasって何？って方は[基礎](https://qiita.com/minoru_kinugasa/items/e8421f4fe501ef322535)や[基礎メソッド](https://qiita.com/minoru_kinugasa/items/8428ae5af9f9af0b2810)の記事もありますので是非！

# ファイルの作り方
では早速、webアプリを作成していきます。
gasのページを開き、ファイルの「**＋**」の「**HTML**」を押し、新規HTMLファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3

元記事を表示

Google Apps Script (GAS) の使い方【基礎編】

## Google Apps Scriptとは
Google Apps Script（以下gas）は、提供されているGoogleサービスの自動化スクリプトなどを組み、ある程度の自動化を図ることができる優れものです。
また、APIなどを使用して複雑なコードを書く必要がないため初心者でも書きやすいという特徴があります。

操作できるものとして、`Gmail`、`Google Drive`、`Google Document`、`Google Spreadsheets`などいろいろなものがありますが、今回は`Google Spreadsheets`を使用して解説します。

# 下準備
操作するスプレッドシートを準備します。
[https://docs.google.com/spreadsheets/u/0/?hl=ja](https://docs.google.com/spreadsheets/u/0/?hl=ja)
にアクセスし、「空白のスプレッドシート」をクリックし、新規作成します。![image.png](https://qiita-image-store.s3.ap-northeast

元記事を表示

ページのリンクをTwitterからXに置換してくれるChrome拡張「twitter2x」を作りました

# 開発経緯
何気なくTwitterで検索履歴から見たいハッシュタグに移動しようと思ったら検索履歴が無くなってました。
どうやら数日前から「twitter.com」にアクセスすると「x.com」にリダイレクトする仕様らしい、そのせいで検索履歴が消えてたみたい。

https://news.yahoo.co.jp/expert/articles/284ccafcf6efe617fd91658af7297388cca7536b

このYahooニュースを見てたんですが、「もしリダイレクトされなくなったらリンク切れが続出する事態になるんじゃね？」って思っちゃったんですよね。

# twitter2x
という事で、ページのリンクをTwitterからXに置換してくれるChromeの拡張機能を作りました。

https://github.com/miracle2568/twitter2x

“`json:manifest.json
{
“name”: “twitter2x”,
“description”: “Webページのリンクを「twitter.com」から「x.com」に置換します。

元記事を表示

undefinedとNanとfind関数

# undefinedとNanに遭遇

課題を進めていると、undefinedとNanに遭遇。。。
Javascript学習初心者の私には、ここから疑問がはじまる（笑）

* そもそもdefinedとNanってナニ？？
* エラーの対処法がわからない。

そこで、これらの意味を調べてみることに、、、

# undefinedとNanとは？

undefined(未定義)
定義しているに対して、値が見つからない時にでるエラー
Nan(Not a numberの略)
本来は数値であるべき値が、数値として解釈できないときにでるエラー

# どんな時にundefindとNanのエラーコードに出会う？

調べてみると、以下のような事例が挙げられました。

* #### 変数が定義されてはいるが、値が代入されていない場合。

* #### 存在しない変数を参照した場合。

* #### 数値として解釈できない文字列を数値として使用した場合。などなど

私の場合、、、
![スクリーンショット 202

元記事を表示

【Nuxt3】serverディレクトリで実装したAPIにCORS対策を行う

Nuxt3を使用したフロントエンド開発を行う中で、APIをNuxt3のserverディレクトリを使ってモックしていました。
しかし、ロードバランサーを経由する形でフロントエンドにアクセスをしたところ、そのAPIがCORSエラーになってしまいました。

この問題を解決する手順について対策中に出たいくつかのエラーをの解決策も含めて解説をします。

# 完成したコード

`server/middleware/cors.js`を作成し、以下のコードを記述します。

“`javascript
// server/middleware/cors.js
export default defineEventHandler((event) => {
const method = event.node.req.method

// 許可するオリジン（=ロードバランサーのオリジン）
const allowedOrigins = [‘http://localhost:8133’]
const origin = event.node.req.headers.origin

if (allo

元記事を表示

switch文　[JavaScript]

switch文は、if文同様、条件分岐の一種。
１つの値を起点とした場合分けに特化している。

この値が、
このとき、
これをする。

のようなときに使用することができる。

switch文で書いたものは全てif文でも書けるが、if文の場合分けが多くなってくると、swtich文の方が意図を伝えやすいコードになり、読みやすい。

## 目次：

[・switch文の基本構文](#switch文の基本構文)
[・if文とswitch文の違い](#if文とswitch文の違い)
[・フォールスルーに注意する](#フォールスルーに注意する)
[・フォールスルーをあえて利用するやり方。](#フォールスルーをあえて利用するやり方)
[・default](#default)
[・まとめ](#まとめ)

## switch文の基本構文
“`js
switch (式){

case 条件1:
式が条件1と一致する場合に実行する処理;
break;
case 条件2:
式が条件2と一致する場合に実行する処理;
break;
case 条件3:

元記事を表示

【Chart.js】スムーズエリアチャートを実装する

スムーズエリアチャートは、全体的なトレンドを視覚的に理解しやすくしたり、複数のデータセットを比較する際に用いられるチャートです。

今回は Nuxt3 + Chart.jsを使ってスムーズエリアチャートを実装する方法について解説します。

# スムーズエリアチャートとは？
![スクリーンショット 2024-05-20 21.29.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476743/d9c63b1e-5da7-821f-4279-6249bb2030c9.png)

こういうチャートのことです。
この１種類だけ出しているとあんまりしっくり来ないんですが、

![スクリーンショット 2024-05-20 21.32.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476743/f02d2e56-c4ce-130b-b8ce-3c4d31c182fd.png)

こんな感じで他のチャートと併用することでト

元記事を表示

Node.js の fs の代わりに Bun.file でファイル読み書きをやってみる

## はじめに
Bun で始めたプロジェクトで、これまではテキストファイルの読み書きに [fs](https://nodejs.org/api/fs.html) (File system) を使っていたのですが、せっかくなので Bun が用意している方法でファイルの読み書きをやってみます。

## 方法
`Bun.file(path)` でファイルを読み込みます。
`Bun.write(path, text)` でファイルに文字列を書き込みます。

## 環境
Bun v1.1.3

### ファイル構成 (抜粋)
“`
|–ango_sakura.txt
|–index.ts
|–node_modules
|–package.json
|–tsconfig.json
“`

“`text:ango_sakura.txt
　彼は女の顔の上の花びらをとってやろうとしました。彼の手が女の顔にとどこうとした時に、何か変ったことが起ったように思われました。すると、彼の手の下には降りつもった花びらばかりで、女の姿は掻き消えてただ幾つかの花びらになっていました。そして、その花びらを

元記事を表示

バリデーションに引っかかった後のrender画面でJSが発火しない不具合の解消

## 問題点

Railsアプリケーションにて、Turboリンクを利用してページの一部を動的に更新する際、バリデーションに引っかかった後の画面ではJavaScriptのイベントが発火しなくなる問題が発生しました。具体的には、チェックボックスの状態変更によって発火するはずのイベントが動作しないという事象です。

## 原因

Turboリンクはページの完全な再読み込みを避け、高速なページ遷移を実現しますが、これによりページ全体が新しく読み込まれるわけではないため、従来の`DOMContentLoaded` イベントを使用したJavaScriptの初期化が適切に行われません。このため、新しく追加されたDOM要素へのイベントバインドが失われることが原因です。

## 解決方法

この問題を解決するためには、Turboリンクが提供する特定のイベントに対してリスナーを設定し、これらのイベントが発生するたびにイベントリスナーを再設定する必要があります。これにより、ページの部分的な更新後もイベントリスナーが保持され、機能が維持されます。

### 具体的な実装

以下は、`turbo:load`,

元記事を表示

入れ子のモーダルはするべきではないのか？

次の課題の準備、ということでモーダルをどうしようかなといろいろ物色しているのだが、定番のBootstrap Modalってありますよね。

https://getbootstrap.jp/docs/5.0/components/modal/

そちらを調べていて驚いた。なんと、入れ子のモーダルはサポートしないというのだ。

Bootstrapは、一度に1つのモーダルウィンドウしかサポートしていません。ネスト(入れ子)になったモーダルはユーザーエクスペリエンスが低いと考えられるためサポートされていません。

ユーザーエクスペリエンスかー。まあそう言われればそういう気もするが。
うーん、ということはそういうインターフェース以外で同じ機能を実現することを考えろということか。
これまた難しい課題だが。

試しにreact-modalでやってみたところ、

https://www.npmjs.com/package/react-modal

なんとなんと、別々のモーダルであればいくつ

元記事を表示

[ReviewAI 使用例] TEJI TOKYO [新大久保 韓国料理店]

# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！
[人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc)

今回は、TEJI TOKYO の食べログに集まっているレビューを分析します。

## TEJI TOKYO

TEJI TOKYO
> 日本のエリート豚が集結!!話題の韓国料理

[食べログ](https://tabelog.com/tokyo/A1304/A130401/13019553/)

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
– [食べログ](https://tabelog.com/)
– [じゃらん](https://www.jalan.net/)
のレビューを分析で

元記事を表示

NextJSでAPIのResponseをキャメルケースで扱いたい

## 背景
多くのAPIは、レスポンスのフィールド名やリクエストのボディをsnake_caseで扱います。しかし、JavaScriptではcamelCaseが一般的なスタイルです。そのため、APIから受け取るレスポンスや、APIに送信するリクエストボディをcamelCaseに変換する関数を作成して、コードの一貫性を保ちたいと思います。

### ASIS
“`TS
const messageParams = {
parent_message_id: 1,
thread_id: 2,
sender_id: 3,
sender_type: “anonymous_user”,
text: “メッセージ本文”,
}
“`

### TOBE
“`TS
const messageParams = {
parentMessageId: 1,
threadId: 2,
senderId: 3,
senderType: “anonymous_user”,
text: “メッセージ本文”,
}
“`

## やったこと
– APIにリクエストを投げる前に

元記事を表示

【@/】Viteの`path.alias`を使っている環境でVSCodeの参照コマンド(F12)を機能させる

## 問題
`@/`パスエイリアスでviteのインポートを制御する場合は多いと思う。

ただ一つ問題があり、VSCode上で参照【F12】コマンドが使えなくなってしまう。
なんでや！

## 解決
しかし、調べてみるとさすがVSCodeというべきか、対策が用意されていた。
https://code.visualstudio.com/docs/languages/jsconfig

ネット上はWebpackを使用する場合の例が多いが、viteでもしっかりと利用できた。

“`json:jsconfig.json
{
“compilerOptions”: {
“target”: “es2017”,
“allowSyntheticDefaultImports”: false,
“baseUrl”: “./”,
“paths”: {
“@/*”: [
“src/*”
]
}
},
“exclude”: [
“node_modules”,
]
}
“`

>jsconfig.jsonはJa

元記事を表示

OTHERカテゴリの最新記事