19/03/02 22:33:41.00 IgVX/rLT0.net
>>599
逆に分業じゃなっきゃできんってヤツはわざわざ勉強してまで新しい技術を導入したいとかいい出すヤツは居ないっていう話だよ
>>600
なんでRailsねじ込んできた？
621:デフォルトの名無しさん
19/03/02 22:40:19.17 x3fQB5qB0.net
>>594
無視ってどういう意味で？少なくともReactのアプリで使えているけど。
622:デフォルトの名無しさん
19/03/02 22:46:45.64 0oz9yp0R0.net
阿部寛のHPを構築するならVue、React、Angularどれがいいの？
623:デフォルトの名無しさん
19/03/02 22:48:37.42 Lvrdovo/0.net
>>603
意味がわからん。
仕事を一人でやるのは大変だから、分業できるようにしないと駄目って話なんだが？
新しい技術であっても、それで分業ができればいいんだよ。
というか分業ができる技術を導入するべきだ。
624:デフォルトの名無しさん
19/03/02 23:11:54.68 bakyLAA50.net
この作業がそんなに難しいことだと思えないんだけど、そんなもんかね。
>ReactとVueはJavaScriptの中にHTMLの断片が埋まってるから
>それを修正して思い通りのデザインを作ってもらうのは無理だろう
625:デフォルトの名無しさん
19/03/02 23:27:02.72 Lvrdovo/0.net
>>607
難しいかどうかじゃなくてやり方が全く違う。
普通はHTMLとCSSで作るんだから
626:デフォルトの名無しさん
19/03/02 23:47:00.54 IgVX/rLT0.net
>>604
確かにReactの場合はそういう書き方やってないよね
独自属性でもclassName以外はonClickとか元の属性と見ても違和感ないし
>>594が言ってるのはvueのv-modelとかv-onとかv-bindとか
angularでもng-modelとかそういう独自属性があるのを言ってるんだと思う
>>594
ちなみにこの辺の独自属性ってフレームワークのコアライブラリで先に処理されて仮想DOMになるからなのか
ブラウザのデバッガでは存在しないものとして表示されないんだよね
今確認したけど<input v-model="msg" />みたいに書いた場合は
ブラウザのデバッガのElements(Chrome)やインスペクター(Firefox)で見ると<input>に変わってる
BootstapのNavbarなんかでよく使うdata-toggleやdata-targetはそのまま表示されてるから
html5の独自属性とは違う位置付けだと考えた方がいいんじゃないか
627:デフォルトの名無しさん
19/03/03 00:02:03.36 PCCGC897a.net
Vueの独自属性はHTML5準拠やで
なのでdata-*にしなきゃいかんルールなどない
628:デフォルトの名無しさん
19/03/03 00:05:23.14 QTOYGzGrr.net
Chromeのvue dev-toolで確認できるんじゃないの
629:デフォルトの名無しさん
19/03/03 00:10:23.09 eREWiz410.net
>>611
それ使えば確かに見れるけどElements側に出ないって事は実DOMとしてはレンダリングされてないって事だと思う
630:デフォルトの名無しさん
19/03/03 00:17:30.72 PCCGC897a.net
単にインスペクターが無視してるだけだ
正しい属性なんだからレンダラが無視するわけにもいかんだろ
631:デフォルトの名無しさん
19/03/03 00:43:00.34 0eQXv8px0.net
>>609
＞v-modelとかv-onとかv-bindとか
そうそう。data-＊ではないカスタム属性ってEclipseに警告だされてすっきりしない
だから実行時に消えるとしてもhtml5のカスタム属性としてはよくない気がする
本来ならxhtmlの名前空間みたいに*:*でカスタム属性を命名できれば良かったんだけどね
632:デフォルトの名無しさん
19/03/03 00:48:58.18 GWdBiIMXa.net
未だにEclipseなんてゴミを使ってるヤツが居ることに驚きなんだか
633:デフォルトの名無しさん
19/03/03 01:03:17.04 QTOYGzGrr.net
eclipseww
634:デフォルトの名無しさん
19/03/03 01:41:00.89 QeUrAhcJM.net
実際レンダーする前のリソースなんだから
しょうがないんじゃないの
VSCodeとかでVue拡張使えばいいじゃん
635:デフォルトの名無しさん
19/03/03 01:46:51.51 eREWiz410.net
>>613
v-ifとv-showの違いとか読んだことない？ないものはないんだよ
636:デフォルトの名無しさん
19/03/03 08:28:07.07 oO/57lY20.net
なんだ、レンダリング前のテンプレートの話か。ならHTML5に準拠してないのは当たり前じゃん。
たしかにXHTMLならその規格に準拠した中で拡張できるけどHTML5はそれと決別したしねぇ。
637:デフォルトの名無しさん
19/03/03 09:22:56.48 PCCGC897a.net
>>618
正しくDOMとして評価された後にDOMを消してるだけ
拡張属性は正しく評価されてる
638:デフォルトの名無しさん
19/03/03 09:29:26.03 eREWiz410.net
>>620
だからその評価がBlinkやGeckoみたいなレンダリングエンジンで評価されるか
V8やSpiderMonkeyみたいなJavaScript実行エンジンエンジンで評価されるかの違いだって
639:デフォルトの名無しさん
19/03/03 10:40:12.55 BbxzBxVK0.net
>>608
そこまで違う作業とあんまり思ってなくて、
やってもらうとしてそんなに反感食うもんかなという風に思ってるのだが。
かなり勝手に思ってるだけだから実際の現場感覚はわからんけど。
640:デフォルトの名無しさん
19/03/03 11:31:27.74 cmngH9hR0.net
UIが劇的に切り替わる様な要件じゃ
デザインとロジックを完全に分離とかそもそも不可能じゃないの
641:デフォルトの名無しさん
19/03/03 13:57:28.79 PCCGC897a.net
デザイン
プレゼンテーションロジック
↑JS+HTML+CSS
--------
↓API
ビジネスロジック
デザインとロジックを分離するって言った場合、分離するのはビジネスロジックのこと
プレゼンテーションロジックを分離するという意味ではない
642:デフォルトの名無しさん
19/03/03 15:00:36.37 KP+Vu9ps0.net
WebまではHTML+CSSだけ分離も可能だけど
スマホWebアプリ／スマホアプリになってくると動きも含めてのUXという性質が強くなる
UI用ロジックや機能性まで考慮する「UXデザイナー」と
静止画の用意で終わるデザイナーとの差は大きい
Reactは後者のデザイナーとは相性悪いだろうね
643:デフォルトの名無しさん
19/03/03 15:07:16.96 QTOYGzGrr.net
デザインもUIもUXもフロントも全部やればいいじゃん
そもそもなんでできないのか不明
フロント勉強してできるようになったのならデザインも勉強すりゃいい
644:デフォルトの名無しさん
19/03/03 16:31:53.99 xQ2gqaf30.net
>>626
何でも一人でやる時間があればそうする
645:デフォルトの名無しさん
19/03/03 16:40:53.54 8CruhG400.net
少なくとも難しいから分業してるわけじゃないだろうね。効率の問題。
646:デフォルトの名無しさん
19/03/03 17:40:54.12 QTOYGzGrr.net
>>627
時間があればじゃなく、必要だからやらなきゃいけないんだよ
最近世界的にもその必要性が言われてる
>>628
効率悪いから一人でやるべきなんだろ
・フロントデザイナはコーディングできない
・フロントエンジニアはデザインできない。デザイン貰ってもセンスゼロだからコーディングで表現できない
URLﾘﾝｸ(postd.cc)
647:デフォルトの名無しさん
19/03/03 17:56:55.95 8CruhG400.net
>>629
開発の規模とか体制によりけりだろ。
例えば自分が所属してるとこだと、フルスタックにやれる人にはデザインなんかに凝ってる時間があったら別の仕事やらせたい。
648:デフォルトの名無しさん
19/03/03 18:01:05.79 eREWiz410.net
効率でいうなら複数のサイトを作業区分毎に分業するよりも１サイト１人でやる方がよっぽどいいと思うけどね
649:デフォルトの名無しさん
19/03/03 18:15:09.19 QTOYGzGrr.net
>>630
>デザインなんかに
そこの認識なんだよなあ
プログラマはデザインわかってないからデザインなんかにという言葉が出てくる
650:デフォルトの名無しさん
19/03/03 18:45:41.76 8CruhG400.net
>>632
651:デフォルトの名無しさん
19/03/03 18:47:22.33 8CruhG400.net
>>632
うーん、なんか噛み合わないな。デザインは大事だと思うから分業して欲しいと思うんだよね。そしてエンジニアが楽しいからってデザインに凝るのをよくないと思ってる。
652:デフォルトの名無しさん
19/03/03 18:49:08.31 eREWiz410.net
>>632
まぁ例えば
プログラミングレベルが１０で
デザインレベルが５とかの人材の場合
どちらかと言えばデザインよりコーディングやって貰った方が効率いいってはあるんじゃない？
653:デフォルトの名無しさん
19/03/03 18:51:32.92 8CruhG400.net
>>631
それは否定しないがその人材を安定して確保しようとするといくら払えばいいの？という話にならないか？
654:デフォルトの名無しさん
19/03/03 18:54:01.18 eREWiz410.net
>>636
確保するんじゃなくて育てようって気がないのかね
これだから衰退するんだよ
655:デフォルトの名無しさん
19/03/03 18:54:24.45 QTOYGzGrr.net
>>634
デザイン凝るっていう判断はどこでしてるの？
仕様として必要ならやるよな
それともそのフルスタックエンジニアの独断でやってるのか、デザインわかってない奴が決めてるのかにもよる
656:デフォルトの名無しさん
19/03/03 18:58:26.46 8CruhG400.net
>>637
育てること考えると余計に分業したくなるだろ。2人を両方フルスタックにするのと、それぞれ専門持たせて育てるのどっちが現実的なのか考えてくれよ。
なんか理想論でマウントとられても困る。
657:デフォルトの名無しさん
19/03/03 18:59:34.47 cmngH9hR0.net
人材云々の話は経営者が判断すべき問題であって
勉強しなくていいとかそういう問題じゃないでしょ
658:デフォルトの名無しさん
19/03/03 19:01:59.76 eREWiz410.net
>>592みたいに1人が抜けたらヤバイっていう状況はホントにヤバイから
できるうちに育てた方がいいよホント
659:デフォルトの名無しさん
19/03/03 19:03:05.35 8CruhG400.net
>>638
まあそれはそうだ。
仕様がガッチリ決まってるようなデザイン作成ってのを見たことないから故の思い込みかもしれんが、UIとなると必要以上に時間がかかってしまうという思い込みが自分のなかにあるのは確かだ。
660:デフォルトの名無しさん
19/03/03 19:04:53.82 8CruhG400.net
>>640
勉強すべきかどうかという話だったの？だとしたら俺も勉強すべきだと思うよ。
661:デフォルトの名無しさん
19/03/03 19:08:50.10 8CruhG400.net
ちなみに俺は>>630で体制によりけりと書いてるように、少数のとこならエンジニアのスキルや素質に合わせればいいと思ってる。少数でイキのいいベンチャーとかなら有能が多数派ってこともあるだろうしね。
おそらく仕事量に対する有能人材の割合が重要なんだと思う。
662:デフォルトの名無しさん
19/03/03 19:17:40.56 26syIpped.net
規模が大きくて大人数じゃないと作れませんねぇ、じゃあどこで分担しましょうか？
って考えればいい。
663:デフォルトの名無しさん
19/03/03 19:35:22.77 PCCGC897a.net
業務系だとそういう場合はレイヤーじゃなくてコンテキストで分けるのが主流だね
レイヤーで分ける企業はかつて見たことない
664:デフォルトの名無しさん
19/03/03 20:04:17.44 WgQds1l30.net
規模が大きくて大人数じゃないと作れませんねぇ、じゃあどこで分担しましょうか？
え？分担したら効率が悪いだろって？
じゃあ、2人で2ヶ月の仕事を、あなた1人で2ヶ月でやってくださいね。
効率がいいんだから2倍ぐらいやれるでしょ？
でも給料は変わりませんから。
665:デフォルトの名無しさん
19/03/03 20:12:49.02 QTOYGzGrr.net
>>647
そうなる
エンジニアスキルはできない奴に比べて何倍も差あるからな
だから給料もそれに比例する
666:デフォルトの名無しさん
19/03/03 20:33:30.24 WgQds1l30.net
> だから給料もそれに比例する
夢見るのやめとけｗ
2人で2ヶ月も、1人で2ヶ月も
働く期間が2ヶ月なら給料は同じだ
667:デフォルトの名無しさん
19/03/03 21:11:25.76 BbxzBxVK0.net
スケールしない作業だと言われればそうかもなとしか言えんな。
できるなら起業しとる。
668:デフォルトの名無しさん
19/03/03 21:42:00.62 QNZEu7Q40.net
Rails と、Node.js + Express は、全く同じ。
Bundler と、npm, yarn も、全く同じ。
ERB と、EJS も、全く同じ
Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門、中村 勇希、2018/5/29
Node.js超入門、掌田津耶乃、2017
Junichi Ito (伊藤淳一)
Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～
URLﾘﾝｸ(youtu.be)
669:デフォルトの名無しさん
19/03/03 22:00:40.86 YuQgiS/h0.net
>>651
死ね
670:デフォルトの名無しさん
19/03/03 22:01:29.06 hdxDgHRsa.net
Heroku使うメリットってなに？
671:デフォルトの名無しさん
19/03/03 22:24:37.66 QTOYGzGrr.net
>>649
フロントデザイナーとフロントエンジニアがいても完成しない（デザインをコーディングで実現できないから）
しかしフロントフルスタックエンジニアがいれば何倍も早く完成する
何倍も早く完成するなら給料高くて当たり前
キミはどんなクソな会社で奴隷やってんの？
そもそもキミはフロントフルスタックエンジニアなのか？
672:デフォルトの名無しさん
19/03/03 22:34:10.60 hdxDgHRsa.net
寧ろフルスタックエンジニアって中小にこそ居るからな
待遇良くないってのもまぁあると思う
673:デフォルトの名無しさん
19/03/03 22:54:37.37 QNZEu7Q40.net
Heroku を使うのは、圧倒的にわかりやすいからだろう
それで、プログラマーの人件費が節約できる
674:デフォルトの名無しさん
19/03/03 23:07:55.84 sIAjtg1ud.net
>>654
逆にどういった組織を想定しているのか聞きたい。
1人にやらせた方が効率がいいのは当たり前だが、高給払えるような利益あげてる企業で、そんな体制で運営できるような小さなプロダクト扱ってる会社ってそんなにあるのか？
675:デフォルトの名無しさん
19/03/03 23:09:14.73 eREWiz410.net
慣れてしまえばLinuxでの鯖構築なんて難しい事なんもないけどな
特定の会社のインフラに依存するのってなんか怖いよね
676:デフォルトの名無しさん
19/03/03 23:14:25.71 GjzBYSLPd.net
>>658
動かすまではともかく、商用運用するとなると結構ハードルあがるから需要はあるんじゃない？
安定稼働、セキュリティ、費用計算、etc.
677:デフォルトの名無しさん
19/03/03 23:56:16.49 dWHbj95s0.net
>>629
デザイナのコーディングは昔からの課題だよな。
ただcssやdomが打てるなら、vueだとかなりスッキリ分業出来ると思うけどな。社内か社外かの方が問題大きい。
678:デフォルトの名無しさん
19/03/04 01:06:09.78 hdL+Fhbir.net
>>657
フロントフルスタックがほとんどいないから仕方なくフロントデザイナーとフロントエンジニアを雇っているわけじゃん？
てことは当たり前だけど2人分の給料払ってるのは事実だよな
それが小さな会社だろうが大きな会社だろうが2人分払ってる
しかしそこにフルスタックが入って2人より速く作れて品質高いなら、2倍払っても納期早まるんだから安くなるじゃん
そいつは高給かもしれないがむしろ人件費安くなるんだけど？
679:デフォルトの名無しさん
19/03/04 01:26:05.61 GKEA/LnB0.net
>>661
なんか勘違いしてないか？
・早く作れるとしても2倍の速度にはならない。
・なぜなら仕事量は2倍になるから
・でも給料が2倍になることはない
・儲けは会社のもの
680:デフォルトの名無しさん
19/03/04 01:28:05.52 GKEA/LnB0.net
・早く作れるとしても2倍の速度にはならない。
・なぜなら二人の仕事を一人でやるので仕事量は2倍になるから
・でも給料が2倍になることはない
・仕事量が増えても納期は伸びない
・儲けは会社のもの
681:デフォルトの名無しさん
19/03/04 03:24:32.08 hdL+Fhbir.net
>>662
お前が勘違いしてるだろ
・分業の場合
フロントデザイナーがデザインする
↓
フロントエンジニアがコーディングする
↓
デザインセンスないからコーディングできない
↓
納期遅れる
・フルスタック1人の場合
フルスタックがコーディングとデザイン両方を同時にやる
682:デフォルトの名無しさん
19/03/04 06:33:24.10 xKwIvMQM0.net
>>626
＞フロント勉強してできるようになったのならデザインも勉強すりゃいい
これなんかいい勉強法ってある？
683:デフォルトの名無しさん
19/03/04 07:36:10.51 0mKT+E5t0.net
2倍くらいはなるだろ上手く行かなきゃ進捗出ない事なんてザラにあるだろうし
>>665
イラストレーターとかが1からUIデザインするサイトとかじゃない限りはCSSフレームワーク使えりゃいいんじゃない？
684:デフォルトの名無しさん
19/03/04 09:49:24.20 hdL+Fhbir.net
>>665
自分で言っといてすまんけど、正直デザインセンスっていくら勉強してもなかなか向上しないんだよね
ベースとなるデザインの勉強はそのへんの学校に通いつつ、普段はひたすらUI/UXの情報みたり（海外系サイトおすすめ）して
構造や配色などの知見を増やし、あとはフロントデザイナーに金払って教えてもらう
685:デフォルトの名無しさん
19/03/04 11:00:17.97 fPP1emsu0.net
>>664
それただのウォーターフォールやん
分業は同時進行するんだよ
686:デフォルトの名無しさん
19/03/04 11:02:34.38 fPP1emsu0.net
・フルスタック1人の場合
フルスタックがデザインする（その間コーディングできない）
↓
フルスタックがコーディングする（その間デザインできない）
↓
一人でやるから同時に作業できなくて時間がかかる
↓
納期遅れる
・分業の場合
フロントデザイナーとフロントエンジニアが両方を同時に作業を始める
687:デフォルトの名無しさん
19/03/04 12:14:16.79 F1HORdDoa.net
でも分業するとインターフェースの協議に時間がかかるからそれがなかなかペイできないんだよね
688:デフォルトの名無しさん
19/03/04 12:30:51.83 gIkfSPyQ0.net
>>668
横から質問なんだけど
デザインが決まってない状態で
フロントエンジニア（プレゼンテーションロジック担当？）って何の作業するの？
689:デフォルトの名無しさん
19/03/04 12:35:52.25 yQsTNF7Xa.net
>>671
詳細なデザインがないと出来ないこと以外の全部
690:デフォルトの名無しさん
19/03/04 13:01:07.29 enTqHBl5M.net
ハハハ
691:デフォルトの名無しさん
19/03/04 14:17:57.52 fPP1emsu0.net
>>671
あのさぁ、かっこいい見た目なんか作らないでいいから
動きが必要なところをさっさと作るとかあるでしょ
692:デフォルトの名無しさん
19/03/04 14:49:51.44 vM9NvnRR0.net
見た目のない動きか
文字列かな
693:デフォルトの名無しさん
19/03/04 15:18:45.40 fPP1emsu0.net
かっこいい見た目といったのに
全く何も表示がないものと解釈するのか
馬鹿なのかな
694:デフォルトの名無しさん
19/03/04 15:36:50.66 ldzpTYWZ0.net
僕のおちんちんも激しく動きます
695:デフォルトの名無しさん
19/03/04 16:46:58.11 gIkfSPyQ0.net
>>672 >>674
例えばこんな感じを想定して作り始めて
URLﾘﾝｸ(i.imgur.com)
デザイナからこれが来たら割と手戻ったりしない？
URLﾘﾝｸ(i.imgur.com)
他の例
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(i.imgur.com)
696:デフォルトの名無しさん
19/03/04 17:04:13.55 yQsTNF7Xa.net
>>678
そういうのは手戻りではなく設計不足というのですよ
697:デフォルトの名無しさん
19/03/04 17:14:40.72 gIkfSPyQ0.net
>>679
設計の段階でデザインがほぼ固まってから実装ということなら
デザイン→実装の直列作業で
同時進行じゃない気がするんだけど・・・
698:デフォルトの名無しさん
19/03/04 19:04:00.56 kaSUrRDqa.net
デザインとロジックの分業は分かるが
結局フロントロジックとバックロジックの分業なんてしたって無駄なんだよ
699:デフォルトの名無しさん
19/03/04 20:44:55.78 hdL+Fhbir.net
>>678
おれこのくらい他人のデザインも不要だしモックなくても頭の中でデザインできるからすぐにコーディングできるわ
なんなら数パターンのデザインを一つのソースで作ることもできる
さっきから言ってることだが、フルスタックはデザインもコーディングも「同時進行」で作業するんだよ
デザインしてからコーディングをやるんじゃないから
700:デフォルトの名無しさん
19/03/04 21:38:41.81 0mKT+E5t0.net
SPAじゃなくPWAってこれから流行るの？
701:デフォルトの名無しさん
19/03/04 22:18:18.82 fPP1emsu0.net
>>678
手戻りが出ないように最初のざっくり方針を決めとこうな
702:デフォルトの名無しさん
19/03/04 22:19:37.95 fPP1emsu0.net
>>682
> さっきから言ってることだが、フルスタックはデザインもコーディングも「同時進行」で作業するんだよ
同時進行で作業するが、一人でやるから時間が2倍かかるって話なんだが？
703:デフォルトの名無しさん
19/03/04 22:20:44.65 fPP1emsu0.net
どうしてもデザインが完成しないとコーディングが出来ないって言うなら、
相手にデザインさせている間、自分は違う仕事をやればいいだけだし
704:デフォルトの名無しさん
19/03/04 22:42:20.42 hdL+Fhbir.net
>>685
何度も言うのめんどくせ
まあわからん奴にいくら言ってもわからんからどうでもいいや
705:デフォルトの名無しさん
19/03/04 22:51:08.65 0mKT+E5t0.net
人数増えた分だけ作業が速くなると錯覚してる大企業体質に何言っても無駄だと思うよ
706:デフォルトの名無しさん
19/03/04 23:01:25.29 VXdcZokm0.net
なんで極論同士で争うんだ？
開発規模(複数プロジェクトの合計の規模も含む)が大きくなって一人じゃできないから分業が発生するってだけだろ？
みんな一人でやった方が効率がいいとわかってるし、一人じゃ限界があるってわかってるんだよな？
707:デフォルトの名無しさん
19/03/04 23:05:47.91 Gt0dR1DD0.net
人数が増えるほど、すり合わせコストが掛かるから、単純な掛け算にならない。
意思疎通・教育コストが掛かる
仕事量 = 単位仕事量 * 人数 * (1 - すり合わせコスト)
1 - すり合わせコストが、人数が増えると、
0.8 から、0.5 まで、ドンドン下がっていく
工場で言う、段取りコスト・間接作業。
直接作業をするのに必要な、作業
だから、プログラマーのように難しい仕事は、単純に人数を増やしていけな�
708:｢。 人数効果があるのは、すごく簡単な単純作業の場合だけ こういうのは、中小企業診断士・MBA のテキストに書いてある
709:デフォルトの名無しさん
19/03/04 23:06:55.42 VXdcZokm0.net
重要なのはいかに効率よく分業するかだろ？
710:690
19/03/04 23:11:34.47 Gt0dR1DD0.net
でも複数人数の良い点も多い
視野が広くなる。
一人じゃ気付かない事に、気付く
教育にも良い。
ペアプログラミングは、非常に効果的
一見、損に思うけど、
教育効果により品質が向上して、後で十分に取り戻せる
711:デフォルトの名無しさん
19/03/04 23:24:38.44 56/JbqfwM.net
Web制作板行けやカス
712:デフォルトの名無しさん
19/03/04 23:32:05.12 /Cs1xWTia.net
>>692
辞めなければな！
713:デフォルトの名無しさん
19/03/05 05:46:36.86 437fdADv0.net
>>694
そういう発想だから辞められるんだよ。
714:デフォルトの名無しさん
19/03/05 07:55:43.10 N2s6BYvr0.net
>>684
「デザイン」の定義が食い違ってるのかもね
それはデザインを先に固めるって言うんだ
同時進行してない
デザインは設計だと考えてるからこそ>>668に疑問を持ったわけ
こういったこと
URLﾘﾝｸ(uxdesign.cc)
715:デフォルトの名無しさん
19/03/05 11:20:44.07 YFVILFEb0.net
>>696
ざっくり方針を決めただけなので
デザインは変わることがありますが
デザインを先に固めています。
と言いたいの？
716:デフォルトの名無しさん
19/03/05 11:43:17.86 DIrFqE8lM.net
「ざっくり方針決める」だけで給料もらえて納期遅れを下流のせいにできるなんて……
……なんていい仕事なんだ！俺がやりたい！
717:デフォルトの名無しさん
19/03/05 12:25:43.27 IGhfqt8ja.net
ウェブ系は楽だよなぁほんと
モダンで便利なエコシステム
ハイスペックな開発機
クラウドへのアクセスもサクサク
厳しい社内統制もなくゆるい現場
シンプルで簡単なドメイン
10年物のレガシーなんて無い
718:デフォルトの名無しさん
19/03/05 12:41:39
719:.55 ID:4lHVjw0ya.net
720:デフォルトの名無しさん
19/03/05 14:48:04.00 YFVILFEb0.net
>>698
わざと？必死だね？
ざっくり方針を決めるのは、デザイナーとプログラマーで
並行して作業を進められるようにするためだよ。
でないと一人で作業することになって、2倍の時間がかかる
721:デフォルトの名無しさん
19/03/05 16:44:18.98 nrrzzgEL0.net
>>699
フロントはどんどん楽になるよね。やってて楽しいのがweb系。ただサーバサイドやDB、ネットワークはレガシーも残ってるよ。
722:デフォルトの名無しさん
19/03/05 20:46:44.51 nwidEdp+0.net
>>701
その2倍ってのがおかしいって
723:デフォルトの名無しさん
19/03/05 23:25:03.26 8a3k8XPA0.net
たしかサーバーサイドJavaでJSPのテンプレートエンジン廃れたよね？
htmlに<if>とか<for>とか変なタグを入れるなって流れになったはずだけど
最近はJavaScriptで同じようなことしてるよなあ
724:デフォルトの名無しさん
19/03/05 23:42:35.99 exrcDGV20.net
それはJavaが廃れたんであって、Javaの世界じゃあ普通にやってるよ。
725:デフォルトの名無しさん
19/03/06 01:11:22.98 C3QpaLdU0.net
>>704
JSPはJAVAソースコードを出力する為のテンプレートであって、HTMLそのものでは無いよ。
JSP→解析→JAVAソースコード→コンパイル→classファイル
このclassファイルが、外部からのリクエストに対してHTMLを出力して、レスポンスで返してるんや。
んで、出力されたHTMLには<%if( 条件式 ){%>なんて文字列も出てこないよ。
そもそもこの<%%>タグはHTMLの為じゃなく、JAVAソースコード生成の為に使われるから出てくるわけ無い。
726:デフォルトの名無しさん
19/03/06 01:43:49.00 Uli2bEJM0.net
Spring Boot のテンプレートエンジンは、Thymeleaf とかだろ
727:デフォルトの名無しさん
19/03/06 08:55:10.29 lkGca0kGd.net
そういう意味ならJSFがある
728:デフォルトの名無しさん
19/03/06 22:12:48.11 oR6mPeK70.net
スレ違いかもしれないけど、たまには気分転換にvueとかreactとかの話題はどうかな？
729:デフォルトの名無しさん
19/03/06 23:50:49.60 1pbO3u+T0.net
Reactの仮想ＤＯＭとかいうのが未だに分からん
HTMLをオブジェクトの木構造にしないで文字列のままで握ってるってことでＯＫ？
730:デフォルトの名無しさん
19/03/07 02:22:49.29 /M0SxS0j0.net
>>710
違う。
メモリ上に持つ実DOMの劣化レプリカ。
そして利用者は実DOMはイジらず、劣化レプリカの方をイジる。
angular react vueなどの仮想dom系のライブラリが劣化レプリカの変化から、最小の実dom操作を計算して適用。
昔は人がやってた仕事がライブラリに委譲された格好。
731:デフォルトの名無しさん
19/03/07 02:44:23.97 FkBKY4Sxa.net
HTML のタグを javascript のオブジェクトで単純に表現しただけのもの。react であれば、createElement 関数で生成されるオブジェクトのことになる。で、そのインスタンスの変化に合わせて実際の HTML に反映してくれる。
732:デフォルトの名無しさん
19/03/07 03:07:16.07 7lOwuU310.net
>>711
HTMLElementじゃないけど似たようなのをツリーで持ってるのか
HTMLElement.clone(true)でページ全体のクローンを作って、
それをＤＯＭ操作してからdocument.documentElementに差し替えるのかと思ってた
単純にFragment使ってＤＯＭ操作するより速いのか気になる
733:デフォルトの名無しさん
19/03/07 07:22:52.72 rioBJ/QG0.net
やってることは実DOMの変更をバッファして
変更タイミングをいい感じでやってくれてるってことじゃないの？
734:デフォルトの名無しさん
19/03/07 08:43:40.11 oVD+pZgg0.net
>>713
> 単純にFragment使ってＤＯＭ操作するより速いのか気になる
速くならない
× 仮想DOM�
735:ﾍ速い ○ 仮想DOMは遅くならないように頑張っている 速い速い詐欺のどこが詐欺かって言うと 何より速いかを書いてない所 仮想DOMの最初の発想は、実DOMと同じような内容をメモリ内に保持しておいて、 仮想DOMから実DOMをすべて生成しよう！という発想 もともとはゲームから来ている発想。 ゲームは1秒間に60回ぐらいメモリ内容を元に画面全体を書き換えている。 変更があるたびにDOM全体を書き換える。 当然DOMでそんなことやったら遅いって思うよな？ そこで差分を計算して変更があった所だけ書き換える つまり ○ 仮想DOMは画面全体を書き換える発想だが、差分だけを書き換えるから、画面全体を書き換えるより速い と言ってるだけ そもそも実DOMを操作しているときは、必要最小限のものしか書き換えないので 仮想DOMが差分（必要なところ）だけ書き換えるといっても、それ普通ですよね？という話でしか無い。 むしろ仮想DOMは実DOM操作よりメモリ使用量は増えるし、差分計算の分遅くなってる。
736:デフォルトの名無しさん
19/03/07 08:54:40.49 NrdLaj5lM.net
実DOM操作自体の速度は当然変わらない。
人が書くか仮想DOMライブラリがやるかの違いだけ。
ライブラリは実DOM操作の回数を減らすため仮想DOM持って計算頑張ってるだけ。
「DOM操作が速くなる」とか言ってるのは全部嘘。
737:デフォルトの名無しさん
19/03/07 09:00:44.74 oVD+pZgg0.net
> 人が書くか仮想DOMライブラリがやるかの違いだけ
人は「全体の中から差分を計算してそこだけ書き換える」
なんてことはやってないですよ。
人はある処理の中でDOMのどの部分を書き換えたいかを
知っているので、必要最小限のDOM操作しか変更しない
（クソプログラマなら全部消して作り直すとかいう無駄してるかもしれんが）
その全部消して作り直すっていうのをやろうという発想が仮想DOMで
遅くならないように差分を計算して、必要最小限のものだけ変えよう。というふうに
自分で遅くしておいて、自分で改善した（速くした）って言ってるだけなんです
738:デフォルトの名無しさん
19/03/07 09:10:38.72 FKXLE38I0.net
速度に関しては実dom直接操作よりは遅い。その辺はググればすぐ出るから見とくと良い。ただおかけでリアクティブという大きなメリットを手に入れた。ページ切り替えさえ差分更新してspaも出来る訳で、レスポンスは全体的に向上する。
739:デフォルトの名無しさん
19/03/07 09:19:40.62 NrdLaj5lM.net
人はある処理の中でDOMのどの部分を書き換えたいかを
知っている（担当の頭の中にある）ので、必要最小限のDOM操作しか変更しない。
人の頭に依存しないように機械的に
最小限のDOM操作を特定・適用までやろうとしたのが仮想DOM系ライブラリ。
人が脳のリソース使ってやるか仮想DOMライブラリが自動でやるかの違いだけ。
740:デフォルトの名無しさん
19/03/07 09:27:16.66 oVD+pZgg0.net
ここで忘れてはいけないのは
> ただおかけでリアクティブという大きなメリットを手に入れた。ページ切り替えさえ差分更新してspaも出来る訳で、レスポンスは全体的に向上する。
リアクティブは本当に必要なのか？
SPAは本当に必要なのか？
ということ
世の中の多くのソフトウェアはリアクティブなんか使っていない。
それでまともに動く製品を作れている。
SPAもそうだ。ユーザーにとってはシングルページだろうが、マルチページだろうが関係ない。
シングルページだとページごとに分担して開発するのが難しくなる。
マルチページなら、ページごとに別の人が担当して開発するのが楽である。
741:デフォルトの名無しさん
19/03/07 09:52:31.84 FKXLE38I0.net
リアクティブのメリットは複雑な入力フォームが分かりやすい。pc購入する際のカスタマイズ画面なんかが良い例。以前と比べて工期の短縮できて保守が凄く楽。部分的な導入も出来るからvueで試せば分かる。フォーム周りは圧倒的にリアクティブが良い。
742:デフォルトの名無しさん
19/03/07 09:57:57.50 oVD+pZgg0.net
>>721
リアクティブがやりやすいんじゃなくて、
以前のやり方がだめだっただけでは？
743:デフォルトの名無しさん
19/03/07 10:01:54.73 oVD+pZgg0.net
>>721
その例ってこんな程度でいいの？
URLﾘﾝｸ(www.dell.com)
744:artItemId= https://www.dospara.co.jp/5goods_pc/pc_bto.php?h=d&f=d&m=pc&tg=13&mc=8374&sn=3619&vn=1&lf=0
745:デフォルトの名無しさん
19/03/07 10:43:49.16 FKXLE38I0.net
>>722
ある入力に対して別の複数の要素が動的に変更される場合、リアクティブだとcomputedプロパティで自動的にuiに反映されるよう設定するのがとても楽。これjqueryだと面倒だしミスも増える。
>>723
この程度って。。結構大変だよ。条件も頻繁に変わるだろうし。
746:デフォルトの名無しさん
19/03/07 10:54:23.39 oVD+pZgg0.net
>>724
やっぱり使い方がわかってないだけだな
ある入力に複数の要素が動的に変わるならば、
その要素の親に、クラスをつけて、
あとはCSSで、それ以下の要素の表示、非表示状態を切り替えるだけだよ
jQueryだと最低3行。あとはCSSでおしまい。
747:デフォルトの名無しさん
19/03/07 11:05:05.80 oVD+pZgg0.net
前から思ってるんだけど（自称）プログラマって
HTML/CSSは嫌いです。出来ません。って人多いよね。
それを毛嫌いしてるというか、CSSなんてデザイナが使うもんだろ
馬鹿にしている感じで、俺出来ないから（笑）みたいな感じで言う。
恥ずかしいと思ってないんだろう。
多くのDOM要素はCSSを使って単に見えなくしたり表示したりすればいいだけなんだが
（プログラマとしての技術力不足で）CSSを使えないから
JavaScriptでいちいち作り出したり削除するしか出来ないんだよな
748:デフォルトの名無しさん
19/03/07 16:04:46.19 uSXw2eVGM.net
>>720
要件を勝手に決めつけないでよ
客からユーザーから代弁して喋るなら何だって言いたい放題じゃん
749:デフォルトの名無しさん
19/03/07 17:22:06.09 oVD+pZgg0.net
>>727
だったら要件を決めつけてメリットだって言わないでくれ
要件によってはデメリットなんでしょ？
750:デフォルトの名無しさん
19/03/07 18:14:20.13 mVKClUMzd.net
簡単にいい感じのページが作れるのはメリットの一つだと思うけどな。
例えばpythonは成果物に関してはCに対するメリットはないけど簡単に作れるから人気なわけで。
751:デフォルトの名無しさん
19/03/07 21:20:18.65 bV0vVOYFM.net
>>728
いやだからさ
「要件次第」で済む話を何度掘り返すのよ
スレタイ見てスレチだと思わないの？
752:デフォルトの名無しさん
19/03/07 22:37:46.71 cPei42ec0.net
>人はある処理の中でDOMのどの部分を書き換えたいかを
>知っているので、必要最小限のDOM操作しか変更しない
>（クソプログラマなら全部消して作り直すとかいう無駄してるかもしれんが）
クソプログラマは全部消して作り直す
賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
753:デフォルトの名無しさん
19/03/07 22:42:13.25 N/E4f3Caa.net
>>725
管理対象の状態数が増えるのがやだ
状態はできるだけ純粋で論理的な形式で管理したい
という要求がスッポリ抜けてるね
754:デフォルトの名無しさん
19/03/07 22:55:10.59 Tta1cO7U0.net
GoogleもこれからPWAで攻めてきそうだけどね
755:デフォルトの名無しさん
19/03/07 22:59:25.97 Y4GuSkwR0.net
>>732
CSSは宣言型なので、
管理対象の状態数が減るんですよ
756:デフォルトの名無しさん
19/03/07 23:00:35.30 Y4GuSkwR0.net
>>731
> 賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
もっと賢いプログラマは、必要なことしかしないんだよ。
Aを変えたいなら、Aだけを変えましょう。ってね
757:デフォルトの名無しさん
19/03/07 23:01:50.74 N/E4f3Caa.net
>>734
domの状態数は多すぎるよ
758:デフォルトの名無しさん
19/03/07 23:04:15.56 N/E4f3Caa.net
>>735
見えるか見えないかみたいな、ただの論理値を管理したいだけなのに
それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
759:デフォルトの名無しさん
19/03/07 23:09:46.27 oTfLqBj1a.net
まあ本当に賢いプログラマ達はフロントエンドなんてやらないんですけどね
760:デフォルトの名無しさん
19/03/07 23:11:14.61 N/E4f3Caa.net
>>738
それは同意
761:デフォルトの名無しさん
19/03/07 23:12:46.45 Y4GuSkwR0.net
AしたらBを変えたいんですが？
Reactを使うと・・・・
ではBを変数に結びつけましょう。
そういうコードを書き換えます。
そうすれば変数を変えればBも変わります。
おっと待ってください。
そのために変数をSTOREに入れなければいけません。
STOREからとってきて、STOREを更新・・・いえいえいけません
新しくオブジェクトを作るのです。
そのオブジェクトを作るために～
オブジェクトを変更する関数を用意するのです！
その関数を作るための、はい、メッセージが必要ですね。
えぇ、ですからね、AしたらAction Creatorを使ってactionを生成して
Storeに対してactinonをDispatchして、ReducerがDispatchに反応して
actionタイプから今の状態から新しい状態を変更すれば、
ほら簡単にBが変わるんです！
え？普通にAイベントのハンドラでBを変えればいいじゃないかって？
ムキー！
762:デフォルトの名無しさん
19/03/07 23:14:47.91 Y4GuSkwR0.net
>>737
> それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
だから、CSSを使うといいですね。
JavaScirptからは親となる要素にクラスを設定するだけなんですよ。
簡単。DOMがどういう構造になっているかなんて関係ない。
あとはデザインを作る人が、その状態でどう表示したいかを作るだけなんです。
763:デフォルトの名無しさん
19/03/07 23:23:16.99 jEbiMY7gr.net
fluxの概念を取り入れたらものすごく簡単に状態管理ができる！
って本にもキータにもみんな書いてるんだけど？
764:デフォルトの名無しさん
19/03/07 23:23:24.15 N/E4f3Caa.net
>>741
私が管理したいのは見えるか見えないかという2つの純粋な状態なんです
ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
それはまるで物体から投影された影に干渉して、もとの物体を操ろうとするような愚かなことです
765:デフォルトの名無しさん
19/03/07 23:58:03.68 tvHZX0HA0.net
どっちも極端じゃないか？
バインディングならjQueryよりはVueやReact使った方がいいと思うけど、
表示非表示やアニメーションならcss側でやった方がいいと思う。
766:デフォルトの名無しさん
19/03/08 00:38:11.11 kMybevyH0.net
仮想ＤＯＭとJQueryの世代の重要な違いとして
セレクタやDOM操作を一切したくないという発想があるのではないだろうか
JSXでHTMLをそのまま書くのもセレクタを使いたくないからだろうし
767:デフォルトの名無しさん
19/03/08 00:47:24.38 N66/0TP00.net
実DOM では、IO 操作が遅い
仮想DOMでは、JavaScript内の操作だけだから、速い
768:デフォルトの名無しさん
19/03/08 01:03:32.93 kMybevyH0.net
それはHTMLFragmentがあれば事足りる話っしょ
769:デフォルトの名無しさん
19/03/08 10:15:11.65 jbQifWXg0.net
>>743
> ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
だからセレクタのクラスはブーリアンなんだよ
ある要素に、flagクラスというブーリアン値が
立っているか、立っていないか
770:デフォルトの名無しさん
19/03/08 10:16:08.10 jbQifWXg0.net
>>746
仮想DOMを実DOMに反映させる所で
大幅に遅くなるんだよ
771:デフォルトの名無しさん
19/03/08 11:13:41.54 /TYC9ex30.net
>>725
リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。ミスしようがない。うーん、なんでjQueryやcssにそこまでこだわるかね。みんな散々苦労してきた末のスマートな解決方法が仮想domでありリアクティブなんだけどな。一度試してみたら？食わず嫌いしないでさ。
772:デフォルトの名無しさん
19/03/08 11:17:51.39 jbQifWXg0.net
> リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。
終わらねーよｗ 変数みてデザインを変えるコードを書かないとだめだろ
773:デフォルトの名無しさん
19/03/08 11:28:53.74 /TYC9ex30.net
>>751
そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。
Falseになった結果どうなるかはuiの管轄でcssやdomとは本来無関係なんだよ。jQueryはそこが分離できない。
774:デフォルトの名無しさん
19/03/08 11:35:19.90 jbQifWXg0.net
> そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。
別れてないよ。JavaScriptファイルを編集してもらわないといけない
CSSだと「プログラマの俺は、この要素のクラスを設定するだけです。
デザイナーさん、あとはかっこいいデザインを作ってください！」といえる
デザイナーはJavaScriptファイルを一切触らずに
デザインを作り込むことができる。
775:デフォルトの名無しさん
19/03/08 11:40:36.85 jbQifWXg0.net
jQueryで書く場合はこんな感じだね。
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
コンポーネントの中にある名前がswitchのチェックボックスがONになれば
そのコンポーネントがactiveになって、
そのコンポーネント以下のデザインがactive用に変わる
DOMの構成がどうなっているか一切気にする必要がないんだよ。
776:デフォルトの名無しさん
19/03/08 13:46:44.51 /TYC9ex30.net
>>753
デザイナはスクリプトをいじる必要全くない。例えば
<div v-if=“isShow”></div>
というテンプレに対してスクリプトでは、
isShow=false
とするだけ。これだけでリアクティブになる。どっちがミスが少ないか分かるだろう？
777:デフォルトの名無しさん
19/03/08 13:50:05.53 /TYC9ex30.net
すまん途切れた。どっちがミスが少ないか、分業しやすいか分かると思うんだが、どうかね？
778:デフォルトの名無しさん
19/03/08 13:55:12.54 jbQifWXg0.net
> <div v-if=“isShow”></div>
すいませーん、デザイナーさーん。
今度から、v-ifってのを覚えてくださいー。
いままでCSSで表示切り替えしてたでしょー？
それ、今度からやめてくださいねー。
リ・ア・ク・ト。やり方覚えてくださいね。
やり方変えたんですよ。こっちのやり方にね。
え？他にも色々ありますよ。勉強してくださいー。
779:デフォルトの名無しさん
19/03/08 13:57:57.43 kMybevyH0.net
Javascript(Data/Model) - Javascript(UI/DOM) - HTML/CSS
デザイナーが真ん中の層を如何にやるのかという話だろう
HTML内にv-bindとか属性で埋め込むのもJQueryを書かせるのも同じこと
仮想DOMのフレームワークによって真ん中が無くなったとは言えないだろうし
780:デフォルトの名無しさん
19/03/08 14:02:22.95 jbQifWXg0.net
jQueryはプログラマが使って、
イベントに反応してクラスを変更するだけなんだよ。
あとはDOMの構造とかCSSとか完全にデザイナーに
任せることができる。
デザイナーはデザイナーの流儀でやれるし、
JavaScriptフレームワークの流儀を押し付けることもない
781:デフォルトの名無しさん
19/03/08 14:05:09.01 jbQifWXg0.net
>>758
HTMLのタグはDOMですか？
CSSで指定する色や配置はUIですか？
782:デフォルトの名無しさん
19/03/08 14:11:29.15 /TYC9ex30.net
>>758
いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
>>757
うむ、リアクティブの方が良い事は理解できたようだね。あとは君がデザイナや上司を説得するんだよ。そこは別問題。
783:デフォルトの名無しさん
19/03/08 14:12:44.22 kMybevyH0.net
jQueryはすべてデザイナーがやるべき
ボタンをクリックしたらどのタグの色が変わるのか、それを知っているのはデザイナーだけで良い
784:デフォルトの名無しさん
19/03/08 14:20:09.62 jbQifWXg0.net
>>761
> いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
jQueryの方が少ないですね。
嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。
[JavaScript]
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[HTML]
<div class="my-component">
<input type="checkbox" name="switch">switch
</div>
[CSS]
.my-component.active {
color: red;
}
jQuery版の実際に動くコードですよ。
URLﾘﾝｸ(jsfiddle.net)
785:デフォルトの名無しさん
19/03/08 14:20:12.96 mjBCJk3zr.net
ほらほらだからこうなるって何度も言っただろ
フロントはフルスタックじゃないとこの程度ですら揉めるんだよ
もう一度言うぞ
デザインできないフロントエンジニアはクソ
エンジニアリングできないフロントデザイナーはクソ
お前ら言い争ってる時点で無能だと自覚しろ
786:デフォルトの名無しさん
19/03/08 14:20:13.82 kMybevyH0.net
>>761
＞いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
そう、デザイン側のJSコードは減る。
787:それはたしかだし、データ側JSとの繋ぎかたもはっきりとするね 欠点はHTML内に変なのをたくさん突っ込むのはいかがなものかってことかな
788:デフォルトの名無しさん
19/03/08 14:20:59.66 jbQifWXg0.net
>>762
> jQueryはすべてデザイナーがやるべき
JavaScriptのライブラリなのにデザイナーって意味不明ｗ
ボタンを押したら、ここのタグにこういうクラスがつきます。
って伝えるだけで、あとはそれぞれ作業ができる。
これが分業っていうんだよ。
789:デフォルトの名無しさん
19/03/08 14:28:57.63 B/j0V0h2a.net
>>757
どっちかというとその場合デザイナーに必要なのはv-showじゃなくてisShowだから
どういうモードの時変数の設定値を何にすべきかという一覧表があればいいだけじゃね？
てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
790:デフォルトの名無しさん
19/03/08 14:31:25.36 jbQifWXg0.net
> てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
フロントエンジニアがHTMLを書くから
分業できないってことなんですよ
791:デフォルトの名無しさん
19/03/08 14:33:21.35 mjBCJk3zr.net
>>757
いや、お前がデザイン覚えろよwwww
792:デフォルトの名無しさん
19/03/08 14:36:15.92 kMybevyH0.net
>>766
プログラマーはcssに書かれたclassの名前まで知らなくていい
その方がデザイナーが変更してもプログラマーが対応しなくて済むだろ？
793:デフォルトの名無しさん
19/03/08 14:54:21.66 B/j0V0h2a.net
デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
794:デフォルトの名無しさん
19/03/08 14:58:33.92 kvsQt7Fnr.net
UI・UXやインタラクションはエンジニアがやる分野
世界的にもその方向性になってきている
しかし世界中のエンジニアは無能だからまともにデザインできない
ごく簡単なUIすら理解できない
終わってんだろ
795:デフォルトの名無しさん
19/03/08 15:02:21.59 B/j0V0h2a.net
最低限のモダンっぽい見た目でいいならもうcssフレームワークのどれかでもいいだろ
796:デフォルトの名無しさん
19/03/08 15:07:22.44 jbQifWXg0.net
>>769
> いや、お前がデザイン覚えろよwwww
分業するんだよ
797:デフォルトの名無しさん
19/03/08 15:08:44.58 jbQifWXg0.net
>>770
分業っていうのは、完全に相手のことを知らないで
できるわけじゃないんだよ。
必要最小限、クラス名だけ。
jQuery使って、HTMLとCSSを正しく使うだけで
最小限の連絡で、それぞれが開発できるんだよ。
798:デフォルトの名無しさん
19/03/08 15:11:41.12 jbQifWXg0.net
>>771
> デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
コンポーネントには状態があるんだから、
少なくともその状態ごとのデザインは作ってもらわないと困る。
で、どうやるかというと、お互いで決めたルール
コンポーネントのここに、こういうクラスがつきますよー
というルールに基づいて
デザイナーは、HTMLのコンポーネントのタグに
classを変更するだけなんだよ。
最終的にはJavaScriptでクラスを変更することになるが
開発中は、手書きでクラスを変更するだけ
超簡単
799:デフォルトの名無しさん
19/03/08 15:13:04.69 kMybevyH0.net
>>772
いやUI・UXはデザイナーがやるべきだろ
そこで分離するからおかしなことになってる
800:デフォルトの名無しさん
19/03/08 15:15:10.57 B/j0V0h2a.net
デザイナーに求めるものなんて最低限なら画像データだっていい
html形式でブラウザで表示できるなら大助かり
期日が守れないヤツ多いから最低限期日までにどっちか出してくれればそれ以上に求める事なんてねぇんだが
801:デフォルトの名無しさん
19/03/08 16:28:21.11 /TYC9ex30.net
>>763
くわー面倒だなあ。でもコード見ないと分からんか。
[JavaScript]
isActive=false
[HTML]
<div class="my-component" class=“{active:isActive}”>
<input type="checkbox” v-model=“isActive”>switch
</div>
[css]
変更なし
どう？君のコードより随分少ないだろ。特にscriptなんて変数一個で終わり。まだ分からない事あるなら聞いてみなよ。でもスマホ手打ちなんで面倒なのはやめてw
802:デフォルトの名無しさん
19/03/08 16:38:37.56 /TYC9ex30.net
おっとミスった。スマホ手打ちなんですまんね。
[HTML]
<div class="my-component" class=“{active:isActive}”>
正しくは
<div class="my-component" :class=“{active:isActive}”>
:が抜けてたよ。
803:デフォルトの名無しさん
19/03/08 16:49:32.55 oNzvowiX0.net
>>779
あのさぁ、動かないコード書かないでくれないか？
scriptタグまでは書かなくていいよ。jQueryでも書いてないからさ、
でも動くコード書いてっていったよね？
せめてjsfiddleで動かしてから来てよ
804:デフォルトの名無しさん
19/03/08 16:54:12.44 oNzvowiX0.net
なんか動くって嘘つきそうだから
>>779では動かないという証拠として
>>779の内容を URLﾘﾝｸ(jsfiddle.net) に書いておいたから
ほら動かないでしょ？
これを動くように修正してね。
jQuery版の実際に動くコードですよ。
URLﾘﾝｸ(jsfiddle.net)
805:デフォルトの名無しさん
19/03/08 16:55:22.77 /TYC9ex30.net
>>781
それは贅沢だなw。こっちはスマホだと言うのに。あ、そうか君はvue知らないから動作チェックできないのか。どうせなら入れてみたら？簡単だよ。
あとコードは短くなった訳だが感想はどうかね？
806:デフォルトの名無しさん
19/03/08 16:55:35.67 oNzvowiX0.net
ほんとなんですぐばれる嘘を作るんだろう？
理解できないな
807:デフォルトの名無しさん
19/03/08 16:56:30.27 oNzvowiX0.net
>>783
だから動かないって
証拠>>782にかいたからさ。
お前がスマホとか知らんわ
スマホだから動かなくてもいいでしょ？
嘘だけど、いいでしょとか。恥ずかしくないの？
808:デフォルトの名無しさん
19/03/08 16:58:49.01 oNzvowiX0.net
あ、ReactじゃなくてVueか。
はい、こっちにVue読み込んだの置いたからさ、
こっちも動かない。はぁ。動かない（笑）
URLﾘﾝｸ(jsfiddle.net)
809:デフォルトの名無しさん
19/03/08 17:01:09.95 /TYC9ex30.net
>>786
書き方間違えてるぞ。vue初期からしなきゃ動かんよw
810:デフォルトの名無しさん
19/03/08 17:01:40.94 oNzvowiX0.net
あともう一つ教えといてあげるよ。
作ったのは.my-componentなんだ。コンポーネント。再利用可能。
つまりな、HTMLをこう書くだけで
同じ動きがするコンポーネント増やせるのよ。jQuery版は。
ここまでやってくれよ
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
</div>
URLﾘﾝｸ(jsfiddle.net)
811:デフォルトの名無しさん
19/03/08 17:02:12.51 oNzvowiX0.net
>>787
書き方間違えてるって。
動くコード書いてないお前の落ち度じゃん
812:デフォルトの名無しさん
19/03/08 17:07:56.77 oNzvowiX0.net
vueは面倒だなーって思いながら、
vue初期からしなきゃ動かんよw
と指摘された点を
今書いてるのかな？ｗ
813:デフォルトの名無しさん
19/03/08 17:08:24.75 /TYC9ex30.net
>>789
おいおい、vue知らないのに勝手にアップして動かないと言うのは無しだろ。知らないなら知らないと言えば教えてあげるのに。初期化方法までは面倒みれんぞ。jQueryだってそうだろ？
まあいいよ、後で動作する奴を上げてあげるよ。
814:デフォルトの名無しさん
19/03/08 17:12:52.61 oNzvowiX0.net
> jQueryだってそうだろ
何言ってるんだ？
jsfiddleにはまさにこれだけのコードしか書いてないんだが？
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
いやまさかそんなこと、ありえるなんて思いもしなかった！
レベルなのか？ｗ
815:デフォルトの名無しさん
19/03/08 17:15:48.86 oNzvowiX0.net
ついでだからちょっと改造
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
は .my-component が 2回でてきてDRYじゃないんで
1回で書く方法
$('.my-component').on('change', '[name="switch"]', function(event) {
$(event.delegateTarget).toggleClass('active', this.checked);
});
URLﾘﾝｸ(jsfiddle.net)
816:デフォルトの名無しさん
19/03/08 17:19:36.99 oNzvowiX0.net
>>791
> まあいいよ、後で動作する奴を上げてあげるよ。
じゃあHTML側はこれ相当でお願いね。
コンポーネントは３つ。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
</div>
817:デフォルトの名無しさん
19/03/08 17:59:49.58 /TYC9ex30.net
>>794
ふう、やっとPCの前に戻ってきた。というわけでちょっと上げてみた。ブラウザから5ch書き込むの久しぶりだわｗ。
URLﾘﾝｸ(codepen.io)
簡単にテンプレート化してコンポーネント化もしといた。何か分からないことあるなら遠慮なく質問してよ。ちょっと用事あるから次は10時ぐらいにスレみる予定。
818:デフォルトの名無しさん
19/03/08 18:05:40.88 oNzvowiX0.net
[jQuery]
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[Vue]
Vue.component('my-component',{
template:`
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
`,
data:function(){return{
isActive:false
}},
props:["val"]
})
new Vue({el: '#app'})
あ、デザイナーさん。HTMLはVueのコードに移動したんで
デザイン変えた�
819:ｫゃVueの方いじってくださいねｗｗｗ やっぱりこうなるｗ
820:デフォルトの名無しさん
19/03/08 18:07:11.66 oNzvowiX0.net
[jQuery] 3行
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[Vue] 12行
Vue.component('my-component',{
template:`
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
`,
data:function(){return{
isActive:false
}},
props:["val"]
})
new Vue({el: '#app'})
あ、デザイナーさん。HTMLはVueのコードに移動したんで
デザイン変えたきゃVueの方いじってくださいねｗｗｗ
やっぱりこうなるｗ
行数は増え、分業ができなくなる
821:デフォルトの名無しさん
19/03/08 18:11:58.57 oNzvowiX0.net
VueはコンポーネントとDOM構造が密接に結びついているから、
以下みたいに、デザイン上の都合などで変えた時の柔軟性がなくなってしまうんだよな。
jQueryならあくまで、my-componentは、中のname=switchがONになったらクラスを変えるってだけで
中身は自由にいろんなものに変更できるというコンポーネントなのに
<div class="my-component">
<input type="checkbox" name="switch">switch1
<p>ここはswitch1です</p>
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
<img src="かっこいい画像.gif">
</div>
822:デフォルトの名無しさん
19/03/08 18:44:14.67 /TYC9ex30.net
>>797
気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ。一番簡単なサンプルだし、5chでやる規模じゃない。
それより最初の話はどうした？vueの方が随分コード短いぞ。その質問に答える為にサンプル上げたんだが、答えるのが礼儀ってもんだぜ。
823:デフォルトの名無しさん
19/03/08 18:49:38.83 oNzvowiX0.net
>>799
> 気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ
jQueryと同じことをするのに、話が長くなるんだへーｗ
ま結論な。jQueryが3行の所、Vueだと12行になが～くなりました。
テンプレートのところを除いたとしても7行。jQueryの倍
[jQuery] 3行
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[Vue] 12行
Vue.component('my-component',{
template:`
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
`,
data:function(){return{
isActive:false
}},
props:["val"]
})
new Vue({el: '#app'})
824:デフォルトの名無しさん
19/03/08 18:52:05.37 oNzvowiX0.net
それに一番ひどいのは、やっぱりmy-componentのdivの中身を
デザイナがいじろうとしたら、JavaScriptファイルを修正しなければ
ならなくなるってところなんだよね。
DOMとコードが密接に結びついちゃってる。
825:デフォルトの名無しさん
19/03/08 18:56:00.97 oNzvowiX0.net
jQueryの場合、JavaScriptのコードとDOMの構造は結ぶていてなくて
結びついているのは、.my-componentというクラス名と
input name=switchだけ。だからDOMの構造をどんなに変えても
クラス名とそういう名前のinputがあればいい
コードとDOMの構造が分離されている
826:デフォルトの名無しさん
19/03/08 19:11:44.53 /TYC9ex30.net
>>801
やっぱり全く理解できてないじゃん。最初の話に戻すぞ。
最初の例ならスクリプトは、
new vue({data:{isActive:false}})
これだけ。君が分からなくて動かん！！とか騒いでた奴。君のその3行のスクリプトと比べてみなよ。
次に、まあ君はvue知らんからしょうがないがテンプレートは実務では当然外部に持つ。単一ファイルコンポーネントでググれ。
これで聞かれた事は答えたって事で俺からも質問していいか？
さっきからコンポーネントと言ってるが、君のはコンポーネントじゃないだろ。単なるコピペでカプセル化も局所化も無い。サンプルである事を割り引いてもコンポーネントと呼べる内容じゃない、と思うんだが、マジでどう思ってるの？
827:デフォルトの名無しさん
19/03/08 19:14:42.43 oNzvowiX0.net
>>803
> new vue({data:{isActive:false}})
それだけだと、どれと結びついてるのか（＝セレクタ）その情報がないだろ。
セレクタを省略して良いんだったら、jQueryだってこの一行だよ。
toggleClass('active', this.checked);
828:デフォルトの名無しさん
19/03/08 19:16:38.22 oNzvowiX0.net
いや、値を変えるコードすら無いかｗ
jQueryだとこれだなｗ Vueより断然短い
'active'
829:デフォルトの名無しさん
19/03/08 19:23:09.87 oNzvowiX0.net
> 最初の例ならスクリプトは、
> new vue({data:{isActive:false}})
> これだけ。
これだけで動く！（=動かない）
これなんて詐欺？ｗ
830:デフォルトの名無しさん
19/03/08 19:25:20.00 /TYC9ex30.net
>>804
がーん、ここまで書いても分からんか。それ動作せんだろ。。自分で言った様に動作するコードで比較しようぜ！！
それと、俺は君を責めてる訳じゃなんだぜ。長年jQueryには世話になったから、優秀なライブラリだとよく知ってる。でもここはvue react angularスレだろ。jQueryはややすれ違いなんだよ。でもまあお互いの長所短所を比較しつつ、まったり雑談しようや。
831:デフォルトの名無しさん
19/03/08 19:26:43.19 /TYC9ex30.net
>>806
wwワザとか？vue本体ロードしなはれよ。
832:デフォルトの名無しさん
19/03/08 19:29:20.37 oNzvowiX0.net
>>808
はい。動かない証拠。vue本体は前の人がロードしてますよーｗ
URLﾘﾝｸ(codepen.io)
833:デフォルトの名無しさん
19/03/08 19:30:11.51 oNzvowiX0.net
>>807
だから動作しないコードを出して
これだけって嘘を付くのをやめろって言ってるんだが、
これだけって、どこまでごこれだけなんｄ？
動作しないコードまでがこれだけか。
834:デフォルトの名無しさん
19/03/08 19:30:33.50 oNzvowiX0.net
これだけって、どこまでがこれだけなんだ？
動作しないコードまでがこれだけか。
835:デフォルトの名無しさん
19/03/08 19:35:01.38 YjtKBzOFM.net
はあ、、分かった分かった。最初の例で動く奴上げてやるよ。出先でだから1時間後な。
で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
836:デフォルトの名無しさん
19/03/08 19:37:01.18 oNzvowiX0.net
見ての通りjQueryだと、HTMLがJavaScriptに全く汚染されていない。
JavaScriptの臭いがないクリーンなHTMLなんだよ。だから分業ができる。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
Vue使ったら、HTMLが謎の汚染（HTML書いてる人には意味不明なもの）が発生し
1. :class="{active:isActive}"
2. v-model="isActive"
HTMLコードはJavaScriptファイルに移動してしまうし、
上のコードだけじゃ足りないから
data:function(){
return{
isActive:false
}
},
props:["val"]
というコードが追加で必要になるし。
もちろん .my-componentと結びつけるために
Vue.component('my-component',{
という一行が必要になるし、HTMLはmy-componentとかいうHTML書いてる人は知らないタグを使うように強制され
属性が名前になるんですよーとか、新たなルールを押し付けられることになってる。
837:デフォルトの名無しさん
19/03/08 19:39:05.43 oNzvowiX0.net
>>812
> で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
普通に再利用できてるんだが？
そもそもjQueryのコードは状態を保持していない。
わかるか？jQueryのコードには状態がない。
状態は、HTMLのタグに存在している。
だからHTMLのタグの分だけインスタンスが存在しているようなもので、
普通に再利用できる。
838:デフォルトの名無しさん
19/03/08 19:43:49.07 oNzvowiX0.net
Vueの場合、コンポーネントが状態を持ってしまってる。
isActiveという変数のことな。
状態を持ったisActiveを共有することは出来ないから、
新た無いHTMLのタグを作らければいけなくなってしまっている。
そしてisActiveという事実上のローカル変数を参照するために、
JavaScript側でHTMLを書くしかなくなってしまっている
HTMLがガッツリJavaScriptと結びついてしまっているわけだ
839:デフォルトの名無しさん
19/03/08 20:00:52.98 YjtKBzOFM.net
>>815
どこから突っ込めばいいんだ。。
> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。
コンポーネントは状態持つものだよ。いや認識の相違とかじゃなく普通に。そして隠蔽されるべきもの。
> 状態を持ったisActiveを共有することは出来ないから、
普通に参照できる。
> そしてisActiveという事実上のローカル変数を参照するために、
> JavaScript側でHTMLを書くしかなくなってしまっている
単一ファイルコンポーネント。
> HTMLがガッツリJavaScriptと結びついてしまっているわけだ
まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
840:デフォルトの名無しさん
19/03/08 20:09:37.29 YjtKBzOFM.net
いいよ、もう少し分かりやすい質問しよう。
コンポーネントの要素として、簡単に テンプレート、css、jsがあるとしよう。3つ合わせてコンポーネントね。これらは外部から容易に参照できてはいけないし、干渉されてはいけない、複製も容易でないとダメ。
君のやり方で、my-componentをどうコンポーネント化するのか例示して欲しい。
841:デフォルトの名無しさん
19/03/08 20:19:23.19 QXTI5KI7a.net
わかった
Delphi使え
842:デフォルトの名無しさん
19/03/08 20:35:47.91 oNzvowiX0.net
>>817
何が言いたいのかわからん。
CSSで div { color: red } って書いても
影響を受けないようになんて、Vueでもできないだろ
843:デフォルトの名無しさん
19/03/08 20:36:44.19 oNzvowiX0.net
>>816
> まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
jQueryでは結びつかない。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
↑どこにjQuery関連のものがあるか言ってみな
844:デフォルトの名無しさん
19/03/08 20:43:00.51 oNzvowiX0.net
845:> Vueの場合、コンポーネントが状態を持ってしまってる。 > isActiveという変数のことな。 訂正 Vueの場合、JavaScriptのコードが状態を持ってしまってる。 isActiveという変数のことな。 だからDOMとJavaScriptのインスタンスを一対一で 紐付けなければならなくなってる。密接に結びついている。 jQueryの場合JavaScriptのコードでは状態を持たないから、 DOMが一つだろうと複数だろうが、処理を共有化できる。
846:デフォルトの名無しさん
19/03/08 21:16:27.20 kvsQt7Fnr.net
デザインやUI・UX、インタラクションが実装できないクソエンジニアどもがギャーギャー騒いでる
お前ら自分の無能さを披露して恥ずかしくねえの？
フロントやるならデザイン込みでUIくらいやれや
クソみたいなUI作ってんじゃねえよ
847:デフォルトの名無しさん
19/03/08 21:19:25.25 oNzvowiX0.net
餅は餅屋
848:デフォルトの名無しさん
19/03/08 21:31:02.59 /TYC9ex30.net
ただいまー。という訳で最初の質問の答えアップだよ。
URLﾘﾝｸ(codepen.io)
なんの質問か忘れてるだろうから、君の763の質問引用するよ。
>jQueryの方が少ないですね。
>嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。
>$('.my-component [name="switch"]').change(function() {
> $(this).closest('.my-component').toggleClass('active', this.checked);
>});
URLﾘﾝｸ(jsfiddle.net)
で答えがこれね。
new Vue({
el: '#app',
data: {isActive:false},
})
どう？まあこんな短いサンプルで比較するのもどうやねんってのは分かるけど質問にはちゃんと答えたよ。
html含めても確実にvueの方が少ないよね。
あと少しはvueやreact勉強しようよ。こんな短いサンプルの初期化方法すら知らなかった訳で、知らないからって全力否定するのはどうなのって思うぞ。
849:デフォルトの名無しさん
19/03/08 21:36:39.46 kvsQt7Fnr.net
デザインできてUIUXできるようになれば引く手数多だぞ
ほんとフルスタックはほとんどいないから
年収は最低でも1000万はいく
850:デフォルトの名無しさん
19/03/08 21:40:42.36 NeLzfZqe0.net
静的なWebページがあってそこにちょっと動きを付ける程度ならjQueryがお手軽。まぁそうだな。
851:デフォルトの名無しさん
19/03/08 22:04:03.93 oNzvowiX0.net
>>824
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
852:デフォルトの名無しさん
19/03/08 22:19:01.08 JZ/onRPtM.net
行数連呼しといてそりゃねえだろ
853:デフォルトの名無しさん
19/03/08 22:29:51.19 i92SBzwIa.net
やっとReduxがちゃんと分かってきた
けどActionって関数にする必要ってなんのためなの？
constの定数でもいいような気もするんだけど
854:デフォルトの名無しさん
19/03/08 23:22:07.35 8MLFoUZt0.net
まさか知らないで叩いてたとはなぁ
855:デフォルトの名無しさん
19/03/09 00:19:50.47 /m10ZyJL0.net
UIUXが複雑化すればデザインと密接になり、デザインがやるべきことになる
昔ながらのショッピングカートならそうでもないかもしれんがｗ
856:デフォルトの名無しさん
19/03/09 00:31:16.43 e9DsS9n/0.net
>>827
> my-componentの外に、置いたinputでも動くし、
> my-componentを複数置いたら、おかしくなるし、
> お前馬鹿なの？ 少しは書く前に頭使ったら？
君は本当成長ないね。過ちは認めようよ。俺は君の質問に的確に答えたよ。同じ動作をするより短いサンプルだろ。その返しがこれって、そんなに負けが認められんか。だから駄目なんだよなあ。。
あと批判するなら少しはvueやreact勉強してから述べような。俺もまさかど素人が批判してるとは思わなかった。当然ある程度は知ってて、それ故に批判すると思うじゃん常識的に考えてさ。そこはすまん。思い至らなかった。次からはスルーするよ。おやすみぃ。
857:デフォルトの名無しさん
19/03/09 00:48:24.43 RYW8IiyE0.net
同じ動作してないよね。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
そんなにjQueryよりもVueの方が長くなることが許せないの？
事実を受け入れようよｗ
858:デフォルトの名無しさん
19/03/09 00:53:19.31 zxiwPMOw0.net
なんでjQueryの動作を真似ることが前提なんだよ
言ってることめちゃくちゃじゃん
859:デフォルトの名無しさん
19/03/09 00:58:02.98 RYW8IiyE0.net
> なんでjQueryの動作を真似ることが前提なんだよ
お前言ってることがおかしい。
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
これと同じことを実現するという話で、
これというのは、.my-component（クラスなのだから当然）中の [name="switch"]'からの
イベントで.my-component に active クラスを
860:つけるというものなんだから、 最低限の条件を満たしてない
861:デフォルトの名無しさん
19/03/09 00:58:26.63 RYW8IiyE0.net
訂正
これというのは、.my-component（クラスなのだから当然複数ある）中の [name="switch"]'からの
862:デフォルトの名無しさん
19/03/09 01:00:24.50 RYW8IiyE0.net
.my-component（クラスなのだから当然）中の [name="switch"]'からの
イベントで.my-component に active クラスをつける
というお題で、複数対応していなければ突っ込まれるのは当たり前だし
お題を満たせばVueのコードはこんなに長くなる。
Vue.component('my-component',{
template:`
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
`,
data:function(){
return{
isActive:false
}
},
props:["val"]
})
new Vue({el: '#app'})
863:デフォルトの名無しさん
19/03/09 01:02:17.14 RYW8IiyE0.net
しかもこれ
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
という固定のDOM構造にしか使えないので
jQueryよりも劣っている
jQueryだとHTML（DOM構造）を自由に変更できる。
以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない
<div class="my-component">
<input type="checkbox" name="switch">switch1
<p>ここはswitch1です</p>
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
<img src="かっこいい画像.gif">
</div>
864:デフォルトの名無しさん
19/03/09 01:02:49.95 N2GlqC3/0.net
こんなところにクソコードベタ貼りしてないでCodesandboxで動くソースでも書いてからリンク貼れよ
865:デフォルトの名無しさん
19/03/09 01:04:30.20 RYW8IiyE0.net
>>838の実際に動くコードはこちら
URLﾘﾝｸ(jsfiddle.net)
これと同じことをVueで実現するコードは
更に長くなる
866:デフォルトの名無しさん
19/03/09 01:11:28.76 zxiwPMOw0.net
はっきり言うけどさ
中のinputまで丸ごとコピペしないと動かないコンポーネントとかコンポーネントじゃねえよ
jQueryならDOM構造は気にしなくて良かったんじゃないのか
867:デフォルトの名無しさん
19/03/09 01:36:21.59 ovl4dn3WM.net
最後にまとめて答えとくよ。
>>819
> 何が言いたいのかわからん。
> CSSで div { color: red } って書いても
> 影響を受けないようになんて、Vueでもできないだろ
できる。scopedでググるか、詳しくはvueの公式見よう。
>>820
> jQueryでは結びつかない。
> <div class="my-component">
> <input type="checkbox" name="switch">switch1
> </div>
> ↑どこにjQuery関連のものがあるか言ってみな
そこは結びつかなきゃ困るんだよ。リアクティブなんだから。いちいちon changeイベントの記述なんぞしたくないもの。ねえ、このサンプルで言えばさ、nameがv-modelになるだけだよ？何がそんな嫌なのさ？
868:デフォルトの名無しさん
19/03/09 02:04:13.30 MQBXPAS0M.net
jQueryの人頑張ってるみたいだけど
jQ
869:デフォルトの名無しさん
19/03/09 02:07:07.23 ovl4dn3WM.net
>>838
> という固定のDOM構造にしか使えないので
> jQueryよりも劣っている
これが大いなる勘違いなんだがもう説明しない。いいから学べ。
> jQueryだとHTML（DOM構造）を自由に変更できる。
> 以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない
これアンチパターンで混乱の元。カプセル化できないコンポーネントなんぞ不安で使えたもんじゃない。セレクタの影響範囲が広すぎて便利なつもりになってるだけ。将来的なデスマーチが約束された最も最悪な例だと気いて欲しい。
870:デフォルトの名無しさん
19/03/09 02:21:00.49 ovl4dn3WM.net
あとさ、いいからjQuery君はスレタイ読もうついでに空気もね。
ココはvue react angularスレだよ。公式のサンプル一つも試した事ないのバレてるのよ？？なのにどうやって比較してるの？妄想じゃんそれ。
両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。そしたら俺もキチンと答えるよ。間違ってたら謝るし。俺もjQueryは散々世話になったから嫌いじゃないのよ？
871:デフォルトの名無しさん
19/03/09 02:50:20.05 Tm/Y9JxW0.net
ただ単に覚えたくないんだよ
新しい言語を
jQueryは
872:デフォルトの名無しさん
19/03/09 03:10:54.41 n56g/PGg0.net
女子更衣室に堂々とチン入してきて延々巨根自慢をする粗チンバカ
873:デフォルトの名無しさん
19/03/09 07:00:21.97 RYW8IiyE0.net
>>842
> できる。scopedでググるか、詳しくはvueの公式見よう。
scopedは、コンポーネントだけで使えるCSSであって
外部からの影響を受けないようにするものじゃないよ
素人かよｗ
> そこは結びつかなきゃ困るんだよ。リアクティブなんだから。
理由は？ｗ
874:デフォルトの名無しさん
19/03/09 07:01:33.11 RYW8IiyE0.net
>>845
> 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。
jQueryの動くコード
URLﾘﾝｸ(jsfiddle.net)
Vueの動くコードはでてない。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなる
というクソコードしか出てない
875:デフォルトの名無しさん
19/03/09 07:05:56.25 RYW8IiyE0.net
リアクティブなんだから！（自分で言っていて意味わかっていない）
↑ぷぎゃーｗ
876:デフォルトの名無しさん
19/03/09 07:06:59.38 RYW8IiyE0.net
> nameがv-modelになるだけだよ？何がそんな嫌なのさ？
デザイナーの世界にないVue（JavaScript）専用の概念を
持ち込むことだね。
877:デフォルトの名無しさん
19/03/09 07:17:14
878:.04 ID:zxiwPMOw0.net
879:デフォルトの名無しさん
19/03/09 07:18:18.22 RYW8IiyE0.net
Vueのコンポーネントだけが
正しいコンポーネントだとか
恥ずかしいよ？
880:デフォルトの名無しさん
19/03/09 07:22:27.20 zxiwPMOw0.net
でもあなたはjQueryの正しいコンポーネントが再現出来ないからクソコードって言うんでしょ
恥ずかしくないの？
881:デフォルトの名無しさん
19/03/09 07:26:00.83 RYW8IiyE0.net
jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
単にHTML（DOM）の構造によって形作られたものに過ぎない。
専門用語ではなく、単なる英語としてのコンポーネント
この場合のmy-componentというのは、my-componentというクラス名から始まり
内部にname="switch"があるというコンポーネント
my-componentの条件はこれだけだから、DOMの構造はHTMLを修正するだけで柔軟に変更できる。
デザイナはこの条件を守っている限りHTML（CSS)を変更し自由にデザインできるし、
プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。
デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い
どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている
882:デフォルトの名無しさん
19/03/09 07:29:39.24 RYW8IiyE0.net
>>854
いや、常識的な仕様を守ってないからクソコードって言ってるんだよｗ
new Vue({
el: '#app',
data: {isActive:false},
})
これだけでできると言ったくせに
<div id="app">
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">abc
</div>
<input type="checkbox" v-model="isActive">abc ←ここを押しても反応する
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">abc ←ここを押したら全部反応する
</div>
</div>
はい、Vue側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
URLﾘﾝｸ(codepen.io)
883:デフォルトの名無しさん
19/03/09 07:45:09.02 RYW8IiyE0.net
ここで（HTML側を自由変更できないとはいえ）複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねｗ
URLﾘﾝｸ(codepen.io)
でもそれだとVueの方がjQueryよりも大幅に長くなっちゃったから
これだけでできる！（←まともに動かない）
と騙そうとしたんだろうね。
でもバレちゃったｗ
884:デフォルトの名無しさん
19/03/09 08:07:35.93 e9DsS9n/0.net
>>848
アホはお前だろう。。もう少しよく読んで意図把握しよう。
あとやっぱり君はリアクティブ自体理解できてないのがよくわかる。だからもう少し公式読め。
885:デフォルトの名無しさん
19/03/09 08:10:00.82 e9DsS9n/0.net
>>849
ほら
自分が書けないからそうやって逃げる。全く進歩しない。分からない事は否定するだけ。いいから自分で勉強証明しなって。見ててやるからさ。
886:デフォルトの名無しさん
19/03/09 08:10:39.68 zxiwPMOw0.net
提示された例がコンポーネントじゃないから当然なんだって
inputが中に２つあっても動いちゃうし無かったら役立たずのmy-componentが残るだけ
綺麗にコピペしないと動かないなんて常識的なコンポーネントの仕様を守ってないよね
887:デフォルトの名無しさん
19/03/09 08:16:51.61 e9DsS9n/0.net
>>857
なあ自分で言ってて悲しくならない？
new Vueすら知らない事バレてるんよ君w。俺はもう説明しない。基本すら自学できない奴に教える価値無い。