f@ctor

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

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

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

元記事を表示

StripeのSubscription Schedule APIを活用した期間限定オファーの実装方法

SaaSビジネスにおいて、新規顧客の獲得や既存顧客の定着は重要な課題です。新規ユーザーを獲得するために、割引や特別オファーをいかに効果的に顧客に提供するかが課題となります。

本記事では、Stripe のSubscription Schedule APIを使って、新規顧客獲得キャンペーン、既存顧客のアップグレード促進、イベントに合わせた期間限定オファーの3つのユースケースを通じて効果的なプロモーションを実現する方法を説明します。

## ユースケース1: 新規顧客獲得キャンペーンの実装

新規顧客に対して、最初の3ヶ月間サービス料金を50%割り引くキャンペーンを考えてみましょう。Stripeでは、APIやダッシュボードを使ってさまざまな割引クーポンを簡単に作成できます。

![スクリーンショット 2024-03-27 16.31.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/939ef2de-dce6-faab-aa19-00c8e5b60feb.png)

“`js
//

元記事を表示

ChatGPT と始める React ：ステート管理と例外処理編

### **user**:

ChatGPT先生、[前回、先生に次のコードを教えてもらいました。](https://qiita.com/maskot1977/items/c5d1c93609c111f1c43a)

“`javascript
import React, { useState } from ‘react’;

function App() {
const [newMessage, setNewMessage] = useState(”);
const [messages, setMessages] = useState([]);

const handleSendMessage = () => {
if (!newMessage) return;

setMessages([…messages, newMessage]);
setNewMessage(”);
}

return (