Nuxt.jsでファイルの有無を調べる方法

Question

Nuxt.jsでファイルの有無を調べるために、node.jsのfs.existsSyncというメソッドがあることを知り、
下記のようなコードで作成し、動作確認を行いました。
UIフレームワークとしてVuetify.jsを使用しています。

<template>
 <div>
  <v-btn @click="test">fileCheck
  </v-btn>
 </div>
</template>
<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
const fs = require('fs')

@Component({})
export default class extends Vue {
 test() {
  const url = './static/test.png'
    if (fs.existsSync(url)) {
      alert('exist!')
    } else {
      alert('Not exist!')
    }
 }
}
</script>

コードは、ボタンをクリックして、ファイルの有無をアラートで表示するという簡単なものです。
このコードを実行したところ、下記のようにfs.existsSyncは関数ではないというエラーとなりました。

client.js?06a0:97 TypeError: fs.existsSync is not a function

使用方法に誤りがあるのでしょうか？
どなたか詳しい方ご教示いただけますと幸いです。

Comments

[hoshi-takanori]

ブラウザで動く JavaScript コードからは PC 上のファイルにはアクセスできません。
node.js の fs.existsSync などの関数は、サーバー側で動かすためのものです。

[takochan1192]

ありがとうございます。そうだったのですね。
クライアント側で行うことを想定しておりました。
nuxtのプロジェクトの中にstaticというディレクトリがあり、その中に当該のファイルが存在するか否かというのを判定する必要があり、この質問を致しました。
webアプリをデプロイした（AWSのS3上を想定）後に、客先によって、pngデータ（ロゴ）を切り替える
という処理が必要だったのです。pngデータが無い場合もありまして、その場合は、別なテキストデータを表示させるのですが、pngデータ参照でエラーになってしまいまして、なんとかファイルが存在するか否かを判定するメソッドが組めないかと思案しておりました。

[takochan1192]

もし、何かよい方法がございましたら、ご教示いただけますと幸いです。

[hoshi-takanori]

目的のファイルがデプロイ先のサーバーにあるなら、いちいちクライアントからファイルの有無を確認するのではなく、デプロイ時に設定すべきことでは。(というか、客先ごとに切り替えるべき内容って、ロゴだけで良いんですか？)

[takochan1192]

デプロイ時に設定するということは、config.tsなどのファイルに設定を書けばよろしいのでしょうか。
客先ごとに切り替えるべき内容は、ロゴだけではないのですが、後の情報は、必ず入ってくる予定なのです。ロゴだけファイルが存在しないケースがあるため、非常に困っておりました。

[hoshi-takanori]

すでに設定ファイルがあるなら、それにロゴの有無も書くようにするのが良いと思います。デプロイ時にスクリプトを動かしたりするなら、その時に設定内容と実際のファイルの有無をチェックできますし。
(ついでに、客先ごとにロゴのファイル名を変えると、同じファイル名で内容の違う画像と取り違えたりしなくていいかも。思いつきですが。)

[takochan1192]

ありがとうございます。色々と検討してみます。

Answer 1

上記のやりとりに関してです。

pngデータの切り替えはどのように行うのでしょうか？？

Comments

[takochan1192]

test.pngというデータの参照先もファイル名称も変わらないのですが、ウェブアプリを使用する企業様毎に、企業様毎のロゴファイルが入ってきて変更されることになると聞いておりました。そのため、ファイルの切り替え自体はアプリのデプロイ後、AWSサーバー側で行われる予定です。

[art_porokyu]

サービス内容についてなのですが、企業様毎に管理画面があるようなサービスでそこに設定するロゴファイルみたいなイメージでしょうか？？

[takochan1192]

管理画面は同じなのですが、企業様毎に設定するロゴが違うのです。ややこしくて大変な申し訳ないのですが、ロゴファイル名は同じなのですが、そのファイルに入るロゴは企業毎に異なりまして、さらにロゴがない企業様はファイル存在しないといった感じです。

[takochan1192]

開発段階では、ファイルの参照だけいれておて、デプロイ後、サーバー側でファイルが入れられるという流れなのです。

[art_porokyu]

事前にS3にロゴを入れておくのではダメなのでしょうか？
企業様毎にロゴファイルが入ってくるというのはどのような形で入ってくるのでしょうか？
企業様がロゴファイルをアップロードするという感じでしょうか？

こちらの認識が違ってたら申し訳ないです。

[takochan1192]

事前にロゴのファイルをもたせて置く形にしようかと思います。色々とアドバイスいただきましてありがとうございました。