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をインストールしてテスト環境を準備してから最初のテストを書きます。そしてコ
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
【vue.js】Vuefityをマスターする(1) | アールエフェクト
VuetifyはVue.jsのUI(ユーザインタフェース)のライブありでVuetifyを利用することでデザインの知識がなくても効率的に美しいGUI画面を作成することができます。しかし使いこなすためにはプログラミングの知識が必要となるためVuetifyの基本的な使用方法を理解しておく必要があります。 本文書ではVuetifyがマスターできるように実践的なダッシュボードの作成を通して使用方法を確認していきます。 説明は2回に分けて行い、1回目である本文書ではダッシュボードのレイアウトの作成方法とルーティングの設定方法を確認します。本文書を読み終えるとVuetifyを利用して自分の力で下記のダッシュボード画面を作成することができます。 ダッシュボード画面 2回目ではダッシュボードに表示させるグラフコンポーネントを使って、Grid System(グリッドシステム)やResponsive Desig
スタイリッシュな管理画面のVue.js対応デザインテンプレート 26選 | sounansa.net
業務システムなど、SPA（シングルページアプリケーション）の技術が主流となり、AngularとReactの両雄が主要どころではありますが、どちらも嫌いという人も少なくはありません。 主な理由としては、Angularは難しくて学習コストかかるし、Reactは制限付きBSDライセンスの問題もあって会社での導入は法務部が難色を示すとかの理由で避けたいといったところでしょうか。 そうなると３番手ということでVue.Jsでしょ。 Vue.jsもvue-routerとかのライブラリを使えばSPAを実装できます。 Vue.jsの管理画面デザインテンプレートも数は少ないけど、あるにはあります。AngularとReactの管理画面デザインテンプレートを紹介したのだから、せっかくなのでVue.jsも紹介しちゃいます。 Vue.jsの有料テンプレートはLaravelでバックエンドもセットになっているものも結構あ
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
jQueryからVue.jsに乗り換えて良かった点・悪かった点をまとめてみた！ - クラウドワークス エンジニアブログ
今年の3月からクラウドワークスで働き出した高梨です！ さっそくですが、 最近、jQueryで書いていたJavaScriptをVue.jsに変えていくということをやりました！ 「がっつりcomponent化して、API用意して、SPAにして・・・」 みたいな感じではなく、 最低限jQueryでやっていた表示・非表示の処理だったり、金額を計算するといった処理を そのままVue.jsに置き換えていくという感じですね。 実際、Google Trendを見ても ここ数年でVue.jsの人気が急激に伸びているのは事実です。 （実はReactにも大差をつけている） 【Google Trend JS比較】 https://trends.google.com/trends/explore?date=today%205-y&q=vue.js,react.js,angular.js ここでは、実際に実装してみて
Laravel + Vue.js でOauth認証を利用したサンプルSPA構築
タイトルの通り、Laravel + Vue.js でOauth認証を利用したサンプルSPAシステムの構築を行いました。 github https://github.com/shnr/laravel_oauth VM立ち上げ、Laravelインストール Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [1] VM立ち上げ、Laravelインストール BrowserSync連携 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [2] BrowserSync連携 簡易CRUDの作成と認証機能の実装 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [3] 簡易CRUDの作成と認証機能の実装 Oauthサーバの実装 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [4] O
LaravelでのAPI開発を爆速にするためにやっていること
2019年2月16日、PHPのフレームワークであるLaravelをメインテーマに据えた技術カンファレンス「Laravel JP Conference2019」が開催されました。「Laravel JP」を冠したイベントとして日本初開催となる今回。数多くのLaravelユーザーが参加し、知見を共有します。プレゼンテーション「LaravelでのAPI開発を爆速にするためにやっていること」に登壇したのは、株式会社SCOUTERの松本宏太氏。自社のAPI開発において取り組んでいることについて語りました。講演資料はこちら LaravelでのAPI開発を爆速にするためにやっていること 松本宏太氏（以下、松本）：お越しいただきありがとうございます。『LaravelでのAPI開発を爆速にするためにやっていること』というタイトルで発表させていただきます。よろしくお願いします。 もしかしたら知ってる人がいるかも
Laravel + JWTAuth + Vue.js でAPIログイン認証の実装
Posted: 2018.10.11 / Category: PHP / Tag: Laravel Laravel + JWTAuthでAPIログインを実装して、Vue + VueRouter で簡易的に使用するところまでやってみます。 Laravel認証の設定 最初にLaravel側を作っていきましょう。 artisanで標準のWeb認証機能をサクッと作ります。 ターミナルで下記コマンドを実行します。 $ php artisan make:auth $ php artisan migrate シーダーでダミーのユーザー情報も登録しておきます。 database/seeds/UsersTableSeeder.php <?php use Illuminate\Database\Seeder; class UsersTableSeeder extends Seeder { public fun
SPA開発未経験者によるNuxt.jsを使った自社サービス開発の裏側
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「SPA開発未経験者によるNuxt.jsを使った自社サービス開発」に登壇したのは、株式会社リビルドの嘉数侑起氏。講演資料はこちら SPA開発未経験者によるNuxt.jsを使った自社サービス開発 嘉数侑起氏（以下、嘉数）：みなさん、こんばんは。「SPA開発未経験者によるNuxt.jsを使った自社サービス開発」というタイトルで、プレゼンさせていただきます。株式会社Re:Buildの嘉数と申します。よろしくお願いします。 こちらがアジェンダです。 今回、Nuxt.jsをこれから導入しようと検討し
【前編】Vue CLI + Laravel によるMSPA (Multi-Single Page Application) - CYDAS Developer's Blog
大阪からこんにちは、福山健（@kenfdev）です！ 最近はLaravelとVueを触ることが多く、開発のしやすい仕組みづくりについて考えてます。Laravelは最初からフロントエンドの開発がしやすいように Laravel Mix の仕組みが用意されています。これを使うとさくっとVueやReactなどのSPAのパイプラインもLaravelに組み込むことができます。 とはいえ、 バックエンドにLaravelを使い続けるかわからない フロントエンドエンジニアにLaravelを極力意識させたくない Vue CLIをそのまま使いたい Vue CLIの中でも pages 機能を使ってMSPA（Multi-Single Page Application）を作りたい というような思いがある人も一定数いるのではないでしょうか？ 上記をふまえて、VueCLIを使ってフロントエンドを作り、バックエンドをLar
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
Laravel 6 でVue.jsやReactを使う - Crieit
Laravel 6 が先日リリースされました。Laravel 5 との違いとして、プロジェクトの初期化時にVue.jsのリソースが自動生成されなくなりました。そのため、引き続きLaravel 6でも使用したい場合は追加で導入する必要があります。 laravel/uiをインストール まずはフロントエンドの初期化を行うためのパッケージとしてlaravel/uiというものがありますので、それをインストールします。 composer require laravel/ui --dev JavaScriptとCSSの生成 uiライブラリを使って各種JavaScript、CSSのファイルを生成します。 Vue.jsを使う場合 下記のコマンドで生成します。 php artisan ui vue packages.jsonにパッケージが追加されるのでインストールします。 yarn 念の為正常にビルドできるか
React のユーザーから見た今後のフロントエンドの予想
この記事は議論のたたき台で、ポジショントークや、偏見にまみれています。 今のフロントエンドの分類 古典的なサーバーサイド WAF への +α の味付け 大規模なクライアントアプリケーション管理のための SPA SEO / SSR を考慮した Node ヘヴィーな環境 他、提唱されてるパターン マイクロフロントエンド - マイクロサービスのフロントエンドへの応用 JAMstack | JavaScript, APIs, and Markup PRPL パターン | Web | Google Developers 今の React & Vue の受容され方 仮想 DOM アルゴリズムや、SPA を作るためのものというより、単なるテンプレートエンジンとして受容されている節がある。Web 制作で jQuery は絶対に滅びないと言われていたが、その潮目も変わってきているように見える。 クソ
【CTO meetupイベントレポート】JavaScript（Angular,React,Vue）～進化し続ける技術について～ | flexy（フレキシー）
技術の流れが速い中、どうやって技術選定をしている？ 案件のスピード感や企業規模によって異なる技術選定基準 小林：フロントエンドにはさまざまなトピックがありますが、今回はJavaScriptを中心にディスカッションしていきたいと思っていますので、よろしくお願いします。 まずは現在の技術の流れが速い中で、みなさんがどのように技術選定をしているのかというテーマですが、簡単に今までどのような技術を使ってきたのか、その選定基準などを教えていただければと思います。 林：管理画面系のフラットアプリケーションの構築にAngularを採用しました。いろいろな選択肢がある状態だったのですが、迷っているだけの時間がなかったことと、Angularに詳しいメンバーが多かったという要素が採用の大きな理由です。 古川：僕の場合は3年前に開発を始めた案件でReactを採用しましたが、完全にタイミングでした。 まず、リクル
JavaScript: フレームワーク React/Vue/Angularについて
フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S
Ionic x Vueでモバイル向けWebアプリの爆速開発を始めよう！ | DevelopersIO
Ionic x Vueでモバイル向けWebアプリを開発！ Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 Ionicは主にモバイルアプリ向けのオープンソースのUIツールキットのことを指しますが、IonicにはIonic Native（Cordovaを利用したネイティブサポート）、Studio（GUIソフトウェア）、Mobile DevOps（CI/CD）も含まれており Webフロントの技術（HTML/JS/CSS）を活用したモバイルアプリ開発の統合フレームワーク と言えます。 UIツールキットとしては、非常に綺麗なコンポーネントが用意されており、Webアプリの中にシンプルかつ簡単に用いることができます。 Ionicは2013年の登場から徐々にバージョンアップされており、現
Vue.jsとFlaskでフルスタックなWebアプリの開発環境を構築 その１〜〜環境構築〜〜 - 雑食へいちゃんの思い出達
はじめに vue-cliで雛形のインストール（フロントエンド） サンプルページの追加 ビルドディレクトリの変更 Flaskのインストール（バックエンド） Flaskのサンプル作成 404ページの追加 APIの追加 終わりに はじめに 最近のWebアプリはReact.jsやVue.jsを使用したSPAが主流かと思いますが、データ取得のAPIを実装したりなど、サーバサイドの実装も必要になります。 自分はJavascriptに不慣れなのでサーバサイドはJavascriptではなくPythonを使いたかったので、Flaskと共存できる構成にしたかったのがきっかけです。 いろいろと探してみたらすでに先人がやっていました。 Full-stack single page application with Vue.js and Flask Single Page Apps with Vue.js and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【SPA】Laravel + Vue.js + JWT認証でメールアドレス送信を行い登録するまで part.1 - inokawablog
KUNINORI Log Ver 2