[{"data":1,"prerenderedAt":342},["ShallowReactive",2],{"\u002Fblog\u002Fprogramming\u002Fvue-playground":3,"relation-articles\u002Fblog\u002Fprogramming\u002Fvue-playgroundシステム開発":244,"recommented-articles\u002Fblog\u002Fprogramming\u002Fvue-playgroundシステム開発":297},{"id":4,"title":5,"body":6,"category":229,"createdAt":230,"description":231,"extension":232,"isRecommend":233,"meta":234,"navigation":235,"path":236,"seo":237,"stem":238,"subCategory":239,"tags":240,"thumbnail":241,"updatedAt":242,"__hash__":243},"blog\u002Fblog\u002Fprogramming\u002Fvue-playground.md","手軽に使えるVueプレイグラウンド環境。Vue SFC Playground解説",{"type":7,"value":8,"toc":211},"minimark",[9,18,23,32,38,42,45,49,60,64,68,71,74,78,93,96,99,102,105,109,112,116,122,128,131,134,137,140,153,156,160,163,166,184,187,190,196,202,205,208],[10,11,12,13,17],"p",{},"この記事では、Vue公式のプレイグラウンド環境である",[14,15,16],"strong",{},"Vue SFC Playground","の機能や使い方・メリットについて説明します。",[19,20,22],"h2",{"id":21},"vue-sfc-playgroundとは","Vue SFC Playgroundとは",[10,24,25,27,28,31],{},[14,26,16],{},"はVueのプレイグラウンド環境です。",[29,30],"br",{},"\nブラウザ上にVueの環境が用意されており、インストール不要でVueのコードを試すことができます。",[10,33,34,35,37],{},"ライブラリの挙動を確認したい場合、通常であれば「環境構築→パッケージインストール→開発サーバ起動」という作業する必要があり面倒です。",[29,36],{},"\nVue SFC Playgroundであれば、ブラウザでURLを叩くだけですぐに使いはじめることができます。",[19,39,41],{"id":40},"vue-sfc-playgroundの使い方","Vue SFC Playgroundの使い方",[10,43,44],{},"Vue SFC Playgroundを使う際は以下のURLを開くだけでOKです。",[46,47],"link-card",{"url":48},"https:\u002F\u002Fplay.vuejs.org",[10,50,51,52,59],{},"また、",[53,54,58],"a",{"href":55,"rel":56},"https:\u002F\u002Fvuejs.org\u002F",[57],"nofollow","Vue公式ページ"," のPlaygroundをクリックしても開くことができます。",[61,62],"img",{"alt":58,"src":63},"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vue-playground_vue-playground.webp",[19,65,67],{"id":66},"vue-sfc-playgroundの機能","Vue SFC Playgroundの機能",[10,69,70],{},"Vue SFC Playgroundの画面にはエディタとプレビューが大きく表示されています。",[10,72,73],{},"上記以外にもいくつかの便利な機能を使うことができます。",[75,76,77],"h3",{"id":77},"バージョン切り替え",[10,79,80,81,85,86,89,90,92],{},"ヘッダーの",[82,83,84],"code",{},"TypeScript","、",[82,87,88],{},"Vue Version","の部分にはTypeScriptとVueのそれぞれのバージョンが表示されています。",[29,91],{},"\nこの部分をクリックするとそれぞれのバージョンを任意に切り替えることができます。",[10,94,95],{},"最新バージョンの機能をいち早く試したり、バージョンによる挙動の違いを比較したりする場合に非常に便利です。",[75,97,98],{"id":98},"ダウンロード",[10,100,101],{},"ヘッダー右上にあるダウンロードボタンをクリックすると、コードをダウンロードすることができます。",[10,103,104],{},"ダウンロードされたzipファイルを解凍すると以下のようなファイルが含まれています。",[61,106],{"alt":107,"src":108},"ダウンロードされるファイル","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vue-playground_download.webp",[10,110,111],{},"開発に必要なファイルが一通り揃った状態でダウンロードできるため、そのまま開発に使用することができます。",[75,113,115],{"id":114},"urlベースの共有","URLベースの共有",[10,117,118,119,121],{},"Vue SFC Playgroundで編集してもコードはサーバに保存されません。",[29,120],{},"\n代わりに、リアルタイムでエンコードされてURLが変化します。",[10,123,124,125,127],{},"コードを共有する場合はヘッダーのコピーボタンをクリックして、URLを共有するだけです。",[29,126],{},"\nプロジェクトの管理という概念が不要で、非常にわかりやすい仕様となっています。",[75,129,130],{"id":130},"エディタの機能",[10,132,133],{},"Vue SFC PlaygroundのエディタはMicrosoftが開発しているMonaco Editorが組み込まれています。",[46,135],{"url":136},"https:\u002F\u002Fmicrosoft.github.io\u002Fmonaco-editor\u002F",[10,138,139],{},"Monaco EditorはVSCodeを元に作成されており、以下のような機能があります。",[141,142,143,147,150],"ul",{},[144,145,146],"li",{},"コード補完",[144,148,149],{},"ブラウザエラーの直接表示",[144,151,152],{},"コードハイライト",[10,154,155],{},"上記の機能のおかげで、ブラウザ上でありながらもローカル環境でVSCodeを使用しているときに近い感覚でコーディングできます。",[19,157,159],{"id":158},"vue-sfc-playgroundを使うメリット","Vue SFC Playgroundを使うメリット",[75,161,162],{"id":162},"すぐにコーディングをはじめられる",[10,164,165],{},"Vue SFC PlaygroundはURLをクリックするだけですぐに使いはじめることができます。",[10,167,168,169,174,175,180,181,183],{},"プレイグラウンド環境と言えば、",[53,170,173],{"href":171,"rel":172},"http:\u002F\u002Fstackblitz.com\u002F",[57],"stackblitz.com"," や ",[53,176,179],{"href":177,"rel":178},"http:\u002F\u002Fcodesandbox.io\u002F",[57],"codesandbox.io"," などの環境がありますが、汎用的なサイトではインストールの実行が必要になります。",[29,182],{},"\n一方で、Vue SFC PlaygroundはVueに最適化されており、インストールも不要ですぐにコーディングを開始することができます。",[10,185,186],{},"また、必要十分な機能だけがあるため、初見でも簡単に使いはじめることができるのでオススメです。",[75,188,189],{"id":189},"手軽に共有できる",[10,191,192,193,195],{},"コードを共有したい場合は、コーディング中のURLを相手に共有するだけです。",[29,194],{},"\nプロジェクトの作成や、権限の設定といった面倒な操作は必要ありません。",[10,197,198,199,201],{},"URLごとに環境があるような状態なので、小さい環境をいくつも作成するときに便利です。",[29,200],{},"\n例えば、Vueの機能ごとにVue SFC Playgroundでサンプルを作成して、URLを保存しておけばいつでも見返すことが可能です。",[19,203,204],{"id":204},"まとめ",[10,206,207],{},"この記事では、Vue公式のプレイグラウンド環境であるVue SFC Playgroundの機能や使い方・メリットについて説明しました。",[10,209,210],{},"手軽に使いはじめられて、簡単に共有ができる使いやすいプレイグラウンドとなっているため、ぜひ試しに使ってみてください。",{"title":212,"searchDepth":213,"depth":213,"links":214},"",2,[215,216,217,224,228],{"id":21,"depth":213,"text":22},{"id":40,"depth":213,"text":41},{"id":66,"depth":213,"text":67,"children":218},[219,221,222,223],{"id":77,"depth":220,"text":77},3,{"id":98,"depth":220,"text":98},{"id":114,"depth":220,"text":115},{"id":130,"depth":220,"text":130},{"id":158,"depth":213,"text":159,"children":225},[226,227],{"id":162,"depth":220,"text":162},{"id":189,"depth":220,"text":189},{"id":204,"depth":213,"text":204},"システム開発","2024\u002F04\u002F08","Vue公式のプレイグラウンド環境であるVue SFC Playgroundの機能や使い方・メリットについて説明します。","md",false,{},true,"\u002Fblog\u002Fprogramming\u002Fvue-playground",{"title":5,"description":231},"blog\u002Fprogramming\u002Fvue-playground","Vue.js",[239],"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vue-define-model_vue.webp",null,"GOFE6ZJ9qbKADLjLXL90-xSzUMvgbRgs9g6Q2Onv-wo",[245,254,262,268,277,286],{"id":246,"path":247,"title":248,"category":229,"tags":249,"thumbnail":252,"createdAt":253,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Faws-iam-passkey.md","\u002Fblog\u002Fprogramming\u002Faws-iam-passkey","AWS IAMでPasskeyが利用可能に Windows PCで指紋認証を設定してみました",[250,251],"AWS","Windows","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002F2024-08-22_11-12-41_nvre36gj.webp","2024\u002F08\u002F22",{"id":255,"path":256,"title":257,"category":229,"tags":258,"thumbnail":260,"createdAt":261,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Freact-tutorial-vue.md","\u002Fblog\u002Fprogramming\u002Freact-tutorial-vue","React公式チュートリアルをVueでも書いて比較してみた",[259,239],"React.js","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_react-vue_react-vue.webp","2024\u002F06\u002F22",{"id":263,"path":264,"title":265,"category":229,"tags":266,"thumbnail":241,"createdAt":267,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Fvue-scoped-css.md","\u002Fblog\u002Fprogramming\u002Fvue-scoped-css","Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】",[239],"2024\u002F06\u002F12",{"id":269,"path":270,"title":271,"category":229,"tags":272,"thumbnail":275,"createdAt":276,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify.md","\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify","Vercel(Hobby)→AWS Amplify 移行して分かった両者の違い",[273,274],"Vercel","Amplify","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vercel-vs-amplify_vercel-amplify.webp","2024\u002F05\u002F17",{"id":278,"path":279,"title":280,"category":229,"tags":281,"thumbnail":284,"createdAt":285,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Ftailwind-css-v4-install.md","\u002Fblog\u002Fprogramming\u002Ftailwind-css-v4-install","Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】",[282,283],"Tailwind CSS","Vite","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_tailwind-css-v4-install_tailwind-css.webp","2024\u002F03\u002F07",{"id":287,"path":288,"title":289,"category":229,"tags":290,"thumbnail":295,"createdAt":296,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Fphp-vite-warning.md","\u002Fblog\u002Fprogramming\u002Fphp-vite-warning","「vite-plugin-react can't detect preamble.」エラー対応【PHP、React】",[291,292,293,283,294],"PHP","CakePHP","Laravel","React","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_php-vite-warning_php-vite.webp","2024\u002F02\u002F13",[298,300,310,316,326,335],{"id":255,"path":256,"title":257,"category":229,"tags":299,"thumbnail":260,"createdAt":261,"updatedAt":242},[259,239],{"id":301,"path":302,"title":303,"category":229,"tags":304,"thumbnail":307,"createdAt":308,"updatedAt":309},"blog\u002Fblog\u002Fprogramming\u002Fnpm-develop.md","\u002Fblog\u002Fprogramming\u002Fnpm-develop","フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】",[305,84,306],"JavaScript","npm","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_npm-develop_thumbnail.webp","2024\u002F01\u002F14","2024\u002F01\u002F19",{"id":311,"path":312,"title":313,"category":229,"tags":314,"thumbnail":241,"createdAt":315,"updatedAt":285},"blog\u002Fblog\u002Fprogramming\u002Fvue-define-model.md","\u002Fblog\u002Fprogramming\u002Fvue-define-model","VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】",[239],"2024\u002F01\u002F07",{"id":317,"path":318,"title":319,"category":229,"tags":320,"thumbnail":323,"createdAt":324,"updatedAt":325},"blog\u002Fblog\u002Fprogramming\u002Fnuxt-storybook.md","\u002Fblog\u002Fprogramming\u002Fnuxt-storybook","Nuxt3にStorybookを導入する方法",[321,322],"NuxtJS","Storybook","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_nuxt-storybook_thumbnail.webp","2023\u002F11\u002F22","2024\u002F03\u002F18",{"id":327,"path":328,"title":329,"category":229,"tags":330,"thumbnail":333,"createdAt":334,"updatedAt":309},"blog\u002Fblog\u002Fprogramming\u002Fnuxt-blog.md","\u002Fblog\u002Fprogramming\u002Fnuxt-blog","NuxtJSを使ってブログを作ってみた【Nuxt Content\u002FTailwindCSS\u002FdaisyUI】",[321,239,331,332],"TailwindCSS","ブログ","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_nuxt-blog_thumbnail.webp","2023\u002F08\u002F25",{"id":336,"path":337,"title":338,"category":229,"tags":339,"thumbnail":340,"createdAt":341,"updatedAt":242},"blog\u002Fblog\u002Fprogramming\u002Fchat-scroll.md","\u002Fblog\u002Fprogramming\u002Fchat-scroll","メッセージ送受信時にスクロール位置を最下部に維持する処理を実装【TypeScript\u002FVue.js】",[305,84,239],"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_chat-scroll_thumbnail.webp","2023\u002F08\u002F01",1793620323638]