Vue.jsとは何ですか?初心者の概要

Vueは、誰もがWebサイトやWebアプリを構築するのに役立つ最新のフロントエンドフレームワークであり、軽量で柔軟性があり、使いやすいものです。しかし、これは、最も高度なWebアプリビルダーのニーズを満たすために拡張できる、完全で豊富なフレームワークでもあります。

Vue.jsと、それを使い始めるために知っておくべきことを見てみましょう。

Vueは、JavaScriptで現在利用できる最も用途の広いフレームワークです。また、プログラマーと非プログラマーが理解するのが最も簡単です。

Vueは、Webサイトの開発に不慣れな人にとっても簡単に習得できます。 HTMLを扱ったほとんどすべての人が、HTMLではできないことをしたいという壁に遭遇しました。

たとえば、トグルを追加してWebサイトのテーマをライトモードからダークモードに変更する場合はどうでしょうか。ハンバーガーボタンの後ろに隠されたシンプルなメニューを追加してみませんか?それはあなたがいくつかのJavaScript学ぶ必要があるかもしれないときです。

これらは、JavaScriptで実行するかなり簡単なタスクです。 JavaScriptスニペットをスクリプトタグに追加すれば、準備は完了です。バニラJavaScriptでのテキストエントリは次のようになります。

JavaScriptがページ要素をどのように参照するかは、初心者にはわかりにくいかもしれません。 VueでJavaScriptを追加するのは、バニラJavaScriptを追加するのと同じくらい簡単です。しかし、Vueを使用すると、より多くの機能が得られ、最新のJavaScriptテクニックにアクセスできます。 Vueでテキストを入力する方法は次のとおりです。

これらの例を少し分析してみましょう。 JavaScriptでは、コードは要素を検索し、外観を選択して変更する必要がありました。 Vueでは、可変テキストを期待する場所をHTMLに伝えました。次に、JavaScriptオブジェクトを作成し、それを要素に割り当てて、可変テキストを設定しました。

この簡単な例は重要なポイントを示しています。コードをHTMLから分離することをお勧めします。 Vueの例では、VueはHTMLを直接操作しません。彼は自分のビジネスだけを経営しています。また、コードを追加することなく、HTMLにより多くの機能を提供しました。

他のフレームワークに慣れている場合は、通常、それらのテクノロジーを使用してアプリをゼロから構築する必要があることに気付くでしょう。これには通常、コマンドラインからのアプリの作成とサーバーの起動が含まれます。しかし、上記の例では、Vueを静的なWebサイトに追加しましたが、それほど複雑ではありません。

Vueはフレームワークです。その紹介ページには、「他のモノリシックフレームワークとは異なり、Vueは段階的に採用できるように一から設計されています」と書かれています。これは、アプリで必要なVueの機能を使用できることを意味します。

Vueを使用して画像のスライドショーを管理したり、すべての機能を備えた完全な単一ページのアプリを作成したりできます。これには、テスト、ルーティング、ヘルス管理、セキュリティなどが含まれます。

その力と汎用性のおかげで、Vueは多くの聴衆を魅了しています。

JavaScriptは急速に進化するエコシステムであり、多くのドロップアウトがあります。ツールのコレクションにふけると、それらが2年後に時代遅れになるのを見ることができます。 JavaScriptは、それ自体でWebサイトをさらに複雑にします。フレームワークとノードパッケージの巨大なぐらついた山をインストールしても、事態はさらに悪化します。

このため、一部の人々は基本に固執することを好みます。 HTMLはうまく機能し、CSSはその癖があり、JavaScriptは少しファンキーです。しかし、それらはすべて堅実です!彼らは変化し進化し続けますが、ゆっくりと着実に。多くのフレームワークは、コードを壊す変更を追加することになります。

ただし、jQueryやハンドルバーなど、フロントエンドプログラマーとしての生活を楽にするスクリプトがいくつかあります。 jQueryはすばらしいものですが、コードベースが複雑になりすぎるとスパゲッティになります。ハンドルバーも素晴らしいですが、JSを使いやすくするためにはあまり効果がありません。

Vueはこれらのツールの両方を置き換え、それらの問題を解決できます。そして、それはあなたのウェブサイトを完全に制御することなくそうします。それは、現代のJavaScriptの頭痛のない現代のJavaScriptプラクティスを紹介します。

Vueは、はるかに重いフレームワーク機能を備えた軽量フレームワークです。フロントエンドWeb開発の経験がある場合は、Vueの使用方法を数日で学ぶことができます。そうでない場合は、必要なものから始めることができます。

フレームワークを使用する主な理由の1つは、フレームワークを使用して開発を迅速かつ簡単に行えることです。たとえば、 プログレッシブWebアプリは、プログラムによるナビゲーション、カスタムレイアウト、オンザフライで変化する構造に依存しています。フロントエンドフレームワークは、この課題をほとんど簡単にします。 Vueも例外ではありません。

最新のフレームワークのおかげで、以前は数ヶ月から数週間かかっていたプロジェクトを完了することができます。また、Vueは非常に軽量で扱いやすいため、プロトタイプを数時間または数日で完成させることができます。

開発者は、最新のフロントエンドフレームワークからいくつかの利点を期待しています。 HTMLの文字列置換、コンポーネントベースのアーキテクチャ、およびツールが良い例です。 Vueには、これらの利点のすべて、および上記のフレームワークセクションで述べた利点があります。

Webアプリの開発者は、製品をモバイルアプリとして利用できるようにすることを望みます。伝統的に、彼らはiOSとAndroid向けにビルドする追加の開発者を雇うことによってこれを行いました。したがって、3つのプラットフォーム間で調整する方法を見つける必要があります。しかし、今日、他のオプションがあります。

1つのオプションは、NativeScriptを使用してモバイルアプリをビルドすることです。これにより、開発者は同じJavaScriptコードを使用してAndroidとiOS用にビルドできます。 Nativescript開発者は、新しい開発者を雇わなくても、Webコードをモバイルデバイスに取り込むことができます。そして、それはVueを非常にサポートしています。

2019 State of JS調査によると、Vue、Angular、Reactは最も人気のある3つのフレームワークです。それらについて考慮すべきいくつかのポイントを次に示します。

  • Angularは最初のビッグネームのフロントエンドWebフレームワークでした。それはGoogleによって公開されており、2010年から存在しています。ディレクティブを介した動的なHTMLの世界と、コードを更新せずにページ上で魔法のように更新する3方向データバインディングを導入しました。
  • Reactは2013年にFacebookによって最初にリリースされ、Angularに代わるよりアクセスしやすいものです。 Reactは、JSXとコンポーネントを使用することで最もよく知られています。
  • Vueは、元Googleの従業員であったEvan Youによって2014年にリリースされました。 Vueは革新的なものを導入していません。しかし、それはより良い、よりクリーンな作業方法を導入しました。

ビッグスリーのメリット

  • Angularはフレームワークのエンタープライズグレードの獣です。それは最も長い間存在しており、Googleによって構築および保守されています。
  • 2019年のJavaScriptの状態によれば、Reactは3つの大きなフレームワークの中で最も広く採用されていました。扱いやすく、柔軟性があることで知られています。
  • Vueは主観的に学習および実装する最も簡単なフレームワークです。また、豊富で強力な機能セットを犠牲にすることなく、簡単に使用できます。

ビッグスリーへの批判

角度

Angularは過去に習得するのが難しいことで有名です。バージョン1(AngularJS)のドキュメントでは、大学レベルのコンピューター専門用語を多く使用していました。ただし、バージョン2(角度)は大幅に簡素化および最適化されています。

  • GoogleがAngularをリリースしたとき、AngularJSのトップレベルのコンセプトを維持していました。しかし、同社は細部を大幅に変更したため、多くの開発者は依然として混乱を招きました。
  • Angularの初期には多くの変更があり、ほぼすべてのバージョンで画期的な変更が行われていました。 Angularの方が優れていますが、それでも非常に形式的で厳格であり、一部の開発者が学ぶのは困難です。

反応する

Reactの最高かつ最も挑戦的な側面の1つはJSXです。 HTML、CSS、JSを1つの言語に圧縮します。これにより、開発者にとってすべてが容易になりますが、デザイナーにとってはより困難になります。

  • また、JSXを使用すると、既存のライブラリを操作するのが難しくなります。さらに、デザイン、レイアウト、コードを同じ場所に配置することはアンチパターンと見なされます。これにより、乱雑で読みにくいコードが作成される可能性があります。
  • Reactは、コンポーネントを使用してコードを分離することにより、これを適切に処理します。しかし、コンポーネントを正しく使用するかどうかは、個々の開発者次第です。
  • Reactは技術的にはフレームワークです。ただし、ナビゲーションやアプリレベルのステータス管理など、いくつかの重要な機能が欠けています。

Vue

Vueは、他の2人の偉人が言及したすべての問題を解決します。 Angularとは異なり、簡単に学ぶことができます。 JSXとは異なり、VueコンポーネントはHTML、CSS、JSを分離します。

  • デザイナーがVueコンポーネントで作業する方がはるかに簡単です。そして、すべてをクリーンに保つことは完全に開発者の責任ではありません。
  • Vueが直面する最大の課題は、比較的低い採用と「アプリキラー」の欠如です。多くの企業がVueを使用していますが、おそらくブランド認知度はありません。

Vueは別のファッションですか?

Vueは数年前から存在していますが、彼はまだ新しい子供です。彼はまた、他の2つの企業の後ろ盾も持っていません。そしてすでに述べたように、それが何ができるかを示すキラーアプリはありません。

Vueがエンタープライズレベルのサポートに欠けているものは、情熱と基本的なサポートで補われます。 Evan Youは、自分と他の開発者をサポートするためにPatreonキャンペーンを実行します。ある意味で、Vueは民主的に管理されています。 Vueに十分な関心があり、企業がそれを支持する用意がある限り、Vueは固執します。

Vueの最高の部分

Vueは、他のフロントエンドフレームワークの優れた部分と、他の多くのVue独自の機能を提供します。以下はリストの一部です。

  • Vueは、構造と再利用性のためにコンポーネントベースのアーキテクチャを使用しています。
  • HTML、CSS、JSをコンポーネントで分離します。
  • Vueは、開発者とデザイナーの両方にとってなじみのあるものになります。
  • プロジェクトを提供、構築、作成するための完全なGUIを提供します。
  • Vueをアプリとして実行すると、ホットリロードが使用されます。ホットリロードは、更新されていないページで変更されたもののみを更新します。

Vueは私費のプロジェクトで、諸経費や会社の方針はありません。これは、ビジネスイニシアチブにとって望ましくないものになる可能性があります。しかし、学ぶのは簡単で、遊ぶのも楽しいので、最先端のスタートアップに最適です。

おそらく最高の機能は、それがすべてではないです委員会で、プラグマティズムによって設計されていることであることを懸念オープンソースソフトウェア

(出典)