f@ctor

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

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

【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

元記事を表示

Ingress IITC-CE で遊ぼう① IITC-CEについて

# Ingress IITC-CE で遊ぼう

## Ingressって？
NIAという組織がかれこれ10年くらい続けている位置情報を用いた社会実験。位置情報ゲーム。体育祭的に二色の組に分かれて熾烈な抗争をする。[Ingress](https://ingress.com/)という名前だが、NginxやKubernetesとは関係ない。とりあえずインストールしてアカウントを作らないと何もできないのでアカウントを作ろう。

– [Apple　iOS Ingress-Prime](https://apps.apple.com/jp/app/ingress-prime/id576505181)
– [Google Play Android Ingress-Prime](https://play.google.com/store/apps/details?id=com.nianticproject.ingress&hl=en&gl=US)

このゲームを始めるなら緑色の陣営にするとQOLが向上するらしい

## IITC-CEって？

Ing

元記事を表示

Node.js(axios)からQiita APIを利用して指定したユーザーの記事を取得するメモ

たまに書くけどまとめてなかったので自分用メモとして残しておきます。

axiosを使ってQiita APIをアクセストークン付きで利用します。

## アクセストークンの取得

https://qiita.com/settings/tokens/new

> ![スクリーンショット 2022-10-22 17.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e7566f42-ae84-a867-efe4-6e756b8e5331.png “スクリーンショット 2022-10-22 17.15.25.png”)

スコープのチェックは`read_qiita`だけでOK

> ![スクリーンショット 2022-10-22 17.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/38fbb336-831f-142c-23ed-e19466ed23b9.png “スクリーンショット 2

元記事を表示

Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 3

Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 3

`JSON.parse()`を使用したときのエラー

## 原因
– 引数に渡った文字列がJSONの文法になっていない

“`:json
‘”{“result”:{“data”:[[1652040000,34361.96,34751.28,33701.01,…
“`
サーバーサイドから渡したデータを、不必要にシングルクォーテーションで囲っていたことが原因となっていた

“`JavaScript:sample.cshtml

“`

元記事を表示

配列風(Array-like)オブジェクトってなんだよ、’風’ってよぉ～

# ググったら秒で分かった
関数の引数である**arguments**や**NodeList**が該当するみたい。
Arrayのメソッドを継承しているわけでないから、配列として操作する時にひと手間必要ってわけね。
変換もできるし、**’風’と名乗っていることも許せる。**

>「配列風」とは、 arguments が length プロパティと 0 から始まる添字のプロパティを持っているものの、 Array の組込みメソッド、例えば forEach() や map() を持っていないということです
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments

# なぜスプレッド構文を使っていたかの謎が解けた
いちいちスプレッド構文を使って配列に格納し直しているコードを見かけるけど、Arrayのメソッドを使うためだったとは…
理由を調べていなかったことに反省。
どうりで予測変換でmapメソッドとか出ないわけだ。

“`
// 例のため実用性のあるコードではない
const no

元記事を表示

【個人開発】野球観戦をもっと楽しめるサービス、「野球バカ実況」をリリースします！

## まえがき
私は未経験のエンジニアで約一年間Railsを中心に勉強していました。野球観戦を楽しめるサービスを開発してみました。野球が好きな人は読んでくれれば嬉しいです。後半には難しかった技術についても述べています。技術が好きだという人も是非読んでいただければ嬉しいです！

# サービスURL
#### サービス名：「野球バカ実況」
###### 以下サービスURL
https://yakyubaka-jikkyo.com/

###### 以下Git Hub

https://github.com/GreatMuta514/baseball_app
## サービス概要
野球の試合を見ながらリアルタイムでチャットができます。
野球の試合の勝敗予想ができます。
野球ファンに試合観戦をより楽しんでもらえるサービスです！

**今日から日本シリーズが始まります！野球ファンの方は是非、試合を見ながら使ってみてください！**
## 使い方
### 試合前
試合前には、どんな試合になるかみんなで予想しましょう！
– 試合予想を投稿。
– みんなの予想をチェック。
– コメントで議論。
[![I

元記事を表示

hygenでテンプレート作成する時に実行時オプションを整理する

# そもそもhygenって何

hygenはテンプレートファイルからボイラープレートを生成するためのライブラリです。

https://www.hygen.io/

# 前提

hygenでは実行時にオプションを指定できます。
このオプションによってテンプレートファイル内の処理を変えたり、あるオプションが指定されていたらテンプレートファイルをスキップしたりするみたいなことができます。
オプションの値はテンプレートファイル内で処理できますし、ファイル数が少ない場合は同じような処理があっても大した手間では無いですが、ファイル数が多くなってくると一律で最初に処理しておきたくなってきました。

# index.jsファイルで前処理

これらのオプションは各テンプレートファイルに渡す前にindex.jsファイルで整理することができます。

“`js:index.js
module.exports = {
prompt: ({ prompter, args }) => {
const prompts = [];
!args.path &&
prompts.push

元記事を表示

pixivのタグが投稿者の付けたものか分かる拡張機能を作った

## はじめに

はじめまして、こんにちは。
どうも最近のpixivでは「タグ荒らし」なるものが流行っているらしいですね……
少しでも助けになれればと思い、タグが投稿者に付けられたものか分かる拡張機能を作成しました。

## インストール方法

ブラウザの各種ストアからダウンロードできます。

– [Chrome](https://chrome.google.com/webstore/detail/pixiv-tag-visualizer/gbnekemfnhgeckoplpjgacbpljhocdpc)
– [Firefox](https://addons.mozilla.org/ja/firefox/addon/pixiv-tag-visualizer/)

## 機能

機能は大きく2つ
– タグに目印をつける
– そもそもタグを表示しない

:::note warn

現在はイラスト・マンガ（www.pixiv.net/artworks/*）にのみ対応しています。

:::

この拡張機能をインストールした状態で作品を開くと、タグの表示が以下のように変わると思います。
![Sc

元記事を表示

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/yusuke_blog1026/items/ab33bdfa495597d04f0b

# PHP

https://qiita.com/yukachin0414/items/cfb02cbbdd31a52902e8

# Java

https://qiita.com/takahirocook/items/748990882f2de7a630a1

# JavaScript

https://qiita.com/miriwo/items/e9ca0a2779ed2c8117c3

# Perl

https://perlzemi.c

元記事を表示

いいねボタン in プリザンター

## デモ

![fav.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700567/b2d06978-7408-8a3d-62bd-f5c64446124c.gif)

サイトパッケージは [gist](https://gist.github.com/einmotorrad/97f79a2be85cacb35c0c973e3d18ac38) から。

## 作りかた概要

– プロセスでボタンを配置
– いいねを付ける用といいねを外す用の 2 つ
– サーバスクリプトでデータ設定
– 押されたボタンによって、操作しているユーザを付けたり外したり
– いいね数のカウント
– スクリプトで、ボタンの表示を制御
– いいねしたユーザに自分がいる場合は、いいねを付けるボタンを非表示
– いいねしたユーザに自分がいない場合は、いいねを外すバタンを非表示

## プロセス

![favProcess.png](https://qiita-image-store.s3.ap-northeast

元記事を表示

INSERT文のカラムと値を一覧化しました。

## 経緯

INSERT文を修正する際に、使用している値がどのカラムの値なのか
一目でわからなかったため作成しました。

## 画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604560/d1bd7de4-956f-1de7-c6b9-0212237c2240.png)

画面半分にして使用するのを前提としているので全画面表示だと表示位置がずれます。

## コード

コピペしてHTMLファイル作成すれば動きます。

“` HTML




Easy Insert