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

JavaScript のデバウンス、完全に理解した

JavaScript の世には **デバウンス(debounce)** と **スロットル(throttle)** という便利な手法があることを最近知りました。

「これを知らずに今まで開発していたなんて…あの時のロジックもっと簡単に書けたやん」と今悶えています。

残念ながら弊社エンジニアは誰も知らない可能性が高いので、メモして共有するため記事にしました。とりあえずデバウンスから。スロットルは別で。

# デバウンス (debounce)

同じイベントが連続して発火するような状況で、発火した回数分処理を実行すると負荷が高くなってしまう場合に、途中のイベント処理は実行せず、最後のイベント発火から指定した秒数待った後に処理を実行する手法。

例えばサイトでフォームの値を入力後にイベントを発火させたいが、ユーザーが連続して入力する場合は入力完了を待ちたいという場合に使えますね。

## 雑なサンプルコード

‘test-debounce’ という id を持つボタンがあり、最後にクリックしてから1秒後に ‘Click Event Called’ という文字列と現在日時とコンソールに出力す

GWTにおけるフロント側の処理はどうなのか？

# 割と知らないGWTのフロント側処理
・JavaからjavaScriptに変換されます。
・サイズを縮小します＝ダウンロード時間の短縮
・難読化→セキュリティー向上

【Node.js】LambdaからDynamoDBのデータを取得する方法

## はじめに
Lambdaを使用してDynamoDBのデータを取得する方法について紹介します:point_up_tone1:
データ取得までの流れは 画面 → API Gateway → Lambda → DynamoDB となっていますが、画面からLambdaを呼び出すところまでは割愛します。

## ソースコード
userIdを条件にして、データを取得するという例を紹介します。

“`javascript
const { DynamoDBClient } = require(‘@aws-sdk/client-dynamodb’);
const { QueryCommand, DynamoDBDocumentClient } = require(‘@aws-sdk/lib-dynamodb’);

const client = new DynamoDBClient({});
const docClient = DynamoDBDocumentClient.from(client);

exports.handler = async(event) => {
// Cloud

【JavaScript】オブジェクトのキーと値を繰り返し処理する方法

以下のように記述するとオブジェクトのキーと値を繰り返し処理できます。

“`js
Object.entries(object).forEach(([key, value]) => {
console.log(key, value)
})
“`

Discord.jsで愛くるしいペンギンBotを作ってみた

# はじめに
Discord.jsを使って、
言葉に反応して返信してくれる簡単なBotを作ってみました。

# 本編
## Discord.jsとは
DiscordでBotを作れるAPIがあり、それを使用するためのライブラリ

現在のバージョン：14.14.1

https://discord.js.org/

## こんな感じ
「何か言って」のフレーズに返信してくれます。


## 事前準備

Node.jsをインストール

https://qiita.com/hisashi_matsui/items/5b7c381a14d28b91dfc5

## DiscordのAPI登録からBot作成まで
以下の記事などを参考に、
[こちら](https://discord.com/developers/applications)の画面からBot

p5play の 2つのスプライトのグループ間で「Collisions and Overlaps」の仕組みを扱う

以下の記事にも書いた、p5.js のライブラリ「p5play」の話です。

●p5.js のライブラリ「p5play」について基本的な情報をピックアップして記載してみる – Qiita
　https://qiita.com/youtoy/items/5233d40dc24f214c6cf3

今回は、以下の試作に使った内容について書いていきます。

上記の内容は、「2つのグループ化された矩形」があり、「矩形のグループはマウスカーソルの

今からでも遅くないconsoleを使いこなそう

# はじめに
この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。

:::note
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=453b5e6ee933765211ec)まで。
:::

https://www.recruit.nuco.co.jp/?qiita_item_id=453b5e6ee933765211ec

# consoleについて
consoleオブジェクトを用いることで変数

今さら森博嗣「笑わない数学者」のビリヤードの問題を解く５～未解決問題に挑む

# 0. はじめに

前回の記事で一般化したビリヤードの問題のボールの個数最大（世界最高記録）を目指したが，よくよく考えてみると計算が容易な点（ボールの個数が１＋素数であるとき）のみを計算しており，計算が困難な点（ボールの個数が１＋素数のべき乗であるとき）をスキップしていた。

https://qiita.com/TETSURO1999/items/eefbec683a26cc221a57

まるで五合目や八合目を飛び越えて頂上にワープしたようなもので，これでは世界最高峰に登山したとは言えないのではないか？

残念ながら，参考文献のサイトにはボールの個数が１＋素数のべき乗の場合については詳しく書かれていないようだ。本記事は参考文献のサイトのヒントを手掛かりに，手探りでコーディングしていたら，なんとなく１＋素数のべき乗の場合でも上手く出来てしまったというものである。

# 1. アルゴリズム解説

素数 $p$，自然数 $m$ に対して，ボールの個数 $n = 1 + p^m$ とする。素数のべき乗数（指数）$m$ に応じて $3m$ 次ボナッチ数列 $s_i$ を作る。初項 $s_i$

短縮リンク作成サービスを開発した話 – フロントエンド編01

## 概要
2023年末頃に、短縮リンク作成サービスを開発・リリースしました。
開発したサービスは以下のものになります。
[https://nlia.jp](N-LIA)
開発するにあたってのお話などは、前回の記事を参照してください。
[短縮リンク作成サービスを開発した話](https://zenn.dev/yatsumi823/articles/github-zenn-shorten-link-story-yatsumi)

この記事では、実際のコードも交えながら、どのような仕組みで動いているのかを解説します。

## 使用している技術
使用している技術は、以下の通りです。
– Next.js V14(Reactのフレームワーク)
– Pages Router(App Routerではないやつ)
– Next PWA(PWA対応)
– axios(バックエンドのサーバーとAPI通信するために使用)
– Chakra UI(UIのライブラリ)
– React Hook Form(フォームのバリデーションなど)

### Next.JS
Next.jsは、開発時点で最新バージョンの14を

async関数が返す値はPromiseになるんじゃないの…？

# はじめに
どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生です！今回はjavascriptでの非同期処理の書き方をちゃんと理解していなかったのでまとめます。

# 問題
以下のようなコードがあったとします。

※処理の内容としては非同期処理と関係なさそうなものですが、あくまでも書き方のサンプルコードなのでご了承ください。
“`javascript
//userはオブジェクトとします
const getName = async (user) => {
return user.name;
}

const checkName = (user) => {
const name = await getName(user);
}
“`

ここで次の疑問が浮いてきました。
> async関数ってPromiseオブジェクトを返すはずなのになんで変数(name)に格納できてるの？？

# 結論
> **awaitをつけるとPromiseの中身が返却される**

元記事を表示

【Mapbox】自宅を表示してみた

# 前提
* Mapboxのアカウント作成
https://docs.mapbox.com/

* クレジットの登録が必要

* API keyの取得しておく

# ドキュメント通りにhtmlを作成

https://docs.mapbox.com/mapbox-gl-js/example/globe-spin/
こちらの例をそのまま使う。
**※YOUR_MAPBOX_ACCESS_TOKENの部分は、自分のAPIトークンに置き換える必要あり**

“`html





# フリマアプリで販売手数料や販売利益を表示させたい（JavaScript）

# はじめに
プログラミング初心者です。
現在フリマアプリを作成中、終盤です。
今回アプリが完成し最終チェックをしていたところ、エラーが一つ飛び出てきたので記録します。

# JavaScriptで販売手数料や販売利益を表示させたい
今回のエラーとして、商品を出品する際に金額を入力すると販売手数料と販売利益が自動で出力される機能を実装したが、なんらかのエラーで保存がされなかった場合に前述の二つの項目が出力されなくなってしまうというものでした。
端的にコードを貼り付けて記録しちゃいます。
#### Before
“`js
window.addEventListener(‘turbo:load’, () => {

const priceInput = document.getElementById(“item-price”);
priceInput.addEventListener(“input”, () => {
const inputValue = priceInput.value;

const addTaxDom = Math.floor(inputVa

元記事を表示

ReactのuseState、useReducerの違いを理解する

## はじめに
Reactの状態管理のためのフックとして、`useState`と`useReducer`の2つがあります。
2つの違いがいまいちピンときておらず、なんとなく`useState`を使えばいいのかな、と思っていました。
なんとなくの理解から確実に自分の知識とするために、それぞれの詳細を確認し、その違いを理解していきます。

## useState
### 基本の形
“`react
const [state, setState] = useState(init);
“`
#### 引数
`init`:
stateに設定したい初期値。どんな型の値でもよい。関数も可。

#### 戻り値
戻り値は配列で渡されるため、受け取る際は分割代入で受け取るのが一般的。
また、その際の変数名は何でもよいが、状態`xxxx`に対して、関数は`setXxxx`とするのが一般的らしい。

`state`:
現在の状態。一番初めは`init`で設定した値が入る。
`init`に関数を設定した場合は、その関数の戻り値が入る。

`setState`:
新しい状態を設定するための関数。
通常、引数に

元記事を表示

Vite + Vueでビルドしたが真っ白

## 概要
この記事では、Vite + Vueでビルドしたのに、index.htmlを見るとページが真っ白の場合の解決策の一つをご紹介します。

## 問題

`npm run build`でビルドして、index.htmlを「Go　Live」などで確認してみると、中身が真っ白になっていた。

## 解決策

コンソールログなどで確認してみると、jsやcssなどが見つからないというようなエラーが出ている可能性が大きい。その場合、jsなどのリソースのディレクトリを正しく参照できていないのが原因である。

その場合、ディレクトリの場所をviteに明示してあげる必要がある。私の場合はビルド先を`docs`ディレクトリにしていたので、それに準じた設定をする。
Go Lineなど、ローカルで確認したい場合は、`vite.config.ts`以下の設定を追記する。
“`ts
export default defineConfig({
base: ‘/docs’,
plugins: [
vue(),
],
// …その他記述
build: {
outDir:

元記事を表示

160行で作るシンプルプログラミング言語

## 概要

シンプルかつ基本機能を備えたプログラミング言語を作ってみたい。

https://htsnul.github.io/seqalt/

で触ることができる。

https://github.com/htsnul/seqalt/blob/main/seqalt.js

がメイン実装。

Hello Worldは、

“`
@print(“Hello World!”);
“`

となる。

簡単な計算は、

“`
@print((5 + 6) – (1 + 2) + (3 * 4));
“`

出力：

“`
20
“`

とできる。

フィボナッチの計算は、

“`
“fib” = ((“val”) => {
(val < 2) ? { val } : { (@fib(val - 1)) + (@fib(val - 2)) } }); @print(@fib(7)); @print(@fib(8)); @print(@fib(9)); @print(@fib(10)); ``` 出力： ``` 13 21 34 55 ```

元記事を表示

手続き型から関数型への書き換え 言語別ガイド

# はじめに

この記事では、手続き型プログラミングと関数型プログラミングの違いを明らかにし、複数の言語を通じて、同じ問題を解決するための両アプローチを示します。

# 手続き型と関数型の基本的な違い

手続き型プログラミングと関数型プログラミングは、コードの書き方とプログラムの設計において根本的に異なるアプローチを取ります。これら二つのスタイルの基本的な違いを理解することは、プログラミングの柔軟性を高め、より効果的なコードを書く上で重要です。

## 手続き型プログラミング

手続き型プログラミングは、命令の列としてプログラムを考えます。このアプローチでは、データ構造を操作するために一連の手続き（関数やサブルーチン）を作成し、プログラムの状態を変更するためにこれらの手続きを実行します。手続き型プログラミングの特徴は、プログラムがどのように実行されるか（アルゴリズムと手順）に焦点を当てている点にあります。C 言語や Java（オブジェクト指向の側面を除く）などが、このパラダイムの典型的な例です。

## 関数型プログラミング

関数型プログラミングは、計算を数学的関数の評価として扱い、

元記事を表示

GWT は日本語の文字も、サーバクライアント通信も簡単

# GWTは、いちいち日本語を通信する際の文字処理もそのままでできますよ

元記事を表示

【Vue.js】inputタグで選択した画像を表示する

こんな感じで選択した画像が表示されます。

[Vue Playground](https://play.vuejs.org/) で試してみてください。


“`vue