teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Electron(Node.js・javascript) で、ファイル分割時に変数を共有したい

編集履歴

質問編集履歴

2

express.jsの内容に、必要な情報を追加いたしました。

2021/04/20 02:47

投稿

nutti
nutti

スコア7

test CHANGED
File without changes
test CHANGED
@@ -116,6 +116,34 @@
116
116
 
117
117
 
118
118
 
119
+ // 参考サイトのコピー
120
+
121
+ const bodyParser = require('body-parser');
122
+
123
+ ex.use(function (req, res, next) {
124
+
125
+ res.header('Access-Control-Allow-Origin', '*');
126
+
127
+ res.header(
128
+
129
+ 'Access-Control-Allow-Headers',
130
+
131
+ 'Origin, X-Requested-With, Content-Type, Accept'
132
+
133
+ );
134
+
135
+ next();
136
+
137
+ });
138
+
139
+ ex.use(bodyParser.urlencoded({ extended: true }));
140
+
141
+ ex.use(bodyParser.json());
142
+
143
+ ex.listen(80);
144
+
145
+
146
+
119
147
  ex.post('/', function() {
120
148
 
121
149
  windowA.webContents.send('update', { title: "hoge", name: "taro"})
@@ -140,6 +168,34 @@
140
168
 
141
169
 
142
170
 
171
+ // 参考サイトのコピー
172
+
173
+ const bodyParser = require('body-parser');
174
+
175
+ ex.use(function (req, res, next) {
176
+
177
+ res.header('Access-Control-Allow-Origin', '*');
178
+
179
+ res.header(
180
+
181
+ 'Access-Control-Allow-Headers',
182
+
183
+ 'Origin, X-Requested-With, Content-Type, Accept'
184
+
185
+ );
186
+
187
+ next();
188
+
189
+ });
190
+
191
+ ex.use(bodyParser.urlencoded({ extended: true }));
192
+
193
+ ex.use(bodyParser.json());
194
+
195
+ ex.listen(80);
196
+
197
+
198
+
143
199
  ex.post('/', function() {
144
200
 
145
201
  windowA.webContents.send('update', { title: "hoge", name: "taro"})

1

情報不足、誤字脱字の修正

2021/04/20 02:47

投稿

nutti
nutti

スコア7

test CHANGED
@@ -1 +1 @@
1
- Electron(Node.js・javascript) ファイル分割時に変数を共有したい
1
+ Electron(Node.js・javascript) で、ファイル分割時に変数を共有したい
test CHANGED
@@ -1,34 +1,88 @@
1
+ 初めての質問になります。
2
+
3
+ javascriptは基本的なwebでしか触ったことがなく、こういったシステム的なものは初心者です。
4
+
5
+ 調べながら見よう見まねでやってみたのですが、うまくいかないので質問させていただきました。
6
+
7
+ 質問内容など、不足事項や間違い、追加情報が必要でしたらコメントをいただけますとすぐ追記・修正いたします。
8
+
9
+ どうぞよろしくお願いいたします。
10
+
11
+
12
+
1
- ### Electronでファイルが膨大なため分割をしたいが変数を共有したい
13
+ ### Electronのmain.js(エントリーポイント)ファイルが膨大になったので、分割をしたいがその際に変数を共有したい
2
14
 
3
15
  Electronで開発を行っている際に、ファイルの中身が膨大になった。
4
16
 
5
- その際に、ファイルを分割しようと考えたが分割した先々で使いたい変数があり、
17
+ その際に、ファイルを分割しようと考えたが分割した先々で使いたい変数があり、これをそれぞれ分割先で共有させたい。
6
18
 
7
- これをそれぞれ共有させたい。
19
+ 色々調べて見よう見まねで試してみたのですが、うまくいかず質問させていただきました。
8
20
 
21
+
22
+
23
+ ### 作成しているもの
24
+
25
+ 3個の画面をelectronで作成して、それぞれの画面で表示する内容を`POST`で投稿
26
+
9
- 色々調べて試してみたのですが、うまくいかず質問させていただきました。
27
+ `GET`で表示している値を取得というものを作っていました。
28
+
29
+
30
+
31
+ 以下参考
32
+
33
+ ・画面A(windowA) => カテゴリーA
34
+
35
+ ・画面B(windowB) => カテゴリーB
36
+
37
+ ・画面C(windowC) => カテゴリーC
38
+
39
+ のような位置付けとなっていて
40
+
41
+
42
+
43
+ 1. `POST` (localhost:80/windowA)とパラメータ{ title: "hoge", name: "taro"}を送信
44
+
45
+ 2. `main.js`の中にある`express`の`express.post(/windowA, function().....）`が実行される
46
+
47
+ 3. 色々処理され、2の関数内で出力命令を画面に送る => `windowA.webContents.send`を実行してレンダラー側に命令を送信
48
+
49
+ 4. 受け取ったレンダラー側は情報を元に出力する
50
+
51
+
10
52
 
11
53
 
12
54
 
13
55
  ### 発生している問題・エラーメッセージ
14
56
 
15
- 現状、electronのエントリーポイントである、main.jsだけで処理をまとめているが、下記のような構成にしたい
57
+ 現状、`electron`のエントリーポイントである、`main.js`だけで全ての処理をまとめているが、下記のような構成にしたい。
58
+
59
+
16
60
 
17
61
  ```
18
62
 
19
63
  - main.js (electronのメインファイル)
20
64
 
21
- -- express.js (expressの処理をまとめたい)
65
+ - express.js (expressの処理をまとめたい)
22
66
 
23
- -- preload.js (プリロード)
67
+ - preload.js (プリロードこれは現在既にある)
24
68
 
25
69
  ```
26
70
 
27
- expressでAPIを受信して(GETやPOSTされる)、レンダラープロセスにその情報を送りたい
71
+ その際に、`electron`のウィンドウの情報が入っている変数が`express.js`側になくうまくいかない。
28
72
 
29
- その際に、現状はmain.jsの中で完結しているため、できているが
30
73
 
74
+
75
+ ### やりたいこと
76
+
77
+ 1. Node.jsのモジュール、`express`でAPIを受信して(外部からGETやPOSTされる)
78
+
79
+ 2. GET、POSTの内容を受け取り処理を行いメインプロセスからレンダラープロセスに`ipc通信`でその情報を送りたい
80
+
81
+ その際に、現状は`main.js`の中に`windowA`の変数もあるので`ipc通信`ができているが、
82
+
31
- ファイル分割をしたときにどうしたら良いかがわからない
83
+ ファイル分割をしたときに、呼び出し元にある`windowA`をどうしたら良いかがわからない
84
+
85
+
32
86
 
33
87
 
34
88
 
@@ -42,7 +96,7 @@
42
96
 
43
97
  import { app, ipcMain } from 'electron'
44
98
 
45
- let mainWindow = new BrowserWindow({
99
+ let windowA = new BrowserWindow({
46
100
 
47
101
  webPreferences: false,
48
102
 
@@ -62,17 +116,19 @@
62
116
 
63
117
 
64
118
 
65
- ex.get('/', function() {
119
+ ex.post('/', function() {
66
120
 
67
- mainWindow.webContents.send('test', "test data")
121
+ windowA.webContents.send('update', { title: "hoge", name: "taro"})
68
122
 
69
123
  })
70
124
 
71
125
  ```
72
126
 
73
- このソースを
74
127
 
128
+
129
+ このソースを次のような感じに分割してファイルをすっきりしたい
130
+
75
- express.js
131
+ express.js => 外部からのGET,POSTを受け付けて処理をしてレンダラープロセスに`ipc通信`をしたい
76
132
 
77
133
  ```javascript
78
134
 
@@ -84,15 +140,39 @@
84
140
 
85
141
 
86
142
 
87
- ex.get('/', function() {
143
+ ex.post('/', function() {
88
144
 
89
- mainWindow.webContents.send('test', "test data")
145
+ windowA.webContents.send('update', { title: "hoge", name: "taro"})
90
146
 
91
147
  })
92
148
 
93
149
  ```
94
150
 
151
+
152
+
153
+ main.js => windowの作成などコアな部分に分けたい
154
+
155
+ ```javascript
156
+
157
+ //main
158
+
159
+ import { app, ipcMain } from 'electron'
160
+
161
+ let windowA = new BrowserWindow({
162
+
163
+ webPreferences: false,
164
+
165
+ contextIsolation: true,
166
+
167
+ preload: './preload.js'
168
+
169
+ })
170
+
171
+ ```
172
+
173
+
174
+
95
- と分けたいが、mainWindowがmain.jsのなかにあるためできない
175
+ と分けたいが、`windowA`が`main.js`のなかにあるため、`express.js`では`ipc通信`が実行できませんでした。
96
176
 
97
177
 
98
178
 
@@ -100,7 +180,7 @@
100
180
 
101
181
  １これは実現できないのか
102
182
 
103
- ２実現する（expressでアクセスがあったときにレンダラーに送信したい)ことができるのか
183
+ ２実現する方法があるのか、そもそもが間違っているのか、できるのか
104
184
 
105
185
  ３可能であれば何をするべきなのか
106
186