Nuxt.jsとFirebaseを使って簡単なWebサービスを作る＜導入編＞ | non-standard world株式会社
こんにちは。エンジニアの高崎です。 突然ですが、Webサービスをもっと気軽に作れたらいいのになと思ったことはありませんか？ 本格的にWebサービス構築の投資をする前に、需要確認のための動くプロトタイプを作りたい フルスクラッチで作るほどの予算はないんだけど、Webサイトにちょっとした会員限定機能をつけたい など、私達のクライアント様にもそのような課題を抱えている方がたくさんいます。調査した結果、そんな場合の最適解が「Nuxt.js」というフロントエンドのフレームワークと「Firebase」というGoogleが提供しているクラウドサービスを組み合わせて作ることでした。 この記事では「Nuxt.jsとFirebaseを使って簡単なWebサービスを作る」と題して、ハンズオンで簡単なノートを取るWebサービスを作る方法をお送りしたいと思います。 Nuxt.jsって？ SPA＊フレームワーク。Vue
[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets
テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 気になったアニメーションは、スニペットなどに登録しておくと便利ですね。
![[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b27ab0c67c4e323739dcd1ac8059944e3863ff1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019031510.png)
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
はじめに 11月25日(日) に「にじさんじ配信スケジュール」と呼ばれるウェブサービスをリリースしました。 正確には初めてリリースしたサービスでは無いのですが、会員登録機能が用意された本格的なサービスを出した事がこれまでなく、実質的には初めてのサービスと呼んでも良いだろうと考えています。 という訳で、Crieit「個人開発サービスに用いられている技術 Advent Calendar 2018」6日目は「初めてのウェブサービスを WordPress + Vue.js で個人開発した話」と題して、開発に WordPress や Vue.js を用いたこと、ウェブサービスを作るまでの話や、リリース直後の話をしたいと思います。 n番煎じなテーマですし、蛇足に感じられる内容も多々あるかと思いますが、適宜必要な箇所をお読み頂ければ幸いです。 この記事の想定読者 これからウェブサービスを個人で作りたい方
スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【1. Installation】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回は、一番最初のInstallationです。 はじめに 互換性の注意 最初のセクションは「互換性の注意」についてです。ECMAScript 5とun-shimmableが、早速「ちょっと何言ってるかわからない」ポイントだったので調べてみました。 Vue.js uses ECMAScript 5 features that are un-shimmable in IE8 ECMAScript5は2009年にリリースされたJavaScriptの標準仕様のことで、プ
Vue.js + Electron でマークダウンエディタをサクッとつくってみた - dev.kokushin
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / Vuex 連携 Vuex mutation を直接呼んで、state を変更 コンポーネントから直接 state を操作 TypeScript Vue.js 入門 さいごに 前提 これまで利用した構成 ベースとして、これまでプロダクションで利用したことがある構成は以下です。いずれも、フォームベースの SPA で、現在も稼働しています。 AngularJS 1.x AngularJS 1.x + TypeScript React
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
Vue.js Examples
A Simple extension that helps debugging Livewire components from Vuejs devtools
「レスポンシブにすればPCサイトと同じ工数でPCにもスマホにも両方対応できるよね?」 - エムスリーテックブログ
できません。 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 中村の記事で宣言したDocpediaの技術的チャレンジの記事も今回で最後です*1。 今回は、PCページとスマートフォンページで共通的に使用できるVue.jsコンポーネントをどうやったら実現できるかを考えて実装した例を紹介します。 仙台サンプラザ（せんだいサンプラザ）は、仙台市都心部東側の宮城野通に面してあるホール・ホテル・会議室などの複合施設。本文には特に関係ありません。 なぜレスポンシブにしたいのか? PCとスマホで共通のコンポーネントを使って工数を減らしたい 実例 構成 エントリー router AppModePlugin PCとスマホで処理を切り替える PCとスマホでデザインを分ける We are hiring! なぜレスポンシブにしたいのか? 冒頭のタイトルは、直接こう言われたのでは
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
2017/10/25(水) さくらの夕べ 「さくらインターネットのエンジニアは Vue.js をこんな風につかってます」 発表者: さくらインターネット 篠田 真一
Open standards for building event-driven applications in the cloud
実況中継シリーズ Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離 - Re.Ra.Ku アドベントカレンダー day 13 - Re.Ra.Ku tech blog
前説 丸山です。Re.Ra.Ku. アドベントカレンダー13日目の記事です。前日はiOSアプリのUIをコードで書いてみる話でした。明日はおそらくScalaの話になると思います。 さて、以前も話題にしましたが、builderscon2016が先日開催されました。チケットは3hでSOLD OUT。プラチナチケットと化した参加権ですが、発表する側ならば実質無料で参加し放題！これはいっそ申し訳ないレベルでは！？ というわけで、せっかく発表したのでその内容をなるべく多くの手段で共有したい。そう思い、今回も実況中継シリーズを弊社テックブログで行います。実況中継シリーズというのは、プレゼンをブログで再現するアレです。なお、実際のプレゼンは動画になってYoutubeにアップロードされております。builderscon公式サイトのセッション詳細ページからもご覧いただけますので、よろしければそちらも合わせてご
2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いません。 実際のコードの書き方にも触れません。 Vuexを使ってはいるけど理解できなくて苦しんでいる方向けの内容です。 なぜVuexを使うのか Vuexの図解に入る前に、私がVuexを使っている理由を説明しておきます。 Vuexのメリットが明確でないと図があっ
最近、JavaScript の MV* フレームワークの中で Vue.js が少しずつ注目を浴びてきているようであります。 5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 | 株式会社インフィニットループ技術ブログ Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog そんなわけで、自分も Vue.js (v0.10.5) を触ってみたのですが、data で渡した値を激しく書き換えるところに面食らったので記事にしておきます。 自作クラスのオブジェクトを Vue.js に渡すと壊される 何らかのビジネスロジックを持ったモデルを作って、それを Vue.js のデータバインディングで HTML に反映しようすると破綻します。 簡単な例として、よくあ
はじめに Vue.jsは軽量ですが、数万件のリストを並べるとそりゃ普通につらい。 だから目に見えるとこ以外はdom描いてもらうのやめるってコードです。 デモ デモ(jsfiddle) コード <div id="app"> <div style="overflow:auto;height:170px;" @scroll="getScrollParam"> <ul :style="listStyle"> <li style="height:17px" v-for="num in displayList">{{num}}</li> </ul> </div> </div> new Vue({ el: '#app', data: function(){ return { list:list, scroll:0,//スクロール量 scrollMax: (list.length - displayRow
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 最近Vue.jsを頻繁に使用するのですが、他のSSR(サーバーサイドレンダリング)の仕組みと組み合わせる場合、容易にXSSを生み出してしまうケースが存在するので、注意喚起も兼ねて事例を紹介させていただきます。 9月7日 追記を追記しました 前提 サーバーサイドで動的に要素をレンダリングするシステムとVue.jsを組み合わせた場合 この記事はrailsのSSRとの組み合わせで解説しますが、プレーンなPHP等、動的にHTMLをレンダリングシステムとの組み合わせでも発生します。 サンプルコード まず、こちらのコードをご覧ください。 user.erb <div id="app"> <div class="user"> <%= @user.name %> </div> <button v-on:click="registerFavorite" data-user-id="<%= @user
小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement
バーチー / GMO PEPABO inc. 2017.08.28 第9回ペパボテックカンファレンス ～ Vue.js 特集 ～ https://pepabo.connpass.com/event/63559/
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
はじめに はじめまして、福岡オフィスで働いている前平です。 セキュアスカイ・テクノロジーでは、すでにいくつかのカテゴリのブログを発信していますが、技術を気軽に発信したり、エンジニアが普段の業務でどのような技術に触れているのかを紹介したりすることを目的として、新しく「エンジニアブログ」が立ち上がりました。 本記事では、最近になってようやく (汗) 検証した Vue.js でのクロスサイト・スクリプティング (XSS) について紹介します。 なお、本記事の内容は私見に基づくものであり、所属組織を代表するものではありません。 前提 本記事では Vue.js を使って XSS の脆弱性を作ってしまうようなケースを説明しますが、その他の JavaScript のライブラリ/フレームワークを使った場合でも同様のリスクがある可能性があります。 検証で利用したバージョン Vue.js v2.5.16 (サ
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。 アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
Tailwind UI - Official Tailwind CSS Components & Templates
Build your next idea even faster.Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.
モバイル環境でSpeaker Deckを快適に閲覧する方法 - razokulover publog
TL;DL モバイル環境からmをドメインの先頭に追加してアクセスすると良い感じにスライドが閲覧できます。 例) https://speakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis ↓ https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis 概要 Speaker Deckはスライドを共有するサービスです。 特に大きなカンファレンスが開催された後はたくさんの発表資料がこのサービスにアップロードされるのでよく閲覧します。 Speaker Deckは、PCで閲覧する分には特に問題はないです。 しかしモバイル環境で閲覧すると少し残念です。 なぜならSpeaker DeckにはPC用のレイアウトしか存在しないからです。 通勤中にTwitter
こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします
Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... - Qiita
Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースしました!! 開発中にいろいろとハマったので、そのポイントを整理してみました。 内容的にはドキュメントをよく読めば書いてあることばかりですが、 作った or 思いついた後に、ドキュメントを見つけるので、手戻りが多く... あらかじめ、知っていたら良かったなと思う点をまとめています。 作ったのはこんなサービスです！ 積んでる本の総額がわかる読書管理サービス 『積読ハウマッチ』 積んでいる本を登録する書籍管理サービスで、 すこし違うのは、積んでる本の総額がわかること。 積んでるだけの本の総額がわかるとすこしは読む気になるかなと(´ω｀) シェアしたときに金額が表示されるOGP画像も用意していて、 どれくらい積んだか
引用: Components#Composing Components - vue.js Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則としてPass Props/Emit Eventsで行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ただ、公式ドキュメントに載っている図を見るだけではよくわからなかったので、実際にサンプルを作ってみた。 親子コンポーネント間でデータの受け渡しをする方法 <div id="app"> <div class="parent"> <h2>Parent</h2> <!-- 子コンポーネントからのデータを表示 親.applyメソッドで更新される --> <p>{{ messageFromChild }}</p>
![[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/38bbf8a7523c1797bbc3d4d4a5a0d035a697fbfd/height=288;version=1;width=512/https%3A%2F%2F1.bp.blogspot.com%2F-3Sdz6RsRJ-M%2FWA6zeqjGszI%2FAAAAAAAAEZg%2FsHy0PjcR7_AziwqMh3f2wU09t4dSQj54gCLcB%2Fw1200-h630-p-k-no-nu%2Fprops-events.png)
フロントエンド開発に Babel も Webpack も必要ない ※ - KAYAC engineers' blog
できらぁ！ 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはなく、 ECMAScript の新しい構文や JavaScript Modules など、 多くの機能がネイティブの状態でも使えます。 もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、 ビルドツールを使ったほうが良いのは間違いないのですが、 JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。 ソースコードはこちら！ そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。 ECMAScript に関するクイズゲームです。 最新版の Google Chrom
実況中継シリーズ「Vue.jsで学ぶMVVM 非同期処理 その光と闇」 Aパート - Re.Ra.Ku tech blog
2017年3月4日に、大阪にてYAPC::Kansaiというカンファレンスが開催されました。弊社からもわたしがスピーカーとして参加しており、「Vue.jsで学ぶMVVM 非同期処理 その光と闇」という発表をしてまいりました。とても参考になる発表が非常に多く、Perlコミュニティの力を改めて感じました。また、懇親会などでも、たくさんのハッカーと議論や情報交換ができ、大変有意義でした。カンファレンスは議論や情報交換してこそですよね！ というわけで、恒例のプレゼン再現ブログ「実況中継シリーズ」を行います。長くなりすぎるので前半と後半に分けます。本日は前半のみの公開です。 導入 本日はこういう発表をします。よろしくおねがいします。 簡単に自己紹介をさせてください。さいきん会社の名前が変わって、リラクっていう名前だったのがメディロムっていう名前になったんですけど、そこで働いています。言語的にはまあだ
Oct 26, 2015 こんにちは HN ！ Vue.js に精通していない場合は、より高い概要について、このブログ記事を読みたいかもしれません。 300 以上のコミットの後に、8 つのアルファ (alpha) バージョン 、4 つのベータ (beta) バージョン 、そして 2 つのリリース候補(RC)バージョン、今日、私は Vue.js 1.0.0 エヴァンゲリオン (Evangelion)のリリースを発表するのをとても誇りに思っています！それはコミュニティから全てのフィードバックなしには不可能でした。API の再設計プロセスに参加した全ての人びとに感謝します。 テンプレート構文を改善しました1.0 のテンプレート構文は、多くの微妙な整合性の問題を解決し、Vue のテンプレートをより簡潔で一般的に読みやすくなります。最も注目すべき新機能は、v-on と v-bind に対する省略記法
Vue + TypeScriptなプロジェクトにESLintを導入する - Please Drive Faster
TypeScript + VueなプロジェクトでESLintを使ってみて、現状必要なモジュールが複数あって少し複雑だったのでまとめておきます。 サンプルは以下です。 github.com 内容はどうでも良いんですが、こんな感じのすごく簡単なTODO風のアプリケーションです。 なぜEslintを使うか JavaScriptのためのLintingツールはたくさんありますが、Vueのroadmapにもある通り、Vueの公式スタイルガイドをサポートするESLintプラグインがESLintのメンテナによる公式プラグインとして作られています。 GitHub - vuejs/roadmap: Roadmap for the Vue.js project これからもVueの公式としてサポートされていくと思うので、特にこだわりがなければESLintを使うのが良いかと思います。 ESLint for Type
Vue School の無料コース「Nuxt.js Fundamentals」を受講して Nuxt.js の基礎を学んだ - kakakakakku blog
Vue School で今月から提供されている最新の無料コース「Nuxt.js Fundamentals」をさっそく受講した．最近よく聞くようになった Nuxt.js をまだ試したことがなく気になっていて，タイミングも良かった！今まで Vue School で「Vuex for Everyone」と「Vue.js + Firebase Realtime Database」と「Vue.js + Firebase Realtime Database」を受講して，素晴らしく体験が良く，今回もオススメできる内容だった！ vueschool.io Nuxt.js Fundamentals コースは計14個の動画で構成されている．動画を見るだけなら35分で見れるし，動画を見ながら写経をするとしても，2時間あれば終わる．Nuxt.js とは何か？を速習するのに最高なコースと言える． 1 : Introd
仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
import { LocalNotifications } from '@capacitor/local-notifications'; LocalNotifications.schedule({ notifications: [ { title: "On sale", body: "Widgets are 10% off. Act fast!", id: 1, schedule: { at: new Date(Date.now() + 1000 * 5) }, sound: null, attachments: null, actionTypeId: "", extra: null } ] });import { Geolocation } from '@capacitor/geolocation'; // get the users current position const pos
私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークで Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。 フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーは API のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初めてのウェブサービスを WordPress + Vue.js で個人開発した話 - Crieit
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
とにかく楽してVue.jsでTypeScriptを使いたい
CSS Architecture on Vue.js
Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita
Vue.js が data に渡した値を激しく書き換える件について
Vue.jsで10万件のリストを表示する - Qiita
VueをSSRに乗せると容易にXSSを生み出す場合がある件について - Qiita
Vue.js で XSS を作り込まないために気を付けること - セキュアスカイプラス
Nuxt.js + Firebaseで釣具の管理サービスを作った
便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
FirebaseのセッティングとVue.jsプロジェクトに組み込む
[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法
Vue.js 1.0.0 リリースしました — Vue.js
Capacitor: Webアプリをクロスプラットフォームに展開
2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発して得た設計 - Qiita