Open10

『Nuxt3 フロントエンド開発の教科書』メモ

yukiko_bassyukiko_bass

2章 <導入編> Nuxtアプリケーションの基本

2-1. SFCへの記述の基本

  • Nuxtは オートインポート
    vue で記述していた以下の記述は必要なくなった
import {ref, computed} from "vue";
  • デバッグ用ライフサイクルフックの使い方
onRenderTracked(
  (event: DebuggerEvent): void => {
    // 行いたい処理
  }
);
  • マスタッシュ構文の非表示に役立つ v-cloak
    マスタッシュ構文がレンダリングされる前に一瞬そのまま表示されなないように、該当箇所を一時的に非表示にするディレクティブ。
    変数helloがpタグ内に表示されるまで、v-cloak属性が付与されたままで、helloの値が表示されると同時にv-cloak属性が削除される。
    この仕組みを利用して、スタイルブロックに属性セレクタとしてv-cloakを用意して、display:noneを設定しておくと、画面にちらっと表示されなくなるようになるらしい。
<template>
  <p v-cloak>{{ hello }}</p>
</template>
<style>
[v-cloak]{
  display: none;
}</style>
yukiko_bassyukiko_bass

2-2. コンポーネント間連携

  • Nuxtはコンポーネントもオートインポート
import OneSection from "@/components.OneSection.vue";

  • Nuxtの公式ドキュメントはサブフォルダ内のコンポーネントファイル名にはサブフォルダ名も含めることを推奨している
    以下のようなファイルの配置した場合に、<PartsTheSupplement>タグを記述すると、①->②->③の順で読み込まれる。
    ①components/PartsTheSupplement.vue
    ②components/parts/PartsTheSupplement.vue
    ③components/parts/TheSupplement.vue
    ④components/wow/PartsTheSupplement.vue

  • 値の受け渡しはProps
    データを受け取る側（子コンポーネント）でPropsを利用する準備が必要

  1. 個々のPropをメンバーとするインターフェースを定義する
    • 子コンポーネント側の受け取るインターフェース名は特に理由がなければ『Props』とする。親側で定義したインターフェースと同じプロパティを定義する。
  2. defineProps() 関数で実行。
    • 戻り値で渡ってきた値を参照できる。ただし、値はreadonlyなので、子側で変更したい場合は、別の変数を用意する必要がある。
  • 親コンポーネントからPropsに値を渡す場合、v-bindを使って渡す。
<子コンポーネント名
  v-bind:Prop名="テンプレート変数名"
/>
  • 子コンポーネントから親コンポーネントのデータは操作できない
    • そこで、親コンポーネントにデータを操作してメソッドを定義しておき、子コンポーネントからそのメソッドを実行するようにお願いする仕組みを Emit と言う
      • 親コンポーネント側でやること
        1. 処理メソッドの用意
        2. v-on ディレクティブの記述
      • 子コンポーネント側でやること
        1. Emit定義
        2. Emitの実行
    • Emit 定義
    type Emits = {
  イベント名: [引数: データ型, ・・・]
};
// 変数名はemitとするのが慣例
const emit = defineEmits<Emits>();
・・・
// 上で定義したdefineEmits<Emits>(); の戻り値を格納した変数
emit('実行したい親のイベント名', 変数, ・・・)
    • この記述方法は、Vue.js 3.3 より、Emits型定義（ラベル付きタプルを利用した定義）ができるようになった
yukiko_bassyukiko_bass

2-3. ステートの利用

  • Props+Emit は単純な親子構造ならよいが、コンポーネント数が増えて、複雑になってくると破綻する。

  • コンポーネントをまたいでのデータ管理のことをステート管理と呼ぶ。

  • Vue3 からPiniaが導入されたが、Nuxtにも独自のステート管理がある

    • ただし、Nuxtの独自ステートは簡易的なものなので、実運用の場合はpiniaのほうが良いらしい
      • npm install pinia @pinia/nuxt でインストールし、Nuxtに認識させるために、nuxt.config.ts に以下を追加する
        export default defineNuxtConfig({
  ///
  modules: [
    "@pinia/nuxt"
  ]
});

  • ステートの用意も利用も（setもgetも）useState() を使用する。

    • ステートの用意
      useState<ステートのデータ型>(
  ステート名,
  (): ステートのデータ型 => {
    ステートの初期値の生成処理
    return ステートの初期値;
  }
  );
    • ステートの取得
      const ステートを格納する変数 = useState<ステートのデータ型>(ステート名);

  • 取得したステートデータへの実際のアクセスはvalueプロパティを使う

    • useState で取得したステートデータはリアクティブなデータなので、ref関数で用意された変数と同等の扱いをしなければならない

  • データ更新も直接ステートを更新

  • インターフェースのインポートは import type でインポートする

    • インポート対象ファイルのパス記述の @ は、プロジェクトフォルダそのものを指す。
yukiko_bassyukiko_bass

3章 <基本編> Nuxt でのルーティング

3-1. Nuxt ルーティングの基本

  • Nuxt のルーティングはVue Router を使いやすくしたもの
  • <RouterView> ではなく <NuxtPage>
  • <NuxtPage> タグは <template> タグ直下に記述しなければならない
  • Vueは views フォルダにコンポーネントを格納し、それらのファイルをルーティング設定時にインポートしていた（インポートするので、viewsじゃなくてもできた）
  • Nuxtの場合は、すべて必ず pages フォルダに入れる
    • 格納するファイルパス構造がそのままルーティングパスとなる -> ファイルシステムルータ という
    • ルートは必ず index.vue とすること
  • リンク生成は <NuxtLink> タグ
    • v-bind:to="name: ～" でルーティング名を記述
    • ルーティング名はディレクトリの『/』 の代わりに『-(ハイフン)』を使った形式で指定する
yukiko_bassyukiko_bass

3.2 ルートパラメータとルーティング制御

  • ルートパラメータとは
    • URL内の指定された値を取得するために使用されるURLセグメント
      • URLセグメントは、URLパスの一部
      • よくあるのはパス部にあるidとか
  • Nuxtではルーティングパラメータもファイルシステムも使うが、単にid.vue としてもルートパラメータとは認識しない。[] で囲む必要がある
    • pages/…/[ルートパラメータ名].vue
    • ルーティング名の場合は[]を取り除いた名前になる
    • 値を渡すのは params プロパティ
  • useRoute()関数でルートオブジェクト(RouteLocationNormalized 型)を取得
    • ルートパラメータは文字列型なので、ルートパラメータが数値の場合はNumberに変換して使用する
  • 特定の画面に遷移させるにはpush。ほかに、replace, back, forward, go がある
  • ルートオブジェクトをテンプレートブロックで使用する場合は、useRoute() 関数は不要で、テンプレートブロックで直接 $route として記述すれば使用できる
  • ルートパラメータのバリエーション
    • /pages/~~/[name]/[points].vue
      • 途中のフォルダ名もルートパラメータに含めることができる
      • {"name": "tanaka", "points": 123} のように取得できる
      • リンクは [name]-san のように記述もできる。ただし、連結できる文字列はハイフンのみ
    • /pages/~~/[name]/[[points]].vue
      • [[points]] の部分はpotion扱いになるので、あってもなくても動作する
    • /pages/~~/call/[...id].vue
      • 可変長パラメータとして動作する（ドットは3つ）
      • 0..* で動作する
yukiko_bassyukiko_bass

3.3 ネストされたルーティング

  • 画面の一部をルーティングによって変化させることができる。
    • Header/Footerとかで使うあれかな
    • ネストさせるvueと同じ名前のフォルダを同階層に作成して、その中にネスト表示させる画面のvueを作っていく
yukiko_bassyukiko_bass

3.4 レイアウト機能

  • Nuxt には レイアウト機能がある
    • layouts フォルダを用意して、その中に個々に適用するコンポーネントを置く
    • デフォルトで適用させるテンプレートは default.vue
    • レイアウトテンプレートで、各画面用コンポーネントをレンダリングさせる部分は <NuxtPage> ではなく <slot>タグを使用する
    • レイアウトを適用させる側は <NextLayout> で囲む
yukiko_bassyukiko_bass

4章 <基本編> Nuxt のデータ取得処理

4-1. Nuxt のデータ取得の基本

yukiko_bassyukiko_bass

その他

環境変数から値を読み取る

https://qiita.com/A-Kira/items/ce784fede3faa8b62150

本当はクライアントサイドにapiKeyを書いちゃいけない気もするけど。

  1. .env ファイルをプロジェクト直下に用意する
.env
NUXT_API_KEY=********
  1. nuxt.config.ts に定義する。
    クライアントサイドで読み込ませたい場合は public で。
nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiKey: ''
    }
  }
})
  1. useRuntimeConfig を使って呼び出す
<script setup lang="ts">
  const runtimeConfig = useRuntimeConfig();
  console.log(runtimeConfig.public.apiKey);
</script>