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

**デフォルトの名無しさん** · 2018/06/02(土) 14:31:23.04

JavaScript を自ら学ぶ人のための質問スレッドです。

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

前スレ
+ JavaScript の質問用スレッド vol.125 +
https://mevius.5ch.net/test/read.cgi/tech/1518940081/

（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）

**デフォルトの名無しさん** · 2019/01/12(土) 16:39:55.64

>>830
長い

**デフォルトの名無しさん** · 2019/01/12(土) 17:08:51.58

>>825
初心というか、新しいことを始めるときにはだいたいこんな感じ。
1) 適当に検索して必要な部品をコピペする
2) コピペ同士の整合性確保と自分の美意識に従って整形する
3) 時間が許す限り 2 を繰り返す
4) 試験する

整形するところで、たとえば未知の関数ならその役割や必要なパラメータを理解する必要があるし。
コピペを適当に順序を組み替えてみると予期しないエラーが生じることもあるから、その原因を調べることで理解が深まったりするし。
要は好奇心が自分を動かしてるんだろうな。そりゃ打ち込みだけなら眠くなるだけだわ。

**デフォルトの名無しさん** · 2019/01/12(土) 19:02:39.47

たくさんのレスありがとうございました。
ちょっとやる気出てきました
が、道のりは険しそうですね

webの専門学校の授業でhtmlとcssを学び
ページは作れるようになったものの
javascriptはよくわからないまま授業が終わり
今はphpを覚えさせられてる段階です
3ヶ月ぐらいです

授業は教科書一冊を前から順番に終わらせた感じですが
先生はcssで出来るなら無理にjavascriptを使わなくて良いって言ってました
先生も他の言語が得意みたいで、あまりjavascriptは詳しそうな感じではなかったです

jQueryはどんなライブラリがあるのかを知り、
それを確実にコピペができることが大事って言われたのですが
コードが読めないjQueryをコピペするのはあまり面白くありませんでした

目指してるのはwebアプリとかゲームとか個人で作りたいです
javascript(Vue.js)とphp(laravel)を覚えてアプリを作ろうと考えています
将来グーグルアプリやアップルストアに置いたりしたいです

MDNは先生もおすすめしていますが
難しすぎるのと、同時に画面表示すると作業しにくいので本を書き写しています
まだ寝るまで時間あるので引き続き書き写ししようと思います

クラスで取り残されてて、あんまり質問できない空気なので
意見もらえて勉強になりました

**デフォルトの名無しさん** · 2019/01/12(土) 19:42:31.64

>>833
> 同時に画面表示すると作業しにくいので本を書き写しています
今すぐ2画面にして、片方でMDNを見ながらもう片方でコーディングする癖を付けろ。
今なら2万円くらいで出来るはず。
そして今すぐゲーム作成に着手しろ。（詳細後述）

> （略）　3ヶ月ぐらいです
ズブの素人からか？ならそんなもんだ。
君が特に頭が悪いって事ではない。

> コードが読めないjQueryをコピペするのはあまり面白くありませんでした
これはもうやらなくていい。時間の無駄だ。

> 目指してるのはwebアプリとかゲームとか個人で作りたいです
> javascript(Vue.js)とphp(laravel)を覚えてアプリを作ろうと考えています
Webで言う「アプリ」は「ドキュメント」と対比されるもので、
上記jQueryを使うのは主に「ドキュメント」であり、つまり君にはjQueryの知識は不要だ。
そして、「アプリ」と言われるのは実はHTML主体のアプリ(ECサイト/掲示板/社内クライアント(勤怠管理等)）であって、
これら向けのフレームワークがvueであり、またサーバーサイドの知識も有った方がいいからPHPもありだが、
君の目標のcanvasアプリでは、はっきり言ってvueやPHPの知識はいらない。

君の専門学校は一般的なHTML/CSS/JavaScript/PHPの講習をしており、これ自体は悪くない。
しかし君にはjQueryもvueもPHPも必要なく、今現在のHTML/CSS/JavaScriptだけで出来る。
だから今すぐゲーム作りに着手しろ。最初は○×ゲームやオセロ等で構わない。

プログラミングなんて手段でしかないから、結局のところ、モチベーションが上がらないと上達もしない。
写経の際にいじくり倒して快感を得られるタイプなら写経も効果あるが、
君の場合はそうではないのだから、写経は時間の無駄だ。
一応の知識は揃っているはずだから、君は今すぐ君がやりたいこと、例えばゲームを試しに作ってみることだ。
そうすれば、今の自分に何が足りないか分かるだろうし、そこを先生に聞けばいいんだよ。
折角金払って専門学校に行っているのだから、先生をうまく活用した方がいい。

**デフォルトの名無しさん** · 2019/01/12(土) 20:05:20.01

ちなみに、今時のPCで2画面出力出来ないのはほぼあり得ないし、
TVが有ればHDMI端子がないのもほぼあり得ない。
そして、線をつなげば割と自動認識していきなり2画面になるという安直さ。

まあ、TVが有ればやってみ。

**デフォルトの名無しさん** · 2019/01/12(土) 20:59:34.69

詳しくありがとうございます

クラスではipadを見ながらやってるって人がいて
うらやましいと思ってましたが、2画面って方法があるんですね
勉強のためにバイトやめてしまったので今お金がないです(T_T)
お金でき次第買います

今すぐ、ゲーム作りですか？
見た目を用意するのはhtmlで出来そうですが
参考書でも買わないと作れないですね

作りたいゲームはあると言えばあるので
明日本屋で見て、できそうならやってみます

**デフォルトの名無しさん** · 2019/01/12(土) 22:20:16.81

>>836
> クラスではipadを見ながらやってるって人がいて
それと同等にはなる。
スマホだとさすがにきついと思うから、安物でいいからモニタを買った方がいい。
つか、専門学校なら最初から2画面にしとけよ、とは思うが。（君が悪いわけではないが）

> 見た目を用意するのはhtmlで出来そうですが
それでいい。
見た目だけ、例えばオセロならまず盤面をHTMLで用意するところから始める。
次に、クリックしたら石をおくようにする。つまりはクリックしたところにクラスを加えるだけだが。
そしたら、後は、「挟んだ石は自動的にひっくり返る」ようにすれば、手動での対戦は出来るようになる。
そして後はCPUで適切な手を考えられるようにすれば、CPUとの対戦が出来るようになる、というわけだ。

これ読んで大体「オセロなら出来そうだ」と思えるか？
なら、もう十分だから、アイデアもあるようだし、それに取りかかった方がいい。
やらないと上達しない。やる為には、自分がやりたいことをやるのが一番いい。
本を買う必要は無いとも思うが、まあ思うようにやればいい。

**デフォルトの名無しさん** · 2019/01/13(日) 10:01:03.08

ただゲームを作りたいというだけなのに練習にしろ本番にしろ
HTML/CSS/JSのセットを学ぶ必要性はない
Google Blockyやプチコンのようなもので学んだほうが良い

**デフォルトの名無しさん** · 2019/01/13(日) 10:14:09.92

HTML/CSS/JSのセットを学ぶことは無駄にはならんよ。
今後のGUIの主流になりつつあるから。
ただ、ゲームを作りたいだけならオーバースペックだ、というだけで。

**デフォルトの名無しさん** · 2019/01/13(日) 10:32:25.08

あとその手の「初心者でも子供でも簡単に出来る」って奴は大概すぐポシャるので俺は勧めないね。
scratchが一時期言われてたけど、今全く聞かないでしょ。
何故プロがそれらを使わないのかを理解出来ないうちは、所詮その程度って事だよ。

専門学校はプロ養成予備校みたいな位置づけだし、今ならHTML/CSS/JavaScriptで妥当だ。
当人は「学ばないと出来ない」という感覚なのか、出来ない理由を探しているから、
そうではなく、出来るところから始めろ、というだけ。

JavaScriptはコミュニティが腐っているが、言語としてはまあまあだよ。
そこで上達出来るかは本人次第だ。
とはいえ、初心者だと雑音を雑音と認識することも難しいから、難儀な話ではあるが。

**デフォルトの名無しさん** · 2019/01/14(月) 14:10:49.06

このスレはじめてきたけど、上の方でjQueryをやたら推してる人って頭おかしいの？

**デフォルトの名無しさん** · 2019/01/14(月) 14:47:13.30

jQuery推しがおかしいかおかしくないかはどうでも良くて
それに論理的に反論できないならば、言ってることは正しいってことさ

**デフォルトの名無しさん** · 2019/01/14(月) 14:50:15.30

えっ、jQueryおじさんが反論を理解できていないだけじゃないの？

**デフォルトの名無しさん** · 2019/01/14(月) 15:20:39.58

それは違うな。

**デフォルトの名無しさん** · 2019/01/14(月) 16:57:53.59

>>843
そうだよ

**デフォルトの名無しさん** · 2019/01/14(月) 17:36:34.87

jQueryのシェアがまた伸びてた。73.7%。5ヶ月連続で毎月0.1%増えてる。
0.1%増加なんて僅かだと思うかもしれないが、
Reactの現在のシェア（増加ではない）が0.2%、Vueが0.2%、Angularが0.4%
https://w3techs.com/technologies/history_overview/javascript_library/all

**デフォルトの名無しさん** · 2019/01/14(月) 18:16:36.57

>>843
×　反論を理解できていない
○　何も理解出来ていない

**デフォルトの名無しさん** · 2019/01/14(月) 21:49:08.71

shadow-root(attachShadow)って何ができるの？
ふつーに要素を作るんじゃなくて使うってことは何かできることがあると思って

**デフォルトの名無しさん** · 2019/01/15(火) 19:19:49.80

jQuery使わない人の声だけがでかいのはわかる
javascriptフレームワークなんて誰も使ってない

**デフォルトの名無しさん** · 2019/01/15(火) 19:25:43.57

声がでかいのはjQueryバカだが。

**デフォルトの名無しさん** · 2019/01/15(火) 20:18:42.32

jQuery厨は結局「jQueryは不滅です」と言い張るだけだから議論する意味はない。
実際はじきに結論がでるから待てばいい。

予想するなら、version3に上げている連中(6.4%)は今後とも使う気なのだと思う。
今だにversion1を使っている(=バージョンを上げてまで使う気はない）のが大半(85.7%)で、
つまり大半は様子見中で、だからこそこの話に食いつく奴が多い。
https://w3techs.com/technologies/details/js-jquery/all/all

このサイトのシェアはサイト数で算出しているから、
どうしてもvue等の「アプリ」用フレームワークは低く出る。
とはいえ、それを勘案しても実際に低いのも事実だが。
https://w3techs.com/technologies/topsite/javascript_library

**デフォルトの名無しさん** · 2019/01/15(火) 20:21:33.86

> 実際はじきに結論がでるから待てばいい。

いつでるんだよ・・・もう3年経ってるぞ

**デフォルトの名無しさん** · 2019/01/15(火) 20:33:42.53

>>852
>>369
俺は堂々巡りの話はもうやらない。

jQueryと心中するのも、脱jQueryするのも、自由。
それぞれが自分が正しいと思う方向に向かって進めばいいだけ。
シェアを過度に気にするのは、自分で判断出来ない証拠。

**デフォルトの名無しさん** · 2019/01/15(火) 20:40:39.71

シェアを気にしてるんじゃないんだよ。合理的な判断から。
ウェブの大半を占めるウェブサイトを作ってるのはウェブデザイナーが大半で
ウェブアプリを開発してるのはごく一部。そんなところにプログラミングが主である
React、Angular、Vueが普及するわけもなく、殆どは軽い使い方しかしてないんだから
jQueryで必要十分だってこと
シェアは単にそれを証明している指標に過ぎない

**デフォルトの名無しさん** · 2019/01/15(火) 21:23:45.38

これからはBackboneや！
これからはEmberや！
これからはKnockoutや！
これからはAngular1や！

フレームワーク使ってるほうが死亡してるんだけどな

**デフォルトの名無しさん** · 2019/01/15(火) 21:26:47.44

>>854
サイト数で言えば「ドキュメント」が多いだけで、
トラフィックの大半は「アプリ」ないしはニュースサイト等の「軽量アプリ+DB」だよ。
つかそれ前にも言ったけど、お前普段どんなサイトを見てるんだよまじで。

とりあえず単純に定義しておくと、以下な。
アプリ：　ajaxやPOST使いまくり
軽量アプリ：　POST機能はあるが主ではない
ドキュメント：　ajaxやPOSTは全くない

**デフォルトの名無しさん** · 2019/01/15(火) 21:31:34.93

>>856
そんな定義初めて見たわ

**デフォルトの名無しさん** · 2019/01/15(火) 21:31:43.02

トラフィックの大半は映像、JavaScript関係ないがな

世界のインターネットトラフィックの過半数を「映像視聴」が占めている
https://gigazine.net/news/20181003-global-internet-downstream/

**デフォルトの名無しさん** · 2019/01/15(火) 21:41:47.16

>>858
ああ、まあそりゃそうだ。
ただ、その手のサイトは普通「アプリ」だと思うぞ。

が、まあ、それなら、ダウンストリームを除いて、アップトラフィック、で測るべきだな。
回線速度サイト等で言う、「上り回線」内のトラフィック数だ。
（映像視聴中もping的なアップトラフィックがあるのは知っているが、それらは除いて）

**デフォルトの名無しさん** · 2019/01/15(火) 21:48:27.78

>>857
ならお前がもっと『ここでの議論に適した』いい定義を出せばいいだけの話
お前らゆとりはそういうところが駄目なんだよ

**デフォルトの名無しさん** · 2019/01/15(火) 21:49:57.09

>>859
連想ゲームやってるんじゃねーんだ

トラフィックが多いのは映像
映像はアプリ
アプリはJavaScriptを使ってる
だからトラフィックが多いのはJavaScript

違うからな。
ゲームで考えてみろ。多いのはデータであって
プログラムじゃねぇ

**デフォルトの名無しさん** · 2019/01/15(火) 21:56:31.56

>>861
バカなのかお前は。
話が見えてないなら読み直せドアホ。

**デフォルトの名無しさん** · 2019/01/15(火) 22:31:29.43

LayeredAPI使って帯域節約していきましょうってことでしょ

**デフォルトの名無しさん** · 2019/01/15(火) 22:56:55.97

>>854
>>861
>>862
勉強して出直してこい

**デフォルトの名無しさん** · 2019/01/15(火) 23:01:45.06

>>860
オレオレ定義で妄想おつ

**デフォルトの名無しさん** · 2019/01/16(水) 06:46:16.07

な？ >>864のように声だけデカイんだよ

**デフォルトの名無しさん** · 2019/01/19(土) 03:47:07.72

list.map(x => new Hoge(x))
これを
list.map(Hoge)
みたいに書きたいんですが出来ませんか？
staticでファクトリーメソッド実装するしかない？

**デフォルトの名無しさん** · 2019/01/19(土) 06:14:08.63

>>867
const Hoge = class {
constructor(a) {
this.a = a;
}
}

const hogeProxy = new Proxy(Hoge, {
get: (target, key) => key === target.name ? x => new target(x) : target[key],
has: (target, key) => (key in target || key === target.name) ? true : false,
})

with (hogeProxy) {
console.log([1, 2, 3].map(Hoge));
}

//=> [Hoge {a: 1}, Hoge {a: 2}, Hoge {a: 3}]

**デフォルトの名無しさん** · 2019/01/19(土) 08:42:38.70

>>867

class Hoge {
　constructor(x) {
　　this.x = x;
　}
}

function foo(Hoge) {
　list.map(Hoge);
}

foo(x => new Hoge(x))

**デフォルトの名無しさん** · 2019/01/19(土) 10:11:49.19

>>867
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf

**デフォルトの名無しさん** · 2019/01/19(土) 15:43:36.73

Ruby では、: で始まるシンボルで、メソッド名を渡すことで、インスタンスメソッドを呼べる

# 数値に変換してから、配列内のすべての数字を足す

puts numbers.map(&:to_i).inject(:+)

**デフォルトの名無しさん** · 2019/01/19(土) 15:58:41.16

655 デフォルトの名無しさん sage 2018/10/15(月) 05:44:32.10 ID:5+V16LLD
>>649
メソッドにしておくと select(&::positive?) と書けるという理由だった気がする

657 デフォルトの名無しさん 2018/10/15(月) 09:25:55.90 ID:/ogVl406
>>655
きったねえ文法だなぁｗ
美しい（笑）
疑似コードがそのまま動く（笑）
&::とかの意味不明な疑似コードがどこにあるってんだよｗｗｗ

658 デフォルトの名無しさん sage 2018/10/15(月) 10:09:06.69 ID:r7U1tD/N
擬似コードがそのまま動くのはPythonじゃね
関数型言語なら演算子がそのまま第一級関数であることとカリー化を使って data |> select ((>) 0) みたいに書けたりするね
ガチ関数型でなくてもまともなラムダがある言語なら select(x => x > 0) と遥かに見通し良く書ける
Rubyの &:: は極めて驚きが大きく醜悪な機能の一つだね

**デフォルトの名無しさん** · 2019/01/19(土) 16:23:10.62

>>871
> Ruby では、: で始まるシンボルで、メソッド名を渡すことで、インスタンスメソッドを呼べる

シンボルってただの文字列と変わらないからね
定義しなくて使えるから、タイポしてもエラーになるわけじゃないし

**デフォルトの名無しさん** · 2019/01/19(土) 16:34:18.49

>>867ですがいろいろとありがとうございます。
list.map(Number)ができるならlist.map(Hoge)もできるんじゃないかと思ったのですが、一筋縄では行かないようですね
おうちゃくせずに素直に仮引数つけます

**デフォルトの名無しさん** · 2019/01/19(土) 16:57:46.13

昔はコンストラクタがただの関数だったから、class構文にしなきゃできるな
es5にトランスパイルすればいける

**デフォルトの名無しさん** · 2019/01/19(土) 17:01:01.38

>>875
なるほどね。何のこっちゃと思ったがそういうことか。

**デフォルトの名無しさん** · 2019/01/19(土) 17:17:55.46

コンパイラエラー C2872 あいまいなシンボルです。

コンパイルエラーが解消出来ません。
ご教授下さい。

■コンパイルエラー内容
error C2872: 'MarketplaceWebServiceProducts' : あいまいなシンボルです

■やりたいこと
AmazonのAPI「Marketplace Web Service API (MWS)」のHello world

以下ページの右上オレンジ色の「Download」ボタンから入手できる
「MWSProducts_2011-10-01_v2017-03-22.dll」の使用
https://developer.amazonservices.jp/doc/products/products/v20111001/cSharp.html

■DLLの使用
Visual Studioの対象プロジェクトのプロパティから、
上記DLLの参照を追加しました

■コーディング
using namespace MarketplaceWebServiceProducts;//←ここはコンパイルOK
using namespace MarketplaceWebServiceProducts::Mock;//←★ここで上記コンパイルエラー

■ご質問
上位の「MarketplaceWebServiceProducts」が正常なのに、
下位の「Mock」を付けるとあいまいなシンボルになるのはなぜでしょうか。
解決策をご教授ください。（可能であれば実装をご提供ください）

■環境
Visual Studio
.Net 4.0
C++/Cli

**デフォルトの名無しさん** · 2019/01/19(土) 17:43:38.99

スレタイ音読

**デフォルトの名無しさん** · 2019/01/19(土) 18:28:01.65

>本当にありがとうございます！！！！！！！！！！！！
>キモヲタ万歳！！！！！！キモヲタ役に立つ！！！！！！！！

この質問者は、荒らしだから、無視しろ！

**デフォルトの名無しさん** · 2019/01/19(土) 19:13:31.85

>>875
いや、できないだろ
普通に読んだらthisがインスタンスとならないのだから

**デフォルトの名無しさん** · 2019/01/19(土) 19:25:13.47

だから場合分けするんだよ

**デフォルトの名無しさん** · 2019/01/19(土) 19:30:47.77

Hogeの方で工夫するのならスタティックメソッドを生やすのとえっと変わらんじゃん
もしくはHoge.aryFrom(list) みたいなの用意してもいいんだし

**デフォルトの名無しさん** · 2019/01/19(土) 19:33:39.03

はは、Rubyじゃあるまいし、カッコつけないと
関数呼び出しにならないのに、どうやって場合分けするっていうんだ
はは

**デフォルトの名無しさん** · 2019/01/19(土) 19:39:24.01

関数形式で呼ばれたか、コンストラクタとして呼ばれたかで分けるってことだよ
昔みんなやってたじゃん

>>882
そうだよ。変わらんよ。だからどうしたって話だし

**870** · 2019/01/19(土) 21:57:39.95

>>884
そう書いたんだが、全く伝わってなかった

**デフォルトの名無しさん** · 2019/01/20(日) 00:27:30.68

> list.map(x => new Hoge(x))
> これを
> list.map(Hoge)
> みたいに書きたいんですが出来ませんか？

Hogeのどこが関数なの？
関数っていうのはHoge()ってやらないといけないんだよ？
ほんとうに情けないんわ

**デフォルトの名無しさん** · 2019/01/20(日) 00:37:29.30

const double = n => n * 2;
[1, 2, 3].map(double);
//=> [2, 4, 6]

ワロタｗｗｗ
>>886によるとこのdoubleは関数じゃないらしいｗ
double(1)みたいな呼び出しじゃないからだってｗｗｗｗｗ

**デフォルトの名無しさん** · 2019/01/20(日) 00:42:24.82

class Hoge {　
constructor(x) {　　
this.x = x;　
}
}
console.log(typeof Hoge);
//=> function

> Hogeのどこが関数なの？

ｗｗｗｗｗ

**デフォルトの名無しさん** · 2019/01/20(日) 01:16:35.87

>>888

お前はこの意味がわかってないんだな

> 関数形式で呼ばれたか、コンストラクタとして呼ばれたかで分けるってことだよ

list.map(Hoge) のHogeは
関数形式で呼ばれたか、コンストラクタとして呼ばれたか
どっちか言ってみ

**デフォルトの名無しさん** · 2019/01/20(日) 01:58:00.54

そんな雑魚レス見てないし関係ない。

> 関数っていうのはHoge()ってやらないといけないんだよ？

これは恥ずかしい誤りｗｗｗ
反例
[1, 2, 3].forEach(console.log)

**デフォルトの名無しさん** · 2019/01/20(日) 05:48:06.80

spanやdivのクリックイベントを、buttonと同じ要素に出来ないでしょうか？

コンソールでイベントを確認すると、currentTargetが
divはHTMLParagraphElementで、buttonはHTMLButtonElementになっています。

CSSでdivタグをボタン風にしていることもあるので、
Javascript上でもボタン扱いしたいのですが、書き方次第で変更できるのでしょうか？

**デフォルトの名無しさん** · 2019/01/20(日) 07:49:29.85

>>890
なんだ？お前重箱の隅ばかりついて、
関数形式で呼ばれたか、コンストラクタとして呼ばれたかで分けても

元の質問者の希望である
list.map(Hoge) とはかけないってことに
まだ気づいてないのか？

**デフォルトの名無しさん** · 2019/01/20(日) 07:51:00.80

>>891
$('span, div, button').click(function() {
　console.log(this);
});

**デフォルトの名無しさん** · 2019/01/20(日) 09:12:39.85

>>891
同じHTMLElementだというのがOOPの考え方
ただしHTMLでは徹底出来てないから要注意だが

とはいえ、実際同じとして扱って書いても問題なく動くはず
やってみてから言え

**デフォルトの名無しさん** · 2019/01/20(日) 10:08:42.25

>>891
> CSSでdivタグをボタン風にしていることもあるので、
> Javascript上でもボタン扱いしたいのですが、書き方次第で変更できるのでしょうか？

そもそもdivタグをボタンにするのが間違い。
そこにクリックできるボタンがあるのなら、ボタンで作るのが正しい
見た目はCSSで変える。何がほしいか？ボタンがほしいならボタンを使う。それだけのこと

**デフォルトの名無しさん** · 2019/01/20(日) 10:15:54.36

>>891 アクセシビリティ上の問題があるから >>895 の意見に同意
素直に button 要素なり a 要素なりを使っとけー

**デフォルトの名無しさん** · 2019/01/20(日) 12:26:13.71

>>896
ボタンにa要素はお勧めしない

**デフォルトの名無しさん** · 2019/01/20(日) 15:35:58.63

>divはHTMLParagraphElementで、buttonはHTMLButtonElementになっています
多分どちらも、HTMLElement から派生したクラスじゃないの？

Vue.js では、ルーター用のリンクを、<a> タグ以外にも変えられる

<router-link to="/foo" tag="li">foo</router-link>

<li>foo</li>

tag="button" で、ボタンにもできる

**デフォルトの名無しさん** · 2019/01/20(日) 23:43:12.79

>>893-894
そういうことではなく、divをクリックしたら
Javascript的に「これはボタン要素です」って認識させたいんです。

>>895-896
確かにそうなんですが、UIとかボタンじゃないほうが良い場合が多々あるんです。
でもデザイン的にボタン風が良いので、spanやdivで代用します。（よく利用されています

<a href="javascript::void(0);" class="button">ボタン</a>で、a要素をボタンにもできますが、
aは使いにくいんですよね。やっぱりデザイン的に使いたいだけなんで、spanかdivなんです。

>>898
Vue.jsは知りませんが、イメージとしてはそういうことがしたいです。
HTML5とかJavascriptとかjQueryとかで可能なら一番なのですが・・・

**デフォルトの名無しさん** · 2019/01/20(日) 23:53:43.09

そもそもJSにdivをbuttonとして誤認識させた後に何をしたいのかがよくわからないけど、どうしてもHTMLButtonElementにしたいってのが目的ならそういうコンバーターなり何なりを作るしかないんじゃないの

**デフォルトの名無しさん** · 2019/01/21(月) 00:11:05.42

>>899
意味不明。初心者が馬鹿やろうとしてるとしか。

JavaScriptも24年の歴史があり、広く使われているのだから、
初心者が思いつくようなところで今更困ることはほぼ無い。
それはやり方を間違えているだけ。
多分CSSについて勉強した方がいい。

**デフォルトの名無しさん** · 2019/01/21(月) 00:55:24.42

この世にIEという存在がなければそんな変なことは考えないのですが、
IEの利用者がまだいてbuttonのクリックイベントと、divのクリックイベントでは
差異があるので、なんとかしようと考えた次第です。

とりあえず「簡単にはできないし、まず無理」という結論であればそれを受け入れます。

**デフォルトの名無しさん** · 2019/01/21(月) 01:12:29.24

>>902
馬鹿乙

IEなんて大昔からあるだろ。
それが本当に必要なら、誰かが既に開発して、それこそjQueryにでも搭載されてるよ。
無い＝要らない、ってことなんだよ。初心者ならやり方を間違ってるだけ。

**デフォルトの名無しさん** · 2019/01/21(月) 01:17:37.84

挙動を統一したいならCanvasでやれ
そういうフレームワークも増えてきてる

**デフォルトの名無しさん** · 2019/01/21(月) 05:38:32.19

またcanvasおじさんが湧いた

>>899
ボタン要素でスタイルシートでお好みのデザインに合わせればいいよ

**デフォルトの名無しさん** · 2019/01/21(月) 07:58:41.38

カード型みたいにボックスの中に画像、タイトル、アイコン、とかいろんな要素があって
そのカードがボタンの役割をしているならdivでもいいんじゃないの？

むしろbuttonタグの中にdivやらspanやら、iとかいろいろ要素ぶっ込むものなのかね？

**デフォルトの名無しさん** · 2019/01/21(月) 08:15:29.19

ieがdivのクリックイベントを拾わない…？

**デフォルトの名無しさん** · 2019/01/21(月) 08:30:56.83

>>899
UIだけなら、CSSでボタンライクではないようにも変更できるわけでdiv要素を使う理由はない

**デフォルトの名無しさん** · 2019/01/21(月) 09:28:46.72

>>907
Enterキー押下時のclickイベント拾わない話じゃねーかとエスパーしてみる
それは他のブラウザでも同じなので、keydownイベント拾ってEnterキーだけ抽出してclickイベント時と同じ挙動をさせるしかないよね
shift/alt/meta/ctrlキー同時押しはもちろん排除するとしてさ

**デフォルトの名無しさん** · 2019/01/21(月) 12:48:28.69

>>909
それだけなら、tabindex属性付与だけで実装可能ではないか？
ボタンの何をエミュレーションしたいのかがわからん、には同意

**デフォルトの名無しさん** · 2019/01/21(月) 14:19:25.15

javascriptでreplaceを用いた特定の文字の置換ができないです。

// サーバーからデータを受信したとき
function onReceive(data) {
let json = JSON.parse(data);
let messages = document.getElementById('chat');
let li = document.createElement('li');

if(json.text == 'おい'){
json.text = 'オイオイオイ'
}

// JSONから必要なデータを取り出して、テキストにする
li.innerHTML = json.count + ":" + "<big>ななしさん</big>" + "ID:" + socket.id + " " + json.text;
// 画面に要素を追加する
messages.appendChild(li);
}

これがソースコードの一部です。
このソースコードで、「おい」と打ったら「オイオイオイ」と返ってくるのですが、
「あいうおいえお」と打ったら「あいうおいえお」と返ってきます。
本当は「あいうオイオイオイえお」と返ってきてほしいです。

**デフォルトの名無しさん** · 2019/01/21(月) 14:23:43.50

replace使ってないから

**デフォルトの名無しさん** · 2019/01/21(月) 14:27:21.86

if(json.text == 'おい'){
json.text = 'オイオイオイ'
}

上記の部分を

json.text.replace('おい','オイオイオイ')

にしたら何も表示されなくなってしまいました。

**デフォルトの名無しさん** · 2019/01/21(月) 14:31:42.02

>>913
だされた課題は自分でやれ

どうせ本当に出された問題は
「以下のコードをreplaceを使って書き直しましょう」
なんだろ？

答えを聞くな

**デフォルトの名無しさん** · 2019/01/21(月) 14:39:13.61

>>914
違います。
課題は課題なんですけど、
課題内容は「リアルタイム通信を使用してアプリケーションを作ろう」です。
課題の一部がどうしてもわからないので聞いています。

**デフォルトの名無しさん** · 2019/01/21(月) 14:40:34.76

>>914
的外れな返信でした。
ごめんなさい。

**デフォルトの名無しさん** · 2019/01/21(月) 14:45:16.85

replaceってヒントを貰ってるんだから、replaceについて調べればいいだけ

**デフォルトの名無しさん** · 2019/01/21(月) 16:01:51.07

>>917
おい、おっさん。
こんな時間に即返信するとかなにやってんの？ニート？ｗ
お前は「答えない」じゃなくて「答えられない」だろｗ
無能のくせにでしゃばるなよｗｗ

**デフォルトの名無しさん** · 2019/01/21(月) 16:05:59.24

無能ってすぐ人に答えを求めるよな
https://medaka.5ch.net/test/read.cgi/prog/1540885252/

やっぱり俺って有能なんだなあ
すぐ人に答えを求めたりしないしな

**デフォルトの名無しさん** · 2019/01/21(月) 17:34:06.91

# 詳しい人、知恵を貸してくれ。

div1 = document.createElement("div")、document.body.appendChild(div1)
として、div1 の style の position を absolute や fixed として、
style.top, style.left に座標を指定しても、以下のような affiliate がある場合、
newBox の margin の 100px と全く同じだけ、div1 の位置が下に下がってしまう。
仕様上は、position:absolute は、親要素であるところの body 要素の左上の点からの
相対位置で指定されるはずなのに、なぜだろう？
自分の理解では、以下の affiliate は、div1 などのもっとも年上の兄弟として
追加されるだけだから、div1 の位置には影響を与えないと思うんだが。

　var func = function(){
　　var parent = document.getElementsByTagName("body")[0];

　　var newBox = document.createElement("div");
　　newBox.setAttribute('id', 'vdbanner');
　　newBox.setAttribute("style","display:block!important;position:relative!important;top:0!important;left:0!important;margin:100px 0 !important;padding:0!important;text-align:center!important;");
　　newBox.innerHTML = "広告内容";
　　parent.insertBefore(newBox, parent.firstChild);
　}
　try {
　　window.addEventListener("load", func, false);
　}
　catch(e) {
　　window.attachEvent("onload", func);
　}

**デフォルトの名無しさん** · 2019/01/21(月) 17:53:37.90

長ったらしいので翻訳。まずimportant;は使うな

#vdbanner {
　display: block !important;
　position: relative !important;
　top: 0 !important;
　left: 0 !important;
　margin: 100px 0 !important;
　padding: 0 !important;
　text-align: center !important;
}

$(function() {
　$("<div/>", {id: 'vdbanner', text: '広告内容'}).prependTo('body');
});

**デフォルトの名無しさん** · 2019/01/21(月) 17:59:05.34

できたぞ、質問に答えられないバカ

var result = json.text
for(var i=0;i<json.text.length;i++){
if(json.text[i] == 'お' && json.text[i+1]=='い'){
var tagetString = json.text;
var reString = /おい/gi; // 複数を置換する時は"g"を、
// 大文字/小文字の区別をしない場合には"i"を指定します。
var repStrung = "オイオイオイ";
result = tagetString.replace(reString, repStrung);
}
}
じゃあな無能

**デフォルトの名無しさん** · 2019/01/21(月) 18:04:30.32

一行で書けるけど、じゃあなって言われたな。じゃあなｗｗｗｗ

**デフォルトの名無しさん** · 2019/01/21(月) 18:29:08.32

>>899
ボタン部分だけのクリックじゃなくて、
もう少し範囲を広くして、ボタンを含む、div で、クリックイベントを動作させたいのかね？

ボタン部分だけだと、範囲が狭くて、うまく押せない人がいるから

それと投稿者は、次に投稿する際に、名前欄に最初の投稿のレス番号を入れてくれ

**デフォルトの名無しさん** · 2019/01/21(月) 18:34:04.07

>>918
>おい、おっさん。
>こんな時間に即返信するとかなにやってんの？ニート？ｗ
>お前は「答えない」じゃなくて「答えられない」だろｗ
>無能のくせにでしゃばるなよｗｗ

>>911
も、同じID。PNnv4t9U

こいつは、いつもの荒らしだから、皆答えないように！

**デフォルトの名無しさん** · 2019/01/21(月) 18:36:35.58

>>920
web の質問は、こちらの板ではなく、web制作管理板の方へ書き込んでください！

**デフォルトの名無しさん** · 2019/01/21(月) 18:37:59.67

>>922 は酷いコードだなあ

**デフォルトの名無しさん** · 2019/01/21(月) 18:53:53.44

http://www.nowsmartsoft.shop/

承認欲求。自己顕示欲。
ちなみに引きこもり。

**デフォルトの名無しさん** · 2019/01/21(月) 18:59:45.68

>>921
それ、無料レンタルサーバー Xrea の Affiliate だよ。

結局、body 要素に、position: fixed; top:0px; を付けたら直った。

**デフォルトの名無しさん** · 2019/01/21(月) 19:03:58.42

>>922
var result = json.text.replace('おい', 'オイオイオイ')