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

今週の学び　第5回

# 今週の学び

JavaScriptなど

– 分割代入
– 配列を書く時[]大カッコのみ使う、spritなど

– reverse()
– 配列の要素を逆順にする

– join()
– 配列の要素をすべて連結して文字列にする

– 単純にスペースを開けたい時
– spritではなく「+ ‘ ‘ +」と書いて、2つの要素を並べる時に使ったりする

– 代入は右から左へ対して書く
– プログラミングの大原則

– メソッドは結合できる

– 小数を切り捨て、切り上げする方法
– 切り捨てはvar a = Math.floor( 1.5 ) ;
切り上げはvar b = Math.ceil( 1.5 ) ;

– 再定義はできない

– .trim();
– 文字列の両端の空白を削除

– mapメソッドのNumberはNumber型にするという意味
– mapメソッドの(Number)はNumber型にするという意味

– length
– lengthは配列の数がその時によって変わるからつける

–

JavaScriptで改行前後の文字列をそれぞれ抽出したい

## 結論
`substr`と`indexOf`を組み合わせれば良い

## 改行前の文字列を抽出する

“`javascript
// 改行前の文字が欲しい
const text = “test1\ntest2”;
const text_first_line = text.substr(0, text.indexOf(`\n`));
console.log(`text_first_line=${text_first_line}`);

// 結果
test1
“`

## 改行後の文字列を抽出する

“`javascript
// 改行後の文字が欲しい
const text = “test1\ntest2”;
const text_second_line = text.substr(text.indexOf(`\n`) + 1);
console.log(`text_second_line=${text_second_line}`);

// 結果
test2
“`

## 参考
https://qiita.com/pyon141/items/b8ebbbcc0786c0d

“????????” のような装飾文字に変換するJavaScriptのライブラリを書いた

Web上では、アルファベット（ASCII文字）を `????????` や `????????` のような Unicode 上の装飾文字（記号）を用いて表記するお遊びがあると思います。俗に「フォント変換」[^1]などと呼ばれているアレです。
ブラウザからであれば[yaytext](https://yaytext.com/)などで簡単に”変換”できるのですが、Discordのbotに組み込むにあたって（自分にとって）望ましい挙動をするライブラリが見当たらなかったので、サクッと作ってnpmに公開しました。

ドキュメントは **https://www.npmjs.com/package/unicode-text-decorator** をご覧ください。

[^1]: Unicode上に存在する別の文字にreplaceしているだけであり、フォント（書体、タイプフェイス）に対する操作ではないため、技術的にはこの呼称は不正確です。

## 使い方

**Note: 「背景」の節で言及しているアクセシビリティ上の問題についてもご一読ください。**

非常にシンプルです。

“`sh
npm i

【１２日目】React使用しメモアプリを作成１ [monaca]

## はじめに
今回はReactを使用してメモアプリを作成します。ただReactの知識も乏しいところからスタートするので少しずつの更新になります。今回は少しでも使い方に慣れていくように基本的な操作を練習していきます。

## プログラム
今回組んだプログラムは以下の通りです。順を追って説明していきます。
“`javascript
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Card } from ‘react-onsenui’;
import { Toolbar, Page, Button } from ‘react-onsenui’;
import { useState } from ‘react/cjs/react.production.min’;

import SecondPage from ‘./SecondPage’

let middle;

const handleChange = (e) => {
console.log(e.target.value);
midd

開発合宿をやってみた

## 概要
せっかくGWなので、チーム開発をやってるメンバーで開発合宿とやらをやってみたので、
備忘録や反省・良かったことをまとめてみます。

## 今回の開発チーム
私が勉強でお世話になっているネイティブアプリ＋Webアプリの開発チーム（本業とは関係ありません）
今回の参加メンバーは自分を含めて4人です。
私は神奈川にいますが、他メンバーは関西で普段はリモートでやりとりしながら開発を進めてます。

## スケジュール
5/4(水)・5/5(木)
1日目は開発（作業）と内容の発表会、
2日目は懇親の時間として、浜松を観光することにしました。

## 開催地
静岡県浜松市
選定理由は浜名湖が綺麗そう＋うなぎが美味しそう、くらいのもんです。

## やってみた結論として
まず、やってみて良かったと思います。
何が良かった・何をした等はこれから記載していきます。

## 合宿でやったこと
### 1日目
今回は各メンバーが色々やってみたいことがあった＋メンバーの中で実装というより
サービス管理や機能要件を考えるメンバーがいたため、全員での開発は行いませんでした。
なので、各メンバーは以下の内

【JavaScript】処理中の入力待ち

# したいこと

メソッド内で処理を一旦止めて、画面のイベントの発火を待ちたい。

# このようにするのだ

https://mogamoga1024.github.io/JSInputWaitingSample/

“`html:index.html

Yes
No

JavaScriptで作る変則リバーシ

# はじめに
JavaScriptの練習のためにリバーシのゲームを作りましたので、ご紹介したいと思います。
少し目新しさを加えるために、以下をいつもとは違うものにしてみました。

– 盤面の形
– 石の初期配置
– 盤面の色

この点で、**変則リバーシ**と題させていただきました。

なお本記事は、基本的なリバーシの処理やAIの作り方に関しましては
**全く踏み込まない内容**となっております。そのあたりは必要に応じて
他の記事などを参照し、情報を補っていただけたらと思います。

# できたもの
以下のような、ブラウザで遊べるものを作りました。
自身が先手(黒)で、相手(白)はランダムに打ってくるコンピュータ、としています。
axiosで取得したレスポンスの型定義について

# はじめに
ReactでTypeScriptを使用している際に、型の問題でエラーが発生し詰まってしまいました。
解決方法等をアウトプットします。

# 状況
railsでAPIサーバを立て、React側でaxiosを用いてリクエストを送りレスポンスを取得したいという状況です。
今回は一覧画面のレスポンスを取得したいものとします。

### レスポンス(json)
レスポンスは以下のようなものとします。

“`
{
“status”: 200,
“result”: [
{
“id”: 1,
“name”: “book1”,
“image”: “http://example/hoge.png”,
“price”: 4345,
“purchase_date”: “20022-01-01”
},
{
“id”: 2,
“name”: “book2”,
“image”: “http://example/hoge.png”,
“price”: 123,

JSでSMFを読み書きする

# 動機
楽譜データの共有はやっぱりSMF
うちのウェブアプリの独自フォーマットをSMFで書き出せたらなぁ
でもSMF関連のライブラリどれも古いしでかいなぁ

作るか！！

# SMFの構造
ほとんどこちらの記事に学ばせていただきました

https://sites.google.com/site/yyagisite/material/smfspec

ところどころ怪しいところがあったのでそのときは
[日本のちゃんとした団体が翻訳した仕様書](https://amei.or.jp/midistandardcommittee/MIDI1.0.pdf)を確認

簡潔にまとめます
大まかな構造は
– ヘッダーチャンク
– チャンク名(4byte)
– チャンク長(4byte)
– フォーマットバージョン(2byte)
– トラック数(2byte)
– 時間単位(2byte)
– トラックチャンク
– チャンク名(4byte)
– チャンク長(4byte)
– MTrkイベント
– MTrkイベント
– MTrkイ

ワードクラウドを自作ニュースアプリに追加してみた

## はじめに
この間Node.jsで多言語Webニュースアプリ作ってみました

https://qiita.com/aibazhang/items/a53893c22c00d5962e62

https://www.multitrue.news

ニュースのタイトルと概要だけではつまらないので、単語の出現頻度によって直近一週間のニュースからワードクラウド作って、一目で世の中の出来事を確認できたら面白そうじゃないかと思いながら、ワードクラウドをニュースアプリに追加してみました。

## 詳細

ソースはこちらから確認できます。

https://github.com/aibazhang/multitrue

### 下準備
日本語と中国語などは英語と異なり、単語と単語の間スペースがないので、形態素解析が必要です。簡略化するために、今回は英語のワードクラウドのみを作ることにしました。人称代名詞や助動詞のような`Stop Words`をワードクラウドに出しても意味がないので、NLTKの英語`Stop Words`辞書を利用します。

https://gist.github.com/sebl

【React】 Uncaught Error: App(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. エラーの解決方法 【Create React App】

## エラーが発生

– Reactアプリ開発中、コンパイルエラーは発生していないが、画面が何も表示されなくなった
– Chromeのコンソールには以下のエラーが表示

“`
react-dom.development.js14169
Uncaught Error: App(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
“`

## エラーの原因
return 部分を誤って削除してしまっていた
“`App.js
import React from ‘react’;
import ‘./App.css’;
import ‘./service/firebase’;
import Header from ‘./components/Header’;

function App() {
// 原因： 以下をreturnしていない

SourceMapとは

# SourceMap

– 前提知識
– ブラウザが実行するjavascritpソースなどは、元の開発者のソースと違い、コンパイルにより変換されていることがある

– 開発者が効率よくサーバーからクライアントにファイルを送信するために、minify(ファイルを小さくすること)を行う

## SourceMapファイルとは
– コンパイル前とコンパイル後の対応関係を示したファイル

– json形式で記述されている

### なぜSourceMapが必要なのか
– コンパイル後のファイルは見づらく、デバッグがしずらい
– SourceMapを使用することで、ブラウザがコンパイル前のファイルをデバッガーに提供する

AppletをJSに変換してみる 後編

これは後編です。[前編](https://qiita.com/noty2008/items/c90820db35e2f7feabcb)をまだ読んでいない方は、まずそちらからお読み下さい。
# クラスメソッドの最適化
[前編](https://qiita.com/noty2008/items/c90820db35e2f7feabcb)の最後に、「アプリケーションのパフォーマンスを低下させる」と言いましたが、まずはその理由と対策をご紹介します。

## 原因
パフォーマンスを低下させる状況として、「同じクラスのインスタンスを大量に使用する場合」があります。例えば、次のようなJavaScriptのコードを考えてみましょう。
“`
function Hoge()
{
this.a = 0; this.b = 0;
this.setAandB = function(a, b) //・・・(*)
{
this.a = a;
this.b = b;
}
this.sum = function() //・・・(*)

ゼロから始めるLINE BOT開発

# はじめに

LINE BOT（ライン ボット）とは、**ユーザーからの応答に自動で答えるLINEアカウントの総称** です。
調べてみると作成方法は3つほどありました。

1. LINE管理画面で作成
2. Messaging APIで開発
3. FirstContactで作成

一番簡単なのは、管理画面からポチポチすればいい1です。
今回はAPIを使って開発する2をチョイスしてみました。

本記事では備忘録としてやったことを残しておきます。

# 開発手順
## 1. LINE公式アカウントを作成

[LINE for Business](https://www.linebiz.com/jp/)にアクセスして、右上の「アカウントの開設（無料）」から手順に沿ってアカウントを作成。
業種は個人で作成しました。

## 2. LINE Developersでプロバイダーの作成

[LINE Developers](https://developers.line.biz/ja/)にアクセスして、「プロフィール」＞「LINE Business ID」からLINE個人アカウントの認証を行いま

JavaScriptでシンプルなオブジェクトを作成する

# オブジェクトはプロパティやメソッドから構成されている。
プロパティとは、オブジェクトの状態や特性を表すための情報のことであり、メソッドはオブジェクトを操作するためのものである。

“`javaScript:sample.js
‘use strict’;
let sampleObject = {
numarr:[1,2,3],
greet:function(){
console.log(‘hello’);
}
}

console.log(sampleObject.numarr);
sampleObject.greet();
“`

結果:[ 1, 2, 3 ]
hello

Three.jsを使ってみる(入門編)

# はじめに
おはようございます。こんにちは。こんばんは。
Watatakuです。
本日は題名にもあるとおり「Three.js」をやっていきます。

# Three.jsとは
[公式サイト](https://threejs.org/)
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。

# 始める前に
「Three.js」を始める間にcdnを読み込んでおきます。

“`html

“`
WebGLの処理はHTMLページの読み込みが終わってから実行させます。addEventListener()関数を使ってDOMContentLoadedイベントが発生するのを監視させ、ページが読み込み終わったときに実行させたい関数を指定します。この関数init()の中にThree.jsのコードを書いていきます。

“`html

JavaScript 高階関数

# 高階関数とは
高階関数とは
**「関数を、引数や戻り値に持つ関数」**
のことです。

# 例
“`javascript
function arrayWalk (array, f) {
for (var key in array) {
f(array[key]);
}
}

function showData (value) {
console.log(value);
}

var ary = [“Hi!”,”My Name is Tom!”,”Nice to meet you!”];
arrayWalk(ary,showData);

“`
“`
Hi!
My Name is Tom!
Nice to meet you!
“`

この場合、arrayWalkは引数に関数を持っていて実行しているため、高階関数になります。
また、呼び出される関数のことを**コールバック関数**と言います。

# 使いどころ
丸投げになってしまいますがこちらの記事がとても分かりやすかったです。
— [高階関数を書いたら、中級者になれた気がした。を批判

【図解】ReactのuseRefとuseStateの違いを理解する

## はじめに
業務でuseRefをさわる機会があったのですが、useStateとの違いをイマイチ把握できなかったので、整理しました。

## useRefとuseStateの違いまとめ

値更新時のレンダリング有無がポイントのようです。

| 項目 | 値の保持 | 値更新時のレンダリング |
| ——– | ——– | ———————- |
| useRef | できる | されない |
| useState | できる | される |

## 具体例

### サンプルソースコード

“`app.js
import “./styles.css”;

import * as React from “react”;

export default function App() {
const [count, setCount] = React.useState(0);
const countRef = React.useRef(0);

ブラウザの開発者ツールのコンソールで JavaScript を実行してページ内の情報の一部を一括取得： connpass のページを例に

タイトルの通りで、何らかの Webサイトを開いた状態で、ブラウザの開発者ツールのコンソールに JavaScript のプログラムを書いて実行し、その Webサイトの情報をプログラムの処理で得るようなことをやる話です。

自分が上記の処理をやろうとしたのは、とある閉じたネットワーク内のサイトで情報の一括取得をプログラムでやると良さそうな状況があったためでした。（そのサイトを扱う PCの 環境的な事情で、ブラウザの自動操作系の外部プログラムとか、ブラウザ拡張機能は使えない状況でもあったり…）。
その閉じたネットワーク内でやった話の一部を、将来の自分のメモも兼ねて記事にしておきたかったのですが、そのサイトを扱う話は直接記事にはできないので、イベント主催・参加関連でお世話になっている connpass のサイト（※　以下の URLで見られる、自分自身のダッシュボードのページ）を題材にして、話を進めていくことにしました。

●ダッシュボード – connpass
　https://connpass.com/dashboard/

## 今回やること
ひとまず、 connpass のダッシュボ

bfcacheには気を付けよう

##### ある日の弊社
営業さん「ブラウザバックした時クリックが反応しなくなっちゃったってお客さんから連絡来てるんですけど」
　　ぼく「！？」

##### 何が起こったか
そもそも上記問題が起こる直前に、クリック連打した時連続で遷移のメソッドが起動してしまってただでさえクソ重いDBに負荷をかけられる、というクソみたいなコードを書いてやがったので、loadイベントで初期化したフラグのオンオフを見て、オンだったら起動しない、みたいな処理を書きました。こんなの
“`JavaScript
$(window).on(‘load’, function(){
hogeObject.flag = false;
});
$(“.hogeButton”).on(‘click’, function(){
if(!hogeObject.flag){
hogeObject.flag = true;
pageShow(this);
}
});
“`
が、ブラウザバックした時にloadイベントで初期化すべきフラグが初期化されず、hogeButtonクラスのボタンをクリックしても遷