はじめに Vue CLIのインストール〜プロジェクトの作成手順を記載します。 環境 Mac OS Node.js（npm）のインストール まずは、Node.jsとNodebrewをインストールしていきます。 Vue CLIのインストールには、npm（Node Package Manager）が必要です。 npmとは、Node.jsのパッケージ管理ツールで、Node.jsをインストールするとこでnpmも一緒にインストールされます。 Nodebrewは、Node.jsのバージョン管理ツールです。 Nodebrewのインストール $ brew install nodebrew インストール確認 $ nodebrew --version nodebrew 1.0.1 Usage: nodebrew help Show this message nodebrew install <version> Download and install <version> (from binary) nodebrew compile <version> Download and install <version> (from source) nodebrew install-binary <version> Alias of `install` (For backword compatibility) nodebrew uninstall <version> Uninstall <version> nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias <key> <value> Set alias nodebrew unalias <key> Remove alias nodebrew clean <version> | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version nodebrew exec <version> -- <command> Execute <command> using specified <version> Example: # install nodebrew install v8.9.4 # use a specific version number nodebrew use v8.9.4 Nodebrewで、Node.jsのインストール可能バージョン一覧を確認 $ nodebrew ls-remote 上記コマンドで表示されるバージョンを指定してインストールする場合 $ nodebrew install-binary v16.14.0 安定版をインストールする場合 $ nodebrew install-binary stable 最新版をインストールする場合 $ nodebrew install-binary latest Nodebrewで、使用する　Node.jsのバージョンを有効化 $ nodebrew use v16.14.0 有効化されているNode.jsのバージョンを確認（currentに設定されているバージョン） $ nodebrew ls v14.15.1 v16.14.0 current: v16.14.0 npmのバージョン確認 $ npm --version Vue CLIのインストール Node.js（npm）のインストールが完了したら、Vue CLIをインストールしていきます。 Vue CLIのインストール $ npm install -g @vue/cli バージョンが確認できればインストール完了 $ vue --version @vue/cli 5.0.1 プロジェクトの作成 vue create を実行すると、対話形式で設定が始まります。 プロジェクトの新規作成 $ vue create sample-project マニュアルでの設定を選択 Vue CLI v5.0.1 ? Please pick a preset: Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) ❯ Manually select features プロジェクトに必要な項目を選択 （未選択の項目については、プロジェクト作成後でも vue add コマンドで追加可能です） ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◉ Unit Testing ◯ E2E Testing Vue.jsのバージョンを選択 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 3.x 2.x Vue Routerでhistoryモードを使用するか選択 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) ※Vue Routerとは SPA構築において、ルーティング制御用のVue.js公式プラグインです。 ※historyモードについて linterの設定 ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, a nd <enter> to proceed) ❯◉ Lint on save ◯ Lint and fix on commit ユニットテストのフレームワークを選択 ? Pick a unit testing solution: (Use arrow keys) ❯ Jest Mocha + Chai 各種設定をpackage.jsonで管理するか、個別ファイルで管理するか選択 ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json 今回の設定内容を保存するか選択 ? Save this as a preset for future projects? (y/N) プロジェクト作成完了 ? Successfully created project sample-project. ? Get started with the following commands: $ cd sample-project $ npm run serve 作成したプロジェクトのディレクトリで npm run serve を実行し、 ブラウザで http://localhost:8080/ にアクセスすると、以下のWelcome画面の表示を確認できます。

目標はこんな感じ index.htmlを新規作成後、p5 と入力したら候補が出てきて、それを選択すると いつも書く内容が一発ででてくるようにしたいです vueはこんな感じにしてます 設定方法 Macであれば、Code > 基本設定 > ユーザースニペット すでに自分はいろいろ作っちゃってますが…html.jsonを選んで exampleがあるので、それに則ってvueやp5jsで最初必ず書くテンプレートを書いていきます （ダブルクォートやらが面倒ですね、もっといいやり方あったら知りたいですが、一回っきりなので…） 自分の記述内容はこちら { // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "vue": { "prefix": "vue-html", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\">", " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", " <title>Document</title>", "</head>", "", "<body>", " <div id=\"app\">", "", " </div>", "", " <script src=\"https://unpkg.com/vue\"></script>", " <script>", " const app = new Vue({", " el: '#app',", " data: {", " },", " mounted: async function () {", " }", " })", " </script>", "", "</body>", "", "</html>" ], "description": "Quick start vue" }, "p5": { "prefix": "p5-html", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\">", " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", " <title>p5</title>", " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js\"></script>", " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js\"></script>", " <script src=\"sketch.js\"></script>", " <style>", " html, body {", " margin: 0;", " padding: 0;", " }", " </style>", "</head>", "", "<body>", "</body>", "", "</html>" ], "description": "Quick start p5" } } p5jsもヴァージョン変わったら更新しなきゃなやつですね

はじめに こんな感じでjsonにちょっと長めのテキストが入ることってよくありますよね？ { "id": 1, "title": "『私』のバランス", "img": "option1.svg", "text": "「仕事は自分を犠牲にしてでも・・・！」そんな風に考えているあなたへ。このワークに一緒に取り組んでみませんか？", "modalImg": "sample.png", "link": "training" }, <template> <div class="option" v-for="(option, i) of options" :key="i" > <div class="option-img"> <img :src="require(`@/assets/images/options/${option.img}`)" /> </div> <p class="option-text">{{ option.text }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; import optionsData from '../../assets/json/optionsData.json'; export default Vue.extend({ data() { return { options: optionsData }; } }); </script> このtextを任意の場所で改行したいな〜っと思い、調べてみました。 ?を参考に\\nもしくは\nを入れてみました。 { "id": 1, "title": "『私』のバランス", "img": "option1.svg", "text": "「仕事は自分を犠牲にしてでも・・・！」\nそんな風に考えているあなたへ。\nこのワークに一緒に取り組んでみませんか？", "modalImg": "sample.png", "link": "training" }, しかし！！！改行さない！！！ 追加でcssが必要でした <template> <div class="option" v-for="(option, i) of options" :key="i" > <div class="option-img"> <img :src="require(`@/assets/images/options/${option.img}`)" /> </div> <p class="option-text">{{ option.text }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; import optionsData from '../../assets/json/optionsData.json'; export default Vue.extend({ data() { return { options: optionsData }; } }); </script> <style scoped lang="scss"> .option-text { white-space: pre-wrap; // 追加！！！ } </style> これで改行されるようになりました！！！ white-space: pre;だと改行コード\nを入れた箇所以外では改行されなくなるので要注意！ 追記 v-textを使いましょう <div class="option-text" v-text="optionText"></div> Mustache構文{{}}を使用せず、v-text属性を使用しているのは、以下に理由によるものです。 タグ間のインデントや改行も出力されてしまう。 (ESLintを導入している場合)タグ間をすべて続けて書いた場合、1行が長すぎるため改行して記述するようwarningが吐かれる場合がある。 参考

こんにちはSadoです。今回はVue3で開閉処理を行う際に、「Web Animations API」(JavaScript)を使ってゆっくり開閉するアニメーションを作成してみます！純粋に宣言した CSS とは違って、Web Animations APIを用いる場合 はプロパティからアニメーション時間を動的に設定することが出来るみたいです。 Web Animations APIについて やること シンプルに開閉ボタンと開いたときに表示される要素を用意して、そこにアニメーションを付け加えていきたいと思います。 準備 表示用のファイル（親）とアニメーション処理を書くファイル（子）に分けておきます。Vue3.2の<script setup>構文を使用しております。CSSはTailwindを使用。 Index.vue <script setup lang="ts"> import Child from "./Child.vue"; import { ref } from "vue"; const open = ref(true); </script> <template> <Child :open="open" /> </template> Child.vue <script setup lang="ts"> import { ref } from "vue"; const props = defineProps<{ open: boolean; }>(); const open = ref(props.open); </script> <template> <section> <button class="bg-gray-300 rounded p-4 mb-5"> 開閉ボタン </button> // デフォルトで開いている状態 <p class="bg-blue-100 p-10">open</p> </section> </template> 開閉ボタンと開閉部分の要素を準備(デフォルトで開いておく) 実際にやってみる ここから開閉処理と、開閉したときのアニメーションを付け加えていきます。 開閉処理追加 ここでは、開閉処理をボタン要素をクリックすることで開閉が動作するように処理を追加。 Child.vue <script setup lang="ts"> import { ref } from "vue"; const props = defineProps<{ open: boolean; }>(); const open = ref(props.open); </script> <template> <section> + <button class="bg-gray-300 rounded p-4 mb-5" @click="open = !open"> 開閉ボタン </button> + // デフォルトで開いている状態 + <div v-if="open"> + <p class="bg-blue-100 p-10">open</p> + </div> + <div v-else></div> </section> </template> アニメーション追加 アニメーションを行いたい要素である、開閉部分のdivタグを<transition>で囲む。そして、@enterと@leaveをつけることでscript内に記述してある、enterとleaveのアニメーション処理が行われる。 Child.vue <script setup lang="ts"> import { ref } from "vue"; const props = defineProps<{ open: boolean; }>(); const open = ref(props.open); + // 開くとき + async function enter(el: Element, done: () => void) { + el.classList.add("overflow-hidden"); + + await el.animate( + [ + { + height: 0, + }, + { + height: `${(el as HTMLElement).offsetHeight}px`, + }, + ], + { + duration: 500, + easing: "ease-out", + } + ).finished; + + el.classList.remove("overflow-hidden"); + + done(); + } + + // 閉まるとき + async function leave(el: Element, done: () => void) { + el.classList.add("overflow-hidden"); + + await el.animate( + [ + { + height: `${(el as HTMLElement).offsetHeight}px`, + }, + { + height: 0, + }, + ], + { + duration: 100, + easing: "ease-out", + } + ).finished; + + el.classList.remove("overflow-hidden"); + + done(); + } </script> <template> <section> <button class="bg-gray-300 rounded p-4 mb-5" @click="open = !open"> 開閉ボタン </button> // デフォルトで開いている状態 + <transition @enter="enter" @leave="leave"> <div v-if="open"> <p class="bg-blue-100 p-10">open</p> </div> <div v-else></div> + </transition> </section> </template> height: ${(el as HTMLElement).offsetHeight}px,の部分では、開閉する際の要素の高さを取得しています。enter(開くとき)では開く際の要素の高さ(0px)から、今回用意したdiv要素の高さ分までを指定。 そして、duration: 500の指定によって、開いたときにゆっくりと開かれているのが確認できました。 Child.vue [ { height: 0, }, 　 { height: `${(el as HTMLElement).offsetHeight}px`, 　}, ], 　　{ duration: 500, easing: "ease-out", }

解消方法 以下の命令をPowerShellで実行 Set-ExecutionPolicy RemoteSigned -Scope Process おかげさまで以下の記事を見て一発で解消できました。このコマンドはセキュリティポリシーを一時的に変更しているようです。 備忘録 メモ：なぜかvue　～～のコマンドをPoweShellに入力すると以下のログが出てきました。 発生ログ vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:～～～～～～～ を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。 発生場所 行:1 文字:1 + vue -v + ~~~ + CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess ログに出てきたサイトを見てみるとPoweShellで悪意のある事を実行しないようにセキュリティにひっかけてるようです。 ついでに 実行ポリシーの確認方法 PS C:\> Get-ExecutionPolicy -List 以下の記事が参考になりました。