X



+ JavaScript の質問用スレッド vol.138 +

■ このスレッドは過去ログ倉庫に格納されています
2019/02/17(日) 02:12:57.04ID:???
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
 1レスに収まらないならコード投稿サイトを利用してください。
 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです

※前スレ
+ JavaScript の質問用スレッド vol.137 +
https://mevius.5ch.net/test/read.cgi/hp/1546773073/
2019/03/14(木) 16:13:00.64ID:???
>>336
「使わない」じゃなくて「束縛しない」だな
すまん
2019/03/14(木) 17:06:18.92ID:???
>>337
だからそういう思想があるわけじゃない。
thisが必要ないから結果としてそうなっただけ
2019/03/14(木) 18:22:12.31ID:???
MDNにめっちゃ詳しく書いてあった
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

アロー関数はthisを持たないとか初めて知った
ちゃんとMDN読んどくべきだなあ
2019/03/15(金) 05:47:18.43ID:???
持たない?むしろ持ってるのだと思うが
関数オブジェクトが作られるときに束縛される
2019/03/15(金) 08:01:12.85ID:???
うんthis以外にも違いはあるけどthisについては定義時にvar hoge = (function() {〜}).bind(this)としてるようなもんだからな
2019/03/15(金) 09:00:52.35ID:???
>>341
定義後にthisは変動しない仕様だった?
2019/03/15(金) 09:30:17.18ID:???
アロー関数はthisを持たないってのは、別に私がそう解釈したわけじゃなくて
MDNにハッキリと書いてあるんだけど

>2 つの理由から、アロー関数が導入されました。1 つ目の理由は関数を短く書きたいということで、
>2 つ目の理由は this を束縛したくない、ということです。

>アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。
>つまり、アロー関数内の this 値は通常の変数検索ルールに従います
>(スコープに this 値がない場合、その一つ外側のスコープで this 値を探します)。

翻訳が間違ってるか、MDN自体が間違ってるってこと?
2019/03/15(金) 09:33:01.75ID:???
属するスコープの変数を参照する極々当然の挙動だな
2019/03/15(金) 10:19:44.87ID:???
翻訳か原文からそうなのか知らんが持つって言葉の使い方が戦犯
mdnなんか見てないで仕様読め仕様
2019/03/15(金) 12:00:44.39ID:???
質問です
コールバック関数を使う関数を作りたいのですが、どう書けばよいのか分かりません。
検索しても既存のコールバック関数を伴う関数の使い方(setTimeout()の使い方など)ばっかり出てきて
そういう関数の「作り方」が出てこないのです…
早い話がsetTimeout()のような関数本体の方を作り、書きたいのですが
どうすればいいんでしょうか? どう検索したら出てきますかね?
2019/03/15(金) 12:13:05.56ID:???
コールバック関数を使う関数

function(func){
func()
}
2019/03/15(金) 12:15:35.98ID:???
var コールバック使う関数 = function(コールバック) {
var コールバック使う関数が用意するデータ = 'hello, ';
var result = コールバック(コールバック使う関数が用意するデータ);
return result;
};

使い方:
var 文字列の長さを返す関数 = function(文字列) {
return 文字列.length;
};
var 文字列の後ろにworld足して返す関数 = function(文字列) {
return 文字列 + 'world';
};
console.log(コールバック使う関数(文字列の長さを返す関数));
//=> 7
console.log(コールバック使う関数(文字列の後ろにworld足して返す関数));
//=> hello, world
2019/03/15(金) 12:35:44.33ID:???
>>348-348
ありがとうございます!完全に分かりました。助かります…
2019/03/15(金) 13:39:00.60ID:???
JavaScript のthis は、global のwindow などを指してしまうから、クソ仕様

だから、jQuery, Haxe では、this を修正している
2019/03/15(金) 13:44:52.34ID:???
Rubyは最も一般的な方法で定義した関数(関数じゃないw)が値として取り回せない(第一級関数でない)クソ言語wwwww
def add(a, b)
a + b
end
def opTwo(a, b, func)
func(a, b)
end
p opTwo(1, 2, add)
=> Line 9:in `add': wrong number of arguments (0 for 2) (ArgumentError)
from t.rb:9
プギャーm9(^Д^ )

ちなみにPython:
def add(a, b):
return a + b

def opTwo(a, b, func):
return func(a, b)

print(opTwo(1, 2, add))
=> 3

ちなみにJavascript:
function add(a, b) {
return a + b;
}
function opTwo(a, b, func) {
return func(a, b);
}
console.log(opTwo(1, 2, add))
=> 3
2019/03/15(金) 13:48:49.73ID:???
>>351
RubyにはRubyのやり方がある

はず
2019/03/15(金) 14:01:38.57ID:???
やり方?
あるよねーいっぱいw
def 、proc、Proc.new、->、lambda、ブロック、・・挙動と使いどころの異なるこれら関数ライクを使いこなし、
==、===、eql?、equal?の違いと使いどころを完璧に把握しているRuby信者wwwww
2019/03/15(金) 14:03:38.05ID:???
>>345
逆ギレワロタw
2019/03/15(金) 15:21:31.66ID:???
スクリプト内部でcreateElement('canvas')として動的にキャンバス要素を作成しているのですが、このキャンバスを右クリック、「名前をつけて画像を保存」を選択すると、すべてのファイル(*.*)となってしまいます。
jpegやpng形式で保存出来るようにしたいのですが、どうすればいいのでしょうか? どなたか教えて下さい。
使用しているブラウザはグーグルクロームです。
2019/03/15(金) 15:31:35.89ID:???
保存ボタン付けるならやったことあるけど右クリックか。
どうやるんだろ?
2019/03/15(金) 18:03:13.99ID:???
>>350
指してしまうってw
指す用に自分で書いてるだけなのに…

プログラムは思うようには動かんの
書いたように動くだけ
2019/03/15(金) 20:26:29.49ID:???
>>343
thisは全ての関数内でキーワードとして動作する
だから「持つ」「持たない」というとそういう仕組みを持っているのかの話と
取られかねないのでオススメしない

thisキーワードは[[ThisValue]]が束縛され得る最も近いスコープを検索して
その[[ThisValue]]を参照しようとする
アロー関数の関数スコープは束縛しない事になっているので検索から外される
359Name_Not_Found
垢版 |
2019/03/15(金) 23:42:16.73ID:i8BKzs9E
何を言ってるのか分からんが、少なくとも俺はアロー演算子を使わない方が良さそうということだけよく分かる
2019/03/15(金) 23:57:46.29ID:???
なんでやねんw
2019/03/16(土) 04:50:02.55ID:???
 function hoge(){}

hogeはwindow(global)のメソッドだからthisはwindow

 var A = {
   hoge : function(){}
 };

hogeはAのメソッドだからthisはA


 var img = document.querySelector('#img');
 img.addEventListener('click', A.hoge);
 img.addEventListener('click', function(){ });

imgにA.hogeという関数がバインドされて実行されるからthisはimg
ただし

 img.addEventListener('click', () => { });

アローの場合は、ひとつ上のスコープのthis



て理解であってますか?
2019/03/16(土) 05:25:00.08ID:???
>>361
> var A = {
>   hoge : function(){}
> };
>↑
>hogeはAのメソッドだからthisはA

A.hoge()で呼び出される限りにおいてはYes。
「FunctionオブジェクトがAのhogeプロパティに設定されている」だけで
必ずしも「Functionオブジェクトを呼び出したときのthisがAになる」わけではない

この辺がクラスベース言語のインスタンスメソッドとは違うので、混乱しやすいとこですね
2019/03/16(土) 06:34:10.21ID:???
コールバック関数って数Vに出てきた合成関数みたいな認識でいいんですかね?
2019/03/16(土) 06:40:46.53ID:???
>>361
globalになるのは、非Strict Modeのみ
2019/03/16(土) 06:56:55.24ID:???
>>361
違う
thisは関数の呼ばれ方によって決まって
「.」演算子によってReference内部型が作られるときに決まる
直に呼ぶとsloppy modeのときはglobalになるという決まりなだけ
簡単に言うとobj.func()と呼んだ時onjがthisになるというだけ
thisは第0番目の引数とでも思えば良い
2019/03/16(土) 07:48:03.97ID:???
>>363
見た目はそうだけど、そう言って良いもんかどうか
まあ引数に関数渡して、そっちで実行してねってやつだよ

例えば関数Aの後に関数Bを実行したいけど、Aが

function A(){
  setTimeout(function(){

    // ふはははは、いつ終わるかわかるまい!

  }, Math.floor( Math.random() * 1000 ));
}

こんなのだと、Bをいつ発火させればいいかわからん
そんなとき

function A( callback ){
  setTimeout(function(){

    // おわたぁ!
    callback();

  }, Math.floor( Math.random() * 1000 ));
}

こうしておいて

A( B );

ってすれば、ちゃんとAが終わってからBが発火する、よね!
って考え方がコールバック
2019/03/16(土) 07:58:29.93ID:???
数学の合成関数ってのは

x = y + 1 = f(y)、 y = z - 1 = g(z)

としたとき

x = f( g(z) )

と出来るねって話
これをプログラムっぽく書くと

function f(y){ return y + 1; }
function g(z){ return z - 1; }

x = f( g(z) );

こんな感じになる
これは関数fの引数に、関数gを実行した結果を渡しているわけであって
関数gを渡しているわけではない

のでこれはコールバックとは呼ばない、と思う
2019/03/16(土) 08:00:06.25ID:???
数学の「=」は等号だけど
プログラムの「=」は代入なので
そのへん気をつけて
2019/03/16(土) 20:29:39.66ID:???
漫画のコマ割りツールを作ろうとしているのですが
(1)テンプレート(ブログのカラムみたいな)方式
 ・1ページ分、コマ単体の中にさらにテンプレートを用意、みたいな
 ・テンプレート以外の微妙な調整ができない
(2)mousemoveなりで(居合斬りみたいに)直線で切り分け方式
 ・割った部分だけの削除後の再描画のアルゴリズムがよくわからない
 ・柔軟性あり
(3)線描画ツール方式
 ・特定の図形を描画できる
 ・テンプレート式だが柔軟性もある
 ・目視配置なのでズレが気になる(マス目内だけを移動するように補正すればよいかも)
を考えてみました(まだ作っていない)
何か効率の良いアイデアはないでしょうか?
(おそらく普通?は(2)のシミュレーション方式で、canvasに再描画する感じで
コマと枠線を選択し編集できる機能を別々に作ってー、という風にすると思うのですが
せっかくなのでブラウザとかHTMLやCSSをうまく組み合わせて効率よくできないものかと思ったのです)

すでに作ったもので言えば、DOM要素に横割り縦割り機能をつけ
要素を割ったら(要素の中に要素を作る)その中の要素にも縦横割り機能がつく、をループ(比率調整付き)
みたいなのは作ったのですが、垂直割りしかできないのでなんか今一です(キャプチャはブラウザの拡張)
要素を台形とかにできれば良いのですが・・
2019/03/16(土) 20:36:49.93ID:???
>>368
JSの=は代入じゃない
所謂共有渡しにおける名前付け
2019/03/16(土) 20:53:51.27ID:???
Assignment Operators
Syntax
https://www.ecma-international.org/ecma-262/5.1/#sec-11.13

JSで参照になるのはArrayや関数含めたオブジェクトで、数値やtrue/falseなどのプリミティブ値は値で、文字列はちょっと特殊じゃなかったっけ。
本当に全部参照になってるのはPythonだった気がする
2019/03/16(土) 21:03:22.23ID:???
>>369
そのまま作り続けろ
1年後行き詰まるからCanvasで作り直せ
10年後良いものができてる
冗談でなくおれはそうしてものづくりをしてきてる
2019/03/16(土) 21:05:46.41ID:???
>>371
JSに参照とかはない(Reference型はあるが)

値は基本的に複製されることはなく
すべて同一存在の名前付けの連鎖でしかない
要するにお前が会社ではタッ君と呼ばれ、家ではターちゃんと呼ばれてるのと同じ
2019/03/16(土) 21:26:22.98ID:???
あんまり触らないほうがよさそうだな
2019/03/16(土) 21:39:16.61ID:???
変に他の言語に引っ張らなければJavaScriptはシンプルでわかりやすい言語だと思うけどなぁ
2019/03/17(日) 00:27:38.62ID:???
>>369
何かの図形描画ツールを参考にすれば?
377Name_Not_Found
垢版 |
2019/03/17(日) 10:46:23.51ID:oYnZimu7
今jsのロクでも無い部分ってあるのかな
昔はundefinedがうんちだった
2019/03/17(日) 11:53:16.69ID:???
undefinedなんて実際に問題になることなかったろ
undefinedに何か代入するとかワザと壊しにかかってるんだからその結果壊れても問題ないでしょ
他にも置き換えられたら困るものなんて無数にあるんだし
2019/03/17(日) 11:58:56.33ID:???
他の言語は知らんがjsは基本
昔動いてたコードは今も動く
動いてたうんちコードは今も動くはず
'use strict'がなければundefined = 'puyopuyo'も
2019/03/17(日) 13:08:53.43ID:???
node.jsの使い途が分からない。
2019/03/17(日) 14:31:49.75ID:???
>>380
使わなきゃいいじゃん
2019/03/17(日) 16:50:28.45ID:???
使いみちが分からんものを使ってみるのも大事だぞ
そのときには使えなくても後々使うかもしれない
383Name_Not_Found
垢版 |
2019/03/17(日) 17:18:44.38ID:RNotdYYW
node.jsは一度使っておいたほうが良い
2019/03/17(日) 19:26:56.07ID:???
Node.js、コマンドラインでは毎日使ってるし
(ただ単にバッチファイルをダブルクリックしたら起動してファイルを生成してくれるってだけだけど)

一応localhostでなんやかんやするやつのチュートリアルもやったけど
それらを組み合わせて色々するとなると、コールバック地獄とか大変だと聞くので
なかなか重い腰が上がらずにいる
うまく使えたらすごく良さそうだと思うんだけど
このへんどこで学んだらいいものか
2019/03/17(日) 21:20:14.86ID:???
JSでclip-pathを操作したいのですが、検証ツールで見ると「at center center」というおかしな値になってしまっています。
JSで設定できないCSSプロパティがあるということでしょうか?

https://jsfiddle.net/0vrcehsf/1/
2019/03/17(日) 22:57:03.93ID:???
VSCode で、Code Runner という拡張機能を入れて、右クリックメニューまたは、
Ctrl+Shift+P から、Run Code で、node.js で実行される

node は、npm, yarn を使うのに必須だから

他にも、webpack, babel, vue.js なども、たぶん、node が必須だろ
387Name_Not_Found
垢版 |
2019/03/18(月) 02:14:35.81ID:NS7cgoce
変数aがあるとして
aが負の数(-700など)だったなら-1に
aが正の数(329など)だったなら1に
変換したいのですが、どうすればいいですか?
2019/03/18(月) 02:30:12.32ID:???
Math.sign(a)
2019/03/18(月) 06:47:25.25ID:???
同期処理と非同期処理がよくわかりません
iframe使ったら勝手に非同期処理になるんですか?
2019/03/18(月) 07:09:52.54ID:???
a>0?1:a<0?-1:0
391387
垢版 |
2019/03/18(月) 17:13:49.96ID:???
>>388
それでした!ありがとうございます

危うく >>390 みたいなことするところでした
2019/03/18(月) 17:38:35.25ID:???
まぁ0きたときに微妙かもしれんが
2019/03/18(月) 17:45:45.85ID:???
(a<0)*-1||1
2019/03/18(月) 17:47:36.61ID:???
>>390 みたいなことしたら何かマズいのか?
2019/03/18(月) 17:48:41.26ID:???
別に>>388の方が性能や可読性高いわけでもなし、>>390で何の問題もないと思うけど
396Name_Not_Found
垢版 |
2019/03/18(月) 18:01:33.54ID:1/b8FMfj
>>388
はカッコイイけど俺の可読性が低いので使わないと思う
signとか距離求めるっ時ぐらいしか使わないよぉ
2019/03/18(月) 18:09:51.31ID:???
signはIEで動かなかった思い出
今は大丈夫かな?
2019/03/18(月) 18:12:19.37ID:???
ぶっちゃけIEよりfirefoxの方が上手くJS動かないこと多くない?
IE10以下は論外として
2019/03/18(月) 19:06:34.58ID:???
signと三角関数のsinを勘違いしている幼稚園児が約一名いるなw
2019/03/18(月) 19:18:56.62ID:???
Math.signumじゃいかんかったんかね
他にsignumをsignって書く言語あったっけ?
2019/03/18(月) 20:00:11.87ID:???
>>393
これはどうして動くの
2019/03/18(月) 20:16:12.55ID:???
3つしか演算子ないんだから
流石に自分でいろんな場合考えてみようぜ
2019/03/18(月) 20:17:46.82ID:???
>>401
論理演算子 ||(or)は
expr1 || expr2 としたとき
expr1がfalseとみなせる値の時、expr2を返す

falseとみなされるのは
0、-0、false、null、undefined、NaN、空文字

aが正のとき、カッコがfalseつまり0なので
0 || 1 となり、0はfalseとみなされ1が返る

aが負のとき、カッコがtrueつまり1なので
-1 || 1 となり、-1はfalseとみなされないので-1が返る
2019/03/18(月) 20:25:56.89ID:???
NaNとかもあるから
a>0?1:a<0?-1:a

+a>0?1:+a<0?-1:+a
の方が良いだろうな
2019/03/18(月) 20:37:27.77ID:???
(a>0)-(a<0)
が一番わかり易いでしょ
2019/03/18(月) 20:44:14.80ID:???
>>405
すばらしい
2019/03/18(月) 20:54:23.12ID:???
結局signのpolyfillやないかい
2019/03/18(月) 21:05:02.19ID:???
それがどうかしたのか?
2019/03/18(月) 21:08:59.06ID:???
なんとか10文字に小さくできた
-(a<0>0)|1
2019/03/18(月) 21:10:26.37ID:???
と思ったら8文字でもいけたわ
-(a<0)|1
2019/03/18(月) 21:49:44.05ID:???
7文字
a>>31|1
2019/03/18(月) 22:09:43.39ID:???
さぁ!6文字誰かいないかい?
7文字で終わりなのかい!?
2019/03/18(月) 22:20:04.18ID:???
>>407
>>390以外はa=0の時の挙動がsignと違うからポリフィルにはならないような
2019/03/18(月) 22:55:03.55ID:???
a=-100000000000000000000000000;
がだめじゃん
まぁガバガバだけどそこそこ動けばいいレベルだと7文字限界っぽいな
2019/03/18(月) 23:26:54.17ID:???
6文字
a/~a|1
2019/03/18(月) 23:28:06.07ID:???
>>414
対応したぞ〜
a?/^-/.test(a)?-1:1:0
0のときの挙動もsignと同じだw
2019/03/18(月) 23:36:18.95ID:???
>>416
これは安全w
遅そうだけど
2019/03/18(月) 23:47:54.91ID:???
残念ながらNaNに対応できていない
2019/03/18(月) 23:52:24.69ID:???
Math.sign含むMath関数はBigIntなどNumber以外の数値を受け付けないという致命的な欠点がある
2019/03/18(月) 23:58:51.06ID:???
BigMathできるのかと思ったけどstandard libraryまで待つことになりそうだな
2019/03/19(火) 00:12:45.40ID:???
>>418
対応したぞ〜
Number.isFinite(a)?a?/^-/.test(a)?-1:1:0:NaN
2019/03/19(火) 01:06:23.68ID:???
それだとInfinityがNaNになる
2019/03/20(水) 10:54:08.67ID:???
スマホ(android)でもjavaScriptの勉強がしたいのですが、使いやすい出力アプリ?はありますか?
ブラウザで出力できるのならそれでも良いのですが、なかなか難しいようで…
424Name_Not_Found
垢版 |
2019/03/20(水) 10:59:09.00ID:9YLktb+I
>>423
使いやすくはないけど
https://codepen.io
https://jsfiddle.net/

スマホで無理に書くより、大人しく仕様を読むとかにとどめておいたほうが良いとは思う
2019/03/20(水) 11:20:55.93ID:???
>>424
codepenを使わせていただきます。
ありがとうございました。
2019/03/20(水) 11:55:51.31ID:???
なぜあえてそんな苦行を…
2019/03/20(水) 12:09:30.47ID:???
ホリエモンの影響だろうな
スマホでなんでもやっていくスタイルには賛成だが
少なくともjavascriptのコーディングをスマホのみでやるのは数年早い
フォークしてコピペや改変くらいならまだしも
2019/03/20(水) 12:46:23.84ID:???
俺はガキの頃ガラケーのフルブラウザから始めたぞ
大丈夫、できるよ
429Name_Not_Found
垢版 |
2019/03/20(水) 13:13:03.49ID:9YLktb+I
紙とペンの方がマシなレベル
430Name_Not_Found
垢版 |
2019/03/20(水) 20:59:06.50ID:/d+gyT6p
Blutoothキーボードだって繋げられるんだし、何も問題はない
2019/03/23(土) 22:22:40.79ID:???
スマホでもIDEの補完並みのIMEがあればできるかもな あるのか?
2019/03/24(日) 01:09:04.99ID:???
いらんでしょ
昔はメモ帳で書く人も多かったんだし
制約が多い中頑張ることは変な癖がつくけどそれはプラスにもなる
2019/03/24(日) 11:35:11.49ID:???
すみません初心者の質問ですが
あるelementAが存在するかしないか分からない時に、
var element=elementA;
elemet.style.display="none";
というふうに書くとelementが要素でないのでstyleがundefinedになるので2行目の時点でエラーになってしまいますよね。
こういう時に「要素があれば指定の処理をする、なければ何もしない、エラーは出さない」ようにするには
var element=elementA;
if(element)elemet.style.display="none";
というふうに書くしかないのでしょうか?もう少し簡潔に書く方法とかあったりしないのでしょうか
2019/03/24(日) 11:36:31.84ID:???
>>433
すみません
x というふうに書くとelementが要素でないのでstyleがundefinedになるので2行目の時点でエラーになってしまいますよね。
o というふうに書くとelementAが存在しない場合はelementが要素でなくなるのでstyleがundefinedになるので2行目の時点でエラーになってしまいますよね。
です
2019/03/24(日) 14:39:16.19ID:???
>>433
十分簡潔だと思うけど……
2019/03/24(日) 14:40:07.19ID:???
あーひょっとして
ver element = elementA?elementA:new Element()
みたいなことをしたいのかな
NullObject的な
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。

ニューススポーツなんでも実況