[{"data":1,"prerenderedAt":527},["ShallowReactive",2],{"content-\u002Fcontents\u002Fvue3nuxt3":3,"surroundPost-\u002Fcontents\u002Fvue3nuxt3":518},{"id":4,"title":5,"body":6,"createdAt":505,"description":5,"draft":506,"extension":507,"meta":508,"navigation":127,"path":509,"seo":510,"stem":511,"tags":512,"thumbnail":516,"updatedAt":505,"__hash__":517},"contents\u002Fcontents\u002Fvue3nuxt3.md","vue3とnuxt3をvue2初心者が触ってみた",{"type":7,"value":8,"toc":500},"minimark",[9,13,16,19,22,27,30,33,234,237,240,374,385,389,400,442,445,454,461,465,468,473,476,487,496],[10,11,12],"p",{},"Vue.js のバージョン 3 が出たので久々に触ってみました。",[10,14,15],{},"以前よりかなり使いやすくなっていてびっくりです。",[10,17,18],{},"今回はそんな Vue.js とそのフレーウワークである Nuxt について初心者目線で基本事項をまとめてみました。",[10,20,21],{},"一応、vue2 を触ったことがある前提の記事になります。",[23,24,26],"h2",{"id":25},"composition-api-と-options-api-とは","Composition API と Options API とは",[10,28,29],{},"Composition API とは Vue3 で推奨になった記法です。\nOptions API は単純にこれまでの Vue で使われていた記法です。",[10,31,32],{},"Options API の例は以下になります。",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-vue shiki shiki-themes github-dark","\u003Cscript>\nexport default {\n  \u002F\u002F data() で返すプロパティはリアクティブな状態になる\n  data() {\n    return {\n      hoge: '',\n    }\n  },\n\n  methods: {\n    fuga() {\n      this.hoge = 'hoge'\n    },\n  },\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"fuga\">Text is: {{ hoge }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue","",[41,42,43,59,72,79,89,97,110,116,122,129,135,143,159,165,170,176,186,191,201,225],"code",{"__ignoreMap":39},[44,45,48,52,56],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"s95oV","\u003C",[44,53,55],{"class":54},"s4JwU","script",[44,57,58],{"class":50},">\n",[44,60,62,66,69],{"class":46,"line":61},2,[44,63,65],{"class":64},"snl16","export",[44,67,68],{"class":64}," default",[44,70,71],{"class":50}," {\n",[44,73,75],{"class":46,"line":74},3,[44,76,78],{"class":77},"sAwPA","  \u002F\u002F data() で返すプロパティはリアクティブな状態になる\n",[44,80,82,86],{"class":46,"line":81},4,[44,83,85],{"class":84},"svObZ","  data",[44,87,88],{"class":50},"() {\n",[44,90,92,95],{"class":46,"line":91},5,[44,93,94],{"class":64},"    return",[44,96,71],{"class":50},[44,98,100,103,107],{"class":46,"line":99},6,[44,101,102],{"class":50},"      hoge: ",[44,104,106],{"class":105},"sU2Wk","''",[44,108,109],{"class":50},",\n",[44,111,113],{"class":46,"line":112},7,[44,114,115],{"class":50},"    }\n",[44,117,119],{"class":46,"line":118},8,[44,120,121],{"class":50},"  },\n",[44,123,125],{"class":46,"line":124},9,[44,126,128],{"emptyLinePlaceholder":127},true,"\n",[44,130,132],{"class":46,"line":131},10,[44,133,134],{"class":50},"  methods: {\n",[44,136,138,141],{"class":46,"line":137},11,[44,139,140],{"class":84},"    fuga",[44,142,88],{"class":50},[44,144,146,150,153,156],{"class":46,"line":145},12,[44,147,149],{"class":148},"sDLfK","      this",[44,151,152],{"class":50},".hoge ",[44,154,155],{"class":64},"=",[44,157,158],{"class":105}," 'hoge'\n",[44,160,162],{"class":46,"line":161},13,[44,163,164],{"class":50},"    },\n",[44,166,168],{"class":46,"line":167},14,[44,169,121],{"class":50},[44,171,173],{"class":46,"line":172},15,[44,174,175],{"class":50},"}\n",[44,177,179,182,184],{"class":46,"line":178},16,[44,180,181],{"class":50},"\u003C\u002F",[44,183,55],{"class":54},[44,185,58],{"class":50},[44,187,189],{"class":46,"line":188},17,[44,190,128],{"emptyLinePlaceholder":127},[44,192,194,196,199],{"class":46,"line":193},18,[44,195,51],{"class":50},[44,197,198],{"class":54},"template",[44,200,58],{"class":50},[44,202,204,207,210,213,215,218,221,223],{"class":46,"line":203},19,[44,205,206],{"class":50},"  \u003C",[44,208,209],{"class":54},"button",[44,211,212],{"class":84}," @click",[44,214,155],{"class":50},[44,216,217],{"class":105},"\"fuga\"",[44,219,220],{"class":50},">Text is: {{ hoge }}\u003C\u002F",[44,222,209],{"class":54},[44,224,58],{"class":50},[44,226,228,230,232],{"class":46,"line":227},20,[44,229,181],{"class":50},[44,231,198],{"class":54},[44,233,58],{"class":50},[10,235,236],{},"上記の書き方は初心者からするとわりと直感的で使いやすかったです。\nただ、業務で使用するとコードがどんどん肥大化して可読性を下げる傾向がありました。",[10,238,239],{},"新しい Composition API を使うと以下のように書けます。",[34,241,243],{"className":36,"code":242,"language":38,"meta":39,"style":39},"\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\n\n\u002F\u002F リアクティブな状態\nconst hoge = ref('')\n\nfunction fuga() {\n  hoge.value = 'hoge'\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"fuga\">Text is: {{ hoge }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[41,244,245,256,270,274,279,301,305,315,324,328,336,340,348,366],{"__ignoreMap":39},[44,246,247,249,251,254],{"class":46,"line":47},[44,248,51],{"class":50},[44,250,55],{"class":54},[44,252,253],{"class":84}," setup",[44,255,58],{"class":50},[44,257,258,261,264,267],{"class":46,"line":61},[44,259,260],{"class":64},"import",[44,262,263],{"class":50}," { ref, onMounted } ",[44,265,266],{"class":64},"from",[44,268,269],{"class":105}," 'vue'\n",[44,271,272],{"class":46,"line":74},[44,273,128],{"emptyLinePlaceholder":127},[44,275,276],{"class":46,"line":81},[44,277,278],{"class":77},"\u002F\u002F リアクティブな状態\n",[44,280,281,284,287,290,293,296,298],{"class":46,"line":91},[44,282,283],{"class":64},"const",[44,285,286],{"class":148}," hoge",[44,288,289],{"class":64}," =",[44,291,292],{"class":84}," ref",[44,294,295],{"class":50},"(",[44,297,106],{"class":105},[44,299,300],{"class":50},")\n",[44,302,303],{"class":46,"line":99},[44,304,128],{"emptyLinePlaceholder":127},[44,306,307,310,313],{"class":46,"line":112},[44,308,309],{"class":64},"function",[44,311,312],{"class":84}," fuga",[44,314,88],{"class":50},[44,316,317,320,322],{"class":46,"line":118},[44,318,319],{"class":50},"  hoge.value ",[44,321,155],{"class":64},[44,323,158],{"class":105},[44,325,326],{"class":46,"line":124},[44,327,175],{"class":50},[44,329,330,332,334],{"class":46,"line":131},[44,331,181],{"class":50},[44,333,55],{"class":54},[44,335,58],{"class":50},[44,337,338],{"class":46,"line":137},[44,339,128],{"emptyLinePlaceholder":127},[44,341,342,344,346],{"class":46,"line":145},[44,343,51],{"class":50},[44,345,198],{"class":54},[44,347,58],{"class":50},[44,349,350,352,354,356,358,360,362,364],{"class":46,"line":161},[44,351,206],{"class":50},[44,353,209],{"class":54},[44,355,212],{"class":84},[44,357,155],{"class":50},[44,359,217],{"class":105},[44,361,220],{"class":50},[44,363,209],{"class":54},[44,365,58],{"class":50},[44,367,368,370,372],{"class":46,"line":167},[44,369,181],{"class":50},[44,371,198],{"class":54},[44,373,58],{"class":50},[10,375,376,377,380,381,384],{},"コード量は多少減りましたね。Composition API の方ではリアクティブにしたい変数は",[41,378,379],{},"ref","で明示的にする必要があります（",[41,382,383],{},"reactive","という手もある）。\nComposition API の恩恵はここでは紹介しきれないくらい探すとあるのですが、いったんこういうものだと思ってください。",[23,386,388],{"id":387},"nuxt3-を使ってみる","Nuxt3 を使ってみる",[10,390,391,392,399],{},"始め方は以下の通り。詳しくは",[393,394,398],"a",{"href":395,"rel":396},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Finstallation",[397],"nofollow","公式サイト","に記載されています。",[34,401,405],{"className":402,"code":403,"language":404,"meta":39,"style":39},"language-bash shiki shiki-themes github-dark","npx nuxi init \u003Cプロジェクト名>\ncd \u003Cプロジェクト名>\n","bash",[41,406,407,429],{"__ignoreMap":39},[44,408,409,412,415,418,421,424,427],{"class":46,"line":47},[44,410,411],{"class":84},"npx",[44,413,414],{"class":105}," nuxi",[44,416,417],{"class":105}," init",[44,419,420],{"class":64}," \u003C",[44,422,423],{"class":105},"プロジェクト",[44,425,426],{"class":50},"名",[44,428,58],{"class":64},[44,430,431,434,436,438,440],{"class":46,"line":61},[44,432,433],{"class":148},"cd",[44,435,420],{"class":64},[44,437,423],{"class":105},[44,439,426],{"class":50},[44,441,58],{"class":64},[10,443,444],{},"これでプロジェクトができたのでまずは基本的な依存関係のインストールを行います。",[34,446,448],{"className":402,"code":447,"language":404,"meta":39,"style":39},"yarn\n",[41,449,450],{"__ignoreMap":39},[44,451,452],{"class":46,"line":47},[44,453,447],{"class":84},[10,455,456,457,460],{},"これで準備ができました。",[41,458,459],{},"yarn dev"," コマンドを実行するとブラウザから nuxt が動いていることが確認できます。",[23,462,464],{"id":463},"nuxt3-の簡単な特徴紹介","Nuxt3 の簡単な特徴紹介",[10,466,467],{},"Nuxt3 のプロジェクトのディレクトリ 構造は初期状態で以下のようになっています。",[469,470],"img",{"alt":471,"img-src":472},"ディレクトリ構造","\u002Fimg\u002Fvue3\u002Fnuxt-pj.png",[10,474,475],{},"ここから必要に応じてディレクトリを追加していくのですが、Nuxt 側で用途に応じたディレクトリ名があらかじめ定義されているのでそれに従ってディレクトリは作る必要があります。",[10,477,478,479,482,483,486],{},"例えば、",[41,480,481],{},"pages","ディレクトリ や",[41,484,485],{},"components","ディレクトリ などです。",[10,488,489,490,492,493,495],{},"定義済みの名前に従って Auto-import が実行されたりするので用途に応じて使い分けが必要です。とはいえここの使い分けはこれまでの Nuxt と変わってないです。\nちなみに先ほどの",[41,491,379],{},"や",[41,494,485],{},"配下のモジュールは自動でインポートされるので、コード内で import 文を書かずとも使えます。",[497,498,499],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":39,"searchDepth":61,"depth":61,"links":501},[502,503,504],{"id":25,"depth":61,"text":26},{"id":387,"depth":61,"text":388},{"id":463,"depth":61,"text":464},"2023-02-19",false,"md",{},"\u002Fcontents\u002Fvue3nuxt3",{"title":5,"description":5},"contents\u002Fvue3nuxt3",[513,514,515],"2023","Nuxt","Vue","\u002Fimg\u002Ftwitter-card.png","tYNfINME6rgYR5K3s7IT1siKAxo5eGNUwgvg9VJ5AGY",[519,523],{"title":520,"path":521,"stem":522,"children":-1},"Vue3の基本を再確認: コンポーネント間のやり取り、引数名、よくある疑問など","\u002Fcontents\u002Fvue3","contents\u002Fvue3",{"title":524,"path":525,"stem":526,"children":-1},"【VueとNuxt】環境構築とcomponents, layoutsの使い方紹介","\u002Fcontents\u002Fvue_begin","contents\u002Fvue_begin",1783353019787]