f@ctor

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

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

【VanillaJS】ドラッグ&ドロップで要素を並び替える方法(1次元方向)

# はじめに

ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。

ドラッグして要素の並び替えする方法について今回は解説していきます。

:::note warn
今回は1次元方向のみの場合です。
(また、見やすさのため `li` 要素を垂直方向に並べています。)
グリッド状(2次元)の並び替えはこの記事では扱いません。
:::

# 対象となるコード

“`html:index.html




  • 項目 1
元記事を表示

Stimulusでa11yを考慮した可変のカルーセルを実装する

カルーセルのアクセシビリティを考慮しつつ、Stimulusで実装してみたいと思います。

## カルーセルとは

> 文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。

via: [カルーセル | Accessible & Usable](https://accessible-usable.net/2014/03/entry_140316.html)

—-

「回転木馬」は、「メリーゴーラウンド」と言えば分かりやすいですかね。
ウェブサイト上でくるくる回るアレです。
自動でスライドするかどうかや、無限にループするかどうかは、仕様によります。

### 可変のカルーセルとは

表示領域が固定されているカルーセルはよくありますが、今回はこの表示領域がコンテンツ幅によって可変するカルーセルを実装してみたいと思います。
具体的には以下のようなものです。

元記事を表示

React + React Router + TypeScript: チュートリアル[01] loaderとactionでデータを作成・編集・削除する

[React Router](https://reactrouter.com)は、Reactに使われるもっとも人気の高いルーティングのライブラリです。シングルページアプリケーション(SPA)では、ひとつのページに表示されるコンポーネントを切り替えて複数のページが表現されます。それらのページにそれぞれURLを与えて遷移するのがルーティングの技術です。

そして、React Routerは「[クライアントサイドルーティング](https://reactrouter.com/en/main/start/overview#client-side-routing)」を実現します。通常のWebサーバーでは、ページ遷移のたびにドキュメント全体をリクエストして、コンテンツすべてがロードし直されなければなりません。クライアントサイドルーティングは、すでに読み込まれたJavaScriptで、必要な箇所はただちに更新します。そのうえで、新たに使うデータのみサーバーにリクエストするのです。ページを丸ごとリロードする場合と比べて、負荷がかかりません。

React Routerにはv6.4から新たなData A

元記事を表示

【Next.js】レンダリングとは

# レンダリングとは
Next.jsのレンダリングは、Next.jsフレームワークにおいて、クライアントサイドとサーバーサイドのレンダリングの両方を含むプロセスを指します。

1\. **サーバーサイドレンダリング（SSR）** : Next.jsでは、ページがサーバー上で最初にレンダリングされ、HTMLコンテンツがクライアントに送信されます。これにより、初期のページの読み込みが高速化され、検索エンジンのクローラーがページの内容を確実にインデックスすることができます。サーバーサイドレンダリングは、getServerSidePropsメソッドを使用してページごとに定義されます。

2\. **クライアントサイドレンダリング（CSR）** : ページが初めて読み込まれた後、Next.jsはクライアント側でルーティングを処理し、必要なデータをフェッチしてコンポーネントを再度レンダリングします。これにより、ページ間の移動が高速化され、ユーザーエクスペリエンスが向上します。クライアントサイドレンダリングは、通常のReactコンポーネントのマウントと更新によって行われます。

# まとめ
Next

元記事を表示

レンダリングとは

# レンダリングとは
レンダリングとは、コンピュータのデータや情報を、人間が理解できる形式に変換するプロセスを指します。特に、ウェブ開発の文脈では、レンダリングはウェブページやウェブアプリケーションの画面表示を生成するプロセスを指します。

# 手順
ウェブページやウェブアプリケーションのレンダリングは、通常次のような手順で行われます：

1\. **HTML生成** : ウェブページのコンテンツや構造が定義されたHTMLコードを生成します。これには、テンプレートエンジンやフレームワークなどが使用されることがあります。

2\. **CSSスタイリング** : HTML要素に適用されるスタイルやデザインを定義します。これにより、ページの見栄えやレイアウトが設定されます。

3\. **JavaScriptの実行** : ウェブページがインタラクティブになるために、JavaScriptコードが実行されます。これには、イベント処理や動的なコンテンツの変更などが含まれます。

4\. **画面への表示** : 最終的に、生成されたHTMLコードとCSSスタイルがブラウザによって解釈され、画面

元記事を表示

今さら森博嗣「笑わない数学者」のビリヤードの問題を解く６～答え合わせ編

# 0. はじめに

前回の記事までにビリヤードの問題は「ゴロム分度器」または「魔円陣」として古くから知られる数学の問題であることが分かった。今回，「魔円陣」を主題にした書籍（参考文献参照）を入手したので答え合わせを行いたい。

– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く１～導入編 – Qiita](https://qiita.com/TETSURO1999/items/fa1db203d48858c607f1)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く２～計算機を使う – Qiita](https://qiita.com/TETSURO1999/items/be4a8b460a690a48236b)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く３～計算量オーダーを考える – Qiita](https://qiita.com/TETSURO1999/items/bcd0cceb66a3b6d5964f)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く４～世界記録に挑む – Qiita](https://qiita.co

元記事を表示

JavaScriptのテンプレートリテラルを完璧に理解する

## はじめに
今回はJavaScriptにおけるテンプレートリテラルについて、基本構造から発展的な内容までを確認していく記事です。

話は変わりますが、React（JavaScriptのライブラリ）の勉強をするなかで、**Styled Component** というスタイルを定義するためのライブラリを知りました。
その記載例が以下です。
“`react:Styled Componentsの記載例
const MyComp = styled.div`
width: 200px;
margin: 5px;
border: 1px solid blue;
`
“`
正直、これを見たとき面食らいました。
バッククォートが使われているのでテンプレートリテラルだということはわかりましたが、これによって何をしているのかは全くわかりませんでした。

まだまだ知らないことが多すぎると感じたため、改めてテンプレートリテラルについて学び直し、JavaScriptの基礎を固めるべく、本記事の執筆に至りました。

では、早速基本から確認していきましょう。

## テンプレートリテラルとは
テン

元記事を表示

PlunkerでPhaser.Physics その15

# 概要
Plunkerで、Phaser.Physicsやってみた。
CartPoleを、立たせます。
エージェントを、導入します。
環境が、エージェントにポールの傾きを与え、エージェントがPID制御を計算して、方向量ベクトルを返します。
環境が、重力シミュレートして、カートを動かします。
Kp,Ki,Kdは、自分が決めました。それぞれ、1.0，0.2、0.2です。
←キー、→キーで、外乱を与えることができます。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fcfcb9b5-f6fb-9c4c-8b1b-4bb7a2b55a76.png)

#

“`

var Agent3 = function() {
this.err2 = 0;
this.err = 0;
this.P = 0;
this.I = 0;
this.D = 0;
};
Agent3.prototype.get_action = function(set

元記事を表示

PlunkerでPhaser.Physics その14

# 概要
Plunkerで、Phaser.Physicsやってみた。
いよいよ、シュミレーションやってみます。
強化学習で使われる、CartPoleです。
←キー、→キーでCartが、移動します。
pole.angleで、ポールの傾きが取れます。
cart.applyForceで、カートを動かせます。
次回は、立たせます。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/932e3ea7-b121-dbbc-36d7-4a3a514ecda5.png)

# サンプルコード

“`

function preload() {
}
function create() {
game.physics.startSystem(Phaser.Physics.BOX2D);
game.physics.box2d.debugDraw.joints = true;
game.physics.box2d.setBoundsToWorld();
g

元記事を表示

短縮リンク作成サービスを開発した話 – フロントエンド編02

## 概要
2023年末頃に、短縮リンク作成サービスを開発・リリースしました。
開発したサービスは以下のものになります。
https://nlia.jp
この記事は前回の続きです。↓前回の記事
https://qiita.com/yatsumi823/items/ce679ce835ccf3ea4a91

前回は、トップページ作成の部分までの内容でした。今回は、リンク作成画面についてです。
この記事では、実際のコードも交えながら、どのような仕組みで動いているのかを解説します。

## ライブラリ
このページで使用するライブラリは、React-hook-formと、Chakra UIです。それぞれのライブラリについての詳細は前回の記事を参照してください。

## パス
前回の記事までと同様、Pages Routerを使用しています。リンク作成ページのパスは、以下の通りです。
/src/pages/shortenLink/index.tsx

## コンポーネントの分け方
コンポーネントは、以下の3種類に分けています。

– ヘッダー（ShortenLinkHeader）
– リンク作成フ

元記事を表示

JSDocを活用した効果的なコードドキュメント化

## はじめに
JavaScriptやTypeScriptでの開発において、JSDocはコードのドキュメント化を助ける強力なツールです。この記事では、JSDocの基本的な使い方と、それを用いて効果的にコードをドキュメント化する方法について解説します。

## JSDocとは？
JSDocは、JavaScriptファイル内に特別なコメントを記述することで、コードのドキュメントを生成するツールです。このコメントは、関数の説明、パラメータの型と説明、戻り値の型と説明など、コードの構造と振る舞いに関する情報を提供します。JSDocを使用すると、この情報からHTML形式などの読みやすいドキュメントを自動生成できます。

## 基本的な使い方
### 関数のドキュメント化
関数をドキュメント化するには、関数定義の直前にコメントを記述します。このコメントは`/**`で始まり、`*/`で終わります。コメント内では、`@`で始まるタグを使用して、関数の説明やパラメータ、戻り値などを記述します。

“`javascript
/**
* 文字列を大文字に変換します。
* @param {string}

元記事を表示

Node-REDのGit機能を学ぶ(3) フローの変更履歴を管理

　[前の記事](https://qiita.com/kazuhitoyokoi/items/2d16662d18b9158f9b92)では、1つのNode-RED環境で複数のフローを切り替える方法を紹介しました。

![Screenshot 2024-02-25 at 20.55.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/1d60fba7-d1df-53f4-495c-747c5b78922e.png)

本記事では、1つのフローに焦点を当てて、フローの変更履歴の記録方法について紹介します。

一般的なコード開発で「Git」を利用する際は、Gitのコマンド操作かVisual Studio Codeなどの開発環境の習得が必要でしょう。一方、Node-REDではフローエディタ上で操作ができるため、「Git」に詳しくない開発者にとっても簡単です。

# フロー開発での問題
　もし、Git機能が有効化されていないデフォルトの「Node-RED環境」を使い続けた場合、以下の問題に遭遇

元記事を表示

JavaScriptで独自の書庫を作る

独自形式の書庫を作り出す超簡単お気軽お手軽足軽尻軽programを紹介します。今やJavaScriptでも容易に実装できる時代となりました。外部jsにも頼る必要はありません。
## 仕様
– 書庫には1個のfileにつきfile尺、file名、file中身、という順番に配置
– file名はUTF8形式で書き込む。終端に0を書き込む
– file尺の書き込み量は可変長。file尺をLとすると…
– 0 byte目

上位3bitsにbyte数、下位5bitsにLの下位5bits
– 1 byte目

`L>>5&255`
– byte目以降

`L>>5+8*n&255`
>という具合なので書き込み量は、Lが31以下なら1 byte、Lが8191以下なら2 bytes、2097151以下なら3 bytes、53687091以下なら4 bytes… などという内容に違いない。ちなみに64 bits浮動小数点数で計算している都合上、Lは53 bitsまでしか正確に書き込めません
## 書庫構築program
html+jsで以下のようになります。
“`htm

元記事を表示

株価チャート chartjs-chart-financial を試行錯誤で使ってみた　その１

日頃、株式監視銘柄のリストをデータベース化した Filemaker で、WebViewer からヤフーファイナンス等の Web ページを表示閲覧すると同時にページソースをキャッシュ保存してオフラインでも再確認できるように利用しています。

Filemaker の WebViewer は表示コンテンツを Filemaker から JavaScript を介してリンク等をクリックしてSeleniumの様にブラウジングを自動化したり、Filemaker から WebViewer にデータを渡して JavaScript で高速に計算して結果を Filemaker に再び戻すということも出来て重宝しています。
しかし、チャート画像などはダウンロードしないように利用しているため、チャートを確認したくなってしまうことが度々あります。
そこで、オフラインでも株価チャートを表示できないかとググってみたところ、JavaScript でグラフを表示する[Chart.js](https://github.com/chartjs)の公式プラグインに[chartjs-chart-financial](https:

元記事を表示

EPUB形式の電子書籍内のJavaScriptでローカルストレージにアクセスして情報を記録

# やりたいこと
自作した電子書籍（[EPUB形式の電子書籍を一からゴリゴリ作成する方法](https://qiita.com/campanura/items/1fcd64754d4a45c8f225)）で，読書回数など簡単に記録できたら便利だなと思いました．

例えば，課題のついた書籍であれば，問題を解いた回数や間違った回数を記録したりなどの使い道が考えられそうです．

今回，JavaScriptで電子書籍リーダのローカルストレージ部分を活用することで実現しました．

# 前提
1. ちゃんと動作してくれるかは仕様次第
そもそもローカルストレージを利用できるかどうかは電子書籍リーダ自体やその環境に依存します．やってみてもうまく動作しない場合があり得ます．
複数の環境や電子書籍リーダを用意して試してみるのが良さそうです．
筆者はMacBookやiPadの「ブック」アプリやKotobee Readerなどで動作を検証していました．

1. 容量の問題
データ容量を考慮せずにローカル領域に保存していくと，知らぬ間にデータ容量を逼迫する恐れがあります．小さめのデータを自己責任で使いましょう．

元記事を表示

【自作Chrome拡張機能公開】 気になるリンクを開きまくって、後でまとめて確認したい

# はじめに
ネットで調べ物をするとき、

1. 気になるリンクをとりあえず全部開く。
1. 後でまとめて確認。

をする人用のブラウザ拡張機能です。Chrome/Edge用とFirefox用があります。

# ブラウザ拡張機能

## Google検索結果のリンクを新しいタブで開く
**New tab from search results** ([Chrome/Edge🡭](https://chromewebstore.google.com/detail/ihkdodgomjaaglplbpkjaphjlahfiihn) / [Firefox🡭](https://addons.mozilla.org/ja/firefox/addon/new-tab-from-search-results/))
* [設定変更](https://gift-by-gifted.com/open-chrome-search-results-in-new-tab/)なしでGoogle検索結果のリンクを新しいタブで開きます。

![newtab.gif]

元記事を表示

TypeScript(JavaScript)で配列の開始indexを1始まりに偽装する

## Proxyオブジェクトを使用して実現します

“`typescript
const org = [1, 3, 5];

const array: any[] = new Proxy(org, {
get: function(target: any[], prop: PropertyKey) {
const index = Number(prop);
if (!isNaN(index)) {
// プロパティが数値であれば1を引く
return target[index – 1];
} else {
// 数値でない場合は通常のプロパティアクセス
return target[prop as any];
}
},
set: function(target: any[], prop: PropertyKey, value: any) {
const index = Number(prop);
if (!isNaN(index)) {
// プロパティが数値であれば1

元記事を表示

Node-REDのGit機能を学ぶ(2) フローの切り替え

　[前回の記事](https://qiita.com/kazuhitoyokoi/items/56ee43658f287f80156c)では下の図を用いて、Node-REDのGit機能の概要を紹介しました。

![Screenshot 2024-02-25 at 20.56.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/143c8032-eb97-037e-3605-9b555ce4919d.png)

本記事では、Node-REDのGit機能のうち赤色でハイライトした「フローを切り替える機能」を紹介します。はじめに概要の記事で紹介したフロー開発での問題をもう少し深掘りして解説します。

# フロー開発での問題
### [問題1] グローバル変数の衝突
Node-REDは、複数のノードの間で値を共有できるコンテキスト機能を備えています。これは一般的なプログラミング言語ではグローバル変数と呼ばれる機能です。このコンテキストを利用する際、フロー開発者は変数名が重複しないよう、慎重に

元記事を表示

JavaScriptとCSSで実装するレスポンシブハンバーガーメニュー

この記事では、JavaScriptの`classList`と`DOMTokenList`の概念を活用して、レスポンシブなハンバーガーメニューを実装する方法を解説します。ウェブサイトのナビゲーションをモバイルフレンドリーにするための重要なテクニックです。

![2024-02-2519-13-33-ezgif.com-video-to-gif-converter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479750/38478994-413a-f2b4-e9d5-d368f9c3cadc.gif)

## 基本概念の復習

前提として、[classList](file:///Users/hirakitakanori/Documents/Portfolio-vanila-Javascript/script.js#4%2C10-4%2C10)プロパティを使った動的なクラス操作について理解しておくことが重要です。`classList`は`DOMTokenList`インターフェイスのインスタンスを提供

元記事を表示

公式情報を見て Babylon.js の Skybox入門：最小限にしたコードを試したりテクスチャを変更したり

「まずは、Procedural Texture を Skybox に適用した見た目が作成できれば OK」という感じで、とりあえずで使っていた Skybox の情報をあらためて見ていければと思い、この記事を書きました。

## Skybox とは？
Skybox は、Babylon.js だけでなく Unity などにも出てくる仕組みです。
以下の Unity のマニュアルの説明を引用してみます ⇒ 「広大に広がる世界に見せるため、画面全体を覆うラッパーです。」

●スカイボックス – Unity マニュアル
　https://docs.unity3d.com/ja/2018.4/Manual/class-Skybox.html

以下の Babylon.js公式のドキュメントでは、以下のように説明されていました。

> A simulated sky can be added to a scene using a “skybox” ([wikipedia](https://en

元記事を表示

OTHERカテゴリの最新記事