00:06
10月1日、土曜日ですね。 時刻は朝9時を回りました。
今日から土曜日ということで、また新しい月ですね。
昨日のタイムラインかと眺めると、 結構退職された方が多いですね、やっぱり。
日本的にはここから後半スタートという感じなので、
昨日付で退職されたというのが、タイムラインでいっぱい流れてきたなというのがあって、
またそういう時期が来たという感じがしますね。
はい、おはようございます。今日も朝活を始めていきたいと思います。
本日も昨日に引き続き、Vue vs. Reactは Which One to Choose in 2022ということで、
記事ですね。ReactとVueの違いとかの、他差ですね。
の記事を読んでいこうと思います。
昨日は、Component Build Principles in React and Vue.jsというのと、
How Do Components Impact Browser DOMというところまで読みました。
今日は続いて、Data Binding of Componentsですね。
のところから入っていきたいと思います。
またザーッと読んでいくんですけど、途中途中画像があったりするので、
ちょっとわかりづらいところは大変申し訳ないなという感じです。
はい、じゃあいきましょう。
相変わらず英語の記事なので、翻訳に頼ろうと思います。
Component Data Bindingです。
ReactとVue.jsの比較記事を見ていると、
データバインディングに関して異なる見解が見受けられますと。
Reactは一方向ですね。
一方通行のデータフローに従うと書かれていることが多い。
一方、Vue.jsはアンギュラーのように双方向のバインディングを提供するだけですと。
しかしそれは間違いですよというふうにおっしゃっています。
ReactもVueも一方通行と双方向のデータフローを同時にサポートしていますと。
しかも、最も好ましいのは片方向のデータフローであることも推奨はしています。
Vueの3.0.11のドキュメントで、
片方向のデータバインディングの利点を強調している部分ではちょっと見てみましょうと。
すべてのプロップというのは、
子プロパティと親プロパティの間で一方向のデータバインディング、
ダウンバインディングを形成しますと。
親子の間で一方向のダウンバインディングを形成します。
親プロパティが更新されるとそれは子供に流れますけど、
その逆はありません。
これによって子供のコンポーネントが、
誤って親の状態を変更するということを防ぎ、
アプリのデータフローというのを理解しにくくすることができますと。
これは結構大事なことですよね。
勝手に更新されたりするともうカオスになりがちなので、
あえて自動でやらないようにしていると。
意図的に呼ぶことはできますけどね。
エミットというのがあるので。
さらに親コンポーネントが更新されるために、
子コンポーネントのすべてのプロップは最新値でリフレッシュされます。
つまり子供のコンポーネントのプロップを変異させようとするべきではないということですね。
もしそうすると、ビューはコンソールで警告を発揮してくれますということですね。
これ結構ありがたいですよね。
リアクトはコールバック関数というのをサポートしており、
子供のコンポーネントが親コンポーネントにプロップをヘッジすることができます。
例えばユーザーが子コンポーネントの入力フィールドにテキストを入力していて、
03:04
これらの変更を親コンポーネントに反映され、
そのコンテンツが更新されるみたいなことをやっているということですね。
今画像1枚貼られていて、
リアクトのデータフローというのは、
親のコンポーネントが子供の方にプロップをどんどん渡していくということです。
子供の方で状態をどんどん変更していくということですね。
イベント自体は子供から親の方向に逆に伝播していくよ、
みたいな画像が貼られています。
これはこれで正しいと思いますけどね。
状態というのはあくまで上から下に流すだけということですね。
とはいえ、リアクトコミュニティには双方向のデータバインディングを可能にする
リアクトフックライブラリというのが提供されています。
まとめです。
サマリーですけど、ビューとリアクトというのは
コンポーネントのデータバインディングについて、
一方向だけではなく双方向もサポートしています。
一般に一方向のデータフローというのは
プロジェクトの機能をよりよく制御するのに役立ちます。
両フレームワークともこれを裁業の選択として推奨しています。
要はデータバインディングについてリアクトのビューも
差はないねということですね。
書き方とかの違いはあるかもしれないですけど。
では続いていきましょう。
Brief Industry Comparison of React and Vue.jsですね。
リアクトビューの簡単な業界比較ですね。
業界的な比較をするんですね。
はいいきましょう。
まずリアクトからですね。
リアクトっていうのは柔軟性があり、
様々な選択肢に開かれています。
開発の方向性や考え方が偏ることがありません。
しかしこのアプローチは開発者が
JavaScriptの強力な知識を持っている必要があり、
シングルページアプリケーション設計の経験があるため
いくつかのコストが発生します。
言われてみればそうですね。
リアクトっていうのはあくまでJSに沿ったような
フレームワークなので。
フロントエンドというのはHTML、CSSに
慣れ親しんだ方が
次にフレームワークをやろうかってなった時に
リアクトは確かに学習というか
キャッチアップとしてはハードル高いと思いますね。
Vueの方が多分入りやすいと思います。
じゃあいきましょう。
プロスオブリアクトですね。
リアクトの長所です。
高速なクライアントサイドレンダリングだと。
クライアントサイドレンダリングにより
開発者はウェブサイトを完全に
JavaScriptでレンダリングすることができます。
ルートごとに個別のHTMLページを作成するのではなく
クライアントサイドのウェブサイトが
ブラウザで直接各ルートを動的に生成しますよと。
今のが一つ目。
二つ目はデータフローの良好な制御ということですね。
リアクトはプログラムの異なる部分間で
転送される時にデータが一つの経路でしか移動できないと。
単方向のデータフローを使用しています。
このためきれいなデータフローアーキテクチャというのを維持し
データフローをより良く制御することができますということですね。
三つ目。軽量なアーキテクチャというところが強みだそうです。
リアクトではルーティングライブラリや状態管理ライブラリなどを
自由に選択することができます。
これらの組み込み機能がないため、軽量とされていますよと。
必要なものは必要なところで持ってきて組み込むという感じですね。
06:01
リアクト単体としては軽量ですと。
続いて四つ目。拡張性とスケーラビリティですよということですね。
リアクトのスケーラブルなモジュールアーキテクチャは
新しいコンポーネントを抽出したり
複数のコンポーネントを一つにまとめたりすることを容易にし
多くのコンポーネントパターンというのは
アプリの構造が変化する際のリファクタリングとの支援しますよということですね。
最後五つ目ですね。
五つ目は大規模なコミュニティをサポートということです。
何百万人もの開発者がいるコミュニティというのは
開発者が疑問を持ったときに世界のどこにいても
専門家に質問できるため
リアクトを導入する大きな理由の一つになっています。
そうですね。
コミュニティ的にやっぱりリアクトが一番大きいはずですね。
日本でも確かリアクトコミュニティありますけど
そんなにスラックみたいな感じで活発ではなかったのは
どっちかというと活発感がありますけどね。
ただなんだかんだ経験値であったりとか
触ったことあるよという数だけを見ると
多分日本でもリアクトのほうが多いんじゃないかなと思ったりします。
これは歴史的なお話ですね。
リアクトのほうがかなり早くリリースされているというのはありますからね。
じゃあ続いてコンスオブリアクトでリアクトの短所というところですね。
リアクトの短所は3つだそうです。
はい、いきましょう。
1つ目、学習曲線が急であること。
まあまあ確かにね。
JSX構文によりリアクトの学習というのは難しく
意欲的な開発者にとっては魅力的ではないかもしれませんと言っていますね。
その難しさの根本にJSX構文だというふうにおっしゃっているのか。
そんなことはないと思いますけどね。
JSX構文そのものはそんなに難しくないと思うんです。
はい、じゃあ続いて2つ目ですね。
2つ目はリダックスやルーティングなど他のライブラリやサービスなしでは動作しないというところですね。
リアクトはライブラリであり、ルーティングやHTTPリクエストなど
フロントエンドアプリケーションで一般的な機能を扱う公式ライブラリというのが存在しないと。
そういう思想ですからね。
仕方ない面はあります。
この辺を全部内包しているのがアンギュラーだったりしますね。
3つ目のコンスですね。
3つ目は構造化されていないコードはスパゲッティやボイラープレートになる可能性がありますと言っています。
これも同じですけど、ビューにも言えるような気はしますけどね。
以上3つ、端緒というところでした。
そんなに大きな端緒という感じには聞こえなかったですね。
一応2つ目の方ですね。
公式で必要なものというのが用意されているわけではないというところですね。
今もヘッチャーなんていろいろ新しいの生まれてますからね。
基本的にはSWCか端スタックかどっちかを使うんじゃないですかね。
端スタックはリアクトクエリの新しい版ですね。
では続いて企業いきましょう。
リアクトを選ぶべき企業とは?
What companies should choose React?
ここは3点ありますね。
1つ目は迅速な機能開発と市場での検証キャンペーンを必要とするアーリーステージのスタートアップ企業がまず1つ目ですと。
2つ目は開発者のアウトソーシングを考えている企業です。
Vue.jsの専門知識を持つ開発者に比べ、リアクトの開発者を見つけるのははるかに簡単ですと。
数が多いってことかな。
一応Vue.jsはアジア圏に圧倒的に多いですからね。
09:03
海外から見るとリアクトの方が探しやすいんでしょうね。
3つ目、製品ベースの企業というのはクロスプラットフォームのアプリ開発、リアクト技術に基づくリアクトネイティブだったり、
それはいいフィットであることを必要としますよと言っています。
クロスプラットフォームはまた別の議論が発生するけど、リアクトベースでいくのであれば確かにリアクトネイティブがあるっていうところで、
Vueと比較すると一律の調和があるような感じは確かにありますね。
以上リアクトの話でした。
続いてVueの話に移っていこうと思います。
まず、さっきと同様にVue.jsのプロスコンツの話ですね。
Vue.jsはリアクトとアンギュラーと上位機能を組み合わせたものですが、
その最大の特徴というのは完璧なユーザーエクスペリエンスを実現したことです。
また仮想ドームの能力を活用し、コードの構造を最適化したいというところです。
では行きましょう。長所ですね。長所は5個ですね。
短所も3つなので、さっきのリアクトと同じカットですね。
では1つ目ですけど、1つ目は開発者に優しいフレームワークだというところです。
Vue.jsはライブラリとフレームワークの間に高いカスタマイズ性とスケーラビリティを備えています。
このプラットフォームは様々なプロジェクトを統合し、Vueベースのアプリを手間なく開発するのに役立ちます。
ここは本当にその通りだなと思いますね。
2つ目、卓越したパフォーマンスです。
Vueは例外的に高速なツールです。例外的に。
Gzip圧縮で22.9KBと管理しやすいサイズであり、その技術の一部を段階的に採用できることからVueはおそらく長寿命であるとも思われます。
3つ目、よく構造化されたコードだというところですね。
コードの読み取りと保守が非常に容易になっています。
確かにVueのソースコードを見やすいですからね。パッと見てはいはいっていう理解がしやすい感じがありますね。
4つ目はエレガントな言語構文です。
最後5つ目ですね。洗練されたユーザードキュメントだと言いますね。
ドキュメントもそうですね。
他のJSフレームワークと比較してVueは非常に詳細なドキュメントを備えています。
簡単なインストールプロセスのための情報を提供し、フレームワークの動作の概要を説明し、Vueと他のJSフレームワークの詳細な比較を含んでいますよと言っています。
続いてVue.jsのコンスですね。
端緒です。端緒1つ目、経験豊富な開発者の不足だと言っています。
Vueは競合他社に比べて歴史がやっぱり浅いため、市場に浸透しプログラマに広く受け入れられるまでには結構時間がかかりましたよと言っています。
2つ目、コミュニティが小さいということですね。
Vueは新しいフレームワークであり、リアクトやアンギュラをサポートするような規模のコミュニティに成長するためにはまだまだ時間が必要ですよねというのはあります。
それは確かにリアクトはFacebookでアンギュラはGoogleというバックボーンがあったりするというのはその差もあるんじゃないかなと僕は思っていますね。
最後3つ目ですね。
ドキュメントの大部分は中国語のみで書かれています。
そんなことはないと思いますけど。
今はだいぶ英語になってきたと思うんですけど、この方は2022年にこの記事を書いているのでまだまだ中国語のほうが多いんだろうな。
12:05
逆に僕は中国語のほうのVueの記事というのはドキュメントを読んだことがないのでどれだけ豊富なのかわからないですけど。
すみません、戻ります。
フォーラムの会話だったり、プラグインの説明だったり、その他の種類の説明書というのは非ネイティブスピーカーが仕事を進めるために翻訳する必要がありますよということでした。
Emmanuelがガッて作ったというのがあるし、まだまだコミッターとしていますからね。
仕方ない面はあると思います。
続いて、Vueを選ぶべき企業ですね。
ウェブベースの製品市場にアプローチしている企業というのがその一つ目です。
二つ目は開発プロセスに単一のフローを導入している企業です。
三つ目、構築プロセスでフレームワークを使用した経験のない企業だったり、JavaScriptの習熟度を活用したい企業だと言っています。
ReactとVueで導入すべき企業の差がないように聞こえました。
同じじゃないという感じがしますね。
まあ結構かぶっていますからね。
Top 10 Companies that built their projects with React or Vue.jsというところですね。
トップ10カンパニーの話がザーッと出てきていますが。
In 10 Companies that built their projects with Reactですね。
まずはReactの方です。トップ10ですけど。
Reactの方は第1位。1位から10位というわけではないのかな。
一応上から述べていきますね。
一つ目はReactを使っている方の企業ですけど、一つ目はアトラシアンですね。
チラとかトレロとかを使っているアトラシアンが1位。
二つ目はコードアカデミーです。
三つ目はドロップボックス。
四つ目にネットフリックス。
五つ目にAirbnb。
六つ目にFacebookで、Facebook第6位なんだ。
七つ目にInstagram。
八つ目にTwitter。
九つ目はReddit。
最後はAlibabaですね。
がトップ10カンパニーでした。
続いてのTop 10 Companies that built their projects with Vue.jsですね。
Vue.jsのトップ10カンパニーは
一つ目ビハンス。
二つ目ドリブル。
三つ目アドビ。
あ、アドビそうなんや。
四つ目はGitLab。
五つ目はNamecheap。
六つ目グラマリー。
グラマリーもそうなんですね。
七つ目に任天堂。
任天堂もそうなんですね。
八つ目はZoom。
九つ目はルイス・ビトン。
十個目はGoogleキャリアですね。
というのがVueを使っているそうですね。
ビトンもVueなんだ。
知らんか。
一応このVue.js vs React.js in 2022という別のYouTube動画のリンクも貼られてますので、
後ほど記事見てみていただければと思います。
はーい。
で、あとはもうなんか、
あとはだいたい流れ的な話ですね。
あとは各ユースフルリソーシズということで役立つ資料の話ですね。
以下の資料が役立つようなところで、
アーティクル&チュートリアルというところにガーッとありますね。
ReactとかVueとかのいろいろな記事とかチュートリアルの記事です。
あとはポッドキャストとビデオというYouTubeの記事がダーッと載っているので、
その辺を見てみてくださいということでした。
15:00
あとはFAQがあるのでせっかくなのでFAQもちょっと読んでいこうと思います。
はい。
いきましょう。
FAQ一つ目ですけど、
Which has more industry support React vs Vue.jsですね。
ReactとVueどちらがより多くの産業界に支持されているかということですね。
いきましょう。
プロジェクト管理ソフトウェアとかV2Bマーケットプレイスだったり、
あとオンラインビデオサービス、クラウドサース、ライドシェアプロジェクトなどなど、
より多くの分野にまたがっているため、
産業界での普及という点ではReactの方が若干勝っているというふうにおっしゃっていますね。
またGitHub上のコミュニティも大きいと思っています。
Facebook以外にもWix、Airbnb、Uberといったマルチユーザーのスタートアップが
拡張機能でReactに貢献しています。
しかしVueは急速に成長し、
デジタルアートとかデザイン業界をリードする存在にもなりつつあります。
AdobeとかDribbbleとかBehanceなど、
大企業は製品開発にVueを選択していますよということでした。
デザイン領域の方でVueは結構流行り始めているということですね。
さっきの企業の名前を見ていたら確かにそうかもしれないですね。
続いての質問ですけど、
How similar are Vue and React?
VueとReactはどのように似ているんですか?
いくつかの類似点を持っています。
VueとReactはJavaScriptでフロントエンドを書くことができ、
仮想ドームを使って高速にデータをレンダリングします。
コンポーネントは同じ単一のファイル構造で書きまして、
JSXをサポートしています。
Vueも実はJSXをサポートしています。
どちらのシステムもコンポーネントの一方向と双方向のデータフローを可能にします。
状態管理にはReduxを使うことができる。
確かにReduxはReact専門というわけではないですからね。
続いての質問ですけど、
When to use React vs Vue?
使い分けるタイミングがどこでしょうかってことですけど、
もし会社がシングルページアプリケーション領域に近づいているのであれば、
Vue.jsを選択するのが実は理にかなっているというふうにこの人はおっしゃってますね。
JavaScriptの習熟度が上がるだけでなく、
インフラの管理方法も学べるからだというふうに言っています。
Reactはアーキテクチャ設計の選択をプログラマーに委ねているというところがあるからですね。
Vueは結果を重視する企業だったり、
迅速な対応を求めるチームにより適しています。
一方、Reactはプロジェクトの機能をコントロール化に置きたいと考えている。
いわゆる、より経験豊富なプログラマーの要件にマッチをしているということでした。
なるほどですね。
Reactは設計の思想だったり、
こうやって使うんだよみたいなところの機能とかのようなのをいっぱい提供していますけど、
最後は開発者に設計を全部委ねているというのは確かにそうだなと思いましたね。
Vueはある程度Vueに乗っかれよというような感覚は正直ありますね。
続いて、Does Facebook use Vue.js?
FacebookはVueを使っていますからそうですね。
FacebookまたはメタはVueを使用したことが実はないんですね。
いくつかのメディアはFacebookがVue.jsをマーケティング目的で使用したと発表していますけど、
その証拠が今のところないとおっしゃっています。
さらに掘り下げると、彼らはWappalyzerを参照しており、
Facebookがニュースフィード機能にVueを使用したと述べていることがわかります。
しかしこの情報をWappalyzerで確認すると、
18:03
Vue.jsに関する記述など実は見当たらなかったんですね。
またインターネットで検索してもWappalyzerの公式の投稿も見つかりませんでした。
ということはむしろ偽物で、ウイルスキャンペーンとして広がっている可能性もあります。
驚くべきことにちょっと調べれば、誰でもフェイク情報でないことがわかるんです。
Reactはパフォーマンスやスケーラビリティの面ではVueと同等であり、
このような発言は単なるフェイクであることをより証明するものでありますよ。
続いて、Is Vue faster than React?
VueはReactより高速なんですか?みたいなところですね。
以前はVueがパフォーマンスでReact.jsを追い越すことがあったんですね、歴史上。
それはノードツリーにおける要素の構造が優れており、
一貫した実行が可能であったためです。
Vueと比較するとReactはいくつかのタイムロスがあったんですね。
16.0バージョンからReactはレンダリング速度を大幅に向上させました。
アニメーションシーンの中断だったり、スクロール中のフリーズなど、
以前の懸念に対応しました。
これらは同期の問題で発生したということですね。
Reactは新しいファイバー技術というのをリリースしました。
プロセス全体をワークユニットに分化し、
プログラマーがその実行に優先順位をつけられるようにするのが主な特徴です。
現在React18というのはVueと同程度に高速で、
最も人気のあるJSフロントエンドシステムの一つであることに変わりはないですよね、というふうにおっしゃっています。
では続いていきましょう。
Will Vue replace React?
VueはReactを置き換えるのかという話ですけど、
VueはReactとは別のターゲットを持っているので、
Reactを置き換えないというのは理にかなっていると。
要は置き換えることはないということですね。
Vueはフロントエンドの構築を容易にするアウトボックスのソリューションであります。
フレンドリーなインターフェースと高度な機能で、
開発者に力を与えてくれていますよということです。
Vue.jsではテンプレート、ディレクティブ、ステートマネジメントサービスなどを最初から利用できます。
Reactというのは別のパラダイムに従っています。
Vueとは異なり、プログラマーがJavaScript言語であるフロントエンドを構築することを支援します。
Reactはアーキテクチャを管理するのに十分な最小限のツールセットを提供します。
Reactはプロジェクト規模を拡大させる可能性があるため、
ハイレベルの機能を減らしていますと言っています。
Reactを選んだ人は、Reactを使えばウェブアプリケーションのテストをスケーリングが簡単にできると述べています。
しかしVue.jsは妥協点を見出し、非常に軽量でありながら、
同様の機能で開発者を豊かにしています。
つまり市場には2種類の開発者が存在することになる。
開発ツールが好きな人とそれよりもコントロールとスケーリングを好む人と言っています。
ラストの質問です。
Is React better for bigger web apps?
より大きいアプリケーションにはReactの方が適していますか?
Reactはその特徴からウェブアプリケーションの構築に最適だと。
パフォーマンスの向上したとか、動的なアプリを簡単に作成できるとか、
短方向のデータフローであるとか、再利用可能なコンポーネント、強力なツールとチーム、
アプリケーションを適切に編成できるエコシステムがあるために、
プロジェクトのスケーラビリティと保守性を期待するならばReactは最適な選択肢ですよというふうにおっしゃっています。
21:02
以上Q&Aも終わって、本記事はこれで終了になります。
結構深いお話とか、中身の構造だったりとか思想だったりとか、
より一歩も二歩、二本を踏み込んだ視点とか観点からのリアクトトビューの比較でしたね。
結局どっちがベストとかどっちがいいというわけでは、結局そういうのはなかったですね、もちろん。
企業の方向性とか趣向性だったりとか、メンバーの特性とかを見出して、
そこからマッチするものを選んでいくのがいいよということですね。
あとはリアクトトビュー単体で使うというのは実はそんなに多くなくて、
結局NextとNextを使うことがなんだかんだ多いんじゃないかなと思ったりはしているので、
どっちかというとそのラッパーフレームワークの方の比較をする方が個人的にはいいんじゃないかなと思ったりしているので、
明日以降はそのラッパーの方ですね、NextとNextの比較記事の2022年版があったらちょっとそれを読んでいこうかなと思ったりはしています。
というところで、ちょっと短いですけど、しかも時間も中短半だからここで終わってしまおうかなと思います。
では今日も朝方ご参加いただき、多くの方お招きいただき、大変にありがとうございました。
今日はPOSTEDの日本CTO協会が主催する勉強会がこの後行われるので、参加される方多いと思いますけど聞いてみていただければと思います。
かなり豪華メンバーの登壇者がいらっしゃるので、日本のITについての広い視点のお話がいっぱいあると思うので、
その辺聞いてみたらいいんじゃないかなと思っています。
また明日明後日ですね、10月2日、確か3日もなった気がしますけど、日本デジタル庁がデジタルの日っていうのを毎年やっています。
厳しいときは去年からやり始めたんですけど、そのデジタルの日っていうイベントを開催します。
オンラインでしかも無料で見れるらしいので、それも興味ある方は見てみてください。
デジタル庁の今までの歩みとか、最近ちょっと前にもデジタル庁が公式サイトで1年間ですね、
デジタル庁を発足してから1年間の歩みっていうのをPDFでガッとまとめていて、
それもかなり素晴らしい記事だったですね。
いろんなデータだったとか、どんなことの実績解消したのかみたいなところが書いてあったりするので、
この辺も含め、明日明後日でいろんな発表とかいろんなお話が聞けると思うので、その辺も気になりますね。
この3日間かなりIT業界のちょっと俯瞰視点というか広い視点でのお話がいっぱい聞ける機会があるので、
興味ある方は見てみてくださいというところを宣伝して終わりにしたいなと思います。
では、今日土曜日ですね。ゆっくり休んでいただいて、また今日から10月スタートですね。
後半戦スタートの方もいらっしゃると思うので、影響を養って月曜日からまた頑張っていければなと思います。
では、こちらで朝活は終了したいと思います。お疲れ様でした。
