Vuex から Pinia への移行を行いました - every Tech Blog

2024/06/01 8 users DELISH KITCHEN 前提 チラシ 移行 知識

はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進... 続きを読む

Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド編③｜Yuu's Memo

2021/09/18 20 users Yuu memo Laravel クローン フロント

皆さんこんにちは！！ 前回に引き続き、フロント（Vue.js）側の開発を始めていきます。 前回は、Vuexを利用してカレンダーコンポーネントを書き換えました。 Vuexは解説することが多かったので、かなり長い記事になっていますがとても大切な部分なので、じっくり読んでみてください。 前回までの記事はこちらからどうぞ ... 続きを読む

Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン - ANDPAD Tech Blog

2021/08/20 11 users Jest ANDPAD コンポーネント フロントエンド チーム

どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + witho... 続きを読む

Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options - Speaker Deck

2021/03/17 18 users cons Pros Speaker Deck Vue.js

Transcript Vue.js ঢ়ଶ؅ཧͷબ୒ࢶ ʙ ͦͷVuexຊ౰ʹඞཁͰ͔͢? ʙ @KawamataRyo 2021/03/17 iCARE Dev Meetup #19 ࣗݾ঺հ @KawamataRyo LAPRAS גࣜձࣾ TypeScript, Vue, Firebase, Ruby ݩফ๷࢜?? ࠓ೔࿩͢͜ͱ Vuex + α ͷঢ়ଶ؅ཧख๏ͷ঺հ ͦΕͧΕͷ Pros/Cons ͷ·ͱΊ ͳͥঢ়ଶ؅ཧΛςʔϚʹʁ? Vuex ݏΘΕ͗͢͡Όͳ͍͔..? Vuex ? ? ? ? ? ? ? ? ? ͦΕͬͯຊ౰ʹVuexͷ໰୊ͳͷͩΖ͏͔ʁ VuexΛ ద੾ʹར༻Ͱ͖ͯͳ͍ or ద੾... 続きを読む

Vuex ストアに TypeScript の型を付ける（2020年12月版） - STORES Tech Blog

2020/12/02 13 users TypeScript stores inouetakuya

業務委託で STORES の開発をしている @inouetakuya です。 下記の記事（2020/09/14）にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではま... 続きを読む

Vuex + DDD のアーキテクチャを考える - Techtouch Developers Blog

2020/07/01 21 users DDD TypeScript 国定 軽量DDD アーキテクチャ

フロントエンドエンジニアの国定です。 この記事では、TypeScript + Vue.js で開発しているフロントエンドに今年からドメイン駆動設計（DDD）を取り入れ始め、ひとまず設計が落ち着いてきたのでその経緯とアーキテクチャについて解説します。 課題 アーキテクチャ Domain Service Store（Vuex） UI（Vue.js） 軽量DDDに... 続きを読む

Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note

2020/06/27 12 users redux Sumi 仮想DOM Style Sass

Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） ... 続きを読む

Vue.jsを100時間勉強して分かったこと - Qiita

2020/04/07 11 users Qiita incl Udemy Vue.js 内訳

Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけR... 続きを読む

Vue.observable でエラーの状態管理を行う - Mobile Factory Tech Blog

2020/03/26 5 users エラー TypeScript 状態管理 Vue.js 選択肢

こんにちは、ブロックチェーンチームでソフトウェアエンジニアをしている id:odan3240 です。 ページをまたぐエラーを制御したい場合、グローバルな状態管理を行えるVuex が選択肢に上がるかと思います。しかし、Vue.js 2系に対応する 3系の Vuex は公式の TypeScript サポートがなく TypeScript と相性が悪いことが知ら... 続きを読む

Vue.jsを100時間勉強して分かったこと - Qiita

2020/01/14 293 users Qiita incl Udemy Vue.js 内訳

Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけR... 続きを読む

【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita

2019/05/12 400 users Qiita AXIOS ベストプラクティス チュートリアル

はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルはコンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルが多数見受けられました。しかし実際のプロダクトでこれをし... 続きを読む

【Nuxt.js】Todoリストで理解するTypeScriptでVuex入門 - Qiita

2019/04/11 15 users Qiita TypeScript Vue ToDoリスト 記載

簡単にTypeScriptでVuex入門をしたかったのでTodoリストを作ってみました。 （※pageの記載はtsですが、ストアはjsで実装しています） この記事で伝えること pages/index.vueでのストアの呼び出し方 JavaScriptとTypeScriptの比較 この記事で伝えないこと 環境構築 TypeScriptでのストアの書き方 Vuexの解説 ①ストアを作... 続きを読む

vuexを使ったコードを図解してみる - Qiita

2019/03/06 54 users Qiita コード

Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思う... 続きを読む

Vuexのアプリケーションをスナップショットテストする #v_kansai / Snapshot testing for Vuex application - Speaker Deck

2019/02/28 44 users Speaker Deck アプリケーション

Vuexのアプリケーションをスナップショットテストする #v_kansai / Snapshot testing for Vuex application 続きを読む

Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり - Qiita

2019/01/29 226 users ポートフォリオサイト Qiita Vue ポートフォリオ 自分

昨日1/28にVue, Vuex, Vue Routerを使って、SPA対応のポートフォリオサイトを自作しました！ここまで形になったこと、本当に嬉しかったです。 自作ポートフォリオサイト もともと1週間でVue.jsを使ったポートフォリオを作った記事をみて、「すげぇ…自分もVueでポートフォリオサイト作成を第一目標にしよ！」と思ったんで... 続きを読む

新規プロジェクトにVueとVuexを採用してみた - Studyplus Engineering Blog

2019/01/28 60 users Studyplus Vue 所感 アプリケーション自体

こんにちは。Studyplus開発部の田口です。 新規で立ち上がった開発プロジェクトにVueとVuexを採用してみたので、今回はその所感を書こうと思います。 Vue/Vuexの採用理由 今回のプロジェクトで開発するのは、Studyplusのアプリ内ブラウザのWebViewページです。 プロジェクトを開始するにあたって、アプリケーション自体... 続きを読む

Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita

2019/01/14 629 users Qiita CSRF Laravel Vue ローディング

学べること Vue.js と Laravel を組み合わせる ルーティングライブラリ Vue Router を取り入れる 状態管理ライブラリ Vuex を取り入れる タブやローディングを作る Vue.js + Laravel の構成でクッキー認証と CSRF 対策を行う SPA でエラー処理を行う こんな人に読んでほしい Vue や Laravel について、 入門書を読んだあ... 続きを読む

Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita

2018/12/12 274 users Qiita TypeScript Vue.js 開発環境

※ この記事は気合を入れすぎてアドベントカレンダーの担当日を超過しそうになったため、後日追記予定とした項目がいくつかあります。 基本的には抑えるべきポイントは全て書いてありますが、サンプルコードを今後追加予定のため、 こちら のレポジトリをウォッチしておくことをオススメします。 Vue.js Advent Calendar ... 続きを読む

Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog

2018/11/15 114 users サーバサイド template Vue.js Shin x

日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / V... 続きを読む

2018年Vue.jsとVuexを使ってFluxをしている人には必ず知っていてほしい開発やメンテナンスの際に役立つVuexのTipsとサンプルコード

2018/09/29 93 users Flux Tips Vue.js with Vuex 画面

2018年Vue.jsとVuexを使ってFluxをしている人には必ず知っていてほしい開発やメンテナンスの際に役立つVuexのTipsとサンプルコード 初めに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 ... 続きを読む

Vuex でショッピングカートを実装できる無料コース「Vuex for Everyone」を受講した - kakakakakku blog

2018/09/15 315 users ショッピングカート Vue.js 進め方 無料コース 初心者

Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる． Vuex for Everyone 今回受講した「Vuex for ... 続きを読む

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips

2018/09/13 437 users コンポーネント Tips Vue.js with Vuex

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構... 続きを読む

Nuxt.js で Vuex の結合テストを書く方法を考えた - kitak's blog

2018/07/15 28 users ゲッター ステート 焼き肉 Nuxt.js 定義

この間、友人と焼き肉を食べていて、「Nuxt.js で Vuex の結合テスト書くのどうやってますか？」という話になったので、考えてみました。 Vuex の結合テストの定義 この記事では、アクションやミューテーション単体ではなく、 アクションをディスパッチした結果のステートやゲッターが意図通りになっているか確認するテ... 続きを読む

JavaScriptでClean Architectureを導入してみた - Vue.js・Reactのサンプルつき

2018/07/07 205 users Clean Architecture サンプル andy

事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architecture... 続きを読む

2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発した際の知見 - Qiita

2018/04/15 114 users jQuery Qiita StorYBook SSR 知見

私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えば jQueryのUIプラグインを沢山使ってるサーバーフレームワーク で Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などの ノウハウについて 記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今... 続きを読む