常連

注目の的

質問力

自己紹介

### 前提・実現したいこと

Vue.jsの学習のためにシンプルなニュースアプリをローカルで作っています。
（プログラミングを独学している初心者です）

Vue.jsでaxiosを使ってphpからデータを受取り、
Vue.jsのdataプロパティに値を格納する所で苦戦しています。


### 発生している問題・エラーメッセージ

phpでは、DBから連想配列の形でデータを取り出し、
それをjson_encodeしてreturnしています。

僕の理解だと、このphpファイルにVue.jsからaxiosでアクセスして、
レスポンスされたデータをJSON.parseで変換すれば、
Vue.jsのDATAプロパティに格納できる...と考えているのですが、JSON.parse時に下記のエラーがでます。

```
SyntaxError: Unexpected token s in JSON at position 0
    at JSON.parse (<anonymous>)
    at app.js:14
```

### 該当のソースコード

```Vue
let url = 'http://localhost/kaigaigumi/mysql.php';

var app = new Vue({
    el:'#app',
    data: {
        posts:[],
    },
    mounted() {
        this.getDatas();
    },
    methods:{
        getDatas(){
            axios.get(url).then((response) => {
                this.posts = JSON.parse(response.data);
                console.log(this.posts);
            }).catch((error) => {
                console.log(error);
            });
        }
    }
})
```
```php
header('Access-Control-Allow-Origin: *');

try {
    $pdo = new PDO('mysql:host=127.0.0.1;dbname=dbbame;charset=utf8','root','root',
    array(PDO::ATTR_EMULATE_PREPARES => false));
    } catch (PDOException $e) {
     exit('データベース接続失敗。'.$e->getMessage());
    }

$sql = "SELECT * FROM news ORDER BY published DESC LIMIT 4";

$prepare = $pdo->prepare($sql);

$prepare->execute();

$results = $prepare->fetchAll(PDO::FETCH_ASSOC);

$results = json_encode($results,JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);

var_dump($results);

return $results;
```

phpの方でreturnしている値は下記のような内容になっています。
```
string(1714) "[
    {
        "id": 68,
        "title": "久保建英に大きく立ち塞がる“ファミリー”の壁 - スペイン発サッカー紀行 - 海外サッカーコラム - 日刊スポーツ",
        "published": "Wed, 30 Oct 2019 07:00:00 GMT",
        "image": "https://www.nikkansports.com/soccer/world/column/fromspain/news/img/201910300000299-w500_0.jpg",
        "link": "https://www.nikkansports.com/soccer/world/column/fromspain/news/201910300000299.html"
    },
    {
        "id": 54,
        "title": "久保建英の現状は「かわいそう」。後輩を慮りつつ充実の香川真司。（工藤拓） - Number Web",
        "published": "Wed, 29 Jan 2020 08:00:00 GMT",
        "image": "https://number.ismcdn.jp/mwimgs/d/5/-/img_d599ef67a62c1df8f98e5e1bf104da45180831.jpg",
        "link": "https://number.bunshun.jp/articles/-/842324"
    },
    {
        "id": 64,
        "title": "「18歳に見えない」久保建英、マジョルカ移籍はバルサ時代のコーチが影響? - ゲキサカ",
        "published": "Wed, 28 Aug 2019 07:00:00 GMT",
        "image": "https://f.image.geki.jp/data/image/news/2560/284000/283400/news_283400_1.jpg",
        "link": "https://web.gekisaka.jp/news/detail/?283400-283400-fl"
    },
    {
        "id": 44,
        "title": "久保建英がバルサを選ばなかった理由。世界一の育成組織がグラグラだ - Sportiva",
        "published": "Wed, 26 Jun 2019 07:00:00 GMT",
        "image": "https://sportiva.shueisha.co.jp/clm/football/wfootball/2019/assets_c/2019/06/kubotakehusa20190625-thumb-600x400-220215.jpg",
        "link": "https://sportiva.shueisha.co.jp/clm/football/wfootball/2019/06/26/post_64/"
    }
]"
```

### 試したこと

エラーでググると変換できない値が入ってる可能性があるとのことだったで、
試しにphpからreturnする値を下記くらいにシンプルなものにしてみました。

```
{"value1":1,"value2":2,"value3":3,"value4":4,"value5":5}
```
しかし、エラー内容は全く同じものが表示されました。

ということは、returnしている値の中に原因があるのではなく、
ここまでの手順の中で何か足りていない処理などがあるのでしょうか？？

ここからの切り分け方針の判断もつかず困っています。

どうにかphpから受け取った値をVue.jsのDATAプロパティに格納して使いたいです。

知識ある方アドバイスお願いします><

### 補足情報（FW/ツールのバージョンなど）

PHP 7.4.3
Vue.js v2.6.11

Vue.jsでaxiosを使ってphpからJsonでデータを受取りDATAプロパティに格納したい

JSONの中で、他の項目の値を参照することは可能でしょうか。
例えば、下のようなJSONで、bのValueにaのValueを参照するような定義です。
```Json
{
	"a": "1",
	"b": "aの値"
}
```

JSONの中で他の項目の値を参照できるか

### 前提・実現したいこと
アプリ開発は初めてです。javascriptは初級者です。

monacaとニフクラbackendを利用したアプリでメール・パスワードでのログイン機能を実装したいと思っています。
https://github.com/natsumo/MonacaUserDemoApp
↑こちらのテンプレートアプリを利用してメールアドレス認証、会員ログイン機能を実装しようとしましたが、登録ボタンを押すと下記のエラーが出て登録ができません。

### 発生している問題・エラーメッセージ
新規会員登録画面でメールアドレスを入力し、登録確認メールを送信するボタンを押すと下記のエラーが出ます。
```
Error: cannnot POST https://mbaas.api.nifcloud.com:443/2013-09-01/requestMailAddressUserEntry (404) 
```
また、ログイン画面でメールアドレスとパスワードを入力し、ログインボタンを押すと下記のエラーが出ます。
```
Error: cannnot GET https://mbaas.api.nifcloud.com:443/2013-09-01/login?mailAddres=hoge%40hoge.jp&password=hoge (404)
```

### 該当のソースコード

```jacascript
// [NCMB] APIキー設定
var appKey    = "ニフクラからコピーしたappキー";
var clientKey = "ニフクラからコピーしたclientキー";

// [NCMB] SDKの初期化
var ncmb = new NCMB(appKey, clientKey);

// ログイン中の会員
var currentLoginUser; 

/********** メールアドレス / PW 認証 **********/
// 【メール / PW 認証】「登録する」ボタン押下時の処理
function onEmailRegisterBtn() {
    // loading の表示
    $.mobile.loading('show');
    // 入力フォームからメールアドレス(mailAddress)を取得
    var mailAddress = $("#reg_mailAddress").val();
    // [NCMB] メールアドレス に会員登録を行うためのメールを送信
    ncmb.User.requestSignUpEmail(mailAddress)
             .then(function(user){
                 /* 処理成功 */
                 alert("【メール / PW 認証】新規登録メールを配信しました。");
                 console.log("【メール / PW 認証】新規登録メールを配信しました。");
                 alert("届いたメールに記載されているURLにアクセスし、パスワードを登録してください。");
                 // フィールドを空に
                 $("#reg_mailAddress").val("");
                 // loading の表示終了
                 $.mobile.loading('hide');
                 // 【メール / PW 認証】ログインページへ移動
                 $.mobile.changePage('#emailLoginPage');
             })
             .catch(function(error){
                 /* 処理失敗 */
                 alert("【メール / PW 認証】新規登録メールの配信に失敗しました：" + error);
                 console.log("【メール / PW 認証】新規登録メールの配信失敗しました：" + error);
                 // loading の表示終了
                 $.mobile.loading('hide');
             });
}

// 【メール / PW 認証】「ログインする」ボタン押下時の処理
function onEmailLoginBtn() {
    // 入力フォームからメールアドレス(mailAddress)とPW(password)を取得
    var mailAddress = $("#login_mailAddress").val();
    var password = $("#emailLogin_password").val();
    // loading の表示
    $.mobile.loading('show');
    // [NCMB] メール / PW でログイン
    ncmb.User.loginWithMailAddress(mailAddress, password)
             .then(function(user) {
                 /* 処理成功 */
                 console.log("【メール / PW 認証】ログインに成功しました");
                 // [NCMB] ログイン中の会員情報の取得
                 currentLoginUser = ncmb.User.getCurrentUser();
                 // フィールドを空に
                 $("#login_mailAddress").val("");
                 $("#emailLogin_password").val("");
                 // 詳細ページへ移動
                 $.mobile.changePage('#DetailPage');
             })
             .catch(function(error) {
                 /* 処理失敗 */
                 console.log("【メール / PW 認証】ログインに失敗しました: " + error);
                 alert("【メール / PW 認証】ログインに失敗しました: " + error);
                 // フィールドを空に
                 $("#login_mailAddress").val("");
                 $("#emailLogin_password").val("");
                 // loading の表示
                 $.mobile.loading('hide');
             });
}

/********** 共通 **********/
// 「ログアウト」ボタン押下後確認アラートで「はい」押下時の処理
function onLogoutBtn() {  
    // [NCMB] ログアウト
    ncmb.User.logout();
    console.log("ログアウトに成功しました");
    // ログイン中の会員情報を空に
    currentLoginUser = null;
    // currentUserDataリストを空に
    $("#currentUserData").empty();
    // 【ID / PW】ログインページへ移動
    $.mobile.changePage('#IDLoginPage');
}

//---------------------------------------------------------------------------

// アプリ起動時
$(function() {
    $.mobile.defaultPageTransition = 'none';
    /* メール / PW */
    $("#emailLoginBtn").click(onEmailLoginBtn);
    $("#YesBtn_mailAddress").click(onEmailRegisterBtn);
    $("#NoBtn_mailAddress").click(onDeleteField);  
    /* 共通 */
    $("#YesBtn_logout").click(onLogoutBtn);
});

// loading 表示生成
$(document).on('mobileinit',function(){
    $.mobile.loader.prototype.options;
});

// DetailPage ページが表示されるたびに実行される処理
$(document).on('pageshow','#DetailPage', function(e, d) {
    // currentUserData を表示
    getUserData();
    // loading の表示を終了
    $.mobile.loading('hide');
});

// currentUser のデータを表示する処理
function getUserData() {
    // 値を取得
    var objectId = currentLoginUser.get("objectId");
    var userName = currentLoginUser.get("userName");
    var mailAddress = currentLoginUser.get("mailAddress");
    var authData = JSON.stringify(currentLoginUser.get("authData"));
    var date = new Date(currentLoginUser.get("createDate"));
    var createDate = date.getFullYear() + "-" 
                    + ((date.getMonth() < 10) ? "0" : "") + date.getMonth() + "-"
                    + ((date.getDate() < 10) ? "0" : "") + date.getDate() + "T"
                    + ((date.getHours() < 10) ? "0" : "") + date.getHours() + ":"
                    + ((date.getMinutes() < 10) ? "0" : "") + date.getMinutes() + ":" 
                    + ((date.getSeconds() < 10) ? "0" : "") + date.getSeconds() + "." 
                    + ((date.getMilliseconds() < 10) ? "0" : "") + date.getMilliseconds() + "+09:00";
    // リストに追加
    $("#currentUserData").append("<tr style='border-right: 1px solid #ccc; border-left: 1px solid #ccc; color: #FFFFFF; background: #04162e;'><th scope='row' id='key'>key</th><td scope='row' id='value' style='width: 100%;'>value</td></tr>");
    $("#currentUserData").append("<tr><th>objectId</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + objectId + "'/></tr>");
    $("#currentUserData").append("<tr><th>userName</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + userName + "'/></tr>");
    $("#currentUserData").append("<tr><th>password</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='(hidden)'/></tr>");
    $("#currentUserData").append("<tr><th>mailAddress</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + mailAddress + "'/></tr>");
    $("#currentUserData").append("<tr><th>authData</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + authData + "'/></tr>");
    $("#currentUserData").append("<tr><th>createDate</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + createDate + "'/></tr>");
    // リストを更新
    $("#currentUserData").listview('refresh');
}

function onDeleteField() {
    // フィールドを空に
    $("#reg_mailAddress").val("");
}

```

### 試したこと

Cordovaバージョンアップグレード（CLI Version　7.1.0　→　9.0.0）
別のログイン認証テンプレート（https://github.com/NIFCLOUD-mbaas/monaca_login_template）を試してみても同じエラーが出ました。


### 補足情報（FW/ツールのバージョンなど）

monacaのデモ、実機（iPhone7）のデモでも同じエラーが出ます。
ニフクラの会員認証設定は「メールアドレス／パスワード認証を許可する」にチェックを、
メール設定は「確認メールの送信をする」にチェックを入れてあります。

monacaでメールアドレス認証の際cannnot POSTエラーが出る

### 前提・実現したいこと

MonacaでNIFCloudMBを使用してのプッシュ通知を実装したいと思います。

### 発生している問題・エラーメッセージ
window.NCMBオブジェクトが生成されません。

### 該当のソースコード

javascript
ソースコード
document.addEventListener("deviceready", function(){
		pushIni();
	},false);
function pushIni(){
	if(window.NCMB){
	        // プッシュ通知受信時のコールバックを登録します
                window.NCMB.monaca.setHandler
                (
                    function(jsonData){
                        // 送信時に指定したJSONが引数として渡されます
                        alert("callback :::" + JSON.stringify(jsonData));
                    }
                );

                var successCallback = function () {
                    //端末登録後の処理
                };
                var errorCallback = function (err) {
                    //端末登録でエラーが発生した場合の処理
                };
                // デバイストークンを取得してinstallation登録が行われます
                // ※ YOUR_APPLICATION_KEY,YOUR_CLIENT_KEYはニフクラ mobile backendから発行されたAPIキーに書き換えてください
                window.NCMB.monaca.setDeviceToken(
                    "YOUR_APPLICATION_KEY",
                    "YOUR_CLIENT_KEY",
                    successCallback,
                    errorCallback
                );

                // 開封通知登録の設定
                // trueを設定すると、開封通知を行う
                window.NCMB.monaca.setReceiptStatus(true);

                alert("DeviceToken is registed");

	}else{
		setTimeout(pushIni,1000);
		console.log("try");
	}
}

### 試したこと

ソース自体はWEBで探したサンプルコードほとんどそのままです。

1.まず最初にMonacaBackendでプッシュ通知を実装しました。あっさり動いたのですが着信時に音が出ないことや、プラナップしないとAPIが使えないなどの理由からニフサブに実装を変更することにしました。MonacaBackendeで動作確認が取れたことから、apple developerでの登録は問題ないと推測しています。

2.まずはWEBで見つけたサンプルを元にざっと実装して見ました。ですがカスタムビルドデバッガーで見るとエラーを吐いていました。
TypeError:undefined is not an object(evaluating 'window.NCMB.monaca)

3.あちこち記事を探して見ましたが、古い記事にオブジェクトはすぐに生成されるとは限らないので、時間をおいてなんども試せとあったので上記のソースに書き換えました。window.NCMBオブジェクトがなければ1秒待って再実行するようにです。その際、consoleにtryと書き出すようにしました。

4.結果はtryがずーっと並び、一向にwindow.NCMBが生成されないようです。

5.記事が古かったのでもしやと思い、NIFCloudMBを最新の3.xxから2.xxに変更して見ましたが、状況は変わりません。
### 補足情報（FW/ツールのバージョンなど）

monaca:PROプラン
mobile backend:無料プラン
iPhone SE
ios:13.3.1
実際にはYOUR_APPLICATION_KEY,YOUR_CLIENT_KEYはそれぞれ自分のものを記述しています。

MonacaでNIFCloudMBを使用してのプッシュ通知

###前提・実現したいこと
velocity.jsを使用して、アニメーションの設定を行っております。
clickと同時にイベントが発動する仕組みを作りました。
下記にソースを記述します。


```html
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>

<div class="box01">COME COME</div>
```
```css
.box01 {
  width: 100px;
  height: 100px;
  margin: 0 0 30px 0;
  background-color: #FA8072;
}
```


```js
$(function(){
	$('.box01').click(function(){
  //$.Velocity.mock = 10;
	  $(".box01")
	    .velocity(
	      { width: '10px'},
	      { duration: 1000,
	        easing:'easeInBounce',
	        queue: false,
	        delay:10 }
	    )
    });
});
```

###問題点
アニメーションは無事に動くのですが、
easing機能がうまく動いておりません、上記のソースの場合”easeInBounce”で跳ねるような挙動をするはずなのですが・・・・・・・全く跳ねずです。

何か記述が足りてないのでしょうか。お手数ですがご教示をお願い致します。
```

velocity.jsの使い方 -easing機能を使うには-

この度monacaを使ってAdmobの導入を行っているのですがうまくいきません。
具体的には以下サイトにデモ用のアプリがあるのですが、プロジェクトをインポートしたのですが、
表示されるボタンをクリックしても何も表示されません。

https://docs.monaca.io/ja/sampleapp/samples/admob/

(Admob ProのCordova pluginはインストール済み。Admobのコードも個人のに入れなおしました）
もし成功された方いらっしゃいましたら何か追加で必要な作業が必要か教えていただけないでしょうか。
お手数ですがよろしくお願いいたします。

Monaca Admob デモ用アプリ 不具合

```js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    list: [
      { id: 1, name: 'りんご', price: 100 },
      { id: 2, name: 'ばなな', price: 200 },
      { id: 3, name: 'いちご', price: 300 }
    ]
  },
  getters: {
    // listからidが一致する要素を返す
    item(state) {
      // 引数を使用するためアロー関数を返している
      return id => state.list.find(el => el.id === id)
    },
    // 別のゲッターを使うこともできる
    name(state, getters) {
      return id => getters.item(id).name
    }
  }
})
export default store
```

'return id => state.list.find(el => el.id === id)'や'return id => getters.item(id).name'のアロー関数で書かれた部分の記述の意味がいまいちわかりません。
ES6以前の書き方に戻した場合どういった書き方になるのでしょうか？
お手数ですがご教授よろしくお願い致します。

アロー関数について

MonacaとonsenUIを使って、勉強しつつハイブリッドアプリを制作しています。
タブバーをすべてのページのbottomに固定したいのですが、やり方がよくわかりません。

最初のテンプレートでonsenUI V2 JS Tabbarを使っているので、index.htmlに記述している以下
の４ページ（tab1.html～tab4.html）に関してはbottomに固定されているのですが、

<ons-navigator id="myNavigator" page="tabMain.html"></ons-navigator>
 
 <ons-template id="tabMain.html">
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="bottom">
      <ons-tab label="検索" icon="fa-search" page="tab1.html">
      </ons-tab>
      <ons-tab label="マイページ" icon="fa-user" page="tab2.html">
      </ons-tab>
      <ons-tab label="メッセージ" icon="fa-envelope-o" page="tab3.html">
      </ons-tab>
      <ons-tab label="その他" icon="fa-ellipsis-h" page="tab4.html">
      </ons-tab>
    </ons-tabbar>


これらの４ページから<ons-page></ons-page>で派生させているページに、

<ons-tabbar position="bottom">
      <ons-tab label="検索" icon="fa-search" page="tab1.html">
      </ons-tab>
      <ons-tab label="マイページ" icon="fa-user" page="tab2.html">
      </ons-tab>
      <ons-tab label="メッセージ" icon="fa-envelope-o" page="tab3.html">
      </ons-tab>
      <ons-tab label="その他" icon="fa-ellipsis-h" page="tab4.html">
      </ons-tab>
    </ons-tabbar>

上記のコードを記述してもタブバーがbottomに固定されません。
（position="bottom"としても固定されず、スクロールすると動いてしまいます）。

また、派生させているページのタブバーから各ページに行くとJavascriptが効いていないという現象も生じてしまいます。

どなたか原因がわかる方がいらっしゃれば教えていただければ幸いです。

よろしくお願いいたします。

タブバーをすべてのページのbottomに固定したい

### 前提・実現したいこと

webpackを使ってvue.jsの単一ファイルコンポーネントの設定を作っております。
vue.jsの単一ファイルコンポーネントの設定までは完了しました。
その状態からコンポーネント内でのstyle内でscssを使いたいと考えているのですが、うまくいきませんでした。

### 発生している問題・エラーメッセージ
コマンドプロンプトでのエラー文を掲載します。
単一ファイルコンポーネントのstyleの箇所で怒られているようです。

![イメージ説明](414f62ed1d0e4b01ed21a845f71a518a.png)




##### 該当のソースコード

###package.json
・単一ファイルコンポーネントとsassを設定するためのパッケージを配置しました。
```
{
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.19"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.2.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^2.0.0",
    "file-loader": "^2.0.0",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.19",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "private": true
}

```

###webpack.config.json
・webpackの日数が浅いためにこのファイルの記述には自信が無いです。
ちなみに下記の設定でvue単一ファイルコンポーネントのバンドルには成功しました。
sassを読み込むための設定もここに追記が必要なのでしょうか。
```
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',

  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },

      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
          ]
        }
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
};

```

#####単一ファイルコンポーネント
```
<template>
  <div class="app">
    <h1>
      jyagarikogyagariko
      <span>112345678</span>
    </h1>
    <sub-component message="My Counter for Vue.js with Babel"></sub-component>
  </div>
</template>

<script>
import SubComponent from "./SubComponent.vue";
export default {
  components: {
    SubComponent
  }
};
</script>

<style scoped lang="scss">
h1 {
  display: block;
  margin: 0 auto;
  padding: 1em;
}

.app {
  text-align: center;
  font-family: "Roboto", sans-serif;
}
</style>

```

お手数ではございますが、
webpackに詳しいお方がいらっしゃいましたら、ご教示をお願い致します。