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

2020/12/04(金) 19:34:15.00

>>357-358
変数値は再代入で変えられる

変数名はグローバル変数を除いて変更(元の名前を削除)出来ない
そもそも、変数名を変えようとするのは不具合の種になる
オブジェクトのプロパティやnew Mapのkey等、限られた空間で安全に変更するのが好ましい

2020/12/04(金) 19:36:52.05

>>357
無理

2020/12/04(金) 19:41:14.45

>>357
と思ったが、Function#toStringをparseすれば、ユーザ定義関数に関しては出来なくはないな
目的次第では別の手段にすべきと思うが

2020/12/04(金) 20:52:39.53

>>359
ありがとうございます

2020/12/04(金) 21:02:15.15

JavaScriptの効率的な学習方法を教えて下さい

入門書のひらがなJavaScriptは終わりました。
次は、Progateか一つ上の書籍かと思っていますが、どの書籍にすべきか迷っています

2020/12/04(金) 23:49:00.70

山田何とかの著書一択

2020/12/05(土) 07:37:21.02

>>363
> JavaScriptの効率的な学習方法を教えて下さい

目指している目標に依る

何かを作るだけならサンプルコードのコピペに行き着く人が多い

基礎から下積みするなら、一日でも早く仕様書を読めるようになる事が最も効率的なので、仕様書に近い書籍を選ぶ事になる

2020/12/05(土) 07:48:18.47

最初からtypescriptを使うことが最も近道

**質問者** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/05(土) 07:57:03.24

目的は参照ボタンを選択してファイル選択ダイアログを開き、選択したローカルファイルの中を読む事です。
ただ、
<input type=`file`～>で表示されたファイルパスを取得する事は出来ない(セキュリティ上)？
ローカルファイルを読むにはファイルパスが必要なので、どうすれば良いでしょうか？
すみませんよろしくお願いいたします。

2020/12/05(土) 08:04:08.32

>>363
『ひらがなJavaScript』が見つからないのだが…
https://www.google.com/search?q=%E3%81%B2%E3%82%89%E3%81%8C%E3%81%AAJavaScript

2020/12/05(土) 08:16:49.84

>>367
質問者ではどの質問者か分からん
文脈的には>>365へのレスで>>363本人か？(IP違うが)

名前にレス番ふって、レス相手にレス相手アンカーするぐらいはしてくれ

**367** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/05(土) 08:53:46.63

>>369

全く新しい質問です。

2020/12/05(土) 09:52:09.52

>>370
把握した

>>367
File APIを使えば良い
https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications
https://triple-underscore.github.io/File_API-ja.html

**367** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/05(土) 12:30:15.84

>>371

ありがとうございます。
これでフルパスを取得できるんですね。

2020/12/05(土) 13:25:14.38

フルパスは取れないファイルが読めるだけ

**367** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/05(土) 18:02:57.10

>>373

すみません。
ローカルファイルで読む為にフルパスが必要なんです。セキュリティの問題で取りにくいのは知ってます。それで
>>367
に書いた質問をしたのです。
よろしくお願いいたします。

**367** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/05(土) 18:22:16.72

補足

すみません。
サブ画面ではファイルパスの設定だけ。
メイン画面ではじめて、サブ画面で設定したファイルを読み込むという事をしたいのですが、無理なのでしょうか？
よろしくお願いいたします。

2020/12/05(土) 20:51:52.66

> セキュリティの問題で取りにくいのは知ってます。

ぜんぜん知ってない。知ったかするな。
取り「にくい」だけで頑張れば取れるのなら何のセキュリティ対策にもならないだろ。

2020/12/05(土) 21:00:16.20

フルパスがあればローカルファイルが読める環境というのがよくわからんがそれならElectronとか使えばいいんでねよくわからんが

2020/12/05(土) 21:12:05.00

ブラウザ内のHTML から、ローカルPC 内の情報が取れるのか？

Node.js みたいなサーバーを立てていないと無理なのでは？
Electron も内部で、Node.jsを使っているし

**367** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/05(土) 21:32:44.16

>>376

すみません。出来ないんですね。
設計者はサブ画面でファイル選択ダイアログを使用してexcelファイルを選択して、メイン画面でexcelファイルを取り込む事をやりたいんでしょうが、無理なんですね。設計者に言います。

それにしても、
POI技術で
https://blog.java-reference.com/poi-read-excel/
最初に
�is = new FileInputStream("D:�sample.xlsx");
パスを指定してますが、これは一般的には固定のローカルファイルパスを指定するもんなんですね。

>>377
ありがとうございます。調べてみます。

2020/12/05(土) 21:36:30.80

javascriptじゃないじゃん

2020/12/05(土) 21:37:30.98

>>365
返答ありがとうございます、仕様書の様な書籍とはどんなものでしょうか？、目指すところは現在webコーダーなのですが、JavaScriptでフロントエンドやサーバーサイド開発が出来る様になりたいです

>>368
「スラスラ読める JavaScriptふりがなプログラミング」が正式な書籍名でした、すみません

>>366
なるほどTypeScriptですか、やってみます

2020/12/05(土) 23:22:08.87

>>374
ファイル内容読むのにフルパスは必要ない

>>375
フルパスを受け渡す必要はない
ファイル内容を渡せばいい
https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage