vue.jsVue.jsのv-showディレクティブ Vue.jsにはいろいろディレクティブと呼ばれるものがあります。このディレクティブはhtmlタグ内に記述できます。今回はv-showディレクティブについて勉強してみたのでまとめてみます。書き方はv-show="条件式"という感じです。条件式...2019.11.20vue.js
vue.jsVue.jsの算出プロパティcomputed Vue.jsの算出プロパティcomputedVue.jsのmethodsプロパティと似ているプロパティでcomputedというプロパティがあります。算出プロパティと呼ばれているようです。上記ではempnameが算出プロパティ名です。評価され...2019.11.19vue.js
vue.jsVue.jsのfilterメソッドの使い方 Vue.jsのfilterメソッドの使い方filterメソッドを使うと、メソッド名通りにfilterしてデータを加工してくれます。登録方法は2通りあります。1つ目は、Vue.filterで登録します。第一引数第二引数フィルター名関数フィルタ...2019.11.18vue.js
vue.jsVue.jsのmethodsプロパティ 「Vue.jsのリアクティブを実感してみます」でなんとなくVue.jsを触ってみました。今回はVueコンポーネントにあるmethodsプロパティを使用してみます。イベントハンドラ(v-onディレクティブ)という機能を使用してmethodsプ...2019.11.18vue.js
vue.jsVue.jsのリアクティブを実感してみます Vue.jsはnpmからインストールしなくてもCDNですぐに勉強することができます。idとel(多分エレメントの略)を紐づけます。{{~}}はmustache(マスタッシュ)と呼びます。dataには、app.priceというようにしてアクセ...2019.11.16vue.js
vue.jsFailed to resolve loader: ts-loader Failedtoresolveloader:ts-loaderFailedtoresolveloader:ts-loaderってエラーが出たのですが、これで解消されました。npminstallts-loader--save-dev2019.11.15vue.js
vue.jsModule parse failed: Unexpected character ‘@’ Moduleparsefailed:Unexpectedcharacter'@'Moduleparsefailed:Unexpectedcharacter'@'ってエラーが出たのですが、これで解消されました。$npminstall--sav...2019.11.15vue.js
vue.jsModule Error (from ./node_modules/eslint-loader/index.js) ModuleError(from./node_modules/eslint-loader/index.js)ModuleError(from./node_modules/eslint-loader/index.js)ってエラーが出たのですが...2019.11.15vue.js
AmplifyAWS Amplifyを使って静的ファイルを扱う AWSAmplifyのStorageを利用して静的ファイルを扱います。Authenticationを利用した認証については、以下を参照してください。1.AWSAmplifyを使ってサインインを実装する-12.AWSAmplifyを使ってサイ...2019.07.17AmplifyAWSJavaScriptvue.js
vue.js[vue.js] fileアップロード用のdrag&dropエリアを持つコンポーネントを作成する vue.jsでdrag&dropを使用したアップロード用コンポーネントを作っていきます。環境等項目バージョンnodev10.15.3npm6.4.1vue.js2.6.10実装drag&dropエリアエリアの作成divタグで適当な大きさのボ...2019.06.12vue.js
AmplifyAWS Amplifyを使ってサインインを実装する-4 今回はサインインエラーの対応を記載します。合わせてパスワードを忘れた際のページを作成しています。Multi-FactorAuthentication(MFA)は扱いません。前回のAWSAmplifyを使ってサインインを実装する-3に追加して...2019.06.06AmplifyAWSvue.js
AmplifyAWS Amplifyを使ってサインインを実装する-3 Authenticationを利用してサインアウトを実装していきます。前回のAWSAmplifyを使ってサインインを実装する-2に追加していきます。環境等項目バージョンnodev10.15.3npm6.4.1@aws-amplify/cli...2019.06.05AmplifyAWSvue.js
AmplifyAWS Amplifyを使ってサインインを実装する-2 Authenticationを利用してサインアップを実装していきます。前回のAWSAmplifyを使ってサインインを実装する-1に追加していきます。環境等項目バージョンnodev10.15.3npm6.4.1@aws-amplify/cli...2019.06.03AmplifyAWSvue.js
AmplifyAWS Amplifyを使ってサインインを実装する-1 Authenticationを利用してサインインを実装していきます。遅くなりましたが、Amplifyで以下のことが可能です。AWSBlackBeltOnlineSeminarAWSAmplifyよりAnalysticsユーザのセッションや属...2019.05.26AmplifyAWSvue.js
JavaScriptag-gridのLoadingオーバーレイをカスタマイズ。 ag-gridのLoadingオーバーレイをカスタマイズ。ag-gridのデフォルトはLoadingと文字が表示されますが、今回は簡単に簡単なLoadingを実装する。で紹介したepic-spinnersを利用してみます。Loadingオー...2019.05.11JavaScriptvue.js
JavaScriptag-gridでソートやフィルタを利用する。 ag-gridでは簡単にソートやフィルタを利用することが可能です。簡単に追加可能ですので、ag-gridの列幅をgrid幅に合わせて表示する。のコードに追加してみましょう。ソートを追加する。enableSortingを指定をtrueに設定す...2019.05.11JavaScriptvue.js
JavaScriptag-gridの列表示をCellRendrerを作成して変更する。 ag-gridの列表示をCellRendrerを作成して変更する。ag-gridでは列の表示方法を変更することが可能です。また、vue,react,angularなどを利用して作成することが可能となっています。今回は、vueを使用して作成し...2019.05.11JavaScriptvue.js
JavaScript簡単にLoadingを実装する。 簡単にLoadingを実装する。vue.jsコンポーネントとして提供しているepic-spinnerを使用すると、簡単にかっこいいLoadingを実装できます。epic-spinnerをインストールnpminstallするだけです。npmi...2019.05.11JavaScriptvue.js
JavaScriptag-gridで列を消せるけど邪魔。 ag-gridでヘッダー列をドラッグしてgrid外に移動させると、列を消すことが可能です。しかし、消されたくはないので、消えないようにする方法を記載します。列削除を無効にする。列削除を無効にするには、suppressDragLeaveHid...2018.09.02JavaScriptvue.js
JavaScriptag-gridの列幅をgrid幅に合わせて表示する。 前回記事のag-gridで大量データを軽快に表示する。で作成したgridは、各列が左に詰まっており、右に無駄なスペースができます。そこで、今回はgridの幅に合わせて列幅を大きくします。列幅をgridに合わせるGridAPIsizeColu...2018.09.02JavaScriptvue.js
JavaScriptag-gridで大量データを軽快に表示する。 ag-gridで大量データを軽快に表示する。ag-gridは高機能なグリッドライブラリで、大量データでも軽快に動作します。(デモ)Vue.js,React,Angularなどに対応しているため、簡単に利用することができます。今回はこのag-...2018.09.02JavaScriptvue.js
vue.jsvuetifyでマテリアルデザインを導入 マテリアルデザインはGoogleが提唱しているデザインシステムです。今回紹介する、vuetifyはこのマテリアルデザインを利用したVueComponentFrameworkです。card/form/datepickerなどが用意されているの...2018.08.05vue.js
vue.jsvue cliでui? vueではプロジェクトを始めるために、vuecli3が用意されています。cliとあるようにコマンドなのですが、なんとUIが用意されておりブラウザからプロジェクトを作成したり設定を変更したりすることが可能です。多言語化対応しており、日本語で使...2018.08.05vue.js
vue.jsStorybookでコンポーネントカタログを作る Storybookを利用することで、プロジェクトで作成したコンポーネントのカタログを作ることができます。どういうコンポーネントかも視覚的にわかりドキュメントとしていいものになると思います。今回は、vue.jsでStorybookを利用してみ...2018.06.03vue.js
JavaScript[vue.js]単一ファイルコンポーネントでコンポーネントを定義 vue.jsではコンポーネントを定義する方法として、単一ファイルコンポーネントがあります。これは、1コンポーネントを1ファイルで管理することができる物となります。このファイルでは、コンポーネントで使用するHTML,javascript,cs...2018.06.03JavaScriptvue.js
node.jsnpxでローカルパッケージを実行できるんです! gulpとか使用するとき、install方法として、npminstall-ggulpとか書いてますよね。これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。ローカルインストールすると、gulpコマンドを直接...2018.04.21node.jsnpmreact.jsvue.js
JavaScriptvue-cliを使ってvue.jsを使ったプロジェクトの開発環境を整える vue-cliはvue.jsを使用したプロジェクトの開発環境を作成する公式のツールです。環境項目バージョンnode.js8.11.1vue-cli2.9.3注意vue.js+typescriptについては記載していません。vue-cliの3...2018.04.01JavaScriptvue.js