Vue3 Viteを使用したプロジェクト作成

Vue3の基礎を学習してきましたが、実際にアプリケーションを作成するとなると部品を一つのHTMLにまとめるというのはあまり効率の良い方法ではありません

大がかりなものになればなるほどどこに何が書かれているのかコンポーネントが複雑になります

また、個人開発ならそれでも何とかなるかもしれませんが、共同での開発となると一つのファイルを更新していくというのは現実的ではありません

コンポーネントごとでファイルを分けることで修正が必要になった時に触らなければならない箇所はわかりやすくなりますし、修正箇所も少なくなります

効率もよく、可読性も上がります

そこで実際にアプリケーションを作成するとなるとプロジェクト作成用のツールを使って作成することが多くなるのではないでしょうか

プロジェクト作成ツールがなぜ良いのか

Vueには主に2つのプロジェクト作成ツールが存在します

それがVueCLIとViteです

どちらもコマンドをつかってプロジェクトを作成することができます

こういったツールは本当に便利です

ある程度形が作られた状態でプロジェクトが作成されるので、最初に作られた状態から必要なものをその枠にはまるように付け足していけばよいだけです

私が個人的にわかりやすいと思ったのは、ディレクトリの構造が作られているということです

プロジェクトの作成ですので当たり前ですが、これが最初から作られているので迷わずにすみます

地味なことですが、最初にプロジェクトを作成したときに

なるほど、ここにコンポーネントをどんどん追加していけばいいのか、というようにとても分かりやすい構造になっています

どこから取り掛かればよいかというのが分かりやすいというのは、ストレスが少なく、作業もはかどります

Viteを使ったプロジェクトの作成について

VueCLIとどちらを使うか迷いましたがViteを使ったプロジェクトの作成をしました

理由は単純ですが、開発時の動作が軽いからです

導入もインストールなど必要はありません

ターミナルでnpmコマンドから作成できます

$ npm init vite@latest <プロジェクト名> — –template vue

このようにコマンドを入力したあとで対話形式でプロジェクトを作成していきます

その後

$ cd <プロジェクト名>
$ npm install
$ npm run dev

プロジェクトのディレクトリに移動してnpm installで必要なモジュールをインストールします

公式サイト(こちら)に詳細があります

最後のコマンドはローカルサーバーが立ち上がり、プロジェクトが走ります

立ち上げた際に、ポートなども表示されますので、そちらをクリックするとブラウザが開きます

基本的にサーバーを立ち上げて、修正を加えつつ更新(保存)をするとそれに合わせてブラウザでの表示もリアルタイムに切り替わります

開発状況を目で確認しながらコーディングすることができます

いわゆるホットリロードです

見慣れないタグ script setup

Viteでプロジェクトを立ち上げて中身を見ていくと.vueファイル(1つのコンポーネントをファイル化したもの)に見慣れないタグがあります

script setupというタグです

これを解読するのに少し時間がかかりました

このタグはSFC(Single File Componentの略、スーパーファミコンじゃないっす)でアプリケーションを作成する際によりコードを簡略化するためのシンタックスシュガー(複雑な構文をより読み書きしやすいように用意されたもの)です

Vueのver3.2以降に導入されたもののようです

そもそも、SFCの基本をここから学ぼうと思っていたので、ちょっと1段飛ばしになっているんですよね

ということで、今回はComponentの書き方がVueのバージョンによってどのように変わってきたかということを確認したいとおもいます

3つの書き方

コンポーネントのサンプルです

ちなみに3.0と3.2はCompositionAPIを使用してComponentを作成しています

Vue2までの書き方はOptions APIというものになります

以下のサンプルはその3つの書き方で書いた1つのComponentです

ちょっと順番が分かりにくい感じになっていますが、

上から

3.0(script setupを使用)

3.2

OptionsAPI(以前の書き方)

です。

まずOptionsAPIから3.0のCompositionAPIについては見た目にもかなりすっきりしていることが分かると思います

OptionsAPIではバラバラで書いていたものが、CompositionAPIではsetup()関数にまとめて書かれていることが分かると思います

ただし、3.0でもPropsについては別で記入しています

そして、templateで利用するものはreturnで返しています

script setupの場合はどうでしょうか

見た目にもはっきりとコードが短くなっていることが分かると思います

いわゆる必ずこう書きますという部分がそぎ落とされています

export default {}もsetup()もなくなっています

propsは

const props = defineProps({プロパティ})

という書き方になっています

関数の使い方やcomputedの使い方は変わっていないようです

templateで利用する値もreturnで書き出す必要はなく、こちらも大きく異なる点です

その他にも随分簡略化されています

使うのはどちらでもよい

script setupを使ったほうが簡略化されるというのはわかりました

ただし、ドキュメントは英語でしか書かれていないため、少し抵抗があるという人もいるかもしれません

普通のCompositionAPIの書き方でも内容は同じです

慣れてきてからより簡略化された書き方でコーディングするということでも大丈夫だと思います

まずはComponentに対する理解を深めることが重要だと思います

コメント

タイトルとURLをコピーしました