Skip to content
This repository was archived by the owner on May 1, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions content/1.vue/1.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ ogImage: true

# Vueの基本

Nuxtは、ユーザーインターフェイスを構築するためのプログレッシブなフレームワークである[Vue 3](https://vuejs.org/)を使用しています。このセクションでは、Vueの基本について説明します
Nuxt は、[Vue 3](https://vuejs.org/)というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します

エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://vuejs.org/guide/scaling-up/sfc.html)(SFC)です。

SFCは、HTML、CSS、およびJavaScriptを一つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScriptロジックを定義するための[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)ブロック、HTMLテンプレートを定義するための`<template>`ブロック、およびCSSスタイルを定義するためのオプションの`<style>`ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://v3.vuejs.org/guide/single-file-component.html)で詳細を読むことができます。
SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://v3.vuejs.org/guide/single-file-component.html)で詳細を読むことができます。

Nuxtでは、Vue SFCをそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。NuxtがVueのデフォルトのVue SFCと異なる点の一つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref`、`computed`などのVue APIを直接インポートせずに使用することができます
Nuxt では、Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます

::note
**ヒント**: Vueコンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vueを初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的にVueを始められるでしょう
**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう
::

今後、以下のトピックについて説明します:
Expand Down
4 changes: 2 additions & 2 deletions content/1.vue/5.summary/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Vueの基本のまとめ

おめでとうございます!これでVueの基本を学び終わりました。さらにVueについて学びたい場合は、[公式のVueドキュメント](https://vuejs.org/)をご覧ください。より詳しいガイドやチュートリアルが用意されています。
おめでとうございます!これで Vue の基本を学び終わりました。さらに Vue について学びたい場合は、[公式のVueドキュメント](https://vuejs.org/)をご覧ください。より詳しいガイドやチュートリアルが用意されています。

次は、Nuxtがどのようにあなたの開発体験をさらに向上させるかを見ていきましょう
次は、Nuxt がどのようにあなたの開発体験をさらに向上させるかを見ていきましょう
2 changes: 1 addition & 1 deletion content/2.concepts/5.middleware/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ ogImage: true
Nuxt では、特定のルートにナビゲートする前にコードを実行する為のミドルウェアを提供しています。\
この機能は例えば、認証状態によってページへのアクセスを制限する場合などに便利です。

ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの2つの種類があります
ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの 2 つの種類があります
どちらも、`middleware` ディレクトリに実装します。

## グローバルミドルウェア
Expand Down
1 change: 0 additions & 1 deletion content/2.concepts/8.rendering-modes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
ogImage: true
---


# レンダリングモード

Nuxt は様々なレンダリングモードをサポートしています。\
Expand Down
Loading