f@ctor

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

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

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





意味不明な作品