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

JavaScript　ページ遷移　location.href

## 用途
ページ遷移したい時に使う

## 方法
“`js:
location.href = ‘https://hoge.com/’;
“`
遷移させたいURLを代入します
パラメーターをつけることも可能です
例　`http://hoge.com?action=hoge&id=123`

“`js:
location.href = ‘/hoge/hogehoge’;
“`
パス指定も可能です
パラメーターをつけることも可能です
例　`location.href = ‘/hoge/hogehoge?action=hoge&id=123’;`

上記コードはどちらも、ブラウザの戻るボタンで前のページに戻れます

JavaScriptで作る変則リバーシ⓪

# 自己紹介
はじめまして、y-tetsuと申します。普段は車載機器のエンジニアとして働いております。3年ほど前にPythonとAIを学ぶぞ！！と、リバーシのプログラムを書き始めて以来、リバーシ作りにはまっています(あくまで日曜大工的に、気ままに作っているものですが)。

最近はJavaScriptに興味がわきまして、相変わらず新しい気持ちでリバーシ作りを始めています。せっかくなので何か変わった物をと思い、今回変則リバーシを作るに至りました。

ちなみに、リバーシを作るのは好きですが、自分でプレイする方はてんで弱いです(先読みのコツが未だにわかりません)。

皆様これから、よろしくお願いします。

# はじめに
本記事は、これから数回に分けてご紹介する変則リバーシの、**土台となるプログラムの説明記事**です。(当初は初回の”①”の記事に、後から追加していった内容ですが大きくなりすぎたこともあり新たに”⓪”として分けました)

次回以降に作っていく内容は、以下のラインナップとなっています。

①**盤面がいつもとは違う変則リバーシ**

https://qiita.com/y-te

JavaScriptで画面更新時にスクロール位置を指定する方法

タイトルに表題についてハマったので備忘録として記載しておきます

例えば、ラインのようなチャット機能でコメントを送信すると一番下にスクロールされるようなUIの実装方法として様々な実装方法がありますが、JavaScriptを用いた実装方法を紹介します。(むしろ、この実装方法しかできなかった)

では、コードとしては以下記載します

“`:index.html

“`

ScrollTo関数が指定の位置(x, y座標)に移動する関数です
チャットルームの表示領域のelement(ここではgetElementByIdで(‘chat-room’))を取得し、それをx座標(水平方向)を０、y座標はelのscrollHeightを指定する

JavaScriptで一定時間待つ処理を入れたい

## はじめに
Lambdaの関数のテスト目的であえて一定時間待つ処理を入れたかったので、その方法を調べました。

## コード

“`js
exports.handler = async event => {
console.log(‘start timer’);
await delay(5000);
console.log(‘After 5 seconds’);
};

const delay = time => {
return new Promise(resolve => setTimeout(resolve, time));
};
“`

## 参考
https://masteringjs.io/tutorials/fundamentals/wait-1-second-then

Jestでuuidを固定してテストしたい

## はじめに
Jestでuuidを含むテストコードを書く際に、uuidが毎回違う値が生成されてしまうため、固定する必要があったのでその方法を整理しました。

## 結論

以下コードにより、uuidを固定してテストができます。
以下の例だと、uuidを123と固定してテストを実施できます。

“`js
import * as uuid from “uuid”;
jest.mock(“uuid”);
describe(“someTest”, () => {
const uuidSpy = jest.spyOn(uuid, “v4”);
uuidSpy.mockReturnValue(“123”);
}
“`

## 参考

https://dev.classmethod.jp/articles/mocking-uuid-generation-in-jest/
https://stackoverflow.com/questions/51383177/how-to-mock-uuid-with-jest

JavaScript 直書きでGA4にカスタムイベントを発行する方法

## 留意点

– 本記事の情報は 2022 年 5 月 23 日時点の情報を元に記載しています
– Web での GA4 利用を前提に記載しています

## 背景

GTM を用いた GA4 のイベントハンドリングの方法は数多くネットに落ちていますが、何らかの事情によって GTM を使用できない場合は（ビジネス上の制約であることが多いように感じます）、どのようにイベントハンドリングするかという観点では情報が少ない印象だったので、JavaScript で直接任意のイベント情報を GA4 に送る方法について、簡単ではありますが情報を載せておこうと思います。

## カスタムイベントのリファレンス情報

GA4 のカスタムイベントリファレンスはこちらになります。

https://support.google.com/analytics/answer/9310895?hl=ja

UA では「イベント カテゴリ」、「イベント アクション」、「イベントラベル」、「イベント値」の各フィールドがありましたが、GA4 では「イベント名」と「パラメータ」で構成されます。パラメータには `send_t

【個人開発】英語の発音精度を診断するアプリ「Speaking Checker」を作りました

## はじめに
初めまして、よしたかと申します！

突然ですが、皆さんは英語が得意でしょうか？
私は「読む・書く」は得意ですが、「聞く・話す」は苦手です。「読む・書く」については高校時代の先生の教え方がうまかったおかげか今も得意なのですが、「聞く・話す」については海外留学や英会話スクール等に通ったことがなく、外国人の方と話す経験がほとんど無かったので苦手です。
他の方はどうなのか？と思い調べてみると、下記のビジネスパーソン向けに行われた調査データによると、英語が得意と答えた人は約3割なのに対して、英語が苦手と答えた人は約7割と多数を占めていることが分かります。
参考: [「英語学習の実態と意欲」に関する調査結果](https://www.iibc-global.org/iibc/press/2019/p123.html)

私は一人でも多くの方に英語を好きになって欲しいです。そのため、ゲーム感覚で英語の発音練習ができないかと思い、「Speaking Checker」を開発しました。

▼サービスサイト

https://www.speaking-checker.com/

## サービ

Promise の then() / catch() / finally()　とは何か？

– then() は、 Promise のインスタンスの状態が fulfilled となったときに実行する関数を登録できるインスタンスメソッドです。
– catch() とは、 Promise のインスタンスの状態が rejected となったときに実行する関数を登録するインスタンスメソッドです。
– nally() は、処理が成功しても失敗してもいずれの場合でも最後実行される関数を登録するインスタンスメソッドです。

世界一簡単なCloud Functions for Firebase入門

# 概要
これまで、自分はサーバーレス（AWS LamndaやCloud Functions For Firebase）という技術について触ったことがなく、どんなことができるかもいまいち知り得ないという状態でした。

そこで今回、軽く入門してみようと思い、簡易的なAPIの開発を通じて勉強していこうと思います。

今回のAPIの開発は専用のリポジトリを作成していますので、よかったら参考にしてみてください！
[専用のリポジトリ](https://github.com/msy7822-ux/learn-cloud-functions)

今回やることは、大まかに以下の通りです。

1. firebaseのプロジェクトを新規開設
2. 必要なライブラリをインストールし、セットアップを行う
3. cloud functionsで何らかの値をレスポンスとして返してくれるエンドポイントを実装
4. firebase deployする

上記の一連の流れとは別に、追加でfirestoreへのデータの追加・読み出しを行うAPIの実装なども行っていきたいと思ってます。

また、今後追加でfirestor

Vue 2.6でAnimated画像のアニメーションを再起動

# Vue 2.6でAnimated PNGまたはGIFのアニメーションをコンポネントの再表示・アップデートの時に再起動
UIはアニメーション画像（PNGまたはGIF）を表示する必要があり、一番簡単な方法は`img`タグを使用することです。

問題は、無限ループがない場合、アニメーションが最後のフレームで停止することです。
## VueのSFC（シングル・ファイル・コンポネント）
正方形のコンテナの中央にアニメーション画像を表示します。
### コンテナ
ここでは、コンテナの`position`スタイルプロパティを`relative`に設定するだけです：
“`JavaScript:sample.vue

“`
※ また、アニメーションがコンテナの境界を越えないように、`overflow`を`hidden`に設定しまし

非同期通信ではない、POSTリクエストをする関数

## はじめに

Form送信を活用して、非同期通信ではなく、POSTリクエストする方法を紹介します。

他のサービスと連携する実装をしていて、AJAXリクエストではなく、リダイレクトを期待されており、POSTリクエストをしたい時などに使えます。

## コード

“`formPost.ts
const formPost = (value, url) => {
const form = document.createElement(“form”);
form.method = “POST”;
form.action = url; //`https://xxxxxxxx`;

const input = document.createElement(“input”);
input.type = “hidden”;
input.name = “submitValue”;
input.value = JSON.stringify(value);
form.appendChild(input);

form.style.display = “none”;

【JavaScript】falsyな値

JavaScriptにおいてfalseと扱われる(`falsy`な)値には以下が存在する。

|値|説明|
|–|–|
|false|true、falseのfalseキーワード|
|0|数値0|
|-0|数値-0|
|0n|BigInt値0|
|””|空文字列|
|null|何も存在しないこと|
|undefined|宣言のみされた変数などの未定義値|
|NaN|どの数値とも一致しない特性を持つNumber型の値|

“`js
if (false) {
console.log(‘trueです’);
} else {
console.log(‘falseです’);
}
// => falseです

if (0) {
console.log(‘trueです’);
} else {
console.log(‘falseです’);
}
// => falseです

if (-0) {
console.log(‘trueです’);
} else {
console.log(‘falseです’);
}
// => falseで

Chrome Extension(拡張機能) MV3 × Firebase(RealTime Database)

## 開発する拡張機能の前提
– MV(manifest version)3
– Firebaseを使用
– 「Node.js」, 「npm」を使用しない
– 開発に使用しているのはHTML, CSS, JavaScriptのみ
– contentもしくはbackgroundからFirebaseを使用したい

## 経緯
私は、Firebaseを使用するChrome拡張機能(以降、拡張機能)を開発していました。
MV3の拡張機能開発で、Firebaseを利用する方法を調べて出てくるのは、SDKをnpm経由でインストールする方法ばかりでした。
しかし、私は今回Node.js、npm（React、Vueなど）を使用しないためこれらの方法は適しません。
そこで調査した結果、参考になる文献が１つ(本記事の最後に記載)だけ見つかったのですが、よりわかりやすくしようと思い、執筆に至りました。

## 本題
まず簡単に拡張機能でFirebaseを使用する手順を以下に示します。
1. 使用したいFirebase アプリケーションのコードを取得
1. インポートしたコードを修正
1. Manife

VSCodeでイマドキのJavaScriptの開発環境をサクッと作ろうぜ(デプロイ編)

# はじめに
イマドキのJavaScript開発環境記事第3弾。

過去記事は以下。

– [第1弾 VSCodeの設定～Linter](https://qiita.com/neruneruo/items/c940af6c85519fd63648)
– [第2弾 自動テスト](https://qiita.com/neruneruo/items/edcf02eb0ebdb40a4876)

今回は、モジュールバンドラーを用いてアプリケーションのデプロイをする設定を作っていく。

# モジュールバンドラーの選定
モジュールバンドラーはいろいろあるが、Vue CLIを使った場合は最優先で選択される等、一日の長があるため、Webpackを使う。
なお、Webpackに関する参考記事として以下を読んでおくと導入が早い。

– [いちばんやさしいwebpack入門](https://zenn.dev/sprout2000/articles/9d026d3d9e0e8f)

# 全体のファイル構成
プロジェクトと同列にdist/bandle.jsというアウトプットを作成するようにする。

“`
<

Node.jsのsokect.ioを使ってのPUSH通知を作ってみた

こんにちは、wattak です。

50の手習いで Web アプリを作ってみよう、と色々と調べておりまして、自分の備忘録もかねて作ってみた実装をこちらに投稿しようと思います。
## 今回のプログラム
任意のタイミングでサーバーからクライアントへ PUSH する仕組みを持つ環境を Node.js を使って構築してみました。

なお PUSH の仕組みは記事のタグにも記載しましたが socket.io の仕組みを使っております。
## 処理概要
以下のようなイメージで構築しようと考えております。

1.クライアントから接続要求
2.サーバーにてクライアント情報を追加
3.クライアントから受付要求
4.サーバーにて登録処理して応答
5.以後、任意のタイミングでサーバーからクライアントへ PUSH 通知

「任意のタイミング」については PUSH 用に RestAPI を用意し API コールのタイミングで通知を行うことにしました。
## 処理イメージ
ポンチ画レベルのシーケンスで恐縮ですが1.～5.の処理イメージを描いてみました。
![qiita_image.jpeg](https://qi

Chrome拡張でサイトのHTMLを書き換える

# 概要

+ Google Formsで自分の回答の字数を知りたい！
+ Chrome拡張ってどうできているの？何ができるの？

という思いからGoogle Formsの自分の回答に字数を表示する拡張機能を作りました。

外部(Chrome Web Store)に公開するとなるとお金がかかったり別な手続きが必要みたいですが、自分のChromeで使うだけの拡張であれば、フォルダーをアップロードするだけです。

# manifest.jsonファイルについて

Chromeの拡張機能を作るうえで必須なのが`manifest.json`ファイルです。アップロードするフォルダー(ディレクトリ)の直下に作ります。今回は大したことしないので書くことはあまりありません。

“`manifest.json
{
“manifest_version”: 3,
“name”: “Word Counter for Google Forms”,
“version”: “1.0.0”,
“description”: “This extension shows the n

JavaScriptで作る変則リバーシ③

# はじめに
以前ご紹介させていただいた、下記記事からの続編(第③弾)になります。

https://qiita.com/y-tetsu/items/d1a5c7485cb34ae5c904

プログラムの土台部分については、以下の初回記事で紹介しています。

https://qiita.com/y-tetsu/items/59237213d544f14bbc9c

今回は前回作ったものをベースに、新たに**緑色の石**というものを追加した、**4色の石を使った、3人対戦で遊べる変則リバーシ**を作りましたので、ご紹介したいと思います。

# できたもの
以下のような、ブラウザで遊べるものを作りました。
自身が先手(黒)で、相手(白と灰)はコンピュータ、としています。
ボタンタップで一時的に要素を量産する

# 作ったもの

インスタライブのような同期チャットにエモート機能を載せるということで
JSとCSSアニメーションでひな形の挙動を作ってみました。

## コード

HTML

“`html:html

• M1 macbookでnodebrew installできないとき

  ## いつも忘れること
  – M1　macbookに変えてから、npm使っているとたまに下記サイトのようなエラーに出会う。

  https://zenn.dev/catnose99/scraps/6c9e7ebabb6221

  – それ自体は、Node.jsのバージョンを変えると動くという話なので、nodebrewでバージョンを変えれば良い
  – しかし、目的のNode.jsをインストールしようしてできない、ということをいつも繰り返している

  ## 結局こちらにお世話になる

  https://zenn.dev/naoki_oshiumi/articles/967ce342172ab8

  – ということで備忘録。
  – M1 macbookにして、 `nodebrew install v15.8.0` みたいなことができない時は　`nodebrew compile v15.8.0` みたいな感じにすると環境に必要なバージョンのNode.jsを作ることができる。
  – このコンパイルは記事にもある通り1時間くらいかかると思う（M1頑張ってくれ）
  – あとは `nodebrew use v15

元記事を表示

Next.jsで配列内のJSONデータで必要な部分のみ出力したい

## はじめに
もっと良い方法があるかもしれないですが、調べた中で上手くいったコードをメモがてら記載

## コード

“`index.js
const [qiita, setQiita] = useState(”);
const fetchQiita = async () => {
// データを取得
const response = await fetch(`/api/qiita?query=${keyword}`);
let qiita = await response.json();
　// 配列を1つ出力して別の変数に格納
const listQiita = qiita.map(article =>
<>

{article.title}

{article.body}

);
　// useStateの変数にセットする
setQii