*Vue.jsとは、オープンソースのJavaScriptフレームワークを指します。*ユーザインターフェース構築に利用します。プログレッシブフレームワークと名付けられており、ビュー層のライブラリ利用から段階的に導入することができます。動的にサーバーと通信する、SPA（シングルページアプリケーション）まで対応します。
【参考】：[Vue.js](https://v3.ja.vuejs.org/)

JavaScriptに関するフレームワークについて徹底解説！

Vue.jsのコミュニティは活動は盛んで、日本にも、Vue.js 日本ユーザーグループがあります。*Vue.jsの普及と、Vue.jsエコシステムへの貢献を行っています。*大規模カンファレンスである、「Vue Fes Japan」を年に一度実施しており、2022年も10月16日オンライン開催を予定しています。
【参考】：[Vue.js JP](https://vuejs-jp.org/)
【参考】：[Vue Fes Japan](https://vuefes.jp/2022/)

Vue.jsの活用事例ですが、国内外問わず利用が拡大しています。*最新の事例は、Vue.js 日本ユーザーグループが主催する「Vue Fes Japan」でも公開されています。*

コミュニティを通じた活用事例発表の他にも事例は多くありますが、今閲覧しているサイトにVue.jsが使われているかどうかは簡単にわかります。具体的には、Chrome拡張機能の「Vue.js Devtools」をインストールすると、Vue.jsで開発されているサイトがロードされる際に、「Vue.js Devtools」のアイコンが緑色（アクティブ）になります。
【参考】：[chrome ウェブストア Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

アイコンが緑色になるサイトの代表例は、「Apple SwiftUI Tutorials」「ZOZOTOWN」「WORKMAN」「マイニンテンドー」など多数あります。
【参考】：[Apple SwiftUI Tutorials](https://developer.apple.com/tutorials/swiftui)
【参考】：[ZOZOTOWN](https://zozo.jp/)
【参考】：[WORKMAN](https://workman.jp/shop/default.aspx)
【参考】：[マイニンテンドー](https://my.nintendo.com/)

Vue.jsは、Evan Youによって開発されましたが、*AngularJSを使用したアプリ開発の経験からAngularの気に入っている部分を抽出し開発した経緯があります。*そのメリットですが、以下のような点が挙げられます。
【参考】：[Vue.js](https://v3.ja.vuejs.org/)

リアクティブという、単純で直観的に管理できるJavaScriptオブジェクトシステムを採用しています。*構造がシンプルで拡張しやすいというメリットがあります。*プログレッシブフレームワークという段階的導入に対応し、ビュー層のみのライブラリ利用から段階的に導入することができます。

ドキュメントが豊富で、JavaScriptオブジェクトモデルの構造が理解しやすくなっています。そのため、*学習効果が高く、他のフレームワークよりも覚えやすい特長があります。*

*HTML・CSSとJavaScriptを完全に分離しているため、コーディングしやすい特長があります。*アプリはコンポーネントという分割単位で管理され、再利用できます。また、プラグイン機能を利用することで、コードの再利用を容易にしています。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

JavaScriptのフレームワークでは、通常DOM（Document Object Model）の操作が必要です。*Vue.jsではディレクティブ機能があり、HTMLに属性を付与することで自動的にDOM操作を行うことができます。*そのため、コードがシンプルになりメンテナンスも容易です。

*サーバー通信量を抑えるSPA（シングルページアプリケーション）をベースとしており、ルーティングによる移行遷移のマッピングを容易にしています。*また、トランジションコンポーネントにより、DOM操作を自動的に行うこともできます。

*Vue.jsは、作者のEvan YouがAngularの良いとこどりから着想を得ていますので、総じて目立ったデメリットはありません。*Vue.jsのデメリットですが、あえて挙げるならば以下のような点が挙げられます。

### 大規模プロジェクトがカバーされない

Vue.jsは、軽く動作することを主眼に置いて設計されており、比較的小規模なプロジェクト用を想定しています。そのため、*大規模プロジェクトで想定している、モジュール連携や制御が十分ではありません。*

### ウェブシステムに限定される

*JavaScript用フレームワークですので、利用がウェブサイトやウェブアプリなどのウェブシステムに限定されます。*スマホに代表されるモバイル端末等では、App StoreやGoogle Payなどからネイティブアプリをダウンロードし利用できますが、このような用途では利用することができません。

## 他のフレームワークやライブラリとの違い

*Vue.jsは、他のフレームワークやライブラリからの移行も進んでいます。*ここでは代表的なライブラリであるjQueryやReact、およびフレームワークであるAngularを取り上げてVue.jsと比較していきます。特長や用途の違いについて解説していきます。

jQueryは、JavaScriptライブラリの1つでコードをシンプルに開発するために考案されました。イベントハンドラ・アニメーション・Ajax用のAPIが提供されます。
【参考】：[jQuery](https://jquery.com/)

Vue.jsとjQueryの違いは、簡単に言うとVue.jsがフレームワークで、jQueryは単なるライブラリです。jQueryは最小のコード量で、より多くの事を実装することを目標として開発されており、導入がしやすく多くのフロントエンドアプリケーションで使用されています。

その反面、*DOM操作を手動で行う必要があり多少手間がかかります。*また、SPA（シングルページアプリケーション）のニーズに対応できないため、高度な処理には不向きです。

jQueryとは？特徴・できること・導入方法・使い方を解説！

Reactは、ユーザーインターフェース構築のためのJavaScriptライブラリです。Facebook（現Meta）とコミュニティによって開発されました。
【参考】：[React](https://ja.reactjs.org/)

Reactでは、ライブラリながらいくつかVue.jsと同等の機能を実装しています。具体的には、仮想DOMを利用しており、DOMの状態をメモリ上にキャッシュし効率化を図っていることが挙げられます。コンポーネントをベースにしていますので、小さなコンポーネントを組み合わせて複雑なインターフェースを構築していきます。

*Reactはライブラリのみなので、コードサイズが小さい特長があります。*加えて中・大規模の開発向けにも利用できます。Vue.jsの場合は、コードが読みやすいため学習効果が高く簡単に記述できるメリットがあります。そのため、ReactからVueへ移行するのも簡単です。

Reactの将来性はVue超え？できることやメリット・デメリットも解説

ReactとVue.jsの違いは何？概要や具体的な違いを整理する

Angularは、Googleと個人やコミュニティによって開発されました。JavaScriptのスーパーセットであるTypeScriptベースで、フルスタックのフレームワークです。
【参考】：[Abguolar](https://angular.jp/)

Angularは、TypeScriptをベースとしています。TypeScriptは、JavaScriptを大規模プロジェクトで利用できるように改良したものです。そのため*Angularは、大規模アプリの開発に適しています。*その反面、TypeScriptの知識が必要ですので多少知識のハードルがあがります。

フルスタックのフレームワークであり、ウェブユーザインターフェースの構築以外にも対応できます。SPA（シングルページアプリケーション）開発で、複雑なウェブアプリケーションに対応できます。必要な機能が揃っているため、コードサイズに関しては多少大きくなります。

Vue.jsは、Angularに影響を受けて開発されたフレームワークですので、構文が似ています。すでにフレームワークを利用している方は、理解しやすいメリットがあります。そのためVue.jsは、学習効果が高く簡単に記述できると言えます。

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

*Vue.jsの使い方ですが、HTMLにScriptの要素となる\<script>を記述し、JavaScriptコードを作成します。*JavaScriptコードはHTMLと同じファイルでも別ファイルでも構いません。最初に「Hello World の例（Hello Vue）」を見ておくと、理解が進むでしょう。

【参考】：[Vue.js 基本的な使い方](https://v3.ja.vuejs.org/guide/introduction.html)
【参考】：[Vue.js はじめに](https://v3.ja.vuejs.org/guide/introduction.html#%E3%81%AF%E3%81%97%E3%82%99%E3%82%81%E3%81%AB-2)
【参考】：[Codepen Hello Vue](https://codepen.io/team/Vue/pen/KKpRVpx)

Vue.jsのインストール方法はいくつかあります。自身の環境に合わせて利用します。
【参考】：[Vue.js インストール](https://v3.ja.vuejs.org/guide/installation.html)

・*CDNを使う*
ローカルに保存せずに、CDN（コンテンツデリバリネットワーク）のサイトを利用し、コードに取り込みます。

```<script src="https://unpkg.com/vue@next"></script>```

・*ローカルに保存する*
CDNサイトからダウンロードし、ローカルに保存しておきます。使用する際には、\<script>でローカルファイルを指定します。

・*npmを用いる*
パッケージ管理ツールであるnpmでローカルに保存します。

Vue.jsの環境に慣れてきたら、CLIをインストールしてより高速に処理を進めることもできます。

具体例ですが*メッセージを表示するには、HTMLに次のようにコードを追加します。*こちらの記述方法は、Hello World（Hello Vue）でも確認できますので、すぐに理解できるでしょう。

```<div id="app">
  {{ message }}
</div>```

JavaScriptコードは次に様に記述することで、”メッセージの表示”がされます。

```const App = {
  data() {
    return {
      message: 'メッセージの表示'
    }
  }
}
Vue.createApp(App).mount('#app')```

## 触ってみて違いを理解しましょう

Vue.jsのような、ウェブアプリケーションの開発フレームワークでは、机上で理解するよりも実際に使用した方が、画面の遷移や制御の理解がしやすくなります。**ある程度特徴が理解できたら、実際に操作してみて感覚をつかむことで、一層理解が進むでしょう。**

Vue.jsの学習におすすめの本8選！学ぶメリットも併せて解説

JavaScriptの資格とは？資格の種類・特徴・難易度を解説

Vue.jsとは、オープンソースのJavaScriptフレームワークを指し、ユーザインターフェース構築に利用します。ここでは、Vue.jsの概要や特長、利用メリットとデメリット、他のライブラリやフレームワークとの比較、そして使い方まで解説していきます。

Vue.jsとは、オープンソースのJavaScriptフレームワークを指し、利用者が増えています

構造がシンプルで、徐々に拡張できるためプログレッシブフレームワークと名付けられています

JavaScriptフレームワークであるAngularの良い点を抽出しており、多数のメリットがあります

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

## Vue.jsの学習に役立つ本について

Vue.jsはJavaScriptのフレームワークとして有名です。Vue.jsは用途が豊富で、フロントエンドの開発やWebアプリケーション開発、モバイルアプリケーションの開発などでも利用できます。

しかし、プログラミング初心者の方や、まだ経験が豊富でない方にとっては、どのように勉強したらよいか迷ってしまうかもしれません。

**そこで本記事では、Vue.jsの学習に役立つおすすめの本を8選紹介します。**自分にあった1冊を見つけ、ぜひ学習の足がかりにしてください。

## 本でVue.jsを学習するメリット

Vue.jsには公式サイトのチュートリアルやドキュメントもあり、なぜ本で学ぶ必要があるのか疑問に思われる方もいるでしょう。**そこでここでは、Vue.jsを本で学ぶメリットを紹介します。**

### 学習レベルに合わせて学べる

まず、Vue.jsを本で学習するメリットは、自分のプログラミングスキルやレベルに合わせて学習できる点です。

Vue.jsを学習する場合、実は本の他にも勉強する方法はあります。例えばVue.jsの公式サイトから、ドキュメントやチュートリアルを読んで学習することも可能です。しかし、プログラミングや開発経験が豊富でない方は、公式サイトのチュートリアルやドキュメントを難しく感じる可能性があります。

せっかく学習への意識が高まっても、ドキュメントを読み解くのが大変で挫折してしまっては、もったいないでしょう。

*一方で、本を活用して学習すれば自分の学習レベルに併せて勉強できますので、挫折せずにVue.jsを学習することができます。*

【参考】：[Vue.js ドキュメント](https://ja.vuejs.org/guide/introduction.html)
【参考】：[Vue.js チュートリアル](https://ja.vuejs.org/tutorial/#step-1)

### 目的に沿ったVue.jsの学習が可能

Vue.jsを勉強したい方の中には、基礎的な知識を身につけたい方もいれば、より実践的な技術を学びたい方もいるでしょう。

本を使ってVue.jsを学習する場合、目的別に勉強することが可能です。例えば、環境構築やWebアプリケーションの開発方法を解説することをメインとした本もあります。

*自分の目的にあった本を選べば、無駄な時間をかけずに知りたいことをピンポイントで学習できます。*

Vue.jsはかなり汎用性が高いフレームワークのため、そもそも何ができるのか分からない方もいるのではないでしょうか。

*Vue.jsの本の中には、使用例やできることを紹介している本もあります。*このような本を読めば、Vue.jsを活用した開発について理解できるでしょう。どういった成果物が作れるのか確認することで、学習へのモチベーションも上がるかもしれません。

## Vue.jsの学習におすすめの本8選

**ここからは、Vue.jsの学習におすすめの本8選を紹介します。**初心者向けの本から実際の開発現場で役に立つ本まで、さまざまなレベルの本を紹介しますので、ぜひ参考にしてください。

*この本は、アプリケーション開発に必要なVue.jsの知識をまとめた本です。*具体的には、ルーティングやレンダリング、コンポーネント、パフォーマンスの改善などについて触れています。

Vue.jsを使ってアプリケーション開発をしたい方に、特におすすめしたい本です。

- 著者： 野田 陽平、門脇 恒平 、山田 敬美、高橋 和樹 、 藤川 淳史 、韓 徹
- 出版社：技術評論社
- ページ数：224ページ
- 出版日：2021年2月18日

【参考】：[みんなのVue.js](https://gihyo.jp/book/2021/978-4-297-11902-7)

### Vue.jsビギナーズガイド 3.x対応

この本は、開発現場で使える実践的な知識が集約されています。*そのため、基本的なVue.jsのコードの書き方を理解したら読むべき本と言えるでしょう。*

Vue.jsを使ってサイトを実際に作りたい方や、仕組みを詳しく知りたい方におすすめの本です。

- 著者： 株式会社MONSTER DIVE
- 出版社：C&R研究所
- ページ数：200ページ
- 出版日：2021年7月20日

【参考】：[Vue.jsビギナーズガイド 3.x対応](https://book.mynavi.jp/manatee/c-r/books/detail/id=123860)

### 現場で使えるVue.js 3.x実践ガイド

本書は、開発の現場で必要な知識をまとめた、より実践的な内容が記載されています。*機能的なWebサイトの作成や、Webアプリの作り方などが掲載されており、実際に手を動かしながら学習したい方におすすめの本です。*

- 著者： 株式会社MONSTER DIVE
- 出版社：C&R研究所
- ページ数：328ページ
- 出版日：2021年7月16日

【参考】：[現場で使えるVue.js 3.x実践ガイド](https://book.mynavi.jp/manatee/c-r/books/detail/id=123859)

### Vue 3 フロントエンド開発の教科書

*本書はVue.jsのバージョンアップに対応した、最新のVue 3について解説しています。*例えばTypeScriptの標準採用、新機能Composition APIなどについても触れており、最新の情報を学びたい方におすすめの本です。

さらに、非同期処理やユニットテストなど、一歩踏み込んだ応用的な内容も解説されています。Vue.jsについてしっかり応用まで勉強したい方は応用編も読んでみましょう。

- 著者： WINGSプロジェクト 齊藤新三、山田祥寛 監修
- 出版社：技術評論社
- ページ数：432ページ
- 出版日：2022年9月28日

【参考】：[Vue 3 フロントエンド開発の教科書](https://gihyo.jp/book/2022/978-4-297-13072-5)

### これからはじめるVue.js 3実践入門

本書では、JavaScriptの歴史からVue.jsの基本、コンポーネントなど基本的な知識に加え、Vue CLIやルーティングや、テストについても触れています。*基礎的な知識から応用的な知識まで、体系的に学習したい方は、こちらの本もおすすめです。*

- 著者： 山田 祥寛
- 出版社：SBクリエイティブ
- ページ数：550ページ
- 出版日：2022年3月19日

【参考】：[これからはじめるVue.js 3実践入門](https://www.sbcr.jp/product/4815613365/)

この本では、Vue.jsの基本から環境構築、基本的な使い方、コンポーネントについてなどを解説しています。*基礎から徐々に実践的な内容を解説しているため、Vue.jsにまだ詳しくない人でも理解しやすい構成になっています。*

また、例えばコンポーネントを動的に切り替えたい場合やアニメーションをつけたい場合など、開発中によくある技術的な疑問についても解説しています。

- 著者： 長島優斗，久光未悠，東泉哲寛，鶴田展之，（株）qnote
- 出版社：技術評論社
- ページ数：344ページ
- 出版日：2023年4月19日

【参考】：[Vue.jsポケットリファレンス](https://gihyo.jp/book/2023/978-4-297-13479-2)

### Vue.jsのツボとコツがゼッタイにわかる本[第2版] 

*この本は、Vue.jsを初めて学習する方向けに、基礎知識から解説している本です。*ローカルでの開発環境を構築する方法から丁寧に解説してくれるため、プログラミングの経験があまりない方でも取り組みやすいでしょう。

また、見積もりフォームの作成など、実際に手を動かすような内容もあります。そのため、実際に簡単な開発にもチャレンジしたい方におすすめの本です。

- 著者： 中田　亨
- 出版社：秀和システム
- ページ数：324ページ
- 出版日：2022年3月29日

【参考】：[Vue.jsのツボとコツがゼッタイにわかる本[第2版] ](https://www.shuwasystem.co.jp/book/9784798066608.html)

### コードレベルで比べるReact Angular Vue.js

本書はフロントエンドのアプリケーションを作りたい方向けの本です。アプリケーションを構築する際、どのフレームワークを使うべきか分からないという方のために、フレームワークごとの機能などを比較した本です。

*Vue.jsと、他のフレームワークとの違いを比較したい方は、本書もおすすめです。*

- 著者： 末次 章
- 出版社：日経BP
- ページ数：280ページ
- 出版日：2022年10月21日

【参考】：[コードレベルで比べるReact Angular Vue.js](https://bookplus.nikkei.com/atcl/catalog/22/09/30/00405/)

## Vue.jsを学んでITスキルを磨こう

本記事では、Vue.jsでおすすめの本8選を紹介しました。**自分の目的にあった本を探して、ぜひ学習を進めてみましょう。**また、Vue.jsをまだ触ったことのない方は、初心者向けの本を選ぶことをおすすめします。

Vue.jsへの理解がある程度深まり、実際にアプリケーションを作ってみたいという方は、今回紹介した実践的な内容の本を選んでみましょう。Vue.jsを学習すれば、システム開発の現場やプライベートで活用することもできます。もしVue.jsに興味がある方は、ぜひこの機会にVue.jsを学習してみましょう。

Vue.jsはJavaScriptのフレームワークとして有名ですが、初心者の方にとってはどこから勉強を進めるべきか迷う方もいるでしょう。そこで本記事では、Vue.jsの学習におすすめの本8選や、本で学習するメリットについて紹介します。

Vue.jsはJavaScriptのフレームワークで、Webアプリケーションやモバイルアプリの開発で使われます

Vue.jsを本で学習するメリットが分かります

Vue.jsの学習におすすめの本8選が分かります

動的なWebページの作成を行う上で、JavaScriptは必要欠かせないログラミング言語です。特にWebエンジニアを目指す方は、JavaScriptを学ばれていると思いますが、効率的な開発を行う上で欠かせないのが、フレームワークです。

JavaScriptにはよく知られたフレームワークとして、「React」や「Angular」、「Vue.js」などがあります。この記事では、*JavaScriptのフレームワーク「Vue.js」のメリット、インストール方法などについて解説をしていきます。*

【参考】：[Vue.js ｜ The Progressive JavaScript Framework | Vue.js](https://ja.vuejs.org/)
【参考】：[react.dev のご紹介 |  React](https://ja.react.dev/blog/2023/03/16/introducing-react-dev)
【参考】：[Angular 日本語版](https://angular.jp/)

Vue.js（ヴュー・ジェイエスと発音）は、主にフロントエンド開発で利用されるフレームワークです。2014年にリリースされた比較的新しいフレームワークで、JavaScriptエンジニアにはよく知られています。

フレームワークとは、開発でよく利用される機能が一つにまとめられた枠組みのことで、ルールに従ってコードを書いていくと、少ないコードで複雑なプログラミングが可能で、開発の効率化、品質の均一化などのメリットが得られます。

また、**Vue.jsオープンソースソフトウェアであり、無償で利用できる点、学習コストが低く、汎用性が高いのが主な特徴です。**

Vue.jsはシンプルな文法で、コードにScriptタグを1行追加するだけで済むため、手軽に利用でき、また拡張性が高いのも特徴です。一方で、次のような注意点がありますので、**Vue.jsを利用する際には留意が必要です。**

▪Vue.jsは比較的小規模な開発に適しており、大規模な開発には適していません。大規模開発ではAngularが利用されるケースが多くなっています。

▪Vue.jsはスマートフォンでのネイティブアプリの開発には適しておらず、今後の対応が待たれています。

Vue.jsのインストールでは、ただ単にVue.jsをインストールするのではなく、その前にNode.jsをインストールします。Node.jsはサーバーサイドのJavaScript実行環境で、さらにnpm（Node Package Manager）というパッケージ管理の仕組みが同梱されています。

Webアプリはフロントエンドとバックエンド（サーバーサイド）から構成されるのが一般的ですが、Node.jsはサーバーサイドを担い、なおかつフロントエンドのJavaScriptプログラムから制御が可能です。そのため、**Vue.jsのインストールでは、Node.jsのインストールが欠かせません。**

JavaScriptのおすすめ開発環境ツール9選！必要な準備も紹介

*ここではVue.jsの環境を構築する手順を紹介します。*最初にNode.jsをインストールし、インストールを確認できた後にNode.jsのインストールを確認し、続いてVue.jsをインストールする方法について解説します。

Node.jsとは？JavaScriptとの違いや使い所を解説

### Node.js（npm）のインストール

Vue.jsのインストールと利用には、npmが必要です。Windowsへのインストールでは、**Node.jsをインストールするとnpmも自動的にインストールされます。**以下、Node.jsのダウンロードとインストール方法について紹介します。

1．以下の公式サイトにアクセスし、Node.jsをダウンロードします。特別な理由がない限り、安定稼働している「18.17.1.LTS推奨版」を選択しましょう。

【参考】：[Node.js ｜公式サイト](https://nodejs.org/ja)

~~【画像】：Node.jsのダウンロード画面　~~

2．ダウンロードしたファイル「node-v18.17.1-x64.msi」を選択しダブルクリックすると、インストーラが起動します。［Next］を選択して先に進みます。

~~【画像】：　Node.jsのインストール開始画面　~~

3．ライセンス契約を読み、「I accept the terms in the License Agreement」にチェックを入れて［Next］を選択します。

~~【画像】：　Node.jsのダウンロード画面-ライセンス契約同意　~~

4．Node.jsをインストールする先を設定します。特別な理由がない限りはデフォルトのままで構いません。［Next］をクリックして次に進みます。

~~【画像】：　Node.jsのインストール先確認　~~

5．Automatically Install the tools.Note that this will ...」のチェック欄はチェックを入れる必要はありませんので、そのまま［Next］をクリックして次にへ進みます。

チェックを入れると、プロンプト画面が表示されてIInstration Scriptが実行されますが、大変時間が掛かり待たされますので、チェックをおすすめしません。

~~【画像】：　Node.jsのインストール先詳細設定　~~

6．Install（インストール）をクリックします。

7．インストール実行中の画面が表示されますが、1分〜2分程度でインストールは終了します。

8．インストールが終了したら、［Finish］をクリックします。

~~【画像】：　Node.jsのインストール終了画面　~~

### Node.jsのインストールの確認

**Node.jsのインストールが終了したら、Node.jsとnpmが正しくインストールされているか、それぞれのバージョン情報で確認します。**確認は次のように行います。Windows11の場合は、スタートボタンを右クリックし、「ターミナル（管理者）」を起動し、次のコマンドを入力します。

表示された結果が『v18.17.1』であれば問題ありません。

続いて、npmのバージョンも確認しておきましょう。

『9.6.7』と表示されていれば、正しくインストールされています。以上でNode.jsのインストールは終了です。

**Node.jsが正しくインストールできたら、続いてVue.jsをインストールします。**Vue.jsのインストールには「vue-cli」を使用して行います。

1．「ターミナル（管理者）」を開き「npm install -g @vue/cli」を入力します。

2．インストールが終了したら、正しくインストールされたことを確認するため、「ターミナル（管理者）」画面で「vue -v」を入力します。

『@vue/cli 5.0.8』と表示されていれば、無事にインストールできています。

Node.jsのインストールに続いて、Vue.jsをインストールしました。*Vue.jsが利用できる環境になりましたので、Vueを起動して確認してみましょう。*

1．最初にVueのプロジェクトを作成してみましょう。「ターミナル（管理者）」を開き、以下のコマンドを入力します。ここではプロジェクト名を仮に「project x」としましたが、任意の名前を設定してください。

2．コマンドを入力した後に以下のようなオプション選択が表示されます。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Defaultが［Vue3］になっていますが、安定稼働しているVue2を選ぶこともできます。また、マニュアル操作を希望する場合には、「Manually select features」を選択できます。

選択は>をカーソルキーで上下に移動して行います。今回はDefaultのままで実行します。処理が終了したら、cdコマンドでディレクトリを切り替えます。

ルートディレクトリがプロジェクト名（ここではprojectx）に切り替わったら、Webサーバを起動するために、次のコマンドを入力します。

処理が始まると次の画面が表示されることがありますが、その場合は許可を選択します。

~~【画像】：　Node.jsのアクセス許可確認画面　~~

処理が正常に終了すると次のメッセージが表示されます。

 DONE  Compiled successfully in 8529ms   

ブラウザのURL欄に「http\://localhost:8080/」と入力し、以下のページが表示されたらVue.jsは正常に起動しています。

~~【画像】：　Vue.jsの起動画面　~~

## Vue.jsを活用して開発力を向上させよう

Vue.jsはWebアプリケーションの構築に適したJavaScript用フレームワークです。Vue.jsはオープンソースのフレームワークで、気軽に使えて開発の効率アップに効果的です。この記事ではVue.jsの概要やメリット、インストール方法について解説します。

Vue.jsはWebアプリケーションの主にフロントエンドで利用される人気のフレームワーク

Vue.jsを手軽に使え、シンプルで学習コストが低いのが特徴だが、大規模開発には適さない

Vue.jsの環境構築には、あらかじめNode.jsのインストールが必要になる

Vue.jsをインストールしてWebアプリ開発を効率化させよう！

あらゆるものがインターネットに接続される時代に突入し、ユーザーインターフェース開発への要求が高まっています。**ReactとVue.jsが代表的なソフトウェアですが、ともに簡単にフロントエンドのユーザーインターフェース開発が可能であり、違いに区別がつかない方も多いでしょう。**

ここでは、ReactとVue.jsそれぞれの概要から具体的な違いなどについて解説していきます。

*Reactとは、ユーザインターフェース構築に利用されるオープンソースのJavaScriptライブラリを指します。*Metaとコミュニティによって開発されています。コード開発が簡単で、動作が軽くウェブアプリや静的サイトに対応します。Facebookに使用され、利用が広まっていきました。

【参考】：[React](https://ja.react.dev/)

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

*Vue.jsとは、JavaScriptの代表的なフレームワークを指します。*ユーザーインターフェース構築向けのオープンソースソフトウェアです。プログレッシブフレームワークと名付けられており、部分的に採用可能な設計方式を採用しています。このため段階的な導入が可能となります。

開発のきっかけは、Googleの開発者であった作者がAngularの良い部分を取り入れて新たに軽量化を目指したことにあります。

【参考】：[Vue.js](https://ja.vuejs.org/)

*ReactとVue.jsの大まかな違いは、Reactがライブラリであるのに対してVue.jsはフレームワークであることが挙げられます。*しかしながらできることや特徴は似通っていて、どちらを使えば良いかわからない場合もあるでしょう。ここからは、ReactとVue.jsの具体的な違いを見ていきます。

以下に、ReactとVue.jsの特徴の違いについて整理してみます。

・*Reactの特徴*
ReactはJavaScriptライブラリですので、モジュールの再利用性が高いことが強みです。ユーザーインターフェース開発に特化しており、必要な「コンポーネント」という部品から複雑なユーザーインターフェースを組み立てることができます。

Reactはライブラリのみなので、コードサイズが小さい特長があります。大規模の開発向けにも対応可能で、軽量ゆえに動作も軽い特徴を持ちます。逆にライブラリのみですので、アプリ全体の構築にはNext.jsやRemixなどフルスタックのフレームワークが必要です。

【参考】：[React プロジェクトを始める](https://ja.react.dev/learn/start-a-new-react-project)

・*Vue.jsの特徴*
Vue.jsは、プログレッシブフレームワークにより、ビュー層のみのライブラリ利用から段階的に導入することができます。また、再レンダリング時にリアクティブに処理がされるため、正確で最適なレンダリングが可能です。

構造は、単純で直観的に管理できるJavaScriptオブジェクトシステムを採用しています。シンプルで拡張しやすいというメリットがあります。

軽く動作することを主眼に置いて設計されており、比較的小規模なプロジェクト用を想定しています。そのため、大規模プロジェクトで想定している、モジュール連携や制御に関しては若干物足りない場合があります。

・*特徴の違いの要点*
Reactは、JavaScriptライブラリで大規模な開発もカバーします。プロジェクト使用にはフレームワークも必要なことが多いです。Vue.jsはフレームワークとして提供され、適宜ライブラリを追加して使用します。比較的小規模なプロジェクトを想定しています。

ReactとVue.jsの製品リリースの違いは次の通りです。

・*Reactの製品リリース*
Reactでは、リリース工程を「アルファ」「パブリックベータ」「リリース候補（RC）」「一般リリース」に分割しています。Meta社内で使用し問題ないと判断したコードを、コミュニティに「Canaryリリース」として先行提供することが、この5月に発表されています。

Reactは、極力マイナーチェンジで対応するよう開発しています。追加される新機能は、段階的移行が可能です。最新安定バージョンは、2022年6月リリースのv18.2.0です。

【参考】：[React Canary: Meta 外での段階的な新機能導入](https://ja.react.dev/blog/2023/05/03/react-canaries)
【参考】：[React Community Versioning Policy](https://ja.react.dev/community/versioning-policy)
【参考】：[Github Facebook / React Releases](https://github.com/facebook/react/releases)

・*Vue.jsの製品リリース*
Vue.jsのリリース工程には、「プレリリース（アルファ・ベータ）」「パッチリリース」「マイナーリリース」「メジャーリリース」があります。決まったリリースサイクルはありませんが、「パッチリリース」は必要に応じて適宜公開されています。

「プレリリース」は一般に推奨されていませんが、「実験的（Experimental）リリース」は条件付きで提供されます。最新安定バージョンは、2023年5月リリースのv3.3.4です。

Vue.jsの記事（1ページ目）