[{"data":1,"prerenderedAt":32},["ShallowReactive",2],{"post-nuxt-tutorial-vue-js-nuxt-introduction":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"body":8,"categories":9,"author":11,"thumbnail":24,"ogpImage":28},"nuxt-tutorial-vue-js-nuxt-introduction","2024-11-15T01:27:55.804Z","2024-12-24T00:37:19.256Z","Vue.js\u002FNuxt入門～ブラウザで学べる日本語版Nuxt Tutorial","\u003Cp>この記事は、\u003Ca href=\"https:\u002F\u002Fqiita.com\u002Fadvent-calendar\u002F2024\u002Fvue\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Vue Advent Calendar 2024\u003C\u002Fa> の20日目の記事です。\u003C\u002Fp>\u003Ch2 id=\"hab500b26fc\">先行公開された日本語版Nuxt Tutorial\u003C\u002Fh2>\u003Cp>Nuxtは、Vue.jsを使用してフルスタックのWebアプリケーションやWebサイトを作成するための、オープンソースのフレームワークです。Nuxtには\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Flearn.nuxt.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Nuxt Tutorial\u003C\u002Fa>という現在開発中の公式チュートリアルがあります。今年開催されたVue Fes Japan 2024のハンズオン企画では、このチュートリアルの開発者である\u003Ca href=\"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fantfu.me\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Anthony Fu\u003C\u002Fa>さんとのコラボレーションにより、\u003Cstrong>日本語版\u003C\u002Fstrong>が教材として使用されました。この日本語版は一般向けにも先行公開されています。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Flearn-dev.nuxt.com\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Flearn-nuxt.vuejs-jp.org%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>チュートリアルの内容は、Vue.jsの基礎からNuxtの主要なコンセプトまでを体系的に学習できるものとなっています。また、ブラウザ上でコードの編集、実行、プレビューの確認ができるようになっており、\u003Cstrong>開発環境の構築が不要\u003C\u002Fstrong>となるため、Nuxtを使った開発を手軽に体験できます。Vue.jsやNuxtをこれから始める方や、学び直したい方にとっても、貴重な教材です。\u003C\u002Fp>\u003Cp>筆者は、残念ながらVue Fes Japan 2024のハンズオン企画には参加できなかったため、本記事では、チュートリアルを個人でやってみて感じた特徴を中心にまとめています。\u003C\u002Fp>\u003Ch2 id=\"hbdc2145245\">Nuxt Tutorialのインターフェース\u003C\u002Fh2>\u003Cp>早速ブラウザを開いて、チュートリアルの中身を覗いてみます。インターフェースは主に以下のようなエリアに分かれています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F27a02d1f726c42f1a26d0054a9091852\u002Fnuxt-tutorial-1.png\" alt=\"\" width=\"1280\" height=\"741\">\u003C\u002Ffigure>\u003Cp>①ヘッダーエリア\u003Cbr>②ガイドエリア\u003Cbr>③エディターエリア\u003Cbr>④プレビューエリア\u003C\u002Fp>\u003Ch3 id=\"h0d41065963\">①ヘッダーエリア\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fa30ac351bfe5498796ff39557a8dcd00\u002Fnuxt-tutorial-2.png\" alt=\"\" width=\"1280\" height=\"120\">\u003C\u002Ffigure>\u003Cp>ヘッダーにはNuxt Tutorialのロゴと、各種コントロールボタンが配置されています。検索ダイアログからは、チュートリアル内の機能やガイドなどを検索して、素早く実行することが可能です。また、ダークモード・ライトモードの切り替え、GitHubへのリンクなども含まれています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F094c8c0799554fd18fb1256650fa6477\u002Fnuxt-tutorial-3.png\" alt=\"\" width=\"1280\" height=\"780\">\u003Cfigcaption>検索ダイアログから目的のガイドに素早く移動\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F9cdebc5e6ba54b4c9f08a7d83231a3d5\u002Fnuxt-tutorial-4.png\" alt=\"\" width=\"1280\" height=\"740\">\u003Cfigcaption>トグルボタンでライトモードに切り替え\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>ターミナルの表示・非表示の切り替えもこちらから行えるようになっており、表示にするとプレビューエリアの下にターミナルエリアが現れます。ここから、ターミナルの再起動なども行えるようになっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Faa1dcdcae3214e9c8ce8b2d508f944a3\u002Fnuxt-tutorial-5.png\" alt=\"\" width=\"1280\" height=\"1030\">\u003Cfigcaption>トグルボタンでターミナルエリアを表示\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"h843556c1d5\">②ガイドエリア\u003C\u002Fh3>\u003Cp>各チャプターごとの解説が記載されているエリアです。適宜公式ドキュメントへのリンクも設置されており、詳細を確認したい場合の導線となっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fbd1832d7cc8c4f25b9c071c7ec46e2a8\u002Fnuxt-tutorial-6.png\" alt=\"\" width=\"1280\" height=\"580\">\u003C\u002Ffigure>\u003Cp>ほとんどのチャプターには「\u003Cstrong>チャレンジ問題\u003C\u002Fstrong>」が用意されており、解答のためのヒントや解答例を表示するための「Show solutionボタン（①）」も設置されています。下部には前後ページへのページネーション（②）とページの編集をリクエストする際のGitHubへのリンク（③）も用意されています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F0b1bdae2f4194350a21edbef6cf374d8\u002Fnuxt-tutorial-8.png\" alt=\"\" width=\"1280\" height=\"872\">\u003C\u002Ffigure>\u003Cp>また、エリアの上部にはパンくずナビゲーションも設置されており、右端の開閉ボタンで目次を表示できます。前後のページネーションと合わせて、目的のガイドへの移動がスムーズに行えます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F45bb06344d3f4761a8e939615046f8dc\u002Fnuxt-tutorial-7.png\" alt=\"\" width=\"1280\" height=\"580\">\u003C\u002Ffigure>\u003Ch3 id=\"h614b2ba55c\">③エディターエリア\u003C\u002Fh3>\u003Cp>エディターエリアでは直接コードを編集でき、ここからチャレンジ問題にも挑戦できます。Monaco Editorによるシンタックスハイライトとコード補完も効くため、快適にコードを書けます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fd9d449c3e2be4fdda125772ed052ccbc\u002Fnuxt-tutorial-9.png\" alt=\"\" width=\"1280\" height=\"600\">\u003C\u002Ffigure>\u003Cp>複数ファイルの編集が必要な場合には、ファイルエリア（①）が表示され、編集対象のファイルを切り替えられます。また、右上の「Show solutionボタン（②）」をクリックすると解答例を確認できます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F77deff057167483c982442d797bf27ea\u002Fnuxt-tutorial-11.png\" alt=\"\" width=\"1280\" height=\"410\">\u003Cfigcaption>ファイル名をクリックして表示したいファイルに切り替え\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fd1f7254717ae499a9974e008797a55aa\u002Fnuxt-tutorial-10.png\" alt=\"\" width=\"1280\" height=\"500\">\u003Cfigcaption>「Show solution」と「Reset challenge」の表示切り替え\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"he480bf706c\">④プレビューエリア\u003C\u002Fh3>\u003Cp>プレビューエリアには、エディターエリアで書いたコードの結果が動的に表示されます。右上のインフォメーションボタンからは使用されているバージョン情報も確認できます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F916587067ec24148bacab7f926081e67\u002Fnuxt-tutorial-12.png\" alt=\"\" width=\"1280\" height=\"680\">\u003Cfigcaption>インフォメーションボタンからバージョン情報を確認\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 id=\"h66eb7aaa94\">基礎から学べる体系的な学習コンテンツ\u003C\u002Fh2>\u003Cp>コンテンツの内容は「\u003Cstrong>Vueの基本\u003C\u002Fstrong>」と「\u003Cstrong>Nuxtのコンセプト\u003C\u002Fstrong>」の2セクションに分かれています。Nuxtのチュートリアルですが、\u003Cstrong>Vue.jsの基礎から体系的に学べる\u003C\u002Fstrong>構成となっています。\u003C\u002Fp>\u003Cblockquote>\u003Cp>このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は Vue の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。\u003C\u002Fp>\u003Cp>引用：Nuxt Tutorial（日本語版）- Nuxt チュートリアルへようこそ！\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"hc53112768a\">Vueの基本\u003C\u002Fh3>\u003Cp>「Vueの基本」セクションでは、最初に単一ファイルコンポーネント（SFC）の概要から解説が始まります。また、Vue.jsでコンポーネントを作成する際は、\u003Cstrong>Options API\u003C\u002Fstrong>と\u003Cstrong>Composition API\u003C\u002Fstrong>の2つのAPIスタイルが利用できますが、本チュートリアルでは基本的にComposition APIが使用されています。\u003C\u002Fp>\u003Cp>「リアクティビティシステム」のチャプターでは、Composition APIで使用できる\u003Ccode>ref()\u003C\u002Fcode>や\u003Ccode>computed()\u003C\u002Fcode>、\u003Ccode>watch()\u003C\u002Fcode>といった関数について学習します。\u003C\u002Fp>\u003Cp>その他、Composition APIを活用して再利用可能な状態やロジックを定義する\u003Cstrong>コンポーザブル\u003C\u002Fstrong>の機能や、\u003Ccode>props\u003C\u002Fcode>、\u003Ccode>emit\u003C\u002Fcode>を使ったコンポーネント間のデータ受け渡しなどについても解説されています。\u003C\u002Fp>\u003Cp>Vue.jsを書き始めるために必要となる基本的な知識が、ステップバイステップで学べるようになっています。\u003C\u002Fp>\u003Ch3 id=\"hd134ccbd05\">Nuxtのコンセプト\u003C\u002Fh3>\u003Cp>「Nuxtのコンセプト」セクションでは、Nuxtのコアコンセプトを中心に学習します。ルーティングのチャプターでは、ファイルシステムルーターの仕組みや、\u003Ccode><NuxtLink>\u003C\u002Fcode>コンポーネントを使用したナビゲーションについて学ぶことができます。データフェッチに関しては\u003Ccode>useFetch\u003C\u002Fcode>の使い方を中心に、\u003Ccode>$fetch\u003C\u002Fcode>や\u003Ccode>useAsyncData\u003C\u002Fcode>との関係についても解説されています。その他にも\u003Ccode>useState()\u003C\u002Fcode>を使用した状態管理の手法や、ミドルウェアの機能などNuxtを使う上で知っておきたい機能を体系的に学ぶことができます。\u003C\u002Fp>\u003Cp>また、レンダリングモードのチャプターでは、\u003Cstrong>ユニバーサルレンダリング\u003C\u002Fstrong>や\u003Cstrong>クライアントサイドレンダリング\u003C\u002Fstrong>、\u003Cstrong>ハイブリッドレンダリング\u003C\u002Fstrong>といったNuxtがサポートするレンダリングモードについて、利点や欠点を交えて分かりやすく解説されており、これらの理解の整理にも役立ちます。\u003C\u002Fp>\u003Ch3 id=\"hd0837fb37d\">実際の問題にチャレンジ！\u003C\u002Fh3>\u003Cp>各チャプターで用意されているチャレンジ課題には、どのようなものがあるのか簡単に紹介します。例として「Vueの基本」セクションの「リアクティビティー パート1」のチャレンジをやってみます。\u003C\u002Fp>\u003Cp>課題の内容は以下のようになっています。\u003C\u002Fp>\u003Cblockquote>\u003Cp>現在 \u003Ccode>2\u003C\u002Fcode> 倍にハードコードされている乗数をリアクティブに更新可能にするコードに変更してみましょう。\u003C\u002Fp>\u003Cdiv data-filename=\"app.vue\">\u003Cpre>\u003Ccode class=\"language-html\"><script setup lang="ts">\nconst count = ref(1)\nconst doubled = computed(() => count.value * 2)\n\nfunction increment() {\n  count.value++\n}\n<\u002Fscript>\n\n<template>\n  <div>\n    <p>count is {{ count }}<\u002Fp>\n    <p>doubled is {{ doubled }}<\u002Fp>\n    <button type="button" @click="increment">\n      +1\n    <\u002Fbutton>\n  <\u002Fdiv>\n<\u002Ftemplate>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>そのためには:\u003C\u002Fp>\u003Cp>1. \u003Ccode>ref()\u003C\u002Fcode> を使って \u003Ccode>multiplier\u003C\u002Fcode> という名前の変数を作成し、\u003Ccode>2\u003C\u002Fcode> をセットします\u003C\u002Fp>\u003Cp>2. \u003Ccode><script>\u003C\u002Fcode> と \u003Ccode><template>\u003C\u002Fcode> の両方で、\u003Ccode>doubled\u003C\u002Fcode> を \u003Ccode>result\u003C\u002Fcode> にリネームします\u003C\u002Fp>\u003Cp>3.\u003Ccode> result\u003C\u002Fcode> の実装を \u003Ccode>count.value * multiplier.value\u003C\u002Fcode> を返すように変更します\u003C\u002Fp>\u003Cp>4.\u003Ccode> multiplier\u003C\u002Fcode> の値を増加させるための別のボタンを追加します\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>実装の指針が示されていることで、迷いが少なく進めることができるようになっています。実装結果は以下のようになりました。\u003C\u002Fp>\u003Cdiv data-filename=\"app.vue\">\u003Cpre>\u003Ccode class=\"language-html\"><script setup lang="ts">\nconst count = ref(1)\nconst multiplier = ref(2)\nconst result = computed(() => count.value * multiplier.value)\n\nfunction increment() {\n  count.value++\n}\n\nfunction multiply() {\n  multiplier.value++\n}\n<\u002Fscript>\n\n<template>\n  <div>\n    <p>count is {{ count }}<\u002Fp>\n    <p>result is {{ result }}<\u002Fp>\n    <button type="button" @click="increment">\n      +1\n    <\u002Fbutton>\n    <button type="button" @click="multiply">\n      x{{ multiplier }}\n    <\u002Fbutton>\n  <\u002Fdiv>\n<\u002Ftemplate>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>また、セクションによっては\u003Cstrong>ヒント\u003C\u002Fstrong>が示されているものがあったり、「Show solutionボタン」から解答例を確認することができるため、1人で学習を進めている場合でも安心です。\u003C\u002Fp>\u003Ch2 id=\"hfae469665d\">Nuxt Tutorialのこれから\u003C\u002Fh2>\u003Cp>以上、日本語版が先行公開されたNuxtチュートリアルの特徴と、簡単な実例について紹介しました。ステップバイステップでチュートリアルを進めていくと、\u003Cstrong>全てやり終えた後にはNuxtで開発を進める上での基礎的な理解が得られます\u003C\u002Fstrong>。さらに詳しく学びたい際には、適宜公式ドキュメントなどを参照すると良いでしょう。\u003C\u002Fp>\u003Cp>また、このチュートリアルは現在も開発が継続しており、\u003Cstrong>ケーススタディを用いた発展的なコンテンツも計画\u003C\u002Fstrong>されているようです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F2616a9904a324ea89a86ca239623e077\u002Fnuxt-tutorial-13.png\" alt=\"\" width=\"1280\" height=\"380\">\u003Cfigcaption>より実践的なコンテンツにComing Soonの文字が？\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>これらの開発に加え、既存コンテンツの保守や本家サイトへの\u003Cstrong>コントリビューションも歓迎\u003C\u002Fstrong>されています。気になる方は以下の記事も参考にしてみてください。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fnote.com\u002Fubugeeei\u002Fn\u002Fn2ac2b02043da\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fnote.com%2Fubugeeei%2Fn%2Fn2ac2b02043da&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>Vue.jsやNuxtを始めたい人はもちろん、さらに理解を深めたい方も、ぜひNuxtチュートリアルに挑戦してみてください。\u003C\u002Fp>\u003Ch2 id=\"h44e51f96ce\">参考資料\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Flearn-nuxt.vuejs-jp.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Nuxt Tutorial（日本語版）\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fnote.com\u002Fubugeeei\u002Fn\u002Fn2ac2b02043da\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">【Vue Fes Japan】 ハンズオン企画の裏テーマ！？ Nuxt Tutorial を選んだ理由と未来\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>",[10],"フロントエンド",[12],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":16,"name":17,"job":18,"avatar":19,"profile":22,"xId":23,"githubId":23},"koyama","2024-02-14T00:43:53.323Z","2024-03-20T13:41:39.499Z","2024-03-15T13:16:51.910Z","小山 樹人","フロントエンドエンジニア",{"url":20,"height":21,"width":21},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F74ad15c43b6042fe899472eb640b7db8\u002Fkoyama_202310.jpg",512,"静岡県出身。大学卒業後、桑沢デザイン研究所の夜間部でグラフィックデザインを学ぶ。専門誌や教育系の出版物を中心に、約10年間DTP制作の仕事に携わる。Webのフロントエンド開発の分野に興味を持ち、2023年に世路庵に入社。\nデザインと開発の両面からものづくりに携わっていきたい。","yamageji",{"url":25,"height":26,"width":27},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff76d3691a4d04380830b5534db8116b0\u002Fnuxt-tutorial-released-first-in-japan.png",720,1280,{"fieldId":29,"type":30},"ogpImage",[31],"タイプ1（タイトルのみ）",1776401660705]