タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその１ vscode上での自動フォーマット .vueの構文チェックその２ rulesをカスタマイズ <template>のカスタマイズ <script>をカスタマイズ まとめ。 おまけ tl;dr 対象ファイルとpackage.jsonと.eslintrc.jsの対応表👇 構文チェック・自動フォーマット 対象ファイル npmライブラリ(package.json) .eslintrc.jsでのextends .vue(<template>) eslint-plugin-vue plugin:vue/recommended .vue(<script>) eslint eslint:recommended . js eslint eslint

本記事は Vue.js #1 Advent Calendar 2017 の23日目の記事です。 TL;DR soussune（そうっすね）という技術系ポッドキャストのサイトをJekyllで構築してます よくVueの話をしてるのに肝心のサイトでは使ってない。のでVue使いたい Nuxt.jsにNuxtentモジュール入れて、nuxt generate で静的サイトを生成してデプロイしました ポッドキャストをやっている @trkw と @miyaoka の二人でこの一週間くらいスクラッチでサイトを作ってました。そこで実際にNuxt使ってみた話についていろいろ書いていこうと思います。 使用前・使用後 開発は8,9割程度終わった感じですが、現状まだ新サイトに移行してない状況です。 →移行しました。 旧サイト https://soussune-v1.netlify.com （開発リポジトリ） 新サイ

@potato4d の名前で活動 フリーランスのWebエンジニア Vue.js jp Docs core maintenance member Vue.js Japan UserGroup スタッフ nuxt/docs en & ja contributor Nuxt tech book 著者

note engineer meetup #2 での登壇資料です。 note の Vue Fes Japan 後の取り組み、Nuxt.js の update to v2.4.3 の話や、Code Splitting について話をしました

この記事は オープンストリーム Advent Calendar 2018 の11日目の記事です。 うっかり期限を勘違いしていて前日に慌てて記事を書いています！間に合え！！ やりたいこと 最近やっと TypeScript と Vue.js を使い始めたので Vuex も一緒に使ってみたい。 とりあえず vue-cli でプロジェクトを作成すると、 store.ts ってファイルがぺろっと一つ追加される。けど、できれば1ファイルにべた書きするんじゃなくて、いいかんじに分けて書きたい。けど何をどう書けばいいのかよくわからない あとたぶん別の言語やって1ヶ月もしたら内容をすっぱり忘れるので、備忘録もほしい というわけで、調べてみた。 結論 ここにぜんぶ載ってた。すてき。 https://codeburst.io/vuex-and-typescript-3427ba78cfa8 ……なのですが。これ

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プロジェクトを生成する

Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる

ダッシュボードUI フロント作成時のメモ 背景 フリーでフロントエンドをやっていると、高い確率で「管理画面」をリニューアルしたい、新規作成したいという依頼を受ける デザイナー先行でもサーバーサイド先行でも管理画面系UI設計は難しいため、フロント先行で行くため、認識共有のためにも見本となるものが欲しかった フロントらしくjavaScriptフレームワーク連動のものも探した 懸念点 色々見つかったものの海外の管理画面ってこんなにゴリゴリのグラフ表示ばかりなのだろうか 実務で結局必要なUIはテーブルとフォーム メモです ダッシュボードUI10選 Bootstrap製ダッシュボード管理画面テンプレ10選 UI考察 UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと https://www.webprofessional.jp/26-steps-product-dashb

2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング 宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、

はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ

2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><

Vue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。 親子コンポーネント間についてはProps down/Events upでデータのやりとりができる。 子子コンポーネント間（いわゆる兄弟間）はどうするのが良いのかを3つのパターンを紹介する。 $on/$emitでのイベントによるやり取り 親コンポーネントをコントローラにして子コンポーネント間を取り持つ Storeパターンの適用 親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。 $on/$emitでのイベントによるやり取り 一番簡単なのが、この$on/$emitでのイベントによるやり取り。 共有のViewModel（vueインスタンス）を用意し、そこにイベントを登録/発火させることで親子に関係なくデータ

最終更新日: 2022年1月15日 公式 Flux ライクな実装大規模なアプリケーションは、多くの状態が色々なコンポーネントに散らばったり、コンポーネント間の相互作用のために複雑になりがちです。この問題を解消するために、 Vue は Elm から触発された状態管理ライブラリの vuex を提供します。vue-devtools とも連携し、特別なセットアップなしでタイムトラベルデバッグを提供します。 React 開発者への情報もしあなたが React のエコシステムから来たのなら、最も人気のある Flux 実装の redux と vuex がどう比較されるか気になっていることでしょう。Redux は実際に view レイヤの知識を持たないので、シンプルなバインディング を通して簡単に Vue とあわせて利用することができます。Vuex は、 自らが Vue のアプリケーション内にいることを知

こんにちは、生形です。 先般開催されましたVue Fes Japan 2018のために、JavaScriptフレームワーク「Vue.js」の生みの親であるEvan Youさんが来日されました。 この機会を逃す手はない！ということで、Evanさんへの質問をTwitterで公募し、インタビューした様子をライブ配信しました。インタビュアー兼通訳を担当したのは、Vue Fes Japanのスタッフでもある、弊社代表の田中です。 左：Evan Youさん／右：アシアル 田中正裕 当日、Evanさんは温泉で日本を堪能していたようです。なんとライブ配信は箱根の旅館から！浴衣がお似合いですね。 はじめはSublime Textをずっと使っていて、次にAtomに切り替えましたが最近はもっぱらVS Codeを使っています。 VS CodeはTypeScriptのサポートが強力なので便利ですね。ちなみに、VS

この記事はVue.js #1 Advent Calendar 2017の5日目の記事です。 昨日はakifoさんのエラーをユーザーへ伝えるVue.jsコンポーネント作りましたの記事でした。 本日は私がAtomic Designの概念を用いてVue.jsのコンポーネントを組み立てるというお話をさせていただきたいと思います。 コンポーネントって何？どう使うの？ 公式ドキュメントにも記されている通り、コンポーネントはVue.jsの最も強力な機能の1つです。 UI上の各要素をパーツ化し、それぞれのパーツの中にHTML(意味)・JavaScript(機能)・CSS(見た目)を含めることが可能です。 これにより再利用性も高まりますし、プロジェクトのリソースを整然と管理することが可能となります。 例えば、ヘッダーをコンポーネントとして使いたい場合。 次のようにMyHeader.vueを作成し、それを他の

第69回 HTML5とか勉強会「UIフレームワーク最前線」の発表資料 https://html5j.connpass.com/event/89073/

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue.jsでフロントエンド再入門しました。仕事でjs触るけど、ゼロからあれこれやると分からないことが無限に発生しますね...。成果物はこちら。 GitHub - syou6162/go-active-learning-web ML News サーバーサイドはGoで書いていて、フロント周りがVue.jsです。それっぽい見た目になってきたので、Route53でドメイン取得しました。 前回までのあらすじ 初手 webpackを導入 Componentの導入 Bootstrapで見た目をマシにする SPA導入 SPAにするとGoogle Analyticsで正確にトラッキングできない問題 参考図書 前回までのあらすじ 今年の目標で自分であれこれ触って壊して試せる砂場を作る活動というのをやってきました。先月までは主にインフラとかミドルウェア周りをやりました。 下回りは整ってきつつありますが、表側が