[JavaScript][L3] ボタン押下によりコンテンツ(div>ul>li)を別コンテンツ(div>ul>li)に移動する

# 実施条件
[[JavaScript][L2] ボタン押下により中コンテンツ(ul)内の小コンテンツ(li)を削除する](https://qiita.com/Jochun/items/c79fa73fb224d52897c0)を理解していること

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# ソースコード外観

## HTML
~~~html:index.html

追加

【JavaScript】文字列から基本多言語面(BMP)以外の文字（UTF-8で4バイトになる文字）を配列で返す

“`typescript
// 基本多言語面(BMP)以外の文字を配列で返す
export const extractUnicode4ByteChars = (v: string) => {
const regex = /[\u{10000}-\u{10FFFF}]/gu // BMP範囲以外
return v.match(regex) || []
}

const text = ‘ﾒッせ-z1𩸽✋☀️🥺’
console.log(extractUnicode4ByteChars(text))
// ‘𩸽🥺’
“`

[JavaScript][L2] ボタン押下によりコンテンツ(div>ul>li)を削除する

# 実施条件
[[JavaScript][L1] テキストボックスのコンテンツ(div)から別のコンテンツ(div)に転記する](https://qiita.com/Jochun/items/632babb3bd0e3710920b)を理解していること

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# ソースコード外観

## HTML
~~~html:index.html

追加

ilasmでstack machine その45

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
ilasmをrom化せよ。
数９を四個使って、１から１５まで求めよ。

# 写真


# サンプルコード

“`

var out = document.getElementById(“out”);
var src = document.getElementById(“src”);

function hexs(val) {
var v = val.charCodeAt(0);
var w = v.toString(16);
w = “0000” + w;
code = w.substring(w.length – 2, w.length);
return code
}
function hex(val) {
var

cursorでwebサイト作成をしてみた

cursorのダウンロード

↓以下のリンクからダウンロードできます。

https://www.cursor.com/

AIは無料で3週間ほど使えたと思います。

cursorの使い方

cursorはVisiual Studio Codeとほとんど同じで、AIを使って簡単にコーディングをするかしないかの差だと思います。

cursorのAIは赤い矢印がさしているボタンをを押すことで、右にチャットとして表れます。


webサイトの作成

私は、以

テキストアニメーションできるライブラリ「textillate.js」の使い方・カスタマイズ

## はじめに

textillate.jsは、テキストに簡単にアニメーション効果を追加できるjQueryプラグインです。文字単位でのフェードインやスライドインなど、様々なアニメーション効果を実現できます。この記事では、textillate.jsの基本的な使い方からカスタマイズ方法まで詳しく解説します。

## 導入方法

textillate.jsを使用するには、以下のライブラリを読み込む必要があります：

“`html






“`

javascript

学習備忘録
自力で作ると理解度UP

“`aa.js
let maximum = parseInt(prompt(‘始めに0以外の数字を入力せよ’));
while (isNaN(maximum) || maximum <= 0) { maximum = parseInt(prompt('有効な数字を入力せよ')); } const targetNum = Math.floor(Math.random() * maximum) +1; let answerNum = prompt('答えの数字を決めました。予想して0以外の数字を入力せよ'); let count = 1; while (parseInt(answerNum) !== targetNum) { if (answerNum === 'q') break; if (isNaN(answerNum) || answerNum <= 0) { answerNum = prompt('0以外の有効な数字を入力せよ'); conti

[JavaScript] 型扱いに関するトリビア集

この度、世界一(自称)バグの少ないソフトハウスを勝手に名乗る弊社より、バグゼロを目指す開発手法の一要素といたしまして、GitHubにて各種言語向け機能群 [Yggdrasil Essence](https://github.com/ylllc) の公開をはじめました。
今後も少しずつではありますが、続々まとめていく予定です。
なお、Unlicenseにしてありますので、お好きなように。

さて、この度Node.jsおよびDeno版に[追加した機能](https://github.com/ylllc/yges_js_node/blob/main/api/util.js)について軽く解説しておきましょうか。

# 早い話

適当に流用してないで、意味のある定義をしよう。
JavaScriptに限らず。

…で終わっちゃいそうなネタではありますが、まー一応。

# if(変数) への畏怖

いい感じにtrueかfalseを決めてくれるので多用される記述ですね。
だがちょっと待ってほしい。
具体的にどんな判定されているか、把握してますか?

– booleanについては、値通り
– 数値

PokéAPIを叩いて簡単なポケモン図鑑をつくってみた

## はじめに
こんにちは、今回はPokéAPIを使用して簡単なポケモン図鑑を作成する方法を紹介します。最近、ポケモン関連のアプリやゲームが人気を集めている影響で、自分でもポケモン図鑑を作ってみることにしました。また、UdemyでPokéAPIの使い方を学んだ経験を活かし、その知識をまとめた記事です。

こちらが今回参考にしたShin CodeさんのUdemyの動画です。Reactを初めて学ぶ方には特におすすめです。

https://www.udemy.com/course/react-3project-app-udemy/?couponCode=ST20MT111124A

[PokéAPI公式サイト](https://pokeapi.co/)

本記事では、動画でカバーされていない機能や私自身がブラッシュアップした部分についても紹介していきます。

## 環境構築

### 1. プロジェクトの作成
Reactのプロジェクトを作成するために、npx create-react-app を使って新しいReactアプリを作成しました。

“`bash
npx create-rea

素のJavaScriptで楽天トラベルのAPIを使ったページネーションを実装してみた

# はじめに
こんにちは。前回記事を書いてみて言語化することで自分のわからないことが明確となり、アウトプットの大切さを実感している今日この頃です。
今回も振り返りを兼ねてページネーション実装について記録を残していきたいと思います。

# なぜやろうと思ったか
今回も楽天トラベルキーワード検索APIを使ったコーディングがきっかけです。
検索結果をページネーションで見られるようにしたいと思った際に、ページネーションの実装の仕方を論理立てて考える力が身につきそうだと思い素のJavaScriptで実装しました。

# 楽天APIで取れるページネーションの情報
[楽天トラベルキーワード検索API](https://webservice.rakuten.co.jp/documentation/keyword-hotel-search)では下記のようなページネーションの情報が入ったpagingInfoというobjectを取得できます。
このデータを元にページネーションを作っていきます。
| パラメーター | 備考 |
| —- | —- |
| recordCount | 検索

CloudFront Functionを使用したリダイレクト機能の実装

Webサイトでドメイン変更を行った際、旧ドメインを新ドメインにリダイレクトさせたいと思うことがありました。そのリダイレクト処理をCloudFrontの関数を使用すれば簡単に実装できるのでその設定方法を記します。
## 前提条件
– S3 + CloudFrontの静的webサイトホスティングを使用している
– 旧ドメイン、新ドメイン共にCloudFront Distributionが作成されている

## 実現したいこと
– 旧ドメインにアクセスした際、新ドメインにリダイレクトさせる
– 但し、パスに「/test/」までの指定があった場合はリダイレクトせず旧ドメインを使用する

| 旧ドメイン | 新ドメイン |
|:-:|:-:|
| before.example.com | after.example.com |

|ケース|想定される動作|入力されるURL|リダイレクト先URL|
|:-|:-|:-|:-|
|パスに「/test/」までの指定がされている場合|旧ドメインのままリダイレクトしない|https://before.example.com/test/xxxxx|https

D3.jsで、ドラッグで縦横無限スクロール

# はじめに
Google Mapのように、マウスドラッグとスクロールで、絵をぐりぐりする試作品を作ってみました。
今回は、D3.jsを使っています。D3.jsで絵を描くといえばSVG。絵を描く方法は、SVGとcanvas、どっちがいいの議論(?)があります。

ちなみに私、ドラッグでスクロールに関しては、過去に似たような投稿をしています。

まずこちらは、SVGです。Reactの中で、react-zoom-pan-pinchというモジュールを使って、SVGをドラッグする方法。プロパティ操作で簡単にできるように作られているというメリットはある一方、技術はコードの中なので、使う人の技術力があんまり上がらないのと、細かいことが気になったときに手が出せないデメリットもありました。

https://qiita.com/yo16/items/77fad21dfe9c9f61d245

次にこちらは、canvasです。またReactですが、今度はcanvasで手作り。座標操作に関するハードルがちょっと高いと思います。

https://qiita.com/yo16/items/0362f263f

ViteでUncaught (in promise) SyntaxError: Unexpected token ‘<', "

## 先に結論だけ

Viteでエラー`Uncaught (in promise) SyntaxError: Unexpected token ‘<', "

【超基礎】JavaScriptにおける配列の操作とコールバック関数

## 前提
この記事はPython,C,C++がちょっとだけ書ける、読める筆者がProgateでのJS学習を通して、はえ～と思ったことをまとめたものになります。従って、**なんだそれ当たり前だろ**みたいなことしか書かれていませんので悪しからず。

ちなみに生成AI頼りの個人開発をした際，JavaScriptを使いましたのである程度はわかっているつもりですが、自分で書かないと気づけない厳密な部分は何もわかっていないです。

記憶定着用のアウトプットに近いものになりますので、誤っている部分があれば訂正していただけると幸いです。。

https://prog-8.com/courses/es6

### 筆者の技術力
– C,Python (基礎文法~ポインタ、アルゴリズムの授業、研究での使用など)
– HTML,CSS,JS (大半を生成AIに支援してもらったため読めるが書けない)
– C++ : (AtcoderのD問題をたまにギリギリ完答できる程度)

## 配列の操作
### push
配列の末尾に値を追加する。
“`JavaScript:push
const numbe

Javascript オブジェクトの要素結合

学習備忘録
“`aa.js
const Asan = {
name: ‘hoge’,
age: 25,
weight: 60
};

const fullDate = [Asan[‘name’], Asan[‘age’], Asan[‘weight’]];
// これだと[‘hoge’, 25, 60]という配列が代入される

const fullDate = [Asan[‘name’], Asan[‘age’], Asan[‘weight’]].join();
// これだと’hoge,25,60’という文字列が代入される。
// なおjoin()はﾃﾞﾌｫﾙﾄでカンマ区切りになる。join(‘,’)と同じ意味。

意味不明な作品

## 今回もくだらない作品を作りました。m(__)m
いかが全コードです
“`html