次スレはが(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
ttp://http://jsdo.it/ ttp://http://jsbin.com/ ttp://http://jsfiddle.net/ ttp://http://ideone.com/ ■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
■前スレ
+ JavaScript の質問用スレッド vol.141 +
ttps://mevius.5ch.net/test/read.cgi/hp/1562318008/ ■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
ttp://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 型の中身をそのまま表示してくれます。)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に
ttp://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
ttp://http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版) ttp://http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳) ttp://http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) ttp://http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) ttp://http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015) ttp://http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table) ttp://http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table) ◆ HTML Standard (HTML5)
ttp://http://www.whatwg.org/specs/web-apps/current-work/multipage/ ttp://http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) ◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
ttp://http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳) ttp://http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events) ttp://http://www.w3.org/TR/uievents/ (UI Events) ttp://http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳) ◆ その他のWeb関連仕様
ttp://http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等) ttp://http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳) ttp://http://www.whatwg.org/specs/ (WHATWGの仕様一覧) ◆ MDN (Netscape/Mozilla)
ttp://https://developer.mozilla.org/ja/docs ◆ MSDN Library
ttp://https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API) ttp://http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript) ttp://http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript) ttp://http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML) ◆ JavaScript Garden (ja)
ttp://http://bonsaiden.github.com/JavaScript-Garden/ja/ ◆ JSON (JavaScript Object Notation)
ttp://http://www.json.org/json-ja.html ■テンプレ案
ttp://http://fiddle.jshell.net/fH4cC/180/show/light/ ■FAQ
ttp://http://fiddle.jshell.net/vSqKr/44/show/light/ (1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は
ttp://http://validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
◆ Standard ECMA-262
ttp://http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 2015, いわゆる ES6) ttp://https://www.ecma-international.org/ecma-262/9.0/ (ECMAScript 2018) ttp://https://tc39.es/ecma262/ (ECMA-262 最新ドラフト) ◆ HTML Standard (HTML5)
ttp://http://www.whatwg.org/specs/web-apps/current-work/multipage/ ttp://http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) ◆ ES5（削るべきか要審議）
ttp://http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) ttp://http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) ttp://http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table) ttp://http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table) 2dキャラを動かす物を作りたいのですが
難しくはありませんよ
普通の人には簡単に使えるようになっています
ttp://https://github.com/mdn/webextensions-examples/tree/master/borderify githubでダウンロードするにはどうしたらいいんでしょうか
ダウンロードボタンがないです
一部じゃなくて全部ダウンロードしろ
一つ上に上がれ
ちゃんとしろ
$ svn export
ttp://https://github.com/mdn/webextensions-examples/trunk/borderify こんなに大きいと、ダメだな
あえてsvnとは
一番簡単にディレクトリ以下のみをダウンロードできるから
gitだと同じこと出来ない
gitでやるならこんな感じ
.git/以下を取得するから単にダウンロードするのとは違う
$ cd <path>
$ git init
$ git remote add origin
ttp://https://github.com/mdn/webextensions-examples $ git sparse-checkout set borderify/
$ git pull --depth=1 origin master
なぜwindowsのフォルダをそのまま使えないのでしょうか？
サーバ特有の機能があるのでしょうか？
>ローカルサーバを立てるとはどういうことですか？
ローカルにサーバーを立てること
>なぜwindowsのフォルダをそのまま使えないのでしょうか？
何に使えないの？
>サーバ特有の機能があるのでしょうか？
あるよ
理由は２つある
１つはサーバーが無いと実現できないことがある
でも大抵のコンテンツは関係ない
もう１つは、わざとローカルファイル間のアクセスが制限されている
セキュリティのため
何もできないわけではないけれど不便なのでサーバーをたてる
nodeを使った超簡易ローカルサーバーが幾つかあるから
それらを試してみるのがオススメ
自分のPC 内にサーバーを立てて、サーバー上に、HTML を置く
一番簡単なのは、VSCode の拡張機能、Live Server
Ruby なら、コマンドプロンプト・PowerShell から、1-liner で、
Ruby製の遅いウェブサーバー、WEBrick が起動する
ruby -run -e httpd . -p 8080
そのフォルダ内に、index.html があれば、これでブラウザからアクセスできる
ttp://http://localhost:8080 webアプリが動かなかったりするのではないですか？
よくxamppなどを開発用に使うと思います
しかしxamppは自分の環境で不具合あるんですよね、、、
例えばどのようなコンテンツでしょうか？
簡易ローカルサーバとはxamppなどと何が違うのでしょうか？
webアプリはwebサーバー上で動くように作ったアプリケーションなんだから
サーバー立てずに動かそうとする意味がわからない
xamppもwebサーバーの一種
おま環で不具合あるならそれを解消するか違うの使えばいいだけだよね
ローカルアプリでtwitterを操作したりもできるんでしょうか？
つまりWEBアプリを作るライブラリ（アンギュラーなど）などがサーバを建てないと動かないという認識にしておきます。
ありがとうございますた
単に、PC 内のHTML をダブルクリックして、ブラウザを実行環境にすると、
クロスドメイン禁止(CORS)になるから、その部分が動かないだけ
そういう場合に、自分のPC内に、サーバーを立てて、そこからHTMLを配信する。
そうすると、普通のネット上のサーバーから配信したのと同じになる
一番簡単なのは、VSCode の拡張機能、Live Server
まずクロスドメインではなくクロスオリジン
そしてCORSはクロスオリジン通信を実現する仕組みなどの
名称であって禁止という意味は含まない
そしてローカルファイルでクロスオリジン間の通信が制限されるわけではない
クロスオリジン間の通信が制限されるのはデフォ
ローカルファイルでは自己ファイル以外は別オリジンとしてみなされたり
ブラウザによってよりキツイ制限がかされるというだけ
HTMLファイルとWebアプリの違いがわかってないのにそんな小難しいこと言っても無駄
質問者ではなく、回答した人へのアレだろう
俺も少し気になってた
そりゃ断然JSよ
pythonのguiはオモチャだから他の言語できるやつはまずやらない
その動きにかかわる部分というのはguiライブラリの差というより、cssやjqueryの差ではないのですか？jsだとフルスクラッチのゲームとかありますよね。
Python っぽいものなら、Godot
ttp://https://www.emanueleferonato.com/ このイタリア人は、phaser ばっかり。
昔は、Cocos2d-x も使っていたけど
意味不明
例えばテクスチャを単純に動かすくらいならpythonでもできると思いますが、フェードさせたりブラーをかけたり、こういう処理はjqueryのあるjsが有利なのではないか、ということです。
ttp://https://www.youtube.com/watch?v=qugY8axtvWY Anime.js, Howler.js, Chart.js, Reveal.js,
Three.js(WebGL 3D), Pixi.js(WebGL 2D), Video.js(HTML5 Video)
Phaser は、Pixi.jsをコアにして、サウンドや衝突判定や物理演算などを追加した、
2Dゲーム開発フレームワークです
JSの場合はブラウザにしてもElectronにしても
HTML/CSSのレンダリングエンジン前提だからGUIライブラリが標準でランタイムに入ってるのと同じ
その標準のGUIライブラリであるHTML/CSSを操作するサードパーティのライブラリも腐るほどある
pythonユーザーに向けて2dゲームエンジンを作りたいというニッチなニーズを除けば
jsとpythonの二択でpython選ぶのはあり得ないよ
どうせcanvasでグリグリ描くことになる
なんとなくjsのほうがいいということはわかりました
ありがとう
作るならelectronですね
vs codeやatomはテキストエディタと比べるともっさりしてますけど、これはelectronに起因しているのでしょうか？
大抵のテキストエディタより多機能ではあるのですが
起動以外は気にならんじゃろ
起動が遅いのとメモリ持ってかれるのは
ElectronというかChromiumのせい
そうであれば会員制サイトにはjsは使われないのでしょうか？
WEBフレームワークだと勘違いしてました。
pythonとphpが多いようですね。
そうですね、起動だけですが、随分もっさりしています。
よくも悪くもDOM操作ライブラリじゃねーかｗｗｗ
相性が悪いのがWebフレームワークって感じになってる
Webフレームワークを使うと直接DOMを操作するなって言われる
Webフレームワークのやり方に依存しまくるしかなくなるので
あとで技術的負債になりやすい
Reactは厳密には、コンポーネント・部品を作る、ライブラリ・モジュール
だからフレームワーク中で、ある部品だけを使うために、
Rails + React, Electron + React みたいな、組み合わせが多い
「Web」フレームワークっていやどっちもそうなのかもしれないけど括りが大きすぎる気がする
guiの部品といいますがhtml cssがあるのになぜ必要なんでしょうか？
reactとdjangoという組み合わせもありなんですね
djangoはサーバを操作するものですよね
そのファイルを別のファイルで読み込むと、
<Layout /> という要素で、その部品を使える
Ruby のERB で、各コンポーネントを、別々のファイルに定義して、読み込むのと同じ
export default class Layout extends React.Component {
render() {
let name = "あいう";
return (
<div>
<h1>Welcome!</h1>
<h1>{name}</h1> // 式展開
</div> );
}
}
これは、フレームワーク同士だから、両方の規則を守るのが、うっとおしいから
一方、Rails + React は多い。
これは、Railsフレームワーク中で、
Reactというモジュール・GUI 部品を使うだけで、分かりやすいから
もちろん、Rails + Bootstrap も多い
HTMLやCSSは材料で
その加工手法や調理道具がフレームワークやライブラリなんだよ
reactで会員制サイトのようなものを作れると勘違いしてました
djangoなどとは違うもんですね
茹でればすぐ食えるようにしてくれたのがライブラリ
ttp://https://www.ama zon.co.jp/dp/B014FB62ZG
そうめんを食うたびに竹を割るところからやるのは面倒
必ず使うものや手順は予め用意してくれてるのがフレームワーク
ttp://https://www.ama zon.co.jp/dp/B07DFZ7M4V
お客さんにいっぱいそうめん貰った
そこで、このキットポチろうかさっきからずっと悩んでる…
Rubyガイジが嫌がらせをやめられないのは爺さんだからか。
年取るとどんどん幼児化していくらしいから気をつけないとな
何かを実現するのに１００％JSでやらないといけないという決まりはないし
別にRubyを5%10％使っても良いわけじゃん？
言語としてもRubyに良いところがあるならそれを参考にしようというくらいの
甲斐性や柔軟性がJSにはあるよ
あれくらいのレスをわざわざ突っ込んでそれこそスレの目的と関係ない
流れが続くほうが良くないと俺は思うんだけど、どうかな
そんなことはみんなわかってる
だがスレ違いだって理解しろよ
それはRubyスレでやればいいことだ
Rubyガイジはjs住人には認められたみたいだから、ruby、js以外のスレには出てこないでくれ
ダメージ0じゃないやつもいるってことよ
どういうやつかは察してやれ
参考になるかならないかで言えばならない
どうでも良いRuby情報をクソ改行とクソ句読点で何行も書き込むくらいなら
「こうすればいい」か「jsでは出来ない」と一言二言書けば済む話
Ruby では、とかスレチが語り出さなくて良い
見たい人は見るし
見たくない人はあぼーんするし
誰も損しない
ダメージ0なんだろ？rubyの柔軟性を見せてくれよ
ttp://https://zenpen.io/ 何らかのWEBサービス作るにしてもサーバが必要ですよね
こういうサービスの場合、データはキャッシュに保存されている感じで、サーバではないのでしょうか？
お前は何故か基本的にデータの保存にサーバーが必要だろうと思っている
でも何故かそのサービスはサーバーを利用していないだろうと知っている
そういうお前が俺たちに聞くことなんて何もないだろ
ボタン・フォームなどの、単なるコンポーネント・部品だから
ボタンを部品化して、フォームも部品化して、
そのフォーム中で、そのボタンを読み込んで使ったりもできる。
つまり、2つの別々なファイルに、各部品を記述できる
その部品・部品群を、Rails, Electron で読み込んで使える
Ruby のERB と同じ。
各部品を、別々のテンプレートファイルで定義して、
それを大本のHTML に読み込む感じ
WebStorage API(LocalStorage)で、ブラウザにキャッシュさせる
そんなウブな赤子が2chに迷い込んでくるわけ無いだろ！
ここは魑魅魍魎が跋扈する場所だぞ
本なんて進められたら無視するくらいの奴しかそもそもお呼びでない
第七版出たのか
インテリアとして買うか
ttp://https://zenpen.io/ こういうテキストエディタってどうやって作るんでしょうか？
ライブラリナシですか？
ttp://https://builtwith.com/ Ruby on Rails 6 では、Action Text という機能が追加されたが、
Trix と言う、WYSIWYG エディタが含まれている
Screenfull.jsというやつかな、、、？
右も左も分からない人が掲示板で覚えるのは難しい
contenteditableくらい知っとけ
そんなのあるんやね
Trix と言う、WYSIWYG エディタを使う理由
ほとんどのWYSIWYGエディタは、HTMLのcontenteditableやexecCommand APIのラッパーです。
ブラウザの実装ごとに独自のバグやおかしな動作が発生しています
TrixではcontenteditableをI/Oデバイスとして扱うことで、こうしたブラウザ間の動作のぶれを回避しました。
エディタに独自の方法で入力されると、Trixはその入力を内部のドキュメントモデル上での編集操作に変換してから、
ドキュメントをエディタ上で再レンダリングします
これにより、Trixはあらゆるキーストロークで発生するものを完全に制御し、
execCommandを使う必要性をすべて回避しています
そもそも、JavaScript に影響を与え続けているのは、Rails
頭悪いにもほどがある
そのまま、node.js を使っているw
yarn も使う
例えば、React, Bootstrap を使うなら、
.bin/rails webpacker:install:react
yarn add jquery popper.js bootstrap
JavaScript も、Rails 内の部品
ttp://https://zenpen.io/ これってデータはどこに保存してるんでしょうか？
キャッシュですか？
のリンクに、そのサイトのURL を入れて、分析してみ
条件によってできたりできなかったりします
現状lookbehindはchrome系しか対応してないし
うまくできない時は素直に複数回に分けましょう
上でLocalStrageって答え貰ったでしょ
キャッシュ削除しても保存されてますね
すみません
現状chrome系が大多数じゃん
ttp://http://codepad.org/I322LIfG sessionstrageで保存してもundifinedになるんですが、なぜ保存されてないのでしょうか？コンソールログで表示させているのですが、、、
保存されたかどうかは開発ツール
Chrome：Applicationタブ→Strage→Session Storage
Firefox：ストレージタブ→セッションストレージ
で見れ
ttp://https://techacademy.jp/magazine/32870 引数はあるようです
インスペクタで確認できるのは知りませんでした
ttp://https://developer.mozilla.org/ja/docs/Web/API/Storage/setItem 公式でもそう書いていますが、どうなんでしょうか
savedataじゃなくてloaddataを出力しろよ
プログラミング言語の前に日本語やったほうが良い
「戻り値」って言う？それとも「返り値」？
返り血どうだった
innerhtmlを使用するのですか？
ここは掃き溜めなんだから
firefoxのインスペクタです
編集可能になるだけで
UI（フォームの部品）になるわけじゃないのよ
mutation observerで挿入される要素の親（先祖でもいいけど）を監視して要素追加されたときログに書き込むようにしとけば確認できる
っていう質問は真面目に意味がわからない
デバッガを使いこなして調べるのはお前自身だろ
お前自身が可能かどうかを質問されても困る
もしも音声認識で問いかけたらデバッガが教えてくれることを
期待しているのならそれはできない
インスペクタだけでは調べることは出来ないがデバッガを使えば調べることは可能
ただし君には無理
ですよね
エミュレータはありますけど
俺は最初JSをガラケーのフルブラウザで覚えたからクソ辛かったが
Canvasが使えないから1pxのdivを敷き詰めるラッパー作ったり
少ない機能や性能の中作るのは勉強になった
でも今どきのスマホは外部キーボード用意すれば画面が小さいくらいで
むしろカメラマイクモーションGPSとか、色々試すのには多機能でしょ
最近は慣れれば音声入力でキーボードと同じくらいの速度でコーディングできるし
アプリの形式としてPWAだってあるから無くても十分なんとかなるよ
reactありますけど、WEB技術で作れるのは学習コストが低くてありがたい
でも一般的にはjavaなんですよね アンドrの場合
例えば５ｃｈのIDみたいに0時に自動的にIDが更新されるような感じです。
>最近は慣れれば音声入力でキーボードと同じくらいの速度でコーディングできるし
できる…のか？
簡単に音声でインデントできるぞ
ダブルクォートとかな
「ダブルクォートほげほげダブルクォート」と言うの、果たして同じくらいのコーディング速度なのだろうか？
「ﾀｶｼｰｺﾞﾊﾝﾖｰ」もバックスペースで消さなきゃならんし…
JSONはJavaScript Object Notationの略で、つまりは元々はJavaScriptのオブジェクトリテラルの記法を参考に"発明"され普及したわけだが、機能的にはサブセットと言っていい。
なのでJavaScriptのオブジェクトリテラルでは文字列以外でもシンボルが使えたり、""がいらなかったりいろいろ制限が異なる。
JSONでは文字列じゃないとダメ。""も必須。
「ラベル」ってプロパティ名のことでいいんだよな？
そすプロパティ名のことです
JSON.parse()したあとのオブジェクトはJSONではないんですね
オブジェクトリテラルでプロパティ名が""で囲んでないのは文字列だけど省略されているということですか？
ttp://https://www.youtube.com/watch?v=U-NZjzDj-Xk はい
ttp://https://www.moongift.jp/2012/08/20120814-3/?amp=&= 要素の並び替えというのはjqueryを使うのが普通ですか？マインドマップのようなものを考えていますです
時と場合による
JSON モジュール・関数などは、
JSON文字列・JavaScript(JS) のオブジェクトを、相互変換するもの
JS内では、文字列よりも、オブジェクトの方が処理しやすい。
一方、JS外では、文字列で通信する(serialize)
Deep Copy する(参照を断ち切る)ために一旦、JSオブジェクトを文字列に変換してから、
その文字列から、新たなJSオブジェクトを構築することもある
そうすれば、新たに構築されたオブジェクトは、
元のオブジェクトと無関係で、内部に同じ参照を持たない
よく知らないけど、SortableJS というライブラリがあるみたい
【jQueryUIを使わずにドラッグ＆ドロップを実装したい】Javascriptライブラリ「Sortable」を使ってみた
ttp://https://qiita.com/AVELWP/items/536c797a63c081cf7bc0 まあ全然質問に対する答えにはなってないが。
ただ知ってることしゃべってるだけ。
やっぱマウス使うんだな（笑）
どうも。ライブラリに頼るのも学習コストが高いかなーと思ってて
一応報告とさせていただきます
一応ってなんだよ
エミュあるんで
スマホ実機を何十台も揃えてる理由を考えれば
実機じゃないと検証できないことが多々ある
多くの機種でテストしたければ実機テストサービスを利用する
reactnativeなど使えば、無駄にはならないと思うので
あんま関係ないよ何で作ろうが。
もはやのがれることはできんぞ
色んな所でモバイルとデスクトップの制限や
APIの振る舞いの差で躓く
まあ、たいてい数個の修正で住むから
モバイルからエラーログを集めて対処するって
いうのもありだが
タッチでの使いやすさ見やすさなんかは
やっぱ実機が手元にあったほうが良い
ttp://https://reactjsexample.com/drag-drop-grid-layout-in-react/ こういうのはjs生でやると大変なんでしょうか？
実機なしでやります じゃあ
ヒッキーなので親の金で買ったガラケーなんですよ
nodeに凄くなじまないとは言わないが、凄くなじむものではない。
よってデフォルトでは入っていないが、必要なら適当なライブラリがあるんじゃないか？
それかなんちゃってfetchくらいならすぐ作れるだろうし。
逆に、まあなんでnodeでfetchしたいのかって聞いてみたいね。
promiseの使い方に慣れたくてfetchが実用的たがら練習にいいかと思ってfetchしたいです
npm とかyernとか使い方わからんのですaptで入れられます？
それどころかnodeで普及してるライブラリはほぼ使えないと思った方がいい。
事実上と言ったのはnpmまたはyarn覚える何倍もの苦労をしていいならソース取ってきて適切に配置することでできないこともないからだ。あ、依存するライブラリも全部ね。依存関係バージョン完璧に。
誰もやらないのは、言ったようにそっちの方が何倍も大変だからだ。
ただfetch使いたいだけなら今この場でF12キー押して試してみればいいじゃない
でもpromiseに本当に慣れようと思ったら一度大きなアプリケーション作って見たほうが良い
そうすればロジック的ないろいろなパターンも分かるし
プロミスをキャッシュしたり、イベントと組み合わせてオブザーバブル的なものを作ったり
運用上のパターンも分かってくる
覚えたくないわけでわないです
インストールしてみます
npmよりyarnの方が上位互換って認識であってます？
ブラウザのデバッガでやればできるのですね
アプリケーションを作るというレベルにはまだいけてないです
yarnはこだわりが強い人がnpmの代わりに使うため追加インストールするもの。当然npmのほうが基本でyarnを使ってる人もnpmの使い方を知った上で使っている。
一方機能的にnpmで事足りるならyarnは必ずしも必要ではない。
短くいうと、右も左も分からない段階の今ならなにも考えずに普通にnpmだけ使ってればよい。
じゃあ実行環境はブラウザになるんだからnodeでfetchなんて考える必要ない。ブラウザでは何もしないでもfetch API備えてるんだから。MDNでも参考に読みながら普通に書くだけ。
HTML ドラッグ＆ドロップ API
ttp://https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API 「drag and drop event html」で検索！
Ruby on Rails など、すべてのweb開発で、VSCode, Node.js, npm/yarn, git clone などは必須
Windows 10, WSL, Ubuntu 18.04 では、
VSCode の拡張機能、Remote WSL も使う
Linux側には、日本人が作った、バージョンマネージャーのanyenv で、rbenv, nodenv を使って、
ruby 2.6.6, node 12.16.2 を入れた
yarn は、Windows側に入れて、WSL から、拡張子なしのyarn コマンドを呼べる。
これは、#!/bin/sh で始まるシェルスクリプト
anyenv は多言語向きで、rbenv, nodenv, pyenv, phpenv などを同じ使い方で、統一的に扱える。
多言語のバージョン管理では、anyenv, asdf も必須。
一々、各言語で、バラバラなバージョンマネージャーを使うのは面倒
この辺のことよく分からんです
こういう並び替えはライブラリを使うのが普通なんですかね
にも書いたけど、Sortable.js とか？
アニメーションもあるし、自作は不可能だろう。
React, Vue.js などのフレームワークなら出来ると思う
ありがとう
reactでいく
スマホアプリにも役立つし
ライブラリはガンガン使うスタンスのほうがいいよね
スマホでは、React Native + Expo もあるから、
React をやっておくのが良いかも
aptとnpmの違いなんて
ビーフカレーとチキンカレーくらいのもんだぞ
npm/yarn も、RubyのBundler の影響
そうする
レベルとかそういうことじゃないから
絵を勉強していない子供でも絵は楽しく書けるでしょ
私は未熟だから、まず直線を10万回描きます、円を100万回描きます
そんなことしてて楽しいか？
そんなの数回ずつ描けば筆の使い方、手の動かし方など最大限頭で理解できるんだよ
逆に言うとそれ以上頭で理解することはそうそうできることじゃないの
それが人間の性質
つまりちょっと練習をやったらあとはひたすら本番をやって
パターンを体に覚えこませていくしか無いの
脳って言うのはパターン構築機なんだから、うだうだ考えずに信じてそれに任せればいいの
プログラミング言語も言語であって、別に頭で考えなくても言語っていうのは身につくものなの
いい？
プログラミング言語でやることは計算だが、
プログラミング言語自体は計算して書くものではないの
たまには推敲したりすることもあろうが、
基本的には常識と直感で無意識にスラスラ書いていくものなの
逆に言うとどれだけ自然に自分の中からパターンが出てくるかが重要で
自分の中にどれだけパターンが染み付いているのかが大事なの
要するにぐだぐだ言ってないで手を動かせ 無理なことはない 無理そうなら最初から言わないから
ターミナルでnpm initしようとしても入ってないって出ます
nodeのREPLでやろうとしてもoutsideでやれって出ます
nodeのある場所出すコマンド教えてそこからnpm入ってる場所推測しようにもそれ書いてくれないと。
親要素のoverflowで要素がクリップされているかを判別するには
どのようなアプローチを取れば実現できます？
Ubuntu20.4です
パターン繰り返すのが大事なんですね
Linux側には、日本人が作った、バージョンマネージャーのanyenv で、rbenv, nodenv を使って、
ruby 2.6.6, node 12.16.2 を入れた
yarn は、Windows側に入れて、WSL から、拡張子なしのyarn コマンドを呼べる。
これは、#!/bin/sh で始まるシェルスクリプト
anyenv は多言語向きで、rbenv, nodenv, pyenv, phpenv などを同じ使い方で、統一的に扱える。
asdf も、anyenvと同様のツール
which ruby
/home/ユーザー名/.anyenv/envs/rbenv/shims/ruby
which node
/home/ユーザー名/.anyenv/envs/nodenv/shims/node
node --version
v12.16.2
まず、apt-cache show nodejs で、バージョンを調べると、かなり古いので使えない！
Version: 8.10.0
(注意、node ではなくて、nodejs を使っているディストリビューションもある)
NVM というバージョンマネージャーを使う人もいるけど、多言語をインストールする際、
各言語でバージョンマネージャーの使い方が異なるので、面倒。
だから、anyenv, asdf を勧める
ソースコードからコンパイルするには、
build-essential, openssl, readline, zlib などのパッケージもいるかも知れない
Linux 板のUbuntu のスレで聞いた方がよいかも
プログラム以前の話っぽいから出直せ
"ubuntu npm"とか"apt 使い方"とか"linux 環境変数"とか、
調べることはたくさんあるから、そういう当たり前の基礎を理解して、自分で環境構築できるようになってから言語について質問して。
時間割の中にブロックを自由に配置するようなものですね。
とりあえずコンソールで
which node
と
which npm
と
echo $PATH
の結果貼ってみて。
詳しく聞いてみないと分からないけど
そう言うのを自前で用意することは見直した方が良い
例えばグーグルカレンダーを使って埋め込んだりリンクするので十分間に合うんじゃないか?
再開発は徹底的にやらないほうがいいと？
googleカレンダー使ってみましたけど、確かにワイがやる必要ないですねぇこれ
オリジナリティ出せるのって結局アート系だけなような気がします
再開発をするなというつもりは全くない
俺はむしろ再開発はどんどんやれ派
だけどスケージュール表というのは限りなく実用的なものでしょう？
例えば特にカレンダーというものは特殊で昔から世界中で形が同じなのよ
スケージュール表も、独自性を出して本当に嬉しいことになるのか？ってこと
その予定を見た人が、自分の予定に追加したり、フォローしたいと思うかもしれない
残念なことに現状これがデファクトと自身を持って言えるくらいのサービスはないが、
まあGoogleカレンダーとか、連携機能がついてるものに頼っておくのが賢いんじゃないかということ
だけど現実的にはコピペされる方もする方も理想とは程遠いので不可能
だからモジュールやライブラリという単位がある
再利用可能なものはパッケージかしてその一部を使う
それが現実的な考え方
ttps://pastebin.com/ETHMjGbq init()を定義しているのにinit()が無いとエラーを吐かれます。
何か書き方が間違っているのでしょうか？
ctx.font = "16px 'MS Pゴシック'");
ctx.fillStyle = fillcolor[movtble[id][dir]];
慣れると意外と簡単なんだけどな
00年代前半にJSやFlashで狂ったように色々作った思い出
直した
ttp://https://jsbin.com/bohodolopi/1/edit?html,console,output 余計なアドバイスかもしれないけど使ってるエディタとか選んだほうが良いと思う
VSCode に貼り付けるだけで以下のが全部エラー行として出力されてた
直した箇所
・script タグ直下の <!-- を削除
・/script タグ真上の --> を削除
・38行目の "16px 'MS Pゴシック'"); の不要な ) を削除
・54行目の movtble を movtbl に修正
Drag and Drop Sortable Lists in Ruby on Rails
ttp://https://www.youtube.com/watch?v=r884jAqAbHY この外人は、Railsで、Sortable, Stimulus を使っている
1. doctypeがない
2. meta charsetは意味がないので書かないこと
3. scriptの中の!----は意味がないので書かないこと
4. エラーは全部読んで最初のものから対処すること
5. ctx.font = "16px 'MS Pゴシック'"); の)はミス
initを定義しているのに、initが無いとエラーを吐かれる
↓
initを定義しているつもりだけどできていない
↓
構文ミスでパースエラーになっている
こう考えないとデバッグは進まない
その前にエラーを全部読めというのは言うのもおこがましいが
だとしたらもう少しまともなコードが載ってる本を選んだほうがいいと思うぞ
•交差ルートのあふれた部分が切り取られていた場合、ルート交差矩形はルート要素のコンテンツ領域になります。
•それ以外の場合は、ルート交差矩形は交差ルートのクライアント矩形 (getBoundingClientRect() を呼び出して返されるもの) です。
とあるが、クリップした途端コンテンツ領域になってボーダーその他は無視されるの？なんで？
あとルートの親要素によってルートがクリップされているかは考慮しないの？
ありがとうございます。
タイプ間違いがそこにあったのですね。
お手数をおかけしました。
デバッグの方法教えて頂きありがとうございます。
firefoxのデバックモード（F12）ではinit()が定義されてないとしかエラーがなかったので
助かります。
日経ソフトウェア編
いろいろ動かしながら学ぶ！プログラミング入門という本に書かれています。
Uncaught SyntaxError: unexpected token: ')'
エラーも出るよ？
ttps://momdo.github.io/html/semantics.html#charset >HTML文書がBOMで開始せず、かつそのエンコーディングがContent-Typeメタデータによって
>明示的に指定されず、かつ文書がiframe srcdoc文書でない場合、エンコーディングは
>charset属性をもつmeta要素、またはエンコーディング宣言状態のhttp-equiv属性をもつ
>meta要素を使用して指定されなければならない。
「meta charsetは意味がないので書かないこと」とか、なにオレオレルール語ってんだよこのど素人が
そこに書いてあるとおりだが？
あっても無くてもutf-8として解釈されるのだから文字通り書く意味がないだろう
こだわりで潔癖なHTMLを書きたいのなら止めないから君だけでやれ
君はまずを読むこと
・回答には多様性があります。他人の回答を尊重してください
自分が人と違う意見を持つなら質問者に自分なりにレスしてやりなよ
俺に煽りレスを飛ばしてどうなる？何がしたいんだ？
Encoding標準は、UTF-8文字エンコーディングの使用を要求し、それを識別するために"utf-8"エンコーディングラベルの仕様を要求する。
とあるだろ
「UTF-8以外ダメなら書く必要がないからといって、じゃあ書かなくていいよねって
解釈してはいけません。絶対に書きなさい」
がルールだ
お前がルール違反上等だからといって、他人にすすめるな
> あっても無くてもutf-8として解釈されるのだから文字通り書く意味がないだろう
あっても無くてもutf-8として解釈されるのは誰が決めたの？
お前のオレオレルールの紹介はしなくていい。
世界中のブラウザは古いもの含めてぜんぶそうなってる！
俺が証拠！
っていいはるやつは馬鹿だと思う
大前提として、俺がどう勧めるのかは俺の権利でありが決めることであって君に制限されることではない
そして、WHATWGは法律ではなくWeb制作にそこに従わないといけないという免許がいる訳でもない
WHATWGの仕様は過去の仕様の寄せ集めであり、未来の「Webのこうあるべき姿」も含まれているが、
基本的には現在のデファクトをそれとなく反映させた、現在のWebの姿を反映させものであり、
どうして近年utf8で行くことを決めて、書いても書かなくてもutf-8としたのに、
書くことを強いているのかというと、正しく認識できない環境があり得るから
だが俺はそんな環境は淘汰されるべきで、utf8で統一しようという動きを個人的に強く応援しているから
あえて書かないようにしようと事ある毎に布教して回っているわけ
だけどもそれは、Webはみんなで作るものであり、逆に言うとみんなが作ったものがWebになって責任が生じる
未来のより良いWebを作っていくための俺なりの良心で言っていること
ルール、ルールというが、この部分は明らかに将来無くなる記述なの
俺はWHATWGに書かれている文字一語一句にしたがって、
明日WHATWGが書き換えられたら急に方針転換するのはおかしいと思うから
俺なりのやり方と良心でWebをどう作っていくべきかを人に教える
それは俺の権利であって、他人にとやかく言われることではない
君が今Webはなぜそうなっているかも、これからWebをどうしていきたいかもどうでもよくて
Web制作はただ書かれている文字に従って作るべきだと思っているのなら、そう人に勧めたらいいだけ
charset 属性 を省略するっていう意見はここで初めて読んだ。
個人的には"書かなくて済むものは書かない"っていう考え方は理解できるけど、
MDN のこの記事では charset 属性を使用して文字エンコーディングを明確にすることを強く推奨しているね。
ttp://https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta 以下引用 (改行は加えている)
この属性を使用して文字エンコーディングを定義することを強く推奨します。
ページで文字エンコーディングを定義しない場合は UTF-7 fallback cross-scripting technique のような、
ページの利用者を攻撃するクロスサイトスクリプティング手法が実現する可能性があります。
可能性がある、っていうだけで実証されたのかは知らないけど、
charset="utf-8" 書いておくだけでこういう危険性が排除できるのなら、自分はしばらくは書いておこうとは思った。
などが表示されて、言語判定を間違う
最初の数十文字で、言語を判定するから、
複数言語に該当する場合は、誤判定してしまう
そういうブラウザを使ってる人はサイト見るのお断りって言えばいいだけ
SEOもGoogleだけでいいし、Googleがちゃんと読み取れなければ
Googleが悪いってだけ
だけどtitleタグのように実質必須とされてるものは多い
だけどそれを書かないことも多い
初心者に仙人になる事を求めるのは間違い
仙人になる人は勝手に仙人になる
ここでは所謂常識を教えたほうがいい
IEでは再現可能
ターゲットサイトにutf7で読んだときにスクリプトタグとなる文字列を埋め込むことができれば
utf7指定された攻撃者サイトを踏ませることで
そこに埋め込まれているiframe先のターゲットサイトもutf7と解釈させて
任意のスクリプトを実行することが可能になる
IEサポートする理由がまた一つ減るのは有難い
いい加減無駄だからやめとけというけどね
つーか、納品前にクライアントから入れといてと渡される計測用タグや全社共通フッター挿入コード
いまだにscriptの中身<!-- -->で囲んでたり、document.write使ってたりで
いい加減やめてほしいんですけど
過去のバッドノウハウ的な感じですか？
ttp://http://www.tohoho-web.com/js/oldstyle.htm テキストビューアに近いような貧相なブラウザで内容が表示されないようにするため
ありがとうございます
それは発注先を選ぶ段階での間違いなのでは…
変化を検知する為にどのイベントをリスナーすべきか。
"resize"は当然として他に見ておくべきイベントは？
既存のアドオンがどうしてるのかわからんですが
しかも激しくスレチじゃね？？
既存のpolyfillがすでにあるのに自分で書くってことは、それらは試した後で、
不満な点や改良すべき点もはっきりしてるものではないのか？
firefoxスレで聞いてこいよガイジ
React などの仮想DOM なら、差分更新も自動
元の配列を浅くコピーして、
コピーした配列を変更して、setState で設定するだけ
これだけで、元の配列との差分を把握して、自動更新する
浅いコピーだから、変更していない要素には、コピーは作られていない
ポリフィルはmouse,key,animation,transition、Mutationまでがっつり監視しているが、
実際問題ここまでイベント監視したら監視コストが高く付くのでは？という疑問。
特にbodyに対してMutation噛ませるのは監視コールバック発火しっ放しになるのではないか。
だからNativeで実装されてるんで
ユースケースを限定できるなら話は別だけど
ならどっちが良いですか？
今後のメンテ続くか心配…
ド素人が書いたnvm→nodebrew乗り換え記事なんて参考にせずずっとnvm使い続けりゃよかった…
nvmの方がいいのん？
VSCode の拡張機能、Remote WSL も使う
Windows側からのブラウザアクセスは、
VSCodeの拡張機能・open in browser ではローカルファイルアクセスとなるので制限されるが、
VSCodeの拡張機能・Live Server では、サーバーを立ててのアクセスとなるので制限されない
Linux側には、日本人が作った、バージョンマネージャーのanyenv で、rbenv, nodenv を使って、
ruby 2.6.6, node 12.16.2 を入れた
yarn は、Windows側に入れて、WSL から、拡張子なしのyarn コマンドを呼べる。
これは、#!/bin/sh で始まるシェルスクリプト
anyenv は多言語向きで、rbenv, nodenv, pyenv, phpenv などを同じ使い方で、統一的に扱える。
同様のツールに、asdf もある
NVM, n などの個別ツールを選んだ場合、各言語での使用方法が異なるので、面倒くさい
実際は別にサーバー立てなくても
起動フラグ指定すればローカルファイルアクセスできる
以下のようなロジックがあり、
srcElementにはボタン属性が入るんですが、
.extractionとは何でしょうか
if (! srcElement.extraction)
{
element.style.height = "auto";
element.style.overflow = "visible";
srcElement.value = "スクロールあり";
srcElement.extraction = true;
} else
{
element.style.height = getDisplayAreaHeight();
element.style.overflow = "scroll";
srcElement.value = "スクロールなし";
srcElement.extraction = false;
}
ボタン要素にextractionなんてプロパティないから独自に追加してるんじゃない？
コードを見る限りそのコードを通るたびにトグルさせるフラグ
extractionにどういう意味を込めたかったのかは書いた人じゃないとわからない
見ての通り、フラグです。
というか人の書いたコードの意味を聞くのは間違っています
自分で見て理解できないものを人から聞いて理解できるわけがないからです
元々のソースコードを、React, Vue.js などのフレームワークで作っているかも知れないので、
変換後のソースコードを見ても、意味が分からないと思う
直接プログラマーが書いたソースコードを、確実に入手する必要がある
まず、こういうサイトにURL を入力して、そのページが使っている技術を分析すべき
ttp://https://builtwith.com/ja/ 使ったことがなければ端的に説明されても理解できないだろう
そういう問題だと思う
ググっても全く出てきませんです
画像ソースの場所はわかるんだから
それを使えばいいじゃない
そんでそれはJSではなくCSSの話だからスレ違いだね
ttp://https://ideone.com/0fWamo firefoxアドオンを作成しています
ポップアップメニューにアラートが出ないんですが、こういう設定ではだめなんでしょうか？
htmlとjsファイルは同じフォルダにおいています。
こういう場合の原因の特定方法を教えて下さい。
一般的なフラグというのはしっていますが、
Javascriptでは使ったことがありません。
extractionを文字列検索しても出てこなかったので
なぜかと思っていたのですが、
変換後のソースコードでは出ない場合もあるのですね
勉強になりました。
インラインスクリプトは禁止されてるのでonclick属性に書くのもだめ
popup.js側でイベントハンドラ仕込んでね
書き方としてもreactのJSXやsvelteなんかでは普通にインラインスタイル
知らんのに無理すんな
イベントリスナーのことですか？onclickもインラインになるんですかね。
ttp://https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy#Inline_JavaScript WebAPIとブラウザの歴史は一通り勉強しないと
WebExtensionの話してるんだけどw
君もリファレンス読まない(もしくは読めない)タイプだね
onclickについては擁護しようがないが
イベントハンドラとイベントリスナーが同じかどうかを聞き返すのは別にそれほど不思議じゃない
その2つを区別する言語もあるし、JSでも呼び分けてる人がいるかもしれない
それにaddEventListener()だからイベントリスナーって用語のほうがわかりやすいんでしょ
疑問が出たり問題に直面したら都度読む癖をつける
後は電車の中とか飯食ってる時とかいつでもいいからちょくちょく見とけば良い
試行錯誤してそれでも解決できなければここで聞けばいい
質問するにしても自分がやろうとしてることとか試したことを書いた上で質問すべきだけどね
ttp://https://www.ranvis.com/articles/smart-questions.ja.html ttp://https://www.sejuku.net/blog/61631 どうやってonclickなしでクリックを検知するんでしょうか。
ボタンのidを取得していますが。
しかし、コンテンツ部分とポップアップ部分では、コンソールが別なんですよね？
どういうことができるのか、どういうことができないのかだけを知っておけばいい
どうやって使うかはその都度調べればいい
関心を持っていて日々色々なニュースを収集してWebを追っていれば自ずと
こういうことはこういうリファレンスにこういう記述があるはずだという目星がつくようになる
そのうちリファレンス自体も、はっきり記憶していなくともこういうリファレンスがあるはずだという目星がつく
そうなると困らない
ttp://https://qiita.com/takahiro_itazuri/items/8d7375576323b49dd4b7 こういうように、HTML に書かないで、
<input type="text" id="mytextbox" onchange="myfunc()">
HTML をこう書いて、
<input type="text" id="mytextbox">
DOM が読み込まれた後に、#mytextbox 要素に対して、
jQuery でイベントリスナーを登録することもできる
$('#mytextbox').on('change', function() { 処理 });
jQueryを使うと半分～1/3以下のコード量で同じことが実現できる
できるできないの話をするなら、九州から青森にだって徒歩でいけるよ
なんで徒歩でいけるのに飛行機なんか使うんですかって言ったらバカだろう？
ベントリスナーを使う方法の所に書いてあるでしょ
document.getElementById("downloadbutton").addEventListener("click", myfunc);
絶対に１つしかイベント登録しないというなら
document.getElementById("downloadbutton").onclick = myfunc;
でもいいけど
browser_actionやバックグラウンドスクリプトのconsole.～が表示されるのは
about:debuggingにある個別の拡張の調査から開くコンソールかctrl+shift+jの方のブラウザコンソール
そんな価値ないだろうけど
どうもです
飛行機は場所を取るとか金がかかるという話であれば
jQueryにはまったく当てはまらないので、それは的外れですよｗ
対して短くなってないように見えますが、
それでもこれが
document.getElementById("downloadbutton").addEventListener("click", myfunc);
このように短くなる上に
$("#downloadbutton").click(myfunc);
複数のクラスに割り当てる場合でも量が変わらず
$(".downloadbutton").click(myfunc);
動的に要素が増えたりする場合でも短くかけるわけです。
$(document).on("click", ".downloadbutton", myfunc);
コードの量が多くなればなるほど
jQueryの恩恵は大きくなります。
例えっていうのは、わかりやすく伝えるために使うもの
否定するときに使うものじゃないんだよ
否定の用途に使うと必ず、まずい点を指摘されることになる。
今から何か作ろうっていう時に今更 jQuery を採用しようとは思わないわ。
bootstrap とか使うなら仕方なく入れるだろうけど bootstrap5 からは jQuery 不要になるし。
短くないけどjQueryを使わないほうが可読性が高いコードの例を一つでも上げられますか？
それができないとただの机上の空論ですよ。
自分なら今更使わない、っていう一意見。
$('#downloadbtn').click(func);
const dlbtn = document.querySelector('#downloadbtn');
dlbtn.addEventListener('click', func);
どちらで書かれていようが可読性に言及するほどの違いなんて自分にとっては出ていないっていうね
この程度の差で可読性ｶﾞｰなんて言い出したらそもそも根本的に読む力が無さすぎると思うわ
言ってしまえばただの個人の好き嫌いレベル
短い方が好きなら jQuery の方が好きだろうし、そうでなければ行を分けて説明的に記述できるネイティブの方が好き、程度の話。
まぁ jQuery おじさんは「1行で書けるものが2行になってる！可読性が！」とか騒ぎだすんだろうけど正直ただの好き嫌いの下らない話だからどうでもいい。
勝手にしてくれ。
addEventListener, attachEvent の両方に対応している
これを、addEventListener で書くと、attachEvent に対応できない
jQueryはどいて下さい
バグが有る。
もしdownloadbtnがない場合はエラーになる
そういった所までちゃんと書くように
$.noConflict();を使えばいいだけでは？
どちらも差がないなら、わずかに優位なjQuery一択では？ｗ
優位もクソも無いでしょ
自分からすればわざわざ導入して帯域やリソース消費する時点で±0
結局好き嫌いレベルの話しか出来ないのねｗ
その理屈だとjQueryよりも重いJavaScriptフレームワークは使えませんね
自分が仕事でつかれる方を選ぶって
社畜だと思うｗ
他のフレームワークと同列に語る方がおかしい
ネイティブのjs書いて疲れるってレベルひっくいなjQueryおじさんｗｗｗ
疲れるじゃんんｗ
何度も同じようなループを書いて
結局オレオレライブラリを作ることになるんだろう？
どっちもどっち
レベルの低い三流同士の言い争い
流れ的にjquery厨が突っかかってるだけだけどね
００年台前半も若い子が
jQなどの台頭してきたライブラリを使わないおじさんをディスってた
またしばらくしたら
今ディスってる子たちがおっさんになって
馬鹿にされる側になるんだなあ
世の中おもしろい
ttp://https://w3techs.com/technologies/history_overview/javascript_library/all/y 2011年1月 28.3%
2012年1月 42.8%
2013年1月 54.5%
2014年1月 57.4%
2015年1月 61.5%
2016年1月 68.3%
2017年1月 71.9%
2018年1月 73.1%
2019年1月 73.6%
2020年1月 74.2%
2020年7月 76.0%
wordpress凄いなぁｗｗｗ
bootstrapを理由にするのやめたの？
まあ確かにbootstrapが0.9%しか増えてないのに
倍のjQueryは1.8%も増えてるしね
wordpress？wordpressは0.2%しか増えてないよ。
ttp://https://w3techs.com/technologies/history_overview/content_management/all つまり最低でも0.7%はjQueryのみのシェアが増えたってことだね
その他見てみ。
0.1%ですら増えてない
最近$でもjQueryでも出てこないサイトに当たることが昔に比べたらすごく多くなった。
少なくとも右肩上がりで増えてる実感がまったくないんだけど は本当にどういうカラクリなんだ？
Methodologyの説明ページとかないの？
イメージ的にはjQueryは2013~14年頃がピークでES6以降は減ってると思ってた
PC向けのサイトだと使わないところは確実に増えてる
top 10mに入るモバイルサイトが増えて
モバイルだとjQueryの使用率が高いとかならまあ納得はできるが自分の感覚とは全く異なる
それにその統計だとバージョン2, 3を使ってるところが少なくて大半がバージョン1
バージョン1使うってIE対応だよね？
かくいう私も初心者で、なんかよくjqueryを勧められる
機能に違いがないのにあえて旧ブラウザ切り捨て版を使う意味ないやろ？
ttp://https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html というかIE11は3系で問題ないやろ
毎日数万のサイトを生成してるから相対的に増えている
ttp://https://w3techs.com/technologies/details/js-jquery これみるとバージョン3は11.5%のようだ
attachEventってIE8までだろ
そりゃそんなもんに対応せざるを得ない状況なら、誰だってjQuery使うでしょ
それくらいしか価値がないんだから
CSSと同じようにあってもなくても宣言的に処理を適用できるという
ウェブ技術との相性の良さだよ
対応してないブラウザへの対応は？
ほらjQuery使った方が楽でしょ？
これ見てやべぇと思えない奴はプログラマとしてのセンスが終わってるよね
babel
babelやTypeScriptを使いこなしてるようなやつとは
作ってるものも違えば技術者としてのレイヤーも違うから
まともに相手したところで不毛だよ
jQuery自体が悪いわけじゃない
顧客が希望するなら応相談ってトコでしょ
両方やってる人が多き気がするんだがなあ
書く人の1番のボリューム層って
腐るほどある請負サイト制作の制作会社社員と
さらにその下請けのフリーランスだと思うけど
好き嫌い言ってられんもん
> jQueryのAPIモデルってなんであんなに聳え立つゴミなの？
もともとのDOMのAPI仕様が原因
DOM APIは仮想DOMとかいう仕組みがない
DOM要素を直接操作する。
jQueryはそのDOM要素の直接操作を便利にしただけだから
本質的にはDOM APIと変わらない
全ての欠点はウェブの標準仕様にある
> コードも脳もjQueryに依存してるようなやつと
> babelやTypeScriptを使いこなしてるようなやつとは
jQueryはbabelやTypeScriptと一緒に使う
ちゃんとjQueryにもモジュールやビルドに対応する機能が搭載されてる。
ttp://https://github.com/jquery/jquery/blob/master/build/fixtures/README.md Including jQuery
Browser
・Script tag
・Babel
Browserify/Webpack
・AMD (Asynchronous Module Definition)
Node
反応も多少違うんだろうにな
他のDOMと同じく、どうにかやって取得してremoveChildなりで消すだけだろ
つーか、消すかもしれないことがわかってるなら、insertAdjacentHTML使わないで
他の方法にしとけよ
DOMっていうかノードでした
消すには普通にremovechildですかね
ではどのメソッドを使えば追加したノードだけを消せますか？
それならお前がこうあるべきというDOM API教えてくれ
>ちゃんとjQueryにもモジュールやビルドに対応する機能が搭載されてる
importの書き方をREADMEで紹介すると
対応する機能が搭載されてることになるんだね
さすが自称使いこなしてる人
> それならお前がこうあるべきというDOM API教えてくれ
結論を先に言えばjQueryなんだが、
CSSと相性がいい宣言的なAPIであるべき
DOM APIはCSSよりも前にできたのだから仕方ないと思うが
手続き型なんだよ。要素に対して（一つずつ）処理をするしか無い
CSSは例えば。.my-class { color: red } のように宣言的に記述できる。
これは.my-classに該当する要素が0個以上あれば、
それに対してスタイルを適用する。宣言的であるためループなどの処理が存在していない。
jQueryも同等のことが行える。 $(".my-class").style({color: "red"})
これは上記のCSSと同等のことを行う。同じように宣言的でループなどの処理が必要ない。
対応する機能が搭載されてるのは事実でしょ？
何がいいたいのかわからん。
お前の論点は対応しているかどうかではなく
その証明方法が論点になってる
お前がかけるかどうかは論点ではない。
DOM APIはどうあるべきかと聞かれたから
こうあるべきと答えただけ
論点わかってるか？
お前の理想なんかそれこそどうでもいいわ
それが理想だと思うなら、さっさとECMA internationalにproposalあげてこいよ
なぜproposalをあげないといけないの？
ライブラリで解決できることでしょう？
せっかくjsは非同期なのに、DOMは同期APIばっかってんで、非同期API検討されてなかったっけ？どうなったんだ？
その理屈だとどんなフレームワークもDOM APIを呼んでるだけですね（笑）
一体何がいいたいのでしょうか？
終わっていくものにしがみついてるのって本当にみっともないね
まともな議論なんて無理だろうな。あなたがしたい話題は「俺の話」ですか？
対応する機能とは何かを説明出来るんだよね？
わざわざ導入することの手間と、取り回しの悪さを言ってるんだが
あ、言い訳はしなくていいからね
クッソ効いててワロタｗｗｗ
最初に
> jQueryにもモジュールやビルドに対応する機能が搭載されてる
といってリンク出しただろ？
なんですぐ上を読まない？
「jquery なら～～」はただの余計なお世話でしかない
その後も延々とシェアがどうだとかそんなことはこの「質問スレ」で誰も聞いちゃいない
有名な「Rubyガイジ」とさして変わらない害悪さだな
> わざわざ導入することの手間と、取り回しの悪さを言ってるんだが
「わざわざ導入することの手間」がどれくらいあるか
知っていて言ってるの？
どんな手間があるのか言ってみてよ
jQ専用の質問スレ (
ttps://mevius.5ch.net/test/read.cgi/hp/1466750494/) あるのに わざわざ出張してきてまで「jQなら簡単なのに」
みたいなどうでも良い論点でふっかけてくるからな
マジで老害
ここで騒ぎ立ててないで向こうのスレで2月29日から放置されてる質問に答えてやれよｗｗ
そうだよ。だからECMAに提案なりしてDOM APIから変えないとライブラリで何やっても無駄。最終的にDOM API呼ぶだけなんだから。頭悪いね。
標準仕様にならなくても、あるべきだDOM APIの話をすることは可能だし
意見があるならばそれに反対することも可能。反対の話は出てないようだが
何がいいたいのかわからん時点でもう終わってるから
>jQueryはbabelやTypeScriptと一緒に使う
>ちゃんとjQueryにもモジュールやビルドに対応する機能が搭載されてる。
↑使ってる人は絶対こんなこと言わない
なぜでしょうか？
Webpack の薄いラッパー・Webpacker で、
bootstrap は、jquery, popper.js に依存しているから、
yarn add bootstrap jquery popper.js
React + Bootstrap でも同じで、最初からjQuery が入る。
違いは、Reactが仮想DOM で、jQueryが実DOM を更新することだけ
jQueryでの更新のタイミングは、仮想DOM に合わせないといけない。
nextTick とか
そのリンク先の何処に「jQueryの機能」が書いてあるんだ？
ビルドするのに機能とやらが必要なんて初耳だけど
例えばこれ
> Babel
> Babel is a next generation JavaScript compiler. One of the features is the ability to use
> ES6/ES2015 modules now, even though browsers do not yet support this feature natively.
>
> import $ from "jquery";
なにも工夫されてないモジュールがこんなふうに読み込めたりしない
読み込めるのはBabelなどに対応する機能がjQueryに実装されているから
ttp://https://code.jquery.com/jquery-3.5.1.js if ( typeof module === "object" && typeof module.exports === "object" ) {
// For CommonJS and CommonJS-like environments where a proper `window`
// is present, execute the factory and get jQuery.
// For environments that do not have a `window` with a `document`
// (such as Node.js), expose a factory as module.exports.
// This accentuates the need for the creation of a real `window`.
// e.g. var jQuery = require("jquery")(window);
// See ticket #14549 for more info.
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
// Note that for maximum portability, libraries that are not jQuery should
// declare themselves as anonymous modules, and avoid setting a global if an
// AMD loader is present. jQuery is a special case. For more information, see
//
ttp://https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}
> コードも脳もjQueryに依存してるようなやつと
> babelやTypeScriptを使いこなしてるようなやつとは
jQueryはbabelやTypeScriptと一緒に使う
tsの意味ねぇ～ｗｗｗ
>読み込めるのはBabelなどに対応する機能がjQueryに実装されているから
Babel関係ないやんwww
それにBabelやES6が出てくるより前の古いjQueryでもimportできるから
お前がjQueryを作ったわけじゃねえんだから勝手に他人の能力を自分の能力として使うなよガイジ
DOM APIに標準搭載したほうがいい
設定ファイル内で、ProvidePlugin を使って、グローバルに定義する
これで、各ファイルに、
import $ from 'jquery'
と書かなくてもよい
$: 'jquery',
'window.$': 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
_: 'lodash',
'window._': 'lodash',
チャンク分けが後付けされたとは言え、基本的にひとつのバンドルにまとめるという思想がhttp1.1時代の時代遅れの化石。
加えて設定APIがクソかつすぐ変わるゴミ。
管理者がぼんくらでHTTP/2有効になってないとこ多いよ
おかげでヘテムルやXserverの安物共用レンサバにパフォーマンスで負けてるの
受託の下請け仕事は、10年前のバックエンド環境でも大丈夫なように作らないとね
いまだにPHP5.2とか使っててのけぞることも年に1回はあるし
もうHTTP/3の時代だろ
HTTP/2無効のAWSに勝てるといことな
流石にどちらもHTTP/2無効で共用レンサバのほうが
性能がいいってことはありえないｗ
AWSがどれだけ高いマシン使ってるんだって話だよ
const brothers = (myself => {
return Array.prototype.filter.call(myself.parentNode.children, b => b !== myself);
})(document.querySelector('#myself'));
さっさと巣に帰れ
ワロタ
brothersとか使うやつだからなぁ
もともとしょうもないかｗ
自分以外の兄弟要素を取得するにはどうすればいいんでしょうか？
387 自分：Name_Not_Found[sage] 投稿日：2020/07/15(水) 12:10:15.56 ID:???
$(self).siblings();
ふつうのfunction関数もアロー関数もスコープは関数スコープとブロックスコープを作るよ。
だから作るスコープの観点では、両者に違いはない。
もし、function関数とアロー関数に構文以上の違いは無いんですかという質問だったなら話は別だが。
スコープは一緒なんですか
クラスのメソッドでthis使う時
アローだと関数内で使えてfunctionだとnot definedなるのはなぜですか？
意味が分からないのならthisを使うな
ttp://https://blog.uhy.ooo/entry/2020-05-30/this/ 勘違いしがちだけどthisは変数じゃないんだよ
なので変数のスコープと並べて考えちゃいかん
実際むしろ逆で
thisを持つスコープともたないスコープがあるんだが
いきなりそこから理解するのも難しいと思うので
とりあえず最初は、大雑把ですまんが
スコープや状況に応じてバインドされるものが変わるもの
程度に考えてみるのがいいかもしれない
そんでthisを使い倒して理解できた気になったら
改めてECMA Scriptの仕様書を読むと
より深く理解できると思う
>5. 変数アクセス・プロパティアクセス以外の方法で得られた関数の場合
>(0, obj.method)(); // true が表示される
>(0, obj.strictMethod)(); // true が表示される
↑この書き方なんなの？
「コンマ演算子を経由することでReferenceではなく値にする」とあるけど？？
function f() {
console.log('this in f:', this);
}
function g() {
'use strict';
console.log('this in g:', this);
}
f(); //=> this in f: グローバルオブジェクト ( ブラウザ環境なら window )
(0, f)(); //=> this in f: グローバルオブジェクト ( ブラウザ環境なら window )
g(); //=> 'this in g: undefined
(0, g)(); //=> 'this in g: undefined
var obj = {f, g};
obj.f(); //=> this in f: obj
(0, obj.f)(); //=> this in f: グローバルオブジェクト ( ブラウザ環境なら window )
obj.g(); //=> 'this in g: obj
(0, obj.g)(); //=> 'this in g: undefined
ガンマ演算子の神業。
自分で意識して使ったことなかったわ
Reference型はJSの基本中の基本なのでここで抑えとくのが吉
簡単に説明すると、「 . 」演算子はReference型を作る
要するにo={p:42}のとき、o.pが返す値は実は42ではない
o.pはReference型を返す
そのReference型にはどういう情報が含まれているかというと、
oというベースに対してpという値がアクセスされてますよという内容
もしそうなっていないと、
function method(){return this}
obj = {method}
のとき、
methodとobj.methodが区別がつけれなくなる
methodとobj.methodがReference型によって区別がつくようになっているから
method()とobj.method()としたときに
呼ばれる関数はベースをthisとして受け取って振る舞いを変えるといったことが可能になる
そして「 ， 」演算子はこのReference型を解決してしまうということ
横からだが勉強になった
疑問に思ったのはそこじゃなかったんだが勉強になった
ただthisのbindingを知るという目的だと
コールサイトでのレシーバの有無だけで十分理解できるので
ちょっと実装の詳細に入り込みすぎてる気もした
You don’t know JSでthisのbindルールが
以下の4ルールでまとめられてて個人的にはわかりやすかったかな
1. new binding
2. implicit binding (called with context)
3. explicit binding (call/apply)
4. default binding (global/undefined)
thisはすべての関数の引数についていると考えればいいのよ。
ここでいう関数っていうのはfunctionのこと
functionと書いた場合、第ゼロ引数とでも呼ばれるものがあると考えればいい
つまり function foo(this, a, b, c)
で、アロー関数は、function使わないだろ？だから第ゼロ引数のthisは存在しない
JavaScript のthis は、window を指したりする場合があるなど、ややこしいから、
jQuery, Haxe などでは、this の挙動が変えられた
that = this とかやってるレガシーなコードに触るときくらい
それ以外はclassの中くらいにしておいた方が良い
初心者は特に
のようにケースベースで覚えようとするから理解できない
仕様ベースで覚えれば簡単に理解できる
> つまり function foo(this, a, b, c)
どういうことかと言うと
function foo(this, a, b, c) {
$(element).on('click', function(this, event) {
// thisはなにか？
});
}
こういうこと。この書き方でthisが何かというと、そりゃ
呼び出し元が渡したオブジェクトに決まってるだろ？
引数にあるんだから当たり前。渡す方は自由にthisの内容を変えて渡せる
一方、アロー関数はfunctionがないのだからthisは存在しない
function foo(this, a, b, c) {
$(element).on('click', event => { } );
}
その場合のthisはfoo関数に渡されたthisに決まってるだろ？
こういう話。thisは全てこれで説明できる。
内部の実装とか仕様とか考えてないで、一番単純な方法で理解しよう
Javaなどの言語とJavaScriptはthisが全く同じであることが理解できる
違うのはthisではなく呼び出し側なんだよ。
function foo(this, a, b, c) { } という関数をJavaScriptで呼び出す場合
一般的には obj.foo(a, b, c) という呼び出し方をする。
このfooのドットの左側、これがthisとして渡される。
これはJavaなどでも同じなんだよ
な？thisの仕様は同じだろ？
違いはJavaScriptは。obj.foo だけではなく obj.call や obj.apply で
thisを変更して呼び出す方法があるってこと
板違い
プログラム板じゃなくてプログラマ板にでも行け
ttps://medaka.5ch.net/prog/ 実際の所は関数呼び出し時にthisArgが何になるかはReference値に依存していて
呼び出し方や呼び出し元などが本質的に結びついているわけではないが、
Reference値を壊さずに関数呼び出しを行う形は限られてくるので
superなど一部を除いて実際コード上の位置関係と形で考えることができる
,425の説明は
何がthisとして渡されるのかは理解してるけれど
アロー関数のthisが理解できませんという激レアさん以外に意味あるのかな
なぜ、アローの方が簡単なのか良くわかる、素晴らしい説明！
JavaScript の場合、非同期処理をよく使うから、
上の方は、外側・内側の関数のコンテキストが異なることが多い
だから、this が鬼門
jQuery は、that = this みたいに書いてるけど、これが分かりやすい
さらに分からないReference値なるものを
定義も示さず連呼するのに比べれば
わかりやすく説明しようという努力の分だけマシだと思う
説明がわかりにくい人はその物事を真には理解していない
それで分かったつもりになっちゃって僕は原子炉に詳しいんだ爆発だしｗ
物事をものすごく理解していても説明能力に欠ければ分かりやすい説明はできない
例えばすーぱーぷろぐらまー（宇宙人）が宇宙語で人間にがんばって説明しても理解されない
辞は達するのみ
そして相手がチンパン並みの理解力ならいくら分かりやすい説明しても無駄
結局は双方のバランスが大事
は質問に対する回答をしているわけじゃないでしょ
の言うように単に連呼してる人なんて実際にはいない
ただ自分がこれだけの説明を聞いても理解できないし、かと言って調べるのも面倒で
その苛立ちから横槍を入れているようにしか見えない
自分が聞きたいことがあるならそれを素直に質問すればとかが教えてくれるだろうに
なんで回答者が自分から聞かれてないことまで解説しないといけないのさ?
ここは自ら学ぶ為のスレだよ?
そんなにイライラしなくてもw
自分がちゃんと理解してないから説明できない
仮に相対性理論をゴルフで説明できたところで、相手は木星まで光速の70%で行って戻ってきたときの時間の遅れを計算できるようにはならない。理解したつもりにさせられてるだけだからだ。
こんなものは詐欺師のテクニックや催眠術みたいなもの。
そうして僕は原子力に詳しいんだ爆発が起きる。
知ったか量産の害悪でしかない。
技術者は正確性を重要視するあまり聞き手にとって不要な詳細を語りたがる
相手を見て情報の取捨選択が出来ない
常に実装の詳細がダダ漏れの設計と同じ
相手に本当に理解させることは目的ではない
なぜいきなり100点を取らせようとするのか
そういって数学とは何たるかを小学一年生に語るのであった。
逆に詳細を聞きたがる人もそれなりにいるよね
話しても良いけど
理解できる知識と経験ないでしょ？と思う
(
<
)
間違い探しの答えは5箇所！
そうですね！
if( !( x+y<=a+b ))とif( x+y>a+b )または
if( !( x+y<a+b ))とif( x+y>=a+b )なら、
論理的には同じ。
なるほど！ありがとうございます
旧来のcommon jsモジュールは.jsのまま。esモジュールにするなら.mjs
理解できるもできないも
理解しようとするもしないも
すべて質問者の責任
回答者がオシメの面倒まで見てやる必要はない
急にどうしたwww
ライブドアブログで作成されているものなど
知ってるフリかどうかなんて結局お前の第六感しか根拠のない思い込みの話でしょ?
客観的に回答のここが間違ってると言うのなら分かるが
「俺は間違ってない！」
まあそんなところ、RSSでなくATOMとかも
ただあのアンテナサイトの存在価値は
現在のあれが登場した時から一向に理解できん
きっちりジャンル分けされていればまだ使えるかもしれませんね
google apiのものですけど
ttp://https://ideone.com/07df2i ライブドアブログでは動いたのですが、ローカルではだめでした
コンソールを見てもエラーは出ないです
CDN は、ライブドアとしか契約していないのかも
契約すれば、使えるかも知れないけど
どうせメモ帳にhtml書いて、ダブルクリックで開いて、読み込まれない！って言ってんだろｗ
importの仕方がrequireからimport fromに変わるだけですか？
$(this).css('background','red');
})
のこの$(this)が$("div")を指す理由はなんですか？
Javaではthisというのはそれを定義したクラスのインスタンスを指すと習いましたが。
こっちで回答した
JavaScript情報交換所(プログラミング既習者専用） [無断転載禁止]©2ch.net
ttps://mevius.5ch.net/test/read.cgi/tech/1449440793/ とりあえずMDNの説明を一通り読むのを勧める
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this#As_a_DOM_event_handler ttp://https://www.nanigoto.com/gy%E5%9C%B0%E5%9B%B3%E5%A4%89%E6%8F%9B/ yahooマップでembedした地図を、googleマップに置き換えられる言語というのはありますか？どのようにするのかあまり想像できません。
スクレイピングでしょうか？
ない。しかもライセンス違反
一般的にthisが何にバインドされてるかは
その関数と状況によって変わる
たとえばイベントリスナの場合は
jQueryのonも、標準のaddEventListenerでも
eventTargetになってる
そんでJSでは、callやapplyを使って
お好みのものをthisにバインドすることができる
それを利用してjQueryは
onの中ではeventTargetを
eachの中ではアイテムをthisにバインドしている
$(this).css('background','red');
})
エラーになるけど？
これがjQueryと同じようにエラーになる理由わかりますか？
なぜDOM APIはjQueryと同じなのでしょうか？
target.addEventListener(() => {
this.style.background = 'red';
})
エラーになる理由はDOM APIとは関係ないしな。
専用スレに消えてくれ
ttps://mevius.5ch.net/test/read.cgi/hp/1466750494/ それについてはの人の説明がわかりやすい
そもそもが質問してるクラスのメソッドでthisを使う場合に
通常関数だとundefinedになるケースってどういうの？
arrow = () => this
normal() {
return this
}
}
var foo = new Foo()
foo.arrow() //=> ?
foo.normal() //=> ?
ももクラスのメソッドと
どう関係あると思ったのか俺にはよくわからん
functionだと"use strict"の場合か関数にundefinedをbindした場合にthisがundefinedになる。
アロー関数はそもそもthisを持たないが、クロージャなんで外のスコープにthisがあればそれが使われる。
それ「クラスのメソッドでthis使う時」と何か関係ある？
意味のない回答をして何か説明した気になるのはやめて欲しい
質問者が理解してないポイントを知ろうとせずに
とにかく自分の知ってることを説明したがる独り善がりな人たちの存在で質スレは成り立ってる
ま、あきらめろ
class内はstrictモードです、で終了なんだがな
なるほど
そこがわかってないから「クラスのメソッドでthis使う時」って言い方をしてるのか
内部の実装はともかく、理解するのにはこれが一番シンプル
414 自分：Name_Not_Found[sage] 投稿日：2020/07/16(木) 00:56:57.90 ID:???
thisはすべての関数の引数についていると考えればいいのよ。
ここでいう関数っていうのはfunctionのこと
functionと書いた場合、第ゼロ引数とでも呼ばれるものがあると考えればいい
つまり function foo(this, a, b, c)
で、アロー関数は、function使わないだろ？だから第ゼロ引数のthisは存在しない
素で呼び出した時にthisに何が入るか、
オブジェクト．の後ろに付けて呼び出した時にthisに何が入るか、
第ゼロ引数と考えただけじゃ全然どうなるか分からない。
すべて「呼び出したときに入れたやつ」で説明がつく
そこからかｗ
ちゃんとそう質問を書かないとだれもわからんぞ。
組合せ爆発を避けられる
呼び出すときにthisとして何が渡されるかを知るだけでよくなる
通常関数には第ゼロ引数としてthisがあると考えれば良い
という話ならよく分かる
でもthisが面倒くさいのは呼び出すときに何が渡されるかが状況次第で変わるところなので
そこをカバーせずに「これがthisを簡単に理解する方法だぜ(ﾄﾞﾔｯ)」って言われるとそれは違うだろってなる
それはthisに限らない。第一引数だって何が渡されるか状況次第で変わる
引数は全部明示的に渡すから呼び出し元を見れば理解できないやつはいない
JSの仕様で大半の場合暗黙的に渡されるthisとは違う
だからこの問題はthisは暗黙に見えるが
指定して渡していると考えれば、難しいことは何もないという話
状況次第で変わるという以外に何をどう理解したいわけ？それ書かなきゃ。
a.html b.html c.js
三つのファイルが同一フォルダにあったとします。
a.htmlにあるbuttonタグををクリックすることでb.htmlに飛びb.htmlの背景色を変更するといった動作は可能でしょうか？
何がthisとして指定されてるかどう判別するの？
「どういう状況であれば、thisが何になるのか？」
それが分からなければ役に立たないだろ
このスレでこれまで散々色んな人が色んな抽象度で説明してきただろ
でも何がthisとして渡ってくるかは渡す側によって決められるのだから
DOM APIのイベントハンドラ上でのthisのように
APIによってthisがどんなものになるかは異なる
それは第一引数にどんなものが渡ってくるのかと同じで
そういうAPIの仕様として覚えないといけないこと
だけど基本的には"this"という名前が付いてるものなんだから
ハチャメチャな使いかたはせず比較的その名が示すに自然な使われ方がされるのが通常
何れにせよそこは理屈ではなく覚えるしか無い
それをみんな言ってるのよ
理解した？
コミュニケーションの基本がなってない。
読み込んだときに頭出し（文書の右端に移る）ができるようにしたいんだが。
大昔は html に
body onLoad="atamadasi()" と書いて、
スクリプトに
function atamadasi()
{
if(document.all)
document.all("atamadasi").scrollIntoView();
}
と書けばよかったが、いまはどうしたらいいんだろ。
ブラウザによってはCSSだけで頭出しするらしいが火狐はCSSだけじゃ文書の最後（左端）を表示してしまう。
ttp://https://developer.hatenastaff.com/entry/2018/09/11/152905 今はまともになったんだろうか…
document.allに渡してる'atamadashi'ってID名だっけ？
だったら、
document.getElementById('atamadashi').scrollIntoView();
か
document.querySelector('#atamadashi').scrollIntoView();
で同等。
縦書きのブラウザごとの挙動は知らん。
ありがとう。ID名だっけと念押しされて分かったわ。
doby onload=atamadasi() で読み込んで、h1 id="なんとか" とすれば動くんだな。
id を body とか div につけても動かない。
確かにコンテナがターゲットなら文書の末尾も対象だから動かなくても理屈にかなっている。
去年一杯で仕様出揃って、今年前半で著名ブラウザは実装したから今はまとも
ただし例によってSafariを除く
別の対応をしないといけないってことね
Safari自体はHTML5ムーブメント直後に一番最初に縦書きに力を入れたブラウザだし
という書き方の最後の ? true : false;
はどういう意味ですか？
const isDark = this.getAttribute("is-dark") === "true"
でも同じ
そもそも人間が書いたコードは人間が書いたものなんだから必ずしも崇高な意味がそこにあると思うな
たかが人間が書いたものなんだから
アスペかよ
三項演算子すらも知らない。
何が知りたいのかも具体的に書けない人はお呼びではありません。
それとこういう解答は誰のためにもならないので要りません。
に対してそれは三項演算子だよと答えてあげれば良いではありませんか。
教えてあげますが、が釣り質問レベルと思われてるから、
皆さん呆れてあえて率直な解答が付いてないのですよ。
それはアスペでなければ分かりますよね。
三項演算子を知らないくらいでなんでそんなに人を馬鹿にするのかね？
検索ワードが解らなくて困りました
なんとなく 文字列"true”をbooreanに変えたいと言うのは予想付きましたが
ここがどこかお忘れで？
ここはサイト的にも板的にもスレ的にもスパルタ方針
甘々で大間違いの解答が欲しければ知恵遅れに行けば？
検索ワードとか要らないから
数年前からGoogle検索で記号も検索できる様になってるから
「?:」とかで検索すれば一瞬でわかること
現代人、特にプログラミングの世界に足を突っ込もうとする者の常識で
それくらいの検索スキルの無いもの、努力しないものはお呼びでない
そもそもJSのチュートリアルをやってれば絶対にわかること
チュートリアルもまともにやってないのに質問しに来るのが悪い
チュートリアルとしては微妙だがまずはMDNを10編読んで
その後に10個の適当なサイトでチュートリアルをこなして
最後にMDNを隅から隅まで読んでから質問しに来い
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript 君がある種の知恵遅れなことはよく分かった。
ある意味様式美
アスペ呼ばわりされて悔しかったん？
WHATWGの創設&主要メンバーのはずなのに
いまいち対応が遅かったり特殊だったりするよなSafari
ttp://https://css-tricks.com/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns/ Appleが実装拒否したAPI一覧:
- Web Bluetooth
- Web MIDI API
- Magnetometer API
- Web NFC API
- Device Memory API
- Network Information API
- Battery Status API
- Web Bluetooth Scanning
- Ambient Light Sensor
- HDCP Policy Check extension for EME
- Proximity Sensor
- WebHID
- Serial API
- Web USB
- Geolocation Sensor (background geolocation)
- User Idle Detection
俺ら下々の者のために日夜大企業のプライバシー侵害工作に抵抗してくださっているApple様に、敬礼！(^o^ゞ
アップルは
ブラウザベンダーでありスマホメーカーでもあるから
ってとこだろうな…
Safariだけが動かないっていうのが増えそうだよな
ままならんなあ
今WHATWGって機能してんのかな？
Googleのほうが中国的気質を感じる
中国政府的な気質
してないんかな？
今もHTML LSは更新され続けてる気はするんだが
何言ってるの？
やってるよと優しく言ってやりゃいいのにツンデレか
それらのAPIの幾つかは
他のブラウザでもインストールしないと使えなかったり
機能が制限されたり、うざいプロンプトが出たりするから
高機能なことがしたければChrome系ブラウザでインストールしてください
ということで当分は問題がないと思うよ
俺は普通のWebサイトとして公開してシリアルポート叩きたいんだという
人には我慢してもらわないといけないけどね
Appleはまだブランドグループとしてひとくくりに言えても
Googleってその中縦割りで気質がバラバラだからひとくくりにできないでしょ
５ｃｈで優しくとかキモすぎ
匿名掲示板上のただの文字に優しいとか厳しいとかないから
→そんなことはなかった
2ちゃんは優しかった！5ちゃんは荒れてる！
→そんなことはなかった
おじいちゃん敗走ｗ
おら、優しくしろよな、エスパーしろよな
とか無理がありすぎ
初心者オーラを出すだけでフルボッコか無視だった
だから別個に初心者向けスレと超初心者向けスレがあった
コミュニティが不足なのか
そうでもなかったような気もする
Macしか持ってなくてIEで動かないコードしか書けないのに、ひたすら答えたがるNullってコテとかいたし
今と変わらんような、ほのぼのしていたような
そんで奴を隔離するために初心者向けに
手取り足取り教えるJavaScriptスレに分岐したりもした思い出
今はRubyガイジとjQueryおじさんかｗ
そういうことあんまり言わんほうが良いで
今もしつこくこのスレに残ってるのはその「隔離」された側だからな
俺も全盛期は４，５人くらいの人格で１スレ２００，３００レスとか書いてたわ
自分の為の隔離スレも作ったし、同じくらい良いことをした
jQueryは昔からサーバーサイドとの連携
（ページはサーバーサイドで動的に生成。JavaScriptはごくわずか）
だからこれからも主流であり続けるよ
>俺も全盛期は４，５人くらいの人格で１スレ２００，３００レスとか書いてたわ
なにそれ怖い( ；∀；)
スレ全盛期は冗談抜きで２、３日で１スレ埋まってた
Intersection Observerはもう不要なん？
アプリケーションのための内部動作のコードを書けないと
単純にサイトの外側はGPT-3の進化版みたいな自動生産機で作れるようになってしまうんだろうな
こりゃ20年後には人間がプログラミングする時代は終わってるかもしれんぞ
ではそれらを使う「目的」を言ってください
手段と目的を履き違えないようにね（笑）
20年前にJSメーリングリストで同じこと書いたけど
いつになったらそんな時代来るんだ( ；∀；)
20年前レベルのWebサイトならテンプレートやオーサリングツールで作れる
ただそれが将来に渡っても続くということで
いつまで進歩についていけるかという問題だ
textareaに
a b c d
e f g h
i j k l
のように半角スペース区切りで任意の行を入力してbutton押下で
行区切りと半角スペース区切りで多次元配列に格納したいのです
最も効率的な書き方を教えていただきたいのです
結果として以下のようになるようにしたいです
hoge = [
[a, b, c, d],
[e, f, g, h],
[i, j, k, l]
];
よろしくお願い致します
ありがとうございます
おかげで自分で書けました
$('#submit').click(function() {
var data = $('#data').val();
var data = data.split('\n');
for (let i = 0; i < data.length; i++) {
data[i] = data[i].split(' ');
}
$('#result').text(data[1][1]);
});
小さいし同じキーバインドで3000円のやつ作ったらバカ売れするんじゃないでしょうか
最近は3Dプリンタと組み合わせたらより柔軟に安価に作れる
キーバインドは関係ない
メンブレンじゃなく独立したキースイッチでかつ静電容量無接点方式ってのが高い理由
ついでにキートップも安いキーボードに比べれば高品質
メンブレンのHHKB Liteなら昔は3000円台で買えた
バカ売れするなら販売終了にはならない
Ruby で作った。
JavaScript にも標準か、Lodash に、map があるかも？
# 配列の配列。改行は削除して、空白で分離する
p ary = <<"EOT".lines( chomp: true ).map{ |str| str.split }
a
b c
d e f
EOT
出力
[ ["a"], ["b", "c"], ["d", "e", "f"] ]
なるほどなー
liteっていうのが昔あったんですかそれほしかったな
むしろ売れすぎて、高い方が売れなくなって廃盤になった可能性もありますね、
他社が類似商品出せないのは不思議
idのないinputボタンですし、どう指定したらいいんでしょうか？
IDじゃなくてもCLASS名とか何かついてるだろ
とりあえずその周辺のソース全部貼ってみ
一般的な場合と思って幾つか解答を示してもらえれば、こちらで試して成否を言います
ttp://https://imgmaze.pw/egqgKEkXTMKrUgvpYMQjtdN4NQ_28PBwGA.php ここどす
tanyaたん
俺様が使えるかどうか審査してやるからよ
てめえらが無駄な労力使っても俺様にはどうでもいいことなんだよ
586ですが、585とは無関係です
だったらリンク貼れよ
[
{team:'a',pt:4},
{team:'a',pt:2},
{team:'b',pt:3},
{team:'b',pt:6},
{team:'c',pt:0},
{team:'c',pt:2}
]
同じチーム内で点数順にソートしつつ、チームも点数順にソートする
ということをやるにはどうすれば良いんでしょうか？
下の並び順が理想です
[
{team:'b',pt:6},
{team:'b',pt:3},
{team:'a',pt:4},
{team:'a',pt:2},
{team:'c',pt:2},
{team:'c',pt:0}
]
すみませんptの数値が多い順にという意味でした
1,2,3,4,5のチームと
0,0,0,0,5のチームは
どちらが上でもいいのかい?
本当はptにはもっとバラバラな数値が入っています
ptの最高点が同じ場合はlocaleCompareを使ってソートしようとしていました
できませんでしたけど…
ptが同じ時はteam名でソートするという意味です
> ptが同じ時はteam名でソートするという意味です
いや違うでしょ。それでどうやったら
の結果になるのよ
var 下の配列 = [
{team: 'a', pt: 4},
{team: 'a', pt: 2},
{team: 'b', pt: 3},
{team: 'b', pt: 6},
{team: 'c', pt: 0},
{team: 'c', pt: 2},
];
// pt順に並べてからチームごとにまとめる
var result = Object.values(下の配列.sort((a, b) => b.pt - a.pt).reduce((acc, row) => {
acc[row.team] = [...(acc[row.team] || []), row];
return acc;
}, {}))
// チームを合計点数でソート
.sort((teamA, teamB) => teamB.reduce((acc, row) => acc + row.pt) - teamA.reduce((acc, row) => acc + row.pt))
// チームごとにまとめていたのを解除
.flat();
console.log(result);
// 結果↓
[
{team: "b", pt: 6},
{team: "b", pt: 3},
{team: "a", pt: 4},
{team: "a", pt: 2},
{team: "c", pt: 2},
{team: "c", pt: 0}
]
var result = 下の配列.sort((a, b) => a.pt === b.pt ? -Intl.Collator('ja').compare(b.team, a.team) : b.pt - a.pt);
// 結果↓
[
{team: "b", pt: 6},
{team: "a", pt: 4},
{team: "b", pt: 3},
{team: "c", pt: 2},
{team: "a", pt: 2},
{team: "c", pt: 0}
]
function onclick(){
img.style.display = !img.style.display;
}
これでは反転しないようです。
別にboolを用意するでしょうか？
-Intl.CollatorはIntl.Collatorの間違い。a,b入れ換えのとき消し忘れた
これは酷い
プロパティの数値は２つとは限りませんものね
今の.displayの値をconsole.logで見てみな。
getelementbytagnameでinput取得してもclickは使えないようです
使えますよ
要素を指定する方法を学びましょう
idだとclickが使えます
本当に同じものを取得してる？
まさかHTMLCollectionをclick()してるとかないよね？
しかし絞り込む時にidなどの識別子がないといけないわけですよね。
配列とはちと違うんだけどな
getElementsByTagName()
これよく見るとElementsって複数形になってるじゃろ
なので、該当する要素を詰め込んだコレクションていう
配列に似たオブジェクトで返ってくる
そんでもう書かれてるけど今となっては古いので
querySelectorか、querySelectorAll使う方がいい
querySelectorAllの返り値は
コレクションではなくノードリストね
使い勝手はそれほど変わらんと思うけど
ノードリストは後発なだけに
持ってるメソッドが洗練されてる
調べましたが、要素でもidでもなんでも取得出来るみたいですね
なっ、、、なんだってー！！？
> そんでもう書かれてるけど今となっては古いので
> querySelectorか、querySelectorAll使う方がいい
qiitaの要素取得を説明しているページだと
ttps://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4 querySelectorとquerySelectorAllは遅いと書かれてるんで出来るだけ使わないようにしてきたんだけどもどっちが正しいんだ……
おおっ！ありがとうございます
回答頂いた「pt順に並べて…」のコード+flat();で大丈夫そうです
ただ、Array.reduceの所が難解すぎてなぜこの解になるのかわからないです
少し解説してもらえるとありがたいのですが
ググってヒットしたページをいくつか読んでもちんぷんかんぷんでした
ttp://https://ideone.com/tUl75p clickを使用して画像を消したいのですが、このコードの場合は上手く消えないです
しかしalertは動作します
何が原因かわかりませんか？
なんで遅いと書かれたら使わないんだ？
reduceはその他のアルゴリズムを実装するための基礎だと考えたほうが良い
うそは言わないように
配列は配列
使えるのはforEachだけ！
うそは言わないように
うそは言わないように
配列風オブジェクトは配列ではない
そのまま張り付けてみたけど消えるぞ？
ttp://https://jsfiddle.net/ho9uvj7x/ 初期状態のtoggleがtrueだからでしょ
トグル操作は標準機能を使った方が間違いが少ない
ttp://https://jsfiddle.net/gwqh87v6/ // （A） pt順(降順)に並べる
var result = 下の配列.sort((a, b) => b.pt - a.pt); // ここまでの結果↓
[
{ team: "b", pt: 6 },
{ team: "a", pt: 4 },
{ team: "b", pt: 3 },
{ team: "a", pt: 2 },
{ team: "c", pt: 2 },
{ team: "c", pt: 0 }
]
// （B） テームごとにまとめる
result = result.reduce((acc, row) => {
acc[row.team] = [...(acc[row.team] || []), row];
return acc;
}, {}); // ここまでの結果↓
{
b: [
{ team: "b", pt: 6 },
{ team: "b", pt: 3 }
],
a: [
{ team: "a", pt: 4 },
{ team: "a", pt: 2 }
],
c: [
{ team: "c", pt: 2 },
{ team: "c", pt: 0 }
]
}
// （C） チームごとにまとめるために使っただけなので、キーを捨て値だけで（配列の）配列にする。
result = Object.values(result); // ここまでの結果…は改行制限が厳しいので省略。かつ次レスに続く
（B）のところが分かりにくいのだと思うので…
（B） テームごとにまとめる
result = result.reduce((acc, row) => {
acc[row.team] = [...(acc[row.team] || []), row];
return acc;
}, {});
は、以下for文を使ったプログラムと同じ意味。mapやreduceに慣れるとfor文あまり書かなくなってしまう…
var temp = {};
for (let row of result) {
if (!temp[row.team]) { // この条件式はプロトタイプをたどってしまうので !temp.hasOwnProperty(row.team) のほうがよい
temp[row.team] = []; // 初めてのチームの場合、必ずこちらを通り、そのチーム名をキーとして空配列を値とするエントリーを作る
}
temp[row.team].push(row); // 上の条件式でtemp[row.team]は配列であることが確定しているので、push
}
result = temp;
分からなければconsole.logなど入れていろいろ見てみてください
配列は配列
Arrayのインスタンスだけが配列なわけではない
TypedArrayだってあるし
本質的に違わないものをあえてグループ分けする意味はなんだ？
とりあえずArray.reduceの挙動はなんとかつかめました
後ろにあるデフォルト値の役割と最初の返値が空なことに気がつかないと意味不明ですねこれ…
ともあれ大変勉強になりました
手取り足取りどうもありがとうございました
哲学の唯名論的には、説明や理解に便利だからだろう。
lengthプロパティとspliceメソッドがあれば配列、それ以外の配列っぽいのはarray-likeってのが実用的。
あれ？これなんでmapで失敗するの？
→配列じゃなくて配列風オブジェクトだからだよ
これで済む。
それに包み隠さず詳しく説明すべきだと言うなら、その説明は分類を進め詳細化の方向に進むはずで、どれもこれも配列だよ、のような統一化の方向には行かないだろう。
ary = [
{team:'a',pt:4},
{team:'a',pt:2},
{team:'b',pt:3},
{team:'b',pt:6},
{team:'c',pt:0},
{team:'c',pt:2}
]
;[...ary.sort((a,b)=>b.pt-a.pt).reduce((m,v)=>m.set(v.team,(m.get(v.team)??[]).concat(v.pt)),new Map)].flatMap(o=>o[1].map(p=>({team:o[0],pt:p})))
console.log(ary)
// 0: {team: "b", pt: 6}
// 1: {team: "b", pt: 3}
// 2: {team: "a", pt: 4}
// 3: {team: "a", pt: 2}
// 4: {team: "c", pt: 2}
// 5: {team: "c", pt: 0}
その理屈では型付配列は配列ではないということ？
これなんでmapで失敗するの？
→mapメソッドを持っていないから
となるのが普通では？
そもそもmapって繰り返しラップするメソッドなんだから
別に配列だけに強く結びついてるものと考えるのは変でしょ
例えばその概念はイテレータにだって適応できるわけでそういう提案もあるし
ttp://https://github.com/tc39/proposal-iterator-helpers Mapに増やそうっていう議論も昔っからよくされて来たでしょ
ttp://https://github.com/tc39/proposal-set-methods#semirelevant-previous-discussions そんなことに理由はないし、そんなことを一々考えて呼んだりしないだろ
今までそう呼んできたからそう呼ぶというだけで
そこに理屈を持ち出すのは間違い
だれが何をどう呼ぼうが呼ぶまいが自由で
ここはそれを議論する場所ではない
あと生きてる奴を配列で括るのは流石にマズくね？
JavaScriptではarrayとarray-like objectをなぜわざわざ区別してるのかを考えればすむこと
誰もarrayとarray-like objectの話なんてしてないでしょーがｗ
arrayとarray-like objectをまとめるべきかどうかというのとは違うでしょ
例えばArray.isArrayに頼ろうと思っても
そいつは内部メソッドしか見てないから
全くArrayの振る舞いをしないオブジェクトでもtrueと判定してしまう
逆にProxyでその内部メソッドをそっくり真似たオブジェクトを作って
振る舞い性質は完全にArrayとおなじでもisArrayはfalseなわけだし
Array ≡ 配列
Array Like → 配列のような（配列ではない）
Arrayではない → 配列ではない
②番の考え方
Array ∈ 配列
Array Like → Arrayのような（Arrayではない）
Arrayではない → 配列ではあるかもしれない
いいわけがましいやつだな
そんなんで人を嘘つきどうこう言ってどうすんのさ
がHTMLCollectionも配列だと主張したところから始まってる
JavaScriptやってる人ならどっちが正しいかなんてみんな知ってるよね
いいわけがましいやつ以外は
array-like objectの日本語訳が「配列風オブジェクト」
さてHTMLCollectionは配列ですか？ 配列風オブジェクトですか？
それとも配列風オブジェクトとも呼ばれる配列w？？
君こそが勘違い君だぞw
Arrayを配列と翻訳したとしても
配列がArrayと同一とは言えないのでは？
足りない言葉を定義しようというのが間違ってる
「プロトタイプ」と言ったとき少なくとも２通りは思い浮かべるように
言葉というのは一対一で結びついてるものではない
Arrayの配列に関しては「Array配列」と言えばいいだろ
ttp://https://developer.mozilla.org/ja/docs/Web/API/NodeList 配列と訳していない
ただ俺はHTMLCollectionを配列とは絶対呼ばない
次の瞬間length変わってるかも知れないのに
じゃあ"Date"は日付と訳すのかという事になる
そういうことじゃなくてJSで配列と言えばArrayを思い浮かべるし
Arrayといえば配列だなと考えるということでしょ
間を取って
HTMLCollectionは配列ではない
NodeListなら配列である
これで今回はFA
同じようにjQueryオブジェクト化できて、同じように扱えるようになってるぞ
MDNはボランティアによって訳されています。
型の名前としての大文字始まりのArrayは訳さず使うという気持ちはよく理解できるが
Arrayを配列と訳してる箇所も多々ある(というか訳してるほうが多い)
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array ttp://https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays 違う違う
Arrayは配列なのだからArrayを配列と説明するのは当然でしょ？
自分が言いたかったのはArrayとは違うよというのを配列とは違うよと説明してないということ
Arrayが配列であるとはみんな思ってるけど
配列をArrayしか認めないかどうかで議論になっているのだから
そういうコンテキストでのニュアンスを見ないとって思ったけど
もうどうでもいいけど
Lodash を使った。
これは難問
const grouped_ary = _( data )
.groupBy( item => item.team ) // チーム名でグループ化する
// 各グループを、pt の最も大きいもので、ソートする。=> {team:'b',pt:6}
.sortBy( group => _.maxBy( group, 'pt' ).pt )
.reverse( ) // pt の大きい順
.value( )
// 各グループ内で、pt の大きい順にソート
grouped_ary.forEach( group => group.sort( ( a, b ) => b.pt - a.pt ) )
res = _.flatten( grouped_ary ) // 2 × 3 の配列を、1つの配列にする
console.log( res )
言わんとしてることはわからんでもないけど
広義で配列だと言いたいのでしょう
でも
const tmp = document.getElementsByTagName();
tmp.sort();
→ tmp.sort is not a function
tmp.pop();
→ tmp.pop is not a function
となったり
Array.isArray(tmp);
→ false
なわけだから
なんのエクスキューズもなくコレクションが配列だと言い張るのは
混乱の元だと思うな
特に断りがない限りArrayオブジェクトを指すものだと
一般的には考えられてると思うな、俺は
これは個人的な意見だが
635
633
やりなおしてみまっす(´・ω・`)
嘘つきさん、いつまで言い訳続けるの？
自分が言いたいのは
array-likeを配列と積極的に認めろと言うことじゃなくて
最初の騒動見てて、確かにarray-likeは配列ではないといいきるのはどうかなと思ったから
配列だと言い切るのも配列でないと言い切るのも慎重にした方がいいんじゃないかな
ってくらいだよ
禅問答なら寺でやれ。仕事の邪魔。
ttp://https://sleazyfork.org/en/scripts/2641-imagehost-redirect/code このimagehost redirectというコードなんですが、ロダのインプットタグをスキップ出来るというものです。これはどうやってスキップしているでしょうか？
少し古いもんですが、、、
functionで定義されてる関数をそれぞれ見ていけばどうやってるかわかるでしょ
もしわからないようなら潔く諦めて
もう少しJSとWeb APIを勉強してから出直したほうが良いと思うよ
インプットタグを取得してclickだけで行けるとおもってtampermonkeyで試したんですが、上手くいかんです
回答：見ればわかるだろ、わからないなら勉強しろ
見てわかるならこのスレに来ないと思うが
わからないなら勉強しろというならこのスレは何のためにあるのか
どこを見ればいいかのちゃんと教えてるじゃん
function imageHasId(imageid){
var image = document.getElementById(imageid);
if(image != null){
window.location.assign(image.src);
}
}
例えばimageHasId()ならwindow.location.assign()を使ってる
もし上のコード見てもそれが理解できないなら勉強して出直したほうが良いよって話
上手くいかない原因と、他人のスクリプトがどういう原理で動いているかは別の問題
上手くいかない原因が知りたいなら
自分の書いたスクリプトと対象サイトのURLを公開しないと誰にも相手にされないよ
著作権法上問題になりかねないサイトからコンテンツをダウンロードしようとしてるので
URLは開かせないってことだったのか
やっと理解できた
まずターゲットのサイトを定めてから質問してくれ
URLに問題があるなら練習がてら無難なサイトを選べばいい
色んなサイトで上手く行きませんて言われても色んな可能性があるねとしか答えようがない
それだけ無駄レス書く隙あったらコードよこせコラ
2chで手取り足取り聞こうとするな
時代遅れ野郎が
動画配信サイトで作業風景公開して
やってきた人に聞けばいいだろ
いまjsfiddleでArray.reduceのコールバックの引数を
コンソールに表示して値の変化を見ているのですが
最後のaccとresultとでは要素の順番が違うのはなぜでしょうか
どこでソートされているのかわからない…
ログの順番が狂っているとしか思えないのですが
ttp://https://jsfiddle.net/76obhsdu/ オブジェクトの順序はややこしいので割愛するが
文字列キーの挿入順は保存されてる
あえてreduceを使う必要はあるのでしょうか？
日本語ですがArrayとObjectのことです
ルールは単純明快な２つだけでしょ
Arrayのインデックスとして有効な数字キー
つまり0から2**32-2までの数値での数字キーが先に順番に列挙されて
その後は挿入順ってだけでしょ
これくらいがややこしいとか言う人はそもそもPCやスマホ使って
このサイト見ることすらできないでしょ
そういうつもりは無いんだけど
どこのどの言葉が罵倒だと思った？
意識して否定的な言葉書いてないんだけど
ややこしい？
いやそれはややこしそうと思ってるだけで
実際はほら簡単に考えたら簡単でしょ
って言いたいだけなんだけど
お前らよりも
なかなかのブサイクゴリラ
すまんね
仕様にもっと気軽に慣れ親しんでもらおうと思ってて
ひょうきんさを出しすぎたのかもしれない
素直に謝るわ
平均的ハゲ猿である
基本的に、他人のサイトを解析している香具師は、不可能だと思うこと！
CORS で禁止されているかも知れないし、
簡単にクロスドメインアクセスできないだろ
例えば、VSCode の拡張機能の、open in browser と、Live Server の違い
URL を見れば分かるが、
前者はサーバーを立てずに、直接ローカルファイルへアクセスするから、クロスドメイン禁止で、
後者はサーバーを立てて、サーバー内のHTML からアクセスするから、OK
これが、web開発では、サーバーを立てるのが必須と言われる理由
他にも、ほとんどのサイトは、動的に、JavaScript(ajax)でページが作られるから、
Selenium Webdriver で実際のブラウザを操作しないと、要素が取れない
5ch みたいに、空のHTML を送ってきてから、
Ajaxで、ページの内容を取得しているようなサイト
しばらく待たないと、ページの内容が存在しない
どういう設定にしたらこれ弾けるの？
改行の数と句読点の数で正規表現とか？
あとは「漏れ」かな？
「香具師」や「selenium」も使えそうだね
歴史を繰り返すな
一番栄えてたころ何度もid表示スレが分裂したが結局無くなった
今それをやったら完全におわる
別に困ることもなかろうに
だれがだれかわからなくなる
お前ら5chに右も左も分からない一見さんが
質問してくると思ってるのか?
きちんとコードを貼って質問できるサイトがたくさんある中で
こんな掲示板に書き込む奴は普通の奴では無い事は分かるだろ
ぶっちゃるとここは程度の低いでっち上げの質問と騙りあい、
そして時々馴れ合いで成り立ってるスレなんだよ
もう燃えカスがなんとかくすぶって持ってる状態なの
JSやWeb自体が発展段階で、敵も多かったころは
オタクが集まるこのスレが機能してたが
今はかつての思い出を懐かしんで
スレに帰ってきた人が駄弁ってるスレなんだよ
ここが本当に質問する為のまともなスレとして
成り立ってると思うやつは頭が残念だし
ましてやまともな質問スレに直せると
思ってるのだとしたらヤバいね
ウホッ！ウッホウホウホ！ウッホッホ！！
ウホウホウッホ
ウホウホホ
ウホウホウッホ
ウホウホホーイ
ウホッ！ウッホウホウホ！ウッホッホ！！
ここはアスペや粘着質な奴らが多いのだから
常人に聞いたら面倒くさくて相手にされないような
仕様の細かくて深いことを質問しに来るべき
ウホッww
>ここはアスペや粘着質な奴らが多いのだから
ウホウホブーメラウホッｗw
ウホッ！ウッホウホウホ！ウッホッホ！！
ワッチョイはいらんけど
スルースキルを付けな
毎回見つけるたびにIDにしていくの？
みんなID無しスレに行って過疎っても最後まで責任を持ってメンテしなよ
IDがあれば同じ人だとわかる
→ほぼ正しい（極稀にかぶることがある）
IDがあれば荒らしが書き込めなくなる
→荒らしは気にせず書き込む
IDがあればNGするのが簡単
→IDは簡単に変更できる
IDがあれば自作自演が防げる
→自宅とスマホ等で2つ以上のIDを使い分けられる
IDがあればNGにできる
→NGにした人は荒らしの発言が見えなくなるので反論ができなくなり
NGにしてない人は普通に見えるため、荒らしの発言力が大きくなる
IDってコテみたいなもんだからな
自演する奴はID変えるぞ
それな
自演で成り立ってるスレだから
ID出るだけでも良くはなるんじゃない？
IDやワッチョイ使ったあぼーんっていい機能だと思うんだよね
書いてる本人は気づかないけど
こっちは見なくて済む
誰も損しない
これは真理
過疎ってる今は絶対に不要
このスレの息の根を止める行為にしかならん
大前提としてまともな人は5chで質問も解答もしない
ろくでもないスレだけど
数スレに１度くらいは実りのある話が出るので
存続させてる意味がある
真理だが、ここはゴリラのために必要
他の箇所に出てこられたら困る
お前もコテつけてくれよ
世の中の多くのものが無くなる
ガイジ死ね
Rubyスレはなんのためにあるんだよ
お前らID出さないよなｗ
少数意見は否定されるべきではないが、多数派と独立して存在すればいいだけの話で多数派に少数派の意見を強要するのは間違っている
ID出ないスレなんかほとんどないから普通は知らないし面倒だよな
メルアド欄のsageを書き換えるんだ
デフォで非表示だからそうしてるだけで多数派ではないし支持派が自演して多数に見えてるだけ
それ言い出したら、ID出してない時点でどっちもどっち
どっちか一方だとどっちかが押し付けたことになるから両方立てればいいだけの話
で、メール欄を書き換えたけど
別スレとしてpart1からスタートする分には勝手にやれば良い
お前大丈夫か？
白骨化してるテンプレを片付けるとかさ
そっちのほうが問題だろ
ドヤ解答するためのスレなら問題になるが
実際はここは自ら学びたいというやる気のある人が
気難しく偏屈な仙人たちの知恵を借りに来るための場所だから
基本的に静かなのは問題にならない
お前まじでキモい
くだらない言い訳を垂れ流すしかできないゴリラに
「気難しく偏屈な仙人」を自称されても失笑しかできない
お前の行動を一々ここで報告しなくていいよ
let store = new Ext.data.JsonStore( {
autoLoad : true,
url : 'test.cgi',
root : 'root1',
fields : [ 'hoge' ]
});
let val
// ココ
store.on( 'load', ( store, rec ) => {
let record = rec[ 0 ]
val = record.get( 'hoge' )
console.log( data ) ← ちゃんと値が取れる。
return val
} )
console.log( val ) ← undefind
} )
スコープについて教えてください。
Ext JSを使用しています。
ココのイベント関数から、変数valに値をコピーしたいのですが、
グローバルvalにコピーできません。
どうすればグローバルvalにコピーできるのでしょうか。
let val
console.log( val ) //=> undefined
val = 'unko'
unkoって表示されません！
これは分かるよね？
let val
setTimeout(() => {
val = 'unko'
}, 1)
console.log( val ) //=> undefined
unkoって表示されません！
これは分かるかな？
オナニーしてから風呂に入るつもりが、
風呂に入ってからオナニーしていた。
なぜチンコが臭いのでしょうか？
と聞いているのと同じ。
いつもドヤってるやつが自称仙人は確かに気持ち悪いな
Javascriptのソースをjsに変えたいのですが、
（デコードとかエンコードとか言うのですか??）
どうすればよいか教えていただけませんか
以前海外のフリーサイトで
左側にJavascript でボタンを押すとjsに変換してくれる
サイトがあったような。。。
パソコンを再インストールしてうっかりそのサイト情報を消してしまいました
説明べたですいません お願いします
jsはJavaScriptの略でファイルの拡張子にも使われる。あるいは女子小学生。
非同期処理だろ
1秒後の処理を、キューに登録しているだけで、実際には実行されていない
登録しただけで、下の処理に進んでいるから、
下の処理の方が、先に実行される
JavaScriptは単なるテキストファイルなので変換する必要なんてない
windowsなら拡張子表示する設定にしてファイル名弄るだけ
突っ込み満載間無質問にもかかわらず
アドバイスありがとうございました
大いに参考になりました
問題も解決しました ありがとうございます
javaScriptに設定することってできないでしょうか？
文字列は下記みないな感じで渡せました。
<%
String strJsp = "test1";
%>
<scirpt>
<!--
var tinko = <%= strJsp %>;
alert(tinko);
-->
</script>
こんな感じで配列を渡したいです。
代案等でもいいので教えてもらえればと思います。
分かりづらかったらすみません。
javascript側で受け取ったjson文字列をJSON.parseでデシリアライズすると配列に戻る
はず。
javaでjsonにシリアライズはjavaスレで聞いてねここjavascriptスレなので。
まあgsonかjackson使うんだろうけど。
多分頭のいい人や経験豊富の人なら
色々なスレで少しずつ聞いたことをあわせられるのですが
私にはできそうにないです。
あまえてるようですみません。
サーバーサイドの言語がなんであれ、クライアントサイドはjavascriptしかないわけだから、その言語でサーバーサイドやってる人はjavascriptの接点に関する知識も持ってるわけ。
対してjavascriptやってる人がサーバーサイド作るときの言語の選択肢は無数にあるわけ。だからこのスレの回答者が必ずjavaの知識も持ってるかというと全然そんなことはないわけ。
だからjavaスレで質問するほうが効率よいので勧めたわけだけど。
Javaの質問はどれ？
JSPをデバッグしたいなら
素直にeclipseとか使いなよ
計算機といっても２ｃｈのトリップの出現確率を表示する計算機を作りたいのです。
そこで、みなさんのお力をお借りしたいと思いまして質問いたします。
htmlのイメージとしては↓（空欄に数字を記入し、◎を選択する）
検索文字列 大文字小文字の区別 位置の指定 速度
┌─────┐ ┌───┐
│ │ ◎ なし ◎ どこでも │ │trips/s
└─────┘ ◎ あり ◎ 前方 └───┘
◎ 後方
┌──┐
｜決定｜
└──┘
┌──────┐
結 果｜ │
└──────┘
↑検索文字列に探したいトリップを入力し、◎を一つ選択、速度にPCの検索速度を入力し、決定を押す
すると、結果にトリップ検索時間（平均値）を出力する計算機を作りたいのです。
ただ、5chトリップのトリップは、A-zの52文字、0-9の10文字、. / と2文字、合わせて64文字しか使えません。
また、トリップは◆ThinThinKYのように１０文字で構成され、
しかも１０文字目には.26AEIMQYcgkoswの１６文字しかでません。
これ以外の時は結果にエラー表示をしたいのです。
みなさんの助言をお願いします。
逆に見た人を楽しませるような芸術化ってなんで無いんだろう？
例えばコードの挙動を保ったままAA作ったりできるツールって誰か知らない？
何をしたいのかよくわからない
どの言語でもプログラムの設計ってのは
メインとなる関数のシグニチャと外部仕様を考えることから
>トリップの出現確率を表示する計算機を作りたいのです。
>トリップ検索時間（平均値）を出力する計算機を作りたいのです。
トリップの出現確率を表示するのとトリップ検索時間（平均値）を出力するのはどう関連してるのか？
トリップの出現確率とは？
トリップ検索時間とは？
JavaScriptでどう実現すればいいのかという問題にまで落とし込んでから
このスレで聞いたほうがいいと思うぞ
海外ドラマ「ロズウェル」で出てきた宇宙人役のかわいい女の子テスのこと？
Ruby では、ERB というテンプレートエンジンで、あらゆる種類のテキストに埋め込める
<% 構文 %> で、構文を解釈するが、表示しない。
<%= 式 %> で、式を実行して値を表示する
<% ary = [ "ab", "あ" ] %>
<scr＠ipt>
var ary = <%= ary %>;
alert( ary );
</scr＠ipt>
Spring Boot のテンプレートエンジンなら、Thymeleaf とかだろ。
プログラム板のJava のスレで聞いてみれば？
スクリプトタグは書き込めないので、<scr＠ipt></scr＠ipt> の＠を削除して
素直にJSP側は配列をJSONで吐くAPI作って
JS側はそれを読みにいった方が良さそうな
まあ何をしたいのかにもよるけど
JSPだつってんだろが糞カスぶっ殺すぞ
質問です。
textareaを使ったエディタを改造して、入力補完をできるようにしています。
ただ、補完された内容をtextareaに挿入すると、妙な位置にキャレットが移動してしまいます。
これを解決するにはどのようにすればいいでしょうか、教えてください。
function puttext(){
text = document.getElementById("area").value;
temp = text.substr(0, 10);
temp += "hoge";
temp += text.substr(10);
document.getElementById("area").value = temp;
}
<textarea id="area" onkeydown="puttext();" rows = "20" cols="100">
mogemoge
</textarea>
selectionを使って
キャレットもコントロールするとよろし
ただしスクロールに癖があるから
その辺のノウハウはおググりください
動的にリサイズしたいのですができません
opener.resizeTo(screen.availWidth+","+screen.availHeight);
～界隈で相談にのってくれた皆様
今、解決出来ました～！！！
皆さん、本当にありがとうございました
どの方のアドバイスもすごい参考になりましたが
その中で、解決の決め手になったのは
例えばimageHasId()ならwindow.location.assign()を使ってる
もし上のコード見てもそれが理解できないなら勉強して出直したほうが良いよって話
という、アドバイスでした
Imagehostのマニュアルを必死に読んでいたときに
これと同じことを指摘してくれた方がいて、その具体的方法を
アドバイスしてくれて、そしたら（とりあえず）Imagehostを取り入れなくても
希望が叶うことになったのです
ロダのインプットタグをスキップするのは無理だということが判り
直接ダウンロードできるURLを解析してリファラーなどを細工し
それから落とすという方法に落ち着きました
皆さん。本当にありがとうございました
(*￣◎￣*)ぶっっちゅうううん♪
あ、興奮のあまり、割り込んじゃってすみませんでした
もうとっくに話題は変わってるというのに
昔は色々できたんだがな
それ使って悪さする奴続出してできなくなった
jet.src="images/jet.png";
var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
jet.onload = function(){
ctx1.drawImage(jet,0,0,360,270);
imagedata1 = ctx1.getImageData(0,0,360,270);
for (i = 0; i < 388800; i++) {
if (i % 4 == 0) {
imagedata1.data[i] = Math.floor(1.5*imagedata1.data[i]);
if(imagedata1.data[i]>=255){imagedata1.data[i]=255;}
}
if (i % 4 == 1) {
imagedata1.data[i] = Math.floor(0*imagedata1.data[i]);
}
if (i % 4 == 2) {
imagedata1.data[i] = Math.floor(1*imagedata1.data[i]);
}
if (i % 4 == 3) {
imagedata1.data[i] = Math.floor(1*imagedata1.data[i]);
};
};
ctx1.putImageData(imagedata1,50,0,50,50,260,170);
}
canvasですが質問させてください。
愛用している旧operaでは画像フィルタがかかるのですが、
新しいchromeでは画像フィルタがかかりません、何故なんですか？
var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
var jet = new Image();
jet.src="images/jet.png";
元のコードでは、jet.src に代入した後、
その後の2行よりも先に、jet.onload が呼ばれると、
ctx1 が定義されていないから、まずいのでは？
F12 開発者ツールのコンソールに、エラーが出ていないか？
それと、if よりも、switch を使った方が、可読性が高い
switch ( i % 4 ) {
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
break;
}
>> 元のコードでは、jet.src に代入した後、
>> その後の2行よりも先に、jet.onload が呼ばれると、
>> ctx1 が定義されていないから、まずいのでは？
よく、タイミングのせいで、画像が読み込めたり読み込めなかったりする、アプリがあるので
新しめのブラウザは鯖建てずにローカルでやると同じフォルダに置いてようがcrossorigin扱いになってしまうのでgetImageDataが弾かれる
window.screen.widthを利用してスマホかどうか判断することは可能でしょうか？
ブラウザの幅をどう変えようとも
window.screen.widthは固定値だと思います。
判定出来る(かも)と書かれてたのと、
ttp://https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607 自分のスマホで数値を見ても
screen.width = 360
screen.height = 780
devicePixelRatio = 4
と判定できそうだと思いました。
その判断が正しいかどうかは知らないけど
スマホ判定というか、PCではない判定は
タッチデバイスかどうかで頑張ってるわ
余計なところまで変な気を回して結局判定間違ってました、とかなるくらいなら大人しくユーザーエージェント見るだけで良さそう
でも、アセンブラ・javaの順で勉強してきた俺でもjavascriptにはかなり手こずっている。
全くの初心者にはかなりハードルが高いのではないだろうか？
マークアップ言語も必須だし。
このスレ見ればわかるじゃん
初心者が質問しても罵倒するし
初心者はpythonがいいpythonやってからJSがいい
ES3時代ならともかくES6以降はpythonなんかに比べるとずっと初心者向き
Javaがまともに出来るのにJavaScriptで苦戦してるなら学び方が悪いと思ったほうがいいよ
ここで質問してる人たちの大半は言語を学ぼうとしてるわけじゃなく
なんかエラー出たから解決策教えて欲しいっていう人たち
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017
これが有名な2冊の、サイの表紙のサイ本
Flanagan はRuby の本も書いてるけど、
Google の開発者の机には、必ず置いてあった本
こんなに分厚い本を、Googleの開発者でも、必要とするのが、JavaScript。
あまりに巨大過ぎて、普通人では絶対に読めない
Ruby なんて「たのしいRuby 第6版、2019」1冊読めば、
そこそこプログラミングできる
何故か質問者をディスらずにいられないのがJSマン
pythonスレなら普通に教えてくれる
は、昔の方が文法が多くて、良かった。
今のは、Jupyter Notebook, Anaconda の説明が増えて、プログラミングするには厳しい
パーフェクト Python [改訂2版] (PERFECT SERIES 5)、2020/6/1
パーフェクト Ruby on Rails 【増補改訂版】 (Perfect series)、2020/7/25
パーフェクトシリーズが、新しくなったので、
多言語をやってる人には、お勧め
クライアント側が、React + Bootstrap も多いけど、
サーバー側をJavaScript(JS), Node.js にすれば、
言語が1つになるので、開発が楽になると主張する人もいるけど、
あまりに、JSは巨大だから、かえって難しくなる
だから、Rails では、Node.js, Webpack, Babel をコンパイルツールとして使っているだけ
追記
初心者がいきなりマークアップ言語・DOM・プロトタイプチェーンを理解するのは
厳しいと思う。
そう？
クソバカだった学生時代の俺でもなんとかなったんだから
賢い今の子ならサクッと覚えられそうな気もするんだけどなあ
このスレは初心者用じゃないから
元々こことは別に、初心者スレと、更に手取り足取りスレがあった
ここは初心者お断りのスレ
文字打ってんのｗｗｗとか馬鹿にされる時代が来るよ
初心者お断りのスレなんて何処に書いてるんだよｗ
自称仙人のマウンティング野郎かww
知的障害と境界知能は合わせて16％もいる。
世の中には割り算・因数分解すら理解出来ないひとは多い。
そう考えるとjavascriptは難しい部類に入ると思う。
オブジェクト・インタフェースの継承なんかもややこしい。
似たような用語が言語の概念を不要に難解なものにしてる感がある。
そんなに多いのかよ
だからアヘの支持率が未だに35％あるんだな
へーきへーき
俺なんて九九を覚えられなかったレベルだから
それでも国立工学部に入れたし
JSも書けた
要はやりようよ
仙人云々は意味が分からんが道場規則は元々テンプレにあった
自分は別に今は初心者が来るなとは言わないけど
シリーズとして長く続いるのだからその空気と精神は残っている
そう思っている住人やそういう考えはちゃんと理解して尊重すべきということ
オブジェクトと移譲
この２つを抑えればJSの多くを理解できる
クラスだのインターフェイスだの
余計なこと考えると途端に難しくなる
九九だってちゃんとやり方教わってやればできるようになるんでしょ
一定期間内にみんなと同じように自然にできるようにならなかっただけで
JavaScriptの場合はプロトタイプチェーンを初期にきちんと理解してなくてもそこまで困らないよ
実際、理解せずに仕事で使ってるやつたくさんいる
ただどの言語でも遅かれ早かれプロトタイプチェーンやスコープチェーンに相当するものは学ぶ必要はあるけどね
初心者向きかどうかって絶対的なものじゃなく相対的なものだから
他にいい選択肢がなければ消去法で比較的初心者向きってことになる
Python+tkinterとかで学ぼうとしてるやつとかを見るとJS+HTML/CSSはかなり初心者向きだと思う
今でも足算してるよ
たとえば7×8だったら
脳内でこういう絵が思い浮かぶ
○○○○○●●
○○○○○●●
○○○○○●●
○○○○○●●
○○○○○●●
●●●●●○○
●●●●●○○
●●●●●○○
そのあとどうやって7x8を計算しているんだ？
返信ありがとうございます。
プロトタイプは後から学んでも良かったのですか。
私の場合は変に完璧主義な所があって、まず知識を目一杯頭に詰め込んで
資格試験に合格してからコードを書いて動かすという勉強方法をしています。
ちなみに今はHTML5プロフェッショナル認定試験レベル２の勉強中ですwwwww
本当ならプロトタイプを先に学んだ方が絶対に簡単だし良い
問題は入門者向けにプロトタイプベースで解説してくれるサイトや本が皆無なこと
だから良い悪いではなく後から学ぶしかなく選択肢はない
一般論として用意されている仕組みをどう使うかっていうのは
長年かけて積み重ねる経験とも言えることでもあるしもちろん難しいけど、
プロトタイプベース自体はオブジェクトの素朴なイメージが
持てていさえすれば１日で理解できるでしょ
JSが関数を使ってどう旧クラスシステムを構築していて
new演算子がどういう振る舞いをするのかというようなことを細かく学ぶのは
確かに初心者には相当荷が重いよ
でもそういうことを一切抜きでObject.createか__proto__の振る舞いだけを
理解するのでもプロトタイプベースを理解したと言っていいと思うけどな
あくまでプロトタイプベース自体は素朴なもので、
それを隠蔽してやりくりするためのJSの旧クラスシステムが複雑なだけだからね
丸の数数えてる
２つの数字から１つの結果を出す掛け算ができない理由はない
それは単に覚えられないと信じ込んだせいで
本当に覚えられなくする回路が頭にできてしまっているだけ
でもそれは汎用的な回路ではない
左右盲の人がLRは分かることがあるように違う覚え方をすればいいだけ
「違うこと」というのは無数にあり得るので必ず覚えられるパターンが見つかる
そういうことをここまで誰にも教えられないで育ってきたとか可愛そうだな
ttp://https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_prototypes 簡単に言えば、1つ上(親)の階層に、定義すること
それによって、継承した場合に使えるようになる。
名前の探索チェーンに入ってくる。
子で見つからなければ、親で探す
たぶんそうなんだよな
覚え方に自然に気づけなくて、他人に教わることも自分で考えることもなかったってだけで、やればどうにかなるんだと思うけど本人じゃないから何とも
まわりも馬鹿だからどうやったらできるか考えてあげられる人がいなかったんだろうね
２つの数字から１つの結果を出す掛け算ができない理由はない
ただし足し算を理解してから掛け算を理解するまでは1年かかった
理解できない理由はないが、理解するのに学習と時間は必要であるということ
って、あたりまえやーーーー！
それはわかりやすくなるということではない。むしろ逆
構成要素をそのまま使うのはわかりづらく
組み合わせて具体的なものを作ることで
より便利になるんだよ
よくわかんないんだけど
九九を覚えた人は
掛け算する時に足算はしてないんでしょ？
その結果を暗記して
照らし合わせているだけで
最近、よく言われている発達障害に含まれる学習障害の一種
ttp://https://www.kobetsu.co.jp/cafeducation/futoko/article-448.html こんなのがあるのか…
九九覚えなかっただけで
算数は得意だったんだけどなあ
こういう実例もある。言ってる通り
ようはやりよう。
ttp://https://www.ntv.co.jp/gyoten/backnumber/article/20190423_02.html 3+3=6も3*3=9も同じ暗記じゃないか
熟語とか歌とかは覚えられるんでしょ？
だったら「さざんがく」とか覚えられない訳がないと思うが
というかが疑問なんだけど
足し算ができるのなら7*8なら7を8回足したほうが早いんじゃないの
そしてそれが高速にできるのなら実質九九が言えるってことで
暗記して無くてもほぼ掛け算できるってことになるけど
7*8 → 7*(4+4) → (7+7)*4 → 14*(2+2) → (14+14)*2 → 28+28 → 56
くらいぱっとできそうなものだけど
人様の無理難題を叶えるアルゴリズムを考えつくはずがないので
少なくともプログラマになるのは辞めたほうがよい
いや掛け算はできるよそりゃ
丸暗記しなかっただけで
なぜそんな回りくどいことをw
自分にフィットしたアルゴリズムがですよ
丸暗記してて100％の自身を持って一目で結果がわかる人なんて少ないよ
7×8とか見たら過半数の人がしちは、ごじゅうろく
というのを思い出すと思うよ
本当はできるしできてるのに俺はこういうやり方でしかできないと思いこんでいるだけ
SaveAsでpdfをテキストへ変換する処理を作っています。
VBAからコールしています（ブラウザは使用していません）。
ファイルサイズが大きい場合は当然ですが時間がやたらかかります。
必要なのは最初の1pだけなのですが
その部分だけ変換する方法は無いでしょうか。
先頭◎ページだの◎バイトだの指定するオプションがあったら
と思いましたが見つけられませんでした。
offset 位置に、seek して、そこから指定サイズ分だけ読み込める
binread(ファイルパス, length = nil, offset = 0) -> String | nil
でも、最初の1ページの、offset(1ページ目の始まる位置)やサイズが、どうやって分かるの？
Rubyでは無理
これ誤爆？
JS関係ないけどpdftkやpdftotextを使えば簡単にできる
粘着し過ぎw
毎日早く死なないかなって思ってるよ
本当に寂れたスレには妖精すら寄り付かない
Ruby君もスレがちょっと盛り上がったタイミングでいつも現れてるでしょ
目安になって丁度いい
好きな人はそのままにすればいいし
嫌いな人はNGすればいいから
もうこんなことで揉めることもなくなろう
誰も損しない
本当の妖精とは違うんだけどね
本当の妖精は宣伝でも自己主張でもないけど
格別なレスを残していく異質な存在
jQuery厨やRuby厨はけしてそんな訳のわからない物ではないが
本物の妖精はもう何年も見なくなって寂しいので
仕方なくちっちゃな妖精ということにして気分をもり立ててるだけ
世迷言を言う
懲りないねえ
若さかな?
本物の妖精とか、実在するとでも思ってんのか？ｗ
元から物語の中だけのものですよ
君も一度見たら分かる
まあもうこの板で見ることは無いかもしれないが
ttp://https://w3techs.com/technologies/history_overview/javascript_library/all/y jQuery
2017年 71.9%
2018年 73.1%
2019年 73.6%
2020年 74.2%
2020年2月 74.4%
2020年6月 75.5%
2020年8月15日 76.2%
流石にこれは異常とも言える増加量
代わりに減ってるのは None みたい
今まで使ってなかったサイトがjQueryを使い出したのか？
2012 42.8% (+14.5%)
2013 54.5% (+11.7%)
2014 57.4% (+2.9%)
2015 61.5% (+4.1%)
2016 68.3% (+6.8%)
2017 71.9% (+3.6%)
2018 73.1% (+1.2%)
2019 73.6% (+0.5%)
2020 74.2% (+0.6%)
2021 76.2% (+3.0%) 8ヶ月のデータからの予測
ttp://https://w3techs.com/technologies/details/js-jquery 最近WordPressが同梱のを3.5.1に上げたらしいので、少しは3も増えるんだろうね
それは当たり前だと思うよ
俺らがウェブの最先端を引っ張っていくのじゃーなんて息巻いて
自他ともにそういう会社だねって認める会社なんてわずかしか無い
1.xと2.xの機能は完全に同じ。対応ブラウザが "2の方が" 減ってるだけ
だから今3.xだったとしても一つ前のバージョンぐらいの意味でしか無いよ
まあ2割でも他に比べれば相当多いんだがねｗ
全体的にいくつかのライブラリの割合が上がってるが
実際はjQueryを使ってる人は見ないな
何の説得力もないだろ
「俺はたくさん見る」で反論になるんだしｗ
> AMPとかの有名なフレームワークに含まれてしまってるから
それはなんか根拠あるの？
仮にAMPに「jQueryが含まれてしまってる」として、
それらのAMPに「その他のライブラリは含まれてない」から
こんなにシェアが大きく違うんだよね？
そういうこと、他のライブラリは必要な所で必要なだけ使われてるが
jQueryは無駄に配られて決まっているということ
昔はまだCDNでキャッシュが効いてたが昨今ダブルキーイングになってからは
とにかくリソースの無駄遣いとして嫌われてるってわけよ
AMP？とかで使ってるんだろ？
それは無駄っていわねーよ
意味不明。その理屈ならリソースの無駄の原因はダブルキューイングだろ
jQuery以外にも当てはまるんだからさぁ
回線が高速ってことだし、自サーバーの負荷は減ることに変わりはない
みたいなのってただjQueryに狙いをつけて言ってみただけって感じがするよな
論理的な理屈が伴ってない
使ってないからダウンロードしない。だけどリソースの無駄なんだよ
リソースの無駄ってえーとあの通信量？ダウンロードしないけどね！
どこからも使ってないからダウンロードしないけど外部から使ってるって検出できるんだ！
みたいな意味不明な理屈を言い出しそうだから先に指摘しておくね
無駄なものを極力なくそうというのは良し悪し
マヨネーズやケチャップの底に溜まってる部分があるだろ
でもそのおかげで他の部分がスムーズに出るんだ
世の中の本質ってそんなもん
どうせ人間の時代なんてあと100年も続かずにAIに管理されるようになるんだからさ
宇宙のエントロピーをほんの僅か無駄に増大させてもいいじゃないか
適当に楽しく生きなよ
他と比べてこういうときにここが良いから選んで使ってるという話は見たことがない
話してもいいよ？
まず標準のDOM APIと相性がいいということ
薄いラッパーで変なことはしてないから
ウェブの標準のやり方と大きく変わることがない
なんならDOM APIと混ぜて使える
それでいながら宣言的な記述のシンプルなインターフェースを備えており
HTML/CSSと相性が非常にいい。HTML/CSSとうまく組み合わせて使うと
JavaScriptのコードも大きく減らせる
今は役目を殆ど終えたが、それでもスマホなどのいくつかの端末用の
ワークアラウンドが含まれており、標準DOM APIを使うのに比べて安心ができる
1系、2系を使えば何も気にせず古いIEに対応することも可能
そしてファイルサイズはわずか30KB程度で高速なCDNで配布されてる
という話をしたんだからシェアがーという話だけをしてるなんて
今後はいわないでね。それはもう嘘になってしまうから
Ajax などを省いた、slim 版で、70KB
解凍することに何の意味があるんだ？
速度を意識してるなら通信レベルでgzip圧縮されるだろ
CDNの配布も普通にjsファイルを置いているように見えて
通信は圧縮されてる
ってことも知らない程度の知識の人かな？
今は当たり前過ぎて
気にしたことすらない人が一定数いるかもね
2ch閉鎖祭りを思い出すなあ
あの時も、今ほどではないが暑い夏だったなあ
10年前は半数以上はjQuery使ってたが今は多く見積もっても2~3割
w3techs.comのデータはほんと謎
Bootstrap は、jQuery, Popper.js に依存しているから
それを前提として圧縮していないとその恩恵が受けられない
通信速度も高速化しててせいぜい10ms程度しか節約できないのなら圧縮する意味がなくなる
だから近年の常識としては基本的にMB単位のファイルだけをBrotliで圧縮できる場合だけする
gzipは2G/3Gスマホのためには有効だからまだ世界的には標準だが、
日本では害の方が大きいので全部で使うくらいなら全部で使わない方が良い
ttp://https://www.it-swarm.dev/ja/http/%E7%8F%BE%E5%AE%9F%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%8Cdeflate%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%88%E3%82%8A%E3%82%82gzip%E3%82%92%E5%A5%BD%E3%82%80%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%9C%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/957517037/ > 詳細については、このWebサイトを確認してください：
>
ttp://http://web.archive.org/web/20120321182910/http://www.vervestudios.co/projects/compression-tests >
> 仕様によると、Deflateは実際には zlib （Web経由でコンテンツをストリーミング
> するために特別に開発された圧縮形式）...これはdeflateのラッパーです。
なるほどね。最初からストリーミング対応で設計された圧縮方式を
ウェブでは扱われているわけだ
最近のJSエンジンはファイルをストリーミングでパース・評価できる
それを前提として圧縮していないとその恩恵が受けられない
ウェブで使われるgzip圧縮はそれを前提として圧縮しているため恩恵が受られる
圧縮時は全体眺めて同じデータを探す必要があるが
展開時は前から処理できるだろ
一般的にデータ部分の展開は順次できるけど
まずデータ部分の場所を特定するのに一番最後を見ないといけない形式も多い
ZIPがその代表例
圧縮する側に立って考えてみたら分かる
圧縮する前に圧縮後のデータ量を知ることはできない
ファイルを順次圧縮して追加していって最後まで終わった段階で
ようやくファイル構造が確定するのでそれを末尾に乗せることができる
１ファイルだけを圧縮するgzipでもCRC32がデータの後に着くのが普通なので
ファイルが壊れているかどうか気にしないのでなければ受信途中で読み始めることはしない
だから普通はHTTPのチャンク機能を使ってデータを分割する（HTTP2ではまた別の機能）
ただし各チャンクのサイズを小さくするとオーバーヘッドが多くなりすぎるし、
かといってサイズを大きくすると、ストリーミングの効果が薄くなるので難しい
勉強になりました
データの最初から展開できるようになってる
> 圧縮する前に圧縮後のデータ量を知ることはできない
> ファイルを順次圧縮して追加していって最後まで終わった段階で
> ようやくファイル構造が確定するのでそれを末尾に乗せることができる
先頭に入れても良いのでは？
頭に追加しようと思ったら全部読んで退けておいて書き換えないといけないってことは常識かと思ってた
Cのファイル操作の基本でできるけどｗｗｗ
ファイルの数とかか？そんなもん最初に書き込む領域数バイトを
ヘッダ領域として予約するだけじゃん
それだけではファイルの一覧を見るのに頭からお尻まで舐めないといけない
さらに、10000個目のファイルを見たいときに10000個辿らないといけない
だから、ファイルのデータ以外の情報がどこかに局所的に固まっていないといけないのだが
それを先頭に持ってくるのはいろんな理由で難しい
最初１０個のファイルを書き込む予定が９個になるかもしれないし
５個の時点で設定容量に達して複数アーカイブに分割するかもしれない
そもそも圧縮を始める前に全てのファイル情報を読まないといけない
一方もし末尾に置くのであれば、この先のことを考えずに
今圧縮するファイルのことだけを考えて次から次へと圧縮を進めることができる
要するに圧縮がストリーミングでできる
そして全てのファイルの圧縮が終わった後にそれまでの結果を末尾に書けばいいだけだから楽だし安心
> 当然各ファイルのデータ毎に（ほぼ）固定長のヘッダーはあるが
> それだけではファイルの一覧を見るのに頭からお尻まで舐めないといけない
1つのファイルだけを圧縮する、httpでの配信でそれなんか関係あんの？
ファイルの頭に最初に処理するファイル名だけを格納するだけじゃん
ttp://https://qiita.com/standard-software/items/3254c19ed5229f3aba9a 正しい（笑）
reduceはsum関数などを作るための"材料"として使うもので
直接使うもんじゃないよ
そして材料としての役割はあるにしてもJavaScriptでは関数呼び出しで
遅くなるので最適化すると単純なループのほうが良くなるというね
abc を、axc に変えても、後ろに影響が及ばない
でも、可変長では、後ろのデータも上書きされてしまう。
abc のb をxy にすると、axy となり、cも消える
つまり、同じサイズじゃないと、バグる
データだけを一旦、ファイルに保存しておいて、
ヘッダーとデータを、cat で連結させて、新しいファイルを作る
でも、これは、ファイルコピーばかり、やってる事になるw
データが大きいと、無駄が多い
安定のクソ記事だなw
これで、変数をブロック内スコープに限定できる
text = <<'TEXT'
a
b
TEXT
# 1行ずつ処理する。index は、1 始点
ary = text.each_line.with_object( [ 5 ] ).with_index( 1 ) do | ( line, acc ), idx |
line.chomp! # 末尾の改行を削除する
acc.push [ idx, line ]
end
p ary # [5, [1, "a"], [2, "b"]]
もし、これで蓄積変数を使わないと、外のスコープへ広がる
ary = [ 5 ]
text.each_line.with_index( 1 ) do | line, idx |
line.chomp!
ary.push [ idx, line ]
end
p ary # [5, [1, "a"], [2, "b"]]
Elixir でも、for の内包表記を使うと、指定した回数分だけループできる
for cnt <- 1..length( 'abc' ), do: IO.inspect cnt # 1～3
ぶっちゃけ、ゴリゴリにアルゴリズムが必要な場面以外ではありがたみが薄いし
ゴリゴリに必要な場面では最適化のために使いにくい
調べたところクライアント側のローカルファイルの読み込みなら<input type="file">でfileオブジェクトを生成してイベントハンドラで読み込めることが分かったのですが結局のところ目的の達成ができていません。
C言語のfopen関数みたいにファイルを簡単に読み込める便利なAPIはないですかね
ttp://https://nodejs.org/docs/latest-v13.x/api/fs.html だとしたらWebの基礎の基礎を全く理解してないことになるのでAPIの話をしても無駄だよね
node.jsは使用していませんがnode.jsのapiとweb標準のapiが違うということを知れました。勉強になりました
将来的にnode.jsの勉強もするかもしれないので目を通しておきます。ありがとうございました
探していたものはまさにこれでした。fetchでファイル処理ができそうです。ありがとうございます
c++から入った日曜プログラマーなのでご指摘の通りwebとjavascriptの理解が浅いです^^;
canvasでRPG作ったら勉強になるっしょってノリでゲーム作ってますが難しいですね
型がなかったり割とガバガバなコードでも通っちゃうので大混乱です。これを使いこなしてる人すげーなって思いました
ありがとうございました
こんな所に
RPGとかこの世で作るのが一番難しいものの一つだろ
シナリオ・音楽・絵、マップそれらを全て他所から持ってくるにしても苦労するのに
それに加えてCanvas使ってプログラミングとかもはや273番目の地獄だわ
名付けてCanvasRPG地獄だ
そんなんができる根気と能力があったら日曜プログラマどころか
起業して日本のスティーブ・ジョブズになれるっつうの
いかに無謀なことしてるかよく考えたほうが良いぞ
がんばりな
小学生のクソ馬鹿だった俺でも
すごーくシンプルなのはBasicでなんとか出来たから
意外となんとかなるんじゃない？
根気はいると思うけど
生canvasはやめてライブラリの使用をおすすめするけど
全く畑が違うやんｗ
たまたまiPhoneが出たときその会社のトップだっただけじゃないの？
頭はいいのだろうか？ちゃんと微分方程式の難しいの解けたり物理学の面白さを語れるんだろうか？あるいはプログラミングならデザインパターンをどう適応するのかちゃんと根本的な理解をしているのだろうか？
オレはこれらすべてできるが。
恥ずかしいから静かにしてたほうがいいよ
プロ野球選手にどこがすごいの？レジ打ち遅いじゃんって言ってるようなもんだろｗ
特定のURLでアクセス可能なWeb上のファイルを
クライアント側JavaScriptからダウンロードしたいということだったのか
え！？
分かりにくい質問だったが、Nodeの質問が来る確率なんて極めて小さいでしょ
C10Kとか言ってNodeムーブメントが起きてた頃はちらほら質問が来てたが
そのころでもNodeやサーバーサイドと言わず当たり前のように質問する人はいなかったと思うぞ
webで外部に公開されとるんかーいｽﾞｺｰってなもんよｗ
CSVの行データから配列を作ろうと思ったのですが、
ダブルクォーテーションの中にカンマが入ったりするので思ったように分割できません
書いた正規表現は下記です
このコードの問題点は、文字列が入ってない部分は配列化されず無視されてしまうことです…
例えば000はその前にカンマがあるので配列上は二番目であるべき
var text=',000,"111",,"111,222",,,"111,222,333",,,,"111,222,333,444"';
var Array=text.match(/("[^"]*"|[^,]+)/g);
どなたかアドバイス頂けますでしょうか
JSfiddleは下記に作成しました
ttp://https://jsfiddle.net/0kj5oe9s/ 勉強のためにCSV読み込みを自作したいなら
まずクォートされてる範囲を取れるようにしたらいいよ
そうすれば、クォート内のカンマは無視できるようになる
ただ読み込みたいだけならライブラリもあるし
または、先にCSVをJSONに変換しておくのが楽だと思う
正規表現は「単語はアルファベットの並び」などという定義をするためのもので
この順番に単語が出てきたらこれは動詞みたいな意味を定義するものではありません
つまり正規表現でCSVを解釈することはできません
CSVなどの文字列の意味を解釈するために使う道具が正規表現であって
CSVなどの意味を解釈するものはパーサーと言うんです
あなたはパーサーを作らなければいけないのに
それを作らずに正規表現でやろうとしています
> 勉強のためにCSV読み込みを自作
そうですね、正規表現の勉強も兼ねてライブラリなしで読み込みたい感じです
JSfiddleを見てもらうとわかると思いますが
クォートの範囲を取ることは出来てます、あとクォートされてない文字列を取ることも
ただ、文字列がない部分を配列に格納することだけが出来ないので悔しくてこちらで聞かせて頂きました…
正規表現でやる以上
マッチしないところは無理だわな
先頭から1文字ずつ追いなされ
行ごとにやったら詰むよ
理由わかるね？
なぜかと聞いておるのだ
クォート文字自体を使いたい場合は、クォート文字内で2つ重ねる。
"a""b" → a""b
クォート文字内では、行区切り・列区切り文字自体を、そのまま使える
また、クォート文字は機能が変わらなければ、省略できる
"ab"・ab は、同じ
ここのスレ民は費用対効果を考えろよな
カンマを「、」に置換してるけど、その辺りはやりたいことに合わせてどうにでもなるし
var Array=text.replace(/("[^"]*"|[^,]+)/g,function(group1){return group1.replace(/,/g,"、");});
Array=Array.split(',');
自分で仕様を調べる能力が無いなら諦めて認めろ。
何度も言うが無理だ無理だ。
勉強のために色んな書き方を提示してあげればいい
質問に合った答えを簡単にさっと導き出せないCSVポリスは害悪でしかないでしょ
改行が入ると詰むんじゃないか？
勉強している人のために正規表現ではできないと教えています。
正規表現はあきらめて
性器を露出して自由を表現することにします。
俺「正規表現ってのがあって～」
生徒「クスクス」
俺「？」
俺「そんで正規表現ってのは～」
生徒「クスクス」
俺「？？」
てなったの思い出した
JavaScriptのmatchが空文字列以外にマッチした次のマッチで1文字も読み進めずに空文字列にマッチしてしまうという話としては
戻り読みが使えれば使うか /"[^"]*"|[^,]+|(?<![^,])/g
あえて食わせて後で除くか .match(/"[^"]*",|[^,]*,/g).map(_=>_.replace(/,$/,""))
lastIndexを手動更新するか [...(function * (s, r=/"[^"]*"|[^,]*/g) { let _; while ((_ = r.exec(s))) { yield _[0]; ++r.lastIndex; } })(text)]
サーバーサイドでライブラリ使ってJSONに変換して返すAPIでも書いたほうが
はるかに実用的だし、練習としてもいいものになると思うよ
勉強目的といってもその勉強自体の目的次第
ttp://https://stackoverflow.com/questions/8493195/ 1つ目の回答が正規表現で頑張ってるタイプで
2つ目の回答が1文字ずつ読んで処理するタイプ
汎用度が高くなるほど2つ目のやり方のほうが楽になる
ただ読みたいだけならそれでいいけど
文字列操作を覚えるならいいんでない？
そんで、正規表現にこだわらないで
先頭から1文字ずつ拾って
検証して行くのがいいんじゃないかなあと
個人的にはおもう
