+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net

2017/04/02(日) 23:30:38.56

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:----: EXT was configured

2020/06/15(月) 21:10:05.21

マルチポストはやめましょう

2020/06/15(月) 21:13:50.22

スレを間違えただけです

2020/06/15(月) 21:41:15.07

>>242
指摘されるまで質問を撤回しなかった理由は？

2020/06/15(月) 23:53:35.57

JavaScript の質問は、web制作管理板の方へ書き込んでください！

この板のスレは、荒らしが出た時に、緊急避難用として立てられたもので、現在は使われていない！

2020/07/05(日) 23:47:37.29

javascript初心者で右も左もよくわからないんだけどconsole.log();ってみなさんchromeなら検証からやって

2020/07/06(月) 05:50:27.12

>>245
2行目がイミフなんだが、
DevelopperToolsを閉じてみなさんスルーしてやって

2020/07/06(月) 14:11:59.36

>>246
やっていますか？でした

2020/07/06(月) 14:50:26.97

>>247
それでも、エスパー案件

「右クリックメニューの[検証]からコンソールパネルを開いてますか？」

と質問してるのか？
---
ショートカットキーを覚えろ
https://developers.google.com/web/tools/chrome-devtools/shortcuts

そして、正しい日本語で質問することも覚えろ

2020/07/06(月) 15:11:39.18

>>248
そうです
理解があいまいで正しく伝達できませんでした

2020/07/06(月) 20:10:50.63

>>249
PCの基本が載ってる本を買って勉強した方がいい

2020/07/07(火) 00:22:17.39

すみません、自作JavaScriptをブラウザで見ようとしてブラウザが反応しなくなった時に
止める方法はありますですか？
ctl+alt+del押してタスクマネージャーから落とす以外に無いかですか？

2020/07/07(火) 04:38:45.11

いくらでもあるのでは？
ハンマーでPCごと叩き壊すとか

2020/07/07(火) 08:04:49.16

>>251
Chrome駕止めるか聞いてきたら、止める

2020/08/13(木) 21:43:17.29

こういう配列があったとして
const hoge = [
{name: "taro", age: 15, group: "A"},
{name: "hanako", age: 25, group: "B"},
]

最終的にこんな感じにしたい（ageだけ2倍に）
const hoge = [
{name: "taro", age: 30, group: "A"},
{name: "hanako", age: 50, group: "B"},
]

mapを使えばいいと思ったんですが、書き方が分かりませんでした…
（元のオブジェクトを展開して、ageだけ2倍するみたいなことが出来ると思った）
const newHoge = hoge.map(h => {...h, age: h.age * 2})

2020/08/13(木) 21:55:53.88

>>254
=> {}って書くとアロー関数のパースが変わるので、()で囲むと良い

const newHoge = hoge.map(h => ({...h, age: h.age * 2}))

2020/08/13(木) 21:59:50.51

>>255
できましたーーーーー（泣）（1時間かかった）
ありがとうございました

2020/08/17(月) 12:12:35.63

てｓ

2020/08/18(火) 19:36:32.49

これを
const hoge = "【aaa】bbb【ccc】【ddddd】eee【fff】gggg";

最終的にこういう配列にしたいんですが
const newHoge = hogeFunc(hoge);
console.log(newHoge)
["【aaa】",
"bbb",
"【ccc】",
"【ddddd】",
"eee",
"【fff】"]

indexOfで【】の位置特定して、sliceして、みたいなごり押し以外で何かスマートに処理する方法あるでしょうか？
lodash的な便利ライブラリを使用する方法とかでも構わないので知りたいです

2020/08/19(水) 03:50:29.18

>>258
hoge.split(/(【[^】]*】)/).filter(Boolean)

2020/08/19(水) 03:58:30.68

ggggが要らなければ要素数が3の倍数になるように配列を切り詰めて

2020/08/19(水) 08:10:31.51

>>258
hoge.match(/【[^】]*】|[^【】]+/)

**261** (ｵｯﾍﾟｹ Srb1-P3ox [126.179.253.120]) · 2020/08/19(水) 08:16:32.46

>>258
hoge.match(/【[^】]*】|[^【】]+/g); // gフラグ付け漏れ修正

2020/08/20(木) 11:15:49.95

>>259
>>261
ありがとうございました
正規表現ってぱっと見何やってるか分からなくて嫌いでしたが便利ですね

2020/09/14(月) 13:19:22.86

この方法だとSJISの機種依存文字（崎の大じゃなくて立の文字）が文字化けしないんですが
reader.readAsText(file, "shift-jis");

ここのサンプル通りに
http://polygonplanet.github.io/encoding.js/tests/detect-file-encoding.html
reader.readAsArrayBuffer(file);
var unicodeString = Encoding.convert(codes, {to: 'unicode', from: 'SJIS',type: 'string'});
としても機種依存文字が化けてしまいます

そういうもんでしょうか？

2020/09/14(月) 15:14:02.04

Encoding.jsはブラウザが持ってる変換ではなく自前の変換テーブル使ってやってるのでそういうもんなんだろうけど
IBMのFAB1はUNKNOWN、NECのED95からは変換できるので必要ならgithubで要望出してみれば？

2020/09/14(月) 16:05:43.73

>>265
そういうもんでしたか

UTF-8からSJISは問題なく変換できるので
なにか間違ってるのかと思いました

ありがとうございました

2020/09/17(木) 20:09:46.76

下記のコードでクリックした要素のidを取得したいのですが、取得できません。
$("li").on('click', function(e){
let k = $(this).attr('id');
});

取得する要素はjavascriptで動的にデータベースから値をとってきて表示しているのですが、
ページリロードした際にある要素しか上記のコードは有効でない、など、何か動かない条件などがあるのでしょうか。
よろしくお願いいたします。

2020/09/17(木) 20:20:53.83

取得できないとは具体的にどういう状況を指すのか説明orコードが足らん
あとletで宣言したら外で使えないけどそれで良いの？

2020/09/17(木) 20:27:23.84

li が1つだけなら、取得できた。
2つ以上あったら、知らないけど

<ul>
<li id="abc">リスト 1</li>
</ul>

$( "li" ).on( 'click', function( e ) {
let k = $( this ).attr( 'id' );
console.log( k )
} );

Javascript, jQuery の質問は、web制作管理板の方へ書き込んでください！
この板のスレは、荒らしが出たときに、一時的に使っていたものなので

**269** (ﾜｯﾁｮｲ 7d2c-qc2B [114.144.98.145]) · 2020/09/17(木) 20:30:39.20

li が2つ以上あっても、クリックしたものが取得された

正常に動く

2020/09/17(木) 20:36:46.60

動的に追加された要素に対して適用できてないとかそんなオチだろ

2020/09/18(金) 09:35:45.84

取得できそうなもんだけどなぁ
エスパー過ぎてわからん

2020/10/01(木) 18:40:48.93

enchant.jsでゲームを作り
自分のレンタルwebサーバにUPしたら
ブラウザで「NET::ERR_CERT_AUTHORITY_INVALID」のエラーが出て
他の誰にもゲームを見てもらえません。

なにがどうなっているのでしょうか？

2020/10/01(木) 18:58:58.89

明らかにサーバー(SSL証明書エラー)の問題
此処で情報を詳しく出しても良いけど
当該レンサバのスレで質問する方が近道だと思う

2020/10/01(木) 19:08:37.71

>>274
XSERVERでございます

2020/10/01(木) 19:09:26.51

SSLとか証明書とか意味がさっぱりわからないのですが
なにがどうなっているのでしょうか？

2020/10/01(木) 19:12:56.72

Cloudflareでも通しとけ

2020/10/01(木) 19:21:47.87

Cloudflareとは何じゃ
良い子はそんなの使ってません。

2020/10/01(木) 20:39:45.05

>>276
SSLが分かんないのにURLがhttpsになってたら設定見直せとしか
「独自SSL」とかその辺見たらいいんじゃない
いずれにせよJS関係無いので向こうで聞いてみたら
XSERVER エックスサーバー Part6
https://mevius.5ch.net/test/read.cgi/hosting/1568069691/

2020/10/01(木) 22:31:33.76

AWS のS3 とか、知らんのか？w
HTTPS, SSL の証明書とか、システム構築運用の初歩の初歩だがw

無料の証明書、let's encrypt とか

2020/10/03(土) 14:18:04.93

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14232251614?sort=1&;page=2
abiko tetuってやつヤバすぎ

2020/10/14(水) 10:58:53.79

sort関数に追加の引数を渡すことってできますか？
array.sort(mySort())に引数を与えて条件によって処理を変えたいのですが。

普通にmySort()に引数を入れるとソートで使われる引数に値が入ってしまってダメでした。

2020/10/14(水) 11:29:33.74

function mySort(value) {
if(value===1) {
return (a, b) => a-b
} else if (value===2) {
return (a, b) => b-a
}
}

array.sort(mySort(1)) // 昇順
array.sort(mySort(2)) // 降順

**282** (ﾜｯﾁｮｲ ff7b-yH5j [153.198.55.63]) · 2020/10/14(水) 11:48:53.44

ありがとうございます。
新しいjsでは大丈夫でしたが、ES3という超古いバージョンなのです。
書き忘れていました。後出しで申し訳ありません。
(アドビのソフトで使われているjsです)

2020/10/14(水) 12:41:33.59

>>284
bindみたいな引数束縛する関数を作る

2020/10/14(水) 12:44:22.07

>>284
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/15-4_Array_Objects.html#section-15.4.4.11

**282** (ﾜｯﾁｮｲ ff7b-yH5j [153.198.55.63]) · 2020/10/14(水) 13:05:25.23

>>285
ちょっと自分のスキルでは難しそうです。

2020/10/14(水) 13:40:46.13

Function.prototype.bind()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

bind this か？

2020/10/14(水) 13:53:20.67

ソート関数なんて自前で作ればいい

2020/10/14(水) 13:58:43.04

ES3だと
return (a, b) => a-b
↓
return function(a, b) { return a - b; };
じゃね？

だいたいsortと比較関数でクロージャにしちゃって引数でなくローカル変数でやっちゃうよね

**282** (ﾜｯﾁｮｲ ff7b-yH5j [153.198.55.63]) · 2020/10/14(水) 14:10:27.29

returnの挙動はともかく、
mySort(value)自体がES3だとできないのです。(aにvalueが入ってしまう)
とりあえず今はグローバル変数で対応していますが、
引数でやる方法がないのかと思いまして。

2020/10/14(水) 16:00:56.30

比較関数はどうやって指定しているんですか?

2020/10/14(水) 17:00:41.74

>>291
ES3でもできるよ
できないと思ってるコードを書いてくれれば原因わかる

**282** (ﾜｯﾁｮｲ ff7b-yH5j [153.198.55.63]) · 2020/10/14(水) 17:08:39.53

>>293
今やってることは大雑把には以下の通りで、
mySortにa,b以外の値cを渡してそれを元に処理を追加したいのですが
cの渡し方がわかりません。
var ary=[10,12,53,41,5,6,];
ary.sort(mySort);
function mySort(a,b){
return a-b;
}

2020/10/14(水) 17:20:07.02

var ary=[10,12,53,41,5,6,];
ary.sort(mySort(-1));
function mySort(c){
return function(a,b){
return c<0 ? a-b : b-a;
};
}

**282** (ﾜｯﾁｮｲ ff7b-yH5j [153.198.55.63]) · 2020/10/14(水) 17:28:28.99

ありがとうございます。まさに希望どおりです。
こんな書き方もできるんですね。

2020/10/14(水) 18:41:11.04

高階関数やクロージャについて調べてみると理解進むよ。
ちなみに今でも全然通用する概念。

2020/10/24(土) 02:35:59.30

質問させてください。

nodejsで line botを作っていて応答文字に改行を入れたいのですが
ダブルクォートで囲った中に”\n”で改行するという仕様のようなのです。

例

return client.replyMessage(ev.replyToken, {
type: "text",
text: “あああ\nいいい”
});

しかし今作っているbotは文字列を変数に格納しており

const aaa = スクレイピングで拾ってきた文字列
const bbb = スクレイピングで拾ってきた文字列

const ccc = aaa + “\n” + bob

return client.replyMessage(ev.replyToken, {
type: "text",
text: ccc
});

では改行されませんでした。
text: `${ccc}` でもダメでした。

\nがそのまま表示されてしまいます。

ダブルクオートで囲い直す方法ってございませんでしょうか？
よろしくお願い致します。

2020/10/24(土) 11:37:48.17

>>298
wrap: true

2020/10/24(土) 12:36:00.80

>>299
ありがとうございます。
しかしダメでした、、
やっぱり \n がそのまま表示されてしまいます。

2020/10/24(土) 13:25:10.82

すみません。自己解決しました。
\ではなくバックスラッシュでした。
ありがとうございました。

2020/10/24(土) 21:42:06.09

そもそも文字列はシングルクオートで囲う癖つけとくと便利だと思う
テンプレート文字列にするのもいいけど

2020/11/08(日) 22:08:22.01

requirejsやってるんだけどシェルのexportコマンド的なの無いの?

**デフォルトの名無しさん** · 2020/11/24(火) 13:11:50.94

function hoge(){} //引数なし
hoge(a=11,b=33)
名前付き引数を可変的に追加できて
関数hoge側でkey（aとb）名も受け取れるようにしたいんだけど無理？
argumentsはkey名は無視されたし
hoge({a=1,b=3})で関数内でfor key in objみたいにするしかないのかな

2020/11/24(火) 14:02:04.95

function foo(a, b, ...rest)

**デフォルトの名無しさん** · 2020/11/25(水) 01:19:47.68

>>305
無理でした

2020/11/25(水) 16:04:16.70

いまいち何がしたいのかよくわかんないけど
function hoge(o = {}){
console.log(Object.keys(o))
}

hoge({a: 1, b: 3})
//=> ["a", "b"]

**デフォルトの名無しさん** · 2020/11/25(水) 16:45:55.85

>>307
端的にいうと
引数は
hoge(x=1,y=2,a="ho",b="ge")
hoge(z=2,x="abc")
みたいに指定できて
{x:1,y:2,a:"ho",b:"ge"}や{z:2,x:"abc"}
みたいに関数で受け取りたい
（もちろんx,yやa,b,cみたいなkey名はこれに限らず）

2020/11/25(水) 17:12:47.42

JSにそういう記法はないので無理
Pythonを使え

2020/11/25(水) 17:15:26.00

えっ…じゃあこうだけど？？
function hoge(o = {}){
console.log(o)
}

hoge({x: 1, y: 2, a: "ho", b: "ge"})
//=> {x: 1, y: 2, a: "ho", b: "ge"}

**デフォルトの名無しさん** · 2020/11/25(水) 17:52:06.24

>>309
なるほど
他の言語だとこういう書き方があったのでもしかしたらJSにもあるのかなとおもったのですがないのですね
ありやした

>>310
それはもちろん
しかしそれだとそもそも{}表記なんで

2020/11/25(水) 19:21:16.56

>>311
あーそうゆうことね。
()呼び出しでなくタグ付きテンプレート呼び出し、
eval使っていいなら、

function hoge(s) {
let o={},p=new Proxy(o,{set:(o,p,v)=>(o[p]=v,!0),has:()=>!0});
eval(`with(p){${s[0]}}`)

console.log(o);
}

hoge`x=1,y=2,a="ho",b="ge"`
//=> {x: 1, y: 2, a: "ho", b: "ge"}

2020/11/25(水) 19:29:03.94

hoge`
x = 1,
y = 2,
a = "ho",
b = "ge",
z = x + y,
c = a + b
`
//=> {x: 1, y: 2, a: "ho", b: "ge", z: 3, c: "hoge"}

**デフォルトの名無しさん** · 2020/11/25(水) 19:36:00.93

>>312,313
なるほど
そんな書き方もできるんですね
ありがとうございます

2020/11/25(水) 21:38:45.31

const hoge = [{id:"xxx",
num:5000},
{id:"yyy",
num:2000},
{id:"zzz",
num:9000},]

こういう配列でnumが一番大きいobjectを取得するシンプルな方法ってありますか？
思いついたのは
const foo = hoge.find((i)=>{
return i.num === Math.max(...hoge.map((v) =>{
return v.num
}))
})
なんですけどこれだけの処理に二重でループ回すのはナンセンスな気がしてしまって・・・

2020/11/25(水) 21:48:23.27

>>315
sortかfotEachしたら？

2020/11/25(水) 22:03:22.81

>>315
あるいはreduceか
forとかfor-ofで書けるようになった方がいいとは思うけどね

2020/11/25(水) 22:12:00.77

自分で書いといてなんなんですが>>315のnumは存在しない場合もありました

>>316,317
sortはアリかなと思いました
他のメソッドはパっと思いつく感じ最初の関数と似たようなものしか思いつきませんでした・・・

2020/11/25(水) 22:14:27.47

const foo = hoge.sort((a, b) => a.num - b.num).pop()
とか
const foo = hoge.sort((a, b) => b.num - a.num)[0]
とか。
しかし両者ともhogeを書き換えてしまうので、
const foo = [...hoge].sort((a, b) => a.num - b.num).pop()
とか
const foo = [...hoge].sort((a, b) => b.num - a.num)[0]
のほうが望みのものかもね。
あとは
const foo = hoge.reduce((acc, r) => r.num > acc.num ? r : acc)
とか。

2020/11/25(水) 22:26:19.76

sortしなくていいケースでsortするのは無駄

reduceかfor-ofで

2020/11/25(水) 22:29:12.37

>>318
> numは存在しない場合もありました

このような後出し要件の場合は、安全なアクセス関数を追加で用意して差し込むのが簡単。
例えば、
const getNumSafe = ({num = -Infinity}) => num
const foo = hoge.reduce((acc, r) => getNumSafe(r) > getNumSafe(acc) ? r : acc)
のように。

2020/11/25(水) 22:30:06.01

ライブラリ可ならlodashのmaxBy

2020/11/25(水) 22:50:57.62

>>319-322
ありがとうございます
参考に自分のパターンに合うものを書いてみたいと思います

2020/11/27(金) 01:16:52.95

Lodash は多くのライブラリも使っているから、使うべき！

プロジェクトのライブラリの依存関係を検索すると、
多くのライブラリが、Lodash に依存してる

2020/11/27(金) 03:15:11.50

Netflixはlodash切って素のJSで書き直したけどな。

2020/11/27(金) 12:17:00.93

ライブラリが必要な程、複雑な処理ではない気がするけどな

hoge.reduce((max, current) => max < current.num ? cutrent.num : max, -Infinity);

2020/11/27(金) 18:55:39.16

使うモジュールだけにしときな

2020/11/30(月) 16:28:41.73

動的型付け言語って本当にわかりづらい

javascriptでオブジェクト指向的なプログラムを組もうと思って
簡単な本でjavascriptを勉強してるんだけど
interfaceないのにどうやってオブジェクト指向的な開発してるんですか？
typescriptしたほうがいいんだろうか？

2020/11/30(月) 16:37:41.46

>>328
してください

2020/11/30(月) 19:07:05.83

>>328
class使って下さい

2020/11/30(月) 19:08:03.35

>>330
インターフェイスやabstracut使わずにどうやれと

2020/11/30(月) 19:19:23.06

>>331
あるもので何とかする気のない人にどう答えろと

2020/11/30(月) 21:04:19.76

javascriptでオブジェクト指向開発は、今のところは無理ってことですかね？

2020/11/30(月) 21:19:10.37

>>333
君にとってはそうだな

2020/11/30(月) 21:50:12.17

バカは何使おうが無理

2020/11/30(月) 23:43:04.66

独学におすすめの本はありますか？
プログラム自体はphpの基礎ができる程度です

2020/12/01(火) 06:15:24.88

>>334
あなたには出来ると言いたげですね

2020/12/01(火) 08:10:06.86

>>336
『JavaScript for impatient programmers』

2020/12/01(火) 10:44:14.97

javascriptって面白い挙動するんだね
class s{
constructor(){
this.s1="s1";
let .s2="s2";
alert(); }// ---①
alert(){window.alert();}} //---②

new s();
-------------------
①を
alert(s1)　×
alert(this.s1) 〇
alert(s2) 　〇
alert(this.s2)　×
と、②で引数を受け取らなくてもalertで値が表示される

①alert(s2)とし
②alert(){window.alert(this.s1):}
とすると、s2がalertされるし

①alert()とし
②alert(){window.alert(this.s1):}
とするとalertには何も表示されない
とても不可思議な挙動

2020/12/01(火) 11:40:52.32

>>339
(1)で(2)を呼びたいならthis.alert()でないとだめ
ブラウザ上ではwindow.は省略可能なので(1)のalertはwindow.alertその物
スクリプト系の言語ではc++やc#等とは違ってthis相当の物を省略できないのが多い

2020/12/01(火) 12:07:45.77

>>336
プロ向きなら、サイの表紙の2冊のサイ本

初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017
JavaScript 第6版、2012、David Flanagan

ただし、これらは、Google などの開発者が読む、プロ向きの本。
最低でも、Ruby は出来ないと、難しすぎて読めないと思う

JavaScript は、言語仕様が肥大化してる。
Rubyみたいに、簡単には学べないから、適当にお茶を濁した方がよい。
キリがない