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

Javascriptで簡易的にモーダルを実装してみる

## はじめに
現在Javascriptを学習中で、簡易的にモーダルを実装してみました。

## 実装
### HTML
“`html







　　　　
モーダルを開く

✖︎
<

【JavaScript】「…array」ってなんだ？？

## はじめに

ES2015で追加された、配列の前に出てくる`…`について整理してまとめます。

**`…`は実は2種類あります**。これが混乱の元です。
– Spread構文：配列を展開する
– Rest parameters： 配列をまとめる

## Spread構文

Spread（広げる）という名の通り、**配列を展開します**。

たとえば、配列`array1 = [1, 2, 3]`を`1, 2, 3`に展開できます。

“`javascript
const array1 = [1, 2, 3];

// そのまま
console.log(array1) // (3) [1, 2, 3]

// Spread構文で展開
console.log(…array1) // 1, 2, 3
“`

### 例1

Spread構文で配列を渡せば展開してくれます。

“`javascript
const add = (num1, num2, num3) => {
console.log(num1 + num2 + num3);
};

// Spread構文な

「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ

自分が観測していた中では、以下のポストが発端になっていると思われる話です。
この作品にインスパイアされた作品を作られた方も見かけていて、その作品や技術面のメモを残したく、記事を書きました。

Entangled #fxhash pic.twitter.com/SrD0oAQpUJ

— 𝕭𝖏ø𝖗𝖓 𝕾𝖙𝖆𝖆𝖑 (@_nonfigurativ_) November 22, 2023

## 技術的な部分について
「素敵な作品だなー！」と思って、も「し実装するとしたら必要そうなものは何か」と考えたら、「スクリーン内のブラウザのウィンドウの位置を取得する仕組み」と、「異なるページ間で情報をやりとりする仕組みがあれば良さそう」と思いました。

### ページ間の通信の仕組み
上記の 2つの技術のうち、「異なるページ間で情報をやりとりする仕組み」については、別端末間で IoT の仕組み（技術的には MQTT）を使って、こんな試作などをやったことがありました。

先日、 #p5js のプログラムにリアルタイム通信の仕組み（WebSocket、MQTT）を試しに組み込んだものを活用して、MacBook と iPad の間でのリアルタイム通信を試した！

MacBook のブラウザと iPad のブラウザの表示領域との間を、動く円が行き来するような表示がされるプログラムを書いてみた。 pic.twitter.com/DgHpIdBljF

— you (@youtoy) August 20, 2021

また、同じ端末内で同じブラウザのタブ間などであれば、自分が以下の記事で書いていた仕組みを使って

ReactのHooksを理解しよう：基本から応用まで

## 1. はじめに
ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するためのものです。HooksはReactのバージョン16.8から導入され、関数コンポーネントでステートやライフサイクルフィーチャーを使用できるようになりました。

## 2. React Hooksの基本
### 2.1 Hooksとは？
Hooksは関数コンポーネント内でReactのステートやライフサイクルフィーチャーを使用するためのAPIです。これにより、クラスコンポーネントを使用することなく、ステートやライフサイクルメソッドを利用することが可能となります。

### 2.2 useStateについて
useStateはステートを関数コンポーネントに追加するためのHookです。useStateはステートの現在の値と、その値を更新するための関数のペアを返します。

“`jsx:App.js
// Reactとその内部のuseStateフックをインポート
import React, { useState } from ‘react’;

// Appという名前

[JavaScript]Setオブジェクト

:::note
`Set`オブジェクトはプリミティブ値やオブジェクト参照を問わず、あらゆる型で多数の一意の値を格納することができる。
:::

#### `Set`オブジェクトの特徴
* 値のコレクション
* 重複する値は格納できない
* その要素について挿入順で反復処理を行うことができる
* 挿入順は、各要素が`add`メソッドで正常に挿入された順番に対応する
* `has`メソッドは、値が`Set`内にあるかどうかをチェックする

#### 関連メソッド
* `Set()`
* 新しい`Set`オブジェクトを生成する
* `size`メソッド
* `Set`オブジェクト内の値の数を返す
* `add`メソッド
* `Set`オブジェクト内に同じ値を持つ要素がまだ存在しなかった場合、指定した値を持つ新しい要素を`Set`オブジェクトに挿入
* `delete`メソッド
* `value`に関連した要素を取り除き、要素の削除に成功したかどうかを示す論理値を返す

参照

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

【Flask】 画像をファイルパスではなく画像データとしてJavaScriptに渡しブラウザに表示する方法

# はじめに
– Webブラウザ上に画像を表示したいとき、通常であればサーバーに保存した画像のファイルパスをフロントに渡すことで表示を行うかと思います。
– しかし、ファイルパスではなく画像そのものをフロントに渡してブラウザ上に表示したいことがあるかもしれません。（まあ、あんまりないですよね。僕はあったので書いているわけですが。）
– そこで今回は画像をファイルパスではなくデータとしてフロントに渡す方法を解説します。
– 具体的には、サーバーに保存した画像をFlaskでJavaScriptに渡し、HTMLに埋め込むまでの流れを説明します。

# 環境
バックエンド：Flask
フロント：JavaScript・HTML

# 手順
1. サーバーサイドに画像を用意
2. FlaskからJavaScriptに画像を渡す
3. JavaScriptで画像を受け取りHTMLで表示

## 1. サーバーサイドに画像を用意
– 何らかの方法で用意した画像ファイルが既にサーバーに保存されている前提で話を進めます。
– static/images こんな感じで画像フォルダがある想定です。

## 2

React18.2.0対応　JSX記法を丁寧に学ぶ　Hello World表示まで

# 目的
Reactを自己学習しています。「React最新バージョン18.2.0を学ばないと！」と思い、一通り一から復習をしています。最初の関門であるJSX記法についての自分への備忘録として記します。これも学んだ方がいい、こうした方がよいとうものがあればぜひコメントをお願いします。
# 画面に出力する方法
# root.renderに直書きしてHelloWorld!を表示させる
“`React
import { createRoot } from “react-dom/client”; //react-dom/clientからcreatRootをインポート(createRoot関数が利用可能となる)

const rootElement = document.getElementById(“root”); //index.htmlの

を取得しているイメージ
const root = createRoot(rootElement);//取得したルート要素を指定して新しいルートを作成、新しいルートが root 変数に格納される

root.ren

オブジェクト指向プログラミングの概要

## はじめに
この記事の目的は、オブジェクト指向プログラミングの概念をつかむこと。

オブジェクト指向は独立した概念ではなく、それまでのものを拡張して作られている。
そのためにまず、オブジェクト指向に至るまでのプログラミング言語の遷移を追う。
そして、オブジェクト指向を構成する3大要素を解説する。

## プログラミング言語の歴史
### 1. 始まりは機械語
　コンピュータは0と1しか理解できないため、
　2進数や8、16進数の機械語で書いていた。
“`:16進数
A10010
8B160210
01D0
A10410
“`
　上記は算術計算を実行する命令が書かれている。

### 2. プログラミング言語の登場
　初のプログラム言語のアセンブリ言語によって、
　コードを機械語に変換する処理(コンパイル)が必要になった。
“`:アセンブリ言語
MOV AX, X
MOV DX, Y
ADD AX, DX
MOV Z, AX
“`

### 3. 高級言語の発明
　コンピュータが理解する命令を1つずつ記述するのではなく、
　人間が見て分かり易いま

DynamoDBのCRUDコマンドについて

最近、業務でサーバレスアプリケーションを開発する際にDynamoDBをよく使うのですが、DynamoDBのCRUDコマンドがなかなか覚えられないので使い方をまとめてみました。
※今回の記事はAWS SDK for JavaScriptを使用する方向けです。

## 基本的なCRUDコマンド
### ScanCommand
– **用途**: テーブル全体をスキャンしてデータを検索する際に使用。
– **特徴**:
– 特定のキーを指定する必要はない。
– テーブル全体をスキャンするため、時間とリソースを多く消費する。
– フィルタを使用して結果を絞り込むことは可能だが、スキャン自体は全アイテムに対して行われる。
– パーティションキーの指定は不要。
– 並列スキャンの実行が可能
“`ts
const params = {
TableName: “TableName”,
FilterExpression: “AttributeName1 = :value1 AND AttributeName2 <= :value2", Express

React 配列をfilterとmapを併用

こうする

“`ts
{posts.filter((card,index) => index == turn).map( (post:any,index:number) => (

//処理

))}
“`

ドットで繋げばOK

Jest 入門1

## はじめに

こちらは新米エンジニアがJestのキャッチアップをするためのまとめノートです。
本編では、基本設定から簡単なテスト例(同期コード)の作成、非同期コードのテスト、mockとspyまで扱います。

## 基本設定

まずは、Jestをインストールします。

“`bash
npm install –save-dev jest
“`

次に、package.jsonファイルにテストスクリプトを追加します。これにより、npm testコマンドでJestを実行できるようになります。

“`json
“scripts”: {
“test”: “jest”
}
“`

以上の設定で、*.test.jsや*.spec.jsといった命名規則に従ったテストファイルを自動的に認識して実行します。

## 基本的なテスト例

### テストスイート

テストスイートは、関連する複数のテストケースをグループ化するために使用されます。
Jestでは、describeブロックを使用してテストスイートを作成します。

“`javascript
describe(‘Calculator

ChatGPTにアプリを作ってもらう１

# この記事について

自分用のwebアプリをChatGPT(3.5) に全部作ってもらおうとしている途中。重くなってきたのでセッション切替記念に、次のプロンプト。


以下、このプロンプトの結果。Qiita用に出力を再整形したこと以外は無編集。

—

# プログラミング冒険：中学生のための学びの旅

## 第1章: プロンプトの魔法
主人公はプログラミングの冒険に挑戦することになり、最初に待ち受けていたのはプロンプトの魔法だった。

### 1.1 不適切な質問とは？
主人公は最初、良い回答を得るためには質問の仕方が重要であることに気づきます。しかし、不適切なプロンプトを入力してしまい、思った通りの回答が得られないことに悩まされました。

“`
ユーザー: 「Firebase使って書籍アプリを作りたい！」
“`

このプロンプトではFi

Google Form連携

## はじめに
Webサイトで必要となる機会が多いFormですが、バックエンドを実装するのは面倒です。
Google Formを使うと便利ですが、デザインはサイトにマッチしないでしょう。
デザインはHTML, CSSで作成し、裏側をGoogle Formで作成することができます。

同じような内容の記事は複数存在しますが、 jQueryが使われていたり、サクセスページがGoogleデフォルトのものもあります。
当記事では、バニラJSでGoogle Formにデータを送信する方法に注目し、JavaScriptの処理を公開します

## 構築方法
詳しい構築方法は他の記事やブログが写真付きで紹介してくれています。
そちらも参照してみてください
他記事で紹介されていないアドバイスを1つ加えると、3のnameを探す際に、google formに仮のデータを入れることで、検証ツールから探しやすくなります。また、formのactionを探す際にactionで探すのではなく

【Rails】Google mapのマーカー(ピン)をカスタマイズして遊んでみた

## はじめに
こんにちは。[kosukein38](https://twitter.com/kosukein38)です。
最近仕事でGoogle map API(`Maps JavaScript API`)を使っていました。
後学も兼ねて、マーカー(ピン📍)を色々カスタマイズして遊んでみました🥳
自分は”ピン”を立てるとかってよくいうのですが、公式に習って、本記事では”マーカー”と呼ぶことにします。
徐々にステップアップする感じで書いてみたので、良かったら参考にしていただけたら幸いです。

## この記事の対象者

– Google map API(`Maps JavaScript API`)を初めて触る方
– RailsアプリにGoogle mapを組み込んで、あれこれ情報を表示したい方

## 内容（この記事でやること、やらないこと）

### やること
– Google map API(`Maps JavaScript API`)をRailsに導入する
– 地図を描画する
– 地図にマーカーを立てる
– マーカーの見た目を変える
– マーカーに吹き出しをつける + マーカーク

forをforEachに変更するときに新しく知ったこと

# はじめに
forで書いたコードをレビューで「非同期の処理がないなら可読性向上のためにforEachの処理に変えたらどう？」とご指摘をいただいた時に新しく知ったことです。

# 修正したコード
“`js
// 修正前
for (let index = 0; index < docArr.length; index += 1) { console.log(docArr[index]); } ``` ```js // 修正後 docArr.forEach((doc, index) => {
console.log(docArr[index]);
});
“`
# 気付いたこと
#### ループ処理をスキップしたい時、forEachの中では`continue`の代わりに`return`を書くこと
ちなみに以下のような処理の違いがあります。
`return`は関数の中で使用され、関数の実行を終了します。
`continue`はループ内で使用され、そのイテレーションを終了し、次のイテレーションに進みます。

#### forEachは同期的な処理をしているため、非同期処理を

ブラウザで簡単画像リサイズ！Jimpライブラリの活用ガイド

JimpをWebアプリケーションで使用するための手順をまとめます。Jimpは純粋なJavaScriptで書かれた画像処理ライブラリで、Node.js環境だけでなくブラウザ環境でも使用できます。以下の手順では、ウェブページで画像をアップロードし、Jimpを使って画像を処理し、最終的な結果を表示する一連の流れを説明します。

# 1. Jimpのブラウザ版を読み込む
ウェブページにJimpのブラウザ版を読み込みます。CDNを介して簡単に追加できます。

“`html

“`

# 2. 画像アップロードのためのHTMLを準備する
ユーザーが画像をアップロードできるように、``タグを含むHTMLを用意します。

“`html

react✖️laravelでカレンダーを作成してみる

### はじめに

個人開発メモ📝
カレンダーページに予定を反映させる実装にチャレンジしてみたので、備忘録として残します。

### 参考サイト

今回参考にさせてもらったサイト

Laravel×ReactでつくるSPAスケジュールアプリ【③カレンダー表示】

カレンダービューの作成の考え方などとても参考になりました！

### 全体図

今回のざっくりとした設計全体図は⇩


### 実装内容

#### バックエンド側

“`app/Http/Controllers/ScheduleController.php

Reactを、ロジックとstyleを分離した構成にしてみる。（styled-components）

# タイトル
## Reactを、ロジックとstyleを分離した構成にしてみる。（styled-components）

## 目次
1. [開発環境](#開発環境)
2. [何故この記事を書こうと思ったのか](#何故この記事を書こうと思ったのか)
3. [ディレクトリの構成とサンプルコード](#ディレクトリの構成とサンプルコード)
4. [作成したコンポーネントを呼び出してみる&結果](#作成したコンポーネントを呼び出してみる&結果)
5. [作成したコンポーネントのstyleを呼び出したコンポーネントで変更してみる](#作成したコンポーネントのstyleを呼び出したコンポーネントで変更してみる)
6. [感想](#感想)

## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,
“styled-components”: “^6.1.0”

## 何故この記事を書こうと思ったのか。
これが正解！というディレクトリ構成がないreactにおいて、
ロジック部分とstyleをstyled-componentsを使っ

配列の基本

# 初学者の備忘録
初学者の備忘録です。今回は配列の基本編です。

## 配列
値がたくさん入る箱。変数がたくさん入る箱みたいなイメージでOK。
配列を作成するには決まり事があります。

・配列は[]で定義する
・,（カンマ）で区切ること

上記の二つの定義は大切なのでしっかり覚えておきましょう。

## 配列の基本
“`
let 変数名 = [値, 値１, 値２, 値3, ・・・]
console.log(変数名);
“`

上記のコードが基本形になります。変数名を定義してあげてから、今度は配列を定義してあげて[]と,（カンマ）を使用してあげることで配列ができます。値と書いてあるところに変数を入れることも可能です。

“`
let 変数１　= 値１
let 変数１　= 値2
let 変数１　= 値3

let 変数名 = [値, 変数１, 変数２, 変数3, ・・・]
console.log(変数名);
“`

上記のコードのような配列も可能。つまり基本さえ守れば変数でも値でも入ることができるということです。
ここに四則演算もつけることが可能です。

### 配列の要素を

標準入力

# 初学者の備忘録
初学者の備忘録です。今回は標準入力からデータを受け取れるコードを書いていきます。
ただ、機能はしますが理解はまだまだ及んでいないので未完成の記事となっています。ご了承ください。

## 標準入力
プログラムでデータが特に指定されていない場合に、標準的に利用するデータの入力元。つまりユーザがキーボードで入力した値を受け取ってなんらかの処理をプログラミングが実行するということ。

## 標準入力を受け取るコード
“`ruby:標準入力

process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
// push=最後に出力
lines.push(line);
});
reader.on(‘