f@ctor

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

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

axiosの使い方の初歩的なミス

こんにちは。

Node.jsを学習している際に、フロント側からバックエンド側に通信しようとした際につまずきました。
もう少し詳しく書くと、フロント側でaxiosを使ってバックエンド側APIにアクセスし、APIの中でres.redirect()によって画面遷移するのに失敗しました。

ファイル構成は下記のようになっています。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532036/d4b3a64a-8ae5-4901-4483-9b790d8bf25d.png)

それぞれのファイルの中身は下記のようになっています。

“`javascript:index.js
const express = require(‘express’)
const path = require(‘path’)

const app = express()

app.set(‘views’, path.join(__dirname, ‘views’))
app.set(‘view engine’, ‘e

元記事を表示

【Salesforce】手動の共有設定を子レコードにも一括で反映させるLWC

## やりたいこと
親レコードの共有の情報を子レコードにも反映させたい！

### 前提条件
・カスタムで「機密情報」と「機密情報詳細」オブジェクトがあるとします
・機密情報詳細は機密情報への参照項目を持っています
・「機密情報」と「機密情報詳細」オブジェクトは基本的に非公開で、詳細画面の共有ボタンから共有されているユーザまたはグループにしか権限がないとします
機密情報の詳細画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640548/c73f21e0-3bec-bdb5-e8d8-6b512809c66f.png)

設定の共有設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640548/6e3bfd01-5a90-c5cd-1238-323c3046c1e8.png)

詳細画面から手動で設定する共有
![image.png](https://qiita-image-sto

元記事を表示

【Redux Toolkit】Next.js14, TypeScriptを使用してショッピングカート機能を実装しよう

# はじめに
Reactの状態管理方法の一つであるReduxを実務でよく用いられる技術スタックと合わせて
機能開発しながら学んでいきます。

![redux.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492127/ac8d0f99-25b5-e995-a9e5-9e1d95c1fe8f.gif)

### 学べる技術スタック
– Next.js14(app router)
– TypeScript
– Tailwind css
– Redux Toolkit

## Redux Toolkitドキュメント

https://redux-toolkit.js.org/

## React icon

https://react-icons.github.io/react-icons/

## 完成品デモ
![RTK-shopcart.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492127/93baa0a9-5

元記事を表示

WebGLを用いた赤色三角形描画の計算プロセスに関する考察　という論文風のブログ記事。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/bf0335f0-b9a2-65af-101b-da091715a4ca.png)

### WebGLを用いた赤色三角形描画の計算プロセスに関する考察
1. はじめに
本稿では、WebGLを用いて二次元空間における赤色の三角形を描画するプロセスについて論じる。WebGLは、ブラウザ上で動作するOpenGL ESの仕様を基にしたAPIであり、HTML5に統合されている。本研究は、WebGLを通じたグラフィックス処理の基礎的な実装を通して、その計算プロセスとレンダリング手法の理解を深めることを目的とする。

2. 初期化プロセス
2.1 WebGLコンテキストの取得
描画処理は、WebGLコンテキストの初期化から開始される。本研究では、HTML内の要素に対してgetContext()メソッドを用いてWebGLコンテキストを取得する。このコンテキストは、GPUを用いた描画処理の基盤となるものであり、図形の頂点

元記事を表示

環境構築何も分からん

『セイト先生が教えるプログラミング入門』で、環境構築でツボったので、『はじめてつくるReactアプリ with TypeScript』に転進しました（そのときの記事：https://qiita.com/5hvn5vk3/items/501147bc30999788ce33
）。が、またもや環境構築でツボりました。

なので、課題を「環境構築」に設定し、とりあえず以下のことをやってみることにします。

・nvm, Node.js, npmを一旦全部消す
・教科書に書かれているNode.js, npmのバージョンを確認して、同じものを入れてみる
・その上で、教科書のサンプルファイルを、必要な部分だけ編集してそのまま使ってみる

元記事を表示

JavaScriptのイベント処理で、ハンバーガーメニューの開閉アニメーションについて考えてみる【初級編①】

# はじめに
今回から、JavaScriptのイベント処理→条件分岐の順番で学んでいきます。学ぶ順番の理由は以下の通りです。

**①イベント処理から学ぶ理由**
– イベント処理は、**ユーザーとのインタラクション（クリック、ホバー、キーボード入力など）を管理するために必要です。**
– 実際の動作が視覚的に確認できるため、学習が直感的に理解しやすく、イベント処理から学ぶことで、ユーザーインターフェースの基本的なインタラクションを扱えるようになります。

**②イベント処理で学ぶ内容**
– ハンバーガーメニューの開閉アニメーション、スムーズスクロールを作りたい。

# PC版ヘッダーメニューのコード解説
![ハンバーガーメニュー01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801287/19d7e21d-37f2-aed5-4ae7-093f15efea0d.png)

最初はPCで見ると仮定して、ヘッダーのナビゲーションは全て表示するように考えます。

## HTML5のコード解説

元記事を表示

CDNのReduxを利用してkintone UI Componentを状態管理する(Redux@3.6.0)

いつもreact-reduxとredux-toolkitを利用して開発しています。

しかし、とある案件でwebpackなどでのトランスパイル禁止という縛りを受けた上で、kintone UI Component利用した複雑なUI構築の必要が出ました。

せっかくなので知見をここでまとめてみようという試みです。

# kintone UI Componet (=KUC)

kintone UI ComponentはkintoneライクなUIがつかえちゃう素敵なライブラリです。略してKUC。

https://ui-component.kintone.dev/ja/

ソースを見るとLitで作られているようですね。
コンポーネント内部では状態を管理していますが、複合したコンポーネントを統合管理する方法はなさそうです。（あるかも。教えてください！）

# Redux
状態管理はいろんな方法がありますが、Reduxは一番使われるフレームワークだと思います。React開発では絶対使いますね。

ReduxであればFluxパターンを利用して安全に管理が行えると思います。

https://redu

元記事を表示

VScodeプラグイン 各言語おすすめ

VScodeの拡張機能について各言語ごとにまとめる

## 共通

### Japanese Language Pack
　日本語化するための言語化パック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/dab28482-ae62-81f6-c8c9-d89dad705f12.png)

### Code Spell Checker
スペルチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/b106fc87-20c2-9cf9-b235-b6c52f836d0e.png)

### vscode-icons
アイコン表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/48d74c47-fa84-433c-461b-f448ab0c9157.p

元記事を表示

ChatGPT によるリバーシの作成その２

ChatGPT によるリバーシゲームに機能追加してみます。

# 概要

[ChatGPT によるリバーシの作成](https://qiita.com/rex0220/items/b5d8fe7373c32f5faa44)で、作ったゲームに機能を追加してみました。
現時点では、機能追加と問題解決をすべてをチャットで行うにはまだ無理がありそうです。
また機能追加によりコードが長くなると、「生成を続ける」待ちになり面倒です。

![2024-09-12_08h36_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/7ac4a418-3c6c-62d3-b3a9-0c749d626349.png)

## 機能追加概要

「チャットを続けて機能を追加する」方針で、下記機能を追加します。

– 駒を四角から丸に変更
– ゲームの履歴を追加
– 駒位置を示す番号を枠外に追加
– 「もどす」・「すすむ」機能追加
– パス機能を追加

## 機能追加中にあった問題

問題の指摘だけでは直らないケースも

元記事を表示

2Dフラクタルノイズで地形を生成して、山を回転させるアニメーションのゲーム。

### 2Dフラクタルノイズで地形を生成して、山を回転させるアニメーションのゲーム。
スペースキーを押すことで新しい地形を再生成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/8fed72ea-bed8-8046-b6de-3f75f6ab066f.png)

![スクリーンショット 2024-09-12 052323.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/6d10b48a-c9b6-51f4-61c0-e32aa30ce8f4.png)

#### Three.jsを使って3Dで生成された山の地形を描画し、それを回転させるアニメーションを実現しています。また、スペースキーを押すと異なる地形が再生成されます。

Three.js を使って3D地形を生成し、アニメーションさせています。
フラクタルノイズ を用いて山のような地形を生成しています。
スペ

元記事を表示

小さなGPUのパワーエンジニアリング。4層の異なるスケールのパーリンノイズを重ねて、流動的な乱流のような動き。

#### 前回のあらすじ。CPU+GPU

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

### 4層の異なるスケールのパーリンノイズを重ねて、流動的かつ乱流のような動き 100% GPU計算。

WebGLを使用して高速にGPUで計算してます。前回よりも高解像度でスムースです。

![スクリーンショット 2024-09-12 044414.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/fdd831b1-efc4-69da-5e3b-40eebc607ac8.png)

![スクリーンショット 2024-09-12 044429.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/bf527aff-d4be-8f91-bc95-f3f4adcb57c9.png)

![image.png](https://qii

元記事を表示

意外と忘れていたJavaScriptの書き方

## 始めに
reactやtypescript、Rails7の仕様になれるため、JavaScriptの復習を基礎から行っているが案外抜けていた考えがあったので備忘録として、、、

## 参考著書
以下の書籍を参考にさせていただきました！
(アフィリンクじゃないよ!!)

https://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8BJavaScript-%E6%96%B0%E7%89%88-%E6%A1%9C%E5%BA%AD-%E6%B4%8B%E4%B9%8B/dp/4798173266/ref=sr_1_1?crid=3NIFQ1ZY68WO1&dib=eyJ2IjoiMSJ9.s6yblccBqbnFS6APztGBhDABxnlz2la3ZXJ9o5kxDdB6IHdL2SoKbrJp5Z4uvc8P8KP_Tj_FB7CfQvtzzGoaxGB5kKG9muNIArwi2iWMcOyXPbJ7yjFamOjZhxk2ld56SK-YclTOpm_XYkGdUJ2

元記事を表示

【syncfusion】DiagramComponentでパンツールをミドルクリックで有効にする

## 背景
syncfusionの描写ツール（DiagramComponent）で、マウスのミドルボタン（ミドルクリック）・ホイールボタンを押すことで、パンツールを有効にし、そのまま長押し&ドラッグで、画面を掴んで移動できるような挙動を実装したい。

使っているプログラミング言語は、ReactjsとTypescriptです。

今回はsyncfusionを使っているが、マウスのミドルボタンでパンツールを有効にする実装が必要な場合は、応用ができると思います。

## やること

![image-236.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256394/df87ef6f-e303-ad56-d2cd-b50005d7676f.png)

上図のような画面で、ミドルボタンを押すとパンツールが有効になり、カーソルが手のアイコンみたいなものに変化し、描写画面を掴んで移動させることができるようにする。伝わるかな……

## Syncfusionとは？
Syncfusionは、2001年にアメリカ・ノースカ

元記事を表示

サムネイルをクリック！スライドショーをJavaScriptで作ってみよう！

### はじめに

JavaScriptで簡単なスライドショーを作ってみませんか？今回は、サムネイル画像をクリックするとメイン画像が切り替わり、スライドショーボタンを押すと自動で画像が切り替わる、おしゃれなスライドショーを作ってみます。この記事では初心者でもわかりやすいように、一つ一つのステップを説明していきます！

### 実際に作るもの

– **メイン画像**が画面の中央に表示され、下に**サムネイル画像**が並びます。
– サムネイルをクリックすると、メイン画像がそのサムネイルの画像に切り替わります。
– スライドショーボタンを押すと、サムネイルの画像が順番に自動でメイン画像に表示されるようになります。

### ファイル構成

“`bash
/slideshow/
│
├── index.html # HTMLファイル
├── script.js # JavaScriptファイル
└── style.css # CSSファイル
“`

### スライドショーの作り方

それでは、実際にコードを書いていきましょう！

—

### 1.

元記事を表示

Three.js scaleで大きさを変える

この記事を参考にして、
scale で箱の大きさを変えてみる。

まず、同じ大きさの箱を３つ並べる。

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/650951a3-7429-94d3-042c-7fdc3c60443a.png)

#### コード
“`js:html





```
また、プラグインも[インストールヘルパー](https://gsap.co

元記事を表示

JavaScript の Date オブジェクトについてのメモ

# :man_tone1: 誰向けの記事か
- JavaScript 初心者
- タイムゾーンや時差の扱いに困っている方

# :triangular_flag_on_post: 結論
- Date の実態はタイムゾーンを持たない特定の瞬間
- 比較する際には `getTime()`する

# 1. Javascript の Date とは
:::note warn
注意：個人的な理解に基づいて説明しています。細部で誤りがある可能性があります。
:::

- JavaScriptのDate型の実態は、世界協定時間(UTC)の1970年1月1日0時0分0秒から経過したミリ秒数である
- タイムゾーン情報は持たない
- 特定の瞬間を表す

MDN の説明：
>JavaScript の日付は基本的に、元期として定義される UTC の 1970 年 1 月 1 日午前 0 時（UNIX 元期と同じ）から経過したミリ秒単位の時刻を指定します。このタイムスタンプはタイムゾーンに依存せず、歴史の一瞬を固有のものとして定義します。

https://developer.mozilla.org/ja/d

元記事を表示

小規模の html をサクっと作るためのサイトを公開してみる

今回は小規模の html を
サクっと作るためのサイトを
公開してみたいと思います。

完成品は下記の URL で
試す事が出来ます。

[https://uni928.github.io/SephirothHTMLCreater/](https://uni928.github.io/SephirothHTMLCreater/)

***

このサイトの使い方

このサイトを開くと
html タグや body タグなど
最低限必要なタグを
書いた状態からスタートします。

小規模の html なら
script タグや
style タグも使うかもしれないため
入れています。

よく使うであろう構文は
ボタンを押すと入力出来るように
なっています。

作成した html を
ダウンロードするボタンを押すと
作成した html ファイルを
ダウンロード出来ます。

***

このサイトのソースコード

このサイトのソースコードは
以下の内容です。

以前作成したサイトを
改変して作っているため
ボタンを動的に生成したりせず
ベタ書きです。

```html:このサイトのソースコード

元記事を表示

OTHERカテゴリの最新記事