JavaScript関連のことを調べてみた2022年08月29日

React + TypeScript: Apollo Clientで操作エラーを扱う

[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「[Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling)」にもとづく、操作エラーをどう扱ったらよいかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。

Apollo ClientがGraphQLサーバーで操作を

JSでObjectを代入したり、forEachする方法

## 概要
業務の中で受け取ったフォームのオブジェクトをパラメーターに入れたいときに代入が必要だったり、そのオブジェクトのvalueを抜き出したいというケースに遭遇するのでちょっと調べた。

## Object.assign
Object.assignはObjectAとObjectBをマージするのに使う。
“`javascript
Object.assign(fruits1, fruits2)
“`
大事なのは第二引数のObjectを第一引数のオブジェクトにマージするため同じ要素が含まれている場合は第二引数のObjectが優先されるという点。

実際にどのような動きをするのか見ていただきたい

“`javascript
const fruits1 = {
a: apple,
b: banana
}

const fruits2 = {
b: melon,
c: peach
}

newFruits = Object.assign(fruits1, fruits2)

console.log(fruits1) // {a: ‘apple’, b: ‘melon’,

javascript html内に反映する方法

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## 方法

### 1 html内に記述

“`

“`
と打つことで、その中にJS文を打ち込むことが出来る。

head内に打ち込むこともできて、htmlのプログラミング上、上から反映されるので、基本はhead内の終わりに打ち込む。

### 2 JSファイルを作成する

.jsのファイルを作成して記述する。

そうすることで、何度も同じ文を使えたり、HTMLファイルが無駄に長くなることがなくなる。

読み込む際は、headに、こんな感じで書く。

“`

“`

### 結論

ちょっとしたその場限りのコードは直接書き込む。

それ以外の文は、.jsファイルを作るのが良し

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しい

Java と JavaScript の違い(TypeScriptもあるよ！)

突然ですが皆さん、こう思ったことはありませんか？

**結局、Java と JavaScript の違いってなんなの？？**

人によって、ハムとハムスターだったり、そばと焼きそばだったりします。
(ついでにTypeScriptのことを「型焼きそば」と言ったり……)

でもそれって、ニュアンス的に正確じゃない気がします。
なので今回は、Java と JavaScript(ついでにTypeScript) の違いを適切に解説します!

一応、出来る限り正確に書きますが、間違いがあればコメントいただけると幸いです…

# Java と JavaScript の違い

### 使用用途

* Java
– 主にサーバサイドの言語。処理ロジックを担当することが多い。

* JavaScript
– 現状、どちらでも扱うことが出来る。[^1]
[^1]: サーバサイドでJavaScriptを扱うには、Node.js等が必要です

* TypeScript
– JavaScript 同様、現状はどちらでも扱うことが出来る。[^2]
[

Python,Ruby,PHP,Java,JavaScript,Perlの配列の比較

Python,Ruby,PHP,Java,JavaScript,Perlの配列の比較

# Python

https://qiita.com/gouwan/items/c83b47ce1b7c77cce7c5

# Ruby

https://qiita.com/may88seiji/items/ce9396a4c267a3d449ae

# PHP

https://qiita.com/tokutoku393/items/ea2a61765eda1dee8f2e

# Java

https://qiita.com/sentral1110728/items/532de46714b7215a2e99

# JavaScript

https://qiita.com/takeshisakuma/items/b23b1a748098f30e2ff2

# Perl

https://perlzemi.com/blog/20161012147627.html

【JavaScript】プレビュー機能の実装

# 【JavaScript】プレビュー機能の実装

###### 特徴
・画像を選択するとプレビュー画像が表示される
・画像は何度も選び直すことができプレビュー画像もその度変わる

## 手順
### ■HTML側の編集
#### ❶画像投稿ページのHTMLにプレビュー画像を表示するスペースを作成
“`

“`

### ■JavaScript側の編集
#### ❷preview.jsを作成して読み込むよう設定
app/javascriptの中にpreview.jsを作成
“`ruby:app/javascript/packs/application.js
require(“@rails/ujs”).start()
require(“@rails/activestorage”).start()
require(“channels”)
require(‘../preview’) // 追記する
“`
#### ❸preview.jsの編集
##### ①画像投稿ページのフォームを取得
##### ②今記述したプレビュー画像を表示

【React Native】Firebaseインストール後に/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:

# 環境

– Macbook Air 2020

“`jsx
“expo”: “~46.0.9”,
“firebase”: “^9.9.3”,
“react”: “18.0.0”,
“react-native”: “0.69.4”,
“`

# １．状況

ExpoでFirebaseをReact Nativeプロジェクトにインストール後、 ユーザー登録処理を実装した際にエラーが出る。

“`jsx:firebaseConfig.tsx
import { initializeApp } from “firebase/app”;
import { getAuth } from ‘firebase/auth’;

const firebaseConfig = {
apiKey: “xxxxxxxxxxxx”,
authDomain: “xxxxxxxxxxxx”,
projectId: “xxxxxxxxxxxx”,
storageBucket: “xxxxxxxxxxxx”,
messagingSenderId: “xxxxxxxxxxxx”

妻のLINEの移行に失敗したので復活させなければ……

## 経緯

妻がスマホを買い替えたので、LINEの移行を行うことになりました。安請け合いをして、適当にボタンをポチポチ……。LINEの移行に失敗し、全トークが消えてしまいました。こんな危険な作業はしっかりと手順書をつくり、実行者と確認者の2人を用意するべきではないでしょうか。

いろいろ解決策を考えてみましたが、どうにもならないようです。妻が深い深い溜息をつき、悲しそうにしていたのでなんとか復活させる方法を考えました。

## LINEのトーク履歴をWEBで表示するようにできる……かな？

妻のトークは消えてしまいましたが、その相手にはトークが残っています。どうやらそれをtext形式で保存する機能もあるようです。このtextをうまいことパースして、ラインのように表示することはできないかと考えました。

以下のようなテキストを拾うことができます。(妻とまだ結婚していない時期のラインです)

“`text
2020/12/7(月)
6:10 妻 おはよ
7:01 自分 おはよう
7:01 自分 好きやで
7:11 妻 起きたん
好きよ
7:11 自分 好き
7:11 自分 またね
7:

Viteを使っていて、devだと表示されるのにbuildすると表示されない……。Minified React error #130の解決方法

# 困ったこと

Viteでdevモードは問題なく表示されるのだが、buildすると画面が真っ白になり表示されない。

## 表示されているエラー

“`text
Minified React error #130
“`

## 対処法

最近追加したReactのModuleがあればそいつが犯人。とりあえず犯人を特定するために、そのコンポーネントだけ表示しないようにしてみましょう。今回、私の場合は“`react-scroll-wheel-handler“`というライブラリが原因でした。

こいつのインポートは

“`tsx
import ReactScrollWheelHandler from “react-scroll-wheel-handler”;
“`

こう書くとreadmeにも載っているのですが、実はこれだとviteはうまく動きません。

以下のように書くとうまく動きます。べつにWでもなんでもいいですがWheelのWにしてみました。TypeScriptで書いていると、defaultがありません的なエラーが出るかもしれません。出たらts-ignoreで無理やり消し

nextTick vs queueMicrotask vs Promise.resolve vs setTimeout

## はじめに

普段の開発でなかなかお目にかかることも使うことも滅多にない `queueMicrotask` について興味を持ったついでに、 `process.nextTick` や `Promise`, `setTimeout` などとの比較をしてみました。

## TL;DR

– 下記の優先度順でキューからタスクが取り出され処理される。
– `nextTick`
– `queueMicrotask`, `Promise.resolve`
– → Microtask
– `setTimeout`
– → Task (a.k.a. Macrotask)
– より具体的には、MicrotaskキューとTaskキューの2つのキューがあり、Microtaskキューが優先的に処理されるようになっている。
– Microtaskキューが空でない限りはTaskキューの中身を実行しない構造となっており、`queueMicrotask`, `Promise.resolve` では Microtaskキューにコールバックを追加し、`s

Jestのテーブル駆動テストの構文の仕組みを探る

# TL; DR

“`js:こんな書き方ができるのはなぜ？
test.each`
a | b | expected
${1} | ${1} | ${2}
${1} | ${2} | ${3}
${2} | ${1} | ${3}
`(‘returns $expected when $a is added $b’, ({a, b, expected}) => {
expect(a + b).toBe(expected);
});
“`

（コードは https://jestjs.io/ja/docs/api#%EF%BC%92-testeachtablename-fn-timeout より引用）

– テンプレートリテラルでテストケースを記述できるのは、JavaScriptの [タグ付きテンプレート](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)の構文を使用しているため
– 関数内では、正規表現でテンプレートリテラルをパースし変数とデ

JavaScriptで非重複な配列・オブジェクト配列を作るって話

非重複な配列って、たまに必要になりますよね。
しかも、すぐ忘れる。

てなわけで、今回は『プリミティブ配列』と『オブジェクト配列』の場合の２パターンを実装していきます！

:::note warn
プリミティブ配列って言ってみたけど ”数値や文字列の配列” です。
オブジェクト配列って言ってみたけど ”オブジェクトの配列” です。
※意味合ってんのか？?
:::

## まずは完成系のコード

“`js:数値や文字列（プリミティブ）の場合
const data = [ 1, 3, 5, 3, 2, 4, 1, 4 ];

// 非重複の配列を生成
const setObject = new Set(data);
const result = [ …setObject ];

// 出力：[ 1, 3, 5, 2, 4 ];
console.log(result)
“`

“`js:オブジェクトの場合
const data = [
{ id: 1, name: ‘キリン’ },
{ id: 2, name: ‘アサヒ’ },
{ id: 1, name: ‘キリン’

新人エンジニアが先輩に言われたこと4つ

## 1.はじめに

今回は技術的な内容というより、**「入社してからこれまでで言われたことを振り返ってみよう」** という記事になります。

**「現場でこういうこと言われている人がいるんだな～」** と読み物感覚で読んでいただけると幸いです。

## 2.自己紹介

– 未経験で4月に入社しました。実務経験5ヶ月目のバックエンドエンジニアです。
– 自社サービスのシステムの不具合改修や、機能追加が業務内容です。

研修はなく、教育係の先輩や上司を中心に、都度教えて頂きながら業務に携わっています。

## 3.今回の「先輩」とは

別支店にいる教育係の先輩です。

チャットやWebミーティングで質問したり、コードのチェックをして頂いています。

## 4.先輩に言われたこと4つ

### ①コードのルールを守ろう

「自分でコードが書けた」と思ったら変更前後のファイルを先輩に送っています。

JavaScriptの実装で以前、こういうことがありました。

functionの呼び出しをしているわけですが、今回の場合だと`sample( id );`と本当は最後にセミコロンが必

人事のおじさんプログラミングを学ぶ Day8「while文～回数の決まっていない繰り返し」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
While文を使って回数の決まっていない繰り返しのプログラムを書いてみた。

JavaScriptとTypeScriptの違い

まえがき
　SEとしての新人研修の中でTypeScriptについて学んだので忘れないためのメモ書きです。「TypeScript」を学ぶつもりなのに、講師やサイト、教本でJavaScriptについて触れることも多く、ごっちゃになることがあるので整理したいと思う。

JavaScriptとTypeScriptの同じこと
　どちらも言語の特徴として、インタプリタ型であること。
・インタプリタ型とは…
コードを1行1行ごとに実行するプログラミング言語。プログラムの実行速度よりも効率性や柔軟にコードを書いていくことに重きを置かれている。動的言語、軽量級言語、スクリプト系言語と呼ばれることもある。
・「コードが1行ずつ実行」(コンパイル(後述)しない)
・実行速度 < 効率性、柔軟性 （柔軟性については、コードを書いているときにエディタの方が臨機応変に対応しながらコードを実行してくれている感じがする） Perl,Ruby,PHP,Python,JavaScript,TypeScript 　インタプリタ型と比較されるのが、コンパイル型。 　・コンパイル型とは...

useEffectがマウント時に2回実行される

## 環境
– OS: Window 10
– Node.js: v16.16.0
– React: 18.2.0

## 現象
useEffectでマウント時に1回fetchでAPIにアクセスして情報をとってくると・・・

“`react:React
useEffect(() => {
fetch(“https://xxxx.com/xxx”)
.then(res => res.json())
.then(data => {
console.log(data)
})
} , []);
“`

2回fetchされている！！
Why Japanese People！？！？（古い）

“`console:コンソール
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
“`

## 原因
React18の、StrictModeの追加機能によるものだった。

>

ブラウザゲームを作ってみよう(その11:サンプルゲーム作成その4)

# はじめに
[その10](https://qiita.com/noji505/items/a4fa4d9a1f37a80d7690)ではゲームのバランス調整を行いました。
今回はオプションモードを追加してみたいと思います。

# オプションモードについて
タイトル画面からオプション画面へ入れるようにし、そこでゲームのパラメータを変更できるようにしてみます。
以下のような形で、タイトル画面からの遷移が増えるイメージになります。

[遷移イメージ]

変更するパラメータは以下とします。
* ライフの初期値
* コイン出現間隔(〇点獲得で出現間隔スピードが2倍になる)
* コイン出現数(□点獲得で出現数が△枚になる)

# ソースコード
まずはタイトル画面にオプション画面への遷移を追加します。
ソースコードは以下となります。

“`javascri

Electronでデスクトップアプリをサクッと作る(ボタンイベント付き）

Electonは、JavaSriptとHTML、CSSを知っていればアプリを作ることができるフレームワーク。

公式のドキュメントが日本語対応しているところもうれしい。
https://www.electronjs.org/

ビルド時のコマンドにオプションを指定すると、winodwsやMac、Linux用のアプリも作れる。

## 1. インストール
`electron`は、devDependenciesにインストール。
“`console
npm init -y
npm i -D electron
“`

## 2. index.htmlを用意
ルートディレクトに`index.html`を作成。
アプリを実行したときのトップページになる。
“`html:index.html




【JavaScript】TABキーによる要素のフォーカス送りをグループ内でループさせる

HTMLタグのtabindex属性が同じ値同士の要素はTABキーによるフォーカス送りが該当要素内で順に行われるので、グループ化したい要素にそれぞれ同じ値のtabindexを振り、それぞれのグループ内での先頭または終端の要素にフォーカスが当たっている際にTABキーまたはSHIFT+TABキーが押下された際には逆側の末端の要素にフォーカスを移動させることで、グループ内でフォーカス移動がループするようにしています。

—-

#### [動作デモ](https://akebi.jp/temp/tabIndexGroup.html)
マウスポインタで適当な要素を選択したあとは、その要素が属するグループ内でTABキーまたはSHIFT+TABキーによるフォーカス移動がループします。

“`sample.html