Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。 また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。 私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド
1週間でVue.jsをマスターしようと思った時に参考にしたサイト
前置き（とばしてください〜） めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職（まだ2週間前の話） こんな感じです。 フリーランスのときは（今もまだ仕事はちょこちょこ受けてますが） 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成（UXライター的な）、プログラムとはかけ離れた仕事などなどもしていました。 また、ガッツリエンジニア！！という仕事はなかったので、（なぜが割とがっつり常駐していたスタートアップではメンバー半分がエンジニアだった！） 逆に、仕事で新技術学べる機会は殆ど無く… 今の自分が活躍できる領域
Nuxt.jsとFirebaseを使って簡単なWebサービスを作る＜導入編＞ | non-standard world株式会社
こんにちは。エンジニアの高崎です。 突然ですが、Webサービスをもっと気軽に作れたらいいのになと思ったことはありませんか？ 本格的にWebサービス構築の投資をする前に、需要確認のための動くプロトタイプを作りたい フルスクラッチで作るほどの予算はないんだけど、Webサイトにちょっとした会員限定機能をつけたい など、私達のクライアント様にもそのような課題を抱えている方がたくさんいます。調査した結果、そんな場合の最適解が「Nuxt.js」というフロントエンドのフレームワークと「Firebase」というGoogleが提供しているクラウドサービスを組み合わせて作ることでした。 この記事では「Nuxt.jsとFirebaseを使って簡単なWebサービスを作る」と題して、ハンズオンで簡単なノートを取るWebサービスを作る方法をお送りしたいと思います。 Nuxt.jsって？ SPA＊フレームワーク。Vue
迷わないVueの学び方 - やわらかVue.js
VueのチュートリアルはQiitaなどにたくさんあるけど、構成が千差万別で、いろいろ見比べると却って迷ってしまいます。 なので、ここではなるべく一本道で学べるような、人にあった学習ルートを提案します。 特急入門コース（仕事で使いたい！一週間以内に学ばないといけない） まず猫本をAmazonで注文しておきましょう。 SPAとMPAの違いを理解しよう SPAとMPAって何が違うの？SPAにしたほうがいい？ 初心者は.vueファイルから始めるべき？ MPAコース CDN版で大きなアプリ作れるの？ flaskやrailsとどう組み合わせるのか テンプレートエンジンとVueの組み合わせ方 SPAコース webpack(vue-cli)は何をしてくれるものなのか vue-cliで何が起こるのか見てみよう REST APIって何？ Ajaxするにあたって必要な知識 ＆ axiosについて vue-rou
なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
心理的負担を抑えつつVue.jsを0.12→2.4にアップグレードした話 - 弥生開発者ブログ
こんにちは、@mugi_uno です。 RubyKaigi盛り上がりましたね〜！ そして広島は美味しいものがたくさんでした。次回の仙台も楽しみですね！ さて、みなさんはフロントエンドのフレームワークには何を利用していますか？ Misocaでは一部機能でReact/ReduxによるSPA構成を採用しています。 めろたん(@renyamizuno_)の書いた過去のエントリーにも登場していますね。 tech.misoca.jp しかし、Misocaで利用しているのはReactだけではありません。 jQuery React/ReduxはSPAなどでパワーを発揮しますが、逆に気軽に取り回しにくいため、ちょっとしたコンポーネントを作りたいケースなどでは、さくっと書けるjQueryを利用することもまだまだ多いです。 しかし、DOM操作が柔軟すぎるため影響範囲が読めなかったり、ビューと状態の管理が複雑にな
【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita
はじめに Rails 5.1ではJavaScript/index.html.erb周りのサポートが大きく改善されました。 これにより、Vue.jsやReactといったモダンなJSフレームワークをRails内で非常に扱いやすくなっています。 僕も実際に試してみましたが、本当にびっくりするぐらい簡単にVue.jsやReactを動かすことができました。 そこでこの記事ではRails 5.1とVue.jsを組み合わせたサンプルアプリケーションの作成方法をチュートリアル形式で、できるだけ詳しく説明します。 また、ローカルで動かしておしまい、ではなく、Herokuにデプロイしたり、テストコードを書いたりするところまでカバーします。 この記事自体は長いですが、実際に手を動かすと（スムーズに進んだ場合）30分以内で終わらせることができるはずです！ 今回作成するサンプルアプリケーション 今回は以下のリンク先
React、Angularになじめなかった僕に手を差し伸べてくれたVue.js - Qiita
ギークハウス Advent Calendar 2016の12月２２日の記事です。 他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。 なぜVue.js？？ 普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚... ↓ しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。 ↓ いろいろ、ググって調べてみると、ES6、Babel、Reactふむふむ...🤔 ん？？ Webpack? JSX?? Flux?? Redux?? 「落ち着け！とりあえず日本語でOK」状態。。正にこの記事で書かれている状態そのものでした。 ↓ Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーショ
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
【Vue.js 2.0】コンポーネントの作り方（Materialize.css利用） - Qiita
いまさらですが、Vue.jsのコンポーネントの作り方調べたので記事書きます。 今回は、Vue.js 2.0・Materializeを使って実装します。 Vue https://vuejs.org/ Materialize http://materializecss.com/ コンポーネントを作る コンポーネントの基本的な作り方はこちらを参考にしてください。（英語。日本語のページは2.0に追い付いていない様子） https://vuejs.org/v2/guide/components.html ざっくり、下記でコンポーネントが作れます。 template定義 props定義 コンポーネント登録 （Vue.component('my-component',） Button 手始めに下記のButtonをコンポーネントとして作ります。 http://materializecss.com/butt
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で10万件のリストを表示する - Qiita
はじめに Vue.jsは軽量ですが、数万件のリストを並べるとそりゃ普通につらい。 だから目に見えるとこ以外はdom描いてもらうのやめるってコードです。 デモ デモ(jsfiddle) コード <div id="app"> <div style="overflow:auto;height:170px;" @scroll="getScrollParam"> <ul :style="listStyle"> <li style="height:17px" v-for="num in displayList">{{num}}</li> </ul> </div> </div> new Vue({ el: '#app', data: function(){ return { list:list, scroll:0,//スクロール量 scrollMax: (list.length - displayRow
普段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
Quasar Framework - SPA/ハイブリッドアプリを想定したHTML5デザインフレームワーク MOONGIFT
Cordovaに代表されるHTML5/JavaScriptを使ったスマートフォンアプリ、いわゆるハイブリッドアプリは海外では普及しています。HTML5やJavaScriptの実行速度が速くなったので、多くの目的において十分なパフォーマンスを出すようになっています。 そんなハイブリッドアプリから通常のWebサイトまで幅広くこなせるデザインフレームワークがQuasar Frameworkです。 Quasar Frameworkの使い方 デモです。スクリーンショット多めに紹介します。まずはヘッダー、フッター構成。 ツールバー。 タブ。 Android/iOSそれぞれにフィットしたデザインが用意されています。 ボタン。 画像付きカード。 テーブル。 リスト。 チェックボックス。 検索。 アコーディオン。 コンテクストメニュー。 ギャラリー。 スライダー。 ステッパー。 ツールチップ。 ツリー。 ビ
Vue.js Progressive Framework - Qiita
Vue.js の作者Evan氏によるVue.jsの紹介スライドで触れられていた「Progressive Framework」の概念が非常に刺さる所があったのでVue.jsの紹介と合わせて、まとめておきます。 本家資料 本稿は下記Evan氏によるスライド資料をベースに、独自解釈のもと意訳したり加筆したりして作成したものです。 Progressive Framework についての解説 2.0の流れも含めたVue.jsの紹介 道具と道具のコスト フレームワークはアプリケーションの複雑さを解決するために設計されているが、一方で道具は道具固有の複雑さを持っている。 技術選択においては、このアプリケーション固有の複雑さと、道具の複雑さとに向き合わなければならない。 複雑なアプリケーションに対して、簡素な道具を以って挑むのは効果が薄いし、簡単なアプリケーションに複雑な道具を持ち出すのは大げさに感じる。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「結局Nuxt.jsって何がいいの？」に対する回答 by potato4d
Nuxt.js + TypeScript = Great!
コンポーネント指向のUI開発時に起きがちな密結合・複雑化問題をStoreパターンで解決する