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

JavaScript 入力判定

ユーザーが情報を入力しなかった場合の判定処理の例
||を使うことで、userInputがfalseだった場合に表示される値を
設定できる

“`javascript
const userInput = ”;
const userName = userInput || ‘User’
“`

JavaScriptのイベント駆動について復習

# はじめに
自分は現在、大学3年生でフロントエンジニアとして、インターンをしている。
普段はTypeScript,Reactを使って開発を行っているので、今一度JavaScriptのイベントについて復習をしたい。（メモ用に書き残した）

# イベント駆動について

JavaScriptでイベントを設定する方法は2種類ある

– on~
– addEventListiner

### on〜を使うパターンについて

このパターンでは2つのイベントを同時につけることができない。
なぜなら、もし２つつけたとしても、１つ目のイベントは２つ目の方のイベントに更新されてしまうからである。

“`jsx
style {
const button = querySelector.(“button”)
button.onclick　= () =>{ alert(“clicked”)}
}

click me
“`

### addEventListener

https://developer.mozilla

javascriptのよく使う配列処理と使える小技

javascriptの配列処理って結構奥が深いですよね。
今回は、javascriptの配列処理で使えるいくつかのパターンと小技について紹介していきます。
実行内容は、jsonからデータを取得した際に使える内容となっており、今回使うjsonデータのサンプルは以下です。
このサンプルを用いて、javascriptの配列処理の説明をしていこうと思います。
“`
{
“users”: [
{
“id”: “1234”,
“name”: “taro”,
“frends”: [
{
“id”: “2222”,
“name”: “ziro”
}
]
},
{
“id”: “4444”,
“name”: “hana”,
“frends”: [
{
“id”: “6666”,
“name”: “ken”
}
]
}
]
}

「あなたのVueファイルは読みづらい」と文句を言われたくない② — コンポーネント＆ディレクトリ設計編 —

# 目次

[1. 前書き](#1-前書き)
[2. ディレクトリ構成](#2-ディレクトリ構成)
[3. 共通のデータや処理を分離して管理するディレクトリ](#3-共通のデータや処理を分離して管理するディレクトリ)
[4. 画面表示に関するディレクトリ](#4-画面表示に関するディレクトリ)
[5. 後書き](#5-後書き)

現在の記事は②になります。①はこちらのリンクからどうぞ

https://qiita.com/IJproject/items/46342f529320652a8fad

# 1. 前書き

この記事のテーマは、「Vue ファイルの可読性を可能な限り上昇させる」です。**コンポーネント設計**や**ファイル分割**の手法を通して、**エンジニアに優しいコーディング**をすることを目的としています。あくまで一意見としてなので、参考程度にお願いします。
もし、**この記事を参考にしたコーディングをして同僚に文句を言われたら、是非その旨をこの記事のコメントに記入してください。** ひとつひとつのコメントに対して涙目になりながら中身を改善していきます。

## 自己紹

Node.jsでTCP通信する簡易クライアントとサーバを作ってみた

# はじめに
JavaScriptアプリケーションで簡易的にサーバに接続して状況確認する機能を実装できるか検討する必要があり、調査したところNode.jsの`net`ライブラリを使用することで実現できそうなことが分かった。
しかし、サンプルコード等を調べてみるとクライアントとサーバ間で複数回会話するものはなかった。
そこで、試行錯誤して開発してみた。

# サンプルコード
サーバアプリケーションとクライアントアプリケーションを開発した。

### サーバアプリケーション
“`javascript:サーバアプリケーション
const net = require(‘net’);

const sever = net.createServer(socket =>{
socket.on(‘data’, data => {
console.log(data + ‘ from ‘ + socket.remoteAddress + “:” + socket.remotePort);
socket.write(‘Echo: ‘ + data);
});

Reactで電卓を作る

## やったこと
今回はReactを用いて電卓を実装しました。
完成後はこのような見た目になっています。

## 実装コード
“`App.js
import logo from ‘./logo.svg’;
import ‘./App.css’;
import { useState } from ‘react’;

function App() {
const [result, setResult] = useState(“”);
const handleCalculation = (number) => {
const newResult = result + number;
setResult(newResult);
};
const handleRe

2024-01-31 `form` の `action` と別に設定した `submit` ボタンの `formaction` を取得する

## はじめに

formで設定された `action` とは別の action(`formaction`) が設定された `submit` ボタンがある中で、クリックされた送信ボタンの `formaction` を取得したい。

“`html

これを取得したい(別の送信ボタン)
送信

フォーム外の送信ではないボタン

“`

## `activeElement` プロパティを使うと取得できる

こちらの回答では、 `activeElement` プロパティを使ってクリックされたボタンを特定してから `formaction` を取得している。
この場合 `

Array.prototype.some()を学ぶ

今回はsomeです！
早速[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)を見ていきます

> some() は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。配列は変更しません。

１つでも当てはまればtrueを返してくれます。
下記を見ると、確かに当てはまるものがあればtrueを返しています。
“`js
// 公式から引用
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even)); // true

// falseを試す
const array2 = [1, 3, 5]

【jQuery】const, let, varの違い

# constとは
`const`は定数を宣言するために使用されます。一度値が代入されると、その値は変更できません。また、再代入ができないため、定数としての値が変更されないことを保証します。
# letとは
`let`は変数を宣言するために使用されます。再代入が可能です。変数のスコープが宣言されたブロック内に制限されます。これにより、グローバルスコープでの変数の汚染を防ぎます。
# varとは
`var`は古いバージョンのJavaScriptで変数を宣言するために使用されますが、ES6以降では let と const が推奨されています。ブロックスコープを持たず、関数スコープであるため、ブロック内で宣言されても関数の先頭に巻き上げられます。
# それぞれの違い
| 　 | const | let | var |
|:———–|:————:|:————:|:————:|
| 再宣言 | 不可能 | 不可能 | 可能
| 再

仮想通貨取引所に預けてる資産データを一括で全取得する

# 趣旨
botを作っていると取引所に預けてある自分の資産のデータが必要になることが多いので、全データを一括で取得するためのコードを準備しました。

先物と現物の資産額を取得するためのコードです。先物の部分はまだ用意している段階です。

# コード
fetchSpotBalance関数とfetchFuturesBalance関数に分けてコードを書いて、それらの関数を両方ともcheckAllBalances関数に入れています。
こうすることで1つの取引所のリストを代入して引数とするだけですべての現物資産と先物口座の資産が一挙に表示されるようになります。

“`javascript checkBalances.js
const ccxt = require(‘ccxt’);
const { apiKeys } = require(‘./configLoader’);

async function fetchSpotBalance(exchangeId) {
const exchangeClass = ccxt[exchangeId];
const credentials

Javascriptの短絡評価

## Javascriptの短絡評価とは
論理演算において、結果が確定した時点で評価を中断し、その値を返ものを短絡評価と言います。
本来、if文や三項演算子を使って記述できる処理ではあるものの、短絡評価で記述することによりシンプルに記述することができます。
## 基本的な書き方
“`javascript
// && を使った短絡評価
const condition = true;
condition && myFunction(); // conditionがtrueの場合にmyFunction関数を実行する
let variable = condition && “check OK!!”; // conditionがtrueの場合にvariableに値を格納する

// ||を使った短絡評価
let isValid = false;
isValid || myFunction(); // idValidがfalseの場合、myFunctionを実行する
“`
## 具体的な使い方
“`javascript
// 1冊1600円の本を複数購入した時の金額を計算する
const

p5.js でカラーモードが RGB の時に色指定で HSB（HSBA）を使う：ランダムな値の指定でテンプレートリテラルを利用して行う

## はじめに
p5.js で、カラーモードを HSB に変更しないで RGB のままにしつつ、色指定には HSB（HSBA）を使えないかな、と思って試してみた内容です。

例えば、p5.js の　RGB のカラーモードで色をランダムにする時は、以下の書き方をすることがあります。

“`javascript
fill(random(255), random(255), random(255));
“`

シンプルなプログラムで用いた例は、例えば以下のような感じです。

“`javascript
function setup() {
createCanvas(400, 400);
background(220);
noStroke();

fill(random(255), 100, 200);
circle(200, 200, 100);
}
“`

また、明度や彩度を一定にしつつ色相を変えたい場合は、例えば `colorMode(HSB, 360, 100, 100)` として、以下の書き方を使う方法などがあります。

“`javascript
fill

【JavaScript】let宣言は for ループに特化される

# はじめに
次の記事を読んで、JavaScriptのfor文における`let`宣言のループ変数が各ループごとに異なる変数としてバインディングされる動作に違和感を覚えました。

https://qiita.com/twrcd1227/items/e7541a196d6bc1422dac

以下では、違和感を覚えた理由と、調査を進めた結果たどり着いた結論について書いています。

# 結論
結論から言うと、JavaScriptの言語仕様において、`let`はforループに特化されるので、ループ本体のスコープ内でループ変数の作成・値のコピーがされることがわかりました。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for#初期化ブロックの字句の宣言

> 初期化ブロックの字句の宣言
>
> 初期化ブロックのスコープ効果は、宣言がループ本体の中で行われ、condition部分とafterthought部分でアクセス可能であるかのように理解できます。より正確には、`let`宣言はforループに

【Vue3 / Composition API】親コンポーネントから子コンポーネントのメソッドを実行・データを参照

## 課題
– 親コンポーネントから子コンポーネントのメソッドを実行したい
– 親コンポーネントから子コンポーネントのデータを参照したい

## 解決策
1. 子コンポーネント側で、`defineExpose`を使用して外部から参照可能なプロパティの定義をする
2. 親コンポーネント側で、子コンポーネントにアクセスができる`ref`を使用する
3. 親コンポーネント側で、(2) で定義した`ref`を通して、(1)で定義した参照可能なプロパティにアクセス、実行する

“`vuejs:子コンポーネント