- 1 名前：デフォルトの名無しさん mailto:sage [2018/12/21(金) 21:37:36.86 ID:NZqrEm960.net]
-
実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured
- 751 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 21:20:18.65 ID:bV0vVOYFM.net]
- >>728
いやだからさ
「要件次第」で済む話を何度掘り返すのよ
スレタイ見てスレチだと思わないの？
- 752 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 22:37:46.71 ID:cPei42ec0.net]
- >人はある処理の中でDOMのどの部分を書き換えたいかを
>知っているので、必要最小限のDOM操作しか変更しない
>（クソプログラマなら全部消して作り直すとかいう無駄してるかもしれんが）
クソプログラマは全部消して作り直す
賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
- 753 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 22:42:13.25 ID:N/E4f3Caa.net]
- >>725
管理対象の状態数が増えるのがやだ
状態はできるだけ純粋で論理的な形式で管理したい
という要求がスッポリ抜けてるね
- 754 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 22:55:10.59 ID:Tta1cO7U0.net]
- GoogleもこれからPWAで攻めてきそうだけどね
- 755 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 22:59:25.97 ID:Y4GuSkwR0.net]
- >>732
CSSは宣言型なので、
管理対象の状態数が減るんですよ
- 756 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:00:35.30 ID:Y4GuSkwR0.net]
- >>731
> 賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
もっと賢いプログラマは、必要なことしかしないんだよ。
Aを変えたいなら、Aだけを変えましょう。ってね
- 757 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:01:50.74 ID:N/E4f3Caa.net]
- >>734
domの状態数は多すぎるよ
- 758 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:04:15.56 ID:N/E4f3Caa.net]
- >>735
見えるか見えないかみたいな、ただの論理値を管理したいだけなのに
それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
- 759 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:09:46.27 ID:oTfLqBj1a.net]
- まあ本当に賢いプログラマ達はフロントエンドなんてやらないんですけどね
- 760 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:11:14.61 ID:N/E4f3Caa.net]
- >>738
それは同意
- 761 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:12:46.45 ID:Y4GuSkwR0.net]
- AしたらBを変えたいんですが？
Reactを使うと・・・・
ではBを変数に結びつけましょう。
そういうコードを書き換えます。
そうすれば変数を変えればBも変わります。
おっと待ってください。
そのために変数をSTOREに入れなければいけません。
STOREからとってきて、STOREを更新・・・いえいえいけません
新しくオブジェクトを作るのです。
そのオブジェクトを作るために～
オブジェクトを変更する関数を用意するのです！
その関数を作るための、はい、メッセージが必要ですね。
えぇ、ですからね、AしたらAction Creatorを使ってactionを生成して
Storeに対してactinonをDispatchして、ReducerがDispatchに反応して
actionタイプから今の状態から新しい状態を変更すれば、
ほら簡単にBが変わるんです！
え？普通にAイベントのハンドラでBを変えればいいじゃないかって？
ムキー！
- 762 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:14:47.91 ID:Y4GuSkwR0.net]
- >>737
> それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
だから、CSSを使うといいですね。
JavaScirptからは親となる要素にクラスを設定するだけなんですよ。
簡単。DOMがどういう構造になっているかなんて関係ない。
あとはデザインを作る人が、その状態でどう表示したいかを作るだけなんです。
- 763 名前：デフォルトの名無しさん [2019/03/07(木) 23:23:16.99 ID:jEbiMY7gr.net]
- fluxの概念を取り入れたらものすごく簡単に状態管理ができる！
って本にもキータにもみんな書いてるんだけど？
- 764 名前：デフォルトの名無しさん mailto:sage [2019/03/07(木) 23:23:24.15 ID:N/E4f3Caa.net]
- >>741
私が管理したいのは見えるか見えないかという2つの純粋な状態なんです
ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
それはまるで物体から投影された影に干渉して、もとの物体を操ろうとするような愚かなことです
- 765 名前：デフォルトの名無しさん [2019/03/07(木) 23:58:03.68 ID:tvHZX0HA0.net]
- どっちも極端じゃないか？
バインディングならjQueryよりはVueやReact使った方がいいと思うけど、
表示非表示やアニメーションならcss側でやった方がいいと思う。
- 766 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 00:38:11.11 ID:kMybevyH0.net]
- 仮想ＤＯＭとJQueryの世代の重要な違いとして
セレクタやDOM操作を一切したくないという発想があるのではないだろうか
JSXでHTMLをそのまま書くのもセレクタを使いたくないからだろうし
- 767 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 00:47:24.38 ID:N66/0TP00.net]
- 実DOM では、IO 操作が遅い
仮想DOMでは、JavaScript内の操作だけだから、速い
- 768 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 01:03:32.93 ID:kMybevyH0.net]
- それはHTMLFragmentがあれば事足りる話っしょ
- 769 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 10:15:11.65 ID:jbQifWXg0.net]
- >>743
> ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
だからセレクタのクラスはブーリアンなんだよ
ある要素に、flagクラスというブーリアン値が
立っているか、立っていないか
- 770 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 10:16:08.10 ID:jbQifWXg0.net]
- >>746
仮想DOMを実DOMに反映させる所で
大幅に遅くなるんだよ
- 771 名前：デフォルトの名無しさん [2019/03/08(金) 11:13:41.54 ID:/TYC9ex30.net]
- >>725
リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。ミスしようがない。うーん、なんでjQueryやcssにそこまでこだわるかね。みんな散々苦労してきた末のスマートな解決方法が仮想domでありリアクティブなんだけどな。一度試してみたら？食わず嫌いしないでさ。
- 772 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 11:17:51.39 ID:jbQifWXg0.net]
- > リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。
終わらねーよｗ 変数みてデザインを変えるコードを書かないとだめだろ
- 773 名前：デフォルトの名無しさん [2019/03/08(金) 11:28:53.74 ID:/TYC9ex30.net]
- >>751
そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。
Falseになった結果どうなるかはuiの管轄でcssやdomとは本来無関係なんだよ。jQueryはそこが分離できない。
- 774 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 11:35:19.90 ID:jbQifWXg0.net]
- > そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。
別れてないよ。JavaScriptファイルを編集してもらわないといけない
CSSだと「プログラマの俺は、この要素のクラスを設定するだけです。
デザイナーさん、あとはかっこいいデザインを作ってください！」といえる
デザイナーはJavaScriptファイルを一切触らずに
デザインを作り込むことができる。
- 775 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 11:40:36.85 ID:jbQifWXg0.net]
- jQueryで書く場合はこんな感じだね。
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
コンポーネントの中にある名前がswitchのチェックボックスがONになれば
そのコンポーネントがactiveになって、
そのコンポーネント以下のデザインがactive用に変わる
DOMの構成がどうなっているか一切気にする必要がないんだよ。
- 776 名前：デフォルトの名無しさん [2019/03/08(金) 13:46:44.51 ID:/TYC9ex30.net]
- >>753
デザイナはスクリプトをいじる必要全くない。例えば
<div v-if=“isShow”></div>
というテンプレに対してスクリプトでは、
isShow=false
とするだけ。これだけでリアクティブになる。どっちがミスが少ないか分かるだろう？
- 777 名前：デフォルトの名無しさん [2019/03/08(金) 13:50:05.53 ID:/TYC9ex30.net]
- すまん途切れた。どっちがミスが少ないか、分業しやすいか分かると思うんだが、どうかね？
- 778 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 13:55:12.54 ID:jbQifWXg0.net]
- > <div v-if=“isShow”></div>
すいませーん、デザイナーさーん。
今度から、v-ifってのを覚えてくださいー。
いままでCSSで表示切り替えしてたでしょー？
それ、今度からやめてくださいねー。
リ・ア・ク・ト。やり方覚えてくださいね。
やり方変えたんですよ。こっちのやり方にね。
え？他にも色々ありますよ。勉強してくださいー。
- 779 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 13:57:57.43 ID:kMybevyH0.net]
- Javascript(Data/Model) - Javascript(UI/DOM) - HTML/CSS
デザイナーが真ん中の層を如何にやるのかという話だろう
HTML内にv-bindとか属性で埋め込むのもJQueryを書かせるのも同じこと
仮想DOMのフレームワークによって真ん中が無くなったとは言えないだろうし
- 780 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:02:22.95 ID:jbQifWXg0.net]
- jQueryはプログラマが使って、
イベントに反応してクラスを変更するだけなんだよ。
あとはDOMの構造とかCSSとか完全にデザイナーに
任せることができる。
デザイナーはデザイナーの流儀でやれるし、
JavaScriptフレームワークの流儀を押し付けることもない
- 781 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:05:09.01 ID:jbQifWXg0.net]
- >>758
HTMLのタグはDOMですか？
CSSで指定する色や配置はUIですか？
- 782 名前：デフォルトの名無しさん [2019/03/08(金) 14:11:29.15 ID:/TYC9ex30.net]
- >>758
いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
>>757
うむ、リアクティブの方が良い事は理解できたようだね。あとは君がデザイナや上司を説得するんだよ。そこは別問題。
- 783 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:12:44.22 ID:kMybevyH0.net]
- jQueryはすべてデザイナーがやるべき
ボタンをクリックしたらどのタグの色が変わるのか、それを知っているのはデザイナーだけで良い
- 784 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:20:09.62 ID: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版の実際に動くコードですよ。
https://jsfiddle.net/eu2wm3tk/
- 785 名前：デフォルトの名無しさん [2019/03/08(金) 14:20:12.96 ID:mjBCJk3zr.net]
- ほらほらだからこうなるって何度も言っただろ
フロントはフルスタックじゃないとこの程度ですら揉めるんだよ
もう一度言うぞ
デザインできないフロントエンジニアはクソ
エンジニアリングできないフロントデザイナーはクソ
お前ら言い争ってる時点で無能だと自覚しろ
- 786 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:20:13.82 ID:kMybevyH0.net]
- >>761
＞いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
そう、デザイン側のJSコードは減る。
- 787 名前：それはたしかだし、データ側JSとの繋ぎかたもはっきりとするね
欠点はHTML内に変なのをたくさん突っ込むのはいかがなものかってことかな [] - [ここ壊れてます]
- 788 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:20:59.66 ID:jbQifWXg0.net]
- >>762
> jQueryはすべてデザイナーがやるべき
JavaScriptのライブラリなのにデザイナーって意味不明ｗ
ボタンを押したら、ここのタグにこういうクラスがつきます。
って伝えるだけで、あとはそれぞれ作業ができる。
これが分業っていうんだよ。
- 789 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:28:57.63 ID:B/j0V0h2a.net]
- >>757
どっちかというとその場合デザイナーに必要なのはv-showじゃなくてisShowだから
どういうモードの時変数の設定値を何にすべきかという一覧表があればいいだけじゃね？
てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
- 790 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:31:25.36 ID:jbQifWXg0.net]
- > てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
フロントエンジニアがHTMLを書くから
分業できないってことなんですよ
- 791 名前：デフォルトの名無しさん [2019/03/08(金) 14:33:21.35 ID:mjBCJk3zr.net]
- >>757
いや、お前がデザイン覚えろよwwww
- 792 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:36:15.92 ID:kMybevyH0.net]
- >>766
プログラマーはcssに書かれたclassの名前まで知らなくていい
その方がデザイナーが変更してもプログラマーが対応しなくて済むだろ？
- 793 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:54:21.66 ID:B/j0V0h2a.net]
- デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
- 794 名前：デフォルトの名無しさん [2019/03/08(金) 14:58:33.92 ID:kvsQt7Fnr.net]
- UI・UXやインタラクションはエンジニアがやる分野
世界的にもその方向性になってきている
しかし世界中のエンジニアは無能だからまともにデザインできない
ごく簡単なUIすら理解できない
終わってんだろ
- 795 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:02:21.59 ID:B/j0V0h2a.net]
- 最低限のモダンっぽい見た目でいいならもうcssフレームワークのどれかでもいいだろ
- 796 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:07:22.44 ID:jbQifWXg0.net]
- >>769
> いや、お前がデザイン覚えろよwwww
分業するんだよ
- 797 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:08:44.58 ID:jbQifWXg0.net]
- >>770
分業っていうのは、完全に相手のことを知らないで
できるわけじゃないんだよ。
必要最小限、クラス名だけ。
jQuery使って、HTMLとCSSを正しく使うだけで
最小限の連絡で、それぞれが開発できるんだよ。
- 798 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:11:41.12 ID:jbQifWXg0.net]
- >>771
> デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
コンポーネントには状態があるんだから、
少なくともその状態ごとのデザインは作ってもらわないと困る。
で、どうやるかというと、お互いで決めたルール
コンポーネントのここに、こういうクラスがつきますよー
というルールに基づいて
デザイナーは、HTMLのコンポーネントのタグに
classを変更するだけなんだよ。
最終的にはJavaScriptでクラスを変更することになるが
開発中は、手書きでクラスを変更するだけ
超簡単
- 799 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:13:04.69 ID:kMybevyH0.net]
- >>772
いやUI・UXはデザイナーがやるべきだろ
そこで分離するからおかしなことになってる
- 800 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:15:10.57 ID:B/j0V0h2a.net]
- デザイナーに求めるものなんて最低限なら画像データだっていい
html形式でブラウザで表示できるなら大助かり
期日が守れないヤツ多いから最低限期日までにどっちか出してくれればそれ以上に求める事なんてねぇんだが
- 801 名前：デフォルトの名無しさん [2019/03/08(金) 16:28:21.11 ID:/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 名前：デフォルトの名無しさん [2019/03/08(金) 16:38:37.56 ID:/TYC9ex30.net]
- おっとミスった。スマホ手打ちなんですまんね。
[HTML]
<div class="my-component" class=“{active:isActive}”>
正しくは
<div class="my-component" :class=“{active:isActive}”>
:が抜けてたよ。
- 803 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:49:32.55 ID:oNzvowiX0.net]
- >>779
あのさぁ、動かないコード書かないでくれないか？
scriptタグまでは書かなくていいよ。jQueryでも書いてないからさ、
でも動くコード書いてっていったよね？
せめてjsfiddleで動かしてから来てよ
- 804 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:54:12.44 ID:oNzvowiX0.net]
- なんか動くって嘘つきそうだから
>>779では動かないという証拠として
>>779の内容を https://jsfiddle.net/b5xusp1d/ に書いておいたから
ほら動かないでしょ？
これを動くように修正してね。
jQuery版の実際に動くコードですよ。
https://jsfiddle.net/eu2wm3tk/
- 805 名前：デフォルトの名無しさん [2019/03/08(金) 16:55:22.77 ID:/TYC9ex30.net]
- >>781
それは贅沢だなw。こっちはスマホだと言うのに。あ、そうか君はvue知らないから動作チェックできないのか。どうせなら入れてみたら？簡単だよ。
あとコードは短くなった訳だが感想はどうかね？
- 806 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:55:35.67 ID:oNzvowiX0.net]
- ほんとなんですぐばれる嘘を作るんだろう？
理解できないな
- 807 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:56:30.27 ID:oNzvowiX0.net]
- >>783
だから動かないって
証拠>>782にかいたからさ。
お前がスマホとか知らんわ
スマホだから動かなくてもいいでしょ？
嘘だけど、いいでしょとか。恥ずかしくないの？
- 808 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:58:49.01 ID:oNzvowiX0.net]
- あ、ReactじゃなくてVueか。
はい、こっちにVue読み込んだの置いたからさ、
こっちも動かない。はぁ。動かない（笑）
https://jsfiddle.net/zvft0qo8/
- 809 名前：デフォルトの名無しさん [2019/03/08(金) 17:01:09.95 ID:/TYC9ex30.net]
- >>786
書き方間違えてるぞ。vue初期からしなきゃ動かんよw
- 810 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:01:40.94 ID: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>
https://jsfiddle.net/zygq0r56/
- 811 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:02:12.51 ID:oNzvowiX0.net]
- >>787
書き方間違えてるって。
動くコード書いてないお前の落ち度じゃん
- 812 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:07:56.77 ID:oNzvowiX0.net]
- vueは面倒だなーって思いながら、
vue初期からしなきゃ動かんよw
と指摘された点を
今書いてるのかな？ｗ
- 813 名前：デフォルトの名無しさん [2019/03/08(金) 17:08:24.75 ID:/TYC9ex30.net]
- >>789
おいおい、vue知らないのに勝手にアップして動かないと言うのは無しだろ。知らないなら知らないと言えば教えてあげるのに。初期化方法までは面倒みれんぞ。jQueryだってそうだろ？
まあいいよ、後で動作する奴を上げてあげるよ。
- 814 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:12:52.61 ID:oNzvowiX0.net]
- > jQueryだってそうだろ
何言ってるんだ？
jsfiddleにはまさにこれだけのコードしか書いてないんだが？
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
いやまさかそんなこと、ありえるなんて思いもしなかった！
レベルなのか？ｗ
- 815 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:15:48.86 ID: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);
});
https://jsfiddle.net/tk5yvs3g/
- 816 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:19:36.99 ID: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 名前：デフォルトの名無しさん [2019/03/08(金) 17:59:49.58 ID:/TYC9ex30.net]
- >>794
ふう、やっとPCの前に戻ってきた。というわけでちょっと上げてみた。ブラウザから5ch書き込むの久しぶりだわｗ。
https://codepen.io/hinoragi/pen/YgVQjK
簡単にテンプレート化してコンポーネント化もしといた。何か分からないことあるなら遠慮なく質問してよ。ちょっと用事あるから次は10時ぐらいにスレみる予定。
- 818 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:05:40.88 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:07:11.66 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:11:58.57 ID: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 名前：デフォルトの名無しさん [2019/03/08(金) 18:44:14.67 ID:/TYC9ex30.net]
- >>797
気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ。一番簡単なサンプルだし、5chでやる規模じゃない。
それより最初の話はどうした？vueの方が随分コード短いぞ。その質問に答える為にサンプル上げたんだが、答えるのが礼儀ってもんだぜ。
- 823 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:49:38.83 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:52:05.37 ID:oNzvowiX0.net]
- それに一番ひどいのは、やっぱりmy-componentのdivの中身を
デザイナがいじろうとしたら、JavaScriptファイルを修正しなければ
ならなくなるってところなんだよね。
DOMとコードが密接に結びついちゃってる。
- 825 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:56:00.97 ID:oNzvowiX0.net]
- jQueryの場合、JavaScriptのコードとDOMの構造は結ぶていてなくて
結びついているのは、.my-componentというクラス名と
input name=switchだけ。だからDOMの構造をどんなに変えても
クラス名とそういう名前のinputがあればいい
コードとDOMの構造が分離されている
- 826 名前：デフォルトの名無しさん [2019/03/08(金) 19:11:44.53 ID:/TYC9ex30.net]
- >>801
やっぱり全く理解できてないじゃん。最初の話に戻すぞ。
最初の例ならスクリプトは、
new vue({data:{isActive:false}})
これだけ。君が分からなくて動かん！！とか騒いでた奴。君のその3行のスクリプトと比べてみなよ。
次に、まあ君はvue知らんからしょうがないがテンプレートは実務では当然外部に持つ。単一ファイルコンポーネントでググれ。
これで聞かれた事は答えたって事で俺からも質問していいか？
さっきからコンポーネントと言ってるが、君のはコンポーネントじゃないだろ。単なるコピペでカプセル化も局所化も無い。サンプルである事を割り引いてもコンポーネントと呼べる内容じゃない、と思うんだが、マジでどう思ってるの？
- 827 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:14:42.43 ID:oNzvowiX0.net]
- >>803
> new vue({data:{isActive:false}})
それだけだと、どれと結びついてるのか（＝セレクタ）その情報がないだろ。
セレクタを省略して良いんだったら、jQueryだってこの一行だよ。
toggleClass('active', this.checked);
- 828 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:16:38.22 ID:oNzvowiX0.net]
- いや、値を変えるコードすら無いかｗ
jQueryだとこれだなｗ Vueより断然短い
'active'
- 829 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:23:09.87 ID:oNzvowiX0.net]
- > 最初の例ならスクリプトは、
> new vue({data:{isActive:false}})
> これだけ。
これだけで動く！（=動かない）
これなんて詐欺？ｗ
- 830 名前：デフォルトの名無しさん [2019/03/08(金) 19:25:20.00 ID:/TYC9ex30.net]
- >>804
がーん、ここまで書いても分からんか。それ動作せんだろ。。自分で言った様に動作するコードで比較しようぜ！！
それと、俺は君を責めてる訳じゃなんだぜ。長年jQueryには世話になったから、優秀なライブラリだとよく知ってる。でもここはvue react angularスレだろ。jQueryはややすれ違いなんだよ。でもまあお互いの長所短所を比較しつつ、まったり雑談しようや。
- 831 名前：デフォルトの名無しさん [2019/03/08(金) 19:26:43.19 ID:/TYC9ex30.net]
- >>806
wwワザとか？vue本体ロードしなはれよ。
- 832 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:29:20.37 ID:oNzvowiX0.net]
- >>808
はい。動かない証拠。vue本体は前の人がロードしてますよーｗ
https://codepen.io/anon/pen/MxmrjP
- 833 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:30:11.51 ID:oNzvowiX0.net]
- >>807
だから動作しないコードを出して
これだけって嘘を付くのをやめろって言ってるんだが、
これだけって、どこまでごこれだけなんｄ？
動作しないコードまでがこれだけか。
- 834 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:30:33.50 ID:oNzvowiX0.net]
- これだけって、どこまでがこれだけなんだ？
動作しないコードまでがこれだけか。
- 835 名前：デフォルトの名無しさん [2019/03/08(金) 19:35:01.38 ID:YjtKBzOFM.net]
- はあ、、分かった分かった。最初の例で動く奴上げてやるよ。出先でだから1時間後な。
で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
- 836 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:37:01.18 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:39:05.43 ID:oNzvowiX0.net]
- >>812
> で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
普通に再利用できてるんだが？
そもそもjQueryのコードは状態を保持していない。
わかるか？jQueryのコードには状態がない。
状態は、HTMLのタグに存在している。
だからHTMLのタグの分だけインスタンスが存在しているようなもので、
普通に再利用できる。
- 838 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:43:49.07 ID:oNzvowiX0.net]
- Vueの場合、コンポーネントが状態を持ってしまってる。
isActiveという変数のことな。
状態を持ったisActiveを共有することは出来ないから、
新た無いHTMLのタグを作らければいけなくなってしまっている。
そしてisActiveという事実上のローカル変数を参照するために、
JavaScript側でHTMLを書くしかなくなってしまっている
HTMLがガッツリJavaScriptと結びついてしまっているわけだ
- 839 名前：デフォルトの名無しさん [2019/03/08(金) 20:00:52.98 ID:YjtKBzOFM.net]
- >>815
どこから突っ込めばいいんだ。。
> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。
コンポーネントは状態持つものだよ。いや認識の相違とかじゃなく普通に。そして隠蔽されるべきもの。
> 状態を持ったisActiveを共有することは出来ないから、
普通に参照できる。
> そしてisActiveという事実上のローカル変数を参照するために、
> JavaScript側でHTMLを書くしかなくなってしまっている
単一ファイルコンポーネント。
> HTMLがガッツリJavaScriptと結びついてしまっているわけだ
まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
- 840 名前：デフォルトの名無しさん [2019/03/08(金) 20:09:37.29 ID:YjtKBzOFM.net]
- いいよ、もう少し分かりやすい質問しよう。
コンポーネントの要素として、簡単に テンプレート、css、jsがあるとしよう。3つ合わせてコンポーネントね。これらは外部から容易に参照できてはいけないし、干渉されてはいけない、複製も容易でないとダメ。
君のやり方で、my-componentをどうコンポーネント化するのか例示して欲しい。
- 841 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:19:23.19 ID:QXTI5KI7a.net]
- わかった
Delphi使え
- 842 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:35:47.91 ID:oNzvowiX0.net]
- >>817
何が言いたいのかわからん。
CSSで div { color: red } って書いても
影響を受けないようになんて、Vueでもできないだろ
- 843 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:36:44.19 ID:oNzvowiX0.net]
- >>816
> まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
jQueryでは結びつかない。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
↑どこにjQuery関連のものがあるか言ってみな
- 844 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:43:00.51 ID:oNzvowiX0.net]
-
- 845 名前：> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。
訂正
Vueの場合、JavaScriptのコードが状態を持ってしまってる。
isActiveという変数のことな。
だからDOMとJavaScriptのインスタンスを一対一で
紐付けなければならなくなってる。密接に結びついている。
jQueryの場合JavaScriptのコードでは状態を持たないから、
DOMが一つだろうと複数だろうが、処理を共有化できる。 [] - [ここ壊れてます]
- 846 名前：デフォルトの名無しさん [2019/03/08(金) 21:16:27.20 ID:kvsQt7Fnr.net]
- デザインやUI・UX、インタラクションが実装できないクソエンジニアどもがギャーギャー騒いでる
お前ら自分の無能さを披露して恥ずかしくねえの？
フロントやるならデザイン込みでUIくらいやれや
クソみたいなUI作ってんじゃねえよ
- 847 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 21:19:25.25 ID:oNzvowiX0.net]
- 餅は餅屋
- 848 名前：デフォルトの名無しさん [2019/03/08(金) 21:31:02.59 ID:/TYC9ex30.net]
- ただいまー。という訳で最初の質問の答えアップだよ。
https://codepen.io/hinoragi/pen/jJmzJG
なんの質問か忘れてるだろうから、君の763の質問引用するよ。
>jQueryの方が少ないですね。
>嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。
>$('.my-component [name="switch"]').change(function() {
> $(this).closest('.my-component').toggleClass('active', this.checked);
>});
jsfiddle.net/tk5yvs3g/
で答えがこれね。
new Vue({
el: '#app',
data: {isActive:false},
})
どう？まあこんな短いサンプルで比較するのもどうやねんってのは分かるけど質問にはちゃんと答えたよ。
html含めても確実にvueの方が少ないよね。
あと少しはvueやreact勉強しようよ。こんな短いサンプルの初期化方法すら知らなかった訳で、知らないからって全力否定するのはどうなのって思うぞ。
- 849 名前：デフォルトの名無しさん [2019/03/08(金) 21:36:39.46 ID:kvsQt7Fnr.net]
- デザインできてUIUXできるようになれば引く手数多だぞ
ほんとフルスタックはほとんどいないから
年収は最低でも1000万はいく
- 850 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 21:40:42.36 ID:NeLzfZqe0.net]
- 静的なWebページがあってそこにちょっと動きを付ける程度ならjQueryがお手軽。まぁそうだな。
- 851 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 22:04:03.93 ID:oNzvowiX0.net]
- >>824
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
- 852 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 22:19:01.08 ID:JZ/onRPtM.net]
- 行数連呼しといてそりゃねえだろ
- 853 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 22:29:51.19 ID:i92SBzwIa.net]
- やっとReduxがちゃんと分かってきた
けどActionって関数にする必要ってなんのためなの？
constの定数でもいいような気もするんだけど
- 854 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 23:22:07.35 ID:8MLFoUZt0.net]
- まさか知らないで叩いてたとはなぁ
- 855 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:19:50.47 ID:/m10ZyJL0.net]
- UIUXが複雑化すればデザインと密接になり、デザインがやるべきことになる
昔ながらのショッピングカートならそうでもないかもしれんがｗ
- 856 名前：デフォルトの名無しさん [2019/03/09(土) 00:31:16.43 ID:e9DsS9n/0.net]
- >>827
> my-componentの外に、置いたinputでも動くし、
> my-componentを複数置いたら、おかしくなるし、
> お前馬鹿なの？ 少しは書く前に頭使ったら？
君は本当成長ないね。過ちは認めようよ。俺は君の質問に的確に答えたよ。同じ動作をするより短いサンプルだろ。その返しがこれって、そんなに負けが認められんか。だから駄目なんだよなあ。。
あと批判するなら少しはvueやreact勉強してから述べような。俺もまさかど素人が批判してるとは思わなかった。当然ある程度は知ってて、それ故に批判すると思うじゃん常識的に考えてさ。そこはすまん。思い至らなかった。次からはスルーするよ。おやすみぃ。
- 857 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:48:24.43 ID:RYW8IiyE0.net]
- 同じ動作してないよね。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
そんなにjQueryよりもVueの方が長くなることが許せないの？
事実を受け入れようよｗ
- 858 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:53:19.31 ID:zxiwPMOw0.net]
- なんでjQueryの動作を真似ることが前提なんだよ
言ってることめちゃくちゃじゃん
- 859 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:58:02.98 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:58:26.63 ID:RYW8IiyE0.net]
- 訂正
これというのは、.my-component（クラスなのだから当然複数ある）中の [name="switch"]'からの
- 862 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:00:24.50 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:02:17.14 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:02:49.95 ID:N2GlqC3/0.net]
- こんなところにクソコードベタ貼りしてないでCodesandboxで動くソースでも書いてからリンク貼れよ
- 865 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:04:30.20 ID:RYW8IiyE0.net]
- >>838の実際に動くコードはこちら
jsfiddle.net/rhp9dvya/
これと同じことをVueで実現するコードは
更に長くなる
- 866 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:11:28.76 ID:zxiwPMOw0.net]
- はっきり言うけどさ
中のinputまで丸ごとコピペしないと動かないコンポーネントとかコンポーネントじゃねえよ
jQueryならDOM構造は気にしなくて良かったんじゃないのか
- 867 名前：デフォルトの名無しさん [2019/03/09(土) 01:36:21.59 ID: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 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 02:04:13.30 ID:MQBXPAS0M.net]
- jQueryの人頑張ってるみたいだけど
jQ
- 869 名前：デフォルトの名無しさん [2019/03/09(土) 02:07:07.23 ID:ovl4dn3WM.net]
- >>838
> という固定のDOM構造にしか使えないので
> jQueryよりも劣っている
これが大いなる勘違いなんだがもう説明しない。いいから学べ。
> jQueryだとHTML（DOM構造）を自由に変更できる。
> 以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない
これアンチパターンで混乱の元。カプセル化できないコンポーネントなんぞ不安で使えたもんじゃない。セレクタの影響範囲が広すぎて便利なつもりになってるだけ。将来的なデスマーチが約束された最も最悪な例だと気いて欲しい。
- 870 名前：デフォルトの名無しさん [2019/03/09(土) 02:21:00.49 ID:ovl4dn3WM.net]
- あとさ、いいからjQuery君はスレタイ読もうついでに空気もね。
ココはvue react angularスレだよ。公式のサンプル一つも試した事ないのバレてるのよ？？なのにどうやって比較してるの？妄想じゃんそれ。
両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。そしたら俺もキチンと答えるよ。間違ってたら謝るし。俺もjQueryは散々世話になったから嫌いじゃないのよ？
- 871 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 02:50:20.05 ID:Tm/Y9JxW0.net]
- ただ単に覚えたくないんだよ
新しい言語を
jQueryは
- 872 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 03:10:54.41 ID:n56g/PGg0.net]
- 女子更衣室に堂々とチン入してきて延々巨根自慢をする粗チンバカ
- 873 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:00:21.97 ID:RYW8IiyE0.net]
- >>842
> できる。scopedでググるか、詳しくはvueの公式見よう。
scopedは、コンポーネントだけで使えるCSSであって
外部からの影響を受けないようにするものじゃないよ
素人かよｗ
> そこは結びつかなきゃ困るんだよ。リアクティブなんだから。
理由は？ｗ
- 874 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:01:33.11 ID:RYW8IiyE0.net]
- >>845
> 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。
jQueryの動くコード
jsfiddle.net/rhp9dvya/
Vueの動くコードはでてない。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなる
というクソコードしか出てない
- 875 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:05:56.25 ID:RYW8IiyE0.net]
- リアクティブなんだから！（自分で言っていて意味わかっていない）
↑ぷぎゃーｗ
- 876 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:06:59.38 ID:RYW8IiyE0.net]
- > nameがv-modelになるだけだよ？何がそんな嫌なのさ？
デザイナーの世界にないVue（JavaScript）専用の概念を
持ち込むことだね。
- 877 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:17:14
]
- [ここ壊れてます]
- 878 名前：.04 ID:zxiwPMOw0.net mailto: だからおかしくて当然なんだって
勝手にコンポーネントと名乗ってるだけでそれコンポーネントじゃないから
ただのjQuery特有の動作だから [] - [ここ壊れてます]
- 879 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:18:18.22 ID:RYW8IiyE0.net]
- Vueのコンポーネントだけが
正しいコンポーネントだとか
恥ずかしいよ？
- 880 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:22:27.20 ID:zxiwPMOw0.net]
- でもあなたはjQueryの正しいコンポーネントが再現出来ないからクソコードって言うんでしょ
恥ずかしくないの？
- 881 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:26:00.83 ID:RYW8IiyE0.net]
- jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
単にHTML（DOM）の構造によって形作られたものに過ぎない。
専門用語ではなく、単なる英語としてのコンポーネント
この場合のmy-componentというのは、my-componentというクラス名から始まり
内部にname="switch"があるというコンポーネント
my-componentの条件はこれだけだから、DOMの構造はHTMLを修正するだけで柔軟に変更できる。
デザイナはこの条件を守っている限りHTML（CSS)を変更し自由にデザインできるし、
プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。
デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い
どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている
- 882 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:29:39.24 ID: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側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
https://codepen.io/anon/pen/BbZNVM
- 883 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:45:09.02 ID:RYW8IiyE0.net]
- ここで（HTML側を自由変更できないとはいえ）複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねｗ
https://codepen.io/hinoragi/pen/YgVQjK
でもそれだとVueの方がjQueryよりも大幅に長くなっちゃったから
これだけでできる！（←まともに動かない）
と騙そうとしたんだろうね。
でもバレちゃったｗ
- 884 名前：デフォルトの名無しさん [2019/03/09(土) 08:07:35.93 ID:e9DsS9n/0.net]
- >>848
アホはお前だろう。。もう少しよく読んで意図把握しよう。
あとやっぱり君はリアクティブ自体理解できてないのがよくわかる。だからもう少し公式読め。
- 885 名前：デフォルトの名無しさん [2019/03/09(土) 08:10:00.82 ID:e9DsS9n/0.net]
- >>849
ほら
自分が書けないからそうやって逃げる。全く進歩しない。分からない事は否定するだけ。いいから自分で勉強証明しなって。見ててやるからさ。
- 886 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 08:10:39.68 ID:zxiwPMOw0.net]
- 提示された例がコンポーネントじゃないから当然なんだって
inputが中に２つあっても動いちゃうし無かったら役立たずのmy-componentが残るだけ
綺麗にコピペしないと動かないなんて常識的なコンポーネントの仕様を守ってないよね
- 887 名前：デフォルトの名無しさん [2019/03/09(土) 08:16:51.61 ID:e9DsS9n/0.net]
- >>857
なあ自分で言ってて悲しくならない？
new Vueすら知らない事バレてるんよ君w。俺はもう説明しない。基本すら自学できない奴に教える価値無い。
- 888 名前：デフォルトの名無しさん [2019/03/09(土) 08:24:01.30 ID:e9DsS9n/0.net]
- >>855
> jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
> 単にHTML（DOM）の構造によって形作られたものに過ぎない。
> 専門用語ではなく、単なる英語としてのコンポーネント
無知極まってるぞ。勝手に定義するな。マジで少し勉強して。そんな俺様定義だからあんな再利用できない紛いモノ書くんだよ。
- 889 名前：デフォルトの名無しさん [2019/03/09(土) 08:28:42.54 ID:e9DsS9n/0.net]
- だああ、色々言いたいが出社だ。
いいかiQuery君。君はまずスレチだ。そこをまず理解しろ。
その上で書くならせめてjQueryとvue react angularのどれか、2つのコードを比較しながらjQueryの良さを語れ。
それがここに書き込む最低の礼儀じゃね？
- 890 名前：デフォルトの名無しさん [2019/03/09(土) 08:37:47.27 ID:e9DsS9n/0.net]
- 最後にもう一回言うぞ。
jQueryのコード置くだけで「だからvueだめなんだよ」コレ止めろ。
基礎だけでもVueを勉強してから発言するのが筋だぜ。でないと話が通じないから困るんだよ。ほらココvueのスレでもあるし。
- 891 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:14:15.58 ID:N2GlqC3/0.net]
- >>849
かっこいい画像.gifくらいちゃんと用意しろよ
- 892 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:18:13.96 ID:izNw5U5za.net]
- >>851
デザイナーは巣のhtmlだけ書いてくれりゃいいよ
実環境にコードをマージする作業はこっちでやるし
- 893 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:19:00.94 ID:zJdX2n9h0.net]
- これは素晴らしい煽り合いだな
お互いコードでやりあうとか
勉強になります
- 894 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:20:39.95 ID:b+N//s300.net]
- 多分、「jQueryで十分」って主張してる人は、結局SPAの概念が習得出来なかった、あるいはする気のない人じゃない？
最新のフロントエンド開発について行けないから、新しい物の価値を否定して、
自分の相対価値が下がって行くのを阻止したいんじゃないかと。
今後SPAがどうなるかなんて分からないけど、少なくとも新しい事に挑戦もせず、勉強もせず、
自分が理解出来る古い技術にばかりすがるのは、正直エンジニアとしては失格だと思うよ。
そういった人が今すべき事は、不真面目な自分を戒めて勉強に励むか、
あるいはエンジニアとしての死を素直に受け入れて、別の道を模索するかのどっちかにしたらいいんじゃないかと。
- 895 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:22:15.82 ID:ezqy2TGU0.net]
- スレチだし
ライブラリとフレームワークを比較する具合が香ばしさ
- 896 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:23:51.52 ID:N2GlqC3/0.net]
- >>856
独立タグはちゃんと閉じろよ性格の雑さが出てるぞ
<input />
- 897 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:29:59.29 ID:OAlfgW/Ia.net]
- jQueryはデザインの物理的な構造にプログラムが強く依存してしまうから生産性が低い
プログラムがデザインの物理的な構造に依存することを知ってるからデザインも安易に作れない(プログラムから扱えるようにするために物理的な制約が生まれる)
VueはVMを使ってロジックとデザインを明確に分離してるのでそういった不都合はかなり軽減される
全くないとは言わないがね
- 898 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 10:53:00.46 ID:RYW8IiyE0.net]
- >>870
それが必要なのはXHTML。HTML5では、/>は許容されるが
タグを閉じるという意味はなく単に無視されるという扱い。
- 899 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 10:53:39.13 ID: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側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
https://codepen.io/anon/pen/BbZNVM
- 900 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:15:35.75 ID:/2BHRI8Ma.net]
- 素人w
- 901 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:19:10.07 ID:OAlfgW/Ia.net]
- Vue(というかMVVM)の素晴らしいところはjavascript側はhtml/css側がどうなってるのか知らなくてもいいところ
そしてhtml/css側はjavascript側がどうなっているか最小限の知識で済むこと
jQueryではお互いがお互いに対する知識を多く必要としているため結合が非常に強くなってしまう
これでは分業は難しい
- 902 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:30:18.17 ID:RYW8IiyE0.net]
- >>875
嘘はいかんよ
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'})
VueのJavaScriptの中にHTMLが埋め込まれてしまってる
- 903 名前：デフォルトの名無しさん [2019/03/09(土) 11:43:48.95 ID:e9DsS9n/0.net]
- >>873
馬鹿野郎。。。それは最初のv-bindとv-modelのサンプルだろうが。
コンポーネントはこっちだ。
https://codepen.io/hinoragi/pen/YgVQjK
何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。
んでさ、修正点があるなら自分で書けばいいじゃない。別に複雑なコードじゃない。たった数行だぜ？コードに異論があるならコードで示す。当たり前だと思うがjQuery君は違うのかな？
それすら出来ず、vueが分からないからオウム返しのようにクソ呼ばわりする。それただのバカって言うんだよ。いい加減自覚しろ。
君に少しでもプライドがあるなら、君の思ったとおりに動作するvueのコード上げてみな。時間はかかってもいいからさ。
- 904 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:45:53.12 ID:OAlfgW/Ia.net]
- >>876
埋め込んだのだからそれは仕方ないでしょう
ちなみに私はVueの真の利点はMVVMによるViewとViewModelの分離であると考えています
世の人々はコンポーネント志向に興味を惹かれているようですがそれはオマケです
私はVueを使ったとしてもhtml/cssとjsを同居させることはありません
それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
埋め込みを拒否した場合はhtmlのコピペになるでしょう
その点についてはVueもjQueryも同じことです
なので問題はVueではなくコンポーネント志向の方にあることがわかります
- 905 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:47:01.74 ID:RYW8IiyE0.net]
- > 何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。
だったら分離してくださいよ。
"分離できるぞ" と言ってるからには、今のコードは分離されてないってことでしょ
それをしないのは、分離すると余計に長くなるってことなんでしょ？
- 906 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:47:56.22 ID:GVs3bbIF0.net]
- Vue, React は、コンポーネント指向。
デザイナー・プログラマーの分業体制
jQuery は、そういう観点ではない！
- 907 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:48:33.65 ID:RYW8IiyE0.net]
- >>878
> それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
ならない。なんのためにHTMLにテンプレートタグ <template> が出来たと思ってるんだ？
- 908 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:49:39.85 ID:OAlfgW/Ia.net]
- >>879
重要な点はVue(MVVM)はViewとViewModelが疎結合であり
jQueryはViewとLogicが密結合している事です
それに比べればコードの行数は大した問題にはなりません
- 909 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:53:02.83 ID:RYW8IiyE0.net]
- >>882
これがjQueryのコードなんだが
どこが結びついてるの？
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
- 910 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 11:53:04.50 ID:QoZVVHuY0.net]
- ツマンネーよ
- 911 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:00:56.94 ID:OAlfgW/Ia.net]
- >>881
それはテンプレートの置き場を変えただけです
テンプレートをjavascriptからhtmlへ追い出すだけならVueでも可能です
しかしコンポーネント志向場合はテンプレートをhtmlに追い出しても意味はありません
異なるページでコンポーネントを再利用する場合を考えればそれが無意味であることがわかります
- 912 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:03:54.96 ID:RYW8IiyE0.net]
- >>885
> それはテンプレートの置き場を変えただけです
だからお前がjQueryだと埋め込むしか無いっていったから、
置き場を変えてやったんだろうが
置き場を変えることでデザイナが自由にHTMLを変更できるようになる
プログラマは、中身がどう変わろうが意識する必要がなくなる
これが分業だろうが
- 913 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:04:02.87 ID:N2GlqC3/0.net]
- もう「jQuery vs Vue」みたいなスレでも立ててそっちでやれよ
- 914 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:05:41.67 ID:RYW8IiyE0.net]
- >>885
> 異なるページでコンポーネントを再利用する場合を考えれば
お前まさか、デザイナがページのヘッダとかフッタを
共通化せずにページごとに全部書いてると思ってるのか？
失礼だろｗ
- 915 名前：デフォルトの名無しさん [2019/03/09(土) 12:06:04.85 ID:e9DsS9n/0.net]
- >>879
君は本当に面白いな。俺には君の不満点が全部見えない。当たり前だよな他人だし。だから修正したコードを君自身が書くことに意味がある訳さ。勉強にもなる。それに君は俺が何を書いても文句を言うだろう。後付で色々言われるのは面倒だ。
だったら、君の素晴らしいコードと、俺の糞コードを比較すればいいじゃん？君の正当性はコードでしか証明できないんだぞ。
たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。
- 916 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:07:36.71 ID:flOfKdeWM.net]
- >>883
そのコードと<div>の中身がべったり対応してるじゃん
my-component以外に正確にコピペしてもらわないと動かない時点でコンポーネントじゃない
- 917 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:07:52.12 ID:RYW8IiyE0.net]
- >>889
> たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。
えとさ、なんでお前の利益になることを俺がしないといけないの？ｗ
- 918 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:08:40.26 ID:RYW8IiyE0.net]
- >>890
> そのコードと<div>の中身がべったり対応してるじゃん
<div>の中身がべったりってどういうこと？
divの中身はいろいろ変えられるんだけど？
そもそもdivである必要すらない
- 919 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:12:57.48 ID:OAlfgW/Ia.net]
- >>883
＞>>882
＞これがjQueryのコードなんだが
＞どこが結びついてるの？
＞
＞$('.my-component [name="switch"]').change(function() {
＞ $(this).closest('.my-component').toggleClass('active', this.checked);
＞});
・適応対象のname属性がswitchでありクラス名がmy-componentの要素の子孫であること
・適応対象がchangeイベントをサポートしていること
・適応対象の直近のクラス名がmy-componentの要素がactiveクラスをサポートしていること
少なくともこの3つの物理的な条件をjsプログラマが知ってなければなりません
さらにhtml/cssデザイナはjsプログラマがこれらの条件を期待していることを知っていなければなりません
Vue(MVVM)ならばそのような仮定は全く必要ありません
Viewとは独立してただ単にViewModelの属性のブール値を切り替えるだけです
- 920 名前：デフォルトの名無しさん [2019/03/09(土) 12:14:08.39 ID:e9DsS9n/0.net]
- >>883
なんで分からんの？まさにそれも密結合と言うんだぞ。クラス名やセレクタ使ってるだろ？
スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？
- 921 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:17:29.40 ID:RYW8IiyE0.net]
- >>893
Vue(MVVM)ならばそのような仮定は全く必要ありません
代わりにHTMLを直接書き換えるからです。
HTMLにコードがべったり結合してしまっています
- 922 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:17:40.62 ID:flOfKdeWM.net]
- >>892
jQプログラマ「my-componentを置いてくだだい」
デザイナ「<div class="my-component"></div>」
これで分業なんて出来るかよ
- 923 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:18:35.13 ID:RYW8IiyE0.net]
- >>894
> スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？
DOMのクラスやセレクタを使わないでやるなら
HTMLに直接React用のコードを埋め込むしか無いやんｗ
- 924 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:18:44.76 ID:OAlfgW/Ia.net]
- >>886
デザイナは自由ではありません
jQueryコードを理解してプログラムを破壊しないように作業しなければなりません
プログラムを破壊しないための条件は明確にはなっていません
そもそもあなたはコンポーネントの意味を理解していないようです
template tagを使用しても別の画面では再利用できません
それはコンポーネントではありません
コンポーネントはテンプレートとロジックが1つのブロックとして再利用可能な形態になっている必要があります
- 925 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:21:48.66 ID:OAlfgW/Ia.net]
- >>888
それは補助的な方法論です
補助的な方法を使用していいならVueのコンポーネントからテンプレート分離することも容易に可能です
あなたの最初の主張は完全に理を失いました
- 926 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:23:08.25 ID:RYW8IiyE0.net]
- >>896
jQueryプログラマ「この動きがほしい所に my-componentというクラス名をつけてください」
デザイナ「はいわかりました。昔からあるLightBoxみたいなやつですよね。
aタグに特定の属性をつけるだけで画像のポップアップができて簡単ですよね」
- 927 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:24:33.39 ID:RYW8IiyE0.net]
- >>899
> あなたの最初の主張は完全に理を失いました
意味わからん。逆だろ
お前がjQueryでもコードの中にHTMLを埋め込むしか無い！って
jQueryを貶めようとしたから、それは間違いって言ってるんだが。
俺がいつjQueryの理だといったよｗ
マッピポンプしてるんじゃねーよ
- 928 名前：デフォルトの名無しさん [2019/03/09(土) 12:24:59.58 ID:e9DsS9n/0.net]
- >>891
うわあ。。性格ネジ曲がりすぎだろ。すっごく君のためを考えて言ったんだがなあ。
俺が書いてもvueを何も知らない君がどう評価するの？まさか文字数カウントして終わりか？
君の言ってるのはこういう事。
vueしりませーん、よめませーん。かきませーん。おぼえませーん。でもvueクソだわ！！
通用するわけねーだろ。どあほう。
- 929 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:26:05.91 ID:RYW8IiyE0.net]
- >>902
評価してやるからグダグダ言ってないでかけや
- 930 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:28:51.73 ID:OAlfgW/Ia.net]
- >>895
完全に依存性がなくなったわけではありませんがべったり依存していません
Vue(MVVM)ではViewは明確に定義されたViewModelのインターフェースのみに依存します
ViewModelの実装からは完全に隔離されます
ViewModelのインターフェースがViewとViewModelの疎結合を保証する境界になっています
逆にjQueryではjs側がどのような実装を行っているか厳密に理解していなければViewを定義できません
そ
ViewとLogicを隔てる境界はありません
- 931 名前：デフォルトの名無しさん [2019/03/09(土) 12:31:29.70 ID:e9DsS9n/0.net]
- >>897
いいから無理にvueやreactの知識だすなってｗ。ボロでてるから。
コード埋め込みじゃなくてバインディング。
どうせ何が違うのか分からんだろ？いいから勉強してくれ。
- 932 名前：デフォルトの名無しさん [2019/03/09(土) 12:33:31.50 ID:e9DsS9n/0.net]
- >>903
書けやじゃねーよｗ
俺は答えた。それについて文句があるならまず自分でやるのが当たり前じゃん。
君は社会人じゃないのかね？俺は君のお守りしてるわけじゃないぞ？
- 933 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:36:22.72 ID:flOfKdeWM.net]
- >>900
それのどこがコンポーネントなんだよ
「この動き」と言った瞬間同じDOM構造が思い浮かんで初めて成立する会話
てかこの動きってなに？長々と説明する位ならコード見せた方が早いよね
- 934 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:38:01.89 ID:OAlfgW/Ia.net]
- >>901
Vueでコンポーネントを実装するとhtml/cssとjsが1箇所に記述されるため強い結合が生じるというのがあなたの最初の主張です
ここには暗黙的に1つの前提がありました
html/cssを別のファイルに定義しないという前提です
しかしあなたは続く投稿でその前提を自ら覆しました
あなたはtemplate tagを提示してhtml/cssを別のファイルに記述する手段があるならしてもよいとしてしまいました
前提が崩れたためあなたの最初の主張の理もまた失われたのです
- 935 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 12:38:30.60 ID:izNw5U5za.net]
- >>904
お前ももうそいつを説得しようとかバカなマネするのやめろ
論破と謂われようが勝利宣言されようが我慢しろ
無駄だし邪魔
- 936 名前：デフォルトの名無しさん [2019/03/09(土) 12:44:02.36 ID:e9DsS9n/0.net]
- >>900
あーそうだ、jQuery君に肝心な事聞き忘れてた。
君がmy-componentをコンポーネントと言うなら答えられるはず。
1、そのコンポーネントのインターフェイスは？
2、再利用は？
3、内部をどう隠蔽して部品化する？
これコンポーネントの最低条件だから。本当はもっとある。
一つでも満たさない場合少なくとも仕事でコンポーネントと言ってはだめよ。
まあ保守するのが君一人ならオレオレコンポーネントでもいいんだけど。
- 937 名前：デフォルトの名無しさん [2019/03/09(土) 13:16:35.03 ID:e9DsS9n/0.net]
- >>897
>DOMのクラスやセレクタを使わないでやるなら
>HTMLに直接React用のコードを埋め込むしか無いやんｗ
やっぱりここにjQuery君の根本的な勘違いがあるな。
jQueryってのは基本密結合なんだよ。密結合ってのは、相手を明確に知ってないといけないという事。端的に言えばセレクタが元凶。密結合が好ましくないってことは知ってるよね。
んでさ、また君の不得意なvueですまんけどさ、疎結合ってのはこういう事。
<div v-show="isShow"><div>
script側は変数isShowを切り替えるのみ。
違い分かるかな？スクリプト側からはdomを知らない＆触れてない事。
メリットがとてつもなく大きな事も分かってるはず。いや分かれ。だったらデザイナに教えるなり、君が骨組み作ればいいだけ。。。いやそれができればこんな話になってないかああ。スレも残り少ないのに不毛だぜ。。
- 938 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 13:25:46.15 ID:GVs3bbIF0.net]
- コンポーネントは、HTML/CSS/JS を、1つの .vue ファイルにまとめる。
そして、header 用、footer 用などとして、再利用する。
各コンポーネントには、data-v-aaaaaa などのユニークな属性が付くので、区別できる(Scoped CSS)
さらに、JSX 記法を使うと、JS 関数内に、HTML も書けるから、可読性が高い
new Vue({
el: '#app',
render: function(h) {
return <div>Foo</div>;
},
});
return <div>Foo</div>;
の部分が、以下の関数に変換される。
return h('div', null, 'Foo');
- 939 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 13:28:20.83 ID:RYW8IiyE0.net]
- まだVue側のコードは出てないのか
- 940 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:01:33.87 ID:JGH8xftfM.net]
- コンポーネントを理解できてないってことだよな
- 941 名前：デフォルトの名無しさん [2019/03/09(土) 14:19:02.54 ID:47IMMy0/r.net]
- デザイナー兼プログラマーの俺様なら全て解決する問題だな
jquery使うのはWordPressのみ
Webアプリ系はvueかReactで作る
てかデザイナーとフロント分けたほうが効率いいとかいう輩どもはこれでわかったんじゃねえの
まったく解決できてねえじゃん
むしろ悪化してる
- 942 名前：デフォルトの名無しさん [2019/03/09(土) 14:22:14.84 ID:e9DsS9n/0.net]
- >>913
この機会にvue react覚えればいいのに。
5chの不毛な論争でもそういう気持ちが芽生えれてくれれば無駄じゃない。100%君のプラスになる話だよ。俺は1円も得しないマジでｗ
- 943 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:22:18.32 ID:RYW8IiyE0.net]
- >>915
あれほどVueは密結合になってないといいはっていながら、
最後は密結合にしたほうがいいっていうんだから面白いよなｗ
- 944 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:22:58.79 ID:RYW8IiyE0.net]
- >>916
すでにVueもReactもマスターした上で言ってんだよｗ
VueもReactも密結合になるだけでメンテナンスしづらくなり
コードの量も増えるって。
- 945 名前：デフォルトの名無しさん [2019/03/09(土) 14:35:46.09 ID:e9DsS9n/0.net]
- >>918
ほう昨日はnew Vue()すら知らなかった君が、たった一日でマスターしたのか。しかもreactも。って冗談でも笑えねえぞこら。
あとまあ、、一応聞いとくか、、
> VueもReactも密結合になるだけでメンテナンスしづらくなり
どのへんが密結合なんでしょうvue reactマスターさん？
まだまだ私も勉強中なので参考までに教えてください。
まずは密結合の意味からお願いします。
- 946 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:37:44.00 ID:RYW8IiyE0.net]
- >>919
見た目（デザイン）を変更しようと思った時にJavaScriptのコードを
変更しなければいけないのが密結合です。
- 947 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:39:02.01 ID:RYW8IiyE0.net]
- もう少しわかりやすく言えば、
見た目（デザイン）を変更しようと思った時に、JavaScriptを全く知らない人に
担当させられないのが密結合の証拠です。
- 948 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:46:41.07 ID:aSIxwjYia.net]
- コンポーネントぶち殺すマン
- 949 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:50:50.25 ID:RYW8IiyE0.net]
- >>922
コンポーネントと見た目（デザイン）は別の概念です。
VueやReactを使うとコンポーネントに見た目（デザイン）が蜜に結合してしまって
再利用しづらいコンポーネントになってしまうと自白しているようなもんですね。
同じコンポーネントでも見た目（デザイン）は別のものに変更できるようになってないと
いけません。テーマとかスキンという言葉を使えば理解できますか？
- 950 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:55:21.16 ID:izNw5U5za.net]
- 正直行数が少ない方が正義って思う人はjQuery使ってていいんじゃないかと思うよ
- 951 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 14:57:22.21 ID:RYW8IiyE0.net]
- 行数よりも、HTMLとCSSとJavaScriptが
明確に分離できてるのがjQueryの強みですけどね
- 952 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:16:00.82 ID:RYW8IiyE0.net]
- というかVueの方が行数が長くなると認めたレスなのかｗ
- 953 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:19:43.98 ID:/2BHRI8Ma.net]
- 動的にタグの数が変わるようなものはjqueryでどう書くのでしょうか？
- 954 名前：デフォルトの名無しさん [2019/03/09(土) 15:22:05.65 ID:47IMMy0/r.net]
- ほんとエンジニアって使えねえなあ
行数ごときで争ってるバカどもw
WebアプリなんだからUIUXもシステムで作るんだから右脳左脳両方使って効率よく作り出せよ
デザインセンスゼロだから行数で言い合うしかねえんだろ
お絵描き教室からはじめろ
- 955 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:25:37.25 ID:flOfKdeWM.net]
- >>723の「こんな程度」のUIをJS
知らないデザイナーと>>900みたいな会話で分業して作ってるんなら
色んな意味で尊敬するわ
俺なんて地獄しか見えないもん
- 956 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:33:47.36 ID:/2BHRI8Ma.net]
- 動的にタグの数が変わるものはjqueryでどう書くのでしょうか？
タグをjsに書いたりしないですよね
- 957 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:44:26.89 ID:RYW8IiyE0.net]
- > タグをjsに書いたりしないですよね
当たり前だろ。そんな事したらJavaScriptの中に
タグが埋め込まれてしまってデザインが用意に変更しづらくなるだろ
- 958 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:48:30.46 ID:/2BHRI8Ma.net<
]
- [ここ壊れてます]
- 959 名前：> >>931
それは知っていますよ。どう書くのでしょうか？ [] - [ここ壊れてます]
- 960 名前：デフォルトの名無しさん [2019/03/09(土) 15:55:06.21 ID:e9DsS9n/0.net]
- >>919
まあ予想してたと思うけど、、ちょっと長いよ。２つに分ける。
>見た目（デザイン）を変更しようと思った時にJavaScriptのコードを変更しなければいけないのが密結合です。
違います。
Javascriptのコードと言うからややこしくなるんです。データ駆動という言葉を知っていますか？
例えばform。form全体の状態を保持するjsonAがあるとしましょう。この�
- 961 名前：鼾〟Aformの"見た目"はjsonAの鏡となっていなければなりません。リアクティブは鏡に例えてよく説明されますよね。
で次にjsonA.isActive=trueなら、対応するUIはそれが"どんな要素であれtrueの状態である”という事です。鏡ですからね。
逆に<input type="checkbox" v-model="isActive">をクリックすれば、jsonA.isActiveも自動的に変更され従って他の要素も自動的に反映されます。
データ駆動ではこの様に、直接触れない(疎結合な)鏡の相手に対して、無意識に、自動的に(鏡の様に)反映されます。
でもね、もしかしたら君は今でもこう思ってるでしょう。
v-model="isActive" <<< 密結合じゃねえの？
違うのですよ。domはisActiveが何者か知らないのです。isActiveという名前の何か、なんです。name="isActive"じゃないんですよ。
ただただ自分の状態を反映する鏡の相手を指定しているだけなんです。この違い、わかりますか？
逆に密結合というのは、
<input type="checkbox" name="checkbox">
これです。自分をname=checkboxだと宣言し、それに対してアクセスするよう指示しています。アクセスするのはjQueryそしてセレクタですが。
先程の例で言えば、isActiveを変更したい場合、domのnameを知らないと何もできません。
この状態というか処理系を、密に結合している、というのです。つまりjQueryを使う限り大部分は密結合なんですよ。驚きですね！！
さてこれが本当の意味の、疎結合、密結合です。少なくともWEB業界ではそうです。
それにしてもコンポーネントといい、君は本当に勝手な解釈をしますね。もっと勉強しましょう。 [] - [ここ壊れてます]
- 962 名前：デフォルトの名無しさん [2019/03/09(土) 15:55:34.80 ID:e9DsS9n/0.net]
- >>919
> 見た目（デザイン）を変更しようと思った時に、JavaScriptを全く知らない人に担当させられないのが密結合の証拠です。
もちろん違います。
name="checkbox"がv-model="checkbox"になるだけです。スクリプトの要素はありません。
テキストのバインディグも {{name}} とするだけです。スクリプトの要素はありません。他にもありますが、デザイナが新たに覚える文法は多くないです。
デザイナの教育、指示はむしろエンジニアの腕の見せ所ですよ。負担となるかは大部分が君次第。フレームワークだけのせいにしないように。
詳しくはvue公式を読みましょう。とてもわかり易くておすすめです。
>>923
ところで、君はコンポーネントの質問に答えてないですよね？
君の示したコンポーネント、<div class="my-component">のインターフェイス、再利用、隠蔽について答えてください。
言ってる意味さえ分からないかもしれませんが。。それなら質問しましょうね。
- 963 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:57:33.29 ID:RYW8IiyE0.net]
- >>932
https://jsfiddle.net/v34njaes/
- 964 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 15:58:48.05 ID:RYW8IiyE0.net]
- >>933
見当違いすぎてワロタｗ
HTML/CSSの世界に、Reactのものが含まれてるから
密結合だって言ってんだろ
- 965 名前：デフォルトの名無しさん [2019/03/09(土) 16:02:36.25 ID:e9DsS9n/0.net]
- >>936
>HTML/CSSの世界に、Reactのものが含まれてるから、密結合だって言ってんだろ。
だからそれは密結合じゃないの。君の変な定義はどうでもよろしい。
相変わらず間違いを認めないヤツだなあ。。ググってみなよ。すぐ分かる事からさ。
- 966 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:03:36.34 ID:RYW8IiyE0.net]
- >>934
> 君の示したコンポーネント、<div class="my-component">のインターフェイス、再利用、隠蔽について答えてください。
インターフェース？ 何が聞きたいのかわからんが、
my-componentの中に特定のイベントを送る。my-componentの中ではそのイベントに反応する。
インターフェースはイベントによって疎結合な状態で作ることが可能。それだけだろ。
再利用？ >>838でも書いてるだろ。以下のどんなDOMの構造であっても、
jQueryのコードは再利用できてる
<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>
何から何を隠蔽するしたいのかわからん。jQueryのコードは状態を持ってないので
隠蔽するものはなにもない。無名関数使ってるので関数名すら隠蔽された状態だし
単にクラス名がかぶらないようにしたいってだけならプリフィックスでもつければおしまい
- 967 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:04:07.64 ID:RYW8IiyE0.net]
- >>937
ぐぐったけど、間違いないですねｗ
- 968 名前：デフォルトの名無しさん [2019/03/09(土) 16:05:45.02 ID:e9DsS9n/0.net]
- >>936
んでさ、vue reactマスターの君はコンポーネントが全くわかってない。何も質問に何も答えられない。どうなのよマスターさん。
いろんな意味で恥ずかしいと思わんの？よくそんな妙な知識で仕事できるなあ。
同僚とか上司とかいたら注意されない？まあいれば、だけどさ。
- 969 名前：デフォルトの名無しさん [2019/03/09(土) 16:06:58.43 ID:e9DsS9n/0.net]
- >>939
はい、ソースだしなさいねー。嘘ついてもすぐわかりますよー。
- 970 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:08:25.60 ID:RYW8IiyE0.net]
- どうやら>>938には反論できないから
レスするのすっ飛ばしたようだなｗ
- 971 名前：デフォルトの名無しさん [2019/03/09(土) 16:14:51.37 ID:e9DsS9n/0.net]
- >>938
やっと書いたか。本当に待ちくたびれたわい。
>インターフェース？ 何が聞きたいのかわからんが、
どあほ。。。まじで言ってる？？コンポーネントのインターフェイスが分からん？
よく堂々と白状できるな。。俺なら到底言えないわ。
あとさ、君のコードは再利用できてない。
それは単に、コ ピ ペ と言うの。
>何から何を隠蔽するしたいのかわからん。jQueryのコードは状態を持ってないので隠蔽するものはなにもない
もう、、、、なにを言っていいのやら。
あのね、例えばさ、外部からさ、直接 $("div.my-component input")とか、コンポーネント内部にダイレクトにアクセスできちゃ駄目なのよ。
これってコンポーネントの最低条件なんだけど、、君はどうやって勉強したんだ。
いいからこれもググってみなよ。。。うーん、だれか突っ込んであげてください。私はもう疲れました。
- 972 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:16:33.74 ID:RYW8IiyE0.net]
- >>943
> どあほ。。。まじで言ってる？？コンポーネントのインターフェイスが分からん？
じゃあ、VueからReactのコンポーネントのインターフェース書いてみろよｗ
- 973 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:17:00.95 ID:RYW8IiyE0.net]
- >>943
> あのね、例えばさ、外部からさ、直接 $("div.my-component input")とか、コンポーネント内部にダイレクトにアクセスできちゃ駄目なのよ。
VueやReactでもダイレクトにアクセスできますが？
- 974 名前：デフォルトの名無しさん [2019/03/09(土) 16:19:28.37 ID:e9DsS9n/0.net]
- >>945
おいおいおいおいー、どこがvueマスターなの？
直接アクセスできません。インターフェイスを介してアクセスします。
わかった？OK?
- 975 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:21:26.12 ID:RYW8IiyE0.net]
- はい、Vueでコンポーネント内部にダイレクトにアクセスできちゃいましたｗ
https://codepen.io/anon/pen/ywXVOW
- 976 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:24:13.68 ID:RYW8IiyE0.net]
- 確か上の方で、scopedを使えば、こういうCSSからコンポーネントを
守ることができる。コンポーネントは影響を受けないってのたまわっていたね？
やってみて
div { //CSS ダイレクトアクセス
background-color: red;
}
- 977 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:26:40.96 ID:zxiwPMOw0.net]
- さすがに呆れたというかコメントできない…
- 978 名前：デフォルトの名無しさん [2019/03/09(土) 16:27:02.65 ID:e9DsS9n/0.net]
- >>947
笑いが止まらんぞおいっっっw
今日一番だわ！！！
本当に君には驚かされるな！！！
どこまで発想がjQueryなのよ。そりゃvueと共存できるよ。注意すればね。
いやすまん、ニヤニヤが止まらんから後でちゃんと返事する。
- 979 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:33:17.69 ID:RYW8IiyE0.net]
- 結局Vueのコンポーネントは隠蔽化されてるとか言うのは
技術的にそうなってるんじゃなくて、単にフレームワークの決まりとして
外部から触らないようにしましょうと文書で書かれているだけ
それを言ったら、jQueryでは情報のやり取りには
（カスタム）イベントを使用しましょう。コンポーネントの担当者以外が
直接内部をいじってはいけません。と文書でかけば終わるわけだよ。
- 980 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 16:42:10.68 ID:RYW8IiyE0.net]
- 少し訂正
それを言ったら、jQueryでは "コンポーネント間" の情報のやり取りには
（カスタム）イベントを使用しましょう。コンポーネントの担当者以外が
- 981 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 17:55:48.33 ID:GVs3bbIF0.net]
- header.vue 内の、header コンポーネントには、そのコンポーネントだけに適用される、HTML/CSS/JS を含み、
ユニークな属性、data-v-aaaaaa が付いている
footer.vue 内の、footer コンポーネントには、そのコンポーネントだけに適用される、HTML/CSS/JS を含み、
ユニークな属性、data-v-bbbbbb が付いている
各コンポーネントには、ユニークな属性が付いているため、お互いに影響を与えることはない(Scoped CSS)
各コンポーネントは疎結合！
従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、
3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした！
- 982 名前：デフォルトの名無しさん [2019/03/09(土) 17:57:51.41 ID:e9DsS9n/0.net]
- >>952
いやすまん、ちょっと笑いすぎた。失礼しました。
ってー君もめげないなあ。。。その不屈の精神があればvue reactなんてすぐ習得できると思うぞ本当に。
>結局Vueのコンポーネントは隠蔽化されてるとか言うのは技術的にそうなってるんじゃなくて、単にフレームワークの決まりとして外部から触らないようにしましょうと文書で書かれているだけ
文章で書かれてるだけｗｗ、全然ちがうし、大体そんな事書かれてないし！
vueはフレームワークなの。jQueryと違うの。vue使ってる限りはきちんとコンポーネント化できてるよ。もし直接アクセスできたらバグだよ。
>それを言ったら、jQueryでは "コンポーネント間" の情報のやり取りには（カスタム）イベントを使用しましょう。 コンポーネントの担当者以外が直接内部をいじってはいけません。と文書でかけば終わるわけだよ。
はい気をつけまーす。でも人間は間違えるし忘れるよねぇ。うっかりアクセスする事も十分あり得るよね。
ただうっかりdocument.getElementsByClassNameなんて発行しないよなあ。そもそもdocument自体使わんし。どんなミスだそれ。
認めようよ。君のコンポーネントは不十分というか君の理解不足とスキル不足だよ。そしてvueは基準を満たす。
流石にこれは擁護できんし見逃せんわ。認めるまで議論は進まない。まあどうせスレも終わるし最後にありがとう、面白かった。
- 983 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:00:05.54 ID:RYW8IiyE0.net]
- >>953
> 従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、
> 3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした！
とりあえずお前はブラウザの開発者ツールを使えるようになろう。
あとはgrepも便利だぞ
そしたら今度はコンポーネントごとにグループ分けしてディレクトリ管理して
webpackやsassも使えるようになろう
- 984 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:00:22.08 ID:RYW8IiyE0.net]
- > ってー君もめげないなあ。。。その不屈の精神があればvue reactなんてすぐ習得できると思うぞ本当に。
だから習得してるってｗ
- 985 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:00:41.76 ID:RYW8IiyE0.net]
- > vueはフレームワークなの。jQueryと違うの。vue使ってる限りはきちんとコンポーネント化できてるよ。もし直接アクセスできたらバグだよ。
はい、Vueでコンポーネント内部にダイレクトにアクセスできちゃいましたｗ
https://codepen.io/anon/pen/ywXVOW
- 986 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:01:53.35 ID:RYW8IiyE0.net]
- >>953
> 各コンポーネントには、ユニークな属性が付いているため、お互いに影響を与えることはない(Scoped CSS)
だからユニークな属性をつければいいと思いますよ？
- 987 名前：953 mailto:sage [2019/03/09(土) 18:05:06.61 ID:GVs3bbIF0.net]
- 従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、
3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした！
これが密結合！
どこかを修正すると、別のどこかがおかしくなるため、無限に修正を繰り返すことになる！
今までの日本車のすり合わせ技術と同じ。
どこかを修正すると、別のどこかがおかしくなるため、外人よりも日本人に有利だった
これを部品ごとに疎結合にすることで、ある部品の修正が、他の部品に影響を与えないため、
すり合わせ技術がなくなり、外人でも同じ車が作れるようになった
すり合わせがあると、単独で部品が作れない・単独で働けないから、
常に全員が相談・残業して働く、日本人が有利だった
- 988 名前：デフォルトの名無しさん [2019/03/09(土) 18:09:10.56 ID:e9DsS9n/0.net]
- >>957
もういい。休んでいいんだ。十分スレを楽ませてもらった。
君がいいと言うならいい。常識破りのまま、そのまま突っ走ってくれ。
- 989 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:10:12.37 ID:RYW8IiyE0.net]
- 次スレ立てました
Vue vs React vs Angular その2
https://mevius.5ch.net/test/read.cgi/tech/1552122580/
- 990 名前：953 mailto:sage [2019/03/09(土) 18:17:05.53 ID:GVs3bbIF0.net]
- すり合わせは、金メダルのスピードスケート女子パシュートもそう。
常に全員が相談・残業して練習する、日本人が有利
外人は思想・人種・性格もバラバラで、長時間一緒に居れない
しかも草食動物の日本人とは違い、外人は肉食動物で自己主張が強いから、
異なる思想・人種・性格の奴とは、殴り合いのケンカになる！
外人は、日本人みたいに従順で、すぐに従ったりしないから
- 991 名前：953 mailto:sage [2019/03/09(土) 18:26:31.50 ID:GVs3bbIF0.net]
- >>958
>だからユニークな属性をつければいいと思いますよ？
従来のやり方では、無理
属性を付けても、それを訂正してはずす時には、
また、3 * 4 * 5 = 60通りの中から、正しいかどうかを確かめないといけないから、時間が掛かりすぎる
密結合・すり合わせは、どこかを修正すると、別のどこかがおかしくなるため、
無限に修正を繰り返すことになる
だから、部品やプログラミングは、疎結合でないとダメ！
- 992 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:32:31.91 ID:RYW8IiyE0.net]
- >>963
その計算になんの根拠もねーわｗ
コンポーネント毎にCSS定義してるから
何を探すと言ってるのかさっぱりわからない。
.my-compnent {
[name="switch"] { }
sonota-1 { }
sonota-2 { }
}
JavaScriptファイルも my-compnent に関するものは
my-compnent.js に全部収められているし、
あ、なるほど、jQueryがだめと言ってる根拠は
自分がまともな管理できてないからだってことかｗ
- 993 名前：953 mailto:sage [2019/03/09(土) 18:35:08.58 ID:GVs3bbIF0.net]
- 従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、
3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした！
さらに、これの悪い所は、3 + 4 + 5 = 12 の足し算じゃなく、掛け算になるのが最悪！
考えることが加速度的に増える
ここを修正したら、別の場所がおかしくなりましたとか、こればっかりやってる。
延々と、適用される組み合わせを探してる！
- 994 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:36:52.78 ID:RYW8IiyE0.net]
- 根拠言えないから、必死に嘘を言いまくるのねｗ
どっかの国の人と行動がおなじになってるよｗ
- 995 名前：953 mailto:sage [2019/03/09(土) 18:46:21.76 ID:GVs3bbIF0.net]
- 自分で属性を付けても、またそれを修正したり、訂正してはずす時には、
また、3 * 4 * 5 = 60通りの中から、正しいかどうかを確かめないといけないから、時間が掛かりすぎる
だから、各コンポーネントを別々のファイルに書くだけで、
ユニークな属性を自動的に付けてくれる、フレームワークが良い
- 996 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 18:51:07.24 ID:pp+gnfPcM.net]
- >>961
荒らし行為
問答無用で出て行け
- 997 名前：デフォルトの名無しさん [2019/03/09(土) 18:55:36.80 ID:e9DsS9n/0.net]
- >>961
そんなに悔しかったの？次スレってwほんと滲み出てるw
まあ頑張れよ自称vueマスターさんw。ほらテンプレに書かなきゃ。vueでdocument直接いじっちゃダメよー。逸材。
- 998 名前：デフォルトの名無しさん [2019/03/09(土) 18:56:19.05 ID:jSVYUNoJp.net]
- jQueryおじさんネトウヨだったのかw
年齢も高そうだしな...
- 999 名前：デフォルトの名無しさん [2019/03/09(土) 19:30:08.07 ID:e9DsS9n/0.net]
- jQuery君なあ。。ここまでの逸材なら色々拗らせた年齢不詳の40代かなあ。
つーか、ここまで vue react嫌うって何があったんだろ。そのくせ自称vue reactマスターなんだぜw。何その劣等感。しかもマスターならvueでもdom直接いじれるんだぜ。それでコンポーネントの垣根も超えられるって自慢するんだぜ。でも文書化で禁止すればokなんだぜ。
これで納得できるのが本当凄え。
- 1000 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 19:42:14.57 ID:fCQTKW9ua.net]
- jQueryおじさん、スレチなんで次スレは来ないでね
- 1001 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 19:46:22.67 ID:C6v7oEvsM.net]
- >>961
これ通報じゃね？
- 1002 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 19:52:05.13 ID:izNw5U5za.net]
- ReactはReactNativeとセットにして一スレ立ててもいいんじゃない？
- 1003 名前：デフォルトの名無しさん [2019/03/09(土) 20:20:05.00 ID:47IMMy0/r.net]
- 密結合だろうが疎結合だろうが俺の場合は右脳と左脳が同時に判断すらから何も問題がない
本当のフルスタックとはそういうものだ
しかし左脳しか機能していないお前らは、理解不能で恐ろしい存在であるデザインのためにくだらない争いをしているわけだ
レベルが低すぎてアプリ開発なんか無理だろ
- 1004 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 20:20:35.21 ID:GVs3bbIF0.net]
- テンプレを勝手に改変する、いつもの荒らしだろ
テンプレに、Ruby 禁止とか、jQuery・Lodash 禁止とか、
自分がわからない技術を禁止して、色々なスレを立てている奴
あちこちに、死ねとか書き込んでいる奴だろ
- 1005 名前：デフォルトの名無しさん [2019/03/09(土) 20:36:11.59 ID:e9DsS9n/0.net]
- jQuery君は最後っ屁していったのか。次から色々スルーするわ。
- 1006 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 20:37:03.42 ID:OAlfgW/Ia.net]
- >>975
疎結合のほうが理解しやすいことは確かですが理解のしやすさためだけに疎結合を目指すわけではありません
疎結合なシステムは個々のモジュールを独立にメンテナンス可能であるという点が最も重要なのです
- 1007 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 20:53:08.50 ID:RYW8IiyE0.net]
- 例えば、HTML、CSS、JavaScript。
個々のモジュールが独立してメンテナンス可能であるということです。
- 1008 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 20:59:34.50 ID:RYW8IiyE0.net]
- 例えばデザインですが、同じ機能を持ったコンポーネントでも
別のアプリだと違うデザインにしますよね？
そういった時にデザインのみ独立してメンテナンスします。
- 1009 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 2
]
- [ここ壊れてます]
- 1010 名前：1:01:14.05 ID:RYW8IiyE0.net mailto: 見た目をちょっと変えるだけで、別のコンポーネントとして
管理するのは馬鹿げているわけです。 [] - [ここ壊れてます]
- 1011 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:07:26.91 ID:izNw5U5za.net]
- 渡すpropsで切り替えればいいんじゃない？
- 1012 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:08:16.18 ID:RYW8IiyE0.net]
- 時代はこの先Web Componentsの時代になり、
高度なコンポーネントが増えますが、
再利用可能であるということは、別のデザインを持ったサイトでも
使えるコンポーネントでなければなりません。
機能はコンポーネントに閉じてよいですが、
デザインはコンポーネントに閉じてはだめなのです。
デザインはサイト全体で横断的に適用するものなのですから
- 1013 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:09:18.57 ID:Uscl0PAlM.net]
- 荒らしは出て行け
- 1014 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:10:57.82 ID:izNw5U5za.net]
- >>975
React専用スレ立ててよ
- 1015 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:11:12.56 ID:RYW8IiyE0.net]
- >>985
了解
- 1016 名前：デフォルトの名無しさん [2019/03/09(土) 21:14:19.58 ID:47IMMy0/r.net]
- >>978
そういうこと言ってんじゃねえよ
- 1017 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:16:41.18 ID:izNw5U5za.net]
- >>925
どうせならここじゃなくてQiitaで「jQueryの方がVueよりも優れてる理由」とかいう記事かけば誰かがお望みの回答をしてくれるんじゃないかと思うんだけどね
- 1018 名前：デフォルトの名無しさん [2019/03/09(土) 21:20:38.74 ID:jx9iLAiD0.net]
- > Javascript はweb制作管理板、CGI はWEBプログラミング板へ。
- 1019 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:22:22.46 ID:izNw5U5za.net]
- >>989
正直過疎板立てても仕方ないよ経験上
- 1020 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:23:34.06 ID:nmSMFs2da.net]
- Qiitaとかスレチとか、お前ら、jQueryおじさんが周りの言うこと聞くわけないだろ
エホバみたいなもんやぞ
- 1021 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:30:52.53 ID:AJ6jPa0v0.net]
- >>985
立てたぞ。>>974がセットにしてって言ってたからセットにした
React と React Native のスレ
https://mevius.5ch.net/test/read.cgi/tech/1552134567/
- 1022 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:49:36.92 ID:7ubvtRZR0.net]
- >>988
書くならもっと別物にするな
メンテナンスしやすいコーディングスタイルとか
jQueryがだめに見られてるのは、DOM要素を追加したり消したりすることであって
クラス属性を書き換えるなどして、DOM要素にかんしてはCSSで制御するようにすれば
メンテナンス性が高いことは明らかだからね
- 1023 名前：デフォルトの名無しさん [2019/03/09(土) 22:03:28.92 ID:47IMMy0/r.net]
- Vue vs React vs Angular Part.2
mevius.5ch.net/test/read.cgi/tech/1552136553/
本スレPart2建てた
こっちはjQueryの話禁止にした
- 1024 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 22:05:43.66 ID:KVQbeC9/0.net]
- >>994
乙
- 1025 名前：デフォルトの名無しさん [2019/03/10(日) 09:10:34.18 ID:q7odbdCi0.net]
- jQueryは悪くない。ただスレチ。
次スレが有意義でありますように。
- 1026 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 09:50:49.25 ID:5/+zyaBC0.net]
- >>976
死ね
- 1027 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 10:51:49.09 ID:KLmR+9gsM.net]
- 結局主張のごり押しなだけで時間とスレの無駄だったな
- 1028 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 10:55:35.81 ID:9XIrDo2La.net]
- 5chではいつもの光景
- 1029 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 10:59:45.81 ID:5/+zyaBC0.net]
- 次スレ
Vue vs React vs Angular Part.2
mevius.5ch.net/test/read.cgi/tech/1552136553/
- 1030 名前：1001 [Over 1000 Thread.net]
- このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 78日 13時間 22分 9秒
- 1031 名前：過去ログ ★ [[過去ログ]]
- ■ このスレッドは過去ログ倉庫に格納されています
|
 |
