宮崎在住エンジニアのジョウ(@JotarO_Oyanagi) です。 Vue.js 用 UI ライブラリ Element の要素に対し、Scoped CSS を使う場合に起きうる問題（後述）への対応策を紹介します。 TL;DR Element の要素に Scoped CSS のスタイルが適用されないケースがある。 原因は、通常の記述方法だとセレクタの子要素に data 属性がつき、そこに対してスタイルがあたるが、Element が書き出す一部の要素には data 属性がつかない。 対応策としては /deep/ セレクタを使用する。 Scoped CSS とは コンポーネントごとの CSS を書ける仕組みです。 <style scoped> とすると、そこに記述されたセレクタに対し、ユニークな data 属性がつき、その data 属性がセレクタに付加されます。 具体的にはどういうことか、公

はじめに 私はVue.js with Vuexを使った業務で1画面３０APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 その際に得られたノウハウを言語化し、共有出来たらと思います。また、これらのノウハウよりも良いノウハウがあった場合は共有・議論して頂けるととても嬉しいです。 ※注釈 この記事はサンプルコードが全然ないです。 OSSの様に気軽に編集リクエストでサンプルコード等を提供頂けたら幸いです！ 目次 コンポーネント設計の使い分けの効果 コンポーネントに関わるレンズの種類と重要性 技術者のレンズから覗く、コンポーネントの分類 プレゼンテーションコンポーネントを更に分類 複雑なコンポーネントの設計パターンとパターン名 デザイナーのレンズでコンポーネントの分類と技術者レンズからのプラクティス 技術者レンズでの

Vue.js Advent Calendar 2016 14日目です。 Vue2 + Vuex2の組み合わせはVueを正しくfluxに導き、より巨大なアーキテクチャを管理できるようになった。 逆に言うとVueの気軽さが失われてしまったのでは、という印象を持つ方もいらっしゃるのでは。 しばらく使ってみたら肩の力の抜き方が分かってきたので、構造の複雑さ別に書き方をまとめてみる。 このポストは

Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる． Vuex for Everyone 今回受講した「Vuex for Everyone」の題材は「shopping-cart」で，ステップバイステップに実装を進めていく．動作確認をしながら，機能を追加したり，リファクタリングをしたりする． vueschool.io 動画を見るとわかるけど，とにかく実装スピードが早いので，写経する場合は何度も戻して見直す必要がある．ただ困ったときは Vue School の GitHub にセッションごとにコミットされているので，それを活用すればオッケー．

前々回の記事でLaravel 5.4 + Vue.jsの開発環境を構築し、前回の記事でLaravel 5.4によるWeb APIを作成しました。 今回は、作成したWeb APIを使用したToDoリストアプリケーションを、Vue.jsを使って作成します。 PHP側の積み残し はじめに、昨日のコントローラーを修正します。 もともと、ItemControllerのindex()メソッドは「Item::all()」メソッドで全てのアイテムを返していました。しかし、画面上に表示するのは未完了のアイテムだけです。そこで、index()メソッドを以下のように変更します。 <?php public function index() { return response(Item::query()->where('checked', false)->get()); } <?php public functio

まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V

2024-09-10 テクノロジア魔法学校の体験談と評判 「テクノロジア魔法学校」というプログラミング教材をご存知ですか？ ホームページの広告などで一度は目にしたことがある人も多いのではないかと思いますが、ディズニーが提供する子供向けのプログラミング教材です。 今回は、この「テクノロジア魔法学校」の体験版を実際に体験してみての感想や、「テクノロジア魔法学校」がどのようなものか、その評判などを見ていきたいと思います。 テクノロジア魔法学校とは 料金 エント […] 2024-09-10 レンタルサーバー「クイッカ」の評判と使い勝手 レンタルサーバーとして有名なサーバーの一つに、「クイッカ」があります。 名前は聞いたことのある人も多いのではないかと思いますが、今回はこの「クイッカ」について、料金やスペック、評判などを見ていきたいと思います。 レンタルサーバー「クイッカ」の基本情報 レンタルサー

0. はじめに 最近、Vuexを使い始めて、Vue.jsからVuexに値を受け渡す時にいくつかの方法があり、どういう方法があって何が良いのかが把握できなかったので、備忘録的に記述します。 公式がかなり詳しいので、公式で把握できる方は以下は読まなくて良いかと思います。 0-1. 最終的なイメージ 4. に今回作成したものの最終的なイメージを記載してあります。 0-2. 今回使用したstore store側のコードはほとんど同じだったので、今回使用したstoreを先に紹介します。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { familyName: '', givenName: '', } const mutations = { setFamilyName (state, val) { s

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から

2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する

先週、弊社が運営する３Dモデル検索ウェブサービス「heymesh」をリニューアルしました！4/10にサービスをリリースしてから初の大きなリニューアルになります。 今回リニューアルした内容の一つに今までVue.jsで書かれていたheymeshをNuxtに対応させるという要件があったのですが、本記事はVueで書かれたサイトをNuxt対応させる途中でハマったポイントと、どのように解決したのかについて自分用のメモもかねてまとめました。 本題から少し外れるため詳細は割愛しますが、Nuxt対応するに至った経緯としてはOGPやSEO対策しやすくするという要求があったためです。 ハマりポイント１：S3ホスティングが使えない heymeshの最初のリリースの際にはVue.jsで実装されていました。そのため、インフラ側はスタンダードにS3とCloudfrontでWebホスティングする手法を採用していました。

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 開発で得た知見を紹介していきます。

Wantedlyは、運命のチームや仕事に出会えたり、人脈を広げ、ビジネスの情報収集に使えるビジネスSNSです。

はじめまして。DMM.comラボ エンターテインメント本部イベント開発部の上井（ウワイ）と申します。 インフラからフロントエンドまで幅広く担当しております。 今回は、業務で利用しているNuxt.jsとFirebaseを使って、SPA×SSR×PWA×サーバーレスのWebアプリケーションを構築する方法をご紹介いたします。

こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ

vue-cliのwebpackテンプレートをベースにしてます。 https://github.com/vuejs-templates/webpack/tree/develop/template srcディレクトリ以下は構成をいじっていますが、ルートディレクトリは基本的に webpackテンプレートのままです。 Root:: ├─build ├─config ├─dist ├─static ├─test ├─src │ ├─assets │ ├─components │ │ ├─mixin │ │ ├─partial │ │ │ ├─modal │ │ │ └─plugin │ │ └─pages │ │ ├─member │ │ ├─register │ │ └─.....(etc) │ ├─lib │ │ ├─lang │ │ │ ├─en │ │ │ ├─ja │ │ │ ├─ch │

はじめに Vue2が良さそうなので、実装しながらディレクトリ構成について考えてみたいと思います。 Vuexも使います。 環境構築 Vue.jsではvue-cliが用意されており、最初の開発環境が簡単に作れます。 手っ取り早く動く環境を作りたいときなど試してみると良いです。 npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev またvue-cliは[ Webpack / Browserify ]の両方に対応されており、以下の4つのテンプレートが用意されています。 browserify browserify-simple webpack webpack-simple vue-cliはWebpackの2系に移行済みです！ ├── assets ├── dist ├── gu

何となく Laravel ＋ Vue.js の使い方が分かってきた。 自分の頭の整理を兼ねて、書き残しておく。 ※ 追記 2019/02/26 現在では Laravel も Vue も若干古いバージョンですが、基本的な考え方は同じなので、参考になれば幸いです。 処理の流れ ブラウザ → Laravel: SPAのViewをリクエスト（初回のみ） ブラウザ: Vue を初期化、View （仮想DOM） を描画 Vue → Laravel: XHRでデータをリクエスト Vue → ブラウザ: クライアントサイドでのルーティング Laravel の役割 Webサーバー。起点となるSPAのViewを初回だけ返す。 APIサーバー。サーバーサイドでデータを処理し、JSONを返す。 Vue の役割 Viewの描画。変数のバインド、繰り返し、イベント検知など。 Router。 vue-router を使