‘JavaScript’ カテゴリーのアーカイブ

Framework7 Vue を調査する

以前の記事『Framework7のrouter.backで戻っても最新データに更新したい』でいろいろと調べてたときの手法をまとめてみるなど。

情報収集からデバッグ手法まで雑多なので曖昧な「調査する」というタイトルにしてみました。

そうそう、せっかくなので本家(https://framework7.io/)のスポンサーのところをキャプチャして貼っときますね。弊社が載ってます。

この記事にもスポンサーが更新されてない日本語サイト(https://framework7.jp/)しかでてこなかったりしますし、少しは主張を。

(さらに…)

Facebooktwitterlinkedintumblrmail

Framework7のrouter.backで戻っても最新データに更新したい

昨日はリタイアしたけど、今日はがんばる。

(さらに…)

Facebooktwitterlinkedintumblrmail

SPAでのキャッシュの闇

というか自分の失敗なんですけど。
今回の話は具体的にはNuxt2系でクライアント側でキャッシュしてみてのやらかしです。ひとことで言うと

「自分でちゃんと後始末しなきゃだめ」

(さらに…)

Facebooktwitterlinkedintumblrmail

Nuxt.js 開発サーバーでのSSEがランダムポートになって困ってた

説明しよう!

  • Nuxt.js で開発やってると開発サーバーを使うでしょ?
  • プログラム修正したら自動的にビルドしてくれて素敵!
  • そして画面を自動リロードしてくれて親切!

なんです。

ところで、Nuxt Screens Module(https://github.com/nuxt/screens)がローディング表示のためにSSE(Server-Sent Events)を使ってまして、最近、使用するポートがランダムになりました。

この変更は開発中のパフォーマンス問題への対策らしいです。良いことです。
しかし特定ポートをフォーワードして開発している人なんかは困ったことになります。
僕とか。
(さらに…)

Facebooktwitterlinkedintumblrmail

CORSに@nuxtjs/proxy

Nuxt.js でspaの開発やってたら普通は開発サーバーを使いますよね。
例えばyarnをパッケージマネージャーに採用している場合だと

$ yarn run dev
yarn run v1.21.1
$ nuxt

   ╭───────────────────────────────────────────────╮
   │                                               │
   │   Nuxt.js v2.12.2                             │
   │   Running in development mode (spa)           │
   │                                               │
   │   Listening on: http://127.0.0.1:3000/   │
   │                                               │
   ╰───────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                            13:54:32
ℹ Initial build may take a while                                                                                                                               13:54:32
✔ Builder initialized                                                                                                                                          13:54:32
✔ Nuxt files generated                                                                                                                                         13:54:32

✔ Client
  Compiled successfully in 25.76s

ℹ Waiting for file changes                                                                                                                                     13:55:00
ℹ Memory usage: 241 MB (RSS: 451 MB)                                                                                                                           13:55:00
ℹ Listening on: http://127.0.0.1:3000/                    

といった感じ。通常だとポートは3000になります。

サーバー側APIは別のポートで提供することになるので別オリジンになり、そのままだと開発中にAPIアクセスができません。

(さらに…)

Facebooktwitterlinkedintumblrmail

Firebase Cloud Functions のNode.js 10更新、わたしの場合

2020年5月某日、

「Node.js 8のFunctionは来年3/15には止まるから10にしてね。あと、10は無料プランじゃ使えないからそこんとこヨロシク」(要約)

というメールがGoogleさんから来ました。

詳しくはその内容を整理してくださってるステキな記事をどうぞ。

【Firebase】Cloud Functionsが従量課金プランでしか使えなくなるらしい
(https://qiita.com/azukiazusa/items/edd6ca9cba2d48c4c3e2)

1年くらい前(2019年3月末)にリリースしたシステムが該当しており放置すると来年の3月には死
あの時はまだNode.js 8すらベータ版だったやんか。1年でこんなことになるとは…

(さらに…)

Facebooktwitterlinkedintumblrmail

FirestoreのServerTimestampさん

有能!

サーバー側で採時するので集計対象の抽出などに安心して使用できます。
これのおかげで必要なデータ取得数を大幅に削減できています。
Firestoreだとデータ取得数は速度や効率だけでなく課金に直結しますしね。

管理画面でデータを時系列に並べたりするのにも便利なのでドキュメント登録時には必ず入れておいたほうが良いくらいの有能さです。

Webでは

import firebase from '~/plugins/firebase'

payload.createdAt = firebase.firestore.FieldValue.serverTimestamp()
await db.collection('コレクション名').add(payload)

(さらに…)

Facebooktwitterlinkedintumblrmail

Firestoreのセキュリティルールのこと

バックエンドをFirebaseでSPAのシステムを作る場合、データを守る砦はデータベース(今回はFirestore)のセキュリティルールです。
Authenticationのログイン情報とFirestore上のユーザー情報を紐付けし権限によりドキュメントへのアクセスを制限するなど、適切な設定しなければなりません。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

これは「ログインしているユーザーはフルアクセス」という最低限設定しておくべきルールです。開発中はお世話になりました。
しかし最終的にはもっとこまかく制限をかける必要がありますから、それを前提にデータ構造を設計しておいたほうが良いです。

例として今回作ったシステムのデータ構造とセキュリティルールの一部について解説します。

(さらに…)

Facebooktwitterlinkedintumblrmail

Nuxt.js 悩み解決の小ネタ集

ここ1ヶ月程Nuxt.js + FirebaseでSPAのシステムを作っていました。

短期構築がご要望でリアルタイム性が求められる内容。Firebaseに向いていると判断、提案したところ技術構成は自由にやらせていただけることになりました。
別件で一昨年末あたりからずっとバックエンドはLaravel、フロントエンドは素のVue.js + Vuex + Vue Routerで開発やってるんですが、PWA化したほうがよさそうだったこともあってNuxt.js(以降Nuxt)使ってみようかなってことで採用。

Nuxt、便利ですね。特にプラグインとミドルウェアが素敵!

Firebase(今回使用したのはAuthentication、Firestore、Hosting、Functions)との相性もバッチリでした。

ですが初めてということもありいろいろと悩んだりもするわけで…
それらをどう解決したか?の小ネタ集です(というか今回の落とし所、かな)

(さらに…)

Facebooktwitterlinkedintumblrmail

Nuxt.jsのbuild時にconsole.logを削除する

小ネタ集を書いていて分けておいたほうがよさそうだと思ったヤツ、その2。

nuxt buildでproductionビルドするときにconsole.logが削除されると良くないです?
良いですよね?なのでminifyを行うモジュールにはそういう機能が載っているようです。

Nuxt.jsのproduction時にconsole.logを削除する – くらげになりたい。

との情報を見つけました。ありがたい!

ですが、デフォルトのterser-webpack-pluginではなくuglifyjs-webpack-pluginに差し替えて実現されているとのこと。
この情報をもとに調査・実験をすすめたところterserのままでも可能でしたのでnuxt.config.jsのbuildの該当箇所を提示します(“nuxt”: “^2.4.0”)

(さらに…)

Facebooktwitterlinkedintumblrmail