JavaScript を自ら学ぶ人のための質問スレッドです。 >>2-6 のテンプレを読んだ上で質問してください。次スレは>>950 が>>2 のテンプレ案(本スレで改善案があれば考慮)を元に立ててください ■質問を書く上で (1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。 (2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。 (ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など) (3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。 (4) 常に自発的に調べる心構えを持ってください。 具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。 わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。 (5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。 (6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。 ※必ず「問題の事象が再現されること」を確認してください。 必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。 (7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2 の質問テンプレートを活用してみてください。 (9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。 (10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 ※前スレ + JavaScript の質問用スレッド vol.123 + http://2chb.net/r/tech/1491143438/ VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured 前スレ998の質問だけど 一般的にはc2が返してるような関数のことをクロージャと呼ぶことが多いが JavaScriptの関数は全部クロージャなのでc2自体もクロージャ
>>998 追記です 3つの要素を持つオブジェクトセットを利用して、 関数内のクローズ状態を実現する、ということ意味して そのセットをクロージャーと呼んでいるのだという理解でいかがでしょう? 前スレで誤字があったので訂正と クロージャーに関してわかりやすく説明しときます closerは誤りでclouserでした
【クロージャー】 クロージャーはJSの関数に下記の仕組みを持たせるための要素のセットです ・関数内部をクローズにする(外部から直接アクセスできない) ・関数からは外部のプロパティにアクセスできる この仕組みを作るものがクロージャーです クロージャーの要素は、おおざっぱに関数自身、関数内情報、関数外部を参照するポインタで、 この要素のセットをクロージャーと呼びます 【外部ポインタの働きと内部情報の動きの確認】 <サンプルコード> function f1(){ let c=0;return c++; } function f2(){ let c=0;return ()=>{let s=0;return [c++,s++];} } let f3=f2() ; 1 f1() ;f1() ;console.log(f1()); 2 f2()();f2()();console.log(f2()()); 3 f3() ;f3() ;console.log(f3()); <結果出力> 1 c:0 2 c:0 s:0 3 c:2 s:0 ここで外部への参照ポインタをouterとします f1のクロージャーは、{関数f1 return c}{変数c}{outer(global} f2のクロージャーは、{関数f2 return function}{変数c}{outer(global} f2のアローの場合、 {無名 return [c,s]}{変数s}{outer(f2)}
コード1では、f1を2回呼びますが、関数呼び出し1回につき、1つの(別々の)クロージャーが生成されます 同じ変数名のcであっても、別物のcとなります ですから、cはインクリメントされずに0となります コード2ではf2から戻されるアロー関数を複数回呼び出しますが 関数の呼び出し1回につき、別々のクロージャーが生成されますので 上記と同じようにcは0になります コード3では、f2から戻されるアロー関数を変数f3に代入し、それを複数回呼び出します 呼び出しのたびに別々のクロージャーが生成されますが 外部への参照は、outer(f2)なので、同じcを参照していますので 複数回呼び出すとcをインクリメントします 一方でアロー関数内の変数sは、コード1や2の説明と同じでインクリメントされません
【関数はクロージャーか?】 クロージャーは関数ではありませんし 関数はクロージャーではありません 関数内をクローズにし、外部参照を持たせる、という仕組みをつくるための 関数、内部情報、外部参照ポインタのセットがクロージャーです 【言語は多数者が正しい】 f2で戻される無名関数をクロージャーと呼ぶ人がいるのは クロージャーの説明のために多用されていることで 無名関数をクロージャーと誤解してしまったり f1が外部からクローズ状態なので、f1がクロージャーなんだと そう理解してる人が多かったりしています クロージャーという言語の用法に関して 何が正しいのかは、それぞれの立場を主張する人数によって 決定することが正しいのかもしれません 以上で訂正とまとめを終わります
>>8 javascript.infoでは [ ]の前にセミコロンは想定していないため、前段と次段のコードが連続することが説明されてます console.log(1) [...'string'].forEach(console.log) は console.log(1)[...'string'].forEach(console.log) と同じ扱いで、1を出力したのち、エラーになります []を使うときに思い出してください クロージャーに「関数内部をクローズにする」なんて意味はないよ
||クロージャーは、組み合わされた(囲まれた)関数と、 ||その周囲の状態(レキシカル環境)への参照の組み合わせです。 ||言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。 ||(MDN) 「関数の内から関数の外を参照できる、参照権限(参照できる状態(仕組み))」ということだろ!!! これできめ!
クロージャは関数閉包のこと 関数の中に関数が内包された状態を指す 外側の関数をエンクロージャと呼ぶが、クロージャ=関数ではない
現在のスコープに変数が見つからなければ、どんどん外のスコープに変数を探しに行って 最終的にwindowまで探しに行ってくれる機能のことをクロージャと呼ぶ かな?
Promiseの状態(pending/fullfilled/rejected)って外から取得できないんだっけ? 探しても方法が見つからな。
MDNの訳が微妙すぎると思ったら原文も同じだった A closure is the combination of a function with references to its surrounding state. か A closure is a function bundled together with references to its surrounding state. のどっちかにしたかったんだろう
>>20 それは違う言語でしょ JSはグローバルも一つの環境としてるから グローバル内に宣言された関数も、囲まれた関数なんだよ グローバルを関数と呼ぶのなら、それはそれかもなんだけど それを読んでも統一見解が得られづらいからこうなってるってわかる?
でもまぁ一連のやり取りで 環境レコードや外部参照チェーンやスコープの復習ができたということで この部分に関しては、脱素人になったわけだ、おめでとー
canvasでcontext.lineWidth=1;にして直線を描いても幅が1にならなくて2ピクセル分の太さになってしまいます どうすれば幅1の直線が描けますか?
>>25 言語仕様に言及するのなら、「ECMAScriptにクロージャは存在しない」が正解 > グローバル内に宣言された関数も、囲まれた関数なんだよ そんな仕様はない クロージャなんて概念は忘れて、変数、スコープ、関数の仕組みを覚える方が正しい理解に繋がる >>30 整数座標はピクセル中央ではなくピクセル左上になるので0.5足す めんどくさかったらcontext.translate(.5, .5)するとか >>28 クロージャで統一見解といえるのは「クロージャ=関数が入れ子になった状態」だけ そこに機能的価値を見いだそうとするなら「クロージャという名の機能は存在しない」だ 機能的には別の機能で実装されていて、 関数を入れ子にした結果、それらの機能が便利な状況を作り出しているに過ぎない 学習目的なら「クロージャ」は忘れた方がいい 関数が入れ子かどうかなんて関係ないよ 理解してない人たち同士で"統一見解"を求めようとするからドツボに嵌ってる
>>34 仕様にない単語に、統一見解を求めるのが間違いなんだろうな とはいえ「クロージャ=関数が入れ子になった状態」って定義は明らかに間違いだろう。
ECMAの仕様にはAbstruct Closure Specification Typeが定義されてるし、関数定義周りでclosureって言葉は繰り返し出てくるよ まあでも仕様型みたいな大半の人が知らなくても困らないような詳細知識よりも クロージャとは一般的にどういうものを指すのかという基礎的知識を身につけたほうがいい
>>37 一般解を示す公式文書を出せる? ぶっちゃけ、言語が異なれば用語定義も変わると思ってるし、共通の用語なんてないと思ってる 複数言語習得者が勝手に共通認識を定義しているだけなのでは? JSのクロージャーは 関数内のプロパティに、外部から直接アクセスできないが 関数内から外部への参照はチェーンしているという状態をいう 外部Lexicalへの参照を持たない関数型は 関数ではあるけどクロージャーにならない 入り子になっていても もうクロージャはこれで終わり クロージャーに貴重な人生を奪われるなよ?
状態ではなく仕組みがいいな クロージャーはオブジェクトセットという表現が適してる例が散見されるみたいだし 必要なオブジェクトセットを使ってnativeでクロージャーを実現してるんだから クロージャーは仕組み!これできめ!
>>37 var a=0; let b=1; let c='C'; function func(){ let c=2; return [a,b,c]; } func.a='A'; console.log( [window.a,window.b,window.c], [a,b,c], func(), [func().a,func().b,func().c], [func.a,func.b,func.c] ); この出力を理解するにはクロージャーの仕組みの理解は必要でない? >>40-41 あなたの見解は理解した 正しさの根拠が見つからないのでそれだけだが すいません、下記のようにボタンを押した時の処理をあらかじめ一つずつJSで書いて書いてるんですが、 ボタンの種類と数が莫大な量になるとJSを書くのが大変になってきました 逆にクリックされた任意のボタンオブジェクトを変数に入れる方法ってあったりしますでしょうか (ボタンがクリックされる→クリックされたボタンのclassやvalueやtextを調べて目的の処理、という順番に変更したい) 下記が現状のコードです ・html <button class="BtnA" value="固有の番号">ボタンAタイプ</button> <button class="BtnA" value="固有の番号">ボタンAタイプ</button> <button class="BtnB" value="固有の番号">ボタンBタイプ</button> ・js const BtnA = document.getElementsByClassName('BtnA'); for(i=0;BtnA.length>i;i++){ BtnA[i].addEventListener('click', () =>{ //ここに押された時の処理を書く }); } const BtnB = document.getElementsByClassName('BtnB'); 以下BtnAのコードとほぼ同様
>>44 クラス数×value数×text種類数だけ処理数があるってことですか? class="BtnA BtnAll" class="BtnB BtnAll" みたいに、BtnAll で、すべてのボタンの処理をまとめれば? JavaScript のスレは、この板ではなく、web制作管理板の方へ書き込んでください! この板のスレは、荒らしが出た時に、緊急的に立てられたものだから
>>45 そのイメージに近いです >>46 ある程度まとめた結果が BtnA BtnB BtnCみたいなグループです。 了解です、Web製作管理板に移動させていただきます。 >>44 event.currentTarget event.target >>44 処理数が多すぎて管理効率が悪くなってるってことかな? ボタン数×(value数-1)×(str数-2)の数の処理があって 保守管理しづらいというのなら下記の考え方はどうでしょう? 変数buttonにはボタンオブジェクト 変数getFuncにはクリックイベント処理を固有番号で紐づける 変数buttonをfor of で回して、固有番号で分岐して、リスナーを設定する button=document.getelementsbytagname('button') getFunc={ 固有番号:function(){} 固有番号:function(){},,,} for(let i of button){ switch(i.value){ case '固有番号':i.addEventlistener('click',getFunc[固有番号]);break; >>44 上の説明だとわかりづらいかな let getButton=function(){button=document.getElementsByTagName('button');} // valueの固有番号毎に処理を設定 let addEvent=function(){ for(let i of button){ switch (i.value){ case '101':i.addEventListener('click',addFunc[101]);break;}}} let button; // 関数をまとめ置く let addFunc={ 101:function(){console.log(this.value)}, 102:function(){console.log(this.className)},} switchの中をObject.keys().forEach()でまわして addFunc[+i.value]で作り直したらすっきりしそう いじりたくなるコードだけど可読性を考えたらこれはこれなのか
リアクトでのスマホアプリ開発なんですが、エミュレータは何がお勧めですか? というのも実機を持っていません。 また、実機を使う場合はアンドロイド5などは使い物になりますか? 古い機種に合わせて作っても、上位互換性のないソフトになるんでしょうか?
>>52 「React andoridアプリ開発 エミュレータ」で検索どうぞ 「api16 開発 不具合 or 互換性」で検索どうぞ これがベストっていう答えがないから 開発者が自分で試行錯誤して答えを出す問題かな 互換性の問題は作るものによっても違うからね jellyならそんな問題ないとおもうけど >>53 すみません。互換性に関して見つけられなかったです。 android5向けに作った場合、上位互換性ってあるんでしょうか? javascriptのバージョン?次第とも考えられますけど androidの話はandroid開発スレで聞いてくれ 多分実機なしは無謀、5は古すぎでFA
そんなことはない android5で使えるアプリが目的なんだから android5で作成するのがベスト reactNativeエンジンがどうエンコードして androidで動かしてるのか分らんので 今のreactでandroid5のどの機能を使えるのか 全然わからんけどな
文字列化した数式を計算させるにはどうやればいいんですか? test("x*x+10",2); function test(suushiki_str,x){ var y = suushiki_str(この場合x*x+10)でx=2を代入; retuen(y) } こういうのがやりたいんだけど
function test(suushiki_str,x){ return eval(suushiki_str) }
何がしたいのか分からないけど、設計自体が間違ってる気がするけどなあ
eval is evil evalをそのまま使う事はまずないな
>>61 evalは非推奨だから function test(fun,x){ return fun(x); } test(function(x){return x*x+10},5); としときましょう evalって外部から入力させなければ使っても問題ないんじゃないの?
やっぱjavascriptできるとなんでも作れるな めちゃくちゃ便利だわ
ブラウザ限定だし HTMLと一緒でメンテナンスとか関係なければな もしJSで金融システムみたいな厳格なシステム作ろうとしたら 開発者はみんな気がくるってしまうんじゃないかな
マジでjavascriptだけでめちゃくちゃ儲けてる 使いこなせばガチで素晴らしい
仕事で使ってるサイトをJavascriptで自動化できませんか? たとえば出勤と退勤のときの時間を管理するのに「勤次郎」というサイトを使ってるんだけど 毎回ログインしたあといちいち入力するのが面倒くさい。
認証しないシステムなんて攻撃か踏み台にされるとか考えないのか
定型をポチポチ入力してボタン押すのがダルい程度ならブックマークレットでいいだろ
>>74 ブラウザを自動操作なら、iMacros は? 例えば漏れは、Ruby のselenium-webdriver で、 ブラウザを自動操作して、ヤフーにログインしてる ユーザー名を入力して、ボタンを押す。 パスワードを入力して、ボタンを押すとか require "selenium-webdriver" options = Selenium::WebDriver::Chrome::Options.new options.add_option( :detach, true ) # ブラウザを切り離す options.add_argument( '--start-maximized' ) # 画面最大 driver = Selenium::WebDriver.for :chrome, options: options driver.manage.timeouts.implicit_wait = 10 # default timeout driver.navigate.to "https://login.yahoo.co.jp/config/login_verify2?.src=ym" ; element = driver.find_element(:id => "username") element.send_key "ユーザー名" driver.find_element(:id => "btnNext").click # ボタンを押す element = driver.find_element(:id => "passwd") element.send_key "パスワード" driver.find_element(:id => "btnSubmit").click # ボタンを押す >>768 それだと数式を""で囲んで文字列にすると計算できない >>81 >>70 で答えてる eval非推奨な意味を理解していて使うならそれでいいんじゃね? >>61 function test(suushiki_str, x){ var f = Function('x', 'return ' + suushiki_str); return f(x); } test('x * x + 10' ,2); //=> 14 javascriptが使えるとやりたいことが簡単にできる
ブラウザで動く LambdaやGoogle Functionsで動く デスクトップアプリも作れる OfficeWeb版やGASでも動く インフラ構築不要で最強すぎるだろ
>>88 でも、文法が分かりにくい。 というか無駄に複雑過ぎる。 >>89 文法なんかふつう 複雑な意味がわからん ほかの言語だと単純なの? すいません、下記のように読み込んだshiftJISのcsvファイルを 正規表現を使って置換しようとしてるのですがうまくいきません 文字コードの問題なのか指定したマッチパターン意外の色んな文字が勝手に置換されてしまいます const requestCSV = new XMLHttpRequest(); requestCSV.overrideMimeType('text/plain; charset=Shift_JIS');//csvの文字コードがshiftJSであることは変更できない requestCSV.addEventListener('load', (event) => { const orgCSV = event.target.responseText; tempKey="["+key+"]";//keyは変数を使う必要があります keyName = new RegExp(tempKey, "g");//複数マッチさせる必要があります result=orgCSV.replace(keyName, "ほげ"); } 正規表現オブジェクトを使わずにreplaceさせると問題なく動くのですが、 マッチパターンを変数にしたいのと、複数回以上にマッチさせるため g をつけるため、 正規表現オブジェクトを使わざるを得ない状態です。 どなたかアドバイスお願いできますでしょうか
Javaと比べたらJavaScriptのほうが文法複雑じゃないと思うが… TypeScriptと混同してない?
それかDOM APIをJavaScriptの文法に含むと勘違いしてるとか
Javaのほうが圧倒的にすっきりしている。 ほんとに両言語をちゃんと勉強したことあるか? アルツハイマーでもこれくらい分かる。
>>94 古いJSとの互換性を取ろうとすると 古い文法も理解しないとならないからな オブジェクトの生成も多種多様 JSの細かいところまで理解しようとすると javaやpythonとかのほうが整理されていてわかりやすい let obj var objのLexicalの違いや let obj={} let fun=function(){} function fun(){} class cs extends fun{} class cs{ __proto__=a; } obj.constructor.prorotype=obj newObjext ,Object.create こんなのシンプルなわけがない と92はいいたんだと思う >>96 "["+key+"]" というようにカッコで囲んだ形式で検索したいのでここはあえてそうしてるんです… Java class Main { public static void main(String[] args) { System.out.println("Hello World!"); } } JavaScript console.log("Hello World!"); hello worldからしてこれだからな あなたの「シンプル」の定義を見せてもらえないと…
>>99 JSのクラスは疑似クラス 他言語のClassと同じように扱えるように functionを疑似的にclass表現できるようにしてるだけ Javaと異なりJSはconstructorを有するオブジェクトの生成方法が沢山ある それすら理解できずに、99の問いとは、、、もっとJSを勉強しようぜ Javaのほうが圧倒的に整理され覚える文法が少ない つか、JavaとJS、両方ともそこそこ使えたら 99みたいなこと言えないだろw >>99 もうちょっと言わせてもらえば Javaは変数エラーをチェックしやすい言語設計 JSは変数エラーを無限に生成し得る言語設計 JSはマークアップを動的に処理することから発生し 高度な言語設計にしても互換性の問題から 古い文法を生かしているので、とても複雑怪奇になっている そう表現したらわかるかな? >>98 上手く行かない具体例出してよ ぶっちゃけ[ ]の使い方ミスってる様な気がするんだけど >>103 置換した具体例で言うと例えば さっきの例で置換部分が result=orgCSV.replace(keyName, "ほげ"); 元のテキストが下記だとすると <title>[name]</title> 結果が下記になってしまってなんじゃこりゃ…て感じですね <titlほげ>[ほげaほげほげ]</titlほげ> 正規表現オブジェクトを使わなければ普通に成功します result=orgCSV.replace("[name]", "ほげ"); //<title>ほげ</title>になる しかし先述のようにマッチパターンを変数化しつつgをつけて複数置換する必要があるため難しいんです… >>104 tempKey="\\["+key+"\\]"; javascriptで計算の値がオーバーフロウするかどうかを調べるにはどうすればいいんですか? 例えば10000の10乗を計算しようとしてオーバーフロウするならばalertで計算できませんと 表示したいんだけど
>>100 なんでクラスの話に?詭弁では? クラスベースの奴らがうるさいからclassなんて入れる羽目になったんだが。 そいつらのせいで木に竹を接ぐようなことさせられてむしろ複雑になった。 プロトタイプベースとしてシンプルでよかったのにほんと独善的でろくなことしない。 Reactでもクラスコンポーネントは廃れ99%のケースでFCになったよ。 >>109 エセクラスベースは絶対に反対。 classは早期に非推奨にすべき。 >>105 >>107 ああ、なるほど、エスケープをダブルでつけないといけなかったんですね シングルではつけてみていたんですがそれで動かなかったのであれって思ってました 資料の提示もありがとうございます! >>102 その問いはマジ質問? >>109 JavaとJsの言語設計に関して どっちがすっきりしてるかを話ししてるだけだろ 疑似クラスなんてあること自体がお笑いだし オブジェクト生成方法も多岐にわたるとか どこが整理されてる言語なのかと 変数エラーでググっても出てこなかったです 何処の業界用語ですか?
>>104 Ruby では、Regexp.escape で、 正規表現において、特別な意味を持つ文字の直前に、 エスケープ文字(バックスラッシュ)を挿入した、文字列を返す p esc_1 = Regexp.escape( "[-a]" ) #=> "\\[\\-a\\]" reg_1 = Regexp.new( esc_1 ) p reg_1.match( "x[-a]y" ) #<MatchData "[-a]"> >>112 お笑いと言えばJavaの無名クラスだろ なんだったのアレ 関数がファーストクラスオブジェクトじゃなかった欠陥言語の苦肉の策とは言えとんでもなくキッタネェコード 今じゃラムダ関数使ってだーれも使ってないし 最初からそうしとけばよかったのにね ぜんぜん整理されてなかったのかな?w 言語の完成度はJava>JS 学びやすさもJava>JS だからと言って優劣を表現してるわけじゃないよ マークアップ操作言語として JS、HTML、CSS等との新旧互換性を担保しながら 成長してきた言語だから 継ぎ接ぎ言語になっているのは仕方ないこと JSでできることは多いし楽しい言語であることを否定してるわけじゃないんだ でもJSが整理されてシンプルな言語であるとは言えないってだけ
javascriptさえあれば何もいらん javascriptだけでスケーラブルなシステムが作れる
あまりにも面倒くさいため、誰もJavaでGUIを作らなくなりました。 やる気とAWT,Swingなど道具立てはあったのです。 ただJavaがクソ過ぎた。 イベントドリブンで必須のリスナー登録はこんな感じ(笑) button1.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { System.out.println("clicked"); } }); 一方C#ではデリゲートで簡単に書くことができました。 Javaはデリゲートが言語機能として無いのでマネできませんでしたw 結果今では誰もJavaでクライアントGUIプログラムを書きませんがC#はバリバリ使われてますw 結局Java8でJavaScriptをパクってlambdaで以下のように書けるようにしました(ハズカシーw) button1.addActionListener(e -> System.out.println("clicked")); しかし時すでにお寿司、誰もJavaでGUIを作っていないのであるwww Javaはサーバーサイドに集中して成功者? ノンノンw Javaが糞でめんどくさくて誰も書かなくなったから廃れた、これがシンプルな答えですw
Android StudioではまだJava言語で開発が必要だったような
0から9の入ったランダムの配列に適当に選んだnという数字が最大何個並んでいるか これはどういう方法が早いのでしょうか 気にするほどでもないのでしょうか 配列を見ていくのは遅いとか言う話も聞いたような気もします 一般的にはどういう方法を取るのでしょうか ・配列の前から順にforでnであるか、あればカウンターインクリメント、なければカウンターリセット ・joinで配列を文字列化したあとforでi文字数ぶんのnを検索文字として includesがfalseになるまでか最悪配列数まで調べる ・文字列化したあとmatchで/n+/gで一覧を出して一覧の配列をmap(e=>e.length)で文字数にしてMath.maxで調べる
コードはこんな感じでいいですか? https://jsfiddle.net/rj457v0q/ windows10 firefox 64bit 94.0.2のabout:newtabのコンソールでやった結果 11374, 1970, 2920 とかそれに似たような時間なんですが 同じ環境でJSFiddle に保存した際に実行された時間が 320, 1994, 2938 と1番目が早くなって結果が真逆になっています どういう事なんでしょうか IronというChromeベースのブラウザでも試したところ FirefoxからJSFiddleを開いてそこで走らせた時間と同じような結果になりました
element.addEventListener( "mousemove", function(e){alert(e.offsetX);} ); このfunction(e)の部分はfunction(aaa,e,bbb){}のように引数を複数設定することはできますか? e以外を渡すにはグローバルしかできないんですか?
>>123 Firefox の Math.max() が激重っぽい(1万回の関数呼び出しが重い?) 三項演算子とかにすれば JSFiddle と同じくらい早くなる >>126 ありがとうございます。 Math.maxを使わず、 配列のまま計算させたほうがいいみたいですね。 3つ目もMath.maxを使ってますが使わないようにしても、 こちらはMath.max関数の呼び出し回数が1周1回なせいか短縮されませんでした。 >>123 1つめのバグっとるよ 2つめのは連続する数が大きいのでも確かめないとパフォーマンス特性が分からない jsbench.meみたいなところで試すといい アルゴリズムのオーダー考えれば単純ループが一番高速 >>125 引数を複数設定できる。ただし、第一引数以外は何も渡されない。(デフォルト引数なんかの例外もある) thisを渡せる。bind()とhandleEvent()を含むオブジェクトで渡せる。 >>128 ありがとうございます サイトは次使う時に使って見たいと思いますw >>125 どんな使い方をするのか想定コードを教えて あと代入されるaaa,bbbの値はいつ確定する? 呼び出し時に確定するなら変数で置いとくしか無いし 関数定義する時点で確定してるなら引数にする必要が無い >>131 canvasの領域内をクリックしながらマウスを移動させたときの canvas内のマウスの座標を得たいんだけど mousedownでvar clickcyuu = 1;mouseupでclickcyuu=0; mousemoveでclickcyuu===1ならばdrag_mouse_x = e.offsetX;drag_mouse_y = e.offsetY とやりたかったのでfunction(e,clickcyuu){}としたかった >>132 それだと結局グローバル変数参照してるのと同じじゃない? わざわざ引数経由する理由がない 定期的にaddEventListener自体から引数渡したいって人出てくるけど 仮にできたとしてもaddEventListenerした時点で値が固定されることが考えから抜け落ちてるよね >>132 引数渡したいならイベントハンドラに関数式使えば済むけど 複数のイベント仕込むなら一連の動作をこんな感じでclassかオブジェクトにした方が楽よ https://jsfiddle.net/hgro7t5m/ クロージャ使えば普通にできるやろ それに参照型ならaddEventListenerした後からでも値を変えられるよ
>>135 オブジェクトを束縛すれば、プロパティは固定されない(>>129 ) handleEventも使ってみればその有用性に気がつくと思うが 読み込みたいファイルのパスだけがわかっている場合に reader= new FileReader(); reader.readAsText("aaa/hoge.csv") ; みたいな感じで読み込もうと思ったんですが、 readAsTextの引数はblobだかfileオブジェクトでないとだめみたいで、 レファレンスを読んで見るも、 パスからblogだかfileオブジェクトだかを作成する方法がわかりませんでした。 ファイル読み込み自体は他の方法を使ってできるものの、 FileReaderとreadAsTextの組み合わせを使ってトライしてみたいので どなたかアドバイスお願いできますでしょうか
>>139 それが出来たら、ファイルの情報を盗み出せるようになるな >>140 例えばxmlhttpRequest()でもパスからファイルを読み込むことが出来るので FileReaderでそれが出来ないのは不思議な気になるんですがそういうものなんですかね >>141 xhrは基本的にhttp接続しか出来ない ガチでヌーブなんですけどrequestsとbeautifulsoupでスクレイピングやってます waitかけないとバンされるよと言われましたがどうすればいいですか? requests.get()でtimeoutは今書きましたがforで同じサイトの似たようなページに何度もアクセスするのでサーバーへの負荷はすごいと思います これに対してどうすればいいですか?
const test = [ {main:"A"}, {main:"B"}, {main:"C"} ] から全てのmainをとり出した["A","B","C"]となる配列を作りたいです forを使えば作れますが、もっと簡単に作れる便利なメソッドあったりしますか?
const test = [ {main:"A"}, {main:"B"}, {main:"C"} ] let testB = test.map(e=>e.main) 知っててコレジャナイ方法をきいてるのかもしれないけど
>>148 自分もそれやってたけど不可能なので質問しましたが どうやらqueryselectorAllにmapが効かないっていうのが原因だったみたいです すんません querySelectorAllの戻り値はArrayではなくNodeListだからね hoge = Array.from(test).map(e => e.main);
hoge = Array.prototype.map.call(test,e => e.main); とか
PythonのコードですがどなたかJavascriptに直して下さい… sorted(pts, key=clockwiseangle_and_distance) import math pts = [[2,3], [5,2],[4,1],[3.5,1],[1,2],[2,1],[3,1],[3,3],[4,3]] Origin = [2, 3] refvec = [0, 1] def clockwiseangle_and_distance(point): vector = [point[0]-Origin[0], point[1]-Origin[1]] lenvector = math.hypot(vector[0], vector[1]) if lenvector == 0: return -math.pi, 0 normalized = [vector[0]/lenvector, vector[1]/lenvector] dotprod = normalized[0]*refvec[0] + normalized[1]*refvec[1] diffprod = refvec[1]*normalized[0] - refvec[0]*normalized[1] angle = math.atan2(diffprod, dotprod) if angle < 0: return 2*math.pi+angle, lenvector return angle, lenvector
すんません var hoge = test(); //←2個入った配列が返ってくるヤツ var A = hoge[0]; var B = hoge[1]; って書いてます。 これもーちょっとカッコよく var A B = test(); って感じで一行でAとBに変数に入れる方法とかあります?
var hoge = [1,9]; var [A,B] = hoge;
>>156 うおーすげー天才 ありがとうございます! var obj={ key:{x:200,y:300} } obj.key2=500; alert(obj.key2); alert(obj.key.x); 上はオブジェクトで下はオブジェクトのオブジェクトです。 実行結果は上が500で下が200です。 一応動作はしますがこのような使い方は間違っていますか?
>>158 「間違っている」は「期待する動作」によって決定される それをあなた自身しか知らないので、第三者による判断は不可能 >>160 文法は他人に聞くまでもない コンソールにSyntaxErrorが出力されていなければ、文法的に問題ない 何に引っかかってるのか書かないと期待してる答えは返ってこない 特に変なところないし
引数が多い場合の引数の渡し方について function( aaa, bbb, ccc, ・・・(略) zzz ){} って書くより function(obj){ var aaa = obj.aaa; var bbb = obj.bbb; ・・・・・(略) var zzz = obj.zzz; } って書く方がいいんでしょうか? どっちもメリット、デメリットはあると思うけど
>>163 何でこう無条件に善し悪しを求めようとするかね メリット、デメリットがあるなら、どちらが良いと決めつけることは出来ないと判断出来ないものなのか 下のほうなら const f = function({aaa, bbb, zzz}){ console.log(aaa, bbb, zzz); } のほうが分かりやすくないか const o = { aaa: 'あ', bbb: 42, zzz: 'ん', }; f(o);
>>136 形だけひとまとめにしても後でバラすんじゃなんの意味もない objとかじゃなくて意味のある名前が付けられる範囲でまとめるべき var str="x^2 + (x+2)^2 - (x*(x-2))^3"; をMath.pow(x,2)+Math.pow((x+2),2)- Math.pow((x*(x-2)),3)に置換するにはどうやればいいんですか?
Math.powを使わなければ簡単なんだけどね eval(str.replace(/\^/g, '**'));
スペース含まない半角文字列限定。式の文字列つくるまで。 賢い人ならもうちょっとスマートに書けるかと。 var str="x^2+(x+2)^2-(x*(x-2))^3"; function func(s){ var s2=s.split('^'); var s3=s2[1].replace(/¥d+/,""); return "Math.pow("+s2[0]+","+s2[1].replace(/[^¥d]/,"")+")"+s3; } var result=str.replace(/[a-z¥(¥)¥d¥*¥+¥-¥/]+¥^¥d+([¥+¥-¥*¥/]|$)/g,func);
いつもはreplaceやmatchを使うんだけど、 execってのがキャプチャグループだけを簡単に抜き出せて便利そうだから使ってみました txt="AabBxxB"; pattern = /A(.*)B/; d=pattern.exec(txt); alert(d[1]); 期待する結果はab でも実際はabBxxが返ってきます、後方参照ってやつですか?一番後ろのものとマッチしてしまう これって最短距離でのマッチを取得するにはどうすれば良いんでしょうか?
ぱっとしかみてないけど pattern = /A(.*?)B/;
>>173 >>174 ,175 ありがとうございます なるほど、*も+も?も単体で使うと最長一致になるけど *?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい… 【環境】Windows 7 64bit, IE11 【何をしたのか】 $("form")で取得している内容が自分の考えと正しいかを確認したい 1. alert($("form")) → [object Object]と表示される 2. alert(JSON.stringify($("form"))) → IEが動作を停止しましたで強制終了 【エラーメッセージ】- 【期待する結果】 $("form")の中身が確認したいです 手段は選びません console.log()は試していませんがshowModalDialogにて新規で開かれるウィンドウが描画されるまでに行われる処理のようで、コンソールを開く前に終わってしまうためalertで今は試しています 【サンプルコード】 $("form").attr("name");
>>179 自分は取得しているものが<form 〜>であると思っています なのでHTMLが確認したいです 試してみたらfirefoxだと強制終了しないね IEは消したからわからん
>>179 試してないconsole.logやconsole.dirでいいと思うが、まず試してみては? コンソールはモーダルウインドウが開いてなくても関係ない あなたがほしいのは$("form")[0]な気はするが モーダルウインドウ上でコンソール出力しようとせず、モーダルウインドウを開くページから参照するとか、breakpointで止めるとか、モーダルウインドウを閉じるコードを一時的にコメントアウトするとか モーダルウインドウを使わないのが一番だが 、Win7を使ってるならインターネットに接続してないのだろうし、相当特殊な環境だな
>>181-183 ありがとうございます >>182 ,183 お察しの通り過去に作られたIE用のシステムをEdgeに対応する必要があり、 現時点では当時の開発環境(VS2012)でデバッグ実行しています JavaScriptに関わるのが初めてでとにかく動かして覚えようとしているところです $("form")[0]は明日試してみます console.logなどを試していない(諦めた)理由は、 動作として、親ウィンドウからshowModalDialogで子ウィンドウを開く →子でデータを選択する→親に選択したデータが入力される という流れになっており、 親画面でF12のコンソールを開いておいても子が開かれるとモーダルにより親画面のコンソールも触れない ので諦めたんですが、もしかしてピン止め外すと止まらないんですかね? ピン止めした状態でしか動かしてなかったので明日試してみようとおもいます >モーダルウインドウを開くページから参照するとか、 ウィンドウ間のやりとりがまだよくわからないのでその発想に至れませんでした >breakpointで止めるとか、 showModalDialogで開いた後に処理される関数に貼ってみたんですが 張っていないshowModalDialogの行で止まって、関数の中をステップ実行できなかったんですよね… 関数の最初にdialogArgumentsを参照してifで分岐するんですが showModalDialog以外で呼ばれるときはステップ実行できるのでそういうものなのかと諦めました >モーダルウインドウを閉じるコードを一時的にコメントアウトするとか その発想はなかったです 今後のデバッグに使ってみます ひとまず、$("form")[0]とピン止めを試してみます html5のcanvasについて質問です drawImageでこの画像をcanvasに描写した後、画像の白い部分だけを赤くマスクしたいです ctx.globalCompositeOperation = 'destination-in'; や c2.globalCompositeOperation = 'darken'; を使うとオシイのですが、どうしても黒い箇所が赤くそまってしまったり、明るい方が優先されてしまったりします 何か良い手はないでしょうか? JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。 そのため、以前できなかったことは、今でもできません。 クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。 prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。 class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。 でも理解したら、わざわざclassを使う必要がない気がします。 使いたければ使えばいいんじゃない?と思います。
>>186-187 自問自答? 使いたくなければ使わなければいいと思うが、定期的にネガキャンするのは無駄なので、止めて欲しい >>82 ,110 JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。 そのため、以前できなかったことは、今でもできません。 クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、 誰にとってわかりやすいかいまいち不明。 prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。 class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、 勉強にならないですね。 でも理解したら、わざわざclassを使う必要がない気がします。
>>179 const form = $( 'form' ) console.log( form.length, form[ 0 ] ) HTML 内に、フォームが1つしかないなら、 form.length は1 で、form[ 0 ] でform 要素を取得できる <form action="" id="form_1" name="form_1"> みたいに、id を付けた方が良いかも そうすれば、これで取得できる const form_1 = $( '#form_1' ) まあ、HTML, JavaScript, jQuery の質問は、 この板よりも、web制作管理板の方へ書き込んでください 向こうのスレが、本スレです 今は、class を使う 今さら、prototype を使う人は、いない
中がprototypeだとか別に関係ないだろう。外から見てclassとして振舞うならそれでいいわけだし。 classとしての振る舞いに何か問題があるならそこは注意すべきだが。
みなさんjavascript何年目? オレは2年。
昼食が3億!?AppleCEOや投資の神様とのランチ権オークションがすごい スティーブ・ジョブズが亡くなった後にAppleのCEOになったのがティム・クック氏です。 そんな彼との1時間のランチ権が今年4月から5月にかけてCharitybuzzというオークションサイトに 出品され、$515,000(約5,150万円)で落札されました! 実はクックは過去にも同様の出品をしていて、今年の出品で4回目となります。 2000年からこれまでに計17回出品されているのが、「投資の神様」とも呼ばれるウォーレン・バフェット氏 とのランチミーティング権。2003年からは、世界最大級のオークションサイト「eBay」で毎年開催される チャリティー・オークションのひとつとして出品されています。 今年6月に出品された際には、なんと$3,456,789(約3億4,568万円)で落札されました!
fc2ブログを使用しているのですが、javascriptが動かない設定などあったりするのでしょうか? <script type="text/javascript">alert("hoge");</script> また、動かない原因をブラウザの検証から調べる事はできますか?
文字数の制限をしたいのですが、htmlでoverflow hiddenするのとjsでカットするのはどちらがいいんでしょうか? ブログのトップページなんですが、本文の1部を表示させておいて、続きを読むというリンクを設置したいなと。 <div id="text">123456789</div> <script> let text = document.getElementById("text"); let inner_text = text.innerHTML; let text_length = inner_text.length; let max_length = 5; if(text_length > max_length){ console.log("5文字超えてます"); text.innerHTML = inner_text.substr(0,max_length); } </script> これで動きはしましたけど
x=<span id="x">0</span>,y=<span id="y">0</span> <p> </p> <div style="text-align:center"> <canvas id="canvas"></canvas> </div> <スクリプト> var canvas_elm = document.getElementById("canvas"); var x_elm = document.getElementById("x"); var y_elm = document.getElementById("y"); var context = canvas_elm.getContext("2d"); canvas_elm.width = 600; canvas_elm.height = 500; context.fillStyle = "#0000ff"; context.fillRect(0,0,canvas_elm.width,canvas_elm.height); canvas_elm.addEventListener( "mousemove", function(e){ x_elm.innerHTML = e.offsetX; y_elm.innerHTML = e.offsetY; } ); </スクリプト> canvas上でのマウスやタッチポインターの座標を表示したいんですけど、、PCではこれで座標が表示されるけど mousemoveをtouchmoveにしてchromeでF12キーを押してスマホモードにしてタッチポインターを動かしたときxy座標がundefinedと表示されてしまいます。 スマホモードでもポインターの位置を表示できるようにするにはどうやればいいんですか?
スマホなど、色々なデバイスに対応させるのは、 React, Vue.js などのフレームワークを使うのでは? それと、JavaScript の質問は、この板よりも、 web制作管理板の方へ書き込んでください! この板のスレは、荒らしが出て、緊急避難用に立てたものだから
>>201 Ruby on Rails では、続きを読むのは、truncate(文字数)。 Railsがどういう実装をしているかまでは知らないけど npm とか、Lodash とかに、そういう関数が無いのか? 「javascript 続きを読む」「css 続きを読む」で検索してみれば? >>202 タッチイベントにはevent.offsetX, event.offsetYはありません event.changedTouches[0].pageX等から計算してください 質問1 element.addeventlistnerとdocument.addeventlistnerの違いは? 質問2 function(elm){ elm.addeventlistner( "click", function(e){alert("クリック");} ); } のような関数がある場合document.addeventlistnerの場合はelementがないので個別に関数作らないとだめなのか?
外側・親に、イベントを付けて、親で、子のイベントをキャッチできる。 jQuery で書いた <div id="btn-wrap"> <button class="BtnA BtnAll" value="1">A-1</button> <button class="BtnA BtnAll" value="2">A-2</button> <button class="BtnB BtnAll" value="3">B-3</button> </div> // 外側・親に、イベントを付けて、親で、子のイベントをキャッチする $( '#btn-wrap' ).on( 'click', function ( event ) { console.log( $( event.target ).prop( 'value' ) ) } ); この板よりも、web制作管理板の方へ書き込んでください! そちらの方が、本スレです
>>208 1. 対象要素が違うだけ。バブリングによって「あらゆる要素」のイベントをトラップしたい場合は後者を使うといい(一般的には普通は比較的近いコンテナ要素でトラップするもんだが...) 2. その関数なら共通でOK >>209 本当に誘導したいなら、せめてリンクを貼りましょう このスレで質問しても何の問題もありません 荒らしやアフィリエイト宣伝業者に騙されて誘導されないようにしてください
>>208 回答1 event.currentTargetが異なる 回答2 e.targetを確認すれば良い >>209 Web制作板でも次スレが立たず、旧スレを再利用してる状態 本スレなど存在していない 本気で本スレに誘導したいなら、最新スレを探して次スレを立てて保守すべき それぐらいの情熱がある人はもういないと思ってたが、あなたがそうしたいのなら止めはしない この板のスレは元々、web制作管理板が荒らされた時に、緊急避難用に立てられたもの。 本スレは、向こうの方 この板は荒らしが多い 荒らしは短文で、必ず2回書き込む。 複数回書き込むことで、多くの人が書いているように見せる それと、テンプレをしょっちゅう、自分が有利なように書き換える Python のスレのテンプレとか、ひどい。 NGワードは何々とか、しょっちゅう書き換えている まあ、ソースコードを書かない香具師は、 プログラマーじゃないから、相手にしない方がよい
window.onload = function(){ } このfunctionって何の意味があるんですかね?
>>217 変数に関数を入れられるんですよね。 処理を直には入れられないから、関数で包むとイメージなんでしょうかね。 <div class="content"> <h2>header2</h2> <h2>header2-2</h2> <h2>header2-3</h2> <h2>header2-4</h2> </div> <script> let content = document.getElementsByClassName("content"); let all_element = content.querySelectorAll("h2"); console.log(all_element); </script> gebcnで取得したターゲットにqueryselectorは使えないんでしょうか? idで取得したものなら可能なんですけども。
>>220 contentはgetElementsでHTMLCollectionをとってるので content[0]とかにすればでるんじゃない? >>221 返り値が違うんですね。 要素だけを取ってくるもんだと思っていました。 ありがとうございます。 エレメントしかいらないのならid使ったほうが良いみたいですね
document.querySelectorAll(".content > h2"); でよくね?
こういった場合クラスを使うんでしょうか? cssではidは出来るだけ使わないということになっているらしいですが
できるだけ使わないというか詳細度に関わる 1ページ一回というユニークルールもcss使い回しに不向き
>>224 そうやって書けるんすね html collectionの構造がよくわからんくて >>224 いや、これだめでしたね nodelistは帰ってきますけど、h2はとれてないです Android10 F-51A Chrome 93.0.4577.62 ブラウザ上での画像についての質問です。 画像自体は恐らく読み込めているようなのですが、全く映らないか、映っても一瞬で消えてしまいます。 エラーメッセージは出ません。 ファイルマネージャーというアプリから起動すると、正常に動作します。 考えられる原因、解決案は、例えば何があるでしょうか。 絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。
>>229 最初の一個だけでいいなら let all_element = document.querySelector(".content h2") >>231 情報が少なすぎて詰めきれません。もう少し詳細な情報を提供できませんか? (まず、JavaScriptはどのように使用していますか?) >>233 スマホアプリの「QuickEdit」というテキストエディタで制作しています。 そういう意味じゃなかったらごめんなさい。 $Game_Image_Data = []; $Game_Image_Data[0] = new Image(); $Game_Image_Data[0].src = "image/player.png"; これで「$Game_Image_Data[0].src」をアラートで出力すると、こうなります。 >>232 どうも。今回はindex使うことにしてみます。 可能な限り絞り込み? ました。 検証にご協力していただける方は、「imageフォルダに適当な「player.png」の画像を挿入して、実行してみてください。 ここまである程度余計な要素を取り除いたので、流石にこれならいけるんじゃないか? と思ったのですが、自分の環境ではやはり駄目でした。 よろしくお願いいたします。
<! html> <html> <head> <meta ="utf-8"/> <title>No_Name_Game</title> </head> <body> <div id="Original_Game_Windows"> <canvas id="Game_Main_Window" width="640" height="480" style="background-color:#000000;"></canvas> </div> <style> body { margin: 0; padding: 0; } #Original_Game_Windows { width: 640px; height: 480px; position: relative; } </style> </body>
>>236 サーバーに画像アップロードしないとだめですよ? >>239 もちろん承知しています。 それで試しても駄目でした。 >>243 この文章って、そういう意味なのですか? てっきり、アクセスは出来てるという意味だと勘違いしていました。 勉強不足で申し訳ありません。 ただ、今回は確実に、ちゃんと画像もフォルダ内にアップロードしたのですが、上手く行きませんでした。 >>245 ありがとうございました。 私が馬鹿すぎました。 ネタでやってたんじゃないです。ガチです。お騒がせしました。本当にありがとうございました。 >>245 報告までに。 一応確認したところ、無事成功しました。 ありがとうございました。 >>229 const elems = document.querySelectorAll(".content > h2"); console.log( elems, elems[ 0 ] ) これで、4つのh2が、ちゃんと取れている NodeList(4) [h2, h2, h2, h2] NodeList <h2>header2</h2> この板よりも、web制作管理板の方で聞いた方がよい。 向こうのスレが、本スレだから そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。 基本的に、ソースコードを書かない香具師は荒らし 「Ruby, Rails, クソチョン」などを、NGワード登録推奨とか、 自分が有利なように、いつもテンプレを改変する 荒らしがスレ主として、居座っているので、 まともな人がスレ立てして、テンプレも元に戻した方がよい 荒らしは必ず、短文で2回以上書き込む。 必ず、複数人がいるように見せかける
>>250 「本スレはない」といっても伝わってなかったんだな >>213 Web制作板のスレは長らく次スレが立ってない 複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ 利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない 繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している Web制作板のスレを追いかけてきたなら知ってるはずなんだがな >>250 本気で誘導したいならリンクを貼りましょう 昨日はお世話になりました。 二日連続になって申し訳ないのですが、質問させていただきます。 localStorageに保存しておける文字数って、あんまり多くないのでしょうか? 2000×400字ほどで、エラーが出てしまいます。 2000×300字だと問題なかったので、やり方じゃなく文字数の関係なのかと思ったのですが、どうなんでしょうか。 ちなみに、配列、オブジェクト型データです。
変数や関数名の迷わない命名ルールってありますか? 変数は名詞、関数は動詞とは聞きますね。
>>257 DOMEException { stack ~ってエラーです。 >>259 exceeded the quota(割当超過)で確定 サイズ減らすかindexedDB使うか >>260 回答ありがとうございます。 サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。 >>261 回答どうも。 規則というか命名ルールみたいなものが知りたいなと。 迷ってる時間が無駄になっているので。 すいません、アホな質問かもしれません。 マウスの右ボタンクリックで独自のサブメニューを表示したいと思います。 この場合は JavaScriput が必須で、CSSでは出来ないという理解で良いでしょうか。
仕事関係なのと、JavaScript は全くの初心者なんで聞き辛いのですが、 【環境】 Raspberry Pi OS Ver10.11 【期待する結果】 文字列の後ろに 1バイトの値を付加したい。 シリアルで受信したメッセージから特定の値を抜き出して別のユニットにシリアルで送信 します。見様見真似とネットで調べながら、 set_Message: function (message) { const _STX = '\x02'; // STX const _ETX = '\x03'; // ETX // 送信フレーム生成 var frame = _STX + message + _ETX; // BCC 生成 var idx = 0; var bcc = frame.charCodeAt(idx++); do { bcc ^= frame.charCodeAt(idx++); } while (frame.charAt(idx) != ''); var buff = new ArrayBuffer(5); var BCC = new DataView(buff); BCC.setUint8(0, Number(bcc)); // 送信実行 var command = "echo -n " + frame + " > " + TTY_USB; execsyncs(command); command = "echo -n " + BCC.getUint8(0) + ',' + (bcc - 0) + ',' + Number(bcc) + ',' + parseInt(bcc, 10) + " > " + TTY_USB; execsyncs(command); return; } 関数を作成、ブロックチェックコード BCC を計算させました。BCC を最後に付加したいのですが、 どれも値が 2バイトの文字列になってしまいます。"JavaScript" + "文字列を数値に変換" とかの キーワードで検索しながら試行錯誤していますが、単純な数値にするヒントを頂ければ幸いです。 組み込みプログラマーなので、C と、C++ が少しわかります。
>>263 ruleは日本語で規則 あなたのいう命名ルールと俺のいう命名規則は同じ 名前なんて違反しなきゃ好きにつけりゃいい 俺は長くなっても意味がわかる命名派 vとかiとか一文字の変数や定数を好む宗教も強い
>>264 menu要素は非推奨になったし、JavaAcriptしかないのでは 少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する 独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ 独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが >>268 の誤字修正 × JavaAcriptしかないのでは ○ JavaScriptしかないのでは >>268 ありがとうございます! Javascriptを使う必要がある件、了解です。 以前に .net で作ったWindowsアプリをWebアプリに移植しています。 Table上の特定のセルを右クリックしたら独自メニューが表示される仕様になります。 それ以外の場所では ブラウザ標準のコンテキストメニューが表示出来るようにしたいと思っています。 やり初めて間もないのですが、覚えることが多すぎて恐ろしい世界ですね。Webアプリとは。 Javascriptでやるにしても、JQueryかVueかReactか、どれでやるべきか・・・ バックエンドは Djangoですが、自分ひとりでやらないといけないので かなりの修行になりそうです。 あと、AWSのデプロイとか Dockerとか・・・・ 初めてのことばかりで・・・ >>271 デスクトップアプリとWebアプリの一番の違いは実行環境が複数存在していることだろうな クライアント環境を指定出来る社内向けWebアプリならブラウザを制限できるが、Webアプリを公開するなら、クロスブラウザが必須 デスクトップOSだけでもChrome,Fx,Edgeの対応が必要となる (Operaもあるが、シェアが小さい) モバイルOS版のブラウザも含めると更に大変になる 実装状況はcaniuseやMDNの互換表を見ると、ある程度は分かる https://caniuse.com/ JavaScript標準の書き方を覚えてから、ライブラリ、フレームワークに手を付けるのが良いと思う jQueryから入った人はDOMの知識が浅くて見当違いの質問をする事が多い Vue,Reactは完全に別世界だが、DOMやECMAScriptの文法を理解してないと辛い JavaScriptの基礎はおさえておいて損はない 最も、バックエンドが未着手なら、バックエンドの習得が先かと JavaScriptもまとめて学習すると、おそらく混乱する table要素の特定セルのコンテキストメニューの独自化なら大丈夫だと思う Google スプレッドシートのWebアプリを想起した >>272 アドバイス ありがとうございます。 ほんとうに助かります! 幸い 社内関係者が使用するだけの業務用アプリなので ブラウザを限定して開発することが出来ます。 JavaScriptの基本をおさえるほうが良い件、了解です。 入門本を買ってきて 勉強してみます。 バックエンド(Django)はなんとか目処が立ちそうです。 いやぁ、本当にWebアプリの世界はすごい(難しくて 複雑)と思いました。 おまけに技術の変化が激しそうだし・・・ がんばります! >>273 クライアント環境を制限できるなら、デファクトスタンダードのGoogle Chromeがお勧め 次点でレンダリングエンジンが同じMS Edge ブラウザシェアはIE1強時代と比べて、大分変わったな… https://gs.statcounter.com/browser-market-share/desktop/japan/2021 確かに技術の進化はあるが、Web技術は後方互換性重視の設計思想なので、非推奨機能を使わなければ、大半の機能で半永続性が保証されている HTML3.2は現代のブラウザでも動作するし、ECMAScript3は現役だ つまり、古いバージョンから新しいバージョンに更新し続ける必要はない ただし、これはWeb標準機能に限定した理屈でブラウザの独自拡張機能は別 その昔、IEのActiveX機能を使用した社内向けWebアプリはIEが終焉を迎えるとともに、他ブラウザへ移行するために改修を余儀なくされた 現在は昔と比べてブラウザの独自拡張機能が少ないが、ないわけでもない Web標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い >>265 Uint8Arrayとかそういう話じゃなくて? 昨日から何度も失礼します。 ご提示いただいたindexedDBについて調べて、最初、コピペせずに 自分で打ち込んだら、何度修正してもトランザクションでエラーが出たので、 次に某所のコードをコピペしたら、このようなエラーが出てしまいました。 制作環境がスマホでは、トランザクションというか、indexedDBを扱うのは無理なのでしょうか。 スマホの制作環境わかる方少ないかと思いますが、アドバイスいただけたら幸いです。 indexeddbは直で扱うのはしんどいからライブラリ使うといい localstorageの代わりとして使う程度ならlocalforageがおすすめ
>>275 BCC[0] = bcc; BCC[1] = Number(bcc); BCC[2] = parseInt(bcc); command = "echo -n " + BCC[0] + BCC[1] + BCC[2] + " > " + TTY_USB; execsyncs(command); としてみましたが、どれも 2文字の文字列で出力されてしまいます。コマンドを作る際の連結で文字列にされている感じでしょうか? 昼過ぎに質問を書き込んでから、const _BCC[ '\x00', ~ '\xFF' ] の 256バイトの配列を作成、_BCC[bcc] として目的の値が出力出来る所まで辿り着いたのですが、処理としてはチョット恥ずかしい感じがします。 >>280 消しすぎてました。試したのは、 var BCC = new Uint8Array(bcc); BCC[0] = bcc; BCC[1] = Number(bcc); BCC[2] = parseInt(bcc); です。 >>280 変数commandはString型なので、そこに含まれる値は全てStrong型に変換される String(10) === "10" 1バイトの文字が必要なら、ASCIIコードの範囲で1文字になるよう調整する必要がある >>265 String.fromCharCode(bcc) ではだめなの?(UTF-16だけど) >>282 >>283 有難うございます。 String.fromCharCode(bcc) で目的が達成出来ました。 これで巨大な変換テーブルを人目に晒さずに済みました。 精進いたします。 >>271 スレ立てるまでもない質問はここで 158匹目 http://2chb.net/r/tech/1635193843/538 ここに、YouTube で有名な、雑食系エンジニア・KENTA のサロンの、 Ruby on Rails 初心者用コースの内容を書いておいた 基本的に、Rails以外のフレームワークは、シェアが少ないのでおすすめしない。 学習環境も揃わないので、無理 Railsでは、Railsチュートリアル・Railsガイド・ 黒田努の3冊の本・パーフェクト Ruby on Rails・Ruby on Rails 6 エンジニア養成読本とか、 Rubyでは、改訂2版 パーフェクトRuby・改訂2版 Ruby逆引きハンドブックなどの教科書が揃っている これほど、良い教科書が揃っているフレームワークはない! Laravel のシェアは少しあるけど、KENTAがPHP は一生やる必要がないと言ったので、 PHP自体がオワコンになってしまったw 日本のウェブ開発の将来は、ほぼKENTAが決めている。 Scala を滅ぼしたのも、KENTA <table style="width:3000px;background:#ff00ff"> <tr> <td>aaaaaaaaaaaa</td> </tr> </table> <div style="position:fixed;top:50px;left:200px">x=<span id="x">0</span></div> setInterval( function(){ document.getElementById("x").innerHTML = window.pageXOffset; } ,100 ); PCだと左右スクロールさせたときちゃんとwindow.pageXOffsetが表示されるけど スマホだと右スクロールの場合は0のまんまで左スクロールの場合だけ表示されます。 スマホでもスクロール値ちゃんと取得できるようなやり方はありますか?
>>287 scrollイベントでなく、setIntervalを使う理由が何かある? scrollしてない時にも常に監視したらバッテリの持ちが悪くなりそうだが >>277 おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。 トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。 しかし、 https://ideone.com/IKQkII このコードの59行目くらいで、自分のスマホだとエラーが起きるところまではわかったのですが、解決案がわかりません。 アドバイスいただけたら幸いです。 >>291 このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。 なので多分ミスはないんじゃないかと思うんですが……。 昨日も薦められましたが、localForageと言うのも少し調べてみます。 それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、 イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。 >>292 そういう事であればPouchDB一択。 サーバと同期してマスタ撒いたりできる。 サーバはIBM CloudantってDBaaSがあるよ。 >>293 ありがとうございます。 こちらも調べてみます。 >>288 1:ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから 2:setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから 3:addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから 連日すみません。 new Objectしたデータ(以下〇〇〇〇とします)をindexedDBで格納しようとしたのですが、 〇〇〇〇[0].nameで実行するとちゃんと格納されたようで 名前を表示してくれるのですが、〇〇〇〇[0]や〇〇〇〇で実行すると、エラーが出てしまいます。 名前などは表示されるのだから、forで無理矢理全部やろうとしたら、indexedDBでは前のデータに上書きされるようで、上手く出来ませんでした。 この〇〇〇〇を格納出来うる解決案などありましたら、教えていただけると幸いです。 連日すみません。 >>287 次のコードを先頭(<head>部)に追加する。 <meta name="viewport" content="user-scalable=no" /> >>296 >>1 (6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。 ※必ず「問題の事象が再現されること」を確認してください。 必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。 >>297 さんはじめ、皆様失礼しました。 コピペ部分除いて、自分が好きなように書き殴ったコードなので、 出来るだけ見せたくなく、あのような半端な質問になってしまいました。申し訳ありません。 現在進行形でサンプルコードを作成していたのですが、打開案が見つかりそうな気がしたので、もう少し自力で頑張ってみます。 >>296 についてですが、どうやら、データの一つ一つに割り当てた画像の部分を削除すると、上手く機能するようなのですが、 IndexedDBでは、文字列などのオブジェクトと画像は、同時に格納出来ないのでしょうか。 出来ないのであれば、相当な量の手直しが必要になり非常に困ります。 制作開始時期にほんの少し調べて、localstorageで出来るんだな、と高をくくってセーブを後回しにしてしまい、後悔ばかりです。 Ruby on Rails では、画像の保存に、libvips かImageMagick も使う。 それで画像を変換したり、サイズなどをチェックする チェックしないと、サイズが少なくても、 1px × 10,000px みたいな極端な形状を送られて、 サーバーを攻撃してきて落とされる だから、縦横もチェックしないといけない Railsみたいなフレームワークを使っていない人は、 ウェブサービスを作るのは無理だと思う フレームワーク側で自動的にチェックされる機能を、 すべて自分で作らないといけないから
>>303 >ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。 なんかまた妙な事をやろうとしてるな 普通はimgフォルダを作って、そこに歩行グラフィックとかを格納する 実装部分はキャラクターの状態に合わせてグラフィックを呼び出す、みたいな感じにするぞ >>304 何となくですが、普通どうするのかわかったような気がします。 アドバイスありがとうございます。 単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい 何が目的でそれを使うのかよく考えないと訳わからんコードになる
動作環境は、Android10 F-51A Chrome 93.0.4577.62 です。 最初の質問だった画像の表示と、各種データ(質問時、画像保存が別物とは知りませんでした)のセーブ&ロードさえ出来れば、 後はどうにでもなると踏んでいたので、それらについてだけ、こちらで質問してしまいました。 テキストを表示したり、プレイヤーキャラクターを動かしたり、 まだ簡易版ですがワールドマップの自動生成させたり、 いわゆるNPCが動くプログラムなどは、既に組んでいます。 後はここだけなんです、問題は。 スレの皆さんを不快にさせてしまい、申し訳ありませんでした。
やる気はあるみたいだし不快って程じゃない でも何がしたいのかよく分からない 保存する画像はユーザーがアップロードするの?それともcanvasに描いた内容を変換するの? 元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない
>>310 VIDEO こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。 他にやりようある、ありそうってのはわかるんですが、上手く行かないです。 >>309 こっちも口調が強くなってすまんな >最初の質問だった画像の表示と、各種データ(質問時、画像保存が別物とは知りませんでした)のセーブ&ロードさえ出来れば、 今やりたい事は ①データをセーブする(localstorageまたIndexedDB) ②①で保存したデータを読み込んで、セーブした時の状態に戻す っていう事でいいかな? だとすると、なおさら画像をDB等に保存したい理由が分からない もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと ロードした時に復元できない、って思ってる? >>312 いえ、こちらこそ、気を遣わせて申し訳ありません。 >もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと >ロードした時に復元できない、って思ってる? そのものズバリでした。 先ほど >>310 さんのレス見て、ん? とは思ったのですが、 やっぱり画像ってセーブとかロードとかするものじゃないんですね。 >>313 よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな…… 例えばマップデータだったら、動画見てると配列で定義してるよね 逆に言えば、その配列情報さえあれば、同じマップを生成する事が出来るからそれだけ保存すれば良い そうすれば画像データよりも格段に軽い状態で保存できる プレイヤーの位置情報とかも、座標データを書き出せばそこから位置が復元できる で、実行環境で出来るか分からんけど 直接サーバー上にファイルを書き出せるなら、localstorageやIndexedDBに拘らなくても 極端な話、テキストとかJSONとかで書き出して ロードする時にはそのファイルからデータを読み込んで、復元させるっていう方法も取れる 皆様、ありがとうございました。 ここに来るのがこれで最後になるよう、頑張ってみようと思います。
WebSockサーバーと接続し、データを受信したら次のデータを要求する様な流れで、 泥のChromeと比べてPCのChromeとEdgeは物凄く遅く、泥と比べて1/5程度の速度なのですが configで実行速度的な物を設定出来るのでしょうか 泥は4.1の化石でもPCよりずっと早いです
>>317 Chromeの開発ツールで通信速度・CPU性能を意図的に遅くすることができます。 「Chrome Network Throttling」「Chrome CPU throttling」辺りで情報が出ます。 画像データは、各マス目の画像の番号の並びを保存する 例えば、1は道路・2は山・3は川とか、 さらに、1~3の画像を保存するか、保存せずにサーバーから送るか 1,2,1 1,3,1 1,3,3 JavaScript のゲームエンジンは、Pixi.js ベースのPhaser とか。 C# なら、Unity とか このイタリア人はPhaserで、461 の記事を書いている https://www.emanueleferonato.com/ >>316 頑張れよー 次に来る時は質問の回答者になれる事を祈ってるわ かたくなにライブラリを使おうとしない理由はなに? それだけ教えて
>>322 気持ち悪いからです。 いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。 createObjectStoreだけしてcreateIndexしてない 画像データそのままぶっこむとかあほみたいなことする必要なくなった?んだし データベースの基本が分かってないならlocalStorageに戻れば?
ライブラリ? とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。 お世話になりました。ありがとうございました。
>>231 問題がぐちゃぐちゃに絡み合ってるなこれ。 a. indexedDB.open() が複数回呼ばれている(dbVersionの値もどうなるか怪しい) b. storeName / data が途中で上書きされている(他の変数も軒並み上書きされてる) a. により、onupgradeneeded とか db.createObjectStore の考え方がぐちゃぐちゃになる(DBのバージョン管理が全くできていない) b. により、想定外の挙動になっている。("itemStore"を2回作ろうとしている。プライマリキーが不正になってる) 次のように変更すれば、動くと思う。 indexedDB.open() が1つになるように書き換える。(dbVersionを意識して書く) var を使用しないように書き換える。 const を積極的に使うようにする。(const が無理な場合のみ let を使用する) 正直、 localStorage 使う方がいいと思うぞ。localStorage で容量が足りないならば、保存するデータから考え直したほうがいい。 >>322 このスレ、ライブラリの質問禁止になってる(>>1 参照)から、スレ的にはライブラリ使わないでいいと思うぞ >>327 自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。 今繋げたんですが、やっぱりこうなりました。 >>328 アドバイスありがとうございます。 とても助かりました。 >>329 こういうと元も子もないないけど、 初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか? PC版開発⇒Android環境で動作するようにテスト&修正っていう方がやりやすいぞ (MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった) >1 に書いてある、 >(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。 たぶん、これは元々無かったのに、荒らしが勝手に入れた。 荒らしはテンプレを勝手に改変して、自分が有利な話題だけに絞る。 自分が嫌な話題をさせないように邪魔する 荒らしは必ず、2回以上書き込んで複数人いるように思わせる。 それで、議論を自分が有利な方向へ持っていく Python のすべてのスレのテンプレも、荒らしが改変している。 >・当スレにRubyのソースコード類を書くことを禁ず >・Ruby等、Pythonではないプログラミング言語での回答類・質問を書くのも禁止 >・「Ruby では」「Rubyでは」「Rails」正規表現→「^クソチョンw$」をNGワード登録推奨 テンプレ荒らし。 ずっと、荒らしがスレを立てて、テンプレを毎回改変してくる それをそのまま使っちゃいけない。 必ず削除するか、別のスレを立て直す この辺の対策は、漏れらは散々やってきた
初心者は、Ruby, jQuery, Lodash みたいな簡単な言語・ライブラリなどを使うと、 時間を削減できて、その分を勉強に回せる だから荒らしは、それを出来ないように制限してくる。 初心者が勉強して上達するのが嫌なんだろう。 自分が不利になるから それで、あちこちのスレで、ずっとRuby, jQuery, Lodash 禁止のテンプレを作っている。 漏れらは散々、それらの荒らしと戦ってきた
どの言語でもRubyをゴリ押しするアホが居たからだろ。
RubyガイジがRubyスレ以外の言語で現れるからだろ しかも質問に対して「Rubyでは~」って言ってRubyのコード貼り付けるし 言い方が悪いけど、Ruby布教したいなら大人しくRubyスレだけでやってくれよ
何でネットに仲間意識があるんだろう? 不思議だな、リアルに仲間が居ないのか?
前も言ったがrubyスレでpythonの話してもいいっていうなら考える余地がある 現状自分に都合のいい事押し付けてるだけ
element.addEventListener( "toucstart", function(e){ setTimeout( function(){ document.addEventListener('touchmove', disableScroll, { passive: false }); } , 2000 ); } ); function disableScroll(e) { e.preventDefault(); } elementを2秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません どうすればいいんですか?
長押しか Lodash に、そういう関数が無いか?
>>338-339 touchstartとtouchendのタイムスタンプの差分が2秒以上か確認すれば良い setTimeoutは不要 >>341 2秒以上押している間処理実行という場合はどうしたらいいんですか? >>342 「toucstartからtoucendまでの間」が押している間 >>343 touchendだとタッチを離さないとだめなので タッチを離さないで2秒以上押しっぱなしという意味です だからtouchstartから2秒以内にtouchendが無ければ長押し判定でしょ
>>344 touchstartで処理を開始し、touchendまたは2秒後に処理を停止すれば良い ボインタ位置も見るならtouchmoveで別の場所に移動した時にも処理を停止すれば良い スクロール始まる前のtouchmoveならpreventDefaultでスクロール禁止できるけど 一旦スクロール開始しちゃったら後のtouchmoveでpreventDefaultしてもスクロールキャンセルできない臭い
>>338 こゆこと? 指がtouchstartから2秒以上同じ位置に停止していた場合、その後touchend(指を離す)までに発生したtouchmove(スクロール)を中止する。 var element = document.getElementById('element'); let timer, flag = false; element.addEventListener('touchstart', function(event) { timer = setTimeout(function() { flag = true; }, 2000); }); element.addEventListener('touchend', function(event) { timer = clearTimeout(timer); flag = false; }); document.addEventListener('touchmove', function(event) { if (flag) { event.preventDefault(); } else if (timer) { timer = clearTimeout(timer); } }, {passive:false}); >>347 touchmoveが一旦開始すると以降キャンセル不可になるみたいだな >>344 if(touch_end_time - touchi_start_time >= 2){関数呼び出し}ってことかな? >>346 なるほどー >>348 だいたいそういうことです touchstartでグローバル変数にsetTimeoutを格納した上で、touchendでclrarTimeoutすれば、clearされない場合にのみdisableScroll()が実行される
同じ要素が複数あるときに、スクロールした場所だけにactiveを付与する方法ってないでしょうか? 例えば、pタグが等間隔に10個ほど並んでいて、その場所までスクロールしたらそのタグだけにaddClassを実行。それをスクロールする度に実行するという感じです。 該当のタグ全てに連番でclassを振るという方法から始めてみましたが、「今スクロールが到達しているpタグだけにaddClass」という 振り分けが分からず苦戦しております。 どうかお知恵をお借りできたら嬉しいです
>>351 IntersectionObserver 「javascript スクロールしたら表示」で検索! jQuery のscrollTop() を使うのかな?
めちゃくちゃ素人質問で申し訳ないんだけど複数のbuttonがある状態で押されたボタンのvalue要素を取得する事ってできる? 他との問題でボタンにidを付与出来ないからclassとnameを使ってなんとかしようとしてたんだけどサッパリわからん……
function textCutting(selector) { const limited_number = 7; document.querySelectorAll(selector).forEach(node => { node.textContent = node.textContent.trim().substr(0, limited_number); }); } textCutting("#container > .text");
>>363 ありがとうございます。返信忘れてました。 引数にcontainerを入れておきたいのですが、クラスである場合もあります。 クラスかidどちらでも取ってこれる関数ってありましたか? >>364 コードの関数名でぐぐって調べないからそういう質問がでてくる >querySelectorAll そうでした すみません 上の例でいうselecterは親要素のセレクタのことだったんですね
一次配列をmatchメソッドみたいに正規表現で検索して、適合するすべての値を返すのってどう書けばいいんですか? [ あ,い,う,え,お,あか,いし ] ←この配列を/[あい].*?/で検索して[ あ,い,あか,いし ]みたいな結果を得たい joinメソッドで文字列化してmatchメソッドつかわずに「一次配列を検索」したいんです
>>368 ["あ","い","う","え","お","あか","いし"].filter(s => /[あい].*?/.test(s)); 要素内から複数の要素(例えば同じクラス名を持つ要素)などを取ってくる場合、htmlcollectionとnodelistのどちらを使うんでしょうか? どちらということはなく、nodelistの下位にある構造がhtmlcollectionかなとも考えています。
>>372 liveかそうでないかを意識すれば、どちらでも良い プロパティ、メソッドも少し違う https://ideone.com/vndbec まず親要素を取り、その後子要素にアクセスしようとしたんですが、foreachは使えないみたいです。 childrenが配列になっていないからかなと思うんですが、インスペクタ見ると配列にはなっているようですが、なぜでしょうか? >>373 ではhtmlcollection使うことにします。なんとなくとっつきやすかったので。 >>374 HTMLCollectionは配列じゃない forEachも持ってない 使えるメソッドとプロパティを確認すること childrenに格納されているhtmlCollectionにはforEachメソッドがないので、下記のように書く必要がある [...children].forEach()
>>375 nodelistに使うものですよね。ありがとうございました。 >>376 ふつうにlengthとってforで回してもいいんですよね。 ソッチのほうが直感的にわかりやすいかなと。 >>376 これは何という記述ですか? ただの、配列化でしょうか? >>379 どうも、見慣れない記述だったので。 こういうのはふつうにforループ回したほうがわかりやすいんでしょうか? javascript特有の記述というのが難しくて 特別な理由がない限り、letやforの利用を控えることをオススメする 無意味な状態や副作用をできるだけ排除する構成を心がけよう
>>380 あなたは「何を使うべきか」よりも「どんな機能なのか」を把握することから始めた方が良い NodeListとHTMLCollectionの選択でHTMLCollectionを選択したかと思えば、HTMLCollectionを理解してないから使いこなせない 理解する前に選択するからそうなる 俺はHTMLCollectionではfor文を使ってるが、特徴を理解していれば何の問題もない NodeListならfpr-ofを使ってもよい 理解さえしていれば、自ずと選択が出来る NodeList、HTMLCollection、スプレッド構文、..,etc を理解してから悩むべきだ >>381 普通のforで回すよりfor...inとかfor...ofで回した方が要素すぐ扱えて記述少なくて済むのは置いといて letはvarより使わない方が良いの? それともforのインデックス用の i を使わない方がシンプルで良いという限定的な条件での話? >>381 副作用の話は俺も分からなかった for文に副作用があるとは思えないが >>384 現状のvarは「互換性のために残されている」のであって、利用禁止が大前提 その上で、どうしてもconstにできない特別な理由がある場合にだけletを使うってこと さらにその延長で、forについても使わずに済むなら使わない方が良いってこと 理由不明な禁止ルールを受け入れるようになると、赤の他人の意見を鵜呑みにしておかしなことになるからお勧めはしない 非推奨理由を読んで、受け入れるか判断するのがいいと俺は思う
>>386 なるほど了解。 普通のforで回して処理するよりsomeとかreduceとかのほうが何の処理しようとしてるかわかりやすいしね。 varはブロック内からでもグローバル変数になるからどこから変数内容変更されてるか分かりにくくなり易いから良くないね ややこしいのでfor文使うようにします(´・ω・`)、、、
あっ、for of いいですね。 htmlcollectionでなぜforeachが駄目なのか謎ですが。
ここはvscodeスレじゃない 一応答えておくとjavascriptは動的型付けなので常に補完が出る訳じゃない そういうのを求めてるならtypescriptを使う
今回は「使えないみたいです」って聞き方ではないのねw MDNをよく読んだ上で、実際にどう動くのかをブラウザのコンソールで繰り返し施行するといい
>>392 HTMLCollectionはArrayのPrototypeを持ってないからforEachはつかえない。 HTMLCollectionでforEachを使いたいなら、Array.Prototype.forEach.callとか。 >>396 どちらも配列だと思うんですが、なぜhtmlcollectionだけ使えないのかが分かりません javascriptを書くとき、関数名などに続けて波括弧を書いたほうがわかりやすいと思いますか? function func(){ console.log("hoge"); } 以下のようにしたほうが構造が分かりやすくないですか? function func() { console.log("hoge"); }
JavaScriptで配列とはArrayのこと "配列っぽい"ことと"配列である"ことは全然違う 逆に聞くけどどうやって両方配列であると判断したの?
>"配列っぽい"ことと"配列である"ことは全然違う 初めてやる人にはそんなこと思いもよらないだろうしな
>>394 そういうものなのですか。 補完が出ないとちと不安で >>362 .container の子要素(子孫を含めない・直下のみ)である、.text は、.container > .text 親と子を、別々に取得するなら、jQuery で、 <div class="aaa"> <div class="xxx">ああ</div> <div class="yyy">いい</div> <div class="xxx">うう</div> </div> <div class="aaa"> <div class="xxx">111</div> <div class="xxx">222</div> </div> const parents = $( '.aaa' ) // 子の中で、xxx クラスのものだけを取得する const children = parents.children( '.xxx' ) children.each( function( ) { console.log( $( this ).text( ) ) } ); これで、ああ・うう・111・222 が表示されて、 「いい」だけは表示されない 初心者は、素のJavaScript(JS)で書かずに、jQueryを使った方がよい。 JSで書くと、可読性も悪いし、バグってばかりで時間を損する ハゲは、素のjQueryで書かずに、Javascript(JS)を使った方がよい。 jQueryで書くと、プログラミングの本質が理解できていないままだし、ハゲてばかりで毛を損する
element.addEventListner( "click", function(e){ clearInterval(timer_id); var timer_id = setInterval(test_func,1000); } ); このようにクリックしたとき前回起動したsetIntervalを削除して 新しいsetIntervalをセットしたいんだけど、前回のtimer_idが取得できないのでうまくいきません どのようにすればできますか?
>>408 handleEventプロパティを持つオブジェクトにタイマーidを保存する JavascriptってJavaより簡単って聞いたけど、html絡んでくるから難しくないですか?
>>408 下記のようなグローバルオブジェクトを定義しておいて、その要素として保持しよう const timer = {}: >>409 >>411 できましたありがとー また質問だけどsetIntervalとwindow.scrollByを使って自動スクロール中に 手動でスクロールするとclearIntervalで自動スクロールを止めるようにしたいんだけど 自動スクロールも手動スクロールもaddEventListner("scroll",function(e){})が発動して 区別をつけることができないんだけどどうすればいいですか? >>410 WebAPI使わなければいいんでない? >>412 e.isTrusted で区別できるかも >>414 やってみたけど自動でも手動もでtrueだったので判別できませんでした >>412 自動スクロール中のフラグを作成して、フラグ管理すれば良い >>412 wheel, mousedown、keydownイベントで止めるとか oninput="value=value.replace(';','1')" 置換元が特定の全角記号(¥:;@等)の場合、置換先の文字が2回入力されます。 書き方の問題ですか?回避方法はありますか? chromeとedgeで発生しました。 ieでは発生しませんでした。
KeyboardEvent.isComposingで変換中か判定したらいい <input id="test"> const elm = document.querySelector("#test"); elm.addEventListener("keyup",(e)=>{ if(!e.isComposing){ elm.value = e.target.value.replaceAll(";","1") } })
>>410 JavaScriptは初心者向けの簡易言語。 一応入門書を一通り終えたのでelectronでGUI作ろうと思ったら、予想以上に難しくて挫折した。 electron使いの人いる? いたらどれだけのレベルにならないと作れないか教えて。
>>419 Node.js で実行したら、1回しか置換されない inText = 'あい;;ab;;12'; outText = inText.replace(';', '1'); //=> あい1;ab;;12 >>422 俺はelectron使いじゃないけど今本屋に並んでる2022年3月号の日経ソフトウエアでElectronでデスクトップアプリ開発特集載ってたよ >>420 これだと普通に置換できますね >>423 環境によるんですかね 結局こうしました。半角の数字と半角のコロンだけ表示。 .replace(/[0-9:]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/[^\:\d]/g,'').replace('::',':'); 最後に[::]→[:] 変なやり方だと思うけど:を二回使う事は無いのでとりあえずOK replaceどうのこうのではなくて、oninputが2回実行されてるみたいです。 oninput="value=value + 'あ'" 特定の全角記号だと「;あ;あ」、全角英字なら「;あ」 querySelector で帰ってきたelementのメソッドでcloset()だとRoot方向にしか検索できませんがchild方向にelementを検索する方法はありますか?
chiled方向に検索するのがquerySelectorじゃないのですか?
>>427 documentだけじゃなくてelementに対してもquerySelectorメソッドつかえるんですね。ありがとうございます excelの配列数式などでAND OR の代わりに * + 等を使ったりしていましたが javascriptの条件式のなかに&&の代わりに*を使った場合、 違いはありますでしょうか。 *だと左辺がtrueであっても右辺も評価するなどするのでしょうか。
>>430 そんなもん手元のコンソールに打って直接確認した方が早いと思うけど、そうしたくない理由でもあるの? だってただの乗算・加算なのだから一連の計算全部しないと結果は出せないもの 文字列だった場合バグの温床になりかねないので素直に論理演算子使っとけ
> if(undefined){console.log("undefined is true");} else {console.log("undefined is false");} undefined is false undefined > if(!undefined){console.log("!undefined is true");} else {console.log("!undefined is false");} !undefined is true undefined > if(true+console.log("exec")){console.log("true"); }else{console.log('false')} exec false undefined > if(console.log("exec")*console.log("exec2")){console.log("true"); }else{console.log('false')} exec exec2 false undefined 論理演算子的な打ち切りはしてないね。普通に算術演算子だわw
普通に手打ちしてたら、空白とかクォートとかセミコロンの打ち方に全然整合性ないでやんの、俺w
■質問テンプレート 【環境】Android10 F-51A Chrome 93.0.4577.62 【何をしたのか】セーブ(サンプルコードの一番下の方で実行)を2回以上実行すると、ロード出来なくなる。 【エラーメッセージ】出ません。 【期待する結果】セーブ、ロードが正常に行われるようにする。 【サンプルコード】 https://ideone.com/BJQ4qV 懲りずにお邪魔します。 解決案など思いついた方いらっしゃったら、よろしくお願いします。 今回でアドバイスを得られない、あるいは私の理解が及ばなかった場合、ココナラなどの利用も検討しています。 解決案は知らんけど、有償で良いならこのサイトがおすすめ、みたいな情報も頂けたら嬉しいです。 全然見てないしよくわからんけど、なんでセーブとロードを繰り返してるの?
>>436 1. 非同期の基礎を勉強する 2. コールバックAPIをPromisifyしてawaitする >>436 書き込み、読み込み後にデータベースを閉じてないから2回目のdeleteDatabaseが出来ずに永遠に待ってる データベースである必要ないならストレージ使えってば >>437 最初のセーブでは、ロード成功するんです。 2回目のセーブをすると、ロードに失敗するんです。 一度目の処理では成功してるけど、二度目で失敗してるのを見て貰うために、今回のコードでは繰り返しにしました。 まず変数はletかconstを使って明示的に宣言する あと非同期処理の勉強をした方がいい url先のコードは処理が行われる順番を考慮してない コードで例示すると const elm = document.querySelector("#input") let mail; elm.oninput = (e) => { mail = e.target.value; } console.log(mail); みたいなコードを書いてる oninputはすぐに呼び出されないのに先にmailを参照しているからバグる 他にも色々ありそうだけど自分がパッと見つけられた間違いはこれだけ (文字が全角になってるのはCloudflare対策)
変数の宣言方法と変数のスコープについても学んで下さい ”use strict”;使うように
>>439 実現出来るかわからないのですが、理想通りに事が進むと、主にマップデータで結構容量食いそうで心配なんです。 そういう心配事は取っ払ってから制作したいもので。転ばぬ先の杖って言うんですかね。 失礼しました。 予想以上に早く、また親切にアドバイスして頂けて嬉しいです。 本当にありがとうございました。
今回躓いたところは完璧に解決しました。 皆様、本当にありがとうございます。
>>443 ライブラリ使えって散々言われてたじゃん 使いたくないとか言ってたけど今ライブラリ使ってないプログラムなんてほとんどないぞ eval関数なしで テキストボックスに入力されている 5*6*4+56/24のような計算をするにはどうすればいいでしょうか?
>>449 ありがとうございます ググって見たんですが、かなり難しいですね、知らないコードも多くて挫折しそうです グッドモーニングショーで未だにファックス使ってコロナ集計してやんのwって言ってましたけど 特定サイトで入力した個人情報や体調情報などをQRコード化して読み取りパスを設定し その情報を診療所などで携帯で読み込むと、自動的に院内システムと保健所など供給機関にJSONで送情されるようなの あっという間にできそうなんだけど セキュリティ面感がなければ2時間くらいでできそう
>>453 院内システムは普通インターネットに疎通していない。 Drがインターネット使うのも全部、画面のみ転送のリモートデスクトップ。 規格を統一するのが難しい 医療機関は、各SIer でバラバラだろ
先進諸国ってシステム規格は統一してるん? なんで日本だけファックスよ?
firefoxを使ってるんですが マウスのソフトウェアの左クリックの連射機能を使うことがあって その際にリンクやボタンを多重クリックを避けたいので 特定のエレメントにイベントリスナーでクリックするとstyle.display = 'none'にするようにしたんですが これが実際に多重クリックになってるかどうかは どのように判断すればよろしいのでしょうか ブラウザの開発ツールなどで簡単にわかる方法ありますでしょうか? それとももう一度同じエレメントにイベントリスナーでクリックした場合 カウンターにインクリメントさせてconsole.logがいいのでしょうか (この方法も正確に取れているのかは私にはわかりません)
質問させてください let ar={a:{a1:1}}; console.log(a1); // ① a1 is not defined let {a:{a1}}=ar; console.log(a1); // ② 1 a1を出力したのですが、 ①は未定義 ②は1が出力されています どうして①と②の出力結果が異なるのでしょうか?
>>459 ①のa1はグローバルレキシカルを参照したけど定義されていなかった ②のa1はグローバルレキシカルを参照したらオブジェクトとして登録されていたのでvalueを返した ②は{a: 何で理解していないのにこんな書き方して分かりませんって質問しているのだろうかw 目的は?
arr = null もしくは arr = [] じゃダメなの?
自分は arr.length = 0 を使う >>466 arr が let ならそれでもいいけど、const の場合は再代入出来ない >>468 constなのに長さ0にしちゃっていいの? >>469 constが禁止するのは再代入 プロパティ変更は禁止しない >>470 そういう意味ではなく constで定義している配列の長さを0にするってことは変更不可として定義してる配列なのになぜか0になってるというバグを生みやすいんじゃないか? >>471 「変更不可」と「再代入禁止」の区別を付けられるようになろう 君のその認識こそ、不具合を生み出す原因になるよ やっぱjavascriptは欠陥言語だよな 定数とオブジェクトでconstの使い方変わるし
Ruby でも、入れ物と各要素は別。 shallow copy と同じ。動的言語は全てそう。 deep copy, deep freeze などは、誰かが作る必要がある 入れ物をフリーズしても、各要素は変更できる ary = %w(a b).freeze ary[ 0 ].upcase! p ary #=> ["A", "b"] だから、入れ物と各要素の両方を、フリーズする必要がある ary_2 = %w(x y).map( &:freeze ).freeze ary_2[ 0 ].upcase! #=> エラー。変更できない!
<input type="button" value="aaaaaa" id="test1"> <br> <input type="button" value="bbbbbb" id="test2"> <スクリプト> var id_list = ["test1","test2"]; for(let n=1;n<=id_list.length;n++){ var elm = document.getElementById(id_list[n-1]); elm.addEventListener( "click", function(e){ alert(elm.value); } ); } </スクリプト> aaaaaaボタンをクリックしてもbbbbbbと表示されてしまいます どこが間違っているんですか?
>>482 スコープまわりの認識とか? var を使わずに const, let 使えば意図した通りに動くはず alert (elm.value)をalert(e.currentTarget.value)に変えたればおけ
alert(this.value) または const elm = document.getElementById(id_list[n-1])
これから新規でスクリプト書くなら、特別な理由がない限りvarは使わずletかconstだけ使うほうが、変なミス起こらなくていいと思う
初心者は、jQuery を使えばよい 分かりにくい、this の意味も変えてある
jQuery で、ボタンの外側・親にイベントを付けて、親で、子のイベントをキャッチできる <div id="btn-wrap"> <button class="BtnA BtnAll" value="1">A-1</button> <button class="BtnA BtnAll" value="2">A-2</button> <button class="BtnB BtnAll" value="3">B-3</button> </div> $( function ( ) { // 外側・親にイベントを付けて、親で、子のイベントをキャッチする $( '#btn-wrap' ).on( 'click', function ( event ) { const value = $( event.target ).prop( 'value' ) console.log( value ) alert( value ) } ); } ); または、共通のclass を付けて、そのクラスだけのイベントをキャッチできる // .BtnA のみ $( '.BtnA' ).on( 'click', function ( event ) { const value = $( this ).prop( 'value' ) console.log( value ) alert( value ) } );
>>488 に追加 セレクターをカンマで区切れば、A またはB でも出来る // .BtnA or .BtnB のみ $( '.BtnA, .BtnB' ).on( 'click', function ( event ) { const value = $( this ).prop( 'value' ) console.log( value ) alert( value ) } ); イベントのバブリングを学ぶにはいい機会(丁度よい題材)だとは思うけど、「初心者に向けて」というエクスキューズでもって今時jQueryを勧める態度には悪意に近いモノを感じる
今後廃れていくだけだもんな 新たに学習する必要はないわな
こんにちはこのたびはお世話になります Javaスクリプトの質問ですが いろいろ煮詰まっておりさしあたり 変数のスコープとオブジェクトのことがよくわからないでして 変数は関数内のみのローカルありますよね でオブジェクトも var obj=new obj() といったインスタンツなら変数とおなじでローカルだったりグローバルだったりするんですかな まずは以上よろしくお願いします
バーよりレッツを使うんですね承知しました。 ブラウザ画面内に表示されたDOMオブジェクトは常にグローバルなんですかね 何もかもがわからん
window.document.body, window.document.head など、 windowオブジェクトはグローバル windowが無くても、document.head でも同じ window.document.head == document.head //=> true 例えば、Pjax で、ページを作っている場合、 ページ遷移したように見えても、window に追加したオブジェクトは初期化されない。 そのまま残っている ページの一部分しか変更されていないから。 ページをreload していないから
参考書に、Javaスクリプトにはクラスの概念はない、て書いてあるんですが もしかして情報が古い?
その本で勉強するのやめたら varを使ってるのもそのせいだろうし
>>499 「クラスの概念がない」は正しい JavaScriptはプロトタイプベースでclass文は糖衣構文だからな そういう意味で書かれているのなら正しいといえるが、書籍を持ってない人が文脈を読みとれるはずもない 書籍の正しさを保証するのはその書籍を持っている人だけ まあvar使ってる時点でES15以前だから読む価値なしですね 時間の無駄なんでその本を投げ捨てろ
>>499 あと、正しさを気にするなら、カナ交じり用語を使うのを止めた方がいい ・Javaスクリプト ・バー ・レッツ こんばんはいつもお世話なります 今日でかなり学習は進みましたありがとうございます さっそく質問ですが クロッパーJSという便利ライブラリを見つけて解析しております ところが fileReaderでダイヤログを出してjpg画像なりを読んでまずは画面にプレビューしますが、 あっ間違えたのテイで再度fileReaderして別の画像を読み込むのですが プレビュー画面が前のまま変わらないのです 以上よろしくお願いします
>>506 クロームdevtoolでソースcodeを解析してみればいいんじゃないかな ネタ品質が低くてすまん クロッパーJSの公式デモページ(エマワトソンの写真のやつ)でImport Image with Blob URLsというボタンは 何度でも写真を読み直しできるんですよ インスタンスをデストロイがカギとは思うのですが
>>508 デモページのソースをディフってみたら? クロッパーのことですけんど なかなか敷居が高いですわ インタネッツでもたくさんの人が2回目の読み込みをどうするか質問してますね
こんにちは今日も格闘しております グーグルマップのリーフレットプラグインで、写真を地図に貼り付けています 複数貼った時の処理でまた壁につきあたりました 貼り付け関数で作るインスタンスが「imgovlay」なんですがその名前なら例えばimgovlay.options.cornersってやれば四つ角の座標がとれるですけんど 3枚はったあとからでは1枚目の座標が調べられんとです これはどんな工夫したらよいのやら 以上よろしくお願いします
日記ならそろそろ個人ブログでも作ってやったら 前にレスくれてる人は無視、相変わらず中途半端なカタカナ表記で聞きたいこともわかりにくいし書いてるコードも貼らない 一応エスパーしとくと、配列でインスタンス全部持っておくだけでは?
ジェーンスタイルというアプリでこのスッドレを見ておるますが、タグのあるコードのコピペはできないんですよ
ID:vRC3RkLD0はネタ質問と思ってる 全く面白くないが
Chrome拡張機能のjsファイルを修正しようとしているんだけど (バグが出たのに作者放置で逃亡w) JSファルダの中にいくつかjsファイルがあるけど、どれが最初に読み込まれるのですか? また、グローバル変数はファイルを超えて使えますか?
>>518 まずは複数の実行コンテキストが存在することを把握するといい chromiumのmanifest V2拡張機能はこの年末にサポート終了が予定されているので、その拡張機能がV2の場合はV3に作り直すことをオススメする HTML部分 <!DOCTYPE html> <html> <head> って書いてるから無理なんかな……index.htmlじゃなくて.cgi直のURLに設定したいんだけど……
>>521 こんにちは cgiてのはperlのコトですかね perlやPHPはHTMLをまるっと吐き出せるんですよ だからjavascriptの仕掛けのあるHTMLをまず作ってみて、その内容をまるごとcgiでprint文などで出力します C#からJavaScriptをコールしたいのだが、このJavaScriptは.jsファイルに入れるのではなく、 htmlファイル内に書かないといけないのかな?
setIntervalでtimer1が起動中のときはtimer2を起動させないようにするにはどうやればいいんですか?
>>525 setIntervalのラップ関数を作って排他制御する >>526 なるほどー それとsetIntervalも戻り値は0になることはないのですか? >>528 返り値はただのNumber値 プロパティは埋め込めない 数日前からjavascriptやらされてるんだけど質問 ajax関係の処理が例えばJqueryだと$.ajaxとかで終わった時の処理とか エラーだったときの処理とかで分かれてるじゃない? こういうAPIへのリクエストは全部まとめたいからsuccessにreturnするfunctionにしたら 使う側では瞬間帰ってきてundefinedになってしまう・・・ asyncなんだから当たり前だと言われたらそれまでなんだけど そして毎回$.ajaxをそこら中で呼び出すことになる これってそういう言語だからあきらめろしか無い感じ? もちろんasyncをfalseにしろという話になりそうだけどブラウザがメインスレッドでやらんほうがいいとか警告出してくるし