teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問sbtからnpm startを起動してもlocalhost:3000にアクセスできない

編集履歴

質問編集履歴

5

補

2020/11/24 06:58

投稿

yay
yay

スコア17

test CHANGED
@@ -1 +1 @@
1
- React Native スタイルで入れ子のプロパティのスタイルを適用したい
1
+ sbtからnpm startを起動してもlocalhost:3000にアクセスできない
test CHANGED
@@ -1,109 +1,125 @@
1
- ReactNativeのインラインスタイルで、描画部分で指定するスタイルをオブジェクトの書き方で当てる方法はありますでしょうか？
1
+ scala-playframeworkを利用して、フロント側をreactで構築するwebアプリを開発しようとしています。
2
2
 
3
- 具体的には以下のようなスタイル構造の場合を想定しています。
3
+ 構築手法は[参考サイト](https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd)を追ってみてブラウザが立ち上がるところまではいったのですが、(sbtでplay側：localhost:9000とreact側：localhost:3000をsbt runで同時に立ち上げるもの)localhost:3000へのアクセスができない状態です。
4
4
 
5
+ #### ディレクトリ構造
5
6
 
7
+ myproject（sbtプロジェクト）
6
8
 
7
- ```react
9
+ ｜＿＿app
8
10
 
11
+ ｜＿＿conf
9
12
 
13
+ ｜...
10
14
 
11
- // レンダー部
15
+ ｜＿＿ui (フロント側のソース)
12
16
 
17
+ ｜　　｜＿＿public
18
+
19
+ ｜　　｜＿＿src
20
+
21
+ ｜　　｜＿＿package.json
22
+
23
+ ｜　　｜...
24
+
25
+ #### 実行結果
26
+
27
+ IntelliJからsbtで実行
28
+
29
+ ```bash
30
+
31
+ C:\Users\yay\myproject>sbt run
32
+
33
+ [info] welcome to sbt 1.3.13 (Oracle Corporation Java 11.0.2)
34
+
13
- // オブジェクトのようにadd, deleteをボタンプロパティに入れ子にしてそれぞれのスタイルを当てたい
35
+ [info] loading global plugins from C:\Users\yay.sbt\1.0\plugins
14
36
 
15
37
  ...
16
38
 
17
- <div style={styles.button.add}>
39
+ --- (Running the application, auto-reloading is enabled) ---
18
40
 
19
- ...
41
+ [info] p.c.s.AkkaHttpServer - Listening for HTTP on /0:0:0:0:0:0:0:0:9000
20
42
 
21
- <div style={styles.button.delete}>
43
+ (Server started, use Enter to stop and go back to the console...)
22
44
 
23
- ...
45
+ > ui@0.1.0 start C:\Users\yay\myproject\ui
24
46
 
47
+ > react-scripts start
25
48
 
49
+ i ・｢wds・｣: Project is running at http://xxx.xxx.xxx.xxx/
26
50
 
27
- // スタイルシートのプロパティ
51
+ i ・｢wds・｣: webpack output is served from
28
52
 
29
- const styles = StyleSheet.create({
53
+ i ・｢wds・｣: Content not from webpack is served from C:\Users\yay\myproject\ui\public
30
54
 
31
- 　　container: {
55
+ i ・｢wds・｣: 404s will fallback to /
32
56
 
33
- 　　flex: 1,
57
+ Starting the development server...
34
58
 
35
- 　　},
59
+ WARNING: An illegal reflective access operation has occurred
36
60
 
37
- 　button: { // ボタンの共通スタイル
61
+ WARNING: Illegal reflective access by com.google.inject.internal.cglib.core.$ReflectUtils$1 (file:/C:/Users/yay/AppData/Local/Coursier/cache
38
62
 
39
- width: ...
63
+ /v1/https/repo1.maven.org/maven2/com/google/inject/guice/4.2.3/guice-4.2.3.jar) to method java.lang.ClassLoader.defineClass(java.lang.String,b
40
64
 
41
- height: ...
65
+ yte[],int,int,java.security.ProtectionDomain)
42
66
 
43
- ...
67
+ WARNING: Please consider reporting this to the maintainers of com.google.inject.internal.cglib.core.$ReflectUtils$1
44
68
 
45
- add: { // addボタンのみのスタイル
69
+ WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
46
70
 
47
- font-color: ...
71
+ WARNING: All illegal access operations will be denied in a future release
48
72
 
49
- },
73
+ 2020-09-28 03:04:32 INFO play.api.http.EnabledFilters Enabled Filters (see <https://www.playframework.com/documentation/latest/Filters>):
50
74
 
51
- delete: { // deleteボタンのみのスタイル
75
+ play.filters.csrf.CSRFFilter
52
76
 
53
- font-color: ....
77
+ play.filters.headers.SecurityHeadersFilter
54
78
 
55
- }
79
+ play.filters.hosts.AllowedHostsFilter
56
80
 
57
- ...
81
+ 2020-09-28 03:04:32 INFO play.api.Play Application started (Dev) (no global state)
58
82
 
59
83
  ```
60
84
 
61
- addやdeleteなど共通化しているもの(ここではbutton)は一緒にしたいのですが、上のようにobj.prop...というようなスタイルのアクセスの参考文献が見つからず実現できないのかな？と思っています。
85
+ uiディレクトリ内でnpm startをすれば普通にlocalhostにアクセスできます。
62
86
 
63
- (たいていは階層が1つのプロパティで表現されているものがネットでは散見されます。)
87
+ ```bash
64
88
 
65
- ```react
89
+ C:\Users\yay\myproject\ui>npm start
66
90
 
67
- // ex
91
+ > ui@0.1.0 start C:\Users\yay\myproject\ui
68
92
 
69
- ...
93
+ > react-scripts start
70
94
 
71
- <div style={styles.add}> // これだとaddとdeleteで共通化したいスタイルを二重に定義することになる
95
+ i ・｢wds・｣: Project is running at http://192.168.2.100/
72
96
 
73
- ...
97
+ i ・｢wds・｣: Project is running at http://xxx.xxx.xxx.xxx/
74
98
 
75
- <div style={styles.delete}>
99
+ i ・｢wds・｣: webpack output is served from
76
100
 
77
- ...
101
+ i ・｢wds・｣: Content not from webpack is served from C:\Users\yay\myproject\ui\public
78
102
 
103
+ i ・｢wds・｣: 404s will fallback to /
79
104
 
105
+ Starting the development server...
80
106
 
81
-
82
-
83
- const style = StyleSheet.create({
107
+ Files successfully emitted, waiting for typecheck results...
84
-
85
- container: {
86
-
87
- ...
88
-
89
- },
90
-
91
- add: {
92
-
93
- ...
94
-
95
- },
96
-
97
- delete: {
98
-
99
- ...
100
-
101
- }
102
-
103
- ...
104
-
105
- }
106
108
 
107
109
  ```
108
110
 
109
- 多分実現したいことの書き方があると思うのですが、まだまだ勉強不足で分かりません。どなたか教えていただけませんでしょうか？
111
+ sbtで実行したときには何やらwarningがたくさん出ていましたが、調べてもよくわかりませんでした。。。
112
+
113
+ ### 環境
114
+
115
+ OS:Win10
116
+
117
+ npm: 6.14.6
118
+
119
+ node: 12.18.3
120
+
121
+ sbt: 1.3.4
122
+
123
+ jdk: openJDK11
124
+
125
+ IntelliJ: community-2020.2.2

4

補足追加

2020/11/24 06:58

投稿

yay
yay

スコア17

test CHANGED
@@ -1 +1 @@
1
- sbtからnpm startを起動してもlocalhost:3000にアクセスできない
1
+ React Native スタイルで入れ子のプロパティのスタイルを適用したい
test CHANGED
@@ -1,159 +1,109 @@
1
- scala-playframeworkを利用して、フロント側をreactで構築するwebアプリを開発しようとしています。
1
+ ReactNativeのインラインスタイルで、描画部分で指定するスタイルをオブジェクトの書き方で当てる方法はありますでしょうか？
2
2
 
3
- 構築手法は[参考サイト](https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd)を追ってみてブラウザが立ち上がるところまではいったのですが、(sbtでplay側：localhost:9000とreact側：localhost:3000をsbt runで同時に立ち上げるもの)localhost:3000へのアクセスができない状態です。
3
+ 具体的には以下のようなスタイル構造の場合を想定しています。
4
4
 
5
5
 
6
6
 
7
- #### ディレクトリ構造
7
+ ```react
8
8
 
9
- myproject（sbtプロジェクト）
10
9
 
11
- ｜＿＿app
12
10
 
13
- ｜＿＿conf
11
+ // レンダー部
14
12
 
15
- ｜...
13
+ // オブジェクトのようにadd, deleteをボタンプロパティに入れ子にしてそれぞれのスタイルを当てたい
16
14
 
17
- ｜＿＿ui (フロント側のソース)
15
+ ...
18
16
 
19
- ｜　　｜＿＿public
17
+ <div style={styles.button.add}>
20
18
 
21
- ｜　　｜＿＿src
19
+ ...
22
20
 
23
- ｜　　｜＿＿package.json
21
+ <div style={styles.button.delete}>
24
22
 
25
- ｜　　｜...
23
+ ...
24
+
25
+
26
+
27
+ // スタイルシートのプロパティ
28
+
29
+ const styles = StyleSheet.create({
30
+
31
+ 　　container: {
32
+
33
+ 　　flex: 1,
34
+
35
+ 　　},
36
+
37
+ 　button: { // ボタンの共通スタイル
38
+
39
+ width: ...
40
+
41
+ height: ...
42
+
43
+ ...
44
+
45
+ add: { // addボタンのみのスタイル
46
+
47
+ font-color: ...
48
+
49
+ },
50
+
51
+ delete: { // deleteボタンのみのスタイル
52
+
53
+ font-color: ....
54
+
55
+ }
56
+
57
+ ...
58
+
59
+ ```
60
+
61
+ addやdeleteなど共通化しているもの(ここではbutton)は一緒にしたいのですが、上のようにobj.prop...というようなスタイルのアクセスの参考文献が見つからず実現できないのかな？と思っています。
62
+
63
+ (たいていは階層が1つのプロパティで表現されているものがネットでは散見されます。)
64
+
65
+ ```react
66
+
67
+ // ex
68
+
69
+ ...
70
+
71
+ <div style={styles.add}> // これだとaddとdeleteで共通化したいスタイルを二重に定義することになる
72
+
73
+ ...
74
+
75
+ <div style={styles.delete}>
76
+
77
+ ...
26
78
 
27
79
 
28
80
 
29
81
 
30
82
 
83
+ const style = StyleSheet.create({
31
84
 
85
+ container: {
32
86
 
87
+ ...
33
88
 
89
+ },
34
90
 
35
- #### 実行結果
91
+ add: {
36
92
 
37
- IntelliJからsbtで実行
93
+ ...
38
94
 
39
- ```bash
95
+ },
40
96
 
41
- C:\Users\yay\myproject>sbt run
97
+ delete: {
42
98
 
43
- [info] welcome to sbt 1.3.13 (Oracle Corporation Java 11.0.2)
99
+ ...
44
100
 
45
- [info] loading global plugins from C:\Users\yay.sbt\1.0\plugins
101
+ }
46
102
 
47
103
  ...
48
104
 
49
-
50
-
51
- --- (Running the application, auto-reloading is enabled) ---
52
-
53
-
54
-
55
- [info] p.c.s.AkkaHttpServer - Listening for HTTP on /0:0:0:0:0:0:0:0:9000
56
-
57
-
58
-
59
- (Server started, use Enter to stop and go back to the console...)
60
-
61
-
62
-
63
-
64
-
65
- > ui@0.1.0 start C:\Users\yay\myproject\ui
66
-
67
- > react-scripts start
105
+ }
68
-
69
-
70
-
71
- i ・｢wds・｣: Project is running at http://xxx.xxx.xxx.xxx/
72
-
73
- i ・｢wds・｣: webpack output is served from
74
-
75
- i ・｢wds・｣: Content not from webpack is served from C:\Users\yay\myproject\ui\public
76
-
77
- i ・｢wds・｣: 404s will fallback to /
78
-
79
- Starting the development server...
80
-
81
-
82
-
83
- WARNING: An illegal reflective access operation has occurred
84
-
85
- WARNING: Illegal reflective access by com.google.inject.internal.cglib.core.$ReflectUtils$1 (file:/C:/Users/yay/AppData/Local/Coursier/cache
86
-
87
- /v1/https/repo1.maven.org/maven2/com/google/inject/guice/4.2.3/guice-4.2.3.jar) to method java.lang.ClassLoader.defineClass(java.lang.String,b
88
-
89
- yte[],int,int,java.security.ProtectionDomain)
90
-
91
- WARNING: Please consider reporting this to the maintainers of com.google.inject.internal.cglib.core.$ReflectUtils$1
92
-
93
- WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
94
-
95
- WARNING: All illegal access operations will be denied in a future release
96
-
97
- 2020-09-28 03:04:32 INFO play.api.http.EnabledFilters Enabled Filters (see <https://www.playframework.com/documentation/latest/Filters>):
98
-
99
-
100
-
101
- play.filters.csrf.CSRFFilter
102
-
103
- play.filters.headers.SecurityHeadersFilter
104
-
105
- play.filters.hosts.AllowedHostsFilter
106
-
107
-
108
-
109
- 2020-09-28 03:04:32 INFO play.api.Play Application started (Dev) (no global state)
110
-
111
-
112
106
 
113
107
  ```
114
108
 
115
- uiディレクトリ内でnpm startをすれば普通にlocalhostにアクセスできます。
116
-
117
- ```bash
118
-
119
- C:\Users\yay\myproject\ui>npm start
120
-
121
- > ui@0.1.0 start C:\Users\yay\myproject\ui
122
-
123
- > react-scripts start
124
-
125
-
126
-
127
- i ・｢wds・｣: Project is running at http://xxx.xxx.xxx.xxx/
128
-
129
- i ・｢wds・｣: webpack output is served from
130
-
131
- i ・｢wds・｣: Content not from webpack is served from C:\Users\yay\myproject\ui\public
132
-
133
- i ・｢wds・｣: 404s will fallback to /
134
-
135
- Starting the development server...
136
-
137
-
138
-
139
- Files successfully emitted, waiting for typecheck results...
140
-
141
- ```
142
-
143
- sbtで実行したときには何やらwarningがたくさん出ていましたが、調べてもよくわかりませんでした。。。
109
+ 多分実現したいことの書き方があると思うのですが、まだまだ勉強不足で分かりません。どなたか教えていただけませんでしょうか？
144
-
145
-
146
-
147
- ### 環境
148
-
149
- OS:Win10
150
-
151
- npm: 6.14.6
152
-
153
- node: 12.18.3
154
-
155
- sbt: 1.3.4
156
-
157
- jdk: openJDK11
158
-
159
- IntelliJ: community-2020.2.2

3

個人情報

2020/11/24 06:54

投稿

yay
yay

スコア17

test CHANGED
File without changes
test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
 
126
126
 
127
- i ・｢wds・｣: Project is running at http://192.168.2.100/
127
+ i ・｢wds・｣: Project is running at http://xxx.xxx.xxx.xxx/
128
128
 
129
129
  i ・｢wds・｣: webpack output is served from
130
130
 

2

誤字

2020/09/27 18:37

投稿

yay
yay

スコア17

test CHANGED
File without changes
test CHANGED
@@ -150,7 +150,7 @@
150
150
 
151
151
  npm: 6.14.6
152
152
 
153
- node: v12.18.3
153
+ node: 12.18.3
154
154
 
155
155
  sbt: 1.3.4
156
156
 

1

補足追加

2020/09/27 18:36

投稿

yay
yay

スコア17

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
 
6
6
 
7
- #### ディレクトリ
7
+ #### ディレクトリ構造
8
8
 
9
- myproject
9
+ myproject（sbtプロジェクト）
10
10
 
11
11
  ｜＿＿app
12
12
 
@@ -14,7 +14,7 @@
14
14
 
15
15
  ｜...
16
16
 
17
- ｜＿＿ui (フロント側のソースなど)
17
+ ｜＿＿ui (フロント側のソース)
18
18
 
19
19
  ｜　　｜＿＿public
20
20
 
@@ -141,3 +141,19 @@
141
141
  ```
142
142
 
143
143
  sbtで実行したときには何やらwarningがたくさん出ていましたが、調べてもよくわかりませんでした。。。
144
+
145
+
146
+
147
+ ### 環境
148
+
149
+ OS:Win10
150
+
151
+ npm: 6.14.6
152
+
153
+ node: v12.18.3
154
+
155
+ sbt: 1.3.4
156
+
157
+ jdk: openJDK11
158
+
159
+ IntelliJ: community-2020.2.2