f@ctor

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

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

[React]ボタン押下で動的にformを追加する

# ざっくり説明

1年前に下書きしてたやつを掘り返した。

やり方は大まかにこんな感じ。

* buttonをclickでformを追加
* formの内容がchangeしたときに値をsetState

# コード書くよ
## 前提として
ここから始まります。

“`react
import React from ‘react’;

class TaskForm extends React.Component {
constructor(props){
super(props);
this.state={
tasks: [
{
task_name: “”,
start_datetime: “”,
end_datetime: “”,
task_memo: “”,
}
],
};
}

render() {
return (

元記事を表示

C++,C#のコメントアウトテクニック

# 概要
下記のような記載が出来る言語で使えるコメントアウトのTips

[使える言語の参照](https://qiita.com/power3812/items/d8fc76f551970085e189)

“`main.cpp
// 1行コメント
/*
複数行コメント
複数行コメント
*/
“`

# 内容
複数行コメントを1文字で切り替える
先頭の**スラッシュ(/)**を消すと切り替えれる

“`main.cpp
//*
現在の
複数行コメントは
コメントアウトされない
//*/

/*
現在の
複数行コメントは
コメントアウトされる
//*/
“`

機能の切り替えを1文字で切り替える
上記のIF版で
先頭の**スラッシュ(/)**を消すと切り替えれる

“`main.cpp
//*
Active Block
/*/
Disable Block
//*/

/*
Disable Block
/*/
Active Block
//*/
“`

# まとめ
C++er には多少有名なのでN番煎じではあるもののいろいろな言語で使えるので書いてみました。

C++では#i

元記事を表示

Javascript 「~ is read-only」エラー解決法

## 目的
「~ is read-only」エラーが出たので、解決法を調査する。

## 現状
show.jsのcreatePhraseListTableNodeからlib.jsの関数を呼び出して、
trNodeという変数で「trNode is read-only」というエラーが出ている。

“`js:show.js
const PhrasesTable = createPhraseListTableNode(phraseList);
“`

“`js:lib.js
const createPhraseListTableNode = (phraseList) => {
const tableNode = document.createElement(‘table’);
tableNode.setAttribute(‘id’, ‘phrase-list’);
const theadNode = document.createElement(‘thead’);
const tbodyNode = document.createElement(‘tbody’);
c

元記事を表示

Cropper.jsで加工した画像をAjaxでLaravelに送り保存する。

この記事では、Cropper.jsを利用し画像を加工したあとに、加工した画像をAjaxを通してLaravelに渡し、その画像を保存する方法を紹介します。

Cropper.jsは、ライブプレビューとカスタムアスペクト比をサポートしており、JavaScript / jQueryプラグインを画像のトリミングに利用するのに便利です。

# 事前準備
## 1. フォルダの作成

ファイルを保存する先のフォルダを作成します。

今回、コントローラで指定するフォルダは「storage/app/public/upload」です。

ファイルをアップロードして画像を切り取って保存を押すと、このフォルダに保存されます。

# バックエンド側

## 2. ルーティング

次に下記のルーティングを設定してください。

“`routes/web.php

Route::get(‘image-cropper’,’ImageCropperController@index’);
Route::post(‘image-cropper/upload’,’ImageCropperController@upload

元記事を表示

【JavaScript】ある音楽ゲームのボーダー許容を計算する

某音ゲーでは、**1,010,000**点を上限に判定の善し悪しによってスコアが減少していく。
具体的にはすべてのノーツで最高評価をとれば1,010,000点となるが、それ以下の評価を取るとそのたびにスコアが減少する。

100万/総ノーツ数でそれぞれのノーツの基礎点が決まったのち、
評価によって以下のようにスコアへ影響する。

+ **JUSTICE CRITICAL**：基礎点×101%
+ **JUSTICE**：基礎点×100%
+ **ATTACK**：基礎点×50%
+ **MISS**：基礎点×0%

計算式さえわかってしまえば、総ノーツ数とスコアから何個JUSTICEを出したかを計算することができる。
> あくまでJUSTICEの数のみを計算するが、**ATTACK** は **JUSTICE** 51個分、**MISS** は **JUSTICE** 101個分となるので読み変えは可能。

以上を加味するとJUSTICE以下の数を算出する計算式は以下となる。
floor(総ノーツ数 * ((1010000 – スコア) / 10000))
> floorは切り捨てを

元記事を表示

【JavaScript】現在時刻を取得する

割と使うけど忘れやすいので、JavaScriptで現在時刻を取得する方法を備忘録としてメモしておく。

“`
const date = new Date();　//現在時刻を取得
const y = date.getFullYear(),　//西暦年
m = date.getMonth() + 1,　//月　
d = date.getDate(),　//日
H = date.getHours(),　//時
M = date.getMinutes(),　//分
S = date.getSeconds();　//秒

console.log(y,m,d,H,M,S);　//例 2022 1 14 3 10 30
“`
他にも[ミリ秒を取得する](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds)などもある。

あとは使う形式に応じて色々と整形する。

“`
`${y}/${m}

元記事を表示

#p5js のプログラムを Window.js を使って動かしてみた手順のメモ（Mac を利用）

:::note warn
【注意】 とりあえず動作はさせられてますが、表示の問題が出ている状況で、原因はこれから調べるところです
:::

Twitter で [@takawo さん](https://twitter.com/takawo)が以下のツイートをされていたのを見て、自分も「p5.js のプログラムを Window.js で動かす」というのを試してみたのですが、その時の手順のメモです。