質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

JavaScriptでcsvを読み込む

mako_0221
mako_0221

総合スコア85

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

5回答

0グッド

3クリップ

640閲覧

投稿2022/10/26 22:30

Chromeブラウザ環境で、JavaScriptで同じディレクトリ内のcsvファイルをXMLHttpRequest()を通じて読み込む場合、ブラウザのセキュリティ上の問題でCORSエラーが発生して、読み込むことができないところまで理解しております。確かに勝手にクライアントサイドのファイルを読み込む仕様なんて、一般的には危険なことではありますね、ということはなんとなく理解しています。

  1. 一方で、input type="file"などでユーザーの意図でアップロードすることは当然できることはわかっているのですが、今回は静的にディレクトリ内のcsvファイルを読み込みに行きたいという条件で考えております。

  2. 加えて、初めからJSONファイルに変換しておいて、読み込むような選択肢も出てくるとおもいますが、ここではcsv形式のままでという前提とさせてください。

  3. また、ブラウザの設定やChromeの拡張でweb server chromeのようなものでローカルホスティング環境を構築してheaderを操作して読み込むということも除外となります。

*これらの前提を置いているのは、社内の一般ユーザーが利用するフロントサイドのみのブラウザアプリケーションを構築しており、これらの条件を加えるとユーザー側での理解や設定が求められてしまうため、ユーザーからしたら「定のディレクトリにcsvファイルさえ格納すれば読み込むんだ」という条件で実装したいと考えている次第です。

以上の条件を踏まえて、JavaScriptそのものやライブラリを利用して、なんとか同一ディレクトリ内のcsvを読み込む術はないものでしょうか?

アドバイスのほど、よろしくお願い申し上げます。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2022/10/27 22:03

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは? 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。
mako_0221

2022/10/28 01:23

お待たせをして、誠に申し訳ございません。 もちろん存じ上げております。こちらの都合で少しお待たせをしておりましたが。 これから、皆様にお詫びとともにご返信を差し上げるつもりです。 よろしくお願い申し上げます。

回答5

2

ベストアンサー

同一ディレクトリ内のcsvを読み込む術はないものでしょうか?

<input type=file> で指定してもらうか showOpenFilePicker() で指定してもらう以外の方法は現状ないと思います。

ディレクトリにcsvファイルさえ格納すれば読み込むんだ」という条件

社内の共有ストレージにCSVファイルを置いてもらって、そこをウェブサーバで公開するのはどうでしょうか。

投稿2022/10/26 23:32

int32_t

総合スコア17085

mako_0221, maisumakun👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mako_0221

2022/10/28 01:30

コメントありがとうございます。ご返信遅くなり申し訳ございません。 上述も致しましたが、簡単なブラウザAPPで複数社にまたがっているため、共有ストレージがない状態です。しかしながら、やはり根本的にセキュリティ上許容されないアプローチ(開発者側でユーザー側のファイルを強制的に読み込むような行為と言えばいいのでしょうか)ということはよくわかりました。 Window.showOpenFilePicker()はdocsを読み始めたのですが、すぐに自身の条件で利用可能か判断できなかったのですが、可能性がありそうに感じたので、もっと調べて検討してみようと思います。 良い解決策になり得た場合には、こちらに追記させていただきます。

1

「特定のディレクトリにcsvファイルを格納すれば」
の解釈次第でしょうね。httpサーバー上にsmbやnfsでアクセスできる共有ディレクトリがあれば
自身のPCからはローカルにファイルを置く感覚でサーバーにアップすることも可能でしょう

投稿2022/10/27 00:58

yambejp

総合スコア108937

spoofy_dragon😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mako_0221

2022/10/28 01:25

ありがとうございます。ご返信遅くなり誠に申し訳ございません。 さて、会社グループ全体で利用してみようかなという類のブラウザアプリで、会社間を跨いでの共通にアクセスできるディレクトリはないのです。利用したい人は、フォルダごと差し上げますね方式故、難しそうでございます。

1

読み込む術はありません

投稿2022/10/26 23:48

a.com

総合スコア752

yambejp👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/10/27 03:45

こちらの回答が複数のユーザーから「説明が不足している回答」という指摘を受けました。

回答へのコメント

mako_0221

2022/10/28 01:27

遅くなり申し訳ございません。ありがとうございます。 単純にlinkタグのrefやscriptタグのsrcのように読み込むことはできないかと安易に考えておりました。

1

一方で、input type="file"などでユーザーの意図でアップロードすることは当然できることはわかっているのですが、今回は静的にディレクトリ内のcsvファイルを読み込みに行きたいという条件で考えております。

ブラウザを動かしている PC にあるファイルを FILE API を使わずに、ユーザーの操作は一切なしで JavaScript で読み込みたいという話と理解してますが、そういうことはできません。

(そんなことができたら、悪意のある攻撃者とかが他人の PC にあるファイルを勝手に開いて情報を取得するということができ、セキュリティ的に大問題ということは理解できますか?)

社内の一般ユーザーが利用するフロントサイドのみのブラウザアプリケーションを構築しており

そこから考え直して、普通のデスクトップアプリ を使ってはいかがですか? 例えば 以下のような .NET Framework の Windows Forms アプリ。

CSV ファイルを DataGridView に表示
http://surferonwww.info/BlogEngine/post/2020/09/11/show-date-in-csv-file-on-datagridview.aspx

投稿2022/10/26 23:18

編集2022/10/27 01:53
SurferOnWww

総合スコア17335

mako_0221👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mako_0221

2022/10/28 01:37

ありがとうございます。そして返信が遅くなり誠に申し訳ございません。 はい、セキュリティ上の問題は十分に承知をしております。 一方で、同じプロジェクト内のlinkタグのrefやscriptタグのsrcをHTMLは読み込みに行くがそのような形で安全なものとして取り扱う術はないのだろうかと考えておりました。(もちろん、いくら調べてもそのような記事が見つからないので、藁をもすがる思いでという投稿でございました) Windows Forms アプリはなんとなく普段VScodeを使っているのでC系の言語を使えば書けたり作れたりする認識はあったのですが、まだ自分の実力ではハードルが高すぎると思っていました。一方で社内のちょっとした便利APPはブラウザAPPとしてHTML+CSS+Javascriptで提供していて限界が出てきたので、より汎用性が高いものができそうなので検討しても良いかなと感じました。

0

あくまで「Webサーバ内(アプリケーションが動いているのと同じサーバ内)」であればFILE APIが利用可能だと思います。
※構造や構成次第にはなってきますので、検討・検証は行ってください

投稿2022/10/26 22:57

編集2022/10/28 07:32
m.ts10806

総合スコア79935

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mako_0221

2022/10/28 01:38

コメントありがとうございます。返信が遅くなり誠に申し訳ございません。 現状Webサーバー内ではないため、利用ができなそうです。
m.ts10806

2022/10/28 01:42

語弊があり申し訳なかったのですが、ブラウザからアクセスできる場所に置いてあるのであれば・と置き換えてください。
mako_0221

2022/10/28 07:19

むむ、それは予想外のことでした。とすれば、重要な解決方法になり得そうです。できてしまうことが一般的なセキュリティ上の問題(今回は社内利用だけで、私に悪意がなければ問題となりませんが)としてなぜクリアされるのかについても併せて考えてみようと思います。また、アイコンが変わりましたねと思ったのですが、やはり対象の動物は一緒なのですね♪
m.ts10806

2022/10/28 07:31

JavaScriptの機能なのでブラウザからアクセス可能な場所に置いてあることは大前提になります。 基本は「Webサーバ内の」としたのは「アプリケーションが動いているのと同じサーバ内」という意図でした。一応回答修正しておきます。 (FILE APIについては探せば参考記事は沢山出てきます)
mako_0221

2022/10/30 13:08

承知をいたしました。コメントをいただきありがとうございます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。