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

+ JavaScript の質問用スレッド vol.144 + at HP

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

2:Name_Not_Found
20/05/02 11:01:09.33 .net
■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
　▼諸注意
　 - 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
　 - Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
　 URLﾘﾝｸ(developer.apple.com)
　▼要素を検証
　1. ページ上で右クリックして [要素を検証]
　2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
　3. 右側のサイドバーから知りたいステータス名のタブを選択する
　　　- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
　　　- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
　　　- [Properties] タブ … 選択したDOMノードのプロパティを表示
　▼コンソール
　1. JavaScript コード上で console.log('Hello, World!'); と入力
　2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
　3. [Console] パネルに "Hello, World!" と表示される
　(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)

3:Name_Not_Found
20/05/02 11:08:30.47 .net
■各種仕様・解説サイト
◆ MDN (HTML・CSS・JS・各種Web APIのリファレンスサイト)
URLﾘﾝｸ(developer.mozilla.org)
◆ WHATWG（代表的なWeb APIの仕様書）
URLﾘﾝｸ(spec.whatwg.org)
◆ ECMAScript（JSの仕様書）
URLﾘﾝｸ(tc39.es)

■その他
■テンプレ案
URLﾘﾝｸ(fiddle.jshell.net)
■FAQ
URLﾘﾝｸ(fiddle.jshell.net)

4:Name_Not_Found
20/05/02 11:11:16.38 ocb4X3aL.net
以上、テンプレを一度ブラッシュアップしてみましたので
本当に必要な物があれば次スレから追加していってください
ただ、読まれることはほとんど無いと思いますし
せいぜい３レス程度にした方が良いと思います

5:Name_Not_Found
20/05/02 13:18:57.76 .net
>>1乙です
もう書き込んで良い？

6:Name_Not_Found
20/05/02 13:23:51.28 .net
どうぞ

7:Name_Not_Found
20/05/02 14:22:04 .net
ありがとう、質問させてください。

またElectronの質問なんですが、メインプロセスとレンダープロセスが有るじゃないですか
メインプロセスでDOMを作ってレンダープロセスで表示させたいのだけど
何故か引き渡したDOMが認識されなくて現状レンダープロセスでしかDOMを弄ることが出来ません
DOM自体もHTMLの特定部分に差し込むとか出来なくて全部置き換える場合しか表示できていません

render_preload.js -------------------------------------------------------------
const { ipcRenderer } = require('electron');
window.addEventListener('load', async ()=> {
const data = await ipcRenderer.invoke('invoke', 'invoke ping');
document.write(data);
});

main.js ------------------------------------------------------------------------
const { ipcMain } = require('electron');
const { DOMParser } = require('xmldom');
ipcMain.handle('invoke', async (event, message) => {
// 実際はクラスに書かれています
let dom = new DOMParser().parseFromString('<!DOCTYPE html>', 'text/html');
// 適当な操作
return dom;
});

こんな感じです。DOM操作のヒントを頂ければ有り難いです
それとXMLのDOMって作る必要とかありますか？

8:Name_Not_Found
20/05/02 14:31:30 .net
letとかコンストとか無かった時代って不便だった？

9:Name_Not_Found
20/05/02 14:45:06 .net
常識で考えたらスレッドが違うんだから、渡せるのはプリミティブ型と
素朴な要素でなる素朴なオブジェクトと、一部なトランスファラブルなオブジェクトだけじゃないの
DOMオブジェクトを引き渡そうとか考え方に無理があると思うよ

10:Name_Not_Found
20/05/02 14:52:40.95 .net
>>7
DOMはレンダ―プロセスでやれ
document.write使うなし

11:Name_Not_Found
20/05/02 15:25:12 .net
>>8
別に

12:Name_Not_Found
20/05/02 15:49:19 .net
>>8
for-letとswitchの節にブロック書いてスコープ区切れるのは便利になった

13:Name_Not_Found
20/05/02 17:10:54.31 .net
■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (DOM Standard (DOM4) 和訳)
URLﾘﾝｸ(www.w3.org) (DOM3 Events)
URLﾘﾝｸ(www.w3.org) (UI Events)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (CSSOM 和訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
URLﾘﾝｸ(domparsing.spec.whatwg.org) (DOM Parsing and Serialization - innerHTML等)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (XMLHttpRequest 和訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (File API 和訳)
URLﾘﾝｸ(www.whatwg.org) (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
URLﾘﾝｸ(developer.mozilla.org)
◆ MSDN Library
URLﾘﾝｸ(msdn.microsoft.com) (Internet Explorer API)
URLﾘﾝｸ(msdn.microsoft.com) (JavaScript)
URLﾘﾝｸ(msdn.microsoft.com) (JScript)
URLﾘﾝｸ(msdn.microsoft.com) (DHTML)
◆ JavaScript Garden (ja)
URLﾘﾝｸ(bonsaiden.github.com)
◆ JSON (JavaScript Object Notation)
URLﾘﾝｸ(www.json.org)
■テンプレ案
URLﾘﾝｸ(fiddle.jshell.net)
■FAQ
URLﾘﾝｸ(fiddle.jshell.net)

14:Name_Not_Found
20/05/02 17:11:10.05 .net
■参考URL
ダウンロード、CDN
URLﾘﾝｸ(jquery.com)
ブラウザサポート
URLﾘﾝｸ(jquery.com)
jQuery UI
URLﾘﾝｸ(jqueryui.com)
jQuery UI ダウンロ－ド
URLﾘﾝｸ(jqueryui.com)
リファレンス等
URLﾘﾝｸ(alphasis.info)
URLﾘﾝｸ(www.jquerystudy.info)
URLﾘﾝｸ(js.studio-kingdom.com)
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
URLﾘﾝｸ(qiita.com)

15:Name_Not_Found
20/05/02 17:11:25.65 .net
■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に URLﾘﾝｸ(jsperf.com) （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様
◆ Standard ECMA-262
URLﾘﾝｸ(bclary.com) (ECMAScript 3 HTML版)
URLﾘﾝｸ(www2u.biglobe.ne.jp) (ECMAScript 3 和訳)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 5.1 HTML版)
URLﾘﾝｸ(tsofthome.appspot.com) (ECMAScript 5.1 和訳)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 6 / ECMAScript 2015)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 5 compatibility table)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org)
URLﾘﾝｸ(momdo.s35.xrea.com) (HTML5.1 部分訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (Web Storage 和訳)

16:Name_Not_Found
20/05/02 17:11:41.58 .net
■JavaScript主要ライブラリ・フレームワーク
jQuery
URLﾘﾝｸ(jquery.com)
jQuery UI
URLﾘﾝｸ(jqueryui.com)
jQuery Mobile
URLﾘﾝｸ(jquerymobile.com)
Lo-Dash
URLﾘﾝｸ(lodash.com)
Backbone.js
URLﾘﾝｸ(backbonejs.org)
Underscore.js
URLﾘﾝｸ(underscorejs.org)
AngularJS
URLﾘﾝｸ(angularjs.org)
Knockoutjs
URLﾘﾝｸ(knockoutjs.com)
RequireJS
URLﾘﾝｸ(requirejs.org)
D3.js
URLﾘﾝｸ(d3js.org)
threejs
URLﾘﾝｸ(threejs.org)

17:Name_Not_Found
20/05/02 17:11:57.43 .net
Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。
補足
jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。
1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。
しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。
そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。

18:Name_Not_Found
20/05/02 17:12:58.95 .net
各JavaScriptライブラリ使用率
URLﾘﾝｸ(w3techs.com)
URLﾘﾝｸ(w3techs.com)

19:Name_Not_Found
20/05/02 17:20:01.03 .net
適当なリンク集を載せるのはやめようぜ
いくつものリンクが切れてたりするし、勧める本人も確認してないリンクなんていらんだろ
現UIイベントのいろんなバージョンを載せてるのも意味がわからないし
MDNにリダイレクトされるMSDNを載せるのも意味がわからない
それにJavaScript Gardenとかここに来るやつに勧めて大丈夫か？
今となってはJSを歴史的にもES3の段階から学びたいと思うような奴でないと
レガシーすぎてむしろ害になるだろう

20:Name_Not_Found
20/05/02 17:24:11.59 .net
続き
 >>15
・出典もないし現実に即してない蛇足は要らん
・リンクが切れてる＆古すぎる
 >>16
ただ羅列して何の意味がある？
簡単な説明くらいつけろ
 >>17
いい加減不要

21:Name_Not_Found
20/05/02 20:22:23 .net
以前Vueについて質問した者ですが、また初歩的な質問ですみません
たとえば「Welcome」というテキストをポンと表示させるのを
ネイティブだとcreateElement(‘p’)、document.appendChildといった流れで簡単にできるのですが
これをVueでやるのってもしかして難しいことですか？

22:Name_Not_Found
20/05/02 20:28:26 .net
はい。
jQueryだと $('<p/>', {text: "Welcome"}).appendTo('#id') という
一行で出来ることもVue では難しいです。

23:Name_Not_Found
20/05/02 20:57:34 .net
いやいや、テキストをポンと表示させると言っても
現実的に考えればどっかのテキストを置き換えるだけではなくて
アニメーションだとか最低でもCSSとの絡みを考えないと行けないし
状態の変化と関連してる場合も多いだろうから実際には１行と言うわけにはいかないし
そういう全体の構造を大きな目で見て整えるのがフレームワークの役目でしょ

24:Name_Not_Found
20/05/02 21:45:24 .net
言い訳はいいから、さっさと実装書けよ

25:Name_Not_Found
20/05/02 21:55:48 .net
テンプレートじゃあかんのか？

26:Name_Not_Found
20/05/02 22:06:45 .net
まず質問する前にちょっとはググって基本的な使い方くらい調べてみたらいいんじゃないか？
URLﾘﾝｸ(qiita.com)

27:Name_Not_Found
20/05/02 22:08:24 .net
つうかテンプレートはVueの基本中の基本なのに
以前質問してから今まで何を学んできたんだい？

28:Name_Not_Found
20/05/02 22:10:52 .net
エア質問者だから何も学んでないよ

29:Name_Not_Found
20/05/02 22:11:53 .net
レス進んでますが私は>>21以降書き込んでないので勘違いはやめてほしいです
みなさんが当たり前と思ってることが自分の中では当たり前じゃないので
皆さんの何気ないレスポンスも非常に刺激になってます。ありがとう

30:Name_Not_Found
20/05/02 22:16:18 .net
>>21です。皆さん私の時間を何だと思ってるの？w
皆さんほど私は暇じゃないんで…テンプレート？とか調べる時間ないでしょw
分かったらさっさとVuuでテキスト表示させるコード貼ってろ無能ども

31:Name_Not_Found
20/05/02 22:22:16.80 .net
そういうのはVueよりもReactの方が得意としている
Vueは簡素化し過ぎてて基本的なことをやるのに手間がかかるよ

32:Name_Not_Found
20/05/02 22:26:44.07 .net
Vueはよう知らんけどappendchild(text.$el)みたいな構文は少し検索すりゃ出てくるぞ

33:Name_Not_Found
20/05/02 22:30:07.59 .net
>>32
もしそんな事が書かれてる記事があったら執筆者はエアプとしか言いようがない
どのサイトよ？

34:Name_Not_Found
20/05/02 22:36:30 .net
>>33
URLﾘﾝｸ(qiita.com)
＞インスタンス生成時のelオプションを省略するとデフォルトでは空のdiv要素がel要素として生成されます。

35:Name_Not_Found
20/05/02 22:38:33 .net
あとjQuery使う方法もでてくる
URLﾘﾝｸ(qiita.com)

36:Name_Not_Found
20/05/02 22:40:43 .net
>>30
お前ただのVueアンチだろ

37:Name_Not_Found
20/05/02 22:42:14 .net
>>34-35
マジで頭痛くなるようなポンコツ記事だな
運良く動いてるだけ

38:Name_Not_Found
20/05/02 22:43:02 .net
伸びてると思ったらVueか
だからReactにしとけと

39:Name_Not_Found
20/05/02 22:45:24 .net
>>31
？？？

40:Name_Not_Found
20/05/02 22:49:03 .net
>>39
？

41:Name_Not_Found
20/05/02 22:51:50 .net
>>37
言うほどかね
jQueryと組み合わせるのは理に適ってると思うが

42:Name_Not_Found
20/05/02 23:07:00 .net
jQueryだとこれだけ $('<p/>', {text: "Welcome"}).appendTo('#id')
それと同等のコードを出すだけで、このように荒れるわけですｗ

43:Name_Not_Found
20/05/02 23:16:33.43 .net
>>21→>>22のレスポンスの速さからして最初からVueをバカにするための目的のマッチポンプでしかないわ。
こんなことでしかReactを持ち上げることができないのか

44:Name_Not_Found
20/05/02 23:34:24.34 .net
>>43
>>21ですが、本当に自分は関係ないです。そうとしか言えません、すみません

45:Name_Not_Found
20/05/02 23:38:45.40 .net
>>43
いやさ、Vueがバカにされてる！悔しい！って書き込みじゃなくて
なんでVueの良さを伝える書き込みをしないの？

46:Name_Not_Found
20/05/02 23:39:09.03 .net
JQNが素のDOM APIと戦うのは分が悪いと判断して矛先を変えてきたか
こりゃ面白くなりそうだ

47:Name_Not_Found
20/05/02 23:40:38.04 .net
>>45
ここは自ら学ぶためのスレ
コード制作依頼板でも無ければ
推しメン紹介板でも無い
勘違いするな

48:Name_Not_Found
20/05/02 23:43:47.61 .net
>>44
謝らなくていいから君は基本くらい勉強してきなよ
赤ちゃんじゃないんだからさ
君が隙だらけのレスをするから悪意のある第三者だか裏の人格だかに良いようにされるんでしょ

49:Name_Not_Found
20/05/02 23:53:51.69 .net
>>48
ありがとうございます！
Vueでやるにはテンプレートが必要なのは分かりました
<body></body>の何もない所にポンと表示させるのは難しいということでしょうか
なるべくHTMLを触りたくないもので、すみません

50:Name_Not_Found
20/05/02 23:56:56.21 .net
なるべくHTMLを触りたくないのならフルCanvasでやればいいよ
何もない所、どこでも好きな位置にポンと表示させられるから

51:Name_Not_Found
20/05/02 23:57:43.82 .net
いくらidが無いスレとは言え勘違いしたなら一言詫びを入れるのが常識。

52:Name_Not_Found
20/05/03 00:01:00.71 .net
分かったから、主人格に変わろうな

53:Name_Not_Found
20/05/03 00:01:19.50 .net
なんか噛み合ってないスレだな

54:Name_Not_Found
20/05/03 00:03:26.04 .net
大前提としていくらGWとは言えこんな時間にここでお間抜けな質問と解答をしてる奴らは皆まともじゃない

55:Name_Not_Found
20/05/03 00:09:20.55 .net
ついに糖質まで現れる始末

56:Name_Not_Found
20/05/03 00:11:15.23 .net
一人芝居を披露してくれるのはスレが活気づくからいいんだけど
質問はショボいし煽りもセンスないからクオリティをもうちょっと上げて欲しい
賢いんでしょ？頑張りなよ

57:Name_Not_Found
20/05/03 00:28:15.57 .net
何をイライラしてるの

58:Name_Not_Found
20/05/03 00:30:34.38 .net
いやあこの手の人は割とネタ抜きに自分以外が同一人物だと思ってるらしいからなぁ

59:Name_Not_Found
20/05/03 00:35:10.08 .net
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問への「答え」から解離した議論はよそでやること。

60:Name_Not_Found
20/05/03 00:52:53.70 .net
端から見てるとjs開発者民度低いなあ
気に入らない質問はスルーするより煽るか説教するのに夢中になる傾向
まあ質問者も然りだが

61:Name_Not_Found
20/05/03 01:04:10.36 .net
たにぐちまことのYouTube 動画に、
jQuery, Vue.js, React もある
$el, $refs は一時的に、実DOM を更新するだけ。
仮想DOM に影響を与えないから、仮想DOM を更新すると取り消される

62:Name_Not_Found
20/05/03 01:19:04.17 .net
Object.observe()の頓挫がフレームワークを沼にしたんだよなぁ
はっきり言ってjavascriptの範疇で語るのが間違い

63:Name_Not_Found
20/05/03 01:24:54.11 .net
>>7
document.write は一旦、現存するすべてのDOM を削除してから、追加するものでは？

64:Name_Not_Found
20/05/03 02:11:48.85 .net
vue.js って後からコンポーネントのロードとかできんの？
一通り日本語ドキュメント読んでみたんだけど出来なさそうなんだよなぁ。
例えばテンプレートのHTMLとかコンポーネントのソースは全部独立した別ファイルにしておいて、
あるボタンをクリックしたら必要なテンプレートとコンポーネントのファイルを読み込んで、
ノードもその時その時でDOMに追加してコンポーネントをインスタンス化するみたいな動き。
どうも new Vue({...}) ってやる前に必要なコンポーネントは使う使わないに関係なく全部読み込んでおかなきゃいけなくて、
コンポーネントの配置元になるバーチャルノードも最初から記述しておかないと機能しないっぽいんだけど、
俺の理解不足？
描画を100%JavaScriptに任せたくて、body タグは空の状態から始めたいんだけどいきなり躓いてる。。。
こういうのって vue.js じゃなくて Angular.js でやるべきなのかな？

65:Name_Not_Found
20/05/03 02:37:57 .net
>>64
>>59

66:Name_Not_Found
20/05/03 02:52:18 .net
JavaScriptのフレームワークって時点で休み時間に机にうっ伏して妄想してる根暗みたいなもんだから
それを話題にするせいで皆んなの心が荒むのも仕方ないし、海外のフォーラムでも同じ現象が起きてる

67:Name_Not_Found
20/05/03 02:58:29 .net
例えが悪かったな
底辺なろう作家がワンピースのストーリーを「俺が考えた方が100倍面白い」って語るのと同じ

68:Name_Not_Found
20/05/03 04:21:29 .net
フレームワークがどうとかではなく、感覚的なイメージをgdgdと日本語で説明するだけの質問だから、明確な解が出てこないんだろ
この程度の質問なら、「そんなことはない」とか、抽象的な回答がお似合いだ

69:Name_Not_Found
20/05/03 08:58:27.08 .net
描画関数なら、あるかも。
仮想DOM の知識がいる
is で、コンポーネントの切り替えとか、
v-if="show" で、破棄・生成とか、
keep-alive とか

70:Name_Not_Found
20/05/03 10:35:41.09 .net
>>68
なんか違う気がする

71:Name_Not_Found
20/05/03 11:15:49.88 .net
>>70
そういう感覚的なレスだよ

72:Name_Not_Found
20/05/03 11:17:12.02 .net
>>71
鏡見ろって話

73:Name_Not_Found
20/05/03 11:21:06.96 .net
>>72
俺質問してない

74:Name_Not_Found
20/05/03 11:26:03.29 /XpbGk78.net
「Vueでできるのか/できないのか」の質問なんだから「できない」で終わってんだろ

75:Name_Not_Found
20/05/03 11:43:10 .net
自分が傷つくのが嫌なら悪態つかずに大人しくしとけってことだな

76:Name_Not_Found
20/05/03 11:51:53 .net
脱フレームワーク

77:Name_Not_Found
20/05/03 11:53:14 .net
抽象的に質問には抽象的な回答がつく
それだけ

78:Name_Not_Found
20/05/03 11:55:50 .net
それで終了だな
>>68もこれ以上暴れんなよ

79:Name_Not_Found
20/05/03 12:00:04 .net
>>78
まじで殺すぞ

80:Name_Not_Found
20/05/03 12:45:51 .net
>>62
今はproxyとasync関数があるから大丈夫でしょ
もともとO.oでもDOMの変化だったり内部スロットの変化は追えないのだから

81:Name_Not_Found
20/05/03 12:47:44 .net
>>64
ここはJSを自ら学ぶためのスレであって、
フレームワークの使い方を指導するスレではないから
そういった事は他所でやってくれ

82:Name_Not_Found
20/05/03 13:18:19 .net
Progateとドットインストールでjavascript関連を2ヶ月ほどやりました。
ドットインストールでは有料プランに入って以下のセクションを一通りこなしました。
Javascriptではじめるお手軽プログラミング
webサイトを作れるようになろう
Canvasを使ってみよう
よく見るUIを作ってみよう
そろそろドットインストールは卒業かなと思ってるんですが、
次はどういったことをやっていけば良いでしょうか？

83:Name_Not_Found
20/05/03 15:30:29.69 .net
PHP - アウトプットのやり方を教えてください。｜teratail
URLﾘﾝｸ(teratail.com)

84:Name_Not_Found
20/05/03 15:51:43.37 .net
>>82
覚えたものを生かして作るだけなのに、何を迷っているんだか
やりもしないで「次は何をやればいいですか？」って完成するまで手取り足取り教えてくれる学校の先生を規定しているなら、多分、君には向いてない

85:Name_Not_Found
20/05/03 20:02:20.76 .net
結局は >>77
これだけいわれても曖昧な質問を繰り返してる質問者には「お前が思うとおりにやれ」ぐらいしかいえない

86:Name_Not_Found
20/05/03 21:42:54.99 .net
>>82
１．MDNを隅々まで読む（必ず全ての項目に目は通すこと）
２．その最中重要そうな物は自分の手で試す
３．更に興味が湧いたものを他の人はどう使っているかをググって調べる
これを１０年間やる
その後ESやWHATWGの仕様書を読み込む
これで上級者

87:Name_Not_Found
20/05/04 01:43:23.37 .net
時間の掛かることを、やらない方がよい。
JavaScript を学んだら、フレームワーク・Ruby on Rails で、実際のweb アプリを作る
その過程で、AWS, Cloud9, Heroku, GitHub, CircleCI, Docker, Kubernetes,
Linux・シェルスクリプト・データベースなどの環境構築運用を学ぶ
HTML, CSS/SASS, JavaScript, jQuery, Bootstrap,
Node.js, Webpack, Babel, Vue.js, React, VSCode

88:Name_Not_Found
20/05/04 02:25:09 .net
実際のweb アプリを作ることが最も時間がかかるというオチですか

89:87
20/05/04 05:20:31 .net
NM Max

Ruby on Rails の Tutorialやってみるよ宣言！
URLﾘﾝｸ(www.youtube.com)

この人は、ほぼ、Ruby を知らないのに、
Rails チュートリアルを読んで、そのすごさに感動して、Rails 5 の動画を作ったw

最近は、Rails 6 の動画も上げてる

Rubyの言語など、あまり知らない人でも、
Rails の動画を上げてしまえるのが、Rubyの面白い所w

90:Name_Not_Found
20/05/04 05:22:56 .net
金になりそうだから動画作っただけやで

91:Name_Not_Found
20/05/04 05:23:54 .net
7 回視聴　2019/05/15

ワロタ

うん金にはならんかったのねｗ

92:Name_Not_Found
20/05/04 05:24:29 .net
チャンネル登録者数 70人って雑魚すぎやろｗ

93:Name_Not_Found
20/05/04 06:55:22 .net
jQueryのthisの使い方って、javascriptと同じなの？

94:87
20/05/04 07:09:33 .net
たにぐちまこと・雑食系エンジニアのKENTA、
Ruby のJunichi Ito (伊藤淳一)

このあたりは、YouTube でも超一流

95:Name_Not_Found
20/05/04 08:44:09.18 .net
>>93
同じとも言えるし違うとも言える
const $a = $('a');
$a.on('click', function() { ・・・ })
JavaScriptの常識からすると、イベントハンドラの中のthisは$aだと思うかもしれない
しかしjQueryではそうなっていない。thisは$aではなく一つのA要素になっている。
ただし違うからと言ってJavaScriptと違うとは言えない
JavaScriptは元々出来る仕様なので、何をしようとJavaScriptであると言える
とは言え一見JavaScriptと違うんだと思うなら
DOM APIのaddEventListenerの仕様を見てみればその理由がわかる
a.addEventListener('click', function() { ・・・ })
このときのイベントハンドラのthisはA要素になっている。
つまり、DOM APIのイベントハンドラと互換性を持たせるためにjQueryはそうしている
だからイベントハンドラから見れば同じということができる
つまりJavaScriptのデフォルトの挙動ではないが
デフォルトの挙動を変えることで、DOM APIのイベントハンドラと"同じ"にしている

96:Name_Not_Found
20/05/04 09:10:43.89 .net
JavaScriptはJavaScript、DOMはDOMでしょ
JavaScriptの中でのthisの一般的な使われ方はレシーバを指すこと
a.addEventListener('click', callback)のときはcallbackにとってはaはレシーバではないが、
形上それに近いので本来のJS的にはasync関数を考えればわかりやすいが
thisが与えられないのが自然だが変な気を利かせて与える仕様にされてるんでしょ
JavaScriptはJavaScript、DOMはDOM
それぞれで世界は違うし自然な振る舞いや常識間も少しずつ違う
混同しないようにしないとね

97:Name_Not_Found
20/05/04 09:23:06.40 .net
ラムダ式（アロー）のthis も、便利なように、構文スコープに変えてあるから、
that = this
みたいに、代入しておかなくても良い

98:Name_Not_Found
20/05/04 09:31:41.29 1/4tf87T.net
スマホのブラウザからtwitterのアプリを起動してtweetさせたいとき
window.open("URLﾘﾝｸ(twitter.com));
と書いた場合に、ブラウザのtwitterのタブが開いてしまうのですが
どのように対処したらいいのでしょうか？
(deleted an unsolicited ad)

99:Name_Not_Found
20/05/04 10:25:45.71 .net
確かに、Edge では、アプリが勝手に開く、URL がある
知らない間に、アプリがインストールされている

100:Name_Not_Found
20/05/04 11:38:21.85 .net
シンプルにthisは「これ」ってことだろ。

101:Name_Not_Found
20/05/04 12:55:01.31 .net
浅はかすぎる

102:Name_Not_Found
20/05/04 13:08:50.04 .net
>>95
>JavaScriptの常識からすると、イベントハンドラの中のthisは$aだと思うかもしれない
いや、ハンドラのレシーバが$aなわけじゃないんだからそう思う人は少ないだろ。
jQueryが通常のイベントハンドラと同じ動作をするという結論はいいとして。

103:Name_Not_Found
20/05/04 14:41:55.97 .net
相変わらず、自己学習意欲のないいい加減な質問者ばかりだな
自ら学ぶスレの名が泣いてる

104:Name_Not_Found
20/05/04 17:35:33 .net
回答者も学べばいいのに

105:Name_Not_Found
20/05/04 17:49:02 .net
質問が抽象的でわからん！とか言う人一定数いるみたいだけど
アスペ的な人なのか、経験が浅くてエスパーできない人かじゃないの
大抵の質問は「あー、あのこと言ってるのね」ってわかると思うけど
回答して仮にそれで質問者に「そうじゃないんです」と言われたところで
客観的にみて知的活動に変わりなくスレにとってはプラスにしかならないでしょ。
それ以降質問者を責め立てるのは、間違ったことを恥ずかしいと思っていて
スレにとって何の得にもならない名誉挽回をしたいからだよな

106:Name_Not_Found
20/05/04 19:00:32 .net
>>105
ここは右も左も分からない初学者のオムツを替えてあげるスレでは無いから
自立した自ら学ぶ事ができる人がどうしても行き詰まったときに
具体的に質問してヒントを貰いに来る場所だから
そこんとこ勘違いしないように

107:Name_Not_Found
20/05/04 22:45:08 .net
>>105
質問者は努力放棄、回答者だけが努力するスレだと思ってるの？

108:Name_Not_Found
20/05/04 23:02:25 .net
別にエスパーしてあげる回答者がいてもいいし
こき下ろす回答者がいてもいいだろ

JSとはすなわち言語なのだから
赤ちゃんのときにどうやって日本語を覚えたのかを思い出せ

社畜もいれば言語学者様もいる
雑音も含めた様々な情報のシャワーを浴びることで
徐々に物事の特徴量を抽出して分かるようになっていくものだろ

むしろそのためにわざわざこんな混沌とした場所に質問しに来てるのだろ
スレがプラスである必要はないし住民にその努力義務は一切無い
質問者が自分にとってプラスのように情報を汲み取ればいい

109:Name_Not_Found
20/05/04 23:08:17 .net
>>108
母親から何もしつけられなかったの？
質問者が利益を得るためには、何をやってもいい？

110:Name_Not_Found
20/05/04 23:11:41.63 .net
ライオンが崖から落とすような、荒波に揉まれる日本語学習過程を経ている人はそうそういない

111:Name_Not_Found
20/05/04 23:32:01 .net
>>109
俺が言いたいのはどんな質問・どんな回答をしても構わない
自由にさせとけということではない

全うで良さそうに見える回答だって間違いを多分に含んでるかもしれないし
狂人の極論的な回答でもそれと対抗する回答と合わせて読めばバランスが取れて
幅広い視野での深い考えを得られるかもしれない

結局回答者の発言の何を汲み取って自分の物にするかは質問者の責任であるし
一方回答者には質問者や場の流れに必ずしも従わず
自分で何を汲み取ってほしいかを決めて発言する程度の権利はある

質問の仕方や姿勢が悪いと注意することだって
質問者は回答者が解決してくれることを期待してこのスレに来るな
回答者と対等とまではいかなくても十分意見をぶつけ合って自分で考えて解決できるくらいまで
勉強して質問を練ってから来いという激励の回答だろう

実際本当のところそうであろうとなかろうとそう捉えて自ら成長できないような質問者は
教えてあげる価値も無いと言われても思われても仕方がない

JSは自分で考えて自分で正解を見つけていかないといけない言語であるし
単純労働者、悪ければ宿題を抱えた学生よりもWeb技術に深い洞察を持って
将来Webを発展させるかもしれない人物に時間とリソースを割いて親身に教えてあげたいと思うのも自然だろう

112:Name_Not_Found
20/05/04 23:46:00 .net
>>108
> 赤ちゃんのときにどうやって日本語を覚えたのかを思い出せ

思い出せない。俺が記憶にある最も古いものは幼稚園の頃の記憶だ

113:Name_Not_Found
20/05/05 01:01:13.17 .net
>>105,108,111
意見が分岐しすぎて主張に一貫性がない

114:Name_Not_Found
20/05/05 01:07:46.10 .net
>>111
簡潔に

115:Name_Not_Found
20/05/05 02:01:01 .net
検索で10件ほど調べたのですがアロー関数のthisが何を指すのか分かりませんでした
通常のJavaScriptのthisは親オブジェクトやbind/callで指定したオブジェクトやnewで生成したオブジェクトを指しますが
アロー関数のthisは必ずwindowオブジェクトを指すわけではないですよね？

116:Name_Not_Found
20/05/05 02:07:27 .net
>>115
10件見て分からないなら、それ以前の基礎知識が足りてない
切り分けを覚えろ

117:Name_Not_Found
20/05/05 02:20:09 .net
JavaScript のthis は、ネストすると、window を指してしまうので皆困っていた。
bind を使うとか、 that に代入する必要がある

それが、jQuery などでは便利

アローは、レキシカル・構文スコープ

118:Name_Not_Found
20/05/05 02:23:52 .net
>>115
アローじゃない関数のthisはわかってんだよね？

アロー関数はthisに関与しなくなったんだよ
束縛しない

だから、アロー関数の中でのthisは
そのアロー関数が書かれたスコープのthisがそのまま参照される

119:Name_Not_Found
20/05/05 02:49:49.23 .net
つまりアロー関数のthisは普通に変数thisを探すだけということでしょうか？

120:117
20/05/05 03:22:08 .net
JavaScript のthis は、ネストすると、window を指してしまうので皆困っていたから、

検索すれば、説明は一杯あると思う

121:Name_Not_Found
20/05/05 07:48:03 .net
俺的解釈
this == とりま

122:Name_Not_Found
20/05/05 08:04:24 .net
>>117
ネストしたらwindowになるんじゃなくて
DOM APIの仕様による

123:Name_Not_Found
20/05/05 09:45:08.13 .net
>>113
それらが同一人物に見えるのならお前病気だぞ

124:Name_Not_Found
20/05/05 10:16:24.64 .net
>>119
アロー関数による実行コンテキスト上の環境レコードはthisを持たないし
thisキーワードによるレコードサーチにも引っかからない様になっている
一方アローでないレキシカルな関数コンテキストでは必ず引っかかる
他はグローバルな環境レコードでは必ず引っかかるが、その他の環境レコードでは引っかからない
よってレキシカルな関数の環境レコードをL、アロー関数の環境レコードをAとしたとき、
L内スコープでthisが参照されると引っかかるのはその時の実行コンテキストから辿れる一番近い関数の環境関数レコード、つまりLから必ず探されるが
A内スコープでthisが参照されるとその時の実行コンテキストから辿れる一番近い関数の環境関数レコード、つまりAも引っかからないので
更にその外側から探され、直上のレキシカルな関数の関数レコードかグローバルな関数レコードから探されることになる

125:Name_Not_Found
20/05/05 12:09:33 .net
大間違い
レキシカルを全て非レキシカルに読み替えてくれ

126:Name_Not_Found
20/05/05 16:31:13.27 .net
非レキシカルの中に含まれるレキシカルも
非レキシカルに読み替えてくれ

127:Name_Not_Found
20/05/05 17:06:36.94 .net
非レキシカルの中に含まれるレキシカルに含まれるレキシカルも
非レキシカルに読み替えてくれ

128:Name_Not_Found
20/05/05 17:57:26.32 .net
慣れない言葉使って長文書くなって教訓だな

129:Name_Not_Found
20/05/05 18:20:56.20 .net
長文ドヤ顔マン嫌い

130:Name_Not_Found
20/05/05 20:39:27.83 .net
このスレくっさ

131:Name_Not_Found
20/05/06 07:57:34.94 o0peJ+ai.net
JavaScript新しく勉強したいんですが入門本オススメありますか？web系の勉強は初めてでプログラミングはPythonとjavaなら初級レベルです

132:Name_Not_Found
20/05/06 10:51:32.83 .net
何のために勉強して何ができるようになりたいの？

133:Name_Not_Found
20/05/06 10:54:21.08 .net
わからないままおわる　そんなのはいやだ！

134:Name_Not_Found
20/05/06 11:00:41.40 o0peJ+ai.net
サークルの在庫管理システムを作りたいんです、とりあえずそれが目標であとは勉強しておいたら損は無いかと

135:Name_Not_Found
20/05/06 11:20:21.96 jD6hkh5K.net
今日、お昼2時から、YouTube ライブある！
たにぐちまこと
いまどきの JavaScript入門 - ES6/TypeScript/Vue.js
URLﾘﾝｸ(www.youtube.com)

136:Name_Not_Found
20/05/06 11:25:34.67 .net
>>131
Google の開発者も読むのは、表紙にサイが描いてある、いわゆるサイ本
昔のサイ本は、Ruby の本も書いていた、Flanagan の本。
JavaScript 第6版、2012、David Flanagan
今のサイ本は、
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発、オライリー、2017

137:Name_Not_Found
20/05/06 11:33:32.28 .net
ダサイタマ本

138:Name_Not_Found
20/05/06 11:53:44 .net
>>134
だったらそんなに長く基礎的な勉強をしていくってわけにもいかないだろうし
Pythonかjavaをバックエンドに、GUI画面をWebで作りたいってことだろうから
サイ本でじっくり勉強するっていうのはあってないかもね
サイ本っていうのはJSに仕様の隅々まで解説するやり込み向けのいわゆる「攻略本」だから

２言語が使えるって言うならとりあえずMDNのJSの再入門でも読めば
JSがどんな言語が薄っすら掴めるはずだから
あとは適当なフレームワーク本買って、物を作った後にサイ本でも読むのが良いかもね

139:Name_Not_Found
20/05/06 12:05:19 .net
つかJSいらなくね
formさえ用意すればいいじゃん
あとはデータからHTMLの組み立てを
pythonでやるかJSでやるかってくらいじゃん

140:Name_Not_Found
20/05/06 13:06:02 AP30zr3P.net
えらそーに

141:Name_Not_Found
20/05/06 13:25:18 .net
バックエンドで完結させてからjsに手を出せ
順序が違う

142:135
20/05/06 14:00:38 jD6hkh5K.net
>>135
に書いてあるけど、たにぐちまことのライブ、始まった！

4時まで！

143:Name_Not_Found
20/05/06 23:09:47 .net
PythonもJavaも初級レベルならJavaScriptでいきなりフロント作ろうなんて辞めとけ
造り手が知識も経験もないんだから、在庫管理程度ならスプレッドシート共有でまず始めること

土台のバックエンド、フロントエンドのスキルが身についてから作成したほうが利用する周りの人たちにも迷惑かからんで良いと思う

144:Name_Not_Found
20/05/07 01:16:07 .net
画像の読み込みに関する某書籍のサンプルコードについて質問です。

　//ページのロードが完了した時に発火するイベント
window.addEventListener('load', () => {
// まず最初に画像の読み込みを開始する
imageLoader('./image/color.jpg', (loadedImage) => {
// 引数経由で画像を受け取り変数に代入しておく
image = loadedImage;
});
});

//画像をロードしてコールバック関数にロードした関数を与え呼び出す
function imageLoader(path, callback){
// 画像のインスタンスを生成する
let target = new Image();

console.log(target); //(1) <img src=“./image/color.jp”>とコンソールに表示される

// 画像がロード完了したときの処理を先に記述する
target.addEventListener('load', () => {
// コールバック関数の引数に画像を渡す
callback(target);
});
//画像のロードをするためパスを指定する
target.src = path; //(2)
}

145:Name_Not_Found
20/05/07 01:16:14 .net
(1)で <img src=“./image/color.jp”>とコンソールに出力されます。
(1)の1行前で、 console.log(new Image())とすると、
コンソールに<img>と表示されるので（1）も<img>となると思いました。
(1)の時点では（2）で./image/color.jpg を読み込む前なのに、
なぜ<img src=“./image/color.jp”>となるのでしょうか？

146:Name_Not_Found
20/05/07 05:58:13 kCVkhjBj.net
>>143
分かった…

147:Name_Not_Found
20/05/07 09:29:38.11 .net
Image()
URLﾘﾝｸ(developer.mozilla.org)
そんなややこしい書き方をせずに、これじゃダメなのか？
var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);
結果
<img width="100" height="200" src="picture.jpg">

148:136
20/05/07 09:52:00.52 .net
>>131
web 系なら1年ぐらい、Ruby on Rails で、
VSCode, HTML, CSS/SASS, JavaScript(ES 2015)/TypeScript,
jQuery, Bootstrap, Node.js, npm/yarn, Webpack, Babel, React, Vue.js
他には、実行環境構築。
Linux, WSL, Vagrant, Docker, Kubernetes, CircleCI, シェルスクリプト・PowerShell
Rails チュートリアル日本語版の1つ前のバージョン(Rails 5)が、無料で読める

149:Name_Not_Found
20/05/07 11:38:58 P40hUibN.net
【環境】node.js v12.16.0
【何をしたのか】
// promiseを返すメソッド
NativeModules.module.test
この関数をラップして、resolveの場合の処理をあらかじめ用意していたものをよんでから、thenを呼び出したいです。

/**
* イメージ
*/

main(){
NativeModules.module.test
.then( retval => console.log("2") )
.catch()
}

// この部分を作りたい
async lap(){
NativeModules.module.test
.then( retval => console.log("1") ) // thenの処理を上書きしたい。。
}

// 実行結果
main()
1
2

のようにするにはどのように書けばいいのでしょうか？
必要とな知識も教えて欲しいです。

よろしくおねがいします

次ページ