はじめまして。私３０代未経験でエンジニア転職を目指して日々勉強しています。 nuxt.jsでポートフォリオを作っていてvuexの理解があまりにも浅いのでアウトプットの意味で投稿しようと思います。 state 日本語で状態を意味します。 基本一番上に記述してデータを書きます vue.jsでいうデータオプションに近い getters stateのデータをちょっといじってその値を返す actions 外部APIとの通信を行い、mutationsを呼び出す役割 非同期通信が必要な時はここに書く this.$store.dispatch( '第１引数'第２引数,)で実行 commitの前には必ずdispatchをする、actionsからのみcommitを使う ○○({commit}, number) commit("○○", number) mutations vuexのストアの状態を唯一変更できる存在 必ずstateはmutationsから書き換える this.$store.commit('第１引数',第２引数)で実行する ○○(state, number){ 状態を変更する state.stateのデータ=number } 例でいうとTODOの追加とか削除とか ちょっとこれだとわかりにくいですが、日記みたいにして書いてアウトプットしていこうと思います。
はじめまして。私３０代未経験でエンジニア転職を目指して日々勉強しています。
nuxt.jsでポートフォリオを作っていてvuexの理解があまりにも浅いのでアウトプットの意味で投稿しようと思います。
日本語で状態を意味します。 基本一番上に記述してデータを書きます vue.jsでいうデータオプションに近い
stateのデータをちょっといじってその値を返す
外部APIとの通信を行い、mutationsを呼び出す役割 非同期通信が必要な時はここに書く this.$store.dispatch( '第１引数'第２引数,)で実行 commitの前には必ずdispatchをする、actionsからのみcommitを使う ○○({commit}, number) commit("○○", number)
vuexのストアの状態を唯一変更できる存在 必ずstateはmutationsから書き換える this.$store.commit('第１引数',第２引数)で実行する ○○(state, number){ 状態を変更する state.stateのデータ=number } 例でいうとTODOの追加とか削除とか
ちょっとこれだとわかりにくいですが、日記みたいにして書いてアウトプットしていこうと思います。
前提 コンポーネントを複数用意した際の切り替え方。 その際注意すること。 Houseコンポーネント Contentコンポーネント 親コンポーネント : App.vue 今回は二つ子コンポーネントを用意。 ボタンを押すことで二つのコンポーネントを切り替えることができる。 Houseコンポーネント House.vue <template> <div> <p>House</p> </div> </template> Contentコンポーネント Content.vue <template> <div> <p>Content</p> <input type="text"> </div> </template> <script> export default { destroyed() { console.log('destoryed'); } } </script> 親コンポーネント App.vue <template> <div> <button @click="currentComponent = 'Content'">Content</button> <button @click="currentComponent = 'House'">House</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> export default { data() { return { currentComponent: 'House', }; }, } <script> コンポーネントの切り替え keep-alive keep-aliveタグ componentタグ v-bind:is(:is) keep-aliveのなかにcomponentをネスト。 componentの中でv-bind:isを使ってプロパティを指定すると完成。 App.vueではcurrentComponentプロパティにコンポーネントを値として挿入しているが、 直接指定も可能。 App.vue //直接指定 <component :is="House"></component> <component :is="Content"></component> ライフサイクルフック ライフサイクル activated deactivated keep-aliveを使用することによって新たなライフサイクルが二つ追加される。 created destroyed この二つをイメージするとわかりやすい。 注意点 異なる点として、毎回インスタンス化されないため、実際にcreatedやdestroyedされているわけではない。 そのため、inputなどに入力したデータは切り替え後も消えずに残る。 参照 udemy講座 : https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15371400#content 講師 : よしぴー(Yoshipi)さん
コンポーネントを複数用意した際の切り替え方。 その際注意すること。
今回は二つ子コンポーネントを用意。 ボタンを押すことで二つのコンポーネントを切り替えることができる。
Houseコンポーネント
<template> <div> <p>House</p> </div> </template>
Contentコンポーネント
<template> <div> <p>Content</p> <input type="text"> </div> </template> <script> export default { destroyed() { console.log('destoryed'); } } </script>
親コンポーネント
<template> <div> <button @click="currentComponent = 'Content'">Content</button> <button @click="currentComponent = 'House'">House</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> export default { data() { return { currentComponent: 'House', }; }, } <script>
keep-aliveのなかにcomponentをネスト。 componentの中でv-bind:isを使ってプロパティを指定すると完成。
App.vueではcurrentComponentプロパティにコンポーネントを値として挿入しているが、 直接指定も可能。
//直接指定 <component :is="House"></component> <component :is="Content"></component>
keep-aliveを使用することによって新たなライフサイクルが二つ追加される。
この二つをイメージするとわかりやすい。
異なる点として、毎回インスタンス化されないため、実際にcreatedやdestroyedされているわけではない。
そのため、inputなどに入力したデータは切り替え後も消えずに残る。
udemy講座 : https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15371400#content 講師 : よしぴー(Yoshipi)さん
はじめに おはようございます。こんにちは。こんばんは。 Watatakuです。 今回は題名にある通りVueCLI3を扱うときのSVGファイルの扱い方についてです。 src | |----assets | |-----Watataku.svg |--App.vue App.vueでWatataku.svgを表示するとします。 App.vue <template> <img :src="this.imagePath" :width="" :height="" :alt="" /> </template> <script> export defalt { data() { imagePath: require("@/assets/Watataku.svg") } } </script> 上記コードで動きました。 でも、VueCLI3ではSVGが表示されません。(VueCLI2では表示されました。) ※VueCLI3でもdevServerなら表示されるがbuildかけて本番環境にデプロイすると表示されなくなります。 原因を調べると下記が原因だと考えられます。 「VueCLI3では、WebpackでSVGを処理できません」 デフォルトのfile-loaderの問題だと思いますが、詳しくは分かりません。 誰か教えてください(笑) ですが、下記の解決方法を試すと表示ができましたので共有させていただきます。 解決方法 ①必要パッケージをインストールする。 以下のコマンドでパッケージをインストールする。 $ npm install svg-to-vue-component https://www.npmjs.com/package/svg-to-vue-component ②vue.config.jsの作成 ルートディレクトリにvue.config.jsを作成します。(https://cli.vuejs.org/config/#vue-config-js) vue.config.js module.exports = { chainWebpack (config) { // ファイルローダーを使用する既存のSVGルールを削除します config.module.rules.delete('svg') // 代わりにローダーを使用してください config.module.rule('svg') .test(/\.svg$/) .use('vue') .loader('vue-loader') .end() .use('svg-to-vue-component') .loader('svg-to-vue-component/loader') } }; これで準備完了ですのでApp.vueを書き換えると問題なく無事表示できるようになります。 App.vue <template> <WatatakuSvg /> </template> <script> import WatatakuSvg from "@/assets/Watataku.svg" export defalt { components: { WatatakuSvg } } </script> 以上。 最後に もし間違い等アドバイスやご指摘があればご連絡お願いします。 また、ご質問に対してのご回答もよろしくお願いします。
おはようございます。こんにちは。こんばんは。 Watatakuです。 今回は題名にある通りVueCLI3を扱うときのSVGファイルの扱い方についてです。
src | |----assets | |-----Watataku.svg |--App.vue
App.vueでWatataku.svgを表示するとします。
App.vue
Watataku.svg
<template> <img :src="this.imagePath" :width="" :height="" :alt="" /> </template> <script> export defalt { data() { imagePath: require("@/assets/Watataku.svg") } } </script>
上記コードで動きました。 でも、VueCLI3ではSVGが表示されません。(VueCLI2では表示されました。) ※VueCLI3でもdevServerなら表示されるがbuildかけて本番環境にデプロイすると表示されなくなります。
devServer
原因を調べると下記が原因だと考えられます。 「VueCLI3では、WebpackでSVGを処理できません」 デフォルトのfile-loaderの問題だと思いますが、詳しくは分かりません。 誰か教えてください(笑) ですが、下記の解決方法を試すと表示ができましたので共有させていただきます。
file-loader
以下のコマンドでパッケージをインストールする。
$ npm install svg-to-vue-component
https://www.npmjs.com/package/svg-to-vue-component
vue.config.js
ルートディレクトリにvue.config.jsを作成します。(https://cli.vuejs.org/config/#vue-config-js)
module.exports = { chainWebpack (config) { // ファイルローダーを使用する既存のSVGルールを削除します config.module.rules.delete('svg') // 代わりにローダーを使用してください config.module.rule('svg') .test(/\.svg$/) .use('vue') .loader('vue-loader') .end() .use('svg-to-vue-component') .loader('svg-to-vue-component/loader') } };
これで準備完了ですのでApp.vueを書き換えると問題なく無事表示できるようになります。
<template> <WatatakuSvg /> </template> <script> import WatatakuSvg from "@/assets/Watataku.svg" export defalt { components: { WatatakuSvg } } </script>
以上。
もし間違い等アドバイスやご指摘があればご連絡お願いします。 また、ご質問に対してのご回答もよろしくお願いします。
環境 エディタ：VS-CODE Vue:@vue/cli 4.5.9 vue": "2.6.11", "v-calendar": "2.1.6", "bootstrap": "4.5.3", 初めての記事なので、わかりにくい場合は申し訳ありません。 カレンダーをVueで利用しようと思い、v-calenderを選択しました。 サンプルとして、GitHubの https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue からコードをコピペしてVS-CODEに張り付けたのですが、CSSが適用されず困っていました。 調べたところissueにも回答が見つけられず、自力で調べてみました。 参考issue : https://github.com/nathanreyes/v-calendar/issues/727 まだ、Gitのサンプルと違う？というところはありますが、備忘録的に記載しておきます。 1.npm or yarn経由でTailwindをインストールする https://tailwindcss-ja.entap.app/docs/installation # Using npm npm install tailwindcss または、 # Using Yarn yarn add tailwindcss 2.main.js にてCSSをインポートする。 CSSの該当ファイルが見つからず苦労しました・・・ main.js import "tailwindcss/dist/tailwind.css"; //VCalender の設定 import VCalendar from 'v-calendar'; Vue.use(VCalendar); より良い方法があればご指導ください。
エディタ：VS-CODE Vue:@vue/cli 4.5.9 vue": "2.6.11", "v-calendar": "2.1.6", "bootstrap": "4.5.3",
カレンダーをVueで利用しようと思い、v-calenderを選択しました。 サンプルとして、GitHubの https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue からコードをコピペしてVS-CODEに張り付けたのですが、CSSが適用されず困っていました。 調べたところissueにも回答が見つけられず、自力で調べてみました。 参考issue : https://github.com/nathanreyes/v-calendar/issues/727 まだ、Gitのサンプルと違う？というところはありますが、備忘録的に記載しておきます。
https://tailwindcss-ja.entap.app/docs/installation
# Using npm npm install tailwindcss または、 # Using Yarn yarn add tailwindcss
CSSの該当ファイルが見つからず苦労しました・・・
import "tailwindcss/dist/tailwind.css"; //VCalender の設定 import VCalendar from 'v-calendar'; Vue.use(VCalendar);
より良い方法があればご指導ください。
chart.jsでデータベースの値から簡単な円グラフを作成 スポーツの大会でよくある勝敗確率のグラフ(最高100%という設定) データベース forecastsテーブル numはwin_schoolの勝利確率 win_schoolは勝利予想されているチーム lose_schoolは負け予想されているチーム id num user_id win_school lose_school 1 60 1 A学園 B学園 コントローラー idが1のデータを取ってこれる設定 def show @forecast = Forecast.find(params[:id]) end htmlファイル <div class="win"><%= @forecast.win_school %></div><!-- A学園 --> <div class="lose"><%= @forecast.lose_school %></div><!-- B学園 --> <div class="win-rate"><%= @forecast.num %></div><!-- 60 --> <div class="pie"><!-- グラフ描画部分 --> <div style="width:60%; height:60%";><canvas id="PieChart"></canvas></div> </div> <%= javascript_pack_tag 'forecast' %> <!-- js読み込み --> 非表示にさせたい場合はhiddenを使うと良いでしょう <div hidden class="win"> jsファイル app > javascript > packs > forecast.js var ctx = document.getElementById("PieChart"); var win = document.getElementsByClassName("win").textContent //クラス名winから値を取得(A学園) var lose = document.getElementsByClassName("lose").textContent //クラス名loseから値を取得(B学園) var winnum = document.getElementsByClassName("win-rate").textContent //クラス名win-rateから値を取得(60) var PieChart = new Chart(ctx, { type: 'pie', //グラフのタイプは円グラフです、という意味 data: { labels: [win,lose], //円グラフのラベル(円グラフのA学園,B学園と表示されている箇所) datasets: [{ backgroundColor: [ //円グラフの色 "#FF0000", //1つめの色(ラベルwin)は赤 "#33CCFF", //2つめの色(ラベルlose)は水色 ], data: [winnum,100-winnum] //グラフの値 下記参照 }] }, options: { //オプションでカスタマイズ？ title: { display: true, text: '勝利確率'//グラフのタイトル } } }); data:でグラフに値を挿入しています 変数winnumには60が入っているので60,2つめは100-60で40が入るので A学園の勝率60%,B学園の勝率40%ということになります data: [winnum,100-winnum] 今回はhtmlファイルから値を取得しました コントローラーから取得したい場合は、gonを使えば良いと思います
chart.jsでデータベースの値から簡単な円グラフを作成 スポーツの大会でよくある勝敗確率のグラフ(最高100%という設定)
forecastsテーブル numはwin_schoolの勝利確率 win_schoolは勝利予想されているチーム lose_schoolは負け予想されているチーム
idが1のデータを取ってこれる設定
def show @forecast = Forecast.find(params[:id]) end
<div class="win"><%= @forecast.win_school %></div><!-- A学園 --> <div class="lose"><%= @forecast.lose_school %></div><!-- B学園 --> <div class="win-rate"><%= @forecast.num %></div><!-- 60 --> <div class="pie"><!-- グラフ描画部分 --> <div style="width:60%; height:60%";><canvas id="PieChart"></canvas></div> </div> <%= javascript_pack_tag 'forecast' %> <!-- js読み込み -->
非表示にさせたい場合はhiddenを使うと良いでしょう
<div hidden class="win">
app > javascript > packs > forecast.js
var ctx = document.getElementById("PieChart"); var win = document.getElementsByClassName("win").textContent //クラス名winから値を取得(A学園) var lose = document.getElementsByClassName("lose").textContent //クラス名loseから値を取得(B学園) var winnum = document.getElementsByClassName("win-rate").textContent //クラス名win-rateから値を取得(60) var PieChart = new Chart(ctx, { type: 'pie', //グラフのタイプは円グラフです、という意味 data: { labels: [win,lose], //円グラフのラベル(円グラフのA学園,B学園と表示されている箇所) datasets: [{ backgroundColor: [ //円グラフの色 "#FF0000", //1つめの色(ラベルwin)は赤 "#33CCFF", //2つめの色(ラベルlose)は水色 ], data: [winnum,100-winnum] //グラフの値 下記参照 }] }, options: { //オプションでカスタマイズ？ title: { display: true, text: '勝利確率'//グラフのタイトル } } });
data:でグラフに値を挿入しています 変数winnumには60が入っているので60,2つめは100-60で40が入るので A学園の勝率60%,B学園の勝率40%ということになります
data: [winnum,100-winnum]
今回はhtmlファイルから値を取得しました コントローラーから取得したい場合は、gonを使えば良いと思います
ログインフォームや会員登録を行うフォームにて、色々対策したいなと思い調べていると、Googleが提供しているreCaptchaというものを使うことで対策が出来るらしい。 誰しもが１回は見たことのある、「私はロボットではありません」てきなやつ。 ただ、画像をクリックしたりあの分かりづらい文字列を入力したり色々と面倒。。。 そこで、GoogleはこれらをやらなくてもユーザーがBotやスパムではないと判断する最新「v3」を今提供している。 イメージとしてはこんな感じ ページの右下にこのようなマークが表示され常にユーザーが人間らしい動きをしているかを確認している。 流石Googleさん！ 今回はこのreCaptchaの簡単な使い方を説明していこうと思います！！ 調べてみてわかったことが、割とドキュメントが少なく初めての人にとって分かりやすい記事がまりなあったので、書いてみようと思いました。 初めての人に向けて、書いていくのであまり詳しい説明は致しません。（詳しいことは分からない） なので、reCaptchaを搭載したいという方はぜひ見て下さい！ それでは、一緒に説明を見ていきましょう！！！ Google reCaptchaの登録 まずは、「Google reCaptcha」に登録します。 詳しいやり方は、他の方が説明しているのでそちらを参考にして頂くと良いかと。 ちなみに僕は下記の記事を参考にして登録を行いました。 Google reCAPTCHAのWEBサイト登録とAPIキーの取得方法 jsファイルの読み込み 次に、サイトキーをコピーして、headタグに以下のスクリプトファイルの読み込みを行ってください。 ※注意 bodyタグではなくheadタグです！！！間違えないように！ <script src="https://www.google.com/recaptcha/api.js?render={SITE_KEY}" async defer></script> {SITE_KEY}にコピーしたサイトキーをペーストしてください。 トークンの呼び出し 最後に、認証を行いたいページにてTokenの発行を行います。 トークンの有効時間は２分であるため、入力フォームで多くの入力事項を記載する際は、ページに訪れた時ではなく、例えば「次へ」のボタンを押したときなどにトークンを発行してください。 トークンを呼び出す関数は以下のようになります。 index.js window.grecaptcha.ready(() => { window.grecaptcha.execute(process.env.VUE_APP_SITE_KEY, { action: '/signup' }).then(async (token) => { console.log('token') }) }) このようにして、Tokenを発行することができます！ ロゴの消去（番外編） ページ右下の認証ロゴって結構邪魔ですよね。 なので、ロゴを消去したいページでは以下のようなCSSを設定してあげてください。 .grecaptcha-badge { display: none } また、ページによってロゴを消したり表示する場合はこちらの記事にVueRouterで動的にpathを取得（検知）する方法詳しく書いてあるので、ぜひ興味のある方はご覧ください。 今回はこの辺で終わりにしたいと思います。 reCaptchaはまだこれで終わりではないです。 ここで発行したトークンが本当に正しいのかの判断を行わなければいけません。 そして、例えばトークンが正しかったらログインを実行し、正しくなければエラーメッセージを表示するといった形になります。 ただ、これを一気にやってしまうと頭がパンクしてしまうので、まずはこのトークンがちゃんと発行できているかを確認してから次の段階に進んでください。 近々、Laravelでトークンの認証を行う記事を書くのでぜひそちらもご覧ください。 以上、「さて、驚くほど簡単にreCapthca認証でBOT、スパム対策を行おう！！」でした！ 良かったら、LGTM、コメントお願いします。 また、何か間違っていることがあればご指摘頂けると幸いです。 他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！ Thank you for reading
ログインフォームや会員登録を行うフォームにて、色々対策したいなと思い調べていると、Googleが提供しているreCaptchaというものを使うことで対策が出来るらしい。
誰しもが１回は見たことのある、「私はロボットではありません」てきなやつ。
ただ、画像をクリックしたりあの分かりづらい文字列を入力したり色々と面倒。。。
そこで、GoogleはこれらをやらなくてもユーザーがBotやスパムではないと判断する最新「v3」を今提供している。
イメージとしてはこんな感じ
ページの右下にこのようなマークが表示され常にユーザーが人間らしい動きをしているかを確認している。
流石Googleさん！
今回はこのreCaptchaの簡単な使い方を説明していこうと思います！！
調べてみてわかったことが、割とドキュメントが少なく初めての人にとって分かりやすい記事がまりなあったので、書いてみようと思いました。
初めての人に向けて、書いていくのであまり詳しい説明は致しません。（詳しいことは分からない）
なので、reCaptchaを搭載したいという方はぜひ見て下さい！
それでは、一緒に説明を見ていきましょう！！！
まずは、「Google reCaptcha」に登録します。
詳しいやり方は、他の方が説明しているのでそちらを参考にして頂くと良いかと。
ちなみに僕は下記の記事を参考にして登録を行いました。
Google reCAPTCHAのWEBサイト登録とAPIキーの取得方法
次に、サイトキーをコピーして、headタグに以下のスクリプトファイルの読み込みを行ってください。
head
※注意 bodyタグではなくheadタグです！！！間違えないように！
body
<script src="https://www.google.com/recaptcha/api.js?render={SITE_KEY}" async defer></script>
{SITE_KEY}にコピーしたサイトキーをペーストしてください。
{SITE_KEY}
最後に、認証を行いたいページにてTokenの発行を行います。
トークンの有効時間は２分であるため、入力フォームで多くの入力事項を記載する際は、ページに訪れた時ではなく、例えば「次へ」のボタンを押したときなどにトークンを発行してください。
トークンを呼び出す関数は以下のようになります。
window.grecaptcha.ready(() => { window.grecaptcha.execute(process.env.VUE_APP_SITE_KEY, { action: '/signup' }).then(async (token) => { console.log('token') }) })
このようにして、Tokenを発行することができます！
ページ右下の認証ロゴって結構邪魔ですよね。
なので、ロゴを消去したいページでは以下のようなCSSを設定してあげてください。
.grecaptcha-badge { display: none }
また、ページによってロゴを消したり表示する場合はこちらの記事にVueRouterで動的にpathを取得（検知）する方法詳しく書いてあるので、ぜひ興味のある方はご覧ください。
今回はこの辺で終わりにしたいと思います。
reCaptchaはまだこれで終わりではないです。
ここで発行したトークンが本当に正しいのかの判断を行わなければいけません。
そして、例えばトークンが正しかったらログインを実行し、正しくなければエラーメッセージを表示するといった形になります。
ただ、これを一気にやってしまうと頭がパンクしてしまうので、まずはこのトークンがちゃんと発行できているかを確認してから次の段階に進んでください。
近々、Laravelでトークンの認証を行う記事を書くのでぜひそちらもご覧ください。
以上、「さて、驚くほど簡単にreCapthca認証でBOT、スパム対策を行おう！！」でした！
良かったら、LGTM、コメントお願いします。
また、何か間違っていることがあればご指摘頂けると幸いです。
他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！
Thank you for reading
Vue & Wijmoクイックスタート【2019年版】 https://devlog.grapecity.co.jp/entry/2019/03/12/wijmo-vue-quickstart こちらを参考にいま開発しているプロジェクトにWijimoを導入してみた。 上記の設定通りにNuxt @ v2.14.12で実行すると、「window is not defined」となってしまう。 いろいろ調べたところ、nuxt.config.jsのpluginsにSSR回避の設定をしないとダメなようだ。 https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#ssr plugins: [ {src: './node_modules/@grapecity/wijmo.vue2.grid',mode: 'client'}, {src: './node_modules/@grapecity/wijmo.cultures/wijmo.culture.ja',mode: 'client'}, {src: './node_modules/@grapecity/wijmo.styles/wijmo.css',mode: 'client'}, ], <template> <v-container> <v-layout wrap justify-end mb-2> <v-flex> <wj-flex-grid :itemsSource="gridData"> <wj-flex-grid-column header="ID" binding="id" :width="60"></wj-flex-grid-column> <wj-flex-grid-column header="商品名" binding="product" :width="200"></wj-flex-grid-column> <wj-flex-grid-column header="受注日" binding="date" :width="120"></wj-flex-grid-column> <wj-flex-grid-column header="金額" binding="amount" :width="100" format="c"></wj-flex-grid-column> </wj-flex-grid> </v-flex> </v-layout> </v-container> </template> <script> export default { data () { return { gridData: [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 }, { id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 } ] } } } </script> <style> </style> 無事動作。
Vue & Wijmoクイックスタート【2019年版】 https://devlog.grapecity.co.jp/entry/2019/03/12/wijmo-vue-quickstart
こちらを参考にいま開発しているプロジェクトにWijimoを導入してみた。
上記の設定通りにNuxt @ v2.14.12で実行すると、「window is not defined」となってしまう。 いろいろ調べたところ、nuxt.config.jsのpluginsにSSR回避の設定をしないとダメなようだ。
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#ssr
plugins: [ {src: './node_modules/@grapecity/wijmo.vue2.grid',mode: 'client'}, {src: './node_modules/@grapecity/wijmo.cultures/wijmo.culture.ja',mode: 'client'}, {src: './node_modules/@grapecity/wijmo.styles/wijmo.css',mode: 'client'}, ],
<template> <v-container> <v-layout wrap justify-end mb-2> <v-flex> <wj-flex-grid :itemsSource="gridData"> <wj-flex-grid-column header="ID" binding="id" :width="60"></wj-flex-grid-column> <wj-flex-grid-column header="商品名" binding="product" :width="200"></wj-flex-grid-column> <wj-flex-grid-column header="受注日" binding="date" :width="120"></wj-flex-grid-column> <wj-flex-grid-column header="金額" binding="amount" :width="100" format="c"></wj-flex-grid-column> </wj-flex-grid> </v-flex> </v-layout> </v-container> </template> <script> export default { data () { return { gridData: [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 }, { id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 } ] } } } </script> <style> </style>
無事動作。
Vue Test Utilsでテストするための環境構築 （認識等に誤りがあれば、ご指摘お願いいたします） パッケージインストール // Jest（テストフレームワーク）をインストール npm install --save-dev jest // @vue/test-utils：Vueの単体テストを行うためのライブラリ // vue-jest：.vueファイルのトランスパイラー（テストファイルで.vueファイルを使用するため） npm install --save-dev @vue/test-utils vue-jest // babelモジュール：jsファイルのトランスパイルを行うため npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0 Jest設定ファイル jest.config.js module.exports = { // verboseをtrueにすることで、テストケースごとの結果を出力する。なので、trueを設定しておくのが良い。 // デフォルトはfalseで、テストファイルごとの結果のみの出力となる（各テストケースの結果は不明） verbose: true, // Jestがファイル探索するディレクトリを指定する。<rootDir>は、設定ファイルのあるディレクトリを指す。 // 今回はルートのサブディレクトリである 「srcとspecs」のみがJestのアクセスするファイルとしたいので、下記のように定義する（PJ環境に合わせて適宜変える） roots: ["<rootDir>/src/", "<rootDir>/specs/"], // Jestが読み込む拡張子を定義 moduleFileExtensions: ['js', 'vue'], // ファイルパスのエイリアスを作成 // 今回は、<rootDir>/src/ のエイリアスを @ に置き換える設定をしている // (.*) にあたる部分が $1 で参照されるので、@/test.vue とすると $1 = test.vue となり、<rootDir>/src/test.vueにアクセスできる moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1', }, // ファイルをどのモジュールでトランスパイルするかを設定する transform: { // .jsファイルをbabel-jestでトランスパイルする "^.+\\.js$": "babel-jest", // .vueファイルをvue-jestでトランスパイルする "^.+\\.vue$": "vue-jest", }, } Babel設定ファイル babel.config.js { "presets": ["@babel/preset-env"] } scriptにtestを追加 package.json "scripts": { "test": "jest" } 以上でテストを実行できる 適当にテストファイルを作成する。 /specs/test.js test('mount a vue component', () => { console.log("test") }) npm run testでテストを実行し、Jestが動けばOK
Vue Test Utilsでテストするための環境構築 （認識等に誤りがあれば、ご指摘お願いいたします）
// Jest（テストフレームワーク）をインストール npm install --save-dev jest // @vue/test-utils：Vueの単体テストを行うためのライブラリ // vue-jest：.vueファイルのトランスパイラー（テストファイルで.vueファイルを使用するため） npm install --save-dev @vue/test-utils vue-jest // babelモジュール：jsファイルのトランスパイルを行うため npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0
module.exports = { // verboseをtrueにすることで、テストケースごとの結果を出力する。なので、trueを設定しておくのが良い。 // デフォルトはfalseで、テストファイルごとの結果のみの出力となる（各テストケースの結果は不明） verbose: true, // Jestがファイル探索するディレクトリを指定する。<rootDir>は、設定ファイルのあるディレクトリを指す。 // 今回はルートのサブディレクトリである 「srcとspecs」のみがJestのアクセスするファイルとしたいので、下記のように定義する（PJ環境に合わせて適宜変える） roots: ["<rootDir>/src/", "<rootDir>/specs/"], // Jestが読み込む拡張子を定義 moduleFileExtensions: ['js', 'vue'], // ファイルパスのエイリアスを作成 // 今回は、<rootDir>/src/ のエイリアスを @ に置き換える設定をしている // (.*) にあたる部分が $1 で参照されるので、@/test.vue とすると $1 = test.vue となり、<rootDir>/src/test.vueにアクセスできる moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1', }, // ファイルをどのモジュールでトランスパイルするかを設定する transform: { // .jsファイルをbabel-jestでトランスパイルする "^.+\\.js$": "babel-jest", // .vueファイルをvue-jestでトランスパイルする "^.+\\.vue$": "vue-jest", }, }
{ "presets": ["@babel/preset-env"] }
"scripts": { "test": "jest" }
適当にテストファイルを作成する。
test('mount a vue component', () => { console.log("test") })
npm run testでテストを実行し、Jestが動けばOK
npm run test
Vue Test Utilsでテストするための環境構築 （認識等に誤りがあれば、ご指摘お願いいたします） パッケージインストール // Jest（テストフレームワーク）をインストール npm install --save-dev jest // @vue/test-utils：Vueの単体テストを行うためのライブラリ // vue-jest：.vueファイルのトランスパイラー（テストファイルで.vueファイルを使用するため） npm install --save-dev @vue/test-utils vue-jest // babelモジュール：jsファイルのトランスパイルを行うため npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0 Jest設定ファイル jest.config.js module.exports = { // verboseをtrueにすることで、テストケースごとの結果を出力する。なので、trueを設定しておくのが良い。 // デフォルトはfalseで、テストファイルごとの結果のみの出力となる（各テストケースの結果は不明） verbose: true, // Jestがファイル探索するディレクトリを指定する。<rootDir>は、設定ファイルのあるディレクトリを指す。 // 今回はルートのサブディレクトリである 「srcとspecs」のみがJestのアクセスするファイルとしたいので、下記のように定義する（PJ環境に合わせて適宜変える） roots: ["<rootDir>/src/", "<rootDir>/specs/"], // Jestが読み込む拡張子を定義 moduleFileExtensions: ['js', 'vue'], // ファイルパスのエイリアスを作成 // 今回は、<rootDir>/src/ のエイリアスを @ に置き換える設定をしている // (.*) にあたる部分が $1 で参照されるので、@/test.vue とすると $1 = test.vue となり、<rootDir>/src/test.vueにアクセスできる moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1', }, // ファイルをどのモジュールでトランスパイルするかを設定する transform: { // .jsファイルをbabel-jestでトランスパイルする "^.+\\.js$": "babel-jest", // .vueファイルをvue-jestでトランスパイルする "^.+\\.vue$": "vue-jest", }, } Babel設定ファイル babel.config.js { "presets": ["@babel/preset-env"] } scriptにtestを追加 package.json "scripts": { "test": "jest" } 以上でテストを実行できる 適当にテストファイルを作成する。 /specs/test.js test('mount a vue component', () => { console.log("test") }) npm run testでテストを実行し、Jestが動けばOK Vuetifyを使用している場合のユニットテスト プロジェクトには、vue add vuetify でVuetifyをインストールしたはず。 下記、Vuetifyの公式ページにしたがって、テスト環境を整えた。 セットアップファイルを作成 セットアップファイルを作成した。 specs/setup.js import Vue from 'vue' import vuetify from 'vuetify' Vue.use(vuetify) （備忘）下記、怪しいので参考程度に。。。 実際は、Vuetifyの公式ページの手順通りにユニットテストの環境構築を進めて、いざテストすると「Vuetifyのモジュールが見つからない」って怒られた。 ここで長い時間はまった。 node_moduleを確認すると、vuetifyがない。 （node_moduleにはないがアプリケーションは動く。テストだと、モジュールが見つからないと言われる） なので、Vuetifyをアンインストールして、npm install vuetifyで再インストールして、再度テストを実行したところ、動いた。 node_moduleにも、vuetifyがあった。 たしか、最初はvue add vuetifyでvuetifyを入れた気がするがそれが原因？（うる覚え） もう一度、vue add vuetifyで作ったプロジェクトに対してテストして、同じような現象が起こるかを確認すればいいのだが、確認していません！orz
プロジェクトには、vue add vuetify でVuetifyをインストールしたはず。
vue add vuetify
下記、Vuetifyの公式ページにしたがって、テスト環境を整えた。
セットアップファイルを作成した。
import Vue from 'vue' import vuetify from 'vuetify' Vue.use(vuetify)
実際は、Vuetifyの公式ページの手順通りにユニットテストの環境構築を進めて、いざテストすると「Vuetifyのモジュールが見つからない」って怒られた。
ここで長い時間はまった。
node_moduleを確認すると、vuetifyがない。 （node_moduleにはないがアプリケーションは動く。テストだと、モジュールが見つからないと言われる）
なので、Vuetifyをアンインストールして、npm install vuetifyで再インストールして、再度テストを実行したところ、動いた。
npm install vuetify
node_moduleにも、vuetifyがあった。
たしか、最初はvue add vuetifyでvuetifyを入れた気がするがそれが原因？（うる覚え）
もう一度、vue add vuetifyで作ったプロジェクトに対してテストして、同じような現象が起こるかを確認すればいいのだが、確認していません！orz
エンジニアの皆様、いかがお過ごしでしょうか。 エンジニアであれば3度の飯よりプレゼンが好き！なんて変態も少なくないと思います。 しかし、コロナ禍でリモートのプレゼンばかり・・・いまいち盛り上がりませんよね。 例えば、 画面越しに話を振ってシーンとなってしまった。 軽妙なジョークを飛ばしても返ってくるのはPCのファンの音だけ。 こんな悲惨な目にあった人もいるのではないでしょうか。（私です） そこで、あの楽しかったプレゼンを取り戻すべくWebサービスを作ってみました。 Slide Act https://slide-act.web.app/ Slide Actと名付けました。 Activation（活性化）とかAct（演劇）とかまぁそのへん掛けた感じです。 それではSlide Actのイカした機能を紹介します。 リアルタイムメッセージング機能 参加者がメッセージを送信すると、全員の画面に共有されます。 以下は参加者の画面です。 発表者の画面にも共有されます。（発表者はフルスクリーン） スライド連動機能 発表者がスライドを動かすと参加者が見てるスライドも連動して同じ画面になります。 以上。 機能としてはそれだけですが、アイデア次第で色々使い道があると思っています。 私が使ったときはこんな感じでした。 最初に拍手をタイピングしてもらう 問いかけに回答してもらう 4択クイズに答えてもらう 笑い声をタイピングしてもらう 発表中に思ったこと呟いてもらう ヤジ 荒らし いい使い方思いついたら教えてください。 使い方 Slide Actのページに使い方は載っていますが、書くことがないのでここで説明します。 全部で4ステップです。超簡単。 Step1 スライドのPDF化 まずPowerPointなり、Googleスライドなりでスライドを作成します。 それぞれのエクスポート機能でPDFに変換してください。 Step2 PDFのアップロード 作成したPDFをSlide Actにアップロードします。 ドラッグ&ドロップか「ファイルを選択」ボタンからアップロードできます。 Step3 参加者用URLの配布 PDFをアップロードすると参加者用URLが表示されるので、URLを配布してください。 参加者がURL先に進むと、メッセージ機能付きのスライドページが表示されます。 最初に軽く拍手の音でも打ってもらうと良いです。 Step4 Act! あとはActボタンを押すとフルスクリーンになるのでキレのあるジョークを飛ばしてください。 きっとwが画面を埋め尽くすでしょう。 がんばったこと とにかくストレスフリーで使えることを意識しました。 アカウント登録なし、ダウンロードなし、簡単アップロード、スライドと同じ操作感、それから、うーん、いや、それぐらいですね。 え？PDF化がストレス？ すみません、パワポ以外にも対応したかったのでこうなっちゃいました。 いずれ自動でPDF化させます。多分。おそらく。 動作確認済みのスライド 以下のスライドで動作確認しています。 Microsoft Power Point Google Slide beautiful.ai beautiful.aiは洒落たスライド簡単に作れるのでおすすめです。 https://www.beautiful.ai/ アーキテクチャ よくあるVue.js + Firebaseです。 ほんと爆速です。開発もストレスフリー。 Vue.js Firestore Firebase Hosting Firebase Storage 注意（大丈夫だと思うけど・・念のため） アップした資料は基本的に閲覧用URLを知っている人だけに共有されます。 が、私は全ファイル見れます。 当たり前ですが機密情報とか個人情報とか入った資料はアップしないでください。 最後に 自分で何度か使ってみましたが、楽しくプレゼンできました。 結局ジョークは滑りました。コロナのせいじゃなかったみたいです。 もちろん対面でも使えますので是非使ってみてください。
エンジニアの皆様、いかがお過ごしでしょうか。 エンジニアであれば3度の飯よりプレゼンが好き！なんて変態も少なくないと思います。 しかし、コロナ禍でリモートのプレゼンばかり・・・いまいち盛り上がりませんよね。
例えば、
こんな悲惨な目にあった人もいるのではないでしょうか。（私です） そこで、あの楽しかったプレゼンを取り戻すべくWebサービスを作ってみました。
https://slide-act.web.app/
Slide Actと名付けました。 Activation（活性化）とかAct（演劇）とかまぁそのへん掛けた感じです。 それではSlide Actのイカした機能を紹介します。
参加者がメッセージを送信すると、全員の画面に共有されます。 以下は参加者の画面です。 発表者の画面にも共有されます。（発表者はフルスクリーン）
発表者がスライドを動かすと参加者が見てるスライドも連動して同じ画面になります。
機能としてはそれだけですが、アイデア次第で色々使い道があると思っています。 私が使ったときはこんな感じでした。
いい使い方思いついたら教えてください。
Slide Actのページに使い方は載っていますが、書くことがないのでここで説明します。 全部で4ステップです。超簡単。
まずPowerPointなり、Googleスライドなりでスライドを作成します。 それぞれのエクスポート機能でPDFに変換してください。
作成したPDFをSlide Actにアップロードします。 ドラッグ&ドロップか「ファイルを選択」ボタンからアップロードできます。
PDFをアップロードすると参加者用URLが表示されるので、URLを配布してください。
参加者がURL先に進むと、メッセージ機能付きのスライドページが表示されます。
最初に軽く拍手の音でも打ってもらうと良いです。
あとはActボタンを押すとフルスクリーンになるのでキレのあるジョークを飛ばしてください。 きっとwが画面を埋め尽くすでしょう。
とにかくストレスフリーで使えることを意識しました。 アカウント登録なし、ダウンロードなし、簡単アップロード、スライドと同じ操作感、それから、うーん、いや、それぐらいですね。 え？PDF化がストレス？ すみません、パワポ以外にも対応したかったのでこうなっちゃいました。 いずれ自動でPDF化させます。多分。おそらく。
以下のスライドで動作確認しています。
beautiful.aiは洒落たスライド簡単に作れるのでおすすめです。 https://www.beautiful.ai/
よくあるVue.js + Firebaseです。 ほんと爆速です。開発もストレスフリー。
アップした資料は基本的に閲覧用URLを知っている人だけに共有されます。 が、私は全ファイル見れます。 当たり前ですが機密情報とか個人情報とか入った資料はアップしないでください。
自分で何度か使ってみましたが、楽しくプレゼンできました。 結局ジョークは滑りました。コロナのせいじゃなかったみたいです。 もちろん対面でも使えますので是非使ってみてください。
はじめに vue.jsでv-ifを使ったので備忘録として記事を作成 v-ifとは 要素の表示・非表示を操作することができる 表示：true 非表示：false 実装方法 一部の要素を非表示にしたい場合はfalseを指定する sample1.vue <input v-if='false' /> 非表示にしたい要素が複数ある場合はtemplateで囲む sample2.vue <template v-if='false'> <input /> <input /> <input /> </template> 参考 https://jp.vuejs.org/v2/guide/conditional.html
vue.jsでv-ifを使ったので備忘録として記事を作成
要素の表示・非表示を操作することができる
表示：true 非表示：false
一部の要素を非表示にしたい場合はfalseを指定する
<input v-if='false' />
非表示にしたい要素が複数ある場合はtemplateで囲む
<template v-if='false'> <input /> <input /> <input /> </template>
https://jp.vuejs.org/v2/guide/conditional.html
