vue.js

vue.js

Vue.jsのv-showディレクティブ

Vue.jsにはいろいろディレクティブと呼ばれるものがあります。 このディレクティブはhtmlタグ内に記述できます。 今回はv-showディレクティブについて勉強してみたのでまとめてみます。 書き方は v-show="条件式" という感じで...
vue.js

Vue.jsの算出プロパティcomputed

Vue.jsの算出プロパティcomputed Vue.jsのmethodsプロパティと似ているプロパティでcomputedというプロパティがあります。算出プロパティと呼ばれているようです。 上記ではempnameが算出プロパティ名です。評価...
vue.js

Vue.jsのfilterメソッドの使い方

Vue.jsのfilterメソッドの使い方 filterメソッドを使うと、メソッド名通りにfilterしてデータを加工してくれます。 登録方法は2通りあります。 1つ目は、Vue.filterで登録します。 第一引数 第二引数 フィルター名...
vue.js

Vue.jsのmethodsプロパティ

「Vue.jsのリアクティブを実感してみます」でなんとなくVue.jsを触ってみました。 今回はVueコンポーネントにあるmethodsプロパティを使用してみます。 イベントハンドラ(v-onディレクティブ)という機能を使用してmethod...
vue.js

Vue.jsのリアクティブを実感してみます

Vue.jsはnpmからインストールしなくてもCDNですぐに勉強することができます。 idとel(多分エレメントの略)を紐づけます。{{~}}はmustache(マスタッシュ)と呼びます。dataには、app.priceというようにしてアク...
vue.js

Failed to resolve loader: ts-loader

Failed to resolve loader: ts-loader Failed to resolve loader: ts-loaderってエラーが出たのですが、これで解消されました。 npm install ts-loader --...
vue.js

Module parse failed: Unexpected character ‘@’

Module parse failed: Unexpected character '@' Module parse failed: Unexpected character '@'ってエラーが出たのですが、これで解消されました。 $npm...
vue.js

Module Error (from ./node_modules/eslint-loader/index.js)

Module Error (from ./node_modules/eslint-loader/index.js) Module Error (from ./node_modules/eslint-loader/index.js)ってエラー...
Amplify

AWS Amplifyを使って静的ファイルを扱う

AWS AmplifyのStorageを利用して静的ファイルを扱います。 Authenticationを利用した認証については、以下を参照してください。 1.AWS Amplifyを使ってサインインを実装する-1 2.AWS Amplify...
vue.js

[vue.js] fileアップロード用のdrag&dropエリアを持つコンポーネントを作成する

vue.jsでdrag&dropを使用したアップロード用コンポーネントを作っていきます。 環境等 項目 バージョン node v10.15.3 npm 6.4.1 vue.js 2.6.10 実装 drag&dropエリア エリアの作成 d...
Amplify

AWS Amplifyを使ってサインインを実装する-4

今回はサインインエラーの対応を記載します。 合わせてパスワードを忘れた際のページを作成しています。 Multi-Factor Authentication (MFA)は扱いません。 前回のAWS Amplifyを使ってサインインを実装する-...
Amplify

AWS Amplifyを使ってサインインを実装する-3

Authenticationを利用してサインアウトを実装していきます。 前回のAWS Amplifyを使ってサインインを実装する-2 に追加していきます。 環境等 項目 バージョン node v10.15.3 npm 6.4.1 @aws-...
Amplify

AWS Amplifyを使ってサインインを実装する-2

Authenticationを利用してサインアップを実装していきます。 前回のAWS Amplifyを使ってサインインを実装する-1 に追加していきます。 環境等 項目 バージョン node v10.15.3 npm 6.4.1 @aws-...
Amplify

AWS Amplifyを使ってサインインを実装する-1

Authenticationを利用してサインインを実装していきます。 遅くなりましたが、Amplifyで以下のことが可能です。AWS Black Belt Online Seminar AWS Amplifyより Analystics ユー...
JavaScript

ag-gridのLoadingオーバーレイをカスタマイズ。

ag-gridのLoadingオーバーレイをカスタマイズ。 ag-gridのデフォルトはLoadingと文字が表示されますが、今回は簡単に簡単なLoadingを実装する。で紹介したepic-spinnersを利用してみます。 Loading...
JavaScript

ag-gridでソートやフィルタを利用する。

ag-gridでは簡単にソートやフィルタを利用することが可能です。 簡単に追加可能ですので、ag-gridの列幅をgrid幅に合わせて表示する。のコードに追加してみましょう。 ソートを追加する。 enableSortingを指定をtrueに...
JavaScript

ag-gridの列表示をCellRendrerを作成して変更する。

ag-gridの列表示をCellRendrerを作成して変更する。 ag-gridでは列の表示方法を変更することが可能です。 また、vue,react,angularなどを利用して作成することが可能となっています。 今回は、vueを使用して...
JavaScript

簡単にLoadingを実装する。

簡単にLoadingを実装する。 vue.jsコンポーネントとして提供しているepic-spinnerを使用すると、簡単にかっこいいLoadingを実装できます。 epic-spinnerをインストール npm installするだけです。...
JavaScript

ag-gridで列を消せるけど邪魔。

ag-gridでヘッダー列をドラッグしてgrid外に移動させると、列を消すことが可能です。 しかし、消されたくはないので、消えないようにする方法を記載します。 列削除を無効にする。 列削除を無効にするには、suppressDragLeave...
JavaScript

ag-gridの列幅をgrid幅に合わせて表示する。

前回記事のag-gridで大量データを軽快に表示する。で作成したgridは、各列が左に詰まっており、右に無駄なスペースができます。 そこで、今回はgridの幅に合わせて列幅を大きくします。 列幅をgridに合わせる GridAPI size...
JavaScript

ag-gridで大量データを軽快に表示する。

ag-gridで大量データを軽快に表示する。 ag-gridは高機能なグリッドライブラリで、大量データでも軽快に動作します。(デモ) Vue.js,React,Angularなどに対応しているため、簡単に利用することができます。 今回はこの...
vue.js

vuetifyでマテリアルデザインを導入

マテリアルデザインはGoogleが提唱しているデザインシステムです。 今回紹介する、vuetifyはこのマテリアルデザインを利用したVue Component Frameworkです。 card/form/date pickerなどが用意さ...
vue.js

vue cliでui?

vueではプロジェクトを始めるために、vue cli 3が用意されています。 cliとあるようにコマンドなのですが、なんとUIが用意されておりブラウザからプロジェクトを作成したり設定を変更したりすることが可能です。 多言語化対応しており、日...
vue.js

Storybookでコンポーネントカタログを作る

Storybookを利用することで、プロジェクトで作成したコンポーネントのカタログを作ることができます。 どういうコンポーネントかも視覚的にわかりドキュメントとしていいものになると思います。 今回は、vue.jsでStorybookを利用し...
JavaScript

[vue.js]単一ファイルコンポーネントでコンポーネントを定義

vue.jsではコンポーネントを定義する方法として、単一ファイルコンポーネントがあります。 これは、1コンポーネントを1ファイルで管理することができる物となります。 このファイルでは、コンポーネントで使用するHTML,javascript,...
node.js

npxでローカルパッケージを実行できるんです!

gulpとか使用するとき、install方法として、npm install -g gulpとか書いてますよね。 これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。 ローカルインストールすると、gulpコマ...
JavaScript

vue-cliを使ってvue.jsを使ったプロジェクトの開発環境を整える

vue-cliはvue.jsを使用したプロジェクトの開発環境を作成する公式のツールです。 環境 項目 バージョン node.js 8.11.1 vue-cli 2.9.3 注意 vue.js + typescriptについては記載していませ...