Comparing the React and Vue Ecosystems with a Real-World SPA
React vs Vue - a favorite talking point among developers. Many people pick a framework and stick to it, never really getting to know the library they left behind. That's mainly due to time; the only way to really get to know the ins and outs of a system is to use it, struggle with it, grow with it. It's just not efficient to spread your focus thin across similar tools, but aren't you curious? I wa
Vue CLI 3.0 is here!
Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue applications. Today we are thrilled to announce the release of Vue CLI 3.0 and all the exciting features that come with it. Rich Built-in FeaturesVue CLI 3 is a completely different beast from its previous version. The goal of the rewrite is two-fold: Reduce configuratio
Vue.js で XSS を作り込まないために気を付けること - セキュアスカイプラス
はじめに はじめまして、福岡オフィスで働いている前平です。 セキュアスカイ・テクノロジーでは、すでにいくつかのカテゴリのブログを発信していますが、技術を気軽に発信したり、エンジニアが普段の業務でどのような技術に触れているのかを紹介したりすることを目的として、新しく「エンジニアブログ」が立ち上がりました。 本記事では、最近になってようやく (汗) 検証した Vue.js でのクロスサイト・スクリプティング (XSS) について紹介します。 なお、本記事の内容は私見に基づくものであり、所属組織を代表するものではありません。 前提 本記事では Vue.js を使って XSS の脆弱性を作ってしまうようなケースを説明しますが、その他の JavaScript のライブラリ/フレームワークを使った場合でも同様のリスクがある可能性があります。 検証で利用したバージョン Vue.js v2.5.16 (サ
Railsで作られた管理画面にVue.jsを導入した話 - Studyplus Engineering Blog
Studyplusのweb版を担当していた久保です。 最近はRailsを触ったりしています。 今回は社内向けの管理画面を作る際に、どうしても動的にDOMを操作する必要があったのでjQueryの代わりにVue.jsを導入してみました。 なぜVue.jsを選んだのか Railsが生成したhtmlをテンプレートとして使うことができる Rails5系以降であれば、webpackerを利用するだけで良いので導入が楽 導入方法 導入時の環境は以下 rails: 5.2.0 ruby: ruby 2.5.1p57 node: v8.11.2 yarn: 1.7.0 webpacker: v3.5.3 webpacker gem 'webpacker' $ bundle install $ bundle exec rails webpacker:install Vue.js $ bundle exec r
Building "Renderless" Vue Components | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. There’s this popular analogy of Vue that goes like this: Vue is what you get when React and Angular come together and make a baby. I’ve always shared this feeling. With Vue’s small learning curve, it’s no wonder so many people love it. Since Vue tries to give the developer power over components and
一日Nuxt.js入門[ジロッカソン体験記] - Qiita
はじめに ジロッカソン 2018に一人で参加して、現地ではじめマシマシてというチームを組み開発をしました。 チーム決めの時にPWA?Nuxt.js??という自分の謎のワードが飛んでいたのですが、面白そう！と思ってチームを組みました。 プロダクトとしては並んでいる時間に二郎をクリックしてポイントを貯めガチャを引くことができるジロッカーというサービスを作成しました。 1dayハッカソンだったのですが、その中でNuxt.jsを使ってみた感想をまとめます。 環境構築等は公式に詳しく書かれているため、そちらを参照してください。本投稿では、大枠について紹介します。 Nuxt.jsとは Nuxt.jsnの特徴を公式のドキュメントからわかりやすく、2行だけつまんで解説します。詳しくきになる人は、公式(はじめに |Nuxt.js)を参照ください Nuxt.js とはユニバーサルな Vue.js アプリケーシ
![一日Nuxt.js入門[ジロッカソン体験記] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f690ba957a067850451051ea88b61cac36fb6115/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNjQ2NzclMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2OTY2NTc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZTMyM2I0NDViNjNkZDVmZWJkZmFhZDc5ZWZiMDJhMmI%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D4250e6426e28aeb3a09cc5748471d366%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU0JUI4JTgwJUU2JTk3JUE1TnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1QiVFMyU4MiVCOCVFMyU4MyVBRCVFMyU4MyU4MyVFMyU4MiVBQiVFMyU4MiVCRCVFMyU4MyVCMyVFNCVCRCU5MyVFOSVBOCU5MyVFOCVBOCU5OCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWUyMmVlMDVlZTE3ZTU2OGZiNDNhYTVmMzJkZDE1MDg5%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDA0Z2VydSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWQ0ZmUwM2VkZTI4NzkyZDZlOTkwMWQyM2FmZmFiNmE1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D9ea7ab104c64aa2e6e6b1574e3330cbe)
Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
「はじめてのフロントエンド開発」という本を書きました - massa142's blog
共著者として参加していた書籍『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に技術評論社さまより発売となりました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎出版社/メーカー: 技術評論社発売日: 2018/05/09メディア: 単行本（ソフトカバー）この商品を含むブログを見る どんな本か React、Angular、Vue.js、React Nativeそれぞれが、同じサーバのAPIを参照し、同様の機能を持ったアプリケーションとして作成します。React Nativeは、ネイティブアプリを開発するためのフレームワークなため、SPA（Single-page
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
Vue.jsをシンプルに理解しよう - Qiita
Vue.jsって聞いたことあるよね？ 最近ホットみたいですねVue.js、今更ですが入門者向けにVue.jsを紹介したいと思います。 誰でもわかるように書きますので多少間違っていても許してください!何でもしますから! 続きを書きました。 Vue.jsをシンプルに理解しよう その2 双方向データバインディング？ Vue.jsのインスタンスの作り方とかは他にもいろんな方が紹介していると思うのでそちらを参照してください。 まず一番基本的で便利なやつを紹介します。 Vueインスタンス内のdataというオブジェクト内の変数がhtmlと連動します。 かっっこいい言い方すると双方向データバインディングとか言います。 分かりにくいからhtmlとjsが同じ値になるって覚えたらいいよ! jsfiddleで確認してください。 dataの中にさらにオブジェクトを入れることもできます。 便利だ... ちなみに{{
WebデザイナーのためのVue.js事始め
WebデザイナーのためのVue.js事始めVue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ Vue.js の使い方Vue.js は公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScript で定義したテキストを HTML に表示させる」というスーパ
結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。 - Qiita
フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。 選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。 私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。 これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。 Why choose React over Angular and Vue.js 上で述べたように、フロントエンドフレームワークの学習という観点では何から始めても大きな問題はない。ここでは、その'何か'でReactが選ばれる理由を述べる。 Reactは小さく、シンプル。 Reactは、ちょっとしたReactとの対
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
Nuxt.js 1.0 is out 🎉
It has been a long run, with a lot of commits, issues, contributors & fun! See 1.0.0 Release Note on GitHub. Nuxt.js is a framework on top of Vue.js, vue-router, vuex and vue-meta. You can create a (static generated or universal or single page) web app quickly with the same setup and no build config to write. TLDR:Nuxt 1.0.0 is out, up to date with the lastest versions of Vue, vue-router, vuex and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Replace jQuery with Vue — SitePoint
Vue-cli 3 : Game-changer or barely useful?
Rails + webpacker + Vue.jsプロジェクトにESLintを導入 - Qiita
React16.3 に webpack4 で入門した - Qiita
短命なJavaScriptフレームワーク
JavascriptのVueのライブラリElementUIの日本語化 - Qiita
