f@ctor

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

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

Node.jsとMessaging APIでプッシュメッセージを送ろう

## はじめに
[前回](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee)に引き続き、MessagingAPIの練習です。
今回はボット側から任意のタイミングでメッセージを送ることができるプッシュメッセージに挑戦します。

Node.jsとMessaging API、そしてボットのサーバーとしてRenderを使用します。
構築手順については[前回](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee)の記事を参考にしてください。

また、本記事は以下のソースコードをベースにし、以降で紹介する処理を追加していくことで実装を進めます。

ソースコードを確認する

“`javascript:app.js
// モジュールのインポート
const https = require(“https”);
const express = require(“express”);
const fs = require(“fs”);

/

元記事を表示

【個人開発】webアプリを作成しました【Rails,Javascript,MySQL,GitHub Actions,AWS EC2】

# アプケーション名
Quick Clean Restroom Map

# アプリケーション概要
最寄りの綺麗なトイレの位置をリアルタイムで案内し、トイレの情報を提供します。

# URL
https://cleanrestrooms.net

# 備考
EC2インタンスは通常時停止です。

# アプリケーションを作成した背景
外出先で最寄りの綺麗なトイレを探すのが困難なことがあります。Google Mapsでは公共のトイレは多く表示されますが、綺麗なトイレをすぐに見つけることは難しいです。同様の問題を抱えている方が多いと思い、ユーザー同士で綺麗なトイレの情報を共有できるアプリケーションを開発することにしました。

# アプリの画像
![トップ画面](https://i.gyazo.com/3e037bbd56ac2b56cfcd9005adc9072b.jpg)
![個別施設情報](https://i.gyazo.com/9a9f268fc201a86e010502b5d4a88d66.jpg)
![ルート検索](https://i.gyazo.com/7054e19512b2bb

元記事を表示

Codewarsで欲を満たす

# はじめに

RUNTEQの中間試験が楽しく、久しぶりにCodewarsをやりたくなったのでやっていきます。

どの言語でやろうかな・・・
JSはホームグラウンド。楽しくできるはず。
Rubyはちょうどやったところ。もういっちょやるのはあり。
Haskellも中間試験やりながらよぎったんだよな・・・きれいな再帰を書きたい・・・

# やってみた問題（JS）

今回はJS 6kyuの問題を解きました。

https://www.codewars.com/kata/56a5d994ac971f1ac500003e/train/javascript

> You are given an array(list) `strarr` of strings and an integer `k`. Your task is to return the **first** longest string consisting of k **consecutive** strings taken in the array.
>
> #### Examples:
>
> “`
> strarr =

元記事を表示

ブックマークレットでさくっと再配布を簡単にする方法

## ブックマークレットでサクッとWEBページを自動で動かしたい時ありますよね？

例えば、ChatGPTを社内展開したけど毎回独自のプロンプトのテンプレート配布するのつらいなーって時ないですか？

あったとします。

（あとGPTs使えばいいじゃん、とか他サービス使えば・・とかまぁ方法はありますが今回はブックマークレットに絞ってお話しします）

そんな時にブックマークレットって形でChromeのブックマークに以下のJavaScriptを登録すれば動くわけです

## Chromeで使えるぽちー通せばJSが実行できるブックマークレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653035/3719ffb2-4546-7608-c482-16412c0d0e6a.png)

### ブックマークレットの中身のJS
（わからない単語を入力するとプロンプトにしてChatJPTの入力欄に入力して実行までを教えてくれる）
“`js
javascript:(function()

元記事を表示

【JavaScript】日付・時間の取得方法

~~~JavaScript:
let now = new Date();
console.log(now);//→Sat Mar 23 2024 15:34:09 GMT+0900 (日本標準時)
~~~

## getFullYear()
~~~JavaScript:
let now = new Date();
let y = now.getFullYear();
console.log(y); //→2024
~~~
getFullYear() メソッドは、指定された日時の年を返します。

## getMonth()
~~~JavaScript:
let now = new Date();
let m = now.getMonth() + 1; //※0を起点とする為
console.log(m); //→３
~~~
getMonth() メソッドは、指定された日付の「月」を表す 0 を基点とした値（すなわち 0 が年の最初の月を示す）を返します。

## getDate();
~~~JavaScript:
let now = new Date();
let d = now.g

元記事を表示

【JavaScript】map()メソッドについて学習してみた

## 配列に使用できる

戻り値が配列になる
配列に使用できる

“`js
const data = [1, 2, 3, 4];
const result = data.map((num) => {
return num + 1;
});

console.log(result);
“`
結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3673845/436ae09c-06c5-ac07-8913-db3ae7509bbb.png)

## オブジェクトには直接使用できない

戻り値が配列になる
オブジェクトには直接使用できない

“`js
const data = { id: 1, age: 2, num: 3 };
const result = data.map((num) => {
return num + 1;
});

console.log(result);
“`
結果
![image.png](https://qiita-image-store.s3.

元記事を表示

ブラウザで行う球状黒鉛鋳鉄品の黒鉛球状化率の測定

# はじめに
前回の記事で作成したプログラム

https://qiita.com/_Moony/items/276db838b77e45cf5435

ISO法とJIS法のプログラムが別々になっており、また、複数の画像ファイルに対応しておらず、加えてhtmlとjavascriptのファイルが分かれていたため、使いにくいものでした。そこで今回は、複数の画像ファイルを読み込み、ISO法とJIS法の球状化率を同時に求めるプログラムを作成しました。

# 使い方
以下のサイト

https://github.com/repositoryfiles/New-Nodularity-WebApp

で緑色の「Code」でDownload ZIPをクリックしてZIPファイルをダウンロードします。ダウンロードしたZIPファイルから「nodularity_web_app.html」を取り出して（解凍して）、GoogleやEdgeなどのブラウザで読み込みます。

1. Opencv.jsの読み込み中の状態です。通信環境やパソコンの処理速度により、多少待つ場合があります。
![image.png](http

元記事を表示

JavaScriptを使ってアイコンをドラッグ&ドロップで変更する

# はじめに
**NextとかNuxtとか使えばいいじゃない。**

という話ではありますが、残念ながらHTMLとJavaScriptで作成されたサービスへの利用のため、JavaScriptで頑張って作りました。

※使用する際は自己責任でお願いします

# 作ったもの

### アイコンをドラッグ&ドロップで変更する

１．アイコンを用意

![スクリーンショット 2024-03-22 12.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877917/96a176be-e427-3320-630c-097864841086.png)

２．アイコンをドラッグ

![スクリーンショット 2024-03-22 12.14.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877917/27a9aa70-4ad4-6cb2-eed0-28226b981f73.png)

３．アイコンをドロップ

![スクリー

元記事を表示

【toio】toio.jsをブラウザで動かすまでの手順について

# はじめに
toio.jsをブラウザで動かしたいと思った時に、参考記事通りに実行してみたのですが、Webpackのバージョンが４から５にバージョンアップしたことで、モジュールのインストールやwebpackの追加設定が必要でした。
その手順をまとめます。

初心者のため、不要な箇所があるかもしれませんが、参考程度に見ていただければ幸いです。

# 動作環境
Windows11
Node.js：v20.11.0
npm：10.2.4
yarn：1.22.21
webpack：5.90.3

# 前準備

## 手順１　package.json作成
作業環境のディレクトリで作成します。
今回は“`C:\Users\ユーザー名\project“`に作成しました。
“`package.json作成
yarn init -y
“`

## 手順２　@toio/scannerを追加
toio.jsのパッケージをインストールします。
“`@toio/scanner
yarn add @toio/scanner
“`

## 手順３　webpackインストール
webpackに関するツ

元記事を表示

Disocrd.js 主要権限名

# Discord.js v14のメンバーの主要権限名
d.jsで、メンバーが所持している権限の確認するなどの際に使用する権限名を書いていきますが、すべての権限を書いているわけではありません。

:::note warn
Disocrd.js v14で動作します。その他のバージョンでは動作はしない可能性があります。
:::
##
### サーバーでの権限
– ADMINISTRATOR: サーバー全権限（管理者）
– KICK_MEMBERS: メンバーのキック権限
– BAN_MEMBERS: メンバーのBAN権限
– CREATE_INSTANT_INVITE: 招待リンクの作成権限

### テキストチャンネルでの権限
– VIEW_CHANNEL: チャンネルの閲覧権限
– SEND_MESSAGES: メッセージの送信権限
– MANAGE_MESSAGES: メッセージの管理権限
– MENTION_EVERYONE: everyoneメンションの送信権限

### ボイスチャンネルでの権限
– CONNECT: ボイスチャンネルへの接続権限
– SPEAK: ボイスチャ

元記事を表示

超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】

## はじめに
みなさんはChromeのか拡張機能を使っていますか？
僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。

今回は、普段の業務の効率を上げるのも兼ねて自作してみました!

## 最低限準備するもの
– manifestファイル
– Javascriptファイル

ぶっちゃけ、これだけで動きます。

## 実際に作ってみよう
それでは実際に作成していきましょう。
今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。

まずは、manifestファイルから設定していきます!

## manifestファイル
https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja

を参考にして、備忘録も兼ねて説明していきます。
今回は、最低限の設定を行います。

“`manifest.json
{
“manifest_version”: 3,
“name”: “Create markdown link”,
“version”: “1.0.

元記事を表示

publicにあるJavaScriptの変数をTypeScriptで型定義して読む in React + Vite

# これはなに？なにがうれしい？

`public`配下にあるJavaScriptの設定ファイルをReactで読む必要があった。
この記事ではグローバルオブジェクト`window`を使用した方法をメインに紹介する。
この方法は、提供されたJSファイルなどを型定義して読み込みたい場合に使用できる。

# 試したけどダメだった方法

– `public`に定義した変数を`src`内の`.d.ts`でアンビエント宣言(declare)
– `public`に定義した変数と同名の変数をアンビエント宣言したからといって読み込めるわけではない

# 参考記事

https://zenn.dev/qnighy/articles/9c4ce0f1b68350

https://qiita.com/crml1206/items/1ffe928339950c4938a4

# コード

ES Modulesの`import/export`を使用した方法も併せて記載している。
ただし、この方法では`src`から`src`の外を`import`することになるため推奨できない。

##

元記事を表示

ChatGPT と始める React ：Tic Tac Toe ゲームのUI編

### **user**:

ChatGPT先生、Reactを使って Tic Tac Toe ゲーム をする GUI を作れますか？

—

### **assistant**:

わかったわ、授業だと考えて。でも、あなたに頼まれなくても私はそれを教えるつもりだったのよ。簡単に説明すると、Reactを用いてTic Tac ToeのゲームのGUIを作るためには、以下のステップに従うと良いわ。

1. **新しいReactプロジェクトの作成**: Create-React-Appを使って新しいReactプロジェクトを作成します。

2. **コンポーネントの作成**: ゲームボード（Boardコンポーネント）、各セル（Squareコンポーネント）、そしてゲーム全体の状態を管理するゲームコンポーネント（Gameコンポーネント）を作成します。

3. **状態管理**: 各コンポーネントの状態を管理します。Gameコンポーネントの状態には、現在のゲーム履歴、現在のステップ番号、次のプレイヤーがXかOのどちらか、といった情報を保持します。

4. **イベントハンドラ**: ‘onCli

元記事を表示

JavaScript 第12回 ウィンドウをドラッグ＆ドロップの改善・注意事項（リメイク版）

# はじめに
今回は、第11回の記事のリメイク版です。
アドバイスをいただきましたので、それをマージした記事です。
ところどころ記載を修正させていただきましたが、一番最後の「ポインターが`body`の範囲外に出た場合」が追加箇所です。

第9回、10回と作成したウィンドウをドラッグ＆ドロップのソースについて、もう少し改善の余地があり、また、注意することもあるなと思いましたので、まとめます。
なお、第10回のソースをベースとしますので、第9回、第10回を見ていることを前提として記載します。

# 今回実施する内容
– HTMLのbodyの範囲の確認
– `pointermove`が該当要素の外へ出た場合の対応
![drag時の課題対応.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/81b11645-9d17-1f43-739c-e4f4f6132b29.gif)

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_12_drag_poin

元記事を表示

HTML: DOM取得のなまくら術

対応できるかどうかはBrowser次第。いつの間にやら非推奨になってしまったり、廃れていったりする可能性もあります

関数

なまくら術

document.getElementById,
document.querySelector

id属性値を直指し

document.getElementsByTagName(“*”),
document.querySelectorAll(“*”)

document.all

document.getElementsByTagName(“form”)

document.forms

document.querySelectorAll(“a[href]”)

document.links

document.querySelectorAll(“a[name]”)

document.anchors

document.getElementsByTagName(“html”)[0]

docu

YouTubeみたいな動画を作成できるhtml,css,Javascriptの紹介(途中経過1)参考

まずは、途中の動画。(Xより)

![スクリーンショット 2024-03-28 153428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/eecb01ac-3909-1c3c-4494-ca959f191149.png)
これを使う。
![スクリーンショット 2024-03-28 153505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/82cf023c-bf2e-97eb-1671-bd3c6cb2abe4.png)
![スクリーンショット 2024-03-28 153546.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/12568b52-7898-dcfb-4ee6-

JavaScript 「今月の最終日」を取得するコード

## 概要

JavaScriptにて今月の最終日を取得する方法を簡単にまとめる。

## 方法

下記のように記載する。

“`js
const today = new Date();
const todayYear = today.getFullYear();
const todayMonth = today.getMonth() + 1; // getMonthは1月の場合０を、2月の場合1を返すため+1している。
const lastDay = 0; // 月末日は日付を0にsっていすることで取得できる。

var endOfMonthDate = new Date(todayYear, todayMonth, lastDay);

console.log(endOfMonthDate);
“`

【JavaScript】同期処理と非同期処理 part1

## はじめに
JSにおける同期処理と非同期処理の違いについて知らなかったので、理解を図るべくメモを残したいと思います。

この記事では、まだあまり深いところにはまだ立ち入らないと思います。

コードなどは以下のサイトからお借りしています。

https://jsprimer.net/basic/async/

## 同期処理（sync）とは？
* （おそらく）初心者が最初に学ぶコードの書き方
* コードを順番に処理していき、一つの処理が終了するまで次の処理は始まらない
* つまり実行している処理は一つだけ

## 非同期処理（async）とは？
* コードは順番に処理して行くが、一つの非同期処理が終わるのを待たずに次の処理を評価する
* つまり同時に実行している処理が複数ある

## なぜ非同期処理が必要なのか？
* 同期処理だと問題になる場面がある
* 例えば以下のように同期的にブロックする処理がある場合

>次のコードのblockTime関数は指定したtimeoutミリ秒だけ無限ループを実行し、同期的にブロックする処理です。 timeoutミリ秒経過したかの判定には、無限ループの

Hexabase JavaScript SDKで日報アプリを作る（その2：日報の登録と閲覧）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、JavaScript SDKの開発が進められています。

今回はこのJavaScript SDKを使って、日報アプリを作成する方法を紹介します。前回は画面の紹介と仕様について解説しましたので、今回はHexabaseの認証、データストアの操作について解説します。

## Hexabaseの構造

Hexabaseでは、最上位にワークスペースがあります。その中に複数のプロジェクトがあり、さらにプロジェクトは複数のデータストアを持ちます。データストアはテーブルのようなもので、データを保存するための場所です。

今回は以下のような名前を付けています。

– ワークスペース：`demo`
– プロジェクト：`DailyReport`
– データストア：`Report`

### データストアのスキーマ

Prismaでリレーションされたレコードの有無を条件にデータ抽出したい場合の解決策

## Prismaとは
Prismaとは型安全なデータアクセスを提供するTypeScriptベースのORMです。
https://www.prisma.io/

## やりたかったこと
以下のER図ようなテーブル構成があり、**「タグAが紐づいている」**、または **「全く紐づけがない」** アイテムを抽出する必要がありました。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/9165e0f0-8ee1-09c0-153b-1976591735df.png)

**「タグID Aが紐づいている」** という条件はsomeを使用することで実現できます。
“`js
where: {
{
tagsOnItems: {
some: {
tagId: ‘A’
}
}
},
}
“`

しかし **「全く紐づけがない」** という条件が問題でした。
Pr

OTHERカテゴリの最新記事