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

CodeWars オススメ問題 #1

# はじめに

個人的に好きなアルゴリズム学習サイト「CodeWars」の問題をシェア。

週1くらいのペースで、全10回を目指す予定。

:::note
CodeWarsはいいぞ！の紹介は[こちら](https://qiita.com/kohki_takatama/items/2ae2808b931e943262b8)

CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題

https://www.codewars.com/kata/570a6a46455d08ff8d001002/javascript

### 例
末尾の0を削除してくれ、という問題です。
“`
1450 -> 145
960000 -> 96
1050 -> 105
-1050 -> -105
“`
### 難易度
分類は 8kyu（最も簡単）ですが、個人的には 7kyu 相当です。

# オススメの回答
「評価が高い回答」の中から、学びの多い回答をピックアップしてご紹介。

::

「WebSocket is closed before the connection is established」が出たときの原因

# トラブル
– webアプリケーションを作っているときに、サーバとwebsocketで通信をできるようにしたい
– 接続しようとするとうまくできず，ブラウザの開発者ツールで次のエラーが出る

# 原因の特定方法
よくある原因としては**「ブラウザのページのロードが完了してない時にwebsocketの接続をしようとしている」**というものである．

これが原因かどうかは次の手順を踏んで確認してください．

1. ブラウザでF12キーなどを押して開発者ツールを開き，コンソールに次のようにコマンドを直打ちして実行してみてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2510180/2

関数の再帰呼び出しを入れ子で図示して理解を深める

関数の再帰呼び出しを理解するのは、なかなか難しいです。
関数が自分自身を再度呼び出すので、入れ子になっているような図を書いて理解を深めるとよいです。

# ハノイの塔の解を求める関数と再帰呼び出しの入れ子イメージ
ハノイの塔の解の求め方は、
+ なんにせよ円盤nより小さい円盤(n-1)はいったんfromからworkに退避させて、
+ 一番大きな円盤nをfromからtoに移動させ、
+ 退避させた円盤(n-1)をworkからtoに移動させる

これを円盤の大きさをどんどん小さくさせて、同じことを繰り返させて(自分自身を再帰的に呼び出す)解いていきます。

次のように入れ子の図を書いてみると理解が深まります。


“`JavaScript:ハノイの塔の解を求める
1:const _hanoi=(n, from, to, work)=>{
2: if

【JavaScript】コールバック関数を引数に取る配列のメソッドまとめ

## 学習に使った教材
以下の動画で、コールバック関数を引数に取る配列のメソッドについて勉強したので、自分の備忘録として残しておきます

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

## コールバック関数を引数に取る配列のメソッド
### forEach
– コールバック関数を、配列の各要素に対して一度ずつ実行するメソッド
– `配列名.forEach(コールバック関数);`
“`javascript:app.js
const players = [“堂安”, “久保”, “三苫”, “遠藤”, “冨安”];

players.forEach(function (player) {
console.log(`頑張れ、${player}!`);
});

// 上記コードの簡略型
players.forEach(player => console.log(`頑張れ、${player}!`));

// 出力結果
// 頑張れ、堂安!
// 頑張れ、久保!
// 頑張れ、三苫!
// 頑

javascriptのfetchでサーバの子プロセスのエラーメッセージをブラウザ（bootbox）に表示される方法

## 目的
javascriptのfetchはサーバーのコマンドが失敗しても通信が成功すればerror補足はしないので、自分でなんとかする必要があります。特に子プロセスのエラーメッセージをブラウザに伝える方法についての一考察です。cgiで通信ステータスをなんとかするとかじゃなくて単純にエラーメッセージさえ返せればいいじゃん、ってわけでトライしてみました。ここでのコードは動いたコードを抽象化したので誤記があったらすみません。本格的なエラーハンドリングではないのでしょうが簡単なのでご参考まで。

### fetch apiのエラーハンドリングについては例えば↓
https://qiita.com/IzumiSy/items/031df1df4f4541e536b4

## 処理流れと前提
– 呼び出し経路と処理流れ：ブラウザ(javascript)→通信（apache）→CGI（親プロセス）→子プロセス（エラー）→親プロセス（子プロセスエラー補足とエラーメッセージにhttpのヘッダ付加）→通信→ブラウザ
– モーダル表示はbootbox.jsを使っています（必須ではないです）。見栄えで使っ

erbからjavascriptに@userのidを渡す

## data属性を使う
erbと別ファイルのjavascriptにuserのidなどを渡したいときの書き方です。

erbファイル
“`
入力処理とセキュリティ

引き続き、[体系的に学ぶ 安全なWebアプリケーションの作り方](https://www.amazon.co.jp/%E4%BD%93%E7%B3%BB%E7%9A%84%E3%81%AB%E5%AD%A6%E3%81%B6-%E5%AE%89%E5%85%A8%E3%81%AAWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E7%AC%AC2%E7%89%88-%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%8C%E7%94%9F%E3%81%BE%E3%82%8C%E3%82%8B%E5%8E%9F%E7%90%86%E3%81%A8%E5%AF%BE%E7%AD%96%E3%81%AE%E5%AE%9F%E8%B7%B5-%E5%BE%B3%E4%B8%B8/dp/4797393165)を読んだので、覚えたい部分を記事にしていく。

## 入力処理

入力処理では、入力値に対して以下の

CSVを編集する簡易htmlツール

少し前にこんなの↓を作りました。

https://qiita.com/44dayo/items/2aef92ca9c423ee49d35

作ってから思ったのですが、「表示させて確認中にへんなところがぴょこっとあったら、ぱぱっと修正したいよなぁ～」と思いました。
というわけで、今度は編集できる簡易ツールを作ってみました。

# 1.作り方

– メモ帳で新規テキストを作成し、以下のコードを張り付けます。

Rev1

“`html

```

Vueでは、コンポーネントをtemplate, script, styleの3つのセクションに分けて定義する。
テンプレート部分でHTMLに似た構文を使用し、スクリプト部分でロジックを定義する。

```react:React
import { useState } from 'react'

const Component = () => {
const [text, setText] = useState('')
return (

{te

[javascript] オブジェクトのキーをObject.assignでソートする方法

# はじめに
JavaScriptでオブジェクトを扱う際、オブジェクトのキーを特定の順序で整理したい場合があります。例えば、オブジェクトのデータをCSVに出力する際、特定の順序でキーを並べたいことがあります。この記事では、Object.assignを使用してオブジェクトのキーをソートする方法について解説します。

次のような場面で困ったことはありませんか？

```typescript:example.ts
import fs from "fs";

const data = await fetch("www.foo.com");
// dataの中身 = { age: 18, hobby: "basketball", name: "太郎" }

const headers = Object.keys(data); // ヘッダーを取得する
const values = Object.values(data); // 値を取得する

fs.appendFileSync("example.csv", headers.join(","));
fs.appendFileSync("examp

ジュニアエンジニアがセルフコードレビューを行う際に注意したいこと


こんにちは、タビアン株式会社でエンジニアをやっている伊藤です。
2021年からタビアンに大学生エンジニアとして入社し、2年間のインターン期間を経て、2023年4月より新卒正社員として業務しています。現在はNuxt3とAWS Amplifyでアプリ開発をしています。

https://www.wantedly.com/companies/tabian/post_articles/506525z

https://www.wantedly.com/companies/tabian/post_articles/519080

長い時間をかけてコードを書いたにもかかわらず、たくさんの指摘事項をもらうとレビュアーの時間を割いていることもあり、プロジェクトの進行を遅れさせる原因にもなり得ます。読者の皆さんにもレビュアーとしてレビュイーとして類似のご経

JavaScript に関するニュース記事（JavaScript Weekly）で気になったものを見てみる：「tinykeys」「heic-to」「Embla Carousel」

普段、技術情報を見ている中で、JavaScript に関する情報源の一つに以下があります。

●JavaScript Weekly: The JavaScript Email Newsletter
　https://javascriptweekly.com/


そのサイトで定期的に出てくる情報は一通り見ているものの、その中でも個人的には下のほうに掲載されている部分がいつも気になっています。

それで、気になるものがあった時はリンク先を見てみたり、URL をメモしたりしてたのですが、その後あまり活用する方向にできてなかったので、もう少し情報を追ってみて記事に残してみるというのをやってみようと思いました。

## 今回の内容
今回、個人的に気になったところは、以下などに出ている「tinykeys」「heic-to」「Embla Carousel」の　

推力変更ノズルシュミレーション。遅い、鼻毛が伸びる様子を見ているようだ。



### マウスの位置に基づいて風向きを指定し、その影響をパーティクルに反映させることができるゲーム。

```html

Bunのクイックスタートをさわってみた

# はじめに
webエンジニアの風速です。
今回は前から聞いたことのあった、Bunを触ってみようと思います。

# Bunとは
安定版がリリースされたのは2023年の9月で、JavaScriptおよびTypeScriptアプリ用のall-in-one toolkitで、そのなかでもメインがNode.jsの代替として設計された高速JavaScriptランタイムです。他にもテストランナー、スクリプトランナー、Node.js互換パッケージマネージャーなどの機能があります。

超速そう！

# インストール
今回はmac OSを使用するので、brewでインストールします。
```
$ brew install bun

$ bun --version
1.1.26
```

# クイックスタートを試してみ

ヴァーチャルコンテンツを作るゲーム。

### GPT2で生成されたHTMLファイルを自動的にブラウザで表示するゲームです。


#### 生成テキストは英語ですが、ブラウザの翻訳機能で翻訳できます。


![スクリーンショット 2024-08-30 163700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/7aaf0be0-b2fd-16

小さなGPUでのエンジニアリング。TensorFlow.js での AIモデルゲーム。

#### ショートストーリー: テンソルの彼方に
東京の下町に住むプログラマー、田中健一は、言語モデルのAIを開発するスタートアップ企業で働くエンジニアだった。彼の仕事は、複雑なアルゴリズムとデータ処理に囲まれた毎日で、言語モデルがどのようにして知識を構築し、自然な言葉を生成するのかを深く探求していた。

ある日、健一はプロジェクトの一環として、4次元テンソルを使った新しい計算モデルの設計を任された。これまでは2次元や3次元のテンソルを扱ってきたが、4次元のテンソルは彼にとって未知の領域だった。彼はテンソルの奥深さに魅了され、挑戦する決意を固めた。

健一は、言語モデルの背後に潜む計算プロセスに思いを馳せた。単語がエンベディングされてベクトルとなり、それらのベクトルが連なって行列を形成する。さらに、その行列が複数連なり、3次元テンソルを構成する。そして、この3次元テンソル同士の掛け算を行うことで、コンテキストテンソルが得られ、その中から意味がある行列を取り出すことができる。この行列をテキストに変換すれば、言語モデルの応答が得られるのだ。健一は、このシンプルなテンソルの掛け算が言

【初心者向け】モールス信号でプログラミングをしてみる

## はじめに
皆さん、こんにちは。
普段はエンジニアチームで仕事をやらせてもらっています。

私たちは常に新しいものを学ぶことに重きをおいていますが、時には過去の技術を知り、使ってみることで新しい発見があると思うんですよね。

そこで、今回はモールス信号を使って学びを深めてみることにします。

モールス信号といったら、最近流行りの[あの曲](https://www.google.com/search?q=%E3%81%AF%E3%81%84%E3%82%88%E3%82%8D%E3%81%93%E3%82%93%E3%81%A7&sca_esv=ad1fe64d584e8890&rlz=1C1PWSB_jaJP1122JP1122&ei=GNbOZq-VGY7Y1e8P7tSM8QU&ved=0ahUKEwivgdiSmZeIAxUObPUHHW4qI14Q4dUDCBA&uact=5&oq=%E3%81%AF%E3%81%84%E3%82%88%E3%82%8D%E3%81%93%E3%82%93%E3%81%A7&gs_lp=Egxnd3Mtd2l6LXNlcnAiFeOBr-O

JavaScriptの配列マスター講座：便利なメソッドたち

こんにちは、JavaScriptを学んでいる皆さん！今回は、配列を操作する上で非常に便利なメソッドについて詳しく見ていきましょう。これらのメソッドをマスターすれば、配列の扱いが格段に楽になりますよ。

## 1. Array.isArray() - 配列かどうかを確認

まずは、与えられた値が配列かどうかを判定する`Array.isArray()`メソッドから始めましょう。

```javascript
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('こんにちは')); // false
```

このメソッドは、特に関数の引数が配列であることを確認する際に便利です。

## 2. concat() - 配列の結合

`concat()`メソッドを使うと、複数の配列を一つに結合できます。

```javascript
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);
consol

JavaScriptの配列：便利なメソッドとテクニック

こんにちは、JavaScriptを学んでいる皆さん！今回は、配列の強力な機能と便利なメソッドについて詳しく見ていきましょう。

## 1. Array(配列)の基本

配列は複数の値をまとめて扱うことができるデータ構造です。JavaScriptでは、以下のように配列を作成できます：

```javascript
let fruits = ['りんご', 'バナナ', 'オレンジ'];
```

## 2. 便利な配列メソッド

### push() と pop()

`push()`メソッドは配列の末尾に要素を追加し、`pop()`メソッドは末尾の要素を削除して返します。

```javascript
fruits.push('いちご'); // ['りんご', 'バナナ', 'オレンジ', 'いちご']
let lastFruit = fruits.pop(); // lastFruit = 'いちご'
```

### join()

`join()`メソッドは配列の要素を指定した区切り文字で連結した文字列を返します。

```javascript
console.log(fr