+ 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にして見えないようにしてください。文句をつける＝荒らしです 質問者がlet使ってるからでしょ
エラーでもないのに関係ないとこ変えると回答の本質がぼやける むしろなんでここでconst置けるような仕様にしたのか委員会を問い詰めたい。
ループ毎に値が変わる変数をconst宣言できるとかｗ
for-ofの()内はconst禁止でよかった。var/letなら直感に反しない。
トップレベルでは…
const A = 1;
A = 2; // エラー
なのにfor-ofでは…
for (const A of [1, 2]) {
console.log(A);
}
1
2 // for-ofちゃんナニ勝手にconst改変してくれちゃってんの？？自分のスコープだからってやりたい放題か！？こんな無法が許されていいのか！！ え？マジで言ってる？
for-of のlet/constはループ毎に毎回宣言してるのと同じじゃん
constによる最適化も期待できるんじゃないの >>263
const以前に、ブロックスコープの挙動は理解してないような
for (let i = 0; i < 4; i++)
document.addEventListener('click', e => console.log(i), false); >>264
毎回宣言ってどういう事？
一回だけじゃないの？
constで宣言すれば最適化で早いのは分かる >>267
宣言は1回だが、ブロックスコープはループ毎に発生してる
>>266の挙動を確認すれば分かる 違う。ブロックスコープが毎回発生するのは当たり前でそれだけでは説明できない。
それとは別に初期化句の変数宣言は特別扱いされる。 いやうまいことなってんだろうけどさ、
せいぜい>>264みたいな理解になるわけよパッと見。
const A = 1
const A = 2 // エラー
なのにfor ofのカッコの中に書くのはなんで許されるのって。
for (const A of [1, 2]) {
console.log(A);
}
が
{
const iter = [1, 2][Symbol.iterator]()
while (true) {
const {value: A, done} = iter.next()
if (done) break;
console.log(A)
}
}
のような動作になるだなんてfor of構文の見てくれからは推測不可能だろ。
for (const A of [1, 2])の字面だけ見たらループごとにAに1、2と代入されるように見える。
というか明らかにそう見えるような構文にしてる。
そう見えるようにしたいんだったらその場所ではconst禁止にしとけって話。 俺も似たようなことを思ったことがある
for(const i = 0; i < a.length; i++)
はエラーになるんだよな。 初学者が横から疑問が湧いたのですが
逆にどうしてfor-ofではlet Aじゃなくてconst Aを使うべきだと言えるのか、良く分からないです
だってループ自体の目的がAを改変することだったらletかvarにするしかないですよね？
それともfor-ofではAに渡されるのはBの一部の実体ではなくコピーなんですか？
（Aを書き換えてもBには反映されない）
だとしたらとんでもなく用途が限られるように思うのですが。 ×Aを改変
○Aを加工
と言ったほうが適切でしたかね .valueでinputのテキストボックス内に代入するとsubmitボタン押しても無反応になります
手動でキーボードから代入すると問題ないのですが何が原因なのでしょうか 強いて言うと、エラーは無反応です
コンソール開いてconsoleとnetworkみてもウンともすんともです 自己解決です>>276
エラーをあらためて探っていると
コンソールの各エラー項目の表示非表示チェックボックスが乱れていました
で、全部表示するようにしたら
TypeError: X[g].exec is not a function
というエラーが出てきました
どうやらObject.prototypeをいじっていのがいけなかったようです
関数にしたらsubmitも反応してくれるようになりました >>272
そりゃ i++ で変更してるし
同じくforと名乗ってても〜.forEach()に似た物と素直に考えられるかどうかかなぁ
>>273
jsでの代入や関数呼び出しと同じでAに入るものがプリミティブ型であればコピー、オブジェクト型であれば参照なので
for...of/for...inでletを使ったとしても変数Aに何かを代入してもBに反映されない
Aがオブジェクトならconstでもプロパティは変更できて参照元のオブジェクトにも反映される
perlやphpのような書き戻し可能なforeachの方がバグの温床になるような気がするけどね >>271
それいいな。
const forOf = (iterable, callback) => {
const iter = iterable[Symbol.iterator]()
for (let {value, done} = iter.next(); !done; {value, done} = iter.next()) callback(value)
}
Array.prototype.forEachと同じ感じで使える
forOf([1, 2], A => {
console.log(A)
})
1
2
forOf('ab', A => {
console.log(A)
})
"a"
"b"
ループの一時変数にletだconstだのムダな議論なくなるし。
まあ[...iterable].forEachでいいか… そもそもScalaみたくfor...ofならvarもletもconstも不要で自動的にconst扱いにすれば良かったんよ
将来的にそうなってほしい >>271
めっちゃ正論ティー
constの方がほんの少しパフォーマンス上がるとは言えほんの少しだし、
マイニングでもやらない限りconstで書く方がデメリットデカイ気がする >>271
ただ単に多くの言語の挙動に合わせただけ
その方がいろいろと都合がいいでしょ？ >>281
これで十分なものをなぜわざわざfor(const/let/var item of iterable)とか言うクソ構文を作ったのか
for(const item of iterable)と書かれて仕様知らないやつが初見でitemがループ毎に違う値入ってるとは夢にも思わないだろ。 お前らが何を言ってんのか理解できん
for-ofでのletとconstはまったく違うし、どっちも必要 console.logってbashでいうechoみたいにコードが読み込み・実行される際にしか出ないもんだと思ってたけど、あとから更新されたりするの？ >>286
お前こそなに言ってんだ。for ofでletは不要。
let B = [1, 2]
for (const A of B) {
A = 6
console.log(A);
}
//=> エラー
let B = [1, 2]
for (let A of B) {
A = 6
console.log(A);
}
//=> 6 6
console.log(B)
//=> [1, 2] >>289
まあconstのほうがお行儀がいいしlet使うことはないかも
ところで君はまだfor-ofの構文についてわかってないようだね >>289
間違いを防止するって意味なら結構アリだね
A==6と間違えてのA=6とか 初心者でjs勉強終わった人がフロントのフレームワークで何からやった方がいいかの議論 jsのフレームワークって小回り効かないのがなぁ
jQuery辺りのライブラリで十分、というか生jsしっかり覚えたほうがつぶしが利いて良い jqueryやったことない頃
生jsだけはしっかり把握してたから、実装は出来ないものの人のコードは読めたわ
まぁ他の言語も同じだけどね >>294
最終的にnuxt.jsに行き着くのだから
最初からnuxt.jsやらせるべき 仮想DOM系はバックエンド理解してないとやっても意味ないだろ >>300
1.Xから2.Xでいろいろ変わりすぎ
ドキュメント少なすぎ
1.Xのドキュメント邪魔
人柱になりたくなければ避けた方が無難 >>301
仮想DOM系のフレームワーク(react,vue)は、バックエンドとフロントエンドを分離するための技術ですよね？
フロントエンド側から見るとブラックボックスのエンドポイントを叩けばJSONが返ってくるシンプルな実装になっている。
バックエンドがどんなDBを使ってるか、どんな言語で実装されているのか等、深く理解する必要は無い。 https://twitter.com/ydnjp/status/1066529802142674945
https://pbs.twimg.com/media/Ds1LXSaV4AEFCRW.jpg:large
今から学習するならReactかVueの二択だな
Angularは淘汰された、jQueryも未来はない
バックエンド(WebAPI)はGraphQLでガチ決まり
これに異論唱える人は自分の周りにはもういない
安心して学習できる水準まで来てる
Prismaも組み合わせると尚良し
https://www.prisma.io/
■GitHub Starランキング
【JavaScriptフレームワーク編】
https://github.com/search?o=desc&;q=javascript&s=stars&type=Repositories
3位 vuejs/vue ☆122K
4位 facebook/react ☆117K
【GraphQL編】
https://github.com/search?q=GraphQL&;type=Repositories
3位 graphql/graphql-js ☆12.3K
4位 prisma/prisma ☆11.6K
5位 facebook/graphql ☆10.4K
7位 apollographql/apollo-client ☆9.4K
学ぶべきものはここに集約されてる
https://twitter.com/5chan_nel (5ch newer account) >>306
jQueryだけ「もう使いたくない」「使わないつもり」の割合が高いな >>304
そんな公式ひとつで全部まかなえるはずないだろ >>308
基本、公式以外を信用しない俺とは対極的な考えだな… >>304
wordpressのしょぼいテンプレートみたい。左メニューのクリック領域が狭くてが操作し辛い
見た目は若干アレだけど、内容は普通と思う >>305
バックエンドが勝手にデータ変更したり構造変えたら終了
バックエンドでやってるバリデーションと違うバリデーションをやったら整合性保てなくて終了
バックエンドとフロントエンドの設計を同時にし、改修する場合も同時にやらないといけない
勝手にバックエンドだけ変えたらフロントで持っていたstateが合わなくなる フロントちょこっとやってからバックエンドがっちりやって、またフロントに戻りつつある
○○はどっち弄っても出来るけどってもんがあるとあとは負荷や処理速度の問題になってくるなと最近思う >>314
それ別にvueとかreactとか仮想DOMとか関係なくね？
ていうか勝手に変えるなそんなもん いまはフロントとバックエンドって分け隔てより、ロジックとビューで分かれる事が多い気がする
ロジック班は当然バックエンドの知識もないといかんな バリデーションをフロントとバックエンドの両方で対応するの二重管理じゃん
フロントがデータを保持しているかどうかはバックエンドはわからん
フロントで値を更新して保持して永続化もして、なのにバックエンドはそんなの知らんしDBに保存してないからって
DBとフロントで違う値になることもありえる vue.jsはnuxt.jsとセットで使うものだ
vue.jsのベストプラクティスを集めたフレームワークonフレームワークがnuxt.js
SSRやPWA対応も一瞬
$yarn create nuxt-app test
$cd test
$yarn dev
これだけで雛形完成
あとはpagesフォルダ以下のvue(単一コンポーネントファイル)を弄ってサイトを構築していくだけ
https://ja.nuxtjs.org/guide/directory-structure SPAじゃない古典的なMVCアプリケーションでも
バックエンドが勝手にDB構造変えたら
テンプレートエンジンに入り組んだロジックを変更しなきゃいけないので
reactやvueだけに該当する問題じゃないよね、それ >>320
バックエンドはフロントエンドも含めたフレームワーク
しかしreactとかはバックエンドは含まない
reactとか使う場合はバックエンドとフロントエンドの両方で値を持つ必要がある
古典的なフレームワークはフロントで値は持たない あとまともなWebAPI設計者だったらadd-only approachを選択するので
破壊的な構造更新はめったに起きない
フロントエンド(クライアント)はGraphQLでリクエストするだけ
もうRESTは使わない ＞フレームワークonフレームワーク
ぜったいいやあああああああああああああ なんか話が噛み合わないな
2010年より以前の知識で止まってる人と会話してるみたいになってる Yahoo、楽天、CA、DeNA、GREE、mixiのような大企業の社員さんですか？
中小企業に勤務する場末のweb制作屋には高度すぎて理解できない jQueryは何故駄目なの？
vue.jsにする理由は？GraphQLってなに？
そもそもRESTってなんだ？ >>323
そんな案件ばかりだよ？
>>324
おれのこと？
>>322
GraphQL使いたいんだがね
そこまで複雑でもない
しかしバックエンドとフロントでルーティング合わせないといかんのもねえ >>326
別に駄目なわけじゃないよ
力不足なだけで
vueとかreactとかとかは
MVCベースのSPAのフロントの核となる前提で作られたものなので
それらに類するものを構築する上では非常にマッチする
jQueryはあらゆる場面で手軽に使うのが前提の汎用関数群なので
いろんなプログラムの部分部分で使うにはとても便利だけど
じゃあjQだけでSPA作ろうってなると足りないものが多いし
jQベースでそれを補おうとすると、ちょっと煩雑になりすぎる SPAってSingle Page Applicationの略だよね？
別にアプリケーション作る必要ないんだけど？ HTMLが動的に生成されるならそれはWebアプリです >>328
成る程ですね
SPAにするのは何故？
サーバーが組み立て済みのHTML吐き出すほうが楽じゃない？
そのHTMLをjQueryでちょこちょこ弄ってアニメーションさせてリッチな演出するのが業界の最先端技術だ！と
頭禿げてる先輩(専門卒)に教わったんですけど、もう古い？ 時価総額数千〜数兆円の大企業に勤務する、東大京大卒の正社員さまの
「2018年のweb業界の技術トレンドはこれだ！」というものを教えていただきたいです。
ちなみに私も専門卒です。年収は250万円です。ハゲてはいません。 >>331
全然古くない。もともとHTMLはドキュメントを記述するために
作られたもので、現在ウェブサイトの殆どは動きがないもの
アプリケーションに相当するものなんて殆どないよ
ウェブで出来ることが増えてきて上がってきてスマホアプリのような
アプリケーションも作れるようになったから、どの会社もみんな
アプリケーションで自社サイトを作り直すはずだ。みたいに考えてるやつが
一部いるだけで、そんな事するサイトはまず無い
昔はjQuery Mobileといって、jQueryをベースとしてスマホアプリと
同じようなインターフェースが作れるフレームワークがあったんだが、
それ（jQueryではなくjQuery Mobileね）が失敗したのもの理由は同じ
いくらなにかすごいことが出来るようになったとしても、会社サイトとか
情報サイトとかブログとかHTMLをベースとしているサイトが
なんの需要もなくスマホアプリ風にする理由がない つまり小説書いている人が、高性能パソコンを手に入れたからって
3Dアニメを作り出すようになるわけがないってことですかね よく考えてみたら、うちの会社の規模ですら静的HTMLオンリーはないですね。
よくある会社紹介サイトでも最新のお知らせ情報をリスト形式で表示するところあるじゃないですか？
これを毎回静的HTMLで更新するのは馬鹿らしい、ということで高専卒の新人くんが
Railsとかゆー、ウェッブアプリケーションを作るアプリで作ってました。
僕はHTML専門なんで、何をしてるのか分からなかったですけど・・・ >>331
UI/UXの観点からするとアプリケーションには
画面展開が行われるべき状況と
シームレスに展開されたほうがわかりやすい状況とが、それぞれある
アプリケーション側の観点からすると
プログラムはモデルありきであって、ビューが変わるのはその結果
たとえば画面全体が切り替わるのも、モーダルひとつ開くのも、基本的には同じこと
なのでウェブページの仕組みに制限されたくない
ってのがSPAが良しとされるところじゃないかな、と思ってる jQuery Mobile使ってたわ
今でもたまーに見かけるね
https://www.1-s.jp/
結構便利なんだけどページ内アンカを使えないという致命的な仕様があった >>335
たんなる会社紹介ページをRailsで作るとか無意味だよｗ
Railsで作るようなものは、ユーザーがログインして使うようなもので
ユーザーの操作でページが変わるようなもの
別の言い方をすれば、Googleが検索してクロールできないものだよ >>338
ええっ！？無意味なんですか？
管理メニューから、お知らせ記事投稿するだけでトップページのリストが変化するのをみて
高専くんすげー！ってハゲの先輩が感動してましたけど・・・？ >>338
まあでもそんなもんじゃね？
ワッツニュー部分だけちょろっと書いてCMS化しよーって時とか
まあ慣れてる言語でサクッと書いちゃうでしょ そうだよ。HTMLがメインでJavaScriptはちょっと動きをつけるだけで十分な場合に、
HTML廃止して、JavaScriptから全部生成します。
JavaScriptがなければ表示されないし、HTML+CSSでサイト作っていた人は
今度からJavaScriptに埋め込む必要があります。
そしてプログラミングを学んでください
なんてのは、難しくしてるだけなんだよ >>340
無意味だよ。
それって普通にローカルでHTML生成しても出来ることだからね
HTMLすらわからない人にサイト更新させるために導入するならわかるが、
そういうのはブログで良い
自分でRails使ってアプリ作るとかサイトを重くして
脆弱性を埋め込む可能性があるRailsを使うことに意味はない そうなんすか
高専君いま隣りにいるんですけど
「こいつら適当なこといってますよ」ですって >>344
それがどうかしたの？
あんたがその高専くん出ない証拠もないし
ハゲはお前かもしれないだろ サイト更新とか自前でやるにしても、CMSかWordPress導入するのが関の山だろ
そのCMSやWordPressでvueやreactが使われていたとしても、
それは自分でJavaScript使って作るわけじゃないしね。
つまりvueやreactが必要とされるのは「開発者」ってこと
自分らでちょこちょこって使うならjQueryでいいよ ブログとかウェブアプリとか専門に作ってる会社以外は
jQueryで必要十分ってことかな WordPressが良い
あの手っ取り早さは凄い
weordpressの中にjQueryも入っている >>347
そうでもないかも
vueやreactの本丸ではない細かな部品も
後発だけあって洗練されたのが沢山あって
例えばちょっとしたフォーム置くだけ
なんて場合でも結構使えるよ >>349
HTMLで書かれたページがあります。
何が簡単に使えるんですか？ vueはプログレッシブフレームワークだから
サイトの規模に合わせられる いや、そうじゃなくて、どれだけ簡単に使えるのか知りたいだけです
https://jsfiddle.net/ に書いてくれませんか？
vueを使った必要最小限のコードを 訂正。必要最小限じゃわからないので
イベントハンドラとDOMの変更をそれぞれ最低一つは書いてください >>354
やっぱりそんなもんですよね
HTMLで書けばすむものがJavaScriptに移動し
コードの量も増えてしまう
JavaScriptなし版
https://jsfiddle.net/s59042zf/1/
jQuery版（vue版にあわせてspanとdelを入れ替える）
https://jsfiddle.net/s59042zf/2/ HTMLの量が劇的に増えて可読性も下がってるな
jQueryも酷い HTMLで書いたほうが可読性いいじゃん
なにより、HTMLとCSSだけでできるからプログラマと作業が分業できる。
それにリストの二番目だけに、画像を入れたいとかよくある話だけど
そういう場合でも簡単に対応できるし柔軟性が上がってる laravelかwordpressだったらどっちのがいいの？ ■ このスレッドは過去ログ倉庫に格納されています
