+ JavaScript の質問用スレッド vol.136 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです ■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) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 脈絡なくRubyとかいうオワコン言語の宣伝始めるキチガイが定期的に沸くため「Ruby」でNGワード登録推奨。 いいじゃん別に
昔みたいにちょくちょく多言語勢が遊びに来ることも無くなったし
バトロワスレも無くなったし
言語の比較からくる質問的話題作りとでも思えばさ
過疎ってるんだし、間口は広げるべきだよ 10年以上前のコードを引き継いだのですが、ソース内にfunction window.onload(){}なるメソッドがあり驚いています
windowロードされた時点で処理したい内容が書かれているのでそれは書き直す事ができるのですが
昔はfunction window.onload(){}といった書き方ができたのでしょうか？
変な質問ですがググってもよくわからなかったのでこちらで質問させてください
（もしかしたら前任者が最後に全置換とかして置いてった爆弾的なモノかもしれないので、それをはっきりさせたいのです…） えっ、むしろ今出来なくなってたの？
まあ使わないけどさ そんな書き方はじめて見たわ
function obj.prop () { ... }
みたいに関数名にドットシンタックス使ってるってことだよね？
試してみたらSyntaxErrorなった function window.onload(){}
じゃなくて
window.onload = function(){}
じゃね？ それな普通だが、そうじゃなかったから頭抱えてるんだろう >>13
少なくともNetscape3以降から現在までの主だったブラウザでは駄目なはずだし
見たこともないなあ
ただ昔、グーグルができる以前は特に
今では想像を絶するような謎コードとバッドノウハウが量産されたので
そんなのに出会ったと思っとけばいいんじゃない？ 今動いてないものを大切に持ってても意味ないだろ
さっさと消せ >>13
IEならオーバーライドみたいにして動きそう
ところでそれ、動いてるの？ 親→idが「list」のulタグ
子→liタグ
liタグを作ってulタグの中に追加したいとする
var li = document.createElement(`li`);
li.textContent = `あいう`;
console.log(document.getElementById(`list`));
var ti = document.getElementById(`list`).appendChild(li);
こんな感じにすると、appendChildの前のconsole.logで作ったliが既に追加された状態で出るのはなんで？
で、var li〜をコメントアウトすると追加されない それ、追加された状態で出てるんじゃなくて、出てから追加された状態に更新されてるんじゃない？ >>26
appendChild前に alert('before'); を入れる >>14,23,21
昔ならIEでなら動いたが正解なんでしょうか？…謎ですね
コードは当然書き直しますが貴重な意見が聞けて良かったです
ありがとうございました
>>24
やっぱりIE特有のアレなんですかね
これが1番濃厚な気がしています（現行のIEだと不安定な動きです…基本エラーになります）
>>25
当然のようにSyntaxErrorですね 不安定とか基本とか恥ずかしいから辞めてくれ
笑わせたいのか webページで2ページ以上あるPDF表示させる前に、指定したページだけサクッと削除できるような方法ってありませんか？ これを使う。
https://github.com/mozilla/pdf.js
何でもできるが、大変だと思うよ。
重ねて言うがサクッとは無理。 jsの入門書やって、ドットインストールのおみくじを作る…みたいなのをやってるんだけど
そこからwebサイト作るようになるには、何やればいいんでしょう
githubのソース見るとか？
入門書は沢山あるけど、そっから実際に作るまでどうしたらいいのか分からず、、 >>35
サーバー借りてwordpress入れてあれやこれややってりゃ出来る
サーバー触らないと超しんどいよ
確かさくらサーバーは一週間ぐらい無料で借りれたはず
多分最初はjs触らず、htmlとcssばかりになると思う >>31
サーバ側でならわりとプルンとできるよ
たいていの言語で、PDF扱うライブラリあるし 初心者は、Ruby の、Rails, Sinatra で作るのが早いし、わかりやすい。
でもGUI は、HTML, CSS, JavaScript だけど
Vue.js, Node.js + Express など、JavaScript のフレームワークは面倒 >>35
GitHub Pageが無料で手頃だからオススメ
別に「Webサイト」を作ろうとしなくてもいいと思うよ
Canvas使った１ページだけのアプリケーションでも良いんだからさ
サイト丸ごとっていうのは、現実的に不可能だよ
そういうのを目指しても器用貧乏になるだけ
枠にとらわれず自分のやりたいことに注力したほうが良いよ >>41
業務ではes6、個人ではes6だったりjQueryだったり いやそれライブラリだから…
es5/6/7と同列に語るなよ… 業務でも個人でもes6だな
たまにts書かされたりもする いくら最新の構文が使えてもAPIが使えなきゃしょうがない
Babelが出た当初はまだしも今では大量複雑なAPIをポリフィルしきるのは困難
よって業務でも個人でもmodule対応かどうかで分けて
フル機能をES2017+で、最低限の機能をES5で書いてる APIと構文は用途が違う
APIは使うかどうかは、使う理由があるかどうかしょう？
例えば現在地を知りたいなら、Geolocation API は必須だが
そうでないなら、使う必要がない。
新しいAPIだー、何が何でも使わなくちゃー
なんてなるわけないんだからさｗ
つまりは、最新の構文が使えることと、APIを使うことは別なわけで
なんでそこで、最新の構文が使えるのに、APIが使えないんだ、クソッ
なんて状態になるわけがない
> フル機能をES2017+で、最低限の機能をES5で書いてる
フル機能をES2017+で、最低限の機能もES2017+で書けばいいじゃん？
「最低限の機能」では新しいAPIを使ってないはずだから可能 >>45
BabelはトランスコンパイルするからPolyfillとは別概念だけど、いろいろとごっちゃにしてない？ >>46,47
ごっちゃにしてない
最新の構文が使えることと、APIを使うことは別ではない
APIは今や1機能と言うわけではなく各種Workletだったり、
書き方や設計の問題なのだから
モダンブラウザでは新しい構文・新しいAPIで新しい概念のコーディングができる
それが古いブラウザではできない
ポリフィルできない、プログレッシブにもしにくいAPIが増えてる現状
構文だけトランスパイルできても仕方がない
最低限の機能というのが伝わらなかったようだね
<script nomodule>alert('モダンブラウザ使えやゴラ')</script>
やってることはこれと実質変わらない
トランスパイルする必要がない > 最新の構文が使えることと、APIを使うことは別ではない
別だろ・・・・
お前JavaScriptとブラウザのAPIをごっちゃにしてるな
Nodeとか使ったことあるか？
お前の大好きなそのAPIはNodeにはないぞ
そのAPIがないNodeでも最新の構文が
使えるというメリットは有るわけだ >>49
Nodeは0系から使ってるが
>>そのAPIがないNodeでも最新の構文が
>>使えるというメリットは有るわけだ
何が言いたいのかさっぱり伝わらない
Nodeで最新の構文が使いたければ--harmony-*とするだけ
V8がまだ対応していないものは草案も草案だからまだ使おうとは思わない babelしてポリフィルかけた後のjsに対してAPI使えばいいんでないの？ 他人のコードを読んで学びたいんだけど、みんなgithubみてたりすんの？
それともカンファレンス行ったりする？ あ、ごめんすぐ前に>>40があったわ
github pageとか見ればいいんだね
チェックしてみる >>53
俺がずっと言ってるのはモダンブラウザとレガシーブラウザの差が付き過ぎてきたから
１つのコードを元に両対応しようとするのはもう限界を過ぎてるってこと 勉強しようと思ってyahooやgoogleのhtml見るとおったまげる >>52
だからブラウザのAPIなんか使わなくても、
新しい構文を使う意味はあるってことでしょｗ >>56
なあ、お前、お前のコードは必ず新しいAPIを使わなきゃならんのか？
モジュールごとにわけてないんか？
新しいAPIを使わないモジュールだってあるだろ
ないんか？驚きだ >>58
生HTMLやJavaScriptを書くことなんかなく、
変換して生成しているようなコードが出てくるから そうよ。古いブラウザに対応する場合でも
新しいコードで書いてbabelのようなツールで変換して生成する。
そうやって、モダンブラウザとレガシーブラウザの
差を吸収してるわけ。それが今の常識 googleはcssもjsも外部ファイルにしてないんだよね
html一枚のみ
超早い そう。もちろんコードを書くときは複数のファイルに分かれている
それをツールを使って結合している。 そうなんだよね。ブラウザがJavaScriptモジュールに対応したと言うけれど
外部ファイルである以上、どうしても遅くなるんだよ。
だから最終的には何かしらのフレームワークを使って
ビルドして1つないし数個のJavaScriptファイルにするっていうのが
現実的な解になる 今更ながらreact始めたけどこれいいね
vueはまだ >>46
例えば、class構文を使う時、「Geolocation APIの必要性」によって、採用を取りやめたり、採用に踏み切る事は有り得ない >>69
レスする相手間違ってるぞｗ
そういうことだよ。APIを使っても使わなくても
class構文が使えるというメリットがあるから
>>45が言うような「いくら最新の構文が使えてもAPIが使えなきゃしょうがない」
なんてことにはならないんだよ
たとえAPIが使えなくても、最新の構文が使える 俺はトランスパイラの一般的用途である１つファイルを書いたら
モダンブラウザにもレガシーブラウザにも対応できるという事について言ってるだけであり
ありとあらゆる場合においてBabelが不必要とは言っていないんだが
現実APIの対応差が大きすぎるので共有スクリプトで対処し切るのには限界がある
だから例えばモジュール対応で分けてピュアJSで行くべき
そして過去スレでも度々話題に出るようレガシーブラウザには無理をさせるべきではないので
その対応コードはかなり小さいとすると、
その対応コードだけトランスパイルを試みるよりも、プロダクトや社から
トランスパイラというシステム・工程を１つ取り去った方が良い
そういう「大局的なメリットがある」のでうちの所はそうしている
という事例を挙げて言っているのであって
いくら小さい局所的なケースだけをメリットが有る、使える云々言われても
あぁそうですねとしか言えないんだが >>71
言ってることが破綻してる
「APIの対応差が大きすぎる」のと
トランスパイラを使うことになんの関係もない
APIを使おうが使うまいが、JavaScriptのコードを書くわけで、
そのJavaScriptのコードは同じモダンな書き方に
統一したほうが楽だという話だろ
なんで「くっそAPIが使えない。だからAPIを使わないコードを書くしか無いけど
だがそのAPIを使わないコードを、古いJavaScriptコードで書かないと
いけない病気が発動してしまう」ってなるんだよ？ >>71は結論ありきで語ってるからめちゃくちゃになって
意味不明なんだが、要するに共有できるコードに
トランスパイラを使うかどうかって話
特定のAPIがなければ、そのサイトがまったく利用できないって
場合じゃない限り、モダンブラウザにはフル機能、
レガシーブラウザには制限された機能を提供することになる
つまりモダンブラウザ専用コードとモダンでもレガシーでも
使える共有するコードの二種類に分かれる
（レガシーのみで使うコードってのはないかごく少数）
で、>>71は共有コードに対してトランスパイラを使わずに
古い書き方をしましょうと言ってる。アホとしか言えない。
大半の機能は共有コードになるんだから、その部分こそ
新しい効率の良い書き方をして、レガシーブラウザ向けには
トランスパイラを使って同じコードで動くようにすることで
多くのムダが省ける >>71
> 俺はトランスパイラの一般的用途である１つファイルを書いたら
> モダンブラウザにもレガシーブラウザにも対応できるという事について言ってるだけであり
BabelはESの範疇でトランスコンパイルするだけで、全APIを吸収するとはいわれてない
完全なるあなたの勘違い >>74
言われてない?
俺が言ってるんだが
完全なるあなたの思い込み Babeは全APIを吸収するものである・・・>>77だけが言ってる
世間ではそんな事は言われていない API＝関数群
と思ってたけど最近はclassも多いし定数もあるしで日本語だと何になるんだろう gatsby勉強中なんですが
import React from "react"
import { Link } from "gatsby"
この{ Link }の部分はなぜ{}で囲まれているのでしょうか ttps://stackoverflow.com/questions/41337709/what-is-use-of-curly-braces-in-es6-import-statement
自己解決しました トランスパイラは、文法を変換するだけ。
IE, Edge では動かない
jQuery, Electron, React, Vue.js のようなフレームワークを使わないと、プラットフォーム互換性はない >>77
> 俺が言ってるんだが
では、あなたの認識がおかしい >>77が「全APIを吸収する」と言っているとして、どの辺が反論になってるの？ IEなどで動くように文法変換してるんだろ？
そこで吸収できないものをフレームワークで出来るって、どんなAPIの話してるんだ？ 質問
Javascriptでフォームから投稿した内容をtableで過去の他の人の投稿と混ぜて行毎に表示して、投稿した項目をキー毎に並び替えるのって可能？
PHPならDBに格納すれば出来るのはわかるけど、DBは無料のレンサバだと使えないっぽいし、サンプルとかも調べてみたけどjavascriptで両方やってるサンプルが見つからなかったわ >>87
その程度なら
テキストファイルに記録しておくなんて手もある DB に保存できないのなら、
過去の他人の投稿は、どこに保存しているの？
A の投稿は、AのPC に保存しているの？
そのデータを、B が取得できるの？
他人のPC 内のデータは、取得できないはず DB使うようになったら迷わず有料サーバー借りたほうがいい
ファイルをDB代わりにするとかしんどすぎる
xreaなら一ヶ月契約したら後はずっと無料で使えるってシステムだったと思うから、
そういうとこ探してもいいかもね >>88
>>89
さんくす、ググったらこれで出来るっぽいな
https://algorithm.joho.info/programming/javascript/localstorage-table/
Localstrageとかいうのに保存すれば行けるんやな、他人の表示されてるのか知らんけど
後はTableソートのプラグインでも入れて、自分しか投稿を削除できればいいか ああダメだったわ、他の人の投稿取得できてないわ・・・ ゴールが見えない
ソート用のライブラリとか対応してるフレームワーク使えば >>87
PeerJSとかのサービス使ってWebRTCで結べばWebブラウザが即席のサーバー代わりになる
Nodeやブラウザアプリで実装するのに比べてIPが変わっても大丈夫だし
DBはIndexedDBだったりクライアントサイドの技術で全部作れる >>98
お前が「ウンコ」と書く
お前がPCを落とす
相手が「チンコ」と書く
お前がPCを立ち上げサイトを開く
相手が、自分の書いた「チンコ」の上にいきなり「ウンコ」が現れビビる
さっき「チンコ」って書いたとき「ウンコ」なんて書かれてなかったのに！ >>99
それでも全然悪くないと思うよ
ラインだってそうだし、掲示板だって短時間とは言えそうだし
今でもあるのか分からないけど5chだって時間が入れ替わることあるしね
それに受付順にしたければそうすることは難しくないし ■ このスレッドは過去ログ倉庫に格納されています
