f@ctor

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

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

Websocketで、異空間通信。その4

# 概要
メタバースを使った、ライントレースシュミレーターを提供します。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c5c30b22-4097-cf55-3ea2-8ad88bea0ef3.png)

# 詳細
エージェント（ローバー）が環境で、ライントレースするシュミレータを作り、結果をwebsocketに出力、neosvrで受け取り、ＢＯＸを移動させる。
websocketサーバーは、elixirで準備します。
エージェントと環境は、Plunkerで提供します。
設定は、ローバーが、ライントレースを続けるシュミレーターです。

“`
var Agent = function() {
this.act = 2;
};
Agent.prototype.get_action = function(observation, reward, done) {
var res = this.act;
if (observation[3] < 100) {

元記事を表示

【React】ルートコンポーネントファイルとは

# ルートコンポーネントファイルとは
Reactのルートコンポーネントファイルは、通常、Reactアプリケーションのエントリーポイントとして機能します。これは、アプリケーション全体のメインコンポーネントであり、他のすべてのコンポーネントを含む階層構造のトップレベルです。通常、このファイルは `index.js` または `App.js` のような名前を持ちます。

ルートコンポーネントファイルは、次のような役割を果たします。

1\. **アプリケーションのエントリーポイント** : ブラウザーがReactアプリケーションを読み込むときに最初にロードされるファイルです。

2\. **ルーティングの設定** : Reactルーターを使用して、アプリケーション内の異なるURLパスに対して異なるコンポーネントを表示します。

3\. **グローバルステートの管理** : 必要に応じて、グローバルステートのコンテキストや状態管理ライブラリを初期化し、アプリケーション全体で共有するデータを管理します。

4\. **レイアウトの定義** : アプリケーション全体のレイアウト構造を定義し、ヘッダ

元記事を表示

【React】デフォルトエクスポートとは

# デフォルトエクスポートとは
Reactのデフォルトエクスポート（export default）は、モジュールから1つだけエクスポートする方法です。モジュール内で1つのコンポーネントや関数、クラス、またはオブジェクトをデフォルトとしてエクスポートすることができます。このようにエクスポートされた要素は、インポート時に名前を変更することなく利用できます。

# 使用方法
例えば、以下のようにReactコンポーネントをデフォルトエクスポートすることができます。
“`jsx
// MyComponent.js

import React from ‘react’;

function MyComponent() {
return

Hello, World!

;
}

export default MyComponent;
“`

この場合、`MyComponent`はデフォルトエクスポートされており、他のファイルでインポートする際には以下のように書くことができます。
“`jsx
import MyComponent from ‘./MyComponent.js’

元記事を表示

【React】export と export default の違い

# export と export default の違い
Reactコンポーネントをエクスポートする場合、`export`と`export default`の2つの方法があります。これらの違いは以下の通りです。

1\. **export** : export文は、コンポーネントを名前付きエクスポートします。名前付きエクスポートを行うため、インポートする際には波括弧 {} を使用して、エクスポートされたコンポーネントの名前を指定する必要があります。
“`jsx
// MyComponent.js
export const MyComponent = () => {
return

Hello, World!

;
};
“`
“`jsx
// 別のファイルでのインポート
import { MyComponent } from ‘./MyComponent’;
“`

2\. **export default** : `export default`文は、コンポーネントをデフォルトエクスポートします。デフォルトエクスポートされたコンポーネントは、インポートす

元記事を表示

【React】Gatsbyとは

# Gatsbyとは
Gatsbyは、Reactベースの静的サイトジェネレーター（SSG）およびフレームワークです。Gatsbyを使用すると、高速でセキュアなウェブサイトやウェブアプリケーションを構築することができます。以下に、Gatsbyの特徴と機能の概要を示します。

# 特徴
1\. **Reactベース** : GatsbyはReactをベースにしており、Reactのコンポーネントベースの開発パターンを使用してウェブサイトやアプリケーションを構築できます。

2\. **静的サイトジェネレーター** : Gatsbyは静的サイトジェネレーターとして動作し、ビルド時にすべてのページをHTML、CSS、JavaScriptにプリレンダリングします。これにより、高速な読み込み速度とSEOの向上が実現されます。

3\. **GraphQL**: GatsbyはGraphQLを使用してデータをクエリすることができます。データソースからのデータを取得し、コンテンツを管理することができます。さまざまなデータソース（Markdownファイル、API、データベースなど）からデータを取得できます

元記事を表示

【React】Remixとは

# Remixとは
Remixは、ウェブアプリケーションを構築するためのフレームワークであり、サーバーサイドレンダリングやクライアントサイドレンダリングなどの技術を組み合わせて、高速でパフォーマンスの高いアプリケーションを作成することを可能にします。Remixは、Reactをベースにしたアプリケーションの開発に焦点を当てています。

# 特徴
Remixの主な特徴は次のとおりです。

1\. **サーバーサイドレンダリングとクライアントサイドレンダリングのハイブリッドアプローチ** : Remixは、サーバーサイドでの初回のレンダリングと、クライアントサイドでのインタラクティブな操作におけるレンダリングの両方をサポートしています。これにより、高速な初期読み込みと滑らかなユーザーエクスペリエンスを実現します。

2\. **ルーティング** : Remixは、簡潔で柔軟なルーティングシステムを提供し、ネストされたルーティングやパラメータ付きルーティングなどをサポートしています。

3\. **データローディング** : ルートコンポーネント内でデータのフェッチやプリロードを行うための統一

元記事を表示

【React】複数のstateの同時更新

# 複数のstateの同時更新
Reactで複数の状態（state）を同時に更新するには、`useState`フックの代わりに`useReducer`フックを使用することがあります。`useReducer`フックは、複雑な状態ロジックを持つコンポーネントや、複数の状態をまとめて管理したい場合に便利です。

# 使用方法
以下は、`useReducer`フックを使用して複数の状態を同時に更新する方法の例です。
“`jsx
import React, { useReducer } from ‘react’;

// 初期状態
const initialState = {
count: 0,
text: ”
};

// reducer関数
const reducer = (state, action) => {
switch (action.type) {
case ‘increment’:
return { …state, count: state.count + 1 };
case ‘decrement’:
return {

元記事を表示

【React】入力値の取得

# 入力値の取得
Reactで入力値を取得するためには、通常はコンポーネントの状態（state）を使用します。入力フィールド（input要素など）にユーザーが入力した値は、コンポーネントの状態に格納され、必要に応じて取得や更新が行われます。

# 使用方法
以下は、Reactで入力値を取得する基本的な方法の例です。
“`jsx
import React, { useState } from ‘react’;

function MyForm() {
// 入力値を格納する状態を初期化する
const [inputValue, setInputValue] = useState(”);

// 入力値が変更されたときに呼ばれるハンドラー関数
const handleInputChange = (event) => {
// 入力値を更新する
setInputValue(event.target.value);
};

// フォームが送信されたときに呼ばれるハンドラー関数
const handleSubmit = (event) => {

元記事を表示

【jQuery】ユーザー作成時の初期画像の設定

# 手順
jQueryを使用してユーザーの初期画像を設定する場合、一般的な手法は次のとおりです。

1\. **画像の選択** : ユーザーがプロフィール画像をアップロードするフォームを提供します。ユーザーが画像を選択しなかった場合やアップロードが完了するまでの間、デフォルトの初期画像を表示する必要があります。

2\. **初期画像の表示** : ページがロードされたときやユーザーが画像を選択しなかった場合に、初期画像を表示します。これはHTMLの``要素を使用して実現できます。
“`html
Profile Image
“`

3\. **ユーザーが画像を選択したときの処理** : jQueryを使用して、ユーザーが画像を選択したときに初期画像を置き換える処理を実装します。
“`js
$(‘#file-input’).change(function() {
var file = $(this)[0].files[0];
var reader = ne

元記事を表示

【Next.js】Canonical Tag

# Canonical Tagとは
Canonicalタグは、検索エンジン最適化（SEO）のために使用されるHTMLのメタタグの1つです。Canonicalタグは、複数の同一または類似したコンテンツがある場合に、そのコンテンツの正規な（主要な）バージョンを指定するために使用されます。これにより、検索エンジンは重複したコンテンツを適切に認識し、インデックスする際に問題が生じるのを防ぎます。

# 使用方法
Next.jsのCanonicalタグは、ページの``セクション内に追加されます。以下は、Next.jsでCanonicalタグを設定する方法の例です。
“`js
// pages/some-page.js

import Head from ‘next/head’;

function SomePage() {
return (


Some Page 【Next.js】APIルートとは

# APIルートとは
Next.jsのAPIルートは、Next.jsアプリケーション内でサーバーレスのAPIエンドポイントを定義するための特別なディレクトリです。このディレクトリ内のファイルは、サーバーサイドで実行されるAPIエンドポイントとして機能し、クライアントからのリクエストに対してデータを返すことができます。

通常、APIルートは`/pages/api`ディレクトリに配置されます。このディレクトリ内の各ファイルは、HTTPリクエストに対応するAPIエンドポイントを表します。たとえば、`/pages/api/users.js`ファイルは`/api/users`パスに対応し、ユーザーに関するデータを返すAPIエンドポイントとして機能します。

APIルートのファイルは、通常のReactコンポーネントとは異なり、以下のルールに従う必要があります。

1\. ファイルのエクスポートは、APIエンドポイントのハンドラー関数である必要があります。この関数は、リクエストオブジェクトとレスポンスオブジェクトを受け取り、データを返す役割を果たします。

2\. APIルートのファイルは、サーバ

元記事を表示

【Next.js】PostCSS 構成のカスタマイズ

# PostCSS 構成のカスタマイズ
PostCSSの構成をカスタマイズするには、通常はプロジェクトのルートにある`postcss.config.js`ファイルを編集します。このファイルには、PostCSSプラグインやオプションを定義することができます。以下は、基本的な`postcss.config.js`ファイルの例です。
“`js
module.exports = {
plugins: [
require(‘autoprefixer’), // ベンダープレフィックスを自動的に追加する
require(‘cssnano’)({ preset: ‘default’ }) // CSSを圧縮する
]
}
“`

この例では、`autoprefixer`プラグインがベンダープレフィックスを自動的に追加し、`cssnano`プラグインがCSSを圧縮します。PostCSSのプラグインは`require`関数を使用して読み込まれ、`plugins`配列に追加されます。

プラグインを追加するだけでなく、PostCSSのオプションを設定することもできます。たとえば、

元記事を表示

【Next.js】SWRとは

# SWRとは
Next.jsのSWR（Stale-While-Revalidate）は、データ取得のためのReactフックであり、リアルタイムなデータの取得とキャッシュ管理を簡素化するために設計されています。SWRは、データのキャッシュを使用してコンポーネントのレンダリングを最適化し、非同期データの再取得を制御します。

# 特徴
SWRの主な特徴は次のとおりです：

1\. **キャッシュとリフレッシュ** : SWRは、データをキャッシュし、必要に応じて自動的に再取得します。キャッシュされたデータは即座に使用され、同時にバックグラウンドで最新のデータをフェッチし、キャッシュを更新します。

2\. **リアルタイムデータの取得** : SWRは、リアルタイムでデータを取得するためにWebSocketなどのリアルタイム通信プロトコルをサポートします。これにより、サーバー側でデータが更新されると、クライアント側のキャッシュが自動的に更新されます。

3\. **フォールバックとエラーハンドリング** : データの取得中にエラーが発生した場合、SWRは自動的にエラーを処理し、フォールバ

元記事を表示

【Next.js】ユーティリティ関数とは

# ユーティリティ関数とは
Next.jsのユーティリティ関数とは、Next.jsアプリケーションの開発やビルドプロセスを効率化するために使用される関数のことです。これらの関数は、一般的なタスクを自動化したり、コードの再利用性を高めたりするのに役立ちます。

一般的なNext.jsのユーティリティ関数には、次のようなものがあります：

1\. **getStaticProps/getServerSideProps** : 静的生成ページやサーバーサイドレンダリングページで使用され、データを取得してページにpropsとして渡すための関数です。

2\. **getStaticPaths** : 動的なルーティングが定義されたページで使用され、ビルド時に生成されるパスのリストを定義するための関数です。

3\. **Link** : ナビゲーションやページ遷移を実現するためのコンポーネントです。内部的には、プリフェッチやプリレンダリングの機能が備わっています。

4\. **Image** : 画像の最適化とレンダリングを容易にするためのコンポーネントです。自動的に適切な画像サイズを選択し

元記事を表示

p5play での Chain Collider（vertex mode）のグループを作った衝突判定を試す：重力をかけた円との衝突でテスト

以下の記事の続きです。

●p5play で Chain Collider（vertex mode）のグループを作ってみる – Qiita
　https://qiita.com/youtoy/items/589dad3ac7af138f79b8

前回の記事では、p5play で図形などのグループを作る仕組みを使い、基本図形ではない Chain Collider（vertex mode）をグループ化するというのを試してみました。

そして前回の記事で進めた内容は、Chain Collider（vertex mode）をグループ化した後の処理までは試していない内容でした。そのため、今回はグループ化したものと別の図形との間で、以下の衝突判定を適用するというのをやってみます。

●p5play : Group ＞ Collisions and Overlaps
　https://p5play.org/learn/group.html?page=2

## 試した内容
まず、今回の内容を動かしている時の様子は、以下のとおりです。