元スレ+ JavaScript の質問用スレッド vol.144 +
JavaScript覧 / PC版 / みんなの評価 :
1 = :
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 +
http://mevius.5ch.net/test/read.cgi/hp/1577357404/
2 = :
■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
http://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 型の中身をそのまま表示してくれます。)
3 = :
■各種仕様 ・解説サイト
◆ MDN (HTML・CSS・JS・各種Web APIのリファレンスサイト)
http://developer.mozilla.org/ja/docs
◆ WHATWG（代表的なWeb APIの仕様書）
http://spec.whatwg.org/
◆ ECMAScript（JSの仕様書）
http://tc39.es/ecma262/
■その他
■テンプレ案
http://fiddle.jshell.net/fH4cC/180/show/light/
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
4 :
以上、テンプレを一度ブラッシュアップしてみましたので
本当に必要な物があれば次スレから追加していってください
ただ、読まれることはほとんど無いと思いますし
せいぜい３レス程度にした方が良いと思います
5 = :
>>1乙です
もう書き込んで良い？
6 = :
どうぞ
7 = :
ありがとう、質問させてください。
また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 = :
letとかコンストとか無かった時代って不便だった？
9 = :
常識で考えたらスレッドが違うんだから、渡せるのはプリミティブ型と
素朴な要素でなる素朴なオブジェクトと、一部なトランスファラブルなオブジェクトだけじゃないの
DOMオブジェクトを引き渡そうとか考え方に無理があると思うよ
11 = :
>>8
別に
12 = :
>>8
for-letとswitchの節にブロック書いてスコープ区切れるのは便利になった
13 = :
■各種仕様 (続き)
◆ 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)
http://developer.mozilla.org/ja/docs
◆ MSDN Library
http://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/
15 = :
■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 和訳)
16 = :
■JavaScript主要ライブラリ・フレームワーク
jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
http://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
http://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/
17 = :
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 = :
各JavaScriptライブラリ使用率
http://w3techs.com/technologies/history_overview/javascript_library/all/y
http://w3techs.com/technologies/history_overview/javascript_library/ms/y
19 = :
適当なリンク集を載せるのはやめようぜ
いくつものリンクが切れてたりするし、勧める本人も確認してないリンクなんていらんだろ
現UIイベントのいろんなバージョンを載せてるのも意味がわからないし
MDNにリダイレクトされるMSDNを載せるのも意味がわからない
それにJavaScript Gardenとかここに来るやつに勧めて大丈夫か？
今となってはJSを歴史的にもES3の段階から学びたいと思うような奴でないと
レガシーすぎてむしろ害になるだろう
20 = :
続き
>>15
・出典もないし現実に即してない蛇足は要らん
・リンクが切れてる＆古すぎる
>>16
ただ羅列して何の意味がある？
簡単な説明くらいつけろ
>>17
いい加減不要
21 = :
以前Vueについて質問した者ですが、また初歩的な質問ですみません
たとえば「Welcome」というテキストをポンと表示させるのを
ネイティブだとcreateElement(‘p’)、document.appendChildといった流れで簡単にできるのですが
これをVueでやるのってもしかして難しいことですか？
22 = :
はい。
jQueryだと $('<p/>', {text: "Welcome"}).appendTo('#id') という
一行で出来ることもVue では難しいです。
23 = :
いやいや、テキストをポンと表示させると言っても
現実的に考えればどっかのテキストを置き換えるだけではなくて
アニメーションだとか最低でもCSSとの絡みを考えないと行けないし
状態の変化と関連してる場合も多いだろうから実際には１行と言うわけにはいかないし
そういう全体の構造を大きな目で見て整えるのがフレームワークの役目でしょ
24 = :
言い訳はいいから、さっさと実装書けよ
25 = :
テンプレートじゃあかんのか？
27 = :
つうかテンプレートはVueの基本中の基本なのに
以前質問してから今まで何を学んできたんだい？
28 = :
エア質問者だから何も学んでないよ
29 = :
レス進んでますが私は>>21以降書き込んでないので勘違いはやめてほしいです
みなさんが当たり前と思ってることが自分の中では当たり前じゃないので
皆さんの何気ないレスポンスも非常に刺激になってます。ありがとう
30 = :
>>21です。皆さん私の時間を何だと思ってるの？w
皆さんほど私は暇じゃないんで…テンプレート？とか調べる時間ないでしょw
分かったらさっさとVuuでテキスト表示させるコード貼ってろ無能ども
31 = :
そういうのはVueよりもReactの方が得意としている
Vueは簡素化し過ぎてて基本的なことをやるのに手間がかかるよ
32 = :
Vueはよう知らんけどappendchild(text.$el)みたいな構文は少し検索すりゃ出てくるぞ
33 = :
>>32
もしそんな事が書かれてる記事があったら執筆者はエアプとしか言いようがない
どのサイトよ？
34 = :
>>33
http://qiita.com/hosomichi/items/3faf74b7141081731a75
＞インスタンス生成時のelオプションを省略するとデフォルトでは空のdiv要素がel要素として生成されます。
35 = :
あとjQuery使う方法もでてくる
http://qiita.com/s_yasunaga/items/05e56fad4631f7bc7fe9
36 = :
>>30
お前ただのVueアンチだろ
37 = :
>>34-35
マジで頭痛くなるようなポンコツ記事だな
運良く動いてるだけ
38 = :
伸びてると思ったらVueか
だからReactにしとけと
39 = :
>>31
？？？
40 = :
>>39
？
41 = :
>>37
言うほどかね
jQueryと組み合わせるのは理に適ってると思うが
43 = :
>>21→>>22のレスポンスの速さからして最初からVueをバカにするための目的のマッチポンプでしかないわ。
こんなことでしかReactを持ち上げることができないのか
44 = :
>>43
>>21ですが、本当に自分は関係ないです。そうとしか言えません、すみません
45 = :
>>43
いやさ、Vueがバカにされてる！悔しい！って書き込みじゃなくて
なんでVueの良さを伝える書き込みをしないの？
46 = :
JQNが素のDOM APIと戦うのは分が悪いと判断して矛先を変えてきたか
こりゃ面白くなりそうだ
47 = :
>>45
ここは自ら学ぶためのスレ
コード制作依頼板でも無ければ
推しメン紹介板でも無い
勘違いするな
48 = :
>>44
謝らなくていいから君は基本くらい勉強してきなよ
赤ちゃんじゃないんだからさ
君が隙だらけのレスをするから悪意のある第三者だか裏の人格だかに良いようにされるんでしょ
49 = :
>>48
ありがとうございます！
Vueでやるにはテンプレートが必要なのは分かりました
<body></body>の何もない所にポンと表示させるのは難しいということでしょうか
なるべくHTMLを触りたくないもので、すみません
50 = :
なるべくHTMLを触りたくないのならフルCanvasでやればいいよ
何もない所、どこでも好きな位置にポンと表示させられるから
みんなの評価 :
JavaScript一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.141 + (881) - [97%] - 2021/4/19 9:00
- + JavaScript の質問用スレッド vol.104 + (1001) - [97%] - 2013/1/28 4:00
- + JavaScript の質問用スレッド vol.114 + (1001) - [97%] - 2014/5/3 10:45
- + JavaScript の質問用スレッド vol.142 + (984) - [97%] - 2020/8/27 19:15
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.124 + (1001) - [97%] - 2015/7/16 1:30
- + JavaScript の質問用スレッド vol.140 + (1001) - [97%] - 2019/9/19 10:45
- + JavaScript の質問用スレッド vol.143 + (753) - [97%] - 2020/4/19 5:00
- + JavaScript の質問用スレッド vol.141 + (1001) - [97%] - 2019/9/22 23:15
- + JavaScript の質問用スレッド vol.142 + (926) - [97%] - 2019/12/23 13:15
- + JavaScript の質問用スレッド vol.123 + (1002) - [95%] - 2015/4/27 23:30
- + JavaScript の質問用スレッド vol.123 + (966) - [95%] - 2020/10/20 2:30
- + JavaScript の質問用スレッド vol.122 + (116) - [95%] - 2018/5/2 18:30
- + JavaScript の質問用スレッド vol.122 + (1004) - [95%] - 2015/2/14 4:45
- + JavaScript の質問用スレッド vol.121 + (1001) - [95%] - 2015/1/1 18:30
- + JavaScript の質問用スレッド vol.121 + (1001) - [95%] - 2022/11/29 16:30
- + JavaScript の質問用スレッド vol.120 + (1002) - [95%] - 2014/11/8 1:15
トップメニューへ / →のくす牧場書庫について