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

配列を文字列に変換する際の注意点

## 環境
node.js v10.19.0
Ubuntu 20.4

## 動作確認
配列を定義します。
“`node.js
var ary = [];
“`

空の配列が返されます。
“`node.js
console.log(ary); // => []
“`

存在しない要素を指定すると、undefinedが返されます。
“`node.js
console.log(ary[0]); // => undefined
“`

空の配列に値をセットします。
“`node.js
ary.push(“米原”);
ary.push(“彦根”);
console.log(ary); // => [ ‘米原’, ‘彦根’ ]
“`

配列かどうか判断する方法です。
“`node.js
console.log(Array.isArray(ary)); // => true
“`

型で判断するやり方もあります。 ただし、object型ではあることは分かっても、arry型であるかまでの判断はおこなえません。
“`no

【パブリッシャー】HTMLとJavaScriptでカスタムレポートを作成してみる

[Sharperlight](https://sharperlight.jp/)**パブリッシャー**で作成される公開クエリは、HTMLやJavaScriptを使用して作成するWEBインターフェースのコンテナとして使用することもできます。その簡単な例をここでは見ていきます。
[Sharperlight](https://sharperlight.jp/)には、jquery、[KendoUI](https://docs.telerik.com/kendo-ui/introduction)、yui、D3、Chart.JsなどのJavaScriptフレームワークが梱包されています。それらを利用してWebインターフェースを作成することができます。
今回は、Chart.Jsを利用して、折れ線グラフを表示してみます。元になるデータもパブリッシャーで公開クエリとして定義します。
## データソースを準備する
**パブリッシャー**を起動して公開クエリを作成します。
グループ名とコードを入力したら、クエリの編集を開始します。
![2022-03-27 Figure 01.png](https://qi

HTML/CSSコーダーにもデザインカンプを半透明で重ねる機能の自作をお勧めする件

ピクセルパーフェクトを目指すにあたって、ページに**デザインカンプを半透明で重ねる**と便利です。今回は、Tampermonkeyを使ってデザインカンプを半透明で重ねる機能を自作しようという記事です。

「デザインカンプを半透明で重ねる」こと自体は`PerfectPixel`などの拡張機能でも可能なので、今回は自己満でやってる感が強めとなっております(笑) `PerfectPixel`についてはこちら↓。

https://qiita.com/yymmt/items/c3a015fa97d167ca0e6c

今回も、こちらのサイト↓から、ポートフォリオのテンプレートをお借りして説明します。

https://webdesigner-go.com/template/portfolio-02/

# 対象の読者

– デザインカンプを元にHTML/CSSをコーディングする人
– HTML/CSSの文法は分かっていて、大まかにはカンプ通りにできる人
– 特に、CSSの微調整の効率を上げたい人
– JavaScriptの基本的な文法は分かっている人

# Tampermonkeyのインストー

【JavaScript】Canvasで単純なお絵描きツール

# サンプル

https://mogamoga1024.github.io/SimpleDrawingTool/

# 結論（ソース）

“`html:index.html
クリア

“`

“`javascript:main.js
const canvasHtmlElement = document.getElementsByTagName(“canvas”)[0];
const clearButtonHtmlElement = document.getElementById(“clear-button”);

JavaScriptでオセロを作ってみた。リファクタリング。

以前に投稿して随分と時間が経ってますが、たまにストックしてくださったり見てくださる方がいらっしゃいます。
より良く新しい記述を提供できたらと思ったので今回リファクタリングを試みました。

初学者の方のお役に立てればと思います。

以前投稿した記事はこちら

https://qiita.com/tanimoto-hikari/items/c5daefd9af9989b9b8dd

以前のコード

“`js
window.onload = function(){

var $tableElements = document.getElementsByTagName(‘td’);
//順番を制御するための変数
let order = true; //trueは黒（先行）
let othelloWhte = ‘◯’;
let othelloBlack = ‘●’;
let othelloColor = othelloBlack;

//tableの全てにclickイベントを付与する
for (let $i=0; $i < $tableElements.leng

【chrome拡張機能】teratailで不快なユーザをブロックする拡張機能を開発

# はじめに
はじめまして！
最近teratailを使い始めたのですが、意味のない質問を連投しているすごく鬱陶しいユーザがいて不快な気持ちになりました。しかし、teratailには標準のブロック機能がないため、不快なユーザの質問を非表示にする事が出来ませんでした。
そこでchrome拡張機能で以下のような物を開発しました。
– teratailのユーザをブロック出来る
– ブロックしたユーザの質問は非表示にされる

# 使用するための手順
## chromeの拡張機能の入れ方
この拡張機能はパッケージ化されていないため、まずパッケージ化されていない拡張機能を読み込む方法を紹介します。
1. [github](https://github.com/mineralwater0329/teratailUserBlock.git)からcloneする
2. [chrome拡張機能の管理](chrome://extensions/)からパッケージ化されていない拡張機能を読み込むでcloneしたフォルダを読み込む
## 本拡張機能の使い方
1. [teratail](https://teratail

【PHP】タグ機能③

下記投稿の続きで、タグ機能に登録機能（DB接続）を実装します。

https://qiita.com/ryouya3948/items/da1a53e32edbd16637a5

https://qiita.com/ryouya3948/items/f8a574bb900ba4fefecb


# DBにタグ情報保存

“`html:form.php

//更新

【React】Refのメモ

業務でDOMを取得する際に使用したのでメモ。

# div要素を取得してみる

“`react:
import { useEffect, useRef } from “react”;

const Component = () => {
const ref = useRef(null);

useEffect(() => {
console.log(ref.current);
}, []);

return (

hello

);
};

export default Component;
“`

コンソールの結果は
“`:Console

hello

“`

# ためしにdivの小要素を取得してみる

“`react:
import { useEffect, useRef } from “react”;

const Component = () => {
const ref = useRef(null);

useEffec

input(TextField)内にペーストした画像を表示する方法 (React, MUI(旧Material UI))

# 目的

SlackやTeamsのように記入欄に画像をペーストし表示するのを目的としています。
ペーストした瞬間にDBに送りそのURLを取得して画像を表示するのではなく、ペーストした画像からデータを取得し表示します。
ただSlack、Teams、Qiitaはペーストした瞬間にDBに送ってるみたいです。


# 方法
React, Material UIを使っています。

“`typescript:index.tsx
import * as React from ‘react’;
import TextField from ‘@mui/material/TextField’;
import { Button, Stack } from ‘@mui/material’;
import ImageList from ‘@mui/material/I

JavascriptでJSONの配列の中からランダムに重複せず指定個数の配列を抜き出したい

# タイトルの通りなのだがやりたいことを説明
1. JSONの配列がある
1. その数より少ない要素数を指定して
1. 配列の中からランダムに
1. しかし重複なく
1. 新しい配列を作成したい

なんだかいろいろと方法がありそうだが、できるだけ組み込み関数を利用して実装したい。

## ランダムな要素抽出
“`
const objs = [
{ title: “apple”, price: 500 },
{ title: “orange”, price: 200 },
{ title: “melon”, price: 5000 },
{ title: “tako”, price: 2500 },
{ title: “ika”, price: 100 },
{ title: “mochi”, price: 150 }
];
// console.log(objs);

const new_len = 3;
// 配列に使用すると 要素の数分の数値を出せる
// obj_keys = 0, 1, 2, 3, 4, 5 となる（以下）
var obj_keys

ページ非表示で止まったvideoタグをもう一度再生する

HTMLのvideoタグで動画を再生しているときに違うタブを開いたりしてページを非表示にするともう一度ページを表示したときに動画が止まったままで再生されません。

これをもう一度再生させるにはページが表示されたことを知らせてくれるpageshowイベントを使います。
“`javascript
window.addEventListener(“pageshow”, function(){
document.getElementById(“video”).play(); //idは使用してるものに変えてください
});
“`
これで非表示だったページを再表示したときに自動的に動画が再生されます。

最後のカンマについて（JavaScript）

## 最後のカンマとは？
最後のカンマとは、JavaScriptにおけるアレイとオブジェクトの括弧の内部で使用するカンマについて、一番最後のエレメントに対してカンマをつけるのかとうか？という話です。
ちなみに、英語では、trailing commasと呼び、trailとは、足跡や引きずった跡のことなので、カンマを引きずった跡に見立てているわけです。

## JavaScript Arrays

最初にアレイですが、JavaScriptでは最後のカンマがあってもなくても、問題ありません。

“`JavaScript

var arr = [ “絵梨花”,”瑞穂”,”紗理菜”, ];

console.log(arr); // [ “絵梨花”,”瑞穂”,”紗理菜” ]
console.log(arr.length) // 3

“`
ただし、もう一つカンマを付け加えると変なことになりますので、注意しましょう。

“`JavaScript

var arr = [ “絵梨花”,”瑞穂”,”紗理菜”,, ];

console.log(arr); // [ “絵梨花”,”瑞穂”,”紗理菜

【Stimulus】targetがある時だけ関数を実行する方法

# はじめに

Rails7 で Javascript を利用するときは Stimulus を使うのがデフォルトになっています。

特定のページで関数を実行する方法を書き残しておきます。

## 環境

– Rails 7.0.22
– Ruby 3.1.1
– Rspec 3.10.0
– stimulus-rails 1.0.4

## やりたい事

特定のページの時だけクラスを削除する関数を実行する

# 本文

Stimulus のライフサイクルコールバックと呼ばれる特別なメソッドを使用すると目的を達成することができます。

`TargetConnected()`を利用する

“`javascript:class_controller.js
import { Controller } from “@hotwired/stimulus”;

// Connects to data-controller=”class”
export default class extends Controller {
static target = [“class”];

classTa

僕が成長するきっかけになったJavaScriptの問題と全解説　~昔の僕のクソコードを添えて~

この記事は僕がちゃんとプログラミングを勉強し始めるきっかけとなったJSの問題に関する内容の記事になります。

# はじめに
最近ではNext.jsを使った長期インターンに参加できるほどに少しはマシになったとは思いますが、半年前まではJavaScriptを少しかじっただけで、何も理解していませんでした。

しかし、ある時期に今回ご紹介する問題を **否が応でも** 解かないといけない状況になり、[JS-Primer](https://jsprimer.net/)(JSの教科書的なやつ)と睨めっこしながら奮闘しなんとか解き、先輩方にそれをレビューしてもらいました。

**そこで** 、今回の記事では、
前よりは成長した僕の知見と、先輩エンジニアの方々のアドバイスを融合させつつ
* 昔の僕のコードの何がダメ:tired_face:なのか
* より良い解答（1を踏まえて、どこを改善すると良くなるのか）
* 補足説明
この3点に着目しつつ解説していこうと思います！

# 前置き
この問題は（ほぼJSの知識だけで解けますが）Typescripで出来ています。
もし、ローカル環境で解いてみたいという

メソッドチェーンとは【個人的なお勉強アウトプット】

## メソッドチェーンとは
メソッドの実行結果に対して、変数などを介入せずに直接他のメソッドを実行すること

## メソッドチェーンのメリット
可読性が上がる。
不必要に変数定数を宣言しなくてよくなる

## 処理内容
直前のメソッドの戻り値に対して処理を行っている。

## 参考サイト
https://travel.rakuten.co.jp/mytrip/ranking/spot-karuizawa

React + TypeScript: Apollo ClientのuseMutationフックでGraphQLのデータを書き替える

[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は`useMutation`フックでGraphQLのデータをどう書き替えるかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。公式サイトの「[Mutations in Apollo Client](https://www.apollographql.com/docs/react/data/mutations/)」で紹介された[作例](https://codesandbox.io/s/mutations-example-app-final-tjoje)に、TypeS

Safariで別タブでBASIC認証のページを踏むとフリーズする

# 概要
iPadで別タブでBASIC認証のかかったページを踏むと、認証後2,3秒してフリーズしてしまうバグに悩まされていました。
しかも再現するときとしない時が、、なぜ。
あまりにも原因として考えられるのが多すぎるので、他の原因もあるかもしれませんが、
とりあえず備忘録として残します。

# 前提条件
iPad 第７世代 / iPad Air2
iOS 15.4
Safari 15.4

# 解決
今回新規タブを開くのに`window.open`を用いていましたが、
これをシンプルに
`リンク`
として、別タブで起動すると問題なく動作しました。

どうしてもjsでやりたければ`document.getElementById(“link1”).click()`とかでも。

# なぜ？
完全な憶測です。
恐らくJSによるジャンプは動作せず、HTMLによるジャンプなら大丈夫という感じかと思われます。
Safariの微妙に対応してない部分とか考えると何かそんな気しなくもない

【帳票】stimulsoft report.jsでのファイル保存（PDF Excel Wordなど）

# はじめに
Stimulsoft report.jsを使い、帳票をプレビューなしでPDF、Excel、Wordなどのファイルで保存する方法について整理します。

# 前提
stimulsoft report.js

# PDFで保存する場合
最初に結論を書きます。PDF形式で保存するケースになります。
“`html








レポートをPDFにエクスポート

@endpush
```

# 参考
https://readouble.com/laravel/8.x/ja/blade.html#:~:text=message%20%7D%7D%3C/div%3E%0A%40ende

Javascrioptのvar、let、const【個人的なお勉強アウトプット】

いずれも変数や定数を宣言するときにつかうもの。
varは古株。letとconstはECMASScript2015から。
ECMAScript2015はJavascriptの標準仕様。
国際団体で標準かされたうえ、ブラウザで広く採用されている。

## 違い
- 再代入、再宣言が可能か
- スコープ

### 再代入、再宣言が可能か
varは再代入、再宣言が可能
letは再代入が可能
constは宣言したら変更不可

### スコープ
varはブロック外でも参照可能
let、constはブロック外では参照不可

## 推奨されている使い方
変数の内容が変わったり、ブロック外にいったりきたりするのは可読性を下げる。
不具合も生みやすくなる。
なので、できるかぎりconstをつかったほうがよい。
ただし、for文などで変数の中身を変えていくものはletで。
varはつかわなくてもよい。