JavaScript の質問用スレッド vol.125
レス数が1000を超えています。これ以上書き込みはできません。
!extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950が>>2の「次スレの立て方」を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
■前スレ
JavaScript の質問用スレッド vol.124
https://mevius.5ch.net/test/read.cgi/tech/1636525464/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured ■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
https://plnkr.co/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■次スレの立て方
本文一行目に「!extend:checked:vvvvvv:1000:512」と書いて、>>1-5のテンレの「前スレ」「関連スレ」を最新化して立ててください。
■JavaScriptスレの現状
元々はWeb制作板が本スレでしたが、ライブラリ信者に荒らされ、プログラム板に避難所として本スレが立てられました。
Web制作板の本スレは荒らされてから次スレが立っておらず、重複スレの消化のみとなっています。
実質的に本スレは存在しない為、質問者はWeb制作板、ブログラム板のどちらのスレで質問しても問題ありません。 テンプレここまで。
テンプレは前スレ、前々スレを元に、よくある議論(Web制作板へ誘導云々)を独断で追加した。
問題があれば、修正案を提案して頂ければ。 > Javascript はweb制作管理板、CGI はWEBプログラミング板へ。
これは？ >>6
プログラム板のローカルルールか
「今ではNode.jsもあるし、JavaScriptはWeb制作言語に限定されないよね」を理由にプログラム板に立てられた、と記憶してる
Node.jsスレを関連スレに入れるべきだった
【非同期】node.js part.1【javascript】
https://mevius.5ch.net/test/read.cgi/tech/1582906877/ この板のJavaScript スレは、
web制作管理板が荒らされた時に、緊急避難用として立てられたもの
もう、この板でやる必要はない。
web制作管理板の方へ移動すべし！
全く、HTML, jQuery などに関係ない、
Node.js でも扱うなら、この板でも良いけど、
基本、Ruby on Rails などのフレームワークは、WEBプログラミング板 >>8
本スレがなく、ライブラリ信者が健在なWeb制作板に移動する理由はないと思う >>8はRubyを引き合いに出す件の荒らしだから気にしなくていい ローカルのhtmlファイル内に記載してるjsで位置情報取得するコードを書いてるのですが、
毎回位置情報を尋ねられてしまいます。
webサイトのページなら位置情報の使用許可を一度設定すれば、そのサイトでは次から尋ねられなくなりますが、
ローカルのhtmlファイルを開いても同様に永続的に位置情報の使用を尋ねられないようにする方法はありますか？
ブラウザはchrome使ってます。 あとは https にしてみたらどうか
atmarkit.itmedia.co.jp/ait/articles/1605/13/news038.html file:はともかくhttp:にも機能制限かけるのは逆効果だと思う
クラウド売りたい一心なのだろうけどオレオレ証明書が増えてかなわんよ そもそもwebアプリ作るなら仮想環境なり、dockerなりで開発環境を作った方が良いかと すんませんjQueryの質問なんやけど
eachでliタグの子要素のimgタグを取得してalt属性を追加して値はliタグの子要素のemタグのテキストにしたいんだが
全部のliタグの子要素のemタグのテキストを追加してしまう
対応するliタグの子要素のemタグのテキストをそれぞれ追加したいんや！
おせーてくれ！！たのんます！！ >>17
スレ違い
>>3のjQueryスレへ誘導 jQuery の質問は、web制作管理板の方へ書き込んでください
確か、jQueryのスレがあったと思う。
無ければ、JavaScript のスレへ japascriptは難しい。
初心者はまずはRubyから始めること
そしてRuby on Railsを習得する
javascriptｙとjQueryはその後で良い。
こっちのスレで質問すれば親切な達人プログラマーがどんな質問にも懇切丁寧に答えてくれる。
↓
Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/ clickのタイミングについて
<input type="button" value="クリック" id="bt">
let aaa=0;
setInterval(
function(){
aaa=100;aaa=200;aaa=300;aaa=400;aaa=500;
},0
);
document.getElementById("bt").addEventListener(
"click",
function(e){alert(aaa);}
);
何回クリックしても500と表示されるけど500以外が表示されることはないんでしょうか？
aaaが200のときにクリックが割り込むとかはないんですか？ >>21
タイマー処理の関数呼び出しの途中でイベントハンドラが処理されることはない >>22
どうもです
タイマー以外のfunctionでもfunctionの途中でイベントハンドラが呼び出されることはないってことですか？ JavaScriptは基本シングルスレッド
関数の実行途中に別の関数の処理が割り込んでくるようなことはない Wan、Lanどちらからもアクセス可能なWebサーバーで
アクセス元がどっちなのかを判断する方法はありますか？ サーバーで判断すべきだろう
クライアントで知りたいならサーバーに聞けばいい ナンセンスな質問かもしれませんが、JavaScriptにおいて関数はデータ型としてオブジェクトであり、一方でオブジェクトはプロパティとメソッドの集まりであると説明されています。
関数とオブジェクトはどちらが先に定義されているのでしょうか？ >>31
先に存在しているとか先に実装されている(?)というようなイメージです >>30
定義が無限循環してると言いたいんだろうけど広辞苑にだってそういうのはあるし、関数ノットイコールメソッドと考えれば矛盾はしてない
たぶんオブジェクトが先だろうけどね >>33
ありがとうございます
もう少し調べてみると、 https://tc39.es/ecma262/multipage/overview.html#sec-ecmascript-overview でTerms and Definitionsのところに、関数はオブジェクトであってプロパティの他に実行可能なコードと状態を持つもの、という感じのことが書かれてて、メソッドはオブジェクトのプロパティの値である関数のことと書かれていました
こちらの説明で一旦納得できました オブジェクトが先
オブジェクトはプロパティのコレクション
プロパティとはkey/valueのペアのこと
keyはStringでvalueはプリミティブかオブジェクト オブジェクトを定義するのにオブジェクトを使ったりStringという別のオブジェクト使えるの？
と疑問に思うのかもしれないけど
定義が存在する(名前解決可能である)ことを確認するフェーズと
定義の中身を検証するフェーズを分けることで可能
foo関数の中でbar関数を呼び出しつつ
bar関数の中でfoo関数を呼び出すような関数定義ができるのと同じこと >>32
「実装」というが、「仕様」上で両方とも存在しているなら、同時に「実装」されるのでは？
>>34
ES3には「オブジェクト」の定義はあるが、「関数」の定義はない
故に「歴史的にはオブジェクトが先に定義された」といえなくもないが、そんな回答を望んでいるようにも見えない
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/4_Overview.html#section-4.2.1
参考になるかわからないが、typeof演算子は「[[Call]] を持つObject型」の場合に "function" を返す
https://262.ecma-international.org/13.0/#sec-typeof-operator ブックマークレットのスレッドかこちらか悩みましたが質問なのでこちらでご相談させていただきます。
他者のWebサイトを閲覧する際、JavaScriptを用いて作成されている場合、リンクを新しいタブで開けない場面があります。
頻繁にページを進んだり戻ったりする場面、可能であればリンク先を別タブで開くようにしたいです。
ブックマークレットを用いて、現在ページのJavaScriptのリンクを別タブで開くように書き換える処理をすることは可能でしょうか？ >>39
そのサイト次第かな
クリックした後の画面を一発で開けるURLが用意されてたら基本的に実装できると思う 連想配列から特定のキーを検索して、重複がないもののみ取り出した配列を取得したいのですが、
このコードだと速度的に問題がありました。何か良い方法があったら教えていただけないでしょうか
const a= [
{'id': 1, 'category': 'animal', 'kind': 'dog'},
{'id': 2, 'category': 'fruit', 'kind': 'apple'},
{'id': 3, 'category': 'fruit', 'kind': 'orange'},
{'id': 4, 'category': 'animal', 'kind': 'dog'},
{'id': 5, 'category': 'animal', 'kind': 'cat'},
{'id': 6, 'category': 'fruit', 'kind': 'grape'},
]
var b=a.filter((x,y,z)=>z.slice(0,z.length).filter(w=>w.kind==x.kind).length＝=1);
console.log(b); >>41
const buckets = a.reduce((buckets, current) => {
if (!buckets[current.kind]) {
buckets[current.kind] = [current];
} else {
buckets[current.kind].push(current);
}
return buckets;
}, {});
const b = Object.values(buckets)
.filter((items) => items.length === 1)
.flat();
速度は測ってないけどたぶんO(n^2)→O(n)になって速いはず >>41
要素数や重複要素のばらつき具合によって結果は変わるが、最終的には力業が最速な事が多い
https://jsfiddle.net/gft5ah0n/
極端な結果になっているのは重複要素がすぐそばにあり、while文による検索ですぐに見つかる為だ
重複要素が遠い位置にあるなら、while文による検索が遅くなるケースも十分にある
>>41のコードが比較的高速なのも重複要素が比較的近くにある為だ
Object.valuesやArray#filterによる変換コストが検索コストより高くついているので、他のコードが比較的遅い
重複検知が頻繁に発生するようであれば、データのも持ち方を new Map や new Set を使うように変更した方がいい
配列はユニークな値を得るのに向いていない >>44の補足
jsfiddleのconsoleはconsole.time()を実装していないようだ
ベンチマーク結果はブラウザのコンソールで確認する必要がある すまん
>>44のwhile_loopは期待通りに動かないので忘れてほしい(console.assert()のコードをミスって気づかなかった)
重複要素のばらつき具合によるが、(>>41の配列においては)暫定最速は>>41 >>46
console.assert()の修正、重複チェックをkindのみに修正したら、mapが最速になった
https://jsfiddle.net/bw8z2acf/ >>47
高速化で考えるべきは「ループ回数の削減」と「変換回数の削減」
>>41 source
>>42 reduce
>>47 map
reduceはループ回数は削減されているが、変換回数がsourceよりも多い
要素数6では「変換コスト > 検索コスト」になってしまい、sourceよりも遅い
要素数192では「変換コスト < 検索コスト」となるので、sourceよりも速い
mapの変換回数は2回で Array.from() と results.values() のみ
ループ回数、変換回数ともにsource,reduceよりも少ない
要素数6、要素数192のいずれも map が最速となる
実際のところ、変換を一度も発生させないコードが理想となる
データの持ち方として配列(new Array)であるべきなのか、はよく考えた方がいい >>39
a要素でマークアップされているなら、難しくはない
for (let a of document.querySelectorAll('a[href]')) a.target = '_blank';
window.open()などでリンクを開く挙動もJavaScriptで制御しているなら、コードを読んでリンク先を得る手段を考える必要がある >>40
>>49
ありがとうございます。
テーブルの表示となっていて、行全体にリンクが設定されているようです。
以下のような記載が複数並んでおり、通常は左クリックでリンク先に移動しかできず、新しいタブで開くことができません。
<tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”>
<td class=”〇〇〇”></td>
<td class=”〇〇〇”></td>
</tr>
素人ながらいくつかブックマークレットで試したのですが、逆に実行するとリンクが無効になる事が多々でした。
アドバイスをいただければ幸いです。 <div style="width:100%;height:200px;border:Solid 3px #0000ff" id="test"></div>
これのcss初期設定を取得したいのでstyle="○○"の○○部分を抽出したいんだけどやり方がわかりません。
element.style.widthみたいに取得すると途中で値を書き換えられると初期設定が得られないので
最初にタグに埋め込んであるものを取得したいんです。 element.style.hoge=fugaしたらstyle属性値も連動するんだから
書き換える前に取得しとくしかなくね？ >>51
・直後にscript書いて書き換え前にstyleを取得しておく
・Fetch APIでhtmlをGETしてCSPでscript無効化してparseしてstyleを得る >>50
開発者が、どのフレームワークを使っているのか分からないけど、
例えば、Ruby on Rails, Stimulus を使っているなら、
[Rails]Stimulusを使ってtableの行全体<tr>をリンクにする(jQuery不要)
https://zenn.dev/necocoa/articles/rails-stimulus-tr-link
これのhref_controller.js に、
export default class extends Controller {
toHref(event) {
// 既定の動作を取り消す
event.preventDefault()
// data-href 属性に入っている、URL を取得する
const href = event.currentTarget.dataset['href']
// URL を設定する
window.location.href = href
}
} >>56
// URL を設定する
window.location.href = href
みたいに直接、window.location.href に設定しているけど、
この場合、Ctrl + クリックや、
右クリックメニューから新しいタブで開くことは出来ないのかな？ >>50
遷移する時にdata-targetが使われることを見込んでこれでいけるかもね
for (let tr of document.querySelectorAll('tr.〇〇〇')) tr.dataset.target = '_blank'
※〇〇〇はtrのクラス名で document内の要素で、textContentに'xxx'を持つクラスを取得するにはどうしたらいいですか？
全部の要素総当たりでtextContent調べるしかないんでしょうか？ >>50
JavaScriptコードが不明なので正確な回答は不可能
>>58の想定通りなら、おそらくその実装が一番楽
tr要素ノードにclickイベントハンドラでwindow.openする実装と仮定して、下記実装が考えられる
1. elementdataset.hrefでリンク先アドレスを得る
2. createElementでa要素ノード生成
3. replaceChildで(A)のDOMになるよう調節
4. tr要素ノードの仕掛けられたであろうclickイベントハンドラをevent.stopImmediatePropagation()で封印
(A)
<tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”>
<td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td>
<td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td>
</tr>
window.open()なんてレガシーコード書きたくないからあえてa要素を使っているが、
イベントを横取りできるなら、既存イベントハンドラと同じコードにしても良い プログラミング初心者でJavaScriptを勉強してます。
メンバ変数A、メソッドBを持つクラスがあり、メソッドBの中で変数Aを活用（Aを用いた処理やAの変更）したいのですが、
Aを引数としてBに渡して返り値として受け取るのと、Bの中で直接this.Aと記述して処理するのは何か違いがありますか？
メソッドBに別の変数を渡す可能性があるなら前者でないといけないのでしょうが、そうでなければ後者の書き方でよいでしょうか？ >>63
this.Aは全てのインスタンスメソッドで参照できる
this.Aはインスタンスを参照可能なスコープ上で参照可能
仮引数AはメソッドBの関数スコープ外から参照不可能 Ruby で書くと、
initialize は、constructor
class A
def initialize
@x = 0
end
def f_1
@x = 1
end
def f_2( num )
@x = num
end
end
p a = A.new #<A: @x=0>
a.f_1
p a #<A: @x=1>
a.f_2( 2 )
p a #<A: @x=2> >>66
↓のsetAとcalcAの違いを聞いてるんじゃないのか？
class Foo {
constructor (a) {
this.A = a;
}
setA (a) {
this.A = calc(a);
}
calcA (a) {
return calc(a);
}
}
わかっているらしいあなたが回答すれば済む話だが すいません。以下の様な状況でfuncCからfuncBまたはB'が呼ばれる状況を考えていました。B'のほうが楽な気がして。そもそも意味不明な質問だったら申し訳ないです…
```
class Foo{
varA; // varAの値はよそから取得
funcB (a){
//aに対する処理
return a;}
funcB' (){
//this.varAに対する処理
}
funcC(){
ans = funcB(this.varA);
または
funcB'();
ans = this.varA;
}
} Ruby では、>>65
に書いたように、
def f_1
@x = 1
end
みたいに、クラス内のインスタンスメソッド・f_1 内で、
インスタンス変数・@x を使えるので、一々、引数で渡す必要がない オブジェクト指向の一般的な話としては、クラス内の関数であればクラス内のメンバはいじっても問題ないと思う。
ただ、「どこの関数がこのメンバを触ってるのかわからない」ってほどクラスが巨大化するなら、もはやそれはたちの悪いグローバル変数そのものなので設計からおかしい。 >>68
一つ一つのコードの意味を理解して、一つ一つのコードでなぜをそれを使うのか、と自問して答えを出せば、自ずと答えが出てくる
質問していない部分で突っ込みどころが多すぎて、「何も考えてないんだな」と思わせられる
https://jsfiddle.net/qem7cLyf/
・なぜ 全ての関数は返り値を持たないのか？
・なぜ Foo1#funcB は静的関数ではないのか？
・なぜ Foo1#funcC,Foo2#funcC は返り値ではなく、グローバル変数に演算結果を格納したのか？
・なぜ Foo2#varA の初期化にコンストラクタの引数を使わないのか？
こういう質問全てにこたえられるぐらいに考えられないと良いコードはかけない
https://jsfiddle.net/s27mxepn/
・可能な限り、変数のスコープはせまくあるべき
・可能な限り、関数は参照透過性を持つべき
今後、インスタンスプロパティを拡張する予定があるならclassを使うべきだし、そうでないなら静的関数で十分
>>64で示した挙動の違いだけで十分に判断できる それがプログラミング初心者に投げつける言葉かよ・・・
そういう知識や判断力もゆくゆくは必要だけども物事には順序ってもんがあってまだその域ではなかろう
マウントが取りたいだけならもっと近いレベルの相手にやんなよ >>63
いいと思うよ
というかBに汎用性を持たせるのは微妙 this.Aで書いた方が手っ取り早いことが多い気がしたのですが、そちらでもいいけどスコープに注意しないとバグの要因になる、グローバル変数を濫用しないようにというのと相似形の似たような話という認識でいいでしょうか。
下手したら必然性なく両者を混在させてしまったりしそうなので注意したいと思います。参照透過性とか言葉自体知りませんでした…
参考になりました。ありがとうございます。 >>74
今は>>70の理解でいいと思うよ
今の時点であまり詰め込んでもしょうがないし
>>71みたいなののせいで萎縮しないでね >>72
> 物事には順序ってもんがあってまだその域ではなかろう
順序が大切なことには同意
ダメ出しがたくさんあるのは「学習の順序」が間違っているから
いろいろと学習を飛ばしてコードを書いており、その質問をする域に達していない
初心者だからこそ、もっと基礎的な課題から取り組むのが現実解だと俺は思う
今までの受け答えを見る限り、付け焼刃で知識をつけているように俺には見える
> マウントが取りたいだけならもっと近いレベルの相手にやんなよ
マウントを取りたいわけじゃない だから、オブジェクト指向とかプログラミングは、Ruby から始めるべき。
JavaScript(JS)みたいなややこしいもので、デザインパターンを学ぶべきではない
改訂2版 Ruby逆引きハンドブック
の1冊だけで、かなりのモジュール・ライブラリの使い方も分かる
同じページ数でも、JSなら、文法だけで終わる。
20年以上のJSの歴史を追っかけて行くから、文法だけでもRubyの5倍ぐらいある
だから、こういう言語へ手を出したらダメ。
Rubyist は、JSなどをコピペで済ます。
深い所までやらない。分量的に切りがない 学習の順序とか提示せずに「何も考えてない」と切り捨てるのはマウンティングに入らないんですか？ 回答者相手にマウントとってる人に真面目に答えるだけ無駄か
そんな暇があったら、質問者に回答すればいいのに 君は高圧的な正しさで初心者を殴ってるだけ
人にものを教えるのには向いてないと思うよ >>80
5chはそういうものと思っていたが、それがこのスレの流儀なら気を付ける
だが、回答者に高圧的だったり、回答者にマウントをとる人も是正されるような公平な世界であってほしいね 具体的にどの発言に対して言ってるのかわからんけど
そういう何か言い返さないと気がすまないって気持ちは心の中にしまっておいた方がいいんじゃないかな 自分の過ちを認めると負けたみたいでプライドが傷つくから
俺も悪かったけどお前らも悪いから引き分けだよねということにしたい心理の表れ 元の配列を関数内で空にしたいけどうまくいきません
100と表示されてしまったので空になっていませんでした。
配列は参照渡しなので元の配列も書き換えられると思ったんだけど
どうやれば関数内で元の配列を空にできますか？returnは使いたくないです。
let a_list = [100,200,300];
test(a_list);
function test(b_list){
b_list = [];
}
alert(a_list[0]) >>84
function test(b_list) {
b_list.length = 0
} b_list = [];
が何故ダメかというとb_listを空にしてるんじゃなくて
b_listに新しい配列を代入してるだけだから
ということは覚えておこう ブラウザで動かすとき、グローバルスコープでの demo って名前は何かある？
この名前の関数作ってボタンの onclick から呼び出そうとしたら関数未定義のエラーになる。
別の名前にすると呼び出せる。 タイポかスコープの勘違いとかじゃないの？
コンソールでdemo関数定義して実行したら普通に動いたけど >>90
こんな感じだけど、ちょっと分かってきた。
全体貼ろうとしたらセキュリティチェックかなにかに引っ掛かって書けないから、scriptタグの中身と body の中身だけ。
function demo() { alert('DEMO'); }
<form>
<input type="button" name="demo" value="DEMO" onclick="demo()">
</form>
この onclick にとっての demo は多分 form内の input要素の demo になるんだね。
スコープがこの form になると。 エラーは未定義関数じゃなく、demo is not a function だった。 thisとthis.formがスコープに入る仕様だそうな
https://qiita.com/hakatashi/items/40fbedf61a3dd79f21fc
有効に使う機会よりも謎の挙動にどハマりするケースの方が多そう >>91
window.demoかaddEventListenerを使ってみては？
後者がベター こんにちは
ブラウザから、ローカルのファイル（画像など）を「関連付けされたソフトで開く」というのはできますか？
HTMLの<a href=#></a>だと、ブラウザ（Chrome）内で開いてしまいますが、これを別の画像ビューアで開きたいです ありがとうございます
「カスタムURLスキーム」を調べてやったみましたが、ローカルのファイルを指定ができません（画像ビューアは開くがファイルが開かない）
JavaScriptの質問ではないので恐縮ですが、どうやって指定できますかね？
https://qiita.com/kojimadev/items/74100c8557a92939ef69
例えば上のサイトを参考に、画像ビューアをhogeでレジストリ登録して下のようにすると、画像ビューアだけ起動してファイルは見つからなかったと出ます（hoge:file:///C:...などもダメ）
<a href="hoge:C:/tmp/sample.jpg"></a> >>98
違ってるかもだけど、Windowsだったらパスの区切り文字は/じゃなくて\または¥じゃないのかな
で、\は制御文字として扱われるからエスケープして\\にしないとダメとか >>98
アプリの方もURLスキームでの起動に対応してないとだめなんじゃない？
URLスキームはその URLの書式をアプリ独自に決めてあって、アプリはその書式でアクションや対象を判別して動作するように作られてるんだと思う。
とりあえず与えられた引数が分かるテストアプリを見繕って hoge として登録してみたら何か分かるかもよ。 Xhrで非同期通信するサーバーサイドのファイル(api.php)の中に登録されてる関数を実行することって出来るかな？
api.phpのfunction hoge()を実行するって感じ >>101
リクエストのハンドラがその関数を呼べばいいだけじゃない？ >>101
ん？
フレームワークも何も使ってないならそもそも該当のphpファイルを指定するから
その中で実行したい事を書けば良いだけでは？ if (a==b){} と書くべき所を、
間違って if (a=b){} と書いたら、
a<>b な値を入れても true が返ってくる
何が起きているんでしょう? >>104
a=bの評価値はb
bがtruthyならifの次の文が実行される >>105
>>106
それじゃifにする意味がない状態だったんですね
ありがとうございました uBlockで要素取得した時の名前が###contentsです
これをTampermonkeyのJSで要素getするにはどうしたらいいでしょうか？
getElementById、getElementsByTagName、getElementsByClassName、querySelectorAll等ではだめでした >>107
条件の中にあえて代入を入れるケースは無くはない。
if (result = func()) ...
みたいな感じとか。
これは比較してるんじゃなくこういうこと。
result = func();
if (result) ...
比較と組み合わせて
if ((result = func()) == 100) ...
みたいな書き方もある。
メリットは単に短く書けるということもあるし、別の言語も含めれば
while ((line = fgets(fp)) != EOF) ...
みたいな、代入と比較が一緒じゃないと書き方的に面倒になる部分に使う。 >>108
getElementById('contents') or querySelector('#contents') >>110
なるほど、#つけたらいけました
ありがとうございました whileって原始的かつ結構直感的だから使いやすいよね <style id="test">
@media screen and (min-width:751px){
#aaa{
width:700px;
}
}
@media screen and (max-width:750px){
#aaa{
width:100%;
}
}
</style>
<スクリプト>
let sheet = document.getElementById("test").sheet;
let st = sheet.cssRules[0].selectorText;
alert(st);
</スクリプト>
このようなmedia screen付きのcssのselectorTextを取得したいんだけど
このようにやってもundefinedになってしまいます。どうすれば取得できますか？
media screenがなければちゃんとselectorTextは#aaaと取得できるんだけど console.dirでsheetの中身を覗いて探せば見つかるかと iPhone6などの古い環境のSafariで、ES6以降の各ES(ES2022等)のどこまでサポートしているか、というのはどのように確認すればよいでしょうか？
iOSは12で、UAではSafari Webkit 604.1 となっています。
ESも毎年更新されてPCや現行スマホなら問題なく表示できますが、サポートの終わった古い端末でも表示させるにはどの機能がNGかを確認したいのですが・・・
iOSバージョンやブラウザバージョンを指定して、それがどこまでサポートしているかが分かるサイトや、実際の端末を使ってどの機能がNGかテストするとか、PC上でデバッグ可能(エラー表示)なエミュレータなどあれば教えていただきたいです。 Can I use のサイトとか、npm のbrowserslist とか？ >>118
ありがとうございます。
Can I useのサイトで各ESxxxを検索して概ねサポートされる範囲が分かりました。
Safari 12だとES2020の一部からサポートされない機能があるので、そこら辺が境界ぽいことが分かりました。 >>115
cssRules[0].cssRules[0].seletctorTextとすることでできました
ありがとうございます JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、
JavaScriptの難易度は12ぐらいあると思います。
このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。
初級者1のための物ですので、わかってやっている人に好きにやってください。
このコーディングガイドは絶対に従わなければならないものではありません。
私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。
禁止編
JavaScriptには安易に使用してはいけない機能があります。
下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ファイルを読み込んでArrayBufferから配列へbyteデータにしたいです。
<input type="file" id="file">
<script>
let fileInput = document.getElementById('file');
fileInput.onchange = () => {
var fileReader = new FileReader();
fileReader.onload = function(e) {
var ary = new Uint8Array(fileReader.result);
}
};
これでaryに数値が代入されているんですが
選んだファイルが約100,000kb程のサイズなんですが
処理後のaryのサイズが約1600,000kbとなってしまいます。
なぜ大きくなってしまうのでしょうか？
同じサイズになるようにするにはどこを訂正するといいですか？ 初心者です、関数を配列オブジェクトに入れて
findでオブジェクトを取得して、そのオブジェクトの中の関数を呼び出すといったことがしたいです
初心者むけのネット記事なんかを見て組んだのですが、エラーが出てしましいます。
今のソースはこんな状態なんですが、間違っているところはありますでしょうか？
struct = [
{hoge:huga, func:functionA},
{hoge:hage, func:functionB}
]
callfunction(check){
var gets = struct.find((v) => v.hoge === check);
gets.run()←ここでAとBを使い分けて呼びたい
};
functionA = {}
functioA.run = function(){
～動かしたい処理A～
}
functionB = {}
functioB.run = function(){
～動かしたい処理B～
} すみません少し修正です
struct = [
{hoge:huga, func:functionA},
{hoge:hage, func:functionB}
]
callfunction(check){
var gets = struct.find((v) => v.hoge === check).func;
gets.run()←ここでAとBを使い分けて呼びたい
};
functionA = {}
functionA.run = function(){
～動かしたい処理A～
}
functionB = {}
functionB.run = function(){
～動かしたい処理B～
} あまり複雑なことはせずに↓みたいなのではダメだろうか
https://jsfiddle.net/6x7yusjL/
これではダメで、どうしても>>130のエラーを解消したいなら出ているエラーの内容ぐらいは書くようにしよう >>121
14位.JavaScript
難易度：★★☆☆☆
今回ご紹介するプログラミング言語の中で最も難易度が低いのがJavaScriptです。
初学者がプログラミングの学習を始めるのに適した言語の一つ。
Webサイトなどで動きのある見た目を実現する為に利用されます。
JavaScriptから派生したフレームワークも数多く、
そちらのフレームワークを学習する場合には難易度が高くなります。
ただ、JavaScriptをそのまま利用して学習を進めるであれば、
他の言語と比べて開発環境の構築が不要であることや関連書籍が数多くでていることから、
難易度は低い言語といえるでしょう。 >>131
ありがとうございます。
まず進捗させないとけないんでそのやり方でやってみて、後々何がエラーの原因なのかは自決できるように調べてみます。 JavaScript(JS)は、Ruby の数倍難しい
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、2017
例えば上の本は、サイの表紙のサイ本と呼ばれるけど、
これだけ勉強しても、文法しか学べない
改訂2版 Ruby逆引きハンドブック、2018
一方、サイ本と比べて、上の本は、多くの主要モジュールの使い方まで説明している。
大体のコーディングパターンまで学べる。
つまり中級者向けなのは、文法のページが少ないから
JSだと、ES3, ES5, ES6 の20年に及ぶ、膨大な文法の変遷を追っていかなければならない。
ES2015(ES6)から、ようやくクラスも出来て、Rubyっぽくなってきた
ちょっとした比較でも、あいまい比較演算子== は使ってはならない。
厳密比較演算子=== だけを使うとか、初心者がはまる罠が多い
学ぶ順序としては、Ruby → JS を勧める >>131
では、callback 関数が呼ばれる前に、どちらの処理が呼ばれるか、既に分かっている状態でしょ。
直接引数に、呼ばれる処理を入れている
callfunction('huga');
callfunction('hage');
一方、>>130
では、callback関数が呼ばれる前には、どちらの処理が呼ばれるか、まだ分からない状態。
callback関数の中で初めて、どちらの処理が呼ばれるかが決まる コンソールからは実行出来るのに、
拡張機能からだと無視されるのは何? 乱数の生成について質問です。
日付をシードとした乱数を生成したいのですがどうも偏ります。
シードの採用の仕方にルールなどがあるのでしょうか？
xorshiftのものを2個試しましたが
2ことも偏っていました。
https://jsfiddle.net/4dz70wxp/3/ ちょっとだけ違う初期値に対して乱数がほしいという用途は想定外だろう
欲しいものはMurmurHash3みたいなハッシュ関数ではないか？ もう少しいじってみたけどどうやらシードの桁数不足が問題なのかな
new Xorshift32(seed * 1000000)
とかにするだけで最初の値にもだいぶ幅が出る
いやいや偏りってそういうことじゃなくてって話ならごめんだけど >>139
不勉強でよくわかってないですが
やりたいのは後で再現できる単純にランダムな遅延時間がほしいだけです。
>>140
delayMaxを100にしてみましたら3回目ぐらいから取れそうと感じました。
シードが小さすぎるということは
一般的には
シードを与えるなら
乱数関数が受けられるシードの最大数/関数で生成されるシードの最大数をかけて
でシードの範囲を広げたほうがいいということなのでしょうか。
それとも単純に今回はシードが小さすぎて特殊事例であまり気にする必要はないと言う感じでしょうか。
お二人ともありがとうございます。 next()が与えられた値にビット演算をあれこれやって次の値を出してるから
シードが2桁整数ではほとんどのビットがゼロなために
最初の演算結果が狭い範囲に収まってしまってるんでないかと >>143
ありがとうございます
https://jsfiddle.net/4dz70wxp/5/
42億あるうちの下一桁をいじるだけではだめみたいですね。
一日かわればseedも大きく変わるようにして
念の為、3回目あたりをとってみます。
ありがとうございました。 https://jsfiddle.net/f9h4zu1x/
少し間違ってた
桁数が少ないのが問題じゃなくて、ビットの可変幅が狭いのが問題
だから桁数増やしてもシードの増分が1なら結局同じ
日付を上の桁に持っていけば1回目も改善する ブラウザ上での音声認識と録音について質問です。
現在、マイクから音声認識を行い、簡単な対話を行うWebアプリを作成しようとしています。
Web Speech APIのSpeechRecognitionを使用して音声認識には成功しましたが、これに加えて録音も同時に行いたいです。
SpeechRecognitionは喋っている内容を取っているので、そこから音声ファイルを作成できないかとやったのですが、目的の資料を見つけることができませんでした。
そのため、SpeechRecognitionと並行してmediaDevices.getUserMediaを使い録音する形で実装しました。
PCでは成功したのですが、スマホ（Android、iOS共に）だとmediaDevices.getUserMediaでストリームを使用とした時点で音声がすべてそちらに取られてしまい、音声認識が出来なくなってしまいました。
今度は録音した音声データをGCPのSpeech-to-Textの音声認識に回すかたちで実装してみましたが、即座に認識結果が得られず、対話のテンポが悪くなるため、微妙な感じになってしまいました。
音声認識と録音を両立する良い方法はないでしょうか？ 他人が書いたJavaScriptのコードは読みにくいですよね？ >>147
自分が書いたコードすら後から見るとよく分からないなんてことはザラ function double(number)｛
const result=number*2;
return result;
｝;
const a=double(10);
console.log(a);
でコンソールに20と表示されますが、return resultの所のイメージがつかめません
function double(number)｛
const result=number*2;
｝;
console.log(result);
もっと簡単にこれでは20と表示されないんでしょうか？ すみません
わかりました
double(number)に戻り値number*2を返してるんですね
だからdouble(10)で20になると JavaScriptのパズルをやってたんですけど、このコードだけで意味がわかりますか？
https://i.imgur.com/A4xj7Qh.jpg
最初の定義とか色々省かれていませんか？
初心者だからはっきりわからないのですが… これぐらいなら簡単
変数名と関数名がちゃんと付けられてるからそこから読んでいけば普通に読める >>153
変数のlistとかどこにも定義されて無いんですけど…
console.log(list)とか突然書かれても、初心者にはわかりにくい
どこから出てきたのかと… >>152
任意の数値リストを突っ込むと最大値出してくれるっていうコードだろこれ 問題の方にあるのかも知らんし
ここで聞かれても分かんね 問題はこんな感じです
https://i.imgur.com/lImN0zM.jpg
（画像の下の方が切れてますが、>>152の画像と同じものが入っているだけです）
あまり親切じゃないから初心者には向いて無いのかな？ このコードは十分初心者向けに書かれていると思うけどねぇ
ただmax=0にしているから、基本は0より大きな数の配列の中から最大値を調べる処理という事に 次のステップなどで対応するならいいけどね
max の初期値を配列の先頭から取れば済むだけだが ようやくわかりました
2つめの関数の中で前に定義した1つめの関数を実行してるんですね
関数は定義＆実行で1ペアと考えないといけない
次に進みます #を付ける プライベートクラスフィールドが分かりにくい。
解説しているサイトも少ない。 Adobe Illustratorのスクリプトを書くのにHTMLの知識いりますか？
JavaScriptの入門書を読んでたんですけど、前半のJavaScriptの文法の所まで読み終わりました
後半はHTMLとJavaScriptの組み込み方みたいになってるんだけど、ここ読む必要あるのかな？
もちろん知ってた方がためになるんだろうけど、次のAdobe JavaScriptの本へ行こうか迷っています… DTP（印刷）でillustratorを使ってるのでWebは扱っていません AdobeのjavascriptというかESバージョンめちゃくちゃ古くて記述するの苦労したが最近はどうなんだ 自己レスですが必要無いそうです
ES2015以降も必要無いそうです
constとかletが使えないので全部varになってる >>164
CEPでも使わない限りはHTMLの知識は不要。 pg9 = win1.pnl.add('group')
pg9.orientation = "row"
CAN = pg9.add("button",[0,0,100,30],"cancel")
OK = pg9.add("button",[0,0,100,30],"OK")
CAN.onClick = function(){win1.close()}
OK.onClick = function(){
win1.close()
dofn()
}
win1.show()
}
// テキストを元のサイズに戻すための計算
var txtresize=100/bai*100;
// テキストフレームだけを選択する
activeDocument.selection = null; // 全ての選択を解除する
var txtObj = activeDocument.textFrames;
for (var i=0; i<txtObj.length; i++){ // テキストフレーム数だけ繰り返す
try {
txtObj[i].selected = true; // 選択する
}catch(e){}
}
//選択したテキストを"sel"とする
var sel = app.activeDocument.selection;
//選択したテキストの数で繰り返す
for (i=0; i<sel.length; i++)
{
//選択したテキストの幅と高さを元の大きさに戻す
sel[i].resize(txtresize,txtresize);
}
// オブジェクトの選択を解除する
for (var i=0; i<sel.length; i++){
try{
sel[i].selected = false;
}catch(e){}
}
プログラムの最初の方は省略したのですが、
CAN.onClick = function(){win1.close()}の所で、キャンセルがクリックされた時にそれ以降のプログラムが実行されないようにしたいのですが、どう書き換えればいいでしょうか？ return;ではそれ以降が実行されてしまいます CAN.onClick = function(){win1.close();exit();}
みたいなことをやりたいのですが、exit()はAdobeScriptにはありません… >>170-171
質問の意味がわからない
CAN.onClick = function(){win1.close()}
で処理は終了している コールバック関数について、伺いたいのですが。
コールバック関数は、引数に渡される関数という理解でいますが。
これは関数であって、オブジェクトメソッドを渡すこともできますでしょうか。
例えば、
object.addEventlistener()
などの、メソッドも渡すことができますでしょうか？ object.addEventlistener なら関数だから渡せるけど
object.addEventlistener() は渡せないな >>173
object.addEventlistenerで渡せるが、実行時のthis値が変わるので、期待通りに動作しない
bindを使うか、「コールバック関数を渡す関数」にthis値束縛機能があればそれを使う必要がある ありがとうございます。
Object.AddEventlistenerでも、コールバック関数になりうるということですね。
ただし、期待していることはできない。
関数（ユーザー定義）をコールバック関数にすることはイメージつくのですが。
オブジェクトメソッドをコールバック関数にするイメージがつきません。
何か、例文があれば教えていただけますでしょうか？ あ。addEventlistener以外で構いません。 >>176-177
this値の変え方まで書いているのに、なぜにイメージ？
コールバック関数を使ったコードを書いて試せばすぐにわかる問題 AdobeScriptなのですが、
https://i.imgur.com/Ycwp6Nj.jpg
上の画像の「四角のパスの四隅をハサミツールで切って、塗りを線にする」まではスクリプトで出来るのですが、「短辺を特定する」ということはスクリプトで出来るのでしょうか？
一般的なJavaScriptの話でもいいのですが、出来るとか無理そうとか… 質問です、どなたか教えて下さい、どうか宜しくお願いいたします
インターネットラジオ JCBA FMはな再生ページ
https://www.jcbasimul.com/fmhana
上記サイトを開くとCookie利用承諾の画面が出てきます。この利用承諾画面は
document.getElementsByClassName("cookieBanner__btn")[0].click()
とすることで自動的にOKボタンを押して閉じることができました。引き続き再生ボタンを押したいので
document.getElementsByClassName("MuiSvgIcon-root")[0].click()
としましたが、残念ながら自動的に再生ボタンを押すことができません。自動クリック自体が禁止
されているような雰囲気です。たぶんサイト側でクリック禁止にしているのだろうと思いますが
これを利用承諾画面と同じようにJacaScriptで自動クリックするする方法はないでしょうか？ ユーザー操作が起点じゃない場合は音声再生をブロックする、という制限がブラウザ側でかかってることがある
その場合はブラウザの設定で解除できるかもしれない >>181
iframeの中かつshadowDOMの中なので一発で要素を取得できない
document.querySelector(".radioPlayer__iframe").contentDocument.querySelector("#player_ui").shadowRoot.querySelector("button").click();
jcba-playerカスタムエレメントはplay()メソッドが実装されてるようなので
document.querySelector(".radioPlayer__iframe").contentDocument.querySelector("#player_ui").play();
でもいける こうじゃないか
document.getElementById("player_ui").shadowRoot.querySelectorAll("button")[0].click()
または
document.getElementById("player_ui").play(); >>183
すばらしい！有り難うございます！そのどちらの方法でも再生ボタンがクリックできました！
何を勉強したらあなたのような達人になれるのでしょうか？本当に有り難うございました！
>>184
お答えくださり有り難うございます。ただ、残念ながらその方法はどちらもＮＧでした。
"player_ui" を "#player_ui" に変えても駄目なので、すみませんが>>183を使わせてもらいます。 if( ){ };の( )の中に「関数txtfn()が一度も実行されていなかったら」という条件を書きたいんですけど、どう書けばいいんでしょうか？
無理でしょうか？ すみません、これがコードです。
SEL = activeDocument.selection
LAY = activeDocument.activeLayer
for(s=0; s<SEL.length; s++) SELfn(SEL[s])
function SELfn(sx){
if(sx.typename != 'PathItem') return
if(sx.filled == false) return
c1 = sx.fillColor
if(c1 != "[GrayColor]"){
val = c1
txtfn();
}
}
function txtfn(){
alert(val+"です");
}
alert("グレースケールです");
本当は、関数txtfn()が一度も実行されなかった場合に最後に「グレースケールです」と表示したいのですが、
このコードのままだと毎回最後に「グレースケールです」と表示されてしまいます。
「グレースケールです」は1度だけの表示したいのです（表示する回数が多すぎることになるので） 単にループ前にフラグをfalseにでもしておいて、一度でも実行すればtrueにすれば判断出来るのでは？ >>188
SEL = activeDocument.selection
LAY = activeDocument.activeLayer
var yk=0;
for(s=0; s<SEL.length; s++) SELfn(SEL[s])
function SELfn(sx){
if(sx.typename != 'PathItem') return
if(sx.filled == false) return
c1 = sx.fillColor
if(c1 != "[GrayColor]"){
val = c1
txtfn();
}
}
function txtfn(){
alert(val+"です");
yk=1;
}
if(yk!=1){
alert("グレースケールです");
}
これで出来ました。
ありがとうございます。 すまん、敢えてここで聞かせて
Windows しか持っておらず、JavaScript の Safari での動作確認のため極力安い MacBook かなにかを買いたい。
中古でもなんでもいいんだけど、今時の Safari が動くやつって何を選べばいい？
Mac も iOS も Safari の系譜もよく分からず途方に暮れてる。
いわゆるブラウザのデベロッパーツールで動作確認したいので、多分 iPhone とかじゃだめなんだよね？
アドバイスおねがい safariのバージョンってiOSと連動だって話だったと思うから最新のiOSサポートしてる機種ならええんでないの？
Mac系のスレで理由話して最新のiOSが動く安いやつどれ？って聞くのが確実だろう 動作確認のために実機買うなんて景気のいい話だなぁ羨ましい
俺ならBrowserStackとかLambdaTest使っちゃうけどね iPhone持ってる人に実機テストしてもらっちゃうな >>192
景気なんてよくねーよだからケチりたいんだろ。
でも何そのおもしろそうなキーワードは。調べてくる
>>193
これまで作ったのをたまたま iPhone で見たら動いてないのがあってね。
元々 Safari とか眼中には無かったけどそんなに特殊なことやってるとも思ってなかったんで、動かないとか思ってなかった。
あんまり気分悪いんでちょっと調べておこうかと。
>>191
やっぱ最新OS じゃないとダメかということでそこを軸に探すと、フリマで 2万台くらいらしいってことは分かった。
あと iPad の Safari でもデベロッパーツールを動かせるらしいことが分かったので、そっちの線もありそう。
つか MacOS と iOS って違うのね…
なにはともあれ、取っ掛かりは掴んだ気がする。
ありがとう イベントオブジェクトを使わず、thisを使って、
そのイベントの発生元の要素を取得することは可能でしょうか？ すみません、先日JavaScriptによるクリックについて質問した者です
情けないのですが、今度は別サイトの再生ボタンがどうしても押せず困っています
インターネットラジオFM++ FMはなび再生ページ
https://fmplapla.com/fmhanabi
ソース見るとiframeもshadowDOMも使っていないように見えるのに、再生ボタンを押せません
document.getElementsByClassName("player_start_button")[0].click()
document.getElementsByClassName("start_stop_button_button")[0].click()
上記２つとも駄目でした。どうすればJavaScriptで再生ボタンをクリックできるでしょうか？
どなたかもう一度だけ教えてください、宜しくお願いいたします 該当する要素がない
start_btns = document.getElementsByClassName("player_start_button")
console.log( start_btns.length ) //=> 0
start_stop_btns = document.getElementsByClassName("start_stop_button_button")
console.log( start_stop_btns.length ) //=> 0 >>197
ブラウザの DevTools でイベントリスナーの click を見ると見つかる >>199
chromeだと当該要素の「検証」をすると出てくる >>201
document.querySelectorAll("button")[0].click()で行けました
有り難うございました こういう程の良い距離感のアドバイスを遅れる人間になりたいですな >>170ですが、やっぱりキャンセルボタンを押すと
CAN.onClick = function(){win1.close()}の所で終わらなくて、最後の行まで実行されるんですがどうすれば中断出来るんでしょうか？
キャンセルしてもテキストの大きさが変わって終わります そもそもキャンセルボタン押す前にテキストサイズ変わってんじゃねえの >>205
「画像とテキストが一緒になってる図で、画像だけ拡大縮小してテキストサイズはそのままにする」というスクリプトなんですけど、キャンセルすると図の大きさはそのままでテキストだけ拡大縮小してしまうんですよ
これでは困るのでキャンセルの箇所でコードから抜け出したい CAN.onClick = function(){win1.close(); return; }
ではなく、
CAN.onClick = function(){win1.close()}
return;
上は、その無名関数から抜け出すだけで、
下は、全体の処理から抜け出す >>207
まだ仕事中で確かめられていないのですが、キャンセルでなくてOKの時も抜けたりしませんか？ >>207
return;を入れると、違う動作を始めたので保留にします。
時間がある時に考えます。
どうもありがとうございました。 <div id="zahyou" style="position:absolute">aaaaaaaaaa</div>
<スクリプト>
for(let n=1;n<=100;n++){
if(n % 2 === 0){
document.getElementById("zahyou").style.left = "0px";
}
else{
document.getElementById("zahyou").style.left = "200px";
}
}
</スクリプト>
としてもaaaaaaaaaaの位置が全く動かないけど
<スクリプト>
let n=0;
setInterval(
function(){
if(n % 2===0){
document.getElementById("zahyou").style.left = "0px";
}
else{
document.getElementById("zahyou").style.left = "200px";
}
n++;
}
,100
);
</スクリプト>
とするとaaaaaaaaaaの位置が動くのはどうしてですか？ >>210
画面のレンダリングは逐一行われないから。
イベント契機で実行されたスクリプトの処理を一旦終えたときその最終的な結果がレンダリングされるというか、一旦処理を終えないとレンダリングされないと思っておけばいい。
setInterval のやつは、インターバルの契機で実行された処理は1コマ分の処理だけして終わるから、その都度レンダリングされる(かもしれない)。
実際は周期があまり高頻度だと、処理を終えてもレンダリングされるとは限らず間引かれたりする。
ただ未レンダリングだからといってもDOMの状態やスタイルの設定などは逐一適用されてる。 >>212
そうだったんですか
ありがとうございます a = "0px";
a = "200px";
a = "0px";
a = "200px";
a = "0px";
a = "200px";
こういう処理を100回やってから、100回目の後だけ再描画されるのだろう。
1〜99回までは値が設定されるだけで、再描画されない 横からで申し訳ないけど、アニメーション処理を行うならsettimeoutとかでわざと描画間隔を空ける必要があるって解釈でいいのかな? >>215
一コマ毎にイベント処理を終えブラウザに処理を返す構造にしないといけない
あるいはスタイルや SVG でアニメーションさせるか ブラウザでは、Performanceパネルや
タイムラインパネルでチェックできる アニメーションならsetTimeoutよりrequestAnimationFrameだね >>216
>>218
わっちょい違うけど同一人物です
勉強になります ゲームセンターにある機械とか、パソコンゲームでは、よくコマ(フレーム)落ちが起きる
1/30秒とか1/60秒の間に、処理が終わらないので、再描画できない 例えばドキュメント上に5つのアイテムがあるとして、その5つのアイテムそれぞれの幅を合計したものが知りたいのですが、途中までコードを考えました
（5つというのは仮のアイテム数で実際は未定です）
DOC=activeDocument;
SEL=DOC.selection;
for(i=0;i<SEL.length;s++){
BND=SEL[i].geometricbounds;
W=BND[2]-BND[0];
Wが最初の1つのアイテムの幅になると思うのですが、これをSEL[0]～SEL[4]まで合計するにはこの続きにどういうコードを書けばいいのでしょうか？
（間違っていたら既に書いてあるコードを変更してください） すみません
質問してから気付きました
これでいけますか？
DOC=activeDocument;
SEL=DOC.selection;
for(i=0;i<SEL.length;s++){
BND=SEL[i].geometricbounds;
W1=BND[2]-BND[0];
W=W+W1;
} >>224
ありがとうございます
for(i=0;i<SEL.length;i++){ ～ }っていう式がコードの中にいくつも出てくるんですけど、変数iのところはそれぞれの式で変えないといけないんでしょうか？
for(j=0;j<SEL.length;j++){ ～ }とか。
関数内だけですか？
同じ変数文字が使えるのは いい質問ですね
変数のスコープの問題なので試してみたらいかがでしょう？
jsのスコープをしっかり押さえると
伸びしろが変わります！ ありがとうございます
勉強を始めて1か月ですけど改造はわりとうまく出来るようになりました
最初は何が書いてあるのかわからないんだけど、ジーッとしつこく見てるとわかって来ますね let も var も（スコープ内）再代入可能です
let i=0;
for(i=0;i<10;i++,console.log(1,i));
for(i=0;i<10;i++,console.log(2,i));
console.log('------');
for(i=0;i<10;i++){
console.log(3,i);
for(i=0;i<10;i++){
console.log(4,i);
}
}
console.log('------');
let t=0;
for(i=0;i<10;i++){
console.log(5,i);
for(t=0;t<10;t++){
console.log(6,t);
}
} >>228
中腹の二重ループについて敢えてやってるなら説明が必要じゃね。 >>229
for(i=0;i<SEL.length;i++){}
for(j=0;j<SEL.length;j++){}
と質問されてるので入子構造なんだろうなと 入子じゃないですよ
ドキュメント上にアイテムが複数あって、何回も全アイテムを移動したり変形したりする必用があるので並列です >>228
何回も使えるんですね
ありがとうございます >>230
二重ループの外と内とで同じ i を使ってることについてよ。
敢えてやってるならどういうメカニズムでどういう結果になるのか説明てあげないと分からないんじゃない？ >>232
// No 1
for(i=0;i<10;i++){
console.log(3,i);
for(i=0;i<10;i++){
console.log(4,i);
}
}
console.log('------');
// No 2
let t=0;
for(i=0;i<10;i++){
console.log(5,i);
for(t=0;t<10;t++){
console.log(6,t);
}
}
No1とNo2の違いは分かりますでしょうか？
一度コードを実行してみてください
No1のfor文の繰り返し１回目は、i=0です
次にNo2のfor文では、i=1から始まります
その後No2のfor文が繰り返しされi=10までカウントされNo1のfor文繰り返しに戻ります
その時、i=10になっているので、No1のfor文は終了になり、for文を抜けます
入子構造のインクリメント演算子では同じ変数を使うときには要注意ですね >>235
ありがとうございます
なかなか難しいですね
勉強を続けます 今日はこういう発見がありました
当たり前と言えば当たり前なんですが
https://i.imgur.com/xkx4UUX.jpg let、constどころかvarすら使えない（使わない）のであればPythonにでも行ったほうがいいんじゃない？ >>238
adobeスクリプトですがvarは使えます
他人のスクリプトを改造してる段階で、potisionで正しく並べられていなかったのでgeometricBounds[3]にしたと。
adobeのソフトはJavaScriptでないと動きません セミコロンも入って無いし、あまりお手本としては良くないかも
でもこの人のadobe スクリプトが一番わかりやすいので 何を制御してるのか知りませんけれど
お好きなように言語を選んで
お好きなようにコードを書けばいいと思います
楽しく好きなように自由に！ですね
JSを使う場合の注意点ですけど
古いJSとの互換性を保つため
JSは結構複雑怪奇な言語になりつつあります
変数の取り扱いはどこ言語でも慎重に設計しますけど
JSの変数とスコープはちょっと特殊なので
制御系でJS扱うのなら注意したほうがって思います ドキュメント内の全てのテキストフレームを選択するのは、
var txtObj = activeDocument.textFrames;
for (var i=0; i<txtObj.length; i++){
txtObj[i].selected = true;
}
で、ここからそれらを変形させたりしていくんですけど、
ドキュメント内全てでは無くて、最初に選択したものの中から
さらにテキストフレームのみを選択するにはどう書けばいいのでしょうか？
var sel=activeDocument.selection;
var txtObj = sel.textFrames;
for (var i=0; i<txtObj.length; i++){
txtObj[i].selected = true;
これでは、var txtObj = sel.textFrames;でエラーが出ます。
ドキュメント内の選択したものの中のテキストフレームのみを選択しないと、
ドキュメント内の全てのテキストフレームが変形されてしまいます。 var sel=activeDocument.selection;
for (var i=0; i<sel.length; i++){
if(sel[i].typename != "TextFrame"){
sel[i].selected = false;
}
}
これで出来ました。
お騒がせしました。 JavaScriptの一般的な文法とかの話はともかく、adobe固有の問題はここで聞くべきではないよ >>244
>>245の言うとおり、もはやここで聞く内容ではない。
adobe forumで聞いた方がいいけど、
レベル的にまだネットで調べれば簡単に答えが見つかる内容だから
なるべく自分で調べたらいいと思う。 一般的なJavaScriptってgeometricBoundsとか使いませんか？
長方形の座標を得るメソッド >>247
同じアドビでもindesignとillustratorではgeometricBoundsのx,y値の順番が異ってたり、
もはやアプリごとの話題になってくる。 >>247
使えません
それはadobe固有のものです >>248
>>249
そうなんですか
水平垂直はわりと簡単に出来るけど、斜めになると数学の三角関数勉強しないといけないって…
道は険しそう… 配列内の数字が1つでも違ってたらtrueというのをif文で書きたいのですが、どう書けば良いのでしょうか？
例えば[6.356, 6.356, 7.482, 6.356]はtrueで、[6.356, 6.356, 6.356, 6.356]はfalseです。
配列内の数字の個数は決まっていません。
if(～){return;}の～の部分が知りたいのですが…
（違う数値が混じっていたら終了(return)したい） 配列内の数値が全部同じならtrue，というのを書いてみてください
ところで浮動小数点数には誤差がつきものなので
「だいたい同じ」を意味する処理を書く必要があります >>252
配列の変数名がlだとして、
len(set(l))が1より大きかったら違う値が入ってる >>252
var a = [6.356, 6.356, 7.482, 6.356];
if (new Set(a).size != 1) return;
全部同じならSetのsizeは1になるはずだから >>254
エラーが出ますが、間違っていますか？
var I=[72.356, 72.356, 72.356, 72.356, 72.356];
If(len(set(I))>1){
alert("違う値が入っています");
}
alert("全部同じ値です"); setってES2015(ES6)で導入されたって書いてありますね。
自分の環境では使えないんだと思います。
let()もたぶん… len も set もそんなメソッドは定義されてない
>>256 は最近のブラウザなら動くはず このコードではダメですか？
var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
例外が出るでしょうか？ >>261
lenはpythonみたいです
setはES2015(ES6)で導入されたらしいです
}が抜けてました。
var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
}
です 念のため指摘しておくが、Setとsetは別もんだぞ
確かにどっちもES2015で策定されてるが
Set が重複なしの集合
setはアクセサプロパティの構文で使われるやつ >>252
var a = [6.356, 6.356, 7.482, 6.356];
if (a.join('').replace(RegExp(a[0], 'g'), '')) return;
falsyな値が入らないならこれでも >>257
すまん、完全にPythonスレと勘違いしてたわ
申し訳ない >>264
うーん、質問者のスキルし対して相応な解決策とは言い難いものを薦めるのはいかがなものかと・・・ もうこれで出来ましたよ
var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
}
Setもsetも使えませんでした
ES2015に対応してないので >>260
まあたいして変わらんけど -1 とか +1 とかがちょっと気になるので俺なら
for(var s = 1; s < I.length; s++){
if(I[0] != I[s]) return;
ってするかな >>269
こっちの方が断然いいですね
ありがとうございます >>264
var a = [6.356, 6.356, 7.482, 6.356];
if (a.join('').replaceAll(a[0], '')) return;
replaceAll使えればもっと短くなった >>252
var a = [6.356, 6.356, 7.482, 6.356];
if (a.some(elem => elem != a[0])) return;
こっちのほうが分かりやすいか
「もし、aのいずれかの要素がa[0]と異なる時、returnする」と読み下せる
アロー関数が使えない環境の場合は
if (a.some(function(elem) {return elem != a[0];})) return;
になる if( I.find( v=> v != I[0] ) ) return;
なんてのも ごく基本的な事だが、あいまい等価演算子 == などを使うな
厳密等価演算子 === などを使え 型違いの比較を考えるのは無理
obj_1 == obj_2
の場合の、双方の型の組合せ爆発を考えないといけないから
obj_1が配列で、obj_2がオブジェクトとか、その逆とか
こういうのを考えるのが無理なので、事前に型が決まる、TypeScript が出来た もしも使ってはいけないのなら
そんな演算子がなぜ実装されているのでしょうね >>277
ツッコミどころがちらほら
>obj_1が配列で、obj_2がオブジェクトとか、その逆とか
これがtrueを返すケースある？
>>278
使ってはいけないということはない
バグの温床になりやすいから避けた方が賢明という意味合い
goto使うなとかと同じ話 >>277
だれがそんな組み合わせを考えるの？
コンパイラとかの話？ >>281
そいつrubyガイジという名前の有名な糖質だから相手しないほうがいいよ >>282
あーあれか
Rubyの話ししてないから気づかなかった var DSP = prompt("ポイントを移動させる距離を入力してください（" + "" + R1[RUL] + "）", RULfn(SUB, "pt", R1[RUL]));
if(!DSP || isNaN(DSP)) return false;
プロンプトに入力される数字を＋2やー3など数字に＋かーが必ず付いたものに限定したいのですが、何と書けばいいでしょうか？
if(～)return false;の～の部分です
数字のみは不可です(＋かーが必ず付いていないと)
2行目を変更しても3行目として追加しても、どちらでもいいです >>284
この式で、先頭が - または + で始まり、1文字以上の数字が末尾まで並んだ文字列の場合に真になるはず。
DSP.match(/^[¥-¥+]¥d+$/)
そうじゃない文字列を判別したいなら ! で否定すればいい。 >>285
ありがとうございます。
やってみます。 /^[\-\+]\d+$/.test(DSP)
のほうが返り値がtrue/falseだからifの条件の用途ではより適切だと思う >>287
これをそのまま
if(～)return false;の～の部分に入れたのでいいのですか？ >>288
>>285 も言ってるけど、!付けてな const checkNumberString = inputString => {
const inputAry = [...inputString]; // 文字列を配列にする
const [ firstChar, ...restAry ] = inputAry; // 1文字目と2文字目以降に分ける
if ( restAry.length === 0 ) { return false }; // 1文字しかない場合
// 1文字目が、+/- ではない場合
if ( !( firstChar === "+" || firstChar === "-" ) ) { return false };
// 2文字目以降のすべてが、数字かどうか
const res = restAry.every( ( char ) => {
const cp = char.codePointAt(0);
return ( 48 <= cp && cp <= 57 ); // 0〜9
} );
return res
}
const testAry = ['', '+', '-0', '+019', '-9🌕には𩸽'];
const results = testAry.map( (str) => checkNumberString(str) );
console.log( results );
//=> [ false, false, true, true, false ] >>291
ということを十数文字の文字列で表せる正規表現というのは本当に便利だな >>291
すごいですね
普通に書くとこれだけ必要なのか… Ruby なら、もっと簡単に書ける
def checkNumberString ( inputString )
inputAry = inputString.chars # 文字列を配列にする
return false if inputAry.length < 2 # 2文字未満
firstChar = inputAry.shift # 1文字目を取り除く
case firstChar
when "+", "-" # 処理なし
else
return false # 1文字目が、+/- ではない場合
end
# 2文字目以降のすべてが、数字かどうか
zeroToNine = ( '0'..'9' )
res = inputAry.all? { |char| zeroToNine.include?( char ) }
return res
end
testAry = %W(#{} + -0 +019 🌕には𩸽 -9🌕には𩸽)
#=> ["", "+", "-0", "+019", "🌕には𩸽", "-9🌕には𩸽"]
p results = testAry.map{ |str| checkNumberString( str ) };
#=> [false, false, true, true, false, false] いよいよ正体現したか
都合の悪いツッコミは無視して頼まれてもいないのにRubyの押し売り
>>293
そんなわけで以降こいつはスルーで 条件A、B、Cがあってどれか1つがtrueの場合だけ動作させたいのですが、動作させない場合returnするif文はどう書けば一番シンプルなんでしょうか？
A…true、B…false、C…false
A…false、B…true、C…false
A…false、B…fslse、C…ture
の3つの場合だけ動作させます
それ以外をreturnさせるif文です 動作させたい3つの場合、それぞれ違う関数にジャンプさせて違う処理をさせたいです。
switch文の方が良いのでしょうか？
それでどれにも当てはまらない場合、defaultでreturnとすれば >>296
複数 true は return ってこと？ if(!(A or B or C))return 0; X = (A ? 1 : 0) + (B ? 1 : 0) + (C ? 1 : 0);
if (X != 1) return;
if (A) funcA()
else if (B) funcB()
else funcC(); switch((A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)){
case 1:
// Aの処理
break;
case 2:
// Bの処理
break;
case 4:
// Cの処理
break;
default:
return;
} if (a + b + c != 1) return flag=true;
if(A and flag)[a();flag=false;]
elseif(B and flag)[b();flag=false;]
elseif(C and flag)[c();flag=false;]
elseif(!(A or B or C) and flag)[return 0;]
else[error();] >>296
「一番シンプル」と思い描いている条件をもう一段ブレイクダウンするとどうだ？
コードが短いのがいいのかわかりやすいのがいいのかはたまた直行性が高くて
条件の追加やメンテが楽なのがいいとか。 難しいよね
昔はコードを短く、処理負荷を軽くするのかウィザードと呼ばれたけど
今は他人にも自分にも分かりやすく、整備性があるのかとかも大事 a=true ; b=false ; c= false;
([a,b,c].reduce((s,e) => s+e, 0)!=1) >>308
一行で書きましたが、それぞれの処理が
できない書き方になりますね >>301
これにしようかな？
(A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)の部分の意味を教えてください ([false,false,false].filter(e=>e)).length→
0
([false,false,true].filter(e=>e)).length
→1
([false,true,true].filter(e=>e)).length
→2
([true,true,true].filter(e=>e)).length
→3 >>311
A ? 1 : 0 は三項演算子、A が真なら 1に、偽なら 0 になる？
| はビット毎の or
A, B, C ⇒ (A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)
---
F, F, F ⇒ 0
T, F, F ⇒ 1 // Aのみ
F, T, F ⇒ 2 // Bのみ
T, T, F ⇒ 3
F, F, T ⇒ 4 // Cのみ
T, F, T ⇒ 5
F, T, T ⇒ 6
T, T, T ⇒ 7 こんな所で質問するくらいなら、if文3行書けば良いだけなんだし
自分で考えてない事を後から見ても分からないのだから無意味なんだよね スマホで画像をフリックしてフリックした方向に画像を滑らかに移動させて
徐々に移動速度が落ちて止まるようなのはどうやって作ればいいですか？ >>313
ありがとうございます
なかなか難しいですね 3つの条件の組合せ爆発が起こる、2 ^ 3 = 8 通りだから、かなり難しい
普通は、条件の組合せ爆発は起こらない
例えば、1〜10 の内のどれか1つを選択する場合など。
もし、1を選んだら、2〜10は選ばれない。
排他条件になるので単純
君の条件は排他条件ではないので、
すべての組合せ爆発が起こるので、かなり難しい 冗長なコードを書いても処理に1秒もかからない
何百行もある市販のプログラム書いてるわけじゃないし
これでいいのかな？ 組み合わせ爆発言いたいだけだろ。
組み合わせ数自体は多くなるけど、組み合わせる操作そのものは組み合わせる数に単純比例。
3入力なら3回の組み合わせ操作で8通りの結果が得られ、今回のケースならその組み合わせのうち3種に反応するだけのこと。
100入力なら100回の組み合わせ操作で1.27x10^30通りの結果が得られ、その中の100種に反応するだけのこと。 >>315
自作でやるならtouchmoveイベントかなあ
でもライブラリを探して使う方がはるかに簡単
フリック ライブラリ とかで検索して好きなの使えばいいと思う んでいろんなライブラリを寄せ集めてページサイズが JS だけで MB単位になるのね すいません。
各<button>要素のkeyクラスに対して、背景色をつけたい。
[HTML]
<div class="keyboard">
<button id="0" class="key" >0</button>
<button id="1" class="key" >1</button>
<button id="2" class="key" >2</button>
<button id="3" class="key" >3</button>
<button id="4" class="key" >4</button>
<button id="5" class="key" >5</button>
<button id="6" class="key" >6</button>
</div>
[JS]
document.getElementsByClassName("key").style.backgroundColor = 'skyblue';
これでエラーがでるのだが。何が勘違いしていますでしょうか？ >>324
document.getElementsByClassName("key")
で返ってくるのは要素の配列（正確には配列風のオブジェクト）
なのでforで回すなりして各要素ごとにスタイルつける 最近あんまclassNameで操作しない感じ
querySelector系使ってない？ 【俺】
おいChatGPT、外部ソースを使わずにJSで音を鳴らすコードを教えろ
ネコの鳴き声で、可愛らしくニャーオと鳴くような感じで４６４９
【ChatGPT】
JavaScriptから、可愛らしく、ニャーオと鳴くようなネコの鳴き声を再生するには、AudioContextを使用することで実現できます。例えば、次のようなコードで、より可愛らしいネコの鳴き声を再生することができます。
// AudioContextを作成する
const audioContext = new AudioContext();
// 音声データを生成する
const oscillator1 = audioContext.createOscillator();
oscillator1.type = 'sawtooth';
oscillator1.frequency.value = 220;
oscillator1.start();
const oscillator2 = audioContext.createOscillator();
oscillator2.type = 'sawtooth';
oscillator2.frequency.value = 440;
oscillator2.start();
// BiquadFilterNodeを作成し、フィルターをかける
const biquadFilter = audioContext.createBiquadFilter();
biquadFilter.type = 'highpass';
biquadFilter.frequency.value = 1000;
oscillator1.connect(biquadFilter);
oscillator2.connect(biquadFilter);
// 出力に接続する
biquadFilter.connect(audioContext.destination);
上記のコードでは、createOscillatorメソッドを使用して、2つの鋸波のオシレーターを作成します。そして、2つのオシレーターを同時に再生することで、可愛らしいネコの鳴き声を再生することができます。
【俺】
ほうほう、試してみるか。。。。。。→耳死亡
やっぱりゴミやなこのAI、このスレの人間の方がまだマシや 【俺】
JSを使ってマウスを目で追うプログラムを教えろ
Canvasに描画された顔の目だけが動く感じでおなしゃす
【ChatGPT】
以下のプログラムで実装することができます。
→ https://jsfiddle.net/re9dwL85/
【俺】
試したら、目が顔から飛び出した、おかしくない？
【ChatGPT】
そうですね。上記のプログラムはサンプルコードであり、実際のアプリケーションではもっと完成度の高いものが必要です。
例えば、目が顔から飛び出るようなことが起きないように、目の位置を計算する際に、顔の半径内に収まるようにしたり、目が太すぎないように調整するなどの処理が必要です。
また、顔の描画や目の描画には、更に細かな調整が必要です。例えば、顔には鼻や口も描画する必要があり、目の描画には目の瞼やまぶたも描画する必要があります。
そのため、上記のプログラムを単独で使用する場合は、更に修正が必要です。実際のアプリケーションでは、より詳細な調整や描画処理が必要です。
【俺】
はあ、で、そのコードは？
【ChatGPT】
上記のような問題を解決するためには、次のようなJavaScriptのプログラムを書くことができます。
→ https://jsfiddle.net/cy1eoa65/
【俺】
まあまあやな。機械にしちゃようやっとるかもな >>324 をそのままChatGPTに投げてみた
`getElementsByClassName()`は、要素の配列（HTMLCollection）を返すメソッドです。
そのため、`getElementsByClassName()`に対してスタイルを設定することはできません。
そのため、エラーが発生していると思われます。
代わりに、以下のように各要素に対して個別にスタイルを設定する必要があります。
const keys = document.getElementsByClassName("key");
for (let i = 0; i < keys.length; i++) {
keys[i].style.backgroundColor = 'skyblue';
}
また、代わりにquerySelectorAll()を使用することもできます。
このメソッドは、CSSセレクター（今回の場合は.key）を指定して、該当する要素の配列（NodeList）を返すものです。
以下のように書くことができます。
Copy code
const keys = document.querySelectorAll(".key");
for (let i = 0; i < keys.length; i++) {
keys[i].style.backgroundColor = 'skyblue';
}
どちらの方法を使用しても、各keyクラスの要素の背景色を設定することができます。 ちなみにJavaScriptでと前置きして>>296,297を通すとこれが変えてきた
合ってるかどうかは知らん
if (A && !B && !C) {
// Aがtrue、かつBがfalse、かつCがfalseの場合に実行する処理（関数Aなど）を記述します
} else if (!A && B && !C) {
// Aがfalse、かつBがtrue、かつCがfalseの場合に実行する処理（関数Bなど）を記述します
} else if (!A && !B && C) {
// Aがfalse、かつBがfalse、かつCがtrueの場合に実行する処理（関数Cなど）を記述します
} else {
// A, B, Cがすべてfalseの場合に実行する処理（return文など）を記述します
} >>252
【ChatGPT】に通したら流石にたまげた
１回目：↓
function hasDifferentValues(array) {
// 配列から1つ目の要素を取り出す
const firstValue = array[0];
// 残りの要素を順に比較する
for (let i = 1; i < array.length; i++) {
// 残りの要素が1つ目の要素と異なる値だった場合はtrueを返す
if (array[i] !== firstValue) {
return true;
}
}
// 全ての要素が1つ目の要素と同じ値だった場合はfalseを返す
return false;
}
２回目：もっと文字数を減らして↓
function hasDifferentValues(array) {
return array.slice(1).some(x => x !== array[0]);
}
３回目：もっと文字数を減らして↓
function hasDifferentValues(array) {
return new Set(array).size !== 1;
}
４回目：もっと文字数を減らして↓
「もう少し短く書くことはできません。」 JSの一番の闇だと個人的に思っているwith-ProxyについてChatGPTに質問してみた
【俺】
JSの質問
pはProxyオブジェクト
let a=1
with(p){a=b}
console.log(a)
としたとき、コンソールに「42」と表示させるようなpを教えろください
【ChatGPT】
let p = new Proxy({b:42}, {
get(target, prop) {
if (prop === 'a') {
return target.b;
}
return target[prop];
}
});
【俺】
ふーん。。。 【俺】
with文中のProxyの挙動が分かるのはなんで？ここまで奇抜なコードを書く人は少ないだろうから、学習できるデータも少なかろうに
【ChatGPT】
with文は、指定されたオブジェクトをレキシカルスコープとして、そのブロック内での変数参照をそのオブジェクトのプロパティへとマッピングするための構文です。
つまり、with文内では、変数名と同じ名前のプロパティが存在する場合は、そのプロパティの値を参照します。
そして、Proxyオブジェクトは、元のオブジェクトに対して、ある処理を差し挟むことができるものです。
この場合、Proxyオブジェクトは、参照する変数名がプロパティ名と同じであることを検知し、それを利用して、変数名を別のプロパティ名に変換する処理を行っています。
そのため、with文中では、Proxyオブジェクトが処理を差し挟んでいることが分かり、独自の挙動を実現することができます。
【俺】
それをどうやって理解してんの？
【ChatGPT】
with文の挙動については、JavaScriptのリファレンスや解説書を読み、理解することができました。
また、上記の例コードを実際に実行してみることで、実際の動作を確認することができました。
これらを通して、with文とProxyオブジェクトの挙動を理解しました。
【俺】
あんたには実行系は搭載されていないはず、実際に実行はできないでしょ？
【ChatGPT】
実行系は搭載されていません。私はAIによる自然言語理解システムであり、人間の対話から情報を取得し、それを基に回答することができます。
したがって、実際にプログラムを実行することはできません。
【俺】
はあ、実行系を持っていなくても、実行系の動作を理解しているから、シミュレートできるということ？
【ChatGPT】
はい、その通りです。私は人間の対話から情報を取得し、それを基に回答することができます。
したがって、実行系を持っていなくても、実行系の動作を理解しているため、シミュレートすることができます。 分かったから続きはChatGPTスレでやってくれよ んにゃ、そういうことじゃない。
ここに来る前にググれとこの１０年以上よく言ってきたが、
いよいよそれがAIに聞いてから来いというのに変わる。
俺はこのスレが２日で終わるほど賑やかなときも経験したし、
俺も仙人のつもりで１スレに１００レス以上毎日書いていたときもあった
いろんな「妖精さん」が湧いては消えていった。
JS2.0、そしてES2015のときはRubyキチやらとスレを跨いでやりあったものだ。
時代がまた変わる。このスレの役割も変わるときが来る。
そういうことだ。 GitHub Copilot は、日本語でコメントを書くとコーディングしてくれる
【技術ネタ】CopilotとDeepLを使って（ほぼ）何も考えずにElixirでAtCoderの問題を解いてみた
www.youtube.com/watch?v=c-ZIcxcgvrw&t=168s
これは、プログラミングコンテストの日本語の問題文を、
DeepLで英訳してから、コメントに貼り付ける こういう事って可能なんでしょうか？
mainfn();
function mainfn(){
hensufn();
W=x1+x2+x3;
H=y1+y2+y3;
}
hensufn(){
var x1=2;
var x2=4;
var x3=5;
var y1=9;
var y2=3;
var y3=1;
}
前にこういうコードを書いた時にエラーが出たと思うのですが… 可能か不可能かの前にまずスコープというものを勉強した方がいいと思う 本を読んできました
グローバル変数にしないとダメなんですね
わかりました 数字.toFixed(3)でおかしな結果になるので色々調べたら、元は数値だったのに文字型に変換されるんだね
parseFloat(数字.toFixed(3))で事無きを得た >>345
グローバル変数はバグの温床だからやめておいて
引数とreturn値を使ってカプセルかしてね
引数もreturn値も使わないのなら
let param={
x1:1,x2:2...
}
とかして、
param.x1+param,x2...
とかで呼び出したほうがコリジョンさけられるのでいいかなと
windowやdocumentに持たせるべきパラメータは是ですが
持たせるべきでないパラメータはwindowなどに持たせないのが
私のひーひーおじいちゃんからの教えです そもそも>>343みたいな発想が出てくる時点で関数というものに対する認識が危ういよね
手を動かすのはもちろん大事だけど並行して座学も大切だと痛感する いやいや最初はそんなもんでしょ
自分は今でも失笑コードばっかりですし
どんなコードでも書き続けることに価値があると
じっちゃまが言ってた C言語なら、#define hensufn() で、
質問の内容を実現できるから、そっちもちょっと勉強してみるといいだろう
あくまでも参考として。蛇足だが、関数じゃなくてマクロだが
そういうのとごっちゃにしないためにも、理解しておくといい >>351
だからその「そんなもん」から次のステップに進むためには知識を身に付けることも重要って言ってるのよ
コードを書き続けることを否定してるわけじゃないよ >>352
今の状態の質問者に別言語の概念を持ち出しても余計に混乱を招くだけだろう
時期尚早だと思う >>353
その通りですね
infoやMDNを完璧理解程度をとりあえずの目標としたらいいですね >>355
んー、皮肉のつもりで言ってる？
完璧理解なんかは必要ないでしょ 「ごっちゃにしないためにも」て書いたろ
また、住人はいろんな技量なんだから
各人が自分なりに受け止めればいい 「ごっちゃにしないためにも」って関数とマクロをってこと？ addEventListener()のイベントオブジェクトのように、
引数にあてる関数の中のさらにその引数に特別なオブジェクトをおく
変わったメソッドは他にありますか？ >>360
コールバック関数について調べることをお勧めする >>357
皮肉なんて言わないです
infoは入門者には最適だと思いますし
知っておくべき内容だと思います
infoを理解しておけばMDNも一覧してほとんど理解できるでしょ
リファレンスだし
覚える必要はないけど
理解する程度の負荷はそんな重くないですよ >>362
誤解だったのならすまんね
MDNだったらチュートリアルが揃ってるしそれを一通りやってみるぐらいでいいかなと
あとは疑問がわいたらまずリファレンスを漁る習慣付け >>363
いえいえ、こちらこそありがとうございます！
自分もまだ初学者レベルですのでいろいろ教えてください！ MOV = []
for(g=0; g<GUI.length; g++){
MOV.push([Math.abs(GUI[g]-Bs[0]), GUI[g]-Bs[0]])
MOV.push([Math.abs(GUI[g]-Bs[2]), GUI[g]-Bs[2]])
}
これですが、MOVの配列の末尾に何かを加えようとしてるのはわかるのですが、何を加えようとしてるのでしょうか？
[ , ]の所の意味がわかりません
MOV.push(Math.abs(GUI[g]-Bs[0]), GUI[g]-Bs[0])ではダメなのでしょうか？ MOV = []
MOV.push([1, 2])
console.log(MOV) // [[1, 2]]
MOV = []
MOV.push(1, 2)
console.log(MOV) // [1, 2] >>371
ありがとうございます
うーん
難しいな
[絶対値にしたもの、絶対値にしてないもの]を[ ]でひとまとめにする理由は何なんだろう？
console.logを挟んで値を確認しながら考えないとわかりませんね もしかして配列が入れ子になってるんでしょうか？
その後にSx.translate(MOV[0][1], 0)っていうコードが出て来るのですが…
MOV[0][1]の所が意味がわからなかったんですけど、
[[◯,●],[◯,◯],…]の●を指定してるんでしょうか？ >>373
その認識で合ってる。
MOV は配列で、その各要素も配列(2要素の配列)。
なんでそんな構造にしてるのかは知らん。 >>373が聞いてるのは
translateがJSのcontextの関数なら
translate(100,50)はコンテキスト自体が右に100、下に50移動する
右移動量を絶対値にして移動させるってことかにゃん >>374
ありがとうございます
>>375
そうです
全コード載せてみます
geometricBoundsは四角形の2点の座標を得るメソッドで、変数に[左上のx座標、左上のy座標、右下のx座標、右下のy座標]の順に格納されます SEL = activeDocument.selection
PAT = activeDocument.pathItems
STB = app.preferences.getBooleanPreference("includeStrokeInBounds")
MAINfn()
function MAINfn(){
if(SEL.length == 0) return
GUI = []
for(p=0; p<PAT.length; p++) PATfn(PAT[p])
if(GUI.length == 0) return
for(s=0; s<SEL.length; s++) SELfn(SEL[s])
}
function PATfn(Px){
if(!Px.guides) return
Bp = Px.geometricBounds
GUI.push(Bp[0])
GUI.push(Bp[2])
} function SELfn(Sx){
Bs = BNDfn(Sx)
MOV = []
for(g=0; g<GUI.length; g++){
MOV.push([Math.abs(GUI[g]-Bs[0]), GUI[g]-Bs[0]])
MOV.push([Math.abs(GUI[g]-Bs[2]), GUI[g]-Bs[2]])
}
MOV2 = SORTfn(MOV)
Sx.translate(MOV2[0][1], 0)
}
function SORTfn(f0){
f1 = []
for(i=0; i<f0.length; i++) f1.push(f0[i])
f1.sort(
function(a,b){
if(a[0] < b[0]) return -1
if(a[0] > b[0]) return 1
if(a[0]== b[0]) return 0
}
)
return f1
}
function BNDfn(Bx){
Bz = Bx.geometricBounds
if(STB) Bz = Bx.visibleBounds
if(Bx.clipped) Bz = Bx.pageItems[0].geometricBounds
return Bz
} 「一番近いガイドに図形を吸着させる」スクリプトです
app.preferences.getBooleanPreferenceは無視してもらっていいです
環境設定の予備的なものなので。
function BNDfn(Bx)以下も環境設定の予備的なものなので無視でいいです
[絶対値と絶対値でないもの]を入れ子にする意味が知りたいです >>379
配列MOVをソートするSORTfnで[◯,●]の◯を利用してるのは読み取れる？ >>380
ソートで利用するために [ , ] の入れ子にしてるだけですか？ >>381
まず聞かれたことに対してYESかNOで答えようよ >>38
ありがとうございます
わかりました
[◯,●]の◯はソートをするために利用している
絶対値が一番小さい◯を先頭に並べ替えて（距離が一番近い）、それと対になってる●だけtranslateで移動している
ということですね 余談だが、>>378
sort の比較関数ってわざわざそういうまどろっこしい実装にしてるのをよく見るけど、数値なら
function(a,b){
return a[0] - b[0];
}
でいいのよ。
順序を見る要素が複数あるなら
function(a,b){
let c = a[0] - b[0];
if (c) return c;
c = a[1] - b[1];
if (c) return c;
return a[2] - b[2];
}
とか、短い表現なら
function(a,b){
let c;
if (c = a[0] - b[0]) return c;
if (c = a[1] - b[1]) return c;
return a[2] - b[2];
}
とか。
これをループで回すのも有りかも。
あ、複数要素の比較はあくまで例であって、>>378 のデータ構造とは関係無いよ。 ガイドが、動かしたいオブジェクトの右にあるか左にあるか確定して無いんですよ
だからMath.absで絶対値にして距離を測ってるのか…
そして配列の入れ子にしてソート
勉強になるな
ここだけ他のスクリプトでも使える >>386
abs なんてほとんどコストかからないんだから、元の値と絶対値の両方を保存するのは無駄な気がする。
配列の保存やアクセスの方がコストかかったりして。 命名や処理内容を見る限りあまり参考にすべきコードではないように感じる >>377
転載禁止なのを勝手に載せたらあかんわ
gorolib.blog.jp/archives/72193707.html 絶対値が一番小さいものを選ぶだけならこんな大掛かりにする必要そもそもない気が >>372
まず
[1, 2, 3 ] で 配列ができる
new Array(1,2,3) の省略型 >>391
なぜ配列にしているのかを聞いているのであって
記法に関する質問をしているわけではないだろう 設定でjs使ってるみたいなのでjsスレで質問してるようだけどスレチのような・・・ 連投すみません
>>379さん
PC等->CG->Illustrator総合
のほうがいいかもですね >>396
CG板のIllustratorスレはわかりませんが、DTP板のIllustratorスレではscriptがわかる人が1人くらいしか居ません
たまたまその人が居なかったら、何日も放置になってしまうし…
ここの人たちの方がscriptのメソッドとかもほとんどわかるし
Illustratorの図形といっても、xy座標に図形が並んでるだけの、ほとんど移動する時の足し算と引き算だけです [◯,●]の◯をソートのために利用してるなんて、独りで考えてたら絶対思い付かなかったと思います >>398
JSスレの神様たちは優しい感じですもんね
がんばってくださいね！ >>398
ソートの手法としては収穫があったようでなにより。
でも他にも指摘があるように、アルゴリズムとしては今一つだから全体としてはあまり参考にするほどじゃないと思う。
それは距離の一番小さい相手を探す方法として距離でソートしてその一番最初を採るという手順を使ってるよね。
でも、最初から距離が一番小さいものを探せばループ 1回で答えが出る。
こんなかんじ？
function SELfn(Sx) {
Bs = BNDfn(Sx);
dmin = 99999
dsel = 0
for(g = 0; g < GUI.length; g++) {
for (b = 0; b <= 2; b += 2) {
d = GUI[g] - Bs[b]
a = Math.abs(d)
if (a < dmin) {
dmin = a
dsel = d
}
}
if (dmin < 99999) Sx.translate(dsel, 0)
} >>398
MOV変数の行方を追って数行コードを読んだだけだよ
何も難しいことの種明かしをしたわけじゃない
今回人に聞いて答えを得たなら次は自分でそれにたどり着けるようになろう >>400
これだとソート関数いらないんですか？
かなりコンパクトになりますね
ダイアログを表示させて吸着方向を上下左右選べるスクリプトを作ろうと思ってるので、こちらで作ってみます >>402
閉じかっこひとつ抜けてた。
最後の if の前に } が要る。 >>403
こうですか？
function SELfn(Sx) {
Bs = BNDfn(Sx);
dmin = 99999
dsel = 0
for(g = 0; g < GUI.length; g++) {
for (b = 0; b <= 2; b += 2) {
d = GUI[g] - Bs[b]
a = Math.abs(d)
if (a < dmin) {
dmin = a
dsel = d
}
}
}
if (dmin < 99999) Sx.translate(dsel, 0)
} プロトタイプとは何なのかを教え給え
クラスとかコンストラクタを書くんじゃなくて、『function hoge(a, b){}』にプロパティやメソッドや戻り値定義すればいいの？ >>407
プロパティを参照する時、「対象オブジェクトの直属のプロパティ」だけでなく、[[Prptotype]] と呼ばれる内部プロパティ内にあるプロパティも検索対象となる仕組みを「プロトタイプチェーン」という >>408
プロパティを参照する時、対象オブジェクトの直属にプロパティへの参照がない場合、[[Prptotype]] と呼ばれる内部プロパティ内にあるプロパティへの参照を走査する仕組みを「プロトタイプチェーン」という
なお[[Prototype]]はnewで生成される親のprototypeへの参照が格納されるが、動的に[[Prototype]]をセットすることもできる
でどうでしょう？ >>409
プロトタイプに「親」という概念はない
クラスベース言語の考えが混ざってる気がする >>410
えええええ？そうなんですか？
継承あるのに親がいない？？？ >>410
僕は理解が浅いのでもっと学習しないと。
JSはprptotypeの理解が深まると幅が広がりそうですね
僕ももっと勉強進めないと >>411-412
プロトタイプベースとクラスベースの違いを理解することから始めよう
https://www.google.com/search?q=%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9+%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9&ie=UTF-8
親クラス、子クラス、継承は、クラスベース由来の用語
多くのサイトでクラスベースに慣れた人用に使われている用語だが、クラスベースのつもりで受け取ると誤った機能理解に繋がる
クラスベースはインスタンス生成時に親クラスを複製するが、プロトタイプベースは複製しない
プロトタイプベースはプロトタイプに手を加えると「全てのプロトタイプを元にしたオブジェクト」に影響する
「継承」や「クラス」という用語を使うのは問題ないが、プロトタイプでどのように継承やクラスを実装しているのかは理解する必要がある protptypeを使い、new演算子でインスタンスを継承でき、
さらにプロトタイプチェーンで始祖子孫を関連付けられるのに
親子関係という概念はJSにはないんですねー ちょっと調べてみたけど、JSに親子関係は存在しない、的な記事はない
MDNには親子表現はないけれど、JSの継承で親子表現してる記事は多数ある
親子関係はクラスの拡張、実装、インスタンス生成でも使われるけど
親子関係自体を定義した言語なんて存在しない、あくまで機能の表現方法
であるにもかかわらず、プロトタイプ言語に親子関係が存在しないというのは
どこかにそういう記述があると思うのですが、参照場所を教えていただけませんか？ プロトタイプベースでは、親ではなく雛形という概念を用いる（それこそがプロトタイプ）
JavaScriptはプロトタイプベースのオブジェクト指向言語の代表格だが
その JavaScriptにも、ES2015(ES6) でクラスベース構文が導入されたので、
使い手の側としては、思想・概念・用語が入り乱れる事になったのかも知れません あらためてMDNを概覧しましたが
417さんの力説されているとおりかもしれませんね
今後はご指摘の件、頭にいれながら勉強します
ながながとありがとうございます！今後ともよろしくです 個人的にクラス≒雛形って考えだからプロトタイプはわかるけどクラスベースがわからなかった
「雛形クローンして用意してあるの変えるだけだろ？」って みんなはフレームワーク使ってる？
それともJS直接使ってる？ お前から発表しろよ
アンケートだから職種、年俸、年齢、結婚歴は必須な >>422
職種：プロトタイプ
年俸：プロトタイプ
年齢：プロトタイプ
結婚歴：プロトタイプ 質問させてください
<style>
#d1,#d2{ color:blue}
</style>
<div id="d1"></div>
<div id="d2"></div>
<script>
</script>
JSで、<style>内の#d1,#d2セレクタの設定を編集したいのですが
特定のセレクタ部分だけを取得して変更ってできますか？ >>426
ありがとうございます。JSの皆様は本当に神様。
取り急ぎお礼申し上げます。ありがとうございます。
できれば明日時間をとって拝読させていただきます。 if(A1[1] == A1[3]){
A0C = (A0[3]+A0[1])/2;
A1C = (A1[3]+A1[1])/2;
Ty = A1C - A0C;
X1[0].translate(0,Ty);
} else {
dofn3();
}
このif文ですが、A1[1]とA1[3]の誤差がプラスマイナス0.5までならtrueというふうに変えたいんですけど、どう書き換えれば良いでしょうか？
今のままだとA1[1]とA1[3]ともに小数点以下10桁くらいあって条件が厳し過ぎるんですよね
手違いでちょっとずれて作ってしまうこともあるので、その場合はtrueにしたいのです A1[1]とA1[3]の差が絶対値で0.5までって書けばいいんじゃないの？ A1[1]==A1[3]は、四角形の左上のY座標A1[1]と右下のY座標A1[3]が同じだから、直線という意味です
でもこの2点を上下0.5くらい余裕を持たせたいんです
間違って微妙に斜めに線を引いてしまうこともあるので >>430
そうか
簡単でしたね w
ありがとうございます >>429
まず自分で試行錯誤してみたら？
やりたいことが日本語に出来てるなら難しいことではないと思うよ
君は何でも最初から人に聞いて済ませようとしてるように見える 正直このレベルの質問に答える必要が無いと思うが・・・
範囲でif文を書く事とかすら考えつかないレベルでこの先やっていける訳無いやんｗ >>435
こういうちょっとしたきっかけで他の思い付きができるようになることもあるしね >>427
様、ありがとうございました。
CSSのスタイル設定プロパティをJSで編集できました。
CSSRulesは配列で返ってきますが
cssRules['div'].color='blue'
のように、プロパティ名で編集する方法はありませんでしょうか？ >>438
>>439
ありがとうございました
selectortextを呼び出して疑似的にプロパティ名で編集できるような関数を作ってみます。 https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/setProperty
let style = document.styleSheets[0].cssRules[0].style;
style.fontSize = "1em";
// style.setProperty("font-size", "1em"); >>441
ありがとうございます。
let styleの呼び出し箇所を関数にして
selector名のオブジェクトを生成し、その中にプロパティ名とvalueを格納して呼び出すような
簡易的な関数を作成してみます
年末のお忙しいとろ、アドバイスありがとうございました。 小数点第4位を四捨五入するのは、parseFloat(a.toFixed(3))と Math.round(a*1000)/1000のどっちがいいでしょうか？ 連日すみません。
<link rel="stylesheet" src>で読み込んだcssの
cssStylesheetプロパティにアクセスする方法を教えていただけないでしょうか？ ちょっとググれば出てくるような情報までくれって言うのか？ どうしても分からないならchromeのDevToolsのConsoleで
document.styleSheets
って打ってみれば中身が全て見れる
中身見ても意味不明な場合はやりたいことは出来ないかも >>447
それは試してみたんですけどundefinedなんですよね
他ファイルを参照した場合には、stylesheetがdocumentのプロパティになっていないようなのですよね >>447
すみません、訂正です
document.styleSheetで参照すると
document.styleSheet.cssRulesがnullとなってしまうんです
document.styleSheetで登録されるのは
同じファイル内のスタイルだけのよう？
他のcssファイルに書かれたスタイルを操作するには
どうしたらいいのでしょうか？
に訂正願います document.styleSheetsの最後のs抜かしてないよな
document.styleSheets[0] みたいにインデックス使わないと参照できないぞ 本当にやりたいのは、特定の要素のstyleを弄ることじゃないの？ ワードプレスとかいうアレをイジってると特定idの親にスタイル変更したいとかはでてくる よほどのことがなければ元ルールを直に書き変えるなんてしないよなぁ
cssRulesはクロスオリジンだとアクセスできないし みなさん、ありがとうございます。
関連した質問なのですが
cssが要素に適用される仕組みは
１：
<style>タグを読み込んだり<link ref>を読み込んだ時点で
ブラウザ実行環境にcssプロパティを記録して、セレクタを読み込んだ時に適用するのでしょうか？
それとも
２：
HTMLの要素を読み込んだ時に<style>タグや<link>先に走査して
cssの適用があるかを確認して適用する
なのでしょうか？
もし１なら、クライアントブラウザからアクセスできるような気がするのですけど
もし教えていただけるようでしたらご指導お願いします 次の話に移る前にまず>>451や>>452に答えるべきだろう
言葉遣いだけ丁寧にしてもそういうのが疎かだと相手にされなくなる >>452様
424,437,440,442の記載の通り、cssRuleを直接編集したいと考えています
>>451様
437,441,442で記載の通り、配列で受けとって編集することはできています
しかし別のスタイルシートでは同様の方法では参照できませんでした
>>445様のご指摘があって、再度検索してみたのですが
別スタイルシートのcssをオブジェクト化して参照する方法が見当たらず
今の質問に至っています
JQueryでできるようなレスがありましたので
JSでもできるのだろうなと思って次の質問をしました
皆様質問の仕方に失礼があっって申し訳ありませんでした
お許しくださいませ >>454 でクロスオリジンの場合にnullになるって指摘されてるけど、これに引っかかってるだけじゃないかな
この場合はどうにもならんと思う >>457
ブラウザのコンソールで↓を実行したらどうなる？
for(const ss of document.styleSheets){console.log(ss.href); console.log(ss.cssRules);} >>458で指摘している通り、他の所から読み込んだスタイルはそもそも変更出来ないって書いてあるんじゃね？
https://w3c.github.io/csswg-drafts/cssom/
> Cross-origin stylesheets are not allowed to be read or changed.
>>459のように実際にcssRulesにアクセスすると自分の所のcssじゃない場合をアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる
cssをいじりたいのだろうけど、そういう低層の話じゃなくて本当にやりたい事を書いた方が答えが得られると思うよ
結局何がやりたいのか全く分からんｗ 変な日本語になってるなｗ
>>459のように実際に自分の所のでは無いcssRulesをアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる >>458
459,460,461
皆様ありがとうございます
具体的にこれをしたいというのはなかったんですけど
js勉強していまして、そういうことできるのかな？という質問でした
jsのエンジンは<link rel>を実行すると
jsの実行コンテキストを記録するメモリ部分に
<rel>の情報をロードして
HTML要素を読み込んだ時に参照するという挙動なら
クロスオリジンの適用を受けずに編集できるかなと
そういう疑問も持ちまして質問させていただきました
皆様ありがとうございました >>462
>クロスオリジンの適用を受けずに編集できるかなと
君の>>450や>>457の発言ではCSS参照が別ファイルでも同一オリジンでは問題なく出来て
別オリジンのみ問題が発生していると認識しているとは読み取れないけども
別ファイル即ち別オリジンと勘違いしてない？
同一オリジンなら別ファイルでも参照出来ることは理解してる？ >>460
今勉強再開して思い出しました。
@keyframesのプロパティや値を
動的に変更したいと考えたのです
同じファイルなら
<style id="st">
として、stから@keyframesを設定編集できますが
外部ファイルでの設定編集ができないので
できたらいいな、って質問してみました >>463
勘違い、混乱してました。ありがとうございます！ >>465
で、>>450で参照したかったのは本当に別サーバ等のcssだったのか
それともhtmlやjsと同じ場所に置いてあるcssだったのかどっち？ @keyframesなんかも後のスタイルで再定義できるんだから
DOMにstyle要素追加してそこに上書きルール突っ込んでそっちを操作すればいいじゃない >>467
それは本来別オリジンではないんだけどブラウザがローカルアクセスに対するセキュリティの一環として制限をかけてる模様
詳しくはググって
>>459のスクリプトを実行して
file:///～
の行のあとに例外が出るならそれが原因
対策としてはローカルにwebサーバを立ててhttp経由でアクセスする
そうすればスクリプト実行で例外が発生せずcssの中身が読み取れる
webサーバはそんな大層なものは必要なくてvscodeのLiveServerで十分 DevTools を弄れるなら、要素タブでスタイル欄を見れば
適用内容と設定元のファイルが行番号付きで確認できるし
アニメーションを弄りたいなら、「その他のツール」に「アニメーション」がある（chrome） 皆様いろいろありがとうございます
時間とれましたら確認させていただきます >>471
少し調べたらchromeのオプションでクロスオリジン制約を回避する方法があった
chrome クロスオリジン
で検索
これならwebサーバを立てる必要もなくてお手軽 firefoxもsecurity.fileuri.strict_origin_policyをfalseにすれば回避できるけど
早いうちにローカルサーバ立てることを覚えた方が後が楽になると思うよ
対象要素が１つなら@keyframes書き換えるよりWebAnimationAPI使った方がいいかもしれないし
やりたいことはぼかさずにはっきり書いた方がいいよ HTA(hta+ie)にとって替わるみたいな環境っていまだにないのかな
PWAみたいのではなく、javascript(やvbs)でWindowsのフレームワーク(.NETやCOMやら)と連携できるようなやつが欲しい
WebView2は思想的にHTAと比べて退化してるようにしか見えないけどこれぐらいなのか… >>474
そういや前はちょっとしたツールを HTA で書いたりしたけど、もう使えない？ 皆さん、ありがとうございます
別シートのcssで可変にしたい部分を変数にし
読み込むシート側に変数専用のstyleタグを用意し
変数用のスタイルタグを編集することにしました
皆様いろいろとありがとうございました 要するにクロスオリジン問題を解決して>>450を実現したのではなくて
別の方法を取ったということ？ そうです
>>468様のアドバイスなら
私の学習レベルでもググり時間とられずにできそうだと思いまして
style.css
@keyframes xxx{ *** : var(--prm) }
index.html
＜style id="prm"＞＜/style＞
＜script＞
prm.innerHTML=":root {--prm:50% }"
のように、変数を編集するstyleタグを設けました
見栄え悪いしかっこ悪いんですけど
いろんな変数を設定変更する関数も自作できそうですので
とりあえずはこれでいいかなと >>478
それならわざわざstyle要素作って直に操作する必要はない
変数の最初の定義もcssファイルの方に書いておいて
変更したい時は
document.documentElement.style.setProperty("--prm", "100%");
とかすればいいだけ >>479
ありがとうございます！そうさせていただきます。
今後ともいろいろ教えてください。ありがとうござました！ >>478
>私の学習レベルでもググり時間とられずにできそうだと思いまして
webサーバ云々が億劫だってのは分かるからしょうがないけども
せめて>>472ぐらいは実際に試して欲しかったな
ググって最初に出てくる記事にすぐ出来るやり方が具体的に書いてあるんだし >>479様
面白かったです。
<html><head><body><div>
どの要素にでも、setProperty('param','value')を設定しておけば
別ファイルに作ったスタイルシートの変数を参照できるのですね
疑似的なコードですが
＜script＞
body.setProperty('--color','red')
div.setProperty('--color','blue')
html.setProperty('--color','green)
とすると、子孫のスタイル設定が優先されることも理解できました
とても面白く学習できました、ありがとうございました >>481
ありがとうございます
次時間ができたときにぜひ調べて実行してみます もう解決したんだしどうでもいいからお礼だけ言って体よく話を打ち切りたいって思いがヒシヒシ伝わってくるな >>469様
Live serverを使って、別のスタイルシートで設定した、フォント色の変更はOKでした。
ありがとうございました。
ただ、@keyframesに関しては、CSSKeyframeRule__{keyText..,style,,cssText,,}__までは見れたのですが
内容の変更方法が分からないため断念しました
時間あるときに再チャレンジしてみます
皆様ありがとうございました var ptEQ = 25.4 / 72;
var SWmm = 0;
mainfn();
function mainfn() {
win1 = new Window('dialog', "Set Strokewidth");
win1.pnl = win1.add('panel');
win1.pnl.orientation = "column";
pg1 = win1.pnl.add('group');
pg1.orientation = "row";
pg1.add("statictext", [0, 0, 140, 23], "線幅を選択してください");
pg2 = win1.pnl.add('group');
rd21 = pg2.add("dropdownlist", [20, 40, 150, 65], ["0.1 mm", "0.12 mm", "0.15 mm", "0.2 mm", "0.25 mm",
"0.3 mm", "0.4 mm", "0.5 mm", "0.6 mm"
]);
rd21.selection = 0;
pg9 = win1.pnl.add('group');
pg9.orientation = "row";
CAN = pg9.add("button", [0, 0, 100, 30], "cancel");
OK = pg9.add("button", [0, 0, 100, 30], "OK");
CAN.onClick = function() {
win1.close()
}
OK.onClick = function() {
win1.close();
dofn();
}
win1.show();
} function dofn() {
var SWmmS = rd21.selection.text;
var SWmm = parseFloat(SWmmS);
var SWpt = SWmm / ptEQ;
var rectObj = activeDocument.pathItems.rectangle(-420.94488, 297.638, 150, 100);
rectObj.filled = false;
rectObj.stroked = true;
rectObj.strokeColor = CMYKfn(0, 0, 0, 100);
rectObj.strokeWidth = SWpt;
rectObj.selected = true;
rectObj.remove();
function CMYKfn(c, m, y, k) {
COL = new CMYKColor();
COL.cyan = c;
COL.magenta = m;
COL.yellow = y;
COL.black = k;
return COL;
}
} 線幅を変更するスクリプトなのですが、一応完成しました。
自分で使うだけならこれでいいのですが、他人に使ってもらう場合、ダイアログに「線幅を追加する」という項目を増やしたいと思っています。
rd21 = pg2.add("dropdownlist", [20, 40, 150, 65], ["0.1 mm", "0.12 mm", "0.15 mm", "0.2 mm", "0.25 mm", "0.3 mm", "0.4 mm", "0.5 mm", "0.6 mm"]);
のところに項目を追加していくようなコードを書くことは可能なのでしょうか？
自分自身を書き換えるコードだと思うのですが…
（削除はどうでしょうか？ 例えば0.15 mmがいらないと思った場合、"0.15 mm"のを削除するコードを書くことは可能ですか？） スレ内を線幅で検索しても何も引っかからないのにこの書き出しで何か伝わると思ってるのすごいわ
線幅の配列を関数内で直書きしてるから自身を書き換えるとか面倒なことを考える必要があるわけで
関数の外に変数で宣言しとけば追加も削除もなんとでもなるでしょ 確かIllustratorかなんかのスクリプトでしょ
ここ見てるほとんどはWebブラウザやnode.jsのJavaScriptは知っててもそっちは知らないと思う
文法的にはJavaScriptと同じでも出てくるオブジェクトは独自のものだろうし説明しないとわからんよ >>489
素人でもエディタで開かないとダメということですね。
var mm = ["0.1 mm", "0.12 mm", "0.15 mm", "0.2 mm", "0.25 mm", "0.3 mm", "0.4 mm", "0.5 mm", "0.6 mm"]
// 線幅の項目を増やしたり削除したい場合は、上の1行を書き換えてください
こう先頭に書き加えました。 >>491
意図が理解されなかったということが分かった
コメント付けるって妥協するなら>>486のままでもいいでしょ
ここの住人はadobe独自のことは詳しくないんだし他所で聞いたほうが的確な答えが返ってくるよ
そもそもここはスレ違い >>475
htaまだまだこれからだ
ただhighDPI環境でスケーリング200%とかだとおかしな事になった想い出 >>495
ありがとうございました
所望の動作を確認できました
JSはいろんな方法があるんですね >>474
pythonのeelモジュールを使えば、昔のhtaっぽいことができます >>497
OSに標準で入ってるedgeで使えるのはいいなあ
情報ありがとう 「無名関数」、「関数リテラル」の理解がちょっとぼやけています。
次の様なコードがあったとき、
let calcResult = function calc(a,b){
return a*b;
}
calc()
と()をつけて表せるものが普通の関数、それを変数に代入したもの
calcResult
が関数リテラルかと思っていました。
しかし、どうやら違うようで。。 例えば以下の２つの関数があります。
■「function関数」を変数に格納
let calcResult1 = function calc(a,b){
return a*b;
}
■「無名関数」を変数に格納
let calcResult2 = function(a,b){
return a*b;
}
「無名関数」は「関数リテラル」と同義である。とさまざまな文献に記述されています。
ならば、
calcResult1
は、関数リテラルではない。
calcResult2
は、関数リテラルである。
という認識で間違っていないでしょうか？ SetInterval()
に与える引数は、関数リテラルでなくてはならないそうです。
となると、以下は誤りで、
SetInterval(calcResult1,1000);
以下なら問題ない
SetInterval(calcResult2,1000);
という理解でよろしいでしょうか？ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function
https://developer.mozilla.org/ja/docs/Glossary/Literal
リテラルに関数は含まれてないな
「関数リテラル=無名関数」が間違ってて、calcResult1 も calcResult2 は、関数リテラル。
とイコールで結んじゃうのは乱暴か
字義に従えば「無名関数」には生成時に名前をつけなかった、程度の意味しかないかと
ただ、関数式として生成された関数は変数に格納するか、でなければ他の関数の引数になるので、名前をつける意味はほぼない
結果的に関数式の関数は無名関数になることがほとんどで ここでいう「関数リテラル」は関数式で記述された関数のことで、名前があろうとなかろうと「関数リテラル」でいいんだと思う 途中送信で変になってるからまとめ直し
>>500,501
その文脈での「関数リテラル」ってのは関数式で記述された関数のこと(>>502のリンク参照)で、名前の有無は関係ない
名前のあるcalcResult1 も 名前のないcalcResult2 も「関数リテラル」という理解でいいと思う
「無名関数」の「無名」には生成時に名前をつけなかった、程度の意味しかないかと
ただ、関数式として生成された関数は変数に格納するか、でなければ他の関数の引数になるので、名前をつける意味はほぼなくて結果的に無名関数になることがほとんどではある >>502
すっごい分かりやすい。
モヤモヤしていたのがすっきりしました。
ありがとうございました。 調べたら自分を再帰的に呼び出す場合に名前を付けるって例があってなるほどと思った ちなみに>>501のsetIntervalの引数は関数リテラルでないといけないってのはどこ情報？ あれ。関数リテラルには引数はないのか。。引数の不要な関数しか関数リテラルにならんのか。
もちょっと調べてみます。 >>507
必要ならページ画像をどっかにアップします。。
技術評論社
JavaScript本格入門
https://gihyo.jp/book/2016/978-4-7741-8411-1
P362
setTimeout/SetIntervalメソッドの注意点
...引数funcは必ず関数リテラルで指定してください。 でも何かの引数に関数をわたすときは、
一般的に関数リテラルで渡すのがデフォと
ぼんやり思っている。 >>509
文脈がわからんけど理由は書いてあるの？
動く動かないで言えばfunction文で定義した関数リテラルでない関数を渡しても動くようだけど
そもそもMDNにも関数としか書いてないし >>512
setTimeout()の例でしかもjQueryで
申し訳ないのですが。
１秒後に#displayのhtmlの内容を空にするコードです。
以下のようなコードではsetTimeoutが動かず、
setTimeout($('#display').html(' '), 1000);
代わりに、以下で動きます。
function clearDisplay(){
$('#display').html('');
}
setTimeout(clearDisplay, 1000);
このことから書籍にあるように
関数リテラルでないと引数に渡せないと
思っていました。。
書籍の文脈ですが、実際にあとで画像アップします。 >setTimeout($('#display').html(' '), 1000);
これそもそも渡してるの関数じゃないからリテラル云々の問題じゃなくない？
html()が戻り値としてjQueryを返すからそれが引数として渡ってるでしょ
>function clearDisplay(){
> $('#display').html('');
>}
これもfunction「文」で定義してるから>>504で言うところの関数リテラルには当てはまらない関数だよね アロー関数式を使うことで、関数リテラルによる関数定義を
より簡略化して記述することができます
ただし、this には注意してください >>515
setTimeout($('#display').html(' '), 1000);
これそもそも渡してるの関数じゃないからリテラル云々の問題じゃなくない？
渡しているのは関数じゃない。。
んー。メソッドか。だから動かない。
ありがとう。 >>517
いや、関数かメソッドかの話じゃなくて
$('#display').html(' ')をその場で実行してその戻り値であるjQueryオブジェクトを渡しちゃってるでしょって話
ちゃんと理解できてる？
https://js.studio-kingdom.com/jquery/manipulation/html#1 私の勘違いだったのですね。
たしかに関数ではない。。
一応書籍のページ画像をuploadしました。
「引数funcは必ず関数リテラルで指定してください。」
https://uploda1.ysklog.net/uploda/8298a4c0da.png
「関数リテラルは....ある関数の引数として渡したり....」
https://uploda1.ysklog.net/uploda/0bcdf35455.png >>519
「引数funcは必ず関数リテラルで指定してください。」
ちょっと問題のある文章だなあ
https://developer.mozilla.org/ja/docs/Web/API/setTimeout
第一引数は関数またはjavascriptコードとして実行される文字列
関数ってのは関数呼び出しじゃなくて関数名、または無名関数（関数リテラル）
>>514
文字列で渡したら動くはず
setTimeout("$('#display').html(' ')", 1000); >>521
> 「引数funcは必ず関数リテラルで指定してください。」
> ちょっと問題のある文章だなあ
まあそこは直前に文字列でも指定できるけどって書いてるから教育的指導なんだろうとは思う
まあ「必ず」という言葉が強すぎるから「引数funcは関数リテラルで指定するようにしてください。」程度でいいと思う
むしろ問題は「関数リテラルは宣言した時点では、名前を持たないことから匿名関数、または無名関数と呼ばれることもあります。」の方だろうね >>521
>文字列で渡したら動くはず
>setTimeout("$('#display').html(' ')", 1000);
ありがとう。関数とは、関数呼び出しではなく実行される文字列
次いでもう一点お願いします。
https://uploda1.ysklog.net/uploda/0bcdf35455.png
リスト4-04 function_literal.js
以下は、関数リテラルを使ってリスト4-01を書き換えたものです。
var getTraiangle = function(base,height){
return base * height/2;
}
console.log('三角形の面積：'+getTrianle(5,2));
↑の
getTrianle(5,2)
は、関数リテラルなのですね。
てっきり()がないものが関数リテラルと思っていたが、
どうも、それも間違いようで。 あくまで、関数を変数に代入するということが、重要なのでしょうか？ 「関数呼び出し」と
「引数付の関数リテラル」は
それだけみても違いわからないですね。
定義された場所を見て判断しないと。 >>523
>>setTimeout("$('#display').html(' ')", 1000);
>ありがとう。関数とは、関数呼び出しではなく実行される文字列
いやいや、それは関数じゃなくてただの文字列
setTimeoutの第一引数は文字列か関数って書いてあるでしょ
関数リテラルって言葉はもう忘れていいと思うよ
そもそもMDNに記述がないから便宜的なものだし、その本での説明も怪しい
定義の仕方で区分されてるだけで実質的にはただの関数で
挙動に差異があるわけでもないだろうし >>522
>「引数funcは関数リテラルで指定するようにしてください。」程度でいいと思う
それだとfunction命令で定義した関数は指定してはいけないと誤解されるからリテラルを削ったほうがいいかと >>523
関数リテラルという呼び方はひとまず置いといて、無名関数という概念でとらえるとよい
function(～～){～～} は見ての通り、ひとつの無名関数である
var getTraiangle = function(base,height){ return base * height/2; }
によって、変数getTraiangle でこの無名関数を参照できるようになる
getTraiangle(5,2)
では変数名を使って先の無名関数を呼び出し、戻り値が取得される
これは一般に「関数の戻り値」と呼ばれる （関数リテラルではない）
console.log('三角形の面積：'+getTraiangle(5,2));
では、「+」によって、文字列 '三角形の面積：' と数値である戻り値が連結されて、ひとつの文字列が生成される
console.log()がそれを出力する
>>525
何かしら（無名）関数を使うにあたり、引数が要るなら付ける、要らないなら付けない、それだけの話
あなたの言う「引数付の関数リテラル」は勘違いで、「引数付きの関数呼び出し」に過ぎない
>>524
そういうこと >>523
>setTimeout("$('#display').html(' ')", 1000);
ありがとう。関数とは、関数呼び出しではなく実行される文字列
違う。全く違う。めっちゃ大事なことだから勘違いしないで
それはsetTimeoutoの第一引数を文字列として指定した場合のこと
第一引数に関数を指定する方法は>>514で君は既にやっている
setTimeout(clearDisplay, 1000);
clearDisplay関数を定義してそれをsetTimeoutの第一引数に渡している
これでいい
>>527の言う通り
>>526の言う通り今は無名関数とか関数リテラルとかにこだわらない方がいい
>>523のうｐ画像に無名関数は重要な概念なので後ほど詳述ってあるからそこをみっちり勉強してね 関数リテラルの説明についてはここが一番しっくりくる
https://www.javadrive.jp/javascript/function/index5.html
「関数リテラルを使った関数定義」って言い回しを強調してるのが良い
だから関数リテラルを引数として渡すって言ったらこういうことだよなって
dispNum(10, 8, function(x, y){
return (x + y) / 2;
}); すいません。やっぱり関数リテラルという意味を理解したい。。でも↓この質問でわかるかも。
だれか答えていただけますでしょうか？
---
次のコードがあります。１から５のうち
どれが適切でしょうか？
let dispMessage = function(msg){
console.log(msg);
};
1.
function(msg){console.log(msg);}
は関数リテラルである。
2.
dispMessage
は関数リテラルである。
3.
let dispMessage = function(msg){
console.log(msg);
};
が全体として関数リテラルである。
4.
全て関数リテラルとはいえない。
5.
関数リテラルとは、用法のことであり、
コード部分を表すものではない。 >>531
ぐぐったら以下の様に出る。結構理解しやすいと思うが。
リテラルとは リテラルとは、プログラムのソースコードにおいて使用される、数値や文字列を直接に記述した定数のことである。 変数の対義語であり、変更されないことを前提とした値である。 プログラミング言語のコード中にリテラルが挿入される場合には、判別のために特定の書式を用いる必要がある。 うん。「リテラル」ということばによって惑わされてきた気がする。 関数リテラルは関数として評価可能な右辺値と考えておけばまあいいんじゃないの
正確な定義は構文木の定義を見れば書いてある >>531
1だろう
let s = "abc";
の"abc"を文字列リテラルと呼ぶけどそれを代入した変数sを
文字列リテラルとは呼ばないでしょ >>531
で、繰り返しになるけど本やサイトによっても説明がまちまちで
MDN探しても出てこないような用語だからあまり囚われない方がいい
理解しようとして時間をかけるだけ無駄 >>531
強いて言えば1かな
でも数値・文字列・正規表現リテラルみたいにプログラム中に単独で書くことは出来ないね
変数に代入するなり関数の引数に使うなりしないとエラーになる
英語でもfunction literalっていうみたいだけど関数リテラルってあんまりいい言葉だと思わないなあ
33;
"hello";
/^js$/;
function() {return true}; //SyntaxError
こんなことにこだわるよりもっと基本的なこと勉強した方方がいいんじゃないの？ あ。
誤解していたところがとけました。
当初は「２」かと妄信していたので、
だいぶ合点がとれました。
関数リテラルが無名関数と同義という説明も
いやそうではないという説明も
すっきりしました。
皆さん長々とお付き合いいただき
ありがとうございました。 >>511
技術評論社のjQuery本格入門はものすごく読みづらかった。
もっと分かり易い言葉で解説して欲しかった。 >>534
>関数リテラルは関数として評価可能な右辺値と考えておけばまあいいんじゃない
この発想というか常識が無かったなあ。 >>531
自分もあまりJS詳しくないんですけど
リテラルっていうのは、括るもの、という意味合いでは？
オブジェクトリテラルっていうのは波かっこで括るオブジェクト＝｛｝
文字列のリテラルは、""や’’
展開のリテラルは、``とか
関数のリテラルというのは、functionを指定した引数括弧つきのオブジェクトリテラルでfunction(){}
関数リテラルといえば、例えばfunction func(){...}
とした場合、{...}は変数funcに文字列として代入されます
そしてfuncは関数オブジェクトと指定されていて
関数の実行は()を読み込むことで実行されます
func 文字列
() 関数の実行 >>531
解決済みだったようですみませんでした
参考までに追加
function func(){return 1}
とした場合
console.log(func)
と
console.log(func())
を見比べるとわかりますが、
func変数の中身は、function指定された文字列で
func()は関数を実行した結果の１が表示されます >>543
括る、というのはそういう意味かと
リテラルはリテラルなので括る必要はなくて
プリミティブは、これは文字列です、
これは配列です、
これはオブジェクトです
とエンジンに理解させるための記述なのかと思いまして >>544
申し訳ないけど全体的に文意が取れません
1行目の「そういう意味」は何を指してますか？ 括ることで、エンジンに対して、これは配列オブジェクトだよとか
これは｛｝だよとか、これは文字列だよとか、そういうことを伝えているってことですけど >>541 > リテラルっていうのは、括るもの、という意味合いでは？
>>544 > リテラルはリテラルなので括る必要はなくて
自分で何書いてるのか理解できてる？ <<538
諄いですね
正しい理論的な話あればご披露ください
JSの処理エンジンに、どういう記述があれば
どう処理するかというのがあるでしょ
{}とう記述を読めば、オブジェクトなのだな、と
””ならもじれるなのかなと、
function でて意義されたものがあれば関数なのかなと
リテラルは数値などの表現で
文字列は””、’’のクオーテーションで
関数は、function装飾委sで
それぞれが何を表現してるのかを確認し
スクリプト実行時にそれらをコンテキストに登録して
その後の作動を担保する、ってことなのかな 一から教えるにはここじゃスペースが足りないからまず入門書一冊買って読め。 先生、ありがとうござす
時間とれましたら勉強してみます、ありがとうです 中途半端に字句解析、構文解析の話になってるのか・・・
誰もそんなレベルの話はしてないのに 誤変換の多さと言い意味の通ってなさと言い酔っ払ってるとしか思えんなｗ 勉強しますの前にまず筋の通った主張を相手に分かるようにお願いします
>>548の指摘もそういうことだし リテラルって文字列とか数値というイメージ
だから、
let dispMessage = function(msg){console.log(msg)}
っていう文があれば、関数リテラルならどうみても
左側の変数の文字列の事って思うじゃないですか。
右側はfunctionとか{}とか()とかあるので、
リテラルからかけ離れていると思ってました。
どうりで、話が噛み合わないなと思ってたが
今、全部なっとく。ありがとうございました！ リテラルはもともと「文字通りの」って意味
ソースに書いた内容が変数とかを介さずにそのまま1つの値として評価されるもの
括弧で括るとかの意味は全く無い リテラル
””や’’で表現されるのは文字列と評価する
[]は配列と評価する
{}はオブジェクトと評価する
JSエンジンがオブジェクトをどう評価して処理するかということだと思ったんですけど
何やら全く的外れなこと言ってたみたいですみませんでした
何度も謝ったのでもう許してください、鬼神様 >>559
的外れなことを繰り返し書かなくていいから黙って>>502を読んでおいて >>559
わざわざもう１回書いたのは自分の中ではこれが正しいという思いが捨てられなくて
賛同してくれる人が現れないかと期待してってところか 再帰関数についての質問
function test(){
処理１
test();
処理２
}
とした場合
処理２の前にtest()があるので、処理２はずっと実行されないということですか？ >>567
ありがとうございます
処理１はreturnや他関数への再帰はしないものとします 最大の再帰の深さは JavaScript エンジンによって制限されていて
その範囲内で終了条件を満たすように作る必要があります
でなければエラー終了するので、無限再帰は有り得ません そもそも永久に再帰は無理なのを理解していないのか？
それと何故再帰を使うのかという理由が全く分からん まあ普通は無限ループだな
わざわざ再帰にしなければいけない
理由が何かだな 末尾再帰最適化が保証されている言語では特定条件を満たせばさもループの代替として使えるが
javascriptではそうはならなかった
以上 末尾最適化されてれば無限ループ可能でしょ？
ES2015で末尾最適化の仕様化されたけど適合してない実装が多いというだけ 規格があっても準拠するかどうかは実装次第というね
ちなみにjavascriptは関数がファーストクラスでレキシカルスコープを持つためいわゆるクロージャを無意識に生成できる
クロージャがあれば末尾再帰できないからと不自由に感じることはないと思われる >>570
@supportsや＠mediaのネストされたcssの全プロパティ値を取得するために
再帰使いたかった >>576を実現するにしても>>566にはならんと思うけども ホントになｗ
// aはarray
function test(a)
{
a.forEach( b => {
if (b.isArray()) {
test(b)
}
})
}
みたいな感じなら分かるがｗ ノードを全部舐めるみたいなトラバース系の処理はエンジンの制限とか気にするなら再帰のロジックを配列とループで作った方が安全だし
恐らく関数を呼び出すより速いから検討してみてね 質問
scriptタグで指定されてるリンク先をjavascriptで変えたい
例えば. script type="text/javascript" src="A”
になってんのを
script type="text/javascript" src="B”に変えたい
replace等でやろうとしたものの上手くいかなかった >>582
ありがとうございます…
本当に助かりました… 確かに以下のように、jQuery で、script タグのsrc 属性を、
a.js から、b.js へ変えても、scriptタグが再読み込みされない
$("script[src='a.js']:first").each(function (index, elem) {
$(elem).attr('src', 'b.js');
});
新たなscriptタグを追加してから、元のscriptタグを削除すれば、読み込まれるかも 読み込まれたスクリプト自体はscript要素消しても消えない事に注意 ルーターのブロードステーションに電源を入れると
エッジブラウザが起動して自動的にブロードステーションのルーターのページが表示されます。
ブロードステーション関連のソフトウェアは一切インストールしていないにもかかわらずです。
これって動きだけ見ますとルータが勝手にこっちのpcを操作してるように見えるのですがどういう仕組みなんでしょうか？
ブラウザ(JavaScript)はページ内しか操作出来ない筈なんですが。 よろしくお願いします
【環境】Win11,Chrome
【何をしたのか】下記コードをHTMLファイルにしてchromeで読み込ませて、コンソールで見た
JSONのItemsを一個追加して、追加したageだけ書き換えたいが、両方書き換わる
【エラーメッセージ】エラーメッセージはない
【期待する結果】Itemsの2個めのageだけが40になるはず
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
<script>
json =
{
"color_list": [ "red", "green", "blue" ],
"Items": [
{ "name": "Tanaka", "age": 26 },
]
}
data0=json["Items"][0]
json["Items"].push(data0)
console.log("before");
console.log(json["Items"][0]["age"]);
console.log(json["Items"][1]["age"]);
json["Items"][1]["age"]=40
console.log("after");
console.log(json["Items"][0]["age"]);
console.log(json["Items"][1]["age"]);
</script>
結果
before
26
26
after
40
40 >>587
そのコードで、参照がコピーされているので
data0={...json["Items"][0]}
とすればいい >>588,589
できましたありがとうございます。 この場合はこれで十分ですが
スプレッド構文はシャローコピーなので、
データがより複雑な構造の場合は、それなりの記述が必要です >>586
キャプティブポータルの検出機能が誤爆してるんじゃないかな mainfn()
function mainfn(){
pg1 = win1.pnl.add('group')
pg1.orientation = "row"
pg1.add("statictext", [0,0,70,23], "拡大・縮小")
rd11 = pg1.add("edittext", [0,0,40,23], 100)
pg1.add("statictext", [0,0,30,23], "％")
pg9 = win1.pnl.add('group')
pg9.orientation = "row"
CAN = pg9.add("button",[0,0,100,30],"cancel")
OK = pg9.add("button",[0,0,100,30],"OK")
CAN.onClick = function(){win1.close()}
OK.onClick = function(){
win1.close()
dofn()
}
win1.show()
}
function dofn(){
bai = parseFloat(rd11.text)
…… 以下略
これが正常に動作するのですが、rd11はローカル変数だとおもうのですが、なぜ違う関数内（dofn()）から読めるのでしょうか？
こういう書き方が出来るのなら楽なのですが… 関数内でvarを付けずに宣言された変数はグローバルスコープになる
var rd11 = pg1.add("edittext", [0,0,40,23], 100)
とすると関数スコープになって外部からアクセスできなくなるはず
関数内での変数宣言はvar文で行うべきで
これを「楽」と思ってしまうのは危険 >>594
ありがとうございます
非常に勉強になりました >>595
'use strict'が効くならスクリプトの先頭行に書いとくといいよ >>593
それAdobe Illustratorかなにかで使うソースでしょ？
どういう環境で使うソースなのかは一言書いといた方がいいよ ES2015(ES6)以降は最低限、
変数宣言にはvar ではなく、let/const を付けよう >>597
この指摘は何度も見てるが、いつになっても改善されない
質問者にとっては直す気がない、どうでもいい問題なんだろうな… >>597
この指摘は何度も見てるが、いつになっても改善されない
質問者にとっては直す気がない、どうでもいい問題なんだろうな… 申し訳ない
投稿エラーで再投稿したら、二重投稿になってた >>597
すみません
次から書きます
あまりillustratorに特化したことは質問しません >>596
そういうのがあるんですね
知らなかったです >>604
知った以上次からそちらにに行って質問してください
環境の説明も必要ないしillustratorに特化した質問もし放題だし良いことづくめですよ イラレ特化だからではなくてJavaScriptのバージョンの問題なんだけど
なんも書いてなければ最新のモダンブラウザのつもりでみんな考える
今JavaScriptのバージョンってES12くらいかね、あんまりそういう言い方しないけど
イラレ搭載のはES3なの？それも知らんけど
クッソ古いから使える文法も関数もまるで違うから環境を書けと言っているのよ
そこらへん多分知らなかったんだろうけど、それは仕方ないけど、次からは環境きちんと書いて
というかできれば以降はAdobeのフォーラムでやって >>587
C/C++ 以外の言語は、参照しかコピーしない・shallow copy。
実体は再作成されない
なので、deep copy するのに、参照のリンクが切れないので困る
だから、marshal とか、わざわざオブジェクトをJSON 文字列化して、
その文字列から、新しいオブジェクトを作ったりする 検索アドレスに言語指定が必要になって下のスクリプトを書きました。
function Jump(){
var kekka =
"ht"+"tp://www.concertzender.nl/?s=" +
document.concertzender.kensaku.value +
"&lang=nl";
location.href = kekka;
return;
}
kensaku は検索フォームの文字列です。これで正常動作するのですが、
エラーチェックすると＆が警告されて気になります。
&にしたらアドレスが&になって検索できないし、
なんとかならないものでしょうか・・・ documentのpropertyにconcertzenderって標準でないっしょ？
スクリプトのどっかでなんか設定してるん？ それとエラーの内容も書き込まずにして質問っていうのもどうなの？ >>614
すいません。単純に特殊文字ダメよという内容だったんで・・・
"&lang=nl";
"&lang=nl"; もし、"&" で始まるエンティティを含めるつもりなら、";" で終了させるべきです。
このエラーメッセージのもう一つの理由は、このテキストの直前にある「&」文字をエスケープしなかったために、
誤ってエンティティを作成してしまったことです。（機械翻訳）
自分としては＆ａｍｐ；と書いて、リンクアドレスとして＆を出力したいわけです・・・ >>615
あーそういうことか。コピペコードで悪さでもしようとしているのかと思ったけど違うみたいね
>>610
大体どの言語でもクエリ文字列を作る仕組みが用意されているのでそれを利用するのが適切です
JavaScriptならコレかな
URLSearchParams
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams >>616
載せるならエラーメッセージ原文を
で、そのメッセージでググってみた？
あとエラーチェックするとって具体的にどういう操作をしたの？ >>610
htmlのscript要素の中身はCDATAなので文字参照にする必要なし
もちろんinnerHTML等htmlとしてパースされるものに突っ込む場合は必要だが
htmllintなんかでエラーになるのは無視していい >>618
エラーメッセージはその部分は＆ａｍｐ；だろと言っているのですが、じゃあ＆ａｍｐ；と書くと
tp://www.concertzender.nl/?s=kensaku＆ａｍｐ；lang=nl と出力されてエラーになり、困ったわけです・・・
>>619
無視していいんですね。ありがとうございます。
htmlでは＆ａｍｐ；と書くと＆になるのに、スクリプトの部分ではそうならないのですね。 >>620
何も質問に答えてないよね
答える気があるならもう一度>>618を読んでほしい 君は君の質問に反応しない人には
推し量って導こうという崇高な意識はないの？JS使いなのに？ >>622
誰からも回答してもらえない質問者は、他の人を導く存在に昇格ということか
質問に回答しないのが本人の為なのかもしれんな それよりJavaScriptをJSと略すと女子小学生しか思い浮かばないからそろそろやめたほうがいい >>622
>君は君の質問に反応しない人には
反応しない人？
質問に反応されたけど回答になってなかったからそこを指摘したんだけど 【環境】Win11,Chromeで表示させたHTMLの中のjavascript
Windowsのフルパスのファイル名が入った変数を\でsplitしたいんだけど可能？
x_textにはJSONデータから取ってきた'D:\\00.png'が入っていて
console.log(x_text)だとD:\00.pngと表示
これをsplitすると
aaa1.html:154 Uncaught TypeError: Assignment to constant variable.
になる。
split('\\')をsplit('\\\\')にしても同じ
console.log(x_text)
arr_text = x_text.split('\\') ←ここでエラー
console.log(arr_text[0]) >>627
arr_textがconst宣言されてるだけでは？ 初学者質問ですいませんが、変数aが文字列あいう、かつ、変数bがundefinedでない時 というif文を書きたい時
if (a=='あいう' && (!(b === void 0))) ｛...
という書き方であってますか？
よりシンプルな書き方とか、より標準的な書き方ってありますでしょうか。 if(a == 'あいう' && !b)でもよさそうな気がしなくもない >>631
undefined は予約語ではないのでローカル変数による上書きが可能…という意味では、void 0 を使う価値はある >631
ありがとうございます。リンク先確認しました。
if(a=='あいう' && b!== undefined またはvoid 0)
という感じでしょうか。
ここでb!= undefined とするとまずいのはbがnullの時だけ、という認識でいいでしょうか。
>632
ありがとうございます。bが0や空文字の時にも偽になりそうです。 第一にjavascriptみたいな後付け追加仕様が混在する言語は規格よりも実装の影響力が強いから
想定環境で検証済の方法を採用すべきだと思う
コードとしては変数をtypeofで"undefined"と比較するのが恐らく理解しやすいが、
メンテナがjavascriptに十分慣れていてvoid 0のイディオムの理解を期待できるならそっちでもいい >>634
結局のところ
・undefinedが上書きされる可能性を考慮する必要があるのか
・bがundefined以外のfalsyな値を取りうるのか
・取る場合それぞれの値をundefinedとは区別したいのか同じとみなしたいのか
この辺次第で望ましい書き方は変わってくるわけで >>634
型チェックも働かせるなら
if (a. === 'あいう' && b !== void 0)
と書けば良い
'あいう' も==では型チェックしない
> ここでb!= undefined とするとまずいのはbがnullの時だけ
まずいのは、undefined! == void 0 の場合 //☆☆県(API番号☆00000)の予報を取得
let url = "https://www.jma.go.jp/bosai/forecast/data/forecast/☆00000.json";
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(weather) {
console.log(weather);
//☆☆県を選択し、変数に詰め直す
let area = weather[0].timeSeries[0].areas[0];
console.log(area);
//発表者と更新日時の情報を書き出す
document.getElementById("publishingOffice").lastElementChild.textContent = weather[0].publishingOffice;
document.getElementById("reportDatetime").lastElementChild.textContent = weather[0].reportDatetime;
//特定の地域の情報を画面に書き出す
document.getElementById("targetArea").lastElementChild.textContent = area.area.name;
document.getElementById("today").lastElementChild.textContent = area.weathers[0];
document.getElementById("tomorrow").lastElementChild.textContent = area.weathers[1];
document.getElementById("dayAfterTomorrow").lastElementChild.textContent = area.weathers[2];
});
上手く動かないのですがどこが間違えてますか？教えてください。
☆はわざとです バグってるので調査してください
それは質問ではなく作業依頼 >>638
やりたいことも伝えずに上手く動かないと言われてもなー そのメソッドチェーンやめれば分かるよ
エラーが起きない前提があってのメソッドチェーンだからよ $.each()とsetIntervalをつかって、
インターバル時間ごとに順番に配列の中身を、コンソール出力する方法ありますでしょうか？
$.each()は、一度に処理するから、一つづつコンソール出力するのは難しいですかね。 >>643
$,each()を使う理由がわからない
setIntervalだけ使えば良い >>643
clearintervalで1回だけタイマーを動かしてPromise化してawaitして$.each()を使えば、理屈ではできると思う
手段のﾓ目的化、かつ無駄に複雑だと思うが nodeでPythonのif name==main
みたいなことできませんか？
メソッドの動きをデバッカーでみたいんです //【環境】Win11,JScript
//【何をしたのか】case文のところに条件式を書き、breakせずにすべての条件式で評価したい
//【サンプルコード】現象を再現可能な最小限のコードを書いてください。
a=1
switch (true) {
case (a==1):
a=a+16
WScript.echo("aの値を変更a=",a)
case (a>10):
WScript.echo("a>10","a=",a)
a=a-10
WScript.echo("aの値を変更a=",a)
case (a>30):
WScript.echo("a>30です","a=",a)
a=0
WScript.echo("aの値を変更a=",a)
}
WScript.echo("最終的な結果a=",a)
//【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
aの値を変更a= 17
a>10 a= 17
aの値を変更a= 7
a>30です a= 7
aの値を変更a= 0
最終的な結果a= 0
//【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
2番目のcaseでa=7だから3番目のcaseにはいかず、最終的にはa=7になるのでは？ >>647
上から順に case が評価され、どこかで真になればそれ以降の case は評価されない。
break してないからそれ以降の処理がフォールスルーで実行されてるだけ。
全部の条件を評価したいなら普通に if で書けばいいと思うよ。 そもそもswitch文って条件にtrue入れて使うようなもんじゃないぞ >>649
case に式を書けるようにしたことによって使えるようになった副作用みたいなものだよね。
switch の式と一致する case を探すのが switch文の動作だとするなら、switch の式 true と一致する値となる、すなわち true になる式を持つ case が選択される。
個人的には if で書けばいいものをわざわざ分かりづらい書き方にしてるバッドプラクティスだと思ってるが、フォールスルーと組み合わせると if よりもスマートに書ける可能性はあるかもね。
特に >>647 のように全部の case を評価してほしいなら、switch で書く利点が何一つ無い。
if より利点がある場合は、フォールスルーする場合に最初に true になる case までしか式が評価されないことくらいなのに。 >>650
良いサンプルが思いつかんけど、
ifで書こうとすると、重複する処理を書かなければいけなくなったり、フラグの変数を導入したりすることになるんだけど、
breakなしのswitch case文ならうまいこと書けるんじゃないかと思ってやってみたけど、動かなかった。 jQuery以外のライブラリ・フレームワークは廃止して欲しい。
覚えるのが大変。 react だけでよくね
jqueryとかいい加減消滅しろよ >>653
この２つは併用出来ないから辛い。
で、reactならではの利点は？ 素の JS でいじゃん。
というのは言い過ぎかもしれんけど、何に使ってるんだか分からんようなことでいちいちおまじないのように jquery 読み込んでる呆れるようなところも少なくないんだよな。
通信回線速度も処理能力も上がってるから動いちゃいるが、とりあえず素の JS で書けるようになれと言いたい。
ブラウザ毎の非互換も少なくなってるし querySelector みたいな便利なメソッドもあるし、そんなに苦労しないでしょ。 それなjqueryおじさんはJSだけで書けるようにしておけ
それでも足りないならReact使えな githubで他人のコード見てるとclassもprototypeも使われてないやつが多いんだけど何でなん？ベストプラクティスがruby以上にわからん何が正解なん？ 暗黙的なクロージャがあるからclassやprototypeを使わずとも割と困らないのが何でなん？の回答になる htmlコーダー志望の初心者です。
JSの入門書を読み終えたのでより実践的な学習に移行したいのですが、
既存の書籍やサイトは総論のような基本的な知識に焦点を当てたものが多い印象で、
実務において初心者コーダーにどのようなプログラムの作成が
求められてくるのかが判然としません。
そのような内容に焦点を当てた書籍やサイト等はありますか。 そもそもhtmlコーダーって何？ってぐぐってみたらデザイナやエンジニアが片手間でできる内容だし専門職としては成立せんのでは >>661
htmlコーダーという職種自体がオワコンですかね…
ご意見参考にさせていただきます。 99％のエンジニアは片手間でできないからな
エンジニアはhtmlとcssをバカにするけどほとんどのエンジニアはまともに使えていないんだよ
特にcss
使い方を知らない
勉強しようとしても理解できない
なのにバカにする
エンジニアは視覚からコードに落とし込む能力が絶望的に劣っている
↓
デザイナーから上がっきたモックをhtmlとcssで再現できない
↓
だけどその事実がバレたくないからコーダーといってバカにする
↓
実際にはjsxとstyle componentなどで必須スキル
↓
必須だけどできないからhtmlとcssはデザイナーの仕事だと言い放つ
↓
じゃあjsxはデザイナーに書かせるのか？と聞くと無言
毎回このパターン まあでもそういう業界だからね
連携ダメだからと言って隙間に入り込める余地があるかどうか >>663
組み込み系や汎用系のエンジニアにでも頼んでるのか？
ちゃんとWeb系やってるとこに頼みなよ >>665
むしろ組み込みは汎用系のほうは知らん
Web系エンジニアはこんなんだぞ
ほんの少しだけ有能なフロントエンジニアがいる現状
なぜならフロント開発スキルとデザインスキルの両方を持ち合わせた人材がほぼいないから webプログラマーに高度なデザインまで要求するのは無理でしょ
そのためにプロのデザイナーがいるんだし
でもほとんどのエンジニアがhtmlとcssをまともに使えないなんてありえない
今いる環境が悪すぎるんじゃないの？ ぶっちゃけデザインするやつが CSS まで書くのが一番いいんじゃね？
位置やら大きさやらの細かい詰めまでこだわれるでしょうに。 アニメーションとかJsonでデータいじくる時だけ呼んでください
ってことにしてる社内ニート こういうこと
デザイナーの担当
・モック作成
・Atomicデザイン込みのコンポーネント設計
・コンポーネント作成
・App作成（コンポーネントの組み上げ）
・jsx、css
・state更新とrender関連
・レスポンシブ対応
・トランジションやアニメーションなど
・DOM生成後の表示・操作・調整（表示順やインタラクション）
・エラー表示、警告
・htmlバリデーションのcheckValidityやreportValidity処理
フロントエンジニアの担当
・APIでデータ送受信
・propsで流し込み >>670
それ専業のデザイナー置いても暇を持て余すような職場だろ
普通デザイナーにjsxなんて書かせないよ ほとんどのエンジニアがｈｔｍｌもｃｓｓもまともに使えない職場みたいだからなｗ 職場じゃなくてそもそもエンジニアたちがhtmlとcssが絶望的にゴミレベルしかいないんだよ
海外でも同じ傾向がある
なのに自分たちはできると勘違いしてるから話が通じないんだよな jquery使えます！って嘘ついたデザイナーの尻拭いをさせられたことはあったな >>673
そういうお前は逆にサーバサイドは絶望的な腕前なんじゃないの？ >>675
わざわざ煽りご苦労
サーバーサイドが絶望的どころかサーバーサイドもやってるが？
むしろフロントよりも先にサーバーサイドからやってたわ >>676
という人がどれだけいるのって話でしょ。
おれもサーバサイドの人というか、むしろwebじゃないサーバの人だけど。 やたらイキって言葉遣いが悪いのと同じ回線だと肩身が狭い・・・ >>670
デザイナーはせいぜいコンポーネント作ってStoryBookに載せるまでが責務だろw プログラマにバカにされてreact勉強中のデザイナー様が激おこです webデザイナーってjqueryぐらいまでは覚えさせられたかもだけど
流石にreactやvueまでやれってのは酷ではｗ
そんなのフロントエンドエンジニアの仕事でしょｗ だってフロントエンドエンジニアはｈｔｍｌもｃｓｓもわからないバカばっかりなんだもん javascriptコードでバグの伝搬を制限して拡張性を高める必要性のある堅牢なプログラムなんて不要だからでしょ 仕事だし自分の領域に少なからず関わってくるんだから覚えろよ
わからないじゃねーんだよボケ^^
これでよし sortメソッドは必ず、比較関数と一緒に使用する必要ありますか？
sortメソッドは数値を並びかえだと比較関数と一緒でないとうまくいかなくて、
でも、文字列のソートなら、ソート関数なくてもうまくいくみたい。
sortは文字列でも数値でもソート関数使った方がいいのでしょうか？ >>686
疑問に思うことがあれば、まずMDNで関数の仕様を確認してみるといい
sort 関数なら、解説に関数を指定しなかった場合についてもちゃんと書いてある
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
> compareFn が与えられなかった場合、undefined 以外のすべての配列要素は文字列に変換され、文字列が UTF-16 コード単位順でソートされます。例えば、"banana" は "cherry" の前に来ます。数値のソートでは、9 が 80 の前に来ますが、数値は文字列に変換されるため、Unicode 順で "80" が "9" の前に来ます。undefined の要素はすべて、配列の末尾に並べられます。 ティラノスクリプトでゲーム作ろうとしたら、結局JSまで触らないと無理そうで及び腰・・・
・例えば変数aに"gazou1"という文字列を入れる
・『【"変数a"+.jpg】を表示』みたいな記述？？ ←ここが分からない
・結果、gazou1.jpgが表示される
こんな感じの、変数に入れた文字列を使用して画像表示ってできますか？
JS 変数 画像表示 とかで調べても情報が多すぎてさっぱり分からない >>690
誘導ありがとうございます
ティラノだけでは無理そう＆ティラノ上ではJSの記述が使える、という事でこちらで質問しました
なのでJSで可能か不可能かだけでも教えて頂けると助かります
JSで不可能なら調べたところで出て来ないでしょうから延々調べ続けるはめに・・・ >>691
まずはティラノスクリプトに詳しい人に聞いてみるのが筋ではないですか？
同じ問題に遭遇した人もきっといるはずでノウハウも蓄積されてると思いますよ
wikiなんかもあるようですし、そちらも確認してみましたか？ >>689
こういうこと？
===============================
<body>
<a href='#' onclick='fun'>link</a>
</body>
<script>
function fun(){a.href='https://....'}
</script>
===============================
===============================
<body>
<a href='#' id='href'>link</a>
</body>
<script>
href.onclick=function(){a.href='https;//...'}
---------------------
// または
let aLink=document.querySelector('[a]');
aLink.addEventListener('click',()=>{a.href='https://...'}):
</script>
================================ >>681
むしろjQueryの方が難しいと思うけど... >>693
表示する画像を変数を使って切り替えたいので、
if 変数a=='花' なら 花.jpg を表示 else 変数a=='山' なら 山.jpg を表示
みたいな感じで一応は表示できるのですが、表示したい箇所が複数あるので
if 変数b=='花' とか if変数c==’’花' とかで凄く長くなりそうなのです
でももし 変数の中身＋.jpg みたいな記述がjsに存在するなら
aの場所には 変数aの中身+.jpgを表示 bの場所には変数bの中身+.jpg みたいに凄く簡略化できるかなって
教えて頂いたコードを調べてみます！ありがとうございます！ >>696
そこは質問スレじゃないのでどうにも質問しづらくて
とうかJSの質問スレでJSの質問してるのに「ティラノ上で動かしてる」ってだけで、
そこまで「よそいけ、よそいけ」って言わなくても・・・ >>697
>そこは質問スレじゃないのでどうにも質問しづらくて
そのスレを「質問」で検索してみると皆質問してるのが分かります
気後れする必要はないと思いますよ
>とうかJSの質問スレでJSの質問してるのに>「ティラノ上で動かしてる」ってだけで、
>そこまで「よそいけ、よそいけ」って言わなくても・・・
あなたが必要としてるのは「ティラノスクリプトで変数を使って画像表示したい場合にどうすればいいか」の解決策だからです
それについてはこのスレよりティラノスレや専用掲示板の方が的確なアドバイスが得られるはずです
違いますか？ ついでに「ティラノ上で動かしてる」JSについてもそちらで聞いた方が良いでしょう
ティラノスレを見渡すとJSのコードもたくさん貼ってありますよ >>698
>あなたが必要としてるのは「ティラノスクリプトで変数を使って画像表示したい場合にどうすればいいか」の解決策だからです
違います。自分の質問を要約すると「JSには、変数の中身の文字列に.jpgなどの拡張子を付け足して画像を表示する機能はありますか？」です
最初にティラノの名を出したことで誤解を招いたかも知れませんが、
>>689に >JS 変数 画像表示 とかで調べても
>>691に >なのでJSで可能か不可能かだけでも教えて頂けると助かります
と書いてあるように、ティラノではなく、あくまでJSについて尋ねています >>700
>自分の質問を要約すると「JSには、変数の中身の文字列に.jpgなどの拡張子を付け足して画像を表示する機能はありますか？」です
では聞きますが、それが何のために必要なのですか？ 拡張子を付加する機能は無いよ
WBC始まってキャッチボールしたい気持ちはわからんでもないけども >>700
> 「JSには、変数の中身の文字列に.jpgなどの拡張子を付け足して画像を表示する機能はありますか？」
はい。可能です
imgタグにデータURLを引き渡し表示することはごく普通に見ることができます
Base64エンコードされた文字列とmediatypeをセットするだけです >>700
あなたの質問はjavascriptの質問ではありますがティラノスクリプトの仕様を知らないと答えられないものです
こちらはティラノスクリプトの仕様を知らないのであなたの代わりに調べることから始めなければなりません
ティラノスレであれば詳しい人がいると思うのでそちらへどうぞ >>701
上述の通りゲーム作成と作業の簡略化のためです
>>702
拡張子の付け足しは誤解を招く表現でした。変数の中にある文字列と同じ名前の画像を表示するってことです
>>703
ありがとうございます。調べてみます
>>704
あくまでJSの事として聞いているので「JSではこれこれこうやる。それがティラノ上で動くかは知らんけど」って感じの答えで十分です
ティラノスレでJSのこと聞くよりJSスレでJSのこと聞く方が早そう、って考えはそこまで変ですか？ >>705
>上述の通りゲーム作成と作業の簡略化のためです
それは「ティラノスクリプトで変数に応じた画像表示する」こととは違うのですか？
>「JSではこれこれこうやる。それがティラノ上で動くかは知らんけど」
このスレでそんな回答をもらうよりはティラノスレで質問して
「ティラノスクリプトではみんなこうやってるよ」って回答をもらう方が何倍も早くて確実だと思いますがいかがでしょう 例えば、jQuery で、
<img id="photo_1" src="a.png">
を、以下に変更するなら
<img id="photo_1" src="image_1.jpg">
// :first は、最初に見つかったもの
$( '#photo_1:first' ).each( function ( index, elem ) {
const image_1_basename = "image_1"
const image_1_filename = image_1_basename + ".jpg"
$(this).attr('src', image_1_filename) // 設定
} ) JSスレでJSのこと聞きたいんならティラノの名前出すなよ >>705
ティラノについて少し調べたのでスレ違いを承知の上で書きます
あなたが>>689や>>695でやりたいことは
[bg storage="&f.bg + '.jpg'" time=1000]
というような書き方で実現できるかと思います
簡単に説明します
まず「&f.bg」の「&」はエンティティと呼ばれるもので変数の値をタグのパラメータとして渡すときに使用します
https://tyrano.jp/usage/tech/hensuu
の最後に説明があります
そして、storageパラメータに渡す際に「 + '.jpg'」で拡張子を連結しています。これは
https://tyrano.jp/sample2/code/kiso/19#demo
のkaisetsu/19_variable_1.ksの415行目～に変数に対して数値演算をした値を
パラメータに渡す例がありました。文字列の連結も同様に可能です
これによって、変数f.bgの値が「花」ならば「花.jpg」が、「山」ならば「山.jpg」が表示されます
例は背景ですがキャラやその他の画像でも可能だと思います >>705
なお、簡単なサンプルで動作確認をしました
https://tyrano.jp/usage/tutorial/moji
上記チュートリアルに従って新規プロジェクトを作成し、
first.ksの内容を以下のように書き換えて実行してみてください
*start
[wait time=100]
背景を変更します。[r]
[link target=*select_room]<教室>[endlink][r]
[link target=*select_rouka]<廊下>[endlink][r]
[s]
*select_room
[eval exp="f.bg='room'"]
[jump target=end_select]
*select_rouka
[eval exp="f.bg='rouka'"]
[jump target=end_select]
*end_select
[cm]
[bg storage="&f.bg + '.jpg'" time=1000]
[jump target=start] >>711
ありがとうございます！！できました！！ 作業が一気に楽になりました！
>>711も他の方も本当にありがとうございました！
そして不可能と思いこんでたことが実は可能だったあたりはすみませんでした！ >>713
解決したのならなによりです
が、今回無駄に遠回りをしてしまったのは自覚、反省しましょう
あなたはこの問題の解決はティラノ単体では無理だと決めつけてしまったためにこのスレで質問しましたが
その判断は正しくありませんでした
繰り返しになりますが、この先また何か躓いたときはまずティラノの掲示板なりスレなりで聞いてみるようにしましょう（たとえJSに関することであれ）
その方が解決が早く、的確なはずです >>714
ちょうどかぶってしまいましたが、ちゃんと自分の非を認められる人で安心しました
こちらも少し言葉がキツくなってしまった点はお詫びします 初めまして
Pixiv filter（GitHubで公開、リンクはスパム対策で貼れず）という拡張機能がありまして、それに似たものを自作したいと思い立ち、色々調べてみました
別スレにて、検索画面上での作品ごとのタグは、画面には表示されないもののデータとしては生成されている、という事を伺ったのですが、
どこに生成されているのか、どうやったら参照できるのかなどが分からず、苦戦しております。
ご教授頂ければ幸いです これか？
github.com/kazu-ux/PixivFilter
React, TypeScript 反省なんて必要ないわ、なんか強迫症的なやつがうざい
なんなんだ、執着が過ぎる プログラムではすべてのタグを検出して配列等に格納しているが
そこから抽出して出力する処理をしてるってことじゃない？
見てないからわからんけど >>717
なんか見覚えあると思ったらこれか
https://mevius.5ch.net/test/read.cgi/hp/1439005423/342
343をレスしたの俺だけど回答の内容を理解できなかったってこと？
分からないところがあったのなら追加で質問すればよかったろうに
それをせずに全然違うスレで聞き直してるのはなんで？ Pixiv filterが何なのかわからないし確認もしてないけど、
例えば複数の作品毎にTagオブジェクトがあったとして、
Tagのプロパティに表示させるか表示させないかを判定するプロパティがあり
そのプロパティ名がshowAbleで、表示を許可するのは、showAble:true
許可しない場合には、showAble:false
とされていたとすれば
まず最初にすべての作品Tagオブジェクトが格納されている配列を取得し（もしくは配列に取得する関数を作り）
（let tagArr=[tag1,tag2,tag3,tag4....];）
その配列から、tag.showAble=trueであるオブジェクトを取得して別の配列（showAblerArray)に格納し
（let showAbleArray=[] ; for(let t of tagArr){ (if(t.showAble==true){showAbleArray.push(t)
showAbleArrayの全要素に対して、表示させる処理をする
（for(let s of showAbleArray){,,,,,,どこに表示させるか......}）
っていう感じでどうですか？ jQueryはなぜ嫌われる？
簡単な構文で便利だと思うが…。
他のライブラリ・フレームワークとの互換性が高ければいいのに。 技術的には好かれてるわけでも嫌われてるわけでもない
スレ的には脈絡なく蒸し返す厄介な奴がいるので敬遠される javascriptで作られたプログラムの処理に関して
Jqyeryを使えば簡単だよって言われても
いやいやここはjSで書きたいんでってなるでしょ
そういう質問に対してjqのほうが簡単っていうのがよくわからん
フレームワークの質問スレは
ベース言語のすれとは別に立てたほうが フレームワークスレは一応立ってるね
糞スレだからそこで質問して回答があるのか知らんけど >>719
これもしかして私に対して何か言おうとしてる？
もしそうならもう少し具体的に問題点を指摘してもらえないかな >>730
あなたは>>719とワッチョイもIPも違うようだが… >>722
どうですか？も何もそんな都合のいい妄想データを元に書いたコードなんぞ
役に立たないどころか混乱させるだけだからやめようよ 混乱させるだけとかｗｗｗ
そもそも解答者がわざわざ対象コードを検索して読み込み
そして質問者が満足するようなコードを生成するとか、自分は絶対しないｗ
質問者は
・何やら検索するらしい
・検索はタグで行うらしい
・タグで検索しても表示するものとしないものがあるらしい
その3点でアドバイスするのなら
・検索ワードでヒットする画像を抽出する
・ヒット判定は画像のタグプロパティで判定
・判定でヒットした画像を１枚もしくは複数枚表示する
とした場合で、初心者初学者向けにアドバイスするのなら
上記の感じのアドバイス以外に何かできるアドバイスあるん？
質問の質以上のアドバイスなんてできない
まずはオブジェクトとプロパティあたりから始めるしかないっしょ
って思ってのアドバイスなのねん 質問者がわからないと言ってるものには具体的な対象があるわけよ
それを無視して一般的な考え方のアドバイスをするなら抽象的な話にとどめればよくて
わざわざデタラメコードを生成することはなかろ それはそうですね
おっしゃる通り
でもデタラメとか言わんでください！ こっちがデタラメなコード書くと見かねていい感じのコード書いてくれるツンデレ すみません、私の知識不足というか理解不足も大きそうですので、手が出るところからさせて頂こうと思います。
javascriptの「fetch」メソッドなのですが、これはjsonファイルを読み込む事はできないのでしょうか？ローカルで試しましたが、エラーになってしまうようです >>738
fetchやXHRも >>467-473 と同様基本的にFileURIでのアクセス不可 ありがとうございます。「ローカルのサーバーを立てる」と良いらしいのですサーバーは専用のパソコンでないと、セキュリティ的にも危険と聞いた事もありますが、大丈夫なのでしょうか。また、実際やるとしたら、どのような方法があるでしょうか。 >>740
vscodeって使える？すごく簡単なエディタ
そのエディタでliveServerっていう拡張があるんだけど使えるか試してみたら？ Promise.race()で複数のPromiseを渡して、最初に終了したタスクのPromiseを受け取ったあと、同様に順次残りのタスクを完了したものから受け取るような書き方はできますか？
(最終的にすべての非同期タスクの終了まで繰り返す)
Pythonでいう、as_completedのように複数非同期タスクを、終了次第順次ループで受け取るような形です。 >>741 >>742
vscodeの方を使わせて頂きました。お二方ともアドバイス、ありがとうございました。
余談ですが、jsonファイルに単なる文字列（あああ、abc、123）などを単発で格納するとしても、「名前:値」のフォーマットは守らないといけないんでしょうか（名前をいちいち宣言しないとダメなのか）。 正確には「{"名前":値}」ですね。省略できれば楽だなと思ったのですが。 {"名前":値}はあくまでオブジェクトの形式であって文字列や数値のみを返したいなら不要
ただし文字列は"あああ"や"abc"とする必要はある
https://www.json.org/json-ja.html ありがとうございます。おそらく
"abc", "あああ"
のようなカンマ区切りで大丈夫でしょうか。 単一の値でない場合は配列にすること
["abc", "あああ"]
有効なjson形式かどうかはJSON.parse()に食わせてみるといい
JSON.parse('"abc", "あああ"'); //NG
JSON.parse('["abc", "あああ"]'); //OK >>748
参考になりました。ありがとうございます。 >>743
各promise完了後に順次実行したい共通処理をmapしてthenでチェイン
Promise.all(promises.map(p=>p.then(log(“resolved”)))).then(log(“All finished”);
function log(message=“”) {
return (x) => {
console.log(`${message}: ${x}`);
return x;
}
} 趣味でWebサイトを使うのにJSを勉強しだしてまだ３年目なのですが、
なぜか年明けから会社のDX担当にされました。
今社内システムがIE9向けにActiveXが使われているのですが、Edgeに移行するので動くように直してと言われています。
これまで自分なりにいろいろ調べてきて、とりあえずHTML/CSSなどの見た目の部分と、大したことをしていないJSの部分は移行できたのですが、
肝心のActiveXであれこれやっているところを直すことができません。
期限は３月末までで苦しんでいます。
例えばこのような箇所があります。
var connection = new ActiveXObject("ADODB.Connection")
var recordset = new ActiveXObject("ADODB.Recordset")
var connectionString = "Provider=sqloledb;Data Source=〜〜〜
var query = "〜〜〜
connection.Open(connectionString)
recordset.Open(query, connection)
while (!recordset.EOF) {
var encryptedData = recordset.Fields("data").value
var decryptedData = decryptData(encryptedData, decryptionKey)
〜〜〜
recordset.MoveNext()
}
これをEdgeで代替手段で実装しようと思ったら、どのようなコードになりますか？
ライブラリやフレームワークは使ってはいけないことになっていますが、バレなさそうなものなら中に組み込むつもりです。
どうかよろしくお願いします。 代替手段なんてない
仕事振ったやつが何も分かってない
あれこれやってる内容をなにか別の技術で１から組み立てる必要あり
それかedgeのIEモードは検討出来ないの？ 今から実装してテストしてリリースしてその後の問い合わせ対応や運用に備えるのはスケジュール的に無理でしょ
3月末を死守する必要があるならIEモード1択
IEモードで時間稼ぎしてその間にサーバーサイドからDBアクセスする仕組みを作る
IEモードにするにしてもグループポリシーの変更・適用のテストや問い合わせ対応の準備を考えればそれでも時間が足りないくらい >>751のコードにぶち当たった時点でEdgeというかブラウザ単体で実現できないことには気がついて欲しいものだが
仮にも２年はJSを勉強していたと言うなら JSONでダミー値をコメントのつもりで使ってたらエスケープできてない\でパースエラーになるデータができたりして使うのが怖くなった
やっぱコメントぐらいは定義必要だったなこれ
人間が手書きするものじゃないとしてもよく普及したもんだ >>751
そういうのってEdgeのIEモードに移行して終わりでしょ
周囲も期間的にその程度しか期待してないと思うけど ど素人だとIEモードが何なのかで3月は潰れるかもしれんけど一応
基本的には社内のADサーバでGPO管理してる奴にEdgeのIEモードのサイトリストに追加してもらう
これは君の担当以外にもIEモードのサイトは糞の山程あって既知の対応だからおそらく追加を依頼するだけでいいはず
うまくすればそれだけで作業が終わる可能性もある >>755
コメントの書式があったって書式から逸脱する文字列を入れてパースエラー出す未来しか見えんわ。 たぶんIEを前提とした目の前にあるコードを読み解いて作り直すより設計書用意したほうが早い
あるいはAIと二人三脚 みなさまありがとうございます
IEモードは１，２度調べて、いつまでこのモードがあるか分からないからと止めたのですが、
やはり時間稼ぎも考えるとこれしかなさそうです。
その間に根本的な解決策を探したいと思います。
なぜか年明けから会社のDX担当にされました。
と言いましたが、実はそれは嘘です。
年末にかけて社員が半分以上辞めて、残った人の中で一番詳しそうだったのが僕だったのです。
実は、サーバーサイドをいじらないといけないのだということは、薄々気づいていました。
でも、今動き続けているサーバーを触れる人が誰もいないのです。
僕も、SQLというものがある、という程度の知識しかないので、触る気にもなりません。
とりあえず夏のボーナスまで引っ張って、無理そうだったら自分も転職します。
今動いているものをうっかり壊したら、止められなくなりそうなので慎重にがんばります。
ありがとうございました。 >>755
怖いも何もパーサーがきっちり仕事してる証拠じゃないの？
コメントを書きたいって需要に対してはJSON5やJSONCって派生規格があるから
それらを検討するべき 何が理由かは置いといて技術を含めた社員がごっそり半数も辞めてる状況だとその会社から賞与もまともには出ないだろう
Edgeへの移行時期としてもかなり遅れてるし有給消化しつつ転職活動に専念した方がいいね >>761
規格はあれど既存の環境に適用できるものではないのがな
JSONとして扱う前にJSONCとしてコメント抜く前処理でも通すか >>763
パーサーにケチつけてるよりはその方が建設的でしょうよ >>738
VSCode の拡張機能では、
open in browser では、ローカルファイルアクセスになる。
この場合、CORS など、ブラウザの色々な制限がある
file:///C:/Users/Owner/Documents/test/index.html
一方、Live Server では、
自分のPC 内にサーバーを立ててから、そこから配信されるので、テストしやすい
http://127.0.0.1:5500/test/index.html
>>751
そういうのは、Excel, VBA, Access とかじゃないの？
ベンチャー企業やプロのバックエンドは、Ruby on Rails だけど >>743
Promise.all/allSettled とか？ chromeの拡張機能で、「ngWord.json」内のデータを「background.js」経由で「content_script.js」に格納しようとしていたのですが、上手くいきません。コードでおかしな点等あれば、ご教授頂けないでしょうか。
【background.js】
fetch('ngWord.json')
.then(response => response.json())
.then(data => {
// content_script.jsにデータを送信
chrome.runtime.sendMessage({ngWords: data});
});
【content_script.js】
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.ngWords) {
const ngWords = message.ngWords;
console.log(ngWords); // 受信したデータを表示
}
}); >>767
バックグラウンドからタブに送信するならchrome.tabs.sendMessageじゃないかな？ >>768
「タブ」というのは、「content_script.js」のことでしょうか？
だとすると「chrome.tabs.sendMessage(tabId: content_script.js, ngWords: data)のように書く感じでしょうか。 雑な方法としてはアクティブなタブに送ればいいんちゃう？ >>769
そうです。background から content_script に送信する場合はchrome.tabs.sndMessage だったと思いますよ
chrome.tabs.query({active:true,(tabs)=>{
chrome.tabs.sndMessage(tabs[0].id,{
ngWordsg:data
})
}})
というような感じで 最初にコンテンツスクリプト側から何かメッセージ送れば
バックグラウンド側のchrome.runtime.onmessage.addListenerのsender.tab.idでタブID取れるっしょ それならtab.id必要なくてsendResponseで返せるんじゃないかな？ 【background.js】
fetch('ngWord.json')
.then(response => response.json())
.then(data => {
chrome.tabs.query({active:true,(tabs)=>{
chrome.tabs.sendMessage(tabs[0].id,{ngWords:data})
});
};
【content_script.js】
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.ngWords) {
const ngWords = message.ngWords;
console.log(ngWords);
}
});
このように修正しましたが、上手く取得できないようです。 そもそもngWord.jsonの中身とれてますか？ローカルファイルならweb_accessible_resources書いてchrome.extension.getURLで取るんじゃないでしょうか？ もしかしてスクリプト本当にそれだけなの？
だとしたらcontent_script.js実行される前にbackground.js終わってそう 申し訳ありません、私の知識不足で、よく分かりません。もう一度格闘して、改めて質問させて頂きます。ご教授下さり、ありがとうございます。 >>777
めっちゃ適当なこと言ってましたわ
web_accessible_resourcesとchrome.extention.getURLは関係ないっぽいです
まずcontent_scriptが実行されるタイミングでbackgroundからタブにデータを送れるはずなくて
かといってcontent _scriptからメッセージ送ってbackgroundでfetchしたデータを送ろうとしてもセキュリティー的になのか送れない
なのでbackgroundでfetchしたjsonをchrome.storage.local.setで保存してcontent _scriptからchrome.storage.local.getで読み込むが正解っぽいです
暇だったんで... 漏れはプロジェクトを作って、index.ts に、TypeScript で以下を書いて、
npm/yarn, webpack, babel でビルドすれば、
import で、JSON ファイルやLodash も読み込めるけど
import WordData from "./word_data_tmp.json";
console.log( WordData.length )
const ary = [ ...Array( 5 ).keys( ) ]
// => [0, 1, ....,4]
import shuffle from 'lodash.shuffle';
console.log( shuffle( ary ) );
// => シャッフルされる Next.jsでAPI Routesを使わないのは一般的でしょうか？ 「一般的」のような主観的なものてはなく、客観的な定義が必要なのでは プロミスって何？
あとfetchってasync、await使うのと.then使うのでどっちがいいの？ >>782
普通に調べれば出てきますよ
調べても調べてもよくわからんって質問をどうぞ メイン画面でボタンをクリックすると
別ウィンドウが起動し、ニュースサイトを表示するプログラムを組んでいます。
別ウィンドウが起動した時に
そのウィンドウが閉じられたのか、開かれたままであるのかを
メイン画面で判定するにはどういうコードを書けばよいでしょうか？
別ウィンドウでサイトが開かれている間は
１、２、３・・・とカウントし、閉じられると０を
メイン画面にjQueryでレンダリングしようとしています。 >>787
ありがとうございます。
ちょっと試してみます。 先日（1週間くらい前）まで動いていたジャバスクリプトが動かなくなった。
ブラウザの不具合を疑って firefox、edge、さらに ie11 まで持ち出したらどれも動かない。
ウインドウズのセキュリティの締め上げかなと思って
スマホ（アンドロイド）で確認したがこっちも動いていない。
押し入れから昔のアイポッドタッチ(iOS9)を持ち出したが、やっぱ動かない。
こんなことってある？
アイポッドタッチなんてスクリプトが動いていたころとなに一つ変わっていないのに
なんでこの前は動いたのに今日は動かないんだ？
1年前のバックアップと差分比較してファイルが壊れていないことは確認した。
ちなみに自分がジャバスクリプトを作成するにあたって参考にしたスクリプトは
いまも普通に動いている。 エラーも出てないのか？
まったく反応してないのならｈｔｍｌで読んでないんじゃね？ >>789
ブラウザの不具合疑う前に
エラーログ出て無いか確認しろ
エラーログすら出てないならHTML側でちゃんと呼び出せてるか確認しろ >>792
エラーログを見たらあっさり解決しました。
夜更けに一人で大騒ぎしてごめんなさい orz
いまブラウザの開発者ツールでジャバスクリプトのエラーが見られるんだね。
びっくりした。
原因はHTMLの削除した部分にスクリプトで動かす部分があって
動かすべきものがないから次の処理に行けずエラーになっていました。
スクリプトばかり見ていてHTMLは盲点でした・・・。 まあそういうオチだろうなとは
アドバイスを求めるならhtmlを修正したことは伝えるようにしてほしいところ http://abehiroshi.la.coocan.jp/
この阿部さんのHPの左のフレームから「舞台出演」を取得したいんだけど、
const frame = await page.$('frame[name="left"]');
const contentFrame = await frame.contentFrame();
こんな感じでcontentFrameを取得するところまでは上手く行くんだけど、
const aElement = await contentFrame.$('body table.today tr:nth-child(8) td:nth-child(3) p a');
次の要素を取得する段階になるとnullになってしいます
どうすれば阿部さんの舞台出演を取得できますか？ >>798
.todayなんてclass付いてないぞい そもそもnullを取得してるってことは所望のオブジェクトが取得できていないってことよん？ >>798
それ、ChromeのDevツールとかで、Elementの検索にセレクター入力してちゃんとヒットする？ ['apple', 'パイナップル', 'pineapple (パイナップル)', 'りんご', 'pineapple']
を
['apple', 'パイナップル | pineapple', 'りんご']
に別名ふくめて重複削除して整形したいんですがスマートな方法ないですか >>803
パイナップルの表記方法はどういう仕様なの？
スマートじゃない方法で実装できてるならそれを貼ってみたら？ >>804
別名がカッコで後ろに付く場合があったりなかったりをまとめたいんです
今は文字列に取り出して正規表現で割ってまた戻して～って頭悪くやってます >>805
元の配列には、同じ値が複数、たとえば 'りんご' が何個も入ることがある？
ただ何にしても、現状がどの程度頭悪いのか分からんけどそこそこ泥臭くなるんじゃないかなぁ >>807
ちょっと面白そうだったので作ってみたけど、あんまりいい出来にはならなかった。
わざわざ見せるようなものじゃないんだけど、一応貼っとく。
アプローチとしては、単品アイテムまたは別名で括られた同一アイテム毎に配列実体を持たせて、重複排除しながらその実体に放り込んで最後に文字列化する。
複数の別名定義で 2つ以上の名前を括ったり、名前の登場順で連結するようにした。
https://i.imgur.com/tY8Yg78.gif あわわ、26-32行目は整理できた
const new-content = [];
alias_ref[item] = alias_content.length; JavaScriptでタイマー処理をしています。
指定した秒数（ここでは１０秒）経過したらタイマーを停止する様にしていますが
タイマーが止まりません。助けてください、、、
$(document).ready(function(){
$("#id_div_test").click(function () {
setInterval(TestFunction , 1000);
});
});
var i_current_second = -1;
function TestFunction()
{
i_current_second++;
if( i_current_second == 10)
{
clearInterval(TestFunction);
}
} clearIntervalの引数に入れるのはsetIntervalから帰ってくるnumber
型エラーでハマるのアホらしいしts使うか無理なら//@ts-checkをファイルの先頭に書いとけ >>812
わかりません。。。どう書けば良いでしょうか？ >>810
こういうのはそのまんまChatGPTに聞けばヒントなり、回答、修正案なんかも返してくれ
る。
----
この問題は、`clearInterval`に渡す引数が誤っているために発生しています。`setInterval`に渡したのは `TestFunction`関数ですが、`clearInterval`に渡すのは `setInterval`が返すタイマーIDです。このタイマーIDは `setInterval`を呼び出すと返されます。
以下は修正されたコード例です。
$(document).ready(function(){
$("#id_div_test").click(function () {
var timerId = setInterval(TestFunction , 1000);
// タイマーIDを保持するために変数に代入する
});
});
var i_current_second = -1;
function TestFunction()
{
i_current_second++;
if( i_current_second == 10)
{
clearInterval(timerId); // 正しいタイマーIDを渡す
}
}
ここでは、`timerId`変数を`setInterval`の戻り値として宣言し、`clearInterval`に渡すようにしました。これにより、タイマーが正常に停止するはずです。 >>815
setIntetval してるスコープの timerId を clearInterval するスコープから参照できる？ エラーが出たらまた聞けば直してくれる
あとほ聞き方の問題だね >>815
え？そんな事までChatGPTできるの？？？すごくね？？
どんなシステムになってんだろ。 条件によってスクリプトを途中で止めさせたいんだけど三項演算子じゃreturnするしないを分けるのは無理？
if exitFlag return false >>820
多分無理だと思うけど、なんで if じゃいけないの？ >>821
三項演算子の中で使ってるからなんか気持ち悪い f = (flag) => flag ? false : true;
console.log(f(true));
console.log(f(false)); >>819
ChatGPTをプログラム用途で使ったこと無いなら一度つかってみると良いよ。
ググる手間がかなり少なくなる
もちろん、間違い返答の可能性もあるからそこら辺はうまく扱う必要があるけどね。
あとGitHub Copilotはもっとヤバいよ。プログラマーなら一度は使うべき OSS のソース読むときにも ChatGPT は便利だよ。
内部関数名とか聞いても何するものか教えてくれる。
この間 OpenSSL のソース読んでて助けられた。
暗号のコードなんて読んでもよくわからないしw >>824
GitHub Copilot
そんなのもあるんですね。 ChatGPTでsqlでハマった点を質問してみたんだけど
ヤバイな。一瞬で分かり易く解説してくれた。
どんなプログラムを組んでるんだ。凄すぎる。 javascriptでctrl+Wでブラウザタブが落ちるのを無効にする方法はありますか？ 最近勉強してvarの何でもありな傍若無人さに気が付いた
例えば関数実行後に初期化してもホイスティングで勝手にundefiedが代入されるからエラーにならず混乱の素、
ブロックスコープ内で使うとその生成を無視するから混乱の素
なのでプロなのにES6以降の環境で未だにvar使ってる人って新人にも劣ると思った
ES6以降でEcmaから非推奨と言われてるのに未だにvar使わなければいけない理由ってある？
今後var使ってる人見たら問答無用で勉強しない人と判断しても良い？ >>831
>例えば関数実行後に初期化してもホイスティングで勝手にundefiedが代入される
これいろいろ間違ってる
>未だにvar使わなければいけない理由ってある？
REPLで繰り返しコードブロックを実行したい場合なんかにvar使う
あとはブラウザ以外の環境でES3しか動かない環境とかね
>今後var使ってる人見たら問答無用で勉強しない人と判断しても良い？
良いと思うけど君もそっち側に片足突っ込んでるから気をつけて スコープの基本だね
レキシカルなのかパラメーターなのか
DOMをいじるとみんな参照になるし変数大切ね 匿名イベントを削除する方法って無い？
ググりまくっても全く見当たらんから仕方ないのでElement.prototype.addEventListenerフックしてフィルタしてるんだけど非常に遠回りな事してる気がしてならない >>835
イベントリスナーへの参照を保持してないと
removeEventListenerは使えない
あとはAbortSignalを使う方法がある
MDNのaddEventListener辺りに全部書いてる くそ素人で申し訳ない
ブックマークレットでCookieを編集する時に有効期限も同時に編集したいのだけれど
どうしたらいいのだろうか
元々は
javascript:document.cookie=%22ipb_member_id=〇〇%22;document.cookie=%22ipb_pass_hash=〇〇%22;
って感じなのだけれど1日くらいしたらすぐ消えてしまう >>837
そいつは有効期限も一緒に設定しなきゃならんな。
javascript:(function(){
var date = new Date();
date.setDate(date.getDate() + 30); // 30日後に設定
document.cookie = "ipb_member_id=〇〇; expires=" + date.toUTCString() + "; path=/";
document.cookie = "ipb_pass_hash=〇〇; expires=" + date.toUTCString() + "; path=/";
})();
こんな感じでやってみ。
これでipb_member_idとipb_pass_hashが
30日間有効になるぜ。
ただし、ブラウザの設定やCookieの設定によってはJavaScriptから触れないこともあるから、
その辺は自己責任でな。 documentのinnerHTMLやtextContentの書き換えをしたとき、ブラウザのDOMの計算（？）や再描画（？）は変更があった部分のみか、ページ全体で行われるののどちらでしょうか？ CookieってPHPみたいなサーバーサイドから設定するのとJSから設定するのどっちが良いんかね？
同僚から受け継いだシステムはPHPでやってたが HttpOnlyの存在考えるとサーバーサイド一択じゃね？ ステートレスな通信を補助するものだから、処理の起点側でつけると良い
ただ、一般的にはサーバサイドになると思うよ if ((a == b && c != d) || (e == f && g != h)){
alert ("正解");
}
こういうコードの書き方は出来ますか？
二重括弧の使い方は正しいでしょうか？ ちょっと調べてたんですが、こうでしょうか？
if (((a == b) && (c != d)) || ((e == f) && (g != h))){
alert ("正解");
}
「a == bとc != dの条件が両方ともtrue」か「e == fとg != hの条件が両方ともtrue」なら"正解"と警告を表示したいのですが…
三重括弧なんてあります？ 演算子優先度の理解が追い付いて無いなら好きなだけ括弧使えばいい 何重カッコでもいけるけど演算子やカッコが増えると可読性が落ちて条件式を読み解くのが辛くなる
コードは長くなっても条件式をいくつかに分割して変数に入れた方が読みやすくなるよ
const x = (a == b) && (c != d)
const y = (e == f) && (g != h)
if(x || y){
alert ("正解");
}
とか 皆さん、ありがとうございます
変数に入れるのがいいですね
やってみます イテレータ、Map、Setがややこしくて😩なんだけど実務で使う？
一応理解したけどカスタムイテレータ作ってそれをオブジェクトに追加してfor...ofなんて無理だな
プログラマーならバリバリ使うのかな？それとも知識として仕組み知っとくだけ？ Mapはキーと値の組み合わせのコレクション
Setは重複のない値のコレクション
どちらも実務で出番はある
イテレータは中身を1個ずつ取り出せるものの総称
カスタムイテレータに関してはmdnもおすすめのジェネレータ関数を覚えておけばいいかと
バリバリではないにしてもここぞというときに役に立つ tableタグのtrをjqueryかjavascriptでアニメーションアコーディオンがうまくアニメーションしないんだけど
slideToggleで開発ツールではheightの数字は変化しているんだけど・・
もしかしてtrにheightという概念が無いから？
<tr class=name><td>名前1</td></tr>
<tr class=detail><td>中身1</td></tr>
<tr class=name><td>名前2</td></tr>
<tr class=detail><td>中身2</td></tr>
・・・ 変数って定義する前はundefinedが入ってるんでしょうか？ >>854
変数定義前は変数がない
変数定義時に値を代入しなければundefinedで初期化される Promiseメソッドなんなの独自ルール多すぎでしょ。もはや別言語に感じる。これよく使用される？ Promise周りは最初は取っつきにくいけど、凄く使いやすく作られてるし、物凄くよく使うよ。 async awaitでしかfetchをかけない自分と、thenでしかfetchを書けない前任者のせめぎあい
xhrはなぜか知らんがもう時代じゃないらしいし 的外れな質問だったら申し訳ありません…
クラスAが長くなってしまったこと(1500行くらい）、類似クラスBとある程度共通化できそうな部分があったので関数Cとして
別ファイルに切りだそうと思いました。
その際、関数CからAの複数のメンバ変数/メソッド（Bも同じ名前の変数/メソッドを持っている）を利用したいのですが、
一つ一つ引数で渡していくと記述が煩雑だし、仕様も変わる可能性があります。
そこで、Aのインスタンスから関数Cにthisを引数として渡すようにして、関数Cからは仮引数this.メンバ変数 などのようにして自由にAのメンバにアクセスできるようにしました。
以上のやり方で、動作はしているようですが、なんか良くないやり方の様な気もしています。
上記のやり方は一般的な方法でしょうか。何かデメリットはありますでしょうか。 クラスAたBの同名の変数と関数をBaseクラスにしてAとBに継承すれば同名の変数関数を持ってることが保証できてうっかり名前変えてしまったとかのバグ防げるんじゃない？インターフェースみたいに
それから引数じゃなくてbind使えば関数C内でthisを自然な感じで使えるとか 有り難うございます。
デメリットとしては後でA~Cをいじった時にバグの温床になりやすいこと、くらいの認識で良いんですかね。
基底クラスを継承するかたちにすることも考えたいと思います。
確かにbind/callを使った方が、動作は同じでよりシンプルな気がしてきました。 is_a, has_a
継承か包含か、古典的な質問 javascript:
if((result = prompt("input formula string","")) == "") alert("no formula string"); else alert(eval(result)); (function(){
～
})();
こういう書き方をしてるコードがあったんですけど、これは実行も含めた関数の書き方でしょうか？
最初の(と最後の)()の意味がわかりません >>866
即時関数
()は関数宣言ではなく、関数式として実行するため >>867
ありがとうございます
よくわかりました なるべく自分で考えたキモイ名前は晒したくないからな？ 今ホームページを制作しているのですが教えて頂きたいです。
下記内容のコードの書き方がわかりません。
5枚の画像があるのですが、全部では無く一旦一枚目のみ表示させたいです。
次に各画像を説明する文字があります。その文字にマウスカーソルを合わせると、その文字にあった画像に2枚目3枚目と切り替わるようにしたいと思っています。
初心者すぎるので例としてコードを作って頂ければ見ながら調整したく思っています。
どなたかお教え頂けませんでしょうか。 よくある、スライダーでしょ？
jQuery でもあるでしょ
Bootstrap のCarousel (カルーセル)
https://getbootstrap.jp/docs/5.0/components/carousel/ なんか色々ルールがあるんですね
諦めて勉強します
ありがとうございます jQuery slider
Bootstrap Carousel などで検索すれば、一杯ある
一杯あるけど、難しいから自作する人はいない。
皆、jQueryUI やBootstrap のCarousel などの既製品を使う フォームフィールドが定義されたPDFファイルがすでにあって、ブラウザ上のJavascriptでWebフォームに入力されたテキストをPDF側のフィールドに反映させてダウンロードすることができるpdfライブラリってあまりすか？
使い方のイメージとしては、たとえばPDF上に名前を入力する箇所がいくつかあるけど、ユーザーは単にweb上で普通のinputフォームを入力してsubmitすると名前が入力済みのPDFファイルをダウンロードできる、という感じです。
pdfmake等いくつかライブラリは見たのですが、白紙ベースでPDF作る例しか見あたらなくて(テンプレートは画像背景で切り替え等)、直接PDFフォームを扱えるものは無いかなと。 プログラミング全く知らない状態からやっとJavaScript一通り学びました
かなり難しかったです。でもJavaScriptは比較的簡単な言語なんですよね？
ES6以降のJavaScriptでもやっぱり簡単なんですか？
それとES6で大規模アップデート合った時は絶望しましたか？
勉強していて苦しんだのがスコープ、this、反復処理の背景（iteratorの動き、yieldは何をしてるか）、非同期処理（Promise、then、async）、その他様々なメソッド、静的メソッド、、、
これら全てES6から導入されましたよね？絶望しませんでしたか？
例えば私がもしES5までのJavaScriptに慣れ親しんでいてES6のアップデートに触れたら絶対絶望してました。概要見ても「？？？？？」となってたはずです
プログラミングに向いてる人はこんな大規模アップデートがあるとワクワクする人なのでしょうか？
絶望せず、「何ができるようになったんだろう！凄い！こんな事やあんな事が出来る！」みたいな人も居ましたか？ ES5までは貧弱だったのでそりゃもう大歓喜よ。
それと現代のJavaScript（を使いこなすの）はもはや簡単な部類じゃないように思う。 苦しみとか絶望とか>>879は言語の習得を学校の勉強と同じようなものとしか捉えてないフシがある
日本史の勉強範囲が大政奉還までだと思ったら第二次大戦までだった！みたいな感覚
新しく覚えたことは実際のプログラミングで活かせるんだという意識が全く感じられない >>880
>>881
とにかく理解するのに必死で苦しみました。jJavaScriptが簡単とは全く思いませんでした try,catch,finally文の存在異議が分からなかったけど、今さっき急にasync/awaitのエラーハンドリングに向いてるのに気が付きました
つまりthen,catchのPromiseチェーンをより楽に書けるのに今さっき気が付きました。こんな感じで上手くいかないですね .then().catch()の方が綺麗に書けて（副作用的な意味で）好きだなぁ >>879
言語として簡単かっていうとどうだろうね。
Webブラウザがあれば動かせる上にデバッグ環境まで付いてるから、誰でもすぐ始められるし、作ったものをどこででも動かしてもらえるという手軽さはあると思うけど。 自分はプロトタイプ型オブジェクト指向から入ったから気にならないけどクラス型でプログラム書いてた人は違和感凄いんだろうな
あとクロスブラウザ対応しなきゃいけなかった人達もJSはしんどかったんだろうなと想像 rd41 = "";
alert (rd41);
これで「rd41は未定義です」ってエラーは出ますか？
alert(rd41);
これだけだと「rd41は未定義です」ってエラーが出ますよね
実際のコードはalertでは無いのですが、rd41に無を代入して何も表示させたくないのです
rd41 = null;
だと、nullと表示されてしまいます >>887
delete を調べてみるとどうだろう。
やりたいことによってはブロックスコープで足りるかも。
個人的にはブロックスコープを活用して、変数を小まめに狭い範囲に閉じ込める書き方をおすすめしたい。 >>887
>rd41 = "";
>alert (rd41);
>これで「rd41は未定義です」ってエラーは出ますか？
なんで試してみないの？ 時報みたいなのを作成中でそのhtmlのページさえ開いておけば
9時、12時、18時(プリセットとかは無く固定)に特定のwavサウンドファイルがaudioElement.play() で再生される用にしています
(タブが非アクティブだとなんか動かない時があったのでwindow.openで表示させてます)
chromeのポリシーみたいなのでユーザーが明示的なアクションをしないと音声の自動再生はされないみたいで
それの良い回避策ってありますか？
実用性考えると携帯のアラームが百倍使いやすいけど
自分用にチープなのを作って遊んでるんだけど解決策が思いつかなくて・・・ >>892
そういう質問はchatGTP得意や
聞いてみれば 【環境】Windows 11, Chrome最新版
【何をしたのか】PHPで動的に出力されたテキストに replace (new RegExp）
【エラーメッセージ】コンソールには何も出ません
【期待する結果】ページ内に複数生成される動的クラス内テキストを置換したい
【サンプルコード】
<p class="tx-body">おはようございます*2023.08.15</p><span clas="tx-date">0000</span>
<p class="tx-body">ごきげんよう*2023.08.20</p><span clas="tx-date">0000</span>
・
・
tx-dateクラスの中身をtx-bodyの*以降の文字列に置き換えたく、以下を<body>の後半に書きましたが期待する置換変化が起きません、エラーも出ません、
根本的なところわかっていないのだと思うので恐縮ですがお手上げ状態です
window.addEventListener('load', function() {
const ItemList = document.getElementsByClassName("tx-body");
const ItemDate = document.getElementsByClassName("x-date");
for(i=0; i<ItemList.length; i++) {
var tBody = ItemList.item(i).textContent;
var tDate = ItemDate.item(i).textContent;
var replaceDate = tBody .split("*")[1];
tDate = tDate.replace(new RegExp(replaceDate,'g'),'');
}
})
以上ご指導よろしくおねがします >>894
まずconsole.log()や開発者ツールを使って自分の書いたコードがどこまで想定通りに動いてるか確認してみよう >>894
コードを見る限り、置換を行うためのコードは一見正しく見えますが、複数の潜在的な問題が考えられます。まず、コード内のいくつかのポイントをチェックしてみましょう。
1. **クラス名のスペル**: `tx-date` クラスが正しく `x-date` クラスになっているか確認してください。
2. **期待する置換変化の確認**: 期待する置換変化がどのようなものか確認してみてください。コード内で `tDate` の内容を `console.log()` を使って出力し、実際の値が正しいか確認できます。
3. **変数 `replaceDate` の設定**: `tBody.split("*")[1]` の部分で、正しい位置に `*` が存在しているか確認してください。`split()` メソッドは対象の文字列を指定の文字で区切って配列にしますが、もし `*` が存在しない場合、期待通りの結果が得られない可能性があります。
4. **置換操作の適用**: `tDate` に対して行った置換操作が、実際のDOM要素に反映されていない可能性があります。`tDate` の内容を変更した後、対応するDOM要素の内容を更新するコードが不足しているようです。
これらのチェックポイントを確認した上で、コードを修正するか、デバッグすることをお勧めします。また、具体的なサンプルHTMLコードや置換の例を提供していただければ、より具体的なアドバイスを提供できるかもしれません。 このﾜｯﾁｮｲ **4bは質問スレにchatGPTの回答貼るだけのボットみたいなもんだからスルー推奨
NG入れといてもいい 2か所とも、clas="tx-date" になっている！
class でしょ >const ItemDate = document.getElementsByClassName("x-date");
x-date は、tx-date じゃないの？ 一旦、要素 tDate_elem を取得しておいてから、
その textContent に値を設定する。
つまり更新
const tBody = ItemList.item(i).textContent;
const tDate_elem = ItemDate.item(i) // 要素
const tDate = tDate_elem.textContent;
console.log( tDate ); //=> 0000
const replaceDate = tBody.split("*")[1];
console.log( replaceDate ); //=> 2023.08.15
tDate_elem.textContent = replaceDate; // 設定
表示
おはようございます*2023.08.15
2023.08.15
ごきげんよう*2023.08.20
2023.08.20 >>900
それはもう質問に答えたというよりデバッグと修正を代行したのであってこのスレの主旨には合わない
おそらく他の人もそういう認識だからこの件に口を出さないんだと思うよ jQuery なら、もっと簡単
$( function ( ) {
$('.tx-body').each(function (index, elem) {
const tx_body = $(elem);
console.log(index + ': ' + tx_body.text());
const replaceDate = tx_body.text().split("*")[1];
console.log(replaceDate);
// tx_body 要素の次の兄弟で、tx-date クラスがある要素。絞り込み
const tx_date = tx_body.next('.tx-date');
console.log(index + ': ' + tx_date.text());
console.log('tx_date.length: ' + tx_date.length); // 0 or 1
// 該当する要素があれば設定する。つまり更新
if (tx_date.length === 1) {
tx_date.text(replaceDate);
}
});
} ); chrome拡張どう作ったらいいのでしょう？
こんな感じではリダイレクトが連続してしまってだめでした
urlsのフィルターの仕方、もしくはリダイレクトをせずにそのURLにアクセスする方法が分かれば解決できるとは思うのですが・・・
//aaa.com/xxxx/ へのアクセスを aaa.com/abc/xxx/ へ変換したい (以下は動作しない)
chrome.webRequest.onBeforeRequest.addListener(
function(details)
{
if (details.url.match(/abc/))
{
return {}; //←ここを書き換える方法が分かればいける
}
else
{
details.url = details.url.replace(/aaa.com/g,"aaa.com/abc");
return {redirectUrl: details.url };
}
},
{
urls: [ "*://aaa.com/*/" ], //←ここを書き換える方法が分かればいける
},
["blocking"]
); そこ見てどうすればいいのか分からないからここに来た・・・ return detail.documentUrl
とか？ return detail.documentUrl;
return {redirectUrl: detail.documentUrl};
どちらもダメ。リダイレクトのURLを返すことになるから、リダイレクトの無限ループに入っちゃう
それなら、リダイレクト止めればいいじゃんって思うんだけど
return {cancel: true};
のようにするとナビゲーション自体が止まってアクセスできなくなっちゃう 無限ループしてるって事は条件分岐失敗してるんじゃないの？
console.logデバッグでもしてみたら？ >>903
リダイレクト後のurlに?foo=barとかクエリ文字列付けてみるとかは？
これでフィルタにかからなくなるみたい
もちろんこれでサーバが誤動作起こさないのが前提だけど サイト内にフォームが設置してあるページが複数あります
お問い合わせ、新規登録、ログイン、パスワードリマインド、などです
一時的に inputタグを入力不可にしたのですが
querySelectorAll("input,button").forEach( e => e.disabled = true );
複数あるページのうちお問合せだけは入力できるように、
現在は下記の効率の悪い記述になっています、、
document.querySelectorAll("#contact input, #contact button").forEach( e => e.disabled = false);
それぞれのページの<body>に idを付与していてそれで判別しているのですが
<body id="contact">
<body id="login">
<body id="remainder">
もっとスマートにお問い合わせページだけ入力できる
ヒントをお願いできませんでしょうか？ 【環境】windows10 chrome 最新版
【何をしたのか】開発ツールコンソール上でサンプルコードを実行すると
条件文が undefined にもかかわらず if 文内 console.log(1) が実行される
【エラーメッセージ】なし
【期待する結果】 なぜこうなるのか理由が知りたいです
【サンプルコード】
console.log(localStorage && (localStorage.getItem('deck')));
if(localStorage && (localStorage.getItem('deck'))) console.log(1)
if(undefined) console.log(2) >>912
console.log(localStorage && (localStorage.getItem('deck')));
の結果は本当にundefined？、undefinedの上の行に何か表示されてるよね？ >>911
下記セレクタでイケるはず（問い合わせページ以外でinput要素とbutton要素を抽出）
body:not(#contact) :is(input, button) >>912
下記のログ出力はどうなる？
console.log(localStorage.getItem('deck') !== undefined ? 'バカめ!!よく確認しろ!!' : 'undefined です'); >>913
コンソール出力結果は
undefined
1
undefined
です
>>915
バカめ!!よく確認しろ!!
undefined
になります getItemは該当キーに対する値がなければundefinedではなくnullを返すのでlocalStorageが存在していれば
console.log(localStorage && (localStorage.getItem('deck')));は
null
undefined
と出力される
undefinedの上が空行になってるならdeckに対する値が入ってる
それが空文字ならfalsyなのでconsole.log(1)は実行されない
truthyな不可視文字(例えば改行コード)が入っていればconsole.log(1)も実行される
inspectやencodeURIで中身に何が入ってるか確かめればはっきりさる あー わかりました
"undefined" っていう文字列がすでに入っちゃってたみたいです
丁寧に回答いただいてありがとうございました！ ウキキ🐒
input セレクタで解決しましたカッコイイ記述ありがとうございます >【何をしたのか】開発ツールコンソール上でサンプルコードを実行すると
>条件文が undefined にもかかわらず if 文内 console.log(1) が実行される
不可解な挙動に遭遇したとき、自分が何か勘違いしてないかまずそこを疑ってみようという教訓
あとtruthyやfalsyな値の取り扱いは慎重に if(rd41.value){
dofn()
}
これが正しく実行されないのですが（暴走するというか、意味不明な実行結果が現れます）、if文の中で関数の呼び出しは出来ないのでしょうか？
もしそうなら、このコードを正しく動作するように書き換えることは出来ますか？ 質問です
下記のURLは音楽サイトJangoの再生ページURLです
https://www.jango.com/stations/400536192/tunein
https://www.jango.com/stations/397649609/tunein
https://www.jango.com/stations/272072365/tunein
これらのページをブラウザで開いた時に出てくる水色のメッセージ
パネルをJavaScriptで閉じる方法を教えてください
Jango plays unlimited music for free and with no commercials.
というメッセージの右隣にある[×]マークをクリックしたいのですが
document.getElementsByClassName("MuiAlert-action")[0].click()
では上手くクリックすることができませんでした document.querySelectorAll(“.MuiDialog-container,.MuiBackdrop-root”).forEach(e => e.remove()) >>926
早速ありがとうございます
ただ、注意深くコピペして実行させたのですが
残念ながらメッセージパネルは閉じられませんでした document.querySelector(".MuiSnackbar-anchorOriginTopCenter").remove() ブラウザ上の全然関係ない場所をクリックして自己解決しました
document.elementFromPoint(1, 1).click()
根本的な問題から逃げたようで悔しいですけどｗ >>925
誰一人解決できなかったのか？
すまん、俺もわからんｗ 名前付き引数としてプロパティをもつオブジェクトを引数にする場合のJSDocの書き方ってどう書くのが正しいのでしょうか？
ネットで調べて以下の画像のように書くと、VSCodeで関数の説明で表示される時にプロパティ側の日本後説明部分が表示されません。
http://imgur.com/xhSQcMc.png
構文のほうには型は反映されてるので読み込めてはいるようなのですが… source = ['いぬ=ドッグ', 'ぬこ=猫咪', 'キャット=にゃんこ', 'ねこ=キャット', 'わんこ=小狗', '老鼠=ねずみ', '小狗=ドッグ', 'マウス=ねずみ', '猫咪=キャット']
これを
result = [['いぬ', 'ドッグ', 'わんこ', '小狗'],
['ぬこ', '猫咪', 'キャット', 'にゃんこ', 'ねこ'],
['老鼠', 'ねずみ', 'マウス']]
これに集計するにはどうしたらいいですか canvasでarc関数でx:100,y:100の位置に青で塗りつぶした半径3の円を描いたんですが
これと同じ位置に同じ半径で同じ色で塗りつぶした円を描くと四角形ぽくなってちょっと大きくなって表示されます。
背景を塗りつぶして１回目に描いた円を一度消去してから２回目の円を描いても同じでした。
文字の場合でも同じ位置に同じ文字を重ね書きすると太くなっちゃいました。
どうすればちゃんと同じ位置に同じ物を描いても太くならないようにできますか？ >>933
競技プログラミングのスレで聞いて！
これは、UnionFind で、3つの木になる
UnionFind は、プログラミング・コンテスト・チャレンジブック(蟻本)に載っている alertのテキストをコピペする方法とかってご存知ありませんか？
どなたか知恵をお貸しください >>939
alertのテキストをコピーするには、通常はウェブページ上でalertが表示されている状態で、テキストを選択して右クリックし、"Copy"や"コピー"を選択する方法があります。ただし、ウェブサイトのalertはJavaScriptで生成されるもので、そのテキストを直接コピーする方法は制限されていることがあります。可能であれば、そのテキストを手入力でコピーすることができます。 検索すれば？
コピーを防ぐ方法は、幾つかある
ブラウザのF12 ボタンの開発者ツールで調べるとか >>936
亀だけど
fill()が複数回呼ばれると円が太るみたい
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.fill();
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.fill();
でなく、
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.fill();
でやると円が太らなかったよ console.log()のlogってどういう意味ですか？
printとかputじゃなくてlogで出力って珍しいですね consoleオブジェクトのログ情報を出力するためのlogメソッド… …どこまで信じたらいいの？
>>947
ありがとうございます const arr =Array(3).fill([]);
arr[1].push(0);
console.log(arr);
この場合arrは[[], [0],[]]になっていることを期待するのですが実際には[[0], [0], [0]]となっています
まったく納得いかないのですがなぜですか >>953
fillがそういう仕様なんですね
納得です
ありがとうございました 変数宣言の際に、letよりconstを積極的に使うべき、とされているのはなぜでしょうか？
後で値を変えられるletの方が便利だと思うのですが JSにかかわらず変数は使ってる道中に値変換したり変数使いまわしてるとエラーの種になりやすいし、それを防止するのが大きいかな
配列やオブジェクトの値はconstでも変えられるし
昔はそういうごちゃごちゃ動く変数のトレースするのもプログラム組むやつの能力ってされてたなぁ コードを上から読んでいく時にconstだとこの値は後から変わることがないと決めつけて読むことができる
letだとどこかで書き換えられるのに注意しながら読まないといけない 可読性の部分が大きいよね
varで変数定義しているクソコードなんかリファクタリングしたくないだろ？ constで最初から定義した後にそれが動的な値だった場合タイプエラーを起こしてからletに書き換える事はあるけど最初からletで定義しちゃうと後々constに書き換えた場合もしそれが動的な値ならプログラムそのものが動かなくなって新たなるバグを生むでしょう？
最初は縛りを強くしておいて後から緩めるはあるけど逆はないですよ 条件によって const の値を変えられるようになるといいんだけどな。
簡単なのなら参考演算子でやれるけど。 >>961
よくわからないけどそれってconst使う意味あるの？ 察するに初期代入時に場合によって違う値を入れたいということだろう
三項演算子を出してるし 答えてくれた方々ありがとうございました
積極的にconstを使っていきたいと思います >>962
うまい例になってるかわからないけど、何かのプロパティに値が入ってたらそれ、無ければデフォルト値を const に入れたいとか、この条件がもっと複雑になった感じとか。
あるいは、何かの基準座標を const に入れたいけどその値は一発では求まらないとか。
単にこれだけなら中間的な変数を使って値を求めて、最後に const に代入するって手もあるだろうけど、中間的な変数はスコープから追い出したいのにできないよね。
const x;
{
let a, b, c;
:
x = a + b * c;
}
みたいにできれば a b c はスコープから追い出せるけど、実際は
let a, b, c;
:
const x = a + b * c;
ってやらざるを得なくて、x が存在するスコープから a b c を追い出せない。
この計算を function に切り出せよと言うかもしれないけど、できればそうすりゃいいけどどこにでも適用できるというわけでもない。 調べてみると苦肉の策で↓みたいな書き方が紹介されてたけど可読性考えるとどうだろうね
const x = (() => {
let a, b, c;
:
return a + b * c;
})(); 欲しいのはただのブロックなのに関数として書かなければならないというのが余計なことをやらされている感はある。 >>966
処理の結果として複数の const、例えば x y を求めたい時は、その書き方でも難があるよね >>970
その場合はタプルで受け取るようにすれば問題ないよ
const [x, y] = (() => {
let a, b, c;
:
return [a + b * c, a * b + c];
})(); >>971
ああ、それが現状の最適解な気がするね。
後で汎用関数化したくなっても対応しやすいし。
まあ >>968 みたいな感覚はあるし、関数としてのコストも気になっちゃうけど。 const num = 1;
とした時、numはCやJavaのint型と違って、1という値のオブジェクトを参照している
という理解でよろしいでしょうか？
(numという名前でラベリングされたメモリ領域には、1そのものではなく
数値オブジェクトへの参照値が入っている？) >>973
1 はプリミティブ値。
Object型ではない。 >>974
レスありがとうございます
分かりました
文字列('Hello World'など)もプリミティブなんですよね
どうやって内部で実装されてるんですか？ >>973
実装的には全て参照扱いだよ
ただし数値の場合は参照(ポインタ)そのものに数値を埋め込むという方法
だから全て参照だけどメモリは消費しないというハック >>975
質問が大雑把過ぎる
もっと具体的に詳しく 返信くれた方々、ありがとうございます
>>976
TOEICのスコア400点台だったので厳しいです…
>>977
参照扱いでもプリミティブ型って言うんですか？
Javaではintやdoubleなど参照を用いずにデータを記憶する型をプリミティブ型と
呼んでいたので、少し混乱しています…
>>978
すみません、以後気を付けます >>977は気にしなくていいよ
英語苦手でもプリミティブには7つの型がある、ぐらいは読めるだろう
あと日本語のページがないか調べるぐらいはしよう
https://developer.mozilla.org/ja/docs/Glossary/Primitive >>979
そもそもそんなことを気にしてどうするの？
何がしたくての質問？
ぶっちゃけ表向き気にするべきなのは、その変数 a を別の変数 b に代入して、b を操作したら a まで同じように変わるのかどうかだけだと思うよ。 >>980
分かりました
ありがとうございます
>>981
レスありがとうございます
うーん、まあこだわりとでも言いましょうか…
個人的にはそこまで知っておくことは無駄ではないと思います >>975の質問なんかは明らかに自分のスキルや理解力に不相応なことを知ろうとしてない？
それを知ろうとするのはもっと力を付けてからがいいと思う >>982
実装を知る以前に仕様は理解してる？
「仕様書のここをどうやって実装しているか、を知りたい」なら誰かしら答えるかもしれないが、そのようなレベルにも見えない
仕様を理解せずして、実装を理解するのは無理 >>984
乗っかって補足すると、同じ仕様の実装なんて何通りもあるのよね。
そこであえて実装を知りたいというなら、その理由も書く方が間違いないよね。 レスありがとうございます
遅くなってすいません
>>983
そうですよね
まあ単純に、文字列である以上、変数用に確保したメモリ領域内に簡単には収まらない
だろうなと推測したんです
でも不変な値なら参照使わなくても収まるのかな
>>984
微妙です
入門書を読んで間もないレベルです
>>985
分かりました
まあ実装って言い回しが大仰でした
参照を使ってあるかどうかを特に知りたかったんです そのレベルを気にする人はもうフレームワーク作るレベルだろう >>982
あ、ややこしい書き方してすまん
単にuint64_tが値の参照でオブジェクトの場合はポインタが入ってて
整数の場合はそのまま使ってると言うことを言いたかっただけ
typedef uint64_t JsValue;
JsValueが「値」を指す参照
JsValue obj = createObject(); // Object
JsValue smi = createSmi(); // Small Integer
こうすることでオブジェクトも数値も同じように扱える
V8もJSCも全部これ レスありがとうございます
>>987
そうなんですかね
>>988
内容がハイレベルですね >>986
入門書を読んで間もないレベルなら、口が避けても「仕様を理解した」とは言えない
実装を覚えるのは仕様書を読めるようになった後だろう
https://262.ecma-international.org/14.0/ 素人な質問で申し訳有りません。
下記のスクリプトで何故か関数丸々出力されてしまうのです。
テキストでは改行が多すぎる為、投稿出来ないため画像で申し訳有りません。
下のグレーのフォントが出力結果です。
出力指定していないので、何も出力されないはずなのですが…。
https://i.imgur.com/tJnx1oK.jpg >>991
画像でコート見るのはしんどいので、>>2のサイト使って現象が再現するコードを掲示してほしい >>991
どうでもいいけど関数名の付け方にセンスないな
コメントもつける意味がないゴミ
変換ならconvertとかにすりゃいいのに… /や:が入ってるのを明示してるのはコメントとして意味があるだろう classのインスタンスで#プライベートメソッドにアクセスする方法ってないんでしょうか？ >>992
サイトの使い方がいまいち分からず試してましたが、サイトでは症状が再現できず想定通りの挙動でした。これは作ってるアプリ側に原因があるのでしょうかね。
mementoというdbアプリだったのですが。
>>993
自覚はあります。プログラムに興味を持ち練習はじめなので勘弁してやってください。思いつかないんですorz >>998
>>991を実行してる環境について書いてくれないと
コードで見えてる部分以外については知りようがないんだから
あと関数名を思いつかないならAIに候補を挙げさせるのはアリ
続きが必要なら次スレにどうぞ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 495日 8時間 39分 45秒 5ちゃんねるの運営はUPLIFT会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《UPLIFT会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
4 USD/mon. から匿名でご購入いただけます。
▼ UPLIFT会員登録はこちら ▼
https://uplift.5ch.net/
▼ UPLIFTログインはこちら ▼
https://uplift.5ch.net/login レス数が1000を超えています。これ以上書き込みはできません。
