Visual Studio Code
VSCodeでlaunch.jsonを作成してデバッグする方法
vue.js
vue.js Vue.jsのv-showディレクティブ
Vue.jsにはいろいろディレクティブと呼ばれるものがあります。このディレクティブはhtmlタグ内に記述できます。今回はv-showディレクティブについて勉強してみたのでまとめてみます。書き方はv-show="条件式"という感じです。条件式...
vue.js Vue.jsの算出プロパティcomputed
Vue.jsの算出プロパティcomputedVue.jsのmethodsプロパティと似ているプロパティでcomputedというプロパティがあります。算出プロパティと呼ばれているようです。上記ではempnameが算出プロパティ名です。評価され...
vue.js Vue.jsのfilterメソッドの使い方
Vue.jsのfilterメソッドの使い方filterメソッドを使うと、メソッド名通りにfilterしてデータを加工してくれます。登録方法は2通りあります。１つ目は、Vue.filterで登録します。 第一引数 第二引数 フィルター名 関数...
vue.js Vue.jsのmethodsプロパティ
「Vue.jsのリアクティブを実感してみます」でなんとなくVue.jsを触ってみました。今回はVueコンポーネントにあるmethodsプロパティを使用してみます。イベントハンドラ（v-onディレクティブ）という機能を使用してmethodsプ...
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-loaderFailed to resolve loader: ts-loaderってエラーが出たのですが、これで解消されました。npm install ts-loader --sa...
vue.js Module parse failed: Unexpected character ‘@’
Module parse failed: Unexpected character '@'Module parse failed: Unexpected character '@'ってエラーが出たのですが、これで解消されました。$npm i...
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を使ってサインインを実装する-12.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エリアエリアの作成divタグで...
Amplify AWS Amplifyを使ってサインインを実装する-4
今回はサインインエラーの対応を記載します。合わせてパスワードを忘れた際のページを作成しています。Multi-Factor Authentication (MFA)は扱いません。前回のAWS Amplifyを使ってサインインを実装する-3 に...
Amplify AWS Amplifyを使ってサインインを実装する-3
Authenticationを利用してサインアウトを実装していきます。前回のAWS Amplifyを使ってサインインを実装する-2 に追加していきます。環境等 項目 バージョン node v10.15.3 npm 6.4.1 @aws-am...
Amplify AWS Amplifyを使ってサインインを実装する-2
Authenticationを利用してサインアップを実装していきます。前回のAWS Amplifyを使ってサインインを実装する-1 に追加していきます。環境等 項目 バージョン node v10.15.3 npm 6.4.1 @aws-am...
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するだけです。npm...
JavaScript ag-gridで列を消せるけど邪魔。
ag-gridでヘッダー列をドラッグしてgrid外に移動させると、列を消すことが可能です。しかし、消されたくはないので、消えないようにする方法を記載します。列削除を無効にする。列削除を無効にするには、suppressDragLeaveHid...
JavaScript ag-gridの列幅をgrid幅に合わせて表示する。
前回記事のag-gridで大量データを軽快に表示する。で作成したgridは、各列が左に詰まっており、右に無駄なスペースができます。そこで、今回はgridの幅に合わせて列幅を大きくします。列幅をgridに合わせるGridAPI sizeCol...
JavaScript ag-gridで大量データを軽快に表示する。
ag-gridで大量データを軽快に表示する。ag-gridは高機能なグリッドライブラリで、大量データでも軽快に動作します。(デモ)Vue.js,React,Angularなどに対応しているため、簡単に利用することができます。今回はこのag-...
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,cs...
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については記載していません。v...