Vuex から Pinia への移行を行いました - every Tech Blog
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。 また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。 私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド
機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
これからVueを勉強しようと思っている人への道しるべ（勉強方法）を書く - Qiita
フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね） ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。 そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。 対象読者はこんな感じ。 ・RubyやPHPはよく書くけど、Javascriptあんまよくわからない ・jQueryチョット書ける ぜひ参考にしてもらえると幸いです。 ※もちろん、以下に書く方法が最良というわけではないので、参考程度に考えてくださいね。 ES6の記法を知る PHPやRubyを書けるなら、Javascript自体の勉強はそんなに大変ではありません。一部の独特の挙動を除けば、すんなり理解でき
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
【動画付き】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分以内で終わらせることができるはずです！ 今回作成するサンプルアプリケーション 今回は以下のリンク先
JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Vue」を作る - フルスタックエンジニアに
今回はTODO-ModuleのSPA（シングルページアプリケーション）クライアントをVue.jsを使って作っていきます。 Vue.jsとはViewModelに特化したフレームワークです。AngularJSやKnockoutJSに影響を受けており、似ているところも多々あります。 AngularJSはフルスタックですが Vue.jsはそうではないので、ViewModel以外の部分は自作するか、他のライブラリを使う必要がります。 今回はVue.js以外にルーティングライブラリであるPage.jsと バリデーターのvue-validatorを使います。 デモアプリとソースコードはこちらに公開しています。 TODO-Module-Vue ソースコード 動作環境 OS X Yosemite node v0.10.37 npm 2.7.3 今まで同様に、このクライアントアプリの動作確認にはAPIが必要な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
VueToolbox
Vue.js 2.0 Server Side Rendering