- 投稿日：2022-02-28T20:09:31+09:00
Uncaught TypeError: Vue is not a constructor
事象 : CDNを使ってVueを表示できない はじめてのVue.jsにチャレンジしようと思って、本に載っているサンプルコードをHTMLファイルに書いてブラウザで表示してみた・・・が、{{ message }}がそのまま表示されている。 <!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue"></script> </head> <body> <h1>Vue.js</h1> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> 原因 : CDNの参照先はVue3だから 参考元にした本に書いてあったコードは、Vue2の書き方。 CDNの参照先は、Vue3であった。 CDNの「https://unpkg.com/vue 」をブラウザでアクセスするとリダイレクトされて「https://unpkg.com/vue@3.2.31/dist/vue.global.js 」になる、というわけでCDNが見ているVueのバージョンは3。 そして、書き方は変わったようだ。 参考 : はじめに | Vue.js // Vue2の書き方 var app = new Vue({...}) // Vue3の書き方 const app = {...} Vue.createApp(app).mount('#app') 対応 : Vue3の書き方に変える ど素人的に新しいも何も・・・何もしりませぬ。 <!--...省略...--> <script> const app = { data() { return { message: 'Hello Vue!' } } } Vue.createApp(app).mount('#app') </script> <!--...省略...--> おっ、表示された。
- 投稿日：2022-02-28T19:19:17+09:00
Vue2環境でのグラフライブラリまとめ
先日、vue２.０の環境でさまざまなグラフを選定する機会があったので、備忘録として残しておきます。 今回検討したライブラリ 1.Chart.js 2.ApexChart 3.HighCharts 4.D3.js Chart.js Chart.js 一番有名？なライブラリ 細かい設定を入れずとも綺麗なグラフを出力してくれる。 利点 GitHub上のスターの数、Fork数などから今回のライブラリではトップクラスの人気を持っていることが窺える Web上のナレッジもかなり多く、Qiita上でも多数の有益な情報を発見可能 欠点 標準的な見た目としては後に紹介するものよりやや簡素 描写方式がCanvasであるため、CSSによって後から一部分に手を加えにくい 公式サイトでは仕様を一通り記載しているが、完成コードがやや少ない感がある 仕様外の実装をしようとすると想定以上に工数を持っていかれる可能性あり（マウスホバー時のツールチップのデザイン変更等） サンプルコード サンプル <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> ApexChart ApexChart おそらくChart.jsに次ぐ人気を誇る無料ライブラリ 標準機能でズームやグラフデータのダウンロード等の機能を付加しやすい 利点 GitHub上のスターの数、Fork数などから今回のライブラリでは（Chart.jsに次ぎ）トップクラスの人気を持っていることが窺える Web上のナレッジも多め（だが、Chart.jsと比較すると日本語の情報が少ない傾向） 上記に記載の通り、標準で機能が多いため必要な機能のカスタマイズはしやすい（任意の部分に基準線を引いたりする等はChart.jsと比較して簡単） 標準でリッチな見た目にしやすい 複数のグラフの組み合わせ例や応用的な記法についても公式にいくつかサンプルコードが載っている SVG形式での描写なためCSS等で後から変化させやすい 欠点 標準で機能が多い分、ライブラリ自体のファイルサイズがやや多め JST周りの時刻の仕様など、知らなければ躓きやすいポイントがいくつか存在する サンプルコード サンプル var options = { chart: { type: 'line' }, series: [{ name: 'sales', data: [30,40,35,50,49,60,70,91,125] }], xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] } } var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); HighCharts HighCharts 上記二点と違い商用利用は有料だが、標準的なデザインのセンス等が光る 利点 Web上のナレッジがやや多く、Qiita上でも有益な情報をいくつか発見可能 商用の場合１年間のアドバンスユーザーライセンスも付与されるため、かなり手厚いサポートを受けることが可能（電話対応や緊急Hotfix等） 標準でのデザインはかなり完成されており、機能も申し分ないほどに充実している 欠点 有料なため、予算の厳しいプロジェクトでは採用を見送られる可能性がある（20デベロッパーライセンスで$535＋初年度のみアドバンスサポート付） サンプルコード サンプル Highcharts.getJSON( 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json', function (data) { Highcharts.chart('container', { chart: { zoomType: 'x' }, title: { text: 'USD to EUR exchange rate over time' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: 'Exchange rate' } }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ type: 'area', name: 'USD to EUR', data: data }] }); } ); D3.js D3.js C3.js 利点 高機能（これは下記の賛否にもつながってくるが、グラフ以外の部分でも活用できる可能性はあるかもしれない 非常にカスタマイズの幅が広い 欠点 D3自体はグラフライブラリではないため、グラフに特化した他のライブラリと比較するとあまり描きやすくはない 学習コストがやや高い 上記点より、開発スピード的にはやや遅くなる可能性がある？ C3‘は‘上記の欠点がなく書きやすいが、そのぶん拡張性を失ってしまっている 標準ではやや見た目が簡素 サンプルコード サンプル // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bollinger-bands function BollingerChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value N = 20, // number of periods for rolling mean K = 2, // number of standard deviations to offset each band curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = ["#aaa", "green", "blue", "red"], // color of the 4 lines strokeWidth = 1.5, // width of lines, in pixels strokeLinecap = "round", // stroke line cap of lines strokeLinejoin = "round" // stroke line join of lines } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; // Construct scales and axes. const xScale = d3.scaleUtc(xDomain, xRange); const yScale = d3.scaleLinear(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(null, yFormat); // Construct a line generator. const line = d3.line() .defined((y, i) => !isNaN(X[i]) && !isNaN(y)) .curve(curve) .x((y, i) => xScale(X[i])) .y((y, i) => yScale(y)); function bollinger(N, K) { return values => { let i = 0; let sum = 0; let sum2 = 0; const Y = new Float64Array(values.length).fill(NaN); for (let n = Math.min(N - 1, values.length); i < n; ++i) { const value = values[i]; sum += value, sum2 += value ** 2; } for (let n = values.length; i < n; ++i) { const value = values[i]; sum += value, sum2 += value ** 2; const mean = sum / N; const deviation = Math.sqrt((sum2 - sum ** 2 / N) / (N - 1)); Y[i] = mean + deviation * K; const value0 = values[i - N + 1]; sum -= value0, sum2 -= value0 ** 2; } return Y; }; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic; overflow: visible;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); svg.append("g") .attr("fill", "none") .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-linecap", strokeLinecap) .selectAll() .data([Y, ...[-K, 0, +K].map(K => bollinger(N, K)(Y))]) .join("path") .attr("stroke", (d, i) => colors[i]) .attr("d", line); return svg.node(); } 結論 無料ライセンスであればApexChart、有料でもよければ HighChartsが良さそう？
- 投稿日：2022-02-28T16:43:47+09:00
【Vue】v-forで配列を指定回数だけループさせて出力させる
環境 Vue２ はじめに 今回はVue.jsの記事になります。案件の中で要素を最初の2件だけ表示させてほしいというご要望をいただきました。メソッドを使い配列フィルタリングしたりといろいろな方法を試したので書き留めておこうと思います。 v-forについて v-forディレクティブの使い方 v-forはいわゆるfor分の役割を持ちます。 HTMLタグの属性にv-for="要素(命名は自由) in 定義した配列"を定義 index.vue <div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> v-forは２つ目の引数にindexを取れる 以下の様に第２引数を指定することによって、indexを取ることができます。indexの名前は自由につけてOK index.vue <div id="app"> <ul> <li v-for="(item, index) in items">{{ item }}</li> </ul> </div> :keyを設定する :key=””で各要素を一意に識別するためのkey属性を設定する。 ここでkey属性を設定しないとエラーが吐き出されます。 Elements in iteration expect to have 'v-bind:key' directives index.vue <div id="app"> <ul> <li v-for="(item, index) in items" :key="item">{{ item }}</li> </ul> </div> 今回のコード index.vue <template> <div id="app"> <ul> <li v-for="member in memberis" :key="member.id"> {{ member.id}}-{{ member.name }} <p> 保有スキル：<span v-for="skile in member.skiles" :key="skile.id">{{ skile.label }}</span> </p> </li> </ul> </div> </template> <script> export default { name: "App", data() { return { memberis: [ { id: 1, name: "鈴木", skiles: [ { id: 1, label: "PHP" }, { id: 2, label: "Ruby" }, { id: 3, label: "Vue" }, { id: 4, label: "JavaScript" } ] }, { id: 2, name: "田中", skiles: [ { id: 1, label: "Java"}, { id: 2, label: "AWS"}, { id: 3, label: "JavaScript"}, { id: 4, label: "GCP" }, { id: 5, label: "PHP" } ] }, { id: 3, name: "佐藤", skiles: [ { id: 1, label: "React"}, { id: 2, label: "Ruby"}, {id: 3, label: "Laravel"} ] }, ] }; }, }; </script> <style> ul { list-style : none; } li { margin: 10px; padding: 10px; border: 1px solid #000; } span { margin: 5px; } </style> さっそく修正していきます 修正内容は、保有スキルの表示を２つにして欲しいというものです。 いろいろと調べてみた結果 配列をフィルタリングした後にv-forでループさせれる v-forとv-ifを組み合わせる 上記2点の記事が多くでてきました。 今回は前者の配列をフィルタリングする方法を使って修正していきます。 実装 今回は配列が入れ子構造になっているので、親をv-forで回しつつスキルのv-forでフィルタリングをさせる実装になります。 コード index.vue <template> <div id="app"> <ul> <li v-for="member in memberis" :key="member.id"> {{ member.id}}-{{ member.name }} <!-- フィルタリングメソッドを追加 --> <p> 保有スキル：<span v-for="skile in limitCount(member.skiles)" :key="skile.id">{{ skile.label }}</span> </p> </li> </ul> </div> </template> <script> export default { name: "App", data() { return { memberis: [ { id: 1, name: "鈴木", skiles: [ { id: 1, label: "PHP" }, { id: 2, label: "Ruby" }, { id: 3, label: "Vue" }, { id: 4, label: "JavaScript" } ] }, { id: 2, name: "田中", skiles: [ { id: 1, label: "Java"}, { id: 2, label: "AWS"}, { id: 3, label: "JavaScript"}, { id: 4, label: "GCP" }, { id: 5, label: "PHP" } ] }, { id: 3, name: "佐藤", skiles: [ { id: 1, label: "React"}, { id: 2, label: "Ruby"}, {id: 3, label: "Laravel"} ] }, ] }; }, // フィルタリングするメソッドを追加 methods: { limitCount (lists) { return lists.slice(0, 2) } } }; </script> <style> ul { list-style : none; } li { margin: 10px; padding: 10px; border: 1px solid #000; } span { margin: 5px; } </style> 実装内容 文字列や配列などからデータの一部分だけ取り出せるメソッsliceを使ってメソッドを定義します。 第一引数に開始位置、第二引数に終了位置を指定します。今回は表示させたい値は最初の２つなので開始位置0、終了位置2を指定しています。 こうすることで表示させたい数の変更も簡単にできます。 後は、フィルタリングしたい配列を指定してメソッドを呼び出せば完了です。 今回は以上となります。
- 投稿日：2022-02-28T15:21:49+09:00
Vue CLIを使用したVueプロジェクトの最初期セットアップ
概要 現在個人開発プロジェクトとして「IT育成カリキュラム(仮)」の構成を検討しています。 本プロジェクトの概要についてはこちらの記事を合わせてご覧ください。 その中で技術選定をしている途中ではありますが、ある程度固まってきたので備忘も兼ねて最初期のセットアップについてシェアしようと思います。 使用技術 Vue 3.x Vue CLI ESLint Prettier normalize.css プロジェクトのベースにVue 3.x、テンプレート構築にVue CLIを採用。 フォーマットツールでESLintとPrettierを採用しています。 選定基準は過去プロジェクトでの使用経験があり、感覚的に慣れているというシンプルな理由です。 参考文献 https://reffect.co.jp/vue/eslint#eslintrcjs https://stackoverflow.com/questions/71205264/component-name-temp-should-always-be-multi-word-vue-multi-word-component-names https://eslint.vuejs.org/rules/multi-word-component-names.html 設定手順 node.js、npm or yarnがインストールされている前提で、Vue CLIをインストールします。 （今回はnpmコマンドベースで記載します） npm install -g @vue/cli インストールできているか確認、バージョンを参照します。 vue --version ここまでできていたらプロジェクトを管理するフォルダに移動し、下記を実行します。 vue create [プロジェクト名] ここからはVUE CLIのセットアップに移ります。 今回下記のように設定を行いました。 →自身である程度カスタムしてみたかったため、一番下を選択 →画面内リンクやフォーマッターを利用するため「Babel」「Router」「Vuex」「Linter / Formatter」を選択 プロジェクトのベースバージョンは「3.x」 →あまり理由はないんですがヒストリーモードは「なし」 →フォーマットの設定は「Prettier」 →Lintのタイミングは作業時よりも任意のタイミングで行いたいため「on commit」時に設定 →Babel等各種ライブラリの設定方法。package.jsonは使いません。 ここまでうまくいけばプロジェクトが作成され、npm run serveまたはyarn serveコマンドで http://localhost:8080/ にローカルアプリが出力されるようになります。（デフォルトの場合） スタイルシートの設定手順 最初のセットアップ時、デフォルトでは次のように記述されています。 src/App.vue <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } nav { padding: 30px; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; } </style> シンプルな構成ならこのままでも構わないですが、規模が大きくなるにつれて管理が大変になってくるのでcss部分は分けたいと思います。 今回sassベースで作りたいので、下記パッケージを導入しました。 node-sass sass-loader # node-sass npm install node-sass # sass-loader npm install sass-loader sass webpack --save-dev 次に上記を任意のscssに移行します。 src/assets/css/style.scss にした場合、合わせてmain.jsに下記記載します。 src/main.js import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // 下記を追加 import "@/assets/css/style.scss"; createApp(App).use(store).use(router).mount("#app"); さらに「normalize.css」も使いたいので、パッケージからインストールしました。 npm install --save normalize.css こちらもmain.jsに追記し、最終的には以下の形になります。 src/main.js import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // 下記を追加 import "normalize.css/normalize.css"; import "@/assets/css/style.scss"; createApp(App).use(store).use(router).mount("#app"); Lint / Prettierのテスティング手順 今回テスティングツールにPrettierを採用していますが、.eslintrc.jsに追記することで任意のルール設定を行うことができます。 例えば「タブ２文字」「シングルクオートなし（＝ダブルクオート）」「セミコロンあり」としたい場合は次のような記述になります。 .eslintrc.js rules: { ： // 追加分 "prettier/prettier": [ "error", { tabWidth: 2, singleQuote: false, semi: true, }, ], }, この状態で一度Lintコマンドを実行してみましょう。 npm run lint --fix 自分はここまでで「Login」というコンポーネントを追加し検証していたのですが、このようなエラーが出ていました。 1:1 error Component name "Login" should always be multi-word vue/multi-word-component-names これはプラグイン「multi-word-component-names」によるもので、単独語はコンポーネント名に使えないというものでしたが、自由度を高めたいため公式ドキュメントで参照したignoreリストを追記してコンポーネントと連携させることで解消できました。 src/views/Login.vue <script> export default { name: "Login", }; </script> .eslintrc.js rules: { ： // 追加分 "vue/multi-word-component-names": [ "error", { // multi-wordでなくても問題ないコンポーネント名を追加していく ignores: ["Login"], }, ], },
- 投稿日：2022-02-28T14:22:41+09:00
グレーアウトなよる
背景 フロント実装にてクリック契機等で既存画面をグレーアウトして新たな要素を出す仕組みを書いたのでその備忘録も兼ねて。 単純にモーダル機能としてだけであればBootstrapで事足りるのですがそれだと少し痒いところに手が届かないよって方向けに。。 実装例 ボタンクリックで背景グレーアウト→画像表示 Grayout.vue <template> <b-button @click="display" variant="primary" class="btn">表示</b-button> <div id="grayout" v-show="showFlag"> <div id="contents"> <!-- コンテンツを記載 --> <img id="image" :src="imgUrl"/> </div> </div> </template> <script> export default { data () { return { imgUrl: '', showFlag: false } }, methods: { display () { let random = 0 + Math.floor( Math.random() * 3 ); if (random == 0) { // 大吉 this.imgUrl = 'https://3.bp.blogspot.com/-vQSPQf-ytsc/T3K7QM3qaQI/AAAAAAAAE-s/6SB2q7ltxwg/s1600/omikuji_daikichi.png' } else if (random == 1) { // 吉 this.imgUrl = 'https://2.bp.blogspot.com/-27IG0CNV-ZE/VKYfn_1-ycI/AAAAAAAAqXw/fr6Y72lOP9s/s800/omikuji_kichi.png' } else { // 凶 this.imgUrl = 'https://4.bp.blogspot.com/-qCfF4H7YOvE/T3K7R5ZjQVI/AAAAAAAAE-4/Hd1u2tzMG3Q/s1600/omikuji_kyou.png' } this.showFlag = true } } } </script> Grayout.css <style> #grayout{ z-index:1000; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } #contents{ z-index:1001; } z-indexでコンテンツの出す層を設定できます。(数が大きい方が前面に表示) 様々な要素が重なり合う場合の厳密な制御が可能になりますが、1,2,3...で刻むよりは1,10,100,1000...とする方が後々改修する時に楽だったり単純にパッと見でわかりやすいのでおすすめ。