【Vue.js】Vue.jsでWEBアプリを作成してみよう！

Vue.jsでWEBアプリを作成してみよう！

本記事では複数回に分けてWEBアプリを作成をご紹介していこうと思っています。

そこで今回はVue.jsを利用していきたいと思います。

1.Vue.jsとは？

---

Vue.jsはUI(ユーザインターフェース)を構築するためのオープンソースのJavaScriptフレームワークです。他のフレームワークReactやAngularより断然簡単に始めることができます。シンプルさや書きやすさ、見やすさを売りにしておりそれを皆様に体験していただこうと思います。

■Vue.jsのメリット

• 構造が単純なものになっており、HTMLやJavaScriptを学んだ人ならすぐ理解できるほど学習コストが低いです。一度Javascript/jQueryを触ってみた人は「わかりやすい」と感じるでしょう。
• HTML、CSS、JSが一つのファイルとしてまとめて管理できます。
• Vue.jsでは一部のパッケージ（VuexやVueRouterなど）がVueと深く統合されており、ライブラリの非互換性に起因するバグが起こりにくいです。
• 公式ドキュメントの情報が豊富であり、文章だけでは理解できなかった人向けのビデオトレーニングも用意されています。

■Vue.jsのデメリット

• ReactやAngularと比較してプラグインが少ないです。これが大きなデメリットになります

2.Vue.jsを試してみよう

---

今回は簡単かつ素早く始めるためにVue CLIというのを利用したいと思います。

Vue CLIとは、複雑な構成の処理を必要とせず簡単にVueアプリの開発が開始できるようになるコマンドラインユーティリティです。

■開発環境

今回の開発環境は下記の通りです。

環境設定前の環境

• Windows 10
• Vscode 1.56(テキストエディタはお好みで)

この記事でインストールするもの

• Node.js
• Npm
• Vue CLI 4.5.13

■Node.js とNpmのインストール

こちらの記事の「■Node.js とNpmのインストール」にインストールのやり方をまとめています。

■Vue CLIのインストール

次は、npmを使ってVue CLIをインストールしましょう。

npm install -g @vue/cli 

これですべてインストールは完了です。

3.最初のWebアプリを作ってみよう

---

Vue CLIのインストールが完了したらアプリを作ってみましょう。

■新規プロジェクトの作成

コマンドラインツールを開き、プロジェクトを保存したいフォルダに移動します。

cd フォルダへのディレクトリ

下記コマンドを入力することで対話形式でプロジェクトが作成できます。

vue create プロジェクト名

プリセットを選択するように求められます。今回はVue 3のデフォルトプリセットを使用したいと思います。

実行すると必要なパッケージがダウンロードされ、セットアップが完了します。

■動作確認

次に、新しく作成されたディレクトリに移動してWebアプリを起動してみましょう。

cd プロジェクト名

npm run serve

コマンドラインツールに表示されているurlにアクセスし下のような画面が表示されれば成功です。

ブラウザ上で表示します。

■画像と文字を変更してみよう

最後に、ブラウザに表示されている画像と「Welcome to Your Vue.js App」という文字を書き換えてみましょう。

まず、好きな画像を同プロジェクトフォルダ内の「src/assets」配下に入れましょう。

次に、「App.vue」ファイルを以下の様に変更します。

修正前のコード

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

修正後のコード

<template>
    <!-- logo.pngを自分で入れた画像の名前に変更 -->
    <img alt="Vue logo" src="./assets/coke.png">
    <!-- msg内に好きな言葉を入力 -->
    <HelloWorld msg="I Love Coke"/>
</template>

変更が完了したら下記のコマンドを実行しましょう。

npm run serve

コマンドラインツールに表示されているurlにアクセスし下の画面の様に画像と文字が自分の変更したものになっていれば成功です。

4.まとめ

---

すごくお手軽かつ簡単に環境の用意をすることができました。小規模開発ならVue.jsで十分だと思います。公式ドキュメントも充実しており申し分ないです。ただし、ReactやAngularと比べると人口が少ないこともあり、情報が少ないのが少し残念です。

5.次回

---

時計アプリを作成して、Vue.jsの基本をご紹介していきます。それを通してVue.jeやWebの技術的な内容も説明していきたいと思います。

6.参考リンク

---

• Vue.jsの公式サイト：https://jp.vuejs.org/
• Vue CLIの公式サイト：https://cli.vuejs.org/

---

これからエンジニア転職を考えている方へ！

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください