TOP

BLOG

技術研究ブログ

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

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

2021-06-10

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

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

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


1.Vue.jsとは?


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

■Vue.jsのメリット

■Vue.jsのデメリット


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


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

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

■開発環境

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

環境設定前の環境

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

■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.参考リンク



株式会社ロックシステム
「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。

他の記事へ