+ JavaScript の質問用スレッド vol.144 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>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.5ch.net/test/read.cgi/hp/1577357404/ ■FAQ
◆開発者ツール(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 型の中身をそのまま表示してくれます。) 以上、テンプレを一度ブラッシュアップしてみましたので
本当に必要な物があれば次スレから追加していってください
ただ、読まれることはほとんど無いと思いますし
せいぜい３レス程度にした方が良いと思います ありがとう、質問させてください。
また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って作る必要とかありますか？ letとかコンストとか無かった時代って不便だった？ 常識で考えたらスレッドが違うんだから、渡せるのはプリミティブ型と
素朴な要素でなる素朴なオブジェクトと、一部なトランスファラブルなオブジェクトだけじゃないの
DOMオブジェクトを引き渡そうとか考え方に無理があると思うよ >>7
DOMはレンダ―プロセスでやれ
document.write使うなし >>8
for-letとswitchの節にブロック書いてスコープ区切れるのは便利になった ■FAQ(続き)
◆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 和訳) 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に一本化されました。 適当なリンク集を載せるのはやめようぜ
いくつものリンクが切れてたりするし、勧める本人も確認してないリンクなんていらんだろ
現UIイベントのいろんなバージョンを載せてるのも意味がわからないし
MDNにリダイレクトされるMSDNを載せるのも意味がわからない
それにJavaScript Gardenとかここに来るやつに勧めて大丈夫か？
今となってはJSを歴史的にもES3の段階から学びたいと思うような奴でないと
レガシーすぎてむしろ害になるだろう 続き
>>15
・出典もないし現実に即してない蛇足は要らん
・リンクが切れてる＆古すぎる
>>16
ただ羅列して何の意味がある？
簡単な説明くらいつけろ
>>17
いい加減不要 以前Vueについて質問した者ですが、また初歩的な質問ですみません
たとえば「Welcome」というテキストをポンと表示させるのを
ネイティブだとcreateElement(‘p’)、document.appendChildといった流れで簡単にできるのですが
これをVueでやるのってもしかして難しいことですか？ はい。
jQueryだと $('<p/>', {text: "Welcome"}).appendTo('#id') という
一行で出来ることもVue では難しいです。 いやいや、テキストをポンと表示させると言っても
現実的に考えればどっかのテキストを置き換えるだけではなくて
アニメーションだとか最低でもCSSとの絡みを考えないと行けないし
状態の変化と関連してる場合も多いだろうから実際には１行と言うわけにはいかないし
そういう全体の構造を大きな目で見て整えるのがフレームワークの役目でしょ つうかテンプレートはVueの基本中の基本なのに
以前質問してから今まで何を学んできたんだい？ レス進んでますが私は>>21以降書き込んでないので勘違いはやめてほしいです
みなさんが当たり前と思ってることが自分の中では当たり前じゃないので
皆さんの何気ないレスポンスも非常に刺激になってます。ありがとう >>21です。皆さん私の時間を何だと思ってるの？w
皆さんほど私は暇じゃないんで…テンプレート？とか調べる時間ないでしょw
分かったらさっさとVuuでテキスト表示させるコード貼ってろ無能ども そういうのはVueよりもReactの方が得意としている
Vueは簡素化し過ぎてて基本的なことをやるのに手間がかかるよ Vueはよう知らんけどappendchild(text.$el)みたいな構文は少し検索すりゃ出てくるぞ >>32
もしそんな事が書かれてる記事があったら執筆者はエアプとしか言いようがない
どのサイトよ？ >>34-35
マジで頭痛くなるようなポンコツ記事だな
運良く動いてるだけ 伸びてると思ったらVueか
だからReactにしとけと >>37
言うほどかね
jQueryと組み合わせるのは理に適ってると思うが jQueryだとこれだけ $('<p/>', {text: "Welcome"}).appendTo('#id')
それと同等のコードを出すだけで、このように荒れるわけですｗ >>21→>>22のレスポンスの速さからして最初からVueをバカにするための目的のマッチポンプでしかないわ。
こんなことでしかReactを持ち上げることができないのか >>43
>>21ですが、本当に自分は関係ないです。そうとしか言えません、すみません >>43
いやさ、Vueがバカにされてる！悔しい！って書き込みじゃなくて
なんでVueの良さを伝える書き込みをしないの？ JQNが素のDOM APIと戦うのは分が悪いと判断して矛先を変えてきたか
こりゃ面白くなりそうだ >>45
ここは自ら学ぶためのスレ
コード制作依頼板でも無ければ
推しメン紹介板でも無い
勘違いするな >>44
謝らなくていいから君は基本くらい勉強してきなよ
赤ちゃんじゃないんだからさ
君が隙だらけのレスをするから悪意のある第三者だか裏の人格だかに良いようにされるんでしょ >>48
ありがとうございます！
Vueでやるにはテンプレートが必要なのは分かりました
<body></body>の何もない所にポンと表示させるのは難しいということでしょうか
なるべくHTMLを触りたくないもので、すみません なるべくHTMLを触りたくないのならフルCanvasでやればいいよ
何もない所、どこでも好きな位置にポンと表示させられるから いくらidが無いスレとは言え勘違いしたなら一言詫びを入れるのが常識。 大前提としていくらGWとは言えこんな時間にここでお間抜けな質問と解答をしてる奴らは皆まともじゃない 一人芝居を披露してくれるのはスレが活気づくからいいんだけど
質問はショボいし煽りもセンスないからクオリティをもうちょっと上げて欲しい
賢いんでしょ？頑張りなよ いやあこの手の人は割とネタ抜きに自分以外が同一人物だと思ってるらしいからなぁ ・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問への「答え」から解離した議論はよそでやること。 端から見てるとjs開発者民度低いなあ
気に入らない質問はスルーするより煽るか説教するのに夢中になる傾向
まあ質問者も然りだが たにぐちまことのYouTube 動画に、
jQuery, Vue.js, React もある
$el, $refs は一時的に、実DOM を更新するだけ。
仮想DOM に影響を与えないから、仮想DOM を更新すると取り消される Object.observe()の頓挫がフレームワークを沼にしたんだよなぁ
はっきり言ってjavascriptの範疇で語るのが間違い >>7
document.write は一旦、現存するすべてのDOM を削除してから、追加するものでは？ vue.js って後からコンポーネントのロードとかできんの？
一通り日本語ドキュメント読んでみたんだけど出来なさそうなんだよなぁ。
例えばテンプレートのHTMLとかコンポーネントのソースは全部独立した別ファイルにしておいて、
あるボタンをクリックしたら必要なテンプレートとコンポーネントのファイルを読み込んで、
ノードもその時その時でDOMに追加してコンポーネントをインスタンス化するみたいな動き。
どうも new Vue({...}) ってやる前に必要なコンポーネントは使う使わないに関係なく全部読み込んでおかなきゃいけなくて、
コンポーネントの配置元になるバーチャルノードも最初から記述しておかないと機能しないっぽいんだけど、
俺の理解不足？
描画を100%JavaScriptに任せたくて、body タグは空の状態から始めたいんだけどいきなり躓いてる。。。
こういうのって vue.js じゃなくて Angular.js でやるべきなのかな？ JavaScriptのフレームワークって時点で休み時間に机にうっ伏して妄想してる根暗みたいなもんだから
それを話題にするせいで皆んなの心が荒むのも仕方ないし、海外のフォーラムでも同じ現象が起きてる 例えが悪かったな
底辺なろう作家がワンピースのストーリーを「俺が考えた方が100倍面白い」って語るのと同じ フレームワークがどうとかではなく、感覚的なイメージをgdgdと日本語で説明するだけの質問だから、明確な解が出てこないんだろ
この程度の質問なら、「そんなことはない」とか、抽象的な回答がお似合いだ 描画関数なら、あるかも。
仮想DOM の知識がいる
is で、コンポーネントの切り替えとか、
v-if="show" で、破棄・生成とか、
keep-alive とか 「Vueでできるのか/できないのか」の質問なんだから「できない」で終わってんだろ 自分が傷つくのが嫌なら悪態つかずに大人しくしとけってことだな >>62
今はproxyとasync関数があるから大丈夫でしょ
もともとO.oでもDOMの変化だったり内部スロットの変化は追えないのだから >>64
ここはJSを自ら学ぶためのスレであって、
フレームワークの使い方を指導するスレではないから
そういった事は他所でやってくれ Progateとドットインストールでjavascript関連を2ヶ月ほどやりました。
ドットインストールでは有料プランに入って以下のセクションを一通りこなしました。
Javascriptではじめるお手軽プログラミング
webサイトを作れるようになろう
Canvasを使ってみよう
よく見るUIを作ってみよう
そろそろドットインストールは卒業かなと思ってるんですが、
次はどういったことをやっていけば良いでしょうか？ >>82
覚えたものを生かして作るだけなのに、何を迷っているんだか
やりもしないで「次は何をやればいいですか？」って完成するまで手取り足取り教えてくれる学校の先生を規定しているなら、多分、君には向いてない 結局は>>77
これだけいわれても曖昧な質問を繰り返してる質問者には「お前が思うとおりにやれ」ぐらいしかいえない >>82
１．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 実際のweb アプリを作ることが最も時間がかかるというオチですか NM Max
Ruby on Rails の Tutorialやってみるよ宣言！
https://www.youtube.com/watch?v=PMPY2cFO5HY&;list=PLAR5qAGp9riamoBOL2VgZi1JinKWni5Oo
この人は、ほぼ、Ruby を知らないのに、
Rails チュートリアルを読んで、そのすごさに感動して、Rails 5 の動画を作ったw
最近は、Rails 6 の動画も上げてる
Rubyの言語など、あまり知らない人でも、
Rails の動画を上げてしまえるのが、Rubyの面白い所w 7 回視聴 2019/05/15
ワロタ
うん金にはならんかったのねｗ jQueryのthisの使い方って、javascriptと同じなの？ たにぐちまこと・雑食系エンジニアのKENTA、
Ruby のJunichi Ito (伊藤淳一)
このあたりは、YouTube でも超一流 >>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のイベントハンドラと"同じ"にしている JavaScriptはJavaScript、DOMはDOMでしょ
JavaScriptの中でのthisの一般的な使われ方はレシーバを指すこと
a.addEventListener('click', callback)のときはcallbackにとってはaはレシーバではないが、
形上それに近いので本来のJS的にはasync関数を考えればわかりやすいが
thisが与えられないのが自然だが変な気を利かせて与える仕様にされてるんでしょ
JavaScriptはJavaScript、DOMはDOM
それぞれで世界は違うし自然な振る舞いや常識間も少しずつ違う
混同しないようにしないとね ラムダ式（アロー）のthis も、便利なように、構文スコープに変えてあるから、
that = this
みたいに、代入しておかなくても良い スマホのブラウザからtwitterのアプリを起動してtweetさせたいとき
window.open("http://twitter.com/intent/tweet?text=aaaa";);
と書いた場合に、ブラウザのtwitterのタブが開いてしまうのですが
どのように対処したらいいのでしょうか？
https://twitter.com/5chan_nel (5ch newer account) 確かに、Edge では、アプリが勝手に開く、URL がある
知らない間に、アプリがインストールされている ■ このスレッドは過去ログ倉庫に格納されています
