+ JavaScript の質問用スレッド vol.142 +
■ このスレッドは過去ログ倉庫に格納されています
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.141 +
https://mevius.5ch.net/test/read.cgi/hp/1562318008/ 2 名前：Name_Not_Found[] 投稿日：2019/05/19(日) 16:08:41.33 ID:2J4OYdDV
■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) ■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 electronは凝ったインターフェースが難しいのですか？
2dキャラを動かす物を作りたいのですが >>7
難しくはありませんよ
普通の人には簡単に使えるようになっています >>9
一部じゃなくて全部ダウンロードしろ
一つ上に上がれ
ちゃんとしろ 普通は、プロジェクトを丸ごと、git clone するけど、
こんなに大きいと、ダメだな >>13
一番簡単にディレクトリ以下のみをダウンロードできるから
gitだと同じこと出来ない
gitでやるならこんな感じ
.git/以下を取得するから単にダウンロードするのとは違う
$ cd <path>
$ git init
$ git remote add origin https://github.com/mdn/webextensions-examples
$ git sparse-checkout set borderify/
$ git pull --depth=1 origin master ローカルサーバを立てるとはどういうことですか？
なぜwindowsのフォルダをそのまま使えないのでしょうか？
サーバ特有の機能があるのでしょうか？ >>15
>ローカルサーバを立てるとはどういうことですか？
ローカルにサーバーを立てること
>なぜwindowsのフォルダをそのまま使えないのでしょうか？
何に使えないの？
>サーバ特有の機能があるのでしょうか？
あるよ >>15
理由は２つある
１つはサーバーが無いと実現できないことがある
でも大抵のコンテンツは関係ない
もう１つは、わざとローカルファイル間のアクセスが制限されている
セキュリティのため
何もできないわけではないけれど不便なのでサーバーをたてる
nodeを使った超簡易ローカルサーバーが幾つかあるから
それらを試してみるのがオススメ ブラウザ環境は、クロスドメイン禁止(CORS)だから、
自分のPC 内にサーバーを立てて、サーバー上に、HTML を置く
一番簡単なのは、VSCode の拡張機能、Live Server
Ruby なら、コマンドプロンプト・PowerShell から、1-liner で、
Ruby製の遅いウェブサーバー、WEBrick が起動する
ruby -run -e httpd . -p 8080
そのフォルダ内に、index.html があれば、これでブラウザからアクセスできる
http://localhost:8080 >>16
webアプリが動かなかったりするのではないですか？
よくxamppなどを開発用に使うと思います
しかしxamppは自分の環境で不具合あるんですよね、、、
>>17
例えばどのようなコンテンツでしょうか？
簡易ローカルサーバとはxamppなどと何が違うのでしょうか？ >>19
webアプリはwebサーバー上で動くように作ったアプリケーションなんだから
サーバー立てずに動かそうとする意味がわからない
xamppもwebサーバーの一種
おま環で不具合あるならそれを解消するか違うの使えばいいだけだよね twitter自動リフォローツールってどういう環境で作るのでしょうか。１つおもいつくのはブラウザーアドオンです。
ローカルアプリでtwitterを操作したりもできるんでしょうか？
>>20
つまりWEBアプリを作るライブラリ（アンギュラーなど）などがサーバを建てないと動かないという認識にしておきます。
ありがとうございますた XAMPP/MAMP, Ruby on Rails も、サーバーを含んでいるのは同じ
単に、PC 内のHTML をダブルクリックして、ブラウザを実行環境にすると、
クロスドメイン禁止(CORS)になるから、その部分が動かないだけ
そういう場合に、自分のPC内に、サーバーを立てて、そこからHTMLを配信する。
そうすると、普通のネット上のサーバーから配信したのと同じになる
一番簡単なのは、VSCode の拡張機能、Live Server 初心者に間違った用語の使い方を教えるのは遠慮してくれないか？
まずクロスドメインではなくクロスオリジン
そしてCORSはクロスオリジン通信を実現する仕組みなどの
名称であって禁止という意味は含まない
そしてローカルファイルでクロスオリジン間の通信が制限されるわけではない
クロスオリジン間の通信が制限されるのはデフォ
ローカルファイルでは自己ファイル以外は別オリジンとしてみなされたり
ブラウザによってよりキツイ制限がかされるというだけ 突っ込むところそこかよっｗ
HTMLファイルとWebアプリの違いがわかってないのにそんな小難しいこと言っても無駄 使った用語の間違いの訂正なんで
質問者ではなく、回答した人へのアレだろう
俺も少し気になってた 例えば簡単な２dゲームエンジンを作るとしたら、python guiよりjs electronのほうが適していますか？テクスチャを動かしたりアニメーションしたりするのはjsのほうが得意ですよね。 >>27
そりゃ断然JSよ
pythonのguiはオモチャだから他の言語できるやつはまずやらない >>28
その動きにかかわる部分というのはguiライブラリの差というより、cssやjqueryの差ではないのですか？jsだとフルスクラッチのゲームとかありますよね。 一般的には、Unity。
Python っぽいものなら、Godot
https://www.emanueleferonato.com/
このイタリア人は、phaser ばっかり。
昔は、Cocos2d-x も使っていたけど >>32
例えばテクスチャを単純に動かすくらいならpythonでもできると思いますが、フェードさせたりブラーをかけたり、こういう処理はjqueryのあるjsが有利なのではないか、ということです。 7 Most Popular JavaScript Libraries 2020
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ゲーム開発フレームワークです >>33
JSの場合はブラウザにしてもElectronにしても
HTML/CSSのレンダリングエンジン前提だからGUIライブラリが標準でランタイムに入ってるのと同じ
その標準のGUIライブラリであるHTML/CSSを操作するサードパーティのライブラリも腐るほどある
pythonユーザーに向けて2dゲームエンジンを作りたいというニッチなニーズを除けば
jsとpythonの二択でpython選ぶのはあり得ないよ jQueryでゲームエンジンはないやろ
どうせcanvasでグリグリ描くことになる >>35
なんとなくjsのほうがいいということはわかりました
ありがとう
作るならelectronですね electronについて質問いいですか？
vs codeやatomはテキストエディタと比べるともっさりしてますけど、これはelectronに起因しているのでしょうか？
大抵のテキストエディタより多機能ではあるのですが >>38
起動以外は気にならんじゃろ
起動が遅いのとメモリ持ってかれるのは
ElectronというかChromiumのせい reactはguiフレームワークであって(jqueryのような)WEBフレームワークと呼ばれるものではないのですよね？
そうであれば会員制サイトにはjsは使われないのでしょうか？
WEBフレームワークだと勘違いしてました。
pythonとphpが多いようですね。
>>40
そうですね、起動だけですが、随分もっさりしています。 各種エミュレータがあるから作れないことはないけどモチベーション続かないだろ… jQueryのどこがWebフレームワーク（）なんだｗ
よくも悪くもDOM操作ライブラリじゃねーかｗｗｗ 仮想DOMが（一時的に）流行しているせいでDOM操作（jQuery含む）と
相性が悪いのがWebフレームワークって感じになってる
Webフレームワークを使うと直接DOMを操作するなって言われる
Webフレームワークのやり方に依存しまくるしかなくなるので
あとで技術的負債になりやすい Ruby on Rails, React, Vue.js などが有名なフレームワークだけど、
Reactは厳密には、コンポーネント・部品を作る、ライブラリ・モジュール
だからフレームワーク中で、ある部品だけを使うために、
Rails + React, Electron + React みたいな、組み合わせが多い フロントエンドのフレームワークとサーバーサイドのフレームワークは分けて考えたほうが良くない？
「Web」フレームワークっていやどっちもそうなのかもしれないけど括りが大きすぎる気がする >>46
guiの部品といいますがhtml cssがあるのになぜ必要なんでしょうか？ >>46
reactとdjangoという組み合わせもありなんですね
djangoはサーバを操作するものですよね 例えば、React で、こういうコンポーネントをファイルに定義して、
そのファイルを別のファイルで読み込むと、
<Layout /> という要素で、その部品を使える
Ruby のERB で、各コンポーネントを、別々のファイルに定義して、読み込むのと同じ
export default class Layout extends React.Component {
render() {
let name = "あいう";
return (
<div>
<h1>Welcome!</h1>
<h1>{name}</h1> // 式展開
</div> );
}
} Rails + Vue.js は、少ない。
これは、フレームワーク同士だから、両方の規則を守るのが、うっとおしいから
一方、Rails + React は多い。
これは、Railsフレームワーク中で、
Reactというモジュール・GUI 部品を使うだけで、分かりやすいから
もちろん、Rails + Bootstrap も多い >>49
HTMLやCSSは材料で
その加工手法や調理道具がフレームワークやライブラリなんだよ サクッときれいな表現をするためのものですよね
reactで会員制サイトのようなものを作れると勘違いしてました
djangoなどとは違うもんですね そうめんを食うたびに麦を挽くところからやるのは面倒
茹でればすぐ食えるようにしてくれたのがライブラリ
https://www.ama
zon.co.jp/dp/B014FB62ZG
そうめんを食うたびに竹を割るところからやるのは面倒
必ず使うものや手順は予め用意してくれてるのがフレームワーク
https://www.ama
zon.co.jp/dp/B07DFZ7M4V
お客さんにいっぱいそうめん貰った
そこで、このキットポチろうかさっきからずっと悩んでる… >>53
Rubyガイジが嫌がらせをやめられないのは爺さんだからか。
年取るとどんどん幼児化していくらしいから気をつけないとな 嫌がらせって、別にダメージ０でしょ
何かを実現するのに１００％JSでやらないといけないという決まりはないし
別にRubyを5%10％使っても良いわけじゃん？
言語としてもRubyに良いところがあるならそれを参考にしようというくらいの
甲斐性や柔軟性がJSにはあるよ
あれくらいのレスをわざわざ突っ込んでそれこそスレの目的と関係ない
流れが続くほうが良くないと俺は思うんだけど、どうかな >>58
そんなことはみんなわかってる
だがスレ違いだって理解しろよ
それはRubyスレでやればいいことだ 右も左もわからない初心者にRuby本を勧めて遠回りさせるとか嫌がらせでなかったら何なんだ？
Rubyガイジはjs住人には認められたみたいだから、ruby、js以外のスレには出てこないでくれ >>58
ダメージ0じゃないやつもいるってことよ
どういうやつかは察してやれ ここにRubyの情報書かれてもクソの役にも立たん
参考になるかならないかで言えばならない
どうでも良いRuby情報をクソ改行とクソ句読点で何行も書き込むくらいなら
「こうすればいい」か「jsでは出来ない」と一言二言書けば済む話
Ruby では、とかスレチが語り出さなくて良い 名前欄にRubyって入れてくれればいいんだよ
見たい人は見るし
見たくない人はあぼーんするし
誰も損しない rubyスレで同じ事しても大丈夫だって言うんならフェアな話だし考える余地があるんだがな
ダメージ0なんだろ？rubyの柔軟性を見せてくれよ https://zenpen.io/
何らかのWEBサービス作るにしてもサーバが必要ですよね
こういうサービスの場合、データはキャッシュに保存されている感じで、サーバではないのでしょうか？ お前の質問はおかしい
お前は何故か基本的にデータの保存にサーバーが必要だろうと思っている
でも何故かそのサービスはサーバーを利用していないだろうと知っている
そういうお前が俺たちに聞くことなんて何もないだろ React JSX は、Ruby, JavaScript でも、シームレスに使える。
ボタン・フォームなどの、単なるコンポーネント・部品だから
ボタンを部品化して、フォームも部品化して、
そのフォーム中で、そのボタンを読み込んで使ったりもできる。
つまり、2つの別々なファイルに、各部品を記述できる
その部品・部品群を、Rails, Electron で読み込んで使える
Ruby のERB と同じ。
各部品を、別々のテンプレートファイルで定義して、
それを大本のHTML に読み込む感じ データをサーバーに保存しない場合は、
WebStorage API(LocalStorage)で、ブラウザにキャッシュさせる なにか口から言葉を出す前にキャッシュの意味くらい勉強したほうが良い >>60
そんなウブな赤子が2chに迷い込んでくるわけ無いだろ！
ここは魑魅魍魎が跋扈する場所だぞ
本なんて進められたら無視するくらいの奴しかそもそもお呼びでない 中二病とかガイジとかrubyに惹きつけられるのはキモいやつばかりだな 【悲報】先日英語版が刊行されたサイ本第7版、旧版にはあったjQueryの章が丸々カットされていたｗｗｗ もとから乗ったこともないフレームワークもあるしなｗ ７版にReactのコードちょこっと載ってるね。なぜか項題はJSXだけどｗ確かに間違いじゃないけどさぁｗ https://zenpen.io/
こういうテキストエディタってどうやって作るんでしょうか？
ライブラリナシですか？ このサイトに、そのURL を入力して、そのページを分析してみれば？
https://builtwith.com/
Ruby on Rails 6 では、Action Text という機能が追加されたが、
Trix と言う、WYSIWYG エディタが含まれている どれだかわからん
Screenfull.jsというやつかな、、、？ ライブラリなしならフォームを使用して作るもんでしょうか？ ここに来る前に１年くらいHTMLに基礎くらいは勉強してこい
右も左も分からない人が掲示板で覚えるのは難しい
contenteditableくらい知っとけ Ruby on Rails 6 の、Action Text という機能で、
Trix と言う、WYSIWYG エディタを使う理由
ほとんどのWYSIWYGエディタは、HTMLのcontenteditableやexecCommand APIのラッパーです。
ブラウザの実装ごとに独自のバグやおかしな動作が発生しています
TrixではcontenteditableをI/Oデバイスとして扱うことで、こうしたブラウザ間の動作のぶれを回避しました。
エディタに独自の方法で入力されると、Trixはその入力を内部のドキュメントモデル上での編集操作に変換してから、
ドキュメントをエディタ上で再レンダリングします
これにより、Trixはあらゆるキーストロークで発生するものを完全に制御し、
execCommandを使う必要性をすべて回避しています Trix は、Ruby on Rails の作者・DHH のBasecamp 社製
そもそも、JavaScript に影響を与え続けているのは、Rails そんな人でもTrixはJavaScriptでしか実装できなかったんだね。JavaScriptすごい ブラウザ上でDOMをいじれる言語が他にあるのかよww
頭悪いにもほどがある Ruby on Rails 6 では、webpack の薄いラッパー、webpacker もあるw
そのまま、node.js を使っているw
yarn も使う
例えば、React, Bootstrap を使うなら、
.bin/rails webpacker:install:react
yarn add jquery popper.js bootstrap
JavaScript も、Rails 内の部品 正規表現で含むと含まないの複合条件ってできるのでしょうか？ https://zenpen.io/
これってデータはどこに保存してるんでしょうか？
キャッシュですか？ S3 じゃないの？
>>77
のリンクに、そのサイトのURL を入れて、分析してみ >>88
条件によってできたりできなかったりします
現状lookbehindはchrome系しか対応してないし
うまくできない時は素直に複数回に分けましょう
>>89
上でLocalStrageって答え貰ったでしょ >>92
キャッシュ削除しても保存されてますね
すみません chrome系しかって言うけど、
現状chrome系が大多数じゃん http://codepad.org/I322LIfG
sessionstrageで保存してもundifinedになるんですが、なぜ保存されてないのでしょうか？コンソールログで表示させているのですが、、、 sessionstorage.setitemに戻り値はありません
保存されたかどうかは開発ツール
Chrome：Applicationタブ→Strage→Session Storage
Firefox：ストレージタブ→セッションストレージ
で見れ あるからなんなのさ
savedataじゃなくてloaddataを出力しろよ ■ このスレッドは過去ログ倉庫に格納されています
