これはVue.jsアドベントカレンダー#2 14日の記事です。 Vuexはflaxアーキテクチャを採用した公式プラグインで、vue.jsで利用することができます。 公式の日本語ドキュメントもあるので導入しやすい状況になっています。 とはいえ、いざ使ってみようという時には気が引けてしまうもの。 自分が導入を試みた時もいろいろと悩むポイントがありました。 どこから手をつけていいかわからない ファイル構成のお手本が知りたい スタンダードな書き方を知りたい このあたりのことを、どう解決したかについて今回は紹介します。 はじめにすること 公式ドキュメントを読みましょう。苦手な人もいると思いますが なにを意識しながら読むかが決まっていれば読みやすくなるものです。 fluxを理解する 事前にfluxアーキテクチャについて理解する必要があります。fluxを知った上でVuexのドキュメントを読むとより理解し

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる

レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい

Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。 Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。 アニメーション、テーマ、インタラクティブウィジェットをサポート。 プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。 ビルトインプレゼンターモードとさまざまな便利なウィジェット。 すべてのAPIが公開されており、カスタマイズ可能。 ライセンスはISC Licenseで、商用でも無料で利用できます。 Eagle.jsのデモ Eagle.jsを使用したさまざまなスライドショーを楽しめます。 まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。 Eagl

はい。とてつもなくシンプルですね（笑）。 タスクを識別するためのキー「id」。主キーで、オートインクリメント。 タスク名を入れる「title」。 ………以上！！ …あ。バリデーションは面倒なのでナシで（汗）…。 開発環境について 本記事は下記の環境を想定して書いています。 お使いのPCの環境と異なる場合は、適宜調整してくださいませ。 macOS High Sierra ver.10.13.5 Composer – 1.6.5 npm – 5.6.0 Laravel – 5.5 Vue.js – 2.1.10 axios – 0.16.2 laravel-mix – 1.0 Laravel・Vue.js・axiosでTODOリストを構築する手順 変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。 Laravelのインストール・セットアップ Vue.jsとaxios

Vue.jsには、それぞれのコンポーネントのpropsにバリデーションルールを設定することができます。 ReactでいうところのpropTypesのような概念ですが、あちらより基本構造がシンプルであり、反面複雑な条件は自分でバリデーションルールを書くスタイルとなっています。 これまでは受け付けるpropsの名称だけを設定することも一般的でしたが、Vue 2.4以降は公式のスタイルガイドでも、propsに型や独自で定義するバリデーターを定義することを推奨することとなりました。 ですが、従来型の記法が利用されていることもまだまだ多く、中にはご存じないかたも多いのではないでしょうか。 この記事では、そんなVue.jsのpropsのバリデーターに焦点をあて、基本的な使い方についてご紹介します。 TL;DR propsでキー名のみを指定するのはやめよう とりあえず型だけでも縛ることができるなら型制限

Vue.js #4 Advent Calendar 2017 - Qiita の 19 日目のエントリー。 （先日の記事の続きを書こうと思っていたが、こちらの日が先に来てしまった） 最近、フロントエンドエンジニア・デザイナー不在のプライベートな開発において、フロントサイドの実装を任されることがあった。 その際に Vuetify.js を用いて比較的簡単にマテリアルデザインのページを実現できたので、その備忘録。 （意見・ツッコミなどは歓迎） vuetifyjs.com 出来上がった画面のイメージはこんな感じ。 ※グラフ描画は Vuetify.js で提供していないので、 vue-chartjs を利用している。 このレベルであれば、Vue.js の基礎知識だけある状態から1日で辿り着くことが出来た。 概要 Vuetify.js はマテリアルデザインのコンポーネントを80種類以上提供している。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Vue.js のアドベンドカレンダーです！ このカレンダーはVue.js #1 Advent Calendar 2017の4つ目です。 Vue.js #1 Advent Calendar 2017 Vue.js #2 Advent Calendar 2017 Vue.js #3 Advent Calendar 2017 Vue.js 関連ネタ書いてワイワイしましょう！

Vue.js のアドベンドカレンダーです！ このカレンダーはVue.js #1 Advent Calendar 2017の3つ目です。 Vue.js #1 Advent Calendar 2017 Vue.js #2 Advent Calendar 2017 Vue.js #4 Advent Calendar 2017 Vue.js 関連ネタ書いてワイワイしましょう！

Vue.js のアドベンドカレンダーです！ このカレンダーはVue.js #1 Advent Calendar 2017の2つ目です。 Vue.js #1 Advent Calendar 2017 Vue.js #3 Advent Calendar 2017 Vue.js #4 Advent Calendar 2017 Vue関連のネタ書いてワイワイしましょう！

Vue.js のアドベンドカレンダーです！ 満員御礼のため他3つぐらいあります。 Vue.js #2 Advent Calendar 2017 Vue.js #3 Advent Calendar 2017 Vue.js #4 Advent Calendar 2017 Vue.js 関連ネタ書いてワイワイしましょう！

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いま

ブラウザ対応が着々と進んできて、 Web Components の利用が現実味を帯びてきました。 そんななか、ざっと Web Components のおさらいと vue-custom-element に着目してみたいと思います。 Web Components とは? Custom Elements Shadow DOM HTML imports HTML Template の4つの大きな仕様から構成される Web プラットフォーム API です。 Custom Elements で自由にカスタム要素を生成することができ、 Shadow DOM でカプセル化を促します。 Web Components の利用を簡潔に行うためのライブラリ Polymer なども存在しています。 これらの詳しい情報に関しては WEBCOMPONENTS.ORG にまとめられています。 Vue と Web Comp