もふもふ技術部

IT技術系mofmofメディア

vue

Vue+c3.jsでグラフ描画してみる

実際の案件でインタラクティブな折れ線グラフ描画機能を実装する必要があったため、いくつかライブラリを調べていました。 描画するグラフでは下記のような機能を実装する方針だったので、拡張性の高いライブラリを探していたところ、c3.jsというライブラリ…

VueのComposition APIでフォームのバリデーション実装

Vue3.0で使えるようになるComposition APIでのフォームバリデーションを実装します。一般的なユーザーの登録フォームをもとに見ていくので、割と網羅的な内容になっていると思います。 実装完了したコードはこちら。 必要なライブラリの導入 CLIインストール…

Vue3 Composition APIのreactiveに触れる

Vueの新バージョン、3.0のbeta版が出たらしいので、みんな大好きTODOリストを作って書き味を試してみようと思います。 なお、完成したコードはこちらにおいてあります。よければ参考にしてください。 https://github.com/yubachiri/vue3-todo-sample CLIのイ…

Vue+Rails+CarrierWaveでS3へのダイレクトアップロード

概要 Heroku経由でS3にファイルアップロードする際、Herokuのリクエストタイムアウトは30秒に設定されているので、大容量ファイルをアップロードすると時間が足りずタイムアウトエラーとなってしまう。 そのため、Herokuで4MB以上のファイルをアップロードす…

Nuxt.js + Contentful でサクッとブログのベース的なものをつくる ローカルで動作するところまで

VuePressを使ってみようかと思ったんですが、まだちょっと整備されていないっぽい?のでもう実績のあるNuxtとContentfulの組み合わせでやろうかと。ちょっと触ってみたので、そのログです。 それぞれ公式はこちら! contentfulのnuxt integrationガイド: htt…

Nuxt.js + Vuetify でサクッと管理画面をつくってみた

Railsエンジニアの方であれば、簡単な管理画面を作る際にrails_adminやactive_adminにお世話になっている、いやなりすぎている方も多いのではないでしょうか?私のように、、、 Railsを使っていないSPAの管理画面を作ることになった時、Nuxt.js + Vuetifyと…

Vue.js + Vue Test Util + Jestでコンポーネントの単体テストを書きたい

個人的な趣味で作っているサービスをVue.js + Firebaseという構成で書かれている。 個人サービス程度にテストはいらんだろって意見もあるけども、毎日書く時間が取れない個人サービスの場合、手を入れようとしたときに自分のコードがどうなっているか覚えて…

Vue.jsはどのようにComputed Propertyの依存関係を解決しているのか

photo by Josh Hallett Vue.jsのcomputed property(以下computedと表記)がどのように依存しているdataが更新されたときだけ再計算されるのかを調べてみました。 基本的なcomputed propertyの使い方 目的の異なるcomputedが複数あるとします 依存関係が違う…

Vue.js + PWAはどの程度アプリに近いUXに出来るのか

WEBアプリだけど、UXをネイティブアプリに近づけることが出来るPWAを試してみる。 ぼくはネイティブアプリより、RailsのWEBアプリ開発の方が得意だし、世の中的にもWEBアプリの技術でネイティブ的なUXが実現出来るのは熱い。どの程度のものか確かめてみる。 …

Vue.jsで作ったサイトをFirebaseでホスティングする

前回、Vue.js + Firestoreを使用してラーメン一覧を表示するところまで作った。今度はこれをFirebaseでホスティングしてみる。 Vue.js + Firestoreでデータを取得してラーメン一覧を表示する いつもはホスティングはnetlifyを使っているんだけど、Firebaseに…

Vue.jsでFirebaseのFirestoreにアクセスしてデータを取得する

前回はvue-cli3で環境変数をどう扱うか試したので、続きをやります。 vue-cli3系を使ってvue.jsアプリケーションで環境変数を扱う 今回参考にしたページ とりあえずFirestoreにアクセス出来るところまで コンポーネントにしてみる 今回参考にしたページ Vue.…

vue-cli3系を使ってvue.jsアプリケーションで環境変数を扱う

Vue.js + Firebaseでアプリケーションを作ってみようと思ったのですが、どうにも環境変数周りでハマってしまったので、今回は環境変数の扱いのみやります。 vue-cliのバージョンを確認。2系が入ってるみたい。公式ドキュメントは3系の方が豊富に見えたので3…

Rails + Vue.jsでチャットUIっぽい吹き出しをコンポーネントにする

前回は「Rails + Vue.js + Ajaxでチャット機能っぽいサンプルを実装する」というのをやってみましたが、これに加えて吹き出しのようなチャットUIを実装し、コンポーネント化してみます。 このあたりが使いこなせるようになると、いままでバラバラのファイル…

Rails + Vue.js + Ajaxでチャット機能っぽいサンプルを実装する

前回はRails + Vue.jsで動的に画面の値を取得するサンプルを組んだような覚えがあるので、今回はVue.jsを経由してデータを登録するサンプルを実装したい。 とりあえず普通にRails単体で動くサンプルを実装 普通にRailsでindexを表示する Vue.js経由でmessage…

Rails + Vue.js + Ajaxでボタンを押したらAPIにGETリクエストしてデータを画面に表示させる

前回はひとまずRails上でVue.jsを動かすところまでやったので、今回はRails作ったサーバサイドにAjaxでリクエストして、取得した値をViewに反映する、というような実践に寄せたサンプルをやってみる。 前回の記事 Rails5.1, Vue.jsで動かしてみる | もふも…

Rails5.1, Vue.jsで動かしてみる

前回、Vue.js単独でのチュートリアルを試したので、今度はRails上で動かしてみようと思います。 ReactよりイケてるらしいのでVue.jsに入門してみた | もふもふ技術部 こちらを参考にしました。 http://qiita.com/cohki0305/items/582c0f5ed0750e60c951 http…

ReactよりイケてるらしいのでVue.jsに入門してみた

vue

Reactのコードをたまにレビューすることがあるのですが、いつも記述量多いなーと感じていました。そんなとき、Vue.jsはもっとシンプルでいいよ!という悪魔の囁きを聞いたのでReactではなくVue.jsに入門してみることにしました。 インストール チュートリア…