f@ctor

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

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

HTMXを試してみた

# はじめに
近年注目を集めたHTMXに興味を持って、ついに試す時間が出来ましたので、
その経験や感想を共有させていただきます。

# [HTMX](https://htmx.org/)とは？
HTMXの目的はJSを最低限にして、高度なUXを作ることです。
それはどういう実現できるのを見てみましょう。

# 前提
[Pug](https://pugjs.org/api/getting-started.html)と[Express](https://www.npmjs.com/package/express)を使っていますが、どんなサーバー、バックエンドやテンプレートエンジンを使っても問題ありません。

今回作るTwitterみたいなメッセージ投稿ページです。

[リポジトリ](https://github.com/mguennecSaison/htmx-twitter-clone)

# 実装
## レイアウトを定義
““pug
doctype html
html(lang=”en”)
head
title Twitter clone in htmx
link(

元記事を表示

React.jsで構築されたサイトをBookmarkletで操作する

# 序
React.jsで構築されたサイトをBookmarkletで操作するための何か

## なに？
DOM操作でINPUTエレメントなどに値を入力/変更してもReact側には伝えられないためReactから無視されます。
これを無理やりReact側に伝えるためにごにょごにょする奴です。

# 方法

## input=”text”
ごにょごにょした上でchangeイベントを強制発火します。

“`javascript
// React.jsのデータをイベントを発火することで無理やり書き換える
function setValueToInput(value, element) {
const lastValue = element.value;
element.value = value;
const event = new Event(‘change’, { bubbles: true });
const tracker = element._valueTracker;
if(tracker) {
tracker.setValue(lastValue);
}
el

元記事を表示

簡単なTODOアプリケーション

# 初めに

HTML、CSS、JavaScript で作る簡単な TODO アプリケーションです。

の動画を見て学習していた時に書いていたので、まんまそのままっぽいです。
（怒らないでね。@_@♪）

# ひとまずコード

“`html:index.html





TODO

TODO

元記事を表示

Node.jsでAzure OpenAI Embeddings APIを利用してみる

OpenAIの埋め込み(Embeddings)をJavaScriptから使ってみます。

https://platform.openai.com/docs/guides/embeddings/what-are-embeddings

## OpenAI Embeddings API

文章をベクトル変換してくれるAPIです。

クラメソさんの記事がイメージがつかみやすいです。

https://dev.classmethod.jp/articles/search-with-openai-embeddings/

## 準備とインストール、環境など

“`bash
$ npm init -y
“`

– Node.js v21
– @azure/openai: v1.0.0-beta.10
– openai: v4.24.7

### Azure AI Studioでモデルを作る

GPTなどではなく、`text-embedding-ada-002`を選択します。

> ![スクリーンショット 2024-01-17 3.14.40.png](https://qiita-ima

元記事を表示

Node.jsでAzure Open AIのライブラリ(@azure/openai)を使ってAzure Open AIを使うメモ2

[先月書いた記事](https://qiita.com/n0bisuke/items/703943870d5a04fc2205)のAzure OpenAIのJavaScript SDKの仕様が変わったのかそのまま動かない状態になっていたので更新版です。

SDKのアップデートが激しくてちょっと見逃すとメソッドが消えてるとかあるのかもしれません。

## client.listChatCompletions()が動作しなくなっている?

ちょっと定かではないですがclient.listChatCompletions()のメソッドが[ドキュメントページ](https://learn.microsoft.com/ja-jp/javascript/api/%40azure/openai/openaiclient?view=azure-node-preview)に記載がなく`getChatCompletions()`になったように見えました。

## getChatCompletions利用版

Node.jsでと言いつつBunで実行しています。

### 環境

– 実行環境: Bun

元記事を表示

【React】検索ボックス実装時のパフォーマンス改善案①

検索ボックスを実装したら画面が重たくなった…
という経験はないでしょうか。

考えられる原因はいくつかあると思いますが、基本的に**onChange**が悪さをしていることが多いです。

## 原因：テキストが入力されるたびにonChangeで重たい処理が実行されてしまっている

処理が重くなりがちな例
“`example.js
const filteringName = (inputValue) => {
// 高負荷な処理
someHeavyProcessing();

if (inputValue) {
const filteredNames = nameListData.filter((name) =>
name.toLowerCase().includes(inputValue.toLowerCase())
);
setNameList(filteredNames);
} else {
setNameList(nameListData);
}
};

…

<

元記事を表示

[TypeScript]typeof型とkeyof型についてのまとめ

# typeof型とは
typeof型は、変数やオブジェクトの型を取得する機能です。
変数やオブジェクトの実際の値ではなく、その型情報を取得する際に使います。

### 例①
“`ts
// type ofについて
const obj = {
foo: 123,
bar: “hi”,
};
type L = typeof obj;
const obj2 = {
foo: 234,
bar: “”,
};
“`
このコードでは、「typeof obj」とすることで、「obj」オブジェクトの型を取得し、「type L」に適用させています。

### 例②
“`ts
const n: unknown = “”;
 
if (typeof n === “string”) {
n.toUpperCase;
}
“`

### 例③
“`ts
function isObject(value) {
return value !== null && typeof value === “object”;
}
“`

# keyof型とは
keyof型は、オブ

元記事を表示

App Checkを使って特定のアプリケーションのみCloud Firestoreへのアクセスを許可する

# はじめに
タイトル通りですが、この記事は`Cloud Firestore`で特定のアプリケーションのみアクセスを許可する方法について書いています。設定方法はiOS、Android、Webとプラットフォームごとに違いますが、ここではWebについてのみ説明しています。
また、サンプルコードでは`Vue.js`、`Javascript`を使用しています。

# 前提
* Firebaseプロジェクトを作成済み
* FirebaseにWebアプリを作成済み
* Cloud Firestoreを構築済み

# App Checkとは
> App Check は、未承認のクライアントがバックエンド リソースにアクセスするのを防ぐことで、API リソースを不正使用から保護します。Firebase サービス、Google Cloud サービス、およびお客様の API を連携して、リソースを安全に保ちます。

上記は公式ドキュメントから引用文です。
`App Check`は指定したクライアントのみ`Firebase`のリソースにアクセスできるように設定するためのサービスになります。

https

元記事を表示

【JavaScript】連想配列の重複排除

## はじめに
JavaScriptの連想配列を加工してみようと思い、いろいろ試してみました。

そこで連想配列か配列か、どちらを使えば効率的に課題をクリアできるか考えたので、その過程をまとめます。

## 環境
Node.js（v20.11.0）

## 問題
* 次のような連想配列がある

“`javascript
[
{ key: ‘A’, date: ‘2023/05/01’, regiDate: ‘2023/04/25’ },
{ key: ‘B’, date: ‘2023/05/02’, regiDate: ‘2023/04/26’ },
{ key: ‘C’, date: ‘2023/05/03’, regiDate: ‘2023/04/27’ },
{ key: ‘A’, date: ‘2023/05/04’, regiDate: ‘2023/04/28’ },
{ key: ‘D’, date: ‘2023/05/05’, regiDate: ‘2023/04/29’ },
{ key: ‘B’, date: ‘2023/05/02’, re

元記事を表示

Django REST frameworkのserializersを使った外部キーモデルの参照

## 概要

Django REST frameworkの `serializers` ライブラリを使い、dict型で取得されたdjango-adminのデータをJSONに変換した状態でフロントエンドに連携する仕組みを実装したのですが、外部キーを使ったモデル設計の場合はもう一工夫必要であることがわかったため記載します。

### 実装機能

– [Django REST framework(DRF)](https://www.django-rest-framework.org/)の導入
– 外部キーを用いたモデルの設計、実装

| 項番 | 記事 |
| :— | :— |
| 1 | [React + Django + CORSを使ったフロントエンド / バックエンドのデータ連携](https://qiita.com/xinome/items/8319a7f85424bd6e62de) |
| 2 | [Django 管理画面のカスタマイズ](https://qiita.com/xinome/items/f883ce4565cd9c56ad17) |
| 3 | [Dja

元記事を表示

Slackでの発言を強制させたいbot

# はじめに
慶應大学 理工学部 情報工学科 B3のぽこちゃんです

今回は自分が運営に携わっている
データサイエンス系学生団体
**DataCampus**にて利用している
**2週間、情報共有チャンネルに投稿がなかったら
本人と管理者に通知を送るbot**
👇

![スクリーンショット 2024-01-16 14.04.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1436034/fc9d55b1-5b86-bfc5-bc94-168f38b358b3.png)

の実装を紹介します

2週間の部分は変えられるので
1日発言が無かったでも1時間動きがなかったでもなんでもできます
基礎機能ではありますが応用性は高いので是非是非

Xもやってるのでぜひフォローお願いします
フォロバします!

# Slack bot
そもそもこのSlack botはGASという

元記事を表示

JS 追加ボタンを押した時のデータ操作の考え方

目次

  • 書く目的
  • 勉強したコード
  • コードの登場人物一覧
  • 学んだ考え方
  • 配列のデータを操作してるコード
  • データを管理するときの考え方
  • 理解に苦労したコード

書く目的

配列に入っているデータを、JSが操作するときの考え方を理解するのに苦労した。考え方を理解できたとき、忘れないようメモに残しておきたいため作成。

勉強したコード

“`index.js