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

自律カスタム要素の使い方

##自律カスタム要素の使い方
自律カスタム要素とは、``のようなこのままページにおける自作HTML要素のことです。組み込み要素から継承するものと違って、前者は継承元の動きを受け継いだうえで、ページには`

`のように`is`属性の指定が必要であるに対して、自律カスタム要素は完全に0から作り上げたものです。中身の構築はshadow domをつけるのが一般的な手法です。

“`js

// 基礎の組み込みhtml要素からではなく、大本となるHTMLElementから継承する
class PopUpInfo extends HTMLElement {
constructor() {
// Always call super first in constructor
super();

// 自律カスタム要素にshadow domをつけるのが一般的な手法
const shadow = this.attachShadow({ mode: ‘open’ });

関数どれ使う？JavaScript

JavaScriptには関数の定義方法がいくつかありますね。

##関数宣言
“`javascript:kansuSengen.js
function echo() {
console.log(“hello”);
}

echo(); // helloと出力される
“`

一番ベターなやつです。これが書ければもう何も困ることはないかなと言う感じです。

##関数式
“`javascript:kansuSiki.js
const echo = function () {
console.log(“hello”);
};

echo(); // helloと出力される
“`
関数宣言と同じ挙動をしますが、ちょっと長い記述になっています。

##アロー関数
“`javascript:kansuSiki.js
const echo = () => {
alert(“hello”);
};

echo(); // helloと出力される
“`
簡単に言うと関数式の略版ですね！
今風でとてもかっこいいです。積極的にこれを使いましょう。
違いもありますが、当記事では(関数

Preloadでブラウザにリソースを前もってFetch させる

**01 HTMLタグ**

“` “`

**02 Preload（上記） ＋　リソースを通常読み込み処理**

“`
// script
let pl = document.createElement(‘script’);
pl.src”xxx.js”;
document.body.appendChild(pl);

// StyleSheet
let plStyle = document.createElement(‘link’);
plStyle.href=”xxx.css”;
plStyle.rel=”stylesheet”;
document.head.appendChild(plStyle);
“`

**03 CSSファイルが先読みできたらすぐ実行**

“`

JavaScript データ型

###JavaScriptのデータ型

ここで紹介するのは以下の六つのプリミティブ型

* undefined
* null
* Boolean
* Number
* String
* Symbol

###Undefined
Undefined型には「undefined」というリテラル値のみ。
var又はletで変数を宣言して、初期化されていない状態は「undefined」になります。

“`javascript
let messge;
console.info(message);//undefined
console.info(name);//例外
“`

宣言されていない変数に対して行える操作はtypeofのみ

“`javascript
let name;
console.info(typeof name);//undefined
console.info(typeof age);//undefined
“`
ここはちょっと要注意、
宣言されて初期化していない変数と宣言されていない変数にtypeof操作すると両方とも[undefined]になります。

###Null

【RPGツクールMV/RPGツクールMZ】マップのメモ欄を使った判定

RPGツクールMVではmeta.”文字列”で判定可能。
私がプラグイン改造で実装した例を掲載します。

GALV_BasicEventShadows.js
MV Basic Event Shadows

例.マップのメモ欄にを含む場合にプレイヤーの影を生成しない
$dataMap.meta.文字列で判定

“`javascript:
Spriteset_Map.prototype.doActorShadows = function () {
if ($gameSystem._playerShadow) {
// add
var fols = $gamePlayer.followers()._data;
for (var i = 0; i < fols.length; i++) { fols[i]._shadow = true; this.createBShadow("f" + i + 1, fols[i]);

シャドーDOMの使い方

##シャドーDOMの使い方
shadow domとはカプセル化したdom treeを画面上のエレメントに動的にアタッチする手法のことです。このサブdom treeには外部cssの影響を受けず、独自で指定されたcssのみが適用されます。どういう場面で使うべきというと、外部のcss（例えばプロジェクト全体に影響を及ぼすstyle.css）の影響を受けたくない場合、html要素をshadow domにすれば実現可能です。

・基本的な使い方
`let shadow = elementRef.attachShadow({mode: ‘open’});`
shadow domをつける要素に対してattachShadowメソッドを呼び出して、この要素にshadow rootをつけた同時に、それの参照をもらい、この要素自身もshadow hostとなります。
オプションmodeをopenにすると、elementRef.shadowRootで外部のJavascriptからshadow rootへのアクセスを可能になります。falseに設定すると、.shadowRoot呼び出してもnullしか返ってこな

このエラーの解決方法 Warning: validateDOMNesting(…):

cannot appear as a descendant of

Reactを書いていたら以下のようなWarningエラーが
Consoleに出たので備忘録として残しておく

## 今回出現したエラー文

Consoleに、以下のようなエラー文が出力された

“`
Warning: validateDOMNesting(…):

cannot appear as a descendant of

“`

## エラー文をDeepLで翻訳すると・・・

“`

は

の子孫として表示できません
“`
ん？どういうこと？

## エラーの原因

先ほどのエラー文は
「HTMLの入れ子のルール」に関するエラー

今回は、pタグの中にdivタグを
入れ子にしているからWarningエラーが起きています

pタグの中にdivタグを
入れ子にすることはできないからです

## 解決方法

Reactの場合は関数コンポーネントの
returnでJSXを返している箇所のコードを見て

以下のような
HTMLの構成になっていないか確認する

“`react
const Sample = () => {
return (

map()メソッドについて【備忘録】

こんにちは！
今回も、開発で、map()メソッドを使う機会があったので、備忘録としてまとめて行きます！

# map()メソッドって…?

map()

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
出典)MDN Array.prototype.map()

配列の各要素をコールバック関数で処理して、関数の戻り値から新しい配列を作って返す。
出典)柳井政和著 『JavaScript[完全]入門』(2021)p.227

コールバック関数とは、関数の引数として渡される関数のことです。関数の引数には、文字列や数値などのように、「値」を取りますが、関数を引数に取ることも可能なのです。

今回のmap()メソッドは、引数として渡された関数で行われた処理の

TypeScript基本編

[入門編](https://qiita.com/hisashi_matsui/items/795e77eb9f7fa134693e)で、TypeScriptの知識を紹介したので、本編では基本の型システムの記法などをなるべく簡単に紹介していきたいと思います。

##プリミティブ型
真偽値、数値、文字列などのプリミティブ型は基本です。
変数/定数名の後に`:型名`をつけます。

“`javascript
const bool: boolean = true;
const str: string = “Hello World”;
const num: number = 2021;
“`

“`javascript
let bool: boolean = true;
bool = “hoge” //コンパイルエラーになる
“`
↑のサンプルの様に、`真偽値型`の変数に`文字列型`を入れようとすると、このようにboolに赤線がついてTSがエラーを吐いて教えてくれます。
![スクリーンショット 2021-03-20 20.50.31.png](https://qiita-image-sto

Warning: A component is changing an uncontrolled input to be controlled.

# 起こったこと

項目を新規追加するためのフォームを作成していました。

こういうコンポーネントがあって

“`jsx

import { useState } from ‘react’
import blogService from ‘../services/blogs’
import PropTypes from ‘prop-types’

const BlogForm = ({blogs, setBlogs}) => {
const [blogFormItems, setblogFormItems] = useState({})

const handleFormOnChange = (name, value) => {
const inputs = {…blogFormItems}
switch (name) {
case ‘title’:
inputs.title = value
setblogFormItems(inputs)
break
case ‘author’:
inputs.author = val

ApacheでJavaアプリとNodeアプリを動かす

# はじめに
もともとApatch + TomcatでJavaアプリケーションを稼働しているサーバーがあり、
そこにReact + Node + Typescriptで作ったアプリケーションを稼働させたいという要望があり(私の要望)それを実現するためにやったことを書いていこうと思います。

参考にしたサイトは[こちら](https://ja.stackoverflow.com/questions/38818/apache-%E3%81%A8-node-js-%E3%81%AE%E9%80%A3%E6%90%BA%E3%81%A7url%E3%83%91%E3%82%B9%E3%82%92%E4%BB%98%E5%8A%A0%E3%81%97%E3%81%9F%E3%81%84 “Apache と node.js の連携でURLパスを付加したい”)

#前提条件
– Javaのアプリケーションは稼働済み
– Javaアプリケーションは`xxx.xxx.xxx`でアクセス可(ルート)
– Nodeアプリケーションは`xxx.xxx.xxx/node/`でアクセス可にする
– Nodeアプリ

Effect callbacks are synchronous to prevent race conditions.

useEffectで非同期処理を実行したかった時に怒られたのでメモ。

# 起こったこと

こういうふうにasync関数をuseEffectの第一引数に設定したところ

“`jsx
const getAllBlogs = async () => {
if (user) {
blogService.setToken(user.token)
const blogs = await blogService.getAll()
setBlogs(blogs)
}
}
useEffect(getAllBlogs, [user])
“`

以下のようなエラーが出てしまいました。

Put the async function inside らしいです。丁寧にサンプルコードまで提示してくれてい

三項演算子でfalseの時にundefinedを返す時の書き方

業務のReactプロジェクトでこんなコードを見ました。

“`javascript

“`
最初見たときは何だこれ？？って思いましたが、とても便利なので紹介したいと思います。

propsで子コンポーネントに値を渡す時、例えばその値がAPIから受け取るもので、何かしらの理由で`undefined`になって渡せないケースもある場合に、三項演算子を使うと普通はこの様に書くと思います。これでも全然間違いではないのですが、最初の書き方はこの三項演算子の省略版なのでした。

“`javascript

“`

見慣れない記法で焦りましたが、からくりが分かればなんてことないですね。

スプレッド構文と残余引数について【備忘録】

こんにちは！
今日は、開発をしていて、遭遇した「スプレッド構文」について備忘録としてまとめてみます！
「スプレッド構文」と似ている、「残余引数」についても触れてみます。

# 「スプレッド構文」って…?
なんか美味しそうな名前ですよね(笑)フランスパンに塗ったら美味しそうな…(笑)

スプレッド構文

スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。
出典）MDN スプレッド構文

MDNで調べてみると、上記のように書かれています。
正直、よくわかんないので、実際に使ってみます！

とにかく簡単にRailsでAjaxしたい

# はじめに
RailsにはRailsのAjaxのやりかたがありますが、なんか面倒だしjQueryで汎用的に簡単にやりたい、という人向け。
似たような記事はいくつもあると思いますが、もっとシンプルな記事を書きたいと思いました。

# 背景
[前回と同じ](https://qiita.com/hakua-doublemoon/items/abe6cbf11340f2805d41)。
多くの場合と同じく、画面操作したときにajaxでjsonデータを取得して次の画面を作ったり制御のためのデータを取得していたりします。
この記事ではデータの取得を題材にします。

# 詳細・手順
## Gemを追加する
RailsでもJavascriptは使えますが、jQueryはGemを入れないと使えなかった……はず。
`jQuery-rails`を追加します。ドキュメントはこれ: https://github.com/rails/jquery-rails
Gemfileに追加。

“`Gemfile
gem “jquery-rails”
“`

そして`bundle install`します。（サイトによ

BotpressをAmazon Lightsailで動かす

# Botpressとは

[Botpress](https://botpress.com/)は、チャットボット開発プラットフォームのソフトウェアです。チャットボット開発に必要なツールが一通り入ったパッケージソフトウェアであり、Botpress社によってオープンソースソフトウェアとして開発・提供されています。


Botpressを利用すれば誰でも、自分のPCにインストールしてチャットボットを作ったり、サーバーにインストールしてチャットボットを公開できます。また、ソフトウェアエンジニアにとっては「チャットボット型アプリ」の開発フレームワークとして利用できます。Pythonで書かれた他の多くのツールと違ってTypeScriptで書かれているため、JavaScriptのスキルと資産が生かせる点がポイントです。

開発したボットは、自分自身のサー

【Monaca】JavaScriptからGASへ値を送る方法【LINEBot応用編：特定トークグループ】

#はじめに
この記事では[Monaca]というWEB系IDEサービスを使用し、JavaScriptからGASへ値を送る方法を説明します。
最終的にはGASへ送られた値を、LINEBotで特定トークグループメッセージ送信なんかもやってみます。
私自身外部ドメイン(GAS)とのやり取りをするのが初めてだったので、備忘録もかねて記録を残しておきます！(といっても有識者様にとってはかなり基礎的な内容だと思うのでゆる～く解説します)

#前提条件
・Monacaでの開発環境　(＝JavaScrip開発環境＆HTML)
・GAS(GoogleAppScript)での開発環境
・LINEBot開発アカウント
　※上記の環境構築方法は先人の方がこれでもかというほど解説してくださっているので、今回は省略します。

#GAS
ではまずGASから構築していきます！
GASでの手順は以下です（ちょっぴり長いかも）。

1.LINEBotとGASを連携させるための〈チャンネルアクセストークンの取得〉
2.コード入力(LINEBot機能・特定トークグループ)
3.ファイルの保存　←　これ大事
4.作成したファイル

【File API】JavaScriptでローカル上の任意の音声データを再生する

先日、私が公開している[やまだのタイマー](https://r-40021.github.io/countdown-timer/)にアラーム音を任意のものに変更できる機能を追加しました。実装するうえで色々調べたのですが、File APIで音声ファイルを扱う記事が少ない、というかほぼなかったので、自分で記事にしてみようと思いました。
※ここでご紹介するコートはご自由に使っていただいて結構です。クレジットも不要です。ただし、動作の保証は致しかねます。
# DEMO

Reactでif文を使ってみるの巻

#:name_badge: Reactでif文を使ってみる

初心者の入門！ToDoリストを、React+TypeScriptで作成しています◎！
今回、入力フォームが未入力の場合は、保存されないようにif文で条件式を書いたのですが、少し躓いたので解決した方法を記録として残したいと思います。

##:pencil: 書いてみる
まず、ReactはJSX内に条件式を書くそうです。
なので、普通にif文を入れてみました。

“`javascript
if (inputTitle != null) {
リストを追加
} else {
リストを追加
“`
**エェーーー！通らないーーー！！**

なんで！？と思い調べたところ、**ReactのJSXでは、直接if文やfor文が書けない**とのことです。
そのため、

ツクールのおまじないからの卒業（即時実行関数編）

**（03/21/2021　01:00追記）
【※注意】
本記事には一つ大きな見落としがありました。
strictモードはスクリプト全体、または個別の関数に対してのみ適用可能であり、
ブロックスコープだと適用されません。
詳細は末尾にまとめましたので、末尾の追記も合わせてご一読ください。**

##結論
今回は短いです。
まず結論。

**「ES20xxでプラグインを記述する際は、即時実行関数はもういらないよ！
代わりに`{}`で囲めば十分だよ！」**
（※上記は追記前の片手落ちな表現です。
即時実行関数とブロックでは１点おおきな違いがあります。末尾の追記もご一読ください。）

以上です。終了。解散。

・・・これだけだとあんまりなので、もう少しだけ解説を入れてみます。
##そもそもなぜ即時実行関数を使っていたのか
**`var`が関数スコープだったから**です。
スコープについてはあまたある入門書、入門記事でも丁寧に説明されているのでここでは説明しません。
そもそもスコープがわからん、という方は[この辺](https://developer.mozilla.org/ja/