クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Vue.js

ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと

Node.jsのフレームワークExpress。存在は前から知っていたけどイマイチ何ができる物なのかわかっていなかった。以前の記事でRest APIについて調べたことをキッカケに、ExpressとJSフレームワーク(Vue、React、Angularなど)の関係についても調べました。そ…

【Vue.js】vuex-persistedstateでデータをローカルストレージに保存する

Vue.jsの続きです。前回はVuexのミューテーション(mutations)に設定した「いいね」アイコンのカウント処理を読み込んで実行しました。今回はvuex-persistedstateでそのカウント数をローカルストレージに保存してみたく。それでは行きましょう!

【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行する

Vuexの続きです。前回はVuexストアのステートに保管したデータを読み込みました。今回はミューテーション(mutations)に設定した処理を読み込んで実行してみます。それでは行きましょう!

【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する

Vuexの続きです。前回はVuexが何を管理しているのか調べました。Vuexのストアでコンポーネントを跨いで参照するデータを一元管理するということでした。今回はストアに実際にデータ(値)を置いて、コンポーネントから表示してみます。それではいきましょう!

【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた

Vue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていきました。今回からは状態管理ライブラリ「Vuex」に取り組んでみます。まず「状態管理」とはなんぞや、何の状態を管理するのか?というところからいろいろ調べてみました。それではいきましょう!…

【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る

Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと下層ページを往来しました。今回は$route.paramsと$route.queryを使ってパスやGETパラメータから動的にページを作ってみたく。それではいきましょう!

【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来

Vue.jsの続きです。前回はNuxt.jsプロジェクトのTOPページのコードを読み解きました。今回は下層ページを作ってみたく。それではいきましょう!

【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる

Vue.jsの続きです。前回はNuxt.jsのプロジェクトを作成しました。今回はそのプロジェクトファイルの中身を見てみる。それではいきましょう!

【Vue.js】Nuxt.jsのプロジェクトを作成する

Vue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを作成しました。ハローワールド的なペライチページでした。今回は本式なプロジェクトをつくってみる。それではいきましょう!

【Vue.js】Nuxt.jsをインストールして簡易ページを作成した

Vue.jsの続きです。前回までVue CLIをインストールしてみた。今回はNuxt.jsをインストールしてみる!途中、何度かエラーが起こったが、調べながらなんとか進めた。それでは行きましょう!

【Vue.js】Vue CLIのダッシュボード(GUIツール)を開く

Vue CLIの続きです。前回はVue CLIのプロジェクトを作ってみました。今回はプロジェクトのダッシュボード(GUIツール)を開いてみます。それではいきましょう!

【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る

Vue.jsの続きです。前回はVue CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。それではどうぞ!

【Vue.js】Vue CLIをインストールしてみる(CDN、Nuxe.jsとの違い)

Vue.jsの続きです。前回はNuxt.jsで何ができるか調べました。今回はNext.jsのインストール…の前にVue CLIが未体験だったのでこちらのインストールをやってみます。それではいきましょう!

【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)

Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.jsにトライ。今回は概要を掴むために調べたことについて。それではいきましょう!

【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar)

Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置してみました。今回はさらにいろんなパーツを配置してみます。パンくず(v-carousel)、スライダー(v-carousel)、タイル(v-card)、アコーディオン(v-expansion-panels)、カレンダー(v-cale…

【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)

Vue.jsの続きです。前回はボタンを配置してみました。今回はヘッダー、フッターを配置してみます。v-app-barとv-footerを使います。それではいきましょう!

【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-container、v-layout、v-flex、v-btn)

Vue.jsの続きです。前回はVuetifyを事始めました。今回はもう少し進んで、ボタンを3つ並べてみました。v-layout、v-flex、v-btnなどを使いました。

【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた

Vue.jsの続きでず。前回まではコンポーネントについて触れましたが今回からはVue.jsのUIフレームワーク、Vuetifyにトライしてみます。CDNリンクで事始めることができました。それではいきましょう!

【Vue.js】コンポーネントにpropsオプションで値を渡す

Vue.jsシリーズの続きです。前回はコンポーネントにカウンターを仕込みました。今回はコンポーネントに値を渡してみます。propsオプションを使います。それではいきましょう!

【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)

Vue.jsシリーズ続きです。前回はコンポーネントでハローワールド的一歩を踏みしめました。今回はコンポーネントにカウンターを仕込んでみます。ポイントはdataオプションの値を無名関数にすることです。それではいきましょう!

【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)

Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携でしたが、今回からコンポーネント。コンポーネントって部品を一まとめにする機能ですが、独自のタグ名を命名できます。これを見かけるとJSフレームワーク感が高まるんですがw、いよいよ自分でも実…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-3)

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その2としてVueインスタンス以外のコードを見ていきました。localStorageを読み込む箇所も見受けられました。今回がラスト。Vueインスタンス本…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定も…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はHTML、CSS編でした。今回はJS編。localStorageと関わる部分を見たかったけどボリュームがあったのでまずは全体像から。それではいきましょう!

【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)

Vue.jsで単純なものを作るとリロードしたときに初期状態に戻ってしまって儚い(はかない)。。かといってデータベースと連携したものをつくるのはまだハードルが高い。前段階として以前にも触れたLocalstrageと連携して値を保存してみたい。公式サイトのサン…

【Vue.js】Google Chartsのグラフと連動させる

Google Chartsの記事で描画したグラフとVue.jsの連動に挑戦。入力した数字

【Vue.js】transitionタグでアニメーション効果をつける

Vue.jsの続きです。前回はwatch(監視プロパティ)で簡単なクイズを作りました。今回はtransitionタグというVue.jsの独自タグでアニメーション効果をつけます。それでは、いきましょう!

【Vue.js】watch(監視プロパティ)で戦国時代クイズを作った

Vue.jsの続きです。前回はcomputed(算出プロパティ)で割り勘アプリを作りました。今回はwatch(監視プロパティ)で簡単なクイズを作ってみます。それではいきましょう!

【Vue.js】computed(算出プロパティ)で割り勘アプリを作る(おまけでこち亀アプリも)

Vue.jsの続きです。前回はv-modelでリアルタイムにフォームの入力文字を表示した。今回はv-modelのcomputed(算出プロパティ)で複数の処理をリアルタイムに行う。「割り勘アプリ」を作る。(おまけで「こち亀アプリ」も作るw)それではいきましょう!

【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る)

Vue.jsの続きです。前回はv-vindでボタンでリアルタイムにclass名の追加、削除をした。今回はv-modelでリアルタイムに「データバインディング」体験してみる。データバインディングとは何ぞや?フォームに入力した情報をリアルタイムで画面に反映できる。ど…