+ 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/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みたいに、簡単には学べないから、適当にお茶を濁した方がよい。
キリがない

2020/12/01(火) 13:31:02.54

>>341
> ただし、これらは、Google などの開発者が読む、プロ向きの本。

さすがにこれは嘘
Ruby知らない俺でも読めた

ES2020などの最新仕様に対応した和書がないのは認める
日本語に拘らなければある(>>338)し、概ね日本人著者よりも英語圏の著者が優秀

2020/12/01(火) 19:23:33.17

>>340
勉強になります、ありがと先生！

**333** (ﾜｯﾁｮｲ dff0-jrSk [115.65.191.12]) · 2020/12/02(水) 10:31:40.93

javascriptの挙動を確認したいので
本体が何処にあるか調べてるのですが不明です
javascript本体はどこにあるのでしょうか？

2020/12/02(水) 13:01:48.46

>>344
本体の定義は何？

2020/12/02(水) 13:44:59.62

Node.js なら、コマンドプロンプトで、
where node
と入力すると、

C:\Program Files\nodejs\node.exe

2020/12/02(水) 14:00:48.75

「javascript本体はどこにあるのか」か。
ちょっと哲学的な問いだな。
俺としては、「Ecma International にある」説を推したい。
しかし物理的実体があるわけではないので Ecma International 本部があるジュネーヴにはない。

2020/12/02(水) 17:09:47.94

ブラウザに組み込まれてるのでは？（クソザコ素人）

2020/12/02(水) 18:10:51.81

>>344は>>328,339と同じ人なので深い答えは期待出来ないかと

2020/12/02(水) 18:15:26.80

単純にコードはどうやって見られますかって話では。

2020/12/04(金) 08:30:08.52

質問は放置されたか

2020/12/04(金) 15:48:35.50

書き込み不可でした
質問の仕方が悪くてすみません

javascriptが関数などをどう処理してるのかを知りたくて
javascriptのソースファイルを見たいなって思ってました
googleのchromeファイルを見てたんですけどちょっと分からなくて質問してみました

実際にはバイナリなりで読めない状態なのかもしれませんけど
所在だけでもしっておきたいなと

2020/12/04(金) 16:14:05.08

>>352
そういう説明が欲しかった。
chromeのJavaScript実行エンジンはV8だから、V8のソース読めばおｋ。
以下に手順が説明されているよ。
https://v8.dev/docs/source-code

2020/12/04(金) 17:56:05.68

>>353
ありがとうございます！
時間のあるときに落として読んでみます
本当にありがとうございました！

2020/12/04(金) 18:35:57.72

function(5, 10){
この5や10を別の数字や文字に変更することは出来ますか？

2020/12/04(金) 19:13:20.61

>>355
そもそも、仮引数に数値は指定出来ないと思うのだが…
要件が成立しない

2020/12/04(金) 19:23:39.37

関数に引数で渡された変数の中身じゃなくて変数の名前って取得できますか？

2020/12/04(金) 19:25:42.17

>>356
文字は適当に書いただけで意味はないです
ようするに()内の文字（呼び出し時に送った文字列とか）を加工できるかどうかの質問です
わかりにくくてすみません