常連

多分とても初歩的な質問だと思うのですが、検索でうまく答えが見つけられず、アドバイスいただけましたら幸いです。

### 前提・実現したいこと

jQuery($navi2nd).removeClass('is-open');
jQuery($navi3rd).removeClass('is-open');
jQuery($navi4th).removeClass('is-open');

上記のようなコードを書いていたのですが、同じ動きをするためコードをまとめたいと思い、下記のようにまとめてみました。

jQuery($navi2nd,$navi3rd,$navi4th).removeClass('is-open');

すると、ひとつめの$navi2ndにしか処理が走りませんでした。
調べてみると複数のセレクタを使用したい場合は上記のような書き方がひっかかったのですが、removeClassの場合はこの方法は使えないのでしょうか…？（調べてでてきた例は.cssでの処理でした）

jQueryのバージョン3.2.1

jQueryのremoveClassで複数の要素をセレクタに指定したい

Nuxt TypeScript
https://typescript.nuxtjs.org/examples/class-api/basic.html

Nuxt.js TypeScriptは、
Options API、Class API、Composition API
の3つのAPIが存在していますが、
下記のVue.js発明者のEvanYouのコメントでVue3系では、Vue.extendは残り続けるが
TypeScriptを使う場合は、型推論の強化されたClass APIを使用したら良いと
コメントされています。
ということは、必然的にClass APIもしくは、Composition APIを使えば良いことになると思うのですが、TypeScriptが初めての為、どのAPIを採用したら良いか迷っています。
博識のある方、採用理由も添えてご教授して頂けませんでしょうか？

※ Nuxt TypeScriptでどのAPI方式を採用すれば良いか知りたいです。
Vue.jsでTypeScriptを使用する場合のAPI方式の採用方法についても
ご存知であれば雑学として知りたいです。


![イメージ説明](5e2f7c0a06d8be4a49849598feb26cf7.png)


![イメージ説明](6c160b5f564e06d6d61287197874c22c.png)

Nuxt TypeScriptでのAPI採用方法について

範囲内なのですが例外が発生します 要素数を10に指定しているので範囲内だと思います。
ご教授お願い致します。

```C#

    public string[] UserNames = new string[10];
 
    public void UpdateMemberList()//一度だけ呼び出す
    {
        foreach (var p in PhotonNetwork.playerList)
        {
            UserMgr($"User{Count}", p.NickName);//アイコンを表示する
            MyNumber = PhotonNetwork.playerName == p.NickName ? Count : MyNumber;//自分の背番号を取得する
            Debug.Log($"{Count}"+ p.NickName);
            UserNames[8] = p.NickName ?? "UserName";//配列に代入 ←8以上の数字だと例外が発生するので明示的に8と指定しました            
            ++Count;
        }      
    }

IndexOutOfRangeException: Index was outside the bounds of the array.
(wrapper stelemref) System.Object.virt_stelemref_sealed_class(intptr,object)
PhotonMgr.UpdateMemberList () (at Assets/Script/PhotonMgr.cs:96)
PhotonMgr.OnJoinedRoom () (at Assets/Script/PhotonMgr.cs:83)
UnityEngine.GameObject:SendMessage(String, Object, SendMessageOptions)
NetworkingPeer:SendMonoMessage(PhotonNetworkingMessage, Object[]) (at Assets/Photon Unity Networking/Plugins/PhotonNetwork/NetworkingPeer.cs:2856)
NetworkingPeer:OnEvent(EventData) (at Assets/Photon Unity Networking/Plugins/PhotonNetwork/NetworkingPeer.cs:2564)
ExitGames.Client.Photon.PeerBase:DeserializeMessageAndCallback(StreamBuffer)
ExitGames.Client.Photon.EnetPeer:DispatchIncomingCommands()
ExitGames.Client.Photon.PhotonPeer:DispatchIncomingCommands()
PhotonHandler:Update() (at Assets/Photon Unity Networking/Plugins/PhotonNetwork/PhotonHandler.cs:161)


日本語訳:インデックスは配列の境界外でした。
```

C# 配列　配列の境界外とでます

### 前提・実現したいこと

現在、JavaScriptの非同期処理を理解する必要があるため

- コールバック
- Promise
- async/await

について勉強していました。

しかし、Promiseの挙動について不可解な点があります。
　

### 発生している問題

```javascript
function asyncFunc(val) {
    console.log("first");
    return new Promise((resolve, reject) => {
        console.log("second");
        resolve(val * 2);
    })
}


asyncFunc(50)
    .then((val) => {
        console.log(val);
    });

console.log('here');
```

以上のコードをブラウザで実行したときに、実行順序が

```
first
second
here
100
```

のようになります。

個人的には、
```
first
here
second
100
```

の順番で出力されると考えていました。

### 上記のような順番であると考える理由

JavaScriptの勉強内で

ChromeのようなWebブラウザは

v8(ブラウザ内のjs実行エンジン)
- シングルスレッド
- スタック(関数・処理を積んでいく)

Web API
- DOM
- Timer
- setTimeout

キュー
- もしv8のスタックが空なら、非同期処理が終わった部分をスタックに戻す

という３構成であると考えていました。


例えば、setTimeout(f)を実行すると
まずスタックに入り
その後setTimeoutなので、Web　APIだ！　とブラウザが代わりに実行して（タイマーを測って）
そして、タイマーの時間になったら、キューに移し、スタックが空いている瞬間があったらfをスタックに入れて実行する。
という認識です。


そのため、上記のコードを実行すると

1. asyncFuncをスタックに積む
2. asyncFuncを解析すると、console.log("first")があるので実行する。
3. return new Promiseなので、WebAPIもしくはキューに中身を打ち込む。
(Promiseは、resolve, rejectがなされるまで内部状態が変わらないので、おそらくWebAPI・キューに積まれる)

4. console.log("here")を実行する。
5. スタックが空いたので、Promise内を実行し、まずsecondを出力する。
6. resolveを実行し、FulFilled状態になりthenメソッドが呼ばれる。
7. thenメソッド内のconsole.log(val)をスタックに積んで実行する。

という流れになると想定していました。

しかし、実際の実行順序は
thenメソッドだけが後回しでそれ以外が先に実行されていました。

これはどういう実行順序、またはPromiseの仕組みなのでしょうか？

よろしくお願いいたします。

javascriptのPromiseの実行順序が分からない

gitの使い方が曖昧なので質問させていただきます。

developブランチを切り、feature/firstというブランチを作ったとします。

feature/firstで作業していたら、feature/secondというブランチがdevelopにマージされました。

この場合、feature/firstはどうするべきなのでしょうか？
git pull origin develop で更新すべきですか？

gitでブランチを切ったあとに更新があった場合どうするか

以下のような、jQueryを使った画像アップロード処理を実装したのですが、
iphoneを使って画像をアップする際に、**403エラー**が発生しました。

```javascript
var fd = new FormData();
fd.append("title", title);
fd.append("message", message);
fd.append("image", image);
$.ajax({
    url: [送信先URL],
    type: "POST",
    data: fd,
    processData: false,
    contentType: false,
    dataType: 'json'
}).done(function( data ) {
    if(data.message != null){
$('#comp_result').html(data.message);
    }
    return false;
}).fail(function(jqXHR, textStatus, errorThrown) {
    $('#comp_result').html("<p>予期せぬエラーが発生しました。<br>お手数ですが最初からやり直すか、頻繁に起きる場合は管理者までご連絡ください<br>" +
"XMLHttpRequest.status:" + jqXHR.status + "<br>" +
"textStatus:" + textStatus + "<br>" +
"errorThrown:" + errorThrown.message +
"</p>");
});
```

403は、**XMLHttpRequest.status**の値で確認しました。
送付先サーバーにアクセスログが記録されないので、サーバーに通信する前にエラーになっている模様です。

画像によってはアップすることができ、調査した限りですと、キャプチャした画像のアップのみできません。
カメラで撮影した画像や、android端末からは、問題なく送信できます。
iphoneの複数端末で確認できたのでOSの違い等は関係がないかと思っております。

同様の現象に対応された方、解決等あるからご教授願えないでしょうか？
もしくは、他に、画像とテキストの両方を一度に送信できる方法がありましたら教えてもらえませんでしょうか。
FineUploaderを調べたのですが、画像のみのサンプルしかなく、画像とテキスト両方を送信する方法がわからなかったので。

よろしくお願いいたします。

jQueryを使った画像アップロード処理で、iphoneからキャプチャ画像がアップできないバグがあるのでその対処方法

標題の通り、仕様が複雑なためなかなか解決策を見つけることができず、
質問させていただきました。

内容としては、以下の通りです。

### 仕様
①Show Modalを押下すると、モーダルが発生する。
```.vue
<button id="show-modal" @click="showModal = true">Show Modal</button>
```

②モーダルの中身は以下の通り（選択肢を選択すると、③のdiplayhogeに出力される）
```.vue
<DefaultModal v-if="showModal" @close="showModal = false">
  <div slot="body">
    <div>
      <input type="radio" name="1" @change="fst" value="1-1">1-1
      <input type="radio" name="1" @change="fst" value="1-2">1-2
      <input type="radio" name="1" @change="fst" value="1-3">1-3
    </div>
    <div>
      <input type="radio" name="2" @change="sec" value="2-1">2-1
      <input type="radio" name="2" @change="sec" value="2-2">2-2
      <input type="radio" name="2" @change="sec" value="2-3">2-3
    </div>
    <div>
      <input type="radio" name="3" @change="thr" value="3-1">3-1
      <input type="radio" name="3" @change="thr" value="3-2">3-2
      <input type="radio" name="3" @change="thr" value="3-3">3-3
    </div>
    <button @click="showModal = false">確定</button>
  </div>
</DefaultModal>
```

③  <button @click="addModal">モーダル増殖</button>を押すと以下が複製される。
```.vue
  <div v-for="item in items" :key="item">
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <div>
      <p>{{ displayfst }}</p>
      <p>{{ displaysec }}</p>
      <p>{{ displaythr }}</p>
    </div>
  </div>
```

全体的なコード
```vue
<template>
<div>
  <div v-for="item in items" :key="item">
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <div>
      <p>{{ displayfst }}</p>
      <p>{{ displaysec }}</p>
      <p>{{ displaythr }}</p>
    </div>
  </div>
  <button @click="addModal">複製！</button>
  <DefaultModal v-if="showModal" @close="showModal = false">
    <div slot="body">
      <div>
        <input type="radio" name="1" @change="fst" value="1-1">1-1
        <input type="radio" name="1" @change="fst" value="1-2">1-2
        <input type="radio" name="1" @change="fst" value="1-3">1-3
      </div>
      <div>
        <input type="radio" name="2" @change="sec" value="2-1">2-1
        <input type="radio" name="2" @change="sec" value="2-2">2-2
        <input type="radio" name="2" @change="sec" value="2-3">2-3
      </div>
      <div>
        <input type="radio" name="3" @change="thr" value="3-1">3-1
        <input type="radio" name="3" @change="thr" value="3-2">3-2
        <input type="radio" name="3" @change="thr" value="3-3">3-3
      </div>
      <button @click="showModal = false">確定</button>
    </div>
  </DefaultModal>
</div>
</template>

<script>
import DefaultModal from '@/components/DefaultModal.vue';

export default {
  name: 'Reserve',
  components: {
    DefaultModal,
  },
  data() {
    return {
      showModal: false,
      displayfst: '',
      displaysec: '',
      displaythr: '',
      items: [{ id: 1 }],
    };
  },
  methods: {
    fst(e) {
      const target = e.target.value;
      this.displayfst = target;
    },
    sec(e) {
      const target = e.target.value;
      this.displaysec = target;
    },
    thr(e) {
      const target = e.target.value;
      this.displaythr = target;
    },
    addModal() {
      const max = this.items.reduce((a, b) => (a > b ? a : b), 0);
      this.items.push({
        id: max + 1,
      });
    },
  },
};
</script>

<style lang="scss">
</style>

```

### 実現したいこと
・複製！した場合に、モーダルで選択肢を選択した際に全て同じ値が出力されてしまう
（例えば、１−１を選択した場合、複製した全てのdisplayFstに１−１が表示される）ため、
それぞれを独立させたい。



何卒お知恵をお貸したく。。。よろしくお願い致します。

【Vue.js】複製可能（同項目）なフォームで、それぞれ異なる値を出力したい【お助けください】

nuxtで作成しているアプリケーションでstoreのテストを書いています。テストライブラリはjestを使用しています。
actionのコード例は以下のとおりです

```javascript

export const actions = {
  async login({ commit }, { id }) {
    const user = await this.$axios.$get(`/users/${id}`)
    if (!user) { throw new Error('invalid user') }
    commit('setUser', { user })
  }
}
```

ここでactionに対するテストを書くと以下のようになると思います。
```javascript
let store
beforeEach(() => {
  store = new Vuex.Store(cloneDeep(index))
})
test('login', () => {
  store.dispatch('login', { id: 'foo_bar' })
  expect(store.getters['user'].id).toEqual('foo_bar')
})
```
このときにthis.$axiosは当然存在しないのでstubを作りたいのですがどのように作ればよいかわかりません。


いくつか調べた中でaxios + MockAdapterを使用する方法は試したのですが、上手く動作しませんでした。
```javascipt
// beforeEachに追加
store.$axios = axios.create()

// test内に追加
const mock = new MockAdapter(store.$axios)
mock.onGet('/users/foo_bar').reply(200, { id: 'foo_bar' })
```

nuxtの環境でvuexのテストをするときに$axiosをスタブ化したい

他サイトのjsonファイルを使用してwebアプリを作る場合、
画像転載等で法的にNGとなる可能性はありますでしょうか。

例えば、あるレストランのメニュー情報(メニュー名・画像・値段)が
CMSの仕様によりjsonで本番環境に上がっていて、APIとして公開しているわけではない場合に、
自分のサイトでそのjsonを直接（絶対パス）読み込んで整形しレコメンドのデータとして活用するなど。
Googleの画像検索なども同じようなものかなと思っているのですが、
自サーバにダウンロードしなければセーフ、などの明確な基準などあるのでしょうか。

他サイトのjsonファイルを使ってwebアプリを作る場合の法的懸念

現在Ruby on Railsを用いて、フォームを作成しております。
(Viewはhamlで作成しております)
今作成しているフォームは以下のような形です。

![イメージ説明](d0efd72385200b99c0243d33a58ec112.gif)


「種類」も「内容」もセレクトボックスを想定しています。
「種類」の中では「test1」「test2」と言う２つの値が選択できるようになっております。
また、これらはDBに存在するテーブルの名称となっています。(test1テーブル、test2テーブルという２つのテーブルがある状態です)

ここで質問なのですが、「種類」でtest1を選択した場合は「内容」でtest1のカラム情報を、
「種類」でtest2を選択した場合は「内容」でtest2のカラム情報を表示(選択)させるようにしたいのですが、
これはどのように実装すればよろしいのでしょうか。。

JavaScriptを使用しなければ実現不可能であることはわかるのですが、その実装方法がわからず・・・。

どなたか教えていただけないでしょうか。

[Rails]あるセレクトボックスで選択した値により、別のセレクトボックスで選択できる値を変更したい[JavaScript]

### 実現したいことと問題

「オブジェクトに格納されているプロパティに対して、順番に時間のかかる処理を行いたい、そして処理が全部終わってから、更に別の処理を実行したい。」という状況です。これを実現するために、Promiseを使って、再帰処理風にコードを書いてみました。

・ですが、順番に実行されたのは良いのですが、shifter().thenの中のconsole.logが実行されないようで、"thenの中"が表示されません。自分ではlateFuncの中のpromiseと同じように記述しているつもりですので、そちらはresolve後のthenが実行されて、こちらが実行されないという理由が分かりませんでした。

・'shifter()の中のresolveの後'と'lateFunc()の中のresolveの後'が表示されます。自分の理解ではresolveすると、処理がpromiseのthenに移ると思っていたんですが、何か誤解しているのでしょうか。

### ソースコード

```JavaScript
var hoge = {
  1:"manzana",
  2:"platano",
  3:"naranja",
  4:"ciluera",
  5:"fresa",
  6:"melocoton",
  7:"sandia",
  8:"uva",  
};

var props =Object.keys(hoge);

var value:string|undefined;

shifter().then(()=>{
  console.log('thenの中');
});

console.log('shifter()の次')

function shifter(){
  return new Promise((resolve, rejected)=>{
    console.log('shifter()の中のPromiseの後');
    if ((value = props.shift()) !== undefined){
      lateFunc(value).then(()=>{
        shifter();
      });
    }else{
      console.log('shifter()の中のelse');
      resolve();
      console.log('shifter()の中のresolveの後');
    }
  })
}

function lateFunc(arg:string){
  return new Promise((resolve, rejected)=>{
    setTimeout(()=> {
      console.log('lateFunc:'+arg);
      resolve();
      console.log('lateFunc()の中のresolveの後');
    }, 100);
  })
}

```

### 処理結果
```
shifter()の中のPromiseの後
add.page.ts:82 shifter()の次
add.page.ts:102 lateFunc:1
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:2
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:3
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:4
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:5
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:6
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:7
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:102 lateFunc:8
add.page.ts:104 lateFunc()の中のresolveの後
add.page.ts:86 shifter()の中のPromiseの後
add.page.ts:92 shifter()の中のelse
add.page.ts:94 shifter()の中のresolveの後
```

### 実行環境
試した環境は以下の３つで、いずれも同じ結果です。
 node v10.16.0
 ionic 5.2.4
 TypeScript.orgのplayGround http://www.typescriptlang.org/play/index.html

Javascript:Promiseをresolveしたけれどもthenが実行されない

###実現したいこと
対象の配列から
【Ａ】idの配列
【Ｂ】ソートされたオブジェクトの配列
を取得したいです。

いちおう処理はできたのですが、いかんせん素人レベルのコピペだらけで、余計な処理があるように思います。

それが最後にあるソースコードですが、もっとスッキリさせた書き方にできないかと思っています。
もしアドバイスいただけましたら幸いです。
###対象の配列
まずこれが対象の配列です。ここから【Ａ】【Ｂ】を取得したいわけです。
```
const iniArray = [
  {id: '1', x_num: '100', y_num: null, z_num: null },
  {id: '2', x_num: null, y_num: '400', z_num: null },
  {id: '3', x_num: null, y_num: null, z_num: '300' },
  {id: '4', x_num: null, y_num: '200', z_num: null }
];
```
###【Ａ】 
対象の配列から `extKeys`の指定値 が `null` でないオブジェクトの `id` の配列を取得するのが【Ａ】です。

たとえば `extKeys = [ 'x_num', 'y_num' ]` を指定した場合ならば、これらが`null`である`3`を除外して、次の配列がほしいということです。

```
[ '1', '2', '4' ] 
```

###【Ｂ】
対象の配列から `extKeys` が `null` でないオブジェクトを、「●_num」でソートして取得するのが【Ｂ】です。

先の【Ａ】で取得した`id`を持つオブジェクトを「●_num」でソートし、次のオブジェクトの配列がほしいということです。
```
[
  {id: '1', x_num: '100', y_num: null, z_num: null },
  {id: '4', x_num: null, y_num: '200', z_num: null }, 
  {id: '2', x_num: null, y_num: '400', z_num: null }
];
```
###素人ながら試したこと
以下があれこれ試行錯誤してできたコードになります。

1、2、3、4という処理ですが、ほしいのは【Ａ】【Ｂ】の情報（下記なら1、3の情報）だけなので、もっとスッキリさせた書き方にできないかと思っています。

ご指導ご鞭撻のほど、よろしくお願い申し上げます。
```
/*
対象の配列
*/
const iniArray = [
  {id: '1', x_num: '100', y_num: null, z_num: null },
  {id: '2', x_num: null, y_num: '400', z_num: null },
  {id: '3', x_num: null, y_num: null, z_num: '300' },
  {id: '4', x_num: null, y_num: '200', z_num: null }
];

/*
1. extKeysがnullじゃなければidを検索
*/
function getExtIds( iniArray, extKeys ){
  let array = [];
  for (let i=0; i < iniArray.length; i++) {
    for (let j=0; j < extKeys.length; j++) {
      if( iniArray[i][extKeys[j]] !== null ){
        const id = iniArray[i]["id"];
        array.push(id);
      }
    }
  }
  // extKeysが [ 'x_num', 'y_num' ] なので、[ '1', '2', '4' ] が取得される
  console.log('---検索されたidの配列---');
  console.log(array);
  return array;
}

/*
2. 検索したidを持つオブジェクトを抽出する
*/
function getExtObj( iniArray, extIds ){
  let array = [];
  for (let i=0; i < iniArray.length; i++) {
    for (let j=0; j < extIds.length; j++) {
      if( iniArray[i]["id"] == extIds[j] ){
        const extObj = iniArray.find( e=>e.id && e.id === extIds[j] );
        array.push(extObj);
      }
    }
  }
  console.log('---抽出されたオブジェクト---');
  console.log(array);
  return array;
}

/*
3. 抽出されたオブジェクトを「●_num」で並び替える
*/
function getSortObj( extObj ) {
	return extObj.sort((a,b) => (a.x_num || a.y_num || a.z_num) - (b.x_num || b.y_num || b.z_num));
}

/*
4. 処理を実行
*/
const extKeys = [ 'x_num', 'y_num' ];
const extIds  = getExtIds( iniArray, extKeys );
const extObj  = getExtObj( iniArray, extIds );
const result  = getSortObj( extObj );
console.log('---「●_num」でソートされたオブジェクト---');
console.log( result );








```

ＪＳの冗長な処理を簡易にしたい

同期処理を行った後に非同期処理を複数行いたいです。

次（//ここから）の場所から非同期処理(fc1~6)を6個ほど処理をさせたいのですが
書き方が分からず書いたためもっといい方法があれば教えていただけませんでしょうか？
よろしくお願いします。
```javascript
getlog().then(create).then(create2)//ここから 処理順番getlog→create→create2→fc1~6

////function
function getlog(){
return new Promise((resolve,reject)=>{
//処理....
resolve(hoge);
});
}
function create(data){
//処理.....
}
function create2(){
//処理.....
}
function fc1{}
function fc2{}
function fc3{}
function fc4{}
....

```