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

データの受け渡し練習のためECサイト作ってみた

## 記事の概要
エンジニア未経験からの挑戦ということで企業様へアピールするためのポートフォリオを作成してみました。
作成手順と機能、工夫したところ、課題点を書き出してみようと思います。

### プロフィール
20代後半　男性
ITは全くの未経験(前職は営業)
就労移行支援にて０からプログラミングを学ぶ。
**作成期間は1ヶ月くらい**

## 目的
* JavascriptとPHPを使いつつDBとの連携も行えるよう経験を積む
* 今の自分のレベル感を企業に見ていただく
* 素のJs、PHPでどこまで書けるかチャレンジ

# スペック
**言語**
Javascript (Vanilla Js)
PHP 8.0.19

**DBMS**
MySQL Ver 8.0.29

**開発環境**
Windows 11 Pro
IIS　(Version 10.0.22621.2860)

## 完成画面
(圧縮上手くできませんでした。。。)
![ECサイト.gif](https://qiita-image-store.s3.ap-north

関数が呼び出された箇所のディレクトリを取得する方法

– next.jsといったwebページのパスとディレクトリが対応しているフレームワークで、ディレクトリ名を変えると他の箇所も記述を変える必要があるといったことに対応したい

# コード
以下を貼り付けて実行すると、この関数が実行されたファイルのディレクトリパスが表示される
“`typescript
// denoならこれ↓を記述
// import * as path from “node:path”;
// import * as fs from “node:fs”;
import * as path from “path”;
import * as fs from “fs”;
/*
* find Directory when you call this function
*/
export const findCurrentDirectory = (): string | undefined => {
const err = new Error();
const stack = err.stack?.split(“\n”) || [];

// 呼び出し元のスタッ

Node.jsとはなにか？なぜみんな使っているのか？

[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)
という記事をAIで動画にしてみました。

プロトタイプチェーンのプロパティを探しにいく順番

## アジェンダ
大雑把なプロトタイプチェーンのプロパティを探しにいく順番について簡潔にまとめます。

## プロパティを探しにいく順番

1. **オブジェクト自身のプロパティ**:
まず、オブジェクト自身が持っているプロパティが参照されます。もしそのプロパティが存在する場合は、その値が返されます。

2. **オブジェクトのプロトタイプ (`__proto__`)**:
2オブジェクト自身に該当するプロパティがない場合、そのオブジェクトのプロトタイプオブジェクトが参照されます。このプロトタイプオブジェクトもまたオブジェクトであり、同じ手順でプロパティが探されます。

3. **プロトタイプチェーンの遡り**:
プロトタイプオブジェクトにも該当するプロパティがない場合、そのプロトタイプオブジェクトのプロトタイプ（つまり、プロトタイプのプロトタイプ）が参照されます。これが繰り返され、チェーンを辿っていきます。

4. **最上位の `Object.prototype`**:
最終的に、すべてのオブジェクトは `Object.prototype` に辿り着きます。`Object.pro

paizaキャンペーン問題 Bランク 長テーブルのうなぎ屋【JavaScript】

[paiza×Qiita記事投稿キャンペーン](https://qiita.com/official-events/9ab96aa95d62fe3cbdd7) の [長テーブルのうなぎ屋](https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table) をJavaScriptで。

大まかな処理は以下の通り。

* ①全座席の空席状況 及び ②座りたい客の並び を2進数で扱う
* ①に対して②をビットANDで確認、入り込む余地があれば①に②をビットORして更新
* 立っているビット数を返して終了

例として座席数6とした場合、**席の状態**を`0b000000`とします。
(実際は桁数確保は不要)

まず4人のグループが入店、2番目の席から座ろうとした場合、`1`を`4`ビット左シフトして`0b10000`、そこから`-1`して`0b1111`、2番目の席から確保したいので`2-1`ビット左シフトして`((1 << 4) - 1) << (2 - 1)` で `0b11110`を**確保したい席**とします。 **

衝突の美学。異なる質量を持つボールが3D空間内で衝突し、反発する様子をシミュレートするゲーム。



### 異なる質量を持つボールが3D空間内で衝突し、反発する様子をシミュレートするゲーム。

衝突の際に、異なる質量のボールが様々な方向から衝突する場合の精密な反発シミュレーションを行うために、運動量保存の法則とエネルギー保存の法則に基づく計算を行っています。

コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが

TensorFlow.jsを使って、内蔵GPUにアクセスしてサクセス。

#### タイトル: “少年プログラマーとN100CPUの挑戦”

ある日、小学3年生の男の子、光太郎はコンピュータの前で真剣な表情をしていました。

光太郎の使っているコンピュータは、インテルの最新N100CPUを搭載したものでした。このN100CPUには、内臓GPUという機能がついています。お父さんが「これで十分だよ」と言って買ってくれたものでしたが、光太郎は最近、もっと速く計算できるコンピュータが欲しいと思うようになりました。

学校の友達たちは、最新のゲーミングPCを持っている子もいて、彼らの話を聞くたびに、光太郎は少し羨ましく思いました。でも、光太郎のお小遣いは毎月少しだけで、そんな高いコンピュータを買うお金はありませんでした。

「どうにかして、このコンピュータで高速に計算を行う方法はないかな？」

光太郎は、コンピュータの内蔵GPUを使って計算速度を上げる方法を模索していました。せっかくGPUが付いているのに、その機能を有効に活用する手段がわからず、困っていたのです。光太郎は、様々なプログラムを試みるものの、GPUの性能を引き出すことができずにいました。

そんなある日

楽しいお絵描きゲーム。2Dで描いた線が3D空間で立体的にアニメーションします。

### 楽しいお絵描きゲーム。




### 「立体的にする」ボタンを押すと、2Dで描いた線が3D空間で、描いた線の色で立体的に表示されます。立体がぐるぐると回転アニメーションします。

コードをメモ帳など

【js】throwについて考える

# 例えばこんなコード
“`javascript
throw new Error();
“`
実行すると例外が出る。
使い道としては、エラーを返す代わりに例外を投げたい時に使う。

“`javascript
function hoge(arg) {
if(arg <= 10) { console.log(arg); } else { throw new Error('１０を超えてますよ'); } } hoge(11) ``` ```console:出力 Uncaught Error: １０を超えてますよ ``` # エラーを拾う 例外の内容が「１０を超えてますよ」エラーの場合のみ実行したい処理があったとする。 その場合は多分こうなる。 ```javascript try{ hoge(11); } catch(e) { if(e.message === '１０を超えてますよ'){ console.log('１０オーバーエラーを取得しました。') } } ``` ```console:出

Cloudflare Workersを利用した、いいねボタンを作成する: 導入

筆者は、Astroベースで作成した静的サイトをCloudflare Pagesで運営しています。
今回そこに置いてある記事に「いいねボタン」を設置しようと思い立ちました。

今回の記事では、要件と実装方法の検討まで記載します。
実装詳細については、別記事の予定です。

# 要件

なんとなく思いついた要件は以下の通りです。

– いいねボタンを押すとデータベースに「いいね」された記事識別番号と「いいね」された日時の記録が残る
– いいねボタンにはこれまで「いいね」された回数が表示される
– ボタンに表示された回数はリアルタイムで変更される
– いいねボタンの連打は5回までで、それ以上は押せなくなる
– 連打回数制限は一定時間経過後に解除される

この要件を検討してみます。

# 検討

#### いいねボタンを押すとデータベースに「いいね」された記事識別番号と「いいね」された日時の記録が残る

静的サイトのため、データベースに対する処理はJavaScriptからです。

ただのJavaScriptからデータベースにアクセスすることはできないような気がするので、データベースへアクセスす

paizaキャンペーン問題Bランク 長テーブルのうなぎ屋

# 概要
https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table

こちらの問題をJavaScriptで解きました。

# 方針
最後に座る人が席数をオーバーするとき・しないときの場合分けをなるべくすっきり書きたい
* 空席確認と座席の更新は配列のループではなく`slice`と`fill`メソッドを使って一度に処理する
* オーバーする場合は ①座り始め～席数 ②最初の席～座り終わり の2つの処理が必要
* オーバーしない場合は座り終わりの席番号`end`を0にして（`slice(0,0)`）、毎回①②両方の処理を通すことにする

# 回答
“`javascript
// 標準入力からの値取得省略

const [n, m] = lines[0].split(‘ ‘).map((num) => Number(num));
let cnt = 0;

// 座席を生成
const seats = ne

Vue.js と Spring Boot を連携基本

# 1. Spring Boot で REST API を構築する
まずはバックエンド側の Spring Boot で、簡単な REST API を作成します。このAPIは、ユーザーのリストを返すエンドポイントを提供します。

### Spring Boot の準備
Spring Initializr を使って、新しい Spring Boot プロジェクトを作成します。Web依存関係を追加しておきましょう。

コントローラーの作成
次に、UserController というコントローラーを作成し、ユーザー情報を返すエンドポイントを定義します。

“`java
@RestController
@RequestMapping(“/api”)
public class UserController {

@GetMapping(“/users”)
public List getUsers() {
// ユーザーリストを返す
return List.of(new User(1, “Alice”), new User(2, “Bob”

【JavaScript】配列から重複する値自体を削除する方法

JavaScriptで、配列から重複する値を削除する方法として、`new Set()`を用いた方法がありますが、そうではなく、配列から重複する値自体を削除する方法をご紹介します。

日本語がややこしいため、例を出します。

“`shell
appleとlemonがそれぞれ重複するため、値を削除する
[‘apple’, ‘orange’, ‘apple’, ‘grape’, ‘peach’, ‘lemon’, ‘lemon’]
↓
[‘orange’, ‘grape’, ‘peach’]
“`

## コード

２つ方法をご紹介します。どちらの方法でも、配列から重複する値自体を削除できます。

### パターン1

重複する値を抽出した後、ユニークな値を抽出する

“`javascript
const fruits = [‘apple’, ‘orange’, ‘apple’, ‘grape’, ‘peach’, ‘lemon’, ‘lemon’];

// 重複する値を抽出
const duplicatedFruits = fruits.filter(
(fruit, inde

Three.jsに入門

とりあえず、このサイトを見て勉強。

https://ics.media/tutorial-three/quickstart/

> まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。

と言うので、とりあえず、下記コードを貼り付けて実行.

“`html:html