はじめに
- （投稿した現時点において）Vueでのフロントエンド開発が主流となっていることを感じる
- 今回はVue3に関する知識的なことと、環境構築（mac）部分について記載する
- 知識的なことはいくつかサイトを閲覧して纏めたものになる
- 環境構築については手順を記載したものになる
フロントエンド開発のトレンド
- フロント市場ではReactに次ぐ2番目に人気がある
- Vue.jsが伸びてきている
参考URL
Vue.jsについて
Vue.jsとは？
- フロントエンド開発のUI（ユーザーインターフェイス）を構築するための、人気のある OSS JavaScriptフレームワーク
Vue.jsの特徴
学習コストが低い
- 他のJSフレームワーク（React/Angular等）と比較すると従う必要のあるルールが少なく、シンプルに作られている
- そのため、JS/HTML/CSSの基礎知識があれば既存知識を活用できる
- 一方でルールが少ないため大規模での開発で利用する場合は、Nuxt.jsなどVue.jsを拡張したフレームワークを利用する必要がある
開発スピードが早められる
- Directive（ディレクティブ）という、Viewの要素に付加できる独自属性がある
- ディレクティブを利用することでDOM操作ができ、HTML要素の表示・非表示などを柔軟に変化させることができる
- 日本語での技術ブログや記事も充実している
作業の簡素化が可能
- Vue.jsはコンポーネント指向のフレームワークであるため、画面の部品を一つまたは複数のコンポーネントとして作成することができる
- ボタンや入力欄など、複数の画面で使用するものを“コンポーネント”という単位で区切ることができる
- 再利用性が高くなり、デザインと技術の共同作業の簡易化でき、開発スピードの向上につながる
他のJSフレームワークとの比較について（参考URL）
Vue3について
- Vue3は、Vue2からメジャーバージョンアップされたもの
- 2020年9月に正式リリース
- Vue2とVue3とでは全く別物
- Vue2から基本的な部分から変わっている
- Vue2のプログラムはほぼVue3で動かない
- 本格的な開発を行うためにはNode.jsをインストールする必要がある
- 「ないとVue3は使えない」ということはない
Vue.js devtoolsについて
- Chromeで用意されている機能拡張を設定する（Vue.js devtools）
- 開発者ツールのVueタグ押下により、Vue3によってどの部分にどのデータが表示されているか分かるようになる
環境構築の前に
- まずは環境構築しなくても、htmlに
<script>タグを追加してVue3を使える方法を試す
<!DOCTYPE html>
<html>
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "message">
{{ message }}
</div>
<script>
const adddata = {
data() {
return {
message: 'Hello World!'
}
}
}
Vue.createApp(adddata).mount('#message')
</script>
</body>
</html>
- プラウザで
Hello World!が表示された
Vue3の環境構築（mac）
Node.jsのインストール
- https://nodejs.org/ja/ から推奨版をダウンロードする
- ダウンロードしたpkgをダブルクリックしてインストールを行う
- 「ようこそNode.jsインストーラへ」からウィザードに従ってインストールを進める
- インストールが完了したら、ターミナルを起動しバージョンを確認する
$ node -v
v14.17.6
- 上記バージョン確認できたらインストールは完了
Vue CLIのインストール
- 以下コマンドを実行する
- エラーとなったため、【備忘録】npm -g install に失敗する の記事を参考にして解決した
$ npm install -g @vue/cli
プロジェクト作成（その１）
- ターミナルから以下コマンドを実行する
$ vue create #プロジェクト名#
- プリセット
Defalut (Vue 3 Preview) ([Vue 3] babel, eslimt)を選択する - プロジェクトの作成が開始され、少し待つと作成が完了する
- プロジェクトの実行は以下コマンドを実行する
$ npm run serve
- http://localhost:8080/ にアクセスすると、デフォルトで用意されているWebページが表示される
プロジェクト作成（その２：Vite）
- ターミナルから以下コマンドを実行する
$ npm init vite-app #プロジェクト名#
$ cd 指定したプロジェクトのパス
$ npm install -> 必要なパッケージのインストール
$ npm run dev -> 実行
- http://localhost:3000/ にアクセスすると、作成したプロジェクトが表示される
- Vue3に関しては、プロジェクトの生成や実行、ビルドといった作業は「Vite」で行うのが基本らしい
プロジェクト作成（その３：GUI）
-
$ vue uiコマンド実行により、GUIでプロジェクト作成ができる
さいごに
- 簡単な実装関連については次回投稿できたらと思います