ReactとVue、どっちが書いていて楽しいか検証してみた
はじめに はじめまして。 2019年3月に入社した正岡です。 平均週に4回、大分県中津のから揚げ弁当を食べている大の鶏好きです。からあげクンと呼んでください。 主に Rails × Typescript のプロジェクトにフロント／バックエンドエンジニアとして参加しています。今後ともよろしくおねがいします。 本記事の内容 およそ１年前、弊社ではDocBaseのユーザーの皆様により良いユーザー体験をしていただくために何ができるかを検討しました。結果、フロントエンドを改修して SPA（Single Page Application） に移行することで、従来よりも速く、快適にご利用いただけるのではないかという結論に至り、ご存知の通り先日リリースいたしました。 フレームワークどれを使うか問題 既存サービスのSPA化などのフロントエンド改修を検討する際、「フレームワークどれ使う？」問題にぶち当たります
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を本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
Vue.js UI UX DX Library - Inkline
Configuration file, design tokens, toast notifications and more!Your next Vue.js project deserves the best developer experienceInkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems. More than just a UI LibraryWhile many UI libraries focus solely on UI and UX, they often overlook the most crucial element - th
Vuex4 を Composition API + TypeScript で入門する
今月初めにリリースされた 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
原子の再定義 - Atomic ReDesign -
Atomic ReDesign とは 「Atomic ReDesign」 は、かの有名な「Atomic Design」の拡張概念です。React や Vue.js を用いたコンポーネント設計において、私たちはしばしば頭を抱えることがありました。UI 粒度の分類制約は、コンポーネント設計最適化を阻むことがあるからです。 「この粒度のコンポーネントはどこに属するものなのか？」という疑問に対し統一された解はなく、プロダクト毎の性質によって定める必要がありました。また、文脈が散在することにより、コードに対する集中力低下を招きました。 Atomic ReDesign は顕在化した 「Atomic Design とアプリケーション設計の乖離」 をとらえ、現実的な設計指針となることを目指します。 Atomic Design とアプリケーション設計の乖離 本家 Atomic Design はデザインシステ
実際のサービスをRails＋Vue.js(Single File Components)を用いてSPAへリファクタリングした話
エンジニアの西辻です。 今回の記事では、Railsプロジェクトで一部の画面のみをVue.jsを用いてSPA化するにあたって、その際に得た知見などを共有できたらと思います。 Overview 大きく以下の流れで書いていきます。 Motivation RailsとVue.jsの連携方法について調査、部分的なSPAが実現可能かの検証 実装を進めていく中での気づき スマホ対応の方針決め 最後に Motivation まず、なぜRailsプロジェクトで一部の画面のみをSPA化する必要があったかの背景を説明したいと思います。 今年の5月からtoB向けの管理ツールを新規開発したのですが、その際にjQueryだとコードの見通しが悪いのでVue.jsを積極的に利用していこうという話があり、チームメンバーでVue.jsを学習しながら開発を進めていました。 管理ツール自体は無事リリースでき、稼働はしているのです
Turbolinks、時々Vue.js - Misoca開発者ブログ
こんにちは、@mugi_unoです。 今年は雪がスゴいですね。 暖かい我が家でリモートワークのありたがみを日々噛み締めています。 先日は雪だるまを作りましたが、想像とは違う仕上がりになりました。 娘は「これじゃない！」と不満そうでした。 新しいRails&フロントエンドの環境構築 さて、最近Misocaでは、新規Railsアプリケーションのフロントエンド環境を整える機会がありました。 チームで検討した結果、Turbolinks&Vue.jsを採用しており、 その際に得られた知見を紹介したいと思います。 Turbolinksを使う理由 TurbolinksはGoogleで検索するとサジェストがこんな感じになるほど無効化されがちです。 利用するために理解すべき独自の挙動がある ゴリゴリにフロントエンドを触っている人からすると 「そこまでやらないで〜〜！」といった気持ちになる といった具合に避け
VueJs and Turbolinks
The primary challenge with using Turbolinks with a front-end framework like Vue is managing what happens when Turbolinks caches the page. When Vue mounts a component, it clobbers the element it attaches itself to. As a result, care is needed to ensure the component can be reloaded when a page is rendered from the cache. To ensure that a Vue can be rebuilt on each turbolinks:load event be they a ne
「レストランボード」における大規模フロントエンドの漸進的なVueリプレイスの取り組み
はじめに こんにちは、レストランボード（以下、RB）のフロントエンドチームの石亀です。担当していた規模の大きめなプロジェクトでVueを結構触っていまして、設計含め困難と向き合いながら色々取り組ませてもらったのでそれをナレッジとして残そうと思い記事を書くことになりました。エモいですね。 RBは現在自社のフレームワークで構築されていて、徐々にVueでリプレイスをかけています。 今回、大規模なプロジェクトにてVueでさらなるリプレイスを実行しましたが、プロダクト自体がとても大きく且つ限られたリソースの中でいかに負債化させずにできるだけ安全に移行させるかを検討しました。 そこで実際に実施した施策や検討内容などを紹介します。 おそらく、多くのサービスやプロダクトで既存のコードを新しいライブラリ・フレームワークで書き換えているかと思います。 背景だったり関わる規模・コンテキストが異なるとは思いますが、
タグ入力のVueコンポーネント色々試す | 一人もくもく会
各ソーシャルアカウントでのログインや当サイト上の操作により、無断で自動的にツイートや投稿、SNS上の情報の更新が行われることはありません。 アカウントの情報はプロフィールの表示のみに使用されます。 当サイトでは明示的にユーザーが選択した場合のみにツイートなどを行うことが出来ます。
Rails と Vue.js の設計覚書 - Qiita
はじめに これは Rails の View と Vue を馴染ませるための設計指針になります。 Rails 5.1 で webpack や Vue が公式サポートされました。SPA の場合はあまり気になりませんが、スタンダードな Rails 構成に Vue を適用する場合は、Rails の View と Vue をどのように管理すべきか悩むことになると思います。本記事にはその対処例をまとめています。 環境 Rails 5.1+ Turbolinks 5.0+ webpack 2.0+ Vue 2.0+ Vuex 2.0+ 参考 【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita Rails と Vue の導入に関しては、こちらが参考になります。 この内容を踏まえた上で、その先の設計周りについて考察していきます。
GitHub - vuejs/vue-codemod: Vue.js codemod scripts
RFC01: New slot syntax and RFC06: Slots unification Can be detected and partially fixed by the vue/no-deprecated-slot-attribute and vue/no-deprecated-slot-scope-attribute During the transition period, with the 2 ESLint rules enabled, it will warn users when they use this.$slots, recommending this.$scopedSlots as a replacement When upgrading to Vue 3, replace all .$scopedSlots occurrences with .$sl
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
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
2020/08/25 の #v_tokyo11 で話した登壇スライドです。
eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ
フロントエンドチームの右京です。 Vue.js 3 が八月上旬にリリース予定ということで、BASE でもバージョンアップに向けて少しづつアクションを始めています。 Vue.js 3 では多くの機能が追加され開発の幅が広がりますが、一方で削除や非推奨となる機能も多く頭を悩まされている方もいるのではないでしょうか、BASE もそうです。 この記事では ESLint とその Vue.js 向けプラグインの eslint-plugin-vue を利用した、deprecated となる機能へのアプローチを紹介します。 なぜ eslint-plugin-vue か ESLint には Vue.js の SFC のためのプラグインとして eslint-plugin-vue が開発されていて、BASE でもこれを利用しています。 このプラグインには vue/no-deprecated- で始まるルールがい
Vue Testing Handbook
Get $5 of my new book, Design Patterns for Vue.js a test driven approach to maintainable applications, with DESIGN_5_OFF at the discount. 🎉 # Vue.jsテストハンドブック Vue.jsテストハンドブックにようこそ！ このハンドブックはVueコンポーネントをどうテストするか簡単な例の集めたものです。コンポーネントをテストする公式ライブラリーのvue-test-utilsとモダーンテストフレームワークのJestを使います。vue-test-utilsのAPIとコンポーネントのテストの最適な実践を紹介します。 各セクションはその他のセクションとは独立してます。最初はvue-cliをインストールしてテスト環境を準備してから最初のテストを書きます。そしてコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React と Vue に関する XSS アンチパターン
BASEにおける Vueコンポーネント設計の現在
vue-nextから始める ソースコードリーディング
まもなくやってくる Vue.js 3
