22/01/08 20:24:29.61 70jc3KgD0.net
ドンマイ
254:デフォルトの名無しさん
22/01/08 20:40:02.49 6njacc4u0.net
わりとやらかすミスだからしゃーない
255:デフォルトの名無しさん
22/01/09 01:12:15.51 lzN+drLE0.net
>>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制作管理板の方で聞いた方がよい。
向こうのスレが、本スレだから
256:デフォルトの名無しさん
22/01/09 01:27:51.26 wKoMs7Y50.net
そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。
基本的に、ソースコードを書かない香具師は荒らし
「Ruby, Rails, クソチョン」などを、NGワード登録推奨とか、
自分が有利なように、いつもテンプレを改変する
荒らしがスレ主として、居座っているので、
まともな人がスレ立てして、テンプレも元に戻した方がよい
荒らしは必ず、短文で2回以上書き込む。
必ず、複数人がいるように見せかける
257:デフォルトの名無しさん
22/01/09 02:26:51.89 WLNeqQAW0.net
>>251
統合失調症ですか？
258:デフォルトの名無しさん
22/01/09 10:47:02.34 94EdrQaq0.net
>>250
「本スレはない」といっても伝わってなかったんだな >>213
Web制作板のスレは長らく次スレが立ってない
複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ
利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない
繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している
Web制作板のスレを追いかけてきたなら知ってるはずなんだがな
259:デフォルトの名無しさん
22/01/09 10:50:05.66 zqBk0tn4M.net
>>250
本気で誘導したいならリンクを貼りましょう
260:231
22/01/09 11:32:48.03 8qT6W49sd.net
昨日はお世話になりました。
二日連続になって申し訳ないのですが、質問させていただきます。
localStorageに保存しておける文字数って、あんまり多くないのでしょうか？
2000×400字ほどで、エラーが出てしまいます。
2000×300字だと問題なかったので、やり方じゃなく文字数の関係なのかと思ったのですが、どうなんでしょうか。
ちなみに、配列、オブジェクト型データです。
261:デフォルトの名無しさん
22/01/09 11:40:12.10 81xkTGx10.net
>>255
文字数というより、localStorageのデータ保存量の上限は基本5MBで
ブラウザや個人設定によって変わってくる
URLﾘﾝｸ(www.htmq.com)
262:デフォルトの名無しさん
22/01/09 11:47:21.66 Km6Rc4Yy0.net
>>255
エラーとは？そこを詳しく説明して
263:デフォルトの名無しさん
22/01/09 11:51:03.02 RPzdd9tK0.net
変数や関数名の迷わない命名ルールってありますか？
変数は名詞、関数は動詞とは聞きますね。
264:231
22/01/09 11:56:07.27 8qT6W49sd.net
>>257
DOMEException { stack ～ってエラーです。
URLﾘﾝｸ(i.imgur.com)
265:デフォルトの名無しさん
22/01/09 12:09:04.30 Km6Rc4Yy0.net
>>259
exceeded the quota(割当超過)で確定
サイズ減らすかindexedDB使うか
266:デフォルトの名無しさん
22/01/09 12:10:23.57 94EdrQaq0.net
>>258
言語仕様としては、使用可能文字があるのみで命名規則に縛りはない
ビルトイン関数/プロパティの慣習的にクラスはUpperCamelCase、関数はlow
267:erCamelCaseなので、守るとビルトインのコードと統一性が出来て良いだろう 後は採用しているコーディング規約を守れば良い 例えば、Google JavaScript Style Guide https://google.github.io/styleguide/jsguide.html#naming https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html#va
268:231
22/01/09 12:16:18.69 8qT6W49sd.net
>>260
回答ありがとうございます。
サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。
269:デフォルトの名無しさん
22/01/09 12:39:38.59 RPzdd9tK0.net
>>261
回答どうも。
規則というか命名ルールみたいなものが知りたいなと。
迷ってる時間が無駄になっているので。
270:デフォルトの名無しさん
22/01/09 12:45:08.85 CpwtZL4w0.net
すいません、アホな質問かもしれません。
マウスの右ボタンクリックで独自のサブメニューを表示したいと思います。
この場合は JavaScriput が必須で、CSSでは出来ないという理解で良いでしょうか。
271:デフォルトの名無しさん
22/01/09 14:49:13.23 MpHyBZWL0.net
仕事関係なのと、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++ が少しわかります。
272:デフォルトの名無しさん
22/01/09 15:08:40.66 94EdrQaq0.net
>>263
ruleは日本語で規則
あなたのいう命名ルールと俺のいう命名規則は同じ
273:デフォルトの名無しさん
22/01/09 15:18:07.99 WLNeqQAW0.net
名前なんて違反しなきゃ好きにつけりゃいい
俺は長くなっても意味がわかる命名派
vとかiとか一文字の変数や定数を好む宗教も強い
274:デフォルトの名無しさん
22/01/09 15:28:05.42 94EdrQaq0.net
>>264
menu要素は非推奨になったし、JavaAcriptしかないのでは
少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う
コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある
ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する
独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ
独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが
275:デフォルトの名無しさん
22/01/09 15:29:28.78 94EdrQaq0.net
>>268の誤字修正
× JavaAcriptしかないのでは
○ JavaScriptしかないのでは
276:デフォルトの名無しさん
22/01/09 15:42:44.57 RPzdd9tK0.net
適当につけます(´・ω・`)
277:デフォルトの名無しさん
22/01/09 16:11:22.92 CpwtZL4w0.net
>>268
ありがとうございます！
Javascriptを使う必要がある件、了解です。
以前に .net で作ったWindowsアプリをWebアプリに移植しています。
Table上の特定のセルを右クリックしたら独自メニューが表示される仕様になります。
それ以外の場所では ブラウザ標準のコンテキストメニューが表示出来るようにしたいと思っています。
やり初めて間もないのですが、覚えることが多すぎて恐ろしい世界ですね。Webアプリとは。
Javascriptでやるにしても、JQueryかVueかReactか、どれでやるべきか・・・
バックエンドは Djangoですが、自分ひとりでやらないといけないので かなりの修行になりそうです。
あと、AWSのデプロイとか Dockerとか・・・・ 初めてのことばかりで・・・
278:デフォルトの名無しさん
22/01/09 16:51:11.22 94EdrQaq0.net
>>271
デスクトップアプリとWebアプリの一番の違いは実行環境が複数存在していることだろうな
クライアント環境を指定出来る社内向けWebアプリならブラウザを制限できるが、Webアプリを公開するなら、クロスブラウザが必須
デスクトップOSだけでもChrome,Fx,Edgeの対応が必要となる
(Operaもあるが、シェアが小さい)
モバイルOS版のブラウザも含めると更に大変になる
実装状況はcaniuseやMDNの互換表を見ると、ある程度は分かる
URLﾘﾝｸ(caniuse.com)
JavaScript標準の書き方を覚えてから、ライブラリ、フレームワークに手を付けるのが良いと思う
jQueryから入った人はDOMの知識が浅くて見当違いの質問をする事が多い
Vue,Reactは完全に別世界だが、DOMやECMAScriptの文法を理解してないと辛い
JavaScriptの基礎はおさえておいて損はない
最も、バックエンドが未着手なら、バックエンドの習得が先かと
JavaScriptもまとめて学習すると、おそらく混乱する
table要素の特定セルのコンテキストメニューの独自化なら大丈夫だと思う
Google スプレッドシートのWebアプリを想起した
279:デフォルトの名無しさん
22/01/09 17:29:38.29 CpwtZL4w0.net
>>272
アドバイス ありがとうございます。
ほんとうに助かります！
幸い 社内関係者が使用するだけの業務用アプリなので ブラウザを限定して開発することが出来ます。
JavaScriptの基本をおさえるほうが良い件、了解です。
入門本を買ってきて 勉強してみます。
バックエンド（Django）はなんとか目処が立ちそうです。
いやぁ、本当にWebアプリの世界はすごい（難しくて 複雑）と思いました。
おまけに技術の変化が激しそうだし・・・
がんばります！
280:デフォルトの名無しさん
22/01/09 18:35:56.14 94EdrQaq0.net
>>273
クライアント環境を制限できるなら、デファクトスタンダードのGoogle Chromeがお勧め
次点でレンダリングエンジンが同じMS Edge
ブラウザシェアはIE1強時代と比べて、大分変わったな…
URLﾘﾝｸ(gs.statcounter.com)
確かに技術の進化はあるが、Web技術は後方互換性重視の設計思想なので、非推奨機能を使わなければ、大半の機能で半永続性が保証されている
HTML3.2は現代のブラウザでも動作するし、ECMAScript3は現役だ
つまり、古いバージョンから新しいバージョンに更新し続ける必要はない
281:ただし、これはWeb標準機能に限定した理屈でブラウザの独自拡張機能は別 その昔、IEのActiveX機能を使用した社内向けWebアプリはIEが終焉を迎えるとともに、他ブラウザへ移行するために改修を余儀なくされた 現在は昔と比べてブラウザの独自拡張機能が少ないが、ないわけでもない Web標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い
282:デフォルトの名無しさん
22/01/09 19:24:13.83 oCAuhuCGM.net
>>265
Uint8Arrayとかそういう話じゃなくて？
283:231
22/01/09 19:56:40.79 8qT6W49sd.net
昨日から何度も失礼します。
ご提示いただいたindexedDBについて調べて、最初、コピペせずに
自分で打ち込んだら、何度修正してもトランザクションでエラーが出たので、
次に某所のコードをコピペしたら、このようなエラーが出てしまいました。
制作環境がスマホでは、トランザクションというか、indexedDBを扱うのは無理なのでしょうか。
スマホの制作環境わかる方少ないかと思いますが、アドバイスいただけたら幸いです。
URLﾘﾝｸ(i.imgur.com)
284:デフォルトの名無しさん
22/01/09 20:16:29.50 Km6Rc4Yy0.net
>>276
某所なんてぼかされても何も分からん
スマホだから使えないなんて話は聞いたことがない
URLﾘﾝｸ(caniuse.com)
285:デフォルトの名無しさん
22/01/09 20:32:49.24 d2WOXC3/M.net
indexeddbは直で扱うのはしんどいからライブラリ使うといい
localstorageの代わりとして使う程度ならlocalforageがおすすめ
286:231
22/01/09 20:34:03.26 8qT6W49sd.net
確かに質問するのにそこぼかしたら駄目ですよね。すみません。
「VB.NET-TIPS などプログラミングについて」というブログの、「JavaScript IndexedDB の使い方２（データ追加）」
というところです。
URLﾘﾝｸ(vbnettips.blog.shinobi.jp)
287:265
22/01/09 20:35:41.88 MpHyBZWL0.net
>>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] として目的の値が出力出来る所まで辿り着いたのですが、処理としてはチョット恥ずかしい感じがします。
288:265
22/01/09 20:38:48.27 MpHyBZWL0.net
>>280
消しすぎてました。試したのは、
var BCC = new Uint8Array(bcc);
BCC[0] = bcc;
BCC[1] = Number(bcc);
BCC[2] = parseInt(bcc);
です。
289:デフォルトの名無しさん
22/01/09 20:56:22.61 94EdrQaq0.net
>>280
変数commandはString型なので、そこに含まれる値は全てStrong型に変換される
String(10) === "10"
1バイトの文字が必要なら、ASCIIコードの範囲で1文字になるよう調整する必要がある
290:デフォルトの名無しさん
22/01/09 21:05:54.69 wEbou60s0.net
>>265
String.fromCharCode(bcc) ではだめなの？（UTF-16だけど）
291:デフォルトの名無しさん
22/01/09 21:57:44.39 MpHyBZWL0.net
>>282
>>283
有難うございます。
String.fromCharCode(bcc) で目的が達成出来ました。
これで巨大な変換テーブルを人目に晒さずに済みました。
精進いたします。
292:デフォルトの名無しさん
22/01/09 22:58:01.81 lzN+drLE0.net
>>271
スレ立てるまでもない質問はここで 158匹目
ｽﾚﾘﾝｸ(tech板: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
293:デフォルトの名無しさん
22/01/09 23:10:39.20 WLNeqQAW0.net
>>285
自演するな
294:デフォルトの名無しさん
22/01/10 00:49:36.06 iL7OUFIC0.net
<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のまんまで左スクロールの場合だけ表示されます。
スマホでもスクロール値ちゃんと取得できるようなやり方はありますか？
295:デフォルトの名無しさん
22/01/10 01:03:26.84 RagYY3R10.net
>>287
scrollイベントでなく、setIntervalを使う理由が何かある？
scrollしてない時にも常に監視したらバッテリの持ちが悪くなりそうだが
296:231
22/01/10 05:44:27.44 GFg5qhLud.net
>>277
>>278
ありがとうございました。
297:231
22/01/10 07:56:10.03 GFg5qhLud.net
>>277
おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。
トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。
しかし、
URLﾘﾝｸ(ideone.com)
このコードの59行目くらいで、自分のスマホだとエラーが起きるところまではわかったのですが、解決案がわかりません。
アドバイスいただけたら幸いです。
URLﾘﾝｸ(i.imgur.com)
298:デフォルトの名無しさん
22/01/10 09:10:37.59 kImY1hGC0.net
>>290
idb作るときにkey指定したりした？
結構癖のあるDBよ。
URLﾘﾝｸ(qiita.com)
localForageとかPouchDB使った方が良いのでは？
299:231
22/01/10 09:57:44.78 GFg5qhLud.net
>>291
このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。
なので多分ミスはないんじゃないかと思うんですが……。
昨日も薦められましたが、localForageと言うのも少し調べてみます。
それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、
イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。
300:デフォルトの名無しさん
22/01/10 10:26:53.27 LkWl6bQKM.net
>>292
そういう事であればPouchDB一択。
サーバと同期してマスタ撒いたりできる。
サーバはIBM CloudantってDBaaSがあるよ。
301:231
22/01/10 10:56:29.90 GFg5qhLud.net
>>293
ありがとうございます。
こちらも調べてみます。
302:デフォルトの名無しさん
22/01/10 12:30:07.69 iL7OUFIC0.net
>>288
１：ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから
２：setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから
３：addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど
setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから
303:231
22/01/11 10:20:14.57 xHId70tjd.net
連日すみません。
new Objectしたデータ（以下〇〇〇〇とします）をindexedDBで格納しようとしたのですが、
〇〇〇〇[0].nameで実行するとちゃんと格納されたようで
名前を表示してくれるのですが、〇〇〇〇[0]や〇〇〇〇で実行すると、エラーが出てしまいます。
名前などは表示されるのだから、forで無理矢理全部やろうとしたら、indexedDBでは前のデータに上書きされるようで、上手く出来ませんでした。
この〇〇〇〇を格納出来うる解決案などありましたら、教えていただけると幸いです。
連日すみません。
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(i.imgur.com)
304:デフォルトの名無しさん
22/01/11 13:20:29.56 yML4DU0R0.net
>>287
次のコードを先頭（<head>部）に追加する。
<meta name="viewport" content="user-scalable=no" />
>>296
>>1
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
305:231
22/01/11 13:48:48.89 dFSE8CT0d.net
>>297 さんはじめ、皆様失礼しました。
コピペ部分除いて、自分が好きなように書き殴ったコードなので、
出来るだけ見せたくなく、あのような半端な質問になってしまいました。申し訳ありません。
現在進行形でサンプルコードを作成していたのですが、打開案が見つかりそうな気がしたので、もう少し自力で頑張ってみます。
306:231
22/01/11 17:48:23.29 deLc6mHgd.net
>>296 についてですが、どうやら、データの一つ一つに割り当てた画像の部分を削除すると、上手く機能するようなのですが、
IndexedDBでは、文字列などのオブジェクトと画像は、同時に格納出来ないのでしょうか。
出来ないのであれば、相当な量の手直しが必要になり非常に困ります。
制作開始時期にほんの少し調べて、localstorageで出来るんだな、と高をくくってセーブを後回しにしてしまい、後悔ばかりです。
307:デフォルトの名無しさん
22/01/11 22:47:10.94 TAtkceMX0.net
Ruby on Rails では、画像の保存に、libvips かImageMagick も使う。
それで画像を変換したり、サイズなどをチェックする
チェックしないと、サイズが少なくても、
1px × 10,000px みたいな極端な形状を送られて、
サーバーを攻撃してきて落とされる
だから、縦横もチェックしないといけない
Railsみたいなフレームワークを使っていない人は、
ウェブサービスを作るのは無理だと思う
フレームワーク側で自動的にチェックされる機能を、
すべて自分で作らないといけないから
308:デフォルトの名無しさん
22/01/11 22:54:59.18 1iYs2MCE0.net
>>299
質問する時は
①やりたい事を明確に書く
②そのために今試している/実装している内容、ソースコードなど
③発生しているエラー等について
の順で書くと良い
ぶっちゃけ何をやろうとしてるのかが全く分からん
画像をIndexedDBに保存したいなら、一回blobに変換しないといかんぞ
URLﾘﾝｸ(blog.katsubemakito.net)
309:デフォルトの名無しさん
22/01/11 22:59:30.93 JNUAUaQda.net
>>299
IndexedDBでblob保存できるんだから画像が入らない理由はない
そしてHTMLImageElementを丸ごと保管するのは明らかにおかしいし
そこに画像は無いと思うんだが
URLﾘﾝｸ(developer.mozilla.org)
310:231
22/01/12 05:59:28.46 cpeqqxS8d.net
URLﾘﾝｸ(4.gigafile.nu)
ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
紹介されたサイトなど巡って、考えてみようと思います。
311:デフォルトの名無しさん
22/01/12 09:14:18.07 60+8sbQA0.net
>>303
>ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
なんかまた妙な事をやろうとしてるな
普通はimgフォルダを作って、そこに歩行グラフィックとかを格納する
実装部分はキャラクターの状態に合わせてグラフィックを呼び出す、みたいな感じにするぞ
312:231
22/01/12 09:55:20.12 moNKRHMad.net
>>304
何となくですが、普通どうするのかわかったような気がします。
アドバイスありがとうございます。
313:デフォルトの名無しさん
22/01/12 12:17:05.53 /ZdmJSDda.net
単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい
何が目的でそれを使うのかよく考えないと訳わからんコードになる
314:231
22/01/13 08:13:45.35 9NWqLsjEd.net
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 (URLﾘﾝｸ(localhost:2435))↵ at XMLHttpRequest.<anonymous> (URLﾘﾝｸ(localhost:2435))" }
どのへんでエラーが出たのかまではわかったのですが、何故エラーが出たのかわかりません。
コードはコピペです。
解決案等ありましたら、教えていただけると幸いです。
URLﾘﾝｸ(52.gigafile.nu)
315:デフォルトの名無しさん
22/01/13 10:49:49.47 BdYH6d7w0.net
>>307
山ほど言いたい事があるが……
・コードが動かない、っていうなら実行環境も書け
(JavaScriptはブラウザ単位で動作が異なる場合もあるし、必須）
・初心者ならまずは動くコードを元に改良なり修正なりしろ
確認したら元ネタのコードは2012年だから、あなたの動作環境で動く補償が無い
（軽く見ただけでもエディタがエラー吐くレベルの互換性不備が2箇所ぐらいある）
URLﾘﾝｸ(dev.mozilla.jp)
・初学者向けのチュートリアルやってこい
とりあえず基本を勉強しろ、明らかに実装方針が迷走してる
エラーを解決できても、この先にエラー地獄になるのが目に見えてる
とりあえず専門書買うなり、Webで公開されるチュートリアルもあるからやってこい
(ゲームが作りたいなら以下を見てみろ）
URLﾘﾝｸ(developer.mozilla.org)
URLﾘﾝｸ(puyo.sega.jp)
316:231
22/01/13 12:01:21.75 2Kp13/God.net
動作環境は、Android10 F-51A
Chrome 93.0.4577.62
です。
最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
後はどうにでもなると踏んでいたので、それらについてだけ、こちらで質問してしまいました。
テキストを表示したり、プレイヤーキャラクターを動かしたり、
まだ簡易版ですがワールドマップの自動生成させたり、
いわゆるNPCが動くプログラムなどは、既に組んでいます。
後はここだけなんです、問題は。
スレの皆さんを不快にさせてしまい、申し訳ありませんでした。
317:デフォルトの名無しさん
22/01/13 12:34:36.45 v0PpJSuUa.net
やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない
保存する画像はユーザーがアップロードするの？それともcanvasに描いた内容を変換するの？
元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない
318:231
22/01/13 15:14:42.78 EndGOLp+d.net
>>310
URLﾘﾝｸ(youtu.be)
こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。
他にやりようある、ありそうってのはわかるんですが、上手く行かないです。
319:デフォルトの名無しさん
22/01/13 15:18:53.58 BdYH6d7w0.net
>>309
こっちも口調が強くなってすまんな
>最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
今やりたい事は
①データをセーブする(localstorageまたIndexedDB）
②①で保存したデータを読み込んで、セーブした時の状態に戻す
っていう事でいいかな？
だとすると、なおさら画像をDB等に保存したい理由が分からない
もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
ロードした時に復元できない、って思ってる？
320:231
22/01/13 16:01:24.15 Pj0bwTK9d.net
>>312
いえ、こちらこそ、気を遣わせて申し訳ありません。
＞もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
＞ロードした時に復元できない、って思ってる？
そのものズバリでした。
先ほど >>310 さんのレス見て、ん？ とは思ったのですが、
やっぱり画像ってセーブとかロードとかするものじゃないんですね。
321:231
22/01/13 16:03:06.44 Pj0bwTK9d.net
あと、今やりたいことはまさしくそれです。
322:デフォルトの名無しさん
22/01/13 16:13:19.06 BdYH6d7w0.net
>>313
よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな……
例えばマップデータだったら、動画見てると配列で定義してるよね
逆に言えば、その配列情報さえあれば、同じマップを生成する事が出来るからそれだけ保存すれば良い
そうすれば画像データよりも格段に軽い状態で保存できる
プレイヤーの位置情報とかも、座標データを書き出せばそこから位置が復元できる
で、実行環境で出来るか分からんけど
直接サーバー上にファイルを書き出せるなら、localstorageやIndexedDBに拘らなくても
極端な話、テキストとかJSONとかで書き出して
ロードする時にはそのファイルからデータを読み込んで、復元させるっていう方法も取れる
323:231
22/01/13 16:44:42.35 Pj0bwTK9d.net
皆様、ありがとうございました。
ここに来るのがこれで最後になるよう、頑張ってみようと思います。
324:デフォルトの名無しさん
22/01/13 20:06:01.17 Dm2SSKhE0.net
WebSockサーバーと接続し、データを受信したら次のデータを要求する様な流れで、
泥のChromeと比べてPCのChromeとEdgeは物凄く遅く、泥と比べて1/5程度の速度なのですが
configで実行速度的な物を設定出来るのでしょうか
泥は4.1の化石でもPCよりずっと早いです
325:デフォルトの名無しさん
22/01/13 22:50:17.84 QIlO/ODF0.net
>>317
Chromeの開発ツールで通信速度・CPU性能を意図的に遅くすることができます。
「Chrome Network Throttling」「Chrome CPU throttling」辺りで情報が出ます。
326:デフォルトの名無しさん
22/01/13 23:29:03.91 Ia/gMc7B0.net
画像データは、各マス目の画像の番�
327:�の並びを保存する 例えば、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/
328:デフォルトの名無しさん
22/01/14 03:35:28.27 2MXtaXlm0.net
>>316
頑張れよー
次に来る時は質問の回答者になれる事を祈ってるわ
329:231
22/01/15 10:23:00.28 S4wDIFSqd.net
たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。
【環境】
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 (URLﾘﾝｸ(localhost:2435))" }
【期待する結果】
データベースかオブジェクトストアを増やしたいです
index？ を増やす？ のは試してみましたが、自分では上手く行きませんでした。
【サンプルコード】
URLﾘﾝｸ(jsbin.com)
330:デフォルトの名無しさん
22/01/15 10:52:09.59 nH/3h8nXa.net
かたくなにライブラリを使おうとしない理由はなに？
それだけ教えて
331:231
22/01/15 10:57:45.01 S4wDIFSqd.net
>>322
気持ち悪いからです。
いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。
332:デフォルトの名無しさん
22/01/15 11:44:06.71 hsRAWFnHM.net
せめてライブラリのコードを読んでマネしてみるとか
333:デフォルトの名無しさん
22/01/15 13:39:49.54 XtDGDCrq0.net
createObjectStoreだけしてcreateIndexしてない
画像データそのままぶっこむとかあほみたいなことする必要なくなった？んだし
データベースの基本が分かってないならlocalStorageに戻れば？
334:231
22/01/15 14:22:56.89 +L4WFDi5d.net
ライブラリ？ とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。
お世話になりました。ありがとうございました。
335:デフォルトの名無しさん
22/01/15 14:23:41.37 gRCv6ifL0.net
>>321
Qitaの記事そのままコピーしてもそら動かんだろwwww
やりたいならMDNみたいなちゃんとしたチュートリアルからやれ
URLﾘﾝｸ(developer.mozilla.org)
あと何度も言うが、なるべく最小の形で実装して
細かく試しながらやれよ、動かないコードをツラツラ書いてもしょうがないだろ
336:デフォルトの名無しさん
22/01/15 15:38:38.42 ZBFGEo1/0.net
>>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 参照）から、スレ的にはライブラリ使わないでいいと思うぞ
337:231
22/01/15 15:58:17.33 +L4WFDi5d.net
>>327
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。
URLﾘﾝｸ(i.imgur.com)
>>328
アドバイスありがとうございます。
とても助かりました。
338:デフォルトの名無しさん
22/01/15 23:03:48.55 gRCv6ifL0.net
>>329
こういうと元も子もないないけど、
初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか？
PC版開発⇒Android環境で動作するようにテスト＆修正っていう方がやりやすいぞ
(MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった）
339:デフォルトの名無しさん
22/01/15 23:42:23.10 iJzr35B10.net
>1 に書いてある、
>(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
たぶん、これは元々無かったのに、荒らしが勝手に入れた。
荒らしはテンプレを勝手に改変して、自分が有利な話題だけに絞る。
自分が嫌な話題をさせないように邪魔する
荒らしは必ず、2回以上書き込んで複数人いるように思わせる。
それで、議論を自分が有利な方向へ持っていく
Python のすべてのスレのテンプレも、荒らしが改変している。
>・当スレにRubyのソースコード類を書くことを禁ず
>・Ruby等、Pythonではないプログラミング言語での回答類・質問を書くのも禁止
>・「Ruby では」「Rubyでは」「Rails」正規表現→「^クソチョンw$」をNGワード登録推奨
テンプレ荒らし。
ずっと、荒らしがスレを立てて、テンプレを毎回改変してくる
それをそのまま使っちゃいけない。
必ず削除するか、別のスレを立て直す
この辺の対策は、漏れらは散々やってきた
340:デフォルトの名無しさん
22/01/15 23:53:50.82 6cYxC8yoM.net
そこでつまづいてるならライブラリ使った方がいいと思うぞ
一応コピペしたら使えるlocalforageのテストコード貼っとくから
あくまでテストコードだからPromise.allとか使ってないけど
URLﾘﾝｸ(pastebin.com)
341:331
22/01/16 01:28:59.06 RG8YDX1E0.net
初心者は、Ruby, jQuery, Lodash みたいな簡単な言語・ライブラリなどを使うと、
時間を削減できて、その分を勉強に回せる
だから荒らしは、それを出来ないように制限してくる。
初心者が勉強して上達するのが嫌なんだろう。
自分が不利になるから
それで、あちこちのスレで、ずっとRuby, jQuery, Lodash 禁止のテンプレを作っている。
漏れらは散々、それらの荒らしと戦ってきた
342:デフォルトの名無しさん
22/01/16 02:54:37.36 v/bsDKuq0.net
どの言語でもRubyをゴリ押しするアホが居たからだろ。
343:デフォルトの名無しさん
22/01/16 03:56:51.32 tdI2bixr0.net
RubyガイジがRubyスレ以外の言語で現れるからだろ
しかも質問に対して「Rubyでは～」って言ってRubyのコード貼り付けるし
言い方が悪いけど、Ruby布教したいなら大人しくRubyスレだけでやってくれよ
344:デフォルトの名無しさん
22/01/16 06:23:17.74 69vcad0C0.net
何でネットに仲間意識があるんだろう？
不思議だな、リアルに仲間が居ないのか？
345:デフォルトの名無しさん
22/01/16 06:38:19.21 Lkv6MjG/0.net
前も言ったがrubyスレでpythonの話してもいいっていうなら考える余地がある
現状自分に都合のいい事押し付けてるだけ
346:デフォルトの名無しさん
22/01/17 01:32:28.96 2Ob1kDrm0.net
element.addEventListener(
"toucstart",
function(e){
setTimeout(
function(){
document.addEventListener('touchmove', disableScroll, { passive: false });
}
,
2000
);
}
);
function disableScroll(e) {
e.preventDefault();
}
elementを２秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません
どうすればいいんですか？
347:デフォルトの名無しさん
22/01/17 01:33:54.40 2Ob1kDrm0.net
訂正：touchstartです
348:デフォルトの名無しさん
22/01/17 01:52:23.96 fRpijKvH0.net
長押しか
Lodash に、そういう関数が無いか？
349:デフォルトの名無しさん
22/01/17 02:08:44.57 HXNtZOIm0.net
>>338-339
touchstartとtouchendのタイムスタンプの差分が2秒以上か確認すれば良い
setTimeoutは不要
350:デフォルトの名無しさん
22/01/17 08:35:06.65 2Ob1kDrm0.net
>>341
２秒以上押している間処理実行という場合はどうしたらいいんですか？
351:デフォルトの名無しさん
22/01/17 11:30:42.13 HXNtZOIm0.net
>>342
「toucstartからtoucendまでの間」が押している間
352:デフォルトの名無しさん
22/01/17 12:20:33.86 2Ob1kDrm0.net
>>343
touchendだとタッチを離さないとだめなので
タッチを離さないで２秒以上押しっぱなしという意味です
353:デフォルトの名無しさん
22/01/17 12:35:37.47 46yYb1/oM.net
だからtouchstartから2秒以内にtouchendが無ければ長押し判定でしょ
354:デフォルトの名無しさん
22/01/17 13:25:59.68 HXNtZOIm0.net
>>344
touchstartで処理を開始し、touchendまたは2秒後に処理を停止すれば良い
ボインタ位置も見るならtouchmoveで別の場所に移動した時にも処理を停止すれば良い
355:デフォルトの名無しさん
22/01/17 14:12:06.81 KLYqBwLr0.net
スクロール始まる前のtouchmoveならpreventDefaultでスクロール禁止できるけど
一旦スクロール開始しちゃったら後のtouchmoveでpreventDefaultしてもスクロールキャンセルできない臭い
356:デフォルトの名無しさん
22/01/17 14:43:40.87 /IOfqNlx0.net
>>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が一旦開始すると以降キャンセル不可になるみたいだな
357:デフォルトの名無しさん
22/01/17 18:08:34.74 2Ob1kDrm0.net
>>344
if(touch_end_time - touchi_start_time >= 2){関数呼び出し}ってことかな？
>>346
なるほどー
>>348
だいたいそういうことです
358:デフォルトの名無しさん
22/01/17 18:35:14.87 S5612HsoM.net
touchstartでグローバル変数にsetTimeoutを格納した上で、touchendでclrarTimeoutすれば、clearされない場合にのみdisableScroll()が実行される
359:デフォルトの名無しさん
22/01/17 20:48:15.45 n9KL/cV4a.net
同じ要素が複数あるときに、スクロールした場所だけにactiveを付与する方法ってないでしょうか？
例えば、pタグが等間隔に10個ほど並んでいて、その場所までスクロールしたらそのタグだけにaddClassを実行。それをスクロールする度に実行するという感じです。
該当のタグ全てに連番でclassを振るという方法から始めてみましたが、「今スクロールが到達しているpタグだけにaddClass」という
振り分けが分からず苦戦しております。
どうかお知恵をお借りできたら嬉しいです
360:デフォルトの名無しさん
22/01/17 21:02:08.36 KLYqBwLr0.net
>>351
IntersectionObserver
361:デフォルトの名無しさん
22/01/17 23:24:28.34 fRpijKvH0.net
「javascript スクロールしたら表示」で検索！
jQuery のscrollTop() を使うのかな？
362:デフォルトの名無しさん
22/01/17 23:52:07.20 sHRIiBJ+0.net
>>352-353
どうもです。
>>353
一応それやってみてるんですけど、その方法だと対象のセレクターが複数ある時に使えなくて・・・
363:デフォルトの名無しさん
22/01/18 16:54:34.98 k8xAul1v0.net
ユーゲンガルグ関数がわからん。
364:デフォルトの名無しさん
22/01/18 17:00:08.36 qIbLvF83d.net
めちゃくちゃ素人質問で申し訳ないんだけど複数のbuttonがある状態で押されたボタンのvalue要素を取得する事ってできる？
他との問題でボタンにidを付与出来ないからclassとnameを使ってなんとかしようとしてたんだけどサッパリわからん……
365:デフォルトの名無しさん
22/01/18 18:05:16.94 LpXG9iMK0.net
>>356
event.target.value
366:デフォルトの名無しさん
22/01/18 18:14:12.29 i9X1I8m+0.net
>>356
this.value
367:デフォルトの名無しさん
22/01/18 19:33:28.72 J9BuAn5e0.net
javascriptでマウスクリックできますか？
368:デフォルトの名無しさん
22/01/18 20:52:58.76 LpXG9iMK0.net
>>359
ボタン等の特定要素にはclickメソッドがある
URLﾘﾝｸ(developer.mozilla.org)
clickイベント発火でよければ
URLﾘﾝｸ(developer.mozilla.org)
369:デフォルトの名無しさん
22/01/18 22:37:22.43 JAqSdPQV0.net
>>354
>対象のセレクターが、複数ある時に使えなくて
HTML,CSS,Javascript スクロールしたらふわっと表示(jQueryなし）
URLﾘﾝｸ(notetoself-dy.com)
このサイトでは、すべてのup クラスが付いた要素を、
1つずつループして、show クラスを付けている
<div class="up op">表示1</div>
<div class="up op">表示2</div>
370:デフォルトの名無しさん
22/01/20 21:45:57.61 RhIW6qPa0.net
javascriptで特定のクラス内の文字列をカットしたいです。
.containerの子要素である、.textをターゲットにしたいです。
しかし、container外にも.textがある可能性も考えられます。
ターゲットをcontainer内に絞るには、どんな関数を組めばいいでしょうか？
URLﾘﾝｸ(jsfiddle.net)
371:デフォルトの名無しさん
22/01/20 22:05:50.35 NuVLsXYX0.net
function textCutting(selector) {
const limited_number = 7;
document.querySelectorAll(selector).forEach(node => {
node.textContent = node.textContent.trim().substr(0, limited_number);
});
}
textCutting("#container > .text");
372:デフォルトの名無しさん
22/01/21 19:52:13.30 rIwZ3iU60.net
>>363
ありがとうございます。返信忘れてました。
引数にcontainerを入れておきたいのですが、クラスである場合もあります。
クラスかidどちらでも取ってこれる関数ってありましたか？
373:デフォルトの名無しさん
22/01/21 19:59:06.53 SSxUhBiBM.net
>>364
釣りなのか?
374:デフォルトの名無しさん
22/01/21 20:07:10.92 9UlpI2W40.net
>>364
コードの関数名でぐぐって調べないからそういう質問がでてくる >querySelectorAll
375:デフォルトの名無しさん
22/01/21 20:35:43.67 rIwZ3iU60.net
そうでした すみません
上の例でいうselecterは親要素のセレクタのことだったんですね
376:デフォルトの名無しさん
22/01/21 21:49:18.45 g1zNjN8q0.net
一次配列をmatchメソッドみたいに正規表現で検索して、適合するすべての値を返すのってどう書けばいいんですか？
[ あ,い,う,え,お,あか,いし ] ←この配列を/[あい].*?/で検索して[ あ,い,あか,いし ]みたいな結果を得たい
joinメソッドで文字列化してmatchメソッドつかわずに「一次配列を検索」したいんです
377:デフォルトの名無しさん
22/01/21 21:55:09.36 b7lSBqdq0.net
>>368
["あ","い","う","え","お","あか","いし"].filter(s => /[あい].*?/.test(s));
378:デフォルトの名無しさん
22/01/21 21:57:35.84 9UlpI2W40.net
>>368
filterとtest
379:デフォルトの名無しさん
22/01/21 22:12:34.42 g1zNjN8q0.net
>>369
>>370
おおおお！ありがとうございます助かりました
380:デフォルトの名無しさん
22/01/22 14:09:45.81 NNleZLfU0.net
要素内から
381:複数の要素（例えば同じクラス名を持つ要素）などを取ってくる場合、htmlcollectionとnodelistのどちらを使うんでしょうか？ どちらということはなく、nodelistの下位にある構造がhtmlcollectionかなとも考えています。
382:デフォルトの名無しさん
22/01/22 14:12:22.41 tKSIbGor0.net
>>372
liveかそうでないかを意識すれば、どちらでも良い
プロパティ、メソッドも少し違う
383:デフォルトの名無しさん
22/01/22 14:44:09.28 NNleZLfU0.net
URLﾘﾝｸ(ideone.com)
URLﾘﾝｸ(i.imgur.com)
まず親要素を取り、その後子要素にアクセスしようとしたんですが、foreachは使えないみたいです。
childrenが配列になっていないからかなと思うんですが、インスペクタ見ると配列にはなっているようですが、なぜでしょうか？
>>373
ではhtmlcollection使うことにします。なんとなくとっつきやすかったので。
384:デフォルトの名無しさん
22/01/22 14:58:17.72 tKSIbGor0.net
>>374
HTMLCollectionは配列じゃない
forEachも持ってない
使えるメソッドとプロパティを確認すること
385:デフォルトの名無しさん
22/01/22 15:34:49.54 SQae85PjM.net
childrenに格納されているhtmlCollectionにはforEachメソッドがないので、下記のように書く必要がある
[...children].forEach()
386:デフォルトの名無しさん
22/01/22 15:50:34.18 NNleZLfU0.net
>>375
nodelistに使うものですよね。ありがとうございました。
>>376
ふつうにlengthとってforで回してもいいんですよね。
ソッチのほうが直感的にわかりやすいかなと。
387:デフォルトの名無しさん
22/01/22 15:56:19.54 NNleZLfU0.net
>>376
これは何という記述ですか？
ただの、配列化でしょうか？
388:デフォルトの名無しさん
22/01/22 16:13:03.92 LEmRhRzh0.net
>>378
スプレッド構文
389:デフォルトの名無しさん
22/01/22 16:45:48.19 NNleZLfU0.net
>>379
どうも、見慣れない記述だったので。
こういうのはふつうにforループ回したほうがわかりやすいんでしょうか？
javascript特有の記述というのが難しくて
390:デフォルトの名無しさん
22/01/22 16:57:04.97 cpTU2V8CM.net
特別な理由がない限り、letやforの利用を控えることをオススメする
無意味な状態や副作用をできるだけ排除する構成を心がけよう
391:デフォルトの名無しさん
22/01/22 17:05:10.48 tKSIbGor0.net
>>380
あなたは「何を使うべきか」よりも「どんな機能なのか」を把握することから始めた方が良い
NodeListとHTMLCollectionの選択でHTMLCollectionを選択したかと思えば、HTMLCollectionを理解してないから使いこなせない
理解する前に選択するからそうなる
俺はHTMLCollectionではfor文を使ってるが、特徴を理解していれば何の問題もない
NodeListならfpr-ofを使ってもよい
理解さえしていれば、自ずと選択が出来る
NodeList、HTMLCollection、スプレッド構文、..,etc を理解してから悩むべきだ
392:デフォルトの名無しさん
22/01/22 17:07:49.25 tKSIbGor0.net
× NodeListならfpr-ofを使ってもよい
○ NodeListならfor-ofを使ってもよい
URLﾘﾝｸ(developer.mozilla.org)
393:デフォルトの名無しさん
22/01/22 17:17:07.24 JjDEqDMvM.net
>>381
普通のforで回すよりfor...inとかfor...ofで回した方が要素すぐ扱えて記述少なくて済むのは置いといて
letはvarより使わない方が良いの？
それともforのインデックス用の i を使わない方がシンプルで良いという限定的な条件での話？
394:デフォルトの名無しさん
22/01/22 17:27:40.96 tKSIbGor0.net
>>381
副作用の話は俺も分からなかった
for文に副作用があるとは思えないが
395:デフォルトの名無しさん
22/01/22 17:37:01.92 cpTU2V8CM.net
>>384
現状のvarは「互換性のために残されている」のであって、利用禁止が大前提
その上で、どうしてもconstにできない特別な理由がある場合にだけletを使うってこと
さらにその延長で、forについても使わずに済むなら使わない方が良いってこと
396:デフォルトの名無しさん
22/01/22 17:56:17.90 QY+Rk2d60.net
letもforもどんどん使いなさい
397:デフォルトの名無しさん
22/01/22 17:59:22.62 tKSIbGor0.net
理由不明な禁止ルールを受け入れるようになると、赤の他人の意見を鵜呑みにしておかしなことになるからお勧めはしない
非推奨理由を読んで、受け入れるか判断するのがいいと俺は思う
398:デフォルトの名無しさん
22/01/22 19:12:13.08 a9ljOduXa.net
>>386
なるほど了解。
普通のforで回して処理するよりsomeとかreduceとかのほうが何の処理しようとしてるかわかりやすいしね。
varはブロック内からでもグローバル変数になるからどこから変数内容変更されてるか分かりにくくなり易いから良くないね
399:デフォルトの名無しさん
22/01/22 19:44:53.36 NNleZLfU0.net
>>382
はい
400:デフォルトの名無しさん
22/01/22 19:52:02.18 NNleZLfU0.net
ややこしいのでfor文使うようにします(´・ω・`)、、、
401:デフォルトの名無しさん
22/01/22 19:57:06.18 NNleZLfU0.net
あっ、for of いいですね。
htmlcollectionでなぜforeachが駄目なのか謎ですが。
402:デフォルトの名無しさん
22/01/22 20:26:37.27 NNleZLfU0.net
vscodeについて質問です。
javascriptの補完は完全ではないのでしょうか？
以下のコードのtextContentの部分は候補に出ません。
URLﾘﾝｸ(ideone.com)
403:デフォルトの名無しさん
22/01/22 20:44:09.65 DzShGNE/M.net
ここはvscodeスレじゃない
一応答えておくとjavascriptは動的型付けなので常に補完が出る訳じゃない
そういうのを求めてるならtypescriptを使う
404:デフォルトの名無しさん
22/01/22 20:47:52.03 yE/sDV/tM.net
今回は「使えないみたいです」って聞き方ではないのねw
MDNをよく読んだ上で、実際にどう動くのかをブラウザのコンソールで繰り返し施行するといい
405:デフォルトの名無しさん
22/01/22 21:59:01.76 0B2OkF2o0.net
>>392
HTMLCollectionはArrayのPrototypeを持ってないからforEachはつかえない。
HTMLCollectionでforEachを使いたいなら、Array.Prototype.forEach.callとか。
406:デフォルトの名無しさん
22/01/23 09:03:46.77 ltsaqaCQ0.net
>>396
どちらも配列だと思うんですが、なぜhtmlcollectionだけ使えないのかが分かりません
407:デフォルトの名無しさん
22/01/23 09:04:54.18 ltsaqaCQ0.net
javascriptを書くとき、関数名などに続けて波括弧を書いたほうがわかりやすいと思いますか？
function func(){
console.log("hoge");
}
以下のようにしたほうが構造が分かりやすくないですか？
function func()
{
console.log("hoge");
}
408:デフォルトの名無しさん
22/01/23 09:10:19.94 pqnTeOnra.net
JavaScriptで配列とはArrayのこと
"配列っぽい"ことと"配列である"ことは全然違う
逆に聞くけどどうやって両方配列であると判断したの？
409:デフォルトの名無しさん
22/01/23 09:20:24.21 qS6ibVNz0.net
>"配列っぽい"ことと"配列である"ことは全然違う
初めてやる人にはそんなこと思いもよらないだろうしな
410:デフォルトの名無しさん
22/01/23 09:21:45.33 ltsaqaCQ0.net
>>394
そういうものなのですか。
補完が出ないとちと不安で
411:デフォルトの名無しさん
22/01/23 10:15:35.55 h5wOxsBg0.net
>>398
配列とは new Arrayもしくは [] のこと
new ArrayでforEachを使えるのはプロパティ参照時に Array.prototype.forEachを参照するから
URLﾘﾝｸ(developer.mozilla.org)
プロトタイプチェーンを理解すべき
URLﾘﾝｸ(developer.mozilla.org)
412:デフォルトの名無しさん
22/01/23 10:16:08.20 h5wOxsBg0.net
>>399
いわんとすることは分かるが、厳密にはArrayは配列ではない
new ArrayをArrayと書くと誤解を招く
URLﾘﾝｸ(developer.mozilla.org)
413:デフォルトの名無しさん
22/01/23 11:26:44.19 cv61Nq9M0.net
>>399
URLﾘﾝｸ(youtu.be)
414:デフォルトの名無しさん
22/01/24 05:35:59.89 VeWznQkJ0.net
>>362
.container の子要素(子孫を含めない・直下のみ)である、.text は、.container > .text
親と子を、別々に取得するなら、jQuery で、
<div class="aaa">
<div class="xxx">ああ</div>
<div class="
415: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で書くと、可読性も悪いし、バグってばかりで時間を損する
416:デフォルトの名無しさん
22/01/24 07:11:58.20 bR7FKfqoM.net
ハゲは、素のjQueryで書かずに、Javascript(JS)を使った方がよい。
jQueryで書くと、プログラミングの本質が理解できていないままだし、ハゲてばかりで毛を損する
417:デフォルトの名無しさん
22/01/24 17:37:07.00 LBRFFVWL0.net
初心者こそjQuery使わずに書くべき
418:デフォルトの名無しさん
22/01/25 18:13:09.23 xKqTlXah0.net
element.addEventListner(
"click",
function(e){
clearInterval(timer_id);
var timer_id = setInterval(test_func,1000);
}
);
このようにクリックしたとき前回起動したsetIntervalを削除して
新しいsetIntervalをセットしたいんだけど、前回のtimer_idが取得できないのでうまくいきません
どのようにすればできますか？
419:デフォルトの名無しさん
22/01/25 18:53:59.98 d2MfevVf0.net
>>408
handleEventプロパティを持つオブジェクトにタイマーidを保存する
420:デフォルトの名無しさん
22/01/25 20:54:59.74 MGjq+ZUh0.net
JavascriptってJavaより簡単って聞いたけど、html絡んでくるから難しくないですか？
421:デフォルトの名無しさん
22/01/25 21:56:30.40 Il9sj+JJM.net
>>408
下記のようなグローバルオブジェクトを定義しておいて、その要素として保持しよう
const timer = {}:
422:デフォルトの名無しさん
22/01/25 22:43:16.96 xKqTlXah0.net
>>411
できましたありがとー
また質問だけどsetIntervalとwindow.scrollByを使って自動スクロール中に
手動でスクロールするとclearIntervalで自動スクロールを止めるようにしたいんだけど
自動スクロールも手動スクロールもaddEventListner("scroll",function(e){})が発動して
区別をつけることができないんだけどどうすればいいですか？
423:デフォルトの名無しさん
22/01/25 23:01:22.01 5lVpkzkKr.net
>>410
WebAPI使わなければいいんでない？
424:デフォルトの名無しさん
22/01/26 01:23:00.34 I/6zw4/PM.net
>>412
e.isTrusted で区別できるかも
425:デフォルトの名無しさん
22/01/26 12:30:28.07 XmTyDG1O0.net
>>414
やってみたけど自動でも手動もでtrueだったので判別できませんでした
426:デフォルトの名無しさん
22/01/26 12:40:07.38 9OS9fT5f0.net
>>412
自動スクロール中のフラグを作成して、フラグ管理すれば良い
427:デフォルトの名無しさん
22/01/26 13:12:16.31 bkHBqHOK0.net
>>412
wheel, mousedown、keydownイベントで止めるとか
428:デフォルトの名無しさん
22/01/27 11:57:20.38 ZSUaXKzX0.net
>>417
mousedownはオート・スクロール・モードのことか
URLﾘﾝｸ(atmarkit.itmedia.co.jp)
2アクション必要だから、モード検知がやや複雑化しそうだな…
---
自動スクロールを検知して、自動スクロール以外を手動スクロール扱いする方向で考えてた
これなら、キーバインド変更されても対応出来る
429:デフォルトの名無しさん
22/01/29 02:18:01.02 /eUfBI510.net
oninput="value=value.replace('；','1')"
置換元が特定の全角記号（￥：；＠等）の場合、置換先の文字が2回入力されます。
書き方の問題ですか？回避方法はありますか？
chromeとedgeで発生しました。
ieでは発生しませんでした。
430:デフォルトの名無しさん
22/01/29 03:13:10.90 wMUjEsRbM.net
KeyboardEvent.isComposingで変換中か判定したらいい
<input id="test">
const elm = document.querySelector("#test");
elm.addEventListener("keyup",(e)=>{
if(!e.isComposing){
elm.value =
e.target.value.replaceAll("；","1")
}
})
431:デフォルトの名無しさん
22/01/29 09:47:04.60 /uVNTTXR0.net
>>410
JavaScriptは初心者向けの簡易言語。
432:デフォルトの名無しさん
22/01/29 23:21:16.05 vLNLUfHR0.net
一応入門書を一通り終えたのでelectronでGUI作ろうと思ったら、予想以上に難しくて挫折した。
electron使いの人いる？
いたらどれだけのレベルにならないと作れないか教えて。
433:デフォルトの名無しさん
22/01/30 00:53:12.46 8AeUKyTB0.net
>>419
Node.js で実行したら、1回しか置換されない
inText = 'あい；；ab；；12';
outText = inText.replace('；', '1');
//=> あい1；ab；；12
434:デフォルトの名無しさん
22/01/30 02:04:42.24 acbp/SqRa.net
>>422
俺はelectron使いじゃないけど今本屋に並んでる2022年3月号の日経ソフトウエアでElectronでデスクトップアプリ開発特集載ってたよ
435:デフォルトの名無しさん
22/01/30 12:10:56.23 5V9R/BtT0.net
>>420
これだと普通に置換できますね
>>423
環境によるんですかね
結局こうしました。半角の数字と半角のコロンだけ表示。
.replace(/[０-９：]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/[^\:\d]/g,'').replace('::',':');
最後に[::]→[:]
変なやり方だと思うけど:を二回使う事は無いのでとりあえずOK
replaceどうのこうのではなくて、oninputが2回実行されてるみたいです。
oninput="value=value + 'あ'"
特定の全角記号だと「；あ；あ」、全角英字なら「；あ」
436:デフォルトの名無しさん
22/01/30 12:57:51.16 hMKxlwO1a.net
querySelector
で帰ってきたelementのメソッドでcloset()だとRoot方向にしか検索できませんがchild方向にelementを検索する方法はありますか？
437:デフォルトの名無しさん
22/01/30 13:01:07.63 /oi//KEc0.net
chiled方向に検索するのがquerySelectorじゃないのですか？
438:デフォルトの名無しさん
22/01/30 13:06:33.56 hMKxlwO1a.net
>>427
documentだけじゃなくてelementに対してもquerySelectorメソッドつかえるんですね。ありがとうございます
439:デフォルトの名無しさん
22/01/30 13:12:27.53 y4il4Rjb0.net
>>428
必要としてるのは :scope か？
URLﾘﾝｸ(developer.mozilla.org)
440:デフォルトの名無しさん
22/01/31 12:50:53.75 rc3LWwE50.net
excelの配列数式などでAND OR の代わりに * + 等を使ったりしていましたが
javascriptの条件式のなかに&&の代わりに*を使った場合、
違いはありますでしょうか。
*だと左辺がtrueであっても右辺も評価するなどするのでしょうか。
441:デフォルトの名無しさん
22/01/31 13:20:30.75 QWw3Y16fM.net
>>430
そんなもん手元のコンソールに打って直接確認した方が早いと思うけど、そうしたくない理由でもあるの?
442:デフォルトの名無しさん
22/01/31 13:34:41.41 KJiW2Lya0.net
だってただの乗算・加算なのだから一連の計算全部しないと結果は出せないもの
文字列だった場合バグの温床になりかねないので素直に論理演算子使っとけ
443:デフォルトの名無しさん
22/01/31 15:13:48.28 rc3LWwE50.net
ありがとうございます
444:デフォルトの名無しさん
22/02/01 14:41:29.69 wfvu5dwy0.net
> if(undefined){
445: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 論理演算子的な打ち切りはしてないね。普通に算術演算子だわｗ
446:デフォルトの名無しさん
22/02/01 14:46:27.83 wfvu5dwy0.net
普通に手打ちしてたら、空白とかクォートとかセミコロンの打ち方に全然整合性ないでやんの、俺ｗ
447:231
22/02/04 16:32:44.06 1UhKSGd+d.net
■質問テンプレート
【環境】Android10 F-51A
Chrome 93.0.4577.62
【何をしたのか】セーブ（サンプルコードの一番下の方で実行）を2回以上実行すると、ロード出来なくなる。
【エラーメッセージ】出ません。
【期待する結果】セーブ、ロードが正常に行われるようにする。
【サンプルコード】
URLﾘﾝｸ(ideone.com)
懲りずにお邪魔します。
解決案など思いついた方いらっしゃったら、よろしくお願いします。
今回でアドバイスを得られない、あるいは私の理解が及ばなかった場合、ココナラなどの利用も検討しています。
解決案は知らんけど、有償で良いならこのサイトがおすすめ、みたいな情報も頂けたら嬉しいです。
448:デフォルトの名無しさん
22/02/04 17:05:32.54 eOennQVj0.net
全然見てないしよくわからんけど、なんでセーブとロードを繰り返してるの？
449:デフォルトの名無しさん
22/02/04 17:14:57.96 kUcQ1Y3lM.net
>>436
1. 非同期の基礎を勉強する
2. コールバックAPIをPromisifyしてawaitする
450:デフォルトの名無しさん
22/02/04 17:20:39.40 5yD7H7/00.net
>>436
書き込み、読み込み後にデータベースを閉じてないから2回目のdeleteDatabaseが出来ずに永遠に待ってる
データベースである必要ないならストレージ使えってば
451:231
22/02/04 17:21:33.29 1UhKSGd+d.net
>>437
最初のセーブでは、ロード成功するんです。
2回目のセーブをすると、ロードに失敗するんです。
一度目の処理では成功してるけど、二度目で失敗してるのを見て貰うために、今回のコードでは繰り返しにしました。
452:デフォルトの名無しさん
22/02/04 17:22:14.91 58zz3a0tM.net
まず変数はletかconstを使って明示的に宣言する
あと非同期処理の勉強をした方がいい
url先のコードは処理が行われる順番を考慮してない
コードで例示すると
consｔ elm ＝ ｄocument.querySelector("#input")
ｌet ｍail;
elm.onｉnput = (e) ＝> {
mail = e.target.value;
}
console.ｌog(mail);
みたいなコードを書いてる
oninputはすぐに呼び出されないのに先にmailを参照しているからバグる
他にも色々ありそうだけど自分がパッと見つけられた間違いはこれだけ
(文字が全角になってるのはCloudflare対策)
453:デフォルトの名無しさん
22/02/04 17:23:09.66 0CWz3hfAM.net
変数の宣言方法と変数のスコープについても学んで下さい
”use strict”;使うように
454:231
22/02/04 17:27:11.67 1UhKSGd+d.net
>>439
実現出来るかわからないのですが、理想通りに事が進むと、主にマップデータで結構容量食いそうで心配なんです。
そういう心配事は取っ払ってから制作したいもので。転ばぬ先の杖って言うんですかね。
455:231
22/02/04 17:27:20.65 1UhKSGd+d.net
みなさま
456:231
22/02/04 17:28:39.30 1UhKSGd+d.net
失礼しました。
予想以上に早く、また親切にアドバイスして頂けて嬉しいです。
本当にありがとうございました。
457:231
22/02/04 17:36:54.98 1UhKSGd+d.net
今回躓いたところは完璧に解決しました。
皆様、本当にありがとうございます。
458:デフォルトの名無しさん
22/02/04 17:37:47.88 fRxFESBHM.net
>>443
ライブラリ使えって散々言われてたじゃん
使いたくないとか言ってたけど今ライブラリ使ってないプログラムなんてほとんどないぞ
459:デフォルトの名無しさん
22/02/04 23:04:44.52 gGuISdVA0.net
eval関数なしで
テキストボックスに入力されている
5*6*4+56/24のような計算をするにはどうすればいいでしょうか？
460:デフォルトの名無しさん
22/02/04 23:19:30.94 /i5Sn7pz0.net
再帰下降構文解析でググれ
461:デフォルトの名無しさん
22/02/05 00:01:28.09 sD6dJYyZd.net
eval is evil
462:デフォルトの名無しさん
22/02/05 15:51:37.55 7rGxUilP0.net
>>449
ありがとうございます
ググって見たんですが、かなり難しいですね、知らないコードも多くて挫折しそうです
463:デフォルトの名無しさん
22/02/06 14:13:43.12 jyf5OL160.net
>>448
URLﾘﾝｸ(qiita.com)
464:デフォルトの名無しさん
22/02/07 07:37:13.78 90TSH41+H.net
グッドモーニングショーで未だにファックス使ってコロナ集計してやんのｗって言ってましたけど
特定サイトで入力した個人情報や体調情報などをQRコード化して読み取りパスを設定し
その情報を診療所などで携帯で読み込むと、自動的に院内システムと保健所など供給機関にJSONで送情されるようなの
あっという間にできそうなんだけど
セキュリティ面感がなければ2時間くらいでできそう
465:デフォルトの名無しさん
22/02/07 08:42:42.57 2FnRi9wN0.net
>>453
院内システムは普通インターネットに疎通していない。
Drがインターネット使うのも全部、画面のみ転送のリモートデスクトップ。
466:デフォルトの名無しさん
22/02/07 08:56:33.13 4W18gTd9a.net
単機能のシステムなら出来そうだけど
あれもこれもと仕様が膨れ上がって予算もウン十億になり
最終的に使い勝手の悪いガラクタになるのがオチ
URLﾘﾝｸ(wedge.ismedia.jp)
467:デフォルトの名無しさん
22/02/07 12:51:27.00 QUqmCtWk0.net
規格を統一するのが難しい
医療機関は、各SIer でバラバラだろ
468:デフォルトの名無しさん
22/02/08 06:39:24.19 L7XKTsfqH.net
先進諸国ってシステム規格は統一してるん？
なんで日本だけファックスよ？
469:デフォルトの名無しさん
22/02/10 18:43:10.54 yttBwpD00.net
firefoxを使ってるんですが
マウスのソフトウェアの左クリックの連射機能を使うことがあって
その際にリンクやボタンを多重クリックを避けたいので
特定のエレメントにイベントリスナーでクリックするとstyle.display = 'none'にするようにしたんですが
これが実際に多重クリックになってるかどうかは
どのように判断すればよろしいのでしょうか
ブラウザの開発ツールなどで簡単にわかる方法ありますでしょうか？
それとももう一度同じエレメントにイベントリスナーでクリックした場合
カウンターにインクリメントさせてconsole.logがいいのでしょうか
(この方法も正確に取れているのかは私にはわかりません)
470:デフォルトの名無しさん
22/02/11 20:34:20.02 efWVJIaOH.net
質問させてください
let ar={a:{a1:1}};
console.log(a1); // ① a1 is not defined
let {a:{a1}}=ar;
console.log(a1); // ② 1
a1を出力したのですが、
①は未定義
②は１が出力されています
どうして①と②の出力結果が異なるのでしょうか？
471:デフォルトの名無しさん
22/02/11 20:42:04.99 XbmfRAz/p.net
>>459
オブジェクトの分割代入されるから。
472:デフォルトの名無しさん
22/02/12 11:33:13.66 RPVXSf4c0.net
>>459
①のa1はグローバルレキシカルを参照したけど定義されていなかった
②のa1はグローバルレキシカルを参照したらオブジェクトとして登録されていたのでvalueを返した
②は{a:
473:デフォルトの名無しさん
22/02/12 11:55:49.55 GfpJrBC6M.net
>>459
>>460が書いてるように3行目は分割代入なんだけど
特にオブジェクトデストラクチャリングと呼ばれる機能
URLﾘﾝｸ(developer.mozilla.org)
3行目でaとa1という変数が定義される
それ以前はa1という変数が定義されてないからundefined
とりあえずstrictモードを使いましょう
474:デフォルトの名無しさん
22/02/12 23:28:01.59 c6xzFFYJ0.net
何で理解していないのにこんな書き方して分かりませんって質問しているのだろうかｗ
目的は？
475:デフォルトの名無しさん
22/02/13 11:28:11.91 Y75YevLW0.net
>>462
3行目のaは変数じゃない
476:デフォルトの名無しさん
22/02/15 16:00:20.18 WCBHI7+n0.net
JavaScript の配列の要素をすべて削除する
URLﾘﾝｸ(qiita.com)
arr.length = 0 じゃダメなの？
477:デフォルトの名無しさん
22/02/15 16:55:47.25 6QhYGEARr.net
arr = null
もしくは
arr = []
じゃダメなの？
478:デフォルトの名無しさん
22/02/15 20:35:06.19 v0u4j5eD0.net
>>465
いいと思うが、そう思ったなら本人に伝えればいいのに
あと、teratailスレのは誤投稿か？
ｽﾚﾘﾝｸ(tech板:304番)
479:デフォルトの名無しさん
22/02/15 20:41:42.47 YCvdbcjXM.net
自分は arr.length = 0 を使う
>>466
arr が let ならそれでもいいけど、const の場合は再代入出来ない
480:デフォルトの名無しさん
22/02/15 21:08:32.51 6QhYGEARr.net
>>468
constなのに長さ0にしちゃっていいの？
481:デフォルトの名無しさん
22/02/15 21:10:50.44 v0u4j5eD0.net
>>469
constが禁止するのは再代入
プロパティ変更は禁止しない
482:デフォルトの名無しさん
22/02/15 22:48:45.41 6QhYGEARr.net
>>470
そういう意味ではなく
constで定義している配列の長さを0にするってことは変更不可として定義してる配列なのになぜか0になってるというバグを生みやすいんじゃないか？
483:デフォルトの名無しさん
22/02/15 23:01:49.17 z5poVj2c0.net
>>471
「変更不可」と「再代入禁止」の区別を付けられるようになろう
君のその認識こそ、不具合を生み出す原因になるよ
484:デフォルトの名無しさん
22/02/15 23:03:26.68 JA2Mlap+0.net
別に変更不可って意味でconst使わなくないか？
485:デフォルトの名無しさん
22/02/15 23:07:54.82 6QhYGEARr.net
やっぱjavascriptは欠陥言語だよな
定数とオブジェクトでconstの使い方変わるし
486:デフォルトの名無しさん
22/02/15 23:20:36.81 NudRi/Oa0.net
ワロスｗ
487:デフォルトの名無しさん
22/02/15 23:24:11.41 oyYnjwf7d.net
草
488:デフォルトの名無しさん
22/02/15 23:54:38.03 DOsFVpUk0.net
笑
489:デフォルトの名無しさん
22/02/15 23:54:58.40 DOsFVpUk0.net
いや
大爆
490:デフォルトの名無しさん
22/02/16 00:38:29.63 dZoJOzXw0.net
欠陥言語か？cのconstと同じでは？
491:デフォルトの名無しさん
22/02/16 12:21:54.58 Nuw/c3FA0.net
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! #=> エラー。変更できない！
492:デフォルトの名無しさん
22/02/16 22:54:05.43 CjOKbN9ya.net
スレ違いも守れない身勝手なクズ
493:デフォルトの名無しさん
22/02/17 22:37:18.01 TmsR/NWJ0.net
<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と表示されてしまいます
どこが間違っているんですか？
494:デフォルトの名無しさん
22/02/17 23:03:32.28 Np/YPCaB0.net
>>482
スコープまわりの認識とか？
var を使わずに const, let 使えば意図した通りに動くはず
495:デフォルトの名無しさん
22/02/17 23:21:36.38 eqAwClgCa.net
alert (elm.value)をalert(e.currentTarget.value)に変えたればおけ
496:デフォルトの名無しさん
22/02/17 23:28:41.09 7BD8Ewk+0.net
alert(this.value)
または
const elm = document.getElementById(id_list[n-1])
497:デフォルトの名無しさん
22/02/17 23:31:46.94 U/Ab4M74p.net
これから新規でスクリプト書くなら、特別な理由がない限りvarは使わずletかconstだけ使うほうが、変なミス起こらなくていいと思う
498:デフォルトの名無しさん
22/02/18 10:44:02.23 tiifqQ9V0.net
初心者は、jQuery を使えばよい
分かりにくい、this の意味も変えてある
499:デフォルトの名無しさん
22/02/18 11:35:27.02 tiifqQ9V0.net
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 )
} );
500:488
22/02/18 12:16:47.94 tiifqQ9V0.net
>>488
に追加
セレクターをカンマで区切れば、A またはB でも出来る
// .BtnA or .BtnB のみ
$( '.BtnA, .BtnB' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );
501:デフォルトの名無しさん
22/02/18 12:23:50.32 aHWUA2kK0.net
>>483-485
やってみますありがとー
502:デフォルトの名無しさん
22/02/18 12:38:42.82 YjRRevVzM.net
イベントのバブリングを学ぶにはいい機会（丁度よい題材）だとは思うけど、「初心者に向けて」というエクスキューズでもって今時jQueryを勧める態度には悪意に近いモノを感じる
503:デフォルトの名無しさん
22/02/18 21:37:34.77 rjrdvPAWd.net
今後廃れていくだけだもんな
新たに学習する必要はないわな
504:マッチ棒
22/02/19 09:29:33.08 SYl7hXba0.net
こんにちはこのたびはお世話になります
Javaスクリプトの質問ですが
いろいろ煮詰まっておりさしあたり
変数のスコープとオブジェクトのことがよくわからないでして
変数は関数内のみのローカルありますよね
でオブジェクトも
var obj=new obj()
といったインスタンツなら変数とおなじでローカルだったりグローバルだったりするんですかな
まずは以上よろしくお願いします
505:デフォルトの名無しさん
22/02/19 09:52:37.76 ApZEftHir.net
もうvarは使うな以上
506:マッチ棒
22/02/19 12:07:18.29 SYl7hXba0.net
バーよりレッツを使うんですね承知しました。
ブラウザ画面内に表示されたDOMオブジェクトは常にグローバルなんですかね
何もかもがわからん
507:デフォルトの名無しさん
22/02/19 13:34:02.57 XlinVUCj0.net
window.document.body, window.document.head など、
windowオブジェクトはグローバル
windowが無くても、document.head でも同じ
window.document.head == document.head
//=> true
例えば、Pjax で、ページを作っている場合、
ページ遷移したように見えても、window に追加したオブジェクトは初期化されない。
そのまま残っている
ページの一部分しか変更されていないから。
ページをreload していないから
508:デフォルトの名無しさん
22/02/19 16:01:34.02 c/9+L37GM.net
Pjax is なに
509:デフォルトの名無しさん
22/02/19 18:28:21.70 fGIkG9WE0.net
>>491
むしろ悪意そのものでしょ
510:マッチ棒
22/02/19 18:38:03.12 SYl7hXba0.net
参考書に、Javaスクリプトにはクラスの概念はない、て書いてあるんですが
もしかして情報が古い？
511:デフォルトの名無しさん
22/02/19 18:39:00.10 9/CFXaUW0.net
はい
512:デフォルトの名無しさん
22/02/19 18:43:12.48 QjUSXh+yM.net
その本で勉強するのやめたら
varを使ってるのもそのせいだろうし
513:デフォルトの名無しさん
22/02/19 19:02:00.92 LKw+j5240.net
>>499
「クラスの概念がない」は正しい
JavaScriptはプロトタイプベースでclass文は糖衣構文だからな
そういう意味で書かれているのなら正しいといえるが、書籍を持ってない人が文脈を読みとれるはずもない
書籍の正しさを保証するのはその書籍を持っている人だけ