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

編集履歴

質問編集履歴

5

補

2020/11/24 06:58

投稿

yay
yay

スコア17

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

4

補足追加

2020/11/24 06:58

投稿

yay
yay

スコア17

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

3

個人情報

2020/11/24 06:54

投稿

yay
yay

スコア17

title CHANGED
File without changes
body CHANGED
@@ -61,7 +61,7 @@
61
61
  > ui@0.1.0 start C:\Users\yay\myproject\ui
62
62
  > react-scripts start
63
63
 
64
- i ・｢wds・｣: Project is running at http://192.168.2.100/
64
+ i ・｢wds・｣: Project is running at http://xxx.xxx.xxx.xxx/
65
65
  i ・｢wds・｣: webpack output is served from
66
66
  i ・｢wds・｣: Content not from webpack is served from C:\Users\yay\myproject\ui\public
67
67
  i ・｢wds・｣: 404s will fallback to /

2

誤字

2020/09/27 18:37

投稿

yay
yay

スコア17

title CHANGED
File without changes
body CHANGED
@@ -74,7 +74,7 @@
74
74
  ### 環境
75
75
  OS:Win10
76
76
  npm: 6.14.6
77
- node: v12.18.3
77
+ node: 12.18.3
78
78
  sbt: 1.3.4
79
79
  jdk: openJDK11
80
80
  IntelliJ: community-2020.2.2

1

補足追加

2020/09/27 18:36

投稿

yay
yay

スコア17

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,12 @@
1
1
  scala-playframeworkを利用して、フロント側をreactで構築するwebアプリを開発しようとしています。
2
2
  構築手法は[参考サイト](https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd)を追ってみてブラウザが立ち上がるところまではいったのですが、(sbtでplay側：localhost:9000とreact側：localhost:3000をsbt runで同時に立ち上げるもの)localhost:3000へのアクセスができない状態です。
3
3
 
4
- #### ディレクトリ
4
+ #### ディレクトリ構造
5
- myproject
5
+ myproject（sbtプロジェクト）
6
6
  ｜＿＿app
7
7
  ｜＿＿conf
8
8
  ｜...
9
- ｜＿＿ui (フロント側のソースなど)
9
+ ｜＿＿ui (フロント側のソース)
10
10
  ｜　　｜＿＿public
11
11
  ｜　　｜＿＿src
12
12
  ｜　　｜＿＿package.json
@@ -69,4 +69,12 @@
69
69
 
70
70
  Files successfully emitted, waiting for typecheck results...
71
71
  ```
72
- sbtで実行したときには何やらwarningがたくさん出ていましたが、調べてもよくわかりませんでした。。。
72
+ sbtで実行したときには何やらwarningがたくさん出ていましたが、調べてもよくわかりませんでした。。。
73
+
74
+ ### 環境
75
+ OS:Win10
76
+ npm: 6.14.6
77
+ node: v12.18.3
78
+ sbt: 1.3.4
79
+ jdk: openJDK11
80
+ IntelliJ: community-2020.2.2