はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
PickGo_for_Partnerの移行方法から学ぶ_既存のネイティブアプリをFlutterへリプレイスする方法_.pdf
ここ最近、TypeScript の盛り上がりが本当にすごいですね。私ごとながら、昨年末からずっと書き続けていた TypeScript の技術書が、ようやく本日校了しました。Twitter で告知をしたところ、想像以上に反響があり驚いています。あれだけ高価な本、予約するには情報が不十分です。「買ってみたが期待はずれだった」という方が出ないよう、内容についてご紹介します。 対象読者もし皆さまが、体型的にアプリケーションを構築する術を身に付けたいと考えているなら、別途、書籍や文献をお求めください。本書は、JavaScript には存在しない、TypeScript 特有の知識を体系的に学ぶための一冊です。想定している対象読者は、ある程度 JavaScript でアプリケーションを作った経験がある方で、型の話がメインです。 本書の目的様々な事情から、TypeScript の現場導
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】 - Qiita
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】JavaScriptGoogleAppsScriptVue.jsQiita夏祭り2020_パソナテック 「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン - LINE ENGINEERING
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
Vue + Vuexで中〜大規模なアプリケーションの開発をするとき、どんな設計にするか未だによく悩みます。試してみては捨ててを繰り返していて、そろそろ自分の中でベターなパターンを固めたいと思いつつも固まらず、気づけば数年経ちました。 そういった前提を踏まえつつではありますが、現時点で設計時に意識していることをTips的に少しずつまとめてみようと思います。今回はVuexのGetterに関するお話です。 Getterの役割を見直す 副作用のないクエリとして実装する プロパティアクセスとメソッドアクセスを区別して命名する プリミティブでシンプルなクエリとして実装する 表示用の加工処理はComponentに実装する 例外1. 加工された値の賞味期限が長い場合 例外2. 加工処理が複数Componentで繰り返される場合 おわりに Getterの役割を見直す VuexはFluxアーキテクチャを参考に
Vue.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴開発室ブログ
みなさん、いかがお過ごしでしょうか。今年の7月からラボのマーケチームに加わったY.I.です。 好きな作品は「ゆるキャン△」です。お盆休みには「ゆるキャン△」舞台の富士山周辺でキャンプツーリングをしてきました。 ゆるキャン△に関しては熟知している私ですが、技術的にまだまだ未熟な開発者です・・・。活躍できるよう頑張っていきますので、どうぞよろしくお願いします。 さて、今回はVue.jsのテスト、とくにVuexのテストについて書いていきたいと思います。 0. この記事を読んでわかること 本連載では「ゼロから始めるVuexのテスト入門編」と題して、これまでVuexのテストを書いたことがない方を対象に、全2回に渡ってVuexのテストの詳細を書いていきます。 今回は連載の第一回目として、下記の構成でお送りします。テストの必要性やポイント、またVuexのテストがどのようなものになるのか感じ取っていただけ
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
iCARE Dev Meetup #19 2021/03/17
Vue.js に TypeScript を導入する障壁の一つに、状態管理の定番である Vuex が TypeScript と相性が良くないという課題があります。状態管理はアプリケーションの中枢（モデル）とも呼べ、型システムによる保守担保が求められます。この課題に対し、これまでコミュニティから様々なアプローチが試みられました。 Vue.js 界隈における TypeScript の型推論といえば、クラスベースによるものが一般的です。先行きの不透明なデコレーターだけでなく、関数型の流行によるクラスベースへの不安感は、いっそうユーザーを困惑させて来ました。いま Vue.js 界隈は、型推論と標準準拠の板挟みに葛藤していると言っても過言ではないでしょう。 私はこれまで TypeScript 芸人としてこの Vuex 型課題に取り組み続け、書籍執筆などで提案を行なって来ました。その過程で得た知見から、
Vue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blog
前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue 3.0が正式リリースされ、今年はNuxt 3.0も控えており、これからVue 3.0やComposition APIを本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
Vuex is an awesome state management library. It's simple and integrates well with Vue. Why would anyone leave Vuex? The reason can be that the upcoming Vue 3 release exposes the underlying reactivity system and introduces new ways of how you can structure your application. The new reactivity system is so powerful that it can be used for centralized state management. Do You need a shared state? The
これは 2020-01-10 に開催された、DDD meetup#3 でのLTの内容を記事化したものです。 Vuex+Express環境でどんなアーキテクチャを採用したか、して良かったこと／悪かったことを発表しました（LT資料はこちら）。 問題提起 フロントエンドでDDDを実践しようと考えて、結局採用を見送った経験のある方は以外に多いのではないでしょうか。ドメイン知識はバックエンドに集中させてフロントはできるだけライトウェイトに…。と、がんばっても、どうしても気になるものの一つがバリデーション。些末なことだけどバリデーションはれっきとしたドメイン知識。これだけ半端にフロントにいるの、気持ち悪いですよね？ 折角ドメイン知識をその他と分離するなら、フロントとバックでもそれらを共通化したい！できるんです。そう、Full-Stack JavaScriptでの開発なら。 結論 こんなアーキテクチャを
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態（入力／表示内容）を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要とな
# Vuex はなるべく避ける Vuex は、グローバル変数 state を使うために使います。 actions, mutations でグローバル変数 state を変更し、getters でグローバル変数 state を参照します。 たかだかグローバル変数 state を変更するだけで、こんなに大きな Vuex というライブラリがあるのか、疑問でした。 Vuex は、「いつ」、「どこで」、「だれが」、変更したのかを監視するためのライブラリです。 また Vue.js devtools を使えば、「いつ」、「どこで」、「だれが」 グローバル変数 state を変更 mutation したかを確認することができます。 Vue.js devtools - Chrome ウェブストア (opens new window) これら、いつ、どこで、だれが、変更したのかを監視したいという「気持ち」と、
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
こんにちわ、ななきです。 だいぶ前にVueをTypeScript化した的な記事書いたのですが、それから案件でもTS化したVueを使っていたのと最近の界隈の流れもありNuxtもTypeScript化してみました。 結果的にデコレータを使わずに、vuexもコンポーネントも型が効いており満足です。 ちなみにvuex部分にかんしてはこちらのリポジトリを参考にさせて頂きました。 コンポーネントのTS化 コンポーネントに関してはびっくりするほどやることないです。 $ yarn add ts-node $ yarn add -D @nuxt/typescript $ touch tsconfig.json $ nuxt build
💡 IntuitiveStores are as familiar as components. API designed to let you write well organized stores. 🔑 Type SafeTypes are inferred, which means stores provide you with autocompletion even in JavaScript!
少しずつでも出来るようになりたいもの、なに？ / What do you want to be able to do step by step?
今年6月に、実践TypeScript という書籍で、Nuxt.js に TypeScript を導入する方法を執筆させて頂きました。「書籍で扱っている Nuxt.js のバージョンが少し古いけど、今現在はどうするのが良いの？」という読者の方から寄せられた疑問に、アップデートとして私的見解をここにまとめました。（といっても、すでに日本語の良記事で紹介されている内容と変わりなく、n番煎じですmm） typescript.nuxtjs.org 少し日が経ちましたが、Nuxt.js の 公式TypeScript導入ガイド が公開されています。このガイドは、最新の Nuxt 2.10 以降向けとして書かれています。更新が目的であれば、Migration from Nuxt 2.8 を必ず確認するようにしましょう。 custom server framework で異なる型定義 基本的に 公式Type
morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行かず試行錯誤した部分があるのでそれを書こうと思います。 Nuxt SPAのテスト SSRを含まないNuxt SPAアプリケーションの構成要素は大雑把に次を含んでいます。 コンポーネント ページコンポーネントから使われる構成要素を実装したVueのSFC1 ページコンポーネント ルーティングとひも付きページを構成するSFC Vuexストア クライアントサイドでデータを格納しデータフローを制御するモジュール PluginやMiddleware Nuxtからフックされるモジュール その他ユーティリティ的なモジュール 他のコンポー
今月初めにリリースされた Vuex4 を Composition API + TypeScript で試してみたのでそのメモです。 この記事は以下バージョンにて検証しています。 vuejs/vue 3.0.5 vuejs/vuex 4.0.0 Vuexとは？ Vuex は、Vue.js 公式の状態管理ライブラリです。 Vue アプリケーション内に、どの階層のコンポーネントからでもデータを取得・更新できる単一のデータストアを作ることができます。Vuex を使うことで複数のコンポーネントで使う共有データの Props/Emit による過剰なバケツリレーが不要になります。 また、複雑になりがちな状態管理において以下の図のように特定のルールで制約を与えることでデータの流れを一元化して、コードの構造と保守性を向上させることができます。 （What is Vuex?） 使い方 Vue CLI で Vu
Vuexの根幹 【ストア】 【役割】 Vuexを使う上でアプリケーションの状態（情報）を保持する役割です。 Vuexのコンセプトである『Vuexは信頼できる唯一の情報源である事』が前提にあるため、ストアはアプリケーションの中でただ一つだけの根幹となる存在です。 今回はその大事な役割であるストアの４つの概念をまとめます。 ４つの概念 ・state→アプリケーションの状態（情報） ・getter→stateの一部やstateから返された値を保持する ・mutation→stateを更新（変化）させる ・action→非同期通信や外部APIとのやりとりを行う この４つを一纏めにしたものをモジュールと言います。 モジュールでこの４つを守っているイメージです。 ストアの作成 Vue-cliでVuexを取り込んでおけば、srcフォルダにstore.jsが入っています。 Vuexも読み込まれていますので
公開日 2019.6.2更新日 2019.6.16カテゴリ：Vue.jsタグ：JavaScript,Vue,Vuex
滑り込みで東京オリンピックの抽選申し込みを済ませました、Webエンジニアの本間です。 どの日でもよいので抽選に当たって欲しいのですが、全部当たると困ってしまう、なかなか悩ましい気持ちになりました。 さて弊社では、現在開発中のプロジェクトのフロントエンドの実装において Vue.js を使っています。 今回、Vue.jsを使った実装をしている中で、複数ページにまたがるフォームの実装で調査した内容を紹介しようと思います。 想定する画面 今回想定するのは、「入力画面1」←→「入力画面2」←→「確認画面」→「完了画面」のような遷移でフォームをsubmitする画面一覧です。 この手の画面、サーバーサイドのみで実装しようとすると大変だったのですが、モダンフロントエンドの機能を活用することでかなり楽に実装できるようになりました。 このような画面をVue.jsで実装することを考えます。 Vuexを使う場合
shiodaifuku.io
Webエンジニアのブログです。
アナハイムに行ってきた！AWS_reInforce_2023参加報告（速報版） / AWS re:Inforce 2023 Participation Bulletin
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
本文書ではできるだけシンプルな例を通してVuexの説明を行っていきます。Vuexを使った経験がないという入門者の人また下記の図がわからないという人を対象にしています。Vuexが難しいなと感じている人がいるとすれば用語がこれまでのvue.jsよりも増えていることまた記述方法が長かったり短縮形によって複数の書き方があることが原因だと思います。一度理解してしまえば決して難しいものではないので安心して読み進めてください。 vuex diagram Vue3では新たに状態管理のライブラリとしてpiniaが登場しました。Vue3で新しいプロジェクトを作成する場合にはpiniaを利用することが推奨されています。
入門: Vue.jsで認証機能を作る - Qiita
はじめに 前回、Vue.jsとQuarkusでCRUDアプリを作ったので、今回は簡単な認証機能を作ってみました。 Firabase認証とかJSON Web Signature（JWS）使うとかFIDO2だOIDCだの実際にログイン機能を作る時には選択肢は色々あると思います。 ただ、そもそも「Vue.jsで認証機能ってどう作るの？」ってところから良くわかってなかったので、今回は余計なことは除いてサーバ側は認証をスケルトンにしたトークン認証として実装しました。 基本的な考え方 認証機能をどう作るかはフレームワークなどにより異なります。 一般的なサーバサイドで動くWebフレームワークであればセッションで判定するでしょう。サーバ側で制御するのでJSなどクライアント側ではあまり気にしなくて良かったのですが、Vue.jsのようなSPAの場合はクライアント側にも作り込みが入ります。 Vue.jsの認証で
Vuex の新しいライバル？ Pinia のご紹介
Pinia は Vue.js 向けの状態管理ライブラリです。 昨年に知ったときは「experimental なプロジェクト」という注意書きがあったのですが、先月にその表記がなくなっていたので少し触ってみました。 （ちなみにスペイン語でパイナップルの意味だそうです）
muraveです。ごぶさたしております。 Nuxt.jsとかVue.jsの小ネタをまとめて書こうと思ったのですが、これは分けておいたほうがいいかな？と思ったので先に書いておきます。 Vuexのモジュールによる名前空間は処理を分割管理するのに便利です。 モジュール | Vuex ですが、他のモジュールのメソッド(action, mutation)を呼ぶことができない(と思っていた)ので、不便に感じつつルートであるindex.jsに共通処理を集めたりなどしていました。が、先日、呼び出し方法に気づきました。 前掲のモジュールのドキュメントにあるように名前空間内で普通にdispatchやcommitを使うと同一名前空間のaction、 mutationが実行されます。 rootオプションがあり、これを渡すことでルートのものを呼ぶこともできます。 ドキュメントのサンプルコードから抜粋して引用します。
環境 Vue.js 2.5.17 Vuex 3.0.1 webpack 3.12 前提条件 コンポーネント毎にdataオプションで保持データを管理するのは厳しいので、Vuexの状態管理で一元管理することが前提です。その方が、ストアの管理だけに集中できますので楽ちんです。 dataオプションからVuexへの移行は配列構造を除いて難しくありませんでした。 オブジェクトの配列をVuexのストアと各コンポーネントに設置するコントロールへバインドする方法だけ模索する必要がありました。その記事はこちら。 localStorageの読み込みと保存の実装 本当はプラグインにした方がよさそうですがはじめての実装なので、Vuexのストア構造内に直接実装します。分けたくなったら分ければいいかなぁという感じです。 シミュレーション用のデータ構造として以下のようなstore構造があります。 ※ getters、mu
Vue + Vuexを使ったWebアプリケーションを開発していて、以下のような悩みにぶち当たったことありませんか？ 悩み1. VuexのmapHelperを使うとコードが読みにくくなる 「created内で呼ばれているこの関数はどこに定義されているんだ…？ methods？ それともStoreのアクション…？」 「import部分を見るにこのComponentはどのStoreにも依存してなさそうだ…。と思いきや、mapStateでいろんなStoreの値を読み込んでいるぞ…」 悩み2. ビジネスロジック層がない 「ページ読み込み時に走るAPIアクセスはどこに実装されている？ Componentのcreated？ Storeのアクション？ ロジックがまとまっている層がなくて処理の入り口を見つけにくい…」 「クリックされたら見た目を変えてAPIアクセスしてStoreを更新する実装をしたいけど、ど
Vuex 5でどのように変わるのか？
はじめに 現在リリースされている Vuex の最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのバージョンであり、 Vuex 3 と同じ API となっています。 そのために現状 Vuex の問題点としてよくあげられている TypeScript サポートの問題点を解決できていません。 Vuex 5 は Vue 3 において Composition API による Reactivity API が登場したことにより Reactivitty API によってどのように Vuex をどうさせるか再考されたバージョンとなっています。 Vuex 5 は以下の点にフォーカスしています。 グローバルな状態を定義する コードの分割 SSR サポート Vue Devtools のサポート 拡張性 「グローバルな状態を定義する」「コードの分
VueVueJS で Storybook を使うモジュラーと再利用可能なコンポーネントを作るために Vue と Storybook でコンポーネント ライブラリを構築する方法を学びましょう。 Storybook はインタラクティブに開発し、ユーザー インターフェイス コンポーネントをアプリケーションを実行しないでテストできます。Storybook は独自の Webpack 構成でコンポーネント ライブラリとしての役目を果たすので、プロジェクト依存関係や要件を気にせずに個別に開発できます。 本投稿では、チームメートの Steve Hobbs 氏が作成した人気のカンバンボード プログレッシブ Web アプリケーション（PWA）（GitHub で入手可能）を使って、Storybook を既存の Vue.js プロジェクトに統合する方法を学んでいきます。このプロセスは新しい Vue プロジェクトに
PHPの人気のフレームワークLaravelではWebサイトの管理画面を開発することができます。 このシリーズではそんな管理画面の構築に関して、技術者向けにその手順を紹介しています。 この記事ではVuetifyを利用してCRUDを作る方法をご紹介！ Nuxt.jsからLaravelのAPIをAjaxで通信できるようにする手順はこちらの記事で解説。CookieによるAPI経由のユーザー認証機能を作る方法はこちらの記事で解説しています。 ・Laravelを使って構築をしたい方 ・Webサイト構築の具体的な手法が知りたい方 これらに当てはまる方におすすめの記事となっています。このシリーズを読めばLaravel6とNuxt.jsで管理画面を作成することができますよ。 Vuetifyを使う理由VuetifyはマテリアルデザインベースのVueのUIコンポーネントライブラリです。 Vueを使って画面を作り
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レガシーおじさん、SPAを始めてみた。そして限界を知る
今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita
Vue.jsを100時間勉強して分かったこと - Qiita
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
実践TypeScript - 内容のご紹介 -｜Takepepe
VuexのStore設計のTips - 薄いGetter
Vuex型推論・最終章 - vuex-guardian - - Qiita
You Might Not Need Vuex with Vue 3
Full-Stack JavaScript meets DDD. - Qiita
Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう
なんで Vuex はなるべく避けるの？ | 民主主義に乾杯
Nuxtでデコレーターを使わずTypeScriptを書いてみた | Mix Design
Pinia | The intuitive store for Vue.js
TypeScript CompilerAPI によるVuexの参照型生成
Nuxt.js TypeScript - 実践TypeScript アップデート - - Qiita
NuxtアプリケーションをJestでテストする - アクトインディ開発者ブログ
Vuex4 を Composition API + TypeScript で入門する
【Vuex】ストアの4つの概念まとめ【唯一の情報源】 - Qiita
Vuexを用いたVue.jsアプリケーションのシンプルな状態管理とデータフロー
Vue.jsで複数ページにまたがるフォームをVuexを使わずに実装してみる - ユニファ開発者ブログ
Meta Library VS Meta Type Definitions
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
入門者必読、vue.jsの状態管理Vuexがわかる | アールエフェクト
Vuexのモジュールから他のモジュールのメソッドを呼ぶには « LANCARD.LAB｜ランカードコムのスタッフブログ
【Vue.js】Vuex + LocalStorageで入力内容をブラウザに保持する | kawadeblog
Vue+VuexのデータフローをCQSライクに設計する方法
VueJS で Storybook を使う
VuetifyでCRUDを作る手順【Laravel6とNuxt.jsで作る管理画面】 - Deha magazine
www.hbc.co.jp
hkmn.jp
mainichi.jp
products.enkinlab.com
twitter.com
fabcross.jp