ブラウザで表示されているリンク取得

ブラウザで表示されているリンク取得

// すべてのリンクの href 属性を取得してコンソールに表示する
const links = Array.from(document.querySelectorAll(‘a’));
const hrefs = links.map(link => link.href).filter(href => href);

// すべてのリンクをコンソールに出力
console.log(“リンク一覧:”);
hrefs.forEach(href => console.log(href));

// クリップボードにコピー
const textToCopy = hrefs.join(‘\n’);
navigator.clipboard.writeText(textToCopy)
.then(() => console.log(“すべてのリンクがクリップボードにコピーされました。”))
.catch(err => console.error(“コピーに失敗しました: “, err));

【JavaScript】Reflectについて

今回は【JavaScript】Reflectについての備忘録です。

## 1: Reflectとは？
・Reflectとは、「JSエンジン内部の汎用的な関数」に直接アクセスできるオブジェクトのこと。

## 2:「Reflect」をもう少し詳しく
⬇︎
◾︎JSエンジンでは内部でのみ使用される「内部メソッド」というものを保持している。
［［Get］］
［［Set］］
［［Delete］］
［［Construct］］

⭕️◾︎「Reflect」によってこの「内部メソッド」を間接的に呼び出すことができる。
get
set
deleteProperty
construct

## 3:Reflectを使用する目的は、主に2つ。
⬇︎
①「内部メソッドを、Reflectに格納していく」ことによって【Reflectを通して内部メソッドにアクセスするという目的。】

②「Proxyと合わせて使用する目的。」

主に以上の2点です。

## 4:実際に【Reflectを通して内部メソッドにアクセスしてみよう。】

__実践1__: 下記のようにn

アプリの機能に悩むあなたに

個人開発でアプリを作成するときに基本意識するのはCRUD
ここに関しては多くの人が認識済みかもしれませんが、

個人開発でアプリ作成時の機能に関して、
**「自分の得意分野から」攻めたほうが良い**と考えます
同時に
**相手の得意分野は避けたほうがいい**と考えます

何言っているかわからないかもしれませんが、
以前テレビで見てたあたしンちのエピソードにヒントがあります

あなたが開発するアプリをプレゼントと例えてみてください

それは「相手によろこんでもらえるかどうか分からない」という不安にもなります

コーヒー好きな人に下手なコーヒー贈ると、
**ああこれね**
その人のほうが、あなたより舌が肥えていたらそのような反応が返ってくるリスクがあります

同じように、ついアプリ作成時に高度な技術を付けないとで加点法形式で「あの人は、○○が好きだから」という根拠を求めてしまいます

少なくとも「あの人はきっとLINEが好きだから」でプラス1点(だからLINE通知を実装しました)
少なくとも「みんな、おすすめを求めている」でプラス1点(だからレコメンドを実装しました)

そのプラスが、なん

【JavaScript】Proxyについて

今回は【JavaScript】のProxyについての備忘録です。

## 1: Proxyとは？
・「Proxy」とは、【プロパティの操作に、独自の処理を追加する】ためのオブジェクトです。これによりオブジェクト自体の操作に介入したり操作したりすることができます。

## 2:「Proxyの独自の処理」って？
・例えばProxyが発生したら「トラップ」というものを発動して、独自の処理を追加するということができます。

■トラップの独自の処理の例
・例として「setトラップ」を解説。
targetObj
handler
new Proxy
という各オブジェクトを使って、どの操作に介入するか、また介入された操作をどのように再定義するかを定義するオブジェクトです。

■set: function (target, prop, value, receiver)の引数の意味。

・第一引数のtarget ➡︎「Proxyの第一引数で渡したオブジェクトtargetObjのこと。」

・第二引数のprop ➡︎「プロパティにアクセスされた際の、プロパティの名前(プロパティ

[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については、値通り
– 数値

素の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 ‘<', "

【超基礎】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