Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
Vue.jsとRailsの最適な融合を考える - メドピア開発者ブログ
もう新年を迎えて2ヶ月が経ちますね。 多くの人は新年の目標を立てますが、皆さんは何かしら立てましたでしょうか? 英語を毎日勉強するという目標を立てましたが、既に挫折してしまったエンジニアの村上(pipopotamasu (pipopotamasu) · GitHub)です。 本日はその懺悔も込めてVue.jsとRailsの話をお送りします。 この記事を書く背景 以前ブログで書いた通り、現在Webpackerへの移行を機にフロントエンド周りの改善を進めています。 tech.medpeer.co.jp その中でVue.jsとRailsをいい感じに組み合わせるにはどうしたら良いかについて悩むことがあったので、本記事にて共有させていただきます。 悩んだ内容としては以下になります。 1. Ajax通信時にCSRFトークンをどう設定すればいいか? 2. 単一ファイルコンポーネントで書くHTMLをもっと
Vue.js初心者向け：Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ - Qiita
はじめに Vue と Ajax を組み合わせて非同期で Json を取得するサンプルは意外と見付かりません。今回の実装もものすごく初歩的な方法ですが、自分的には丸1日悩んだ結果なので今後のためにメモを残しておきます。 むしろエレガントな方法を教えてください。 やりたいこと Vue インスタンス作成前ではなく、作成後にコンポーネント側で Json を取得したい。 データは専用のストアを用意して複数のコンポーネントで使い回したい。 しかし Vuex は制約がキツいので使いたくない。 Json を取得したらコンポーネントに反映したい。 コンポーネントは単一ファイルコンポーネント（.vue）を使いたい。 jQuery ではなく axios を使う axios とは Vue のドキュメントで推奨されている Ajax通信ライブラリです。jQuery を使ってもいいのですが、せっかくなので試してみました
Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更 - kitak blog
この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [1, 2, 3, 4, 5] }; } } </script> <template> <ul v-for="item in items" :key="item"> <li>{{ item }}</li> </ul> </template> items のサイズの上限を 5 として、新しいデータを追加したい場合は古いデータを削除することとする。 例えば、items [1, 2, 3, 4, 5] に 6 と 7 を追加する場合、items は [3, 4, 5, 6, 7]
Vue.js：JSONファイルをAJAXで取得して表示する
最近また Javascript を書いています。 Chrome拡張のメンテナンスをしたい気持ちもありますが、最近盛り上がっている Vue.js を使ってみました。 モダンなウェブアプリケーション開発と言えば React.js ですが、どうしても JSXに違和感があったり、 そもそもいきなり大規模でリアクティブなアプリケーションを作るつもりも無かったので、小規模な開発からも 使えて、使いやすいと評判の Vue.js です。最初に書いておくと、Vue.js かなりいいですよ。 データをテンプレートに展開するようなデータバインディングは、ガイドを見れば十分だと思うので、 もう少し実践的なものにしようと思います。 Vue.js で AJAX 実は、Vue.js そのものは Ajax をサポートしていません。 以前は vue-resource というパッケージが公式のライブラリという扱いだったような
QiitaにRails 5.1とVue.jsで作るサンプルアプリケーションの記事を書きました - give IT a try
お知らせ 前回のエントリでも「QiitaにRails 5.1の記事を書いたよー」というお知らせをしましたが、もう一本新しい記事を書きました。 今回書いたのは「【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～」という記事です。 どんな内容なの？ Rails 5.1で追加されたJavaScript関連の新機能を使って、下のような簡単なVue.jsのアプリケーションを作成するチュートリアル記事です。 ローカルマシンで動かして終わり、ではなく、Herokuにデプロイしたり、システムテストを書いたりするところまでカバーしています。 さらに、文章で説明するだけでなく、動画でも手順を説明しています。 Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ コードもGitHubで公開しています。
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
「とっつきやすい」フレームワーク Vue.js #jsfes
秋のJavaScript 2016で登壇したスライドです
静岡JavaScript勉強会でVue.jsへの💓を話してきた - じまろぐ
#3のときにこのスライドで名前とアイコンだけ登場してから1年半、ついに静岡JavaScript勉強会 #4でお気に入りなJavaScriptフレームワークのVue.jsについて話してきた。 👆今回の目標 今回は参加者に「Vue.jsなんかヨサソウだしちょっと使ってみようかな〜」と思ってもらうことを目標にして資料を作った🤔 📝 使った資料 🔗 💓 Vue.js （ブラウザのコンソールを開くと喋った内容が見れる） この資料のまとめ 💪 少ない学習で大きなパワー 💨 軽くて速い 👐 ライブラリ/ツールでどんな規模にも対応 📖 ドキュメントがすごい 🇯🇵 日本語コミュニティの存在 結果 参加者の何人かに「Vue.js使ってみよう」と思わせることができたようで☺ ⚙ スライド作成に使ったツール ahomu/Talkie を使ってみた。Markdownでイケてるスライドが簡単にで
「片手間JavaScripter」にも知ってほしい、Vue.jsで実現するMVVMパターン、Fluxアーキテクチャとの距離 - builderscon tokyo 2016
「片手間JavaScripter」にも知ってほしい、Vue.jsで実現するMVVMパターン、Fluxアーキテクチャとの距離 accepted Abstract Vue.jsは、JavaScriptでMVVMパターンを実現するライブラリです。 このセッションでは、まず jQuery から始め、Vue.js による MVVM による PDS の導入、単方向データフローの導入による Flux アーキテクチャへの接近までをコード例を交えて見ていきます。 Vue.jsを題材にしますが、「Vue.jsの使い方チュートリアル」のようなものではなく、アーキテクチャ寄りの話題になります。「片手間 JavaScripter」だったわたしが、実践的な SPA を開発する中で得た知見を大放出します。
Vue.jsとその未来 2.0 - WordBench 京都 & ng-kyoto 10月勉強会 #wbkyoto #ng_kyoto #wordbench - niwatakoのはてなブログ
twitter.com 一昔前のフロントエンドの開発手法に慣れていて移行したいかたや、サーバーサイドエンジニアで少しフロントエンドも関わってみたいかたにもおすすめできる、 シンプルでわかりやすく、かつ強力なフレームワークであるVue.js。 今回はVue.jsに関する基本的な話のほか、最新バージョンであるVue 2.0についてご紹介したいと思います。 WordBench京都 x ng-kyoto共催イベントでVue.jsについて話しました！#wbkyoto #wordbench #ng_kyotohttps://t.co/zgIiTnXGST— Potato4d (@potato4d) 2016年10月9日 Vue.jsとその未来 2.0 資料です フレームワーク使ったことある人、多いですね Vue.js使ったことある方、少ないですね SPAやったことある人、まあいる ドキュメントの翻訳を
既存のRailsアプリケーションにVue.jsを採用した話 - スパイスな人生
こんにちは、id:ukstudioです。今回は弊社サービスの1つであるSPOTLIGHTSにVue.jsを採用した話をしようと思います。 SPOTLIGHTS自体は一般的なRailsアプリケーションといって問題ない作りになっているので、既存のRailsアプリケーションにどういった形でVue.jsを投入していったかを中心に書いていきます。 Vue.js採用前の状況 SPOTLIGHTS初期のJavaScriptはHTML/CSSと共に外注し納品してもらったものです。 フレームワークといった類はほぼ使っておらずjQueryに頼りきったコードでした。 当時は様々な事情によりこれはこれで妥当な判断だったと思うですが、今後社内でメンテナンスしていくうえで足かせになるであろうというのはなんとなく予想ができていました。jQueryのイベントハンドラやDOM操作がひとつのファイルにひたすら連なっているとい
GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
Learn Vue 3: Step by Step on Laracasts Vuejs 2 Authentication Tutorial on Auth0 blog Create a GitHub File Explorer Using Vue.js on Scotch.io Vue.js Tutorial on Vegibit Vuex introduction video - James Browne from London Vue.js Meetup #1 Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli Vue.js Introduction Turkish Language on oguzhan.in Vue.js VideoTutoral Series in Spanish (3-8
Flux と Component 〜 Vue.jsとVuexとVuex-connect - Qiita
グローバルステート及びそれに伴う周辺アクセサなどなど 開けた局所的な操作 所詮はグローバル 開けている必要のある局所的な操作と、開けている必要のない局所的な操作、圧倒的に後者のほうが多数だよね問題がある。死ぬ。 強いscope、明確なIN OUT(のはず) 閉じたモノリシックな操作 所詮はバケツリレー 大体の場合、親のコンポーネントはバケツで死ぬ。 ストレス度合い グローバルな問題は、臭いレベルの苦痛にとどまるが、破綻時の影響が計り知れない。 短期的な観測ではバケツリレーの方がストレス値は高い。 なのでまぁfluxに逃したくなる気持もわかるが、全部が全部flluxに流すだけなら「綺麗なjQuery」書いてる方がましになる。 閉じた部分、開けた部分をしっかり意識して運用する。 最近のユースケース Vue.js/Vuex で Flux運用をとっている。 親直ルートのコンポーネントは全てVuex
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js Tokyo v-meetup #5 - 資料一覧 - connpass
Vuetify — A Vue Component Framework
公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」
コンポーネント指向のUI開発時に起きがちな密結合・複雑化問題をStoreパターンで解決する