Vue３の基礎を学習してきましたが、実際にアプリケーションを作成するとなると部品を一つのHTMLにまとめるというのはあまり効率の良い方法ではありません
大がかりなものになればなるほどどこに何が書かれているのかコンポーネントが複雑になります
また、個人開発ならそれでも何とかなるかもしれませんが、共同での開発となると一つのファイルを更新していくというのは現実的ではありません
コンポーネントごとでファイルを分けることで修正が必要になった時に触らなければならない箇所はわかりやすくなりますし、修正箇所も少なくなります
効率もよく、可読性も上がります
そこで実際にアプリケーションを作成するとなるとプロジェクト作成用のツールを使って作成することが多くなるのではないでしょうか
プロジェクト作成ツールがなぜ良いのか
Vueには主に２つのプロジェクト作成ツールが存在します
それが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の基本をここから学ぼうと思っていたので、ちょっと１段飛ばしになっているんですよね
ということで、今回はComponentの書き方がVueのバージョンによってどのように変わってきたかということを確認したいとおもいます
３つの書き方
コンポーネントのサンプルです
ちなみに３．０と３．２はCompositionAPIを使用してComponentを作成しています
Vue2までの書き方はOptions APIというものになります
以下のサンプルはその3つの書き方で書いた１つの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に対する理解を深めることが重要だと思います
コメント