常連

注目の的

質問力

自己紹介

# テストコードからactionをdispatchしてaction内でaxiosを使用してモックへアクセスしたいのですが、actionに設置しているerrorに入り、以下のようにエラーとなります。
![イメージ説明](f6300e1d3aa826ebf2497a0aee61be6b.png)

# テストコード

```
import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'
import Vuex from 'vuex'
import { createLocalVue } from '@vue/test-utils'
import { cloneDeep } from 'lodash'
import { actions, mutations, state } from '../../store/data/test'
import CERTIFY_INFO from '../../plugins/mockData/api/test'

// beforeEachで毎回Storeを生成するために。
const initStore = () => {
  return cloneDeep({
    state,
    mutations,
    actions
  })
}

describe('callApiModule/actions', () => {
  let store
  let localVue

  beforeEach(() => {
    localVue = createLocalVue()
    localVue.use(Vuex)
    store = new Vuex.Store(initStore())
  })

  const mock = new MockAdapter(axios)
  afterEach(() => {
    mock.reset()
  })

it('certify test ', async () => {
    await store.dispatch('testAction', true)
    expect(store.state.result).toBe(0)
})
})

```

- dispatchされるアクション

```
async testAction (context, payload) {
    const reqBody = { hoge: 'hoge' }
    try {
      // 
      
      // 認証APIを呼び出す
      // ココでエラー！！！！！！!!!!!!
        const res = await this.$axios.$post(
        'postURL',
        reqBody
      )

      if (res) {
        // データ格納
        context.commit('setData', res)
      }
    } catch (e) {
      // エラーオブジェクトをラップしてスローする
      throw new Error(JSON.stringify(
        {
          errorObj: e,
          errorPlace: 'store.hoge/hoge',
          errorValue: {
            state: context.state
          }
        }
      ))
    }
  },

```

# axiosをモック化する必要があるようですが、その方法を調査中です。ご指摘あればいただけると助かります

jest + vueにてaxiosをモック化できない

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をスタブ化したい

Node.jsでローカルサーバー立てて、hyperupとかsassとか勉強してるのですが、
こないだ作った環境でつい先程まで動いてたローカルサーバーが急にエラーで動かなくなりました。

おかしいと思い、node_modulesを削除してnpm installで再インストールしたらみたことないエラーがでました。

```node
MacBook-Pro:sample sampleuser$ npm install

> fsevents@1.2.7 install /Users/sampleuser/git/sample/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/sampleuser/git/sample/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> grpc@1.18.0 install /Users/sampleuser/git/sample/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using needle for node-pre-gyp https download
[grpc] Success: "/Users/sampleuser/git/sample/node_modules/grpc/src/node/extension_binary/node-v64-darwin-x64-unknown/grpc_node.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN sample@1.0.0 No repository field.
npm WARN sample@1.0.0 scripts['server'] should probably be scripts['start'].

added 1067 packages from 494 contributors and audited 10798 packages in 21.772s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
```

nodeのバーションは、10.6.0
npmは、6.1.0
pythonは、2.7.10

ド素人すぎて、わからず困ってます。

nodeでローカルサーバーが作れない！npm installでnode-pre-gyp WARNが出てしまう

Vue.jsでSPAを作成しています。

エラーメッセージ等、何度も同じメッセージを使うこともあり、コンポーネントを跨いでいると書き換える時に大変です。
こういったメッセージを一括で管理する方法はあるのでしょうか？

調べてみた感じ、環境変数を使えばそれを実現できそうだなと思いましたが、
それがベストなのか分かりませんし、綺麗に管理する方法も分かりません。

そこで聞きたいのが

0. メッセージの一括管理をする方法は存在するか
0. 環境変数を用いた一括管理は妥当か
0. 妥当なら綺麗に管理する方法を教えて欲しい
0. 別のベストプラクティスが存在するのであれば教えて欲しい

宜しくお願いします。

Vue SPA　エラーメッセージや共通文字列を環境変数で管理するパターンはあるか

JavaScriptをブラウザ（Chrome）で表示させながら勉強中です。

別のファイルに記述したクラスをインポートして実行できるようにしたいのですが、上手くいきません。
どう修正したらいいかご教授願います。

【状況】
デベロッパーツールで"console"を表示させると、以下のように出る。
script.js:1 Uncaught SyntaxError: Cannot use import statement outside a module


ファイル構成：
index.html
script.js（メインのJavaScriptファイル）
class.js（これに書いているクラスをメインのJavaScriptファイルにインポートしたい）
（jsファイルはjsフォルダ直下に入れてある）


各ファイルは以下のように記述：

index.html
```
<!DOCTYPE html>
<html lang="ja">
<head>

</head>
<body>
    
    <script src="js/script.js"></script>

</body>
</html>
```

script.js
```
import TestConsole from "./class";

test = new TestConsole();
```

class.js
```
class TestConsole {
    constructor() {
        console.log("imported");
    }
}

export default TestConsole; 
```

JavaScript 別ファイルからクラスをインポートしたい

以下のような場合、もっとシンプルにかけないものでしょうか？

```ここに言語を入力
 var info = {
"aaa":{
"bbb":{"ccc":1}
}
}

if(info.aaa.bbb.ccc==1){
//ここに処理を書く
}
```

ここで info.aaa.bbb.ccc==1のチェックするためには、
```ここに言語を入力
if(info && info.aaa && info.aaa.bbb && info.aaa.bbb.ccc && info.aaa.bbb.ccc==1)
```
とキーごとに存在チェックを書いていかなければならないのでしょうか？

 phpでいうと、
```ここに言語を入力
if(empty($info['aaa']['bbb']['ccc'])==false && $info['aaa']['bbb']['ccc']==1)
```
のようにキーの存在チェックは一気にできますが、JSではできないのでしょうか？

ES6を使ってbabelで es2015に変換して使っていますので、ES6ならシンプルに書けるならそれでも結構です。

JS(ES6含む）での深い連想配列の変数チェック

現在angularの依存性注入について勉強しているのですが、useClass useFactiry useValueの使い方などは理解できたのですが、useExistingプロパティの具体的な利用場面や必要性がいまいちわからないため、誰かお教えいただけましたら幸いです

angular4 依存性注入について

macbook airを使っています。
ターミナルでemacsを起動する度に下記のエラーが出ます。

Emacs-x86_64-10_10[5647:247335] Failed to initialize color list unarchiver: Error Domain=NSCocoaErrorDomain Code=4864 "* -[NSKeyedUnarchiver _initForReadingFromData:error:throwLegacyExceptions:]: non-keyed archive cannot be decoded by NSKeyedUnarchiver" UserInfo={NSDebugDescription=* -[NSKeyedUnarchiver _initForReadingFromData:error:throwLegacyExceptions:]: non-keyed archive cannot be decoded by NSKeyedUnarchiver}

~/Library/ColorsでEmacs.clrを消去すると一時的に消えますが、再び起動したときにまたエラーメッセージが出ます。

MacBookでemacsを起動する際にエラーメッセージが出る

node.js,MongoDB,Javascript,HTMLを用いてシングルページのウェブアプリケーションを作成中です。
nodeを起動し、jsファイルからhtmlファイルを読み込ませています。
その中でhtmlファイルのコード（スクリプト部分）が長くなってきたので他の外部ファイル（js）に移動しようとしたら
「Uncaught SyntaxError: Unexpected token < ファイル名.js:1」
といったエラーが出てきてしまいました。
検索してもよくわからないのでここで質問させていただきました。
初歩的な質問で申し訳ありませんが、ご存知の方がいらっしゃったらご教授お願いいたします。
html部分は以下のようにし、jsを読み込んでいます。

```lang-html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset= "utf-8">
</head>
<body>
・・・・・・・・・・・

<script type="text/javascript" src="../script.js"></script>
</body>
</html>
```

補足です。
html内に

<script>
jsのファイルの中身
</script>

を記述したときには何もエラーが出ず、
jsファイルの１行目も
var number = 0;
と記述をしており、「<」といった記述がないため困っています。

Unexpected token <　のエラーについて

callメソッドは、引数にオブジェクトを入れると、callメソッドを利用する関数でその引数に入ったオブジェクトをthisとして扱うことが出来るメソッドで、
同じようにbindメソッドも引数にオブジェクトを入れると関数内でthisとして扱えるようになる、という認識を持っているのですがこれは合っておりますか。
callとbindの違いとして、callは関数を実行し、bindは新しく制限？された関数を作ったうえで実行すると書いてありました。全く意味が分からなかったので
書籍等を参考にしてみましたがラチがあかずに、ここを利用するに至りました。callとbindの違いって具体的にどう違うのでしょうか。
また、下記のサイトでもそうなのですが、「this」を使わないパターンの利用法もあるのですが、これはいったいどういうことなのでしょうか。

http://qiita.com/hosomichi/items/e11ad0c4ea79db2dee84

callとbindの違い

https://s8a.jp/javascript-image-processing-library-jimp

上記を参考にjimpを使って画像操作をしたいんですが、
jimpがBlobインターフェースを取り込む方法がわからなくて悩んでいます。

HTMLInputElementからFileを取得する動作は組めるんのですが
それをjimp.readにどう渡せば機能できますでしょうか？

jimpとFileインターフェースの組み合わせについて

下図の様に、input要素（textarea）と文字列がずれるのですが、高さを揃えるためにはどの様なCSSを書けばよいでしょうか。
inline -> div要素に直して、floatするとか？

![イメージ説明](97638e1ee84b176862f2b17dc098483c.png)

cssでinput要素の高さのずれを揃えたい

jqueryのプラグイン、FakeLoaderを使用しようとしたところ
Uncaught TypeError: a.indexOf is not a function
というエラーがでました、jqueryのバージョンで定義できないんでしょうか？
解決策がございましたら教えてください
```jquery
<script type="text/javascript" src="./js/prugin/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="./css/fakeLoader.css" type="text/css">
<script type="text/javascript" src = "./js/prugin/fakeLoader.min.js"></script>
 $("#fakeloader").fakeLoader({
                    timeToHide:1200,
                    zIndex:"999",
                    spinner:"spinner1",
                    bgColor:"#2ecc71",
                    imagePath:"images/sample.jpg"
                });
```
```html
<div id="fakeLoader">
            <h1>一覧</h1>
</div>
```

jquery FakeLoaderでエラーがでる

### 前提・実現したいこと

node.js + Expressをインストールして勉強しているNode初心者です。
Expressを使ってpostされてきた値を取得する方法で、気になることがあったのでご回答いただけたら嬉しいです。  

Express-generatorを使って作業ディレクトリを作りましたが、落ちてきたファイルのソースを見たときにapp.jsにもindex.jsにもbodyParser()をrequireしている箇所が見当たりません。
package-lock.jsonには"body-parser"の記述があることは確認しました。

ポスト値が取れるかテストコードを書いて、ブラウザからpostしたところreq.bodyプロパティで問題なくpost値を取得できたのですが、bodyParser()をapp.jsやindex.jsでrequireしていないのに値が取れるのはなぜでしょうか。

テストコードは以下を作成しました。
index.ejsで簡易フォーム作成
/indexにアクセス来たらindex.jsのミドルウェアを実行
/resultにpost送信したらresult.jsのミドルウェアを実行
app.jsで各マウントポイントにミドルウェアをマウント

回答してくださる方がいましたら、よろしくお願いいたします。

### 該当のソースコード
index.ejs

    <form action="/result" method="post">
      <input type="text" name="name" placeholder="name">
      <input type="text" name="age" placeholder="age">
      <input type="submit" value="送信">
    </form>

-----------------------
index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { 
    title: 'Hello Node.js'
  });
});

module.exports = router;

-------------
result.js

var express = require('express');
var router = express.Router();

router.post('/', function(req, res, next) {

  var name;
  var age;

  name = req.body.name;
  age  = req.body.age;

  res.render('result', {title: 'Hello Node.js',name: name, age: age });
});

module.exports = router;

------------------------
app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var resultRouter = require('./routes/result');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/result', resultRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

ExpressでPOSTされてきた値を取得する方法について

以下のhtmlでは「<P>コンテンツここが重なる</P>」がfooterに重なって表示されません。

やりたいことは、
 コンテンツが少なく画面がスクロールしない場合は画面の一番下にfooterを配置
 コンテンツが多く画面がスクロールする場合はスクロール終端（コンテンツの次）にfooterを配置する
です。

色々と調べてはおりますが、実現できておりません。
ご教示、お願い致します。

```ここに言語を入力
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    
    <style type="text/css">
      
</style>
  </head>
  <body>    
	<div class="container">
	  <header>ヘッダー</header>
	  <main>
	  <P>コンテンツ</P>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <P>コンテンツここが重なる</P>
	  </main>
	  <footer>フッター</footer>
	</div>  
</body>
</html>

```

footerを常に最下部にするとfooterがコンテンツに重なってしまう

いつもお世話になっております。本質問も皆様宜しくお願い致します。

タイトル通りではあるのですが、画像のアップロードを行う際にD&Dでアップロードを可能にしたいのですが、
```HTML
<input type="file" />
```
に対して、値をセットすることはできませんでしょうか？(Flash不可)

エリアを作り、そこにD＆Dでファイルを投げ込みそのまま画像のアップロードは可能なのですが、その他の情報とともに送信したいために画像ファイルはセットするだけに留めたいのです。

現在、HTML上に画像アップロードエリアを作り、D＆Dでファイルをセットする方法でchrome、safariについては以下の方法で可能でした

【W３Q】
[http://w3q.jp/t/8139](http://w3q.jp/t/8139)

しかし、IEとfirefoxには対応していない方法のためこちらの方法以外に何か方法がありましたら教えて頂きたいと思って質問させて頂きました。

以上、宜しくお願い致します。

inputのtype=fileに対して値をセットする方法

###前提・実現したいこと
Rubyの初心者です。

ハッシュのキーを変数で利用したいのですが、nilが帰ってきてしまいます。
R[:I]のように直接シンボルを書かずに、キーを変数で使いたいとき
どのようにすればいいのでしょうか。


###発生している問題・エラーメッセージ

=> nil

###該当のソースコード
```Ruby
R ={I:1, V:5, X:10}
input =["I","V","X"]
R[input[0]]

```

###試したこと
R ={I:1, V:5, X:10}
str = "I"
puts R[str]

変数をハッシュのキーとして利用できませんでした。


###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Ruby ハッシュのキーを変数で使いたい

###前提・実現したいこと
showModalDialog()を多用しているＷＥＢシステムにおいて、
Edgeブラウザ対応を実施したいと考えております。

Edgeでは、showModalDialog()が機能しなくなるため、
代替するダイアログにて改修しようとしている中で、
現状、jQuery UI dialogでの代替をすすめています。

既存処理が別ページのHTMLをダイアログ内に表示しているため、
iFrameを利用してdialog内に表示しているのですが、
既存ページ内の任意のボタンアクション（「保存」や「キャンセル」など画面毎に異なる）結果を
呼び出し元のページに渡したいのですが、その渡し方が現状不明な状況です。

iframe外の親画面とiframe内の子画面間のデータの受け渡し方法はネット上等に情報があるのですが、
ダイアログ自体（iframe外の親画面）の呼び出し元になる「親画面」と、
「iframe内の子画面」間のデータの受け渡し方法（呼び出し元での処理方法）を
ご教示いただきたいと存じます。

また、showModalDialogの代替方法として別手法をご存知でしたら、
ご教示いただけると幸いです。

何卒よろしくお願い申し上げます。

###補足情報(言語/FW/ツール等のバージョンなど)
VB.NET
VS2005
jQuery
AJAX

showModalDialogの代替方法について

ary = [1, 1, 1, 2, 3, 3]
には1 が3個、2 が1個、3 が2個ありますが、
これを
p ary.group_by 何とか
で書けたと思うのですが、忘れてしまいました。
どうすればよろしかったでしょうか？
（別に必ずしもgroup_by を使う必要はないです。）

P.S.
すいませんが、
Ruby 2.1 以下のときはどうすればいいですか？

配列に含まれている重複している数を数えるには？

０から１０までの整数の乱数を５つ生成して、空の配列に詰め込むってどういうコードを書けば良いのでしょうか？