常連

###概要
awaitを記述する際は、必ずasyncブロック内の直下に記述する必要があるかと思います。
```
const exist = async() =>{
 await next_process()
}
const next_process = async() =>{
 await (リクエスト処理など)
}
```

今回、ifで条件を分岐を行い、trueであれば、次のasync関数を実行したいのですが、ifのブロックに入れる事でawait式がasync関数内に設置されていないという理由で使用できなくなってしまいます。
```
const exist = async() =>{
 if(process.env.NODE_ENV === 'development'){
  await next_process() //使用できません。
 }
}
const next_process = async() =>{
 await (リクエスト処理など)
}
```

###質問

上記のようにawaitをif/for/thenなどのブロック内ｄ使用したい機会が多々あるのですが、上手く書く方法がわかりません。
アドバイスお願い致します。

ifなどのブロック内でawaitの使用方法

### npm install で ```gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];```
https://github.com/Eleven-Finance
ここのサイトを git clone し npm install した時のエラーです。
使用PC はMacになります。

## エラー全文はこちらです。
```
npm ERR! code 1
npm ERR! path /Users/shineikikkawa/defi-project/test/bigfoot-app/node_modules/utf-8-validate
npm ERR! command failed
npm ERR! command sh -c node-gyp-build
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.0 | darwin | arm64
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: /Users/shineikikkawa/.pyenv/shims/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack 
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:399:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack     at Socket.<anonymous> (node:internal/child_process:451:11)
npm ERR! gyp ERR! stack     at Socket.emit (node:events:520:28)
npm ERR! gyp ERR! stack     at Pipe.<anonymous> (node:net:687:12)
npm ERR! gyp ERR! System Darwin 21.4.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/shineikikkawa/defi-project/test/bigfoot-app/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/shineikikkawa/defi-project/test/bigfoot-app/node_modules/utf-8-validate
npm ERR! gyp ERR! node -v v16.14.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shineikikkawa/.npm/_logs/2022-07-27T05_52_59_709Z-debug-0.log
```

## この前のエラー
この前のエラーの際には、npm installした時には以下のようなエラーがありました。
```Can't find Python executable "python", you can set the PYTHON env variable.```

こちらは```brew install python``` をすることで解消され
その次に 出てきたのが今回のエラーということになります。

```
npm ERR! gyp ERR! stack Error: Command failed: /Users/shineikikkawa/.pyenv/shims/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
```
またこちらのエラーの中にあるpythonのコードは以下のようになっていました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-28/ab6528ed-5628-451f-9acd-55effc6d8fc9.png)

もしここに原因があるとしたらどこを直せばよろしいのでしょうか。


## 個人的に気になる箇所
個人的に４行目の
```command sh -c node-gyp-build```
が気になります。node-gyp-build においては検索結果が多くあり、他にもたくさんのエンジニアの方が困っておられるのだろうとお見受けいたしました。
今回もそのnode-gyp-build関係のエラーなのでしょうか。
ちなみにこの node-gyp-build は初めのエラーの際も表示がありました。

どうぞよろしくお願いします。

gyp ERR!で npm install できない。

node.jsからファイルをローカルに出力したいと考えております。

そこでご質問なのですが、node.jsからデスクトップのパスを取得することは可能でしょうか？

node.jsからデスクトップのパスを取得できますか？

現在、Electron環境にてソフトを開発しております。
動作部分をJavaScriptで作っているのですが、

var request = require("request");

通信を行う必要があるのでこのように記述しますと、ビルド時は正常に通信が出来ているのですが、パッケージ化した際にこの部分でエラーを吐いてそれ以下のJavaScriptが動作しなくなってしまいます。

これまで、同じようにrequire("request")を記述してパッケージ化したソフトを制作した事がありまして、その時にはパッケージ化しても問題なく動作しておりましたが、現在なぜかここでエラーを吐いてしまいます。

ビルド時には正常に動作するがパッケージ化した場合に正常動作しないのでとても困っております。

どなたかこの対策がわかるかた、アドバイス頂ければ幸いです。

var request = require("request");　でエラーが出る

Nodo.jsやNW.jsに関しては手探りの初心者です。

HTML、CSS、Javascriptで制作したローカルサイト一式を、
NW.js、nw-builderを使用して、配布用にexe化しました。

サイト一式をexe化する意図は、少しでも中の画像等をわかりにくくするためと、
起動を初心者でもわかりやすくするためです。

**環境**
Windows10
NW.js 都度最新をnpmでディレクトリにインストール
nw-builder.js 都度最新をnpmでディレクトリにインストール

**ディレクトリ構造**
sample
├ favicon.ico
└ src （ローカルサイト一式とpackage.json）

**exe化**
sampleディレクトリでnw.jsとnw-builder.jsを、npmでインストール
`npm init`を実行して初期化されたpackage.jsonを作成
sample直下に作成されたpackage.jsonのscript部分に以下を追加
```json
"dev":"nw src/",
"build":"nwbuild -p win64 --zip true --winIco favicon.ico -o build/ src/"
```

zipオプションは、よくわかっていませんが軽量化するかな、と思ってつけてみています。


これでローカルサイトをexeファイル化できましたが、
書き出されたwin64フォルダ内にはたくさんのファイルがあります。
また、サイト内に動画とたくさんの画像があるためか、520MBほどあります。

ビルドされたファイル群（win64内のファイルすべて）をDVD-ROMに焼いたあと、
DVD-ROMからexeを直接実行しようとすると、起動に10分以上かかってしまいます。


また、インストーラを作成し（EXEpress 6を使用）、インストーラのみをDVD-ROMに焼き、
DVD-ROMからインストーラを実行するにも、起動に時間がかかります。

※PCやDVDドライブを変更しても同じです。


画像や動画がなく、軽いものでは時間がかかりませんでした。
そのため、ビルドする際か、したものを圧縮かなにかできればと考えたのですが
方法はありますか？

どうぞよろしくお願いいたします。

nw-builderを使用してビルドした物の容量を軽くできますか？

タイトルの通りになってしまいますが、

現在、google chromeの開発者用コンソールにて、

```console
**Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):「bootstrap:83」**

**Error: .plugins[3] may only be a two-tuple or three-tuple**
```

このようなエラーが出ていて、

rails6環境で「bundle exec rails s」をすると、
ブラウザが真っ白な状況になってしまいます。

（確認内容）
その１、./node_modules/babel-loader/lib/index.jsの中身
⇨該当のpluginを探してみたのですが、見つかりませんでした。


その２、npm list
```
├── @babel/core@7.14.6
├── @babel/preset-env@7.14.7
├── babel-loader@8.2.2
├── css-loader@6.1.0
├── file-loader@6.2.0
├── vue-loader@16.3.1
├── vue-template-compiler@2.6.14
├── vue@2.6.14
├── webpack-cli@4.7.2
└── webpack@5.45.1
```

その３、yarn list -s --pattern "babel"
```
├─ @babel/code-frame@7.14.5
├─ @babel/compat-data@7.14.7
├─ @babel/core@7.14.6
├─ @babel/generator@7.14.5
├─ @babel/helper-annotate-as-pure@7.14.5
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.14.5
├─ @babel/helper-compilation-targets@7.14.5
├─ @babel/helper-create-class-features-plugin@7.14.6
├─ @babel/helper-create-regexp-features-plugin@7.14.5
├─ @babel/helper-define-polyfill-provider@0.2.3
├─ @babel/helper-explode-assignable-expression@7.14.5
├─ @babel/helper-function-name@7.14.5
├─ @babel/helper-get-function-arity@7.14.5
├─ @babel/helper-hoist-variables@7.14.5
├─ @babel/helper-member-expression-to-functions@7.14.7
├─ @babel/helper-module-imports@7.14.5
├─ @babel/helper-module-transforms@7.14.5
├─ @babel/helper-optimise-call-expression@7.14.5
├─ @babel/helper-plugin-utils@7.14.5
├─ @babel/helper-remap-async-to-generator@7.14.5
├─ @babel/helper-replace-supers@7.14.5
├─ @babel/helper-simple-access@7.14.5
├─ @babel/helper-skip-transparent-expression-wrappers@7.14.5
├─ @babel/helper-split-export-declaration@7.14.5
├─ @babel/helper-validator-identifier@7.14.5
├─ @babel/helper-validator-option@7.14.5
├─ @babel/helper-wrap-function@7.14.5
├─ @babel/helpers@7.14.6
├─ @babel/highlight@7.14.5
├─ @babel/parser@7.14.7
├─ @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.14.5
├─ @babel/plugin-proposal-async-generator-functions@7.14.7
├─ @babel/plugin-proposal-class-properties@7.14.5
├─ @babel/plugin-proposal-class-static-block@7.14.5
├─ @babel/plugin-proposal-dynamic-import@7.14.5
├─ @babel/plugin-proposal-export-namespace-from@7.14.5
├─ @babel/plugin-proposal-json-strings@7.14.5
├─ @babel/plugin-proposal-logical-assignment-operators@7.14.5
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.14.5
├─ @babel/plugin-proposal-numeric-separator@7.14.5
├─ @babel/plugin-proposal-object-rest-spread@7.14.7
├─ @babel/plugin-proposal-optional-catch-binding@7.14.5
├─ @babel/plugin-proposal-optional-chaining@7.14.5
├─ @babel/plugin-proposal-private-methods@7.14.5
├─ @babel/plugin-proposal-private-property-in-object@7.14.5
├─ @babel/plugin-proposal-unicode-property-regex@7.14.5
├─ @babel/plugin-syntax-async-generators@7.8.4
├─ @babel/plugin-syntax-class-properties@7.12.13
├─ @babel/plugin-syntax-class-static-block@7.14.5
├─ @babel/plugin-syntax-dynamic-import@7.8.3
├─ @babel/plugin-syntax-export-namespace-from@7.8.3
├─ @babel/plugin-syntax-json-strings@7.8.3
├─ @babel/plugin-syntax-logical-assignment-operators@7.10.4
├─ @babel/plugin-syntax-nullish-coalescing-operator@7.8.3
├─ @babel/plugin-syntax-numeric-separator@7.10.4
├─ @babel/plugin-syntax-object-rest-spread@7.8.3
├─ @babel/plugin-syntax-optional-catch-binding@7.8.3
├─ @babel/plugin-syntax-optional-chaining@7.8.3
├─ @babel/plugin-syntax-private-property-in-object@7.14.5
├─ @babel/plugin-syntax-top-level-await@7.14.5
├─ @babel/plugin-transform-arrow-functions@7.14.5
├─ @babel/plugin-transform-async-to-generator@7.14.5
├─ @babel/plugin-transform-block-scoped-functions@7.14.5
├─ @babel/plugin-transform-block-scoping@7.14.5
├─ @babel/plugin-transform-classes@7.14.5
├─ @babel/plugin-transform-computed-properties@7.14.5
├─ @babel/plugin-transform-destructuring@7.14.7
├─ @babel/plugin-transform-dotall-regex@7.14.5
├─ @babel/plugin-transform-duplicate-keys@7.14.5
├─ @babel/plugin-transform-exponentiation-operator@7.14.5
├─ @babel/plugin-transform-for-of@7.14.5
├─ @babel/plugin-transform-function-name@7.14.5
├─ @babel/plugin-transform-literals@7.14.5
├─ @babel/plugin-transform-member-expression-literals@7.14.5
├─ @babel/plugin-transform-modules-amd@7.14.5
├─ @babel/plugin-transform-modules-commonjs@7.14.5
├─ @babel/plugin-transform-modules-systemjs@7.14.5
├─ @babel/plugin-transform-modules-umd@7.14.5
├─ @babel/plugin-transform-named-capturing-groups-regex@7.14.7
├─ @babel/plugin-transform-new-target@7.14.5
├─ @babel/plugin-transform-object-super@7.14.5
├─ @babel/plugin-transform-parameters@7.14.5
├─ @babel/plugin-transform-property-literals@7.14.5
├─ @babel/plugin-transform-regenerator@7.14.5
├─ @babel/plugin-transform-reserved-words@7.14.5
├─ @babel/plugin-transform-shorthand-properties@7.14.5
├─ @babel/plugin-transform-spread@7.14.6
├─ @babel/plugin-transform-sticky-regex@7.14.5
├─ @babel/plugin-transform-template-literals@7.14.5
├─ @babel/plugin-transform-typeof-symbol@7.14.5
├─ @babel/plugin-transform-unicode-escapes@7.14.5
├─ @babel/plugin-transform-unicode-regex@7.14.5
├─ @babel/preset-env@7.14.7
├─ @babel/preset-modules@0.1.4
├─ @babel/runtime@7.14.6
├─ @babel/template@7.14.5
├─ @babel/traverse@7.14.7
├─ @babel/types@7.14.5
├─ babel-loader@8.2.2
├─ babel-plugin-dynamic-import-node@2.3.3
├─ babel-plugin-polyfill-corejs2@0.2.2
├─ babel-plugin-polyfill-corejs3@0.2.3
└─ babel-plugin-polyfill-regenerator@0.2.2
```

その４、package.jsonの中身
```
{
  "name": "（省略）",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "（省略）",
  "author": "（省略）",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.1.0",
    "file-loader": "^6.2.0",
    "vue-loader": "^16.3.1",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}
```

上記内容が現在の状況です。
consoleのエラー解消のためにできることがあればご教授いただきたいです。
よろしくお願いいたします。

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):の解決をしたい

html5 + javascript + node-webkitでアプリを作っています。
そこでご質問ですが、アプリケーション側からローカル(例えばデスクトップ)へ複数のファイルをドラッグ＆ドロップすることは可能でしょうか？

現状ではjavascriptのDataTransfer.setDataメソッドを使っております。しかしDataTransfer.setDataメソッドの場合、指定したタイプ名が同じ場合は、過去に指定したファイルが上書きされてしまい、一つのファイルしか渡せません。

複数のファイルを上手く渡す方法はないでしょうか？何かよい方法がございましたらアドバイスを宜しくお願いいたします。

コードの例ですが、ファイル 1.file, 2.file, 3.fileをa#allDragからドラッグを行い、前述のファイルをまとめてデスクトップへドロップしたいと思っています。

```lang-＜html＞
<a data-downloadurl="application/octet-stream:1.file:./1.file" href="./1.file" id="list1">file1</a>
<a data-downloadurl="application/octet-stream:2.file:./2.file" href="./2.file" id="list2">file2</a>
<a data-downloadurl="application/octet-stream:3.file:./3.file" href="./3.file" id="list3">file3</a>
<a href="#" id="allDrag" ondragstart="startDrag(event);">まとめてドラッグ</a>
```

```lang-＜javascript＞
function startDrag (event) {

    var fileList = [];
    fileList[0] = $("#list1").attr("data-downloadurl");
    fileList[1] = $("#list2").attr("data-downloadurl");
    fileList[2] = $("#list3").attr("data-downloadurl");

    event.dataTransfer.setData("DownloadURL",fileList[0]);
    //上記で複数ファイルを渡したいです。(現状単体のファイルしか指定できません)

}
```

複数のファイルをローカルにドロップする事はできますか？

### 前提・実現したいこと

htmlファイルをアプリケーション化して配布することを目的としています。htaでは好ましくなく、NW.jsやElectronによるクロスプラットフォーム化が必須なのですが、それらのインストールの時点で躓いてしまいました。
ネット上にある導入法の記事を可能な限り読み、書いてある通りに試してみたのですが、どれも上手くいかず困っています。

以下補記として。
この度teratailを初めて利用させていただきます。
HTML、CSS、JavaScript、PHP、Perlはそれぞれ独学で数年～十年程度の経験者です。といっても趣味の範囲で個人のwebサイト運営と、それに関するごくごく簡易なCGIを幾らか自作してきた程度の技術しかありません。
Node.jsはここ数日で初めて触れてみた完全な初学者です。
環境はwin10(64bit)です。

### 発生している問題・試したこと

Node.jsのインストールはおそらく問題なくできています。
コマンドプロンプトやPowerShellを管理者権限で起動し、npmを利用してNW.jsやElectronのインストールを試みるものの、そこで何故かエラーや警告が出てしまいます。Node.jsはLTS版と最新版の両方を試してみたのですが、どちらでも同じ結果でした。インストールが失敗する場合の対処法の記事も読んで試してみましたが変化がありません。
NW.jsの方はWARNの表示が並びつつもインストール自体はできたのか、index.htmlをウィンドウで立ち上げることはできたのですが、nw-builderのインストールは上手くいかず、ビルドは実行できません。Electronの方はそれ自体のインストールができず、最初から詰まりました。上記のどれもバージョンを確認をしても以下のように返ってきます。

```cmd
C:\Users***\Desktop\sample>nw -v
'nw' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

何をどうすれば解決に向かうのか、とっかかりも掴めない状態で数日過ぎてしまいました。具体的な質問ができず申し訳ないのですが、何か情報をいただけると嬉しいです……。どうかよろしくお願いします。