Vue.jsの脱初心者を目指そう‼︎(公式ドキュメントを使った練習と実際のアプリ開発)

# 概要
この記事はこれからVue.jsを始める方向けの記事です。
Vue.jsのガイドを参考資料を参考に学習したことを書いている記事です。

https://zenn.dev/comm_vue_nuxt/articles/start-to-learn-vue-2024#%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%AE%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%AC%E3%83%99%E3%83%AB-1

# はじめに
以下の3点を知っておく必要がありそうです。

⚫︎ Vue.js
***JavaScriptのフレームワーク***です。

⚫︎***プログレッシブフレームワーク***
Vue.jsは、LEGOブロックを使って何かを作るようなものだと考えてみましょう。
すべてを最初から作る必要はなく、すでに作られた大きなLEGOのブロックがあり、
それらをつなぎ合わせてものを作ることができます。Vue.jsは、ウェブサイトやウェブアプリケーションを構築するためのその大きなLEGOのようなものです。
Vue.jsを使えば、シンプルなウェブページから始めて、
段階的に機能を追加することができ、より多くを学ぶと、Vue.jsの機能を使って
ウェブページをさらにカッコよくできます。

⚫︎***単一ファイルコンポーネント***
学校のイベントのポスターを作っているとします。1枚の大きな紙にすべてを書く代わりに、タイトル、日付、活動など、ポスターの異なる部分に異なる小さな紙を使うことができます。

ウェブ開発では、ウェブページはポスターのようであり、1つの部品はその小さな紙のようなものです。Vue.jsの「単一ファイルコンポーネント」は、ウェブページの一部（ボタンやナビゲーションバーなど）に必要なすべてのものが1か所にまとめられている状態です。それはすべての関連する情報が1つのファイルに集約されているため、管理や理解がしやすくなります。ポスターのタイトルに関するすべての情報が1枚の紙にまとめられているのと同じようにです。

つまり、Vue.jsはプリメイドのパーツ（大きなLEGOブロック）を使ってウェブページを構築することを容易にし、"単一ファイルコンポーネント"はウェブページを整理することを容易にし、すべてが整然と1か所にまとまっています。

説明はChatGPTを参照

### 2つのAPI
Options APIとComposition API があります。優先順位は、Composition APIです。

- ***Options API***
Vue.jsで使われる古い方法で、Vue.jsで***コンポーネントを作るときに使われるルールや規則のセット***です。このAPIでは、データ、メソッド、ライフサイクルフック（特定の時点で自動的に呼び出される関数）などのオプションを使ってコンポーネントを定義します。


- ***Composition API***
Vue.jsの新しい方法で、コードをより構造化し、再利用可能な部品を作成するための方法です。ロジックを論理的にグループ化し、機能ごとに異なる部分に分割することができます。これにより、コードがより読みやすくなり、大規模なアプリケーションの開発が容易になります。


# Vue.jsのアプリケーション作成
Node.jsの最新バージョンがインストールされていること前提です。

```
npm create vue@latest
 git % npm create vue@latest
Need to install the following packages:
  create-vue@3.10.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-guide
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /Users/hashimotonoriaki/git/vue-guide...

Done. Now run:

  cd vue-guide
  npm install
  npm run dev
```



⚫︎補足
Noにしているのは、今回がたまたまNoにしているだけです。公式ガイドでも目を通しておいてください。GitHubとも連携して自分のコードを書いておくといいです。実務でコピペで使えたりします。

***アプリケーションのインスタンス、ルートコンポーネント、アプリのマウント、DOM内のルートコンポーネントテンプレート***
などは目を通しておいてください。

この記事に実際に動かしたコードを貼った記事があります。

https://qiita.com/Hashimoto-Noriaki/items/ea60d5932f13a9cd5707


- ***ガイド***
はじめにとアプリケーション作成を読んでください。

https://ja.vuejs.org/guide/quick-start.html

https://ja.vuejs.org/guide/essentials/application.html

# まずはどこまで読むか
アプリケーションの作成を初め、***テンプレート構文からコンポーネントの基礎まで読むといいみたい***です。

その後に以下の箇所を読むといいみたいです。

- ***コンポーネントの登録***

https://ja.vuejs.org/guide/components/registration

- ***再利用性***

https://ja.vuejs.org/guide/reusability/composables

- ***スケールアップ***

https://ja.vuejs.org/guide/scaling-up/sfc

# 公式ドキュメントで実装(ここからが本番)
正直インプットだけでは身につけるのは無理ゲーなので、参考記事がどこをやればいいか教えてくれています。
公式ドキュメントの「実装例」で練習していきましょう。

まず左のソースコードは見ずに右画面と同じ動作をするものが実装できるかやっていきます。

ここにメニューが載っています。

https://zenn.dev/comm_vue_nuxt/articles/start-to-learn-vue-2024#%E3%80%90%EF%BC%93%E3%80%91-%E5%AE%9F%E8%A3%85%E4%BE%8B-(%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88)





# アウトプットで何かを作る
認証機能付きのTodoリストを作りましょう。CRUDと認証機能で最低限作れるようにしておくのが大切です。


https://read-engineer.com/2023/09/15/saiteigen/

この辺も参考にしてみてください。

https://qiita.com/TakahiRoyte/items/a9aac2f069b99f3378c7

# 有益資料
この記事も有益そうだったので、載せておきます。

https://qiita.com/moyegogo1020/items/7cf9daaacc6bac1b3c33

# 参考資料

https://zenn.dev/comm_vue_nuxt/articles/start-to-learn-vue-2024#%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%AE%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%AC%E3%83%99%E3%83%AB-1

https://ja.vuejs.org/guide/introduction.html