◎正当な理由による書き込みの削除について: 生島英之 とみられる方へ:Vue vs React vs Angular YouTube動画>1本 ->画像>8枚
動画、画像抽出 ||
この掲示板へ
類似スレ
掲示板一覧 人気スレ 動画人気順
このスレへの固定リンク: http://5chb.net/r/tech/1545395856/ ヒント: 5chスレのurlに http ://xxxx.5chb .net/xxxx のようにb を入れるだけでここでスレ保存、閲覧できます。
実際どうなん?
Vue
https://jp.vuejs.org/ React
https://reactjs.org/ Angular
https://angular.io/ VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured
使いやすさのVue 先進性のReact 引くに引けない人とIonic派だけが使うAngular
Reactってそんなに先進的かねぇ 考え方的にはVueの単一ファイルコンポーネントと同じようなものだと思うけど
vueとかネットで騒がれてる わりには、文法が難しくて取っ掛かりに 時間がかかるんだが!!!個人でVSコードの デバッグやwebpackの 設定をやるとなると、手間が掛かりすぎるのも原因の 一つかな。色々とファイルを配置するのに、時間とpcのスペックを 費やすから手軽さにかける。 simple & bestの虎の巻きでもあればいいけど 個人がこの言語を公にすればいいのに、趣味や趣向が入りすぎて 「誰も特しない言語」になってる
>>5 翻訳すると、「わたしバカですー」ってことか
Laravelで使うかLaravel-Mixを移植して使うのがベターだと思う
Nuxtのおベンベン始めたけど、メンドクサー PHPのゴミのようなフレームワークと一緒で、学習コストかかりすぎ Reactはどうなん? Vueやめよっかなー
2018年 は 脱React の年だった。 オワコン React
http://2chb.net/r/hp/1545879649/ >>9 nuxtはreactとangularに比べるとシンプルで分かりやすいほうだぞ
これダメなら他やってもダメだろな
vue自体を学ぶのは、Vue CLI 3でプロジェクトを作成した状態から始めちゃうほうが、コンポーネントとか理解しやすいなと思った。
Reactってなれないうちは一番面倒くさいんじゃないかと思うよ vueならv-modelでできる簡易な事も結構大掛かりだし
そのVueよりも普通にHTML書いたほうが早いってなw <span>Hello HTML</span> ほらなw
SSRと思いついた時点で、シングルページじゃなかったことに気付いてほしかった。
ここでは Vue.js 対 JQuery の議論は御法度?
SPAってかっこいい単語だけど昔からはびこってるものと何ら変わらんのだよな ASPやJSPやPHPでJSなりCSSなりイメージなり使わなければSPAなんだし
基礎から学ぶ Vue.js、mio、2018/5/29
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発、
花谷 拓磨、2018/10/17
Node.js超入門、掌田津耶乃、2017
Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017
入門 React ――コンポーネントベースのWebフロントエンド開発、2015
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook 初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017
いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック/クジラ飛行机 Reactの本として見るとReduxとか不足してて微妙だけどNode.jsとかWebpackの本としてはそこそこ良かったと思う React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)/穴井宏幸、石井直矢、柴田 和祈、三宮 肇 Reduxに関してはこれが一番詳しく載ってたかな
Nuxt.jsビギナーズガイド これ半分くらい読んだけど、PHPのフレームワークが 次々出てきてはゴミになってるけど、同じ道を辿るだけだと思ったよ 実際のサイト制作は規約でガチガチだとソースがカオスになって重くなるだけ
Vue.js, Nuxt.js, React, Electron, Android アプリなどの、 ライフサイクルメソッドは、どのアプリでも普遍的 これを時間的に進む方向を、一方向だけに限定したルールは、使いやすい Rails と同じ。 全員が同じ規約に従った方が、作りやすいし、わかりやすい 異なったやり方・各個人独自のやり方は、わかりにくい
jsはフレームワークがどれだけ出てきても フレームワークの介入の無いほうが汎用的に作れるようになるよ パフォーマンスという観点だとその辺に溢れかえってるフレームワークはゴミにしかならんし
>>25 結局便利で手軽で簡単な jQuery に回帰するという事なのかな。
jQueryもフレームワークだし やれることはwebに動きつけるぐらいじゃん
いやフレームワークではないだろ… 色々余計な機能付いてるが(そして最近は減らしていっているが)自称の通りDOM操作ライブラリだろ良くも悪くも。 怪力でノンサポートのハンドル自力で切っといてこれがパワーステアリングだ!と言ってるようなもん
>>30 jQueryはJavaScriptのフレームワークだよ
コーディングスタイルを縛るもんじゃないからどちらかと言えばクラスライブラリじゃない? その点で行くと.NETもフレームワークと言うよりはクラスライブラリに近いけど
>>32 いや、.NETはランタイムも含んでるから
>>31 フレームワークっていうのは呼び出し側のことなので
jQueryはフレームワークに当たらない
あえて言うならブラウザそのものがフレームワーク
ブラウザがイベントを発行し、jQueryはその中を書くだけ
>>34 呼び出し方を同じ言語で簡素化してるのがフレームワークなのだからjQueryは間違いなくフレームワークだなw
誰も簡素化の有無を焦点にしてないんだが? 全てのライブラリは簡素化するものです。 簡素化だけを条件にしてしまったら ライブラリ全てがフレームワークってことになってしまう フレームワークは利用者が何も書くことなく、 このような形で呼び出されるから、こういうものを用意しなさいと 決まってしまうもの。 jQueryはそんなものは決めないので、フレームワークにはならない
ここはjQueryスレじゃねえんだから出ていけ!!!!!
>>37 お前の言葉そのまんまだと
フレームワークは呼び出し側のことなのでjQueryはフレームワークに当たる
VueやreactやAngularも同じ
> フレームワークは呼び出し側のことなのでjQueryはフレームワークに当たる え?jQueryの何処が呼び出し側に見えるの? フレームワークは呼び出し側のことというならば、 その根拠があるはずだよね。言ってみて
理由は言えないけど、やばいって言っておけば 勝てるだろう。やばいやばいやばい。どやぁ。 > 声闘(ソント)とは朝鮮人の古くからの風習で声の大きさで相手の言論を封じること。 > 人と議論をするとき、議論の内容は関係なく、ただ大声で早口で居丈高に話し、 > 相手が何も言い返せなくなれば勝ち、というしきたり。 みたいなことは止めてねw
http://jquery.com/ > What is jQuery?
> jQuery is a fast, small, and feature-rich JavaScript library.
公式サイトで、ライブラリって書かれてるのに
それを覆えそうとする勇気に敬服する(皮肉)
>>36 呼び出し方を同じ言語で簡素化してるのがライブラリなのだからjQueryは間違いなくライブラリだなw
オブジェクトモデルでいうなら フレームワーク→ベースとなるクラスを継承してメソッドをオーバーライドするスタイル クラスライブラリ→自作のクラスのメンバーなどにライブラリのクラスを導入していくスタイル
あと勘違いしないで欲しいのは別にフレームワークだから凄いとかフレームワークじゃないからヘボいとかそういうわけではないということ
だからなんでこのスレでjQueryの話してんだよボケ!!!! テメーらクズどもは巣に帰れ!!!!!
>>48 jQueryもフレームワークだって言ってる人がいる
ここで話しても良いのでは?(皮肉)
一部の部品として容易に組み込めるのだから公式が言っている通りライブラリだろう 導入のしやすさ、構成への制限の少なさはフレームワークよりライブラリの方が優れている
htmlフレンドリーなMVCフレームワーク(spring, asp.net, etc...) + vue(static js) この組み合わせが最も簡単で理解しやすくトラブルも少なかった node+npmを使ってビルドまでやると対応できる作業者が急激に減る
npm対応できない業者ってどんだけ低レベルなんだよ
WordPressしかやらないところとかじゃない?
>>53 業務系の派遣さんはほぼ全滅
node知らない人も少なくない
業務系の派遣がnode使うわけないじゃん javaパーだろ
npmでインストールする類のcliは中々いい本ないもんね 市販されてる本だと大体型落ちだったりするし webpackとかbabelとか だからといって旧世代のバージョンに合わせてからやるんじゃ折角新しい技術を覚えようという目的に本末転倒になってしまう 結局わりと頼りになるのがQiitaっていうオチ まぁQiitaに固着し過ぎるとQiita以外なら簡単に見つかるものを見落とすって事もあるけど
モダンなツールなら英語の公式ドキュメント読めばOK 昔と比較して本にかける金が激減してありがたい
>>56 nodeとnpmを覚えるとすごく楽になるのにな
git使ってると余計にね
>>58 公式とgithubのissue見る
キータも古いのが多いからいつの間に非推奨になってるライブラリもけっこうある
そういやgithubもたまに入ってるexampleがちゃんと動かないヤツとかあるよね
「2018年最新のReact構築法」みたいなの参考にしてみたが内容がすでに古いのと書き方間違ってたり 公式が変わったのにそれに対応されていなかったりってのが多かった ライブラリ使う場合は公式だけでは足りないから、ライブラリの公式みたり とにかくどこか一つにまとまってるのはない あるのは俺のPC内だけ笑
正攻法に関しては確かにGithubなんだろうだけどビルド時とかに依存関係で謎のエラーが出た場合とかね
>>58 npmに本なんか要らないだろ
ガイジかよ
>>65 だからnpm自体じゃなくてそれ経由でインストールするwebpackとかbabelとかって書いてるじゃん
>>66 それも要らんだろ
npmで自作パッケージをインストールできるようにするにも本なんか要らない
初級エンジニア程度のレベルなら誰でも簡単に使える
mavenやgradleに本なんか居るか?
それと同じだわ
フロントエンドは特に変化も早めだしネット上で情報漁れんとな というか本よりまず公式のドキュメント読めよって思う
あと自分ができるできないの話じゃなくて
>>53 ,55,56
の状況に対しての話ね
だから結局フロントエンドフレームは多数はにはならずjQueryはフレームワークだって言い張る輩も居なくならないって話
公式のドキュメント読んだってわからないこといっぱいあるよ
>>70 公式ドキュメントってリファレンスも兼ねてるのにそれで理解できないって逆にヤバい
エンジニアとしてよりも人間としてな
フロントエンドのwebpackの設定なんか、ケースバイケースで、 プラグインの組み合わせとかいろいろあるわけだし、 人それぞれなものを公式サイトが書いてあるわけないじゃん
上に話のようにインストールやら基本なら まず公式、エラーや組み合わせ等なら他を漁ればいい 漁っても無いものはリファレンス見て自分で書くことになると思うが
公式見ればいいだけなのに公式すら見ずに文句言う奴らはなんなんだ?
公式見ればいいだけなんて言ってるやつこそが公式を全然読んでないやつだと思う
誰もまともに本書かないから、未だにnpm install --saveとか書いてるやついるし 時代遅れの情報がいつまでも残っちゃってる
>>78 でYouは具体的に何を使っててどれくらいのものが作れるのさ?
>>80 基本的にReact使ってるサイト
state管理にreduxは使ってる
その他axiosとかルーティング管理用のライブラリとか
そもそも必要であればライブラリはなんでも使えるけど
どのくらいのものが作れるかって、仕様と時間と金があればなんでも作る
今はtypescriptが当たり前になってきているから、typescriptを絡めることで本を作りやすそうなのになあ
typescript推しはIE信奉者でMS狂信者しかいないと思ってる
で?キミらはどのくらいのことができてどのくらいのものが作れるの?
>>85 angularはjavascriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークなんだよな
はは、結局お前らフレームワークに振り回されてるだけじゃん jQueryの過去の資産を大事にする方針を 見習ったほうが良いぞ
スルーするな キミらはどのくらいのことができてどのくらいのものが作れるの?
>>92 ああスマンスマン
バックにLaravel置いてVue(Vuex、vue-router、axios、Bootstrap-Vue)とReact(Redux、react-router、SuperAgent、React-Bootstrap)入れた二種類のセット
それぞれ一通り機能確認するデモサイトをローカルに作ってみたって程度だよ実戦投入するのはこれから
あとNuxtとAngularはcliからプロジェクト生成してどこに何を書いて機能追加していけばいいか分かったって程度
Angularとかはコンポーネントの数多すぎて細かいところは全然
フロントエンドフレームワーク去年の後半から始めたばかりだから流石にまだまだ
>>81 みたいなんでもできるとは言わないよ
公式って結構公平だからサード製のモジュールに関してはこれ使えみたいな事あんま言わないじゃん
その辺に関してはやっぱ新ジャンルに手を出すなら書籍1〜2冊読んだ方が効率いいと思うんだよね
>>89 jQueryを使い続けるとしても設計指針としては参考になる事柄は相当あったと思うよ
何もやらなきゃいずれは時代遅れな挙動のサイトしか作れないって事になる
せめてHTML5のAPI集くらはちゃんと読んでおいた方がいいと思うよ
>>93 React-Bootstrapってv3だよ?
今さら使う意味なくね?
そしてReactstrapはまだまだ開発中
俺としてはBootstrap Nativeをオススメするなあ
自分でコンポーネント作ることにはなるけど、むしろ使う部分だけコンポーネントにするから余計なstateないしスッキリ
>>95 npm install react-bootstrap@next bootstrap
@nextって付ければv4でいけるけど
https://react-bootstrap.netlify.com/getting-started/introduction ありがとうBootstrap Nativeはちょっと調べてみるよ
ところでReduxとreact-router連携するのって何使うのがベターなの?
パっと調べた範囲で
react-router-redux
redux-first-router
connected-react-router
くらいがあるけど選定するための基準がなんとも
Bootstrap Nativeってパッケージはなかったけど
これの事?
↓
Native JavaScript for Bootstrap
ReactNativeのNativeじゃなてNativeなJavaScriptって意味のNativeか
>>97 V4はV4で何かと機能増えてていいもんだよ
>>96 v4はまだ開発中だしね…
あとrouterはconnected-react-routerがいい
react-router-reduxは非推奨になったから
https://github.com/reactjs/react-router-redux >Project Deprecated
書籍ではreact-router-reduxを推してるから注意だね
>>98 そうNative JavaScript for Bootstrapのこと
どのコンポーネントライブラリも中途半端で開発中だしissueみたらバグ多いからまだ使うべきではないと思う
npmのバージョンアップにより yarnのメリットはなくなったんじゃないの?
とりあえず npm, react, babel あたり使って開発してみたらいいんじゃないかね。 それらの使い方やドキュメントの漁り方になれれば他に移るのもやりやすいでしょ。
Ionic+Angler使い続けてるけど そろそろ乗り換えるべきか悩みますね
乗り換えに理由がない時点で何使っても駄目なんじゃね?
>>106 釣られたな
Anglerだけに
なんちって
vueはマジで独学は難しい。 あたかもjQueryより手軽で簡単みたいな事を謡い文句に なってるけど絶対そんなことないと思うわ。アルゴリズムと データ構造をカジッてないと 細々とした機能が何のためにあるのか、どうやって 道具として使われるのかが判らん。多分これはReactやAngularでも いえることなんだろうけど。
宣言型のjQueryとは考え方が違うからね。 CSSも宣言型なので、宣言型ベースで考えてると オブジェクト指向のvueが使いにくく感じるのは当然
>>108 まぁjQueryの様には行かないわな
他のフレームワークよりも導入しやすい点を挙げるとするなら
制御対象のDOMを<div id="app">〜</div>で囲めば元のhtmlを活かしたまま使えるって事くらい
ReactやAngularの場合はイニシャル掛けた時点でその内側のDOMはフレームワークに定義したルートコンポーネントに差し替わってしまうからね
∩___∩ | | ノ\ ヽ | / ●゛ ● | | | ∪ ( _●_) ミ j 彡、 |∪| | J / ∩ノ ⊃ ヽ ( \ / _ノ | | .\ “ /__| | \ /___ / オブジェクト指向?
Vueをオブジェクト指向だって言うのは別におかしくないよ
vueが難しいならこれからウェブアプリの標準的な実装方法になるReactはもっと難しいことになる しかもjQueryより楽と言われているから脳みその思考の仕方が違うんじゃねえの
思考の仕方が違うってのはあると思う 手続き型でめちゃくちゃ複雑なスパゲティプログラムを間違いなく書けるほど高度な情報処理能力を持ってるのにオブジェクト指向、関数型、宣言的プログラムはからっきしダメという人 逆にそれらを使いこなして洗練されたコードをかけるけど、手続き型のスパゲティプログラムを処理しきれない人 どっちが賢いとかではなく たぶん脳の基本構造が違うのだと思う
フレームワークだとDOM APIと違う方法を使うことになるので 新たに覚えることが多い jQueryが楽なのはライブラリでフレームワークとしてはDOM APIと 同じだから標準を知っている人は単にAPIを置き換えただけ(と感じる) とはいってもjQueryは宣言型なので、それを活かした書き方をしなければ 本領は発揮できない。具体的にはCSS(セレクタ)でHTMLの構造を定義して (CSSの)クラスベースで設計する。 だけどそんなことは構わずDOM APIを置き換えただけとしても使えてしまうので そういう人ほどjQueryは不要って言ってしまう。 まあ要するにフレームワークだと最初に覚えることが多いから敷居が高いが やり方が強制されるのでよく理解してない人でもそれなりのコードになる。 jQueryだと(DOM API標準を知ってる人なら)APIの置き換えから入れるから 敷居は低いが、効率いい書き方にしようと思えば、宣言型であることを理解して 自分でCSSのクラスベースで設計しなければいけないということ
Vue では、単一ファイルコンポーネント(SFC)と言う、独自フォーマットがあるので、 HTML, CSS, JavaScript(JS) を、1つの.vue ファイルにまとめられるから、 この3つの組み合わせを探す手間がなくなる 普通だと、各HTML, CSS, JS ファイルから、該当する組み合わせを探すのが、ものすごい手間 スコープ付き(Scoped)CSS で、他のファイル・コンポーネントと被らない、ユニークなdata属性が付く <span class="title" data-v-aaaaaa>あ</span> span.title[data-v-aaaaaa] { color: red; }
>>116 違いがイマイチ分からんってヤツに違いを教えるのもこのスレとしては優位意だと思うがな
結 論 中 規 模 開 発 を 謡 っ と き な が ら 中 規 模 開 発 の 本 も サ イ ト も な い。 あることにはあるが 細々としたシステムは説明されてるが 実際に使ってみると対外「チンパン」する
>>117 > HTML, CSS, JavaScript(JS) を、1つの.vue ファイルにまとめられるから、
> この3つの組み合わせを探す手間がなくなる
まとめたほうが本当に便利かというとそうとは限らない。
サイトのデザインを変更する時は一箇所だけじゃなくて全体を変更する必要がある
例えばお正月用デザインとかクリスマス用デザインとか。
コンポーネント一つを変えれば良いわけじゃない
それに対して標準的なやり方をしていれば1ファイルだけ変えれば良くなる
ブログサイトのように、サイトごとにデザインが変わる場合は、コンポーネント側で
デザインを矯正できないから、結局CSSはコンポーネントの外に出す必要がある。
HTMLに関しても、コンテンツすべてをSFCに入れられるわけじゃない。
というかコンポーネントとは汎用的なものだからコンテンツはSFCの中に入れない。
1つの.vue ファイルにまとめられるが、1つの.vue ファイルにまとるわけじゃない
まとめる場合と、まとめない場合が混在する。
そもそもCSSであっても適切に(CSSの)クラス設計をして
クラスごとにファイルに分ければ、探す手間なんていらない
このコンポーネントは、このファイルと決めるわけだからすぐに見つかる。
だけどそのためには設計能力が必要になる。
ただ
>>115 でも書いたが、そんなことは構わずに使うことも出来る。
だから最初の敷居は低い。ただし適切なやり方をしなければ本領は発揮できない。
それに対してフレームワークだと最初に覚えることが多く敷居は高いが、
やり方が強制されるのでよく理解してない人でもそれなりのコードになる。
普通、SCSS は、10個ぐらいのフォルダに、種類ごとに分けて入れる サイト全体のデザインなら、sight とか、 ページ固有のデザインなら、pages とか components と、全体のデザインは、分けないといけない
scssをフォルダ別けするかね普通 scssフォルダ一つでいいじゃん
>>123 その辺の派閥でVue派とReact,Angular派に分かれるんだと思う
>>124 でも会社で使うなら、派閥起こしてる場合じゃなくね?
会社ならそれこそ会社で何使うか方針決めるんじゃない?
だから会社で方針が決まれば別に会社内部で派閥が分かれる事はないだろ? それでいいじゃん何に対して突っかかってんの?
フレームワーク使いたいって言ってるのに 上に今までのやり方(jQuery)でいいやろ?って言われて 理解してくれないって突っかかってるんじゃねーの? やるべきことはここで愚痴を垂れるんじゃなくて 「これからはフレームワークの時代なんです!」 以外のまともな理由を言うってことだよ
フロンエンドフレームワークの導入しやすさってバックエンド何使ってるかにも依るよね
どのサーバーサイドフレームワークでもREST対応、JSON対応してるんだから バックエンドがアプリケーションサーバーならどれでも大差ないだろ。 ただ単なるウェブサーバーだと、クライアントでフレームワーク導入する必要はないだろうな
>>130 はあ?それはねーだろ
お前は無能晒して恥ずかしくねえの?
フロントフレームワーク使うことが即座にバックエンドがREST ONLYに繋がるわけではない MVCとVueの組み合わせはかなりいい感じにまとまる でもJSPやWebFormsでは全くミスマッチだろう
>>131 データのやり取り以前に初期導入時の敷居の違いの話
>>134 そもそもバックエンドなくてもフロント作れるのがフロントフレームワークなのだが?
>>135 そんなシステムとして完結してないモノを見せて凄いでしょ?とか言うヤツばっかりだからjQueryのシェアが強いまんまなんだよ
XSSやらずにバックエンドのDBとどうやり取りすればいいかとか説明できんだろ?
>>136 説明できんだろ?とかテメェ何様なんだよ?
XSSごときで偉そうなカス野郎www
>>137 話の主題はXSSじゃなくてデータベースの読み書きについてだが
>>135 の言い分だとproxy設定とかロクに書いたことないだろ?
フロントのスレだしリバースプロキシまで書かないと意味伝わんないんじゃないかな
分からない人にはリバースプロクシって言ってもやっぱ分からないんじゃないかと思うけど 入門ならそんな事しなくてもいいLaravel-Mixが楽でいいと思う
最終的には分離開発するにしても導入検討時から分離を強制してちゃ検討も進まないから結局導入されない
vueのテンプレート作成 ジェネレーターみたいなモノはないよな。(๑´ڡ`๑) 簡単な文法からVueライクなHtmlタグ入りのソリューションを提示してくれるような奴
>>144 vue template generator
でググったらそれっぽいのあったよ
それらしきモノって「ieoman」のことかな? windowsの解説サイトが無くてフォルダーは手動で構築したけど なんか半分ぐらい動く感じになった。文法は簡素な感じだけどGroovyやってる感覚になる。 yo mcs:component ポチッとやたけど、成功パターンがそんなに 判らんので、実用的か、どうかも判らん
今のプロジェクトでangular使ってるけどvue使ってみたかった まだangularの事全然知らないけど、コンポーネントがts,html,cssでそれぞれ別れてるせいでファイル数膨大になるのが嫌だ
Vueは小規模、Angularは中規模以上 という感じがしたな。手間的にも。 Angularの方がアプリ的な作りとして しっかりしててわかりやすいかな ただちょっとしたことですぐに動かなくなる Vueもちゃんとルール決めして作れば 短期間で作れるしよいね Reactはやってないからわからん…教えて
Angularを開発しているGoogleチームの敵は
別のGoogleチームかもしれない
Google、FlutterアプリをWebアプリへ変換する「Hummingbird」発表
https://www.publickey1.jp/blog/18/googleflutterwebhummingbirdwebdartflutter_live_18.html Reactで静的サイト作るならGatsbyが素晴らしいよ モダンなSSR、Webpack、GraphQL対応してるし かっこいいサイトのテンプレートも充実してる Reactの勉強用として使い始めたけどGatsbyハマったわ
SPAフレームワークでSSRってなんか目的を見失ってませんか? 従来のMVCフレームワークでいいじゃないですか
イエス。サーバーサイドフレームワークとjQueryで十分
お前ら例に漏れずgatsbyの「SSR」を勘違いしてトンチンカンなこと言っててワロタwwwww ヒント: gatsbyは「静的」サイトジェネレータ
>>155 サイトのテンプレートって
デモサイトどこかにある?
>>161 ありがと
トップページからだと
ここまでたどりつけんかった
今大手サイトのフレームワーク利用状況ってどうなんだっけ? ニコニコ、pixiv、Amazon辺りがReact使ってた気はするけど
Netflix。サービスページほぼすべてに採用。
一部ランディングページから軽量化のためにlodashなどとともに取り除かれた際はアンチから「NetflixがReactやめたw」とデマ流されるほど。
あとTwitter。
https://www.infoq.com/jp/news/2017/02/twitter-react-mobile-stack あと当然Facebook。
そのサイトで使ってるかどうかはfirefoxのプラグインとかで分かるけどたしかにトップページにはないみたい 利用規約では検知した
任天堂SwitchのeShopがReact ZOZOがVue という記事を読んだことある
大手サイトじゃなくて、大手企業のフレームワーク利用状況を知りたい 特に自社で何かしらのサービスを提供してない会社の ほぼゼロであることはわかっていってますがなにか?w
JSF使ってます SPAはオモチャみたいなアプリにしか使えないから大手企業は採用しないと思います
twitterはともかくfacebookおもちゃかあれ? すごいアプリ製作してるんだね。
Amazonって欲しいものリストの部分だけReact入ってるみたいだね
WappalyzerっていうChrome拡張入れるといいよ サイトでReact使ってたら素晴らしいしReact+Gatsby使ってたらナカマだし、違った見方でネットブラウジングできる jqueryのみだとダサってなる(実際サイトの用途にはよるし使ってる人ごめんなさい) 他にも使ってるサーバーとかDBとかWordPressだ〜とかわかるよ
vuetify使ってる人いない? 公式のマニュアルが説明不足で全然わからんのだけど、 どこで情報仕入れてる? formのresetボタンすら動作しない もっと見やすくてわかりやすいUIはないものか
vuexに依存しないvueコンポーネントってどうやって作ってる? 頑張ってpropで渡すか、コンポーネントextendsしてメソッドオーバーライドするしか 思いつかないんだけどみんなもっと上手いことやってるの?
全般的にUIコンポーネントって部品の説明不足だよな
>>174 書き方が悪かったかも知れん。現状でもvuexは使ってる。
例えばvuexにstore/user/flowerFlag:boolean がある
flowerFlag === trueなら ボタンコンポーネントの色を花っぽくにするって時にどうしてる?
1.propでflowerFlagを渡す
2.コンポーネント内にgetColoer()メソッド作って個別にextend/overwriteする
この2つの方法以外にももっといいやり方あるんかな?
flowerFlagって名前が気に入らない 何をするフラグなのかさっぱり分からない useFlowerTheme: boolean とかにしろや
SPAフレームワークでSSRが醸し出す、一周回ってMVCフレームワークに戻ってきた感が笑える
スレタイのやつ3つとも触ったことないままAureliaってやつを採用しようと思ってるんだが、お前らの評価はどんな感じ? 採用の理由としてはVueが選ばれるのと同じだと思う
調べてみたら3年くらい前にちょっと流行ったみたいだけど 未だに話題になってないって事はそういう事なんじゃない?
流行り廃れでフレームワークを選ぶんじゃねえ! 自分に一番合ったフレームワークを選ぶんだ!
https://jquery.com jQuery: The Write Less, Do More, JavaScript "L i b r a r y".
ライブラリであることに負い目でもあるのかな?w
フレームワークの流儀を押し付けられず、どこでも好きなように自由に使えるのがライブラリの強みだと言うのに。
どこ見て負い目があると感じたんだ? ライブラリだからライブラリって書いてあるだけだろう
angularはwebエンジニア以外の血が流れてるんじゃないのか?ゲームエンジニアでhtmlもjavascriptも経験がなかったときの俺には非常に使いやすかった。 web関連の経験値がたまってきた今となっては大がかりに感じちゃってあえて使おうという気はでないが…
フレームワークと言われるのがウゼーから強調してると思うが Reactもライブラリって名乗ってるな
結局MVC+jQueryが一番バランスとれてんだよな SPAなんて作る側にも使う側にも画面遷移が超早いぐらいしかメリットねえもん
>>197 それは流石にSPA作った事無いやつの暴論
jQueryの功績は確かに大きい。その次の世代として仮想domありきのvueやreactなんだから、jQueryとの比較は意味が無い思う。
大雑把にいうとライフサイクルメソッドみたいなイベントとか状態管理などの枠組み含むものがフレームワークで 枠組は使用者が作って機能を呼び出すのがライブラリだろ
>>199 > 仮想domありきのvueやreactなんだから、
仮想DOMはメリットじゃないよ
フレームワークの設計上どうしても遅くなるという問題を
回避するための手段でしか無い
遅くなければ仮想DOMなんて無いほうが良い
そういやスタイル側のフレームワークって何がいいの? 基本はBootstrapなんだろうけど
やりこめば やるこむほど 思うけど、vueは簡単じゃあないと思う。
よう分からんけど、日本じゃ wasm は話題にならないね。 情報が遅れてるんだろうか?
wasm盛り上げたいgoogleもjs速くし過ぎたと後悔してることだろう
wasmが必要となるようなものは、 ウェブじゃなくてアプリにするから
なるほど、日本では、「JavaScript を高速にしたもの」と思われている段階なんだね。 アメリカではパラダイムシフトが起きると思われているらしく、色々と恐れられて いたりもするらしい。
>>209 パラダイムシフトと言っても所詮
ウェブがアプリに追いつくぐらいの意味でしか無いから
C#がクライアントで使えるようになるだけでもかなり有り難い Microsoftなら開発者に優しいエコシステムを提供してくれる
あんなもの昔の時代へのパラダイムシフトでしかないだろ 負の遺産を再び抱え込むだけだよ
>>212 wasmでは、C#は使えるようにならないはず、一生。
NaClが出始めの頃や、なんならActionScriptやSilverlightのRIAでもパラダイムシフトだのなんだの言われてたな。
>>214 すまん。既に使えるらしい。
.Net 仮想マシンを、wasm に移植したのかな。
WinForm か WPF か知らないけど、そういう標準的な作り方をしたC#が ブラウザでそのまま動くということではなくて、Razorを使って専用に 作らないといけないらしいね。
JavaのGUIの場合、Swingは、完全にJavaで書かれていて、OSに 依存せずに全部自前で書かれているので、Java仮想マシンさえ動けばどんなOS でも完全にGUIアプリが動く。 でも、C#の場合はライブラリがWin32 APIなどを呼び出しているから、そうは 行かないみたいだね。よく知らないけど。
razorてメチャメチャ容量大きくなっちゃってまだまだ使い物にならないんでしょ?モバイル用にでも使えるくらい小さいの吐いてくれないかなぁ…
webの技術にパラダイムシフトって言われるような変化起こすにはjavascriptの標準仕様が劇的に変わるか、革命的なブラウザが出てきてとんでもないシェアを握るってパターンしかないという理解だわ。
無理して既存の資産をwasmに移植するメリットはないと思うね 最初はへんな抽象化せずにDOMによく馴染むHTMLフレンドリーなライブラリをC#で実装してくれればいい なんならjQuery.Netみたいなパクりでもかまわない 手を出しやすい土台を作って欲しい
wasmって既存の資産を移植するためのものだよ? 最初から作れるのならJavaScriptを使えば良いわけだし
HTML5によってFlashなどのプラグインが死んでいったり JavaScriptからカメラやマイクにアクセス出来るようになったりとそれなりに影響があった WebAssemblyはそれらをさらに強化する JavaScriptでは限度があった動画/音声データのリアルタイム解析なども可能になる プラグインが死んだUnityも今はWebGL+WebAssemblyで動く プラグインでバラバラ対処してたことが標準化されたって感じかね 劇的に変わる、と言うのはちょっと違う気もするが
HTML+CSS+javascriptでの開発って他の分野に比べると独特だから実は参入障壁高いんだよね。使いこなせないだけなのに技術そのものがショボいと言いだす。 だからwebフロントエンド以外の開発者がwebフロントエンドの開発したくなったときにいろんな手法を見つけて何とかしようとするんだけど、なれてくると別にHTML+CSS+javascriptでいいやってなる。 そんなイメージ。
メモリの扱いというかデータの受け渡しがだるいから、TypedArrayに対して高速に計算するだけの何かを導入してくれたほうがマシだった
wasmってiOSとAndroidに対応してる(する)の?
んなことよりpush通知実装しろ。iOS safariテメーのことだ。
>>225 JVM の代わりとなる仮想マシンと考えた場合、C++ で書けることは重要なんだ。
C++は型があるので、ミスをコンパイラが発見してくれる事が多いから。
例えば、JSだと関数の引数が多くても少なくてもエラーにならない場合がある
と思うけど、C++では敢えて分かっていてそうする場合以外は必ずエラーになる。
C++ では整数型を受け取るつもりの仮引数に浮動小数点型の実引数を渡すだけでも
エラーになる。ところが、JavaScript ではエラーにならない。
このようなことがあるので、JavaScirpt は大規模アプリをC/C++で組んだことの
有るプログラマからは嫌われている。特にアメリカで。
JavaScript だと、プロパティーには文字列と数値、Objectのどれでも入れられるので 単に書き間違えているだけなのに、エラーにならないので原因不明の不具合が直らずに 困る可能性がある。例えば、1,2,3 の 3つの数値を用いて、何か3種類を区別する 目的でプロパティー aaa を作ったとしよう。 aaa = 1; aaa = 2; aaa = 3; と書くことをプログラマは想定している。ところが間違って、 aaa = "x"; と文字列型を入れてしまった場合、どこかで不具合が起きるだろうが、ソースが何10万行も有る プログラムの場合、この間違えて書いてしまった行を探し出すのに苦労することになる。 こういう間違いが、C++ では、魔法のようにコンパイラが発見してくれる。だからC++は 安全で安定性が高いために人気がある。
>>232 その言語を多くの人は知らない。ずっと古くからC言語があり、とても人気があって、
その後継にC++があって今でも続いている。アメリカではC/C++経験をつんだ
プログラマが日本よりも沢山いるためか(?)、C/C++ で wasm が使えることで
game changer, pardigm shift などと喝采が起きているらしい。
>>234 なぜ、C/C++ が型を書いているかは、言語が古いからではなく、まさに
エラーチェックのためなんだよ。
typescriptはもう半数が使ってるくらいの感じでしょ
>>234 テストで結果が異常であると分かっても、どこに原因があるかが分からないことがある。
だから、細かく実験していく必要があり、それには時間がかかる。
型の間違いをコンパイラが見つけてくれるだけでもミスが判明することが
かなり多くあり、開発時間の節約・短縮に大幅に貢献することになる。
ミスったときには、型や引数の個数まで間違っている確率は意外と高いので、
それだけでも8割くらいの単純ミスは発見できてしまう。
>>237 Webプログラマから入った人にはそう思えるかもしれないが、昔からの
普通のデスクトップアプリを作ってきた人はそうではない。
C++ソース(型がある)→コンパイル(型情報に基づきエラー)→バイナリ(型はない)→ネイティブ実行 Type Script(型がある)→トランスパイル(型情報に基づきエラー)→JS(型はない)→ブラウザ実行 あんま変わらん。 wasmが出てきてから聞かなくなったけどJSはWebのアセンブラとは言い得て妙だったな。
>>235 > その言語を多くの人は知らない。
大丈夫。TypeScriptはJavaScript+αだから
α(型)の部分を除けばJavaScriptそのもの
>>238 > テストで結果が異常であると分かっても、どこに原因があるかが分からないことがある。
十分にモジュール化されてればすぐに分かるよ
>>240 TypeScript という言語自体を今までの大部分のプログラマは知らない。
言語はなるべく1種類を学ぶだけの方が楽だから、C/C++ という事になる。
逆だな。javascriptをすごく理解してるWebプログラマのほうがjavascriptで粘ってて、 javascript理解しがたいと思ってる人らがtypescriptに救いを求めて移行した感じがある
>>241 そこまで頑くなに C/C++ を拒絶する理由がない。
C/C++ を1つ覚えるだけで組み込みから何から何まで作れるようになり、
速度も現存する高級言語の中でTOPな上に、エラーも少なく、安全。
過去からの資産も多い。例えば、画像処理、AI、音声解析、文字認識、
3D描画、物理計算、何から何まで C/C++ は存在している。
敢えて後から出てきた言語を覚えるの無駄。
>>244 でも、ハイレベルなプログラマはそうは思ってないと思うよ。
実際に作った作品で勝負したら C/C++ の圧勝だと思う。
機能面でも速度面でも安定性も品質も。
>>243 js抜きにしてもtypescriptの型システムは良くできててC系文法の型システムとはこうあるべしといったお手本みたいだけどな。
c++の型システムは継ぎ足しキメラの失敗作だけど今さらどうしようもできねえしな…
>>247 仮に TypeScript に色々良いところがあったとしても、今迄から高い定評の有る
C/C++をまず、覚えてしまうほうがずっと将来性がある。
だから、人々はC/C++を覚えようとしてきたし、少なくともアメリカのプログラマ
はそうしてきた。いったんC/C++を習得すると、それだけでほとんどあらゆることが
簡単にできて、成果物の効率や速度もとても高く、エラーも少ないものが出来る。
その状態で敢えて、TypeScriptを覚えるのは非効率。だから、C/C++ が
ブラウザで動くのはすごく魅力的な話という事になる。
S: もうかなり時間がたったしね、C++ が時間の無駄だということにはほとんどの人が気がついたとは思うけど、でも当初予想していたよりはずいぶん時間がかかったな。 I: 具体的に何をどうやったのかな。 S: 最初はほんの冗談のつもりでね、みんながあの本を真に受けるとは思ってもみなかったんだ。脳みそが半分でもあれば、オブジェクト指向プログラミングが非直感的で、非論理的で、非効率なことくらいはわかるよね。 I: え? S: それに「コードの再利用性」ときたら…。どこかの会社がコードを再利用したなんて話を聞いたことがある? I: いや、実はないんだけども、でも…。
>>245 > そこまで頑くなに C/C++ を拒絶する理由がない。
C/C++は開発効率が悪いから。
ポインタを使うのに、std::auto_ptrを使わないといけない
そして世界が混沌としていて、ポインタという基本的なものでさえ
時代が変われば使い方がガラッと変わってしまう(皮肉)
>>250 >ポインタを使うのに、std::auto_ptrを使わないといけない
5ch/2ch の言うことを真に受けるとそうなるが、普通に、
BYTE *ptr;
TYPE *ptr;
で済む。昔から、C++ といえばこのスタイルで、auto_ptr 自体はずっと後発で、
C++ ではないといっても過言ではない。
>>248 > だから、C/C++ がブラウザで動くのはすごく魅力的な話という事になる。
既存のC/C++の資産をJavaScriptから使うのに便利だよね〜
>>251 今どきそんなコード書かないよ?
既存のライブラリのソースコード見ろよ
>>250 >C/C++は開発効率が悪いから。
そんなことはない。メモリリークのことを気にしているなら、デストラクタの
中で解放するように1行書くだけで、ほとんどの場合はリークしないし、
危険なこともない。
>>253 ネットはおかしい情報が多い。
ちゃんと本を見たほうがいいよ。
>>254 デストラクタの中で解放する1行を書き忘れた場合、それでも動くから
どこかで不具合が起きるだろうが、ソースが何10万行も有る
プログラムの場合、この間違えて書いてしまった行を探し出すのに苦労することになる。
ミスったw デストラクタの中で解放する1行を書き忘れた場合、それでも動くから どこかで不具合が起きるだろうが、ソースが何10万行も有る プログラムの場合、この間違えて書き忘れた行を探し出すのに苦労することになる。
>>253 std や auto_ptr を使うから難しく感じるんだよ。
何度も言うが、それは C++ ではない。これはマジ。
今の std:: 系のライブラリはSmalltalk の信者が作ったものらしい。
C++ の標準化委員会がおかしなことになっていて、もはや、本来のC++
ではなくなってきており、だから、C++が難しいと感じる人が増えている
気がする。
>>257 クラスが 100種類の場合、デストラクタは 100 個しかない。
だから、ソースが数10万行あっても、100箇所を調べるだけで済むよ。
>>260 調べる箇所が100箇所でも
何を解放し忘れたかを確認するのは大変
>>259 日本だと auto_ptr みたいなのが C++ だと思ってる人がいるけど、
勘違いだよ。
stdなんちゃらを使わなかったら バッファオーバーランで脆弱性になるし それでも動くから どこかで不具合が起きるだろうが、ソースが何10万行も有る プログラムの場合、この間違えた行を探し出すのに苦労することになる。
>>261 だから新しい言語を次々に覚えて C/C++ だけは覚えないで過ごしてきたのかな、
あなたは?
数十の言語を覚えるより、C/C++ を1つ覚えるだけが良いと思うよ。徹底的に
それだけを学んだほうが良い。
>>262 勘違いとかそうでも良いわw
auto_ptrが使えて、実際にauto_ptrが使われるがC++だから
>>264 はいそうですね。C/C++は数十の言語を覚えるのと同じぐらい苦労しますもんね
いろんな言語の機能をキメラのように組み合わせた言語ですから
人によって書き方がぜんぜん違う
auto_ptrを使ってるだって!?これC++じゃないよ!
って言う人がいるぐらいだから
だから開発効率が悪い
さもTypeScriptが競合であるかのように突っかかってきてるが全く的外れ。 TypeScriptのトランスパイルターゲットはJS。 競合はその他AltJS。 この中では既に天下取って安泰。 C++のコンパイルターゲットはWASM。 競合はRust、Kotlin、.NET、、、どんどん増えるぞw がんばってな!w もちろんナマのJSはWeb界のグルー言語として残り続けるよ。 シェルスクリプトが性能を理由に消えないようにね。
>>263 そうならないように、C から C++ に進化してきたんだ。
そのために、コンストラクタ、デストラクタの概念が導入された。
それだけでも十分に安全で簡単に書ける。
逆に、std ライブラリは構造が理解しにくいので難しく感じるんだろう。
auto_ptr とか使おうとすると、C++ は一気に煩雑で嫌いになってしまうと思う。
だから、auto_ptr も std:: 系ライブ来も SmallTalk 信者が作ったものであって、
C++ の流儀とは全く異なる異質なもの。C++ で SmallTalk をやろうとするので
めちゃくちゃ複雑になってしまっている。
>>266 >はいそうですね。C/C++は数十の言語を覚えるのと同じぐらい苦労しますもんね
C++98 まで覚えれば大体C++の基本は習得できていて、それはそんなに大変
ではない。
・auto_ptr 系は、uniq, smart など沢山ありすぎるので、初心者には難しく、
下手に使うと、生ポインタより危険かも知れない。これらはかなり後発のものなので、
最初は覚える必要はない。
・std:: 系ライブラリは後から習得すればよい。
>>229 マジで?!
だって公式のデモはiPhoneだと動かへんで?
>>270 まさかSafariとか使ってないよね?
C/C++は使うべき場面が決まってるから他の言語と揉めたりしないと思ってたんだが。
なんかSafariだけで動くwasmの代替品独自に作ってなかったっけ?
>>271 SafariもWasmはサポートしてると読んだけど、確か。
TypeScript って、MSの独自言語なんだよね、知らないけど。
>>261 例えば、VS の VC++ で C++ ソースをデバッグモードでビルドして、できたバイナリを
デバッガで実行すると、そのアプリの終了時に、メモリーリークが起きているか
どうかがIDEの Output Pane に出力されるようになっていて、その際、どのソースの
何行目で new TYPEしたオブジェクトが解放し忘れているかが、ずらずらと一覧表示される。
で、その場所が分かったら、多くの場合は、そのポインタをメンバ変数に「持っている(have a)」
class のデストラクタに、1行、delete ptr; と書くだけで、メモリーリークは直る。
例外として、複数のポインタから同じオブジェクトを参照していて、かつ、そのポインタ
が永続的にグローバル変数や、何らかのクラスのメンバ変数に格納されている場合には、そこまで
単純には行かない。その場合は、プログラマが頭で考える必要がある。
C++の方向性は最初から何も変わっていない ctor/dtor, RAII, ムーブとより整理されていっただけ 1985 C++ / TYPE * (Cfront 1.0) 1986 C++ / (実装予定のtemplateなどの説明した文書が公開) 1991 C++ / T* (template可能, Cfront 3.0) 1992 C++ / auto_ptr (STL実装, 例外導入, RAII) 1998 C++ / (最初の標準化, C++98) 2011 C++ / unique_ptr (ムーブセマンティクス, C++11, auto_ptr非推奨化) 2015 Rust / 言語レベルで所有権システムを導入 (デフォルトがムーブ, Rust 1.0) wasmに絡むとはいえスレチ気味で しかも古いやり方の話を何レスしてるんだか・・・
>>274 カバーしてる範囲が他のブラウザーに比べてかなり狭い
このスレ的にはわざわざC++使うんじゃなくてTS→wasmじゃないの
tsnativeかts.net来ないとwasmにはコンパイル出来ないだろ。 せっかくAltJS戦争に勝ってブラウザのjsに対する忖度パワーをすべて手に入れたのにわざわざwasm戦争に参入する必要はないだろ。 c++の構文が古くさすぎ冗長すぎで嫌、rustの構文はキモすぎて嫌と言うならkotlinかc#にすれば。
>>249 C++ はひどい言語だ。これは、多くの平均以下のプログラマーが使ってるために
さらに輪をかけてゲロゲロになっていて、どうしようもないゴミが
簡単に生産されるようになってる。正直いって、C を選ぶ理由が C++ プログラマーを
追っぱらうため *だけ* だったとしても、それ自体、C を使う強力な理由になりうる。
C++ はトンでもなく悪い設計の元になりうる。どうせこの言語ではいつも STL やら
Boost やら、その他ゲロゲロベロベロの「素敵な」ライブラリの機能を使って、
それがあんたのプログラムに「役立つ」んだろうが、以下のことが起きる:
- うまく動かないときにもたらされる際限のない苦痛 (あと STL とか、特に Boost が
安定してるとか移植性があるとかいう奴は、どいつもこいつも大ウソつきで、
もはや笑えるレベルを超えている)
- 非効率な抽象プログラミングモデルで、2年たった後にこれらが実はそんなに
効率的じゃなかったことに気づくケース。でもそのときにはすでに全部の
コードがその素晴らしいオブジェクトモデルに依存していて、直すためには
アプリ全体を書き直さなきゃなんない。
言いかえれば、唯一まともで、効率がよくて、システムレベルで使えて、移植性がある
C++ ってのは、基本的に C で使える機能だけに限ったときなんだ。そして C だけに
限定するってことは、他の人がそれをめちゃくちゃにしないってことで、
ついでに沢山のプログラマが実際に低水準の問題を理解することができて、アホらしい
「オブジェクト・モデル」のたわごとを持ちこまないってことだ。
Angularってwikipediaには「フロントエンドWebアプリケーションフレームワーク」って書かれてるけどまさにその通りだよな。javascriptのフレームワークって感じではないわ。 HTMLとCSSとjavascriptの技術を採用したwebサイト開発フレームワークって感じ。
Reduxのほうがムズいけど、これからやるならReduxがいい
>>284 JavaScriptのフレームワークって感じではないって意味がわからんぞ。
普通はJavaScript製のフレームワークって意味だろ
○○(何かしらの言語)製のフレームワークなのだから
AngularはJavaScript(製)のフレームワークだ
別の言語なら、〇〇(言語)のフレームワークなんてものが存在するのか?
angularとReact、Reduxってどっちが簡単?
学生時代、英単語の暗記が得意だったやつはangular、数学が得意だったやつはreact
>>286 なるほど。
ピュアjavascripで書いたら大変な記述をちゃちゃってやってくれるからスレタイの3つとかjqueryとかはjavascript(の)フレームワークって呼ばれてると思ってたんだがとんだ勘違いだったのね。
jqueryとreactは自称ライブラリ、vueとangularは自称フレームワーク 公式サイトのトップを見た限り
>>289 それを言ったら、jQueryで使うのはピュアJavaScriptだし
Angularで使うTypeScriptやReactで使うJSXは
ピュアJavaScriptではないけどさ
react捨てるにしてもreduxの考え方は学んどいて損はないよ。
hook apiとcontext apiデフォで使えるようになるから個人ユースの規模ならredux必要なくなるよ。
>>284 Angularと比べるならVueとよりもNuxtと比べる方が合理的だな
>>286 コーディングはすべてTypeScriptだけどね
ものは試し 初心者だがAngular勉強してみるわ
React勉強したがやっぱりウェブサイトの殆どには適用できない技術だな 例えばニュースサイトにReactを導入するメリットはないだろう
>>299 画面遷移がなくなるからメリットはありだろ
Reactにした Angularバージョンで詰みそうになる感じだし 学習リソース少ないし
潰しの効かなさを除けばAngularが一番いいと思う。ガッチリした設計な分だけ迷わずに使えるしプロジェクト管理もしやすい。 ただ習得してもキャリア的なメリットが薄そうだから自分で選択する気になれん。
当分は問題ないだろうけどAngularは将来的にはどうなるんだろうな 同じくGoogle製でしかも競合となるFlutter/Hummingbirdのリリース準備が進んでるみたいだし
>>302 画面遷移をなくせなんて誰からも要望来てないんだが?
VueもReactもAngularも将来性はないよ 近い将来にWebComponentに 置き換わることが決定している
逆って今WebComponentがないのに 今WebComponentを使ってるわけ無いだろ
結局ピュアjavascriptを真面目に身につければOK?
どうせwpだろwww railsが使われてるからrubyが死にきれないのと似たようなもんwww
だから「本当にやりたいこと=WordPressでできる範囲のこと」なんだから フレームワークもいらんし、どうせjQuery使われてるからjQueryでいいってことなんだよ
需要と供給 いくらすごいことができるようになっても 求められてないんだよ。
間違ってないと思うがなぜwpのスレに籠らずこんなスレ来て啓蒙活動してるのかw 他人が勉強するのが不安で怖いんだろ?ww そんな女の腐ったようなセコい性格だからいつまでたっても童貞なんだよwww
論理に破綻はないが?wp圧倒してるの事実だし。現状に安穏としたいならしてれば?俺らは勉強するから、ってこと。図星刺されて恥ずかしくなっちゃったのかなw お前のやってることってテストの前に勉強してるやつをガリ勉・ダサいとレッテルはって集団でみんなで堕落しようとセコい行動する女みたいなんだよw 男でそれじゃダメだよ。
angularは勧めんな。railsもそうだがああいう丸ごと全部なものになれると それ以外なんもできなくなる。
wpしか使えない底辺カスは死ぬまでjquery使ってろ
>>319 > 論理に破綻はないが?wp圧倒してるの事実だし。
wp圧倒してるの事実である根拠は?
事実だとしてそれがjQueryにどれだけ影響してるの?
wpのシェアなんてウェブ全体からすればたいしたことないじゃない
新しいフロントフレームワークが出た時に丸ごとすげ替えれるならなんでもいいよ 俺はMVCがベストバランスの正解だと思うがね
backboneを勉強した人は無駄になった。 Angularも1系を勉強した人は無駄になった。 jQueryは登場してから13年使われ続けている。 これが現実やで
wpの保守死ぬほど大変だけどな。てかフレームワークとwpは全く別物だろうよ。ブログのフレームワークと言えない事も無いが。
>>322 ビルトインされてるよ。テーマによってはwpビルトイン版と競合を避けるため他のバージョンを別に導入する場合もある。
そしてwpのシェアはcms中では60%、全Web中では33%
だからwp除くならjQueryは40%程度だなw
> だからwp除くならjQueryは40%程度だなw 圧倒的シェアじゃないか!
最初からシェア小さいとは言ってないだろw 増加してるのはwpのシェア増につられてだろうと予測しただけ。 おそらく合ってるなw jQueryバカが威張るのは滑稽。
jqueryしか使えないバカが多い バカのくせにバカを賛美している
所で仮想DOMのアプローチって本当に速いのかな? 仮想DOMはDOMを触らないって言うけど、 結局最終的な形にするためにDOMを構築するでしょう? そのときに要素を作ったり削除したり そんな事しないで、CSS使って要素を隠したり表示したほうが速いない? jQueryはDOM操作が得意なわけだけど、DOMを作ったり削除したりするんじゃなくて classを変更して見た目を変えることで擬似的にDOMが表示されたり消えたりするって いうのがベストプラクティスだと思ってる。この場合はDOMの構築をやらないので 仮想DOMのアプローチよりも速いんじゃない?
cssのが早いのは当たり前だろ… お前、こういうスレ来るのは10年早いよ。 真摯に勉強しろやマジで。スレタイ読まずに荒らしてないでさぁ
正直Reduxとか使うよりも、カスタムイベントを使ったほうが楽だと思う
マジでお前来るなよ スレチクソキチガイが テメーの妄想なんかどうでもいいんだよ 勝手にjqueryスレ立ててそっちでやれバーカ
>>304 そういう観点ならNuxtでもいいと思う
仕事でもnuxtつこてるわ angularとreactは敷居が高め 他のメンバーが嫌がるのよ
そういやVueでもjsx使えるとかVueの和書の一番厚い本に書いてあったな
reactのために作ったってだけである種類の関数の入れ子をxml風に記述できるというだけの独立した仕組みだからreact関係なく使えるよ。
>>337 そうなのか。興味湧いてきたのでちょっとNuxt試してみます。
ReactやVueやる奴らは当たり前だがフロントデザインやUXできるんだよな?
>>330 仮想domのメリットは最終的にはリアクティブ。その例で言えばjQueryは要素を消すのに.hide()して直接domを操作するが、リアクティブでは単に変数をfalseするだけになる。
複雑な入力フォームも恐ろしく作りやすくなるから、一度vueの公式見るといい。
勉強しなくていい言い訳探しに来てる奴に何言ってもムダ
>>344 > その例で言えばjQueryは要素を消すのに.hide()して直接domを操作するが、
あー、それがお前の根本的な間違いなんだよ。
お前っていうか、世間一般?使い方間違えてるんだよね。
そういうDOM操作なんてしません。
jQueryでは単にHTMLのclassの(例えば)activeをdeactiveにするだけになる。
複雑な入力フォームも作れるし、classを変えるだけで全く違った表示にすることができる
そのフォームを使ってる間JavaScriptは全く使用しない。
デザイナが自由に好きなデザインで作ることができる。
そしてjQueryではclassの値を変えるだけになる。
jQueryのhideはdisplay: noneだろ。 active、deactive(笑)に至っては意味不明。 jQueryではそういうときはactiveクラスをtoggleClassで付けたりはずしたりするんであって、active外してdeactive(笑)つける、deactive(笑)外してactive付ける、なんてマヌケなことはしません。 やっぱりね、自分が勉強したくないもんだから他人の足を引っ張ろうとするような女の腐ったような童貞は自分が上げてるライブラリもまともに使いこなせないwwミジメ過ぎwwwww
jQueryからreactならそこまで乗り換えコストかからんと思うけどな。
>>348 ん?お前俺が言ったことと大差ないよな?
activeクラスを 付けるor 外す ことで表示の切り替えを行うから
そんなことでDOM操作なんてしないってことだろ?
でそれが
>>330 で書いたことにつながるんだよ。
仮想DOMは最終的にDOM操作をするから遅くなるが、
jQueryではCSSによって見た目を切り替えるだけだから速いってこと
>>352 そりゃVueやReactだって最終的にはDOM APIを通じて操作するよ
ただしその操作の内容を、DOM要素の削除や追加じゃなくて
クラス名を変えて表示を切り替えるだけにすると速いってこと
Angularの方が難しいの? Reactの方が自由に構成決めたりコーディングしたり出来る分、 自分で決めなきゃいけない事が多くなって逆に難易度高いって聞いたけど。 Angularの方が環境構築も規約も全部世話してくれるから楽だって聞いたからAngularから入ったんだけど。もしかして騙された?
>>354 英語などの単語の暗記が得意だったならangular
数学が得意だったならreact
さすがjQueryバカ。伊達に名前にバカって付いてないな。 クラスの付け外しも厳然たるDOM操作。 そんなことも分からないとは…使われるjQueryもかわいそうだ。
そもそもjQueryのコア機能はDOM操作なんだが… DOM操作しないならjQuery要らねーよ。 贔屓のライブラリの存在理由否定してどうする。
>>357 DOM操作のうち、class属性を変えるだけにするということ
そしてCSSでブラウザにネイティブ処理させるから速いんだよ
要素の追加や削除は必要最小限にするのが鉄則
>>354 自分がやりたいことと、フレームワークが提供してくれる機能とのバランスだよ
業務アプリみたいに複雑なインターフェースのアプリをガッツリと大量(=画面数が多い)に
作らなきゃいけないならAngularがいいだろうけど、そうでもないなら
Reactで適当にデータ管理してやれば楽ってこと
Angularはいろんなことを面倒見てるけど、そこまでやることないじゃん?って思うならReact
更に言うならウェブサイトみたいなものはjQueryで十分ってこと
> ネイティブ処理させるから速いんだよ
だったらネイティブのDOM API使うわw
You Don't Need jQuery!
https://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ >>360 それもバランスの問題だな。
そこ見ても分かるだろ?いずれの例もjQueryの方が短く書けている
開発効率の高さがあるからjQueryのほうが良い訳
フレームワークの欠点は単純なウェブサイトでは 生産性を落とすという大きな問題があるってこと
ついでだから、jQueryは必要ない(?)から一例を抜粋 8.7 slideToggle スライドを伴って、エレメントの表示・非表示を切り替えます。 // jQuery $el.slideToggle(); // Native let originHeight = '100px'; el.style.transition = 'height 3s'; let { height } = el.ownerDocument.defaultView.getComputedStyle(el, null); if (parseInt(height, 10) === 0) { el.style.height = originHeight; } else { el.style.height = '0px'; }
DOMにノードを追加すると、DOM APIと直接対話するVanillaを1回呼び出すだけで済みますが、jQueryは多くの操作を実行します(スタックが長すぎて画像に収まりません)。違いは明らかです。 Vanilla:4ミリ秒 jQuery:95.3ミリ秒 Vanilla Javascriptは、追加時のjQueryよりも約25倍高速です。
>>367 いや、だからそんなことをしないで、クラスの書き換えだけを
やることで高速化できるって言ってるんだよ
話ついてきてね
>>359 使い分けって言いながらフレームワーク要らないって言うから意味不明になるんだよ
「自分の仕事では」要らないって話だろ?
>>368 class追加するだけでもjqueryより10倍速いんですが?
削除はともかく、追加がクラスの書き換えだけの訳ないわな。その書き換える対象がまだ無いんだから。
jQueryはネイティブに比べて遅い上にサイズも大きすぎる。 画像でもないのに数十kBとかアホか。 短く書けりゃいいのならnanoなど代替ライブラリもある。 nanoのコード例: $(".someClass").css("background-color:green;").html("Hello World"); $('#c').animate('2.3', '1.2','0','1','1','0','0', '0','0','1').css('background-color:red').text('Hello'); $("#a").on("click", function(){ $("#someDiv").css("background-color:green;color:#fff;"); }) nanoは0.6kB。 jQueryは100倍もコード容量かけて何やってんのwwwww
ボコボコでワロタw 我が物顔でスレチ荒らしするからこうなるww
>>372 じゃあnano使えば良いんじゃないですか?
フレームワークよりも大幅に小さいし
ウェブサイトではフレームワークは重すぎで生産性を下げるという 大きな問題があるが、jQueryやnanoはDOM APIの冗長性を省くだけだから 生産性は上がるしか無いというのが大きなメリットなんだよ
まあjQueryがいらないのは確かだね。 要素のstyle操作程度ならなおさらね。 「DOM操作しない方がいい」って言ってたし、じゃあDOM操作ライブラリのjQueryはいらないねw え、やっぱりDOM操作したい?そして短く書きたいって? 100倍軽いnanoがあるよw
そういやzeptoとかもあったけど、 今までの経験上、軽いだけの代替ライブラリは 結局本家を超えることって無いんだよな nanoが普及すると良いね
すまん、ガチで話についていけてないんだが、
>>351 でjQueryは速いって書いてあるからjQueryは速いのか!って思ってたんだけど結局遅いの?
GitHubがjQuery辞めたので
https://ushirock.hateblo.jp/entry/2018/07/28/013507 jQuery が DOM 操作の際に eval() を多用しているため CSP を safe モードで使えないらしい
これは jQuery の核になる部分の仕様らしく、 .html() はどんな時でも任意のコードを実行する可能性があると
やっぱり jQuery といえば Sizzle でのセレクタ解析が遅いとか(querySelectorが使える場合優先されるらしい)ネイティブへの置き換えとかに目が行きがちだけどもこういう深い話でのデメリットもあるんだなと
>>379 jQueryが速いなんて言ってないんだが?
ファイルサイズではフレームワークよりも小さいから
初回ダウンロードは速いだろうけど。
速いって言う話はDOM操作で要素を消したり作ったりするよりも
classを変更するだけにしてCSSで表示したり見えなくしたりするほうが
速いだろうってこと。
jQuery。それは、 ・遅い ・重い ・アンセキュア なDOM操作ライブラリ。
jQueryを使うのって、速さ云々より一つのコードがどんな環境でも同じ様に動くって所なんじゃないの? ブラウザの種類やバージョンでJavascriptの挙動の違いがあるから、それを吸収する為にjQueryを使うんじゃない?
>>381 はっきり言ってjQueryが遅いとは思わない
熟練した人が地道に管理すれば十分速い
それが手間じゃねぇの?ってのがフレームワークの意義
>>384 jQueryってDOM APIを使ってるだけなのに
なんでアンセキュアになるの?
>>383 そうか、なんかすまん。
>仮想DOMは最終的にDOM操作をするから遅くなるが、
>jQueryではCSSによって見た目を切り替えるだけだから速いってこと
この部分読んで仮想DOMは遅くてjQueryは速いのか!って解釈しちゃったんだが仮想DOMに比べて速いだけでjQueryも速くないんだな。
>>387 >>367 の結果だけ見ると遅すぎ(10回やると1秒!?)って思っちゃったんだが……
webは基本的には静的コンテンツだから気にならない世界なのかな。
とりあえず俺にはこのスレの会話を理解する能力が足りないっぽい。
まあ1つの処理に4ミリ秒って時点で衝撃的な遅さだしweb開発の世界はそんなもんなのか。
vue.jsが やたらめってら、もてハヤサれる昨今だけど ぶっちゃ毛v-forが仕様としてオワッテると思うわ。 それとuidの生成パターンをC言語なら「ポインターが理解でないワケ」や 「ポインター徹底攻略」、、、JAVAならデザイパターン本みたいな 分厚い本で説明しなきゃ いけないのに、それを全くやってないよな。 俺が考えるvue.jsが広まらないワケだよ。コンポーネントをどうユーザーが 受けとるべきかも、簡単な再帰などを使ってイラストレートしなきゃいけないのに これも全くやってない。細々としたシステムは売り込んでるけど vueの長所が全くされてない
早い遅いじゃなくて開発効率の話だろ。domを直接指定して操作云々はもう止める、最小限にするて事。今後確実にそうなるのは皆分かってると思うが。
実行速度の話をしてる人たちに、いきなり開発効率の話をしだすのは草。なんの関係もないじゃんw
実行速度については、DOM要素を作成したり削除したりするよりも CSSで表示したり隠したりしたほうが速いんじゃないかってだけのこと それをやるにはVue/React/AngularよりもjQueryの方が楽ってこと DOM操作がネイティブよりも速いなんて話はしてない。 CSSによる表示切り替えの方が速いって話をしてる。 そのCSSによる表示切り替えを楽にやる(開発効率が良い)のは jQueryってだけのこと
DOM要素の追加削除とCSSの表示切り替えって役割が違わね?
CSSの表示切り替えは既に存在する要素に対して行うのに対してDOM要素の追加は動的に要素を追加するためにやるもんだと思うんだが。 この2つは比べるべきものなの?
スレタイの3つとかはSPAのような高性能なブラウザアプリを作成するものでしょ。例えばofficeとかslackとか。CSSの切り替えだけでいけるの?
>>354 難しいというより学習コストが高い=最低限として覚えなきゃいけない事が多い
その反面必要な機能をサードパーティーから探してくる必要性がかなり低い
>>379 普通にUIとして使う分にはそんなに気になるほどの事でもないけど
Canvasに連続的に描画とか行う場合はダイレクトにその遅さが目立つってくらいかな
早いからじゃなくて便利だからjQueryを使うんだろ。なんで今更速度の話になってんの?
最近ブラウザでWebRTCとかやるのもわりとあるケースだし遅いってのは無視できない問題でもあるよ
>>403 jQueryは仮想DOM操作より早いと信者が言い出したから。
>>405 デマ乙
>>330 を見れば分かるが仮想DOMよりも
classの変更で表示・非表示の切り替えをしたほうが速いって言ってる
もう一度聞くけど、classの変更でできることって限られてるでしょ?見た目の操作だけかな? それが仮想DOMより速くてもどうしようもなくないか?役割が違うんだから。 なんか自分の間違いを認めたくないから無理やり話をすり替えようとしてるようにしか見えないんだが…
スレタイから逸脱しすぎてると思ったらjQueryと比較してる奴がいるのか。。もう何年も前に通り過ぎた話題だぞ。前見ようぜ。
ReactとかVueすら使えない超低レベルなクソジジイが騒いでるだけだから
>>407 > もう一度聞くけど、classの変更でできることって限られてるでしょ?見た目の操作だけかな?
要素の追加削除の代わりに見た目を変更するっていうのは、
単に要素を追加削除するコストだけではなく
イベントハンドラの設定のコストも減らせる
もともとjQueryはデリゲートが簡単にできるから、要素が増えたり減ったりしても
イベントハンドラは最初に一回だけ設定すれば良いんだが、
それを使わなくても例えば要素のonclick属性とかに直接やる場合でも
要素が追加したときに新たにイベントハンドラを設定しなくてすむ
仮想DOMではDOM操作を最適化して必要な場合だけ実行するが
速度の話をするならそもそもDOM操作自体を減らそうという発想にしたほうが良いと思う
要素ごとにイベントハンドラを設定するよりも、
要素の親に一つだけイベントハンドラ設定したほうがいいわけだし
こっちでやったら?
Webフロントエンドで脱jQueryを目指すスレ
http://2chb.net/r/tech/1547896353/ 使える使えないと使う使わないは別のこと jQueryが殆どの場合最適解でSPAが勝てる領域はかなり狭いという事実を見失っちゃいかん
SPA、シングルページアプリケーションであって シングルページウェブサイトじゃないからな アプリケーションの時点で、ならネイティブアプリにしろよって 言われる時代
まぁ正直フレームワークは知らなくてもいいかも知れんがNodeを知らないと確実に困る時代にはなってくると思う
ネイティヴアプリは環境差異とデプロイメントがめんどくさいんだよね dockerがGUIをサポートしてくれたら乗り気になるかもしれんがな
>>417 それはウェブでも変わらん。カメラ使おうと思ったら
ブラウザごとに使うAPIは違うし、端末ごとに対応してる
解像度も違うし散々だったぞ
dockerってLinuxの話してる? それならSnapsやFlatpakなどが登場してる。
Dockerはあくまで開発者向けで自分で作ったアプリをデプロイするときに使うもの。
一般ユーザー向けにアプリを配布するならSnapsなどを使う
GUI対応でディストリ非依存のパッケージ管理システム
>>417 ネイティブの面倒なところはそこよりも
OSの差異で動かなくなったりするところだな特にiOSとか
>>418 Snapsってdockerのように依存関係や実行時の環境もカプセル化してくれんの?
>>419 その差異をブラウザは吸収できないんだよね
だからみんなネイティブアプリにする
>>411 具体例をお伝えした方がいいのだろうか?
例えばサーバーのDBに対して検索かけてとってきた要素を並べてコンテンツだすとかclassだけでなんとかなるの?
そもそも要素を出したし消したりでなんとかなるような簡単なものにReactとか使わないものじゃね?
サービス提供する側としてはネイティブよりSPAの方がよいケースはままあるでしょ。 例えばインストーラーが不要、そもそも技術者がいない、今までの資産をそのまま流用できる、とかとか。 ハードを限定しないソフトウェアの提供形態って殆どの場合は都合できまるもんだと思う。
ネイティブはストアにリリースすんのがイチイチめんどくさい
jqueryしか使えない無能の自己紹介はいらん 消えろカスジジイ
Angular習得した後にjQueryで書かれたコード見たら吐き気がしてくるわ。 「こんなコードわざわざ書かなくても取ってきたデータバインディングすりゃ良いのに」って思う箇所が多々ある…。 まぁ、古いブラウザでも動くようにしなきゃならないからjQuery使ってんだけどね。
>>427 Windows7のサポートが切れればなぁ
>>428 サポート切れてても「壊れてないから」とか「投資できる余裕がない」とか「基幹システムが新しいOSに対応していないから」って理由で
古いOSと機械を使い続ける客もいるんだよなぁ。あんまりよろしくは無いんだけど。
>>429 jQueryベースでデータバインディングみたいなコード書けるん?
書けるなら書き方教えてくれや。こちとら嫌々でもjQueryとは付き合っていかなきゃなんねーんだよ。
>>430 使ったことないが、backboneやKnockoutやらのIE7でも動くライブラリ使ってみれば?ただ今更勉強する意義を考えると辛いなあ。。
旧ブラウザサポートはお高くなりますよ? これでほとんどの客が黙る
>>430 少なくともイントラではなグローバルサイトではサポート切れたOSの対応は打ち切っていいだろ
Androidだとサポート切れといっていいOSはどれ?
>>433 最新バージョンのreact使ってるけどIE11で問題なく動作しとる
正直互換性の点ではIE11よりもEdgeの方が癖があるんだよね まぁEdgeもChromiumベースになる計画があるらしいしEdgeのChromium化とWindows7のサポート打ち切りが来ればパブリックサイトは随分シンプルになるんじゃないかと思う
chromiumになってもなんかしらイレギュラーがありそう 信用できない
フロントエンドなんてそんなもんだとしか言いようがない。
逆に言えば進化の余地ありありと言うこと。でもフレームワーク競争もひと段落して数年は安定じゃないかな。ブラウザもChromiumとSafariに収束されつつあるし。あとはiOS safariにpush通知実装されればなあ。
プログラマには、Apple機がなくなった方が楽になると思われている。 IEが消滅して言ったのと同じ状況がApple機に対しても起きつつあると思う。 iPhoneは売れなくなった。
フロントエンドは端末とブラウザの進化の影響をもろに受けるからねぇ…。 クロスプラットフォームの分野でも、SPAが技術的に枯れる前にどんどん新しいフレームワーク出て来るからな。最近だとFlutterとか。 SPAだけでも選択肢多いのに、xamarinだのcordovaだのFlutterだのと。 こっちとしては「クロスプラットフォームアプリ開発するなら結局どれ選べばいいんだよ」的な状態だわ。
結局、大きい組織が作ったものを使っていくようになるんだろう。
Apple機さえ無視すれば、プログラミングが色々便利になる。
>>443 どれでもいい
フロントは使い捨て
簡単に乗り換えできるようにビジネスロジックと疎結合に作る
そこだけ死守すればなにを使ってもいい
cordova使うならIonicでいいんじゃない? 最近はAngularだけじゃなくVueにも対応したらしいし そういやReactNativeにもVue版出てたな
vueはreactパクってばっかだな。 storybookもパクってなかったか? nuxtもnextのパクりだろ? さすが中国人プロジェクトw
別にパクっていてもそれで良くなるなら別に何でもいいけど。ただvueは元Google社員とはいえ中国人でしかも個人開発だろあれ。 いつ開発が止まるかもわからない、信用のない国の人間が作ったもんを率先して基礎にしたがる奴なんているのかな。 vue使いたがる奴なんて、vueを使いたいから使うんじゃなく、技術力低いからvueしか選択肢が無いんじゃないかと。
どうせWebComponentsが完成したら またガラリと世界が変わるんだから どれ使っても一緒
何れにせよあっという間に時代遅れになることは確かだ
金融系取引先においてある、およそ10年前に作られた当時先端のActionScript製RIA業務システムを見るとふふってなる。
10年前、2009年か。なら当時最先端のAngularJSを使っていればよかったのに
Reactは2013年だから10年前には選べない Vueも2014年だから無理 Backboneは2010年だからギリ間に合うか? Knockoutも2010年だな 10年前の最先端は、すべからくオワコン ReactもVueもあと5年程度の命だろ
Reactオワコンだからこれからはjqueryオススメ
>>459 この前のレスで気になってたから今ちょうどインストールしてた
何気にAngularの一番厚い本(アプリケーションプログラミング)で主要なフレームワークとして挙がってるのな
>>448 パクリから始まったのは確かだけど今やNuxtはSSRの為だけのものじゃなく
Vueベースのフルスタックフレームワークなんだよな
Reactがオワコンって即ちjsがオワコンって事だと思うんだけどそれはないんじゃないか?
ReactがオワコンになってjsもオワコンになってjQueryだけが使われると思ってるクソジジイが一匹いるけど
jQueryは別にいいんだけどWebpackは知らんとこの先ついて行けんくなると思うよホント 今やブラウザでなんでもできる時代やしなんでも作らないかんくなるから何も勉強しなくても余裕とは思わん方がいい
babel使うんだからwebpackぐらい使うだろ?
もしかしてAureliaってCliでプロジェクト作っても碌にデモ画面も表示されない?
単刀直入に質問。Vue.jsとReactを勉強するための書籍を探してる。今は 両方のチュートリアル見たりしながら写経しつつ、我流で勉強中。 ●Vue.jsは技評のVue.js入門と基礎から学ぶシーアンドアールのVue.jsで迷ってる ●Reactはどれも評価高いものがなくて迷ってるが今は見送り? ちなみにJSの知識だが、今までjavascriptは紫の山田本一通り通したことがあり、AngularJS1.5で簡単な 検索システム組んだことあるぐらい。いちおうjQueryも一通り触れてプログラムに 色々システムを手書きで組み込めるレベルはある。
>>468 vueだけど、俺は「基礎から学ぶvue.js」買ったよ。技評の方は読んでない。公式webとその本で十分網羅されてると思う。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発、
花谷 拓磨、2018/10/17
基礎から学ぶ Vue.js、mio、2018/5/29
Node.js超入門、掌田津耶乃、2017
Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017
入門 React ――コンポーネントベースのWebフロントエンド開発、2015
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook 初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017
JavaScript 第6版、2012、David Flanagan
↓Reduxに関しては一番詳しく書いてあるけどサンプルプログラムの入手先が本誌に書いてない・やっぱちょい古い React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで ↓構成は悪くないしサンプルプログラムがしっかりしてる点はいいがバージョンが古いのとReduxが載ってない いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック ↓これはやめといたほうがいい React開発 現場の教科書 とりあえず一番上がいいかな
>>471 Node.js超入門は全然役に立たんし買う必要ないと思う
てか全般的に2017年以前の書籍勧めちゃいかんだろ
>>470 基礎からは著者のサポートサイトも併せて見るとやりやすい
フロントは更新や淘汰が速すぎるから書籍だと情報が古くなるのは仕方ない
SproutCoreとかもう名前が挙げられることもないからな。 なぜかmeteorは今更挙げられることがあるが。
逆にフレームワークを本買ってまで勉強する必要あんのかな。 公式のチュートリアル一通りやればどう書けばいいかは大体想像付くし、 あとは自分でお題決めて、わからん事は公式ドキュメントやstackoverflowとにらめっこしてれば、大抵の物は作れるだろ。
>>477 そう。英語勉強したほうがマシ。マジで。
フレームワーク本を1週間で読めるとして、 英語を勉強するのとどちらが速いと思いますか?
英語は10年やっても無理だがフレームワークなら1日で覚えられる
ウンコ訳で周回遅れの邦訳に付き合わなくてよくなるぞ。 英語なら電子版無料公開してるような書籍でも日本では印刷してボッタくっている。
理解できなけりゃ金払ってでも理解すりゃ良いんだよ。
理系じゃないんで抽象的な表現が苦手なんだよな。なので、ひとつ何か
コンポーネント指向がわかる手ほどき書がほしかったわけで
今、基礎から学ぶ読んでるけど、デザイナー向けに書かれてるだけあって
わかりやすくていい
>>478 むしろ、英語は読める口(ニュースサイトの記事や英語版Wikipediaの記事とかは
だいたいわかる)なんだけどね
話題になり始めたらとりあえずgithub見に行くな 必要なものは大抵その中か、そこからのリンクにある
>>483 はぁ、コンポーネント指向を…
Atomic Design ~堅牢で使いやすいUIを効率良く設計する くらいしか知らないな。この本で使ってたのはReact。
>>468 Vue本は両方買った
ある程度動けばいい実践派は猫本
理論から入りたい理屈派は技評本ってとこ
俺は技評の方が性にあった
China開発者が作ったvueと、Facebookが作ったReactは将来性も含めてどっちがオススメ?
Angularのシェアが落ちてると言うより、angular採用するまでも無いサイトが他を使用してるだけだろう。vueなんかは小さく始められるから入力フォームにだけ利用もできるしjQueryと共存もできるしね。俺もフォームから始めたな。随分スッキリした。
vueの良さが今日 ようやく判ったな。コンポーネントという単位で 分けることにバックエンドとフロントエンドとミックスできて しかもjQueryまで使える。よぼどvueを 知ろうとしないとこの境地には辿りつけないけど
React終わったな もはやvueの勢いにはどうあがいても勝てない
中国人がどんどんcomponent作ってくれるから楽できる
Aurelia試してみたけどcliでプロジェクト作ってもhttp-serverインストールした上必要なファイル手動で追加せんとデモ画面もろくに表示されんとかこりゃ流行らんの当たり前やん
>>490 AngularはAngularJSでやらかしたのがデカイんじゃない?
一生懸命AngularJS勉強して「さあこれから本格的に開発していこう!」って矢先に互換性のないAngular 2発表、
AngularJSはオワコン化じゃ、次何が出ようと「誰がお前らのフレームワークの習得に投資するんだよ」ってなるわ。
>>496 わからない時は英語じゃなくて
中国語で検索しないといけなくなるのかな?
>>500 ほんまそれだわ、3年前Angular2で別物になったと思えば、もう6とかいってるし…
数年でもう5まで行ったLaravelも大概じゃないがそれよりひどい
あと、フルスタックじゃないAngularJSのような気軽さがないとね…。 ReactとRedux、Vueとnuxtみたいな関係が必要だ。門戸は広く、奥行きは深くすべき ReactはVueに影響されたか、だいぶ記述はわかりやすくなったから、前よりは とっつきやすくなったと思う
おいreactに来たhooks apiめっちゃいいやんけ。クラスなんていらんかったんや!
>>503 > ReactとRedux、Vueとnuxtみたいな関係
言いたい事は分かるが一応訂正。reactとnext.jsに対応するのはvueとnuxt.js。ステート保持はreactがredux、 vueがvuex。
Reduxが要らなくなるのがHooksなんじゃないの?
context apiと組み合わせれば。 デカイアプリはまだまだreduxじゃないかな? しかし確実にstate管理の枠組みにも変革を促すであろう。 post reduxにどんなのが出てくるのか楽しみ。
ということで、またオワコンが一つ増えますね。Reduxはオワコン。 ほれ、また次だぞ。チキンレースは終わってないぞ!
まあreduxはめんどくさすぎるからな。 小規模アプリでも必須みたいな風潮が異常だった。
>>507 現状nuxtは大きくなりすぎたからnextと比較するのは不毛
reactでブラウザの戻るに一つしか履歴が登録されない 意味不明
ヒストリー使ってるんだけど ・createBrowserHistoryライブラリ(IE対応のため) ・redux ・react-redux ・connected-react-router これら使ってなんとか構築してるんだが一つしか履歴残らん てか解説サイトがほとんどない…
とりあえずhistory直す なんかわからんがLink使うとhistoryの履歴が3つ登録される SPAはここがめっちゃめんどくせぇ なんでブラウザの操作までjsで組まなきゃいけないんだか
てかオッペケってReactマスターやなかったんかい
別にSPAにせず普通にページ遷移してもいいんだがな。誰もやらないだけで。したがってサンプルも転がってないw
>>522 すまん、App.jsのコンストラクタ内でthis.props.history.listen使ってしまっておった
これやめたら直りました
dispatchで初期化するのにつかってたのが間違い
Reactはホント人によって使うフレームワークやライブラリが全然違うな。 ちょっと興味あったけど、これじゃどっから始めたらいいか全然分からん。 てか、ReduxだのNextだの、第三者が作ってるであろうフレームワークの開発なりサポートなりが終わってしまったら、代わりはどうすんだ?
極力公式か大きめの企業がメンテしてるものだけで作る コミッタが少ないものは使わない ライブラリへの依存が散らばらないよう自コードで軽くラップして使う
まぁ本当にSSR必要かってのもあるけどね 最近自分の関わってる案件だと会員サイトの認証済み領域の情報は一切検索エンジンにヒットさせる必要ないからSSRとは無縁なんだよな
>>526 大丈夫。その前にReactが終わる。VueもAngularも
あと数年後は今存在してないフレームワークが使われてるよw
数年後も残ってるのはjQueryだけ MVC+jQが正解なんだよ
いやreact vue angularについては長生きすると思う。ここ数年は本当酷かったフレームワーク戦争も落ち着いたしあと5年は使えるんじゃないか?ようやく腰を据えて安心して学べる状態になった。
お前ら、RADツールって知ってるか? ウェブの世界じゃあまり知られてないかもしれないが デスクトプアプリの世界じゃ20年以上前から存在してるものだよ VBとか有名だな で、reactなどは近い将来RADツールに置き換わる。 RADはツールであってフレームワークではないから 正確に言うとRADツールを作りやすいフレームワークになるということ コンポーネントは作ってパーツとして使える。 使いやすいコンポーネントが最初から揃っている。 GUIでマウスで操作するだけで簡単にコンポーネントが配置できる まあここまではUIエディタ(HTMLエディタ、JSXエディタ)と 変わらんわけだがここからがJavaScript コンポーネントを選ぶんで書きたいイベントを選ぶとイベントハンドラが生成される 自分で紐づけとかしなくて良いんだよ。JSXとか書かなくていい。 イベントハンドラ名もデフォルトで自動生成、プログラマはイベントの中身を書くだけ データのバインドとかもRADツールで紐付けるべきものの名前を書くだけ 20年前のVBはすでにこういった世界だったんだよ?
マウス1つでレスポンシブデザインまで対応出来るなんて 夢みたいなツールじゃん
レスポンシブはブレークポイントを複数定義して デフォルトからの差分みたいな感じでデザインするんだろうね
選択肢の一つをあたかも統合されるかのような詭弁はNG。 ポトペタASP.NETが密結合過ぎてわざわざOSS界隈に歩み寄った歴史を思い出せ。
技術がなく判断できない企業はノンプログラミングという言葉に騙されやすいのだろうね
>>539 WIXはそんなに悪くないが一般的には酷いの多いよね
>>539 ノンプログラミングはだめだろうね。
今のRADはGUIのエディタで作ってもいいし、
コードで書いたとしてもGUIに反映されるようになってる
WebFormは一瞬でページ作れるから ものによっては便利だが
スキャフォールディングはページを作るものではなくて ベージの一番最初のコードを生成するだけです。 その後に生成したコードを修正して作っていかなければいけません。
修正すればええやんけ ポトペタより簡単でソースも綺麗やで ポトペタなんてマウス操作とアイコン探しの悪魔的苦行の繰り返しやないか あれが楽とかマゾでもよう言わんで
いやちゃんとしたい時はMVCなんだが WebFormの存在理由もそれなりにある
さすがにVueとかにはくっつけられないから スレ違いだったな RazorPagesはくっつくかな
>>538 MVCやSignalRも知らないおバカさん
>>549 RADの話が出たからWebFormsみたいなクソが消えた歴史を考えろっつってんのに、何がSingnalRだよ。文脈読め。
>>550 ASP.NET=Web formsっていう発想自体が頭おかしいんだよ
Reactというかredux?見てて思うのは、 お前らネットワークプロトコルでも作ってるのかよって話 普通にメソッド実行すればいいのに、 パケットデータ作って、そのパケット解析して処理実行する メソッド一つ実行すりゃ終わりなのに 関数型にしたいのかどうか知らんが、目的を履き違えてる。 バグを減らすために関数型にする。そのために複雑にしてバグを作りやすくしてどうする 関数型じゃなくていい、バグを減らすためにシンプルにしろよ
>>553 しかしflux概念は世界的に認められてるから広く使われるわけで、キミの主張vs世界中の開発者の同意でキミが勝てるわけないよね
そのへんどうすんの?
反論しないで、世界に広める方法を聞く 変なレスだなぁw
ところでさ、 function foo() { return { hoge: 1, hage: 2 }; } expect(foo()).toEqual({ hoge: 1, hage: 2 }); みたいな意味のないテスト書いてないよな? 固定の連想配列返す関数のテスト書いても意味ないぞ 二度手間なだけで、それを避けるためにどうせコピペするんだろうし
>>553 メソッド実行するって具体的にはどういう形?
dispatchの前処理と後処理を自分で追加したメソッドを
ストア(↓)に生やすようなのをイメージしたけど合ってる?
https://github.com/reduxjs/redux/blob/master/src/createStore.js >>557 ようするに、
Actionみたいな「処理の内容をパラメータ化したオブジェクト」を
いちいち作らせるのをやめてくれ、
Reducerみたいな、switchでActionのパラメータみて分岐して処理する
ようなおのをいちいち作らせるのやめてくれ
ってことだよ。
onclickにincrementメソッド書いたら、+1するincrementメソッドが呼ばれます。
でいいじゃねーか。直感的だろ?それで別にテストできないわけじゃないんだし
IOモナド不要論に近いものを感じる 単にReactを選択しなければいいだけなのにね 選択肢の中に一つでも気に入らないものが混じってると全否定を始めるんだからもう
IOモナド不要論というか、IOモナド至上主義じゃないってだけ 副作用排除は素晴らしいよ?でも複雑にしてまでやることじゃない。 バグは副作用でも増えるだろうが、複雑にしても増えるんだよ 書くものが増えれば増えるほど、書き間違いも増えテストも増えるんだから
>>558 その形なら単にReduxを使わなければ良いだけでは?
使用を強制されてるのなら何とも言えないけど
ちなみにうちは本開発でReduxを使ってない
別に嫌ってるわけでもなく、とりあえずバニラなReactでやってるうちに
Contextが来たのもあって特に入れたい状況にもならずって感じ
>>561 たぶんReduxは捨てろって流れになるだろうね。
それが可能になるContext
行き過ぎた関数型ブームなんだろうな。
だいたい行き過ぎて戻ってやっと最適な状態になる。
あと別に使用を強制されてない。
React自体使ってないものw
>>553 ていうかまず状態って言うほどサイト全体で持つ必要あるのか?って思うね
大体の場合はコンポーネントの中で閉じててもいい場合が多いし
本当にサイト全体で持ちたいデータはリロードとかて吹っ飛ばないようにlocalstrageにでも書いた方がいいんじゃないかとか
遷移して戻ってまだ編集内容が残ってると逆に気持ち悪い
どのコンポーネントが状態持ってるのか探す方がめんどくさいじゃん。
reactは好きだけどreduxめんどくさい論は大賛成! hooks + contextに大期待!!
>>565 その部品の情報がその部品で閉じてるなら探す必要ないじゃん?
Redux使わずcontextAPIのみでアプリ作ったけど、なかなか良い感じ シンプルisベストだね
>>567 その部品で閉じるような状態ならな。
二つ以上の部品にまたがる状態だってあるだろ。
だから2つ以上の部品にまたがる所だけで良くなるだろ
reduxなんて面倒くさいレベルに入らないだろ しょぼいシステムしか作ったことがないんだろうが
>>571 その分け方がわかりやすいと俺は思わん。アドホックな部分が増える。
>>572 つまりあなたも面倒くさいって思ってるわけですよね?
このぐらいのレベルなら耐えられるって言ってるだけだし
Reactそのものが面倒だと思う サーバーサイド一本の人が移動してきて、Reactのコンポーネント一つ任せたら、onclickで画面をエフェクトさせるのが出来ないとブーたれてた cssと組み合わせてやるんですよと教えたけど、デザインとロジックが分離されてない糞フレームワークだと文句ダラダラ 結局Reduxのところだけ担当してもらった サーバーサイドだけの人はこの世界では使い道がない
それはサーバーサイドしか知らないのに画面のエフェクトだデザインとロジックの分離だ言う その人個人の問題なんじゃないかね。
>>574 こんなのより何千倍も面倒くさいプログラミングしてきてるから面倒くさくねえ部類って言ってんの
頭イカれてんのか?
何千倍も難しいって、口調が前にどこかのスレで見たような気がする 確か自称ゲームプログラマーじゃなかったけ 私大文系はクズだのヴァカだの幾何学的計算が出来れば高卒でも理系とか意味不明な発言の人だった
バカじゃなくてヴァカという変な単語を連呼してたので覚えてる
てかテキストボックスのチェンジイベントでイチイチReducerだかDispatcherだかを経由してストアに書きに行くもんなの? 確定ボタン押した時でよくない?
>>577 デザインとロジックが分離してない上にVueみたいにコンポーネントとして独立するわけでもないっていう中途半端さがね
落ち着け、議論を飛び出してケンカになってるぞ。そこまでくると他の人に迷惑だから頼むから我慢して2、3日スレから離れて観て欲しい。
>>583 ビビんなよ。5chではよくあることだろ
ビジネスロジック→Service(バックエンド) プレゼンテーションロジック→ViewModel(js) デザイン→View(html/css) サーバーサイドおじさんはプレゼンテーションロジックがお気に召さないらしい ビジネスロジックとデザインだけで完結するMVCフレームワークが人気
>>585 そこに、ActionとAction CreatorとReducerとStoreは
どこに含まれるの?って話だよ
アーキテクチャ上、必要ないものが多すぎる
>>586 分類するなら全部プレゼンテーションロジックだろう
SPAとかいう誰得要件のせいでプレゼンテーションロジックが過剰に肥大化複雑化してしまった結果それらが産まれた
従来のマルチページに戻すだけでスッキリ解消される
誰得っていうけどブラウザアプリ作るならSPAの方がUXが劇的に向上するケースが殆どじゃないか?
UXが向上したということにしたいだけでは? 案外ユーザーはシンプルなMVCのほうが簡単で良いと思ってるものさ
シンプルなMVCかどうかの判別ってユーザーからできるの?ユーザーってもしかして顧客のこと?
年明けてから二ヶ月経過したけどなんだかんだ書籍出てるな 売れてるんかねぇ 動かして学ぶ!Vue.js開発入門 (NEXT ONE)/翔泳社/森巧尚/2019/1/15発売/ISBN-13: 978-4798158921 Vue.js & Nuxt.js超入門/秀和システム/掌田津耶乃/2019/2/5発売/ISBN-13: 978-4798056593 AngularによるモダンWeb開発 基礎編 第2版/日経BP社/末次章/2019/2/23発売/ISBN-13: 978-4822254537 React.js&Next.js超入門/秀和システム/掌田津耶乃/2019/3/8発売/ISBN-13: 978-4798056920
ウチの会社でReactのアプリを独自UIの新規開発からロジック周りまで全部できるPGは一人しかいないわ オフショア入れて百人以上PGいるけど、みんなFlexbox使って自分でUI書けませんとか、エフェクトのアニメーションを自作できませんとか、htmlとcssで躓いてる デザイン系が得意なPGだと今度はDBやAPIが良く分かりませんという風になる デザインとロジックの分離が不完全なので不器用な奴には使えない 結局Reactのアプリ制作はその一人が設計構造を考えて何人かで分担して作ってる その一人がいなくなったら改修も容易ではない
>>592 そう最低限なんでもできるリーダーがいなきゃ初期導入すら始まらんもんな
浸透すらしてないのにフロントとバックを分業分業言い過ぎだとは常々思ってる
html5で独自属性を使うときはdata-*で命名する規則になってるけど どのフレームワークも無視してるのはなぜ?
「知りません」は別に問題無いけど「やってみても分かりません」という奴は PGとも呼べない半人前だと思う でも多いんだよなそういうの
>>592 フロント、バックエンド、DB、インフラからデザイン、写真加工、キャラ背景画作成、アニメーションまでできる俺は頂点に立てるかな?
>>593 > 浸透すらしてないのにフロントとバックを分業分業言い過ぎだとは常々思ってる
一人でなんでもにできる人が居ないから、分業にしないとだめって話なんじゃないの?
Reactでどうやって分業するのかしらんが。
Reactは設計レベルで分業がし辛いフレームワーク
rails、angular、vueなら分業しやすいとでも?
まあそうだね。 RailsのERBはHTMLに近いから編集してもらえるし、 AngularもHTMLベースだから。 ReactとVueはJavaScriptの中にHTMLの断片が埋まってるから それを修正して思い通りのデザインを作ってもらうのは無理だろう
フロントとバックは分業したほうが楽だ どっちもできる人は多くない いたとしても負荷がかかるから無理強いするとブラック企業になってしまう それに分業といってもAPI(作る|呼ぶ)だけだろう 難しいとこなんて何もない
>>599 逆に分業じゃなっきゃできんってヤツはわざわざ勉強してまで新しい技術を導入したいとかいい出すヤツは居ないっていう話だよ
>>600 なんでRailsねじ込んできた?
>>594 無視ってどういう意味で?少なくともReactのアプリで使えているけど。
阿部寛のHPを構築するならVue、React、Angularどれがいいの?
>>603 意味がわからん。
仕事を一人でやるのは大変だから、分業できるようにしないと駄目って話なんだが?
新しい技術であっても、それで分業ができればいいんだよ。
というか分業ができる技術を導入するべきだ。
この作業がそんなに難しいことだと思えないんだけど、そんなもんかね。 >ReactとVueはJavaScriptの中にHTMLの断片が埋まってるから >それを修正して思い通りのデザインを作ってもらうのは無理だろう
>>607 難しいかどうかじゃなくてやり方が全く違う。
普通はHTMLとCSSで作るんだから
>>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の独自属性とは違う位置付けだと考えた方がいいんじゃないか
Vueの独自属性はHTML5準拠やで なのでdata-*にしなきゃいかんルールなどない
Chromeのvue dev-toolで確認できるんじゃないの
>>611 それ使えば確かに見れるけどElements側に出ないって事は実DOMとしてはレンダリングされてないって事だと思う
単にインスペクターが無視してるだけだ 正しい属性なんだからレンダラが無視するわけにもいかんだろ
>>609 >v-modelとかv-onとかv-bindとか
そうそう。data-*ではないカスタム属性ってEclipseに警告だされてすっきりしない
だから実行時に消えるとしてもhtml5のカスタム属性としてはよくない気がする
本来ならxhtmlの名前空間みたいに*:*でカスタム属性を命名できれば良かったんだけどね
未だにEclipseなんてゴミを使ってるヤツが居ることに驚きなんだか
実際レンダーする前のリソースなんだから しょうがないんじゃないの VSCodeとかでVue拡張使えばいいじゃん
>>613 v-ifとv-showの違いとか読んだことない?ないものはないんだよ
なんだ、レンダリング前のテンプレートの話か。ならHTML5に準拠してないのは当たり前じゃん。 たしかにXHTMLならその規格に準拠した中で拡張できるけどHTML5はそれと決別したしねぇ。
>>618 正しくDOMとして評価された後にDOMを消してるだけ
拡張属性は正しく評価されてる
>>620 だからその評価がBlinkやGeckoみたいなレンダリングエンジンで評価されるか
V8やSpiderMonkeyみたいなJavaScript実行エンジンエンジンで評価されるかの違いだって
>>608 そこまで違う作業とあんまり思ってなくて、
やってもらうとしてそんなに反感食うもんかなという風に思ってるのだが。
かなり勝手に思ってるだけだから実際の現場感覚はわからんけど。
UIが劇的に切り替わる様な要件じゃ デザインとロジックを完全に分離とかそもそも不可能じゃないの
デザイン プレゼンテーションロジック ↑JS+HTML+CSS -------- ↓API ビジネスロジック デザインとロジックを分離するって言った場合、分離するのはビジネスロジックのこと プレゼンテーションロジックを分離するという意味ではない
WebまではHTML+CSSだけ分離も可能だけど スマホWebアプリ/スマホアプリになってくると動きも含めてのUXという性質が強くなる UI用ロジックや機能性まで考慮する「UXデザイナー」と 静止画の用意で終わるデザイナーとの差は大きい Reactは後者のデザイナーとは相性悪いだろうね
デザインもUIもUXもフロントも全部やればいいじゃん そもそもなんでできないのか不明 フロント勉強してできるようになったのならデザインも勉強すりゃいい
少なくとも難しいから分業してるわけじゃないだろうね。効率の問題。
>>627 時間があればじゃなく、必要だからやらなきゃいけないんだよ
最近世界的にもその必要性が言われてる
>>628 効率悪いから一人でやるべきなんだろ
・フロントデザイナはコーディングできない
・フロントエンジニアはデザインできない。デザイン貰ってもセンスゼロだからコーディングで表現できない
https://postd.cc/the-death-of-front-end-developers/ >>629 開発の規模とか体制によりけりだろ。
例えば自分が所属してるとこだと、フルスタックにやれる人にはデザインなんかに凝ってる時間があったら別の仕事やらせたい。
効率でいうなら複数のサイトを作業区分毎に分業するよりも1サイト1人でやる方がよっぽどいいと思うけどね
>>630 >デザインなんかに
そこの認識なんだよなあ
プログラマはデザインわかってないからデザインなんかにという言葉が出てくる
>>632 うーん、なんか噛み合わないな。デザインは大事だと思うから分業して欲しいと思うんだよね。そしてエンジニアが楽しいからってデザインに凝るのをよくないと思ってる。
>>632 まぁ例えば
プログラミングレベルが10で
デザインレベルが5とかの人材の場合
どちらかと言えばデザインよりコーディングやって貰った方が効率いいってはあるんじゃない?
>>631 それは否定しないがその人材を安定して確保しようとするといくら払えばいいの?という話にならないか?
>>636 確保するんじゃなくて育てようって気がないのかね
これだから衰退するんだよ
>>634 デザイン凝るっていう判断はどこでしてるの?
仕様として必要ならやるよな
それともそのフルスタックエンジニアの独断でやってるのか、デザインわかってない奴が決めてるのかにもよる
>>637 育てること考えると余計に分業したくなるだろ。2人を両方フルスタックにするのと、それぞれ専門持たせて育てるのどっちが現実的なのか考えてくれよ。
なんか理想論でマウントとられても困る。
人材云々の話は経営者が判断すべき問題であって 勉強しなくていいとかそういう問題じゃないでしょ
>>592 みたいに1人が抜けたらヤバイっていう状況はホントにヤバイから
できるうちに育てた方がいいよホント
>>638 まあそれはそうだ。
仕様がガッチリ決まってるようなデザイン作成ってのを見たことないから故の思い込みかもしれんが、UIとなると必要以上に時間がかかってしまうという思い込みが自分のなかにあるのは確かだ。
>>640 勉強すべきかどうかという話だったの?だとしたら俺も勉強すべきだと思うよ。
ちなみに俺は
>>630 で体制によりけりと書いてるように、少数のとこならエンジニアのスキルや素質に合わせればいいと思ってる。少数でイキのいいベンチャーとかなら有能が多数派ってこともあるだろうしね。
おそらく仕事量に対する有能人材の割合が重要なんだと思う。
規模が大きくて大人数じゃないと作れませんねぇ、じゃあどこで分担しましょうか? って考えればいい。
業務系だとそういう場合はレイヤーじゃなくてコンテキストで分けるのが主流だね レイヤーで分ける企業はかつて見たことない
規模が大きくて大人数じゃないと作れませんねぇ、じゃあどこで分担しましょうか? え?分担したら効率が悪いだろって? じゃあ、2人で2ヶ月の仕事を、あなた1人で2ヶ月でやってくださいね。 効率がいいんだから2倍ぐらいやれるでしょ? でも給料は変わりませんから。
>>647 そうなる
エンジニアスキルはできない奴に比べて何倍も差あるからな
だから給料もそれに比例する
> だから給料もそれに比例する 夢見るのやめとけw 2人で2ヶ月も、1人で2ヶ月も 働く期間が2ヶ月なら給料は同じだ
スケールしない作業だと言われればそうかもなとしか言えんな。 できるなら起業しとる。
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デプロイからシステムテストまで〜
VIDEO >>649 フロントデザイナーとフロントエンジニアがいても完成しない(デザインをコーディングで実現できないから)
しかしフロントフルスタックエンジニアがいれば何倍も早く完成する
何倍も早く完成するなら給料高くて当たり前
キミはどんなクソな会社で奴隷やってんの?
そもそもキミはフロントフルスタックエンジニアなのか?
寧ろフルスタックエンジニアって中小にこそ居るからな 待遇良くないってのもまぁあると思う
Heroku を使うのは、圧倒的にわかりやすいからだろう それで、プログラマーの人件費が節約できる
>>654 逆にどういった組織を想定しているのか聞きたい。
1人にやらせた方が効率がいいのは当たり前だが、高給払えるような利益あげてる企業で、そんな体制で運営できるような小さなプロダクト扱ってる会社ってそんなにあるのか?
慣れてしまえばLinuxでの鯖構築なんて難しい事なんもないけどな 特定の会社のインフラに依存するのってなんか怖いよね
>>658 動かすまではともかく、商用運用するとなると結構ハードルあがるから需要はあるんじゃない?
安定稼働、セキュリティ、費用計算、etc.
>>629 デザイナのコーディングは昔からの課題だよな。
ただcssやdomが打てるなら、vueだとかなりスッキリ分業出来ると思うけどな。社内か社外かの方が問題大きい。
>>657 フロントフルスタックがほとんどいないから仕方なくフロントデザイナーとフロントエンジニアを雇っているわけじゃん?
てことは当たり前だけど2人分の給料払ってるのは事実だよな
それが小さな会社だろうが大きな会社だろうが2人分払ってる
しかしそこにフルスタックが入って2人より速く作れて品質高いなら、2倍払っても納期早まるんだから安くなるじゃん
そいつは高給かもしれないがむしろ人件費安くなるんだけど?
>>661 なんか勘違いしてないか?
・早く作れるとしても2倍の速度にはならない。
・なぜなら仕事量は2倍になるから
・でも給料が2倍になることはない
・儲けは会社のもの
・早く作れるとしても2倍の速度にはならない。 ・なぜなら二人の仕事を一人でやるので仕事量は2倍になるから ・でも給料が2倍になることはない ・仕事量が増えても納期は伸びない ・儲けは会社のもの
>>662 お前が勘違いしてるだろ
・分業の場合
フロントデザイナーがデザインする
↓
フロントエンジニアがコーディングする
↓
デザインセンスないからコーディングできない
↓
納期遅れる
・フルスタック1人の場合
フルスタックがコーディングとデザイン両方を同時にやる
>>626 >フロント勉強してできるようになったのならデザインも勉強すりゃいい
これなんかいい勉強法ってある?
2倍くらいはなるだろ上手く行かなきゃ進捗出ない事なんてザラにあるだろうし
>>665 イラストレーターとかが1からUIデザインするサイトとかじゃない限りはCSSフレームワーク使えりゃいいんじゃない?
>>665 自分で言っといてすまんけど、正直デザインセンスっていくら勉強してもなかなか向上しないんだよね
ベースとなるデザインの勉強はそのへんの学校に通いつつ、普段はひたすらUI/UXの情報みたり(海外系サイトおすすめ)して
構造や配色などの知見を増やし、あとはフロントデザイナーに金払って教えてもらう
>>664 それただのウォーターフォールやん
分業は同時進行するんだよ
・フルスタック1人の場合 フルスタックがデザインする(その間コーディングできない) ↓ フルスタックがコーディングする(その間デザインできない) ↓ 一人でやるから同時に作業できなくて時間がかかる ↓ 納期遅れる ・分業の場合 フロントデザイナーとフロントエンジニアが両方を同時に作業を始める
でも分業するとインターフェースの協議に時間がかかるからそれがなかなかペイできないんだよね
>>668 横から質問なんだけど
デザインが決まってない状態で
フロントエンジニア(プレゼンテーションロジック担当?)って何の作業するの?
>>671 詳細なデザインがないと出来ないこと以外の全部
>>671 あのさぁ、かっこいい見た目なんか作らないでいいから
動きが必要なところをさっさと作るとかあるでしょ
かっこいい見た目といったのに 全く何も表示がないものと解釈するのか 馬鹿なのかな
>>678 そういうのは手戻りではなく設計不足というのですよ
>>679 設計の段階でデザインがほぼ固まってから実装ということなら
デザイン→実装の直列作業で
同時進行じゃない気がするんだけど・・・
デザインとロジックの分業は分かるが 結局フロントロジックとバックロジックの分業なんてしたって無駄なんだよ
>>678 おれこのくらい他人のデザインも不要だしモックなくても頭の中でデザインできるからすぐにコーディングできるわ
なんなら数パターンのデザインを一つのソースで作ることもできる
さっきから言ってることだが、フルスタックはデザインもコーディングも「同時進行」で作業するんだよ
デザインしてからコーディングをやるんじゃないから
>>678 手戻りが出ないように最初のざっくり方針を決めとこうな
>>682 > さっきから言ってることだが、フルスタックはデザインもコーディングも「同時進行」で作業するんだよ
同時進行で作業するが、一人でやるから時間が2倍かかるって話なんだが?
どうしてもデザインが完成しないとコーディングが出来ないって言うなら、 相手にデザインさせている間、自分は違う仕事をやればいいだけだし
>>685 何度も言うのめんどくせ
まあわからん奴にいくら言ってもわからんからどうでもいいや
人数増えた分だけ作業が速くなると錯覚してる大企業体質に何言っても無駄だと思うよ
なんで極論同士で争うんだ? 開発規模(複数プロジェクトの合計の規模も含む)が大きくなって一人じゃできないから分業が発生するってだけだろ? みんな一人でやった方が効率がいいとわかってるし、一人じゃ限界があるってわかってるんだよな?
人数が増えるほど、すり合わせコストが掛かるから、単純な掛け算にならない。 意思疎通・教育コストが掛かる 仕事量 = 単位仕事量 * 人数 * (1 - すり合わせコスト) 1 - すり合わせコストが、人数が増えると、 0.8 から、0.5 まで、ドンドン下がっていく 工場で言う、段取りコスト・間接作業。 直接作業をするのに必要な、作業 だから、プログラマーのように難しい仕事は、単純に人数を増やしていけない。 人数効果があるのは、すごく簡単な単純作業の場合だけ こういうのは、中小企業診断士・MBA のテキストに書いてある
でも複数人数の良い点も多い 視野が広くなる。 一人じゃ気付かない事に、気付く 教育にも良い。 ペアプログラミングは、非常に効果的 一見、損に思うけど、 教育効果により品質が向上して、後で十分に取り戻せる
>>684 「デザイン」の定義が食い違ってるのかもね
それはデザインを先に固めるって言うんだ
同時進行してない
デザインは設計だと考えてるからこそ
>>668 に疑問を持ったわけ
こういったこと
https://uxdesign.cc/designchallenge-cd7bdb589855 >>696 ざっくり方針を決めただけなので
デザインは変わることがありますが
デザインを先に固めています。
と言いたいの?
「ざっくり方針決める」だけで給料もらえて納期遅れを下流のせいにできるなんて…… ……なんていい仕事なんだ!俺がやりたい!
ウェブ系は楽だよなぁほんと モダンで便利なエコシステム ハイスペックな開発機 クラウドへのアクセスもサクサク 厳しい社内統制もなくゆるい現場 シンプルで簡単なドメイン 10年物のレガシーなんて無い
>>698 わざと?必死だね?
ざっくり方針を決めるのは、デザイナーとプログラマーで
並行して作業を進められるようにするためだよ。
でないと一人で作業することになって、2倍の時間がかかる
>>699 フロントはどんどん楽になるよね。やってて楽しいのがweb系。ただサーバサイドやDB、ネットワークはレガシーも残ってるよ。
たしかサーバーサイドJavaでJSPのテンプレートエンジン廃れたよね? htmlに<if>とか<for>とか変なタグを入れるなって流れになったはずだけど 最近はJavaScriptで同じようなことしてるよなあ
それはJavaが廃れたんであって、Javaの世界じゃあ普通にやってるよ。
>>704 JSPはJAVAソースコードを出力する為のテンプレートであって、HTMLそのものでは無いよ。
JSP→解析→JAVAソースコード→コンパイル→classファイル
このclassファイルが、外部からのリクエストに対してHTMLを出力して、レスポンスで返してるんや。
んで、出力されたHTMLには<%if( 条件式 ){%>なんて文字列も出てこないよ。
そもそもこの<%%>タグはHTMLの為じゃなく、JAVAソースコード生成の為に使われるから出てくるわけ無い。
Spring Boot のテンプレートエンジンは、Thymeleaf とかだろ
スレ違いかもしれないけど、たまには気分転換にvueとかreactとかの話題はどうかな?
Reactの仮想DOMとかいうのが未だに分からん HTMLをオブジェクトの木構造にしないで文字列のままで握ってるってことでOK?
>>710 違う。
メモリ上に持つ実DOMの劣化レプリカ。
そして利用者は実DOMはイジらず、劣化レプリカの方をイジる。
angular react vueなどの仮想dom系のライブラリが劣化レプリカの変化から、最小の実dom操作を計算して適用。
昔は人がやってた仕事がライブラリに委譲された格好。
HTML のタグを javascript のオブジェクトで単純に表現しただけのもの。react であれば、createElement 関数で生成されるオブジェクトのことになる。で、そのインスタンスの変化に合わせて実際の HTML に反映してくれる。
>>711 HTMLElementじゃないけど似たようなのをツリーで持ってるのか
HTMLElement.clone(true)でページ全体のクローンを作って、
それをDOM操作してからdocument.documentElementに差し替えるのかと思ってた
単純にFragment使ってDOM操作するより速いのか気になる
やってることは実DOMの変更をバッファして 変更タイミングをいい感じでやってくれてるってことじゃないの?
>>713 > 単純にFragment使ってDOM操作するより速いのか気になる
速くならない
× 仮想DOMは速い
○ 仮想DOMは遅くならないように頑張っている
速い速い詐欺のどこが詐欺かって言うと
何より速いかを書いてない所
仮想DOMの最初の発想は、実DOMと同じような内容をメモリ内に保持しておいて、
仮想DOMから実DOMをすべて生成しよう!という発想
もともとはゲームから来ている発想。
ゲームは1秒間に60回ぐらいメモリ内容を元に画面全体を書き換えている。
変更があるたびにDOM全体を書き換える。
当然DOMでそんなことやったら遅いって思うよな?
そこで差分を計算して変更があった所だけ書き換える
つまり
○ 仮想DOMは画面全体を書き換える発想だが、差分だけを書き換えるから、画面全体を書き換えるより速い
と言ってるだけ
そもそも実DOMを操作しているときは、必要最小限のものしか書き換えないので
仮想DOMが差分(必要なところ)だけ書き換えるといっても、それ普通ですよね?という話でしか無い。
むしろ仮想DOMは実DOM操作よりメモリ使用量は増えるし、差分計算の分遅くなってる。
実DOM操作自体の速度は当然変わらない。 人が書くか仮想DOMライブラリがやるかの違いだけ。 ライブラリは実DOM操作の回数を減らすため仮想DOM持って計算頑張ってるだけ。 「DOM操作が速くなる」とか言ってるのは全部嘘。
> 人が書くか仮想DOMライブラリがやるかの違いだけ 人は「全体の中から差分を計算してそこだけ書き換える」 なんてことはやってないですよ。 人はある処理の中でDOMのどの部分を書き換えたいかを 知っているので、必要最小限のDOM操作しか変更しない (クソプログラマなら全部消して作り直すとかいう無駄してるかもしれんが) その全部消して作り直すっていうのをやろうという発想が仮想DOMで 遅くならないように差分を計算して、必要最小限のものだけ変えよう。というふうに 自分で遅くしておいて、自分で改善した(速くした)って言ってるだけなんです
速度に関しては実dom直接操作よりは遅い。その辺はググればすぐ出るから見とくと良い。ただおかけでリアクティブという大きなメリットを手に入れた。ページ切り替えさえ差分更新してspaも出来る訳で、レスポンスは全体的に向上する。
人はある処理の中でDOMのどの部分を書き換えたいかを 知っている(担当の頭の中にある)ので、必要最小限のDOM操作しか変更しない。 人の頭に依存しないように機械的に 最小限のDOM操作を特定・適用までやろうとしたのが仮想DOM系ライブラリ。 人が脳のリソース使ってやるか仮想DOMライブラリが自動でやるかの違いだけ。
ここで忘れてはいけないのは > ただおかけでリアクティブという大きなメリットを手に入れた。ページ切り替えさえ差分更新してspaも出来る訳で、レスポンスは全体的に向上する。 リアクティブは本当に必要なのか? SPAは本当に必要なのか? ということ 世の中の多くのソフトウェアはリアクティブなんか使っていない。 それでまともに動く製品を作れている。 SPAもそうだ。ユーザーにとってはシングルページだろうが、マルチページだろうが関係ない。 シングルページだとページごとに分担して開発するのが難しくなる。 マルチページなら、ページごとに別の人が担当して開発するのが楽である。
リアクティブのメリットは複雑な入力フォームが分かりやすい。pc購入する際のカスタマイズ画面なんかが良い例。以前と比べて工期の短縮できて保守が凄く楽。部分的な導入も出来るからvueで試せば分かる。フォーム周りは圧倒的にリアクティブが良い。
>>721 リアクティブがやりやすいんじゃなくて、
以前のやり方がだめだっただけでは?
>>722 ある入力に対して別の複数の要素が動的に変更される場合、リアクティブだとcomputedプロパティで自動的にuiに反映されるよう設定するのがとても楽。これjqueryだと面倒だしミスも増える。
>>723 この程度って。。結構大変だよ。条件も頻繁に変わるだろうし。
>>724 やっぱり使い方がわかってないだけだな
ある入力に複数の要素が動的に変わるならば、
その要素の親に、クラスをつけて、
あとはCSSで、それ以下の要素の表示、非表示状態を切り替えるだけだよ
jQueryだと最低3行。あとはCSSでおしまい。
前から思ってるんだけど(自称)プログラマって HTML/CSSは嫌いです。出来ません。って人多いよね。 それを毛嫌いしてるというか、CSSなんてデザイナが使うもんだろ 馬鹿にしている感じで、俺出来ないから(笑)みたいな感じで言う。 恥ずかしいと思ってないんだろう。 多くのDOM要素はCSSを使って単に見えなくしたり表示したりすればいいだけなんだが (プログラマとしての技術力不足で)CSSを使えないから JavaScriptでいちいち作り出したり削除するしか出来ないんだよな
>>720 要件を勝手に決めつけないでよ
客からユーザーから代弁して喋るなら何だって言いたい放題じゃん
>>727 だったら要件を決めつけてメリットだって言わないでくれ
要件によってはデメリットなんでしょ?
簡単にいい感じのページが作れるのはメリットの一つだと思うけどな。 例えばpythonは成果物に関してはCに対するメリットはないけど簡単に作れるから人気なわけで。
>>728 いやだからさ
「要件次第」で済む話を何度掘り返すのよ
スレタイ見てスレチだと思わないの?
>人はある処理の中でDOMのどの部分を書き換えたいかを >知っているので、必要最小限のDOM操作しか変更しない >(クソプログラマなら全部消して作り直すとかいう無駄してるかもしれんが) クソプログラマは全部消して作り直す 賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
>>725 管理対象の状態数が増えるのがやだ
状態はできるだけ純粋で論理的な形式で管理したい
という要求がスッポリ抜けてるね
GoogleもこれからPWAで攻めてきそうだけどね
>>732 CSSは宣言型なので、
管理対象の状態数が減るんですよ
>>731 > 賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
もっと賢いプログラマは、必要なことしかしないんだよ。
Aを変えたいなら、Aだけを変えましょう。ってね
>>735 見えるか見えないかみたいな、ただの論理値を管理したいだけなのに
それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
まあ本当に賢いプログラマ達はフロントエンドなんてやらないんですけどね
AしたらBを変えたいんですが? Reactを使うと・・・・ ではBを変数に結びつけましょう。 そういうコードを書き換えます。 そうすれば変数を変えればBも変わります。 おっと待ってください。 そのために変数をSTOREに入れなければいけません。 STOREからとってきて、STOREを更新・・・いえいえいけません 新しくオブジェクトを作るのです。 そのオブジェクトを作るために〜 オブジェクトを変更する関数を用意するのです! その関数を作るための、はい、メッセージが必要ですね。 えぇ、ですからね、AしたらAction Creatorを使ってactionを生成して Storeに対してactinonをDispatchして、ReducerがDispatchに反応して actionタイプから今の状態から新しい状態を変更すれば、 ほら簡単にBが変わるんです! え?普通にAイベントのハンドラでBを変えればいいじゃないかって? ムキー!
>>737 > それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
だから、CSSを使うといいですね。
JavaScirptからは親となる要素にクラスを設定するだけなんですよ。
簡単。DOMがどういう構造になっているかなんて関係ない。
あとはデザインを作る人が、その状態でどう表示したいかを作るだけなんです。
fluxの概念を取り入れたらものすごく簡単に状態管理ができる! って本にもキータにもみんな書いてるんだけど?
>>741 私が管理したいのは見えるか見えないかという2つの純粋な状態なんです
ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
それはまるで物体から投影された影に干渉して、もとの物体を操ろうとするような愚かなことです
どっちも極端じゃないか? バインディングならjQueryよりはVueやReact使った方がいいと思うけど、 表示非表示やアニメーションならcss側でやった方がいいと思う。
仮想DOMとJQueryの世代の重要な違いとして セレクタやDOM操作を一切したくないという発想があるのではないだろうか JSXでHTMLをそのまま書くのもセレクタを使いたくないからだろうし
実DOM では、IO 操作が遅い 仮想DOMでは、JavaScript内の操作だけだから、速い
それはHTMLFragmentがあれば事足りる話っしょ
>>743 > ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
だからセレクタのクラスはブーリアンなんだよ
ある要素に、flagクラスというブーリアン値が
立っているか、立っていないか
>>746 仮想DOMを実DOMに反映させる所で
大幅に遅くなるんだよ
>>725 リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。ミスしようがない。うーん、なんでjQueryやcssにそこまでこだわるかね。みんな散々苦労してきた末のスマートな解決方法が仮想domでありリアクティブなんだけどな。一度試してみたら?食わず嫌いしないでさ。
> リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。 終わらねーよw 変数みてデザインを変えるコードを書かないとだめだろ
>>751 そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。
Falseになった結果どうなるかはuiの管轄でcssやdomとは本来無関係なんだよ。jQueryはそこが分離できない。
> そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。 別れてないよ。JavaScriptファイルを編集してもらわないといけない CSSだと「プログラマの俺は、この要素のクラスを設定するだけです。 デザイナーさん、あとはかっこいいデザインを作ってください!」といえる デザイナーはJavaScriptファイルを一切触らずに デザインを作り込むことができる。
jQueryで書く場合はこんな感じだね。 $('.my-component [name="switch"]').change(function() { $(this).closest('.my-component').toggleClass('active', this.checked); }); コンポーネントの中にある名前がswitchのチェックボックスがONになれば そのコンポーネントがactiveになって、 そのコンポーネント以下のデザインがactive用に変わる DOMの構成がどうなっているか一切気にする必要がないんだよ。
>>753 デザイナはスクリプトをいじる必要全くない。例えば
<div v-if=“isShow”></div>
というテンプレに対してスクリプトでは、
isShow=false
とするだけ。これだけでリアクティブになる。どっちがミスが少ないか分かるだろう?
すまん途切れた。どっちがミスが少ないか、分業しやすいか分かると思うんだが、どうかね?
> <div v-if=“isShow”></div> すいませーん、デザイナーさーん。 今度から、v-ifってのを覚えてくださいー。 いままでCSSで表示切り替えしてたでしょー? それ、今度からやめてくださいねー。 リ・ア・ク・ト。やり方覚えてくださいね。 やり方変えたんですよ。こっちのやり方にね。 え?他にも色々ありますよ。勉強してくださいー。
Javascript(Data/Model) - Javascript(UI/DOM) - HTML/CSS デザイナーが真ん中の層を如何にやるのかという話だろう HTML内にv-bindとか属性で埋め込むのもJQueryを書かせるのも同じこと 仮想DOMのフレームワークによって真ん中が無くなったとは言えないだろうし
jQueryはプログラマが使って、 イベントに反応してクラスを変更するだけなんだよ。 あとはDOMの構造とかCSSとか完全にデザイナーに 任せることができる。 デザイナーはデザイナーの流儀でやれるし、 JavaScriptフレームワークの流儀を押し付けることもない
>>758 HTMLのタグはDOMですか?
CSSで指定する色や配置はUIですか?
>>758 いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
>>757 うむ、リアクティブの方が良い事は理解できたようだね。あとは君がデザイナや上司を説得するんだよ。そこは別問題。
jQueryはすべてデザイナーがやるべき ボタンをクリックしたらどのタグの色が変わるのか、それを知っているのはデザイナーだけで良い
>>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/ ほらほらだからこうなるって何度も言っただろ フロントはフルスタックじゃないとこの程度ですら揉めるんだよ もう一度言うぞ デザインできないフロントエンジニアはクソ エンジニアリングできないフロントデザイナーはクソ お前ら言い争ってる時点で無能だと自覚しろ
>>761 >いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
そう、デザイン側のJSコードは減る。それはたしかだし、データ側JSとの繋ぎかたもはっきりとするね
欠点はHTML内に変なのをたくさん突っ込むのはいかがなものかってことかな
>>762 > jQueryはすべてデザイナーがやるべき
JavaScriptのライブラリなのにデザイナーって意味不明w
ボタンを押したら、ここのタグにこういうクラスがつきます。
って伝えるだけで、あとはそれぞれ作業ができる。
これが分業っていうんだよ。
>>757 どっちかというとその場合デザイナーに必要なのはv-showじゃなくてisShowだから
どういうモードの時変数の設定値を何にすべきかという一覧表があればいいだけじゃね?
てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
> てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ フロントエンジニアがHTMLを書くから 分業できないってことなんですよ
>>766 プログラマーはcssに書かれたclassの名前まで知らなくていい
その方がデザイナーが変更してもプログラマーが対応しなくて済むだろ?
デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
UI・UXやインタラクションはエンジニアがやる分野 世界的にもその方向性になってきている しかし世界中のエンジニアは無能だからまともにデザインできない ごく簡単なUIすら理解できない 終わってんだろ
最低限のモダンっぽい見た目でいいならもうcssフレームワークのどれかでもいいだろ
>>769 > いや、お前がデザイン覚えろよwwww
分業するんだよ
>>770 分業っていうのは、完全に相手のことを知らないで
できるわけじゃないんだよ。
必要最小限、クラス名だけ。
jQuery使って、HTMLとCSSを正しく使うだけで
最小限の連絡で、それぞれが開発できるんだよ。
>>771 > デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
コンポーネントには状態があるんだから、
少なくともその状態ごとのデザインは作ってもらわないと困る。
で、どうやるかというと、お互いで決めたルール
コンポーネントのここに、こういうクラスがつきますよー
というルールに基づいて
デザイナーは、HTMLのコンポーネントのタグに
classを変更するだけなんだよ。
最終的にはJavaScriptでクラスを変更することになるが
開発中は、手書きでクラスを変更するだけ
超簡単
>>772 いやUI・UXはデザイナーがやるべきだろ
そこで分離するからおかしなことになってる
デザイナーに求めるものなんて最低限なら画像データだっていい html形式でブラウザで表示できるなら大助かり 期日が守れないヤツ多いから最低限期日までにどっちか出してくれればそれ以上に求める事なんてねぇんだが
>>763 くわー面倒だなあ。でもコード見ないと分からんか。
[JavaScript]
isActive=false
[HTML]
<div class="my-component" class=“{active:isActive}”>
<input type="checkbox” v-model=“isActive”>switch
</div>
[css]
変更なし
どう?君のコードより随分少ないだろ。特にscriptなんて変数一個で終わり。まだ分からない事あるなら聞いてみなよ。でもスマホ手打ちなんで面倒なのはやめてw
おっとミスった。スマホ手打ちなんですまんね。 [HTML] <div class="my-component" class=“{active:isActive}”> 正しくは <div class="my-component" :class=“{active:isActive}”> :が抜けてたよ。
>>779 あのさぁ、動かないコード書かないでくれないか?
scriptタグまでは書かなくていいよ。jQueryでも書いてないからさ、
でも動くコード書いてっていったよね?
せめてjsfiddleで動かしてから来てよ
なんか動くって嘘つきそうだから
>>779 では動かないという証拠として
>>779 の内容を
https://jsfiddle.net/b5xusp1d/ に書いておいたから
ほら動かないでしょ?
これを動くように修正してね。
jQuery版の実際に動くコードですよ。
https://jsfiddle.net/eu2wm3tk/ >>781 それは贅沢だなw。こっちはスマホだと言うのに。あ、そうか君はvue知らないから動作チェックできないのか。どうせなら入れてみたら?簡単だよ。
あとコードは短くなった訳だが感想はどうかね?
ほんとなんですぐばれる嘘を作るんだろう? 理解できないな
>>783 だから動かないって
証拠
>>782 にかいたからさ。
お前がスマホとか知らんわ
スマホだから動かなくてもいいでしょ?
嘘だけど、いいでしょとか。恥ずかしくないの?
あ、ReactじゃなくてVueか。
はい、こっちにVue読み込んだの置いたからさ、
こっちも動かない。はぁ。動かない(笑)
https://jsfiddle.net/zvft0qo8/ >>786 書き方間違えてるぞ。vue初期からしなきゃ動かんよw
あともう一つ教えといてあげるよ。
作ったのは.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/ >>787 書き方間違えてるって。
動くコード書いてないお前の落ち度じゃん
vueは面倒だなーって思いながら、 vue初期からしなきゃ動かんよw と指摘された点を 今書いてるのかな?w
>>789 おいおい、vue知らないのに勝手にアップして動かないと言うのは無しだろ。知らないなら知らないと言えば教えてあげるのに。初期化方法までは面倒みれんぞ。jQueryだってそうだろ?
まあいいよ、後で動作する奴を上げてあげるよ。
> jQueryだってそうだろ 何言ってるんだ? jsfiddleにはまさにこれだけのコードしか書いてないんだが? $('.my-component [name="switch"]').change(function() { $(this).closest('.my-component').toggleClass('active', this.checked); }); いやまさかそんなこと、ありえるなんて思いもしなかった! レベルなのか?w
ついでだからちょっと改造
$('.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/ >>791 > まあいいよ、後で動作する奴を上げてあげるよ。
じゃあHTML側はこれ相当でお願いね。
コンポーネントは3つ。
<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>
>>794 ふう、やっとPCの前に戻ってきた。というわけでちょっと上げてみた。ブラウザから5ch書き込むの久しぶりだわw。
https://codepen.io/hinoragi/pen/YgVQjK 簡単にテンプレート化してコンポーネント化もしといた。何か分からないことあるなら遠慮なく質問してよ。ちょっと用事あるから次は10時ぐらいにスレみる予定。
[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のコードに移動したんで デザイン変えたきゃVueの方いじってくださいねwww やっぱりこうなるw
[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の方いじってくださいねwww やっぱりこうなるw 行数は増え、分業ができなくなる
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>
>>797 気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ。一番簡単なサンプルだし、5chでやる規模じゃない。
それより最初の話はどうした?vueの方が随分コード短いぞ。その質問に答える為にサンプル上げたんだが、答えるのが礼儀ってもんだぜ。
>>799 > 気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ jQueryと同じことをするのに、話が長くなるんだへーw ま結論な。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'}) それに一番ひどいのは、やっぱりmy-componentのdivの中身を デザイナがいじろうとしたら、JavaScriptファイルを修正しなければ ならなくなるってところなんだよね。 DOMとコードが密接に結びついちゃってる。
jQueryの場合、JavaScriptのコードとDOMの構造は結ぶていてなくて 結びついているのは、.my-componentというクラス名と input name=switchだけ。だからDOMの構造をどんなに変えても クラス名とそういう名前のinputがあればいい コードとDOMの構造が分離されている
>>801 やっぱり全く理解できてないじゃん。最初の話に戻すぞ。
最初の例ならスクリプトは、
new vue({data:{isActive:false}})
これだけ。君が分からなくて動かん!!とか騒いでた奴。君のその3行のスクリプトと比べてみなよ。
次に、まあ君はvue知らんからしょうがないがテンプレートは実務では当然外部に持つ。単一ファイルコンポーネントでググれ。
これで聞かれた事は答えたって事で俺からも質問していいか?
さっきからコンポーネントと言ってるが、君のはコンポーネントじゃないだろ。単なるコピペでカプセル化も局所化も無い。サンプルである事を割り引いてもコンポーネントと呼べる内容じゃない、と思うんだが、マジでどう思ってるの?
>>803 > new vue({data:{isActive:false}})
それだけだと、どれと結びついてるのか(=セレクタ)その情報がないだろ。
セレクタを省略して良いんだったら、jQueryだってこの一行だよ。
toggleClass('active', this.checked);
いや、値を変えるコードすら無いかw jQueryだとこれだなw Vueより断然短い 'active'
> 最初の例ならスクリプトは、 > new vue({data:{isActive:false}}) > これだけ。 これだけで動く!(=動かない) これなんて詐欺?w
>>804 がーん、ここまで書いても分からんか。それ動作せんだろ。。自分で言った様に動作するコードで比較しようぜ!!
それと、俺は君を責めてる訳じゃなんだぜ。長年jQueryには世話になったから、優秀なライブラリだとよく知ってる。でもここはvue react angularスレだろ。jQueryはややすれ違いなんだよ。でもまあお互いの長所短所を比較しつつ、まったり雑談しようや。
>>806 wwワザとか?vue本体ロードしなはれよ。
>>807 だから動作しないコードを出して
これだけって嘘を付くのをやめろって言ってるんだが、
これだけって、どこまでごこれだけなんd?
動作しないコードまでがこれだけか。
これだけって、どこまでがこれだけなんだ? 動作しないコードまでがこれだけか。
はあ、、分かった分かった。最初の例で動く奴上げてやるよ。出先でだから1時間後な。 で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの?そのむき出しのmy-conponentで。
見ての通り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書いてる人は知らないタグを使うように強制され 属性が名前になるんですよーとか、新たなルールを押し付けられることになってる。
>>812 > で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの?そのむき出しのmy-conponentで。
普通に再利用できてるんだが?
そもそもjQueryのコードは状態を保持していない。
わかるか?jQueryのコードには状態がない。
状態は、HTMLのタグに存在している。
だからHTMLのタグの分だけインスタンスが存在しているようなもので、
普通に再利用できる。
Vueの場合、コンポーネントが状態を持ってしまってる。 isActiveという変数のことな。 状態を持ったisActiveを共有することは出来ないから、 新た無いHTMLのタグを作らければいけなくなってしまっている。 そしてisActiveという事実上のローカル変数を参照するために、 JavaScript側でHTMLを書くしかなくなってしまっている HTMLがガッツリJavaScriptと結びついてしまっているわけだ
>>815 どこから突っ込めばいいんだ。。
> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。
コンポーネントは状態持つものだよ。いや認識の相違とかじゃなく普通に。そして隠蔽されるべきもの。
> 状態を持ったisActiveを共有することは出来ないから、
普通に参照できる。
> そしてisActiveという事実上のローカル変数を参照するために、
> JavaScript側でHTMLを書くしかなくなってしまっている
単一ファイルコンポーネント。
> HTMLがガッツリJavaScriptと結びついてしまっているわけだ
まさかと思うがサンプルのtemplate見て言ってる?結びつくの真意が分からんがjQueryも結びついてるだろ。
いいよ、もう少し分かりやすい質問しよう。 コンポーネントの要素として、簡単に テンプレート、css、jsがあるとしよう。3つ合わせてコンポーネントね。これらは外部から容易に参照できてはいけないし、干渉されてはいけない、複製も容易でないとダメ。 君のやり方で、my-componentをどうコンポーネント化するのか例示して欲しい。
>>817 何が言いたいのかわからん。
CSSで div { color: red } って書いても
影響を受けないようになんて、Vueでもできないだろ
>>816 > まさかと思うがサンプルのtemplate見て言ってる?結びつくの真意が分からんがjQueryも結びついてるだろ。
jQueryでは結びつかない。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
↑どこにjQuery関連のものがあるか言ってみな
> Vueの場合、コンポーネントが状態を持ってしまってる。 > isActiveという変数のことな。 訂正 Vueの場合、JavaScriptのコードが状態を持ってしまってる。 isActiveという変数のことな。 だからDOMとJavaScriptのインスタンスを一対一で 紐付けなければならなくなってる。密接に結びついている。 jQueryの場合JavaScriptのコードでは状態を持たないから、 DOMが一つだろうと複数だろうが、処理を共有化できる。
デザインやUI・UX、インタラクションが実装できないクソエンジニアどもがギャーギャー騒いでる お前ら自分の無能さを披露して恥ずかしくねえの? フロントやるならデザイン込みでUIくらいやれや クソみたいなUI作ってんじゃねえよ
ただいまー。という訳で最初の質問の答えアップだよ。
https://codepen.io/hinoragi/pen/jJmzJG なんの質問か忘れてるだろうから、君の763の質問引用するよ。
>jQueryの方が少ないですね。
>嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。
>$('.my-component [name="switch"]').change(function() {
> $(this).closest('.my-component').toggleClass('active', this.checked);
>});
http://jsfiddle.net/tk5yvs3g/ で答えがこれね。
new Vue({
el: '#app',
data: {isActive:false},
})
どう?まあこんな短いサンプルで比較するのもどうやねんってのは分かるけど質問にはちゃんと答えたよ。
html含めても確実にvueの方が少ないよね。
あと少しはvueやreact勉強しようよ。こんな短いサンプルの初期化方法すら知らなかった訳で、知らないからって全力否定するのはどうなのって思うぞ。
デザインできてUIUXできるようになれば引く手数多だぞ ほんとフルスタックはほとんどいないから 年収は最低でも1000万はいく
静的なWebページがあってそこにちょっと動きを付ける程度ならjQueryがお手軽。まぁそうだな。
>>824 my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの? 少しは書く前に頭使ったら?
やっとReduxがちゃんと分かってきた けどActionって関数にする必要ってなんのためなの? constの定数でもいいような気もするんだけど
UIUXが複雑化すればデザインと密接になり、デザインがやるべきことになる 昔ながらのショッピングカートならそうでもないかもしれんがw
>>827 > my-componentの外に、置いたinputでも動くし、
> my-componentを複数置いたら、おかしくなるし、
> お前馬鹿なの? 少しは書く前に頭使ったら?
君は本当成長ないね。過ちは認めようよ。俺は君の質問に的確に答えたよ。同じ動作をするより短いサンプルだろ。その返しがこれって、そんなに負けが認められんか。だから駄目なんだよなあ。。
あと批判するなら少しはvueやreact勉強してから述べような。俺もまさかど素人が批判してるとは思わなかった。当然ある程度は知ってて、それ故に批判すると思うじゃん常識的に考えてさ。そこはすまん。思い至らなかった。次からはスルーするよ。おやすみぃ。
同じ動作してないよね。 my-componentの外に、置いたinputでも動くし、 my-componentを複数置いたら、おかしくなるし、 お前馬鹿なの? 少しは書く前に頭使ったら? そんなにjQueryよりもVueの方が長くなることが許せないの? 事実を受け入れようよw
なんでjQueryの動作を真似ることが前提なんだよ 言ってることめちゃくちゃじゃん
> なんでjQueryの動作を真似ることが前提なんだよ お前言ってることがおかしい。 $('.my-component [name="switch"]').change(function() { $(this).closest('.my-component').toggleClass('active', this.checked); }); これと同じことを実現するという話で、 これというのは、.my-component(クラスなのだから当然)中の [name="switch"]'からの イベントで.my-component に active クラスをつけるというものなんだから、 最低限の条件を満たしてない
訂正 これというのは、.my-component(クラスなのだから当然複数ある)中の [name="switch"]'からの
.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'})
しかもこれ <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>
こんなところにクソコードベタ貼りしてないでCodesandboxで動くソースでも書いてからリンク貼れよ
>>838 の実際に動くコードはこちら
http://jsfiddle.net/rhp9dvya/ これと同じことをVueで実現するコードは
更に長くなる
はっきり言うけどさ 中のinputまで丸ごとコピペしないと動かないコンポーネントとかコンポーネントじゃねえよ jQueryならDOM構造は気にしなくて良かったんじゃないのか
最後にまとめて答えとくよ。
>>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になるだけだよ?何がそんな嫌なのさ?
>>838 > という固定のDOM構造にしか使えないので
> jQueryよりも劣っている
これが大いなる勘違いなんだがもう説明しない。いいから学べ。
> jQueryだとHTML(DOM構造)を自由に変更できる。
> 以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない
これアンチパターンで混乱の元。カプセル化できないコンポーネントなんぞ不安で使えたもんじゃない。セレクタの影響範囲が広すぎて便利なつもりになってるだけ。将来的なデスマーチが約束された最も最悪な例だと気いて欲しい。
あとさ、いいからjQuery君はスレタイ読もうついでに空気もね。 ココはvue react angularスレだよ。公式のサンプル一つも試した事ないのバレてるのよ??なのにどうやって比較してるの?妄想じゃんそれ。 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。そしたら俺もキチンと答えるよ。間違ってたら謝るし。俺もjQueryは散々世話になったから嫌いじゃないのよ?
ただ単に覚えたくないんだよ 新しい言語を jQueryは
女子更衣室に堂々とチン入してきて延々巨根自慢をする粗チンバカ
>>842 > できる。scopedでググるか、詳しくはvueの公式見よう。
scopedは、コンポーネントだけで使えるCSSであって
外部からの影響を受けないようにするものじゃないよ
素人かよw
> そこは結びつかなきゃ困るんだよ。リアクティブなんだから。
理由は?w
>>845 > 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。
jQueryの動くコード
http://jsfiddle.net/rhp9dvya/ Vueの動くコードはでてない。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなる
というクソコードしか出てない
リアクティブなんだから!(自分で言っていて意味わかっていない) ↑ぷぎゃーw
> nameがv-modelになるだけだよ?何がそんな嫌なのさ? デザイナーの世界にないVue(JavaScript)専用の概念を 持ち込むことだね。
だからおかしくて当然なんだって 勝手にコンポーネントと名乗ってるだけでそれコンポーネントじゃないから ただのjQuery特有の動作だから
Vueのコンポーネントだけが 正しいコンポーネントだとか 恥ずかしいよ?
でもあなたはjQueryの正しいコンポーネントが再現出来ないからクソコードって言うんでしょ 恥ずかしくないの?
jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく 単にHTML(DOM)の構造によって形作られたものに過ぎない。 専門用語ではなく、単なる英語としてのコンポーネント この場合のmy-componentというのは、my-componentというクラス名から始まり 内部にname="switch"があるというコンポーネント my-componentの条件はこれだけだから、DOMの構造はHTMLを修正するだけで柔軟に変更できる。 デザイナはこの条件を守っている限りHTML(CSS)を変更し自由にデザインできるし、 プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。 デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている
>>854 いや、常識的な仕様を守ってないからクソコードって言ってるんだよw
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側のコード。これだけって言ったんだから、これだけでやってみせろやw
https://codepen.io/anon/pen/BbZNVM ここで(HTML側を自由変更できないとはいえ)複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねw
https://codepen.io/hinoragi/pen/YgVQjK でもそれだとVueの方がjQueryよりも大幅に長くなっちゃったから
これだけでできる!(←まともに動かない)
と騙そうとしたんだろうね。
でもバレちゃったw
>>848 アホはお前だろう。。もう少しよく読んで意図把握しよう。
あとやっぱり君はリアクティブ自体理解できてないのがよくわかる。だからもう少し公式読め。
>>849 ほら
自分が書けないからそうやって逃げる。全く進歩しない。分からない事は否定するだけ。いいから自分で勉強証明しなって。見ててやるからさ。
提示された例がコンポーネントじゃないから当然なんだって inputが中に2つあっても動いちゃうし無かったら役立たずのmy-componentが残るだけ 綺麗にコピペしないと動かないなんて常識的なコンポーネントの仕様を守ってないよね
>>857 なあ自分で言ってて悲しくならない?
new Vueすら知らない事バレてるんよ君w。俺はもう説明しない。基本すら自学できない奴に教える価値無い。
>>855 > jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
> 単にHTML(DOM)の構造によって形作られたものに過ぎない。
> 専門用語ではなく、単なる英語としてのコンポーネント
無知極まってるぞ。勝手に定義するな。マジで少し勉強して。そんな俺様定義だからあんな再利用できない紛いモノ書くんだよ。
だああ、色々言いたいが出社だ。 いいかiQuery君。君はまずスレチだ。そこをまず理解しろ。 その上で書くならせめてjQueryとvue react angularのどれか、2つのコードを比較しながらjQueryの良さを語れ。 それがここに書き込む最低の礼儀じゃね?
最後にもう一回言うぞ。 jQueryのコード置くだけで「だからvueだめなんだよ」コレ止めろ。 基礎だけでもVueを勉強してから発言するのが筋だぜ。でないと話が通じないから困るんだよ。ほらココvueのスレでもあるし。
>>849 かっこいい画像.gifくらいちゃんと用意しろよ
>>851 デザイナーは巣のhtmlだけ書いてくれりゃいいよ
実環境にコードをマージする作業はこっちでやるし
これは素晴らしい煽り合いだな お互いコードでやりあうとか 勉強になります
多分、「jQueryで十分」って主張してる人は、結局SPAの概念が習得出来なかった、あるいはする気のない人じゃない? 最新のフロントエンド開発について行けないから、新しい物の価値を否定して、 自分の相対価値が下がって行くのを阻止したいんじゃないかと。 今後SPAがどうなるかなんて分からないけど、少なくとも新しい事に挑戦もせず、勉強もせず、 自分が理解出来る古い技術にばかりすがるのは、正直エンジニアとしては失格だと思うよ。 そういった人が今すべき事は、不真面目な自分を戒めて勉強に励むか、 あるいはエンジニアとしての死を素直に受け入れて、別の道を模索するかのどっちかにしたらいいんじゃないかと。
スレチだし ライブラリとフレームワークを比較する具合が香ばしさ
>>856 独立タグはちゃんと閉じろよ性格の雑さが出てるぞ
<input />
jQueryはデザインの物理的な構造にプログラムが強く依存してしまうから生産性が低い プログラムがデザインの物理的な構造に依存することを知ってるからデザインも安易に作れない(プログラムから扱えるようにするために物理的な制約が生まれる) VueはVMを使ってロジックとデザインを明確に分離してるのでそういった不都合はかなり軽減される 全くないとは言わないがね
>>870 それが必要なのはXHTML。HTML5では、/>は許容されるが
タグを閉じるという意味はなく単に無視されるという扱い。
もう一回載せようか? はやくこれだけで作って欲しいんだが
>>854 いや、常識的な仕様を守ってないからクソコードって言ってるんだよw
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側のコード。これだけって言ったんだから、これだけでやってみせろやw
https://codepen.io/anon/pen/BbZNVM Vue(というかMVVM)の素晴らしいところはjavascript側はhtml/css側がどうなってるのか知らなくてもいいところ そしてhtml/css側はjavascript側がどうなっているか最小限の知識で済むこと jQueryではお互いがお互いに対する知識を多く必要としているため結合が非常に強くなってしまう これでは分業は難しい
>>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が埋め込まれてしまってる >>873 馬鹿野郎。。。それは最初のv-bindとv-modelのサンプルだろうが。
コンポーネントはこっちだ。
https://codepen.io/hinoragi/pen/YgVQjK 何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。
んでさ、修正点があるなら自分で書けばいいじゃない。別に複雑なコードじゃない。たった数行だぜ?コードに異論があるならコードで示す。当たり前だと思うがjQuery君は違うのかな?
それすら出来ず、vueが分からないからオウム返しのようにクソ呼ばわりする。それただのバカって言うんだよ。いい加減自覚しろ。
君に少しでもプライドがあるなら、君の思ったとおりに動作するvueのコード上げてみな。時間はかかってもいいからさ。
>>876 埋め込んだのだからそれは仕方ないでしょう
ちなみに私はVueの真の利点はMVVMによるViewとViewModelの分離であると考えています
世の人々はコンポーネント志向に興味を惹かれているようですがそれはオマケです
私はVueを使ったとしてもhtml/cssとjsを同居させることはありません
それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
埋め込みを拒否した場合はhtmlのコピペになるでしょう
その点についてはVueもjQueryも同じことです
なので問題はVueではなくコンポーネント志向の方にあることがわかります
> 何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。 だったら分離してくださいよ。 "分離できるぞ" と言ってるからには、今のコードは分離されてないってことでしょ それをしないのは、分離すると余計に長くなるってことなんでしょ?
Vue, React は、コンポーネント指向。 デザイナー・プログラマーの分業体制 jQuery は、そういう観点ではない!
>>878 > それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
ならない。なんのためにHTMLにテンプレートタグ <template> が出来たと思ってるんだ?
>>879 重要な点はVue(MVVM)はViewとViewModelが疎結合であり
jQueryはViewとLogicが密結合している事です
それに比べればコードの行数は大した問題にはなりません
>>882 これがjQueryのコードなんだが
どこが結びついてるの?
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
>>881 それはテンプレートの置き場を変えただけです
テンプレートをjavascriptからhtmlへ追い出すだけならVueでも可能です
しかしコンポーネント志向場合はテンプレートをhtmlに追い出しても意味はありません
異なるページでコンポーネントを再利用する場合を考えればそれが無意味であることがわかります
>>885 > それはテンプレートの置き場を変えただけです
だからお前がjQueryだと埋め込むしか無いっていったから、
置き場を変えてやったんだろうが
置き場を変えることでデザイナが自由にHTMLを変更できるようになる
プログラマは、中身がどう変わろうが意識する必要がなくなる
これが分業だろうが
もう「jQuery vs Vue」みたいなスレでも立ててそっちでやれよ
>>885 > 異なるページでコンポーネントを再利用する場合を考えれば
お前まさか、デザイナがページのヘッダとかフッタを
共通化せずにページごとに全部書いてると思ってるのか?
失礼だろw
>>879 君は本当に面白いな。俺には君の不満点が全部見えない。当たり前だよな他人だし。だから修正したコードを君自身が書くことに意味がある訳さ。勉強にもなる。それに君は俺が何を書いても文句を言うだろう。後付で色々言われるのは面倒だ。
だったら、君の素晴らしいコードと、俺の糞コードを比較すればいいじゃん?君の正当性はコードでしか証明できないんだぞ。
たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。
>>883 そのコードと<div>の中身がべったり対応してるじゃん
my-component以外に正確にコピペしてもらわないと動かない時点でコンポーネントじゃない
>>889 > たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。
えとさ、なんでお前の利益になることを俺がしないといけないの?w
>>890 > そのコードと<div>の中身がべったり対応してるじゃん
<div>の中身がべったりってどういうこと?
divの中身はいろいろ変えられるんだけど?
そもそもdivである必要すらない
>>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の属性のブール値を切り替えるだけです
>>883 なんで分からんの?まさにそれも密結合と言うんだぞ。クラス名やセレクタ使ってるだろ?
スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない?
>>893 Vue(MVVM)ならばそのような仮定は全く必要ありません
代わりにHTMLを直接書き換えるからです。
HTMLにコードがべったり結合してしまっています
>>892 jQプログラマ「my-componentを置いてくだだい」
デザイナ「<div class="my-component"></div>」
これで分業なんて出来るかよ
>>894 > スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない?
DOMのクラスやセレクタを使わないでやるなら
HTMLに直接React用のコードを埋め込むしか無いやんw
>>886 デザイナは自由ではありません
jQueryコードを理解してプログラムを破壊しないように作業しなければなりません
プログラムを破壊しないための条件は明確にはなっていません
そもそもあなたはコンポーネントの意味を理解していないようです
template tagを使用しても別の画面では再利用できません
それはコンポーネントではありません
コンポーネントはテンプレートとロジックが1つのブロックとして再利用可能な形態になっている必要があります
>>888 それは補助的な方法論です
補助的な方法を使用していいならVueのコンポーネントからテンプレート分離することも容易に可能です
あなたの最初の主張は完全に理を失いました
>>896 jQueryプログラマ「この動きがほしい所に my-componentというクラス名をつけてください」
デザイナ「はいわかりました。昔からあるLightBoxみたいなやつですよね。
aタグに特定の属性をつけるだけで画像のポップアップができて簡単ですよね」
>>899 > あなたの最初の主張は完全に理を失いました
意味わからん。逆だろ
お前がjQueryでもコードの中にHTMLを埋め込むしか無い!って
jQueryを貶めようとしたから、それは間違いって言ってるんだが。
俺がいつjQueryの理だといったよw
マッピポンプしてるんじゃねーよ
>>891 うわあ。。性格ネジ曲がりすぎだろ。すっごく君のためを考えて言ったんだがなあ。
俺が書いてもvueを何も知らない君がどう評価するの?まさか文字数カウントして終わりか?
君の言ってるのはこういう事。
vueしりませーん、よめませーん。かきませーん。おぼえませーん。でもvueクソだわ!!
通用するわけねーだろ。どあほう。
>>902 評価してやるからグダグダ言ってないでかけや
>>895 完全に依存性がなくなったわけではありませんがべったり依存していません
Vue(MVVM)ではViewは明確に定義されたViewModelのインターフェースのみに依存します
ViewModelの実装からは完全に隔離されます
ViewModelのインターフェースがViewとViewModelの疎結合を保証する境界になっています
逆にjQueryではjs側がどのような実装を行っているか厳密に理解していなければViewを定義できません
そ
ViewとLogicを隔てる境界はありません
>>897 いいから無理にvueやreactの知識だすなってw。ボロでてるから。
コード埋め込みじゃなくてバインディング。
どうせ何が違うのか分からんだろ?いいから勉強してくれ。
>>903 書けやじゃねーよw
俺は答えた。それについて文句があるならまず自分でやるのが当たり前じゃん。
君は社会人じゃないのかね?俺は君のお守りしてるわけじゃないぞ?
>>900 それのどこがコンポーネントなんだよ
「この動き」と言った瞬間同じDOM構造が思い浮かんで初めて成立する会話
てかこの動きってなに?長々と説明する位ならコード見せた方が早いよね
>>901 Vueでコンポーネントを実装するとhtml/cssとjsが1箇所に記述されるため強い結合が生じるというのがあなたの最初の主張です
ここには暗黙的に1つの前提がありました
html/cssを別のファイルに定義しないという前提です
しかしあなたは続く投稿でその前提を自ら覆しました
あなたはtemplate tagを提示してhtml/cssを別のファイルに記述する手段があるならしてもよいとしてしまいました
前提が崩れたためあなたの最初の主張の理もまた失われたのです
>>904 お前ももうそいつを説得しようとかバカなマネするのやめろ
論破と謂われようが勝利宣言されようが我慢しろ
無駄だし邪魔
>>900 あーそうだ、jQuery君に肝心な事聞き忘れてた。
君がmy-componentをコンポーネントと言うなら答えられるはず。
1、そのコンポーネントのインターフェイスは?
2、再利用は?
3、内部をどう隠蔽して部品化する?
これコンポーネントの最低条件だから。本当はもっとある。
一つでも満たさない場合少なくとも仕事でコンポーネントと言ってはだめよ。
まあ保守するのが君一人ならオレオレコンポーネントでもいいんだけど。
>>897 >DOMのクラスやセレクタを使わないでやるなら
>HTMLに直接React用のコードを埋め込むしか無いやんw
やっぱりここにjQuery君の根本的な勘違いがあるな。
jQueryってのは基本密結合なんだよ。密結合ってのは、相手を明確に知ってないといけないという事。端的に言えばセレクタが元凶。密結合が好ましくないってことは知ってるよね。
んでさ、また君の不得意なvueですまんけどさ、疎結合ってのはこういう事。
<div v-show="isShow"><div>
script側は変数isShowを切り替えるのみ。
違い分かるかな?スクリプト側からはdomを知らない&触れてない事。
メリットがとてつもなく大きな事も分かってるはず。いや分かれ。だったらデザイナに教えるなり、君が骨組み作ればいいだけ。。。いやそれができればこんな話になってないかああ。スレも残り少ないのに不毛だぜ。。
コンポーネントは、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');
デザイナー兼プログラマーの俺様なら全て解決する問題だな jquery使うのはWordPressのみ Webアプリ系はvueかReactで作る てかデザイナーとフロント分けたほうが効率いいとかいう輩どもはこれでわかったんじゃねえの まったく解決できてねえじゃん むしろ悪化してる
>>913 この機会にvue react覚えればいいのに。
5chの不毛な論争でもそういう気持ちが芽生えれてくれれば無駄じゃない。100%君のプラスになる話だよ。俺は1円も得しないマジでw
>>915 あれほどVueは密結合になってないといいはっていながら、
最後は密結合にしたほうがいいっていうんだから面白いよなw
>>916 すでにVueもReactもマスターした上で言ってんだよw
VueもReactも密結合になるだけでメンテナンスしづらくなり
コードの量も増えるって。
>>918 ほう昨日はnew Vue()すら知らなかった君が、たった一日でマスターしたのか。しかもreactも。って冗談でも笑えねえぞこら。
あとまあ、、一応聞いとくか、、
> VueもReactも密結合になるだけでメンテナンスしづらくなり
どのへんが密結合なんでしょうvue reactマスターさん?
まだまだ私も勉強中なので参考までに教えてください。
まずは密結合の意味からお願いします。
>>919 見た目(デザイン)を変更しようと思った時にJavaScriptのコードを
変更しなければいけないのが密結合です。
もう少しわかりやすく言えば、 見た目(デザイン)を変更しようと思った時に、JavaScriptを全く知らない人に 担当させられないのが密結合の証拠です。
>>922 コンポーネントと見た目(デザイン)は別の概念です。
VueやReactを使うとコンポーネントに見た目(デザイン)が蜜に結合してしまって
再利用しづらいコンポーネントになってしまうと自白しているようなもんですね。
同じコンポーネントでも見た目(デザイン)は別のものに変更できるようになってないと
いけません。テーマとかスキンという言葉を使えば理解できますか?
正直行数が少ない方が正義って思う人はjQuery使ってていいんじゃないかと思うよ
行数よりも、HTMLとCSSとJavaScriptが 明確に分離できてるのがjQueryの強みですけどね
というかVueの方が行数が長くなると認めたレスなのかw
動的にタグの数が変わるようなものはjqueryでどう書くのでしょうか?
ほんとエンジニアって使えねえなあ 行数ごときで争ってるバカどもw WebアプリなんだからUIUXもシステムで作るんだから右脳左脳両方使って効率よく作り出せよ デザインセンスゼロだから行数で言い合うしかねえんだろ お絵描き教室からはじめろ
>>723 の「こんな程度」のUIをJS
知らないデザイナーと
>>900 みたいな会話で分業して作ってるんなら
色んな意味で尊敬するわ
俺なんて地獄しか見えないもん
動的にタグの数が変わるものはjqueryでどう書くのでしょうか? タグをjsに書いたりしないですよね
> タグをjsに書いたりしないですよね 当たり前だろ。そんな事したらJavaScriptの中に タグが埋め込まれてしまってデザインが用意に変更しづらくなるだろ
>>931 それは知っていますよ。どう書くのでしょうか?
>>919 まあ予想してたと思うけど、、ちょっと長いよ。2つに分ける。
>見た目(デザイン)を変更しようと思った時にJavaScriptのコードを変更しなければいけないのが密結合です。
違います。
Javascriptのコードと言うからややこしくなるんです。データ駆動という言葉を知っていますか?
例えばform。form全体の状態を保持するjsonAがあるとしましょう。この場合、formの"見た目"は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業界ではそうです。
それにしてもコンポーネントといい、君は本当に勝手な解釈をしますね。もっと勉強しましょう。
>>919 > 見た目(デザイン)を変更しようと思った時に、JavaScriptを全く知らない人に担当させられないのが密結合の証拠です。
もちろん違います。
name="checkbox"がv-model="checkbox"になるだけです。スクリプトの要素はありません。
テキストのバインディグも {{name}} とするだけです。スクリプトの要素はありません。他にもありますが、デザイナが新たに覚える文法は多くないです。
デザイナの教育、指示はむしろエンジニアの腕の見せ所ですよ。負担となるかは大部分が君次第。フレームワークだけのせいにしないように。
詳しくはvue公式を読みましょう。とてもわかり易くておすすめです。
>>923 ところで、君はコンポーネントの質問に答えてないですよね?
君の示したコンポーネント、<div class="my-component">のインターフェイス、再利用、隠蔽について答えてください。
言ってる意味さえ分からないかもしれませんが。。それなら質問しましょうね。
>>933 見当違いすぎてワロタw
HTML/CSSの世界に、Reactのものが含まれてるから
密結合だって言ってんだろ
>>936 >HTML/CSSの世界に、Reactのものが含まれてるから、密結合だって言ってんだろ。
だからそれは密結合じゃないの。君の変な定義はどうでもよろしい。
相変わらず間違いを認めないヤツだなあ。。ググってみなよ。すぐ分かる事からさ。
>>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のコードは状態を持ってないので 隠蔽するものはなにもない。無名関数使ってるので関数名すら隠蔽された状態だし 単にクラス名がかぶらないようにしたいってだけならプリフィックスでもつければおしまい >>936 んでさ、vue reactマスターの君はコンポーネントが全くわかってない。何も質問に何も答えられない。どうなのよマスターさん。
いろんな意味で恥ずかしいと思わんの?よくそんな妙な知識で仕事できるなあ。
同僚とか上司とかいたら注意されない?まあいれば、だけどさ。
>>939 はい、ソースだしなさいねー。嘘ついてもすぐわかりますよー。
どうやら
>>938 には反論できないから
レスするのすっ飛ばしたようだなw
>>938 やっと書いたか。本当に待ちくたびれたわい。
>インターフェース? 何が聞きたいのかわからんが、
どあほ。。。まじで言ってる??コンポーネントのインターフェイスが分からん?
よく堂々と白状できるな。。俺なら到底言えないわ。
あとさ、君のコードは再利用できてない。
それは単に、コ ピ ペ と言うの。
>何から何を隠蔽するしたいのかわからん。jQueryのコードは状態を持ってないので隠蔽するものはなにもない
もう、、、、なにを言っていいのやら。
あのね、例えばさ、外部からさ、直接 $("div.my-component input")とか、コンポーネント内部にダイレクトにアクセスできちゃ駄目なのよ。
これってコンポーネントの最低条件なんだけど、、君はどうやって勉強したんだ。
いいからこれもググってみなよ。。。うーん、だれか突っ込んであげてください。私はもう疲れました。
>>943 > どあほ。。。まじで言ってる??コンポーネントのインターフェイスが分からん?
じゃあ、VueからReactのコンポーネントのインターフェース書いてみろよw
>>943 > あのね、例えばさ、外部からさ、直接 $("div.my-component input")とか、コンポーネント内部にダイレクトにアクセスできちゃ駄目なのよ。
VueやReactでもダイレクトにアクセスできますが?
>>945 おいおいおいおいー、どこがvueマスターなの?
直接アクセスできません。インターフェイスを介してアクセスします。
わかった?OK?
はい、Vueでコンポーネント内部にダイレクトにアクセスできちゃいましたw
https://codepen.io/anon/pen/ywXVOW 確か上の方で、scopedを使えば、こういうCSSからコンポーネントを 守ることができる。コンポーネントは影響を受けないってのたまわっていたね? やってみて div { //CSS ダイレクトアクセス background-color: red; }
>>947 笑いが止まらんぞおいっっっw
今日一番だわ!!!
本当に君には驚かされるな!!!
どこまで発想がjQueryなのよ。そりゃvueと共存できるよ。注意すればね。
いやすまん、ニヤニヤが止まらんから後でちゃんと返事する。
結局Vueのコンポーネントは隠蔽化されてるとか言うのは 技術的にそうなってるんじゃなくて、単にフレームワークの決まりとして 外部から触らないようにしましょうと文書で書かれているだけ それを言ったら、jQueryでは情報のやり取りには (カスタム)イベントを使用しましょう。コンポーネントの担当者以外が 直接内部をいじってはいけません。と文書でかけば終わるわけだよ。
少し訂正 それを言ったら、jQueryでは "コンポーネント間" の情報のやり取りには (カスタム)イベントを使用しましょう。コンポーネントの担当者以外が
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通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした!
>>952 いやすまん、ちょっと笑いすぎた。失礼しました。
ってー君もめげないなあ。。。その不屈の精神があればvue reactなんてすぐ習得できると思うぞ本当に。
>結局Vueのコンポーネントは隠蔽化されてるとか言うのは技術的にそうなってるんじゃなくて、単にフレームワークの決まりとして外部から触らないようにしましょうと文書で書かれているだけ
文章で書かれてるだけww、全然ちがうし、大体そんな事書かれてないし!
vueはフレームワークなの。jQueryと違うの。vue使ってる限りはきちんとコンポーネント化できてるよ。もし直接アクセスできたらバグだよ。
>それを言ったら、jQueryでは "コンポーネント間" の情報のやり取りには(カスタム)イベントを使用しましょう。 コンポーネントの担当者以外が直接内部をいじってはいけません。と文書でかけば終わるわけだよ。
はい気をつけまーす。でも人間は間違えるし忘れるよねぇ。うっかりアクセスする事も十分あり得るよね。
ただうっかりdocument.getElementsByClassNameなんて発行しないよなあ。そもそもdocument自体使わんし。どんなミスだそれ。
認めようよ。君のコンポーネントは不十分というか君の理解不足とスキル不足だよ。そしてvueは基準を満たす。
流石にこれは擁護できんし見逃せんわ。認めるまで議論は進まない。まあどうせスレも終わるし最後にありがとう、面白かった。
>>953 > 従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、
> 3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした!
とりあえずお前はブラウザの開発者ツールを使えるようになろう。
あとはgrepも便利だぞ
そしたら今度はコンポーネントごとにグループ分けしてディレクトリ管理して
webpackやsassも使えるようになろう
> ってー君もめげないなあ。。。その不屈の精神があればvue reactなんてすぐ習得できると思うぞ本当に。 だから習得してるってw
> vueはフレームワークなの。jQueryと違うの。vue使ってる限りはきちんとコンポーネント化できてるよ。もし直接アクセスできたらバグだよ。
はい、Vueでコンポーネント内部にダイレクトにアクセスできちゃいましたw
https://codepen.io/anon/pen/ywXVOW >>953 > 各コンポーネントには、ユニークな属性が付いているため、お互いに影響を与えることはない(Scoped CSS)
だからユニークな属性をつければいいと思いますよ?
従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、 3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした! これが密結合! どこかを修正すると、別のどこかがおかしくなるため、無限に修正を繰り返すことになる! 今までの日本車のすり合わせ技術と同じ。 どこかを修正すると、別のどこかがおかしくなるため、外人よりも日本人に有利だった これを部品ごとに疎結合にすることで、ある部品の修正が、他の部品に影響を与えないため、 すり合わせ技術がなくなり、外人でも同じ車が作れるようになった すり合わせがあると、単独で部品が作れない・単独で働けないから、 常に全員が相談・残業して働く、日本人が有利だった
>>957 もういい。休んでいいんだ。十分スレを楽ませてもらった。
君がいいと言うならいい。常識破りのまま、そのまま突っ走ってくれ。
次スレ立てました
Vue vs React vs Angular その2
http://2chb.net/r/tech/1552122580/ すり合わせは、金メダルのスピードスケート女子パシュートもそう。 常に全員が相談・残業して練習する、日本人が有利 外人は思想・人種・性格もバラバラで、長時間一緒に居れない しかも草食動物の日本人とは違い、外人は肉食動物で自己主張が強いから、 異なる思想・人種・性格の奴とは、殴り合いのケンカになる! 外人は、日本人みたいに従順で、すぐに従ったりしないから
>>958 >だからユニークな属性をつければいいと思いますよ?
従来のやり方では、無理
属性を付けても、それを訂正してはずす時には、
また、3 * 4 * 5 = 60通りの中から、正しいかどうかを確かめないといけないから、時間が掛かりすぎる
密結合・すり合わせは、どこかを修正すると、別のどこかがおかしくなるため、
無限に修正を繰り返すことになる
だから、部品やプログラミングは、疎結合でないとダメ!
>>963 その計算になんの根拠もねーわw
コンポーネント毎にCSS定義してるから
何を探すと言ってるのかさっぱりわからない。
.my-compnent {
[name="switch"] { }
sonota-1 { }
sonota-2 { }
}
JavaScriptファイルも my-compnent に関するものは
my-compnent.js に全部収められているし、
あ、なるほど、jQueryがだめと言ってる根拠は
自分がまともな管理できてないからだってことかw
従来のやり方では、3つのHTMLファイル・4つのCSSファイル・5つのJSファイルがあれば、 3 * 4 * 5 = 60通りの中から、適用される組み合わせを探すのに、時間が掛かりすぎるため破たんした! さらに、これの悪い所は、3 + 4 + 5 = 12 の足し算じゃなく、掛け算になるのが最悪! 考えることが加速度的に増える ここを修正したら、別の場所がおかしくなりましたとか、こればっかりやってる。 延々と、適用される組み合わせを探してる!
根拠言えないから、必死に嘘を言いまくるのねw どっかの国の人と行動がおなじになってるよw
自分で属性を付けても、またそれを修正したり、訂正してはずす時には、 また、3 * 4 * 5 = 60通りの中から、正しいかどうかを確かめないといけないから、時間が掛かりすぎる だから、各コンポーネントを別々のファイルに書くだけで、 ユニークな属性を自動的に付けてくれる、フレームワークが良い
>>961 そんなに悔しかったの?次スレってwほんと滲み出てるw
まあ頑張れよ自称vueマスターさんw。ほらテンプレに書かなきゃ。vueでdocument直接いじっちゃダメよー。逸材。
jQueryおじさんネトウヨだったのかw 年齢も高そうだしな...
jQuery君なあ。。ここまでの逸材なら色々拗らせた年齢不詳の40代かなあ。 つーか、ここまで vue react嫌うって何があったんだろ。そのくせ自称vue reactマスターなんだぜw。何その劣等感。しかもマスターならvueでもdom直接いじれるんだぜ。それでコンポーネントの垣根も超えられるって自慢するんだぜ。でも文書化で禁止すればokなんだぜ。 これで納得できるのが本当凄え。
jQueryおじさん、スレチなんで次スレは来ないでね
ReactはReactNativeとセットにして一スレ立ててもいいんじゃない?
密結合だろうが疎結合だろうが俺の場合は右脳と左脳が同時に判断すらから何も問題がない 本当のフルスタックとはそういうものだ しかし左脳しか機能していないお前らは、理解不能で恐ろしい存在であるデザインのためにくだらない争いをしているわけだ レベルが低すぎてアプリ開発なんか無理だろ
テンプレを勝手に改変する、いつもの荒らしだろ テンプレに、Ruby 禁止とか、jQuery・Lodash 禁止とか、 自分がわからない技術を禁止して、色々なスレを立てている奴 あちこちに、死ねとか書き込んでいる奴だろ
jQuery君は最後っ屁していったのか。次から色々スルーするわ。
>>975 疎結合のほうが理解しやすいことは確かですが理解のしやすさためだけに疎結合を目指すわけではありません
疎結合なシステムは個々のモジュールを独立にメンテナンス可能であるという点が最も重要なのです
例えば、HTML、CSS、JavaScript。 個々のモジュールが独立してメンテナンス可能であるということです。
例えばデザインですが、同じ機能を持ったコンポーネントでも 別のアプリだと違うデザインにしますよね? そういった時にデザインのみ独立してメンテナンスします。
見た目をちょっと変えるだけで、別のコンポーネントとして 管理するのは馬鹿げているわけです。
時代はこの先Web Componentsの時代になり、 高度なコンポーネントが増えますが、 再利用可能であるということは、別のデザインを持ったサイトでも 使えるコンポーネントでなければなりません。 機能はコンポーネントに閉じてよいですが、 デザインはコンポーネントに閉じてはだめなのです。 デザインはサイト全体で横断的に適用するものなのですから
>>925 どうせならここじゃなくてQiitaで「jQueryの方がVueよりも優れてる理由」とかいう記事かけば誰かがお望みの回答をしてくれるんじゃないかと思うんだけどね
> Javascript はweb制作管理板、CGI はWEBプログラミング板へ。
Qiitaとかスレチとか、お前ら、jQueryおじさんが周りの言うこと聞くわけないだろ エホバみたいなもんやぞ
>>985 立てたぞ。
>>974 がセットにしてって言ってたからセットにした
React と React Native のスレ
http://2chb.net/r/tech/1552134567/ >>988 書くならもっと別物にするな
メンテナンスしやすいコーディングスタイルとか
jQueryがだめに見られてるのは、DOM要素を追加したり消したりすることであって
クラス属性を書き換えるなどして、DOM要素にかんしてはCSSで制御するようにすれば
メンテナンス性が高いことは明らかだからね
Vue vs React vs Angular Part.2
http://2chb.net/r/tech/1552136553/ 本スレPart2建てた
こっちはjQueryの話禁止にした
jQueryは悪くない。ただスレチ。 次スレが有意義でありますように。
結局主張のごり押しなだけで時間とスレの無駄だったな
次スレ
Vue vs React vs Angular Part.2
http://2chb.net/r/tech/1552136553/ このスレッドは1000を超えました。 新しいスレッドを立ててください。 life time: 78日 13時間 22分 9秒
5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/ ▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php
read.cgi ver 07.7.23 2024/12/25 Walang Kapalit ★ | Donguri System Team 5ちゃんねる
lud20250310091854ncaこのスレへの固定リンク: http://5chb.net/r/tech/1545395856/ ヒント: 5chスレのurlに http ://xxxx.5chb .net/xxxx のようにb を入れるだけでここでスレ保存、閲覧できます。TOPへ TOPへ
全掲示板一覧 この掲示板へ 人気スレ |
Youtube 動画
>50
>100
>200
>300
>500
>1000枚
新着画像 ↓「Vue vs React vs Angular YouTube動画>1本 ->画像>8枚 」 を見た人も見ています:・【FFBE】FINAL FANTASY BRAVE EXVIUS Lv2853【スパトラの価値=3000ラピス以下】 ・【GPS】地政学シミュ Power and Revolution Part7 ・「PCゲーマーからすればCSゲーマーは貧乏人」←わかる 「steamセール安い!CSゲー高すぎww」←は? ・【海外】金持ちはやりたい放題!? 複数の売春婦を殺傷した「ドS富豪息子」 父親のコネで実刑回避か―ロシア[10/06] ©bbspink.com ・【2/14】迫るバレンタイン、ショコラティエを悩ませるカカオ豆の高騰「一時は銅より高値」 [七波羅探題★] ・Absolute Virtue ・【話題】 ZOZO前澤社長、アンチに反論 「お前らがSNSやテレビの中で人のこと馬鹿にしてこそこそ笑ってる間に、俺は進むわ」 ・【アビラ】Avira Antivirus ver.43 ・映画『エイリアン:コヴェナント』、どう評価した?ゴシックホラーとSFの融合は原点回帰、エイリアンと人類創世の秘密が徐々に明らかに ・VOI SQUARE CAT ・【Switch】Xenoblade3 ゼノブレイド3 part21【モノリス】 ・【落語】「行け、歌丸!」 たい平のマラソン距離は100・5キロに決定!師匠自身が提案[07/30] ・Viscount Morax ・【GGSTRIVE】GGSTRIVE 晒しスレ Part1 【GGST】 ・【岡山】窃盗の夫婦、車前部に乗った店員振り落とし逃走 強盗殺人未遂容疑で逮捕 岡山市 ・【社会】「若者の高級腕時計離れ」オメガ、ロレックス、ブルガリ、カルティエ、“デキる大人”の象徴への憧れさえもなくなったのか★10 ・河野外相「こういうときこそ交流を(それが韓国の言うツートラックでしょwwww」 韓国・釜山市の行政交流中断で ・VIDEOTAPEMUSIC ・【国内】 中国系ノルウェー人の夫製作のバイオリン54本、中国籍の元妻が破壊〜離婚トラブルか[07/26] ・テスラ、ヒト型ロボットの試作品を来年公開。マスクCEO「人類は肉体労働から解放される」 ・【テレビ】ヒロミ、半年かけての自宅リフォームに松本伊代飛び跳ねる「何これ!?すご〜い!かっちょいい!」 ・SUPER BEAVER ・【高橋洋一】 韓国、中国、そして日本のマスコミ…原発処理水「反対したいだけの人たち」のヤバすぎる思考回路 [7/10] [仮面ウニダー★] ・【米国】核軍縮条約離脱へ トランプ米大統領本人が表明 19日の米紙ニューヨーク・タイムズ電子版は(米国国内メディア) ・CaveTube Part1 ・Welcome to the new 'salt' board! ・【フィオン】HUION液晶ペンタブレット 2 【Kamvas】 ・Surfaceに詳しい人教えてください。 ・Virtue Stone ・TennisWarehouseについて語ろう7 ・【MTGA】Magic The Gathering Arena 初心者スレ 113 ・Survarium Part4 ・【計算科学】長距離光ファイバ共振器を用いて光による大規模人工スピンネットワークの生成に成功 ・一人で行くアンジュルムイベント・ツアー総合スレ1006【5/9新曲発売 ひなフェス2018 31・01横浜】 ・【科学】 1千万年前、ゴリラと分岐 アフリカの人類祖先 (東京新聞) ・xvideos pornhub ・新種目 SASUKE ・【ミリシタ】アイドルマスター ミリオンライブ! シアターデイズ Part1236 ・【悲報】任天堂、フジテレビと共に倒産へ ・【悲報】斎藤元彦陣営のネット広報担当会社が投稿したnoteで騒然 ★49 ・【日本】長距離トラック【全国】402 ©3ch.net ・【SNH48/BEJ48/GNZ48/SHY48/CKG48】直播実況スレ83★総選挙☆演唱会☆TV出演☆劇場公演 ・【社会】「朝鮮総連」関係者ら2人詐欺などの疑いで書類送検…虚偽の給与明細提出し、キャッシング上限額維持 大阪府警 ・avでよく見るイキ狂いさせるピンクの長い ・人類とマラリア蚊による1万年以上続いた戦いに終止符 マラリア蚊「ニワトリくっさ、くっさ!」 ・MasuoTV ・雑談 VTuber ・【バーチャル】hololiveファンスレ#18031【youtuber】 ・【朗報】人類滅亡のきっかけとも言われる「耐性菌」に効く新たな新抗生物質が発見される! ・【ニューズウィーク】飲食店の倒産増加は、日本経済にとって本当に「悪いニュース」か ・ アベノミクス好景気、日本人、お好み焼きや、麺類など「粉もん」を食べなくなる ・【事件】和菓子店娘殺害 小学生時代にあった顔のアザ 近隣住民の証言で明らかになった「父の女グセと “娘との距離”」[07/17] ©bbspink.com ・【埼玉】「頭文字Dに憧れて」山道を桝磨@埼玉で男4人書類送検 ・若者の“会社の忘年会”離れ 「知らない人がいる、つまんねー早く終わってくれ」 ・LAA vs HOU 8 ・朝鮮人・朴水石「二重国籍云々本当にうざい。人類が目指すべきはビジョンは国籍そのものをなくすこと」 ・【バーチャルYoutuber】にじさんじ有ンチスレ7029【働き方改革法応援スレ】 ・【国技】セブンイレブン本部「加盟店調査の結果、時短要望は全国で80店舗だけ」 オーナー「調査されてねーぞw」 ・★081105 ゲームキャラ「ゆっくりAA|[pixiv]URLリンク」保守荒らし報告スレ ・U2 Part117 ・ブタダシpart57 ・10人ライダーのエネルギーを結集した必殺技「ライダーシンドローム」!!←いやおかしいだろ ・【誹謗中傷の主導的人物東京都茸は】指原莉乃さん、インスタ画像削除まとめについて法的措置で対応すると発表! 【どこのまとめ?】★2 ・PC TV Plus★3 ・MUSE vol.79 ・esite:ネットサービス[スレッド削除]
20:18:55 up 55 days, 20:22, 0 users, load average: 89.45, 82.46, 81.46
in 1.8446190357208 sec
@0.81635999679565@0b7 on 031009