Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜Vue.js の設計地図を作成しました。設計概念の依存関係の図式化して理解し、 フロントエンド設計をモデリング起点で考えたブログです。
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 CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる - Qiita
この記事について ついに Vue CLI 3.0 がリリースされました Vue CLI 3.0 is here! – The Vue Point – Medium Vue CLI 3.0 で Vue.js in TypeScript なプロジェクトをさくっとつくってみたので、その記録です。 3.0 では、プロジェクト作成時に TypeScript を選べるようになっており、Vue.js in TypeScript での開発に必要な諸々をまるっと入れてくれるので、新規開発で TypeScript を導入するハードルがグッと下がってるんじゃないか、と期待が膨らみます。 概要 Vue CLI: 3.0.0 TypeScript: 3.0.0 webpack: 4.16.5 Vue CLI 3.0 でプロジェクト作成すると TypeScript と webpack は上記のバージョンがインストール
Vue.jsでreg-suitを利用したVisual Regression Testing | tsuchikazu blog
これは Vue.js #3 Advent Calendar 2017 - Qiita 1日目の記事です。 最近、お仕事でVue.js x SSRを使って開発を進めていた カラーミーリピート というサービスをリリースすることが出来ました。このサービスの開発を進めていく上で、とあるcssの修正が想定外の場所にも反映されてしまい、スタイルが崩れてしまう。という問題が時々発生していました。リリース前まではそれほど問題視してきませんでしたが、今後スタイル崩れに気付かずにリリースしてしまうのは非常に問題で、なんとか防ぐ方法を探していました。 先週末に東京Node学園祭2017が開催されましたが、そこで@QuramyさんのIntroduction to Visual Regression Testing の発表資料を拝見してreg-suitの存在を知り、これは求めていたものではないか！？ということで、V
Vuex内のaxiosをモックしてテストする - istyle Tech Blog
こんにちは、アイスタイルのVue.jsマン（自称）ことkubotakです。 今回はVue.jsにおける、Vuexのactionsでaxiosによる非同期通信取得をしている場合のテストと、クライアントのテストに関して紹介したいと思います。 （若干私的な備忘録も兼ねてます） テストコードに関しての説明となるのでjestやaxiosについては割愛します。 前提条件 vue-cliにより作成したプロジェクト jestでのunit test ajax通信はaxiosで行なっている axiosクライアントをラップしたクライアントモジュールを用意する クライアントのテスト axiosクライアントをラップしたクライアントモジュールの実装としては以下のような感じです。 import axios from "axios"; export const client = axios.create({ baseUR
VueコンポーネントのState管理を考える - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の3日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 一休.comにVue.jsを導入して、約1年が経ちました。スマートフォン版の予約入力画面から始まり、PCとスマートフォン版のホテルページほか、さまざまなUIコンポーネントがVue.jsで実装されるようになってきています。 また、予約入力画面のような複雑な状態管理を伴う画面の実装のため、Vuexを導入しています。 ここ1年ほどVue.js + Vuexというスタックで開発を行ってきて、アプリケーションの設計について色々と思うところがあったので、今回は現状でどういう構成が最適と考えているか、紹介します。 Vue.jsアプリケーションのState Vueコンポーネントには、親から受け取るpropsと、自分自身で保持するstate(data
Vue.js / Nuxt.js を採用した Web 開発で得た知見 | rakuishi.com
2018 年に入ってからは Vue.js / Nuxt.js を採用した Web サイト開発に携わっています。ログイン機能がある Web サイトで、データは API サーバーを叩いて取得するという構成。最近のフロントエンド開発は、感覚としてはアプリ開発ですね。 Vue.js に加えて Nuxt.js を採用したのは SSR（Server Side Rendering）をしたいという理由に尽きます。SSR することによるメリットは、以下となります： Facebook や Twitter が OGP タグを正しく評価してくれる 検索エンジンがサイトを正しく評価してくれる 副産物として、ログインユーザー情報が描画されて返るため、クライアント側で描画されるまでの空白状態がユーザーに見えない この記事ではそんな Vue.js / Nuxt.js を採用した Web 開発で得た知見を紹介していきます。
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Vue.js+TypeScriptで開発するときの参考記事まとめ | iret.media
概要 Vue.js+TypeScriptで開発する際によく参考にしている記事をまとめています。 自分用なので、自分記事が若干多めです。随時更新 この記事良かったよーとか、教えていただけると助かります。 環境構築 Vue CLIのプロジェクト管理UIがいい感じだった https://cloudpack.media/43013 DockerでVue.js+TypeScript開発環境を構築する https://cloudpack.media/43078 Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript開発環境をつくってみた https://cloudpack.media/42905 設計 最近のフロントエンドのコンポーネント設計に立ち向かう https://qiita.com/seya/items/8814e905693f00cda
Vue.jsのテストをモダンにする - Qiita
はじめに 1年半前くらいに弊社のVue.jsプロジェクトのユニットテスト環境を「Karma + Mocha + power-assert」で作成し、現在までメンテナンスしながら使っていたが、「Jest + vue-test-utils」が非常に良さそうなので、環境を全て作り直すことにした 作り直したコードですが、弊社のコードは公開できないので、プライベートでメンテナンスしている以下のリポジトリで確認できる https://github.com/kurosame/vuejs-boilerplate Vue.jsとVuexとTypeScriptを使っている テスト対象 今回は以下をテスト対象とした Vuex Action Mutation Getter (State) ⇒ 初期値を設定する時に分岐などのロジックを入れた場合があれば書く Vue.js コンポーネント全て そもそもなぜテスト環境を
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as
FirebaseUI for Webを日本語化してVue.jsで使う - uphy’s tech blog
FirebaseUI for Webを、日本語化して、Vue.jsでコンポーネント化して使ってみます。 FirebaseUI for Webとは FirebaseUI for Webは、Firebase Authenticationによるログインのボイラーポレートコードを、シンプルに書けるjs/cssです。 こんな感じで <script src="https://cdn.firebase.com/libs/firebaseui/2.4.1/firebaseui.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.4.1/firebaseui.css" /> <div id="firebaseui-auth-container"></div>
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
時間をかけずに開発環境を構築するための3つのTips
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやService Workerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「開発環境構築に時間をかけない」に登場したのは、katashin氏。開発環境の構築を省力化するための3つのポイントを解説します。講演資料はこちら 開発環境の構築に時間をかけない katashin氏：よろしくお願いします。みなさん開発環境自体のお話をしていましたが、僕はどちらかと言うとそれを構築するまでの時間を短くする、本質的じゃないことに時間をかけずに、効率よくモノを作っていきましょう、というお話をしたいと思います。 僕はkatashinといいます。黄色いネコのアイコ
基礎から学ぶ Vue.js
どんな本？ 機能ごとに解説している Vue.js 入門書です。これからはじめる方にも、すでに Vue.js をお使いの方にも、楽しんでいただける内容になっています。 しっかり学習できる！ Vue.js は直感的に使える機能が多く、雰囲気で使ってしまいがちです。どんなメリット＆デメリットがあるかも解説しているため、しっかりと学習できます。 「Vue.js が楽しい！」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の進化によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに？」「フレームワークってなに？」という基礎概念と導入からプロダクトに役立つ情報までを体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuexが絡んだVueコンポーネントのテスト | Fusic Tech Blog
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event - Speaker Deck
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
