JavaScript関連のことを調べてみた2023年07月30日

【React】デフォルトで生成されるファイルの単体テスト内容をまとめてみた。

# 背景
Reactでの開発において、単体テストのやり方をアウトプットとしてまとめました。
規模間の大きなReactでの開発になるにつれ、単体テストのコードを作成する必要性が大きくなってくると思います。
また、テストコードを作成しないといけないのでめんどくさく思ってしまいますが、単体テストを実施する事で後々の作業も楽になると考えています。

# 環境構築

### ■ React version：react@18.2.0

次のコマンドで開発するReactのひな形フォルダを作成します。
フォルダの作成が完了したら`cd`コマンドでそのフォルダに移動します。
“`
npx create-react-app sampletest
“`

# デフォルトで作成されているファイルについて

## ■ setupTests.js

作成されたひな形のうち、`setupTests.js`ファイルには以下の記述があり、デフォルトでテストに使用するライブラリがインポートされています。

“`javascript:setupTests.js
import ‘@testing-library/je

変数更新によるレイアウト反映のやり方

## やりたいこと
ボタンを押下したら、変数を更新させて、更新された変数に合わせて画面を反映させる（useStateは使わない(!?)）

## useState使いたくなかった理由
useStateを使うと、再レンダリングされてしまう為、上位コンポーネントの再レンダリングをした場合、再レンダリングする必要がない下位コンポーネントまでレンダリングされてしまうから、使いたくなかった

### 処理イメージ

## 結果：無理
正確には、propsに渡して再レンダリングさせれば可能ではあるが、今回やりたいことではなかった為、ノーカン

やっぱりsetStateで再レンダリングさせる必要がある

失敗したソースコード
“`javascript:App.tsx
function App(){
const v = [];
for(let i=

Twitter（X）で自動でいいねするコンソールスクリプト

仕様上あんまり使う機会は無いと思うけど、こんなこともできるよっていうコンソールスクリプトの例です。
## Twitterで自動いいねするjavascript
“`javascript
// data-testid=”like” を持つ要素を取得
const likeButton = document.querySelector(‘[data-testid=”like”]’);

// もし要素が見つかった場合は、クリックする
if (likeButton) {
likeButton.click();
} else {
console.log(“要素が見つかりませんでした。”);
}
“`
一番初めの投稿に対して1回「いいね」します。
## ワンライナー
“`javascript
document.querySelector(‘[data-testid=”like”]’).click();
“`
## 10回自動いいねする
“`Javascript
for (let i = 0; i < 10; i++) { document.querySelector('[data-

スプレッド構文とレスト構文の違いをマリオで考えてみた

4月からエンジニアとして働き始めたので、学びを備忘録としてまとめます（第一弾）

記念すべき第一弾は
【スプレッド構文】と【レスト構文】の違い
です！！

`…`　のやつですね。
見た目が同じで一見ややこしい子です。(~_~;)

そこで、両者の違いを”マリオ”で考えたら理解しやすかったので、書き記します?

## 結論：スプレッド構文とレスト構文の違い

結論として、違いはざっくり以下の感じです。

| 種類| イメージ |
|:-:|:-:|
| スプレッド構文 | 広げる |
| レスト構文 | 集める |

スプレッド構文とレスト構文の表記 (`…`)は似ていますが、異なる目的と場面で使用されています。

## マリオのキャラクターを使って理解してみる

まず、マリオのキャラクターチームがあるとします。

“`javascript:javascript
const marioTeam = [“マリオ”, “ルイージ”, “ピーチ”];
“`

### スプレッド構文 (`…`)

スプレッド構文は、配列またはオブジェクトを個々の要素やプロパティに「広げ

7/29 プログラミング5日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
—
昨日のif文とswitch文について学びました
▫️復習
▫️昨日知らなかった論理積演算子について使う

・if文
—
“`
let a = 20;
if(a >= 30) {
console.log(“30以上である場合true”);
} else {
console.log(“30以下である場合false”);
}
// 30以下である場合false
“`
変数 a が30より大きいかチェックする
変数 a の値が 30以上である場合に真(true)になる
変数 a の値が 30以下である場合に偽(false)になる
今回で言うと変数のところが20であるため「30以下である場合false」と表示される。

・else if文
—

“`
let b = 100;
if(b >= 100) {
console.log(“100が表示されました”);
} else if(b >= 90) {
console.log(“90が表示

【Rails7】リロードしないとJavaScriptが動かないんだけど、どした？エラー？

# 開発環境
Ruby 3.2.2
Ruby on Rails 7.0.5


# はじめに

最近、Rails７でチャットアプリを開発しているのですが、チャットルームにページ遷移してメッセージを投稿しようとすると、投稿できない:fearful:
しかし、ページをリロードしてからメッセージを投稿すると、投稿できる。
サーバーサイド側を確認しにいっても間違ってそうなところはないし、、、、
調べていると、メッセージ送信時にイベントが発火するようにJavaScriptを組んでいるのにそれが発火していない模様。

エラー原因がわかり、同じような現象のエラー解決の記事の通り実行するも動作せず、、、
ググっていると以下のようなJavaScriptのコードを`Turbolinks`のイベントで囲む対策法が多かったです。
“`javascript:Java

【JavaScript】async/awaitとaxios、非同期通信について

# axiosとは
HTTP通信(データの更新・取得)など、HTTPリクエストのやり取りを簡単に行うことができる、JavaScriptのライブラリです。Node.jsで記述されています。APIを提供するクラウドサービスに対して、データを送受信することができます。

非同期にHTTPメソッド(GET・POST・PUT・DELETE通信など)を取り扱えます。

# 非同期処理とは

時間の掛かる処理の結果を待たずにすぐ次の処理を実行できる仕組みです。Promiseを使うと簡単に実現できます。

Promiseとは、非同期処理の状態を監視するためのオブジェクトで、非同期処理を同期処理のように扱える書き方です。

# 使う場面

JSONデータを提供しているAPIと接続して、データを取得することが多いです。

Webの場合、サーバーの中で外部にデータを提供している機能(またはそｎページ)のことをAPIとよびます。

# async/awaitとは

async/awaitを使うことによって、Promiseによる非同期処理をより簡潔に記述することができます。

Promiseのコードはthenを

React関数命名:「on」と「handle」の理解と適切な使い方

Reactを使っていると、「on」と「handle」の接頭辞を持つ関数をよく見かけると思います。でも、これらの接頭辞がなぜよく使われ、どのように使い分けられるのか、混乱している方も多いのではないでしょうか。今回は、これらの接頭辞がどのような意味を持ち、どのように使うべきかを詳しく解説します。

## 目次

– [onとhandleの基本的な使い方](#onとhandleの基本的な使い方)
– [イベントハンドラの作成](#イベントハンドラの作成)
– [onとhandleの適切な使い方](#onとhandleの適切な使い方)

## onとhandleの基本的な使い方

まず基本から説明します。一般的に、「on」で始まる関数名は、何らかのイベントが発生したときに発火することを示しています。また、「handle」で始まる関数名は、具体的なアクションを行う関数を指します。

例えば、ReactのonClickイベントハンドラは、クリックイベントが発生したときに発火する関数です。以下の例を見てみましょう。

“`jsx
Cli

【読み物】StandFM #032（後編） より「MINT体験は、特別なもの。2071年に思いを込めたNFT」

この記事は、ドーナツ部長のホールナイトニッポン[「#032 NFT ART TOKYOの振り返りと、私にとっての「NFTとは？」」](https://stand.fm/episodes/647cb6018e80262569439a53)の内容を、自動化ツールを組み合わせてテキスト化したものです。テキスト化に際して、一部言い回しのカットや、文末の変更と要約を行っています。

### イントロダクション
私は常々、特別なMINT体験を提供したい、そう考えていました。なぜなら「NFTのMINTというのは本来、特別な体験であり、MINTする前と後では自分の中の何かが変化するはず」、そう考えているからです。NFT ART TOKYO 3rdの会場では、そうした特別な体験を実験的に行う予定でした。今回は、「#032」の放送回の後編を抜粋して、お届けします。

### 本編①「ドーナツの穴からMINTできる、変わったMINT体験を」
実はですね、NFT ART TOKYO 3rdでは、結構大きなドーナツのモニュメントを設置する予定でした。その「ドーナツの穴」の部分に、NFCタグが仕込まれているんで

未来を切り開く！JavaScript API 5選：初心者向けガイド

こんにちは！今回はあまり知られていないけれど、とてもパワフルで未来のウェブ開発に役立つJavaScript APIを5つ紹介したいと思います。それぞれのAPIの詳細な説明と、実際の使い方を見せるサンプルコードを提供します。早速見ていきましょう！

### 目次
1. [画面内に入ったら通知：Intersection Observer API](#1-画面内に入ったら通知intersection-observer-api)
2. [サイズ変更を感知：Resize Observer API](#2-サイズ変更を感知resize-observer-api)
3. [ユーザーの位置を取得：Geolocation API](#3-ユーザーの位置を取得geolocation-api)
4. [音声とテキストの変換：Web Speech API](#4-音声とテキストの変換web-speech-api)
5. [ウェブ上の決済を簡素化：Payment Request API](#5-ウェブ上の決済を簡素化payment-request-api)

## 1. 画面内に入ったら通知：Interse

フロントエンド初心者が家計簿Webアプリを作ってみた【Vue.js+MySQL】

# はじめに
フロントエンド周りの勉強のために家計簿のWebアプリを作ってみました。
ついでにコンテナの理解を深めたくて、アプリをコンテナ上に配置してみました。

MoneyFoward等の人気アプリほど高度の機能性ではありませんが、この自作のアプリで日々の収支を管理しています。一つの教材として参考いただければ幸いです。

# ソースコード
https://github.com/Ayoan/Oeconomica

# 主な参考サイト
アプリを載せる基盤部分（コンテナ）はこちらの記事を参考に構築しました。

https://qiita.com/niisan1ban/items/f70eb0ed891568f71f9b#vue%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AE%E6%BA%96%E5%82%99

家計簿は以下の講座で作成したのを雛形に、好きな機能を追加していきました。
といってもロジックのコード実装はほぼオリジナルで、HTMLとCSS(見た目部分)だけ流用させてもらったという形です。

https://www.techpit.jp/

初心者でも分かる！JavaScriptのgetElementByIdとReactのuseRefの違いと使い分け方

# はじめに

HTML要素を操作するための手法として、JavaScriptの`getElementById`やReactの`useRef`が頻繁に使用されます。しかし、これらの手法はどのように異なり、どのように使い分けるべきなのでしょうか。今回は、初心者でも理解できるように`getElementById`と`useRef`の違いについて解説します。

## getElementByIdとは

`getElementById`はJavaScriptの基本的な関数で、特定のID属性を持つHTML要素を取得するために使用されます。

以下に、HTML要素からテキスト内容を取得するシンプルな例を示します。

“`html

こんにちは、世界！

“`

“`javascript
let div = document.getElementById(‘myDiv’);
console.log(div.textContent); // “こんにちは、世界！”が表示されます。
“`

このコードでは、`getElementById`関数を使用してI

React-hook-formとEmailJSで簡単にメールが送れるフォームを作ってみた

## 概要
個人開発の[QuickURL](https://quick-url-b0462.web.app/)を作っている時に、なるべく簡単に送れるフィードバックのフォームを作ろうと考え、「利用者さんがテキストエリアに入力して送信するだけで僕のメールに文章が届く」仕組みを作りました✨

今回はReact-hook-formとEmailJSを使用します

自分も初心者なので、なるべくわかりやすく書きました?
順番に読んでいただければ使い方が分かるはずです！
## React-hook-formでフォーム作成
この機能を作る際はReact-hook-formで入力フォームを作成し、EmailJSで送信機能を作成します
まずはReact-hook-formでフォームを書いていきます

### ①準備
“`bash
// npmの場合
npm install react-hook-form

// yarnの場合
yarn add react-hook-form
“`
最初にreact-hook-formをインストールして…
“`jsx
import { useForm } from “

Firebaseで新着順に並び替えたり数値やデータでフィルタリングしたりする方法

## 概要
個人開発でFirebaseを使っていた際に新着順に並び替える必要があり、ドキュメントで何とか理解したが分かりにくかったのでまとめます✨

自分が初心者だからこそ、初心者に伝わりやすい記事を書けるかなと思っています

(もし気が向いたら、今回作った個人開発の[QuickURL](https://quick-url-b0462.web.app/)もチェックしてみてください?)
## 並び替えの方法
まず前提としてFirebaseにおいては受信したデータを並び替えるのではなく、先に並び替えたリクエストのqueryを作成してから受信します
“`js
const sampleRef = collection(db, “sampleCollection”);
“`

まずはこのようにしてコレクションをしていしたRefを作成します
この時点で特定のDB内の特定のコレクションを参照しています

—

普通はこのままこのコレクションからデータを受信するのですが、並べ替えが必要な場合は受信前にqueryというものを作成して並べ替えをするそうです

実際にこの形の一例として公式ドキュメン

PDF・HTML出力機能を備えたマークダウンエディタを作成していましたので公開して紹介します

# McGwire Markdownを紹介します

この度、私がこれまでプライベートで開発し、使用してきたElectron製デスクトップアプリケーションのマークダウンエディタ、「**McGwire Markdown**」をOSSとして公開しました。


https://github.com/itsuki-maru/McGwire-Markdown

私はとある団体の内部SEとして活動しています。**業務ツールの作成からインフラの保守、Webアプリケーションの開発、トラックの運転**まで、幅広い仕事を一手に引き受けています。

私がよく使うスキルセットは**PythonのFastAPIをバックエンドに、Vue3+TypeScriptをフロントエンドに使ったSPA開発**です。この組み合わせを使って、社内Wikiの開発などを行ってきました

【Rails】Turbolinksとはざっくりと何ですか？注意すべき点は？

# 前提条件
この記事は、Rails６までの内容で以下のようにデフォルトで`Turbolinks`がGemfileに含まれていることを想定しています。
“`:Gemfile（Rails6）
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem ‘turbolinks’, ‘~> 5’
“`

Rails7では、`Turbolinks`に代わりデフォルトで`turbo-rails`というgemが用意されており、以下の記事内容は当てはまらないと思われますのでご注意ください。
“`:Gemfile（Rails7）
# Hotwire’s SPA-like page accelerator [https://turbo.hotwired.dev]
gem “turbo-rails”
“`

# はじめに

最近、Railsでチャットアプリを開発しているのですが、開発中にエラーが出て原因を調べていたら、どうやら`T

ルーティングのnamespaceとは？？

Ruby on Railsを使ってアプリケーションを開発していると、namespaceという単語を耳にすることが多くあります。ここでは、特にルーティングのコンテキストでのnamespaceについて説明します。

# namespaceとは何か？
`namespace`とは、ルーティングを一定の範囲（名前空間）でグループ化するための方法です。これにより、同じコントローラー名やアクション名を異なる範囲で使い分けることができます。

##### `namespace`の基本的な使用法
例えば、管理者向けのページを作成する際には、namespaceを用いてadminという名前空間を作成します。
“`ruby :routes.rb
namespace :admin do
resources :users
end
“`

上記のようにルーティングを設定すると、`Admin::UsersController`が作成され、その中にあるアクションへのルーティングが設定されます。また、ビューも`app/views/admin/users`ディレクトリの下に作成します。

#### namespac

Django & JavaScriptで非同期通信のアプリを作る

PythonとDjangoを使って簡単なWebアプリケーションを作ってみます。
また非同期通信の練習として、以下の要件を満たしたものにします。

・バナーとテキストを用意して、バナーをクリックしたら画面のリロードが走らずにテキストと画像が書き換わるシンプルなプログラム

一般的なノベルゲームをイメージするとわかりやすいです。

最終的なディレクトリ構成は以下になります。
“`
ajax_practice
├── myapp
│ ├── …
├── db.sqlite3
├── manage.py
├── myproject
│ ├── …
├── ajax
│ └── …
├── static
│ └── css
│ └── style.css
│ └── images
│ ├── default_image.jpg
│ └── new_image.jpg
│ └── js
│ └── script.js
├── templates
│ └── index.html
└── requireme

WordPress REST API を使用して WordPressに記事を投稿する(JavaScript)

**headers**

– アプリケーションパスワードはwordpress管理画面のuserページより取得可能
“`
const headers = {
“Content-Type”: “application/json”,
Authorization:
“Basic ” + Buffer.from(`${wordpressのユーザーネーム}:${wordpressのアプリケーションパスワード}`).toString(“base64”),
};
“`

**url**

“`
const url = `${wordpressのURL}/wp-json/wp/v2/posts`;
“`

**articleData(投稿内容)**

– 公開ステータスは以下
– publish（公開）
– future（公開予約）
– draft（下書き）
– pending（非公開）
– private（限定公開）

“`
const articleData = {
ti

React,Javaアプリケーションでカレンダー機能実装

# 最初に
今回の記事は[React + SpringBootアプリ　簡易まとめ](https://qiita.com/Sesoniso/items/3c1beb243a093d80e247)の記事の続きで旅行予約管理アプリケーションの**カレンダー機能実装**についてまとめようと思います。
カレンダー機能実装にはReactのReact Datepickerを使用し、[こちら](https://reactdatepicker.com/)のサイトを参考にして実装しました。

本記事の完成画面

# 1.　サンプルコード
“`js
import axios from “axios”;
import React, { useEffect, useState } from “react”;
import ReactDatePicker from “r