Vue.js 2016年まとめ & 今後
Vue.js 2016年まとめ & 今後この記事は、Vue.js Advent Calendar 2016の25日目最後の記事です。 フロントエンド界隈の技術、ここ最近何も進歩していないと言われてますが、Vue.js では今年2016年はいろいろとあり激動でした。 そんな Vue.js 界隈における出来事を Vue.js コアチームメンバ & Vue.js 日本ユーザーグループの orgnaizer の立場でまとめつつ、最後に Vue.js の今後について少し話して、Vue.js Advent Calendar の最後を締めくくりたいと思います。 2.0 リリース！一番の大きな出来事といったら、やはり、Vue.js 2.0 のリリースでしょう！ Behold! Vue 2.0 is officially out! https://t.co/OVgGo4epCO 2016年9月30日今年の4
10分で分かるVue.js！基礎から試用まで詳しく解説 -Code部
プログラミング初心者を悩ませる要因の一つに、アプリ開発の手間とスピード感があります。 コツコツ1から10まで作っていくのもいいですが、アプリ開発を爆速化してくれるフレームワークもイイのではないでしょうか。 今回はViewに特化しているJavaScriptフレームワークの Vue.js をご紹介させて頂きます。 専門的な用語は控えて、とにかく直感的にビビッとくるように情報をまとめてみました。 View マジックのフレームワーク Vue.js Vue.js とは Vue.jsは、ユーザー・インターフェースを構築するための革新的なJavaScriptフレームワークになります。 他のフレームワークのように総合的な機能を取り揃えるのではなく、View（見た目）の部分に特化して開発されています。 Vue.js本体はAngularJSなどに比べると軽量ですが、足りない機能については、プラグイン
よく分かってなくてもVue.jsで動くモノが作れた話 - Qiita
この記事は、Vue.js Advent Calender 2016 9日目の記事です。 （アドベントカレンダーには）初投稿です。酷いタイトルですが実際そうだったので、何卒よろしくお願いします。 これを書いてるひとのスペック マークアップエンジニアとフロントエンドエンジニアの境目を行ったり来たりしています。 あまりフレームワークの理解がそれほどないので地味にフルスタック気味でJS書いたりしています。最近はどっちかというとディレクションとか進行の方に首突っ込んでいます。 発端 フレームワークをそろそろ何か触ってみないといかんとは思っており、社内のとあるプロジェクトでReactを使ってはいましたが大規模だったのと、どうやら暖かそうだったのもあり、そこまで敷居が高くなさそうな別のものはないかと探した所、Vue.jsと巡り会いました。 開発環境を整える Vue.jsはサンプルコードで見るからに簡単に
Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita
※このエントリはVue.jsアドベントカレンダー10日目の記事です。 最近の開発はjQueryでプロトタイピングだけ行って、本開発はVue.jsをベースに行っているPotato4dです。 Vue.jsは非常に強力で便利なフレームワークですが、そのテストについての情報というのは、探しても中々見つからないため、困っているかたも多いのではないでしょうか。 今回は、そんな問題を解消するために、Vue.jsのコンポーネントをテストしていく手法について共有していきたいと思います。 開発の準備 今回の環境 今回は、簡単に導入して試していくために、Vue.js公式のコマンドラインツールvue-cliを用いて開発を行っていきます。 vue-cliは、Vue.jsを用いた様々なプロジェクトの雛形を自動生成してくれるツールとなり、Node製であるため、Vueの開発環境が整っていれば、すぐに導入し、開発を始めるこ
Vue.js+Vuex、Express4、Dockerなどを使ってさくらのクラウドのAPIクライアントを作った
このサービスを公開するにあたり、さくらのDockerホスティングサービス Arukas.io での公開も考えたが、さすがに証明書が入ったイメージをパブリックにするのは怖い。 またAPIキーをお漏らしすると、高額請求や重要データの削除をされる可能性がある。 という経緯から、Webサービスとして公開することは断念した。 その代わりデプロイ用のスクリプトを用意した。 たとえばさくらのクラウドで最小構成のCentOS7.2のサーバを作り、以下の手順にそって証明書の作成、スクリプトの実行をすれば、すぐにsacloud-api-testerを使うことができる。（初回実行時はDockerイメージなどをダウンロードするので、3〜5分ほどかかる） # リポジトリをクローンする git clone https://github.com/BcRikko/sacloud-api-tester.git cd sac
Vue + Vuex を使ってみた感想と、Redux との比較 - Toro_Unit
いいにくの日ですね。肉食べたいです。 React + Redux にはよくお世話になっている昨今なのですが、React 以外も扱いたいなと思ったこと、そもそも Flux に対する理解が浅いんじゃ無いか？ということで、Vue.js + Vuex をちょっと勉強してみました。 つくったもの：https://github.com/torounit/vuex-todo ここら辺をいろいろ参考にしました。 Vuex のドキュメント Vue.js用のFluxライクなライブラリVuexを試してみる – Qiita Vue.js + Vuexで開発をしてみよう！ – Tech Blog – Recruit Lifestyle Engineer Redux と Vuex の違い。Reducer と Mutation の違い。 両方とも Flux パターンであるため、基本的な考え方は変わりません。ただ、Red
💓 Vue.js
P�A�IV � �IV `}��IV @�|�IV ���IV �%��IV �� �IV �7��IV �H�IV ����IV ����IV ����IV �5��IV Р4�IV ����IV p� `$8�IV � ��IV �� �IV � ��IV � ��IV `���IV �C �IV �G��IV ����IV `�A�IV �B��IV � c�IV 0���IV ���IV 0� �IV q|�IV �;��IV e��IV �m��IV P���IV ���IV p;��IV o��IV �8C�IV ����IV �L��IV 0� �Il�IV ^�IV � �IV P� �IV � �IV PQ��IV � �IV ��:�IV ����IV � ��IV ��1�IV ����IV ����IV p�;�IV � ��IV P�|�IV 0i
第3回 Vue.jsでコンポーネント開発 | gihyo.jp
はじめに 第3回では、Vue.jsのコンポーネントの基本的な作成の仕方と使用方法を紹介します。 Vue.jsは、UIをコンポーネント化する仕組みを持っています。HTML＋CSS＋JavaSciptで構築されたUIの再利用性が高まり、カプセル化されて開発で意識すべき範囲を限定できるようになります。今回の記事が、プロジェクトにVue.jsを導入する際のコンポーネント設計のイメージをつかむ助けになれば幸いです。 Vue.jsのコンポーネント指向 Vue.jsのコンポーネント指向について Vue.jsのコンポーネントは、大まかにWeb ComponentのCustom Elementsの仕様に沿って設計されています。コンポーネントは、定義したタグ名で親となるコンポーネントのHTML上に記述できます。 大規模なアプリケーションを作成する際は、コンポーネントをツリー状に構成してわかりやすく設計すること
vue.js + Cordova + Kotlin + SpringBoot + MySQL というスタックでSPAを作ってみて - Qiita
vue.js + Cordova + Kotlin + SpringBoot + MySQL というスタックでSPAを作ってみてJavaScriptKotlinCordovaVue.jsSpringBoot タイトルの通りのスタックでSPAを作成したので得た知見とかを書きます。 iPhoneとAndroidのアプリとしてリリース済みです。 vue.jsは1.0系です。 それぞれの技術を採用した動機 Cordovaを採用した動機 開発チームが小規模なためiPhoneとAndroidの両方を別々に開発していくのは辛いという問題がありました。 HTML5によるハイブリッドアプリにすることで少ない開発リソースで複数のプラットフォームをサポートできるようにするためCordovaを採用しました。 Vue.jsを採用した動機 別にReact.jsでもRiot.jsでも良かったのですが、自分がしばらくVu
普段Vue.jsでフロントエンド開発するときの構成と運用時のポイント - Qiita
Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu
[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法
引用: Components#Composing Components - vue.js Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則としてPass Props/Emit Eventsで行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ただ、公式ドキュメントに載っている図を見るだけではよくわからなかったので、実際にサンプルを作ってみた。 親子コンポーネント間でデータの受け渡しをする方法 <div id="app"> <div class="parent"> <h2>Parent</h2> <!-- 子コンポーネントからのデータを表示 親.applyメソッドで更新される --> <p>{{ messageFromChild }}</p>
![[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e2407ba7d8fb2983c260617cf5c8d799d8516b7/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEjbjVTF6b1dMxmqfReQmbC4ZM_IP8UH8WTF3f0U-3TNqQCNBA5_gqqBWX1X2iD-Fb5cQbYJGwk2k0qRCaPAQTVKqMQFciyBwwVqwiYjwqyiNjtIDlPGABH-DjvHQDqI1RWq1p75YuMCX2XC%2Fw1200-h630-p-k-no-nu%2Fprops-events.png)
jQueryの後に学びたい最新JSフレームワークまとめ
jQueryを「卒業」して次へ進みたいWeb制作者のために、Vue.js、Chart.js、D3.js、Reactなどの最新フレームワークについての記事を「WPJ」の記事の中から紹介します。 1.シンプルで触りやすい、Vue.jsから始めるアプリ開発 『jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら？』（WPJ） jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが？ 2.シンプルグラフならChat.jsにおまかせ 『カッコいいグラフがむちゃくちゃ簡単に描ける！Chart.js 2.0がスゴい』（WPJ） データビジュアライゼーション系のライブラリーといえば、D3.jsが有名。でも、シンプルなグラフをW
第2回 Vue.js基礎文法最速マスター | gihyo.jp
第2回では、Vue.jsの基礎文法について、駆け足で紹介します。 Vue.jsは、ビューの領域にフォーカスしたシンプルなライブラリです。そのため、他のライブラリとの連携や、既存のプロジェクトへの導入も容易です。今回の内容を通して、自身のプロジェクトにVue.jsを導入するきっかけにしてください。 記事の内容は、Vue.jsがロードされたjsfiddleにアクセスして、コードを入力することで試せます。詳しい文法について知りたい場合は、公式のガイドやAPIリファレンスを参照してください。 Vueインスタンスとデータバインディング Vue.jsで基本になるのは、Vueコンストラクタから生成されるインスタンスです。 var vm = new Vue({ el: '#example', // document.getElementById('example'), $('#example')[0] も
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
Flux と Component 〜 Vue.jsとVuexとVuex-connect - Qiita
グローバルステート及びそれに伴う周辺アクセサなどなど 開けた局所的な操作 所詮はグローバル 開けている必要のある局所的な操作と、開けている必要のない局所的な操作、圧倒的に後者のほうが多数だよね問題がある。死ぬ。 強いscope、明確なIN OUT(のはず) 閉じたモノリシックな操作 所詮はバケツリレー 大体の場合、親のコンポーネントはバケツで死ぬ。 ストレス度合い グローバルな問題は、臭いレベルの苦痛にとどまるが、破綻時の影響が計り知れない。 短期的な観測ではバケツリレーの方がストレス値は高い。 なのでまぁfluxに逃したくなる気持もわかるが、全部が全部flluxに流すだけなら「綺麗なjQuery」書いてる方がましになる。 閉じた部分、開けた部分をしっかり意識して運用する。 最近のユースケース Vue.js/Vuex で Flux運用をとっている。 親直ルートのコンポーネントは全てVuex
Vue.js + Vuexで開発をしてみよう！
Vue.js + Vuex = Magic コンポーネント指向とFlux architectureで始めるモダンフロントエンド こんにちは、フロントエンドエンジニアの蔀です。 ここ数年のフロントエンド開発の潮流の変化は急激で、雨後の筍のように色々なフレームワークが出てきていますね。 8月末には、Mediumでこんな記事が人気になりました。 The State Of JavaScript: Front-End Frameworks と銘打たれたこの記事は、React/Angular/Angular2/Ember/Vue/Backbone といった、近年流行しているJavaScriptフレームワークに関する興味、満足度、知名度などを調査して比較してくれています。 注目していただきたいのが、「Satisfaction（使ってみて満足したかどうか）」の項目です。 近年流行しているReact.jsと
jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら？
jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが？ 2016年7月21日：記事更新。Vue.js 1.0.xをカバーし、コンポーネント部分を追加しました。 Vue.jsは、MVVM（Model-View-ViewModel）アーキテクチャパターンを使用したWebアプリケーションの組み立てを助けてくれるJavaScriptライブラリーです。はじめはAngularJSとよく似ていると思いましたが、一度使ってみるとVue.jsはシンプルで使いやすいだけでなく、フレキシブルであることにも気づきます。 今回は初心者向けの記事として、Vue.jsの基本コンセプトと重要な特徴を含めた全体像を説明します。 Vue.js 1.0.xはいくつかシンタッ
Vue.js Tokyo v-meetup="#1"に行ってきたよ - 俺、サービス売って家買うんだ
今日はVue.jsのミートアップに参加してきました。 なんとVue.jsの生みの親のEvan YouさんのQ&Aセッション付き！ vuejs-meetup.connpass.com 全体を通して、気になった箇所や今後調べておきたいことを箇条書き程度に。 気になったこと Vue.jsは学習コストが低い 日本語ドキュメントも豊富だし、data-binding目的だけで使えたりして便利 →誰かに教えるときDOMをすっ飛ばしてVueとか入っていいものかとなやましい 肥大化したVMへの対応 .NETからMVVMの思想を紐解くとよい MVVMのModelにまつわる誤解 - the sea of fertility callbackで変更を検知 →component+eventを利用しない理由を聞いておけばよかった Vuex 2.0系から$broadcast, $dispatchがdeprecatedに
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離
