+ JavaScript の質問用スレッド vol.131 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。 次スレは>>950 が(本スレで改善案があれば考慮して)立ててください ■規則/推奨ルール ・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止) ・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。 ・質問テンプレートの利用推奨。 ・質問への「答え」だけでなく「意見」を出しても良い。 ■禁止行為 ・丸投げ質問 ・迷惑スクリプトの質問 ・オレオレ用語の使用(一般的な用語を使用する事) ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事) ■質問テンプレート 【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4) 【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可) 【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。 【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用) 【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。 【サンプルコード】現象を再現可能な最小限のコードを書いてください。 1レスに収まらないならコード投稿サイトを利用してください。 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ ■回答者へ ・回答には多様性があります。他人の回答を尊重してください ・動作ブラウザや環境が限られる場合は、それを明記してください ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください ・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い ・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです すまん空文字列はfalsyだから比較要らんわ訂正 var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = s.split(/<\/?tag>/g).filter(item => item); console.log(r); // ["hoge", "poge", "fuge"] グローバルスイッチも要らんかった… これからゲームしようと思ってたけどもう寝とくわ… var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = s.split(/<\/?tag>/).filter(item => item); console.log(r); // ["hoge", "poge", "fuge"] クラスベース言語が多いのは皆C++に影響を受けているから 多くの言語は別に人間工学的や信念として選んでいるのではなく揃えるのが無難だからそうしているだけ C++がクラスベースなのはCの構造体からの自然な発想 CにOOPを組み込むに当たって当然プロトタイプベース的な方向にはなり得ない JSがプロトタイプベースなのはクラスベースのインタプリタエンジンは実装も大変で 生半可なものではシンプルなプロトタイプベースに比べて性能を出すのが難しいという事実があるから また、スクリプト言語としてはクラスに縛られるというのは不便となることも多い クラスかプロトタイプかと言うよりはクラスベースを選んだか、選ばなかったかという違い よっしゃジャバスクリプトの勉強始めるで! お前らよろしく!!!!!!!!!!! プロトタイプベースは型システムとの相性が良くない, 気がする htmlをStringで参照していることが笑えるw 独学で参考書をペン片手に読んでる。今2冊目。 読み終えたところまでのコード解読はいける。 まだまだ何もできないけど まずは基礎知識の積み重ねが大事だなと深く感じてる ペン片手は駄目 キーボード片手でないと とにかくサンプルを試して、自分で改変して仕組みを学び 分からない所は調べてそのうち1%でも理解したような気になるようにする 本はあくまで導入と思うこと いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。 なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。 >>408 もいいアドバイスだと思うんだが。 もちろん本でしっかり知識積み重ねるのも大事だとも思うよ。 しかしそもそもどういう意図で>>407 書き込んだんだ? エライエライ頑張れして欲しかったのかな? jQuery で作った var oldStr = '<div>hoge</div><div>poge</div><div>fuge</div>'; $('body').append(oldStr); var resAry = []; $( 'div' ).each( function(){ resAry.push( $(this).text() ); } ) console.log( resAry ); // ["hoge", "poge", "fuge"] やり方なんて自分が一番吸収しやすい方法をみつければいいんだよ こればかりは人によって違うもの。 まだまだ何もできないのにどうしてそれが最善なの? その人の最善の方法見つけるには他の方法も試さなきゃダメでは? 合理化とか埋没費用の誤謬とかで既に時間かけた方法に固執してるだけでは? jQueryありなの?ならこうするわ。 var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = $(s).get().map(item => item.innerHTML); console.log(r); // ["hoge", "poge", "fuge"] rのとこは var r = $(s).map(function() {return this.innerHTML}).get(); でもいいけど。 上のmapはjavascriptネイティブのmapでこっちはjQueryのmapね念のため。 var r = $(s).get().map(item => item.innerHTML); var r = $(s).map(function() {return this.innerHTML}).get(); var r = $.map($(s), item => item.innerHTML); jQuery.mapを使ったほうが僅かに短いよ ほんまや! 速度はどんなもんかperformance.now()で測ってみたけど長さ10のランダム文字列をtagでくくったものを1000個連結したもので確認した限り3つとも5ms前後で目立った差なかったわ。 もっと大きくなると差もあるかも知れないけど実用上はどれも問題ないね。 その人の最適な方法とかいう魔法みたいなものはない 人間の脳はニューラルネットと同じなんだから Web技術の情報、特に本の内容は糞な場合が多いという事実がある以上 沢山の検索と試行錯誤をして知識を積み重ねていって形にする以外はない ブロックを積み上げるように体系的に学ぶのは無理 薄い絵の具を塗り重ねて絵を浮かび上がらせる感じしか無い >>421 お前Changelogに○○を最適化しましてって 書いてあったら、それは最適な方法じゃないって いちいちツッコむのか? その最適化は恐らくoptimizationの訳語としての用法だから最善の方法を見つけ出しそして実装した!という意味ではないだろう。 virtual→仮想と並ぶ近代クソ訳語のひとつ。 他者を認められない受け入れられないというのも 自分の、個人の考え方やり方なんだよね >>424 初心者と今活躍してる業界人とじゃけして平等ではないからな 色んな人に教えて自身でも色々失敗してきた経験を元に 無駄をしないようアドバイスしてるのであってそういうのは素直に聞くべき onclick="javascript:ac_tracer( って何でしょうか?ボタン画像を挟む<a>タグ内にあります。 イベントハンドラの設定方法のひとつです。 今回の場合onclickなのでクリックイベントのハンドラ。 クリックするとそこに書かれたJavaScriptコードが実行されます。 ありがとうございます。 このac_tracerというのは何でしょう? >>429 ブラウザの検証機能でコードを見るのが早い >>429 昔昔あるところに太郎という人が居ました この太郎というのは何でしょう? >>429 銭湯に行ったらオッサンが湯につかっていました。このオッサンは何でしょう? あるところにおじいさんとおばあさんがいました。 さて私は誰でしょう? >>429 関数です。 ただし、ac_tracerという名前の関数はJavascriptに元々用意されているものでも、web開発者が利用するDOM APIのものでもないため、ユーザー定義関数、つまり誰かが何かの目的のために作った関数です。 つまり、作った人に聞くか、ac_tracerの定義部分を含むコードを読まなければ、この関数が何なのかエスパーを除き誰にも分かりません。 >>433 > この太郎というのは何でしょう? 人の名前では? >>440 そうだねイベントハンドラの設定方法のひとつだね >>435 > あるところにおじいさんとおばあさんがいました。 > さて私は誰でしょう? そんなことよりよ、桃太郎の おじいさんとおばあさん、子供がいないらしいぜ? ってことは、おじいさんとおばあさんじゃないよな? 子供ができたら、やっとおとうさんとおかあさんになるはずだ 孫も子供もいないのにおじいさんとおばあさんというのはおかしすぎる っていうか、子供いないのに孫を養子に取ることってできるのかよ? 孫悟空の孫じゃないぞ。子供の子供という意味の孫だ 歳的な意味での爺婆だし 子供と言っても当然手続きもして無かろうし家系図にも組み込まれてないだろうし 桃太郎から見たらお父さんお母さんでも 全く関係ない第三者が伝聞として話したり聞く際にはふさわしくないと思う >>442 でもお前甥も姪もいないのにおじさんじゃん。 >>442 【お祖父さん】 祖父(そふ)の敬称。 【お爺さん】 男の老人の敬称、また親しんで言う語。 localStorageやsessionStorageなどwebStorageには文字列値しか保存できないとMDNで読んだ でも[ 3, 6, 1, 23 ]や[ 'apple', 'orange', 'kiwi' ]など単純な配列は 特に変換することなしに、そのままsetItem()/getItem()できているようにみえる 値を取り出してすぐ直接push()やslice()などで操作できるしindexOf()もできてる これはどういう理屈でこういう挙動になるんでしょうか?ブラウザが勝手にやってくれてる?配列関数が優秀? 試したのはMacのSafariとWindowsのFirefoxでsessionStorage利用 http://sdsoffice.com/tools/homepage-patrol-v2b.html 上記サイトのwebサイトを巡回してくれるJavaScriptを利用をしようと思います。 windows8.1(64bit) + IE11の環境で、上記サイト上で実行させるには問題ないのですが、 htmlファイルとしてローカルに保存して、ローカルで実行するとエラーとなります。 (巡回してくれない) windows7(64bit) + IE11の環境でしたら、ローカルでも問題なく動きます。 windows8.1でエラーになる原因がわかりません。 お詳しい方、力になっていただけないでしょうか? よろしくお願いいたします。 別フレームに指定の複数のページをランダム時間(何分から何分の間ランダム)で表示する。 の参考資料とかありませんか? 十数年前「html」だったのか「javascript」か覚えていないけど 色んな例を組み合わせて作って偶然動いたことがあったのでどこかに保存しておいたんだけどなくなってしまったので・・・ よかったら教えてください。 >>448 そもそも普通は、crossOrigin (CORS)アクセス禁止だろ 自分のPC 上の、HTML ファイルから、他のドメインにアクセスできないだろ。 iframe 内に、他のドメインのページを読み込んでも、 iframeの内外で、異なるサイトになるから、アクセスできない 自分のPC で、サーバーを立てて、それを経由しないとアクセスできない。 または、ネット上のそういうサーバーを利用するとか 以前使えていた、Yahoo Query Language (YQL) も、使えなくなった aからbまでの間でランダムは a+(0からb-a)までランダムと表せられる つまりa+Math.random()*(b-a)となる >>449 「iframe ランダム表示」で検索! iframe 内に、他のドメインのページを、ランダムに読み込む あるある質問かもしれませんが Javascriptのソースコードからコメントをすべて除去するツールなり方法ってどんなものがあるでしょうか? 単独のフリーソフトでも良いですし atomのbeautify等、構文解析するプラグイン等にオマケでついていてもおかしくないと思うのですが windows7を使っています <iframe src="#" id="ifrm"></iframe> <script type="text/javascript"> window.onload = function(){ var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp' ]; // 0以上、3未満。つまり、0〜2 var idx = Math.floor( Math.random() * urls.length ); var ifrm = document.getElementById('ifrm'); ifrm.src = urls[idx]; } </script> これを、<body>タグの中に書いて実行すれば、毎回違うサイトが読み込まれる >>449 「jquery plugin カルーセル」で検索! jQuery Plugin を探す方が、簡単かも >>453 「javascript コメント 削除 ツール」で検索! >>456 ありがとうお陰でbeautifierの反対語にminifierという言葉があることを知ってatom minifierを入れて解決しました >>449 454 を修正した。 ランダム時間は難しくてできない。一定時間ならできる 以下を、<body>タグの中に書いて実行すれば、5秒毎に、違うサイトが読み込まれる。 タイマーを止めるには、clearInterval を使う <iframe src="#" id="ifrm"></iframe> <script type="text/javascript"> window.onload = function(){ var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp' ]; var ifrm = document.getElementById('ifrm'); var timerID = setInterval(function () { // 0以上、3未満。つまり、0〜2 var idx = Math.floor( Math.random() * urls.length ); ifrm.src = urls[idx]; }, 5000); // 5分なら、5 * 60 * 1000 とする } </script> 458 を修正した setTimeout() で、最初から表示する。 その後、setInterval() で、一定時間ごとに表示する <iframe src="#" id="ifrm"></iframe> <script type="text/javascript"> window.onload = function(){ var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp' ]; var ifrm = document.getElementById('ifrm'); function setExternalWebsite() { // 0以上、3未満。つまり、0〜2 var idx = Math.floor( Math.random() * urls.length ); ifrm.src = urls[idx]; } setTimeout(setExternalWebsite, 0); // 最初から表示する // 5分なら、5 * 60 * 1000 とする var timerID = setInterval(setExternalWebsite, 5000); } </script> >>459 setInterval使わずにsetExternalWebsiteの最後で毎回setTimeoutすればいいだけやで 問題にはならんと思うんだけどどんどん再起が深くなっていくのが気持ち悪い >>461 それってスタックオーバーフローしないの? >>464 積まれないんすね、ありがとうございます 関数ポインタみたいなのがどんどん積まれていくのかと思った >>452 >>445 >>454 (459) 丁寧に教えてもらってありがとうございます。すごく参考になりました。 ランダム時間なのですがsetIntervalを使っていたの思い出しました。 { var min = 5000 ; var max = 10000 ; setInterval("hyoji()",(max + 1 - min))+ min; } としました。 やってないと忘れるものですみませんでした。 webpackやgulpについて質問したいのですが、その類のスレッドってありますかね??。 なければここで質問してもよろしいでしょうか? function(t, i) { t.target = i, e.apply(this, arguments) } こういう構文があったんですが 「 t.target = i; e.apply(this, arguments); 」 つまりこういう構文を略して書く書き方って認識であってますか? >>461-465 1. function f() { setTimeout(f, 5000); } 2. setTimeout(f, 5000); まず、2の実行では、setTimeout()は実行されるけど、f()はまだ実行されない。 つまり、キューに、fが積まれるだけ 次に5秒後、キューからfが削除されて、1が実行される。 その時に、setTimeout()で、またキューに、fが積まれる つまり、キューには常に、fが1個しか積まれていない >>468 わかりにくいから、そんなカンマの使い方をしない方が良い。 勘違い・バグを誘発する 普通に、; で文を区切るべき >>467 いいよ。他に該当のスレなんて有るわけないし >>450 ありがとうございました。 ローカルファイルで他サイトの呼び出しの規制に引っかかっているわけですね。 今回の案件だけ個別に許可はできないものでしょうか?(ブラウザのセキュリティ上難しい?) >>472 ブラウザじゃなくてサーバー側のセキュリティな 制限をかけてるのがブラウザで サーバはブラウザがかけてる制限を任意に解除できるだけじゃないのか 違いは無設定の鯖に対してどういう挙動になるか というか>>448 はCORS関係なんか? みたところ子ウィンドウを開いて、子のlocation.hrefで移動させてるだけ IE自身のセキュリティ設定、イントラネットのセキュリティポリシーな気がするんだが グローバル変数を1つ宣言するのと 関数を1つ宣言するのとでは グローバルの汚染度は変わらないですよね? >>475 変数というのは「変えられる値」関数というのは、変えられない。 (まあ正確に言えば、JavaScriptでは関数もオブジェクトなので変えようと思えば変えられるが、 普通そういう使い方はしないしそういう使い方はグローバル変数と同様になってしまうから ダメなやり方であるという考え方をする) グローバル汚染というのは、値がどこから書き換えられるかわからないから問題なので、 グローバル変数はアウトだが、グローバル関数(グローバルクラス含む)は問題ない >>476-477 無名関数を使うとかなら、変わると言われても納得なんですけど function ffff(){}と定義するのとvar ffff = function(){}と定義するのでは変わらないし どちらの場合も変数名ffffに対する文字列値の再代入も関数再定義も特別の構文なしにできてしまうし 同じ名前の関数宣言があってもエラーも何も出ないのを考えると 宣言時には入れ物はどちらも変数であって(というかポインタと考えたほうが) 中身が、関数か、文字列や数値や配列やオブジェクトか、の違いでしかない、という風に思うんです そうなると、1個グローバル変数を使うのと1個グローバル関数を使うのとでは、もはや変わりが無いように思うんですが ニュアンス的には幾らかの違いがあるけど、汚染度と言う視点だと無いよ つか、関数もオブジェクトだから変えられるという言い用はJSer失格 だからnamespace的に1つのオブジェクトに全部押し込めて汚染度下げたりしてたわけですし >>471 ではこちらで質問させていただきます。 gulpであればgulp-uglifyを、webpackであればUglifyJsPluginを使って minify化しようと思うのですが、どちらもjsに記述している変数名がiやfに変わってしまいます。 どちらのnpmもオプションに変数名が変わらない様な設定があるかと思ったのですが無いようでした。 変数名が変わるのは困るので、ただ単に改行、コメント削除、空白削除をしたいのですが、何か方法はありますでしょうか。 >>483 HTMLに直接変数名が書いてあり、その変数を外部jsファイルで使用する時に使えなくなると思ったのですが。 ということは、そもそもjsの書き方がおかしいということでしょうか? 例を出せと言われてもすぐには出せませんが・・・・ > HTMLに直接変数名が書いてあり そんなことはしない。HTMLにJavaScriptの変数は出てこない uglify=難読化、minify=軽量化、全然別だ uglifyやってんなら、そりゃそうなる ところでnpmに gulp-minify (-cssや-htmlがつかない)があって minify()で普通に無駄な空白類やコメントの削除してくれるらしいが >>482 uglify-js@3だが、mangleオプションにreservedをつければいいんじゃない? あ、すべての変数名を変えたくないのか magleオプションをなくすような設定ができるのかね gulp-uglifyは詳しくないけど、 サードパーティー製のライブラリで使用しているグローバル変数(いわゆるネームスペース)を スクリプト内で参照している場合に、その変数名をminifyしない設定があるのでは? >>485 多分私の説明が下手でうまく伝わっていない気がするのでちょっと考え直して 再度ご質問します。ありがとうございました。 >>486 その違いが知りませんでした。 勉強になります。ありがとうございます。 >>487 gulp-minifyですか。ちょっと試してみます。 >>489 uglify-jsも知りませんでした。 これも検証してみます。 >>490 ごめんなさい。話に追いついていけません。。。 >>491 だからHTMLに直接変数名を書くことが 間違いだって話だよ 他のやつもやる必要のないことを書くな >>494 その理屈だと、腐った環境やクソなコーディング規約に したがって開発しろって言ってるように見えるが? だからHTMLに直接変数名を書くことが 腐った環境やクソなコーディング規約だって話だ ページごと、ユーザーごとのパラメータをHTMLに書くことはあるぞ どうせlocalStorageかHTMLに書くかAjaxで取得するかくらいしかないし 今話をしてるのはJavaScriptの変数の話だ 分かってないなら黙ってろ HTML内で var userData = {} 外部JSファイル内で (function(){ something(userData.何か); })(); こういうことだろ >>497 常に何から何までXHRで済ませられるわけじゃないしな ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる