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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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