常連

テラテイラー

注目の的

社会貢献

質問力

回答者

ベストアンサー

拍手喝采

プロフェッサー

スピードスナイプ

先生

有名人

機械学習を用いて画像分類を行いたいと思っています。正規化せずに入力画像の局所的な最大値で画像分類する方法はございますでしょうか。人間が最大値をみれば、分類可能な問題だと思います。

図を追加しました。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-25/dc4cd56a-49e6-40d6-9d09-b667f006bafe.png)
グレースケールの画像上に局所的に0以外の部分があるとします。例えば、それが2以上3以下であれば、クラスAに分類し、0.5~1であればクラスBに分類し、3以上であればクラスCに分類したいと思っています。1、２、３は適当な値ですが、実際は小数であっても自動で分類できるようにしたいので、閾値は設定せずに機械学習によって分類したいと思っています。

1日調べても手法がわからなかったので、質問しました。よろしくお願い申し上げます。

機械学習を用いた画像分類

JavaScriptでXPathを使いたいとき、document.evaluate()を使うことが多いと思います。

私はむしろつい最近までdocument.evaluate()しか知らなかったのですが、MDNでXPathEvaluatorの存在を知りました。
私の現在の理解では、XPathEvaluatorもdocument.evaluateと同じようにJavaScriptでXPathを評価するのに使えます。


しかも、そのXPathEvaluatorも使い方が1通りではなく、

①XPathEvaluatorオブジェクトのevaluateメソッドを呼ぶ方法

```JavaScript
const evaluator = new XPathEvaluator();
const result = evaluator.evaluate("//body", document, null, XPathResult.ANY_UNORDERED_NODE_TYPE);
console.log(result.singleNodeValue);
```

と、

②XPathExpressionオブジェクトを生成して、そちらのevaluateメソッドを呼ぶ方法

```JavaScript
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression("//body");
const result = expression.evaluate(document, XPathResult.ANY_UNORDERED_NODE_TYPE);
console.log(result.singleNodeValue);
```

の2通りがあるようです。


そこで疑問なのですが、`document.evaluate()`と`XPathEvaluatorのevaluate`と`XPathExpressionのevaluate`はどのように使い分けるのでしょうか。
それぞれの適する場面が知りたいです。

XPathEvaluator等とdocument.evaluateの使い分け

質問の評価に関して，ヘルプを見ると，

> 質問の評価は「高評価」と「低評価」が押された数の合計で決まります。
> 質問の評価が上がると質問が人に見られやすくなり、評価が下がると見られにくくなります。
> 
> 質問の評価の合計が一定以下になった場合、フィードに表示されなくなります。
> 一度表示されなくなっても評価が上がり一定以上になった場合、再度フィードに表示されるようになります。

と書かれています．

上記引用の２行目にある

> 質問の評価が上がると質問が人に見られやすくなり、評価が下がると見られにくくなります。

とは具体的にはどのようなことなのでしょうか？

> フィードに表示されなくなります。

に関しては，
【（閾値がいくつなのかはわかりませんが）一定以下の評価値になった質問が質問一覧の「アクティブ」タグで表示されなくなる】という効果が生じていることを何度か目にしているで，このことを指すのであろうと見えますが，
閾値を下回らない限りは特に表示順に影響を与えていたりするようにも見えません．
（評価値が-1とか-2になっている質問も並び順で上側にふつうにくるように見える）

私は「優位に＋の方に評価が増えている質問」というもの自体を見たことが無いのですが，非常に評価が高くなった場合に

> 質問の評価が上がると質問が人に見られやすくなり

に相当する何らかの素敵な効果が生じたりするのでしょうか？

質問の評価による「見られやすさ」とは？

久々にteratailにログインしたのですが、質問及び、回答への低評価が出来きません
以前も恐らく出来なかったと思います。
何故、低評価機能が解放されていないのでしょうか？

低評価機能が解放されていない

MDN の [Math.random()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) の説明を読んでいると、以下の記述がありました。

> 例

> JavaScript における数値は、IEEE 754 浮動小数点での round-to-nearest-even を行うため、以下の関数の値域が ( Math.random() 自体の値域が正しくても) 厳密ではないことに注意してください。非常に大きい境界値 (2 の 53 乗以上) のうち極めて稀な数値で、通常なら返されないはずの上限値が出力されてしまうことがあり得ます。

このコメントを素直に読むと
・`Math.random() * num` で `num = 2 ** 53 以上`の範囲で上限値 num が出力される
と読めるのですが、
・`Math.random() * num` で `num = 2 ** 53 以上の特定の数`で上限値 num が出力される
とも読めます。

正しくはどういった内容なのでしょうか？
ご教授いただければ幸いです。

Math.random() の境界上限値の出力に関して

### 前提・実現したいこと

setTimeoutをとめるための変数を配列の値で指定するにはどうしたらいいんでしょうか
clearTimeoutのほうも配列の値で指定したいです
ご存知の方いらっしゃいませんでしょうか？


### 該当のソースコード

```ここに言語名を入力
<script>
var x["a"]="abc";
function a(){
x["a"]=setTimeout(a,1000);//abcを指定したと同じにするには？
clearTimeout(x["a"]);//abcを指定したと同じにするには？
}
a();
</script>
```

JavaScript setTimeout

ES6以上にあるArrow functionを`(param) => { /* 中身略 */ }`のように書いた場合に、「`param`を省略して呼び出した場合」と「`param`に`undefined`を指定した場合」を区別する方法はありますでしょうか。

なお、実用的にはそのような関数を書くべきではないでしょうし、どうしても必要となれば「`function`で書いて`arguments.length`をチェックする」「`...args`のように書いて、`args.length`をチェックする」などに書き換えれば動かすことは可能だということは間違いないです。

あと、以下の方法はうまくいかないことも把握しています。

* `arguments.length`…Arrow functionでは`arguments`を取れない
* デフォルト引数を付ける…あえて`undefined`を渡してもデフォルト引数が適用される

Arrow functionで、あえて引数にundefinedを渡したことを識別する方法はあるのか

### やりたいこと
・submitで画面遷移（画面更新）せずに、onSubmitで指定した関数を呼びたい

### 起きている問題
・onSubmitでreturn falseしているのに、画面全更新が行われる場合がある。

・A～Dの4画面に同じ処理があるが、Dの画面だけで必ず毎回起きる。
・A~CとDの違いは、onSubmitで呼ぶ関数の中で、ページ内のiframeをリロードするかどうか。
・Dは、リロードしない（リロードするiframeがないため）。

・対策として、Dのformタグに action="#"を入れると起きなくなった。

・その後、現象を再現させるために変更前に戻すと、現象が再現しなくなった（submit＝画面全更新が行われなくなった）。



### 知りたいこと
「onSubmitでsubmitを行わせない＝画面全更新をしないようにさせる方法は、
　onSubmitに指定する内容が"return false;"であること。
つまり、下記３つのどの書き方でもOK」
という認識が、正しいかどうか。
もし認識が間違っているのであれば、どのように書くのがベストか。
```HTML5
<form onSubmit="return false;">
<form onSubmit="onOkButton();return false;">
<form onSubmit="return onOkButton();">※onOkButton()の最後にfalseを返却
```

### 今のコード
[jsfiddle](https://jsfiddle.net/0yzerw29/)
```HTML5
<form action="#" onSubmit="onOkButton();return false;">
<input value="" type="number" step="0.01" min="-99.99" max="99.99" required>
<button type="submit">OK</button>
</form>
```

```JavaScript
		var reqTimeout = 10000;
		var reqURL = 'XXX/XXX'

		function onOkButton() {
		  set();
		}

		function set() {
		  var setWL1;
		  var input_WL_Lv1 = document.getElementById('input_WL_Lv1');

		  if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
		  postData2Server(reqURL, {
		      "WL_Lv1": setWL1
		    },
		    reqTimeout, {
		      'onSuccess': function(resp) {
		        var iframe = document.getElementById("iframe");
		        if (iframe) {
		          iframe.contentWindow.location.reload();
		        }
		      },
		      'onError': function() {
		        console.log("Error");
		      },
		      'onTimeout': function() {
		        console.log("Timeout");
		      }
		    });
		}

		function postData2Server(reqURL, data, timeout, callback) {
		  if (document.baseURI.startsWith('file://')) {
		    return;
		  }
		  var req = new XMLHttpRequest();
		  req.timeout = timeout;
		  req.ontimeout = callback.onTimeout;
		  req.onreadystatechange = function() {
		    if (req.readyState === 4) {
		      if (req.status === 200) {
		        if (req.responseText === 'OK') {
		          callback.onSuccess();
		        } else {
		          console.log('Error: req.responseText is not OK');
		          callback.onError();
		        }
		      } else {
		        console.log('Error: req.status is not 200');
		        callback.onError();
		      }
		    }
		    delete req;
		  }
		  req.open('POST', reqURL, true);
		  req.setRequestHeader('content-type', 'application/json');
		  req.send(JSON.stringify(data));
		}

```

最後になりますが、ご助力よろしくお願いいたします。

formのonSubmitにfalseを指定しても画面全更新が発生する場合がある

テキストエリアをフォーカスした際に、ボタンをenabledにし、
フォーカスを外すとボタンをdisabledにしています。

フォーカスして、そのままボタンをクリックすると、
ボタンがdisabledになってしまい、ボタンのイベントが発火できませんでした。

どうすれば発火できるでしょうか？
サンプルコードは下記となります。

```HTML
<textarea id="textarea"></textarea>
<button id="button"></button>
```

```JavaScript
$('#textarea').focusin(function(){
  $('#button').prop('disabled', false);
});

$('#textarea').focusout(function(){
  $('#button').prop('disabled', true);
});

$('#button').click(function() {
  console.log('click');
});
```

jQueryでのイベントの発火順序を変えたい

### 前提・実現したいこと
以下のように、オブジェクトを展開して評価したいのですが、書き方がわかりません。
一般的に以下のような連想配列の書き方は知っていますが、今回の場合だとオブジェクトであり、keyは動的に決定するため書き方が変わってくると思います。
ご教授お願いいたします。
```ここに言語名を入力
var sample=[{
 "id": 1,
 "name": "hoge"
},
{
 "id": 2,
 "name": "fuga"
}
];

sample.map((item) => {
 console.log(item.id);
}
```


### 該当のソースコード

```ここに言語名を入力
var sample={
 "a": true,
 "b": true,
 "c": false
};

sample.map((key, value) => {
//sampleのvalueを評価して、trueであるkeyを取得したい
}
```

[ES6]オブジェクトの展開の仕方がわからない

JSで結合なしのテーブルを作る方法はわかったのですが、縦方向の結合する方法がわからず困ってます。


数が増えた場合になるとどうなるのか。
```javascript
let array = [
	["都道府県", "性別", "年齢", "誕生月"],
	["神奈川県", "男性", 24, 8],
	["神奈川県", "女性", 24, 12],
	["東京都", "男性", 32, 6],
	["東京都", "女性", 40, 2],
	["千葉県", "男性", 18, 2],
	["埼玉県", "男性", 48, 9]
]
```

```javascript
let result = ''

result = '<table>'

for (let line = 0; line < array.length; line++) {

	result += '<tr>'
	for (let i = 0; i < line.length; i++) {
		if(line == 0){
			result += '<th>' + array[line][i] + '</th>'
		} else {
			result += '<td>' + array[line][i] + '</td>'
		}
	}
	result += '</tr>'
}

result += '</table>\n'

console.log(result)
```

最終的に下記のようなhtmlデータにしたいです
```html
<table>
    <tr>
        <th>都道府県</th>
        <th>性別</th>
    </tr>
    <tr>
        <td rowspan="2">神奈川県</td>
        <td>男性</td>
    </tr>
    <tr>
      <td>女性</td>
    </tr>
    <tr>
        <td rowspan="2">東京都</td>
        <td>男性</td>
    </tr>
    <tr>
        <td>女性</td>
    </tr>
    <tr>
        <td>千葉県</td>
        <td rowspan="2">男性</td>
    </tr>
    <tr>
        <td>埼玉県</td>
    </tr>
</table>

```

JSで配列から結合したtableを出力したい

[擬似クラス「:link」の需要](https://teratail.com/questions/185491)についた回答が少し気になったので、調べていたのですが理解出来ない挙動があったので教えてください。

:link の挙動に関して、以下の記述があります。
> [:link - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:link)
CSS の :link 疑似クラスは、まだ**訪問されていない要素**を表します。 <a>, <area>, <link> など、 href 属性を持つ未訪問のすべての要素を選択します。

# 質問
同ページに以下の例があります。
なぜ、訪問後の link の background-color が gold になるのでしょうか？

```html
<a href="#ordinary-target">これは普通のリンクです。</a><br>
<a href="">このリンクを訪問しました。</a><br>
<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
```

```CSS
a:link {
  background-color: gold;
  color: green;
}
```
![![イメージ説明](e71d4dc121ccc0985d2f6fec0d49fa47.png)

例の説明としては以下が記述されています。

> 既定では、大半のブラウザーが訪問済みのリンクに特殊な color の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 background-color の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

:link 疑似クラスは、まだ**訪問されていない要素**への設定だと思うのですが、説明を素直に読むと、:link が**訪問後のリンクの装飾**にも影響を及ぼしています。

CSS :link の値 < ブラウザの既定値 < CSS :visited の値
の優先順位のようです。

ブラウザの挙動としては想定どおりみたいですが、どういった原理に則っているのでしょうか？

よろしくお願いいたします。

# おかしな挙動の追記
*確認した環境は、「firefox 66.0.3」+「codepen」です。

本件の挙動確認をしていたのですが、a:link で`background-color`を設定しない場合、a:visited の`background-color`が反映されませんでした。
MDN にある「上書き～」な記述はこれのことなんですかね？
にしては、`color`は反映されていて、意味がわからんのですけど。

```CSS
a:link {
  background-color: gold;
  color: green;
}

a:visited {
  background-color: black;
  color: red;
}
```
![イメージ説明](2421e95f32da58203fb6fff7f4325a8f.png)
```CSS
a:visited {
  background-color: black;
  color: red;
}
```
![イメージ説明](c1a56a86bb1bb1d93b0f438431792d35.png)

HTML,CSSでフロー図を作成したい

質問や回答の評価値や BA の意味が崩壊しつつあると感じています。
どういった改善をしていったら良いとおもいますか？
（自分でできる行動としては、評価値や BAは無視して、記載内容自体だけを自分で評価するようにしようと考えています)

最近の極端な例ですが、
- 配列とランダム関数う
[https://teratail.com/questions/165588](https://teratail.com/questions/165588)
は、質問自体の評価が -9, ベストアンサーの評価が -7 となっています。
![イメージ説明](8d027b0eb13d2056bb9475053c38d118.png)

![イメージ説明](b52df423e234177db8a57d2a727740d1.png)

QAサイトは、質問した当人が問題への対処案を得るだけでなく、類似問題への対処法の倉庫としての意味をもつべきと思っています。
上に紹介したような質問や回答を校正していくことができないと倉庫としての価値が下がると思っています。

この質問自体はプログラミングには直接関係しないのでマイナス評価をつけて頂いてかまいません。
ベストアンサーは、運営からの改善案/対処案が出た場合 それに付けるつもりです。

参考情報
- 回答で書くコードは質問者の理解度に合わせるべきか 
[https://teratail.com/questions/138657](https://teratail.com/questions/138657)

- 質問の質の変化を感じていますか？ 
[https://teratail.com/questions/124179](https://teratail.com/questions/124179)

- そもそもteratailの質問・回答に対して低評価・マイナス評価を付けること自体正しいことなの？ 
[https://teratail.com/questions/107140](https://teratail.com/questions/107140)

- 投稿自体の評価に直結しない『相対的な』高評価の是非 
[https://teratail.com/questions/97261](https://teratail.com/questions/97261)

- ベストアンサーを譲る機能があったらどう思いますか？ 
[https://teratail.com/questions/75381](https://teratail.com/questions/75381)

- ベストアンサーと回答評価点の高い回答と、どちらが本当に役にたっていますか？ 
[https://teratail.com/questions/40576](https://teratail.com/questions/40576)

追記： 2022-02-19
数年経過してもこのことに対して進展はなく、teratail 事態が崩壊しつつあるようです。


質問・回答の評価値、回答のベストアンサーの意味が崩壊しつつある？

JavaとJavaScriptとオブジェクト指向について勉強しています。

Javaには、getterとsetterのようにオブジェクト内部のプロパティにアクセスする方法がありますが、
(現在、Javaでgetterとsetterがスタンダードな方法なのかも教えていただけると助かります)
JavaScriptで、ローカル変数に関数外からアクセスしたいときにはどういう方法をとるのがいいのでしょうか？

初歩的な質問かもしれませんが、よろしくお願いいたします。

```javascript
var global = "global";

function scope() {
    var local = "local";
}

scope();
```

上記のコードの変数localに関数scopeの外からアクセスしたいです。

JavaScriptでローカル変数に関数外からアクセスしたいです

テストコードの置き場所という問題、
長らくの悩みなんですが、皆さんどうしていますか？


どの言語でもいいのですが、例えばphpでSampleというクラスが/src/model/Sample.phpにあり、
そこにfooとbarという関数があったとします。

でfooとbarそれぞれにテストコードを書くとすると、自分の場合は

/src/model/Sample.php
/src/model/Sample_fooTest.php
/src/model/Sample_barTest.php

という配置にしています。各々のテストコードファイルの中には、その関数に対するテストケースが複数ある感じです。
(仮に同ディレクトリ方式と呼ぶことにします。)
この同ディレクトリ方式だと
メリット：
・対象となるクラスにテストコードが書かれていることを把握しやすい(書かれていない場合も把握しやすい)
・テストコードと対象クラスの行ったり来たりがらく
(・言語系によっては、プロパティや関数へのアクセス制限も回避しやすくなったりするのかな。)

デメリット：
・ソースコードディレクトリがテストコードファイルだらけになり、メインのコードを探しにくくなる。

と言ったことがあるかなと思っています。



/src/model/Sample.php
/test/model/Sample_fooTest.php
/test/model/Sample_barTest.php
のようにテストコードを大本のディレクトリから分ける方式がよく見ると思いますが、
同ディレクトリ方式のメリットを捨てがたく、、


あと、同ディレクトリ方式の別バージョンで
/src/model/Sample.php
/src/model/SampleTest/Sample_fooTest.php
/src/model/SampleTest/Sample_barTest.php
のようにテストコードディレクトリを内部に作る方法もあるかな？と思っています。



上記のいずれかの方式をベースにしつつ更に良い運用の仕方や、
何かしらツールのサポートを使う方法、
はたまた全く違う方式などで良い方法があれば教えていただきたく。


宜しくお願いします。

テストコードの置き場所

### 前提・実現したいこと

先日から回答をしていて悩んでいることがあります
「**回答で書くコードは質問者の理解度に合わせるべきか**」
です。

### 発生している問題・エラーメッセージ
このサービスを利用されている皆さんであれば
質問の内容を見ていればおおよそのスキルのレベルはわかると思います。
質問を受けて「あ、この人基本的なことからわかってないな」というとき
（1）その人のレベルに合わせて平易な、もしくは質問のコードに近い形で動くように書く
（2）目的を考え理解し、それに合わせて適切なコードを書く
どちらがいいか迷っています

### 該当のソースコード
もちろん（2）を書いてそのまま質問者が使って問題なければよいのですが、質問した内容のどこが悪いかわかるようにしないと応用が効かないし、スキルアップにならない気がしています。

### 試したこと
0. まずは質問者のコードから動かない要因を探し、なるべく元の形に近い動くコードを記載。
0. 回答にどこがどう違うか、考え方はこうだという解説をつける

### 補足情報（FW/ツールのバージョンなど）
このやり方が最終的にはベスト、にはなりえないので難しいですが、
このサービスの利用者として、より良い形になってほしいし
利用しやすくしたいのでご協力頂けますと助かります。

回答で書くコードは質問者の理解度に合わせるべきか

### ノードを削除しているはずなのに解放されない

Javascriptでulノード下にliノードを追加や削除できる機能を作成しました。liノードを削除後メモリリークしていないかを、Google Chrome の DevTools の Performance で Memory Timeline をオンにして調べました。

結果はliノードを削除してもメモリグラフのNodeが減少しませんでした。下に載せたコードまで単純化して調べたところ、原因となる操作は「liノード内のbuttonノードをクリックする」ことでした。

buttonノードをクリックしなければNodeは減少します。しかしクリックするとNodeは減少しません。なぜなのでしょうか? 皆様のお知恵をお貸しください。

### Node が減少しないコード
```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta lang="en">
  <title>Sample</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <button id="addListItem">add</button>
  <button id="deleteAllItem">delete all</button>
  <ul id="list"></ul>
  <script>
    document.getElementById("addListItem").addEventListener("click", () => {
      const ul = document.getElementById("list");
      const li = document.createElement("li");
      const btn = document.createElement("button");
      ul.appendChild(li);
      li.appendChild(btn);
      btn.appendChild(document.createTextNode("button"));
    });

    document.getElementById("deleteAllItem").addEventListener("click", () => {
      const ul = document.getElementById("list");
      while (ul.firstChild) {
        ul.removeChild(ul.firstChild);
      }
    });
  </script>
</body>

</html>
```

### 再現方法
0. 上記のHTMLをGoogle Chromeで読み込む
0. addボタンを何回か押す
0. buttonボタンをいくつか押す
0. delete allボタンを押す

2から4の操作をPerformanceツールで計測すると、buttonボタンを押したliノード分のNodeが減少しません。画像はGarbageCollectしています。
![イメージ説明](4a5a4849237dac0f27bdc0d7866bc729.png)

### 補足情報
OS: Windows 10 (ver 1709)
Browser: Google Chrome (ver 67.0.3396.87)

domノードがメモリ開放されない?

# 質問：arguments.calleeが駄目な理由はなんですか？

「`arguments.callee`は使うな！」のような記事を以前に読んだのですが（探しても見つかりませんでした）、どうして`arguments.callee`を使ってはいけないと言われているのでしょうか？

また`arguments.callee`はstrictモードでも禁止されていますよね。どうして`arguments.callee`がいけないのか、いくつか問題のある例をご提示していただけると嬉しいです。

個人的には「再帰していることを明示」できる点で`arguments.callee`は良いとも思っています。

JavaScriptのarguments.calleeは悪ですか？

私はC++やC#は長いのですが、WEB系の技術には疎いです。htmlやcssを触れないことは無いけど慣れていないのでむちゃくちゃ時間がかかるレベルです。
業務でJavsScriptのメンテが必要になったのですが、JavaScriptはデスクトップ系の言語とは基本的な考え方が異なるようで中々頭に入ってきません。main()関数からの実行開始になれているため、ドキュメントの中にプログラムを埋め込んだ関数が呼ばれるタイミングを把握できていないせいかもしれません。

JavaScriptの基本的な考え方（特にJavaScript関数が呼ばれる最初のきっかけに何があるのか）を解説しているサイトはないでしょうか？
また、JavaやC#等のデスクトップ系の言語と対比して解説しているようなサイトがあれば教えて頂けると助かります。