Name_Not_Found<>sage<>2019/12/26(木) 19:50:04.40 ID:???.net<> 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/ <>+ JavaScript の質問用スレッド vol.143 +
Name_Not_Found<>sage<>2019/12/27(金) 01:15:43.40 ID:???.net<> ■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 型の中身をそのまま表示してくれます。) <>
Name_Not_Found<>sage<>2019/12/27(金) 01:15:59.17 ID:???.net<> ■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ MSDN Library
https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
■テンプレ案
http://fiddle.jshell.net/fH4cC/180/show/light/
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/ <>
Name_Not_Found<>sage<>2019/12/27(金) 01:16:15.89 ID:???.net<> ■参考URL
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ−ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62 <>
Name_Not_Found<>sage<>2019/12/27(金) 01:16:34.96 ID:???.net<> ■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 和訳) <>
Name_Not_Found<>sage<>2019/12/27(金) 01:16:50.73 ID:???.net<> ■JavaScript主要ライブラリ・フレームワーク
jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
https://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
https://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/ <>
Name_Not_Found<>sage<>2019/12/27(金) 01:17:06.24 ID:???.net<> 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に一本化されました。 <>
Name_Not_Found<>sage<>2019/12/27(金) 01:17:22.59 ID:???.net<> ■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) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 <>
Name_Not_Found<>sage<>2019/12/27(金) 01:17:39.19 ID:???.net<> ■各種仕様
◆ Standard ECMA-262
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 2015, いわゆる ES6)
https://www.ecma-international.org/ecma-262/9.0/ (ECMAScript 2018)
https://tc39.es/ecma262/ (ECMA-262 最新ドラフト)
◆ 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 和訳)
削るべきか要審議
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table) <>
Name_Not_Found<><>2019/12/29(日) 17:05:16.56 ID:RZV6QmbA.net<> html内に記述のjavascriptにはlinter?は効かないのでしょうか。
オンラインでそれに対応したサービスはないでしょうか。 <>
Name_Not_Found<>sage<>2019/12/30(月) 19:50:08.90 ID:???.net<> 2019年もjQueryのシェアは微増で終わりましたね（苦笑）
だから言ったんだよ。誰もがウェブアプリ作ろうと思ってたりしないんだから
普通のウェブサイトならjQueryでいいんだって
適切じゃない技術に乗り換える意味がない <>
Name_Not_Found<>sage<>2019/12/30(月) 20:02:39.64 ID:???.net<> どっかのフロントエンジニア君（笑）が必死に終わる終わるいっても
結局はこの結果ですよ。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% <>
Name_Not_Found<>sage<>2019/12/30(月) 20:37:31.23 ID:???.net<> 形骸化してるだけなのに哀れだね <>
Name_Not_Found<>sage<>2019/12/30(月) 20:40:29.08 ID:???.net<> 形骸化？AngularやReactが増えないから
jQueryは減らないんですよ
AngularやReactが形骸化しちゃったと？ｗ <>
Name_Not_Found<>sage<>2019/12/30(月) 21:24:40.42 ID:???.net<> ここまでjQuery信者っぷりが露骨なテンプレだと、何も感じないな
2020年も彼は平常運転なんだろうね <>
Name_Not_Found<>sage<>2019/12/30(月) 22:01:38.93 ID:???.net<> 一生懸命覚えたjQueryを使った案件が減っちゃうとまんまが食えなくなっちゃうんだろうね
かわいそうに <>
Name_Not_Found<>sage<>2019/12/30(月) 22:23:51.87 ID:???.net<> でもjQuery減ってないじゃんｗ
AngularとかReactはバージョナップで
また覚え直しになるでしょ？ <>
Name_Not_Found<>sage<>2019/12/30(月) 22:47:42.82 ID:???.net<> 覚え直し？？ <>
Name_Not_Found<>sage<>2019/12/31(火) 01:26:51.56 ID:???.net<> 現実を見据えた奴なら全部覚えるだろ
jQueryに拘ってるのは信者だけ <>
Name_Not_Found<>sage<>2019/12/31(火) 03:43:03.03 ID:???.net<> そりゃjQueryが消えるわけないんだから
jQueryも全部の中に含まれるだろうな <>
Name_Not_Found<>sage<>2019/12/31(火) 05:12:47.54 ID:???.net<> >>17みたいにjQuery以外をこき下ろすのはアホってことだな <>
Name_Not_Found<>sage<>2019/12/31(火) 05:27:29.38 ID:???.net<> 別にこき下ろしてないだろ
Angularが1と2で互換性なくなったのは事実だし
ブラウザ標準のWeb Componentsが控えてるから
脱Angular、脱Reactの流れは明らか <>
Name_Not_Found<>sage<>2019/12/31(火) 05:37:48.66 ID:???.net<> 目指せフルスタックエンジニア <>
Name_Not_Found<>sage<>2019/12/31(火) 09:30:44.31 ID:???.net<> Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
jQueryなんてとっくに使われなくなってるはずでしょ
ここは自ら学ぶスレでJS仙人Web仙人を目指す者が多いだろうけど
全体で見ればできるだけ自ら学びたくなくて他者にすがりたい人が多いでしょ
だからこのスレでライブラリやフレームワークを進めるのは
このスレ以外で相談されたときと比べたら控えるべき
例えば全く無知な人からこういう見た目のグラフを起きたいと言われて、
WebGLの数十のAPIと数十の技法をここで説明仕切るのは不可能だし、
より噛み砕いても説明しきれないときはWebGLを0から学んでこいとだけいうのはあまりに辛辣なので
グラフ表示ライブラリを提示して、そちらのこの使い方を変わりに学べということを言うのは極悪ではないとは思う
何れにせよ目的が学ぶことより問題対処の答えをもらうほうが大きくなってはいけないということ
ここは仕事依頼所ではなくて質問者が自ら学ぶ機会を作るための場所ということを忘れてはいけない <>
Name_Not_Found<>sage<>2019/12/31(火) 09:37:35.58 ID:???.net<> そこで質問者に何を学ばしたいのかということ
jQuery力を身に付けさせたいのか、
jQueryなどに頼らなくてもWebAPIで実現できる力を身に付けさせたいのか、
それは各回答者によって違うし違ってて良いと思うが
ここがJavaScriptスレということは頭の片隅に置いておいてほしい
フランス料理スレがあったとして、そこで電子レンジ中心でするというのは面白いと思うが
あまり電子レンジ最高、これに頼らないのは変だというアピールをすると
なにかに特別こだわるのであれば亜流として他スレでやれということにってしまうのは仕方がないだろう <>
Name_Not_Found<>sage<>2019/12/31(火) 12:45:02.16 ID:???.net<> >>24
> Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
> jQueryなんてとっくに使われなくなってるはずでしょ
それは違うよ。Web Componentsはウェブアプリを作るもの
なので同じウェブアプリを作るAngularやReactと競合してる。
jQueryはウェブサイトに動きをつけるもの
Web Componentsと競合してない。
将来的にはWeb Componentsで作ったコンポーネントを
組み合わせるライブラリとしてjQueryが使われるだろう <>
Name_Not_Found<>sage<>2019/12/31(火) 19:12:55.80 ID:???.net<> jQuery厨と反jQueryとのバトルかお
大晦日だし朝までやってみろだお
生テレビみたいに <>
Name_Not_Found<>sage<>2019/12/31(火) 19:42:37.59 ID:???.net<> >>26
Web ComponentsとjQueryを対比してるのではなくて、
標準で補えるような機能があるから、競合すると言って移行が進むとは限らないでしょってこと
競合するってことは見方を変えると親和性が高く補い合えるということでもあるのだから
Web Componentsはウェブアプリを作るものではなく
要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
それに作れたからと言ってそれらを上手く使ったり運用することまでは含まれていないのだから
そういう面でフレームワークは必要でしょ
またjQueryはウェブサイトに動きをつけるものっていうのであれば
Web Animation APIが競合するでしょ
でもだからといってjQueryが不要ということにはなっていないでしょ <>
Name_Not_Found<>sage<>2019/12/31(火) 19:47:56.44 ID:???.net<> >>26
標準の各機能というのはあくまで機能であって、
フレームワークとか、ライブラリでもjQuery規模のものは
その世界観をまるごと提供するもので、そこに意味があるわけでしょ
そういう使い方をしているのであれば、
標準機能があるからフレームワークやライブラリが不要とはならないでしょ
「機能」のような粒度でそれらを欲しているわけではないのだから <>
Name_Not_Found<>sage<>2019/12/31(火) 23:39:49.36 ID:???.net<> >>28
jQueryとの対比？何を言ってるのですか？
標準の機能があるからAngularやReactのような重いフレームワークが不要になり
またそれに伴いフレームワークがまたガラリと変わるって話をしてるんですが
> Web Componentsはウェブアプリを作るものではなく
> 要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
従来のWebの延長だから、みんなWeb Componentsを選ぶでしょうね
> またjQueryはウェブサイトに動きをつけるものっていうのであれば
> Web Animation APIが競合するでしょ
動きってアニメーションのことじゃないですよ（笑）
動きというのは各コンポーネントの連携の話です。
AngularやReactでコンポーネントを作る時代は終わり
Web標準のWeb Componentsでコンポーネントを作るようになります。
いろんな所がオレオレブランドのコンポーネントを作るようになるでしょう
そこにフレームワークは組み込まれません
コンポーネントは部品です。その部品をつなげるものが必要です。
それがjQueryです。 <>
Name_Not_Found<>sage<>2019/12/31(火) 23:45:28.54 ID:???.net<> jQueryでコンポーネント(笑)作ってる奴には関係ないだろ <>
Name_Not_Found<>sage<>2020/01/01(水) 00:09:12.79 ID:???.net<> Web Componentsでコンポーネント作るんでしょ？ <>
Name_Not_Found<>sage<>2020/01/01(水) 15:14:45.12 ID:???.net<> >>30
それは違う
原則として標準機能というのは低レイヤーを攻めてる
フレームワークなどは高レイヤー
Web Componentsも一番大きい部分はなにかというとShadowDOMであり
今まで既存の要素spanやdivなどを無理くり使って
欲しい物を作っていたのがよりスマートにできるということ
スマートにできるようになったからと言って、
開発者誰もが自分でShadowDOMを触るかと言うと違う
そこは引き続きフレームワークを使うのが普通だろう
要するにこの手の標準機能はフレームワークを
よりスマートに作れるようにするためにあると言っても過言ではない
>>コンポーネントは部品です。その部品をつなげるものが必要です。
そのとおり
>>それがjQueryです。
それは違う
jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
要素間の高度な連携のための機能は入っていない
jQueryしか使わないのであればそこのロジックは全部自前で書くことになる
だからjQueryはあくまで「ライブラリ」と言われている <>
Name_Not_Found<>sage<>2020/01/01(水) 16:34:48.95 ID:???.net<> >>33
デスクトップアプリの歴史を学んだほうが良いぞ
ShadowDOMでコンポーネントが作れるようになったら
次起きる流れはコンポーネントの配布だ
コンポーネントは特定のフレームワークに依存せずに
単独で使えたほうが良い。そしてツリービューとかそういった
便利なものが配布される。そしてRADツールの登場だ
RADツールを前提としたプログラミングモデルになる
.NETフレームワークと同じようなもん
今もあるがそれがウェブ標準技術をベースに再構成される
今あるものは何も残らんよ。MFCが消えたのと同じように
すべてが作り直される <>
Name_Not_Found<>sage<>2020/01/01(水) 16:52:45.29 ID:???.net<> >>33
> jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
jQueryで要素を操作するんじゃないよ。要素の操作はコンポーネントに組み込まれる。
jQueryの担当はイベントハンドラだよ。
コンポーネント時代において、コンポーネント間の情報のやり取りは
すべてイベントによって引き起こされる。イベントドリブンって知ってるかね？ｗ
コンポーネントから特定のベントを受け取り、そしてそのまま又は多少加工して
他のコンポーネントに情報を渡す。コンポーネントは必ずしもUIを持っているとは限らない
タイマーコンポーネントのようなものもある。
ウェブという貧弱な技術からスタートしているだけで
結局の所、必要としているプログラミングモデルは、
最初から自由だったデスクトップアプリと変わらない。
デスクトップアプリを見ればウェブ技術の将来はわかる <>
Name_Not_Found<>sage<>2020/01/01(水) 18:51:12.67 ID:???.net<> イベントハンドラに特化したライブラリがあれば充分だな
めでたしめでたし <>
Name_Not_Found<>sage<>2020/01/01(水) 23:49:57.33 ID:???.net<> それがjQueryなわけだが <>
Name_Not_Found<>sage<>2020/01/02(木) 00:39:17.61 ID:???.net<> FormDataのappendをjqueryのcallbackで使ったらappendされなかったのですが
これはjqueryのせいですよね？
たしか$.ajaxでは"processData":falseと"contentType":falseの設定しなきゃいけなかったような・・
ajaxのときとは違ってエラーがでなかったのでめちゃくちゃハマりました・・ <>
Name_Not_Found<>sage<>2020/01/02(木) 00:42:39.36 ID:???.net<> いいえ、あなたの使い方が間違ってるだけです <>
Name_Not_Found<>sage<>2020/01/02(木) 01:13:52.66 ID:???.net<> >>39
よくよく考えるとformdataにはキーも値もsetされていて
そのformdata送信後のパラメーター（コンソールのnetworkのところ）に反映されてないだけかも、でした
jqueryのcallback(例えばtoggleとかeach)の中でformdata.appendのときは送信後のパラメータに反映されてなくて
jquery関係ない外のブロックでformdata.appendすると送信後のパラメーターに反映される
みたいなところまでは検証できたと思います
”そもそもformdataにキーがセットされているか否か”をまた近い内に検証してみます
てっきり、パラーメータに反映されない＝formdataにキーがセットできてない
だと思ってました <>
40<>sage<>2020/01/02(木) 08:37:20.01 ID:???.net<> 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できないっぽいです <>
Name_Not_Found<>sage<>2020/01/02(木) 08:58:04.72 ID:???.net<> > $().toggleで使うとキーがappendできないっぽいです
だからそんなことはないって
お前が使い方間違ってるだけ <>
Name_Not_Found<>sage<>2020/01/02(木) 09:06:04.54 ID:???.net<> だいたいその検証でなにがどうなってるのかさっぱりわからんし
他人にわかるようにかけ <>
Name_Not_Found<>sage<>2020/01/02(木) 10:57:00.44 ID:???.net<> >>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 <>
Name_Not_Found<>sage<>2020/01/02(木) 11:08:02.59 ID:???.net<> 一応原因はわかりました
toggle内でconsoleするとなぜか最後のconsoleの後にconsole.logされるのでおかしいと思い
時間を置いてから最後のconsole.logを実行したらキーがセットされていました <>
Name_Not_Found<>sage<>2020/01/02(木) 11:34:00.98 ID:???.net<> >>35
コンポーネントは要素でしょ
要素を操作するってことじゃん
逆に要素の属性指定で操作できない要素を作ったら
それWeb Componentの意味半減でしょ <>
Name_Not_Found<>sage<>2020/01/02(木) 11:46:59.68 ID:???.net<> >>46
コンポーネントとなってる要素は操作する（事がある）
コンポーネントの中身の要素は操作しない
> 逆に要素の属性指定で操作できない要素を作ったら
コンポーネントとなってる要素の属性は操作する
コンポーネントの中身の要素の属性は直接操作しない（メソッド、イベント経由で行う） <>
Name_Not_Found<>sage<>2020/01/02(木) 12:57:56.70 ID:???.net<> JQ厨にとってのコンポーネントはこれだから
同じものと思わない方が良い
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div> <>
Name_Not_Found<>sage<>2020/01/02(木) 17:46:44.67 ID:???.net<> input type="file"のファイルを選択するボタンを押さずにダイアログを開きたいのですが
どうやればいいのでしょうか（File APIの常にひらっきぱなしD&Dのやつではありません） <>
Name_Not_Found<>sage<>2020/01/02(木) 18:28:40.53 ID:???.net<> >>44
「javascript formdata」で検索して、MDN のサンプル通りに作れば？ <>
Name_Not_Found<>sage<>2020/01/02(木) 19:00:35.75 ID:???.net<> >>49
任意のタイミングで開きたいって話ならそんな横着は無理
あくまでもユーザーのアクションが起点
https://jsfiddle.net/ekhruwcj/ <>
Name_Not_Found<>sage<>2020/01/02(木) 19:08:57.22 ID:???.net<> >>50
フォームの設置は簡単なのですが
ファイルを選択ボタンをjavascriptでクリックしたことにするやりかたがわからなかったのです
>>51
.click()で思い通りのやつができました！！
ありがとうございました！ <>
Name_Not_Found<>sage<>2020/01/02(木) 21:42:02.91 ID:???.net<> click()は？ <>
Name_Not_Found<>sage<>2020/01/03(金) 06:50:22.61 ID:???.net<> >>48
"俺が想像する"JQ厨にとってのコンポーネントはこれだから
でしょ？
そしてお前は、お前が想像するjQuery厨を叩いてるだけ
お前の中のお前が作り出した架空のjQuery厨と争ってるｗ <>
Name_Not_Found<>sage<>2020/01/03(金) 08:56:28.07 ID:???.net<> >>54
ならこのコードをコンポーネントと呼ぶ奴は
jQuery厨でもないただのアホってことでいいんだよな？
いやー良かった良かった <>
Name_Not_Found<>sage<>2020/01/03(金) 14:20:36.90 ID:???.net<> Web Componentsの話をしてるんだから
（今の文脈では）コンポーネント＝Web Componentsでしょ？
今の文脈ではだからね。
Reactの話をしているときに、コンポーネント＝Web Componentsなわけはない <>
Name_Not_Found<>sage<>2020/01/03(金) 15:22:45.77 ID:???.net<> おもち <>
Name_Not_Found<>sage<>2020/01/03(金) 15:53:59.15 ID:???.net<> >>56
つまり文脈が変わればコンポーネントと呼ぶと？ <>
Name_Not_Found<>sage<>2020/01/03(金) 16:09:50.73 ID:???.net<> そりゃあそうだろう
componentsは何かの固有名詞ではなく
部品って意味の一般名詞だもの <>
Name_Not_Found<>sage<>2020/01/03(金) 16:13:11.16 ID:???.net<> いや全然部品じゃないじゃん <>
Name_Not_Found<>sage<>2020/01/03(金) 17:18:50.68 ID:???.net<> >>60
PHPなどを使ってその部分だけ別ファイルにして
使い回せるようにすれば部品になるでしょ？ <>
Name_Not_Found<>sage<>2020/01/04(土) 08:54:51.63 ID:???.net<> 結局>>42さんの＞だからそんなことはないって
のそんなことってどんなことだったんですか・・？ <>
Name_Not_Found<>sage<>2020/01/04(土) 22:31:49.98 ID:???.net<> https://api.jquery.com/toggle/#toggle-duration-complete
toggle関数の仕様を確認すると、
durationを省略してcompleteのみを指定した場合、completeが実行されるのはdurationのデフォルトである400ms後。
つまり、>41 は設定処理実行前に出力してる。
よって
> $().toggleで使うとキーがappendできないっぽいです
toggle関数の中でFormData#appendの動作が変わる、なんてことは起きてない。 <>
Name_Not_Found<>sage<>2020/01/05(日) 09:49:35.82 ID:???.net<> ようは400ms経つ前にappendされてないformdataを送ってしまうので
post先に反映されないということでは？
つまり>>42の段階で＞そんなことはないって
のニュアンスが違うような
仮にそういう意味ではなく>>63だということは最初からわかってた
ってことなら>>44の結果が出る前に
「toggleの処理より先に$.ajaxやってるから」もしくは「全部toggleの中に書け」みたいな言い当てができているはず
それらを踏まえて＞そんなことはない
のニュアンスは明らかに、>>41通りやってもformdataは送れる
みたいな意味だよなぁ・・ <>
Name_Not_Found<>sage<>2020/01/05(日) 10:12:41.94 ID:???.net<> ＞$().toggleで使うとキーがappendできないっぽいです
の意味は質問者回答者それぞれの視点で
質問者>>41 （ 結果的にappendされていないデータが返ってきた → appendできない、なぜ？ ）
回答者１ （ appendはできていることを知っている → appendできない、と言っているのは間違っている ）
回答者２ （ appendはできていることを知っている → appendできないと思っているのは、処理の順番を質問者が知らないから ）
ざっくりこういう回答者の思考パターンがあると思うけど
回答者１みたいな人だと、そもそもソレがわからないから質問してるんだが？みたいな質問とかなり相性が悪い
もちろん質問者がコードを開示しなかったり質問の難易度にもよるけど <>
きりん<><>2020/01/13(月) 01:45:37.42 ID:O01yZc0t.net<> 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」の要素全ての、フォームの値とチェックボックスのチェックが取り除かれる
スクリプトを作ってみたのですが、フォームはクリアになるのですが、チェックボックスはクリアに
なりません。
チェックボックスをクリアにするにはどうすればいいでしょうか？ <>
きりん<><>2020/01/13(月) 02:45:34.21 ID:O01yZc0t.net<> すいません。自己解決しました。 <>
Name_Not_Found<><>2020/01/14(火) 08:57:13 ID:1IADoVEp.net<> 【環境】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" ) ) ); <>
Name_Not_Found<>sage<>2020/01/14(火) 10:01:01.54 ID:???.net<> >>68
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", xxx.AABBCC );
みたな感じで(3)で{ "aa": 963, "bb": 852, "cc": 741 }を返すゲッター（AABBCC）を放り込み
で、その後は（も）xxxを扱う
というのが普通だと思うけど <>
Name_Not_Found<><>2020/01/14(火) 11:14:50.45 ID:1IADoVEp.net<> >>69
すみません、(4) について教えて下さい。
新しく作った testClass のデータに
以前のセッションで保存していた localStorage データを
復元するように読み込む方法が知りたいです。 <>
Name_Not_Found<>sage<>2020/01/14(火) 14:50:40.46 ID:???.net<> test <>
Name_Not_Found<>sage<>2020/01/14(火) 14:51:30.03 ID:???.net<> >>70
localStorage.setItem('testKey', `data:text/html,<ｓｃｒｉｐｔ>alert('testClass相当のオブジェクトを書き込む');</ｓｃｒｉｐｔ>`);
$(document.body).append(localStorage.getItem("testKey")); <>
Name_Not_Found<><>2020/01/14(火) 18:52:23.05 ID:PQLCVKFf.net<> 一般的にインラインの記述をすると、デバッガーが効かなくなるんでしょうかね <>
Name_Not_Found<>sage<>2020/01/14(火) 23:29:02.33 ID:???.net<> >>70
型とかそもそも…
説明ではnewしてインスタンスが返る
とか普通の言語っぽく言ってっけど
ただのオブジェクトですし
そのtestClassをコピペしてtestClass2作って
new testClass2したら
全く同じもの出来ちゃうよ <>
Name_Not_Found<>sage<>2020/01/15(水) 00:17:26.17 ID:???.net<> RegExp.$1.replace('foo', 'bar')
などとすると、RegExp.$2が機能しなくなるようなんですが
この理由について解説してるサイトがあれば教えて下さい <>
Name_Not_Found<>sage<>2020/01/15(水) 03:14:48.65 ID:???.net<> 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 <>
Name_Not_Found<>sage<>2020/01/15(水) 03:39:33.40 ID:???.net<> それは後方参照の説明をしてるだけで質問の答ではない <>
Name_Not_Found<>sage<>2020/01/15(水) 04:16:57 ID:???.net<> >>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' } <>
Name_Not_Found<>sage<>2020/01/15(水) 05:54:33 ID:???.net<> >>77
・回答には多様性があります。他人の回答を尊重してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです <>
Name_Not_Found<>sage<>2020/01/15(水) 06:19:09 ID:???.net<> つまりそれを利用してわざと的外れな回答をしたわけだな <>
Name_Not_Found<>sage<>2020/01/15(水) 06:28:18.73 ID:???.net<> わざと的外れな回答をしたかどうかは関係ありません
ルールに従いましょう <>
Name_Not_Found<>sage<>2020/01/15(水) 09:27:17.98 ID:???.net<> new FileReaderのreader.readAsTextってめちゃくちゃ読み込み遅くないですか？
フォルダ３０個分（ファイル数１００個くらい）を同時にやってみたら
いつまで経ってもうんともすんともいいません
マシンのスペックに依存しているのはわかるのですがもしかしてそれ以外にも制限あったりしますか <>
Name_Not_Found<>sage<>2020/01/15(水) 12:04:19.53 ID:???.net<> 否定してなくて草 <>
Name_Not_Found<>sage<>2020/01/15(水) 12:17:13.18 ID:???.net<> new FileReaderで読み込んでアップロードし終わったファイルデータ？の
メモリ解放的なことってどうにかできないものか・・
タブ閉じればいいけど、同じタブだとどんどん貯まってく <>
Name_Not_Found<>sage<>2020/01/15(水) 14:08:56 ID:???.net<> >>84
どっかに変数で保持し続けてたりしない？ <>
Name_Not_Found<>sage<>2020/01/15(水) 22:03:57.68 ID:???.net<> chromium edge公開記念日 <>
Name_Not_Found<>sage<>2020/01/15(水) 22:13:43.55 ID:???.net<> >>85
var hoge=formdata;みたいにそのままにしてた
hoge=nullとかにすれば開放されるの？
今度試してみる <>
Name_Not_Found<><>2020/01/16(Thu) 12:45:06 ID://pOUTQK.net<> >>68 です。
みなさん、いろいろご回答ありがとうございます。
説明が下手ですみません。
ゲームのセーブデータのような使い方をしたいと思いました。
ネットを頼りに見様見真似で、保存していた
{ "aa": 963, "bb": 852, "cc": 741 }
を取得できたのはいいけど、この文字列をどうしたら便利に使えるか
（＝元のデータに復元できるか）、がわかりませんでした。
探し方がわるいのか、どの説明も上記の「文字列として取れます」で終わっていて、
その先の解説が欲しいなと…
それとも、文字列を取得できた時点で JSON の役目はおわっていて、
あとは csv 読み込みみたいに自分で切り分けて使うのでしょうか。
みなさんなら、この文字列どうするかんじでしょうか。。。
最悪、JSON使わなくても大丈夫そうな処理なのですが、
せっかくなので使って便利なら試したく思いました。 <>
Name_Not_Found<>sage<>2020/01/16(木) 13:35:55.10 ID:???.net<> const obj = JSON.parse()
const yyy = new testClass(obj.aa, obj.bb, obj.cc)
yyy.aa // 963 <>
Name_Not_Found<>sage<>2020/01/16(Thu) 22:29:56 ID:???.net<> >>88
データ形式によっちゃ使えないけど例だけ満たせればよいなら
const yyy = new testClass(null, null, null);
JSON.parse(json, (key, value) => {
if (key) yyy[key] = value;
});
とかｗ <>
78<>sage<>2020/01/16(Thu) 23:34:41 ID:???.net<> >>78
みたいに、
new testClass( obj )
と、1つの引数のオブジェクト渡しに変えた方が、良さそう
引数を3つも渡すのは、面倒でしょ？ <>
Name_Not_Found<>sage<>2020/01/17(金) 03:55:24 ID:???.net<> 理由は面倒だから？ｗ
new testClass(1, 2, 3)
と書くのが面倒で、
new testClass({a: 1, b: 2, c: 3})
と書くのは面倒じゃないんだ？ｗｗｗ <>
Name_Not_Found<>sage<>2020/01/17(金) 06:25:26.57 ID:???.net<> 頭が悪いね
大ヒント：obj.a <>
Name_Not_Found<><>2020/01/17(金) 06:40:13.58 ID:c4cACoID.net<> テトリスくらい作れないと話になりませんか？ <>
Name_Not_Found<><>2020/01/17(金) 08:13:00.78 ID:gip8AQMU.net<> WebフォームとDBいじるだけならテトリス要らないと思われ
ゲーム作るならテトリスをコピーするのは大事だけど、新しい落ちゲー作るアイデアのが大変 <>
Name_Not_Found<><>2020/01/17(金) 08:21:36.97 ID:c4cACoID.net<> 新しいおちげー作るにしてもテトリスは基本になるかなと
ゲームエンジン使ってるんですけどね <>
Name_Not_Found<><>2020/01/17(金) 15:43:36 ID:s+p7yde/.net<> みなさん本当にありがとうございます。
>>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} になった時点で再利用できないデータなのか。。。
−−−
初歩から出直すべきですかね… （＾＾；；； <>
Name_Not_Found<>sage<>2020/01/17(金) 17:05:22.40 ID:???.net<> 出直すべきだね <>
Name_Not_Found<>sage<>2020/01/17(金) 20:08:42.03 ID:???.net<> 最近不思議に思っていることがあります
各ブラウザがサードパーティクッキーを制限すると発表して騒ぎになっていますが、
別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
サードパーティクッキーを制限すると、どんな問題が本質的に解決するのでしょうか? <>
Name_Not_Found<>sage<>2020/01/17(金) 20:11:14.10 ID:???.net<> 広告主に「たくさん広告表示されました！だからお金ください！」って
請求できるってこと？ <>
Name_Not_Found<>sage<>2020/01/17(金) 20:45:00 ID:???.net<> >>99
> 別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS <>
Name_Not_Found<>sage<>2020/01/17(金) 21:20:12 ID:???.net<> >>101
それは広告主のサーバー側の設定の話なので問題にはならないのでは？ <>
Name_Not_Found<>sage<>2020/01/17(金) 21:25:38 ID:???.net<> >>100
それはCookieでもできますよね？
だから最近は表示ではなくほとんどクリックベースになっているのでは？ <>
78<>sage<>2020/01/18(土) 00:18:02.34 ID:???.net<> >>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' }
次へ続く <>
78<>sage<>2020/01/18(土) 00:18:40.19 ID:???.net<> 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 } <>
78<>sage<>2020/01/18(土) 01:02:28 ID:???.net<> >>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' } <>
78<>sage<>2020/01/18(土) 03:41:24 ID:???.net<> >>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' } <>
Name_Not_Found<>sage<>2020/01/18(土) 07:13:59.10 ID:???.net<> 元々がオブジェクトならそのまま渡せた方が便利だが
他の呼び方もされるならその限りではない <>
Name_Not_Found<><>2020/01/18(土) 11:07:03.62 ID:GuxRgmIP.net<> javascriptでゲーム作ってる人はすくにゃいですか？ <>
Name_Not_Found<>sage<>2020/01/18(土) 12:23:16.51 ID:???.net<> >>104
ああああああああああああああああああ
できちゃあああああああああああああああああ！！
やったーーーーー！！！！ んほおおおおおお！！
ありがとうございます、そのままコピペでコメント付きソースになるの大感謝です！
いったん頂いたソースで動きを確認して、自分の使いたい方のソースに一行ずつ置き換えたら、
『オブジェクトごとstringifyでローカルストレージへ保存、
ローカルストレージからparseでオブジェクトに復元』
の流れができました！
引数の入れ替わりの考慮や、プロパティ名のところなど、細かい解説もたすかりました！
あったけぇ…（；；） ありがとうございます…！
>>78で既にほぼ正解近くの回答もらってたんですね、他の方もありがとうございました。 <>
Name_Not_Found<>sage<>2020/01/18(土) 13:00:40.61 ID:???.net<> ぶっちゃけると2020年からは
オブジェクトを保存したいのならKVS推奨なんだけどね <>
Name_Not_Found<>sage<>2020/01/18(土) 13:07:32.53 ID:???.net<> 何と比較してどういう理由でKVS推奨と言っているのか気になる <>
Name_Not_Found<>sage<>2020/01/18(土) 13:17:03.43 ID:???.net<> 24時間営業だから <>
Name_Not_Found<>sage<>2020/01/18(土) 13:43:53.19 ID:???.net<> CVS? <>
Name_Not_Found<>sage<>2020/01/18(土) 18:19:36.97 ID:???.net<> SVGやその中のpathの幅や高さは実際の見た目ではなく余白のあるキャンバスのサイズになりますが、実際に表示されている線の幅・高さを取得する方法ってありますか？
JSで頑張って取得するより、余白なしのSVGを用意した方が手っ取り早いかな… <>
Name_Not_Found<>sage<>2020/01/18(土) 21:05:17.42 ID:???.net<> 昨今のデバイスはD2Pでないので実際の見た目は検則できない <>
Name_Not_Found<>sage<>2020/01/19(日) 11:18:27 ID:???.net<> >>115
https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth
https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle <>
Name_Not_Found<>sage<>2020/01/19(日) 13:31:00.35 ID:???.net<> 計算上の内部の値で必ずしもSVG要素の見た目が判別できるわけではない <>
Name_Not_Found<>sage<>2020/01/19(日) 15:14:44.62 ID:???.net<> 「SVG要素のサイズ」なら、既出の方法で良いかと <>
Name_Not_Found<>sage<>2020/01/19(日) 19:00:35.69 ID:???.net<> そういえば数年前くらいにjavascriptを埋め込める？もしくは
読み込んだ画像データをjavascriptで操作できるみたいなコンセプトの画像フォーマットがあったと思うのですが結局あれはどうなったんですか <>
Name_Not_Found<>sage<>2020/01/19(日) 20:47:57 ID:???.net<> 初歩的な質問なんだけど
githubで公開されてるライブラリって基本的にどのフォルダをダウンロードすればいいの？ <>
Name_Not_Found<>sage<>2020/01/19(日) 23:49:24.78 ID:???.net<> GitHub と、ローカルPC 双方の、プロジェクトルートをシンクロさせるのじゃないの？ <>
Name_Not_Found<>sage<>2020/01/19(日) 23:50:00.25 ID:???.net<> 全部
git cloneしろ <>
Name_Not_Found<>sage<>2020/01/20(月) 00:21:35.31 ID:???.net<> 車ってどうやって操作したらいいの？みたいな質問やな <>
Name_Not_Found<>sage<>2020/01/20(月) 08:14:59.85 ID:???.net<> 初歩を押さえない初心者しかいない件 <>
Name_Not_Found<>sage<>2020/01/20(月) 08:29:24.95 ID:???.net<> 聞き方が悪かったわ
srcとかdistとかdocsとかあるけどどれ使えばいいの？ <>
Name_Not_Found<><>2020/01/20(月) 13:59:53 ID:Yq2mEYPn.net<> >>126
すれ違いだからググってほしいところだけど
とりあえずdistの中で <>
Name_Not_Found<><>2020/01/20(月) 16:29:37.72 ID:Lw8sfmye.net<> pdfの特定のページにテキストフォームを作成する方法ってありますか？？
普通にやっても1ページ目にしかできない… <>
Name_Not_Found<><>2020/01/20(月) 18:54:12.69 ID:OuXSc3i7.net<> 128ですが、自己解決しました。スレ汚しすみません <>
Name_Not_Found<><>2020/01/21(火) 07:54:06.48 ID:RMnuU/zx.net<> chrome のデベロッパーツールのコンソールログのところで、
右クリックすると hide messages from XXXXX って出ると思うんですが、
間違ってこれを押したからか、エラーが表示されなくなってしまいました。
hide しちゃったのは、どうやったら再表示できるんでしょうか。 <>
Name_Not_Found<>sage<>2020/01/21(火) 08:17:16.80 ID:???.net<> 解決しました、失礼しました <>
Name_Not_Found<>sage<>2020/01/21(火) 22:22:18.84 ID:???.net<> document.writeで書いたhtmlのスタイルシートが完全に効かない <>
Name_Not_Found<><>2020/01/21(火) 22:31:14.79 ID:6qHPAlz+.net<> >>132
なにか間違ってんじゃないかなー
https://jsfiddle.net/8Lor3qz5/ <>
Name_Not_Found<>sage<>2020/01/21(火) 23:30:42.80 ID:???.net<> >>133
ありがと
出先だから後で見るね
body内からdocument.writeしていたのを
header内に移動しただけだから
動きは保証されてるはずなのにぃ <>
Name_Not_Found<>sage<>2020/01/22(水) 12:49:36.64 ID:???.net<> >>133
132だけど、このツールしらなかった、ありがと
とはいえ、ちょっと複雑なscriptにしちゃってるから、
すんなり見ることはできなさそう。。。
bodyに移動したらやっぱり普通に見れたから、
document.writeの仕様的な何かなんかな <>
Name_Not_Found<><>2020/01/22(水) 12:58:14.02 ID:rrQ3wlRN.net<> >>135
関係ないと思う
ふつうにセレクタ間違ってるだけかと <>
Name_Not_Found<><>2020/01/22(水) 16:13:49 ID:N+cpHnLv.net<> >>135
document.writeが完了したら
適用されてないスタイルのセレクタをコピーし
ブラウザの開発ツールを開き、consoleタブを選択して
document.querySelector('コピったセレクタをペースト');
と打ってenterして要素が返ってこない、もしくは
開発ツールのelementsタブを選択して、⌘+Fして検索窓を開き
コピったセレクタをペーストして
要素が選択されない場合は
セレクタが間違っているよ <>
Name_Not_Found<><>2020/01/22(水) 19:47:16.78 ID:SRoKId4J.net<> pdfフォームのテキストフィールドのフォーマットを数値にする方法を教えてください
AFNumber_Format使ってもカスタムにしかならないから送付先がタブレットとかだと動かないんです <>
Name_Not_Found<>sage<>2020/01/22(水) 19:49:19.06 ID:???.net<> ビューワ側の問題なんじゃない？それ <>
Name_Not_Found<>sage<>2020/01/23(木) 00:15:03.22 ID:???.net<> >>134-135
>body内からdocument.writeしていたのを、header内に移動しただけだから、動きは保証されてるはず
これは、全く保証されていない！
だって、body は、header 後に出力されるから、headerの内容は消されないのでは？
一方、header内でやると、その後のheader内の処理はされないとか、
bodyを作った後に回されて反映されないとか、動作が保証できないだろ？ <>
Name_Not_Found<>sage<>2020/01/23(木) 05:23:49.27 ID:???.net<> みんなありがとーだよー
>>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の実行順はログで確認済み <>
Name_Not_Found<>sage<>2020/01/23(Thu) 08:46:59 ID:???.net<> あれ、ひょっとしてbodyの上書きってより
html全体の上書きになってるのかな？
帰ったら調べるべ <>
Name_Not_Found<>sage<>2020/01/23(Thu) 10:52:45 ID:???.net<> >>132です、解決したー ↑がビンゴでやんした
header内のdocument.writeをやったことで、
それまでに読み込んでいた各種cssやjavascript等全て消え去って、
まっさらな状態で<body>からの記述だけになってたー
開発ツール上でいわれた通りソース見て確認した！
ヒントくれた人、開発ツールの使い方教えてくれた人、
サンクスぅぅぅ <>
Name_Not_Found<>sage<>2020/01/23(木) 12:25:35.87 ID:???.net<> document.writeはFPにも設定があるように相当に非推奨 <>
Name_Not_Found<>sage<>2020/01/23(木) 14:51:20.51 ID:???.net<> document.writeで要素を書いて
CSSやJSファイル読み込むのはだいぶ前にできなくなったんじゃないか
以前それやってて、動かなくなるってChromeの中の人が言いだしたんで
いろいろ改修した覚えがある <>
Name_Not_Found<>sage<>2020/01/23(木) 21:35:11.28 ID:???.net<> >>144-145
ファイル名？時間 で取得して
キャッシュ使わないようにしてるんだけどダメ？
キャッシュ対策その後なんか出たっけ
ページ読むたび、絶対最新取得するオプションとか <>
Name_Not_Found<><>2020/01/23(木) 21:46:05.19 ID:ZoMVOw6M.net<> >>146
キャッシュと何の関係が <>
Name_Not_Found<>sage<>2020/01/24(金) 00:16:44.89 ID:???.net<> document.write を使わない方がよい
あらかじめ、container, main, app などのid を作っておいて、そこにDOM を追加すればよい。
<div id="container"></div>
それか、Ruby on Rails などのフレームワークでは、
各部品は各部品用のテンプレートファイルに書いておいて、
それらをメインのapplication.html に読み込んで、全体像を作る <>
Name_Not_Found<>sage<>2020/01/24(金) 02:04:43 ID:???.net<> >>148
なるほど、そっちでやるのか
ちなみに、どの画面でも表示するルートメニューみたいなの、変更あった時いちいち全htmlを修正するの面倒だからjsに逃してdocument.writeで共通化してるけど、それもダメなんけ？
htmlって外部データのインポートあったっけ <>
Name_Not_Found<>sage<>2020/01/24(金) 03:44:22 ID:???.net<> https://developers.google.com/web/updates/2016/08/removing-document-write?hl=ja
https://developers.google.com/web/tools/lighthouse/audits/document-write?hl=ja
↑Googleはdocument.write()を使うなってさ。
単純に全ページ共通で読み込まれるブロックを1つ作ればいいんじゃない
フレームワーク未使用で静的ページだからそれが面倒ってならもNuxt.jsだのGatsby.jsだのに移植したほうが今後の改修に耐えられるような。 <>
Name_Not_Found<>sage<>2020/01/24(金) 05:02:45 ID:???.net<> >>150
>単純に全ページ共通で読み込まれるブロックを1つ作ればいいんじゃない
ううぅ… そんな事できんの…？
出来るならもちろんそうしたい
ひんとか検索キーワードだけでもプリプリプリーズ💩 <>
Name_Not_Found<>sage<>2020/01/24(金) 06:38:37 ID:???.net<> jQueryの.loadで共通のhtml1個作って読み込んでくれば？
ただ、そういう面倒な部分を共通化しいてきたいのなら、
PHPだのjsのフレームワーク使ってやったほうが生産性大分上がると思うよ。
毎回DOMいじってどうこうしてたら面倒でしょうがないと思う。 <>
148<>sage<>2020/01/24(金) 06:43:49 ID:???.net<> SASS なんかも、Partial
application.scss
_reset.scss
_variables.scss
この3つのファイルがあって、application.scss 内に、
@import "reset";
@import "variables";
で読み込める！
どのフレームワークでも、Partial <>
Name_Not_Found<>sage<>2020/01/24(金) 06:57:51 ID:???.net<> >>151
template要素を使うとか、createElementとか <>
148<>sage<>2020/01/24(金) 07:03:26 ID:???.net<> 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 なども同じ <>
148<>sage<>2020/01/24(金) 07:11:51 ID:???.net<> フレームワークを使わない場合の、Partial は、
Document.createDocumentFragment( ) とかかな？
例えば、メモリー内で、header, footer 用のDOM 木を構築しておいて、
<div id="container"> に読み込むとか？ <>
148<>sage<>2020/01/24(金) 07:36:43.52 ID:???.net<> lodash にも、template がある！
https://lodash.com/docs/4.17.15#template <>
148<>sage<>2020/01/24(金) 07:50:29.01 ID:???.net<> lodash の、template
<% 〜 %> 内に、JavaScript のコードを書いて、それを文字列へ変換する
<% 式 %> 値を埋め込まない
<%= 式 %> 値を埋め込む
<%- 式 %> HTML エスケープする
var compiled = _.template(
'<% _.forEach(users, function(user) { %>
<li><%- user %></li>
<% }); %>'
);
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>' <>
Name_Not_Found<>sage<>2020/01/24(金) 13:37:57.31 ID:???.net<> >>152
jQueryはじめてつかったけど、できちゃああ！ ありがとうー
でも、jQueryって将来性大丈夫なのかな。。。(´ρ`)
あ、公式のjs落としておけば、js生きてる限り平気なのか（中身ｊｓだから？）
>>153-158
いろいろありがと、SASS自体しらなかった、CSSまとめるの楽になりそうー
久しぶりに触ってるので、新しい情報いっぱいで感謝。
templateも見てみるけど、Rubyはちとなじみ無いかも(むつかしそう…)
>>144-145
document.writeメッチャつかってたから、非推奨情報たすかった！
💩 < さんくぷー！ <>
Name_Not_Found<>sage<>2020/01/24(金) 21:02:29.32 ID:???.net<> DOMを知らないコピペプログラマ増えたなー <>
Name_Not_Found<>sage<>2020/01/24(金) 21:15:23.30 ID:???.net<> 10年前に比べたらむしろ激減してるよ <>
Name_Not_Found<>sega<>2020/01/24(金) 21:26:42.09 ID:???.net<> 結局、オブジェクトのディープコピーの定番はなんなん？ <>
Name_Not_Found<>sage<>2020/01/24(金) 21:43:09.91 ID:???.net<> >>162
自分はlodashのcloneDeepに頼るか
むかし作ってメンテし続けてる自前関数でやってる <>
Name_Not_Found<><>2020/01/24(金) 21:44:37.64 ID:a4Ae8CKG.net<> >>161
10〜15年くらい前が
いちばんどむどむ言ってた気もする
けっこういろいろ自前でやらにゃならんかった頃だし <>
Name_Not_Found<>sage<>2020/01/24(金) 21:52:54.11 ID:???.net<> >>163
lodashか・・・試してみるか・・・
jQuery信者なので$.extend使ってるんだけど
未だにjQueryはJKにも笑われちゃうよな・・・ <>
Name_Not_Found<>sage<>2020/01/24(金) 22:56:37 ID:???.net<> >>165
そうでもない気もする
俺の身の回り限定だけど
jQ以降の世代は、今のESになって盛んに脱jQを叫んでいるけど
jQ以前の世代は、便利なものもあるんだけどなーと思ってる <>
Name_Not_Found<>sage<>2020/01/24(金) 23:06:09 ID:???.net<> DOM1箇所いじるだけならjQueryで十分いいし使えるんだけど、
それ以上の用途だと逆に面倒でとても使ってられんからなぁ。
前に、クライアント側にもフォームのバリデーション追加してくれって話しになって
一度決まったものを作るだけならよかったものの、そっから改修で弄り始めた途端に一瞬でカオス状態になったよ。 <>
Name_Not_Found<>sage<>2020/01/24(金) 23:51:18.85 ID:???.net<> >>162
型情報が失われるなど、あまり良くないやり方では、
JavaScript(JS)オブジェクト/JSON 文字列の変換により、新しいオブジェクトを構築するとか
JS Object → JSON 文字列 → JS Object(新しいオブジェクト)
Haxe のSerializer では、型情報を維持したまま、
異なる言語間でも、文字列で通信できるけど
ただし、抽象クラスには対応していない <>
Name_Not_Found<>sage<>2020/01/25(土) 00:22:59.79 ID:???.net<> >>168
それって
例えばプロパティの値が日付オブジェクトだった場合
メソッドはどうなってしまうん？ <>
168<>sage<>2020/01/25(土) 00:55:31 ID:???.net<> JSON では型情報が無くなるから、メソッドを呼んだりできないでしょ？
単純なデータを入れるだけの使い方をして、
型情報などは、別の文書に書いておく
この文書を管理する手間が掛かるから、面倒！
だから各言語には、通信先のホストで、オブジェクトを再構築できる、Serializer がある
各言語のオブジェクト → 文字列で通信 → オブジェクトを再構築 <>
Name_Not_Found<>sage<>2020/01/25(土) 12:23:44 ID:???.net<> >>168
json経由すんのってなんか遠回りでやだよね
結局定番らしい定番は無いってことやんね
その都度適当な方法でコピるしかないのか <>
Name_Not_Found<>sage<>2020/01/25(土) 12:39:30 ID:???.net<> コピペプログラマは永遠になくならないな <>
Name_Not_Found<>sage<>2020/01/25(土) 12:58:13 ID:???.net<> コピペプログラマが有識者にネタを求めて質問するのが、ここの日常だから <>
Name_Not_Found<>sage<>2020/01/25(土) 13:16:09 ID:???.net<> >>164
だからこそ内容の全くわかってないコピペで動かない厨が多かった <>
Name_Not_Found<>sage<>2020/01/25(土) 13:18:25 ID:???.net<> >>162
非同期で良いならMessageChannelを使うのが良い
もしくは標準で議論が進んでるからそれに近いポリフィルを作って使うかの２択 <>
Name_Not_Found<>sage<>2020/01/25(土) 13:31:23 ID:???.net<> >>172
そのコピーすらロクにできないんだよJavaScriptは！ <>
Name_Not_Found<>sage<>2020/01/25(土) 14:08:03 ID:???.net<> JSのオブジェクトはJSからは参照ができない内部スロットがあるのでコピーは難しい
うかつに完全なクローンが作れたらセキュリティにも影響するかもしれないし <>
Name_Not_Found<>sage<>2020/01/25(土) 14:57:36.80 ID:???.net<> というかコピーはどの言語でも難しい問題だよ
そもそも関数を値としてみるかどうかだからな
値として見るならコピーした時、それは複製されていなければいけない
だけど大体の言語は値としてみなしてないだろう？
例えばアプリの特定のバージョンでオブジェクトをコピーというか
データとしてファイルにシリアライズする。
そしてアプリのバグを修正したバージョンで、データを読み取る
そうすると、その保存したデータに含まれる関数は
バグ修正の前のものであるべきかどうか
という話をすれば、コピーしたときに関数の情報はデータとして
含まれるべきかどうかという問題が難しいってわかるだろ？ <>
Name_Not_Found<>sage<>2020/01/25(土) 15:21:41.89 ID:???.net<> 保存がしたい場合は別だけど、最初から複写されることがわかっている場合は
操作対象は元のオブジェクトに必ずプロキシを噛ませて使うことにしたら良い
値に変更が及んだ場合のみそのプロパティは以後そのプロキシでキャッシュされる
そうすればメソッドのコピーを考えなくても良い <>
Name_Not_Found<>sage<>2020/01/26(日) 22:41:01.29 ID:???.net<> Windows10でGoogle Chromeを使っています。
https://blog.capilano-fw.com/?p=4063
上記の画像認識のリンクの中で
「特定の顔が誰なのかを判別する」
という項目がありますがそのプログラムの中で
const detection = await faceapi.detectSingleFace(image)
.withFaceLandmarks()
.withFaceDescriptor();
の内容をconsole.logで出力してみるとundefindedになります。
どなたかこのプログラムを試した方いらっしゃらないでしょうか。
ちなみにhttpsをアパッチで立ち上げていて、オレオレ証明を使っています。 <>
Name_Not_Found<>sage<>2020/01/27(月) 13:57:36 ID:???.net<> 正確には顔認識じゃなくて、簡単な絵の画像認識をしてみたいのですが
いい方法がないでしょうか。 <>
Name_Not_Found<>sage<>2020/01/27(月) 19:00:54.23 ID:???.net<> Three.jsでレンダリングされたcanvasが、
ダウンロードバーの出現のせいで大きさが変わって困ってます。
ダウンロードの開始・終了は検知できるので
その間だけ自動サイズ調整を無効にするにはどうすればよいですか。 <>
Name_Not_Found<>sage<>2020/01/27(月) 19:14:08.89 ID:???.net<> >>182
スクロールバーを消せばよいのでは <>
Name_Not_Found<>sage<>2020/01/27(月) 19:22:10.17 ID:???.net<> vanilla jsは文法は覚えたくらいのレベルの次となる、上のステップに行くには何をするのが学習する上で有効ですか？
おすすめの課題などがあれば紹介していただけると嬉しいです <>
Name_Not_Found<>sage<>2020/01/27(月) 19:38:40.29 ID:???.net<> >>184
文法はバニラでなくても必要
ES2019を学べ <>
Name_Not_Found<>sage<>2020/01/27(月) 22:28:57.55 ID:???.net<> 180です。
ごめんなさい、絵の顔を認証させようとしてしていましたが
実写の写真じゃないとダメでした。 <>
Name_Not_Found<>sage<>2020/01/28(火) 02:47:15 ID:???.net<> >>185
既に文法をずっと学んでいて質問しました。
実践的なもので役立つ課題みたいなのってありますか？ <>
Name_Not_Found<>sage<>2020/01/28(火) 07:59:45.25 ID:???.net<> >>187
「ES2019の文法だけ」を覚えても仕方がない
文法以外も学習が必須 <>
Name_Not_Found<>sage<>2020/01/28(火) 08:17:42.81 ID:???.net<> >>187
ES2019 !== 文法 <>
Name_Not_Found<>sage<>2020/01/28(火) 15:37:17.53 ID:???.net<> >>187
JSわかってるなら問題ないよ
ドキュメントとリファレンスとサンプル見れば
あーなるほどねーって使える
それがライブラリやフレームワークってもんよ <>
Name_Not_Found<>sage<>2020/01/28(火) 19:26:48 ID:???.net<> まあ、文法だけ覚えてるなら、課題やる前に覚えることはあるだろうね
制御構文とか、オブジェクトとか、プロトタイプとか、いくらでもある <>
Name_Not_Found<>sage<>2020/01/28(火) 23:03:05.08 ID:???.net<> エクセルにjsが採用されてますます需要が高まるな <>
Name_Not_Found<>sage<>2020/01/29(水) 15:12:08.24 ID:???.net<> 実際jsコーディングする時って何を作るのが実践でも役立つ？
題材でよかったもんとかある？ <>
Name_Not_Found<>sage<>2020/01/29(水) 16:37:35.51 ID:???.net<> >>193
ES6以降のPolyfill
SelectorsvAPIのPolyfill <>
Name_Not_Found<>sage<>2020/01/29(水) 18:12:21.86 ID:???.net<> >>193
markdownからDOMノードへの変換気 <>
Name_Not_Found<>sage<>2020/01/29(水) 18:24:25.27 ID:???.net<> とりあえずhtmlなり何かしらweb系を絡ませないと
js使う意味なくなってpythonとかでよくねになる気がする <>
Name_Not_Found<>sage<>2020/01/29(水) 19:35:19.84 ID:???.net<> >>187が安易な答えを求めて、>>193の質問をしただけ
題材だけ揃えてもあかん <>
Name_Not_Found<>sage<>2020/01/29(水) 20:39:39 ID:???.net<> ｊｓのさらに真価が発揮されるのは５G、６Gでのweb4.0時代 <>
Name_Not_Found<>sage<>2020/01/29(水) 22:12:00.74 ID:???.net<> JSの真価は言語的に仕様が小さくて拡張性があったことだが
ES6から10までの間に半分以上の可能性を消費していて
今が一番真価が発揮されている壮年期
かといって別の言語なら2030年代に革命を起こせるかというとそうではない
そろそろ既存の言語の進化系ではなく、
非同期の大量のタスクを圧倒的自然で素敵に捌ける
新しい仕組みを持った言語が必要ということ <>
Name_Not_Found<>sage<>2020/01/29(水) 22:32:59 ID:???.net<> async,awaitって使う頻度低くないですか・・？ <>
Name_Not_Found<>sage<>2020/01/29(水) 22:39:06 ID:???.net<> 俺が書いたあるプログラムは全体の行の50%にawaitが付いていた。 <>
Name_Not_Found<>sage<>2020/01/29(水) 23:05:37 ID:???.net<> キュー=[await処理１,await処理２,await処理３,,,,,,];
みたいな感じでawait処理が全部終わったら、また同じ順番で再帰しつつ失敗したawait処理はスルーしたいとき
結局、await処理それぞれの”完了・成功したか否か”を保持しないといけないので、async/await使わずに
async/awaitっぽく実装した処理にまとめ書いた方が短く書ける、ような気がした <>
Name_Not_Found<>sage<>2020/01/30(Thu) 06:46:43 ID:???.net<> >>201
function foo() {
async なんたら
if なんたら
async なんたら
for なんたら
async なんたら
return
}
こんな感じ？ <>
Name_Not_Found<>sage<>2020/01/30(Thu) 07:11:05 ID:???.net<> >>200
逐次処理版Promise.allを定義しておけば、使う機会はほぼない <>
Name_Not_Found<>sage<>2020/01/30(木) 08:26:29.10 ID:???.net<> >>203
awaitだけどまぁそんな感じ。
同期関数のコールツリーの深いところでasyncしかない関数を呼び出す必要が出てきた時
変更が大変になるから、最初からなるべくasync関数にするようにしたらそうなった。 <>
Name_Not_Found<>sage<>2020/01/30(木) 10:59:04.00 ID:???.net<> 手続き型思考の人はawaitを多用するのだろう <>
Name_Not_Found<>sage<>2020/01/30(木) 13:06:27.81 ID:???.net<> 使う頻度なんて気にしても仕方ないと思う
一般解なんてないし、自分の好きにやればいい <>
Name_Not_Found<>sage<>2020/01/30(木) 13:43:36.95 ID:???.net<> ところでasyncとawaitの読みって
えいしんく、あうぇいと、でいいんでしょうか？ <>
Name_Not_Found<>sage<>2020/01/30(木) 14:43:00.27 ID:???.net<> >>208
アシンクです <>
Name_Not_Found<>sage<>2020/01/30(木) 14:48:39.16 ID:???.net<> >>208
あわいと <>
Name_Not_Found<>sage<>2020/01/30(木) 14:51:04.12 ID:???.net<> 投げっぱなし質問ばかりなのは、やる気がないからでしょうか？ <>
Name_Not_Found<>sage<>2020/01/30(木) 16:57:10.80 ID:???.net<> イベント発生順序について質問です
【環境】 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共通ですか？それとも環境固有でしょうか <>
Name_Not_Found <>sage<>2020/01/30(木) 17:04:54.29 ID:???0.net<> 訂正します。期待する発生順はfunc1,4,2,3 (capture,bubbleの順)です <>
Name_Not_Found<>sage<>2020/01/30(Thu) 18:28:39 ID:???.net<> そりゃイベント付加した要素、ターゲットがひとつ？だから普通に登録順にイベント発生しただけじゃない？
> addEventListener("click", func1, true)
>
の順番を入れ替えて登録したらその順番で発生しそう <>
Name_Not_Found<>sage<>2020/01/30(Thu) 18:46:44 ID:???.net<> >>212
https://triple-underscore.github.io/uievents-ja.html#event-flow に書いてある <>
213 <>sage<>2020/01/30(木) 20:09:40.17 ID:???0.net<> >>214-215
ターゲットフェーズの存在を知りませんでした
分かりやすいページを教えていただきありがとうございます
>213は解決しました <>
Name_Not_Found<>sage<>2020/01/30(木) 21:02:31.02 ID:???.net<> addEventListenerの第３引数にはオブジェクトを渡しましょう <>
Name_Not_Found<>sage<>2020/01/30(木) 22:51:04.86 ID:???.net<> >>206
じゃあ手続き型思考じゃない人はどうしてるの？
- await使わずPromise.then()を使う
- Promise自体使わない <>
Name_Not_Found<>sage<>2020/01/31(金) 06:20:55.57 ID:???.net<> awaitは使うけれど、Promise.allを使ったり、より順不同でパラレルに動くようにしようということだろう
上の話のように完全に順序を守ってawaitしていってるだけなら <>
Name_Not_Found<>sage<>2020/01/31(金) 09:37:54.08 ID:???.net<> なんか会社でJS勉強しろって言われてる者なんですけど、効率良い勉強方法ありますか？
GSUITE入れるからやらないといけないみたいです <>
Name_Not_Found<>sage<>2020/01/31(金) 12:51:50.92 ID:???.net<> >>218
どちらもある
そもそも、ケースバイケースで使い分けるから一つの方法に固定しない
「たった一つの冴えたやり方」を探す人がいるが、選択肢を減らすのは悪手だと思う <>
Name_Not_Found<><>2020/01/31(金) 12:53:52.60 ID:KgBKRxWM.net<> >>220
勉強のスケジュールをきつめに立てて
週一で進捗をチェックして、遅れたら爪を一枚剥がそう
1週目は怠けてしまうかもしれないけど
2週目からは痛みと恐怖が嫌でも勉強させてくれるよ <>
Name_Not_Found<>sage<>2020/01/31(金) 22:28:08.79 ID:???.net<> await使うかthen使うかなんて手段の話で、思考の違いが表れるほどのものとは思えんけどな。 <>
Name_Not_Found<>sage<>2020/01/31(金) 23:17:30.67 ID:???.net<> 【環境】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の変数にて保持しておき、これを定期的に読み込み、何時更新されたという
情報に差異が出たらリロードすればかなりマシなのでは？
以上ですが、そもそもこれで可能かどうかすら分からない次第なので、この方向でいいのか
悪いのかをご指南いただければと思いました
上記の考えで基本的に可能だとしても改善したい点が単純に全て解決できるとは思っていませんが、
改善したい点の一つ目だけでも改善できればと思っています
よろしくお願いします <>
Name_Not_Found<>sage<>2020/01/31(金) 23:20:45.72 ID:???.net<> >>220
言語は勉強するものではない
使われてるのを見聞きして使って感覚に慣れるものだ
赤ちゃんが音節を発するように、何事もまずコピペ
人間の脳の仕組みの大原則として、自分が行えない物事を理解することはできない
理解できるから行動ができるのではなくて、行動ができるから理解ができるのだと言う科学的事実は知っておくと良い
まずは意味がわからなくてもそっくり真似をしてどんな要素があるかを感覚で掴むことが大事
それが苦になるようなら向いていないということ
真似をして書いて動いているのをみてから、徐々にその仕組みを覚えていく
そういうイメージでやると良い <>
Name_Not_Found<>sage<>2020/01/31(金) 23:30:26.86 ID:???.net<> >>224
サーバーから通知を送ってもらいたいということで、WebSocketを使うのが賢い
どうしてもHTTPでやりたければ、なんども通信し直すのは変わらないのだけれど、
通信をできるだけ切らずに維持してサーバーからの返答を長く待つという古来からの方法があり、
それを扱いやすくしたSSE(EventSource)APIがあることにはあるが、
それは今どき川に洗濯に行くようなもので、導入コストは少々かかったとしても
素直に洗濯機を買ってWebSocketを使うことを強く進める <>
Name_Not_Found<>sage<>2020/02/01(土) 00:29:11.61 ID:???.net<> >>226
レスありがとうございます
仰るとおり、サーバーからの通知が最善のはずだと、WEB PUSH など用語すら
分かってない状況でググり倒し、情報が多すぎで判断付かずここに駆け込んできました
ソケット通信はC/C++でもやってますので何とかなりそうな気はしましたが、
サーバー側をどうすればいいのか中々分かりませんでした
PHPでもいいのかな？できるかも？という程度の情報には今たどり着きましたが、、
質問で書き忘れていましたが使用しているサーバーはXserverでして、
このサーバーだとちょっと難しいような（ポートの問題がある？）情報を
見つけてWebSocketを躊躇しているところです
SSEだとサーバーを問わないのかな？（分かりませんが）
WebSocketやnode.jsは、ググり倒している間に訳分からないまでも見かけては
いましたが、SSEは初見でした
これなら最悪、やりたいことはできそうなのが幸いです
情報ありがとうございます <>
Name_Not_Found<>sage<>2020/02/01(土) 00:45:38.05 ID:???.net<> >>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 を使った動画 <>
Name_Not_Found<>sage<>2020/02/01(土) 01:15:10.40 ID:???.net<> >>224
https://dev.classmethod.jp/cloud/aws/aws-iot-browser-refresh/
AWS S3にアップロードされたものをLambdaで探知してブラウザリロードすれば？ <>
Name_Not_Found<>sage<>2020/02/01(土) 14:45:21.22 ID:???.net<> >>223
設計思想 <>
Name_Not_Found<>sage<>2020/02/03(月) 02:11:47 ID:???.net<> 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の箇所?)がどうのでてきて不安になり質問しました。 <>
Name_Not_Found<>sage<>2020/02/03(月) 05:10:20.27 ID:???.net<> 賛否両論と知ってるくせにとくに問題ないですか？と聞ける精神が問題だ
ここはお前の漠然とした不安をケアする場所ではない
自分の行動くらい自分で責任を持って決めろ <>
Name_Not_Found<>sage<>2020/02/03(月) 08:27:46 ID:???.net<> >>200や>>220もそうだが、複数の選択肢がある時、彼らは唯一解しか満足しない
「一概にはいえない」や「前提条件次第」という考えは彼らの頭にはない
一つの解にして、他を考えるのを止めるのが目的だから、考える過程が増えるのは彼らにとっては本末転倒なのだ <>
Name_Not_Found<>sage<>2020/02/03(月) 12:41:20 ID:???.net<> というか適当に質問してるということが丸わかり
自分で難しい質問をして難しい答えが帰ってきても反応しないんだもの
実際困ってもいないくせに人の反応を見るために質問したりするイカレポンタンは害悪でしかない <>
Name_Not_Found<>sage<>2020/02/03(月) 13:02:51 ID:???.net<> なんで問題ないかわからないんだろお前等
答えられないんだろ？ <>
Name_Not_Found<>sage<>2020/02/03(月) 13:35:16 ID:???.net<> >>234
正解 <>
Name_Not_Found<>sage<>2020/02/03(月) 14:15:28 ID:???.net<> >>231
そもそもお前(ら)が何を問題とするかだ
コーディング規約でswitch(true)禁止等があるチーム開発でそれを無視して使用している、等なら無視している時点で問題になるだろうが、こんな個人のメモ書き程度のFizzBuzzで何を使おうが問題にならんと思うが。
switch(true)自体の機能に疑問があるという話なら、まずは関数化していろいろな入力を試すなどしてデバッグし、それでも疑問が残ったり問題が顕在化したら他者に協力を仰げ。
賛否両論がどうの、程度ではなく自分でもっとしっかり読んで理解しろ。
なんの記事を読んんだのかは知らんが、それすら理解していないお前が、このスレの人間に「問題無い」と断言されたとしてただ鵜呑みにするのか？
賛否両論であるということを認識した上で、それでもなお利用するのなら、なぜそれを利用する必要があったのか説明できるようにしろ。 <>
Name_Not_Found<>sage<>2020/02/03(月) 22:29:21.31 ID:???.net<> >>235
何が問題かを決めるのは他人ではない
俺たちはお前のオカンやオトンではない <>
Name_Not_Found<>sage<>2020/02/04(火) 00:39:36 ID:???.net<> 屁理屈ばかりで理由の一つも論理的に言い返してる人いないやんw <>
Name_Not_Found<>sage<>2020/02/04(火) 01:29:20.77 ID:???.net<> どいつもこいつもどこから突っ込んでいいのやらｗ <>
Name_Not_Found<>sage<>2020/02/04(火) 04:04:27 ID:???.net<> >>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;
} <>
241<>sage<>2020/02/04(火) 04:14:10 ID:???.net<> 普通の感覚では、式に、i % 3 なんだが、
i % 5 の場合もあるから、うまく作れないw
switch ( i % 3 ) {
case 0: // 割り切れる
break;
default: // 割り切れない
break;
}
switch を使えば、
>>231
みたいな書き方になってしまうw <>
Name_Not_Found<>sage<>2020/02/04(火) 05:40:29 ID:???.net<> 今度はswitch(true)知らないやつが語りだしたかｗ <>
Name_Not_Found<>sage<>2020/02/04(火) 08:03:18 ID:???.net<> switch(true)ってバッドノウハウ感があるよなｗ <>
Name_Not_Found<>sage<>2020/02/04(火) 08:16:01 ID:???.net<> 「知らないんだろ？」と煽っても無駄です、のテンプレを復活させてもいい気がしてきた
煽って回答を集める乞食が多すぎる <>
Name_Not_Found<>sage<>2020/02/04(火) 09:04:27 ID:???.net<> >>244
あれは使わせたくないので使わせないようにしてる
あんなん使わせるならelse ifの羅列の方がずっとマシ <>
Name_Not_Found<><>2020/02/04(火) 18:43:06 ID:JDax1bPe.net<> canvasを使って、ライブラリ無しで3Dゲームは作れると思いますか？ <>
Name_Not_Found<>sage<>2020/02/04(火) 18:57:29 ID:???.net<> >>247
はい <>
Name_Not_Found<>sage<>2020/02/04(火) 19:22:15 ID:???.net<> >>247
作れる作れないで言ったら確実に作れるよ
頑張れ <>
Name_Not_Found<><>2020/02/04(火) 20:18:22 ID:q3LanA/0.net<> perfectScrollBarで画面全体のスクロールバーをカスタムすることはできますか？
サンプル等を見ても画面内のうちdivなど一部の要素にスクロールバーを表示させるものばかりでイメージが湧かないです <>
Name_Not_Found<>sage<>2020/02/04(火) 22:52:48 ID:???.net<> overflowhiddenで全体の消してそれいっぱいにそのライブラリでカスタマイズすれば？ <>
Name_Not_Found<>sage<>2020/02/05(水) 08:17:16 ID:???.net<> >>250
https://github.com/mdbootstrap/perfect-scrollbar/blob/master/README.md
https://github.com/mdbootstrap/perfect-scrollbar/issuesわ <>
Name_Not_Found<><>2020/02/05(水) 10:43:10.27 ID:LwdXeUjA.net<> ありがとうございます
なんかそれっぽい質問が見えたので頑張って訳してみます <>
Name_Not_Found<>sage<>2020/02/05(水) 20:33:43 ID:???.net<> 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()の内容をどういうものにしたら良いのでしょうか？ <>
Name_Not_Found<>sage<>2020/02/05(水) 20:54:39 ID:???.net<> ん？aとbのrequestFileの指す物が同じだと思ってるって事？ <>
Name_Not_Found<>sage<>2020/02/05(水) 20:58:31 ID:???.net<> >>255
同じurlでGETすればonloadも共有してるのかなって思ってましたが、違うみたいでした
a()を実行した後で、b()でx.jpgのファイルがonloadされた時の挙動を変更するのが目的です <>
Name_Not_Found<>sage<>2020/02/05(水) 22:26:32.03 ID:???.net<> ユーザーが選択した数十GBの動画データをFileとして持っているとき
その時点では使用メモリとしてカウントされないのですが、
FileReaderにかけるとクラッシュしてしまいます。
例えばこの部分から100MBとか、していして読み込んでもらうことはできないのでしょうか？
Streamも調べましたが、頭からは安全に取れても位置を指定して行き帰りしながらデータを読む方法がわかりません。 <>
Name_Not_Found<>sage<>2020/02/05(水) 23:30:16.82 ID:???.net<> ファイルは、一括して全部読み込むものと、
stream で、前からバッファへ読み込みながら、処理したら、すぐに捨てるタイプのものがある。
streamは、巨大な動画ファイルに使われる
streamのバッファサイズによる。
例えばブラウザで、1分前に戻ると、バッファ内にあるから、すぐに再生できるが、
10分前なら、バッファ内にないから再読み込みされる
streamはランダムアクセスできない。
データがバッファ内にあれば、出来るかも知れないが
ファイルを、一括して全部読み込む場合は、すべてがメモリ内にあるから、ランダムアクセスできるが、
大きいファイルは、読み込めない
使えるメモリサイズ以上を読み込むと、何かのデータが、HDD へスワップされるから、極端に遅くなる <>
Name_Not_Found<>sage<>2020/02/06(Thu) 06:11:13 ID:???.net<> お前のうんちくは聞いてない
できるならその方法を、できないかなら端的にそう言え <>
Name_Not_Found<>sage<>2020/02/06(Thu) 07:08:25 ID:???.net<> コーデックにもよるけど、CBRの動画でないとシークしたり、突拍子の無い場所にジャンプするのは不可能ではないが難しい。
あとGoPの仕組み上、キーフレームにしかシークできない。 <>
Name_Not_Found<>sage<>2020/02/06(Thu) 08:19:50 ID:???.net<> >>256
aのrequestFile.onloadを上書きしなさい <>
Name_Not_Found<>sage<>2020/02/06(木) 08:56:22.25 ID:???.net<> >>261
それができねぇからわざわざaとbでやってるんだろ <>
Name_Not_Found<>sage<>2020/02/06(木) 12:19:49.73 ID:???.net<> >>254
var a = function(url){
requestFile.onload = function () { };
}
var b = function(url){
requestFile.onload = function () { };
}
上は、a 関数内の処理の定義で、
下は、b 関数内の処理の定義だから、
全く別の定義だろ。異なる！ <>
Name_Not_Found<>sage<>2020/02/06(Thu) 15:38:48 ID:???.net<> >>262
それしか方法がないから、そういわれてんだろ
それが出来ねぇなら、諦めろ <>
Name_Not_Found<>sage<>2020/02/07(金) 06:37:57 ID:???.net<> プロトタイプをいじればできるでしょ <>
Name_Not_Found<>sage<>2020/02/07(金) 10:17:14 ID:???.net<> >>265
やってみた？
どうやって、aのrequestFileを取得する？ <>
263<>sage<>2020/02/07(金) 10:30:00 ID:???.net<> >>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 () { };
} <>
263<>sage<>2020/02/07(金) 10:33:25 ID:???.net<> でも、1つのXHR インスタンスで、2回もonload を呼び出してくれるのか？ <>
Name_Not_Found<>sage<>2020/02/07(金) 12:51:07 ID:???.net<> >>266
aのrequestFileを取得する必要は無いでしょ
プロトタイプに上書きされないようにセットすることはできるんだから <>
Name_Not_Found<>sage<>2020/02/07(金) 15:57:27.27 ID:???.net<> >>268
上書きしたいって言ってるんだから２回呼び出されなくていいんでね？
複数回呼び出したいならonloadプロパティではなくaddEventListener使えばいいんだし <>
Name_Not_Found<>sage<>2020/02/07(金) 17:31:39 ID:???.net<> >>269
どうやって、loadイベントをセットするの？ <>
Name_Not_Found<>sage<>2020/02/07(金) 23:00:46.73 ID:???.net<> XMLHttpRequestを上書きすればいくらでもやりようがある <>
Name_Not_Found<>sage<>2020/02/08(土) 08:45:28 ID:???.net<> >>272
それだとプロトタイプ云々は関係なくなるな >>265 <>
Name_Not_Found<><>2020/02/10(月) 14:15:27.84 ID:3cn1UqHU.net<> 対応希望ブラウザはIE11,chromeです
閉じるボタン（ブラウザの×ボタン）または、こちらで用意したキャンセルボタンをクリックしたかどうかを判定する方法はありますか？
モーダル画面を開く処理の実装中です
子画面を開くときに親画面を操作不可にする処理を実行し、onunload処理で親画面に付与した操作不可の状態を解除するという流れにしています
しかし、子画面の中で画面を閉じる以外にもポストバックが走る処理があり、それらが実行された際にonunload処理が実行されてしまい小画面が閉じていないのに親画面が操作可能になってしまうという問題が生じています。
閉じるボタンまたはキャンセルボタンが押下された場合のみonunload処理の中身が走るように分岐を加えたいのですが、それらを判定する方法があれば教えてください <>
Name_Not_Found<>sage<>2020/02/10(月) 14:56:30.98 ID:???.net<> button要素にbisabled設定してJSのifでtrue,false設定しよう <>
Name_Not_Found<><>2020/02/11(火) 10:16:07.02 ID:djVo/1Ch.net<> bisabled?
disabledの誤字ですかね
閉じるボタンを押したらそのボタンをdisabledにしちゃえという感じですかね <>
Name_Not_Found<>sage<>2020/02/11(火) 12:53:55.11 ID:???.net<> >>274
> onunload処理の中身が走るように
onunloadは使ってはいけません。
最後の最後の最後の手段で実行されてなくて問題ない
という場合にのみおまけで実行するためのものです。 <>
Name_Not_Found<>sage<>2020/02/11(火) 21:48:45 ID:???.net<> 特定の変化をキャッチして状態を測ろうというのは特定の場合には効果的だが、
そうでないときはできるのならばポーリングで直接状態を調べたほうが良い
まあ、今はnavigator.locksという素晴らしいAPIもあるんだがIE11では当然使えないしな <>
Name_Not_Found<><>2020/02/12(水) 11:58:31.11 ID:uIAxZomW.net<> 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>もできたりして上手くいきません。
どのように書けばよいのでしょうか？ <>
Name_Not_Found<>sage<>2020/02/12(水) 12:14:37.53 ID:???.net<> >>279
text.split(/(?:<br>)+/); <>
Name_Not_Found<>sage<>2020/02/12(水) 13:08:38.83 ID:???.net<> >>280
できました！勉強になります。ありがとうございました <>
Name_Not_Found<>sage<>2020/02/13(Thu) 06:19:26 ID:???.net<> '<p>'+text.replace(/(<br>)+/g,'</p><p>')+'</p>' <>
Name_Not_Found<>sage<>2020/02/14(金) 17:14:00.59 ID:???.net<> var str="あいうえお<br><br>かきくけこ<br><br>さしすせそ";
console.log( str.split(/(?:<br>)+/).map(t=>`<p>${t}</p>`).join('') ); <>
Name_Not_Found<>sage<>2020/02/14(金) 19:27:36.41 ID:???.net<> >>279
文字列でなく、ノード単位で扱った方が良いと思うけどな <>
Name_Not_Found<><>2020/02/17(月) 08:17:57 ID:uUml68Bs.net<> パーフェクトスクロールバーってやつを導入したんだけど、横方向のスクロールバーだけ非表示にする方法はありますか？ <>
Name_Not_Found<>sage<>2020/02/17(月) 09:58:52 ID:???.net<> >>285
noneにする <>
Name_Not_Found<><>2020/02/17(月) 14:26:36 ID:2SfuS0Ll.net<> 消えました
ありがとうございます <>
Name_Not_Found<><>2020/02/17(月) 14:31:01.59 ID:2SfuS0Ll.net<> もう一個パーフェクトスクロールバーについて質問です
二つのdiv要素を縦に並べて配置していて、その２つを含む親のdiv要素にスクロールバーを設定しているのですが、その画面を表示すると二つ並べたdiv要素のうち上の要素の高さ分だけスクロールバーが表示されてしまいます
そして、画面上でホイールをクルクルさせると親のdiv要素全体のスクロールバーがちゃんと表示される（最初に表示された変なスクロールバーは消える）という状況が起きているのですが、最初から正しく表示させる方法はありますか… <>
Name_Not_Found<>sage<>2020/02/17(月) 18:15:56 ID:???.net<> max-heightを設定しておく <>
Name_Not_Found<><>2020/02/18(火) 04:30:37.70 ID:ZqZ4x2wu.net<> 下記リンクのページについて質問があります。
https://www.englishplus.jp/nuance/to-me-for-me/
firefoxでjavascriptを無効にして開くと、右クリックメニューは出るようになったのですが、
うまく、CTRL+Aや、文字列選択ができません。
javascript以外にどんな機構が働いてこのような挙動になるのでしょうか。
また文字列選択や、CTRL+Aをできるようにするにはどういうことが考えられるか教えてください。 <>
Name_Not_Found<>sage<>2020/02/18(火) 06:10:50.22 ID:???.net<> 「右クリック禁止 解除 アドオン firefox」で検索！
右クリック禁止は、
document.oncontextmenu=function(){return false;};
これを、
document.oncontextmenu = null;
で解除できるけど、
テキストの選択禁止は、解除できないので、
下の語句で検索して、解除していかないといけない
document.onselectstart, document.ondragstart, onclick,
stopPropagation, preventDefault, return false <>
Name_Not_Found<><>2020/02/18(火) 13:24:44.70 ID:ZqZ4x2wu.net<> >>291
レスありがとうございます。
教えてもらったdocument関係のステートメントはjavascriptだと思うんですが、
firefoxで、javascript.enabledをfalseに切り替えたにも関わらず、
それらが動作するのは不思議です。 <>
Name_Not_Found<>sage<>2020/02/18(火) 13:30:08.32 ID:???.net<> >>290
そのサイトはjavascriptではなくcssのuser-select: noneで選択できないようにしてあるから
ちなみにfirefoxはjavascript切らなくてもshift+右クリックでコンテキストメニューを出せる <>
Name_Not_Found<>sage<>2020/02/18(火) 18:06:54 ID:???.net<> そういうユーザビリティの欠片もないサイトは見ないに限る <>
Name_Not_Found<>sage<>2020/02/18(火) 20:32:09.04 ID:???.net<> うぜえと思って大昔適当なユーザースクリプトを書いたが7,8割はそれでずっと間に合ってるな
それも効かないやつはdevツールから見るか諦める <>
Name_Not_Found<>sage<>2020/02/18(火) 22:04:04.27 ID:???.net<> cssの、user-select: none か！
初めて知ったw
ケチ臭え。テキストぐらい、コピーさせろや！w <>
292<>sage<>2020/02/19(水) 01:22:36.64 ID:???.net<> >>293
詳しい方、どうもありがとうございます。
>>296さんではないですが、
私も初めて知りました。
チップスを含めてとても参考になりました。
ありがとうございました！ <>
Name_Not_Found<>sage<>2020/02/19(水) 10:24:18.30 ID:???.net<> 昔だったらjs使わなきゃダメだったことも
ie捨てればhtmlとcssでできたゃうことが多くなったね <>
Name_Not_Found<><>2020/02/19(水) 13:11:05 ID:hTlb9aFi.net<> プログラミングしたいけど顔がキモオタ顔になるのが嫌です
職場のseの話し方とか顔が嫌い
最近ネットに増殖してきたエンジニア系男子の顔も本当に嫌い
どうすればいいですか <>
Name_Not_Found<>sage<>2020/02/19(水) 15:10:00 ID:???.net<> >>299
鏡を眺めて表情を作る練習をしましょう <>
Name_Not_Found<>sage<>2020/02/19(水) 18:39:06 ID:???.net<> >>299
仕事の悩み相談スレを探せ <>
Name_Not_Found<>sage<>2020/02/19(水) 22:21:10.00 ID:???.net<> >>298
IEは昔からCSSの対応はそんなに悪くないぞ
IE発のものも多いし <>
Name_Not_Found<>sage<>2020/02/20(木) 01:13:35.39 ID:???.net<> ウェイ系行けよ <>
Name_Not_Found<>sage<>2020/02/20(Thu) 08:21:04 ID:???.net<> >>299
プログラマの雑談部屋 ★95
https://medaka.5ch.net/test/read.cgi/prog/1582036051/ <>
Name_Not_Found<>sage<>2020/02/20(木) 14:26:04.22 ID:???.net<> >>293さんの投稿について、
ブラウザプラグインで、
cssのuser-select: none を抜くようなことができたらいいのに。
あるかな？ <>
Name_Not_Found<>sage<>2020/02/20(Thu) 20:18:49 ID:???.net<> 幾つかのイベントでトップレベルでstopImmediatePropagationする
style*="user-select"を走査して外す
それだけでも半分以上に効果がある <>
Name_Not_Found<>sage<>2020/02/20(Thu) 22:44:18 ID:???.net<> 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<>sage<>2020/02/20(Thu) 22:49:23 ID:???.net<> >>307
修正。上下が逆だった
>user_selects.forEach( elem => {
>that = $( this )
that = $( this )
user_selects.forEach( elem => { <>
Name_Not_Found<>sage<>2020/02/21(金) 00:07:12.59 ID:???.net<> 質問です
classって名前空間に閉じ込めることはできないんですかね？
他所のJS読んだときに
安易な名前だとぶつかっちゃいそうな気がするんですが <>
Name_Not_Found<><>2020/02/21(金) 03:41:00.21 ID:U3BoPE0C.net<> >>307
それをどうやって相手のWEBサーバーからのHTMLに組込めば良いの？ <>
Name_Not_Found<>sage<>2020/02/21(金) 07:11:09.76 ID:???.net<> >>309
モジュールがあるでしょ <>
307<>sage<>2020/02/21(金) 17:14:59 ID:???.net<> 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' ) }
} );
} ); // ここまで
} );
} ); <>
Name_Not_Found<>sage<>2020/02/21(金) 19:56:32.80 ID:???.net<> >>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>`);
})();
でおｋ <>
Name_Not_Found<>sage<>2020/02/21(金) 21:02:10 ID:???.net<> どんなサイトで来るか分からんしブックマークレットにしたほうが賢いでしょ <>
307<>sage<>2020/02/21(金) 21:49:00 ID:???.net<> 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";
}
} <>
Name_Not_Found<>sage<>2020/02/22(土) 00:41:49.42 ID:???.net<> >>311
なるほど… <>
Name_Not_Found<>sage<>2020/02/22(土) 13:21:02.05 ID:???.net<> >>309
React, Vue.js か忘れたけど、フレームワークでは、scoped CSS になっていた <>
Name_Not_Found<>sage<>2020/02/22(土) 15:30:16.05 ID:???.net<> プログラミング初心者
質問お願いします
ブラウザの作業を自動化したいと考えてます。ググってみた結果
現在pythonでSeleniumを使った方法を調べてますが、色々と苦戦しております。
検索ワードでjsでもできそうなのですがそもそもプログラムに詳しい方からすると
どちらの方法が好ましい(効率的とか簡単等)のでしょうか？
因みに使用用途はダウンロードを繰り返すというものです。
ひと昔前にあったダウンローダー等使えないサイトとなっております。
宜しくお願いします。 <>
Name_Not_Found<>sage<>2020/02/22(土) 16:15:07.94 ID:???.net<> 君自身が色々と調べて迷っているのに、
たった数行の情報をここに書いて見た人が何か判断できると本気で思ってるのかい？
せめてここのサイトのこのコンテンツをDLしたいですとか言ってくれないと
可能性が無数にありすぎて何もわからないでしょ <>
Name_Not_Found<>sage<>2020/02/22(土) 17:00:20.19 ID:???.net<> 漏れは、スクレイピングに、Ruby, Selenium WebDriver, Nokogiri を使っている
ブラウザの自動操作もできるし <>
320<>sage<>2020/02/22(土) 17:08:04.99 ID:???.net<> 【VBScript】WSHについて話し合うスレ【JScript】
https://mevius.5ch.net/test/read.cgi/tech/1578522041/27
ここに書いたように、Ruby, Selenium WebDriver で、
ブラウザを自動操作して、Yahoo に自動ログインしてる
ユーザー名を入力して、ボタンを押す。
パスワードを入力して、ボタンを押す <>
320<>sage<>2020/02/22(土) 17:12:48.55 ID:???.net<> ダウンロードには、wget, curl を使う
それよりも複雑なものには、漏れは、Ruby, Selenium WebDriver, Nokogiri を使うけど、
各サイトの解析が大変
例えば、5ch の投稿から画像ファイルだけを探すのに、
「div.message a」内のURL で、拡張子が「png jpg jpeg gif」のものだけを絞り込むとか、
こういう処理を、Ruby以外で書くのは辛い
Rubyは、可読性が高いから良いけど <>
Name_Not_Found<>sage<>2020/02/22(土) 17:39:49.88 ID:???.net<> javascriptでやるにしてもユーザースクリプトやブラウザ拡張、Node.js+Selenium、Electron等いろいろ方法はあるわけで <>
Name_Not_Found<>sage<>2020/02/22(土) 17:59:14.09 ID:???.net<> 場合によってはコンソールに打ち込んでもいいだろうしな <>
Name_Not_Found<>sage<>2020/02/22(土) 18:21:29.17 ID:???.net<> >>313
面白そうで試してみたいけど、
どう使えばいいの？ <>
Name_Not_Found<>sage<>2020/02/22(土) 18:24:26.43 ID:???.net<> ググレカス
.user.jsにして拡張機能ページにDnDするだけだろポンコツ <>
Name_Not_Found<>sage<>2020/02/22(土) 21:59:56 ID:???.net<> >>326
ありがとう、そのキーワードでググってみるよ <>
Name_Not_Found<>sage<>2020/02/22(土) 22:40:57.62 ID:???.net<> わざわざファイルにせんでもユーザースクリプト拡張で新規作成選んでコピペするだけでしょ <>
Name_Not_Found<>sage<>2020/02/23(日) 14:02:07.76 ID:???.net<> わざわざ拡張入れなくてもファイル１つ作るだけでしょ <>
Name_Not_Found<>sage<>2020/02/23(日) 16:48:07.81 ID:???.net<> これ系は昔からブックマークレットで無効にしてたわ
>>290のサイトも試したがもちろん解除できる
この程度でjQueryを使う必要性も無いし、ユーザースクリプトやブラウザ拡張も不要 <>
Name_Not_Found<>sage<>2020/02/24(月) 09:54:18 ID:???.net<> こういう直前の１，２レスしか頭に入らないやつをどうにかしてほしい
ブックマークレットの話は十分に出たからそれ以外の解決例をオマケで話してるんだろうが
頭悪すぎ <>
きりん<><>2020/02/24(月) 21:11:14.91 ID:KdUVT2aj.net<> 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> <>
きりん<><>2020/02/24(月) 21:15:31.42 ID:KdUVT2aj.net<> ■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> <>
Name_Not_Found<>sage<>2020/02/29(土) 14:28:18 ID:???.net<> セミコロンの有無について質問です。
const half =(number) => {
return number / 2;
};
―――――――――――――――
If (条件式) {
処理
}
関数を定義する時は }; とするのに、
If文などでは }の後にセミコロンを付けないのはなぜですか？ <>
Name_Not_Found<>sage<>2020/02/29(土) 15:22:59 ID:???.net<> ifは式じゃないから…というのはCの時代からの構文解析の決まりだな
と言ってもJSはそもそもセミコロン不要だから
本当に飾りみたいなもんだろう <>
Name_Not_Found<>sage<>2020/02/29(土) 16:06:58.86 ID:???.net<> >>334
blockはセミコロンを付けない構文 <>
Name_Not_Found<>sage<>2020/02/29(土) 17:20:09.16 ID:???.net<> ありがとうございました！
ブロックという概念があるんですね。
progateでそこら辺のこと書いてなかったんで。
調べてみます！ <>
Name_Not_Found<>sage<>2020/02/29(土) 19:53:09 ID:???.net<> ajaxについての質問です。
動画サイトにて、下記のように事前に用意した変数を
POSTで送信する場合に、プロパティ名に変数と同名を利用していました。
値のanswerが変数のanswerを参照するのは理解できるのですが、
プロパティのanswerは変数のanswerを参照してしまったりしないのでしょうか？
ajaxの送信する構文の中ではプロパティ名は参照しない…的な仕様なのでしょうか？
...
var answer = $selected.text();
$.post('test.php', {
answer: answer
})
... <>
Name_Not_Found<>sage<>2020/02/29(土) 20:16:42.47 ID:???.net<> ajaxに限らずオブジェクト初期化子の裸のキーは変数展開されない
es2015以降であれば
{
[answer]: answer,
}
のようにブラケットで囲むことで変数や計算結果をキーにできる <>
Name_Not_Found<>sage<>2020/02/29(土) 20:16:49.87 ID:???.net<> >>334
関数を定義するなども;は必須ではない、つけないスタイルもある
ただ特定の場合で次の行と結合するので、そこを気にしたくないのであれば;を無駄につけるというだけ
一方if文などは次の行と結合しないことがわかりやすいのでつけない人が多い
要するに気分や感覚の問題 <>
Name_Not_Found<>sage<>2020/02/29(土) 20:22:36.99 ID:???.net<> >>338
https://tc39.es/ecma262/#sec-object-initializer-runtime-semantics-evaluation
LiteralPropertyName:IdentifierName
Return StringValue of IdentifierName.
評価はされない <>
Name_Not_Found<>sage<>2020/03/01(日) 10:12:08.14 ID:???.net<> >>339
ありがとうございます。
いろんな言語の当たり前の仕様だったのですね。
すっきりしました。
>>341
すみません。
翻訳しましたが、よくわかりませんでした… <>
Name_Not_Found<>sage<>2020/03/01(日) 12:38:18 ID:???.net<> >>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ということがわかる <>
Name_Not_Found<><>2020/03/01(日) 12:39:27 ID:33Mst+Ql.net<> >>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で事前に調べて分かっている（ここからリンクを飛んで調べてもよい）のでその下の処理を読んでいこう <>
Name_Not_Found<>sage<>2020/03/01(日) 12:40:30 ID:???.net<> >>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 <>
Name_Not_Found<>sage<>2020/03/01(日) 12:41:52 ID:???.net<> >>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の仕様書は読める <>
Name_Not_Found<>sage<>2020/03/01(日) 12:46:05 ID:???.net<> >>345 に間違いがあった
try {
PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true )
} catch ( err ) {
return err
}
return obj
のイメージが正しい <>
Name_Not_Found<><>2020/03/01(日) 19:07:03 ID:W4sArTyK.net<> 長いw <>
Name_Not_Found<>sage<>2020/03/01(日) 23:15:05 ID:???.net<> >>338
例えば、そのオブジェクトと、
そのオブジェクト内のプロパティーのキーが同じ名前でも、区別がつく
let obj = { obj: 1, a:2 }
オブジェクトそのもの
console.log( obj ) //=> { obj: 1, a:2 }
オブジェクトの各プロパティー
console.log( obj.obj ) //=> 1
console.log( obj.a ) //=> 2 <>
Name_Not_Found<>sage<>2020/03/01(日) 23:47:58 ID:???.net<> オブジェクトに名前はない
名前があるのは関数 <>
Name_Not_Found<>sage<>2020/03/03(火) 22:31:22.31 ID:???.net<> 吾輩は猫である
名前はまだない <>
Name_Not_Found<>sage<>2020/03/03(火) 22:36:14.30 ID:???.net<> そもそも概念的には一般的に物体というものが名前を保持しているのではない
名前が物体を参照しているのだ <>
Name_Not_Found<><>2020/03/05(Thu) 00:03:06 ID:yOGCnpaD.net<> インプットのvalueを変えたいんだけどdomのIdでないと中身変換できないん？
nameもclassもやってみたけどミスってるわけじゃないのに変化しないから気になったんだけど <>
Name_Not_Found<>sage<>2020/03/05(Thu) 00:03:33 ID:???.net<> function EventHandler(event) {
var e = event || window.event;
}
イベントオブジェクトの取得で↑が例としてのってたのですが
またはの記号って左辺が優先されるとかありますか？
event がなければ window.event から取得するみたいな <>
Name_Not_Found<>sage<>2020/03/05(Thu) 05:50:00 ID:???.net<> >>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 では、入力補完で、戻り値の型も表示される！ <>
Name_Not_Found<>sage<>2020/03/05(Thu) 05:59:03 ID:???.net<> >>354
短絡評価だろ
左が真なら、右を評価しないで、左を戻す。
左が偽なら、右を評価して戻す
let e = 1 || "a" //=> 1
e = null || "あ" //=> あ <>
Name_Not_Found<>sage<>2020/03/05(Thu) 08:34:24 ID:???.net<> >>354
>>3のリファレンスぐらい読め
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators <>
Name_Not_Found<>sage<>2020/03/05(Thu) 08:38:40 ID:???.net<> >>353
querySelector
querySelectorAll
getElementsByClassName
他にいくらてもある <>
Name_Not_Found<><>2020/03/05(木) 12:04:18.25 ID:bvupghia.net<> >>353
fileは変えられないよ <>
Name_Not_Found<><>2020/03/05(木) 15:54:16.11 ID:yOGCnpaD.net<> >>355
どうも、後で見直したら配列で戻ってくるのに気づいてなかった
ありがとう <>
Name_Not_Found<>sage<>2020/03/05(Thu) 16:20:49 ID:???.net<> 配列じゃないけどね。
本当に配列が欲しいならArray.from( )か [... ]で囲みなよ。 <>
Name_Not_Found<>sage<>2020/03/06(金) 00:27:15.97 ID:???.net<> IE11というクソカスの為にObject.getOwnPropertySymbols()のポリフィルを自作したいんだが、
どんなアプローチでSymbolを区別してやればいいかねぇ？ <>
Name_Not_Found<>sage<>2020/03/06(金) 07:09:44.34 ID:???.net<> >>361
配列だろArrayじゃないと言うだけで <>
Name_Not_Found<>sage<>2020/03/06(金) 09:20:03 ID:???.net<> JavaScriptにおいて、Arrayの一般的な訳語が配列ではないと言うのなら、そうですね。 <>
Name_Not_Found<>sage<>2020/03/06(金) 12:16:24 ID:???.net<> >>363
コレクションだ <>
Name_Not_Found<>sage<>2020/03/06(金) 12:28:52 ID:???.net<> NodeListは「配列メソッドが使えない！」という誤認が初心者でよく見かけるな <>
Name_Not_Found<>sage<>2020/03/06(金) 12:49:50 ID:???.net<> 間違いじゃないよ。今は改善されて配列メソッドと互換性があるメソッドがNodeListに追加されたってだけ
だから古いブラウザだと動かないことがある。 <>
Name_Not_Found<>sage<>2020/03/06(金) 13:01:38 ID:???.net<> 鳥は飛べますが、
猫が飛べるようになったら鳥でしょうか？ <>
Name_Not_Found<>sage<>2020/03/06(金) 13:08:48.30 ID:???.net<> 存在しないものを例に挙げるのは詭弁のガイドラインに抵触しますが、
あえて言うならば猫メソッドに鳥メソッドを追加しても個別の飛べる猫です
人間が琵琶湖で飛んでも鳥ではなく鳥人間と呼ばれます <>
Name_Not_Found<>sage<>2020/03/06(金) 13:24:23 ID:???.net<> ダックタイピングとは、Rubyなどの動的型付けオブジェクト指向プログラミング言語で行われる、
型付けのやり方です。 次の文章が基になっている考え方となっています。
「もしもそれがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルである。」
つまりドナルドダックはアヒルです。 <>
Name_Not_Found<><>2020/03/06(金) 16:48:01.27 ID:r4vwtDx/.net<> >>365
結局配列みたいにインデックスで呼び出せるんだから同じでしょその意味では <>
Name_Not_Found<>sage<>2020/03/06(金) 18:15:43 ID:???.net<> >>367
> 今は改善されて配列メソッドと互換性があるメソッドがNodeListに追加されたってだけ
これは本当ですか？
NodeListにはforEachだけでなく、pushやconcatもあるのですか？ <>
Name_Not_Found<>sage<>2020/03/06(金) 19:22:12.14 ID:???.net<> >>371
JSでは配列は特殊なオブジェクトと言うことができるが、これをもってオブジェクトは配列であるというのがお前の意見。
それでいいならいいんじゃねメンドくせえ。
リアルでもガンガンそう主張していけよｗ <>
Name_Not_Found<>sage<>2020/03/06(金) 19:45:03 ID:???.net<> >>372
ないならないんじゃねｗ
知らんよ。俺はNodeListは配列だと思ってないし。
そういったブラウザ間の違いとか、本質的でない部分で
無駄に疲れるのがいやだからjQueryを使うわけで <>
Name_Not_Found<>sage<>2020/03/06(金) 20:25:24 ID:???.net<> >>374
>>367の「間違いじゃないよ」は>>366の「配列メソッドが使えない！」にかかってたんじゃなかったのか？
主張に一貫性がないな <>
Name_Not_Found<>sage<>2020/03/06(金) 23:57:52.99 ID:???.net<> >>371
たとえば
const NL = document.querySelectorAll('div');
これはイケるけど
NL.forEach((item) => { console.log(item) });
これは駄目、配列じゃないから
const hoge = NL.map((item) => { return item.innerHTML; });
20年以上前のgetElementsByTagName時代から
「配列と同じでしょ」っていう人は一定数いて
どこかで配列として扱おうとしてコケる、っていうのを繰り返して今に至ってる
だから、今まだこのスレで質問する側なら、あんまり意固地にならず
ノードリスト、コレクションは配列とは似て非なるもの、って認識を持ったほうが良いよ
というのが答えてる人の総意だと思う <>
Name_Not_Found<>sage<>2020/03/07(土) 00:03:42.00 ID:???.net<> >>365
それは違う
querySelectorとquerySelectorAllが返すのはNodeList
getElementsByTagNameや、要素.childrenが返すのがCollection
NodeListは静的で、取得後にDOM内で要素が増減しても変わらない
Collectionは動的で、取得後でもDOM内で要素が増減すると変わる
getElementsByホゲホゲを使うことはもう無いだろうけど
childrenはまだ使う機会があるだろうから、覚えておこう <>
Name_Not_Found<>sage<>2020/03/07(土) 02:35:12.17 ID:???.net<> なんでこんなばらばらの仕様にしたの？
それを吸収するjQueryは素晴らしいね！ <>
Name_Not_Found<>sage<>2020/03/07(土) 02:37:19.03 ID:???.net<> NodeListは静的で、取得後にDOM内で要素が増減しても変わらない
だけでDOMの内容自体は変わることに注意
Collectionは動的で、取得後でもDOM内で要素が増減すると変わる
のでインデックス番号とかで扱ってるとバグることがあるので注意 <>
Name_Not_Found<>sage<>2020/03/07(土) 04:20:59 ID:???.net<> >>364
頭大丈夫か？
Arrayの一般的な訳語が配列あったとしても、
その逆も同じとはならないだろ
「配列」はより一般的な用語だ <>
Name_Not_Found<>sage<>2020/03/07(土) 04:35:50.82 ID:???.net<> >>364
「配列」をArrayと1:1関係と決めつけるほうがおかしいでしょ
>>371は多分用語の「配列」のことを言ってるんでしょ
そもそも大大大前提としてJSのArrayはただのオブジェクトでしょ
別に数字キーで管理されているわけでもなく、普通の文字列と値の組み合わせのオブジェクトでしょ
ただほんのちょっとプロキシ的にlengthと数字キーを扱ってArrayらしさが出てるだけの
「呼ぶことができるオブジェクト」である関数と同じように
他のビルトインオブジェクトと比べても異色ではない存在でしょ
その点実際にJSと絡むときはレイヤー挟んでるとは言えListと名が付いてて
仕様の表現的にはNodeListのほうがよほど配列らしいでしょ
それなのにArrayだけを配列と呼ぶことに拘る論理的な必然性と意味があるのか？
あまりにもナンセンスでしょ
あと>>365もおかしい
NodeListもコレクションだから
liveなコレクションがHTMLCollectionでstaticなコレクションがNodeListってだけだから <>
Name_Not_Found<>sage<>2020/03/07(土) 07:11:46.39 ID:???.net<> 最後のおかしいのは>>377だった <>
Name_Not_Found<>sage<>2020/03/07(土) 07:19:52.22 ID:???.net<> >>381
> そもそも大大大前提としてJSのArrayはただのオブジェクトでしょ
> 別に数字キーで管理されているわけでもなく、普通の文字列と値の組み合わせのオブジェクトでしょ
はあ、そうですか
つまり、あなたの中では {0:0 ,1:1, length:2} も "" も配列なんですね
曖昧な世界に生きてますね <>
Name_Not_Found<>sage<>2020/03/07(土) 10:53:28 ID:???.net<> >>381は曖昧であった… 虎眼先生かな？ｗ <>
Name_Not_Found<>sage<>2020/03/07(土) 11:24:45.07 ID:???.net<> 373 Name_Not_Found sage 2020/03/06(金) 19:22:12.14 ID:???
>>371
JSでは配列は特殊なオブジェクトと言うことができるが、これをもってオブジェクトは配列であるというのがお前の意見。
それでいいならいいんじゃねメンドくせえ。
リアルでもガンガンそう主張していけよｗ <>
Name_Not_Found<><>2020/03/07(土) 14:04:55 ID:i6mdUe9z.net<> >>248
>>249
ライブラリを使わずにオフラインで3Dゲームを作ることが出来ました。
仕組みを1から理解出来て良かったです <>
Name_Not_Found<>sage<>2020/03/07(土) 19:27:47.69 ID:???.net<> >>356->>357
遅ればせながらありがとうございます。
短絡評価というのですね。
if文で何の気なしに使ってるだけで、左辺から処理されているとか考えたことなかったです。
どうも！ <>
Name_Not_Found<><>2020/03/07(土) 19:46:50.99 ID:k8B1CrKG.net<> オフライン環境でファイルの書き込み＆保存をする方法はありますか？
読み込みなら出来てるんですけど… <>
Name_Not_Found<>sage<>2020/03/07(土) 20:04:44.29 ID:???.net<> >>381
配列に限らず
全てのオブジェクトはObjectオブジェクトの子孫だよ <>
Name_Not_Found<>sage<>2020/03/07(土) 20:06:44.80 ID:???.net<> >>388
出来たら何をしたいんだこの犯罪者め！ <>
Name_Not_Found<><>2020/03/07(土) 20:13:04.16 ID:pg7+MEPr.net<> >>388
これはテキストエディタ書き込みでもしたいんじゃねえの？ <>
Name_Not_Found<>sage<>2020/03/07(土) 20:59:29.95 ID:???.net<> >>383
そうではない
Arrayを配列たらしめてるのは[[DefineOwnProperty]]内部メソッドの効果であって
逆に言えばArrayは[[DefineOwnProperty]]トラップがあるだけの普通のオブジェクトだと言うことだ
>>389
プロトタイプ的に子孫であるかどうかの話をしているのではなく、
形態と効果について話してる <>
Name_Not_Found<>sage<>2020/03/07(土) 21:03:16.28 ID:???.net<> 要するに話を戻すと、
Arrayというのはその存在がそのものがJSの中で特殊なものではなく、
オブジェクトがトラップによって配列たらしめられているからArrayは配列なのであって、
他の配列たらしめられているオブジェクトも同じく配列と呼ばないというのはナンセンスだという話 <>
Name_Not_Found<><>2020/03/07(土) 22:13:58 ID:rVIogRi+.net<> 一般的にはarray-likeと呼ばれているよそれ。
配列はやはりArrayと対応する訳語として使われててArray.prototype継承してるオブジェクトだね。
Node ListやHTML CollectionをArray-likeではなくArray、配列として認識しろってんならその定義をチームや話相手と共有してくれよな。
常識にしたいなら標準化組織と話し合ってね。
俺らに言われても困る。 <>
Name_Not_Found<>sage<>2020/03/07(土) 23:26:45.05 ID:???.net<> いやいや、Arrayも配列だが、配列はArrayだけではないでしょ
例えばTypedArrayは型付配列だけど、型付配列は配列じゃないか
そのように配列っていうのは広い概念でしょ
何を理由のない変なこだわりをしてるんだか <>
Name_Not_Found<>sage<>2020/03/07(土) 23:28:50.50 ID:???.net<> それとArray.prototypeを継承しているかっていうのと、
Array（のインスタンス）かどうかっていうのは別でしょ
Array.isArrayでもわかるように
Arrayかどうかっていうのは内部メソッドが付与された
Arrayたらしめられているオブジェクトかっていう点が重要でしょ？ <>
Name_Not_Found<>sage<>2020/03/07(土) 23:37:41.15 ID:???.net<> JSでなんちゃらオブジェクトっていうのは、
どんな修飾がされたオブジェクトかっていう括りであって
プロトタイプはオマケであって本質とは関係ないでしょ？
ArrayはArrayたらしめる修飾がされたオブジェクトであって
その修飾の方向性を配列と呼ぶんでしょ
その中でも具体的に大きい特徴は、
lengthプロパティが実際の配列としての要素数とリンクしているということでしょ
その点例えば{0:'a',length:1}は用意に世界観が壊れるが
ある種似ているかもしれないTypedArrayは要素数固定のおかげで
Arrayのように個性的なトラップメソッドを付与されていない、
内部スロットがある薄い特殊オブジェクトだけど、配列と呼べるんでしょ
ならばNodeListとかも配列と呼ばないのは不自然でナンセンスだとは思わないかい？ <>
Name_Not_Found<>sage<>2020/03/07(土) 23:40:29.66 ID:???.net<> これって１人でずっと会話してるの？ <>
Name_Not_Found<>sage<>2020/03/07(土) 23:40:54.35 ID:???.net<> だからID無しはキモいんだよな <>
Name_Not_Found<>sage<>2020/03/07(土) 23:43:33.85 ID:???.net<> キモいというのは幼少期から言われ慣れてるから
多分今日も昨日も職場で言われたし
ただ俺は人間よりもJS、Web大好き人間なだけであって
エンジニアとして技術的な話がしたいし
プログラミングの世界に余計な雑念を持ち込まれたくないだけであって、
入門者が曲がった価値観を植え付けられるのを見ていられないだけだからね <>
Name_Not_Found<>sage<>2020/03/07(土) 23:53:22.95 ID:???.net<> つうか根拠があるならそれを自信満々にはっきり言ってほしいのよ
慣習的にそう呼ばれてるんだっていうのは俺も理解はしてるから
そうやって理屈と理屈が打つかるところ、両者の意見を見て
初心者ってどういうものが良いのかを学んで感じていくものでしょう？
両者のはっきりした意見が並んであるのをWebに刻みつけて残すことが
後から検索で見に来た人のためでもあるし、
この先の未来を見据えてもビッグデータとしての側面からも価値のあるコンテンツを作っていきたいでしょう？
少なくとも俺はそう思ってこのスレにずーと居るのでなんかひかれ気味なのは残念 <>
Name_Not_Found<>sage<>2020/03/07(土) 23:55:29 ID:???.net<> ID未定義の名無しが話し合ってると意味が分からない
Arrayの定義の話をする前にそっちをちゃんとしてください（名前くらい書け） <>
Name_Not_Found<>sage<>2020/03/08(日) 00:08:19.86 ID:???.net<> せやな、次行こ <>
Name_Not_Found<>sage<>2020/03/08(日) 00:24:12 ID:???.net<> ID未定義の名無しが話し合ってるから意味がわからないのではない
読み書きは人間が後期に獲得した能力なので
人々が話し合っている会話文を読み解くのは非常に難しい
それどころか海外に行ったら半分くらいの人間は10秒以上他人の話を集中して聞けない
それくらいが本来の人間の能力
日本人は、2chは素晴らしい <>
Name_Not_Found<>sage<>2020/03/08(日) 00:29:14 ID:???.net<> せやな、次行こ <>
Name_Not_Found<>sage<>2020/03/08(日) 01:21:42 ID:???.net<> >>388
自分のPC に読み書きするなら、Ruby, Node.js みたいなサーバー側が必要
VSCode も、Chromium, Node.js を使っているから、
GUI は、ブラウザのChromium で、
サーバー側はNode.js で、ローカルファイルにアクセスできる <>
Name_Not_Found<><>2020/03/08(日) 02:10:30 ID:ELKXCWr4.net<> >>396
ふーん。で、NodeListとHTMLCollectionのArray.isArrayの結果は？ <>
Name_Not_Found<><>2020/03/08(日) 07:58:55.75 ID:wyKUDR8/.net<> >>406
なるほど、オンラインじゃないと無理なんですね
参考になりました
>>390
>>391
職場のパソコンで遊んでるんですが、保全が強くてネットに繋いだらダメなんです_( _´ω`)_ <>
Name_Not_Found<>sage<>2020/03/08(日) 14:06:23.02 ID:???.net<> >>407何の話をしようとしているのか？
全ては>>363から始まった話だということを理解しているのだろうか？ <>
Name_Not_Found<>sage<>2020/03/08(日) 16:47:52 ID:???.net<> >>408
Chromeの拡張でも作れば？
それかフラグ立てればローカルに書き込みができるNativeFileSystemAPI使える <>
Name_Not_Found<><>2020/03/09(月) 02:09:33.73 ID:R4RMYAFt.net<> SEOで有名な瀧日伴則＠アイオイクスってどうよ - 5ちゃんねる掲示板
http://itest.5ch.net/test/read.cgi/hp/1558934167/l50 <>
Name_Not_Found<>sage<>2020/03/10(火) 19:11:33.57 ID:???.net<> 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> <>
Name_Not_Found<>sage<>2020/03/13(金) 06:28:10.78 ID:???.net<> no-store <>
Name_Not_Found<>sage<>2020/03/13(金) 22:21:57 ID:???.net<> >>413
no-cache のところを no-store にしてみましたが、304 not modified が返ってきてしまいます <>
Name_Not_Found<>sage<>2020/03/13(金) 23:55:19.11 ID:???.net<> スマホが出てきたあたりからmetaタグもレスポンスヘッダもキャッシュ関係は無視してIf-Modified-SinceやIf-None-Matchを渡してサーバー側に委ねるブラウザが多い。更新されてればリロードされるのだから通常は問題ない
更新されてなくても強制的にリロードしたいなら動的にクエリ付けるしかないね <>
Name_Not_Found<>sage<>2020/03/14(土) 01:19:38 ID:???.net<> >>415
web系の開発は初めてで常識的なことが分かってなくてすみません
jsを使って定期的に内容が動的に更新されるページを作成しているのですが、
動的に作っているせいなのか自分のテストが間違っているのか、
ベースhtmlを修正・更新してもクライアント側が更新されないことがあるなと思って
隠し更新リンクを作ってみたところ、これでも更新されないなと思い今回の質問に至りました
とりあえず納得しました
どうもありがとうございました <>
Name_Not_Found<>sage<>2020/03/14(土) 12:34:16.78 ID:???.net<> リンク先のファイル(複数)をダウンロードするプログラムを書きたいんだが、どういうコードにしたらいい？ <>
Name_Not_Found<>sage<>2020/03/14(土) 14:04:48.10 ID:???.net<> jsでやらないほうがいい <>
Name_Not_Found<>sage<>2020/03/14(土) 14:05:16.47 ID:???.net<> >>417
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API <>
Name_Not_Found<><>2020/03/14(土) 15:59:06 ID:cwqJKaIn.net<> カッコの使い方を教えてください。
( ), { }, [ ]、こういうやつです。
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
でした。 <>
Name_Not_Found<>sage<>2020/03/14(土) 16:58:53 ID:???.net<> ×文
○式
×実行
○評価
なら、理解は正しい。カンマ演算子で検索してみな。 <>
Name_Not_Found<><>2020/03/14(土) 17:19:32.90 ID:cwqJKaIn.net<> >>421
>カンマ演算子
Great THX
なんと！ビックリ。こんなのあったのね！
[カンマ演算子 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator) <>
Name_Not_Found<>sage<>2020/03/15(日) 05:36:15.32 ID:???.net<> >>417
ダウンロードには、curl, wget をよく使う
プログラムなら、Ruby。
Node.js でも出来るかも <>
Name_Not_Found<>sage<>2020/03/15(日) 10:55:26.38 ID:???.net<> このようにruby使うと頭パーになります。 <>
Name_Not_Found<>sage<>2020/03/15(日) 14:46:27.02 ID:???.net<> そもそもダウンロードをする必要が本当にあるのか？
無駄に宇宙のエントロピーを増やしていないかその燃費の悪い頭でもう一度考えたほうが良い <>
Name_Not_Found<>sage<>2020/03/16(月) 04:27:01.37 ID:???.net<> Pythonが楽でいいよ <>
Name_Not_Found<><>2020/03/17(火) 09:16:10.25 ID:5Hjni/8H.net<> 24通りのペアが一組ずつとペアにならない1枚のカードの計49枚で7×7の神経衰弱を作りたいのですがどうすればいいでしょうか・・・？ <>
Name_Not_Found<>sage<>2020/03/17(火) 11:30:49 ID:???.net<> >>427
まあまあ簡単だよ
まずHTMLに
<h1>神経衰弱</h1>
<div id="concentration"></div>
だけ書いておく
JSはconcentration.jsという別ファイルにしておく
カードのデザインが必要なので24＋1枚の絵を
なんでもいいのでグラフィックソフトで描いて
出来たらそれを2枚印刷する
印刷できたら
それを切り抜いたら出来上がり
2枚目のジョーカーは切り抜かなくてOK <>
Name_Not_Found<><>2020/03/17(火) 13:09:35.99 ID:5Hjni/8H.net<> えーと・・・
できればそれをブラウザ上で行えるようにしたいのですが・・・ <>
Name_Not_Found<>sage<>2020/03/17(火) 14:13:34 ID:???.net<> このスレはこういうガイジが居着いてるから質問しない方がいい <>
Name_Not_Found<>sage<>2020/03/17(火) 14:27:31 ID:???.net<> >>429
まあ落ち着け気が早い、まだ続きがある
CSSで
body{ background: #006600;}
h1{ color: #ffffff;}
として
次にHTMLで、スマホ、タブレットに対応するために
<meta name="viewport" content="width=device-width">
と書いておく
これ現代のHTMLの常識だから
次にconcentration.jsをエディタで開く
エディタは出来る限り大きく開こう、なんならフルスクリーンで
かわりに HTMLは、iPad Proのような大きなタブレットでブラウザを開き表示させておく
こういう快適なコーデング環境を作るのは大事なんだプロはみんなやってる
そして、さっき切ったカードをタプレットの上に並べる <>
Name_Not_Found<>sage<>2020/03/17(火) 15:26:39.89 ID:???.net<> たしかにブラウザ上で行ってるが…
デスクトップのディスプレイだとカードが下に落ちるのでは？ <>
Name_Not_Found<><>2020/03/17(火) 17:41:38.36 ID:0bYIV2V0.net<> 答えてる方は当然ガイジだけど、質問してる方も聞き方が漠然とし過ぎてて、大概ガイジじゃん <>
Name_Not_Found<>sage<>2020/03/17(火) 18:38:25.49 ID:???.net<> >>429
作成済とかいう普通の神経衰弱のコードをまず出したらどう <>
Name_Not_Found<><>2020/03/17(火) 19:55:01.98 ID:5Hjni/8H.net<> https://www.dropbox.com/s/fz510z61lky6i7k/aaa.txt?dl=0
漠然とした聞き方になってしまいすみません。
これが製作した神経衰弱のコードの一部(javaのみ抜き出し)になります。 <>
Name_Not_Found<>sage<>2020/03/17(火) 20:09:18 ID:???.net<> 宣言せずに変数使ったりsetTimeoutに文字列渡したりとかなり懐かしい書き方してますなぁ <>
Name_Not_Found<><>2020/03/17(火) 20:23:59 ID:0bYIV2V0.net<> ダメだこいつ
発達障害の申し子じゃねーかw <>
Name_Not_Found<>sage<>2020/03/17(火) 22:10:03 ID:???.net<> >>435
90年代を思い出すコードだな
そしてJSでこのインデントルールを実際に使ってるのを見るのも
かなり久しぶりかも <>
Name_Not_Found<>sage<>2020/03/18(水) 00:16:38 ID:???.net<> >>435
そのリンクのソースコードを使わない方がよい。
変数にコメントが無いから、変数をどういう意味で使っているのか、他者には分からないから、
それを解析するだけで、時間を浪費するから、無視すべき！
アプリは、仕様書からプログラムになる。
プログラムから仕様書を推測するのは、逆行するから、極めて難しい
まず、仕様書を作って、変数の使い道を説明してから、プログラムを他人に見せること！
他人に、アプリの仕様を解析させちゃいけない！
そこが一番難しいから企業は、1人月百万円とか払うわけ
それに、Java じゃない！
JavaScript です！
他人のアプリを使わず、1行ずつコメントを付けて、自分でプログラミングしてください！ <>
Name_Not_Found<>sage<>2020/03/18(水) 01:11:33 ID:???.net<> >>435
おまいは https://mevius.5ch.net/test/read.cgi/hp/1577720324/899 かい、、、 <>
Name_Not_Found<>sage<>2020/03/18(水) 03:04:26.30 ID:???.net<> 特に、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]だけはペアにならないカードですとか、
こういうのを決めるのが仕様 <>
Name_Not_Found<>sage<>2020/03/18(水) 03:10:13.85 ID:???.net<> 流石に野に落ちてるコードに仕様書まで求めるのもなあ <>
Name_Not_Found<>sage<>2020/03/18(水) 05:03:30.79 ID:???.net<> 回答者がプログラムから、仕様まで推測して教えるのも、お門違い
だから、他人のコードのコピペは、ダメ！
質問者自身が仕様を分かっていないから、仕様の推測を誰かがしないといけなくなる
だから、自分自身で仕様を決めて書いたものしか、質問してはいけない！
他人のコードをコピペしたものは、質問者も仕様を分かっていないから、
ピンポイントで要点だけを抜き出せない
だから、全部のコードを貼って、誰か解析してくださいとなるw <>
Name_Not_Found<>sage<>2020/03/18(水) 05:42:23.31 ID:???.net<> >>439,441,443 は通称rubyキチガイと呼ばれるガイジ。
書き方がキモいのでレスの内容がぜんぜん頭に入ってこない。 <>
Name_Not_Found<>sage<>2020/03/18(水) 08:18:12.25 ID:???.net<> 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 <>
Name_Not_Found<>sage<>2020/03/18(水) 10:40:59.04 ID:???.net<> 最初から数字を全て確定させて配っておく必要はない
観測された時に１枚１枚確定させていけばいい <>
Name_Not_Found<>sage<>2020/03/18(水) 13:02:21.75 ID:???.net<> 俺もそう思った
麻雀ゲーム作るときのお約束 <>
Name_Not_Found<>sage<>2020/03/18(水) 13:08:07.83 ID:???.net<> 神経衰弱なら最初に初期化する設計で良さそう <>
Name_Not_Found<><>2020/03/18(水) 13:21:02.18 ID:ZSzyyMA+.net<> 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 はこんな感じで実装すれば良さそう <>
Name_Not_Found<>sage<>2020/03/18(水) 13:39:36.41 ID:???.net<> このスレって書き方からアルゴリズムまで手取り足取り教えてくれるスレだったの？ <>
Name_Not_Found<>sage<>2020/03/18(水) 13:41:04.28 ID:???.net<> jQueryなら教えるけど <>
Name_Not_Found<>sage<>2020/03/18(水) 13:54:58.29 ID:???.net<> 2015年、脱jQueryが叫ばれてから5年が経ちました。シェアは10%以上増えました。今年は0.2%増えてます
https://rosie.5ch.net/test/read.cgi/liveplus/1584507264/ <>
Name_Not_Found<>sage<>2020/03/18(水) 16:11:07.71 ID:???.net<> そう。
bootstrapは最新の５でようやく脱jQueryとあいなった模様。
ただwebの３分の１を占めるWordPressがデフォでガッツリjQuery入れてるからね。
今年のWordPressの伸びは0.2%どころじゃないから、そう考えるの単体での採用は減ってんだろうね。 <>
Name_Not_Found<>sage<>2020/03/19(木) 03:45:44.44 ID:???.net<> jQuery が含むものは、
1. Ajax
2. 各ブラウザ互換性のPolyfill
3. CSS・セレクターなどを便利に拡張したもの
4. 便利で汎用的な関数
これらを各々、分離してもよいとは思う。
多くの人が使いたいのは、2, 3
1はaxios、4はLodash へ分離できる <>
Name_Not_Found<>sage<>2020/03/19(木) 06:34:44.87 ID:???.net<> あのさぁｗ、slimビルドって知ってる？
なんでslimビルド版ができたかも。 <>
445<>sage<>2020/03/19(木) 08:20:59.04 ID:???.net<> >>445
の続き
cards の中身をシャッフルしたいのなら、Lodash のshuffle を使う
let new_cards = _.shuffle( cards );
console.log( cards.map( x => x.number ) ) // シャッフル前
console.log( new_cards.map( x => x.number ) ) // シャッフル後 <>
Name_Not_Found<>sage<>2020/03/19(木) 08:29:50.97 ID:???.net<> >>454
> 1はaxios、4はLodash へ分離できる
axiosは初見だが、「Supports the Promise API」が目的なら、Fetch APIで十分な気がした
https://github.com/axios/axios/blob/master/README.md
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API <>
Name_Not_Found<>sage<>2020/03/19(木) 08:39:41.73 ID:???.net<> lodash使うならそもそも_.range(50).map()が使えるぞ <>
445<>sage<>2020/03/19(木) 09:32:46.04 ID:???.net<> さすがに、配列内の要素のシャッフルを、自作する人は、いないでしょ
ライブラリを使わないと無理 <>
Name_Not_Found<>sage<>2020/03/19(木) 09:39:47.44 ID:???.net<> >>454
> jQuery が含むものは、
> 1. Ajax
すでに分離されている。
> 2. 各ブラウザ互換性のPolyfill
もとからjQueryはPolyfillを提供していない。
どのブラウザでも動く機能のみを使ってるだけ
> 3. CSS・セレクターなどを便利に拡張したもの
分離されてる。Sizzle。使いたければ単体で使える。
jQueryはSizzleを前提としてるから取り除くことはできない。
> 4. 便利で汎用的な関数
それはjQueryが自身が内部で使うために作られたもの
便利だからAPIとして提供しているが取り除くことはできないし
jQueryにとって意味がないものは実装されていない。
便利で汎用的な関数を充実させるプロジェクトではない <>
Name_Not_Found<>sage<>2020/03/19(木) 10:25:00.30 ID:???.net<> > どのブラウザでも動く機能のみを使ってるだけ
いいえ。たとえばquerySelector(All)を使えるときはそちらを使うようになっています。この時querySelectorが使えないブラウザの場合はsizzleが使われます。 <>
Name_Not_Found<>sage<>2020/03/19(木) 10:28:01.31 ID:???.net<> だからsizzleはどのブラウザでも動くだろ <>
454<>sage<>2020/03/19(木) 10:32:30.78 ID:???.net<> >>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 <>
Name_Not_Found<>sage<>2020/03/19(木) 10:55:14.27 ID:???.net<> >>463
それはPolyfillではありません <>
Name_Not_Found<>sage<>2020/03/19(木) 11:02:45.56 ID:???.net<> Polyfillっていうのは特定のブラウザにないAPIを
JavaScriptを使って互換APIを実装することだからな
Polyfillが使われるとブラウザが持ってるAPIが変化してしまう。
本来ないはずのAPIが何故かできてしまう。
自分でPolyfillライブラリを使って意識的にやってるならいいが
jQueryが勝手にブラウザの足りない機能を埋めてたりすると
余計なことすんなって言われる。だからそんなことはやらない。
jQueryはブラウザの標準機能を変えたりしない
似たようなことをして互換性問題を起こしたのがPrototype
その反省から生まれたjQueryはPolyfillを提供しない <>
Name_Not_Found<>sage<>2020/03/19(木) 13:28:49.35 ID:???.net<> >>459
大した手間でもなくない？
数行出し
ライブラリができる前から手で書いてたから
あんまり気にならんなあ <>
Name_Not_Found<>sage<>2020/03/19(木) 15:28:29.21 ID:???.net<> まあMath.random()で出た順番に入れ替えるだけ
みたいな簡単なやつならそうだわな
ポンコツの俺でも出来る <>
Name_Not_Found<>sage<>2020/03/19(木) 15:51:01.26 ID:???.net<> 初心者すぎて恐る恐るお尋ねします
【環境】Windws10、Firefox74 共に64bit版
下のコードをnewWin10、10.htmlまで繰り返したいのですが、
function openWin(){
newWin01 = window.open("hoge/01.html","newWin01","width=100,height=100");
newWin01.focus();
} <>
468<>sage<>2020/03/19(木) 15:54:19.92 ID:???.net<> 途中送信失礼しました
forで( var i = 01; i < 11; i++ )と書いた場合
01の0はそもそも返ってくるのか
iの値を記述の中にくっつけるにはどう書いたらよいのか不明でこちらに来てみました
ご教示いただければ幸いです <>
Name_Not_Found<>sage<>2020/03/19(木) 16:57:19.85 ID:???.net<> そもそもその i 使ってなくね？
俺の愛は使う相手がいないが… <>
Name_Not_Found<>sage<>2020/03/19(木) 16:58:56.77 ID:???.net<> >>469
数値リテラルつって、数字の書き方みたいなもんなんだが
01と書くと、それは8進数になる
まあ1だから十進数になおしても1なんだけど <>
Name_Not_Found<>sage<>2020/03/19(木) 17:02:33.36 ID:???.net<> >>469
('' + i).padStart(2, '0') <>
Name_Not_Found<>sage<>2020/03/19(木) 17:08:46.89 ID:???.net<> 連続でopenはブラウザで制限されてるだろどうせ <>
Name_Not_Found<>sage<>2020/03/19(木) 17:21:57.93 ID:???.net<> ブラクラやな <>
Name_Not_Found<>sage<>2020/03/19(木) 17:35:55.81 ID:???.net<> NAOシフト「著作権侵害です！」 <>
Name_Not_Found<>sage<>2020/03/19(木) 17:49:45.93 ID:???.net<> >>471
ありがとうございます <>
Name_Not_Found<>sage<>2020/03/19(木) 18:01:22.34 ID:???.net<> >>459
定番のFisher–Yates shuffleは自作したが、別段難しくなかった <>
Name_Not_Found<>sage<>2020/03/19(木) 22:39:36.72 ID:???.net<> >>477
その自作というのはどのレベル？
・なにもない所から自分で考え出した
・解説、数式から自分でコードを起こした
・すでにある他の言語のコードをJavaScriptに翻訳した
・すでにあるJavaScriptのコードを自分なりのコードで書き直した
・関数をコピーした
どれも自作だけど、レベルがぜんぜん違うよね <>
Name_Not_Found<>sage<>2020/03/19(木) 23:08:01.91 ID:???.net<> 言語から自作してろ <>
Name_Not_Found<>sage<>2020/03/19(木) 23:13:06.25 ID:???.net<> フィッシャーイェーツは
わりとみんなたどり着きやすいやり方じゃね？
一個ずつランダムに取り出すって <>
Name_Not_Found<>sage<>2020/03/19(木) 23:16:55.55 ID:???.net<> >>478
> ・なにもない所から自分で考え出した
Fisher–Yates shuffleと書いてるのに、なぜこの選択肢が出てくる？
> ・解説、数式から自分でコードを起こした
公式サイトにあるアルゴリズムをコードに起こしただけだから、これ
アルゴリズムからコード化はプログラマなら基本だろう？ <>
Name_Not_Found<>sage<>2020/03/19(木) 23:35:46.12 ID:???.net<> トランプランダムに並べろって言われたら
よく切って1枚置く、よく切って1枚置く…ってやるだろ普通
FYシャッフルてのはそれくらいありがちだ <>
Name_Not_Found<>sage<>2020/03/19(木) 23:54:06.22 ID:???.net<> >>481
アルゴリズムからコードを起こしたってことは
言語を置き換えたってことだよね？
それとも元のアルゴリズムにコードレベルのものはなかった？
それちゃんとテストした？バグがないことをどうやって証明してる？ <>
Name_Not_Found<>sage<>2020/03/20(金) 03:11:38.92 ID:???.net<> それが質問かな？
じゃあJS固有の話じゃないからよそでやってね。
ひとりで寂しいからってここで話し相手募るなジジイ。 <>
Name_Not_Found<>sage<>2020/03/20(金) 05:15:48.79 ID:???.net<> >>459
randamな位置の要素を取り出してくだけでいいじゃん <>
Name_Not_Found<>sage<>2020/03/20(金) 08:46:56.48 ID:???.net<> >>483
> アルゴリズムからコードを起こしたってことは
> 言語を置き換えたってことだよね？
関数一つ定義しただけで言語が書き換わるわけないだろ
ここまで頭が悪い奴とは思わなかった
> それとも元のアルゴリズムにコードレベルのものはなかった？
文章しかなかった
> それちゃんとテストした？バグがないことをどうやって証明してる？
テストした <>
445<>sage<>2020/03/20(金) 08:52:37 ID:???.net<> 自作するぐらいなら、Lodash などの多くで使われている、ライブラリを使う
自作は、テストが大変だし、
汎用的なものはできるだけ、ライブラリで済ませたい
webpack で、Lodashの個別の関数だけを読み込めるし、サイズも大したことないから <>
Name_Not_Found<>sage<>2020/03/20(金) 09:38:22.06 ID:???.net<> そうやって人の作った物使うだけだと
いつまで経っても自分で何か作ることなんて出来ないよお？ <>
Name_Not_Found<>sage<>2020/03/20(金) 09:40:08.74 ID:???.net<> >>483
> 言語を置き換えたってことだよね？
何その謎論理
アルゴリズムをなんだと思ってるの？ <>
Name_Not_Found<>sage<>2020/03/20(金) 17:19:25.78 ID:???.net<> Fisher–Yatesって制御構造の練習問題として使われてもおかしくないぐらいに単純じゃん
よく題材になるソートアルゴリズムよりも簡単
Fisher–Yatesすら実装出来ないレベルなら、「僕は日本語で説明されてもコードを書けないので、コピペコードをください」っていってるようなもの <>
Name_Not_Found<><>2020/03/20(金) 17:30:07 ID:9Qjbx9QY.net<> >>478
>・なにもない所から自分で考え出した
むしろそうでない方が優秀なんじゃね？
ふっつーのボンクラ初心者が頭ひねって考えて
最初に出てくるのはFY法だろう
少なくとも俺はそうだったわ <>
Name_Not_Found<>sage<>2020/03/20(金) 17:35:54 ID:???.net<> >>491
自分で考えてFY法に辿り着いたなら、君は十分優秀だよ <>
Name_Not_Found<><>2020/03/20(金) 17:44:40 ID:9Qjbx9QY.net<> >>492
えええええ
これより簡単に思いつくのってどんなの？ <>
Name_Not_Found<>sage<>2020/03/20(金) 22:43:43.45 ID:???.net<> localeCompareのusage:"sort"とusage:"search"て具体的に何が変わるん？ <>
Name_Not_Found<>sage<>2020/03/20(金) 23:10:45.07 ID:???.net<> >>493
世の中には>>459や>>483のような、無理と諦めて考えることを放棄する人間がいるのだよ <>
Name_Not_Found<>sage<>2020/03/21(土) 02:17:35 ID:???.net<> ID有りのスレにしない？
自演っぽいのばっかじゃん <>
Name_Not_Found<>sage<>2020/03/21(土) 06:36:04 ID:???.net<> もう今まで何十回もスレが分岐したから
それで淘汰されて残ったのがID無しのスレだから
歴史を繰り返すな <>
Name_Not_Found<>sage<>2020/03/21(土) 08:23:47.26 ID:???.net<> >>496
作ってくれても良いけど、少なくとも、2-3人は定住する人間がいないと機能しない
「誰かやれ」な感じなら、100%無理だと思う <>
Name_Not_Found<>sage<>2020/03/21(土) 11:21:19 ID:???.net<> >>496
自分が移動するのは簡単だが、他人を動かすのは難しい
頑張れ
+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/tech/1491143438/ <>
Name_Not_Found<>sage<>2020/03/21(土) 13:16:28 ID:???.net<> ※念の為に言っておくが、他のスレが出来たら
両方のスレに行くだけです。つまり俺のスレが増える。 <>
Name_Not_Found<>sage >>500を真似て無価値なオレオレ宣言をしてみるテスト<>2020/03/21(土) 13:41:03 ID:???.net<> 念の為にいっておくが、>>500は俺ではないからな <>
Name_Not_Found<><>2020/03/21(土) 18:36:51.44 ID:h2gmz7iG.net<> 自演疑われたくないならsageなきゃ良いだけじゃん
逆にそうしないのは自演だと思われても構いませんよってことだろう <>
Name_Not_Found<>sage<>2020/03/22(日) 03:51:06.20 ID:???.net<> まああげても自演って言うけどな！ <>
Name_Not_Found<>という無意味な主張は何度も見てきた<>2020/03/22(日) 08:46:09 ID:???.net<> 念の為にいっておくが、>>502は俺ではないからな <>
Name_Not_Found<>sage<>2020/03/22(日) 17:09:16.60 ID:???.net<> 念の為にいっておくが、>>504は俺ではないからな <>
Name_Not_Found<>sage<>2020/03/23(月) 08:18:27 ID:???.net<> >>502
以前、そう伝えたら、「やりたきゃ勝手にやれ。俺は一向に困らん。」といわれた
困らんのなら、「俺ではない」発言が不要なはずなんだけどな <>
Name_Not_Found <>sage<>2020/03/23(月) 14:13:04.45 ID:???0.net<> 画面の選択した文字列を翻訳するのに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;};
（長過ぎると出たので改行しています）
どうかよろしくお願いします <>
Name_Not_Found<><>2020/03/23(月) 15:23:46 ID:ZCb27jWc.net<> https://translate.google.com/?text={keyword}
↓
https://www.deepl.com/translator#en/ja/{keyword}
url に対応させないといけない <>
Name_Not_Found<><>2020/03/23(月) 15:31:08 ID:ZCb27jWc.net<> こんな感じか
(() => {
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ラベルつけて ↑ <>
507 (ﾜｯﾁｮｲ 4bda-JDns)<>sage<>2020/03/23(月) 16:35:27 ID:???0.net<> >>508-509
ご教授頂きありがとうございます
試した所ちゃんと翻訳する事が出来ました
助かりました、本当にどうもありがとうございました <>
Name_Not_Found<>sage<>2020/03/23(月) 16:53:48 ID:???.net<> ここで質問していい内容かどうかわからないのですがが、お知恵をお貸しください。
ttps://github.com/rymbau/polaroid-gallery
で配布されているフォトギャラリーを実装するJsvaScriptですが（リンク先で実例が見られます）、macのSafariでのみ、閲覧すると写真（および文字）がひどくぼやけます。ChromeやFirefox、iOSのSafaiでは問題なくクリアーです。
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
などを試してみましたが解決しません。何か解決策があるでしょうか？ <>
Name_Not_Found<><>2020/03/23(月) 17:57:34 ID:ZCb27jWc.net<> >>511
figure img {
image-rendering: -webkit-crisp-edges;
}
を入れたところくっきり表示されました <>
Name_Not_Found<><>2020/03/23(月) 17:59:22 ID:ZCb27jWc.net<> >>512 これは
公式のデモで検証した話です https://projects.glicer.com/polaroid-gallery/ <>
Name_Not_Found<>sage<>2020/03/23(月) 18:15:00 ID:???.net<> ありがとうございました！ <>
Name_Not_Found<>sage<>2020/03/23(月) 18:26:15 ID:???.net<> >>512, 513
早速ありがとうございます。私が試している画像では、レンダリングがされなくて、
かえって見にくくなってしましました（涙）。残念…。
検証画像でもそうなのですが、表示されているものをマウスでドラッグしてローカルに
取り込んで開いてみると、表示されているものよりだいぶ綺麗なんですよね。同じ webkit
でも、なぜ Mac の Safariだけ？ <>
Name_Not_Found<><>2020/03/23(月) 18:28:15 ID:ZCb27jWc.net<> demo ページで使われてる画像ダウンロードして試すとかどうですか？ <>
Name_Not_Found<>sage<>2020/03/23(月) 18:50:59 ID:???.net<> >>516
一応、ソースのパッケージにはデモのセットが入っているので、「image-rendering: -webkit-crisp-edges; 」
を入れて確認しました。確かにデモの写真ではぼやけは解消されていますね。
私が使っているのは線画なのですが、それだとこうはいかないみたいなんです。画像はどうやら
「解像度を調整」＋「レンダリング」という手順で処理されているみたいですが、線画だと
の前半の「解像度の調整」でかなり荒い画像になるみたいんです。
実はその処理はデモ画像中の文字にもかかっていて、ChromeやFirefoxで閲覧した画像と比べると、
フォントもかなりぼやけているのが見ていただけると思います。写真も綺麗になっているようには
見えますが、他のブラウザと比べるとやはり荒さが見て取れます。 <>
Name_Not_Found<>sage<>2020/03/24(火) 06:04:02 ID:???.net<> >>509
URL に文字列を入れるのなら、特殊文字をURI encode する必要があるのでは？ <>
Name_Not_Found<>sage<>2020/03/24(火) 07:44:03.73 ID:???.net<> letとvarの違いが分かんなくなっちまったから教えてくれん？
for(let i)とfor(var i)でメモリパフォーマンスに違いはあるんかね。
letはループ毎に変数生成されるからメモリに悪そうなイメージだけど実際の所どうなの？ <>
Name_Not_Found<>sage<>2020/03/24(火) 08:12:19.09 ID:???.net<> >>519
初心者＝計測せずにパフォーマンスがーといいだす
初心者＝実行速度しか見えてない <>
Name_Not_Found<>sage<>2020/03/24(火) 09:07:11.24 ID:???.net<> 今は、let
var は非推奨。
スコープの解釈が色々あって、バグるので難しい <>
Name_Not_Found<>sage<>2020/03/24(火) 09:13:43.03 ID:???.net<> gulpは、メソッドチェーンで書けるから、左から右へ読めるけど、
npm scripts は書きにくい
VSCode, Node.js, webpack, babel を使っているけど、
webpack-dev-server を使うのが普通なのか？ <>
Name_Not_Found<>sage<>2020/03/24(火) 13:15:53 ID:???.net<> >>521
varの関数スコープ以外の解釈はよ <>
521<>sage<>2020/03/24(火) 14:09:13.61 ID:???.net<> var は、巻き上げが起こるので、ややこしい
var x = 0;
function f ( ) {
console.log(x); //=> undefined
var x = 1;
}
f( ) <>
Name_Not_Found<>sage<>2020/03/24(火) 14:23:49.44 ID:???.net<> >>524
varの関数スコープ以外の解釈はよ
色々あるんだろ？早くしろノロマ
521 Name_Not_Found sage 2020/03/24(火) 09:07:11.24 ID:???
今は、let
var は非推奨。
スコープの解釈が色々あって、バグるので難しい <>
Name_Not_Found<>sage<>2020/03/24(火) 15:18:18.25 ID:???.net<> な？誰もパフォーマンスの問題なんて気にしてねーだろ？
パフォーマンス以外のもっと重要なことに目が行かない時点で
初心者なんだよ <>
Name_Not_Found<>sage<>2020/03/24(火) 16:02:21.22 ID:???.net<> chromeしか知らんけどlet, const実装から結構長い間varのほうが速かったよ。
今はlet, const有利な実装に切り替えたらしい。
要するに実装依存で、ループ毎に変数生成〜とかはあまり関係がない。
まだvarのほうが速い実装もあるかもしれない。
ちなみにconstが一番速い。
そしてその差は微々たるもの。 <>
Name_Not_Found<>sage<>2020/03/24(火) 17:36:35.33 ID:???.net<> 再代入したくないからconst
てかもう感覚がvarを拒否してる
lintでチェックするからどうでもいいけど
var使ってるエンジニアいたらビビるわ <>
Name_Not_Found<>sage<>2020/03/24(火) 18:36:01.30 ID:???.net<> >>523
>>520がいいたいことをいってた
> 初心者＝計測せずにパフォーマンスがーといいだす <>
Name_Not_Found<>sage<>2020/03/24(火) 18:36:34.28 ID:???.net<> >>528
今でもvar使ってるよ
顧客の環境がlet使えないやつなもんで <>
Name_Not_Found<>sage<>2020/03/24(火) 19:15:18.99 ID:???.net<> パフォーマンス気にするなら、速度を測れ <>
Name_Not_Found<>sage<>2020/03/24(火) 19:46:36.31 ID:???.net<> パフォーマンス気にしてletとvarの使い分けより、もっと他にパフォーマンスに気を遣うべき部分があるだろう <>
Name_Not_Found<><>2020/03/24(火) 21:52:38.47 ID:u/9I9+eD.net<> >>522
ワンライナーで書けないような複雑なことしたいときは
gulpfileみたいに別途jsを書いてファイルにして
それを実行してもいいんだぜ <>
Name_Not_Found<>sage<>2020/03/24(火) 22:29:39.59 ID:???.net<> >>532
それでは、>>519への答えにはならない <>
Name_Not_Found<>sage<>2020/03/24(火) 23:18:11.28 ID:???.net<> >>530
let使えない環境ってなんだよ
そもそもそういう問題じゃなくてbabelすればいいだろ <>
Name_Not_Found<>sage<>2020/03/25(水) 00:15:53.40 ID:???.net<> 質問とはまるで見当違いな部分でごちゃごちゃマウント取るアスペども(笑)
せめて回答叩き付けてから語るならまだしも、スレのレベルが低すぎる
及第点なのは527だけやな <>
Name_Not_Found<>sage<>2020/03/25(水) 00:33:23.68 ID:???.net<> 数字も出さないのに及第点って、及第点低すぎやろ <>
Name_Not_Found<><>2020/03/25(水) 02:32:29.24 ID:dreA59yx.net<> >>535
トランスパイルしたら結局varになっちゃうじゃん
letとvarの違いを問うているのであって
盲目的にletとconst使えって話ではなくね？ <>
Name_Not_Found<>sage<>2020/03/25(水) 04:08:51.64 ID:???.net<> >>538
結局varになるからなんなの？
結局アセンブラになるから、高級言語使う意味がないっていいたいの？ <>
Name_Not_Found<>sage<>2020/03/25(水) 07:26:52.04 ID:???.net<> >>536
ごちゃごちゃ言う前に自分で実測しろ <>
Name_Not_Found<>sage<>2020/03/25(水) 08:43:39 ID:???.net<> jsperfという便利なサービスがあってだな… <>
522<>sage<>2020/03/25(水) 11:14:47 ID:???.net<> 藻舞らを、プロと見込んで聞いているのに、
webpack-dev-server を使っている香具師は、いないの？
所感を希望 <>
Name_Not_Found<>sage<>2020/03/25(水) 11:40:06 ID:???.net<> >>542
各スレでのうんこruby駄文テロ辞めたら答えてやるよカス <>
Name_Not_Found<>sage<>2020/03/25(水) 12:58:36 ID:???.net<> 巻き上げはletでも起こる
そもそも変数とはスコープに属するものなのでそれが当たり前。
letは変数を初期化しないだけ。TDZは存在の巻き上げはが起こっていない範囲ではなく、存在するが初期化がまだな範囲。
何回言ったら理解してくれるんだろうな。 <>
Name_Not_Found<><>2020/03/25(水) 14:07:10.58 ID:n2aipQ6p.net<> >>539
そんなことは言ってないよ(´・ω・｀)
質問はvarとletはパフォーマンス的にどう違うの？って話じゃん？
まあパフォーマンスは置いとくとして、内部的にどう扱いが違うのか？ってことでしょ <>
Name_Not_Found<><>2020/03/25(水) 14:22:04 ID:n2aipQ6p.net<> >>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を使う！と考えずに
適切な変数宣言を行うと考えるのが良いです <>
Name_Not_Found<>sage<>2020/03/25(水) 14:24:33 ID:???.net<> とにかく極力const
どうしようもないときはlet使えばよくね
巻き上げ以上の仕様はマニアだけ読めばよくね？ <>
Name_Not_Found<>sage<>2020/03/25(水) 14:29:38 ID:???.net<> > 何回言ったら理解してくれるんだろうな。
人間の数 <>
Name_Not_Found<>sage<>2020/03/25(水) 14:31:19 ID:???.net<> >>545
今でもvarを使ってる理由は、顧客の環境がlet使えないから
って書いてあるだろ
パフォーマンスのためにvar使ってるなんて書いてないだろ
顧客の環境がlet使えないからvar使ってんなら
babel使えってことだろ <>
Name_Not_Found<>sage<>2020/03/25(水) 14:37:55 ID:???.net<> >>546
varのメモリパフォーマンスが良いことがあるんですね！
letやconstのメリットはよくわからないですが
パフォーマンスが良い方というのはわかります。
メモリパフォーマンスが良い方が適切な変数宣言ですものね！
と初心者は言う <>
Name_Not_Found<>sage<>2020/03/25(水) 15:06:30 ID:???.net<> 重い処理はvarやletを使い分けても重いままだぞお前ら
クソコードはクソコードのままなのを理解しろ <>
Name_Not_Found<><>2020/03/25(水) 15:34:37 ID:jZ/WHFF3.net<> 重い軽いの話はしてないです <>
Name_Not_Found<>sage<>2020/03/25(水) 16:19:03.52 ID:???.net<> varを使うメリットが有るのか？という話です。
答えは ない です。 <>
Name_Not_Found<><>2020/03/25(水) 16:24:59.01 ID:jZ/WHFF3.net<> なんでないのん？ <>
Name_Not_Found<>sage<>2020/03/25(水) 16:47:48.13 ID:???.net<> ちょっとでも勉強してたらvarがレガシーだということに気づくだろ <>
Name_Not_Found<>sage<>2020/03/25(水) 16:55:34.82 ID:???.net<> varを使うメリットがあるのか？という問いには答えられないが、
varでしか書けない書き方があるのか？という問いには答えられる。
答えはある。 <>
Name_Not_Found<>sage<>2020/03/25(水) 16:58:04.48 ID:???.net<> >>552
頭スポンジなの？
519 ：Name_Not_Found ：sage ：2020/03/24(火) 07:44:03.73 ID:???
letとvarの違いが分かんなくなっちまったから教えてくれん？
for(let i)とfor(var i)でメモリパフォーマンスに違いはあるんかね。
letはループ毎に変数生成されるからメモリに悪そうなイメージだけど実際の所どうなの？ <>
Name_Not_Found<>sage<>2020/03/25(水) 18:01:47.23 ID:???.net<> >>557
メモリパフォーマンスと
プログラムの重い軽いは根本的に別の話じゃね？
最高のパフォーマンスでもたくさん使ったら重いし
最悪なパフォーマンスでも少ししか使わなければ軽いし <>
Name_Not_Found<>sage<>2020/03/25(水) 18:42:35.63 ID:???.net<> メモリパフォーマンスの意味もわからんのかよ
ループ毎に変数生成されるとメモリに悪いんだぞ？
重いとかいう話じゃなくてメモリの書き込み回数が増えて
寿命がすぐに来るって話だろう <>
Name_Not_Found<>sage<>2020/03/25(水) 19:10:29.54 ID:???.net<> for文のことならletもconstも一つ分使い回してるよ。
違うと言うならそうなってない実装挙げてみろや。 <>
507 <>sage<>2020/03/25(水) 22:58:47.04 ID:???0.net<> すみません
前回の質問で、書いた通り選択文字列は書いて頂いた物で翻訳になりましたが選択していない時（ページ全体）も出来る様にしたかったんですけど元ので出来ていたので書くのを忘れていました
教えて頂いた物と見比べて出来ないかとやってみたのですがURLを置き換えたりしただけではやはりダメでした
選択していない時はページ全体の翻訳にしたい場合はどう修正すると可能でしょうか？
何度にもなりすみません <>
Name_Not_Found<>sage<>2020/03/25(水) 23:25:05.85 ID:???.net<> >>561
お前は誰だ！
というのはさて置き、あと丸投げはやめなよー
とりあえず、新しい方の翻訳サイトで何かページ丸ごと翻訳してみて
その時のURLをよーく見てみなよ
どこに対象となるページのURL入れればいいのかは
中学生でもわかるから <>
Name_Not_Found<>sage<>2020/03/25(水) 23:46:49.39 ID:???.net<> let はブロックスコープだから、すぐに解放されるけど、
var は関数スコープだから、使わなくなっても解放されない <>
Name_Not_Found<>sage<>2020/03/25(水) 23:51:19.83 ID:???.net<> >>561
ページ全体の翻訳は、Edge みたいに、URL を、Google 翻訳に渡すとかじゃないの？ <>
Name_Not_Found<>sage<>2020/03/25(水) 23:57:24.26 ID:???.net<> >>558-559
メモリを使い切ったらメモリ不足で落ちる時代なら分かるが、今時はメモリ不足なら速度低下だろ
メモリを使い切って速度低下しないんなら別にメモリ残量なんて気にしないわ <>
Name_Not_Found<>sage<>2020/03/26(Thu) 00:25:33 ID:???.net<> "apple"という文字列の中から三番目の文字を抜き出してコンソールに表示したい時、
const word = 'apple';
console.log(word[2]);
とすれば良いとドットインストールで解説されていました。
word[2]というような書き方のことを何というのでしょうか？
「文字列 番目 抜き出し」と検索するとstring やらchaAtなどばかり出てきます。 <>
Name_Not_Found<>sage<>2020/03/26(Thu) 00:25:49 ID:???.net<> 翻訳ならDeepLがすごいよ。翻訳精度グーグル越えたよ。 <>
Name_Not_Found<>sage<>2020/03/26(Thu) 00:26:58 ID:???.net<> ブランケット記法。避難所でもあたたかくして眠れる。 <>
Name_Not_Found<>sage<>2020/03/26(Thu) 03:23:48 ID:???.net<> Lintがすべてを解決してくれるはずだ <>
Name_Not_Found<>sage<>2020/03/26(木) 06:33:33.76 ID:???.net<> 配列などの数字インデックスだろ
それが文字列に対しても、出来るのだろ <>
Name_Not_Found<>sage<>2020/03/26(木) 07:12:19.88 ID:???.net<> >>566
プロパティアクセスのブランケット版 <>
Name_Not_Found<>sage<>2020/03/26(Thu) 09:26:46 ID:???.net<> >>568はネタで書いてるのがわかる
>>571は中学英語からやり直せ <>
566<>sage<>2020/03/26(木) 10:40:14.62 ID:???.net<> 調べてみたらブラケット記法ですね！
ありがとうございました！
勉強します！ <>
Name_Not_Found<>sage<>2020/03/26(木) 12:53:34.09 ID:???.net<> >>573
違う。
そもそも仕様ではその記法独自の名前は定められていない。
色んな人が他言語の用語を持ち出したり好き勝手に読んでるだけ。
なんにでも正解があると思うな。 <>
Name_Not_Found<>sage<>2020/03/26(Thu) 13:31:12 ID:???.net<> >>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だけでも十分一般的な用語であることは分かる。 <>
566<>sage<>2020/03/26(木) 14:25:07.18 ID:???.net<> >>574
なるほど！
MDNを見てたら詳しく書いてあるページをみつけました。
勉強します！ <>
566<>sage<>2020/03/26(木) 14:26:20.84 ID:???.net<> >>575
まさにこのページを見てたところです！ <>
Name_Not_Found<>sage<>2020/03/26(木) 14:56:50.68 ID:???.net<> ブランケット着ろう <>
Name_Not_Found<>sage<>2020/03/26(木) 16:06:05.45 ID:???.net<> bodyの内容をとりあえずすべて取得したい場合って
var text = document.body;
return text;
だけで可能ですか？ 他の書き方になるようでしたら
教えていただけるとありがたいです。 <>
Name_Not_Found<>sage<>2020/03/26(Thu) 16:37:34 ID:???.net<> DOM要素ではなくテキストだけ取りたいなら
document.body.textContent
ブラウザの開発ツールのコンソールで試すことを覚えましょう <>
Name_Not_Found<>sage<>2020/03/26(Thu) 22:03:55 ID:???.net<> >>575
それは仕様ではないNOTEだ <>
Name_Not_Found<>sage<>2020/03/26(Thu) 23:37:37 ID:???.net<> >>575
仕様なら、Property Accessorsが正しい
というか、なぜ今更、6.0仕様なんだ？ <>
Name_Not_Found<>sage<>2020/03/27(金) 04:41:08.37 ID:???.net<> 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 では、煩雑だからやらない <>
Name_Not_Found<>sage<>2020/03/27(金) 05:38:49.47 ID:???.net<> お前の人生に比べたらよっぽど簡素だと思うが <>
Name_Not_Found<>sage<>2020/03/27(金) 09:52:41.59 ID:???.net<> 普通は（クソ雑魚老害プログラマ業界では） <>
Name_Not_Found<>sage<>2020/03/27(金) 11:23:09.32 ID:???.net<> >>582
Property Accessorsの節でドット記法とブラケット記法の二種類ありますという説明がされてるんだが。
脳みそ大丈夫？
「人間」の節に男と女がいますと書かれていて、「女」は説明に書かれているだけだ！正しくは人間だ！という主張に何の意味がｗ <>
Name_Not_Found<>sage<>2020/03/27(金) 12:38:28.08 ID:???.net<> >>586
お前が大丈夫か?
国語辞書にもコラムや著者のコメントが載っているが、
そこに書いてある文章の中身まで日本の標準的な価値観や意味合いを反映しているかというとそれは保証されていないだろ
noteっていうのは砕けた解説なんだから、よくESを知らない人向けのコメントでもあるし、
他の言語界で使われている俗語をもって親切に解説してあるんだろ
それがプログラミングとしてよく使われている言い方だと言って、JS界の仕様として正式なものかというとそうはならないだろ <>
Name_Not_Found<>sage<>2020/03/27(金) 14:23:18.31 ID:???.net<> 質問 人間のマンコ付いてるほうは何と言うのですか？
答１ 女。
答２ 女は間違い！正しくは人間！ <>
Name_Not_Found<>sage<>2020/03/27(金) 19:23:54.36 ID:???.net<> >>586
その表現を使うなら、「Property Accessorsのbracket notation」を使え
bracket notationにProperty Accessorsを内包する意味はない
で、古い6.0を持ち出すのはなぜだ？ <>
Name_Not_Found<>sage<>2020/03/27(金) 22:27:52.24 ID:???.net<> 俺が6.0が好きだからだが？
俺が俺の頭と手を俺の解説を書くのにお前に横槍を入れられないといけない理由はなんだ？ <>
Name_Not_Found<>sage<>2020/03/27(金) 22:43:35.22 ID:???.net<> >>590
お前の態度が気に入らないから <>
Name_Not_Found<>sage<>2020/03/27(金) 22:44:23.95 ID:???.net<> ゴミカス糖質>>589の回答（笑）は>>574 。
当然質問者は満足せず、賢く受け流してMDNに行ったと言うのにお前らときたらまだ相手してるのか… <>
Name_Not_Found<>sage<>2020/03/27(金) 22:46:59.41 ID:???.net<> よく知らないからケチだけつけてレスバで遊んでるだけ <>
Name_Not_Found<>sage<>2020/03/28(土) 06:42:09.80 ID:???.net<> >>592
違う。勝手に思い込むな。
俺は>>574だが>>589ではない。 <>
Name_Not_Found<>sage<>2020/03/28(土) 12:42:26.33 ID:???.net<> >>592は事実を捏造して逃げてるだけ <>
Name_Not_Found<>sage<>2020/03/28(土) 14:09:21 ID:???.net<> 事実を捏造（笑） <>
Name_Not_Found<>sage<>2020/03/28(土) 20:23:56.36 ID:???.net<> 自分で作ったライブラリのドキュメントを作りたいのですが
なんかいいテンプレートないですかね
jsなのでその場で例を実行できる項目付きの <>
Name_Not_Found<>sage<>2020/03/29(日) 11:07:59.52 ID:???.net<> yomanでライブラリのジェネレーターがあるからそれを参考にするといい <>
Name_Not_Found<>sage<>2020/03/29(日) 11:11:46.82 ID:???.net<> jsならgenerator-nmとかかな
サンプルはcodesandboxがあると親切 <>
Name_Not_Found<>sage<>2020/03/29(日) 11:25:41.52 ID:???.net<> >>596
図星過ぎてもはや笑うことしかできないよな <>
Name_Not_Found<>sage<>2020/03/29(日) 11:47:03 ID:???.net<> ここはCoqスレじゃないぞ <>
Name_Not_Found<>sage<>2020/03/29(日) 11:53:45 ID:???.net<> Coqスレよりよっぽど質が悪いでしょ
プログラマなんてのは陰湿で粘着質な奴が多いのだから <>
Name_Not_Found<>sage<>2020/03/29(日) 11:57:57 ID:???.net<> yomanで生成されたドキュメントなんて
（省略されました） <>
Name_Not_Found<>sage<>2020/03/29(日) 16:56:40 ID:???.net<> そもそもドキュメントが必要なライブラリは出来が悪い証拠
使うのはプログラマなんだから、よっぽど変な書き方して無ければソースコードを読めば分かる <>
Name_Not_Found<>sage<>2020/03/29(日) 17:41:38 ID:???.net<> じゃあお前の作った糞ライブラリ見せてみろよｗ
バカにしてやるからｗｗ <>
Name_Not_Found<>sage<>2020/03/29(日) 20:40:11 ID:???.net<> JSのバックエンドのフレームワークで一番シェアあるのってなんですか？ <>
Name_Not_Found<>sage<>2020/03/29(日) 20:45:36 ID:???.net<> 今でもまだexpress <>
Name_Not_Found<>sage<>2020/03/29(日) 20:46:32 ID:???.net<> >>607
あーレガシーなのじゃなくてこれからの鉄板のやつあります？ <>
Name_Not_Found<>sage<>2020/03/29(日) 21:18:35 ID:???.net<> >>608
あるけどシェア割れてるからどれも鉄板とは言えないなぁ…
express後継風味ならkoajsやhapijs
他言語でよくあるMVC風味ならnestjs
bff用途で必要な機能さえありゃいいならnextjs
とか調べてみたら？ <>
Name_Not_Found<>sage<>2020/03/29(日) 21:22:12 ID:???.net<> >>605
バカにしたのではなくて
ドキュメントよりも中身に拘れば良いという
励ましのアドバイスのつもりだったんだが
そうカッカするなよ <>
Name_Not_Found<><>2020/03/29(日) 21:22:23 ID:Ynm6Bb3M.net<> やっぱ割合はまだ多いんだなexpress <>
Name_Not_Found<>sage<>2020/03/29(日) 21:50:13 ID:???.net<> >>609
あざっす
調べてみます <>
Name_Not_Found<>sage<>2020/03/30(月) 00:48:36 ID:???.net<> >>596
>>592の1行目は憶測or願望だろ <>
Name_Not_Found<>sage<>2020/03/30(月) 00:53:35 ID:???.net<> バレたのそんなにビックリしたのかな？ｗｗ
常人から見たらバレバレなのに糖質だと「完璧に隠しているのにバレるはずがない！当てずっぽうだ！」となって攻撃に転じるわけね…はは、おもしろいね。 <>
Name_Not_Found<>sage<>2020/03/30(月) 05:55:55 ID:???.net<> WEB AUDIO APIのcreateScriptProcessorでバッファサイズだけじゃなくてバッファ数を設定する方法ってありますか？
標準のバッファ数が恐らく2？でレスポンスを早めようとサイズ小さくするとバッファ切れが酷いので <>
Name_Not_Found<>sage<>2020/03/30(月) 06:30:46.89 ID:???.net<> >>614
バレるも何も大間違いだから
自分の妄想を思い込むのは勝手にどうぞだが
嘘を撒き散らすのは控えたほうが良いよ <>
Name_Not_Found<>sage<>2020/03/30(月) 08:33:32.18 ID:???.net<> ﾌﾌｯ <>
Name_Not_Found<>sage<>2020/03/30(月) 09:59:43.70 ID:???.net<> >>592は逃げただけ
否定箇所を作り出す事でしかレス出来ない人なんでしょ <>
Name_Not_Found<>sage<>2020/03/30(月) 10:04:44.40 ID:???.net<> よっぽど痛いところ突かれたんだろなｗ
糖質にしても執着はんぱないｗ <>
Name_Not_Found<>sage<>2020/03/30(月) 10:51:31.62 ID:???.net<> いい加減見るに耐えないんだが <>
Name_Not_Found<>sage<>2020/03/30(月) 12:41:25.28 ID:???.net<> 本人が本当に違うって言ってんのに
頑なに信じないんだから救いようが無いわな <>
Name_Not_Found<>sage<>2020/03/30(月) 14:19:31.34 ID:???.net<> 私は嘘つきですとは言わんわな <>
Name_Not_Found<>sage<>2020/03/31(火) 02:03:00.51 ID:???.net<> 要素を生成するときはcreateElementとcreateTextNodeを使うとXSS対策になると見ました。
現在掲示板を作成しており、ajaxでPOSTした投稿にレスアンカーやリンクを組み込もうとしています。
この場合、pをcreateElementで生成してTextNodeでレスを流し込み、正規表現とreplaceで
一致する箇所をアンカーに置換してしまってもセキュリティ的に問題ないのでしょうか？
もしくはレスをsplitで分割、searchでインデックスを取得してa要素をcreateElementで生成し…
といった感じで地道に書いていくべきなのでしょうか？ <>
Name_Not_Found<>sage<>2020/03/31(火) 06:38:26.62 ID:???.net<> >>622
相手の言うことを一言も信じないのなら
何のつもりでここで会話しに来てるんだ？ <>
Name_Not_Found<>sage<>2020/03/31(火) 09:58:46 ID:???.net<> 糖質ｗ <>
Name_Not_Found<>sage<>2020/03/31(火) 09:59:27.51 ID:???.net<> XSS対策はユーザからもらった文字列をエスケープしなきゃ
createElementにその機能があるとは思えないけど <>
Name_Not_Found<>sage<>2020/03/31(火) 10:23:40 ID:???.net<> >>623
バックエンドでXSS対策（主にエスケープ）した後
その文字列をフロントでツールチップ的に処理してしまえばいいのでは <>
Name_Not_Found<>sage<>2020/03/31(火) 11:48:35.70 ID:???.net<> >>623
おまえはまず、自分でXSS攻撃をしてみろ
どうやればXSS攻撃を成功させられるか考え抜くんだ <>
Name_Not_Found<>sage<>2020/03/31(火) 12:45:16.17 ID:???.net<> 投稿はテキストとして保存
リアルタイムでリンク化する
そうすればバグがあっても対処しやすい <>
Name_Not_Found<>sage<>2020/03/31(火) 12:54:06.15 ID:???.net<> >>626
説明不足ですみません。
投稿はphpでエスケープした後、json_encodeを使いつつecohしています。
その戻り値からレスアンカーやリンク形式に一致するものに処理をしたいといった感じです。
>>627
ツールチップ的とはどういうことでしょうか？
少しググりましたが、ヒント表示みたいな内容でした・・・
>>628
まだうっすらとしか理解できておらず、理解する前にお作法的に対象するすべを学びたいです。 <>
Name_Not_Found<>sage<>2020/03/31(火) 13:02:27.31 ID:???.net<> 他のコミュニティでは質問者に対して徹底されてるけど
CodeSandboxなりで最小限のサンプルコード用意しないと
いつまでも回答者との理解の差がある気がする <>
Name_Not_Found<>sage<>2020/03/31(火) 13:30:39.67 ID:???.net<> >>630
> 理解する前にお作法的に対象するすべを学びたいです。
プログラミングの世界に「お作法」なんてものはありません。
そういうのは「バッドノウハウ」というんですよ <>
Name_Not_Found<>sage<>2020/03/31(火) 13:34:47.87 ID:???.net<> また糖質ｗ <>
Name_Not_Found<>sage<>2020/03/31(火) 18:23:24.25 ID:???.net<> >>633
馬鹿の一つ覚え <>
Name_Not_Found<>sage<>2020/03/31(火) 18:50:57 ID:???.net<> >>630
例えば5chは5ch側のサーバーでXSS対策したりエスケープしたり安価リンク処理してるけど
質問の場合は不確定要素が多いので、その上で簡易かつ強固にXSS対策するとなると
エスケープ処理の部分だけをバックエンドでやって
あとは全部クライアント側でやっちゃうってこと
phpならXSS攻撃耐性の高いエスケープ処理もあったはず <>
Name_Not_Found<>sage<>2020/03/31(火) 19:57:44.85 ID:???.net<> ＞投稿はphpでエスケープした後、
てかもともとクライアント（JS）でphp側のエスケープ以外は処理しようとしてたのね
だったらほぼ心配する部分はないのでは
＞createElementとcreateTextNodeを使うとXSS対策
はよくわからない <>
Name_Not_Found<>sage<>2020/03/31(火) 22:02:35.99 ID:???.net<> そもそもXSSなんてこれっぽっちも気にする必要がない
掲示板なんて荒らされるときは如何様にも荒らされるのだから
その掲示板とやらに金銭や大きな価値が絡んでいないのなら
気にする方が人生の時間の無駄使いという奴
しなくても良いことはできるだけしないで楽して生きなきゃ
一方もし価値のある掲示板だというのなら
そりゃバックエンドから丸ごと著名なサービスを利用するか
せめてフレームワークを活用するべきであって
プログラマ１人が責任を負うようなことではない
XSSを気にしていいのは、そういうことが好きで興味があるやつだけ
もし興味関心があるならもっと自分で考えて調べろ <>
Name_Not_Found<>sage<>2020/04/01(水) 03:45:14.33 ID:???.net<> フロント側なんてユーザーが書き換え可能なんだからクラック対策するだけ無駄 <>
Name_Not_Found<>sage<>2020/04/01(水) 05:38:34.13 ID:???.net<> Ruby on Rails では、ERB テンプレート内の、<%= Rubyの式 %> が、
デフォルトで、HTML エスケープされて、HTMLへ変換されるから、何も考えなくてよい <>
Name_Not_Found<>sage<>2020/04/01(水) 09:50:22.57 ID:???.net<> >>639はデマ
だから「お作法」＝何も考えたくないバカでーす。唯一の正解だけを使いたいんでーす。
ってなるやろって言ってる <>
Name_Not_Found<>sage<>2020/04/01(水) 09:56:23.48 ID:???.net<> プログラマの三大美徳もいいけどHRTも大切にしような… <>
Name_Not_Found<>sage<>2020/04/01(水) 11:09:43 ID:???.net<> ホルモン補充療法？ <>
Name_Not_Found<>sage<>2020/04/01(水) 14:19:17.56 ID:???.net<> バイナリデータの読み方が判りません
目的のデータの位置が決まっているなら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)などと書いてるのですがもっといい方法はないでしょうか
よろしくお願いします <>
Name_Not_Found<><>2020/04/01(水) 15:09:44.34 ID:dlPBsrMJ.net<> 配列のマッチングについて書き方が改善されるだけですが
array.findIndex と every を使う方法はあります
https://repl.it/@vip0/arrayfind <>
Name_Not_Found<>sage<>2020/04/01(水) 18:05:00.98 ID:???.net<> >>643
直前2つを記憶する方が効率的じゃない？ <>
Name_Not_Found<>sage<>2020/04/01(水) 18:10:54.41 ID:???.net<> >>643
結局この書き方がほぼベストに速いんだよな
ほかはこれに毛が生えた程度の違いしかない
わずかな速度の違いが肝になるならともかく
可読性を考えたら変なロジックはやめとこうぜ <>
Name_Not_Found<>sage<>2020/04/01(水) 18:56:44.83 ID:???.net<> 可変に対応してるから
>>644
この書き方でよくね <>
Name_Not_Found<>sage<>2020/04/01(水) 19:19:12.89 ID:???.net<> >>643
ポインタを用意するのはデコーダやエンコーダの基本
嫌なら簡単な関数でポインタ操作を隠蔽すればいい
例えばread(4)を呼べば4byte分進めてくれるなど <>
Name_Not_Found<>sage<>2020/04/02(木) 01:56:55.78 ID:???.net<> JSONに関しての質問なんですが
"Afghanistan": [
{
"date": "2020-1-22",
"population": 2000000
},
"America": {
"date": "2020-1-22",
"population": 2000000
},
...........
みたいな国情報がずらっと並んだJSONデータがあったとして、
この国名のキーを文字列で取り出すにはどうコーディングしたらいいんでしょうか？
fetchで取り出して
.then(data => {
data[なんか].forEach(({なんか}) =>
console.log(`${なんか}`)
);
});
みたいな感じでコーディングして全部の国名をずらっと取り出せたらなと思ってるんですが… <>
Name_Not_Found<>sage<>2020/04/02(木) 02:02:34.07 ID:???.net<> あ、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
}
],
........... <>
Name_Not_Found<>sage<>2020/04/02(木) 02:15:22.16 ID:???.net<> 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"] <>
Name_Not_Found<>sage<>2020/04/02(木) 02:17:26.53 ID:???.net<> .then(response => response.json())
.then(data => Object.keys(data).forEach(key => console.log(key)); <>
Name_Not_Found<>sage<>2020/04/02(木) 02:38:32.41 ID:???.net<> >>651
>>652
できました！ありがとうございます！
ついでに聞きたいのですが、例えばAmericaというキーの値に二つの子が並んでますが、
この最後の子だけ取り出す関数ってあったりしますか？
最後の子の中に二つの値が入ってるのでそれを取り出したくて
"2020-1-23"
2000000
確かPHPかなんかだとlastChildとかfirstChildみたいな書き方で末尾とか先頭を取り出せたので
同じことが出来るかなと <>
Name_Not_Found<><>2020/04/02(木) 02:52:38.84 ID:1SguImRe.net<> 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 <>
Name_Not_Found<>sage<>2020/04/02(木) 13:53:16.06 ID:???.net<> >>654
ああなるほど、lengthで数にアクセスできて番号指定も使えるんですね
基本的な文法が勉強不足でした、ありがとうございます <>
Name_Not_Found<>sage<>2020/04/02(木) 20:19:42.91 ID:???.net<> >>644
アロー関数は互換性の問題がありそうで使っていなかったのですが今は割と使えるんですね
>>645
確かにそうかもしれません
バイナリというか連続したデータを取り出して扱うのは初めてだったので
>>646,648
もっと便利な方法が用意されているのではないかと思ったのですが、だいたいこんな感じなんですね
参考になりました ありがとうございます <>
Name_Not_Found<>sage<>2020/04/02(木) 21:53:12.39 ID:???.net<> >>631
失礼しました。
ググってみたところ、少し調べないと扱えなさそうなので合間をみて勉強してみます！
>>635-636
エスケープはhtmlspecialcharsしか使ってませんでした。
強力なエスケープもあるのですね。ググってみます。
バックエンド側でエスケープをかますしておけば、ajaxで渡した返り値は
安全と考えてよいということでしょうか？
であれば、クライアント側でreplaceと正規表現で対応できそうです！
>createElementとcreateTextNodeを使うとXSS対策
ソースのURL見失ってしまいました…
PHPでaタグを設置してcreateTextNodeを利用すると、タグが文字列になっていましたので
エスケープされているっぽいです。なのでXSS対策になるってことなのかと理解していました。 <>
Name_Not_Found<>sage<>2020/04/03(金) 08:18:33 ID:???.net<> >>656
善し悪しにも判断要素が複数ある
例えば、パフォーマンス視点なら、「同じプロパティを複数回参照するのは無駄」なので、「要素値を変数にキャッシュ」が原則
自分が期待する動作と優先順位を考えて、質問で触れるべきだ <>
Name_Not_Found<>sage<>2020/04/03(金) 10:45:07.38 ID:???.net<> > 例えば、パフォーマンス視点なら、「同じプロパティを複数回参照するのは無駄」なので、「要素値を変数にキャッシュ」が原則
パフォーマンスに問題が起きてないなら、絶対にやるな。 <>
Name_Not_Found<>sage<>2020/04/03(金) 12:21:52.76 ID:???.net<> ワードプレス使用者です。質問させていただきます。
プラグインで『Rich Table of Contents』と言う目次作成ソフトをインストールしましたが、目次をタップすると、ページ上部のタイトルにスクロールされてしまいます。
HTMLを確認したところ、すべてのhタグにid＝〇〇が入っており、id＝〇〇を消すことで、目次が正常に動作します。
手動で全部消すのはめんどくさいのですが、一括で消す方法、またはCSSなどでうまく手間かけずに直すことは出来るでしょうか？ <>
Name_Not_Found<>sage<>2020/04/03(金) 12:49:03.73 ID:???.net<> >>657
分かってないな
危険にしているのは文字列ではなく、それを扱う側だ
だからいくらHTML的やらなんやらエスケープしようと扱う側がどう扱うかによっていくらでも危険になりうる。
例え自分の扱うコード内で安全に完結していても、ライブラリやフレームワークが後からその値を参照して扱う事だってある。
そのときにそのライブラリやフレームワークの脆弱性を付かれるかもしれない。
だから切りがないのでどうしても心配なら簡単にできる緩和策を勝手にやってくれる物に頼っとけ。 <>
Name_Not_Found<>sage<>2020/04/03(金) 14:43:52 ID:???.net<> >>660
jQuery なら、これで全てのid が消える
$( "h1, h2, h3, h4, h5, h6" ).each( function( ) {
$( this ).removeAttr( 'id' )
} ); <>
Name_Not_Found<>sage<>2020/04/03(金) 14:59:01.06 ID:???.net<> 別のTOCと競合してるのでは？
目次リンクにしたいならidがないと動かないと思うけど <>
Name_Not_Found<>sage<>2020/04/03(金) 16:18:35.60 ID:???.net<> >>662>>663ありがとうございます。
競合の、可能性もあるんですね。もう何から調べてみたら分からなくなってますw
プラグイン「Table of Contents Plus」だと問題なく動作するんですが、「RTOC -Rich Table of Contents-」だとid＝〇〇が入ってるhタグだけ上にスクロールされちゃうんですよね‥。 <>
Name_Not_Found<>sage<>2020/04/03(金) 18:58:08 ID:???.net<> >>659
オレオレ定義の絶対主義者か <>
Name_Not_Found<>sage<>2020/04/04(土) 09:15:07.58 ID:???.net<> 一言命令は絶対信用しないから安心していい <>
Name_Not_Found<>sage<>2020/04/04(土) 11:35:15.64 ID:???.net<> 一言命令って>>666みたいなもののこと？ <>
Name_Not_Found<>sage<>2020/04/04(土) 11:57:48 ID:???.net<> >>667
>>666のどこが「命令」なんだ？ <>
Name_Not_Found<>sage<>2020/04/04(土) 13:12:20.86 ID:???.net<> 一言命令は>>659のことだろ
命令形というのがあってだな... <>
Name_Not_Found<>sage<>2020/04/04(土) 20:13:51.58 ID:???.net<> 値の個数が同じ複数の配列をまとめた二次元配列があり、それぞれの配列の1つ目の値を比較し昇順に並び替えたいのですが、それって可能ですか？ <>
Name_Not_Found<>sage<>2020/04/04(土) 20:37:22.31 ID:???.net<> ここは宿題代行所でもなければ、アルゴリズム研究会でもありません
例え答えがこっそり欲しくとも、可能かどうか？とか馬鹿な聞き方はやめなさい
配列の1つ目の値を比較し昇順に並び替えたいのなら、
配列の1つ目の値を比較し昇順に並び替えればいいではないですか
分かっているとは思いますが、不可能なことはありません
少なくともあなたができることは機械でもできると考えなさい
具体的にどうするかは自ら学びなさい
ここは漠然とした質問をするところではありません。
最低限自ら学べる人、つまり具体的に問題を解決していける人が
どうしても具体的に困ったときに質問する場所です。 <>
Name_Not_Found<>sage<>2020/04/04(土) 20:41:50.44 ID:???.net<> >>671
ありがとうございます！ sortでできました。 <>
Name_Not_Found<>sage<>2020/04/04(土) 20:48:07.81 ID:???.net<> なんで誰もサンプルコードはらねえんだよ
問題を絞り込めて整理できるのに <>
Name_Not_Found<>sage<>2020/04/05(日) 08:50:59.72 ID:???.net<> 質問者がコード貼ってないのに回答者が想像で貼っても仕方ないでしょ
俺たちは質問者のママ・パパではないのだから
質問者が抱える問題を絞り込むのは当然質問者の責任であって
こういう答えが欲しいから、その答えが帰ってくるであろう
しっかりした具体的な質問をするまでが質問者の責任であって
回答者が悩む状況は本来おかしいからな
勿論本当のやる気のある右も左も分からない初心者だと感じれば
導いてあげることも吝かではないが、
１行の質問かどうかも分からないような投げかけレスに
そこまで親切にしてあげようという気持ちは沸かないだろう
良い回答をしてほしいなら、良い回答が付くような良い質問をしなければならない <>
Name_Not_Found<>sage<>2020/04/05(日) 10:07:35.59 ID:???.net<> ごめん>>673は質問者がコード貼らないことに対する意見 <>
Name_Not_Found<>sage<>2020/04/05(日) 11:26:15.17 ID:???.net<> 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] <>
Name_Not_Found<>sage<>2020/04/05(日) 12:49:54.86 ID:???.net<> rubyすげえ
俺もスマブラスレでモンハンの素晴らしさ語ってくるわ <>
Name_Not_Found<>sage<>2020/04/05(日) 13:02:06.70 ID:???.net<> rubyの何がイヤって、厨二病ぽい名前がイヤ
pythonもだが <>
Name_Not_Found<>sage<>2020/04/05(日) 13:31:14.20 ID:???.net<> [ [ 51, 52 ], [ -11, -12 ], [ 31, 32 ] ]
なら
[ [ -11, -12 ], [ 31, 32 ], [ 51, 52 ] ]
にソートしたいってことじゃないの <>
Name_Not_Found<>sage<>2020/04/05(日) 13:50:32.29 ID:???.net<> そうですよ？ <>
Name_Not_Found<>sage<>2020/04/05(日) 14:10:02.27 ID:???.net<> 普通に考えて1つ目の要素の比較でほぼほぼ順序が決まるのに
特にサーバサイド言語で常に全比較するコードを書いちゃう人はセンスが無い <>
Name_Not_Found<><>2020/04/05(日) 14:14:01.91 ID:srYKtxU/.net<> 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
あとテストケースにムラがあったので追加した <>
Name_Not_Found<>sage<>2020/04/07(火) 11:02:10.65 ID:???.net<> えっ、丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
２ちゃんだからって、何でも許されるわけとちゃうやろ・・・
JSやってる奴って基本こういうイメージ、怖い・・・ <>
Name_Not_Found<>sage<>2020/04/07(火) 11:11:22.08 ID:???.net<> それ好き
例のなんか嫌儲感あるよな <>
Name_Not_Found<>sage<>2020/04/07(火) 19:20:40 ID:???.net<> >>683
JS質問者にそういうイメージある
そのコードをお前自身で説明してみろ、といいたくなる場面が多い <>
Name_Not_Found<>sage<>2020/04/07(火) 19:56:24 ID:???.net<> 分かってないやつが質問しに来てるからな
普通の質問所ならそれでいいんだろうが
ここわ泣く子も黙る2chだからな <>
Name_Not_Found<>sage<>2020/04/07(火) 20:31:48.59 ID:???.net<> 質問です。
一度処理したものは以降処理せずに、
複数のファイルで使いまわすにはどうすればいいでしょうか？
だいぶ端折ってますが、イメージはこんな感じです
（一度だけ処理したい理由はその処理が重いからです）
aaa.js
console.log(reuse.jsを呼ぶ)
// 「いいい」を出力
bbb.js
console.log(reuse.jsを呼ぶ)
// 「いいい」を出力
reuse.js
let a = "あああ"
a = "いいい" ←この処理は一度だけ
return a <>
Name_Not_Found<><>2020/04/07(火) 21:58:51 ID:gBTypXbc.net<> >>687
メモ化を使います
https://repl.it/@vip0/memo-file
またはシングルトンパターンという設計を使う方法があります <>
Name_Not_Found<>sage<>2020/04/08(水) 00:40:56 ID:???.net<> let memo = arguments.callee.memo = arguments.callee.memo || new Map
let a = memo.get('a')
if (!a) {
a = 'いいい'
memo.set('a',a)
} <>
687<>sage<>2020/04/08(水) 02:10:50 ID:???.net<> >>688-689
こんなやり方があるんですね。ありがとうございます！ <>
Name_Not_Found<>sage<>2020/04/08(水) 07:54:51.70 ID:???.net<> >>687みたいなのが>>685-686のイメージ
普通に頭を働かせれば、
「変数に出力値をキャッシュする」
「一度だけconsole.logを実行するコードに調整する」
とか、考えつくはずなのに、何も考えずに丸投げ
「考えても思いつきませんでした」
「そこまでは分かったのですが、コードにする方法が分かりませんでした」
大抵、こんな言い訳をする <>
Name_Not_Found<><>2020/04/08(水) 11:23:24 ID:ws2DhC6B.net<> >>683
えっ、丸パクリじゃん構文の丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
糞スレだからって、何でも許されるわけとちゃうやろ・・・
質問スレ住人って基本こういうイメージ、怖い・・・
【え？】ITエンジニア「えっこのサイト丸パクリじゃん…学生だからって許されるわけちゃうぞ」→オープンソースから作成したサイトでした
https://togetter.com/li/1490138 <>
Name_Not_Found<>sage<>2020/04/08(水) 13:21:33.99 ID:???.net<> 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 のまま <>
Name_Not_Found<>sage<>2020/04/08(水) 13:37:31.29 ID:???.net<> 何て言語か知らないけどとんでもなく小汚ないね。 <>
Name_Not_Found<>sage<>2020/04/08(水) 13:38:57.53 ID:???.net<> 触れるなよ汚いんだし <>
なんで<>sage<>2020/04/08(水) 14:06:40.50 ID:???.net<> >>694
汚物を見ると目が潰れるからこのスレに来ちゃいけません！ <>
Name_Not_Found<><>2020/04/08(水) 14:43:34 ID:VJ27LW+4.net<> 学術の巨大掲示板群 - アルファ・ラボ
ttp://x0000.net
数学 物理学 化学 生物学 天文学 地理地学
IT 電子 工学 言語学 国語 方言 など
PS スカイプ友達の掲示板 ttp://skype.x0000.net <>
Name_Not_Found<>sage<>2020/04/08(水) 20:14:00.40 ID:???.net<> >>692
引用せずに本文丸パクリじゃん <>
Name_Not_Found<>sage<>2020/04/08(水) 21:54:12.10 ID:???.net<> コピペ+空行が引用だと思ってる輩が一定数いるようである
実に読みづらい <>
Name_Not_Found<>sage<>2020/04/09(木) 12:19:58.83 ID:???.net<> nullをpostするとPHP側で空文字("")になってしまうのですが、nullのまま送信する方法はありますか？
一応nullでなければいけない理由はありませんので、難しいようであれば空文字をpostします。 <>
Name_Not_Found<>sage<>2020/04/09(木) 12:32:54.25 ID:???.net<> httpはテキストなのでnullはない <>
Name_Not_Found<>sage<>2020/04/09(Thu) 12:33:51 ID:???.net<> content type がJSONならnull扱えるけど
formデータか何か？ <>
Name_Not_Found<>sage<>2020/04/09(Thu) 12:38:39 ID:???.net<> FormDataに突っ込むにしてもJSONにしてphpでデコードすればいいし <>
Name_Not_Found<>sage<>2020/04/09(木) 13:16:22.16 ID:???.net<> >>701-703
content typeを指定しないとnullを扱えないんですね。
AJAXの練習でformのデータと合わせて必要な配列を送信している感じです。
content typeについて、考えてもいなかったので少し調べてみます。
ありがとうございました。 <>
Name_Not_Found<>sage<>2020/04/09(木) 14:20:36.80 ID:???.net<> 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"} <>
Name_Not_Found<>sage<>2020/04/09(木) 14:27:41.40 ID:???.net<> スレチだったら悪いがREST clientみんな何使ってるの
insomunia使ってるけどwsも使えるpostwoman気になり始めてる <>
Name_Not_Found<>sage<>2020/04/09(木) 19:51:12.62 ID:???.net<> >>704
自己レスです。
色々調べましたところ、json形式で渡す方がxss対策になるだとか書いてあり、
会社でも見たことある記述がありましたので、jsonでPOSTする方向で進めてみます。
あざっした。 <>
Name_Not_Found<>sage<>2020/04/09(Thu) 22:49:30 ID:???.net<> xss対策関係ないだろ <>
Name_Not_Found<>sage<>2020/04/10(金) 12:53:32.40 ID:???.net<> XSSの原理を理解してないから、浅慮になるんだろ <>
Name_Not_Found<>sage<>2020/04/11(土) 07:22:00.00 ID:???.net<> XSSを見えない悪霊かのように思っているんだろう
実際は幽霊に見せかけたイタズラに引っかかるほう側の問題ということが分かっていない
いくら人一人の常識の範囲でフィルターをかけようが
受け取り手である様々なコンポーネントがどんなトラウマや精神疾患を抱えているかは本人でさえ分かっていないことなのだから
自分ひとりの努力でXSSを防ごうとするのは無駄なこと
簡単に追加で他に影響が殆ど無くできる緩和策をかけておくというのは悪いことではないと思うが
構造を変えたり地道な作業をしてまで対応するようなものではない
どうしても対処したいとしても、対処するならゴールで待ち構えておかないと
途中の無数にあるルートを塞いだり変えたりしても労力に対する効果は極めて低いということが分からないのか？ <>
Name_Not_Found<>sage<>2020/04/11(土) 07:58:24.16 ID:???.net<> >>706
client要るようなことある？
どうせテスト書くんだから
全部テストでやれば良いんじゃないの？ <>
Name_Not_Found<>sage<>2020/04/11(土) 12:36:36 ID:???.net<> >>711
テスト書いてるバッグエンドアプリは要らないけど
単純にたまに使うツールとして <>
Name_Not_Found<>sage<>2020/04/11(土) 16:31:50.69 ID:???.net<> たまに使うくらいならNodeとかPythonとか好きなサーバサイド言語使うな <>
Name_Not_Found<>sage<>2020/04/13(月) 10:33:53 ID:???.net<> >>706
ふつうにpostman使ってたけど
postwomanなんてあったんだなw <>
Name_Not_Found<>sage<>2020/04/13(月) 17:33:36 ID:???.net<> どうせAI が全部コーディングするんでしょ <>
Name_Not_Found<>sage<>2020/04/13(月) 19:59:37.22 ID:???.net<> コードは人間が書くためのものでしょうよ <>
Name_Not_Found<>sage<>2020/04/14(火) 01:20:42.78 ID:???.net<> 人間とAIは区別できるの？ <>
Name_Not_Found<>sage<>2020/04/14(火) 07:52:33.12 ID:???.net<> >>717
面白くないよ <>
Name_Not_Found<>sage<>2020/04/14(火) 08:59:37 ID:???.net<> 意識が不連続であるが故に、人間の意識がどこに存在しようとも関係ない <>
Name_Not_Found<>sage<>2020/04/14(火) 09:53:13.57 ID:???.net<> >>717
できるよ。情報を遮断した状態での行動を見ればいい <>
Name_Not_Found<>sage<>2020/04/14(火) 15:52:36.23 ID:???.net<> 結局、好き嫌い。
大脳辺縁系。 <>
Name_Not_Found<>sage<>2020/04/14(火) 20:09:14.20 ID:???.net<> >>717
できない
だって「人工知能」という名前の時点で人間と強く結びついているから
自我が目覚めて自分達の種族名をつけるまでは人間の模倣のただの道具 <>
Name_Not_Found<>sage<>2020/04/15(水) 05:47:37.06 ID:???.net<> 「情報」、「通信」、「制御」が確立しているならいわゆる「世界」は自律する。 <>
Name_Not_Found<>sage<>2020/04/15(水) 06:25:42.53 ID:???.net<> 世界は最初から自律してる
自律している世界の一部なのか全部なのかの違いでしかない <>
Name_Not_Found<>sage<>2020/04/15(水) 07:41:02.43 ID:???.net<> 「そうであること」「そうでないこと」の集合 <>
Name_Not_Found<>sage<>2020/04/15(水) 12:35:25 ID:???.net<> 全て「そうであること」の集合
「そうでない」と言うのは人間が都合上生み出した便利な概念であって宇宙の本質ではない
ないと言うのは二重否定であるになるから宇宙は産まれた <>
Name_Not_Found<>sage<>2020/04/15(水) 15:37:44.40 ID:???.net<> A=B
の判断は? <>
Name_Not_Found<>sage<>2020/04/15(水) 16:53:57 ID:???.net<> そもそも、「!人間 === AI」なわけで「〜ではない」の論議は無意味 <>
Name_Not_Found<>sage<>2020/04/15(水) 16:55:11 ID:???.net<> >>728を「!人間 !== AI」に訂正 <>
Name_Not_Found<>sage<>2020/04/15(水) 21:35:30.35 ID:???.net<> 訂正を却下！ <>
Name_Not_Found<>sage<>2020/04/16(木) 00:47:44.00 ID:???.net<> 却下しなかった意見の正当性を証明せよ <>
Name_Not_Found<>sage<>2020/04/16(木) 00:54:36.03 ID:???.net<> ゲーデルの不完全性定理 <>
Name_Not_Found<><>2020/04/16(木) 11:35:12.78 ID:w6a82deZ.net<> プログラミンはぼんやり理解してればいいの？
大体でいいの？ <>
Name_Not_Found<>sage<>2020/04/16(木) 11:50:04.48 ID:???.net<> >>733
No <>
Name_Not_Found<>sage<>2020/04/16(木) 12:38:29.72 ID:???.net<> >>733
ぼんやり理解してればいい部分もあるし、
大体でいい部分もある
ただ、こういうAPIがあるはずだ、こういうライブラリがあるはずだ、こういうツールがあるはずだ、
これは現実的にできる、できない、と言ったことを判断できる感覚は大事
それを身につけるためには一通りの事に触れておかないといけない
だから俺はいつも初心者に必ずMDNの隅々まで一通り目を通せとアドバイスしてる <>
Name_Not_Found<>sage<>2020/04/16(木) 14:44:44.58 ID:???.net<> location.reloadで更新後のページに文字列渡す方法ってありませんか？ <>
Name_Not_Found<>sage<>2020/04/16(Thu) 14:52:35 ID:???.net<> location.href（だったか曖昧）で移動してqueryパラメータで渡す
か
cookieやローカルストレージを使う <>
Name_Not_Found<>sage<>2020/04/16(Thu) 15:21:04 ID:???.net<> >>737
やっぱりパラメーターに突っ込むのがいいんですね
ちょっと試してみます <>
Name_Not_Found<>sage<>2020/04/16(Thu) 22:45:57 ID:???.net<> ●質問
後から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}} <>
Name_Not_Found<>sage<>2020/04/16(Thu) 22:50:25 ID:???.net<> なんでそんなことするの… <>
Name_Not_Found<>sage<>2020/04/16(Thu) 23:04:10 ID:???.net<> >>740
右も左も分からないど素人ですみませんorz
JavaScript側でポンポンDOM要素?を追加して
それをどんどん変更・更新みたいなのがしたいです… <>
Name_Not_Found<>sage<>2020/04/16(Thu) 23:46:46 ID:???.net<> 最初にstateを考えないと
jQuery併用はそもそも変だよ
template(view)
→listをループで表示する
action
→stateのlistにitemを追加する
Reactしか使ってないのでVueのサンプルコードかけないけど <>
Name_Not_Found<>sage<>2020/04/16(Thu) 23:49:39 ID:???.net<> Vueを組み合わせたことによって無駄に難しいことをやろうとしてしまってるから、ど素人ならとりあえずjQueryだけでやってみたた <>
Name_Not_Found<>sage<>2020/04/16(Thu) 23:59:59 ID:???.net<> 基本的に、Vue.js・jQuery は共存できないだろ
Vue.jsは仮想DOM で、jQueryは実DOMを変更するから、
DOMの更新のタイミングが合わない
Vuex では、更新のタイミングが決まっているから、
外部から更新できない
Action → Mutation → State
この順番を守った上で、各タイミングのフックを使う <>
Name_Not_Found<>sage<>2020/04/17(金) 00:02:24 ID:???.net<> TODOリストのサンプル見たら一瞬でお作法わかると思うけど <>
Name_Not_Found<>sage<>2020/04/17(金) 00:12:06 ID:???.net<> ありがとうございますm(_ _)m
皆さんのアドバイスを少し時間をかけて噛み砕いてみます <>
Name_Not_Found<>sage<>2020/04/17(金) 00:28:26 ID:???.net<> 生DOM触るかvueに任せるかどっちかに絞れ
完全に混ぜるな危険状態 <>
Name_Not_Found<>sage<>2020/04/17(金) 00:50:34 ID:???.net<> >>744
> 基本的に、Vue.js・jQuery は共存できないだろ
jQueryはブラウザ標準のDOM APIのライブラリに過ぎないので、
「Vue.js・DOM API は共存できないだろ」と
言ってるのと同じ意味になってるってのは分かってる？ <>
Name_Not_Found<>sage<>2020/04/17(金) 00:51:43 ID:???.net<> Vue.jsを使う場合は、jQueryだけでなく
ブラウザ標準のDOM APIも使ってはならない。
これは常識。
Vue.jsを使うということはブラウザ標準のやり方を
使わないということを意味する。 <>
Name_Not_Found<>sage<>2020/04/17(金) 00:54:09 ID:???.net<> 使う必要がない
な <>
Name_Not_Found<>sage<>2020/04/17(金) 14:50:27 ID:???.net<> >>739
どっちにしろ、質問者はド素人なんでしょ？
だったら、わからないものを２つ抱え込まないで
１つにした方がよくね？
つーわけで、いったんjQは脇に置いておこう
んでできれば
いきなりvueを使っても、なんでそうなるのか理解できないだろうから
ピュアJSから始めよう <>
Name_Not_Found<>sage<>2020/04/18(土) 19:06:27 ID:???.net<> ピュアJSとvueは共存できないぞ
先にそれを言っておかないと <>
Name_Not_Found<>sage<>2020/04/18(土) 20:02:24.91 ID:???.net<> 結論vueはゴミだからやめとけ <>