f@ctor

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

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

プログラミング言語別のDate型操作方法

## 記事を書こうと思ったきっかけ
今回この記事を書こうと思ったのは、仕事や自己学習の中で日付（Date型）を扱う機会があったことがきっかけです。仕事では主にVB.NETを使用し、自己学習ではReactを使って開発をしていますが、ふと「日付を扱う方法は、言語によってどのように異なるのだろう？」と疑問を持ちました。そこで調べた内容を整理し、この記事としてまとめました。
今回調べた言語は以下の４つです。
– Java
– Python
– JavaScript
– VB.NET

## JavaでのDate型の扱い

Javaでは、日付操作に古くからjava.util.Dateが使用されてきました。近年ではjava.time.LocalDateやZonedDateTimeなどのモダンなAPIが推奨されています。日付のフォーマット変換にはSimpleDateFormatやDateTimeFormatterが使われ、タイムゾーンの考慮も簡単に行えます。これにより、異なる地域間での正確な時刻操作や、過去・未来の日付演算が容易になります。
“`Java:
// 必要なクラスをインポートします
i

元記事を表示

GAS(Google Apps Script)のライブラリーコードを隠蔽する

以前はGAS(Google Apps Script)のライブラリーは隠蔽されていた記憶がかすかに残っています。少なくとも、パブリックメソッドとプライベートメソッドを書き分けて、関数の公開と非公開を選択出来ていたことは覚えているので、即ち、やっぱりライブラリー全体のコードは隠蔽されていたような気がするのです。
昔のことはこの際どちらでも良いのですが、本記事の目的としてはライブラリーとして公開するライブラリー自体のコードを隠蔽し、ライブラリーの利用者や第三者から解読を不可とすることにあります。
研究記事となりますので、実際は何らかの方法で解読できてしまったという場合にも責任は負いかねますのでご参考までとして下さい。

***※余談※*** 私の人生は、半角括弧「()」を使うべきか、全角括弧「（）」を使うべきかに悩まされ翻弄される人生でした。特にPC黎明期は画面やフォントの関係から半角派でした。今も実はどちらかと言えば半角の方がしっくりくるのですが、ちょっと下にずれていたり、ちょっと潰れ過ぎていたりする印象もあり、Microsoft社が全角推しになったタイミングで、メジャープラットフォームの

元記事を表示

TypeScriptにてユニオン型の型ガードを整理したい

# 型ガードとは
* 型絞り込みのために使う論理チェックのこと

# ユニオン型とは
* ある値の取り得る型の数を、2つ以上に拡大する

“`typescript
let hoge: string | number
“`

# ユニオン型の型ガードを整理する

* 複数の型をもつユニオン型などの場合はどのように型ガードするといいのかを整理したい

## ユニオン型だと型安全ではないと言われる
* TypeScriptの型システムではユニオン型などの複数の型を取り得る場合に、
そのプロパティにアクセスするとどちらかの型がくるかわからないため型安全ではないと判断される

“`typescript
// hoge: string | number
let hoge = Math.random() > 0.5 ? ‘John’ : 40;

// 引数にstringかまたはnumberのどちらが来るかわからない
fugafuga(hoge)
“`

### 値を割り当てる
* TypeScriptは変数に値が割り当てられたら、その変数が何の型なのかを理解してくれます
* 値を割り当てて

元記事を表示

作成したログイン機能をNextjsに移す

## はじめに

以前作成した [ログインしたユーザーがTODOリストを作成できるようにする](https://qiita.com/idaten7240/items/f11db6a20985190e60fd) をNext.jsに移行します。

## next.jsとは

Next.jsは、Facebookが開発したReactベースのフレームワークです。サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を容易に実装できるよう設計されており、SEO対策やパフォーマンスの最適化にも効果的です。

## 準備
#### Node.js と npm のインストール
“`
node -v
npm -v
“`

#### リポジトリの作成

作業ディレクトリに移動します（例：workspace）
“`
cd ~/workspace
“`

#### React アプリケーションの作成
“`
npx create-react-app todo
“`

#### 開発サーバーの起動
プロジェクトディレクトリに移動し、開発サーバーを起動します。

bash
コードをコピー

元記事を表示

【Next.js】Prismaの使い方(findUnique編)

# 記事作成の背景
ORMのPrismaでデータベースから一意のレコードをfindUniqueで取得する際に、沼ってしまったので備忘録として記載します。

# 沼った原因は何だったのか？
結論は、スキーマ定義で対象となるカラムに対してUnique属性を付与していなかったことが原因でした。
今回は、emailとpasswordの2つで絞り込んで一意のレコードが取得できるようにします。

“`scema.prisma(修正前)
model Users{
id Int @id @default(autoincrement())
name String
email String
password String
created_at String
updated_at String
}

“`

↑のスキーマ定義だとエラーが生じてしまいます。
コンソールには、「IDとは、一意となるカラムを少なくとも1つは指定してね」という表示が出ます。

なので、下記のように修正します。

“`scema.prisma(修正後)
mod

元記事を表示

JavaScriptで複数の画像を表示するアニメーションを考える【中級編⑤】

# はじめに
今回は、JavaScriptを用いて画像をゆっくり表示するアニメーションを制作していきます。

# 複数の画像を表示する

See the Pen
複数の画像を表示する by Uka Suzuki (動画生成技術。「動きを捉えるアルゴリズム」

### ショートストーリー: 「時間の流れを捉えるアルゴリズム」
東京の夜、渋谷のオフィスビルに明かりが灯る。プログラマーの田中は、ディスプレイの前で一心に作業していた。彼の目の前には、彼が開発中のニューラルネットワークモデルが映し出されている。フレーム数の違いが、モデルに与える影響を検証している最中だ。

「フレーム数が増えれば、動きの連続性がもっと捉えられるはずだ…」

田中は1フレームの入力でモデルを実行する。結果は想像通り、動きは途切れ途切れで滑らかさに欠けていた。まるで連続したスナップショットが次々と映し出されるかのようだ。

「やっぱり、1フレームでは瞬間的な情報しか捉えられない…」

彼は次に、30フレームをモデルに入力した。今度は違う。連続的な動作の流れが、滑らかに画面に映し出される。物体が自然に動き、時間の経過が明確に再現されていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846020/406acd28-7901-53a3-43f3-89b

元記事を表示

JavaScriptでTODOリストを作ってみた part.3

こんにちは！gamubaruです！

今回も引き続きjsでTODOリストを作っていきます！
本日は削除機能を作成していきたいと思います！

よろしくお願いします！

１．クリックイベントをつけよう
–
削除ボタンクリックしたときに動く関数を作成してみようと思います。
その前に、各TODOにユニークな値を付けていきたいと思います。（このレベルならクリックした横の値とかでもできるけど、、練習ということで）

HTMLを生成するときに値を付与したいので、こちらの関数は分解したいと思います。

“`js
/**
* HTMLを生成する
* @param {string} tagName 生成するタグの名前
* @param {string} text 名前
* @returns {HTMLElement} 生成したタグ
*/
const createElement = (tagName,text) =>{
const elm = document.createElement(tagName)
if (text !== undefined){
elm.

元記事を表示

kintonから生成AIとAPI連携し、回答をレコードに自動保存するJavaScriptと活用案

![サムネイル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/b2fedf62-8bbe-770e-363c-0ae3405b1bed.jpeg)

# 概要

kintoneをCRM（顧客管理）やSFA（営業支援）として利用している企業にとって、
顧客対応の効率化は永遠の課題であり、伸び代でもあります。

そこでkintoneと、今話題である**生成AI**（今回は`Gemini API`を使用）を連携し、
効率化させていきたいと思います。

生成AIと連携するkintoneプラグインはすでに下記のように市販されておりますが、
内容や利用規模によっては内製のAPI連携で十分構築できると感じました。

https://kintone-sol.cybozu.co.jp/integrate/msol026.html

まずはコードを紹介し、その後に活用案の一例を紹介します。

# kintoneへのコード設定

## 事前準備①

kintoneのUI上にて、
– ボタンを配置する`スペースフ

元記事を表示

カレンダーを作るー1

お疲れ様です。

シンプルカレンダーについていろいろ調べていましたが、データが古くletではなくvarが使われていたのもあり、chatGPT先生にコードを書いてもらいました。
まずはそれを見ながら分からないことろを調べ、今自分がどこの部分のコードを書いているか理解しながらやっていきます。

というわけで進捗です↓
![スクリーンショット 2024-10-14 000952.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/02b1f9a0-8965-4893-2612-a5e4b581e7aa.png)
cssを書いてない状態なので、全部下に伸びていっちゃってますので、明日cssをあてて見た目を整えたいと思います。

今回コードを読んでいく中で、「テンプレートリテラル」のことをすっかり忘れていましたので、途中で復習をしました:writing_hand:

“で囲んで、${}の中に式などを書くことで、文字列が出来上がるというものでした。
${}を見ると、「jQueryだ！」とか思いましたが、

元記事を表示

JavaScript圧縮program集2

## Hacker Packer
[Dean Edwards’ Packer](http://dean.edwards.name/packer/)の改造版

See the Pen Hacker Packer by xezz (@xezz) on

元記事を表示

Javascriptによるアニメーション作成

## anime.jsを使用したアニメーション作成

アニメーションサイトGit共有リンク
https://github.com/ayaka0525/anime/tree/main

anime.jsをサイトで検索して、anime.min.jsのRawをクリックし名前をつけて保存。
自分の作成しているhtml,cssなどと同じ階層に入れたら使えるようになる。

https://github.com/juliangarnier/anime/blob/master/lib/anime.min.js

htmlのscript手前で読み込み
“`

“`

javascriptはhtmlのbodyに直接記述した。
先ほど読み込みをしたanimateBlocksを使用している。
“`