概要
javascript のフレームワークの一つである Vue の中の最新版である Vue3 のプロジェクトの始め方について紹介していきます。
Vue を初めて使う方、フロントエンド開発をやってみたい方はぜひみていってください。
Vue 3 とは
Vue は現在もっとも注目されいているフロントエンド開発のフレームワークにうちの一つです。
これまでは、サーバーサイドでデータの処理をしてhtml javascriptを使って画面に表示したりちょっとした処理を加えるというのが主流でした。
しかし、昨今では画面の動作がかなりリッチになってきて滑らか挙動をすることが多くなってきています。それを実現するにはjavascriptを駆使する必要があり、いっぱい複雑なコードを書く必要がありました。（データが変わったら、画面に反映させたり….）
そこで、毎回毎回javascriptで大変な思いをしないように、簡単に表現をするために、フレームワークというものが登場しました。そのうちの一つがVue.jsということです！
Vue3 ってどんなもの?
リリースされて間もない！
Vue3は、Vue2からメジャーバージョンアップされたもので、2020年9月にリリースされたばかりです（現在2021年7月)
リアクティブ・プログラミング
Vue3の最大の特徴の一つとも言える「リアクティブ」は「反応する」という意味です。
さまざまなデータが更新されると自動的にそのデータを利用している画面を更新してくれます。
コンポーネント・システム
Vue3は「コンポーネント」と呼ばれる部品として様々な機能を実装できます。コンポーネントは再利用可能で、簡単に作成でき、それを配置すれば自動的に表示されます。
テンプレート
Vue3にはHTMLをベースとするテンプレート構文が用意されていて、それを利用することでHTMLの中に組み込むことができます。
Vue3を利用する
Vue3を利用するにはCDNを使用する方法とNode.jsを使う方法があります。
CDNを使ってVueを使ってみる
まずは、CDNを使ってVueを使ってみよう。サンプルコードは以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<h1>Vue3</h1>
<div id="app">
{{message}}
</div>
<script>
const appdata = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(appdata).mount('#app');
</script>
</body>
</html>5行目で、Vue3のロードを行なっていてこれで実際に使用することができます。
画面に”Hello Vue!”と表示されれば使用できています。
逆に{{message}}という表示がされている人は、うまくいっていないので、ソースコードをよく読んでみてください。
Node.jsを使う方法
ここでは、実際にVueを使って開発する人向けの紹介になります。実際には先ほどのhtmlみたいに毎回毎回CDNからロードをするということはナンセンスです。
しようするライブラリをパッケージ管理する必要があります。そこで登場してくるのがNode.jsのnpmです。ということで、まずnode.jsからインストールしましょう。以下のコマンドでNode.jsがローカルにないことを確認して、なければインストールしましょう。リンク
node --version次に、プロジェクト生成ツール Vite を使ってみよう
ViteはVue開発のためのコマンドラインツールで、プロジェクトの作成、実行、ビルドなどを行なってくれます。以下のコマンドでインストールしましょう。
同じツールとして、Vue CLI というツールもあり、同じことができるのですがこちらは、コマンドラインでの操作に不慣れな方のためにあり、GUIからプロジェクトを作成できます。
しかし、多機能故に若干重いというのが難点なので、Viteというツールを使うことをお勧めします。
Vite はインストール不要で以下のコマンドで Vite によるプロジェクトを作成できます。
npm init vite-app プロジェクト名
cd プロジェクト名
npm install
npm dev上記のコマンドを順に実行することで、localhost:3000にアクセスできる様になり、画面の表示ができる様になります。
プロジェクトのファイル構成
プロジェクトをViteで作成すると自動でフォルダやファイルが作成されます。
node_modules
npmで管理されるモジュール類がまとめてあります。
public
公開フォルダです。HTMLやCSSなど公開されるファイル類が保管されています。
src
ここに、Vue3で作成したファイルなどがまとめられています。
bable.config.js
Babelというプログラムの設定がファイルです。
package.json
npmでパッケージ管理するための設定情報です。
package-lock.json
npmでパッケージ管理する際に必要なファイルです。
まとめ
今回は、Vue3とはなんなのか、どんな特徴があるのか、どうやって始めたらいいのかということを記事にしてみました。
初めてVueを触るというかたは、ここからプロジェクトの作成を行なってみましょう！
また、Vueに関する使い方や機能についても紹介していこうと思います。
コメント