+ JavaScript の質問用スレッド vol.143 +
レス数が1000を超えています。これ以上書き込みはできません。
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
■前スレ
+ JavaScript の質問用スレッド vol.142 +
https://mevius.5ch.net/test/read.cgi/hp/1568622157/ ■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。
補足
jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。
1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。
しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。
そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。 ■JavaScript主要ライブラリ・フレームワーク 利用率
https://w3techs.com/technologies/overview/javascript_library/all
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 html内に記述のjavascriptにはlinter?は効かないのでしょうか。
オンラインでそれに対応したサービスはないでしょうか。 2019年もjQueryのシェアは微増で終わりましたね（苦笑）
だから言ったんだよ。誰もがウェブアプリ作ろうと思ってたりしないんだから
普通のウェブサイトならjQueryでいいんだって
適切じゃない技術に乗り換える意味がない どっかのフロントエンジニア君（笑）が必死に終わる終わるいっても
結局はこの結果ですよ。Angular？ReactJS？一年経ってもぜんぜん増えてませーんｗ
https://w3techs.com/technologies/history_overview/javascript_library/all
Historical trends in the usage of javascript libraries for websites
73.5% 73.6% 73.7% 73.8% 73.9% 74.0% 73.9% 73.9% 74.1% 74.1% 74.1% 74.0% 74.1% 74.2%
結果＋0.7%
https://w3techs.com/technologies/history_overview/javascript_library
Market share trends for JavaScript libraries
97.2% 97.3% 97.3% 97.3% 97.3% 97.3% 97.4% 97.4% 97.4% 97.5% 97.5% 97.5% 97.3% 97.4%
結果+0.2%
2011年より
28.3% 42.8% 54.5% 57.4% 61.5% 68.3% 71.9% 73.1% 73.6% 74.2%
74.0% 84.1% 90.2% 92.9% 94.5% 95.8% 96.4% 96.2% 97.3% 97.4% 形骸化？AngularやReactが増えないから
jQueryは減らないんですよ
AngularやReactが形骸化しちゃったと？ｗ ここまでjQuery信者っぷりが露骨なテンプレだと、何も感じないな
2020年も彼は平常運転なんだろうね 一生懸命覚えたjQueryを使った案件が減っちゃうとまんまが食えなくなっちゃうんだろうね
かわいそうに でもjQuery減ってないじゃんｗ
AngularとかReactはバージョナップで
また覚え直しになるでしょ？ 現実を見据えた奴なら全部覚えるだろ
jQueryに拘ってるのは信者だけ そりゃjQueryが消えるわけないんだから
jQueryも全部の中に含まれるだろうな >>17みたいにjQuery以外をこき下ろすのはアホってことだな 別にこき下ろしてないだろ
Angularが1と2で互換性なくなったのは事実だし
ブラウザ標準のWeb Componentsが控えてるから
脱Angular、脱Reactの流れは明らか Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
jQueryなんてとっくに使われなくなってるはずでしょ
ここは自ら学ぶスレでJS仙人Web仙人を目指す者が多いだろうけど
全体で見ればできるだけ自ら学びたくなくて他者にすがりたい人が多いでしょ
だからこのスレでライブラリやフレームワークを進めるのは
このスレ以外で相談されたときと比べたら控えるべき
例えば全く無知な人からこういう見た目のグラフを起きたいと言われて、
WebGLの数十のAPIと数十の技法をここで説明仕切るのは不可能だし、
より噛み砕いても説明しきれないときはWebGLを0から学んでこいとだけいうのはあまりに辛辣なので
グラフ表示ライブラリを提示して、そちらのこの使い方を変わりに学べということを言うのは極悪ではないとは思う
何れにせよ目的が学ぶことより問題対処の答えをもらうほうが大きくなってはいけないということ
ここは仕事依頼所ではなくて質問者が自ら学ぶ機会を作るための場所ということを忘れてはいけない そこで質問者に何を学ばしたいのかということ
jQuery力を身に付けさせたいのか、
jQueryなどに頼らなくてもWebAPIで実現できる力を身に付けさせたいのか、
それは各回答者によって違うし違ってて良いと思うが
ここがJavaScriptスレということは頭の片隅に置いておいてほしい
フランス料理スレがあったとして、そこで電子レンジ中心でするというのは面白いと思うが
あまり電子レンジ最高、これに頼らないのは変だというアピールをすると
なにかに特別こだわるのであれば亜流として他スレでやれということにってしまうのは仕方がないだろう >>24
> Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
> jQueryなんてとっくに使われなくなってるはずでしょ
それは違うよ。Web Componentsはウェブアプリを作るもの
なので同じウェブアプリを作るAngularやReactと競合してる。
jQueryはウェブサイトに動きをつけるもの
Web Componentsと競合してない。
将来的にはWeb Componentsで作ったコンポーネントを
組み合わせるライブラリとしてjQueryが使われるだろう jQuery厨と反jQueryとのバトルかお
大晦日だし朝までやってみろだお
生テレビみたいに >>26
Web ComponentsとjQueryを対比してるのではなくて、
標準で補えるような機能があるから、競合すると言って移行が進むとは限らないでしょってこと
競合するってことは見方を変えると親和性が高く補い合えるということでもあるのだから
Web Componentsはウェブアプリを作るものではなく
要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
それに作れたからと言ってそれらを上手く使ったり運用することまでは含まれていないのだから
そういう面でフレームワークは必要でしょ
またjQueryはウェブサイトに動きをつけるものっていうのであれば
Web Animation APIが競合するでしょ
でもだからといってjQueryが不要ということにはなっていないでしょ >>26
標準の各機能というのはあくまで機能であって、
フレームワークとか、ライブラリでもjQuery規模のものは
その世界観をまるごと提供するもので、そこに意味があるわけでしょ
そういう使い方をしているのであれば、
標準機能があるからフレームワークやライブラリが不要とはならないでしょ
「機能」のような粒度でそれらを欲しているわけではないのだから >>28
jQueryとの対比？何を言ってるのですか？
標準の機能があるからAngularやReactのような重いフレームワークが不要になり
またそれに伴いフレームワークがまたガラリと変わるって話をしてるんですが
> Web Componentsはウェブアプリを作るものではなく
> 要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
従来のWebの延長だから、みんなWeb Componentsを選ぶでしょうね
> またjQueryはウェブサイトに動きをつけるものっていうのであれば
> Web Animation APIが競合するでしょ
動きってアニメーションのことじゃないですよ（笑）
動きというのは各コンポーネントの連携の話です。
AngularやReactでコンポーネントを作る時代は終わり
Web標準のWeb Componentsでコンポーネントを作るようになります。
いろんな所がオレオレブランドのコンポーネントを作るようになるでしょう
そこにフレームワークは組み込まれません
コンポーネントは部品です。その部品をつなげるものが必要です。
それがjQueryです。 jQueryでコンポーネント(笑)作ってる奴には関係ないだろ Web Componentsでコンポーネント作るんでしょ？ >>30
それは違う
原則として標準機能というのは低レイヤーを攻めてる
フレームワークなどは高レイヤー
Web Componentsも一番大きい部分はなにかというとShadowDOMであり
今まで既存の要素spanやdivなどを無理くり使って
欲しい物を作っていたのがよりスマートにできるということ
スマートにできるようになったからと言って、
開発者誰もが自分でShadowDOMを触るかと言うと違う
そこは引き続きフレームワークを使うのが普通だろう
要するにこの手の標準機能はフレームワークを
よりスマートに作れるようにするためにあると言っても過言ではない
>>コンポーネントは部品です。その部品をつなげるものが必要です。
そのとおり
>>それがjQueryです。
それは違う
jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
要素間の高度な連携のための機能は入っていない
jQueryしか使わないのであればそこのロジックは全部自前で書くことになる
だからjQueryはあくまで「ライブラリ」と言われている >>33
デスクトップアプリの歴史を学んだほうが良いぞ
ShadowDOMでコンポーネントが作れるようになったら
次起きる流れはコンポーネントの配布だ
コンポーネントは特定のフレームワークに依存せずに
単独で使えたほうが良い。そしてツリービューとかそういった
便利なものが配布される。そしてRADツールの登場だ
RADツールを前提としたプログラミングモデルになる
.NETフレームワークと同じようなもん
今もあるがそれがウェブ標準技術をベースに再構成される
今あるものは何も残らんよ。MFCが消えたのと同じように
すべてが作り直される >>33
> jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
jQueryで要素を操作するんじゃないよ。要素の操作はコンポーネントに組み込まれる。
jQueryの担当はイベントハンドラだよ。
コンポーネント時代において、コンポーネント間の情報のやり取りは
すべてイベントによって引き起こされる。イベントドリブンって知ってるかね？ｗ
コンポーネントから特定のベントを受け取り、そしてそのまま又は多少加工して
他のコンポーネントに情報を渡す。コンポーネントは必ずしもUIを持っているとは限らない
タイマーコンポーネントのようなものもある。
ウェブという貧弱な技術からスタートしているだけで
結局の所、必要としているプログラミングモデルは、
最初から自由だったデスクトップアプリと変わらない。
デスクトップアプリを見ればウェブ技術の将来はわかる イベントハンドラに特化したライブラリがあれば充分だな
めでたしめでたし FormDataのappendをjqueryのcallbackで使ったらappendされなかったのですが
これはjqueryのせいですよね？
たしか$.ajaxでは"processData":falseと"contentType":falseの設定しなきゃいけなかったような・・
ajaxのときとは違ってエラーがでなかったのでめちゃくちゃハマりました・・ >>39
よくよく考えるとformdataにはキーも値もsetされていて
そのformdata送信後のパラメーター（コンソールのnetworkのところ）に反映されてないだけかも、でした
jqueryのcallback(例えばtoggleとかeach)の中でformdata.appendのときは送信後のパラメータに反映されてなくて
jquery関係ない外のブロックでformdata.appendすると送信後のパラメーターに反映される
みたいなところまでは検証できたと思います
”そもそもformdataにキーがセットされているか否か”をまた近い内に検証してみます
てっきり、パラーメータに反映されない＝formdataにキーがセットできてない
だと思ってました https://httpbin.org/
サイト上のコンソール上にて検証しました
var prm=[["key0","val0"],["key1","val1"],["key2","val2"]];
var $hoge=$('<div id="hoge">hogehoge</div>');
$(document.body).append($hoge);
var formData=new FormData();
formData.append(...prm.shift());
$hoge.toggle(function(){
formData.append(prm[0][0],prm[0][1]);
formData.set(prm[1][0],prm[1][1]);
});
$.ajax({
"url": "https://httpbin.org/post";,
"type": "POST",
"processData":false,
"contentType":false,
"data": formData
}).complete(res=>console.log(res));
$.eachは大丈夫でした
$().toggleで使うとキーがappendできないっぽいです > $().toggleで使うとキーがappendできないっぽいです
だからそんなことはないって
お前が使い方間違ってるだけ だいたいその検証でなにがどうなってるのかさっぱりわからんし
他人にわかるようにかけ >>42,43
chromeとffでしか検証していませんが
FormDataにはgetメソッドというのがあってそれを使うとキーが取得できます
var prm=[["key0","val0"],["key1","val1"],["key2","val2"],["key4","val4"]];
var $hoge=$('<div id="hoge">hogehoge</div>');
$(document.body).append($hoge);
var formData=new FormData();
formData.append(...prm.shift());
$hoge.toggle(function(){
formData.append(prm[0][0],prm[0][1]);
formData.set(prm[1][0],prm[1][1]);
formData.append("key3","val3");
});
formData.set(prm[2][0],prm[2][1]);
console.log(formData.get("key0"));//val0
console.log(formData.get("key1"));//null
console.log(formData.get("key2"));//null
console.log(formData.get("key3"));//null
console.log(formData.get("key4"));//val4 一応原因はわかりました
toggle内でconsoleするとなぜか最後のconsoleの後にconsole.logされるのでおかしいと思い
時間を置いてから最後のconsole.logを実行したらキーがセットされていました >>35
コンポーネントは要素でしょ
要素を操作するってことじゃん
逆に要素の属性指定で操作できない要素を作ったら
それWeb Componentの意味半減でしょ >>46
コンポーネントとなってる要素は操作する（事がある）
コンポーネントの中身の要素は操作しない
> 逆に要素の属性指定で操作できない要素を作ったら
コンポーネントとなってる要素の属性は操作する
コンポーネントの中身の要素の属性は直接操作しない（メソッド、イベント経由で行う） JQ厨にとってのコンポーネントはこれだから
同じものと思わない方が良い
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div> input type="file"のファイルを選択するボタンを押さずにダイアログを開きたいのですが
どうやればいいのでしょうか（File APIの常にひらっきぱなしD&Dのやつではありません） >>44
「javascript formdata」で検索して、MDN のサンプル通りに作れば？ >>49
任意のタイミングで開きたいって話ならそんな横着は無理
あくまでもユーザーのアクションが起点
https://jsfiddle.net/ekhruwcj/ >>50
フォームの設置は簡単なのですが
ファイルを選択ボタンをjavascriptでクリックしたことにするやりかたがわからなかったのです
>>51
.click()で思い通りのやつができました！！
ありがとうございました！ >>48
"俺が想像する"JQ厨にとってのコンポーネントはこれだから
でしょ？
そしてお前は、お前が想像するjQuery厨を叩いてるだけ
お前の中のお前が作り出した架空のjQuery厨と争ってるｗ >>54
ならこのコードをコンポーネントと呼ぶ奴は
jQuery厨でもないただのアホってことでいいんだよな？
いやー良かった良かった Web Componentsの話をしてるんだから
（今の文脈では）コンポーネント＝Web Componentsでしょ？
今の文脈ではだからね。
Reactの話をしているときに、コンポーネント＝Web Componentsなわけはない >>56
つまり文脈が変わればコンポーネントと呼ぶと？ そりゃあそうだろう
componentsは何かの固有名詞ではなく
部品って意味の一般名詞だもの >>60
PHPなどを使ってその部分だけ別ファイルにして
使い回せるようにすれば部品になるでしょ？ 結局>>42さんの＞だからそんなことはないって
のそんなことってどんなことだったんですか・・？ https://api.jquery.com/toggle/#toggle-duration-complete
toggle関数の仕様を確認すると、
durationを省略してcompleteのみを指定した場合、completeが実行されるのはdurationのデフォルトである400ms後。
つまり、>41 は設定処理実行前に出力してる。
よって
> $().toggleで使うとキーがappendできないっぽいです
toggle関数の中でFormData#appendの動作が変わる、なんてことは起きてない。 ようは400ms経つ前にappendされてないformdataを送ってしまうので
post先に反映されないということでは？
つまり>>42の段階で＞そんなことはないって
のニュアンスが違うような
仮にそういう意味ではなく>>63だということは最初からわかってた
ってことなら>>44の結果が出る前に
「toggleの処理より先に$.ajaxやってるから」もしくは「全部toggleの中に書け」みたいな言い当てができているはず
それらを踏まえて＞そんなことはない
のニュアンスは明らかに、>>41通りやってもformdataは送れる
みたいな意味だよなぁ・・ ＞$().toggleで使うとキーがappendできないっぽいです
の意味は質問者回答者それぞれの視点で
質問者>>41 （ 結果的にappendされていないデータが返ってきた → appendできない、なぜ？ ）
回答者１ （ appendはできていることを知っている → appendできない、と言っているのは間違っている ）
回答者２ （ appendはできていることを知っている → appendできないと思っているのは、処理の順番を質問者が知らないから ）
ざっくりこういう回答者の思考パターンがあると思うけど
回答者１みたいな人だと、そもそもソレがわからないから質問してるんだが？みたいな質問とかなり相性が悪い
もちろん質問者がコードを開示しなかったり質問の難易度にもよるけど function boxclear03() {
const clears = document.getElementsByClassName('clear03');
for(var i=0, len = clears.length; i< len; i++){
var clearem = clears.item(i);
clearem.value = "";
clearem.checked = false;
}
}
あるイベントが行われると、
クラス「clear03」の要素全ての、フォームの値とチェックボックスのチェックが取り除かれる
スクリプトを作ってみたのですが、フォームはクリアになるのですが、チェックボックスはクリアに
なりません。
チェックボックスをクリアにするにはどうすればいいでしょうか？ 【環境】Windows10 pro, chrome バージョン: 79.0.3945.117（Official Build） （64 ビット）
【条件】自前の class データを、JSON 経由で保存・復元したいが、復元部分のやりかたがわからない
【何をしたのか】
(1) 自前の class データを用意
(2) データを入力
(3) そのデータを、class ごと localStrageに stringify で保存
(4) (3) のデータを localStrage から stringify と parse で取得
(問題) 取得した文字列をどうしたら、自前の class に再格納できるのかわからない
【エラーメッセージ】なし
【期待する結果】自前の class にすんなりデータ格納する方法が知りたい
【サンプルコード】
(1) class testClass {
constructor ( a, b, c ) {
this.aa = a; this.bb = b; this.cc = c;
};
あとは上記のゲッターセッター
}
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", JSON.stringify( xxx ) );
ここで、 testKey を chrome のデバッグ機能で見ると、
{ "aa": 963, "bb": 852, "cc": 741 } が入っているのは確認。
(4) JSON.parse( JSON.stringify ( localStorage.getItem ( "testKey" ) ) );
で取得すると、{ "aa": 963, "bb": 852, "cc": 741 } が得られるが、
この値をどうしたら testClass 型に戻せるのかわからないです。
イメージ的には、下記のような感じのことがしたいです。testClass yyy にデータを読み込む感じ
testClass yyy = JSON.parse( JSON.stringify ( localStorage.getItem ( "testKey" ) ) ); >>68
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", xxx.AABBCC );
みたな感じで(3)で{ "aa": 963, "bb": 852, "cc": 741 }を返すゲッター（AABBCC）を放り込み
で、その後は（も）xxxを扱う
というのが普通だと思うけど >>69
すみません、(4) について教えて下さい。
新しく作った testClass のデータに
以前のセッションで保存していた localStorage データを
復元するように読み込む方法が知りたいです。 >>70
localStorage.setItem('testKey', `data:text/html,<ｓｃｒｉｐｔ>alert('testClass相当のオブジェクトを書き込む');</ｓｃｒｉｐｔ>`);
$(document.body).append(localStorage.getItem("testKey")); 一般的にインラインの記述をすると、デバッガーが効かなくなるんでしょうかね >>70
型とかそもそも…
説明ではnewしてインスタンスが返る
とか普通の言語っぽく言ってっけど
ただのオブジェクトですし
そのtestClassをコピペしてtestClass2作って
new testClass2したら
全く同じもの出来ちゃうよ RegExp.$1.replace('foo', 'bar')
などとすると、RegExp.$2が機能しなくなるようなんですが
この理由について解説してるサイトがあれば教えて下さい RegExp
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp
$1, $2(match[ 1 ], match[ 2 ])などは正規表現で、( ) で囲ったキャプチャー部分を表す。
match[ 0 ] は、マッチした全体を表す
例えば、
var re = /([0-9]+)-([0-9]+)/;
var str = '123-789';
var match = re.exec( str );
console.log( match[ 0 ], match[ 1 ], match[ 2 ] );
// 123-789, 123, 789 それは後方参照の説明をしてるだけで質問の答ではない >>68
constructor の引数を、オブジェクト渡しに、変えた方が良いのでは？
JavaScript では、constructorの多重定義が出来ないので、面倒
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
}
}
var obj = new Test ( { b: "2", a: 1 } );
console.log( obj );
// Test { a: 1, b: '2' } >>77
・回答には多様性があります。他人の回答を尊重してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです つまりそれを利用してわざと的外れな回答をしたわけだな わざと的外れな回答をしたかどうかは関係ありません
ルールに従いましょう new FileReaderのreader.readAsTextってめちゃくちゃ読み込み遅くないですか？
フォルダ３０個分（ファイル数１００個くらい）を同時にやってみたら
いつまで経ってもうんともすんともいいません
マシンのスペックに依存しているのはわかるのですがもしかしてそれ以外にも制限あったりしますか new FileReaderで読み込んでアップロードし終わったファイルデータ？の
メモリ解放的なことってどうにかできないものか・・
タブ閉じればいいけど、同じタブだとどんどん貯まってく >>85
var hoge=formdata;みたいにそのままにしてた
hoge=nullとかにすれば開放されるの？
今度試してみる >>68 です。
みなさん、いろいろご回答ありがとうございます。
説明が下手ですみません。
ゲームのセーブデータのような使い方をしたいと思いました。
ネットを頼りに見様見真似で、保存していた
{ "aa": 963, "bb": 852, "cc": 741 }
を取得できたのはいいけど、この文字列をどうしたら便利に使えるか
（＝元のデータに復元できるか）、がわかりませんでした。
探し方がわるいのか、どの説明も上記の「文字列として取れます」で終わっていて、
その先の解説が欲しいなと…
それとも、文字列を取得できた時点で JSON の役目はおわっていて、
あとは csv 読み込みみたいに自分で切り分けて使うのでしょうか。
みなさんなら、この文字列どうするかんじでしょうか。。。
最悪、JSON使わなくても大丈夫そうな処理なのですが、
せっかくなので使って便利なら試したく思いました。 const obj = JSON.parse()
const yyy = new testClass(obj.aa, obj.bb, obj.cc)
yyy.aa // 963 >>88
データ形式によっちゃ使えないけど例だけ満たせればよいなら
const yyy = new testClass(null, null, null);
JSON.parse(json, (key, value) => {
if (key) yyy[key] = value;
});
とかｗ >>78
みたいに、
new testClass( obj )
と、1つの引数のオブジェクト渡しに変えた方が、良さそう
引数を3つも渡すのは、面倒でしょ？ 理由は面倒だから？ｗ
new testClass(1, 2, 3)
と書くのが面倒で、
new testClass({a: 1, b: 2, c: 3})
と書くのは面倒じゃないんだ？ｗｗｗ WebフォームとDBいじるだけならテトリス要らないと思われ
ゲーム作るならテトリスをコピーするのは大事だけど、新しい落ちゲー作るアイデアのが大変 新しいおちげー作るにしてもテトリスは基本になるかなと
ゲームエンジン使ってるんですけどね みなさん本当にありがとうございます。
>>89
すみません、保存するのは何かのポイントのように変わるものです
数字は固定じゃないです
>>90
アロー演算子わかんないです…
>>91
ちょっと何言ってるかわかんないです…（自分の習熟度が低すぎて）
localStorage.getItem ( "testKey" ) から取れた値を復元したいです
>>92
var aaa = new testClass ( 1, 2, 3 );
localStorage.setItem ( "testKey", JSON.stringify( aaa ) );
var bbb = new testClass( localStorage.getItem ( "testKey" ) );
で、bbb が {aa: "{"aa":1,"bb":2,"cc":3}", bb: undefined, cc: undefined} になっちゃった…
おしい…？
でも、そんなニュアンスのことをしたかったです。
>>93
はい（真顔）
なんで皆さんが頑なに localStorage.getItem ( "testKey" ) を起点に答えてくれないのか
未だにわかっていません…
{"aa":1,"bb":2,"cc":3} になった時点で再利用できないデータなのか。。。
－－－
初歩から出直すべきですかね… （＾＾；；； 最近不思議に思っていることがあります
各ブラウザがサードパーティクッキーを制限すると発表して騒ぎになっていますが、
別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
サードパーティクッキーを制限すると、どんな問題が本質的に解決するのでしょうか? 広告主に「たくさん広告表示されました！だからお金ください！」って
請求できるってこと？ >>99
> 別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS >>101
それは広告主のサーバー側の設定の話なので問題にはならないのでは？ >>100
それはCookieでもできますよね？
だから最近は表示ではなくほとんどクリックベースになっているのでは？ >>97
JavaScript では、他の言語のように、constructor の多重定義が出来ないから、
設計する際、どちらかを選択しないといけない！
Test は引数を、1つのオブジェクトとして渡す方法で、
Test2 は各引数を、別々に渡す方法だけど、
Testの方が分かりやすいかなと思って
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
} }
var obj = new Test ( { b: "2", a: 1 } );
console.log( obj );
// Test { a: 1, b: '2' }
次へ続く class Test2 {
constructor ( a, b ) {
this.a = a;
this.b = b;
} }
var obj = new Test2 ( 1, "2" );
console.log( obj );
// Test2 { a: 1, b: '2' }
各引数を別々に渡す方法だど、引数の順序で決まるから、
下のように、引数を逆の順番で渡せない！
つまり、順番を確認しないといけないので、ややこしく、バグりやすい設計
var obj = new Test2 ( "2", 1 );
console.log( obj );
// Test2 { a: '2', b: 1 } >>97
【JavaScript入門】JSONの作成とparse() / stringify()の使い方！
https://www.sejuku.net/blog/47716
var js_obj = {
a: 1,
b: "2"
}
console.log( js_obj );
// { a: 1, b: '2' }
// JSON.stringify で、JavaScript(JS)のオブジェクトを、JSON に変換する
var json_obj = JSON.stringify( js_obj );
console.log( json_obj );
// {"a":1,"b":"2"} JSONは、プロパティ名が文字列になっている！
// JSON.parse で、JSONをJSオブジェクトに戻す
js_obj2 = JSON.parse( json_obj );
console.log( js_obj2 );
// { a: 1, b: '2' } >>106
の続き
JSON.parse で、JSONをJSオブジェクトに戻した、js_obj2 は、{ a: 1, b: '2' }
ここで、>>104
で述べた、constructor の引数に、1つのオブジェクトとして渡す方法が、便利！
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
} }
var obj = new Test ( js_obj2 );
console.log( obj );
// Test { a: 1, b: '2' } 元々がオブジェクトならそのまま渡せた方が便利だが
他の呼び方もされるならその限りではない javascriptでゲーム作ってる人はすくにゃいですか？ >>104
ああああああああああああああああああ
できちゃあああああああああああああああああ！！
やったーーーーー！！！！ んほおおおおおお！！
ありがとうございます、そのままコピペでコメント付きソースになるの大感謝です！
いったん頂いたソースで動きを確認して、自分の使いたい方のソースに一行ずつ置き換えたら、
『オブジェクトごとstringifyでローカルストレージへ保存、
ローカルストレージからparseでオブジェクトに復元』
の流れができました！
引数の入れ替わりの考慮や、プロパティ名のところなど、細かい解説もたすかりました！
あったけぇ…（；；） ありがとうございます…！
>>78で既にほぼ正解近くの回答もらってたんですね、他の方もありがとうございました。 ぶっちゃけると2020年からは
オブジェクトを保存したいのならKVS推奨なんだけどね 何と比較してどういう理由でKVS推奨と言っているのか気になる SVGやその中のpathの幅や高さは実際の見た目ではなく余白のあるキャンバスのサイズになりますが、実際に表示されている線の幅・高さを取得する方法ってありますか？
JSで頑張って取得するより、余白なしのSVGを用意した方が手っ取り早いかな… 昨今のデバイスはD2Pでないので実際の見た目は検則できない 計算上の内部の値で必ずしもSVG要素の見た目が判別できるわけではない そういえば数年前くらいにjavascriptを埋め込める？もしくは
読み込んだ画像データをjavascriptで操作できるみたいなコンセプトの画像フォーマットがあったと思うのですが結局あれはどうなったんですか 初歩的な質問なんだけど
githubで公開されてるライブラリって基本的にどのフォルダをダウンロードすればいいの？ GitHub と、ローカルPC 双方の、プロジェクトルートをシンクロさせるのじゃないの？ 車ってどうやって操作したらいいの？みたいな質問やな 聞き方が悪かったわ
srcとかdistとかdocsとかあるけどどれ使えばいいの？ >>126
すれ違いだからググってほしいところだけど
とりあえずdistの中で pdfの特定のページにテキストフォームを作成する方法ってありますか？？
普通にやっても1ページ目にしかできない… 128ですが、自己解決しました。スレ汚しすみません chrome のデベロッパーツールのコンソールログのところで、
右クリックすると hide messages from XXXXX って出ると思うんですが、
間違ってこれを押したからか、エラーが表示されなくなってしまいました。
hide しちゃったのは、どうやったら再表示できるんでしょうか。 document.writeで書いたhtmlのスタイルシートが完全に効かない >>133
ありがと
出先だから後で見るね
body内からdocument.writeしていたのを
header内に移動しただけだから
動きは保証されてるはずなのにぃ >>133
132だけど、このツールしらなかった、ありがと
とはいえ、ちょっと複雑なscriptにしちゃってるから、
すんなり見ることはできなさそう。。。
bodyに移動したらやっぱり普通に見れたから、
document.writeの仕様的な何かなんかな >>135
関係ないと思う
ふつうにセレクタ間違ってるだけかと >>135
document.writeが完了したら
適用されてないスタイルのセレクタをコピーし
ブラウザの開発ツールを開き、consoleタブを選択して
document.querySelector('コピったセレクタをペースト');
と打ってenterして要素が返ってこない、もしくは
開発ツールのelementsタブを選択して、⌘+Fして検索窓を開き
コピったセレクタをペーストして
要素が選択されない場合は
セレクタが間違っているよ pdfフォームのテキストフィールドのフォーマットを数値にする方法を教えてください
AFNumber_Format使ってもカスタムにしかならないから送付先がタブレットとかだと動かないんです >>134-135
>body内からdocument.writeしていたのを、header内に移動しただけだから、動きは保証されてるはず
これは、全く保証されていない！
だって、body は、header 後に出力されるから、headerの内容は消されないのでは？
一方、header内でやると、その後のheader内の処理はされないとか、
bodyを作った後に回されて反映されないとか、動作が保証できないだろ？ みんなありがとーだよー
>>136
>>137
ちゅまんセレクタ使ってないの…
.unchi {}みたいなのを作って、classでテキトーに呼んでるんだぅ
>>140
あるとしたらその辺かもー
いっこ気になるのが、同期処理したくてasync使ってることかなぁ
<header>
document.write(link rel の cssインポート)
document.write(各種javascript外部ファイル)
async開始
csvファイル読み込み
読み込んだcsvを使う<body>＆<table>のhtml(document.writeで書く)
async終了
</header>
<body>
上書きされる元々のbody内
</body>
これを動かすと元々の<body>が無かった事になって、async内の<body>が表示される感じ
css効かせてるのは、このasyncで書き込む方
するとtableは普通に出るけど、cssだけ抜け落ちてる
css読み込みまでは非同期でも読み込みが間に合わないとは思えないくてナンデカナーって
asyncの実行順はログで確認済み あれ、ひょっとしてbodyの上書きってより
html全体の上書きになってるのかな？
帰ったら調べるべ >>132です、解決したー ↑がビンゴでやんした
header内のdocument.writeをやったことで、
それまでに読み込んでいた各種cssやjavascript等全て消え去って、
まっさらな状態で<body>からの記述だけになってたー
開発ツール上でいわれた通りソース見て確認した！
ヒントくれた人、開発ツールの使い方教えてくれた人、
サンクスぅぅぅ document.writeはFPにも設定があるように相当に非推奨 document.writeで要素を書いて
CSSやJSファイル読み込むのはだいぶ前にできなくなったんじゃないか
以前それやってて、動かなくなるってChromeの中の人が言いだしたんで
いろいろ改修した覚えがある >>144-145
ファイル名？時間 で取得して
キャッシュ使わないようにしてるんだけどダメ？
キャッシュ対策その後なんか出たっけ
ページ読むたび、絶対最新取得するオプションとか document.write を使わない方がよい
あらかじめ、container, main, app などのid を作っておいて、そこにDOM を追加すればよい。
<div id="container"></div>
それか、Ruby on Rails などのフレームワークでは、
各部品は各部品用のテンプレートファイルに書いておいて、
それらをメインのapplication.html に読み込んで、全体像を作る >>148
なるほど、そっちでやるのか
ちなみに、どの画面でも表示するルートメニューみたいなの、変更あった時いちいち全htmlを修正するの面倒だからjsに逃してdocument.writeで共通化してるけど、それもダメなんけ？
htmlって外部データのインポートあったっけ >>150
>単純に全ページ共通で読み込まれるブロックを1つ作ればいいんじゃない
ううぅ… そんな事できんの…？
出来るならもちろんそうしたい
ひんとか検索キーワードだけでもプリプリプリーズ💩 jQueryの.loadで共通のhtml1個作って読み込んでくれば？
ただ、そういう面倒な部分を共通化しいてきたいのなら、
PHPだのjsのフレームワーク使ってやったほうが生産性大分上がると思うよ。
毎回DOMいじってどうこうしてたら面倒でしょうがないと思う。 SASS なんかも、Partial
application.scss
_reset.scss
_variables.scss
この3つのファイルがあって、application.scss 内に、
@import "reset";
@import "variables";
で読み込める！
どのフレームワークでも、Partial >>151
template要素を使うとか、createElementとか Ruby on Rails では、application.html.erb の中で、各部分テンプレートを読み込む。
_header.html.erb, _footer.html.erb に、その部分だけを作っておく
ERB テンプレート内では、<% ～ %> 内に、Ruby のコードを書いて、それをHTML へ変換する。
<% 式 %>, <%= 式 %>
<div id="container">
<header>
<%= render "header" %>
</header>
<footer>
<%= render "footer" %>
</footer>
</div>
このように、どのフレームワークでも、Partial で作る！
React, Vue.js, Electron なども同じ フレームワークを使わない場合の、Partial は、
Document.createDocumentFragment( ) とかかな？
例えば、メモリー内で、header, footer 用のDOM 木を構築しておいて、
<div id="container"> に読み込むとか？ lodash の、template
<% ～ %> 内に、JavaScript のコードを書いて、それを文字列へ変換する
<% 式 %> 値を埋め込まない
<%= 式 %> 値を埋め込む
<%- 式 %> HTML エスケープする
var compiled = _.template(
'<% _.forEach(users, function(user) { %>
<li><%- user %></li>
<% }); %>'
);
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>' >>152
jQueryはじめてつかったけど、できちゃああ！ ありがとうー
でも、jQueryって将来性大丈夫なのかな。。。(´ρ`)
あ、公式のjs落としておけば、js生きてる限り平気なのか（中身ｊｓだから？）
>>153-158
いろいろありがと、SASS自体しらなかった、CSSまとめるの楽になりそうー
久しぶりに触ってるので、新しい情報いっぱいで感謝。
templateも見てみるけど、Rubyはちとなじみ無いかも(むつかしそう…)
>>144-145
document.writeメッチャつかってたから、非推奨情報たすかった！
💩 < さんくぷー！ 結局、オブジェクトのディープコピーの定番はなんなん？ >>162
自分はlodashのcloneDeepに頼るか
むかし作ってメンテし続けてる自前関数でやってる >>161
10～15年くらい前が
いちばんどむどむ言ってた気もする
けっこういろいろ自前でやらにゃならんかった頃だし >>163
lodashか・・・試してみるか・・・
jQuery信者なので$.extend使ってるんだけど
未だにjQueryはJKにも笑われちゃうよな・・・ >>165
そうでもない気もする
俺の身の回り限定だけど
jQ以降の世代は、今のESになって盛んに脱jQを叫んでいるけど
jQ以前の世代は、便利なものもあるんだけどなーと思ってる DOM1箇所いじるだけならjQueryで十分いいし使えるんだけど、
それ以上の用途だと逆に面倒でとても使ってられんからなぁ。
前に、クライアント側にもフォームのバリデーション追加してくれって話しになって
一度決まったものを作るだけならよかったものの、そっから改修で弄り始めた途端に一瞬でカオス状態になったよ。 >>162
型情報が失われるなど、あまり良くないやり方では、
JavaScript(JS)オブジェクト/JSON 文字列の変換により、新しいオブジェクトを構築するとか
JS Object → JSON 文字列 → JS Object(新しいオブジェクト)
Haxe のSerializer では、型情報を維持したまま、
異なる言語間でも、文字列で通信できるけど
ただし、抽象クラスには対応していない >>168
それって
例えばプロパティの値が日付オブジェクトだった場合
メソッドはどうなってしまうん？ JSON では型情報が無くなるから、メソッドを呼んだりできないでしょ？
単純なデータを入れるだけの使い方をして、
型情報などは、別の文書に書いておく
この文書を管理する手間が掛かるから、面倒！
だから各言語には、通信先のホストで、オブジェクトを再構築できる、Serializer がある
各言語のオブジェクト → 文字列で通信 → オブジェクトを再構築 >>168
json経由すんのってなんか遠回りでやだよね
結局定番らしい定番は無いってことやんね
その都度適当な方法でコピるしかないのか コピペプログラマが有識者にネタを求めて質問するのが、ここの日常だから >>164
だからこそ内容の全くわかってないコピペで動かない厨が多かった >>162
非同期で良いならMessageChannelを使うのが良い
もしくは標準で議論が進んでるからそれに近いポリフィルを作って使うかの２択 >>172
そのコピーすらロクにできないんだよJavaScriptは！ JSのオブジェクトはJSからは参照ができない内部スロットがあるのでコピーは難しい
うかつに完全なクローンが作れたらセキュリティにも影響するかもしれないし というかコピーはどの言語でも難しい問題だよ
そもそも関数を値としてみるかどうかだからな
値として見るならコピーした時、それは複製されていなければいけない
だけど大体の言語は値としてみなしてないだろう？
例えばアプリの特定のバージョンでオブジェクトをコピーというか
データとしてファイルにシリアライズする。
そしてアプリのバグを修正したバージョンで、データを読み取る
そうすると、その保存したデータに含まれる関数は
バグ修正の前のものであるべきかどうか
という話をすれば、コピーしたときに関数の情報はデータとして
含まれるべきかどうかという問題が難しいってわかるだろ？ 保存がしたい場合は別だけど、最初から複写されることがわかっている場合は
操作対象は元のオブジェクトに必ずプロキシを噛ませて使うことにしたら良い
値に変更が及んだ場合のみそのプロパティは以後そのプロキシでキャッシュされる
そうすればメソッドのコピーを考えなくても良い Windows10でGoogle Chromeを使っています。
https://blog.capilano-fw.com/?p=4063
上記の画像認識のリンクの中で
「特定の顔が誰なのかを判別する」
という項目がありますがそのプログラムの中で
const detection = await faceapi.detectSingleFace(image)
.withFaceLandmarks()
.withFaceDescriptor();
の内容をconsole.logで出力してみるとundefindedになります。
どなたかこのプログラムを試した方いらっしゃらないでしょうか。
ちなみにhttpsをアパッチで立ち上げていて、オレオレ証明を使っています。 正確には顔認識じゃなくて、簡単な絵の画像認識をしてみたいのですが
いい方法がないでしょうか。 Three.jsでレンダリングされたcanvasが、
ダウンロードバーの出現のせいで大きさが変わって困ってます。
ダウンロードの開始・終了は検知できるので
その間だけ自動サイズ調整を無効にするにはどうすればよいですか。 vanilla jsは文法は覚えたくらいのレベルの次となる、上のステップに行くには何をするのが学習する上で有効ですか？
おすすめの課題などがあれば紹介していただけると嬉しいです >>184
文法はバニラでなくても必要
ES2019を学べ 180です。
ごめんなさい、絵の顔を認証させようとしてしていましたが
実写の写真じゃないとダメでした。 >>185
既に文法をずっと学んでいて質問しました。
実践的なもので役立つ課題みたいなのってありますか？ >>187
「ES2019の文法だけ」を覚えても仕方がない
文法以外も学習が必須 >>187
JSわかってるなら問題ないよ
ドキュメントとリファレンスとサンプル見れば
あーなるほどねーって使える
それがライブラリやフレームワークってもんよ まあ、文法だけ覚えてるなら、課題やる前に覚えることはあるだろうね
制御構文とか、オブジェクトとか、プロトタイプとか、いくらでもある 実際jsコーディングする時って何を作るのが実践でも役立つ？
題材でよかったもんとかある？ >>193
ES6以降のPolyfill
SelectorsvAPIのPolyfill >>193
markdownからDOMノードへの変換気 とりあえずhtmlなり何かしらweb系を絡ませないと
js使う意味なくなってpythonとかでよくねになる気がする >>187が安易な答えを求めて、>>193の質問をしただけ
題材だけ揃えてもあかん ｊｓのさらに真価が発揮されるのは５G、６Gでのweb4.0時代 JSの真価は言語的に仕様が小さくて拡張性があったことだが
ES6から10までの間に半分以上の可能性を消費していて
今が一番真価が発揮されている壮年期
かといって別の言語なら2030年代に革命を起こせるかというとそうではない
そろそろ既存の言語の進化系ではなく、
非同期の大量のタスクを圧倒的自然で素敵に捌ける
新しい仕組みを持った言語が必要ということ async,awaitって使う頻度低くないですか・・？ 俺が書いたあるプログラムは全体の行の50%にawaitが付いていた。 キュー=[await処理１,await処理２,await処理３,,,,,,];
みたいな感じでawait処理が全部終わったら、また同じ順番で再帰しつつ失敗したawait処理はスルーしたいとき
結局、await処理それぞれの”完了・成功したか否か”を保持しないといけないので、async/await使わずに
async/awaitっぽく実装した処理にまとめ書いた方が短く書ける、ような気がした >>201
function foo() {
async なんたら
if なんたら
async なんたら
for なんたら
async なんたら
return
}
こんな感じ？ >>200
逐次処理版Promise.allを定義しておけば、使う機会はほぼない >>203
awaitだけどまぁそんな感じ。
同期関数のコールツリーの深いところでasyncしかない関数を呼び出す必要が出てきた時
変更が大変になるから、最初からなるべくasync関数にするようにしたらそうなった。 使う頻度なんて気にしても仕方ないと思う
一般解なんてないし、自分の好きにやればいい ところでasyncとawaitの読みって
えいしんく、あうぇいと、でいいんでしょうか？ 投げっぱなし質問ばかりなのは、やる気がないからでしょうか？ イベント発生順序について質問です
【環境】 OS: Windows10, ブラウザ: Google ChromeVersion 79.0.3945.130 (Official Build) (64-bit)
【何をしたのか】 クリック対象の要素へ4イベントを下記の順番に追加した後、これ自身または子要素をクリックしました
> addEventListener("click", func1, true)
> addEventListener("click", func2, false)
> addEventListener("click", func3, false)
> addEventListener("click", func4, true)
【期待する結果】 発生順は常にfunc2,3,1,4 (capture,bubbleの順)
上記環境下にて、この要素自身をクリックした時はfunc1,2,3,4の順に発生しました
クリック対象の登録イベントがcapture,bubbleで区別されないのはjavascript共通ですか？それとも環境固有でしょうか 訂正します。期待する発生順はfunc1,4,2,3 (capture,bubbleの順)です そりゃイベント付加した要素、ターゲットがひとつ？だから普通に登録順にイベント発生しただけじゃない？
> addEventListener("click", func1, true)
>
の順番を入れ替えて登録したらその順番で発生しそう >>214-215
ターゲットフェーズの存在を知りませんでした
分かりやすいページを教えていただきありがとうございます
>213は解決しました addEventListenerの第３引数にはオブジェクトを渡しましょう >>206
じゃあ手続き型思考じゃない人はどうしてるの？
- await使わずPromise.then()を使う
- Promise自体使わない awaitは使うけれど、Promise.allを使ったり、より順不同でパラレルに動くようにしようということだろう
上の話のように完全に順序を守ってawaitしていってるだけなら なんか会社でJS勉強しろって言われてる者なんですけど、効率良い勉強方法ありますか？
GSUITE入れるからやらないといけないみたいです >>218
どちらもある
そもそも、ケースバイケースで使い分けるから一つの方法に固定しない
「たった一つの冴えたやり方」を探す人がいるが、選択肢を減らすのは悪手だと思う >>220
勉強のスケジュールをきつめに立てて
週一で進捗をチェックして、遅れたら爪を一枚剥がそう
1週目は怠けてしまうかもしれないけど
2週目からは痛みと恐怖が嫌でも勉強させてくれるよ await使うかthen使うかなんて手段の話で、思考の違いが表れるほどのものとは思えんけどな。 【環境】Android 4.4.2以上
【条件】以下の現状改善にJS(XHR)でいいのか他の方法がいいのか、道筋をまず導いて欲しい
現状
・クライアントPCよりWEBサーバーにCSVが不定期にアップロードされる（そんな頻繁ではない）
・Android端末でWEBサーバーにアクセスし、CSVを元に作成されたページを表示する
・ページの作成はPHPで行われている
・ページの表示は数秒おき（CSVの内容で多少変動する）にリロードされる
・このページを表示するのは１台のAndroid端末のみ
・簡単な情報を表示し続けるシステム
・質問者はC/C++は分かりますが、PHP,HTML,CSSは超初級、JSを初めて触ります
改善したい点 三つ
・CSVに変動があろうがなかろうがリロードするのが無駄なので止めたい、
CSVに変動があったときだけリロードしたい
・欲を言えば変動があった部分のみ表示を更新したい（突き詰めるとPHP要らないんじゃ・・・）
・リロードされる度に、読み込み中の青いバーが画面上に表示されるのを回避したい
（幸い、リロード時に画面全体が再描画されてチカチカするなどの問題は今のところありません）
考えていること
・まずXHRやfetchを使って必要最小限の「CSVが何時更新されたかどうか」という情報のみを
読み込み、ブラウザ・JSの変数にて保持しておき、これを定期的に読み込み、何時更新されたという
情報に差異が出たらリロードすればかなりマシなのでは？
以上ですが、そもそもこれで可能かどうかすら分からない次第なので、この方向でいいのか
悪いのかをご指南いただければと思いました
上記の考えで基本的に可能だとしても改善したい点が単純に全て解決できるとは思っていませんが、
改善したい点の一つ目だけでも改善できればと思っています
よろしくお願いします >>220
言語は勉強するものではない
使われてるのを見聞きして使って感覚に慣れるものだ
赤ちゃんが音節を発するように、何事もまずコピペ
人間の脳の仕組みの大原則として、自分が行えない物事を理解することはできない
理解できるから行動ができるのではなくて、行動ができるから理解ができるのだと言う科学的事実は知っておくと良い
まずは意味がわからなくてもそっくり真似をしてどんな要素があるかを感覚で掴むことが大事
それが苦になるようなら向いていないということ
真似をして書いて動いているのをみてから、徐々にその仕組みを覚えていく
そういうイメージでやると良い >>224
サーバーから通知を送ってもらいたいということで、WebSocketを使うのが賢い
どうしてもHTTPでやりたければ、なんども通信し直すのは変わらないのだけれど、
通信をできるだけ切らずに維持してサーバーからの返答を長く待つという古来からの方法があり、
それを扱いやすくしたSSE(EventSource)APIがあることにはあるが、
それは今どき川に洗濯に行くようなもので、導入コストは少々かかったとしても
素直に洗濯機を買ってWebSocketを使うことを強く進める >>226
レスありがとうございます
仰るとおり、サーバーからの通知が最善のはずだと、WEB PUSH など用語すら
分かってない状況でググり倒し、情報が多すぎで判断付かずここに駆け込んできました
ソケット通信はC/C++でもやってますので何とかなりそうな気はしましたが、
サーバー側をどうすればいいのか中々分かりませんでした
PHPでもいいのかな？できるかも？という程度の情報には今たどり着きましたが、、
質問で書き忘れていましたが使用しているサーバーはXserverでして、
このサーバーだとちょっと難しいような（ポートの問題がある？）情報を
見つけてWebSocketを躊躇しているところです
SSEだとサーバーを問わないのかな？（分かりませんが）
WebSocketやnode.jsは、ググり倒している間に訳分からないまでも見かけては
いましたが、SSEは初見でした
これなら最悪、やりたいことはできそうなのが幸いです
情報ありがとうございます >>224
CSV ファイルの更新時刻をどこかに保存しておいて、毎回それと比べれば、
CSVファイルが更新されたかどうか、判別できる
Ruby なら、index.html.erb みたいなテンプレートに、内容を埋め込む。
ERB は、あらゆるファイルに、Rubyの式を、embedded 埋め込める
<div><%= Rubyの式 %></div>
または、JavaScript/jQuery のAjax で、動的に内容を変えられる
本当は、RubyのSinatra などでサーバーを作って、
CSVファイルの更新時刻をチェックする処理を作ってもらうとか、
サーバー側に、新しい処理・ルーティングを追加して、
Android からは、直接サーバー側のファイルを参照しないのが良い！
0から手を動かして作るRailsチャットアプリ【チュートリアル】
https://www.youtube.com/watch?v=WCsgcp5dg7M
Ruby on Rails で、websocket を使った動画 const fizzBuzz = () => {
for (var i = 1; i < 101; i++) {
switch (true) {
case i % 3 === 0 && i % 5 === 0:
console.log('FizzBuzz');
break;
case i % 5 === 0:
console.log('Buzz');
break;
case i % 3 === 0:
console.log('Fizz');
break;
default:
console.log(i);
}
}
}
fizzBuzz();
fizzbuzzをやろうとして、自分は↑を書いたんですが
これとくに問題ないですか？
調べてみると賛否両論(switchのtrueの箇所?)がどうのでてきて不安になり質問しました。 賛否両論と知ってるくせにとくに問題ないですか？と聞ける精神が問題だ
ここはお前の漠然とした不安をケアする場所ではない
自分の行動くらい自分で責任を持って決めろ >>200や>>220もそうだが、複数の選択肢がある時、彼らは唯一解しか満足しない
「一概にはいえない」や「前提条件次第」という考えは彼らの頭にはない
一つの解にして、他を考えるのを止めるのが目的だから、考える過程が増えるのは彼らにとっては本末転倒なのだ というか適当に質問してるということが丸わかり
自分で難しい質問をして難しい答えが帰ってきても反応しないんだもの
実際困ってもいないくせに人の反応を見るために質問したりするイカレポンタンは害悪でしかない なんで問題ないかわからないんだろお前等
答えられないんだろ？ >>231
そもそもお前(ら)が何を問題とするかだ
コーディング規約でswitch(true)禁止等があるチーム開発でそれを無視して使用している、等なら無視している時点で問題になるだろうが、こんな個人のメモ書き程度のFizzBuzzで何を使おうが問題にならんと思うが。
switch(true)自体の機能に疑問があるという話なら、まずは関数化していろいろな入力を試すなどしてデバッグし、それでも疑問が残ったり問題が顕在化したら他者に協力を仰げ。
賛否両論がどうの、程度ではなく自分でもっとしっかり読んで理解しろ。
なんの記事を読んんだのかは知らんが、それすら理解していないお前が、このスレの人間に「問題無い」と断言されたとしてただ鵜呑みにするのか？
賛否両論であるということを認識した上で、それでもなお利用するのなら、なぜそれを利用する必要があったのか説明できるようにしろ。 >>235
何が問題かを決めるのは他人ではない
俺たちはお前のオカンやオトンではない 屁理屈ばかりで理由の一つも論理的に言い返してる人いないやんw >>231
switch ( 式 ) {
case 値1: // 式の値が「値1」と一致した場合の処理
break;
case 値2: // 式の値が「値1」と一致した場合の処理
break;
default:
break;
}
普通、式には変数など、変動するものを使う。そして、case の方に定数。
君のは逆になってるから、変
それとコーディング規則では、
後で修正することも考えて、default: にも、break; を付けておく。
また、意思を明白にするために、fall-through, no-break のコメントも付ける
switch ( a ) {
case 10:
// break; fall-through, no-break
case 20:
break;
default:
break;
} 普通の感覚では、式に、i % 3 なんだが、
i % 5 の場合もあるから、うまく作れないw
switch ( i % 3 ) {
case 0: // 割り切れる
break;
default: // 割り切れない
break;
}
switch を使えば、
>>231
みたいな書き方になってしまうw 今度はswitch(true)知らないやつが語りだしたかｗ switch(true)ってバッドノウハウ感があるよなｗ 「知らないんだろ？」と煽っても無駄です、のテンプレを復活させてもいい気がしてきた
煽って回答を集める乞食が多すぎる >>244
あれは使わせたくないので使わせないようにしてる
あんなん使わせるならelse ifの羅列の方がずっとマシ canvasを使って、ライブラリ無しで3Dゲームは作れると思いますか？ >>247
作れる作れないで言ったら確実に作れるよ
頑張れ perfectScrollBarで画面全体のスクロールバーをカスタムすることはできますか？
サンプル等を見ても画面内のうちdivなど一部の要素にスクロールバーを表示させるものばかりでイメージが湧かないです overflowhiddenで全体の消してそれいっぱいにそのライブラリでカスタマイズすれば？ ありがとうございます
なんかそれっぽい質問が見えたので頑張って訳してみます new XMLHttpRequest()についての質問です
var a = function(url){
var requestFile = new XMLHttpRequest();
requestFile.open("GET", url);
requestFile.responseType = "arraybuffer";
requestFile.send();
requestFile.onload = function () {
alert("b");
};
}
var b = function(url){
var requestFile = new XMLHttpRequest();
requestFile.open("GET", url);
requestFile.responseType = "arraybuffer";
requestFile.send();
requestFile.onload = function () {
alert("b");
};
}
a("x.jpg");b("x.jpg");
と実行するonloadが上書きされず"a"と"b"が表示されてしまいます
XMLHttpRequest();をもう一度取得してonloadを上書きするというのは不可能なのでしょうか？
上書きしたい場合b()の内容をどういうものにしたら良いのでしょうか？ ん？aとbのrequestFileの指す物が同じだと思ってるって事？ >>255
同じurlでGETすればonloadも共有してるのかなって思ってましたが、違うみたいでした
a()を実行した後で、b()でx.jpgのファイルがonloadされた時の挙動を変更するのが目的です ユーザーが選択した数十GBの動画データをFileとして持っているとき
その時点では使用メモリとしてカウントされないのですが、
FileReaderにかけるとクラッシュしてしまいます。
例えばこの部分から100MBとか、していして読み込んでもらうことはできないのでしょうか？
Streamも調べましたが、頭からは安全に取れても位置を指定して行き帰りしながらデータを読む方法がわかりません。 ファイルは、一括して全部読み込むものと、
stream で、前からバッファへ読み込みながら、処理したら、すぐに捨てるタイプのものがある。
streamは、巨大な動画ファイルに使われる
streamのバッファサイズによる。
例えばブラウザで、1分前に戻ると、バッファ内にあるから、すぐに再生できるが、
10分前なら、バッファ内にないから再読み込みされる
streamはランダムアクセスできない。
データがバッファ内にあれば、出来るかも知れないが
ファイルを、一括して全部読み込む場合は、すべてがメモリ内にあるから、ランダムアクセスできるが、
大きいファイルは、読み込めない
使えるメモリサイズ以上を読み込むと、何かのデータが、HDD へスワップされるから、極端に遅くなる お前のうんちくは聞いてない
できるならその方法を、できないかなら端的にそう言え コーデックにもよるけど、CBRの動画でないとシークしたり、突拍子の無い場所にジャンプするのは不可能ではないが難しい。
あとGoPの仕組み上、キーフレームにしかシークできない。 >>256
aのrequestFile.onloadを上書きしなさい >>261
それができねぇからわざわざaとbでやってるんだろ >>254
var a = function(url){
requestFile.onload = function () { };
}
var b = function(url){
requestFile.onload = function () { };
}
上は、a 関数内の処理の定義で、
下は、b 関数内の処理の定義だから、
全く別の定義だろ。異なる！ >>262
それしか方法がないから、そういわれてんだろ
それが出来ねぇなら、諦めろ >>265
やってみた？
どうやって、aのrequestFileを取得する？ >>254
var a = function(url){
var requestFile = new XMLHttpRequest();
requestFile.onload = function () { };
}
var b = function(url){
var requestFile = new XMLHttpRequest();
requestFile.onload = function () { };
}
上は、a 関数内の処理の定義で、
下は、b 関数内の処理の定義だから、全く別の定義です！
new で作っている、2つのXHR インスタンス、requestFile も、
同じ名前ですが、異なるインスタンスです！
これを同じ、1つのインスタンスで使いたいなら、外のスコープで定義しないといけないのでは？
できるかどうか知らないけど
var requestFile = new XMLHttpRequest();
var a = function(url){
requestFile.onload = function () { };
}
var b = function(url){
requestFile.onload = function () { };
} でも、1つのXHR インスタンスで、2回もonload を呼び出してくれるのか？ >>266
aのrequestFileを取得する必要は無いでしょ
プロトタイプに上書きされないようにセットすることはできるんだから >>268
上書きしたいって言ってるんだから２回呼び出されなくていいんでね？
複数回呼び出したいならonloadプロパティではなくaddEventListener使えばいいんだし >>269
どうやって、loadイベントをセットするの？ XMLHttpRequestを上書きすればいくらでもやりようがある >>272
それだとプロトタイプ云々は関係なくなるな >>265 対応希望ブラウザはIE11,chromeです
閉じるボタン（ブラウザの×ボタン）または、こちらで用意したキャンセルボタンをクリックしたかどうかを判定する方法はありますか？
モーダル画面を開く処理の実装中です
子画面を開くときに親画面を操作不可にする処理を実行し、onunload処理で親画面に付与した操作不可の状態を解除するという流れにしています
しかし、子画面の中で画面を閉じる以外にもポストバックが走る処理があり、それらが実行された際にonunload処理が実行されてしまい小画面が閉じていないのに親画面が操作可能になってしまうという問題が生じています。
閉じるボタンまたはキャンセルボタンが押下された場合のみonunload処理の中身が走るように分岐を加えたいのですが、それらを判定する方法があれば教えてください button要素にbisabled設定してJSのifでtrue,false設定しよう bisabled?
disabledの誤字ですかね
閉じるボタンを押したらそのボタンをdisabledにしちゃえという感じですかね >>274
> onunload処理の中身が走るように
onunloadは使ってはいけません。
最後の最後の最後の手段で実行されてなくて問題ない
という場合にのみおまけで実行するためのものです。 特定の変化をキャッチして状態を測ろうというのは特定の場合には効果的だが、
そうでないときはできるのならばポーリングで直接状態を調べたほうが良い
まあ、今はnavigator.locksという素晴らしいAPIもあるんだがIE11では当然使えないしな text=''あいうえお<br><br>かきくけこ<br><br>さしすせそ";
という文字列をPタグで囲って
<p>あいうえお</p><p>かきくけこ</p><p>さしすせそ</p>
としたいのですが、
var array = text.split(/<br>+/);
var html = "";
for (var i = 0; i < array.length; i++){
html += '<p>' + array[i] + '</p>';
}
だと空の<p></p>もできたりして上手くいきません。
どのように書けばよいのでしょうか？ >>279
text.split(/(?:<br>)+/); >>280
できました！勉強になります。ありがとうございました '<p>'+text.replace(/(<br>)+/g,'</p><p>')+'</p>' var str="あいうえお<br><br>かきくけこ<br><br>さしすせそ";
console.log( str.split(/(?:<br>)+/).map(t=>`<p>${t}</p>`).join('') ); >>279
文字列でなく、ノード単位で扱った方が良いと思うけどな パーフェクトスクロールバーってやつを導入したんだけど、横方向のスクロールバーだけ非表示にする方法はありますか？ もう一個パーフェクトスクロールバーについて質問です
二つのdiv要素を縦に並べて配置していて、その２つを含む親のdiv要素にスクロールバーを設定しているのですが、その画面を表示すると二つ並べたdiv要素のうち上の要素の高さ分だけスクロールバーが表示されてしまいます
そして、画面上でホイールをクルクルさせると親のdiv要素全体のスクロールバーがちゃんと表示される（最初に表示された変なスクロールバーは消える）という状況が起きているのですが、最初から正しく表示させる方法はありますか… 下記リンクのページについて質問があります。
https://www.englishplus.jp/nuance/to-me-for-me/
firefoxでjavascriptを無効にして開くと、右クリックメニューは出るようになったのですが、
うまく、CTRL+Aや、文字列選択ができません。
javascript以外にどんな機構が働いてこのような挙動になるのでしょうか。
また文字列選択や、CTRL+Aをできるようにするにはどういうことが考えられるか教えてください。 「右クリック禁止 解除 アドオン firefox」で検索！
右クリック禁止は、
document.oncontextmenu=function(){return false;};
これを、
document.oncontextmenu = null;
で解除できるけど、
テキストの選択禁止は、解除できないので、
下の語句で検索して、解除していかないといけない
document.onselectstart, document.ondragstart, onclick,
stopPropagation, preventDefault, return false >>291
レスありがとうございます。
教えてもらったdocument関係のステートメントはjavascriptだと思うんですが、
firefoxで、javascript.enabledをfalseに切り替えたにも関わらず、
それらが動作するのは不思議です。 >>290
そのサイトはjavascriptではなくcssのuser-select: noneで選択できないようにしてあるから
ちなみにfirefoxはjavascript切らなくてもshift+右クリックでコンテキストメニューを出せる そういうユーザビリティの欠片もないサイトは見ないに限る うぜえと思って大昔適当なユーザースクリプトを書いたが7,8割はそれでずっと間に合ってるな
それも効かないやつはdevツールから見るか諦める cssの、user-select: none か！
初めて知ったw
ケチ臭え。テキストぐらい、コピーさせろや！w >>293
詳しい方、どうもありがとうございます。
>>296さんではないですが、
私も初めて知りました。
チップスを含めてとても参考になりました。
ありがとうございました！ 昔だったらjs使わなきゃダメだったことも
ie捨てればhtmlとcssでできたゃうことが多くなったね プログラミングしたいけど顔がキモオタ顔になるのが嫌です
職場のseの話し方とか顔が嫌い
最近ネットに増殖してきたエンジニア系男子の顔も本当に嫌い
どうすればいいですか >>298
IEは昔からCSSの対応はそんなに悪くないぞ
IE発のものも多いし >>293さんの投稿について、
ブラウザプラグインで、
cssのuser-select: none を抜くようなことができたらいいのに。
あるかな？ 幾つかのイベントでトップレベルでstopImmediatePropagationする
style*="user-select"を走査して外す
それだけでも半分以上に効果がある jQuery で、すべての要素を巡回しながら、user-select: none; なら、auto に変更する。
Chrome では、正常に動いた
$( function ( ) {
const user_selects = [ 'user-select', '-moz-user-select', '-webkit-user-select', '-ms-user-select' ];
$( '*' ).each( function ( index, element ) {
user_selects.forEach( elem => {
that = $( this )
if ( that.css( elem ) === 'none' ) { that.css( elem, 'auto' ) }
} );
} );
} ); >>307
修正。上下が逆だった
>user_selects.forEach( elem => {
>that = $( this )
that = $( this )
user_selects.forEach( elem => { 質問です
classって名前空間に閉じ込めることはできないんですかね？
他所のJS読んだときに
安易な名前だとぶつかっちゃいそうな気がするんですが >>307
それをどうやって相手のWEBサーバーからのHTMLに組込めば良いの？ Chrome のF12 開発者ツールのコンソールに、
「ここから～ここまで」の行、つまり「$( function ( ) { } );」の内側だけをコピーして、Enter を押す
これでエラーが出たら、そのページは、jQuery を使っていないから、
以下のすべてをコピーして、Enter を押す。
コードの内容は、head 内に、script タグを作って、Google のCDN から読み込んで実行する
でも、ひょっとしたら、jQuery を使わなくても、出来るかも。
素のJavaScript だけで、書けるかも知れない
const script = document.createElement( "script" );
script.setAttribute( "type","text/javascript" );
script.setAttribute( "src","https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"; );
document.head.appendChild( script );
script.addEventListener( "load", function( ) {
$( function ( ) {
const user_selects = [ 'user-select', '-moz-user-select', '-webkit-user-select', '-ms-user-select' ]; // ここから
$( '*' ).each( function ( index, element ) {
that = $( this )
user_selects.forEach( elem => {
if ( that.css( elem ) === 'none' ) { that.css( elem, 'auto' ) }
} );
} ); // ここまで
} );
} ); >>290のサイトの場合は
TampermonkeyやViolentmonkey拡張等のユーザースクリプトで
// ==UserScript==
// @name englishplus選択右クリ
// @match https://www.englishplus.jp/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function() {
function un(e) { e.stopImmediatePropagation(); }
document.addEventListener('selectstart', un, { capture: true });
document.addEventListener('mousedown', un, { capture: true });
document.addEventListener('contextmenu', un, { capture: true });
document.head.insertAdjacentHTML('beforeend', `<style>
* { user-select: initial !important; }
</style>`);
})();
でおｋ どんなサイトで来るか分からんしブックマークレットにしたほうが賢いでしょ jQuery を使わず、素のJavaScript だけで書けた！
Chrome のF12 開発者ツールのコンソールに、下のコードをコピーして、Enter を押す
//ドキュメント全体から全ての要素を取得する
const all_elements = document.getElementsByTagName( "*" );
for ( let i = 0; i < all_elements.length; i++ ) {
elem = all_elements[ i ];
if ( window.getComputedStyle( elem ).userSelect === "none" ) {
elem.style.userSelect = "auto";
}
} >>309
React, Vue.js か忘れたけど、フレームワークでは、scoped CSS になっていた プログラミング初心者
質問お願いします
ブラウザの作業を自動化したいと考えてます。ググってみた結果
現在pythonでSeleniumを使った方法を調べてますが、色々と苦戦しております。
検索ワードでjsでもできそうなのですがそもそもプログラムに詳しい方からすると
どちらの方法が好ましい(効率的とか簡単等)のでしょうか？
因みに使用用途はダウンロードを繰り返すというものです。
ひと昔前にあったダウンローダー等使えないサイトとなっております。
宜しくお願いします。 君自身が色々と調べて迷っているのに、
たった数行の情報をここに書いて見た人が何か判断できると本気で思ってるのかい？
せめてここのサイトのこのコンテンツをDLしたいですとか言ってくれないと
可能性が無数にありすぎて何もわからないでしょ 漏れは、スクレイピングに、Ruby, Selenium WebDriver, Nokogiri を使っている
ブラウザの自動操作もできるし 【VBScript】WSHについて話し合うスレ【JScript】
https://mevius.5ch.net/test/read.cgi/tech/1578522041/27
ここに書いたように、Ruby, Selenium WebDriver で、
ブラウザを自動操作して、Yahoo に自動ログインしてる
ユーザー名を入力して、ボタンを押す。
パスワードを入力して、ボタンを押す ダウンロードには、wget, curl を使う
それよりも複雑なものには、漏れは、Ruby, Selenium WebDriver, Nokogiri を使うけど、
各サイトの解析が大変
例えば、5ch の投稿から画像ファイルだけを探すのに、
「div.message a」内のURL で、拡張子が「png jpg jpeg gif」のものだけを絞り込むとか、
こういう処理を、Ruby以外で書くのは辛い
Rubyは、可読性が高いから良いけど javascriptでやるにしてもユーザースクリプトやブラウザ拡張、Node.js+Selenium、Electron等いろいろ方法はあるわけで 場合によってはコンソールに打ち込んでもいいだろうしな >>313
面白そうで試してみたいけど、
どう使えばいいの？ ググレカス
.user.jsにして拡張機能ページにDnDするだけだろポンコツ >>326
ありがとう、そのキーワードでググってみるよ わざわざファイルにせんでもユーザースクリプト拡張で新規作成選んでコピペするだけでしょ わざわざ拡張入れなくてもファイル１つ作るだけでしょ これ系は昔からブックマークレットで無効にしてたわ
>>290のサイトも試したがもちろん解除できる
この程度でjQueryを使う必要性も無いし、ユーザースクリプトやブラウザ拡張も不要 こういう直前の１，２レスしか頭に入らないやつをどうにかしてほしい
ブックマークレットの話は十分に出たからそれ以外の解決例をオマケで話してるんだろうが
頭悪すぎ Flexboxで二つの列をつくり、左が3つのブロック、右が一つのブロックをつくります。
position:stickyで右側のブロックのスクロールを半固定（左側のブロック要素が全表示されるまで固定）します。
JSでやりたいこと
右側のブロック（#col-4）の左側の中心値から、左側のブロック（#col-1,#col-2,#col-3）の右側中心値まで、
線を描きつなぎます。いろいろと、調べてソースを書き込み、取り急ぎ二つのブロックを繋げてみましたが
うまくいきません。どなたか解決方法をご教授ください。
■HTML
<div class="col-container">
<div class="part-1">
<div class="col must_col" id="col-4">あああ</div>
</div>
<div class="part-2">
<div class="col must_col" id="col-1">いいい</div>
<div class="col must_col" id="col-2">ううう</div>
<div class="col must_col" id="col-3">えええ</div>
</div>
<canvas id="myCanvas" ></canvas>
</div> ■CSS
<style>
.col-container{
position:relative;
display:flex;
flex-direction:row-reverse;
align-items: baseline;
}
.part-1 {
position: sticky;
top: 0;
width: 48%;
max-width: 48%;
width: 48%;
}
.part-2 {
width: 48%;
max-width: 48%;
align-items: stretch;
justify-content: space-between;
perspective: 800px;
}
.col {
margin-bottom:20px;
}
#myCanvas {
position : absolute;
left: 0px;
top: 0px;
}
</style> セミコロンの有無について質問です。
const half =(number) => {
return number / 2;
};
―――――――――――――――
If (条件式) {
処理
}
関数を定義する時は }; とするのに、
If文などでは }の後にセミコロンを付けないのはなぜですか？ ifは式じゃないから…というのはCの時代からの構文解析の決まりだな
と言ってもJSはそもそもセミコロン不要だから
本当に飾りみたいなもんだろう ありがとうございました！
ブロックという概念があるんですね。
progateでそこら辺のこと書いてなかったんで。
調べてみます！ ajaxについての質問です。
動画サイトにて、下記のように事前に用意した変数を
POSTで送信する場合に、プロパティ名に変数と同名を利用していました。
値のanswerが変数のanswerを参照するのは理解できるのですが、
プロパティのanswerは変数のanswerを参照してしまったりしないのでしょうか？
ajaxの送信する構文の中ではプロパティ名は参照しない…的な仕様なのでしょうか？
...
var answer = $selected.text();
$.post('test.php', {
answer: answer
})
... ajaxに限らずオブジェクト初期化子の裸のキーは変数展開されない
es2015以降であれば
{
[answer]: answer,
}
のようにブラケットで囲むことで変数や計算結果をキーにできる >>334
関数を定義するなども;は必須ではない、つけないスタイルもある
ただ特定の場合で次の行と結合するので、そこを気にしたくないのであれば;を無駄につけるというだけ
一方if文などは次の行と結合しないことがわかりやすいのでつけない人が多い
要するに気分や感覚の問題 >>338
https://tc39.es/ecma262/#sec-object-initializer-runtime-semantics-evaluation
LiteralPropertyName:IdentifierName
Return StringValue of IdentifierName.
評価はされない >>339
ありがとうございます。
いろんな言語の当たり前の仕様だったのですね。
すっきりしました。
>>341
すみません。
翻訳しましたが、よくわかりませんでした… >>341
ESの仕様書は英語としては難しいものではなく、
withだのofだのandだの小学校レベルの前置詞や接続詞さえ分かればほとんど読める
あとちょこちょこ出てくる単語はプログラミング用語だと思って暗記する
そして根気よく順を追ってゆっくり読んでいく力さえあればいい
まず構文の定義の見方
obj = { key: value } とあったら
https://tc39.es/ecma262/#sec-object-initializer の「Syntax」の所を見て
ObjectLiteral: { PropertyDefinitionList } から key: value がPropertyDefinitionListに当たるでしょ
PropertyDefinitionListのとこをクリックすれば更に定義に飛んで、PropertyDefinitionをカンマ「,」で区切ったものということが分かり、
PropertyDefinitionは４種類あるけど今回はPropertyName: AssignmentExpressionの形でしょ
つまりkeyはPropertyNameってことで、PropertyNameのどちらに当たるかというと
ComputedPropertyNameは[prop]の記法だから、そちらではない方でkeyがLiteralPropertyNameということが分かった
そしてその中でも、文字列リテラルでも数値リテラルでもないのでIdentifierNameということがわかる >>341
valueも同じように、AssignmentExpressionからたどって
AssignmentExpression→ConditionalExpression→RelationalExpression→ShiftExpression→AdditiveExpression→
MultiplicativeExpression→ExponentiationExpression→UnaryExpression→UpdateExpression→LeftHandSideExpression→
NewExpression→MemberExpression→PrimaryExpression→IdentifierReference→Identifier→IdentifierName
と長いけどただただ適切なところを辿っていけば見つかる
{ key: value }が{ LiteralPropertyName:IdentifierName }の形だということをどうやって知るかが分かったら、次に評価を見よう
評価はざっくり分けて２種類あって、「Static Semantics」と「Runtime Semantics」がある
まずコードという文字列が最初に読み込まれてパースされるときに働く処理がStaticの方で、
上の行から実際に処理が始まってその構文が効力を発するときに働く処理がRuntimeの方と思ったら良い
StaticはRuntimeの前段階とも言えるので、それっぽいRuntimeの目安がつけられるのであれば、
最初にRuntimeを見てわからない定義が出てきたらStaticやSyntaxをみるのが効率がよい
今回はオブジェクトの大本のRuntimeから見ていこう
https://tc39.es/ecma262/#sec-object-initializer-runtime-semantics-evaluation
ObjectLiteral:{PropertyDefinitionList}に当たることはSyntaxで事前に調べて分かっている（ここからリンクを飛んで調べてもよい）のでその下の処理を読んでいこう >>341
1.Let obj be OrdinaryObjectCreate(%Object.prototype%).
Let X be YとはXをYとおく、つまるところX = Yということ
OrdinaryObjectCreate(%Object.prototype%)はプロトタイプをObject.prototypeとした一般オブジェクトを作る処理
プロトタイプをObject.prototypeとした一般オブジェクトとはつまるところ「 { } 」のこと
つまり obj = { } ということ
2.Perform ? PropertyDefinitionEvaluation of PropertyDefinitionList with arguments obj and true.
Performとは実行すること、PropertyDefinitionList のPropertyDefinitionEvaluationという処理を、1.のobjとtrueを引数として渡して実行
つまり PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true ) ということ
Performの後の?はReturnIfAbrupt処理の省略記法
JSの内部的には何か処理をするたびに、渡された値が期待したものでなかった場合など、エラーが起こりうる
しかし、内部処理を途中で中断することは、エンジンのハングアップや強制終了を意味するのでそれはできない
正しい処理ができたときは、正しい値を普通に返すのと同じく、問題が起きたら問題が起きたという値を返さないといけない
それを判断しているのがReturnIfAbruptであって、正しい処理なら次へ進み、そうでなければ例外を呼び出し元へ返す
つまり、3.Return obj.と合わせるとこういうこと
try {
PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true )
}
return obj >>341
こういう感じで読んで行けばよい、次に
PropertyDefinitionEvaluationではまず
PropertyDefinitionList:PropertyDefinitionList,PropertyDefinition
が評価されて、カンマで区切られた各プロパティ定義が再評価される、次に
PropertyDefinition:PropertyName:AssignmentExpression
1.Let propKey be the result of evaluating PropertyName.
evaluatingとは評価することで、つまり propKey = PropertyNameの評価
今回はPropertyNameの中でもLiteralPropertyName、その中でもIdentifierNameということが分かっているから、
LiteralPropertyName:IdentifierNameをみて、1.Return StringValue of IdentifierName.
つまり、IdentifierNameの文字列を返すことがわかる
慣れてくるとこの時点でもう先を見る必要はない
もし{key:value}ではなく{'key':value}だった場合は'key'はIdentifierNameではなくStringLiteralになるわけだが、その処理は
1.Return the String value whose code units are the SV of StringLiteral.
つまりその文字列を返すということがわかる
なのでこういう整然とした積み重ねロジックで普通に考えるとこの先の処理で何か違うことが起こるとは考えにくいので
{key:value}と{'key':value}は同じということが予想できる
勿論先に進んでpropKeyがどのように扱われているかを見ていってもよい
ざっくり言うとこういう感じでESの仕様書は読める >>345 に間違いがあった
try {
PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true )
} catch ( err ) {
return err
}
return obj
のイメージが正しい >>338
例えば、そのオブジェクトと、
そのオブジェクト内のプロパティーのキーが同じ名前でも、区別がつく
let obj = { obj: 1, a:2 }
オブジェクトそのもの
console.log( obj ) //=> { obj: 1, a:2 }
オブジェクトの各プロパティー
console.log( obj.obj ) //=> 1
console.log( obj.a ) //=> 2 そもそも概念的には一般的に物体というものが名前を保持しているのではない
名前が物体を参照しているのだ インプットのvalueを変えたいんだけどdomのIdでないと中身変換できないん？
nameもclassもやってみたけどミスってるわけじゃないのに変化しないから気になったんだけど function EventHandler(event) {
var e = event || window.event;
}
イベントオブジェクトの取得で↑が例としてのってたのですが
またはの記号って左辺が優先されるとかありますか？
event がなければ window.event から取得するみたいな >>353
JavaScript ID属性で取得/設定する(getElementById)
https://itsakura.com/js-getelementbyid
getElementById は、単数形を返すけど、
下のものは複数形を返すから、最初の要素なら、
elements[ 0 ] みたいな順番を指定しないといけない
var elements = document.getElementsByClassName(names);
elements は、見つかった要素の生きた HTMLCollection です
var elements = document.getElementsByName(name);
elements は、生きた NodeList コレクション
VSCode では、入力補完で、戻り値の型も表示される！ >>354
短絡評価だろ
左が真なら、右を評価しないで、左を戻す。
左が偽なら、右を評価して戻す
let e = 1 || "a" //=> 1
e = null || "あ" //=> あ >>353
querySelector
querySelectorAll
getElementsByClassName
他にいくらてもある >>355
どうも、後で見直したら配列で戻ってくるのに気づいてなかった
ありがとう 配列じゃないけどね。
本当に配列が欲しいならArray.from( )か [... ]で囲みなよ。 IE11というクソカスの為にObject.getOwnPropertySymbols()のポリフィルを自作したいんだが、
どんなアプローチでSymbolを区別してやればいいかねぇ？ >>361
配列だろArrayじゃないと言うだけで JavaScriptにおいて、Arrayの一般的な訳語が配列ではないと言うのなら、そうですね。 NodeListは「配列メソッドが使えない！」という誤認が初心者でよく見かけるな 間違いじゃないよ。今は改善されて配列メソッドと互換性があるメソッドがNodeListに追加されたってだけ
だから古いブラウザだと動かないことがある。 鳥は飛べますが、
猫が飛べるようになったら鳥でしょうか？ 存在しないものを例に挙げるのは詭弁のガイドラインに抵触しますが、
あえて言うならば猫メソッドに鳥メソッドを追加しても個別の飛べる猫です
人間が琵琶湖で飛んでも鳥ではなく鳥人間と呼ばれます ダックタイピングとは、Rubyなどの動的型付けオブジェクト指向プログラミング言語で行われる、
型付けのやり方です。 次の文章が基になっている考え方となっています。
「もしもそれがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルである。」
つまりドナルドダックはアヒルです。 >>365
結局配列みたいにインデックスで呼び出せるんだから同じでしょその意味では >>367
> 今は改善されて配列メソッドと互換性があるメソッドがNodeListに追加されたってだけ
これは本当ですか？
NodeListにはforEachだけでなく、pushやconcatもあるのですか？ >>371
JSでは配列は特殊なオブジェクトと言うことができるが、これをもってオブジェクトは配列であるというのがお前の意見。
それでいいならいいんじゃねメンドくせえ。
リアルでもガンガンそう主張していけよｗ >>372
ないならないんじゃねｗ
知らんよ。俺はNodeListは配列だと思ってないし。
そういったブラウザ間の違いとか、本質的でない部分で
無駄に疲れるのがいやだからjQueryを使うわけで >>374
>>367の「間違いじゃないよ」は>>366の「配列メソッドが使えない！」にかかってたんじゃなかったのか？
主張に一貫性がないな >>371
たとえば
const NL = document.querySelectorAll('div');
これはイケるけど
NL.forEach((item) => { console.log(item) });
これは駄目、配列じゃないから
const hoge = NL.map((item) => { return item.innerHTML; });
20年以上前のgetElementsByTagName時代から
「配列と同じでしょ」っていう人は一定数いて
どこかで配列として扱おうとしてコケる、っていうのを繰り返して今に至ってる
だから、今まだこのスレで質問する側なら、あんまり意固地にならず
ノードリスト、コレクションは配列とは似て非なるもの、って認識を持ったほうが良いよ
というのが答えてる人の総意だと思う >>365
それは違う
querySelectorとquerySelectorAllが返すのはNodeList
getElementsByTagNameや、要素.childrenが返すのがCollection
NodeListは静的で、取得後にDOM内で要素が増減しても変わらない
Collectionは動的で、取得後でもDOM内で要素が増減すると変わる
getElementsByホゲホゲを使うことはもう無いだろうけど
childrenはまだ使う機会があるだろうから、覚えておこう なんでこんなばらばらの仕様にしたの？
それを吸収するjQueryは素晴らしいね！ NodeListは静的で、取得後にDOM内で要素が増減しても変わらない
だけでDOMの内容自体は変わることに注意
Collectionは動的で、取得後でもDOM内で要素が増減すると変わる
のでインデックス番号とかで扱ってるとバグることがあるので注意 >>364
頭大丈夫か？
Arrayの一般的な訳語が配列あったとしても、
その逆も同じとはならないだろ
「配列」はより一般的な用語だ >>364
「配列」をArrayと1:1関係と決めつけるほうがおかしいでしょ
>>371は多分用語の「配列」のことを言ってるんでしょ
そもそも大大大前提としてJSのArrayはただのオブジェクトでしょ
別に数字キーで管理されているわけでもなく、普通の文字列と値の組み合わせのオブジェクトでしょ
ただほんのちょっとプロキシ的にlengthと数字キーを扱ってArrayらしさが出てるだけの
「呼ぶことができるオブジェクト」である関数と同じように
他のビルトインオブジェクトと比べても異色ではない存在でしょ
その点実際にJSと絡むときはレイヤー挟んでるとは言えListと名が付いてて
仕様の表現的にはNodeListのほうがよほど配列らしいでしょ
それなのにArrayだけを配列と呼ぶことに拘る論理的な必然性と意味があるのか？
あまりにもナンセンスでしょ
あと>>365もおかしい
NodeListもコレクションだから
liveなコレクションがHTMLCollectionでstaticなコレクションがNodeListってだけだから >>381
> そもそも大大大前提としてJSのArrayはただのオブジェクトでしょ
> 別に数字キーで管理されているわけでもなく、普通の文字列と値の組み合わせのオブジェクトでしょ
はあ、そうですか
つまり、あなたの中では {0:0 ,1:1, length:2} も "" も配列なんですね
曖昧な世界に生きてますね 373 Name_Not_Found sage 2020/03/06(金) 19:22:12.14 ID:???
>>371
JSでは配列は特殊なオブジェクトと言うことができるが、これをもってオブジェクトは配列であるというのがお前の意見。
それでいいならいいんじゃねメンドくせえ。
リアルでもガンガンそう主張していけよｗ >>248
>>249
ライブラリを使わずにオフラインで3Dゲームを作ることが出来ました。
仕組みを1から理解出来て良かったです >>356->>357
遅ればせながらありがとうございます。
短絡評価というのですね。
if文で何の気なしに使ってるだけで、左辺から処理されているとか考えたことなかったです。
どうも！ オフライン環境でファイルの書き込み＆保存をする方法はありますか？
読み込みなら出来てるんですけど… >>381
配列に限らず
全てのオブジェクトはObjectオブジェクトの子孫だよ >>388
これはテキストエディタ書き込みでもしたいんじゃねえの？ >>383
そうではない
Arrayを配列たらしめてるのは[[DefineOwnProperty]]内部メソッドの効果であって
逆に言えばArrayは[[DefineOwnProperty]]トラップがあるだけの普通のオブジェクトだと言うことだ
>>389
プロトタイプ的に子孫であるかどうかの話をしているのではなく、
形態と効果について話してる 要するに話を戻すと、
Arrayというのはその存在がそのものがJSの中で特殊なものではなく、
オブジェクトがトラップによって配列たらしめられているからArrayは配列なのであって、
他の配列たらしめられているオブジェクトも同じく配列と呼ばないというのはナンセンスだという話 一般的にはarray-likeと呼ばれているよそれ。
配列はやはりArrayと対応する訳語として使われててArray.prototype継承してるオブジェクトだね。
Node ListやHTML CollectionをArray-likeではなくArray、配列として認識しろってんならその定義をチームや話相手と共有してくれよな。
常識にしたいなら標準化組織と話し合ってね。
俺らに言われても困る。 いやいや、Arrayも配列だが、配列はArrayだけではないでしょ
例えばTypedArrayは型付配列だけど、型付配列は配列じゃないか
そのように配列っていうのは広い概念でしょ
何を理由のない変なこだわりをしてるんだか それとArray.prototypeを継承しているかっていうのと、
Array（のインスタンス）かどうかっていうのは別でしょ
Array.isArrayでもわかるように
Arrayかどうかっていうのは内部メソッドが付与された
Arrayたらしめられているオブジェクトかっていう点が重要でしょ？ JSでなんちゃらオブジェクトっていうのは、
どんな修飾がされたオブジェクトかっていう括りであって
プロトタイプはオマケであって本質とは関係ないでしょ？
ArrayはArrayたらしめる修飾がされたオブジェクトであって
その修飾の方向性を配列と呼ぶんでしょ
その中でも具体的に大きい特徴は、
lengthプロパティが実際の配列としての要素数とリンクしているということでしょ
その点例えば{0:'a',length:1}は用意に世界観が壊れるが
ある種似ているかもしれないTypedArrayは要素数固定のおかげで
Arrayのように個性的なトラップメソッドを付与されていない、
内部スロットがある薄い特殊オブジェクトだけど、配列と呼べるんでしょ
ならばNodeListとかも配列と呼ばないのは不自然でナンセンスだとは思わないかい？ キモいというのは幼少期から言われ慣れてるから
多分今日も昨日も職場で言われたし
ただ俺は人間よりもJS、Web大好き人間なだけであって
エンジニアとして技術的な話がしたいし
プログラミングの世界に余計な雑念を持ち込まれたくないだけであって、
入門者が曲がった価値観を植え付けられるのを見ていられないだけだからね つうか根拠があるならそれを自信満々にはっきり言ってほしいのよ
慣習的にそう呼ばれてるんだっていうのは俺も理解はしてるから
そうやって理屈と理屈が打つかるところ、両者の意見を見て
初心者ってどういうものが良いのかを学んで感じていくものでしょう？
両者のはっきりした意見が並んであるのをWebに刻みつけて残すことが
後から検索で見に来た人のためでもあるし、
この先の未来を見据えてもビッグデータとしての側面からも価値のあるコンテンツを作っていきたいでしょう？
少なくとも俺はそう思ってこのスレにずーと居るのでなんかひかれ気味なのは残念 ID未定義の名無しが話し合ってると意味が分からない
Arrayの定義の話をする前にそっちをちゃんとしてください（名前くらい書け） ID未定義の名無しが話し合ってるから意味がわからないのではない
読み書きは人間が後期に獲得した能力なので
人々が話し合っている会話文を読み解くのは非常に難しい
それどころか海外に行ったら半分くらいの人間は10秒以上他人の話を集中して聞けない
それくらいが本来の人間の能力
日本人は、2chは素晴らしい >>388
自分のPC に読み書きするなら、Ruby, Node.js みたいなサーバー側が必要
VSCode も、Chromium, Node.js を使っているから、
GUI は、ブラウザのChromium で、
サーバー側はNode.js で、ローカルファイルにアクセスできる >>396
ふーん。で、NodeListとHTMLCollectionのArray.isArrayの結果は？ >>406
なるほど、オンラインじゃないと無理なんですね
参考になりました
>>390
>>391
職場のパソコンで遊んでるんですが、保全が強くてネットに繋いだらダメなんです_( _´ω`)_ >>407何の話をしようとしているのか？
全ては>>363から始まった話だということを理解しているのだろうか？ >>408
Chromeの拡張でも作れば？
それかフラグ立てればローカルに書き込みができるNativeFileSystemAPI使える aタグからjs実行してスーパーリロードさせたいのですが、以下コードをchromeの検証でnetworkを眺めていると304が返ってきます
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<a href="javascript: window.location.reload(true);">更新</a>
</body>
リンクの部分を以下のように動的に埋め込むようにすれば200が返ってくるようになりますが、ここまでする必要があるのでしょうか？
var updLink = document.getElementById('upd-link');
var linkHtml = '<a href="./?' + Date.now() + '">更新</a>';
updLink.insertAdjacentHTML('beforeend', linkHtml);
<body>
<div id="upd-link">
</div>
</body> >>413
no-cache のところを no-store にしてみましたが、304 not modified が返ってきてしまいます スマホが出てきたあたりからmetaタグもレスポンスヘッダもキャッシュ関係は無視してIf-Modified-SinceやIf-None-Matchを渡してサーバー側に委ねるブラウザが多い。更新されてればリロードされるのだから通常は問題ない
更新されてなくても強制的にリロードしたいなら動的にクエリ付けるしかないね >>415
web系の開発は初めてで常識的なことが分かってなくてすみません
jsを使って定期的に内容が動的に更新されるページを作成しているのですが、
動的に作っているせいなのか自分のテストが間違っているのか、
ベースhtmlを修正・更新してもクライアント側が更新されないことがあるなと思って
隠し更新リンクを作ってみたところ、これでも更新されないなと思い今回の質問に至りました
とりあえず納得しました
どうもありがとうございました リンク先のファイル(複数)をダウンロードするプログラムを書きたいんだが、どういうコードにしたらいい？ カッコの使い方を教えてください。
( ), { }, [ ]、こういうやつです。
console.log([0, 1]) // => Array
console.log({0, 1}) // => Uncaught Error
ここまでは理解できるのですが、
console.log((0, 1)) // => 1
console.log(typeof (0, 1)) // => number
なんでこうなるのか？良くわからんです。
カッコ( )で括った文が実行されて、最後の文の結果を返すのでしょうか？
(console.log(0), console.log(1)) // => 0, 1
でした。 ×文
○式
×実行
○評価
なら、理解は正しい。カンマ演算子で検索してみな。 >>417
ダウンロードには、curl, wget をよく使う
プログラムなら、Ruby。
Node.js でも出来るかも そもそもダウンロードをする必要が本当にあるのか？
無駄に宇宙のエントロピーを増やしていないかその燃費の悪い頭でもう一度考えたほうが良い 24通りのペアが一組ずつとペアにならない1枚のカードの計49枚で7×7の神経衰弱を作りたいのですがどうすればいいでしょうか・・・？ >>427
まあまあ簡単だよ
まずHTMLに
<h1>神経衰弱</h1>
<div id="concentration"></div>
だけ書いておく
JSはconcentration.jsという別ファイルにしておく
カードのデザインが必要なので24＋1枚の絵を
なんでもいいのでグラフィックソフトで描いて
出来たらそれを2枚印刷する
印刷できたら
それを切り抜いたら出来上がり
2枚目のジョーカーは切り抜かなくてOK えーと・・・
できればそれをブラウザ上で行えるようにしたいのですが・・・ このスレはこういうガイジが居着いてるから質問しない方がいい >>429
まあ落ち着け気が早い、まだ続きがある
CSSで
body{ background: #006600;}
h1{ color: #ffffff;}
として
次にHTMLで、スマホ、タブレットに対応するために
<meta name="viewport" content="width=device-width">
と書いておく
これ現代のHTMLの常識だから
次にconcentration.jsをエディタで開く
エディタは出来る限り大きく開こう、なんならフルスクリーンで
かわりに HTMLは、iPad Proのような大きなタブレットでブラウザを開き表示させておく
こういう快適なコーデング環境を作るのは大事なんだプロはみんなやってる
そして、さっき切ったカードをタプレットの上に並べる たしかにブラウザ上で行ってるが…
デスクトップのディスプレイだとカードが下に落ちるのでは？ 答えてる方は当然ガイジだけど、質問してる方も聞き方が漠然とし過ぎてて、大概ガイジじゃん >>429
作成済とかいう普通の神経衰弱のコードをまず出したらどう https://www.dropbox.com/s/fz510z61lky6i7k/aaa.txt?dl=0
漠然とした聞き方になってしまいすみません。
これが製作した神経衰弱のコードの一部(javaのみ抜き出し)になります。 宣言せずに変数使ったりsetTimeoutに文字列渡したりとかなり懐かしい書き方してますなぁ >>435
90年代を思い出すコードだな
そしてJSでこのインデントルールを実際に使ってるのを見るのも
かなり久しぶりかも >>435
そのリンクのソースコードを使わない方がよい。
変数にコメントが無いから、変数をどういう意味で使っているのか、他者には分からないから、
それを解析するだけで、時間を浪費するから、無視すべき！
アプリは、仕様書からプログラムになる。
プログラムから仕様書を推測するのは、逆行するから、極めて難しい
まず、仕様書を作って、変数の使い道を説明してから、プログラムを他人に見せること！
他人に、アプリの仕様を解析させちゃいけない！
そこが一番難しいから企業は、1人月百万円とか払うわけ
それに、Java じゃない！
JavaScript です！
他人のアプリを使わず、1行ずつコメントを付けて、自分でプログラミングしてください！ 特に、my_reset という関数の内容がヒドイ
こういう数式をポンと出されても、仕様書が無いから、意味が分からない。
num=Math.floor((masu_w * masu_h) / (pic_num * 2));
特に、masu_w * masu_h などは、あちこちで何回も出てくる。
すべてのマス目の数なら、ALL_CELLS_SIZE = 100 とか、定数を定義すべき
まず、定数と変数の書き方を変えること！
仕様を知らない人から見れば、謎のような数式
if(max >= (pic_num * 2 * (i+1))+pic_num){ break; }
すべての行に、コメントを付ける。
プログラミングの内容ではなく、仕様の意味を解説する
まず、ALL_CARDS[ 0～48 ]に、49枚のカード・インスタンスを入れましたとか、
各カード・インスタンスには、各画像のURL がありますとか、
インデックス[0・1][2・3]～[46・47]は同じカードで、[48]だけはペアにならないカードですとか、
こういうのを決めるのが仕様 流石に野に落ちてるコードに仕様書まで求めるのもなあ 回答者がプログラムから、仕様まで推測して教えるのも、お門違い
だから、他人のコードのコピペは、ダメ！
質問者自身が仕様を分かっていないから、仕様の推測を誰かがしないといけなくなる
だから、自分自身で仕様を決めて書いたものしか、質問してはいけない！
他人のコードをコピペしたものは、質問者も仕様を分かっていないから、
ピンポイントで要点だけを抜き出せない
だから、全部のコードを貼って、誰か解析してくださいとなるw >>439,441,443 は通称rubyキチガイと呼ばれるガイジ。
書き方がキモいのでレスの内容がぜんぜん頭に入ってこない。 49枚のカード・インスタンスを作って、配列に格納する。
number には、1,1, 2,2,～24,24,25 の数字を入れる
class Card {
constructor( number ) { this.number = number }
}
let cards = [ ]
for ( let count = 1; count <= 49; count++ ) {
number = Math.ceil( count / 2 ) // 切り上げ
cards.push( new Card( number ) )
}
console.log( cards.map( x => x.number ) )
出力。49枚のカード
1,1, 2,2,～24,24,25 最初から数字を全て確定させて配っておく必要はない
観測された時に１枚１枚確定させていけばいい type GameState = {
cards: number[],
openCards: boolean[],
step: '0open' | '1open' | '2open',
openCard: (i: number) => void,
turnChange: () => void,
playerPoint: { a: number, b: number },
currentPlayer: 'a' | 'b'
}
ロジック分離したら state はこんな感じで実装すれば良さそう このスレって書き方からアルゴリズムまで手取り足取り教えてくれるスレだったの？ 2015年、脱jQueryが叫ばれてから5年が経ちました。シェアは10%以上増えました。今年は0.2%増えてます
https://rosie.5ch.net/test/read.cgi/liveplus/1584507264/ そう。
bootstrapは最新の５でようやく脱jQueryとあいなった模様。
ただwebの３分の１を占めるWordPressがデフォでガッツリjQuery入れてるからね。
今年のWordPressの伸びは0.2%どころじゃないから、そう考えるの単体での採用は減ってんだろうね。 jQuery が含むものは、
1. Ajax
2. 各ブラウザ互換性のPolyfill
3. CSS・セレクターなどを便利に拡張したもの
4. 便利で汎用的な関数
これらを各々、分離してもよいとは思う。
多くの人が使いたいのは、2, 3
1はaxios、4はLodash へ分離できる あのさぁｗ、slimビルドって知ってる？
なんでslimビルド版ができたかも。 >>445
の続き
cards の中身をシャッフルしたいのなら、Lodash のshuffle を使う
let new_cards = _.shuffle( cards );
console.log( cards.map( x => x.number ) ) // シャッフル前
console.log( new_cards.map( x => x.number ) ) // シャッフル後 lodash使うならそもそも_.range(50).map()が使えるぞ さすがに、配列内の要素のシャッフルを、自作する人は、いないでしょ
ライブラリを使わないと無理 >>454
> jQuery が含むものは、
> 1. Ajax
すでに分離されている。
> 2. 各ブラウザ互換性のPolyfill
もとからjQueryはPolyfillを提供していない。
どのブラウザでも動く機能のみを使ってるだけ
> 3. CSS・セレクターなどを便利に拡張したもの
分離されてる。Sizzle。使いたければ単体で使える。
jQueryはSizzleを前提としてるから取り除くことはできない。
> 4. 便利で汎用的な関数
それはjQueryが自身が内部で使うために作られたもの
便利だからAPIとして提供しているが取り除くことはできないし
jQueryにとって意味がないものは実装されていない。
便利で汎用的な関数を充実させるプロジェクトではない > どのブラウザでも動く機能のみを使ってるだけ
いいえ。たとえばquerySelector(All)を使えるときはそちらを使うようになっています。この時querySelectorが使えないブラウザの場合はsizzleが使われます。 >>460
jQuery のソースコード内には、大量のPolyfill が書いてある！
Support: Android <=2.3 only
Support: Android<4.0
Support: Android <=4.0 only
Support: Android <=4.0 only, PhantomJS 1 only
Support: IE, Opera, Webkit
Support: IE6-11+
Support: IE <=8
Support: IE<9
Support: IE 9 - 10 only
Support: IE 9-11, Edge
Support: IE <=9 - 11, Edge 12 - 13
Support: IE 11, Edge
Support: real iOS 8.2 only
Support: Firefox<24 Polyfillっていうのは特定のブラウザにないAPIを
JavaScriptを使って互換APIを実装することだからな
Polyfillが使われるとブラウザが持ってるAPIが変化してしまう。
本来ないはずのAPIが何故かできてしまう。
自分でPolyfillライブラリを使って意識的にやってるならいいが
jQueryが勝手にブラウザの足りない機能を埋めてたりすると
余計なことすんなって言われる。だからそんなことはやらない。
jQueryはブラウザの標準機能を変えたりしない
似たようなことをして互換性問題を起こしたのがPrototype
その反省から生まれたjQueryはPolyfillを提供しない >>459
大した手間でもなくない？
数行出し
ライブラリができる前から手で書いてたから
あんまり気にならんなあ まあMath.random()で出た順番に入れ替えるだけ
みたいな簡単なやつならそうだわな
ポンコツの俺でも出来る 初心者すぎて恐る恐るお尋ねします
【環境】Windws10、Firefox74 共に64bit版
下のコードをnewWin10、10.htmlまで繰り返したいのですが、
function openWin(){
newWin01 = window.open("hoge/01.html","newWin01","width=100,height=100");
newWin01.focus();
} 途中送信失礼しました
forで( var i = 01; i < 11; i++ )と書いた場合
01の0はそもそも返ってくるのか
iの値を記述の中にくっつけるにはどう書いたらよいのか不明でこちらに来てみました
ご教示いただければ幸いです そもそもその i 使ってなくね？
俺の愛は使う相手がいないが… >>469
数値リテラルつって、数字の書き方みたいなもんなんだが
01と書くと、それは8進数になる
まあ1だから十進数になおしても1なんだけど >>469
('' + i).padStart(2, '0') >>459
定番のFisher–Yates shuffleは自作したが、別段難しくなかった >>477
その自作というのはどのレベル？
・なにもない所から自分で考え出した
・解説、数式から自分でコードを起こした
・すでにある他の言語のコードをJavaScriptに翻訳した
・すでにあるJavaScriptのコードを自分なりのコードで書き直した
・関数をコピーした
どれも自作だけど、レベルがぜんぜん違うよね フィッシャーイェーツは
わりとみんなたどり着きやすいやり方じゃね？
一個ずつランダムに取り出すって >>478
> ・なにもない所から自分で考え出した
Fisher–Yates shuffleと書いてるのに、なぜこの選択肢が出てくる？
> ・解説、数式から自分でコードを起こした
公式サイトにあるアルゴリズムをコードに起こしただけだから、これ
アルゴリズムからコード化はプログラマなら基本だろう？ トランプランダムに並べろって言われたら
よく切って1枚置く、よく切って1枚置く…ってやるだろ普通
FYシャッフルてのはそれくらいありがちだ >>481
アルゴリズムからコードを起こしたってことは
言語を置き換えたってことだよね？
それとも元のアルゴリズムにコードレベルのものはなかった？
それちゃんとテストした？バグがないことをどうやって証明してる？ それが質問かな？
じゃあJS固有の話じゃないからよそでやってね。
ひとりで寂しいからってここで話し相手募るなジジイ。 >>459
randamな位置の要素を取り出してくだけでいいじゃん >>483
> アルゴリズムからコードを起こしたってことは
> 言語を置き換えたってことだよね？
関数一つ定義しただけで言語が書き換わるわけないだろ
ここまで頭が悪い奴とは思わなかった
> それとも元のアルゴリズムにコードレベルのものはなかった？
文章しかなかった
> それちゃんとテストした？バグがないことをどうやって証明してる？
テストした 自作するぐらいなら、Lodash などの多くで使われている、ライブラリを使う
自作は、テストが大変だし、
汎用的なものはできるだけ、ライブラリで済ませたい
webpack で、Lodashの個別の関数だけを読み込めるし、サイズも大したことないから そうやって人の作った物使うだけだと
いつまで経っても自分で何か作ることなんて出来ないよお？ >>483
> 言語を置き換えたってことだよね？
何その謎論理
アルゴリズムをなんだと思ってるの？ Fisher–Yatesって制御構造の練習問題として使われてもおかしくないぐらいに単純じゃん
よく題材になるソートアルゴリズムよりも簡単
Fisher–Yatesすら実装出来ないレベルなら、「僕は日本語で説明されてもコードを書けないので、コピペコードをください」っていってるようなもの >>478
>・なにもない所から自分で考え出した
むしろそうでない方が優秀なんじゃね？
ふっつーのボンクラ初心者が頭ひねって考えて
最初に出てくるのはFY法だろう
少なくとも俺はそうだったわ >>491
自分で考えてFY法に辿り着いたなら、君は十分優秀だよ >>492
えええええ
これより簡単に思いつくのってどんなの？ localeCompareのusage:"sort"とusage:"search"て具体的に何が変わるん？ >>493
世の中には>>459や>>483のような、無理と諦めて考えることを放棄する人間がいるのだよ ID有りのスレにしない？
自演っぽいのばっかじゃん もう今まで何十回もスレが分岐したから
それで淘汰されて残ったのがID無しのスレだから
歴史を繰り返すな >>496
作ってくれても良いけど、少なくとも、2-3人は定住する人間がいないと機能しない
「誰かやれ」な感じなら、100%無理だと思う >>496
自分が移動するのは簡単だが、他人を動かすのは難しい
頑張れ
+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/tech/1491143438/ ※念の為に言っておくが、他のスレが出来たら
両方のスレに行くだけです。つまり俺のスレが増える。 念の為にいっておくが、>>500は俺ではないからな 自演疑われたくないならsageなきゃ良いだけじゃん
逆にそうしないのは自演だと思われても構いませんよってことだろう 念の為にいっておくが、>>502は俺ではないからな 念の為にいっておくが、>>504は俺ではないからな >>502
以前、そう伝えたら、「やりたきゃ勝手にやれ。俺は一向に困らん。」といわれた
困らんのなら、「俺ではない」発言が不要なはずなんだけどな 画面の選択した文字列を翻訳するのにGoogle翻訳に飛ばしていたのですが、制度の良い翻訳サイトがあったのでそちらに飛ばせないかと思い該当部分のURLを置き換えましたがやはりそう簡単な事ではありませんでした
サイトに適したやり方が必要だと思うのですが、どこをどういじれば可能かわかるでしょうか？
【環境】Windows10 64bit PRO Firefox74
【条件】選択範囲を翻訳
【何をしたのか】下記のコードのURL部分を対象サイト（https://www.deepl.com/translator）に書き換えたら404 Not Found 後ろに?uとか付いてる所を消してみたりしても変わらず
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】
javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())
||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!='')
{location.href='http://translate.google.com/?text='+t+'&;hl=ja&langpair=auto|ja&tbb=1&ie='+e;}else
{location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl=ja&langpair=auto|ja&tbb=1&ie='+e;};
（長過ぎると出たので改行しています）
どうかよろしくお願いします こんな感じか
(() => {
const t =
(window.getSelection && window.getSelection()) ||
(document.getSelection && document.getSelection()) ||
(document.selection &&
document.selection.createRange &&
document.selection.createRange().text);
if (t != '') {
location.href = `https://www.deepl.com/translator#en/ja/${t}`;
}
})();
javascriptラベルつけて ↑ >>508-509
ご教授頂きありがとうございます
試した所ちゃんと翻訳する事が出来ました
助かりました、本当にどうもありがとうございました ここで質問していい内容かどうかわからないのですがが、お知恵をお貸しください。
ttps://github.com/rymbau/polaroid-gallery
で配布されているフォトギャラリーを実装するJsvaScriptですが（リンク先で実例が見られます）、macのSafariでのみ、閲覧すると写真（および文字）がひどくぼやけます。ChromeやFirefox、iOSのSafaiでは問題なくクリアーです。
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
などを試してみましたが解決しません。何か解決策があるでしょうか？ >>511
figure img {
image-rendering: -webkit-crisp-edges;
}
を入れたところくっきり表示されました >>512, 513
早速ありがとうございます。私が試している画像では、レンダリングがされなくて、
かえって見にくくなってしましました（涙）。残念…。
検証画像でもそうなのですが、表示されているものをマウスでドラッグしてローカルに
取り込んで開いてみると、表示されているものよりだいぶ綺麗なんですよね。同じ webkit
でも、なぜ Mac の Safariだけ？ demo ページで使われてる画像ダウンロードして試すとかどうですか？ >>516
一応、ソースのパッケージにはデモのセットが入っているので、「image-rendering: -webkit-crisp-edges; 」
を入れて確認しました。確かにデモの写真ではぼやけは解消されていますね。
私が使っているのは線画なのですが、それだとこうはいかないみたいなんです。画像はどうやら
「解像度を調整」＋「レンダリング」という手順で処理されているみたいですが、線画だと
の前半の「解像度の調整」でかなり荒い画像になるみたいんです。
実はその処理はデモ画像中の文字にもかかっていて、ChromeやFirefoxで閲覧した画像と比べると、
フォントもかなりぼやけているのが見ていただけると思います。写真も綺麗になっているようには
見えますが、他のブラウザと比べるとやはり荒さが見て取れます。 >>509
URL に文字列を入れるのなら、特殊文字をURI encode する必要があるのでは？ letとvarの違いが分かんなくなっちまったから教えてくれん？
for(let i)とfor(var i)でメモリパフォーマンスに違いはあるんかね。
letはループ毎に変数生成されるからメモリに悪そうなイメージだけど実際の所どうなの？ >>519
初心者＝計測せずにパフォーマンスがーといいだす
初心者＝実行速度しか見えてない 今は、let
var は非推奨。
スコープの解釈が色々あって、バグるので難しい gulpは、メソッドチェーンで書けるから、左から右へ読めるけど、
npm scripts は書きにくい
VSCode, Node.js, webpack, babel を使っているけど、
webpack-dev-server を使うのが普通なのか？ var は、巻き上げが起こるので、ややこしい
var x = 0;
function f ( ) {
console.log(x); //=> undefined
var x = 1;
}
f( ) >>524
varの関数スコープ以外の解釈はよ
色々あるんだろ？早くしろノロマ
521 Name_Not_Found sage 2020/03/24(火) 09:07:11.24 ID:???
今は、let
var は非推奨。
スコープの解釈が色々あって、バグるので難しい な？誰もパフォーマンスの問題なんて気にしてねーだろ？
パフォーマンス以外のもっと重要なことに目が行かない時点で
初心者なんだよ chromeしか知らんけどlet, const実装から結構長い間varのほうが速かったよ。
今はlet, const有利な実装に切り替えたらしい。
要するに実装依存で、ループ毎に変数生成～とかはあまり関係がない。
まだvarのほうが速い実装もあるかもしれない。
ちなみにconstが一番速い。
そしてその差は微々たるもの。 再代入したくないからconst
てかもう感覚がvarを拒否してる
lintでチェックするからどうでもいいけど
var使ってるエンジニアいたらビビるわ >>523
>>520がいいたいことをいってた
> 初心者＝計測せずにパフォーマンスがーといいだす >>528
今でもvar使ってるよ
顧客の環境がlet使えないやつなもんで パフォーマンス気にしてletとvarの使い分けより、もっと他にパフォーマンスに気を遣うべき部分があるだろう >>522
ワンライナーで書けないような複雑なことしたいときは
gulpfileみたいに別途jsを書いてファイルにして
それを実行してもいいんだぜ >>532
それでは、>>519への答えにはならない >>530
let使えない環境ってなんだよ
そもそもそういう問題じゃなくてbabelすればいいだろ 質問とはまるで見当違いな部分でごちゃごちゃマウント取るアスペども(笑)
せめて回答叩き付けてから語るならまだしも、スレのレベルが低すぎる
及第点なのは527だけやな >>535
トランスパイルしたら結局varになっちゃうじゃん
letとvarの違いを問うているのであって
盲目的にletとconst使えって話ではなくね？ >>538
結局varになるからなんなの？
結局アセンブラになるから、高級言語使う意味がないっていいたいの？ 藻舞らを、プロと見込んで聞いているのに、
webpack-dev-server を使っている香具師は、いないの？
所感を希望 >>542
各スレでのうんこruby駄文テロ辞めたら答えてやるよカス 巻き上げはletでも起こる
そもそも変数とはスコープに属するものなのでそれが当たり前。
letは変数を初期化しないだけ。TDZは存在の巻き上げはが起こっていない範囲ではなく、存在するが初期化がまだな範囲。
何回言ったら理解してくれるんだろうな。 >>539
そんなことは言ってないよ(´・ω・｀)
質問はvarとletはパフォーマンス的にどう違うの？って話じゃん？
まあパフォーマンスは置いとくとして、内部的にどう扱いが違うのか？ってことでしょ >>519
違いをざっくり説明してみると、たとえば
for(var n=0; n<3; n++){ console.log(n); }
と書いたとき、varは関数スコープなので
この数値を入れるメモリは一箇所だけ確保され、ループ毎に上書きされる
for(let n=0; n<3; n++){ console.log(n); }
とすると、letはブロックをスコープとする
※forの場合、変数宣言で使ったletはfor句のブロックスコープになる
ので、この数値を入れるメモリは、上記の場合３箇所別々に確保される
ので、もちろん実装毎に違いはあれど、メモリパフォーマンスだけ見れば
varのほうが良い結果が出る場合がままある
大局的に見れば、盲目的にlet、constを使う！と考えずに
適切な変数宣言を行うと考えるのが良いです とにかく極力const
どうしようもないときはlet使えばよくね
巻き上げ以上の仕様はマニアだけ読めばよくね？ > 何回言ったら理解してくれるんだろうな。
人間の数 >>545
今でもvarを使ってる理由は、顧客の環境がlet使えないから
って書いてあるだろ
パフォーマンスのためにvar使ってるなんて書いてないだろ
顧客の環境がlet使えないからvar使ってんなら
babel使えってことだろ >>546
varのメモリパフォーマンスが良いことがあるんですね！
letやconstのメリットはよくわからないですが
パフォーマンスが良い方というのはわかります。
メモリパフォーマンスが良い方が適切な変数宣言ですものね！
と初心者は言う 重い処理はvarやletを使い分けても重いままだぞお前ら
クソコードはクソコードのままなのを理解しろ varを使うメリットが有るのか？という話です。
答えは ない です。 ちょっとでも勉強してたらvarがレガシーだということに気づくだろ varを使うメリットがあるのか？という問いには答えられないが、
varでしか書けない書き方があるのか？という問いには答えられる。
答えはある。 >>552
頭スポンジなの？
519 ：Name_Not_Found ：sage ：2020/03/24(火) 07:44:03.73 ID:???
letとvarの違いが分かんなくなっちまったから教えてくれん？
for(let i)とfor(var i)でメモリパフォーマンスに違いはあるんかね。
letはループ毎に変数生成されるからメモリに悪そうなイメージだけど実際の所どうなの？ >>557
メモリパフォーマンスと
プログラムの重い軽いは根本的に別の話じゃね？
最高のパフォーマンスでもたくさん使ったら重いし
最悪なパフォーマンスでも少ししか使わなければ軽いし メモリパフォーマンスの意味もわからんのかよ
ループ毎に変数生成されるとメモリに悪いんだぞ？
重いとかいう話じゃなくてメモリの書き込み回数が増えて
寿命がすぐに来るって話だろう for文のことならletもconstも一つ分使い回してるよ。
違うと言うならそうなってない実装挙げてみろや。 すみません
前回の質問で、書いた通り選択文字列は書いて頂いた物で翻訳になりましたが選択していない時（ページ全体）も出来る様にしたかったんですけど元ので出来ていたので書くのを忘れていました
教えて頂いた物と見比べて出来ないかとやってみたのですがURLを置き換えたりしただけではやはりダメでした
選択していない時はページ全体の翻訳にしたい場合はどう修正すると可能でしょうか？
何度にもなりすみません >>561
お前は誰だ！
というのはさて置き、あと丸投げはやめなよー
とりあえず、新しい方の翻訳サイトで何かページ丸ごと翻訳してみて
その時のURLをよーく見てみなよ
どこに対象となるページのURL入れればいいのかは
中学生でもわかるから let はブロックスコープだから、すぐに解放されるけど、
var は関数スコープだから、使わなくなっても解放されない >>561
ページ全体の翻訳は、Edge みたいに、URL を、Google 翻訳に渡すとかじゃないの？ >>558-559
メモリを使い切ったらメモリ不足で落ちる時代なら分かるが、今時はメモリ不足なら速度低下だろ
メモリを使い切って速度低下しないんなら別にメモリ残量なんて気にしないわ "apple"という文字列の中から三番目の文字を抜き出してコンソールに表示したい時、
const word = 'apple';
console.log(word[2]);
とすれば良いとドットインストールで解説されていました。
word[2]というような書き方のことを何というのでしょうか？
「文字列 番目 抜き出し」と検索するとstring やらchaAtなどばかり出てきます。 翻訳ならDeepLがすごいよ。翻訳精度グーグル越えたよ。 ブランケット記法。避難所でもあたたかくして眠れる。 配列などの数字インデックスだろ
それが文字列に対しても、出来るのだろ >>568はネタで書いてるのがわかる
>>571は中学英語からやり直せ 調べてみたらブラケット記法ですね！
ありがとうございました！
勉強します！ >>573
違う。
そもそも仕様ではその記法独自の名前は定められていない。
色んな人が他言語の用語を持ち出したり好き勝手に読んでるだけ。
なんにでも正解があると思うな。 >>573
>>574は通称rubyガイジという糖質ｷﾁｶﾞｲなので相手にしなくてよい。
仕様では、
https://www.ecma-international.org/ecma-262/6.0/#sec-property-accessors
12.3.2 Property Accessors
Properties are accessed by name, using either the dot notation:
MemberExpression . IdentifierName
CallExpression . IdentifierName
or the bracket notation:
MemberExpression [ Expression ]
CallExpression [ Expression ]
bracket notationの訳はブラケット記法。
仕様書じゃないがMDNでも、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors
プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。
とある。たとえ仕様書まで調べるのが面倒でも、MDNだけでも十分一般的な用語であることは分かる。 >>574
なるほど！
MDNを見てたら詳しく書いてあるページをみつけました。
勉強します！ bodyの内容をとりあえずすべて取得したい場合って
var text = document.body;
return text;
だけで可能ですか？ 他の書き方になるようでしたら
教えていただけるとありがたいです。 DOM要素ではなくテキストだけ取りたいなら
document.body.textContent
ブラウザの開発ツールのコンソールで試すことを覚えましょう >>575
仕様なら、Property Accessorsが正しい
というか、なぜ今更、6.0仕様なんだ？ Ruby のNokogiri なら下のように、ページのDOM を取り出して、CSS セレクターで限定する
doc = Nokogiri::HTML( driver.page_source )
element = doc.at_css 'input[name="hoge1"]'
puts element.get_attribute "value" # 属性
同様に普通は、jQuery でDOM操作する。
素のJavaScript では、煩雑だからやらない >>582
Property Accessorsの節でドット記法とブラケット記法の二種類ありますという説明がされてるんだが。
脳みそ大丈夫？
「人間」の節に男と女がいますと書かれていて、「女」は説明に書かれているだけだ！正しくは人間だ！という主張に何の意味がｗ >>586
お前が大丈夫か?
国語辞書にもコラムや著者のコメントが載っているが、
そこに書いてある文章の中身まで日本の標準的な価値観や意味合いを反映しているかというとそれは保証されていないだろ
noteっていうのは砕けた解説なんだから、よくESを知らない人向けのコメントでもあるし、
他の言語界で使われている俗語をもって親切に解説してあるんだろ
それがプログラミングとしてよく使われている言い方だと言って、JS界の仕様として正式なものかというとそうはならないだろ 質問 人間のマンコ付いてるほうは何と言うのですか？
答１ 女。
答２ 女は間違い！正しくは人間！ >>586
その表現を使うなら、「Property Accessorsのbracket notation」を使え
bracket notationにProperty Accessorsを内包する意味はない
で、古い6.0を持ち出すのはなぜだ？ 俺が6.0が好きだからだが？
俺が俺の頭と手を俺の解説を書くのにお前に横槍を入れられないといけない理由はなんだ？ ゴミカス糖質>>589の回答（笑）は>>574 。
当然質問者は満足せず、賢く受け流してMDNに行ったと言うのにお前らときたらまだ相手してるのか… よく知らないからケチだけつけてレスバで遊んでるだけ >>592
違う。勝手に思い込むな。
俺は>>574だが>>589ではない。 自分で作ったライブラリのドキュメントを作りたいのですが
なんかいいテンプレートないですかね
jsなのでその場で例を実行できる項目付きの yomanでライブラリのジェネレーターがあるからそれを参考にするといい jsならgenerator-nmとかかな
サンプルはcodesandboxがあると親切 >>596
図星過ぎてもはや笑うことしかできないよな Coqスレよりよっぽど質が悪いでしょ
プログラマなんてのは陰湿で粘着質な奴が多いのだから yomanで生成されたドキュメントなんて
（省略されました） そもそもドキュメントが必要なライブラリは出来が悪い証拠
使うのはプログラマなんだから、よっぽど変な書き方して無ければソースコードを読めば分かる じゃあお前の作った糞ライブラリ見せてみろよｗ
バカにしてやるからｗｗ JSのバックエンドのフレームワークで一番シェアあるのってなんですか？ >>607
あーレガシーなのじゃなくてこれからの鉄板のやつあります？ >>608
あるけどシェア割れてるからどれも鉄板とは言えないなぁ…
express後継風味ならkoajsやhapijs
他言語でよくあるMVC風味ならnestjs
bff用途で必要な機能さえありゃいいならnextjs
とか調べてみたら？ >>605
バカにしたのではなくて
ドキュメントよりも中身に拘れば良いという
励ましのアドバイスのつもりだったんだが
そうカッカするなよ バレたのそんなにビックリしたのかな？ｗｗ
常人から見たらバレバレなのに糖質だと「完璧に隠しているのにバレるはずがない！当てずっぽうだ！」となって攻撃に転じるわけね…はは、おもしろいね。 WEB AUDIO APIのcreateScriptProcessorでバッファサイズだけじゃなくてバッファ数を設定する方法ってありますか？
標準のバッファ数が恐らく2？でレスポンスを早めようとサイズ小さくするとバッファ切れが酷いので >>614
バレるも何も大間違いだから
自分の妄想を思い込むのは勝手にどうぞだが
嘘を撒き散らすのは控えたほうが良いよ >>592は逃げただけ
否定箇所を作り出す事でしかレス出来ない人なんでしょ よっぽど痛いところ突かれたんだろなｗ
糖質にしても執着はんぱないｗ 本人が本当に違うって言ってんのに
頑なに信じないんだから救いようが無いわな 要素を生成するときはcreateElementとcreateTextNodeを使うとXSS対策になると見ました。
現在掲示板を作成しており、ajaxでPOSTした投稿にレスアンカーやリンクを組み込もうとしています。
この場合、pをcreateElementで生成してTextNodeでレスを流し込み、正規表現とreplaceで
一致する箇所をアンカーに置換してしまってもセキュリティ的に問題ないのでしょうか？
もしくはレスをsplitで分割、searchでインデックスを取得してa要素をcreateElementで生成し…
といった感じで地道に書いていくべきなのでしょうか？ >>622
相手の言うことを一言も信じないのなら
何のつもりでここで会話しに来てるんだ？ XSS対策はユーザからもらった文字列をエスケープしなきゃ
createElementにその機能があるとは思えないけど >>623
バックエンドでXSS対策（主にエスケープ）した後
その文字列をフロントでツールチップ的に処理してしまえばいいのでは >>623
おまえはまず、自分でXSS攻撃をしてみろ
どうやればXSS攻撃を成功させられるか考え抜くんだ 投稿はテキストとして保存
リアルタイムでリンク化する
そうすればバグがあっても対処しやすい >>626
説明不足ですみません。
投稿はphpでエスケープした後、json_encodeを使いつつecohしています。
その戻り値からレスアンカーやリンク形式に一致するものに処理をしたいといった感じです。
>>627
ツールチップ的とはどういうことでしょうか？
少しググりましたが、ヒント表示みたいな内容でした・・・
>>628
まだうっすらとしか理解できておらず、理解する前にお作法的に対象するすべを学びたいです。 他のコミュニティでは質問者に対して徹底されてるけど
CodeSandboxなりで最小限のサンプルコード用意しないと
いつまでも回答者との理解の差がある気がする >>630
> 理解する前にお作法的に対象するすべを学びたいです。
プログラミングの世界に「お作法」なんてものはありません。
そういうのは「バッドノウハウ」というんですよ >>630
例えば5chは5ch側のサーバーでXSS対策したりエスケープしたり安価リンク処理してるけど
質問の場合は不確定要素が多いので、その上で簡易かつ強固にXSS対策するとなると
エスケープ処理の部分だけをバックエンドでやって
あとは全部クライアント側でやっちゃうってこと
phpならXSS攻撃耐性の高いエスケープ処理もあったはず ＞投稿はphpでエスケープした後、
てかもともとクライアント（JS）でphp側のエスケープ以外は処理しようとしてたのね
だったらほぼ心配する部分はないのでは
＞createElementとcreateTextNodeを使うとXSS対策
はよくわからない そもそもXSSなんてこれっぽっちも気にする必要がない
掲示板なんて荒らされるときは如何様にも荒らされるのだから
その掲示板とやらに金銭や大きな価値が絡んでいないのなら
気にする方が人生の時間の無駄使いという奴
しなくても良いことはできるだけしないで楽して生きなきゃ
一方もし価値のある掲示板だというのなら
そりゃバックエンドから丸ごと著名なサービスを利用するか
せめてフレームワークを活用するべきであって
プログラマ１人が責任を負うようなことではない
XSSを気にしていいのは、そういうことが好きで興味があるやつだけ
もし興味関心があるならもっと自分で考えて調べろ フロント側なんてユーザーが書き換え可能なんだからクラック対策するだけ無駄 Ruby on Rails では、ERB テンプレート内の、<%= Rubyの式 %> が、
デフォルトで、HTML エスケープされて、HTMLへ変換されるから、何も考えなくてよい >>639はデマ
だから「お作法」＝何も考えたくないバカでーす。唯一の正解だけを使いたいんでーす。
ってなるやろって言ってる プログラマの三大美徳もいいけどHRTも大切にしような… バイナリデータの読み方が判りません
目的のデータの位置が決まっているならArrayBufferからsliceで決め打ちで読めばいいのですが
32bit整数があって次のデータのバイト数が提示されてから可変長の値が交互に来る感じのデータになると
現在どこを見ているかのポインタのようなものが欲しくなり、それ用の変数を作りpointer += 4などして動かしているのですがもっといい方法はないのでしょうか？
それと、連続した配列のマッチングというのは可能でしょうか？
たとえば[0,1,2,3,4,5,6,7,]なら[4,5,6]にマッチした位置を返してほしい場合
今はループでif(element === 4 && array[i+1] === 5 && array[i+2] === 6)などと書いてるのですがもっといい方法はないでしょうか
よろしくお願いします 配列のマッチングについて書き方が改善されるだけですが
array.findIndex と every を使う方法はあります
https://repl.it/@vip0/arrayfind >>643
直前2つを記憶する方が効率的じゃない？ >>643
結局この書き方がほぼベストに速いんだよな
ほかはこれに毛が生えた程度の違いしかない
わずかな速度の違いが肝になるならともかく
可読性を考えたら変なロジックはやめとこうぜ 可変に対応してるから
>>644
この書き方でよくね >>643
ポインタを用意するのはデコーダやエンコーダの基本
嫌なら簡単な関数でポインタ操作を隠蔽すればいい
例えばread(4)を呼べば4byte分進めてくれるなど JSONに関しての質問なんですが
"Afghanistan": [
{
"date": "2020-1-22",
"population": 2000000
},
"America": {
"date": "2020-1-22",
"population": 2000000
},
...........
みたいな国情報がずらっと並んだJSONデータがあったとして、
この国名のキーを文字列で取り出すにはどうコーディングしたらいいんでしょうか？
fetchで取り出して
.then(data => {
data[なんか].forEach(({なんか}) =>
console.log(`${なんか}`)
);
});
みたいな感じでコーディングして全部の国名をずらっと取り出せたらなと思ってるんですが… あ、JSONのデータがちょっとおかしい
正しくは下記みたいなデータです
国がわかりにくいのでそこだけ質問用にコメントつけてます
"Afghanistan": [//■国名です
{
"date": "2020-1-22",
"population": 2000000
},
{
"date": "2020-1-23",
"population": 2000000
}
],
"America": [//■国名です
{
"date": "2020-1-22",
"population": 2000000
},
{
"date": "2020-1-23",
"population": 2000000
}
],
........... const data = {
"Afghanistan": [
{
"date": "2020-1-22",
"population": 2000000
},
{
"date": "2020-1-23",
"population": 2000000
}
],
"America": [
{
"date": "2020-1-22",
"population": 2000000
},
{
"date": "2020-1-23",
"population": 2000000
}
],
};
console.log(Object.keys(data));
//=> ["Afghanistan", "America"] .then(response => response.json())
.then(data => Object.keys(data).forEach(key => console.log(key)); >>651
>>652
できました！ありがとうございます！
ついでに聞きたいのですが、例えばAmericaというキーの値に二つの子が並んでますが、
この最後の子だけ取り出す関数ってあったりしますか？
最後の子の中に二つの値が入ってるのでそれを取り出したくて
"2020-1-23"
2000000
確かPHPかなんかだとlastChildとかfirstChildみたいな書き方で末尾とか先頭を取り出せたので
同じことが出来るかなと Object.entries(data).forEach(([key, value]) => {
const {date, population} = value[value.length - 1];
console.log(key, date, population);
});
//=> Afghanistan 2020-1-23 2000000
//=> America 2020-1-23 2000000 >>654
ああなるほど、lengthで数にアクセスできて番号指定も使えるんですね
基本的な文法が勉強不足でした、ありがとうございます >>644
アロー関数は互換性の問題がありそうで使っていなかったのですが今は割と使えるんですね
>>645
確かにそうかもしれません
バイナリというか連続したデータを取り出して扱うのは初めてだったので
>>646,648
もっと便利な方法が用意されているのではないかと思ったのですが、だいたいこんな感じなんですね
参考になりました ありがとうございます >>631
失礼しました。
ググってみたところ、少し調べないと扱えなさそうなので合間をみて勉強してみます！
>>635-636
エスケープはhtmlspecialcharsしか使ってませんでした。
強力なエスケープもあるのですね。ググってみます。
バックエンド側でエスケープをかますしておけば、ajaxで渡した返り値は
安全と考えてよいということでしょうか？
であれば、クライアント側でreplaceと正規表現で対応できそうです！
>createElementとcreateTextNodeを使うとXSS対策
ソースのURL見失ってしまいました…
PHPでaタグを設置してcreateTextNodeを利用すると、タグが文字列になっていましたので
エスケープされているっぽいです。なのでXSS対策になるってことなのかと理解していました。 >>656
善し悪しにも判断要素が複数ある
例えば、パフォーマンス視点なら、「同じプロパティを複数回参照するのは無駄」なので、「要素値を変数にキャッシュ」が原則
自分が期待する動作と優先順位を考えて、質問で触れるべきだ > 例えば、パフォーマンス視点なら、「同じプロパティを複数回参照するのは無駄」なので、「要素値を変数にキャッシュ」が原則
パフォーマンスに問題が起きてないなら、絶対にやるな。 ワードプレス使用者です。質問させていただきます。
プラグインで『Rich Table of Contents』と言う目次作成ソフトをインストールしましたが、目次をタップすると、ページ上部のタイトルにスクロールされてしまいます。
HTMLを確認したところ、すべてのhタグにid＝〇〇が入っており、id＝〇〇を消すことで、目次が正常に動作します。
手動で全部消すのはめんどくさいのですが、一括で消す方法、またはCSSなどでうまく手間かけずに直すことは出来るでしょうか？ >>657
分かってないな
危険にしているのは文字列ではなく、それを扱う側だ
だからいくらHTML的やらなんやらエスケープしようと扱う側がどう扱うかによっていくらでも危険になりうる。
例え自分の扱うコード内で安全に完結していても、ライブラリやフレームワークが後からその値を参照して扱う事だってある。
そのときにそのライブラリやフレームワークの脆弱性を付かれるかもしれない。
だから切りがないのでどうしても心配なら簡単にできる緩和策を勝手にやってくれる物に頼っとけ。 >>660
jQuery なら、これで全てのid が消える
$( "h1, h2, h3, h4, h5, h6" ).each( function( ) {
$( this ).removeAttr( 'id' )
} ); 別のTOCと競合してるのでは？
目次リンクにしたいならidがないと動かないと思うけど >>662>>663ありがとうございます。
競合の、可能性もあるんですね。もう何から調べてみたら分からなくなってますw
プラグイン「Table of Contents Plus」だと問題なく動作するんですが、「RTOC -Rich Table of Contents-」だとid＝〇〇が入ってるhタグだけ上にスクロールされちゃうんですよね‥。 一言命令は>>659のことだろ
命令形というのがあってだな... 値の個数が同じ複数の配列をまとめた二次元配列があり、それぞれの配列の1つ目の値を比較し昇順に並び替えたいのですが、それって可能ですか？ ここは宿題代行所でもなければ、アルゴリズム研究会でもありません
例え答えがこっそり欲しくとも、可能かどうか？とか馬鹿な聞き方はやめなさい
配列の1つ目の値を比較し昇順に並び替えたいのなら、
配列の1つ目の値を比較し昇順に並び替えればいいではないですか
分かっているとは思いますが、不可能なことはありません
少なくともあなたができることは機械でもできると考えなさい
具体的にどうするかは自ら学びなさい
ここは漠然とした質問をするところではありません。
最低限自ら学べる人、つまり具体的に問題を解決していける人が
どうしても具体的に困ったときに質問する場所です。 >>671
ありがとうございます！ sortでできました。 なんで誰もサンプルコードはらねえんだよ
問題を絞り込めて整理できるのに 質問者がコード貼ってないのに回答者が想像で貼っても仕方ないでしょ
俺たちは質問者のママ・パパではないのだから
質問者が抱える問題を絞り込むのは当然質問者の責任であって
こういう答えが欲しいから、その答えが帰ってくるであろう
しっかりした具体的な質問をするまでが質問者の責任であって
回答者が悩む状況は本来おかしいからな
勿論本当のやる気のある右も左も分からない初心者だと感じれば
導いてあげることも吝かではないが、
１行の質問かどうかも分からないような投げかけレスに
そこまで親切にしてあげようという気持ちは沸かないだろう
良い回答をしてほしいなら、良い回答が付くような良い質問をしなければならない ごめん>>673は質問者がコード貼らないことに対する意見 Ruby なら、
ary = [ [ 51, 52 ], [ -11, -12 ], [ 31, 32 ] ]
p first_ary = ary.map { |inner_ary| inner_ary[ 0 ] } #=> [51, -11, 31]
first_ary.sort!
p first_ary #=> [-11, 31, 51] rubyすげえ
俺もスマブラスレでモンハンの素晴らしさ語ってくるわ rubyの何がイヤって、厨二病ぽい名前がイヤ
pythonもだが [ [ 51, 52 ], [ -11, -12 ], [ 31, 32 ] ]
なら
[ [ -11, -12 ], [ 31, 32 ], [ 51, 52 ] ]
にソートしたいってことじゃないの 普通に考えて1つ目の要素の比較でほぼほぼ順序が決まるのに
特にサーバサイド言語で常に全比較するコードを書いちゃう人はセンスが無い const arr = [ [ 51, 52 ], [ -11, -12 ], [ 31, 32 ], [ 0, 100 ] ]
const res = arr.sort((a, b) => a[0] - b[0])
console.log(res)
// [ [ -11, -12 ], [ 0, 100 ], [ 31, 32 ], [ 51, 52 ] ]
https://repl.it/@vip0/custom-sort
あとテストケースにムラがあったので追加した えっ、丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
２ちゃんだからって、何でも許されるわけとちゃうやろ・・・
JSやってる奴って基本こういうイメージ、怖い・・・ >>683
JS質問者にそういうイメージある
そのコードをお前自身で説明してみろ、といいたくなる場面が多い 分かってないやつが質問しに来てるからな
普通の質問所ならそれでいいんだろうが
ここわ泣く子も黙る2chだからな 質問です。
一度処理したものは以降処理せずに、
複数のファイルで使いまわすにはどうすればいいでしょうか？
だいぶ端折ってますが、イメージはこんな感じです
（一度だけ処理したい理由はその処理が重いからです）
aaa.js
console.log(reuse.jsを呼ぶ)
// 「いいい」を出力
bbb.js
console.log(reuse.jsを呼ぶ)
// 「いいい」を出力
reuse.js
let a = "あああ"
a = "いいい" ←この処理は一度だけ
return a >>687
メモ化を使います
https://repl.it/@vip0/memo-file
またはシングルトンパターンという設計を使う方法があります let memo = arguments.callee.memo = arguments.callee.memo || new Map
let a = memo.get('a')
if (!a) {
a = 'いいい'
memo.set('a',a)
} >>688-689
こんなやり方があるんですね。ありがとうございます！ >>687みたいなのが>>685-686のイメージ
普通に頭を働かせれば、
「変数に出力値をキャッシュする」
「一度だけconsole.logを実行するコードに調整する」
とか、考えつくはずなのに、何も考えずに丸投げ
「考えても思いつきませんでした」
「そこまでは分かったのですが、コードにする方法が分かりませんでした」
大抵、こんな言い訳をする >>683
えっ、丸パクリじゃん構文の丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
糞スレだからって、何でも許されるわけとちゃうやろ・・・
質問スレ住人って基本こういうイメージ、怖い・・・
【え？】ITエンジニア「えっこのサイト丸パクリじゃん…学生だからって許されるわけちゃうぞ」→オープンソースから作成したサイトでした
https://togetter.com/li/1490138 Ruby でよく使う遅延初期化だろ
obj ||= 1 つまり、obj = obj || 1
obj が偽なら、1が設定されるが、真なら処理なし
obj = nil
p obj ||= 1 #=> 1
obj = 2
p obj ||= 1 #=> 2 のまま
def f( obj )
if obj == nil # 存在しない時だけ、設定する
obj = 1
else # 存在すれば処理なし
end
obj
end
obj = nil
p f( obj ) #=> 1
obj_2 = 2
p f( obj_2 ) #=> 2 のまま >>694
汚物を見ると目が潰れるからこのスレに来ちゃいけません！ 学術の巨大掲示板群 - アルファ・ラボ
ttp://x0000.net
数学 物理学 化学 生物学 天文学 地理地学
IT 電子 工学 言語学 国語 方言 など
PS スカイプ友達の掲示板 ttp://skype.x0000.net コピペ+空行が引用だと思ってる輩が一定数いるようである
実に読みづらい nullをpostするとPHP側で空文字("")になってしまうのですが、nullのまま送信する方法はありますか？
一応nullでなければいけない理由はありませんので、難しいようであれば空文字をpostします。 content type がJSONならnull扱えるけど
formデータか何か？ FormDataに突っ込むにしてもJSONにしてphpでデコードすればいいし >>701-703
content typeを指定しないとnullを扱えないんですね。
AJAXの練習でformのデータと合わせて必要な配列を送信している感じです。
content typeについて、考えてもいなかったので少し調べてみます。
ありがとうございました。 VSCode の拡張機能・REST Client で、
Ruby のwebrick サーバーへ、JSON でnull をPOST して、
サーバーで、JSON.parse( req.body )すると、正常に、nil と解釈された！
POST http://localhost:8888/ HTTP/1.1
content-type: application/json
{
"name": null,
"time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
JSON.parse すると、
{"name"=>nil, "time"=>"Wed, 21 Oct 2015 18:27:50 GMT"} スレチだったら悪いがREST clientみんな何使ってるの
insomunia使ってるけどwsも使えるpostwoman気になり始めてる >>704
自己レスです。
色々調べましたところ、json形式で渡す方がxss対策になるだとか書いてあり、
会社でも見たことある記述がありましたので、jsonでPOSTする方向で進めてみます。
あざっした。 XSSを見えない悪霊かのように思っているんだろう
実際は幽霊に見せかけたイタズラに引っかかるほう側の問題ということが分かっていない
いくら人一人の常識の範囲でフィルターをかけようが
受け取り手である様々なコンポーネントがどんなトラウマや精神疾患を抱えているかは本人でさえ分かっていないことなのだから
自分ひとりの努力でXSSを防ごうとするのは無駄なこと
簡単に追加で他に影響が殆ど無くできる緩和策をかけておくというのは悪いことではないと思うが
構造を変えたり地道な作業をしてまで対応するようなものではない
どうしても対処したいとしても、対処するならゴールで待ち構えておかないと
途中の無数にあるルートを塞いだり変えたりしても労力に対する効果は極めて低いということが分からないのか？ >>706
client要るようなことある？
どうせテスト書くんだから
全部テストでやれば良いんじゃないの？ >>711
テスト書いてるバッグエンドアプリは要らないけど
単純にたまに使うツールとして たまに使うくらいならNodeとかPythonとか好きなサーバサイド言語使うな >>706
ふつうにpostman使ってたけど
postwomanなんてあったんだなw 意識が不連続であるが故に、人間の意識がどこに存在しようとも関係ない >>717
できるよ。情報を遮断した状態での行動を見ればいい >>717
できない
だって「人工知能」という名前の時点で人間と強く結びついているから
自我が目覚めて自分達の種族名をつけるまでは人間の模倣のただの道具 「情報」、「通信」、「制御」が確立しているならいわゆる「世界」は自律する。 世界は最初から自律してる
自律している世界の一部なのか全部なのかの違いでしかない 全て「そうであること」の集合
「そうでない」と言うのは人間が都合上生み出した便利な概念であって宇宙の本質ではない
ないと言うのは二重否定であるになるから宇宙は産まれた そもそも、「!人間 === AI」なわけで「～ではない」の論議は無意味 プログラミンはぼんやり理解してればいいの？
大体でいいの？ >>733
ぼんやり理解してればいい部分もあるし、
大体でいい部分もある
ただ、こういうAPIがあるはずだ、こういうライブラリがあるはずだ、こういうツールがあるはずだ、
これは現実的にできる、できない、と言ったことを判断できる感覚は大事
それを身につけるためには一通りの事に触れておかないといけない
だから俺はいつも初心者に必ずMDNの隅々まで一通り目を通せとアドバイスしてる location.reloadで更新後のページに文字列渡す方法ってありませんか？ location.href（だったか曖昧）で移動してqueryパラメータで渡す
か
cookieやローカルストレージを使う >>737
やっぱりパラメーターに突っ込むのがいいんですね
ちょっと試してみます ●質問
後からJavascript側で追加したHTMLを動かしたいのですが
Vueは最初からHTMLで書かれた内容にしか使えませんか？
よろしくお願いしますm(_ _)m
●HTML
<div id=“taro”>{{name01}}</div>
●Javascript
new Vue{(
el:”#taro”,
data:{name01:’太郎’}
})
$('#taro').after('<div id=“jiro”>{{name02}}</div>');
new Vue{(
el:”#jiro”,
data:{name02:’二郎’}
})
●理想の結果
太郎二郎
●実際の結果
太郎{{name02}} >>740
右も左も分からないど素人ですみませんorz
JavaScript側でポンポンDOM要素?を追加して
それをどんどん変更・更新みたいなのがしたいです… 最初にstateを考えないと
jQuery併用はそもそも変だよ
template(view)
→listをループで表示する
action
→stateのlistにitemを追加する
Reactしか使ってないのでVueのサンプルコードかけないけど Vueを組み合わせたことによって無駄に難しいことをやろうとしてしまってるから、ど素人ならとりあえずjQueryだけでやってみたた 基本的に、Vue.js・jQuery は共存できないだろ
Vue.jsは仮想DOM で、jQueryは実DOMを変更するから、
DOMの更新のタイミングが合わない
Vuex では、更新のタイミングが決まっているから、
外部から更新できない
Action → Mutation → State
この順番を守った上で、各タイミングのフックを使う TODOリストのサンプル見たら一瞬でお作法わかると思うけど ありがとうございますm(_ _)m
皆さんのアドバイスを少し時間をかけて噛み砕いてみます 生DOM触るかvueに任せるかどっちかに絞れ
完全に混ぜるな危険状態 >>744
> 基本的に、Vue.js・jQuery は共存できないだろ
jQueryはブラウザ標準のDOM APIのライブラリに過ぎないので、
「Vue.js・DOM API は共存できないだろ」と
言ってるのと同じ意味になってるってのは分かってる？ Vue.jsを使う場合は、jQueryだけでなく
ブラウザ標準のDOM APIも使ってはならない。
これは常識。
Vue.jsを使うということはブラウザ標準のやり方を
使わないということを意味する。 >>739
どっちにしろ、質問者はド素人なんでしょ？
だったら、わからないものを２つ抱え込まないで
１つにした方がよくね？
つーわけで、いったんjQは脇に置いておこう
んでできれば
いきなりvueを使っても、なんでそうなるのか理解できないだろうから
ピュアJSから始めよう ピュアJSとvueは共存できないぞ
先にそれを言っておかないと そう？
vueの流儀から外れないように使えば便利だけどなあ
まあvueに限らず
ほとんどのフレームワークがそうなんだが 共存できないのは仮想DOMと従来のDOM APIだけで、それ以外は特に問題ないよなぁ。 だから従来のDOM APIは仮想DOMと共存できないって話をしてるんですよ PHPのpreg_replaceでは、配列を渡せばインデックスが若い順から複数まとめて処理できる
ようなのですが、JSのreplaceでは文字列でないとだめなようです。
何かpreg_replaceと似たような処理を行うことはできますか？ 配列やインデックスやreplaceの概念を知っているのに分からないわけがないだろう
適当な質問をするな、もし適当でないと言い張るならそれは思考放棄だ
最低限自分で考えろ >>761が回答ではないように>>760も回答ではない
それくらい分かれ 配列を定義してconsole.logで出力、その後に値を格納すると
console.logでの出力に値が格納されているのですがこういうものなのでしょうか？
また、出力時に工程通りの状態を確認できる方法があれば教えてください。
var abc = [];
console.log(abc); // 0: "a"
abc.push('a'); >>766-767
ですよね～。
おかしいなとは思ったのですが現状組んでるコードの中だと
>>765のようになってしまうようです。
こういうこともあるんだな～ってことであきらめます。
スレ汚し失礼しました。 開発ツールで見られるオブジェクトや配列の中身詳細はconsole.logした時点でフリーズされてるのではなく実際に表示された時の中身
console.log(JSON.stringify(abc));とでもすれば？ >>769
出力結果変わりました。
こんな方法があったのですね。
ありがとうございます。
>>770
範囲が広く再現が難しそうだったのであきらめてしまいました。 var abc = [];
たぶん、ここに長いコードがあって、abc の中身をいじっているはず！
console.log(abc); // 0: "a" ブラウザ実行？
一応debuggerのがあって
breakpoint設定できるしabc変数 watchしたりstep実行できるぞ >>772
説明下手ですみません。
組んでいるコードは長いのですが、>>765に書いたコードは隙間なしです。
結果がおかしいエリアで検証用コードを書いた感じです。
>>773
chromeのデベロッパーツールです。
Sourcesタブにそれっぽいところがあったので調べてみます。 隙間なしなら、var abc = [];
が動いていない
abc が再定義か何かで、コンパイルエラー >>774
再現コードを特定するのは質問者の仕事
「再現が難しそう」>>771で諦めるなら、質問する前に諦めなされ 諦めるくらいなら最初から質問するな
一度質問して大勢の人を巻き込んだのだから最後まで頑張れ
プログラミングっていうのはプロでも数日問題に悩むような事がしばしばある
初心者のときなんて常に悩みっぱなしで当然
数日悩んだくらいで諦めるな 諦めちゃいけないという謎の風潮なに
質問するかどうかとは別問題だろ 何もやってない質問者が多すぎるからじゃね？
気持ちは分かる 質問に対する答えは常に存在する
諦めずに考えれば必ず答えにたどり着く
質問するのは考えを放棄して甘えている堕落者だ
って流れなのかと思った 躓きがちの入門者に対する励ましと応援のメッセージでしょ
なんでそんなに意地が悪い見方しかできんのか？ F12 の開発者ツール上での結果などは、ダメ！
数行しか表示されないし、前に入力したものが分からず、その影響を受けてしまうから、
本当の結果がどうか分からない
必ず、元のファイルを更新して、自動テストをやり直すべき！
それでも結果がおかしい場合は、ブラウザがキャッシュを使ってる
Ruby on Rails とか必ず、test runner が走ってチェックする。
TDD 開発 こういうことがあるからconst以外使わないようにするんだよ >>786
>>772でconstは回避策になるのか？
安易にいい加減な事を発言しない方がいい 2ch流のノリが分からない人はわざわざ2chに来なくていいよ >>789
ネタが全て面白かったら
かわいそうな売れない芸人はいない！ プログラマー的には暗黙の了解や勝手な判断に基づく仕様は許されない
つまりどこがネタだったのか、笑いどころはどこだったのかを説明してから
面白いのかどうかの実装判断をさせるべき 仮想DOM を使っているから、実際のDOM更新とは、タイミングが合わず、更新できないとか？
それか、iframe、つまり他のサイトなので、アクセスできないとか？
それか、実行環境にアタッチしていないとか？
F12 の開発者ツール上で入力してる時には、
ブラウザのJavaScript は、本当に止まっているのか？
一方、VSCode でデバッグすれば、ポイントで止まる
ひょっとして、他人のサイトを実行してるのか？
他人のサイト、仮想DOM などを使っているかも知れないから、更新はできないかも。
TypeScript のreadonly かも知れないし
プロパティーが読み取り専用かどうか、判別できないのか？
そういう関数が無いのか？ どうでもいいけど
なにtypescriptのreadonlyかどうかでビルド結果のコード変わるの？ >>792
ここに書き込む人はプログラマーとは限らないが
ニチャンネラーであることは確かだろ
ここをどこだと思ってるんだ？
間違えるな 「rgbaを使って赤の透明度をランダムに変えていきましょう」
ctx.fillStyle = 'rgba(255, 0, 0, ' + Math.random() + ')';
Math.random()の両側に+を置くのはどういう意味なのでしょうか？ >>795
>>788はネタになってないのを無理やりネタということにして、言い訳してるだけ >>797
低脳なコメントにいちいち関わるな、
ネタとでも思っとけということなんだが
伝わらなかったか >>795
790 ：Name_Not_Found ：sage ：2020/04/23(木) 22:42:48.84 ID:???
2ch流のノリが分からない人はわざわざ2chに来なくていいよ >>798
なぜrgbaの値の中で文字列結合するのでしょうか？ >>801
なんでっておまえ
CSSは文字列で書くものじゃん CSSてのはおかしいか
スタイルは文字列じゃん
そのスタイルの文字列をJSで作るんだから >>799
低脳なコメントを自認してるなら良かった >>801
>ctx.fillStyle = 'rgba(255, 0, 0, ' + Math.random() + ')';
こういう文字列にしてるだけでしょ？
rgba(255, 0, 0, 0.3)
rgba(255, 0, 0, 0.8)
分けて書くと、
let str = 'rgba(255, 0, 0, 0.3)'
ctx.fillStyle = str >>805
ありがとうございます！
strを作成してるってことなんですね。 >>804
自認はしてないよ
だって俺が書いたレスじゃないもの >>807
じゃあ、ネタと思ってないのに「ネタとでも思っておけ」と書いたのか >>808
ネタかもしれないし、ネタじゃないかもしれないが
ふざけて書いたようなレスにまともに付き合うな
ここは2chなんだから変な妖精がスレに住み着くこともあるし
そのくらいご愛嬌と思って流しなよという意味だわな
お前のそのツッコミがまさに細かいところを深く気にしすぎだと思うぞ
他人の訳の分からないコメントくはふーんくらいに思っとけばよかろう
そもそも巷の解説は誤だらけってことを初心者も分からないといけないしね
多少の訳の分からない回答もご愛嬌ってことだ そもそも「こういうツール」に見えるものはフロントだけだしな このサイトで、使われている技術を調べれば？
Find out what websites are Built With
https://builtwith.com/ 今グラフィカルでリッチなUI実現できてるの
使われてる可能性のある技術はなんだろう
- フロントエンドフレームワーク(Shadow DOM)
- Flash（レガシー）
- Canvas（レガシー？）
- WebGL
- SVG？
- Unity？ Wapp analyzerも使われてる技術大まかにわかるね そもそもリッチなUIとやらが流行ってない
ここ10年はWindows10でも何でも質素なUIが流行ってる 地図のapi？とかデータ、とか何を使ってると思われますか 地図なんて固定画像じゃない？
気流のデータは気象観測機関や省庁から発表されてるものでしょう 今って少し前のjQueryのようにTypeScriptとVueやReact推奨してる感じですか？ >>825
ちょと違う
jQはライブラリつって汎用な便利ツールの詰め合わせ
vueやreactはフレームワークといって
mvcのウェブアプリケーションを作るための雛形みたいなもの
TypeScriptはそのライブラリやフレームワークを利用して
自分の作りたいアプリケーションのプログラムを書くための言語の１つ そんで今も昔も
特定のライブラリやフレームワークが推奨されたことなんてない
逆に非推奨な書き方みたいなものは
開発者の間での一定のコンセンサスはあったけど JSは仕様と実装が分かれていて
もり立てていくような運営や中核コミュニティも存在しないから
これが推奨というのは難しい
まあ何かしらというのであれば
著名人が使ってるツールや書き方を参考にすれば流れにはついて行けるが
古い書き方でも基本的には動くのだから別にそうする必要性もない
自分の好きにすればいい >>826
なるほど 説明ありがとう
TypeScript+フレームワークがアプリケーション開発用ということは
Webページに便利機能や演出を付ける程度のスクリプトなら必要ないということですね
>>827
たしか、後方互換（主にIE用）にいちいち判定処理入れるくらいならjQuery使っておけみたいな感じだったかも フレームワークはやり方が強制される。部分的に使うということが苦手
また必ずしもコードが短くなるわけじゃない。
コードが大きくなったときのメンテナンス性を上げるために
小さなコードの断片に分割することができる。
それぞれのコードは小さいが、全部合わせると、分割したものを連携させるための
コードが追加で必要になって大きくなる
またフレームワークは一応混ぜて使えるということになってるが注意点が必要
一つのページに混ぜられると言うだけで、JavaScriptコードの一部で使うのは難しい
全部フレームワーク化 or 頑張って混ぜる。この２つしかないと思ったほうが良い
jQueryを始めとするライブラリは、既存のJavaScriptコードを
置き換えてコードを短くすることが出来る。
部分的に使うのが簡単。jQueryは互換性のために作られたが
それがなくともJavaScriptをシンプルに書くことが出来る 定期的に出現するjQuery信者の偏向思想を鵜呑みにする初心者が出てくるのは、どうしようもないんかね jQueryとコンポーネント指向じゃ
保守性が
トランプタワーとレゴブロックくらい違う >>829
別にTypeScriptは用途を限定したものじゃないよ
アラート１つ出すために使ったって構わん jQueryは電子レンジ調理みたいなもの
料理人としてこれが料理の全てだとか基本だとか思ってしまうのはまずいが
俺は電子レンジを使わないと決めるのももったいない
物事には適材適所というものがある たとえ話は本質からずれて解釈されることが多いので、普通は使わない
が、初心者はものごとをたとえたがる傾向にあるね だってそもそも正解がない議論なのだから
いかに相手にそれっぽく伝えて納得感を持ってもらうかってことになるでしょう？
そうなればたとえ話でもして適当な妥協点を見つけて不毛な話を終わらせるしかないじゃない！ それらのフレームワークはjQueryで作るのが難しかった種類の問題を
解決するためのものであって無条件にjQueryから移行すべきものじゃないんだよ
問題の種類が今までと変わらずウェブサイトであるならjQueryが適してる
脱jQueryとかいう言葉が生まれたのは2015年頃だが、もうあれから5年経つわけだ
本当にjQueryから移行して楽になるのであれば、もっとjQueryのシェアは減ってるし
フレームワークのシェアも上がってるはずだろ？
これがjQueryと他のフレームワークの違い。ようするに使える場面が少ないんだよ。
死滅した扱いのBackboneやPrototypeよりも使われてないからな
https://w3techs.com/technologies/history_overview/javascript_library/all/y
2011年 28.3% 42.8% 54.5% 57.4% 61.5%
2016年 68.3% 71.9% 73.1% 73.6% 74.2%
2020年4月 73.6%
Backbone 現在0.7% Prototype 現在0.7%
Vue.js 2018年0.1% → 現在0.3%
Angular 2015年0.1% → 現在0.4%
React 2018年0.5% → 現在0.3%
https://w3techs.com/technologies/history_overview/javascript_library/ms/y
2011年 74.0% 84.1% 90.2% 92.9% 94.5%
2016年 95.8% 96.4% 96.2% 97.3% 97.4%
2020年4月 97.5%
Backbone 現在0.9% Prototype 現在0.9%
Vue.js 2018年0.1% → 現在0.4%
Angular 2014年0.1% → 現在0.5%
React 2018年0.7% → 現在0.3% まあ最近は直接jQueryを使ってるサイトは少なくて
レガシーなライブラリやコンポーネントが
実際は殆ど必要ないのにjQueryを参照してるから
数の上では多いように見えるだけだけどね プッシュ通知のように多くのサイトにとりあえず入れられてるというだけで
益が殆どないどころか害が上回りかねないので実際は嫌われてるのがjQuery
特に近年キャッシュがDouble-keyedになって
CDN配布によるキャッシュの再利用化の恩恵を受けずらすなってからは
世の中のリソースを無駄に食いつぶすインターネットの害虫と化している >>840
その理屈だと"フレームワークが増えてない"ことの説明がつかない 仮にフレームワークの利用者が10倍増えたとする
100人中1人だったのが10人、そうすると10%になる。
フレームワークの利用者が10倍になったとしてもシェアが変わらない。
という状態が成立するとしたら、jQueryのユーザーも10倍
jQuery以外もたいして変わってないのだから10倍にならないといけない
そんなことはまず考えられない
つまりここ数年フレームワークの利用者は増えていない。
普通は鳴り物入りで登場したものは最初の数年で爆発的に伸びるものなんだが
最後の数ヶ月で爆発的な伸びは終わったとしか思えない キャッシュ再利用化？jQueryはサイズが小さい。
フレームワークはjQueryの数倍ある。おもすぎる。 >>842
明らかに増えてるでしょ
Webページ上の読み込まれるスクリプトのサイズや個数はどんどん大きくなってるんだから
jQuery依存の雑多なコンポーネントがそのリストに計上されてないだけでしょ
あちこちに転がっているミニマムな機能セットの全てに名前が付いてて
ライブラリと認識されるわけではないのだから
そのリストでわかるのはあくまで著名なライブラリやフレームワークのそれぞれが
どのくらいの割合で著名なサイト上で読み込まれてきてるかの変動具合であって、
その他のことを推し量ろうとするのは無理があるだろう state of jsでjQuery使ってるってやつ3%しかいねえなぁ
情報収集能力のある技術者にバイアスかかっちゃてるけど 標準機能が不足していて、各ブラウザの足並みが全然揃っていなかったころならともかく
標準機能が充実してきたこの頃今からjQueryを使う必要がない
ポリフィル的なのが欲しけりゃ標準機能のポリフィルを噛ませばいい >>847
jQueryは多くないかもしれないという疑念じゃなくて
フレームワークが使われているという証拠を持ってきて >>849
jQueryはポリフィルライブラリじゃなくて
標準DOM APIを簡潔に書けるようにするライブラリですよ
そこがわかっていない。 jQuery、コードが簡潔にかけて良いなぁって思ってるところに、
jQuery使わなくても、同じコードでどのブラウザでも動く
ほれ！って冗長なコードを見せるってネタが昔はやったよなｗ >>851
セレクター周りくらいでしょ
そこだけのミニマムjQuery使うって言うならまだ気持ちは分かるよ jQueryって簡潔にかけていいなぁ便利だなぁ
簡潔に書けるってことに反論ある？
・生JavaScriptでもどのブラウザでも動く！
・セレクタ周りぐらいでしょ！
いやだから、簡潔に書けるってことの反論はないの？
お前が思ってる「jQueryのメリット」って的外れじゃん 昔話はいいよおじいちゃん
よっぽどトラウマになっちゃったんだね まあまあ、脱jQueryのために
「jQueryなくすと冗長なJavaScriptコードになるよ」
という記事でも見てみたら？
高度な機能になればなるほど、生JavaScriptは冗長になる
特に複数の要素にイベントを割り当てるときとかね
ループが必要になる処理は、生JavaScriptだとうんざりするよ
ループがいらない例ばっかり持ってきてごまかすのやめよう 被害妄想甚だしいな
そもそもjQueryは大サイトの90何％で使われているからといって
じゃあWeb制作にほぼほぼ必須なものかというとそれは過大評価だよと皆言ってるだけで
評価をガクッと落とそうがよく使われているライブラリの１つになるだけで
他のフレームワークなどを使うときと同じく必要性を見極めて適材適所で使おうと言ってるだけで
乱用や常用するものではないよというだけでjQueryには長所がないとは言っていないだろう
１番よく使われるライブラリの名を冠したその実フレームワークであるし、
歴史的な構造的なレガシーさを残してるからライブラリやフレームワークの取り扱いの注意点やら
そういった諸々の批判を代表として受けがちではあるが、別にjQueryの全てが無価値という人はいなくて
声高々に言われてるほどの価値はないが、他のものと同程度の存在だって言ってるだけでしょう？ 認識・考え方の違いでしょ。
ここを初心者学生がESを覚える場所と思ってる言語学者の方々にとっては、
jQueryなんてそれ自体の提供するものを分析すればガラクタと言う事になる。
一方ここを新入社員にWeb制作を学ばせるオリエンテーションの場所と思ってる社畜の方々にとっては、
jQueryは枯れた著名なライブラリだからチーム制作に都合がいい価値あるものという事になる。 jQuery は、ajax・エフェクトを切り離した、slim バージョンが出来た！
Ajax は、axios を使う。
アニメの代替は、知らないけど
Bootstrap が、popper.js・jQuery のエフェクトを使っているから、
これらが仮想DOM で使えるかどうか
Ruby on Rails で、jQuery, Bootstrap, Vue.js, TypeScript みたいな組み合わせができるかどうか
Bootstrapのエフェクト関係を、切り離せないかな？ Bootstrap がエフェクト無しで、SCSS だけなら、使えるコンポーネントが少なくなるのか？
ウェブページの先頭へ戻るときの、スクロールアニメが欲しい場合に、どうするかとか >>857
> じゃあWeb制作にほぼほぼ必須なものかという
誰も必須だとは言っていない
> とそれは過大評価だよと皆言ってるだけで
みんなが過大評価だと言ってるわけじゃない
jQueryの評価を下げてるやつがいるから言ってるんだろ
脱jQueryってなんだよ？なんで脱しなきゃいかんのだって話
俺は正しく評価してるだろ。vueとかangularとかreactとかいう
フレームワークはウェブアプリを作るためのもので
jQueryから置き換わるものじゃない。
jQueryを置き換えるものなんて登場してないし
ウェブの大多数を占めるウェブサイトはjQueryが適してる
と事実を言ってるだけ。過大評価じゃない。実際にデータとして現れてる。
むしろフレームワークのほうが過大評価なんだが >>857
あとライブラリとフレームワークの区別ぐらいはつけような
フレームワークは呼び出す側のことを指す言葉
「俺が書いたコード」をフレームワークが呼び出す
ライブラリは俺の書いたコードを呼び出すわけじゃない
jQueryは俺が書いたコードを呼び出さない。呼び出すとしたら
ブラウザが呼び出しているので、jQueryやDOM APIにとっての
フレームワークはブラウザということに鳴る それは違う
その名の通りつまりレイヤーだったり世界観を提供するものがフレームワーク
それには及ばずある分野の便利関数を寄せ集めて提供するものがライブラリだ
jQueryは提供する機能が幅広く独自世界を提供するフレームワークだ >>863
別スレッドで回す物理エンジンとかでない限り
あらゆるフレームワークのあやゆる機能がブラウザのイベントループとイベントを元に動いてると思うが >>864
> その名の通りつまりレイヤーだったり世界観を提供するものがフレームワーク
お前と同じことを言ってる定義、持ってきてね。 おれの定義は俺が勝手に思ってるだけのものだが
お前の定義はツッコミが入ってるようにそもそも成立してないだろ
客観的妥当性を評価したいのならまず最低限成立し得る定義を持ってきてからにしな jQuery slim は、ほぼ、Lodash と同じ。
便利なライブラリ
jQueryのCSS セレクターは、便利
問題は、実DOM を更新するから、仮想DOM の更新タイミングと合わない！ > 問題は、実DOM を更新するから、仮想DOM の更新タイミングと合わない！
だからそれはjQueryの問題じゃなくて
DOM APIによるDOM操作だって同じなんだって。
仮想DOMを使うフレームワークを使うとブラウザ標準のDOM APIと共存しづらくなる
標準準拠しますか？それとも標準のやり方を諦めてフレームワークに依存しますか？という問題 jQueryのCSS セレクターは、便利って本当に使ってるか？
たしかに便利だ。拡張されてるし、自分で拡張することも出来る。
だが標準のCSSセレクタぐらいしか使わんだろ？
jQueryが便利なのはCSSセレクタでとってきた後。
DOM APIのように配列をぐるぐる回す必要もないし
要素が一つもない場合のことを考えなくていい
0個以上の要素に対して直接メソッドを呼べるってのがjQueryの素晴らしい点で
それによってループいらず条件文いらずでコードを宣言的に書くことが出来るようになってる。 >>870
> 配列をぐるぐる回す必要もないし
回ってんじゃね？ >>871
まさかライブラリの中で処理してるからとか言わんよな？ｗ
JavaScriptでも最終的にはアセンブラとか言うアホがいるからなぁ じゃあ、あんたでいいから「回ってんじゃね？」の意味を言ってみてよ
それに答えられなきゃ、俺に「短絡的に」レスしたってことになる 前もこんな話あったなぁ。
「単なるライブラリ」だと下に見られている気がするんだろうか。 遅かれ早かれ消え行く定めではあるからなぁ
ベンダーの足並み揃った今は標準APIの手堅さが目立ってきてる
こんなこと言うと標準APIだけ使ってろとか言いそう オブジェクトのプロパティのキーは変数になるけど、letとかconstの違いを決めることできないの？ >>878
なにがアホってそりゃアホだろ？
関数型言語にはループがないっていったら
その中身（アセンブラ）ではループしてるだろと言ってるようなもんだろ
ライブラリが提供している「もの」の話をしてるのに
お前はライブラリの実装の話をしている
的外れもいいとこだし、どうせ的はずれであることも理解してないんだろ >>877
書き変えたくないやつはObject.definePropertyで設定すれば？ >>877
日本語でおkだが、特定のプロパティのみブロックスコープにすることはできない >>880
ここはJSのスレだから
JSのレイヤーで考えるのは当然
ここじゃなければ君の考え方は自然だが
ここでは異常だと自覚したほうが良い JSのレイヤーで考えても一緒なんだが？
仮想DOMと言ったって、どうせDOM操作してるんやろ？
ならそんなフレームワーク使う意味ない
と言ってるのと何も変わらん 君がそう思うのはよく分かったが
君以外はそう思わないのだから残念なことだね 「obj のすべての数値プロパティに2を掛ける関数miltiplyNumeric(obj)をさくせいしなさい。」
答
let menu = {
width: 200,
height: 300,
title: "My menu",
};
function multiplyNumeric(obj) {
for (let key in obj) {
if (typeof obj[key] == 'number') {
obj[key] *= 2;
}
}
console.log(obj);
}
multiplyNumeric(menu);
ーーーーーーーーーーーーーーーーーーーーー
//出力結果
{width: 400, height: 600, title: "My menu"} let menu = {
width: 200,
height: 300,
title: "My menu",
};
function multiplyNumeric(obj) {
for (let key in obj) {
if (typeof obj[key] == 'number') {
obj.key *= 2;
}
}
console.log(obj);
}
multiplyNumeric(menu);
ーーーーーーーーーーーーーーーーーーーーー
//出力結果
{width: 200, height: 300, title: "My menu", key: NaN}
if文の中で
obj[key] *= 2;
と書くのとただしく数値が2倍されるのですが
、
obj.key *= 2;
と書くとうまくいかない上に、key:NaNという新しいプロパティができてしまうのはなぜでしょうか？ なるほどそういう意味か
object.keyはobject["key"]だからね
こんな質問文章だけで説明するなや 細かいことを言うかもしれないが、すべての値が数値であるプロパティが対象だろ？
for-inじゃenumerableな文字列キーのプロパティしか対象にできないし、*=2が有効なのはnumber型だろ？
enumerableでないプロパティやSymbolキーのプロパティもあるし、数値型にはbignumとかもあるだろ？ 文章問題全般に言えることだが、
こういうのはプログラミングの能力評価半分・質問者の気持ちを汲み取る能力評価半分のテストでしょ
世の中には完璧な問題というのは殆ど無くて、問題が問題を抱えていることの方がよっぽど多いのだから
本当にJSの仕様の理解度やコードを書く能力を測りたければ、「このテストを通るコードを書け」という問題を出せばいい
そうでないのはこれはただのプログラミングのテストではなく、実社会でJSというツールを使って生きていけるかのテストだからだよ 毎回不具合は出てるのに
不具合が出てるから次まで待とうとか言ってたら永久に待つことになるだろ 配列へオブジェクトを動的に格納しています。
格納したくないオブジェクト（例ではiが0,2,3のとき）の格納前にはcontinue文で次の反復を実行します。
しかし飛ばしたはずのオブジェクトの分まで添字が用意され、そこにundefinedが入ってしまいます。
配列には1つずつ要素を格納していますが、出力を見るとサンプルコードの★部分で配列の要素が1を超えて増えていることがわかります。
一体なぜ、このようなことが起こるのでしょうか。
【環境】Ubuntu 19.10, Firefox 75, Chrome 81.0.4044.122
【条件】Vanilla JSの使用, FirefoxまたはChrome最新版での動作
【エラーメッセージ】なし
【サンプルコード】
https://jsfiddle.net/et3pw2a4/
--出力ここから
X i = 0, len:0, person -> []
A i = 1, len:0, person -> []
B i = 1, len:2, person -> [null,{}]
X i = 2, len:2, person -> [null,{"id":"a1","no":8}]
X i = 3, len:2, person -> [null,{"id":"a1","no":8}]
A i = 4, len:2, person -> [null,{"id":"a1","no":8}]
B i = 4, len:5, person -> [null,{"id":"a1","no":8},null,null,{}]
A i = 5, len:5, person -> [null,{"id":"a1","no":8},null,null,{"id":"a4","no":20}]
B i = 5, len:6, person -> [null,{"id":"a1","no":8},null,null,{"id":"a4","no":20},{}]
{"person":[null,{"id":"a1","no":8},null,null,{"id":"a4","no":20},{"id":"a5","no":24}]}
--出力ここまで >>901
>>配列へオブジェクトを動的に格納しています。
はい、コードを確認しました。
>>格納したくないオブジェクト（例ではiが0,2,3のとき）の格納前にはcontinue文で次の反復を実行します。
はい、コードを確認しました。
>>しかし飛ばしたはずのオブジェクトの分まで添字が用意され、そこにundefinedが入ってしまいます。
いいえ、配列には飛ばしたインデックスでのプロパティは作られておらず、当然undefined値も入っていないことを確認しました。
>>配列には1つずつ要素を格納していますが、出力を見るとサンプルコードの★部分で配列の要素が1を超えて増えていることがわかります。
いいえ、それはそう見える書き出し方をしているだけであり、実際の要素数は１つずつしか増えていないことを確認しました。
>>一体なぜ、このようなことが起こるのでしょうか。
起きていないことを、あなたが起きていると信じ込んでしまっているため、あなたの脳内では起こってしまうのでしょう。 すみません、良い方法があれば教えていただけないでしょうか。
現在、300行、40列のtableを表示するjspを作っています。
一度表を描画した後、それぞれのセルに対してID設定や要素の追加等をjavascriptで
行っているのですが、画面を操作できるまでに10秒ほどかかってしまっています。
このjavascriptによる設定追加ですが、見た目には影響しないので、
バックグラウンドでできないかと思っているのですがよい方法はないでしょうか。
（表の描画が完了したところで操作可能となり裏でjavascriptによる設定を行う、等）
自分でも確認したところwebworkerというやり方が目に入ったのですが、DOM操作は
できないとのことで実現はできませんでした。 今どきは別スレッドに描画処理を持っていくこともできるが
でかいテーブルがJSPでどーんとHTMLに最初から乗っかってくるのだから
そういう繊細なことを考えても割に合わない
大胆で究極に簡単な方法
例えば最初CSSで非表示にしておいて処理が完了したら表示するとか
そういったことで乗り切れるでしょ
それでも重ければスクロールに従って少しずつ処理していく
そんなとこ >>902 >>903
ご回答ありがとうございます。
完全に私の思い込みでした。ご指摘いただきありがとうございました。
もう一度コードをよく見ました。私のコードは次のコードと同じでした。
let person = [];
person[1] = "略";
person[4] = "略";
person[5] = "略";
console.log(person.length); // => 6
console.log(person.hasOwnProperty("0")); // => false
>>いいえ、〜省略〜 当然undefined値も入っていないことを確認しました。
コードAを実行して、えっ、0,2,3はundefinedだよな？なのに入っていないとは？？？となりました。
しかしコードBを実行して、jの0,2,3でundefinedが返ったのは、[0][2][3]が未定義だからであることがわかりました。
言い換えると、undefinedが入っているわけではなく、何も入っていない（hasOwnPropertyメソッドがfalseになる）からundefinedが返ったのだと理解しました。
// コードA
for (let j = 0; j < foo.person.length; j++) {
if (undefined === foo.person[j]) {
console.log(`foo.person[${j}] is undefined`);
}
}
// コードB
let ary = [undefined, , 'c'];
console.log(ary.hasOwnProperty("0")); // => true
console.log(ary.hasOwnProperty("1")); // => false null は、プログラマーが初期値として代入できるけど、
一方、undefined は、プログラマーが代入できない。
実行環境が使うもの >>904
非同期・Ajax, loading spinner
たにぐちまこと
TypeScript入門 #08：Promise処理で、非同期通信（Ajax）をしよう①
https://www.youtube.com/watch?v=Yrx5WG4wVfA
この動画では、素のXMLHttpRequest(XHR)で、readyState === 4 を使っているけど、
普通はもっと簡単な、jQuery のAjax を使う
jQuery slim 版では、Ajax・アニメ効果は含まれていないので、
その場合は、axios を使う > たにぐちまこと
たまちゆき に見えた。新作でないかな？ jQuery.ajaxはfetchを知らない人の為の遺物 jQuery開発者「うん、だからそれを取り除いたslim版を作ったんやろ？」 $()はSelectors APIを知らない人の為の遺物 ElectronでJavaScriptを勉強し始めたのですけどファイルの読み込みと処理結果の取得がよく分かりません
ファイル読み込みは1行ずつ読み込みし逐次内容を抽出して変数に格納しています
この変数を戻り値としたいのでファイル読み込みのメンバ関数はasync,awaitしています
仮にread関数として使ってみると内容が入ってきません何がいけないのでしょう・・・
app.on('ready', () => {
win = new Window({window: BrowserWindow});
let list = readaaa();
console.log(list); ←内容が入っていない
});
async function readaaa() {
const aaa = new ClassAAA();
let list = await aaa.read();
console.log(list); ←内容が入っている
return list;
} >>908
axiosってさー
わざわざ使わないといかんの？
fetchしゃいかん？ >>914
>win = new Window({window: BrowserWindow});
>let list = readaaa();
>console.log(list); ←内容が入っていない
readaaa( )が非同期だから、後で呼ばれるのでは？
前・後が、list よりも先に、表示されるのでは？
win = new Window({window: BrowserWindow});
console.log("前");
let list = readaaa();
console.log("後");
console.log(list); ←内容が入っていない >>912
> $()はSelectors APIを知らない人の為の遺物
Selectors APIで代替できると思ってるやつは
$() は Selectors APIと同じ機能しか持ってないと勘違いしてるアホ >>915
axiosだとデフォルトのhostやレスポンス処理定義したりinstance発行できるから
規模による const time1 = new Date();
const time2 = new Date;
()が無くても同じ値が出てくるんだけど、()無しはどう意味あんの？ Selectors APIで～と言ってるやつに
じゃあA要素が複数ある時に
$('a').on('click', function() { ・・・ }); や
$(document).on('click', 'a', function() { ・・・ }); と
全く同じことをするコードはどうなるの？って聞くと
冗長なコードを持ってくるから笑えるｗ >>920
Dateというよりnew 演算子で引数がない場合の糖衣構文 >>920
意味は特にないよ
引数渡す必要なければ省略可なだけよ >>922
なんのメリットもシュガーも与えてないのだから
こういうのは糖衣構文とは言わん。ただの省略
糖衣構文というのは「以前は不便だったものを内部の構造を
大きく変えないで構文だけで便利にするもの」
以前よりも良くなってる素晴らしいものが糖衣構文であって
ただの省略は何のメリットももたらしていない たまに糖衣構文だから価値がないみたいなことを言ってるやつがいるが
もしかして糖衣構文の意味を知らなかったとかなのか？ 挙動が変わらなければシンタックスシュガーじゃないの？
>>924のは省略記法とでも言うの？
差は厳密に定義できるの？ >>924
メリット云々はよくわからないが
構文ではなかったかもすまん マジで糖衣構文の意味を知らんのかｗ
糖衣って知ってるか？
セイロガン糖衣Ａの糖衣だぞ
https://kotobank.jp/word/%E7%B3%96%E8%A1%A3-579473
１ 薬剤を服用しやすくするために外側に施した、糖分を含む被膜。「糖衣錠」
２ チョコレートやゼリーなどの表面を覆う、砂糖でつくった硬い被膜。「糖衣菓子」
何かを糖衣してなきゃ糖衣にはならん 括弧省略できるのは糖衣じゃないのか？
どこからが糖衣でどの省略が糖衣じゃないのか例出してくれたらわかる jQuery の利点は、未だに大きい
YouTube で、たにぐちまことの「jQuery 入門」という動画を見れば？ >>928
糖衣って無理矢理和訳だから、多少はね？ >>914
app.on('ready', async () => {
win = new Window({window: BrowserWindow});
let list = await readaaa();
console.log(list);
}); >>916
関数を呼ぶと全て非同期になるのですか？
ちょっとよく分からないのでもう少し勉強してみます。
>>932
ありがとう、やってみたら内容受け取れました。
非同期処理と同期処理でぐっちゃになりそうです >>921
document.querySelectorAll('a').forEach( elem=> elem.onclick = aFunction );
回す用の仮引数 elem で記述が1つ増えるだけじゃない？ const time1 = new Date();
const time2 = new Date;
console.log(timer1 ===timer2);
としてみるとfalseが返ってくるんだよな。
同じではないってこと？ >>935
オブジェクトの厳密比較は参照が同じじゃないと偽を返す >>929
糖衣を省略と思ってるからおかしなことになるんでしょ
より素朴な構文があって、それらを組合わせて実現できることを
１つの構文で実現できれば、それはそれらの糖衣構文と言うんでしょ
それと、「括弧が省略できる」っていうのはだだの主観的な見方でしょ
配列やオブジェクトの末尾カンマのように、見方を変えれば「不要な括弧をつけることができる」とも言えるでしょ
要するにないパターンとあるパターンはどちらかがもう片方の特殊な形と言っても間違いではないけれど、
そう言うよりはどちらでも書ける対等な存在同士と考えるほうがスマートでしょ
実際のESの仕様的にも
new MemberExpressionとnew MemberExpression Argumentsの２つが存在してるんでしょ >>935
２つの存在をそれぞれ作ったのだから
それらが同一であるはずがないじゃないか >>933
>async function readaaa() { }
async が付いているから、非同期関数じゃないの？
非同期は、同期処理とはコンテキスト・文脈が異なるから、
通常の方法では、やりとりできない
特別な書き方をしないといけない >>933
ハイパー大雑把だけど
awaitは必ずasync関数の中で使おう クロージャーの説明のサンプルコードについて質問です。
const createCounter = function() {
let cnt = 0; //(1)
console.log(cnt); //(2)
return function() {
cnt +=1;
console.log(cnt); //(3)
};
};
const counter = createCounter();
counter(); //(4)
counter(); //(5)
counter(); //(6)
出力結果は以下の通りになりました。
0 //(4)を実行
1 //(4)を実行
2 //(5)まで実行
3 //(6)まで実行
なぜ(1)のlet cnt = 0 と(2)のconsole.log(cnt)はスルーされちゃうんでしょうか？ (1)(2)は
const counter = createCounter();
の時にしか実行されないから
console.log(counter.toString());してみ >>941
0は(4)じゃなくて(2)の出力じゃない？
(1)(2)はちゃんと1回処理されてる >>941
createCounter();は
let cnt = 0; //(1)
console.log(cnt); //(2)
return
だから0じゃん
counter();は
cnt +=1;
console.log(cnt); //(3)
だから3回呼べば1,2,3じゃん
何がどう分からないの？ >>934
やっぱりだめですねｗ
それだと複数のイベントを設定できない
頑張ってjQueryと同じようなことをしても
デメリットが出てしまう
$(document)～のほうはもうお手上げみたいだしｗ >>944
counter()を実行する、つまりまたcreatecCounter()を実行するのに(1)(2)をすっ飛ばしてしまうのが理解できてません。 >>945
複数の要素に同じイベントハンドラを設定する必要はないから問題ない >>945
ほれ
document.querySelectorAll('a').forEach(elem => elem.addEventListener('click', aFunction)); >>946
counter()を実行する、つまりまたcreateCounter()を実行する
ことにはならないでしょ
counterはcounterであってcounterには
cnt +=1;
console.log(cnt); //(3)
の部分しか含まれてないじゃん >>946
const counter = createCounter();
で実行されるのは944が言ってる通り
let cnt = 0; //(1)
console.log(cnt); //(2)
return
までで、そのreturnに指定してある戻り値の
function() {
cnt +=1;
console.log(cnt); //(3)
};
がcounterに代入される >>947
> 複数の要素に同じイベントハンドラを設定する必要はないから問題ない
それはお前の都合であって、
お前という人間の話はしてない。
技術について語れ >>948
長いよなぁｗ
document.querySelectorAll('a').forEach(elem => elem.addEventListener('click', aFunction));
$('a').click(aFunction);
これがjQueryとの差。4倍と言っていいかね？ｗ 長いなら適切に関数を作れば良いのでは？
もしかして他人が作ったものしか使えないってこと？
それなら俺がもっと短く書けるライブラリ使ったらそれを使うんだろうか？
jQueryの価値は短く書けるとかいう馬鹿なことじゃないでしょ
多くの人が使ったことがある著名で枯れたライブラリだから
チーム開発に導入して意味があるんでしょ
短く書けるからと言ってその場限りの適当なライブラリあフレームワーク持ってくると
学習コストが見合わなかったり、メンテがされてなかったり、後々ルールを思い出すのが大変だったりするんでしょ
だからそんなものを使うくらいなら「著名で枯れている」標準APIを使っとこうとなるんでしょ
jQueryの価値って、短く書けるとかそういったことじゃなくて、「皆が使ってる」これに限るでしょ > 長いなら適切に関数を作れば良いのでは？
だからそれをjQueryがやってくれてる
オレオレで作った関数は、他人と知識を共有できない
jQueryであればたとえ外部の人とであっても、技術を共有できる
> jQueryの価値は短く書けるとかいう馬鹿なことじゃないでしょ
jQueryの価値は、開発コストの削減。短く書けるだけじゃなくて
新しく雇った人でも知ってる可能性が高い。教えるコストも減る。
自社独自の方法は出来る限り少なくするべき >>953
今話しをしてるのは
皆が使ってるjQueryとDOM APIの比較
両者ともに皆使ってる。皆使ってる同士を比べて
良いのはjQueryだという話をしている。 >>955
良いということを否定してないよ
でもその理由はおかしいでしょってこと
あと煽るような書き方やめなよ >>951
使わなくて良いものにコストをかけるのは愚かなことだ >>957
jQueryは使われてますよ。
またシェア出しましょうか？ このクソ馬鹿は死んでも直らんな
HTMLやCSSで十分簡単にできることなのに
JSはほぼ100％のサイトで使われている！
だからJSを使うべきだ！
と騒いでるのに等しいことが分からんのか 数十だか数百だかの文字を削減できたところで
それで削減できる時間よりもjQueryライブラリを導入してページに配置する時間の方が何倍も大きい あ！
createCounter()の戻り値である関数が代入されるってことですね！
const counter = function () {cnt += 1 ・・・}
となるんでcounter()とするとcntに1が足されると。。。
counter()とすると毎回createCounter()を実行するものだと思ってました。
解決しました。ありがとうございます！ やめろお前ら素人じゃあるまいに
それぞれのエコシステムにフィットするものが
一意でないことなんて当たり前じゃん
そんなことは過去に何千件とこなしてきた仕事でわかりきってるだろ >>962
2chなんだから趣味プログラマや
仕事を選ぶフリーランスとか
職人気質な奴が多いんだろうな >>962
2chなんだから趣味プログラマや
仕事を選ぶフリーランスとか
職人気質な奴が多いんだろうな >>959
いやいや、JSだけで出来るのわかってる
DOM APIを使うよりも快適に作れるのがjQueryって言ってるだけ >>960
> それで削減できる時間よりもjQueryライブラリを導入してページに配置する時間の方が何倍も大きい
あなたは1行追加するのに何時間かかるんです？ JavaScriptでクラスを学び始めて気になったことがあったので質問させてください
JavaScriptは関係ないかもしれませんが、メソッドの中で別のクラスのインスタンスを呼ぶ事が、
せっかくクラス分けしているのに動作が他クラスのインスタンスに依存する形になって気持ちが悪い気がします
このような書き方は一般的なのでしょうか？
class A {
constructor(){}
metho(){
console.log('A!');
}
}
const a = new A();
class B {
constructor(){}
method(){
a.method();
}
}
const b = new B();
b.method(); >>968
鯖から落として読み込み毎にメモリに展開するって話じゃないの JSに一般的な書き方というものはないし
お前さんが一般的な書き方を探して真似するする必要もない
気持ち悪いと思うのならばそういう書き方をお前さんがしなければいいだけの話 >>969
あくまで強いて言えば、
自前のライブラリなどでパッケージとして公開する場合は
そもそもClass AやClass Bというクラスを作るクラスも作っておいた方がいいかも >>970
流石にそんな意味がないことを気にしてるわけ無いやろｗ >>969
クラスが他クラスに依存した形にならないようにわざわざクラス分けするのであって、
そのような場合は別のクラスとして定義するべきではないのは理解できない？ class B が class A を持つような形にすれば
「Bでメソッドを使いたいけどAがインスタンス化されていなかった」
みたいな問題は起きなくなる
プログラム書く以前の設計の問題 あの例がだいたいの形だとして、
AはBで利用する用で主にBをexportしたいのならばまだ分かりみがある 簡単なFlashゲームみたいなページ変遷のない育成ゲームを作りたくて
データバインディングが可能なライブラリを調べているのだけど
どこにでもNode.jsという謎の概念が出てきて、困っている。
ライブラリのようにscriptタグで読み込んで準備完了とはいかないのか…？
とにかく数値と画面の同期ができるだけでいいんだけど >>946
内側の関数を、return しているから、それは何回も実行できるけど、
(1)(2) は、それに含まれていないから、1回しか実行されない
まさに、(1)(2)は、内側の関数の外側に存在して、
内側で参照されている・つかまれているから、クロージャ
内側の関数が存在する限り、その外側にある、つかまれている環境も存在しなければならない。
だから、GC で解放できない。
これが、クロージャがメモリを食う理由
クラス内のメンバー変数と同じ仕組み。
クラス内のメソッドの外側に存在する変数だけど、メソッド内で使える
つまり、クロージャは簡易クラスみたいなもの >>904
>>908
にも書いたけど、下もある
たにぐちまこと
jQuery入門 2020 #06：非同期（Ajax）通信をしよう ①
https://www.youtube.com/watch?v=dyBtH9NolIQ&;list=PLh6V6_7fbbo_CHSvYCwcgh2p79ybE5OCi&index=6
非同期処理、jQuery, Vue.js, Axios の比較 >>969
異なるクラスは、異なるファイルに書いて、import/export などを使う
export 文は、モジュールから関数、オブジェクト、プリミティブ値をエクスポートするための、
JavaScript モジュールを作成するときに使用し、
これらは別のプログラムから、import 文で利用する
export default class { .. }
import myDefault from '/modules/my-module.js'; >>977
VSCode, Node.js は必須。
Ruby on Rails でも使う
Node はサーバー側の実行環境。
これが無いと、ブラウザを実行環境にしないといけないから、テストが大変。
gulp・npm scripts などのテストランナーや、端末も使えない
ブラウザが実行環境の場合、webページは、ローカルPC 内のファイルにアクセスできないから、
Ruby を参考にして、Nodeが作られた
npm/yarn という、ライブラリの依存関係を解決する、パッケージマネージャーも使える。
Ruby のBundler と同じ
Webpack, Babel で、ES2015, TypeScript, SASS などを、
ブラウザで動く、HTML5 へ変換したり >>977
ライブラリだけで頑張るのもいいけど
SPAやりたいなら
vueなどのフレームワークに頼ってみるのもいいんじゃない？ >>971,972,974,975,976,981
レスありがとうございます
やはり、あまりよくない書き方なんですね
まだクラスと言うものがまだよく理解できていなくて
canvas要素に多数のキャラクターを表示させ動かす200行くらいのプログラムをTypeScriptで書いて勉強しているのですが
canvasの初期化やベースの描画を行うスクリーンクラス→キャラクターのベースクラス→様々なキャラクタークラス
と継承させてグローバル変数なしでプログラムが書けないか試行錯誤している最中でした
クラスは設計図のようなものでそれ自体はインスタンス化されるまでプロパティを持たないため
例えばスクリーンクラスのプロパティを子要素でグローバル変数のように使いたい場合は
子クラスのコンストラクターのにスクリーンクラスのインスタンスを渡すか、
使い回したい変数を管理するクラスやオブジェクトを作るということでしょうか >>981
に書いたように、export されたクラスを、import して、
import myClass from '/modules/my-class.js';
let obj = new myClass( );
何かを管理するようなクラスは普通、複数のインスタンスを作らない。
そういう場合は、複数のインスタンスが作られないように、シングルトンでも使えば？ Node.jsはindex.htmlと同じとこにアップロードしたらサーバー側で動いてくれるもの？ >>986
すいません
なぜ、例えばスクリーンクラスで作成したcanvas要素への参照を格納したプロパティに子クラスからアクセスするために
クラスを外部ファイルにしなければならないのかが理解できません JSの決まり事ではないのかもしれないけれど、
オブジェクト指向の他言語だと1クラス1ファイルが基本になっていることが多い。
あんたが書いている通りクラスを設計図みたいなものとして見た場合、
設計図はただの設計図、実際にインスタンス化して利用するのは実行用のファイル、というように整理（管理）することが多い。
工場(実行用のファイル)の中に設計図を持ち込んで、それをもとに実際のブツを造る、というようなイメージが近いかも。
現実でも設計図や料理のレシピにベタベタと実物が貼りついていることなんて基本的には無いでしょう？
んで、プロパティやフィールドといったクラスが持つ変数へのアクセスは、直接アクセスしても良いけど、メソッドを通して正しい手続きを用意して行ったりする。
>>986が書いているように、複数作るとおかしくなるものに関しては、常に単一の変数を参照できるようにシングルトンで実装するよ、という話だと思う。
小さいプログラムであったり、個人で書いている分には>>971も書いているように決まりは無いから好きに書けば良い。 >>989
分かりやすく書いていただいてありがとうございます
しかし、TypeScriptのシングルトンは継承ができないらしく
例の場合のスクリーンクラス→キャラクタークラスの継承が不可能になるようです
スクリーンクラスとキャラクタークラスでは設計的な共通部分が少なくコンストラクタの相性も悪いため
そもそも継承すること自体が間違いな気がしてきました >>987
node.jsはサーバにインストールするもの >>991
レンタルサーバーに勝手にインストールして大丈夫なのだろうか、怒られないか >>992
レンサバではそもそもできないんじゃない？ >>990
ここでのやり取りだけでは具体的にどう設計(実装)されているのかは計り兼ねるけど、
"本当に継承が必要な場合"でないなら継承は避けて、"委譲"するべき、という考え方がある。
そもそもシングルトンを実装されるようなクラスの場合は継承すべきではない、と個人的には考えている。
適切なクラス分けやどのようなアルゴリズムやアーキテクチャを採用するか、というのはすごく難しい課題(設計)なので、
結局のところ、今あんたが書いているプログラムが
・練習や趣味
・他人の手に渡らないプログラム
の様な小さな規模であるのなら、
>>971も書いているように好きなように（自分の分かりやすいように）書けば良い。
逆に、
・長期的にメンテナンスしながら運用
・他人の手に委ねるようなプログラム
ならば、
採用する環境や、適切なクラス分け、どのようなアーキテクチャやデザインパターン（要するに設計）から熟考すべきと思う。 >>985
コンテキスト系は面倒でも毎回メソッドに渡すようにしたほうが良い
巨大で複雑になってくると絶対リファクタリングしたくなるよ >>994
ただ今時だったら
既にnode入ってるのもあるんじゃない？ 継承か、委譲(包含・部品化・インターフェース)か？
is-a, has-a
車・消防車は、親子関係の継承。
消防車は、車の一種。is-a
車・ハンドルは、has-a。
車はハンドルを持つ。
ハンドルは車の一種ではない 色々試したいなら狭義のWeb的レンサバではなくKAGUYAみたいなクラウドサービス使ったほうが良いと思う このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 127日 15時間 9分 58秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
