常連

注目の的

社会貢献

質問力

拍手喝采

自己紹介

WindowsのPCで、npm install -g node-gypにてインストールは完了したのですが、
npm run devが実行できません。

「'nuxt'は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」
とエラー文が出たため、PATHに、現在いるローカル環境のパスを通してみたのですが、変わらないです。

このエラーの原因がわかる方いらっしゃいますでしょうか？

'nuxt'は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。のエラー

##質問

**Java（JavaFX）で作成されたデスクトップアプリケーションは
開発環境の上で完成した後、どうやって出力？して配布されているのでしょうか？**

一般的に配布・販売されているソフトウェアのように

ウェブサイトからダウンロード
↓
インストール
↓
ダブルクリックでアプリケーション起動

というような形にする方法が知りたいです！
インストールの仕方などはそれぞれ違ってもいいので、
とりあえず、MacでもWindowsでも起動できるような形にしたいです。

##理由
私は、Java、JavaFXを用いて
独学でデスクトップアプリケーションを作成しています。
開発環境はeclipceで、Macのパソコンを使ってます。
Windowsのパソコンも持ってますが、そちらは開発以外の用途で使用しています。

Javaは有名な言語で、色々なものが作れると聞いたので、
勉強を始めて、アプリケーションの開発を行ってきたのですが
いざ、そのアプリケーションを配布してみようというところで躓いています。

Eclipseで、「Jarファイル」の出力と起動まではできたのですが
Jarファイルのまま配信する、となると
パソコンに詳しくない人には、立ち上げ方が分からずに
使用を諦められてしまうかと思います。
私自身、Jarファイル形式で配布されてるソフトは見たことないです…

立ち上げ方についてのマニュアルを作るという事も考えたのですが、
配信する側・使用する側ともに面倒ですし
きっともっと簡単な配布方法があると思ったので、質問させて頂きました。

JARファイルをEXEファイルにパッケージ？する方法や
自己完結型アプリケーションにする？方法などを色々調べてみましたが、
どれも、思うように起動してくれません…
（何台かで試しましたが、WindowsのOSのバーションやbit数、インストールされているJAVAなどによって、
立ち上がったり立ち上がらなかったりするみたいです。
パソコンはそんなにいっぱい持ってないので、検証不足で原因の確認が難しいです・・・）

色々な動作環境で動くアプリケーションを配布している人や会社は、
どのようしているのか気になります。

プログラミング以外の、アプリケーション起動の仕組みや配布の仕方などについて書かれた
お勧めの書籍や記事などあれば、それを教えて頂けるだけでもありがたいです・・・！
よろしくお願いいたします（>_<）

Javaで作成されたアプリケーションの一般的な配布方法

nodeで書いたスクリプトが有り、中でMySQLデータベースにINSERTする処理が書かれています。
これを`node スクリプト.js`と、直接呼ぶと正常に処理が完了します。

しかし、expressでAPIを書き、その中でexecSyncを使って上記スクリプトを実行すると
処理自体は完了するのですがMysql側で`show processlist`とすると、プロセスがsleep状態で残ったままとなってしまいます。

1回APIを呼ぶ度に1つプロセスが増え、expressを停止すると一斉に消えます。
expressがコネクションをプールしている？と推察しているのですがそのような設定は見当たりませんでした。

ちなみにスクリプト内ではmysql2/promiseを利用し、`await con.query(～～`という形で同期的に処理をしています。

どなたか、心当たりのある方はいらっしゃらないでしょうか。
よろしくお願い致します。

※追記
MySQLのエラーログには一切ログが追記されていませんでした。

※さらに追記
dodox86さんのアドバイスにより私自身の問題はクリア出来ましたが
質問内容そのものに関しては謎のままなのでこのまま残したいと思います。
引き続きexpress,Node.jsまわりでの解決の糸口をお持ちの方、ご回答のほどよろしくお願い申し上げます。

execSyncでスクリプトを呼ぶとDBにプロセスが残ってしまう

### 前提・実現したいこと

Visual Studio CodeでC#を扱っていて、dotnet new consoleで作成したプロジェクトで、
exeファイルの生成を試みているのですが、
dllファイル等も同時に吐き出され、このdllファイルと同階層にexeファイルが配置していないと
exeファイルが起動しない状態です。
dllファイル不要で、exeファイルのみで動くように生成するにはどうすればよいですか？
ご教示お願い致します。

### 該当のソースコード

```
dotnet new console
```
でコンソールプロジェクトを作成しました。

### 試したこと

下記どちらで作成しても、同階層にあるdllファイルを必要としているようでした。
```
dotnet build
```
```
publish -c Release
```
Visual Studio でフォームアプリケーションを作成した際は、
単体のexeファイルで起動できるので、
dotnet new consoleでも、単体で起動するexeファイルを生成できるのではないかと考えています。

### 補足情報（FW/ツールのバージョンなど）

Windows 10

単体で使えるexeファイルの生成。

### 前提
Vue.js+AtmicDesignでの設計というか実装方法について教えていただきたいです。
恐らく正解というものはないのかもしれませんが、もしメリットデメリットがあるなら参考にしていきたいです。

AtmicDesignについてのサイトは結構見てきました。
そこでよくある例文に

　・Atoms　→　入力欄、検索ボタン
　・Molecules → 入力欄 + 検索ボタン
　・Organisms → 上記Moleculesを含んだヘッダー

というものがあります。
これをこのまま実装していけば、「検索結果を表示するもの」が必要になりますが、それに対する例文が全然ないのです。



### 悩んでいること
「検索結果を表示するもの」を実装する場合、たぶん「結果欄」というAtomsを作成すると思います。
例として、以下に「入力欄」、「検索ボタン」、「結果欄」という3つのAtomsがあり、それを「検索ボックス」というひとつのMoleculesに入れるとします。
該当のソースコードに簡単に表示します。

・入力欄に値を入力
・検索ボタン押下
・入力値に関する情報を一覧表示

上記の「情報を一覧表示」をする場合、`searchRes.vue`の`items`に情報を設定する必要があります。

ここで私が悩んでいること、一般的にどの方法が取られるのかが知りたいです。

＜方法1＞
　・検索ボタン押下後、`searchBox.vue`の`search()`メソッドで入力値の情報を取得。
　・取得した情報を`searchRes.vue`の`items`にprops経由で設定。

＜方法2＞
　・検索ボタン押下後、`searchBox.vue`の`search()`メソッドで入力値をstore等に保管か、propsで`searchRes.vue`に渡す。
　・`searchRes.vue`で入力値を検知し、情報を取得。
　・取得した情報を一覧表示。

簡単に言いますと、一覧情報を取得してから`searchRes.vue`に渡すのか、
検索キーを`searchRes.vue`に渡して一覧情報を取得するか、です。

### 該当のソースコード
```js
// 入力欄：searchInp.vue
<template>
  <input type="text" value="">
</template>
```

```js
// 検索ボタン：searchBtn.vue
<template>
  <input type="button" value="Search" @click="fnc">
</template>
<script>
export default {
  methods: {
    fnc() {
      this.$emit('fnc');
    }
  }
}
</script>
```

```js
// 結果欄：searchRes.vue
<template>
  <div>
    <p v-for="(item, idx) in items">{{ item }}</p>
  </div>
</template>
```

```js
// 検索ボックス：searchBox.vue
<template>
  <search-inp />
  <search-btn @fnc="search"></search-btn>
  <search-res></search-res>
</template>
<script>
import searchInp from './searchInp';
import searchBtn from './searchBtn';
import searchBox from './searchBox';
export default {
  methods: {
    search() {
    }
  }
}
</script>
```

### 考えたこと
方法1では、`searchBox.vue`に処理が集まりすぎて肥大化してしまわないのか、
方法2では、`searchRes.vue`に機能を持たせるのはよくないのか、とかを考えてどういう設計にすればいいのかどっちつかずの状態です。

Vue.js+AtomicDesignの設計

JavaScript (ES6) で、
```javascript
const func = ({}, x) => {
  // hogehoge
}
```
というアロー関数が定義できることを知りました。

以前の私の理解では、関数の引数は、
下記コードの a、b のように、仮引数を使って定義するものと思っていました。

```JavaScript
const func = (a, b) => {
  // hogehoge
}
```

前者コードの引数
> {}

は何なのでしょうか？
関数の内部からアクセスすることはできますか？
そもそも、なぜこのような定義（宣言）が可能なのか、
理解できておりません。

初歩的な質問で申し訳ないのですが、
回答いただけますでしょうか。

（以下捕捉）


> {}

を

> []

に置き換えても定義できました。

JavaScript (ES6) の関数の引数に仮引数なしでオブジェクトリテラルや配列リテラルを設定できるのはなぜ？

# javascriptの学習方法

VBAで社内の生産管理ソフトの作成をしていますが、要求のレベルと機能に限界を感じ、
モダンな言語を改めてしっかりと学習したいと思い、ここ１・２ヶ月javascriptの学習をしておりましたが、
実装したい機能に対してのマストな選択、また、それを学ぶための最適解を
未だ見いだせない状態ですので識者の方に助言いただければと存じます。

####最終的な目標
- 社内のシステム化（製造業）
・製品・部材をバーコード管理し在庫管理・入出庫を携帯端末でできるように
・製造の進捗状況の登録・モニタリング
・製造スケジュール・受注・出荷状況の登録
・各種申請のペーパーレス化

※VBAにて実装済機能がいくつかありますが、必要に応じて作り直しも検討しています
※既に可動しているデータ（mysqlにて管理）の変更は難しいのでmysqlはそのまま運用する予定です。

 - +（個人的に）スマートフォンアプリを制作したい

####経緯
 - 前職で軽くPHPを触っていたこともあり、またマルチプラットフォーム対応の容易さから
WEB関連の言語を選択
 - 腰を据えて学習するならモダンな言語を学びたかったのでjavascriptを選択
 - 規模を考慮しAngularを選択→学習
 - フレームワーク以前に圧倒的にjavascriptの知識が足りていなかったので
javascript・Typescriptの学習を開始
 - 情報・選択肢の多さからパニック状態

####所見・疑問点
 - 大前提としてMySQLの運用がある上でのNode.jsの選択は間違いだったのか？
調べてみるとNode.js・ExpressでのMySQL運用記事は多数あるが、
Node.jsはNoSQL前提、のような記事も見かけるため、良否がわからない。
とはいえ、NoSQLは複雑なデータの取扱には適さないとの見解らしく
「複雑なデータの取扱がある案件」→「Node.jsが選択肢から外れる」
とは到底思えないので、多少楽観視はしている。
　
 - javascriptとTypescript、どちらを学べばよいのか？　そもそもどう学べばよいか。
TypeScriptをきちんと理解する上でjavascriptを学びたいのだが、
著名な書籍はバージョンの古いものばかりで、それを学んで良いのかもわからない。
また、最新のjavascriptの情報を見ていると、Typescriptよりjavascriptの方が
記述が容易に思えたもの（async/await（ES2017）等）あり、どちらを学べばよいかの
良否判断ができていない。（TypeScriptの書籍が少ないことも懸念事項）
　
 - どのツールが適しているのか
例えばMysqlとの接続をとっても、mysql2、promise-mysqlと２つあり、Promissについても
promise-mysqlを使えばよいのかmysql2/promissで良いのか、async/awaitを使えばそれで
十分なのかがわかりません。
　
 - また、現在小規模機能を作成しつつ学習を進めているのですが、小規模であってもwebpackや
Expressを導入したほうがいいのか（Angularはjavascriptをある程度理解してから使用する予定です）

####開発環境
macOS Mojave
VSCode

####学習環境？
主にQiitaやteratail、書籍を元に調べています。
英語のリファレンスや投稿サイトのほうが情報量も鮮度も高いのは理解しているのですが
Google翻訳を使いながらなんとか読める程度の読解力なので、少し敬遠気味です。

####他
開発者としての経験も浅く、まだまだ未熟者ですのでご指導ご鞭撻いただければと存じます。

javascriptの学習方法

```typescript
<template>
  <div id="lineSvgPractice" class="lineSvgPractice" @mousemove="resize" @mouseup="mouseup" >



    <div class="area">
        <svg class="svg" width="100" height="100" viewBox="0 0 100 100" >
            <circle :cx="point1XNow" :cy="point1YNow" r="1.4" fill="#ffffff" stroke="#000" @mousedown="point1Active"></circle>
                <line :x1="line1XNow" :y1="line1YNow" :x2="line2XNow" :y2="line2YNow" stroke="#000"></line>
            <circle :cx="point2XNow" :cy="point2YNow" r="1.4" fill="#ffffff" stroke="#000" @mousedown="point2Active"></circle>
        </svg>
    </div>
    


  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {
  }
})
export default class LineSvgPractice extends Vue {



/*--------------------------------------------------*/

    point1ActiveFlag = false
    point1XBefore = 29
    point1YBefore = 29
    point1XNow = 29
    point1YNow = 29

    line1XBefore = 30
    line1YBefore = 30
    line1XNow = 30
    line1YNow = 30

/*--------------------------------------------------*/

    point2ActiveFlag = false
    point2XBefore = 59
    point2YBefore = 59
    point2XNow = 59
    point2YNow = 59

    line2XBefore = 60
    line2YBefore = 60
    line2XNow = 60
    line2YNow = 60

/*--------------------------------------------------*/

    pointStartX = 0
    pointStartY = 0

    public point1Active(event){
        console.log(event)
        this.point1ActiveFlag = true
        this.pointStartX = event.clientX
        this.pointStartY = event.clientY
    }

    public point2Active(event){
        this.point2ActiveFlag = true
        this.pointStartX = event.clientX
        this.pointStartY = event.clientY
    }

    public mouseup(){
        this.point1ActiveFlag = false
        this.point2ActiveFlag = false
        this.point1XBefore = this.point1XNow
        this.point1YBefore = this.point1YNow
        this.line1XBefore = this.line1XNow
        this.line1YBefore = this.line1YNow
        this.point2XBefore = this.point2XNow
        this.point2YBefore = this.point2YNow
        this.line2XBefore = this.line2XNow
        this.line2YBefore = this.line2YNow
    }
    
    public resize(event){
        if(this.point1ActiveFlag){
            this.point1XNow = this.point1XBefore + (event.clientX - this.pointStartX)
            this.point1YNow = this.point1YBefore + (event.clientY - this.pointStartY)
            this.line1XNow = this.line1XBefore + (event.clientX - this.pointStartX)
            this.line1YNow = this.line1YBefore + (event.clientY - this.pointStartY)
        }

        if(this.point2ActiveFlag){
            this.point2XNow = this.point2XBefore + (event.clientX - this.pointStartX)
            this.point2YNow = this.point2YBefore + (event.clientY - this.pointStartY)
            this.line2XNow = this.line2XBefore + (event.clientX - this.pointStartX)
            this.line2YNow = this.line2YBefore + (event.clientY - this.pointStartY)
        }
    }

 
}
</script>

<style lang="scss">
.lineSvgPractice {
  
    .area{
        position: relative;
        width: 100vw;
        height: 80vh;
        .svg{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            circle{
                cursor : pointer
            }
        }
    }

}
</style>
```

線の両端をドラッグして移動できる、コードを書いたのですが、マウスの移動距離とsvg要素の移動距離が合いません...
少しドラッグしただけで、すごい動いてしまいます...
解決策をお伺いしたいです...
そもそもこのやり方は正しいのでしょうか
なんか下手な気がして

開発環境は、vue-cli3.0です↓
https://alligator.io/vuejs/using-new-vue-cli-3/

-----------

yhg様、恐縮ですが回答依頼させていただきました...
良かったら教えてください！(>_<)

vue.js svgデータバインディング

### 前提

こんにちは。私は業務にて、RailsとVueを用いたSPAの開発に従事しており、主にAPIの設計、実装を担当しております。RailsによるAPIの概要は以下の通りです。

- フロントエンド及びネイティブアプリから呼び出され、リクエスト、レスポンスともにJSONを用いる
- APIの一般公開や外部への提供は一切なく、内部での利用に限定している
- RESTベースで設計、実装しているが、後述の理由から、RESTfulとはとても言えない

### 困りごと

前述の通り、APIはRESTベースになっており、初めの頃はなるべくシンプルなCRUDを提供しようと、キレイなRESTFulを目指していました。

しかし、開発が進むにつれ、フロントエンド側のエンジニアから、「この画面ではこういうUIがある都合、APIではこのデータもまとめて返却してほしい」「この一連の操作で一貫性を保たないといけないから、API呼び出し１回で済むようにしてほしい」などのように、APIを呼び出す画面ごとの機能に特化した仕組みをAPIが単一エンドポイントで提供することを希望することが多くなりました。

確かにフロント側にとってみれば、その画面にとって必要な機能を、１回のAPI呼び出しで全て解決できれば実装も楽になりますし、リクエスト回数による通信不可も削減できると思います。

しかし、あまりにAPIがフロント側に寄り添いすぎると、各エンドポイントの責務が曖昧になったり、どのモデルにも属さない、汎用的な機能が出来上がったり、本来単純な機能提供をしていたAPIを複数箇所で再利用することができなくなったりと、保守の観点からあまり望ましくないのではとも考えています。

こういった問題に絶対の正解はないと思いますし、それこそプロダクトの特性や、チームの状態などによって良し悪しが変わることも承知の上です。なので参考までにはなりますが、皆様はそういった経験がある場合、どのように折り合いをつけたのでしょうか。経験はなくとも、APIの設計はこうであるべきなどありましたら、是非ともご意見をお聞かせください。

よろしくおねがいします。

SPAにおけるAPIの設計はフロントの画面に寄り添うべきか？

プログラミングに特化した話でなく大変申し訳ありませんが、経験豊富なみなさまにヒントを頂きたく書き込みました。

どこの会社でもあるある話かもしれませんが、Office系（ExcelやAccess）でガリガリとコードを書いたり
関数がいっぱい入っているようなものってあったりしますよね。

私の職場でもあるのですが、いつ誰が作ったかわからないAccessのシステムがあり今後のメンテナンス性、利用者数増やOffice365に
移行することもあってWEBアプリなどに刷新出来ないかと悩んでいます。

時間やお金をかければ良いと思うのですが、システム以外の仕事もあったり予算も潤沢ではないので進められないでおります。

Accessで作られたシステムを簡単にWEB化させたり、比較的工数が少なく済ませれる方法はないものでしょうか？
もし、ご存知の方いらっしゃいましたらよろしくお願いいたします。

ACCESSで作られた業務システムの置き換えについて

javascript初心者です。
クロージャやらスコープ周りを勉強していると混乱してきました。。。
どなたかお助けください。。。

# 質問1
まずクロージャの理解が合ってるか知りたいです。
例えば次の様にクロージャを生成する関数があったとします。
```
function testScope () {
  let funcs = {}
  let n //(外側のn)
  for (n = 0; n < 3; n++) {
    funcs[n] = () => n //(nを閉じ込め)
  }
  return funcs
}
console.log(testScope())
```
`funcs[1]`〜`funcs[3]`にクローズされた変数`n`は、それぞれ外側の`n`を参照するので、結果同じ値を取るという認識でおります。
![イメージ説明](f2ffe7a327de3c81d569c64e2e7ed144.png)
↑
**`n++`されて`3`となった`n`を見てる、と捉えているんですが合ってますでしょうか。。**

# 質問2
**for文でletを使うと何が起こっているのか知りたいです。**
上記例で`funcs[1]`は`1`を、`funcs[2]`は`2`を保持しようとすると次の様にできると思います。
```
function testScope () {
  let funcs = {}
  for (let n = 0; n < 3; n++) { //外側でなく、for初期化でnをletで宣言
    funcs[n] = () => n
  }
  return funcs
}
console.log(testScope())
```
するとコンソールログ上で狙いの挙動になります。
※ChromeDevToolで見るとトップレベルが`{0:f,1:f,2:f}`から`Object`になってますが、スコープのタイプが`Closure`から`Block`に変わったことと関係あるんでしょうか???)
![イメージ説明](7501d440d9804b04fb88cbd407e8f767.png)

**ここで、なぜ各ループで`n`が使われているのに、結果的に違う`n`を参照できてるんでしょうか。**
**これはつまり「次のループに移るとスコープが変わってる」ということでしょうか？？？？？？**
**だとすれば（実際に行われてる内部処理は分かりませんが）for文は次のようなブロックスコープを生成するイメージで合ってますか？**
```
function testScope () {
  let funcs = {}
  {
    let n = 0
    funcs[n] = () => n
  }
  {
    let n = 1 //前回ループとは別のn
    funcs[n] = () => n
  }
  {
    let n = 2
    funcs[n] = () => n
  }
  return funcs
}
```
諸々理解が追いついておらず質問が的を射てないかもしれませんが、何卒ご回答の程よろしくお願いします。。。。。