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

代入したのに、代入されない・・・？ちょっと不思議なオブジェクト【#ゆめみからの挑戦状】

# 先日、Twitter上でこんなクイズを出題しました。

JavaScriptのクイズです。

【 #ゆめみからの挑戦状 ★第8弾】
「たかし」を代入したのに「やめ太郎」と出力されました。なぜ？

【お題】
/* ここに解答を書いてください */ の部分を埋めてください。

【解答方法】
引用RTで解答

【結果発表】
10/24（月）

【出題者】
やめ太郎 @Yametaro1983 pic.twitter.com/l8GobWBrA6

— 株式会社ゆめみ | YUMEMI (@yumemiinc) October 13, 2022

# クイズの内容
`”たかし”`を代入したのに`”やめ太郎”`と出力されました。なぜ？

コードの`/* ここに解答を書いてください */`の部分を埋めてください。

### コード
“`diff_javascript:JavaScript
const user = /* ここに解答を書いてください */

user.name = “たかし”

console.log(user.name)
// -> “やめ太郎”
“`

# この記事の内容
この記事では、上記のクイズの正解発表と解説をして行きます。
また、**別解**や**面白解答**もいくつかご紹介したいと思います。

# 正解発表

想定していた解答は以下です。

“`diff_javascript:JavaScript
const user = new

setTimeout の真の力、あなたは知っていますか？

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev) です。

皆さんは「 `setTimeout` とはどんな関数でしょう？」と聞いたら、どう答えますか？

おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか？

“`javascript
function main() {
console.log(‘動いたよ！！’);
}

// 大体 ３ 秒後に main 関数が動き出す
setTimeout(main, 3000);
“`

大雑把な理解としては問題ないですが、実は **`setTimeout` の隠された能力はそれだけではありません**。

`setTimeout` の隠された能力を知るとどんな良いことがあるのでしょうか？
例えば、次のような良いことがあります。

* **ブラウザに対する理解が深まる**
* **Web サイトのパフォーマンスを向上させることができる**
* **ドヤれる**

まず、 **ブラウザに対する理解が深まります** 。
かのアリストテレスはこう言い残しまし

Python,Ruby,PHP,Java,JavaScript,Perlの算術演算子の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの算術演算子の比較

# Python

https://qiita.com/G-Rape/items/cd3f2f284ba990164564

# Ruby

https://qiita.com/SUZUKI_Masaya/items/eeea6cd36cc265d2dbf0

# PHP

https://qiita.com/mzmz__02/items/8bfbcf2cd48d9e9f2806

# Java

https://qiita.com/morioheisei/items/63088c61e8234dc1f7f5

# JavaScript

https://qiita.com/uhyo/items/cc92a553059274d85403

# Perl

https://perlzemi.com/blog/2

【JS】Fetch API について

Fetch APIについて学んだことをメモ。
## まずは非同期処理について
簡潔に言うと、実行した処理が完了するのを待たず、次の処理を実行する動きのこと。
反対に、同期処理は実行した処理が完了するまで次の処理を実行できない。
〜人間界で例えると〜
非同期処理：歯磨きしながらスマホをいじりつつ音楽を聴くことができちゃう
同期処理：歯磨き完了→スマホいじり完了→音楽が聴ける

## Fetch APIとは
非同期処理を利用できるAPIの一つで、非同期処理でデータの送受信をすることができる。
Fetch APIのfetchメソッドでは、簡単で論理的な方法で、HTTPリクエストを発行して結果を見ることができる。

具体的な詳細については、下記記事の説明がわかりやすかった。
[JavaScriptのFetch API について](https://qiita.com/sotasato/items/31be24d6776f3232c0c0#fetch-api%E3%81%A8%E3%81%AF)

fetchメソッドでデータを取ると、返り値としてPromiseを返す。

## Promiseとはな

【プログラミング学習方法】独学とは何かについてもやもやしていたから投稿してみる

こんにちは。
プログラミング見習いのSarasaです。
これまで数多のエラーとの戦いを記事にしてきた私ですが、
「そういえば自分の学習方法についてまとめた記事って書いてなかったよなあ～」
ということに気が付いたので軽～くまとめていきたいと思います。

# そもそもプログラミングスクールに通うという選択肢などなかった件について
私のスペックを簡単にまとめると
* 90分の授業が聞けない（お前は何をしに大学に行っていた）
* みんなと同じことができない（集団行動！？とは）
* 単純作業はできないのに考えることは大好きという矛盾を抱えた面倒なやつ（先生から嫌われるタイプｗ）
* とりあえず映画をみせておけばおとなしくなる（関係ない）

とまあダメダメスペックの塊すぎて少し自分でも自分のことが心配になってきました。

よくプログラミングスクールの是非についての議論やらなにやらをSNSで拝見しますが、そもそも「人の組んだカリキュラムに従って何かをする」ことのできない私にとって、スクールに通える人はもはや才能の塊にしか見えませんでした。

加えて、「本を読んでいると3分で寝る」ため、技術書も読めま

VueCLIでVue3＋Vuetify＋VueRouterをセットアップする

# はじめに
Vueを勉強しはじめたものの、開発環境をセットアップするために方法がありすぎて迷子になってしまったため、自分用にまとめました。
Vue3、Vuetify、VueRouterをインストールすることで、フロント側の開発環境をセットアップする手順です。

# セットアップ方法
## 前提条件
ローカルのバージョンは下記のとおりです。
OS：MacOS Monterey
Node:v16.17.0
npm:8.15.0
vue:@vue/cli 5.0.8

## プロジェクト作成（Vue3のインストール）
下記コマンドを実行する。どのバージョンのVueを使用するかなどが聞かれるので、Vue3を選択する。その他はお好みで。
“`
vue create my-app
“`
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
で3.xを選択する。
“`
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue

typescriptのtypeと同じような動きをpythonで実装したい。

以下のようにObjectに型をtypescriptでつけることがある。これをpythonでも同じようにやりたい。

“`typescript
type ProfileInterface = {
name: string
title: string
email: string
}

const profile_objects: ProfileInterface = {
name: “test”,
title: “mamushi”,
email: “test@hoge.com”
}
“`

## 【解決策】TypedDictを使用する。

“`python
from typing import TypedDict

class ProfileInterface(TypedDict):
name: str
title: str
email: str

profile_objects: ProfileInterface = {
“name”: “mamushi”,
“title”: “types

MapLibre GL JS入門

## MapLibre GL JSとは
– オープンソースのJavaScript地図ライブラリ
– Mapboxのオープンソースフォーク版
– WebGLを使用してベクトルタイルとMapLibreスタイルからインタラクティブなマップをレンダリングできる

## 導入
– HTMLのheadタグ内にMapLibre GL JSのcssとJavaScriptを指定する
– 執筆当時の最新バージョンは2.4.0だった
“`html
“`

## 背景地図表示
HTML, CSS, JavaScriptファイルを作成する

“`index.html

【JS】学習したメソッドのMEMO

備忘録として淡々とJSのメソッド書いていくだけです。

## pushメソッド
配列の最後に新しい要素を追加するメソッド
“`javascript:例
const fruits = [“りんご”, “バナナ”, “メロン”];

console.log(fruits); //=> [“りんご”, “バナナ”, ”メロン”]

fruits.push(“いちご”); //配列に新しい要素を追加

console.log(fruits); //=> [“りんご”, “バナナ”, “メロン”, “いちご”]　※要素が追加されてる
“`

## forEachメソッド
配列の中の要素を1つずつ取り出し、全ての要素に対して繰り返し処理を行う
“`javascript:基本構文
配列 = [要素１, 要素2, 要素3]

配列.forEach((引数) => {
処理内容の記述
});

//①配列の要素1から順番に引数に渡され、繰り返し処理が行われる
//②forEachの引数に渡されている関数をコールバック関数と呼ぶ
“`

“`javascript:例
const frui

サーバ上のpythonとブラウザ上のjavascriptとデータ通信を行う

# やりたいこと
– pythonで簡単なゲームのプログラムを書いた。
– HTMLを駆使しながら、ブラウザ上の「GUI」でこのゲームができるようにしたい。
→　javascriptとpythonでデータのやり取りができれば大体OK

# この記事で説明すること
ここでは **WebSocket** の基本的な使い方をまとめておきます。
– javascript ↔ pythonのデータ通信が簡単に実装できる。
– ゲームユーザ（クライアント）がゲームから途中離脱した場合などの接続管理が簡単になるっぽい。複数人が個別でバラバラに接続してもOK。

# さっそくサンプル
### 使い方
1. webscoketsをpython環境にインストール
“conda install -c conda-forge websockets“を実行すればOK。簡単。

1. 下の“server.py“を保存して実行。
“`python:server.py
”’Echoサーバの実装”’
import asyncio
import websockets

# この関数に通信しているとき

便利なJavaScriptワンライナー

開発でよく遭遇するするユースケースに対するワンライナーをまとめてみました。
適切に使用することで短くて読みやすいコードを書いていきましょうー

## EcmaScript
### 配列をシャッフル
“` JavaScript
const shuffleArray = (arr) => arr.sort(() => Math.random() – 0.5)
shuffleArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// [8, 6, 5, 7, 9, 1, 2, 3, 10, 4]
“`

### ユニークな配列を取得
“` JavaScript
const removeDuplicateArray = (arr) => […new Set(arr)]
removeDuplicateArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1])
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
“`

### 数値の配列の平均を取得する
“` JavaS

paizaラーニング レベルアップ問題集 paizaの森練習問題コンテスト過去問題6 JavaScript 採点

採点 (paizaランク C 相当)

https://paiza.jp/works/mondai/forest_contest_006/forest_contest_006__d_scoring

ワンライナーで解いてみました。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

console.log(lines.slice(1).reduce((a, m) =>
a += m === “correct” ? 2 : (m === “incorrect” ? -1 : 0), 0)
);
“`

paizaラーニング レベルアップ問題集 paizaの森練習問題コンテスト過去問題6 JavaScript 中央値

中央値 (paizaランク C 相当)

https://paiza.jp/works/mondai/forest_contest_006/forest_contest_006__d_median

小さい順か大きい順に並べ替えて、その真ん中の値が中央値です。
５教科なので、３教科目です。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

console.log(lines.slice(0).map(Number).sort((a, b) => a – b)[2]);
“`

paizaラーニング レベルアップ問題集 paizaの森練習問題コンテスト過去問題6 JavaScript 最大の差

最大の差 (paizaランク C 相当)

https://paiza.jp/works/mondai/forest_contest_006/forest_contest_006__d_largest_diff

最大最小を記録し、差を取ります。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

let max = 0;
let min = 100;
lines.slice(0).forEach(m => {
max = Math.max(max, Number(m));
min = Math.min(min, Number(m));
});
console.log(max – min);
“`

[LINE-Splatoon3Bot] #1 Spla3APIから情報を取得・LINEへ送信

# 目次
[1.はじめに](#1-はじめに)
[2.前回のおさらい](#2-前回のおさらい)
[3.GASでjsonを扱う](#3-GASでjsonを扱う)
[4.SplaAPIを使ってみる](#4-SplaAPIを使ってみる)
[5.実際にコードを書いてみる](#5-実際にコードを書いてみる)
[6.さいごに](#6-さいごに)
[7.今回のコード](#7-今回のコード)
[8.参考など](#8-参考など)
# 1. はじめに
この記事では先日宣伝も含め投稿した、[[LINEBot] Splatoon3の多機能Botを作った件](https://qiita.com/Sorakana_jp/items/dce227e48bdb01cda7b4)のステージ情報取得について解説します。
(この記事はLINEMessagingAPIを使用できることを前提とし、筆者はWindows10・GoogleAppsScriptを使用しています。)
# 2. 前回のおさらい
Botについて紹介を主にしました。
こちらから友達追加などできますのでよければ。(友達追加すると筆者が泣いて喜びます。)
[友達追

【javascript】とにかくはじめたい

# はじめに: Javascript がとにかく分からない

何度も挫折している、役立たずで仕事ができなかったのが、このjava script を用いたfrontend 開発です。今回、少し、心を落ち着けてメモしておきたいと思います。

とりあえず、node.js の導入をメモしておきます。

WSL2で作業しています。下記にある通りの内容をなぞっています。

https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

# 内容

## インストール

WSL2 ubuntu20.04 で、下記を行います。パッケージ管理ソフトでnode.js を導入することが推奨
されているようです。ここではnvm が使われていましたが、他にもあるそうです。まぁ面倒くさい。

– nvm をインストール
– nvm を利用してNode.js と Node Package Manager (npm) をインストールする

“`
$ sudo apt-get install curl
$ curl

paizaラーニング レベルアップ問題集 paizaの森練習問題コンテスト過去問題6 JavaScript ロボットの移動

ロボットの移動 (paizaランク D 相当)

https://paiza.jp/works/mondai/forest_contest_006/forest_contest_006__d_robot_movement

x,yそれぞれの絶対値の和が答えです。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
console.log(lines[0].split(” “).reduce((x, y) => Math.abs(x) + Math.abs(y)));
“`

paizaラーニング レベルアップ問題集 paizaの森練習問題コンテスト過去問題6 JavaScript 最大イニング

最大イニング (paizaランク D 相当)

https://paiza.jp/works/mondai/forest_contest_006/forest_contest_006__d_maxinning

JavaScriptで解いてみました。
降板イニングを`leave`とすると、初期値は`1 ≦ i ≦ 9`以外なら任意なので0とします。完投の時は`leave = 0`のまま、完投できなかったら`leave`に降板イニングを記録することにします。
iイニングが終わった時点で、投げた球数がkを超えていたら、iイニングで降板します。降板イニングiを`leave = i`で記録します。

iイニング終了時、球数がkちょうどだったときに考えることがあります。

>ちょうどイニングの終了時に k 球に到達した場合は、もうそのイニングが終了してしまい、投手を交代することができないため、次のイニング開始時に降板します。(入力例 3 のケース)

すなわち、投げ終わったイニングをiとすると`leave = i + 1`になります。
ただし、最終9イニングに球数がちょうどkに達したら、完投した

paizaラーニング レベルアップ問題集 paizaの森練習問題コンテスト過去問題6 JavaScript 球数制限

球数制限 (paizaランク D 相当)

https://paiza.jp/works/mondai/forest_contest_006/forest_contest_006__d_balllimit

JavaScriptで解いてみました。sliceとreduce、三項演算子で解いてみました。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, k] = lines[0].split(” “).map(Number);
const sum = lines.slice(1, n + 1).map(Number).reduce((a, b) => a + b);
console.log(sum >= k ? “No” : “Yes”);
“`

Ingress IITC-CE で遊ぼう② Hello World!

# Ingress IITC-CE で遊ぼう② Hello World!

## 前回のおさらい

[Ingress IITC-CE で遊ぼう① IITC-CEについて](https://qiita.com/syakesaba/items/845563979fdf261a4984)

## 自作IITC-CE Pluginを動かしてみよう！

### まずはHello Worldを動かしてみる。

1. [alert-helloworld.js](https://raw.githubusercontent.com/syakesaba/iitc-plugin-alert-helloworld/main/alert-helloworld.js)の中身をすべてコピー
1. ChromeでTemperMonkeyのアイコンをクリック
![スクリーンショット 2022-10-22 18.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123740/c55033d6-55f0-f1fb-470a-5ddf