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

ブラウザマイニングといふものを我もしてみむとてするなり

> 他人のパソコンを無断で使って暗号資産（仮想通貨）のマイニング（採掘）をするプログラムをウェブサイトに置いたとして、不正指令電磁的記録保管の罪に問われたウェブデザイナー、諸井聖也被告（34）の上告審判決が20日、最高裁であった。第1小法廷（山口厚裁判長）は「パソコンに与える影響はネット広告と大差なく、社会的に許容できる範囲内だ」として、逆転無罪を言い渡した。無罪が確定する。

引用：日本経済新聞

https://www.nikkei.com/article/DGXZQOUE178IR0X10C22A1000000/?utm_source=pocket_mylist

普段僕は新聞記事を読まないのですが、ネットサーフィンをしているときに偶然にもこの記事を見つけて、「ブラウザマイニング」というものを知りました。

##ブラウザマイニングとは

仮想通貨の取引記録の更新のために計算処理を行うことを「マイニング」といい、マイニングを成功させた場合、新規発行された仮想通貨が報酬として支払われます。

これをブラウザで行うそうです。具体的には、HTML等にマイニングを行うスクリプトを

ReactとFirebaseでギターマニアのためのSNSを作った話

Qiita初投稿です。

#いきなりですが
今回作ったSNSはこちらになります。

https://my-newgear.web.app/

https://github.com/rokina/mynewgear

####その名もmy new gear…
####新しく手に入れた楽器や機材を共有するためのSNSです。

#my new gear…って何？
「__my new gear__」とは、新しい楽器や機材を手に入れたことを
Twitter等のSNSに投稿する際に使われる文言です。


Twi

create-react-appを使わないでReact環境構築してみる。

## create-react-appを使わないワケ
12月初旬に、「create-react-app」を使ってプロジェクトを作成し、eslintのルールを変更しました。

“`
npx eslint –init
“`

で、「.eslintrc.js」を作成しルールを書き、VSCodeで指摘されることを確認しました。

ある程度コードを書いて

“`
npm start
“`

としたところエラーが発生しました。

原因は、「create-react-app」で使われている「eslint」がV7系で、「eslint –init」で追加されるプラグインなどが「eslint V8系」なためでした。

2021年12月14日に、webpack5、eslint8が採用した「create-react-app　V5」がリリースされ問題は解決しました。

「create-react-app」は、

– コマンド一発で環境構築できる
– テンプレートが豊富
– eslint、webpackなど全て設定済み

なのは良いのですが、少し設定を変えようと思うと今回のようにエラーが起こります。

ことのはたんご – 単語推測推理ゲーム「Wordle」日本語版

# この記事の内容
　[Wordle](https://www.powerlanguage.co.uk/wordle/)の日本語版である「ことのはたんご」を作製する際に利用した辞書の説明および辞書の解析。

# 作製したゲーム紹介

ことのはたんご

https://plumchloride.github.io/tango/index.html


HIT & BLOW (マスターマインド)」や「ヌメロン」といったゲームを初めとした推理ゲームの単語版
推定プレイ時間：5～30分 /日
ジャンル：推理ゲーム

# 注意書き

　本アプリケーションは営利目的での展開はしていません。
　著者によるリンク先でのアクセスログの取得や広告の掲示は行っていません。

:::note warn
ここより下は本ゲームの開発における技術的な話等を記述し

pm2のインストールではまってしまった人へ

# 結論

お使いのyarn.lockやらpackage-lock.jsonを削除してみよう。

# どうしてこうなったか

インストール時にyarnがダメだったからnpmとかまたはその逆とかでインストールしていたなあ。という記憶が蘇ってきたので多分それ。

JavaScriptで出会った無名関数について知りたい

# 無名関数とは

無名関数とは、関数名が定義されていない関数です。
無名関数は関数名を特に必要としない場合に使用されます。

# 使い所は主に2ケース

使い所としては主に以下の２ケースが多いかと思います。

## 関数リテラルを定義する場合

## 関数の引数に直接関数を指定する場合など、

[JS]配列の繰り返し処理

アウトプットとして

JavaScriptにおける繰り返し処理（for文）を先日記事にしたので、今回は配列の繰り返し処理について。
[JSの繰り返し処理](https://qiita.com/Shi-raCanth/items/d8a04310f99abc3a44df)

##for文を使う場合

“`javascript
const fruits = [‘apple’, ‘orange’, ‘banana’]

for (let i = 0; i < fruits.length; i++) { console.log(`${i}:${fruits[i]}`) } //出力結果 //0:apple ​//1:orange ​//2:banana ``` 条件式に「配列の要素数よりiが小さい場合に実行（上記は、３より小さい場合）」として処理すると、繰り返し処理が配列の要素分実行される。 ##forEach文を使う場合 こちらの方がシンプルに書ける forEach関数の引数に関数を指定することで、実行することができます。 指定した関数に引数を定義することで、その引数には配列の要素

webpackからviteへreplaceしてみた

ここ1年ぐらいで、「viteめちゃ早いで」みたいな記事をよく見かけるようになり、どんなもんよ、ということで試したくなりました。

viteの概要についての記事は数あれど、replaceするといった話は少ないように感じたので、本稿ではwebpackからviteへreplaceするために必要な手順について解説していきたいと思います。
viteへreplaceする際の工数見積もりや品質担保の参考になりますと幸いです。

※本稿ではdevserverを起動するまでをゴールとし、production buildについては別途設定が必要となります。

# 現行サービスについて

現行サービスの概要は以下になります。

– webpack
– 環境変数は.envで管理
– React(状態管理はmobx）
– TypeScript & JavaScript
– Sass

# replace手順

### 1 pluginの追加
pluginとしては以下を`devDependencies`に追加しました。

– vite
– @vitejs/plugin-react

【斜め】画像をアニメーションで切り替えたい！オシャレに！【グリッド】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

今回は【斜めのグリッド】でのアニメーションです。
実際の挙動は以下のようになります。

CSSの `mask-image` を利用しての実装になります。
早速実装です！

## 1. HTMLの追加

“`{html}

input type=fileのchangeイベントのメモ


“`html










“`

初心者でもわかる！〜(簡単な)カウンターを作ろう！〜

####こんにちは！
今回は`初心者でもわかる`ように解説していきながら
カウンターを作りたいと思います

####HTMLを使おう！
では、javascriptを使う前に必要なのはHTMLです
HTMLを書いていきます
ここでは、私がいつもしているやり方でやっていきます
まず、タイトルを決めます
ここでは、`カウンター`にします
では、書いていきます

“`html

“`
これで、タイトルがカウンターになりました
では、次に日本語が使えるようにしていきます
これがないと文字化けが起こってしまいます

“`html


“`
タイトルの下に`meta-tag`を追加してください
では、最後に`javascript`が使えるようにしていきましょう

“`html



“`
下に追加したのは`Click.j

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる〜

みなさんこんばんわ。”にょろぼん”でございます。

冬のコンテスト出品したいですよね。（去年間に合わず出せずじまい。泣）
下記のような悩みを抱えている方も多いのではないでしょうか。
なにかご参考になればと、今回の制作過程を実験的に晒してみます！
◎冬コンテスト（お題：サーバーサイドアプリ）に何か作って出品したい！
◎イチから作るのしんど。。⇒?ピコーン！夏コンテスト作品をちょっといじってサーバー対応にすればよくね？！
◎でも、サーバーアプリ化改造どこから手をつけたらいいの？？取っ掛かかりが分からないぜ。ぐぬぬ。

〜悩みと試行錯誤の日々〜

『こうなったら、N予備４章のテキスト内容に全のっかりするしかない！』
『”予定調整くん”の構造（完成コード）にそっくりそのまま乗っかるッ、そして部品だけ入れ替えて作るッ！』
『要件定義だけきっちりやって、最後にVSCodeで”すべての出現箇所を変更”で変数名と関数名をごっそりまるごと入れ替えるぞッ！！ウリィィィィ！』

と、いうことで、以下は４−１６テキストを加工して作った”covidリスク確認くん（開発用）”のアプリ設計書です。
具体的には”【サ

画像をアニメーションで切り替えたい！オシャレに！

？？？？？「これデザインです！ここの画像は切り替わるようにしてください」
エンジニア「ありがとうございます！切り替え…どのように…」
？？？？？「よしなにお願いします！なんかイケてるオシャレな感じで！！」
エンジニア「承知しました。（オシャレというのは主観であって…）」

ありますよね。
こういうこと。

イケてる！オシャレな！しかも手軽な！
切り替わりを実装してアッと言わせちゃいましょう。

そんなアニメーションを4種ご紹介いたします。

## ブラシで塗りつぶし

ポップで元気な印象のサイトデザインに合いそうですね。

詳細記事リンク： [【ブラシ】画像をアニメーションで切り替えたい！オシャレに！【塗りつぶし】](https://qiita.com/drooooopp/items/58ae4baeb863e52e64ce)

【ブラシ】画像をアニメーションで切り替えたい！オシャレに！【塗りつぶし】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

今回は【ブラシで塗りつぶし】のアニメーションです。
実際の挙動は以下のようになります。

CSSの `mask-image` を利用しての実装になります。
早速実装です！

## 1. HTMLの追加

“`{html}

javascriptでgame制作＃１８

####こんにちは
今回は、石を採掘した後のNPCとの会話を作っていきます
でははずはじめにこの部分を探してください

“`main.js
//家の中のNPC１と喋るとき
if(pl[“map”]==1&&pl[“x”]==64&&pl[“y”]==64){
if(system[“talk-1”]==0){
//初めて話す場合
system[“talk-1”]=1;
map_r=2;
talk_number=6;
}
if(system[“talk-1”]==1){
//２回目以降で話す場合
}
}
“`
そしたらこのように変更してください

“`main.js
//家の中のNPC１と喋るとき
if(pl[“map”]==1&&pl[“x”]==64&&pl[“y”]==64){
if(system[“talk-1”]==0){
//初めて話す場合
system[“talk-1”]=1;
map_r=2;
talk_number=6;
}
if(system[“talk-1”]==2&&system[“axe_get”]==0){
//２回目以降で話す場合
talk_number

リーダブルコードのまとめ。　1/2

リーダブルコードを読み終わったので、内容をまとめます。

## 【第一部-表面上の改善】
### 2章-名前に情報を詰め込む

– 変数名には、その目的が分かるような明確な単語を選ぶ。例えば、get~という変数をもっと具体的に、fetch~やdownload~とする。
– tmpやnumなどの汎用的な名前はできるだけ避ける。
– メソッド名やクラス名は短いコメントのようなものである。このクラスやメソッドは何をするクラスなのか、一目でわかるような名前にする。
– 変数名に大切な情報を追加する。例えば、ミリ秒を表す変数名には _msをつける。
– 変数名のスコープが大きい場合、長い名前を付ける。1単語や2単語だと、その変数が何を表しているのかとても分かりづらくなってしまう。
– ローカル変数とグローバル変数を区別できるよう、変数に印をつける。例えば、グローバル変数には一番最初に_(アンダーバー)をつけるなど。

### 3章-誤解されない名前

– 意図が伝わるような名前を選ぶ。例えば、filterという名前は「選択する」という意味にも解釈できるし、「除外する」という意味にもとれる。「選

【React】親コンポーネントのuseStateから子コンポーネントの値を管理する

子コンポーネントから`onChange`イベントを検知し、値を取得して親コンポーネントに渡します。

子コンポーネント名: `Input.tsx`
親コンポーネント名: `Parent.tsx`
この二つのコンポーネントを使用して解説を行なっていきます。

# Parent.tsx

“`react:Parent.tsx
import Input from ‘…’

const Parent = () => {
const [password, setPassword] = useState(”)

return
}
“`

`Input`コンポーネントに対して、`onChange`という関数をPropとして渡しています。

# Input.tsx

“`react:Input.tsx
interface Props {
onChange: (arg: string) => void
}

const Input = ({
onChange
}) => {

return

Vue.js入門　Vue.jsでゲームを作る

#理由・背景
Vue.jsを業務で使うことになったので学び中。
チュートリアルをたどってゲームを作りました。
少し改造しようと思ったけど作りが思ったのと違ったのでそのままです。
#やって見て
動画の主が歯切れよく進行するので飽きずに作ることができた。

#元にした動画

##構造
Basicフォルダ
-img
-app.js
-inde.html
-style.css

##コード
“`javascript
app.js
Vue.component(‘greeting’, {
template: ‘

Hey there, I am a re-usable component

‘
});

/* new Vue({
el: ‘.test’,
template: ‘

I am a template

‘
}); */

new Vue({

Webの勉強はじめてみた その24 〜テンプレートエンジン〜

N予備校の「プログラミング入門Webアプリ」を受講しています。
今回は第3章16節です。

テンプレートエンジン

:::note
テンプレートと文字列とプログラムを組み合わせることで、 静的なユーザーインタフェースのデータである HTML を動的に出力できるライブラリのこと
:::

静的なページに変数を入れてそれをベースにして動的なページにしようと言う認識。

PUGを使う

`Dockerfile`に記述

“`Dockerfile
RUN yarn add pug@2.0.4
RUN yarn global add pug-cli
“`

雛形となる`form.pug`

“`pug
doctype html
html(lang=”ja”)
head
meta(charset=”UTF-8″)
title アンケート
body
h1 どちらが食べたいですか？
form(method=”post” action=path)
span 名前:
input(type=”text”

備忘録：パーセントエンコーディング

# はじめに
DeepL APIを利用した翻訳を試していました。
公式ページによると、POSTリクエストのbodyにAuth Keyと翻訳したい文章を入力する様子。

“`js
let text = “Hello, World”
let options = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: ‘auth_key=[authKey]&text=’ + text + ‘&target_lang=JA’
}
fetch(‘https://api-free.deepl.com/v2/translate’, options)
.then(response => response.json())
.then(json => console.log(json.translations[0].text))
“`

…あれ、&とか=を翻訳に含めたいときはどうすればいいんだ？
と分からなくなったのでググりました。

# 解決方法
`en