ReactまたはVue？ フロントエンド開発用のライブラリを選択する

フロントエンドをどうしますか？ 答えを見つける最も確実な方法は、自分で最高のライブラリを試すことです。 理想的には、最も単純なものから始めて、開始されていないデザインの神秘が出力可能なページに変わることを理解しておくとよいでしょう。 さらに、基本を理解していれば、ドキュメントを有意義に読んで、答えが明らかになるまで自分の実験を複雑にすることができます。



今日は、React.jsとVue.jsについてお話します。 これらは、世界で最も人気のあるJavaScriptライブラリの一部です。 このリストを見て、GitHubのリポジトリを見てください。 どちらも優れた機能を備えており、ユーザーインターフェイスの作成に使用されます。 それらの操作は非常に簡単です。主なことは、何が何であるかをすぐに理解し、正しい第一歩を踏み出すことです。 実際のところ、この資料は、React and Vueを使用した開発のこの最初のステップ専用です。

一見、これらのライブラリは非常に似ています。 実際、それらは同じ目的を果たします。 類似点はこれに限定されません。 特に、Vue.jsのドキュメントには、他のフレームワークとの比較に関するセクションがあります。 特別な場所は、まさに多くの共通の特徴のために、Reactとの比較によって占められています。 ただし、作業の実際的な側面に関する違いにさらに興味があります。 つまり、これらのライブラリを使用して、アプリケーションのユーザーインターフェイスがどのように記述されるかについて説明しています。

ついでに、Reactコミュニティの参加で作成されたVueのドキュメントを引用しましょう：「Reactでは、すべてのコンポーネントはJavaScript内で動作する宣言的なXMLのような構文を使用するレンダリング関数を使用してUIを記述します。」 Reactメカニズムは、HTMLマークアップをJavaScriptコードに直接埋め込むのに役立ちます。 Vueでは、基本的に別のアプローチが使用されます。 HTMLファイルにあるテンプレートを使用し、通常のHTMLマークアップに似ています。 同時に、JSXの説明はWebページに到達しません。

ReactとVueの基本を理解するために、ページをリストするという単純なタスクの解決策を検討してください。 まず、これがどのように行われているのか、いわば手動での言葉です。

HTMLなど

私たちのタスクは、特定の会社の最近雇用された従業員の名前のリストをWebページに表示する（DOMに追加する）ことです。

HTMLのみを使用してこれを行う場合、最初に通常のHTMLファイルを作成する必要があります（index.htmlと呼びましょう）。サービスタグに加えて、次のような構造があります。

<ul>  <li> John </li>  <li> Sarah </li>  <li> Kevin </li>  <li> Alice </li> <ul> 

ここには目立ったものは何もありません;これは通常のHTMLリストです。 その中にいくつかの要素しかない限り、労働コードの手動編集はそうではありません。 しかし、数百または数千個の要素のリストについて話している場合、そのようなリストには、たとえば動的更新が必要になる可能性があることさえ考慮していませんか？ ReactやVueなどの特殊なツールがなければ、この量のデータを扱うことは非常に困難です。

それでは、Reactツールを使用して同じ問題を解決する方法を見てみましょう。

React JSX

そのため、Reactを使用してリストを表示します。

最初のステップは、別のindex.htmlファイルを作成することです。 しかし、その中に、リストを形成するタグの代わりに、通常のdiv要素を追加します。 これは、Reactツールによって生成されるものが表示されるコンテナーとして機能します。

Reactがそれを見つけて操作できるように、この要素には一意のIDが必要です。 Facebookでは（誰も知らない場合-Reactがそこから来ている場合）、これらの要素の識別子は通常キーワード「root」であるため、同じことを行います。

 <div id='root'></div> 

最も重要なものに渡します。 すべてのReactコードを含むJavaScriptファイルを作成します。 app.jsと呼びましょう。 JSXを使用してDOMに新しい従業員を一覧表示できるように、これを作成します。

最初に、従業員の名前で配列を作成する必要があります。

 const names = ['John', 'Sarah', 'Kevin', 'Alice']; 

次に、名前のリスト全体を動的に表示するReact要素を作成する必要があります。 それぞれを表示するためにコードを手動で記述する必要はありません。

 const displayNewHires = ( <ul>   {names.map(name => <li>{name}</li> )} </ul> ); 

注意を払うべき最も重要なことは、個別の<li>要素を自分で作成する必要がないことです。 どのように見えるかを説明するのに十分なので、Reactが残りを行います。 これは非常に強力なメカニズムであり、前述の「数千のリスト」問題の解決に最適です。 データ量の増加に伴い、Reactの手動植字に対する利点は非常に明白になります。 特に、 <li>要素がここで使用した要素よりも複雑な場合。 画面にデータを表示するために必要な最後のコードは、 ReactDom.render関数です。

 ReactDOM.render( displayNewHires, document.getElementById('root') ); 

ここでは、 root識別子を持つdiv要素にdisplayNewHiresのコンテンツを表示するようにReactに指示します。

 const names = ['John', 'Sarah', 'Kevin', 'Alice']; const displayNewHires = ( <ul>   {names.map(name => <li>{name}</li> )} </ul> ); ReactDOM.render( displayNewHires, document.getElementById('root') ); 

ここで重要なのは、私たちの前にReactコードがあることを忘れないことです。 つまり、実行前に、これらはすべて通常のJavaScriptにコンパイルされます。

  'use strict'; var names = ['John', 'Sarah', 'Kevin', 'Alice']; var displayNewHires = React.createElement( 'ul', null, names.map(function (name) {   return React.createElement(     'li',     null,     name   ); }) ); ReactDOM.render(displayNewHires, document.getElementById('root')); 

実際、それがすべてです。 結果は、配列から従業員名のリストを表示するReactアプリケーションです。 特別なことは何もありませんが、この簡単な例から、Reactで何ができるのかがわかるはずです。 そして、Vueで同じことをする方法は？

Vueテンプレート

ここでは、前回と同様に、名前のリストを使用してWebページを作成できるアプリケーションを作成します。

別のindex.htmlを作成します。 ファイル内に、 root識別子を持つ空のdiv要素を配置します。 要素の識別子は好きなように割り当てることができ、特別な役割を果たさないことに注意してください。 主なことは、このIDがコードで使用されるものと一致することです。

div要素は、Reactアプリケーションと同じ役割を果たします。 JSライブラリー（今回はVue）に、ページへの出力の開始時にアクセスするDOMの部分を伝えます。

HTMLファイルの準備ができたら、Vueコードを含むJavaScriptファイルを作成します。 以前のように、app.jsと呼びましょう。

ここで、Vueがページにデータを表示する方法を正確に説明します。

Vueは、DOM操作に関しては、テンプレートアプローチを使用します。 これは、Reactの場合のように、HTMLファイルではdiv要素が完全に空にならないことを意味します。 実際、コードの大部分はHTMLファイルにレンダリングされます。

これをよりよく理解するために、通常のHTMLを使用して名前のリストを作成する方法を思い出しましょう。

リストは、多数の<li>要素を含む<ul>タグで表されます。 Vueでは、ほとんど同じことを行う必要がありますが、いくつかの変更が必要です。 したがって、 <ul>要素を作成します。

 <ul> </ul> 

さて、この要素内に、空の<li> 1つ作成します。

 <ul> <li> </li> </ul> 

これまでのところ、すべてが非常によく知られています。 タグの属性のように見えるVueディレクティブを追加して、 <li>編集します。

 <ul> <li v-for='name in listOfNames'> </li> </ul> 

ネイティブディレクティブは、VueがJavaScript機能をHTMLに直接追加するために使用するアプローチです。 ディレクティブの先頭には文字v- 、その後にディレクティブの役割を理解できる説明的な名前が続きます。 この場合、 forループがあります。 listOfNames各名前について、 <li>要素をコピーし、この名前を含む新しい<li>要素に置き換えます。

さて、コードを実行可能にするために、ほんの少しだけ残っています。 つまり、すでに記述されているものにより、リスト内の名前ごとに<li>要素を形成できます。 しかし、この要素にはリストの名前を含める必要があることをシステムにまだ通知していません。 これを修正するには、 <li>要素に、Mustacheテンプレートに似た構文を持つ構文を追加する必要があります。 あなたはすでに他のJSライブラリでこれを見ているかもしれません。

 <ul> <li v-for='name in listOfNames'>   {{name}} </li> </ul> 

<li>要素は準備完了です。 これで、Vueツールによって形成されたリストの各要素はlistOfNamesから名前を出力しlistOfNames 。 この場合の「名前」という単語は任意に選択されることを覚えておく価値があります。 同じ成功で、他の、たとえば「アイテム」を使用できます。 キーワードが行うことは、名前のリストを処理するときに使用される置換フィールドとして機能するだけです。

データセットを作成し、アプリケーションでVueを初期化するためにのみ残ります。 これを行うには、Vueの新しいインスタンスを作成します。 app変数に割り当てます。

 let app = new Vue({ }); 

Vueオブジェクトはいくつかのパラメーターを受け入れます。 最初の、そしておそらく最も重要なのは、 el （つまり要素）です。 彼は新しい要素を追加する必要があるDOMの正確な場所をVueに伝えます。 これは、Reactの動作に非常に似ています。

 let app = new Vue({ el:'#root', }); 

最後のステップは、Vueアプリケーションにデータを追加することです。 このライブラリでは、データはVueインスタンスパラメーターを介してアプリケーションに転送されます。 さらに、各Vueインスタンスは、各種類のパラメーターを1つだけ持つことができます。 かなりの数のパラメーターがありますが、この例では2つだけに焦点を当てることができます-これは上記のelとdataパラメーターです。

 let app = new Vue({ el:'#root', data: {   listOfNames: ['Kevin', 'John', 'Sarah', 'Alice'] } }); 

dataオブジェクトにlistOfNames配列が含まれるようにlistOfNames 。 アプリケーションでこのデータセットを使用する必要がある場合は、ディレクティブを使用して呼び出すだけで済みます。 とても簡単です。 完成したアプリケーションは次のようになります。

HTML：

 <div id="root"> <ul>   <li v-for='name in listOfNames'>     {{name}}   </li> </ul> </div> 

JavaScript：

 new Vue({ el:"#root", data: {   listOfNames: ['Kevin', 'John', 'Sarah', 'Alice'] } }); 

おわりに

これで、ReactとVueを使用して簡単なアプリケーションを作成する方法がわかりました。 簡単な例の助けを借りて、ReactとVueを使用して開発エリアの最初のステップを踏み、「あなたの」フロントエンドライブラリを探しに進む準備ができていることを願っています。

最後に、両方のライブラリが優れた機能セットを提供していると言いたいです。 通常、これはおそらく習慣の問題ですが、Vueは多少使いやすいです。 VueがJSXをサポートしていることは注目に値しますが、Vueアプリケーションを作成するための同様のアプローチはめったに使用されません。

いずれにせよ、ReactとVueはどちらも強力なツールであり、いずれを使用しても優れたWebアプリケーションを作成でき、何を選択しても失われることはありません。

親愛なる読者！ フロントエンド開発には何を使用しますか？