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

純粋関数について

# 純粋関数とは
純粋関数は処理の複雑度を決める鍵でもある。
一つのソフトウェアで純粋関数を割合が多ければ多いほど、システム全体の複雑度は下がる。
では何を純粋関数と言えるのか。
関数が以下の条件を満たす場合純粋関数と言える。

#### 純粋関数の条件
① 引数が同じの場合、常に同じ値を返す。
② 関数によってプログラムの状態が変化することはない。

以下のコードは純粋関数の例である。
“`javascript:javascript
function add(a, b) {
return a + b
}
“`
関数に引数として1, 2を入れると、必ず３が返す関すである。
関数の外部の影響を受けず、想定できる値が保証できる。
しかし、以下の関数はどうだろう。

“`javascript:javascript
const num = 2
function add(a) {
return a + num
}
“`
一見純粋関数に見えるが、よく見ると、関数外部の変数を参照していることがわかる。
number型の`num`は、現在`2`の状態であるが、これが`3`や`4`に変更

javascriptでじゃんけんゲーム

昔ながらのボタンを押して遊べるじゃんけんゲームを作ってみた。
⇒実際の動作はこちら

ただこれだとリセットボタンが何回も押されるとre()が何度も実行されて動きが早くなってしまう。
もっとこうしたら良いよ！とアドバイスくれる方、おねがいしますm(_ _)m

“`html

☆じゃんけんゲーム☆

グー
チョキ
パー

「’」を使用すると何が変わる？【JavaScript】

私の前々回の記事と前回の記事を読んでくださった方の中で、alert()の（）内に違和感を覚えて方はいらっしゃいますでしょうか？
※該当箇所をこれから記載しますので、リンク先に遷移してご確認いただかなくて問題ありません。

【前々回の記事】

https://qiita.com/monouge/items/b1a71acecdf6cf4536dd

【前回の記事】

https://qiita.com/monouge/items/7396a9d2e6dee879a2c0

前々回の記事では以下のように記載しました。

“`
alert(‘初めてのJavaScriptです！’);
“`

一方で前回の記事では、

“`
alert(A * 2);
“`

と記載しました（Aは事前に宣言した変数・入れ物で、値「10」が入っています）。

2つを比較すると、前者では（）内に「’」が使われているのがわかります。

今回はこの「’」を使用すると何が変わるのかについて説明していきます。

文字列として認識するために「’」を使用する

さて、既に答えが出てしまっていま

Stripe Payment Elementsでリダイレクトを３Dセキュア認証など、必要な時だけにする

Stripeの組み込み型決済フォーム、`Payment Element`を利用すると、決済完了時にリダイレクトが発生します。

“`js
const stripe = useStripe()
const elements = useElements()
if (!stripe || !elements) return null
stripe.confirmPayment({
elements,
confirmParams: {
return_url: ‘http://localhost:5173’,
},
})
“`

これはBNPL（後払い）決済などで発生するリダイレクトを、SDK側でハンドルするために行われています。

ただし、設定を行うことで「必要になった時だけリダイレクトする」挙動に変更できます。

## `confirmPayment`で`redirect: ‘if_required’`を設定しよう

クレジットカード決済やコンビニ決済・銀行振込などでは、リダイレクトせずに決済を完了させることができます。

Stri

JavaScript すっきりリファクタリング 2

ネット上で見かけたJavaScriptのコードをリファクタリングしていく企画です。

## 元コード

CSVファイルを取得して、それから<table>タグを作る。

“`js:元コード
let res = await fetch(“data.csv”);
let csv = await res.text();
let lines = csv.split(“\n”);
let table = document.createElement(“table”);

for (let i = 0; i < lines.length; i++) { let line = lines[i]; let cells = line.split(","); let tr = document.createElement("tr"); for (let j = 0; j < cells.length; j++) { let td = document.createElement("td"); td.textContent = ce

【Cesium】PLATEAUデータを表示する（那覇市）

## はじめに
この記事は#30DayMapChallenge2022 24日目の記事です。
テーマはFantasyです。
Cesiumを使って空想のような素敵なまち（イメージ）（沖縄県那覇市）のPLATEAUの建物データを表示してみます。


https://30daymapchallenge.com/

## CesiumJSとは
世界クラスの3D地球儀と地図を作成するためのオープンソースのJavaScriptライブラリ
アクセストークンの取得と地球儀表示については[こちら](https://qiita.com/asahina820/items/e575b843cdf76c0cfcfa)に記載しています。

## PLATEAUとは
国土交通省が主導する3D都市モデル整備・活用・オープンデータ化プロジェクトです。
3D都市モデルには、家屋やビルなどの「建築物」、都市計画区域

GAS 基礎編③メモ

GASの勉強中です。
自分用メモ

## 確認用メッセージボックスの表示

“`javascript
if (Browser.msgBox(‘シートの初期化’, ‘実行していいですか？’, Browser.Buttons.OK_CANCEL) === ‘cancel’) {
return;
}
“`

“`javascript
# function全体
function initSheet() {
var sheet = SpreadsheetApp.getActiveSheet();
var names = [‘taguchi’, ‘fkoji’, ‘dotinstall’];
var i;
var scores = [];

if (Browser.msgBox(‘シートの初期化’, ‘実行していいですか？’, Browser.Buttons.OK_CANCEL) === ‘cancel’) {
return;
}

sheet.clear();

for (i = 1; i <= 10; i++) { score

Storybook で特定の Story で Controls を無効にする

# 概要

[Storybook](https://storybook.js.org/) のアドオンの一種である [Controls](https://storybook.js.org/docs/react/essentials/controls) を使用するストーリーとしないストーリーがある際に、使用しないストーリーでは Controls パネルを使用できないようにする。

# モチベーション

粒度の小さいコンポーネントは1ストーリーで複数の props パターンをレンダリングすることがあり、その場合は Controls が不要になるため。

# バージョン

– `@storybook/react` 6.5.12

# 対応方法

各ストーリーの `parameters` フィールドで、 props ごとに Controls を無効化するための `exclude` オプションが使用できるが、ここで正規表現を用いることができるので、全ての props がマッチするようにする。

“`js
export default {
title: ‘SampleComponent’,

今日のアウトゥフィトゥを教えてくるobniz温度計を作成

### WHYこの企画？
最近の天気が寒くなってしまいました。
しかし、時々に奇跡的な暖かい日があります。
（自分は夏が大好きく、冬が苦手人間です）
特に出社する日は朝早いので、よく先日の夜先に衣装を準備しております。
しかし、こういう突然な変わりがあるので、アウトゥフィトゥを判断をミスする時もあります。
だから、もし朝ラインでアウトゥフィトゥのおすすめが送信してくれば、助かります！

### 成果物の紹介（Node-REDの構成）
1.obnizの温度センサーを応用し、今の温度を判断できる
2.温度をグループ分け、node-redのswitchで設定
3.何度から何度はどんなアウトゥフィトゥがいいのかを決まり、温度による、linebotに違うメッセージを送信を設定
### 動画
obnizの温度センサーが

はじめての投稿

今日、アカウント作りました。
これから今学んでるJSやReactの復習などをブログに残していきたいと思います。
たまに生活の話しもする予定です。
文章書くことはあまり得意じゃないけど、
がんばろ！

Node.js/Vue.js/Nuxt.jsとは

# はじめに
仕事でNuxt.jsを使ったのですが、その際にNode.js/Vue.js/Nuxt.jsがそれぞれ何なのかわからず、自分なりに調べたことをここにまとめておこうと思います。
情報量としてはまだまだ少ないので、メモレベルの内容になります。

# Node.jsとは
Node.jsとはJavaScriptをサーバー側で動作させる実行環境です。

特徴としては、大量の同時接続をさばけることで「ノンブロッキングI/O」方式を採用しているそうです。
(ここについては、詳しく理解できていないので参考URLを貼っておきます。)
※参考：https://www.kagoya.jp/howto/it-glossary/develop/nodejs/

また、従来はフロント側とサーバ側で言語が分かれていたのが、同じ言語で開発ができるという点でも非常に注目されています。

# Vue.jsとは
Vue.jsというのはJavascriptを用いてフロントエンドの開発を行うNode.jsのフレームワークとなります。
逆に、フロントエンドのフレームワークとしてはExpress.jsがあります。
※

webpackとは

# はじめに
「そういえばwebpackってなんだ？」と思い、調べたことをメモしておこうと思います。

# webpackとは
webpack（ウェブパック）複数のJavaScriptファイルを一つのファイルにまとめて出力するモジュールバンドラー(module bundler) です。
Vue.jsやReactなんかを扱っているとイメージが付きやすいかと思いますが、各機能ごとにjs/tsファイルが分かれていると思います。
そういった複数のファイルをまとめる(bundle)するためのツールです。

# webpackの利点
利点としては、リクエストの回数を減らせることです。
リクエストが増えるとパフォーマンス（表示速度）が落ちてしまうため、機能ごとに分けたファイルを別々に読み込むことはあまりよくありません。
「開発時はファイルを分けたい/実行時はまとめたい」を実現できるツールと言えるでしょう。

Babelとは何か

# はじめに
よく開発で目にする「Babel」ですが、
「そもそもBabelって何だ？」と思い、調べたことをここにまとめておこうかと思います。

# Babel(バベル)とは
Babelとは、JavaScriptのコードを新しい書き方から古い書き方へと変換するツールです。
また、併せて押さえておきたいものとして、ECMAScriptと呼ばれるJavaScript の基本仕様があります。

# ECMAScriptとは
元々JavaScriptはNetscape社のブラウザで使用される言語として作られました。
それを他のブラウザがJavaScriptを各々独自に拡張していき、
そのため、JavaScriptは標準化されていない言語だったとのことです。
それに対応するため、Netscape社が国際標準化団体のECMAに依頼してJavaScriptのコア部分を標準化したものがECMAScriptです。

# なぜ変換が必要か
ECMAScriptは、例えば「ECMAScript 2015/ECMAScript 2016/ECMAScript 2017/…」というようにバージョンが年々更新

【React】Testing Libraryのロール名のメモ

Testing Libraryでロール名が分からないときがあったので書き留めておく

### h1~h6タグ
“`typescript
const xxx = screen.getByRole(‘heading’);
expect(xxx).toBeInTheDocument();
“`

### buttonタグ
“`typescript
const xxx = screen.getByRole(‘button’);
expect(xxx).toBeInTheDocument();
“`

### inputタグ　テキストボックス
“`typescript
const xxx = screen.getByRole(‘textbox’);
expect(xxx).toBeInTheDocument();
“`

### inputタグ　ラジオボタン
“`typescript
const xxx = screen.getByRole(‘radio’);
expect(xxx).toBeInTheDocument();
“`

### inputタグ　チェックボックス
“

kintone と EDITROOM の機能連携の実例解説： 自作プラグインを利用した連携３―Vite と TypeScriptの導入

# 目次

– [目次](#目次)
– [はじめに](#はじめに)
– [作業](#作業)
– [本記事中の作業範囲](#本記事中の作業範囲)
– [どうして Vite を導入できるのか](#どうして-vite-を導入できるのか)
– [なぜビルドツールを導入したいのか](#なぜビルドツールを導入したいのか)
– [開発](#開発)
– [1. Vite の導入](#1-vite-の導入)
– [2. TypeScript の導入](#2-typescript-の導入)
– [(opt.) kintoneオブジェクトの型推論を有効化](#opt-kintoneオブジェクトの型推論を有効化)
– [所感](#所感)
– [おわりに](#おわりに)

# はじめに

アップデイティットの毛利です。

前回に引き続き、弊社の「[EDITROOM](https://editroom.updateit.co.jp/)」と kintone の自作プラグインを繋いで動作させるために作業を進めていきます。

前回はこちら：

https://qi

JavaScriptのforEach文

paizaの問題集でforEach文を利用しました

“`JavaScript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
//入力した文字列をsplitメソッドを使って分割
const array1 = lines[0].split(‘ ‘);
// forEach文を使用して各要素をそれぞれ標準出力する
array1.forEach(function(element){
console.log(element);
});

いくつかの言語での全角スペースの挙動

## 最初に

言語によって、全角スペースが混入したときの挙動が違います。

各言語によって、どのような違いがあるのだろうかと思い、簡単に調べてみました。

### Python・Javaは、検知してエラー

全角スペースが混じってるだけで、それを検知しエラーとして教えてくれました。

– Python(3.8.2)は、`SyntaxError: invalid character in identifier`と表示。
– Java(openjdk 15)は、`error: illegal character: ‘\u3000’`と表示。

Javaは文字コードまで教えてくれるので、親切ですね。

### Rubyは、変数名に扱えてしまう

Rubyでは、日本語も変数名に使うことができ、全角スペースも変数名に使えてしまいます。

“`fullwidth_space.ruby
　 = “Hello, world!”
p 　 # “Hello, world!”
“`

上記のコードは、全角スペースに文字列を代入して出力してます。

そういうわけで、もし全角スペースが混じってもそれを検知

node.jsでファイル移動する方法

node.jsでファイル移動する方法について調べたのですが、あまり良い情報がなかったので記事にします。

よく出てくるのが、`fs.renameSync`を使う方法
“` javascript
import fs from “fs”;

fs.renameSync(‘/home/hello.txt’, ‘/tmp/world.txt’);
“`
renameというメソッド名にもかかわらずファイル移動も出来ちゃうのですが、弱点があってLinuxだとパーティションを跨ぐとエラーになります。Windowsだとドライブを跨ぐと下記のようなエラーになります。
“`
Error: EXDEV: cross-device link not permitted
“`

node.jsの公式サイトの説明
https://nodejs.org/docs/latest/api/fs.html#fsrenamesyncoldpath-newpath

解決策としては、パーティションやドライブを跨ぐ移動をしたときは下記のようなメソッドを作成すると良さそうです。
“` javascript
import

【MapLibre】アイコンにアニメーションを付ける

## はじめに
この記事は#30DayMapChallenge2022 23日目の記事です。
テーマはMovementです。
MapLibre GL JSを使ってアイコンにアニメーションを追加してみます。


https://30daymapchallenge.com/

## アイコンにアニメーションを追加する
[公式のサンプルコード](https://maplibre.org/maplibre-gl-js-docs/example/add-image-animated/)を参考に実装します。
[11日目:Colour Friday: Red](https://qiita.com/asahina820/items/5158ef09dd043dbc8c5e) で使った「赤」がつく駅名のGeoJSONファイルを使います。

“`index.html

FormDataでファイル名に日本語が含まれるファイルをPOSTすると文字化けした

? 初投稿です。
まだまだ未熟者ですので、温かい目で見ていただけると幸いです。

## やりたいこと
家庭用GooglePhotoのようなものを製作したい。
フロントはreactで製作し、Material UIを活用しUI周りを整える。
バックはexpressで製作し、multerで画像を保存する。

フロントからバックへの画像送信はaxiosを用いてPOSTする。

## 状況
題の通り、inputで選択したファイルの名前に日本語を含む場合、バック側で受け取った際にファイル名が文字化けする。

“`js:フロント
// フォームデータに画像追加
const data = new FormData()
images.map((image) => {
data.append(‘images’,image)
})

// 送信
await axios.post(
url,
data,
{
headers: {
‘Content-Type’: ‘multipart/form-data’,