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と比較して以下のような
Vue.js
優先度B: 強く推奨 これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
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 で終了してしまった
2021年現在Vueを選択すべきでないと思う理由
使ってわかる、Vueへの恨み、つらつらと（随時更新） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い 後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/injectJavaScriptVue.jsフロントエンドVuexCompositionAPI まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject
Nuxt.jsのinjectを使ってDIする - CYDAS Developer's Blog
大阪からこんにちは、福山健（@kenfdev）です！ 先日「v-kansai Vue.js/Nuxt.js meetup #2」で「Nuxt.jsのinjectでインジェクトしてみる話」という内容で登壇させていただきました。その内容について記事にも残しておこうと思います。 スライドに関しては以下で公開しています。 speakerdeck.com 前提知識 基本的なNuxt.jsの機能 Vuexをなんとなく知っている TypeScriptがなんとなく読める Nuxt.jsの inject 皆さん、Nuxt.jsには inject という機能があるのをご存知でしょうか？意外と知られていないんじゃないかと思うのですが、公式ドキュメントの「統合された注入」にも記載されているNuxt.jsのプラグインの機能です。この inject を使うことで、Nuxt.jsのアプリケーションで、いろいろな場所から
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
9 Projects you can do to become a Frontend Master
Simon Holdorf Posted on Oct 6, 2019 • Updated on Apr 27, 2021 • Originally published at thesmartcoder.dev Introduction Whatever you do, it's always beneficial to have the right tools at your disposal. I love working remotely and am a big advocate of doing remote software development. Therefore, I always strive to have the best equipment available to be as productive as possible. Writing posts like
これからVueを勉強しようと思っている人への道しるべ（勉強方法）を書く - Qiita
フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね） ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。 そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。 対象読者はこんな感じ。 ・RubyやPHPはよく書くけど、Javascriptあんまよくわからない ・jQueryチョット書ける ぜひ参考にしてもらえると幸いです。 ※もちろん、以下に書く方法が最良というわけではないので、参考程度に考えてくださいね。 ES6の記法を知る PHPやRubyを書けるなら、Javascript自体の勉強はそんなに大変ではありません。一部の独特の挙動を除けば、すんなり理解でき
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
社内Vue.jsプロジェクトユーザーインタビュー - アシアルブログ
こんにちは、WEB開発チームの斉藤です。 弊社では3-4人のチームでプロジェクトを運営するのですが、隣のプロジェクトではどうなっているのかを知れることが少ないです。 そこでVue.jsに関するブログを書いて欲しいと当番が回ってきたのですが、Vue.jsを引っくるめた話を伺うチャンスとして、インタビューしてみようと思い立ちました。 やってみたところ、Vue.js単体ではなく周辺技術を交えた総合的な内容が、回答として上がってきました。 Vue.jsをメインに据えたJSアプリの開発体験に言及されている、という前提でお読みください。 （なお、できるだけVue.js万歳という言い方や、他のフレームワークの良さを下げる言い方は避けるようにしています。） 長くなったので、読みたいところだけ読めるよう、目次を置いておきました。 主な質問内容 Sさん：入社二年目、フロントエンド構築を担当 Q: 略歴と仕事内
Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog
日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / Vuex 連携 Vuex mutation を直接呼んで、state を変更 コンポーネントから直接 state を操作 TypeScript Vue.js 入門 さいごに 前提 これまで利用した構成 ベースとして、これまでプロダクションで利用したことがある構成は以下です。いずれも、フォームベースの SPA で、現在も稼働しています。 AngularJS 1.x AngularJS 1.x + TypeScript React
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
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分以内で終わらせることができるはずです！ 今回作成するサンプルアプリケーション 今回は以下のリンク先
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event - Speaker Deck
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
VueToolbox
