+ JavaScript の質問用スレッド vol.124 +
レス数が1000を超えています。これ以上書き込みはできません。
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 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured ■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■テンプレ案
https://fiddle.jshell.net/6018r9tu/1/show/light/ 前スレ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(ｆ2）｝ コード１では、ｆ１を2回呼びますが、関数呼び出し1回につき、１つの（別々の）クロージャーが生成されます
同じ変数名のcであっても、別物のcとなります
ですから、cはインクリメントされずに0となります
コード２ではf2から戻されるアロー関数を複数回呼び出しますが
関数の呼び出し1回につき、別々のクロージャーが生成されますので
上記と同じようにcは0になります
コード３では、f2から戻されるアロー関数を変数f3に代入し、それを複数回呼び出します
呼び出しのたびに別々のクロージャーが生成されますが
外部への参照は、outer(f2)なので、同じcを参照していますので
複数回呼び出すとcをインクリメントします
一方でアロー関数内の変数sは、コード１や２の説明と同じでインクリメントされません 【関数はクロージャーか？】
クロージャーは関数ではありませんし
関数はクロージャーではありません
関数内をクローズにし、外部参照を持たせる、という仕組みをつくるための
関数、内部情報、外部参照ポインタのセットがクロージャーです
【言語は多数者が正しい】
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はグローバルも一つの環境としてるから
グローバル内に宣言された関数も、囲まれた関数なんだよ
グローバルを関数と呼ぶのなら、それはそれかもなんだけど 囲まれた関数ってのは微妙な原文と訳文で作られた言葉
ここの真ん中くらいにあるクロージャの定義を読むといい
https://javascript.info/closure それを読んでも統一見解が得られづらいからこうなってるってわかる？ でもまぁ一連のやり取りで
環境レコードや外部参照チェーンやスコープの復習ができたということで
この部分に関しては、脱素人になったわけだ、おめでとー canvasでcontext.lineWidth=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みたいなこと言えないだろｗ >>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の無名クラスだろ
なんだったのアレ
関数がファーストクラスオブジェクトじゃなかった欠陥言語の苦肉の策とは言えとんでもなくキッタネェコード
今じゃラムダ関数使ってだーれも使ってないし
最初からそうしとけばよかったのにね
ぜんぜん整理されてなかったのかな？ｗ 言語の完成度は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はデリゲートが言語機能として無いのでマネできませんでしたｗ
結果今では誰もJavaでクライアントGUIプログラムを書きませんがC#はバリバリ使われてますｗ
結局Java8でJavaScriptをパクってlambdaで以下のように書けるようにしました（ハズカシーｗ）
button1.addActionListener(e -> System.out.println("clicked"));
しかし時すでにお寿司、誰もJavaでGUIを作っていないのであるｗｗｗ
Javaはサーバーサイドに集中して成功者？
ノンノンｗ
Javaが糞でめんどくさくて誰も書かなくなったから廃れた、これがシンプルな答えですｗ 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
ありがとうございます
サイトは次使う時に使って見たいと思いますｗ >>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="ｘ^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); >>169
そうやった方が簡単そうですね
>>170
ありがとうございます いつもはreplaceやmatchを使うんだけど、
execってのがキャプチャグループだけを簡単に抜き出せて便利そうだから使ってみました
txt="AabBxxB";
pattern = /A(.*)B/;
d=pattern.exec(txt);
alert(d[1]);
期待する結果はab
でも実際はabBxxが返ってきます、後方参照ってやつですか？一番後ろのものとマッチしてしまう
これって最短距離でのマッチを取得するにはどうすれば良いんでしょうか？ ぱっとしかみてないけど
pattern = /A(.*?)B/; >>173
>>174,175
ありがとうございます
なるほど、*も+も?も単体で使うと最長一致になるけど
*?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい… >>177
その通りだが、一文字ならバックトラックが発生しない最長一致がいいと思う >>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に描写した後、画像の白い部分だけを赤くマスクしたいです
https://illust8.com/wp-content/uploads/2018/08/icon_mail_illust_924.png
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でカットするのはどちらがいいんでしょうか？
ブログのトップページなんですが、本文の１部を表示させておいて、続きを読むというリンクを設置したいなと。
<div id="text">１２３４５６７８９</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等から計算してください 質問１ element.addeventlistnerとdocument.addeventlistnerの違いは？
質問２
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って何の意味があるんですかね？ >>215
変数 = function() { ... }
で関数式(無名関数)っていう形で定義できる
関数式についての説明はこの辺を参照
https://ja.javascript.info/function-expressions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions
で、window.onload = function() { ... }
っていう風に実装すると、少し特殊な動きになって
HTMLを完全に読み込んだタイミングで、関数の中身を実行するっていう動きになる
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload
(他言語だとあんまり見ない書き方だから混乱するかもしれんけど） >>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」をアラートで出力すると、こうなります。
https://i.imgur.com/FzEkdyk.jpg >>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
もちろん承知しています。
それで試しても駄目でした。 >>242
>>234のalertに表示されてるアドレスNot Foundだけど？ >>243
この文章って、そういう意味なのですか？
てっきり、アクセスは出来てるという意味だと勘違いしていました。
勉強不足で申し訳ありません。
ただ、今回は確実に、ちゃんと画像もフォルダ内にアップロードしたのですが、上手く行きませんでした。
https://i.imgur.com/7tRCd4P.jpg
https://i.imgur.com/AM1zYbJ.jpg
https://i.imgur.com/Egje64L.jpg >>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字だと問題なかったので、やり方じゃなく文字数の関係なのかと思ったのですが、どうなんでしょうか。
ちなみに、配列、オブジェクト型データです。 >>255
文字数というより、localStorageのデータ保存量の上限は基本5MBで
ブラウザや個人設定によって変わってくる
http://www.htmq.com/webstorage/ 変数や関数名の迷わない命名ルールってありますか？
変数は名詞、関数は動詞とは聞きますね。 >>259
exceeded the quota(割当超過)で確定
サイズ減らすかindexedDB使うか >>258
言語仕様としては、使用可能文字があるのみで命名規則に縛りはない
ビルトイン関数/プロパティの慣習的にクラスはUpperCamelCase、関数はlowerCamelCaseなので、守るとビルトインのコードと統一性が出来て良いだろう
後は採用しているコーディング規約を守れば良い
例えば、Google JavaScript Style Guide
https://google.github.io/styleguide/jsguide.html#naming
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html#va >>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を扱うのは無理なのでしょうか。
スマホの制作環境わかる方少ないかと思いますが、アドバイスいただけたら幸いです。
https://i.imgur.com/DWMPWQ7.jpg >>276
某所なんてぼかされても何も分からん
スマホだから使えないなんて話は聞いたことがない
https://caniuse.com/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匹目
https://mevius.5ch.net/test/read.cgi/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
);
ＰＣだと左右スクロールさせたときちゃんとwindow.pageXOffsetが表示されるけど
スマホだと右スクロールの場合は0のまんまで左スクロールの場合だけ表示されます。
スマホでもスクロール値ちゃんと取得できるようなやり方はありますか？ >>287
scrollイベントでなく、setIntervalを使う理由が何かある？
scrollしてない時にも常に監視したらバッテリの持ちが悪くなりそうだが >>277
おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。
トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。
しかし、
https://ideone.com/IKQkII
このコードの59行目くらいで、自分のスマホだとエラーが起きるところまではわかったのですが、解決案がわかりません。
アドバイスいただけたら幸いです。
https://i.imgur.com/DWMPWQ7.jpg >>290
idb作るときにkey指定したりした？
結構癖のあるDBよ。
https://qiita.com/butakoma/items/2c1c956b63fcf956a137
localForageとかPouchDB使った方が良いのでは？ >>291
このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。
なので多分ミスはないんじゃないかと思うんですが……。
昨日も薦められましたが、localForageと言うのも少し調べてみます。
それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、
イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。 >>292
そういう事であればPouchDB一択。
サーバと同期してマスタ撒いたりできる。
サーバはIBM CloudantってDBaaSがあるよ。 >>293
ありがとうございます。
こちらも調べてみます。 >>288
１：ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから
２：setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから
３：addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど
setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから 連日すみません。
new Objectしたデータ（以下〇〇〇〇とします）をindexedDBで格納しようとしたのですが、
〇〇〇〇[0].nameで実行するとちゃんと格納されたようで
名前を表示してくれるのですが、〇〇〇〇[0]や〇〇〇〇で実行すると、エラーが出てしまいます。
名前などは表示されるのだから、forで無理矢理全部やろうとしたら、indexedDBでは前のデータに上書きされるようで、上手く出来ませんでした。
この〇〇〇〇を格納出来うる解決案などありましたら、教えていただけると幸いです。
連日すみません。
https://i.imgur.com/5TVe5FC.jpg
https://i.imgur.com/b6Ymtuc.jpg >>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みたいなフレームワークを使っていない人は、
ウェブサービスを作るのは無理だと思う
フレームワーク側で自動的にチェックされる機能を、
すべて自分で作らないといけないから >>299
質問する時は
①やりたい事を明確に書く
②そのために今試している/実装している内容、ソースコードなど
③発生しているエラー等について
の順で書くと良い
ぶっちゃけ何をやろうとしてるのかが全く分からん
画像をIndexedDBに保存したいなら、一回blobに変換しないといかんぞ
https://blog.katsubemakito.net/html5/indexeddb2 https://4.gigafile.nu/0119-b5bf917d41c34039ed485d68891d082e0
ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
紹介されたサイトなど巡って、考えてみようと思います。 >>303
>ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
なんかまた妙な事をやろうとしてるな
普通はimgフォルダを作って、そこに歩行グラフィックとかを格納する
実装部分はキャラクターの状態に合わせてグラフィックを呼び出す、みたいな感じにするぞ >>304
何となくですが、普通どうするのかわかったような気がします。
アドバイスありがとうございます。 単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい
何が目的でそれを使うのかよく考えないと訳わからんコードになる blobで調べたサイトで出てきた、完成されたコードに、画像を置いて実行したら、エラーが出てしまいました。
【エラーメッセージ】
Putting elephants in IndexedDB
DOMException { stack: "Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.↵ at putElephantInDb (http://localhost:2435/storage/emulated/0/index.html:95:34)↵ at XMLHttpRequest.<anonymous> (http://localhost:2435/storage/emulated/0/index.html:84:21)" }
どのへんでエラーが出たのかまではわかったのですが、何故エラーが出たのかわかりません。
コードはコピペです。
解決案等ありましたら、教えていただけると幸いです。
https://52.gigafile.nu/0120-e68fc48424d65f0f7ae137f3f97cbbc0 >>307
山ほど言いたい事があるが……
・コードが動かない、っていうなら実行環境も書け
(JavaScriptはブラウザ単位で動作が異なる場合もあるし、必須）
・初心者ならまずは動くコードを元に改良なり修正なりしろ
確認したら元ネタのコードは2012年だから、あなたの動作環境で動く補償が無い
（軽く見ただけでもエディタがエラー吐くレベルの互換性不備が2箇所ぐらいある）
https://dev.mozilla.jp/2012/07/storing-images-and-files-in-indexeddb/
・初学者向けのチュートリアルやってこい
とりあえず基本を勉強しろ、明らかに実装方針が迷走してる
エラーを解決できても、この先にエラー地獄になるのが目に見えてる
とりあえず専門書買うなり、Webで公開されるチュートリアルもあるからやってこい
(ゲームが作りたいなら以下を見てみろ）
https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
http://puyo.sega.jp/program_2020/ 動作環境は、Android10 F-51A
Chrome 93.0.4577.62
です。
最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
後はどうにでもなると踏んでいたので、それらについてだけ、こちらで質問してしまいました。
テキストを表示したり、プレイヤーキャラクターを動かしたり、
まだ簡易版ですがワールドマップの自動生成させたり、
いわゆるNPCが動くプログラムなどは、既に組んでいます。
後はここだけなんです、問題は。
スレの皆さんを不快にさせてしまい、申し訳ありませんでした。 やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない
保存する画像はユーザーがアップロードするの？それともcanvasに描いた内容を変換するの？
元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない >>310
https://youtu.be/RKcFIg1yHOI
こちらの動画を参考に、自分なりに考えてやった結果が >>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
頑張れよー
次に来る時は質問の回答者になれる事を祈ってるわ たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。
【環境】
Android10 F-51A
Chrome 93.0.4577.62
【エラーメッセージ】
DOMException { stack: "Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.↵ at IDBOpenDBRequest.openReq.onsuccess (http://localhost:2435/storage/emulated/0/index.html:63:22)" }
【期待する結果】
データベースかオブジェクトストアを増やしたいです
index？ を増やす？ のは試してみましたが、自分では上手く行きませんでした。
【サンプルコード】
https://jsbin.com/zelonizugu/edit?js かたくなにライブラリを使おうとしない理由はなに？
それだけ教えて >>322
気持ち悪いからです。
いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。 createObjectStoreだけしてcreateIndexしてない
画像データそのままぶっこむとかあほみたいなことする必要なくなった？んだし
データベースの基本が分かってないならlocalStorageに戻れば？ ライブラリ？ とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。
お世話になりました。ありがとうございました。 >>321
Qitaの記事そのままコピーしてもそら動かんだろwwww
やりたいならMDNみたいなちゃんとしたチュートリアルからやれ
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB
あと何度も言うが、なるべく最小の形で実装して
細かく試しながらやれよ、動かないコードをツラツラ書いてもしょうがないだろ >>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
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。
https://i.imgur.com/mBDXebU.jpg
>>328
アドバイスありがとうございます。
とても助かりました。 >>329
こういうと元も子もないないけど、
初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか？
PC版開発⇒Android環境で動作するようにテスト＆修正っていう方がやりやすいぞ
(MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった） >1 に書いてある、
>(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
たぶん、これは元々無かったのに、荒らしが勝手に入れた。
荒らしはテンプレを勝手に改変して、自分が有利な話題だけに絞る。
自分が嫌な話題をさせないように邪魔する
荒らしは必ず、2回以上書き込んで複数人いるように思わせる。
それで、議論を自分が有利な方向へ持っていく
Python のすべてのスレのテンプレも、荒らしが改変している。
>・当スレにRubyのソースコード類を書くことを禁ず
>・Ruby等、Pythonではないプログラミング言語での回答類・質問を書くのも禁止
>・「Ruby では」「Rubyでは」「Rails」正規表現→「^クソチョンw$」をNGワード登録推奨
テンプレ荒らし。
ずっと、荒らしがスレを立てて、テンプレを毎回改変してくる
それをそのまま使っちゃいけない。
必ず削除するか、別のスレを立て直す
この辺の対策は、漏れらは散々やってきた そこでつまづいてるならライブラリ使った方がいいと思うぞ
一応コピペしたら使えるlocalforageのテストコード貼っとくから
あくまでテストコードだからPromise.allとか使ってないけど
https://pastebin.com/f5FtchSD 初心者は、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を２秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません
どうすればいいんですか？ 長押しか
Lodash に、そういう関数が無いか？ >>338-339
touchstartとtouchendのタイムスタンプの差分が2秒以上か確認すれば良い
setTimeoutは不要 >>341
２秒以上押している間処理実行という場合はどうしたらいいんですか？ >>342
「toucstartからtoucendまでの間」が押している間 >>343
touchendだとタッチを離さないとだめなので
タッチを離さないで２秒以上押しっぱなしという意味です だから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() を使うのかな？ >>352-353
どうもです。
>>353
一応それやってみてるんですけど、その方法だと対象のセレクターが複数ある時に使えなくて・・・ めちゃくちゃ素人質問で申し訳ないんだけど複数のbuttonがある状態で押されたボタンのvalue要素を取得する事ってできる？
他との問題でボタンにidを付与出来ないからclassとnameを使ってなんとかしようとしてたんだけどサッパリわからん…… >>354
>対象のセレクターが、複数ある時に使えなくて
HTML,CSS,Javascript スクロールしたらふわっと表示(jQueryなし）
https://notetoself-dy.com/javascript-scroll/
このサイトでは、すべてのup クラスが付いた要素を、
1つずつループして、show クラスを付けている
<div class="up op">表示1</div>
<div class="up op">表示2</div> javascriptで特定のクラス内の文字列をカットしたいです。
.containerの子要素である、.textをターゲットにしたいです。
しかし、container外にも.textがある可能性も考えられます。
ターゲットをcontainer内に絞るには、どんな関数を組めばいいでしょうか？
https://jsfiddle.net/bgegg/gf324bha/2/ 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)); >>369
>>370
おおおお！ありがとうございます助かりました 要素内から複数の要素（例えば同じクラス名を持つ要素）などを取ってくる場合、htmlcollectionとnodelistのどちらを使うんでしょうか？
どちらということはなく、nodelistの下位にある構造がhtmlcollectionかなとも考えています。 >>372
liveかそうでないかを意識すれば、どちらでも良い
プロパティ、メソッドも少し違う https://ideone.com/vndbec
https://i.imgur.com/8k3fQ2F.jpg
まず親要素を取り、その後子要素にアクセスしようとしたんですが、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の補完は完全ではないのでしょうか？
以下のコードのtextContentの部分は候補に出ません。
https://ideone.com/VWu28k ここは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イベントで止めるとか >>417
mousedownはオート・スクロール・モードのことか
https://atmarkit.itmedia.co.jp/fwin2k/win2ktips/759autoscroll/autoscroll.html
2アクション必要だから、モード検知がやや複雑化しそうだな…
---
自動スクロールを検知して、自動スクロール以外を手動スクロール扱いする方向で考えてた
これなら、キーバインド変更されても対応出来る 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(/[０-９：]/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
論理演算子的な打ち切りはしてないね。普通に算術演算子だわｗ 普通に手打ちしてたら、空白とかクォートとかセミコロンの打ち方に全然整合性ないでやんの、俺ｗ ■質問テンプレート
【環境】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先のコードは処理が行われる順番を考慮してない
コードで例示すると
consｔ elm ＝ ｄocument.querySelector("#input")
ｌet ｍail;
elm.onｉnput = (e) ＝> {
mail = e.target.value;
}
console.ｌog(mail);
みたいなコードを書いてる
oninputはすぐに呼び出されないのに先にmailを参照しているからバグる
他にも色々ありそうだけど自分がパッと見つけられた間違いはこれだけ
(文字が全角になってるのはCloudflare対策) 変数の宣言方法と変数のスコープについても学んで下さい
”use strict”;使うように >>439
実現出来るかわからないのですが、理想通りに事が進むと、主にマップデータで結構容量食いそうで心配なんです。
そういう心配事は取っ払ってから制作したいもので。転ばぬ先の杖って言うんですかね。 失礼しました。
予想以上に早く、また親切にアドバイスして頂けて嬉しいです。
本当にありがとうございました。 今回躓いたところは完璧に解決しました。
皆様、本当にありがとうございます。 >>443
ライブラリ使えって散々言われてたじゃん
使いたくないとか言ってたけど今ライブラリ使ってないプログラムなんてほとんどないぞ eval関数なしで
テキストボックスに入力されている
5*6*4+56/24のような計算をするにはどうすればいいでしょうか？ >>449
ありがとうございます
ググって見たんですが、かなり難しいですね、知らないコードも多くて挫折しそうです グッドモーニングショーで未だにファックス使ってコロナ集計してやんのｗって言ってましたけど
特定サイトで入力した個人情報や体調情報などをQRコード化して読み取りパスを設定し
その情報を診療所などで携帯で読み込むと、自動的に院内システムと保健所など供給機関にJSONで送情されるようなの
あっという間にできそうなんだけど
セキュリティ面感がなければ2時間くらいでできそう >>453
院内システムは普通インターネットに疎通していない。
Drがインターネット使うのも全部、画面のみ転送のリモートデスクトップ。 単機能のシステムなら出来そうだけど
あれもこれもと仕様が膨れ上がって予算もウン十億になり
最終的に使い勝手の悪いガラクタになるのがオチ
https://wedge.ismedia.jp/articles/-/22205?layout=b 規格を統一するのが難しい
医療機関は、各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を出力したのですが、
①は未定義
②は１が出力されています
どうして①と②の出力結果が異なるのでしょうか？ >>459
①のa1はグローバルレキシカルを参照したけど定義されていなかった
②のa1はグローバルレキシカルを参照したらオブジェクトとして登録されていたのでvalueを返した
②は{a: 何で理解していないのにこんな書き方して分かりませんって質問しているのだろうかｗ
目的は？ 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ファイルを修正しようとしているんだけど
（バグが出たのに作者放置で逃亡ｗ）
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にしろという話になりそうだけどブラウザがメインスレッドでやらんほうがいいとか警告出してくるし >>532
>>533
ごめん色々試してみて自己解決したかも
$ajaxをfunctionに包んでたけど単にreturnするのがsuccessに与えてる無名関数へのreturnになってるからな気がした
その質問者はしらんけどそんなすれあるのねスレチならあっちいくわ
function getdata() {
$.ajax({
type: 'post',
url: 'aaaa',
contentType: 'application/json',
dataType: 'json',
success: function(jsondata) {
return jsondata;
});
}
呼び出し元
var a = getdata();
これでaがnullなのはasyncとかだと思ってたけどfunctionの返し先が無名関数だからだと思う
こういう場合javascript的にはどうするのが定石なの？
getdataの引数に結果を入れる変数渡すの？ >>534
PromiseかDeferredを使う >>535
やばいこれおもしろいね
また世界が広がったわありがとう！
javascript始めてみて非同期処理の世界で頭おかしくなりそう
threadやforkとは微妙に違うおもしろさがある ブラウザ資源を独占できない以上非同期なのは仕方がない
隅っこに入れたWEB広告が通信するから描画スレッド止めますなんて言い始めたらぶん殴るわ >>531
強制されてるなら別だけど、とりあえずjQueryはヤメた方がいい >>539
素？のJavascriptの方が良いって事かな？
ブラウザー対応考えたら楽だと聞いたけど動作対象がモダン環境なら気にしなくても良いとか？ IE6ぐらいはサポートしとけ
長期デフォルトブラウザの実績は覆せない >>540
IE対応するかしないかでほぼ決まる
お仕事ならお客さん次第 >>540
そうなんだありがとう
caniuseで見たら一番下の緑4個の行だけがターゲットだからfetchで良いんかな
Javascript=JQueryってのが当たり前になってるから意識変えれそうで良かった >>545
対応ブラウザの問題がないならfetchで良いと思う
未対応ならPolyfillの選択肢もある VScodeを使っていますが
この画面のカスタマイズはできますか
具体的には、ソース全体の縦長のビューがあってそのうち今見ているところが少し明るく表示されてますよね？その色が分かりにくい！
つかんでドラッグしたくても見つけにくい！
もっとハッキリした色にできますか <html>
<head>
<meta charset="UTF-8">
<title>てすと</title>
</head>
<body>
<スクリプト>
for(let n=1;n<=300;n++){
let str = "<p>" + n + "</p>";
document.write(str);
}
alert(document.body.clientHeight);
alert(window.innerHeight);
</スクリプト>
</body>
</html>
ページ全体の高さを求めたいけどdocument.body.clientHeightで
695と表示されウィンドウの高さと同じになってしまいます。
どうすればちゃんとページの高さが求まりますか？ web 系の質問は、web制作管理板の方のスレで聞いてください！
この板のスレは以前、荒らしが出た時に、緊急避難用に立てたもので、
本来はweb制作管理板の方です >>550
document.body.scrollHeight
document.documentElement.clientHeight >>551はただのコピペなので気にしないように
Web制作板の現状は>>213,253 ここはプログラム板
HTML, DOM, CSS/SASS や、ブラウザ・サイトのページの知識などは、
web制作管理板の方がよい。ウェブ制作
それ以上のフレームワークなどは、WEBプログラミング板。ウェブ開発
YouTube で有名な、雑食系エンジニア・KENTA の本でも、
ウェブ制作はフロントエンド・コーダー、
ウェブ開発はバックエンド・SE みたいに、異なる分野となっている >>552
ありがとう
<!DOCTYPE html>をつけたらdocument.body.clientHeightで取得できるようになりました。 オブジェクトの中で別のプロパティを参照するのはどうすればいいのでしょうか？
thisを使うとundefinedが返ってきて、thisを付けないとまだ定義されてないと
エラーが出ます。下記の例だとsideSpaceを参照したいのですが
うまくいきません。
const sp = {
width: 640,
sideSpace: 20,
space: this.sideSpace * 2,
inner: this.width - this.space,
} 書き直してみたんですがやはりgetSpace()が未定義エラーが出てしまいます。
const sp = {
width: 640,
sideSpace: 20,
get getSpace() {
return this.sidespace * 2;
},
space: getSpace()
}; >>558
const sp = {
width: 640,
sideSpace: 20,
get space() { return this.sideSpace * 2; },
get inner() { return this.width - this.space; },
};
console.log(sp.space); // 40
console.log(sp.inner); // 600 >>558
spaceとinnerをgetterにすれば良い 関数の引数にオブジェクトを使ってる時要素を固定する方法ってある
例えば
function main(obj){
obj.a;
obj.b;
}
みたいなときaとbだけの要素を受け入れたいんだけど 一応その要素があるかで判断して返すって方法はわかるどそれ以外でシンプルな感じで出来ないかなと思って 理解できないから適当に答えるが
objに必要なメンバーだけを抽出複製するメソッドを作ってみては？ aysncとawaitで頭がこんがらがってきました
function sleep() {
return new Promise(resolve => {
setTimeout(()=>resolve(),2000);
});
}
async function run(x) {
var a = await sleep();
var b = await sleep();
return x;
}
run(10).then(v=>console.log(v));
//これは4秒後に10と表示されます
//しかし、、
async function run2(x) {
var a = sleep();
var b = sleep();
var _a=await a;
var _b=await b;
return x;
}
run2(20).then(v=>console.log(v));
//これは２秒後に10と表示されます
//一体なぜ・・
var _a=await a; //ここで２秒待ち、
var _b=await b;//ここで２秒待ち、
だと思ったのですが・・・ >>564
Promise内の処理がいつ開始されるのかを考えてみれば？ >>565,566
なるほど・・？
runの方では
var a=await sleep()のタイミングで返り値Promise内処理がされてresolve()されるまで（２秒）待ち、
次いでvar b=await sleep()の計４秒
これはしっくりくるのですが
一方、run2の方では
var a = sleep();
var b = sleep();
の段階ではPromise内処理は実行されませんがa,b共にPromise格納
var _a=await a;のタイミングでawait Promise
次いでvar _b=await b;await Promise
だと思っていましたが
＞遡ってのawaitは不可
つまり一度変数に格納した場合はrun1のようにはならず、非同期で_a,_b時にPromise内処理がされる
ということでしょうか
run2のようなパターンはあえてそういう処理として使っていいのか、それとも
基本的に変数とかに置かずにawait Promiseした方がいいのか
まだちょっとよくわかりませんがスッキリしました
ありがとうございます runのパターだと非同期ではあるが直列動作
run2はsleepとawaitの間に別の処理を置いたり並列的な動作ができる
どっちがいいかはケースバイケース 同期関数の使い方や処理タイミングはともかく、run2(20)としておきながらコンソールに10と出るのはおかしい asyncとawaitのくだりでついでにもひとつ質問です
function sleep(x) {
return new Promise(resolve => {
setTimeout(()=>resolve(),x*1000);
});
}
async function run1(){
console.log("run1 start");
await sleep(5);
console.log("run1 end");
}
async function run2(){
console.log("run2 start");
await sleep(2);
console.log("run2 end");
}
function run(){
run1();
run2();
}
run();
これはrun1(),run2が非同期処理されて
狙った意図になりました
そこで今度はrun1()が処理しきったあとにrun2()を処理したい
つまり、run1 endと表示されてからrun2 startが表示されて
みたいな同期処理をしたいなと思いました
コールバックすれば簡単なのでしょうがせっかくなので
awaitとか活用した感じで書いてみたくrun1のとこにPromiseを返したりしてみましたが無限ループでブラウザが固まりました
何かいい案はありますでしょうかよろしくおねがいします 改めてやってみたらできました
おそらくブラウザがフリーズしたのはrunとrun1を間違えてたようです
成功したのはこれです↓
こんな感じで合っているのでしょうか
async function run(){
await new Promise(resolve=>{
resolve(run1())
});
run2();
}
run(); asyncな関数はPromiseを返すので
async function run(){
await run1();
run2();
} >>573
！
なるほど
なんかわかってきた気がします・・！
ありがとうございます やりたいことはざっくり>>571を例にすると
run1やrun2は非同期、同期どちらでも使えるようにしておいて
awaitするときは同期、しないときは非同期
という感じなのですが
他人からみてわかりにくいですかね・・？
もちろんrunの名前と中身によりますが
run1();
run2();
↑これは非同期だろうな
await run1();
console.log("途中");
await run2();
console.log("最後");
↑awaitついてるから同期だろうな
みたいに直感的にフローがわかるように思うのですが
もしかしてバグ生みそうな何かがあるのでしょうか 補足
run1,2自体は非同期ではない？ですね
run1,2内のawaitの部分が非同期なだけであって
そこら辺、中身みないとわかりにくいですかね >>571-572
回りくどい処理しか見えなくて、その書き方をする意図の理解に苦しむ
run1とrun2をPromise化してPromise.all()ではダメなのか？ コールバック関数入れ子呼び出し地獄
↓
Promise then数珠繋ぎ地獄
↓
async await
と書き方が変わって来たのでPromise thenとasync awaitを混ぜて書くのはおかしい。
使いやすい方を使えば良いと思うけど非同期処理で取得したデータをいくつも使う場合はasync awaitで書いたほうがスッキリ書けるよ。
Promise thenみたいだとthen途中まで中途半端に行コピペするミスとか起きる >>578
ありがとうございますやってみました
function sleep(x) {
setTimeout(()=>console.log("sleep",x),x*1000)
}
function msg(n){
console.log(n)
}
function run1(){
return new Promise(resolve=>{
msg("run1 start");
sleep(3); //この非同期処理を同期処理にしたい
msg("run1 end");
resolve("run1 success");
})
}
await Promise.all([run1()]).then(result=>{console.log(result)});
がsleep(3)のとこが非同期になってしまいます・・ >>581
たしかにそうでした・・
とりあえずすべてpromise化してnew Promise内にPromiseとかやってみましたが
うまくいかず・・
>>579
そういう系譜があったのですね
とりあえず現状はうまくいっているasync awaitでやってみます
ありがとうございました もうめちゃくちゃだなw
そもそも何をしたいのかすらわからなくなった 横からすみません！
async や await は関数の頭だけに付けれる認識でしょうか
単なるメソッドの前にawaitをつけれないんですね
たとえばアラート1と2がテレコにしたくないからといって下記のような書き方は不可ということでよいでしょうか
async hoge(){
await alert("1");
alert("2");
} >>584
async function hoge() {
await alert('1');
alert('2');
} http://newmofu.doorblog.jp
このサイトなんですが、RSSはjavascriptで取得しているんでしょうか？ >>584
classメソッドはそんな感じでok
でもそのalertがwindow.alertなのだとしたらawaitは無意味 >>587
えっ？つまりメソッドにもawaitはつけれるんですかね
いちいちfunctionを小分けにする必要のないこともあるんですね クラス内で実行中のメソッドを多重実行したくないとき
みなさんはどうしていますか
class hoge{
constructor(){
this.isStreaming=false;
}
stream(){
if(this.isStreaming){
console.log("実行中");
return
}else{
this.isStreaming=true;
console.log("実行");
}
const self=this;
//何か実行中...
setTimeout(()=>{self.isStreaming=false;console.log("終了")},3*1000);
}
}
var h=new hoge();
h.stream();
h.stream();
setTimeout(h.stream,5*1000);
これだと仮にstream1,2,3..と増えていったらisStreaming1,2,3...と増えていくと思うのですが
そういうのを回避するうまいやり方とかあるのでしょうか >>589
例えば、クロージャを作って、メソッドのステータスをクロージャ内に格納させるとか。
class hoge {
stream(){
let isStreaming = false;
return function() {
if(isStreaming){
console.log("実行中")
}else{
isStreaming = true;
console.log("実行")
setTimeout(() => { isStreaming = false; console.log("終了") }, 3 * 1000);
}
}
}
}
let h = new hoge();
stream = h.stream();
setInterval(stream ,1000); >>593
WeakMapオブジェクトなんてものがあるのですね
これだと大量に扱う場合は便利かもしれません
ありがとうございます >>592
functionを引数で受け取れるようにするといいかもしれない。
class hoge {
makeStream(f){
let isStreaming = false;
return function() {
if(isStreaming){
console.log("実行中");
}else{
isStreaming = true;
console.log("実行");
f();
setTimeout(() => { isStreaming = false; console.log("終了") }, 3 * 1000);
}
}
}
}
let h = new hoge();
stream1 = h.makeStream(()=>{console.log("なんかの処理1")});
stream2 = h.makeStream(()=>{console.log("なんかの処理2")}); >>595
なるほど
これなら分けて管理しつつ多重実行禁止メソッドを量産できそうですね
ありがとうございます！ 今月くらいからyoutube動画埋め込んだページのdev toolコンソール見るとservice workerが大量のエラー吐くようになったんだが
jsでクライアント端末側でどうにかできる？ 何かのサービスが終わったとか？
やり方が変更されたとか？ var ary=["a","b","c"];
for(let i in ary){
if(i===0){ continue }
console.log(i,typeof i,"int違う・・")
}
for inの罠にハマってしまいました
こういうiも取りたいときってforEachだったり
配列のlengthとってforで回したりの方がいいんですかね？ >>600
>>iも取りたいとき
何が言いたいのかさっぱりわからん
コードの目的（期待するログ表示）を明示しよう ixを用意してまわしてもいいし、オブジェクトの
entries 使ってfor ofでまわしてもいい。
正直超些細なことでどっちでもいい。 >>600
インデックス値のプロパティはString型
int型というものはない
最も、i=1のfor文で十分に読めるがね… >>601
わかりませんかね？
そんな難しいことは書いてないと思うのですが・・
>>602,603
なるほど、array回すときの何か慣習があるのかなと思い質問しました
600例のary程度ならfor(let i in ary){
i=i-0;であえて数値に変換するか、if(i==0)にするか
とかしようと思っていましたが素直に
for(i=1;i<ary.length;i++)的な書き方で行こうかなと思います
ありがとうございました >>604
疎な配列を考慮する場合、for文とhasOwnPropertyを併用する必要がある
配列でfor-in文を使うと他で拡張されたプロパティも拾うので、理由がなければお勧めしない
keysやentriesからsliceしてfor-ofでも良い
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/keys keysやentriesからfor文の方がスマートか >>605-606
なるほどいろんな書き方がありますね
配列の値回すだけの目的にfor-in文だとトラブルとかパッとみ可読性落ちる気もするので辞めといたほうが良さそうですね
ありがとうございました >>608
for-inは仕様上、非推奨じゃない
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in
prototype拡張したコードを考慮してないコードでバグを誘発させるだけ
https://www.google.com/search?q=for-in+prototype%E6%B1%9A%E6%9F%93
理解して使う分には問題ないが、コーディング規約で縛られていれば使えないし、チーム内に初心者が一人いるだけでバグを作り込むリスクがある
Object.keys() 等の他のプロパティ列挙機能で要件を満たせるなら、for-inを使う理由はない
要件を見直してみれば、ほとんどの場合にfor-inを使う必要がないことが分かるはずだ if (++score == 10)
if (score == 10)ならばわかるのですが、
ここに++が加わることでどのような意味になりますか？ async/awaitのことですが
await hoge();
としたときに、hogeが実行される前に何かを待つのか、
それともhogeが実行されその完了を待つのか、
どちらでしょうか
それと、promiseを返す関数かそうでないかはどうやって見分けますか async関数は記述は普通の関数だけどPromiseを返す関数。awaitは完了を待つ 完了を待つには待つけど
何を以て完了とするかはそれぞれの関数が決めること
見分ける方法は無いしそもそも得体の知れない関数を使っちゃ駄目 こんにちは>>613です
蒸し返しですみませんが
awaitをつける行じたいがapiなどの重い処理なんですかね
それともawaitはthenのような意味で処理を待つ行なんですかね
つまりawaitは待つ側なのか、待たされる側なのか、という質問です awaitは非同期処理の完了を待つ。非同期処理を順次実行する時に使う。
処理待ちでブラウザが無反応にならないようにする目的ならsetTimeoutとかsetIntervalとかWeb Workers使うんじゃないかな >>617で書いた、「待つ側」と「待たされる側」てのは同じ意味でしたねw
待つ側なのか、待たせる側なのか、という質問です >>581
Top-level Await
従来、JavaScriptのawaitはasync function内でしか使えなかったが、
今後はasync functionの外、top levelでもawaitが使えるようになる
ES2022より クロージャーであるsetter,getterを持つクラスを作ったのですが
クロージャーをセットするときにパラメーターを渡したいとき、どうすればいいのでしょうか
class Hoge{
constructor(){
this._f=null;
}
set f(f){
this._f=f();
}
get f(){
return this._f;
}
}
const h = new Hoge(10,20);
h.f = function(){
let r=0;
return {
sum:(a,b)=>(r+=a+b),
r:()=>console.log(r)
}
}
h.f.sum(1,2);
h.f.sum(3,4);
h.f.r(); // 10
↑はこれで良いのですが、例えば
h.f = function(m){
let r=0;
return {
sum:(a,b)=>(r+=(a+b)*m),
r:()=>console.log(r)
}
}
みたいにパラメーターmを渡したいです
しかし、setterには引数１つしか渡せないので詰みました。
かと言って
f(f,prms={}){ this._f=f(prms) }
get f(){}
はできません
setter,getterを使わずに、一時保存的な変数を増やしてゴリゴリ書くしかないでしょうか
つづく つづき>>621
苦肉の策として、h.fに配列を渡すことにしました。
が、、コレジャナイ感が・・
しかし正解がわからないのでこれで良いのかどうかすらわかりません。
何か別にスマートな書き方はあるのでしょうか
class Hoge{
constructor(){
this._f=null;
}
set f(ary){
this._f=ary[0](ary[1]);
}
get f(){
return this._f;
}
}
const h = new Hoge(10,20);
h.f = [function({m=1}){
let r=0;
return {
sum:(a,b)=>(r+=a+b),
r:(msg)=>console.log(msg,r*m)
}
},{m:0.5}];
h.f.sum(1,2);
h.f.sum(3,4);
h.f.r("(1+2+3+4)*0.5 = "); >>622
setterに関数を渡すのではなく、クロージャを渡すのではだめ？
class Hoge{
constructor(){this._f=null}
set f(f) {this._f = f}
get f() { return this._f}
}
const h = new Hoge()
h.f = (m => {
let r=0;
return {sum: (a,b) => r+=(a+b)*m, r:() => console.log(r)}
})(3);
h.f.sum(1,2);
h.f.sum(3,4);
h.f.r() >>623
いえ全然アリです
個人的に
function hogeclosure1({m,n}){return ()=>}
function hogeclosure2({m,n}){return ()=>}
var prms1={m:1,n:2};
var prms2={m:11,n:22};
h.f(hogeclosure1,prms2);
な書き方がしたいなと思ったのですが（prmsの精査や加工をクラス側で処理できるので）、
h.f=hogeclosure1(prms);
検討してみます
ありがとうございました >>621
関数を返す関数を使う
部分適用でググって >>622
setterに関数を渡すのではなく、クロージャを渡すのではだめ？
class Hoge{
constructor(){this._f=null}
set f(f) {this._f = f}
get f() { return this._f}
}
const h = new Hoge()
h.f = (m => {
let r=0;
return {sum: (a,b) => r+=(a+b)*m, r:() => console.log(r)}
})(3);
h.f.sum(1,2);
h.f.sum(3,4);
h.f.r() 頭がこんがらがってくる事象に遭遇しました
var arr=[[1,2,3],[4,5,6],[7,8,9]];
function hoge(){
function h(arr){
var res=[];
for(var i=0;i<arr.length;i++){
var _d=arr[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
return (arr)=>h(arr)
}
var ho=hoge();
console.log(ho(arr.concat()));//1回目
console.log(ho(arr.concat()));//2回目
１回目、２回目
共に.concat()でディープコピーしたデータを渡したはずなのですが
arr[i][1]=arr[i][1]*2のとこでなぜか前回のデータが反映されてます
クロージャーだから・・？という何となくしかわからないのですが
そうならないためにarr.concat()したのにな？？？という感じです。
for文でvar _d=arr[1].concat()としてやるともちろん１回目も２回目も同じ結果になります。
ただ、arr[1].concat()しなかった場合も、そもそも渡したarrがarr.concat()なので
function hに渡され処理した結果も独立のデータになりそうな気がするのですが、なぜなんでしょうか？？ 補足です
改めてクロージャー無しでやってみたら
function hoge(){
var res=[];
for(var i=0;i<arr.length;i++){
var _d=arr[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
var arr=[[1,2,3],[4,5,6],[7,8,9]];
console.log(hoge(arr.concat()));//1回目
console.log(hoge(arr.concat()));//2回目
console.log(arr);
これもまた変更されてました・・ 連投すみません
>>628はhoge()で引数とってないのでおかしいですね
こうでした↓
function hoge(data){
var res=[];
for(var i=0;i<data.length;i++){
var _d=data[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
var arr=[[1,2,3],[4,5,6],[7,8,9]];
console.log(hoge(arr.concat()));//1回目
console.log(hoge(arr.concat()));//2回目
console.log(arr); 自己解決しました
.concat()ディープコピーかと思ったらシャローコピーでした・・
hoge(JSON.parse(JSON.stringify(arr)));
で行けました・・ すみません。
初心者なんですが、@などのデコレータ？の意味が調べてもよくわからないんですけど教えてくれませんか？ javascriptって、キャッチされなかった例外が最終的に集約されるハンドラってある？
.NETのDispatcherUnhandledExceptionみたいなやつ
ググってみたけど、window.unhandledrejectionくらいしか見つからんかった
これって名前的にpromiseのrejectを実装してないときにしか使われんよね？ ㌧クス
調べてみるとonerrorだとpromiseのrejectはハンドリングしてくれないっぽいね
onerrorとunhandledreject両方を使うのがいいんかなぁ
awaitでrejectしたときってどっちにハンドリングされるんだろ？明日実際に試してみるかー 非同期は文脈が異なる・異世界だから、通信できない
通信不能な物に対しては、timeout ぐらいしか、やりようがない スクロールバーがスクロール量500を超えたら画像を徐々に濃くして表示、500より少なかったら画像を徐々に薄くして非表示にするのってどうやるんですか？
スクロール方向で場合分けしてスクロールバーが500をまたいだかどうか判定して
setIntervalを使ってopacityで濃くしたり薄くしたりするしかないんですか？ スクロール位置で判定すれば？
scrollTop だったかな？ 奇抜なアイデアでもググると出てきてしまう昨今ですが
あっと驚く理不尽な処理はありませんか
棺桶あけたら自分が中にいましたみたいな >>639
挙動は仕様書に書かれているため、仕様を理解すればするほど驚く機会は少なくなる
普段から勉強をせず、プログラミング系サイトを巡回すれば、「あっと驚く理不尽な処理」に出会える可能性を高められるだろう
(まともな技術者なら自らの無知を恥じるべきだろうが) ページをスムーズに移動するときscrollToを使いますが
これみたいにelementをスムーズに移動させる関数はありますか？ <div id="test">
<a href="aaa.html"></a>
<a href="bbb.html"></a>
</div>
このdivの中にあるhrefを全て取得するには
どうやったらいいんですか?
aにidやclassはつけないものとします。 document.querySelectorAll document.querySelectorはいま流行りなんですか？
document.getElementByIdしか知らなかったけど。 流行りで決めるスタンスは分からんが、ノード検索系は既に成熟してる感ある
xpathはなぜか最新仕様が実装されないけど javascriptって初心者向けと言われているけど、難しいよね？ javascriptの勉強中です。
Wordでコード試作してEdgeのコンソールにコピペしたら、クォーテーションやダブルクォーテーションのある行で必ずエラーになります。
どうもwordで書いたことが問題らしいです。
同じコードを色んなファイル形式で書いてからコンソールで検証した結果、
・最初からコンソールに直接書くと、正常に作動
・テキストドキュメントに書いてコンソールにコピペすると、正常に作動
・最初からコンソールに書き込んだものをwordにコピペして、フォントを適当に変えた後、コンソールにコピペすると正常に作動
・wordに書いたコードをコンソールにコピペするとクオーテーションのある行でエラーになる。
・wordで書いたコード(そのままコンソールにコピペするとエラー)の全てのクォーテーションに、コンソールに書いたクォーテーションを上書きコピペ(元の書式を保持)すると、コンソール上で正常に作動するようになる
という検証結果になりました。
試作コードをwordじゃなくテキストドキュメントで作るようにしてからは、今のところ問題は起きていないです。
で、質問なんですが、
どうもword形式で書いたクォーテーションやダブルクォーテーションは、内部的に問題がありそうなのですが、理由を詳しく知っている方はいますか?
あと、編集や保存が楽なテキスト形式でコードを試作したいとき、みなさんは何を使ってますか? ブラウザにいれてるviolentmonkeyのエディタ使ってる >>654
それだ…!!
「"」で確認してみたけど、まったく同じキーで入力したのに
Wordで入力…レフトダブルクォーテーション、文字コードは201C、文字は「“」
コンソールで入力…ダブルクォーテーション、文字コードは0022、文字は「"」
全く同じ入力方法、フォントも同じ。見た目もそっくりだけど、200%に拡大したら確かに違う文字ですた。
>>655、>>656
ありがとん。
vsコード持ってるから今度からそっちにしてみます。
>>657
それがネタじゃないんだな(泣)。
トライアンドエラーでコード構築の練習をしたかったので、楽なソフトでコードを書きたかったんよ。
wordならダブルクリックで立ち上がるし、字も見やすい大きさに拡大できるし、採用しなかったコードも適当にストックできて、楽そうだなぁ、と…。
まさか文字コード違いで問題が起きるとは想像もしなかったにゃ。 >>658
それWordのオートコレクト機能
オフにできたと思う
でも普通にvscode使う方がいいよ >>659
オートコレクト機能、そんなのもあるのか!!
了解しますた。
まぁvscodeの方が無難よね。間違いないです。 何気にwordでコード書いてる人みたのネット上ですら初めてかもしれん >>644
jQuery で、id="test" 直下・子(a, c)と子孫(b)を取得した
<div id="test">
<a href="a.html"></a>
<div><a href="b.html"></a></div>
<a href="c.html"></a>
</div>
$( function ( ) {
function get_a( selector ) {
return $( selector ).map( function( ) { return $( this ).attr( 'href' ); } );
}
const children = get_a( '#test > a' )
const descendants = get_a( '#test a' )
console.log( children, descendants )
} );
出力
['a.html', 'c.html'] // 直下・子のみ
['a.html', 'b.html', 'c.html'] // 子孫 proxyってどうやってfor inやforEachすればいいですか https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
↑でbindのメリットを考えてみたのですが
const module2 = {x:333}
const hogeGetX = unboundGetX.bind(module2);
console.log(hogeGetX());
xの値を変更しつつmoduleのgetXはそのまま使える、
みたいなことでしょうか？？ JavaScript初心者なんですが、marindeckっていうTwitterクライアントアプリでとあることがしたくて下のコードを書いて実行したんですがcan't create variable duplicate "title"ってエラーが出てしまいました。調べてみたらwebkitが悪いらしいんですが解決方法が分からなくて困ってます。titleを変えたら次はheaderが駄目になって、headerを変えたらitem、最終的にはtitleのところがエラーになります。constをletやvarに変えても駄目でした。どうすればいいでしょうか？
コード(他の部分は長いので載せてません)
const header = document.querySelectorAll(".column-heading");
const title = document.querySelectorAll(".column-heading,.column-title-edit-box");
const item = document.querySelectorAll(".md-navbar-item"); >>665
スコープを切る
(function() {
const header = …
})(); >>664
よくあるのは、無名のcallback 関数のthis が、window を指してしまうのを避けるために、bind する。
setTimeout( function( ) { this.count++ }.bind( this ), 100 )
この場合、thisをthatに代入して使うのも簡単。
const that = this
setTimeout( function( ) { that.count++ }, 100 )
ES2015では、アロー関数も使える。
setTimeout( ( ) => { this.count++ }, 100 )
だから最近は、bind する事も減った
JavaScript は、thisの変動が非常に難しい。
thisが何を指しているのか分からない
それで、jQuery の$( this ) がよく使われる >>666
>>667
スコープを切る方法で行けました！お二人ともありがとうございました JavaScriptでwebアプリを作るにはNode.jsを使うのでしょうか？ Ruby on Rails でも当然、Node.js を使う。
ただし、Rails 7, Elixir のPhoenix 1.6 からは、脱webpack でesbuild に変わったけど
それでも開発環境では、webpack-dev-server も使うし、
VSCode, Node.js, npm/npx, yarn, タスクランナーのGulp/npm-scripts なども必須 window.addEventListener(
"load",
function(){
処理
}
);
これだとページ全体のhtmlと画像の読み込みが完了してから実行するみたいですが
画像の読み込みは完了しなくてもhtmlだけ読み込んだら実行とするようにするにはどうすればいいですか？ let e = new Event('scroll');
window.dispatchEvent(e);
window.addEventListener(
"scroll",
function(e){
alert("スクロール");
}
);
スクロールバーでスクロールしなくてもスクロールイベント内の処理を実行したいんだけど
このようにやってもスクロールと表示されませんでした。
どうやればいいんでしょうか？ >>676
スクロールバーを動かしたときとプログラムを実行したときの
どっちでも動くようにしたいので
上ではalertだけど実際はもっと長い処理です >>675
window以外でscrollイベントが発火してる可能性 >>677
いやじゃなくてリスナー登録する前に発火させてるから obj=document.getElementsByClassName('className');
でclassNameがゲットできますが、
ワイルドカード*(使えない)を使って
obj=document.getElementsByClassName('className-*');
みたいにゲットする方法ないですか？ document.querySelectorAllでやれば [JavaScript で特定の長さの配列を作成する | Delft スタック]
https://www.delftstack.com/ja/howto/javascript/javascript-create-array-of-length/
で new Array(5)とnewを使ったやつと、ただのArray(5)がでてくるけど、その違いは何？
Array(5)ってnew無しで呼ぶ意味は？
教えてください。 > new Array(3)
[ <3 empty items> ]
> Array(3)
[ <3 empty items> ]
> Array(3).length
3
> a = Array(3); a.length = 3; a
[ <3 empty items> ]
> [...Array(3)]
[ undefined, undefined, undefined ]
> Array(3).reduce((r, _) => r + _, 0)
0
> Reflect.construct(Array, [3])
[ <3 empty items> ]
> Reflect.construct(Array, {length: 3})
[ undefined, undefined, undefined ]
> Reflect.construct(Array, {length: 3}).reduce((r, _) => r + _, 0)
NaN
> Reflect.construct(Array, {length: 3}).reduce(r => ++r, 0)
3
> Reflect.construct(Array, {length: 3}).reduce((r, _) => r + _, '')
'undefinedundefinedundefined'
> Array(3).reduce(r => ++r, 0)
0 >> 686 >>687
ありがとうございます。
もっとも687の途中からは理解できませんが。
しかし、new Array(3)とかしても実際３つの要素（の参照）を格納する場所が確保されるわけじゃないということなんですね
[ <3 empty items> ]
と
[ undefined, undefined, undefined ]
の違い。 やっぱりArray(3)でも、領域は確保されてるけど、初期化されてないということなのですか？
Javaとかじゃnullで初期化されてるけど。Javascriptじゃundefinedでさえも代入されてない？ a = Array(3)
for(const i of a){
console.log(i)
}
を実行すると、確かにundefinedが３つ要素としてあるみたいですが 以下を実行してみると
> a = Array[3]
> a[1] = 7;
> a
[ <1 empty item>, 2, <1 empty item> ]
empty itemってのはundefinedとは違う？ forで取り出すとundefinedになる？
やっまりArray(3)とかでもメモリ領域は確保されてるみたいですね 間違った
> a = Array[3]
> a[1] = 7;
> a
[ <1 empty item>, 7, <1 empty item> ]
でした。書き込み多くなってすみません。 素のjavascriptでanimateを使って３秒毎に100pxずつelementを移動したいんだけど
let a=0;
setInterval(
function(){
let aa = a + "px";
let bb = a + 100 + "px";
a+=100;
element.animate(
{left:[aa,bb]},
{iterations:1,fill:"forwords";duration:1000}
);
},
3000
);
何か問題点はありますか？もっといい方法はありますか？ newをつけないから実体がなくてundefinedなんじゃないの
それに無理やり要素をぶっこんだら実体ができてemptyになるとか >>693
移動回数が無限ってことならそのままでいいけど、一定条件（動的な条件）を満たした場合に移動を終了させたいならclearIntervalを使おう
移動回数が決まってる場合はハナからそのようなkeyframeを書くことでsetIntervalを使わずに済ませることもできるはず >>695
なるほど
移動回数が決まっている場合のkeyframeはどう書けばいいですか？ >>691
Array(3) や new Array(3)
の場合は
{
length:3
}
[undefined, undefined, undefined]
とか
Array(3).fill(undefined)
の場合は
{
length:3,
0: undefined,
1: undefined,
2: undefined
}
arr = Array(3) ってやって arr[0] で undefined が返ってくるのは
arr[100] とか arr[‘hoge’] で undefined が返ってくるのと同じことです
存在しないプロパティにアクセスしたから undefined
疎な配列 とか sparse array で検索するとちょっとは疑問解消されるかもしれないです >>697
ありがとうございます。
JavaScriptって、やっぱりこの辺は特殊ですね。
お手軽なスクリプト言語としてはじまって、オブジェクトがすごい動的でハッシュマップみたいに扱えて、 Winでプログラミングするためにnotepad++とATOMに辿り着いたんですが、ちょくちょくスペル間違いをしてしまい気が付かずに延々と探してるみたいなことになっちゃってます
間違えた場合に色が変わって教えてくれるみたいな機能があれば教えて欲しいです >>699
なぜそこまで探してVSCode使わんのだ……？ >>700
かなり前の話なんですけど軽く教えてくれた人からhtmlとかプログラミングはテキストエディタでやればいいとか言われたんで存在も知らなかったです
結構よさげですねコレ >>701
ちゃんとプログラミング用のエディタなら
一回設定した変数名はそのまま入力候補として出てくる
もし英語の誤字/脱字が気になるなら
拡張機能のCode Spell Checker辺りを入れれば
一般的に使われる英単語なら誤ってる所に印付けてくれる エディタ戦争でも始める気か？
主要なエディタを全て試して使いこなせるものを選べとしか
vi
vim
Emacs
Sublime Text
Atom
Visual Studio Code >>705
プログラミング関連機能はないと思ってたが、今は違う？
>>706
懐かしい名前だな
開発停止してるっぽいが、今でも使ってる人いる？ Javascript勉強したらJavaも使えるようになりますか？ EmacsenやVSCはエディタじゃないかもしれんね。
エディタと言い張る低能が多数派なので、我々良識派が肩身の狭い思いをしてるけども。 >>704
今の時代、
VSCode以外は悪ですよ。 HTMLやCSSをプログラミングと呼ぶ低能がいる。
それはこの2chを作ったといわれる(彼のスキルで作れるわけがない)ひろゆきだ。 難しすぎワロスw
片手間じゃ一生まともなの書ける気しない ==の自動型変換？がキモいから毎回確実に===とキャスト使っていい？ むしろそうすべき
==をつかっていいのはobj==undefinedとする時だけ これは見とけっておすすめのYouTubeある？
一通り終わって次何するか悩んでる HTML/CSSと勉強してきて、JavaScriptの勉強を始めました。
if文やfor文が出てくると一気にプログラミングを勉強してるって感じになりますね。 自分が「プログラミングできます」と言われたいだけがために
HTML/CSSをプログラミング言語の仲間にしたい。 HTML/CSSのプログラマですが質問ありますか？ プログラミング言語の定義は知らないが
コンピュータに命令する言語とすれば、HTML/CSSも立派なプログラミン言語だよ。
JavaScriptより高水準のね。 >>725
きみは低悩
>>726
きみも低悩
これはわたしだけでなくプログラマー99.9999999%のみんなの認識だ。 低脳ザルたちは頭が悪いからそれを良く見せようと必死。 私プログラミングが趣味なんです
へえ、どの言語やってるんですか？
HTMLです HTML/CSSプログラマは
XMLやJSONもプログラミング言語だと思ってるの？ おれトップレベルのhtml css使いだぞ
年収はお前らの5倍くらいある RPGツクールはプログラミング言語ですか？
マインクラフトはプログラミング言語ですか？
ポケモンピカチュウをバグらせるのはプログラミング言語ですか？ 英語の動画見てるとhtmlをプログラミング言語と呼んでるな 「HTML CSS チューリング完全」と検索してみるが良い。
我々がなぜこ奴らをプログラミング言語とみなしているか理解できるであろう。
そして、プログラミング言語であることを理解せずに使えば、セキュリティ穴になるのだ。 >>731
あなた低脳ザル
>>733
You are another tiny-brain monkey. 74 デフォルトの名無しさん (ﾜｯﾁｮｲ 372f-IS5D [218.220.251.107]) 2021/11/20(土) 20:02:17.98 ID:4VXr5Xxs0
仕事で使ってるサイトをJavascriptで自動化できませんか？
たとえば出勤と退勤のときの時間を管理するのに「勤次郎」というサイトを使ってるんだけど
毎回ログインしたあといちいち入力するのが面倒くさい。 プログラム中でs=文字列という形でsに文字列を格納しました
これをクリップボードにコピーするにはどうしたらいいでしょうか？
ちょっと調べるとselectしてcopyするようなのが出てきたのですが、
変数だけで具体的に文字列をselectできるわけではないのでうまくいきませんでした 218.220.251.107は半年の間にずいぶん偉くなったもんだな >>737
半年前な上、スレチだけど
そういうのを自動化したいならRPA使った方が早いって今更だけどアドバイスしたい……
UiPathとか使えばわりとサクッと実装できる タコペッティのユーチューブチャンネルより
・週4日勤務の導入て゛、従業員の生産性も、幸福度も、お客さんの満足度も、全てが向上するという事実ww
・【朗報】日本企業、めちゃめちゃ働きやすくなっているw
・職務範囲も勤務地も不明確な正社員ってオワコンし゛ゃね？受け持つ仕事が辞令
ひとつで変更になり、勤務地も会社都合で決まるって冷静に考えてヤバすぎだろ...
・1つの会社に長く勤めるのはもう辞めませんか？勤続年数が増えるほど、生産性は下がります...
・リモートワークとかもう古いからw これからは働く場所も時間も自由に選べる「ABW」の時代です
・【悲報】上場大企業の年収、スタートアップ企業とほぼ同じであることが判明w
え？大企業に行く意味ある...？
・【悲報】有名大学を出て大企業に入るという勝ち組ロード、完全にオワコン... >>727
それを成立させるために何億人いるんだよ、プログラマ constだとあとで再代入可の変数にしたい場合letに書き直すのがめんどくさいから
最初からconst使わずに全部letにした方がいいのではないでしょうか？ 俺も全てlet使ってる
流石にvarは使わない
何がおかしいのかさっぱりわからない 【渡辺裕之(66)】 ワクチン鬱？ 【上島竜兵(61)】
://egg.5ch.net/test/read.cgi/cafe60/1652426631/l50
質問です。
予め指定したフォルダ内にある全てのファイル名を読み取るにはどうするといいでしょうか？ >>754
サーバのフォルダならサーバサイドスクリプトで読み取る >>755
ありがとうございます。
やってみます。 ちゃんとした他のプログラミング言語と足並みを揃えるべくES6でスコープを考慮した結果がletのはず
最近出版された本でもvarを使っているのはなんなのか… どう覚えているのか知らないが、varは禁止されていない
var,let const,関数宣言を全て使いこなすのがベスト 関数コードを巨大にしなければ、関数スコープで十分な局面は多い
パフォーマンスへの影響を踏まえて使い分けてるな バベルからトランスコンパイルしたらvarって出てくる 再宣言と巻き上げに関するバグを生むリスクを取ってまでvarを使う場面があるのかね varは初期の数ヶ月から数年の期間Netscapeでは
function F() {var v = 'v';} ;alert(F.v);// v
だった。これは今でいう
class C {static s = 's'} C.s// s
constはmozillaで99年から00年に普通にみんなに使われるようになった。ただし細部で約20年後(というか約15年後かな)の今の仕様とは違う。
あと JScript .netでもconstは使えたから、複数のプラットフォームで20年選手ということになる。
letも今のものとは細部で違うが、私は2007年初期にJS1.7で使っている。
この時期のpython化は黒歴史になっているから、comprehensionは完全に消されたな。
当初は[for (i in [0, 1, 2]) i]と書けた。これは[i for i in range(3)]のこと。
inじゃなくofになって、今はそれも消されたな。
しかし残っているものの方がむしろ多くて、let以外にも分割代入なんかもこの15年前から10年前くらいまでの黒歴史期間で導入されていた。
で、何が言いたいかというと、let要らないんだよな。だって、comprehensionでlet/const無しでレキシカルスコープ実現できてたじゃん。
だから、レキシカルで初登場時に暗黙のletでいいじゃんって思う。 javascript → varを非推奨
c# → varを推奨
これだから動的言語は欠陥なんだよな 話の腰を折って知識の開陳したいだけならよそでやってくれるかな 最近勉強を始めた初学者です
参考書には基本的にletで記述されています
varはこんなのもあるよって感じで紹介だけだなあ 日本国内でjavascriptのプログラマは何人いるのでしょうか？ >>771
ええーーーーーーーーーーーーーーーーー。
そんなにいるの？ javascriptは初心者向けだから半日もあればマスターできるぞ >>776
未だにthree.jsすら使えこなせない俺って…。
で、javascriptのプログラマーは日本国内でどれ位いる？ プログラマーであればjavascript使えるからほぼプログラマー人口と同じくらい >>779
https://hrzine.jp/article/detail/2123
日本人プログラマーは約１００万人。
でもjavascriptを使いこなせている人はそんなにたくさんいるかな？ >>781
そもそもその統計はおかしい
一人でいくつも言語を使うのが当たり前
4.4％ってのはjavascript「しか」使えない人口だろう
ということはやはりjavascriptを使える人口は100万人に近くなる >>782
アンケートでは、現在使っているプログラミング言語を3つまで挙げてもらった。
JavaScriptは２位。
最も使っている言語を1つだけ挙げてもらった。
上位３位で４３．２％を占める。
１００万人?４３．２％で約４万３千人位がJavaScriptを使えるかと。 >>785
すごい
43万人がjavascriptのスペシャリストプログラマー
残りの57万人もほぼ使えるのだろうが初心者向け言語だから重視していないんだろうな element.animate(
{
left:["100px","200px","300px","400px","500px"]
},
{duration:6000}
);
というアニメーションの場合で
leftが100px,200px・・・500pxになった毎にalert表示したいんだけどどうやればできますか？
各位置に達したら発生するイベントはないんでしょうか？ for(const left of ["100px","200px","300px","400px","500px"]){
await element.animate({left}, {duration:1200, fill:'forwards'}).finished
alert(left)
}
こんな感じだろうが、うちのブラウザではalertと非同期処理の相性が悪くて
期待通りには動かんな >>789d
どうもっす
awaitっていうのは何ですか？あと1200という数字はどこから来たんですか？ >>790
横からだけど、awaitはpromiseオブジェクトの解決(成功・失敗)まで待機する構文
1200は6000(6秒)をキーフレームの数(ループ回数=5)で割ったもの >>789
理屈は分からんけどダミーのアニメーションか何かを挟むと上手くいくっぽい
https://jsfiddle.net/0c3hmbok/ >>793
>>789の書き方だとプロミスチェーンされないからだと思います
await element.animate({left}, {duration:1200, fill:'forwards'}).finished
await alert(left)
でいけました
await element.animate({left}, {duration:1200, fill:'forwards'}).finished.then( () => { alert(left) } )
でもOK >>794
うちの環境だとalertにawait付けただけでは上手くいかなかったのよ
http://jsfiddle.net/m3pq6djw/
ダイアログでOK押したときに●がワープしない？ >>795
確認しました
朝はSafariだったので
SafariとFirefoxではそもそもawaitつけなくても>>789で問題なく動く
Chromeはawaitあるなし関係なくダメ、全体をthenに書き換えてもダメ
ちなみに全てMac版です
色々試してみた感じ
Chromeはalert()のダイアログを出したタイミングで次のPromiseを実行する
画面は止まってるが計算は実行されているので、OKでダイアログ閉じた時に辻褄合わせでワープする
SafariとFirefoxはダイアログのOKボタンを押したタイミングで次のPromiseを実行する
それまで画面も計算も止まってるのでダイアログ閉じてからアニメーションが始まる
かなあと思ったりしましたが、実際のところはわからないです
まあでもChromeで動かないならダメですね 戻り値のある confirm() や prompt() ならイケそうな気がするけど、どうだろう >>795をawait confirmに変えてみたけど挙動は変化なし そりゃPromise返さないやつにawait付けたところで変わるわけないわな
chromiumのモダールダイアログの処理に問題あるんだろうね awaitの後の式の値がPromiseでない場合はPromise.resolve()に変換されるってことなので
最初はそこかと思ったんですよね
>>793がどうしてChromeでちゃんと動くのかを考えたんだけど
おそらくChromeはダイアログ出した段階でPromiseｂﾌ中身を実行しｂﾄるけど
OKを押すまでPromiseの状態は変えないんだと思います
つまりダミーのアニメーションはすぐ実行完了するけどOKを押すまではPendingなので次に行かない
なのでPendingで返却してすぐにFulfilledになるPromiseにすりゃいいのではと思って試したら多分できた
https://jsfiddle.net/v2c7baL3/ ようやく大手を振ってIEサポート拒否出来るわ
IEモードなんて知らん クラス内のコンストラクタについてこの認識で合ってますか？
constructor(引数){this.プロパティ名 = 値;}
1.受け取った引数は値に格納され
2.インスタンス生成することで値が「this.プロパティ名」に代入され
3.同時に「this.プロパティ名」はインスタンスに渡される。
ググれどググれどページによってニュアンスが違くて混乱しております。 setInterval内でループ毎に変化するelementがあってそのelementに対してのaddEventListenerを使う場合は
イベントが蓄積されていくからremoveEventListenerでループ毎に削除する必要があるけど
プロミスは１回のイベントが実行されれば蓄積されないので削除しなくていいって聞いたけど正しいんですか？ >>796
animateを関数で囲ってanimation.finished.then毎にその関数を再起呼び出しでできました これだと、単に変数に文字列 "a" を代入しただけに思えるけど
どうしてobjのプロパティが代入されるんですか？
const obj = {a: 10, b:20};
const num = 'a';
console.log(obj[num]); // 10 >>805
下記は共にオブジェクトのaプロパティを参照する式で、結果としてaプロパティの値が得られる
obj.a
obj['a'] >>805
console.log(obj['a']) で同じ動作になるから obj[num]のnumが評価されてobj[‘a’]になる
さらにobj[‘a’]が評価されて10になる varだとこのように書けるけど
if(a > 1){var b = 0;}
else{var b = 1;}
alert(b);
letだと
if(a > 1){let b = 0;}
else{let b = 1;}
alert(b);
のようには書けないので
let b;
if(a > 1){b = 0;}
else{b = 1;}
alert(b);
と書くしかないので行数が多くなるのでvarの方が使える場面もあるってこと？ >>809
varは「既存コードとの互換性目的で残されているだけ」であって、利用禁止が大前提
無意味にletを使うのもやめた方がいい
例1 - 名付けあり
> const b = a > 1 ? 0 : 1;
> alert(b);
例2 - 名付けなし
> alert(a > 1 ? 0 : 1); >>809
あなたにとってはそうなんだろうが、letの方が宣言か一箇所で済む分、わかりやすく感じる
最も、そのコードは三項演算子で1行に出来るから比較する必要はないが とりあえず、[180.12.82.129]は何か反応したら？ iPadでJavaScriptの勉強したいんやけど可能？
一応外付けのマウスキーボードはあって、OracleのJava bronzeを取りたいんたけど。 var は使っちゃいけない。
スコープとか、色々とややこしいから、バグるだけ
そういうのを研究していない人には分からないし、
研究するだけ時間の無駄
varを使うな、という結論だけを使えばよい >>817
結局、何を知りたかったのか
さっぱり、わからないな >>816
JavaかJavaScriptかはっきりしてくれ javascriptでフォーム作ってます。
java scriptからメールを送る方法ってどんなのがありますでしょうか？ javascriptでメールの送信は無理！
rubyを使うと簡単にできるYO！ AWS Lambda/SNS, Ruby など、サーバーが無いと無理 無理といわれてるが、SmtpJSでは不可能なのか
まあ、俺もクライアントサイドでやろうとは思わんが ブラウザ上のjavascriptから直にメールを送る機能はないので
822のqiitaで紹介されてるSmtpJSはSmtpJSのサーバーに通常のフォームデータとしてPOSTしてそのサーバーがメール送信を肩代わりしてくれる
信用できないなら自分でサーバーサイドもどうにかする SMTPサーバーが必要なのは>>822の通り、理解してる
最も、質問者はずっとスルーしてるが 皆さま、ご教示ありがとうございます。
smtp.jsを使い、SMTPサーバーはsmtp.jsで紹介されてるSMTPを使用。
試してみたのですが、うまく動かせておりません。
メールは、サーバーサイドからやるのがベターですよね、やっぱり。。 var yyy =～/g;
var mmm = "$1～”;
aaa[0].innerHTML = aaa_html.replace(yyy, mmm);
で指定する$1の部分は、mmmの変数で指定するか、
複数の変数を埋めるにはどうしたら良いですか？
ようするにyyy以外の変数も埋め込めたい。 >>829
マッチ結果とは無関係の変数を使いたいってことなら、普通に変数を連結するなりテンプレートリテラルで表現したりすればOK
ある程度複雑なことをするつもりなら、別途置換処理用の関数を定義した上でreplace()の第二引数に渡した方が読みやすくなるかも（当然ながら「適切な名付け」が前提）
innerHTMLを使っている点については、あえて何も言わないでおく 年月を設定した2段階プルダウンを作成しているのですが、JAVAを深く触ったことがない為アドバイス頂きたいです。
wordpressのデータベースからSQLを使います。Java scriptでプルダウン作成。
設計について
Java script→JSONで$(配列)に変える→archive.php→SQL→JSON→Java scriptという流れで良いでしょうか？ >>832
> JAVAを深く触ったことがない
Java関係ある？
> Java script→JSONで$(配列)に変える
$(配列)とは？ >>833
JAVAは変換ミスです申し訳ありません。
option valueの値をそのままSQLに渡す事が出来ないとアドバイスもらいましたので、何とかSQLに渡す方法が知りたいです。
また渡したものと一致するデータをSQLで選別してJava scriptに返す必要があります。
コードは以下になります。
<option value="">年を選択</option>
<option value="op-a">2021</option>
<option value="op-b">2022</option>
</select>
<select name="op-a">
<option value="">2021グループから選択</option>
<option value="op-a-1">1</option>
<option value="op-a-2">2</option>
<option value="op-a-3">3</option>
<option value="op-a-4">4</option>
<option value="op-a-5">5</option>
<option value="op-a-6">6</option>
<option value="op-a-7">7</option>
<option value="op-a-8">8</option>
<option value="op-a-9">9</option>
<option value="op-a-10">10</option>
<option value="op-a-11">11</option>
<option value="op-a-12">12</option>
</select> >>833
option valueの値をJSONを使い配列に変えた上でSQLに渡すことを考えておりました。 >>832
一旦落ち着いて、スレタイと>>1のテンプレを熟読しよう
その上で、一連のデータフロー（処理順序と各処理間のインタフェース）の中で「JavaScriptコードに担わせたい機能」をあらかじめ明確化した上で、「同機能の実装上の不明点・疑問点」を質問しよう 例えば、Ruby on Rails みたいなMVC フレームワークなら、
<%= f.select :pet, [["犬", 1], ["猫", 2]], include_blank: "選択して下さい" %>
こういうselect ボックスで、猫を選べば、
データベース(DB)のpet列が、2 で保存される
多分フォーム送信で、value="2" がサーバーへ送られて、
Railsによって、自動的に整数型の2に変換されて、DBへ保存される
このように、Railsのようなフレームワークを使うと、
DBのテーブル構築とか、HTMLからDBの各列への対応付けも全自動
SQL 文を文字列で、自分で作ったりしない JavaScriptってクラス宣言も関数使ってるらしいけど、関数型言語なの？ >>838
もとはschemeを参考にした関数型言語だったのをむりやり関数型言語っぽく仕立てたから
クロージャや部分適用は普通に使えるのに対し、thisやコンストラクタやメソッドはなんか
残念な仕様になった。 console.logが1つしか表示されないんですが、何が原因なんでしょうか？
//オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択
let objA = {
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
let objB = {
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
//オブジェクトをまとめる
let allobj = Object.assign(objA, objB);
//JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数
let result = JSON.stringify(objA,objB);
//変数「result」に代入
console.log(result); JSON.stringifyをまとめても、let result = JSON.stringify(allobj);
console.logを2つにわけても2021のみ表示されて、2022がどうしても表示されないのですが、何か考えられる原因はありますでしょうか？console.log=JSON.stringify(objA);console.log=JSON.stringify(objB); >>840
ありがとう、理解しました
いちいちコンストラクタとか宣言する気起きなかったから良かった >>843
Object.assignは1番目の引数オブジェクトを直に2番目以降のオブジェクトのキー・値で上書きするものですよ
もしかして
let allobj = [ objA, objB ];
let result = JSON.stringify(allobj); 下記のようにしたら表示されるんですが、変数「result」に代入しておく必要があるため困っております。
let result =にobjA,objB別々にすることはできますでしょうか？
//オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択
let objA = {
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
let objB = {
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
//JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数
console.log(JSON.stringify(objA));console.log(JSON.stringify(objB)); >>842-843,846
マルチポストか
https://teratail.com/questions/u195apv1x9xtdv
せめてマルチポストのマナーを守れ
https://ja.meta.stackoverflow.com/questions/2418/
>>832,834-835もあなただと思うが、JavaScriptを学習する前にPHPの入門書買うのが先だと思うぞ
form送信するのなら、JacaScriptもJSONも必要ない
PHP側でGETもしくはPOSTでパラメータを受け取れば良い
PHPにはパラメータを配列で受け取る仕組みがあるからな
やりたいことから逆引きするのは止めて、入門書で基礎を固めるべき
回答もらっても理解できんのなら意味がない
回答もらえるだけの明確な質問内容を書けないのなら意味がない
突っ込みどころが多すぎる >>848
アドバイスありがとうございます
マルチポストはすみません。
form通信ではなくSQLを使いアーカイブを表示させるためにプルダウンを作成しています。
Java scriptのオブジェクトでは配列を渡せないのでJSONでシリアライズしてPHPでデコードしてそれをSQLに渡します。
渡されたものから該当の記事を出力させ、PHPで JSONシリアライズした後にAJAXでJava scriptに送り返します。 teratailでのやり取りを見てても根本的に理解が足りてないのがよくわかる
プログラミング始めてどれぐらいか分からんけどもPHPとJavaScriptを組み合わせてどうこうするにはまだ早い気がする >>832見てると、やり方調べてるうちに、不明点の迷路にハマってる気がする
まずは最低限の実装から順番に理解していかないと、解決するものもしないぞ
①WordPressのフロントエンド側からSQLを呼び出す
※SQLの内容は固定、ボタン一つで1つ結果が返ってくれば良い
⇒これだけならWordPressのコミュニティやサポートに聞けば解答が来る
②WordPressのフロントエンドからプルダウン経由(動的に値を変えながら）
SQLを呼び出す
⇒これもWordPressのコミュニティで意見聞いてから、JavaScript側での実装を考えて確認
③以降も同じように実装領域に合わせて確認していく
プログラミングだといきなり最終系考えても
初心者だと実装の過程が滅茶苦茶になるから、まずはシンプルに考えた方が良い >>851
アドバイスありがとうございます。
objAとobjBをボタンとしてクリックさせて、それをPHP側で$識別させることになるのでしょうか？
func btnCliked(
)
let objA=[{year:2021,month:[1,2,3,4,5,6,7,8,9,10,11,12],
}］ >>849
謝罪するならすべきことをやってくれ
https://ja.meta.stackoverflow.com/questions/2418/
form送信しないならどうやってデータを送る？
select要素時点で文字列になってるのに、なぜJSONに変換する必要がある？
PHPでどうやって受け取る？
この辺、ちゃんと質問に起こせてないから、質問内容が伝わらなかったり、基礎的な知識不足を指摘されるんだと思うがな >>852
イメージ的にはそんな感じ
ただ>>853も言っているように、フロントエンド(HTML/JavaScript)とバックエンド(PHP）で
どうやってデータの受け渡しをしているのか、っていうのを理解できてないから
本当に入門書読んで勉強し直した方が良いと思うぞ
まずは本当にシンプルに
①Wordpress上でボタンを押して、固定値で値をPHP側に渡す(formのPOST通信)をする
②PHP側で値の受け取りが出来たかを確認する
③確認が出来たら、PHP側からJavaScript側に返り値を固定値で渡す
④WordPress上に返ってきた値を表示できるか確認する
とりあえず最低限の基礎的な動作を実装して、拡張するっていうやり方しないと
この先も大変な事になるぞ >>853
シリアライズするのはJavascript側から配列を渡せないからですよね？
PHPではJSONファイルをnode.jsで作成してそれをPHP側で取得→デコードしてSQLに渡す？でしょうか？ >>854
アドバイスありがとうございます。
たしかにSQLで記事の検索をかけるならわざわざJSONを使う必要ないですかね >>855
これそもそもなんで配列を渡したいの？
見たところ年も月も複数選択できるわけじゃなさそうで「2022/6」とか渡せば済む話じゃないの？ >>857
SQLから該当記事の検索をさせたいからです
RSSとSQLで交互にレイアウトを出力させているためSQLにどうしても配列を渡したいです PHPはめちゃくちゃHTMLやMySQLと親和性高いからJSは足りない部分補うのが主になるかな
多分他のサーバーサイド言語だとJSの活躍の場広がるんだろう >>856
バックエンド側をどうやって実装するかにもよるけど
例えばSQLに必要な検索キーが1つだけなら、単体の変数でも良いし
複数あっても。渡し方は極端に言ったら自由だぞ？
とりあえず動かすだけなら、複数の値をカンマ区切りの文字列として渡して
PHP側でカンマでsplitかけたら配列として使えるようになるから
それこからSQL文に埋め込むとかでも良いし……
それこそJSON.stringifyとかも、JavaScript上の辞書とか配列を
JSONとして対応できるように文字列に変換してるっていう感じだから
応用みたいな使い方だな（PHP側でunserializeすれば辞書とか配列に復元できる)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify >>858
答えになってない
2022/6ではSQLで該当記事を検索できない理由を書いてくれないと
あと後半も意味不明 >>855
1, シリアライズする理由は何？
2. どうやってシリアライズしたデータをPHPに送るの？
3. マルチポストは完全無視？ >>855
> PHPではJSONファイルをnode.jsで作成してそれをPHP側で取得→デコードしてSQLに渡す？でしょうか？
そもそも、これサーバサイド側の処理になってる
クライアントサイドのJSとサーバサイドのPHPを連携させる話じなかったの？
Node.jsが出てくる理由も謎 これあとでアドバイス貰ったんですがwordpressのSQLにJavascriptを流すって出来ないんですね
フロントデータの送受信が出来ないようなので、という事はwordpressでJavascriptは使えないってことでしょうか… >>866
wordpressのJSONをwordpressの SQLに流す事は不可能なようです。
どうやら過去にウイルスを流された事があるらしくAPI通信が遮断されているようです。
jQuearyなどでファイルをクッションにして無理やり送る事は出来ないんですかね… >>867
SQLにJSONを流すってのがどういうことなのか具体的に説明してくれ
よそでアドバイスもらったんならそれもついでに示せ
あと上の方でもらってるレスをほったらかしにしないで返信しなよ >>868
申し訳ありません。
2段階式年月プルダウンをfront-page.phpに設置しております。
そこからarchive.phpのデータベース(SQL)に送りたいです。
プルダウンでクリックされた月を元にSQLに渡したいのですが、片方がJavascriptである場合、wordpressはフロントデータの送受信が出来ない為成立しません。
これを回避する方法が知りたいです。 会話も噛み合わないし最早全コード晒した方がはえーぞ
現状秘密にするほどの価値も無いだろうし >>860
ボタンクリックが動的だとすると、JavascriptやjQueryから信号を出さないといけない気がするんですが、両方PHPで2段階プルダウンアーカイブ機能を作る事はできるのでしょうか？ >>870
wandboxでコードを書いて載せます >>869
>片方がJavascriptである場合、wordpressはフロントデータの送受信が出来ない為成立しません。
これが何言ってるかわからん
具体的なphpなりSQLなりのコードも出してみなよ
もう完全にスレ違いだけど https://wandbox.org/permlink/Fal7HBABk3wT4fpd
archive.phpの170行目から2段階式プルダウン、339行目からSQLになります。 >>875
SQLは340行目だけ？
これのどこに画面で選択した年と月が関係するの？ >>876
1.選択した年と月をJSONにして文字にシリアライズします
2.PHP側でJSONでシリアライズします
3.SQLに配列を渡します
4.Javascript側で結果をAJAXで受け取ります
これでプルダウン機能が動作します。
何か間違ってる事はありますでしょうか？ >>877
1と2で合計2回シリアライズしてるのが意味不明 >>877
質問を変えるわ
>3.SQLに配列を渡します
このSQLで何を取得するつもりなの？ >>878
シリアライズではなく正確にはデコードですかね
$変数に変えてからSQLに渡します >>879
SQLでwordpressのデータベースから該当する記事を出力してPHPで表示したいです >>881
該当する記事を取得するための検索条件は？
今は無条件でページングしてるだけに見えるけど >>880
やはり…そうか
配列にしたいからJSONにしてるのか？ >>882
条件は日付と更新日です
日付だけでも良いのですが archive.phpの254行目からSQLを組んでいます。 >>885
>AND (post.post_date LIKE %s OR post.post_modified LIKE %s )
この部分？
これに配列渡すつもりでいるの？ >>888
$query = $wpdb->prepare($sql, "%$search_query%", "%$search_query%");
配列はこの部分ですね ANDはwordpressのテーブルからカラムで条件を引いてます >>889
$search_query変数が配列？
$search_queryに具体的にどんな値が入ってる想定なのか書いてみなよ >>891
よく考えてみると$date_queryかもしれません。
検索は出てきたんですが、アーカイブが出てこなかったためsearch_queryにしてましたが… >>892
変数名はこの際どうでもいいよ
SQLにどんな値を渡したいのかが知りたいんだから php get_search_form(); で貰ったワードから検索ページのSQLは出力されています
アーカイブページもおそらくwordpressの既存のアーカイブをクリックしてSQLに繋がるはずです
この配列の渡し方もよく分かってない状態です… >>869,877,880,887
要件
- front-page.phpにselect要素で年月のブルダウンメニュー設置
- front-page.phpの入力値をAjaxでarchive.phpにリクエスト
- archive.phpでパラメータを配列で受け取る
実装
1. front-page.php: のselect要素で配列にしたいもののname属性値に [] をつけておく
2. front-page.php: Fetch APIでFormDataをarchive.phpにリクエスト
3. archive.php: 受け取った配列を元にSQL文生成→クエリを発行→結果をJSONで出力
4. front-page.php: JSON.parse()して後続処理
SQLの下りはPHPの処理なので、ここでは言及しない >>894
検索ページのSQLってのはsearch.phpの258行目からのこと？
こっちは$search_query変数はただの文字列でキーワード検索してるんじゃないの？ >>896
そうですね…
という事は$date_query＝配列or変数で渡せば過去の記事をSQLで検索する仕組みになりますかね… >>895
- front-page.phpの入力値をAjaxでarchive.phpにリクエスト
についてお聞きしたいんですが、これはフロントデータの送受信にあたらないのでしょうか？
wordpressはJavascriptとjQueryから受け取ることも渡すことも出来ません >>897
だからなんで配列にこだわるの？
"%$search_query%"って使ってる以上配列は受けとれんでしょ
文字列変数で"%2021-01%"とかではあかんの？ >>899
いえ配列である必要はないですが、SQLで検索する際に文字は無理だと思うので、一回デコードしてデータにする必要があると思います… >>898
勿論、フロントデータだ
HTMLに書かれたselect要素に入力されたデータはクライアントサイドの情報だからな
WordPressがフロントデータを受信できないのなら、プルダウンメニューに入力された情報をWordPressで受け取る手段がないことになる
ブラウザを使えないようだから、サーバにtxtファイルをアップロードするとか、手段を変えるしかないのでは? >>901
やはり1回クッションを挟む必要があるんですよね？
ただ厄介なのはSQLからも送れないことですねwordpressの SQLなので記事の情報を全てファイルに送ってそれを再度Javascriptに送り返す必要があります 皆さんアドバイスありがとうございます
とても勉強になりました >>900
>SQLで検索する際に文字は無理だと思うので
何を言いたいのか分からん
post.post_date LIKE '2021-01%'
って検索条件にすれば2021年1月の記事は検索できるんじゃないの？ >>904
直打ちは考えた事がなかったです…
たしかに可能かもしれません >>905
直打ちしろとは言ってない
文字列変数で済むだろってこと あと君さ、物を知らなくて教えを乞う立場なのに～出来ません、～必要がありますとか断定形使うのやめようよ
君の知らない解決方法なんていくらでもある >>902
1回クッションとは？
フロントデータを受け付けないとは、通信を受け付けないということ
そんなWordPressがあるなら、ブラウザでWordPressを閲覧することすらできない
前提がありえないと俺は思うけどね
あなたは通信周りの知識がかなり怪しい
PHPも明らかに基礎知識が不足してる
この課題は今すぐ解決は諦めて、入門書から始めるのが妥当なんじゃないと俺は思う >>907
で、SQLが配列やオブジェクトを受け取る必要がないなら画面からは年のselectから2021を、月のselectから1を渡せば済む話じゃないの？ >>908
申し訳ありませんでした。
以後気をつけます。 >>910
たしかに渡す時は簡単な処理で良くなりそうですね
逆に渡す時はファイルを経由してAJAXが必要になりそうですが >>909
外部のJavascriptとjQeary限定ですので内部データは受け付けてるのではないでしょうか > wordpressはJavascriptとjQueryから受け取ることも渡すことも出来ません
これが真実なら、>>877のAjaxがそもそも不可能だし、なぜJavaScriptスレで質問してるんだ？、という話になる
>>912ではAjaxが実装可能かのように書いてるし、説明がちぐはぐ >>909
完全に同意する
プログラミング全般についてもググって言葉はあれこれ知ってるけど
知識として吸収できてなくてそれらが繋がってないと感じる
こちらから伝えてることも正しく理解できてないだろう
これ以上続けても得るものも少ないだろうし何よりスレ違いだしここまでにしとく
長々とレスしてしまって申し訳なかった >>913
WordPressから見て、内部データといえるのは、サーバ上に置かれているデータだけ
HTML,JavaScriptは外部データ
ブラウザで入力される文字列も外部データ >>916
朝起きてからwordpressの問い合わせフォーラムでもう少し詳しく聞いてみます またあちこちに場違いで意味不明な質問をバラ撒いて場を荒らしていくのだろう プログラミングって「とりあえずやってみて、分からない所を調べる」
ってやり方すると信じられないぐらい余計に分からなくなるからな
体系的に一回勉強して全体のシステムイメージとか
実装のイメージとかがある程度掴まないとマジで意味不明な事をやりだす…… YouTube で有名な雑食系エンジニア・KENTA の初心者向けRuby on Rails サロンでは、
半年でポートフォリオを作って転職していく
KENTA は、PHP, Scala をオワコン認定した。
プロは今後、これらの言語で作らない
Rails以外では学習環境がないから、勉強できない。
本屋でWord Press の本を見たけど、ソースコードを書いているような本は無かった。
あるのはデザインの本ばかり
一方Railsなら、黒田努の3冊の本とか、パーフェクト Ruby on Rails、
Ruby on Rails 6 エンジニア養成読本とか、他の著者の本も何冊かある
Rails Guide, Rails チュートリアル、
YouTube のDean など一杯ある
KENTAのサロンには、日本6位の3千人が入っている。
1位はキングコング西野の数万人。
ガーシー・参政党なども、数万人ぐらいかな？ なんやかんや言いながら、突き放さずに細かくアドバイスしてる諸兄の面倒見の良さにホッコリしたわw 正直後悔してる
まず相手のレベルを見定めるのが重要だと悟った
理解できるレベルに達してない相手にアドバイスとか虚無以外の何物でもないわ いきあたりばったり感が前スレのYAGNIの人を彷彿とさせるな >>925
思想は同じだと思う
(A) 必要になったら調べる(体系的な学習はしない)
(B) 足りない知識は妄想で補完する
(C) 苦言は聞き流す
本人としては調べる時間を極限まで減らして効率的に学習しているつもりなのだろう
実際は理解できてなくて、無駄に学習時間を減らしてるだけだが まだプログラミング始めて間もないのかと思ったら1年とかやってるのか
https://teratail.com/users/homepage-site?feed=question
質問もいろいろアレだけど限界まで考えたとかあらゆる方法を試したとか言えちゃうのはすごいな 一応方法はわかりました。
WordPressを通せばそれ自体がフロント動作をしてしまうので、
全部ぶった切って、APIとしての出力＝VIEW
STDINを乗っ取ってWordPressの初期化経路を通さずに、
DBを使う ここのスレの住人は自称プログラマーのアホ無職ばっかりだからマトモな回答は得られないよ
続きはコッチでやればいいよ。親切な達人プログラマーが懇切丁寧に教えてくれるから
↓
Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/ JavaScript の質問者をRuby板に誘導する無能あらわる >>928はWordPressの質問をJavaScriptスレで質問した質問者の手落ち
マルチポスト先を含めて多くの回答者の時間を無駄にさせた >>927見たら質問が増えててまだ配列をSQLに～とか言っててため息しか出ない rubyスレがスレチの質問で溢れかえる分には俺は困らんから好きにすればいいよ >>922
に書いた
学習環境が無いもので開発したら、勉強できないから数年以上掛かる
一方、Ruby on Rails なら学習環境があるから、
半年ぐらいでポートフォリオを作れる
大切なのは何かを勉強する事ではなくて、勉強する方法を勉強すること！
どういうやり方をすれば、勉強・上達できるのか。
これが成長には大事。
企業が求める自走力。自分で探して解決する能力
だからKENTA が、Django, Laravel で作っても採用されませんと言うわけ。
技術選定で、Railsよりも、Django, Laravelを選んだ理由は何ですか？ と聞かれる。
答えられないでしょ
単にこの香具師は、調べる能力がない・適材適所ではないと思われるだけ 「とりあえずやってみる」の人によりけりだから、話が通じにくいね
入門書を一通りまねてみるってなら有りだろ
問題は、初心者がよい入門書を判別できない 僕は、逆引きから入るのが良いかもしれないと思ってる人です。
やりたい事がタイトルになってて、サンプルコードも載っている書籍からプログラミングの入り口にちょうど良い気がしています。 すいません、
文書の中から決まったパターンに合致する部分を全部抽出して配列にしたいので、
matchと正規表現を使ったのですが結果が惜しいです…
a href="hoge"
の「引用符内のみ」を抽出したいので
let regexp = /a href="(.*?)"/;
と書いたのですが結果は
a href="hoge" と丸ごとごろっと抽出されてしまいます
普通にdocument.getElementsByTagName("a");でDOMアクセスすれば？
と思われるかもしれませんが、XMLhttpRequestで取得したテキストなのでできません
どなたかアドバイスいただけないでしょうか こうでしょうか
const loadText=//aタグが入ったhtml文書ならなんでも
let regexp = /a href="(.*?)"/g
let result = loadText.match(regexp);
console.log(result[0]); >>939
正規表現でも出来なくはないが、DOMParserやinnerHTMLでDOMに変換するのが確実だと思うぞ >>939
const targetText = 'aaa"bbb"ccc"ddd"eee"';
const quart = targetText.split('"').filter((e, i) => i % 2 && e != '');
これじゃダメかな? みなさんありがとうございます！
DOMパーサーってやつ使ったらできました！DOMParserすごい！
正規表現のやり方も後でためしてみます！ result[0] だから全部返ってきただけじゃね？ >>942
let regexp = /a href="(.*?)"/g
console.log(result[0]);
↓
let regexp = /a href="(.*?)"/
console.log(result[1]);
gフラグの有無で返り値が異なる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match >>945
・属性値がダブルコーテーションで括っている
・属性値内のダブルコーテーション、<>がエスケープされている
上記条件を満たすならば、
/<a\s[^>]*href\s*=\s*"([^"]*)"/i.exec('<a class="foo" href="bar.html">')[1]; // "bar.html" javascriptで金稼げますか？(´・ω・`)、、、
ストップウォッチ とりあえずやりたいことは地図のヒートマップを作ることです
https://todo-ran.com/t/kiji/11846
こんなのはリアクトで作れますかね 初歩的な質問で申し訳ありません
英単語学習用のタイピングゲームを作ってましてその要素が1000ほどあるのですが
csvからランダムに取り込むことは可能でしょうか？
やはり一度コードに記述した方がいいのでしょうか？ 当然だけどローカルのファイルを直接は扱えない
input fileなどでファイルを指定してそれを解読することは可能だが
ゲームみたいなデータなら予めそのデータをコードにしておいた方が良いだろうね >>953
もちろん可能
どういうアーキテクチャで実装したいのかによってやり方が違ってくる >>954
ありがとうございます
やはりコードにしておいた方がいいのですね
レベル分けで3セクションに分けて記述してみます。 >>955
ありがとうございます
できるんですか？？
簡単な自己満ゲームなのでブラウザ上で動けば問題ない感じです。 >>953
ぜひ完成させてください。
遊んでみたいです >>958
ありがとうございます
いま、英語の大文字が反応しなくて困ってます。
条件式でシフトを押しながら入力する記述をすれば良いとのことですが、具体的にどんな風に書けば良いでしょうか。 あと、アポストロフィも認識できるようにしたいのですがご教示くださると幸いです。 ブラウザの方がcsvにランダムアクセスするのかえって面倒な気がするが・・・ >>961
ありがとうございます。
ちょっと時間かかりましたがコード内の配列に記述しました。 >>959
具体的なアドバイスが欲しいならせめて今どういうコードになってるのかぐらい貼ろう 漏れは、英単語テストのアプリを作っているけど、
word.json ファイルに、中高生の単語を書いて、それを読み込むようにしている
[ ["accept","…を受け入れる" ],["achieve","…を達成する" ] ]
ブラウザ用のモジュールで、CSV を使えるものもある？
サーバー用のモジュールなら、あるだろうが <img src="./test.png" id="test">
これにjsであとからリンクをつけるにはどうやったらいいですか？
htmlで書くと<a href="../"><img src="./test.png" id="test"></a>
のようにです test.outerHTML = `<a href="../">${test.outerHTML}</a>` >>967
ありがとうございます。
$はどういう意味ですか？ jQuery なら、
<img src="test.png" id="test">
$( function ( ) {
// 画像リンクを作る。$( 子 ).wrap( 親 );
$( "#test" ).wrap( "<a href='index.html'></a>" );
} );
変換後
<a href="index.html"><img src="test.png" id="test"></a> PHPはオワコン。
それに初心者には難しすぎる
初心者はRubyから始めるべき
こっちのスレで質問すれば親切な達人プログラマーがどんな質問にも懇切丁寧に答えてくれる。
↓
Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/ 質問です。仕事の業務を効率化したいです。
とあるサイトにログインし、
そのページにある 「30個のボタン」 をクリックするという作業を毎日しているのですが、30回クリックする作業を簡略化したく、方法を模索しています。
（30個のクリック後の動作はそれぞれ
「斎藤さんにメールを送る」 「田中さんにメールを送る」
といった感じのものです （例：send_TANAKA、send_SAITOU…）
（↑クリック後の動作は 必ず send_ という文字列から始まります）
（斎藤や田中といった名前は100人以上の会員名からランダムに選ばれています）
chromeのデベロッパーツールで
クリックした後の動作を コンソールで直接実行すれば可能であるのは分かったのですが (send_TANAKA 等と直接コンソールに記述する）
30個のclick動作を記述するのは手間がかかるため
もっと効率のいい方法を探しております。どなたか知恵を貸してください。
sendという文字列を含む命令を30個探し、それらを上から順番に実行する、といったことをコンソール上で実行したいです ボタンをクリックすることとJavaScriptの関係が書いてないうえに、ボタンをクリックすると何が起こるのかさえ書いてない。
何をどう答えろというのか？ メタプログラミングか？
文字列で、関数名を作って呼び出す？ 趣味でJavaScript(vscode+nodejs)を勉強してます。
まだよく分からなくて色々なサイトを巡りながら理解を深めているのですが実際何が分からなのか分からない状態です。
初心者向きのサイトを参考にせず入門書を1冊買った方が良いですか？
自分が今参考にしているサイトは
https://www.tohoho-web.com/js/
https://developer.mozilla.org/ja/docs/Learn/JavaScript
です。 >>978
「とほほ」は情報が古いのでやめたほうがいい
MDNはMozilla運営で一定の信頼性があるので、9割程度は信用していい(100%とは言わない)
MDNは入門向けコンテンツが少ないので入門書を買ったほうが勉強しやすいとは思う
買うなら外国人が著者の翻訳本をお勧めする
日本人が著者の本を何冊か持ってるが、信頼性が低い本が大半といわざるを得ない
オライリーとか一定の文量がある書籍がいいと思う >>979
レスありがとうございます。
外国人が書いた翻訳本買って勉強してみます。 何度もすいません。
甘え承知で教えて頂きたいのですが具体的におすすめの本ありますか？
自分は業務(組み込み系)でC/C++言語をやってました。 Amazonで評価高いの買えばいいのに
まず評価みれるようになったらどうか >>983
Amazonで評価の良いのってやっぱり良いですか？
Amazonの評価はあまり信用なくて5chでこちらの方々なら色々と精通されているので聞いてみますした。 >>984
評価がいいかどうかも他人に判断させるのか
どうせ見てもいないんだろうが >>982
俺は古い人間だから今の時代に合った入門書は知らない
昔はテンプレに定番書籍が載ってたが、今は保守する人間かいなくてテンプレからも消えたしな
とはいえ、JavaScriptは後方互換性のある言語なので、昔の書籍が使えないわけではない
最新情報はネットで補完するとして、お勧めするなら次の2冊
- DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS)
- JavaScript 第7版
JavaScriptで抑えるべきは「ECMAScript」、次に「DOM」
DOM Scripting 標準ガイドブック はDOM中心だが、ECMAScriptにもある程度触れて平易な説明なので入門書向き
基本的なAPIのみしか載ってないので、高度なAPIはMDNとDOM仕様書で補完する
「JavaScript 第7版」は中上級者向けだが、一番重要なECMAScriptについてしっかり解説してくれる
ECMAScriptを詳説してる書籍は少なく、一冊持っておくと大概の疑問は解決する
足りない部分はMDNとECMA仕様書で補完する >>986
ご親切にありがとうございます。
参考にさせて頂きます。 >>983
Amazonの高評価と俺の評価は一致しなかったな
例えば、「パーフェクトJavaScript」は概ね良書と認知されてるが、細かい部分で説明に疑問に思う点が散見されて、仕様を確認しながら読んだら疲れてしまった
出版社レベルで見ると「オライリー >>> 技術評論社」の印象
Amazonを参考にしつつ、書店で実物を手にとって確認すればいいんだが、入門者に確認できる方法じゃないんだな
初心者は入門書を選ぶのが非常に難しい >>982,987
スコープが狭いが、Promiseは下記とMDNでほぼ解決する
JavaScript Promiseの本
https://azu.github.io/promises-book/
著者は日本人だが、数少ない信頼できる人だ
同じ人が書いた「JavaScript Primer」はESレベルで読むと疑問に思う説明がいくつかあるが、確度は高い方だと思う
「Promiseの本」は文句なしにお勧め出来る
---
実際のところ、すべてに満足する書籍はまずない
書籍は体系的な知識を蓄えるまとめて得られるのがいいのであって、最新かつ確度の高い情報は公式サイトの「仕様書」のみ
「MDN」から「仕様書」を辿れるようになったら、書籍の利用頻度は下がる傾向にある
当然だが、読むだけでは身につかないから、書籍から学んだ内容から、コードを書いて、動作を確かめることは最重要
初心者を自認する質問は何も確かめないで質問するタイプが非常に多い(このスレの質問者も大半がそう)
普段からコードを書いて確かめる癖をつけたほうがいい >>989
本当にご丁寧に提示して頂き本当にありがとうございます。
そちらのサイトも参考にしてコード書きながらJavaScriptの勉強頑張って行きます。
本当にご親切ありがとうございました。 >>988
つまりお前の評価が正しいというわけか？
何よりも自分で判断できる能力のほうが重要だろ
読んでみてお前のように疑問を持つことが大事なのになぜかそれを示さない
というわけでコイツは他人の意見だけで動くからお前が一生教えてやればいい >>980を踏んでしまったので新スレを立てようと思いましたがエラーが出てしまいスレを立てることが出来ませんでしたのですいませんがどなたか新スレお願いしますを >>991
質問者にとっては、俺もお前もAmazonレビュアーも赤の他人
「誰が正しいか」は質問者が判断すればいいことだ
俺にできるのは、初心者時代に読んで今振り返っても役に立った本を紹介することだけだ
俺が主張してるのは、初心者にとってはAmazonレビューの正しさをはかる指標がないということだ
中級者以上の俺でさえ、レビューから正しさを正確にはかるのは不可能だ
俺に出来るのは書店で実物をとって自分の知識と本の内容を照らし合わせることだけ
お前は「Amazonで評価高いの買えばいいのに」というが、赤の他人のレビューが信用出来るのか？
初心者でも信用性をはかる方法があるなら、まずはそれを示すべきだろう
付け加えると、初心者に内容の正しさを判断出来るはずがないので、初心者のレビューは信用に値しないと俺は考えている
入門書を読んで数年たって、もう一度入門書を読み直した後にレビューを書くなら、ある程度は信頼出来るだろう
そこまで時間をかけてレビューを書く人はほとんどいないと俺は思うが
> 読んでみてお前のように疑問を持つことが大事なのになぜかそれを示さない
疑問を持つことは大切だが、信頼できる判断材料が必要だ
信頼出来ない情報源(Amazonレビュー)では考えることすら出来ない
無理筋の方法を提案しても意味がない >>994
他人の評価は信頼できなくてお前だけがなぜ信頼できる判断なんだよw
お前何様？ 技術評論社はあまり良い印象がないな。
どうしても必要な時を除き、買わないよう心掛けたほうが良いと思う。 この2冊のサイの表紙のサイ本は初心者用ではない。プロ用
JavaScript 第7版、2021/12, David Flanagan
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017
パーフェクトRuby、パーフェクト Ruby on Rails などのパーフェクトシリーズもプロ用
これらは、YouTube で有名な雑食系エンジニア・KENTA の初心者向けRuby on Rails サロンでも使わない。
こんなプロレベルの勉強をしていたら、半年でポートフォリオを作って転職できない
初心者用は、ドットインストール・progate などで、基礎だけサッと学ぶ
深入りしたら切りがない。
それに難しい割には、使用頻度が低い 技術評論社は、そういう偏った見解が多いよね。
誌面で個人叩きも多いし。 このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 270日 8時間 16分 43秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
