+ JavaScript の質問用スレッド vol.144 +
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
■前スレ
+ JavaScript の質問用スレッド vol.143 +
https://mevius.2ch.sc/test/read.cgi/hp/1577357404/
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
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 型の中身をそのまま表示してくれます。)
◆ MDN (HTML・CSS・JS・各種Web APIのリファレンスサイト)
https://developer.mozilla.org/ja/docs
◆ WHATWG（代表的なWeb APIの仕様書）
https://spec.whatwg.org/
◆ ECMAScript（JSの仕様書）
https://tc39.es/ecma262/
■その他
■テンプレ案
http://fiddle.jshell.net/fH4cC/180/show/light/
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
本当に必要な物があれば次スレから追加していってください
ただ、読まれることはほとんど無いと思いますし
せいぜい３レス程度にした方が良いと思います
もう書き込んで良い？
また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って作る必要とかありますか？
素朴な要素でなる素朴なオブジェクトと、一部なトランスファラブルなオブジェクトだけじゃないの
DOMオブジェクトを引き渡そうとか考え方に無理があると思うよ
DOMはレンダ―プロセスでやれ
document.write使うなし
別に
for-letとswitchの節にブロック書いてスコープ区切れるのは便利になった
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ MSDN Library
https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
■テンプレ案
http://fiddle.jshell.net/fH4cC/180/show/light/
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ−ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://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
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳)
jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
https://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
https://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/
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に一本化されました。
https://w3techs.com/technologies/history_overview/javascript_library/all/y
https://w3techs.com/technologies/history_overview/javascript_library/ms/y
いくつものリンクが切れてたりするし、勧める本人も確認してないリンクなんていらんだろ
現UIイベントのいろんなバージョンを載せてるのも意味がわからないし
MDNにリダイレクトされるMSDNを載せるのも意味がわからない
それにJavaScript Gardenとかここに来るやつに勧めて大丈夫か？
今となってはJSを歴史的にもES3の段階から学びたいと思うような奴でないと
レガシーすぎてむしろ害になるだろう
>>15
・出典もないし現実に即してない蛇足は要らん
・リンクが切れてる＆古すぎる
>>16
ただ羅列して何の意味がある？
簡単な説明くらいつけろ
>>17
いい加減不要
たとえば「Welcome」というテキストをポンと表示させるのを
ネイティブだとcreateElement(‘p’)、document.appendChildといった流れで簡単にできるのですが
これをVueでやるのってもしかして難しいことですか？
jQueryだと $('<p/>', {text: "Welcome"}).appendTo('#id') という
一行で出来ることもVue では難しいです。
現実的に考えればどっかのテキストを置き換えるだけではなくて
アニメーションだとか最低でもCSSとの絡みを考えないと行けないし
状態の変化と関連してる場合も多いだろうから実際には１行と言うわけにはいかないし
そういう全体の構造を大きな目で見て整えるのがフレームワークの役目でしょ
https://qiita.com/runes224/items/1372be0cbb5eeef1b51a#vue%E3%81%AE%E5%9F%BA%E6%9C%AC
以前質問してから今まで何を学んできたんだい？
みなさんが当たり前と思ってることが自分の中では当たり前じゃないので
皆さんの何気ないレスポンスも非常に刺激になってます。ありがとう
皆さんほど私は暇じゃないんで…テンプレート？とか調べる時間ないでしょw
分かったらさっさとVuuでテキスト表示させるコード貼ってろ無能ども
Vueは簡素化し過ぎてて基本的なことをやるのに手間がかかるよ
もしそんな事が書かれてる記事があったら執筆者はエアプとしか言いようがない
どのサイトよ？
https://qiita.com/hosomichi/items/3faf74b7141081731a75
＞インスタンス生成時のelオプションを省略するとデフォルトでは空のdiv要素がel要素として生成されます。
https://qiita.com/s_yasunaga/items/05e56fad4631f7bc7fe9
お前ただのVueアンチだろ
マジで頭痛くなるようなポンコツ記事だな
運良く動いてるだけ
だからReactにしとけと
？？？
？
言うほどかね
jQueryと組み合わせるのは理に適ってると思うが
それと同等のコードを出すだけで、このように荒れるわけですｗ
こんなことでしかReactを持ち上げることができないのか
>>21ですが、本当に自分は関係ないです。そうとしか言えません、すみません
いやさ、Vueがバカにされてる！悔しい！って書き込みじゃなくて
なんでVueの良さを伝える書き込みをしないの？
こりゃ面白くなりそうだ
ここは自ら学ぶためのスレ
コード制作依頼板でも無ければ
推しメン紹介板でも無い
勘違いするな
謝らなくていいから君は基本くらい勉強してきなよ
赤ちゃんじゃないんだからさ
君が隙だらけのレスをするから悪意のある第三者だか裏の人格だかに良いようにされるんでしょ
ありがとうございます！
Vueでやるにはテンプレートが必要なのは分かりました
<body></body>の何もない所にポンと表示させるのは難しいということでしょうか
なるべくHTMLを触りたくないもので、すみません
何もない所、どこでも好きな位置にポンと表示させられるから
質問はショボいし煽りもセンスないからクオリティをもうちょっと上げて欲しい
賢いんでしょ？頑張りなよ
・質問への「答え」から解離した議論はよそでやること。
気に入らない質問はスルーするより煽るか説教するのに夢中になる傾向
まあ質問者も然りだが
jQuery, Vue.js, React もある
$el, $refs は一時的に、実DOM を更新するだけ。
仮想DOM に影響を与えないから、仮想DOM を更新すると取り消される
はっきり言ってjavascriptの範疇で語るのが間違い
document.write は一旦、現存するすべてのDOM を削除してから、追加するものでは？
一通り日本語ドキュメント読んでみたんだけど出来なさそうなんだよなぁ。
例えばテンプレートのHTMLとかコンポーネントのソースは全部独立した別ファイルにしておいて、
あるボタンをクリックしたら必要なテンプレートとコンポーネントのファイルを読み込んで、
ノードもその時その時でDOMに追加してコンポーネントをインスタンス化するみたいな動き。
どうも new Vue({...}) ってやる前に必要なコンポーネントは使う使わないに関係なく全部読み込んでおかなきゃいけなくて、
コンポーネントの配置元になるバーチャルノードも最初から記述しておかないと機能しないっぽいんだけど、
俺の理解不足？
描画を100%JavaScriptに任せたくて、body タグは空の状態から始めたいんだけどいきなり躓いてる。。。
こういうのって vue.js じゃなくて Angular.js でやるべきなのかな？
>>59
それを話題にするせいで皆んなの心が荒むのも仕方ないし、海外のフォーラムでも同じ現象が起きてる
底辺なろう作家がワンピースのストーリーを「俺が考えた方が100倍面白い」って語るのと同じ
この程度の質問なら、「そんなことはない」とか、抽象的な回答がお似合いだ
仮想DOM の知識がいる
is で、コンポーネントの切り替えとか、
v-if="show" で、破棄・生成とか、
keep-alive とか
なんか違う気がする
そういう感覚的なレスだよ
鏡見ろって話
俺質問してない
それだけ
>>68もこれ以上暴れんなよ
まじでRぞ
今はproxyとasync関数があるから大丈夫でしょ
もともとO.oでもDOMの変化だったり内部スロットの変化は追えないのだから
ここはJSを自ら学ぶためのスレであって、
フレームワークの使い方を指導するスレではないから
そういった事は他所でやってくれ
ドットインストールでは有料プランに入って以下のセクションを一通りこなしました。
Javascriptではじめるお手軽プログラミング
webサイトを作れるようになろう
Canvasを使ってみよう
よく見るUIを作ってみよう
そろそろドットインストールは卒業かなと思ってるんですが、
次はどういったことをやっていけば良いでしょうか？
https://teratail.com/questions/258409
覚えたものを生かして作るだけなのに、何を迷っているんだか
やりもしないで「次は何をやればいいですか？」って完成するまで手取り足取り教えてくれる学校の先生を規定しているなら、多分、君には向いてない
これだけいわれても曖昧な質問を繰り返してる質問者には「お前が思うとおりにやれ」ぐらいしかいえない
１．MDNを隅々まで読む（必ず全ての項目に目は通すこと）
２．その最中重要そうな物は自分の手で試す
３．更に興味が湧いたものを他の人はどう使っているかをググって調べる
これを１０年間やる
その後ESやWHATWGの仕様書を読み込む
これで上級者
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
Ruby on Rails の Tutorialやってみるよ宣言！
https://www.youtube.com/watch?v=PMPY2cFO5HY&list=PLAR5qAGp9riamoBOL2VgZi1JinKWni5Oo
この人は、ほぼ、Ruby を知らないのに、
Rails チュートリアルを読んで、そのすごさに感動して、Rails 5 の動画を作ったw
最近は、Rails 6 の動画も上げてる
Rubyの言語など、あまり知らない人でも、
Rails の動画を上げてしまえるのが、Rubyの面白い所w
ワロタ
うん金にはならんかったのねｗ
Ruby のJunichi Ito (伊藤淳一)
このあたりは、YouTube でも超一流
同じとも言えるし違うとも言える
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のイベントハンドラと"同じ"にしている
JavaScriptの中でのthisの一般的な使われ方はレシーバを指すこと
a.addEventListener('click', callback)のときはcallbackにとってはaはレシーバではないが、
形上それに近いので本来のJS的にはasync関数を考えればわかりやすいが
thisが与えられないのが自然だが変な気を利かせて与える仕様にされてるんでしょ
JavaScriptはJavaScript、DOMはDOM
それぞれで世界は違うし自然な振る舞いや常識間も少しずつ違う
混同しないようにしないとね
that = this
みたいに、代入しておかなくても良い
window.open("http://twitter.com/intent/tweet?text=aaaa");
と書いた場合に、ブラウザのtwitterのタブが開いてしまうのですが
どのように対処したらいいのでしょうか？
(deleted an unsolicited ad)
知らない間に、アプリがインストールされている
100〜のスレッドの続きを読む