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

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

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

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3549閲覧

JavaScriptでファイルを読み込む際のパスの記述方法

tarotarosu

総合スコア114

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/09/14 08:13

###前提・実現したいこと
下記のようなディレクトリ構造で、SelectBox.jsxが下記のような内容だとします。

root/
├ dist/
├ json_data/
│ └ data.json
├ node_modules/
├ src/
│ ├ components/
│ │ ├ Hoge.jsx
│ │ └ SelectBox.jsx
│ └ index.jsx
├ package.json
└ webpack.config.js

###SelectBox.jsx

js

1import React from 'react' 2import request from 'superagent' 3import Hoge from './Hoge.jsx' 4 5export default class SelectBox extends React.Component { 6 constructor(props) { 7 super(props) 8 //状態の初期化 9 this.state = { 10 datas: null //読み込んだデータ保存用 11 } 12 } 13 14 //コンポーネントがマウントされるとき 15 componentWillMount(){ 16 //jsonデータを読み込む 17 request.get('../../json_data/data.json') 18 .accept('application/json') 19 .end((err, res) => { 20 this.loadedJSON(err, res) 21 }) 22 } 23 24 //中略 25 26 //コンポーネントの描画 27 render(){ 28 //読み込んだデータからselect要素の作成 29 const options = this.state.datas.map((data) => { 30 return( 31 <option value={data} key={data}> 32 {data} 33 </option> 34 ) 35 }) 36 //select要素として描画 37 return( 38 <div className='App' style={style}> 39 <form method='post'> 40 データ:<select name='data'>{options}</select> 41 <input type='submit' value='Submit' /> 42 </form> 43 <Hoge /> 44 </div> 45 ) 46 } 47} 48

data.jsonを取得してきて、セレクトボックスとして表示するコンポーネントです。
これらのコードはwebpackの設定でバンドルされてdist/に出力されるようになっています。
その際気になったことがあります。
componentWillMount()内でsuperagentによってdata.jsonを読み込む際のパスを、
../json_data/data.json
../../json_data/data.json
../../../json_data/data.json
上記いずれの場合もdata.jsonを取得できて、動作しているということです。
相対パスで表現すると、../../json_data/data.jsonが正しいと思うのですが...

es2015のモジュールの理解が乏しいからか、理由が分かりません。
なぜこのようなことが起こってしまっているのでしょうか?
ご回答を頂けると非常に助かります_(..)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

すみません、Reactに詳しくはないので別角度ですが気になったので回答します。

ディレクトリを読み込んでいるデフォルトの階層が最上部なのではないでしょうか?
相対パスを指定しているということは、デフォルトで読み込んでいるディレクトリがありますよね。
それがrootで、rootより上の階層のディレクトリが存在しないとすると、
"../"を打っても上がる階層はありませんが、エラーにはならなかったハズです。
だから何回"../"としても、参照ディレクトリに変化がなく、
その後ろにくる"/jsondata"は正しいので移動します。

例えばとても簡易的ですが、
C:
∟sample
というディレクトリ構造のPCがあったとして、
コマンドラインで"cd /"で最上位階層に移動した後、
"cd ../sample"や"cd ../../sample"、"cd ../../../sample"と打っても
問題なくsampleディレクトリに移動します。

見当違いでしたらすみません。

投稿2017/09/25 09:56

rnosh

総合スコア171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問