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

【JavaScript】Ruby以外のフレームワークについて気になったのでVue.jsについて調べてみた

どうもこんにちは。

今回は、RailsではなくVue.jsについて調べてみました。言語は違いますが、同じフレームワークのRailsと自分の感覚を比較してみようと思います。合わせて環境構築もしてみたので、参考になればと…

以下のサイトを参考にしています。

https://www.webstaff.jp/guide/trend/webit/vuejs/

# Vue.jsってなに？

JavaScriptフレームワークの一つです。

> ユーザーから見えている部分をシンプルかつ高速に処理することができるフレームワークです。画面描画に対する新しい考え方とデータ管理の仕組みが、それを実現しています。また、チーム開発において作業の分担がしやすくなる形式のファイルを扱えるなど、開発を効率化できるのも特徴です。

HTMLやJSのコーディングが苦手な人には向いているかも？と思いました。自分の場合、バックエンドよりもフロントエンドのコーディングが苦手なので、Vue.jsを使ってフロントの勉強をするのも一つの手なのかなと思いました。

## 仮想DOM

> Vue.jsには仮想DOMという概

【JavaScript】スプレッド構文、レスト構文、分割代入まとめ

## 学習に使用した教材
以下の動画でJavaScriptのスプレッド構文、レスト構文、分割代入について勉強したので、備忘録として残しておきます

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

## スプレッド構文
配列やオブジェクトの要素を展開できる構文
### 複数の配列を1つの配列にまとめる
“`javascript:app.js
const backend = [“Ruby”, “PHP”, “Python”];
const frontend = [“HTML”, “CSS”, “JavaScript”];

const languages = […backend, …frontend, “Java”, “TypeScript”];

console.log(languages);

// 出力結果
// [‘Ruby’, ‘PHP’, ‘Python’, ‘HTML’, ‘CSS’, ‘JavaScript’, ‘Java’, ‘TypeScript’]
“`
### 複数

【CSS×JS】泣くおじさんで学ぶWebアニメーション入門

## 1. はじめに

– **記事の概要**
– この記事では、CSSとHTMLを使用して「泣いてるおじさん」のアニメーションを作成する方法を学びます
– **記事で学べること**
– CSSを使った簡単なアニメーションの作成方法
– JavaScriptを使ったアニメーションの制御

## 2. 主要な機能と構文

### 2.1 HTMLの作成

– HTMLを使って「泣いてるおじさん」の基本的な構造を作成します
– 主に`

`タグや``タグを使用して、顔や涙のパーツを表現します
– `

`タグを使って顔の輪郭を作り、目や口をそれぞれの``タグで表現します
– HTML構造が複雑にならないように、シンプルかつ分かりやすいコードにしました

### 2.2 CSSアニメーションの作成

– CSSの`@keyframes`ルールを使用して、涙が流れるアニメーションを定義します
– CSSトランジションで目の開閉や口の動きを制御します
– `@keyframes`を使って、涙の位置を上下に動かすア

JavaScript: spread vs apply

spread構文とapply関数の速度比較をしてみます。

“`js
for(let loop=1e7,size=10,n=4,fn=a=>a;n–;loop/=10,size*=10){
let A=Array(size).fill(1),t=new Date;
for(let a=loop;a–;)fn.apply(0,A);
t=new Date-t;
let u=new Date;
for(let a=loop;a–;)fn(…A);
console.log(“loop:”,loop,”size:”,size,”time:”,t,new Date-u)
}
“`
“`plaintext:結果
[Google Chrome 128.0.6613.113]
loop: 10000000 size: 10 time: 820 545
loop: 1000000 size: 100 time: 263 222
loop: 100000 size: 1000 time: 184 174
loop: 10000 size: 10000 time: 175 170

バンドルってなんだっけとなったので調べました

## はじめに
自分が今参画しているプロジェクト内でES buildが当たり前のように使用されていました。
これって何だろうかと調べるとバンドルツールの一種とのこと。
バンドルって何なんだっけ…!?となったので調べてまとめました。

## バンドルとは
複数のファイルやモジュールを1つのファイルにまとめるプロセスのこと。
主にJavaScriptやCSSのようなWeb開発において使われる概念。
他の言語や環境でも使用されることがある。

## バンドルされたコードってどんなの？
以下が実際にesbuildでバンドルされたコードの一部です。
どんな処理が書かれているのか全然わからないですね。

“`javascript
“use strict”;var p6=Object.create;var vl=Object.defineProperty;var
m6=Object.getOwnPropertyDescriptor;var f6=Object.getOwnPropertyNames;var
h6=Object.getPrototypeOf,v6=Object.prototyp

小さなGPTでのエンジニアリング。僕だけのGPTを作るというゲーム。

##### 前回のあらすじ。

https://qiita.com/tetsutakamurata76/items/e3ad0d3ce53a1d35734c

### タイトル: 「僕だけのGPT」
東京の夜が深まり、街は静寂に包まれていた。雑踏の音が遠くに消え、オフィスビルの一室で一人のプログラマ、ケンイチ・タナカがパソコンの前に座っていた。彼の目の前には、コードが無限に続くスクリーンが広がっている。彼の手は、キーを叩くたびに、次第に夢中になっていった。

ケンイチは、最近のプロジェクトに取り組んでいた。彼が取り組んでいるのは、GPT（Generative Pre-trained Transformer）という言語モデルの小型版の開発だった。彼の目標は、一般的なGPTモデルをより軽量化し、個人的なニーズに合わせてカスタマイズすることだった。自分だけのGPTを作り上げることが、彼にとっては最高の挑戦であり、楽しみでもあった。

「このモデルは僕の考えを形にするツールなんだ。」ケンイチは呟いた。彼の思考は、数式とアルゴリズムの間を行き来していた。GPTモデルは、膨大な量のテキストデータを

高度なデータセキュリティを実現するハイブリッド暗号化

:::note info
間違ってる情報等あれば、コメントにお願いします。
この投稿は、zennに投稿したものと同じものです
:::

# ハイブリッド暗号化とは

AES暗号（共通鍵暗号方式）と RSA暗号（公開鍵暗号方式）の両方を組み合わせて使用する暗号化手法です。

### AES暗号化（Advanced Encryption Standard）

同じ鍵(共通鍵)を使ってデータの暗号化と復号を行う。

– **メリット**
この方法は、暗号化と復号が高速であるため、大量のデータを効率的に処理するのに適している。

– **デメリット**
鍵の共有に関するセキュリティリスクが伴う。
(鍵が漏洩すると、暗号化されたデータも容易に解読されてしまう。)

### RSA暗号化（Rivest-Shamir-Adleman）

公開鍵暗号方式では、2つの鍵（公開鍵と秘密鍵）を使用する。
公開鍵は、公開可能で暗号化のみ可能。一方、秘密鍵はその所有者のみが保持し、暗号化・復号化の両方が可能。

– **メリット**
AES暗号と違い、秘密鍵無しでは解読できないと言われている (いつかは破られる

Cloudflare Turnstileの導入 と CAPTCHA回避対策

:::note
Cloudflare Turnstileの導入は既にできてて、「2captcha」などのCAPTCHA回避サービスで回避されるのを対策する方法だけを知りたいって人は、[こちら](#captcha回避対策)
この投稿は、zennに投稿したものと同じものです
:::

# Cloudflare Turnstileとは
簡単に説明するなら

Cloudflareが提供するCAPTCHA代替ツールで、reCAPTCHAなどのCAPTCHAとは異なり、ユーザーが画像を選択したり文字を入力したりする必要がない代わりに、ユーザーの行動や環境情報を基にリスク評価を行い、人間かボットかを判断する。

# 導入

Cloudflare Turnstileを導入するための基本的な手順は以下の通りです。今回は、Next.jsを使用した例で解説します。

## Cloudflareアカウント作成

1. [サインイン – Cloudflare](https://dash.cloudflare.com/sign-up) で作成してください

2. 「Let’s make your website

firefoxでニコニコ動画が再生できないので、javascriptでどうにかする

以下のコードをニコニコの動画ページが読み込まれたら自動的に実行されるようにします。
スペースか、プレイヤーをクリックで再生できるようになります。

“`js
(function () {
‘use strict’;

// 動画を再生（もしくは停止）させる処理
function toggleVideoPlay() {
const video = document.getElementsByTagName(‘video’)[0];
video.paused ? video.play() : video.pause();
}

// キーボードイベント（Spaceキー待ち）を仕込む
document.addEventListener(‘keydown’, (event) => {
if (event.code === ‘Space’) {
toggleVideoPlay();
}
});

// DOMを取得できるように待ってから、クリッ

Chakra UI の Reset CSS の影響範囲を限定する

## Chakra UI の Reset CSS

[Chakra UI](https://v2.chakra-ui.com/) を使う際、プロジェクト全体を以下のように `ChakraProvider` で囲む必要があります。

“`jsx
import { ChakraProvider } from ‘@chakra-ui/react’;
import MyChakraApp from ‘./MyChakraApp’;

export default function ProjectRoot() {
return (



);
}
“`

この `ChakraProvier` は、ブラウザのデフォルトCSSを打ち消す機能（Reset CSS）を持ちます。Chakra UI のセットアップの一環として Reset CSS を適用することで、どの環境でも同じUIを提供する目的と思われます。Chakra UI を使う場合、ページ全体にChakra UI

Laravel × Vue でチュートリアル with PokeAPI（ポケモン）

# はじめに
本記事では、Laravel 11 と Vue 3 を組み合わせたアプリケーションを作成します。
初心者向けのチュートリアルとして参考になれば嬉しいです。

また、本記事では Vue 3 の記法として Options API を用いて記述しております。
Options API は Vue 2 の記法と同じであり、少し手順を変更すれば Vue 2 を用いたチュートリアルとしても活用できると考えたためです。

# 完成イメージ
ポケモンのデータを取得できる無料のAPI「PokeAPI」を用いて、ポケモンを一覧表示しています。また、お気に入り登録／解除機能を作成して、気になるポケモンに目印を付けることが可能です。

# 事前準備
– Docker が使用できる状態であること

# 用いる技術
– PHP 8.

生成AI の力を借りつつ超シンプルな「PlayCanvas」での Hello World と関連情報の調査

## はじめに
2024/8/31 にオンラインで開催された以下の合同イベントに参加して、そこで PlayCanvas をコードベースでサクッと試してみたくてやってみた、という内容です。

●Babylon.js × PlayCanvas コミュニティ合同LT会 – connpass
　https://babylonjs.connpass.com/event/325499/

前に少しだけ PlayCanvas を試したことがあり、その時、エディタでなくライブラリを読みこんで試すやり方だった感じがするのですが、その方法でやってみます。

それと、コードの作成には ChatGPT（GPT-4o）と、Claude 3.5 Sonnet を使ってみようと思います。さらに、生成されたコードをベースにして、関連する情報を見ていったりなどしようと思います。

### 余談： エディタの共同編集機能
上記の合同イベント後の懇親会で、エディタの共同編集を試すというに加わったのですが、これも楽しかったです。

https://x.com/youtoy/status/1829767580879348059

PythonとJavaScriptのsort関数における複数の項目を並び替える記述の違いについて

### PythonとJavaScriptのsort関数の違いについて

PythonとJavaScriptには、それぞれ独自の方法でリストや辞書をソートする機能があります。この記事では、特に多次元リストや辞書をソートする方法について、PythonとJavaScriptの実装を比較してみましょう。

#### Pythonのソート

Pythonでは、`sorted`関数を使用してリストや辞書をソートすることができます。`sorted`関数は新しいリストを返し、元のリストは変更されません。

##### 多次元リストのソート

例えば、以下のような多次元リストをソートする場合を考えます。

“`python
data = [[‘きゅうり’, 2, 4], [‘いちご’, 2, 6], [‘にんじん’, 2, 1], [‘とうふ’, 1, 0]];
“`

このリストを第2要素と第3要素でソートするには、`sorted`関数と`lambda`関数を使用します。

“`python
sorted_data = sorted(data, key=lambda x: (x[1], x[

オブジェクトの配列を扱った練習問題 5選 in Typescript (Javascriptでも可)

# はじめに
みなさん、こんにちは **torihazi**です

雨がすごくて飛びそうです。

今日は最近実務で扱うことの多くなったオブジェクトの配列について

もっと触っていかないとダメだなと思ったので、練習問題作ってみてやってみました

10個だと多すぎるし、3個だと少なすぎるかなと思ったので

間をとって5個にしました

5個くらいならやってもいいかなってなったので。

解答お待ちしてます。

元の配列を変えないことやできるだけ汎用的になるように頑張ってください

あと実務1ヶ月目なので、そこは察してください。

# 実行環境
docker 使ってます。 調べたら山のように出てくると思うので、各自にお任せします。

# 1問
“`
type Student = {
id: number;
name: string;
grades: number[];
};

const students: Student[] = [
{ id: 1, name: “田中”, grades: [85, 90, 78] },
{ id: 2, name: “鈴木”, grad

動くWebデザインアイデア帳のコードを試してみた

# サマリ
動くWebデザインアイデア帳のコードを試してみました。

# 背景
自分でHTMLやCSSを書いてWebページ作りたいと思って早数年、、
気になっていた[動くWebデザインアイデア帳](https://coco-factory.jp/ugokuweb/)さんのコードを
ついに使わせていただくことにしました。

# ゴール
サンプルコードをローカル環境にコピーし、ブラウザで動作することを確認する。

# 対象読者
– かっこいいWebページを作りたいけど実装方法がわからない人
– とにかくできたという経験を積みたい人

# 前提
必須：ブラウザ、テキストエディタ
推奨：基本的なHTML,CSS,Javascriptの知識
# 環境
– ホストOS：Window10 Home
– ブラウザ：Google Chromeバージョン: 127.0.6533.120（Official Build） （64 ビット）
# そもそも

https://coco-factory.jp/ugokuweb/

そもそも動くWebデザインアイデア帳とは、
> 「動くWebデザインアイデア帳」は、デ

【JavaScript】スプレッド構文について

# 背景
JavaScript復習中に学んだことをアウトプット。
今回はスプレッド構文について。
## スプレッド構文とは…
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax “スプレッド構文 – JavaScript | MDN”)を見ると、以下のように説明されています。
> 配列式や文字列などの反復可能オブジェクトを、0個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

内容を完全に理解しようとすると少し難しいですが、ポイントとしては「展開する」というところになります。

実際に動作確認してみた方が分かりやすいと思うので、今回は以下の3パターンでスプレッド構文を活用してみます。
## 関数呼び出し
例えば、`Math.min()`で5つの値の最小値を求めようと

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